@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}


html{
   font-size:19.20px; 
}





body{
	font-family: arial,helvetica;
	color: #333;
	color: rgba(0,0,0,0.5);
}
.wrap{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	position: relative;
}
h1{
	font-size: 6em;
}
p{
	font-size: 2em;
}
.intro p{
	width: 50%;
	margin: 0 auto;
	font-size: 1.5em;
}
.section{
	text-align:center;
}


#menu li a{
	text-decoration:none;
	color: #FFF;
}
#menu li.active a:hover{
	color: #000;
}


#menu li.active a{
	color: #fff;
}
#menu{
	position:fixed;
	top:100px;
	right:5%;
	height:1000px;;
	z-index: 70;
	/*width: 100%;*/
	padding: 0;
	margin:0;
	
 
}

.twitter-share-button{
	position: fixed;
	z-index: 99;
	right: 149px;
	top: 9px;
}
/* Demos Menu
 * --------------------------------------- */
 #demosMenu{
	position:fixed;
	bottom: 10px;
	right:10px;
	z-index: 999;
 }
.menulist{  position:relative; width:100px;  height:77px; margin:0 auto; text-align:center;}
.menulist li{ position:relative; float:left; width:120px; padding:0px 5px 0px 5px; margin:3px 0; height:30px; line-height:30px; text-align: center; background:#e3000a; border-radius:5px;}


.donghua1{
	position: absolute;
	left: 70%;
	top: 20%;

	
	
	opacity: 0;
	transition: all 1s;
	
	}
.active .donghua1 {
	left: 40%;
	opacity: 1;
	transition-delay: 0.7s;
}



/*案例开始*/
#myVideo1{
		position: absolute;
		right: 0;
		bottom: 0;
		top:0;
		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 */
   		z-index:99999;
	}
#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 */
   		z-index:99999;
	}
	h1{
		font-size: 2.5em;
		font-family: arial,helvetica;
		color: #fff;
		margin:0;
		padding:0;
	}
a,p{ color:#FFF; font-size:1rem;}

	.section{
		background-size: cover;
	}
	

	#section0{
		background-image: url(../2022wugeshi/bk1.jpg);
		background-position:bottom;
	}
	
	#section1{
		background-image: url(../2022wugeshi/bk2.jpg);
		background-position:center;
	}
	#section2{
		background-image: url(../2022wugeshi/bk5.jpg);
		background-position:center;
	}
	#section3{
		background-image: url(../2022wugeshi/bk3.jpg);
		background-position:center;
	}
	#section4{
		background-image: url(../2022wugeshi/bk7.jpg);
		background-position:bottom;
	}
	#section5{
		background-image: url(../2022wugeshi/bk1.jpg);
		background-position:center;
	}
	#section6{
		background-image: url(../2022wugeshi/bk7.jpg);
		background-position:center;
	}
	
.layer{
	
	    display: flex;
        align-items: center;
	   
	   height:80%;
	   margin:0 auto;
	   position:relative;
	 
	   
	
	   }

.logo{
	position:absolute;
	width:692px;
	height:432px;
	top:10%;
	left:80%;
	opacity:0;
	
	
	
	transition: all 1s;
	
	}
.hongchou1{
	position: absolute;
	top:0%;
	z-index:99;
	  width:520px;
	  height:52px;
	
	opacity:0;
	 background:url(../2022wugeshi/hongchou.png) no-repeat  center;
	 	background-size: contain;
	   animation:danruh 1s;
	-moz-animation:danruh 1s;  
	-webkit-animation:danruh 1s; 
	-o-animation:danruh 1s;
	
	transition: all 1s ease-in;
	
	}
	
	.active .hongchou1{
	left:4%;
	top:4%;
	opacity:1;
	
	 transition-delay: 0s;
	  height:62px;
	}
	
	
	.hongchou2{
	position: absolute;
	top:0%;
	z-index:99;
	  width:300px;
	  height:35px;
	right:0%;
	opacity:0;
	 background:url(../2022wugeshi/hongchou.png) no-repeat  center;
	 	background-size: contain;
	   animation:danruh 1s;
	-moz-animation:danruh 1s;  
	-webkit-animation:danruh 1s; 
	-o-animation:danruh 1s;
	
	transition: all 1s ease-in;
	
	}
	
	.active .hongchou2{
	right:0%;
	top:4%;
	opacity:1;
	
	 transition-delay: 0s;
	  height:62px;
	}


