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

.themeImage .tabBtn{
	display: none;
}

.themeEventContainer{
	font-family:'Noto Sans TC';
	font-size:clamp(8px, 1.16vw, 14px);
	margin-top:5%;
}

/******************************** tab start *****************************************/
.tab{
	position: relative;
	--c1: #e5be53;
	--c2: #83a3b6;
	--c3: #f6c7d4;
	color:#000;
	font-family:'Noto Serif TC';
	font-size:1.2em;
	font-weight:900;
	text-align: center;
	display: flex;
	justify-content: space-between;
	border-bottom:0.38em solid;
	filter:drop-shadow(0 0.1em 0.05em rgba(0, 0, 0, 0.2));
	z-index: 1;
}
.tab:has(li.active:nth-child(1)){ border-color:var(--c1);}
.tab:has(li.active:nth-child(2)){ border-color:var(--c2);}
.tab:has(li.active:nth-child(3)){ border-color:var(--c3);}

.tab li{
	width:33%;
	height:2.5em;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius:0.5em;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.tab li:nth-child(1){ background: var(--c1);}
.tab li:nth-child(2){ background: var(--c2);}
.tab li:nth-child(3){ background: var(--c3);}
/******************************** tab end *****************************************/

/******************************** tabCTWrapper start *****************************************/
.tabCTWrapper{
	padding:2.08% 7.5%;
	background: #dddcd0;
	border-radius:0.65em;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

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

/*************** img start ******************/
.tabCTWrapper .tabCT .imgWrapper{
	width:44.11%;
}

.tabCTWrapper .tabCT .img{
	padding:10% 11.55% 0;
	aspect-ratio:1;
	background: url(../images/imgBdr.png) no-repeat center/100%;
}

.tabCTWrapper .tabCT .img .slick-list{
	border-radius:0.75em;
}
.tabCTWrapper .tabCT .img .slick img{
	display: block;
	width:100%;
}
/*************** img end ******************/

/*************** txt start ******************/
.tabCTWrapper .tabCT .txt{
	width:49.01%;
	margin-top:3em;
	color:#333;
}

.tabCTWrapper .tabCT .txt h3{
	text-align: center;
	color:#000;
	font-size: 1.85em;
	font-weight:700;
}

.tabCTWrapper .tabCT .txt p{
	margin-top:2em;
	line-height: 1.8em;
	text-align: justify;
}

.tabCTWrapper .tabCT .recommend{
	margin:2em auto 0;
	width:90%;
}
.tabCTWrapper .tabCT .recommend a{
	display: block;
	padding:5%;
}
.tabCTWrapper .tabCT .recommend a img{
	display: block;
	width:100%;
	transition:transform 0.2s;
}
.tabCTWrapper .tabCT .recommend a:hover img{
	transform:scale(1.1);
}
.tabCTWrapper .tabCT .recommend ._slickPN{
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	width:5%;
	aspect-ratio:0.66;
	cursor:pointer;
	overflow:hidden;
	font-size: 0;
}
.tabCTWrapper .tabCT .recommend ._slickPN.prev{
	right:100%;
}
.tabCTWrapper .tabCT .recommend ._slickPN.next{
	left:100%;
	transform: scaleX(-1) translateY(-50%);
}
.tabCTWrapper .tabCT .recommend ._slickPN span{
	display: block;
	height:100%;
	background: url(../images/arrow.png) no-repeat center/100%;
	transition: transform 0.2s;
}
.tabCTWrapper .tabCT .recommend ._slickPN:hover span{
	transform:translateX(-10%);
}
/*************** txt end ******************/
/******************************** tabCTWrapper end *****************************************/


@media screen and (max-width:1023px){
	
	.themeImage .tabBlock .tabCT > section > h3{
		display: none;
	}
	
	.mainContainer > section.themeEventContainer{
		margin:10% auto 0;
		width:95%;
		font-size:1em;
	}
	
	/******************************** tab start *****************************************/
	.tab{
		position: sticky;
		top:47px;
		background: #FFF;
		font-size:1em;
	}

	.tab li{
		--side:0.8em;
		line-height: 1.2em;
		height:3.6em;
		padding-left:var(--side);
		padding-right:var(--side);
	}
	/******************************** tab end *****************************************/

	/******************************** tabCTWrapper start *****************************************/
	.tabCTWrapper{
		padding:8% 5%;
	}

	.tabCTWrapper .tabCT.active{
		display: block;
	}

	/*************** img start ******************/
	.tabCTWrapper .tabCT .imgWrapper{
		width:auto;
	}
	/*************** img end ******************/

	/*************** txt start ******************/
	.tabCTWrapper .tabCT .txt{
		width:auto;
		margin-top:1.5em;
	}

	.tabCTWrapper .tabCT .txt h3{
		font-size: 1.5em;
	}

	.tabCTWrapper .tabCT .txt p{
		margin-top:1.5em;
	}
	/*************** txt end ******************/
	/******************************** tabCTWrapper end *****************************************/
	
}