@charset "utf-8";

#about{margin: 0 auto; position: relative;z-index: 90;}
#about .wrap{margin: 0 auto;max-width: 1460px;padding: 150px 0; }


#about .profile{ background: url("../img/about_profile_bg.jpg") no-repeat; background-position: center bottom; background-size: 100% auto;}
#about .profile>.wrap{padding: 150px 0 300px 0; }
#about .profile .layout>.content{ width: 65%;text-align: left; box-sizing: border-box;}
#about .profile .layout>.content>.title{ position: relative; width: 90%; font-size: 3.2rem;font-weight: 900; color: #333; padding-bottom: 20px;}
#about .profile .layout>.content>.title:after{position: absolute;z-index: 12; left: 0;bottom: 0; width: 50px;height: 3px; background: #12479b; content: '';}
#about .profile .layout>.content>.text{ padding: 50px 0; font-size: 1.6rem; color: #333; line-height: 2.4rem;}
#about .profile .layout>.content>.text>p{ margin-bottom: 20px;}
#about .profile .layout>.statistics{width: 25%;text-align: right; padding: 3% 0;}
#about .profile .layout>.statistics>.rows{display: block; float: left; width: 40%; text-align: left; margin-bottom: 30px;}
#about .profile .layout>.statistics>.rows:nth-child(even){float: right;}
#about .profile .layout>.statistics>.rows>.num{ font-family: 'Roboto', sans-serif; font-size: 6.4rem;font-weight: 900; color: #12479b;}
#about .profile .layout>.statistics>.rows>.num>span{display: inline-block;position: relative;}
#about .profile .layout>.statistics>.rows>.num>span.plus:after{position: absolute;z-index: 12;  right: -35px;top: 50%; transform: translateY(-50%); font-size: 6rem; content: '+';}
#about .profile .layout>.statistics>.rows>.num>span.unit:after{position: absolute;z-index: 12;  right: -30px;top: 50%; transform: translateY(-50%); font-size: 4rem; content: attr(data-txt);}
#about .profile .layout>.statistics>.rows>.tit{ font-size: 2rem; color: #333;}
#about .profile .layout>.statistics>.rows:last-child{margin-right: 0;}

#about>.culture{margin: 0 auto; position: relative;}
#about>.culture .bg{ position:relative;z-index: 1;width: 100%;}
#about>.culture .bg .swiper .swiper-slide>img{ width: 100%;height: auto;}
#about>.culture .nav{ position:absolute;z-index: 50;width: 100%; height: 100%;}
#about>.culture .nav>ul{ display: block; height: 100%; margin: 0 auto;}
#about>.culture .nav>ul>li{ position: relative; box-sizing: border-box;  display: inline-block; float: left; width: 25%; height: 100%; padding: 8% 0 0 60px; text-align: left; border-right: 1px solid rgba(255,255,255,.1); transition: all .35s;}
#about>.culture .nav>ul>li:last-child{border-right: 0;}
#about>.culture .nav>ul>li>.title{position: relative; font-size: 3rem; font-weight: bold; color: #fff;transition: all .35s;}
#about>.culture .nav>ul>li>.title:after{position: absolute;z-index: 1; top: 0; left: -60px; width: 3px;height: 120px; background: #fff; opacity: 0; content: ''; transition: all .35s;}
#about>.culture .nav>ul>li>.intro{ width: 80%; padding: 20px 0; font-size: 2.2rem; color: #fff; line-height: 2.4rem; opacity: 1; transform: translateY(0); transition: all .35s;}
#about>.culture .nav>ul>li:hover{ background: none;}
#about>.culture .nav>ul>li:hover .title:after{opacity: 0;}
#about>.culture .nav>ul>li:hover .intro{opacity: 1; transform: translateY(0);}



