@charset "utf-8";
body{
	font-family:"Microsoft Yahei","SimSun";
	font-size:16px;
	color:#000;
	background:#fff;
	
	/*
	white-space: nowrap;
    overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;*/
}

/*
body::-webkit-scrollbar {
	display: none;
}*/

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: #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;
}

.abs0 b,.abs b,.abs0 i,.abs i{
	position: absolute;
	left: 0px;
	top: 0px;
	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;
}

#loading{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background: url("loading-images/loading-bg.jpg") no-repeat center center;
	background-size: cover;
	z-index: 9999;
}

#loading .text{
	width: 100%;
	height: 40.9%;
	left: 0%;
	top: 15%;
	text-align: center;
	background-image: url("loading-images/loading-text.png");
}

#loading .bar{
	width: 30%;
	height: 1.2em;
	left: calc(35% - 0.1em);
	top: 61%;
	border: 0.1em solid #218a85;
	border-radius: 0.7em;
	background: #fff;
}

#loading .bar span{
	position: absolute;
	height: 100%;
	border-radius: 0.7em;
	background: #218a85;
}

#loading .num{
	width: 100%;
	height: 1.5em;
	line-height: 1.5em;
	left: 0%;
	top: 68%;
	text-align: center;
	color: #218a85;
	font-size: 2em;
}

#loading .btn{
	width: 16%;
	height: 8.2%;
	left: 42%;
	top: 82.5%;
	text-align: center;
	background-image: url("loading-images/loading-btn.png");
	cursor: pointer;
	transition: transform 0.2s;
}

#loading .btn:hover{
	transform: scale(1.03);
}

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

#opening{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background: url("images/home-bg.jpg") no-repeat center center;
	background-size: cover;
	z-index: 5555;
}

#opening video{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	object-fit: cover;
	object-position: center center;
}

#opening .jump{
	position: absolute;
	width: 6.7%;
	height: 5.4%;
	left: 2%;
	top: 5%;
	background-image: url("images/jump-btn.png");
	cursor: pointer;
}

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

#home{ position: relative; width: 100%; height: 100%; background: url("images/home-bg.jpg") no-repeat center center; background-size: cover; }

#home .base{ width: 100%; height: 64.3%; left: 0%; bottom: 2%; transform: translateZ(-100em); }

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

@keyframes home-base-shake{
	from{ }
	50%{ transform: translateY(0.5em); }
	to{ }
}
#home .base i{
	animation:'home-base-shake' 6.0s linear 0s infinite;
	-ms-animation:home-base-shake 6.0s linear 0s infinite;
	-moz-animation:home-base-shake 6.0s linear 0s infinite;
	-o-animation:'home-base-shake' 6.0s linear 0s infinite;
	-webkit-animation:'home-base-shake' 6.0s linear 0s infinite;
}

#home .bird1{ width: 4.1%; height: 7.1%; left: 19.2%; top: 13.2%; }
#home .bird1 i{ background-image: url("images/home-bird1.png"); }

#home .bird2{ width: 8.1%; height: 6.6%; left: 60.8%; top: 5.8%; }
#home .bird2 i{ background-image: url("images/home-bird2.png"); }

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

@keyframes home-bird1{
	from{ }
	to{ transform: translateX(110%);  }
}
#home.on .bird1{
	animation:'home-bird1' 1.5s ease-in-out 3.0s forwards;
	-ms-animation:home-bird1 1.5s ease-in-out 3.0s forwards;
	-moz-animation:home-bird1 1.5s ease-in-out 3.0s forwards;
	-o-animation:'home-bird1' 1.5s ease-in-out 3.0s forwards;
	-webkit-animation:'home-bird1' 1.5s ease-in-out 3.0s forwards;
}

#home .cloud1{ width: 15.8%; height: 11%; left: 3.1%; top: 32.8%; }
#home .cloud1 i{ background-image: url("images/home-cloud1.png"); }

#home .cloud2{ width: 6.5%; height: 7.3%; left: 74%; top: 10.8%; }
#home .cloud2 i{ background-image: url("images/home-cloud2.png"); }

#home .cloud3{ width: 12.4%; height: 11.7%; left: 84.3%; top: 19.7%; }
#home .cloud3 i{ background-image: url("images/home-cloud3.png"); }

@keyframes home-cloud-shake{
	from{ }
	50%{ transform: translateX(2em); }
	to{ }
}
#home .cloud1 i,
#home .cloud2 i{
	animation:'home-cloud-shake' 6.0s linear 0s infinite;
	-ms-animation:home-cloud-shake 6.0s linear 0s infinite;
	-moz-animation:home-cloud-shake 6.0s linear 0s infinite;
	-o-animation:'home-cloud-shake' 6.0s linear 0s infinite;
	-webkit-animation:'home-cloud-shake' 6.0s linear 0s infinite;
}
#home .cloud3 i{
	animation:'home-cloud-shake' 6.0s linear -3s infinite;
	-ms-animation:home-cloud-shake 6.0s linear -3s infinite;
	-moz-animation:home-cloud-shake 6.0s linear -3s infinite;
	-o-animation:'home-cloud-shake' 6.0s linear -3s infinite;
	-webkit-animation:'home-cloud-shake' 6.0s linear -3s infinite;
}

