.solution-top-banner{background: #394fa2 url(../img/solution/solution-banner.jpg) no-repeat center center / cover; min-height: 600px; color: #fff; padding: 30px 0; overflow: hidden;} .solution-top-banner .breadcrumb{background: none; color: #fff; margin-bottom: 30px;} .solution-top-banner .breadcrumb a{color: #fff;} .solution-top-banner .breadcrumb span{margin: 0 5px;} .solution-top-banner .breadcrumb a:hover{color: #ef4646;} .solution-top-text{padding: 50px 0 40px;} .solution-top-label-til{ margin-bottom: 10px;} .solution-top-label{ font-size: 34px;line-height: 48px; font-weight: bold; margin-bottom: 15px; 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;} .solution-top-text-desc{ font-size: 26px; line-height: 46px; margin-bottom: 30px; color: #fff;} .solution-top-text-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 );} .area-defa-btn{display: inline-block; width: 150px; height: 46px; font-size: 16px; line-height: 46px; color: #fff; margin: 0 auto; 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 );} .solution-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%;} .solution-container{background: #fff;} .solution-head{ padding: 70px 0 30px; text-align: center;} .solution-til{font-size: 32px; line-height: 56px; color: #333333; margin-bottom: 10px;} .solution-text{ font-size: 16px; line-height: 30px; color: #333333;} .emphasis-application{ padding-bottom: 30px;} .emphasis-application-list{ position: relative; margin-bottom: 30px;} .emphasis-application-list-bg{ position: relative;} .emphasis-application-list-bg img{ width: 100%;} .emphasis-application-list-desc{position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 30px; color: #fff;} .emphasis-application-list-til{ padding-bottom: 10px; padding-left: 10px; font-size: 24px; line-height: 48px;} .emphasis-application-list-btn { display: flex; flex-wrap: wrap; } .emphasis-application-list-btn a{ position: relative; display: inline-block; width: 45%; height: 40px; font-size: 16px; line-height: 38px; text-align: center; color: #fff; margin: 0 0 20px 10px; border: 1px solid #fff; border-radius: 23px;} .emphasis-application-list-btn a span{ position: relative; } .emphasis-application-list-btn a::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 );} .emphasis-application-list-btn a:hover::before{ opacity: 1;} .epc-project{ margin-top: 50px; padding-bottom: 100px; color: #333; background: #f4f4f4;} .epc-project-sign{ padding-top: 30px; padding-bottom: 40px;} .epc-project-sign p {display: inline-block; margin: 0 0px 10px; font-size: 18px; line-height: 42px;}.epc-project-sign p i{display: block; width: 80px; height: 70px; margin: 0 auto; background: url(../img/solution/epc-project-ico.png) no-repeat;} .epc-project-sign p i.ico01{background-position: 0px 0;} .epc-project-sign p i.ico02{background-position: -80px 0;} .epc-project-sign p i.ico03{background-position: -160px 0;} .epc-project-sign p i.ico04{background-position: -240px 0;} .epc-project-sign p i.ico05{background-position: -320px 0;} .epc-project-sign p i.ico06{background-position: -400px 0;} .epc-project-sign p i.ico07{background-position: -480px 0;} .epc-project-sign p i.ico08{background-position: -560px 0;} .epc-project-text{ padding-left: 50px;} .epc-project-text p{ padding: 10px 20px; font-size: 18px; display: inline-block; vertical-align: top;} .epc-project-text a{display: inline-block; width: 150px; height: 46px; font-size: 16px; line-height: 46px; margin: 0 10px; 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 );} .customer-site{ background: #fff url(../img/solution/solution-bg01.jpg) no-repeat center center / cover; min-height: 600px; color: #fff; padding: 50px 0 100px;} .customer-site .solution-head{ padding: 20px 0 30px} .customer-site .solution-til,.customer-site .solution-text{ color: #fff;} .customer-site-list{ display: flex; flex-wrap: wrap;} .customer-site-list li{ margin-bottom: 30px;} .customer-site-list a{ display: flex; flex-wrap: wrap; height: 100%; background: #fff; overflow: hidden; position: relative;} .customer-site-img{ padding: 0; overflow: hidden;} .customer-site-img img{ transition: all .3s;} .customer-site-desc{ padding: 25px;} .customer-site-til{ font-size: 18px; line-height: 32px; font-weight: bold; color: #333333; margin-bottom: 10px;} .customer-site-tex{ font-size: 16px; line-height: 28px; color: #555555; margin-bottom: 10px;} .customer-site-btn{ position: absolute; left: 0; bottom: -42px; display: block; transition: all .3s; width: 100%; font-size: 16px; line-height: 46px; text-align: center; color: #fff; 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 );} .customer-site-list a:hover .customer-site-img img{ margin: -21px 0;} .customer-site-list a:hover .customer-site-btn{ bottom: 0;} .customer-site-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 );} .scheme-config{ padding: 10px 0 70px;} .scheme-config-list li{ margin-bottom: 30px;} .scheme-config-main{ position: relative;} .scheme-config-main:hover .scheme-config-btn a{ width: 150px; height: 40px;} .scheme-config-main dd{ position: absolute; right: 0; top: 0; width: 52%; height: 100%; padding: 25px; background: rgba(40, 55, 70, 0.8); color: #fff;} .scheme-config-til{ font-size: 24px; line-height: 38px; font-weight: bold; margin-bottom: 5px;} .scheme-config-tex a{ display: block; font-size: 16px; line-height: 34px; color: #fff; transition: all .3s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .scheme-config-tex a:hover{ color: #ff6768;} .scheme-config-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 );} .materials-machining{ background-color: #eee; background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 5px 0px 50px; color: #333;} .materials-machining-list ul{ display: flex; flex-wrap: wrap; margin-bottom: 30px;} .materials-machining-list li{ margin-bottom: 30px;} .materials-machining-main{ display: block; position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;} .materials-machining-text{ position: absolute; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; margin-top: -50px;; color: #fff; background: rgba(0, 0, 0, 0.5);} .materials-machining-text::before{ position: absolute; content: " "; display: block; width: 100%; height: 50px; opacity: 0; 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 );} .materials-machining-text span{ position: relative; display: block; width: 100%; height: 50px; font-size: 16px; line-height: 50px} .materials-machining-main:hover .materials-machining-text::before{ opacity: 1;} .materials-machining-main-btn{ display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: center; font-size: 18px; color: #fff; 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 );} .materials-machining-main-btn i{ font-size: 32px;} .materials-machining-main-btn p{ margin-top: 5px;} .materials-machining-list-text{ font-size: 18px; line-height: 48px; margin-bottom: 20px;} .solution-ind-cont-input{ margin-bottom: 30px;} .solution-ind-cont-input input{ font-size: 18px; line-height: 36px; height: 46px; border-color: #555555; color: #555555; background: none; padding: 5px 15px;} .solution-ind-cont-input input:focus{ border-color: #ed2936;} .solution-ind-cont-btn{ text-align: center;} .solution-ind-cont-btn span{ background: #fff; border-radius: 25px; overflow: hidden; display: flex;} .solution-ind-cont-btn a{display: inline-block; width: 50%; height: 46px; font-size: 16px; line-height: 46px; overflow: hidden;} .solution-ind-cont-btn .solution-ind-cont-submit{ width: 60%; border-radius: 25px; color: #fff; 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 );} @media (max-width: 999px) { .solution-top-banner{ min-height: 200px;} .solution-top-banner .breadcrumb{ margin-bottom: 15px;} .solution-til{ font-size: 32px;} .epc-project{ margin-top: 0; } .scheme-config-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%; } .emphasis-application-list-til{ font-size: 24px;} .emphasis-application-list-btn{ text-align: center;} } @media(min-width: 560px) and (max-width:660px){ .emphasis-application-list-til{ padding: 0 20px 0; margin-bottom: 5px;} .emphasis-application-list-btn a{width: 40%; margin-bottom: 10px;} .emphasis-application-list-desc{ padding: 10px 20px;} .emphasis-application-list-text{ display: none;} .emphasis-application-list .emphasis-application-list-btn{ display: block;} } @media(min-width: 560px) and (max-width:759px) { .emphasis-application-list-til{ padding: 0 20px 0; margin-bottom: 5px;} .emphasis-application-list-btn a{width: 40%; margin-bottom: 10px;} .emphasis-application-list-desc{ padding: 10px 20px;} .epc-project-text { text-align: center;} .epc-project-text p{ padding: 5px;} .customer-site-list a{ flex-wrap: nowrap;} .customer-site-img{ width: 45%; flex-shrink:0;} .customer-site-desc{ padding: 5px 5px 0 15px;} .customer-site-til{ margin-bottom: 2px;} .customer-site-tex{ line-height: 24px;} } @media(min-width: 760px) and (max-width:999px) { .epc-project-text { text-align: center;} .epc-project-text p{ padding: 5px;} .customer-site-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: 1000px) and (max-width:1199px){ .emphasis-application-list-til{ line-height: 32px;} .epc-project-text { text-align: center;} .epc-project-text p{ padding: 10px;} .customer-site-desc{ padding: 21px;} .scheme-config-til{ margin-bottom: 5px;} .scheme-config-tex a{ line-height: 32px;} .scheme-config-btn a{ margin-top: 10px; width: 30px; height: 5px;} } @media(min-width: 1200px){ .scheme-config-til{ margin-bottom: 15px;} .scheme-config-tex a{ line-height: 36px;} .scheme-config-btn a{ margin-top: 20px; width: 30px; height: 5px;} }