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

.kvContainer,
.midBlock,
.themeMain{
	display: none;
}

main{
	--kv-height:100vh;
}

/*********************************** bgKV start ***********************************************/
.bgKV{
	position: fixed;
	top:0;
	width:100%;
	height:var(--kv-height);
	z-index: 0;
}
.bgKV .slick-list,
.bgKV .slick-track,
.bgKV .img,
.bgKV img{
	height:100%;
}
.bgKV .img{
	margin-bottom: 0;
}
.bgKV img{
	display: block;
	object-fit: cover;
}
/*********************************** bgKV end ***********************************************/

/*********************************** home start ***********************************************/
.home{
	position: relative;
}

/********************* empty start *************************/
.home .empty{
	position: relative;
	height:var(--kv-height);
}

/********** scrollHint start ************/
.scrollHint{
	position:absolute;
	left:50%;
	bottom:0;
	margin-bottom:180px;
	width:1.38%;
	aspect-ratio:0.43;
	color:#FFF;
	transform:translateX(-50%);
	cursor:pointer;
	border:1px solid;
	border-radius:50% / 21.66%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.scrollHint:before{
	content:"";
	display: block;
	margin-top:30%;
	width:42%;
	aspect-ratio:1;
	background: currentColor;
	border-radius:50%;
	animation:scrollHint 0.5s ease-in infinite alternate;
}
@keyframes scrollHint{
	to{
		transform:translateY(100%);
	}
}
/********** scrollHint end ************/
/********************* empty end *************************/

.home .CT{
	font-family: 'League Spartan';
	font-size: 4.8vw;
}

.home .hgroupWrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	height:var(--kv-height);
}

.home h2,
.home h3{
	color:#FFF;
	line-height: 1.1em;
}
.home h2{
	font-size: 1.8em;
	font-weight: 700;
}
.home h3{
	font-size: 1em;
	font-weight: 600;
	margin-top:1.2em;
}
/*********************************** home end ***********************************************/

.mainContainer{
	position: relative;
	background: #FFF;
	max-width:none;
	padding-bottom: 5%;
}

.themeEventContainer,
.mainContainer > section:last-child{
	max-width: 1200px;
	margin-left:auto;
	margin-right:auto;
}

.themeEventContainer{
	--theme-color1:#BF3A21;
	--theme-color2:#004178;
	--theme-color3:#EAAF15;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: clamp(10px, 1.16vw, 14px);
	font-weight: 400;
	color:#000;
	padding:5% 5% 0;
	overflow: hidden;
}
.mainContainer > section.themeEventContainer{
	margin-top:0;
}

/*********************************** themeIntro start ***********************************************/
.themeIntro{
	width:70%;
	margin:0 auto;
}

.themeIntro > li{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.themeIntro > li+li{
	margin-top:10%;
}

.themeIntro .img{
	width:40%;
}
.themeIntro > li:nth-child(odd) .img{
	order:1;
}
.themeIntro .slick{
	margin:0;
}
.themeIntro .img li{
	position: relative;
}
.themeIntro img{
	display: block;
	width:100%;
}
.themeIntro .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);
}

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

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

.themeIntro li .txt{
	width:50%;
}
.themeIntro li .txt h3{
	font-size: 2em;
	font-weight: 600;
	line-height: 1em;
	color:#000;
}
.themeIntro li .txt h3 span{
	font-family: 'Montserrat Alternates';
	color:var(--theme-color1);
}
.themeIntro li .txt h3 em{
	font-style: normal;
	font-size: 0.69em;
}
.themeIntro li:nth-child(1) .txt h3 em{ color:var(--theme-color2);}
.themeIntro li:nth-child(2) .txt h3 em{ color:var(--theme-color3);}

.themeIntro li .txt p{
	margin: 1.3em 0 0;
	line-height: 1.82em;
	text-align: justify;
}
/*********************************** themeIntro end ***********************************************/