@keyframes home-cloud1{
	from{ }
	to{ transform: translateX(-30%) translateY(59%);  }
}
#home.on .cloud1{
	animation:'home-cloud1' 3.0s ease-in-out 3.0s forwards;
	-ms-animation:home-cloud1 3.0s ease-in-out 3.0s forwards;
	-moz-animation:home-cloud1 3.0s ease-in-out 3.0s forwards;
	-o-animation:'home-cloud1' 3.0s ease-in-out 3.0s forwards;
	-webkit-animation:'home-cloud1' 3.0s ease-in-out 3.0s forwards;
}

@keyframes home-cloud2{
	from{ }
	to{ transform: translateX(71%);  }
}
#home.on .cloud2{
	animation:'home-cloud2' 3.0s ease-in-out 3.0s forwards;
	-ms-animation:home-cloud2 3.0s ease-in-out 3.0s forwards;
	-moz-animation:home-cloud2 3.0s ease-in-out 3.0s forwards;
	-o-animation:'home-cloud2' 3.0s ease-in-out 3.0s forwards;
	-webkit-animation:'home-cloud2' 3.0s ease-in-out 3.0s forwards;
}

#home .topic{ width: 61.7%; height: 46.1%; left: 18.2%; top: 8.2%; background-image: url("images/home-topic.png"); }

@keyframes home-topic{
	from{ transform: translateX(0.01%) translateY(0.01%) scale(0.99); }
	66.66%{ transform: translateX(0%) translateY(0%) scale(1); }
	to{ transform: translateX(-58%) translateY(-38%) scale(0.38);  }
}
#home.on .topic{
	animation:'home-topic' 4.5s ease-in-out 0s forwards;
	-ms-animation:home-topic 4.5s ease-in-out 0s forwards;
	-moz-animation:home-topic 4.5s ease-in-out 0s forwards;
	-o-animation:'home-topic' 4.5s ease-in-out 0s forwards;
	-webkit-animation:'home-topic' 4.5s ease-in-out 0s forwards;
}

#home .logo{ width: 50%; height: 2.5em; right: calc(2% + 3.8em); top: 3%; background-image: url("images/home-logo.png"); background-position: right center; background-size: auto 70%; }

#home .btn1{ width: 22.7%; height: 19.8%; left: 14.1%; top: 28%; cursor: pointer; transform: scale(0); }
#home .btn1 i{ background-image: url("images/home-btn1.png"); }

#home .btn2{ width: 22.7%; height: 19.8%; left: 64.1%; top: 24%; cursor: pointer; transform: scale(0); }
#home .btn2 i{ background-image: url("images/home-btn2.png"); }

#home .btn3{ width: 22.7%; height: 19.8%; left: 38.8%; top: 14%; cursor: pointer; transform: scale(0); }
#home .btn3 i{ background-image: url("images/home-btn3.png"); }

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

@keyframes home-btn{
	from{ transform: translateY(50%) scale(0.6); }
	to{ opacity: 1; transform: scale(1); }
}
#home.on .btn1{
	animation:'home-btn' 1.0s ease-in-out 4.4s forwards;
	-ms-animation:home-btn 1.0s ease-in-out 4.4s forwards;
	-moz-animation:home-btn 1.0s ease-in-out 4.4s forwards;
	-o-animation:'home-btn' 1.0s ease-in-out 4.4s forwards;
	-webkit-animation:'home-btn' 1.0s ease-in-out 4.4s forwards;
}
#home.on .btn2{
	animation:'home-btn' 1.0s ease-in-out 4.9s forwards;
	-ms-animation:home-btn 1.0s ease-in-out 4.9s forwards;
	-moz-animation:home-btn 1.0s ease-in-out 4.9s forwards;
	-o-animation:'home-btn' 1.0s ease-in-out 4.9s forwards;
	-webkit-animation:'home-btn' 1.0s ease-in-out 4.9s forwards;
}
#home.on .btn3{
	animation:'home-btn' 1.0s ease-in-out 5.4s forwards;
	-ms-animation:home-btn 1.0s ease-in-out 5.4s forwards;
	-moz-animation:home-btn 1.0s ease-in-out 5.4s forwards;
	-o-animation:'home-btn' 1.0s ease-in-out 5.4s forwards;
	-webkit-animation:'home-btn' 1.0s ease-in-out 5.4s forwards;
}

#home .editor-btn{ width: 7%; height: 4.1%; right: 2%; bottom: 5.5%; cursor: pointer; transform: scale(0); transition: all 0.5s; }

#home .editor-btn i{ background-image: url("images/home-editor-btn.png"); transition: transform 0.2s; }

#home .editor-btn:hover i{ transform: scale(1.05); }

