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


#about{margin: 0 auto; padding: 60px 0;}
#about>.title{ text-align: center; margin: 0 auto;padding: 50px 0;}
#about>.title>h3{ font-size: 4rem; font-weight: normal; color: #333; margin: 0 auto;}


#about>.statistics{padding: 20px 0; width: 60%; text-align: center; margin: 0 auto;}
#about>.statistics .item{display: inline-block; float: left; width: 25%; vertical-align: top; box-sizing: border-box; text-align: center;}
#about>.statistics .item>.icon{text-align: center;}
#about>.statistics .item>.icon>i{font-size: 3rem; color: #999;}
#about>.statistics .item>.num{color: rgba(0,91,97,1); padding-bottom: 10px;}
#about>.statistics .item>.num>span{display: inline-block;vertical-align: top; font-size: 6rem; font-weight: bold; }
#about>.statistics .item>.num>em{ position: relative; top:30px;font-size: 2.4rem; padding: 0 5px; font-style: normal;}
#about>.statistics .item>.num>em.big{font-size: 4.2rem; font-weight: 200; top: 20px;}
#about>.statistics .item>.txt{font-size: 1.6rem; color: #999;}

#about>.profile{margin: 0 auto; padding: 50px 0;}
#about>.profile>.text{ font-size: 1.6rem; color: #333; line-height: 2.8rem;}
#about>.profile>.text>p{ margin-bottom: 20px;}

#about>.rd{position: relative; margin: 50px auto;}
#about>.rd .tab-box{ float: left; width: 64%;}
#about>.rd .tab-box>.tab-item{ position: relative; display:none; text-align: left;  background: #666;}
#about>.rd .tab-box>.tab-item>.box{position: absolute;z-index: 20; left: 0;top: 0; box-sizing: border-box;padding: 80px 10%; width: 70%; background: rgba(255,255,255,.8);}
#about>.rd .tab-box>.tab-item>.box>.tit{font-size: 3rem; color:rgba(14,189,201,1);}
#about>.rd .tab-box>.tab-item>.box>.txt{ padding: 20px 0; font-size: 2rem; line-height: 3rem; color: #666;}
#about>.rd .tab-box>.tab-item>.img{text-align: right;}
#about>.rd .tab-box>.tab-item>.img>img{width: 100%;height: auto;}
#about>.rd .tab-box>.current{display: block;}
#about>.rd .tab-nav{ position: absolute;z-index: 10; right: 0;top: 0; width: 36%; height: 100%; box-sizing: border-box;padding: 5% 0;  background: rgba(14,189,201,1);overflow: hidden;}
#about>.rd .tab-nav:after{position: absolute;z-index: 1; right:-10%;bottom: -25%; width: 100%;height: 100%; opacity: .085; background: url("../img/logo_big.png") no-repeat; content: '';}
#about>.rd .tab-nav>ul{ position: relative;z-index: 30; display: block;}
#about>.rd .tab-nav>ul>li{display: block; text-align: left;margin-bottom: 3px;}
#about>.rd .tab-nav>ul>li>a{ position: relative; display: block;  width: 300px;  font-size: 1.6rem; color: #fff; background: rgba(0,0,0,.5); height: 60px; line-height: 60px; padding: 0 20px; transition: all .35s;}
#about>.rd .tab-nav>ul>li>a:after{ position: absolute;z-index: 10; left: -30px; bottom: 0; width: 0;height: 0;border-bottom: 60px solid rgba(255,255,255,1);border-left: 30px solid transparent;opacity: 0; content: ''; transition: all .35s;}
#about>.rd .tab-nav>ul>li.active>a{width: 340px; background: rgba(255,255,255,1); color: rgba(0,91,97,1);}
#about>.rd .tab-nav>ul>li.active>a:after{opacity: 1;}

