.service-top-banner{background: #394fa2 url(../img/service/service-banner.jpg) no-repeat center center / cover; min-height: 600px; color: #fff; padding: 30px 0 80px; overflow: hidden;} .service-top-banner .breadcrumb{background: none; color: #fff; margin-bottom: 30px;} .service-top-banner .breadcrumb a{color: #fff;} .service-top-banner .breadcrumb span{margin: 0 5px;} .service-top-banner .breadcrumb a:hover{color: #ef4646;} .service-top-text{padding: 30px 0 50px; text-align: center;} .service-top-til-img{ margin-bottom: 10px; padding: 0 20%;} .service-top-til-img img{ margin: 0 auto;} .service-top-til{ font-size: 34px;line-height: 48px; font-weight: bold; margin-bottom: 15px; display: flex; flex-wrap: wrap; justify-content: center ; font-family: Arial, Helvetica, sans-serif; color: #ff4b2b; background-image:-webkit-linear-gradient(top,#ff4b2b,#ff416c); -webkit-background-clip:text; -webkit-text-fill-color:transparent;} .service-top-til span{ margin: 0 7px;} .service-top-label ul{ display: flex; flex-wrap: wrap; justify-content: space-around; font-size: 26px; line-height: 46px; margin-bottom: 30px; color: #fff;} .service-top-label li{ padding: 5px; text-align: center; margin-bottom: 28px;} .service-top-label li div{display:block;width:147px;height:147px;border-radius:50%; overflow: hidden; position: relative;} .service-top-label li div::before{display:block; content: ""; position: absolute; width: 100%; height: 100%; border: 1px solid #fff; border-radius: 50%;} .service-top-label li div::after{display:block; content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; transition:all .4s; background: #f45c43; background: -moz-linear-gradient(left, #f45c43 0%, #eb3349 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f45c43), color-stop(100%,#eb3349)); background: -webkit-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: -o-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: -ms-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: linear-gradient(to right, #f45c43 0%,#eb3349 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f45c43', endColorstr='#eb3349',GradientType=1 );} .service-top-label li a{ position: relative; z-index: 1; display:block;padding-top:20px; height: 100%; color:#fff;} .service-top-label li i{font-size:36px;cursor:default} .service-top-label li p{margin:0 auto;width:4em;font-size:18px;line-height:28px} @media(max-width: 999px){ .service-top-label li p{font-size:16px;line-height:20px} .service-top-til-img{ padding: 0 10%;} } @media(min-width:760px){ .service-top-label li i{font-size:44px} .service-top-label li div{width:130px;height:130px} } @media(min-width:1000px){ .service-top-label li i{font-size:60px} .service-top-label li div{width:180px;height:180px} .service-top-label li a{padding-top:25px;} } @media(min-width:1200px){ .service-top-label li div{width:210px;height:210px} .service-top-label li a{padding-top:50px;} .service-top-label li p{padding-top:1px;} } .service-top-label li div:hover::after{ opacity: 1;} .service-top-banner .service-defa-btn { display: flex; justify-content: center ;} .service-top-banner .service-defa-btn a{ margin: 0 15px;} .service-defa-btn a{display: block; width: 150px; height: 46px; font-size: 16px; line-height: 46px; color: #fff; border-radius: 23px; text-align: center; background: #f45c43; background: -moz-linear-gradient(left, #f45c43 0%, #eb3349 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f45c43), color-stop(100%,#eb3349)); background: -webkit-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: -o-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: -ms-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: linear-gradient(to right, #f45c43 0%,#eb3349 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f45c43', endColorstr='#eb3349',GradientType=1 );} .service-defa-btn:hover{color: #fff;} .hover-slide{ position: relative; overflow: hidden;} .hover-slide::before{ position: absolute; content: " "; top: 0; right: 100%; width: 300%; height: 100%; border-radius: 23px ; background: rgba(255,255,255,.3); transition: all .5s;} .hover-slide:hover::before{ right: -300%;} .service-defa-btn a.service-defa-btntr{ position: relative; display: inline-block; background: none; border: 1px solid #fff; border-radius: 23px;} .service-defa-btn a.service-defa-btntr span{ position: relative; } .service-defa-btn a.service-defa-btntr::before{ position: absolute; content: " "; display: block; top: -1px; left: -1px; right: -1px; bottom: -1px; opacity: 0; border-radius: 23px; transition: all .3s; background: #f45c43; background: -moz-linear-gradient(left, #f45c43 0%, #eb3349 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f45c43), color-stop(100%,#eb3349)); background: -webkit-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: -o-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: -ms-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: linear-gradient(to right, #f45c43 0%,#eb3349 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f45c43', endColorstr='#eb3349',GradientType=1 );} .service-defa-btn a.service-defa-btntr:hover::before{ opacity: 1;} .service-index-text a{display: block; width: 150px; height: 46px; font-size: 16px; line-height: 46px; margin: 20px auto; color: #fff; border-radius: 23px; text-align: center; background: #f45c43; background: -moz-linear-gradient(left, #f45c43 0%, #eb3349 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f45c43), color-stop(100%,#eb3349)); background: -webkit-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: -o-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: -ms-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: linear-gradient(to right, #f45c43 0%,#eb3349 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f45c43', endColorstr='#eb3349',GradientType=1 );} .service-container{background: #fff;} .service-head{ padding: 70px 0 30px; text-align: center;} .service-til{font-size: 32px; line-height: 56px; color: #333333; margin-bottom: 10px;} .service-desc{ font-size: 22px; line-height: 38px; color: #333333; margin-bottom: 5px;} .service-text{ font-size: 16px; line-height: 30px; color: #555555;} .service-credit{ background: #fff; padding: 50px 0;} .service-credit-til{ font-size: 38px; font-weight: bold; line-height: 56px; margin-bottom: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .service-credit-tex{ font-size: 16px; line-height: 32px; color: #555555; margin-bottom: 10px; max-height: 64px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;} .service-credit-label{ padding: 20px 0 20px;} .service-credit-label li{ padding-top: 20px; color: #555; margin-bottom: 30px;} .service-credit-label-til { line-height: 50px;} .service-credit-label-til b{ font-size: 100px; font-style: italic; padding-right: 5px; font-family: Arial, Helvetica, sans-serif; background-image:-webkit-linear-gradient(right,#eb3349,#f45c43); -webkit-background-clip:text; -webkit-text-fill-color:transparent;} .service-credit-label-til span{ font-size: 24px;} .service-credit-label-tex{ font-size: 24px} @media(min-width: 1000px) and (max-width:1199px){ .service-credit-tex{ margin-bottom: 20px;} .service-credit{ padding: 80px 0 60px;} } @media(min-width: 1200px){ .service-credit-tex{ margin-bottom: 40px;} .service-credit{ padding: 100px 0 80px;} } .service-info{ color: #333; background: #fff; overflow: hidden;} .service-info-main{ position: relative;} .service-info-bg{ background: #394fa2 no-repeat center center / cover; position: absolute; top: 0; width: 50%; height: 100%;} .service-info-bg1{ background-image: url(../img/service/service-info-bg1.jpg); left: 0;} .service-info-bg2{ background-image: url(../img/service/service-info-bg2.jpg); right: 0;} .service-info-bg3{ background-image: url(../img/service/service-info-bg3.jpg); right: 0;} .service-info-bg4{ background-image: url(../img/service/service-info-bg4.jpg); left: 0;} .service-info-repair{ background: #394fa2 url(../img/service/service-info-bg5.jpg) no-repeat center center / cover; padding: 90px 0;} .service-info-main2 .service-info-list{ flex-direction: row-reverse; } .service-info-list { display: flex; flex-wrap: wrap;} .service-info-main li{ padding: 70px 0;} .service-info-repair .service-info-list ul{ display: flex; flex-wrap: wrap; justify-content: space-between;} .service-info-repair li{ margin-bottom: 30px;} .service-info-list-white{ color: #fff;} .service-info-list hr{ background: #333; color: #333; margin: 20px 0;} .service-info-list-white hr{ background: #fff; color: #fff;} .service-info-list-main{ border: 1px solid #fff; padding: 50px;} .service-info-list-til{ font-size: 28px; line-height: 42px; font-weight: bold; margin-bottom: 10px;} .service-info-list-tex{ font-size: 16px; line-height: 32px; margin-bottom: 10px; min-height: 128px;} .service-info-list-main .service-info-list-tex{ min-height: auto;} .service-info-list-btn { min-height: 50px;} .service-info-list-btn a{display: block; width: 150px; height: 40px; font-size: 16px; line-height: 40px; overflow: hidden; margin: 10px 0; transition: all .3s; color: #fff; border-radius: 23px; text-align: center; background: #f45c43; background: -moz-linear-gradient(left, #f45c43 0%, #eb3349 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f45c43), color-stop(100%,#eb3349)); background: -webkit-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: -o-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: -ms-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: linear-gradient(to right, #f45c43 0%,#eb3349 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f45c43', endColorstr='#eb3349',GradientType=1 );} .service-info-list-btn:hover a{ width: 150px; height: 40px;} @media(max-width: 759px){ .service-info-list-tex{ min-height: auto;} } @media(min-width: 1000px) and (max-width:1199px){ .service-info-list-main1{ padding: 50px;} .service-info-list-btn a{ margin-top: 10px; width: 30px; height: 5px;} .service-info-list-main .service-info-list-tex{ min-height: 96px;} } @media(min-width: 1200px){ .service-info-list-main1{ width: 350px;} .service-info-list-main2{ margin-left: 120px;} .service-info-list-btn a{ margin-top: 20px; width: 40px; height: 10px;} } .service-quality{ background: #fff url(../img/service/service-quality.jpg) repeat-x center bottom; padding: 50px 0 100px; overflow: hidden;} .special-quality-main{max-width: 470px; margin: 0 auto; text-align: center; } .service-quality-desc{ margin-bottom: 60px; padding-left: 10px; padding-right: 10px; position: relative; z-index: 1;} .service-quality-til{ font-size: 34px; line-height: 32px; font-weight: bold; color: #333; margin-bottom: 30px;} .service-quality-tex{ font-size: 18px; line-height: 36px; color: #555;} .service-quality-btn{ display: block; width: 120px; font-size: 16px; font-weight: bold; line-height: 42px; margin: 0 auto; border-radius: 25px; text-align: center; color: #ff464c; background: #fff;} .special-quality-btn .service-defa-btn{ display: flex; justify-content: space-between;} @media(min-width: 1000px){ .service-quality-desc{ padding-top: 180px;} .special-quality-main .service-defa-btn a{ width: 200px;} } @media(min-width: 580px) and (max-width:999px){ .service-quality{ position: relative; min-height: 600px; padding: 50px 0 100px; background-position-y: -90px;} .service-quality-desc{ padding-top: 50px;} .service-quality::before,.service-quality::after{ position: absolute; content: " "; display: block; background: #fff no-repeat center bottom; bottom: 0px; width: 100%; height: 100%;} .service-quality::before{ background: #fff url(../img/service/service-quality-bg1.jpg) no-repeat right -90px; right: 50%; margin-right: 270px;} .service-quality::after{ background: #fff url(../img/service/service-quality-bg2.jpg) no-repeat left -90px; left: 50%; margin-left: 270px;} } @media(min-width: 1000px) and (max-width:1920px){ .service-quality{ background: #fff url(../img/service/service-quality-bg.jpg) no-repeat center bottom; min-height: 800px; padding: 50px 0 100px;} } @media(min-width: 1921px){ .service-quality{ position: relative; min-height: 800px; padding: 50px 0 100px;} .service-quality::before,.service-quality::after{ position: absolute; content: " "; display: block; background: #fff no-repeat center bottom; bottom: 0px; width: 700px; height: 100%;} .service-quality::before{ background: #fff url(../img/service/service-quality-bg1.jpg) no-repeat left bottom; left: 0%;} .service-quality::after{ background: #fff url(../img/service/service-quality-bg2.jpg) no-repeat right bottom; right: 0%;} } @media (max-width: 999px) { .service-top-banner{ min-height: 200px;} .service-top-banner .breadcrumb{ margin-bottom: 15px;} .solution-til{ font-size: 32px;} .weekly-info-main dd{ position: relative; width: 100%;} } @media (max-width: 559px) { .line-big .xsm1, .line-big .xsm10, .line-big .xsm11, .line-big .xsm12, .line-big .xsm2, .line-big .xsm3, .line-big .xsm4, .line-big .xsm5, .line-big .xsm6, .line-big .xsm7, .line-big .xsm8, .line-big .xsm9 { min-height: 1px; padding-right: 15px; padding-left: 15px; } .show-sm { display: block; } .xsm1, .xsm10, .xsm11, .xsm12, .xsm2, .xsm3, .xsm4, .xsm5, .xsm6, .xsm7, .xsm8, .xsm9 { float: left; } .xsm12 { width: 100%; } .xsm11 { width: 91.66666667%; } .xsm10 { width: 83.33333333%; } .xsm9 { width: 75%; } .xsm8 { width: 66.66666667%; } .xsm7 { width: 58.33333333%; } .xsm6 { width: 50%; } .xsm5 { width: 41.66666667%; } .xsm4 { width: 33.33333333%; } .xsm3 { width: 25%; } .xsm2 { width: 16.66666667%; } .xsm1 { width: 8.33333333%; } .service-info-bg{ display: none;} .service-info-list-bg1{ background: #394fa2 url(../img/service/service-info-bg1.jpg) no-repeat center center / cover;} .service-info-list-bg2{ background: #394fa2 url(../img/service/service-info-bg2.jpg) no-repeat center center / cover;} .service-info-list-bg3{ background: #394fa2 url(../img/service/service-info-bg3.jpg) no-repeat center center / cover;} .service-info-list-bg4{ background: #394fa2 url(../img/service/service-info-bg4.jpg) no-repeat center center / cover;} } @media (max-width: 400px) { .line-big .xmm1, .line-big .xmm10, .line-big .xmm11, .line-big .xmm12, .line-big .xmm2, .line-big .xmm3, .line-big .xmm4, .line-big .xmm5, .line-big .xmm6, .line-big .xmm7, .line-big .xmm8, .line-big .xmm9 { min-height: 1px; padding-right: 15px; padding-left: 15px; } .show-sm { display: block; } .xmm1, .xmm10, .xmm11, .xmm12, .xmm2, .xmm3, .xmm4, .xmm5, .xmm6, .xmm7, .xmm8, .xmm9 { float: left; } .xmm12 { width: 100%; } .xmm11 { width: 91.66666667%; } .xmm10 { width: 83.33333333%; } .xmm9 { width: 75%; } .xmm8 { width: 66.66666667%; } .xmm7 { width: 58.33333333%; } .xmm6 { width: 50%; } .xmm5 { width: 41.66666667%; } .xmm4 { width: 33.33333333%; } .xmm3 { width: 25%; } .xmm2 { width: 16.66666667%; } .xmm1 { width: 8.33333333%; } } @media(min-width: 560px) and (max-width:660px){ } @media(min-width: 560px) and (max-width:759px) { .special-report-desc{ padding: 10px;} .special-report-til{ margin-bottom: 2px;} .special-report-tex{ line-height: 24px;} .group-news-hotlist-main a{ display: flex;} .group-news-hotlist-img{ flex-grow: 0; flex-shrink: 0; width: 45%;} .group-news-hotlist-desc{ width: 55%; padding: 0 25px; display: flex; flex-direction: column; justify-content: center; } } @media (max-width:759px) { .group-news-hotlist{ padding-top: 50px;} .special-report-desc{ position: relative; height: auto; opacity: 1; padding: 25px;} } @media(min-width: 760px) and (max-width:999px) { .special-report-desc{ padding: 15px;} } @media (max-width:599px){} @media(min-width: 600px) and (max-width:700px){} @media(min-width: 650px) and (max-width:700px){} @media(min-width: 760px){ .news-top-text{padding: 30px 0 150px;} .group-news-hotlist-img{ position: relative;} .group-news-hotlist-img img{ position: absolute; bottom: 0; width: 100%; box-shadow: 0px 0px 5px rgba(0,0,0,0.5);} } @media(min-width: 1000px) and (max-width:1199px){ .special-report-desc{ padding: 20px;} .weekly-info-til{ margin-bottom: 5px;} .weekly-info-tex a{ line-height: 32px;} .weekly-info-btn a{ margin-top: 10px; width: 30px; height: 5px;} } @media(min-width: 1200px){ .weekly-info-til{ margin-bottom: 15px;} .weekly-info-tex a{ line-height: 36px;} .weekly-info-btn a{ margin-top: 20px; width: 30px; height: 5px;} }