@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;
}
.abs1{
	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;
}
i{
	position: absolute;
	width: 100%;
	height: 100%;
	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;
	left: 0px;
	top: 0px;
}


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



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

#tc{
	width:100%;
	height:100%;
	position:fixed;
	z-index:100;
	display:none;
}
#tc .textbg{
	width:100%;
	height:100%;
	background:#000;filter:alpha(opacity=70);-moz-opacity:0.70;opacity:0.70;
}
#tc .text-box{
	width:92%;
	height: 95.2%;
	left:3.87%;
	top:2.4%;
	background-image: url("images/text-box.png");
	background-size: 100% 100%;
}
#tc .close{
	width:8.13%;
	position:absolute;
	left:78.93%;
	top:92.2%;
}
#tc .text{
	width: 84.9%;
	height: 86.66%;
	position: absolute;
	top: 4.4%;
	left: 7.43%;
	overflow-x: hidden;
	overflow-y: visible;
}
iframe{ position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; }


.p01{ width: 88%; height: 1.5%; left: 6.93%; top: 0.83%; background-image: url("images/p01.png"); }
.p02{ width: 65.6%; height: 0.36%; left: 18.53%; top: 2.33%; background-image: url("images/p02.png");}
.p03{ width: 96.4%; height: 1.73%; left: 1.47%; top: 0.67%;}
.p03 i{background-image: url("images/p03.png");}
.p04{ width: 52.8%; height: 3.05%; left: 23.73%; top: 7.93%;}
.p04 i{background-image: url("images/p04.png");}
.p05{ width: 87.87%; height: 2.73%; left: 6%; top: 11.3%; background-image: url("images/p05.jpg"); }
.p06{ width: 75.87%; height: 1.28%; left: 7.47%; top: 14.7%;background-image: url("images/p06.png");}
.p07{ width: 95.87%; height: 3.16%; right: 0%; top: 16.25%; background-image: url("images/p07.png"); background-position: right center;}
.p08{ width: 78%; height: 3.6%; left: 10.93%; top: 19.87%; }
.p08 i{background-image: url("images/p08.png");}
.p09{ width: 75.87%; height: 1.27%; left: 7.47%; top: 27.78%; background-image: url("images/p09.png"); }
.p10{ width: 96.8%; height: 3.16%; left: 0%; top: 29.32%; background-image: url("images/p10.png"); background-position: left center;}
.p11{ width: 85.87%; height: 4.04%; left: 8.8%; top: 33.28%;}
.p11 i{background-image: url("images/p11.png");}
.p12{ width: 76.13%; height: 1.3%; left: 7.2%; top: 43.07%; background-image: url("images/p12.png"); }
.p13{ width: 95.87%; height: 3.16%; right: 0%; top: 44.74%; background-image: url("images/p13.png");background-position: right center;}
.p14{ width: 80.93%; height: 3.18%; left: 10.8%; top: 48.35%;}
.p14 i{background-image: url("images/p14.png");}
.p15{ width: 76.27%; height: 1.32%; left: 7.07%; top: 58.55%; background-image: url("images/p15.png"); }
.p16{ width: 96.67%; height: 3.16%; left: 0%; top: 60.21%; background-image: url("images/p16.png"); background-position: left center;}
.p17{ width: 76.67%; height: 4.04%; left: 10.8%; top: 63.82%;}
.p17 i{background-image: url("images/p17.png");}
.p18{ width: 76.13%; height: 1.29%; left: 7.2%; top: 74.06%; background-image: url("images/p18.png"); }
.p19{ width: 96.67%; height: 3.16%; left: 0%; top: 75.7%; background-image: url("images/p19.png"); background-position: left center;}
.p20{ width: 60.27%; height: 3.18%; left: 10.93%; top: 79.09%; }
.p20 i{background-image: url("images/p20.png");}
.p21{ width: 60.93%; height: 3.62%; left: 19.73%; top: 88.46%; }
.p21 i{background-image: url("images/p21.png");}
.p22{ width: 65.73%; height: 0.28%; left: 14.27%; top: 98.67%; background-image: url("images/p22.png"); }
.p23{ width: 100%; left: 0%; font-size:1em; top: 99.10%; text-align: center;position: absolute;}
.p23 p{ font-size:0.8em; color: #e6eade; line-height: 1.6em;}


.arrow{ width: 10.93%; height: 0.48%;left: 44.53%;}
.arrow i{background-image: url("images/arrow1.png");}
.arrow1{top: 12.7%;}
.arrow2{top: 17.7%;}
.arrow3{top: 30.62%;}
.arrow4{top: 46.24%;}
.arrow5{top: 61.61%;}
.arrow6{top: 77.1%;}




.music{
	position:fixed;
	right:0.5em;
	top:1em;
	width:2em;
	height:2em;
	z-index:9999;
}
.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;}
@-ms-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@-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;
}



