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

body{
	-webkit-text-size-adjust: 100% !important;	/* iOS禁止微信改变字号 */
}

@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: #c00 !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,.abs span,.abs0 span{
	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;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
}

#music-btn{
	width: 3em;
	height: 3em;
	right: 1.5%;
	top: 3%;
	cursor: pointer;
	outline: none;
	background-image: url(images/music.png);
	z-index: 850;
}

#music-btn.bg2{
	background-image: url(images/music2.png);
	transition: all 0.5s;
	transition-delay: 16s;
}

#music-btn.bg2-2{
	background-image: url(images/music2.png);
	transition: all 0.5s;
}

#music-btn.bg3{
	transition: all 3.0s;
	transition-delay: 0.5s;
}

@-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-btn.on{
	animation:'music' 2.0s linear 0s infinite;
	-ms-animation:music 2.0s linear 0s infinite;
	-moz-animation:music 2.0s linear 0s infinite;
	-o-animation:'music' 2.0s linear 0s infinite;
	-webkit-animation:'music' 2.0s linear 0s infinite;
}

#jump-btn{
	width: 6.7em;
	height: 3em;
	left: 1.5%;
	top: 3%;
	background-image: url("images/jump-btn.png");
	transition: transform 0.2s;
	cursor: pointer;
	z-index: 1000;
}

#jump-btn:hover{
	transform: scale(1.05);
}

#jump-btn.off{
	transform: scale(0);
	opacity: 0;
}

@keyframes jump-hide{
	from{ transform: scale(1); opacity: 1; }
	to{ transform: scale(0); opacity: 0; }
}
#jump-btn.hide{
	animation:'jump-hide' 0.5s ease-in-out 15s forwards;
	-ms-animation:jump-hide 0.5s ease-in-out 15s forwards;
	-moz-animation:jump-hide 0.5s ease-in-out 15s forwards;
	-o-animation:'jump-hide' 0.5s ease-in-out 15s forwards;
	-webkit-animation:'jump-hide' 0.5s ease-in-out 15s forwards;
}

#box{
	position: relative;
	height: 100%;
	overflow: hidden;
	background: #000;
}

#first-page,
#preface-page,
#home-page,
#cloud-page,
#map-page,
#end-page{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	overflow: hidden;
	background-color: #000;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

#first-page{ z-index: 900; }
#preface-page{ z-index: 800; }
#cloud-page{ z-index: 700; }
#home-page{ z-index: 600; }
#map-page{ z-index: 500; }
#end-page{ z-index: 400; }

#fp-bg,#fp-bg li,#fp-cover{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#fp-bg{ background-image: url("images/a-loading.jpg"); }

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

#fp-bg li{ opacity: 0; }

#fp-bg1{ background-image: url("images/fp-bg1.jpg"); }
#fp-bg2{ background-image: url("images/fp-bg2.jpg"); }
#fp-bg3{ background-image: url("images/fp-bg3.jpg"); }
#fp-bg4{ background-image: url("images/fp-bg4.jpg"); }
#fp-bg5{ background-image: url("images/fp-bg5.jpg"); }
#fp-bg6{ background-image: url("images/fp-bg6.jpg"); }
#fp-bg7{ background-image: url("images/fp-bg7.jpg"); }
#fp-bg8{ background-image: url("images/fp-bg8.jpg"); }
#fp-bg9{ background-image: url("images/fp-bg9.jpg"); }
#fp-bg10{ background-image: url("images/fp-bg10.jpg"); }

@keyframes fp-bg1{
	from{ opacity: 1; }
	9%{ opacity: 1; transform: scale(1.1); }
	9.5%{ opacity: 0; }
	99.5%{ opacity: 0; transform: scale(1); }
	to{ opacity: 1; }
}
#fp-bg1{
	-webkit-backface-visibility: hidden;
	animation:'fp-bg1' 50.0s linear 0s infinite;
	-ms-animation:fp-bg1 50.0s linear 0s infinite;
	-moz-animation:fp-bg1 50.0s linear 0s infinite;
	-o-animation:'fp-bg1' 50.0s linear 0s infinite;
	-webkit-animation:'fp-bg1' 50.0s linear 0s infinite;
}

@keyframes fp-bg2{
	from{ opacity: 0; }
	9%{ opacity: 0; transform: scale(1); }
	9.5%{ opacity: 1; }
	19.5%{ opacity: 1; }
	20%{ opacity: 0; transform: scale(1.1); }
	to{ opacity: 0; }
}
#fp-bg2{
	-webkit-backface-visibility: hidden;
	animation:'fp-bg2' 50.0s linear 0s infinite;
	-ms-animation:fp-bg2 50.0s linear 0s infinite;
	-moz-animation:fp-bg2 50.0s linear 0s infinite;
	-o-animation:'fp-bg2' 50.0s linear 0s infinite;
	-webkit-animation:'fp-bg2' 50.0s linear 0s infinite;
}

@keyframes fp-bg3{
	from{ opacity: 0; }
	19%{ opacity: 0; transform: scale(1); }
	19.5%{ opacity: 1; }
	29.5%{ opacity: 1; }
	30%{ opacity: 0; transform: scale(1.1); }
	to{ opacity: 0; }
}
#fp-bg3{
	-webkit-backface-visibility: hidden;
	animation:'fp-bg3' 50.0s linear 0s infinite;
	-ms-animation:fp-bg3 50.0s linear 0s infinite;
	-moz-animation:fp-bg3 50.0s linear 0s infinite;
	-o-animation:'fp-bg3' 50.0s linear 0s infinite;
	-webkit-animation:'fp-bg3' 50.0s linear 0s infinite;
}

@keyframes fp-bg4{
	from{ opacity: 0; }
	29%{ opacity: 0; transform: scale(1); }
	29.5%{ opacity: 1; }
	39.5%{ opacity: 1; }
	40%{ opacity: 0; transform: scale(1.1); }
	to{ opacity: 0; }
}
#fp-bg4{
	-webkit-backface-visibility: hidden;
	animation:'fp-bg4' 50.0s linear 0s infinite;
	-ms-animation:fp-bg4 50.0s linear 0s infinite;
	-moz-animation:fp-bg4 50.0s linear 0s infinite;
	-o-animation:'fp-bg4' 50.0s linear 0s infinite;
	-webkit-animation:'fp-bg4' 50.0s linear 0s infinite;
}

@keyframes fp-bg5{
	from{ opacity: 0; }
	39%{ opacity: 0; transform: scale(1); }
	39.5%{ opacity: 1; }
	49.0%{ opacity: 1; }
	50%{ opacity: 0; transform: scale(1.1); }
	to{ opacity: 0; }
}

#fp-bg5{
	-webkit-backface-visibility: hidden;
	animation:'fp-bg5' 50.0s linear 0s infinite;
	-ms-animation:fp-bg5 50.0s linear 0s infinite;
	-moz-animation:fp-bg5 50.0s linear 0s infinite;
	-o-animation:'fp-bg5' 50.0s linear 0s infinite;
	-webkit-animation:'fp-bg5' 50.0s linear 0s infinite;
}

@keyframes fp-bg6{
	from{ opacity: 0; }
	49%{ opacity: 0; transform: scale(1); }
	49.5%{ opacity: 1; }
	59.5%{ opacity: 1; }
	60%{ opacity: 0; transform: scale(1.1); }
	to{ opacity: 0; }
}
#fp-bg6{
	-webkit-backface-visibility: hidden;
	animation:'fp-bg6' 50.0s linear 0s infinite;
	-ms-animation:fp-bg6 50.0s linear 0s infinite;
	-moz-animation:fp-bg6 50.0s linear 0s infinite;
	-o-animation:'fp-bg6' 50.0s linear 0s infinite;
	-webkit-animation:'fp-bg6' 50.0s linear 0s infinite;
}

@keyframes fp-bg7{
	from{ opacity: 0; }
	59%{ opacity: 0; transform: scale(1); }
	59.5%{ opacity: 1; }
	69.5%{ opacity: 1; }
	70%{ opacity: 0; transform: scale(1.1); }
	to{ opacity: 0; }
}
#fp-bg7{
	-webkit-backface-visibility: hidden;
	animation:'fp-bg7' 50.0s linear 0s infinite;
	-ms-animation:fp-bg7 50.0s linear 0s infinite;
	-moz-animation:fp-bg7 50.0s linear 0s infinite;
	-o-animation:'fp-bg7' 50.0s linear 0s infinite;
	-webkit-animation:'fp-bg7' 50.0s linear 0s infinite;
}

@keyframes fp-bg8{
	from{ opacity: 0; }
	69%{ opacity: 0; transform: scale(1); }
	69.5%{ opacity: 1; }
	79.5%{ opacity: 1; }
	80%{ opacity: 0; transform: scale(1.1); }
	to{ opacity: 0; }
}
#fp-bg8{
	-webkit-backface-visibility: hidden;
	animation:'fp-bg8' 50.0s linear 0s infinite;
	-ms-animation:fp-bg8 50.0s linear 0s infinite;
	-moz-animation:fp-bg8 50.0s linear 0s infinite;
	-o-animation:'fp-bg8' 50.0s linear 0s infinite;
	-webkit-animation:'fp-bg8' 50.0s linear 0s infinite;
}

@keyframes fp-bg9{
	from{ opacity: 0; }
	79%{ opacity: 0; transform: scale(1); }
	79.5%{ opacity: 1; }
	89.5%{ opacity: 1; }
	90%{ opacity: 0; transform: scale(1.1); }
	to{ opacity: 0; }
}
#fp-bg9{
	-webkit-backface-visibility: hidden;
	animation:'fp-bg9' 50.0s linear 0s infinite;
	-ms-animation:fp-bg9 50.0s linear 0s infinite;
	-moz-animation:fp-bg9 50.0s linear 0s infinite;
	-o-animation:'fp-bg9' 50.0s linear 0s infinite;
	-webkit-animation:'fp-bg9' 50.0s linear 0s infinite;
}

@keyframes fp-bg10{
	from{ opacity: 0; }
	89%{ opacity: 0; transform: scale(1); }
	89.5%{ opacity: 1; }
	99.5%{ opacity: 1; }
	to{ opacity: 0; transform: scale(1.1); }
}
#fp-bg10{
	-webkit-backface-visibility: hidden;
	animation:'fp-bg10' 50.0s linear 0s infinite;
	-ms-animation:fp-bg10 50.0s linear 0s infinite;
	-moz-animation:fp-bg10 50.0s linear 0s infinite;
	-o-animation:'fp-bg10' 50.0s linear 0s infinite;
	-webkit-animation:'fp-bg10' 50.0s linear 0s infinite;
}

.off #fp-bg1,
.off #fp-bg2,
.off #fp-bg3,
.off #fp-bg4,
.off #fp-bg5,
.off #fp-bg6,
.off #fp-bg7,
.off #fp-bg8,
.off #fp-bg9,
.off #fp-bg10{
	animation-play-state: paused;
	-ms-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	-webkit-animation-play-state: paused;
}

#fp-text1{
	width: 100%;
	height: 5%;
	left: 0%;
	top: 80%;
	background-image: url("images/fp-text1.png");
}

