@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500&family=Noto+Sans+TC:wght@300&family=Zen+Kaku+Gothic+New&family=Special+Elite&display=swap');

.themeEventContainer{
	--color:#000;
	--theme-color:#443713;
	--bg:#f5f4ef;
	color:var(--color);
	background: var(--bg);
	font-family:'Noto Serif TC';
	font-size:clamp(8px, 1vw, 0.85em);
}

/******************************** kvBlock start *****************************************/
.kvBlock{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding:5% 2.5% 2.5%;
	overflow: hidden;
}

.kvBlock h2{
	font-family: 'Special Elite';
	font-size: 7em;
	font-weight: normal;
}

.kvBlock > p{
	font-family: 'Noto Sans TC';
	font-size: 2.1em;
	font-weight: 300;
	margin:0.3em 0 0;
}

.kvBlock ul{
	font-family: 'Zen Kaku Gothic New';
	font-size: 1.5em;
	line-height: 1em;
	margin:0.8em 0 0;
	display: flex;
	justify-content: center;
	list-style: none;
}
.kvBlock li{
	border-left:1px solid;
	padding-left:0.8em;
}
.kvBlock li+li{
	margin-left:0.8em;
}
.kvBlock li:last-child{
	border-right:1px solid;
	padding-right:0.8em;
}

.kvBlock img{
	width:9%;
	display: block;
	margin-top:3em;
}

.kvBlock .ticket{
	color:#573a18;
	font-size: 1.15em;
	border:1px solid #b0a493;
	padding:1em 1.5em 1.5em;
	margin-top:2em;
	width:45%;
}
.kvBlock .ticket h3{
	font-family: 'Noto Sans TC';
	font-size: 1.4em;
}
.kvBlock .ticket p{
	margin:1em 0 0;
}
/******************************** kvBlock end *****************************************/

/******************************** mainBlock start *****************************************/
.mainBlock{
	padding:2.5% 7%;
}

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

/******* img start ********/
.mainBlock .img{
	position: relative;
	width:45%;
}

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

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

/******* txt start ********/
.mainBlock .txt{
	width:48%;
	font-size: 1.1em;
}

/** info start **/
.mainBlock .info{
	padding-top:1.5%;
}

.mainBlock .info h3{
	font-size: 1.8em;
	font-weight:500;
	line-height: 1em;
	display: flex;
	align-items: center;
	color:var(--theme-color);
}
.mainBlock .info h3 a{
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	width:0.7em;
	aspect-ratio:0.8;
	background: url(../images/marker.svg) no-repeat center/100%;
	transition: transform 0.2s;
	transform-origin: center bottom;
	margin-left:0.5em;
}
.mainBlock .info h3 a:hover{
	transform:scale(1.2);
}

.mainBlock .info p{
	line-height: 2em;
	margin:2em 0 0;
	font-size: 1.05em;
	text-align: justify;
}
/** info end **/
/******* txt end *******/
/*************** tabCT end ******************/

/*************** tab start ******************/
.mainBlock .tab{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top:4.08%;
}
.mainBlock .tab li{
	--c:#8c8978;
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1em;
	color:var(--c);
	border-left:1px solid var(--c);
	padding-left:1em;
	cursor:pointer;
	transition: color 0.2s;
}
.mainBlock .tab li+li{
	margin-left:1em;
}
.mainBlock .tab li:last-child{
	border-right:1px solid var(--c);
	padding-right:1em;
}
.mainBlock .tab li:hover,
.mainBlock .tab li.active{
	color:var(--theme-color);
}
/*************** tab end ******************/
/******************************** mainBlock end *****************************************/

/******************************** 推薦商品 start *****************************************/
.recommend{
	padding:2% 0 4%;
}

.recommend h3{
	display: flex;
	justify-content: center;
	align-items: center;
	color:var(--theme-color);
	font-size: 1.8em;
	font-weight:500;
	line-height: 1em;
}
.recommend h3:before,
.recommend h3:after{
	content:"";
	display: block;
	width:0.9em;
	height:1px;
	background: currentColor;
}
.recommend h3:before{
	margin-right:0.5em;
}
.recommend h3:after{
	margin-left:0.5em;
}

