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

@media only screen and (max-height: 938px) { body{ font-size: 15px !important; } }
@media only screen and (max-height: 875px) { body{ font-size: 14px !important; } }
@media only screen and (max-height: 813px) { body{ font-size: 13px !important; } }
@media only screen and (max-height: 750px) { body{ font-size: 12px !important; } }
@media only screen and (max-height: 688px) { body{ font-size: 11px !important; } }
@media only screen and (max-height: 625px) { body{ font-size: 10px !important; } }

a{
	color:#c00;
}

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

.fw{
	color: #fff;
}

.fw a{
	color: #fff;
}

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

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

h1,h2,h3,h4,h5{
	font-family:"Microsoft Yahei","SimHei";
	overflow:hidden;
}

p,li{
	overflow:hidden;
}

table{
	font-size: 1em;
}

.photo{
	position: relative;
	overflow: hidden;
}

.photo img{
	width: 100%;
	height: 100%;
}

.photo p{
	position: absolute;
	left: 0px;
	bottom : 0px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.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: 1;
}

.abs0{
	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;
}

.abs i,
.abs0 i{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	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;
}

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

#music{
	position: absolute;
	width: 4.3%;
	height: 7.3%;
	right: 3.4%;
	top: 5.7%;
	cursor: pointer;
	opacity: 0;
	z-index: 9;
	transform: translateZ(9em);
}

#music i{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

#music .m1{
	background-image:url("images/music1.png");
}

#music .m2{
	background-image:url("images/music2.png");
}

@keyframes music1{
	from{  }
	to{ transform: rotate(360deg); }
}
#music.on .m1{
	animation:'music1' 1.5s linear 0s infinite;
	-ms-animation:music1 1.5s linear 0s infinite;
	-moz-animation:music1 1.5s linear 0s infinite;
	-o-animation:'music1' 1.5s linear 0s infinite;
	-webkit-animation:'music1' 1.5s linear 0s infinite;
}

#logo{
	width: 5.6%;
	height: 10%;
	left: 3.4%;
	top: 5.7%;
	background-image: url("images/logo.png");
	z-index: 9;
	transform: translateZ(9em);
}

.layout{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.layout.show{
	top: 0%;
}

#layout1{
	background-image: url("images/bg1.jpg");
}

#layout2{
	background-image: url("images/bg2.jpg");
}

#layout3{
	background-image: url("images/bg3.jpg");
	background-size: auto 100%;
}

#topic1{
	width: 52.2%;
	height: 22.3%;
	left: 24%;
	top: 8.9%;
	background-image: url("images/topic1.png");
}

#fly1{
	width: 5.8%;
	height: 3.6%;
	left: 1.9%;
	top: 37.5%;
}

#fly1 i{
	background-image: url("images/fly1.png");
}

#fly2{
	width: 7.2%;
	height: 4.4%;
	left: 8.7%;
	top: 32%;
}

#fly2 i{
	background-image: url("images/fly2.png");
}

#fly3{
	width: 3.7%;
	height: 1.9%;
	left: 19.5%;
	top: 41.7%;
}

#fly3 i{
	background-image: url("images/fly3.png");
}

@keyframes fly-shake{
	from{  }
	50%{ transform: translateY(0.5em); }
	to{  }
}
#fly1 i,
#fly3 i{
	animation:'fly-shake' 3s linear 0s infinite;
	-ms-animation:fly-shake 3s linear 0s infinite;
	-moz-animation:fly-shake 3s linear 0s infinite;
	-o-animation:'fly-shake' 3s linear 0s infinite;
	-webkit-animation:'fly-shake' 3s linear 0s infinite;
}
#fly2 i{
	animation:'fly-shake' 3s linear -1.5s infinite;
	-ms-animation:fly-shake 3s linear -1.5s infinite;
	-moz-animation:fly-shake 3s linear -1.5s infinite;
	-o-animation:'fly-shake' 3s linear -1.5s infinite;
	-webkit-animation:'fly-shake' 3s linear -1.5s infinite;
}

#btn1{
	width: 13.6%;
	height: 11%;
	left: 40%;
	top: 30%;
	cursor: pointer;
}

#btn1 i{
	background-image: url("images/btn1.png");
}

#btn2{
	width: 13.6%;
	height: 11%;
	left: 43.2%;
	top: 30%;
	cursor: pointer;
}

#btn2 i{
	background-image: url("images/btn2.png");
}

