@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:16px; 
}





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;
	bottom:0;
	left:0;
	height:77px;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin:0;
	background:url(../images/2021wenbohui/navbk.png) repeat-x top;
 
}

.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:1300px;  height:77px; margin:0 auto; text-align:center;}
.menulist li{ position:relative; float:left; padding:0px 30px 0px 10px; height:77px; line-height:77px; text-align: center; background:url(../images/2021wenbohui/navbk1.png) no-repeat right top; }


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

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



.tanct{ width:100%; height:100%; position:absolute; top:0; left:-1000px; z-index:999999; background-color:rgba(0,0,0,0.8);
 

}
.tanc{ width:100%; height:100%; position:absolute; top:0; left:0; z-index:999999; background-color:rgba(0,0,0,0.8);}

.tancg{ display: table;    
       width:100%; height:100%;}
.tancg1{ position: absolute; z-index: 9999999; top:0; left: -100%;
	    width: 1150px; height: 960px;
		
		animation: fromleft 10s infinite linear;
       }
.close1{ position: absolute;  right: 0; top:0; width: 150px; height: 150px;  }
.close{ position:absolute; top:2%; right:2%; z-index:9999999;}
.closev{ position:absolute; top:2%; right:2%; z-index:9999999;}
.tancon{   
		
	   width:90vw;
	   height:90vh;
	  
	   position:relative;
	   display: table-cell;
	   vertical-align: middle; }
	 .tancon img{ width: 80%; height:auto;}  

	   
	   
/*案例开始*/
#myVideo1{
		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:999;
	}
#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:999;
	}
	h1{
		font-size: 2.5em;
		font-family: arial,helvetica;
		color: #fff;
		margin:0;
		padding:0;
	}
a,p{ color:#FFF; font-size:0.8rem;}

	.section{
		
		background-size: cover;
		
	}
	

	#section0{
	
		background-image: url(bk1.jpg);
		background-size: cover;
		background-position: bottom;
	}
	
	#section1{
		background-image: url(bk2.jpg);
		background-position:center;
		
	}
	#section2{
		background-image: url(bk1.jpg);
		background-position:center;
	}
	#section3{
		background-image: url(bk1.jpg);
		background-position:center;
	}
	#section4{
		background-image: url(bk4.jpg);
		background-position:center;
	} 
	#section6{
		background-image: url(bk5.jpg);
		background-position:center bottom;
	}
	
	
.layer{
	
	    display: flex;
        align-items: center;
	   margin:0 auto;
	   width:90%;
	   height:700px;
	  
	   position:relative;
	
	   }
	.layer2{
		
	 display: flex;
	 align-items: center;
	margin:0 auto;
	width:80%;
	height:600px;
		 
	position:relative;}
	.layer3{
		
	 display: flex;
	 align-items: center;
	margin:0 auto;
	width:80%;
	height:600px;
		 flex-direction: column;
	position:relative;}

.leftcx{  width: 40%; height: 700px;  position:relative;  }
.rightcx{  width: 55%; height: 700px; position:relative;}
.leftlx{  width: 33%; height:800px;  position:relative; text-align: left; padding-top: 20px;  }
.leftlx img{  margin-top: 30px;}
.rightlx{  width: 67%; height: 800px; position:relative; display: flex;}
.layercon{ width:95%; height:100%; position:relative; display:block; margin-left:20px;}

