nav { width: 100% } nav .tele-banner-wrap { height: 500px; overflow: hidden; background: url("../image/tele_banner.png") no-repeat center center/cover } nav .tele-banner-wrap .tele-banner { align-items: center; height: 500px } nav .tele-banner-wrap .tele-banner h1 { color: #fff; font-size: 36px; line-height: 1.5 } nav .tele-banner-wrap .tele-banner p { font-size: 18px; color: rgba(255,255,255,.8); line-height: 1.8 } nav .tele-banner-wrap .tele-banner a { display: block; margin-top: 30px; width: 160px; height: 45px; line-height: 45px; border-radius: 4px; font-size: 16px; text-align: center; color: #fff; transition: all .3s ease-in-out; background: linear-gradient(to right, #2f91d4, #1881c9) } nav .tele-banner-wrap .tele-banner a:hover { box-shadow: 0 10px 25px 0 rgba(24,129,201,.5) } nav .tele-banner-wrap .tele-banner img { width: 53%; align-self: flex-end } .tele-video-box { align-items: flex-start } .tele-video { width: 48%; overflow: hidden; height: auto; padding: 30px 60px 50px; background: url("../image/tele_video.png") no-repeat center top/100% auto; text-align: center } .tele-video .tele-video-item { position: relative; font-size: 0 } .tele-video .tele-video-play { position: absolute; display: flex; cursor: pointer; justify-content: center; align-items: center; top: 0; left: 0; z-index: 3; width: 100%; height: 100%; background-color: rgba(94,130,192,.4) } .tele-video .tele-video-play img { width: 60px; opacity: .8; transition: all .3 ease-in-out } .tele-video .tele-video-play:hover img { opacity: 1 } .tele-video video { width: 100%; height: 100% } .tele-video-right-wrap { width: 50%; display: flex; justify-content: space-between; flex-wrap: wrap } .tele-video-right { width: 47.9%; padding: 25px 44px; margin-bottom: 26px; border: 1px solid #e0e6ec; border-radius: 8px; transition: all .4s ease-in-out } .tele-video-right h4 { font-size: 20px; margin-bottom: 10px } .tele-video-right h4 img { height: 22px; vertical-align: middle; margin-right: 10px } .tele-video-right p { font-size: 16px; line-height: 26px; color: #a3a3a3 } .tele-video-right:nth-child(3),.tele-video-right:nth-child(4) { margin-bottom: 0 } .tele-video-right:hover { cursor: defalut; transform: translateY(-8px); box-shadow: -1px 29px 42px 4px rgba(247,218,218,.34); border: solid 1px #f54f4f } .tele-swiper-tab-wrap { display: flex; justify-content: center; margin: -11px auto 0; overflow: hidden } .tele-swiper-tab-wrap li { font-size: 18px; line-height: 40px; color: #282b42; margin-right: 98px; 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: #fff; 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: -4px; width: 8px; height: 8px; border-top: 2px solid #e41c1c; border-left: 2px solid #e41c1c; background-color: #fff; 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(120px) } .tele-swiper-tab-wrap .active span { transform: translateX(120px) } .tele-swiper-container { width: 100%; overflow: hidden; background: url("../image/tele_swiper_bg.png") no-repeat top left/cover } .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: 820px; height: auto; margin: 0 .1%; padding: 0 15px 10px; 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 h4 { font-size: 16px; margin: 25px 0 20px; color: #282b42 } .tele-swiper-box .swiper-slide h4 span { color: #e41c1c } .tele-swiper-box .swiper-slide img { width: auto; max-height: 375px } .tele-swiper-box .swiper-slide-prev,.tele-swiper-box .swiper-slide-next { transform: scale(0.75); cursor: pointer } .price-box { display: flex; margin: 30px auto 0; width: 245px; justify-content: space-between } .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 } .price-box a:hover { box-shadow: 3px 15px 15px rgba(0,0,0,.1) } .price-box a:first-child { 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) } .tele-mana-tab { display: flex; justify-content: center; margin-bottom: 20px; cursor: pointer } .tele-mana-tab li { font-size: 18px; margin-top: -10px; line-height: 2; color: #282b42; margin-right: 98px } .tele-mana-tab li span { display: flex; justify-content: flex-end; width: 100%; height: 3px; background-color: #fff } .tele-mana-tab li span i { margin-right: 4px; width: 4px; height: 3px; background-color: #fff } .tele-mana-tab li.active,.tele-mana-tab li:hover { color: #e72735 } .tele-mana-tab li.active span,.tele-mana-tab li:hover span { display: flex; justify-content: flex-end; width: 100%; height: 3px; background-color: #eb4434 } .tele-mana-tab li.active span i,.tele-mana-tab li:hover span i { margin-right: 4px; width: 4px; height: 3px; background-color: #fff } .tele-mana-tab li:last-child { margin-right: 0 } .tele-mana { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; transition: all .4s ease-in-out } .tele-mana .tele-mana-img { width: 55%; padding: 10px 0 } .tele-mana .tele-mana-img img { width: 100% } .tele-mana-right { width: 40%; overflow: hidden } .tele-mana-right h5 { font-size: 18px; font-weight: bold; color: #000; margin: 40px 0 25px } .tele-mana-right .tele-mana-block { display: flex } .tele-mana-right .tele-mana-block div { width: 7px; height: 7px; margin-right: 5px; background-color: #e53e2e } .tele-mana-right .tele-mana-block div:nth-child(2) { opacity: .7 } .tele-mana-right .tele-mana-block div:nth-child(3) { opacity: .5 } .tele-mana-right p { margin: 40px 0 0; font-size: 16px; line-height: 36px; color: #959595 } .tele-mana-right .tele-mana-apply { width: 100%; overflow: hidden; background: url("../image/tele_mana_right_bg.png") no-repeat right bottom/80% } .tele-mana-right .tele-mana-apply a { display: block; margin: 40px 0; width: 110px; height: 40px; line-height: 40px; text-align: center; font-size: var(--font-size); border-radius: 4px; color: #fff; background-color: #1881c9; background: linear-gradient(to right, #2f91d4, #1881c9); transition: all .4s ease-in-out } .tele-mana-right .tele-mana-apply a:hover { box-shadow: 10px 10px 25px 0 rgba(24,129,201,.5) } .tele-more-wrap { overflow: hidden; padding-bottom: 80px; background: url("../image/order_more_bg.png") no-repeat center center/cover } .tele-more-wrap h2 { color: #fff } .tele-more-box { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; transition: all 0,4s ease-in-out; background-color: #f0f2f6 } .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 } .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(136deg, #6aa4ff 0%, #5784ff 100%); box-shadow: 0px 11px 18px 1px rgba(95,124,180,.3216) } .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: #e4e7ff } .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 } @media screen and (min-width: 768px)and (max-width: 991px) { .tele-video-box { align-items: center } .tele-video-box .tele-video-right { width: 48%; padding: 4%; margin-bottom: 26px; border: 1px solid #e0e6ec; border-radius: 8px; transition: all .4s ease-in-out } .tele-video-box .tele-video-right h4 { font-size: 18px } .tele-video-box .tele-video-right p { font-size: var(--font-size) } .tele-swiper-tab-wrap { margin: -11px auto 0; overflow: hidden } .tele-swiper-tab-wrap li { font-size: 16px; line-height: 30px; margin-right: 8% } .tele-swiper-box .swiper-slide { width: 80% } .tele-more-box { max-width: 94%; justify-content: center } .tele-more-box div { width: 19.75%; margin: 0 1px 1px 0; padding: 3%; background-color: #fff; text-align: center } } @media screen and (max-width: 768px) { .price-box a { width: 10.2rem; height: 3.4rem; line-height: 3.4rem } nav { width: 100% } nav .tele-banner-wrap { height: 42rem } nav .tele-banner-wrap .tele-banner { height: 100%; justify-content: center; align-items: flex-start } nav .tele-banner-wrap .tele-banner h1 { font-size: 2.4rem; text-align: center; line-height: 1.5; margin-top: 8rem } nav .tele-banner-wrap .tele-banner p { font-size: 1.4rem; color: #fff; line-height: 3 } nav .tele-banner-wrap .tele-banner a { margin: 3rem auto 0; width: 10.2rem; height: 3.4rem; line-height: 3.4rem; border-radius: .4rem; font-size: 1.4rem } nav .tele-banner-wrap .tele-banner img { width: 65% } .tele-video { width: 100%; margin: 0 auto 5%; padding: 2% 8% 8% } .tele-video-right-wrap { width: 100%; margin: 0 auto } .tele-video-right { width: 49%; padding: 1rem; margin-bottom: 3% } .tele-video-right h4 { font-size: 1.4rem } .tele-video-right h4 img { height: 2rem } .tele-video-right p { font-size: 1.2rem; line-height: 1.7 } .tele-swiper-tab-wrap { justify-content: space-around } .tele-swiper-tab-wrap li { font-size: 1.4rem; line-height: 4rem; margin-right: 0 } .tele-swiper-tab-wrap li span { height: 1rem } .tele-swiper-container .swiper-pagination { bottom: 1.5rem !important } .tele-swiper-container .swiper-pagination-bullet-active { background-color: #ea383b; width: 1.9rem; height: .7rem; border-radius: 0; opacity: 1 } .tele-swiper-box { padding: 5% 0; margin-bottom: 3rem } .tele-swiper-box .swiper-slide { width: 92%; height: auto } .tele-swiper-box .swiper-slide h4 { font-size: 1.3rem; margin: 1rem 0 1rem } .tele-swiper-box .swiper-slide img { width: 80% } .tele-swiper-box .swiper-slide-active { width: 90% } .tele-mana-tab { justify-content: space-around; margin-bottom: 5% } .tele-mana-tab li { font-size: 1.4rem; margin-right: 0; margin-top: 0 } .tele-mana { flex-wrap: wrap; justify-content: space-between } .tele-mana .tele-mana-img { width: 90%; min-height: auto; margin: 0 auto; padding: 0 } .tele-mana .tele-mana-img img { width: 90%; margin-left: 5% } .tele-mana-right { width: 90%; margin: 0 auto } .tele-mana-right h5 { font-size: 1.6rem; margin: 3% 0 } .tele-mana-right p { margin: .5rem 0 0; font-size: 1.3rem; line-height: 1.7; color: #959595 } .tele-mana-right .tele-mana-apply a { display: block; margin: 5% 0; width: 10.2rem; height: 3.4rem; line-height: 3.4rem; font-size: 1.3rem; border-radius: .4rem; color: #fff; background-color: #1881c9; } .tele-more-wrap { overflow: hidden; padding-bottom: 5%; } .tele-more-box { width: 92%; border-radius: .4rem; overflow: hidden; margin: 0 auto } .tele-more-box div { width: 24.7%; margin: 0 .1rem .1rem 0; padding: 1rem } .tele-more-box div p { font-size: 1.3rem } }/*# sourceMappingURL=telesales.css.map */