@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;
}

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

.abs0 b,.abs b,.abs0 i,.abs i,.ly-abs0 i,.ly-abs0 b{
	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;
	background: #fff;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url("images/bg1_01.jpg");
	background-size: cover;
	z-index: 9999;
}

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

#loading img{
	display: inline-block;
	vertical-align: top;
}

#loading .logo{
	margin-bottom: 3em;
}

#loading .logo img{
	height: 4em;
}

#loading .flower img{
	height: 7.5em;
}

#loading h4{
	font-size: 2em;
	line-height: 3em;
	margin-top: 1em;
	font-weight: normal;
}

#loading .btn{
	margin-top: 2em;
}

#loading .btn img{
	height: 3.5em;
	cursor: pointer;
	transition: all 0.2s;
	max-width: none;
}

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

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

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

#nav{
	position: fixed;
	width: 56vh;
	height: 100%;
	right: 0px;
	top: 0px;
	background:rgba(0,0,0,0.6);
	opacity: 0;
	transform: scale(0);
	transition: all 0.2s;
	z-index: 8888;
}

#nav.off{
	right: -56vh;
}

#nav .nav-bg{
	height: 100%;
}

#nav .nav-arrow1,#nav .nav-arrow2{
	width: 24%;
	height: 10.4%;
	top: 44.8%;
	left: -24%;
	background-position: right center;
	transition: all 0.2s;
	cursor: pointer;
}

#nav .nav-arrow1{ background-image: url("images/nav-arrow1.png"); }
#nav .nav-arrow2{ background-image: url("images/nav-arrow2.png"); }

#nav.off .nav-arrow1{
	opacity: 1;
	left: -24%;
	transform: scale(1);
}

#nav.off .nav-arrow2{
	opacity: 0;
	left: 0%;
	transform: scale(0);
}

#nav.on .nav-arrow1{
	opacity: 0;
	left: 0%;
	transform: scale(0);
}

#nav.on .nav-arrow2{
	opacity: 1;
	left: -24%;
	transform: scale(1);
}

#nav .nav-topic{
	width: 83.4%;
	height: 14.2%;
	left: 11.3%;
	top: 8.6%;
	background-image: url("images/nav-topic.png");
}

#nav .nav-show{
	width: 75.6%;
	height: 57%;
	left: 12.2%;
	top: 28.2%;
}

#nav .nav-show .line{
	width: 0.64%;
	height: 100%;
	left: 4.1%;
	top: 0%;
	background: rgba(174,174,174,0.8);
}

#nav .nav-show li{
	position: absolute;
	overflow: visible;
	width: 80%;
	height: 6.6%;
	left: 13%;
	cursor: pointer;
}

#nav-link1{	top: 0%; }
#nav-link2{ top: 15.7%; }
#nav-link3{ top: 31.4%; }
#nav-link3a{ top: 47.1%; }
#nav-link3b{ top: 62.8%; }
#nav-link3c{ top: 78.5%; }
#nav-link4{ top: 93.4%; }

#nav .nav-show li b{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-position: left center;
	background-size: contain;
	background-repeat: no-repeat;
	transition: all 0.2s;
}

#nav .nav-show li:hover b{
	transform: scale(1.05);
}

#nav-link1 b{ background-image: url("images/nav-link1.png"); }
#nav-link2 b{ background-image: url("images/nav-link2.png"); }
#nav-link3 b{ background-image: url("images/nav-link3.png"); }
#nav-link3a b{ background-image: url("images/nav-link3a.png"); }
#nav-link3b b{ background-image: url("images/nav-link3b.png"); }
#nav-link3c b{ background-image: url("images/nav-link3c.png"); }
#nav-link4 b{ background-image: url("images/nav-link4.png"); }

/*
#nav-link1.read.on b{ background-image: url("images/nav-link1-on.png"); }
#nav-link2.read.on b{ background-image: url("images/nav-link2-on.png"); }
#nav-link3.read.on b{ background-image: url("images/nav-link3-on.png"); }
#nav-link3a.read.on b{ background-image: url("images/nav-link3a-on.png"); }
#nav-link3b.read.on b{ background-image: url("images/nav-link3b-on.png"); }
#nav-link3c.read.on b{ background-image: url("images/nav-link3c-on.png"); }
#nav-link4.read.on b{ background-image: url("images/nav-link4-on.png"); }
*/

#nav .nav-show li i{
	position: absolute;
	width: 10.8%;
	height: 100%;
	left: -21.4%;
	top: 0%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("images/nav-point1.png");
}

/*
#nav .nav-show .read i{ background-image: url("images/nav-point2.png"); }
#nav .nav-show .read.on i{ background-image: url("images/nav-point3.png"); }
*/

#nav .nav-show li:hover i{ background-image: url("images/nav-point2.png"); }


@keyframes nav{
	from{ opacity: 0; transform: scale(0); }
	to{ opacity: 1; transform: scale(1); }
}
.page2 #nav{
	animation:'nav' 0.2s ease-in-out 14.8s forwards;
	-ms-animation:nav 0.2s ease-in-out 14.8s forwards;
	-moz-animation:nav 0.2s ease-in-out 14.8s forwards;
	-o-animation:'nav' 0.2s ease-in-out 14.8s forwards;
	-webkit-animation:'nav' 0.2s ease-in-out 14.8s forwards;
}

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

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

.act.show{
	transform: scale(1) !important;
	z-index: 9;
}

@keyframes act-off{
	from{ opacity: 1; transform: scale(1); }
	99.99%{ opacity: 0; transform: scale(1); }
	to{ opacity: 0; transform: scale(0); }
}
.act.off{
	animation:'act-off' 0.5s ease-in-out 0s forwards;
	-ms-animation:act-off 0.5s ease-in-out 0s forwards;
	-moz-animation:act-off 0.5s ease-in-out 0s forwards;
	-o-animation:'act-off' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'act-off' 0.5s ease-in-out 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;
}

#act1 .box{
	left: 50%;
	-webkit-transform: translate(-6.5%, 0%); -moz-transform: translate(-6.5%, 0%); -ms-transform: translate(-6.5%, 0%); -o-transform: translate(-6.5%, 0%); transform: translate(-6.5%, 0%);
}

@keyframes act1-move{
	from{ -webkit-transform: translate(-6.5%, 0%); -moz-transform: translate(-6.5%, 0%); -ms-transform: translate(-6.5%, 0%); -o-transform: translate(-6.5%, 0%); transform: translate(-6.5%, 0%); }
	7.7%{ -webkit-transform: translate(-6.5%, 0%); -moz-transform: translate(-6.5%, 0%); -ms-transform: translate(-6.5%, 0%); -o-transform: translate(-6.5%, 0%); transform: translate(-6.5%, 0%); }
	99.99%{ left: 50%; }
	to{ left: 49.99%; -webkit-transform: translate(-29%, 0%); -moz-transform: translate(-29%, 0%); -ms-transform: translate(-29%, 0%); -o-transform: translate(-29%, 0%); transform: translate(-29%, 0%); }
}
.page2 #act1 .box{
	animation:'act1-move' 14.0s ease-in-out 0.0s forwards;
	-ms-animation:act1-move 14.0s ease-in-out 0.0s forwards;
	-moz-animation:act1-move 14.0s ease-in-out 0.0s forwards;
	-o-animation:'act1-move' 14.0s ease-in-out 0.0s forwards;
	-webkit-animation:'act1-move' 14.0s ease-in-out 0.0s forwards;
}

@keyframes act1-2-show{
	from{ transform: scale(0); }
	0.1%{ transform: scale(1); }
	99.99%{ transform: scale(1); top: 0%; } 
	to{ transform: scale(0); top: 100%; }
}
#act1-2.show{
	animation:'act1-2-show' 7.5s ease-in-out 0s forwards;
	-ms-animation:act1-2-show 7.5s ease-in-out 0s forwards;
	-moz-animation:act1-2-show 7.5s ease-in-out 0s forwards;
	-o-animation:'act1-2-show' 7.5s ease-in-out 0s forwards;
	-webkit-animation:'act1-2-show' 7.5s ease-in-out 0s forwards;
}

@keyframes act2-show{
	from{ transform: scale(0); top: 100%; }
	36.84%{ transform: scale(0); top: 100%; }
	36.85%{ transform: scale(1); top: 0%; }
	to{ }
}
#act2.show{
	animation:'act2-show' 9.5s ease-in-out 0s forwards;
	-ms-animation:act2-show 9.5s ease-in-out 0s forwards;
	-moz-animation:act2-show 9.5s ease-in-out 0s forwards;
	-o-animation:'act2-show' 9.5s ease-in-out 0s forwards;
	-webkit-animation:'act2-show' 9.5s ease-in-out 0s forwards;
}