@media only screen and (orientation: landscape) {
	#page{ width: 750px; margin: 0px auto;}
	#tc{width: 750px; left: 50%; margin-left: -375px;}
}




@-ms-keyframes dh1 {
   0%{opacity:0;transform:scale(0.3);}
   50%{opacity:1;transform:scale(1.05);}
   70%{opacity:1;transform:scale(0.9);}
   100%{opacity:1;transform:scale(1);}
}
@-moz-keyframes dh1 {
   0%{opacity:0;transform:scale(0.3);}
   50%{opacity:1;transform:scale(1.05);}
   70%{opacity:1;transform:scale(0.9);}
   100%{opacity:1;transform:scale(1);}
}
@-o-keyframes dh1 {
   0%{opacity:0;transform:scale(0.3);}
   50%{opacity:1;transform:scale(1.05);}
   70%{opacity:1;transform:scale(0.9);}
   100%{opacity:1;transform:scale(1);}
}
@-webkit-keyframes dh1 {
   0%{opacity:0;transform:scale(0.3);}
   50%{opacity:1;transform:scale(1.05);}
   70%{opacity:1;transform:scale(0.9);}
   100%{opacity:1;transform:scale(1);}
}
@keyframes dh1 {
   0%{opacity:0;transform:scale(0.3);}
   50%{opacity:1;transform:scale(1.05);}
   70%{opacity:1;transform:scale(0.9);}
   100%{opacity:1;transform:scale(1);}
}
.p01{
  animation: 'dh1' 0.8s ease-in-out 0.2s forwards;
  -ms-animation: dh1 0.8s ease-in-out 0.2s forwards;
  -moz-animation: dh1 0.8s ease-in-out 0.2s forwards;
  -o-animation: 'dh1' 0.8s ease-in-out 0.2s forwards;
  -webkit-animation: 'dh1' 0.8s ease-in-out 0.2s forwards;
}

@-ms-keyframes dh2 {
   0%{margin-top: 2em;}
   100%{margin-top: 0em;opacity: 1;}
}
@-moz-keyframes dh2 {
   0%{margin-top: 2em;}
   100%{margin-top: 0em;opacity: 1;}
}
@-o-keyframes dh2 {
   0%{margin-top: 2em;}
   100%{margin-top: 0em;opacity: 1;}
}
@-webkit-keyframes dh2 {
   0%{margin-top: 2em;}
   100%{margin-top: 0em;opacity: 1;}
}
@keyframes dh2 {
   0%{margin-top: 2em;}
   100%{margin-top: 0em;opacity: 1;}
}
.p02{
  animation: 'dh2' 0.6s linear 1s forwards;
  -ms-animation: dh2 0.6s linear 1s forwards;
  -moz-animation: dh2 0.6s linear 1s forwards;
  -o-animation: 'dh2' 0.6s linear 1s forwards;
  -webkit-animation: 'dh2' 0.6s linear 1s forwards;
}

@-ms-keyframes dh3 {
   0%{margin-top: -2em;}
   100%{margin-top: 0em;opacity: 1;}
}
@-moz-keyframes dh3 {
   0%{margin-top: -2em;}
   100%{margin-top: 0em;opacity: 1;}
}
@-o-keyframes dh3 {
   0%{margin-top: -2em;}
   100%{margin-top: 0em;opacity: 1;}
}
@-webkit-keyframes dh3 {
   0%{margin-top: -2em;}
   100%{margin-top: 0em;opacity: 1;}
}
@keyframes dh3 {
   0%{margin-top: -2em;}
   100%{margin-top: 0em;opacity: 1;}
}
.p03{
  animation: 'dh3' 0.6s linear 1s forwards;
  -ms-animation: dh3 0.6s linear 1s forwards;
  -moz-animation: dh3 0.6s linear 1s forwards;
  -o-animation: 'dh3' 0.6s linear 1s forwards;
  -webkit-animation: 'dh3' 0.6s linear 1s forwards;
}

@-ms-keyframes dh4 {
  from {margin-top: 0em;}	
  25% {margin-top: 0.3em;}
  50% {margin-top: 0em;}
  75% {margin-top: -0.3em;}
  to {margin-top: 0em;}
}
@-moz-keyframes dh4 {
  from {margin-top: 0em;}	
  25% {margin-top: 0.3em;}
  50% {margin-top: 0em;}
  75% {margin-top: -0.3em;}
  to {margin-top: 0em;}
}
@-o-keyframes dh4 {
  from {margin-top: 0em;}	
  25% {margin-top: 0.3em;}
  50% {margin-top: 0em;}
  75% {margin-top: -0.3em;}
  to {margin-top: 0em;}
}
@-webkit-keyframes dh4 {
  from {margin-top: 0em;}	
  25% {margin-top: 0.3em;}
  50% {margin-top: 0em;}
  75% {margin-top: -0.3em;}
  to {margin-top: 0em;}
}
@keyframes dh4 {
  from {margin-top: 0em;}	
  25% {margin-top: 0.3em;}
  50% {margin-top: 0em;}
  75% {margin-top: -0.3em;}
  to {margin-top: 0em;}
}
.p03 i{
	animation:'dh4' 4s linear 1.6s infinite;
	-ms-animation:dh4 4s linear 0s infinite;
	-moz-animation:dh4 4s linear 0s infinite;
	-o-animation:'dh4' 4s linear 0s infinite;
	-webkit-animation:'dh4' 4s linear 0s infinite;
}

