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) } nav .nav-wrap { background: url("../image/chan_banner_bg.png") no-repeat center bottom/cover; height: 400px } nav .nav-wrap2 { background: url("../image/solution_market_bg3.png") no-repeat center bottom/cover; height: 400px } nav .nav-wrap .box { display: flex; align-items: center; justify-content: center; height: 100%; } nav .nav-wrap .box h1 { font-size: 36px; color: #fff } .banner-apply-box { display: flex; margin-top: 40px; justify-content: center; } .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%) } .banner-apply-box a:hover { box-shadow: 0 10px 25px 0 rgba(24,129,201,.5) } nav .nav-wrap .box p { font-size: 18px; line-height: 1.7; color: #fff; opacity: .8 } nav .nav-smart-wrap .box { background: url("../image/chan_smart_banner.png") no-repeat right 80%/36% auto } .chan-chall-box { display: flex; justify-content: space-between } .chan-chall-box .chan-chall { display: flex; width: 31%; padding: 30px 15px 40px; border-radius: 8px; background-color: #fff; box-shadow: 0px 5px 40px 0px rgba(47,72,88,.07),0px 5px 40px 0px rgba(47,72,88,.07); cursor: default; transition: all .3s ease-in-out } .chan-chall .chan-chall-img { width: 50px; } .chan-chall .chan-chall-img img { width: 100% } .chan-chall .chan-chall-right { flex: 1; margin-left: 15px } .chan-chall .chan-chall-right h3 { font-size: 20px; line-height: 3 } .chan-chall .chan-chall-right p { font-size: 16px; color: #6e7080 } .chan-chall:hover { transform: translateY(-8px) } .chan-pro-wrap .chan-pro-img { max-width: 900px; margin: 0 auto } .chan-pro-wrap .price-box { display: flex; justify-content: center; margin-top: 40px } .chan-pro-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 } .chan-pro-wrap .price-box a:hover { box-shadow: 3px 15px 15px rgba(0,0,0,.1) } .chan-pro-wrap .price-box a:first-child { margin-right: 25px; color: #fff; background-color: #1881c9; background: linear-gradient(to right, #2f91d4, #1881c9) } .chan-pro-wrap .price-box a:first-child:hover { box-shadow: 0 10px 25px 0 rgba(24,129,201,.5) } .tele-swiper-wrap { padding-bottom: 60px } .tele-swiper-wrap .price-box { display: flex; justify-content: center; margin-top: -10px } .tele-swiper-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 } .tele-swiper-wrap .price-box a:hover { box-shadow: 3px 15px 15px rgba(0,0,0,.1) } .tele-swiper-wrap .price-box a:first-child { margin-right: 25px; color: #fff; background-color: #1881c9; background: linear-gradient(to right, #2f91d4, #1881c9) } .tele-swiper-wrap .price-box a:first-child:hover { box-shadow: 0 10px 25px 0 rgba(24,129,201,.5) } .tele-swiper-tab-wrap { display: flex; justify-content: center; margin: -11px auto 0; overflow: hidden; border-bottom: 1px solid #f0f0f0 } .tele-swiper-tab-wrap li { font-size: 18px; line-height: 40px; color: #282b42; margin-right: 120px; position: relative; border-bottom: 2px solid #e41c1c; transition: all .5s ease-in-out; cursor: pointer } .tele-swiper-tab-wrap li span { position: absolute; left: 0; bottom: -2px; display: block; height: 8px; width: 100%; z-index: 20; background-color: #f4f7fa; transition: all .3s ease-in-out } .tele-swiper-tab-wrap li:last-child { margin-right: 0 } .tele-swiper-tab-wrap li: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: #f4f7fa; z-index: 10; transform: rotate(45deg) } .tele-swiper-tab-wrap li:hover,.tele-swiper-tab-wrap .active { color: #e41c1c; transform: translateX(0); border-bottom: 2px solid #e41c1c } .tele-swiper-tab-wrap li:hover span { transform: translateX(100%) } .tele-swiper-tab-wrap .active span { transform: translateX(100%) } .tele-swiper-container { width: 100%; overflow: hidden } .tele-swiper-container .swiper-pagination { bottom: 15px !important } .tele-swiper-container .swiper-pagination-bullet-active { background-color: #ea383b; width: 19px; height: 7px; border-radius: 0; opacity: 1 } .tele-swiper-box { display: flex; align-items: center; padding: 30px 0; margin-bottom: 10px } .tele-swiper-box .swiper-slide { width: 1050px; height: auto; margin: 0 -25px !important; padding: 30px; display: flex; background-color: #fff; box-shadow: 2px 21px 29px 3px rgba(204,213,223,.38); border-radius: 8px; text-align: center; transition: all .5s ease-in-out } .tele-swiper-box .swiper-slide .tele-left-img { display: flex; align-items: center; min-height: 456px; width: 60%; min-width: 60% } .tele-swiper-box .swiper-slide-active { margin: 0 0 10px } .tele-swiper-box .swiper-slide-prev,.tele-swiper-box .swiper-slide-next { transform: scale(0.75); cursor: pointer } .tele-right { display: flex; flex-direction: column; justify-content: center; text-align: left; margin-left: 40px } .tele-right h3 { font-size: 18px; line-height: 1 } .tele-right p { font-size: 16px; color: #6e7080; margin: 20px 0 30px } .tele-right .tele-right-apply { display: flex } .tele-right .tele-right-apply a:last-child { color: #636363; background-image: none; background-color: #f0f0f0; margin-left: 20px } .tele-right .tele-right-apply a:last-child:hover { box-shadow: 3px 15px 15px rgba(0,0,0,.1) } .smart-plat-wrap .smart-plat-box { display: flex } .smart-plat-wrap .smart-plat-box .smart-plat-left-img { display: flex; align-items: center; width: 55% } .smart-plat-wrap .price-box { display: flex; justify-content: center; margin-top: 30px } .smart-plat-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 } .smart-plat-wrap .price-box a:hover { box-shadow: 3px 15px 15px rgba(0,0,0,.1) } .smart-plat-wrap .price-box a:first-child { margin-right: 25px; color: #fff; background-color: #1881c9; background: linear-gradient(to right, #2f91d4, #1881c9) } .smart-plat-wrap .price-box a:first-child:hover { box-shadow: 0 10px 25px 0 rgba(24,129,201,.5) } .smart-plat-right { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: left; margin-left: 40px } .smart-plat-right h3 { font-size: 18px; line-height: 1; margin-bottom: 25px } .smart-plat-right h3 span { width: 3px; height: 16px; display: inline-block; vertical-align: -2px; margin-right: 3px; background-color: #e72735 } .smart-plat-right p { font-size: var(--font-size); padding-left: 20px; line-height: 2.5; color: #6e7080; margin: 0 } .smart-plat-right p img { height: 18px; margin-right: 10px; vertical-align: middle } .smart-plat-right .smart-plat-apply { display: flex } .smart-plat-right .smart-plat-apply a:last-child { color: #636363; background-image: none; background-color: #f0f0f0; margin-left: 20px } .smart-plat-right .smart-plat-apply a:last-child:hover { box-shadow: 3px 15px 15px rgba(0,0,0,.1) } .smart-plat-icon-box { width: 70%; display: flex; flex-wrap: wrap; padding: 0 10px 40px } .smart-plat-icon-box .smart-plat-icon { margin: 10px; color: #6e7080 } .smart-plat-icon-box .smart-plat-icon img { height: 18px; margin-right: 5px; vertical-align: text-top } .smart-plat-icon-box .smart-plat-icon .smart-plat-icon-big { height: 14px; vertical-align: -2px } .call-mana-wrap .call-mana-box { width: 100%; overflow: hidden; margin-bottom: 30px; border-bottom: 1px solid #f0f0f0 } .call-mana-wrap .price-box { display: flex; justify-content: center; margin-top: 20px } .call-mana-wrap .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 } .call-mana-wrap .price-box a:hover { box-shadow: 3px 15px 15px rgba(0,0,0,.1) } .call-mana-wrap .price-box a:first-child { margin-right: 25px; color: #fff; background-color: #1881c9; background: linear-gradient(to right, #2f91d4, #1881c9) } .call-mana-wrap .price-box a:first-child:hover { box-shadow: 0 10px 25px 0 rgba(24,129,201,.5) } .call-mana-tab { display: flex; max-width: 1180px; margin: 0 auto; justify-content: center; cursor: pointer } .call-mana-tab li { position: relative; font-size: 18px; margin-top: -10px; line-height: 2; color: #282b42; margin-right: 120px; 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; flex-wrap: wrap; transition: all .4s ease-in-out } .call-mana .call-mana-img { width: 57%; height: 405px; padding: 0 2% 10px 0; display: flex } .call-mana .call-mana-img img { width: 100% } .call-smart .call-mana-img { height: 422px } .call-mana-right { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; margin-left: 15px } .call-mana-right h3 { font-size: 18px; line-height: 1 } .call-mana-right p { width: 80%; font-size: 16px; color: #6e7080; margin: 20px 0 30px } .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) } .advan-box { display: flex; justify-content: space-between; flex-wrap: wrap } .advan-box .advan { width: 49%; margin-bottom: 2%; padding: 30px 20px; 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_saq{ display: flex; align-items: center; } .advan-box .advan .advan-img { margin-right: 10px; height: 40px; display: flex; justify-content: center; align-items: center; } .advan-box .advan .advan_saq img { max-height: 40px; } .advan-box .advan img { max-height: 40px; } .advan-box .advan h3 { font-size: 18px; line-height: 3; color: #000; } .advan-box .advan p { 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; 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) } @media screen and (min-width: 992px)and (max-width: 1199px) { .chan-chall .chan-chall-img { width: 50px } .chan-chall .chan-chall-right h3 { font-size: 18px; line-height: 1.7; margin-bottom: 10px } .chan-chall .chan-chall-right p { font-size: 16px; color: #6e7080 } } @media screen and (min-width: 768px)and (max-width: 991px) { .chan-chall .chan-chall-img { width: 40px } .chan-chall .chan-chall-right h3 { font-size: 16px; line-height: 1.7; margin-bottom: 10px } .chan-chall .chan-chall-right p { font-size: var(--font-size); color: #6e7080 } .tele-swiper-box { padding: 20px 0 } .tele-swiper-box .swiper-slide { width: 90%; height: auto } .tele-swiper-box .swiper-slide .tele-left-img { min-height: 0; width: 60%; min-width: 60% } .tele-right h3 { font-size: 16px } .tele-right p { font-size: var(--font-size) } .call-mana { max-width: 94% } .call-mana .call-mana-img { width: 57%; height: auto } .advan-box .advan { width: 23%; padding: 20px 10px } .advan-box .advan p { width: 100% } .chan-much { width: 19%; padding: 10px; font-size: var(--font-size) } } @media screen and (max-width: 768px) { nav .nav-wrap { height: 350px } nav .nav-wrap .box { align-items: center; justify-content: center; } nav .nav-wrap .box h1 { font-size: 24px; text-align: center; margin-top: 15% } nav .nav-wrap .box p { font-size: 16px; text-align: center; line-height: 1.7 } nav .nav-wrap .box p br { display: none } nav .nav-wrap .box a { margin: 20px auto 0; width: 102px; height: 34px; line-height: 34px; font-size: var(--font-size) } .chan-chall-box{ display: block; } .chan-chall { flex-wrap: wrap; align-items: flex-start; justify-content: center; padding: 20px 10px 20px !important; width: 100% !important; margin-bottom: 15px; } .chan-chall .chan-chall-img { width: 40px } .chan-chall .chan-chall-right { flex: none; width: 100%; margin-left: 0 } .chan-chall .chan-chall-right h3 { font-size: 16px; line-height: 1.7; margin-bottom: 10px; text-align: center; } .chan-chall .chan-chall-right p { font-size: var(--font-size); color: #6e7080 } .tele-swiper-tab-wrap { width: 94%; justify-content: space-between } .tele-swiper-tab-wrap li { font-size: 16px; margin-right: 0 } .tele-swiper-wrap { padding-bottom: 20px } .tele-swiper-box { padding: 20px 0 } .tele-swiper-box .swiper-slide { width: 90%; height: auto; padding: 2%; margin: 0 5px !important; flex-wrap: wrap } .tele-swiper-box .swiper-slide .tele-left-img { min-height: 0; width: 90%; min-width: 90%; margin: 0 auto 5% } .tele-right { width: 90% } .tele-right h3 { font-size: 16px } .tele-right p { font-size: var(--font-size) } .call-mana-tab { max-width: 94%; justify-content: space-between } .call-mana-tab li { position: relative; font-size: 16px; margin-top: 0; line-height: 2; color: #282b42; margin-right: 0; border-bottom: 2px solid #e41c1c } .call-mana { max-width: 94%; display: flex; flex-wrap: wrap } .call-mana .call-mana-img { width: 90%; height: auto; text-align: center; margin: 0 auto 5% !important } .call-mana .call-mana-right { width: 90%; flex: none } .call-mana .call-mana-right p { width: 90% } .chan-pro-wrap .title { line-height: 1.7; margin-top: 40px; margin-bottom: 20px } .advan-box { flex-wrap: wrap } .advan-box .advan { width: 100%; padding: 20px 10px; margin-bottom: 4%; } .advan-box .advan p { width: 100% } .chan-much-box { flex-wrap: wrap } .chan-much { width: 32%; padding: 10px 5px; margin-bottom: 3% } .chan-much p { font-size: 12px } .smart-plat-wrap .smart-plat-box { display: flex; flex-wrap: wrap } .smart-plat-wrap .smart-plat-box .smart-plat-left-img { display: flex; align-items: center; width: 90%; margin: 0 auto 5% } .smart-plat-right { width: 90%; flex: none; margin: 0 auto } .smart-plat-right h3 { font-size: 16px } .smart-plat-right p { font-size: var(--font-size) } .smart-plat-right .smart-plat-apply { display: flex } .smart-plat-icon-box { width: 100%; padding: 0 10px 20px } .smart-plat-icon-box .smart-plat-icon { margin: 10px; color: #6e7080 } }/*# sourceMappingURL=chan.css.map */