@charset "utf-8";
/* CSS Document */
*{
	margin:0px;
	padding:0px;
	text-decoration:none;
	font-size:24px;
	border-width:0px;
	color:#333333;
}
body{
	background-color:#333333;
	width:100%;
	height:100%;
}
#pageList .page .widget img {
	    display: block;
    width: 270px;
    padding-bottom: 20px;
}
#footer {
    position: absolute;
    bottom: 30px;
    opacity: .2;
    -webkit-animation: down 2s ease-in-out infinite;
    -o-animation: down 2s ease-in-out infinite;
    animation: down 2s ease-in-out infinite;
}
#footer img {
    width: 120px;
}

@keyframes down {
	0% {
		bottom: 30px;
		opacity: .2;
	}

	40% {
 bottom: 10px; 
 opacity: 1; 
	}

	100% {
bottom: 30px; 
 opacity: .2; 
	}
}

@-moz-keyframes down {
	0% {
		bottom: 30px;
		opacity: .2;
	}

	40% {
		bottom: 10px;
		opacity: 1;
	}

	100% {
		bottom: 30px;
		opacity: .2;
	}
}

@-webkit-keyframes down {
	0% {
		bottom: 30px;
		opacity: .2;
	}

	40% {
		bottom: 10px;
		opacity: 1;
	}

	100% {
		bottom: 30px;
		opacity: .2;
	}
}
#pageMain{
	position:absolute;
	width:100%;
	height:100%;
	max-width:640px;
	overflow:hidden;
	top:0px;left:0px;
	box-shadow: 0 0 160px 0 #5C99E7;
	-moz-box-shadow: 0 0 160px 0 #5C99E7;
	-ms-box-shadow: 0 0 160px 0 #5C99E7;
	-o-box-shadow: 0 0 160px 0 #5C99E7;
	-webkit-box-shadow: 0 0 160px 0 #5C99E7;
	background-color:#ffffff;
	left:50%;
	margin-left:-320px;
	overflow:hidden;
}
#musicIcon{
	display:block;
	position:absolute;
	width: 50px;
	height: 30px;
	right:50px;
	bottom:50px;
	z-index:1000;
}
#musicIcon i{
	display:block;
	position:absolute;
	width: 30px;
	height: 30px;
	right:0px;
	top:0px;
}
#musicIcon i:after{
	display:block;
	position:absolute;
	width: 30px;
	height:5px;
	margin-top: -26px;
	background-color:#FFFFFF;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	content:"";
}
#musicIcon i img{
	width:100%;
	height:100%;
}
#musicIcon span{
	display:none;
	position:absolute;
	width: 30px;
	height: 30px;
	font-size: 14px;
	line-height:60px;
	color:#FFFFFF;
}
.music_play i{
	animation:revolve 2s linear infinite;
	-o-animation:revolve 2s linear infinite;
	-ms-animation:revolve 2s linear infinite;
	-moz-animation:revolve 2s linear infinite;
	-webkit-animation:revolve 2s linear infinite;
}
#musicIcon[class~=music_play] i:after{
	display:none;
}
#musicIcon span.s_show{
	display:block;
	animation:slideInto 1s linear 1;
	-o-animation:slideInto 1s linear 1;
	-ms-animation:slideInto 1s linear 1;
	-moz-animation:slideInto 1s linear 1;
	-webkit-animation:slideInto 1s linear 1;
}
#pageList,#pageList .page{
	position:absolute;
	width:100%;
	height:100%;
	left:0px;
	top:0px;
	overflow:hidden;
}
#pageList .page{
	top:100%;
	background-size:cover;
	background-position:top center;
	z-index:0;
	background-size: 100% 100%;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-moz-justify-content: center;

	-moz-align-items: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-direction: normal;
	-webkit-box-orient: vertical;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
