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

.themeEventContainer{
	--color:#333;
	--theme-color:#000;
	color:var(--color);
	font-family:'Noto Serif TC';
	font-size:clamp(8px, 1.08vw, 0.92em);
}

.themeEventContainer a:hover{
	color:var(--theme-color);
}

/******************************** kvBlock start *****************************************/
.kvBlock{
	position: relative;
	aspect-ratio:2.18;
}

.kvBlock .bg{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	height:100%;
}
.kvBlock .bg img{
	display: block;
	object-fit: cover;
	width:20%;
	height:33.33%;
}

.kvBlock hgroup{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color:var(--theme-color);
	text-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.25);
}
.kvBlock hgroup h2{
	font-size: 2.5em;
	font-weight: 600;
}
.kvBlock hgroup h3{
	font-size: 2em;
	font-weight: 600;
	margin-top:1.2em;
	letter-spacing: 0.18em;
}
/******************************** kvBlock end *****************************************/

/******************************** mainBlock start *****************************************/
.mainBlock{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top:5%;
}

/*************** major start ******************/
.major{
	width:90%;
}

.major .tabCT{
	justify-content: space-between;
	align-items: flex-start;
	display: none;
}
.major .tabCT.active{
	display: flex;
}

/******* img start ********/
.major .img{
	width:48%;
}

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

.major .img .slick .slick-dots li {
	width: 8px;
	height: 8px;
}
.major .img .slick .slick-dots li button {
	padding: 0;
	background: #999;
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
}
.major .img .slick .slick-dots li button:hover,
.major .img .slick .slick-dots li button:focus,
.major .img .slick .slick-dots li.slick-active button {
	background: #FFF;
}

.major .img h4{
	text-align: center;
	font-size: 1em;
	font-weight: 600;
	margin-top:0.5em;
	opacity: 0;
	transition: opacity 0.5s;
}
.major .img h4.done{
	opacity:1;
}
/******* img end *******/

/******* txt start ********/
.major .txt{
	width:45%;
	margin-top:3em;
}

.major .txt a{
	width:45%;
	margin:0 auto;
	display: block;
}
.major .txt a img{
	width:100%;
	display: block;
	border-radius:50%;
	transition: filter 0.5s;
}
.major .txt a:hover img{
	filter: contrast(120%);
}
.major .txt a h3{
	margin-top:0.5em;
	text-align: center;
}

.major .txt .info{
	margin-top:2em;
}
.major .txt .info p{
	margin:0;
	line-height: 1.8em;
	text-align:justify;
}
.major .txt .info *+p{
	margin-top:2em;
}
/******* txt end *******/
/*************** major end ******************/

/*************** tab start ******************/
.tab{
	width:100%;
	display: flex;
	justify-content: center;
	font-size: 1.2em;
	font-weight: 600;
	line-height: 1em;
	margin-top:5%;
	padding:1em 0;
	border:1px solid var(--theme-color);
	border-left:none;
	border-right:none;
	color:#666;
}
.tab li{
	cursor:pointer;
	transition: color 0.2s;
}
.tab li+li{
	margin-left:4em;
}
.tab li:hover,
.tab li.active{
	color:var(--theme-color);
	font-weight: 700;
}
/*************** tab end ******************/

/*************** recommend end ******************/
.recommend{
	width:90%;
	margin-top:2.5%;
}

.recommend .tabCT{
	flex-wrap: wrap;
	display: none;
}
.recommend .tabCT.active{
	display: flex;
}

.recommend .tabCT .group{
	width:100%;
	padding:5%;
	border-bottom:1px solid #999;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.recommend .tabCT .group.col{
	width:50%;
	display: block;
}
.recommend .tabCT .group.col.L{
	padding-right:2.5%;
}
.recommend .tabCT .group.col.R{
	padding-left:2.5%;
}

