h1,h2,h3,h4,h5,h6,caption{text-transform:capitalize}
h1,h2{font-weight: normal;}
body{background:url(../img/bg_big.jpg) no-repeat 50% 3800px;}
.contact{width:10rem; height: 3.7rem; line-height: 3.7rem; text-align: center; color: #333; font-size: 1.1rem; background-color: #f1a409; border-radius: 5px; display: block;transition: all .2s;}
.contact:hover{color: #f1a409; background-color: #333; transition: all .2s;}
input{border: none;}

.title{text-align: center;}
.title h2{color: #333; font-family: "Anton";font-size: 1.8rem; line-height: 2.8rem;}
.title img{ margin: .6rem auto 0;width: 300px;}
.title p{line-height: 1.5rem; margin-top: 1rem; text-align: center; color: #333;}
/* ban */
.ban{width:100%; height: 49rem; overflow: hidden; text-align: center; background:url(../img/ban.jpg) no-repeat 50% top;}
.ban h1{color: #fff;font-size: 3rem; line-height: 2.5rem; margin-top: 14rem; font-family: "Anton";}
.ban span{font-size: 1.6rem; line-height: 3rem;color: #fff; font-family: "Anton";}
.ban p{width:50%; color: #fff; line-height: 1.5rem; font-size: 1.1rem; text-align: center; margin: 0 auto 3rem;}
.ban .contact{margin: 0 auto;}
/* market */
.market{width: 100%; background:url(../img/mukuai.jpg) no-repeat right 128px; margin-top: 2rem;}
.market .main{width: 100%; background: url(../img/mukuai2.jpg) no-repeat left 650px;}
.market .main dl{margin-top: 2.5rem;}
.market .main dl dt{text-align: center; font-size: 1.1rem; color: #333;}
.market .main dl dd{margin-top: 2.5rem;}
.market .main dl dd img{margin: 0 auto;}
.market .main .table2 dd{display: flex; flex-wrap: wrap; justify-content: space-between;}
.market .main .table2 dd div{width: 45%;}
.market .main .table2 dd div:first-child p{float: right;}
.market .main .table2 dd p{width:50%; margin-top: 2.5rem; text-align:center;border: 1px solid #ccc; color: #333; line-height: 1.7rem;}
.market .txt{text-align: center; margin-top:2.5rem; color: #333; line-height: 1.5rem;}
/* Why Pelletize Biomass Waste? */
.knowledge{width: 100%; background: url(../img/bolang_bg.jpg) no-repeat 50% top #c0dcbe; margin-top: 1.2rem;}
.knowledge .main{width: 100%; padding:5.3rem 0 7.7rem; background:url(../img/bolang_bg2.jpg) no-repeat 50% bottom;}
.knowledge dl{width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between;}
.knowledge dl dt,.knowledge dl dd{width: 48%;}
.knowledge dl dt h3{font-size: 1.8rem; margin-top:2.5rem;font-family: "Anton"; color: #333; line-height: 3rem;}
.knowledge dl dt h3 span{width:2.5rem; height: 3rem; text-align:center; display:block; background:#47ab6d; position: relative; color: #fff;margin-right:1.2rem; float: left;}
.knowledge dl dt h3 span::after{display: block; content: '';width:42%;height: 2px; background:#fff; position: absolute; bottom: 2px; left: 29%;}
.knowledge dl dt p{margin-top:1rem; color: #333;}
/* Materials */
.material{width: 100%; margin-top: 2rem; background: url(../img/mukuai3.jpg) no-repeat right 157px;}
.material .main{margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between;}
.material .main ul{width: 33.2%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.material .main ul li{width: 49.7%; position: relative; margin-top: 3px; overflow:hidden;}
.material .main ul li img,.material .bottom ul li img{transition:all .4s}
.material .main ul li:hover img,.material .bottom ul li:hover img{transform: scale(1.1); transition:all .4s}
.material .main ul .big{width: 100%;}
.material .main ul li span{position: absolute;width: 95%; font-style: italic;right: 5%; bottom:0; text-align: right; font-size: 1.5rem; line-height: 2.2rem; color:#47ab6d; font-weight: bold; -webkit-text-stroke:1px #fff;}
.material .main ul .big span{text-align: center;}
.material .bottom{margin-top:2.5rem;}
.material .bottom ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.material .bottom ul li{width:23.7%; position: relative; margin-bottom: 1.2rem; overflow:hidden}
.material .bottom .first i{font-size: 2.2rem; color: #47ab6d; line-height: 2.2rem; display: block; }
.material .bottom .first .contact{height: 3.1rem; line-height: 3.1rem; margin-top: 1.2rem;}
.material .bottom ul li span{font-style: italic; width: 95%; text-align: right; position: absolute; bottom: 0;right: 5%; color: #f1a409; font-weight: bold; font-size: 1.5rem; line-height: 2.2rem; font-family: "Anton"; -webkit-text-stroke:1px #fff;}
/* tonglan */
.tonglan{width:100%; height: 235px; padding-top:3rem; margin-top: 2.5rem; box-sizing: border-box; background:url(../img/tonglan_bg.jpg) no-repeat 50% top;}
.tonglan .container{display: flex; flex-wrap: wrap; justify-content: space-between;}
.tonglan h2{width: 63%; color: #fff; font-size: 2rem; line-height: 3.7rem;}
.tonglan .contact{margin-top: 2.5rem;}
/* process */
.process{width: 100%; background:url(../img/mukuai4.jpg) no-repeat left 100px; margin-top: 3.7rem;}
.process .main{width:100%; overflow: hidden; background: url(../img/fenge_bg.jpg) no-repeat 50% bottom;}
.process .main img{margin:2.2rem auto 0;}
.process .main .item ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.process .main .item ul li{width:23.7%; background: #47ab6d; margin-top: 1.2rem;}
.process .main .item p{width: 100%; line-height: 1.5rem; text-align: center; text-transform: capitalize; padding:.8rem 20%; box-sizing: border-box; color: #fff; position: relative;}
.process .main .item i{display:block; width: 100%; text-align: center; position: absolute; font-size: 4.5rem; opacity: .2; color:#fff; top: 0; left: 0; line-height: 4.5rem; font-style: normal; font-family: "Anton"; transition: all .2s;}
.process .main .item li:hover,.process .main .item li.on {background:#f1a409; transition: all .2s;}
.process .main .item li:hover p,.process .main .item li.on p{color: #333; transition: all .2s;}
.process .change>.container{margin-top: 1rem;}
.process .main .list p{text-align: center; color: #333;}
.process .main .contact{margin: 2rem auto 11rem;}
/* plants */
.plants{width: 100%; background: url(../img/mukuai5.jpg) no-repeat right 285px;margin-top: 3rem;}
.plants .item{margin-top: 2.3rem; display: flex; flex-wrap: wrap; justify-content: space-between;}
.plants .item .left{width: 18.6%;}
.plants .item .left p{width: 100%; line-height: 1.8rem; background: url(../img/tuoyuan.gif) no-repeat right bottom #47ab6d; font-size: 1.2rem; font-family: "Anton"; text-align: center; color: #fff; padding:2rem 0;}
.plants .item .right{width: 80%;}
.plants .item .right ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.plants .item .right ul li{width: 23%; height: 3.5rem; line-height: 1.8rem; padding:0 .5rem; box-sizing: border-box; color: #fff; transition: all .2s; text-align: center; margin-bottom: .6rem; background: #47ab6d;}
.plants .item .right ul li:hover,.plants .item .right ul li.on{background:#f1a409; transition: all .2s;}
.plants .main .list{padding-bottom: 4rem;}
.plants .list .top{margin-top: 1.7rem; display: flex; flex-wrap: wrap; justify-content: space-between;}
.plants .list .top .txt h3{color: #333; font-size: 1.2rem;margin-bottom: 1rem; font-family: "Anton";}
.plants .list .top .txt p{color: #333;}
.plants .list .top .txt p span{font-size: 1.1rem; font-weight: bold;}
.plants .list .top .contact{margin-top: 1rem; line-height: 3rem; height: 3rem;}
.plants .list .top .txt,.plants .list .top .img{width: 49%;}
.plants .list .top .img img{width: 100%; height:auto}
.plants .list .top:nth-of-type(2) .img{width: 49%; border: 1px solid #47ab6d; box-sizing: border-box;}
.plants .list .top:nth-of-type(2) .contact{width: 12rem;}
.plants .list .table{margin-top: 2.5rem;}
.plants .list .table table{ border-collapse: collapse; text-align: center;}
table caption{font-size:1.2rem;line-height:2.4rem}
.plants .list .table th,.plants .list .table td{border: 1px solid #333; padding:0 1rem}
.plants .list .table thead{background: #47ab6d; line-height: 3.1rem; color: #fff;}
.plants .list .table tbody td{line-height: 1.5rem;height: 2.5rem; min-width: 6%;}
.plants .list .table tbody tr:nth-child(2n){background:#c6e4d2;}
.plants .list .table thead th:last-child{width: 44%;}
.plants .list .table tbody td[rowspan]{text-align: left;}
/* case */
.case{width: 100%; background: url(../img/mukuai6.jpg) no-repeat left 515px;margin-top: 5.7rem;}
.case .main{background: url(../img/fenge_bg.jpg) no-repeat 50% bottom; padding-bottom: 15rem;}
.case .table p{text-align: center; font-size: 1.1rem; color:#333; margin: 2rem 0;}
.case .table img{margin: 0 auto 2rem;}
.case .txt{ border: 1px solid #ccc;padding: 1rem 0; margin-bottom: 2.5rem; box-sizing: border-box; background: #fafafa;}
.case .txt ul {height: 31rem; overflow-y: scroll; box-sizing: border-box;}
.case .txt ul li{border-bottom: 1px solid #47ab6d; padding: 1rem 0; margin: 0 1rem; box-sizing: border-box;}
.case .txt ul li time{font-size: 1.1rem; color: #333; margin-bottom: 1rem; transition: all .2s;}
.case .txt ul li p{color: #333;}
.case .txt ul li:hover time{color: #47ab6d;}
.case .img h4{position: relative; margin-bottom: 2rem;}
.case .img h4::before{display: block; content: ""; width:100%;height: 2px; background:#232323; position: absolute; top: 50%; left: 0;}
.case .img h4 p{width: 25%; background: #fff; color: #232323; text-align: center; position: relative; top: 0; left: 37.5%;}
.case .img h4 p::before,.case .img h4 p::after{display: block; content: '○'; position: absolute; left: 0; top: 0;}
.case .img h4 p::after{right: 0; left: auto;}
.case .img ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.case .img ul li{width: 23.7%; margin-bottom: 1rem; position: relative; overflow: hidden;}
.case .img ul li:not(.more) p{width: 100%; height: 100%; padding: .6rem; box-sizing: border-box; position: absolute; left:0; top: 100%; background-color: rgba(0, 0, 0, .7); transition: all .2s;}
.case .img ul li:not(.more) p span{width:100%; height: 100%; display: block; box-sizing: border-box; text-align: center; border:2px solid #f1a409; padding:3rem 1rem; color: #fff; font-size: 1.1rem; line-height: 1.5rem;}
.case .img ul li:not(.more):hover p{top:0; transition: all .2s;}
.case .img .more{width:23.7%;background:#47ab6d; padding:1rem; height: 11.2rem; box-sizing: border-box;}
.case .img .more div{width: 40px;margin: 0 auto;}
.case .img .more p{text-align: center; line-height: 3.1rem;color: #fff; font-size: 1.1rem;}
.case .img .more p:nth-of-type(2){display: flex; flex-wrap: wrap; justify-content: space-between;}
.case .img .more p a{width: 46%; line-height: 2.5rem; border: 1px solid #fff;text-align: center; color: #fff; font-size: 1.1rem;transition:all .2s}
.case .img .more p a:hover{background:#fff; color:#47ab6d; transition:all .2s}
/* Service */
.service{width: 100%; background:url(../img/mukuai7.jpg) no-repeat right bottom; margin-top: 3.7rem;}
.service .main{display: flex; flex-wrap: wrap; justify-content: space-between; margin-top:2rem}
.service .main .left,.service .main .right{width: 49%;}
.service .left .item ul{width:100%; height: 3.8rem;background: #f5f9fc;display: table;}
.service .left .item ul li{width:33.33%; padding:.5rem 1rem; line-height: 1.5rem; box-sizing: border-box; display:table-cell; vertical-align: middle; transition: all .2s; text-align: center; color: #333;}
.service .left .item ul li:hover,.service .left .item ul li.on{background: #47ab6d; color: #fff; transition: all .2s;}
.service .left .list{margin-top: 1.5rem;}
.service .left .list p{color: #333;}
.service .right{width: 49%;}
.service .right li img{width: 100%;}
/* form */
.form{ margin-top: 3.7rem;}
.form h2{font-size: 1.8rem; color:#47ab6d;}
.form .main{display: flex; flex-wrap: wrap; justify-content: space-between;}
.form .txt{width:29%;}
.form .txt p{line-height: 1.6rem; color: #47ab6d; font-size: 1.1rem; margin-top: 2rem;}
.form .txt p img{width:26px;float: left; margin-right: 1.5rem;}
.form form{width:68%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.form form .left{width:38%;}
.form form .left input,.form form .right textarea{width:100%;line-height: 3.1rem; border: 1px solid #ccc; padding-left: 1rem; margin-bottom: 1.2rem; box-sizing: border-box; background: #f7f7f7; color: #b2b2b2; font-size: 1rem;}
.form form .right{width: 60%;}
.form form .right textarea{height: 12rem;}
.form form .right div{width: 60%; margin-left: 40%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.form form .right div input{width:42%; cursor: pointer; text-align: center; height: 2.5rem; line-height: 2.5rem; color: #333; font-size: 1.1rem; background: #f1a409;}
.form form .right div .reset{background:#ccc; color: #fff;}
/* dibu */
.dibu{width: 100%; background: url(../img/bg_bottom.jpg) no-repeat 50% bottom; padding:3.3rem 0 363px;}
.dibu .future{width: 100%; height: 30rem; background: url(../img/future.jpg) no-repeat left top; padding: 3.3rem 6.2rem; box-sizing: border-box;}
.dibu .future h2{width:70%; margin:0 auto;text-align: center; color: #fff; font-size: 1.9rem; font-family: "Anton"; line-height: 2.2rem;}
.dibu .future p{text-align: center; color: #fff; margin-top: 1rem;}
.dibu .future .img{width: 50%; margin: 1rem auto 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
.dibu .future .img img{width: 45px;}
.dibu .video{width: 66%; position: relative; top:-184px; left: 17%; cursor: pointer; transition: all .2s;}
.dibu .video span{display: block;width: 3.8rem; height: 3.8rem; line-height: 3.8rem; text-align: center; border: 2px solid #fff; color: #fff; border-radius: 50%; position: absolute; left: 50%; top: 50%; padding-left: .6rem; box-sizing: border-box; font-size: 3rem;  margin:-1.9rem 0 0 -1.9rem;}
.dibu .video:hover span{color:#47ab6d; border-color: #47ab6d; transition: all .2s;}
@media (max-width:1179px) {
    img{width: 100%;height: auto;}
    body{background: url(../img/bg_big_1200.jpg) no-repeat 50% 6000px;}
    .ban{background: url(../img/ban_1200.jpg) no-repeat 50% top;background-size: cover;}
    .tonglan{background: url(../img/tonglan_bg_1200.jpg) no-repeat 50% top;background-size: cover}
    .process .main,.case .main{background: url(../img/fenge_bg_1200.jpg) no-repeat 50% bottom;}
    .dibu{background: url(../img/bg_bottom_1200.jpg) no-repeat 50% bottom;}
}
@media (max-width:1024px) {
    body{background: url(../img/bg_big_1024.jpg) no-repeat 50% 6000px;}
    .ban{background: url(../img/ban_1024.jpg) no-repeat 50% top;}
    .tonglan{background: url(../img/tonglan_bg_1024.jpg) no-repeat 50% top;}
    .process .main,.case .main{background: url(../img/fenge_bg_1024.jpg) no-repeat 50% bottom;}
    .dibu{background: url(../img/bg_bottom_1024.jpg) no-repeat 50% bottom;}
    .dibu .future{background: url(../img/future_1024.jpg) no-repeat left top;background-size: cover}
    .knowledge dl{margin-top: 1rem;}
    .knowledge dl dt h3{margin-top: 0;}
    .material .bottom .first i{font-size: 1.2rem; line-height: 1.7rem; font-weight: bold;}
    .material .bottom .first .contact{margin-top: .5rem;}
    .tonglan h2{line-height: 2.5rem;}
    .plants .item .right ul li{height: auto;}
    .case .img .more p a{line-height: 1.5rem;}
    .dibu .future h2{width: 100%;}
}
@media (max-width:768px) {
    body{background: url(../img/bg_big_768.jpg) no-repeat 50% 6000px;}
    .ban{background: url(../img/ban_768.jpg) no-repeat 50% top;}
    .tonglan{background: url(../img/tonglan_bg_768.jpg) no-repeat 50% top;}
    .process .main,.case .main{background: url(../img/fenge_bg_768.jpg) no-repeat 50% bottom;}
    .dibu{background: url(../img/bg_bottom_768.jpg) no-repeat 50% bottom;}
    .dibu .future{background: url(../img/future_768.jpg) no-repeat left top;}
    .ban p{width: 100%;}
    .process .main .item p{padding:.8rem 0}
    .case .img ul li,.case .img .more{width:32.5%}
    .case .img ul li:not(.more) p{top:0}
    .form .txt{width:100%;display: flex; flex-wrap: wrap; justify-content: space-between;}
    .form .txt p{width: 50%;}
    .form form{width: 100%; margin-top: 2rem;}
    .plants .list .top:nth-child(2){flex-wrap: wrap-reverse;}
}
@media (max-width:425px) {
    .ban{margin-top:5rem}
    .ban,.tonglan,.dibu .future{background: #378659; height: auto; padding: 3rem 0;}
    .ban h1{line-height: 3.5rem; margin-top: 0;}
    body,.market,.market .main,.material,.process,.plants,.case,.service,.dibu{background: none;}
    .market .main .table2 dd div{width: 100%;}
    .market .main .table2 dd p{width: 100%;}
    .market .main .table2 dd div:first-child p{float: unset; margin-bottom: 1rem;}
    .knowledge .main{background:  #c0dcbe;}
    .knowledge dl dt, .knowledge dl dd{width: 100%;}
    .knowledge dl:nth-child(2){flex-wrap: wrap-reverse;}
    .knowledge dl dd{margin-top: 1rem;}
    .material .main ul,.tonglan h2,.plants .item .left,.plants .item .right{width: 100%;}
    .material .bottom ul li,.process .main .item ul li,.plants .item .right ul li{width: 49%;}
    .plants .item .right{margin-top: 1rem;}
    .plants .item .right ul li{padding: 0;}
    .plants .main .list{display: none;}
    .case .img h4 p{width: 100%; left: 0;}
    .case .img ul li, .case .img .more{width: 49%;}
    .case .img ul li:not(.more) p span{padding: 1rem .5rem;}
    .service .main .left, .service .main .right,.form .txt p,.form form .left,.form form .right{width: 100%;}
    .service .main .left .item{margin-bottom: 1rem;}
    .service .left .item ul li{padding: .5rem;}
    .form form .right div{margin: 0 auto;}
    .dibu{padding: 3.3rem 0 ;}
    .dibu .future{padding: 3rem 0 6rem;}
    .dibu .video{width: 90%;left: 5%; top: -5rem;}
}