@charset "utf-8";

@import url('https://fonts.font.im/css?family=Rubik');


#about{margin: 0 auto; }

#about .profile{margin: 0 auto; padding: 100px 0; background: url("../img/about_bg.png") no-repeat; background-position: right bottom;}
#about .profile>.title{text-align: left;}
#about .profile>.title>h3{display: inline-block; font-size: 3.6rem;}
#about .profile>.layout{ margin: 0 auto; padding: 50px 0;}
#about .profile>.layout .container{ width: 60%; text-align: left; }
#about .profile>.layout .container>.content{font-size: 1.6rem; font-weight: 200; line-height: 2.4rem; color: #666;}
#about .profile>.layout .container>.content>p{ margin-bottom: 20px;}



#about .video{position: relative; background: #2b2b2b url(../img/video_img.jpg) no-repeat; background-attachment: fixed; background-size: cover; height: 460px; margin: 0 auto;}
#about .video:after{position: absolute;z-index: 1; left: 0;top: 0; width: 100%;height: 100%; background: rgba(0,165,245,.1); opacity: 0; content: '';transition: all .35s;}
#about .video:hover:after{opacity: 1;}
#about .video>a{display: block;position: absolute;z-index: 20; left: 50%; top: 50%;text-align: center; transform: translate(-50%,-50%); transition: all .35s;}
#about .video>a:hover{ transform: translate(-50%,-50%) scale(.9);}
#about .video>a i{display: block; font-size: 10rem; color: #fff;}
#about .video>a span{display: block; margin-top: 10px; font-size: 2rem; color: #fff;transition: all .35s;}


#about .statistics{margin: 0 auto; background: #00a2f5 url("../img/statistics_bg.jpg") no-repeat; background-position: right bottom; background-size: cover;}
#about .statistics>.layout{margin: 0 auto; padding: 80px 0;}
#about .statistics>.layout .rows{display: block; float: left; width: 33.33%; text-align: center; box-sizing: border-box;padding: 0 25px;}
#about .statistics>.layout .rows>.num{color: #fff; font-family: 'Rubik', sans-serif; font-size: 6rem; font-weight: 900;}
#about .statistics>.layout .rows>.tit{ height: 40px; line-height: 2rem; font-size: 1.6rem; font-weight: 200; color: rgba(255,255,255,.8); margin-top: 10px;}


#about .advantage{margin: 0 auto; padding: 100px 0;}
#about .advantage>.title{text-align: left;}
#about .advantage>.title>h3{display: inline-block; font-size: 3.6rem;}
#about .advantage>.layout{ margin: 0 auto; padding: 50px 0;}
#about .advantage>.layout .container{ width: 65%; text-align: left; }
#about .advantage>.layout .container>.content{font-size: 1.6rem;font-weight: 200;  line-height: 2.4rem; color: #666;}
#about .advantage>.layout .container>.content>p{ margin-bottom: 20px;}
#about .advantage>.layout .project{ width: 22%; text-align: left; }
#about .advantage>.layout .project>.rows{display: block; margin-bottom: 25px; color: #00a2f5;}
#about .advantage>.layout .project>.rows>i{display: inline-block;vertical-align: middle; font-size: 3.2rem;}
#about .advantage>.layout .project>.rows>span{display: inline-block; vertical-align: middle;margin-left: 10px; font-size: 1.4rem;}