@keyframes act3-show{
	from{ transform: scale(1.2); opacity: 0; }
	to{ transform: scale(1); opacity: 1; }
}
#act3a.show,
#act3b.show,
#act3c.show{
	animation:'act3-show' 1.0s ease-in-out 0s forwards;
	-ms-animation:act3-show 1.0s ease-in-out 0s forwards;
	-moz-animation:act3-show 1.0s ease-in-out 0s forwards;
	-o-animation:'act3-show' 1.0s ease-in-out 0s forwards;
	-webkit-animation:'act3-show' 1.0s ease-in-out 0s forwards;
}

@keyframes act3-back{
	from{ transform: scale(1); opacity: 1; }
	99%{ transform: scale(1); }
	to{ transform: scale(0); opacity: 0; }
}
#act3a.back,
#act3b.back,
#act3c.back{
	animation:'act3-back' 1.0s ease-in-out 0s forwards;
	-ms-animation:act3-back 1.0s ease-in-out 0s forwards;
	-moz-animation:act3-back 1.0s ease-in-out 0s forwards;
	-o-animation:'act3-back' 1.0s ease-in-out 0s forwards;
	-webkit-animation:'act3-back' 1.0s ease-in-out 0s forwards;
}


@keyframes nav-show{
	from{ opacity: 0; transform: scale(1); }
	to{ opacity: 1; transform: scale(1); }
}
#act1.nav-show,
#act2.nav-show{
	animation:'nav-show' 1.0s ease-in-out 0s forwards;
	-ms-animation:nav-show 1.0s ease-in-out 0s forwards;
	-moz-animation:nav-show 1.0s ease-in-out 0s forwards;
	-o-animation:'nav-show' 1.0s ease-in-out 0s forwards;
	-webkit-animation:'nav-show' 1.0s ease-in-out 0s forwards;
}

.act1-preface1,
.act1-preface2,
.act1-preface3,
.act1-preface4,
.act1-preface5{ position: fixed; width: 100%; height: 38%; left: 0%; top: 20%; z-index: 9; }

.act1-preface1{ background-image: url("images/act1-preface1.png"); }
.act1-preface2{ background-image: url("images/act1-preface2.png"); }
.act1-preface3{ background-image: url("images/act1-preface3.png"); }
.act1-preface4{ background-image: url("images/act1-preface4.png"); }
.act1-preface5{ background-image: url("images/act1-preface5.png"); }

@keyframes act1-preface1{
	from{ }
	12.5%{ margin-top: 0.5em; opacity: 0; }
	18.75%{ margin: 0; opacity: 1; }
	93.75%{ opacity: 1; }
	to{ opacity: 0; }
}
.page2 .act1-preface1{
	animation:'act1-preface1' 8.0s ease-in-out 0s forwards;
	-ms-animation:act1-preface1 8.0s ease-in-out 0s forwards;
	-moz-animation:act1-preface1 8.0s ease-in-out 0s forwards;
	-o-animation:'act1-preface1' 8.0s ease-in-out 0s forwards;
	-webkit-animation:'act1-preface1' 8.0s ease-in-out 0s forwards;
}

@keyframes act1-preface2{
	from{ }
	17.5%{ margin-top: 0.5em; opacity: 0; }
	23.75%{ margin: 0; opacity: 1; }
	93.75%{ opacity: 1; }
	to{ opacity: 0; }
}
.page2 .act1-preface2{
	animation:'act1-preface2' 8.0s ease-in-out 0s forwards;
	-ms-animation:act1-preface2 8.0s ease-in-out 0s forwards;
	-moz-animation:act1-preface2 8.0s ease-in-out 0s forwards;
	-o-animation:'act1-preface2' 8.0s ease-in-out 0s forwards;
	-webkit-animation:'act1-preface2' 8.0s ease-in-out 0s forwards;
}

@keyframes act1-preface3{
	from{ }
	22.5%{ margin-top: 0.5em; opacity: 0; }
	28.75%{ margin: 0; opacity: 1; }
	93.75%{ opacity: 1; }
	to{ opacity: 0; }
}
.page2 .act1-preface3{
	animation:'act1-preface3' 8.0s ease-in-out 0s forwards;
	-ms-animation:act1-preface3 8.0s ease-in-out 0s forwards;
	-moz-animation:act1-preface3 8.0s ease-in-out 0s forwards;
	-o-animation:'act1-preface3' 8.0s ease-in-out 0s forwards;
	-webkit-animation:'act1-preface3' 8.0s ease-in-out 0s forwards;
}

@keyframes act1-preface4{
	from{ }
	27.5%{ margin-top: 0.5em; opacity: 0; }
	33.75%{ margin: 0; opacity: 1; }
	93.75%{ opacity: 1; }
	to{ opacity: 0; }
}
.page2 .act1-preface4{
	animation:'act1-preface4' 8.0s ease-in-out 0s forwards;
	-ms-animation:act1-preface4 8.0s ease-in-out 0s forwards;
	-moz-animation:act1-preface4 8.0s ease-in-out 0s forwards;
	-o-animation:'act1-preface4' 8.0s ease-in-out 0s forwards;
	-webkit-animation:'act1-preface4' 8.0s ease-in-out 0s forwards;
}

@keyframes act1-preface5{
	from{ }
	32.5%{ margin-top: 0.5em; opacity: 0; }
	38.75%{ margin: 0; opacity: 1; }
	93.75%{ opacity: 1; }
	to{ opacity: 0; }
}
.page2 .act1-preface5{
	animation:'act1-preface5' 8.0s ease-in-out 0s forwards;
	-ms-animation:act1-preface5 8.0s ease-in-out 0s forwards;
	-moz-animation:act1-preface5 8.0s ease-in-out 0s forwards;
	-o-animation:'act1-preface5' 8.0s ease-in-out 0s forwards;
	-webkit-animation:'act1-preface5' 8.0s ease-in-out 0s forwards;
}

@keyframes act1-preface-box{
	from{  }
	99.99%{ opacity: 0; transform: scale(1); top: 0%;}
	to{ opacity: 0; transform: scale(0); top: 100%; }
}
.page2 .act1-preface-box{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 10;
	animation:'act1-preface-box' 0.1s ease-in-out 14.9s forwards;
	-ms-animation:act1-preface-box 0.1s ease-in-out 14.9s forwards;
	-moz-animation:act1-preface-box 0.1s ease-in-out 14.9s forwards;
	-o-animation:'act1-preface-box' 0.1s ease-in-out 14.9s forwards;
	-webkit-animation:'act1-preface-box' 0.1s ease-in-out 14.9s forwards;
}

.act1-camel{ width: 4.8%; height: 20.7%; left: 3.4%; top: 51.6%; background-image: url("images/act1-camel.png"); background-position: center bottom; }

@keyframes act1-camel{
	from{ }
	to{ opacity: 1; }
}
.page2 .act1-camel{
	animation:'act1-camel' 1.0s ease-in-out 0.0s forwards;
	-ms-animation:act1-camel 1.0s ease-in-out 0.0s forwards;
	-moz-animation:act1-camel 1.0s ease-in-out 0.0s forwards;
	-o-animation:'act1-camel' 1.0s ease-in-out 0.0s forwards;
	-webkit-animation:'act1-camel' 1.0s ease-in-out 0.0s forwards;
}

.act1-logo{ width: 1.6%; height: 8%; left: 28%; top: 15.7%; background-image: url("images/hb-logo.png"); }

@keyframes act1-logo{
	from{ }
	to{ opacity: 1; }
}
.page2 .act1-logo{
	animation:'act1-logo' 0.5s ease-in-out 13.0s forwards;
	-ms-animation:act1-logo 0.5s ease-in-out 13.0s forwards;
	-moz-animation:act1-logo 0.5s ease-in-out 13.0s forwards;
	-o-animation:'act1-logo' 0.5s ease-in-out 13.0s forwards;
	-webkit-animation:'act1-logo' 0.5s ease-in-out 13.0s forwards;
}

.act1-topic1,
.act1-topic2,
.act1-topic3,
.act1-topic4{ width: 6.1%; height: 40%; left: 25.5%; top: 27.3%; }

.act1-topic1{ background-image: url("images/act1-topic1.png"); }
.act1-topic2{ background-image: url("images/act1-topic2.png"); }
.act1-topic3{ background-image: url("images/act1-topic3.png"); }
.act1-topic4{ background-image: url("images/act1-topic4.png"); }

