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

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

.themeEventContainer{
	--gray:rgba(0, 0, 0, 0.25);
	font-family: 'Noto Serif HK';
	font-size: clamp(10px, 1.41vw, 17px);
	font-weight: 500;
	max-width: 1920px;
	margin:0 auto;
	color:#000;
}

/*********************************** home start ***********************************************/
.home{
	position: relative;
	aspect-ratio:2.55;
}

.home img{
	width:100%;
	height:100%;
	display: block;
	object-fit: cover;
}

.home h2{
	position: absolute;
	left:50%;
	top:0;
	font-size: 0;
	width:8%;
	aspect-ratio:1.0769;
	translate: -50% 0;
	margin-top: 3.5%;
	background: url(../images/logo.svg) no-repeat center/100%;
}
/*********************************** home end ***********************************************/

/*********************************** 共用 start ***********************************************/
.mainCT{
	--gradient-height:8.5em;
	padding-bottom:6em;
	background: linear-gradient(to top, #FFF, #ddd8d0 var(--gradient-height));
}

.CTWrapper{
	max-width:1200px;
	margin:0 auto;
}

.CT{
	padding:8% 5% 0;
}

.themeEventContainer h3{
	font-size: 2.11em;
	font-weight: 600;
	line-height: 1em;
}
.themeEventContainer h3:has(em){
	letter-spacing: 0.4em;
	writing-mode:vertical-lr;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.themeEventContainer h3.hr{
	letter-spacing: 0.25em;
	writing-mode:initial;
	flex-direction: column;
}
.themeEventContainer h3 em,
.themeEventContainer h3 i{
	position: relative;
	font-style: normal;
}
.themeEventContainer h3 em+em{
	margin-left:0.4em;
}
.themeEventContainer h3.hr em+em{
	margin:0.4em 0 0;
}
.themeEventContainer h3.wBg em:before{
	position: absolute;
	content:"";
	display: block;
	background: #FFF;
}
.themeEventContainer h3.wBg em span{
	position: relative;
}
.themeEventContainer h3 i{
	left:0.35em;
	top:-0.25em;
}

.themeEventContainer p{
	line-height: 1.6em;
	letter-spacing: 0.1em;
	margin:0;
	text-align: justify;
}
.themeEventContainer *+p{
	margin-top:1.5em;
}
/*********************************** 共用 end ***********************************************/

/*********************************** g0 start ***********************************************/
.g0{
	position: relative;
	padding:0 15.68% 0 9.8%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.g0 h3{
	font-size: 2.9em;
}
.g0 h3 em:nth-child(2){
	margin-top:2.05em;
}

.g0 .line{
	position: absolute;
	left:0;
	top:0;
	margin:4.9% 0 0 18.62%;
	width:71.56%;
	height:1px;
	background: var(--gray);
	transform-origin: left center;
}

.g0 .txt{
	width:55.26%;
	margin-top:17.5%;
}
.g0 .txt h4{
	font-size: 1.29em;
	font-weight: 700;
	letter-spacing: 0.05em;
}
/*********************************** g0 end ***********************************************/

/*********************************** g1 start ***********************************************/
.g1{
	position: relative;
	margin-top:11%;
}

.g1 .img{
	position: relative;
	width:81.37%;
}
.g1 .img img{
	display: block;
	width:100%;
}
.g1 .img .line{
	position: absolute;
	left:0;
	top:0;
	margin:50.12% 0 0 -4.57%;
	width:32%;
	height:1px;
	background: var(--gray);
	transform-origin: left center;
	rotate:45deg;
}

.g1 .txt{
	width:63.72%;
	margin:4% 0 0 29.41%;
}
.g1 h3{
	position: absolute;
	right:0;
	top:0;
	margin:-2.2% 6% 0 0;
}
.g1 h3 em:nth-child(2){
	margin-top:1.35em;
}
.g1 h3 em:before{
	left:0;
	top:0;
	width:100%;
	margin:-0.25em 0 0 -0.2em;
}
.g1 h3 em:nth-child(1):before{
	height:calc(100% - 0.5em);
}
.g1 h3 em:nth-child(2):before{
	height:calc(100% + 0.5em);
}
/*********************************** g1 end ***********************************************/

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

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

.g2 li{
	width:49.01%;
	aspect-ratio:1.1792;
	display: flex;
	justify-content: center;
	align-items: center;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.g2 li:nth-child(1){ background-image: url(../images/g2P1.jpg);}
.g2 li:nth-child(2){ background-image: url(../images/g2P2.jpg);}

.g2 .txt{
	display: flex;
	flex-direction: column;
	align-items: center;
	width:46%;
	padding:2.8em 2em 2em;
	background: #FFF;
}
.g2 .txt em{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-style: normal;
	font-family: 'Noto Sans JP';
	font-weight: 500;
	font-size: 0.95em;
	margin-top:0.5em;
}
.g2 .txt em:before{
	content:"";
	display: block;
	width:1.41em;
	height:0.125em;
	background: currentColor;
	margin-bottom:0.4em;
}
.g2 .txt p{
	margin-top: 0.8em;
	font-size: 0.9em;
	letter-spacing: normal;
}
/*********************************** g2 end ***********************************************/

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

.g3 .img{
	position: relative;
	width:61.76%;
	order:1;
}
.g3 .img img{
	display: block;
	width:100%;
}
.g3 .img:before,
.g3 .img:after{
	position: absolute;
	left:0;
	top:0;
	content: "";
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}
.g3 .img:before{
	width:49.52%;
	aspect-ratio:2.9714;
	margin:-10.95% 0 0 40.31%;
	background-image: url(../images/g3Deco1.svg);
}
.g3 .img:after{
	width:64.92%;
	aspect-ratio:3.8952;
	margin:80.15% 0 0 -7.93%;
	background-image: url(../images/g3Deco2.svg);
}

.g3 .txt{
	width:33.33%;
}
.g3 .txt h3{
	align-items: flex-end;
}
.g3 .txt h3 em:before{
	left:0;
	top:0;
	margin:0.23em 0 0 -0.6em;
	width:calc(100% + 0.6em);
	height:100%;
}
.g3 .txt .pWrapper{
	border-top:1px solid var(--gray);
	margin-top:6em;
	padding-top:1.5em;
}

.dop{
	width:100%;
	margin-top:9%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	font-family: 'Noto Sans TC';
	order:2;
}

.dop h4{
	font-size: 3.2em;
	font-weight: 800;
	color:#ddd8d0;
	text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
	margin-left:5%;
	letter-spacing: 0.08em;
}
.dop h4 span{
	display: block;
}
.dop h4 span+span{
	margin:-0.1em 0 0 2em;
}

.dop ul{
	margin-top:3.5%;
	width:61.76%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.dop li{
	width:23.33%;
}
.dop li img{
	display: block;
	width:100%;
}
.dop li span{
	display: block;
	font-size:0.85em;
	font-weight: 500;
	margin-top:0.8em;
}
/*********************************** g3 end ***********************************************/

/*********************************** g4 start ***********************************************/
.g4{
	position: relative;
	margin-top:15%;
	padding-left:17.15%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.g4 .txt{
	margin-top:6%;
	width:82.84%;
	order:1;
}

.g4 .txt h3{
	position: absolute;
	left:0;
	top:0;
	margin-top:-7.2%;
	padding-left:1.96%;
}
.g4 .txt h3 em:before{
	left:0;
	top:0;
	width:100%;
	height:8.8em;
}
.g4 .txt h3 em span{
	display: block;
	translate:26% 0;
}
.g4 .txt h3 em:nth-child(1) span{
	top:0.75em;
}
.g4 .txt h3 em:nth-child(2) span{
	top:2.9em;
}

.g4 .txt h3 .line{
	position: absolute;
	left:0;
	top:0;
	background: var(--gray);
}
.g4 .txt h3 .line.h{
	width:5.15em;
	height:1px;
	margin-top:16.6em;
	transform-origin: left center;
}
.g4 .txt h3 .line.v{
	width:1px;
	height:11.7em;
	margin:7.2em 0 0 1.05em;
	transform-origin: center top;
}

.g4 ul{
	width:100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.g4 li{
	position: relative;
	width:31.71%;
}
.g4 li:nth-child(1){
	z-index: 1;
}

.g4 li:nth-child(1) .img{
	position: relative;
}
.g4 li:nth-child(1) .img:after{
	position: absolute;
	left:0;
	top:0;
	margin:77.23% 0 0 63.8%;
	content:"";
	display: block;
	width:52.98%;
	aspect-ratio:0.6283;
	background: url(../images/g4P1.png) no-repeat center/100%;
}

.g4 li img{
	display: block;
	width:100%;
}

.g4 li span{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	margin-top:8.95%;
	text-align: center;
	font-family: 'Noto Sans TC';
	font-size:0.85em;
	font-weight: 500;
	color:#966018;
}
/*********************************** g4 end ***********************************************/

/*********************************** outro start ***********************************************/
.outro .CT{
	padding-top: 3%;
	padding-bottom:5%;
}

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

.outro .pWrapper{
	margin-top:3.52em;
	display: flex;
	justify-content: flex-end;
}
.outro p{
	position: relative;
	height:7.64em;
	padding-left:1.6em;
}
.outro p:nth-child(1){
	width:27.45%;
}
.outro p:nth-child(2){
	width:53.92%;
	margin:0 0 0 8.62%;
}
.outro p i{
	position: absolute;
	left:0;
	top:0.3em;
	width:1px;
	height:100%;
	background: var(--gray);
	transform-origin: center top;
}
.outro p span{
	display: block;
}
/*********************************** outro end ***********************************************/


@media screen and (max-width:1023px){
	
	.themeEventContainer{
		font-size: clamp(8px, 3.42vw, 26px);
	}
	
	/*********************************** home start ***********************************************/
	.home{
		aspect-ratio:1;
	}

	.home img{
		object-position: 13%;
	}

	.home h2{
		width: 18%;
		margin-top: 6%;
	}
	/*********************************** home end ***********************************************/
	
	/*********************************** 共用 start ***********************************************/
	.mainCT{
		--gradient-height:10em;
		padding-bottom:4em;
	}

	.CT{
		padding:12% 10% 0;
		overflow: hidden;
	}
	
	.themeEventContainer h3{
		font-size: 1.8em;
	}
	
	.themeEventContainer p{
		letter-spacing:normal;
	}
	/*********************************** 共用 end ***********************************************/
	
	/*********************************** g0 start ***********************************************/
	.g0{
		padding:0;
	}

	.g0 h3{
		font-size: 2.4em;
	}

	.g0 .line{
		margin:12% 0 0 20%;
		width:80%;
	}

	.g0 .txt{
		width:62%;
		margin-top:22%;
	}
	.g0 .txt h4{
		font-size: 1.18em;
		letter-spacing: normal;
	}
	/*********************************** g0 end ***********************************************/
	
	/*********************************** g1 start ***********************************************/
	.g1{
		margin-top:15%;
	}

	.g1 .img{
		width:auto;
	}
	.g1 .img img{
		aspect-ratio:1.35;
		object-position: 25%;
		object-fit: cover;
	}
	.g1 .img .line{
		margin: 58% 0 0 -4%;
		width: 50%;
	}

	.g1 .txt{
		width:auto;
		margin:20% 0 0;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.g1 h3{
		position: static;
		margin:0;
	}
	
	.g1 .pWrapper{
		margin-top:8.5%;
		width:68%;
	}
	/*********************************** g1 end ***********************************************/
	
	/*********************************** g2 start ***********************************************/
	.g2{
		margin-top:15%;
	}

	.g2 ul{
		display: block;
	}

	.g2 li{
		width:auto;
		aspect-ratio:0.9;
	}
	.g2 li+li{
		margin-top:10%;
	}

	.g2 .txt{
		width:65%;
		padding-top:2em;
	}
	/*********************************** g2 end ***********************************************/
	
	/*********************************** g3 start ***********************************************/
	.g3{
		margin-top:22%;
		display: block;
	}

	.g3 .img{
		width:auto;
	}

	.g3 .txt{
		width:auto;
		margin-top:20%;
	}
	.g3 .txt h3{
		align-items: flex-start;
		margin-left:0.6em;
	}
	.g3 .txt .pWrapper{
		margin-top:2.5em;
	}

	.dop{
		margin-top:5%;
		display: block;
	}

	.dop h4{
		font-size: 2.8em;
		margin-left:0;
	}
	.dop h4 span{
		display: inline-block;
	}
	.dop h4 span+span{
		margin-left:0.2em;
	}

	.dop ul{
		margin-top:8%;
		width:auto;
		flex-wrap: wrap;
	}
	.dop li{
		width:47%;
	}
	.dop li:nth-child(n+3){
		margin-top:1.5em;
	}
	.dop li span{
		font-size: 1em;
	}
	/*********************************** g3 end ***********************************************/
	
	/*********************************** g4 start ***********************************************/
	.g4{
		margin-top:20%;
		padding-left:0;
	}

	.g4 .txt{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-top:0;
		order:0;
	}

	.g4 .txt h3{
		position: relative;
		margin-top:0;
		padding-left:0;
	}

	.g4 .txt h3 .line.h{
		width:3em;
		margin:11em 0 0 -0.5em;
	}
	.g4 .txt h3 .line.v{
		height:9em;
		margin-left:0.5em;
		z-index: 1;
	}
	
	.g4 .txt .pWrapper{
		margin-top: 17%;
		width: 68%;
	}
	
	.g4 ul{
		position: relative;
		display: block;
		margin-top:20%;
		z-index: 0;
	}

	.g4 li{
		width:auto;
	}
	.g4 li:nth-child(1){
		width:88%;
	}
	.g4 li+li{
		margin-top:10%;
	}

	.g4 li span{
		font-size:1em;
	}
	.g4 li:nth-child(1) span{
		width:113.63%;
	}
	/*********************************** g4 end ***********************************************/
	
	/*********************************** outro start ***********************************************/
	.outro .CT{
		position: relative;
		padding-top: 0;
	}

	.outro img{
		position: absolute;
		left:10%;
		top:0;
		aspect-ratio:1.5;
		object-fit: cover;
		object-position: 75%;
		width:80%;
		margin-top:23%;
	}

	.outro .pWrapper{
		margin-top:0;
		flex-direction: column;
	}
	.outro p{
		height:auto;
		padding-bottom:1em;
	}
	.outro p:nth-child(1){
		width:auto;
	}
	.outro p:nth-child(2){
		width:auto;
		margin:88% 0 0;
	}
	/*********************************** outro end ***********************************************/
	
}