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

/***************************** themeIntro start *************************************/
.themeIntro{
	color:#706d6d;
	font-family:'Noto Sans HK';
	font-size:clamp(10px, 1.5vw, 18px);
	font-weight: 300;
	display:flex;
	flex-direction:column;
	align-items:center;
}

.themeIntro img{
	display:block;
	width:60%;
}

.themeIntro p{
	width:60%;
	border:0.15em solid #D7E9F7;
	border-radius:1em;
	margin:0;
	padding:1.2em;
	text-align:center;
	line-height:1.8em;
}

/***************************** themeIntro end *************************************/

.themeEventContainer{
	--bg:#f8f3e0;
	--theme-color:#886f49;
	position: relative;
	color:#5e3114;
	font-family:'Noto Sans HK';
	font-size:clamp(10px, 1.33vw, 16px);
	aspect-ratio:2.18;
	overflow: hidden;
}

/***************************** 共用 start *************************************/
.themeEventContainer > *{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

.themeEventContainer button{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width:100%;
	height:100%;
	border:none;
	border-radius:2em;
	padding:0;
	cursor:pointer;
	color:#FFF;
	background:var(--theme-color);
	font-size: 1.05em;
	font-weight:500;
	font-family:inherit;
	animation: btnHint 0.5s ease-in infinite alternate;
}
@keyframes btnHint{
	to{
		transform: scale(1.05);
	}
}
.themeEventContainer button:hover{
	animation:none;
	transform:scale(1.05);
}
/***************************** 共用 end *************************************/

/***************************** home start *************************************/
.home{
	display: flex;
	flex-direction: column;
	align-items: center;
	background: url(../images/homeBg.svg) no-repeat center/100%;
}

.home h3{
	font-size: 1.25em;
	font-weight:300;
	margin-top:3%;
}
.home h2{
	color:inherit;
	font-family:'Noto Serif TC';
	font-size: 2.4em;
	font-weight:600;
	margin-top:24%;
}
.home p{
	font-size:0.95em;
	margin:0.5% 0 0;
	text-align:center;
}
.home .btnWrapper{
	width:20%;
	height:2em;
	margin-top:1.5%;
}

.home .obj{
	position: absolute;
	left:0;
	top:0;
}
.home .obj:before{
	content:"";
	display: block;
	height:100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	animation:homeObj 1.2s ease-in-out infinite alternate;
}
@keyframes homeObj{
	to{
		transform: translateY(5%);
	}
}
.home .o1{width:10%; aspect-ratio:0.55; margin: 15% 0 0 8%;}
.home .o2{width:4%; aspect-ratio:0.53; margin: 12% 0 0 20%;}
.home .o3{width:4%; aspect-ratio:0.24; margin: 24% 0 0 23%;}
.home .o4{width:7%; aspect-ratio:0.42; margin: 22% 0 0 70%;}
.home .o5{width:10%; aspect-ratio:1.32; margin: 13% 0 0 76%;}
.home .o6{width:12%; aspect-ratio:0.75; margin: 24% 0 0 81%;}
.home .o1:before{ background-image:url(../images/homeP1.png); animation-delay:0s;}
.home .o2:before{ background-image:url(../images/homeP2.png); animation-delay:0.2s;}
.home .o3:before{ background-image:url(../images/homeP3.png); animation-delay:0.4s;}
.home .o4:before{ background-image:url(../images/homeP4.png); animation-delay:0.6s;}
.home .o5:before{ background-image:url(../images/homeP5.png); animation-delay:0.8s;}
.home .o6:before{ background-image:url(../images/homeP6.png); animation-delay:1s;}
/***************************** home end *************************************/

/***************************** quiz start *************************************/
.quiz{
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: scale(0);
	transition: transform 0.5s;
	background: url(../images/quizBg.svg) no-repeat center/100%;
}
.quiz.active{
	transform:none;
}

/************ QWrapper start *************/
.QWrapper{
	width:69.16%;
	margin-top:7.5%;
}

.Q{
	display: none;
	justify-content: space-between;
	align-items: flex-start;
}
.Q.active{
	display: flex;
}

.Q img,
.Q .txt{
	width:43.13%;
}

.Q img{
	display: block;
}

.Q .txt p{
	margin:0;
	aspect-ratio:2.79;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1.6em;
	font-size: 1.1em;
	font-weight:300;
	text-align: center;
	border:0.12em solid var(--theme-color);
	border-radius:2em;
	background:var(--bg);
}

.Q .txt .btnWrapper{
	aspect-ratio:9.42;
	margin-top:0.85em;
}
.Q .txt p+.btnWrapper{
	margin-top:1.85em;
}
.Q .txt button{
	font-weight: 800;
	line-height: 1em;
	letter-spacing: 0.15em;
	padding-bottom:0.15em;
	color:#faf4e9;
	animation: none;
	transition: transform 0.2s;
}
.Q .txt button:hover{
	color:#FFF;
}
/************ QWrapper end *************/

/************ QProgress start *************/
.QProgress{
	position: relative;
	width:20%;
	margin-top:3.75%;
	color:var(--theme-color);
	border-top:1px solid;
}
.QProgress li{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top:0;
	width:10px;
	aspect-ratio:1;
	border:1px solid;
	border-radius:50%;
	background: var(--bg);
	overflow:hidden;
	translate:-50% -50%;
}
.QProgress li:nth-child(1){ left:0%;}
.QProgress li:nth-child(2){ left:33.33%;}
.QProgress li:nth-child(3){ left:66.66%;}
.QProgress li:nth-child(4){ left:100%;}
.QProgress li:before{
	content: "";
	display: block;
	width:100%;
	aspect-ratio:1;
	background:var(--theme-color);
	border-radius:inherit;
	scale:0;
	transition: scale 0.2s;
}
.QProgress li.active:before{
	scale:1;
}
/************ QProgress end *************/
/***************************** quiz end *************************************/

/***************************** result start *************************************/
.result{
	transform: scale(0);
	transition: transform 0.5s;
	display:flex;
	justify-content:center;
	align-items:center;
	background: url(../images/quizBg.svg) no-repeat center/100%;
}
.result.active{
	transform:none;
}

/************ prodWrapper start *************/
.prodWrapper{
	width:80%;
}

.prod{
	position: relative;
	padding:2% 5% 5%;
	display: none;
	flex-direction:column;
	align-items: center;
	background:var(--bg);
	border:0.12em solid var(--theme-color);
	border-radius:2em;
}
.prod.active{
	display: flex;
}

.prod h4{
	font-size:1.1em;
	font-weight:400;
}
.prod h5{
	font-size:1.8em;
	font-weight:500;
	margin-top:0.5%;
}

/****** item start ******/
.prod .item{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	width:100%;
}
.prod .item li{
	width:22%;
}
.prod .item a{
	display:block;
	color:inherit;
	font-size:0.9em;
	text-align:center;
	transition:color 0.2s;
}
.prod .item a:hover{
	color:var(--theme-color);
}
.prod .item img{
	display:block;
	width:100%;
	transition:scale 0.5s;
}
.prod .item a:hover img{
	scale:1.1;
}
.prod .item em{
	font-style:normal;
}
/****** item end ******/

.prod .btnWrapper{
	position:absolute;
	left:50%;
	top:100%;
	translate:-50% -50%;
	width:25%;
	height:2.5em;
}
/************ prodWrapper end *************/
/***************************** result end *************************************/


@media screen and (max-width:1023px){
	
	/***************************** themeIntro start *************************************/
	.themeIntro{
		font-size:clamp(10px, 3.68vw, 14px);
	}

	.themeIntro img{
		width:100%;
	}

	.themeIntro p{
		width:95%;
	}
	/***************************** themeIntro end *************************************/
	
	.mainContainer > section.themeEventContainer{
		margin-top:10%;
		font-size:clamp(10px, 4.44vw, 32px);
		aspect-ratio:0.62;
	}
	
	/***************************** home start *************************************/
	.home{
		background-image: url(../images/homeBg_m.svg);
	}

	.home h3{
		font-size:1.1em;
		margin-top: 8%;
	}
	.home h2{
		font-size:1.7em;
		margin-top: 88%;
	}
	.home p{
		margin-top:5%;
	}
	.home .btnWrapper{
		width: 80%;
		margin-top:8%;
	}

	.home .o1{width:15%; margin: 29% 0 0 8%;}
	.home .o2{width:8%; margin: 81% 0 0 10%;}
	.home .o3{width:5%; margin: 21% 0 0 30%;}
	.home .o4{width:12%; margin: 18% 0 0 79%;}
	.home .o5{width:16%; margin: 87% 0 0 47%;}
	.home .o6{width:18%; margin: 73% 0 0 71%;}
	/***************************** home end *************************************/
	
	/***************************** quiz start *************************************/
	.quiz{
		background-image: url(../images/quizBg_m.svg);
	}

	/************ QWrapper start *************/
	.QWrapper{
		width:100%;
		margin-top:11%;
	}

	.Q{
		flex-direction: column;
		align-items: center;
	}
	
	.Q img{
		width:60%;
	}
	
	.Q .txt{
		width:80%;
		margin-top:5%;
	}
	.Q .txt p{
		aspect-ratio:4;
		font-size: 0.9em;
	}

	.Q .txt .btnWrapper{
		margin-top:0.5em;
	}
	.Q .txt p+.btnWrapper{
		margin-top:1em;
	}
	.Q .txt button{
		font-size: 0.85em;
	}
	/************ QWrapper end *************/

	/************ QProgress start *************/
	.QProgress{
		width:75%;
		margin-top:8%;
	}
	/************ QProgress end *************/
	/***************************** quiz end *************************************/
	
	/***************************** result start *************************************/
	.result{
		background-image: url(../images/quizBg_m.svg);
	}
	
	/************ prodWrapper start *************/
	.prodWrapper{
		width:85%;
	}

	.prod{
		padding: 5% 5% 15%;
		font-size:0.75em;
	}

	.prod h5{
		font-size:1.5em;
	}
	
	/****** item start ******/
	.prod .item{
		flex-wrap:wrap;
	}
	.prod .item li{
		width:48%;
	}
	/****** item end ******/

	.prod .btnWrapper{
		width:50%;
	}
	/************ prodWrapper end *************/
	/***************************** result end *************************************/
	
}