.recommend .tabCTWrapper{
	margin:2.5% auto 0;
	width:85%;
}
.recommend .tabCT{
	display: none;
}
.recommend .tabCT.active{
	display: block;
}

.recommend a{
	display: block;
	color:var(--color);
	transition: color 0.2s;
}
.recommend a:hover{
	color:var(--theme-color);
}
.recommend .imgWrapper{
	margin:0 5%;
	overflow: hidden;
}
.recommend img{
	display: block;
	width:100%;
	transition: scale 0.5s;
}
.recommend a:hover img{
	scale:1.05;
}
.recommend li em{
	display: block;
	font-style: normal;
	text-align: center;
	margin:1.2em 10% 0;
}

._slickPN {
	position: absolute;
	top: 50%;
	width: 3em;
	aspect-ratio:1;
	cursor: pointer;
	text-indent: -9999px;
	white-space: nowrap;
	overflow: hidden;
	z-index: 1;
}
._slickPN.prev {
	left: 0;
	transform: translate(-60%, -50%) scaleX(-1);
}
._slickPN.next {
	right: 0;
	transform: translate(60%, -50%);
}
._slickPN:before{
	position: absolute;
	content: "";
	left: 40%;
	top:50%;
	width: 35%;
	height: 35%;
	border:1px solid currentColor;
	border-top:none;
	border-left:none;
	transform: translate(-50%, -50%) rotate(-45deg);
	transition: all 0.2s;
}
._slickPN:hover:before{
	color:#999;
	transform: translate(-30%, -50%) rotate(-45deg);
}
/******************************** 推薦商品 end *****************************************/


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

	.kvBlock h2{
		font-size: 4.6em;
	}

	.kvBlock > p{
		font-size: 1.5em;
	}

	.kvBlock ul{
		font-size: 1.3em;
	}

	.kvBlock img{
		width:20%;
	}

	.kvBlock .ticket{
		font-size: 0.89em;
		width:100%;
	}
	/******************************** kvBlock end *****************************************/
	
	/******************************** mainBlock start *****************************************/
	.mainBlock{
		padding:10% 5% 0;
	}

	/*************** tabCT start ******************/
	.mainBlock .tabCT.active{
		display: block;
	}

	/******* img start ********/
	.mainBlock .img{
		width:auto;
	}
	/******* img end *******/

	/******* txt start ********/
	.mainBlock .txt{
		margin-top:8%;
		width:auto;
	}

	/** info start **/
	.mainBlock .info{
		padding:0;
	}
	
	.mainBlock .info h3{
		font-size: 1.68em;
	}
	/** info end **/
	/******* txt end *******/
	/*************** tabCT end ******************/

	/*************** tab start ******************/
	.mainBlock .tab{
		position: sticky;
		left:0;
		bottom:0;
		margin-top:0;
		padding:10% 0 20%;
		width:100%;
		background: var(--bg);
	}
	.mainBlock .tab li{
		padding-left:0.5em;
		margin-bottom:1em;
	}
	.mainBlock .tab li+li{
		margin-left:0.5em;
	}
	.mainBlock .tab li:last-child{
		padding-right:0.5em;
	}
	/*************** tab end ******************/
	/******************************** mainBlock end *****************************************/
	
	/******************************** 推薦商品 start *****************************************/
	.recommend{
		font-size:1.2em;
		padding:0 0 10%;
	}

	.recommend h3{
		font-size: 1.5em;
	}

	.recommend .tabCTWrapper{
		margin-top:8%;
	}
	
	.recommend .imgWrapper{
		margin:0;
	}
	
	.recommend li em{
		font-size: 0.85em;
	}

	._slickPN {
		width: 2em;
	}
	/******************************** 推薦商品 end *****************************************/
	
}