@keyframes btn-shake{
	from{  }
	50%{ transform: scale(1.05,1.05); }
	to{  }
}
#btn1 i,
#btn2 i{
	animation:'btn-shake' 1.5s linear 0s infinite;
	-ms-animation:btn-shake 1.5s linear 0s infinite;
	-moz-animation:btn-shake 1.5s linear 0s infinite;
	-o-animation:'btn-shake' 1.5s linear 0s infinite;
	-webkit-animation:'btn-shake' 1.5s linear 0s infinite;
}

#infor{
	width: 67.6%;
	height: 28%;
	left: 16.2%;
	top: 10%;
	background-image: url("images/infor.png");
}

#topic3{
	width: 54%;
	height: 4.9%;
	left: 23%;
	top: 10.7%;
	background-image: url("images/topic3.png");
}

#map{
	width: 125.9vh;
	height: 83.3%;
	left: 50%;
	bottom: 0px;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}

#map .link{
	width: 3.5%;
	height: 17.8%;
	cursor: pointer;
}
#link02{ left: 53.8%; bottom: 75%; }
#link05{ left: 12.8%; bottom: 63.6%; }
#link06{ left: -5%; bottom: 36.2%; }
#link07{ left: 49%; bottom: 23.8%; }
#link08{ left: 80%; bottom: 12.1%; }
#link09{ left: 86.6%; bottom: 60%; }

#map .link span{
	position: absolute;
	width: 80.8%;
	height: 16.3%;
	left: 9.6%;
	bottom: 0px;
	background: url("images/circle.png") no-repeat center center;
	background-size: contain;
}


@keyframes link-shake1{
	from{  }
	50%{ transform: scale(1.2); }
	to{  }
}

#map .link span{
	animation:'link-shake1' 2s linear 0s infinite;
	-ms-animation:link-shake1 2s linear 0s infinite;
	-moz-animation:link-shake1 2s linear 0s infinite;
	-o-animation:'link-shake1' 2s linear 0s infinite;
	-webkit-animation:'link-shake1' 2s linear 0s infinite;
}

#map .link label{
	position: absolute;
	width: 100%;
	height: 91.3%;
	left: 0px;
	top: 0px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	cursor: pointer;
}


#link02 label{ background-image: url("images/link02.png"); }

#link05 label{ background-image: url("images/link05.png"); }
#link06 label{ background-image: url("images/link06.png"); }
#link07 label{ background-image: url("images/link07.png"); }
#link08 label{ background-image: url("images/link08.png"); }
#link09 label{ background-image: url("images/link09.png"); }


@keyframes link-shake2{
	from{  }
	50%{ transform: translateY(-0.5em); }
	to{  }
}
#map .link label{
	animation:'link-shake2' 2s linear 0s infinite;
	-ms-animation:link-shake2 2s linear 0s infinite;
	-moz-animation:link-shake2 2s linear 0s infinite;
	-o-animation:'link-shake2' 2s linear 0s infinite;
	-webkit-animation:'link-shake2' 2s linear 0s infinite;
}

.drop{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background:rgba(0,0,0,0.8);
	z-index: 999;
	transform: translateZ(999em);
	display: none;
}

.drop.current{
	display: block;
}

.drop .close{
	position: absolute;
	right: 0px;
	top: 0px;
	width: 8.8%;
	height: 14%;
	background: url("images/close.png") no-repeat right top;
	background-size: contain;
	cursor: pointer;
}

