*{
	margin: 0;
	padding: 0;
}
html,body{
	height: 100%;
	overflow: hidden;

}
/* * { touch-action: pan-y; } */
.show{
	width: 23.4375rem;
	height: 100%;
	overflow: hidden;
	margin: 0 auto;
	position: absolute;

	left: calc(50% - 23.4375rem/2);
}
#music{
	width:2rem;
	height:2rem;
	position: fixed;
	background: url(../img/bgm_on.png);
	background-size: 100% 100%;
	right: calc(50% - 11rem);
	z-index: 20;

}
.page{
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	margin: 0 auto;
}
@keyframes flash{
	from{
		visibility: hidden;
		opacity: 0;
	}
	to{
		visibility: visible;
		opacity: 1;
	}
}
.page01{
	position: absolute;
	background: url(../img/p1背景.jpg)no-repeat;
}
.page02{
	position: absolute;
	background: url(../img/p2背景.jpg)no-repeat;
}
.page03{
	position: absolute;
	background: url(../img/p2背景.jpg)no-repeat;
}
.box1_1{
	width: 23.4375rem;
	height: 35%;

}
.box1_1 img:nth-child(1){
	width: 12.5rem;
	position: absolute;
	right: -0.75rem;
	top: -1.6875rem;
}
@keyframes xialuo{
	from{
		transform: translateY(0);
	}
	to{
			transform: translateY(100px);
	}
}
@keyframes suofang{
	from{
		transform: scale(0);
	}
	to{
		transform: scale(1);
	}
}
.box1_1 img:nth-child(2){
	width: 2.5rem;
	position: absolute;
	top: 9.375rem;
	left: 7.8125rem;
	animation: xialuo 4s linear infinite;
	
}
.box1_1 img:nth-child(3){
	width: 2.5rem;
	position: absolute;
	top: 12.5rem;
	left: 12.5rem;
	animation: xialuo 6s  linear infinite;
}
.box1_1 img:nth-child(4){
	width: 2.5rem;
	position: absolute;
	top: 15.625rem;
	left: 15rem;
	animation: xialuo 8s  linear infinite;
}
.box1_1 img:nth-child(5){
	width: 9.375rem;
	position: absolute;
	left: -1.125rem;
	top: 0.625rem;
}
.box1_2{
	width: 12.1875rem;
	height: 10%;
	margin-left: calc(50% - 12.1875rem/2);
	text-align: center;
	position: relative;
	overflow: hidden;
	opacity: 0;
	animation: title 2s 2s ease both;
	
	

}
.box1_2 img:nth-child(1){
	width: 12.5rem;
}
@keyframes title{
	from{
		width: 50px;
		
		
	}
	{
	50%{
		width: 100px;
	}
		75%{
			width: 150px;
		}
	}
	
	to{
		width: 12.5rem;
		opacity: 1;
	}
}