@keyframes fp-text1{
	from{ margin-top: 1em; }
	to{ opacity: 1; }
}
#fp-text1{
	animation:'fp-text1' 0.6s ease-in-out 1.8s forwards;
	-ms-animation:fp-text1 0.6s ease-in-out 1.8s forwards;
	-moz-animation:fp-text1 0.6s ease-in-out 1.8s forwards;
	-o-animation:'fp-text1' 0.6s ease-in-out 1.8s forwards;
	-webkit-animation:'fp-text1' 0.6s ease-in-out 1.8s forwards;
}

@keyframes fp-text1-off{
	from{ opacity: 1; }
	to{ opacity: 0; }
}
.off #fp-text1{
	animation:'fp-text1-off' 0.6s ease-in-out 0.0s forwards;
	-ms-animation:fp-text1-off 0.6s ease-in-out 0.0s forwards;
	-moz-animation:fp-text1-off 0.6s ease-in-out 0.0s forwards;
	-o-animation:'fp-text1-off' 0.6s ease-in-out 0.0s forwards;
	-webkit-animation:'fp-text1-off' 0.6s ease-in-out 0.0s forwards;
}

#fp-text2{
	width: 100%;
	height: 5%;
	left: 0%;
	top: 80%;
	background-image: url("images/fp-text2.png");
}

@keyframes fp-text2{
	from{ }
	to{ opacity: 1; }
}
.off #fp-text2{
	animation:'fp-text2' 0.6s ease-in-out 0s forwards;
	-ms-animation:fp-text2 0.6s ease-in-out 0s forwards;
	-moz-animation:fp-text2 0.6s ease-in-out 0s forwards;
	-o-animation:'fp-text2' 0.6s ease-in-out 0s forwards;
	-webkit-animation:'fp-text2' 0.6s ease-in-out 0s forwards;
}

.fp-option{
	width: 22.8%;
	height: 43.7%;
	cursor: pointer;
	outline: none;
	transform: translateZ(1em); /* iOS图层修复 */
}

.fp-option i{
	transition: transform 0.2s;
}

.fp-option span{
	opacity: 0;
}

#fp-option1{ left: 11.8%; top: 20%; }
#fp-option1 i{ background-image: url("images/fp-option1.png"); }
#fp-option1 span{ background-image: url("images/fp-option1b.png"); }

#fp-option2{ left: 28.8%; top: 30.2%; }
#fp-option2 i{ background-image: url("images/fp-option2.png"); }
#fp-option2 span{ background-image: url("images/fp-option2b.png"); }

#fp-option3{ right: 28.8%; top: 20%; }
#fp-option3 i{ background-image: url("images/fp-option3.png"); }
#fp-option3 span{ background-image: url("images/fp-option3b.png"); }

#fp-option4{ right: 11.8%; top: 30.2%; }
#fp-option4 i{ background-image: url("images/fp-option4.png"); }
#fp-option4 span{ background-image: url("images/fp-option4b.png"); }

.fp-option:hover i{
	transform: scale(1.05);
}

@keyframes fp-option{
	from{ transform: scale(1.2); }
	to{ opacity: 1; }
}
#fp-option1{
	animation:'fp-option' 0.6s ease-in-out 0.5s forwards;
	-ms-animation:fp-option 0.6s ease-in-out 0.5s forwards;
	-moz-animation:fp-option 0.6s ease-in-out 0.5s forwards;
	-o-animation:'fp-option' 0.6s ease-in-out 0.5s forwards;
	-webkit-animation:'fp-option' 0.6s ease-in-out 0.5s forwards;
}
#fp-option2{
	animation:'fp-option' 0.6s ease-in-out 0.8s forwards;
	-ms-animation:fp-option 0.6s ease-in-out 0.8s forwards;
	-moz-animation:fp-option 0.6s ease-in-out 0.8s forwards;
	-o-animation:'fp-option' 0.6s ease-in-out 0.8s forwards;
	-webkit-animation:'fp-option' 0.6s ease-in-out 0.8s forwards;
}
#fp-option3{
	animation:'fp-option' 0.6s ease-in-out 1.1s forwards;
	-ms-animation:fp-option 0.6s ease-in-out 1.1s forwards;
	-moz-animation:fp-option 0.6s ease-in-out 1.1s forwards;
	-o-animation:'fp-option' 0.6s ease-in-out 1.1s forwards;
	-webkit-animation:'fp-option' 0.6s ease-in-out 1.1s forwards;
}
#fp-option4{
	animation:'fp-option' 0.6 ease-in-out 1.4s forwards;
	-ms-animation:fp-option 0.6s ease-in-out 1.4s forwards;
	-moz-animation:fp-option 0.6s ease-in-out 1.4s forwards;
	-o-animation:'fp-option' 0.6s ease-in-out 1.4s forwards;
	-webkit-animation:'fp-option' 0.6s ease-in-out 1.4s forwards;
}

@keyframes fp-option-i-off{
	from{ opacity: 1; }
	to{ opacity: 0; }
}
.off #fp-option1 i{
	animation:'fp-option-i-off' 1.0s ease-in-out 0s forwards;
	-ms-animation:fp-option-i-off 1.0s ease-in-out 0s forwards;
	-moz-animation:fp-option-i-off 1.0s ease-in-out 0s forwards;
	-o-animation:'fp-option-i-off' 1.0s ease-in-out 0s forwards;
	-webkit-animation:'fp-option-i-off' 1.0s ease-in-out 0s forwards;
}
.off #fp-option2 i{
	animation:'fp-option-i-off' 1.0s ease-in-out 0.8s forwards;
	-ms-animation:fp-option-i-off 1.0s ease-in-out 0.8s forwards;
	-moz-animation:fp-option-i-off 1.0s ease-in-out 0.8s forwards;
	-o-animation:'fp-option-i-off' 1.0s ease-in-out 0.8s forwards;
	-webkit-animation:'fp-option-i-off' 1.0s ease-in-out 0.8s forwards;
}
.off #fp-option3 i{
	animation:'fp-option-i-off' 1.0s ease-in-out 1.6s forwards;
	-ms-animation:fp-option-i-off 1.0s ease-in-out 1.6s forwards;
	-moz-animation:fp-option-i-off 1.0s ease-in-out 1.6s forwards;
	-o-animation:'fp-option-i-off' 1.0s ease-in-out 1.6s forwards;
	-webkit-animation:'fp-option-i-off' 1.0s ease-in-out 1.6s forwards;
}
.off #fp-option4 i{
	animation:'fp-option-i-off' 1.0s ease-in-out 2.4s forwards;
	-ms-animation:fp-option-i-off 1.0s ease-in-out 2.4s forwards;
	-moz-animation:fp-option-i-off 1.0s ease-in-out 2.4s forwards;
	-o-animation:'fp-option-i-off' 1.0s ease-in-out 2.4s forwards;
	-webkit-animation:'fp-option-i-off' 1.0s ease-in-out 2.4s forwards;
}

@keyframes fp-option-span-off{
	from{ opacity: 0; }
	to{ opacity: 1; }
}
.off #fp-option1 span{
	animation:'fp-option-span-off' 1.0s ease-in-out 0s forwards;
	-ms-animation:fp-option-span-off 1.0s ease-in-out 0s forwards;
	-moz-animation:fp-option-span-off 1.0s ease-in-out 0s forwards;
	-o-animation:'fp-option-span-off' 1.0s ease-in-out 0s forwards;
	-webkit-animation:'fp-option-span-off' 1.0s ease-in-out 0s forwards;
}
.off #fp-option2 span{
	animation:'fp-option-span-off' 1.0s ease-in-out 0.8s forwards;
	-ms-animation:fp-option-span-off 1.0s ease-in-out 0.8s forwards;
	-moz-animation:fp-option-span-off 1.0s ease-in-out 0.8s forwards;
	-o-animation:'fp-option-span-off' 1.0s ease-in-out 0.8s forwards;
	-webkit-animation:'fp-option-span-off' 1.0s ease-in-out 0.8s forwards;
}
.off #fp-option3 span{
	animation:'fp-option-span-off' 1.0s ease-in-out 1.6s forwards;
	-ms-animation:fp-option-span-off 1.0s ease-in-out 1.6s forwards;
	-moz-animation:fp-option-span-off 1.0s ease-in-out 1.6s forwards;
	-o-animation:'fp-option-span-off' 1.0s ease-in-out 1.6s forwards;
	-webkit-animation:'fp-option-span-off' 1.0s ease-in-out 1.6s forwards;
}
.off #fp-option4 span{
	animation:'fp-option-span-off' 1.0s ease-in-out 2.4s forwards;
	-ms-animation:fp-option-span-off 1.0s ease-in-out 2.4s forwards;
	-moz-animation:fp-option-span-off 1.0s ease-in-out 2.4s forwards;
	-o-animation:'fp-option-span-off' 1.0s ease-in-out 2.4s forwards;
	-webkit-animation:'fp-option-span-off' 1.0s ease-in-out 2.4s forwards;
}

@keyframes fp-off{
	from{ top: 0%; }
	99.99%{ top: 0%; opacity: 0; z-index: 900; }
	to{ top: -100%; z-index: -1; }
}
#first-page.off{
	animation:'fp-off' 1.0s ease-in-out 4.0s forwards;
	-ms-animation:fp-off 1.0s ease-in-out 4.0s forwards;
	-moz-animation:fp-off 1.0s ease-in-out 4.0s forwards;
	-o-animation:'fp-off' 1.0s ease-in-out 4.0s forwards;
	-webkit-animation:'fp-off' 1.0s ease-in-out 4.0s forwards;
}
#first-page.jump-off{
	animation:'fp-off' 0.5s ease-in-out 0s forwards;
	-ms-animation:fp-off 0.5s ease-in-out 0s forwards;
	-moz-animation:fp-off 0.5s ease-in-out 0s forwards;
	-o-animation:'fp-off' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'fp-off' 0.5s ease-in-out 0s forwards;
}

#pp-bg{
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-image: url("images/pp-bg.jpg");
	background-size: cover;
}

@keyframes pp-bg{
	from{ transform: scale(1); }
	to{ transform: scale(1.2); }
}
.off #pp-bg{
	animation:'pp-bg' 11.5s linear 4.0s forwards;
	-ms-animation:pp-bg 11.5s linear 4.0s forwards;
	-moz-animation:pp-bg 11.5s linear 4.0s forwards;
	-o-animation:'pp-bg' 11.5s linear 4.0s forwards;
	-webkit-animation:'pp-bg' 11.5s linear 4.0s forwards;
}

#pp-box{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
}

@keyframes pp-box{
	from{ }
	to{ opacity: 0; }
}
.off #pp-box{
	animation:'pp-box' 1.0s ease-in-out 14.0s forwards;
	-ms-animation:pp-box 1.0s ease-in-out 14.0s forwards;
	-moz-animation:pp-box 1.0s ease-in-out 14.0s forwards;
	-o-animation:'pp-box' 1.0s ease-in-out 14.0s forwards;
	-webkit-animation:'pp-box' 1.0s ease-in-out 14.0s forwards;
}

#pp-topic{
	width: 100%;
	height: 6.3%;
	left: 0%;
	top: 25.6%;
	background-image: url("images/pp-title.png");
}