@-ms-keyframes dh5 {
   0%{opacity:0.9;transform:scale(0.95);}
   100%{opacity:1;transform:scale(1);}
}
@-moz-keyframes dh5 {
   0%{opacity:0.9;transform:scale(0.95);}
   100%{opacity:1;transform:scale(1);}
}
@-o-keyframes dh5 {
   0%{opacity:0.9;transform:scale(0.95);}
   100%{opacity:1;transform:scale(1);}
}
@-webkit-keyframes dh5 {
   0%{opacity:0.9;transform:scale(0.95);}
   100%{opacity:1;transform:scale(1);}
}
@keyframes dh5 {
   0%{opacity:0.9;transform:scale(0.95);}
   100%{opacity:1;transform:scale(1);}
}
.p04 i,.p08 i,.p11 i,.p14 i,.p17 i,.p20 i,.p21 i{
	animation:'dh5' 1.5s linear 0s infinite alternate;
	-ms-animation:dh5 1.5s linear 0s infinite alternate;
	-moz-animation:dh5 1.5s linear 0s infinite alternate;
	-o-animation:'dh5' 1.5s linear 0s infinite alternate;
	-webkit-animation:'dh5' 1.5s linear 0s infinite alternate;
}

@-ms-keyframes dh6 {
   0%{opacity:1;transform:scale(1);}
   100%{opacity:0.9;transform:scale(0.9);}
}
@-moz-keyframes dh6 {
   0%{opacity:1;transform:scale(1);}
   100%{opacity:0.9;transform:scale(0.9);}
}
@-o-keyframes dh6 {
   0%{opacity:1;transform:scale(1);}
   100%{opacity:0.9;transform:scale(0.9);}
}
@-webkit-keyframes dh6 {
   0%{opacity:1;transform:scale(1);}
   100%{opacity:0.9;transform:scale(0.9);}
}
@keyframes dh6 {
   0%{opacity:0;transform:scale(0.7);}
   100%{opacity:1;transform:scale(1);}
}
.p04.active,.p08.active,.p11.active,.p14.active,.p17.active,.p20.active,.p21.active{
  animation: 'dh6' 0.4s linear 0s forwards;
  -ms-animation: dh6 0.4s linear 0s forwards;
  -moz-animation: dh6 0.4s linear 0s forwards;
  -o-animation: 'dh6' 0.4s linear 0s forwards;
  -webkit-animation: 'dh6' 0.4s linear 0s forwards;
}

@-ms-keyframes dh7 {
   0%{transform:scale(1.2);}
   100%{transform:scale(1);}
}
@-moz-keyframes dh7 {
   0%{transform:scale(1.2);}
   100%{transform:scale(1);}
}
@-o-keyframes dh7 {
   0%{transform:scale(1.2);}
   100%{transform:scale(1);}
}
@-webkit-keyframes dh7 {
   0%{transform:scale(1.2);}
   100%{transform:scale(1);}
}
@keyframes dh7 {
   0%{transform:scale(1.2);}
   100%{transform:scale(1);}
}
.arrow i{
	animation:'dh7' 2s linear 0.2s infinite alternate;
	-ms-animation:dh7 2s linear 0.2s infinite alternate;
	-moz-animation:dh7 2s linear 0.2s infinite alternate;
	-o-animation:'dh7' 2s linear 0.2s infinite alternate;
	-webkit-animation:'dh7' 2s linear 0.2s infinite alternate;
}

@-ms-keyframes dh8 {
   0%{margin-left:-2em;}
   100%{margin-left: 0em;opacity: 1;}
}
@-moz-keyframes dh8 {
   0%{margin-left:-2em;}
   100%{margin-left: 0em;opacity: 1;}
}
@-o-keyframes dh8 {
   0%{margin-left:-2em;}
   100%{margin-left: 0em;opacity: 1;}
}
@-webkit-keyframes dh8 {
   0%{margin-left:-2em;}
   100%{margin-left: 0em;opacity: 1;}
}
@keyframes dh8 {
   0%{margin-left:-2em;}
   100%{margin-left: 0em;opacity: 1;}
}
.p06.active,.p09.active,.p12.active,.p15.active,.p18.active{
  animation: 'dh8' 0.6s linear 0s forwards;
  -ms-animation: dh8 0.6s linear 0s forwards;
  -moz-animation: dh8 0.6s linear 0s forwards;
  -o-animation: 'dh8' 0.6s linear 0s forwards;
  -webkit-animation: 'dh8' 0.6s linear 0s forwards;
}