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

.kvContainer,
.midBlock,
.themeMain{
	display: none;
}

.themeEventContainer{
	--theme-color1:#434588;
	--theme-color2:#266686;
	--theme-color3:#f17a33;
	--theme-color4:#c92f38;
	--pd:4%;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: clamp(10px, 1.16vw, 14px);
	font-weight: 400;
	max-width: 1920px;
	margin:0 auto;
	color:#FFF;
	overflow: hidden;
}

/*********************************** 共用 start ***********************************************/
.home ~ * .CT{
	width:90%;
	max-width:800px;
	margin:0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

/**************** img start *********************/
.home ~ * .CT > .img{
	width:40%;
}
.home ~ *:is(.pg1, .pg3) .CT > .img{
	order:1;
}
.home ~ * .CT > .img img{
	width:100%;
	display: block;
}
/**************** img end *********************/

/**************** txt start *********************/
.home ~ * .CT > .txt{
	width:52.5%;
}
.home ~ * .CT > .txt p{
	margin:0;
	line-height: 1.7em;
	text-align: justify;
}
.home ~ * .CT > .txt *+p{
	margin-top:1.5em;
}
/**************** txt end *********************/

/**************** 商品 start *********************/
.home ~ * .CT ul{
	width:100%;
	margin-top:5%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	order:2;
}

.home ~ * .CT li{
	width:24.5%;
}

.home ~ * .CT li a{
	display: block;
	text-align: center;
}

.home ~ * .CT li em{
	display: block;
	margin-bottom:0.25em;
	font-size: 1.1em;
	font-weight: 500;
}

.home ~ * .CT li .img{
	position: relative;
}
.home ~ * .CT li .img:before{
	position: absolute;
	left:50%;
	bottom:0;
	translate:-50%;
	content:"";
	display: block;
	width:70%;
	aspect-ratio:1.3;
	background: #FFF;
	border-radius:50%;
	z-index: 0;
}
.home ~ * .CT li img{
	position: relative;
	display: block;
	width:100%;
	transition: scale 0.5s;
	z-index: 1;
}
.home ~ * .CT li a:hover{
	color:inherit;
}
.home ~ * .CT li a:hover img{
	scale:1.1;
}

.home ~ * .CT li .txt{
	margin-top:1em;
}
/**************** 商品 end *********************/

.sign{
	aspect-ratio:3.89;
	background:url(../images/sign.png) no-repeat center/100%;
	font-size: 0;
}

.themeEventContainer hgroup{
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.themeEventContainer h3.en{
	font-family: Michroma;
	font-size: 1.6em;
	font-weight: 400;
	line-height: 1em;
}
.themeEventContainer *+h3.en{
	margin-top:0.7em;
}
.themeEventContainer h3.ch{
	font-weight: 500;
	font-size: 1.5em;
	line-height: 1em;
}
/*********************************** 共用 end ***********************************************/

/*********************************** home start ***********************************************/
.home{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio:2.375;
	font-size: clamp(8px, 0.84vw, 16px);
	background: var(--theme-color1);
	overflow: hidden;
}

.home:before{
	position: absolute;
	content: "";
	display: block;
	width:115%;
	aspect-ratio:2;
	left:50%;
	top:100%;
	translate:-50%;
	margin-top: -18%;
	background:var(--theme-color2);
	border-radius:50%;
	z-index: 0;
}

.home .CT{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width:40%;
	text-align: center;
	line-height: 1.6em;
	margin-top:-4%;
	z-index: 1;
}

.home h2{
	width:34%;
	aspect-ratio:0.89;
	background:url(../images/homeT.png) no-repeat center/100%;
	font-size: 0;
	animation:float 1.5s ease-in-out infinite alternate;
}
@keyframes float{
	to{
		translate:0 -4%;
	}
}
.home img{
	width:25.78%;
	margin-top:2%;
}
.home quote{
	font-size: 1.125em;
	margin-top:2%;
}
.home p{
	margin:2% 0 0;
}
.home em{
	width:24%;
	margin-top:3%;
}
/*********************************** home end ***********************************************/

/*********************************** about start ***********************************************/
.about{
	padding:0 0 var(--pd);
	background: var(--theme-color2);
}

.about hgroup{
	width:100%;
	margin-bottom: 5%;
}
.about hgroup span{
	margin-top:0.75em;
	font-size: 1.2em;
}
/*********************************** about end ***********************************************/

/*********************************** productGroup start ***********************************************/
.productGroup{
	padding:var(--pd) 0;
}

.pg1{ background: var(--theme-color3);}
.pg2{ background: var(--theme-color4);}
.pg3{ 
	background: var(--theme-color1);
	border-radius:50% / 45%;
	border-top-left-radius:0;
	border-top-right-radius:0;
}

/**************** end start *******************/
.end{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width:100%;
	margin-top:10%;
	font-size: 1.15em;
	order:3;
}
.end quote{
	font-size: 1.15em;
	font-style: italic;
}
.end p{
	margin:2% 0 0;
}
.end em{
	width:23%;
	margin-top:4%;
}
/**************** end end *******************/
/*********************************** productGroup end ***********************************************/


@media screen and (max-width:1023px){
	
	.themeEventContainer{
		font-size: clamp(8px, 3.68vw, 28px);
		--pd:10%;
	}
	
	/*********************************** 共用 start ***********************************************/
	.home ~ * .CT{
		display: block;
		font-size:0.9em;
	}

	/**************** img start *********************/
	.home ~ * .CT > .img{
		width:auto;
	}
	/**************** img end *********************/

	/**************** txt start *********************/
	.home ~ * .CT > .txt{
		width:auto;
		margin-top:10%;
	}
	/**************** txt end *********************/

	/**************** 商品 start *********************/
	.home ~ * .CT ul{
		width:auto;
		margin-top:10%;
		flex-wrap: wrap;
	}

	.home ~ * .CT li{
		width:49.5%;
	}
	.home ~ * .CT li:nth-child(n+3){
		margin-top:10%;
	}
	/**************** 商品 end *********************/
	/*********************************** 共用 end ***********************************************/
	
	/*********************************** home start ***********************************************/
	.home{
		aspect-ratio:0.62;
		font-size: 0.95em;
	}

	.home:before{
		width:160%;
		margin-top: -65%;
	}

	.home .CT{
		width:90%;
		margin-top:0;
	}

	.home h2{
		width:55%;
	}
	.home img{
		width:45%;
		margin-top:5%;
	}
	.home quote{
		margin-top:5%;
	}
	.home p{
		margin-top:5%;
	}
	.home em{
		width:35%;
		margin-top:5%;
	}
	/*********************************** home end ***********************************************/
	
	/*********************************** about start ***********************************************/
	.about{
		padding-top:calc(var(--pd) / 2);
	}
	/*********************************** about end ***********************************************/

	/*********************************** productGroup start ***********************************************/
	.pg3{ 
		padding-bottom:calc(var(--pd) * 2);
		border-radius:50% / 8%;
		border-top-left-radius:0;
		border-top-right-radius:0;
	}

	/**************** end start *******************/
	.end{
		margin-top:20%;
	}
	.end p{
		margin-top:5%;
	}
	.end em{
		width:35%;
		margin-top:10%;
	}
	/**************** end end *******************/
	/*********************************** productGroup end ***********************************************/
	
}