@charset "utf-8";
/* CSS Document */


body{
	background:#ffe013;
	margin:0px 0px;
	padding:0px 0px;
}
a{
	text-decoration:none;
}
.head{
	background:#FFF;
    margin: 0px auto;
	padding: 0px auto;
	height:auto;
	border-bottom:#f0f0f0 2px solid;
}
.content{
	background:url(images/bg.jpg) no-repeat center top;
	margin: 0px auto;
	padding: 0px auto;
	overflow:hidden;
}
.content01{
	background-image:url(images/bg3.png), url(images/bg4.png), url(images/bg2.jpg);
	background-repeat:repeat-y, no-repeat, no-repeat;
	background-position: center top, center 200px, center top;
	margin: 0px auto;
	padding: 0px auto;
}
.footer{
	display:block;
	margin: 0px auto;
	padding: 0px auto;
}
.nav{
	display:block;
	position:fixed;
	background:url(images/nav_bg.png) center top;
	width:100%;
	height:68px;
	bottom:0px;
	z-index:999;
}
.move_wrap{
	display:block;
	position:relative;
	width:950px;
	height:824px;
	margin:0 auto;
	padding:0 auto;
}
.act,.act2,.act3,.act4,.act5,.act6,.bubble,.bubble2,.bubble3,.bubble4,.bubble5{
	display: block;
	position: absolute;
}
.act{
	background-image: url(images/act1.png);
	width: 780px;
	height: 455px;
	left: 62px;
	top: 74px;
	z-index: 10;
	 transition:all ease-in-out .3s;
	animation-name: move;
	animation-iteration-count:1;
	animation-duration: 1s;
	-webkit-animation-name: move;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 1s;
	-moz-animation-name: move;
	-moz-animation-iteration-count: 1;
	-moz-animation-duration: 1s;
}
@keyframes move{
	0%{
		transform:scale(0);
	}
	50%{
		transform:scale(1);
	}
	60%{
		transform:scale(0.9);
	}
	70%{
		transform:scale(1);
	}
	80%{
		transform:scale(0.9);
	}
	90%{
		transform:scale(1);
	}
}

