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

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

/**************************** kvBlock start *********************************/
.kvBlock{
	position: relative;
	aspect-ratio:2.18;
	overflow: hidden;
	background: #f15f2e;
}

.kvBlock h2{
	position: absolute;
	left:0;
	bottom:0;
	margin: 0 0 1% 1%;
	width: 29%;
	aspect-ratio:1.38;
	font-size: 0;
	background: url(../images/kvTitle.png) no-repeat center/100%;
	z-index: 1;
}

.kvBlock h3{
	position: absolute;
	left:50%;
	top:0;
	margin-top:2%;
	width:31.16%;
	aspect-ratio:0.92;
	transform: translateX(-50%);
	font-size: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.kvBlock h3 img{
	display: block;
	width:92.51%;
}
.kvBlock h3 strong{
	display: block;
	width:100%;
	aspect-ratio:11.6875;
	background: url(../images/kvArtekMarimekko.png) no-repeat center/100%;
}

.kvBlock .objWrapper{
	position: relative;
	height:100%;
}
.kvBlock .obj{
	position: absolute;
	left:0;
	top:0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}
.kvBlock .obj:nth-child(1){width: 15%;aspect-ratio:1.3;background-image: url(../images/kvObj1.png);margin: -1% 0 0 -5%;}
.kvBlock .obj:nth-child(2){width: 5%;aspect-ratio:0.4;background-image: url(../images/kvObj2.png);margin: 0% 0 0 16%;}
.kvBlock .obj:nth-child(3){width: 14%;aspect-ratio:1.08;background-image: url(../images/kvObj3.png);margin: -8% 0 0 22%;}
.kvBlock .obj:nth-child(4){width: 5%;aspect-ratio:0.98;background-image: url(../images/kvObj4.png);margin: 6% 0 0 31%;}
.kvBlock .obj:nth-child(5){width: 9%;aspect-ratio:1.3;background-image: url(../images/kvObj5.png);margin: 14% 0 0 -3%;}
.kvBlock .obj:nth-child(6){width: 6%;aspect-ratio:0.53;background-image: url(../images/kvObj6.png);margin: 13% 0 0 10%;}
.kvBlock .obj:nth-child(7){width: 11%;aspect-ratio:0.51;background-image: url(../images/kvObj7.png);margin: 6% 0 0 21%;}
.kvBlock .obj:nth-child(8){width: 10%;aspect-ratio:1.39;background-image: url(../images/kvObj8.png);margin: 27% 0 0 21%;}
.kvBlock .obj:nth-child(9){width: 9%;aspect-ratio:0.4;background-image: url(../images/kvObj9.png);margin: 26% 0 0 -2%;}
.kvBlock .obj:nth-child(10){width: 9%;aspect-ratio:0.61;background-image: url(../images/kvObj10.png);margin: 36% 0 0 5%;}
.kvBlock .obj:nth-child(11){width: 7%;aspect-ratio:1.04;background-image: url(../images/kvObj11.png);margin: 40% 0 0 33%;}
.kvBlock .obj:nth-child(12){width: 11%;aspect-ratio:1.16;background-image: url(../images/kvObj12.png);margin: 40% 0 0 43%;}
.kvBlock .obj:nth-child(13){width: 12%;aspect-ratio:1.02;background-image: url(../images/kvObj13.png);margin: -1% 0 0 66%;}
.kvBlock .obj:nth-child(14){width: 6.5%;aspect-ratio:0.66;background-image: url(../images/kvObj14.png);margin: 2% 0 0 81%;}
.kvBlock .obj:nth-child(15){width: 11.5%;aspect-ratio:1.02;background-image: url(../images/kvObj15.png);margin: 2% 0 0 89%;}
.kvBlock .obj:nth-child(16){width: 12%;aspect-ratio:0.8;background-image: url(../images/kvObj16.png);margin: 13% 0 0 69%;}
.kvBlock .obj:nth-child(17){width: 9%;aspect-ratio:1.81;background-image: url(../images/kvObj17.png);margin: 34% 0 0 67%;}
.kvBlock .obj:nth-child(18){width: 9%;aspect-ratio:1.12;background-image: url(../images/kvObj18.png);margin: 41% 0 0 65%;}
.kvBlock .obj:nth-child(19){width: 9%;aspect-ratio:0.74;background-image: url(../images/kvObj19.png);margin: 37% 0 0 75%;}
.kvBlock .obj:nth-child(20){width: 24%;aspect-ratio:0.79;background-image: url(../images/kvObj20.png);margin: 17% 0 0 82%;}
.kvBlock .obj:nth-child(21){width: 7%;aspect-ratio:0.73;background-image: url(../images/kvObj21.png);margin: 41% 0 0 87%;}
.kvBlock .obj:nth-child(22){width: 4%;aspect-ratio:0.53;background-image: url(../images/kvObj22.png);margin: 5% 0 0 10%;}
.kvBlock .obj:nth-child(23){width: 3%;aspect-ratio:0.84;background-image: url(../images/kvObj23.png);margin: 34% 0 0 27%;}
.kvBlock .obj:nth-child(24){width: 13%;aspect-ratio:1;background-image: url(../images/kvObj24.png);margin: 41% 0 0 13%;}
.kvBlock .obj:nth-child(25){width: 7%;aspect-ratio:1.04;background-image: url(../images/kvObj25.png);margin: 39% 0 0 56%;}
.kvBlock .obj:nth-child(26){width: 4%;aspect-ratio:0.84;background-image: url(../images/kvObj26.png);margin: 13% 0 0 84%;}
.kvBlock .obj:nth-child(27){width: 2.8%;aspect-ratio:0.53;background-image: url(../images/kvObj27.png);margin: 27.5% 0 0 76%;}
/**************************** kvBlock end *********************************/

/*********************************** aboutBlock start ***********************************************/
.aboutBlock{
	display: flex;
	flex-direction: column;
	align-items: center;
	width:100%;
	max-width:1200px;
	text-align: center;
	padding:5% 2em 1.2%;
}

.aboutBlock h2{
	font-size: 2.5em;
	font-family: 'Dancing Script';
	font-weight: 400;
}

.aboutBlock p{
	width:30em;
	font-size: 1.1em;
	line-height: 1.8em;
	margin:1.5em 0 0;
}
/*********************************** aboutBlock end ***********************************************/

/*********************************** productIntro start ***********************************************/
.productIntro{
	margin:5% auto 0;
	width:95%;
	overflow:hidden;
}

.productIntro > li{
	display: flex;
}
.productIntro > li+li{
	margin-top:4.5%;
}

.productIntro .img{
	width:50%;
}
.productIntro > li:nth-child(even) .img{
	order:1;
}
.productIntro .slick{
	margin:0;
}
.productIntro .img li{
	position: relative;
}
.productIntro img{
	display: block;
	width:100%;
}
.productIntro .img li em{
	position: absolute;
	right:0;
	bottom:0;
	max-width:100%;
	padding:0.5em 1em;
	font-style: normal;
	font-size: 0.7em;
	line-height: 1em;
	text-align: right;
	color:#FFF;
	background: rgba(0, 0, 0, 0.3);
}

.productIntro .slickPN{
	opacity: 0;
	transition: opacity 0.2s;
}
.productIntro .slick:hover .slickPN{
	opacity: 1;
}

.productIntro h4{
	text-align: center;
	font-size: 1em;
	font-weight: normal;
	margin-top:0.5em;
	opacity: 0;
	transition: opacity 0.5s;
}
.productIntro h4.done{
	opacity:1;
}

.productIntro li .txt{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width:50%;
	padding:0 5%;
}
.productIntro li .txt h3{
	text-align: center;
	font-size: 1.2em;
	color:var(--theme-color);
}
.productIntro li .txt p{
	margin: 1.2em 0 0;
	line-height: 1.8em;
	color:#666;
	text-align: justify;
}
/*********************************** productIntro end ***********************************************/

/*********************************** patternBlock start ***********************************************/
.patternBlock{
	margin:5% auto 0;
	width:90%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.patternBlock li{
	width:28%;
}

.patternBlock li img{
	display: block;
	width:75%;
	max-width:300px;
	margin:0 auto;
	animation-duration: 40s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.patternBlock li:nth-child(odd) img{ animation-name: r1;}
.patternBlock li:nth-child(even) img{ animation-name: r2;}
@keyframes r1{
	to{
		rotate: 360deg;
	}
}
@keyframes r2{
	to{
		rotate: -360deg;
	}
}

.patternBlock li h3{
	text-align: center;
	font-size: 1.2em;
	color:var(--theme-color);
	margin-top:0.5em;
}

.patternBlock li p{
	line-height: 1.8em;
	margin:1em 0 0;
	text-align: justify;
}
/*********************************** patternBlock end ***********************************************/


@media screen and (max-width:1023px){
	
	.themeEventContainer{
		font-size: 14px;
	}

	/**************************** kvBlock start *********************************/
	.kvBlock{
		aspect-ratio:0.62;
	}

	.kvBlock h2{
		margin: 0 0 2% 2%;
		width: 50%;
	}

	.kvBlock h3{
		margin-top:30%;
		width:60%;
	}

	.kvBlock .obj:nth-child(1){width: 25%;margin: -1% 0 0 -3%;}
	.kvBlock .obj:nth-child(2){width: 8%;margin: 10% 0 0 25%;}
	.kvBlock .obj:nth-child(3){width: 17%;margin: -7% 0 0 30%;}
	.kvBlock .obj:nth-child(4){width: 8%;margin: 13% 0 0 38%;}
	.kvBlock .obj:nth-child(5){width: 15%;margin: 23% 0 0 -4%;}
	.kvBlock .obj:nth-child(6){width: 9%;margin: 26% 0 0 13%;}
	.kvBlock .obj:nth-child(7){width: 24%;margin: 44% 0 0 -5%;}
	.kvBlock .obj:nth-child(8){width: 16%;margin: 112% 0 0 9%;}
	.kvBlock .obj:nth-child(9){width: 12%;margin: 133% 0 0 -1%;}
	.kvBlock .obj:nth-child(10){width: 8%;margin: 145% 0 0 13%;}
	.kvBlock .obj:nth-child(11){width: 10%;margin: 102% 0 0 25%;}
	.kvBlock .obj:nth-child(12){width: 13%;margin: 16% 0 0 51%;}
	.kvBlock .obj:nth-child(13){width: 18%;margin: -4% 0 0 56%;}
	.kvBlock .obj:nth-child(14){width: 13.5%;margin: 16% 0 0 67%;}
	.kvBlock .obj:nth-child(15){width: 26.5%;margin: -1% 0 0 82%;}
	.kvBlock .obj:nth-child(16){width: 25%;margin: 34% 0 0 84%;}
	.kvBlock .obj:nth-child(17){width: 21%;margin: 100% 0 0 -6%;}
	.kvBlock .obj:nth-child(18){width: 13%;margin: 75% 0 0 82%;}
	.kvBlock .obj:nth-child(19){width: 13%;margin: 86% 0 0 91%;}
	.kvBlock .obj:nth-child(20){width: 50%;margin: 100% 0 0 61%;}
	.kvBlock .obj:nth-child(21){width: 17%;margin: 121% 0 0 40%;}
	.kvBlock .obj:nth-child(22){width: 7%;margin: 113% 0 0 33%;}
	.kvBlock .obj:nth-child(23){width: 5%;margin: 109% 0 0 48%;}
	.kvBlock .obj:nth-child(24){width: 13%;margin: 152% 0 0 24%;}
	.kvBlock .obj:nth-child(25){width: 15%;mar;margin: 150% 0 0 54%;}
	.kvBlock .obj:nth-child(26){width: 10%;mar;margin: 150% 0 0 75%;}
	.kvBlock .obj:nth-child(27){width: 5.8%;margin: 104.5% 0 0 62%;}
	/**************************** kvBlock end *********************************/
	
	/*********************************** aboutBlock start ***********************************************/
	.aboutBlock{
		padding:12% 1em 8%;
	}

	.aboutBlock h2{
		font-size: 2.2em;
	}

	.aboutBlock p{
		width:auto;
		font-size: 0.95em;
	}
	/*********************************** aboutBlock end ***********************************************/
	
	/*********************************** productIntro start ***********************************************/
	.productIntro{
		width:auto;
	}

	.productIntro > li{
		display: block;
	}

	.productIntro .img{
		width:auto;
	}

	.productIntro li .txt{
		display: block;
		width:auto;
		padding:8% 5%;
	}
	/*********************************** productIntro end ***********************************************/
	
	/*********************************** patternBlock start ***********************************************/
	.patternBlock{
		margin-top:10%;
		display: block;
	}

	.patternBlock li{
		width:auto;
	}
	.patternBlock li+li{
		margin-top:5%;
	}

	.patternBlock li h3{
		margin-top:1em;
	}
	/*********************************** patternBlock end ***********************************************/
	
}