.box1_3{
	width: 100%;
	
	height: 55%;
	position: relative;
		
}
.box1_3 img{
	width: 6.25rem;
	

}
.box1_3 img:nth-child(1){
	position: absolute;
	width: 7.5rem;
	right: 2.5rem;
	top: 0;
	animation: suofang 2s linear infinite;
}
.box1_3 img:nth-child(2){
	position: relative;
	top: 3.75rem;
	left: calc(50% - 6.25rem/2);
	

}
.box1_3 img:nth-child(3){
	width: 3.125rem;
	position: absolute;
	left: 0.625rem;
	bottom: 0;
}
.box1_3 img:nth-child(4){
	width: 9.375rem;
	position: absolute;
	top: 10rem;

}
#div2{
	width: 16rem;
	height: 16rem;
	position: absolute;
	left: 7rem;
    top: 11rem;
	z-index: 5;
}
.box2_1{
	width: 23.4375rem;
	height: 35%;

}
.box2_1 img:nth-child(1){
	width: 12.5rem;
	position: absolute;
	right: -0.75rem;
	top: -1.6875rem;
}
@keyframes xialuo1{
	from{
		transform: translateY(0);
	}
	to{
			transform: translateY(100px);
			opacity: 0;
	}
}
@keyframes suofang{
	from{
		transform: scale(0);
	}
	to{
		transform: scale(1);
	}
}
.box2_1 img:nth-child(2){
	width: 2.5rem;
	position: absolute;
	top: 9.375rem;
	left: 7.8125rem;
	animation: xialuo1 4s linear infinite;
	
}
.box2_1 img:nth-child(3){
	width: 2.5rem;
	position: absolute;
	top: 12.5rem;
	left: 12.5rem;
	animation: xialuo1 6s  linear infinite;
}
.box2_1 img:nth-child(4){
	width: 2.5rem;
	position: absolute;
	top: 15.625rem;
	left: 15rem;
	animation: xialuo1 8s  linear infinite;
}
.box2_1 img:nth-child(5){
	width: 9.375rem;
	position: absolute;
	left: -1.125rem;
	top: 0.625rem;
}
.box2_1 img:nth-child(6){
	width: 9.375rem;
	position: absolute;
	left: -1.125rem;
	top: 9.375rem;
	transform-origin: 0 50%;
	animation: bird 2s linear infinite;
}
@keyframes bird{
0%{
	transform: rotate(0);
}
25%{
	transform: rotate(-10deg);
}
50%{
	transform: rotate(0deg);
}
75%{
	transform: rotate(10deg);
}
100%{
	transform: rotate(0deg);
}
}
@keyframes yuan{
	0%{
		transform: rotateZ(0);
	}
	75%{
	transform:rotateZ(230deg)
	}
	100%{
	transform:rotateZ(220deg) translate(-35px,-50px)
	}
	
}
@keyframes img{
	0%{
		transform: rotateZ(0);
	}
	75%{
	transform:rotateZ(-220deg)
	}
	100%{
	transform:rotateZ(-220deg)
	}
	
}
@keyframes yuan1{
	from{
		transform: translateY(0);
	}
	50%{
		transform: translateY(150px);
	}
}

.box2_2{
	width: 4rem;
	position: absolute;
    left: 2.6rem;
    top: 5rem;
	transform-origin:100% 100% ;
	animation: yuan1 2s ease both;

}
.box2_2 img{
	width: 4rem;
/* 	animation: img 2s; */
	z-index: 3;
}
.box2_3{
	width: 23.4375rem;
	text-align: center;
}
.box2_3 img:nth-child(2){
	position: absolute;
	width: 5rem;
	left: calc(50% - 2.5rem);
}
.box2_3 img:nth-child(1){
	position: absolute;
	width: 20rem;
	left: calc(50% - 10rem);
}
.box3_1{
	width: 100%;
	position: absolute;
	top: 8rem;
}
.box3_1 img{
	width: 30rem;
	position: absolute;
	left: -3.625rem;
	
	
}
.box3_2{
	width: 23.4375rem;
	height: 65%;
	position: relative;
}
.box3_2_1 img:nth-child(1){
	width: 8rem;
	position: relative;
	left: 16rem;
    top: -6rem;
	opacity: 0;
}
.box3_2_1 img:nth-child(2){
	width: 4rem;
	position: relative;
	left: 6rem;
	top: 1rem;
	animation: flash 1s ease both;
}
.box3_2_2{
	width: 10rem;
	position: absolute;
	left: 0;
}
.box3_2_2 img:nth-child(1){
	width: 8rem;
	position: absolute;
	left: 4rem;
	top: -3rem;
	opacity: 0;
	
}
.box3_2_2 img:nth-child(2){
	width: 4rem;
	position: absolute;
	left: 1rem;
	top: 0rem;
	animation: flash 1s 1s ease both;
}
.box3_2_3{
	width: 10rem;
	position: absolute;
	right: 1.4rem;
	top: 14rem;
	
}
.box3_2_3 img:nth-child(1){
	width: 8rem;
	position: absolute;
	left: 4rem;
	top: -3rem;
	opacity: 0;
	
}
.box3_2_3 img:nth-child(2){
	width: 5rem;
	position: absolute;
	left: 1rem;
	top: 0rem;
	animation: flash 1s 2s ease both;
}