@keyframes act1-topic{
	from{ transform: scale(2);}
	to{ opacity: 1; }
}
.page2 .act1-topic1{
	animation:'act1-topic' 0.5s ease-in-out 13.4s forwards;
	-ms-animation:act1-topic 0.5s ease-in-out 13.4s forwards;
	-moz-animation:act1-topic 0.5s ease-in-out 13.4s forwards;
	-o-animation:'act1-topic' 0.5s ease-in-out 13.4s forwards;
	-webkit-animation:'act1-topic' 0.5s ease-in-out 13.4s forwards;
}
.page2 .act1-topic2{
	animation:'act1-topic' 0.5s ease-in-out 13.6s forwards;
	-ms-animation:act1-topic 0.5s ease-in-out 13.6s forwards;
	-moz-animation:act1-topic 0.5s ease-in-out 13.6s forwards;
	-o-animation:'act1-topic' 0.5s ease-in-out 13.6s forwards;
	-webkit-animation:'act1-topic' 0.5s ease-in-out 13.6s forwards;
}
.page2 .act1-topic3{
	animation:'act1-topic' 0.5s ease-in-out 13.8s forwards;
	-ms-animation:act1-topic 0.5s ease-in-out 13.8s forwards;
	-moz-animation:act1-topic 0.5s ease-in-out 13.8s forwards;
	-o-animation:'act1-topic' 0.5s ease-in-out 13.8s forwards;
	-webkit-animation:'act1-topic' 0.5s ease-in-out 13.8s forwards;
}
.page2 .act1-topic4{
	animation:'act1-topic' 0.5s ease-in-out 14.0s forwards;
	-ms-animation:act1-topic 0.5s ease-in-out 14.0s forwards;
	-moz-animation:act1-topic 0.5s ease-in-out 14.0s forwards;
	-o-animation:'act1-topic' 0.5s ease-in-out 14.0s forwards;
	-webkit-animation:'act1-topic' 0.5s ease-in-out 14.0s forwards;
}

.act-hand{ height: 17.4%; top: 74%; }
.act-hand i{ background-image: url("images/hand.gif"); }

.act1-hand{ width: 0.9%; left: 28.5%; }

.act1-hand2{ width: 0.7%; left: 73%; top: 6.5%; }
.act1-hand2 i{ background-image: url("images/arrow.gif"); }

@keyframes act1-hand{
	from{ }
	to{ opacity: 1; }
}
.page2 .act1-hand{
	animation:'act1-hand' 0.5s ease-in-out 14.4s forwards;
	-ms-animation:act1-hand 0.5s ease-in-out 14.4s forwards;
	-moz-animation:act1-hand 0.5s ease-in-out 14.4s forwards;
	-o-animation:'act1-hand' 0.5s ease-in-out 14.4s forwards;
	-webkit-animation:'act1-hand' 0.5s ease-in-out 14.4s forwards;
}

@keyframes act1-hand2{
	from{ }
	to{ opacity: 1; }
}
.act1-hand2.on{
	animation:'act1-hand2' 0.5s ease-in-out 0.5s forwards;
	-ms-animation:act1-hand2 0.5s ease-in-out 0.5s forwards;
	-moz-animation:act1-hand2 0.5s ease-in-out 0.5s forwards;
	-o-animation:'act1-hand2' 0.5s ease-in-out 0.5s forwards;
	-webkit-animation:'act1-hand2' 0.5s ease-in-out 0.5s forwards;
}

.act1-card1{ width: 0.9%; height: 33.4%; left: 59.1%; top: 28.5%; background-image: url("images/act1-card1.png"); }

.act1-card2{ width: 0.9%; height: 33.4%; left: 79.9%; top: 20.1%; background-image: url("images/act1-card2.png"); }

@keyframes act-card-shake{
	from{ }
	50%{ transform: translateY(1em); }
	to{ }
}
.act-card{
	cursor: pointer;
	animation:'act-card-shake' 3.0s linear 0s infinite;
	-ms-animation:act-card-shake 3.0s linear 0s infinite;
	-moz-animation:act-card-shake 3.0s linear 0s infinite;
	-o-animation:'act-card-shake' 3.0s linear 0s infinite;
	-webkit-animation:'act-card-shake' 3.0s linear 0s infinite;
}

.act1-text1{ width: 7.0%; height: 32.2%; left: 37.4%; top: 18.4%; background-image: url("images/act1-text1.png"); }

.act1-text2{ width: 5.8%; height: 32.2%; left: 60.2%; top: 32%; background-image: url("images/act1-text2.png"); }

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

.act1-sel-title{ width: 3.9%; height: 11.8%; left: 69.1%; top: 9.6%; transition: all 0.2s; background-image: url("images/act1-sel-title.png"); }
.act1-sel-title.off{ opacity: 0; }

@keyframes act1-title-shake{
	from{ }
	50%{ transform: translateX(1em); }
	to{ }
}
.act1-sel-title{
	animation:'act1-title-shake' 3.0s linear 0s infinite;
	-ms-animation:act1-title-shake 3.0s linear 0s infinite;
	-moz-animation:act1-title-shake 3.0s linear 0s infinite;
	-o-animation:'act1-title-shake' 3.0s linear 0s infinite;
	-webkit-animation:'act1-title-shake' 3.0s linear 0s infinite;
}

.act1-sel-title2{ width: 3.1%; height: 11.4%; left: 69.4%; top: 9.4%; transition: all 0.2s; background-image: url("images/act1-sel-title2.png"); }
.act1-sel-title2.on{ opacity: 1; }

.act1-sel-title3{ width: 3.1%; height: 11.4%; left: 93.6%; top: 13%; transition: all 0.2s; background-image: url("images/act1-sel-title3.png"); }
.act1-sel-title3.off{ opacity: 0; }

.act1-sel-tree1,
.act1-sel-tree2,
.act1-sel-tree3{ width: 2.4%; height: 51.6%; top: 33.3%; transition: all 0.5s; }

.act1-sel-tree1{ left: 67.4%; background-image: url("images/act1-sel-tree1.png"); }

.act1-sel-tree2{ left: 69.82%; background-image: url("images/act1-sel-tree2.png"); }

.act1-sel-tree3{ left: 72.36%; background-image: url("images/act1-sel-tree3.png"); }

.act1-sel-tree1.on,
.act1-sel-tree2.on,
.act1-sel-tree3.on{ transform: scale(1.1); margin-top: -1em; }

.act1-sel-btn1,
.act1-sel-btn2,
.act1-sel-btn3{ width: 0.8%; height: 9.4%; top: 69.4%; cursor: pointer; transition: all 0.2s; }

.act1-sel-btn1.off,
.act1-sel-btn2.off,
.act1-sel-btn3.off{ opacity: 0; transform: scale(0); }

.act1-sel-btn1{ left: 68.08%;  }
.act1-sel-btn1 i{ background-image: url("images/act1-sel-btn1.png"); }

.act1-sel-btn2{ left: 70.62%; }
.act1-sel-btn2 i{ background-image: url("images/act1-sel-btn2.png"); }

.act1-sel-btn3{ left: 73.15%; }
.act1-sel-btn3 i{ background-image: url("images/act1-sel-btn3.png"); }

@keyframes act1-sel-shake{
	from{ }
	50%{ transform: scale(0.95); }
	to{ }
}
.act1-sel-btn1 i,
.act1-sel-btn2 i,
.act1-sel-btn3 i{
	animation:'act1-sel-shake' 1.0s linear 0s infinite;
	-ms-animation:act1-sel-shake 1.0s linear 0s infinite;
	-moz-animation:act1-sel-shake 1.0s linear 0s infinite;
	-o-animation:'act1-sel-shake' 1.0s linear 0s infinite;
	-webkit-animation:'act1-sel-shake' 1.0s linear 0s infinite;
}

.act1-sel-drop1,
.act1-sel-drop2,
.act1-sel-drop3{ width: 2.2%; height: 68.3%; top: 17%; transform: scale(0); transition: all 0.3s; }

.act1-sel-drop1{ left: 67.4%; background-image: url("images/act1-sel-drop1.png"); }

.act1-sel-drop2{ left: 69.9%; background-image: url("images/act1-sel-drop2.png"); }

.act1-sel-drop3{ left: 72.4%; background-image: url("images/act1-sel-drop3.png"); }

.act1-sel-drop1.on,
.act1-sel-drop2.on,
.act1-sel-drop3.on{ transform: scale(1); opacity: 1; z-index: 9; }

.act1-sel-drop1 .choose,
.act1-sel-drop2 .choose,
.act1-sel-drop3 .choose{ width: 48.4%; height: 10.5%; left: 25.8%; top: 84%; background-image: url("images/act1-sel-choose.png"); cursor: pointer; transition: all 0.2s; }

