@charset "utf-8";

#about{margin: 0 auto;  }

#about>.profile{position: relative; margin: 0 auto; padding: 50px 0; }
#about>.profile .layout{margin: 0 auto;overflow: hidden; }
#about>.profile .introduce{ position: relative;z-index: 50; width: 48%; padding: 0 0 50px 0; transition: all .35s;}
#about>.profile .introduce>.title{ font-size:5rem; color: #333; display: flex; align-items: center;}
#about>.profile .introduce>.slogan{font-size: 5.6rem; text-transform: capitalize; font-weight: bold; color: #333;}
#about>.profile .introduce>.slogan>span{display: inline-block; color: #39a162;}
#about>.profile .introduce>.content{padding-top: 30px; font-size: 1.6rem; line-height: 2.8rem; color: #555;}
#about>.profile .introduce>.content>p{ margin-bottom: 20px;}
#about>.profile .introduce>.statistics{ display: flex; padding-top: 50px;}
#about>.profile .introduce>.statistics>.item{display: inline-block; flex: 0 0 25%;}
#about>.profile .introduce>.statistics>.item:last-child{margin-right: 0;}
#about>.profile .introduce>.statistics>.item>.num{ font-size:4rem;  font-weight: bold; color: #39a162;}
#about>.profile .introduce>.statistics>.item>.num>span{display: inline-block; font-family: "Arial Black"!important;}
#about>.profile .introduce>.statistics>.item>.num>em{font-style: normal; font-size: 2.4rem;}
#about>.profile .introduce>.statistics>.item>.title{font-size: 1.4rem; color: #999;}
#about>.profile .image{ position: absolute; z-index: 10;right: 0;top: 50px; width: 45%; height:70%;  transition: all .35s;}
#about>.profile .image>.img{display: block; width: 100%; height: 100%; visibility: visible;}
#about>.profile .image>.img>img{width: auto;height: 100%; object-fit: cover; transition: all .35s;}
#about>.profile .image>.statistics{ display: none; position: absolute;z-index: 10; left: -30%;bottom: 50px;width: 80%; box-sizing: border-box;padding: 30px 50px; background:  rgba(57,161,98,.8); }
#about>.profile .image>.statistics>.item{display: inline-block; flex: 0 0 25%;}
#about>.profile .image>.statistics>.item:last-child{margin-right: 0;}
#about>.profile .image>.statistics>.item>.num{ font-size:4rem;  font-weight: bold; color: #fff;}
#about>.profile .image>.statistics>.item>.num>span{display: inline-block; font-family: "Arial Black"!important;}
#about>.profile .image>.statistics>.item>.num>em{font-style: normal; font-size: 2.4rem;}
#about>.profile .image>.statistics>.item>.title{font-size: 1.4rem; color: #fff;}
#about>.statistics{ display: none; padding-bottom: 50px; margin: 0 auto;}
#about>.statistics>.layout{ display: flex; justify-content: space-between;}
#about>.statistics>.layout>.item{display: inline-block; flex: auto;}
#about>.statistics>.layout>.item:last-child{margin-right: 0;}
#about>.statistics>.layout>.item>.num{ font-size:5rem;  font-weight: bold; color: #333;}
#about>.statistics>.layout>.item>.num>span{display: inline-block; font-family: "Arial Black"!important;}
#about>.statistics>.layout>.item>.num>em{font-style: normal; font-size: 3rem;}
#about>.statistics>.layout>.item>.title{font-size: 1.6rem; color: #999;}