.box3_2_4{
	width: 10rem;
	position: absolute;
    right: 11rem;
    top: 18rem;
	
}
.box3_2_4 img:nth-child(1){
	width: 8rem;
	position: absolute;
	left: 4rem;
	top: -3rem;
	opacity: 0;
	
}
.box3_2_4 img:nth-child(2){
	width: 5rem;
	position: absolute;
	left: 1rem;
	top: 0rem;
	animation: flash 1s 3s ease both;
}
#arrow{
	width: 20rem;
	height: 2rem;
	position: absolute;
	bottom: 2%;
	left: calc(50% - 10rem);
	animation: flash 2s 1s ease both;
}
#arrow img{
	width: 2rem;
	height: 2rem;
	margin-left: calc(50% - 1rem);
	animation: right 1s linear infinite;
}
@keyframes right{
	from{
		transform: translateX(0);
	}
	to{
		transform: translateX(-50px);
	}
}

.title{
	animation: flash 1s ease both;
}
.box4_1{
	width: 23.4375rem;
	height: 100%;
	background: url(../img/p3背景.jpg);
	float: left;
	
	
}
.box4_1_1{
	width: 23.4375rem;
	height: 100%;
	position: relative;
	animation: back 15s linear infinite;
	
}
.box4_1_1 img:nth-child(1){
	width: 10rem;
	position: absolute;
	left: 8rem;
}
.box4_1_1 img:nth-child(2){
	width: 4rem;
	position: absolute;
	top: 2rem;
	z-index: 10;

	
}
.box4_1_1 img:nth-child(3){
	width: 10rem;
	position: absolute;
	left: calc(50% - 5rem);
	top: 12rem;
}
.box4_1_1 img:nth-child(4){
	width: 16rem;
	position: absolute;
	bottom: 1%;
	z-index: 2;
	
}
.box4_1_1 img:nth-child(5){
	width: 30rem;
	position: absolute;
	top: 28rem;
    left: 12rem;
	
}
.box4_1_2{
	width: 23.4375rem;
	height: 100%;
	/* background: url(../img/p3背景.jpg); */
	text-align: center;
	position: absolute;
	top: 10rem;
	left: 23.4375rem;
	animation: back 15s linear infinite;
}
.box4_1_2 img:nth-child(1){
	width: 1rem;
}
.box4_1_2 span:nth-child(2){
	color: darkred;
	font-weight: bold;
	font-size: 1.2rem;
}
.box4_1_2 img:nth-child(3){
	width: 15rem;

}
.box4_1_2 img:nth-child(5){
	width: 40rem;
	position: absolute;
    top: 14rem;
    left: -10rem;
	
}


.box4_1_3{
	width: 23.4375rem;
	height: 100%;
	/* background: url(../img/p3背景.jpg); */
	text-align: center;
	position: absolute;
	top: 0rem;
	left: 46rem;
	animation: back 15s linear infinite;
}

.box4_1_3 img:nth-child(1){
	position: absolute;
	top: 10rem;
	left: calc(50% - 5rem);
	width: 1rem;
}
.box4_1_3 span:nth-child(2){
	position: absolute;
	top: 9.7rem;
	left:calc(50% - 3.5rem);
	color: darkred;
	font-weight: bold;
	font-size: 1.2rem;

}
.box4_1_3 img:nth-child(3){
	width: 15rem;
	position: absolute;
	top: 12rem;
	left: calc(50% - 7.5rem);
}
.box4_1_3 p:nth-child(4){
	width: 20rem;
	position: absolute;
	top: 21rem;
	left: calc(50% - 10rem);
	}