@keyframes home-editor-btn{
	from{ }
	to{ opacity: 1; transform: scale(1) translateZ(100em); }
}

#home.on .editor-btn{
	animation:'home-editor-btn' 1.0s ease-in-out 5.4s forwards;
	-ms-animation:home-editor-btn 1.0s ease-in-out 5.4s forwards;
	-moz-animation:home-editor-btn 1.0s ease-in-out 5.4s forwards;
	-o-animation:'home-editor-btn' 1.0s ease-in-out 5.4s forwards;
	-webkit-animation:'home-editor-btn' 1.0s ease-in-out 5.4s forwards;
}

#home .editor-btn.off{ bottom: -4.1%; }

#home .editor-show{ width: 9.4%; height: 54%; right: 0.9%; bottom: 0.5%; background-image: url("images/home-editor-show.png"); background-position: center bottom; }

@keyframes home-editor-show{
	from{ opacity: 0; }
	10%{  opacity: 1; }
	90%{ opacity: 1; }
	to{ opacity: 0; }
}

#home.on .editor-show.on{
	animation:'home-editor-show' 5.0s ease-in-out 0s forwards;
	-ms-animation:home-editor-show 5.0s ease-in-out 0s forwards;
	-moz-animation:home-editor-show 5.0s ease-in-out 0s forwards;
	-o-animation:'home-editor-show' 5.0s ease-in-out 0s forwards;
	-webkit-animation:'home-editor-show' 5.0s ease-in-out 0s forwards;
}

.act{ position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; overflow-y: auto; opacity: 0; transform: scale(0); scrollbar-width: none; -ms-overflow-style: none; }

.act::-webkit-scrollbar{ display: none; }

@keyframes act-show{
	from{ transform: scale(1.2); }
	to{ opacity: 1; transform: scale(1); }
}
.act.show{
	animation:'act-show' 0.6s linear 0s forwards;
	-ms-animation:act-show 0.6s linear 0s forwards;
	-moz-animation:act-show 0.6s linear 0s forwards;
	-o-animation:'act-show' 0.6s linear 0s forwards;
	-webkit-animation:'act-show' 0.6s linear 0s forwards;
}

@keyframes act-hide{
	from{ opacity: 1; transform: scale(1); }
	99.99%{ opacity: 0; transform: scale(1.2); }
	to{ opacity: 0; transform: scale(0); }
}
.act.hide{
	animation:'act-hide' 0.6s linear 0s forwards;
	-ms-animation:act-hide 0.6s linear 0s forwards;
	-moz-animation:act-hide 0.6s linear 0s forwards;
	-o-animation:'act-hide' 0.6s linear 0s forwards;
	-webkit-animation:'act-hide' 0.6s linear 0s forwards;
}

.act .box{ position: absolute; height: 100%; left: 0px; top: 0px; overflow: hidden; white-space: nowrap; }

.body-bg{ position: relative; display: inline-block; vertical-align: top; max-width: none; height: 100%; margin-left: -1px; }

.frame img{ width: 100%; max-height: none; }

#act1 .upper1{ width: 1.8%; height: 59.2%; left: 1.3%; bottom: 0%; background-image: url("images/act1-upper1.png"); background-position: center bottom; z-index: 2; transform: translateZ(100em); }

#act1 .upper2{ width: 2.6%; height: 29.6%; left: 31.3%; bottom: 72%; }

#act1 .upper3{ width: 1.3%; height: 6.2%; left: 50.5%; bottom: 89.3%; background-image: url("images/act1-upper3.png"); }

@keyframes act1-upper3{
	from{ }
	50%{ transform: translateY(-30%) scale(0.95); }
	to{ }
}
#act1 .upper3{
	animation:'act1-upper3' 3.0s linear 0s infinite;
	-ms-animation:act1-upper3 3.0s linear 0s infinite;
	-moz-animation:act1-upper3 3.0s linear 0s infinite;
	-o-animation:'act1-upper3' 3.0s linear 0s infinite;
	-webkit-animation:'act1-upper3' 6.0s linear 0s infinite;
}

#act1 .upper4{ width: 0.7%; height: 6.7%; left: 65.8%; bottom: 87%; background-image: url("images/act1-upper4.png"); }

@keyframes act1-upper4{
	from{ }
	50%{ transform: translateY(-30%) scale(0.95); }
	to{ }
}
#act1 .upper4{
	animation:'act1-upper4' 3.0s linear 0s infinite;
	-ms-animation:act1-upper4 3.0s linear 0s infinite;
	-moz-animation:act1-upper4 3.0s linear 0s infinite;
	-o-animation:'act1-upper4' 3.0s linear 0s infinite;
	-webkit-animation:'act1-upper4' 6.0s linear 0s infinite;
}

#act1 .upper5{ width: 3.7%; height: 66.1%; left: 73.8%; bottom: 0%; }

#act1 .upper6{ width: 4.5%; height: 38.4%; left: 83%; bottom: 58.6%; }