.jcontent{ width:70%; margin:0 auto; text-align:left;}
.jcontent p{ color: #1e7da9; text-indent:2em;     margin: 6px 0px; font-size:1.1em; line-height:1.8em;}

.quan{ width:95%;  margin:0 auto; padding-top:30px; display: flex;}
.quan li{ width:20%; list-style: none; 	transition: all 1s;}
.quan li img{ width:100%; 	transition: all 1s; }

.active1{ margin-top:-20px; 	transition: all 1s;}
.active1 {width:105%; 	transition: all 1s; }


.quan li:hover{ margin-top:-20px;}
.quan li img{ width:105%;}

.jianzhu {
  position: absolute;
  bottom:10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  
}
.zhuti{
	position:absolute;
	 top:-5%;
	
	 z-index:999;
	 opacity: 0;
	
	 
	/*   animation:danrur 1s;
	-moz-animation:danrur 1s;  
	-webkit-animation:danrur 1s; 
	-o-animation:danrur 1s;*/
	
	 right: 10%;
	  animation: growRotate 3s ease-in-out forwards;
	   /* 动画延迟3秒执行 */
	   animation-delay: 3s;
    

	}
	@keyframes growRotate {
	  0% {
	   
		opacity: 0;
	  }
	  5% {
	   
	  		opacity: 1;
	  }
	 
	  10% {
	   
	  		opacity: 0.5;
	  }
	  15% {
	   
	  		opacity: 1;
	  }
	  20% {
	   
	  		opacity: 0.5;
	  }
	  30% {
	   
	  		opacity: 1;
	  }
	  100% {
	  
		opacity: 1;
	  }
	}
.mapdowm{position:absolute; top:-10%;
	
	 z-index:99;
	
	 right: 10%;}

.zhuti1{ position: absolute; z-index: 9999; top:10%; left: 15%; 

    



animation-name: star;
  animation-duration: 1s;
  animation-fill-mode: forwards; /* 保持动画结束状态 */
 
  /* 加载第二个动画：淡入效果 */
  animation-name: -rotate ;
  animation-duration: 2s;
  animation-delay: 2s; /* 延迟1秒开始第二个动画 */
  animation-fill-mode: forwards; /* 保持动画结束状态 */
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
	opacity: 1;
  }
  
  70% {
    transform: rotate(90deg); /* 确切的90度，以防万一 */
	opacity: 1;
  }
 99% {
   transform: rotate(360deg); 
 	opacity: 1;
 }
 100% {
   transform: rotate(360deg); 
 	opacity: 0;
 }
}
@keyframes -rotate {
  0% {
    transform: rotate(0deg);
		opacity: 1;
  }
 30% {
    transform: rotate(-90deg);
		opacity: 1;
  }
  99% {
    transform: rotate(-180deg); 
	opacity: 1;
  }
  100% {
    transform: rotate(-180deg); 
  	opacity: 0;
  }

}
.zhuti2{position: absolute; z-index: 99; top:10%; left: 15%;   
animation: rotate 2s ease-in-out forwards;
	   /* 动画延迟3秒执行 */
	   animation-delay: 0s; }
	   
	   
.zhutizi{
	position:absolute;
	top:100%;
	 right:0%;
	 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:300px;  bottom:-10%; right:0%; 

  animation:danrurzz 1s;
	-moz-animation:danrurzz 1s;  
	-webkit-animation:danrurzz 1s; 
	-o-animation:danrurzz 1s;
	transition: all 1s;
  }
.erweima{
	position:absolute; width:300px;  bottom:5%; left:0%; 

    z-index: 999;
	transition: all 1s;

	
	}


.daohang{  left: 1%; position: absolute;  z-index: 9999;transform:  scale(0.8); }

.daohang a{ display: block;  margin-bottom: 20px; }

.dhlist{  height: 100px;   background-size:cover; position: relative; text-align: left;}
.listzhuan{ position: absolute; top:5px; left: 10px;  animation: myfirst2 10s infinite linear; }
.listzhuan1{ position: absolute; top:0; left: 5px; }
.dhlist p{ line-height: 80px; font-size: 28px; color: #00fff0; font-weight: 700;}

.figure{  position: absolute; bottom:-10%; right: 320px; 
}
.figuref{ position: relative; width: 160px; margin-left: 40px; z-index: 999999;}
.zhutif{ position: absolute; z-index: 9999; top:0; left: 0px; 	animation: star 1.7s infinite linear;}
.fzi{ display: flex;}
.zi p{ line-height:30px; font-size:16px; color:#FFF;}
.acleft{animation: star 2.3s infinite linear; }
.acright{animation: star 2.3s infinite linear;}
.active .hongchou1{
	left:0;
	opacity:1;
	
	 transition-delay: 0s;
	  height:70%;
	}



.active .zhutizi{
	top:60%;
	opacity:1;
  transition-delay: 1s;
}
.active .zi{
   bottom:12%;
	right: 10%;
	opacity:1;
  transition-delay: 1s;
}	


.layer0{ position:absolute; top:50%; left:50%; margin-left:600px; margin-top:260px; width:1200px; height:520px; background:#0FF; position:relative; }
@keyframes fromleft
{
   0%{ 
   opacity:1;
   left:-100%;
   }
   
   48%{
   opacity:1;
   left:-100%;
   }
  
   50% {   opacity:1;
   left:5%;
   
   }
  99% {    opacity:1;
   left:5%;}
   
   
}
 
@-webkit-keyframes fromleft 
{
  0%{
   opacity:1;
   left:-100%;
   }
  
   50% {   opacity:1;
   left:5%;
   
   }
  90% {    opacity:1;
   left:5%;}
}



@keyframes star
{
   0% { 
   opacity:0;
   }
  
   40% {  	
	opacity:1;}
   60% {  	
	opacity:1;}
   100% { 
    opacity:0;
   }
}

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

@keyframes danrurz
{
   from { 
   opacity:0;
   top:100%;}
  
    to {  	top:60%;
	opacity:1;}
}
 
@-webkit-keyframes danrurz 
{
   from { 
   opacity:0;
   top:100%;}
  
    to {  	top:60%;
	opacity:1;}
}
@keyframes danrur
{
   from {  right: 100%;
   	 opacity:0;}
   
     to {   right: 10%;
   	opacity:1;}
}
 
@-webkit-keyframes acleft 
{
  from {  
	 opacity:0;}
  
    to {   
	opacity:1;}
}
@keyframes danruh
{
    from { 
	left:0;
	 height:0%;
	
	opacity:0;
	
	}
    to {  left:0;
	opacity:1;
	
	 
	  height:70%;}
}
.shipintitel{ margin-top:30px; margin-left: 50px; width: 720px; height: 86px; background: url(shipinbbk.png); background-size: 100% 100%;}
.shipintitel p{ text-align: center; line-height: 86px; font-size: 30px; color: #246498;}
.shipinbk{ width: 780px; height: 480px; background: url(shipinbk.png); background-size: 100% 100%; 
padding: 20px;  background-repeat: no-repeat;}
.shipin{
	
	    width: 660px;
	    height: 380px;
	  
	   margin: 40px 50px;
}
 #shipin {
     width: 100%;
     height: 100%;
     background-size: 100% 100%;
     background-color: black;
     background-image: /* our video */;
     background-position: center center;
     background-size: contain;
     object-fit: fill;
 }
 
@-webkit-keyframes danruh 
{
    from { 
	left:0;
	 height:0%;
	
	opacity:0;
	
	}
    to {  left:0;
	opacity:1;
	
	 
	  height:70%;}
}

/*第二部分*/


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




@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;}
}












		






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

.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;
   }






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