.layer0{ width:1200px; height:100%; position:relative; margin:0 auto; overflow:hidden;}
.zhuti{
	position:absolute;
	 top:5%;
	 left:10%;
	 z-index:999;
	 width:0;
	 opacity:0;
	 
	   animation:danrur 1s;
	-moz-animation:danrur 1s;  
	-webkit-animation:danrur 1s; 
	-o-animation:danrur 1s;
	
	 transition: all 1s;
	 
	
	}
	
.zhutizi{
	position:absolute;
	top:100%;
	 left:5%;
	 z-index:999;
	 width:1000px;
	 opacity:0;
	   animation:danrurz 1s;
	-moz-animation:danrurz 1s;  
	-webkit-animation:danrurz 1s; 
	-o-animation:danrurz 1s;
	transition: all 1s;
	}

.zi{ position:absolute; width:700px;  bottom:-10%; left:50%; margin-left:-350px; 

  animation:danrurzz 1s;
	-moz-animation:danrurzz 1s;  
	-webkit-animation:danrurzz 1s; 
	-o-animation:danrurzz 1s;
	transition: all 1s;
transition: all 1s;}
.zi p{ line-height:30px; font-size:20px; color:#f6ecc9;}



.active .zhuti{
	width:1000px;
	opacity:1;
 
 
 
	}
.active .zhutizi{
	top:65%;
	opacity:1;
  transition-delay: 1s;
}
.active .zi{
   bottom:15%;
	opacity:1;
  transition-delay: 2s;
}	


@keyframes danrurzz
{
   from { 
   opacity:0;
    bottom:-10%;;}
  
    to {  	 bottom:15%;
	opacity:1;}
}
 
@-webkit-keyframes danrurzz 
{
   from { 
   opacity:0;
    bottom:-10%;;}
  
    to {  	 bottom:15%;
	opacity:1;}
}

@keyframes danrurz
{
   from { 
   opacity:0;
   top:100%;}
  
    to {  	top:65%;
	opacity:1;}
}
 
@-webkit-keyframes danrurz 
{
   from { 
   opacity:0;
   top:100%;}
  
    to {  	top:65%;
	opacity:1;}
}
@keyframes danrur
{
   from { width:0;
	 opacity:0;}
  
    to {  width:1000px;
	opacity:1;}
}
 
@-webkit-keyframes danrur 
{
  from { width:0;
	 opacity:0;}
  
    to {  width:1000px;
	opacity:1;}
}

@keyframes danruh
{
    from { 
	left:0%;
	 top:0%;
	
	opacity:0;
	
	}
    to {   left:4%;
	 top:4%;
	opacity:1;
	 
	 }
}
 
@-webkit-keyframes danruh 
{
    from { 
	left:0%;
	 top:0%;
	
	opacity:0;
	
	}
    to {  
	  left:4%;
	 top:4%;
	opacity:1;
	
	 
	 }
}

/*第二部分*/
.jcontentcon{ width:1150px; padding-top:200px; display:flex; position:relative; margin:0 auto;}
.jcontent{ width:500px; height:300px;   }
.jieshao{ width:500px;  height:300px; padding-left:50px; }
.jieshao p{  color:#FFF; text-align:left; text-indent:2em; font-size:26px; line-height:45px; }


.jvideo{ width:600px; height:350px;}
.biaoti1{ 
	width:50%;
	 height:100px;
	 position:absolute;
	 top:-300px;
	opacity:0; 
	right:0;
	transition: all 1s;
	z-index:1;
	
	}




.active .biaoti1{
	opacity:1;
	 top:-60px;
	
	}
	
	.biaoti2{ 
	width:50%;
	 height:100px;
	 position:absolute;
	 top:-300px;
	opacity:0; 
	left:-50px;
	transition: all 1s;
	z-index:1;
	
	}




.active .biaoti2{
	opacity:1;
	 top:-200px;
	
	}
		.biaoti3{ 
	width:50%;
	 height:100px;
	 position:absolute;
	 top:-300px;
	opacity:0; 
	left:-50px;
	transition: all 1s;
	z-index:1;
	
	}




.active .biaoti3{
	opacity:1;
	 top:-100px;
	
	}
.imgss2{ width:90px; height:90px;}

/*第加部分*/
.lcontent6{ width:1000px; margin:0 auto; position:relative; height:100%;}
.zhengji6{ position:absolute; top:0; right:5%;}
.quans6{ position:absolute; right:5%; top:20%;}



/*第三部分*/
.lcontent{ width:1200px; height:600px; position:relative;  margin:0 auto; transform:scale(0.9); }
.zhengji{ width:100%; padding:20px 0px; }
.quan{ width:100%; height:200px; position:relative;}
.quan p{ text-align:left; font-size:22px; text-indent:2em; line-height:35px;}



.qli1{ position:absolute; left:460px; top:0;
opacity:0;
transition: all 1s linear;}
.qli2{ position:absolute; left:460px; top:0;
opacity:0;
transition: all 1s;
}
.qli3{ position:absolute; left:460px; top:0;
opacity:0;
transition: all 1s;
}
.qli4{ position:absolute; left:460px; top:0;
opacity:0;
transition: all 1s;}
.qli5{ position:absolute; left:460px; top:0;
opacity:0;
transition: all 1s;}
.quan li{  list-style-type:none; }
  .active .qli3{
	opacity:1;
	  transition-delay: 0.5s;
	}
	.active .qli1{
	opacity:1;
	  transition-delay: 1s;
	  left:-20px;
	}
	.active .qli2{
	opacity:1;
	  transition-delay: 1s;
	   left:220px;
	}
	.active .qli4{
	opacity:1;
	  transition-delay: 1s;
	   left:700px;
	}
	.active .qli5{
	 opacity:1;
	  transition-delay: 1s;
	  left:940px
	}
.shijian{ width:100%; height:110px; position:relative;}
.shijian1{ position:absolute; top:0; left:5px; 
	animation:sandong 0.5s  infinite;
	-moz-animation:sandong 4s infinite;  
	-webkit-animation:sandong 4s infinite; 
	-o-animation:sandong 4s infinite; 
	
	}
	
	
.quanj{ width:100%; height:400px; position:relative;}
.quanj li{ width:300px; background:url(../2022wugeshi/boder.png) no-repeat center right;}
	
.quanj li:last-child{ background:none;}
	
	
@keyframes sandong
{
    0%   {  left:0px; opacity:1}
  
    30% { left:15px; opacity:0;}
	100% { left:15px; opacity:0;}
}
 
@-webkit-keyframes sandong 
{
    0%   {  left:0px; opacity:1}
  
    30% { left:15px; opacity:0;}
	100% { left:15px; opacity:0;}
}

/**往期**/


.quanw{ width:100%; height:400px; position:relative;}
.quanw li{ width:300px;}


.wangqi1{ position:absolute; left:460px; top:0;
opacity:0;
transition: all 1s;
}
.wangqi2{ position:absolute; left:460px; top:0;
opacity:0;
transition: all 1s;
}
.wangqi3{ position:absolute; left:460px; top:0;
opacity:0;
transition: all 1s;}

.quan li{  list-style-type:none; }
  .active .wangqi2{
	opacity:1;
	  transition-delay: 0.5s;
	}
	
	.active .wangqi1{
	opacity:1;
	  transition-delay: 1s;
	   left:100px;
	}
	.active .wangqi3{
	opacity:1;
	  transition-delay: 1s;
	   left:800px;
	}
	

/**第五部门**/

.wbottomb{ position:relative;}
.baominglianje{ position:absolute; width:300px; height:120px;  top:190px; left:50px; }
.baominglianje1{ position:absolute; width:300px; height:120px;  top:320px; left:50px; }

.bmzi{ position:absolute; width:770px; height:480px; top:70px; right:0px;}
.bmzi p{ text-align:left; font-size:20px; line-height:35px; text-indent:2em}
.daohangboxb{ background:#00ffea; border-radius:5px; height:60px; margin:0px 5px;color:#000; font-size:18px; padding:3px 10px; line-height:60px; }

/*第三部2门*/


					
.shipinlist1{ float:left; width:230px; height:180px;  margin: 15px 5px;}
.shipinlist1 img{border-radius:5px;}

.heishipin3 div p{ width:230px;   position:relative; z-index:9999; font-size:20px; line-height:30px;  
                   text-overflow: -o-ellipsis-lastline;  
overflow: hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 2;  
-webkit-box-orient: vertical; 
text-align:left;}

.shipinlist1 p span{ margin-left:5px;}





/**第六部门**/



.shipinlist{ float:left; width:280px; height:180px;  border-radius:5px; margin: 15px 5px;}
.shipinlist img{  border-radius:5px;}

.shipinlist p{width:280px; height:40px; margin-top:-35px; background-color:rgba(91,0,0,0.8); position:relative; z-index:9999;border-bottom-left-radius:5px;border-bottom-right-radius:5px; font-size:16px; line-height:40px;}


.shipinlist p span{ margin-left:5px;}

.shipinlistm{ float:left; width:570px; height:300px; padding-left:10px; padding-top:10px; border-radius:10px; }
.shipinlistm img{  border-radius:10px;}

.shipinlistm p{width:570px; height:60px; margin-top:-35px; background-color:rgba(91,0,0,0.8); position:relative; z-index:9999;border-bottom-left-radius:10px;border-bottom-right-radius:10px; font-size:16px; line-height:60px;}


.shipinlistm p span{ margin-left:5px;}



.daohang{ opacity:1; width:1200px;
height:30px; position:relative; z-index:99999; 
	}
.daohang div{ padding:0px 10px; float:right;
 font-size:18px;
	}
	.daohangbox{border-right:#FFF 2px solid;  }
	.daohang div:first-child{ 
border-right:none; 
	}
		
	
	.daohangbox p{  color:#fff; font-size:18px;
	}
.wcontent{ width:1200px; height:500px; margin:0 auto; }

.wangqi{ position:absolute; top:50px; right:180px;}

@media(max-width:1740px){
   html{
      font-size:13.66px;
   }



.layer0 div{ transform:scale(0.8);}


imgss2{ width:70px; height:70px;}

.layer{transform:scale(0.8); }
.active .logo{
	left:0%;
	transition-delay: 0.7s;
	opacity: 1;
	
	}
#section0 .layer{ height:100%;}
#section1 .layer{ height:100%;}
#section2 .layer{ height:100%;}
#section3 .layer{ height:100%;}
#section4 .layer{ height:100%;}
#section5 .layer{ height:100%;}



}

@media(max-width:1440px){
   html{
      font-size:13.66px;
   }



.layer0 div{ transform:scale(0.7);}


imgss2{ width:70px; height:70px;}

.layer{transform:scale(0.7); 
}
.wcontent{  height:400px; padding-top:40px; }
.active .logo{
	left:0%;
	transition-delay: 0.7s;
	opacity: 1;
	
	}
#section0 .layer{ height:100%;}
#section1 .layer{ height:100%;}
#section2 .layer{ height:100%;}
#section3 .layer{ height:100%;}
#section4 .layer{ height:100%;}
#section5 .layer{ height:100%;}



}

.jinru{ position:absolute; z-index:9999999; bottom:10%; right:10%; border:2px solid #F96; padding:8px; border-radius:5px;}
.jinru p{ font-size:16px; color:#F63;}
.leftcx{ width:900px;
   height:100%;
  
   float:left;
    position:relative;
	
	perspective:500;
-webkit-perspective:500; 
	}
	
.aiti1{ position:absolute; bottom:0; right:-25px;}
.aiti2{ position:absolute; bottom:-150px; right:-300px;}
.active .aiti2{
	  animation: myfirst2 15s infinite linear;
}
@keyframes myfirst2
{
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
  
@keyframes myfirst
{
from {transform: rotate(0deg);}
to {transform: rotate(-359deg);}
}
	}

.wbottomb img{ width:1100px;}