.act1-sel-drop1 .choose:hover,
.act1-sel-drop2 .choose:hover,
.act1-sel-drop3 .choose:hover{ transform: scale(1.05); }

.act1-sel-drop1 .close,
.act1-sel-drop2 .close,
.act1-sel-drop3 .close{ width: 13.4%; height: 8.6%; left: 43.3%; top: 103%; background-image: url("images/act1-sel-close.png"); cursor: pointer; transition: all 0.2s; }

.act1-sel-drop1 .close:hover,
.act1-sel-drop2 .close:hover,
.act1-sel-drop3 .close:hover{ transform: scale(1.1); }

.act1-tree{ width: 4.8%; height: 89.5%; left: 92.7%; bottom: 6.9%; }

.act1-tree-btn1 i{
	position: absolute;
	left: 50%;
	top: 50%;
    width: 100%;
    height: 100%;
	transform: translate(-50%, -50%);
    background-image:url("images/act1-tree-btn1b.png");
    background-size: 2500% 100% !important;
    background-position-y: 0;
	background-repeat: repeat;
	background-position: left center;
    animation: act1-tree-btn1 2s;
    animation-timing-function: steps(25);
    animation-iteration-count: infinite;
	animation-fill-mode: forwards;
}
@keyframes act1-tree-btn1{
    from{ background-position-x: 0; }
    to{ background-position-x: -2500%; }
}

/*.act1-tree-small{ width: 48.8%; height: 57.7%; left: 27%; bottom: 6.4%;  transition: opacity 0.5s; }*/

.act1-tree-small{ width: 100%; height: 100%; left: 0%; bottom: 0%; transform: scale(0.62) translateY(23%); transition: opacity 0.5s; }

.act1-tree-small.on{ opacity: 1; }

@keyframes act1-tree-small-off{
	from{ transform: scale(0.62) translateY(23%); opacity: 1; }
	to{ transform: scale(1) translateY(0%); opacity: 0; }
}
.act1-tree-small.off{
	animation:'act1-tree-small-off' 1.5s ease-in-out 0s forwards;
	-ms-animation:act1-tree-small-off 1.5s ease-in-out 0s forwards;
	-moz-animation:act1-tree-small-off 1.5s ease-in-out 0s forwards;
	-o-animation:'act1-tree-small-off' 1.5s ease-in-out 0s forwards;
	-webkit-animation:'act1-tree-small-off' 1.5s ease-in-out 0s forwards;
}

.act1-tree-bg0,
.act1-tree-bg1,
.act1-tree-bg2,
.act1-tree-bg3{ width: 100%; height: 100%; left: 0px; top: 0px; }

.act1-tree-bg0.on,
.act1-tree-bg1.on,
.act1-tree-bg2.on,
.act1-tree-bg3.on{ opacity: 1; }

.act1-tree-bg0{ background-image: url("images/act1-sel-tree2.png"); }
.act1-tree-bg1{ background-image: url("images/act1-sel-tree1.png"); }
.act1-tree-bg2{ background-image: url("images/act1-sel-tree2.png"); }
.act1-tree-bg3{ background-image: url("images/act1-sel-tree3.png"); }

.act1-tree-bg{ width: 100%; height: 100%; left: 0%; bottom: 0%; background-image: url("images/act1-tree-bg.png"); transform: scale(0.62) translateY(23%); }

@keyframes act1-tree-bg-on{
	from{ transform: scale(0.62) translateY(23%); opacity: 0; }
	to{ transform: scale(1) translateY(0%); opacity: 1; }
}
.act1-tree-bg.on{
	animation:'act1-tree-bg-on' 1.5s ease-in-out 0s forwards;
	-ms-animation:act1-tree-bg-on 1.5s ease-in-out 0s forwards;
	-moz-animation:act1-tree-bg-on 1.5s ease-in-out 0s forwards;
	-o-animation:'act1-tree-bg-on' 1.5s ease-in-out 0s forwards;
	-webkit-animation:'act1-tree-bg-on' 1.5s ease-in-out 0s forwards;
}

.act1-tree-btn1{ width: 1.5%; height: 28.8%; left: 94.5%; top: 31.3%; cursor: pointer; transition: all 0.2s; }
.act1-tree-btn1.off{ transform: scale(0); opacity: 0; }

.act1-tree-bug{ width: 100%; height: 100%; left: 0%; bottom: 0%; transform: scale(0.7) translateY(15%); }

@keyframes act1-tree-bug-on{
	from{ opacity: 0; }
	10%{ opacity: 1; }
	90%{ opacity: 1; }
	to{ opacity: 0; }
}
.act1-tree-bug.on{
	animation:'act1-tree-bug-on' 3.0s ease-in-out 0s forwards;
	-ms-animation:act1-tree-bug-on 3.0s ease-in-out 0s forwards;
	-moz-animation:act1-tree-bug-on 3.0s ease-in-out 0s forwards;
	-o-animation:'act1-tree-bug-on' 3.0s ease-in-out 0s forwards;
	-webkit-animation:'act1-tree-bug-on' 3.0s ease-in-out 0s forwards;
}

.act1-tree-bug i{
	position: absolute;
	left: 50%;
	top: 50%;
    width: 100%;
    height: 100%;
	transform: translate(-50%, -50%);
    background-image:url("images/act1-tree-bug.png");
    background-size: 3800% 100% !important;
    background-position-y: 0;
	background-repeat: repeat;
	background-position: left center;
    animation: act1-tree-bug 4.5s;
    animation-timing-function: steps(38);
    animation-iteration-count: infinite;
	animation-fill-mode: forwards;
}
@keyframes act1-tree-bug{
    from{ background-position-x: 0; }
    to{ background-position-x: -3800%; }
}

.act1-tree-flower{ width: 100%; height: 100%; left: 0%; bottom: 0%; background-image: url("images/act1-tree-flower.png"); }

@keyframes act1-tree-flower-on{
	from{ opacity: 0; }
	to{ opacity: 1; }
}
.act1-tree-flower.on{
	animation:'act1-tree-flower-on' 0.8s ease-in-out 1.4s forwards;
	-ms-animation:act1-tree-flower-on 0.8s ease-in-out 1.4s forwards;
	-moz-animation:act1-tree-flower-on 0.8s ease-in-out 1.4s forwards;
	-o-animation:'act1-tree-flower-on' 0.8s ease-in-out 1.4s forwards;
	-webkit-animation:'act1-tree-flower-on' 0.8s ease-in-out 1.4s forwards;
}

.act1-tree-move2{ width: 70%; height: 52.2%; right: 0; top: 45%; }
.act1-tree-move2.on{ opacity: 1; }