#act1 .upper7{ width: 4.4%; height: 37.1%; left: 89.1%; bottom: 0%; background-image: url("images/act1-upper7.png"); background-position: center bottom;  }

#act1 .upper8{ width: 3.4%; height: 43.8%; left: -3.4%; bottom: 16.2%; }

@keyframes act1-upper8{
	from{ transform: translate(0%,0%) scale(0.9); opacity: 0; }
	12.5%{ transform: translate(100%,0%) scale(1); opacity: 1; }
	25%{ transform: translate(200%,-3.6%); }
	37.5%{ transform: translate(300%,0%); }
	50%{ transform: translate(400%,15.5%); }
	62.5%{ transform: translate(500%,14.0%); }
	75%{ transform: translate(600%,14%); }
	87.5%{ transform: translate(700%,9.1%) scale(1); opacity: 1; }
	to{ transform: translate(800%,3.3%) scale(0.9); opacity: 0; }
}

#act1.show .upper8 img{
	animation:'act1-upper8' 12s linear 0s infinite;
	-ms-animation:act1-upper8 12s linear 0s infinite;
	-moz-animation:act1-upper8 12s linear 0s infinite;
	-o-animation:'act1-upper8' 12s linear 0s infinite;
	-webkit-animation:'act1-upper8' 12s linear 0s infinite;
}

#act1 .upper9{ width: 1.7%; height: 35.7%; left: 33.6%; bottom: 36.5%; }

#act1 .upper10{ width: 1.3%; height: 34.3%; left: 42.9%; bottom: 25.4%; }

@keyframes act1-upper10{
	from{ transform: translate(0%,0%) scale(0.9); opacity: 0; }
	10%{ transform: translate(100%,11.3%) scale(1); opacity: 1; }
	20%{ transform: translate(200%,19.4%); }
	30%{ transform: translate(300%,24.9%); }
	40%{ transform: translate(400%,26.4%); }
	50%{ transform: translate(500%,25.6%); }
	60%{ transform: translate(600%,26.1%); }
	70%{ transform: translate(700%,22.9%); }
	80%{ transform: translate(800%,19.8%); }
	90%{ transform: translate(900%,16.3%) scale(1); opacity: 1; }
	to{ transform: translate(1000%,12.4%) scale(0.9); opacity: 0; }
}
#act1.show .upper10 img{
	animation:'act1-upper10' 15.0s linear 0s infinite;
	-ms-animation:act1-upper10 15.0s linear 0s infinite;
	-moz-animation:act1-upper10 15.0s linear 0s infinite;
	-o-animation:'act1-upper10' 15.0s linear 0s infinite;
	-webkit-animation:'act1-upper10' 15.0s linear 0s infinite;
}

#act1 .upper11{ width: 1.3%; height: 17.4%; left: 59.2%; bottom: 63.3%; }

@keyframes act1-upper11{
	from{ transform: translate(0%,0%) scale(0.9); opacity: 0; }
	16.6%{ transform: translate(100%,-3.8%) scale(1); opacity: 1; }
	33.2%{ transform: translate(200%,-3.8%); }
	49.8%{ transform: translate(300%,0%); }
	66.4%{ transform: translate(400%,3.8%); }
	83.0%{ transform: translate(500%,5.3%) scale(1); opacity: 1; }
	to{ transform: translate(600%,16%) scale(0.9); opacity: 0; }
}
#act1.show .upper11 img{
	animation:'act1-upper11' 9.0s linear 0s infinite;
	-ms-animation:act1-upper11 9.0s linear 0s infinite;
	-moz-animation:act1-upper11 9.0s linear 0s infinite;
	-o-animation:'act1-upper11' 9.0s linear 0s infinite;
	-webkit-animation:'act1-upper11' 9.0s linear 0s infinite;
}

#act1 .upper12{ width: 1.4%; height: 26.8%; left: 91.9%; bottom: 28.5%; background-image: url("images/act1-upper12.png"); }

#act1 .link-video{ width: 1.8%; height: 4.6%; background-image: url("images/act1-link-video.png"); cursor: pointer; z-index: 9; }

#act1 .link{ height: 18.3%; cursor: pointer; z-index: 9; }

#act1 .link1{ width: 5.6%; left: 0.6%; top: 11%; background-image: url("images/act1-link1.png"); }

#act1 .link1-video{ left: 4.3%; top: 29.7%; }

#act1 .link2{ width: 2.7%; height: 11.7%; left: 11.3%; top: 55.8%; cursor: pointer; }

#act1 .link3{ width: 7.1%; height: 20.3%; left: 13.5%; top: 12.6%; background-image: url("images/act1-link3.png"); }

#act1 .link3-video{ left: 18.6%; top: 33.3%; }

#act1 .link4{ width: 5.8%; left: 26.2%; top: 21.7%; background-image: url("images/act1-link4.png"); }

#act1 .link5{ width: 6.3%; left: 36.2%; top: 11.3%; background-image: url("images/act1-link5.png"); }

#act1 .link5-video{ left: 40.4%; top: 29.8%; }