.act2{
	background-image: url(images/act2.png);
	width: 214px;
	height: 188px;
	z-index: 9;
	left: 135px;
	top: 519px;
	animation-name: dd;
	animation-iteration-count: 1;
	animation-duration: 1s;
	-webkit-animation-name: dd;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 1s;
	-moz-animation-name: dd;
	-moz-animation-iteration-count: 1;
	-moz-animation-duration: 1s;
}
@keyframes dd{
	0%{top:400px; opacity:0;}
	40%{top:400px; opacity:0;}
	100%{top:519px; opacity:1;}
}
.act3{
	background-image: url(images/act3.png);
	width: 196px;
	height: 175px;
	z-index: 8;
	left: 260px;
	top: 627px;
	animation-name: dd2;
	animation-iteration-count: 1;
	animation-duration: 1s;
	-webkit-animation-name: dd2;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 1s;
	-moz-animation-name: dd2;
	-moz-animation-iteration-count: 1;
	-moz-animation-duration: 1s;
}
@keyframes dd2{
	0%{top:400px; opacity:0;}
	50%{top:400px; opacity:0;}
	100%{top:627px; opacity:1;}
}
.act4{
	background-image: url(images/act4.png);
	width: 196px;
	height: 174px;
	z-index: 9;
	left: 424px;
	top: 482px;
	animation-name: dd3;
	animation-iteration-count: 1;
	animation-duration: 1s;
	-webkit-animation-name: dd3;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 1s;
	-moz-animation-name: dd3;
	-moz-animation-iteration-count: 1;
	-moz-animation-duration: 1s;
}
@keyframes dd3{
	0%{top:400px; opacity:0;}
	60%{top:400px; opacity:0;}
	100%{top:482px; opacity:1;}
}
.act5{
	background-image: url(images/act5.png);
	width: 196px;
	height: 174px;
	z-index: 8;
	left: 533px;
	top: 604px;
	animation-name: dd4;
	animation-iteration-count: 1;
	animation-duration: 1s;
	-webkit-animation-name: dd4;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 1s;
	-moz-animation-name: dd4;
	-moz-animation-iteration-count: 1;
	-moz-animation-duration: 1s;
}
@keyframes dd4{
	0%{top:400px; opacity:0;}
	70%{top:400px; opacity:0;}
	100%{top:604px; opacity:1;}
}
.act6{
	background-image: url(images/act6.png);
	width: 272px;
	height: 240px;
	z-index: 11;
	left: 663px;
	top: 372px;
	animation-name: dd5;
	animation-iteration-count: 1;
	animation-duration: 1s;
	-webkit-animation-name: dd5;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 1s;
	-moz-animation-name: dd5;
	-moz-animation-iteration-count: 1;
	-moz-animation-duration: 1s;
}
@keyframes dd5{
	0%{top:200px; opacity:0;}
	80%{top:200px; opacity:0;}
	100%{top:372px; opacity:1;}
}
.bubble{
	background-image: url(images/bubble_1.png);
	width: 395px;
	height: 393px;
	z-index: 2;
	left: -375px;
	top: 178px;
	animation-name: bb;
	animation-iteration-count: infinite;
	animation-duration: 2s;
	-webkit-animation-name: bb;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 2s;
	-moz-animation-name: bb;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 2s;
}
@keyframes bb{
	0%{top:178px;}
	50%{top:180px;}
	100%{top:178px;}
}
.bubble2{
	background-image: url(images/bubble_2.png);
	width: 193px;
	height: 185px;
	z-index: 2;
	right: -434px;
	top: 120px;
	animation-name: bb2;
	animation-iteration-count: infinite;
	animation-duration: 2s;
	-webkit-animation-name: bb2;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 2s;
	-moz-animation-name: bb2;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 2s;
}
@keyframes bb2{
	0%{top:120px;}
	50%{top:125px;}
	100%{top:120px;}
}
.bubble3{
	background-image: url(images/bubble_3.png);
	width: 393px;
	height: 411px;
	z-index: 1;
	right: -345px;
	top: -60px;
	animation-name: bb3;
	animation-iteration-count: infinite;
	animation-duration: 2s;
	-webkit-animation-name: bb3;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 2s;
	-moz-animation-name: bb3;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 2s;
}
@keyframes bb3{
	0%{top:-60px;}
	50%{top:-70px;}
	100%{top:-60px;}
}
.bubble4{
	background-image: url(images/bubble_4.png);
	width: 250px;
	height: 258px;
	z-index: 1;
	right: -331px;
	top: 349px;
	animation-name: bb4;
	animation-iteration-count: infinite;
	animation-duration: 2.5s;
	-webkit-animation-name: bb4;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 2.5s;
	-moz-animation-name: bb4;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 2.5s;
}
@keyframes bb4{
	0%{top:349px;}
	50%{top:359px;}
	100%{top:349px;}
}
.bubble5{
	background-image: url(images/bubble_5.png);
	width: 240px;
	height: 243px;
	z-index: 1;
	left: -141px;
	top: 26px;
	animation-name: bb5;
	animation-iteration-count: infinite;
	animation-duration: 2.5s;
	-webkit-animation-name: bb5;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 2.5s;
	-moz-animation-name: bb5;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 2.5s;
}
@keyframes bb5{
	0%{top:26px;}
	50%{top:30px;}
	100%{top:26px;}
}

.act a,.act2 a,.act3 a,.act4 a,.act5 a,.act6 a{
	display: block;
	width:100%;
	height:100%;
	cursor:pointer;
}
.act:hover{ transform:scale(1.02);}
.act2:hover{background-image:url(images/act2-1.png); top:522px; transition:top ease-in-out .3s;}
.act3:hover{background-image:url(images/act3-1.png); top:630px; transition:top ease-in-out .3s;}
.act4:hover{background-image:url(images/act4-1.png); top:487px; transition:top ease-in-out .3s;}
.act5:hover{background-image:url(images/act5-1.png); top:610px; transition:top ease-in-out .3s;}
.act6:hover{background-image:url(images/act6-1.png); top:377px; transition:top ease-in-out .3s;}


.light, .light2{
	background-image: url(images/light.png);
	width: 321px;
	height: 181px;
}
.light{
	left: -503px;
	top: 547px;
}
.light2{
	right: -462px;
	top: 542px;
}
.move{
	display: block;
	position: absolute;
	z-index: 1;
	opacity: 0;
	animation-name: ll;
	animation-iteration-count: infinite;
	animation-duration: 3s;
	-webkit-animation-name: ll;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 3s;
	-moz-animation-name: ll;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 3s;
}
@keyframes ll{
	0%{
		opacity:0;
	}
	50%{
		opacity:1;
	}
	100%{
		opacity:0;
	}
}
}