/*********************************** OBM start ***********************************************/
.OBM{
	width:70%;
	margin:10% auto 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.OBM img{
	width:28%;
	display: block;
}

.OBM .txt{
	width:65%;
}
.OBM .txt h3{
	font-size: 2em;
	font-weight: 600;
	line-height: 1em;
}
.OBM .txt h3 span:nth-child(1){color:var(--theme-color1);}
.OBM .txt h3 span:nth-child(2){color:var(--theme-color3);}
.OBM .txt h3 span:nth-child(3){color:var(--theme-color2);}
.OBM .txt h4{
	font-size: 1.1em;
	font-weight: 600;
	margin-top:1em;
}
.OBM .txt p{
	margin: 1.3em 0 0;
	line-height: 1.82em;
	text-align: justify;
}
/*********************************** OBM end ***********************************************/

/*********************************** productGroup start ***********************************************/
.productGroup{
	--size:1.5em;
	width:90%;
	margin:10% auto 0;
	border:1px solid;
	padding:var(--size);
}

.productGroup ul,
.productGroup li{
	border:1px solid;
}
.productGroup ul{
	border-right:none;
	border-bottom:none;
}
.productGroup li{
	position: relative;
	border-top:none;
	border-left:none;
	display: flex;
}

.productGroup .designer,
.productGroup .product,
.productGroup .img{
	width:33.3333%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.productGroup .product,
.productGroup .img{
	border-left:1px solid;
}

.productGroup .deco{
	height:var(--size);
}
.productGroup .deco._top{ border-bottom:1px solid;}
.productGroup .deco._btm{ border-top:1px solid;}
.productGroup .designer .deco._top,
.productGroup .img .deco._top,
.productGroup li:nth-child(4) .deco._btm{ opacity: 0;}

.productGroup .ctWrapper{
	display: block;
	padding:calc(var(--size) / 3) calc(var(--size) * 1.33) calc(var(--size) * 1.33);
}

.productGroup h4{
	font-size: 2em;
}
.productGroup li:nth-child(1) h4,
.productGroup li:nth-child(4) h4{ color:var(--theme-color1);}
.productGroup li:nth-child(2) h4{ color:var(--theme-color2);}
.productGroup li:nth-child(3) h4{ color:var(--theme-color3);}

.productGroup .ctWrapper img{
	display: block;
	width:100%;
	transition:scale 0.5s;
}

.productGroup a:hover{
	color:inherit;
}
.productGroup a:hover img{
	scale:1.05;
}

.productGroup p{
	position: relative;
	margin:1em 0 0;
	font-size: 0.9em;
	text-align: justify;
	line-height: 1.8em;
	z-index: 1;
}

/*************** 設計師 start ******************/
.productGroup .designer img{
	width:60%;
	margin:0 auto;
	border-radius:50%;
}
.productGroup .designer a strong{
	display: block;
	text-align: center;
	font-size: 1.3em;
	margin-top:0.5em;
}
.productGroup .designer p em{
	font-size: 1.1em;
	font-style: normal;
}
/*************** 設計師 end ******************/

/*************** Part1 start ******************/
.productGroup li:nth-child(1) .designer .deco._btm{	background: var(--theme-color2);}
.productGroup li:nth-child(1) .product .deco._top{	background: var(--theme-color1);}
.productGroup li:nth-child(1) .img .deco._btm:before{
	content:"";
	display: block;
	width:75%;
	height:100%;
	background: var(--theme-color3);
	border-right:1px solid;
}
/*************** Part1 end ******************/

/*************** Part2 start ******************/
.productGroup li:nth-child(2) .designer .deco._btm{
	display: flex;
	justify-content: flex-end;
}
.productGroup li:nth-child(2) .designer .deco._btm:before{	
	content:"";
	display: block;
	width:15%;
	height:100%;
	background: var(--theme-color1);
	border-left:1px solid;
}
.productGroup li:nth-child(2) .product .deco._top{	background: var(--theme-color1);}
.productGroup li:nth-child(2) .img .deco._btm:before{
	content:"";
	display: block;
	width:75%;
	height:100%;
	background: var(--theme-color2);
	border-right:1px solid;
}
/*************** Part2 end ******************/

/*************** Part3 start ******************/
.productGroup li:nth-child(3) .designer .deco._btm{	background: var(--theme-color2);}
.productGroup li:nth-child(3) .product .deco._top{	background: var(--theme-color3);}
.productGroup li:nth-child(3) .img .deco._btm:before{
	content:"";
	display: block;
	width:75%;
	height:100%;
	background: var(--theme-color3);
	border-right:1px solid;
}
/*************** Part3 end ******************/

/*************** Part4 start ******************/
.productGroup li:nth-child(4) .product .deco._top{	background: var(--theme-color1);}
.productGroup li:nth-child(4) .deco._btm{ display: none;}
/*************** Part4 end ******************/

/*************** 外框色塊 start ******************/
.productGroup .out{
	position: absolute;
}

/******* Part1 start ********/
.productGroup li:nth-child(1) .o1{
	right:100%;
	bottom:calc(100% + 1px);
	width:var(--size);
	height:var(--size);
	border-right:1px solid;
}
.productGroup li:nth-child(1) .o2{
	right:calc(66.6666% - 1px);
	bottom:calc(100% + 1px);
	width:5%;
	height:var(--size);
	border-left:1px solid;
	border-right:1px solid;
	background: var(--theme-color3);
}
.productGroup li:nth-child(1) .o3{
	left:100%;
	bottom:100%;
	width:calc(var(--size) + 1px);
	height:calc(var(--size) + 1px);
	border-left:1px solid;
	border-bottom:1px solid;
	background: var(--theme-color2);
}
.productGroup li:nth-child(1) .o4{
	right:calc(100% + 1px);
	top:-1px;
	width:var(--size);
	aspect-ratio:0.15;
	background:currentColor;
}
.productGroup li:nth-child(1) .o5{
	right:calc(100% + 1px);
	bottom:-1px;
	width:var(--size);
	height:calc(var(--size) + 1px);
	border-top:1px solid;
}
.productGroup li:nth-child(1) .o6{
	left:calc(100% + 1px);
	bottom:-1px;
	width:var(--size);
	height:calc(var(--size) + 1px);
	background: currentColor;
}
/******* Part1 end *********/

/******* Part2 start ********/
.productGroup li:nth-child(2) .o1{
	right:calc(100% + 1px);
	top:-1px;
	width:var(--size);
	aspect-ratio:0.15;
	background:currentColor;
}
.productGroup li:nth-child(2) .o2{
	right:calc(100% + 1px);
	bottom:-1px;
	width:var(--size);
	height:calc(var(--size) + 1px);
	border-top:1px solid;
}
.productGroup li:nth-child(2) .o3{
	left:calc(100% + 1px);
	bottom:-1px;
	width:var(--size);
	height:calc(var(--size) + 1px);
	background: currentColor;
}
/******* Part2 end *********/

/******* Part3 start ********/
.productGroup li:nth-child(3) .o1{
	right:calc(100% + 1px);
	top:-1px;
	width:var(--size);
	aspect-ratio:0.15;
	background:currentColor;
}
.productGroup li:nth-child(3) .o2{
	right:calc(100% + 1px);
	bottom:-1px;
	width:var(--size);
	height:calc(var(--size) + 1px);
	border-top:1px solid;
}
.productGroup li:nth-child(3) .o3{
	left:calc(100% + 1px);
	bottom:-1px;
	width:var(--size);
	height:calc(var(--size) + 1px);
	background: currentColor;
}
/******* Part3 end *********/

/******* Part4 start ********/
.productGroup li:nth-child(4) .o1{
	right:calc(100% + 1px);
	top:-1px;
	width:var(--size);
	aspect-ratio:0.15;
	background:currentColor;
}
.productGroup li:nth-child(4) .o2{
	left:calc(100% + 1px);
	bottom:-1px;
	width:var(--size);
	height:var(--size);
	background: currentColor;
}
.productGroup li:nth-child(4) .o3{
	right:100%;
	top:100%;
	width:calc(var(--size) + 1px);
	height:calc(var(--size) + 1px);
	border-top:1px solid;
	border-right:1px solid;
}
.productGroup li:nth-child(4) .o4{
	right:calc(66.6666% - 1px);
	top:calc(100% + 1px);
	width:5%;
	height:var(--size);
	border-left:1px solid;
	border-right:1px solid;
	background: var(--theme-color3);
}
.productGroup li:nth-child(4) .o5{
	left:66.6666%;
	top:calc(100% + 1px);
	width:25%;
	height:var(--size);
	border-left:1px solid;
	border-right:1px solid;
	background: var(--theme-color2);
}
.productGroup li:nth-child(4) .o6{
	left:100%;
	top:100%;
	width:var(--size);
	height:calc(var(--size) + 1px);
	border-left:1px solid;
}
/******* Part4 end *********/
/*************** 外框色塊 end ******************/
/*********************************** productGroup end ***********************************************/

/*********************************** footer start ***********************************************/
footer{
	position: relative;
	margin-top: 0;
	z-index: 1;
}
.copyright{
	background: #FFF;
}
/*********************************** footer end ***********************************************/


@media screen and (max-width:1023px){
	
	/*********************************** bgKV start ***********************************************/
	.bgKV img.kv3{
		object-position: 30%;
	}
	/*********************************** bgKV end ***********************************************/
	
	/*********************************** home start ***********************************************/
	.home .CT{
		font-size: 8vw;
	}
	
	.home .hgroupWrapper{
		padding:10%;
	}
	
	/********************* scrollHint start *************************/
	.scrollHint{
		width:6%;
		margin-bottom:140px;
	}
	/********************* scrollHint end *************************/
	/*********************************** home end ***********************************************/
	
	.themeEventContainer{
		font-size: clamp(8px, 3.68vw, 28px);
		padding-top:15%;
	}
	
	/*********************************** themeIntro start ***********************************************/
	.themeIntro{
		width:auto;
	}

	.themeIntro > li{
		display: block;
	}
	.themeIntro > li+li{
		margin-top:10%;
	}

	.themeIntro .img{
		width:auto;
	}

	.themeIntro li .txt{
		width:auto;
		margin-top:5%;
	}
	.themeIntro li .txt h3{
		font-size: 1.85em;
	}
	/*********************************** themeIntro end ***********************************************/
	
	/*********************************** OBM start ***********************************************/
	.OBM{
		width:auto;
		display: block;
	}

	.OBM img{
		width:55%;
		margin:0 auto;
	}

	.OBM .txt{
		width:auto;
		margin-top:10%;
	}
	.OBM .txt h3{
		font-size: 1.43em;
	}
	/*********************************** OBM end ***********************************************/
	
	/*********************************** productGroup start ***********************************************/
	.productGroup{
		--size:1em;
		width:auto;
	}

	.productGroup li{
		display: block;
	}

	.productGroup .designer,
	.productGroup .product,
	.productGroup .img{
		width:auto;
		display: block;
	}
	.productGroup .product,
	.productGroup .img{
		border-left:none;
		border-top:1px solid;
	}

	.productGroup .ctWrapper{
		padding-top:var(--size);
		padding-bottom:calc(var(--size) * 2);
	}

	.productGroup p{
		font-size: 1em;
	}
	
	/*************** Part1 start ******************/
	.productGroup li:nth-child(1) .designer .deco._btm{	display:none;}
	.productGroup li:nth-child(1) .product .deco._btm{	background: var(--theme-color2);}
	/*************** Part1 end ******************/

	/*************** Part2 start ******************/
	.productGroup li:nth-child(2) .designer .deco._btm{	display: none;}
	.productGroup li:nth-child(2) .product .deco._btm{	background: var(--theme-color2);}
	.productGroup li:nth-child(2) .img .deco._btm:before{ background: var(--theme-color3);}
	/*************** Part2 end ******************/

	/*************** Part3 start ******************/
	.productGroup li:nth-child(3) .designer .deco._btm{	display:none;}
	.productGroup li:nth-child(3) .product .deco._top{	background: var(--theme-color1);}
	.productGroup li:nth-child(3) .product .deco._btm{	background: var(--theme-color2);}
	/*************** Part3 end ******************/

	/*************** Part4 start ******************/
	.productGroup li:nth-child(4) .product .deco._btm{ 
		display: block;
		opacity: 1;
		background: var(--theme-color2);
	}
	/*************** Part4 end ******************/
	
	/*************** 外框色塊 start ******************/
	/******* Part1 start ********/
	.productGroup li:nth-child(1) .o2{
		right:66.6666%;
		width:33.3333%;
		border-left:none;
	}
	.productGroup li:nth-child(1) .o6{
		background: var(--theme-color2);
	}
	/******* Part1 end *********/

	/******* Part2 start ********/
	.productGroup li:nth-child(2) .o3{
		background: var(--theme-color2);
	}
	/******* Part2 end *********/

	/******* Part3 start ********/
	.productGroup li:nth-child(3) .o3{
		background: var(--theme-color2);
	}
	/******* Part3 end *********/

	/******* Part4 start ********/
	.productGroup li:nth-child(4) .o4{
		right:66.6666%;
		width:33.3333%;
		border-left:none;
	}
	.productGroup li:nth-child(4) .o5{
		background: var(--theme-color1);
	}
	/******* Part4 end *********/
	/*************** 外框色塊 end ******************/
	/*********************************** productGroup end ***********************************************/
	
}