body{
	font-family:"Microsoft Yahei","SimSun";
	font-size: 16px;
	color:#000;
	background: #258dee;
}

@media (max-width: 380px) {
	body{ font-size:14px; }
}

@media (max-width: 325px) {
	body{ font-size:12px; }
}

@media (min-width: 750px) {
	body{ font-size:31px; }
}

a{
	color:#000;
}

a:hover{
	text-decoration: none;
	color: #c00 !important;
}

img{
	display: inline-block;
	vertical-align: top;
	max-height: 100%;
	max-width: 100%;
}

.abs{
	position:absolute;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity: 0;
}

#page{
	width: 750px;
	max-width: 100%;
	margin: 0px auto;
	box-shadow: 0px 0px 30px rgba(255,255,255,0.5);
}

.music{
	position: fixed;
	right: 0.8em;
	top: 0.8em;
	width: 2em;
	height: 2em;
	cursor: pointer;
	z-index: 999;
}
.music.on{background:url(images/music-on.png) no-repeat; background-size:100% 100%;}
.music.off{background:url(images/music-off.png) no-repeat;background-size:100% 100%;}
.music img{display: inline-block;}
@-moz-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@-o-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@-webkit-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@keyframes music{from{ transform:rotate(-360deg); }to{ }}
.music.on{
	animation:'music' 1.5s linear 0s infinite;
	-ms-animation:music 1.5s linear 0s infinite;
	-moz-animation:music 1.5s linear 0s infinite;
	-o-animation:'music' 1.5s linear 0s infinite;
	-webkit-animation:'music' 1.5s linear 0s infinite;
}

.bg img{
	width: 100%;
}

.part{
	position: relative;
}

.gif{
	position: absolute;
	width: 100%;
	left: 0%;
}

.gif img{
	width: 100%;
}

.g0{ top: 0%; }
.g1{ bottom: 0%; }
.g2{ bottom: 0%; }
.g3{ bottom: 0%; }
.g4-1{ top: 42.1%; }
.g4-2{ bottom: 0%; }
.g5{ bottom: 0%; }
.g6{ bottom: 0%; }
.g7{ bottom: 0%; }
.g8{ bottom: 0%; }
.g9{ bottom: 0%; }
.g10{ bottom: 18.5%; }

.text{
	position: relative;
}

.text .box{
	opacity: 0;
}

.text .box img{
	width: 100%;
}

.p0-cover{
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background: url("images/p0-cover.png");
	background-size: 100% 100%;
	opacity: 1 !important;
}

.p0-1{ width: 42.4%; height: 5.9%; left: 4.4%; top: 5.2%; background-image: url("images/p0-1.png"); opacity: 1 !important; }
.p0-1{ width: 42.4%; height: 5.9%; left: 4.4%; top: 5.2%; background-image: url("images/p0-1.png"); }
.p0-2{ width: 85.2%; height: 18.6%; left: 6.9%; top: 14.6%; background-image: url("images/p0-2.png"); }
.p0-3{ width: 96.4%; height: 34.7%; left: 1.8%; top: 60.2%; background-image: url("images/p0-3.png"); }
.p0-4{ width: 18.2%; height: 19.8%; left: 77.6%; top: 2.3%; background-image: url("images/p0-4.png"); opacity: 1 !important; }

.p1-1{ width: 75.2%; height: 6.6%; left: 13.3%; top: 4%; background-image: url("images/p1-1.png"); }
.p1-2{ width: 86.6%; height: 16.1%; left: 7.3%; top: 13.7%; background-image: url("images/p1-2.png"); }
.p1-3{ width: 74.8%; height: 11.6%; left: 8.5%; top: 36%; background-image: url("images/p1-3.png"); }
.p1-4{ width: 55.8%; height: 13.5%; left: 21%; top: 53.6%; background-image: url("images/p1-4.png"); }

.p2-1{ width: 65%; height: 5.7%; left: 17.6%; top: 3.7%; background-image: url("images/p2-1.png"); }
.p2-2{ width: 66.4%; height: 11.3%; left: 8.6%; top: 16.2%; background-image: url("images/p2-2.png"); }
.p2-3{ width: 69.1%; height: 9.8%; left: 26.2%; top: 35.9%; background-image: url("images/p2-3.png"); }
.p2-4{ width: 69.1%; height: 11.4%; left: 14.9%; top: 56.9%; background-image: url("images/p2-4.png"); }

.p3-1{ width: 87%; height: 6.3%; left: 6.1%; top: 4.1%; background-image: url("images/p3-1.png"); }
.p3-2{ width: 83.6%; height: 13.3%; left: 8.9%; top: 15.1%; background-image: url("images/p3-2.png"); }
.p3-3{ width: 76.4%; height: 11.8%; left: 12.4%; top: 33.9%; background-image: url("images/p3-3.png"); }
.p3-4{ width: 74.2%; height: 13.7%; left: 13%; top: 53.5%; background-image: url("images/p3-4.png"); }