#act1 .link6{ width: 6.3%; left: 46.3%; top: 16.6%; background-image: url("images/act1-link6.png"); }

#act1 .link6-video1{ left: 48.1%; top: 37.6%; background-image: url("images/act1-link-video6a.png"); }

#act1 .link6-video2{ left: 50.1%; top: 37.6%; background-image: url("images/act1-link-video6b.png"); }

#act1 .link7{ width: 5.8%; left: 66.2%; top: 6.4%; background-image: url("images/act1-link7.png"); }

#act1 .link7-video{ left: 70.1%; top: 24.9%; }

#act1 .link8{ width: 5.8%; left: 77.4%; top: 42.1%; background-image: url("images/act1-link8.png"); }

#act1 .link8-video{ left: 81.2%; top: 60.8%; }

#act1 .link9{ width: 5.4%; left: 90.6%; top: 7.7%; background-image: url("images/act1-link9.png"); }

#act1 .link9-video{ left: 94.1%; top: 26.1%; }

#act1 .point{ width: 0.7%; height: 9%; background-image: url("images/link-point.gif"); opacity: 0.6; cursor: pointer; z-index: 10; transform: translateZ(100em); }

#act1 .point1{ left: 4.8%; top: 7.8%; }

#act1 .point2{ left: 13.6%; top: 51.8%; }

#act1 .point3{ left: 19.2%; top: 10.9%; }

#act1 .point4{ left: 30.4%; top: 18.2%; }

#act1 .point5{ left: 40.9%; top: 7.6%; }

#act1 .point6{ left: 50.9%; top: 12.8%; }

#act1 .point7{ left: 70.5%; top: 2.5%; }

#act1 .point8{ left: 81.7%; top: 38.6%; }

#act1 .point9{ left: 94.4%; top: 4.4%; }

#act1 .next{ width: 2%; height: 8%; right: 0.5%; top: 40%; cursor: pointer; transform: translateZ(100em); }

#act1 .next i{ background-image: url("images/next.png"); background-position: right center; }


#act2 .upper1{ width: 6.3%; height: 96.4%; left: 18.4%; bottom: -13%; z-index: 2; transform: translateZ(100em); }

#act2 .upper2{ width: 17.1%; height: 22.7%; left: 17.9%; bottom: 30.3%; }

#act2 .upper3{ width: 2%; height: 12.7%; left: 21.4%; bottom: 81%; background-image: url("images/act2-upper3.png"); }

@keyframes act2-upper3{
	from{ }
	50%{ transform: translateY(-10%) scale(0.95); }
	to{ }
}
#act2 .upper3{
	animation:'act2-upper3' 3.0s linear 0s infinite;
	-ms-animation:act2-upper3 3.0s linear 0s infinite;
	-moz-animation:act2-upper3 3.0s linear 0s infinite;
	-o-animation:'act2-upper3' 3.0s linear 0s infinite;
	-webkit-animation:'act2-upper3' 3.0s linear 0s infinite;
}

#act2 .upper4{ width: 7.7%; height: 39.8%; left: 27.1%; bottom: 0%; background-image: url("images/act2-upper4.png"); background-position: center bottom; z-index: 2; transform: translateZ(100em); }

#act2 .upper5{ width: 13.3%; height: 65.4%; left: 43.6%; bottom: 0%; background-image: url("images/act2-upper5.png"); background-position: center bottom; transform: translateZ(100em); }

#act2 .upper6{ width: 1.1%; height: 10%; left: 80.8%; bottom: 86%; background-image: url("images/act2-upper6.png"); }

@keyframes act2-upper6{
	from{ }
	50%{ transform: translateY(-20%) scale(0.95); }
	to{ }
}
#act2 .upper6{
	animation:'act2-upper6' 3.0s linear 0s infinite;
	-ms-animation:act2-upper6 3.0s linear 0s infinite;
	-moz-animation:act2-upper6 3.0s linear 0s infinite;
	-o-animation:'act2-upper6' 3.0s linear 0s infinite;
	-webkit-animation:'act2-upper3' 6.0s linear 0s infinite;
}

#act2 .upper7{ width: 4.2%; height: 67.2%; left: 91%; bottom: 0%; background-image: url("images/act2-upper7.png"); background-position: center bottom; z-index: 2; transform: translateZ(100em); }

#act2 .upper8{ width: 3.8%; height: 43.7%; left: 7%; bottom: 34.2%; }

@keyframes act2-upper8{
	from{ transform: translate(0%,0%) scale(0.8); opacity: 0; }
	16.6%{ transform: translate(100%,15.5%) scale(1); opacity: 1; }
	33.2%{ transform: translate(200%,22.5%); }
	49.8%{ transform: translate(300%,27.7%); }
	66.4%{ transform: translate(400%,28.7%); }
	83.0%{ transform: translate(500%,27.4%) scale(1); opacity: 1; }
	to{ transform: translate(600%,23.7%) scale(0.9); opacity: 0; }
}
#act2.show .upper8 img{
	animation:'act2-upper8' 9.0s linear 0s infinite;
	-ms-animation:act2-upper8 9.0s linear 0s infinite;
	-moz-animation:act2-upper8 9.0s linear 0s infinite;
	-o-animation:'act2-upper8' 9.0s linear 0s infinite;
	-webkit-animation:'act2-upper8' 9.0s linear 0s infinite;
}