.act1-tree-move2.on i{
	position: absolute;
	left: 50%;
	top: 50%;
    width: 100%;
    height: 100%;
	transform: translate(-50%, -50%);
    background-image:url("images/act1-tree-move2.png");
    background-size: 100% 3600% !important;
    background-position-y: 0;
	background-repeat: repeat;
	background-position: center top;
    animation: act1-tree-move2 2.5s;
    animation-timing-function: steps(36);
    animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes act1-tree-move2{
    from{ opacity: 0; background-position-y: 0; }
	6.6%{ opacity: 1; }
	93.3%{ opacity: 1; }
    to{ opacity: 0; background-position-y: -3600%; }
}

.act1-tree-move3{ width: 76.9%; height: 52.2%; right: 0; top: 22%; }
.act1-tree-move3.on{ opacity: 1; }

@keyframes act1-tree-move3b{
	from{ }
	20%{ right: -15%; top: 37%; transform: scale(0.8); }
	40%{ right: 0%; top: 52%; }
	60%{ right: 15%; top: 37%; transform: scale(0.8); }
	80%{ right: 0%; top: 52%; }
	to{ }
}
.act1-tree-move3.on{
	animation:'act1-tree-move3b' 3.0s linear 0s forwards;
	-ms-animation:act1-tree-move3b 3.0s linear 0s forwards;
	-moz-animation:act1-tree-move3b 3.0s linear 0s forwards;
	-o-animation:'act1-tree-move3b' 3.0s linear 0s forwards;
	-webkit-animation:'act1-tree-move3b' 3.0s linear 0s forwards;
}

.act1-tree-move3.on i{
	position: absolute;
	left: 50%;
	top: 50%;
    width: 100%;
    height: 100%;
	transform: translate(-50%, -50%);
    background-image:url("images/act1-tree-move3.png");
    background-size: 100% 4200% !important;
    background-position-y: 0;
	background-repeat: repeat;
	background-position: center top;
    animation: act1-tree-move3 3.0s;
    animation-timing-function: steps(42);
    animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes act1-tree-move3{
    from{ opacity: 0; background-position-y: 0; }
	6.6%{ opacity: 1; }
	93.3%{ opacity: 1; }
    to{ opacity: 0; background-position-y: -4200%; }
}

.act1-tree-btn2,
.act1-tree-btn3{ width: 0.83%; height: 16.6%; top: 77.6%; cursor: pointer; transform: scale(0); }

.act1-tree-btn2{ left: 96%; }
.act1-tree-btn2 i{ background-image: url("images/act1-tree-btn2.png"); }

.act1-tree-btn3{ left: 96.9%; }
.act1-tree-btn3 i{ background-image: url("images/act1-tree-btn3.png"); }

.act1-next{ width: 1.8%; height: 15.5%; left: 97.9%; top: 78.1%; cursor: pointer; transform: scale(0); }
.act1-next i{ background-image: url("images/act1-next.png"); }

@keyframes act1-tree-shake{
	from{ transform: scale(1); }
	16.66%{ transform: scale(0.95); }
	33.33%{ transform: scale(1); }
	to{ }
}
.act1-tree-btn2 i{
	animation:'act1-tree-shake' 3.0s linear -2s infinite;
	-ms-animation:act1-tree-shake 3.0s linear -2s infinite;
	-moz-animation:act1-tree-shake 3.0s linear -2s infinite;
	-o-animation:'act1-tree-shake' 3.0s linear -2s infinite;
	-webkit-animation:'act1-tree-shake' 3.0s linear -2s infinite;
}

.act1-tree-btn3 i{
	animation:'act1-tree-shake' 3.0s linear -1s infinite;
	-ms-animation:act1-tree-shake 3.0s linear -1s infinite;
	-moz-animation:act1-tree-shake 3.0s linear -1s infinite;
	-o-animation:'act1-tree-shake' 3.0s linear -1s infinite;
	-webkit-animation:'act1-tree-shake' 3.0s linear -1s infinite;
}

.act1-next i{
	animation:'act1-tree-shake' 3.0s linear 0s infinite;
	-ms-animation:act1-tree-shake 3.0s linear 0s infinite;
	-moz-animation:act1-tree-shake 3.0s linear 0s infinite;
	-o-animation:'act1-tree-shake' 3.0s linear 0s infinite;
	-webkit-animation:'act1-tree-shake' 3.0s linear 0s infinite;
}

@keyframes act1-tree-btn-on{
	from{ transform: scale(0); opacity: 0; }
	to{ transform: scale(1); opacity: 1; }
}
.act1-tree-btn2.on,
.act1-tree-btn3.on,
.act1-next.on{
	animation:'act1-tree-btn-on' 0.5s ease-in-out 0.5s forwards;
	-ms-animation:act1-tree-btn-on 0.5s ease-in-out 0.5s forwards;
	-moz-animation:act1-tree-btn-on 0.5s ease-in-out 0.5s forwards;
	-o-animation:'act1-tree-btn-on' 0.5s ease-in-out 0.5s forwards;
	-webkit-animation:'act1-tree-btn-on' 0.5s ease-in-out 0.5s forwards;
}

.act1-tree-btn-cover{ width: 3.7%; height: 16.6%; left: 96%; top: 77.6%; display: none; }
.act1-tree-btn-cover.active{ display: block; }

.chapter1{ width: 2.5%; height: 8.2%; left: 46.7%; top: 16.4%; background-image: url("images/chapter1.png"); }

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

.drop-shadow.on{ transform: scale(1); opacity: 1; }

#act1-2{ width: 100%; height: 100%; overflow: hidden; }

.act1-2-cloud1,
.act1-2-cloud2{ width: 74.3%; height: 100%; top: 0%; background-size: 100% 100%; }

.act1-2-cloud1{ left: -100%; background-image: url("images/act1-2-cloud1.png"); background-position: right center; transform: translateZ(100em); }

.act1-2-cloud2{ right: -100%; background-image: url("images/act1-2-cloud2.png"); background-position: left center; transform: translateZ(100em); }

.act1-2-text{ width: 100%; height: 40.6%; left: 0%; top: 29.7%; background-image: url("images/act1-2-text.png"); transform: scale(0.9) translateZ(200em); }

@keyframes act1-2-cloud1{
	from{ background-size: 100% 100%; }
	10%{ left: 0%; }
	90%{ left: 0%; opacity: 1; }
	to{ opacity: 0; background-size: 180% 180%; }
}
.show .act1-2-cloud1{
	animation:'act1-2-cloud1' 5.0s linear 2.5s forwards;
	-ms-animation:act1-2-cloud1 5.0s linear 2.5s forwards;
	-moz-animation:act1-2-cloud1 5.0s linear 2.5s forwards;
	-o-animation:'act1-2-cloud1' 5.0s linear 2.5s forwards;
	-webkit-animation:'act1-2-cloud1' 5.0s linear 2.5s forwards;
}

@keyframes act1-2-cloud2{
	from{ background-size: 100% 100%; }
	10%{ right: 0%; }
	90%{ right: 0%; opacity: 1; }
	to{ opacity: 0; background-size: 180% 180%; }
}
.show .act1-2-cloud2{
	animation:'act1-2-cloud2' 5.0s linear 2.5s forwards;
	-ms-animation:act1-2-cloud2 5.0s linear 2.5s forwards;
	-moz-animation:act1-2-cloud2 5.0s linear 2.5s forwards;
	-o-animation:'act1-2-cloud2' 5.0s linear 2.5s forwards;
	-webkit-animation:'act1-2-cloud2' 5.0s linear 2.5s forwards;
}

@keyframes act1-2-text{
	from{ }
	5%{ opacity: 0; transform: scale(0.8) translateZ(200em); }
	15%{ opacity: 1; transform: scale(1) translateZ(200em); }
	85%{ opacity: 1; transform: scale(1) translateZ(200em); }
	95%{ opacity: 0; transform: scale(0.8) translateZ(200em); }
	to{ }
}
.show .act1-2-text{
	animation:'act1-2-text' 5.0s ease-in-out 2.5s forwards;
	-ms-animation:act1-2-text 5.0s ease-in-out 2.5s forwards;
	-moz-animation:act1-2-text 5.0s ease-in-out 2.5s forwards;
	-o-animation:'act1-2-text' 5.0s ease-in-out 2.5s forwards;
	-webkit-animation:'act1-2-text' 5.0s ease-in-out 2.5s forwards;
}

.chapter2{ width: 1%; height: 8.2%; left: 0.2%; top: 11.4%; background-image: url("images/chapter2.png"); }

.chapter3{ width: 1%; height: 8.2%; left: 40%; top: 11.4%; background-image: url("images/chapter3.png"); }

.chapter4{ width: 1%; height: 8.2%; left: 49.6%; top: 11.4%; background-image: url("images/chapter4.png"); }

.act2-topic{ width: 1.5%; height: 40.3%; left: 1.4%; top: 26.6%; background-image: url("images/act2-topic.png"); }

@keyframes act2-topic{
	from{ transform: scale(0.5); }
	to{ opacity: 1; }
}
.show .act2-topic{
	animation:'act2-topic' 0.5s ease-in-out 4.8s forwards;
	-ms-animation:act2-topic 0.5s ease-in-out 4.8s forwards;
	-moz-animation:act2-topic 0.5s ease-in-out 4.8s forwards;
	-o-animation:'act2-topic' 0.5s ease-in-out 4.8s forwards;
	-webkit-animation:'act2-topic' 0.5s ease-in-out 4.8s forwards;
}

.act2-hand{ width: 0.6%; left: 1.9%; }

@keyframes act2-hand{
	from{ }
	to{ opacity: 1; }
}
.show .act2-hand{
	animation:'act2-hand' 0.5s ease-in-out 4.8s forwards;
	-ms-animation:act2-hand 0.5s ease-in-out 4.8s forwards;
	-moz-animation:act2-hand 0.5s ease-in-out 4.8s forwards;
	-o-animation:'act2-hand' 0.5s ease-in-out 4.8s forwards;
	-webkit-animation:'act2-hand' 0.5s ease-in-out 4.8s forwards;
}

.nav-show .act2-topic,
.nav-show .act2-hand,
.off .act2-topic,
.off .act2-hand{
	opacity: 1;
	transform: scale(1);
}

.act-link{ cursor: pointer; z-index: 8; }

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

.act2-link1,
.act2-link2,
.act2-link3,
.act2-link4,
.act2-link5,
.act2-link6,
.act2-link7{ width: 0.15%; height: 7.4%; top: 16%; }

.act2-link1{ left: 4.3%; }

.act2-link2{ left: 8.5%; }

.act2-link3{ left: 13.5%; }

.act2-link4{ left: 18.4%; }

.act2-link5{ left: 23.3%; }

.act2-link6{ left: 27.4%; top: 13.4%; }

.act2-link7{ left: 34.7%; }

.act2-link1 b,
.act2-link2 b,
.act2-link3 b,
.act2-link4 b,
.act2-link5 b,
.act2-link6 b,
.act2-link7 b{ left: 150%; top: 8%; height: 166%; }

.act2-link1 b{ width: 880.4%; background-image: url("images/act2-link1.png"); }

.act2-link2 b{ width: 786.3%; height: 278%; background-image: url("images/act2-link2.png"); }

.act2-link3 b{ width: 921.6%; background-image: url("images/act2-link3.png"); }

.act2-link4 b{ width: 980.4%; background-image: url("images/act2-link4.png"); }

.act2-link5 b{ width: 696.1%; background-image: url("images/act2-link5.png"); }

.act2-link6 b{ width: 1233.4%; background-image: url("images/act2-link6.png"); }

.act2-link7 b{ width: 1494.1%; background-image: url("images/act2-link7.png"); }

@keyframes link-shake{
	from{ }
	50%{ transform: scale(0.9); }
	to{ }
}
.act-link i{
	animation:'link-shake' 1.0s linear 0s infinite;
	-ms-animation:link-shake 1.0s linear 0s infinite;
	-moz-animation:link-shake 1.0s linear 0s infinite;
	-o-animation:'link-shake' 1.0s linear 0s infinite;
	-webkit-animation:'link-shake' 1.0s linear 0s infinite;
}

.act2-people1{ width: 2.5%; height: 86.3%; left: 4.7%; bottom: 0%; background-image: url("images/act2-people1.png"); background-position: center bottom; }

.act2-people2{ width: 1.7%; height: 87.4%; left: 9.8%; bottom: 0%; background-image: url("images/act2-people2.png"); background-position: center bottom; }

.act2-people3{ width: 1.7%; height: 90.3%; left: 14.9%; bottom: 0%; background-image: url("images/act2-people3.png"); background-position: center bottom; }

.act2-people4{ width: 3.5%; height: 88.3%; left: 17.9%; bottom: 0%; background-image: url("images/act2-people4.png"); background-position: center bottom; }

.act2-people5{ width: 2.5%; height: 88.4%; left: 23.6%; bottom: 0%; background-image: url("images/act2-people5.png"); background-position: center bottom; }

.act2-people6{ width: 3.5%; height: 94.2%; left: 33.6%; bottom: 0%; background-image: url("images/act2-people6.png"); background-position: center bottom; }

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

.act2-name1,
.act2-name2,
.act2-name3,
.act2-name4{ width: 0.3%; top: 18.6%; }

.act2-name1{ height: 37.2%; left: 7%; background-image: url("images/act2-name1.png"); }

.act2-name2{ height: 43.9%; left: 11%; width: 0.4%; background-image: url("images/act2-name2.png"); }

.act2-name3{ height: 57.6%; left: 16.4%; background-image: url("images/act2-name3.png"); }

.act2-name4{ height: 60.7%; left: 21.4%; background-image: url("images/act2-name4.png"); }

@keyframes act-name-shake{
	from{ }
	50%{ transform: translateY(1em); }
	to{ }
}
.act-name{
	animation:'act-name-shake' 3.0s linear -1.5s infinite;
	-ms-animation:act-name-shake 3.0s linear -1.5s infinite;
	-moz-animation:act-name-shake 3.0s linear -1.5s infinite;
	-o-animation:'act-name-shake' 3.0s linear -1.5s infinite;
	-webkit-animation:'act-name-shake' 3.0s linear -1.5s infinite;
}

.act2-pic{ width: 0.6%; height: 26.7%; cursor: pointer; z-index: 9; }

.act2-pic1{ left: 5.1%; top: 33.1%; background-image: url("images/act2-pic1.png"); }

.act2-pic2{ left: 9.0%; top: 46.5%; background-image: url("images/act2-pic2.png"); }

.act2-pic3{ left: 13.9%; top: 43.3%; background-image: url("images/act2-pic3.png"); }

.act2-pic4{ left: 18.6%; top: 40.8%; background-image: url("images/act2-pic4.png"); }

.act2-pic5{ left: 22.9%; top: 50.8%; background-image: url("images/act2-pic5.png"); }

.act2-pic6{ left: 27.6%; top: 44.1%; background-image: url("images/act2-pic6.png"); }

.act2-pic7{ left: 35.5%; top: 33.8%; background-image: url("images/act2-pic7.png"); }

.act2-voice{ width: 0.13%; height: 6.3%; cursor: pointer; z-index: 9; }

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

.act2-voice b{ background-image: url("images/voice2.gif"); opacity: 0; }

.act2-voice.on i{ opacity: 0; }

.act2-voice.on b{ opacity: 1; }

.act2-voice1{ left: 4.6%; top: 31.7%; }

.act2-voice2{ left: 8.8%; top: 39.6%; }

.act2-voice3{ left: 13.8%; top: 36.4%; }

.act2-voice4{ left: 18.6%; top: 33.8%; }

.act2-voice5{ left: 23.2%; top: 34.8%; }

.act2-voice6{ left: 27.6%; top: 29.6%; }

.act2-voice7{ left: 35.1%; top: 36.4%; }

.act3-text1{ width: 2.9%; height: 23.5%; left: 39.1%; top: 41.3%; background-image: url("images/act3-text1.png"); }

.act3-text2{ width: 1.3%; height: 6%; left: 43%; top: 81.6%; background-image: url("images/act3-text2.png"); }

.act3-tree{ width: 2.9%; height: 100%; left: 42.2%; bottom: 0%; background-image: url("images/act3-tree.png"); background-position: center bottom; }

.act3-btn1,
.act3-btn2,
.act3-btn3{ width: 14%; height: 17.9%; cursor: pointer; }

.act3-btn1{ left: 21.6%; top: 34.2%; }

.act3-btn2{ left: 43.9%; top: 33.6%; }

.act3-btn3{ left: 66.2%; top: 35.2%; }

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

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

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

@keyframes act3-btn1-shake{
	from{ transform: scale(1); }
	16.66%{ transform: scale(0.85); }
	33.33%{ transform: scale(1); }
	to{ }
}
.act3-btn1 i{
	animation:'act3-btn1-shake' 3.0s linear 0s infinite;
	-ms-animation:act3-btn1-shake 3.0s linear 0s infinite;
	-moz-animation:act3-btn1-shake 3.0s linear 0s infinite;
	-o-animation:'act3-btn1-shake' 3.0s linear 0s infinite;
	-webkit-animation:'act3-btn1-shake' 3.0s linear 0s infinite;
}

@keyframes act3-btn2-shake{
	from{ }
	33.33%{ transform: scale(1); }
	50%{ transform: scale(0.85); }
	66.66%{ transform: scale(1); }
	to{ }
}
.act3-btn2 i{
	animation:'act3-btn2-shake' 3.0s linear 0s infinite;
	-ms-animation:act3-btn2-shake 3.0s linear 0s infinite;
	-moz-animation:act3-btn2-shake 3.0s linear 0s infinite;
	-o-animation:'act3-btn2-shake' 3.0s linear 0s infinite;
	-webkit-animation:'act3-btn2-shake' 3.0s linear 0s infinite;
}

@keyframes act3-btn3-shake{
	from{ }
	66.66%{ transform: scale(1); }
	83.33%{ transform: scale(0.85); }
	to{ transform: scale(1); }
}
.act3-btn3 i{
	animation:'act3-btn3-shake' 3.0s linear 0s infinite;
	-ms-animation:act3-btn3-shake 3.0s linear 0s infinite;
	-moz-animation:act3-btn3-shake 3.0s linear 0s infinite;
	-o-animation:'act3-btn3-shake' 3.0s linear 0s infinite;
	-webkit-animation:'act3-btn3-shake' 3.0s linear 0s infinite;
}

.act3a-card1{ width: 3.6%; height: 8.8%; left: 4.7%; top: 40.2%; background-image: url("images/act3a-card1.png"); cursor: auto; }

.act3a-card2{ width: 5.2%; height: 8.8%; left: 26.8%; top: 17.2%; background-image: url("images/act3a-card2.png"); cursor: auto; }

.act3a-text1{ width: 7.5%; height: 16.8%; left: 25.7%; top: 75%; background-image: url("images/act3a-text1.png"); }

.act3a-text2{ width: 9.3%; height: 30.2%; left: 85.2%; top: 34.9%; background-image: url("images/act3a-text2.png"); }

.act3b-text1{ width: 7.3%; height: 29.9%; left: 5.1%; top: 35%; background-image: url("images/act3b-text1.png"); }

.act3b-text2{ width: 5.4%; height: 14.4%; left: 24.8%; top: 38.9%; background-image: url("images/act3b-text2.png"); }

.act3b-pic1{ width: 1.84%; height: 25.6%; left: 32.9%; top: 21.1%; background-color: rgba(255,255,255,0.7); border-radius: 50%; }

.act3b-pic1 i{ width: 88%; height: 88%; left: 6%; top: 6%; background-image: url("images/act3b-pic1.gif"); }

.act3b-link1{ width: 0.48%; height: 7.4%; left: 35.2%; top: 28.9%; }

.act3b-link1 b{ left: 150%; top: 15%; width: 1027.5%; height: 129.1%; background-image: url("images/act3b-link1.png"); }

.act3b-card1{ width: 3.6%; height: 8.4%; left: 43.8%; top: 26.2%; background-image: url("images/act3b-card1.png"); cursor: auto; }

.act3b-machine{ width: 10.6%; height: 100%; left: 64.1%; top: 0%; background-image: url("images/act3b-machine.png"); z-index: 8; }

.act3b-start{ width: 1%; height: 13.8%; left: 73.1%; top: 35%; cursor: pointer; transition: all 0.2s; z-index: 9; }
.act3b-start i{ background-image: url("images/act3b-start.png"); }
.act3b-start.off{ transform: scale(0); }

@keyframes act3b-start-shake{
	from{ }
	50%{ transform: scale(1.2); }
	to{ }
}
.act3b-start i{
	animation:'act3b-start-shake' 1.0s linear 0s infinite;
	-ms-animation:act3b-start-shake 1.0s linear 0s infinite;
	-moz-animation:act3b-start-shake 1.0s linear 0s infinite;
	-o-animation:'act3b-start-shake' 1.0s linear 0s infinite;
	-webkit-animation:'act3b-start-shake' 1.0s linear 0s infinite;
}

.act3b-product{ width: 6.9%; height: 29.5%; left: 75.6%; top: 26.2%; }
.act3b-product i{ background-image: url("images/act3b-product.png"); left: -130%; }

@keyframes act3b-product{
	from{  }
	to{ left: 0%; }
}
.act3b-product.on i{
	animation:'act3b-product' 4.0s linear 0s forwards;
	-ms-animation:act3b-product 4.0s linear 0s forwards;
	-moz-animation:act3b-product 4.0s linear 0s forwards;
	-o-animation:'act3b-product' 4.0s linear 0s forwards;
	-webkit-animation:'act3b-product' 4.0s linear 0s forwards;
}

.act3b-text3{ width: 8.0%; height: 41.2%; left: 87.9%; top: 27.8%; background-image: url("images/act3b-text3.png"); }

.act3b-fruit{ width: 5.7%; height: 40.2%; left: 91.1%; bottom: 0%; background-image: url("images/act3b-fruit.png"); background-position: center bottom; }

.act3c-text1{ width: 5.4%; height: 14%; left: 2%; top: 40%; background-image: url("images/act3c-text1.png"); }

.act3c-text2{ width: 5.1%; height: 14%; left: 22.4%; top: 40%; background-image: url("images/act3c-text2.png"); }

.act3c-pic1{ width: 1.25%; height: 25.6%; left: 29.6%; top: 15.7%; background-color: rgba(255,255,255,0.7); border-radius: 50%; }

.act3c-pic1 i{ width: 88%; height: 88%; left: 6%; top: 6%; background-image: url("images/act3c-pic1.gif"); }

.act3c-link1{ width: 0.33%; height: 7.4%; left: 31.1%; top: 22.6%; }

.act3c-link1 b{ left: 150%; top: 15%; width: 1196.1%; height: 223.7%; background-image: url("images/act3c-link1.png"); }

.act3c-link2{ width: 0.33%; height: 7.4%; left: 74.2%; top: 53.6%; }

.act3c-link2 i{ background-image: url("images/video-icon.png"); }

.act3c-link2 b{ left: 18%; top: 7.2%; width: 613.8%; height: 152.8%; background-image: url("images/act3c-link2.png"); }

.act3c-text3{ width: 4.5%; height: 15.8%; left: 39.1%; top: 30%; background-image: url("images/act3c-text3.png"); }

.act3c-card1{ width: 1.4%; height: 10%; left: 50.6%; top: 27.3%; background-image: url("images/act3c-card1.png"); cursor: auto; }

.act3c-card2{ width: 1.7%; height: 10%; left: 61.7%; top: 27.3%; background-image: url("images/act3c-card2.png"); cursor: auto; }

.act3c-card3{ width: 1.7%; height: 10%; left: 73.6%; top: 17.3%; background-image: url("images/act3c-card3.png"); cursor: auto; }

.act3c-text4{ width: 4.3%; height: 14.2%; left: 81.6%; top: 26.6%; background-image: url("images/act3c-text4.png"); }

.act3c-text5{ width: 5.6%; height: 22.2%; left: 90.6%; top: 38.9%; background-image: url("images/act3c-text5.png"); }

.act3a-next,
.act3b-next,
.act3c-next{ height: 9.5%; top: 37.8%; cursor: pointer;}

.act3a-next i,
.act3b-next i,
.act3c-next i{ background-image: url("images/act3-next.png"); }

.act3a-back,
.act3b-back,
.act3c-back{ height: 9.5%; bottom: 37.8%; cursor: pointer; }

.act3a-back i,
.act3b-back i,
.act3c-back i{ background-image: url("images/act3-back.png"); }

.act3a-next,
.act3a-back{ width: 2%; left: 95.7%; }

.act3b-next,
.act3b-back{ width: 2.04%; left: 96.7%; }

.act3c-next,
.act3c-back{ width: 1.4%; left: 97.4%; }

@keyframes act3-next-shake{
	from{ }
	50%{ transform: scale(0.95); }
	to{ }
}
.act3a-next i,
.act3b-next i,
.act3c-next i{
	animation:'act3-next-shake' 1.0s linear 0s infinite;
	-ms-animation:act3-next-shake 1.0s linear 0s infinite;
	-moz-animation:act3-next-shake 1.0s linear 0s infinite;
	-o-animation:'act3-next-shake' 1.0s linear 0s infinite;
	-webkit-animation:'act3-next-shake' 1.0s linear 0s infinite;
}
.act3a-back i,
.act3b-back i,
.act3c-back i{
	animation:'act3-next-shake' 1.0s linear -0.5s infinite;
	-ms-animation:act3-next-shake 1.0s linear -0.5s infinite;
	-moz-animation:act3-next-shake 1.0s linear -0.5s infinite;
	-o-animation:'act3-next-shake' 1.0s linear -0.5s infinite;
	-webkit-animation:'act3-next-shake' 1.0s linear -0.5s infinite;
}

.act4-text1{ width: 3.3%; height: 46.4%; left: 45.7%; top: 26.8%; background-image: url("images/act4-text1.png"); }

.act4-card1{ width: 0.32%; height: 28.3%; left: 54.1%; top: 17.6%; background-image: url("images/act4-card1.png"); }

.act4-pic1{ width: 0.57%; height: 25.6%; left: 55%; top: 14.6%; background-color: rgba(255,255,255,0.7); border-radius: 50%; }

.act4-pic1 i{ width: 88%; height: 88%; left: 6%; top: 6%; background-image: url("images/act4-pic1.gif"); }

.act4-link1{ width: 0.15%; height: 7.4%; left: 55.7%; top: 22.6%; }

.act4-link1 b{ left: 150%; top: 15%; width: 1207.9%; height: 134.6%; background-image: url("images/act4-link1.png"); }

.act4-card2{ width: 0.32%; height: 29.8%; left: 58.6%; top: 23.3%; background-image: url("images/act4-card2.png"); }

.act4-card3{ width: 0.17%; height: 47.9%; left: 62.2%; top: 18.2%; background-image: url("images/act4-card3.png"); }

.act4-card4{ width: 0.17%; height: 38.4%; left: 64.4%; top: 30.9%; background-image: url("images/act4-card4.png"); }

.act4-card5{ width: 0.17%; height: 47.6%; left: 68.6%; top: 24%; background-image: url("images/act4-card5.png"); }

.act4-card6{ width: 0.32%; height: 31.5%; left: 72.6%; top: 28.3%; background-image: url("images/act4-card6.png"); }

.act4-card7{ width: 0.17%; height: 49.0%; left: 75.2%; top: 18.2%; background-image: url("images/act4-card7.png"); }

.act4-card8{ width: 0.17%; height: 46.2%; left: 81.1%; top: 10.4%; background-image: url("images/act4-card8.png"); }

.act4-card9{ width: 0.17%; height: 44.7%; left: 84.1%; top: 32.6%; background-image: url("images/act4-card9.png"); }

.act4-card10{ width: 0.17%; height: 23.1%; left: 88.1%; top: 13.7%; background-image: url("images/act4-card10.png"); }

.act4-text2{ width: 3.2%; height: 61.4%; left: 92.5%; top: 19.3%; background-image: url("images/act4-text2.png"); }

.act4-text3{ width: 2.6%; height: 11.2%; left: 87.2%; top: 74.6%; background-image: url("images/act4-text3.png"); cursor: pointer; }

.act4-editor{ width: 2.1%; height: 51.6%; left: 97.34%; top: 29.3%; background-image: url("images/act4-editor.png"); }

.act4-logo{ width: 0.7%; height: 8.3%; left: 98.72%; top: 84.6%; background-image: url("images/hb-logo.png"); }

.act4-leaf{ width: 1.5%; height: 80%; left: 90.4%; top: 20%; }

.act4-leaf i{
	position: absolute;
	left: 50%;
	top: 50%;
    width: 100%;
    height: 100%;
	transform: translate(-50%, -50%);
    background-image:url("images/leaf.png");
    background-size: 5000% 100% !important;
    background-position-y: 0;
	background-repeat: repeat;
	background-position: center top;
    animation: act4-leaf 6.25s;
    animation-timing-function: steps(50);
    animation-iteration-count: infinite;
	animation-fill-mode: forwards;
}
@keyframes act4-leaf{
    from{ background-position-x: 0; }
    to{ background-position-x: -5000%; }
}

.act4-video-btn{
	cursor: pointer;
	width: 2.3%;
	height: 58.3%;
	left: 87.27%;
	top: 8.6%;
	background-image: url("images/act4-video.jpg");
}

.act4-video{
	cursor: pointer;
	width: 2.3%;
	height: 58.3%;
	left: 87.27%;
	top: 8.6%;
	background: #ca463e;
	outline: none;
	display: none;
}

.act4-video.on{
	display: block;
}


.act-drop{
	position: fixed;
	width: 147.7vh;
	height: 73.5%;
	left: 50%;
	top: 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); 
	background-image: url("images/drop-bg.png"); 
	z-index: 999;
	opacity: 0; 
	transition: all 0.5s; 
}

.act-drop-style2{
	position: fixed;
	width: 147vh;
	height: 70%;
	left: 50%;
	top: 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); 
	background-image: url("images/drop-bg2.png"); 
	z-index: 999;
	opacity: 0; 
	transition: all 0.5s; 
}

