.blank_15{position: absolute;top:0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.15);} .paddbt{padding: 65px 0 100px 0;} .margin_b50{margin-bottom: 50px;} .margin_b60{margin-bottom: 60px;} @media only screen and (max-width:1440px) { .paddbt{padding: 30px 0 80px 0;} .margin_b50{margin-bottom: 30px;} .margin_b60{margin-bottom: 40px;} } @media only screen and (max-width:1024px) { .paddbt{padding: 40px 0 60px 0;} .margin_b60{margin-bottom: 30px;} } @media only screen and (max-width:767px) { .paddbt{padding: 20px 0 50px 0;} .margin_b50{margin-bottom: 20px;} .margin_b60{margin-bottom: 20px;} } /*.site{line-height: 24px;padding: 15px 0;} .site,.site a{color: #757578;} .site span{color: #009afc;} @media only screen and (max-width:1024px) { .site{display: none;} } .site_banner{position: relative;} .site_text{width: 100%;color: #fff;z-index: 2;position: absolute;left: 0;bottom:16.66%;} .site_text p{padding-top: 10px;} @media only screen and (max-width:767px) { .site_banner>img{display: none;} .site_banner{height: 150px;background-size: cover !important;} .site_text p{padding-top:0;} }*/ /*业务领域*/ .business_index ul,.business_index ol{overflow: hidden;margin: 0 -20px;} .business_index ul>li{float: left;width: 50%;} .business_index dl{padding: 0 20px;} .business_index dt{position: relative;margin-bottom: 60px;} .business_index dt h3{position: absolute;top:0;left: 0;width: 100%;color: #fff;padding: 35px 30px;box-sizing:border-box;z-index: 2} .business_index ol li{float: left;width: 50%;margin-bottom: 20px;} .business_index ol a{display: block;margin: 0 20px;overflow: hidden;line-height: 36px;height: 36px;border-bottom: 1px solid #a5a5a5;padding: 10px 0;} .business_index ol span{float: right;} .business_index ol img{vertical-align: middle;width: 12px;} .business_index ol p img{float: left;margin-right: 10px;width: 36px;height: 36px;} .business_index ol p{width: calc(100% - 20px);float: left;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} @media only screen and (max-width:1440px) { .business_index dt{margin-bottom: 40px;} } @media only screen and (max-width:1366px) { .business_index ul,.business_index ol{overflow: hidden;margin: 0 -10px;} .business_index dl{padding: 0 10px;} .business_index ol a{margin: 0 10px;height: 30px;line-height: 30px;} .business_index ol p img{width: 30px;height: 30px;} .business_index ol img{width: 10px;} } @media only screen and (max-width:1024px) { .business_index dt{margin-bottom: 20px;} .business_index ol img{width: 8px;} .business_index dt h3{padding: 20px;} } @media only screen and (max-width:767px) { .business_index ul>li{float: none;width: 100%;margin-bottom: 20px;} .business_index ul>li:last-child{margin-bottom: 0;} .business_index ul{margin: 0;} .business_index dl{padding:0;} .business_index dt{margin-bottom: 10px;} .business_index ol li{margin-bottom: 10px;} } /*详情*/ .business_title{color: #00529e;} .business_more{text-align: right;line-height: 30px;margin-bottom: 40px;} .business_more a{background: url(../images/more.png) no-repeat 0 center;padding-left: 20px;} .b_case{overflow: hidden;} .b_list ul{overflow: hidden;margin: 0 -35px;} .b_list li{float: left;width: 33.33%;} .b_list dl{padding: 0 35px;margin-bottom: 30px;} .b_list dt{margin-bottom: 20px;} .b_list a{color: #000;} .b_list dd{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} @media only screen and (max-width:1440px) { .business_more{margin-bottom: 20px;} .b_list ul{margin: 0 -20px;} .b_list dl{padding: 0 20px;} } @media only screen and (max-width:1024px) { .b_list ul{margin: 0 -10px;} .b_list dl{padding: 0 10px;} .b_list dt{margin-bottom: 10px;} } @media only screen and (max-width:767px) { .b_list ul{margin: 0;} .b_list dl{padding: 0;} .b_list li{float: none;width: 100%;margin-bottom: 20px;} .b_list li:last-child{margin-bottom: 0;} .business_more{margin-bottom:10px;} } /*有机废弃物*/ .solution_tab a{color: #787979;display: block;border-radius: 20px;margin: 0 5px;} .solution_tab{text-align: center;} .solution_tab ul{display: inline-block;} .solution_tab,.solution_tab ul,.solution_tab li{height: 38px;line-height: 38px;} .solution_tab li{float: left;width: 142px;} .solution_tab li.on a{background: #1266df;color: #fff;} .solution_list ul{overflow: hidden;} .solution_list li{background: #bae3cf;float: left;width: 50%;} .solution_list dl{padding:90px 120px 120px 65px;} .solution_list dt{margin-bottom: 20px;} .solution_list dt h3{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .solution_list p{line-height: 24px;height: 72px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} .solution_m {padding-top: 30px;} .solution_m a{display: inline-block;width: 106px;height:30px;line-height: 30px;text-align: center;background: #fff;border-radius: 20px;color: #000;} .solution_m i{margin-left: 10px;font-size: 14px;} .solution_list li:nth-child(2){background: #9db7e6;} .solution_list li:nth-child(3){background: #9db7e6;} .solution_list li:nth-child(6){background: #9db7e6;} .solution_list li:nth-child(7){background: #9db7e6;} .solution_list li:nth-child(10){background: #9db7e6;} .solution_list li:nth-child(11){background: #9db7e6;} @media only screen and (max-width:1024px) { .solution_list dl{padding: 50px 40px;} .solution_m{padding-top: 20px;} } @media only screen and (max-width:767px) { .solution_tab li{width: 25%;} .solution_list li{float:none;width: 100%;} .solution_tab ul{display: block;} .solution_tab a{margin: 0;} .solution_list dl{padding:40px 20px;} .solution_list p{height: auto;max-height: 72px;} .solution_list dt{margin-bottom: 10px;} .solution_list li{background: #bae3cf !important;} .solution_list li:nth-child(2n){background: #9db7e6 !important;} } /*核心工艺*/ .technology_list .business_index ol li{width: 25%;} @media only screen and (max-width:1024px) { .technology_list .business_index ol li{width: 33.33%;} } @media only screen and (max-width:767px) { .technology_list .business_index ol li{width: 50%;} } @media only screen and (min-width:1025px) { a{transition:all 0.3s;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;} a:hover{color: #009afc !important;} .solution_tab li.on a:hover{color: #fff !important;} } /*解决方案新添加页面*/ .solution_All img{width: 100%;height: 100%;} .solution_All .l{float: left;width: calc(68% - 20px);height: 100%;overflow: hidden;} .solution_All .l .t{height: 42%;margin-bottom: 20px;} .solution_All .l .b{height: calc(58% - 20px);} .solution_All .r{width: 32%;float: right;height: 100%;overflow: hidden;} .solution_All dl{position: relative;height: 100%;} .solution_All dl dd{height: 100%;} .solution_All dl dt{position: absolute;left: 0;bottom: 0;width: 100%;padding: 25px 30px;box-sizing: border-box;color: #fff;z-index: 4;font-weight: bold; background: -moz-linear-gradient(bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(0,0,0,0.9)), color-stop(100%,rgba(0,0,0,0))); background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to top, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%); } .solution_All dl dt p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;position: relative;padding-left: 14px;box-sizing: border-box;} .solution_All dl dt p:after{content: "";display: block;width: 4px;height: 18px;background: #fff;left: 0;top: 50%;margin-top: -9px;position: absolute;} .bl{margin-right: 20px;} .bl,.br{width: calc((100% - 20px) / 2);float: left;height: 100%;} .solution_All .r .t{height: calc(58% - 20px);} .solution_All .r .b{height: 42%;margin-top: 20px;} .solution_All dl .mask{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.12);z-index: 2;} @media only screen and (max-width:767px) { .solution_All{height: auto!important;} .solution_All .l,.solution_All .r{width: 100%;margin-right: 0;} .bl, .br{width: 100%;} .paddbt{overflow: hidden;} .solution_All dl{margin-bottom: 20px;} .solution_All .l .t{margin-bottom: 0;} .solution_All .r .b{margin-top: 0} } /**/ .cols{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: -2em; margin-right: -2em; } .col{ width: calc(50% - 4rem); margin: 0 2rem; cursor: pointer; } .container{ -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1000px; perspective: 1000px; height: 100%; } .front, .back{ background-size: cover; background-position: center; -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; text-align: center; height: 100%; border-radius: 10px; color: #fff; font-size: 1.5rem; } .back{ background: #fff; /*background: -webkit-linear-gradient(45deg, #cedce7 0%,#596a72 100%);*/ /*background: -o-linear-gradient(45deg, #cedce7 0%,#596a72 100%);*/ /*background: linear-gradient(45deg, #cedce7 0%,#596a72 100%);*/ } .front:after{ position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; content: ''; display: block; background: rgba(0,0,0,0); -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 10px; } .container:hover .front, .container:hover .back{ -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); } .back{ position: absolute; top: 0; left: 0; width: 100%; background: none; } .inner{ -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94); transform: translateY(-50%) translateZ(60px) scale(0.94); top: 50%; position: absolute; left: 0; width: 100%; padding: 2rem; -webkit-box-sizing: border-box; box-sizing: border-box; outline: 1px solid transparent; -webkit-perspective: inherit; perspective: inherit; z-index: 2; } .container .back{ -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .container .front{ -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } @media screen and (min-width: 1025px){ .container:hover .back{ -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .container:hover .front{ -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } } .front .inner p{ font-size: 2rem; position: relative; } /*.front .inner p:after{*/ /*content: '';*/ /*width: 4rem;*/ /*height: 2px;*/ /*position: absolute;*/ /*background: #C6D4DF;*/ /*display: block;*/ /*left: 0;*/ /*right: 0;*/ /*margin: 0 auto;*/ /*bottom: -.75rem;*/ /*}*/ .front .inner span{ color: rgba(255,255,255,0.7); font-family:"微软雅黑"; font-weight: 300; } @media screen and (max-width: 64rem){ .col{ width: calc(33.333333% - 2rem); } } @media screen and (max-width: 48rem){ .col{ width: calc(50% - 4rem); } } @media screen and (max-width: 32rem){ .col{ width: 100%; margin: 0 0 2rem 0; } } @media screen and (max-width: 1024px){ .col{height: auto!important;} .container .back,.container .front{ transform: none; position: static; transform-style:inherit; } .container .back{height: auto;} .back .inner{position: static;transform:inherit;} .business_index ol li{width: 100%;} } @media screen and (max-width: 767px){ .cols{margin-left: 0;margin-right: 0;} .front .inner p{font-size: 24px;} .business_index ol p{font-size: 18px;} } .solution_phone{display: none;} @media screen and (max-width: 767px){ .solution_phone{display: block;} .solution_pc{display: none;} /*.business_index ol p{font-size: 20px;}*/ .solution_body .inbanner{background-position: left center!important;} }