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

.mainContainer:not(:has(.themeEventContainer)){
	padding-top:100vh;
}

.midBlock,
.themeMain{
	display: none;
}

.themeEventContainer{
	--theme-color1:#9b8f7c;
	--theme-color2:#d5cdc0;
	color:#000;
	font-size: clamp(10px, 1.16vw, 14px);
	font-family: 'Noto Sans TC';
	font-weight: 400;
	overflow:hidden;
}
.mainContainer > section.themeEventContainer{
	margin-top:0;
}

/*********************************** introBlock start ***********************************************/
.introBlock{
	color:#FFF;
	background: var(--theme-color1);
}

/****************** i1 start ********************/
.i1{
	padding:10% 8.33% 0;
	font-family: 'Noto Serif TC';
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.i1 h2{
	color:inherit;
	font-weight: 600;
	font-size: 1.85em;
}
.i1 h2 br{
	display: none;
}

.i1 p{
	line-height: 2.1em;
	font-size: 1.28em;
	font-weight: 500;
	margin-top:2.66em;
}

.i1 img{
	display: block;
	width:100%;
	margin-top:4.28em;
}
/****************** i1 end ********************/

/****************** i2 start ********************/
.i2{
	padding:10% 8.33%;
	display: flex;
	justify-content: space-between;
}

.i2 .txt{
	width:43%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.i2 .txt .sImg{
	position: relative;
}
.i2 .txt .sImg img{
	width:52.55%;
	display: block;
}
.i2 .txt .sImg ul{
	position: absolute;
	display: flex;
	left:59.53%;
	top:0;
	color:#825536;
	letter-spacing: 0.02em;
	white-space: nowrap;
	list-style: none;
}
.i2 .txt .sImg ul li+li:before{
	content:"/";
	display: inline-block;
	margin:0 0.5em;
}

.i2 .txt .explain h2{
	font-family: 'Noto Serif TC';
	font-size: 3.85em;
	font-weight: 600;
	color:inherit;
}
.i2 .txt .explain p{
	line-height: 1.65em;
	font-size: 0.92em;
	margin:2em 0 0;
	text-align: justify;
}

.i2 > img{
	width:49%;
	display: block;
}
/****************** i2 end ********************/

/****************** i3 start ********************/
.i3{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	aspect-ratio:1.6216;
	padding:12.5% 5% 0;
	background: url(../images/introP3.jpg) no-repeat center/cover;
}

.i3 p{
	text-align: center;
	margin:0;
	line-height: 2.1em;
	font-family: 'Noto Serif TC';
	font-size: 1.28em;
	font-weight: 500;
}
.i3 p br.m{
	display: none;
}
/****************** i3 end ********************/
/*********************************** introBlock end ***********************************************/

/*********************************** product start ***********************************************/
.product{
	padding:10% 8.33%;
	background: var(--theme-color2);
}

.group+.group{
	margin-top:12%;
}

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

.scene h3{
	position: absolute;
	left:0;
	top:0;
	color:#ad8e50;
	font-family: 'Playfair Display';
	font-style: italic;
	font-size: 3.8em;
	font-weight: 500;
	line-height: 1em;
	z-index: 2;
}

/********* s1 start *********/
.s1{
	aspect-ratio:1.5625;
}

.s1 h3{
	margin:2.5% 0 0 25%;
}

.s1 img{
	position: absolute;
	left:0;
	top:0;
	display: block;
}
.s1 .img1{ width:18%; margin:2.6% 0 0 0; z-index: 1;}
.s1 .img2{ width:30.8%; margin:14.6% 0 0 8%;}
.s1 .img3{ width:27%; margin:37.2% 0 0 28.8%; z-index: 1;}
.s1 .img4{ width:53%; margin:6% 0 0 32%;}
.s1 .img5{ width:17%; margin:0 0 0 73%; z-index: 1;}
.s1 .img6{ width:20.4%; margin:32% 0 0 80%; z-index: 1;}

.s1 ul{
	position: absolute;
	left:0;
	top:0;
}
.s1 .w{
	color:#606060;
	z-index: 1;
}
.s1 .w1{ margin:9.5% 0 0 66%;}
.s1 .w2{ margin:19% 0 0 87.4%;}
.s1 .w li+li{
	margin-top:0.15em;
}

.s1 .c{ width:11%; margin:45.3% 0 0 64.4%;}
.s1 .c li{
	aspect-ratio:3.05;
}
.s1 .c li+li{
	margin-top:14.54%;
}
.s1 .c li:nth-child(1){	background:#b5ae9c;}
.s1 .c li:nth-child(2){	background:#877766;}
.s1 .c li:nth-child(3){	background:#825536;}
/********* s1 end *********/

/********* s2 start *********/
.s2{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.s2 h3{
	margin:5% 0 0 6%;
}

.s2 .img1{
	width:33.4%;
}
.s2 .img2{
	width:50%;
	margin-left:10%;
}
/********* s2 end *********/

/********* s3 start *********/
.s3 h3{
	margin:-3.8% 0 0 27%;
	width:68%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.s3 h3 span{
	flex-grow:1;
	margin:0.42em 0.42em 0;
	height:1px;
	background: currentColor;
	transform-origin: left center;
}

.s3 img{
	display: block;
	width:100%;
}
/********* s3 end *********/
/****************** scene end ********************/

/****************** summary start ********************/
.summary{
	position: relative;
	margin-top:8%;
}

.summary .num{
	position: absolute;
	right:62%;
	bottom:0;
	margin-bottom:-0.04em;
	white-space: nowrap;
	text-align: right;
	font-size: 20em;
	font-style: italic;
	font-family: 'Playfair Display';
	font-weight: 400;
	line-height: 1em;
	color:#bcb4a2;
}

.summary .txt{
	width:50%;
	margin-left:40.5%;
}
.summary .txt hgroup{
	font-size:1.47em;
	font-family: 'Noto Serif TC';
}
.summary .txt hgroup *{
	line-height: 1em;
}
.summary .txt h4{
	font-size:1.32em;
	font-weight: 600;
	margin-left:-0.5em;
}
.summary .txt h5{
	font-size:1em;
	font-weight: 600;
	margin-top:0.85em;
}
.summary .txt p{
	font-size:0.96em;
	margin:1em 0 0;
	line-height: 1.7em;
	text-align: justify;
}
/****************** summary end ********************/

/****************** list start ********************/
.list{
	margin-top:6%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

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

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

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

/*********************************** outroBlock start ***********************************************/
.outroBlock{
	color:#FFF;
	background: var(--theme-color1);
	display: flex;
}

.outroBlock img{
	width:50%;
}

.outroBlock .txt{
	width:50%;
	padding:3% 6.66%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.outroBlock .txt h3{
	font-size: 3.8em;
	font-family: 'Noto Serif TC';
	font-weight: 600;
	line-height: 1.1em;
}
.outroBlock .txt p{
	font-size: 0.96em;
	line-height: 1.7em;
	margin:1.5em 0 0;
}
.outroBlock .txt h3+p{
	margin-top:2.5em;
}
.outroBlock .txt p:last-child{
	margin-top:3em;
}
.outroBlock .txt p:last-child span{
	padding-bottom: 0.2em;
	background: linear-gradient(to top, currentColor, currentColor 100%) no-repeat left bottom / 100% 1px;
}
.outroBlock .txt p:last-child span i{
	font-style: normal;
}
.outroBlock .txt p:last-child span br.m{
	display: none;
}
/*********************************** outroBlock end ***********************************************/


@media screen and (max-width:1023px){
	
	.themeEventContainer{
		font-size: clamp(10px, 3.68vw, 28px);
	}

	/*********************************** introBlock start ***********************************************/
	/****************** i1 start ********************/
	.i1{
		padding:10% 5% 0;
		display: block;
	}

	.i1 h2{
		font-size: 1.6em;
		line-height: 1.6em;
	}
	.i1 h2 br{
		display: block;
	}
	.i1 h2 span{
		display: none;
	}

	.i1 p{
		font-size: 0.96em;
		margin-top:2em;
	}
	.i1 p br{
		display: none;
	}

	.i1 img{
		aspect-ratio:1.2;
		object-fit: cover;
		object-position: right center;
		margin-top:3em;
	}
	/****************** i1 end ********************/

	/****************** i2 start ********************/
	.i2{
		padding:15% 5%;
		display: block;
	}

	.i2 .txt{
		width:auto;
		display: block;
	}

	.i2 .txt .sImg img{
		width:60%;
	}
	.i2 .txt .sImg ul{
		display: block;
		left:70%;
		top:50%
	}
	.i2 .txt .sImg ul li+li{
		margin-top:0.2em;
	}
	.i2 .txt .sImg ul li+li:before{
		display: none;
	}

	.i2 .txt .explain{
		margin-top:5%;
	}
	.i2 .txt .explain h2{
		font-size: 2.8em;
	}

	.i2 > img{
		width:100%;
		margin-top:10%;
	}
	/****************** i2 end ********************/

	/****************** i3 start ********************/
	.i3{
		aspect-ratio:0.62;
		padding:18% 5% 0;
	}

	.i3 p{
		font-size: 0.96em;
	}
	.i3 p span{
		display: none;
	}
	.i3 p br.m{
		display: block;
	}
	/****************** i3 end ********************/
	/*********************************** introBlock end ***********************************************/
	
	/*********************************** product start ***********************************************/
	.product{
		padding:10% 5%;
	}

	/****************** scene start ********************/
	.scene h3{
		font-size: 2em;
	}

	/********* s1 start *********/
	.s1{
		aspect-ratio:0.62;
	}

	.s1 h3{
		margin: 3.5% 0 0 35%;
	}

	.s1 .img1{width: 21%;margin: 2.6% 0 0 6%; z-index: 2;}
	.s1 .img2{width: 34.8%;margin: 99.6% 0 0 0%; z-index: 1;}
	.s1 .img3{width: 42%;margin: 31.2% 0 0 0.8%;}
	.s1 .img4{width: 84%;margin: 54% 0 0 6%;}
	.s1 .img5{width: 25%;margin: 18% 0 0 73%;}
	.s1 .img6{width: 30.4%;margin: 121% 0 0 67%;}

	.s1 .w{font-size: 0.7em;}
	.s1 .w1{margin: 19% 0 0 54%;}
	.s1 .w2{margin: 47% 0 0 76%;}

	.s1 .c{width: 16%;margin: 121.3% 0 0 43.4%;}
	/********* s1 end *********/

	/********* s2 start *********/
	.s2{
		display: block;
		aspect-ratio:0.62;
	}

	.s2 h3{
		margin:27% 0 0 43%;
	}

	.s2 img{
		position: absolute;
		left:0;
		top:0;
		display: block;
	}
	.s2 .img1{width: 60%;margin: 12% 0 0 0; z-index: 1;}
	.s2 .img2{width: 90%;margin: 56% 0 0 9%;}
	/********* s2 end *********/
	
	/********* s3 start *********/
	.s3{
		padding-top:10%;
	}
	
	.s3 h3{
		margin:3.5% 0 0 15%;
		width:80%;
	}

	.s3 img{
		aspect-ratio:0.62;
		object-fit: cover;
	}
	/********* s3 end *********/
	/****************** scene end ********************/

	/****************** summary start ********************/
	.summary{
		margin-top: 0;
	}
	
	.summary .num{
		position: static;
		margin-bottom:0;
		font-size: 7em;
		text-align: left;
	}

	.summary .txt{
		width:auto;
		margin:1em 0 0;
	}
	.summary .txt hgroup{
		font-size:1.2em;
	}
	.summary .txt h5{
		line-height: 1.4em;
	}
	/****************** summary end ********************/

	/****************** list start ********************/
	.list{
		margin-top:10%;
		flex-wrap: wrap;
	}

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

	.outroBlock img{
		width:100%;
		display: block;
	}

	.outroBlock .txt{
		width:auto;
		padding:10% 5% 15%;
	}
	.outroBlock .txt h3{
		font-size: 2.6em;
	}
	.outroBlock .txt p:last-child span i{
		display: none;
	}
	.outroBlock .txt p:last-child span br.m{
		display: block;
	}
	/*********************************** outroBlock end ***********************************************/
	
}