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

:root {
	--main-bg-color: #2d2445;
}

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

body,
html {
	width: 100%;
	height: 100%;
}

p {
	font-size: 1.2rem;
	padding: 0;
	margin: 0;
	margin-top: 0.5rem;
}

h1 {
	font-size: 1.3rem;
	font-weight: bolder;
	margin-top: 0.5rem;
}


#main {
	width: 100vw;
	height: 100vh;
	position: relative;
}

.content {
	position: relative;
	z-index: 98;
}

.wrap {
	position: relative;
	overflow: hidden;
	/* min-width: 1580px; */
}

.header {
	position: relative;
	background: transparent;
	z-index: 1;
	background: transparent url(../img/main-bg.png) no-repeat center 0;
	/* height: 949px; */
	height: 100vh;
	width: 100%;
	background-size: cover;
}



#main .logo {
	position: absolute;
	left: 4rem;
	top: 1rem;
	z-index: 999;
}

#main .logo:hover {
	filter: brightness(1.2);
}



.titBox {
	position: absolute;
	z-index: 1;
	width: 100%;
	max-width: 100%;
	top: 0;
	left: 23px;
	text-align: center;
	margin-top: 12vh;
}


.titBox .title {
	position: relative;
	width: 490px;
	height: 390px;
	margin: 11px auto;
}

.titBox .title img {
	max-height: 39vh;
	position: relative;
	filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
}

.titBox .title::before {
	content: "";
	position: absolute;
	background: url(../img/main-char2.png)no-repeat center center;
	width: 251px;
	height: 155px;
	right: -54%;
	top: -15%;
	animation: float ease-in-out 1.5s infinite alternate;
}

@keyframes float {
	0% {
		transform: translate(0, 0)
	}

	50% {
		transform: translate(0, 10px)
	}

	100% {
		transform: translate(0, 0)
	}
}