@keyframes pp-topic{
	from{ }
	to{ opacity: 1; }
}
.off #pp-topic{
	animation:'pp-topic' 0.5s ease-in-out 5.0s forwards;
	-ms-animation:pp-topic 0.5s ease-in-out 5.0s forwards;
	-moz-animation:pp-topic 0.5s ease-in-out 5.0s forwards;
	-o-animation:'pp-topic' 0.5s ease-in-out 5.0s forwards;
	-webkit-animation:'pp-topic' 0.5s ease-in-out 5.0s forwards;
}

.pp-text{
	width: 100%;
	height: 26.7%;
	left: 0%;
	top: 39.1%;
}

#pp-text1{ background-image: url("images/pp-text1.png"); }
#pp-text2{ background-image: url("images/pp-text2.png"); }
#pp-text3{ background-image: url("images/pp-text3.png"); }
#pp-text4{ background-image: url("images/pp-text4.png"); }
#pp-text5{ background-image: url("images/pp-text5.png"); }

@keyframes pp-text{
	from{ margin-top: 0.5em; }
	to{ opacity: 1; }
}
.off #pp-text1{
	animation:'pp-text' 0.5s ease-in-out 5.5s forwards;
	-ms-animation:pp-text 0.5s ease-in-out 5.5s forwards;
	-moz-animation:pp-text 0.5s ease-in-out 5.5s forwards;
	-o-animation:'pp-text' 0.5s ease-in-out 5.5s forwards;
	-webkit-animation:'pp-text' 0.5s ease-in-out 5.5s forwards;
}
.off #pp-text2{
	animation:'pp-text' 0.5s ease-in-out 6.3s forwards;
	-ms-animation:pp-text 0.5s ease-in-out 6.3s forwards;
	-moz-animation:pp-text 0.5s ease-in-out 6.3s forwards;
	-o-animation:'pp-text' 0.5s ease-in-out 6.3s forwards;
	-webkit-animation:'pp-text' 0.5s ease-in-out 6.3s forwards;
}
.off #pp-text3{
	animation:'pp-text' 0.5s ease-in-out 7.1s forwards;
	-ms-animation:pp-text 0.5s ease-in-out 7.1s forwards;
	-moz-animation:pp-text 0.5s ease-in-out 7.1s forwards;
	-o-animation:'pp-text' 0.5s ease-in-out 7.1s forwards;
	-webkit-animation:'pp-text' 0.5s ease-in-out 7.1s forwards;
}
.off #pp-text4{
	animation:'pp-text' 0.5s ease-in-out 7.9s forwards;
	-ms-animation:pp-text 0.5s ease-in-out 7.9s forwards;
	-moz-animation:pp-text 0.5s ease-in-out 7.9s forwards;
	-o-animation:'pp-text' 0.5s ease-in-out 7.9s forwards;
	-webkit-animation:'pp-text' 0.5s ease-in-out 7.9s forwards;
}
.off #pp-text5{
	animation:'pp-text' 0.5s ease-in-out 8.7s forwards;
	-ms-animation:pp-text 0.5s ease-in-out 8.7s forwards;
	-moz-animation:pp-text 0.5s ease-in-out 8.7s forwards;
	-o-animation:'pp-text' 0.5s ease-in-out 8.7s forwards;
	-webkit-animation:'pp-text' 0.5s ease-in-out 8.7s forwards;
}

@keyframes pp-off{
	from{ }
	91.3%{ opacity: 1; }
	99.99%{ top: 0%; opacity: 0; z-index: 800; }
	to{ top: -100%; z-index: -1; }
}
#preface-page.off{
	animation:'pp-off' 11.5s ease-in-out 4.0s forwards;
	-ms-animation:pp-off 11.5s ease-in-out 4.0s forwards;
	-moz-animation:pp-off 11.5s ease-in-out 4.0s forwards;
	-o-animation:'pp-off' 11.5s ease-in-out 4.0s forwards;
	-webkit-animation:'pp-off' 11.5s ease-in-out 4.0s forwards;
}
#preface-page.jump-off{
	animation:'pp-off' 0.5s ease-in-out 0s forwards;
	-ms-animation:pp-off 0.5s ease-in-out 0s forwards;
	-moz-animation:pp-off 0.5s ease-in-out 0s forwards;
	-o-animation:'pp-off' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'pp-off' 0.5s ease-in-out 0s forwards;
}

#home-page{
	background-image: url("images/hp-bg.jpg");
}

@keyframes hp-on{
	from{ transform: scale(1.2); }
	to{ transform: scale(1); }
}
#home-page.on{
	animation:'hp-on' 2s ease-in-out 15s forwards;
	-ms-animation:hp-on 2s ease-in-out 15.0s forwards;
	-moz-animation:hp-on 2s ease-in-out 15.0s forwards;
	-o-animation:'hp-on' 2s ease-in-out 15.0s forwards;
	-webkit-animation:'hp-on' 2s ease-in-out 15.0s forwards;
}
#home-page.jump-on{
	animation:'hp-on' 1.0s ease-in-out 0.5s forwards;
	-ms-animation:hp-on 1.0s ease-in-out 0.5s forwards;
	-moz-animation:hp-on 1.0s ease-in-out 0.5s forwards;
	-o-animation:'hp-on' 1.0s ease-in-out 0.5s forwards;
	-webkit-animation:'hp-on' 1.0s ease-in-out 0.5s forwards;
}

@keyframes hp-off{
	from{  }
	99.99%{ top: 0%; opacity: 0; z-index: 600; }
	to{ top: -100%; z-index: -1; }
}
#home-page.off{
	animation:'hp-off' 3.0s ease-in-out 0.5s forwards;
	-ms-animation:hp-off 3.0s ease-in-out 0.5s forwards;
	-moz-animation:hp-off 3.0s ease-in-out 0.5s forwards;
	-o-animation:'hp-off' 3.0s ease-in-out 0.5s forwards;
	-webkit-animation:'hp-off' 3.0s ease-in-out 0.5s forwards;
}

@keyframes mp-on{
	from{ opacity: 0; }
	to{ opacity: 1; }
}
#map-page.on{
	animation:'mp-on' 3.0s ease-in-out 0.5s forwards;
	-ms-animation:mp-on 3.0s ease-in-out 0.5s forwards;
	-moz-animation:mp-on 3.0s ease-in-out 0.5s forwards;
	-o-animation:'mp-on' 3.0s ease-in-out 0.5s forwards;
	-webkit-animation:'mp-on' 3.0s ease-in-out 0.5s forwards;
}

#hp-bird1,
#hp-bird2{
	width: 14.7%;
	height: 6%;
	left: 75.3%;
	top: 30.5%;
}

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

@keyframes hp-bird-shake{
	from{ }
	50%{ transform: translateY(1em); }
	to{ }
}
#hp-bird1 i{
	animation:'hp-bird-shake' 3.0s linear 0s infinite;
	-ms-animation:hp-bird-shake 3.0s linear 0s infinite;
	-moz-animation:hp-bird-shake 3.0s linear 0s infinite;
	-o-animation:'hp-bird-shake' 3.0s linear 0s infinite;
	-webkit-animation:'hp-bird-shake' 3.0s linear 0s infinite;
}
#hp-bird2 i{
	animation:'hp-bird-shake' 3.0s linear -1.5s infinite;
	-ms-animation:hp-bird-shake 3.0s linear -1.5s infinite;
	-moz-animation:hp-bird-shake 3.0s linear -1.5s infinite;
	-o-animation:'hp-bird-shake' 3.0s linear -1.5s infinite;
	-webkit-animation:'hp-bird-shake' 3.0s linear -1.5s infinite;
}

@keyframes hp-bird{
	from{ }
	to{ opacity: 1; }
}
.on #hp-bird1,
.on #hp-bird2{
	animation:'hp-bird' 1.0s ease-in-out 17.0s forwards;
	-ms-animation:hp-bird 1.0s ease-in-out 17.0s forwards;
	-moz-animation:hp-bird 1.0s ease-in-out 17.0s forwards;
	-o-animation:'hp-bird' 1.0s ease-in-out 17.0s forwards;
	-webkit-animation:'hp-bird' 1.0s ease-in-out 17.0s forwards;
}
.jump-on #hp-bird1,
.jump-on #hp-bird2{
	animation:'hp-bird' 1.0s ease-in-out 1.5s forwards;
	-ms-animation:hp-bird 1.0s ease-in-out 1.5s forwards;
	-moz-animation:hp-bird 1.0s ease-in-out 1.5s forwards;
	-o-animation:'hp-bird' 1.0s ease-in-out 1.5s forwards;
	-webkit-animation:'hp-bird' 1.0s ease-in-out 1.5s forwards;
}

#hp-logo{
	width: 12.5%;
	height: 3.3%;
	left: 5.4%;
	top: 8%;
	background-image: url("images/hp-logo.png");
}

@keyframes hp-logo{
	from{ transform: scale(0.8); }
	to{ transform: scale(1); opacity: 1; }
}
.on #hp-logo{
	animation:'hp-logo' 0.5s ease-in-out 16.5s forwards;
	-ms-animation:hp-logo 0.5s ease-in-out 16.5s forwards;
	-moz-animation:hp-logo 0.5s ease-in-out 16.5s forwards;
	-o-animation:'hp-logo' 0.5s ease-in-out 16.5s forwards;
	-webkit-animation:'hp-logo' 0.5s ease-in-out 16.5s forwards;
}
.jump-on #hp-logo{
	animation:'hp-logo' 0.5s ease-in-out 1.5s forwards;
	-ms-animation:hp-logo 0.5s ease-in-out 1.5s forwards;
	-moz-animation:hp-logo 0.5s ease-in-out 1.5s forwards;
	-o-animation:'hp-logo' 0.5s ease-in-out 1.5s forwards;
	-webkit-animation:'hp-logo' 0.5s ease-in-out 1.5s forwards;
}

#hp-topic-frame,
#hp-topic{
	width: 177.77vh;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

@keyframes hp-topic-frame-on{
	from{ opacity: 0; }
	to{ opacity: 1; }
}
.on #hp-topic-frame{
	animation:'hp-topic-frame-on' 2.0s ease-in-out 17.0s forwards;
	-ms-animation:hp-topic-frame-on 2.0s ease-in-out 17.0s forwards;
	-moz-animation:hp-topic-frame-on 2.0s ease-in-out 17.0s forwards;
	-o-animation:'hp-topic-frame-on' 2.0s ease-in-out 17.0s forwards;
	-webkit-animation:'hp-topic-frame-on' 2.0s ease-in-out 17.0s forwards;
}

#home-page.on #hp-topic-frame i{
	position: absolute;
	left: 50%;
	top: 50%;
    width: 100%;
    height: 100%;
	transform: translate(-50%, -50%);
    background-image:url("images/hp-topic-frame.png");
    background-size: 100% 6100% !important;
    background-position-x: 0;
	background-repeat: repeat;
	background-position: center top;
    animation: hp-topic-frame 5s;
    animation-timing-function: steps(61);
    animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-delay: 17s;
}

@keyframes hp-topic-frame{
    from{ background-position-y: 0; }
    to{ background-position-y: -6100%; }
}

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

