a,
body,
div,
h1,
html,
li,
span,
ul {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	line-height: 1
}

ul {
	list-style: none
}

a {
	display: block;
	text-decoration: none;
}

.outline_hidden {
	text-align: -99999px;
	font-size: 0
}

body {
	background-color: #000;
	font-family: "微軟正黑體", Nanum Barun Gothic, sans-serif;
	min-width: 1088px;
}

body,
html {
	
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: " ";
}

.clearfix:after {
	clear: both;
}

:after,
:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#particles-js {
	position: absolute;
	width: 100%;
	height: 951px;
	top: 0;
	left: 0;
	z-index: 999;
	pointer-events: none;
	z-index: 99;
}

.wrap {
	position: relative;
	min-width: 1088px;
	overflow: hidden;
}

.header {
	position: relative;
	background: transparent;
	z-index: 1
}

.header .logo {
	position: absolute;
	left: 0;
	right: 0;
	width: 275px;
	margin: 0 auto;
	top: 25px;
	z-index: 99;
}

.header .logo a {
	display: block;
	text-indent: -99999em;
	float: left;
}

.header .logo a.laLogo {
	background: transparent url(../img/logo.png) no-repeat 0 0;
	width: 98px;
	height: 61px;
	background-size: 100% auto;
	margin-right: 50px;
	position: relative;
}

.header .logo a.laLogo:after {
	content: '';
	width: 1px;
	height: 31px;
	background: #191816;
	display: block;
	position: absolute;
	right: -23px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.header .logo a.lineLogo {
	background: transparent url(../img/title.png) no-repeat 0 0;
	width: 127px;
	height: 49px;
	background-size: 100% auto;
	margin: 6px 0 0;
}

.header .home {
	position: absolute;
	left: 50%;
	margin-left: 475px;
	background: transparent url(../img/btn_home.png) no-repeat 0 0
}

.main .header {
	height: 840px
}

.main .header .home {
	top: 35px;
	width: 125px;
	height: 28px;
	background-position: 0 0px
}

.main .header .home:hover {
	filter: drop-shadow(0px 0px 5px rgb(255, 255, 255));
}

.main .title {
	position: fixed;
	top: 0;
	width: 100%;
	height: 840px;
	background: transparent url(../img/main_header.jpg) no-repeat center 0;
	z-index: -1;
}

.main .lineFriends,
.main .char-1,
.main .char-2,
.main .char-3,
.main .char-4,
.main .char-5,
.main .ribbon {
	position: absolute;
	opacity: 0;
	-webkit-transition-timing-function: cubic-bezier(.2, .7, .6, 1);
	transition-timing-function: cubic-bezier(.2, .7, .6, 1);
	transition-duration: .5s;
}

.main .lineFriends {
	width: 658px;
	height: 574px;
	background: transparent url(../img/line_friends.png) no-repeat 0 0;
	top: 416px;
	left: 50%;
	z-index: 9;
	margin-left: -329px;
	-webkit-transform: scale(.5) translateY(400px);
	transform: scale(.5) translateY(400px);
}

.main .char-1 {
	width: 624px;
	height: 438px;
	background: transparent url(../img/char_1.png) no-repeat 0 0;
	top: 526px;
	right: 50%;
	z-index: 6;
	margin-right: 247px;
	-webkit-transform: translate(-300px);
	-ms-transform: translate(-300px);
	transform: translate(-300px);
}

.main .char-2 {
	width: 698px;
	height: 456px;
	background: transparent url(../img/char_2.png) no-repeat 0 0;
	top: 510px;
	left: 50%;
	z-index: 7;
	margin-left: 227px;
	-webkit-transform: translate(300px);
	-ms-transform: translate(300px);
	transform: translate(300px);
}

.main .char-3 {
	width: 350px;
	height: 330px;
	background: transparent url(../img/char_3.png) no-repeat 0 0;
	top: 322px;
	right: 50%;
	z-index: 1;
	margin-right: 340px;
	-webkit-transform: translateY(-200px);
	-ms-transform: translateY(-200px);
	transform: translateY(-200px);
}

.main .char-4 {
	width: 219px;
	height: 245px;
	background: transparent url(../img/char_4.png) no-repeat 0 0;
	top: 449px;
	left: 50%;
	z-index: 1;
	margin-left: 34px;
	-webkit-transform: translateY(-200px);
	-ms-transform: translateY(-200px);
	transform: translateY(-200px);
}

.main .char-5 {
	width: 230px;
	height: 300px;
	background: transparent url(../img/char_5.png) no-repeat 0 0;
	top: 347px;
	left: 50%;
	z-index: 1;
	margin-left: 365px;
	-webkit-transform: translateY(-200px);
	-ms-transform: translateY(-200px);
	transform: translateY(-200px);
}

.main .ribbon {
	background: transparent url(../img/ribbon.png) no-repeat 0 0;
	width: 670px;
	height: 249px;
	top: 374px;
	left: 50%;
	margin-left: -335px;
	z-index: 1;
	-webkit-transform: scale(.5) translateY(400px);
	transform: scale(.5) translateY(400px);
}

.main.move .lineFriends,
.main.move .ribbon {
	transition-delay: .3s;
	opacity: 1;
	-ms-transform: scale(1) translateY(0);
	transform: scale(1) translateY(0);
	/* animation: move 3s cubic-bezier(.4, 0, .2, 1) 2.2s infinite normal; */
}

.main.move .char-1,
.main.move .char-2,
.main.move .char-3,
.main.move .char-4,
.main.move .char-5,
.main.move .ribbon {
	opacity: 1;
	-webkit-transform: translate(0);
	-ms-transform: translate(0);
	transform: translate(0);
}

.main.move .char-1,
.main.move .char-2 {
	transition-delay: .7s;
}

.main.move .char-3,
.main.move .char-5 {
	transition-delay: 1.1s;
}

.main.move .char-4,
.main.move .ribbon {
	transition-delay: 1.5s;
}

.main .pumpkin {
	position: absolute;
	width: 467px;
	height: 414px;
	right: 50%;
	margin-right: -767px;
	z-index: 3;
	background: transparent url(../img/pumpkin.png) no-repeat 0 0;
	top: 152px;
	transform-origin: 50% 0%;
	transform: rotate(-3deg);
	animation: pumpkin 8s ease-in-out 0s infinite;
}

.main .pumpkin:before {
	content: '';
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/pumpkin_over.png) no-repeat center 0;
	pointer-events: none;
	-webkit-animation: opacity 6s infinite cubic-bezier(0.42, 0, 0.03, 0.99);
	animation: opacity 6s infinite cubic-bezier(0.42, 0, 0.03, 0.99);
}

