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

.themeEventContainer{
	--color:#333;
	--theme-color:#300;
	color:var(--color);
	font-family:'Noto Sans TC';
	font-size:clamp(10px, 1.16vw, 14px);
}

/******************************** kvBlock start *****************************************/
.kvBlock{
	position: relative;
	aspect-ratio:2.1818;
	background: url(../images/bdrH.svg) repeat-x left top/auto 0.57em,
				url(../images/bdrH.svg) repeat-x left bottom/auto 0.57em,
				url(../images/bdrV.svg) repeat-y left top/0.57em auto,
				url(../images/bdrV.svg) repeat-y right top/0.57em auto,
				url(../images/kvBg.jpg) no-repeat center/cover;
	overflow: hidden;
}

/*************** title start *******************/
.kvBlock h2{
	position: absolute;
	left:0;
	top:0;
	margin:35.33% 0 0 39.5%;
	width:37.5%;
	aspect-ratio:4.5;
	font-size: 0;
	z-index: 1;
}
.kvBlock h2 em{
	position: absolute;
	left:0;
	top:0;
	display: block;
	margin:-15.11% 0 0 -15.11%;
	width:41.33%;
	aspect-ratio:2.26;
}
.kvBlock h2 em:before{
	content:"";
	display: block;
	height:100%;
	background: url(../images/kvTitleTag.png) no-repeat center/100%;
	animation:kvTitleTag 1s ease-in-out alternate infinite;
}
@keyframes kvTitleTag{
	from{
		translate:0 -10%;
	}
}
.kvBlock h2 strong{
	display: block;
	height:100%;
	background: url(../images/kvTitle.png) no-repeat center/100%;
}
/*************** title end *******************/

/*************** objWrapper start *******************/
.objWrapper,
.objWrapper .obj{
	position: absolute;
	left:0;
	top:0;
}
.objWrapper{
	height:100%;
	aspect-ratio:2.1818;
}
.objWrapper .obj{
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}
.objWrapper .o1{width:9.16%; aspect-ratio:1.57; margin: 11% 0 0 10%; background-image: url(../images/kvObj1.png);}
.objWrapper .o2{width:6.5%; aspect-ratio:1.11; margin: 27% 0 0 20%; background-image: url(../images/kvObj2.png);}
.objWrapper .o3{width:7.83%; aspect-ratio:1.88; margin: 18% 0 0 24%; background-image: url(../images/kvObj3.png);}
.objWrapper .o4{width:9.5%; aspect-ratio:1.21; margin: 15% 0 0 43%; background-image: url(../images/kvObj4.png);}
.objWrapper .o5{width:5.83%; aspect-ratio:1.34; margin: 8% 0 0 50%; background-image: url(../images/kvObj5.png);}
.objWrapper .o6{width:7.16%; aspect-ratio:1.48; margin: 22% 0 0 49%; background-image: url(../images/kvObj6.png);}
.objWrapper .o7{width:7.16%; aspect-ratio:1.19; margin: 13% 0 0 57%; background-image: url(../images/kvObj7.png);}
.objWrapper .o8{width:7.33%; aspect-ratio:1.25; margin: 7% 0 0 61%; background-image: url(../images/kvObj8.png);}
.objWrapper .o9{width:8.83%; aspect-ratio:1.51; margin: 13% 0 0 66%; background-image: url(../images/kvObj9.png);}
.objWrapper .o10{width:6.83%; aspect-ratio:1.46; margin: 8% 0 0 73%; background-image: url(../images/kvObj10.png);}
.objWrapper .o11{width:6.5%; aspect-ratio:0.81; margin: 34.5% 0 0 85%; background-image: url(../images/kvObj11.png);}
/*************** objWrapper end *******************/
/******************************** kvBlock end *****************************************/

/******************************** mainBlock start *****************************************/
.mainBlock{
	padding:5% 6.5%;
	background: url(../images/bdrH.svg) repeat-x left bottom/auto 0.57em,
				url(../images/bdrV.svg) repeat-y left top/0.57em auto,
				url(../images/bdrV.svg) repeat-y right top/0.57em auto,
				url(../images/mainBg.jpg) repeat left top/3.57em;
}

/*************** 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:8%;
}

.mainBlock .info h3{
	font-size: 2.2em;
	font-weight:500;
	line-height: 1em;
	display: flex;
	align-items: center;
	color:var(--theme-color);
}
.mainBlock .info h3 strong{
	font-size: 1.25em;
	font-family: 'Amatic SC';
	margin-right:0.25em;
}

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

/** product start **/
.mainBlock .txt ul{
	margin-top:2em;
	display: flex;
	align-items: flex-start;
}
.mainBlock .txt li{
	width:30%;
}
.mainBlock .txt li+li{
	margin-left:5%;
}
.mainBlock .txt li a{
	display: block;
}
.mainBlock .txt li img{
	display: block;
	width:100%;
	transition: scale 0.5s;
}
.mainBlock .txt li a:hover img{
	scale:1.1;
}
.mainBlock .txt li em{
	display: block;
	font-size: 0.9em;
	font-style: normal;
	text-align: center;
	margin-top:0.5em;
	transition: color 0.2s;
}
.mainBlock .txt li a:hover em{
	color:var(--theme-color);
}
/** product 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:#735f44;
	font-size: 1.1em;
	line-height: 1em;
	color:var(--c);
	cursor:pointer;
	transition: color 0.2s;
}
.mainBlock .tab li+li{
	margin-left:2em;
}
.mainBlock .tab li:hover,
.mainBlock .tab li.active{
	color:var(--theme-color);
	font-weight: bold;
}
/*************** tab end ******************/
/******************************** mainBlock end *****************************************/


@media screen and (max-width:1023px){
	
	.mainContainer > section.themeEventContainer{
		margin-top:10%;
		font-size:clamp(8px, 3vw, 1.5em);
	}
	
	/******************************** kvBlock start *****************************************/
	.kvBlock{
		aspect-ratio:0.62;
		background: url(../images/bdrH.svg) repeat-x left top/auto 0.57em,
					url(../images/bdrH.svg) repeat-x left bottom/auto 0.57em,
					url(../images/bdrV.svg) repeat-y left top/0.57em auto,
					url(../images/bdrV.svg) repeat-y right top/0.57em auto,
					url(../images/kvBg.jpg) no-repeat center/auto 110%;
	}

	/*************** title start *******************/
	.kvBlock h2{
		margin: 112% 0 0 5%;
        width: 90%;
	}
	.kvBlock h2 em{
		margin:-17% 0 0 -1%;
	}
	/*************** title end *******************/

	/*************** objWrapper start *******************/
	.objWrapper{
		left:50%;
		translate:-50% 0;
		scale:1.05;
	}
	.objWrapper .o8{margin: 6% 0 0 57%;}
	/*************** objWrapper end *******************/
	/******************************** 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: 2em;
	}
	/** info end **/
	/******* txt end *******/
	/*************** tabCT end ******************/

	/*************** tab start ******************/
	.mainBlock .tab{
		position: sticky;
		bottom:0;
		margin-top:0;
		padding:10% 0 20%;
		background: url(../images/bdrH.svg) repeat-x left bottom/auto 0.57em,
					url(../images/mainBg.jpg) repeat 0.2em top/3.57em;
	}
	.mainBlock .tab li{
		font-size: 1.35em;
		margin-bottom:1em;
	}
	.mainBlock .tab li+li{
		margin-left:1em;
	}
	.mainBlock .tab li:nth-child(5){
		margin-left:0;
	}
	/*************** tab end ******************/
	/******************************** mainBlock end *****************************************/
	
}