@keyframes hp-topic-on{
	from{ }
	to{ opacity: 1; }
}
.on #hp-topic{
	animation:'hp-topic-on' 0.1s ease-in-out 21.8s forwards;
	-ms-animation:hp-topic-on 0.1s ease-in-out 21.8s forwards;
	-moz-animation:hp-topic-on 0.1s ease-in-out 21.8s forwards;
	-o-animation:'hp-topic-on' 0.1s ease-in-out 21.8s forwards;
	-webkit-animation:'hp-topic-on' 0.1s ease-in-out 21.8s forwards;
}
.jump-on #hp-topic{
	animation:'hp-topic-on' 0.5s ease-in-out 1.5s forwards;
	-ms-animation:hp-topic-on 0.5s ease-in-out 1.5s forwards;
	-moz-animation:hp-topic-on 0.5s ease-in-out 1.5s forwards;
	-o-animation:'hp-topic-on' 0.5s ease-in-out 1.5s forwards;
	-webkit-animation:'hp-topic-on' 0.5s ease-in-out 1.5s forwards;
}

#hp-cloud1{ width: 55%; height: 53%; left: 0%; bottom: 0%; }
#hp-cloud1 i{ background-image: url("images/cloud1.png"); background-position: left bottom; }

#hp-cloud2{ width: 56%; height: 43%; right: 0%; bottom: 0%; }
#hp-cloud2 i{ background-image: url("images/cloud2.png"); background-position: right bottom; }

@keyframes hp-cloud-shake{
	from{ }
	50%{ transform: scale(1.1); }
	to{ }
}
#hp-cloud1 i,
#hp-cloud2 i{
	animation:'hp-cloud-shake' 4.0s linear -3s infinite;
	-ms-animation:hp-cloud-shake 4.0s linear -3s infinite;
	-moz-animation:hp-cloud-shake 4.0s linear -3s infinite;
	-o-animation:'hp-cloud-shake' 4.0s linear -3s infinite;
	-webkit-animation:'hp-cloud-shake' 4.0s linear -3s infinite;
}

@keyframes hp-cloud1{
	from{ transform: scale(1.2); }
	to{ opacity: 1; }
}
.on #hp-cloud1,
.on #hp-cloud2{
	animation:'hp-cloud1' 1.0s ease-in-out 18.0s forwards;
	-ms-animation:hp-cloud1 1.0s ease-in-out 18.0s forwards;
	-moz-animation:hp-cloud1 1.0s ease-in-out 18.0s forwards;
	-o-animation:'hp-cloud1' 1.0s ease-in-out 18.0s forwards;
	-webkit-animation:'hp-cloud1' 1.0s ease-in-out 18.0s forwards;
}
.jump-on #hp-cloud1,
.jump-on #hp-cloud2{
	animation:'hp-cloud1' 1.0s ease-in-out 1.5s forwards;
	-ms-animation:hp-cloud1 1.0s ease-in-out 1.5s forwards;
	-moz-animation:hp-cloud1 1.0s ease-in-out 1.5s forwards;
	-o-animation:'hp-cloud1' 1.0s ease-in-out 1.5s forwards;
	-webkit-animation:'hp-cloud1' 1.0s ease-in-out 1.5s forwards;
}

#hp-tip{
	width: 7.4%;
	height: 1.9%;
	right: 1.8%;
	bottom: 3.5%;
	background-image: url("images/hp-tip.png");
}

#hp-btn{
	width: 20%;
	height: 8%;
	left: 40%;
	top: 86.5%;
	cursor: pointer;
}

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

@keyframes hp-btn-shake{
	from{ }
	50%{ transform: scale(1.1); }
	to{ }
}
#hp-btn i{
	animation:'hp-btn-shake' 1.0s linear 0s infinite;
	-ms-animation:hp-btn-shake 1.0s linear 0s infinite;
	-moz-animation:hp-btn-shake 1.0s linear 0s infinite;
	-o-animation:'hp-btn-shake' 1.0s linear 0s infinite;
	-webkit-animation:'hp-btn-shake' 1.0s linear 0s infinite;
}

@keyframes hp-btn{
	from{ }
	to{ opacity: 1; }
}
.on #hp-btn,
.on #hp-tip{
	animation:'hp-btn' 0.5s ease-in-out 18.9s forwards;
	-ms-animation:hp-btn 0.5s ease-in-out 18.9s forwards;
	-moz-animation:hp-btn 0.5s ease-in-out 18.9s forwards;
	-o-animation:'hp-btn' 0.5s ease-in-out 18.9s forwards;
	-webkit-animation:'hp-btn' 0.5s ease-in-out 18.9s forwards;
}
.jump-on #hp-btn,
.jump-on #hp-tip{
	animation:'hp-btn' 0.5s ease-in-out 1.5s forwards;
	-ms-animation:hp-btn 0.5s ease-in-out 1.5s forwards;
	-moz-animation:hp-btn 0.5s ease-in-out 1.5s forwards;
	-o-animation:'hp-btn' 0.5s ease-in-out 1.5s forwards;
	-webkit-animation:'hp-btn' 0.5s ease-in-out 1.5s forwards;
}

@keyframes hp-abs-off{
	from{ opacity: 1; }
	to{ transform: scale(0.8); opacity: 0; }
}
.off #hp-logo,
.off #hp-bird1,
.off #hp-bird2,
.off #hp-btn{
	animation:'hp-abs-off' 0.5s ease-in-out 0s forwards;
	-ms-animation:hp-abs-off 0.5s ease-in-out 0s forwards;
	-moz-animation:hp-abs-off 0.5s ease-in-out 0s forwards;
	-o-animation:'hp-abs-off' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'hp-abs-off' 0.5s ease-in-out 0s forwards;
}

@keyframes hp-abs-off2{
	from{ opacity: 1; }
	to{ opacity: 0; }
}
.off #hp-topic{
	animation:'hp-abs-off2' 0.5s ease-in-out 0s forwards;
	-ms-animation:hp-abs-off2 0.5s ease-in-out 0s forwards;
	-moz-animation:hp-abs-off2 0.5s ease-in-out 0s forwards;
	-o-animation:'hp-abs-off2' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'hp-abs-off2' 0.5s ease-in-out 0s forwards;
}

@keyframes hp-cloud-off{
	from{ opacity: 1; }
	to{ opacity: 0; }
}
.off #hp-cloud1,
.off #hp-cloud2{
	animation:'hp-cloud-off' 0.5s ease-in-out 0s forwards;
	-ms-animation:hp-cloud-off 0.5s ease-in-out 0s forwards;
	-moz-animation:hp-cloud-off 0.5s ease-in-out 0s forwards;
	-o-animation:'hp-cloud-off' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'hp-cloud-off' 0.5s ease-in-out 0s forwards;
}

#cloud-page{
	top: -100%;
	background: none;
}

@keyframes cp-on{
	from{ top: 0%; }
	99.99%{ top: 0%; }
	to{ top: -100%; }
}
.next#cloud-page,
.back#cloud-page{
	animation:'cp-on' 4.0s linear 0.5s forwards;
	-ms-animation:cp-on 4.0s linear 0.5s forwards;
	-moz-animation:cp-on 4.0s linear 0.5s forwards;
	-o-animation:'cp-on' 4.0s linear 0.5s forwards;
	-webkit-animation:'cp-on' 4.0s linear 0.5s forwards;
}

#cloud0{ width: 100%; height: 100%; left: 0%; top: 0%; background-image: url("images/cloud0.png"); background-size: cover; }

@keyframes cp-next-cloud0{
	from{ opacity: 0; transform: scale(1); }
	14.3%{ opacity: 1; }
	to{ opacity: 0; transform: scale(2); }
}
.next #cloud0{
	animation:'cp-next-cloud0' 3.5s linear 0.5s forwards;
	-ms-animation:cp-next-cloud0 3.5s linear 0.5s forwards;
	-moz-animation:cp-next-cloud0 3.5s linear 0.5s forwards;
	-o-animation:'cp-next-cloud0' 3.5s linear 0.5s forwards;
	-webkit-animation:'cp-next-cloud0' 3.5s linear 0.5s forwards;
}
/*
#cloud1{ width: 55%; height: 53%; left: 0%; bottom: 0%; background-image: url("images/cloud1.png"); background-position: left bottom; }
#cloud2{ width: 56%; height: 43%; right: 0%; bottom: 0%; background-image: url("images/cloud2.png"); background-position: right bottom; }
#cloud3{ width: 47%; height: 48%; left: 0%; top: 0%; background-image: url("images/cloud3.png"); background-position: left top; }
#cloud4{ width: 51%; height: 61%; right: 0%; top: 0%; background-image: url("images/cloud4.png"); background-position: right top; }
#cloud5{ width: 42%; height: 44%; left: 0%; top: 21%; background-image: url("images/cloud5.png"); background-position: left center; }
#cloud6{ width: 95%; height: 100%; right: 0%; top: 0%; background-image: url("images/cloud6.png"); background-position: right top; }
#cloud7{ width: 95%; height: 82%; left: 0%; top: 0%; background-image: url("images/cloud7.png"); background-position: left top; }
#cloud8{ width: 100%; height: 87%; right: 0%; bottom: 0%; background-image: url("images/cloud8.png"); background-position: right bottom; }

@keyframes cp-next-cloud1{
	from{ opacity: 0; transform: scale(1); }
	14.3%{ opacity: 1; }
	to{ opacity: 0; transform: scale(2); }
}
.next #cloud1{
	animation:'cp-next-cloud1' 3.5s linear 0.5s forwards;
	-ms-animation:cp-next-cloud1 3.5s linear 0.5s forwards;
	-moz-animation:cp-next-cloud1 3.5s linear 0.5s forwards;
	-o-animation:'cp-next-cloud1' 3.5s linear 0.5s forwards;
	-webkit-animation:'cp-next-cloud1' 3.5s linear 0.5s forwards;
}

@keyframes cp-next-cloud2{
	from{ opacity: 0; transform: scale(1); }
	14.3%{ opacity: 1; }
	97.5%{ opacity: 0; transform: scale(2); }
	to{ opacity: 0; transform: scale(2); }
}
.next #cloud2{
	animation:'cp-next-cloud2' 3.5s linear 0.5s forwards;
	-ms-animation:cp-next-cloud2 3.5s linear 0.5s forwards;
	-moz-animation:cp-next-cloud2 3.5s linear 0.5s forwards;
	-o-animation:'cp-next-cloud2' 3.5s linear 0.5s forwards;
	-webkit-animation:'cp-next-cloud2' 3.5s linear 0.5s forwards;
}

@keyframes cp-next-cloud3{
	from{ opacity: 0; transform: scale(1); }
	14.3%{ opacity: 1; }
	95%{ opacity: 0; transform: scale(2); }
	to{ opacity: 0; transform: scale(2); }
}
.next #cloud3{
	animation:'cp-next-cloud3' 3.5s linear 0.5s forwards;
	-ms-animation:cp-next-cloud3 3.5s linear 0.5s forwards;
	-moz-animation:cp-next-cloud3 3.5s linear 0.5s forwards;
	-o-animation:'cp-next-cloud3' 3.5s linear 0.5s forwards;
	-webkit-animation:'cp-next-cloud3' 3.5s linear 0.5s forwards;
}

@keyframes cp-next-cloud4{
	from{ opacity: 0; transform: scale(1); }
	14.3%{ opacity: 1; }
	92.5%{ opacity: 0; transform: scale(2); }
	to{ opacity: 0; transform: scale(2); }
}
.next #cloud4{
	animation:'cp-next-cloud4' 3.5s linear 0.5s forwards;
	-ms-animation:cp-next-cloud4 3.5s linear 0.5s forwards;
	-moz-animation:cp-next-cloud4 3.5s linear 0.5s forwards;
	-o-animation:'cp-next-cloud4' 3.5s linear 0.5s forwards;
	-webkit-animation:'cp-next-cloud4' 3.5s linear 0.5s forwards;
}

@keyframes cp-next-cloud5{
	from{ opacity: 0; transform: scale(1); }
	14.3%{ opacity: 1; }
	90%{ opacity: 0; transform: scale(2); }
	to{ opacity: 0; transform: scale(2); }
}
.next #cloud5{
	animation:'cp-next-cloud5' 3.5s linear 0.5s forwards;
	-ms-animation:cp-next-cloud5 3.5s linear 0.5s forwards;
	-moz-animation:cp-next-cloud5 3.5s linear 0.5s forwards;
	-o-animation:'cp-next-cloud5' 3.5s linear 0.5s forwards;
	-webkit-animation:'cp-next-cloud5' 3.5s linear 0.5s forwards;
}

@keyframes cp-next-cloud6{
	from{ opacity: 0; transform: scale(1); }
	14.3%{ opacity: 1; }
	87.5%{ opacity: 0; transform: scale(2); }
	to{ opacity: 0; transform: scale(2); }
}
.next #cloud6{
	animation:'cp-next-cloud6' 3.5s ease-in-out 0.5s forwards;
	-ms-animation:cp-next-cloud6 3.5s ease-in-out 0.5s forwards;
	-moz-animation:cp-next-cloud6 3.5s ease-in-out 0.5s forwards;
	-o-animation:'cp-next-cloud6' 3.5s ease-in-out 0.5s forwards;
	-webkit-animation:'cp-next-cloud6' 3.5s ease-in-out 0.5s forwards;
}

@keyframes cp-next-cloud7{
	from{ opacity: 0; transform: scale(1); }
	14.3%{ opacity: 1; }
	85%{ opacity: 0; transform: scale(2); }
	to{ opacity: 0; transform: scale(2); }
}
.next #cloud7{
	animation:'cp-next-cloud7' 3.5s ease-in-out 0.5s forwards;
	-ms-animation:cp-next-cloud7 3.5s ease-in-out 0.5s forwards;
	-moz-animation:cp-next-cloud7 3.5s ease-in-out 0.5s forwards;
	-o-animation:'cp-next-cloud7' 3.5s ease-in-out 0.5s forwards;
	-webkit-animation:'cp-next-cloud7' 3.5s ease-in-out 0.5s forwards;
}

@keyframes cp-next-cloud8{
	from{ opacity: 0; transform: scale(1); }
	14.3%{ opacity: 1; }
	82.5%{ opacity: 0; transform: scale(2); }
	to{ opacity: 0; transform: scale(2); }
}
.next #cloud8{
	animation:'cp-next-cloud8' 3.5s ease-in-out 0.5s forwards;
	-ms-animation:cp-next-cloud8 3.5s ease-in-out 0.5s forwards;
	-moz-animation:cp-next-cloud8 3.5s ease-in-out 0.5s forwards;
	-o-animation:'cp-next-cloud8' 3.5s ease-in-out 0.5s forwards;
	-webkit-animation:'cp-next-cloud8' 3.5s ease-in-out 0.5s forwards;
}
*/


