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

#about{ position: relative;z-index: 5; background: #fff; margin: 0 auto;}

#about .profile{margin: 0 auto; transition: all .35s;}
#about .profile>.container{margin: 0 auto;}
#about .profile>.container .name{text-align: center;}
#about .profile>.container .name>h3{font-size: 7rem; font-family: Arial; font-weight: 200; color: #ddd; text-transform: uppercase;}
#about .profile>.container .name>h2{font-size: 2rem; color: rgba(1,64,153,1);}
#about .profile>.container .text{ padding: 50px 0; font-size: 1.6rem; color: #333; line-height: 2.8rem;}
#about .profile>.container .text>p{ margin-bottom: 20px;}

#about .statistics{ padding: 100px 0; background:#fff url("../img/about_statistics_bg.jpg") no-repeat; background-position: 0 0; background-size: cover; margin: 0 auto;}
#about .statistics>.container{ margin: 0 auto;}
#about .statistics>.container ul{ margin: 0 auto;}
#about .statistics>.container ul>li{ position: relative; display: block;float: left; width: 25%; min-height: 180px; box-sizing: border-box;padding: 0 50px; border-right: 1px solid rgba(255,255,255,.5); text-align: center;}
#about .statistics>.container ul>li:last-child{border: 0;}
#about .statistics>.container ul>li .num{ color: rgba(255,255,255,1); font-size: 6rem; font-family: Arial; font-weight: 700;}
#about .statistics>.container ul>li .txt{padding: 15px 0; font-size: 1.4rem; line-height: 2.4rem; color: rgba(255,255,255,.9);}

#about .culture{ background:#f3f3f3 url("../img/about_culture_bg.jpg") no-repeat; background-position: 0 0; background-size: cover;margin: 0 auto;padding: 100px 0;}
#about .culture>.title{position: relative;z-index: 4; margin: 0 auto; padding: 30px 0; }
#about .culture>.title>h3{ font-size: 2.4rem; font-weight: 700; color: #333; text-align: center;}
#about .culture>.container{ margin: 0 auto; padding: 50px 0; }
#about .culture>.container .img{ position: relative; width: 50%; text-align: right;}
#about .culture>.container .img:after{position: absolute;z-index: 1; right: 30px; top: 20px; width: 100%;height: 100%; background: rgba(1,64,153,.9); content: '';}
#about .culture>.container .img>img{ position: relative;z-index: 5; max-width: 100%;height: auto;}
#about .culture>.container .box{width: 50%; text-align:left; box-sizing: border-box; padding-top: 20px; padding-right: 50px;}
#about .culture>.container .box>.item{ margin-bottom: 20px;}
#about .culture>.container .box>.item>.tit{ position:relative;font-size: 2rem; font-weight: 600; color: rgba(1,64,153,1); padding-bottom: 5px; }
#about .culture>.container .box>.item>.tit:after{position: absolute;z-index: 2; left: 0;bottom: 0;width: 20px;height: 1px; background: rgba(1,64,153,1); content: '';}
#about .culture>.container .box>.item>.txt{ padding: 8px 0; font-size: 1.7rem; color: #999; line-height: 2.4rem;}