.char1 {
	z-index: 1;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.char1 img {
	position: relative;
	right: 509px;
	top: 10px;
	max-height: 95vh;
}

.char2 {
	z-index: 2;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.char2 img {
	position: relative;
	left: 608px;
	bottom: -7px;
	max-height: 75vh;
}

.btnBox {
	position: absolute;
	text-align: center;
	width: 100%;
	max-width: 100%;
	height: 39%;
	z-index: 999;
	left: 0;
	bottom: 8vh;
	margin: auto;
}

.btn-up {
	display: flex;
	justify-content: center;
}

.btn-up-m {
	display: none;
}

.btnBox ul li a {
	background: url(../img/main-btn-up.png) no-repeat;
	width: 226px;
	height: 66px;
	cursor: pointer;
	margin: 0 10px;
}

.btnBox ul li a:hover {
	background: url(../img/main-btn-up-hover.png) no-repeat;
}

.btnBox ul li:nth-child(2) a {
	background-position-x: -240px;
}

.btnBox ul li:last-child a {
	background-position-x: -480px;
}

.btn-down {
	margin-top: 30px;
}

.btn-down a {
	background: url(../img/main-btn-down.png) no-repeat;
	width: 225px;
	height: 132px;
	margin: auto;
	background-position-y: center;
}

.btn-down a:hover {
	filter: brightness(1.3);
}


.main .navbar {
	position: absolute;
	bottom: 0;
	z-index: 1001;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--main-bg-color);
	width: 100%;
	height: 90px;
	border-top: white 1.5px solid;
	border-bottom: white 1.5px solid;
}

.main .nav li {
	float: left;
	display: block;
	cursor: pointer;
	width: 25%;
}

.main .navbar a {
	border-right: white 1.5px solid;
	color: white;
	font-size: 26px;
	font-weight: bolder;
	display: inline-block;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.main .navbar li:first-child {
	border-left: white 1.5px solid;
}

.main .nav {
	width: 65%;
	height: 100%;
	display: flex;
	margin: auto;
	text-align: center;
	vertical-align: middle;
}

.main .navbar.fixed {
	position: fixed;
	top: 0;
}


.main .nav li.on a,
.main .navbar a:hover {
	background-color: white;
	color: var(--main-bg-color);
}


.main .cont {
	width: 100%;
	text-align: center;
}

.eventGroup {
	position: relative;
	/* background-color: rgba(0, 0, 0, 0.507); */
	width: 100%;
	height: 362px;
	top: 888px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.eventGroup .event {
	cursor: pointer;
	opacity: 0;
	position: relative;
	width: 239px;
	height: 48%;
	margin: 0px 6px;
	/* background-color: rgba(255, 255, 255, 0.507); */
}

.eventGroup .event:hover {
	opacity: 1;
}

.eventGroup .event .event-img {
	width: 200px;
	height: 250px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.eventGroup .event .event1-img {
	background: url(../img/popup1.png);
}

.eventGroup .event .event2-img {
	background: url(../img/popup2.png);
}

.eventGroup .event .event3-img {
	background: url(../img/popup3.png);
}

.eventGroup .event .event4-img {
	background: url(../img/popup4.png);
}

.eventGroup .event .event5-img {
	background: url(../img/popup5.png);
}

.eventGroup .event .event6-img {
	background: url(../img/popup6.png);
}

.eventGroup .event .event7-img {
	background: url(../img/popup7.png);
}

.eventGroup .event .event8-img {
	background: url(../img/popup8.png);
}

.eventGroup4 {
	display: inline-block;
	position: relative;
	/* background-color: rgba(0, 0, 0, 0.507); */
	top: 2265px;
	width: 100%;
	height: auto;
}

.eventGroup4 .event {
	cursor: pointer;
	opacity: 0;
	position: relative;
	display: block;
	width: 43px;
	height: 37px;
	margin: 0 0 113px 0px;
	/* background-color: rgba(255, 255, 255, 0.507); */
	left: 50%;
	transform: translateX(calc(-50% + 335%));
}

.eventGroup4 .event:hover {
	opacity: 1;
}

.eventGroup4 .event .event-img {
	width: 200px;
	height: 250px;
	position: absolute;
	top: 50%;
	left: 120%;
	transform: translateY(-50%);
}

.eventGroup4 .event .event9-img {
	background: url(../img/popup_4-1.png);
}

.eventGroup4 .event .event10-img {
	background: url(../img/popup_4-2.png);
}

.main .cont .coupon3 {
	z-index: 999;
	width: 680px;
	height: 81px;
	position: absolute;
	top: 682px;
	left: 50%;
	transform: translateX(-50%);
}

.main .cont .coupon3 .txt {
	position: absolute;
	z-index: 1;
	left: 0;
	text-align: center;
	width: 100%;
	font-size: 38px;
	font-weight: bold;
	line-height: 81px;
	color: #fff;
}

.main .cont .coupon3 .txt button {
	margin-top: 10px;
	cursor: pointer;
}


.main .cont_01 {
	height: 1750px;
	background: transparent url(../img/01-bg.jpg) no-repeat center 0;
}

.main .cont_02 {
	height: 2600px;
	background: transparent url(../img/02-bg.jpg) no-repeat center 0;
}

.main .cont_03 {
	height: 2750px;
	background: transparent url(../img/03-bg.jpg) no-repeat center 0;
}

.main .cont_04 {
	height: 3443px;
	background: transparent url(../img/04-bg.jpg) no-repeat center -10px;
}

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

/* page1 */
.char1-1 {
	z-index: 1;
	position: absolute;
	left: 513px;
	top: 0;
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.char1-1 img {
	position: relative;
	left: 171px;
	top: 287px;
	max-height: 95vh;
}


.char1-2 {
	z-index: 2;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.char1-2 img {
	position: relative;
	right: 561px;
	top: 584px;
	max-height: 75vh;
}

/* page2 */
.char2-1 {
	z-index: 1;
	position: absolute;
	left: 513px;
	top: 0;
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.char2-1 img {
	position: relative;
	left: 160px;
	top: 1051px;
	max-height: 95vh;
}


.char2-2 {
	z-index: 2;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.char2-2 img {
	position: relative;
	right: 682px;
	bottom: 157px;
	max-height: 75vh;
}

/* page3 */
.char3-1 {
	z-index: 1;
	position: absolute;
	left: 513px;
	top: 0;
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.char3-1 img {
	position: relative;
	left: 226px;
	top: 844px;
	max-height: 95vh;
}


.char3-2 {
	z-index: 2;
	position: absolute;
	left: 0;
	top: 0;
	;
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.char3-2 img {
	position: relative;
	right: 700px;
	top: 959px;
	max-height: 75vh;
}

/* page4 */
.char4-1 {
	z-index: 1;
	position: absolute;
	left: 513px;
	top: 0;
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.char4-1 img {
	position: relative;
	left: 174px;
	top: 344px;
	max-height: 95vh;
}


.char4-2 {
	z-index: 2;
	position: absolute;
	left: 0;
	top: 0;
	;
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.char4-2 img {
	position: relative;
	right: 621px;
	top: 1064px;
	max-height: 75vh;
}

.char4-3 {
	z-index: 1;
	position: absolute;
	left: 513px;
	bottom: 0;
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.char4-3 img {
	position: relative;
	left: 103px;
	bottom: 854px;
	max-height: 95vh;
}

.char4-4 {
	z-index: 2;
	position: absolute;
	left: 0;
	bottom: 0;
	;
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.char4-4 img {
	position: relative;
	right: 645px;
	bottom: 322px;
	max-height: 75vh;
}

@media (min-width: 2560px) {
	.header {
		height: 1082px;
		width: 100%;
		background-size: cover;
	}

	.main .cont {
		width: 100%;
		background-size: cover !important;
	}

	.main .cont .title {
		position: relative;
		top: -172px;
	}

	.eventGroup {
		height: 483px;
		top: 1184px;
	}
}

@media (max-width: 1200px) {

	body, html {
		min-width: 1100px;
	}

	.main .navbar.fixed {
		top: -27px;
	}

	#main {
		width: auto;
		height: auto;
		position: relative;
	}

	#main .logo a img {
		width: 150px;
	}

	.btnBox ul li:nth-child(1) a {
		display: none;
	}
}

@media (max-width: 480px) {
	.charGrouop {
		display: none;
	}

	.btn-up {
		display: none;
	}

	.btn-up-m {
		display: flex;
		justify-content: center;
	}

	.wrap {
		min-width: 1100px;
	}

	.header {
		height: 820px;
		width: 100%;
	}

	.main .nav {
		width: 1100px;
	}

	.main .navbar.fixed {
		top: -15px;
		height: 104px;
	}

	.main .cont_03 {
		height: 2284px;
		background: transparent url(../img/03-bg.jpg) no-repeat center center;
		background-size: cover;
	}

	.main .cont_04 {
		height: 2886px;
		background: transparent url(../img/04-bg.jpg) no-repeat center 0;
		background-size: cover;
	}

	.main .cont .coupon3 {
		top: 559px;
	}

	.main .cont .coupon3 .txt {
		font-size: 35px;
	}

	.eventGroup4 {
		top: 1893px;
	}

	.eventGroup4 .event {
		transform: translateX(calc(-50% + 279%));
	}

	.char1 img {
		right: 367px;
		top: 16px;
		max-height: 720px;
	}

	.char2 img {
		left: 400px;
		bottom: -7px;
		max-height: 540px;
	}
	.titBox .title img {
		max-height: 290px;
		filter: drop-shadow(0 0 44px rgba(255, 255, 255, 1));
	}
}