#about>.video{position: relative; margin: 0 auto; text-align: center;}
#about>.video>a{position: absolute; z-index: 30; display: block; top:50%; left:50%; width: 100px; height: 100px; transform: translate(-50%, -50%); }
#about>.video>a>.icon{width: 100%; height: 100%; background:url("../img/play_button.png") center/contain no-repeat;}
#about>.video>a:before{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:24px; height:24px; border-radius:50%; content:''; z-index: -1;}
#about>.video>a:after{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:24px; height:24px; border-radius:50%; content:''; z-index: -1; }
#about>.video>a:before{animation:scale 2s ease-out infinite; background:#fff; opacity:0.5; animation-delay:0;}
#about>.video>a:after{animation:scale2 2s ease-out infinite; background:#fff; opacity:0.3; animation-delay:0;}
#about>.video>.img{ position: relative; text-align: center; margin: 0 auto; border-radius: 50px;overflow: hidden;}
#about>.video>.img:after{position: absolute;z-index: 1; left: 0;top: 0;width: 100%;height: 100%; background: rgba(0,0,0,0); content: ''; transition: all .35s;}
#about>.video>.img>img{ width: 100%;height: auto;}
#about>.video>.img:hover:after{background: rgba(0,0,0,0);}
#about>.video>.media{ display: none; width: 86%;height: 530px; box-sizing: border-box;padding: 0 30px; background: #000; border-radius: 50px;overflow: hidden; margin: 0 auto; }
#about>.video>iframe{ display: none; width: 86%;height: 530px; box-sizing: border-box;padding: 0 30px; background: #000; border-radius: 50px;overflow: hidden; margin: 0 auto; }

@keyframes scale{0%{transform:translate(-50%, -50%) scale(1); opacity:.9} 100%{transform:translate(-50%, -50%) scale(7); opacity:0;}}
@keyframes scale2{0%{transform:translate(-50%, -50%) scale(1); opacity:.9;} 100%{transform:translate(-50%, -50%) scale(10);opacity:0;}}


#about>.nav{margin: 0 auto; padding: 50px 0 100px 0;}
#about>.nav .item{ display: block; float: left; width: 25%; padding: 0 30px; text-align: center; border-radius: 10px;}
#about>.nav .item>a{ position: relative; display: block; padding: 30px 20px; background: #edf5f5; border: 2px solid #edf5f5; border-radius: 10px; transition: all .35s;}
#about>.nav .item>a:after{position: absolute;z-index: 10; left: 50%;bottom: -10px; margin-left: -10%; width: 20%; height: 2px; background: #999; border-radius: 100%; content: ''; filter: blur(1px); opacity: 0; transition: all .35s;}
#about>.nav .item>a>.icon{ text-align: center;padding-bottom: 20px;}
#about>.nav .item>a>.icon>i{ font-size: 5.6rem; color: #999;transition: all .35s;}
#about>.nav .item>a>.tit{font-size: 2rem; font-weight: 600; color: rgba(0,91,97,1);}
#about>.nav .item>a:hover{background: none;  transform: translateY(-10px); }
#about>.nav .item>a:hover:after{bottom: -30px;opacity: 1; margin-left: -15%; width: 30%;filter: blur(5px);}
#about>.nav .item>a:hover>.tit{color: rgba(14,189,201,1);}



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

    #about>.statistics{width:70%;}



}

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

    #about>.rd .tab-box>.tab-item>.box>.txt{ font-size: 1.8rem; line-height: 2.8rem;}

}


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

    #about>.statistics{width:80%;}


}