#about>.history{ position: relative;z-index: 100; margin: 0 auto;  background: url("../img/history_bg.jpg") no-repeat; background-position: center bottom; background-size: cover;}
#about>.history .title{ position: relative; font-size: 4rem;font-weight: 900; color: #333; padding-bottom: 20px;}
#about>.history .container{margin: 0 auto; padding: 80px 0;}
#about>.history .container>.layout{ margin: 0 auto;}
#about>.history .container>.layout .nav{ width: 20%;}
#about>.history .container>.layout .nav>.navSwiper{ width: 100%; height: 380px;  border-right: 1px solid #ddd;}
#about>.history .container>.layout .nav>.navSwiper .swiper-slide{position: relative;}
#about>.history .container>.layout .nav>.navSwiper .swiper-slide>a{position: relative;display: block; padding: 5px 0;  transition: all .35s;}
#about>.history .container>.layout .nav>.navSwiper .swiper-slide>a:after{position: absolute;z-index: 1; left: 0; bottom: 0; width: 0;height: 2px; background: #12479b; content: ''; transition: all .35s;}
#about>.history .container>.layout .nav>.navSwiper .swiper-slide>a>h3{ font-size: 1.8rem; font-weight: bold; transition:all .35s; }
#about>.history .container>.layout .nav>.navSwiper .swiper-slide>a>span{ font-size: 2rem; font-weight: bold; transition: all .35s; }
#about>.history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a:after{ width: 30px;}
#about>.history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a>h3{ font-size: 3rem; color: #12479b;}
#about>.history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a>span{color: #12479b;}
#about>.history .container>.layout .nav>.navSwiper .swiper-pagination{ display: none; top: auto; bottom: 0;}
#about>.history .container>.layout .show{ position:relative; display: block; width: 80%; box-sizing: border-box;padding-left: 5%;}
#about>.history .container>.layout .show:after{position: absolute;z-index: 12; left: -1px; top: 0; width: 1px;height: 100%; background: #ddd; content: '';}
#about>.history .container>.layout .show .showSwiper{ position: relative;  height: 650px; overflow-y: auto;}
#about>.history .container>.layout .show .showSwiper>.swiper-wrapper>.swiper-slide{ position: relative; margin: 0 auto;opacity: 0!important;}
#about>.history .container>.layout .show .showSwiper>.swiper-wrapper>.swiper-slide-active{opacity: 1!important;}
#about>.history .container>.layout .show>.swiper .swiper-slide>.slide{ display: flex; align-content: center; align-items: center;  width: 100%; padding: 10px 0 50px 40px; box-sizing: border-box; transition: .6s;}
#about>.history .container>.layout .show>.swiper .swiper-slide>.slide .years{ display: inline-block;  font-size: 2rem; font-weight: bold; color: #787878; text-align: center; background: #e6e6e6; border-radius: 100%; width: 80px; line-height: 80px; transition: all .35s;}
#about>.history .container>.layout .show>.swiper .swiper-slide>.slide .intro{ display: inline-block;  flex: 1; padding: 8px 0 8px 30px; transition: all .35s;}
#about>.history .container>.layout .show>.swiper .swiper-slide>.slide .intro>p{display: block; margin-bottom: 10px; font-size: 1.6rem; color: #333;}
#about>.history .container>.layout .show>.swiper .swiper-slide>.slide.active{ width: 45%; }
#about>.history .container>.layout .show>.swiper .swiper-slide>.slide.active .years{ color: #12479b; }
#about>.history .container>.layout .show>.swiper .swiper-slide>.slide.active .intro{ opacity: 1; transform: translateY(0);}
#about>.history .container>.layout .show>.swiper .swiper-slide>.slide:hover .years{background: #12479b; color: #fff;}