.box4_1_3 img:nth-child(5){
    width: 20rem;
    position: absolute;
    top: 28rem;
    left: -7rem;
	
	
}
#box4{
	width: 23.4375rem;
	height: 100%;
	background: url(../img/p3背景.jpg)no-repeat;
	 background-size: 100% 100%;
}

.box4_1_4{
	width: 23.4375rem;
	height: 100%;
	 
	text-align: center;
	position: absolute;
	top: 0rem;
	left: 70.2rem;
	animation: back 15s linear infinite;
}
.box4_1_4 img:nth-child(1){
	width: 1rem;
	position: absolute;
	top: 3rem;
	left: calc(50% - 4rem);
}
.box4_1_4 span:nth-child(2){
	color: darkred;
	font-weight: bold;
	font-size: 1.2rem;
	position: absolute;
	left: calc(50% - 2.5rem);
	top: 2.7rem;
}
.box4_1_4 img:nth-child(3){
	width: 10rem;
	height: 15rem;
	position: absolute;
	top: 5rem;
	left: calc(50% - 5rem)
}
.box4_1_4 p:nth-child(4){
	position: absolute;
	top: 21rem;
	left: 4.5rem;
}
.box4_1_4 img:nth-child(5){
	width: 30rem;
	position: absolute;
	top: 27rem;
	left: -14rem;
	
}
.box4_1_4 img:nth-child(6){
	width: 20rem;
	position: absolute;
	top: 27rem;
	left: 6rem;
	
}
@keyframes back{
	from{
		transform: translateX(0);
	}
	to{
		transform: translateX(-70.3125rem);
	}
}

.box5{
	width: 23.4375rem;
	height: 100%;
	background: url(../img/p3视频背景1.jpg);
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	left: 23.4375rem;
	z-index: 5;
	display: none;
}
.box5 video{
	width: 20rem;
	position: absolute;
	top: 12rem;
	left: calc(50% - 10rem);
}
.box5 img{
	width: 20rem;
	position: relative;
	left: calc(50% - 10rem);
}
.box5_1{
	width: 20rem;
	text-align: center;
	margin-top: 18rem;
}
.box5_1 img:nth-child(1){
	width: 1rem;
}
.box5_1 img:nth-child(4){
	width: 6rem;
	position: absolute;
	bottom: 5%;
	left: calc(50% - 3rem);
}
.box5_1 span{
	color: brown;
	font-size: 1.2rem;
	font-weight: bold;
	
	
}
.box5_1 p{
	margin-left: 3rem;
}
.video_left{
	animation: 1s video1 ease both;
}
.video_right{
	animation: 1s video2 ease both;
}
@keyframes video1{
	from{
		transform: translateX(23.4375rem);

		
		
	}
	to{
		transform: translateX(-23.4375rem);
		
	}
}
@keyframes video2{
	from{
		transform: translateX(-23.4375rem);
		
	}
	to{
		transform: translateX(23.4375rem);

	}
}

.box6{
	width: 300rem;
	height: 100%;
	position: absolute;
}

.box6{
	width: 23.4375rem;
	height: 100%;
	position: absolute;
	background: url(../img/p3背景.jpg)no-repeat;
	background-size: 100% 100%;
}
.box6_1{
	width: 4rem;
	position: absolute;
	top: 2rem;
	left: 2rem;
}
.box6_2{
	width: 18rem;
	position: absolute;
	left: calc(50% - 9rem);
	top:6rem;
}
.box6_2 img:nth-child(1){
	width: 18rem;
	position: relative;
}
.box6_2 img:nth-child(2){
	width: 16rem;
	position: absolute;
	left: calc(50% - 7.5rem);
}
.box6_3 img:nth-child(1){
	width: 2rem;
	position: absolute;
	bottom: 10%;
	left: calc(50% - 4rem);
}
.box6_3 img:nth-child(2){
	width: 2rem;
	position: absolute;
	bottom: 10%;
	transform: rotate(180deg);
	left: calc(50% + 2.5rem);
}
.box6_3 img:nth-child(3){
	width: 2rem;
	position: absolute;
	bottom: 5%;
	left: calc(50% - 1rem);
}
.box6{
	width: 300rem;
	height: 100%;
	position: absolute;
}