.p4-1{ width: 60.2%; height: 6%; left: 20%; top: 3.8%; background-image: url("images/p4-1.png"); }
.p4-2{ width: 80.2%; height: 11.8%; left: 10.9%; top: 12.1%; background-image: url("images/p4-2.png"); }
.p4-3{ width: 84%; height: 14.4%; left: 4.8%; top: 35.5%; background-image: url("images/p4-3.png"); }
.p4-4{ width: 75%; height: 13%; left: 14.6%; top: 60%; background-image: url("images/p4-4.png"); }

.p5-1{ width: 69.2%; height: 6.4%; left: 15.6%; top: 4.1%; background-image: url("images/p5-1.png"); }
.p5-2{ width: 77%; height: 10.2%; left: 12.4%; top: 15.1%; background-image: url("images/p5-2.png"); }
.p5-3{ width: 79.1%; height: 13.6%; left: 9.6%; top: 32.6%; background-image: url("images/p5-3.png"); }
.p5-4{ width: 77.2%; height: 12.7%; left: 11.3%; top: 56%; background-image: url("images/p5-4.png"); }

.p6-1{ width: 89.6%; height: 6.6%; left: 5.7%; top: 4.2%; background-image: url("images/p6-1.png"); }
.p6-2{ width: 83.4%; height: 9.2%; left: 7.6%; top: 15.1%; background-image: url("images/p6-2.png"); }
.p6-3{ width: 69.8%; height: 11.9%; left: 7.2%; top: 32.5%; background-image: url("images/p6-3.png"); }
.p6-4{ width: 69.2%; height: 11%; left: 14.9%; top: 59.1%; background-image: url("images/p6-4.png"); }

.p7-1{ width: 60.2%; height: 5.5%; left: 20%; top: 3.5%; background-image: url("images/p7-1.png"); }
.p7-2{ width: 95.4%; height: 10.3%; left: 1.5%; top: 13.2%; background-image: url("images/p7-2.png"); }
.p7-3{ width: 68%; height: 17%; left: 10.9%; top: 30%; background-image: url("images/p7-3.png"); }
.p7-4{ width: 69.4%; height: 10.1%; left: 15.3%; top: 51.6%; background-image: url("images/p7-4.png"); }

.p8-1{ width: 69.1%; height: 6.9%; left: 15.3%; top: 4.5%; background-image: url("images/p8-1.png"); }
.p8-2{ width: 68.7%; height: 14.4%; left: 16.8%; top: 16.7%; background-image: url("images/p8-2.png"); }
.p8-3{ width: 53.9%; height: 11.3%; left: 6.6%; top: 39.7%; background-image: url("images/p8-3.png"); }
.p8-4{ width: 81.4%; height: 9.1%; left: 8.8%; top: 62.2%; background-image: url("images/p8-4.png"); }

.p9-1{ width: 94.8%; height: 6.3%; left: 2.4%; top: 4%; background-image: url("images/p9-1.png"); }
.p9-2{ width: 83.2%; height: 12.5%; left: 8%; top: 14.9%; background-image: url("images/p9-2.png"); }
.p9-3{ width: 80.4%; height: 11.9%; left: 7.2%; top: 41.2%; background-image: url("images/p9-3.png"); }
.p9-4{ width: 84.6%; height: 11.6%; left: 7.2%; top: 59%; background-image: url("images/p9-4.png"); }

.p10-1{ width: 87.5%; height: 5.6%; left: 6%; top: 3.6%; background-image: url("images/p10-1.png"); }
.p10-2{ width: 96%; height: 11.5%; left: 0.9%; top: 13.2%; background-image: url("images/p10-2.png"); }
.p10-3{ width: 91%; height: 10.6%; left: 2.8%; top: 28.1%; background-image: url("images/p10-3.png"); }
.p10-4{ width: 77.4%; height: 10.3%; left: 9.6%; top: 55.7%; background-image: url("images/p10-4.png"); }
.p10-5{ width: 96.4%; height: 12.8%; left: 1.7%; top: 83.3%; background-image: url("images/p10-5.png"); opacity: 1 !important; }


@-ms-keyframes m1{
	from{ margin-top: -1em; }
	to{ opacity:1; }
}
@-moz-keyframes m1{
	from{ margin-top: -1em; }
	to{ opacity:1; }
}
@-o-keyframes m1{
	from{ margin-top: -1em; }
	to{ opacity:1; }
}
@-webkit-keyframes m1{
	from{ margin-top: -1em; }
	to{ opacity:1; }
}
@keyframes m1{
	from{ margin-top: -1em; }
	to{ opacity:1; }
}

.active .p0-1{
	animation:'m1' 0.5s ease-in-out 0s forwards;
	-ms-animation:m1 0.5s ease-in-out 0s forwards;
	-moz-animation:m1 0.5s ease-in-out 0s forwards;
	-o-animation:'m1' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'m1' 0.5s ease-in-out 0s forwards;
}

