@charset "utf-8";
/* CSS Document */
html, body {background: #f3f3f3!important;}

#about{ position: relative;z-index: 5; background: #f3f3f3; margin: 0 auto; padding-bottom: 50px;}


#about .profile{background: url("../img/about_profile_bg.png") no-repeat; background-position: right bottom; padding: 100px 0;}
#about .profile .img{width: 40%; text-align: left;}
#about .profile .img>img{width: 100%;height: auto;}
#about .profile .box{width: 60%; box-sizing: border-box; padding-left: 6%; text-align: left;}
#about .profile .box>.tit{ padding: 30px 0; font-weight: 700; font-size: 56px; color: #222;}
#about .profile .box>.tit>p{font-size: 30px;}
#about .profile .box>.txt{ color: #444; font-size: 16px; line-height: 28px;}
#about .profile .box>.txt>p{margin-bottom: 30px;}


#about .honor{ position: relative;}
#about .honor .img{width: 60%; text-align: left;}
#about .honor .img>img{width: 100%;height: auto;}
#about .honor .box{ position: absolute; z-index: 3; left: 0;top: -6%; width: 45%; height: 100%; padding-left: 20%; padding-top: 6%; box-sizing: border-box; overflow: hidden; background: rgba(38,87,161,1); text-align: left;}
#about .honor .box:after{position: absolute;z-index: 1;bottom: -50px;right: -50px; width: 100%;height: 100%;opacity: .051; background: url("../img/robot.png") no-repeat; background-position: right bottom; background-size:720px auto; content: '';}
#about .honor .box>.tit{ position: relative; z-index: 6; padding: 20px 0; font-weight: 700; font-size: 56px; color: rgba(255,255,255,1);}
#about .honor .box>.tit:after{position: absolute;z-index: 3;left: 0;bottom: 0;width: 70px;height: 2px;background: rgba(255,255,255,1);content: '';}
#about .honor .box>.tit>p{font-size: 30px;}
#about .honor .box>.txt{ position: relative;z-index: 5; padding-top: 50px; color:rgba(255,255,255,.9); font-size: 16px; line-height: 32px;}
#about .honor .box>.txt>p{margin-bottom: 10px;}




#about .video{margin: 0 auto; padding: 80px 0;}
#about .video>.tit{text-align: center; padding: 30px 0;}
#about .video>.tit>h3{display: block;font-size: 24px;font-weight:bold; color: #333; line-height: 46px;}
#about .video>.statistics{margin: 0 auto; width: 76%; padding: 100px 0;}
#about .video>.statistics>ul{margin: 0 auto;}
#about .video>.statistics>ul>li{display: block;float: left;width: 20%; text-align: center;}
#about .video>.statistics>ul>li>.num{color: rgba(38,87,161,1); background-image:-webkit-linear-gradient(bottom,rgba(38,87,161,1),rgba(65,126,255,1)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size: 30px;}
#about .video>.statistics>ul>li>.num>span{font-size: 78px; font-family: Arial; font-weight: bold; letter-spacing: -2px;}
#about .video>.statistics>ul>li>.txt{ font-weight: 500;font-size: 16px; color: #555;}
#about .video>.container{ position: relative; text-align: center;margin: 0 auto;}
#about .video>.container>a{ position: absolute;z-index: 3; top: 50%; left: 50%; margin-left: -55px;margin-top: -55px; width: 110px;height: 110px;}
#about .video>.container>a:after{position: absolute;z-index: 4; left: 50%; top: 50%; margin-left: -8px; margin-top: -10px; width: 0; height: 0; border-top: 10px solid transparent; border-left: 20px solid rgba(255,255,255,1); border-bottom: 10px solid transparent; content: '';}
#about .video>.container>a:before{position: absolute;z-index: 3;left: 0;bottom: -40px; width: 100%;padding: 10px 0; color: rgba(255,255,255,1); text-align: center; font-size: 16px;font-weight: bold; content: 'VIDEO'; transition: all .35;}
#about .video>.container>a>img{width: 100%;height: auto; animation: myrotate 1s linear infinite;}
#about .video>.container>.video-img{ position: absolute;z-index: 2;left: 0;top: 0;width: 100%;height: 100%;}
#about .video>.container>.video-source{  width: 70%;height: 70%;}



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

    #about .honor .box{ width: 50%;padding-top: 3%;}
    #about .honor .box:after{background-size:500px auto; }
    #about .profile .box>.tit{ font-size: 46px;}
    #about .profile .box>.tit>p{font-size: 24px;}

    #about .honor .box>.tit{ font-size: 46px;}

    #about .video>.statistics{ width: 86%;}
    #about .video>.statistics>ul>li>.num>span{font-size: 64px; }
    #about .video>.statistics>ul>li>.txt{font-size: 15px;}

}