#act2 .upper9{ width: 2.8%; height: 48.7%; left: 31%; bottom: 24.1%; }

@keyframes act2-upper9{
	from{ transform: translate(0%,0%) scale(0.9); opacity: 0; }
	14.3%{ transform: translate(100%,-5.2%) scale(1); opacity: 1; }
	28.6%{ transform: translate(200%,-9.8%); }
	42.8%{ transform: translate(300%,-14.5%); }
	57.1%{ transform: translate(400%,-18.3%); }
	71.4%{ transform: translate(500%,-24.6%); }
	85.7%{ transform: translate(600%,-25.7%) scale(1); opacity: 1; }
	to{ transform: translate(700%,-19.4%) scale(0.9); opacity: 0; }
}
#act2.show .upper9 img{
	animation:'act2-upper9' 14s linear 0s infinite;
	-ms-animation:act2-upper9 14s linear 0s infinite;
	-moz-animation:act2-upper9 14s linear 0s infinite;
	-o-animation:'act2-upper9' 14s linear 0s infinite;
	-webkit-animation:'act2-upper9' 14s linear 0s infinite;
}

#act2 .upper10{ width: 0.76%; height: 15.7%; left: 53.8%; bottom: 80.6%; }

@keyframes act2-upper10{
	from{ transform: translate(0%,0%) scale(0.9); opacity: 0; }
	5%{ transform: translate(100%,-4.2%) scale(1); opacity: 1; }
	10%{ transform: translate(200%,-8.4%); }
	15%{ transform: translate(300%,-11%); }
	20%{ transform: translate(400%,-11%); }
	25%{ transform: translate(500%,-11%); }
	30%{ transform: translate(600%,-11%); }
	35%{ transform: translate(700%,-11%); }
	40%{ transform: translate(800%,-7.6%); }
	45%{ transform: translate(900%,-7.6%); }
	50%{ transform: translate(1000%,-7.6%); }
	55%{ transform: translate(1100%,-7.6%); }
	60%{ transform: translate(1200%,-5.9%); }
	65%{ transform: translate(1300%,0%); }
	70%{ transform: translate(1400%,1.7%); }
	75%{ transform: translate(1500%,6%); }
	80%{ transform: translate(1600%,10.1%); }
	85%{ transform: translate(1700%,16.1%); }
	90%{ transform: translate(1800%,24.5%); }
	95%{ transform: translate(1900%,35.5%) scale(1); opacity: 1; }
	to{ transform: translate(2000%,50.8%) scale(0.9); opacity: 0; }
}
#act2.show .upper10 img{
	animation:'act2-upper10' 30s linear 0s infinite;
	-ms-animation:act2-upper10 30s linear 0s infinite;
	-moz-animation:act2-upper10 30s linear 0s infinite;
	-o-animation:'act2-upper10' 30s linear 0s infinite;
	-webkit-animation:'act2-upper10' 30s linear 0s infinite;
}

#act2 .upper11{ width: 3.5%; height: 33.9%; left: 60.9%; bottom: 2.6%; }

#act2 .upper12{ width: 4%; height: 45.3%; left: 72.7%; bottom: 3.2%; }

@keyframes act2-upper12{
	from{ transform: translate(0%,0%) scale(0.9); opacity: 0; }
	14.3%{ transform: translate(100%,0%) scale(1); opacity: 1; }
	28.6%{ transform: translate(200%,-3.9%); }
	42.8%{ transform: translate(300%,-8%); }
	57.1%{ transform: translate(400%,-17%); }
	71.4%{ transform: translate(500%,-30.4%); }
	85.7%{ transform: translate(600%,-34.4%) scale(1); opacity: 1; }
	to{ transform: translate(700%,-34.4%) scale(0.9); opacity: 0; }
}

#act2.show .upper12 img{
	animation:'act2-upper12' 10.5s linear 0s infinite;
	-ms-animation:act2-upper12 10.5s linear 0s infinite;
	-moz-animation:act2-upper12 10.5s linear 0s infinite;
	-o-animation:'act2-upper12' 10.5s linear 0s infinite;
	-webkit-animation:'act2-upper12' 10.5s linear 0s infinite;
}

#act2 .link-video{ width: 2.2%; height: 4.8%; background-image: url("images/act2-link-video.png"); cursor: pointer; z-index: 9; }

#act2 .link{ height: 19%; cursor: pointer; z-index: 9; }

#act2 .link1{ width: 7.2%; left: 0.9%; top: 27.4%; background-image: url("images/act2-link1.png"); }

#act2 .link1-video{ left: 5.6%; top: 46.5%; }