.main .navbar {
	background: transparent url(../img/m_nav.png) no-repeat center 0;
	height: 111px;
	top: 840px;
	position: absolute;
	width: 100%;
	text-align: center;
	z-index: 99;
	padding-top: 35px;
}

.main .nav {
	display: inline-block;
	height: 100%;
}

.main .nav li {
	float: left;
	display: block;
	height: 100%;
}

.main .nav li a {
	-moz-transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

.main .nav li a {
	display: inline-block;
	position: relative;
	text-indent: -9999em;
	background: transparent url(../img/navbar_btn.png) no-repeat 0 50%;
	height: 100%;
}

.main .nav li a:hover,
.main .nav li.on a {
	background: transparent url(../img/navbar_btn_on.png) no-repeat 0 50%;
}

.main .nav li a:after {
	content: '';
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;
	background: #807e7a;
	width: 1px;
	height: 43px;
	display: block;
}

.main .nav li:first-child a:after {
	background: transparent;
}

.main .nav li:first-child a {
	width: 243px;
}

.main .nav li:nth-child(2) a {
	width: 245px;
	background-position-x: -244px;
}

.main .nav li:nth-child(3) a {
	width: 168px;
	background-position-x: -490px;
}

.main .nav li:nth-child(4) a {
	width: 238px;
	background-position-x: -659px;
}

.main .nav li:nth-child(5) a {
	width: 194px;
	background-position-x: -898px;
}

.content {
	margin: 110px 0 0;
	padding: 95px 0 0;
	position: relative;
	background: url(../img/con_bg.jpg) no-repeat 50% 0;
	height: 1750px;
	text-align: center;
}

.content>[id*="con"] {
	height: 100%;
}

.content #con1 {
	background: url(../img/event_info_1.png) no-repeat 50% 0;
	position: relative;
}

