@charset "utf-8";


#about{margin: 0 auto;}
#about .profile{ position: relative; margin: 0 auto; padding: 100px 0;}
#about .profile .content{ box-sizing: border-box;}
#about .profile .content>.theme{ position: relative; font-size: 4.2rem; font-weight: bold; color: #333;}
#about .profile .content>.text{ padding-top: 50px; font-size: 1.8rem; color: #333; line-height: 3rem;}
#about .profile .content>.text>p{margin-bottom: 20px;}



#about .introduce{position: relative;z-index: 3; padding-bottom: 30px; background: #faf9f9;}
#about .introduce>.bg{position: absolute;width: 100%;height: 80%;left:0;top:0;z-index: 2; background-image: url("../img/about_introduce_bg.jpg"); background-position: center;background-repeat: no-repeat;background-size: cover; background-attachment: fixed;}
#about .introduce>.container{position: relative;z-index: 50; padding-top: 260px; margin: 0 auto;}
#about .introduce>.container>.wrap{max-width: 1400px;}
#about .introduce>.container .theme{font-size: 4.2rem; color: #fff;}
#about .introduce>.container .statistics{ display: flex; justify-content: space-between; background: #fff;border-radius: 10px;padding:4% 2.5%; margin-top: 130px;box-shadow: 0 5px 25px rgba(0,0,0,0.08);}
#about .introduce>.container .statistics>.rows{display: inline-block; text-align: center; min-width: 20%; }
#about .introduce>.container .statistics>.rows>.title{ font-size: 2rem; color: #333; margin: 0 auto;}
#about .introduce>.container .statistics>.rows>.num{ color: #0758ab; padding: 15px 0; line-height: 1; }
#about .introduce>.container .statistics>.rows>.num>span{font-size: 5.6rem; font-weight: 500;}
#about .introduce>.container .statistics>.rows>.num>em{ font-style: normal; font-size:2rem;padding-left: 3px;}
#about .introduce>.container .statistics>.rows>.text{ width: 70%; margin: 0 auto; font-size: 1.5rem; color: #666;}


#about .certificate{ background: #faf9f9; margin: 0 auto; padding: 100px 0;}
#about .certificate>.theme{ font-size: 4.2rem; font-weight: bold; color: #333; margin: 0 auto;text-align: center;}
#about .certificate>.container{ max-width: 1400px; width: 86%; margin: 0 auto; padding-top: 80px;}
#about .certificate>.container .swiper{overflow: inherit;}
#about .certificate>.container .swiper .swiper-slide{ padding: 20px 0;}
#about .certificate>.container .swiper .swiper-slide>.slide{ transition: all .3s ease-out 0s; padding: 40px 0;  background: rgba(255, 255, 255, 1);box-shadow: 5px 5px 22px 7px rgba(48, 48, 48, 0.05);border-radius: 30px;}
#about .certificate>.container .swiper .swiper-slide>.slide>.ico{text-align: center; padding: 0 35px;}
#about .certificate>.container .swiper .swiper-slide>.slide>.ico>img{display: inline-block;max-width: 150px; width: 100%;}
#about .certificate>.container .swiper .swiper-slide>.slide>.title{ padding: 20px 30px 0 30px; height: 80px; text-align: center;font-size: 1.4rem; color: #666; line-height: 2rem;}
#about .certificate>.container .swiper .swiper-slide:hover .slide{ transform: translateY(-20px);}
#about .certificate>.container .control{ display: flex; align-content: center; align-items: center; margin: 0 auto; padding: 50px 10px; position: relative;}
#about .certificate>.container .control>.button{display: inline-block; margin-right: 20px;}
#about .certificate>.container .control>.button>div{display: inline-flex; margin-right: 20px; width: 46px;height: 46px; align-items: center; align-content: center; justify-content: center; cursor: pointer; color: #666; border-radius: 100%; border: 1px solid #999; transition: all .35s; }
#about .certificate>.container .control>.button>div>i{display: inline-block; font-size: 2.4rem; }
#about .certificate>.container .control>.button>div:hover{border-color: #0758ab;color: #fff; background: #0758ab;}
#about .certificate>.container .control>.swiper-pagination{position: relative;display: inline-block; flex: 1;height: 1px;background: #ccc;}
#about .certificate>.container .control .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{height: 1px;background: #0758ab;top: auto;bottom: 0;}


