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

body{
	background: #f4f2ea;
}

footer{
	background: #FFF;
}

.themeEventContainer{
	color:#000;
	font-size: clamp(10px, 1.16vw, 14px);
	font-family: 'Noto Sans TC';
	font-weight: 300;
	overflow:hidden;
}

/*********************************** kvBlock start ***********************************************/
.kvBlock{
	position: relative;
	color:#FFF;
	width:85.33%;
	margin:0 auto;
	font-family: 'Noto Serif TC';
	font-weight: 600;
	text-align: center;
	aspect-ratio:2.3486;
	background: url(../images/kvBg.jpg) no-repeat center/cover;
}

.kvBlock p{
	position: absolute;
	left:0;
	top:0;
}
.kvBlock p:nth-child(1){
	font-size: 1.9em;
	letter-spacing: 0.02em;
	margin:8.5% 0 0 38%;
}
.kvBlock p:nth-child(1) .br2{
	display: none;
}
.kvBlock p:nth-child(2){
	font-size: 1.65em;
	margin:28.5% 0 0 49%;
}
/*********************************** kvBlock end ***********************************************/

/*********************************** introBlock start ***********************************************/
.introBlock{
	display: flex;
	flex-direction: column;
	align-items: center;
}

/****************** title start ************************/
.title{
	position: relative;
	width:58.33%;
	text-align: center;
	font-family: 'Noto Serif TC';
	font-weight: 600;
	font-size: 1.9em;
	letter-spacing: 0.02em;
}
.title:before{
	position: absolute;
	font-size: 5em;
}
.title p{
	margin:0;
}
/****************** title end ************************/

/****************** intro1 start ************************/
.i1{
	padding:7.5% 0 13%;
}
.i1 .title:before{
	content:"“";
	color:#cecece;
	right:100%;
	bottom:-58%;
}

