.page-show{
	height: 100%;
	margin: 0;
	position: absolute;
	width: 100%;
}

.page-hide{
	position: absolute;
	height: 100%;
	width: 100%;
	bottom: 100%;
}

.container{
	overflow: hidden;
	height: 100%;
	margin: -8px;
	position: fixed;
	width: 100%;
}

.block{
	position: absolute;
}

.music-icon{
	position: fixed;
	top: 5%;
	right: 5%;
	background-image: url('/images/music.png');
	background-repeat: no-repeat;
	width: 22px;
	height: 22px;
	cursor: pointer;
	z-index: 1000;
}

.show{
	animation: showPage 1s linear;
	-moz-animation: showPage 1s linear;	/* Firefox */
	-webkit-animation: showPage 1s linear;	/* Safari 和 Chrome */
	-o-animation: showPage 1s linear;	/* Opera */
}

@keyframes showPage
{
	from {bottom: 100%;}
	to {bottom: 0%;}
}

@-moz-keyframes showPage /* Firefox */
{
	from {bottom: 100%;}
	to {bottom: 0%;}
}

@-webkit-keyframes showPage /* Safari 和 Chrome */
{
	from {bottom: 100%;}
	to {bottom: 0%;}
}

@-o-keyframes showPage /* Opera */
{
	from {bottom: 100%;}
	to {bottom: 0%;}
}

.hide{
	animation: hidePage 1s linear;
	-moz-animation: hidePage 1s linear;	/* Firefox */
	-webkit-animation: hidePage 1s linear;	/* Safari 和 Chrome */
	-o-animation: hidePage 1s linear;	/* Opera */
}

@keyframes hidePage
{
	from {bottom: 0%;}
	to {bottom: 100%;}
}

@-moz-keyframes hidePage /* Firefox */
{
	from {bottom: 0%;}
	to {bottom: 100%;}
}

@-webkit-keyframes hidePage /* Safari 和 Chrome */
{
	from {bottom: 0%;}
	to {bottom: 100%;}
}

@-o-keyframes hidePage /* Opera */
{
	from {bottom: 0%;}
	to {bottom: 100%;}
}

.rotate{
	animation: rotate 5s infinite linear;
	-moz-animation: rotate 5s infinite linear;	/* Firefox */
	-webkit-animation: rotate 5s infinite linear;	/* Safari 和 Chrome */
	-o-animation: rotate 5s infinite linear;	/* Opera */
}

@keyframes rotate
{
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

@-moz-keyframes rotate /* Firefox */
{
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

@-webkit-keyframes rotate /* Safari 和 Chrome */
{
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

@-o-keyframes rotate /* Opera */
{
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

.arrow{
	z-index: 1000;
	position: fixed;
	left: 50%;
	width: 30px;
	margin-left: -15px;
	animation: arrow 1s infinite linear;
	-moz-animation: arrow 1s infinite linear;	/* Firefox */
	-webkit-animation: arrow 1s infinite linear;	/* Safari 和 Chrome */
	-o-animation: arrow 1s infinite linear;	/* Opera */
}

@keyframes arrow
{
	from {
		bottom: 5%;
	}
	to {
		bottom: 10%;
	}
}

@-moz-keyframes arrow /* Firefox */
{
	from {
		bottom: 5%;
	}
	to {
		bottom: 10%;
	}
}

@-webkit-keyframes arrow /* Safari 和 Chrome */
{
	from {
		bottom: 5%;
	}
	to {
		bottom: 10%;
	}
}

@-o-keyframes arrow /* Opera */
{
	from {
		bottom: 5%;
	}
	to {
		bottom: 10%;
	}
}
