#about .factory{margin:0 auto; position: relative; }
#about .factory .swiper {margin: 0 auto; position: relative;}
#about .factory .swiper .prev, #about .factory  .swiper .next{position: absolute;z-index: 50;left: 10%; top: 50%; background: rgba(0,0,0,.4); width: 46px; height: 46px; line-height: 46px; border-radius: 100%; color: #fff; text-align: center; cursor: pointer; transition: all .35s;}
#about .factory .swiper .prev i, #about .factory  .swiper .next i{font-size: 2rem; font-weight: 100;}
#about .factory .swiper .next{right: 10%; left: auto; }
#about .factory .swiper .prev:hover, #about .factory .swiper .next:hover{ background: rgba(0,162,245,.8) }
#about .factory .swiper .swiper-slide { position: relative; width:980px;transition-timing-function:linear; overflow:hidden;}
#about .factory .swiper .swiper-slide:after{position: absolute;z-index: 2; left: 0;top: 0; width: 100%;height: 80%;opacity: 0; background:linear-gradient(to bottom, rgba(0,0,0,.8),rgba(0,0,0,0)); content: ''; transition: all .35s;}
#about .factory .swiper .swiper-slide .title{ position:absolute;z-index:50;left:50%;top:0;width:100%;opacity:0; padding:80px 0; text-shadow: 0 2px 5px rgba(0,0,0,.2); transform: translate(-50%,-50%); font-size: 2.4rem; font-weight: bold; color: #fff; text-align:center; transition:all .35s;}
#about .factory .swiper .swiper-slide img{position: relative;z-index: 1;opacity: .5; filter: grayscale(100%); transition: all .35s;}
#about .factory .swiper .swiper-slide-active:after{opacity: 1;}
#about .factory .swiper .swiper-slide-active .title{opacity: 1; transform: translate(-50%,50px);}
#about .factory .swiper .swiper-slide-active img{opacity: 1;filter: grayscale(0)}






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


    #about .profile{ background-size: 90% auto;}

    #about .advantage>.layout .project{ width: 25%; }

    #about .factory .swiper .swiper-slide { width:860px;}
}


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

    #about .profile>.layout .container{ width: 70%; }

    #about .advantage>.layout .project{ width: 30%; }

    #about .statistics>.layout .rows>.num{font-size: 5rem;}

    #about .factory .swiper .swiper-slide { width:760px;}
}

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


    #about .profile>.title>h3 {font-size: 3rem;}
    #about .profile>.layout{ padding: 30px 0;}
    #about .profile>.layout .container{ width: 100%; float: none; }


    #about .statistics>.layout .rows>.tit{font-size: 1.4rem;}


    #about .advantage>.title>h3 {font-size: 3rem;}
    #about .advantage>.layout{ padding: 30px 0;}
    #about .advantage>.layout .container{ width: 100%; float: none;}
    #about .advantage>.layout .project{ width: 100%; float: none; padding-top: 30px; }
    #about .advantage>.layout .project>.rows{float: left; width: 33.33%; text-align: center;}
    #about .advantage>.layout .project>.rows>i{display: block; margin-bottom: 10px; font-size: 4rem;}


    #about .factory .swiper .swiper-slide { width:700px;}
    #about .factory .swiper .swiper-slide .title{font-size: 2rem;}



}


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

    #about .video>a i { font-size: 8rem;}
    #about .video>a span { font-size: 1.8rem;}

    #about .factory .swiper .swiper-slide { width:600px;}
    #about .factory .swiper .swiper-slide-active .title {transform: translate(-50%,20px);}
}




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

    #about .video { height: 350px;}
    #about .video>a i { font-size: 6rem;}
    #about .video>a span { font-size: 1.6rem;}

    #about .statistics>.layout .rows{ float: none; width: 100%;}


    #about .advantage{padding-bottom: 50px;}
    #about .advantage>.layout .project>.rows{ width: 50%;}
    #about .factory .swiper .swiper-slide { width:72%;}

}

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


    #about .profile{ background-size: auto 300px;}
    #about .profile>.title>h3{ font-size: 2.8rem;}
    #about .profile>.layout .container>.content{font-size: 1.4rem; line-height: 2rem;}

    #about .statistics>.layout{ padding: 50px 0;}
    #about .statistics>.layout .rows{margin-bottom: 10px}
    #about .statistics>.layout .rows>.num{font-size: 4rem;}
    #about .statistics>.layout .rows>.tit{ height: auto; }

    #about .video { height: 300px;}

    #about .advantage>.title>h3{font-size: 2.8rem;}
    #about .advantage>.layout .container>.content{font-size: 1.4rem; line-height: 2rem;}

    #about .factory .swiper .swiper-slide { width:100%;}
    #about .factory .swiper .swiper-slide-active .title{opacity: 1; transform: translate(-50%,-30px);}

}