.i1 ul{
	width:65%;
	margin-top:6.66%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.i1 li{
	position: relative;
}
.i1 li:nth-child(1){
	width:35.89%;
}
.i1 li:nth-child(2){
	width:51.28%;
}

.i1 li img{
	display: block;
	width:100%;
}
.i1 li em{
	position: absolute;
	left:0;
	top:100%;
	font-family: 'Noto Serif TC';
	font-style: normal;
	font-size: 1.6em;
	margin-top:0.5em;
}
/****************** intro1 end ************************/

/****************** intro2 start ************************/
.i2{
	position: relative;
	padding:7.5% 0;
	background: #cecece;
}

.i2 .title:before{
	content:"”";
	color:#efefef;
	left:100%;
	top:40%;
}

/********* slick start ***********/
.i2 ul{
	width:85%;
	margin-top:6.66%;
}

.i2 .slick li{
	transition: scale 0.5s;
}
.i2 .slick li:not(.slick-center){
	scale: 0.8;
}
.i2 .slick img{
	display: block;
	width:100%;
}

.i2 ._slickPN{
	--gap:0.5%;
	position: absolute;
	top:50%;
	width:2.71em;
	aspect-ratio:1;
	cursor:pointer;
	translate:0 -50%;
}
.i2 ._slickPN.prev{
	right:100%;
	margin-right:var(--gap);
	scale:-1 1;
}
.i2 ._slickPN.next{
	left:100%;
	margin-left:var(--gap);
}
.i2 ._slickPN span{
	position: relative;
	display: block;
	height:100%;
	border:1px solid;
	border-radius:50%;
	transition: scale 0.2s;
}
.i2 ._slickPN:hover span{
	scale:1.15;
}
.i2 ._slickPN span:before,
.i2 ._slickPN span:after{
	position: absolute;
	content: "";
	display: block;
	width:35%;
	height:1px;
	background: currentColor;
	top:50%;
	right:32%;
	transform-origin: right center;
	translate:0 -50%;
}
.i2 ._slickPN span:before{
	rotate:25deg;
}
.i2 ._slickPN span:after{
	rotate:-25deg;
}
/********* slick end ***********/

.i2 .line{
	position:absolute;
	left:50%;
	top:0;
	translate:0 -50%;
	width:1px;
	height:7.14em;
}
.i2 .line i{
	display: block;
	height:100%;
	background: currentColor;
	transform-origin: center top;
}
/****************** intro2 end ************************/
/*********************************** introBlock end ***********************************************/

/*********************************** product start ***********************************************/
.product{
	padding:7.5% 7.5% 0;
}

.group+.group{
	margin-top:5%;
	padding-top:5%;
	border-top:1px solid #999;
}

/****************** summary start ************************/
.summary{
	--padding-w:45%;
	position: relative;
	aspect-ratio:4.63;
}
.group:nth-child(odd) .summary{
	padding-right: var(--padding-w);
}
.group:nth-child(even) .summary{
	padding-left: var(--padding-w);
}

.summary h3{
	font-family: 'Noto Serif TC';
	font-weight: 600;
	font-size: 1.9em;
	letter-spacing: 0.02em;
	line-height: 1em;
}
.summary h3 em{
	font-style: normal;
	font-size: 1.6em;
}
.summary img{
	position: absolute;
	width:39.25%;
	display: block;
	top:0;
}
.group:nth-child(odd) .summary img{
	right:0;
}
.group:nth-child(even) .summary img{
	left:0;
}
.summary p{
	margin:1.25em 0 0;
	line-height: 1.8em;
	text-align: justify;
}
/****************** summary end ************************/

.group ul{
	margin-top:3.92%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.group li{
	width:19%;
}
.group li a{
	display: block;
}
.group li a:hover{
	color:#963;
}

.group li .img{
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio:0.79;
	background: #cad0c2;
	overflow: hidden;
}
.group li img{
	display: block;
	width:100%;
	transition: scale 0.5s;
}
.group li a:hover img{
	scale:1.1;
}

.group li .txt{
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio:1.72;
	padding:0 0.5em;
	text-align: center;
	background: #FFF;
	transition: color 0.2s;
}
/*********************************** product end ***********************************************/


@media screen and (max-width:1023px){
	
	.themeEventContainer{
		font-size: 14px;
	}

	/*********************************** kvBlock start ***********************************************/
	.kvBlock{
		display: flex;
		flex-direction: column;
		align-items: center;
		width:auto;
		aspect-ratio:0.62;
		background-position-x: 33%;
		font-size: clamp(10px, 2.5vw, 26px);
	}

	.kvBlock p{
		position: static;
	}
	.kvBlock p:nth-child(1){
		margin:22% 1.25em 0;
		line-height: 1.6em;
	}
	.kvBlock p:nth-child(1) .br2{
		display: block;
	}
	.kvBlock p:nth-child(2){
		margin:90% 0 0;
	}
	/*********************************** kvBlock end ***********************************************/
	
	/*********************************** introBlock start ***********************************************/
	/****************** title start ************************/
	.title{
		width:75%;
		font-size: 1.1em;
	}
	
	.title p br{
		display: none;
	}
	/****************** title end ************************/

	/****************** intro1 start ************************/
	.i1{
		padding:10% 0 22%;
	}

	.i1 ul{
		width:95%;
		margin-top:10%;
	}
	.i1 li:nth-child(1){
		width:36%;
	}
	.i1 li:nth-child(2){
		width:60%;
	}

	.i1 li em{
		font-size: 0.9em;
	}
	/****************** intro1 end ************************/

	/****************** intro2 start ************************/
	.i2{
		padding:12% 0 15%;
	}

	/********* slick start ***********/
	.i2 ul{
		width:100%;
		margin-top:10%;
	}
	/********* slick end ***********/

	.i2 .line{
		height:4em;
	}
	/****************** intro2 end ************************/
	/*********************************** introBlock end ***********************************************/
	
	/*********************************** product start ***********************************************/
	.product{
		padding:10% 5% 0;
	}

	.group+.group{
		margin-top:10%;
		padding-top:10%;
	}

	/****************** summary start ************************/
	.summary{
		--padding-w:0;
		aspect-ratio:auto;
	}

	.summary h3{
		font-size: 1.15em;
	}
	.summary img{
		position: static;
		width:100%;
		margin-top:2em;
	}
	/****************** summary end ************************/

	.group ul{
		margin-top:10%;
		flex-wrap: wrap;
	}

	.group li{
		width:48.5%;
	}
	.group li:nth-child(n+3){
		margin-top:1em;
	}
	
	.group li .txt{
		font-size: 0.95em;
	}
	/*********************************** product end ***********************************************/
	
}