.box7{
	width: 23.4375rem;
	height: 100%;
	position: absolute;
	background: url(../img/p4背景.jpg)no-repeat;
	background-size: 100% 100%;
	/* left: 23.4375rem; */
}
.box7_1{
	width: 4rem;
	position: absolute;
	top: 2rem;
	left: 2rem;
}
.box7_2{
	width: 18rem;
	position: absolute;
	left: calc(50% - 9rem);
	top:6rem;
}
.box7_2 img:nth-child(1){
	width: 18rem;
	position: relative;
}
.box7_2 img:nth-child(2){
	width: 16rem;
	position: absolute;
	left: calc(50% - 7.5rem);
}
.box7_3{
	width: 20rem;
	height: 3rem;
	position: absolute;
	bottom: 8%;
	left: calc(50% - 10rem);
}
.box7_3 img:nth-child(1){
	width: 2rem;
	position: absolute;
	bottom: 10%;
	left: calc(50% - 4rem);
}
.box7_3 img:nth-child(2){
	width: 2rem;
	position: absolute;
	bottom: 10%;
	transform: rotate(180deg);
	left: calc(50% + 2.5rem);
}
.box7_3 img:nth-child(3){
	width: 2rem;
	position: absolute;
	bottom: 8%;
	left: calc(50% - 1rem);
}
#finger1{
	animation: finger 2s linear both;
}
@keyframes finger{
0%{
	transform: translateX(0);
}
25%{
	transform: translateX(-3.125rem);
}
50%{
	transform: translateX(0);
}
75%{
	transform: translateX(3.125rem);
}
100%{
	transform: translateX(0);
}
}
.go_right{
	animation: go_right 2s ease both;
}
.go_left{
	animation: go_left 2s ease both;
}
@keyframes go_right{

	to{
		transform: translateX(46.875rem);
	}
}
@keyframes go_left{
	from{
		transform: translateX(0);
	}
	to{
		transform: translateX(-23.4375rem);
	}
}
.box8{
	width: 23.4375rem;
	position: absolute;
}
#page08{
	position: relative;
}
.box8_1{
	width: 100%;
	height: 100%;
	background: url(../img/p6梅1.jpg)no-repeat;
	background-size: 100% 100%;
	
	
}
.box8_1_1{
	width: 10rem;
	height: 10%;
	position: relative;
}
.box8_1_1 img{
	position: absolute;
	top: 2rem;
	left: 2rem;
}
.box8_1_2{
	position: relative;
	width: 100%;
	height: 50%;
	border-radius: 50% 50%;
}
#die{
	position: absolute;
	top: 12rem;
	left:calc(50% - 4rem);
	width: 8rem;
	height: 8rem;
	border-radius: 50% 50%;
	background: url(../img/p6梅.jpg)no-repeat;
	background-size: 100% 100%;
	animation: 8s ro linear infinite;
	overflow: hidden;
}
#die img{
	position: absolute;
	width: 10rem;
	height: 10rem;
	left: -2rem;
}
@keyframes ro{
	from{
		transform: rotate(0);
	}
	to{
		transform: rotate(360deg);
	}
}

.box8_1_3{
	position: relative;
	text-align: center;
	width: 100%;
	height: 10%;
}
.box8_1_3 p{
	color: white;
}
.box8_1_3 p:nth-child(1){
	font-size: 1.4rem;
}
.box8_1_4{
	width: 100%;
	height: 30%;
	position: relative;
	text-align: center;
}
.box8_1_4 img{
	width: 3.5rem;
	margin: 15px;
}
.box8_1_4 img:nth-child(1){
	transform:rotate(180deg);
}