@charset "utf-8";
body{
	font-family:"Microsoft Yahei","SimSun";
	font-size:16px;
	color:#000;
}

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

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

@media (min-width: 760px) {
	body{ font-size:22px; }
}

a{
	color:#000;
}

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

img{
	display:block;
	max-width: 100%;
	max-height: 100%;
}

a,input,textarea{
	outline: none;
}

table{
	font-size: 1em;
}

p,li{
	overflow: hidden;
}

.photo{
	position: relative;
}

.fw{
	color: #fff;
}

.fw a{
	color: #fff;
}

.fw a:hover{
	color: #dfdfdf !important;
}

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

#page{
	width: 100%;
	position: relative;
	overflow: hidden;
}

@media only screen and (orientation: landscape) {
	#page{ width: 750px; margin: 0px auto;}
}

#page .bg{
	display: inline-block;
	vertical-align: top;
	width: 100%;
}

.logo{
	width: 27%;
	height: 0.272%;
	top: 0.29%;
	left: 6%;
	background-image: url("images/logo.png");
}

.sub{
	width: 26.4%;
	height: 0.208%;
	top: 0.327%;
	left: 67.7%;
	background-image: url("images/sub.png");
}

.p01{ width: 14.8%; height: 0.480%; top: 00.965%; left: 68.1%; background-image: url("images/p01.png"); }

.p02{ width: 51.5%; height: 3.239%; top: 01.134%; left: 22.0%; background-image: url("images/p02.png"); }

.p03{ width: 95.5%; height: 2.427%; top: 04.476%; left: 02.3%; background-image: url("images/p03.png"); }

.p04{ width: 92.6%; height: 1.065%; top: 07.125%; left: 03.6%; background-image: url("images/p04.png"); }

.p05{ width: 32.6%; height: 0.337%; top: 08.541%; left: 33.7%; background-image: url("images/p05.png"); }

.p06{ width: 10.0%; height: 1.446%; top: 09.170%; left: 81.6%; background-image: url("images/p06.png"); }

.p07{ width: 63.9%; height: 1.441%; top: 08.714%; left: 00.0%; background-image: url("images/p07.png"); }

.p08{ width: 86.4%; height: 1.818%; top: 10.412%; left: 00.0%; background-image: url("images/p08.png"); }

.p09{ width: 60.4%; height: 0.694%; top: 12.447%; left: 19.8%; background-image: url("images/p09.png"); }

.p10{ width: 10.0%; height: 1.446%; top: 13.457%; left: 08.0%; background-image: url("images/p10.png"); }

.p11{ width: 80.3%; height: 4.813%; top: 14.294%; left: 00.0%; background-image: url("images/p11.png"); }

.p12{ width: 29.8%; height: 1.852%; top: 15.478%; left: 70.2%; background-image: url("images/p12.png"); }

.p13{ width: 91.1%; height: 1.109%; top: 18.780%; left: 04.5%; background-image: url("images/p13.png"); }

.p14{ width: 10.0%; height: 2.347%; top: 20.186%; left: 84.7%; background-image: url("images/p14.png"); }

.p15{ width: 71.6%; height: 0.629%; top: 24.662%; left: 14.2%; background-image: url("images/p15.png"); }

.p16{ width: 100%; height: 4.521%; top: 26.603%; left: 00.0%; background-image: url("images/p16.png"); }

.p17{ width: 32.2%; height: 0.946%; top: 29.777%; left: 50.0%; background-image: url("images/p17.png"); }

.p18{ width: 87.2%; height: 1.709%; top: 30.465%; left: 06.4%; background-image: url("images/p18.png"); }

.p19{ width: 92.6%; height: 1.065%; top: 31.931%; left: 03.6%; background-image: url("images/p19.png"); }

.p20{ width: 71.5%; height: 1.105%; top: 33.243%; left: 14.3%; background-image: url("images/p20.png"); }

.p21{ width: 60.0%; height: 0.614%; top: 36.011%; left: 21.4%; background-image: url("images/p21.png"); }