#about>.history{position: relative; margin: 0 auto; overflow: hidden; background: url("../img/history_bg.jpg") no-repeat; background-size: cover; background-position: 50% 50%;}
#about>.history .display{ position: absolute;z-index: 50; left: 50%;top: 50%; transform: translate(-50%,-50%);}
#about>.history .display>.theme{font-size: 5rem; color: #fff; text-align: left;}
#about>.history .display>.container{ position: relative; margin: 100px  auto 0 auto; }
#about>.history .display>.container>.swiper{ position: relative; margin: 0 auto; }
#about>.history .display>.container>.swiper .swiper-slide{padding: 20px;background: url("../img/history_timeaxis.png") repeat-x; background-position: left center; }
#about>.history .display>.container>.swiper .swiper-slide>.slide{ position: relative; height: 350px;transition: all .35s; }
#about>.history .display>.container>.swiper .swiper-slide>.slide>.years{ position: absolute; z-index: 20; font-size: 2.2rem; color: #fff; background: #39a162; border-radius: 100%; font-weight: bold;  width: 78px;height: 78px; display: flex; align-content: center;align-items: center; justify-content: center; transition: all .35s;}
#about>.history .display>.container>.swiper .swiper-slide>.slide>.line{position: absolute;z-index: 12; left: 40px; top: 0; height: 50%; width: 1px; margin-left: -1px; background: #999; transition: all .35s;}
#about>.history .display>.container>.swiper .swiper-slide>.slide>.box{position: absolute;z-index: 12; right: 0; width: 70%; top: 0; box-sizing: border-box;padding: 10px;}
#about>.history .display>.container>.swiper .swiper-slide>.slide>.box>.title{ font-size: 2rem; font-weight: bold; color: #fff; transition: all .35s;}
#about>.history .display>.container>.swiper .swiper-slide>.slide>.box>.intro{margin: 10px auto; text-align: left; overflow-x: hidden; overflow-y: auto;}
#about>.history .display>.container>.swiper .swiper-slide>.slide>.box>.intro>.row{font-size: 1.6rem;color: rgba(255,255,255,.8); line-height: 2rem;}
#about>.history .display>.container>.swiper .swiper-slide:nth-child(even)>.slide>.years{top: auto; bottom: 0;}
#about>.history .display>.container>.swiper .swiper-slide:nth-child(even)>.slide>.line{top: auto; bottom: 0; }
#about>.history .display>.container>.swiper .swiper-slide:nth-child(even)>.slide>.box{top: auto; bottom: 0;}
#about>.history .display>.container>.swiper .swiper-slide>.slide:hover{ transform: translateY(-20px); }
#about>.history .display>.container>.swiper .swiper-slide>.slide:hover .line{ transform: translateY(20px);background: #39a162;}
#about>.history .display>.container>.swiper .swiper-slide>.slide:hover .box>.title{color: #39a162;}
#about>.history .display>.container>.swiper .swiper-slide:nth-child(even)>.slide:hover{ transform: translateY(20px); }
#about>.history .display>.container>.swiper .swiper-slide:nth-child(even)>.slide:hover .line{ transform: translateY(-20px);}
#about>.history .display>.container>.swiper .swiper-slide:nth-child(even)>.slide:hover .box>.title{color: #39a162;}
#about>.history .display>.container>.control{ position: absolute;z-index: 1; left: 50%; top: 50%; width: 100%; transform: translate(-50%,-50%); display: block; }
#about>.history .display>.container>.control>.button{ display: flex; align-content: center; align-items: center; justify-content: space-between; }
#about>.history .display>.container>.control>.button>div{display: inline-flex; float: left; width: 46px;height: 46px; border: 1px solid rgba(255,255,255,.5); border-radius: 100%; align-items: center; align-content: center; justify-content: center; cursor: pointer; color: #666; transition: all .35s; }
#about>.history .display>.container>.control>.button>.prev{transform: translateX(-70px);}
#about>.history .display>.container>.control>.button>.next{transform: translateX(70px);}
#about>.history .display>.container>.control>.button .swiper-button-disabled{opacity: 0;}
#about>.history .display>.container>.control>.button>div>i{display: inline-block; font-size: 2rem; font-weight: bold; }
#about>.history .display>.container>.control>.button>div:hover{color: #39a162; border-color: #39a162;}
#about>.history .display>.container>.control>.swiper-pagination{position: relative;display: inline-block; flex: 1;height: 1px;background: #ccc;}
#about>.history .video{ position: relative; margin: 0 auto;padding:0;overflow: hidden;}
#about>.history .video>img{display: none; width: 100%;height: auto; object-fit: cover;}
#about>.history .video>video{border: 0;margin: 0 auto; width: 100%;height: auto;object-fit: fill;}
#about>.history .video:after{position: absolute;z-index: 1; left: 0;top: 0;width: 100%;height: 100%; background: rgba(0,0,0,.6); content: '';}


