a { color: #333 } img { max-width: 100% } .button-apply { display: block; width: 110px; height: 40px; line-height: 40px; font-size: var(--font-size); border-radius: 4px; text-align: center; color: #fff; background: linear-gradient(to right, #2f91d4, #1881c9); transition: all .3s ease-in-out } .button-apply:hover { box-shadow: 0 10px 25px 0 rgba(24,129,201,.5) } .price-box { display: flex; justify-content: center; margin-top: 20px } .price-box a { display: block; padding: 0 30px; 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 } .price-box a:hover { box-shadow: 3px 15px 15px rgba(0,0,0,.1) } .price-box a:first-child { margin-right: 25px; color: #fff; background-color: #1881c9; background: linear-gradient(to right, #2f91d4, #1881c9) } .price-box a:first-child:hover { box-shadow: 0 10px 25px 0 rgba(24,129,201,.5) } nav .nav-wrap { background-color: #f2f5fa; height: 500px } nav .nav-wrap .box { display: flex; align-items: center; height: 500px; background: url("../image/5g_banner.png") no-repeat 95% center/57% auto } nav .nav-wrap .box h1 { font-size: 36px; color: #333 } nav .nav-wrap .box p { font-size: 18px; line-height: 1.7; color: #282b42; opacity: .8 } .nav-apply-box { display: flex } .nav-apply-box a { display: block; margin-top: 30px; width: 160px; height: 40px; background: linear-gradient(229deg, #fc2f47 0%, #fd5b54 100%); border-radius: 4px; width: 160px; line-height: 40px; font-size: 16px; text-align: center; color: #fff; transition: all .3s ease-in-out; background: linear-gradient(to right, #2f91d4, #1881c9) } .nav-apply-box a:first-child { margin-right: 20px } .nav-apply-box a:hover { box-shadow: 0 10px 25px 0 rgba(24,129,201,.5) } .chan-chall-box { display: flex; justify-content: space-between } .chan-chall { width: 23%; padding: 80px 35px 40px; border: 1px solid #dee2e8; box-shadow: 0px 8px 20px rgba(85,93,110,.16); border-radius: 8px; background-color: #fff; cursor: default; transition: all .3s ease-in-out } .chan-chall:first-child { background: url("../image/5g_chan1.png") no-repeat top right/140px auto } .chan-chall:nth-child(2) { background: url("../image/5g_chan2.png") no-repeat top right/140px auto } .chan-chall:nth-child(3) { background: url("../image/5g_chan3.png") no-repeat top right/140px auto } .chan-chall:nth-child(4) { background: url("../image/5g_chan4.png") no-repeat top right/140px auto } .chan-chall:hover { background-color: #f9fbfe } .chan-chall:hover h3 { color: #ea343d } .chan-chall:nth-child(2):hover,.chan-chall:nth-child(4):hover { background-color: #fffbfb } .chan-chall h3 { font-size: 18px; line-height: 1.8; margin-bottom: 20px; transition: all .3s ease-in-out } .chan-chall p { font-size: var(--font-size); line-height: 1.8; line-break: anywhere; color: #282b42 } .tele-more-box { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; transition: all 0,4s ease-in-out } .tele-more-box div { width: 16.57%; margin: 0 1px 1px 0; padding: 35px; background-color: #fff; text-align: center } .tele-more-box div img { max-height: 28px } .tele-more-box div p { margin-top: 10px; color: #282b42; font-size: 16px } .tele-more-box div:hover { z-index: 5; box-shadow: 1px 13px 29px 3px rgba(217,226,237,.74) } .tele-more-box div:hover p { color: #e41c1c } .tele-more-webchat { max-width: 1140px; align-items: flex-start; padding: 40px 60px; background-color: #fff; border-radius: 8px } .tele-right-apply { display: flex } .tele-right-apply a:last-child { color: #636363; background-image: none; background-color: #f0f0f0; margin-left: 20px } .tele-right-apply a:last-child:hover { box-shadow: 3px 15px 15px rgba(0,0,0,.1) } .call-mana-wrap .call-mana-box { width: 100%; overflow: hidden; margin-bottom: 30px; border-bottom: 1px solid #f0f0f0 } .call-mana-wrap .call-mana-smart-box { border-bottom: 1px solid rgba(0,0,0,0) !important } .call-mana-wrap .price-box { display: flex; justify-content: center; margin-top: 80px } .call-mana-wrap .price-box a { display: block; width: 160px; height: 40px; background: linear-gradient(229deg, #fc2f47 0%, #fd5b54 100%); border-radius: 4px; width: 160px; line-height: 40px; font-size: 16px; text-align: center; color: #fff; transition: all .3s ease-in-out; background: linear-gradient(to right, #2f91d4, #1881c9) } .call-mana-wrap .price-box a:first-child { margin-right: 25px } .call-mana-wrap .price-box a:first-child:hover { box-shadow: 0 10px 25px 0 rgba(24,129,201,.5) } .call-mana-wrap .price-box a:last-child { line-height: 36px; color: #fc3548; background: #fff; border: 2px solid #fc3548 } .gray .call-mana-wrap .call-mana-box { border-bottom: 1px solid #ddd !important } .gray .call-mana-wrap .call-mana-smart-box { border-bottom: 1px solid rgba(0,0,0,0) !important } .call-mana-tab { display: flex; max-width: 700px; margin: 0 auto; justify-content: space-between; cursor: pointer } .call-mana-tab li { position: relative; font-size: 18px; line-height: 1; padding-bottom: 11px; color: #282b42; border-bottom: 2px solid #e41c1c } .call-mana-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-mana-tab li.active,.call-mana-tab li:hover { color: #e72735 } .call-mana-tab li.active:after,.call-mana-tab li:hover:after { content: ""; position: absolute; left: 50%; margin-left: -4px; bottom: -5px; width: 8px; height: 8px; border-top: 2px solid #e41c1c; border-left: 2px solid #e41c1c; background-color: #fff; z-index: 10; transform: rotate(45deg) } .call-mana-tab li.active span,.call-mana-tab li:hover span { transform: translateX(100%) } .call-mana-tab li:last-child { margin-right: 0 } .call-mana-tab-gray li span { background-color: #f4f7fa } .call-mana { max-width: 1180px; margin: 0 auto; display: flex; justify-content: center; transition: all .4s ease-in-out } .call-mana .call-mana-img { min-width: 58%; width: 58%; padding: 0 2% 0 0; display: flex; align-items: flex-start } .call-mana .call-mana-img img { width: 100% } .call-mana-right { max-width: 40%; width: 40%; overflow: hidden; display: flex; flex-direction: column; justify-content: center; margin-left: 15px } .call-mana-right .call-mana-right-item { display: flex; align-items: baseline; } .call-mana-right .call-mana-right-img { width: 20px; margin-right: 10px } .call-mana-right .call-mana-right-text { flex: 1 } .call-mana-right .call-mana-right-text h3 { font-size: 16px; line-height: 1 } .call-mana-right .call-mana-right-text p { width: 100%; font-size: var(--font-size); line-height: 1.7; color: #6e7080; margin: 10px 0 20px } .call-mana-right .tele-right-apply { display: flex } .call-mana-right .tele-right-apply a:last-child { color: #636363; background-image: none; background-color: #f0f0f0; margin-left: 20px } .call-mana-right .tele-right-apply a:last-child:hover { box-shadow: 3px 15px 15px rgba(0,0,0,.1) } .call-smart-little { border-radius: 8px; margin-top: -30px; background-color: #fff } .call-smart-little .call-mana-right { width: 35%; margin-left: 7% } .call-smart-little .call-mana-right p { font-size: 16px; line-height: 1.8 } .call-smart-little .call-mana-img { margin-right: 0 } .call-mana-little { width: 90%; display: flex; align-items: center; flex-wrap: wrap; margin-top: 40px } .call-mana-little div { display: flex; align-items: center; width: 50% } .call-mana-little div img { width: 14px; height: auto; margin-right: 10px } .call-mana-little div p { line-height: 2.5 !important; font-size: var(--font-size) !important } .webchat-phone-box { display: flex; justify-content: space-between } .webchat-phone-box .webchat-phone { width: 28.5% } .webchat-phone-box .webchat-phone p { font-size: 18px; text-align: center; margin-bottom: 15px } .webchat-phone-box .webchat-phone img { transition: all .3s ease-in-out } .call-hard-box { display: flex; justify-content: space-between } .call-hard-box .call-hard { width: 29%; padding: 30px; border-radius: 15px; box-shadow: 0px 12px 18px 0px rgba(222,232,242,.5); transition: all .3s ease-in-out } .call-hard-box .call-hard:first-child { background: url("../image/webchat_hard1.png") no-repeat 110% 180%/120px auto; background-position: 110% 180% } .call-hard-box .call-hard:nth-child(2) { background: url("../image/webchat_hard2.png") no-repeat 110% 140%/120px auto; background-position: 110% 180% } .call-hard-box .call-hard:nth-child(2) h4 { border-bottom: 4px solid #65d0da } .call-hard-box .call-hard:nth-child(3) { background: url("../image/webchat_hard3.png") no-repeat 110% 140%/120px auto; background-position: 110% 180% } .call-hard-box .call-hard:nth-child(3) h4 { border-bottom: 4px solid #f8213f } .call-hard h4 { display: inline-block; font-size: 18px; line-height: .95; border-bottom: 4px solid #4fa8fb; margin-bottom: 20px } .call-hard p { font-size: var(--font-size); line-height: 1.7; color: #6e7080 } .call-more-wrap { background: url("../image/webchat_more2_bg.png") no-repeat center center/cover } .call-more-wrap h2 { color: #fff } .call-more-box { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; transition: all .4s ease-in-out } .call-more-box div.call-more { width: 25%; overflow: visible; padding: 30px 25px 20px; background-color: #fff; border-top: 1px solid #e8ecf1; border-left: 1px solid #e8ecf1; text-align: center; position: relative } .call-more-box div.call-more img { max-height: 35px } .call-more-box div.call-more h3 { font-size: 18px; margin: 10px 0 5px } .call-more-box div.call-more p { color: #6e7080; font-size: 13px } .call-more-box div.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 div.call-more:nth-child(4n+4) { border-right: 1px solid #e8ecf1 } .call-more-box div.call-more:nth-child(n+13) { border-bottom: 1px solid #e8ecf1 } .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) } .advan-box { display: flex; justify-content: space-between; flex-wrap: wrap } .advan-box .advan { width: 23%; padding: 30px 20px; text-align: center; border-radius: 6px; transition: all .3s ease-in-out; box-shadow: 0px 5px 40px 0px rgba(47,72,88,.07),0px 5px 40px 0px rgba(47,72,88,.07) } .advan-box .advan .advan-img { height: 50px; display: flex; justify-content: center; align-items: center } .advan-box .advan .advan-img-big img { max-height: 45px } .advan-box .advan img { max-height: 50px } .advan-box .advan h3 { font-size: 18px; line-height: 3; color: #000 } .advan-box .advan .advan-line { margin: 10px auto 30px; width: 34px; height: 3px; background-color: #e62b31 } .advan-box .advan p { width: 80%; margin: 0 auto; text-align: left; color: #6e7080; line-height: 2 } .advan-box .advan:hover { transform: translateY(-8px) } .chan-much-wrap .chan-much-box { display: flex; justify-content: space-between } .chan-much { width: 17%; padding: 15px; display: flex; background-color: #fff; border-radius: 4px; flex-direction: column; justify-content: center; align-items: center; position: relative; cursor: pointer; transition: all .3s ease-in-out } .chan-much img { max-height: 32px; padding: 1.5px 0 } .chan-much p { font-size: 16px; margin-top: 10px } .chan-much:hover { box-shadow: 0px 5px 20px 0px rgba(47,72,88,.07); transform: translateY(-8px) } .chan-smart-much { width: 18%; padding: 25px; display: flex; background-color: #fff; border-radius: 4px; flex-direction: row; justify-content: center; align-items: center; position: relative; cursor: pointer; transition: all .3s ease-in-out } .chan-smart-much img { max-height: 33px; padding: 1.5px 0 } .chan-smart-much p { font-size: 16px; margin-top: 0; margin-left: 10px } .chan-smart-much:hover { box-shadow: 0px 5px 20px 0px rgba(47,72,88,.07); transform: translateY(-8px) } .chan-much-small img { max-height: 35px; padding: 0 } .chan-much-box-white .chan-much { box-shadow: 0px 5px 20px 0px rgba(47,72,88,.07) } .chan-much-box-white .chan-much:hover { box-shadow: 0px 5px 40px 0px rgba(47,72,88,.07),0px 5px 40px 0px rgba(47,72,88,.07) } .bottom-tryout-wrap .bottom-tryout .bottom-tryout-p { font-size: 16px; margin: 5px auto 25px } .tryout-form { margin: 0 auto 0; min-width: 250px; height: 40px; overflow: hidden; display: flex; justify-content: center } .tryout-form input { width: 10%; min-width: 300px; height: 40px; font-size: 16px; background-color: #fff; border: 0; padding: 0; border-radius: 4px; text-indent: 16px; vertical-align: top } .tryout-form button { margin-left: -40px; height: 40px; line-height: 40px; border-radius: 0 4px 4px 0; box-sizing: border-box; padding: 0 30px; background-color: #33485c; z-index: 999 } @media screen and (min-width: 992px)and (max-width: 1199px) { .chan-chall-box .chan-chall { padding: 25px 15px } .chan-chall .chan-chall-img { width: 40px; height: 40px } .chan-chall .chan-chall-right h3 { font-size: 18px; line-height: 2 } .call-mana-tab { max-width: 560px } .call-mana-tab li { margin-right: 0 } .call-more-box { max-width: 90% } .call-more-box .call-more { padding: 20px 20px 15px } .tryout-form { margin: 0 auto 0; min-width: 250px; height: 40px; overflow: hidden; display: flex; justify-content: center } .tryout-form input { width: 10%; min-width: 300px; height: 40px; font-size: 16px; background-color: #fff; border: 0; padding: 0; border-radius: 4px; text-indent: 16px; vertical-align: top } .tryout-form button { margin-left: -40px; height: 40px; line-height: 40px; border-radius: 0 4px 4px 0; box-sizing: border-box; padding: 0 30px; background-color: #33485c; z-index: 999 } } @media screen and (min-width: 768px)and (max-width: 991px) { nav .nav-wrap { background: url("../image/webchat_banner_bg.png") no-repeat center bottom/cover; height: 380px } nav .nav-wrap .box { height: 380px } nav .nav-wrap .box h1 { font-size: 24px; color: #fff } nav .nav-wrap .box p { font-size: 16px; color: #fff; opacity: .8 } .nav-apply-box a { margin-top: 20px; width: 102px; height: 34px; line-height: 34px; font-size: var(--font-size) } .chan-chall-box .chan-chall { padding: 15px } .chan-chall .chan-chall-img { width: 30px; height: 30px } .chan-chall .chan-chall-right h3 { font-size: 16px; line-height: 2 } .chan-chall .chan-chall-right p { font-size: 13px } .call-mana-tab { max-width: 450px } .call-mana-tab li { margin-right: 0; font-size: 16px } .call-mana-right h3 { font-size: 16px } .tele-more-webchat { max-width: 90%; align-items: flex-start } .call-hard-box .call-hard { width: 29%; padding: 20px 15px; border-radius: 15px; box-shadow: 0px 12px 18px 0px rgba(222,232,242,.5); transition: all .3s ease-in-out; background-size: 100px auto !important } .call-hard-box .call-hard br { display: none } .call-more-box { max-width: 90% } .call-more-box .call-more { padding: 20px 20px 15px } .call-more-box .call-more img { max-width: 30px } .call-more-box .call-more h3 { font-size: 16px !important } .bottom-tryout-wrap .bottom-tryout .bottom-tryout-p { margin: 5px auto 15px } .button-apply { width: 102px; height: 34px; line-height: 34px } .price-box a { padding: 0 15px; height: 34px; line-height: 34px } } @media screen and (max-width: 768px) { nav .nav-wrap { background: url("../image/webchat_banner_bg.png") no-repeat center bottom/cover; height: 380px } nav .nav-wrap .box { height: 380px; background-position: center bottom; align-items: start } nav .nav-wrap .box h1 { font-size: 24px; text-align: center; color: #fff; margin-top: 60px } nav .nav-wrap .box p { font-size: var(--font-size); color: #fff; opacity: .8; text-align: center } nav .nav-wrap .box p br { display: none } .call-mana-wrap .price-box { margin-top: 20px } .nav-apply-box { display: flex; justify-content: center } .nav-apply-box a { margin-top: 20px; width: 102px; height: 34px; line-height: 34px; font-size: var(--font-size) } .chan-chall-box { flex-wrap: wrap } .chan-chall-box .chan-chall { width: 48%; padding: 15px; margin-bottom: 5% } .chan-chall .chan-chall-img { width: 30px; height: 30px } .chan-chall .chan-chall-right h3 { font-size: 15px; line-height: 1.7 } .chan-chall .chan-chall-right p { font-size: 13px } .smart-plat-wrap .smart-plat-box { display: flex; flex-wrap: wrap; justify-content: center } .smart-plat-wrap .smart-plat-box .smart-plat-left-img { display: flex; align-items: center; width: 90%; min-width: 55% } .smart-plat-wrap .smart-plat-box .smart-plat-right { margin-top: 15px; max-width: 90%; width: 90%; margin-left: 0 } .smart-plat-wrap .smart-plat-box .smart-plat-right h3 { font-size: 16px } .smart-plat-wrap .smart-plat-box .smart-plat-right p { margin-bottom: 10px } .smart-plat-wrap .tele-right-apply { justify-content: center } .smart-plat-wrap .price-box { margin-top: 20px } .smart-plat-wrap .price-box a { width: 102px; height: 34px; line-height: 34px; text-align: center; font-size: 13px } .call-mana-tab { max-width: 86% } .call-mana-tab li { margin-right: 0; font-size: 15px } .call-mana-right h3 { font-size: 16px } .call-mana { max-width: 100%; flex-wrap: wrap } .call-mana .call-mana-img { min-width: 90%; width: 90% } .call-mana-right { max-width: 90%; width: 90% !important; margin-top: 3% } .call-mana-right .call-mana-title { margin-top: 15px } .call-mana-right .tele-right-apply { display: flex; justify-content: center } .webchat-phone-box { display: flex; justify-content: space-between } .webchat-phone-box .webchat-phone { width: 32% } .webchat-phone-box .webchat-phone p { font-size: var(--font-size) } .tele-more-wrap { overflow: hidden; padding-bottom: 80px; background: url("../image/webchat_more_bg.png") no-repeat center center/cover } .tele-more-wrap h2 { color: #fff } .tele-more-wrap .title-p { line-height: 1.7; margin-bottom: 30px } .tele-more-box { max-width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; transition: all 0,4s ease-in-out } .tele-more-box div { width: 16.57%; margin: 0 1px 1px 0; padding: 35px; background-color: #fff; text-align: center } .tele-more-box div img { max-height: 28px } .tele-more-box div p { margin-top: 10px; color: #282b42; font-size: 12px } .tele-more-box div:hover { z-index: 5; box-shadow: 1px 13px 29px 3px rgba(217,226,237,.74) } .tele-more-box div:hover p { color: #e41c1c } .tele-more-webchat { max-width: 90%; align-items: flex-start } .call-hard-box .call-hard { width: 29%; padding: 20px 15px; border-radius: 15px; box-shadow: 0px 12px 18px 0px rgba(222,232,242,.5); transition: all .3s ease-in-out; background-size: 100px auto !important } .call-hard-box .call-hard br { display: none } .call-more-box { max-width: 90% } .call-more-box .call-more { padding: 10px 5px !important } .call-more-box .call-more img { max-width: 20px } .call-more-box .call-more h3 { font-size: var(--font-size) !important } .call-more-box .call-more p { font-size: 12px } .bottom-tryout-wrap .bottom-tryout .bottom-tryout-p { margin: 5px auto 15px } .bottom-tryout-wrap .bottom-tryout .tryout-form input { min-width: 250px } .button-apply { width: 102px; height: 34px; line-height: 34px } .price-box a { padding: 0 15px; height: 34px; line-height: 34px } }/*# sourceMappingURL=5G.css.map */