.p22{ width: 79.6%; height: 3.016%; top: 36.822%; left: 10.3%; background-image: url("images/p22.png"); }

.p23{ width: 38.0%; height: 0.758%; top: 42.690%; left: 31.0%; background-image: url("images/p23.png"); }

.p24{ width: 67.8%; height: 3.357%; top: 44.021%; left: 15.2%; background-image: url("images/p24.png"); }

.p25{ width: 65.1%; height: 0.431%; top: 47.606%; left: 17.5%; background-image: url("images/p25.png"); }

.p26{ width: 92.6%; height: 1.065%; top: 50.572%; left: 03.6%; background-image: url("images/p26.png"); }

.p27{ width: 72.2%; height: 0.634%; top: 51.785%; left: 13.9%; background-image: url("images/p27.png"); }

.p28{ width: 91.1%; height: 1.213%; top: 52.795%; left: 04.5%; background-image: url("images/p28.png"); }

.p29{ width: 74.3%; height: 1.213%; top: 54.256%; left: 12.9%; background-image: url("images/p29.png"); }

.p30{ width: 88.3%; height: 0.248%; top: 55.751%; left: 05.9%; background-image: url("images/p30.png"); }

.p31{ width: 81.8%; height: 0.258%; top: 56.548%; left: 09.1%; background-image: url("images/p31.png"); }

.p32{ width: 10.0%; height: 0.996%; top: 57.821%; left: 08.0%; background-image: url("images/p32.png"); }

.p33{ width: 60.3%; height: 0.644%; top: 58.697%; left: 25.6%; background-image: url("images/p33.png"); }

.p34{ width: 10.0%; height: 1.446%; top: 61.054%; left: 81.6%; background-image: url("images/p34.png"); }

.p35{ width: 78.6%; height: 2.124%; top: 61.341%; left: 00.3%; background-image: url("images/p35.png"); }

.p36{ width: 10.0%; height: 1.446%; top: 64.128%; left: 08.5%; background-image: url("images/p36.png"); }

.p37{ width: 41.0%; height: 1.144%; top: 64.203%; left: 59.0%; background-image: url("images/p37.png"); }

.p38{ width: 69.2%; height: 0.604%; top: 66.663%; left: 15.3%; background-image: url("images/p38.png"); }

.p39{ width: 10.0%; height: 0.674%; top: 68.258%; left: 80.9%; background-image: url("images/p39.png"); }

.p40{ width: 36.6%; height: 2.006%; top: 67.584%; left: 10.3%; background-image: url("images/p40.png"); }

.p41{ width: 10.0%; height: 1.446%; top: 70.263%; left: 08.5%; background-image: url("images/p41.png"); }

.p42{ width: 84.0%; height: 3.110%; top: 69.614%; left: 25.8%; background-image: url("images/p42.png"); }

.p43{ width: 92.6%; height: 1.065%; top: 73.036%; left: 03.6%; background-image: url("images/p43.png"); }

.p44{ width: 52.3%; height: 3.575%; top: 74.506%; left: 23.6%; background-image: url("images/p44.png"); }

.p45{ width: 44.3%; height: 0.416%; top: 78.784%; left: 27.9%; background-image: url("images/p45.png"); }

.p46{ width: 75.2%; height: 0.416%; top: 82.418%; left: 12.4%; background-image: url("images/p46.png"); }

.p47{ width: 92.6%; height: 1.065%; top: 83.646%; left: 03.6%; background-image: url("images/p47.png"); }

.p48{ width: 72.3%; height: 0.441%; top: 84.909%; left: 12.5%; background-image: url("images/p48.png"); }

.p49{ width: 100%; height: 5.937%; top: 85.458%; left: 00.0%; background-image: url("images/p49.png"); }

.p50{ width: 100%; height: 3.635%; top: 91.365%; left: 00.0%; background-image: url("images/p50.png"); }

.p51{ width: 91.6%; height: 2.724%; top: 95.564%; left: 04.2%; background-image: url("images/p51.png"); opacity: 1 !important; }