#about>.honor{margin: 0 auto;}
#about>.honor .title{ position: relative; font-size: 4rem;font-weight: 900; color: #333; padding-bottom: 20px;}
#about>.honor .describe{margin: 0 auto;}
#about>.honor .describe>.info{width: 60%;text-align: left; font-size: 1.5rem; line-height: 2.4rem; color: #666;}
#about>.honor .describe>.nav{ width: 30%;}
#about>.honor .describe>.nav .tab-nav{position: relative;}
#about>.honor .describe>.nav .tab-nav>ul{ margin: 0 auto; display: flex; align-content: center; align-items: center; justify-content: flex-end;}
#about>.honor .describe>.nav .tab-nav>ul>li{ position: relative; flex: auto; display: inline-block; margin-left: 16px;}
#about>.honor .describe>.nav .tab-nav>ul>li:first-child{margin-left: 0;}
#about>.honor .describe>.nav .tab-nav>ul>li>a{ position: relative;z-index: 60; display: block; text-align: center; font-size: 1.6rem; color: #333; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; padding: 10px 0; transition: all .35s;}
#about>.honor .describe>.nav .tab-nav>ul>li>a:hover{ border-color: #12479b; color: #12479b;}
#about>.honor .describe>.nav .tab-nav>ul>li.active>a{ border-color: #12479b; background: #12479b; color: #fff!important;}
#about>.honor .container{margin: 0 auto; padding: 80px 0;}
#about>.honor .container .tab-box{ position: relative; box-sizing: border-box; margin: 0 auto;}
#about>.honor .container .tab-box>.tab-item{ display:none; text-align: left;}
#about>.honor .container .tab-box>.current{display: block;}
#about>.honor .container .tab-box .swiper{ height: 400px; margin: 0 auto;}
#about>.honor .container .tab-box .swiper .swiper-slide{text-align: center; box-sizing: border-box; height: 100%;opacity: .5;transform: scale(.6);transform-origin: center center; transition: all .35s;}
#about>.honor .container .tab-box .swiper .swiper-slide>a{display: flex; height: 100%; align-items: center;align-content: center; position: relative;}
#about>.honor .container .tab-box .swiper .swiper-slide .pic{ display: inline-block;transition: .4s;width: 100%;}
#about>.honor .container .tab-box .swiper .swiper-slide .pic>img{transform-origin: center bottom; height: 100%;width: auto; object-fit: cover;}
#about>.honor .container .tab-box .swiper .swiper-slide .tit{font-size: 2rem; display: none;}
#about>.honor .container .tab-box .swiper .swiper-slide-active{opacity: 1;transform: scale(1);}
#about>.honor .container .tab-box .swiper .swiper-slide-active .pic { box-shadow: 0 0 8px rgba(0,0,0,.1);}
#about>.honor .container .tab-box .control{ text-align: center;margin: 0 auto; padding: 30px 0;}
#about>.honor .container .tab-box .control>a{display: inline-block; margin: 0 10px; width: 50px;height: 50px; line-height: 50px; text-align: center; border: 1px solid #ddd; border-radius: 100%;transition: all .35s;}
#about>.honor .container .tab-box .control>a>i{font-size: 2.4rem; color: #666;transition: all .35s;}
#about>.honor .container .tab-box .name{text-align: center; font-size: 2rem; color: #333; margin: 20px auto;}