.act-drop.on,
.act-drop-style2.on{ 
	-webkit-transform: translate(-50%, -50%) scale(1);
	-moz-transform: translate(-50%, -50%) scale(1);
	-ms-transform:translate(-50%, -50%) scale(1);
	-o-transform: translate(-50%, -50%) scale(1);
	transform: translate(-50%, -50%) scale(1);
	opacity: 1; 
}

.act-drop .close{ width: 4.7%; height: 9.5%; right: 3.1%; top: 7.2%; background-image: url("images/drop-close.png"); transition: all 0.2s; cursor: pointer; z-index: 9; }
.act-drop-style2 .close{ width: 4.7%; height: 10%; right: 9.4%; top: 15.8%; background-image: url("images/drop-close.png"); transition: all 0.2s; cursor: pointer; z-index: 9; }

.act-drop .close:hover,
.act-drop-style2 .close:hover{ transform: scale(1.08); }

.act-drop .show{ width: 81%; height: 81%; left: 1%; top: 9.5%; padding: 0px 8.5%; overflow-y: auto; }
.act-drop-style2 .show{ width: 69%; height: 62.4%; left: 15.5%; top: 18.8%; }

.act-drop .show img,
.act-drop-style2 .show img{ width: 100%; max-height: none; }

.act-web{
	box-shadow: 0px 0px 1em rgba(229,170,98,0.5);
	background: #f6f4e8;
	border: 0.3em solid #e5aa62;
	position: fixed;
	width: 147.7vh;
	height: 90%;
	left: 50%;
	top: 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); 
	z-index: 999;
	opacity: 0; 
	transition: all 0.5s;
}