#about>.produce{margin: 0 auto; padding: 120px 0; background: url("../img/factory_bg.jpg") no-repeat; background-size: cover; background-attachment: fixed;}
#about>.produce .display>.theme{ margin: 0 auto; text-align: center; font-size:5rem; color: #18181b; }
#about>.produce .display>.container{margin: 0 auto;padding-top: 100px;}
#about>.produce .display>.container>.swiper{margin: 0 auto;}
#about>.produce .display>.container>.swiper .swiper-slide>a{ position: relative; display: block; border-radius: 16px;overflow: hidden; transition: all .35s;}
#about>.produce .display>.container>.swiper .swiper-slide>a:after{position: absolute;z-index: 124; left: 50%;top: 50%; width: 40px;height: 40px; line-height: 40px; background: rgba(255,255,255,.9); opacity: 0; transform: translateY(50px); box-shadow: 0 2px 8px rgba(0,0,0,.2); border-radius: 100%; margin-left: -20px; margin-top: -20px; text-align: center; font-family: iconfont; color: #39a162; font-weight: bold; font-size: 1.6rem; content: '\e715'; transition: all .35s;}
#about>.produce .display>.container>.swiper .swiper-slide>a>.img>img{width: 100%; height: auto; object-fit: cover; transition: all 1s;}
#about>.produce .display>.container>.swiper .swiper-slide>a>.title{ position: absolute;z-index: 12; left: 0; bottom: 0; width: 100%;padding: 20px; text-align: center; font-size: 1.6rem; box-sizing: border-box; background: rgba(0,0,0,.5); color: #fff; transition: all .35s;}
#about>.produce .display>.container>.swiper .swiper-slide>a:hover .img>img{transform: scale(1.1);}
#about>.produce .display>.container>.swiper .swiper-slide>a:hover .title{ background: rgba(57,161,98,.9); padding: 24% 20px; font-size: 2rem; height: 100%;}
#about>.produce .display>.container>.swiper .swiper-slide>a:hover:after{opacity: 1; transform: translateY(30px);}
#about>.produce .display>.container>.swiper .swiper-pagination{position: relative;bottom: 0; padding-top: 50px;}
#about>.produce .display>.container>.swiper .swiper-pagination .swiper-pagination-bullet-active{background: #39a162!important;}


@media only screen and (max-width: 1460px){

    #about>.profile{padding-bottom: 0;}
    #about>.profile .introduce>.slogan{font-size: 4.6rem; }
    #about>.profile .image>.statistics>.item{margin-right: 80px;}

    #about>.history .display>.theme{font-size: 4.6rem;}

    #about>.produce .display>.theme{ font-size:4.6rem; }

}

@media only screen and (max-width: 1380px){

    #about>.profile .introduce{ width: 48%;}

    #about>.profile .image{ width: 47%;}
    #about>.profile .image>.statistics>.item{margin-right: 60px;}
    #about>.profile .image>.statistics>.item>.num{ font-size:2.4rem;}
    #about>.profile .image>.statistics>.item>.num>em{font-size: 1.8rem;}


    #about>.produce .display>.container>.swiper .swiper-slide>a:hover .title{ font-size:1.8rem; }


}