@keyframes map_show{
	from{ opacity: 0; transform: scale(1.2); }
	50%{ opacity: 0; transform: scale(1.2); }
	to{ opacity: 1; transform: scale(1); }
}
#map-page.show{
	animation:'map_show' 1.0s ease-in-out 0.0s forwards;
	-ms-animation:map_show 1.0s ease-in-out 0.0s forwards;
	-moz-animation:map_show 1.0s ease-in-out 0.0s forwards;
	-o-animation:'map_show' 1.0s ease-in-out 0.0s forwards;
	-webkit-animation:'map_show' 1.0s ease-in-out 0.0s forwards;
}

@keyframes map_hide{
	from{ opacity: 1; transform: scale(1); }
	99.99%{ opacity: 0; transform: scale(1.2); }
	to{ opacity: 0; transform: scale(0); }
}
#map-page.hide{
	animation:'map_hide' 1.0s ease-in-out 0.0s forwards;
	-ms-animation:map_hide 1.0s ease-in-out 0.0s forwards;
	-moz-animation:map_hide 1.0s ease-in-out 0.0s forwards;
	-o-animation:'map_hide' 1.0s ease-in-out 0.0s forwards;
	-webkit-animation:'map_hide' 1.0s ease-in-out 0.0s forwards;
}

#map-show{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300em;
	height: 128.25em;
	background:url("images/map-base.jpg") no-repeat center center;
	background-size: 100% 100%;
	transition: transform 1s;
	transition-delay: 0.5s;
	transform: translate(-50%, -50%) scale(0.5);
}

#map-bg,#map-bg ul{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

#map-bg li{
	float: left;
	width: 20%;
	height: 25%;
	background-size: 100% 100%;
}

.map-bg01{ background-image: url("images/map-bg_01.jpg"); }
.map-bg02{ background-image: url("images/map-bg_02.jpg"); }
.map-bg03{ background-image: url("images/map-bg_03.jpg"); }
.map-bg04{ background-image: url("images/map-bg_04.jpg"); }
.map-bg05{ background-image: url("images/map-bg_05.jpg"); }
.map-bg06{ background-image: url("images/map-bg_06.jpg"); }
.map-bg07{ background-image: url("images/map-bg_07.jpg"); }
.map-bg08{ background-image: url("images/map-bg_08.jpg"); }
.map-bg09{ background-image: url("images/map-bg_09.jpg"); }
.map-bg10{ background-image: url("images/map-bg_10.jpg"); }
.map-bg11{ background-image: url("images/map-bg_11.jpg"); }
.map-bg12{ background-image: url("images/map-bg_12.jpg"); }
.map-bg13{ background-image: url("images/map-bg_13.jpg"); }
.map-bg14{ background-image: url("images/map-bg_14.jpg"); }
.map-bg15{ background-image: url("images/map-bg_15.jpg"); }
.map-bg16{ background-image: url("images/map-bg_16.jpg"); }
.map-bg17{ background-image: url("images/map-bg_17.jpg"); }
.map-bg18{ background-image: url("images/map-bg_18.jpg"); }
.map-bg19{ background-image: url("images/map-bg_19.jpg"); }
.map-bg20{ background-image: url("images/map-bg_20.jpg"); }

#map-river{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: url("images/map-river.gif");
	background-size: 100% 100%;
}

#map-cloud1{ width: 45.7%; height: 64.3%; left: 0%; bottom: 0%; }
#map-cloud1 i{ background-image: url("images/map-cloud1.png"); background-position: left bottom; }

#map-cloud2{ width: 54.7%; height: 57.2%; right: 0%; top: 0%; }
#map-cloud2 i{ background-image: url("images/map-cloud2.png"); background-position: right top; }

#map-cloud3{ width: 21.7%; height: 23.1%; left: 3.8%; top: 14.8%; }
#map-cloud3 i{ background-image: url("images/map-cloud3.png"); }

#map-cloud4{ width: 21.9%; height: 22.9%; left: 15.4%; top: 26.5%; }
#map-cloud4 i{ background-image: url("images/map-cloud4.png"); }

#map-cloud5{ width: 13.4%; height: 14.0%; left: 36.4%; top: 18.6%; }
#map-cloud5 i{ background-image: url("images/map-cloud5.png"); }

#map-cloud6{ width: 38.9%; height: 34.0%; left: 20.4%; top: 0%; background-position: center top; }
#map-cloud6 i{ background-image: url("images/map-cloud6.png"); }

#map-cloud7{ width: 66.7%; height: 42.6%; right: 0%; bottom: 0%; }
#map-cloud7 i{ background-image: url("images/map-cloud7.png"); background-position: right bottom; }

#map-cloud8{ width: 12.6%; height: 13.3%; left: 62.8%; top: 21.4%; }
#map-cloud8 i{ background-image: url("images/map-cloud8.png"); }

#map-cloud9{ width: 18.2%; height: 19.7%; left: 65.9%; top: 57.1%; }
#map-cloud9 i{ background-image: url("images/map-cloud9.png"); }

#map-cloud10{ width: 13.5%; height: 14.6%; left: 63.9%; top: 27.6%; }
#map-cloud10 i{ background-image: url("images/map-cloud10.png"); }

#map-cloud11{ width: 13.5%; height: 14.6%; left: 45.3%; top: 38.8%; }
#map-cloud11 i{ background-image: url("images/map-cloud11.png"); }

#map-cloud12{ width: 8.7%; height: 9.4%; left: 43.6%; top: 47.3%; }
#map-cloud12 i{ background-image: url("images/map-cloud12.png"); }

@keyframes map-cloud-shake1{
	from{ }
	50%{ transform: translateX(-1em); opacity: 0.5; }
	to{ }
}
#map-cloud1 i,
#map-cloud3 i,
#map-cloud5 i,
#map-cloud7 i,
#map-cloud10 i,
#map-cloud11 i{
	animation:'map-cloud-shake1' 5.0s linear 0s infinite;
	-ms-animation:map-cloud-shake1 5.0s linear 0s infinite;
	-moz-animation:map-cloud-shake1 5.0s linear 0s infinite;
	-o-animation:'map-cloud-shake1' 5.0s linear 0s infinite;
	-webkit-animation:'map-cloud-shake1' 5.0s linear 0s infinite;
}

@keyframes map-cloud-shake2{
	from{ }
	50%{ transform: translateX(1em); opacity: 0.5; }
	to{ }
}
#map-cloud2 i,
#map-cloud4 i,
#map-cloud6 i,
#map-cloud8 i,
#map-cloud9 i,
#map-cloud12 i{
	animation:'map-cloud-shake2' 5.0s linear 0s infinite;
	-ms-animation:map-cloud-shake2 5.0s linear 0s infinite;
	-moz-animation:map-cloud-shake2 5.0s linear 0s infinite;
	-o-animation:'map-cloud-shake2' 5.0s linear 0s infinite;
	-webkit-animation:'map-cloud-shake2' 5.0s linear 0s infinite;
}

#map-tip{
	width: 7.4%;
    height: 1.9%;
    right: 1.8%;
    bottom: 3.5%;
	background-image: url("images/map-tip.png");
}

#map-hand{
	width: 10%;
    height: 15%;
    left: 45%;
    bottom: 3.5%;
	background-image: url("images/map-hand.gif");
	opacity: 0.8;
}

#map-uav{
	width: 6%;
	height: 8%;
	background-image: url("images/map-uav.gif");
	left: 58%; top: 66%;
}

