*{margin:0;padding:0;}
img{display:block;}
html,body{height:100%; }
html{
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-size: 50px;
}
body {
    margin: 0;
    font-family: 'Microsoft Yahei',Helvetica,'simhei',sans-serif;
    width: 100%;
    height: 100%;
    background-color: #dff1f6;
    
}
audio{
height:0;
width:0;
display:none; 
}
/*背景swiper的颜色在这里*/
.swiper-container {width: 100%;height:100%;background:#dff1f6;}  

.swiper-slide{width:100%;height:100%;}
/* 必备 */
.ani{position:absolute;}
/* 分页中的小点 */
.swiper-pagination-bullet {
width:10px;height:10px;background:#f00;opacity:.4;}
.swiper-pagination-bullet-active {opacity: 1;}

.page2 img{ pointer-events: none; }

/*向上提示的箭头↑*/
.arrar{position: absolute;bottom:10%;left: 50%;margin-left: -23px;z-index: 888;
animation:upDownBtn 1.5s infinite; animation:upDownBtn 1.5s infinite;
-webkit-animation:upDownBtn 1.5s infinite; animation:upDownBtn 1.5s infinite;}
@-webkit-keyframes upDownBtn{0%{opacity:0;-webkit-transform:translateY(15px);transform:translateY(15px)}50%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-15px);transform:translateY(-15px)}}
@keyframes upDownBtn{0%{opacity:0;-webkit-transform:translateY(15px);-ms-transform:translateY(15px);transform:translateY(15px)}50%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}}
/*loading载入样式*/
#loading{
	position: fixed;
	top:0;left:0; 
	width:100%;
	height:100%;
	z-index: 999;
	background: url(../images/loading.gif) no-repeat center center #FFF;
	background-size:50%;
	background-color: #FFFFFF;
	
	}

