@import url("../css/normalize.css");

@import url(../css/swiper-4.3.3.min.css);

body{

    margin:0; padding:0; color:#0c0c0c; font-size:14px;

    font-family: "-apple-system","BlinkMacSystemFont",Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;

    -webkit-tap-highlight-color: rgba(26,26,26,0)

}

.wrapper{ max-width:1680px; margin:0 auto;}

.clearfix{clear:both; overflow:hidden;}

.clearfix:after{content:""; display:table;  height:0; font-size:0; overflow:hidden; clear:both;}

h1,h2,h3,h4,h5,h6,ul,ol,li{margin:0; padding:0;}

ul,ol,li{list-style: none;}

a{text-decoration: none;}





.topbar{ height:66px;

    background-color:rgba(0,0,0,0.2);

    border-bottom:1px solid rgba(255,255,255,0.2); position:fixed; top:0; left:0; width:100%;

    z-index:100;

}

.topbar:hover{background-color:rgba(0,0,0,0.8);}

    .logo{ float:left; width:240px; height:66px;

        background:url(../images/logo.png) no-repeat center center;

    }

    .logo a{ display:block; width:100%; height:100%; text-indent:-999em;}

    .logo a:hover{ background-color:rgba(255,255,255,0.1);}



    .topnav{float:right; text-align:left;}

    .topnav a{display:inline-block; height:66px; line-height:66px; padding:0 30px; margin:0 10px; color:#fff;}

    .topnav a:hover{background-color:rgba(255,255,255,0.2);}



    .mobile-menu{ display:none;}

    .topnav-mask{ position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); display:none;}



.mv-1{ height:750px; position: relative;}    

    #particles-js{

        position: absolute;

        left:0; top:0;

        width: 100%;

        height: 100%;

        background-color: transparent;

        background-image: url("");

        background-repeat: no-repeat;

        background-size: cover;

        background-position: 50% 50%;

        z-index:10;

    }

    .swiper{ position:absolute; left:0; width:100%; top:0; height:100%; z-index:9;}

    .swiper-container{height:100%;}

    .swiper-item{position: relative;}

        .banner01{

            background:url(../images/banner01.jpg) no-repeat center center;

            background-size:cover;

            height:100%;        

        }



        .banner02{

            background:url(../images/banner02.jpg) no-repeat center center;

            background-size:cover;

            height:100%;  

        }

        .banner01-inner{position:absolute; left:50%; top:50%; min-width:80%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); text-align: center; color:#fff;}

        .banner01-inner img{max-width:90%;}

        .banner01-p1{ font-size:32px;}

