.area-top-banner{background: #394fa2 url(../img/areanew/area-top-banner.jpg) no-repeat center center / cover; min-height: 600px; color: #fff; padding: 30px 0; overflow: hidden;} .area-top-banner .breadcrumb{background: none; color: #fff; margin-bottom: 30px;} .area-top-banner .breadcrumb a{color: #fff;} .area-top-banner .breadcrumb span{margin: 0 5px;} .area-top-banner .breadcrumb a:hover{color: #ef4646;} .area-top-label{padding: 50px 0 40px;} .area-top-label .area-label-til{ font-size: 72px;line-height: 72px; font-weight: bold; margin-bottom: 15px; font-family: Arial, Helvetica, sans-serif; color: #2d95ff; background-image:-webkit-linear-gradient(top,#41ffef,#2d95ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent;} .area-top-banner2 .area-top-label .area-label-til{ color: #ee434a; background-image:-webkit-linear-gradient(top,#db846c,#ee434a);} .area-top-banner3 .area-top-label .area-label-til{ color: #23fdc8; background-image:-webkit-linear-gradient(top,#4bf9ab,#08fedf);} .area-top-banner4 .area-top-label .area-label-til{ color: #59e3e2; background-image:-webkit-linear-gradient(top,#5ff8c1,#55d6f5);} .area-top-label .area-label-tex{font-size: 38px; line-height: 46px;} .area-top-label .area-label-tex span{ font-weight: bold; color: #ff705c;} .area-top-materials{ text-align: center; margin-bottom: 30px;} .area-top-materials p{ position: relative; font-size: 32px; font-weight: bold; line-height: 44px; padding: 10px 0; color: #0e003c; background: #93acff; display: inline-block;} .area-top-materials p span{ margin-left: 15px; vertical-align: top;} .area-top-materials p span:first-child{ margin-left: 0px;} .area-top-materials p::before,.area-top-materials p::after{ content: " "; position: absolute; top: 0; height: 100%; width: 150px;} .area-top-materials p::before{right: 100%; background: rgba(147,172,255,1); background: -moz-linear-gradient(left, rgba(147,172,255,0) 0%, rgba(147,172,255,1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(147,172,255,0)), color-stop(100%,rgba(147,172,255,1))); background: -webkit-linear-gradient(left, rgba(147,172,255,0) 0%,rgba(147,172,255,1) 100%); background: -o-linear-gradient(left, rgba(147,172,255,0) 0%,rgba(147,172,255,1) 100%); background: -ms-linear-gradient(left, rgba(147,172,255,0) 0%,rgba(147,172,255,1) 100%); background: linear-gradient(to right, rgba(147,172,255,0) 0%,rgba(147,172,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(147,172,255,0)', endColorstr='rgba(147,172,255,1)',GradientType=1 );} .area-top-materials p::after{ left: 100%; background: rgba(147,172,255,1); background: -moz-linear-gradient(left, rgba(147,172,255,1) 0%, rgba(147,172,255,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(147,172,255,1)), color-stop(100%,rgba(147,172,255,0))); background: -webkit-linear-gradient(left, rgba(147,172,255,1) 0%,rgba(147,172,255,0) 100%); background: -o-linear-gradient(left, rgba(147,172,255,1) 0%,rgba(147,172,255,0) 100%); background: -ms-linear-gradient(left, rgba(147,172,255,1) 0%,rgba(147,172,255,0) 100%); background: linear-gradient(to right, rgba(147,172,255,1) 0%,rgba(147,172,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(147,172,255,1)', endColorstr='rgba(147,172,255,0)',GradientType=1 );} .area-top-banner2 .area-top-materials p{ background: #ff6161;} .area-top-banner2 .area-top-materials p::before{ background: rgba(255,97,97,1); background: -moz-linear-gradient(left, rgba(255,97,97,0) 0%, rgba(255,97,97,1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,97,97,0)), color-stop(100%,rgba(255,97,97,1))); background: -webkit-linear-gradient(left, rgba(255,97,97,0) 0%,rgba(255,97,97,1) 100%); background: -o-linear-gradient(left, rgba(255,97,97,0) 0%,rgba(255,97,97,1) 100%); background: -ms-linear-gradient(left, rgba(255,97,97,0) 0%,rgba(255,97,97,1) 100%); background: linear-gradient(to right, rgba(255,97,97,0) 0%,rgba(255,97,97,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,97,97,0)', endColorstr='rgba(255,97,97,1)',GradientType=1 );} .area-top-banner2 .area-top-materials p::after{ background: rgba(255,97,97,1); background: -moz-linear-gradient(left, rgba(255,97,97,1) 0%, rgba(255,97,97,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,97,97,1)), color-stop(100%,rgba(255,97,97,0))); background: -webkit-linear-gradient(left, rgba(255,97,97,1) 0%,rgba(255,97,97,0) 100%); background: -o-linear-gradient(left, rgba(255,97,97,1) 0%,rgba(255,97,97,0) 100%); background: -ms-linear-gradient(left, rgba(255,97,97,1) 0%,rgba(255,97,97,0) 100%); background: linear-gradient(to right, rgba(255,97,97,1) 0%,rgba(255,97,97,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,97,97,1)', endColorstr='rgba(255,97,97,0)',GradientType=1 );} .area-top-banner3 .area-top-materials p{ background: #07fef4;} .area-top-banner3 .area-top-materials p::before{ background: rgba(7,254,244,1); background: -moz-linear-gradient(left, rgba(7,254,244,0) 0%, rgba(7,254,244,1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(7,254,244,0)), color-stop(100%,rgba(7,254,244,1))); background: -webkit-linear-gradient(left, rgba(7,254,244,0) 0%,rgba(7,254,244,1) 100%); background: -o-linear-gradient(left, rgba(7,254,244,0) 0%,rgba(7,254,244,1) 100%); background: -ms-linear-gradient(left, rgba(7,254,244,0) 0%,rgba(7,254,244,1) 100%); background: linear-gradient(to right, rgba(7,254,244,0) 0%,rgba(7,254,244,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(7,254,244,0)', endColorstr='rgba(7,254,244,1)',GradientType=1 );} .area-top-banner3 .area-top-materials p::after{ background: rgba(7,254,244,1); background: -moz-linear-gradient(left, rgba(7,254,244,1) 0%, rgba(7,254,244,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(7,254,244,1)), color-stop(100%,rgba(7,254,244,0))); background: -webkit-linear-gradient(left, rgba(7,254,244,1) 0%,rgba(7,254,244,0) 100%); background: -o-linear-gradient(left, rgba(7,254,244,1) 0%,rgba(7,254,244,0) 100%); background: -ms-linear-gradient(left, rgba(7,254,244,1) 0%,rgba(7,254,244,0) 100%); background: linear-gradient(to right, rgba(7,254,244,1) 0%,rgba(7,254,244,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(7,254,244,1)', endColorstr='rgba(7,254,244,0)',GradientType=1 );} .area-top-banner4 .area-top-materials p{ background: #61ffb6;} .area-top-banner4 .area-top-materials p::before{ background: rgba(97,255,182,1); background: -moz-linear-gradient(left, rgba(97,255,182,0) 0%, rgba(97,255,182,1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(97,255,182,0)), color-stop(100%,rgba(97,255,182,1))); background: -webkit-linear-gradient(left, rgba(97,255,182,0) 0%,rgba(97,255,182,1) 100%); background: -o-linear-gradient(left, rgba(97,255,182,0) 0%,rgba(97,255,182,1) 100%); background: -ms-linear-gradient(left, rgba(97,255,182,0) 0%,rgba(97,255,182,1) 100%); background: linear-gradient(to right, rgba(97,255,182,0) 0%,rgba(97,255,182,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(97,255,182,0)', endColorstr='rgba(97,255,182,1)',GradientType=1 );} .area-top-banner4 .area-top-materials p::after{ background: rgba(97,255,182,1); background: -moz-linear-gradient(left, rgba(97,255,182,1) 0%, rgba(97,255,182,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(97,255,182,1)), color-stop(100%,rgba(97,255,182,0))); background: -webkit-linear-gradient(left, rgba(97,255,182,1) 0%,rgba(97,255,182,0) 100%); background: -o-linear-gradient(left, rgba(97,255,182,1) 0%,rgba(97,255,182,0) 100%); background: -ms-linear-gradient(left, rgba(97,255,182,1) 0%,rgba(97,255,182,0) 100%); background: linear-gradient(to right, rgba(97,255,182,1) 0%,rgba(97,255,182,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(97,255,182,1)', endColorstr='rgba(97,255,182,0)',GradientType=1 );} .area-top-materials p span:first-child{ margin-left: 0px;} .area-top-text-desc{ font-size: 30px; line-height: 46px; margin-bottom: 30px; color: #fff;} .area-top-text-btn a{display: block; width: 150px; height: 46px; font-size: 16px; line-height: 46px; color: #fff; margin: 0 auto; border-radius: 23px; 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; 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:hover{color: #fff;} .area-defa-img{ position: relative; vertical-align: top; cursor: pointer;} .area-defa-img span{ position: absolute; bottom: 100%; left: 0; right: 0; width: 150px; height: 0; overflow: hidden; transition: all .5s;} .area-defa-img span img{ margin: 0 auto;} .area-defa-img:hover span{ height:106px ;} .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%;} .area-container{background: #fff;} .area-program{ padding-bottom: 30px;} .area-head{ padding: 70px 0 30px; text-align: center;} .area-til{font-size: 40px; line-height: 56px; color: #333333; margin-bottom: 30px;} .area-text{ font-size: 16px; line-height: 30px; color: #333333;} .area-program-list{ position: relative; margin-bottom: 30px;} .area-program-list-bg{ position: relative;} .area-program-list-bg img{ width: 100%;} .area-program-list-bg::after{ position: absolute; content: " "; width: 100%; height: 100%; top: 0; left: 0; background: #000652 ; opacity: 0.5; transition: all .5s;} .area-program-list-desc{position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: #fff;} .area-program-list-til{ padding-top: 40px; font-size: 28px; font-weight: bold; line-height: 48px;} .area-program-list-text{ padding: 10px; font-size: 16px; line-height: 32px; margin-bottom: 10px;} .area-program-list-btn a{display: inline-block; width: 150px; height: 46px; font-size: 16px; line-height: 46px; color: #fff; margin: 0 auto; border-radius: 23px; 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-program-list .area-program-list-btn{ display: none;} .area-program-list:hover .area-program-list-btn{ display: block;} .area-program-list:hover .area-program-list-bg::after{ opacity: 0.5;} .area-program-material li{ display: inline-block; margin: 10px;} .area-program-material li a{ position: relative; display: block; background: #eeeeee; border-radius: 15px; overflow: hidden;} .area-program-material li a span{ position: relative; display: inline-block; vertical-align: top; padding: 0 15px; line-height: 36px; transition: all .3s; color: #000;} .area-program-material li a::before{ position: absolute; content: " "; display: block; width: 100%; height: 100%; 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 );} .area-program-material li a:hover span{ color: #fff;} .area-program-material li a:hover::before{ opacity: 1;} .area-approve{ margin-top: 50px; margin-bottom: 50px; height: 321px; background: #5860d0; background: -moz-linear-gradient(top, #5860d0 0%, #3e3687 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5860d0), color-stop(100%,#3e3687)); background: -webkit-linear-gradient(top, #5860d0 0%,#3e3687 100%); background: -o-linear-gradient(top, #5860d0 0%,#3e3687 100%); background: -ms-linear-gradient(top, #5860d0 0%,#3e3687 100%); background: linear-gradient(to bottom, #5860d0 0%,#3e3687 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5860d0', endColorstr='#3e3687',GradientType=0 );} .area-approve-lf{ width: 55%; float: left; height: 321px; position: relative; background: url(../img/areanew/area-approvebg.png) no-repeat right bottom / cover;} .area-approve-lf .area-approve-lf-img{ position: absolute; padding-right: 60px; right: 0; bottom: 0; max-width: 100%;} .area-approve-lf .area-approve-lf-img img{ max-width: 100%;} .area-approve-rt{ width: 45%; float: left; padding-top: 50px; color: #fff;} .area-approve-rt-main{ margin-left: -50px;} .area-approve-til h3{ font-size: 40px; font-weight: bold; float: left; line-height: 46px; margin-right: 60px;} .area-approve-btn{display: inline-block; width: 150px; height: 46px; text-align: center; font-size: 16px; line-height: 46px; color: #fff; margin: 0 auto; border-radius: 23px; 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-approve-sign{ padding-top: 30px; padding-left: 40px;} .area-approve-sign p {display: inline-block; margin: 0 5px 10px; font-size: 12px;} .area-approve-sign p i{display: block; width: 50px; height: 50px; margin: 0 auto; background: url(../img/areanew/area-strength.png) no-repeat;} .area-approve-sign p i.ico01{width: 62px; background-position: 0px 0;} .area-approve-sign p i.ico02{width: 55px; background-position: -65px 0;} .area-approve-sign p i.ico03{width: 50px; background-position: -128px 0;} .area-approve-sign p i.ico04{width: 50px; background-position: -182px 0;} .area-approve-sign p i.ico05{width: 46px; background-position: -237px 0;} .area-approve-sign p i.ico06{width: 42px; background-position: -288px 0;} .area-approve-text{ padding-left: 50px;} .area-approve-text p{ padding: 10px 20px; font-size: 18px; display: inline-block; vertical-align: top;} .area-prot{ padding-bottom: 50px;} .area-prot-hot .line-big>div{ margin-bottom: 30px;} .area-prot-hot>div:nth-child(2n) .area-prot-main{ float: right;} .area-prot-main{ background: #dee5f1; overflow: hidden; display: flex;} .area-prot-img{ padding: 0; width: 47%; position: relative;} .area-prot-img img{ width: 100%;} .area-prot-img a{position: absolute; bottom: 20px; left: 50%; display: none; width: 150px; height: 46px; text-align: center; font-size: 16px; line-height: 46px; color: #fff; margin-left: -75px; border-radius: 23px; 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-prot-img:hover a{ display: block;} .area-prot-desc{ padding: 20px 15px 20px 30px; width: 53%;} .area-prot-til{ font-size: 24px; font-weight: bold; line-height: 36px; padding: 20px 0 20px 0px;} .area-prot-btn a{display: inline-block; height: 36px; line-height: 36px; min-width: 110px; text-align: center; color: #555555; border: 1px solid #555555; position: relative; margin-right: 13px; margin-bottom: 15px; padding: 0 6px; border-radius: 5px;} .area-prot-btn a span{ position: relative; transition: all .3s;} .area-prot-btn a::before{ position: absolute; content: " "; display: block; top: -1px; left: -1px; right: -1px; bottom: -1px; border-radius: 5px; 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 );} .area-prot-btn a:hover span{ color: #fff;} .area-prot-btn a:hover::before{ opacity: 1;} .area-prot-hot-btn{ text-align: center;} .area-prot-hot-btn a{ margin: 0 15px;} .area-service{background: #fff url(../img/areanew/area-service-bg.jpg) no-repeat center center / cover; min-height: 600px; color: #fff; padding: 50px 0 100px;} .area-service-top-til{ font-size: 40px; line-height: 60px; text-align: center; padding: 30px 0 30px;} .area-service-label{ padding: 20px 0 60px;} .area-service-label li{ padding-top: 50px;} .area-service-label-til { line-height: 50px;} .area-service-label-til b{ font-size: 100px; font-family: Arial, Helvetica, sans-serif; background-image:-webkit-linear-gradient(right,#eb3349,#f45c43); -webkit-background-clip:text; -webkit-text-fill-color:transparent;} .area-service-label-til span{ font-size: 24px;} .area-service-label-tex{ font-size: 24px} .area-service-btn{ text-align: center;} .area-service-btn a{ margin: 0 15px;} .area-service-list{ padding-bottom: 35px;} .area-service-list-main{ margin-bottom: 30px;} .area-service-list-desc{ text-align: center;} .area-service-list-desc::after{ clear: both; content: " "; width: 100%; height: 0; display: block;} .area-service-list-bg{ background: #5abad5;} .area-service-list-bg2{ background: #5a97d5;} .area-service-list-img{ width: 83%; float: right;} .area-container-g .area-service-list-img{ width: 77%;} .area-service-list-num{ font-size: 44px; line-height: 48px; padding: 15px 0 5px; display: inline-block; letter-spacing: 10px; font-style: italic; font-weight: bold; opacity: 0.3;} .area-service-list-tex{ font-size: 16px; line-height: 24px; padding: 0 7px; writing-mode:vertical-rl; writing-mode: tb-rl;} .area-service-list-nums{ font-size: 44px; line-height: 48px; padding: 20px 0; display: inline-block; letter-spacing: 10px; font-style: italic; font-weight: bold; opacity: 0.3;} .area-service-list-text{ font-size: 16px; line-height: 24px; padding: 0 7px; display: inline-block;} .area-case{ padding: 30px 0;} .area-case-top-til{ font-size: 40px; line-height: 60px; text-align: center; padding: 60px 0 30px;} .area-case-main{ position: relative; display: block; margin-bottom: 30px;} .area-case-list-img img{ width: 100%;} .area-case-list-text{ position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px 10px 5px; color: #fff; font-size: 16px; line-height: 36px; text-align: center; background: rgba(0, 0, 0, 0.5); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 0, 0, 0)), color-stop(100%,rgba(0, 0, 0, 0.7))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.7) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.7) 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.7) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.7) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0, 0, 0, 0)', endColorstr='rgba(0, 0, 0, 0.7)',GradientType=0 );} .area-case-list-edsc{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; padding: 45px 30px 0;} .area-case-list-til{ font-size: 18px; font-weight: bold; margin-bottom: 15px;} .area-case-list-tex{ font-size: 16px;} .area-caseimg-btn{ text-align: center;} .area-ind-cont{ background-color: #eee; background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 80px 0px; color: #333333;} .area-ind-cont-til{ text-align: center; font-size: 32px; line-height: 40px; margin-bottom: 20px;} .area-ind-cont-tex{ text-align: center; font-size: 18px; line-height: 36px; margin-bottom: 30px; color: #555555;} .area-ind-cont-input{ padding: 0 20px; margin-bottom: 30px;} .area-ind-cont-input input{ font-size: 18px; line-height: 36px; height: 46px; border-color: #555555; color: #555555; background: none; padding: 5px 15px;} .area-ind-cont-input input:focus{ border-color: #ed2936;} .area-ind-cont-btn{ text-align: center;} .area-ind-cont-btn a{display: inline-block; width: 150px; height: 46px; overflow: hidden; margin: 0 20px 20px;} .area-ind-cont-submit{display: inline-block; width: 150px; height: 46px; line-height: 46px; color: #ef4646; margin: 0 20px 20px; border-radius: 23px; background: #fff;} .area-ind-cont-submit span{ position: relative; transition: all .3s;} .area-ind-cont-submit::before{ position: absolute; content: " "; display: block; width: 150px; height: 46px; border-radius: 24px; 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 );} .area-ind-cont-submit:hover span{ color: #fff;} .area-ind-cont-submit:hover::before{ opacity: 1;} @media (max-width: 999px) { .area-top-banner{ min-height: 200px;} .area-top-banner .breadcrumb{ margin-bottom: 15px;} .area-top-label{ padding: 10px 10px 20px;} .area-top-label .area-label-tex{ font-size: 32px;} .area-top-text-desc{ font-size: 26px; line-height: 32px;} .area-til{ font-size: 32px;} .area-case-top-til{ font-size: 32px; padding: 30px 0;} .area-top-label .area-label-til{ font-size: 58px;} .area-prot-main{ flex-wrap: wrap;} .area-prot-img { width: 100%; } .area-prot-desc { width: 100%; } .area-approve{ margin-top: 0; } .area-prot-hot-btn a,.area-service-btn a{ margin: 0 10px;} .area-ind-cont-btn a{ margin: 0 10px 20px;} .area-service-list-img{ width: 80%;} .area-prot-desc{ padding: 5px 0 20px 15px;} .area-prot-til{ padding-right: 15px; text-align: center;} .area-prot-btn{ text-align: center;} .area-service-list-imgs{ float: left;} .area-container-g .area-service-list-num{ padding-top: 10%; padding-bottom: 5%;} .area-container-g .area-service-list-tex{ padding: 0 4%;} .area-container-g .area-service-list-img img{ width: 100%;} .area-service-list-nums{ padding-top: 50px; font-size: 66px;} .area-service-list-text{ display: block; font-size: 24px; line-height: 48px;} .area-prot-hot .line-big{ display: flex; flex-wrap: wrap;} .area-prot-hot .line-big dl{ width: 100%; height: 100%;} .area-prot-main{ flex-direction:column;} } @media (max-width: 559px) { .area-top-label .area-label-til{ font-size: 38px; line-height: 46px; margin-bottom: 0;} .area-top-label .area-label-tex{ display: none;} .area-program-list-til{ font-size: 24px;} .area-approve{ height: auto; overflow: hidden;} .area-approve-lf{ width: 100%; height: auto; padding: 10px; background: url(../img/areanew/area-approvebg.jpg) no-repeat center bottom / cover;} .area-approve-rt{ width: 100%; padding-top: 20px;} .area-approve-rt-main{ margin-left: 0px; padding: 20px;} .area-approve-lf .area-approve-lf-img{ position: relative; padding-right: 0;} .area-approve-til h3{ float: none; margin-bottom: 30px; font-size: 36px; margin-right: 0; text-align: center;} .area-program-list-btn{ text-align: center;} .area-approve-sign{ padding-left: 0; text-align: center;} .area-approve-text{ padding-left: 0; text-align: center;} .area-service-label li{ padding-top: 20px;} .area-service-label-til b{ font-size: 68px;} .area-service-label-til span{ font-size: 18px;} .area-service-label-tex{ font-size: 18px;} .area-prot-btn a{ min-width: 0;} .area-service-list-imgs{ float: left; width: 50%;} .area-service-list-nums{ padding-top: 10%; padding-bottom: 10px; font-size: 44px;} .area-service-list-text{ display: block; font-size: 16px; line-height: 24px;} } @media (max-width: 450px) { .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%; } .area-prot-hot-btn a,.area-service-btn a{ margin: 0 5px;} .area-ind-cont-btn a{ margin: 0 5px 20px; width: 140px;} .area-defa-btn{ width: 140px;} .area-service-list-imgs{ float: left; width: 45%;} .area-service-list-nums{ padding-top: 6%;} } @media(min-width: 451px) and (max-width:660px){ .area-program-list-til{ padding: 10% 20px 0; margin-bottom: 10%;} .area-program-list-text{ display: none;} .area-program-list .area-program-list-btn{ display: block;} } @media(min-width: 560px) and (max-width:759px) { .area-approve-lf{ width: 50%;} .area-approve-rt{ width: 50%; padding-top: 20px;} .area-approve-til h3{ font-size: 28px;margin-right:30px} .area-approve-rt-main{ margin-left: -100px;} .area-approve-sign{ padding-top: 5px; padding-left: 30px; text-align: center;} .area-approve-sign p{ margin-left: 15px; margin-right: 15px;} .area-approve-text { text-align: center;} .area-approve-text p{ padding: 5px;} } @media(min-width: 760px) and (max-width:999px) { .area-approve-rt{ padding-top: 20px;} .area-approve-til h3{ font-size: 32px;margin-right:40px} .area-approve-rt-main{ margin-left: -80px;} .area-approve-sign{ padding-top: 5px; padding-left: 10px; text-align: center;} .area-approve-sign p{ margin-left: 15px; margin-right: 15px;} .area-approve-text { text-align: center;} .area-approve-text p{ padding: 5px;} } @media (max-width:599px){ .area-service-list-desc{ padding-bottom: 10px;} .area-service-list-img{ width: 100%; float: none; margin-bottom: 10px;} .area-container-g .area-service-list-img{ width: 100%;} .area-service-list-num{ padding-top: 0px; line-height: 44px;} .area-service-list-tex{ padding: 0 5px; display: inline-block;writing-mode:initial;writing-mode:initial; margin-right: 10px;} .area-container-g .area-service-list-tex{ padding: 0 2px;} .area-container-g .area-service-list-desc{ padding-bottom: 0;} } @media(min-width: 600px) and (max-width:700px){ .area-service-list-img{ width: 79%;} .area-service-list-num{ padding-top: 0px; line-height: 44px;} .area-service-list-tex{ padding: 0 5px;} .area-container-g .area-service-list-tex{ padding: 0 2%;} .area-container-g .area-service-list-nums{ padding: 50px 0 20px;} } @media(min-width: 650px) and (max-width:700px){ .area-container-g .area-service-list-tex{ padding: 0 3%;} } @media(min-width: 1000px) and (max-width:1199px){ .area-prot-desc{padding: 1px 5px 1px 10px;} .area-prot-btn a{ margin-right: 7px;} .area-approve-rt-main{ margin-left: -80px;} .area-approve-sign{ padding-left: 10px; text-align: center;} .area-approve-sign p{ margin-right: 0;} .area-approve-text { text-align: center;} .area-approve-text p{ padding: 10px;} .area-service-list-img{ width: 80%;} .area-service-list-num{ padding-top: 5px;} .area-service-list-tex{ padding: 0 5px;} .area-container-g .area-service-list-tex{ padding: 0 2px;} .area-container-g .area-service-list-nums{ padding: 16px 0;} }