.act-web.on{
	-webkit-transform: translate(-50%, -50%) scale(1);
	-moz-transform: translate(-50%, -50%) scale(1);
	-ms-transform:translate(-50%, -50%) scale(1);
	-o-transform: translate(-50%, -50%) scale(1);
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

.act-web .close{ width: 4.7%; height: 7.8%; right: 3.1%; top: 5%; background-image: url("images/drop-close.png"); transition: all 0.2s; cursor: pointer; z-index: 9; }
.act-web .close:hover{ transform: scale(1.08); }

.act-web iframe{ position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; display: none; }

.act-web.on iframe{ display: block; }

.act-video{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 50%;
	top: 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); 
	z-index: 999;
	opacity: 0; 
	transition: all 0.5s;
}

.act-video.on{
	-webkit-transform: translate(-50%, -50%) scale(1);
	-moz-transform: translate(-50%, -50%) scale(1);
	-ms-transform:translate(-50%, -50%) scale(1);
	-o-transform: translate(-50%, -50%) scale(1);
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

.act-video video{
	position: absolute;
	width: auto;
	height: 70%;
	left: 50%;
	top: 10%;
	-webkit-transform: translate(-50%, 0%);
	-moz-transform: translate(-50%, 0%);
	-ms-transform:translate(-50%, 0%);
	-o-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
	background: #000;
}

.act-video .txt{
	position: absolute;
	width: 100%;
	top: 80%;
	height: 10%;
	text-align: center;
	font-size: 1em;
	color: #fff;
}

.act-video .txt td{
	font-size: 1.6em;
}

.act-video .close{ width: 3.6em; height: 3.6em; left: calc(50% - 1.8em); bottom: 5%; background-image: url("images/drop-close3.png"); transition: all 0.2s; cursor: pointer; z-index: 9; }
.act-video .close:hover{ transform: scale(1.08); }

.link-tip{ height: 6.3%; background-image: url("images/link-tip.png"); cursor: pointer;}

.act1-tip1,
.act1-tip2{ width: 0.33%; }

.act1-tip1{ left: 59.6%; top: 57.6%; }

.act1-tip2{ left: 80.5%; top: 47.4%; }

.act2-tip1,
.act2-tip2,
.act2-tip3,
.act2-tip4,
.act2-tip5,
.act2-tip6,
.act2-tip7,
.act4-tip1,
.act4-tip2,
.act4-tip3,
.act4-tip4,
.act4-tip5,
.act4-tip6,
.act4-tip7,
.act4-tip8,
.act4-tip9,
.act4-tip10,
.act4-tip11{ width: 0.14%; }

.act2-tip1{ left: 4.9%; top: 25%; }

.act2-tip2{ left: 9.1%; top: 33%; }

.act2-tip3{ left: 14.1%; top: 25%; }

.act2-tip4{ left: 19%; top: 25%; }

.act2-tip5{ left: 23.7%; top: 28%; }

.act2-tip6{ left: 28%; top: 22.4%; }

.act2-tip7{ left: 35.3%; top: 25%; }

.act4-tip1{ left: 54.3%; top: 43%; }

.act4-tip2{ left: 56.3%; top: 30%; }

.act4-tip3{ left: 58.8%; top: 50%; }

.act4-tip4{ left: 62.3%; top: 63%; }

.act4-tip5{ left: 64.5%; top: 66%; }

.act4-tip6{ left: 68.7%; top: 69%; }

.act4-tip7{ left: 72.8%; top: 56%; }

.act4-tip8{ left: 75.3%; top: 64%; }

.act4-tip9{ left: 81.2%; top: 53%; }

.act4-tip10{ left: 84.2%; top: 74%; }

.act4-tip11{ left: 88.2%; top: 34%; }

.act3b-tip1{ width: 0.46%; left: 36.9%; top: 36%; }

.act3b-tip2{ width: 0.46%; left: 73.5%; top: 45.5%; z-index: 9; }

.act3b-tip2.off{ transform: scale(0); opacity: 0;}

.act3c-tip1{ width: 0.32%; left: 32.3%; top: 37%; }

.act3c-tip2{ width: 0.32%; left: 76.1%; top: 64%; }


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