.drop .show{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 75.4%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.drop .show img{
	width: 100%;
}

.drop .show .btn-prev,
.drop .show .btn-next{
	position: absolute;
	width: 10.7%;
	height: 6%;
	bottom: 14.3%;
	cursor: pointer;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

.drop .show .btn-prev{
	right: 18.7%;
	background-image: url("images/btn-prev.png");
}

.drop .show .btn-next{
	right: 7.1%;
	background-image: url("images/btn-next.png");
}

@keyframes show1{
	from{ opacity: 0; top: 100%; }
	0.01%{ opacity: 0; top: 0%; }
	to{ opacity: 1; top: 0%; }
}
.layout.show{
	animation:'show1' 0.5s ease-in-out 0s forwards;
	-ms-animation:show1 0.5s ease-in-out 0s forwards;
	-moz-animation:show1 0.5s ease-in-out 0s forwards;
	-o-animation:'show1' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'show1' 0.5s ease-in-out 0s forwards;
}

@keyframes hide1{
	from{ opacity: 1; top: 0%; }
	99.99%{ opacity: 0; top: 100%; }
	to{ opacity: 0; top: 100%; }
}
.layout.hide1{
	animation:'hide1' 0.5s ease-in-out 0s forwards;
	-ms-animation:hide1 0.5s ease-in-out 0s forwards;
	-moz-animation:hide1 0.5s ease-in-out 0s forwards;
	-o-animation:'hide1' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'hide1' 0.5s ease-in-out 0s forwards;
}


@keyframes logo{
	from{  }
	to{ opacity: 1; }
}
#logo,
#music{
	animation:'logo' 0.5s ease-in-out 0.2s forwards;
	-ms-animation:logo 0.5s ease-in-out 0.2s forwards;
	-moz-animation:logo 0.5s ease-in-out 0.2s forwards;
	-o-animation:'logo' 0.5s ease-in-out 0.2s forwards;
	-webkit-animation:'logo' 0.5s ease-in-out 0.2s forwards;
}
.show #fly1,
.show #fly2,
.show #fly3,
.show #btn1{
	animation:'logo' 0.5s ease-in-out 1.0s forwards;
	-ms-animation:logo 0.5s ease-in-out 1.0s forwards;
	-moz-animation:logo 0.5s ease-in-out 1.0s forwards;
	-o-animation:'logo' 0.5s ease-in-out 1.0s forwards;
	-webkit-animation:'logo' 0.5s ease-in-out 1.0s forwards;
}
.show #btn2,
.show #map{
	animation:'logo' 0.5s ease-in-out 0.8s forwards;
	-ms-animation:logo 0.5s ease-in-out 0.8s forwards;
	-moz-animation:logo 0.5s ease-in-out 0.8s forwards;
	-o-animation:'logo' 0.5s ease-in-out 0.8s forwards;
	-webkit-animation:'logo' 0.5s ease-in-out 0.8s forwards;
}

@keyframes topic1{
	from{ transform: translateY(-1em); }
	to{ opacity: 1; }
}
.show #topic1{
	animation:'topic1' 0.5s ease-in-out 0.6s forwards;
	-ms-animation:topic1 0.5s ease-in-out 0.6s forwards;
	-moz-animation:topic1 0.5s ease-in-out 0.6s forwards;
	-o-animation:'topic1' 0.5s ease-in-out 0.6s forwards;
	-webkit-animation:'topic1' 0.5s ease-in-out 0.6s forwards;
}
.show #topic3{
	animation:'topic1' 0.5s ease-in-out 0.4s forwards;
	-ms-animation:topic1 0.5s ease-in-out 0.4s forwards;
	-moz-animation:topic1 0.5s ease-in-out 0.4s forwards;
	-o-animation:'topic1' 0.5s ease-in-out 0.4s forwards;
	-webkit-animation:'topic1' 0.5s ease-in-out 0.4s forwards;
}

@keyframes topic2{
	from{ transform: translateY(1em); }
	to{ opacity: 1; }
}
.show #topic2{
	animation:'topic2' 0.5s ease-in-out 0.6s forwards;
	-ms-animation:topic2 0.5s ease-in-out 0.6s forwards;
	-moz-animation:topic2 0.5s ease-in-out 0.6s forwards;
	-o-animation:'topic2' 0.5s ease-in-out 0.6s forwards;
	-webkit-animation:'topic2' 0.5s ease-in-out 0.6s forwards;
}
.show #infor{
	animation:'topic2' 0.5s ease-in-out 0.4s forwards;
	-ms-animation:topic2 0.5s ease-in-out 0.4s forwards;
	-moz-animation:topic2 0.5s ease-in-out 0.4s forwards;
	-o-animation:'topic2' 0.5s ease-in-out 0.4s forwards;
	-webkit-animation:'topic2' 0.5s ease-in-out 0.4s forwards;
}

@keyframes hide-abs{
	from{ opacity: 1; }
	to{ opacity: 0; }
}
.hide #topic1,
.hide #topic2,
.hide #topic3,
.hide #btn1,
.hide #btn2,
.hide #infor,
.hide #map{
	animation:'hide-abs' 0.5s ease-in-out 0s forwards;
	-ms-animation:hide-abs 0.5s ease-in-out 0s forwards;
	-moz-animation:hide-abs 0.5s ease-in-out 0s forwards;
	-o-animation:'hide-abs' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'hide-abs' 0.5s ease-in-out 0s forwards;
}