.none{ display: none;}
/* n-banner*/
.banner-content{ width: 100%; height: 4.9rem; display: block; position: relative;}
.banner-news{ background: url(../image/banner-news.jpg) no-repeat top center; display: block; position: relative;}
.banner-about{ background: url(../image/banner-about.jpg) no-repeat center center / cover;}
.banner-product{ background: url(../image/banner-product.jpg) no-repeat center center / cover;}
.banner-quality{ background: url(../image/banner-quality.jpg) no-repeat center center / cover;}
.banner-content .text{ position: absolute; transform: translateY(-50%); left: 50%; margin-left: -5.8rem; top: 50%; box-sizing: border-box;}
.banner-content .text h2{ font-size: .93rem; color: #fff; font-weight: bold; display: block; text-shadow: -8px 8px 0 #20853a;}
.banner-content .text h3{ font-size: .48rem; color: #fff; font-weight: bold; text-shadow: -8px 8px 0 #20853a; text-transform: uppercase;}


.about-common{ width: 100%; display: block; font-size: 0; margin-bottom: .38rem;}
.about-common .main .title{ display: block; text-align: center; font-size: 0; position: relative; margin: .5rem 0 .2rem;}
.about-common .main .title::before,.about-common .main .title::after{ content: ""; vertical-align: middle; height: 1px; width: 2.2rem; display: inline-block; background: #a6a6a6;}
.about-common .main .title .tit{ display: inline-block; padding: 0 .26rem; vertical-align: middle;}
.about-common .main .title .tit h2{ display: block; color: #20853a; font-size: .24rem; line-height: .32rem; font-weight: bold;}
.about-common .main .title .tit h3{ display: block; color: #878787; font-size: .14rem; text-transform: uppercase; line-height: .18rem; height: .32rem;; letter-spacing: .03rem;}


.location{ width: 100%; display: none; border-bottom: 1px solid #dcdcdc; background: #fff;}

.location .l{ display: inline-block; font-size: 14px; line-height: 45px; color: #000;}

.location .l a{ color: #000;}
.location .l a:hover{ color: #1b1e53;}
.location .l i{ margin: 0 10px; font-family: "宋体";}




.nav-list{ position: relative; display: block; text-align: center; margin: .1rem 0; z-index: 2;}
.nav-list li{ display: inline-block;}
.nav-list li a{ font-size: .14rem; width: 1.74rem; color: #20853a; border: 2px solid #20853a; box-sizing: border-box; display: inline-block; line-height: .32rem; margin: 0 .1rem; cursor: pointer; position: relative; transition: all 0.3s ease-in-out;}
.nav-list li a.active{ background: #20853a; color: #fff;}
.nav-list li a:hover{ background: #20853a; color: #fff;}






/* about list */

.about-list{ width: 100%; display: flex; background: #fff; }
.about-list ul{ display: flex; justify-content: space-between; width: 100%; font-size: 0; margin-top: 6.67vh;}
.about-list ul li{ width: 23%; display: inline-block; vertical-align: top;}
.about-list ul li:last-child{ margin-right: 0;}
.about-list ul li .img{ width: 100%; display: block; box-sizing: border-box; transition: all 0.3s ease;}
.about-list ul li .img img{ max-width: 100%;}
.about-list ul li h3{ display: block; font-size: .24rem; font-weight: bold; line-height: 6.2vh; margin-top: 1.48vh; transition: all 0.3s ease;}
.about-list ul li p{ display: block; font-size: .16rem; line-height: 2.2vh; height: 4.4vh; overflow: hidden; color: #6c6c6c; margin: 0;}
.about-list ul li a{ display: inline-block; position: relative; color: #1b1e53; font-size: .16rem; line-height: .4rem; margin: 3.8889vh 0 7.04vh;}
.about-list ul li a::after{ content: ""; background: #1b1e53; height: 3px; width: 32px; display: inline-block; bottom: 0; left: 0; position: absolute; transition: all 0.3s ease-in;}
.about-list ul li a:hover::after{ width: 50px;}


.about-adv{ width: 100%; background: #fff; display: block; border: 10px solid #72a248; border-image: url(https://www.tznongyun.cn/images/border_image.png)  10 repeat; box-sizing: border-box; font-size: 0; min-height: 446px; }
.about-adv{  position: relative; }
.about-adv aside{  display: inline-block; width: 50%; background: #f1f1f1 url(https://www.tznongyun.cn/images/adv.jpg) no-repeat bottom left; height: 100%; vertical-align: top; color: #83c346; font-size: 72px; font-family: "Oswald"; text-transform: uppercase; text-align: right; line-height: 86px; box-sizing: border-box; padding: 120px 97px 0 0; min-height: 446px;}
.about-adv article{ width: 50%; display: inline-block; box-sizing: border-box; padding: 40px 0 0 104px;}
.about-adv article ul{ max-width: 490px;}

.about-adv article ul,.about-adv article ul li{ width: 100%; float: left;}
.about-adv article ul li{ height: 60px; position: relative; padding-top: 12px; box-sizing: border-box;}

.about-adv article ul li::after{ content: ""; width: 100%; height: 3px; background: #f1f1f1; display: block; position: absolute; bottom: 0; left: 0;}

.about-adv article ul li h3{ line-height: 48px; float: left; font-size: 16px; color: #1b1e53;}
.about-adv article ul li span{ left: 0; top: 0; height: 60px; position: absolute; box-sizing: border-box; z-index: 1; width: 0; transition:  all 3s ease;}
.about-adv article ul li span i{ width: 100px; text-align: right; position: absolute; bottom: 0; left: 390px; height: 48px; float: left; z-index: 1; line-height: 48px; font-size: 14px; color: #1b1e53;}
.about-adv article ul li span::after{ content: ""; width: 100%; position: absolute; bottom: 0; left: 0; height: 3px; background: #171717; float: left; z-index: 1;}


.about-History{width: 100%; display: block; padding: 57px 0 83px;}



/* 本例子css */
.slideBox{ width:1140px; height:300px; overflow:hidden; position:relative; margin: 0 auto;}
.slideBox .bd{ position:relative; height:100%; z-index:0; text-align: center;}
.slideBox .bd li{ zoom:1; vertical-align:middle; }
.slideBox .bd li h3{ font-family: Oswald; font-size: 36px; color: #1b1e53; line-height: 77px;}
.slideBox .bd li p{ font-size: 16px; color: #959595; line-height: 27px; margin: 26px 0 38px; width: 100%; box-sizing: border-box; padding: 0 200px;}
.slideBox .bd li h4{ font-family: Oswald; font-size: 24px; color: #83c346; line-height: 40px;}



/* 下面是前/后按钮代码，如果不需要删除即�? */
.slideBox .prev,
.slideBox .next{ position:absolute; left: 0; top:50%;  float: left; margin-top: -6px; width: 0;  height: 0; border-width: 12px 12px 12px 0; border-style: solid; border-color: transparent #83c346 transparent transparent; opacity: 0.7; }
.slideBox .next{ left:auto; right: 0; border-width:12px 0 12px 12px;  border-color:transparent transparent transparent #000;/*透明 透明 透明 �?*/ }
.slideBox .prev:hover,
.slideBox .next:hover{ filter:alpha(opacity=100);opacity:1;  }




/* about common*/


.jsz{width: 83.4vw; margin: .5rem 0; box-sizing: border-box; padding: 1.3rem 0; background: #fff; text-align: center;}
.jsz img{ max-width: 10rem; width: 100%;}






.contact-about{ width: 100%; display: block; text-align: center; padding: 1rem 0; background: #fff;}
.contact-about h2{ font-size: .45rem; font-weight: bold; font-family: arial block}
.contact-about p{ font-size: .18rem;  font-weight: bold; font-family: "AvenirNextLTPro-UltLt"; width: 6rem; line-height: .24rem; margin: .4rem auto .6rem;}
.contact-about a{ color: #fff; padding: 0 38px; line-height: 48px; display: inline-block; z-index: 2; overflow: hidden; position: relative; font-size: 14px; text-transform: uppercase;}
.contact-about a::before{ content: ""; background: #72a248; width: 110%; height: 100%; position: absolute; right: 10px; top: 0; transform: skewX(-15deg); z-index: -1; transition: all 0.3s ease-in-out;}
.contact-about a:hover::before{ background: #000;}





.xx_more{ color: #fff; padding: 0 .38rem; margin: .2rem 0; background: #20853a; line-height: .48rem; display: inline-block; z-index: 2; overflow: hidden; position: relative; font-size: .14rem; text-transform: uppercase;}
.xx_more:hover{ background: #000;}
/* page */
.page_zt { width: 100%; display: block; margin: .2rem 0 .5rem; text-align: center;}
.page_zt .page_r { width: auto; display: inline-block; height: .42rem;}
.page_zt .page_r a,
.page_zt .page_r .ym2 { height: .42rem; margin: 0 3px; width: .42rem; border: 1px solid #e0e0e0; border-radius: 2px; box-sizing: border-box; color: #000; text-align: center; display: inline-block; line-height: .42rem; font-size: .12rem;}
.page_zt .page_r a.page_prev,.page_zt .page_r a.page_next { line-height: .42rem; font-family: iconfont; position: relative; display: inline-block; vertical-align: top}
.page_zt .page_r a.page_next::after{ content: "\e601";}
.page_zt .page_r a.page_prev::after{ content: "\e65a";}

.page_zt .page_r .ym { font-family: arial;}
.page_zt .page_r a:hover {  border-color: #535865; cursor: pointer; }
.page_zt .page_r .ym2 { border-color: #535865; cursor: pointer; }
.page_zt .page_r .ym2:hover { opacity: .7; cursor: pointer;}

.Content .main > center{ width: 100%; font-size: .16rem; margin: 1rem 0; }
.newslist > center{ width: 100%; font-size: .16rem; margin: 1rem 0;  min-height: 60vh}



/*download*/
.download{ width: 1000px; margin: .5rem auto; background: #fff;}
.download li{ width: 100%; display: block;}
.download li > div.img{ float: left; width: 30%; box-sizing: border-box; padding: 30px; border: 1px solid #ccc;}

.download li .img img { max-width: 100%;}
.download li dt { margin-bottom: 20px; font-size: 20px;}
.download li dl { float: right; width: 650px;}
.download li dl a { color: #333; padding: 5px; border-radius: 4px; border:1px solid #ddd; line-height: 20px; height: 20px; display: inline-block;}
.download li dl img { margin-right: 10px; width: 18px;}





/*  wap */
@media screen and (max-width: 736px) {

    .banner-content{ width: 100%; height: 2.4rem; display: block; position: relative;}
    .banner-content .text{ position: absolute; transform: translateY(-30%); left: 0; text-align: center; width: 100%; margin-left: 0; top: 50%; box-sizing: border-box;}
    .banner-content .text h2{ font-size: .36rem; color: #fff; font-weight: bold; display: block; text-shadow: -8px 8px 0 #20853a;}
    .banner-content .text h3{ font-size: .24rem; color: #fff; font-weight: bold; text-shadow: -8px 8px 0 #20853a;}
    




    .nav-list{ box-sizing: border-box; box-sizing: border-box; padding: 0 .2rem;}
    .nav-list > h2{ width: 100%; margin: 0; padding: 0; border-bottom: 1px solid #ddd;}
    .nav-list > ul{ padding: 0;}
    .nav-list > ul li{ margin: 0 0 .1rem; width: 50%; font-size: .13rem}

    .contact-about{ padding: .5rem .2rem; box-sizing: border-box;}
    .contact-about h2{ font-size: .24rem;}
    .contact-about p{ width: 100%; font-size: .14rem; margin: .2rem auto .3rem;}

    .xx_more{ margin: .2rem;}
    .xx_more:hover{ background: #20853a;}



    .about-common{ margin-bottom: .28rem;}
    .about-common .main .title{ margin: .3rem 0 .2rem;}
    .about-common .main .title::before,.about-common .main .title::after{ width: .8rem;}
    
        
    
}