#about .history{ background:#fff url("../img/about_history_bg.jpg") no-repeat; background-position: top center; overflow:hidden; margin:0 auto;padding:80px 0 50px 0;}
#about .history>.title{position: relative;z-index: 4; margin: 0 auto; padding: 30px 0; }
#about .history>.title>h3{ font-size: 2.4rem; font-weight: 700; color: #fff; text-align: center;}
#about .history>.container{ position:relative; margin:0 auto;padding:70px 0 20px 0;max-width: 1280px;}
#about .history>.container .prev{ position:absolute;z-index:3;left:-40px;bottom:10px; width:40px; height:40px; transition:all .35s;}
#about .history>.container .prev:hover{left:-36px;}
#about .history>.container .next{ position:absolute;z-index:3;right:-40px;bottom:10px; width:40px; height:40px; transition:all .35s;}
#about .history>.container .next:hover{right:-36px;}
#about .history>.container .prev>i, #about .history>.container .next>i{font-size: 4rem; color: rgba(255,255,255,.5); transition: all .35s;}
#about .history>.container .years{ position:relative; width:100%; margin:0 auto;}
#about .history>.container .years:after{position:absolute;z-index:1;left:0;bottom:30px; width:100%;height:1px;background:rgba(255,255,255,.3);content:'';}
#about .history>.container .years .swiper-container{position:relative;z-index:99; width:80%; height:160px; margin:0 auto; text-align:center;}
#about .history>.container .years .swiper-slide{font-size:1.8rem; padding-top:60px; box-sizing:border-box; color:#fff; text-align:center; cursor: pointer; transition:all .35s;}
#about .history>.container .years .swiper-slide>span{position: relative;z-index: 10; display: inline-block; width: 80px;height: 80px; line-height: 80px; border-radius: 100%; }
#about .history>.container .years .swiper-slide:after{ position:absolute;z-index:3;left:50%; bottom:26px; margin-left:-4px; width:8px;height:8px; background:#fff; border-radius:100%; content:''; transition:all .35s;}
#about .history>.container .years .swiper-slide:before{position:absolute;z-index:3;left:50%;bottom:40px; margin-left:-1px; width:2px;height:0;opacity:0;  background: rgba(240,130,0,1);  content:''; transition:all .35s;}
#about .history>.container .years .active-nav{position:relative; padding-top:10px; bottom:0; z-index:11; font-size:2rem;}
#about .history>.container .years .active-nav:after{background:rgba(240,130,0,1);}
#about .history>.container .years .active-nav:before{height:30px;opacity:1;}
#about .history>.container .years .active-nav>span{ background: rgba(240,130,0,1); box-shadow: 0 0 0 8px rgba(240,130,0,.5);}
#about .history>.container .box{ position:relative; bottom: -30px; width:100%; height:200px; background: rgba(240,130,0,.9); box-shadow: 0 3px 18px rgba(0,0,0,.2); padding:50px;}
#about .history>.container .box .swiper-wrapper:hover{z-index:11; position:relative;}
#about .history>.container .box .swiper-slide{ text-align:left;font-size:1.8rem; line-height:3rem;color:rgba(255,255,255,.9);}
#about .history>.container .box .swiper-container{width:100%;}