.music {position: fixed; z-index: 99; top: 2%; right: 2%; width: 0.8rem; }
.add{-webkit-animation: music 2s linear infinite;}
.Musicpaused {-webkit-animation-play-state:paused; animation-play-state:paused;}
@-webkit-keyframes music {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    to{
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}

/* 第一页 */
.page1{
	background:url(../images/b1.jpg) top center no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
}

.page1_tit1{
	width: 90%;left: 5%;  top:15%;    
}


.page1_tit1 img{width: 100%; height: auto;}



		
		
.page1_tit2{
	width: 70%;left: 15%;  bottom:20%
}


		
.page1_light1{position: absolute; width: 30%; left: -5%; top: 15%;}		
.page1_light1 img{width: 100%; height: auto;animation:light1 2s linear infinite;animation-direction: normal}
	@keyframes light1{
			0%{transform:scale(1);opacity: 0.9;}
			50%{transform: scale(0.9);opacity: 0.2;}
			100%{transform: scale(1);opacity: 0.9;}
		}
		
.page1_light2{position: absolute; width: 30%; left: 35%; top: 15%;}		
.page1_light2 img{width: 100%; height: auto;animation:light2 3s linear infinite;animation-direction: normal}
	@keyframes light2{
			0%{transform:scale(1);opacity: 0.9;}
			50%{transform: scale(0.9);opacity: 0.2;}
			100%{transform: scale(1);opacity: 0.9;}
		}
		
	.page1_light3{position: absolute; width: 30%; right: 5%; top: 15%;}		
.page1_light3 img{width: 100%; height: auto;animation:light3 2.5s linear infinite;animation-direction: normal}
	@keyframes light3{
			0%{transform:scale(1);opacity: 0.9;}
			50%{transform: scale(0.9);opacity: 0.2;}
			100%{transform: scale(1);opacity: 0.9;}
		}	
		
		
.page1_light4{position: absolute; width: 30%; right: -5%; top: 25%;}		
.page1_light4 img{width: 100%; height: auto;animation:light4 2s linear infinite;animation-direction: normal}
	@keyframes light4{
			0%{transform:scale(1) ;opacity: 0.9;}
			50%{transform: scale(0.9);opacity: 0.2;}
			100%{transform: scale(1);opacity: 0.9;}
		}	
		
.page1_light5{position: absolute; width: 30%; left: 25%; top: 30%;}		
.page1_light5 img{width: 100%; height: auto;animation:light5 3s linear infinite;animation-direction: normal}
	@keyframes light5{
			0%{transform:scale(1);opacity: 0.9;}
			50%{transform: scale(0.9);opacity: 0.2;}
			100%{transform: scale(1);opacity: 0.9;}
		}				
			

.ynitem2{width:100%; height:auto;position: relative;}



.longbg{width: 100%; height: 667px; overflow-x: hidden;overflow-y: auto; position: absolute;}
.ynitem img{width: 100%; height: auto;}
/*.lrhandtip{width:100%; height: 280px; background:url(../images/bg3.jpg)  center top no-repeat;-webkit-background-size: 100% 100%;
	background-size: 100% 100%;}*/
.lrhandtip{width:100%; height:auto;position: relative;}
.lrhandpic{width:10%;position: absolute; z-index: 100;top:30px;left: 30%;animation:lrhand 1.5s infinite; 
-webkit-animation:lrhand 1s infinite; }
/*@-webkit-keyframes ShowBtn{
	0% { opacity: 0; -webkit-transform: scale(0.1); }
50% { opacity: 1; }
100%{ opacity: 0; -webkit-transform: scale(1.2); } 
	}
@keyframes ShowBtn{
0% { opacity: 0; transform: scale(0.1); }
50% { opacity: 1; }
100%{ opacity: 0;transform: scale(1.2); } 
	}*/

@-webkit-keyframes lrhand{
	0%{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}
	50%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
	100%{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}
	}
@keyframes lrhand{
	0%{opacity:1;-webkit-transform:translateY(10px);-ms-transform:translateY(15px);transform:translateY(10px)}
	50%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
	100%{opacity:1;-webkit-transform:translateY(10px);-ms-transform:translateY(15px);transform:translateY(10px)}
	}


.ynitem{width:100%; height:auto;position: relative;}


.runman{width: 30%;position: absolute; z-index: 100;bottom:2%;left: 0;animation:run 8s infinite; animation-direction: normal;animation-timing-function: linear;}

@-webkit-keyframes run{
   from{opacity:1;left: -50%;}
   to{opacity:1;left: 50%;}
	}
	
	
	
.tip1{width: 50%;position: absolute; z-index: 100;top:20%;left: 50%;animation:tip1 1s infinite; animation-direction: alternate;}	
@-webkit-keyframes tip1{
   from{transform:  scale(0.9) ;}
   to{transform:  scale(1) ;}
	}
		
.tip2{width: 50%;position: absolute; z-index: 100;bottom: 2%;left: 5%;animation:tip2 5s infinite; animation-direction: alternate;}	
@-webkit-keyframes tip2{
			0%{
				
				transform: rotateZ(-5deg)  ;
			}
			25%{
				transform: rotateZ(0deg) ;
			}
			50%{
				transform: rotateZ(5deg) ;
			}
			75%{
				transform: rotateZ(0deg) ;
			}
			100%{
				transform: rotateZ(-5deg);
			}
	}
	
	.tip3{width: 30%;position: absolute; z-index: 100;top: 25%;left: 10%;animation:tip3 2s infinite; animation-direction: alternate;animation-timing-function: linear;}	
	.tip4{width: 35%;position: absolute; z-index: 100;top: 25%;right: 10%;animation:tip4 2s infinite; animation-direction: alternate;animation-timing-function: linear;}	
	
	@-webkit-keyframes tip3{
   from{opacity:1;left:2%;}
   to{opacity:1;left: 10%;}
	}
	@-webkit-keyframes tip4{
   from{opacity:1;right:2%;}
   to{opacity:1;right: 10%;}
	}
	.tip5{width: 35%;position: absolute; z-index: 100;bottom: 5%;right: 10%;animation:tip5 5s infinite; animation-direction: alternate;animation-timing-function: linear;}	
	
@-webkit-keyframes tip5{
   from{opacity:1;right:-5%;}
   to{opacity:1;right: 20%;}
	}
	
	.tip6{width: 35%;position: absolute; z-index: 100;top: 7%;left: 10%;animation:tip6 5s infinite; animation-direction: alternate;animation-timing-function: linear;}	
	@-webkit-keyframes tip6{
   from{opacity:1;left:-5%;}
   to{opacity:1;left: 10%;}
	}	
	
	
	.tip7{width: 50%;position: absolute; z-index: 100;top: 2%;left: 15%;animation:tip7 1s infinite; animation-direction: alternate;animation-timing-function: linear;}	
@-webkit-keyframes tip7{
from{transform:  scale(0.9) ;}
   to{transform:  scale(1) ;}
	}
	
	.tip8{width: 50%;position: absolute; z-index: 100;top: 17%;right: 15%;animation:tip7 1s infinite; animation-direction: alternate;animation-timing-function: linear;}	

	
	
	
	
	
	
	
	
	
	
	
	
	
@keyframes ShowBtn{
0%{opacity:1;-webkit-transform:translateX(5px);-ms-transform:translateX(5px);transform:translateX(5px)}
	50%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
	100%{opacity:1;-webkit-transform:translateX(5px);-ms-transform:translateX(5px);transform:translateX(5px)}
	}




.thumbbg{background:url(../images/bgthumb.png) top center no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%; z-index: 999; position: relative; width: 90%; height: 470px; left: 2%; display: none; padding: 10px;}

.sharebg{width:100%;background:url(../images/shareme.jpg) top center no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%; z-index: 999; position: relative;display: none;}
  

.share{width:7%;position: absolute; z-index: 100;top:32%;left: 32%;}
.more{width:7%;position: absolute; z-index: 100;top:50%;left: 32%;}




/*----------------------------*/
.single
{
	width:65%;
	left: 20%;
    top: 55%;
    position: absolute;
}
.single em{width:90px;height:90px; margin:0 auto;background:url(images/icon.png) no-repeat center center;cursor:pointer;display:block;position:relative;}
.single em:after { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; box-shadow: 0 0 1px 2px rgba(255,255,255,0.8); top: 50%; left: 50%; margin-top: -60px; margin-left: -60px; z-index: 3; opacity: 0; -webkit-animation: halo 1s 0.5s infinite ease-out; -moz-animation: halo 1s 0.5s infinite ease-out; animation: halo 1s 0.5s infinite ease-out; }
@-webkit-keyframes halo { 0% { opacity: 0;-webkit-transform: scale(0.1); }
50% {opacity: 1; }
100%{opacity: 0;-webkit-transform: scale(1.2); } }
@-moz-keyframes halo {0% { opacity: 0; -moz-transform: scale(0.1); }
50% { opacity: 1; }
100%{ opacity: 0; -moz-transform: scale(1.2); } }
@-ms-keyframes halo {0% { opacity: 0; }
50% { opacity: 1; }
100%{opacity: 0; } }
@-o-keyframes halo {0% { opacity: 0; -o-transform: scale(0.1); }
50% {opacity: 1; }
100%{ opacity: 0;-o-transform: scale(1.2); } }
@keyframes halo {0% { opacity: 0; transform: scale(0.1); }
50% {opacity: 1; }
100%{opacity: 0;transform: scale(1.2); } }





.audio_warp  img{
display:inline;
height:1rem;
float: left;
border: 0.02rem solid #fbdd4c;
}
.audio_warp  .audio_bg{
display:inline-block;
width:3.6rem;
height:1rem;
vertical-align:top;
background:url("../images/bg_talk.png") no-repeat center center;
background-size:contain;
position:relative;
}
.audio_bg:before,.audio_bg:after{
content:"\20";
display:none;
position:absolute;
width: 0.2rem;
height: 1rem;
top: 0;
left: 0.3rem;
background:url("../images/lb.png") no-repeat center center;
background-size:contain;
}
.audio_bg.stop:before{
display:block;
}
.audio_bg:after{
display:block;
background-image:url("../images/lb.gif");
}
.audio_bg.stop:after{
display:none;
}
/*弹窗成功*/
.mask_suc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #666;
  background:url(../images/bg_suc.png) no-repeat top center;
  background-size: 100% 100%;
  display: none;
  }
  
  /*弹窗成功(第三关)*/