@-ms-keyframes m2{
	from{ margin-left: -1em; }
	to{ opacity:1; }
}
@-moz-keyframes m2{
	from{ margin-left: -1em; }
	to{ opacity:1; }
}
@-o-keyframes m2{
	from{ margin-left: -1em; }
	to{ opacity:1; }
}
@-webkit-keyframes m2{
	from{ margin-left: -1em; }
	to{ opacity:1; }
}
@keyframes m2{
	from{ margin-left: -1em; }
	to{ opacity:1; }
}

.active.p1-2,
.active.p1-4,
.active.p3-2,
.active.p3-4,
.active.p5-2,
.active.p5-4,
.active.p7-2,
.active.p7-4,
.active.p9-2,
.active.p9-4{
	animation:'m2' 0.5s ease-in-out 0s forwards;
	-ms-animation:m2 0.5s ease-in-out 0s forwards;
	-moz-animation:m2 0.5s ease-in-out 0s forwards;
	-o-animation:'m2' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'m2' 0.5s ease-in-out 0s forwards;
}

@-ms-keyframes m3{
	from{ margin-top: 1em; }
	to{ opacity:1; }
}
@-moz-keyframes m3{
	from{ margin-top: 1em; }
	to{ opacity:1; }
}
@-o-keyframes m3{
	from{ margin-top: 1em; }
	to{ opacity:1; }
}
@-webkit-keyframes m3{
	from{ margin-top: 1em; }
	to{ opacity:1; }
}
@keyframes m3{
	from{ margin-top: 1em; }
	to{ opacity:1; }
}

.active .p0-3{
	animation:'m3' 0.5s ease-in-out 0.8s forwards;
	-ms-animation:m3 0.5s ease-in-out 0.8s forwards;
	-moz-animation:m3 0.5s ease-in-out 0.8s forwards;
	-o-animation:'m3' 0.5s ease-in-out 0.8s forwards;
	-webkit-animation:'m3' 0.5s ease-in-out 0.8s forwards;
}

.active.p2-1,
.active.p2-2,
.active.p2-3,
.active.p2-4,
.active.p4-1,
.active.p4-2,
.active.p4-3,
.active.p4-4,
.active.p6-1,
.active.p6-2,
.active.p6-3,
.active.p6-4,
.active.p8-1,
.active.p8-2,
.active.p8-3,
.active.p8-4,
.active.p10-1,
.active.p10-2,
.active.p10-3,
.active.p10-4{
	animation:'m3' 0.5s ease-in-out 0s forwards;
	-ms-animation:m3 0.5s ease-in-out 0s forwards;
	-moz-animation:m3 0.5s ease-in-out 0s forwards;
	-o-animation:'m3' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'m3' 0.5s ease-in-out 0s forwards;
}

@-ms-keyframes m4{
	from{ margin-left: 1em; }
	to{ opacity:1; }
}
@-moz-keyframes m4{
	from{ margin-left: 1em; }
	to{ opacity:1; }
}
@-o-keyframes m4{
	from{ margin-left: 1em; }
	to{ opacity:1; }
}
@-webkit-keyframes m4{
	from{ margin-left: 1em; }
	to{ opacity:1; }
}
@keyframes m4{
	from{ margin-left: 1em; }
	to{ opacity:1; }
}

.active.p1-1,
.active.p1-3,
.active.p3-1,
.active.p3-3,
.active.p5-1,
.active.p5-3,
.active.p7-1,
.active.p7-3,
.active.p9-1,
.active.p9-3{
	animation:'m4' 0.5s ease-in-out 0s forwards;
	-ms-animation:m4 0.5s ease-in-out 0s forwards;
	-moz-animation:m4 0.5s ease-in-out 0s forwards;
	-o-animation:'m4' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'m4' 0.5s ease-in-out 0s forwards;
}

@-ms-keyframes m5{
	from{ transform: scale(0.8, 0.8); }
	to{ opacity:1; }
}
@-moz-keyframes m5{
	from{ transform: scale(0.8, 0.8); }
	to{ opacity:1; }
}
@-o-keyframes m5{
	from{ transform: scale(0.8, 0.8); }
	to{ opacity:1; }
}
@-webkit-keyframes m5{
	from{ transform: scale(0.8, 0.8); }
	to{ opacity:1; }
}
@keyframes m5{
	from{ transform: scale(0.8, 0.8); }
	to{ opacity:1; }
}

.active .p0-2{
	animation:'m5' 0.5s ease-in-out 0.4s forwards;
	-ms-animation:m5 0.5s ease-in-out 0.4s forwards;
	-moz-animation:m5 0.5s ease-in-out 0.4s forwards;
	-o-animation:'m5' 0.5s ease-in-out 0.4s forwards;
	-webkit-animation:'m5' 0.5s ease-in-out 0.4s forwards;
}

.active .box{
	animation:'m5' 0.5s ease-in-out 0s forwards;
	-ms-animation:m5 0.5s ease-in-out 0s forwards;
	-moz-animation:m5 0.5s ease-in-out 0s forwards;
	-o-animation:'m5' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'m5' 0.5s ease-in-out 0s forwards;
}