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

body{
	--theme-part-bg:#f1ede7;
}

.kvContainer{
	max-width: none;
	background: var(--theme-part-bg);
}

.midBlock,
.themeMain{
	display: none;
}

.themeEventContainer{
	--side-space1:20.66%;
	--side-space2:12.33%;
	color:#56330c;
	font-size: clamp(8px, 1.5vw, 18px);
	font-family: 'Noto Serif TC';
	font-weight: 600;
	background: linear-gradient(to top, #FFF, var(--theme-part-bg) 10em);
	overflow:hidden;
}

/*********************************** 共用 start ***********************************************/
.CTWrapper{
	max-width: 1200px;
	margin:0 auto;
}

.themeEventContainer h3{
	font-size: 1.45em;
	font-weight:700;
	letter-spacing: 0.05em;
	line-height: 1.35em;
}

.themeEventContainer p{
	line-height: 1.5em;
	margin:1.5em 0 0;
}
/*********************************** 共用 end ***********************************************/

/*********************************** homeBlock start ***********************************************/
.homeBlock{
	margin-top:10%;
}

.homeBlock .CT{
	position: relative;
}

/**************** txt start ***********************/
.homeBlock .txt{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 9%;
	text-align: center;
}

.homeBlock hgroup{
	display: flex;
	align-items: center;
	margin-left:-4%;
}

.homeBlock h2{
	position: relative;
	font-size: 2.5em;
	font-family: 'Playfair Display';
	color:inherit;
	letter-spacing: 0.05em;
	line-height: 1em;
}
.homeBlock h2 span{
	position: relative;
	display: block;
	z-index: 1;
}
.homeBlock h2 em{
	position: absolute;
	left: -1.4em;
	top: 0.52em;
	font-style: normal;
	font-family: Waterfall;
	font-weight: normal;
	color:#e89d43;
	line-height: 1em;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.homeBlock h3{
	margin-left: 0.3em;
	line-height: 1em;
}

.homeBlock .t1{
	margin-top:3.5em;
}
.homeBlock .t3 br{
	display: none;
}
/**************** txt end ***********************/

/**************** img start ***********************/
.homeBlock .img,
.homeBlock img{
	position: absolute;
	top:0;
}
.homeBlock .img{
	left:0;
	width:100%;
}
.homeBlock img{
	width:var(--side-space1);
	display: block;
}
.homeBlock img:nth-child(1){
	right:0;
}
.homeBlock img:nth-child(2){
	left:0;
	margin-top:18.83%;
}
/**************** img end ***********************/
/*********************************** homeBlock end ***********************************************/

/*********************************** g1 start ***********************************************/
.g1{
	margin-top:14.16%;
	padding:0 var(--side-space1);
}

.g1 .CT{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.g1 img{
	display: block;
	width:54.54%;
	margin-bottom:1.66em;
	order:1;
}

.g1 .txt{
	width:38.92%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.g1 .txt h3+p{
	margin-top:3.88em;
}
.g1 .txt p{
	text-align: justify;
}
/*********************************** g1 end ***********************************************/

/*********************************** g2 start ***********************************************/
.g2{
	margin-top:11.66%;
	padding:0 var(--side-space2);
}

.g2 .CT{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

/**************** img start ***********************/
.g2 .img{
	position: relative;
	width:70.79%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.g2 h3{
	position: absolute;
	left:0;
	top:0;
	margin:62.28% 0 0 16.6%;
	z-index: 1;
}

.g2 img{
	display: block;
}

.g2 .zoom{
	width:32.81%;
	margin-top:13.43%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.g2 .zoom img{
	width:81.9%;
}
.g2 .zoom span{
	display: block;
	margin-top:1em;
	font-size: 1.2em;
	font-family: 'Noto Sans';
	font-weight: 300;
	text-align: right;
	white-space: nowrap;
}
.g2 .zoom span strong{
	font-weight: 600;
}

.g2 .img > img{
	width:60%;
}
/**************** img end ***********************/

/**************** txt start ***********************/
.g2 .txt{
	width:24.33%;
	margin-top:11.38%;
}

.g2 .txt p{
	text-align: justify;
}
.g2 .txt p:nth-child(1){
	text-indent: -0.5em;
}
.g2 .txt p:nth-child(2){
	margin-top:3.5em;
}
/**************** txt end ***********************/
/*********************************** g2 end ***********************************************/

/*********************************** g3 start ***********************************************/
.g3{
	margin-top:12.5%;
	padding:0 var(--side-space1);
}

.g3 h3{
	text-align: center;
}

.g3 .group{
	margin-top:7.1%;
}
.g3 .group+.group{
	margin-top:14.2%;
}

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

.g3 ul{
	display: flex;
	margin-top:7.1%;
}
.g3 li{
	display: flex;
	flex-direction: column;
	align-items: center;
	width:50%;
}
.g3 li+li{
	border-left:1px solid;
}
.g3 li strong{
	font-family: 'Noto Sans';
	font-weight: 600;
}
.g3 li span{
	margin-top:0.2em;
}
/*********************************** g3 end ***********************************************/

/*********************************** g4 start ***********************************************/
.g4{
	margin-top:12.5%;
}

/**************** scene start ***********************/
.g4 .scene{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding:12.5% var(--side-space2) 0;
	aspect-ratio:2;
	background: url(../images/g4P1.jpg) no-repeat center/100%;
}

.g4 .scene .txt{
	width:49.77%;
	color:#FFF;
	order:1;
}
.g4 .scene .txt p{
	text-align: justify;
}
.g4 .scene .txt h3+p{
	margin-top:3.5em;
}

.g4 .scene .name{
	margin-top:31.75%;
	display: flex;
	flex-direction: column;
}
.g4 .scene .name strong{
	font-family: 'Noto Sans';
	font-weight: 600;
}
.g4 .scene .name span{
	margin-top:0.2em;
}
/**************** scene end ***********************/

/**************** palette start ***********************/
.g4 .palette{
	margin-top:10.83%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.g4 .palette h4{
	text-align: center;
	font-family: 'Noto Sans';
	font-size: 1.5em;
	font-weight: 600;
}

.g4 .palette ul{
	width:50%;
	margin-top:4.16%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.g4 .palette li{
	width:21%;
}
.g4 .palette li img{
	display: block;
	width:100%;
}
.g4 .palette li .txt{
	font-size: 0.75em;
	font-family: 'Noto Sans';
	display: flex;
	flex-direction: column;
	margin-top:1em;
}
.g4 .palette li .txt strong{
	font-weight: 600;
}
.g4 .palette li .txt span{
	font-weight: 300;
	margin-top:0.2em;
}
/**************** palette end ***********************/
/*********************************** g4 end ***********************************************/

/*********************************** g5 start ***********************************************/
.g5{
	margin-top:12.5%;
	padding:0 var(--side-space2);
}

.g5 .CT{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.g5 h3{
	margin:11.06% 0 0 4.64%;
}

.g5 img{
	display: block;
	width:64.15%;
}
/*********************************** g5 end ***********************************************/

/*********************************** outro start ***********************************************/
.outro{
	margin-top:7.5%;
	padding:0 var(--side-space2) 8.33%;
}

.outro .CT{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.outro .group{
	width:39.82%;
	display: flex;
	flex-direction: column;
}
.outro .group img{
	display: block;
}

.outro .group:nth-child(1) img{
	width:67.77%;
}
.outro .group:nth-child(1) .txt{
	margin-top:30%;
	align-self: flex-end;
}
.outro .group:nth-child(1) .txt p{
	margin:0;
}
.outro .group:nth-child(1) .txt p+p{
	margin-top:1.5em;
}

.outro .group:nth-child(2){
	margin-top:6.63%;
}
.outro .group:nth-child(2) .txt{
	font-size: 0.8em;
	font-family: 'Noto Sans';
}
.outro .group:nth-child(2) .txt p{
	margin:0;
}
.outro .group:nth-child(2) .txt p:nth-child(1){
	font-weight: 300;
}
.outro .group:nth-child(2) .txt p:nth-child(1) strong{
	font-weight: 500;
}
.outro .group:nth-child(2) .txt p:nth-child(1) span{
	letter-spacing: 0.05em;
	margin-left: 0.75em;
}
.outro .group:nth-child(2) .txt p:nth-child(2){
	margin-top:2em;
	font-weight: 600;
}
.outro .group:nth-child(2) img{
	margin-top:13.88%;
	width:100%;
}
/*********************************** outro end ***********************************************/


@media screen and (max-width:1023px){
	
	.themeEventContainer{
		--side-space1:10%;
		--side-space2:var(--side-space1);
		font-size: clamp(8px, 3.68vw, 42px);
	}

	/*********************************** homeBlock start ***********************************************/
	.homeBlock{
		--w:46.87%;
		padding:0 var(--side-space1);
	}
	
	.homeBlock .CT{
		aspect-ratio:0.57;
	}
	
	/**************** txt start ***********************/
	.homeBlock .txt{
		padding-top: 0;
		text-align: left;
	}
	
	.homeBlock hgroup{
		flex-direction: column;
		align-items: center;
		margin-left:0;
	}

	.homeBlock h3{
		margin: 1.2em 0 0;
	}
	.homeBlock h3 span{
		display: none;
	}

	.homeBlock p{
		position: absolute;
		text-align: justify;
	}
	.homeBlock .t1,
	.homeBlock .t2{
		width:var(--w);
		top:0;
	}
	.homeBlock .t1{
		left:0;
		margin-top:51.06%;
	}
	.homeBlock .t2{
		right:0;
		margin-top:115.06%;
	}
	
	.homeBlock .t3{
		left:0;
		bottom:0;
		width:100%;
		text-align: center;
	}
	.homeBlock .t3 br{
		display: block;
	}
	/**************** txt end ***********************/

	/**************** img start ***********************/
	.homeBlock .img,
	.homeBlock img{
		position: absolute;
		top:0;
	}
	.homeBlock .img{
		left:0;
		width:100%;
	}
	.homeBlock img{
		width:var(--w);
	}
	.homeBlock img:nth-child(1){
		right:0;
		margin-top:36.81%;
	}
	.homeBlock img:nth-child(2){
		left:0;
		margin-top:76.71%;
	}
	/**************** img end ***********************/
	/*********************************** homeBlock end ***********************************************/

	/*********************************** g1 start ***********************************************/
	.g1{
		margin-top:15%;
	}

	.g1 .CT{
		display: block;
	}

	.g1 img{
		width:100%;
		margin-bottom:0;
	}

	.g1 .txt{
		width:auto;
		margin-top:10%;
		align-items: flex-start;
	}
	.g1 .txt h3+p{
		margin-top:2em;
	}
	/*********************************** g1 end ***********************************************/
	
	/*********************************** g2 start ***********************************************/
	.g2{
		margin-top:15%;
	}

	.g2 .CT{
		display: block;
	}

	/**************** img start ***********************/
	.g2 .img{
		width:auto;
	}

	.g2 h3{
		margin-left:0;
	}
	
	.g2 .zoom{
		position: relative;
		width:30%;
		margin-top:9%;
		align-items: flex-start;
		z-index: 1;
	}
	.g2 .zoom img{
		width:100%;
		order:1;
		margin-top:0.8em;
	}
	.g2 .zoom span{
		margin-top:0;
		font-size: 0.95em;
	}

	.g2 .img > img{
		width:62%;
	}
	/**************** img end ***********************/

	/**************** txt start ***********************/
	.g2 .txt{
		width:auto;
		margin-top:10%;
	}

	.g2 .txt p:nth-child(2){
		margin-top:1.5em;
	}
	/**************** txt end ***********************/
	/*********************************** g2 end ***********************************************/
	
	/*********************************** g3 start ***********************************************/
	.g3{
		margin-top:15%;
	}

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

	.g3 ul{
		margin-top:5%;
		font-size: 0.85em;
	}
	/*********************************** g3 end ***********************************************/
	
	/*********************************** g4 start ***********************************************/
	.g4{
		margin-top:15%;
	}

	/**************** scene start ***********************/
	.g4 .scene{
		flex-direction: column;
		padding:15% 10% 12%;
		aspect-ratio:auto;
		background-position: right center;
		background-size: cover;
	}

	.g4 .scene .txt{
		width:78%;
	}
	.g4 .scene .txt h3+p{
		margin-top:2em;
	}

	.g4 .scene .name{
		color:#FFF;
		margin-top:3em;
		align-self: flex-end;
		order:1;
	}
	/**************** scene end ***********************/

	/**************** palette start ***********************/
	.g4 .palette{
		margin-top:10%;
		padding:0 var(--side-space1);
	}

	.g4 .palette h4{
		font-size: 1.4em;
	}

	.g4 .palette ul{
		width:100%;
		margin-top:10%;
		flex-wrap: wrap;
	}
	.g4 .palette li{
		width:47%;
	}
	.g4 .palette li:nth-child(n+3){
		margin-top:2em;
	}
	.g4 .palette li .txt{
		font-size: 0.9em;
	}
	/**************** palette end ***********************/
	/*********************************** g4 end ***********************************************/
	
	/*********************************** g5 start ***********************************************/
	.g5{
		margin-top:15%;
	}

	.g5 .CT{
		display: block;
	}

	.g5 h3{
		margin:0;
	}
	.g5 h3 br.mobileHide{
		display: none;
	}

	.g5 img{
		width:100%;
		margin-top:5%;
	}
	/*********************************** g5 end ***********************************************/
	
	/*********************************** outro start ***********************************************/
	.outro{
		margin-top:10%;
		padding-bottom:15%;
	}

	.outro .CT{
		display: block;
	}

	.outro .group{
		width:auto;
	}

	.outro .group:nth-child(1) img{
		order:1;
		margin-top:15%;
		width:100%;
	}
	.outro .group:nth-child(1) .txt{
		margin-top:0;
		align-self: flex-start;
	}

	.outro .group:nth-child(2){
		margin-top:15%;
	}
	.outro .group:nth-child(2) img{
		margin-top:10%;
	}
	/*********************************** outro end ***********************************************/
	
}