@keyframes uav{
	from{ left: 58%; top: 66%; }
	12.5%{ left: 66%; top: 80%; }
	25%{ left: 78%; top: 75%; }
	37.5%{ left: 65%; top: 70%; }
	50%{ left: 45%; top: 50%; }
	62.5%{ left: 40%; top: 66%; }
	75%{ left: 60%; top: 77%; }
	87.5%{ left: 65%; top: 60%; }
	to{ left: 58%; top: 66%; }
}

#map-uav{
	animation:'uav' 20.0s linear 0s infinite;
	-ms-animation:uav 20.0s linear 0s infinite;
	-moz-animation:uav 20.0s linear 0s infinite;
	-o-animation:'uav' 20.0s linear 0s infinite;
	-webkit-animation:'uav' 20.0s linear 0s infinite;
}

.map-icon-style1{ width: 1%; height: 2.4%; }

.map-icon-style1 i{ background-image: url("images/map-icon-style1.png"); }

@keyframes map-icon-style1-shake{
	from{ }
	to{ transform: rotate(360deg); }
}
.map-icon-style1 i{
	animation:'map-icon-style1-shake' 3.0s linear 0s infinite;
	-ms-animation:map-icon-style1-shake 3.0s linear 0s infinite;
	-moz-animation:map-icon-style1-shake 3.0s linear 0s infinite;
	-o-animation:'map-icon-style1-shake' 3.0s linear 0s infinite;
	-webkit-animation:'map-icon-style1-shake' 3.0s linear 0s infinite;
}

#map-icon1{ left: 15.1%; top: 43.5%; }

#map-icon2{ left: 37.5%; top: 64.7%; }

#map-icon3{ left: 44.5%; top: 47.9%; }

#map-icon11{ left: 70.7%; top: 62.4%; }

#map-icon13{ left: 79.5%; top: 51.2%; }

#map-icon14{ left: 80.8%; top: 47.8%; }

#map-icon15{ left: 81.7%; top: 40.0%; }

.map-icon-style2{ width: 1.3%; height: 4.3%; }

.map-icon-style2 i{ background-image: url("images/map-icon-style2.png"); }

#map-icon5{ left: 45.9%; top: 22.0%; }

#map-icon7{ left: 61.0%; top: 28.6%; }

#map-icon10{ left: 65.4%; top: 56.2%; }

@keyframes map-icon-style2-shake{
	from{ }
	50%{ transform: translateY(1em); }
	to{ }
}
.map-icon-style2 i{
	animation:'map-icon-style2-shake' 2.0s linear 0s infinite;
	-ms-animation:map-icon-style2-shake 2.0s linear 0s infinite;
	-moz-animation:map-icon-style2-shake 2.0s linear 0s infinite;
	-o-animation:'map-icon-style2-shake' 2.0s linear 0s infinite;
	-webkit-animation:'map-icon-style2-shake' 2.0s linear 0s infinite;
}

.map-tag{ background-size: auto 100%; background-position: left center; }

#map-tag1{ width: 8.4%; height: 2.8%; left: 16.3%; top: 43.6%; background-image: url("images/map-tag1.png"); }

#map-tag2{ width: 6.5%; height: 7.2%; right: 62.5%; top: 65.8%; background-image: url("images/map-tag2.png"); background-size: 100% auto; background-position: center top; }

#map-tag3{ width: 3.7%; height: 5.4%; left: 45.6%; top: 49.1%; background-image: url("images/map-tag3.png"); background-size: 100% auto; background-position: center top; }

#map-tag5{ width: 5.2%; height: 2.1%; left: 47.2%; top: 23.1%; background-image: url("images/map-tag5.png"); }

#map-tag7{ width: 4.1%; height: 2.1%; left: 62.3%; top: 30.4%; background-image: url("images/map-tag7.png"); }

#map-tag10{ width: 6.9%; height: 2.0%; left: 63.1%; top: 59.9%; background-image: url("images/map-tag10.png"); }

#map-tag11{ width: 3.3%; height: 4.0%; right: 29.2%; top: 58.8%; background-image: url("images/map-tag11.png"); background-position: right center; }

#map-tag13{ width: 2.6%; height: 7.7%; left: 80.5%; top: 53.1%; background-image: url("images/map-tag13.png"); background-size: 100% auto; background-position: center top; }

#map-tag14{ width: 1.9%; height: 2.8%; left: 80.5%; top: 50.5%; background-image: url("images/map-tag14.png"); }

#map-tag15{ width: 3.1%; height: 3.9%; right: 18.2%; top: 36.4%; background-image: url("images/map-tag15.png"); background-position: right center; }

#map-text1{ width: 12.0%; height: 5.4%; left: 16.4%; top: 46.7%; background-image: url("images/map-text1.png"); }

#map-text2{ width: 14.9%; height: 5.4%; left: 27.4%; top: 73.7%; background-image: url("images/map-text2.png"); }

#map-text3{ width: 13.3%; height: 5.4%; left: 41.4%; top: 55.4%; background-image: url("images/map-text3.png"); }

#map-text4{ width: 12.5%; height: 7.6%; left: 43.5%; top: 36.6%; background-image: url("images/map-text4.png"); }

#map-text6{ width: 15.0%; height: 9.9%; left: 53.0%; top: 19.1%; background-image: url("images/map-text6.png"); }

#map-text8{ width: 12.9%; height: 7.9%; left: 57.2%; top: 35.4%; background-image: url("images/map-text8.png"); }

#map-text9{ width: 11.2%; height: 7.9%; left: 62.0%; top: 43.9%; background-image: url("images/map-text9.png"); }

#map-text12{ width: 18.8%; height: 12.7%; left: 68.8%; top: 54.4%; background-image: url("images/map-text12.png"); }

.map-popup{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 100%;
	top: 0%;
	background: url("images/map-popup-bg.png");
	background-size: 100% 100%;
	opacity: 0;
	transition-timing-function: ease-in-out;
}

.map-popup,
.map-popup a,
.map-popup a:hover{
	color: #fff !important;
}

.map-popup .show{
	position: absolute;
	width: 37em;
	height: 100%;
	right: 0%;
	top: 0%;
	background:rgba(28,22,13,0.8);
	overflow: hidden;
}

.map-popup .show .next{
	position: absolute;
	left: 0em;
	top: 1.5em;
	width: 5.2em;
	height: 2.8em;
	background: url("images/map-popup-next.png") no-repeat left top;
	background-size: contain;
	cursor: pointer;
	z-index: 9;
}

.map-popup .focus{
	position: absolute;
	width: 28em;
	height: 15.75em;
	top: 4.1em;
	right: 1em;
}

.map-popup .focus img{
	width: 100%;
	height: 100%;
}

.map-popup .topic{
	position: absolute;
	height: 3.5em;
	left: 4em;
	top: 15.3em;
}

.map-popup .topic img{
	height: 100%;
}

.map-popup .text{
	position: absolute;
	width: 30em;
	padding-right: 2em;
	height: calc(100% - 25em);
	left: 4em;
	top: 22em;
	overflow-y: auto;
	scrollbar-color: #fff #514c45;
}

.map-popup .text::-webkit-scrollbar{ width: 0.5em; background: #514c45; }
.map-popup .text::-webkit-scrollbar-track{ background: #514c45; }
.map-popup .text::-webkit-scrollbar-thumb { background: #fff; border-radius: 0.25em; }
.map-popup .text::-webkit-scrollbar-thumb:hover { background: #fff; }

.map-popup .text p{
	line-height: 1.8em;
	text-indent: 2em;
}

.map-popup .text .pic-text{
	text-align: center;
	text-indent: 0;
	font-size: 0.9em;
}

.map-popup .text .pic,
.map-popup .text .video{
	text-indent: 0;
	text-align: center;
	margin: 1em 0px;
}

.map-popup .text .pic img{
	display: inline-block;
	vertical-align: top;
	width: 100%;
}

.map-popup .text .video video{
	width: 100%;
	height: auto;
	outline: none;
	background: #000;
}

.map-popup .switch{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	transform: scale(0);
	opacity: 0;
}

.map-popup .switch.on{
	transform: scale(1);
	opacity: 1;
}

.map-popup .switch-btn{
	position: absolute;
	padding: 0.5em 0.5em;
	width: 3.6em;
	top: 4em;
	right: 38em;
	border-radius: 2.3em;
	background: rgba(28,22,13,0.85);
	text-align: center;
}

.map-popup .switch-btn li{
	color: #91908c;
	padding: 1.4em 0px;
	cursor: pointer;
}

.map-popup .switch-btn .on{
	background: #6e510c;
	border-radius: 2.3em;
	color: #fff;
}

.map-popup .switch-btn label{
	font-size: 1.4em;
	line-height: 1.1em;
	cursor: pointer;
}

.map-popup .pic-3d{
	position: absolute;
	width: 50%;
	left: 50%;
	top: 50%;
	transform: translate(-70%, -30%);
}

.map-video{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 100%;
	top: 0%;
	background: rgba(28,22,13,0.9);
}

.map-video.active{
	left: 0%;
}

.map-video video{
	position: absolute;
	width: auto;
	height: 60%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	outline: none;
	background: #000;
}

.map-video .close{
	position: absolute;
	width: 2.5em;
	height: 2.5em;
	left: 50%;
	top: 90%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background: url("images/map-video-close.png") no-repeat center center;
	background-size: contain;
	cursor: pointer;
}

#map-left-bottom{
	width: 13.5%;
	left: 2.5%;
	bottom: 3.5%;
}

#map-chart{
	position: relative;
	margin-bottom: 0.6em;
	opacity: 0;
}

#map-chart.active{
	opacity: 1;
}

#map-chart .bg{
	width: 100%;
}

#map-chart li{
	position: absolute;
	width: 80.8%;
	height: 83.8%;
	left: 9.6%;
	top: 15%;
	opacity: 0;
}

#map-chart li img{
	width: 100%;
	max-height: none;
}

#map-chart .active{
	opacity: 1;
}

#map-view{
	position: relative;
	border-radius: 0.3em;
	border: 0.13em solid rgba(255,255,255,0.5);
	box-shadow: 0px 0.13em 0.75em #000;
	overflow: hidden;
	outline: none;
}

#map-view .bg{
	width: 100%;
	border-radius: 0.3em;
}

#map-view span{
	position: absolute;
	width: 1%;
	height: 1%;
	transition: all 1s;
	transition-delay: 0.5s;
}

#map-view span i{
	width: 4000%;
	height: 5263%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border: 0.18em solid #c82d00;
	box-shadow: 0px 0px 1em #fff inset;
	border-radius: 0.3em;
}

@keyframes map-act0-1{
	from{ transform: translate(-50%, -50%) scale(0.5); }
	75%{ transform: translate(-50%, -50%) scale(1); }
	to{ transform: translate(-22.4%, -47.7%) scale(1); }
}
.map-act0 #map-show{
	animation:'map-act0-1' 6.0s ease-in-out 0s forwards;
	-ms-animation:map-act0-1 6.0s ease-in-out 0s forwards;
	-moz-animation:map-act0-1 6.0s ease-in-out 0s forwards;
	-o-animation:'map-act0-1' 6.0s ease-in-out 0s forwards;
	-webkit-animation:'map-act0-1' 6.0s ease-in-out 0s forwards;
}