@media only screen and (max-width: 1280px){
    #about .profile .box>.txt{ font-size: 15px; line-height: 26px;}

    #about .honor .box{ width: 65%;padding-left: 30%; }
    #about .honor .box>.tit{ font-size: 36px;}

    #about .video>.tit>h3{font-size: 20px;}

}


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

    #about .profile .img{width: 100%; height: 360px; float:none;overflow: hidden;}
    #about .profile .img>img{position: relative;z-index: 1;top: -65%;}
    #about .profile .box{width: 100%; float:none; padding-left: 0;}

    #about .honor .img{width: 100%; float: none;}
    #about .honor .box{ float: none; position: relative; top: 0; width: 100%; height: auto; padding: 7%;}
    #about .honor .box:after{background-size:36% auto; }
    #about .honor .box>.txt>p{display: block;float: left;width: 50%;}


    #about .video>.tit>h3{font-size: 16px; line-height: 28px;}
    #about .video>.statistics{padding: 30px 0;}
    #about .video>.statistics>ul>li{width: 33.33%; margin-bottom: 20px;}
    #about .video>.statistics>ul>li>.num>span{font-size: 42px; }


}

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

    #about .video>.tit>h3{font-size: 14px; line-height: 24px;}
    #about .video>.statistics>ul>li{width: 50%;}
    #about .video>.statistics>ul>li>.num>span{font-size: 56px; }
}

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

    #about .profile .img{height: 240px;}

    #about .profile .box>.tit{ padding: 20px 0; font-size: 28px; }
    #about .profile .box>.tit>p{font-size: 18px;}
    #about .profile .box>.txt{  font-size: 14px; line-height: 24px;}
    #about .profile .box>.txt>p{margin-bottom: 20px;}

    #about .honor .box>.tit{ font-size: 28px;}
    #about .honor .box>.txt>p{font-size: 14px;}


    #about .video>.tit>h3{font-size: 13px;}
    #about .video>.statistics>ul>li{ margin-bottom: 10px;}
    #about .video>.statistics>ul>li>.num>span{font-size: 36px; }
    #about .video>.statistics>ul>li>.txt{ height: 40px; font-size: 14px;}

    #about .video>.container>a{ margin-left: -35px;margin-top: -35px; width: 70px;height: 70px;}

    #about .video>.container>.video-source{  width: 100%;height: 100%;}

}


@media only screen and (max-width: 420px){
    #about .profile .box>.tit{ font-size: 24px; }
    #about .profile .box>.tit>p{font-size: 16px;}
    #about .profile .img{height: 200px;}

    #about .honor .box>.tit{ font-size: 24px;}
    #about .honor .box>.txt{padding-top: 30px;}
    #about .honor .box>.txt>p{font-size: 12px;}
    #about .video{padding: 50px 0;}
    #about .video>.statistics>ul>li>.txt{ height: 32px; font-size: 12px;}
}
















@keyframes myrotate {

    0%{transform:rotate(0deg);}
    25%{transform:rotate(90deg);}
    50%{transform:rotate(180deg);}
    75%{transform:rotate(270deg);}
    100%{transform:rotate(360deg);}

}

@-webkit-keyframes myrotate {

    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}

}