@media only screen and (max-width: 1280px){


    #about>.profile .introduce>.slogan{font-size: 4rem; }
    #about>.profile .introduce>.content{ font-size: 1.4rem; line-height: 2rem; }
    #about>.profile .introduce>.statistics{ display: block;}
    #about>.profile .introduce>.statistics>.item { flex: auto; float: left;width: 50%; }

    #about>.history .display>.theme{font-size: 4rem;}
    #about>.history .display>.container>.swiper .swiper-slide>.slide>.box>.title { font-size: 1.8rem; }
    #about>.history .display>.container>.swiper .swiper-slide>.slide>.box>.intro>.row{font-size: 1.4rem; line-height: 2rem;}


    #about>.produce .display>.theme{ font-size:4rem; }


}




@media only screen and (max-width: 1200px){

    #about>.profile .introduce>.slogan{font-size: 3.6rem; }
    #about>.history .display>.theme{font-size: 3.6rem;}

    #about>.produce .display>.theme{ font-size:3.6rem; }


}


@media only screen and (max-width: 1080px){


    #about>.profile { padding: 0;}
    #about>.profile .wrap{max-width: 100%; width: 100%;}
    #about>.profile .introduce{ width: 86%; float: none; margin: 0 auto;}
    #about>.profile .image{ position: relative; width: 100%; height: auto;}
    #about>.profile .image>.img{height: auto;}
    #about>.profile .image>.img>img{width: 100%;height: auto;}

    #about>.history{ padding: 100px 0;}
    #about>.history .display {position: relative;left: 0;  top: 0;transform: translate(0,0); }
    #about>.history .display>.container>.control>.button>div{width: 36px;height: 36px;}
    #about>.history .display>.container>.control>.button>.prev{transform: translateX(-40px);}
    #about>.history .display>.container>.control>.button>.next{transform: translateX(40px);}
    #about>.history .video>img{display: none;}
    #about>.history .video>video{ display: none;}


}


@media only screen and (max-width: 860px){

    #about>.profile .introduce>.slogan{font-size: 3rem; }



    #about>.history{padding: 80px 0;}
    #about>.history .display>.theme{font-size: 3rem;}
    #about>.history .display>.container{width: 86%;}
    #about>.history .display>.container>.swiper .swiper-slide>.slide>.box>.title { font-size: 1.6rem;}

    #about>.produce{ padding: 80px 0;}
    #about>.produce .display>.theme{ font-size:3rem; }
    #about>.produce .display>.container { padding-top: 50px;}

}





@media only screen and (max-width: 640px){

    #about>.profile .introduce { padding-top: 50px; }
    #about>.profile .introduce>.slogan{font-size: 2.4rem; }
    #about>.profile .introduce>.statistics { padding-top: 30px; }

    #about>.history{padding: 50px 0;}
    #about>.history .display>.theme{font-size: 2.4rem;}

    #about>.history .display>.container>.swiper .swiper-slide>.slide>.years { font-size: 2rem;  width: 65px; height: 65px; left: 8px;}

    #about>.history .display>.container>.swiper .swiper-slide:nth-child(even)>.slide>.years{top: 0; bottom: auto;}
    #about>.history .display>.container>.swiper .swiper-slide:nth-child(even)>.slide>.line{top: 0; bottom: auto; }
    #about>.history .display>.container>.swiper .swiper-slide:nth-child(even)>.slide>.box{top: 0; bottom: auto;}
    #about>.history .display>.container>.swiper .swiper-slide:nth-child(even)>.slide:hover{ transform: translateY(-20px); }
    #about>.history .display>.container>.swiper .swiper-slide:nth-child(even)>.slide:hover .line{ transform: translateY(20px);}


    #about>.produce{ padding: 50px 0;}
    #about>.produce .display>.theme{ font-size:2.4rem; }
    #about>.produce .display>.container { padding-top: 30px;  }
    #about>.produce .display>.container>.swiper .swiper-pagination-bullet { margin: 0 3px!important; width: 6px!important; height: 6px!important; }


}
@media only screen and (max-width: 520px) {




}