@keyframes map-view0-1{
	from{ left: 50%; top: 50%; }
	75%{ left: 50%; top: 50%; }
	to{ left: 22.4%; top: 47.7%; }
}
.map-act0 #map-view span{
	animation:'map-view0-1' 6.0s ease-in-out 0s forwards;
	-ms-animation:map-view0-1 6.0s ease-in-out 0s forwards;
	-moz-animation:map-view0-1 6.0s ease-in-out 0s forwards;
	-o-animation:'map-view0-1' 6.0s ease-in-out 0s forwards;
	-webkit-animation:'map-view0-1' 6.0s ease-in-out 0s forwards;
}

.map-act1 #map-show{ transform: translate(-22.4%, -47.7%); }
.map-act1 #map-view span{ left: 22.4%; top: 47.7%; }

.map-act2 #map-show{ transform: translate(-34.8%, -71.9%); }
.map-act2 #map-view span{ left: 34.8%; top: 71.9%; }

.map-act3 #map-show{ transform: translate(-48.0%, -54.3%); }
.map-act3 #map-view span{ left: 48.0%; top: 54.3%; }

.map-act4 #map-show{ transform: translate(-49.7%, -40.4%); }
.map-act4 #map-view span{ left: 49.7%; top: 40.4%; }

.map-act5 #map-show{ transform: translate(-49.1%, -24.1%); }
.map-act5 #map-view span{ left: 49.1%; top: 24.1%; }

.map-act6 #map-show{ transform: translate(-60.4%, -24.1%); }
.map-act6 #map-view span{ left: 60.4%; top: 24.1%; }

.map-act7 #map-show{ transform: translate(-62.9%, -33.1%); }
.map-act7 #map-view span{ left: 62.9%; top: 33.1%; }

.map-act8 #map-show{ transform: translate(-63.6%, -39.4%); }
.map-act8 #map-view span{ left: 63.6%; top: 39.4%; }

.map-act9 #map-show{ transform: translate(-71.2%, -48.0%); }
.map-act9 #map-view span{ left: 71.2%; top: 48.0%; }

.map-act10 #map-show{ transform: translate(-66.5%, -59.0%); }
.map-act10 #map-view span{ left: 66.5%; top: 59.0%; }

.map-act11 #map-show{ transform: translate(-71.2%, -63.7%); }
.map-act11 #map-view span{ left: 71.2%; top: 63.7%; }

.map-act12 #map-show{ transform: translate(-77.7%, -60.7%); }
.map-act12 #map-view span{ left: 77.7%; top: 60.7%; }

.map-act13 #map-show{ transform: translate(-80%, -56.0%); }
.map-act13 #map-view span{ left: 80%; top: 56.0%; }

.map-act14 #map-show{ transform: translate(-80%, -50.5%); }
.map-act14 #map-view span{ left: 80%; top: 50.5%; }

.map-act15 #map-show{ transform: translate(-80%, -39.5%); }
.map-act15 #map-view span{ left: 80%; top: 39.5%; }

#map-show .content{
	opacity: 0;
	transition: opacity 0.5s;
}

.map-act1 #map-con1,
.map-act2 #map-con2,
.map-act3 #map-con3,
.map-act4 #map-con4,
.map-act5 #map-con5,
.map-act6 #map-con6,
.map-act7 #map-con7,
.map-act8 #map-con8,
.map-act9 #map-con9,
.map-act10 #map-con10,
.map-act11 #map-con11,
.map-act12 #map-con12,
.map-act13 #map-con13,
.map-act14 #map-con14,
.map-act15 #map-con15{ opacity: 1; }

@keyframes map-icon-style1{
	from{ transform: scale(0); opacity: 0; }
	75%{ transform: scale(0); opacity: 0; }
	to{ transform: scale(1); opacity: 1; }
}
.map-act1 #map-icon1,
.map-act2 #map-icon2,
.map-act3 #map-icon3,
.map-act11 #map-icon11,
.map-act13 #map-icon13,
.map-act14 #map-icon14,
.map-act15 #map-icon15{
	animation:'map-icon-style1' 2.0s ease-in-out 0s forwards;
	-ms-animation:map-icon-style1 2.0s ease-in-out 0s forwards;
	-moz-animation:map-icon-style1 2.0s ease-in-out 0s forwards;
	-o-animation:'map-icon-style1' 2.0s ease-in-out 0s forwards;
	-webkit-animation:'map-icon-style1' 2.0s ease-in-out 0s forwards;
}

@keyframes map-icon-style2{
	from{ transform:translateY(-1em); opacity: 0; }
	75%{ transform:translateY(-1em); opacity: 0; }
	to{ opacity: 1; }
}
.map-act5 #map-icon5,
.map-act7 #map-icon7,
.map-act10 #map-icon10{
	animation:'map-icon-style2' 2.0s ease-in-out 0s forwards;
	-ms-animation:map-icon-style2 2.0s ease-in-out 0s forwards;
	-moz-animation:map-icon-style2 2.0s ease-in-out 0s forwards;
	-o-animation:'map-icon-style2' 2.0s ease-in-out 0s forwards;
	-webkit-animation:'map-icon-style2' 2.0s ease-in-out 0s forwards;
}

@keyframes map-tag-style1{
	from{ width: 0%; opacity: 0; }
	75%{ width: 0%; opacity: 0; }
	to{ opacity: 1; }
}
.map-act1 #map-tag1,
.map-act5 #map-tag5,
.map-act7 #map-tag7,
.map-act10 #map-tag10,
.map-act11 #map-tag11,
.map-act14 #map-tag14,
.map-act15 #map-tag15{
	animation:'map-tag-style1' 2.0s ease-in-out 0s forwards;
	-ms-animation:map-tag-style1 2.0s ease-in-out 0s forwards;
	-moz-animation:map-tag-style1 2.0s ease-in-out 0s forwards;
	-o-animation:'map-tag-style1' 2.0s ease-in-out 0s forwards;
	-webkit-animation:'map-tag-style1' 2.0s ease-in-out 0s forwards;
}

@keyframes map-tag-style2{
	from{ height: 0%; opacity: 0; }
	75%{ height: 0%; opacity: 0; }
	to{ opacity: 1; }
}
.map-act2 #map-tag2,
.map-act3 #map-tag3,
.map-act13 #map-tag13{
	animation:'map-tag-style2' 2.0s ease-in-out 0s forwards;
	-ms-animation:map-tag-style2 2.0s ease-in-out 0s forwards;
	-moz-animation:map-tag-style2 2.0s ease-in-out 0s forwards;
	-o-animation:'map-tag-style2' 2.0s ease-in-out 0s forwards;
	-webkit-animation:'map-tag-style2' 2.0s ease-in-out 0s forwards;
}

@keyframes map-text{
	from{ transform: scale(0.8); opacity: 0; }
	75%{ transform: scale(0.8); opacity: 0; }
	to{ opacity: 1; }
}
.map-act1 #map-text1,
.map-act2 #map-text2,
.map-act3 #map-text3,
.map-act4 #map-text4,
.map-act6 #map-text6,
.map-act8 #map-text8,
.map-act9 #map-text9,
.map-act12 #map-text12{
	animation:'map-text' 2.0s ease-in-out 0s forwards;
	-ms-animation:map-text 2.0s ease-in-out 0s forwards;
	-moz-animation:map-text 2.0s ease-in-out 0s forwards;
	-o-animation:'map-text' 2.0s ease-in-out 0s forwards;
	-webkit-animation:'map-text' 2.0s ease-in-out 0s forwards;
}

@keyframes map-popup-off{
	from{ left: 0%; opacity: 1; }
	99.99%{ left: 0%; opacity: 0; }
	to{ left: 100%; opacity: 0; }
}
#map-popup5,
#map-popup7,
#map-popup9,
#map-video10,
#map-video11,
#map-popup13,
#map-popup14,
#map-popup15{
	animation:'map-popup-off' 0.5s ease-in-out 0s forwards;
	-ms-animation:map-popup-off 0.5s ease-in-out 0s forwards;
	-moz-animation:map-popup-off 0.5s ease-in-out 0s forwards;
	-o-animation:'map-popup-off' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'map-popup-off' 0.5s ease-in-out 0s forwards;
}

@keyframes map-popup{
	from{ left: 100%; opacity: 0; }
	75%{ left: 100%; opacity: 0; }
	75.01%{ left: 0%; opacity: 0; }
	to{ left: 0%; opacity: 1; }
}
.map-act5 #map-popup5,
.map-act7 #map-popup7,
.map-act9 #map-popup9,
.map-act10 #map-video10,
.map-act11 #map-video11,
.map-act13 #map-popup13,
.map-act14 #map-popup14,
.map-act15 #map-popup15{
	animation:'map-popup' 3.0s ease-in-out 0s forwards;
	-ms-animation:map-popup 3.0s ease-in-out 0s forwards;
	-moz-animation:map-popup 3.0s ease-in-out 0s forwards;
	-o-animation:'map-popup' 3.0s ease-in-out 0s forwards;
	-webkit-animation:'map-popup' 3.0s ease-in-out 0s forwards;
}

@keyframes map-popup-show-off{
	from{ transform: translateX(0%); opacity: 1; }
	to{ transform: translateX(100%); opacity: 0; }
}
#map-popup5 .show,
#map-popup7 .show,
#map-popup9 .show,
#map-popup13 .show,
#map-popup14 .show,
#map-popup15 .show{
	animation:'map-popup-show-off' 0.5s ease-in-out 0s forwards;
	-ms-animation:map-popup-show-off 0.5s ease-in-out 0s forwards;
	-moz-animation:map-popup-show-off 0.5s ease-in-out 0s forwards;
	-o-animation:'map-popup-show-off' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'map-popup-show-off' 0.5s ease-in-out 0s forwards;
}

@keyframes map-popup-show{
	from{ transform: translateX(100%); opacity: 0; }
	87.5%{ transform: translateX(100%); opacity: 0; }
	to{ transform: translateX(0%); opacity: 1; }
}
.map-act5 #map-popup5 .show,
.map-act7 #map-popup7 .show,
.map-act9 #map-popup9 .show,
.map-act13 #map-popup13 .show,
.map-act14 #map-popup14 .show,
.map-act15 #map-popup15 .show{
	animation:'map-popup-show' 3.0s ease-in-out 0s forwards;
	-ms-animation:map-popup-show 3.0s ease-in-out 0s forwards;
	-moz-animation:map-popup-show 3.0s ease-in-out 0s forwards;
	-o-animation:'map-popup-show' 3.0s ease-in-out 0s forwards;
	-webkit-animation:'map-popup-show' 3.0s ease-in-out 0s forwards;
}

@keyframes map-chart-bg-off{
	from{ opacity: 1; }
	to{ opacity: 0; }
}
#map-chart{
	animation:'map-chart-bg-off' 0.5s ease-in-out 0s forwards;
	-ms-animation:map-chart-bg-off 0.5s ease-in-out 0s forwards;
	-moz-animation:map-chart-bg-off 0.5s ease-in-out 0s forwards;
	-o-animation:'map-chart-bg-off' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'map-chart-bg-off' 0.5s ease-in-out 0s forwards;
}

