@charset "utf-8"; .service_01{ position: relative; margin-top: 50px; margin-bottom: 50px;box-shadow: 0 6px 13px 0 rgba(69,69,69,0.13);} .service_01 .number{ position: absolute; right:5%; top: -5%; z-index: 1; color: #f7f9f9; font-size: 140px;font-family: 'Swiss721BTBlackCondensed'; } .service_01 .service_01_left{ position: relative; z-index: 2; float: left; width: 40%; background-repeat: no-repeat; background-size: cover; background-position: center center; height: 550px;} .service_01 .service_01_right{ position: relative; z-index: 2; float: right; width:54%; padding-left: 3%; padding-right: 3%; padding-top: 50px;} .service_01 .service_01_right .titile{ font-size: 30px; color: #3b3b41; font-weight: bold; margin-bottom: 40px;} .service_01 .service_01_right .titile span{ position: relative} .service_01 .service_01_right .titile span::after { left: 0%; position: absolute; bottom: -25px; content: " "; width: 42px; margin-left: 0; border-bottom: 3px solid #268184; -webkit-transition: .3s; transition: .3s; } .service_01 .service_01_right .service_wenzi{} .mySwiper { width: 100%; height:340px; } .mySwiper .swiper-slide { height: 340px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-right: 30px; overflow-y: scroll } .mySwiper .swiper-scrollbar { background: rgba(0,107,110,.1); } .mySwiper .swiper-scrollbar-drag { background: rgba(0,107,110,.9); } .service_02{ position: relative; margin-top: 50px; margin-bottom: 50px;box-shadow: 0 6px 13px 0 rgba(69,69,69,0.13);} .service_02 .number{ position: absolute; left:45%; top: -5%; z-index: 1; color: #f7f9f9; font-size: 140px;font-family: 'Swiss721BTBlackCondensed'; } .service_02 .service_01_left{ position: relative; z-index: 2; float: right; width: 40%; background-repeat: no-repeat; background-size: cover; background-position: center center; height: 550px;} .service_02 .service_01_right{ position: relative; z-index: 2; float: left; width:54%; padding-left: 3%; padding-right: 3%; padding-top: 50px;} .service_02 .service_01_right .titile{ font-size: 30px; color: #3b3b41; font-weight: bold; margin-bottom: 40px;} .service_02 .service_01_right .titile span{ position: relative} .service_02 .service_01_right .titile span::after { left: 0%; position: absolute; bottom: -25px; content: " "; width: 42px; margin-left: 0; border-bottom: 3px solid #268184; -webkit-transition: .3s; transition: .3s; } .service_02 .service_01_right .service_wenzi{} .success_case{ background-color: #f2f7f8; padding: 80px 0;} .success_case .tit{ text-align: center; color: #3b3b41; font-size: 30px; font-weight: bold; margin-bottom: 60px;} .success_case .tit span{ position: relative;} .success_case .tit span::after { left:50%; position: absolute; bottom: -25px; content: " "; width: 42px; margin-left:-21px; border-bottom: 3px solid #268184; -webkit-transition: .3s; transition: .3s; } .success_case_lists{} .success_case_lists .item{} .success_case_lists .item .left_pic{ float: left; width: 50%; height: 400px; background-repeat: no-repeat; background-size: cover; background-position: center center;border-radius:30px;} .success_case_lists .item .right_font{ float: right; width: 45%; text-align: left; padding-top: 30px;} .success_case_lists .item .right_font .titile{ margin-bottom: 30px; color: #00696c; font-weight: bold; font-size: 32px;} .success_case_lists .item .right_font .descipes{ font-size: 16px;line-height:30px; height:120px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:4; color: #4c4c51;} .success_case_lists .slick-dots{width: auto; left: 55%; bottom: 60px;} .success_case_lists .slick-dots li button{ width: 12px; height: 12px; background-color:#c2dbdc;} .success_case_lists .slick-dots li.slick-active button { background: #006b6e; } @media screen and (max-width: 1400px){ .service_01 .service_01_left{ height: 450px;} .mySwiper { width: 100%; height: 240px; } .service_02 .service_01_left { height: 450px; } .success_case_lists .item .left_pic{ height: 340px} .service_01,.service_02{box-shadow:none;} } @media (max-width:768px) { .service_01 .service_01_left { float: none; width: initial; height: 300px; } .service_01 .service_01_right { position: relative; z-index: 2; float: none; width: initial; padding-left: 3%; padding-right: 3%; padding-top: 40px; padding-bottom: 40px; } .service_02 .service_01_left { position: relative; z-index: 2; float: none; width: initial; background-repeat: no-repeat; background-size: cover; background-position: center center; height: 300px; } .service_02 .service_01_right { position: relative; z-index: 2; float: none; width: initial; padding-left: 3%; padding-right: 3%; padding-top: 40px; padding-bottom: 40px; } .success_case { padding: 40px 0; } .success_case_lists .item .left_pic { float: none; width: initial; height: 250px; background-repeat: no-repeat; background-size: cover; background-position: center center; border-radius: 20px; } .success_case_lists .item .right_font { float: none; width: initial; text-align: left; padding-top: 30px; } .success_case_lists .item .right_font .titile { margin-bottom:20px; color: #00696c; font-weight: bold; font-size: 26px; } .success_case_lists .item .right_font{ padding-bottom: 40px;} .success_case_lists .slick-dots { width: 100%; left: 0; bottom:0px; } }