@charset "UTF-8";
body{
	background-color:#fff;
	overflow-x: hidden;
}
#wrapper_10th{
	width:100%; height:auto;
	background-color:#f22536;
	position:relative;
	background-image:url(//img.gohappy.com.tw/event/201706011207_event/images/bg.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	overflow: hidden;
}
#wrapper_1000{
	width:1000px; height:auto;
	position:relative;
	margin:0 auto;
}
@media only screen and (min-width: 50px) and (max-width: 980px) {
	#wrapper_1000{
		overflow: hidden;
	}
}
	#wrapper_1000 .kv{
		width:1000px; height:1287px;
		position:relative;
		background-image:url(//img.gohappy.com.tw/event/201706011207_event/images/kv.jpg);
		background-repeat:no-repeat;
		z-index:200;
	}
		#wrapper_1000 .kv .ball{
			width: 179px;
			height: 223px;
			position: absolute;
			left: 85px;
			top: 85px;
			z-index: 4;
			animation: ball 0.5s ease-out infinite alternate;
		}
		@keyframes ball {
	    from {
				top: 85x;
			}
	    to {
				top: 55px;
			}
		}
		#wrapper_1000 .kv .ball-go{
			width: 455px;
			height: 165px;
			position: absolute;
			left: 288px;
			top: 28px;
			z-index: 4;
		}
		#wrapper_1000 .kv .board{
			width: 302px;
			height: 352px;
			position: absolute;
			left: 735px;
			top: 0px;
			z-index: 4;
			animation: board 1.5s ease-out alternate;
			transition: 0.3s all;
		}
		@keyframes board {
	    from {
				top: -400px;
			}
	    to {
				top: 0px;
			}
		}
		#wrapper_1000 .kv .board:hover{
			top: -20px;
		}
		#wrapper_1000 .kv .go{
			width: 455px;
			height: 165px;
			position: absolute;
			left: 288px;
			top: 28px;
			z-index: 5;
			opacity: 0;
			transition: 0.3s all;
		}
		#wrapper_1000 .kv .go:hover{
			opacity:1;
		}
		#wrapper_1000 .kv .title1{
			width: 459px;
			height: 166px;
			position: absolute;
			left: 253px;
			top: 164px;
			z-index: 3;
			animation: title1 1s ease alternate;
		}
		@keyframes title1 {
	    from {
				top: 200px;
			}
	    to {
				top: 164px;
			}
		}

		#wrapper_1000 .kv .title2{
			width: 819px;
			height: 194px;
			position: absolute;
			left: 90px;
			top: 318px;
			z-index: 3;
			animation: title2 1s ease alternate;
		}
		@keyframes title2 {
	    from {
				top: 250px;
			}
	    to {
				top: 318px;
			}
		}
		#wrapper_1000 .kv .obj2-1{
			width: 485px;
			height: 271px;
			position: absolute;
			left: 14px;
			top: 646px;
			z-index: 3;
		}
		#wrapper_1000 .kv .obj2-1-2{
			width: 485px;
			height: 271px;
			position: absolute;
			left: 14px;
			top: 646px;
			z-index: 4;
			opacity: 0;
			transition: 0.3s all;
		}
		#wrapper_1000 .kv .obj2-1-2:hover{
			opacity: 1;
		}
		#wrapper_1000 .kv .obj2-2{
	width: 481px;
	height: 268px;
	position: absolute;
	left: 506px;
	top: 649px;
	z-index: 3;
		}
		#wrapper_1000 .kv .cartoon1{
	width: 278px;
	height: 250px;
	position: absolute;
	left: 250px;
	top: 415px;
	z-index: 10;
		}
		#wrapper_1000 .kv .cartoon2{
	width: 251px;
	height: 243px;
	position: absolute;
	left: 460px;
	top: 410px;
	z-index: 10;
		}
		#wrapper_1000 .kv .cartoon3{
	width: 202px;
	height: 243px;
	position: absolute;
	left: 118px;
	top: 400px;
	z-index: 10;
		}
		#wrapper_1000 .kv .cartoon4{
	width: 220px;
	height: 263px;
	position: absolute;
	left: 680px;
	top: 375px;
	z-index: 10;
		}
		#wrapper_1000 .kv .cartoon4 img{
			width: 220px;
			height: 263px;
		}
		#wrapper_1000 .kv .star1{
			width: 228px;
			height: 328px;
			position: absolute;
			z-index: 1;
			left: -30px;
			top: 0px;
			animation: star1 3s ease-out infinite ;
			opacity:1;
		}
		@keyframes star1 {
	    0% {
				left: 120px;
				top: -400px;
				opacity:1;
			}
	    30% {
				left: -30px;
				top: 0px;
				opacity:1;
			}
			100% {
				left: -30px;
				top: 0px;
				opacity:0;
			}
		}
		#wrapper_1000 .kv .star2{
			width: 228px;
			height: 328px;
			position: absolute;
			z-index: 1;
			left: -120px;
			top:-130px;
			animation: star2 5s ease-out infinite ;
			opacity:1;
		}
		@keyframes star2 {
			0% {
				left: 10px;
				top: -400px;
				opacity:1;
			}
			30% {
				left: -120px;
				top:-130px;
				opacity:1;
			}
			100% {
				left: -120px;
				top:-130px;
				opacity:0;
			}
		}
		#wrapper_1000 .kv .star3{
			width: 228px;
			height: 328px;
			position: absolute;
			z-index: 1;
			left: 1000px;
			top:-100px;
			animation: star3 3.5s ease-out infinite ;
			opacity:1;
		}
		@keyframes star3 {
			0% {
				left: 1150px;
				top: -400px;
				opacity:1;
			}
			30% {
				left: 1000px;
				top:-100px;
				opacity:1;
			}
			100% {
				left: 1000px;
				top:-100px;
				opacity:0;
			}
		}
		#wrapper_1000 .kv .star4{
			width: 228px;
			height: 328px;
			position: absolute;
			z-index: 1;
			left: 1150px;
			top:-150px;
			animation: star4 2s ease-out infinite ;
			opacity:1;
		}
		@keyframes star4 {
			0% {
				left: 1300px;
				top: -400px;
				opacity:1;
			}
			30% {
				left: 1150px;
				top:-150px;
				opacity:1;
			}
			100% {
				left: 1150px;
				top:-150px;
				opacity:0;
			}
		}
		#wrapper_1000 .kv .star5{
			width: 228px;
			height: 328px;
			position: absolute;
			z-index: 1;
			left: 120px;
			top:-230px;
			animation: star5 4s ease-out infinite ;
			opacity:1;
		}
		@keyframes star5 {
			0% {
				left: 300px;
				top: -450px;
				opacity:1;
			}
			30% {
				left: 120px;
				top:-230px;
				opacity:1;
			}
			100% {
				left: 120px;
				top:-230px;
				opacity:0;
			}
		}
		#wrapper_1000 .kv .light1{
			width: 544px;
			height: 211px;
			position: absolute;
			z-index: 1;
			left: 235px;
			top:7px;
			opacity:1;
			animation: light1 0.5s linear infinite alternate;
		}
		@keyframes light1 {
	    from {
				opacity:1;
			}
	    to {
				opacity:0;
			}
		}
		#wrapper_1000 .kv .light2{
			width: 544px;
			height: 211px;
			position: absolute;
			z-index: 1;
			left: 235px;
			top:7px;
			opacity:0;
			animation: light2 0.5s linear infinite alternate;
		}
		@keyframes light2 {
	    from {
				opacity:0;
			}
	    to {
				opacity:1;
			}
		}
		.left-thing{
			width: 200px;
			height: 234px;
			position: fixed;
			z-index: 10;
			left: -80px;
			top: 300px;
			display: block;
		}
		@media only screen and (min-width: 50px) and (max-width: 980px) {
			.left-thing{
				display: none;
			}
		}
		.right-thing{
			width: 210px;
			height: 291px;
			position: fixed;
			z-index: 10;
			right: -80px;
			top: 400px;
			display: block;
		}
		@media only screen and (min-width: 50px) and (max-width: 980px) {
			.right-thing{
				display: none;
			}
		}
		.mid-thing{
			width: 100px;
			height: 111px;
			position: absolute;
			z-index: 9999999;
			left: 1100px;
			top: 600px;
			display: block;
		}
		@media only screen and (min-width: 50px) and (max-width: 980px) {
			.mid-thing{
				display: none;
			}
		}

