@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap');

html.disableScroll{
	overflow:hidden;
}

body{
	--highlight-color:#5c83a4;
}

.mainContainer{
	max-width:none;
	overflow:hidden;
}

.midBlock,
.themeMain{
	display:none;
}

.themeEventContainer{
	font-family:'Noto Sans TC', Tahoma, 微軟正黑體, sans-serif;
	font-weight: 500;
	font-size:clamp(14px, 1.26vw, 24px);
	color:#333;
}

/************************************** 其它共用 start ***************************************************/
.svgWrapper svg{
	width:100%;
	height:100%;
}

.belt{
	position: absolute;
	font-size: 0;
	aspect-ratio:3.94;
	background: url(../images/belt.svg) no-repeat center/contain;
}
/************************************** 其它共用 end ***************************************************/

/************************************** header start ***************************************************/
.themeEventContainer header{
	position:fixed;
	right:0;
	top:90px;
	color:currentColor;
	z-index:1;
	display: none;
}

.themeEventContainer header nav,
.themeEventContainer header ._burgerBtn{
	position:absolute;
	right:0;
	top:0;
}

/********************** nav start *************************/
.themeEventContainer header nav{
	display:flex;
	flex-direction:column;
	align-items: center;
	text-align: center;
	background:rgba(238, 239, 227, 0.9);
	width:0;
	height:100vh;
	font-size:1.05em;
	overflow:hidden;
	transition:all 0.2s;
}