#about .navigation{margin: 0 auto;padding: 100px 0; background-image: linear-gradient(32deg, rgba(7, 88, 171, 1) 60%,rgba(110, 222, 100, 1) );}
#about .navigation>.wrap{max-width: 1400px;}
#about .navigation .layout{margin: 0 auto;}
#about .navigation .layout>.item{display: block; float: left; width: 48%;}
#about .navigation .layout>.item:nth-child(even){float: right;}
#about .navigation .layout>.item>a{display: block;}
#about .navigation .layout>.item .img{position: relative; border-radius: 20px;overflow: hidden;}
#about .navigation .layout>.item .img:after{position: absolute;z-index: 12;left: 0;top: 0;width: 100%;height: 100%; background: rgba(0,0,0,.3); content: ''; transition: all .35s;}
#about .navigation .layout>.item .img>img{ width: 100%;height: auto; transition: all .8s;}
#about .navigation .layout>.item .box{box-sizing: border-box;padding: 30px 30px 0 30px;text-align: left;}
#about .navigation .layout>.item .box>.title{font-size: 3rem; color: #fff;transition: all .35s;}
#about .navigation .layout>.item .box>.more{display: flex; align-items: center;align-content: center; padding-top:10px;}
#about .navigation .layout>.item .box>.more>span{display: inline-block; color: rgba(255,255,255,.8); margin-right: 10px; }
#about .navigation .layout>.item .box>.more>i{display: inline-flex; align-content: center; align-items: center; justify-content: center; opacity: 0; font-size: 2rem; font-weight: bold; width: 40px;height: 40px; background: #fff; border-radius: 100%;color: #0758ab; transform: rotate(-30deg); transition: all .35s;}
#about .navigation .layout>.item:hover .img>img{transform: scale(1.05);}
#about .navigation .layout>.item:hover .img:after{background: rgba(0,0,0,0);}
#about .navigation .layout>.item:hover .box>.more>i{opacity: 1;}





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

    #about .profile .content>.text{ padding: 30px 0; font-size: 1.7rem; line-height: 2.6rem; }


    #about .introduce>.container .statistics>.rows>.title { font-size: 1.8rem; }

}


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

    #about .introduce>.container .statistics>.rows>.text{ font-size: 1.4rem; }

    #about .certificate>.container .swiper .swiper-slide>.slide>.title{ padding: 20px 20px 0 20px; font-size: 1.3rem; line-height: 1.7rem;}
    #about .certificate>.container .control>.button>div{width: 42px;height: 42px; margin-right: 15px; }
    #about .certificate>.container .control>.button>div>i{font-size: 2.2rem; }


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

    #about .profile .content>.title{font-size: 3.6rem;}
    #about .profile .content>.text{ font-size: 1.6rem; line-height: 2.4rem; }

    #about .introduce>.container .theme{ font-size: 3.6rem;}
    #about .introduce>.container .statistics>.rows>.num>span{font-size: 5rem;}
    #about .introduce>.container .statistics>.rows>.num>em{ font-size:1.8rem;}

    #about .certificate>.theme{ font-size: 3.6rem; }

}

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

    #about .profile .content>.theme{font-size: 3.2rem;}

    #about .introduce>.container .theme{ font-size: 3.2rem;}
    #about .introduce>.container .statistics>.rows>.text{ font-size: 1.3rem; }

    #about .certificate>.theme{ font-size: 3.2rem; }

}

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


    #about .introduce>.container .statistics{ flex-wrap: wrap;}
    #about .introduce>.container .statistics>.rows{ flex: 1 1 50%; box-sizing: border-box; padding: 30px 0; border-top: 1px solid #eee; border-left: 1px solid #eee; }
    #about .introduce>.container .statistics>.rows:first-child, #about .introduce>.container .statistics>.rows:nth-child(2){border-top: 0;}
    #about .introduce>.container .statistics>.rows:first-child, #about .introduce>.container .statistics>.rows:nth-child(3){border-left: 0;}


    #about .navigation .layout>.item{width: 47%;}
    #about .navigation .layout>.item .box>.title { font-size: 2.4rem;}


}

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


    #about .certificate>.container .control>.button>div{width: 36px;height: 36px; margin-right: 10px; }
    #about .certificate>.container .control>.button>div>i{font-size: 2rem; }


    #about .navigation .layout>.item .box>.title { font-size: 2rem;}



}

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

    #about .navigation .layout>.item{float: none; width: 100%; margin-bottom: 30px;}
    #about .navigation .layout>.item:nth-child(even){float: none;}
    #about .navigation .layout>.item .box>.more>i{ font-size: 1.8rem; width: 32px;height: 32px;}

}

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

    #about .profile{ padding: 50px 0;}
    #about .profile .content>.theme{font-size: 2.4rem;}
    #about .profile .content>.text{ font-size: 1.4rem; line-height: 2rem;}

    #about .introduce>.container{padding-top: 200px; }
    #about .introduce>.container .theme{ font-size: 2.4rem;}
    #about .introduce>.container .statistics>.rows>.title { font-size: 1.6rem;}
    #about .introduce>.container .statistics>.rows>.num>span{font-size: 4rem;}
    #about .introduce>.container .statistics>.rows>.num>em{ font-size:1.6rem;}
    #about .introduce>.container .statistics>.rows>.text { font-size: 1.2rem;}

    #about .certificate{ padding: 50px 0;}
    #about .certificate>.theme{ font-size: 2.4rem; }
    #about .certificate>.container{ padding-top: 50px;}

    #about .navigation{padding: 50px 0;}

}


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


    #about .introduce>.container .statistics>.rows{padding: 20px 0;}
    #about .introduce>.container .statistics>.rows>.num>span{font-size: 3rem;}
    #about .introduce>.container .statistics>.rows>.text{width: 80%;}

}