@charset "utf-8";
/* CSS Document */
*{ padding:0;margin:0;font-family: 'Microsoft YaHei'; 
box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box;}
body { background-color:#ffffff;font-size: 14px;}
img{ border: none;}
ul,ol{ list-style: none;}
input,label,img,th{vertical-align:middle;}
a{text-decoration: none;}
*:focus {outline: none;}
.main{ width:90%; margin:0 auto; overflow:hidden;}
.nmain{width:61%; margin:0 auto; overflow:hidden;}
.l{ float: left; }
.r{ float: right; }
.clearfix:after{ 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: "."; 
    clear: both; 
    height: 0; 
}
/*banner*/
.banner{ width:100%;}
.banner img{ width:100%;}
.swiper-pagination-bullet{background: #c9cace!important; opacity:1!important;}
.banner .swiper-pagination-bullet-active{background:#fff!important;}

header{width: 100%; z-index: 12;padding: 10px 0; position: absolute; top: 0; left: 0}
.logo{ float: left; }
.logo img{width:auto;}
.nav{ display: inline-block; float: right;width: 40%; line-height:38px; }
.nav li{float: left; font-size:14px;color: #fff; width:20%; text-align: center;}
.nav li a{ color:#fff; position: relative;}
.nav li a:before{position: absolute;top:9px;left:0;
    width:13px;height:2px; background: #17bed2;
    opacity: 0;content: " ";}
.nav li:hover a:before{opacity: 1; left: -25px; -webkit-transition: all 0.5s;
-o-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s;}
.nav_click{ display: none }




/*旋转*/
.tubiao{ width:70%; margin:0 auto;margin-top: 7%; margin-bottom:  }
.tubiao li{ float: left; width:26%; margin-right:11%; position: relative;}
.tubiao li img{ width: 100% }
.tubiao li .mask{ position: absolute; top: 0; left: 0; background: #c9cace;
width: 100%; height: 100%; color: #fff;padding:0 5%;  padding-top: 50%; line-height: 1.6; 
opacity:0;filter:alpha(opacity=0);box-sizing: border-box; }
.tubiao li .mask img{width:80%; top: 0; left:0;position: absolute;}
.tubiao li:hover .mask .img1{width: 60%; top: -20%;left:auto; right:-25%;}
.tubiao li:hover .mask .img2{width: 60%; top: -20%;left:0;  right:0; margin:0 auto;}
.tubiao li:hover .mask .img3{width: 60%; top: -20%;left:-25%;}
.tubiao li:hover .mask{opacity:1;filter:alpha(opacity=100)}
.tubiao li:hover .mask, .tubiao li:hover .mask img{-webkit-transition: all 0.5s ;
-o-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s;}


/*图片墙*/
.dtit{font-size: 30px; font-weight: bold; color:#4d5258; margin:3% auto; margin-top: 7%;
 text-transform: uppercase;text-align: right;overflow: hidden;}

.serve{ display: inline-block; }
.serve li{ width: 25%; height:265px; float: left; position: relative;
-webkit-perspective: 800px;-o-perspective: 800px;
-moz-perspective: 800px;-ms-perspective: 800px;}
.serve img{ width:100%; height: 100% }
.serve li span{font-size:40px; color:#fff; font-weight: bold;
text-transform:capitalize; position: absolute; left:20px; bottom:20px}
.serve li span i{font-size: 30px; font-style: normal;font-weight: normal;display: block;  }

.serve .li1 span{top:20px;left:auto; right:20px; text-align: right;}
.serve .li1 span i{ display: block; }
.serve .li2 span{bottom:20px;left:auto;  right:20px; text-align: right;}
.serve .li2 span i{ display: block; }
.serve .li3 span i, .serve .li4 span i{ display: inline-block; }

.serve li p{ position: absolute; top:15%; left:5%; right:5%; color: #fff }
.serve li.li1 p{ top:auto; bottom: 15% }
.serve .li1 .two{background:#5133b0;}
.serve .li2 .two{background:#82623f;}
.serve .li3 .two{background:#a18c9a;}
.serve .li4 .two{background:#752351;}
.serve .li5 .two{background:#e66e73;}
.serve .li6 .two{background:#c08b2a;}

.serve li .one, .serve li .two
{position: absolute;left: 0; top:0;width: 100%;height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transition: .8s ease-in-out ;
-moz-transition:  .8s ease-in-out ;
-o-transition: .8s ease-in-out ;
-ms-transition:  .8s ease-in-out ;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
}
.serve li .one{
/*绕y轴旋转*/
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-o-transform: rotateY(0);
-ms-transform: rotateY(0);
z-index: 2;
}
.serve li .two
{ -webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
 z-index: 1;
}
.serve li:hover .one
{-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.serve li:hover .two
{-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-o-transform: rotateY(0);
-ms-transform: rotateY(0);
}





/*隧道*/
.suidao{margin-top:7%; position: relative;}
.suidao img{ width:100%;}
.suidao_zi{ position: absolute; right:20%; top:25%;}
.suidao_zi li{width:100%; font-size: 15px; color:#fff; height:32px; }
.suidao_zi li a{ color: #fff; display: block; }



/*合作伙伴*/
.hezuo{margin-bottom:5% }
.hezuo li{float: left; width:9%;margin-right:1%; margin-bottom:2%; display:flex;
justify-content:center;align-items:center; border: 2px solid #c9cace; overflow: hidden; }

.hezuo li img{width:auto; max-width: 100%}
.hezuo li img, .hezuo li:hover img{ -webkit-transition: all 0.5s;
-o-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s;}
.hezuo li:hover img{-webkit-transform: scale(1.2);
-o-transform: scale(1.2); -ms-transform: scale(1.2); -moz-transform: scale(1.2);}


footer{background: #191919; padding:3% 0}
footer ul{width: 70%;margin:0 auto; }
footer ul li{ float: left;width:33.3%; font-size: 12px;
color: #b7b5b7; padding-top:60px; text-align: center; }
footer ul li.li1{background: url(../images/foot1.png) no-repeat top center;}
footer ul li.li2{background: url(../images/foot2.png) no-repeat top center}
footer ul li.li3{background: url(../images/foot3.png) no-repeat top center}
footer .copy{ font-size:12px;width: 100%; text-align: center; color: #b7b5b7;margin-top:4%}
footer .copy a{color: #b7b5b7;}
footer .copy a:hover{ color:#ffffff;}



/*案例 左侧引入的css*/
.nban{ }
.nban img{width:auto;max-width: 100%  }
.anli{padding-top:7%; padding-bottom: 3%; width:70%; }
.anli>ul{ display: inline-block; }
.anli>ul>li{ width: 100%; float: left; margin-bottom:4% }
.anli_z{width: 60%}
/*.ms-sbar{ display: none }
.ms-thumbs-cont{top:0!important;}*/
.focus .left{float:left; width:80%;height:285px;  position:relative;overflow:hidden;}
.focus .left li{position:absolute; left:0; top:0; width:100%;height:285px; z-index:1; 
  opacity:0; filter:alpha(opacity=0);}
.focus .left li.active{z-index:2;}
.focus .left li img{ width: 100%; height: 100% }

.focus .right{float:right; width:18%;}

.focus .right li{width:100%; overflow:hidden;cursor: pointer;opacity:0.6; filter:alpha(opacity=60);
  margin-bottom: 10px; height:88px;}
.focus .right li img{ width:100%;  height: 100%}
.focus .right li.active{opacity:1; filter:alpha(opacity=100); }




.anli_y{ width: 36%; font-size: 26px;color: #383838; text-align: right}
.anli_y span{ font-size: 20px; display: block;color: #373737;
margin-top:3% }

.fuwu{padding: 4% 0}
.fuwu_zi{color: #3e3e3e; line-height: 1.8; margin-bottom: 4%; font-size: 16px;}
.fuwu_zi span{font-size: 36px; color: #535353}

.fuwu ul>li{ width: 100%; float: left; margin-bottom:3%; background:#e0dfdd;
display: flex;
    justify-content: center;
    align-items: center;}
.fuwu ul>li figure{ width: 38%; }
.fuwu ul>li figure img{ width: 100%; }

.fuwuli_y{ width:62%;padding:2%; font-size: 12px; color: #5f5f5f; line-height: 1.7;
 }
.fuwuli_y span{ font-size: 20px; margin-bottom:10px; display: block;  line-height: 1}


/*team*/
.team{padding:7% 0; width:75%;}
.teamlogo{margin-bottom: 7%  }
.teamlogo img{ width: auto; max-width: 100% }
.team ul>li{ width: 46%; float: left; margin-bottom:5%; margin-right:8%;}
.team ul>li figure{ width:27%;  }
.team ul>li figure img{ width: 100%; }

.team_y{ width:66%;font-size: 14px; color: #686868; line-height: 1.7; margin-top:1% }
.team_y span{display: block;color: #686868; font-size: 20px; margin-bottom: 1%}
.teamtu{ width: 100%; text-align: center; margin-top:3%;float: left; }
.teamtu img{width:100% }

.contact{padding: 4% 0}
.contact .ditu { position:relative; text-align: center; }
.contact .ditu img {width: auto; height: auto; max-width:100%}
.contact .ditu .ditu_ico{ position: absolute; top:39%; left:34%;  }
.contact .ditu .ditu_ico img{ width: 30% }
.contact p{ color: #686868; margin-top: 4%; text-align: right; line-height: 1.8 }


 


@-webkit-keyframes bounce-up {
    25% {
        -webkit-transform: translateY(10px);
    }
    50%, 100% {
        -webkit-transform: translateY(0);
    }
    75% {
        -webkit-transform: translateY(-10px);
    }
}
 
@keyframes bounce-up {
    25% {
        transform: translateY(10px);
    }
    50%, 100% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-10px);
    }
}
 
.mateup{-webkit-animation: bounce-up 1.4s linear infinite;
    -moz-animation: bounce-up 1.4s linear infinite;
    -o-animation: bounce-up 1.4s linear infinite;
    -ms-animation: bounce-up 1.4s linear infinite;
}




@media screen and (max-width: 1600px) {
.serve li{height: 300px}
}

@media screen and (max-width: 1440px) {
.serve li{height: 265px}
}


@media screen and (max-width: 1024px) {
.serve li{ height: 220px; }
.serve li span{font-size: 30px}

.suidao_zi{ right: 13%; top: 16% }

.focus .left{ height: 240px; }
.focus .left li{ height: 240px; }
.focus .right li{ height: 73px; }

}
@media screen and (max-width: 860px) {
.nmain{ width: 90% }
.dtit{font-size:26px}
.serve li{ height: 170px; }
.serve li span{font-size:20px}
.serve li span i{font-size:20px}


.hezuo li{ width: 19%; }

}

@media screen and (max-width: 640px) {  
header{ position: fixed; top:0; right: 0; left: 0; margin:0 auto; 
  background: #000; box-sizing: border-box;}
.banner{ margin-top: 47px;}
.logo img{ height:27px }
.nav_click{display: block; position: absolute; top:5px;right:0px; 
    background: none;border: none;outline: none;cursor: pointer;}
.nav_click span{display: block;width:25px;height:2px;margin:7px;background-color: #fff;
    -webkit-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;}
.nav{ display:none; position: absolute; width:100%!important; top:46px; left: 0; margin-left:0;
 background: rgba(0,0,0,0.7);  z-index: 10; padding:10px 0;}
.nav li { width: 100%!important; background: none!important; 
  height:auto;}
.nav li:hover{ border-bottom: 1px solid #fff; }
.nav li>a{display:block;line-height:45px;width: 100%;
 text-align: center; font-size:18px; color: #fff; 
 border-bottom:0.01rem solid  rgba(255,255,255,0.3);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;}
.nav li>a{
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: return;
  animation-name: return;
}
@-webkit-keyframes return {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.main{width:96%;}
.nmain{width:96%;}
.dtit{ font-size: 18px; }
.tubiao{width:96%;}
.tubiao li{width:100%; height: auto; margin-bottom:80px; text-align: center;}
.tubiao li .mask{ opacity: 1; height: auto;padding:60% 0 20px 0;z-index:-1 }
.tubiao li a>img{width:50%; padding-top:10px; }
.tubiao li .mask img{display:none;}
.tubiao li:hover{ opacity: 0;}

.suidao_zi{ position: static; background: rgba(0,0,0,0.9); padding:20px; }


.serve li{width:100%; height:240px; margin-bottom:10px;}
.hezuo li{width:28%; margin-right:8%!important; margin-bottom:20px;}
.hezuo li:nth-child(3n){margin-right: 0!important}
.hezuo li img{max-width: 95%}
footer ul{width:96%;}
footer ul li{background: none!important; width: 100%; padding: 0;
line-height:34px}


.nban{ margin-top:47px;}
.fuwu_zi span{font-size:18px;}

.team .teamlogo{ width: 90% }

.team ul>li{ width: 100%; }
.team ul>li figure{ width:25% }
.team_y{width:73%;}
.teamtu img{ width: 100% }


.fuwu ul>li{background: none; display: block;}
.fuwu ul>li figure{width: 100%}
.fuwuli_y{width: 100%; margin-top: 20px; }

.contact .ditu .ditu_ico{top:30%; left:24%}
.contact .ditu .ditu_ico img{width:19%}

.anli_y {width:100%; text-align: left; margin-bottom: 10px; font-size: 16px;}
.anli_y span{ margin-top: 0; font-size: 14px }
.anli_z{ width:100% }
.focus .left{ height: 210px; }
.focus .left li{ height: 210px; }
.focus .right li{ height: 63px }



}