@charset "utf-8";

@import url('https://fonts.font.im/css?family=Rubik');


#about{margin: 0 auto; }


#about .profile{position: relative;margin: 0 auto; background: url("../img/about_bg.jpg") no-repeat; background-position: 50% 50%; background-size: cover; padding: 300px 0 100px 0;}
#about .profile:after{position: absolute;z-index: 1; left: 0;bottom: 0;width: 100%;height: 100%; background: rgba(0,0,0,.7); content: '';}
#about .profile .theme{margin:0 auto; position: relative;z-index: 10;}
#about .profile .theme>.title{ margin: 0 auto;position: relative; font-size: 4rem; text-align: center; font-weight: 700; color: #fff;}
#about .profile .theme>.title:before{position: absolute;z-index: 12; left: 50%; transform: translateX(-50%); bottom: -10px;width: 36px;height: 3px; background: #fff;border-radius: 10px; content: '';}
#about .profile .container{margin: 0 auto; position: relative;z-index: 10; padding: 100px 0;}
#about .profile .container>.layout{ position: relative;}
#about .profile .container>.layout>.img{ position: relative; float: left; width: 45%; border-radius: 50px;overflow: hidden;}
#about .profile .container>.layout>.img>a{display: flex; align-content: center; align-items: center; justify-content: center; position: absolute;z-index: 50; left: 0;top: 0; width: 100%;height: 100%; color: #333; transition: all .35s;}
#about .profile .container>.layout>.img>a:before { position: absolute;left: 0;top: 0; z-index: 0;width: 100%;height: 100%; content: ""; transition: all .4s;}
#about .profile .container>.layout>.img>a:after { display: none; position: absolute;left: 50%;top: 50%; z-index: 0;width: 160px;height: 160px; margin-left: -80px;margin-top: -80px; border: 2px dashed #88cfff; border-radius: 100%; transform: translate(-50%,-50%); animation: fadenum 50s linear infinite; content: ""; transition: all .4s;}
#about .profile .container>.layout>.img>a>i{font-size: 8rem; }
#about .profile .container>.layout>.img>a:hover{background: rgba(0,0,0,.5); color: #88cfff;}
#about .profile .container>.layout>.img>a:hover:after{display: block;}
#about .profile .container>.layout>.img>a:hover>i{font-size: 7rem; }
#about .profile .container>.layout>.img>img{width: 100%;height: auto;}
#about .profile .container>.layout>.content{ position: absolute;z-index: 12; right: 0;top: 0; height: 100%; box-sizing: border-box;padding-right: 30px; float: right; width: 50%; color: #fff; overflow-x: hidden; overflow-y: auto; font-size: 1.6rem; line-height: 2.4rem;}
#about .profile .container>.layout>.content::-webkit-scrollbar {width:3px;height: 1px;}
#about .profile .container>.layout>.content::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0); background:#88cfff;}
#about .profile .container>.layout>.content::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0);border-radius: 0;background: transparent;}
#about .profile .container>.layout>.content>p{margin-bottom: 20px;}
#about .profile .shape{position: absolute;z-index: 12; left: 0;bottom: 0; width: 100%; height: 100px;transform: rotate(180deg);}
#about .profile .shape svg { fill:#f7f7f7; position: relative; display: block; width: 100%; height: 100%;}
#about .profile .bg{ display: none; margin: 0 auto;}
#about .profile .bg>img{ width: 100%;height: auto;}

@keyframes fadenum {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}


