@charset "utf-8";

/* CSS Document */



@import url('https://fonts.font.im/css?family=Oswald:200,300,400,500,600,700');





#about{margin: 0 auto;}



#about .title{ position: relative; text-align: center; margin: 0 auto;}

#about .title>h3{ position: relative;z-index: 20; font-size: 4rem; padding:30px 0 20px 0; font-weight: bold; color: #333;}

#about .title>h3:after{position: absolute;z-index: 1; left: 50%; bottom: 0;width:50px;height: 4px; background: #005d8a; transform: translateX(-50%); content: '';}

#about .title>h4{position: absolute;z-index: 1; left: 50%; top: 0; width: 100%; font-size: 6rem; color: #f3f3f3; transform: translateX(-50%); text-transform: uppercase;}



#about .profile{margin: 0 auto; position: relative; background: url("../img/about_profile_bg.jpg") no-repeat; background-position: left bottom; padding-top: 75px;}

#about .profile .layout{margin: 0 auto; padding: 100px 0; }

#about .profile .layout>.layout-box-left{ width: 60%; box-sizing: border-box; padding-right: 10%;}

#about .profile .layout>.layout-box-right{ width: 40%; box-sizing: border-box;}

#about .profile .layout .introduce>.slogan{ font-size: 3rem; font-weight: bold; color: #333;}

#about .profile .layout .introduce>.content{ margin: 40px auto; padding-right: 20px; font-size: 1.6rem; line-height: 2.8rem; color: #555; height: 360px;overflow: auto;}

#about .profile .layout .introduce>.content::-webkit-scrollbar {width:2px;height: 1px;}

#about .profile .layout .introduce>.content::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0); background:#005d8a;}

#about .profile .layout .introduce>.content::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0);border-radius: 0;background: #ededed;}

#about .profile .layout .introduce>.content>p{ margin-bottom: 20px;}

#about .profile .layout .video>a{ position: relative; display: block;}

#about .profile .layout .video>a:after{position: absolute;z-index: 20;  left: 0;top: 0;width: 100%;height: 100%; background: rgba(0,0,0,.3) url("../img/ico_play.png") no-repeat; background-position: 50% 50%; background-size:90px auto; content: ''; transition: all .35s;}

#about .profile .layout .video>a:hover:after{ background-color: rgba(0,0,0,.5)}

#about .profile .layout .statistics{text-align: left; margin: 0 auto;}

#about .profile .layout .statistics>.rows{ position: relative; display: inline-block; float: left; width: 50%; margin-bottom: 20px; box-sizing: border-box; text-align: left;}

#about .profile .layout .statistics>.rows>.num{ position: relative; color:#005d8a; }

#about .profile .layout .statistics>.rows>.num>span{ position: relative; display: inline-block;vertical-align: top; font-size: 5rem; font-family: Oswald;}

#about .profile .layout .statistics>.rows>.num>span:after{ position: absolute;z-index: 10; right: -25px; top:0; font-size: 3.2rem;font-family: Arial; width: 20px; height: 20px; content: attr(data-text);}

#about .profile .layout .statistics>.rows>.num>span.square:after{top: auto; right: -20px; bottom: 30px;}

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







#about .rd{margin: 0 auto; position: relative; background: url("../img/about_rd_bg.jpg") no-repeat; background-attachment: fixed; background-size: cover; padding: 150px 0;}

#about .rd .title>h3{ color: #fff;}

#about .rd .title>h4{color: rgba(255,255,255,.2);}

#about .rd .layout .statistics{text-align: left; margin: 0 auto; padding-top: 100px;}

#about .rd .layout .statistics>.rows{ position: relative; display: inline-block; float: left; padding: 30px; width: 25%; margin-bottom: 20px; box-sizing: border-box; text-align: center;}

#about .rd .layout .statistics>.rows>.ico{color: #fff; }

#about .rd .layout .statistics>.rows>.ico>i{font-size: 6rem;}

#about .rd .layout .statistics>.rows>.num{ position: relative; color:#fff; }

#about .rd .layout .statistics>.rows>.num>span{ position: relative; display: inline-block;font-size: 5rem; font-family: Oswald;}

#about .rd .layout .statistics>.rows>.num>span:after{ position: absolute;z-index: 10; right: -35px; top:50%; transform: translateY(-50%); font-size: 3rem;content: attr(data-text);}

#about .rd .layout .statistics>.rows>.tit{font-size: 1.6rem; color: rgba(255,255,255,.8);}





#about .production{margin: 0 auto;padding: 150px 0;}