#about .honor{ background: #fff; margin: 0 auto;padding: 50px 0 100px 0;}
#about .honor>.title{position: relative;z-index: 4; margin: 0 auto; padding: 30px 0; }
#about .honor>.title>h3{ font-size: 2.4rem; font-weight: 700; color: #333; text-align: center;}
#about .honor>.container{margin: 0 auto; }
#about .honor>.container .describe{font-size: 1.4rem; color: #999; text-align: center;padding: 50px 0; }
#about .honor>.container .swiper-slide>a{ position: relative; display: block; box-sizing: border-box; padding: 20px;  line-height: 200px; background: #fff; border: 1px solid #ddd;}
#about .honor>.container .swiper-slide>a:after{position: absolute;z-index: 2;left: 0;top: 0;width: 100%;height: 100%; background: rgba(1,64,153,.8); text-align: center; font-family: iconfont; font-size: 4rem; color: rgba(255,255,255,1); content: '\e626'; opacity: 0; transition: all .35s;}
#about .honor>.container .swiper-slide>a .img{ position: relative; text-align: center; height: 200px; vertical-align: center; overflow: hidden;}
#about .honor>.container .swiper-slide>a .img:before{ position: absolute;z-index: 2;left: 0;top: 0;width: 100%;height: 100%; background: url("../img/logo.png") no-repeat; background-position: 50% 50%; background-size: 180px auto; opacity: .2; content: '';}
#about .honor>.container .swiper-slide>a .img>img{width:auto;height:100%; vertical-align: center;}
#about .honor>.container .swiper-slide>a .tit{ position: absolute;z-index: 5; left: 0;bottom: -10px; width: 100%;text-align: center; font-size: 1.4rem; color: #fff; opacity: 0; overflow: hidden; text-overflow:ellipsis;white-space: nowrap; transition: all .35s;}
#about .honor>.container .swiper-slide>a:hover:after{opacity: 1;}
#about .honor>.container .swiper-slide>a:hover .tit{opacity: 1;bottom: 0;}
#about .honor>.container .swiper-pagination{ position: relative; padding: 50px 0; bottom: 0;}
#about .honor>.container>.more{margin: 0 auto;text-align: center;}
#about .honor>.container>.more>a{display: inline-block; color: rgba(255,255,255,1); background: rgba(1,64,153,1); border-radius: 50px; padding: 10px 80px; font-size: 1.6rem; transition: all .35s;}
#about .honor>.container>.more>a:hover{background: rgba(122,122,122,1); color: #fff; box-shadow: 2px 3px 20px rgba(0,0,0,.4); }



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

    #about .statistics>.container ul>li .num{ font-size: 5rem;}
    #about .statistics>.container ul>li .txt{font-size: 1.2rem; line-height: 2rem;}


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

    #about .culture>.title>h3{ font-size: 2rem;}
    #about .history>.title>h3{ font-size: 2rem;}
    #about .honor>.title>h3{ font-size: 2rem;}

}



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


    #about .statistics>.container ul>li{ width: 50%; min-height: 180px; padding:10px 50px; border-bottom: 1px solid rgba(255,255,255,.5);}
    #about .statistics>.container ul>li:nth-child(2){border-right: 0;}
    #about .statistics>.container ul>li:nth-child(3){border-bottom: 0;}

    #about .culture>.container .img{ float: none; width: 100%; text-align: center;}
    #about .culture>.container .box{float: none;width: 100%; padding-top: 60px;}

    #about .history>.container .years .swiper-container{width:100%;}
    #about .history>.container .box{height:200px;}
    #about .history>.container .box .swiper-slide{font-size:1.4rem; line-height:2.4rem;}


}



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

    #about .profile>.container .name>h3 { font-size: 5.6rem; }
    #about .profile>.container .name>h2 {font-size: 1.8rem;}
    #about .profile>.container .text{ font-size: 1.4rem; line-height: 2rem;}

    #about .statistics>.container ul>li {padding: 10px 30px;}
    #about .statistics>.container ul>li .num{ font-size: 4rem;}
    #about .statistics>.container ul>li .txt{line-height: 1.8rem;}

    #about .culture{padding: 30px 0;}

    #about .history{ background-size: 100% 400px; padding: 30px 0;}
    #about .history>.container { padding: 20px 0;}
    #about .history>.container .years .swiper-slide>span{width: 70px;height: 70px; line-height: 70px; }

    #about .honor{ padding: 30px 0;}

}

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

    #about .statistics{padding: 30px 0;}
    #about .statistics>.container ul>li{ float: none; width: 100%; min-height: auto; padding:20px 50px; border-right: 0;}
    #about .statistics>.container ul>li:nth-child(3){border-bottom: 1px solid rgba(255,255,255,.5);}

    #about .culture>.container .img:after{right: 10px; top: 10px;}



    #about .history>.container{ width: 70%; }
    #about .history>.container .box{ height:auto; padding:30px;}
    #about .history>.container .box .swiper-slide{ text-align:center; font-size: 1.2rem; line-height: 2rem;}


    #about .honor>.container .describe{font-size: 1.2rem; line-height: 2rem; padding-top: 0; }
    #about .honor>.container .swiper-pagination{padding: 20px 0;}
    #about .honor>.container>.more{padding-bottom: 30px;}
    #about .honor>.container>.more>a{padding: 10px 40px; font-size: 1.4rem;}


}