#about .advantage{margin: 0 auto; background: #f7f7f7; padding: 100px 0;}
#about .advantage .theme{margin:0 auto;}
#about .advantage .theme>.title{ text-align: center; margin: 0 auto;position: relative; font-size: 4rem; font-weight: 700; color: #464646;}
#about .advantage .theme>.title:before{position: absolute;z-index: 12; left: 50%; bottom: -10px;width: 36px;height: 3px; background: #88cfff;border-radius: 10px; transform: translateX(-50%); content: '';}
#about .advantage .container{ margin: 0 auto; padding: 100px 0;}
#about .advantage .container>.layout{margin: 0 auto;}
#about .advantage .container>.layout>.slide{position: relative;perspective: 600px;  display: block; float: left; width: 22%;  height: 360px; margin-right: 4%;  box-sizing: border-box;text-align: center; transition: all .35s;}
#about .advantage .container>.layout>.slide:nth-child(4n){margin-right: 0;}
#about .advantage .container>.layout>.slide .box{width: 100%; height: 100%; background: #fff; box-shadow: 0 2px 26px rgba(0,0,0,.1); border-radius: 60px;padding: 50px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all .45s; position: absolute; left: 0; top: 0;}
#about .advantage .container>.layout>.slide:nth-child(even) .box{background: linear-gradient(#fff 20%,  #dff2ff);box-shadow: 0 1px 16px rgba(0,0,0,.1);}
#about .advantage .container>.layout>.slide .ico{text-align: center;margin: 0 auto;}
#about .advantage .container>.layout>.slide .ico>img{ width: 60px;height: auto;}
#about .advantage .container>.layout>.slide .title{ padding:15px 20px;font-size: 1.8rem; font-weight: bold; color: #333; margin: 0 auto; transition: all .35s; }
#about .advantage .container>.layout>.slide .intro{ margin: 0 auto; padding: 0 20px; text-align: center; font-size: 1.4rem; line-height: 2rem; color: #666; transition: all .35s;}
#about .advantage .container>.layout>.slide .box-back, #about .advantage .container>.layout>.slide:nth-child(even) .box-back{width: 100%; height: 100%; background: linear-gradient(#0098ff 20%,  #88cfff);border-radius: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all .45s; position: absolute; left: 0; top: 0; transform: rotateY(180deg); backface-visibility:hidden;}
#about .advantage .container>.layout>.slide .box-back .ico{margin-top: 16px;}
#about .advantage .container>.layout>.slide .box-back .ico>img{ width: 100px;height: auto;}
#about .advantage .container>.layout>.slide .box-back .title{color: #fff; font-size: 2rem;}
#about .advantage .container>.layout>.slide:hover .box-back{transform: rotateY(0);}
#about .advantage .container>.layout>.slide:hover .box{transform: rotateY(-180deg);}


#about .quality{position: relative; margin: 0 auto; padding: 100px 0;}
#about .quality .theme{margin:0 auto;}
#about .quality .theme>.title{ text-align: center; margin: 0 auto;position: relative; font-size: 4rem; font-weight: 700; color: #464646;}
#about .quality .theme>.title:before{position: absolute;z-index: 12; left: 50%; bottom: -10px;width: 36px;height: 3px; background: #88cfff;border-radius: 10px; transform: translateX(-50%); content: '';}
#about .quality .container{ position: relative; margin: 0 auto; padding: 100px 0;}
#about .quality .container>.swiper{ position: relative;z-index: 50; margin: 0 auto;}
#about .quality .container>.swiper .swiper-slide .img{ border-radius: 20px;overflow: hidden;}
#about .quality .container>.swiper .swiper-slide .img>img{transition: all 1s;}
#about .quality .container>.swiper .swiper-slide .title{text-align: center; font-size: 1.6rem;font-weight: bold; padding-top: 20px; transition: all .35s;}
#about .quality .container>.swiper .swiper-slide:hover .title{color: #88cfff;}
#about .quality .container>.swiper .swiper-slide:hover .img>img{transform: scale(1.1)}
#about .quality .container>.swiper .swiper-pagination{position: relative; bottom: 0;padding-top: 30px;}
#about .quality .container>.swiper .swiper-pagination .swiper-pagination-bullet-active{background: #88cfff;}
#about .quality .container>.control{ display: block; position: absolute;z-index: 100; left: 50%;top: 40%; width: 86%; max-width: 1400px; transform: translate(-50%,-50%);}
#about .quality .container>.control>a{display: inline-flex;align-items: center;align-content: center;justify-content: center; width: 50px;height: 50px; border: 1px solid #eee; color: #88cfff; border-radius:100%;transition: all .35s;}
#about .quality .container>.control>a:hover{background: #88cfff; color: #fff;  border-color: #88cfff;}
#about .quality .container>.control>a>i{font-size: 2.4rem;font-weight: bold;}
#about .quality .container>.control>a.prev{float: left; margin-left: -80px;}
#about .quality .container>.control>a.next{float: right; margin-right: -80px;}
#about .quality .shape{position: absolute;z-index: 12; left: 0;top: 0; width: 100%; height: 100px;transform: rotate(0deg);}
#about .quality .shape svg { fill:#f7f7f7; position: relative; display: block; width: 100%; height: 100%;}