.themeEventContainer header nav > ul{
	margin-top:5em;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.themeEventContainer header nav > ul li{
	border-bottom: 1px solid;
	width:4.2em;
}
.themeEventContainer header nav > ul li+li{
	margin-top:1em;
}
.themeEventContainer header nav a:hover,
.themeEventContainer header nav li.active,
.themeEventContainer header nav li.active a{
	color:var(--highlight-color);
}
.themeEventContainer header nav a{
	display: block;
	font-weight:500;
	padding:0.5em 0;
	line-height:1em;
	color:currentColor;
	transition:all 0.2s;
}
.themeEventContainer header nav > ul li:nth-child(1) a{
	font-size:1.2em;
}
.themeEventContainer header nav a:hover,
.themeEventContainer header nav li.active a{
	font-weight:900;
}

.themeEventContainer header nav .sns{
	margin-top:3em;
}
.themeEventContainer header nav .sns ul{
	display:flex;
}
.themeEventContainer header nav .sns ul li{
	cursor:pointer;
	width:2em;
	transition:transform 0.2s;
}
.themeEventContainer header nav .sns ul li+li{
	margin-left:0.25em;
}
.themeEventContainer header nav .sns ul li:hover{
	transform:scale(1.2);
}
.themeEventContainer header nav .sns ul li:before{
	content:"";
	display:block;
	padding-top:100%;
	background:url(../images/sns.svg) no-repeat;
	background-size:300%;
	background-position-y:top;
}
.themeEventContainer header nav .sns ul li:nth-child(1):before{ background-position-x:left;}
.themeEventContainer header nav .sns ul li:nth-child(2):before{ background-position-x:center;}
.themeEventContainer header nav .sns ul li:nth-child(3):before{ background-position-x:right;}
.themeEventContainer header nav .sns ul li span{
	display:none;
}
/********************** nav end *************************/

/********************** _burgerBtn start *************************/
.themeEventContainer header ._burgerBtn{
	margin:0.8em 0.8em 0 0;
	width:1.8em;
}
.themeEventContainer header ._burgerBtn span,
.themeEventContainer header ._burgerBtn span:before,
.themeEventContainer header ._burgerBtn span:after{
	position:absolute;
	display:block;
	right:0;
	width:100%;
	height:3px;
	border-radius:0.25em;
	background:#FFF;
}
.themeEventContainer header ._burgerBtn span:before,
.themeEventContainer header ._burgerBtn span:after{
	content:"";
	top:50%;
	transition:transform 0.2s;
}
.themeEventContainer header ._burgerBtn span{
	top:0;
	margin-top:27.77%;
	z-index:0;
}
.themeEventContainer header ._burgerBtn span:before{ transform:translateY(-350%);}
.themeEventContainer header ._burgerBtn span:after{ transform:translateY(250%);}
.themeEventContainer header ._burgerBtn:after{
	position:absolute;
	right:0;
	top:0;
	content:"";
	display:block;
	width:100%;
	padding-top:65%;
	opacity:0;
	z-index:2;
}
/********************** _burgerBtn end *************************/
/************************************** header end ***************************************************/

.sectionContainer{
	position: relative;
	z-index: 0;
}

/****************************************** home start ************************************************/
.home{
	position: relative;
}

.home .CT{
	position: relative;
	aspect-ratio:2.375;
	background:#071d2b url(../images/homeBg.jpg) no-repeat center/cover;
	overflow: hidden;
}

/********************* bg start *************************/
.home .svgWrapper{
	height:47.5%;
}
.home .c1{fill:#FFEE00;}
.home .c2{fill:#FF6666;}
.home .c3{fill:#99FFFF;}
.home .c4{fill:#99FF99;}
.home circle{
	filter:drop-shadow(0 0 0.25em #FFF);
	animation-duration: 0.75s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
.home circle:nth-child(odd){
	animation-name: fadeOut;
	animation-timing-function: ease-out;
}
.home circle:nth-child(even){
	animation-name: fadeIn;
	animation-timing-function: ease-in;
}
@keyframes fadeIn{
	from{ opacity:0;}
	to{ opacity:1;}
}
@keyframes fadeOut{
	from{ opacity:1;}
	to{ opacity:0;}
}
/********************* bg end *************************/

/********************* 主標 start *************************/
.home h2{
	position: absolute;
	font-size: 0;
	left:50%;
	top:16%;
	transform: translateX(-50%);
	width:21.26%;
	aspect-ratio:2.69;
	animation:floatZoom 1s ease-in infinite alternate;
}
@keyframes floatZoom{
	from{
		transform:translateX(-50%) scale(0.95);
	}
}
.home h2 span{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	display: block;
}
.home h2 span:nth-child(1){ background-image: url(../images/homeT1.png);}
.home h2 span:nth-child(2){ background-image: url(../images/homeT2.png);}
.home h2 span:nth-child(3){ background-image: url(../images/homeT3.png);}
/********************* 主標 end *************************/

/********************* 門 start *************************/
.door{
	position: absolute;
	left:50%;
	top:36%;
	transform: translateX(-50%);
	width:20.21%;
	background:url(../images/homeDoor.svg) no-repeat center/contain;
}
.door ul{
	list-style: none;
	margin:14.06% auto 0;
	width:69.27%;
}
.door li{
	position:relative;
}
.door img{
	display: block;
	width:100%;
	--rH:50%;
	--rV:39.11%;
	border-top-left-radius: var(--rH) var(--rV);
	border-top-right-radius: var(--rH) var(--rV);
}
.door li span{
	position:absolute;
	color:#FFF;
	font-size: 0.4em;
	right:5%;
	bottom:10%;
	opacity: 0.8;
	text-shadow: 0 1px 0.1em #000;
}
.door h3{
	left:-3.64%;
	top:91.11%;
	width:110.93%;
}
.door h3:after{
	position:absolute;
	content: "";
	display: block;
	left:50%;
	top:0;
	transform: translateX(-50%);
	width:22.53%;
	aspect-ratio:2.74;
	background:url(../images/leaf.svg) no-repeat center/contain;
}
/********************* 門 end *************************/

/********************* scrollHint start *************************/
.scrollHint{
	position:absolute;
	left:50%;
	bottom:1.5%;
	width:3%;
	aspect-ratio:1;
	transform:translateX(-50%);
	cursor:pointer;
	z-index:2;
}
.scrollHint span{
	position:relative;
	display:block;
	width:100%;
	height:100%;
	animation:scrollHint 0.5s ease-in infinite alternate;
}
@keyframes scrollHint{
	to{
		transform:translateY(10px);
	}
}
.scrollHint span:before,
.scrollHint span:after{
	position:absolute;
	bottom:40%;
	content:"";
	display:block;
	width:50%;
	height:2px;
	background:#FFF;
}
.scrollHint span:before{
	right:50%;
	transform-origin:right bottom;
	transform:rotate(42deg);
}
.scrollHint span:after{
	left:50%;
	transform-origin:left bottom;
	transform:rotate(-42deg);
}
/********************* scrollHint end *************************/
/****************************************** home end ************************************************/

/************************************** copenhagen start **********************************************/
.copenhagen{
	padding:1.57% 0;
	background: linear-gradient(to bottom, #0f5054, #2f3b4b);
}
.copenhagen .CT{
	position: relative;
	margin:0 auto;
	max-width: 1200px;
	display: flex;
	align-items: center;
}

/************* map start **************/
.map{
	position: relative;
	order:1;
	width:42%;
	aspect-ratio:1.14;
	background: url(../images/map.svg) no-repeat center/contain;
	z-index: 1;
}
.map h3{
	position: absolute;
	left:0;
	top:0;
	margin:69.84% 0 0 69.84%;
	font-size: 0;
	width:35.31%;
	aspect-ratio:2.69;
	background: url(../images/mapTitle.svg) no-repeat center/contain;
}
.map li{
	position: absolute;
	left:0;
	top:0;
	cursor:pointer;
	--highlight-color:#b2753c;
}
.map li:before{
	position: relative;
	content:"";
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	z-index: 1;
}
.map li:nth-child(1){ width:9.52%; margin:13.88% 0 0 63.49%;}
.map li:nth-child(1):before{ aspect-ratio:0.82; background-image: url(../images/mapObj1.svg);}
.map li:nth-child(1) span{ margin:0 0 -10.41% -18.75%;}
.map li:nth-child(2){ width:14.88%; margin:23.8% 0 0 18.84%;}
.map li:nth-child(2):before{ aspect-ratio:0.87; background-image: url(../images/mapObj2.svg);}
.map li:nth-child(2) span{ margin:105.33% 0 0 -35.33%;}
.map li:nth-child(3){ width:10.31%; margin:30.55% 0 0 44.84%;}
.map li:nth-child(3):before{ aspect-ratio:0.68; background-image: url(../images/mapObj3.svg);}
.map li:nth-child(3) span{ margin:142.3% 0 0 -30.61%;}
.map li:nth-child(4){ width:9.52%; margin:25.19% 0 0 59.12%;}
.map li:nth-child(4):before{ aspect-ratio:0.92; background-image: url(../images/mapObj4.svg);}
.map li:nth-child(4) span{ margin:101% 0 0 -38%;}
.map li:nth-child(5){ width:15.47%; margin:23.01% 0 0 73.21%;}
.map li:nth-child(5):before{ aspect-ratio:1.21; background-image: url(../images/mapObj5.svg);}
.map li:nth-child(5) span{ margin:80% 0 0 15%;}
.map li:nth-child(6){ width:9.92%; margin:51.58% 0 0 31.94%;}
.map li:nth-child(6):before{ aspect-ratio:0.83; background-image: url(../images/mapObj6.svg);}
.map li:nth-child(6) span{ margin:114% 0 0 -33%;}
.map li span{
	position: absolute;
	left:0;
	top:0;
	display: block;
	color:#FFF;
	background: #303c4c;
	font-size: clamp(8px, 1vw, 12px);
	white-space: nowrap;
	text-align: center;
	letter-spacing: 0.1em;
	border-radius:0.5em;
	padding:0.6em 0.8em 0.4em;
	line-height: 1em;
	z-index: 0;
	animation:mapHint 0.8s ease-in infinite alternate;
}
@keyframes mapHint{
	to{
		background:var(--highlight-color);
	}
}
.map li.active{
	cursor:auto;
}
.map li:hover span,
.map li.active span{
	background:var(--highlight-color);
	animation:none;
}
.map li:nth-child(1) span{ top:auto; bottom:100%;}
.map li span *{
	font-weight: normal;
	font-style: normal;
	display: block;
}
.map li span i{
	font-size: 0.6em;
}
/************* map end **************/

/************* detail start **************/
.detail{
	position: relative;
	width:26.66%;
	margin:0 11.66%;
	border:1px solid #FFF;
	background: linear-gradient(to right, #c7976f, #b27439);
	--rH:50%;
	--rV:36.36%;
	color:#f9f2e4;
	border-top-left-radius: var(--rH) var(--rV);
	border-top-right-radius: var(--rH) var(--rV);
	z-index: 1;
}
.detail:before,
.detail:after{
	position: absolute;
	content:"";
	bottom:-2px;
	display: block;
	--w:0.8em;
	border:calc(var(--w) / 2) solid;
	width:var(--w);
	aspect-ratio:1;
	border-top-color:transparent;
	border-right-color:transparent;
}
.detail:before{ left:-2px;}
.detail:after{ right:-2px; transform: scaleX(-1);}
.detail h3{
	position: absolute;
	left:0;
	top:0;
	width:125.62%;
	margin-left:-13.12%;
}
.detail .tabCT{
	display: none;
}
.detail .tabCT.active{
	display: block;
}
.detail .img{
	padding:18.86% 22.01% 0;
}
.detail img{
	display: block;
	width:100%;
	border:0.2em solid;
	--rV:47.64%;
	border-top-left-radius: var(--rH) var(--rV);
	border-top-right-radius: var(--rH) var(--rV);
}
.detail .txt{
	font-size: clamp(8px, 1vw, 13px);
	border-top:1px solid;
	padding:0 1.5em 2em;
}
.detail h4{
	font-size: 1.5em;
	text-align: center;
	padding:0.75em 0 0.5em;
	line-height: 1em;
}
.detail h4 *{
	display: block;
}
.detail h4 strong{
	letter-spacing: 0.2em;
}
.detail h4 i{
	margin-top: 0.1em;
	font-size: 0.6em;
	font-style: normal;
	font-weight: normal;
	letter-spacing: 0.1em;
}
.detail p{
	position: relative;
	height:8em;
	border-top:1px solid;
	margin:0;
	padding-top:0.9em;
}
.detail p:before,
.detail p:after{
	position: absolute;
	content:"";
	display: block;
	top:0;
	transform: translateY(-50%);
	width:0.55em;
	aspect-ratio:1;
	background: currentColor;
	border-radius: 50%;
}
.detail p:before{ left:0;}
.detail p:after{ right:0;}
.detail p span{
	color:#5a2827;
	line-height: 1.6em;
}
.detail p i{
	position: absolute;
	left:0;
	top:100%;
	font-size: 0.7em;
	font-style: normal;
}
/************* detail end **************/

/************* wave start **************/
.copenhagen .decoObj{
	position: absolute;
	left:0;
	top:0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url(../images/wave2.svg);
	width:4.5%;
	aspect-ratio:4.5;
	animation:floatWave ease-in-out infinite alternate;
}
.copenhagen .wide{
	background-image: url(../images/wave1.svg);
	width:6%;
	aspect-ratio:6;
}
@keyframes floatWave{
	to{
		transform: translateX(50%);
	}
}
.copenhagen .o1{ margin:12.66% 0 0 -17.08%; animation-duration: 2s;}
.copenhagen .o2{ margin:31.66% 0 0 -7.25%; animation-duration: 3s;}
.copenhagen .o3{ margin:22% 0 0 1.41%; animation-duration: 2.5s;}
.copenhagen .o4{ margin:24.16% 0 0 42.08%; animation-duration: 3.5s;}
.copenhagen .o5{ margin:35% 0 0 46.16%; animation-duration: 2.8s;}
.copenhagen .o6{ margin:21.83% 0 0 94.58%; animation-duration: 3.2s;}
.copenhagen .o7{ margin:30.83% 0 0 105%; animation-duration: 1.8s;}
.copenhagen .o8{ margin:13.83% 0 0 113.33%; animation-duration: 2.2s;}
/************* wave end **************/
/************************************** copenhagen end **********************************************/

/************************************** chic start **********************************************/
.chic{
	padding:1.57% 0;
	background: linear-gradient(to bottom, #b27439, #c7976f);
}
.chic .CT{
	position: relative;
	margin:0 auto;
	max-width: 1200px;
	display: flex;
	align-items: center;
}

/****************** rule start ***********************/
.rule{
	position: relative;
	width:26.66%;
	margin:0 11.66%;
	padding:0 0.4em 0.4em;
	background: #ebdcbf;
	color:#b27439;
	font-size: clamp(8px, 1.16vw, 14px);
	border-radius:0.6em;
	border-top-left-radius:0;
	border-top-right-radius:0;
	z-index: 1;
}
.rule h3{
	position: absolute;
	left:50%;
	top:-2px;
	font-size: 0;
	width:116.25%;
	aspect-ratio:5.31;
	transform: translateX(-50%);
	background: url(../images/chicRuleTitle.svg) no-repeat center/contain;
}
.rule .inner{
	padding:37% 0.7em 2em;
	border:1px solid;
	border-radius:0.35em;
	border-top-left-radius:0;
	border-top-right-radius:0;
}
.rule h4{
	position: relative;
	text-align: center;
	font-size: 1.5em;
	font-weight: 900;
	line-height: 1.7em;
	letter-spacing: 0.1em;
	padding:0.5em 0;
	border:0.15em solid;
	border-left:none;
	border-right:none;
}
.rule h4:before{
	position: absolute;
	content: "";
	display: block;
	width:13.79%;
	aspect-ratio:1.81;
	background: url(../images/chicRuleDeco.svg) no-repeat center/contain;
	left:50%;
	top:-0.075em;
	transform: translate(-50%, -100%);
}
.rule h4 strong{
	color:#8d3118;
	font-weight: inherit;
}
.rule .txt{
	width:90%;
	margin:1.5em auto 0;
}
.rule .txt p{
	color:#0d5154;
	line-height: 1.6em;
	margin:0;
}
.rule .txt *+p{
	margin-top:0.8em;
}
/****************** rule end ***********************/

/****************** game start ***********************/
.game{
	position: relative;
	margin-left:2.66%;
	width:39%;
	z-index: 1;
}

.game ul{
	position: relative;
	aspect-ratio:1.45;
	background: url(../images/gameBg.svg) no-repeat center/contain;
}
.game li{
	position: absolute;
	left:0;
	top:0;
	font-size: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	animation:flashObj 0.75s ease-in infinite alternate both;
}
@keyframes flashObj{
	from{ filter:brightness(0.5);}
}
.game.freeze li{
	animation:none;
}
.game li:nth-child(1){ margin:12.5% 0 0 8%; width:23.5%; aspect-ratio:1.25; background-image: url(../images/gameObj1.svg); animation-delay:0.25s;}
.game li:nth-child(2){ margin:36% 0 0 13%; width:30.34%; aspect-ratio:1.04; background-image: url(../images/gameObj2.svg); animation-delay:0.65s;}
.game li:nth-child(3){ margin:6% 0 0 57%; width:12.39%; aspect-ratio:0.86; background-image: url(../images/gameObj3.svg); animation-delay:0.5s;}
.game li:nth-child(4){ margin:4% 0 0 76%; width:14.95%; aspect-ratio:0.81; background-image: url(../images/gameObj4.svg); animation-delay:0.75s;}
.game li:nth-child(5){ margin:25% 0 0 82%; width:10.68%; aspect-ratio:0.75; background-image: url(../images/gameObj5.svg); animation-delay:0.1s;}
.game li:nth-child(6){ margin:36% 0 0 56.5%; width:13.67%; aspect-ratio:0.52; background-image: url(../images/gameObj6.svg); animation-delay:0.35s;}
.game li:nth-child(7){ margin:47% 0 0 77.5%; width:13.24%; aspect-ratio:0.79; background-image: url(../images/gameObj7.svg); animation-delay:0.2s;}

/****** CTA start *******/
.game .cta{
	margin-top:2.13%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.game .cta .txt{
	width:44.87%;
	aspect-ratio:5.25;
	background: url(../images/gameTxt.svg) no-repeat center/contain;
	font-size: 0;
}
.game .cta button{
	width:51.7%;
	aspect-ratio:2.37;
	background: url(../images/gameBtn.svg) no-repeat center/contain;
	font-size: 0;
	border:none;
	padding:0;
	cursor: pointer;
	transition: transform 0.2s;
	animation:cta 0.5s ease-in infinite alternate;
}
@keyframes cta{
	to{
		transform: scale(1.05);
		filter:brightness(1.35);
	}
}
.game.freeze .cta button{
	animation:none;
}
.game .cta button:hover{
	filter:brightness(1.35);
	transform:scale(1.05);
}
/****** CTA end *******/

/***** overlay start ******/
.overlay.xmas {
	font-size: 1.2em;
	font-family:'Noto Sans TC', Tahoma, 微軟正黑體, sans-serif;
	background: rgba(255, 255, 255, 0.85);
}
.overlay.xmas .overlayCT {
	max-width: 300px;
	height: auto;
	color:#0d5154;
	border:0.2em solid;
	background: rgba(240, 228, 201, 0.85);
	border-radius: 0.5em;
	padding: 0 0 1.5em;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow:0 0.25em 0.5em 0.25em rgba(0, 0, 0, 0.1);
}

.overlay.xmas img{
	display: block;
	width:100%;
	aspect-ratio:1;
}
.overlay.xmas span{
	font-weight: 900;
}
.overlay.xmas a{
	--arrow-color:#903321;
	font-size: 0.9em;
	font-weight: 500;
	margin-top:0.75em;
	background:#b17336;
	color:#FFF;
	line-height: 1em;
	padding:0.5em 0.8em 0.48em;
	border-radius:0.25em;
	display: flex;
	align-items: center;
	transition: background 0.2s;
}
.overlay.xmas a:hover{
	background:var(--arrow-color);
}
.overlay.xmas a:after{
	content:"";
	display: block;
	border:0.6em solid transparent;
	border-right:none;
	border-top-width:0.45em;
	border-bottom-width:0.45em;
	border-left-color:var(--arrow-color);
	margin-left:0.6em;
	animation:arrow 0.5s ease-in infinite alternate;
}
.overlay.xmas a:hover:after{
	border-left-color:#FFF;
}
@keyframes arrow{
	to{
		transform:translateX(50%);
	}
}

.overlay.xmas .closeBtn {
	right: 0.75em;
	top:0.75em;
	bottom: auto;
	width: 24px;
	height: 24px;
	transition: transform 0.2s;
}
.overlay.xmas .closeBtn:hover {
	transform:rotate(-90deg);
}
.overlay.xmas .closeBtn:before,
.overlay.xmas .closeBtn:after {
	top: 12px;
	width: 26px;
	height:1px;
	background: #000;
}
/***** overlay end ******/
/****************** game end ***********************/

/***************** star end ******************/
.chic .decoObj{
	position: absolute;
	left:0;
	top:0;
	background: url(../images/star.png) no-repeat center/contain;
	aspect-ratio:1;
	animation:rotate linear infinite;
}
@keyframes rotate{
	to{
		transform: rotate(-360deg);
	}
}
.chic .o1{ width:2.2%; margin:7% 0 0 -1%; animation-duration: 10s;}
.chic .o2{ width:1.8%; margin:17% 0 0 -10%; animation-duration: 12s;}
.chic .o3{ width:3%; margin:14% 0 0 2%; animation-duration: 5s;}
.chic .o4{ width:1.5%; margin:26% 0 0 -4%; animation-duration: 6s;}
.chic .o5{ width:2.2%; margin:10% 0 0 47%; animation-duration: 18s;}
.chic .o6{ width:1.8%; margin:23% 0 0 43%; animation-duration: 3s;}
.chic .o7{ width:5%; margin:26% 0 0 45%; animation-duration: 15s;}
.chic .o8{ width:1.8%; margin:12% 0 0 75%; animation-duration: 10s;}
.chic .o9{ width:3%; margin:16% 0 0 99%; animation-duration: 4s;}
.chic .o10{ width:2.2%; margin:24% 0 0 111%; animation-duration: 13s;}
/***************** star end ******************/
/************************************** chic end **********************************************/

/************************************** product start **********************************************/
.product{
	padding:2.5% 0 4%;
	background: linear-gradient(to bottom, #0f5054, #2f3b4b);
}
.product .CT{
	position: relative;
	margin:0 auto;
	max-width: 1200px;
	color:#FFF;
}

.product .CT h3{
	text-align: center;
	white-space: nowrap;
	font-size: 1.2em;
	letter-spacing: 0.25em;
	display: flex;
	justify-content: center;
	align-items: center;
}
.product .CT h3:before,
.product .CT h3:after{
	content:"";
	display: block;
	flex-shrink: 0;
	width:32.5%;
	aspect-ratio:6.5;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.product .CT h3:before{
	margin-right:1.2em;
	background-image: url(../images/product_lightL.svg);
}
.product .CT h3:after{
	margin-left:1em;
	background-image: url(../images/product_lightR.svg);
}

.product a,
.product a:hover{
	color:currentColor;
}
.product a{
	transition:color 0.2s;
}
.product a .price{
	height:auto;
}
.product a .price del{
	color:cadetblue;
	display: inline;
}
.product a .price strong{
	font-size: 1em;
	color:aquamarine;
	margin-left:0.5em;
}
/************************************** product end **********************************************/

/************************************** store start **********************************************/
.store{
	font-size: 0.8em;
	background: linear-gradient(to top, #b27439, #c7976f);
	overflow: hidden;
}
.store .CT{
	position: relative;
	margin:0 auto;
	padding:4em 0;
	max-width: 1200px;
	display:flex;
}
.store h3{
	position: absolute;
	left:0;
	top:0;
	width:23.33%;
	margin:3.4em 0 0 5%;
	aspect-ratio:4;
	text-indent: -9999px;
	overflow: hidden;
	background-image: url(../images/titleStore.svg);
}

/********* tab start ********/
.store .tab{
	position: relative;
	color:#f8e4c9;
	width:23.33%;
	--bdr-width:0.1em;
	border-top:var(--bdr-width) solid;
	margin:10% 0 0 5%;
	font-size: 1.16em;
	z-index: 1;
}
.store .tab li{
	border-bottom:var(--bdr-width) solid;
	line-height: 1em;
	padding:1.3em 0 1.3em 1em;
	letter-spacing: 0.085em;
	cursor: pointer;
}
.store .tab li:hover,
.store .tab li.active{
	font-weight: 900;
	color:#FFF;
}
.store .tab li span{
	position: relative;
	display: inline-block;
}
.store .tab li span:before{
	position: absolute;
	content: "";
	display: block;
	left:calc(100% + 0.4em);
	top:50%;
	width:1.2em;
	aspect-ratio:1;
	transition: all 0.2s;
	transform: translateY(-50%) scale(0);
	background: url(../images/star.svg) no-repeat center/contain;
}
.store .tab li.active span:before{
	transform: translateY(-50%) scale(1);
}
/********* tab end ********/

/********* tabCT start ********/
.store .tabCTWrapper{
	position: relative;
	--highlight-color:#8d3118;
	color:#FFF;
	width:60%;
	border-left:0.1em solid;
	margin-left:3.5%;
	padding-left:3.5%;
	z-index: 1;
}
.store .tabCT{
	font-size: 0.83em;
	display:none;
}
.store .tabCT.active{
	display:block;
}

.store .tabCT h5,
.store .tabCT h6,
.store .tabCT strong{
	font-size:1.2em;
	font-weight: 900;
}
.store .tabCT h6{
	margin-top:0.5em;
	transform: translateX(-0.4em);
}
.store .tabCT strong{
	color:var(--highlight-color);
}

.store .tabCT > ol{
	list-style: decimal;
	padding-left:1.5em;
}
.store .tabCT > ol > li+li{
	margin-top:1.5em;
}
.store .tabCT p{
	line-height: 1.8em;
	margin:0.25em 0 0;
}
.store .tabCT > ol > li ul{
	list-style: disc;
	margin-top:0.5em;
	padding-left:1.5em;
	line-height: 1.8em;
}
.store .tabCT > ol > li ul li+li{
	margin-top:0.25em;
}

.store .tabCT .cta{
	font-size: 0.9em;
	margin:2em 0 0 0.5em;
	line-height: 1.8em;
}
.store .tabCT .cta a{
	font-size: 1.1em;
	font-weight: 700;
	display:inline-flex;
	align-items: center;
	margin-left: 0.2em;
	transition: color 0.2s;
}
.store .tabCT .cta a:hover{
	color:var(--highlight-color);
}
.store .tabCT .cta a:before{
	content:"";
	display: block;
	width:1.5em;
	aspect-ratio:1;
	background: url(../images/phone.svg) no-repeat center/contain;
}
.store .tabCT .cta a span{
	display: inline-block;
	border-bottom:0.15em solid;
	margin-left:0.4em;
}
.store .tabCT .cta ol{
	list-style: decimal;
	padding-left:1.2em;
}
/********* tabCT end ********/

/********* 裝飾物件 start********/
.store .decoObj{
	position: absolute;
	left:0;
}
.store .o1,
.store .o2{
	top:0;
	width:4.16%;
}
.store .o1{
	margin-left:91.5%;
}
.store .o2{
	margin-left:96%;
}
.store .o1:before,
.store .o2:before{
	content:"";
	display: block;
	transform-origin: center top;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	animation:moveLight2 2s ease-in-out alternate infinite;
}
.store .o1:before{
	aspect-ratio:0.25;
	background-image: url(../images/vlight1.png);
}
.store .o2:before{
	aspect-ratio:0.17;
	animation-delay:0.75s;
	background-image: url(../images/vlight2.png);
}
@keyframes moveLight2{
	from{
		transform:rotate(2deg);
	}
	to{
		transform:rotate(-2deg);
	}
}
.store .o3{
	bottom:0;
	width:17.08%;
	margin-left:86.91%;
	aspect-ratio:0.75;
	background: url(../images/gift.png) no-repeat center/contain;
}
/********* 裝飾物件 end********/
/************************************** store end **********************************************/


@media screen and (min-width:1025px){
	
	/************************************** header start ***************************************************/
	/********************** nav start *************************/
	.themeEventContainer header:hover nav{
		width:12.35em;
	}
	/********************** nav end *************************/
	/********************** _burgerBtn start *************************/
	.themeEventContainer header:hover ._burgerBtn{
		opacity:0;
	}
	/********************** _burgerBtn end *************************/
	/************************************** header end ***************************************************/
	
}


@media screen and (max-width:1024px){
	
	/************************************** header start ***************************************************/	
	/********************** nav start *************************/
	.themeEventContainer header nav{
		font-size:0.95em;
	}
	.themeEventContainer header.open nav{
		width:12em;
		height:calc(100vh - 47px);
	}
	/********************** nav end *************************/
	/********************** _burgerBtn start *************************/
	.themeEventContainer header ._burgerBtn{
		width:1.45em;
		height:1.45em;
		cursor:pointer;
	}
	.themeEventContainer header ._burgerBtn span,
	.themeEventContainer header ._burgerBtn span:before,
	.themeEventContainer header ._burgerBtn span:after{
		height:2px;
	}
	.themeEventContainer header.open ._burgerBtn span{
		background:none;
	}
	.themeEventContainer header ._burgerBtn span:before{ transform:translateY(-300%);}
	.themeEventContainer header ._burgerBtn span:after{ transform:translateY(200%);}
	.themeEventContainer header.open ._burgerBtn span:before,
	.themeEventContainer header.open ._burgerBtn span:after{
		background:currentColor;
	}
	.themeEventContainer header.open ._burgerBtn span:before{
		transform:translateY(-50%) rotate(-45deg);
	}
	.themeEventContainer header.open ._burgerBtn span:after{
		transform:translateY(-50%) rotate(45deg);
	}
	/********************** _burgerBtn end *************************/
	/************************************** header end ***************************************************/
	
}


@media screen and (max-width:1023px){
	
	/************************************** header start ***************************************************/	
	/********************** nav start *************************/
	.themeEventContainer header{
		top:47px;
	}
	/********************** nav end *************************/
	/************************************** header end ***************************************************/
	
	/****************************************** home start ************************************************/
	.home .CT{
		aspect-ratio:0.62;
	}

	/********************* 主標 start *************************/
	.home h2{
		top:17%;
		width:85%;
	}
	/********************* 主標 end *************************/

	/********************* 門 start *************************/
	.door{
		top:38%;
		width:75%;
	}
	.door li span{
		font-size: 0.6em;
	}
	/********************* 門 end *************************/
	
	/********************* scrollHint start *************************/
	.scrollHint{
		width:10%;
	}
	/********************* scrollHint end *************************/
	/****************************************** home end ************************************************/
	
	/************************************** copenhagen start **********************************************/
	.copenhagen{
		padding:10% 0;
	}
	.copenhagen .CT{
		display: block;
	}

	/************* map start **************/
	.map{
		width:auto;
	}
	.map h3{
		width:25%;
	}
	.map li span{
		font-size: 2.5vw;
	}
	/************* map end **************/

	/************* detail start **************/
	.detail{
		width:90%;
		margin:10% auto 0;
	}
	.detail .txt{
		font-size: 3.2vw;
	}
	/************* detail end **************/

	/************* wave start **************/
	.copenhagen .decoObj{
		display: none;
	}
	/************* wave end **************/
	/************************************** copenhagen end **********************************************/
	
	/************************************** chic start **********************************************/
	.chic{
		padding:10% 0;
	}
	.chic .CT{
		display: block;
	}

	/****************** rule start ***********************/
	.rule{
		width:85%;
		margin:0 auto;
		font-size: 3.5vw;
	}
	/****************** rule end ***********************/

	/****************** game start ***********************/
	.game{
		width:90%;
		margin:10% auto 0;
	}
	/****************** game end ***********************/

	/***************** star end ******************/
	.chic .decoObj{
		display: none;
	}
	/***************** star end ******************/
	/************************************** chic end **********************************************/
	
	/************************************** product start **********************************************/
	.product{
		padding:10% 0;
	}
	.product .CT h3{
		font-size: 1.5em;
	}
	.product .CT h3:before,
	.product .CT h3:after{
		width:50%;
	}
	.product .CT h3:before{
		margin-right:0.7em;
	}
	.product .CT h3:after{
		margin-left:0.4em;
	}
	/************************************** product end **********************************************/
	
	/************************************** store start **********************************************/
	.store{
		font-size: 1.2em;
	}
	.store .CT{
		width:90%;
		padding:10% 0 35%;
		display:block;
	}
	.store h3{
		position: static;
		margin:0;
		width:12em;
	}

	/********* tab start ********/
	.store .tab{
		border-top:none;
		width:auto;
		margin-left:0;
		display: flex;
		flex-wrap: wrap;
	}
	.store .tab li{
		border-bottom:none;
		padding:0;
		width:50%;
		letter-spacing: normal;
	}
	.store .tab li:nth-child(n+3){
		margin-top:5%;
	}
	/********* tab end ********/

	/********* tabCT start ********/
	.store .tabCTWrapper{
		width:auto;
		border-left:none;
		margin-left:0;
		padding-left:0;
		border-top:0.15em solid;
		margin-top:8%;
		padding-top:8%;
	}
	/********* tabCT end ********/

	/********* 裝飾物件 start********/
	.store .o1,
	.store .o2{
		margin-top:-6%;
		width:10%;
	}
	.store .o1{
		margin-left:80%;
	}
	.store .o2{
		margin-left:90%;
	}
	.store .o3{
		width:30%;
		margin-left:70%;
	}
	/********* 裝飾物件 end********/
	/************************************** store end **********************************************/

}