.recommend .tabCT .group h4{
	width:25%;
	margin-left:5%;
	font-size: 1.25em;
	font-weight: 600;
	color:var(--theme-color);
}
.recommend .tabCT .group.col h4{
	width:auto;
	text-align: center;
	margin-left:0;
}
.recommend .tabCT .group h4 *{
	display: block;
}
.recommend .tabCT .group.col h4 *{
	display: inline;
}
.recommend .tabCT .group h4 strong{
	font-size: 1.1em;
	font-weight: inherit;
}
.recommend .tabCT .group h4 em{
	font-style: normal;
}

.recommend .tabCT .group p{
	width:67%;
	text-align: justify;
	line-height: 2em;
	margin:0;
}
.recommend .tabCT .group.col p{
	width:auto;
	margin-top:1.5em;
}

.recommend .tabCT .group ul{
	width:100%;
	margin-top:2em;
	display: flex;
	justify-content: space-between;
	text-align: center;
}

.recommend .tabCT .group li{
	width:22%;
}
.recommend .tabCT .group.col li{
	width:46.5%;
}

.recommend .tabCT .group li a{
	display: block;
}

.recommend .tabCT .group li .imgWrapper{
	overflow: hidden;
}
.recommend .tabCT .group li img{
	display: block;
	width:100%;
	transition: scale 0.5s;
}
.recommend .tabCT .group li a:hover img{
	scale:1.05;
}
.recommend .tabCT .group li em{
	font-style: normal;
	display: block;
	margin-top: 0.5em;
	line-height: 1.6em;
}
/*************** recommend end ******************/
/******************************** mainBlock end *****************************************/


@media screen and (max-width:1023px){
	
	.mainContainer > section.themeEventContainer{
		margin-top:10%;
		font-size:clamp(8px, 3.2vw, 1.5em);
	}
	
	/******************************** kvBlock start *****************************************/
	.kvBlock{
		aspect-ratio:0.62;
	}

	.kvBlock .bg img{
		width:33.33%;
		height:20%;
	}

	.kvBlock hgroup{
		font-size: 0.72em;
	}
	/******************************** kvBlock end *****************************************/
	
	/******************************** mainBlock start *****************************************/
	.mainBlock{
		margin-top:10%;
	}

	/*************** major start ******************/
	.major .tabCT{
		flex-direction: column;
		align-items: stretch;
		display: none;
	}

	/******* img start ********/
	.major .img{
		width:auto;
		order:1;
		margin-top:2em;
	}
	/******* img end *******/

	/******* txt start ********/
	.major .txt{
		width:auto;
		margin-top:0;
		font-size: 1.1em;
	}

	.major .txt a{
		width:50%;
	}
	
	.major .txt .info,
	.major .txt .info *+p{
		margin-top:1.5em;
	}
	/******* txt end *******/
	/*************** major end ******************/

	/*************** tab start ******************/
	.tab{
		position: sticky;
		bottom:5.5em;
		order:1;
		background: #FFF;
		margin-top: 0;
		z-index: 1;
	}
	.tab li+li{
		margin-left:1.8em;
	}
	/*************** tab end ******************/

	/*************** recommend end ******************/
	.recommend .tabCT.active{
		display: block;
	}

	.recommend .tabCT .group{
		width:auto;
		padding:7.5% 0;
		display: block;
	}
	.recommend .tabCT .group:last-child{
		border:none;
	}
	.recommend .tabCT .group.col{
		width:auto;
	}
	.recommend .tabCT .group.col.L{
		padding-right:0;
	}
	.recommend .tabCT .group.col.R{
		padding-left:0;
	}

	.recommend .tabCT .group h4{
		width:auto;
		text-align: center;
		margin-left:0;
	}
	.recommend .tabCT .group h4 *{
		display: inline;
	}

	.recommend .tabCT .group p{
		width:auto;
		margin-top:1.5em;
		font-size: 1.1em;
	}

	.recommend .tabCT .group ul{
		width:auto;
		flex-wrap: wrap;
		margin-top:1em;
	}

	.recommend .tabCT .group li,
	.recommend .tabCT .group.col li{
		width:48%;
	}
	.recommend .tabCT .group li:nth-child(n+3){
		margin-top:1.5em;
	}
	/*************** recommend end ******************/
	/******************************** mainBlock end *****************************************/
	
}