.mask_suc_final {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #666;
  background:url(../images/bg_pass.png) no-repeat top center;
  background-size: 100% 100%;
  display: none;
  }
  
 /*弹窗失败*/
.mask_fail{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #666;
  background:url(../images/bg_fail.png) no-repeat top center;
  background-size: 100% 100%;
  display: none;
  } 
   /*弹窗准备*/
.mask_ready{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #666;
  background:url(../images/bg_cover.png) no-repeat top center;
  background-size: 100% 100%;
    display: none;

  } 
  .mask_ready span{
  	
  	position: absolute;
  top: 30%;
  left: 50%;
  color: #fedd77;
  	
  }

  
  
/* 自定义动画效果的步骤:
   1:先确定元素用什么动画效果
   2:定义@keyframes 动画名称;
   3:开始定义动画的class类名; .class{animation-name:动画名称;}
   4:将class的名字加到,需要该动画效果的swiper-animate-effect;
   5:该元素需要有动画的时候,会自动把swiper-animate-effect的
   属性值作为一个类名加给该元素;
; */

/* .box{
	-webkit-animation: 名称  所用时间  过渡形式 延迟时间;
	-o-animation: 名称  所用时间  过渡形式 延迟时间;
	animation: 名称  所用时间  过渡形式 延迟时间;
} */
.abutton{
	width:80%;
	-webkit-animation:abutton forwards;
	animation:abutton forwards;
}
.cloud1{
	width:60%;
	position:fixed;
	left:20%;
	top:40%;
}
.cloud2{
	width:30%;
	position:fixed;
	left:50%;
	top:10%;
}
@-webkit-keyframes abutton {
	from {left:0%;opacity:0;}
	to {left:-30%;opacity:1;}
}
@keyframes abutton {
	from {left:0%;opacity:0;}
	to { left:-30%; opacity:1;}
}
@keyframes a1{
	0%{opacity:0}
	50% {transform:translateY(100%);opacity: 1}
	50% , 60%, 70%,80%,90%{
		opacity: 0.5;
		left: 10px;
	}
	55% , 65%, 75%,85%,95%{
		opacity: 1;
		left: -10px;
	}
}


.yanhua1{width: 50%; position: absolute; left:0 ; bottom: 10%; opacity: 0.6;animation:yanhua1 5s infinite; animation-direction: normal;animation-timing-function: linear;}
.yanhua2{width: 50%; position: absolute; right:0 ; bottom: 10%; opacity: 0.6;animation:yanhua1 5s infinite; animation-direction: normal;animation-timing-function: linear;}

@-webkit-keyframes yanhua1{
   0%{opacity:0;bottom: 0%;}
   70%{opacity:1;bottom: 50%;}
    100%{opacity:0;bottom: 80%;}
	}
	
	
	
	
	
.yanhua img{width: 100%; height: auto;}
@media screen and (max-height:480px){
	.page1-light{
		width:15%;
	}
}


.text_bg a{text-decoration: none; color: #000000;}











<!--ecms sync check [sync_thread_id="3bcee7cc5a424330844ab778a62d31c1" sync_date="2020-12-31 16:50:28" check_sum="3bcee7cc5a424330844ab778a62d31c1]-->