#act2 .link2{ width: 7.5%; left: 12.1%; top: 9.7%; background-image: url("images/act2-link2.png"); }

#act2 .link3{ width: 2.6%; height: 10%; left: 17%; top: 46%; cursor: pointer; }

#act2 .link4{ width: 7.1%; left: 25.3%; top: 14.1%; background-image: url("images/act2-link4.png"); }

#act2 .link4-video{ left: 30%; top: 33.4%; }

#act2 .link5{ width: 6.2%; left: 37.4%; top: 8.3%; background-image: url("images/act2-link5.png"); }

#act2 .link5-video{ left: 41.2%; top: 27.8%; }

#act2 .link6{ width: 7.5%; left: 46.8%; top: 6.4%; background-image: url("images/act2-link6.png"); }

#act2 .link6-video{ left: 51.9%; top: 25.8%; }

#act2 .link7{ width: 6.7%; left: 55.1%; top: 65.4%; background-image: url("images/act2-link7.png"); }

#act2 .link7-video{ left: 59.7%; top: 84.8%; }

#act2 .link8{ width: 6.2%; left: 68.2%; top: 40.6%; background-image: url("images/act2-link8.png"); }

#act2 .link8-video{ left: 72.5%; top: 60%; }

#act2 .link9{ width: 6%; left: 84.5%; top: 20.2%; background-image: url("images/act2-link9.png"); }

#act2 .link9-video{ left: 88.2%; top: 39.6%; }

#act2 .point{ width: 0.83%; height: 9%; background-image: url("images/link-point.gif"); opacity: 0.6; cursor: pointer; z-index: 10; transform: translateZ(100em); }

#act2 .point1{ left: 6.3%; top: 24%; }

#act2 .point2{ left: 17.7%; top: 5.6%; }

#act2 .point3{ left: 19%; top: 42.1%; }

@keyframes act2-point3{
	from{ }
	35%{ transform: scale(1); opacity: 0.6; }
	46%{ transform: scale(0); opacity: 0; }
	57%{ transform: scale(1); opacity: 0.6; }
	to{ }
}
#act2.show .point3{
	animation:'act2-point3' 9.0s linear 0s infinite;
	-ms-animation:act2-point3 9.0s linear 0s infinite;
	-moz-animation:act2-point3 9.0s linear 0s infinite;
	-o-animation:'act2-point3' 9.0s linear 0s infinite;
	-webkit-animation:'act2-point3' 9.0s linear 0s infinite;
}

#act2 .point4{ left: 30.5%; top: 10.1%; }

#act2 .point5{ left: 41.5%; top: 4.2%; }

#act2 .point6{ left: 52.5%; top: 3.2%; }

#act2 .point7{ left: 59.8%; top: 60.6%; }

#act2 .point8{ left: 72.5%; top: 36.2%; }

#act2 .point9{ left: 88.6%; top: 16.8%; }

#act2 .next{ width: 2.3%; height: 8%; right: 0.6%; top: 40%; cursor: pointer; transform: translateZ(100em); }

#act2 .next i{ background-image: url("images/next.png"); background-position: right center;  }


#act3{ overflow-y: hidden; background: url("images/bg3.jpg") no-repeat center center; background-size: cover; }

#act3 .tag{ width: 12.3%; height: 13.9%; left: 62.1%; top: 31%; background-image: url("images/act3-tag.png"); }

#act3 .link-video{ width: 8.6%; height: 3.9%; background-image: url("images/act3-link-video.png"); cursor: pointer; z-index: 9; }

#act3 .link{ cursor: pointer; z-index: 9; }

#act3 .link1{ width: 19.8%; height: 5%; left: 73.8%; top: 50.6%; background-image: url("images/act3-link1.png"); }

#act3 .link1-video{ left: 84.6%; top: 58.3%; }

#act3 .link2{ width: 21.7%; height: 5%; left: 52.2%; top: 81.3%; background-image: url("images/act3-link2.png"); }

#act3 .link2-video{ left: 62.3%; top: 89.6%; }

#act3 .link3{ width: 18.2%; height: 9.6%; left: 14.9%; top: 75%; background-image: url("images/act3-link3.png"); }

#act3 .link3-video{ left: 24.3%; top: 87.4%; }

#act3 .link4{ width: 19%; height: 9.6%; left: 32.9%; top: 42.9%; background-image: url("images/act3-link4.png"); }

#act3 .link4-video{ left: 43.1%; top: 55.6%; }

#act3 .link5{ width: 16%; height: 9.6%; left: 7.6%; top: 18.4%; background-image: url("images/act3-link5.png"); }

#act3 .link5-video{ left: 14.8%; top: 31%; }

#act3 .point{ width: 4.3%; height: 9%; background-image: url("images/link-point.gif"); opacity: 0.6; cursor: pointer; z-index: 10; transform: translateZ(100em); }

#act3 .point1{ left: 88%; top: 42.5%; }

#act3 .point2{ left: 68.3%; top: 72.9%; }

