:root { --font-size: 15px; --font-md: 16px; --theme-color: #1881c9; --hover-color: #228cd5; } .wrap { width: 100%; overflow: hidden; padding-bottom: 80px } .box { max-width: 1200px; margin: 0 auto } .title { font-size: 30px; line-height: 1; margin: 80px auto 50px; text-align: center; color: #333 } .title-p { margin-top: -35px; text-align: center; font-size: 16px; line-height: 1; color: #6e7080; margin-bottom: 50px } .title-white { color: #fff } .title-p-white { color: #ccc } .button-apply { display: block; width: 102px; height: 34px; line-height: 34px; font-size: var(--font-size); border-radius: 4px; text-align: center; color: #fff; background: linear-gradient(90deg, #2f91d4 0%, #1881c9 100%); transition: all .3s ease-in-out } .button-apply:hover { box-shadow: 0 10px 25px 0 rgba(255,77,77,.4) } .button-apply-big { width: 136px; height: 42px; line-height: 42px; font-size: 16px; margin-top: 20px } header { width: 100%; height: 68px; position: fixed; background-color: #fff; z-index: 1000; top: 0; left: 0 } header .nav-wrap { max-width: 1280px; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between } header .nav-wrap .logo { display: flex; align-items: center } header .nav-wrap .logo a { display: block } header .nav-wrap .logo img { display: block; width: 166px; } header .nav-wrap .logo .logo-stock { width: 56px; border-left: 1.5px solid #444; margin-left: 4px; padding-left: 6px; transform: scale(0.9) } header .nav-wrap .logo .logo-stock p { font-size: 12px; text-align: center; font-weight: bold; color: #282b42; line-height: 1 } header .nav-wrap .logo .logo-stock p:last-child { font-size: 13px; margin-top: 6px } header .nav-wrap .nav-right { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; color: #333 } header .nav-wrap .nav-right i { color: #1881c9; width: 26px; font-size: 26px; margin-top: 2px; margin-right: 3px } header .nav-wrap .nav-right p { color: inherit; font-size: 18px; margin: 0 30px 0 3px } header .nav-wrap .nav-right .tryout { display: block; position: relative; overflow: hidden; width: 102px; height: 34px; line-height: 32px; border-radius: 4px; font-size: var(--font-size); text-align: center; color: #fff; border: 1px solid #1881c9; background: linear-gradient(90deg, #2f91d4 0%, #1881c9 100%); box-shadow: 0px 12px 27px 0px rgba(24,129,201,.5); transform: perspective(1px) translateZ(0); transition: all .4s ease-in-out } header .nav-wrap .nav-right .tryout:before { content: ""; position: absolute; background-color: #fff; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; border-radius: 4px; transform: scaleX(0); transform-origin: 100% 50%; transition: all .4s ease-in-out } header .nav-wrap .nav-right .tryout:hover,header .nav-wrap .nav-right .tryout:focus,header .nav-wrap .nav-right .tryout:active { box-shadow: none; color: #1881c9; background-color: #fff; border: 1px solid #1881c9 } header .nav-wrap .nav-right .tryout:hover:before,header .nav-wrap .nav-right .tryout:focus:before,header .nav-wrap .nav-right .tryout:active:before { transform: scaleX(1) } .first-wrap { display: flex; justify-content: space-between; align-items: center; height: 100% } .first-wrap .first { height: 100%; text-align: center; padding: 0 18px } .first-wrap .first .first-link { position: relative; overflow: hidden; display: block; white-space: nowrap; font-size: 16px; padding: 0 10px; height: 100%; line-height: 68px; transition: all .2s ease-in-out; transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0,0,0,0) } .first-wrap .first .first-link:before { content: ""; position: absolute; z-index: -1; left: 51%; right: 51%; bottom: 0px; background: #1881c9; height: 2px; transition-property: left,right; transition-duration: .3s; transition-timing-function: ease-out } .first-wrap .first .first-link:hover:before,.first-wrap .first .first-link:focus:before,.first-wrap .first .first-link:active:before { left: 0; right: 0 } .first-wrap .first .hover { color: #1881c9 } .first-wrap .first .hover:before { left: 0; right: 0 } .first-wrap .first:hover .first-link { color: #1881c9 } .first-wrap .first:hover .second-wrap { transform: rotate3d(0, 0, 0, 0deg) } .first-wrap .first-single { position: relative } .first-wrap .first-single h4 img { max-width: 24px; margin: -12px 0 0 5px } .first-wrap .first-single:hover .second-single { transform: rotate3d(0, 0, 0, 0deg) } .second-wrap { width: 100%; padding: 40px 0; background-color: #fff; position: absolute; top: 68px; left: 0; transform: rotate3d(-90, 0, 0, 90deg); transform-origin: 50% 0%; transition: all .3s ease-in-out; box-shadow: 0px 10px 20px rgba(51,51,51,.2) } .second-wrap .second-box { max-width: 1280px; margin: 0 auto; text-align: left; display: flex; align-items: flex-start; justify-content: space-between } .second-wrap .second-box .second-left { width: 78%; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap } .second-wrap .second-box .second-right { width: 22% } .second-wrap .second-box .second-left-solu { width: 60%; border-right: 1px solid #e8e8e8 } .second-wrap .second-box .second-left-solu a { width: 33.33%; margin-right: 0 } .second-wrap .second-box .second-left-solu a p { display: none } .second-wrap .second-box .second-right-solu { border: none; width: 40%; display: flex; flex-wrap: wrap } .second-wrap .second-box .second-right-solu a { width: 50%; margin-bottom: 15px; padding: 18px 10px 18px 30px } .second-wrap .second-box .second-right-solu a .nav-icon { width: 42px } .second-wrap .second-box .second-right-solu a .nav-icon img { width: 100% } .second-wrap .second-box .second-right-solu a p { display: none } .second-wrap h3 { width: 100%; font-size: 16px; text-indent: 46px; line-height: 1; margin-bottom: 25px; color: #282b42 } .second-wrap a { display: flex; align-items: center; width: 27%; margin-right: 6.33%; margin-bottom: 15px; padding: 18px 10px 18px 30px; border-radius: 4px; transition: all .25s ease-in-out } .second-wrap a .nav-icon { width: 42px; line-height: normal; padding: 6px; border-radius: 4px; margin-right: 8px; transition: all .3s ease-in-out } .second-wrap a .nav-icon img { width: 100% } .second-wrap a .nav-icon-small { padding: 4px } .second-wrap a div:last-child { flex: 1 } .second-wrap a h4 { display: flex; align-items: flex-start; font-size: 16px; line-height: 1; color: #000 } .second-wrap a h4 img { max-width: 20px; margin: -8px 0 0 5px } .second-wrap a h4 .img-big { max-width: 24px; margin: -5px 0 0 5px } .second-wrap a p { font-size: 13px; line-height: 1; color: #6e7080; margin-top: 13px } .second-wrap a:hover { background: #f0f5fd } .second-wrap a:hover h4 { color: #1881c9 } .second-wrap a:hover p { color: #6e7080 } .second-wrap a:hover .nav-icon { background-color: #fff; box-shadow: 0px 2px 4px 1px #dee2f0 } .second-wrap .second-right { border-left: 1px solid #e8e8e8 } .second-wrap .second-right a { width: 100%; margin-right: 0; margin-bottom: 0; padding: 13px 15px 13px 40px } .second-wrap .second-right a .nav-icon { width: 40px } .second-wrap .second-right a .nav-icon-small { padding: 4px } .second-wrap .second-down-box { border: none } .second-wrap .second-down-box a { font-size: 16px; height: 90px; line-height: 90px; background: url("../image/nav_icon45.png") no-repeat center center/cover; transition: all .25s ease-in-out } .second-wrap .second-down-box a:last-child { margin-top: 30px; background: url("../image/nav_icon46.png") no-repeat center center/cover } .second-wrap .second-down-box a:hover { box-shadow: 0px 10px 20px rgba(51,51,51,.15) } .second-pro-box { max-width: 1000px; margin: 0 auto; text-align: left; display: flex; flex-wrap: wrap; align-items: flex-start; } .second-pro-box .second-item{ width: 25%; } .second-pro-box .second-item h3 { font-size: 16px; line-height: 27px; text-indent: 15px; margin-bottom: 30px; font-weight: normal; color: #000 } .second-pro-box .second-item h3 img { height: 27px; margin-right: 8px } .second-pro-box .second-item a { all: unset; display: block; margin-bottom: 10px; padding: 13px 25px 13px 15px; text-align: left; border-radius: 4px; cursor: pointer; transition: all .25s ease-in-out } .second-pro-box .second-item a h4 { font-size: 16px; white-space: nowrap; line-height: 1; color: #262626 } .second-pro-box .second-item a h4 img { width: 20px; margin-left: 8px; margin-top: -8px } .second-pro-box .second-item a p { font-size: 13px; white-space: nowrap; line-height: 1; color: #6e7080; margin-top: 13px } .second-pro-box .second-item a:last-child { margin-bottom: 0 } .second-pro-box .second-item a:hover { background-color: #f0f5fd } .second-pro-box .second-item a:hover h4 { color: #1881c9 } .second-pro-box .second-item a:hover p { color: #6e7080 } .second-pro-box .second-item a:hover .nav-icon { background-color: #fff; box-shadow: 0px 2px 4px 1px #dee2f0 } .second-single { position: absolute; top: 68px; left: 0; border-radius: 0 0 4px 4px; padding: 30px 20px; background-color: #fff; transform: rotate3d(-90, 0, 0, 90deg); transform-origin: 50% 0%; box-shadow: 0px 5px 40px 0px rgba(47,72,88,.07),0px 5px 40px 0px rgba(47,72,88,.07); transition: all .3s ease-in-out } .second-single h3 { font-size: 16px; text-indent: 15px; text-align: left; line-height: 1; margin-bottom: 25px; color: #282b42 } .second-single a { display: flex; align-items: center; margin-bottom: 15px; padding: 13px 15px; text-align: left; border-radius: 4px; transition: all .25s ease-in-out } .second-single a .nav-icon { width: 42px; line-height: normal; padding: 6px; border-radius: 4px; margin-right: 8px; transition: all .3s ease-in-out } .second-single a .nav-icon img { width: 100% } .second-single a h4 { font-size: 16px; white-space: nowrap; line-height: 1; color: #262626 } .second-single a p { font-size: 13px; white-space: nowrap; line-height: 1; color: #bbb; margin-top: 13px } .second-single a:last-child { margin-bottom: 0 } .second-single a:hover { background-color: #f0f5fd } .second-single a:hover h4 { color: #1881c9 } .second-single a:hover p { color: #6e7080 } .second-single a:hover .nav-icon { background-color: #fff; box-shadow: 0px 2px 4px 1px #dee2f0 } .headerShadow { background-color: #fff; box-shadow: 0px 15px 10px -15px rgba(6,30,46,.15) } .header-blank { width: 100%; height: 68px } .nav-blank { width: 100%; height: 68px } .confirm-wrap { padding: 45px 0 } .confirm-wrap .confirm-box { display: flex; max-width: 1180px; margin: 0 auto } .confirm-box .confirm { width: 20%; text-align: center; position: relative; cursor: pointer } .confirm-box .confirm .confirm-img { height: 50px; display: flex; justify-content: center; align-items: center } .confirm-box .confirm .confirm-img img { max-height: 50px } .confirm-box .confirm p { font-size: var(--font-size); color: #757c81; line-height: 3 } .confirm-box .confirm .confirm-more { position: absolute; z-index: 99; width: 100%; height: auto; text-align: left; padding: 20px; font-size: 12px; line-height: 22px; color: #807f81; background-color: #fff; box-shadow: 0px 5px 13px 0px rgba(205,206,207,.6); border-radius: 4px; transform: rotate3d(-90, 0, 0, 90deg); transform-origin: 50% 0%; transition: all .4s ease-in-out } .confirm-box .confirm:first-child .confirm-img { background: url("../image/confirm1.png") no-repeat center center/auto 45px } .confirm-box .confirm:first-child:hover .confirm-img { background: url("../image/confirm1b.png") no-repeat center center/auto 45px } .confirm-box .confirm:nth-child(2) .confirm-img { background: url("../image/confirm2.png") no-repeat center center } .confirm-box .confirm:nth-child(2):hover .confirm-img { background: url("../image/confirm2b.png") no-repeat center center } .confirm-box .confirm:nth-child(3) .confirm-img { background: url("../image/confirm3.png") no-repeat center center/auto 45px } .confirm-box .confirm:nth-child(3):hover .confirm-img { background: url("../image/confirm3b.png") no-repeat center center/auto 45px } .confirm-box .confirm:nth-child(4) .confirm-img { background: url("../image/confirm4.png") no-repeat center center/auto 45px } .confirm-box .confirm:nth-child(4):hover .confirm-img { background: url("../image/confirm4b.png") no-repeat center center/auto 45px } .confirm-box .confirm:nth-child(5) .confirm-img { background: url("../image/confirm5.png") no-repeat center center/auto 45px } .confirm-box .confirm:nth-child(5):hover .confirm-img { background: url("../image/confirm5b.png") no-repeat center center/auto 45px } .confirm-box .confirm:hover p { color: #595e62 } .confirm-box .confirm:hover .confirm-more { transform: rotate3d(0, 0, 0, 0deg) } .bottom-tryout-wrap { width: 100%; height: 240px; display: flex; justify-content: center; align-items: center; overflow: hidden; background: url(../image/bottom_tryout.png) no-repeat center center/cover } .bottom-tryout-wrap p { color: #fff; text-align: center; font-size: 26px } .bottom-tryout-wrap a { display: block; width: 110px; height: 40px; margin: 20px auto 0; line-height: 40px; text-align: center; background-color: #fff; border-radius: 4px; font-size: var(--font-size); color: #1881c9; transition: all .4s ease-in-out } .bottom-tryout-wrap a:hover { box-shadow: 0px 8px 9px 1px rgba(24,129,201,.5) } .custom-wrap { overflow: hidden; background: url("../image/custom_bg.png") no-repeat center center/cover } .custom-wrap p.custom-p { margin-top: -40px; text-align: center; font-size: 16px; line-height: 1; color: #6e7080; margin-bottom: 50px } .custom-wrap .custom-box { display: flex } .custom-left { width: 30%; z-index: 3; padding: 40px 45px 0; background: url("../image/custom_left.png") no-repeat top right/auto 100% } .custom-left h3 { font-size: 24px; color: #fff; margin-bottom: 30px } .custom-left .solution-link-box { display: flex; flex-wrap: wrap } .custom-left .solution-link-box a { width: 117px; height: 42px; line-height: 42px; display: block; text-align: center; color: #fff; background-color: #ef6d67; opacity: .9; margin-bottom: 18px } .custom-left .solution-link-box a:hover { opacity: 1 } .custom-left .solution-link-box a:nth-child(odd) { margin-right: 18px } .custom-left .solution-link-more { display: flex; justify-content: center; margin: 0 auto; font-size: 16px; color: #fff; margin-bottom: 20px } .custom-left .solution-link-more a { color: #fff } .custom-left .solution-link-more i { font-size: 18px; margin-left: 10px; vertical-align: text-top; transition: all .4s ease-in-out } .custom-left a:hover i { margin-left: 25px } .custom-right { width: 74%; border-radius: 4px; margin-top: 15px; margin-left: -4%; padding: 0 5% 0 9%; background-color: #fff; box-shadow: 0px 5px 40px 0px rgba(47,72,88,.07),0px 5px 40px 0px rgba(47,72,88,.07) } .tele-custom-box { margin-bottom: 10px } .tele-custom-box .tele-custom-slide { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 30px 0 0; border-radius: 8px; background-color: #fff; background: url("../image/custom_top.png") no-repeat right 30% } .tele-custom-box .tele-custom-slide a { width: 100%; display: block; text-align: left; align-self: flex-start; transition: all .4s ease-in-out } .tele-custom .cutom-slide-img { width: 100%; height: 110px } .tele-custom .cutom-slide-img img { height: 100% } .tele-custom h4 { font-size: 16px; line-height: 2.5; color: #e41c1c } .tele-custom p { width: 80%; font-size: var(--font-size); line-height: 1.8; color: #6e7080 } .tele-custom-swiper-wrap .swiper-button-prev { top: 65%; left: 86%; right: 100px !important; width: 36px; height: 37px; background-color: #fff; border-radius: 2px; color: rgba(0,0,0,0); border: solid 1px #e7eef5; display: flex; justify-content: center; align-items: center; z-index: 10 } .tele-custom-swiper-wrap .swiper-button-prev i { color: #dadada } .tele-custom-swiper-wrap .swiper-button-disabled { cursor: not-allowed; pointer-events: auto } .tele-custom-swiper-wrap .swiper-button-prev::after { display: none } .tele-custom-swiper-wrap .swiper-button-prev:hover { border: solid 1px #e44d50 } .tele-custom-swiper-wrap .swiper-button-prev:hover i { color: #e44d50 } .tele-custom-swiper-wrap .swiper-button-next { top: 65%; left: 93%; width: 36px; height: 37px; background-color: #fff; border-radius: 2px; color: rgba(0,0,0,0); border: solid 1px #e7eef5; display: flex; justify-content: center; align-items: center; z-index: 10 } .tele-custom-swiper-wrap .swiper-button-next i { color: #dadada } .tele-custom-swiper-wrap .swiper-button-next::after { display: none } .tele-custom-swiper-wrap .swiper-button-next:hover { border: solid 1px #e44d50 } .tele-custom-swiper-wrap .swiper-button-next:hover i { color: #e44d50 } .custom-img { width: 100%; padding: 20px 0; overflow: visible; display: flex; flex-wrap: wrap } .custom-img div { width: 18%; margin: 0 1% 2%; border-radius: 4px } .custom-img div img { width: 100% } .custom-img div:hover { box-shadow: 0px 5px 40px 0px rgba(47,72,88,.07),0px 5px 40px 0px rgba(47,72,88,.07) } .footer-wrap { width: 100%; padding: 45px 0 16px; overflow: hidden; background-color: #2b313d } .footer-wrap .footer-box { width: 1180px; margin: 0 auto; padding-bottom: 30px; display: flex; justify-content: space-between; align-items: flex-start } .footer-nav { color: #6e7080; width: 36%; } .footer-nav h3 { font-size: 18px; line-height: 1; margin-bottom: 20px; color: #fff } .footer-nav a { display: block; width: 100%; font-size: var(--font-size); line-height: 2.8; color: #6e7080; text-align: left; word-break: keep-all } .footer-nav a:hover { color: #ccc } .footer-right { min-width: 28%; } .footer-right .footer-logo img { max-height: 40px; } .footer-right .footer-area { color: #6e7080; margin: 20px 0 } .footer-right .footer-area a { height: 45px; font-size: var(--font-size); line-height: 30px; color: #6e7080 } .footer-right .footer-area a:hover { color: #ccc } .footer-right p { font-size: var(--font-size); font-weight: normal; color: #6e7080; line-height: 2; margin-top: 4px; } .footer-right p i { font-style: normal; font-weight: bold } .footer-right p span { color: #fff; font-weight: bold } .footer-right .footer-code{ margin-top: 20px; } .footer-right .footer-code img { border-radius: 4px; max-width: 120px; } .footer-right .footer-code-title { color: #ccc; font-size: 14px; } .footer-copy-wrap { width: 100%; overflow: hidden; border-top: 1px solid #4c515d; text-align: center; margin-top: 20px; } .footer-copy-wrap .footer-copy { max-width: 1180px; margin: 16px auto 0; color: #6e7080 } .footer-copy-wrap .footer-copy img { vertical-align: text-top } .footer-copy-wrap .footer-copy a { margin-left: 6px; color: #6e7080 } .footer-copy-wrap .footer-copy a:hover { color: #ccc } @keyframes breathe-img { 0% { transform: scale(1) } 25% { transform: scale(0.93) } 50% { border-color: 1px solid rgba(24,129,201,.5); transform: scale(0.87) } 75% { transform: scale(0.93) } to { transform: scale(1) } } @keyframes mymove { 0% { transform: scale(1) } 25% { transform: scale(1.05) } 50% { transform: scale(1.1) } 75% { transform: scale(1.05) } 100% { transform: scale(1) } } @keyframes animated-border { 0% { box-shadow: 0 0 0 0 rgba(240,116,116,.2) } 100% { box-shadow: 0 0 0 12px rgba(4,235,54,0) } } .fix-box { position: fixed; top: 60%; transform: translateY(-50%); right: 8px; width: 76px; font-size: 14px; text-align: center; z-index: 998; background-color: rgba(0,0,0,0) } .fix-chat { width: 100%; padding-bottom: 15px; margin-bottom: 15px; position: relative; cursor: pointer } .fix-chat .fix-chat-img-close { position: absolute; top: 6px; right: 8px; text-align: center; line-height: 17px; font-weight: bold; z-index: 10; width: 17px; height: 17px; font-size: 12px; color: #fff; background: #1881c9; border-radius: 50% } .fix-chat .fix-chat-box { position: relative; width: 100%; margin-right: 4px; padding: 3px; border-radius: 50%; border: 1px solid rgba(245,86,98,.5); animation: mymove 1s linear infinite,animated-border 1s linear infinite } .fix-chat .fix-chat-box .fix-chat-img-box { width: 68px; height: 68px; border-radius: 50%; border: 2px solid #1881c9; animation: breathe-img 1s linear infinite } .fix-chat .fix-chat-box .fix-chat-img-box .fix-chat-img { width: 100% } .fix-chat .fix-chat-text { position: absolute; left: 3px; bottom: 0; width: 70px; padding: 0 5px; font-size: 14px; font-weight: bold; overflow: hidden; height: 24px; line-height: 24px; border-radius: 4px; color: #fff; background-color: #1881c9; box-shadow: 0px 3px 10px rgba(99,102,110,.16) } .fix-chat .get-chat-slide { position: absolute; bottom: 0; right: 100px; display: flex; align-items: flex-start; color: #444; z-index: -1; border-radius: 4px; text-align: left; padding: 13px 60px 13px 20px; background-color: #fff; box-shadow: 0px 0px 20px -4px rgba(0,0,0,.08); filter: drop-shadow(0px 2px 12px rgba(0, 0, 0, 0.11)) drop-shadow(0px 2px 12px rgba(0, 0, 0, 0.11)) } .fix-chat .get-chat-slide .iconfont { position: absolute; right: 8px; top: 5px; display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; line-height: 1; font-size: 13px; line-height: 1; color: #e4e4e4; background-color: #f8f8f8; cursor: pointer; transition: all .3s ease-in-out } .fix-chat .get-chat-slide .iconfont:hover { color: #1881c9 } .fix-chat .get-chat-slide .get-chat-slide-img { width: 26px; height: auto; margin-right: 8px } .fix-chat .get-chat-slide .get-chat-slide-img img { width: 100% } .fix-chat .get-chat-slide .get-chat-slide-right { flex: 1; color: #000 } .fix-chat .get-chat-slide .get-chat-slide-right h4 { font-size: 17px; font-weight: bold; line-height: 1; margin-bottom: 12px } .fix-chat .get-chat-slide .get-chat-slide-right p { word-break: keep-all; font-size: 14px; line-height: 1 } .fix-chat .get-chat-slide:after { display: inline-block; content: " "; position: absolute; top: 50%; right: -21px; width: 0; height: 0; z-index: 0; transform: translateY(-50%); border-width: 12px; border-style: solid; border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #fff } .fix-chat .toast { position: absolute; top: 0; z-index: 9999; right: 100px; width: 145px; height: 167px; padding: 10px; text-align: center; border-radius: 4px; background-color: #fff; box-shadow: 0px 0px 20px -4px rgba(0,0,0,.08); filter: drop-shadow(0px 2px 12px rgba(0, 0, 0, 0.11)) drop-shadow(0px 2px 12px rgba(0, 0, 0, 0.11)) } .fix-chat .toast .iconfont { position: absolute; top: -10px; right: -10px; display: block; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 10px; color: #6e7080; cursor: pointer; border-radius: 50%; background-color: #fff; box-shadow: rgba(0,0,0,.1) 0px 0px 10px 0px } .fix-chat .toast img { display: block; width: 100% } .fix-chat .toast p { color: #000; font-size: 14px; letter-spacing: 1px; line-height: 1; margin-top: 8px } .fix-chat .toast:after { content: ""; display: inline-block; position: absolute; top: 45px; right: -21px; width: 0; height: 0; z-index: 0; border-width: 12px; border-style: solid; border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #fff } .fix-item-box { width: 70px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; align-items: center } .fix-item-box .fix-item { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 13px 0; border-radius: 4px; overflow: hidden; cursor: pointer; color: #000; background-color: #fff; box-shadow: 0px 0px 20px -4px rgba(0,0,0,.08); filter: drop-shadow(0px 2px 12px rgba(0, 0, 0, 0.06)) drop-shadow(0px 2px 12px rgba(0, 0, 0, 0.06)); transition: box-shadow .3s ease-in-out,color .3s ease-in-out,background-color .3s ease-in-out } .fix-item-box .fix-item i { font-size: 26px; color: var(--theme-color); line-height: 1 } .fix-item-box .fix-item p { font-size: 14px; line-height: 1; margin-top: 4px } .fix-item-box .fix-item:hover { color: #1881c9; overflow: visible; background-color: #eef5ff; box-shadow: 0px 0px 24px 0px rgba(168,173,184,.5) } .fix-item-box .fix-apply i { font-size: 30px } .fix-item-box .fix-apply .fix-tel-apply { position: absolute; top: 15px; right: 70px; width: -moz-fit-content; width: fit-content; padding: 0 20px; height: 45px; line-height: 45px; border-radius: 4px; opacity: 0; font-size: var(--font-size); white-space: nowrap; color: #63666e; background-color: #fff; box-shadow: 0px 0px 20px -4px rgba(0,0,0,.08); filter: drop-shadow(0px 2px 12px rgba(0, 0, 0, 0.11)) drop-shadow(0px 2px 12px rgba(0, 0, 0, 0.11)); transition: all .3s ease-in-out } .fix-item-box .fix-apply .fix-tel-apply:after { display: inline-block; content: " "; position: absolute; top: 50%; right: -21px; width: 0; height: 0; z-index: 0; transform: translateY(-50%); border-width: 12px; border-style: solid; border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #fff } .fix-item-box .fix-apply:hover .fix-tel-apply { opacity: 1; right: 90px } .fix-item-box .slide-code-wrap { position: absolute; top: 0; right: 90px; width: 145px; height: 167px; padding: 10px; text-align: center; border-radius: 4px; background-color: #fff; box-shadow: 0px 0px 20px -4px rgba(0,0,0,.08); filter: drop-shadow(0px 2px 12px rgba(0, 0, 0, 0.11)) drop-shadow(0px 2px 12px rgba(0, 0, 0, 0.11)) } .fix-item-box .slide-code-wrap img { width: 100%; display: block } .fix-item-box .slide-code-wrap p { color: #333; font-size: 14px; letter-spacing: 1px; line-height: 1; margin-top: 8px } .fix-item-box .slide-code-wrap:after { content: ""; display: inline-block; position: absolute; top: 45px; right: -21px; width: 0; height: 0; z-index: 0; border-width: 12px; border-style: solid; border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #fff } .fix-item-box .toTop { height: 32px } .fix-item-box .toTop i { font-size: 24px; color: #646a7f; font-weight: bold } .fix-item-box .toTop:hover { color: #1881c9; background-color: #eef5ff; box-shadow: 0px 0px 24px 0px rgba(168,173,184,.47) } @keyframes showclose { 0% { opacity: 0 } 20% { opacity: 0 } 100% { opacity: 1 } } .fix-bottom { position: fixed; bottom: 8%; right: 100px; z-index: 99999; width: 360px; height: 540px; pointer-events: auto; border: 0px; border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: 0 0 8px #aaa; transition: all .2s ease-in-out; background: linear-gradient(to bottom, transparent 0%, transparent 20%, #f3f3f3 100%) } .fix-bottom .holly-kefu { border-radius: 16px 16px 0 0; overflow: hidden; width: 100%; height: 100% } .fix-bottom .tool-box { position: absolute; right: 6px; top: 16px; color: #fff; font-size: var(--font-size); display: flex; align-items: center; cursor: pointer; animation: showclose .5s } .fix-bottom .tool-box i { padding: 2px } .fix-bottom .tool-box .close-voice { font-size: 16px; font-weight: lighter } .fix-bottom .tool-box .close-min { font-weight: bold } .fix-bottom .tool-box .close-max { font-weight: bold } .fix-bottom .tool-box .close-kefu { font-size: var(--font-size) } .fix-bottom iframe { width: 100%; height: 100%; border: none } .fix-bottom .close-again-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 16px 16px 0 0; font-size: var(--font-size); display: flex; align-items: center; color: #fff; background-color: rgba(0,0,0,.4) } .fix-bottom .close-again-box .close-again { width: 290px; margin: 0 auto; padding: 20px; display: flex; justify-content: center; flex-wrap: wrap; border-radius: 4px; background-color: #fff; box-shadow: 0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5) } .fix-bottom .close-again-box .close-again h5 { width: 100%; font-size: 16px; line-height: 3; color: #333; margin-bottom: 15px; text-align: center } .fix-bottom .close-again-box .close-again div { width: 102px; height: 34px; line-height: 34px; border-radius: 4px; text-align: center; color: #fff; cursor: pointer; background: linear-gradient(to right, #2f91d4, #1881c9) } .fix-bottom .close-again-box .close-again div:nth-child(3) { border: 1px solid #ea3e41; color: #ea3e41; background: #fff; margin-left: 20px } .fix-bottom-max { bottom: 0%; width: 500px; height: 600px; transition: all .2s ease-in-out } .ie-tips-box { position: fixed; display: none; z-index: 999; top: 80px; padding: 5px 15px 15px 15px; right: 20px; width: 500px; font-size: var(--font-size); line-height: 1.8; border-radius: 8px; color: #333; background-color: #fff; box-shadow: 0 4px 23px 5px rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.15) } .ie-tips-box i { color: #009688; font-size: 20px } .ie-tips-box .iconclose { cursor: pointer; color: #de392d; font-weight: bold; position: absolute; top: 5px; right: 15px } .ie-tips-box h3 { font-size: 22px; line-height: 2; font-weight: bold; text-align: center; color: #282b42 } .ie-tips-box h4 { font-size: 15px; color: #282b42 } .ie-tips-box h4 a { color: #de392d; font-weight: bold } .kjrk{ color: #fff; font-size: 18px; } .kuyiy{ width: 100%; height: 1px; background-color: #565d6b; margin-top: 20px; } .kuyiy2{ width: 44px; height: 3px; background-color: #0097ff; margin-top: -1px; } .gedwq{ margin-top: 20px; } .gedwq a{ color: #ccc; display: inline-block; width: 49%; font-size: 14px; margin-bottom: 20px; } .gedwq a:hover{ color: #fff; } .gedwq .ewediv{ font-size: 14px; color: #ccc; margin-bottom: 20px; } .yutu{ width: 200px; float: left; margin-left: 20px; } @media screen and (min-width: 992px)and (max-width: 1199px) { .wrap { padding-bottom: 50px } .box { max-width: 94% } .title { font-size: 26px; margin: 50px auto 30px } .title-p { margin-top: -15px; text-align: center; font-size: 16px; line-height: 1; color: #6e7080; margin-bottom: 30px } header .nav-wrap { max-width: 94% } .first { padding: 0 10px } .first .first-link { padding: 0 } .first .second-wrap .second-box { width: 100% } .first .second-link-box a p { width: 100% } .second-single { padding: 10px 15px 30px } .nav-right i,.nav-right span { display: none } .custom-wrap p.custom-p { margin-top: -15px; margin-bottom: 30px } .custom-wrap .custom-box { display: flex } .custom-left { padding: 30px 25px 0 10px } .custom-left h3 { font-size: 18px; margin-bottom: 15px } .custom-left .solution-link-box a { width: 106px; height: 38px; line-height: 38px; margin: 0 auto 20px } .custom-left .solution-link-box a:nth-child(odd) { margin-left: auto; margin-right: auto } .custom-left .solution-link-more { font-size: 15px } .tele-custom .cutom-slide-img { width: 100%; height: 80px } .tele-custom .cutom-slide-img img { height: 100% } .tele-custom h4 { font-size: 16px; line-height: 2 } .tele-custom p { width: 85%; font-size: 13px; line-height: 1.7 } .tele-custom-swiper-wrap .tele-custom-slilde { padding-top: 15px } .tele-custom-swiper-wrap .swiper-button-prev { top: 85%; left: 86%; right: 80px !important; width: 30px; height: 30px } .tele-custom-swiper-wrap .swiper-button-next { top: 85%; left: 93%; width: 30px; height: 30px; border-radius: 2px } .bottom-tryout-wrap { height: 200px; display: flex } .bottom-tryout-wrap p { font-size: 20px } .footer-wrap { padding: 30px 0 20px } .footer-wrap .footer-box { width: 92%; padding-bottom: 20px } .footer-nav h3 { font-size: 16px; margin-bottom: 15px } .footer-nav a { font-size: var(--font-size); line-height: 2.6 } .footer-nav .footer-code img { max-width: 120px } .footer-nav p { font-size: 13px; line-height: 2 } .footer-right { max-width: none } .footer-copy-wrap .footer-copy { max-width: 92% } } @media screen and (min-width: 768px)and (max-width: 991px) { .wrap { padding-bottom: 40px } .box { max-width: 94% } .title { font-size: 24px; margin: 50px auto 30px } .title-p { margin-top: -15px; text-align: center; font-size: 16px; line-height: 1; color: #6e7080; margin-bottom: 30px } .button-apply-big { width: 102px; height: 34px; line-height: 34px; font-size: var(--font-size); margin-top: 20px } .first { padding: 0 10px } .first .first-link { padding: 0 } header .nav-wrap { max-width: 94% } header .nav-wrap .logo { height: 26px } header .nav-wrap .first-wrap { margin-left: 20px } .nav-right i,.nav-right span,.nav-right p { display: none } .second-wrap .second-box { width: 100% } .second-single { padding: 10px 15px 30px } .second-single a { font-size: var(--font-size); padding: 10px } .second-single a h4 { font-size: var(--font-size) } .second-single a p { font-size: 13px } .second-link-box a img { margin-right: 10px } .second-link-box a h4 { font-size: var(--font-size) } .second-link-box a p { font-size: 13px; width: 100% } .custom-wrap p.custom-p { margin-top: -15px; margin-bottom: 30px } .custom-wrap .custom-box { display: flex } .custom-left { padding: 15px 45px 0 15px } .custom-left h3 { font-size: 18px; margin-bottom: 15px } .custom-left .solution-link-box a { width: 102px; height: 34px; line-height: 34px; margin: 0 auto 10px } .custom-left .solution-link-box a:nth-child(odd) { margin-left: auto; margin-right: auto } .custom-left .solution-link-more { font-size: 15px } .tele-custom .cutom-slide-img { width: 100%; height: 80px } .tele-custom .cutom-slide-img img { height: 100% } .tele-custom h4 { font-size: 16px; line-height: 2 } .tele-custom p { width: 85%; font-size: 13px; line-height: 1.7 } .tele-custom-swiper-wrap .swiper-button-prev { top: 85%; left: 86%; right: 80px !important; width: 30px; height: 30px } .tele-custom-swiper-wrap .swiper-button-next { top: 85%; left: 93%; width: 30px; height: 30px; border-radius: 2px } .custom-img div { width: 25%; margin: 0 4% 2% } .bottom-tryout-wrap { height: 180px; display: flex } .bottom-tryout-wrap p { font-size: 20px } .footer-wrap { padding: 30px 0 20px } .footer-wrap .footer-box { width: 94%; padding-bottom: 20px } .footer-nav h3 { font-size: 16px; margin-bottom: 15px } .footer-nav a { font-size: 13px; line-height: 2.6 } .footer-nav .footer-code img { max-width: 120px } .footer-nav p { font-size: 13px; line-height: 2 } .footer-right { max-width: none } .footer-right .footer-area a { font-size: 13px } .footer-right p { font-size: 13px } .footer-copy-wrap .footer-copy { max-width: 94% } } @media screen and (max-width: 768px) { .wrap { padding-bottom: 3rem } .box { max-width: 94% !important; margin-left: auto; margin-right: auto } .title { color: #444; font-size: 2rem; font-weight: bold; margin: 4rem auto 3rem } .title-p { max-width: 88%; margin: -1rem auto 3rem; font-size: 1.3rem; line-height: 1.5; color: #6e7080; text-align: center } .title-p-long { max-width: 90%; margin-left: 5% } .title-white { color: #fff } .title-p-white { color: #ccc } .button-apply { width: 10.2rem; height: 3.4rem; line-height: 3.4rem; font-size: 1.4rem; margin-top: 2rem } .button-apply-big { width: 10.2rem; height: 3.4rem; line-height: 3.4rem; font-size: 1.4rem; margin-top: 2rem } header { width: 100%; height: 5rem; background: #fff; } header .nav-wrap { width: 92%; height: 5rem; margin: 0 auto } header .nav-wrap .logo { height: 2.1rem } header .nav-wrap .logo img { width: auto; height: 100% } header .menu { display: block; margin-left: auto; color: #fff } header .menu i { font-size: 3rem; font-weight: lighter; } .mobileHeader { background-color: #fff; box-shadow: 0rem 1.5rem 1rem -1.5rem rgba(6,30,46,.11) } .mobileHeader .menu i { color: #444 !important; } .header-blank { display: none } .mm-menu.mm-pageshadow:after { box-shadow: none !important } .mm-menu.mm-theme-dark { background: #374046 } #menu .mm-navbar { display: none; } #menu .mm-panels { top: 0 } #menu a { font-size: 1.4rem } #menu .menu-logo { display: block; padding: 1rem 2rem } #menu .menu-logo img { vertical-align: middle; max-height: 2rem } #menu .menu-second { padding-left: 1rem; padding-bottom: 1.5rem; display: flex; flex-wrap: wrap } #menu .menu-second h3 { font-size: 1.4rem; font-weight: normal; text-indent: 1rem; width: 100%; margin: 1rem 0 } #menu .menu-second a { font-size: 1.3rem; box-sizing: border-box; width: 50%; padding: .8rem 0 .8rem 3rem } #menu .menu-second a img { background-color: #fff; width: 2.2rem; vertical-align: text-top } .custom-wrap { overflow: hidden; background: #fff; padding-bottom: 2rem } .custom-wrap .custom-p { font-size: 1.3rem; line-height: 1; color: #6e7080; text-align: center; margin-top: -1rem; margin-bottom: 2rem } .custom-wrap .custom-box { display: flex } .custom-left { width: 40%; z-index: 3; padding: 2rem 0 0; overflow: hidden; background: url("../image/custom_left.png") no-repeat top right/auto 100% } .custom-left h3 { font-size: 1.5rem; color: #fff; text-indent: 1rem; margin-bottom: 1rem } .custom-left .solution-link-box { display: block } .custom-left .solution-link-box a { width: 10rem; height: 3rem; line-height: 3rem; font-size: 1.1rem; margin-bottom: .8rem; margin-left: .8rem; opacity: .9 } .custom-left .solution-link-more { display: flex; justify-content: left; margin: 8% 0 5% 1.5rem; font-size: 1.5rem; color: #fff } .custom-left .solution-link-more a { text-align: left; color: #fff } .custom-left .solution-link-more i { font-size: 1.8rem; margin-left: 1rem; vertical-align: text-top; transition: all .4s ease-in-out } .custom-left a:hover i { margin-left: 2.5rem } .custom-right { width: 66%; border-radius: .4rem; margin-top: 2.3rem; margin-left: -6%; padding: 0 2% 0 2%; background-color: #fff; box-shadow: 0rem .5rem 4rem 0rem rgba(47,72,88,.07),0rem .5rem 4rem 0rem rgba(47,72,88,.07) } .tele-custom-box { margin-bottom: 1rem } .tele-custom-box .tele-custom-slide { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border-radius: .8rem; background-color: #fff; background: url("../image/custom_top.png") no-repeat right 30% } .tele-custom-box .tele-custom-slide a { width: 100%; display: block; text-align: left; align-self: flex-start; transition: all .4s ease-in-out } .tele-custom .cutom-slide-img { width: 100%; height: 8rem } .tele-custom .cutom-slide-img img { height: 100% } .tele-custom h4 { font-size: 1.4rem; line-height: 3; color: #e41c1c } .tele-custom p { width: 100%; font-size: 1.3rem; line-height: 1.5; color: #a0a0a0 } .tele-custom-swiper-wrap .swiper-button-prev { display: none } .tele-custom-swiper-wrap .swiper-button-next { display: none } .custom-img { padding-top: 5%; padding-bottom: 0 } .custom-img div { width: 33.33%; margin: 0 0 6% } .bottom-tryout-wrap { width: 100%; height: 15rem } .bottom-tryout-wrap p { max-width: 80%; margin: 0 auto; font-size: 1.4rem } .bottom-tryout-wrap a { width: 10.2rem; height: 3.4rem; line-height: 3.4rem; font-size: 1.4rem; margin: 1.5rem auto 0 } .mobile-footer-wrap { text-align: center; color: #8b8c92; background-color: #30323e; font-size: 1.2rem; margin-bottom: 0; padding-top: 3rem; padding-bottom: 3rem } .mobile-footer-wrap .mobile-footer-link { display: flex; align-items: center; justify-content: center; font-size: 1.2rem; line-height: 3rem; flex-wrap: wrap; } .mobile-footer-wrap .mobile-footer-link a { color: #8b8c92; font-size: 1.2rem } .mobile-footer-wrap .mobile-footer-link a img { position: relative; top: -0.5rem; left: .2rem; height: .8rem; margin-top: -0.5rem } .mobile-footer-wrap .mobile-footer-link a:hover { color: #fff } .mobile-footer-wrap .mobile-footer-link a:after { content: ""; height: 1rem; margin: -0.2rem .8rem 0; line-height: 3rem; display: inline-block; vertical-align: middle; border-right: .1rem solid #8b8c92 } .mobile-footer-wrap .mobile-footer-link a:last-child:after { display: none } .mobile-footer-wrap .mobile-footer-power { padding: 5% 0; margin: 3% auto; border-top: .1rem solid #4a4c57; border-bottom: .1rem solid #4a4c57 } .mobile-footer-wrap .mobile-footer-power h3 { font-size: 1.4rem; text-align: center; margin-bottom: 3% } .mobile-footer-wrap .mobile-footer-power img { width: 80% } .mobile-footer-wrap .mobile-footer-tel { margin: 0 auto 5%; padding: 2% 0 0 } .mobile-footer-wrap .mobile-footer-tel h3 { font-size: 1.4rem; text-align: center; margin-bottom: 3% } .mobile-footer-wrap .mobile-footer-tel .mobile-telNum-box { display: block; width: 100%; font-size: 1.4rem; height: 3.2rem; line-height: 3.2rem; text-align: center; border-radius: .5rem; color: #fff; border: .1rem solid #fff } .mobile-footer-wrap .mobile-footer-tel a { font-size: 1.4rem; height: 3.2rem; line-height: 3.2rem; text-align: center; border-radius: .5rem; color: #fff } .mobile-footer-wrap .mobile-footer-bottom { font-size: 1.2rem; color: #87888e } .mobile-footer-wrap .mobile-footer-bottom p { line-height: 1.7 } .mobile-footer-wrap .mobile-footer-bottom p a { font-size: 1.2rem; line-height: 1.7; color: #8b8c92 } .mobile-fix-wrap { position: fixed; z-index: 999; right: 2rem; bottom: 3.5rem } .mobile-fix-wrap .mobile-fix-button { box-shadow: 0 0rem 1.4rem 0 rgba(255,98,98,.16) } .mobile-fix-wrap .mobile-fix-button .mobile-chat-box { box-sizing: border-box; padding: .3rem; width: 100%; position: relative; border-radius: 99rem; border: .1rem solid rgba(245,86,98,.5); animation: mymove 1s linear infinite,animated-border 1s linear infinite } .mobile-fix-wrap .mobile-fix-button .mobile-chat-box .mobile-chat-img { width: 6rem; height: 6rem; border-radius: 99rem; border: .2rem solid #1881c9; animation: breathe-img 1s linear infinite } .mobile-fix-wrap .mobile-fix-button .mobile-chat-box .mobile-chat-img img { width: 100% } .mobile-fix-wrap .mobile-chat { z-index: 9999; bottom: 4.3rem; right: 10.5rem; max-width: 24rem; height: 5rem; border-radius: .5rem; background-color: #fff; box-shadow: 0 0rem 1.4rem 0 rgba(255,98,98,.16) } .mobile-fix-wrap .mobile-chat a { font-size: 1.4rem; line-height: 5rem; color: #000; min-width: 12rem; text-align: center } .mobile-fix-wrap .mobile-chat a img { width: 2.3rem; margin-right: 1rem; vertical-align: middle; margin-top: -0.1rem } .mobile-fix-wrap .mobile-chat .weixin_chat { font-size: 1.4rem; line-height: 5rem; min-width: 12rem; color: #fff; width: 50%; text-align: center; border-radius: 0 .5rem .5rem 0; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); background-image: linear-gradient(to right, #ff8989, #ed4040) } .mobile-fix-wrap .mobile-chat .weixin_chat img { width: 3rem; margin-right: 1rem; margin-top: 0; vertical-align: middle } .mobile-fix-wrap .mobile-chat .mobile-chat-close { width: 2.2rem; height: 2.2rem; position: absolute; top: -1rem; left: -1rem; background-color: #fff } .mobile-fix-wrap .mobile-chat .mobile-chat-close img { width: 100% } } @media screen and (-webkit-device-pixel-ratio: 1.5)and (max-width: 1300px)and (min-width: 1201px) { :root { --font-size: 15px; --font-md: 17px } body { font-size: 15px; zoom: .8333333333 } header .nav-wrap { max-width: 1200px } .fix-bottom { width: 432px; height: 648px; transform-origin: right bottom; transform: scale(0.8333333333); -moz-transform: scale(0.75) } }/*# sourceMappingURL=public.css.map */