@charset "utf-8";
/* CSS Document */

#about{margin: 0 auto; transition: all .35s; }
#about.active {transform: translateX(-220px);}

#about .profile{ position: relative; margin:0 auto 80px auto;overflow:hidden;}
#about .profile>.img{ position: absolute ; width:50%; height: 100%; background-position: left top; background-size: cover; background-repeat: no-repeat; text-align:left;}
#about .profile>.img>img{width:100%;height:auto;}
#about .profile>.box{ width:50%; text-align:left; box-sizing: border-box;
/*padding:2%  8%;*/
padding: 2% 8% 5% 3%;
    
}
#about .profile>.box>.slogan{ position:relative; font-size: 2.4rem; margin-bottom: 30px; text-transform:uppercase; color:rgb(219 38 29);}
#about .profile>.box>.slogan:after{position: absolute;z-index: 2; left: 0;bottom: -10px;width: 60px;height: 2px; background: rgb(219 38 29);content: '';}
#about .profile>.box>.text{ font-size:1.6rem; line-height:3rem; color:#666;}
#about .profile>.box>.text>p{margin-bottom:20px;}

#about .statistics{ overflow:hidden; margin:0 auto; padding:120px 0; background: url("../img/statistics_bg.jpg") no-repeat; background-size: cover;}
#about .statistics>.wrap{margin:0 auto; width:100%; max-width:1200px;}
#about .statistics .item{margin-bottom:12px;}
#about .statistics .item>.box-left{background: rgb(219 38 29);width: 340px;padding:170px 0;margin-right: 12px;transition: all 1s;}
#about .statistics .item>.box-left .text{font-size: 1.8rem;color: #fff;line-height: 30px;font-weight: bold;text-align: center;transition:all .5s;}
#about .statistics .item>.box-left .years{font-size: 60px;color: #fff;text-align: center;font-weight: bold;margin-top: 20px;margin-bottom: 40px;transition:all .5s;}
#about .statistics .item>.box-left .years>span {font-size:16px;color: #fff;line-height: 30px;transition:all .5s;}
#about .statistics .item>.box-left:hover{background:rgba(255,255,255,1);}
#about .statistics .item>.box-left:hover .text, #about .statistics .item>.box-left:hover .years, #about .statistics .item>.box-left:hover .years>span{ color:rgb(219 38 29);}
#about .statistics .item>.box-right{ width:calc(100% - 352px);}
#about .statistics .item>.box-right .box-ins-up{margin:0 auto 12px auto; width:100%; position:relative;}
#about .statistics .item>.box-right .box-ins-up>.box-profile{ width:400px; height:282px; border: 1px solid rgba(53,59,73,.2);padding: 90px 40px 70px 40px; box-sizing:border-box; text-align:left;transition: all .8s;}
#about .statistics .item>.box-right .box-ins-up>.box-profile .icon{width: 83px;margin-bottom: 15px;}
#about .statistics .item>.box-right .box-ins-up>.box-profile .icon>img{ width:100%;height:auto;}
#about .statistics .item>.box-right .box-ins-up>.box-profile .text{font-size: 18px;color:rgba(53,59,73,1);line-height: 30px;max-height: 30px;overflow: hidden;}
#about .statistics .item>.box-right .box-ins-up>.box-profile:hover{border:1px solid rgba(53,59,73,.7);}
#about .statistics .item>.box-right .box-ins-up>.box-honor{ width:437px; height:282px; padding:50px 30px; box-sizing:border-box; background:#fff; position: relative; text-align:left; transition: all .8s;}
#about .statistics .item>.box-right .box-ins-up>.box-honor>.icon{position:absolute;z-index:3; right:40px; bottom:60px; width:90px;height:90px;overflow:hidden;}
#about .statistics .item>.box-right .box-ins-up>.box-honor>.icon>img{ position:absolute;left:0;top:0; width:100%; height:auto;opacity:.5;}
#about .statistics .item>.box-right .box-ins-up>.box-honor>.title {font-size: 1.8rem;color: #444;line-height: 30px;font-weight: bold;max-height: 30px;overflow: hidden;margin-bottom: 10px;transition: all .8s;}
#about .statistics .item>.box-right .box-ins-up>.box-honor>.text>p{padding-top:5px; font-size:1.4rem; font-weight:600; color:#666; transition:all .5s;}
#about .statistics .item>.box-right .box-ins-up>.box-honor>.text>p a{display:inline-block; transition:all .5s;}
#about .statistics .item>.box-right .box-ins-up>.box-honor>.text>p a>span{font-size:20px; color:rgb(219 38 29); transition:all .5s;}
#about .statistics .item>.box-right .box-ins-up>.box-honor>.text>p a:hover>span{color:#fff; text-decoration:underline;}
#about .statistics .item>.box-right .box-ins-up>.box-honor:hover{background:rgb(219 38 29);}
#about .statistics .item>.box-right .box-ins-up>.box-honor:hover .title{color:#fff;}
#about .statistics .item>.box-right .box-ins-up>.box-honor:hover .text>p{color:rgba(255,255,255,.8);}
#about .statistics .item>.box-right .box-ins-up>.box-honor:hover .text>p a{color:rgba(255,255,255,1); transition: all .35s;}
#about .statistics .item>.box-right .box-ins-up>.box-honor:hover .text>p a>span{color:rgba(255,255,255,1)}
#about .statistics .item>.box-right .box-ins-up>.box-honor .text>p a:hover{text-decoration: underline;}
#about .statistics .item>.box-right .box-ins-up>.box-honor:hover .icon>img{ top:-90px;opacity:1;}
#about .statistics .item>.box-right .box-ins-down>.box-staff{ width:400px; height:256px; padding:70px 30px; box-sizing:border-box; background:#fff; position: relative; text-align:left; transition: all .8s;}
#about .statistics .item>.box-right .box-ins-down>.box-staff>.icon{position:absolute;z-index:3; right:40px; bottom:60px; width:90px;height:90px;overflow:hidden;}
#about .statistics .item>.box-right .box-ins-down>.box-staff>.icon>img{ position:absolute;left:0;top:0; width:100%; height:auto;opacity:.5;}
#about .statistics .item>.box-right .box-ins-down>.box-staff>.title {font-size: 1.8rem;color: #444;line-height: 3rem;font-weight: bold;max-height: 30px;overflow: hidden;margin-bottom: 10px;transition: all .8s;}
#about .statistics .item>.box-right .box-ins-down>.box-staff>.text{padding-top:3px; font-size:60px; font-weight:600; color:rgb(219 38 29);transition:all .5s;}
#about .statistics .item>.box-right .box-ins-down>.box-staff:hover{background:rgb(219 38 29);}
#about .statistics .item>.box-right .box-ins-down>.box-staff:hover .title{color:#fff;}
#about .statistics .item>.box-right .box-ins-down>.box-staff:hover .text{color:rgba(255,255,255,1);}
#about .statistics .item>.box-right .box-ins-down>.box-staff:hover .icon>img{ top:-90px;opacity:1;}
#about .statistics .item>.box-right .box-ins-down>.box-field{ width:437px; height:256px; padding:70px 30px; box-sizing:border-box; border: 1px solid rgba(53,59,73,.2); position: relative; text-align:left; transition: all .8s;}
#about .statistics .item>.box-right .box-ins-down>.box-field>.icon{position:absolute;z-index:3; right:10px; bottom:60px; width:120px;height:120px;overflow:hidden;}
#about .statistics .item>.box-right .box-ins-down>.box-field>.icon>img{ position:absolute;left:0;top:0; width:100%; height:auto;opacity:1;}
#about .statistics .item>.box-right .box-ins-down>.box-field>.title {font-size: 1.8rem;color: rgba(53,59,73,1);line-height: 2.4rem;font-weight: bold;overflow: hidden;margin-bottom: 10px;transition: all .8s;}
#about .statistics .item>.box-right .box-ins-down>.box-field>.text{padding-top:5px; box-sizing:border-box; padding-right:100px; font-size:14px; color:#fff;transition:all .5s;}
#about .statistics .item>.box-right .box-ins-down>.box-field:hover{border:1px solid rgba(53,59,73,.7);}
#about .statistics .item>.box-factory {width: 545px; height:280px; padding:20px 20px 15px 35px;border: 1px solid rgba(53,59,73,.2);box-sizing:border-box; text-align:left;transition: all .8s;}
#about .statistics .item>.box-factory .con{width:33%;}
#about .statistics .item>.box-factory .con>.title{font-size:1.8rem;color: rgba(53,59,73,1);font-weight: bold;}
#about .statistics .item>.box-factory .con>.title>span{font-size:6rem;}
#about .statistics .item>.box-factory .con>.text{font-size:1.4rem;color: rgba(53,59,73,1);line-height: 2.4rem;}
#about .statistics .item>.box-factory .img{padding:0;}
#about .statistics .item>.box-factory .img>img{max-width:100%;height:auto;}
#about .statistics .item>.box-application{ width:645px; height:280px; padding:70px; box-sizing:border-box; background:#fff; position: relative; text-align:left; transition: all .8s;}
#about .statistics .item>.box-application>.icon{ position:relative; width:90px;height:90px;overflow:hidden;}
#about .statistics .item>.box-application>.icon>img{ position:absolute;left:0;top:0; width:100%; height:auto;opacity:.5;}
#about .statistics .item>.box-application>.text{padding-top:5px; font-size: 14px;color: #666;line-height: 24px;transition:all .5s;}
#about .statistics .item>.box-application:hover{background:rgb(219 38 29);}
#about .statistics .item>.box-application:hover .text{color:rgba(255,255,255,1);}
#about .statistics .item>.box-application:hover .icon>img{ top:-90px;opacity:1;}




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

    #about .profile>.box>.slogan{ font-size:4rem;}


}

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

    #about .profile>.box>.slogan{ font-size:3.6rem;}


}

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

    #about .profile>.img{ width:40%;}
    #about .profile>.box{ width:60%; }


}




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

    #about .statistics .item{padding:0 60px; box-sizing:border-box; margin-bottom:12px;}
    #about .statistics .item>.box-left{ float:none; width: 100%;padding:30px 0;margin-right: 0; margin-bottom:12px;}
    #about .statistics .item>.box-left .text{font-size: 1.8rem;}
    #about .statistics .item>.box-left .years{font-size: 30px;margin-top:10px;margin-bottom: 20px;}
    #about .statistics .item>.box-left .years>span {font-size:1.4rem;}
    #about .statistics .item>.box-right{ float:none; width:100%;}
    #about .statistics .item>.box-right .box-ins-up{margin:0 auto 12px auto; width:100%; position:relative;}
    #about .statistics .item>.box-right .box-ins-up>.box-profile{ float:none; width:100%; height:auto;padding:40px; margin-bottom:12px;}
    #about .statistics .item>.box-right .box-ins-up>.box-profile .icon{width: 60px;}
    #about .statistics .item>.box-right .box-ins-up>.box-profile:hover{border:1px solid rgba(255,255,255,.7);}
    #about .statistics .item>.box-right .box-ins-up>.box-honor{ width:100%; height:auto; padding:40px;}
    #about .statistics .item>.box-right .box-ins-up>.box-honor>.icon{bottom:20px;}
    #about .statistics .item>.box-right .box-ins-up>.box-honor>.text>p{ display:inline-block; width:40%;}
    #about .statistics .item>.box-right .box-ins-down>.box-staff{ float:none; width:100%; height:auto; padding:40px;}
    #about .statistics .item>.box-right .box-ins-down>.box-staff>.text{font-size:40px;}
    #about .statistics .item>.box-right .box-ins-down>.box-field{ float:none; width:100%; height:auto; padding:40px; margin-bottom:12px;}
    #about .statistics .item>.box-right .box-ins-down>.box-field>.icon{ bottom:20px;}
    #about .statistics .item>.box-factory { float:none; width: 100%; height:auto; padding:20px 40px; margin-bottom:12px;}
    #about .statistics .item>.box-application{ float:none; width:100%; height:auto; padding:40px;}

}

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

    #about .profile>.img{ float:none; width:100%;}
    #about .profile>.box{ float: none; width:86%; padding: 0; margin: 0 auto; }

    #about .profile>.box>.slogan{  font-size:3.2rem; }


}

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

    #about .profile>.box>.slogan{  font-size:2.4rem; }

    #about .profile>.box>.text{ font-size:1.4rem; line-height:2.4rem;}



    #about .statistics{padding:20px;}
    #about .statistics .item{padding:0;}
    #about .statistics .item>.box-right .box-ins-up>.box-honor>.icon{right:20px; bottom:40px;}
    #about .statistics .item>.box-right .box-ins-up>.box-honor>.text>p{ display:block; width:100%;}
    #about .statistics .item>.box-factory .con{width:100%;}

}



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




}