/*.layer{transform:scale(0.6); top:-80px;
}*/
.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%;}


*/
}











  .xmcon{ position:relative;}
              
  .xmzicon{
	 display:none;
    position: absolute;
    width: 120px;
    /* height: 80px; */
    border: #FFF 2px solid;
    border-radius: 10px;
    top: 10px;
    left: 10px;
    /* vertical-align: middle; */
    padding: 10px;
		 background-color:rgba(0,0,0,0.8);
		 font-size:10px;
		 }
.xmcon:hover p{
	display:block;
	}
	
	.shan{ position:  absolute; top:0; right: 40%;}
	
	.aiti1{ position:absolute; bottom:0; right:0px;}
	.aiti2{ position:absolute; bottom:27px; right:47px;}
	.active .aiti1{
		  animation: myfirst2 15s infinite linear;
	}
	@keyframes myfirst2
	{
	from {transform: rotate(0deg);}
	to {transform: rotate(359deg);}
	}
	
.bkfd{ position: absolute; top:-100px;  animation: bkfd 25s infinite linear;} 
.bkfd1{ position: absolute; bottom: 0%; width: 100%; } 
	  @keyframes bkfd
	  {
	      from { 
	  	left:0;
	  	
	  	
	  	
	  	
	  	}
	      to {  left:-900px;
	  
	  	
	  	 
	  	 }
	  }
	   
	   
	
	.hebei2{ position: absolute; bottom:0; right: 0; animation: fanzhuan 5s infinite linear; }
	.hebei3{ position: absolute; bottom:-100px; right: 0; animation: fanzhuan 5s infinite linear; }
	.hebei4{ margin-top: -30px;}
	.hebei4 img{width: 100%;} 
	.yanbk{ width: 600px; height: 60px; position: relative; margin: 0 auto; }
	.yanbkcon{position: absolute;animation: yanbk 5s infinite linear;}
	@keyframes yanbk
	{
	    0% { 
		left:20px ;
	
		
		
		
		}
		50%{
			
			left:-20px ;
		
		}
		
		
		
	    100% {  left:20px ;
		
		
	
		
		 
		 }
	}
	
	@keyframes fanzhuan
	{
	    0% { 
		
		transform: rotateY(0);
		
		
		}
		30%{
			transform: rotateY(360deg);
		
		}
		
		
		
	    100% { 
	
		transform: rotateY(360deg);
		 
		 }
	}
	.youshi{ width: 100%;display: flex; height: 100%; }
	.youshik{ width:20%;  position: relative;  overflow: hidden;}
	.youshik img{ position: absolute; bottom: 0;  animation: youshiimg 6s infinite linear; }
	
	@keyframes youshiimg
	{
	    0% { 
		right:0;
		
		
		
		
		}
	   50%{  right:-70px;
	
		
		 
		 }
		 100%{  right:0px;
		 	
		 		
		 		 
		 		 }
	}
	.xiang{ width:100%; display:flex;flex-flow:row wrap; margin-top:20px; }
	.xiang div{  justify-content: flex-start; width: 14%;}
	.xiang div img{  width: 99%; }
	
	.xiang3{ width:100%; display:flex;flex-flow:row wrap; margin-top:20px; }
	
	.xiang3  img{   width: 65%; height: auto; }
	.qijiren{  width: 30%; position: absolute; right: 8%; top: 35%; }
	
	.qijiren img{ width: 100%;}
	.youshiz{width: 100%;display: flex; height: 100%;  position: absolute; z-index: 999; }
	.youshiz div{ width:20%;  position: relative;  overflow: hidden;}
	.youz{ position: absolute; top:50px; left: 20px; width: 20%;}
	.tupiao{ position: absolute; top:40px; right: 40px; width: 20%;}
	.muludi{ position: absolute; bottom: -100px; left: 30%;}
	.bkfd4{position: absolute;  bottom: 0;  animation: bkfd4 15s infinite linear; width: 100vw; height: 100vh;} 
	  @keyframes xuanzhuan
	  {
	      0% { 
	  	
	 	 	 transform: rotate(10deg)  ;
	  	}
		50% {
		
		 	 transform: rotateY(0deg)  ;
		}
	     
		 100% {   transform: rotate(10deg)  ;
		 	  
		 	  	
		 
		 }
	  }

  .svgbox{
position: absolute;
top:0; left: 0;
  
  } 
  .filtered-background, .main-background {
    position: absolute;
    height: 100vh;
    width: 100vw;
    background-image: url("bk1.jpg");
	 background-position: bottom;
  }
  
  .filtered-background {
    filter: url("#turbulence");
  }
