h1,h2,h3,h4,h5,h6{text-transform:capitalize;font-family: "Anton"; color: #333; font-weight: normal;}
body section,body section p{font-family: "Barlow";}
.contact{display:block; width:193px; height: 58px; background: url(../img/coin.png) no-repeat; text-align: center; background-position: -180px 0; line-height: 58px; font-size: 1.5rem; color: #333; font-family: "Barlow";}
.contact:hover{background-position: -180px -58px; font-weight:bold}
/* ban */
.ban{height: 700px; box-sizing: border-box; background: url(../img/banner_bg.jpg) no-repeat 50% top; padding-top:7.5rem}
.ban .container{position:relative}
.ban .txt{width: 41%;padding-top: 130px;}
.ban .txt h1{font-size: 1.9rem; line-height: 2.3rem; color: #77b122; -webkit-text-stroke: 1px #fff;}
.ban .txt p{font-size: 1.1rem; margin-top: 2rem; color: #fff; margin-top: 1rem; line-height: 1.6rem;}
.ban .txt a{ margin-top: 2rem;}
.ban .txt .right{position:absolute; right:0; top:0}
.ban .txt .img{width: 690px; position: relative; height: 553px;}
.ban .main{width:455px; margin-left: 210px;height:458px;overflow:hidden}
.ban .title{width: 315px; position: absolute; left: 0; bottom:0}
.ban .title h2{font-family: "Barlow"; cursor: pointer;transition: all .2s; position: absolute; bottom: 220px; left: -44px; color: #fff; font-size: 1rem; font-weight: normal; opacity: .5;}
.ban .title h2::after{display: inline-block; content: ""; width: 20px; height: 20px; margin-left: .8rem; background:url(../img/coin.png) no-repeat; background-position: -143px -172px;}
.ban .title h2:nth-child(2){bottom: 160px; left: -70px;}
.ban .title h2:nth-child(3){bottom: 100px;left: -35px;}
.ban .title h2:nth-child(4){bottom: 40px;left: 157px;}
.ban .title h2:hover,.ban .title h2.on{opacity: 1; transition: all .2s;}
.num{position: absolute; width: 165px; bottom:0; right: 0;display: flex; flex-wrap: wrap; justify-content: space-between;height:40px;overflow:hidden}
.num>span{display:inline-block; transition: all .2s; cursor: pointer; width:40px; text-align:center;color: #808080; font-size: 2rem; font-family: cursive;}
.num>div{width: 35px;}
.num ul li{font-family: "Anton"; color:#6ca11f; font-size:2rem}
.num div{color: #929292;font-size: 1.5rem;line-height: 2.5rem;}
.num>span:hover{color: #77b122; transition: all .2s;}
/* advantage */
.advan .container{border-bottom: 1px solid #e6e6e6; padding:1.5rem 0}
.advan ul{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.advan ul li{width: 15%; text-align: center;}
.advan ul li span{display: inline-block; transition: all .2s; width: 60px; height: 43px; background: url(../img/coin.png) no-repeat; background-position: 0 0;}
.advan ul li p{text-align: center; margin-top: 1rem; transition: all .2s; font-size: 1rem; color: #333;}
.advan ul li:nth-child(2) span{background-position: -60px 0;}
.advan ul li:nth-child(3) span{background-position: -120px 0;}
.advan ul li:nth-child(4) span{background-position: 0 -86px;}
.advan ul li:nth-child(5) span{background-position: -60px -86px;}
.advan ul li:nth-child(6) span{background-position: -120px -86px;}
.advan ul li:hover span{background-position: 0 -43px; transition: all .2s;}
.advan ul li:hover p{color: #77b122; transition: all .2s;}
.advan ul li:nth-child(2):hover span{background-position: -60px -43px;}
.advan ul li:nth-child(3):hover span{background-position: -120px -43px;}
.advan ul li:nth-child(4):hover span{background-position: 0 -129px;}
.advan ul li:nth-child(5):hover span{background-position: -60px -129px;}
.advan ul li:nth-child(6):hover span{background-position: -120px -129px;}
/* preface */
.preface{padding:2rem 0}
.preface .container{display: flex; flex-wrap: wrap; justify-content: space-between;}
.preface .txt{width: 59%; margin-top: 30px;}
.preface .txt h2{font-size: 1.9rem; color: #333;}
.preface .txt h2 span{color: #6ca11f;}
.preface .txt h2::after{display: block; content: ""; width: 123px; height: 18px;  background: url(../img/coin.png) no-repeat; background-position: 0 -174px; margin: 1rem 0;}
.preface .img{width:37%; margin-top: 50px; position: relative;}
.preface .img::before{width: 90%; height: 380px; display: block; position: absolute; content: ""; background: #e4efd3; left:5%; top: -52px;z-index: -1}
/* banner2 */
.banner2{height: 500px; background: url(../img/banner2_bg.jpg) no-repeat 50% top; padding-top:100px; box-sizing: border-box;}
.banner2 .container{position: relative;}
.banner2 .txt{width: 43%;}
.banner2 .txt h2{font-size: 1.9rem; color: #fff;}
.banner2 .txt h2 span{color: #77b122; -webkit-text-stroke: 1px #fff;}
.banner2 .txt p{font-size: 1.5rem; color: #fff; line-height: 2rem; margin: 2rem 0;}
.banner2 .img{width:67%;position: absolute; right: 0; top: 0;}
/* principle */
.principle{padding:3.5rem 0; background:url(../img/grassbg.jpg) no-repeat 50% bottom}
.principle .title h2{text-align: center; color: #77b122; font-size: 1.9rem;}
.principle .title p{text-align: center; color: #333; margin: .8rem 0 2.5rem;}
.principle .title div{width:100%;border: 1px solid #77b122; border-radius: 5px; padding: 2rem 0; box-sizing: border-box;}
.principle .title div img{margin: 0 auto;}
.principle .main dl{margin-top: 1.3rem;display:flex; flex-wrap: wrap; justify-content: space-between;}
.principle .main dl dt{width: 66%; padding-left: 80px; box-sizing: border-box; position: relative;}
.principle .main dl dt::before{display: block; position:absolute; left: 0; content: "01";width: 55px; height: 80px; box-sizing: border-box;text-align: center; line-height: 80px; font-size: 1.9rem; background: #77b122; color: #fff;}
.principle .main dl dt h3{font-size: 1.5rem; border-bottom: 2px dashed #77b122; padding-bottom:1rem}
.principle .main dl dt p{color: #333; margin-top: 1rem;}
.principle .main dl dd{width: 32%;}
.principle .main dl:nth-child(2n){ flex-direction: row-reverse;}
.principle .main dl:nth-child(2) dt::before{content: "02";}
.principle .main dl:nth-child(3) dt::before{content: "03";}
.principle .main dl:nth-child(4) dt::before{content: "04";}
.principle .main dl:nth-child(5) dt::before{content: "05";}
.principle .main dl:nth-child(6) dt::before{content: "06";}
.principle .main dl:nth-child(7) dt::before{content: "07";}
.principle .main dl .contact{background-position: -180px -116px; color: #fff; margin-top: .5rem;}
.principle .main dl .contact:hover{background-position: -180px -174px;}
/* parameters */
.param{padding:3rem 0}
.param h2{text-align: center;}
.param h2 span{color:#6ca11f;}
.param .table{width: 100%;}
.param table{width: 100%; margin-top: 2rem; box-sizing: border-box; border-collapse: collapse;}
.param table td,.param table th{padding:.7rem 1rem; color: #232323; border: 1px solid #232323; text-align: center;}
.param table th{background: #77b122; color: #373737;}
.param table tr:nth-child(2n+1) td{background:#d0e2b7}
.param a{width: 100%; height: 58px; display: block; line-height: 58px; color: #fff; font-size: 1.1rem; margin-top: 1rem; text-align: center; background: url(../img/button_hover.png) no-repeat;background-size: contain;}
.param a:hover{background:url(../img/button_bg.png) no-repeat 50% 50%; font-weight:bold}
/* design */
.design h2{text-align: center; font-size: 1.9rem;}
.design h2 span{color: #6ca11f;}
.design ul{margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between;}
.design ul li{width: 32.5%; text-align: center;}
.design ul li span{font-size: 1.9rem; transition: all .2s; margin: 1rem 0; display: inline-block; color: #333;}
.design ul li p{color:#333; margin-bottom: 3rem;}
.design ul li:hover span{color: #77b122; transition: all .2s;}
/* banner3 */
.banner3{height: 324px; background: url(../img/banner3_bg.jpg) no-repeat 50% top; padding-top: 3.5rem; box-sizing: border-box;}
.banner3 h2{color: #fff; font-size: 1.9rem; text-align: center;}
.banner3 h2 span{color: #77b122;}
.banner3 p{width:70%;color: #fff; text-align: center; margin: 1rem auto;}
.banner3 a{margin: 0 auto;}
/* process */
.process{background: url(../img/process_bg.jpg) no-repeat 50% top; padding:3rem 0}
.process h2{ color: #6ca11f; font-size: 1.9rem; text-align: center;}
.process p{text-align: center; margin: 1rem 0; color: #333;}
.process a{width: 430px; height: 58px; display: block; margin: 0 auto; text-align: center; line-height: 58px; color: #fff; background: url(../img/button_short_hover.png) no-repeat;}
.process a:hover{background:url(../img/button_short.png) no-repeat 50% 50%; font-weight:bold}
.process ul{display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 1.5rem;}
.process ul li{width: 200px; text-align: center;}
.process .txt{width:100%; height: 148px;font-family: "Anton"; font-size: 1.1rem; padding-top:3.1rem; margin-top: 1.5rem; color: #333; box-sizing: border-box; text-align: center; background: url(../img/process_arrow.png) no-repeat; background-size: contain;}
.process h3{font-family: "Barlow"; color: #333; margin-top: .5rem;}
/* plant */
.plant{background: url(../img/plant_bg.jpg) no-repeat 50% top; padding:3rem 0}
.plant h2{font-size: 1.9rem; color: #fff; text-align: center;}
.plant h2 span{color: #77b122; -webkit-text-stroke: 1px #fff;}
.plant .container>p{text-align: center; margin: 1rem 0 2rem; color: #fff;}
.plant ul{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.plant ul li{margin-bottom: 1rem;}
.plant ul li>.txt{width: 280px; height: 400px; border: 1px solid #fff; padding:1rem .5rem; box-sizing: border-box;}
.plant li>.txt h3{text-align: center; color: #fff; font-size: 1.1rem; height:3rem}
.plant li>.txt>p{color: #fff; height: 260px; text-align: left; }
.plant li>.txt>p span{margin-bottom: .7rem; display: block;}
.plant li>.txt .bt{display: flex; flex-wrap: wrap; justify-content: space-between;}
.plant li>.txt .bt>a,.plant li>.txt .bt .tc{display: block; cursor: pointer;padding:0 .5rem; margin-top: 1rem; width: 45%; border: 1px solid #fff; color: #fff; transition:all .2s; box-sizing:border-box}
.plant li>.txt .bt a{border-color:#77b122; color: #77b122;text-align: center; line-height:2.2rem}
.plant li>.txt .bt>a:hover{color:#fff; background:#77b122; transition:all .2s}
.plant li>.txt .bt .tc:hover{color:#77b122; background:#fff; transition:all .2s}
.plant .tc dt{text-align: center;}
.plant .popup{display:none;width: 980px;border: 10px solid #77b122;position: fixed; left:50%; top: 20%; margin-left:-490px; background: #fff; padding: 1.5rem; box-sizing: border-box;}
.plant .popup .close{width:2.5rem; font-family: Arial; cursor: pointer; line-height: 2.5rem; border-radius: 50%;text-align: center; background:#77b122; color: #fff; font-size: 2rem; position: absolute; right: 1rem;}
.plant .popup .main .txt h3{line-height: 2.5rem; padding-right: 1.5rem; display: inline-block; font-size: 1.5rem; font-weight: normal; color: #232323; border-bottom: 2px solid #77b122; }
.plant .popup .main .txt p{ font-size: 1.1rem; color: #232323; margin-top: 1rem;}
.plant .popup .main .txt a{width: 8.7rem;display: block; line-height: 3rem;text-align: center; border:1px solid #77b122;color: #77b122; font-size: 1.1rem;  margin-top: 2rem;}
.plant .popup .main .txt a:hover{border-radius: 10px; background:#77b122;color: #fff; transition: all .2s;}
/* investment */
.invest{padding:3rem 0}
.invest h2{font-size: 1.9rem; text-align: center;}
.invest h2 span{color: #6ca11f;}
.invest .container>p{width:780px; margin:1rem auto 2rem;text-align: center; color: #333;}
.invest .main{display: flex; flex-wrap: wrap; justify-content: space-between;}
.invest .left{width:50%;height:480px;position: relative;}
.invest .txt{width: 100%;}
.invest .txt h3{font-size: 1.1rem; margin-bottom: 1rem;}
.invest .txt p{color: #333; margin-bottom: 1rem;}
.invest .num{left: 0; right: auto;}
.invest .txt_bottom a{position: absolute; right: 0; bottom: 0; color: #fff; background-position: -180px -116px;}
.invest .txt_bottom a:hover{background-position: -180px -174px;}
.invest .right{width: 48%; position: relative;}
.invest .right .img{width:100%; overflow:hidden}
.invest .right .img img{width:100%}
.invest .right ul {position: absolute; bottom:19px; right: 30px;width: 50px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.invest .right ul li{width: 10px; height: 10px; background:#b3b3b3; cursor: pointer; transition: all .2s;}
.invest .right ul li:hover,.invest .right ul li.on{background: #77b122; transition: all .2s;}
/* Applications */
.applic{padding-bottom: 3rem;}
.applic h2{text-align: center; font-size: 1.9rem;}
.applic h2 span{color: #6ca11f;}
.applic .container>p{text-align: center; color: #333; margin-top: 1rem; font-size: 1.1rem;}
.applic .main ul, .applic .main ul li div{display: flex; flex-wrap: wrap; justify-content: space-between;}
.applic .main ul li{width: 49%; margin-top: 2rem;}
.applic .main ul li div img{width: 49.5%;height:auto}
.applic li h3{font-size: 1.5rem; margin: 2rem 0 5px; transition: all .2s;}
.applic li p{color: #333;}
.applic .main ul li:hover h3{color: #77b122; transition: all .2s;}
/* video */
.video{background: url(../img/video_bg.jpg) no-repeat 50% top; padding: 3rem 0;}
.video h2{text-align: center; color: #77b122; -webkit-text-stroke: 1px #fff; font-size: 1.9rem;}
.video p{color: #fff;text-align: center;font-size: 1.1rem;width: 830px; margin: 5px auto 0;}
.video ul{display: flex;flex-wrap: wrap;justify-content:space-between;} 
.video ul li{width: 32.5%;margin-top: 2rem;}
.video ul li h3{color: #fff; font-size: 1.1rem;margin-top:1rem; text-align: center; font-family: "Barlow";}
/* service */
.service{width: 100%; background:#f6f5fa; padding:3rem 0; overflow: hidden;}
.service .title h2{text-align: center; font-size: 1.9rem; color: #689a1e;}
.service .title p{padding:1rem 7%; text-align: center; color: #333;}
.service .main{display: flex; flex-wrap: wrap; justify-content: space-between;}
.service .main li{width: 49%; margin-top: 3rem; display: flex; flex-wrap: wrap; justify-content: space-between;}
.service .main li:hover span{border-color: transparent; background: #77b122; transition: all .2s;}
.service .main li span{display: block; width: 80px; height: 80px;transition: all .2s; background:#f4f1f4; border-radius: 50%;; border: 1px solid #808080; position: relative;}
.service .main li span::before{display: block; content: "";transition: all .2s;width: 30px; height: 30px; background: url(../img/coin.png) no-repeat 0 -192px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px;}
.service .main li:nth-child(2) span::before{background-position: -30px -192px;}
.service .main li:nth-child(3) span::before{background-position: -60px -192px;}
.service .main li:nth-child(4) span::before{background-position: -90px -192px;}
.service .main li:hover span::before{background-position: 0 -222px;transition: all .2s;}
.service .main li:nth-child(2):hover span::before{background-position: -30px -222px;}
.service .main li:nth-child(3):hover span::before{background-position: -60px -222px;}
.service .main li:nth-child(4):hover span::before{background-position: -90px -222px;}
.service .main li dl{width: calc(100% - 100px);font-size: 1rem; line-height: 1.5rem; color: #333;}
.service .main li dt{font-weight: bold;transition: all .2s;}
.service .main li:hover dt{color: #77b122;transition: all .2s;}
/* form */
.quotation{padding: 4rem 0; position: relative;}
.quotation::before{display: block; content: ""; width: 120px; height: 50px; background: url(../img/coin.png) no-repeat;background-position: 0 -254px; position: absolute; top: 0; left: 50%; margin-left: -60px;}
.quotation h2{text-align: center; font-size: 1.9rem;}
.quotation p{text-align: center; color: #333; margin: .5rem 0 1.5rem;}
.quotation ul,.quotation .form .top,.quotation .cen dl{display: flex; flex-wrap: wrap; justify-content: space-between;}
.quotation ul li{color: #77b122; font-size: 1.1rem; line-height: 27px; margin-bottom: 1.5rem;}
.quotation ul li a{color: #77b122; }
.quotation ul li::before{display: block; content: ""; float:left;width: 27px; height: 27px; background:url(../img/coin.png) no-repeat; background-position: -120px -192px; margin-right: 1rem;}
.quotation ul li:nth-child(2)::before{background-position: -147px -192px;}
.quotation ul li:nth-child(3)::before{background-position: -120px -219px;}
.quotation ul li:nth-child(4)::before{background-position: -147px -219px;}
.quotation .top input{width: 49%; height: 45px; line-height: 45px; border: 1px solid #808080; box-sizing: border-box; padding-left: 1rem; margin-bottom: 1.5rem;}
.quotation .cen dl dt{width: 11%; color: #333;}
.quotation .cen dl dd{width: 89%;}
.quotation .cen dd label{margin-bottom: 1rem; float: left; padding-right: 1rem; cursor:pointer}
.quotation textarea{width: 100%; height: 100px; line-height: 1.5rem; padding:1rem; border: 1px solid #808080; box-sizing: border-box; outline: none;}
.quotation .form_button{width: 470px; display: flex; flex-wrap: wrap; justify-content: space-around; margin: 2rem auto 0;}
.quotation .form_button input{width: 193px; height: 58px; cursor: pointer; line-height: 58px; background: url(../img/coin.png) no-repeat; font-size: 1.1rem; color: #fff; background-position: -180px -116px; border: none;}
.quotation .form_button input.reset{background-position: -180px -233px;}
@media (max-width:1179px) {
    img,iframe{width: 100%;}
    .ban{background: url(../img/banner_bg_1200.jpg) no-repeat 50% top; background-size: cover;}
    .banner2{background: url(../img/banner2_bg_1200.jpg) no-repeat 50% top; background-size: cover;}
    .principle{background: url(../img/grassbg_1200.jpg) no-repeat 50% bottom;background-size: cover;}
    .banner3{background: url(../img/banner3_bg_1200.jpg) no-repeat 50% top;background-size: cover;}
    .process {background: url(../img/process_bg_1200.jpg) no-repeat 50% top; background-size: cover;}
    .plant {background: url(../img/plant_bg_1200.jpg) no-repeat 50% top;background-size: cover;}
    .video {background: url(../img/video_bg_1200.jpg) no-repeat 50% top;background-size: cover;}
    .ban .title{left: 23px;}
    .process .txt{padding-top: 2.8rem;}
    .invest .right ul{bottom: 0;}
}
@media (max-width:1024px) {
    .ban{background: url(../img/banner_bg_1024.jpg) no-repeat 50% top;}
    .banner2{background: url(../img/banner2_bg_1024.jpg) no-repeat 50% top;}
    .principle{background: url(../img/grassbg_1024.jpg) no-repeat 50% bottom}
    .banner3{background: url(../img/banner3_bg_1024.jpg) no-repeat 50% top;}
    .process {background: url(../img/process_bg_1024.jpg) no-repeat 50% top;}
    .plant {background: url(../img/plant_bg_1024.jpg) no-repeat 50% top; }
    .video {background: url(../img/video_bg_1024.jpg) no-repeat 50% top; }
    .ban .txt{padding-top: 0;}
    .ban .title{left: 97px;}
    .ban .main{margin-left: 245px;}
    .param table td, .param table th{padding:.7rem .5rem}
    .param a{height: 50px;line-height: 50px;}
    .process .txt{padding-top: 2.3rem;}
    .plant{background-size: cover;}
    .plant ul li{width: 32.5%;}
    .plant ul li .txt{width: 100%;}
    .plant ul li>.txt,.plant li>.txt>p{height: auto;}
    .quotation ul li{width: 45%;}
}
@media (max-width:768px) {
    .ban{background: url(../img/banner_bg_768.jpg) no-repeat 50% top;margin-top:5rem}
    .banner2{background: url(../img/banner2_bg_768.jpg) no-repeat 50% top;}
    .principle{background: url(../img/grassbg_768.jpg) no-repeat 50% bottom}
    .banner3{background: url(../img/banner3_bg_768.jpg) no-repeat 50% top;}
    .process {background: url(../img/process_bg_768.jpg) no-repeat 50% top;}
    .plant {background: url(../img/plant_bg_768.jpg) no-repeat 50% top; }
    .video {background: url(../img/video_bg_768.jpg) no-repeat 50% top; }
    .ban{height: auto;background-size: cover;padding: 3rem 0;}
    .ban .txt{width: 100%;}
    .ban .txt .right{width:100%;position: relative;top: 2rem;}
    .ban .txt .img{width: 100%;height: auto; display: flex;flex-wrap: wrap;justify-content: space-between;}
    .ban .main{margin: 0;}
    .ban .title{position:unset}
    .ban .num{display: none;}
    .ban .title{width:calc(100% - 460px)}
    .ban .title h2{position: unset;margin-top: 2rem;}
    .ban .txt a{margin: 2rem auto 0;}
    .advan ul li{width: 32.5%;margin-top: 1rem;}
    .preface .txt,.banner2 .txt,.principle .main dl dt{width: 100%;}
    .preface .img{width: 60%; margin: 70px auto;}
    .banner2{height: auto;background-size: cover;padding: 3rem 0;}
    .banner2 .img{width: 54%;bottom: 0;top: auto;}
    .principle .main dl{justify-content: space-around;}
    .principle .main dl dd{width: 60%;margin-top: 1rem;}
    .principle .main dl .contact{margin: .5rem auto 0;}
    .param .table{overflow-x: scroll;}
    .param table{width: 1024px;}
    .param a{background: #0e5b9a;}
    .design ul li{width: 100%;}
    .design ul li img{width: 38%;float: left;margin-right: 2%;}
    .banner3{height: auto;background-size: cover;padding: 3rem 0;}
    .banner3 p{width: 100%;}
    .process{background-size: cover;}
    .process ul li{width: 23%;}
    .process .txt{background: none;height: auto;padding: 0;}
    .plant ul li{width: 49%;}
    .plant .popup{width: 96%;left: 2%;margin-left: 0;}
    .invest .container>p{width: 100%;}
    .invest .left{width: 100%;height: auto; padding-bottom: 3rem;}
    .invest .right{display: none;}
    .video{background-size: cover;}
    .video ul li{width: 49%;}
    .service .main li,.video p{width: 100%;}

}
@media (max-width:425px) {
    .ban{background:#000;}
    .ban .main{width: 100%;}
    .ban .title{width: 100%;text-align: center;}
    .ban .title h2{margin: 0 0 2rem 0;}
    .advan ul li{width: 49%;}
    .preface .img{width: 100%;}
    .banner2{background:#2d231a}
    .banner2 .img{width: 100%; position: unset;}
    .banner2 .contact{margin: 1rem auto 0;}
    .principle{background-image: linear-gradient(#fff,#f8fcfd);}
    .principle .main dl dd{width: 100%;}
    .design ul li img{width: 100%;float: unset;margin: 0;}
    .process a{width: 100%; background:#0d518e}
    .process{background:none}
    .process ul li{width: 49%;}
    .plant{background: #0c151c;}
    .plant ul li,.applic .main ul li,.quotation ul li,.quotation .top input{width: 100%;}
    .video{background:#1c1d1f}
    .quotation .cen dl dt,.quotation .form_button{width: 100%;}
    .quotation .cen dl dd{width: 100%;margin-top: 1rem;}
    .banner3{background: #38393e;}
}
@media (max-width:320px) {
    .video ul li{width: 100%;}
}