@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;/**-moz-box-sizing: border-box;-o-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;**/}
body{ font-size:12px;font-family:"微软雅黑";background:url(../images/727wugeshi/bk1.jpg) no-repeat top; }
ul,ol,dl,li {list-style:none;}
img {border:0;}
a {text-decoration:none;color:#000}
a:hover { text-decoration:none;color:#000;}


/**背景**/

/**头部结构**/
#header{width:100%;background:url(../images/727wugeshi/toubk.jpg) no-repeat top ;}
.top_link{width:1200px;margin:0 auto; }
.top_link span{float:right; line-height:30px;}
.logo{width:1000px; height:650px; margin:0 auto; position:relative;   }
.logo0{ position:absolute; right:0px; top:220px; opacity:0;  transition: all 1s; }
.logo1{ position:absolute; left:-200px; top:250px;  opacity:0;  transition: all 1s;}
.logo2{ position:absolute; left:-200px; top:399px;  opacity:0;  transition: all 1s;}
.logo3{ position:absolute; left:-200px; top:510px;  opacity:0;  transition: all 1s;}
.logo4{ position:absolute; right:0px; top:400px;}

.activeL0{
	 animation:fromtop 5s 0s infinite;
	}
.activeL1{
	  animation:fromleft1 5s  infinite;
	}
.activeL2{
	animation:fromleft2 5s   infinite;
	}
.activeL3{
	 animation:fromleft3 5s  infinite;
	}
.activeL4{
	 animation:showPanel 5s infinite;
 -moz-animation:showPanel 5s infinite;
 -webkit-animation:showPanel 5s infinite;
	}

@-webkit-keyframes fromtop 
{  
     0%{top:220px; opacity:0;}
    20%{
  top:20px; opacity:1;
  }
  
  100%{
    top:20px; opacity:1;
  }
}
@keyframes fromtop
{
     0%{top:220px; opacity:0;}
    20%{
  top:20px; opacity:1;
  }
  
  100%{
    top:20px; opacity:1;
  }
}
@-webkit-keyframes fromleft 
{  
     0%{left:-200px; opacity:0;}
    20%{
     left:0px; opacity:1;
  }
  
  100%{
   left:0px; opacity:1;
  }
}
@keyframes fromleft
{
     0%{left:-200px; opacity:0;}
    20%{
        left:0px; opacity:1;
       }
  
  100%{
      left:0px; opacity:1;
     }
}
@keyframes fromleft1
{
     0%{left:-200px; opacity:0;}
    10%{
       left:-200px; opacity:0;
       }
	    30%{
         left:0px; opacity:1;
       }
  
  100%{
      left:0px; opacity:1;
     }
}
@-webkit-keyframes fromleft1 
{  
    0%{left:-200px; opacity:0;}
    10%{
       left:-200px; opacity:0;
       }
	    20%{
         left:0px; opacity:1;
       }
  
  100%{
      left:0px; opacity:1;
     }
}
@keyframes fromleft2
{
     0%{left:-200px; opacity:0;}
    20%{
       left:-200px; opacity:0;
       }
	    40%{
         left:0px; opacity:1;
       }
  
  100%{
      left:0px; opacity:1;
     }
}
@-webkit-keyframes fromleft2 
{  
    0%{left:-200px; opacity:0;}
    20%{
       left:-200px; opacity:0;
       }
	    40%{
         left:0px; opacity:1;
       }
  
  100%{
      left:0px; opacity:1;
     }
}
@keyframes fromleft3
{
     0%{left:-200px; opacity:0;}
    30%{
       left:-200px; opacity:0;
       }
	    50%{
         left:0px; opacity:1;
       }
  
  100%{
      left:0px; opacity:1;
     }
}
@-webkit-keyframes fromleft3 
{  
    0%{left:-200px; opacity:0;}
    30%{
       left:-200px; opacity:0;
       }
	    50%{
         left:0px; opacity:1;
       }
  
  100%{
      left:0px; opacity:1;
     }
}
/**导航**/
.nav{width:1200px;margin:0 auto; height:82px; background:url(../images/727wugeshi/dhbk2.png) no-repeat top; padding-left:100px;}
.nav li {margin:0;text-align:center;font-size:18px;float:left; width:100px; height:80px; line-height:80px; }
.nav li a{ color:#FFFFFF}

.shipin{ width:1220px; height:820px; margin:0 auto; background:url(../images/727wugeshi/shipinbk.png) no-repeat top; padding-top:100px; padding-left:55px;}
.yinyan{ width:1100px; margin:0 auto; height:160px; padding-bottom:80px; }
.yinyan .ytou{ width:230px; height:130px; float:left; border-right:1px #CCCCCC solid; padding-top:0px;}
.yinyan .yneirong{ width:850px; float:left; height:100px; padding-left:20px; padding-right:20px; color:#FFF; font-size:18px; line-height:25px;}
/**主体结构**/
.layer{ width:100%; background:url(../images/727wugeshi/bg02.png) no-repeat top; height:2197px;}
.txhd{ width:1200px; height:355px; margin:0 auto; padding-top:15px; position:relative;}
.txhd div{ float:left;}
.txhd .txtu{width:407px; height:355px;}

.txzi{width:780px; height:355px; position:absolute; right:-500px; opacity:0;  transition: all 1s;}
.txtu{ margin-left:-500px; opacity:0;  transition: all 1s;}
.activet1{margin-left:0px; opacity:1;}
.activet2{right:0px;opacity:1;}



/**页脚内容**/
#footer{width:100%; background:#e7e7e7;padding:40px 0;clear: both;margin-top:30px; float:left }
#footer p{ text-align:center; line-height:28px; }
/**活动时间外援**/
.hdlb{ width:1200px; margin:0 auto; padding-top:250px;}
section.business {
	background: url(../images/727wugeshi/wallpaper2.jpg) 50% bottom;
}

.business .box {
	width: 1200px;
	margin: 0 auto;
	position: relative;
	-webkit-transition: all .3s ease-in-out 0s;
	-moz-transition: all .3s ease-in-out 0s;
	-ms-transition: all .3s ease-in-out 0s;
	-o-transition: all .3s ease-in-out 0s;
	transition: all .3s ease-in-out 0s;
}

.business .box ul.items {
	margin: 0 auto;

}

.business .box ul.items li {
	width: 200px;
	height: 300px;
	margin: 0 8px;
	background: url(../images/727wugeshi/bg_green.png) no-repeat 0px 400px;
	overflow: hidden;
	display: inline-block;
}

.business .box ul.items li i {
	display: block;
	position: relative;
	margin: 0 auto;
	margin-top: 43px;
	height: 69px;
}

.business .box ul.items li.pc i {
	width: 82px;
	background: url(../images/727wugeshi/words.png) no-repeat -243px -357px;
}

.business .box ul.items li.mobi i {
	width: 80px;
	background: url(../images/727wugeshi/words.png) no-repeat -410px -291px;
}

.business .box ul.items li.sys i {
	width: 76px;
	background: url(../images/727wugeshi/words.png) no-repeat -415px -362px;
}

.business .box ul.items li.app i {
	width: 74px;
	background: url(../images/727wugeshi/words.png) no-repeat -244px -439px;
}

.business .box ul.items li.host i {
	width: 79px;
	background: url(../images/727wugeshi/words.png) no-repeat -420px -439px;
}

.business .box ul.items li u {
	display: block;
	position: absolute;
	width: 156px;
	height: 156px;
	margin-left: 22px;
	background: url(../images/727wugeshi/words.png) no-repeat 0px -363px;
	-webkit-transition: all .5s ease-in-out 0s;
	-moz-transition: all .5s ease-in-out 0s;
	-ms-transition: all .5s ease-in-out 0s;
	-o-transition: all .5s ease-in-out 0s;
	transition: all .5s ease-in-out 0s;
}

.business .box ul.items li u.cl {
	clip: rect(0px,156px,-10px,78px);
}

.business.active .box ul.items li u.cl {
	clip: rect(0px,156px,156px,78px);
}

.business .box ul.items li u.cr {
	clip: rect(156px,78px,156px,0px);
}

.business.active .box ul.items li u.cr {
	clip: rect(0px,78px,156px,0px);
}

.business .box ul.items li strong {
	display: block;
	margin-top: 70px;
	font-size: 16px;
	font-weight: normal;
	text-align: center;
}

.business .box ul.items li p {
	position: relative;
	top: 200px;
	color: White;
	font-family: Arial,"宋体";
	font-size: 12px;
	line-height: 20px;
	text-align: center;
}

.business .box ul.items li:hover {
	background-position: 0px 0px;
	-webkit-transition: all .5s ease-in-out .3s;
	-moz-transition: all .5s ease-in-out .3s;
	-ms-transition: all .5s ease-in-out .3s;
	-o-transition: all .5s ease-in-out .3s;
	transition: all .5s ease-in-out .3s;
}

.business .box ul.items li:hover i {
	-webkit-transition: all .5s ease-in-out .4s;
	-moz-transition: all .5s ease-in-out .4s;
	-ms-transition: all .5s ease-in-out .4s;
	-o-transition: all .5s ease-in-out .4s;
	transition: all .5s ease-in-out .4s;
}

.business .box ul.items li.pc:hover i {
	background:url(../images/727wugeshi/znlcbz.jpg) no-repeat top;
	    width: 200px;
    height: 150px;
    margin-top: 0px;
}
.business .box ul.items li.pc:hover strong {
	margin-top:10px;
}
.business .box ul.items li.mobi:hover strong {
	margin-top:10px;
}

.business .box ul.items li.sys:hover strong {
	margin-top:10px;
}

.business .box ul.items li.app:hover strong {
	margin-top:10px;
}

.business .box ul.items li.host:hover strong {
	margin-top:10px;
}


.business .box ul.items li.mobi:hover i {
	background:url(../images/727wugeshi/znlwsp.jpg) no-repeat top;
	    width: 200px;
    height: 150px;
    margin-top: 0px;
}

.business .box ul.items li.sys:hover i {
	background:url(../images/727wugeshi/znltz.jpg) no-repeat top;
	    width: 200px;
    height: 150px;
    margin-top: 0px;
}

.business .box ul.items li.app:hover i {
	background:url(../images/727wugeshi/znltp.jpg) no-repeat top;
	    width: 200px;
    height: 150px;
    margin-top: 0px;
}

.business .box ul.items li.host:hover i {
	background:url(../images/727wugeshi/znlpl.jpg) no-repeat top;
	    width: 200px;
    height: 150px;
    margin-top: 0px;
}

.business .box ul.items li:hover u.cl {
	clip: rect(0px,156px,-10px,78px);
}

.business .box ul.items li:hover u.cr {
	clip: rect(156px,78px,156px,0px);
}

.business .box ul.items li:hover strong {
	color: White;
	-webkit-transition-delay: .4s;
	-moz-transition-delay: .4s;
	-ms-transition-delay: .4s;
	-o-transition-delay: .4s;
	transition-delay: .4s;
}

.business .box ul.items li:hover p {
	top: 20px;
	-webkit-transition: all .3s ease-in-out .5s;
	-moz-transition: all .3s ease-in-out .5s;
	-ms-transition: all .3s ease-in-out .5s;
	-o-transition: all .3s ease-in-out .5s;
	transition: all .3s ease-in-out .5s;
}

.business .box label {
	display: block;
	margin: 0 auto;
	margin-top: -40px;
	width: 297px;
	height: 21px;
	background: url(../images/727wugeshi/words.png) no-repeat 0px -333px;
}

section.cases {
	background: url(../images/727wugeshi/wallpaper3.jpg);
}

/**活动时间**/
.hdsj{ width:1200px; height:200px; margin:0 auto; padding-top:330px;}
.hdsj div{ width:230px; height:200px; float:left;}
/**jxsz**/
.jxsz{ width:100%; height:400px;}
.jxsztu{ width:1277px; height:178px; margin:0 auto;}
.sfq{width:90%; margin:0 auto; height:555px; margin-top:210px; position:relative; padding-top:80px;}


/**手风琴**/
* {
  box-sizing: border-box;
}



.sfq .jiangbei{ width:12%; height:auto; float:left;  }
.jiangbei img{ width:100%; height:auto;}
.sfq .guang{ width:2%; float:left;}
.guang img{ width:100%; height:auto;}

.jb1{ margin-top:-150px; opacity:0; transition: all 1s;}
.jb2{ margin-top:150px; opacity:0;  transition: all 1s;}
.jbactiv{ margin-top:0; opacity:1; }



/**切换选项卡**/
.sliderp{ width:100%;
height:875px;
background: url(../images/727wugeshi/bg03.png) no-repeat top;}
  .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
  


      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;
    }
.slidecon{ width:1100px; margin:0 auto; height:740px;}
.biaoti{ width:1100px; height:670px; position:relative;}
.sbutton{ width:1100px; height:70px;}
.sbutton div{ float:right; margin-right:40px;}
.zpzss{ width:100%; height:400px; padding-top:20px;}
.zsbiaoti{ width:1200px; margin:0 auto; text-align:center;}

.zsbiaoti1{ width:600px; margin:0 auto; text-align:center;}
.zsbiaoti2{ width:100px; margin:-40px auto; float:right; text-align:right;}
.zsnav{width:1200px;margin:20px auto; height:50px; background:#65a5fd; padding-left:50px; border-radius:10px;}
.zsnav li {margin:0;text-align:center;font-size:18px;float:left; width:150px; height:50px; line-height:50px; }
.zsnav li a{ color:#FFFFFF;}
.zslist{ width:1200px; margin:20px auto; height:240px;}
.zslist div{ float:left;}
.zsxqlist{ width:230px; height:200px; float:left; margin-left:10px; }
.zstu{ width:230px; height:180px; position:relative;}
.zszi{width:230px; height:30px; position:absolute; bottom:-1px; background:url(../images/727wugeshi/zibk.png) no-repeat top; line-height:30px;}
.zszi p{ width:230px; height:30px; color:#FFF; z-index:999; text-align:center;}
.sjimg1{   
    margin-left: -200px;
    opacity: 0;
	 transition: all 1s;
}
.sjimg2{   
    margin-left: -200px;
    opacity: 0;
	 transition: all 1s;
}
.sjimg3{   
    margin-left: -200px;
    opacity: 0;
	 transition: all 1s;
}
.sjimg4{   
    margin-left: -200px;
    opacity: 0;
	 transition: all 1s;
}
.sjimg5{   
    margin-left: -200px;
    opacity: 0;
	 transition: all 1s;
}
.active01{ margin-left:0; opacity:1;}
.active02{ margin-left:0; opacity:1; 
    transition-delay:0.5s;
   -webkit-transition-delay:0.5s;}
.active03{ margin-left:0; opacity:1;transition-delay:1s;
   -webkit-transition-delay:1s;}
.active04{ margin-left:0; opacity:1;transition-delay:1.5s;
   -webkit-transition-delay:1.5s;}
.active05{ margin-left:0; opacity:1; transition-delay:2s;
   -webkit-transition-delay:2s;}

 @keyframes showPanel
 {
 0%   {transform:scale(0.5);opacity:0.0;}
 50%  {transform:scale(1.05);opacity:1.0;}
100% {transform:scale(1);opacity:1.0;}
}
 

 @-moz-keyframes showPanel 
{
 0%   {-moz-transform:scale(0.5);opacity:0.0;}
 50%  {-moz-transform:scale(1.05);opacity:1.0;}
100% {-moz-transform:scale(1);opacity:1.0;}
 }
 

 @-webkit-keyframes showPanel 
 {
 0%   {-webkit-transform:scale(0.75);opacity:0.0;}
 50%  {-webkit-transform:scale(1.05);opacity:1.0;}
 100% {-webkit-transform:scale(1);opacity:1.0;}
 }

.shipink{ width:530px; height:240px; position:absolute; right:65px; top:210px;}
#shipin{
	  
	    width: 100%;
		height: 100%;
		background-size: 100% 100%;
 		background-color: black; /* in case the video doesn't fit the whole page*/
  		background-image: /* our video */;
  		background-position: center center;
  		background-size: contain;
   		object-fit: fill; /*cover video background */
   		
	}
.vedio{ width:1110px; height:600px; }
#myVideo{   width: 100%;
		height: 100%;
		background-size: 100% 100%;
 		background-color: black; /* in case the video doesn't fit the whole page*/
  		background-image: /* our video */;
  		background-position: center center;
  		background-size: contain;
   		object-fit: fill; /*cover video background */}