#pageList .page .widget{
	display:block;
	position:absolute;
	position: absolute;
	margin: 35% 0;
}
/*放大效果*/
.amplity{
	animation:amplity 1s linear 1;
	-o-animation:amplity 1s linear 1;
	-ms-animation:amplity 1s linear 1;
	-moz-animation:amplity 1s linear 1;
	-webkit-animation:amplity 1s linear 1;
}
/*淡入效果*/
.fade{
	animation:fade 2s linear 1;
	-o-animation:fade 2s linear 1;
	-ms-animation:fade 2s linear 1;
	-moz-animation:fade 2s linear 1;
	-webkit-animation:fade 2s linear 1;
}
/*闪光*/
.lightning{
	animation:fade 500ms linear 0s infinite alternate;
	-o-animation:fade 500ms linear 0s infinite alternate;
	-ms-animation:fade 500ms linear 0s infinite alternate;
	-moz-animation:fade 500ms linear 0s infinite alternate;
	-webkit-animation:fade 500ms linear 0s infinite alternate;
}
/*正旋转一次*/
.positivespin{
	animation:positivespin 2s linear 1;
	-o-animation:positivespin 2s linear 1;
	-ms-animation:positivespin 2s linear 1;
	-moz-animation:positivespin 2s linear 1;
	-webkit-animation:positivespin 2s linear 1;
}
/*反旋转一次*/
.negativerotation{
	animation:negativerotation 2s linear 1;
	-o-animation:negativerotation 2s linear 1;
	-ms-animation:negativerotation 2s linear 1;
	-moz-animation:negativerotation 2s linear 1;
	-webkit-animation:negativerotation 2s linear 1;
}
/*正旋转循环*/
.positiveone{
	animation:positivespin 2s linear infinite;
	-o-animation:positivespin 2s linear infinite;
	-ms-animation:positivespin 2s linear infinite;
	-moz-animation:positivespin 2s linear infinite;
	-webkit-animation:positivespin 2s linear infinite;
}
/*反旋转循环*/
.negativecirculate{
	animation:negativerotation 2s linear infinite;
	-o-animation:negativerotation 2s linear infinite;
	-ms-animation:negativerotation 2s linear infinite;
	-moz-animation:negativerotation 2s linear infinite;
	-webkit-animation:negativerotation 2s linear infinite;
}
/*抖动效果*/
.shake{
	animation:shake 2s linear infinite alternate;
	-o-animation:shake 2s linear infinite alternate;
	-ms-animation:shake 2s linear infinite alternate;
	-moz-animation:shake 2s linear infinite alternate;
	-webkit-animation:shake 2s linear infinite alternate;
}
/*旋转放大淡入*/
.mixfap{
	animation:mixfap 2s linear;
	-o-animation:mixfap 2s linear;
	-ms-animation:mixfap 2s linear;
	-moz-animation:mixfap 2s linear;
	-webkit-animation:mixfap 2s linear;
}.uparrow{
	animation:uparrow 2s linear infinite running;
	-o-animation:uparrow 2s linear infinite running;
	-ms-animation:uparrow 2s linear infinite running;
	-moz-animation:uparrow 2s linear infinite running;
	-webkit-animation:uparrow 2s linear infinite running;
}

/*向上淡入*/
.car_rolling{
	animation:rolling 5s linear infinite;
	-o-animation:rolling 5s linear infinite;
	-ms-animation:rolling 5s linear infinite;
	-moz-animation:rolling 5s linear infinite;
	-webkit-animation:rolling 5s linear infinite;
}
.sloshing{
	animation:sloshing 300ms linear infinite alternate;
	-o-animation:sloshing 300ms linear infinite alternate;
	-ms-animation:sloshing 300ms linear infinite alternate;
	-moz-animation:sloshing 300ms linear infinite alternate;
	-webkit-animation:sloshing 300ms linear infinite alternate;
}
.roll{
	animation:roll 2s linear;
	-o-animation:roll 2s linear;
	-ms-animation:roll 2s linear;
	-moz-animation:roll 2s linear;
	-webkit-animation:roll 2s linear;
}