@media only screen and (max-width: 1280px) {
    #about>.rd .tab-box>.tab-item>.box>.tit{font-size: 2.4rem;}
    #about>.rd .tab-box>.tab-item>.box>.txt{ font-size: 1.6rem; line-height: 2.4rem;}

    #about>.nav .item{ width: 50%; margin-bottom: 30px;}



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

    #about>.statistics .item>.num>span{font-size: 5rem; }
    #about>.statistics .item>.num>em{ top:24px;}
    #about>.statistics .item>.num>em.big{top: 10px;}

    #about>.rd .tab-box{ float: none; width: 100%; padding: 0;}
    #about>.rd .tab-box>.tab-item>.box{bottom: 0; top: auto;}
    #about>.rd .tab-nav{ float: none; position: relative;width: 100%; height: auto;padding: 80px 0;}
    #about>.rd .tab-nav>ul{  width: 70%; margin: 0 auto;}
    #about>.rd .tab-nav>ul>li{display: block; float: left; width:32.66%; margin-right: 1%;  text-align: center;margin-bottom: 0;}
    #about>.rd .tab-nav>ul>li:last-child{margin-right: 0;}
    #about>.rd .tab-nav>ul>li>a{ position: relative; display: block;  width: auto;  font-size: 1.6rem; color: #fff; background: rgba(0,0,0,.5); height: 60px; line-height: 60px; padding: 0 20px; transition: all .35s;}
    #about>.rd .tab-nav>ul>li.active>a{width: auto;}
    #about>.rd .tab-nav>ul>li.active>a:after{opacity: 0;}


}

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

    #about>.title>h3{ font-size: 3.2rem;}

    #about>.statistics .item>.num>span{font-size: 4rem; }


    #about>.video>a{width: 60px; height: 60px; }



}

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


    #about>.statistics .item>.icon>i{font-size: 2.4rem;;}
    #about>.statistics .item>.num>span{font-size:4rem;}
    #about>.statistics .item>.num>em{ top:20px;font-size: 1.8rem;}
    #about>.statistics .item>.num>em.big{font-size: 3.2rem; top: 12px;}
    #about>.statistics .item>.txt{font-size: 1.4rem;}


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

    #about>.video>.media{height: 330px;  }
    #about>.video>iframe{height: 330px;  }

    #about>.rd .tab-nav>ul>li>a{font-size: 1.4rem;}

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

    #about>.statistics .item{ width: 50%; padding-bottom: 30px;}
    #about>.profile{padding: 30px 0;}
}

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

    #about>.title>h3{ font-size: 2.8rem;}

    #about>.rd .tab-nav{ padding: 40px 0;}
    #about>.rd .tab-nav>ul>li>a{ height: 40px; line-height: 40px; padding: 0 10px;}

    #about>.rd .tab-box>.tab-item>.box{padding: 30px 10%; width: 100%;}

    #about>.nav .item{  float: none; width: 100%;}


    #about>.video>.media{height:240px; border-radius: 0; padding: 0; }
    #about>.video>iframe{height:240px; border-radius: 0; padding: 0; }

}

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

    #about>.title>h3{ font-size: 2.4rem;}

    #about>.statistics .item{display: block; float: none; width: 100%; background: #f7f7f7; margin-bottom: 3px; padding: 20px 0;}

    #about>.video>a{width: 40px; height: 40px; }
    #about>.video>a:before{width:10px; height:10px;}
    #about>.video>a:after{width:10px; height:10px; }
    #about>.video>.img{width: 100% !important; border-radius: 30px;}

    #about>.video>.media{height: 200px;  }
    #about>.video>iframe{height: 200px;  }

    #about>.rd .tab-nav>ul{text-align: center;}
    #about>.rd .tab-nav>ul>li{display: block;float: none; width: 100%; margin-right: 0; margin-bottom: 3px;}
    #about>.rd .tab-nav>ul>li>a{ display: block;}
    #about>.rd .tab-box>.tab-item>.box{position: relative;}
    #about>.rd .tab-box>.tab-item>.box>.tit{font-size: 2rem;}
    #about>.rd .tab-box>.tab-item>.box>.txt{ font-size: 1.4rem; line-height: 2.4rem;}



    #about>.nav{padding: 30px 0;}
    #about>.nav .item{ padding: 0 10px;}
    #about>.nav .item>a{ position: relative; display: block; padding: 30px 20px; background: #edf5f5; border: 2px solid #edf5f5; border-radius: 10px; transition: all .35s;}
    #about>.nav .item>a>.icon>i{ font-size: 5rem;}
    #about>.nav .item>a>.tit{font-size: 1.8rem;}
}