/*all tag*/
*{margin:0;padding: 0;border:none;font-size: 1.5625vm;font-family: "Microsoft Yahei";}
body,
html{height: 100%;}
/*music*/
#music{width: 15vw;height: 15vw;border:4px solid #ef1639;position: fixed;right: 4vw;top:3vh;z-index: 5;border-radius: 50%;background-color: #fff;}

#music>img:first-of-type{position: absolute;top:24%;right: 2.5%;z-index:5;width:28.421%;}
#music>img:last-of-type{position: absolute;right: 0;top:0;bottom:0;left: 0;z-index:1;margin:auto;width: 79%;}
/*texiao*/
#music>img.play{
	animation: music_disc 4s linear infinite;
	-webkit-animation: music_disc 4s linear infinite;
}
@keyframes music_disc{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-webkit-keyframes music_disc{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
/*page bg*/
.page{width:100%;height: 100%;position: absolute;overflow: hidden;}
.page>.bg{position: absolute;z-index: 0;width: 100%;height: 100%;}
/*page1*/
#page1{display: block;}
#page1>.bg{background:url(img/p1_bg.jpg) no-repeat center center;background-size: 100%;}
#page1>.p1_lantern{position: absolute;z-index: 0;top:-3.4%;right: 0;left: 0;margin:auto;width: 45vw;height: 71.2vh;background:url(img/p1_lantern.png)no-repeat bottom center;background-size: 100%;font-size: 3.506rem;padding-top: 31vh;box-sizing: border-box;text-align: center;color:#fff;}
#page1>.p1_lantern:before{position: absolute;z-index: -1;top:0;right: 0;bottom:0;left:0;margin:auto;width: 30vw;height: 30vw;content: "";border-radius: 50%;background-color: #d60b3b;opacity: .5;-webkit-box-shadow: 0 0 10vw 10vw #d60b3b;-moz-box-shadow: 0 0 10vw 10vw #d60b3b;-ms-box-shadow: 0 0 10vw 10vw #d60b3b;-o-box-shadow: 0 0 10vw 10vw #d60b3b;box-shadow: 0 0 10vw 10vw #d60b3b;
	animation:pl_lantern .5s infinite alternate;
	-webkit-animation:pl_lantern .5s infinite alternate;
}
@keyframes pl_lantern{
	0%{
		opacity: 0.5;
		transform:scale(.8,.8);
		-webkit-transform:scale(.8,.8);
	}
	100%{
		opacity: 1;
	}
}
@-webkit-keyframes pl_lantern{
	0%{
		opacity: 0.5;
		transform:scale(.8,.8);
		-webkit-transform:scale(.8,.8);
	}
	100%{
		opacity: 1;
	}
}
#page1>.p1_imooc{position: absolute;right: 0;bottom:9vh;left: 0;background: url(img/p1_imooc.png)no-repeat center center;background-size: 100%;width: 27.655vw;height: 18.63vh;margin:auto;}
#page1>.p1_words{font-size:2.134rem;position: absolute;right: 0;left: 0;bottom:48px;text-align: center;color:#232323;}
/*page2*/
#page2{display: none;transition: .5;}
#page2.fadeOut{ opacity: .3; transform: translate(0,-100%); }
#page2>.bg{background:url(img/p2_bg.jpg) no-repeat center center;background-size: 100%;}
#page2>.p2_circle{position: absolute;top:0;right: 0;bottom:0;left:0;margin:auto;background: url(img/p2_circle_outer.png)no-repeat center center;background-size: 100%;width: 59.375vw;height: 59.375vw;
	animation:p2_circle_outer 2s linear 1s infinite;
	-webkit-animation:p2_circle_outer 2s linear 1s infinite;
}
@keyframes p2_circle_outer{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform: rotate(-360deg);
	}
}
#page2>.p2_circle:before{position: absolute;top:0;right: 0;bottom: 0;left: 0;margin:auto;border-radius: 50%;content: "";background: url(img/p2_circle_middle.png)no-repeat center center;background-size: 100%;width: 45.625vw;height: 45.625vw;
	animation:p2_circle_middle 2s linear 1s infinite;
	-webkit-animation:p2_circle_middle 2s linear 1s infinite;
}
@keyframes p2_circle_middle{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform: rotate(1080deg);
	}
}
#page2>.p2_circle:after{position: absolute;top:0;right: 0;bottom: 0;left: 0;margin:auto;border-radius: 50%;content: "";background: url(img/p2_circle_inner.png)no-repeat center center;background-size: 100%;width: 39.9375vw;height: 39.9375vw;
	animation:p2_circle 1s linear 1s infinite;
	-webkit-animation:p2_circle 1s linear 1s infinite;
}
@keyframes p2_circle{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform: rotate(-720deg);
	}
}
#page2>.p2_2018{position: absolute;top:0;right: 0;bottom: 0;left: 0;margin:auto;background: url(img/p2_2016.png)no-repeat center center;background-size: 100%;width: 27.5vw;height: 6.24vh;}
/*page3*/
#page3{display: none;transition: .5;}
#page3.fadeIn{ transform: translate(0,-100%); }
#page3>.bg{background:url(img/p3_bg.jpg) no-repeat center center;background-size: 100%;}
#page3>.p3_logo{width: 34.6875.vw;height: 6.327.vh;position: absolute;top:7.82vh;right: 0;left: 0;margin:auto;background: url(img/p3_logo.png) no-repeat center center;background-size: 100%;}
#page3>.p3_title{width: 22.8125vw;height: 41.652vh;position: absolute;top:25.48vh;left: 50%;margin:auto;margin-left: -11.40625vw;background: url(img/p3_title.png) no-repeat center center;background-size: 100%;}
#page3>.p3_second{width: 22.8125vw;height: 41.652vh;position: absolute;top:25.48vh;left: 3.75vw;background: url(img/p3_couplet_second.png) no-repeat center center;background-size: 100%
}
#page3>.p3_first{width: 22.8125vw;height: 41.652vh;position: absolute;top:25.48vh;right: 3.75vw;background: url(img/p3_couplet_first.png) no-repeat center center;background-size: 100%;
}
#page3>.p3_blessing{width: 32vw;height: 32vh;position: absolute;right: 0;bottom:10vh;left: 0;margin:auto;border-radius: 50%;background: url(img/p3_blessing.png) no-repeat center center;background-size: 100%;
	animation:p3_blessing 2s linear infinite;
	-webkit-animation:p3_blessing 2s linear infinite;
}
@keyframes p3_blessing{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}