#about .production .layout{margin: 0 auto;padding-top: 80px;}

#about .production .layout .swiper-slide{text-align: left;}

#about .production .layout .swiper-slide>a{display: block;position: relative;}

#about .production .layout .swiper-slide>a .img{overflow: hidden; position: relative; box-sizing: border-box; border: 1px solid #ddd;padding: 20px; background: #fff;}

#about .production .layout .swiper-slide>a .img:after{position: absolute;z-index: 1; left: 0;top: 0;width: 100%;height: 100%; opacity: 0; background: #005d8a; content: '';transition: all .35s;}

#about .production .layout .swiper-slide>a .img>span{opacity: 0; position: absolute;z-index: 30; left: 0; top:-120px; width: 100%;height: 310px; color: #fff; box-sizing: border-box;padding: 30px; font-size: 1.4rem; line-height: 2rem; transition: all .35s;}

#about .production .layout .swiper-slide>a .img>img{ width: 100%;height: auto;}

#about .production .layout .swiper-slide>a .tit{display: block; position: relative; padding: 20px 10px; font-size: 1.6rem; color: #666; transition: all .35s}

#about .production .layout .swiper-slide>a .tit:after{position: absolute;z-index: 1; right: 0; top: 50%; transform: translateY(-50%); color: #005d8a; width: 24px; height: 24px; line-height: 24px; border-radius: 100%; text-align: center; font-size: 3rem; font-weight: 100; font-family: Arial; content: '+'; transition: all .35s;}

#about .production .layout .swiper-slide>a .tit>span{display: inline-block;position: relative;}

#about .production .layout .swiper-slide>a .tit>span:after{position: absolute;z-index: 1; left: 0;bottom: -5px;width: 0; height: 1px; background: #005d8a; content: '';transition: all .35s;}

#about .production .layout .swiper-slide>a:hover .tit{color: #005d8a;}

#about .production .layout .swiper-slide>a:hover .tit:after{ transform:translateY(-50%) rotate(180deg); background: #005d8a; color: #fff;}

#about .production .layout .swiper-slide>a:hover .tit>span:after{ width: 100%;}

#about .production .layout .swiper-slide>a:hover .img:after{opacity: 1;}

#about .production .layout .swiper-slide>a:hover .img>span{opacity: 1; top: 0}

#about .production .layout .swiper-pagination{position: relative; bottom: 0; padding-top: 20px;}

#about .production .layout .swiper-pagination .swiper-pagination-bullet-active{ background: #005d8a;}







#about .certificate{ position: relative; margin: 0 auto;padding: 150px 0; background: #f9fbff;}

#about .certificate .wrap{ width: 100%;max-width: none;}

#about .certificate .layout{margin: 0 auto;padding: 80px 0;}

#about .certificate .layout>.layout-box-left{ width: 50%; float: left; position: relative; z-index: 10; box-sizing: border-box; background: url("../img/certificate_bg.png") no-repeat; background-position:  right top; background-size: cover; }

#about .certificate .layout>.layout-box-left .shows{ position: relative;z-index: 10; left: 50%; width:360px; padding-bottom: 30px;  transform:translateY(12%) translateX(-64%);}

#about .certificate .layout>.layout-box-left .shows .swiper-slide{ box-shadow: 0 6px 20px rgba(0,0,0,.4);}

#about .certificate .layout>.layout-box-right{ position: relative;z-index: 20; float: right; width: 45%; padding: 20px 0;  box-sizing: border-box; text-align: left;}

#about .certificate .layout>.layout-box-right .thumbs{text-align: left; }

#about .certificate .layout>.layout-box-right .thumbs .swiper{ position: relative; display: block;}

#about .certificate .layout>.layout-box-right .thumbs .swiper-wrapper{ text-align: left;}

#about .certificate .layout>.layout-box-right .thumbs .swiper-slide{ position:relative;display:block; margin: 10px 0;font-weight: 500; height:25px !important; line-height: 25px; cursor:pointer; transition:all .35s;}

#about .certificate .layout>.layout-box-right .thumbs .swiper-slide:after{position: absolute;z-index: 1; left: 0; top: 50%; width: 0; height: 2px; transform: translateY(-50%); background: #005d8a; content: ''; transition: all .35s;}

#about .certificate .layout>.layout-box-right .thumbs .swiper-slide i{ color: #ccc; font-size: 2.4rem; vertical-align: middle; transition: all .35s;}

#about .certificate .layout>.layout-box-right .thumbs .swiper-slide span{display: inline-block; vertical-align: middle; margin-left: 10px; color: #666; font-size: 1.6rem; transition: all .35s;}