#about .certificate{position: relative; margin: 0 auto; background: url("../img/certificate_bg.jpg") no-repeat; background-size: cover; padding: 100px 0;}
#about .certificate .theme{margin:0 auto;}
#about .certificate .theme>.title{ text-align: center; margin: 0 auto;position: relative; font-size: 4rem; font-weight: 700; color: #fff;}
#about .certificate .theme>.title:before{position: absolute;z-index: 12; left: 50%; bottom: -10px;width: 36px;height: 3px; background: #fff;border-radius: 10px; transform: translateX(-50%); content: '';}
#about .certificate .container{ margin: 0 auto; padding: 100px 0;}
#about .certificate .container .focus{width: 32%; box-sizing: border-box; text-align: left;}
#about .certificate .container .focus .swiper-slide>img{width: 100%;height: auto; border-radius: 20px;}
#about .certificate .container .focus .swiper-slide>span { display: block; text-align: left; font-size: 1.6rem; font-weight: bold; color: #fff; padding: 20px;}
#about .certificate .container .focus .swiper-pagination { position: relative!important; text-align: left!important; padding: 20px;}
#about .certificate .container .focus .swiper-pagination .swiper-pagination-bullet { margin: 0; float: left;width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 30px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 2px));border-radius: 0;background: var(--swiper-pagination-bullet-inactive-color, #fff);opacity: var(--swiper-pagination-bullet-inactive-opacity, .3);}
#about .certificate .container .focus .swiper-pagination .swiper-pagination-bullet-active{width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 50px)); opacity: var(--swiper-pagination-bullet-inactive-opacity, 1);}
#about .certificate .container .box{width: 58%; padding: 50px 0; text-align: left; box-sizing: border-box;}
#about .certificate .container .box>.ico{padding: 20px 0 50px 0;}
#about .certificate .container .box>.ico>img{ height: 50px; width: auto; margin-right: 20px; opacity: .5;}
#about .certificate .container .box>.intro{font-size: 1.6rem; color: #fff; line-height: 2.4rem;}
#about .certificate .container .box>.intro>p{margin-bottom: 15px;}
#about .certificate .container .box>.more{text-align: left;}
#about .certificate .container .box>.more>a{display: inline-flex; align-content: center; align-items: center; color: #fff; border: 2px solid #fff; font-size: 1.4rem; font-weight: bold; border-radius: 50px; padding: 12px 25px; transition: all .35s;}
#about .certificate .container .box>.more>a>i{display: inline-block; font-size: 2rem; margin-left: 5px;}
#about .certificate .container .box>.more>a>span{display: inline-block;}
#about .certificate .container .box>.more>a:hover{ background: #fff; color:#88cfff; box-shadow: 0 8px 26px rgba(0,0,0,.1);}
#about .certificate .shape{position: absolute;z-index: 12; left: 0;bottom: 0; width: 100%; height: 100px;}
#about .certificate .shape[data-direction="top"]{bottom: auto;top: 0;}
#about .certificate .shape[data-direction="top"] svg { fill:#fff; position: relative; display: block; width: 100%; height: 100%;}
#about .certificate .shape[data-direction="bottom"]{bottom: 0;transform: rotate(180deg);}
#about .certificate .shape[data-direction="bottom"] svg { fill:#fff; position: relative; display: block; width: 100%; height: 100%;}