@keyframes map-chart-bg{
	from{ opacity: 0; }
	to{ opacity: 1; }
}
.map-act3 #map-chart,
.map-act4 #map-chart,
.map-act6 #map-chart,
.map-act7 #map-chart,
.map-act8 #map-chart,
.map-act9 #map-chart,
.map-act10 #map-chart,
.map-act12 #map-chart,
.map-act13 #map-chart,
.map-act15 #map-chart{
	animation:'map-chart-bg' 0.5s ease-in-out 0.5s forwards;
	-ms-animation:map-chart-bg 0.5s ease-in-out 0.5s forwards;
	-moz-animation:map-chart-bg 0.5s ease-in-out 0.5s forwards;
	-o-animation:'map-chart-bg' 0.5s ease-in-out 0.5s forwards;
	-webkit-animation:'map-chart-bg' 0.5s ease-in-out 0.5s forwards;
}

@keyframes map-chart-off{
	from{ opacity: 1; }
	to{ opacity: 0; transform: scale(0.8);}
}
#map-chart3,
#map-chart4,
#map-chart6,
#map-chart7,
#map-chart8,
#map-chart9,
#map-chart10,
#map-chart12,
#map-chart13,
#map-chart15{
	animation:'map-chart-off' 0.5s ease-in-out 0s forwards;
	-ms-animation:map-chart-off 0.5s ease-in-out 0s forwards;
	-moz-animation:map-chart-off 0.5s ease-in-out 0s forwards;
	-o-animation:'map-chart-off' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'map-chart-off' 0.5s ease-in-out 0s forwards;
}

@keyframes map-chart{
	from{ opacity: 0; height: 0%; }
	to{ opacity: 1; height: 83.8%; }
}
.map-act3 #map-chart3,
.map-act4 #map-chart4,
.map-act6 #map-chart6,
.map-act7 #map-chart7,
.map-act8 #map-chart8,
.map-act9 #map-chart9,
.map-act10 #map-chart10,
.map-act12 #map-chart12,
.map-act13 #map-chart13,
.map-act15 #map-chart15{
	animation:'map-chart' 1.0s ease-in-out 1.0s forwards;
	-ms-animation:map-chart 1.0s ease-in-out 1.0s forwards;
	-moz-animation:map-chart 1.0s ease-in-out 1.0s forwards;
	-o-animation:'map-chart' 1.0s ease-in-out 1.0s forwards;
	-webkit-animation:'map-chart' 1.0s ease-in-out 1.0s forwards;
}

#map-page .map-back,
#map-page .map-next{
	width: 3em;
	height: 3em;
	top: 3%;
	cursor: pointer;
	transform: scale(0);
	opacity: 0;
}

#map-page .map-back{ left: 40%; }
#map-page .map-back i{ background-image: url("images/map-back.png"); }

#map-page .map-next{ right: 40%; }
#map-page .map-next i{ background-image: url("images/map-next.png"); }

#map-back1{ opacity: 0.3 !important; cursor: auto !important; }
#map-back1 i{ background-image: url("images/map-back2.png") !important; }

@keyframes map-back-shake{
	from{ }
	50%{ transform: translateX(-1em); }
	to{ }
}
#map-page .map-back i{
	animation:'map-back-shake' 2.0s linear 0s infinite;
	-ms-animation:map-back-shake 2.0s linear 0s infinite;
	-moz-animation:map-back-shake 2.0s linear 0s infinite;
	-o-animation:'map-back-shake' 2.0s linear 0s infinite;
	-webkit-animation:'map-back-shake' 2.0s linear 0s infinite;
}

@keyframes map-next-shake{
	from{ }
	50%{ transform: translateX(1em); }
	to{ }
}
#map-page .map-next i{
	animation:'map-next-shake' 2.0s linear 0s infinite;
	-ms-animation:map-next-shake 2.0s linear 0s infinite;
	-moz-animation:map-next-shake 2.0s linear 0s infinite;
	-o-animation:'map-next-shake' 2.0s linear 0s infinite;
	-webkit-animation:'map-next-shake' 2.0s linear 0s infinite;
}

.map-act1 #map-next1,
.map-act2 #map-next2,
.map-act3 #map-next3,
.map-act4 #map-next4,
.map-act5 #map-next5,
.map-act6 #map-next6,
.map-act7 #map-next7,
.map-act8 #map-next8,
.map-act9 #map-next9,
.map-act10 #map-next10,
.map-act11 #map-next11,
.map-act12 #map-next12,
.map-act13 #map-next13,
.map-act14 #map-next14,
.map-act15 #map-next15,
.map-act1 #map-back1,
.map-act2 #map-back2,
.map-act3 #map-back3,
.map-act4 #map-back4,
.map-act5 #map-back5,
.map-act6 #map-back6,
.map-act7 #map-back7,
.map-act8 #map-back8,
.map-act9 #map-back9,
.map-act10 #map-back10,
.map-act11 #map-back11,
.map-act12 #map-back12,
.map-act13 #map-back13,
.map-act14 #map-back14,
.map-act15 #map-back15{ transform: scale(1); opacity: 1; }

#end-page{
	background-image: url("images/end-bg.jpg");
}

#end-home{
	width: 9.7em;
	height: 3em;
	left: 2%;
	top: 3.6%;
	cursor: pointer;
	outline: none;
	transition: all 0.5s;
	transform: scale(0);
	background-image: url("images/end-home.png");
}

#end-home.on{
	transform: scale(1);
}

#end-home:hover{ margin-left: -0.5em; }

#end-text{
	width: 100%;
	height: 26.5%;
	left: 0%;
	top: 26.5%;
	background-image: url("images/end-text.png");
}

#end-logo{
	width: 18%;
	height: 4.2%;
	left: 41%;
	top: 71%;
	background-image: url("images/end-logo.png");
}

#end-editor{
	width: 100%;
	height: 4.7%;
	left: 0%;
	top: 87.5%;
	background-image: url("images/end-editor.png");
}

#end-assist{
	width: 100%;
	height: 5.4%;
	left: 0%;
	top: 58.7%;
	color: #fff;
	text-align: center;
}

#end-assist .btn{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 20.1%;
	height: 100%;
	outline: none;
	cursor: pointer;
	background: url("images/end-assist-btn.png") no-repeat center center;
	background-size: contain;
}

#end-assist .bar{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 24%;
	height: 100%;
	outline: none;
	cursor: pointer;
	margin: 0px 2em;
}

#end-assist .bar .bg1{ background-image: url("images/end-assist-bar1.png"); background-size: 100% auto; opacity: 1; }
#end-assist .bar .bg2{ background-image: url("images/end-assist-bar2.png"); background-size: 100% auto; opacity: 0; }

@keyframes end_bar1{
	from{ opacity: 1; }
	to{ opacity: 0; }
}
#end-assist.active .bar .bg1{
	animation:'end_bar1' 1s linear 0.0s forwards;
	-ms-animation:end_bar1 1s linear 0.0s forwards;
	-moz-animation:end_bar1 1s linear 0.0s forwards;
	-o-animation:'end_bar1' 1s linear 0.0s forwards;
	-webkit-animation:'end_bar1' 1s linear 0.0s forwards;
}

@keyframes end_bar2{
	from{ opacity: 0; }
	to{ opacity: 1; }
}
#end-assist.active .bar .bg2{
	animation:'end_bar2' 1s linear 0.0s forwards;
	-ms-animation:end_bar2 1s linear 0.0s forwards;
	-moz-animation:end_bar2 1s linear 0.0s forwards;
	-o-animation:'end_bar2' 1s linear 0.0s forwards;
	-webkit-animation:'end_bar2' 1s linear 0.0s forwards;
}

#end-assist .bar i{
	position: absolute;
	left: -6%;
	top: 0%;
	width: 12%;
	height: 100%;
	background: url("images/end-assist-circle.png") no-repeat center center;
	background-size: contain;
	cursor: pointer;
}

@keyframes end_bar_i{
	from{ left: -6%; }
	to{ left: 94%; }
}
#end-assist.active .bar i{
	animation:'end_bar_i' 1s linear 0.0s forwards;
	-ms-animation:end_bar_i 1s linear 0.0s forwards;
	-moz-animation:end_bar_i 1s linear 0.0s forwards;
	-o-animation:'end_bar_i' 1s linear 0.0s forwards;
	-webkit-animation:'end_bar_i' 1s linear 0.0s forwards;
}

#end-assist .num1,
#end-assist .num2{
	display: inline-block;
	vertical-align: top;
	height: 100%;
}

#end-assist .num1 img,
#end-assist .num2 img{
	height: 100%;
}

#end-assist p{
	display: inline-block;
	vertical-align: top;
	position: relative;
	top: 50%;
	transform: translate(0%, -50%);
}

#end-assist p label{
	font-size: 2.75em;
}

@keyframes end_show{
	from{ left: 100%; opacity: 0; }
	0.01%{ left: 0%; transform: scale(1.2);}
	to{ left: 0%; opacity:1; transform: scale(1); }
}
#end-page.show{
	animation:'end_show' 1.0s ease-in-out 0.0s forwards;
	-ms-animation:end_show 1.0s ease-in-out 0.0s forwards;
	-moz-animation:end_show 1.0s ease-in-out 0.0s forwards;
	-o-animation:'end_show' 1.0s ease-in-out 0.0s forwards;
	-webkit-animation:'end_show' 1.0s ease-in-out 0.0s forwards;
}

@keyframes end_show_abs{
	from{ transform: scale(0.8); }
	to{ opacity:1; transform: scale(1); }
}
#end-page.show #end-home,
#end-page.show #end-text,
#end-page.show #end-logo,
#end-page.show #end-editor,
#end-page.show #end-assist{
	animation:'end_show_abs' 0.5s ease-in-out 1.0s forwards;
	-ms-animation:end_show_abs 0.5s ease-in-out 1.0s forwards;
	-moz-animation:end_show_abs 0.5s ease-in-out 1.0s forwards;
	-o-animation:'end_show_abs' 0.5s ease-in-out 1.0s forwards;
	-webkit-animation:'end_show_abs' 0.5s ease-in-out 1.0s forwards;
}
#loading{
	position: fixed;
	background: #fff;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-position: center center;
	background-repeat: no-repeat;
	background-image:url("images/fp-bg1.jpg");
	background-size: cover;
	z-index: 9999;
}

#loading .cover{
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-image: url("images/fp-cover.png");
	background-size: cover;
}

#loading .middle{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
}

#loading h4{
	font-size: 2.8em;
	line-height: 3em;
	font-weight: normal;
}

#loading p{
	font-size: 2em;
	line-height: 3em;
	font-weight: normal;
}

#loading .bar{
	position: relative;
	width: 30em;
	height: 1em;
	border: 0.2em solid rgba(0,0,0,0.5);
	border-radius: 0.6em;
	background: #ffb853;
	overflow: hidden;
}

#loading .bar span{
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
	background: #dcf4ff;
}
#loading{
	position: fixed;
	background: #fff;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-position: center center;
	background-repeat: no-repeat;
	background-image:url("images/fp-bg1.jpg");
	background-size: cover;
	z-index: 9999;
}

#loading .cover{
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-image: url("images/fp-cover.png");
	background-size: cover;
}

#loading .middle{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
}

#loading .middle img{
	display: inline-block;
	vertical-align: top;
	height: 21em;
}