.mv-2{ text-align: center;}







    .mv2-list{ padding:145px 0; text-align: center;}

    .mv2-list li{ 

        vertical-align: top; 

        /* 

        float:left; 

        

        */

        width:17%;

        margin:0 1%; 

        list-style:none; 

        box-sizing:border-box;

        text-align: left;

        display:inline-block;

    }

    .mv2-item{font-size:14px;}

    .mv2-item h3{ font-size:32px; margin:30px 0 60px; position: relative;}

    .mv2-item h3:after{content:""; position:absolute; left:0; bottom:-20px; width:38px; height:4px; background-color:#27ae60;}

    .mv2i1-icon,.mv2i2-icon,.mv2i3-icon,.mv2i4-icon,.mv2i5-icon{

        width:135px; height:135px;

    }

    .mv2i1-icon{ background:url(../images/icon-f1.png) no-repeat center center;}

    .mv2i2-icon{ background:url(../images/icon-f2.png) no-repeat center center;}

    .mv2i3-icon{ background:url(../images/icon-f3.png) no-repeat center center;}

    .mv2i4-icon{ background:url(../images/icon-f4.png) no-repeat center center;}

    .mv2i5-icon{ background:url(../images/icon-f5.png) no-repeat center center;}



.mv-3{

    background:url(../images/bg03.jpg) no-repeat center center;

    background-size:cover;

}

    .datashow{ text-align: center; color:#fff; padding:100px 0;}

    .datashow h2{font-size:32px; font-weight:normal; margin-bottom:1em;}

        .datashow-p1{ font-size:88px;}

        .datashow-p2{ font-size:18px;}

        .datashow-p3{ font-size:56px; margin-top:40px; margin-bottom:30px;}

        

        .datashow-p5{ font-size:56px; display:inline-block; border-top:1px solid #fff; min-width:40%; padding:20px 0; position: relative;}

        .datashow-p5:before{content:""; position:absolute; left:50%; width:1px; top:10%; height:80%; background-color:#fff; }

            .datashow-p5-item{display:inline-block; width:45%;}

        .datashow-c1{ color:#27ad60; }

        .datashow-c2{ font-size:18px; margin:.5em 0;}



.mv-4{}

    .mv4-item{ width:50%; height:612px; line-height:612px; float:left;}

    .mv4-item1{background:url(../images/bg04-1.jpg) no-repeat center center; background-size:cover;}

    .mv4-item2{background:url(../images/bg04-2.jpg) no-repeat center center; background-size:cover;}

    .mv4-item3{background:url(../images/bg04-3.jpg) no-repeat center center; background-size:cover;}

    .mv4-item4{background:url(../images/bg04-4.jpg) no-repeat center center; background-size:cover;}

        .mv4-item-inner{ display:inline-block; width:80%; margin:0 10%; color:#fff; line-height: 1.2; vertical-align: middle;}

        .mv4-item-inner h3{ font-size:42px; font-weight:normal; margin-bottom:1em;}

        .mv4-item-inner h3:before{content:""; display:inline-block; width:4px; height:38px; background-color:#27ae60; margin-right:15px; vertical-align: middle; margin-bottom:3px;}

        .mv4-item-inner p{ font-size:24px; margin:0;}

    

.mv-5{

    padding:100px 5%;

    text-align: center;

}

    .mv5-h2{ font-size:48px; font-weight:normal; margin-bottom:20px;}

    .coop{ text-align: center;}

    .coop a{display:inline-block; vertical-align: middle; width:auto; margin:0 10px 10px; overflow:hidden;}

    .coop a img{display:block; max-height:80px; transition: .5s;margin:0 auto; max-width:100%; width: 250px; }

    .coop a:hover img{-webkit-transform: scale(1.1);transform: scale(1.1); }



.mv-6{background-color:#1c1d1f; padding:50px 0 100px; color:#fff;}

.mv-6 .wrapper{max-width:1200px;}

.mv-6 a{color:#fff;}

.mv-6 a:hover{ text-decoration: underline;}

    .contact-us{ padding:0 2em;}

    .contact-us h3{ font-size:24px; margin-bottom:15px;}

    .contact-us-item{ display:inline-block; margin:0 50px 0 0;}

    .contact-us-item h3{font-weight:normal;}

    .icon-email,.icon-skype,.icon-qq{ display:inline-block; width:30px; height:30px; vertical-align: middle; margin-bottom:3px; margin-right:10px;}

    .icon-email{ background:url(../images/icon-email.png) no-repeat center center; }

    .icon-skype{ background:url(../images/icon-skype.png) no-repeat center center; }

    .icon-qq{ background:url(../images/icon-qq.png) no-repeat center center; }



    .navigator{ float:right; padding:0 50px 0 20px;}

    .navigator h3{font-size:24px; margin-bottom:15px;}

    .navigator ul{margin-top:2em;}

    .navigator li{position: relative; padding-left:20px; line-height:30px;}

    .navigator li:before{content:">"; position:absolute; left:5px; top:0; }



    .footer{

        text-align: center;

        background-color:#010603;

        padding:10px 0 16px;

        overflow:hidden;

        color:#fff;

        line-height:1.5;

    }

    .footer a{color:#fff;}





/* about us */

.about-us{ padding:5% 10%; max-width:1680px; margin:0 auto;}

.about-us img{max-width:100%;}

    

    .about-us-row{ margin-bottom:4em;}



    .about-us-img img{max-width:100%;}

    .about-us-txt{ font-size:18px; line-height: 1.6; color:#333}

        .about-us-word{ display:block;}

        .line{display:none;}

    .about-us-txt h3{ font-size:42px; font-weight:normal; margin-bottom:1em; position: relative;}

    .about-us-txt h3:after{content:""; position:absolute; left:0; bottom:-0.5em; width:40px; height:4px; background-color:#000;}

    .about-us-txt p{margin:1em 0 0 0;}

    

    .about-us-row{ position:relative; }

        .about-us-img3,

        .about-us-img1{

            position:absolute; left:0; top:0; width:40%; height:100%;

            background:url(../images/about-1.jpg) no-repeat center center; background-size:cover;

        }

        .about-us-txt3,

        .about-us-txt1{ margin-left:45%; position: relative; padding-left:6em; }

        .about-us-txt1 h2{position:absolute; left:0; top:15px; font-size:48px; font-weight:normal; line-height: 1;

            text-align: right;

            -webkit-transform: rotate(-90deg) translate(-100%);

                    transform: rotate(-90deg) translate(-100%);

            -webkit-transform-origin: left top;

                    transform-origin: left top;

        }

        

        .about-us-img2{

            /* position:absolute; */

            right:0;

            top:0;

            width:55%;

            height:100%;

            background-size:contain;

            float: right;

        }

        .about-us-txt2{

            margin-right:60%;

            position: relative;

            float: left;

            margin-right: 0;

            width: 40%;

        }



        .about-us-img3{background:url(../images/about-3.jpg) no-repeat center center; background-size:cover;}

        .about-us-txt3{ padding-left:0;}

        .about-us-txt3 img{ width:100%;}



        .about-us-txt4{ text-align: center;}

        

        .about-us-tb img{ width: 100%;}



        .employee-imgs{ text-align: center; word-spacing: -3px;}

        .employee-img{display:inline-block; overflow:hidden;}

        .employee-img img{ height:243px;}



/* join us */

.join-us{ padding:100px 2%;}

.join-us a{color:#666;}

.join-us h2{font-size:32px; line-height: 1.8; text-align: center; font-weight: normal; margin-bottom:3em; position: relative;}

.join-us h2:after{

    content:""; position:absolute; bottom:-1em; width:10%; left:45%; height:4px; background-color:#050403;

}

    .hc-item{max-width:900px; margin:0 auto; color:#999; font-size:16px; margin:0 auto 50px; padding-bottom:50px; border-bottom:1px dashed #eee;}

    .hc-item dt{font-size:36px; margin-bottom:1em; color:#050403;}

    .hc-item dd{margin:0; line-height: 1.5;}

    .hc-item dd h3{font-size:18px; color:#050403; margin: 1.5em 0;}











/* media query */

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

    .mv2-list { padding:30px 0;}

    .mv2-list li{ width:22.5%; margin:0 1%;}

    .mv2-list li h3{ font-size:28px; margin-bottom:30px;}

    .mv2-list li h3:after{bottom:-10px;}

    .mv2-list li .mv2i1-icon,

    .mv2-list li .mv2i2-icon,

    .mv2-list li .mv2i4-icon,

    .mv2-list li .mv2i3-icon,

    .mv2-list li .mv2i5-icon{ width:80px; height:80px; background-size:contain;}

}

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



   .topnav a{ padding:0 10px;}



   .mv2-list { padding:30px 0;}

   .mv2-list li{ width:92%; margin:0 4%;}

   .mv2-list li .mv2i1-icon,

   .mv2-list li .mv2i4-icon,

   .mv2-list li .mv2i2-icon,

   .mv2-list li .mv2i3-icon,

   .mv2-list li .mv2i5-icon{float:right; margin-top:20px;}

   .mv2-list li h3{margin-bottom:30px;}

   .mv2-list li h3:after{bottom:-10px;}



   .about-us-txt{ font-size:14px;}

   .about-us-txt h3{ font-size:24px;}

   .about-us-txt1 h2{font-size:30px;}

}



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

    .datashow{padding:30px 0 20px;}

    .datashow h2{font-size:22px; font-weight:normal; margin-bottom:1em;}

    .datashow-p1{ font-size:48px;}

    .datashow-p2{ font-size:16px;}

    .datashow-p3{ font-size:36px; margin-top:30px; margin-bottom:32px;}

    

    .datashow-p5{ font-size:36px; display:inline-block; border-top:1px solid #fff; min-width:40%; padding:20px 0; position: relative;}

    .datashow-p5:before{content:""; position:absolute; left:50%; width:1px; top:10%; height:80%; background-color:#fff; }

        .datashow-p5-item{display:inline-block; width:45%;}

    .datashow-c1{ color:#27ad60; }

    .datashow-c2{ font-size:18px; margin:.5em 0;}



    .mv4-item{ height:300px; line-height: 300px;}

    .mv4-item-inner h3{ font-size:22px; font-weight:normal; margin-bottom:1em;}

    .mv4-item-inner h3:before{height:1em;}

    .mv4-item-inner p{ font-size:14px; margin:0;}



    .mv5-h2{ font-size:32px; font-weight:normal; margin-bottom:20px;}



    .employee-img{display:inline-block; overflow:hidden;}

}

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



    .logo{ float:none; margin:0 auto;}



    .mobile-menu{ 

        display:block;

        position:absolute; left:0; top:0; width:66px; height:66px;

        background: url(../images/icon-menu.png) no-repeat center center;

    }

    .lang-nav{ 

        display:block;

        position:absolute; right:0; top:0; width:66px; height:66px;

    }

    .topnav-mask{ position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); transition:.5s;opacity: 0; display:none;}

    .topnav{ display:block; position:fixed; width:40%; background-color:#000; height:100%; z-index:100; transition:.5s;

        -webkit-transform: translateX(-100%);

                transform: translateX(-100%);

    }

    .topnav a{display:block; }

    .topnav a:hover{ background-color:#27ad60; color:#fff;}



    .showNav .topnav-mask{ display:block; opacity: 1;}

    .showNav .topnav{ -webkit-transform: translateX(0); transform: translateX(0);}



    .join-us{ padding:2em 2%;}



    .join-us h2{font-size:16px; }

    .join-us h2:after{ width:60%; left:20%; height:2px;}



    .hc-item{ padding:0 1em; font-size:14px;}

    .hc-item dt{font-size:24px;}

    .hc-item dd h3{ margin:1.5em 0 0em;}





    .about-us-word{ display:inline;}

    .line{display:inline;}



    .about-us-row{ margin:1em 0;}

    .about-us-img{ position: relative; width:100%; overflow: hidden;}

    

    .about-us-txt{ width: 100%; margin-left:0;}

    .about-us-txt p{ margin: 1em 0;}



    .about-us-txt1{ padding:0;}

    .about-us-txt1 h2{ -webkit-transform: rotate(0); transform: rotate(0); text-align: left; position: relative; margin-bottom:30px;}



    .about-us-txt4{text-align: left;}

}



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







    .mv-1{ height:300px;}

        .banner01-p1{ font-size:15px;}

        .mv2-list li .mv2i1-icon, .mv2-list li .mv2i2-icon, .mv2-list li .mv2i3-icon, .mv2-list li .mv2i4-icon, .mv2-list li .mv2i5-icon{

            margin-top:10px; width:60px; height:60px;

        }



    .mv4-item{ height:200px; line-height: 200px;}

    .mv4-item-inner h3{ font-size:18px;}



    .datashow h2{font-size:22px; font-weight:normal; margin-bottom:1em;}

    .datashow-p1{ font-size:30px;}

    .datashow-p2{ font-size:12px;}

    .datashow-p3{ font-size:28px; margin-top:20px; margin-bottom:10px;}

    .datashow-p5{ min-width:80%;}



    .coop a{ width: 30%; margin: 0 9% 20px; }







    .mv-6{ padding:15px 0;}

        .navigator{ width:100%; box-sizing: border-box; padding:0 2em; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.2);}

        .navigator h3{margin-bottom:.5em;}

        .navigator ul{margin-top:.5em;}

        .navigator ul li{display:inline-block; width:40%;}

        

        .contact-us h3{margin-bottom:1em;}

        .contact-us-item{margin-bottom:1em; width:100%; margin:0 0 1em;}

        .contact-us-item p{display:inline;}

        .contact-us-item ul{margin-top:1em; padding-left:1em;}



    .employee-img{display:block; overflow:hidden;}

}

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

    .mv4-item-inner h3{ font-size: 14px;}

    .mv4-item-inner p{font-size:12px;}

}



.lang-nav {

    height: 66px;

    padding: 26px 0;

}

.lang-nav .trip {

    color: #ddd;

}

.lang-nav a {

    font-size: 14px;

    color: hsla(0,0%,100%,.45);

}

.lang-nav a.active {

    font-size: 14px;

    color: #fff;

}

.mv2-item p {

    max-width: 330px;

}



#company-images .swiper-slide img {

    height: 404px;

}



#company-images .swiper-container {

    width: 100%;

    height: 100%;

  }

  #company-images  .swiper-slide {

    text-align: center;

    font-size: 18px;

    background: #fff;



    /* Center slide text vertically */

    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;

    width: auto !important;

  }

  #company-images .swiper-slide:nth-child(2n) {

    width: 40%;

  }

  #company-images .swiper-slide:nth-child(3n) {

    width: 20%;

  }