#about>.honor .container .tab-box .lists{margin: 0 auto; padding-bottom: 50px;}
#about>.honor .container .tab-box .lists>ul{margin: 0 auto;}
#about>.honor .container .tab-box .lists>ul>li{display: block;float: left;width:22.75%; margin-right: 3%; margin-bottom: 3%; position: relative; padding: 30px; background: #fff; border-radius: 3px; border: 1px solid #eee; box-sizing: border-box; transition: all .35s; }
#about>.honor .container .tab-box .lists>ul>li:nth-child(4n){margin-right: 0;}
#about>.honor .container .tab-box .lists>ul>li .img{ position: relative; width: 100%;height: 320px;  line-height: 320px; padding-bottom: 20px; background:#fff; overflow: hidden;  text-align:center; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center;}
#about>.honor .container .tab-box .lists>ul>li .img>img{ width:auto; max-width: 80%; max-height:100%; transition: all .8s;}
#about>.honor .container .tab-box .lists>ul>li .title{font-size:1.6rem; color: #333; text-align: center; border-top: 1px solid #eee; padding-top: 20px; padding-bottom: 0; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; transition: all .35s;}
#about>.honor .container .tab-box .lists>ul>li:hover{box-shadow: 4px 3px 20px rgba(0,0,0,.16);}
#about>.honor .container .tab-box .lists>ul>li:hover .img>img{transform: scale(1.05);}
#about>.honor .container .tab-box .lists>ul>li:hover .title{ color: #12479b;}
#about>.honor .container .tab-box .page{padding: 0!important;}


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


    #about .profile .layout>.statistics>.rows>.tit{ height: 36px; font-size: 1.8rem;}

}

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

    #about .profile .layout>.statistics>.rows>.num{ font-size: 5.6rem;}
    #about .profile .layout>.statistics>.rows>.num>span.plus:after{ right: -30px;font-size: 5rem; }
    #about .profile .layout>.statistics>.rows>.num>span.unit:after{ right: -30px;font-size: 3.6rem;}
    #about .profile .layout>.statistics>.rows>.tit{font-size: 1.7rem;}

    #about>.culture .nav>ul>li>.title {  font-size: 2.6rem; }
    #about>.culture .nav>ul>li>.intro { font-size: 2rem;  }


    #about>.history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a>h3 {   font-size: 2.8rem; }

}

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


    #about .profile .layout>.statistics>.rows>.num{ font-size: 5.2rem;}
    #about .profile .layout>.statistics>.rows>.tit{font-size: 1.6rem;}

    #about>.culture .nav>ul>li>.title {  font-size: 2.4rem; }


    #about>.history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a>h3 {   font-size: 2.6rem; }


}




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

    #about .profile .layout>.statistics>.rows>.num{ font-size: 4.8rem;}
    #about .profile .layout>.statistics>.rows>.num>span.plus:after{ right: -25px;font-size: 4rem; }
	#about .profile .layout>.statistics>.rows>.num>span.unit:after{ right: -25px;font-size: 3rem;}
    #about .profile .layout>.statistics>.rows>.tit{font-size: 1.5rem;}

    #about>.culture .nav>ul>li{  padding: 10% 0 0 60px}



    #about>.history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a>h3 {   font-size: 2.4rem; }

}


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

    #about .profile .layout>.content>.title { font-size: 3rem;}


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

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



    #about>.culture .nav>ul>li{  padding: 10% 0 0 50px}
    #about>.culture .nav>ul>li>.title{ font-size: 2rem;}
    #about>.culture .nav>ul>li>.title:after{left: -50px;}
    #about>.culture .nav>ul>li>.intro { font-size: 1.8rem; line-height: 2rem; }


    #about>.history .title{ font-size: 3.6rem;}
    #about>.history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a>h3{ font-size: 2.4rem;}
    #about>.history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a>span{ font-size: 1.6rem;}


    #about>.honor .title{ font-size: 3.6rem;}
    #about>.honor .describe>.info {font-size: 1.4rem;}
    #about>.honor .describe>.nav .tab-nav>ul>li>a {font-size: 1.4rem;}
    #about>.honor .container .tab-box .lists>ul>li{width:31.33%; }
    #about>.honor .container .tab-box .lists>ul>li:nth-child(4n){margin-right: 3%;}
    #about>.honor .container .tab-box .lists>ul>li:nth-child(3n){margin-right: 0;}
    #about>.honor .container .tab-box .lists>ul>li .title{font-size:1.4rem;}




}

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

    #about .profile .layout>.content>.title{  width: 100%;}
    #about .profile .layout>.statistics>.rows>.num>span.unit:after{ right: -22px;}
    #about .profile .layout>.statistics>.rows>.tit { font-size: 1.3rem;}


    #about>.culture .nav>ul>li>.intro{font-size: 1.8rem; line-height: 2rem;}

    #about>.history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a>h3 { font-size: 2.2rem;}




}

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

    #about .profile>.wrap { padding: 150px 0;}
    #about .profile .layout>.content { width: 100%; float: none;}
    #about .profile .layout>.statistics{float: none; width: 100%;}
    #about .profile .layout>.statistics>.rows{float: left; width: 33.33%;}

    #about>.culture .nav>ul>li>.intro { font-size: 1.6rem; line-height: 1.8rem;}
    #about>.history .container>.layout .nav{ width: 24%;}
    #about>.history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a>h3 { font-size: 2rem;}
    #about>.history .container>.layout .nav>.navSwiper .swiper-slide>a>span { font-size: 1.6rem; }
    #about>.history .container>.layout .show {  width: 76%; }
    #about>.history .container>.layout .show>.swiper .swiper-slide>.slide { padding: 10px 0 40px 30px; }
    #about>.history .container>.layout .show>.swiper .swiper-slide>.slide .years{ font-size: 2rem;width: 70px; line-height: 70px;}
    #about>.history .container>.layout .show>.swiper .swiper-slide>.slide .intro>p{ font-size: 1.4rem; }



    #about>.honor .describe>.info { width: 55%;}
    #about>.honor .describe>.nav { width: 35%;}
    #about>.honor .container .tab-box .lists>ul>li{width:48%; margin-right: 0; }
    #about>.honor .container .tab-box .lists>ul>li:nth-child(4n){margin-right: 0;}
    #about>.honor .container .tab-box .lists>ul>li:nth-child(3n){margin-right: 0;}
    #about>.honor .container .tab-box .lists>ul>li:nth-child(even){float: right;}
    
    
}

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


    #about>.history .container>.layout .nav{ width: 100%; float: none; }
    #about>.history .container>.layout .nav>.navSwiper{ height: auto; padding-bottom: 20px;  border-right: 0;}
    #about>.history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a:after{display: none;}
    #about>.history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a>h3 { font-size: 2rem;}
    #about>.history .container>.layout .nav>.navSwiper .swiper-slide>a>span {font-size: 1.4rem;}
    #about>.history .container>.layout .nav>.navSwiper .swiper-pagination{ display: block;}
    #about>.history .container>.layout .nav>.navSwiper .swiper-pagination .swiper-horizontal > .swiper-pagination-progressbar, #about>.history .container>.layout .nav>.navSwiper .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, #about>.history .container>.layout .nav>.navSwiper .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {height: 2px!important;}
    #about>.history .container>.layout .nav>.navSwiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ background: #12479b!important;}


    #about>.history .container>.layout .show{ width: 100%; float:none; padding-left: 0;}
    #about>.history .container>.layout .show:after{ display: none; }
    #about>.history .container>.layout .show .showSwiper{ position: relative;  height: auto; overflow-y: auto;}
    #about>.history .container>.layout .show>.swiper .swiper-slide>.slide { padding: 30px 0 10px 0; }
    #about>.history .container>.layout .show>.swiper .swiper-slide>.slide .years{ font-size: 1.8rem;width: 62px; line-height: 62px;}
    #about>.history .container>.layout .show>.swiper .swiper-slide>.slide .intro>p { font-size: 1.2rem;}

}



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

    #about .wrap { padding: 100px 0;}
    #about .profile .layout>.content>.title { font-size: 3rem;}

    #about>.culture .nav{ position:relative; height: auto;}
    #about>.culture .nav>ul>li{display: flex;  flex-direction: column;  justify-content: center; width: 100%; float: none; overflow: hidden;  padding: 30px 50px; border-right: unset; border-bottom: 1px solid rgba(255, 255, 255, .1);}
    #about>.culture .nav>ul>li:last-child{border-bottom: 0;}
    #about>.culture .nav>ul>li>.title:after{display: none;}
    #about>.culture .bg{position: absolute;width: 100%; height: 100%; left: 0;top: 0;}
    #about>.culture .bg>.swiper{height: 100%;}
    #about>.culture .bg>.swiper .swiper-slide{height: 100%;}
    #about>.culture .bg>.swiper .swiper-slide img{height: 100%; width: auto; object-fit: cover;}

    #about>.history .title{ font-size: 3rem;}

    #about>.honor .title { font-size: 3rem;}
    #about>.honor .describe>.info{width: 100%;float: none;}
    #about>.honor .describe>.nav{ width: 100%; padding-top: 20px;}
    #about>.honor .describe>.nav .tab-nav>ul{ justify-content: flex-start;}
    #about>.honor .describe>.nav .tab-nav>ul>li { margin-left: 0; margin-right: 15px; }


}

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



    #about>.history .container>.layout .nav>.navSwiper .swiper-slide>a>span {font-size: 1.3rem;}

    #about>.honor .describe>.info{font-size: 1.3rem; line-height: 2rem;}
    #about>.honor .describe>.nav .tab-nav>ul>li>a { font-size: 1.2rem;}
    #about>.honor .container .tab-box .control>a {  width: 42px;  height: 42px; line-height: 42px; }
    #about>.honor .container .tab-box .lists>ul>li .img{ height: 280px; line-height: 280px;}


}


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

    #about .profile>.wrap { padding: 100px 0;}
    #about .profile .layout>.content>.title { font-size: 2.4rem;}
    #about .profile .layout>.content>.text{ padding: 30px 0; font-size: 1.4rem; line-height: 2rem;}


    #about .profile .layout>.statistics>.rows{width: 100%; float: none; display: flex;align-items: center; align-content: center; }
    #about .profile .layout>.statistics>.rows>.num { display: inline-block; }
    #about .profile .layout>.statistics>.rows>.num>span.unit{ margin-right: 40px;}
    #about .profile .layout>.statistics>.rows>.num>span.plus{ margin-right: 30px;}
    #about .profile .layout>.statistics>.rows>.tit { display: inline-block; height: auto; font-size: 1.4rem; padding-left: 10px; color: #666;}

    #about>.history .title{ font-size: 2.4rem;}
    #about>.history .container { padding: 40px 0;}


    #about>.honor .title { font-size: 2.4rem;}
    #about>.honor .container { padding: 40px 0;}
    #about>.honor .container .tab-box .swiper{ height: 280px;}
    #about>.honor .container .tab-box .name { font-size: 1.4rem; }

    #about>.honor .container .tab-box .lists>ul>li .img{ height: 220px; line-height: 220px;}
    #about>.honor .container .tab-box .lists>ul>li .title{font-size:1.2rem;}
}


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

    #about .profile .layout>.content>.title { font-size: 1.8rem;}

    #about>.history .container>.layout .nav>.navSwiper .swiper-slide>a>h3 { font-size: 1.6rem;}
    #about>.history .container>.layout .nav>.navSwiper .swiper-slide>a>span { font-size: 1.2rem;}
    
    
    #about>.honor .container .tab-box .swiper{ height: 220px;}
    #about>.honor .container .tab-box .lists>ul>li{padding: 15px;}
    #about>.honor .container .tab-box .lists>ul>li .img{ height: 110px; line-height:110px;}


}