#act3 .point3{ left: 28.1%; top: 66.4%; }

#act3 .point4{ left: 46.1%; top: 34.1%; }

#act3 .point5{ left: 18.1%; top: 10.4%; }

.back{ width: 12.1%; height: 7.4%; right: -15%; bottom: 3.5%; background-image: url("images/act-back.png"); cursor: pointer; opacity: 0;  z-index: 99; }

.back.on{ opacity: 1; right: 1.5%; }

@keyframes link-shake{
	from{ }
	50%{ transform: scale(1.05); }
	to{ }
}
.link{
	animation:'link-shake' 3.0s linear 0s infinite;
	-ms-animation:link-shake 3.0s linear 0s infinite;
	-moz-animation:link-shake 3.0s linear 0s infinite;
	-o-animation:'link-shake' 3.0s linear 0s infinite;
	-webkit-animation:'link-shake' 3.0s linear 0s infinite;
}
.link-video{
	animation:'link-shake' 3.0s linear -1.5s infinite;
	-ms-animation:link-shake 3.0s linear -1.5s infinite;
	-moz-animation:link-shake 3.0s linear -1.5s infinite;
	-o-animation:'link-shake' 3.0s linear -1.5s infinite;
	-webkit-animation:'link-shake' 3.0s linear -1.5s infinite;
}

@keyframes next-shake{
	from{ }
	50%{ transform: translateX(10%); }
	to{ }
}
.next i{
	animation:'next-shake' 3.0s linear 0s infinite;
	-ms-animation:next-shake 3.0s linear 0s infinite;
	-moz-animation:next-shake 3.0s linear 0s infinite;
	-o-animation:'next-shake' 3.0s linear 0s infinite;
	-webkit-animation:'next-shake' 3.0s linear 0s infinite;
}

@keyframes back-shake{
	from{ }
	50%{ transform: translateY(10%); }
	to{ }
}
.back{
	animation:'back-shake' 3.0s linear 0s infinite;
	-ms-animation:back-shake 3.0s linear 0s infinite;
	-moz-animation:back-shake 3.0s linear 0s infinite;
	-o-animation:'back-shake' 3.0s linear 0s infinite;
	-webkit-animation:'back-shake' 3.0s linear 0s infinite;
}


#drop-cover{ position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: rgba(0,0,0,0.5); transform: scale(0); opacity: 0; transition: opacity 0.5s; }

#drop-cover.on{ transform: scale(1) translateZ(100em); z-index: 8888; opacity: 1; }

.text-drop{ position: absolute; width: 161.04vh; height: 84.24%; background: url("images/drop-text-bg.png"); background-size: 100% 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0); -moz-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); -o-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); opacity: 0; transition: all 0.5s; }

.text-drop.on{ -webkit-transform: translate(-50%, -50%) scale(1) translateZ(100em); -moz-transform: translate(-50%, -50%) scale(1) translateZ(100em); -ms-transform: translate(-50%, -50%) scale(1) translateZ(100em); -o-transform: translate(-50%, -50%) scale(1) translateZ(100em); transform: translate(-50%, -50%) scale(1) translateZ(100em); opacity: 1; z-index: 9999; }

.text-drop .show{ position: absolute; width: 82%; height: 77%; left: 10%; top: 13.5%; overflow-y: auto; padding-right: 7%; scrollbar-color: #ddd #b3b3b3; }

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

.text-drop .show img{ width: 100%; max-height: none; }

.text-drop .close{ position: absolute; width: 4.1%; height: 8%; right: 4%; top: 10.4%; background: url("images/drop-text-close.png") no-repeat center center; background-size: contain; cursor: pointer; z-index: 9; transition: transform 0.2s; }

.text-drop .close:hover{ transform: scale(1.1); }

.video-drop{ position: absolute; width: 119.46vh; height: 84.8%; background: url("images/drop-video-bg.png"); background-size: 100% 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0); -moz-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); -o-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); opacity: 0; transition: all 0.5s; }

.video-drop.on{ -webkit-transform: translate(-50%, -50%) scale(1) translateZ(100em); -moz-transform: translate(-50%, -50%) scale(1) translateZ(100em); -ms-transform: translate(-50%, -50%) scale(1) translateZ(100em); -o-transform: translate(-50%, -50%) scale(1) translateZ(100em); transform: translate(-50%, -50%) scale(1) translateZ(100em); opacity: 1; z-index: 9999; }

.video-drop .show{ position: absolute; width: 90.4%; height: 70.8%; right: 4.8%; top: 5%; overflow: hidden; background: #000; }

.video-drop .show video{ width: 100%; height: 100%; background: #000; object-fit: cover; }

.video-drop .close{ position: absolute; width: 4.4%; height: 6.2%; right: 4.8%; top: 79.6%; background: url("images/drop-video-close.png") no-repeat center center; background-size: contain; cursor: pointer; z-index: 9; transition: transform 0.2s; }

.video-drop .close:hover{ transform: scale(1.1); }