#about .vision{margin: 0 auto; background: #fff; padding: 100px 0;}
#about .vision .theme{margin:0 auto;}
#about .vision .theme>.title{ text-align: center; margin: 0 auto;position: relative; font-size: 4rem; font-weight: 700; color: #464646;}
#about .vision .theme>.title:before{position: absolute;z-index: 12; left: 50%; bottom: -10px;width: 36px;height: 3px; background: #88cfff;border-radius: 10px; transform: translateX(-50%); content: '';}
#about .vision .container{ margin: 0 auto; padding: 150px 0 100px 0;}
#about .vision .container>.layout>.slide{ display: block; background: #f0f9ff; border-radius: 50px;margin-bottom: 100px;}
#about .vision .container>.layout>.slide:last-child{margin-bottom: 0;}
#about .vision .container>.layout>.slide>.box{display: block; float: left; width: 50%; box-sizing: border-box; padding: 80px 50px;}
#about .vision .container>.layout>.slide>.img{position:relative; display: block; float: right; width: 45%; border-radius: 50px;overflow: hidden; transform: translateY(-50px) translateX(-50px); transition: all .6s;}
#about .vision .container>.layout>.slide>.img>i{position: absolute;z-index: 50; left: 50%;top: 50%; width: 120px; height: 120px; transform: translate(-50%,-50%); opacity: 0; transition: all .35s;}
#about .vision .container>.layout>.slide>.img>i>img{width: 100%;height: auto;}
#about .vision .container>.layout>.slide>.img>img{width: 100%;height: auto; transition: all .35s;}
#about .vision .container>.layout>.slide>.img:after{position: absolute;z-index: 12; left: 0;top: 0;width: 100%;height: 100%; background: #88cfff;opacity: 0; content: ''; transition: all .3s;}
#about .vision .container>.layout>.slide:nth-child(even)>.box{float: right;}
#about .vision .container>.layout>.slide:nth-child(even)>.img{float: left; transform: translateY(-50px) translateX(50px);}
#about .vision .container>.layout>.slide>.box>.title{font-size: 2.8rem; font-weight: bold; color: #333;}
#about .vision .container>.layout>.slide>.box>.intro{margin:  0 auto;padding-top:30px; color: #666; font-size: 1.6rem; line-height: 2rem;}
#about .vision .container>.layout>.slide>.box>.intro>p{margin-bottom: 20px;}
#about .vision .container>.layout>.slide:hover .img>i{opacity: 1;}
#about .vision .container>.layout>.slide:hover .img>img{opacity: .5;}
#about .vision .container>.layout>.slide:hover .img:after{opacity: .8;}



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

    #about .certificate .container .focus{width: 40%;}
    #about .certificate .container .box{width: 52%;}


    #about .vision .container>.layout>.slide{position: relative;}
    #about .vision .container>.layout>.slide>.box{ display: inline-block; width: 50%;}
    #about .vision .container>.layout>.slide>.img{ position: absolute; right: 0; float: none; width: 50%; height: 100%; transform: translateY(0) translateX(0)!important;}
    #about .vision .container>.layout>.slide>.img>img{height: 100%; width: auto;object-fit: cover;}
    #about .vision .container>.layout>.slide:nth-child(even)>.img{ right: auto;left: 0;}
}

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


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

    #about .advantage .theme>.title { font-size: 3.2rem; }
    #about .advantage .container>.layout>.slide{ width: 48%;  height: 360px; margin-right: 0; margin-bottom: 4%;}
    #about .advantage .container>.layout>.slide:nth-child(even){ float: right;}

    #about .certificate .theme>.title { font-size: 3.2rem; }
    #about .certificate .container .focus{width: 45%;}
    #about .certificate .container .box{width: 46%;}
    #about .certificate .container .box>.ico>img{ height: 40px; margin-right: 10px;}
    #about .certificate .container .box>.intro{font-size: 1.5rem; line-height: 2.2rem;}

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

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

}


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


    #about .profile .container>.layout>.img{float: none; width: 100%; }
    #about .profile .container>.layout>.content{ position: relative; float: none; width: 100%; height: auto; padding-top: 50px; padding-right: 0; }

    #about .vision .container>.layout>.slide>.box{ position: relative;z-index: 50; float: none; width: 100%; padding: 100px 50px 50px 50px;}
    #about .vision .container>.layout>.slide>.box>.title { font-size: 2.4rem;}
    #about .vision .container>.layout>.slide>.box>.intro {  font-size: 1.4rem; }
    #about .vision .container>.layout>.slide>.img{float: none; width: 26%; height: auto; left: auto; right: 30px!important;top: -50px;}
    #about .vision .container>.layout>.slide:nth-child(even)>.img{ right: 30px;left: auto;}
    #about .vision .container>.layout>.slide>.img>i{width: 70px; height: 70px;}
    #about .vision .container>.layout>.slide>.img>img{height: auto; width: 100%;}

    #about .certificate .container .box { padding: 30px 0;}
    #about .certificate .container .box>.more>a { padding: 10px 25px; }



}

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

    #about .quality .container>.control{display: none;}

    #about .certificate { position: relative; padding:100px 0; background-color: #f7f7f7; background-size: 130% auto;}
    #about .certificate .container .focus{width: 100%; float: none;padding-left: 0; position: relative;z-index: 60;}
    #about .certificate .container .focus .swiper{padding-top: 50px;}
    #about .certificate .container .focus .swiper-slide{padding: 8px; text-align: center;}
    #about .certificate .container .focus .swiper-slide>img{box-shadow: 0 2px 8px rgba(0,0,0,.1);}
    #about .certificate .container .focus .swiper-slide>img{width: 100%;height: auto;}
    #about .certificate .container .focus .swiper-slide>span{text-align: center; color: #666; font-size: 1.4rem; }
    #about .certificate .container .focus .swiper-pagination { position: absolute!important; top: 0; text-align: center!important; width: 100%; padding-top:0;}
    #about .certificate .container .focus .swiper-pagination .swiper-pagination-bullet { display: inline-block; margin: 0 3px; float: none;width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));border-radius: 100%;background: var(--swiper-pagination-bullet-inactive-color, #fff);opacity: var(--swiper-pagination-bullet-inactive-opacity, .3);}
    #about .certificate .container .focus .swiper-pagination .swiper-pagination-bullet-active{width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); opacity: var(--swiper-pagination-bullet-inactive-opacity, 1);}

    #about .certificate .container{padding: 50px 0;}
    #about .certificate .container .box{width: 100%; float: none; text-align: center; padding: 0 50px;z-index: 12;}
    #about .certificate .container .box>.intro{ padding-bottom: 0;}
    #about .certificate .container .box>.intro>p{display: none;}
    #about .certificate .container .box>.intro>p:first-child{display: block;}
    #about .certificate .container .box>.ico>img { margin: 0 5px;}
    #about .certificate .container .box>.more{ position: absolute;z-index: 20; left:50%; bottom: 50px; transform: translate(-50%,0); padding:0;text-align: center;}
    #about .certificate .container .box>.more>a{  background: #88cfff;  color: #fff; border-color: #88cfff; transform: skewX(0deg);}
    #about .certificate .container .box>.more>a:hover{background: none;}

}



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

    #about .profile { padding: 200px 0 100px 0;}
    #about .profile .theme>.title { font-size: 2.8rem;  }
    #about .profile .container>.layout>.content{ font-size: 1.4rem; line-height: 2rem;}
    #about .profile .shape{ height: 80px;}

    #about .advantage .theme>.title { font-size: 2.8rem; }
    #about .advantage .container { padding-bottom: 0; }
    #about .advantage .container>.layout>.slide{ width: 46%; margin-bottom: 8%;}


    #about .certificate .theme>.title { font-size:2.8rem; }
    #about .certificate .container .box>.intro { font-size: 1.4rem;line-height: 1.8rem; }
    #about .certificate .shape{height: 80px;}

    #about .quality .theme>.title { font-size:2.8rem; }
    #about .quality .container{ padding-bottom: 0;}
    #about .quality .shape{height: 80px;}

    #about .vision .theme>.title { font-size:2.8rem; }
    #about .vision .container>.layout>.slide>.img { width: 32%;}




}

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

    #about .certificate { background-size: 170% auto;}


}

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

    #about .profile .theme>.title { font-size: 2.4rem;  }
    #about .profile .shape{ height: 40px;}
    #about .profile .container{padding: 50px 0;}

    #about .advantage .theme>.title { font-size: 2.8rem; }
    #about .advantage .container{padding: 50px 0;}
    #about .advantage .container>.layout>.slide .title { font-size: 1.6rem; }
    #about .advantage .container>.layout>.slide .intro { font-size: 1.2rem; line-height: 1.8rem;}


    #about .certificate { background-size: 200% auto;}
    #about .certificate .theme>.title { font-size:2.4rem; }
    #about .certificate .container {  padding-bottom:0;}
    #about .certificate .container .box>.ico>img{ height: 28px; }
    #about .certificate .container .focus .swiper-slide>span { font-size: 1.2rem; }
    #about .certificate .shape{height: 40px;}

    #about .quality .theme>.title { font-size: 2.4rem; }
    #about .quality .container { padding-top: 50px; }
    #about .quality .shape{height: 40px;}



    #about .vision .theme>.title{ font-size: 2.4rem;}
    #about .vision .container{padding: 50px 0;}
    #about .vision .container>.layout>.slide {margin-bottom: 50px; }
    #about .vision .container>.layout>.slide>.img{position:relative; float: none; width: 100%; border-radius: 50px; top: 0; right: 0!important;}
    #about .vision .container>.layout>.slide>.box {padding: 50px; }
    #about .vision .container>.layout>.slide>.box>.title { font-size: 2rem;}



}


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

    #about .profile { padding: 150px 0 50px 0;}
    #about .profile .shape{ height: 30px;}

    #about .advantage .container { padding-bottom: 0;}
    #about .advantage .container>.layout>.slide{float: none; width: 100%;  margin-right: 0;}
    #about .advantage .container>.layout>.slide:nth-child(even){float: none;}
    #about .advantage .container>.layout>.slide:last-child{margin-bottom: 0;}
    #about .advantage .container>.layout>.slide .box {padding: 20px;}


    #about .certificate .container .box{padding: 0 20px;}
    #about .certificate .container .box>.intro{display: none;}
    #about .certificate .container .box>.ico { padding: 20px 0; }
    #about .certificate .container .box>.ico>img{ height: 24px; }
    #about .certificate .container .box>.more>a{font-size: 1.2rem;}
    #about .certificate .container .box>.more>a>i{font-size: 1.8rem;}

    #about .certificate .shape{height: 30px;}

    #about .quality .shape{height: 30px;}


    #about .vision .container>.layout>.slide>.box>.title { font-size: 1.8rem;}
    #about .vision .container>.layout>.slide>.box {padding: 30px; }





}