.btn{
	position: absolute;
	width: 26.4%;
	height: 0.985%;
	z-index: 9;
}

.btn i{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: url("images/btn.png");
	background-size: 100% 100%;
}

.btn01{ left: 26%; top: 10.81%; }

.btn02{ left: 36%; top: 40.94%; }

.btn03{ left: 36%; top: 58.54%; }

.btn04{ left: 22%; top: 61.35%; }

.btn05{ left: 64%; top: 64.36%; }

.btn06{ left: 17%; top: 68.22%; }

.btn07{ left: 65%; top: 70.74%; }

.btn08{ left: 62%; top: 78.49%; }

.btn09{ left: 76%; top: 82.13%; }

.btn10{ left: 76%; top: 90.25%; }

.drop{
	z-index: 99;
	display: none;
	opacity: 1 !important;
}

#drop01{ width: 89.5%; height: 6.055%; top: 08.248%; left: 5.3%; background-image: url("images/drop01.png"); }

#drop02{ width: 89.5%; height: 7.462%; top: 38.312%; left: 5.3%; background-image: url("images/drop02.png"); }

#drop03{ width: 83.1%; height: 2.525%; top: 57.023%; left: 8.5%; background-image: url("images/drop03.png"); }

#drop04{ width: 83.1%; height: 2.525%; top: 60.489%; left: 8.5%; background-image: url("images/drop04.png"); }

#drop05{ width: 83.1%; height: 2.525%; top: 63.568%; left: 8.5%; background-image: url("images/drop05.png"); }

#drop06{ width: 83.1%; height: 2.525%; top: 66.777%; left: 8.5%; background-image: url("images/drop06.png"); }

#drop07{ width: 83.1%; height: 2.525%; top: 69.850%; left: 8.5%; background-image: url("images/drop07.png"); }

#drop08{ width: 89.5%; height: 4.238%; top: 75.783%; left: 5.3%; background-image: url("images/drop08.png"); }

#drop09{ width: 89.5%; height: 5.541%; top: 80.061%; left: 5.3%; background-image: url("images/drop09.png"); }

#drop10{ width: 89.5%; height: 3.550%; top: 89.260%; left: 5.3%; background-image: url("images/drop10.png"); }


#drop01 .close,
#drop02 .close,
#drop08 .close,
#drop09 .close,
#drop10 .close{
	position: absolute;
	width: 15.2%;
	left: 42.4%;
	bottom: 0%;
	cursor: pointer;
}

#drop01 .close{ height: 8.3%; }

#drop02 .close{ height: 6.7%; }

#drop08 .close{ height: 11.9%; }

#drop09 .close{ height: 9.1%; }

#drop10 .close{ height: 14.2%; }

#drop03 .close,
#drop04 .close,
#drop05 .close,
#drop06 .close,
#drop07 .close{
	position: absolute;
	width: 16.4%;
	height: 20%;
	right: 4.8%;
	top: 9.8%;
	cursor: pointer;
}


@keyframes btn{
	from{  }
	50%{ transform: scale(0.9,0.9); opacity: 0.8; }
	to{ }
}
.btn i{
	animation:'btn' 2s linear 0s infinite;
	-ms-animation:btn 2s linear 0s infinite;
	-moz-animation:btn 2s linear 0s infinite;
	-o-animation:'btn' 2s linear 0s infinite;
	-webkit-animation:'btn' 2s linear 0s infinite;
}



@keyframes left1{
	from{ margin-left: -1em; }
	to{ opacity: 1; }
}

@keyframes right1{
	from{ margin-left: 1em; }
	to{ opacity: 1; }
}

@keyframes top1{
	from{ margin-top: -1.5em; }
	to{ opacity: 1; }
}

@keyframes bottom1{
	from{ margin-top: 1.5em; }
	to{ opacity: 1; }
}

@keyframes middle1{
	from{ transform: scale(0.8,0.8); }
	to{ opacity: 1; }
}

@keyframes middle2{
	from{ }
	to{ opacity: 1; }
}

