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

.themeEventContainer{
	font-family: 'Noto Sans TC', sans-serif;
	font-size:clamp(10px, 1.33vw, 16px);
	overflow: hidden;
	margin-top:5%;
}

.themeEventContainer .CTWrapper{
	max-width:1200px;
	margin:0 auto;
}

.themeEventContainer .CT{
	width:88%;
	margin:0 auto;
	padding:3.5% 5%;
	color:#FFF;
	background: #000;
}

.themeEventContainer .CT h2{
	width:22%;
	aspect-ratio:5.25;
	margin:0 auto;
	font-size: 0;
	background: url(../images/logo_moooi.svg) no-repeat center/100%;
}

.itemWrapper{
	margin:5% 0 0;
}

._slickPN{
	position: absolute;
	top:25%;
	translate:0 -50%;
	width:5%;
	aspect-ratio:1;
	font-size: 0;
	cursor:pointer;
	transition: scale 0.2s;
	background:url(../images/arrow.svg) no-repeat center/100%;
	z-index: 1;
}
._slickPN.prev{
	left:0;
	scale:-1 1;
}
._slickPN.next{
	right:0;
}
._slickPN.prev:hover{
	scale:-1.2 1.2;
}
._slickPN.next:hover{
	scale:1.2;
}

.item a{
	display: block;
	text-align: center;
}

.item h3{
	font-family:'BhuTuka Expanded One';
	font-size: 2.6em;
	font-weight: normal;
}

.item p{
	font-size: 1.15em;
	font-weight: 600;
	margin:1em 0 0;
}
.item[data-n="1"] p{color:#ae8a64;}
.item[data-n="2"] p{color:#52dd6c;}
.item[data-n="3"] p{color:#e3a662;}
.item[data-n="4"] p{color:#c66e83;}
.item[data-n="5"] p{color:#bb69f9;}
.item[data-n="6"] p{color:#f2fb65;}
.item[data-n="7"] p{color:#72d4ed;}
.item[data-n="8"] p{color:#d29f68;}

.item a > img{
	display: block;
	width:75%;
	margin:2em auto 0;
	transition: scale 0.5s;
}
.item a:hover{
	color:currentColor;
}
.item a:hover > img {
	scale: 1.05;
}

.item a > em{
	font-style: normal;
	display: block;
	margin-top:1em;
}

.sceneImg{
	margin-top:2em;
}
.sceneImg img,
.sceneImg video{
	display: block;
	width:100%;
}
.sceneImg video{
	clip-path: fill-box;
	border-radius: 1px;
}

/******************************* mouseLight start *******************************************/
.mouseLight{
	position: fixed;
	width:clamp(60px, 10vw, 120px);
	aspect-ratio:1;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1s;
	z-index: 1;
}
.mouseLight.show{
	opacity: 1;
}
.mouseLight:before{
	content:"";
	display: block;
	height:100%;
	transform: translate(-50%, -50%);
	background: radial-gradient(closest-side, rgba(255, 251, 187, 0.7), rgba(255, 251, 187, 0.5) 40%, rgba(255, 251, 187, 0));
}
/******************************* mouseLight end *******************************************/

.themeEventContainer+.mainContainer{
	margin-top:5%;
}


@media screen and (max-width:1023px){
	
	.themeEventContainer{
		font-size:clamp(8px, 4vw, 32px);
	}

	.themeEventContainer .CT{
		width:auto;
		padding:10% 5% 12%;
	}

	.themeEventContainer .CT h2{
		width:35%;
	}

	.itemWrapper{
		margin-top:10%;
	}

	._slickPN{
		top:30%;
	}

	.item h3{
		font-size: 1.25em;
	}

	.item p{
		font-size: 0.9em;
	}

	.item a > img{
		width:100%;
	}

	.item a > em{
		font-size: 0.85em;
	}

	.themeEventContainer+.mainContainer{
		margin-top:10%;
	}
	
}