#yellow_bg{
	width: 100%; height: 520px;
	background-color:#fc7f23;
}
@media only screen and (min-width: 50px) and (max-width: 980px) {
	#yellow_bg{
		width: 1000px;
	}
}
	.obj3{
		width: 1000px;
		margin: 0 auto;
		position:relative;
		margin-top: -320px;
		z-index:999;
	}
	.obj3-1{
		margin-top: -16px;
	}
	.obj3 div{
		float: left;
		margin-left:6px;
	}
#purple_bg{
	width: 100%; height: 630px;
	background-color:#ca419b;
}
@media only screen and (min-width: 50px) and (max-width: 980px) {
	#purple_bg{
		width: 1000px;
	}
}
	.obj4{
		width: 1000px;
		margin: 0 auto;
		position:relative;
		z-index:999;
		padding-top: 50px;
	}
	.obj4 div{
		float: left;
		margin-left:10px;
	}
#red_bg{
	width: 100%; height: auto;
	background-color:#f22536;
}
@media only screen and (min-width: 50px) and (max-width: 980px) {
	#red_bg{
		width: 1000px;
	}
}
	.red_box{
		width: 950px;
		margin: 0 auto;
		position:relative;
		z-index:999;
		padding-top: 50px;
	}

.tabs{
	width: 100%; height: 113px;
	background-image:url(//img.gohappy.com.tw/event/201706011207_event/images/tabs.jpg);
	background-repeat: repeat-x;
	position: fixed;
	bottom: -50%;
	z-index: 9999999;
}
	.tab-box{
		width: 1020px;
		margin: 0 auto;
	}
	.tabs .tab{
		float: left;
		margin-top: 11px;
	}
	.tab_img1{
		position: absolute;
		opacity: 1;
		transition: 0.3s all;
	}
	.tab_img1:hover{
		opacity: 0;
	}
#rolltop{
	z-index: 999;
}
.obj2-img1{
	opacity: 0;
	transition: 0.3s all;
	cursor: pointer;
	position:absolute;
}
.obj2-img1:hover{
	opacity: 1;
}