#about .certificate .layout>.layout-box-right .thumbs .swiper-slide-thumb-active{padding-left: 30px;}

#about .certificate .layout>.layout-box-right .thumbs .swiper-slide-thumb-active:after{ width: 16px;}

#about .certificate .layout>.layout-box-right .thumbs .swiper-slide-thumb-active span{ color:#005d8a;font-size: 2.4rem;}

#about .certificate .layout>.layout-box-right .thumbs .swiper-slide-thumb-active i{color: #005d8a; font-size: 3rem;}







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

    #about .certificate .layout>.layout-box-left{ width: 60%}

    #about .certificate .layout>.layout-box-left .shows{ width:320px;}

    #about .certificate .layout>.layout-box-right{ width: 40%;}

    #about .certificate .layout>.layout-box-right .thumbs .swiper-slide-thumb-active span{font-size: 2rem;}

}



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



    #about .profile .layout>.layout-box-left{ width: 100%; float: none; padding-right: 0;}

    #about .profile .layout>.layout-box-right{ position: relative; width: 100%; float: none;}

    #about .profile .layout .introduce>.content{ height: auto;padding-right: 0;}

    #about .profile .layout .statistics{ padding-bottom: 50px;}

    #about .profile .layout .statistics>.rows{ width: 25%;}





    #about .certificate .layout>.layout-box-left{ width: 100%; float: none; padding-bottom: 50px;}

    #about .certificate .layout>.layout-box-left .shows{ width:400px;}

    #about .certificate .layout>.layout-box-right{ float: none; width: 86%; margin: 0 auto; padding-left: 5%;}





}



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



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

    #about .title>h4{font-size: 4.5rem;}



    #about .profile .layout .video>a:after{ background-size:60px auto;}





    #about .certificate .layout>.layout-box-left .shows{ width:320px;}

}



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



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

    #about .title>h4{font-size: 4rem;}





}



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



    #about .profile .layout{ padding: 50px 0; }

    #about .profile .layout .introduce>.slogan {font-size: 2.2rem;}

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

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

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

    #about .profile .layout .statistics>.rows>.num>span.square:after{bottom: 10px;}







    #about .rd { padding: 60px 0; }

    #about .rd .layout .statistics { padding-top: 50px; }

    #about .rd .layout .statistics>.rows{width: 50%;}

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

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



    #about .production { padding: 60px 0; }



    #about .certificate{padding: 60px 0; }

    #about .certificate .layout>.layout-box-left .shows{ width:220px;}

    #about .certificate .layout>.layout-box-right .thumbs .swiper-slide span{font-size: 1.4rem;}

    #about .certificate .layout>.layout-box-right .thumbs .swiper-slide-thumb-active span{ font-size: 1.8rem;}







}





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





    #about .title>h3{ font-size: 2.4rem; padding: 15px 0;}

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





    #about .profile{padding-top: 60px; }

    #about .profile .layout .introduce>.content { margin: 10px auto;}

    #about .profile .layout .statistics { padding-bottom: 10px;}

    #about .profile .layout .statistics>.rows {width: 50%;}



    #about .rd .layout .statistics>.rows {padding: 10px;}

    #about .rd .layout .statistics>.rows>.ico>i { font-size: 4rem;}

    #about .rd .layout .statistics>.rows>.num>span:after { right: -30px; font-size: 2rem; }



    #about .certificate{padding: 60px 0; }

    #about .certificate .layout{padding-bottom: 0;}

    #about .certificate .layout>.layout-box-left {background: url(../img/certificate_bg.png) no-repeat;background-position: left top; height: 240px; margin-bottom: 120px; }

    #about .certificate .layout>.layout-box-left .shows{transform: translateX(-50%) translateY(12%);}

    #about .certificate .layout>.layout-box-right{ padding-left: 0;}

    #about .certificate .layout>.layout-box-right .thumbs .swiper-slide span{margin-left: 5px;}

    #about .certificate .layout>.layout-box-right .thumbs .swiper-slide i{font-size: 2rem;}

    #about .certificate .layout>.layout-box-right .thumbs .swiper-slide-thumb-active{padding-left: 10px;}

    #about .certificate .layout>.layout-box-right .thumbs .swiper-slide-thumb-active span {font-size: 1.4rem;}

    #about .certificate .layout>.layout-box-right .thumbs .swiper-slide-thumb-active i { font-size: 2.4rem;}

    #about .certificate .layout>.layout-box-right .thumbs .swiper-slide-thumb-active:after{ width: 8px;}







}