a { color: #333 } @keyframes scale-in-bottom { 0% { transform: scale(0.5); transform-origin: 50% 100%; opacity: 0 } 100% { transform: scale(1); transform-origin: 50% 100%; opacity: 1 } } @keyframes slide-out-bottom { 0% { transform: translateY(0); opacity: 1 } 100% { transform: translateY(40px); opacity: 0 } } @keyframes fade-event-in-bottom { 0% { transform: translateY(40px); opacity: 0 } 100% { transform: translateY(0px); opacity: 1 } } @keyframes menu-left { 0% { left: 0; opacity: 0 } 100% { left: 170px; opacity: 1 } } @keyframes menu-left-out { 0% { left: 170px; opacity: 1 } 100% { left: 0; opacity: 0 } } @keyframes video-border { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); opacity: .4 } 100% { box-shadow: 0 0 0 20px rgba(255,255,255,.6); opacity: 1 } } @keyframes width-animate { 0% { width: 0 } 100% { width: 100% } } @keyframes zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) } 50% { opacity: 1 } } .banner-wrap { background: url("../image/callcenter_bg.png") no-repeat center top/cover; height: 400px; } .banner-wrap2 { background: url("../image/video_banner_bg4.png") no-repeat center bottom/cover; height: 400px; } .banner-wrap3 { background: url("../image/video_banner_bg2.png") no-repeat center bottom/cover; height: 400px; } .banner-wrap4 { background: url("../image/video_banner_bg3.png") no-repeat center bottom/cover; height: 400px; } .call-box { display: flex; align-items: center; height: 400px; color: #333; } .call-box h1 { font-size: 2em; } .call-box p { font-size: 1.4rem; line-height: 1.7; color: #666; margin-top: 10px; } .call-box .banner-apply-box { display: flex; margin-top: 40px; } .call-box .banner-apply-box a { display: block; width: 140px; height: 42px; line-height: 42px; border-radius: 4px; font-size: 16px; text-align: center; color: #fff; transition: all .3s ease-in-out; background: linear-gradient(90deg, #2f91d4 0%, #1881c9 100%) } .call-box .banner-apply-box a:hover { box-shadow: 0 10px 25px 0 rgba(24,129,201,.5) } .call-box .banner-apply-box a:nth-child(2) { margin-left: 20px; color: #333; background: #fff; transition: all .3s ease-in-out } .call-box .banner-apply-box a:nth-child(2):hover { box-shadow: 3px 15px 15px rgba(255,255,255,.1) } .banner-video-box { width: -moz-fit-content; width: fit-content; position: relative; margin-right: 25% } .banner-video-box .video-button { width: 55px; height: 55px; line-height: 55px; text-align: center; background-color: #a1a4b0; box-shadow: 0 2px 8px rgba(0,0,0,.15); border-radius: 50%; position: absolute; z-index: 10; top: 50%; left: 50%; cursor: pointer; transform: translate(-50%, -60%); transition: all .3s ease-in-out } .banner-video-box .video-button i { font-size: 30px; margin-left: 4px; font-weight: bold; color: #fff } .banner-video-box .video-button:hover { background-color: #f55b5e } .banner-video-box .video-button:hover i { color: #fff } .banner-video-box .video-button::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; content: ""; width: 55px; height: 55px; background: rgba(0,0,0,0); z-index: 1; animation: video-border 1s linear infinite } .advan-box { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; height: 265px } .advan-box .advan { width: 25%; padding: 30px 20px; background-color: #f2f5fa; transition: all .1s ease-in-out } .advan-box .advan:nth-child(even) { background-color: #edf3fc } .advan-box .advan img { width: 28px } .advan-box .advan .normal { display: block } .advan-box .advan .hover { display: none } .advan-box .advan h3 { font-size: 18px; line-height: 2; margin-top: 10px } .advan-box .advan p { color: #6e7080; height: 71.4px; line-height: 1.7 } .advan-box .active { padding: 60px 20px; width: 25%; color: #fff; background: linear-gradient(90deg, #2f91d4 0%, #1881c9 100%); } .advan-box .active .normal { display: none } .advan-box .active .hover { display: block } .advan-box .active p { font-size: 14px; color: rgba(255,255,255,.8) } .mana-box { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1260px; padding: 0 30px; gap: 25px } .mana-box .mana-link { flex: 1; min-width: 40% } .mana-box .mana-link-top { width: 100% } .mana-box .flex { gap: 20px } .mana-top { width: 100%; padding: 60px 40px 30px 40px; position: relative; overflow: hidden; border-radius: 8px; display: flex; align-items: center; border: 1px solid #f0f0f0; background: url("../image/index_mana_top_bg.png") no-repeat right center/100% 100%; transition: all .3s ease-in-out } .mana-top:hover { transform: translateY(-5px); box-shadow: 0px 5px 20px 0px rgba(47,72,88,.07) } .mana-top:hover .mana-text .mana-more { opacity: 1; margin-left: 0 } .mana-top .mana-text .mana-link-link { display: block; font-size: 24px; font-weight: bold; line-height: 1; color: #000; margin-bottom: 15px } .mana-top .mana-text .mana-link-link img { height: 18px; vertical-align: top } .mana-top .mana-text p { font-size: 16px; line-height: 1.7; color: #282b42; margin-bottom: 20px } .mana-top .mana-text ul { padding-left: 20px; margin-bottom: 10px } .mana-top .mana-text ul li { font-size: 15px; color: #282b42; line-height: 1.7; list-style: disc } .mana-top .mana-text strong { color: #1881c9; font-weight: normal } .mana-top .mana-text .mana-more { display: block; width: -moz-fit-content; width: fit-content; overflow: hidden; padding: 4px 12px; color: #fff; background: linear-gradient(90deg, #2f91d4 0%, #1881c9 100%); border-radius: 4px; transition: all .3s ease-in-out } .mana-top .mana-text .mana-more i { font-size: 12px; margin-left: 4px } .mana-top .mana-text .mana-more-link { margin-top: 30px; display: flex; align-items: center } .mana-top .mana-text .mana-more-link a { display: block; color: #1881c9; font-size: 15px; padding: 0 10px; position: relative; transition: all .2s ease-in-out } .mana-top .mana-text .mana-more-link a:not(:last-child):after { content: "|"; font-weight: bold; color: #ccc; font-size: 12px; position: absolute; top: 0px; right: 0 } .mana-top .mana-text .mana-more-link a:first-child { padding-left: 0 } .mana-top .video-button { width: 55px; height: 55px; line-height: 55px; text-align: center; background-color: #a1a4b0; box-shadow: 0 2px 8px rgba(0,0,0,.15); border-radius: 50%; position: absolute; z-index: 10; top: 50%; right: 22%; cursor: pointer; transform: translate(-50%, -60%); transition: all .3s ease-in-out } .mana-top .video-button i { font-size: 30px; margin-left: 4px; font-weight: bold; color: #fff } .mana-top .video-button:hover { background-color: #f55b5e } .mana-top .video-button:hover i { color: #fff } .mana-top .video-button::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; content: ""; width: 55px; height: 55px; background: rgba(0,0,0,0); z-index: 1; animation: video-border 1s linear infinite } .mana-item-box { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between } .mana-item { width: 100%; height: 100%; overflow: hidden; padding: 60px 0 40px 40px; border-radius: 8px; display: flex; justify-content: center; border: 1px solid #f0f0f0; background: url("../image/solu_sence_bg.png") no-repeat center center/100% 100%; transition: all .3s ease-in-out } .mana-item .mana-text { flex: 1 } .mana-item .mana-text .mana-link-link { display: block; font-weight: bold; font-size: 24px; line-height: 1; color: #000; margin-bottom: 15px } .mana-item .mana-text p { font-size: 16px; line-height: 1.7; color: #282b42; margin-bottom: 20px; min-height: 47.6px } .mana-item .mana-text ul { padding-left: 20px; margin-bottom: 10px; min-height: 105.2px } .mana-item .mana-text ul li { font-size: 15px; color: #282b42; line-height: 1.7; list-style: disc; margin-top: 8px; margin-bottom: 8px } .mana-item .mana-text strong { color: #1881c9; font-weight: normal } .mana-item .mana-text .mana-more { display: block; width: -moz-fit-content; width: fit-content; overflow: hidden; padding: 4px 12px; color: #fff; background: linear-gradient(90deg, #2f91d4 0%, #1881c9 100%); border-radius: 4px; transition: all .3s ease-in-out } .mana-item .mana-text .mana-more i { font-size: 12px; margin-left: 4px } .mana-item .mana-img { width: 48%; margin-left: 2%; margin-bottom: 5%; align-self: center } .mana-item .mana-img img { max-width: 100%; opacity: 1; transition: all .3s ease-in-out } .mana-item:hover { transform: translateY(-5px); box-shadow: 0px 5px 20px 0px rgba(47,72,88,.07) } .mana-item:hover .mana-text .mana-more { margin-left: 0; opacity: 1 } .mana-link:nth-child(n+4) .mana-text ul li:last-child { height: auto !important } .mana-link:nth-child(4) .mana-text ul li:first-child { height: auto !important } .mana-link:nth-child(4) .mana-text ul li:last-child { height: 48px !important } .call-video-wrap { padding-top: 130px; background: url("../image/call_video_bg.png") no-repeat center top/cover } .call-video-wrap .call-video-box { justify-content: space-between; align-items: center } .call-video-wrap .call-video-text { flex: 1; margin-right: 5% } .call-video-wrap .call-video-text h3 { margin-bottom: 30px; font-weight: bold } .call-video-wrap .call-video-text p { font-size: 16px; line-height: 1.7 } .call-video-wrap .shadow-active { box-shadow: 0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5) } .call-video-wrap .call-video { width: 45%; border-radius: 4px; overflow: hidden; position: relative } .call-video-wrap .call-video video { max-width: 100% } .call-video-wrap .video-button { width: 55px; height: 55px; line-height: 55px; text-align: center; background-color: #a1a4b0; box-shadow: 0 2px 8px rgba(0,0,0,.15); border-radius: 50%; position: absolute; z-index: 10; top: 50%; left: 50%; cursor: pointer; transform: translate(-50%, -60%); transition: all .3s ease-in-out } .call-video-wrap .video-button i { font-size: 30px; margin-left: 4px; font-weight: bold; color: #fff } .call-video-wrap .video-button:hover { background-color: #f55b5e } .call-video-wrap .video-button:hover i { color: #fff } .call-video-wrap .video-button::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; content: ""; width: 55px; height: 55px; background: rgba(0,0,0,0); z-index: 1; animation: video-border 1s linear infinite } .call-feature-wrap .call-feature-box { align-items: stretch } .call-feature-wrap .call-feature-box .call-feature { flex: 1; border-radius: 8px; overflow: hidden; background-color: #f9fbfe; border: 1px solid #e2e7ed; transition: all .3s ease-in-out } .call-feature-wrap .call-feature-box .call-feature:nth-child(2) { margin: 0 30px } .call-feature-wrap .apply-btn-box { width: -moz-fit-content; width: fit-content; margin: 40px auto 0 } .call-feature .call-feature-header { padding-left: 30px; align-items: center; height: 70px; background: linear-gradient(90deg, #7b9efc 0%, #527ae3 100%) } .call-feature .call-feature-header img { max-height: 26px; margin-right: 15px } .call-feature:nth-child(2) .call-feature-header { background: linear-gradient(90deg, #9d94e6 0%, #6874d0 100%) } .call-feature:nth-child(3) .call-feature-header { background: linear-gradient(96deg, #7684c3 0%, #2e418e 100%) } .call-feature .call-feature-content { height: 100%; padding: 30px 10px 30px 25px; background: url("../image/call_feature_bg.png") no-repeat center center/cover } .call-feature .call-feature-phone { height: 201.2px } .call-feature .call-feature-phone p { display: flex; line-height: 1.7 } .call-feature .call-feature-phone p:nth-child(2) { margin-bottom: 8px } .call-feature .call-feature-phone p span { font-size: var(--font-size); margin-right: 10px; color: #282b42 } .call-feature h3 { font-size: 20px; line-height: 3; font-weight: bold; color: #fff } .call-feature h3 i { font-size: 24px; vertical-align: -1px; margin-right: 8px; color: #b9bcc5 } .call-feature h4 { font-size: 18px; line-height: 1; margin-bottom: 20px } .call-feature p { font-size: 15px; line-height: 2; color: #282b42 } .call-feature:hover { cursor: defalut; transform: translateY(-8px); box-shadow: -1px 29px 42px 4px rgba(190,213,255,.34); border: solid 1px #9dbcf7 } .compare-wrap { padding-top: 50px; background: url("../image/gover_solu_bg.png") no-repeat center bottom/cover } .compare-wrap .title span { font-size: 40px; font-weight: bold } .compare-wrap .compare-box { max-width: 1080px; display: flex; align-items: flex-start; justify-content: space-between } .compare-left { width: 45%; position: relative; top: 20px; border-radius: 30px 0px 0px 0px; padding-bottom: 20px; overflow: hidden; background-color: #fff; box-shadow: 0px 12px 12px 1px #eff0f4 } .compare-left h3 { position: relative; font-size: 24px; line-height: 90px; text-align: center; color: #fff; border-radius: 30px 0px 0px 0px; background: linear-gradient(217deg, #9d92e3 0%, #735cd0 100%) } .compare-left h3::after { content: "TRADIITIONAL"; position: absolute; opacity: .2; top: 0; right: 10%; font-size: 40px; font-weight: bold; height: 100%; background: linear-gradient(90deg, transparent 0%, #fff 100%); background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,0) } .compare-left .compare-item { width: -moz-fit-content; width: fit-content; min-width: 55%; height: 60px; line-height: 60px; display: flex; align-items: center; margin-left: 20%; border-bottom: 1px solid #e7edf5 } .compare-left .compare-item:last-child { border-bottom: none } .compare-left .compare-item i { font-size: 18px; color: #c3c9d5 } .compare-left .compare-item p { font-size: 15px; line-height: 1.7; color: #282b42; margin-left: 15px } .compare-right { width: 55%; padding-bottom: 40px; background-color: #f5f9ff; box-shadow: 0px 5px 20px 0px rgba(47,72,88,.07) } .compare-right h3 { position: relative; font-size: 24px; line-height: 110px; text-align: center; border-radius: 0px 30px 0px 0px; background: linear-gradient(40deg, #74a1f5 0%, #456bef 100%); color: #fff } .compare-right h3::after { content: "INTELLIGENT"; position: absolute; opacity: .2; top: 0; right: 10%; font-size: 40px; font-weight: bold; height: 100%; background: linear-gradient(90deg, transparent 0%, #fff 100%); background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,0) } .compare-right .compare-item { width: -moz-fit-content; width: fit-content; min-width: 50%; height: 60px; line-height: 60px; display: flex; align-items: center; margin-left: 20%; border-bottom: 1px solid #e7edf5 } .compare-right .compare-item:last-child { border-bottom: none } .compare-right .compare-item i { font-size: 18px; color: #4383fa } .compare-right .compare-item p { font-size: 15px; line-height: 1.7; color: #000; margin-left: 15px } .call-sence-box { background-color: #f4f7fa; padding: 20px 0 } .call-sence-box .call-sence-tab h3 { font-size: 16px; font-weight: bold; line-height: 2.5; text-indent: 30px; padding-right: 20px; cursor: default; border-left: 4px solid rgba(0,0,0,0) } .call-sence-box .call-sence-tab h3.active { background-color: #fff; color: #f23c3c; border-left: 4px solid #f23c3c } .call-sence-box .call-sence-content { flex: 1; margin-left: 8%; padding-right: 2% } .call-sence-box .call-sence-content .call-sence { display: flex; align-items: center; justify-content: space-between; cursor: default } .call-sence-box .call-sence-content .call-sence .call-sence-text { flex: 1 } .call-sence-box .call-sence-content .call-sence .call-sence-img { width: 40%; margin-left: 4% } .call-sence-box .call-sence-content h4 { font-size: 24px; line-height: 4 } .call-sence-box .call-sence-content p { font-size: 16px; line-height: 1.7 } .call-item-wrap .gray { padding-top: 80px; padding-bottom: 80px; margin-top: 80px; margin-bottom: 80px } .call-item-box { display: flex; justify-content: center; gap: 2% } .call-item-box .call-item-text { flex: 1 } .call-item-box .call-item-img { width: 52% } .call-item-text h3 { margin-bottom: 30px } .call-item-text h4 { font-size: 26px; margin-top: 20px; margin-bottom: 30px } .call-item-text h5 { font-size: 18px; line-height: 1; margin-bottom: 10px; transition: all .2s ease-in-out } .call-item-text h6 { font-size: 15px; line-height: 2; color: #282b42 } .call-item-text .has{ font-size: 1.06em; margin-bottom: 0; } .call-item-text .has::before{ content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 10px; border-radius: 50%; background-color: #1881c9; } .call-item-text p { font-size: 15px; color: #6e7080; margin-top: 8px; } .call-item-text p::before{ content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 10px; border-radius: 50%; background-color: #1881c9; } .call-item-text .flex-phone2 p{ margin-top: 5px; } .call-item-text .flex-phone2 p::before{ display: none; } .call-item-text .call-item-text-img { min-width: 37px } .call-item-text .call-item-text-img img { width: 22px; margin-right: 15px } .call-item-text .call-item-text-img .hover { display: none } .call-item-text .flex { margin-bottom: 25px } .call-item-text .flex:hover .hover { display: block } .call-item-text .flex:hover .normal { display: none } .call-item-text .flex:hover h5 { color: #eb485b } .call-item-text .flex-phone { display: block } .call-item-text .apply-btn-box { margin-top: 0; margin-left: 0 } .call-item-text .call-item-kefu { display: block; width: 200px; height: 48px; line-height: 48px; text-align: center; color: #fff; background: linear-gradient(90deg, #2f91d4 0%, #1881c9 100%); border-radius: 4px 4px 4px 4px } .call-sys-wrap { background: #f2f5f9 url("../image/call_sys_bg.png") no-repeat left top/cover; text-align: center } .call-sys-wrap .title-p { color: #6e7080 } .call-sys-wrap img { max-width: 960px } .edition-wrap { background: url("../image/call_edition_wrap.png") no-repeat left top/cover } .edition-wrap .edition-box { display: flex; justify-content: space-between; align-items: center } .edition-wrap .price-box { display: flex; justify-content: center; margin-top: 40px } .edition-wrap .price-box a { display: block; width: 160px; height: 40px; line-height: 40px; text-align: center; font-size: var(--font-size); border-radius: 4px; color: #636363; background-color: #f0f0f0; transition: all .3s ease-in-out } .edition-wrap .price-box a:hover { box-shadow: 3px 15px 15px rgba(0,0,0,.1) } .edition-wrap .price-box a:first-child { color: #fff; background-color: #1881c9; background: linear-gradient(to right, #2f91d4, #1881c9) } .edition-wrap .price-box a:first-child:hover { box-shadow: 0 10px 25px 0 rgba(24,129,201,.5) } .edition { width: 30%; background-color: #fff; border-radius: 8px; overflow: hidden; transition: all .3s ease-in-out } .edition:hover { cursor: defalut; transform: translateY(-10px); box-shadow: -1px 10px 20px 4px rgba(190,213,255,.34) } .edition:hover .edition-buy { color: #fff; border: 1px solid #6d74cc; background: #6d74cc } .edition .edition-header { padding: 20px 0; text-align: center; color: #fff; background: url("../image/call_edition1.png") no-repeat top left/100% } .edition .edition-header h3 { font-size: 24px } .edition .edition-header p { font-size: 15px; width: 70%; opacity: .8; margin: 5px auto 0; line-height: 1.7 } .edition .edition-center-header { background: url("../image/call_edition2.png") no-repeat top left/100% } .edition .edition-right-header { background: url("../image/call_edition3.png") no-repeat top left/100% } .edition h4 { font-size: 16px; margin-top: 15px; color: #282b42; text-align: center } .edition h4 span { color: #333 } .edition h4 i { font-size: 30px; font-weight: bold; font-style: normal; color: #333; margin: 0 3px } .edition .edition-buy { display: block; margin: 15px auto; width: 220px; height: 38px; line-height: 38px; border-radius: 3px; color: #6d74cc; background: #f2efff; border: 1px solid #6d74cc; text-align: center; transition: all .3s ease-in-out } .edition .edition-con { padding-left: 35%; margin-bottom: 30px } .edition .edition-con h4 { font-size: var(--font-size); line-height: 1.7; color: #6e7080; text-align: left; margin-bottom: 5px } .edition .edition-con p { font-size: 15px; line-height: 2.2; color: #333 } .edition .edition-con p:last-child { padding-left: 20px; line-height: 1.5 } .edition .edition-con p i { font-size: 13px; color: #9b95eb; margin-right: 5px } .edition:nth-child(2) { width: 32%; z-index: 9; overflow: visible; position: relative; box-shadow: 0px 5px 20px 0px rgba(47,72,88,.07) } .edition:nth-child(2):hover { box-shadow: -1px 10px 20px 4px rgba(190,213,255,.34) } .edition:nth-child(2):hover .edition-buy { color: #fff; border: 1px solid #f46b6b; background: #f46b6b } .edition:nth-child(2) .price-most-hot { position: absolute; top: -7px; right: -8px } .edition:nth-child(2) .edition-buy { color: #ec3a3a; background: #ffe7e7; border: 1px solid #ec3a3a } .edition:nth-child(2) .edition-con { margin-bottom: 40px } .edition:nth-child(2) .edition-con i { color: #f15b5b } .edition:nth-child(3) { width: 30%; z-index: 9; box-shadow: 0px 5px 20px 0px rgba(47,72,88,.07) } .edition:nth-child(3):hover { box-shadow: -1px 10px 20px 4px rgba(190,213,255,.34) } .edition:nth-child(3):hover .edition-buy { color: #fff; border: 1px solid #6ba3f7; background: #6ba3f7 } .edition:nth-child(3) .edition-tips { font-size: 13px; color: #6e7080; text-align: center; font-weight: bold } .edition:nth-child(3) .edition-buy { margin-bottom: 35px; color: #6ba3f7; border: 1px solid #6ba3f7; background: rgba(107,163,247,.1) } .edition:nth-child(3) .edition-con { padding-left: 30px; padding-right: 30px } .edition:nth-child(3) .edition-con p { line-height: 1.7 } .edition:nth-child(3) .edition-con p:last-child { color: #6e7080; margin-top: 20px; margin-bottom: 85px; padding-left: 0 } .edition:nth-child(3) .edition-con i { color: #5b93f1 } .apply-btn-box { width: -moz-fit-content; width: fit-content; margin: 40px auto 0 } .call-more-box { display: flex; flex-wrap: wrap; justify-content: space-between; transition: all .4s ease-in-out; background-color: #e9ecf1; border: 1px solid #e9ecf1; gap: 1px } .call-more-box .call-more { display: block; flex: 1; min-width: 24%; overflow: visible; padding: 30px 0; background-color: #fff; position: relative; text-align: center } .call-more-box .call-more img { height: 32px } .call-more-box .call-more h3 { font-size: 17px; margin: 20px 0 5px } .call-more-box .call-more p { color: #6e7080; font-size: var(--font-size) } .call-more-box .call-more .order-hover { cursor: default; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; background-color: #fff; font-size: 16px; padding: 0 26px; color: #282b42; z-index: 5; opacity: 0; transition: all .3s ease-in-out } .call-more-box .call-more:hover { cursor: defalut; background-color: #f9fbfd; z-index: 5; transition: all .3s ease-in-out; box-shadow: 1px 13px 29px 3px rgba(217,226,237,.74) } .call-more-box .call-more:hover h3 { color: #f52c3b } .use-box { display: flex; align-items: center; justify-content: space-between } .use-left { width: 25%; position: relative; z-index: 10 } .use-left .use-tab { display: flex; align-items: center; cursor: pointer; padding: 5% 10% 5% 12%; min-height: 84px; } .use-left .use-tab i { font-size: 18px; line-height: 1; margin-right: 8%; font-weight: bold; font-style: normal; color: #e0e1e6 } .use-left .use-tab h4 { font-size: 18px } .use-left .use-tab h5 { font-size: 16px } .use-left .use-tab .show { display: none } .use-left .use-tab p { display: none; overflow: hidden; height: 0; font-size: 15px; margin-top: 0 } .use-left .use-tab img { height: 8px; margin-left: 18% } .use-left .use-tab.active { color: #fff; transition: box-shadow .1s ease-in-out; background: linear-gradient(90deg, #2f91d4 0%, #1881c9 100%); box-shadow: 0px 12px 27px 0px rgba(24,129,201,.5); } .use-left .use-tab.active .hide { display: none } .use-left .use-tab.active .show { display: block } .use-left .use-tab.active i { font-size: 28px; color: #fff } .use-left .use-tab.active p { display: block; height: 20px; margin-top: 6px; color: #fff; } .use-left .use-tab.active img { display: none } .use-right { flex: 1; margin-left: -3%; padding: 5% 8%; position: relative; display: flex; flex-direction: column; justify-content: center; background: url("../image/call_use_bg.png") no-repeat left top/cover } .use-right .use-line { width: 80px; height: 3px; margin: 20px 0; border-radius: 1.5px; background-color: #ff4545 } .use-right h4 { font-size: 24px } .use-right h5 { font-size: 16px; max-width: 70%; line-height: 1.7; margin-bottom: 20px } .use-right p { color: #6e7080; font-size: var(--font-size); line-height: 2 } .use-right p i { font-size: 12px; font-weight: bold; color: #ff4545; margin-right: 10px } .use-right .use-active { z-index: 9; animation: fade-event-in-bottom .5s ease-out .2s both } .use-right .out { animation: slide-out-bottom .2s ease-out both; position: absolute } .call-honor-wrap { padding-bottom: 60px; background: url("../image/call_honor_bg.png") no-repeat left top/cover } .call-honor-wrap .title-p span { color: #f23c3c; font-weight: bold } .call-honor-wrap .call-honor-video { width: 40%; border-radius: 12px; overflow: hidden; position: relative; position: relative } .call-honor-wrap .call-honor-video video { width: 100% } .call-honor-wrap .call-honor-video .video-button { width: 55px; height: 55px; line-height: 55px; text-align: center; background-color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); border-radius: 50%; position: absolute; z-index: 10; top: 50%; left: 50%; cursor: pointer; transform: translate(-50%, -60%); transition: all .3s ease-in-out } .call-honor-wrap .call-honor-video .video-button i { font-size: 30px; margin-left: 4px; font-weight: bold; color: #f83838 } .call-honor-wrap .call-honor-video .video-button:hover { background-color: #f55b5e } .call-honor-wrap .call-honor-video .video-button:hover i { color: #fff } .call-honor-wrap .call-honor-video .video-button::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; content: ""; width: 55px; height: 55px; background: rgba(0,0,0,0); z-index: 1; animation: video-border 1s linear infinite } .call-honor-wrap .call-honor-box .call-honor-right { flex: 1; margin-left: 20px } .call-honor-wrap .call-honor-box .call-honor-right img { width: 100% } .call-fuwu-wrap .call-fuwu-box { background-color: #fff } .call-fuwu-wrap .fuwu-wrap { display: flex; align-items: flex-start; justify-content: space-between; gap: 60px; padding: 70px 50px; background-color: #eff3f7 } .call-fuwu-wrap .price-box { display: flex; justify-content: center; margin-top: 40px } .call-fuwu-wrap .price-box a { display: block; width: 110px; height: 40px; line-height: 40px; text-align: center; font-size: var(--font-size); border-radius: 4px; color: #636363; background-color: #f0f0f0; transition: all .3s ease-in-out } .call-fuwu-wrap .price-box a:hover { box-shadow: 3px 15px 15px rgba(0,0,0,.1) } .call-fuwu-wrap .price-box a:first-child { margin-right: 25px; color: #fff; background-color: #1881c9; background: linear-gradient(to right, #2f91d4, #1881c9) } .call-fuwu-wrap .price-box a:first-child:hover { box-shadow: 0 10px 25px 0 rgba(24,129,201,.5) } .call-fuwu-tab { display: flex; max-width: 700px; margin: 0 auto 20px; justify-content: space-between; cursor: pointer } .call-fuwu-tab li { position: relative; font-size: 18px; line-height: 1; padding-bottom: 11px; color: #282b42; margin-right: 120px; border-bottom: 2px solid #1881c9 } .call-fuwu-tab li span { position: absolute; left: 0; bottom: -2px; display: block; height: 8px; width: 100%; z-index: 20; background-color: #fff; transition: all .3s ease-in-out } .call-fuwu-tab li.active,.call-fuwu-tab li:hover { color: #1881c9 } .call-fuwu-tab li.active:after,.call-fuwu-tab li:hover:after { content: ""; position: absolute; left: 50%; margin-left: -4px; bottom: -5px; width: 8px; height: 8px; border-top: 2px solid #1881c9; border-left: 2px solid #1881c9; background-color: #fff; z-index: 10; transform: rotate(45deg) } .call-fuwu-tab li.active span,.call-fuwu-tab li:hover span { transform: translateX(100%) } .call-fuwu-tab li:last-child { margin-right: 0 } .call-fuwu { margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; transition: all .4s ease-in-out } .call-fuwu .call-fuwu-item { flex: 1 } .call-fuwu .call-fuwu-item-center { margin: 0 65px } .call-fuwu h4 { width: 100%; font-size: 16px; line-height: 1; text-align: center; margin-bottom: 40px } .call-fuwu h5 { font-size: 16px; margin: 25px 0 15px } .call-fuwu h5 i { color: #eb2929; font-style: normal; margin-right: 8px } .call-fuwu p { font-size: var(--font-size); line-height: 1.7; color: #6e7080 } .call-fuwu-bottom { display: flex; justify-content: space-evenly } .call-fuwu-bottom .call-fuwu-bottom-item { width: 30% } .call-fuwu-bottom .call-fuwu-bottom-item img { width: auto; height: 160px } .call-fuwu-bottom .call-fuwu-bottom-item h4 { font-size: 18px; line-height: 4; color: #000 } .call-fuwu-bottom .call-fuwu-bottom-item p { width: 94%; margin: 0 auto; font-size: var(--font-size); line-height: 1.7; color: #6e7080 } .call-state-wrap { padding-bottom: 40px } .call-state-wrap .call-state-box { position: relative; padding: 0 80px; overflow: hidden; display: flex; justify-content: space-between } .call-state-wrap .call-state-box::after { content: ""; position: absolute; top: 55px; left: 80px; right: 80px; display: block; width: calc(100% - 160px); height: 1px; background-color: #b2c2e5 } .call-state-wrap .call-state-box .swiper-slide { width: 25%; flex-shrink: 0; margin-bottom: 40px } .call-state-wrap .call-state-box .swiper-slide:hover { cursor: pointer } .call-state-wrap .call-state-box .swiper-slide:hover .tooltip { color: #fff; background-color: #f83838 } .call-state-wrap .call-state-box .swiper-slide:hover .tooltip::after { background-color: #f83838 } .call-state-wrap .call-state-box .swiper-slide:hover .call-state-line { background-color: #f83838 } .call-state-wrap .swiper-button-prev { position: absolute; top: 0 !important; left: 0 !important; width: 60px; height: 100%; background-color: #f4f7fa } .call-state-wrap .swiper-button-prev div { position: absolute; top: 45px; left: 0; width: 50px; height: 50px; border-radius: 30px; justify-content: center; align-items: center; z-index: 10; color: #a9c0f2; transition: all .3s ease-in-out; background-color: #dae3f7; display: flex; box-shadow: 0px 5px 5px 0px rgba(217,218,228,.2) } .call-state-wrap .swiper-button-prev div i { color: #a9c0f2; font-size: 36px; margin-left: -8px } .call-state-wrap .swiper-button-prev::after { display: none; font-size: 24px; font-weight: bolder } .call-state-wrap .swiper-button-prev:hover { color: #333 } .call-state-wrap .swiper-button-prev .swiper-button-disabled { cursor: not-allowed; pointer-events: auto } .call-state-wrap .swiper-button-next { position: absolute; top: 0 !important; right: 0 !important; width: 80px; height: 100%; background-color: #f4f7fa } .call-state-wrap .swiper-button-next div { position: absolute; top: 45px; right: 0; width: 50px; height: 50px; border-radius: 30px; justify-content: center; align-items: center; z-index: 10; color: #a9c0f2; transition: all .3s ease-in-out; background-color: #dae3f7; display: flex; font-size: 36px; box-shadow: 0px 5px 5px 0px rgba(217,218,228,.2) } .call-state-wrap .swiper-button-next div i { margin-left: 8px; color: #a9c0f2; font-size: 36px } .call-state-wrap .swiper-button-next::after { display: none; font-size: 24px; font-weight: bolder; margin-left: 5px } .call-state-wrap .swiper-button-next:hover { color: #333 } .call-state-wrap .swiper-button-next .swiper-button-disabled { cursor: not-allowed; pointer-events: auto } .call-state-top .tooltip { position: relative; width: -moz-fit-content; width: fit-content; font-size: 13px; margin: 0 auto 25px; padding: 3px 15px; border-radius: 4px; transition: all .15s ease-in-out; box-shadow: 0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5),0 8px 16px 0 rgba(0,0,0,.05),0 6px 10px 0 rgba(0,0,0,.05) } .call-state-top .tooltip::after { display: inline-block; position: absolute; z-index: 9; content: ""; width: 10px; height: 10px; bottom: -5px; left: calc(50% - 5px); transform: rotate(45deg); background-color: #f4f7fa; transition: all .15s ease-in-out } .call-state-top .call-state-line { width: 10px; height: 10px; margin: 0 auto; border-radius: 5px; background-color: #b2c2e5; animation: line 2s linear infinite } .call-state { display: block; margin-top: 25px; border-radius: 8px; overflow: hidden; transition: all .3s ease-in-out; box-shadow: 0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5) } .call-state img { width: 100%; aspect-ratio: 16/9; -o-object-fit: cover; object-fit: cover } .call-state p { padding: 30px 15px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; background-color: #fff } .call-state:hover { box-shadow: 0px 13px 24px 0px rgba(198,210,219,.23) } .call-help { width: 30%; padding: 30px; background: linear-gradient(180deg, #f7fcff 0%, #edf3fc 100%); transition: all .3s ease-in-out } .call-help:hover { transform: translateY(-8px); box-shadow: 0px 5px 20px 0px rgba(47,72,88,.07) } .call-help h3 { line-height: 36px; margin-bottom: 24px; } .call-help h3 img { height: 28px; margin-right: 5px } .call-help p{ font-size: 14px; line-height: 1.8; } .call-help p::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 10px; border-radius: 50%; background-color: #282b42 } .question-box { align-items: stretch; border: 1px solid #dfdeea } .question-box .question-left { width: 40%; background-color: #eff3f8 } .question-box .question-left a { display: block; height: 66px; line-height: 66px; padding-left: 60px; font-size: 16px } .question-box .question-left a:hover { background-color: #fff } .question-box .question-left .active { background-color: #fff } .question-box .question-left .active span { font-weight: bold; color: #f72424 } .question-box .question-left span { font-size: 16px; font-weight: bold; color: #b0b6c3; margin-right: 10px } .question-box .question { width: 60%; padding: 50px 35px; transition: all .3s ease-in-out; box-shadow: 0 15px 30px rgba(0,0,0,.1),translate3d(0, -2px, 0) } .question-box .question:hover { box-shadow: 0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5) } .question-box .question .question-question { display: flex; align-items: center; font-size: 16px; font-weight: bold } .question-box .question .question-question span { display: block; width: 27px; height: 27px; margin-right: 15px; font-size: 16px; font-weight: bold; text-align: center; color: #f53f4d; background-color: #ffdede; border-radius: 5px 5px 5px 5px } .question-box .question .question-answer { display: flex; margin-top: 20px; color: #282b42; line-height: 1.7 } .question-box .question .question-answer span { display: block; width: 27px; height: 27px; margin-right: 15px; font-size: 16px; font-weight: bold; text-align: center; color: #fff; background-color: #f53f4d; border-radius: 5px 5px 5px 5px } .question-box .question .question-answer p { flex: 1; height: 72px } .question-box .question .question-more { display: block; margin-top: 25px; color: #f51c1c } .question-box .question .question-more span { margin-left: 4px; transition: all .3s ease-in-out } .question-box .question .question-more:hover span { margin-left: 8px } .fix-video-box { width: 900px; height: auto; position: fixed; z-index: 10000; top: 100px; left: calc(50% - 450px); border-radius: 10px; animation: zoomIn .5s ease-in-out } .fix-video-box i { font-size: 20px; color: #6e7080; position: absolute; top: 8px; right: 15px; z-index: 2; cursor: pointer } .fix-video-box i:hover { color: #282b42 } .fix-video-box video { width: 100%; height: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.15) } .menu-left-wrap { position: fixed; left: -160px; top: 50%; transform: translateY(-50%); width: 285px; height: 470px } .menu-left-wrap .menu-left-box { position: absolute; top: 50%; left: 0px; padding: 15px 20px 15px 0; font-size: var(--font-size); cursor: pointer; transform: translateY(-50%); border-radius: 4px; background-color: #fff; box-shadow: 4px 4px 20px rgba(55,99,170,.05),-4px -4px 20px rgba(55,99,170,.05); transition: all .3s ease-in-out } .menu-left-wrap .menu-left-box p { line-height: 2.7; text-indent: 15px; border-left: 4px solid rgba(0,0,0,0) } .menu-left-wrap .menu-left-box p.active { color: #f83838; border-left: 4px solid #f83838 } .menu-left-wrap .menu-left-box p:hover { color: #f83838 } .menu-left-wrap .menu-button-box { position: absolute; top: 50%; left: 170px; padding: 12px 6px; border-radius: 20px; letter-spacing: 4px; border: 3px solid #fff; color: #fff; background-color: #ff4141; font-size: var(--font-size); cursor: pointer; transform: translateY(-50%); box-shadow: 4px 4px 20px rgba(55,99,170,.05),-4px -4px 20px rgba(55,99,170,.05); transition: all .3s ease-in-out } .menu-left-wrap .menu-button-box p { writing-mode: vertical-lr } .menu-left-wrap .menu-button-box p i { font-size: 12px; margin-top: 5px } .menu-left-wrap .menu-left-active { animation: menu-left .3s ease-in-out; left: 170px } .menu-left-wrap .menu-left-out { animation: menu-left-out .3s ease-in-out; left: 0 } .res-img-wrap .res-img-box { max-width: 1030px } @media screen and (min-width: 992px)and (max-width: 1199px) { } @media screen and (min-width: 768px)and (max-width: 991px) { .call-wrap { height: 350px } .call-box { height: 100% } .call-box h1 { font-size: 24px } .call-box p { font-size: 16px } .call-box p br { display: none } .call-box .nav-apply-box { display: flex } .call-box .nav-apply-box a { margin-top: 20px; width: 102px; height: 34px; line-height: 34px; border-radius: 4px; font-size: var(--font-size) } .banner-video-box { height: 240px } .call-menu-box a { margin-right: 10% } .call-hard-box .call-hard { padding: 3% } .call-hard-box .call-hard h3 { font-size: 18px; line-height: 1.5 } .call-hard-box .call-hard h4 { font-size: var(--font-size) } } @media screen and (max-width: 768px) { .apply-btn-box { margin-top: 0 } .banner-wrap { width: 100%; height: 30rem; padding-bottom: 0; } .banner-wrap .call-box { max-width: 100%; height: 100%; justify-content: center; flex-wrap: wrap; align-items: flex-start; background-size: 65%; background-position: center bottom; } .banner-wrap .call-box h1 { color: #333; font-size: 2.4rem; text-align: center; line-height: 1.5; margin-top: 25%; margin-bottom: 3% } .banner-wrap .call-box p { max-width: 90%; margin: 0 auto; font-size: 1.4rem; text-align: center; color: #666; opacity: .8; line-height: 1.7 } .banner-wrap .call-box .banner-apply-box { display: flex; justify-content: center } .banner-wrap .call-box .banner-apply-box a { width: 10.2rem; height: 3.4rem; line-height: 3.4rem; border-radius: .4rem; font-size: 1.4rem } .banner-video-box { background: url(../image/callcenter_banner_video_top.png) no-repeat left top/100% 2rem; margin-top: 3rem; padding-top: 2rem; width: 100%; height: auto; width: -moz-fit-content; width: fit-content; position: relative; margin: 0 3% } .banner-video-box .video-box { position: absolute; top: 2rem; left: 0; width: 100%; height: 20rem; background: #f1f3f9 url(../image/callcenter_banner_video_bg.png) no-repeat left top/100% 100% } .banner-video-box .video-button { width: 5.5rem; height: 5.5rem; line-height: 5.5rem; box-shadow: 0 .2rem .8rem rgba(0,0,0,.15) } .banner-video-box .video-button i { font-size: 3rem; margin-left: .4rem } .banner-video-box .video-button::after { width: 5.5rem; height: 5.5rem } .banner-video-box video { width: 100% } .mana-box{ gap: 15px; } .advan-box { height: auto } .advan-box .advan { width: 49%; padding: 2rem 1rem; margin-bottom: 2% } .advan-box .advan img { width: 2rem } .advan-box .advan h3 { font-size: 1.5rem; line-height: 2; margin-top: 1rem } .advan-box .advan p { color: #6e7080; height: 7.14rem; line-height: 1.7 } .advan-box .active { padding: 2rem 1rem; width: 49% } .advan-box .active p { color: #fff; opacity: .8 } .mana-box { max-width: 100%; padding: 0; } .mana-top { width: 100%; padding: 3rem 1.5rem; margin-bottom: 1rem; border-radius: .8rem; background: url("../image/index_mana_top_bg.png") no-repeat center center/auto 100%; transition: all .3s ease-in-out } .mana-top:hover { transform: translateY(-5px); box-shadow: 0px 5px 20px 0px rgba(47,72,88,.07); background: url("../image/index_mana_top_bg.png") no-repeat center center/auto 105% } .mana-top .mana-text .mana-link-link { display: block; font-size: 1.4rem; font-weight: bold; line-height: 1; color: #444; margin-bottom: 1.5rem } .mana-top .mana-text p { font-size: 1.2rem; line-height: 1.7; color: #6e7080; margin-bottom: 1rem } .mana-top .mana-text ul { padding-left: 1.5rem; margin-bottom: 0 } .mana-top .mana-text ul li { color: #282b42; font-size: 1.1rem; line-height: 2; list-style: disc } .mana-top .mana-text .mana-more { display: none } .mana-item { width: 100%; padding: 2rem 1rem 2rem 1rem; flex-wrap: wrap; background: url("../image/solu_sence_bg.png") no-repeat center center/100% 100% } .mana-item .mana-text { width: 100%; min-width: 100% } .mana-item .mana-text .mana-link-link { display: block; font-size: 1.4rem; font-weight: bold; line-height: 1; color: #444; margin-bottom: 1.5rem; min-height: 0 } .mana-item .mana-text p { font-size: 1.2rem; line-height: 1.7; min-height: 6.7rem; color: #6e7080; margin-bottom: 0 } .mana-item .mana-text ul { display: none; padding-left: 0rem; margin-bottom: 1rem } .mana-item .mana-text ul li { color: #282b42; font-size: 1.2rem; line-height: 1.7; list-style: none } .mana-item .mana-text .mana-more { display: none } .mana-item .mana-img { width: 90%; margin-left: 2% } .mana-item .mana-img img { max-width: 100%; opacity: 1; transform: scale(0.95); transition: all .3s ease-in-out } .mana-item:hover { transform: translateY(-0.5rem); background: url("../image/solu_sence_bg.png") no-repeat center center/110% 110%; box-shadow: 0rem .5rem 2rem 0rem rgba(47,72,88,.07) } .mana-item:hover .mana-img img { transform: scale(1); opacity: .9 } .mana-item:hover .mana-text .mana-more { text-indent: 1rem } .call-page-wrap { margin-top: 0; margin-bottom: 0 } .call-page-box { max-width: 80%; height: 5rem; margin: -2.5rem auto 2rem; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); box-shadow: 0rem .8rem 1.6rem .1rem #e7edf7; border-radius: 2.5rem } .call-page-box a { line-height: 5rem } .call-page-box a img { max-width: 2rem; margin-right: .8rem } .call-page-box a h4 { font-size: 1.4rem; font-weight: bold } .call-page-box a .call-page-underline { bottom: -0.2rem; height: .2rem } .call-page-box .call-page-line { width: .1rem; height: 3rem } .call-video-wrap { padding-top: 2rem } .call-video-wrap .call-video-box { flex-wrap: wrap } .call-video-wrap .call-video-text { width: 100%; flex: none; margin-right: 0 } .call-video-wrap .call-video-text h3 { text-align: center; margin-bottom: 2rem } .call-video-wrap .shadow-active { box-shadow: 0 0 .8rem 0 rgba(232,237,250,.6),0 .2rem .4rem 0 rgba(232,237,250,.5) } .call-video-wrap .call-video { width: 100%; border-radius: .8rem; position: relative; margin-top: 2rem } .call-video-wrap .call-video video { max-width: 100% } .call-video-wrap .video-button { width: 5rem; height: 5rem; line-height: 5rem; text-align: center; background-color: #a1a4b0; box-shadow: 0 .2rem .8rem rgba(0,0,0,.15); border-radius: 50%; position: absolute; z-index: 10; top: 50%; left: 50%; cursor: pointer; transform: translate(-50%, -60%); transition: all .3s ease-in-out } .call-video-wrap .video-button i { font-size: 3rem; margin-left: .4rem; font-weight: bold; color: #fff } .call-video-wrap .video-button:hover { background-color: #f55b5e } .call-video-wrap .video-button:hover i { color: #fff } .call-video-wrap .video-button::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; content: ""; width: 5.5rem; height: 5.5rem; background: rgba(0,0,0,0); z-index: 1; animation: video-border 1s linear infinite } .call-feature-wrap { padding-top: 1rem } .call-feature-wrap .call-feature-box { flex-wrap: wrap } .call-feature-wrap .call-feature-box .call-feature { flex: auto; width: 100%; border-radius: .8rem } .call-feature-wrap .call-feature-box .call-feature:nth-child(2) { margin: 2rem 0 } .call-feature .call-feature-header { padding-left: 2rem; height: 4rem } .call-feature .call-feature-header img { max-height: 2rem; margin-right: 1.5rem } .call-feature .call-feature-content { padding: 2rem 1rem 2rem 2rem; background: url("../image/call_feature_bg.png") no-repeat center center/cover } .call-feature .call-feature-phone { height: auto } .call-feature .call-feature-phone p { display: flex; line-height: 1.7 } .call-feature .call-feature-phone p:nth-child(2) { margin-bottom: .8rem } .call-feature .call-feature-phone p span { font-size: 1.4rem; margin-right: 1rem; color: #282b42 } .call-feature h3 { font-size: 1.6rem; line-height: 3; font-weight: bold; color: #fff } .call-feature h3 i { font-size: 2.4rem; vertical-align: -0.1rem; margin-right: .8rem; color: #b9bcc5 } .call-feature h4 { font-size: 1.5rem; line-height: 1; margin-bottom: 1rem } .call-feature p { font-size: 1.3rem; line-height: 2; color: #6e7080 } .call-feature:hover { cursor: defalut; transform: translateY(-0.8rem); box-shadow: -0.1rem 2.9rem 4.2rem .4rem rgba(190,213,255,.34); border: solid .1rem #9dbcf7 } .call-sence-wrap { background-color: #f4f7fa } .call-sence-box { background-color: #f4f7fa; padding: 0 0 3rem 0; flex-wrap: wrap } .call-sence-box .call-sence-tab { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap } .call-sence-box .call-sence-tab h3 { width: 33%; font-size: 1.4rem; line-height: 2.5; text-indent: 1rem; padding-right: 1rem; border-left: .4rem solid rgba(0,0,0,0) } .call-sence-box .call-sence-tab h3.active { border-left: .4rem solid #f23c3c } .call-sence-box .call-sence-tab h3:nth-child(n+4) { margin-top: 1rem } .call-sence-box .call-sence-content { flex: 1; margin-top: 3rem; margin-left: 1.5rem; padding-right: 1.5rem } .call-sence-box .call-sence-content .call-sence { display: flex; flex-direction: column; align-items: center; justify-content: space-between; cursor: default } .call-sence-box .call-sence-content .call-sence .call-sence-text { flex: 1 } .call-sence-box .call-sence-content .call-sence .call-sence-img { width: 60%; margin-left: 0; margin-top: 1rem } .call-sence-box .call-sence-content h4 { text-align: center; font-size: 1.6rem; font-weight: bold; line-height: 1.5; margin-bottom: 1.5rem } .call-sence-box .call-sence-content p { font-size: 1.2rem; line-height: 1.7 } .call-item-wrap .gray { padding-top: 3rem; padding-bottom: 3rem; margin-top: 3rem; margin-bottom: 3rem } .call-item-box { gap: 0; flex-wrap: wrap } .call-item-box .call-item-text { flex: auto } .call-item-box .pl-40 { padding-left: 0 } .call-item-box .call-item-img { margin-top: 2rem; width: 100% } .call-item-text h3 { font-size: 1.6rem; text-align: center; margin-bottom: 1.5rem } .call-item-text h4 { font-size: 1.8rem; margin-top: 1rem; margin-bottom: 2rem; text-align: center } .call-item-text h5 { font-size: 1.6rem; line-height: 1; margin-bottom: 1rem; transition: all .2s ease-in-out } .call-item-text h6 { font-size: 1.3rem; line-height: 2; color: #282b42 } .call-item-text p { color: #6e7080; white-space: normal } .call-item-text .call-item-text-img img { width: 2.2rem; margin-right: 2.5rem } .call-item-text .flex { margin-bottom: 2.5rem } .call-item-text .flex:nth-last-child(2) { margin-bottom: 0 } .call-item-text .flex-phone { display: block; margin-bottom: 1.5rem } .call-item-text .apply-btn-box { margin-top: 2rem; margin-left: auto } .call-item-text .call-item-kefu { display: none } .call-sys-wrap img { max-width: 96% } .edition-wrap { background: url("../image/call_edition_wrap.png") no-repeat left top/cover } .edition-wrap .title-p { max-width: 90%; margin-left: auto; margin-right: auto; margin-bottom: 1rem } .edition-wrap .edition-box { max-width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-around } .edition-wrap .price-box { display: flex; justify-content: center; margin-top: 2rem } .edition-wrap .price-box a { display: block; width: 10.2rem; height: 3.4rem; line-height: 3.4rem; text-align: center; font-size: 1.4rem; border-radius: .4rem; color: #636363; background-color: #f0f0f0; transition: all .3s ease-in-out } .edition-wrap .price-box a:hover { box-shadow: .3rem 1.5rem 1.5rem rgba(0,0,0,.1) } .edition-wrap .price-box a:first-child { margin-right: 0; color: #fff; background-color: #1881c9; background: linear-gradient(to right, #2f91d4, #1881c9) } .edition-wrap .price-box a:first-child:hover { box-shadow: 0 1rem 2.5rem 0 rgba(24,129,201,.5) } .edition { width: 94% !important; margin-left: auto; margin-right: auto; margin-top: 2rem } .edition .edition-header { padding: 1rem 0; border-radius: .8rem .8rem 0 0; background-size: cover } .edition .edition-header h3 { font-size: 1.6rem } .edition .edition-header p { font-size: 1.2rem; width: 94%; height: auto } .edition:nth-child(2) .price-most-hot { width: 50px; position: absolute; top: -6px; right: -6px } .edition:nth-child(3) .edition-buy { margin-bottom: 15px; color: #6ba3f7; border: 1px solid #6ba3f7; background: rgba(107,163,247,.1) } .edition:nth-child(3) .edition-tips { display: none } .edition .edition-buy { display: block; width: 102px; height: 34px; line-height: 34px } .edition .edition-con { display: none } .edition h4 { font-size: 1.3rem; margin-top: 1.5rem } .edition h4 span { color: #333 } .edition h4 i { font-size: 2rem } .edition .edition-tips { font-size: 1.1rem; color: #f14036; text-align: center; font-weight: bold } .edition ul { width: auto; margin-left: 20%; font-size: 1.1rem; margin-top: 1rem; margin-bottom: 1.5rem; line-height: 2; transform: translateX(0%); word-break: keep-all } .edition:nth-child(3) .edition-con p:last-child { color: #6e7080; margin-top: 20px; margin-bottom: 4rem; padding-left: 0 } .call-more-box { max-width: 92%; border-radius: .4rem; overflow: hidden; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; transition: all .4s ease-in-out } .call-more-box div.call-more { flex: 1; min-width: 33%; padding: 2rem 0 2rem 1rem } .call-more-box div.call-more img { max-height: 2rem } .call-more-box div.call-more h3 { font-size: 1.3rem; margin: 1rem 0 0 } .call-more-box div.call-more p { display: none; color: #6e7080; font-size: 1.1rem } .call-more-box div.call-more:nth-child(3n+3) { border-right: 1px solid #e8ecf1 } .call-more-box div.call-more:nth-child(4) { border-right: none } .call-more-box div.call-more:nth-child(8) { border-right: none } .call-more-box .call-more:hover { cursor: defalut; background-color: #f9fbfd; z-index: 5; transition: all .3s ease-in-out; box-shadow: .1rem 1.3rem 2.9rem .3rem rgba(217,226,237,.74) } .call-honor-wrap { padding-bottom: 4rem; background: url("../image/call_honor_bg.png") no-repeat left top/cover } .call-honor-wrap .title-p { max-width: 94%; margin-left: auto; margin-right: auto } .call-honor-wrap .title-p span { color: #f23c3c; font-weight: bold } .call-honor-wrap .call-honor-video { width: 100%; border-radius: 1.2rem; margin-bottom: 2rem; position: relative } .call-honor-wrap .call-honor-video video { width: 100% } .call-honor-wrap .call-honor-video .video-button { width: 5.5rem; height: 5.5rem; line-height: 5.5rem; box-shadow: 0 .2rem .8rem rgba(0,0,0,.15) } .call-honor-wrap .call-honor-video .video-button i { font-size: 3rem; margin-left: .4rem } .call-honor-wrap .call-honor-video .video-button::after { width: 5.5rem; height: 5.5rem } .call-honor-wrap .call-honor-box .call-honor-right { width: 100%; flex: auto; margin-left: 0 } .call-honor-wrap .call-honor-box .call-honor-right img { width: 100% } .use-box { flex-wrap: wrap } .use-left { width: 100%; margin-bottom: 2rem } .use-left .use-tab { padding: 3% 10% 3% 12%; min-height: 0 } .use-left .use-tab i { font-size: 1.6rem } .use-left .use-tab h4 { font-size: 1.4rem } .use-left .use-tab h5 { font-size: 1.4rem } .use-left .use-tab img { height: .7rem; margin-left: 18% } .use-left .use-tab.active { box-shadow: 0rem 1.1rem 1.8rem .1rem rgba(95,124,180,.3216) } .use-left .use-tab.active i { font-size: 2.4rem } .use-left .use-tab.active p { height: 1.8rem; margin-top: .6rem } .use-right { flex: 1; margin-left: 0; padding: 5% } .use-right .use-line { width: 8rem; height: .3rem; margin: 1rem 0; border-radius: .15rem } .use-right h4 { font-size: 1.6rem } .use-right h5 { font-size: 1.3rem; max-width: 100%; margin-bottom: 2rem } .use-right p { display: flex; align-items: flex-start; color: #6e7080; font-size: 1.2rem; line-height: 2 } .use-right p i { font-size: 1.2rem; margin-right: 1rem } .use-right .use-active { z-index: 9; animation: fade-event-in-bottom .5s ease-out .2s both } .use-right .out { animation: slide-out-bottom .2s ease-out both; position: absolute } .call-fuwu-wrap .fuwu-wrap { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 2rem 1.5rem; background-color: #eff3f7 } .call-fuwu-wrap .price-box { display: flex; justify-content: center; margin-top: 2rem } .call-fuwu-wrap .price-box a { display: block; width: 11rem; height: 4rem; line-height: 4rem; text-align: center; font-size: 1.4rem; border-radius: .4rem; color: #636363; background-color: #f0f0f0; transition: all .3s ease-in-out } .call-fuwu-wrap .price-box a:hover { box-shadow: .3rem 1.5rem 1.5rem rgba(0,0,0,.1) } .call-fuwu-wrap .price-box a:first-child { margin-right: 2.5rem; color: #fff; background-color: #1881c9; background: linear-gradient(to right, #2f91d4, #1881c9) } .call-fuwu-wrap .price-box a:first-child:hover { box-shadow: 0 1rem 2.5rem 0 rgba(24,129,201,.5) } .call-fuwu-tab { max-width: 94%; justify-content: space-between; margin-bottom: 1rem } .call-fuwu-tab li { position: relative; font-size: 16px; margin-top: 0; line-height: 1.7; color: #282b42; margin-right: 0; border-bottom: 2px solid #1881c9 } .call-fuwu .call-fuwu-item { flex: 100%; flex: auto } .call-fuwu .call-fuwu-item-center { margin: 0 } .call-fuwu h4 { width: 100%; font-size: 1.4rem; line-height: 1.7; text-align: center; margin-bottom: 2rem } .call-fuwu h5 { font-size: 1.4rem; margin: 1.5rem 0 1rem } .call-fuwu h5 i { margin-right: .8rem } .call-fuwu p { font-size: 1.4rem; margin-bottom: 1rem } .call-state-wrap { padding-bottom: 0 } .call-state-wrap .call-state-box { padding: 0 6rem } .call-state-wrap .call-state-box::after { top: 4rem; left: 6rem; right: 6rem; width: calc(100% - 12rem); height: .1rem } .call-state-wrap .call-state-box .swiper-slide { width: 100%; margin-bottom: 4rem } .call-state-wrap .swiper-button-prev { position: absolute; top: 0 !important; left: 0 !important; width: 6rem; height: 100%; background-color: #f4f7fa } .call-state-wrap .swiper-button-prev div { position: absolute; top: 4.5rem; left: 0; width: 4rem; height: 4rem; border-radius: 3rem; box-shadow: 0rem .5rem .5rem 0rem rgba(217,218,228,.2) } .call-state-wrap .swiper-button-prev div i { color: #a9c0f2; font-size: 3rem; margin-left: -0.8rem } .call-state-wrap .swiper-button-next { position: absolute; top: 0 !important; right: 0 !important; width: 6rem; height: 100%; background-color: #f4f7fa } .call-state-wrap .swiper-button-next div { position: absolute; top: 4.5rem; right: 0; width: 4rem; height: 4rem; border-radius: 3rem; font-size: 3rem; box-shadow: 0rem .5rem .5rem 0rem rgba(217,218,228,.2) } .call-state-wrap .swiper-button-next div i { margin-left: .8rem; color: #a9c0f2; font-size: 3rem } .call-state-top .tooltip { position: relative; width: -moz-fit-content; width: fit-content; font-size: 1.3rem; margin: 0 auto 2.5rem; padding: .3rem 1.5rem; border-radius: .4rem; transition: all .15s ease-in-out; box-shadow: 0 0 .8rem 0 rgba(232,237,250,.6),0 .2rem .4rem 0 rgba(232,237,250,.5),0 .8rem 1.6rem 0 rgba(0,0,0,.05),0 .6rem 1rem 0 rgba(0,0,0,.05) } .call-state-top .tooltip::after { width: 1rem; height: 1rem; bottom: -0.5rem; left: calc(50% - .5rem); transform: rotate(45deg) } .call-state-top .call-state-line { width: 1rem; height: 1rem; border-radius: .5rem } .call-state { margin-top: 2.5rem; border-radius: .8rem; box-shadow: 0 0 .8rem 0 rgba(232,237,250,.6),0 .2rem .4rem 0 rgba(232,237,250,.5) } .call-state p { padding: 3rem 1.5rem } .call-state:hover { box-shadow: 0rem 1.3rem 2.4rem 0rem rgba(198,210,219,.23) } .call-help-wrap .box { flex-wrap: wrap } .call-help-wrap .call-help { width: 100%; padding: 2rem; margin-bottom: 2rem } .call-help-wrap .call-help h3 { line-height: 2.4rem; margin-bottom: 1.5rem; font-size: 1.6em; } .call-help-wrap .call-help h3 img { height: 2.4rem; margin-right: .5rem } .call-help-wrap .call-help p { line-height: 2.2; font-size: 1.2em; } .call-help-wrap .call-help p::before { width: .4rem; height: .4rem; margin-right: 1rem } .question-box { flex-wrap: wrap; align-items: flex-start; border: .1rem solid #dfdeea } .question-box .question-left { width: 100%; background-color: #eff3f8 } .question-box .question-left a { display: block; height: 3.6rem; line-height: 3.6rem; padding-left: 1rem; font-size: 1.3rem; overflow: hidden; white-space: nowrap } .question-box .question-left span { font-size: 1.4rem; margin-right: 1rem } .question-box .question { width: 100%; padding: 2rem 1rem; transition: all .3s ease-in-out; box-shadow: 0 1.5rem 3rem rgba(0,0,0,.1),translate3d(0, -0.2rem, 0) } .question-box .question .question-question { display: flex; align-items: center; font-size: 1.4rem; font-weight: bold } .question-box .question .question-question span { display: block; width: 2.4rem; height: 2.4rem; margin-right: 1.5rem; font-size: 1.4rem; border-radius: .5rem .5rem .5rem .5rem } .question-box .question .question-answer { display: flex; margin-top: 1rem; color: #282b42; line-height: 1.7 } .question-box .question .question-answer span { display: block; width: 2.4rem; height: 2.4rem; margin-right: 1.5rem; font-size: 1.4rem; border-radius: .5rem .5rem .5rem .5rem } .question-box .question .question-answer p { flex: 1; height: auto } .question-box .question .question-more { display: block; margin-top: 1rem } .question-box .question .question-more span { margin-left: .4rem; transition: all .3s ease-in-out } .question-box .question .question-more:hover span { margin-left: .8rem } .fix-video-box { top: 0; left: 0; width: 100%; height: 100vh; padding-top: 30vh; background-color: rgba(0,0,0,.6); animation: none } .fix-video-box video { width: 96%; height: auto; margin: 0 2%; animation: zoomIn .5s ease-in-out } .fix-video-box i { position: static; display: block; width: 2.8rem; height: 2.8rem; margin: .5rem auto 0; line-height: 2.8rem; text-align: center; border-radius: 1.4rem; font-size: 1.4rem; color: #6e7080; background-color: #fff; z-index: 2; cursor: pointer } .fix-video-box i:hover { color: #282b42 } .compare-wrap { padding-top: 3rem; margin-top: -5rem } .compare-wrap .compare-box { max-width: 94%; flex-wrap: wrap } .compare-left { width: 100%; z-index: 1; top: 2rem; border-radius: 1rem 0rem 0rem 0rem; padding-bottom: 2rem; box-shadow: 0rem 1.2rem 1.2rem .1rem #eff0f4 } .compare-left h3 { font-size: 1.8rem; line-height: 3; border-radius: 1rem 1rem 0rem 0rem } .compare-left h3::after { font-size: 2.4rem } .compare-left .compare-item { height: 5rem; line-height: 5rem; margin-left: 8%; border-bottom: .1rem solid #e7edf5 } .compare-left .compare-item i { font-size: 1.8rem } .compare-left .compare-item p { font-size: 1.5rem; margin-left: 1.5rem } .compare-right { width: 100%; margin-top: 4rem; padding-bottom: 2rem; box-shadow: 0rem .5rem 2rem 0rem rgba(47,72,88,.07) } .compare-right h3 { font-size: 1.8rem; line-height: 3; border-radius: 1rem 1rem 0rem 0rem } .compare-right h3::after { font-size: 2.4rem } .compare-right .compare-item { min-width: 50%; height: 5rem; line-height: 5rem; margin-left: 8% } .compare-right .compare-item i { font-size: 1.8rem } .compare-right .compare-item p { font-size: 1.5rem; margin-left: 1.5rem } }/*# sourceMappingURL=callcenter.css.map */