.content #con2 {
	background: url(../img/event_info_2.png) no-repeat 50% 0;
}

.content #con3 {
	background: url(../img/event_info_3.png) no-repeat 50% 0;
}

.content #con4 {
	background: url(../img/event_info_4.png) no-repeat 50% 0;
}

.content #con5 {
	background: url(../img/event_info_5.png) no-repeat 50% 0;
}

.lineGif {
	position: absolute;
	left: 50%;
	margin-left: 270px;
	top: 894px;
	z-index: 5;
	background: transparent url(../img/linegif.gif) no-repeat 0 0;
	width: 107px;
	height: 111px;
}
.content>[class*="xmasBall-"] {
	position: absolute;
	background: transparent url(../img/xmasballs.png) no-repeat 50% 0;
	background-size: 100% auto;
	transform-origin: 50% 0%;
}

.content>.xmasBall-1 {
	background-position-y: -378px;
	width: 56px;
	height: 119px;
	top: -25px;
	right: 50%;
	margin-right: 847px;
	transform: rotate(-3deg);
	animation: xmasBall 2.5s ease-in-out 0s infinite;
}
.content>.xmasBall-2 {
	background-position-y: -187px;
	width: 79px;
	height: 171px;
	top: 0;
	right: 50%;
	margin-right: 766px;
	transform: rotate(-3deg);
	animation: xmasBall 2.5s ease-in-out 1s infinite;
}
.content>.xmasBall-3 {
	background-position-y: -614px;
	width: 69px;
	height: 172px;
	top: -65px;
	right: 50%;
	margin-right: 653px;
	transform: rotate(-3deg);
	animation: xmasBall 2.5s ease-in-out 1.5s infinite;
}
.content>.xmasBall-4 {
	background-position-y: -358px;
	width: 84px;
	height: 203px;
	top: -60px;
	right: 50%;
	margin-right: 559px;
	transform: rotate(-3deg);
	animation: xmasBall 2.5s ease-in-out 2s infinite;
}
.content>.xmasBall-5 {
	background-position-y: -628px;
	width: 94px;
	height: 209px;
	top: -60px;
	left: 50%;
	margin-left: 517px;
	transform: rotate(-3deg);
	animation: xmasBall 2.5s ease-in-out 0s infinite;
}
.content>.xmasBall-6 {
	background-position-y: 9px;
	width: 90px;
	height: 188px;
	top: -83px;
	left: 50%;
	margin-left: 680px;
	transform: rotate(-3deg);
	animation: xmasBall 2.5s ease-in-out 1s infinite;
}
.content>.xmasBall-7 {
	background-position-y: -733px;
	width: 85px;
	height: 215px;
	top: -64px;
	left: 50%;
	margin-left: 770px;
	transform: rotate(-3deg);
	animation: xmasBall 2.5s ease-in-out 2s infinite;
}
.content>.xmasBall-8 {
	background-position-y: -92px;
	width: 56px;
	height: 162px;
	top: -79px;
	left: 50%;
	margin-left: 860px;
	transform: rotate(-3deg);
	animation: xmasBall 2.5s ease-in-out 3s infinite;
}
.wrap .tab li {
	position: absolute;
	list-style-type: none;
}

.wrap .tab li::after {
	filter: drop-shadow(-5px 5px 5px rgba(0, 0, 0, 0.6));
}

.copyright {
	text-align: center;
	padding: 30px 0;
	background: #05121d;
	position: relative;
	z-index: 99;
}

@keyframes opacity {
	50% {
		opacity: 1;
	}
}

@-webkit-keyframes opacity {
	50% {
		opacity: 1;
	}
}

@keyframes xmasBall {
	0% {
		-webkit-transition-timing-function: cubic-bezier(.2, .7, .6, 1);
		transition-timing-function: cubic-bezier(.2, .7, .6, 1);
		transform: rotate(-3deg);
	}

	50% {
		transform: rotate(3deg);
	}
}

@keyframes move {
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-15px);
	}
}