.logo{
	animation:'left1' 0.5s ease-in-out 0s forwards;
	-ms-animation:left1 0.5s ease-in-out 0s forwards;
	-moz-animation:left1 0.5s ease-in-out 0s forwards;
	-o-animation:'left1' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'left1' 0.5s ease-in-out 0s forwards;
}

.sub{
	animation:'right1' 0.5s ease-in-out 0s forwards;
	-ms-animation:right1 0.5s ease-in-out 0s forwards;
	-moz-animation:right1 0.5s ease-in-out 0s forwards;
	-o-animation:'right1' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'right1' 0.5s ease-in-out 0s forwards;
}

.p01{
	animation:'middle1' 0.5s ease-in-out 0.8s forwards;
	-ms-animation:middle1 0.5s ease-in-out 0.8s forwards;
	-moz-animation:middle1 0.5s ease-in-out 0.8s forwards;
	-o-animation:'middle1' 0.5s ease-in-out 0.8s forwards;
	-webkit-animation:'middle1' 0.5s ease-in-out 0.8s forwards;
}

.p02{
	animation:'middle1' 0.5s ease-in-out 0.4s forwards;
	-ms-animation:middle1 0.5s ease-in-out 0.4s forwards;
	-moz-animation:middle1 0.5s ease-in-out 0.4s forwards;
	-o-animation:'middle1' 0.5s ease-in-out 0.4s forwards;
	-webkit-animation:'middle1' 0.5s ease-in-out 0.4s forwards;
}

.active.p03,
.active.p04,
.active.p06,
.active.p10,
.active.p14,
.active.p19,
.active.p21,
.active.p24,
.active.p26,
.active.p32,
.active.p34,
.active.p36,
.active.p39,
.active.p41,
.active.p43,
.active.p45,
.active.p46,
.active.p47{
	animation:'bottom1' 0.5s ease-in-out 0s forwards;
	-ms-animation:bottom1 0.5s ease-in-out 0s forwards;
	-moz-animation:bottom1 0.5s ease-in-out 0s forwards;
	-o-animation:'bottom1' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'bottom1' 0.5s ease-in-out 0s forwards;
}

.active.p05,
.active.p09,
.active.p13,
.active.p15,
.active.p18,
.active.p20,
.active.p22,
.active.p23,
.active.p25,
.active.p27,
.active.p29,
.active.p31,
.active.p38,
.active.p44,
.active.p48,
.active.p50{
	animation:'right1' 0.5s ease-in-out 0s forwards;
	-ms-animation:right1 0.5s ease-in-out 0s forwards;
	-moz-animation:right1 0.5s ease-in-out 0s forwards;
	-o-animation:'right1' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'right1' 0.5s ease-in-out 0s forwards;
}

.active.p07,
.active.p08,
.active.p28,
.active.p30,
.active.p49{
	animation:'left1' 0.5s ease-in-out 0s forwards;
	-ms-animation:left1 0.5s ease-in-out 0s forwards;
	-moz-animation:left1 0.5s ease-in-out 0s forwards;
	-o-animation:'left1' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'left1' 0.5s ease-in-out 0s forwards;
}

.active.p11,
.active.p16,
.active.p33,
.active.p35,
.active.p37,
.active.p40,
.active.p42,
.active.btn{
	animation:'middle2' 0.5s ease-in-out 0s forwards;
	-ms-animation:middle2 0.5s ease-in-out 0s forwards;
	-moz-animation:middle2 0.5s ease-in-out 0s forwards;
	-o-animation:'middle2' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'middle2' 0.5s ease-in-out 0s forwards;
}

.active.p12,
.active.p17{
	animation:'top1' 0.5s ease-in-out 0s forwards;
	-ms-animation:top1 0.5s ease-in-out 0s forwards;
	-moz-animation:top1 0.5s ease-in-out 0s forwards;
	-o-animation:'top1' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'top1' 0.5s ease-in-out 0s forwards;
}



.music{
	position: fixed;
	right: 1em;
	bottom: 1em;
	width: 2.2em;
	height: 2.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;
}