.shuzi{     margin-top: -40px;
    margin-bottom: 30px;
    background-image: url(qianyanbk.png);
    background-size: 100%;
    
    background-repeat: no-repeat;
		
		}


.jcontent img{  margin-top: 60px; opacity: 0; transition: all 1s; animation: scaleDraw 1s  linear;} 
.active  .jcontent img{
    margin-top: 20px;
	opacity: 1;
}
/* .shuzi img{ width:50%;   transition: all 1s;  animation: scaleDraw 15s infinite linear;  text-align: center;}
.l2023{ position: absolute; bottom:25%; right:0;   animation: scaleDraw1 15s infinite linear;} */
	@keyframes scaleDraw {
 
				/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
				0% {
					margin-top: 60px;/*开始为原始大小*/
					opacity: 0;
				}
 
				100% { 
					opacity: 1;
					margin-top: 20px;;/*放大1.1倍*/
				}
 
				
			}
@keyframes scaleDraw1 {
 
				/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
				0% {
					transform: scale(1);/*开始为原始大小*/
				}
 
				25% { 
					transform: scale(0.75);/*放大1.1倍*/
				}
 
				50% {
					transform: scale(1);
				}
 
				75% {
					transform: scale(0.75);
				}
			}
 
@keyframes tiltSpin {
  0% {
    transform: rotateY(40deg) rotateX(45deg) ;
  }
  50% {
    transform: rotateY(60deg) rotateX(45deg) ;
  }
	100% {
    transform: rotateY(40deg) rotateX(45deg) ;
  }
}
@keyframes spin {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(1turn);
  }
}


 .card {
   width: 12.5rem;
   height: 200px;
   margin: 0px 12px;
   transform-style: preserve-3d;
  
   
 }
 .card img{
   
 }
 .card{
	 animation: flip 10s infinite linear;
	animation-delay: 1s;
	
}
.card1{
	 animation: flip 10s infinite linear;
	animation-delay: 2s;
	
}
.card2{
	 animation: flip 10s infinite linear;
	animation-delay: 3s;
	
}
.card3{
	 animation: flip 10s infinite linear;
	animation-delay: 4s;
	
}
.card4{
	 animation: flip 10s infinite linear;
	animation-delay: 5s;
	
}
@keyframes slideInUp {  
  from {  
    transform: translateY(100%);  
    visibility: visible;  
  }  
  
  to {  
    transform: translateY(0);  
  }  
}  
 .face {
   width: 200px;
   height: 200px;
   position: absolute;
   backface-visibility: hidden;
 }
  
 .front {
  
 }
  
 .back {
  
   transform: rotateY(180deg);
 }
  
 @keyframes flip {
   0% {
     transform: rotateY(0deg);
   }
   20% {
     transform: rotateY(0deg);
   }
   30% {
     transform: rotateY(180deg);
   }
   70% {
     transform: rotateY(180deg);
   }
   80% {
     transform: rotateY(360deg);
   }
   100% {
     transform: rotateY(360deg);
   }
 }