/* ========== */ /* = NY = */ /* ========== */ .ny-banner{ width: 100%; height: 500px; background-size: cover;} .ny-banner .text{ color:#FFFFFF; padding-top: 185px;} .ny-banner .text h2{ line-height: 60px; height: 60px; font-size: 24px; position: relative;} .ny-banner .text h2:before{ content: ""; position: absolute; top:0; left:-80px; width: 117px; height: 60px; background: url(../images/banner_cricle.png);} .ny-banner .text p{ margin-top: 10px; font-size: 28px; line-height: 46px; font-weight: bold;} .ny-sub{ width: 100%; background: #FFFFFF;} .ny-sub .content{ position: relative;} .ny-sub .sub{ float: left; border-right: 1px solid #EEEEEE;} .ny-sub .sub a{ float: left; display: block; width: 220px; line-height: 74px; text-align: center; border-left: 1px solid #EEEEEE;} .ny-sub .sub a:hover{ color: #ac0807;} .ny-sub .sub a.active{ background: #ac0807; color: #FFFFFF; font-weight: bold;} .bread{ float: right; text-align: right; line-height: 74px; color: #aaaaaa; font-size: 12px;} .bread span{ margin:0 5px; } .bread a{color: #aaaaaa; } .bread a:hover{ color: #555555;} .bread i { font-style: normal; color: #666666; } .page{ text-align: center; font-size: 0;} .page a,.page span{ margin: 0 6px; display: inline-block; vertical-align: middle; color: #666666; background: #FFFFFF; border:1px solid #e7e7e7; line-height: 38px; height: 40px; min-width: 40px; padding:0 4px; font-size: 12px;} .page a.current, .page span.current, .page a:hover{ border: 1px solid #b40d0d; background: #b40d0d; color: #FFFFFF; font-weight: bold;} .page .prev, .page .next{ padding: 0 20px; font-style: normal;} .red-filtter{ background: #b40d0d; color: #FFFFFF; padding: 12px 40px; line-height: 30px;} .red-filtter h2{ display: inline-block; vertical-align:middle; font-weight: bold; font-size: 18px;} .red-filtter div{ display: inline-block; vertical-align: middle;} .red-filtter div a{ margin-left:25px; display: inline-block; padding-right: 20px;color:#FFFFFF; position: relative; cursor: pointer;} .red-filtter div a:after{ display: none; content: ""; position: absolute; top:12px; right:0; width: 0px; height: 0px; border-style:solid dashed dashed dashed; border-color:#FFFFFF transparent transparent transparent; border-width:6px;} .red-filtter div a.active:after{ display: block;} @media (max-width:999px) { .ny-banner{ height:5.6rem;} .ny-banner .text{ padding-top: 1.5rem; text-align: center;} .ny-banner .text h2{ font-size: 0.5rem; line-height: 0.62rem; height: auto;} .ny-banner .text h2:before{display: none;} .ny-banner .text p{ margin-top: 0.5rem; font-size: 0.32rem; line-height: 0.6rem;} .ny-sub .w1340{padding: 0;} .ny-sub .sub{ width: 100%;} .ny-sub .sub a{ float: left; width: 33.33333333333333%; line-height:54px;} .page a,.page span{ margin:2px; line-height: 32px; height:34px; min-width: 34px; } .page .prev, .page .next{ padding: 0 10px; } .red-filtter{ padding: 20px;} .red-filtter h2{ margin-bottom:10px; display: block;} .red-filtter div a{ margin-left: 0; margin-right: 20px; } } /* ========== */ /* = SERVICE = */ /* ========== */ .service{ padding:80px 0 110px; position: relative;} .service .w1340{ padding-bottom: 85px; position: relative;} .service .w1340:after{ content: ""; position: absolute; z-index: 0; bottom:0; right:-2.5%; height:90%; width:200%; background:#FFFFFF; -o-box-shadow:0 0 30px rgba(0,0,0,.05); -ms-box-shadow:0 0 30px rgba(0,0,.05); -moz-box-shadow:0 0 30px rgba(0,0,0,.05); -webkit-box-shadow:0 0 30px rgba(0,0,0,.05); box-shadow:0 0 30px rgba(0,0,0,.05); } .service-link-ul{ position: relative; z-index: 1; margin:30px -35px 0;} .service-link-ul li{ margin-top: 60px; float: left; width: 25%; padding: 0 35px;} .service-link-ul .item{ display: block;} .service-link-ul .item span{ float: left; border: 1px solid #FFFFFF; background: #ac0807; border-radius: 100%;} .service-link-ul .item div{ margin-left:35px; height: 70px; padding-left: 55px;line-height:28px;} .service-link-ul .item div p{ font-size: 16px; color: #333333; padding-top:8px; } .service-link-ul .item div i{ display: block;color: #999999;} .service-link-ul .item:hover span{ transform: scale(1.2); -webkit-transform: scale(1.2);} .service-link-ul .item:hover div{ padding-left:60px; background: #ac0807; } .service-link-ul .item:hover div p{ color: #FFFFFF;} .service-link-ul .item:hover div i{ color: #FFFFFF;} /* ========== */ /* = SERVICE-DETAIL = */ /* ========== */ .service-detail{ padding: 85px 0;} .service-detail-box{ position: relative;} .service-detail-box:before{ content: ""; position: absolute; right: 58%; top:12%; width: 100%; height: 98%; background: #b20000; z-index: 0;} .service-detail-box .content{ background:#FFFFFF; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; position: relative; z-index: 1;} .service-detail-box .img{ width: 29.5%; } .service-detail-box .right{ width: 70.5%; padding: 20px 7%; } .service-detail-box .right .tit{ font-size: 24px; color: #333333; font-weight: bold;} .service-detail-box .right .tip{ margin-top:10px; background: url(../images/service_cricle.png) no-repeat left; padding-left: 115px; color: #2a51b8; } .service-detail-box .right .des{ margin-top: 20px; line-height: 24px;} .service-detail-box .right li{ margin-right:10%; float: left; margin-top: 28px; } .service-detail-box .right li img{ float: left;} .service-detail-box .right li div{ margin-left: 75px;} .service-detail-box .right li p{line-height: 28px; color: #333333; font-size: 16px;} .service-detail-box .right li i{ font-size: 12px; color: #999999;} .service-detail-box .right .text{ margin-top: 40px; padding-top: 35px; border-top: 1px solid #eeeeee; text-align: left;} .service-detail-box .right .text span{ margin-bottom: 15px; display: block; font-size: 20px; color:#333333; } .service-detail-box .right .text .span2{ font-size: 14px; line-height: 26px;} .service-detail-box .right .text p{ padding-left: 25px; line-height: 32px; background:url(../images/ico_right.png) 0 8px no-repeat; } .service-detail-box .right .text .p2{ display: inline-block; min-width:168px;} .service-detail-box .right .text .div3 .p2{ min-width: 310px; } .service-detail-box .right .scroll{ height: 150px; overflow-y: scroll; padding-right: 10px;} .service-detail-bg{ margin-top: 140px; background: #FFFFFF; padding: 75px 90px 50px;} .service-detail-bg .flip{ padding-top: 50px; border-top: 1px solid #eeeeee;} .service-h2{ font-size: 24px; color: #333333; font-weight: bold;} .service-specifics { margin-bottom: 75px;} .service-specifics ul{ margin-top: 40px; border-bottom: 1px solid #e5e5e5; } .service-specifics li{ padding: 20px 60px; border: 1px solid #e5e5e5; border-bottom: none; } .service-specifics li span{ display:block; font-size: 16px; line-height: 32px; color: #333333; position: relative;} .service-specifics li span:before{ content: ""; position: absolute; top:14px; left:-20px; width: 6px; height:6px; background: #be0000; border-radius: 100%;} .service-specifics li p{ color: #999999; line-height: 26px;} .service-specifics li:hover{ background: #ac0807; color: #FFFFFF;} .service-specifics li:hover span{ color: #FFFFFF;} .service-specifics li:hover span:before{ background: #FFFFFF;} .service-specifics li:hover p{ color: #FFFFFF;} .service-practices{ margin-bottom: 100px ;} .service-practices .practice-list{ margin-top: 40px;} .service-practices .practice-list li{ border: 1px solid #eeeeee;} .getmore{ margin: 60px auto 0; display: block; width: 230px; height: 58px; line-height: 58px; background: #b40d0d; color: #FFFFFF; text-align: center;} .service-case{ margin-bottom: 100px;} .service-case .des{ margin-top: 10px; } .service-case .des a{ color: #2a51b8;} .service-case .des i{ margin-left: 10px; display: inline-block; vertical-align: middle; font-size: 12px; font-style: normal; width: 83px; height: 18px; line-height: 18px; padding-left:18px; background: url(../images/ico_service_case.png);color: #FFFFFF;} .service-case .table-box{ margin-top: 50px; } .table-box{width: 100%; text-align: center; background: #FFFFFF;} .table-box th{ text-align: center; font-size: 20px; color: #333333; font-weight: bold; padding: 20px 5px;} .table-box th:nth-child(2n){ background: #f8f8f8; color: #b40d0d;} .table-box td{ width: 50%; padding: 25px 65px; font-size: 14px; line-height: 26px; color: #333333; } .table-box td:nth-child(2n){ background: #f8f8f8; color: #b40d0d;position: relative;} .table-box td:nth-child(2n):after{ content: ""; position: absolute; top:50%; margin-top: -20px; left:-58px; width: 77px; height: 40px; background: url(../images/ico_service_cricle.png);} .table-box td:nth-child(2n) a{color: #b40d0d;} .table-box td:nth-child(2n) a:hover{color: #de0606;} .service-customer{ margin-bottom:135px;} .service-customer .left{ float: left; width: 44%; } .service-customer .left .des{ margin-top: 20px; line-height: 22px; } .service-customer .left ul{ margin-top:35px;word-break:break-all;display: flex; flex-flow: wrap; justify-content: space-between; align-items:stretch;} .service-customer .left li{ margin-top: 8px; margin-right:1.5%; width: 48.5%; background: #f8f8f8; padding:20px 5px; line-height: 22px; text-align: center; color: #333333;} .service-customer .left li:nth-child(2n+1){clear: both;} .service-customer .left li a{color: #333333;} .service-customer .left li.red{ background: #b40d0d;} .service-customer .left li.red a{ display: inline-block; padding-left: 35px; color: #FFFFFF; line-height: 22px; background: url(../images/ico_service_customer.png) no-repeat left;} .service-customer .right{ float: right; width: 52%;} .service-customer .scroll-div{ height:285px; overflow-y:scroll; } @media (max-width: 1340px){ /* ========== */ /* = SERVICE = */ /* ========== */ .service-link-ul{margin: 30px -20px 0;} .service-link-ul li{ padding: 0 20px;} .service-link-ul .item div{ padding-left: 45px;} .service-link-ul .item:hover div{ padding-left: 55px;} /* ========== */ /* = SERVICE-DETAIL = */ /* ========== */ } @media (max-width: 999px){ /* ========== */ /* = SERVICE = */ /* ========== */ .service{ padding: 50px 0;} .service .w1340{ padding-bottom:0;} .service .w1340:after{display:none; } .service-link-ul{ margin:0 -5px;} .service-link-ul li{ margin-top:30px; width:50%; padding: 0 5px;} .service-link-ul .item span{ width:50px;} .service-link-ul .item div{ margin-left:25px; height:50px; padding-left:35px; line-height:20px;} .service-link-ul .item div p{ font-size: 12px; padding-top:6px;} .service-link-ul .item div i{ font-size:10px;} .service-link-ul .item:hover div{ padding-left:35px;} /* ========== */ /* = SERVICE-DETAIL = */ /* ========== */ .service-detail{ padding:50px 0;} .service-detail-box:before{ display:none;} .service-detail-box .img{ width: 100%; } .service-detail-box .right{ width: 100%; padding:30px 20px; } .service-detail-box .right .tit{ font-size: 20px;} .service-detail-box .right .tip{ background: none; padding-left:0;} .service-detail-box .right .text span{ font-size: 16px;} .service-detail-box .right .text .span2{ font-size: 14px; line-height: 24px;} .service-detail-bg{ margin-top:50px; padding:40px 15px;} .service-detail-bg .flip{ padding-top: 30px;} .service-h2{font-size:17px; } .service-specifics{ margin-bottom: 50px;} .service-specifics li{ padding:20px 35px; } .service-specifics li span:before{ left:-15px; } .service-practices{ margin-bottom: 50px;} .getmore{ margin: 30px auto 0; width: 160px; height: 50px; line-height: 50px;} .service-case{ margin-bottom: 50px;} .service-case .des a{ margin-top: 10px; display: block;} .table-box th{font-size:15px; } .table-box td{ font-size: 13px; padding:10px;} .table-box td:nth-child(2n):after{ display: none;} .service-customer{ margin-bottom:60px;} .service-customer .left{ width: 100%; } .service-customer .left li{font-size: 12px; } .service-customer .left li.red{ width: 100%;} .service-customer .right{ margin-top:30px; width: 100%; } } /* ========== */ /* = GLOBAL = */ /* ========== */ .global{ padding: 80px 0 105px;} .global-box{ background: #FFFFFF; padding: 90px 90px 120px; border-bottom: 5px solid #ac0807;} .global-box .box{ margin-top: 40px;} .global-box .box .text{ float: left; width: 48%; max-width: 625px;} .global-box .box .text h2{position: relative; font-size: 30px; color: #333333; font-weight: bold; padding-bottom: 20px;} .global-box .box .text h2:after{ content: ""; position: absolute; bottom: 0; left:0; width: 55px; height: 4px; background: #b40d0d;} .global-box .box .des{ margin-top: 30px; line-height: 30px;} .global-box .box .des a:hover{ color: #ac0807; } .global-box .box .more{ margin-top: 30px; display: inline-block; padding:20px 45px; background: #ac0807; color: #FFFFFF; } .global-box .box .more i{ display: inline-block; line-height: 30px; padding-left: 35px; background:url(../images/ico_service_customer.png) no-repeat left; font-style:normal;} .global-box .box .img{ float: right; width: 47%;} .global-box .box:first-child{ margin-top:0} .global-box .box:nth-child(2n) .text{ float: right;} .global-box .box:nth-child(2n) .img{ float: left;} .global-descp{ margin-top:80px; padding: 80px 0; background-image: url(../images/global_descp_bg.jpg); background-size: cover; background-attachment: fixed; } .global-descp .content{ padding: 0 90px; color: #FFFFFF;} .global-descp h2{ font-size: 18px; font-weight: bold;} .global-descp h3{ margin-top: 10px; font-size: 30px; font-weight: bold;} .global-descp .des{ margin-top: 20px; line-height: 30px; } .global-app{padding:80px 90px; background: #FFFFFF; position: relative;} .global-ul-tit{ margin-top:40px; font-weight: bold; font-size:16px; } .global-ul{ margin-top:30px; width: 100%; padding:0 75px; font-weight: bold;} .global-ul li{ float: left; width: 20%; padding: 0 15px; } .global-ul .item{ margin-top: 10px; display: block; text-align: center;color: #ffffff;} .global-ul .item img{ max-width: 70%;} .global-ul .item p{ margin-top: 20px; font-size:12px; font-weight:normal; color: #d3d3d3;} .global-ul .item i{ margin-top: 10px; display: block; opacity: .6;} @media (max-width: 999px){ /* ========== */ /* = GLOBAL = */ /* ========== */ .ny-sub .sub a{ width: 50%; font-size: 12px; } .global{ padding: 50px 0;} .global-box{ padding: 30px 15px;} .global-box .box .text{ width: 100%;} .global-box .box .text h2{ font-size:20px;} .global-box .box .img{ margin-top: 30px; width: 100%;} .global-descp{ margin-top:40px; padding: 50px 0 10px; } .global-descp .content{ padding:0 15px;} .global-descp h2{ font-size: 16px; } .global-descp h3{ font-size: 18px; } .global-app{ margin-top: 30px; padding:40px 15px; } .global-ul{ position: relative; top:auto; padding:0;} .global-ul li{ margin-bottom: 30px; width: 100%; padding:0;} } /* ========== */ /* = SOLUTION = */ /* ========== */ .solution{ padding-bottom: 85px;} .solution ul{ padding:80px 0; position: relative;} .solution ul:before{ content:""; position: absolute; z-index:0; bottom: 0; right:-6%; height:78%; width: 200%; background: #FFFFFF;} .solution ul:nth-child(2n):before{right:auto; left:-6%;} .solution li{ float: left; width: 48%; margin-right: 4%; background: #FFFFFF; position: relative; z-index: 1;} .solution li:nth-child(2n){ margin-right: 0;} .solution-item{ display: block;} .solution-item .img{ overflow: hidden; position: relative;} .solution-item .img img{ width: 100%;} .solution-item .img span{ position: absolute; bottom: 0; left:0; width: 230px; height: 60px; line-height: 60px; background: #ac0807; color: #fefefe; font-size: 16px; text-align: center;} .solution-item .img span i{ display: inline-block; background: url(../images/ico_solution_more.png) no-repeat left; padding-left: 30px; font-style: normal;} .solution-item .text{ border: 1px solid #eeeeee; padding: 50px 30px 50px 60px;} .solution-item .text .tit{ padding-left: 20px; font-size: 17px; color: #333333; font-weight: bold; position: relative;} .solution-item .text .tit:before{ content: ""; position: absolute; top:50%; margin-top: -4px; left:0; width: 8px; height: 8px; background: #ac0807; border-radius:100%;} .solution-item .text .des{ margin-top: 15px; padding-left: 20px; line-height: 24px; height: 48px; overflow: hidden;} .solution-item:hover .img img{ transform: scale(1.1); -webkit-transform: scale(1.1);} .solution-item:hover .tit{ color: #ac0807;} /* ========== */ /* = SOLUTION-DETAIL = */ /* ========== */ .solution-detail{ padding: 80px 0 100px;} .solution-box{ margin-top: 50px;position: relative;} .solution-box:before{ content: ""; position: absolute; right:100%; top:0%; width: 100%; height:100%; background: #FFFFFF; z-index: 0;} .solution-box:after{ content: ""; position: absolute; left:80%; bottom:-60px; width: 100%; height:390px; background: #ac0807; z-index: 0;} .solution-box .content{ position: relative; z-index: 1; padding: 75px 0 80px; background: #FFFFFF; border-bottom:5px solid #b30d0d;} .solution-box .theme{ margin-bottom: 30px; padding-bottom: 25px; font-size: 26px; text-align: center; color: #333333; font-weight: bold; position: relative;} .solution-box .theme:after{ content: ""; position: absolute; bottom: 0; left:50%; margin-left: -28px; width: 56px; height: 4px; background: #b40d0d;} .solution-box .con{ border-bottom: 1px solid #eeeeee; padding-bottom: 45px; margin-bottom: 45px; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between;} .solution-box .left{ width: 58%; padding: 0 90px;} .solution-box .left .tit{ padding-bottom: 25px; font-size: 26px; color: #333333; font-weight: bold; position: relative;} .solution-box .left .tit:after{ content: ""; position: absolute; bottom: 0; left:0; width: 56px; height: 4px; background: #b40d0d;} .solution-box .left .des{ margin-top: 55px; color: #333333; line-height: 30px; } .solution-box .left .des a{ color: #333333;} .solution-box .right{ width: 42%; } .solution-box .right img{ width: 100%;} .solution-box .word{ padding: 0 90px;} .solution-box .word .bg{ background: #fdfafa; border:1px dashed #b40d0d; padding: 50px 60px;} .solution-box .word h2{ font-size: 20px; color: #ab0807; font-weight: bold; } .solution-box .word .text{ margin-top: 20px; line-height: 30px;} .solution-project{ margin-top: 120px; position: relative;} .solution-project .bg{ padding: 80px 90px; background: #FFFFFF; position: relative; z-index: 1; } .solution-project:before{ content: ""; position: absolute; left:100%; top:0%; width: 100%; height:100%; background: #FFFFFF; z-index: 0;} .solution-project:after{ content: ""; position: absolute; right:80%; bottom:-70px; width: 100%; height:390px; background: #ac0807; z-index: 0;} .solution-bg-white{ margin-top: 140px; padding: 75px 90px 35px; background: #FFFFFF;} .solution-content{ margin-bottom: 100px;} .solution-content .content{ margin-top: 30px;} .solution-content .des{ color: #333333; font-size: 16px; line-height: 32px;} .solution-content .left{ float: left; width:48%;} .solution-content .left ul{ margin-top: 25px;} .solution-content .left li{ margin-top: 12px; line-height: 26px; float: left; width: 32%; margin-right: 2%; } .solution-content .left li:nth-child(3n){ margin-right: 0;} .solution-content .left li:nth-child(3n+1){ clear: both;} .solution-content .left li span{ padding-left: 30px; display:inline-block; background: url(../images/ico_right.png) left 4px no-repeat;} .solution-content .left li a:hover span{ background: url(../images/ico_right_red.png) left 4px no-repeat; font-weight:bold; color: #b40d0d;} .solution-content .left .more{ margin-top:50px; padding: 20px 55px; display:inline-block; background: #b40d0d;} .solution-content .left .more i{ display: inline-block; padding-left: 35px; font-style: normal; color: #FFFFFF; line-height: 22px; background: url(../images/ico_service_customer.png) no-repeat left;} .solution-content .right{ float: right; width:48%;} .solution-content .right img{ width: 100%;} @media (max-width: 1540px){ .solution-content .left{width: 53%;} .solution-content .left li{ font-size: 13px; } .solution-content .left li span{ padding-left: 23px; } .solution-content .right{ width:45%;} .service-detail-box .right .scroll{ height: 100px; } } /* ========== */ /* = SOLUTION-CASE = */ /* ========== */ .solution-case-fl{ margin-top:30px;} .solution-case-fl a{ margin-right:25px; display: inline-block; padding: 10px 28px; background: #FFFFFF;} .solution-case-fl a.active{ background: #b40d0d; color: #FFFFFF;} .solution-case-des{ margin: 30px 0; line-height: 30px; } .solution-detail .practice-list{ margin-bottom: 90px;} .oral-table { width: 100%; padding:50px; background: #fff;} .oral-table table{ width: 100%;} .oral-table td{ padding: 20px; padding: 20px; width: 70%;} .oral-table td:nth-child(1){ width: 70%;} .oral-table td:nth-child(2){ width: 30%;} .oral-table tr:first-child{ font-size: 16px; color:#333333; border-bottom: 2px solid #b40d0d;} .oral-table tr{ border-bottom:1px solid #EEEEEE;} .oral-table tr:last-child{ border-bottom: none;} @media (max-width: 999px){ /* ========== */ /* = SOLUTION = */ /* ========== */ .solution{ padding:50px 0 20px;} .solution ul{ padding: 0;} .solution ul:before{ display: none;} .solution li{ width: 100%; margin-right: 0; margin-bottom: 30px;} .solution-item .img span{ width:160px; height:50px; line-height: 50px;} .solution-item .text{ padding:30px 20px 30px 30px;} /* ========== */ /* = SOLUTION-DETAIL = */ /* ========== */ .solution-detail{ padding:50px 0;} .solution-box:before, .solution-box:after{ display: none;} .solution-box .content{ padding:40px 15px;} .solution-box .left{ width: 100%; padding: 0 0 25px;} .solution-box .left .tit{ font-size:17px;} .solution-box .left .des{ margin-top:35px;} .solution-box .right{ width:100%;} .solution-box .word{ padding: 0;} .solution-box .word .bg{ padding: 15px;} .solution-box .word h2{ font-size: 16px; } .solution-box .theme{ font-size: 20px; } .solution-project{ margin-top:50px; position: relative;} .solution-project .bg{ padding:40px 15px;} .solution-project:before, .solution-project:after{display: none;} .solution-bg-white{ margin-top: 50px; padding:40px 15px;} .solution-content{ margin-bottom: 50px;} .solution-content .left{ width: 100%;} .solution-content .left ul{ margin-top: 25px;} .solution-content .left li{ width:100%; margin-right:0;} .solution-content .left li:nth-child(3n){ margin-right:2%;} .solution-content .left li:nth-child(3n+1){ clear:initial;} .solution-content .left li:nth-child(2n){ margin-right:0;} .solution-content .left li:nth-child(2n+1){ clear:both;} .solution-content .left .more{ margin-top:30px; padding: 20px; } .solution-content .right{ width: 100%; margin-top: 35px;} /* ========== */ /* = SOLUTION-CASE = */ /* ========== */ .solution-case-fl{text-align: center;} .solution-detail .practice-list{ margin-bottom: 50px;} .oral-table { padding: 20px 10px;} .oral-table td{ padding:20px 5px; } } /* ========== */ /* = QUALITY = */ /* ========== */ .quality { padding: 55px 0 120px;} .quality .technology-tit{ padding-left: 0;} .quality .bg{ padding: 85px 90px 125px; background: #FFFFFF; border-bottom: 5px solid #ab0808; position: relative;} .quality .bg:after{ content: ""; position: absolute; left:100%; top:0%; width: 100%; height:100%; background: #FFFFFF; z-index: 0;} .quality .des{ margin-top:30px; line-height: 30px;} .quality .content{ margin-top: 80px; position: relative;} .quality .img{ max-width: 640px; margin: 0 auto; position: relative;} .quality .img .link{ position: absolute; display: block;} .quality .img .link1{ left:20%; top:0; width:30%; height: 36%;} .quality .img .link2{ right:20%; top:14%; width:23%; height:32%;} .quality .img .link3{ left:20%; top:42%; width:20%; height: 40%;} .quality .img .link4{ right:32%; top:65%; width:22%; height: 25%;} .quality .box{ position: absolute; border: 1px solid#eeeeee; padding: 20px 50px 20px 20px; text-align: right; width: 355px; display: block; background: #FFFFFF; } .quality .box .theme{ display: none; margin-bottom: 20px; background: #ac0807; color: #FFFFFF; padding: 20px; font-size: 18px; font-weight: bold;} .quality .box .theme span{ display: block; font-size: 16px; text-transform: uppercase;} .quality .box .tit{ font-size: 16px; color: #333333; font-weight: bold; position: relative;} .quality .box .tit:before{ content: ""; position: absolute; top:8px; right:-20px; width: 8px; height: 8px; border-radius: 100%; background: #ac0807;} .quality .box .text{ margin-top: 15px; line-height: 24px;} .quality .box:nth-child(2n){ text-align: left; padding: 20px 20px 20px 50px; } .quality .box:nth-child(2n) .tit:before{ left:-20px; right:auto;} .quality .box:nth-child(2n) .theme{ background: #0d4ba8;} .quality .box1{ top:20px; left:0;} .quality .box2{ top:20px; right: 0;} .quality .box3{ left:0; top:200px;} .quality .box4{ right:0; top:262px;} /* ========== */ /* = PROCESS = */ /* ========== */ .process{ padding: 55px 0 90px;} .process-box{ margin-top:30px; position: relative;} .process-box:first-child{ margin-top: 50px;} .process-box:before{ content:""; position: absolute; top:12%; left:70%; width: 100%; height: 100%; background: #ac0807; z-index:0;} .process-box .content{ background: #FFFFFF; position: relative; z-index: 1;} .process-box .text{ position: absolute; top:0; left:0; height: 100%; width: 56%; padding-left:90px; padding-right:10%; line-height: 28px;} .process-box .text i{display: inline-block; vertical-align: middle; height: 100%;} .process-box .text p{ display: inline-block; vertical-align: middle; width: 100%; position: relative; padding-top:75px;} .process-box .text p:before{ position: absolute; top:0; left:0; content: ""; display: block; width: 36px; height: 29px; background: url(../images/ico_mark.png);} .process-box .img{ float: right; width: 44%;} .process-box:nth-child(2n):before{ right:70%; left:auto; } .process-box:nth-child(2n) .text{ left:auto; right:0; padding-left: 10%; padding-right: 90px;} .process-box:nth-child(2n) .text p{ padding-top: 0; padding-bottom: 60px;} .process-box:nth-child(2n) .text p:before{ right:0; left:auto; bottom:0; top:auto; background: url(../images/ico_mark2.png);} .process-box:nth-child(2n) .img{ float: left;} .process-content{ margin-top: 150px; padding: 90px; background: #FFFFFF; border-bottom:5px solid #b30d0d;} .process-content .tit p{ font-size: 16px; color: #333333;} .process-content .tit span{ margin-top: 10px; font-size: 18px; display: block; color: #354fb9;} .process-content .content{ margin-top: 40px; background: #ac0807; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between;} .process-content .img{ position: relative; width: 47%;} .process-content .img .tip{ position: absolute; width: 100%; bottom: 0; left:0; padding:15px 10px; background: rgba(0,0,0,.6); text-align: center; color: #FFFFFF;} .process-content .img .tip span{ margin-right:3%; font-size:16px; line-height: 34px; display: inline-block; vertical-align: middle;} .process-content .img .tip a{ width: 195px; height: 44px; line-height: 44px; display:inline-block; vertical-align: middle; background: #0d4ba8; font-size: 16px; color:#FFFFFF; font-weight: bold; } .process-content .img .tip a i{ background: url(../images/ico_zx.png) no-repeat left; padding-left: 33px; font-style: normal;} .process-content .right{ width:53%; padding: 0 5%;} .process-content .right li{ float:left; width: 48%; margin-right:4%; padding: 22px 0; position: relative;} .process-content .right li:nth-child(2n){ margin-right: 0;} .process-content .right li span{ position: absolute; top:50%; margin-top:-36px; left:0; display: block; background: #FFFFFF; border:3px solid #ac0807; border-radius: 100%;} .process-content .right li p{ margin-left: 40px; background: #ffffff; padding: 10px 10px 10px 50px; color: #ac0807; font-size: 16px; line-height: 26px;} .process-content .right li:hover img{ animation: tada 1s; -webkit-animation: tada 1s;} /* ========== */ /* = PROCESS-DETAIL = */ /* ========== */ .process-detail{ padding: 60px 0 80px;} .process-detail-tit{ text-align: center; font-size: 20px; color: #333333; font-weight: bold; } .process-detail .content{ margin-top: 45px; padding: 50px 90px 110px; background: #FFFFFF;} .process-detail ul{ margin-top: 70px; position: relative;} .process-detail ul:before{ content: ""; position: absolute; top:0; left:50%; width: 1px; height: 100%; background: #EEEEEE;} .process-detail li{ margin-bottom: 50px; position: relative;} .process-detail li:first-child:before, .process-detail li:last-child:before{ content: ""; position: absolute; top:0; left:50%; height: 50%; width: 1px; background: #FFFFFF;} .process-detail li:last-child:before{ top: auto; bottom: 0;} .process-detail li .cricle{ position: absolute; top:50%; left:50%; margin-left: -58px; margin-top: -58px; border-radius: 100%; border:6px solid rgba(172,8,7,.2); width: 116px; height:116px;} .process-detail li .cricle div{ width: 104px; height: 104px; border-radius: 100%; background: #ac0807; padding-top: 34px; text-align: center; color: #FFFFFF; line-height: 24px;} .process-detail li .cricle div span{ display: block; font-size: 17px; font-weight: bold;} .process-detail li .cricle div p{ font-size: 12px; opacity: .6;} .process-detail li .num{ position: absolute; top:50%; margin-top: -35px; line-height: 70px; height: 70px; left:0; width:50%; text-align: right; display: block; padding-right: 130px; font-size: 60px; font-weight: bold; color: #dddddd;} .process-detail li .text{ float: right; width:50%; padding-left: 95px;} .process-detail li .box{ border: 1px solid #eeeeee; padding: 35px 30px 35px 55px;} .process-detail li .box .tit{ margin-bottom: 10px; position: relative; line-height:28px; font-size: 17px; color: #333333; font-weight: bold;} .process-detail li .box .tit:before{ content: ""; position: absolute; top:12px; left:-18px; width: 6px; height: 6px; background: #1555b7; border-radius: 100%;} .process-detail li .box p{ line-height: 22px; position: relative; padding-left: 20px;} .process-detail li .box p i{ position: absolute; top:0; left:0; font-style: normal;} .process-detail li:nth-child(2n) .num{ left:auto; right:0; padding-right: 0; padding-left: 130px; text-align: left;} .process-detail li:nth-child(2n) .text{ float: left; padding-left: 0; padding-right: 95px;} .process-detail li:hover .num{ color: #ac0807;} .process-detail li:hover .box{ border: 1px solid #ac0807; background: url(../images/ico_process_bg.png) no-repeat bottom right;} .process-detail li:hover .box .tit{ color: #ac0807;} .process-detail li:hover .box .tit:before{ background: #ac0807;} /* ========== */ /* = DATABASE = */ /* ========== */ .database{ padding: 40px 0 95px;} .database-box{ margin-top: 45px; background: #FFFFFF; border-bottom: 5px solid #ac0807; padding: 75px 90px;} .database-box h2{ font-weight: bold; color: #333333; font-size: 16px;} .database-box ul{ margin-top: 70px;} .database-box li{ float: left; width: 32%; margin-right:2%;} .database-box li:nth-child(3n){ margin-right: 0;} .database-box li:nth-child(3n+1){ clear: both;} .database-box li .tit{ max-width: 320px; text-align: center; padding:50px 10px; background: #ac0807; color: #FFFFFF;} .database-box li .tit span{ display: inline-block; padding-bottom: 25px; border-bottom: 2px solid #FFFFFF; font-size: 20px; font-weight: bold;} .database-box li .item{ padding:50px 0;} .database-box li .item img{ float: left;} .database-box li .item div{ margin-left: 100px;} .database-box li .item div span{ display: block; line-height: 32px; font-size: 18px; color: #111111;} .database-box li .item div p{ margin-top:3px; line-height: 22px;} .database-list{ margin-top: 100px; padding-bottom: 73px; background: #FFFFFF;} .database-list li{ position: relative;} .database-list li .img{ float: right; width: 50%; position: relative;} .database-list li .img img{ width: 100%;} .database-list li .img span{ position: absolute; bottom:50px; right:0; background: #ac0807; color: #FFFFFF; display: inline-block; padding: 10px 50px; font-weight: bold; font-size: 32px;} .database-list li .text{ position: absolute; top:0; left:0; width: 50%; height: 100%;} .database-list li .text .con{ padding: 20px 7%; width: 100%; display: inline-block; vertical-align: middle; line-height: 30px; color: #333333;} .database-list li .text .con+i{ display: inline-block; vertical-align: middle; height:100%;} .database-list li .text .con .p-tit{ font-size: 16px; } .database-list li:nth-child(2n) .img{ float: left;} .database-list li:nth-child(2n) .text{ right:0; left: auto;} .database-list .p90{ padding: 0 90px;} /* ========== */ /* = TECHNOLOGY = */ /* ========== */ .technology{ padding: 60px 0 110px; } .technology-tit{ padding-left: 90px; font-size: 24px; color: #333333; font-weight: bold;} .technology-tit span{ color: #cccccc; } .technology-tit span i{ font-style: normal; color: #be0000;} .technology-box{ margin-top: 50px; position: relative;} .technology-box:before{ content: ""; position:absolute; z-index: 0; right:78%; top:22%; width:100%; height: 92%; background: #ac0807;} .technology-box .content{ background:#FFFFFF; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; position: relative; z-index: 1;} .technology-box .left{ width:56%; padding: 20px 90px;} .technology-box .left .png{ width: 36px; height: 29px; background: url(../images/ico_mark.png);} .technology-box .left .des{ margin-top:30px; line-height: 30px; color: #333333;} .technology-box .left span{ margin-top: 40px; display: block; width: 230px; height: 60px; line-height: 60px; text-align: center; background: #0d4ba8; color:#FFFFFF;} .technology-box .left span i{ font-style: normal; background: url(../images/ico_technology_more.png) no-repeat left; padding-left: 30px; } .technology-box .right{ width:44%;} .technology-content{ margin-top: 110px; padding: 100px 90px 60px; background: #FFFFFF;} .technology-content .technology-h2{font-size: 24px; color: #333333; font-weight: bold;} .technology-content ul{ margin-top: 40px; border-bottom: 1px solid #e5e5e5; } .technology-content li{ padding: 25px 60px; border: 1px solid #e5e5e5; border-bottom: none; background: #f8f8f8; font-size: 16px; line-height: 32px; color: #333333; } .technology-content li:nth-child(2n){ background: #FFFFFF;} .technology-content li span{ display:block; position: relative;} .technology-content li span:before{ content: ""; position: absolute; top:14px; left:-20px; width: 6px; height:6px; background: #be0000; border-radius: 100%;} .technology-content li span i{ margin-left: 5px; font-style: normal; color: #999999;} .technology-content li:hover{ background: #ac0807;} .technology-content li:hover span{ color: #FFFFFF;} .technology-content li:hover span:before{ background: #FFFFFF;} .technology-content li:hover span i{ color: #FFFFFF;} /* ========== */ /* = PEOPLE = */ /* ========== */ .people{ padding: 60px 0 120px;} .people .bg{ margin-top: 40px; background: #FFFFFF;} .people-box{ position: relative;} .people-box .text{ position: absolute; top:0; left:0; height: 100%; width: 50%; background: #FFFFFF; border: 30px solid #ac0807; padding:10px 5%;} .people-box .text .con{ display: inline-block; width: 100%; vertical-align: middle;} .people-box .text .con+i{ display: inline-block; vertical-align: middle; height: 100%;} .people-box .text .tit{ padding-bottom: 15px; font-size: 18px; color: #333333; font-weight: bold; position: relative;} .people-box .text .tit:after{ content: ""; position: absolute; bottom: 0; left:0; width: 30px; height: 2px; background: #0d4ba8;} .people-box .text .des{ margin-top: 15px; color: #333333; line-height: 24px; } .people-box .img{ float: right; width: 50%;} .people-list{ padding: 95px 90px 75px;} .people-tit span{ float: left; font-size: 20px; color: #333333; font-weight: bold; line-height: 30px; } .people-tit a{ float: right; display: block; width: 230px; height:60px; line-height: 60px; text-align: center; background: #0d4ba8; color:#FFFFFF; font-size: 16px; } .people-tit a i{ padding-left: 40px; display: inline-block; font-style: normal; background: url(../images/ico_join.png) no-repeat left;} .people-list ul{ margin: 40px -15px 55px;} .people-list li{ padding: 15px; float: left; width: 33.333333333%;} .people-list li:nth-child(4){ clear: both;} .people-list li:nth-child(4), .people-list li:nth-child(5){ width: 50%;} .people-list li .item{ padding: 55px 65px; background: #f4f4f4;} .people-list li .item .num{ display: inline-block; width: 60px; height: 60px; text-align: center; line-height: 60px; text-align: center; font-size: 26px; font-weight:bold; background: #ac0807; color: #FFFFFF; border-radius: 100%; position: relative;} .people-list li .item .num:after{ content: ""; position: absolute; top:0; left:10px; width: 100%; height: 100%; background: #ac0807; opacity: .2; border-radius: 100%; z-index:0;} .people-list li .item .num i{ font-style: normal; position: relative; z-index: 1;} .people-list li .item .tit{ margin-top: 20px; font-size: 18px; color: #111111; } .people-list li .item .tit span{ margin-left: 10px; color: #a7a7a7; font-size: 16px; } .people-list li .item .des{ margin-top: 15px; line-height: 24px; min-height: 170px; } .people-list li .item:hover{ background: #ac0807;} .people-list li .item:hover .num{ background: #FFFFFF; color: #ac0807;} .people-list li .item:hover .num:after{ background: #FFFFFF;} .people-list li .item:hover .tit{ color: #FFFFFF;} .people-list li .item:hover .tit span{ color: #FFFFFF;} .people-list li .item:hover .des{ color: #FFFFFF;} .people-list .text{ margin-top: 25px; color: #333333; line-height: 30px; } @media (max-width: 1560px){ /* ========== */ /* = QUALITY = */ /* ========== */ .quality .box{ width: 260px; padding: 15px 30px 15px 15px;} .quality .box .tit{ font-size: 14px;} .quality .box .text{ font-size: 12px;} .quality .box:nth-child(2n){ padding: 15px 15px 15px 30px;} /* ========== */ /* = PROCESS = */ /* ========== */ .process-content .right{ padding: 0 4%;} .process-content .right li{ width: 49%; margin-right:2%;} .process-content .right li span{ width: 60px; margin-top: -33px;} .process-content .right li p{ margin-left: 30px; padding-left:40px; font-size: 14px;} /* ========== */ /* = PEOPLE = */ /* ========== */ .people-list li .item{ padding:40px;} } @media (max-width: 1240px){ /* ========== */ /* = PROCESS = */ /* ========== */ .process-box .text p{ padding-top: 50px; line-height: 22px; font-size: 13px;} .process-box:nth-child(2n) .text p{ padding-bottom: 40px;} .process-content .right{ padding: 0 20px;} .process-content .right li{ padding: 12px 0;} .process-content .right li p{ font-size: 12px;} /* ========== */ /* = DATABASE = */ /* ========== */ .database-list li .text .con{ line-height: 24px; font-size:13px;} /* ========== */ /* = PEOPLE = */ /* ========== */ .people-box .text .des{ font-size: 12px; line-height: 24px;} } @media (max-width: 999px){ /* ========== */ /* = QUALITY = */ /* ========== */ .quality { padding:50px 0;} .quality .bg{ padding:40px 15px;} .quality .bg:after{ display: none;} .quality .des{ margin-top: 30px;padding-left:30px!important;} .quality .content{ margin-top: 0; } .quality .img{ display: none;} .quality .box{ margin-top: 30px; position: relative; width: 100%; } .quality .box .theme{ display:block;} .quality .box1{ top:auto; left:auto;} .quality .box2{ top:auto; right: auto;} .quality .box3{ left:auto; top:auto;} .quality .box4{ right:auto; top:auto;} /* ========== */ /* = PROCESS = */ /* ========== */ .process{ padding: 50px 0;} .process-box:before{ display: none;} .process-box .text{ width:100%; position: relative; top:auto; left:auto; right:auto; padding: 20px;} .process-box .text p{ padding:0;} .process-box .text p:before{ display: none;} .process-box .img{ width: 100%;} .process-box:nth-child(2n) .text{ padding: 20px;} .process-box:nth-child(2n) .text p{ padding-bottom:0;} .process-content{ margin-top: 50px; padding: 20px;} .process-content .img{ width: 100%; } .process-content .img .tip span{ margin-right: 0;} .process-content .right{ width: 100%; padding: 30px 20px;} .process-content .right li{ width: 100%; margin-right: 0;} /* ========== */ /* = PROCESS-DETAIL = */ /* ========== */ .process-detail{ padding:50px 0;} .process-detail .content{ padding:40px 20px;} .process-detail ul{ margin-top: 40px;} .process-detail ul:before{ display: none;} .process-detail li:first-child:before, .process-detail li:last-child:before{ display: none;} .process-detail li .cricle{ position: relative; top:auto; left:auto; margin:0 auto;} .process-detail li .num{ width: 100%; font-size:32px; position: relative; left:auto; top:auto; margin: 0; padding:0; text-align: center;} .process-detail li .text{ width: 100%; padding-left: 0;} .process-detail li .box{ margin-top: 30px; padding-left: 40px; } .process-detail li:nth-child(2n) .num{ padding-left: 0; text-align:center;} .process-detail li:nth-child(2n) .text{ padding-right: 0; } /* ========== */ /* = DATABASE = */ /* ========== */ .database{ padding:50px 0;} .database-box{ padding:40px 15px;} .database-box h2{ font-size: 16px;} .database-box ul{ margin-top: 40px;} .database-box li{ width: 100%; margin-right: 0; } .database-box li .tit{ padding: 30px 0; margin-bottom: 20px;} .database-box li .item{padding: 20px 0;} .database-list{ margin-top:50px; padding-bottom: 50px;} .database-list li .img{ width: 100%;} .database-list li .img span{ font-size: 18px;} .database-list li .text{ position:relative; top:auto; left:auto; width: 100%;} .database-list .p90{ padding: 0 15px;} /* ========== */ /* = TECHNOLOGY = */ /* ========== */ .technology{ padding: 50px 0; } .technology-tit{ padding-left:0; font-size: 20px;} .technology-box{ margin-top: 40px; position: relative;} .technology-box:before{display: none;} .technology-box .left{ width:100%; padding: 50px 20px;} .technology-box .right{ width:100%;} .technology-content{ margin-top: 50px; padding:40px 15px;} .technology-content .technology-h2{font-size:17px; } .technology-content li{ padding:20px 35px; font-size: 14px;} .technology-content li span:before{ left:-15px; } /* ========== */ /* = PEOPLE = */ /* ========== */ .people{ padding:50px 0;} .people-box .text{ position: relative; top:auto; left:auto; width: 100%; padding:30px 20px;} .people-box .img{ width: 100%;} .people-list{ padding:30px 20px;} .people-tit span{ float: none;} .people-tit a{ float: none; margin: 20px auto 0;} .people-list li{ width: 100%;} .people-list li:nth-child(4), .people-list li:nth-child(5){ width: 100%;} .people-list li .item{ padding: 40px;} .people-list li .item .tit{ font-size: 17px; font-weight: bold;} .people-list li .item .tit span{ display: block; margin-top: 10px; font-size: 13px; margin-left: 0; font-weight: normal;} .people-list li .item .des{ font-size: 12px; line-height: 24px; min-height:auto;} } /* ========== */ /* = PRACTICE = */ /* ========== */ .practice{ padding: 90px 0;} .practice ul{ margin-bottom: 85px;} .practice-list li{ margin-bottom: 30px;} .practice-list .item{ display: block; border: 1px solid #FFFFFF; background: #FFFFFF; padding:40px 250px 40px 50px; position: relative;} .practice-list .item .img{ float:left; border: 1px solid #eeeeee; overflow:hidden;} .practice-list .item .img img{ width: 100%;} .practice-list .item .text{ margin-left: 320px; padding-top: 15px; padding-right:10%; position: relative;} .practice-list .item .text:after{ content: ""; position: absolute; top:15px; right:0; height:120px; border-right: 1px solid #ac0807; } .practice-list .item .text .tit{ font-size: 20px; line-height: 30px; color: #111111;} .practice-list .item .text .tip{ margin-top: 5px; color: #4a4a4a; line-height:24px;} .practice-list .item .text .des{ margin-top: 15px; line-height: 26px; height: 52px; overflow: hidden;} .practice-list .item .more{ position: absolute; right:108px; top:50%; margin-top: -18px; display: block; width: 36px; height: 36px; background:url(../images/practice_more.png);} .practice-list .item:hover{ border: 1px solid #ac0807;} .practice-list .item:hover .img img{ transform: scale(1.1); -webkit-transform: scale(1.1);} .practice-list .item:hover .tit{ color: #ac0807;} .practice-list .item:hover .tip{ color: #ac0807;} .practice-list .item:hover .more{ background:url(../images/practice_more_h.png);} /* ========== */ /* = VOICE = */ /* ========== */ .voice{ padding: 90px 0;} .voice ul{ margin-bottom:90px;} .voice li{ margin-bottom: 30px;} .voice .item{ display: block; border: 1px solid #FFFFFF; background: #FFFFFF; padding:40px 70px 40px 50px; position: relative;} .voice .item .img{ float:left; border: 1px solid #eeeeee; overflow: hidden;} .voice .item .img img{ width: 100%;} .voice .item .text{ margin-left: 380px; min-height: 152px; padding-left:9%; position: relative; padding-top: 25px;} .voice .item .text:before{ content: ""; position: absolute; left:0; top:50%; width: 1px; height: 120px; margin-top: -60px; background: #ac0807;} .voice .item .text:after{ content: ""; position: absolute; right:0; bottom: 40px; width: 36px; height: 29px; background: url(../images/ico_voice.png);} .voice .item .text .des{ line-height: 26px; min-height: 52px; padding-left: 20px; overflow: hidden; position:relative;} .voice .item .text .des:before{ content: ""; position: absolute; left:0; top:6px; width: 4px; height: 14px; background: #b40d0d;} .voice .item .text>span{ margin-top: 20px; display: block; padding-left: 20px; color: #333333; font-size: 16px;} .voice .item:hover{ border: 1px solid #ac0807;} .voice .item:hover .img img{ transform: scale(1.1); -webkit-transform: scale(1.1);} .voice .item:hover .text>span{ color: #ac0807;} @media (max-width: 1340px){ /* ========== */ /* = PRACTICE = */ /* ========== */ .practice-list .item{ padding-right: 150px;} .practice-list .item .more{ right:60px;} .practice-list .item .text{ padding-right: 7%;} /* ========== */ /* = VOICE = */ /* ========== */ .voice .item .text{ margin-left: 340px; padding-left: 7%;} } @media (max-width: 999px){ /* ========== */ /* = PRACTICE = */ /* ========== */ .practice{ padding: 50px 0;} .practice ul{ margin-bottom: 50px;} .practice-list .item{ padding: 15px; } .practice-list .item .img{ width: 120px;} .practice-list .item .text{ margin-left: 135px; padding-right: 0; padding-top: 0;} .practice-list .item .text:after{display: none; } .practice-list .item .text .tit{ font-size: 14px; line-height: 24px;} .practice-list .item .text .tip{ display: none;} .practice-list .item .text .des{ margin-top: 5px; font-size: 12px; line-height: 18px; height:36px;} .practice-list .item .more{display: none;} /* ========== */ /* = VOICE = */ /* ========== */ .voice{ padding: 50px 0;} .voice ul{ margin-bottom:50px;} .voice .item{ padding:20px;} .voice .item .img{ float: none; width:100%;} .voice .item .text{ margin-left: 0; padding:20px 0 0 0;} .voice .item .text:before, .voice .item .text:after{ display: none;} .voice .item .text .des{ min-height: 78px;} } /* ========== */ /* = TALENTS = */ /* ========== */ .talents{ padding: 96px 0 118px;} .talents .bg{ background: #FFFFFF; padding: 85px 90px 100px; border-bottom: 5px solid #9c0707;} .talents .theme{ color: #333333; font-size: 24px; font-weight: bold; } .talents .des{ margin-top: 35px; color: #333333; line-height: 30px; } .talents .red{ color: #ac0807;} .talents .blue{ color: #0d4ba8;} .talents .link{ display:inline-block;} .talents .link i{ margin:0 10px; display: inline-block; vertical-align: middle; font-size: 12px; font-style: normal; width: 83px; height: 18px; line-height: 18px; padding-left:18px; background: url(../images/ico_service_case.png);color: #FFFFFF;} .talents-abc li{ margin-top: 55px; float: left; width: 31.3333333%; margin-right:3%;} .talents-abc li a{ display: block; position: relative;} .talents-abc li img{ width: 100%;} .talents-abc li .cricle{ position: absolute; width: 172px; height: 172px; top:50%; left:50%;margin-top: -86px; margin-left: -86px; border-radius: 100%; border: 10px solid rgba(190,7,7,.3); } .talents-abc li .cricle div{ width: 152px; height: 152px; line-height: 152px; text-align: center; color: #FFFFFF; border-radius: 100%; background:rgba(190,7,7,1); font-size: 13px;} .talents-abc li .cricle div span{ font-size:40px; font-weight: bold;} .talents-abc li .tip{ display: none; position:absolute; top:0; left:0; width: 100%; height: 100%; background: rgba(0,0,0,.7); color: #FFFFFF; padding: 0 5%;} .talents-abc li .con{ display: inline-block; width: 100%; vertical-align: middle;} .talents-abc li .con+i{ display: inline-block; vertical-align: middle; height: 100%;} .talents-abc li .tit{ font-size: 18px; font-weight: bold; margin-bottom:5px;} .talents-abc li p{ margin-top: 10px; font-size: 12px; line-height: 20px; position: relative; padding-left: 25px;} .talents-abc li p:before{ content: ""; position: absolute; top:7px; left:0; width: 8px; height: 8px; background: #ac0807; border-radius: 100%; } .talents-abc li:nth-child(3n){ margin-right: 0;} .talents-abc li a:hover .cricle{ display: none;} .talents-abc li a:hover .tip{ display: block;} /* ========== */ /* = TALENTS-LIST = */ /* ========== */ .talents-list{ padding: 95px 0 110px;} .talents-list ul{ margin-bottom: 95px;} .talents-item{ margin-top:35px; background: #FFFFFF; padding: 70px 90px;} .talents-item .img{ float:left; width: 200px; } .talents-item .img img{ width: 100%;} .talents-item .img a{ margin-top: 20px; display: block; width: 100%; padding:10px; text-align: center; background: #ab0808; font-size: 16px; color: #FFFFFF;} .talents-item .img a i{ display: inline-block; padding-left: 35px; line-height: 30px; font-style: normal; background: url(../images/ico_home_zx.png) no-repeat left;} .talents-item .text{ margin-left: 280px;} .talents-item .theme span{ margin-right: 10px; font-size: 20px; color: #333333; font-weight:bold;} .talents-item .tip{ margin-top: 10px; padding: 10px 0; border-top: 1px dashed #EEEEEE; border-bottom: 1px dashed #EEEEEE;} .talents-item .tip span{ display: inline-block; margin-right:40px; line-height:26px; padding-left:32px;} .talents-item .tip span:nth-child(1){ background: url(../images/ico_talents_01.png) no-repeat left;} .talents-item .tip span:nth-child(2){ background: url(../images/ico_talents_02.png) no-repeat left;} .talents-item .tip span:nth-child(3){ background: url(../images/ico_talents_03.png) no-repeat left;} .talents-item .tip span:nth-child(4){ background: url(../images/ico_talents_04.png) no-repeat left;} .talents-item .des{ margin-top: 30px;} .talents-item .des .tit{ margin-bottom: 20px; } .talents-item .des .tit span{ font-size: 20px; color: #333333; font-weight: bold;} .talents-item .des p{ position: relative; line-height: 30px; padding-left:12px;} .talents-item .des p:before{ content: ""; position: absolute; top:13px; left:0; width: 4px; height:4px; border-radius: 100%; background: #ab0808;} @media (max-width:999px) { /* ========== */ /* = TALENTS = */ /* ========== */ .talents{ padding:50px 0;} .talents .bg{ padding: 40px 15px;} .talents .theme{ font-size: 18px; } .talents-abc li{ width: 100%; font-size: 0.3rem} .talents-abc li .cricle div span{ font-size: 0.72rem;} .talents-abc li a:hover .cricle{ display: block;} .talents-abc li a:hover .tip{ display: none;} /* ========== */ /* = TALENTS-LIST = */ /* ========== */ .talents-list{ padding: 50px 0;} .talents-list ul{ margin-bottom: 50px;} .talents-item{ padding:15px;} .talents-item .img{ float:none; width: 100%;} .talents-item .text{ margin-left:0; margin-top: 25px;} .talents-item .tip span{ display: block; margin-right:0;} } /* ========== */ /* = NEWS = */ /* ========== */ .news{ padding: 72px 0 95px;} .news-list ul{ margin:0 -18px 170px; position: relative;} .news-list ul:before{ content: ""; position: absolute; z-index: 0; top:12%; right:-5%; height:107%; width:200%; background:#FFFFFF; -o-box-shadow:0 0 20px rgba(0,0,0,.02); -ms-box-shadow:0 0 20px rgba(0,0,.02); -moz-box-shadow:0 0 20px rgba(0,0,0,.02); -webkit-box-shadow:0 0 20px rgba(0,0,0,.02); box-shadow:0 0 20px rgba(0,0,0,.02);} .news-list li{ position: relative; z-index: 1; float: left; width: 33.33333333%; padding: 0 18px;} .news-list ul:nth-child(2n):before{ right:auto; left:-5%; } .news-list li a{ display: block;} .news-list li .img{ position: relative; overflow: hidden;} .news-list li .img:after{ display: none; content:""; position: absolute; top:0; left:0; width: 100%; height: 100%; border: 5px solid #a31818;} .news-list li span{ margin-top: 30px; display: block; font-size: 18px; color: #333333;min-height: 75px;} .news-list li p{ margin-top: 10px; line-height: 24px; height: 48px; overflow:hidden; color: #999999;} .news-list li i{ display: block; margin-top: 25px; line-height: 24px; font-style: normal; color: #be0000; font-weight: bold; padding-bottom: 30px; border-bottom:2px solid #eeeeee; position: relative;} .news-list li i em{ display: none; position: absolute;top:0; right:0; font-size: 20px; font-weight: bold;} .news-list li a:hover .img:after{ display: block;} .news-list li a:hover .img img{ transform: scale(1.1); -webkit-transform: scale(1.1);} .news-list li a:hover i em{ display: block;} .news-list li a:hover i{ border-bottom:2px solid #be0000;} /* ========== */ /* = NEWS-DETAIL = */ /* ========== */ .news-detail{ padding:90px 0;} .news-detail .content{ padding: 85px 90px; background: #FFFFFF;} .news-detail .title{ color: #333333; font-size: 24px; line-height: 32px; text-align: center;} .article-come{ line-height:26px; margin-top:15px; text-align: center; color: #999999;} .article-come span{ margin:0 20px; padding-left: 28px; display: inline-block; vertical-align: middle; position: relative;} .article-come .bdsharebuttonbox{ display:inline-block; vertical-align: middle; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;} .article-come .span-date{ background: url(../images/span_time.png) no-repeat left;} .article-come .span-num{ background: url(../images/span_num.png) no-repeat left;} .article-come .span-share{ padding-left:0;} .news-article{ margin-top: 15px; padding:45px 0 60px; border-top: 1px dashed #eeeeee; line-height: 30px; } .news-article p{ margin-top: 20px;} .news-article table{ margin:20px 0; } .news-article table td{ padding: 10px 20px; border:1px solid #333;} .news-article table p{ margin-top: 0; } .return{ text-align: center;} .return a{ display: inline-block; width: 230px; height: 60px; line-height: 60px; background: #ab0808;color: #FFFFFF; } .return a span{ display: inline-block; padding-left: 38px; background: url(../images/ico_return.png) no-repeat left;} .return a:hover{ background: #c30202; } .img-inline { text-align: center; } .img-inline img{ display: inline-block; } .flip{ margin-top: 65px; border-top: 1px dashed #eeeeee; padding-top: 30px; } .flip a{ max-width:48%; display: inline-block; position: relative; line-height:34px; color:#777777;} .flip .prev{ float: left; padding-left:22px; background: url(../images/flip_prev.png) left no-repeat;} .flip .next{ float: right; padding-right:22px; background: url(../images/flip_next.png) right no-repeat;} .flip a:hover{ color: #ab0808;} .flip .prev:hover{ background: url(../images/flip_prevh.png) left no-repeat;} .flip .next:hover{ background: url(../images/flip_nexth.png) right no-repeat;} /* ========== */ /* = FAQ = */ /* ========== */ .faq{ padding: 60px 0 100px;} .faq ul{ margin-bottom: 85px;} .faq li{ margin-bottom: 35px; background: #FFFFFF; padding: 45px 70px 45px 170px; position: relative;} .faq li:before{ content: ""; position: absolute; top:50%; left:60px; margin-top:-14px; width: 30px; height: 27px; background: url(../images/ico_faq.png);} .faq li .ques{ font-size: 16px; color: #333333; line-height: 26px; padding-left: 20px; position: relative;} .faq li .ques:before{ content: ""; position: absolute; top:50%; margin-top: -7px; left:0; width: 4px; height: 14px; background: #b40d0d;} .faq li .ans{ margin-top: 25px; line-height: 26px; min-height: 52px; padding-left: 20px; } @media (max-width:999px) { /* ========== */ /* = NEWS = */ /* ========== */ .news{ padding: 50px 0;} .news-list ul{ margin: 0;} .news-list ul:before{ display: none;} .news-list li{ width: 100%; margin-bottom: 30px; padding: 0; background: #FFFFFF; padding:20px;} .news-list li i{ padding-bottom: 0; border-bottom: none;} /* ========== */ /* = NEWS-DETAIL = */ /* ========== */ .news-detail{ padding:50px 0;} .news-detail .content{ padding:30px 15px;} .news-detail .title{ font-size: 18px; line-height:28px; } .article-come span{ margin: 0 10px;} .article-come .span-share{ display: block;} .news-article{ padding: 30px 0;} .return a{ width: 170px; height:50px; line-height: 50px;} .flip{ margin-top:40px; } /* ========== */ /* = FAQ = */ /* ========== */ .faq{ padding: 50px 0;} .faq ul{ margin-bottom:50px;} .faq li{ padding: 20px;} .faq li:before{display: none;} .faq li .ans{ margin-top: 10px;} } /* ========== */ /* = ABOUT = */ /* ========== */ .about{ padding: 70px 0 110px;} .about-tit{ font-size: 24px; color: #111111; font-weight: bold;} .about-box{ position:relative;} .about-box:before{ content: ""; position: absolute; bottom: -60px; right:65%; width: 100%; height: 100%; background: #b20000;} .about-box .bg{ position: relative; z-index: 1; background: #FFFFFF; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between;} .about-box .img{ width: 29%;} .about-box .img img{ width: 100%;} .about-box .text{ width: 71%; padding: 30px 8%;} .about-box .text h2{ padding-bottom: 25px; position: relative; font-size: 24px; color: #333333; font-weight: bold; } .about-box .text h2:after{ content: ""; position: absolute; bottom:0; left:0; width: 45px; height: 4px; background: #0d4ba8;} .about-box .text .des{ margin-top: 35px; color: #444444; line-height: 26px; } .about-box .text .des .red{ color: #b20000; text-decoration: underline !important; font-weight: bold;} .about-history{ margin-top: 140px; padding: 70px 90px 95px; background: #FFFFFF; border-bottom:5px solid #ac0807;} .history-slick-nav{ margin-top: 35px; padding:0 50px;} .history-slick-nav .slick-prev, .history-slick-nav .slick-next{ top:5px; margin: 0; width: 36px; height: 36px;} .history-slick-nav .slick-prev{ background-image: url(../images/history_prev.png);} .history-slick-nav .slick-prev:hover{ background-image: url(../images/history_prevh.png);} .history-slick-nav .slick-next{ background-image: url(../images/history_next.png);} .history-slick-nav .slick-next:hover{ background-image: url(../images/history_nexth.png);} .history-slick-nav .slick-slide{ height: 230px; position: relative;text-align: center; } .history-slick-nav .slick-slide span{ position:absolute; width: 100%; bottom: 0; left:0; display: block; height: 230px; color: #333333; padding-top:130px; line-height: 36px; font-size: 18px;} .history-slick-nav .slick-slide span:after{ content: ""; position: absolute; top:25px; left:0; width: 100%; border-bottom: 1px dashed #333333;} .history-slick-nav .slick-slide span:before{ content: ""; position: absolute; z-index: 1; top:19px; left:50%; margin-left: -6px; width: 12px; height:12px; background: #333333; border-radius: 100%;} .history-slick-nav .slick-slide span em{ font-style: normal;} .history-slick-nav .slick-slide span i{ position: absolute; left:0; bottom: 0; width: 1px; height:9px; top:16px; background: #333333;} .history-slick-nav .slick-slide span i:nth-child(1){ left:10%; } .history-slick-nav .slick-slide span i:nth-child(2){ left:20%;} .history-slick-nav .slick-slide span i:nth-child(3){ left:30%;} .history-slick-nav .slick-slide span i:nth-child(4){ left:40%;} .history-slick-nav .slick-slide span i:nth-child(5){ left:50%; top:0; height:24px;} .history-slick-nav .slick-slide span i:nth-child(6){ left:60%;} .history-slick-nav .slick-slide span i:nth-child(7){ left:70%;} .history-slick-nav .slick-slide span i:nth-child(8){ left:80%;} .history-slick-nav .slick-slide span i:nth-child(9){ left:90%;} .history-slick-nav .slick-slide span i:nth-child(10){ left:100%;} .history-slick-nav .slick-slide .img{ border: 2px solid #dddddd; margin:50px auto 0; display:block; border-radius: 100%; width: 60px; height: 60px; background-size: cover; background-position: center center;} .history-slick-nav .slick-current span{ color: #b20000; font-size:32px; } .history-slick-nav .slick-current span em{ font-size:18px;} .history-slick-nav .slick-current span:before{ background: #b20000;} .history-slick-nav .slick-current .item{ display: block;} .history-slick-nav .slick-current .img{ border: 2px solid #b20000;} .history-slick-for{ margin: 60px auto; max-width: 1000px;} .history-slick-for .box .date{ float: left; font-size:80px; line-height: 80px; color: #b20000; font-weight:300;} .history-slick-for .box .text{ margin-left: 260px; padding-top:20px; font-size: 18px; line-height: 34px; color: #555555;} .about-translate{ margin-top: 105px; padding: 110px 0 100px; background-size: cover; background-image: url(../images/about_translate_bg.jpg);} .about-translate .content{ max-width: 1100px; margin: 0 auto;} .about-translate .bg{ margin-top: 40px; background: rgba(255,255,255,.95);} .about-translate li{ border-bottom: 1px solid #EEEEEE; padding: 45px 0;} .about-translate li:last-child{ border-bottom: none;} .about-translate li .num{ float: left; width: 40%; display:block; text-align: center; font-size: 36px; color: #b20000;} .about-translate li .con{ margin-left: 40%; padding-right: 13%; line-height: 28px; color: #333333; } .about-translate li .ques{ padding-left: 28px; background: url(../images/ico_ques.png) left 5px no-repeat;} .about-translate li .ans{ padding-left: 28px; background: url(../images/ico_ans.png) left 5px no-repeat;} .about-translate li .red{ color: #b20606;} .about-translate li:hover{ background: #b20606; } .about-translate li:hover .num{ color: #FFFFFF;} .about-translate li:hover .con{color: #FFFFFF;} .about-translate li:hover .ques{background: url(../images/ico_ques_white.png) left 5px no-repeat;} .about-translate li:hover .ans{background: url(../images/ico_ans_white.png) left 5px no-repeat;} .about-translate li:hover .red{ color: #FFFFFF;} .about-purpose{ margin-top: 110px; padding: 70px 90px; background: #FFFFFF;} .about-purpose-box{ margin:0 -18px 60px;} .about-purpose-box li{ margin-top: 35px; float: left; width: 33.333333333%; padding: 0 18px; text-align: center;} .about-purpose-box .item{ position: relative;} .about-purpose-box .item img{ width: 100%;} .about-purpose-box .item .text{ background: #f7f7f7; text-align: center; font-size: 20px; line-height: 96px; color: #333333; } .about-purpose-box .item:hover .pop{ display: block; } .about-purpose-box .item .pop{ display: none; position: absolute; width: 100%; height: 100%; top:0; left:0; background: #b20000; color: #FFFFFF;} .about-purpose-box .item .pop .con{ padding: 0 20px; display: inline-block; vertical-align: middle;} .about-purpose-box .item .pop .con+i{ display: inline-block; vertical-align: middle; height: 100%;} .about-purpose-box .item .pop span{ margin-bottom: 20px; padding-bottom: 35px; display: block; font-size: 20px; position: relative;} .about-purpose-box .item .pop span:after{ content: ""; position: absolute; bottom: 0; left:50%; width: 1px; height: 24px; background: #ffffff;} .about-purpose-box .item .pop p{ line-height: 26px;} .about-purpose-ul{ border-top: 1px dashed #EEEEEE; padding-top: 45px; margin:0 -15px;} .about-purpose-ul li{ float: left; width:50%; padding:15px; } .about-purpose-ul li:nth-child(2n){ margin-right: 0;} .about-purpose-ul li:nth-child(2n+1){ clear: both;} .about-purpose-ul .item{ display: block; background: #f4f4f4; padding: 45px 50px; min-height: 410px; color: #333333;} .about-purpose-ul li:nth-child(3) .item, .about-purpose-ul li:nth-child(4) .item{ min-height:480px;} .about-purpose-ul .item .num{ display: inline-block; width: 60px; height: 60px; text-align: center; line-height: 60px; text-align: center; font-size: 26px; font-weight:bold; background: #ac0807; color: #FFFFFF; border-radius: 100%; position: relative;} .about-purpose-ul .item .num:after{ content: ""; position: absolute; top:0; left:10px; width: 100%; height: 100%; background: #ac0807; opacity: .2; border-radius: 100%; z-index:0;} .about-purpose-ul .item .num i{ font-style: normal; position: relative; z-index: 1;} .about-purpose-ul .item .tit{ margin-top: 25px; font-size: 18px; } .about-purpose-ul .item .tip{ margin-top:20px; line-height: 26px;} .about-purpose-ul .item .des{ margin-top: 20px; line-height: 26px;} .about-purpose-ul .item .red{ display:inline-block; font-weight: bold; color: #b20000;} .about .about-des{ margin-top:30px; line-height: 26px;} /* ========== */ /* = FEATURE = */ /* ========== */ .feature{ padding: 95px 0; position: relative;} .feature:after{ content: ""; position: absolute; top:47px; left:0; width: 30%; height: 480px; background: #b20000;} .feature .bg{ padding: 60px 90px 80px; background: #FFFFFF; position: relative; z-index:1;} .feature-box .left{ float:left; width: 45%; } .feature-box .left h2{ padding-bottom: 25px; position: relative; font-size: 24px; color: #333333; font-weight: bold; } .feature-box .left h2:after{ content: ""; position: absolute; bottom:0; left:0; width: 45px; height: 4px; background: #0d4ba8;} .feature-box .left .des{ margin-top: 35px; line-height: 26px;} .feature-box .right{ float: right; width:52%; background:#f0f0f0; padding:75px 50px 75px 60px; background-image: url(../images/feature_box_bg.jpg); background-size: cover; } .feature-box .right .tit{ font-size: 20px; line-height: 34px; color: #ffffff; letter-spacing: 1px;} .feature-box .right .des{ margin-top:30px; text-align: right; letter-spacing: 1px;color: #ffffff; opacity: .7} .feature-box .right .tip{ margin-top: 20px; color: #333333; max-width: 380px; font-size: 16px; line-height: 34px; letter-spacing: 1px} .feature-box .right .tip span{ float: left; width:40%;} .feature-box .right .tip span:nth-child(2n){ width:60%;} .feature-ul{ margin-top: 68px; background: #f4f4f4;} .feature-ul li{ float: left; width: 16.6666667%; text-align: center; padding: 25px 0; cursor: pointer;} .feature-ul li .img{ width: 40px; margin: 0 auto; position: relative;} .feature-ul li .img .default{ position: absolute; top:0; left:0;} .feature-ul li .img .hover{ transform: rotateY(180deg); -webkit-transform: rotateY(180deg);opacity: 0;} .feature-ul li p{ margin-top: 12px; font-size: 18px; color: #333333; font-weight: bold;} .feature-ul li.active .img .default{ transform: rotateY(180deg); -webkit-transform: rotateY(180deg); opacity: 0;} .feature-ul li.active .img .hover{ transform: rotateY(0deg); -webkit-transform: rotateY(0deg);opacity: 1;} .feature-ul li.active{ background: #b20000;} .feature-ul li.active p{ color: #FFFFFF;} .feature .js-tab-box .js-tab-con{ display: none;} .feature .js-tab-box .js-tab-con.active{ display: block;} .feature-text{ margin-top: 65px; color: #333333; } .feature-text div{ margin-bottom: 30px; font-size: 17px; line-height:28px;} .feature-text p{ line-height: 30px;} .feature-text p b{ color: #b20000;} .feature-text p span{ text-decoration: underline !important;} /* ========== */ /* = HONOR = */ /* ========== */ .honor{ padding: 95px 0 105px;} .honor .bg{ padding: 65px 90px; background: #FFFFFF;} .honor-item{ margin-bottom: 95px;} .honor-item:last-child{ margin-bottom: 0;} .honor-item .img{ float: left; width: 47%; max-width: 570px; border: 1px solid #eeeeee;} .honor-item .img .slick{ width: 100%;} .honor-item .img img{ width: 100%;} .honor-item .text{ float: right; width: 47%; max-width: 570px; padding:2% 0; } .honor-item .text .tit{ display: inline-block; line-height: 50px; font-size: 24px; color: #333333; font-weight: bold;} .honor-item .text .tit span{ font-weight: normal; color: #b30d0d; font-size: 38px;} .honor-item .text .des{ margin-top: 30px; } .honor-item .text .des p{ line-height:36px; background: url(../images/ico_right2.png) left 10px no-repeat; padding-left: 40px; color: #333333;} .honor-item .text .des .button{ background: #be0000; color: #fff; line-height: 30px; height: 30px; margin-top: 15px; width: 106px; text-align: center; display: inline-block; } .honor-item:nth-child(2n){ border-bottom:1px solid #b30d0d ;} .honor-item:nth-child(2n) .img{ float: right; border: 10px solid #b30d0d;} .honor-item:nth-child(2n) .text{ float: left;} .honor-item:nth-child(2n) .text .tit{ padding: 20px 40px; background: #b30d0d; color: #FFFFFF;} .honor-item:nth-child(2n) .text .tit span{ color: #FFFFFF;} .honor-item:nth-child(2n) .text .des{ padding-left: 40px;} /* ========== */ /* = team = */ /* ========== */ .team{ padding: 90px 0 105px;} .team-box{ position: relative;} .team-box:after, .team-box:before{ content: ""; position: absolute; z-index: 0; height: 400px; background: #ac0807;} .team-box:after{ bottom:-50px; right:75%; width: 100%;} .team-box:before{ top:-50px; left:60%; width: 100%;} .team-box .bg{ padding: 80px 90px 90px; background: #FFFFFF; position: relative; z-index: 1;} .team-box .tit{ padding-bottom: 25px; position: relative; font-size: 26px; color: #333333; font-weight: bold; } .team-box .tit:after{ content: ""; position: absolute; bottom:0; left:0; width: 45px; height: 4px; background: #0d4ba8;} .team-box .des{ margin-top:30px; line-height: 30px; color: #333333; } .team-box .des span{ color: #ac0807; font-weight: bold;} .team-box .content{ margin-top: 35px;} .team-box .left{ margin-top: 20px; float:left; width: 45%;} .team-box .left img{ width: 100%;} .team-box .right{ float: right; width: 48%; position: relative;} .team-box .item{ margin-top: 22px; float: left; border-radius: 5px; width: 48%; margin-right: 4%; height: 180px; background:#f8f8f8; color:#333333; } .team-box .item:nth-child(2n){ margin-right:0;} .team-box .item:nth-child(1), .team-box .item:nth-child(2){ padding-bottom: 35px;} .team-box .item .con{ display: inline-block; vertical-align: middle; width: 100%; text-align: center;} .team-box .item .con+i{ display: inline-block; height: 100%; vertical-align: middle;} .team-box .item .ico span{ margin-left: 5px; font-weight: bold; display: inline-block; vertical-align: middle; font-size: 15px;} .team-box .item .ico img{ display: inline-block; vertical-align: middle;} .team-box .item .text{ margin-top:5px; line-height: 24px;} .team-box .item .text span{ position: relative; margin: 0 5px; min-width: 80px; display: inline-block; padding-left: 12px; text-align: left;} .team-box .item:nth-child(2) .text p:nth-child(2) span{ min-width: 170px;} .team-box .item .text span:before{ content: ""; position: absolute; top:50%; margin-top: -3px; left:0; width: 6px; height: 6px; background: #b40d0d; border-radius: 100%;} .team-box .item:nth-child(5){ position: absolute; top:50%; left:50%; margin-top: -60px; margin-left: -105px; width: 210px; height: 120px; background: #ac0807; color: #FFFFFF;} .team-box .item:nth-child(5) .ico span{ font-size: 16px;} .team-box .item:nth-child(5) .text span:before{ background: #FFFFFF;} .team-box .box{ margin-top: 65px; background: #fdfafa; border:1px dashed #ac0807; padding: 45px;} .team-box .box h2{ font-size: 20px; color: #ab0807; font-weight: bold; } .team-box .box ul{ margin-top: 25px; color: #333333;} .team-box .box li{ float: left; width: 48%; margin-right:4%; line-height: 32px; position: relative; position: relative; padding-left:140px;} .team-box .box li:nth-child(2n){ margin-right: 0; padding-left: 120px;} .team-box .box li:nth-child(2n+1){ clear: both;} .team-box .box li:nth-child(2){ padding-left: 150px; } .team-box .box li:nth-child(3){ padding-left: 185px; } .team-box .box li:nth-child(4){ padding-left: 190px; } .team-box .box li span{ position: absolute; top:0; left:0; display: inline-block; font-weight: bold; padding-left: 24px;} .team-box .box li span i{ position: absolute; top:8px; left:0; border-radius: 100%; width: 14px; height: 14px; border: 1px solid #0d4ba8;} .team-box .box li span i:before{ content: ""; position: absolute; top:3px; left:3px; width: 6px; height: 6px; border-radius: 100%; background: #0d4ba8;} .team-production{ margin-top: 135px; padding: 80px 90px 70px; background: #FFFFFF; border-bottom: 5px solid #ac0807;} .team-production .tit{ font-size: 22px; color: #333333; font-weight: bold;} .team-production .des{ margin-top: 20px; line-height: 30px; color: #333333; } .team-production .des span{ color: #ac0807; font-weight: bold;} .team-production .content{ margin-top: 45px; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #ac0807;} .team-production .left{ width: 43%;} .team-production .left .slick-slide{ position: relative;} .team-production .left .slick-slide img{ width: 100%;} .team-production .left .slick-slide p{ position: absolute; width: 100%; padding: 20px 100px 20px 30px; font-size: 16px; color: #FFFFFF; bottom: 0; left:0; background: rgba(0,0,0,.6);} .team-production .left .slick-dots{ padding-right: 40px; bottom: 25px; text-align: right;} .team-production .right{ width:57%; padding: 0 2%;} .team-production .right li{ float:left; width: 49%; margin-right:2%; padding:10px 0; position: relative;} .team-production .right li:nth-child(2n){ margin-right: 0;} .team-production .right li span{ position: absolute; top:50%; margin-top:-32px; left:0; display: block; background: #FFFFFF; border:2px solid #ac0807; border-radius: 100%;} .team-production .right li p{ margin-left:55px; background: #ffffff; padding: 10px; color: #ac0807; font-size: 12px; line-height: 26px; text-align: center;} .team-production .right li:hover img{ animation: tada 1s; -webkit-animation: tada 1s;} /* = JOIN = */ /* ========== */ .join{ padding: 90px 0 95px;} .join-box{ position: relative; background: #FFFFFF; padding: 75px 0; border-bottom: 4px solid #b40d0d;} .join-box:after{ content: ""; position: absolute; z-index: 0; right:0; bottom: 0; width: 200%; height: 100%; background: #FFFFFF;} .join-box:before{ content: ""; position: absolute; z-index:0; left:70%; top:-5%; height:45%; width: 100%; background: #b40d0d;} .join-box .content{ position: relative; z-index: 1;} .join-box .text{ float: left; width:58%; padding: 0 90px;} .join-box .text .tit{ padding-bottom: 35px; position: relative; font-size: 26px; color: #333333; font-weight: bold; } .join-box .text .tit:after{ content: ""; position: absolute; bottom: 0; left:0; width: 55px; height: 4px; background: #0d4ba8;} .join-box .text .des{ margin-top: 40px; max-width: 670px; line-height: 30px; } .join-box .text .des span{ font-weight: bold; color: #ac0807;} .join-box .img{ float: right; width: 42%;} .join-scroll{ margin-top: 55px; padding: 0 90px; position: relative; z-index: 1;} .join-scroll .slick{ border-top:1px solid #eeeeee; padding: 50px 0;} .join-scroll .slick-slide{ padding: 0 6px;} .join-scroll .slick-next, .join-scroll .slick-prev{ width: 36px; height: 36px;} .join-scroll .slick-prev{ left:-44px; background-image: url(../images/history_prev.png);} .join-scroll .slick-prev:hover{ background-image: url(../images/history_prevh.png);} .join-scroll .slick-next{ right:-44px; background-image: url(../images/history_next.png);} .join-scroll .slick-next:hover{ background-image: url(../images/history_nexth.png);} .job-list{ margin-top: 80px; padding: 80px 90px 90px; background: #FFFFFF;} .job-list .des{ margin-top: 35px; line-height: 28px; color: #333333; font-size: 16px; } .job-list .js-tab-con{ display: none;} .job-list .js-tab-con.active{ display: block;} .job-list ul{ margin:55px -15px 0;} .job-list li{ float: left; width: 33.33333333%; padding: 15px;} .job-list li .item{ display: block; background: #f4f4f4; padding: 50px 60px; cursor: pointer;} .job-list li .item .num{ display: inline-block; width: 60px; height: 60px; text-align: center; line-height: 60px; text-align: center; font-size: 26px; font-weight:bold; background: #ac0807; color: #FFFFFF; border-radius: 100%; position: relative;} .job-list li .item .num:after{ content: ""; position: absolute; top:0; left:10px; width: 100%; height: 100%; background: #ac0807; opacity: .2; border-radius: 100%; z-index:0;} .job-list li .item .num i{ font-style: normal; position: relative; z-index: 1;} .job-list li .item .tit{ margin-top: 35px; font-size: 18px; color: #111111; font-weight: bold;} .job-list li .item p{ margin-top:20px; line-height: 26px; } .job-list li .item p span:nth-child(2){ margin-left: 20px;} .job-list li .item:hover{ background: #ac0807;} .job-list li .item:hover .num{ background: #FFFFFF; color: #ac0807;} .job-list li .item:hover .num:after{ background: #FFFFFF;} .job-list li .item:hover .tit{ color: #FFFFFF;} .job-list li .item:hover p{ color: #FFFFFF;} /* ========== */ /* = CONTACT = */ /* ========== */ .contact{ padding: 85px 0;} .contact .content{ padding: 60px 90px 85px; background: #FFFFFF;} .contact-tit{ padding-bottom: 35px; position: relative; font-size: 26px; color: #333333; font-weight: bold; } .contact-tit:after{ content: ""; position: absolute; bottom: 0; left:0; width: 55px; height: 4px; background: #b40d0d;} .contact-tit span{ font-size: 20px; margin-left: 20px; } .contact .des{ margin-top: 40px; line-height: 30px; } .contact .des span{ font-weight: bold; color: #b40d0d;} .contact-tab{ margin: 70px 0 45px; background: #f6f6f6; text-align: center;} .contact-tab span{ float: left; width: 25%; line-height: 60px; height: 60px; display: block; font-size: 18px; color: #333333; position: relative; cursor:pointer;} .contact-tab span:after{ content: ""; position: absolute; top:50%; left:0; width: 1px; height: 18px; background: #d2d2d2; margin-top: -9px;} .contact-tab span.active{ background: #ac0807; color: #FFFFFF; font-weight: bold;} .contact-tab span.active:after, .contact-tab span:nth-child(1):after{ display: none;} .contact .js-tab-con.active{ opacity: 1; height: auto;} .contact .js-tab-con{ opacity: 0; height: 0; overflow: hidden;} .contact-tabcon{ border: 1px solid #e4e4e4;} .contact-tabcon .box{ display: flex; flex-flow: wrap; align-items: center; justify-content: space-between;} .contact-tabcon .text{ width: 64%; padding:30px 5%;} .contact-tabcon .text h2{ font-size: 18px; color: #333333; font-weight: bold;} .contact-tabcon .text ul{ margin-top: 30px;} .contact-tabcon .text li{ margin-bottom: 15px; color: #333333; padding-left: 55px; line-height:32px; background-position:left 0px; background-repeat: no-repeat;} .contact-tabcon .text li a{ color: #333333;} .contact-tabcon .text li a:hover{ color: #ac0807;} .contact-tabcon .text li span{ font-weight: bold;} .contact-tabcon .text li:nth-child(1){ background-image: url(../images/ico_contact_01.png);} .contact-tabcon .text li:nth-child(2){ background-image: url(../images/ico_contact_02.png);} .contact-tabcon .text li:nth-child(3){ background-image: url(../images/ico_contact_03.png);} .contact-tabcon .text li:nth-child(4){ background-image: url(../images/ico_contact_04.png);} .contact-tabcon .img{ width: 36%;} .contact-tabcon .map-box{ margin-top: 35px; width: 100%; height:550px; position:relative;} .contact-tabcon .map-box img{ max-width:1000%;} .contact-tabcon .map-box .allmap{ width:100%; height: 100%; position: absolute; left: 0; top:0;} .contact-tabcon .map-box .anchorBL{ display: none; } .contact-tabcon .sale_video{ margin-top: 35px; } .contact-tabcon .sale_video .map { width:100%; height:550px;} @media (max-width:1540px) { /* ========== */ /* = ABOUT = */ /* ========== */ /* ========== */ /* = FEATURE = */ /* ========== */ .feature-box .right{ padding:50px 50px 55px 50px; } .feature-box .right .tip{ font-size: 14px;} /* ========== */ /* = team = */ /* ========== */ .team-box .item:nth-child(5){ height:100px; margin-top: -50px;} /* ========== */ /* = JOB = */ /* ========== */ .job-list li .item{ padding: 40px;} .job-list li .item p b:nth-child(2){ margin-left:10px;} } } @media (max-width:1360px) { /* ========== */ /* = ABOUT = */ /* ========== */ .about-box .text{ padding:20px 4%;} } @media (max-width:999px) { /* ========== */ /* = ABOUT = */ /* ========== */ .about{ padding:50px 0;} .about-tit{ font-size: 18px; } .about-box:before{ display: none;} .about-box .img{ width: 100%;} .about-box .text{ width: 100%; } .about-box .text h2{ font-size: 18px;} .about-history{ margin-top: 50px; padding:40px 15px;} .history-slick-for{ margin: 30px auto; } .history-slick-for .box .date{ float: none; font-size:22px; line-height: 22px; } .history-slick-for .box .text{ margin-left:0; font-size:14px; line-height:24px;} .about-translate{ margin-top: 50px; padding:40px 15px; background-position: top center;} .about-translate li{ padding:25px 0;} .about-translate li .num{ width:60px; font-size: 25px;} .about-translate li .con{ margin-left:60px; padding-right: 15px;} .about-purpose{ margin-top: 50px; padding:40px 15px;} .about-purpose-box li{ width:100%;} .about-purpose-box .item .text{ font-size: 16px; line-height:50px;} .about-purpose-ul li{ width: 100%; font-size: 0.28rem; line-height: 0.6rem;} .about-purpose-ul .item{ padding: 20px;min-height:0;} .about-purpose-ul li:nth-child(3) .item, .about-purpose-ul li:nth-child(4) .item{ min-height:0;} /* ========== */ /* = FEATURE = */ /* ========== */ .feature{ padding: 50px 0;} .feature:after{ display: none;} .feature .bg{ padding: 40px 15px;} .feature-box .left{ width: 100%;} .feature-box .left h2{ font-size: 18px;} .feature-box .right{ margin-top: 20px; width: 100%; padding: 20px;} .feature-box .right .tit{ font-size: 20px;} .feature-box .right .tip span{ width: 100%;} .feature-box .right .tip span:nth-child(2n){ width: 100%;} .feature-ul{ margin-top: 40px;} .feature-ul li{ width: 33.3333%; height: 110px; } .feature-ul li .img{ width: 30px;} .feature-ul li p{ font-size: 0.28rem; } .feature-text{ margin-top: 40px;} /* ========== */ /* = HONOR = */ /* ========== */ .honor{ padding: 50px 0;} .honor .bg{ padding:40px 15px;} .honor-item{ margin-bottom: 40px; border-bottom: 1px solid #b30d0d;} .honor-item .img{ width: 100%; max-width: 100%; border: 10px solid #b30d0d;} .honor-item .text{ width: 100%; max-width: 100%; padding: 30px 0;} .honor-item .text .tit{ font-size: 18px; line-height: 30px;} .honor-item .text .tit span{ font-size: 22px;} .honor-item .text .des{ margin-top: 20px;} .honor-item .text .des p{ font-size: 14px; line-height: 28px; background: url(../images/ico_right2.png) left 5px no-repeat; padding-left: 25px;} .honor-item:nth-child(2n) .text .tit{ padding:0; background: #FFFFFF; color: #333333;} .honor-item:nth-child(2n) .text .tit span{ color: #b30d0d;} .honor-item:nth-child(2n) .text .des{ padding-left: 0;} /* ========== */ /* = team = */ /* ========== */ .team{ padding:50px 0;} .team-box:after, .team-box:before{ display: none;} .team-box .bg{ padding: 30px 15px;} .team-box .tit{ font-size: 18px;} .team-box .left{ width: 100%; } .team-box .right{ width: 100%;} .team-box .item{ width: 100%; margin-right: 0; height:130px;} .team-box .item:nth-child(1), .team-box .item:nth-child(2){ padding-bottom:0;} .team-box .item:nth-child(5){ position: relative; top:auto; left:auto; width: 100%; margin:20px 0 0; height: 130px;} .team-box .box{ margin-top: 40px; padding: 20px 20px 0;} .team-box .box h2{ font-size:16px;} .team-box .box li{ width: 100%;padding-left: 0; padding-bottom: 20px; } .team-box .box li:nth-child(2n){ padding-left: 0; } .team-box .box li:nth-child(2){ padding-left: 0; } .team-box .box li:nth-child(3){ padding-left: 0; } .team-box .box li:nth-child(4){ padding-left: 0; } .team-box .box li span{ position: relative; display: block; top:auto; left:auto;} .team-production{ margin-top:40px; padding: 30px 15px; } .team-production .tit{ font-size: 18px; } .team-production .left{ width: 100%;} .team-production .right{ width: 100%; padding:30px;} .team-production .right li{ width: 100%; margin: 0;} /* ========== */ /* = JOIN = */ /* ========== */ .join{ padding: 50px 0;} .join-box{ padding:30px 20px; } .join-box:after, .join-box:before{display: none;} .join-box .text{ width: 100%; padding: 0;} .join-box .text .tit{ font-size:22px; padding-bottom: 25px;} .join-box .text .des{ margin-top: 30px;} .join-box .img{ margin-top: 30px; width: 100%; } .join-scroll{ padding: 0;} .join-scroll .slick-slide{ padding: 0 6px;} .job-list{ margin-top:40px; padding: 20px;} .job-list .des{ font-size: 14px;} .job-list ul{ margin-top: 20px;} .job-list li{ width: 100%;} .job-list li .item p span{ display: block;} .job-list li .item p span:nth-child(2){ margin-left:0px;} /* ========== */ /* = CONTACT = */ /* ========== */ .contact{ padding: 50px 0;} .contact .content{ padding:30px 20px;} .contact-tit{ padding-bottom: 25px; font-size: 22px;} .contact-tit span{ font-size: 16px; margin-left: 20px; } .contact-tab{ margin:50px 0; } .contact-tab span{ width: 33.333333333%; font-size: 14px; border: 1px solid #FFFFFF;} .contact-tab span:after{ display: none;} .contact-tabcon .text{ width: 100%; padding: 20px;} .contact-tabcon .img{ width: 100%;} .contact-tabcon .map-box{ height: 300px;} .contact-tabcon .sale_main .map { height: 300px;} } /* ========== */ /* = ONLINE = */ /* ========== */ .online{ padding: 70px 0 100px;} .online .bg{ background: #FFFFFF; padding:70px 90px;} .online .content{ max-width: 1000px; margin: 0 auto; font-size: 16px; color: #333333;} .online .content h2{ padding-bottom: 20px; border-bottom: 2px solid #ac0807; font-size: 22px; color: #ac0807; font-weight: bold;} .online .con{ margin:50px 0;} .online .con .left{ float: left; width: 45%;} .online .con .left .in{ margin-bottom: 30px; height:40px; position: relative; padding-left:85px; padding-right: 20px;} .online .con .left .in span{ position: absolute; top:0; left:0; line-height:40px; } .online .con .left .in i{ position: absolute; top:0; right:0; color: #ac0807; font-style: normal;} .online .con .left .in input{ width: 100%; height: 40px; padding:7px 10px; line-height:24px; border: 1px solid #EEEEEE;} .online .con .right{ float: right; width: 45%;} .online .con .right div{ font-weight: bold; margin-bottom: 25px; font-size: 18px;} .online .con .right p{ margin-bottom: 15px; line-height:30px;} .online .con .right p span{ width: 42%; display: inline-block; } .online .con .right p input{ margin-right: 10px; display: inline-block; vertical-align: middle; border: 1px solid #EEEEEE; border-radius: 0; width:16px; height: 16px;} .online .con .right p label{ display: inline-block; vertical-align: middle; } .online .check-div{ margin-top: 40px; line-height: 34px;} .online .check-div span{ display: inline-block; margin-right:30px; min-width: 40%;} .online .row{ margin-top: 40px; position: relative; padding-left:160px;} .online .row span{ position: absolute; top:0; left:0; line-height:40px;} .online .row input{ width: 100%; height: 40px; padding:7px 10px; line-height:24px; border: 1px solid #EEEEEE;} .online .row p.red{ margin-top: 20px;color: #ac0807;} .online .row textarea{ width: 100%; height:140px; padding: 10px; line-height:24px; border: 1px solid #EEEEEE;} .online .button{ margin-top:40px; text-align: center;} .online .button input{ margin:0 20px; width: 180px; height:56px; line-height: 56px; text-align: center; background: #ac0807; color: #FFFFFF; font-size: 16px; } .online .button input:nth-child(2){ background: #a7a7a7;} @media (max-width:999px) { /* ========== */ /* = ONLINE = */ /* ========== */ .online{ padding: 50px 0;word-break:break-all;} .online .bg{ padding: 40px 15px;} .online .content h2{ font-size: 0.5rem;} .online .content>div{font-size: 0.34rem; line-height: 0.68rem; } .online .con .left{ width: 100%;} .online .con .right{ width: 100%; font-size: 0.34rem; line-height: 0.6rem;} .online .con .right div{ font-size: 0.42rem; } .online .check-div span{ width: 100%; margin-right:0;} .online .button input{ margin:0 5px; width: 120px; height:50px; line-height: 50px;} .online .row{ padding-left: 3.6rem; } } /* ========== */ /* = 404 = */ /* ========== */ .main-404{ padding:50px 0 120px; text-align: center;} .main-404 .p1{ margin-bottom: 10px;} .join-pop{ display: none; position: fixed; top:0; left:0; height: 100%; width: 100%; background: rgba(0,0,0,.7); text-align: center; z-index:9999;} .join-pop .content+i{ display: inline-block; vertical-align: middle; height: 100%;} .join-pop .content{ max-width:780px; width: 90%; background: #FFFFFF; display: inline-block; vertical-align: middle; position: relative; padding: 30px;} .join-pop .close{ cursor: pointer; position: absolute; top:12px; right:12px; width:37px; height: 37px; background-image: url(../images/close.png); background-size: cover;} .join-pop .title{ padding:0 30px 20px; font-size: 20px; font-weight: bold; color:#333333; border-bottom: 1px solid #EEEEEE; } .join-pop .con{ margin-top:30px; padding-right: 10px; text-align: left; height:400px; font-size: 14px; line-height: 28px; overflow-y: auto;} .join-pop .tit{font-size: 16px; font-weight: bold;} @media (max-width:999px) { .join-pop .con{ height:220px;} } .service-link-ul2 li:nth-child(4n+1){ clear: both;} .service-link-ul2{ margin-right: -20px; margin-left: -20px;} .service-link-ul2 li{ padding: 0 20px;} .service-link-ul2 .item div p{ padding-top: 22px;} .service-link-ul2 .des{ margin-top: 15px; display: block; border-top: 1px solid #e5e5e5; padding-top: 15px; font-size: 14px; line-height: 30px; color: #868686; font-style: italic; text-align: justify;} .luodi-service{ padding: 65px 0; } .luodi-sub{ top:auto; display: block; position: relative; background: #f4f4f4; padding:30px 0 0 ;} @media (max-width: 999px){ .home-what-ul{ margin-top: 0;} .service-link-ul2{ margin: 0 -5px 30px;} .service-link-ul2 li{ padding: 0 5px;} .service-link-ul2 .item div p { padding-top: 12px;} .service-link-ul2 .des{ margin-top: 8px; padding-top: 8px; font-size: 12px; line-height: 24px;} /* ========== */ /* = HOME-SERVICE = */ /* ========== */ .luodi-service{ padding: 40px 0; } .home-service .home-tit h2{ display: none;} .home-service .home-tit .des{ margin-top: 0; font-size: 14px;} .home-service .home-tit .more{ display: none;} .home-service .home-tit .tip{ max-width: 100%; font-size: 12px; line-height: 22px; margin-top:10px;} .home-service .home-tit .tip2{ max-width: 100% !important; } .home-service .img{ width:100%;} .home-service .right { margin-top: 40px; width:100%; padding: 20px;} .home-service .tit{ font-size: 16px; padding-left: 0; background: none;} .home-service .tit:before{ display: none;} .home-service .right .des{ margin-top: 15px; font-size:12px; line-height: 22px; text-align: justify;} .home-service .point li, .home-service .point li:nth-child(2n){ width: 100%; text-align: left; } .home-service .point li div{ font-size: 13px; line-height: 22px; background:none; padding-left: 0px;} .home-service .point2 li div span{ font-size: 11px; } .home-service .text li{ margin-top: 25px; float: left; width: 33.33333333333333%; text-align: center;} .home-service .text li:nth-child(2){ width:66%;} .home-service .text li:nth-child(3){ clear: both;} .home-service .text li img{ float: none; display: block;} .home-service .text li div{ margin-left: 0;} .home-service .text li div span{ display:block; font-size: 16px; line-height: 40px;} .home-service .text li div p{ max-width: 100%; text-align: center} .luodi-sub { padding:40px 0 0;} .luodi-sub h2 a{ font-size: 15px; padding-right:40px;} .luodi-sub .link a{ margin-right:0; width:100%; display:inline-block; min-width: auto;} /* ========== */ /* = HOME-NEWS = */ /* ========== */ .home-news{ padding:0 0 30px;} .home-news .home-tit h2{ display: none;} .home-news .home-tit .des{ margin-top: 0; font-size: 14px;} .home-news .tab{ margin-top: 15px; text-align: center;} .home-news .tab span, .home-news .tab a{ width:30%; margin: 0 1%;} .home-news .js-tab-box{ margin-top:30px; height:auto;} .home-news .js-tab-box:after{ display: none;} .home-news-ul li{ margin-bottom: 20px; width: 100%;} .home-news-ul li span{ font-size: 14px;} .home-news-ul li p{ font-size: 12px;} .home-news-ul li i{ margin-top: 15px; } .home-zx-ul li{ width: 100%; } .home-zx-ul li div{ font-size: 14px;} .home-zx-ul li p{ margin-top: 12px; line-height: 22px; height:66px;} .home-faq-ul li{ margin-bottom:20px; width: 100%;} .home-faq-ul li .ques{ font-size: 14px; padding-left: 24px;} .home-faq-ul li .ques:before{ width:3px; height: 16px; margin-top: -8px;} .home-faq-ul li .ans{ margin-top:15px; padding-left: 24px; font-size: 12px; line-height: 20px; height: 100px;} } /* ========== */ /* = case = */ /* ========== */ .case-tips{margin-bottom: 34px; padding: 16px 30px; background-color: #AC0202; font-size: 16px; color: #FFFFFF; line-height: 1.5;} .case-tabs{margin-bottom: 30px; padding: 20px 30px 40px; background-color: #fff;} .case-tabs .tab{margin: 0 -26px; display: -webkit-flex; display: flex; flex-wrap: wrap;} .case-tabs .tab li{} .case-tabs .tab a{padding: 0 26px; display: block; font-size: 18px; color: #777777; line-height: 2.25; font-weight: bold; letter-spacing: .1em; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;} .case-tabs .tab li.on{} .case-tabs .tab li.on a, .section-case .case-tabs .tab a:hover{color: #AC0202;} .case-tabs .desc{margin-top: 20px;} .case-tabs .desc .desc-item{display: none;} .case-tabs .desc .desc-item.on{display: block;} .case-tabs .desc ul{margin: 0 -8px -15px; display: -webkit-flex; display: flex; flex-wrap: wrap;} .case-tabs .desc ul li{padding: 0 8px; margin-bottom: 15px;} .case-tabs .desc ul a{padding: 12px 15px; display: block;min-width: 156px; font-size: 14px; color: #333333; text-align: center; line-height: 1.5; font-weight: bold; background-color: #F8F8F8; letter-spacing: .1em; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;} .case-tabs .desc li.on{} .case-tabs .desc li.on a, .section-case .case-tabs .desc ul a:hover{background-color: #AC0202; color: #fff;} .case-list ul{margin: 0 -10px; display: -webkit-flex; display: flex; flex-wrap: wrap;} .case-list ul li{padding: 0 10px; margin-bottom: 18px; width: 25%; flex-shrink: 0;} .case-list ul .con{padding: 22px 0; display: block; height: 100%; min-height: 230px; position: relative; background-color: #fff;} .case-list ul .pic{margin: 0 auto 42px; width: 200px; height: 114px; line-height: 114px; font-size: 0; text-align: center;} .case-list ul .pic img{display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%;} .case-list ul .tit{padding: 0 20px; font-size: 20px; color: #333333; font-weight: bold; line-height: 1.3; text-align: center;} .case-list ul .mask{padding: 20px 36px; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #AC0202; z-index: 10; opacity: 0; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;} .case-list ul .mask .m-tit{margin-bottom: 18px; padding-bottom: 15px; font-size: 20px; color: #FFFFFF; font-weight: bold; line-height: 1.3; text-align: center; position: relative;} .case-list ul .mask .m-tit:before, .case-list ul .mask .m-tit:after{content: ''; position: absolute; left: 50%; background-color: #fff; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);} .case-list ul .mask .m-tit:before{bottom: 0; width: 90px; height: 1px;} .case-list ul .mask .m-tit:after{bottom: -1px; width: 10px; height: 3px;} .case-list ul .mask .m-desc{font-size: 14px; color: #FFFFFF; line-height: 1.71; max-height: 8.55em; overflow-y: auto;} .case-list ul .mask .m-desc::-webkit-scrollbar { width: 4px; } .case-list ul .mask .m-desc::-webkit-scrollbar-track { background: #ddd; border-radius: 10px; } .case-list ul .mask .m-desc::-webkit-scrollbar-thumb { background: #1455b7; border-radius: 10px; } .case-list ul .mask .m-desc::-webkit-scrollbar-thumb:window-inactive { background: #1455b7; } .case-list ul .con:hover{} .case-list ul .con:hover .mask{opacity: 1;} @media (max-width:1360px) { .case-list ul .mask{padding: 20px 15px;} .case-list ul .mask .m-desc{max-height: 8.55em;} } @media (max-width:999px) { .case-tips{padding: 15px 20px; margin-bottom: 25px; font-size: 16px;} .case-tabs{padding: 20px; margin-bottom: 25px;} .case-tabs .tab{margin: 0 -15px 10px;} .case-tabs .tab a{font-size: 16px; padding: 0 10px; line-height: 40px;} .case-tabs .desc ul{margin: 0 -5px -10px;} .case-tabs .desc ul li{padding: 0 5px; margin-bottom: 10px;} .case-tabs .desc ul a{font-size: 14px; min-width: 80px; padding: 8px 10px;} .case-list ul li{width: 50%;} .case-list ul .con{padding: 15px 0; min-height: 0;} .case-list ul .pic{margin-bottom: 25px; width: 100%; height: 70px; line-height: 70px;} .case-list ul .tit{font-size: 16px;} .case-list ul .mask{padding: 10px;} .case-list ul .mask .m-tit{padding-bottom: 6px; margin-bottom: 10px; font-size: 16px;} .case-list ul .mask .m-desc{font-size: 12px; max-height: 6.84em;} }