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

.kvContainer{
	max-width: none;
}

.midBlock,
.themeMain{
	display: none;
}

.themeEventContainer{
	--side-space:11.25%;
	color:#000;
	font-size: clamp(8px, 1.25vw, 15px);
	font-family: 'Noto Sans TC';
	font-weight: 400;
	overflow:hidden;
	padding:8% 0 5%;
}

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

.CT{
	padding:0 var(--side-space);
}
/*********************************** 共用 end ***********************************************/

/*********************************** homeBlock start ***********************************************/
.homeBlock .CT{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.homeBlock .scene{
	position: relative;
	width:42.15%;
	aspect-ratio:0.6666;
	background: url(../images/homeScene.jpg) no-repeat center/100%;
}

.homeBlock .scene em{
	position: absolute;
	display: block;
	left:0;
	top:0;
	width:100%;
	margin-top:-0.66em;
	text-align: center;
	font-family: 'Scheherazade New';
	font-style: normal;
	font-size: 4.1em;
	font-weight: 400;
	line-height: 1em;
}

.homeBlock .scene .from{
	position: absolute;
	right:0;
	top:0;
	width:63.77%;
	margin:112.75% 93.11% 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.homeBlock .scene .from span{
	display: block;
	width:30.4%;
	aspect-ratio:2.5333;
	font-size: 0;
	background: url(../images/home1996.svg) no-repeat center/100%;
}
.homeBlock .scene .from i{
	display: block;
	flex-grow: 1;
	height:0.13em;
	background: #b7b7b7;
	margin-left:5.2%;
	transform-origin: left center;
}

.homeBlock .scene strong{
	position: absolute;
	display: block;
	left:0;
	top:0;
	width:237.24%;
	aspect-ratio:2.8181;
	margin: 14.03% 0 0 -68.36%;
	font-size: 0;
	background: url(../images/home2026.svg) no-repeat center/100%;
}

.homeBlock .scene:after{
	position: absolute;
	content: "";
	display: block;
	left:0;
	top:0;
	margin:52.40% 0 0 26.53%;
	width:46.6%;
	aspect-ratio:0.5723;
	background: url(../images/homeStool.png) no-repeat center/100%;
}

.homeBlock p{
	margin:0.75em 0 0;
	text-align: center;
	font-size: 2.82em;
	font-family:'Noto Sans';
	font-weight: 400;
	line-height: 1.4em;
}
.homeBlock p strong{
	font-weight: 800;
}

.homeBlock .e15{
	position: absolute;
	left:0;
	top:0;
	margin:45% 0 0 83%;
	width:8%;
	aspect-ratio:1.11;
	font-size: 0;
	background: url(../images/logo_e15.svg) no-repeat center/100%;
}
/*********************************** homeBlock end ***********************************************/

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

.g1 ul{
	display: flex;
	justify-content: space-between;
}
.g1 li{
	font-family: 'Noto Sans';
	font-size: 1.55em;
	line-height: 1em;
	width:33.33%;
}
.g1 li:nth-child(2){
	text-align: center;
}
.g1 li:nth-child(3){
	text-align: right;
}

.g1 h2{
	font-size: 0;
	margin-top:4%;
	aspect-ratio:10.1086;
	background: url(../images/g1.svg) no-repeat center/100%;
}
/*********************************** g1 end ***********************************************/

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

.g2 .CT{
	position: relative;
}

.g2 ul{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	align-items: flex-start;
}
.g2 li{
	width:22.58%;
}
.g2 li:nth-child(1){
	width:50%;
}
.g2 li+li{
	margin-right:2.41%;
}
.g2 li:nth-child(2){
	order:2;
}
.g2 li:nth-child(3){
	order:1;
}
.g2 li:nth-child(4){
	order:3;
	margin:0.66em 0 0;
}
.g2 li:last-child{
	order:4;
	margin:30.5% 4.83% 0 0;
}
.g2 li a{
	display: block;
}
.g2 li a:hover{
	color:currentColor;
}
.g2 li .img{
	overflow: hidden;
}
.g2 li img{
	display: block;
	width:100%;
	transition: scale 0.5s;
}
.g2 li a:hover img{
	scale:1.05;
}
.g2 li strong{
	display: block;
	font-weight: 600;
	line-height: 1.6em;
	margin-top:1em;
}

.g2 .CT .txt{
	position: absolute;
	left:0;
	top:0;
	width:27%;
	margin:35% 0 0 11.25%;
}
.g2 .CT .txt p{
	text-align: justify;
	line-height: 1.6em;
	margin:0;
}
.g2 .CT .txt *+p{
	margin-top:2em;
}
.g2 .CT .txt p:last-child{
	position: relative;
	margin-top:7.33em;
}
.g2 .CT .txt p:last-child:before{
	position: absolute;
	right:0;
	top:0;
	margin:-2.5em 1em 0 0;
	content:"";
	display: block;
	width:4.8em;
	height:1px;
	background: currentColor;
	transform-origin: right center;
	rotate:45deg;
}
/*********************************** g2 end ***********************************************/

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

.g3 img{
	display: block;
	width:100%;
}
.g3 img:nth-child(2){
	display: none;
}
/*********************************** g3 end ***********************************************/

/*********************************** g4 start ***********************************************/
.g4{
	width:91.39%;
	margin:10% auto 0;
}

.g4 .CT{
	padding-bottom: 10%;
}

.g4 .slick-center{
	position: relative;
	z-index: 1;
}

.g4 a{
	display: block;
	margin:31.8% 0;
}
.g4 img{
	display: block;
	width:100%;
	transition: scale 0.5s;
}
.g4 .slick-center img{
	scale:1.46;
}

/******** arrow start *********/
._slickPN{
	--padding:46.12%;
	position: absolute;
	top:0;
	margin-top:72%;
	width:1.86em;
	aspect-ratio:1;
	cursor:pointer;
}
._slickPN.prev{
	scale:-1 1;
	left:0;
	margin-left:var(--padding);
}
._slickPN.next{
	right:0;
	margin-right:var(--padding);
}
._slickPN span{
	position: relative;
	display: block;
	height:100%;
	border:1px solid;
	border-radius:50%;
	transition: scale 0.2s;
}
._slickPN:hover span{
	scale:1.15;
}
._slickPN span:before,
._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%;
}
._slickPN span:before{
	rotate:35deg;
}
._slickPN span:after{
	rotate:-35deg;
}
/******** arrow end *********/
/*********************************** g4 end ***********************************************/

/*********************************** g5 start ***********************************************/
.g5{
	margin-top:8.5%;
}

.g5 ul{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.g5 li{
	width:31.61%;
}
.g5 li img{
	display: block;
	width:100%;
}
.g5 li em{
	display: block;
	font-style: normal;
	font-weight: 600;
	margin-top:0.9em;
	padding-right:13.6%;
}
.g5 li:nth-child(2) em{
	position: relative;
	top:-12.93em;
}
.g5 li:nth-child(3) em{
	text-align: right;
}
.g5 li p{
	position: relative;
	margin:2.5em 0 0;
	padding-top:1em;
	line-height: 1.6em;
}
.g5 li p:before{
	position: absolute;
	left:0;
	top:0;
	content: "";
	display: block;
	width:51.02%;
	height:1px;
	background: currentColor;
}
.g5 li p strong{
	font-weight: 600;
}
/*********************************** g5 end ***********************************************/


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

	/*********************************** homeBlock start ***********************************************/
	.homeBlock .scene{
		width:70%;
	}

	.homeBlock .scene em{
		font-size: 2.4em;
	}

	.homeBlock .scene .from{
		width:35%;
		margin-top:115%;
	}
	.homeBlock .scene .from span{
		width:45%;
	}
	.homeBlock .scene .from i{
		height:0.1em;
	}

	.homeBlock .scene strong{
		width: 150%;
		margin: 20% 0 0 -25%;
	}

	.homeBlock p{
		font-size: 1.5em;
	}

	.homeBlock .e15{
		margin: 75% 0 0 85%;
		width: 10%;
	}
	/*********************************** homeBlock end ***********************************************/
	
	/*********************************** g1 start ***********************************************/
	.g1{
		margin-top:15%;
	}

	.g1 li{
		width:auto;
		font-size: 0.8em;
	}

	.g1 h2{
		margin-top:5%;
	}
	/*********************************** g1 end ***********************************************/
	
	/*********************************** g2 start ***********************************************/
	.g2{
		margin-top:15%;
	}

	.g2 ul{
		flex-direction: row;
		justify-content: space-between;
	}
	.g2 li{
		width:45%;
	}
	.g2 li:nth-child(1){
		width:100%;
	}
	.g2 li+li{
		margin-right:0;
	}
	.g2 li:nth-child(2),
	.g2 li:nth-child(3),
	.g2 li:nth-child(4),
	.g2 li:last-child{
		order:0;
	}
	.g2 li:nth-child(n+2),
	.g2 li:nth-child(4),
	.g2 li:last-child{
		margin:2em 0 0;
	}

	.g2 .CT .txt{
		position: static;
		width:auto;
		margin:3em 0 0;
	}
	/*********************************** g2 end ***********************************************/
	
	/*********************************** g3 start ***********************************************/
	.g3{
		margin-top:15%;
	}

	.g3 img:nth-child(1){
		display: none;
	}
	.g3 img:nth-child(2){
		display: block;
	}
	/*********************************** g3 end ***********************************************/
	
	/*********************************** g4 start ***********************************************/
	.g4{
		width:auto;
		margin-top:20%;
	}
	
	.g4 .CT{
		padding-bottom: 15%;
	}

	/******** arrow start *********/
	._slickPN{
		--padding:40%;
		margin-top:110%;
	}
	/******** arrow end *********/
	/*********************************** g4 end ***********************************************/
	
	/*********************************** g5 start ***********************************************/
	.g5{
		margin-top:15%;
	}

	.g5 ul{
		display: block;
	}
	.g5 li{
		width:auto;
	}
	.g5 li+li{
		margin-top:15%;
	}
	.g5 li:nth-child(2) em{
		top:auto;
	}
	.g5 li:nth-child(3) em{
		text-align: left;
	}
	.g5 li p{
		margin-top:0.8em;
	}
	/*********************************** g5 end ***********************************************/
	
}