@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600&family=Cinzel:wght@500&family=EB+Garamond:wght@500&display=swap');

body{
	--bg:#CCCCCD;
	background: var(--bg);
}

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

footer{
	background: #FFF;
}

.themeEventContainer{
	--theme-color:#7f5f27;
	color:#000;
	font-size: clamp(10px, 1.33vw, 16px);
	font-family:'Noto Serif TC';
	font-weight: 500;
	max-width: 1920px;
	margin:0 auto;
	overflow:hidden;
}

.themeEventContainer > div:not(.kvBlock){
	max-width: 1200px;
	margin:5% auto 0;
}

.mainContainer > section:last-child{
	padding-top:100vh;
}
.mainContainer > section.done:last-child{
	padding-top:0;
}

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

.kvBlock video{
	display: block;
	width:100%;
	clip-path: fill-box;
	border-radius: 1px;
	aspect-ratio:2.375;
	object-fit: cover;
}

.kvBlock hgroup{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-shadow: 0 0 2em rgba(0, 0, 0, 0.5);
}
.kvBlock hgroup h2{
	width:23.68%;
	aspect-ratio:1.8867;
	background: url(../images/kvBD.png) no-repeat center/100%;
	font-size: 0;
}
.kvBlock hgroup h3{
	font-family: 'EB Garamond';
	font-weight: 500;
	font-size: clamp(10px, 5.26vw, 100px);
	letter-spacing: 0.1em;
	color:#F3EEE4;
	margin-left: 0.5em;
}
/*********************************** kvBlock end ***********************************************/

/*********************************** introBlock start ***********************************************/
.introBlock{
	display: flex;
	align-items: center;
}

.introBlock img{
	display: block;
	width:50%;
}

.introBlock .txt{
	width:50%;
	padding:2.5% 5% 2.5% 2.5%;
}
.introBlock .txt h4{
	font-family: Cinzel;
	font-size: 2.4em;
	font-weight: 500;
	color:var(--theme-color);
}
.introBlock .txt p{
	line-height: 1.8em;
	margin:2em 0 0;
	text-align: justify;
}
/*********************************** introBlock end ***********************************************/

/*********************************** yearBlock start ***********************************************/
.yearBlock h4{
	font-family: Cinzel;
	font-size: 3.55em;
	font-weight: 500;
	color:var(--theme-color);
	text-align: center;
	margin:0 1em;
}

/****************** yearWrapper start ***********************/
.yearWrapper{
	--side-bdr:0.2em;
	margin:5% 0 0 20%;
	border-left:var(--side-bdr) solid var(--theme-color);
}

.year{
	position: relative;
	padding:5% 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.year img{
	display: block;
	width:100%;
}

/********* 年份數字 start *********/
.year h5{
	position: absolute;
	left:0;
	top:0;
	margin-top:20%;
	color:var(--theme-color);
	font-family: Cinzel, 'Noto Serif TC';
	font-size: 1em;
	font-weight: 500;
	translate:calc(-50% - (var(--side-bdr) / 2)) 0;
}
.year h5:before{
	content:"";
	display: block;
	width:2em;
	aspect-ratio:1;
	background: var(--theme-color);
	border:0.45em solid var(--bg);
	border-radius:50%;
}
.year h5 span{
	position: absolute;
	right:150%;
	top:-0.1em;
	font-size: 2.5em;
	line-height: 1em;
	white-space: nowrap;
}
.year h5 span i{
	font-size: 0.7em;
	font-style: normal;
	font-weight: 600;
}
.year h5 span em{
	font-size: 0.35em;
	font-style: normal;
	font-weight: 600;
}
/********* 年份數字 end *********/

/********* photo start *********/
.photo{
	position: relative;
	width:62%;
	aspect-ratio:1.0268;
}

.photo .img{
	width:80.62%;
	margin:8.37% auto 0;
}

.photo:after{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	content: "";
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size:100%;
	pointer-events: none;
	z-index: 1;
}
.year:nth-child(odd) .photo:after{ background-image:url(../images/bdr1.png);}
.year:nth-child(even) .photo:after{ background-image:url(../images/bdr2.png);}
/********* photo end *********/

/********* 建築名 start *********/
.year > h6{
	color:var(--theme-color);
	font-family: Cinzel;
	font-size: 2.5em;
	font-weight: 500;
	text-align: center;
	margin-top:2.5%;
}
/********* 建築名 end *********/

/********* 建築介紹 start *********/
.year .txt{
	width:80%;
	text-align: justify;
	margin-top:3%;
}
.year .txt p{
	margin: 0;
	line-height: 1.8em;
}
.year .txt p+p{
	margin-top: 1.5em;
}
/********* 建築介紹 end *********/

/******** furniture start **********/
.furniture{
	margin-top:5%;
	width:100%;
}

.furniture h6{
	color:#beaf6e;
	font-family: Cinzel;
	font-size: 2.2em;
	font-weight: 500;
	text-align: center;
	margin:0 1em;
}

.furniture .ctWrapper{
	position: relative;
	margin-top:5%;
}

.furniture ul,
.furniture li{
	position: absolute;
	left:0;
	top:0;
}
.furniture ul{
	width:100%;
}

.furniture li{
	width:3%;
}
.furniture li.active{
	z-index: 1;
}
.year:nth-child(1) .furniture li:nth-child(1){margin: 7% 0 0 12%;}
.year:nth-child(1) .furniture li:nth-child(2){margin: 8% 0 0 41%;}
.year:nth-child(1) .furniture li:nth-child(3){margin: 13% 0 0 68%;}
.year:nth-child(1) .furniture li:nth-child(4){margin: 18% 0 0 82%;}
.year:nth-child(1) .furniture li:nth-child(5){margin: 40% 0 0 40%;}
.year:nth-child(1) .furniture li:nth-child(6){margin: 36% 0 0 64%;}
.year:nth-child(1) .furniture li:nth-child(7){margin: 49% 0 0 14%;}
.year:nth-child(1) .furniture li:nth-child(8){margin: 73% 0 0 52%;}
.year:nth-child(2) .furniture li:nth-child(1){margin: 8% 0 0 27%;}
.year:nth-child(2) .furniture li:nth-child(2){margin: 34% 0 0 75%;}
.year:nth-child(2) .furniture li:nth-child(3){margin: 10% 0 0 58%;}
.year:nth-child(2) .furniture li:nth-child(4){margin: 8% 0 0 78%;}
.year:nth-child(2) .furniture li:nth-child(5){margin: 44% 0 0 61%;}
.year:nth-child(2) .furniture li:nth-child(6){margin: 24% 0 0 66%;}
.year:nth-child(3) .furniture li:nth-child(1){margin: 10% 0 0 16%;}
.year:nth-child(3) .furniture li:nth-child(2){margin: 10% 0 0 49%;}
.year:nth-child(3) .furniture li:nth-child(3){margin: 11% 0 0 73%;}

.furniture li button{
	display: flex;
	justify-content: center;
	align-items: center;
	width:100%;
	aspect-ratio:1;
	border:none;
	padding:0;
	background: rgba(255, 255, 255, 0.9);
	border-radius:50%;
	box-shadow:0 0 0.5em 0.25em rgba(0, 0, 0, 0.25);
	cursor:pointer;
	animation:hint 0.5s ease-in alternate infinite;
}
@keyframes hint{
	to{
		transform:scale(1.15);
	}
}
.furniture li button:hover,
.furniture li.active button{
	animation:none;
	transform:scale(1.15);
}
.furniture li button span{
	position: relative;
	display: block;
	width:50%;
	aspect-ratio:1;
	transition: transform 0.2s;
}
.furniture li.active button span{
	transform:rotate(-45deg);
}
.furniture li button span:before,
.furniture li button span:after{
	position: absolute;
	content:"";
	display: block;
	width:100%;
	height:1px;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	background: currentColor;
}
.furniture li button span:after{
	transform: rotate(-90deg);
}
.furniture li a{
	--bg-color:rgba(255, 255, 255, 0.9);
	position: absolute;
	width:100%;
	top:110%;
	display: flex;
	justify-content: center;
	filter:drop-shadow(0 0 0.25em rgba(0, 0, 0, 0.5));
	visibility: hidden;
	transition: color 0.2s;
}
.furniture li a:hover{
	color:var(--theme-color);
}
.furniture li.active a{
	visibility: visible;
}
.furniture li a:before{
	content:"";
	display: block;
	border:0.5em solid transparent;
	border-top:none;
	border-bottom-color:var(--bg-color);
}
.furniture li a span{
	position: absolute;
	left:50%;
	top:100%;
	transform: translate(-50%);
	white-space: nowrap;
	text-align: center;
	padding:0.3em 0.6em;
	background: var(--bg-color);
	border-radius:0.2em;
}
.furniture li a br.forM{
	display: none;
}
/******** furniture end **********/
/****************** yearWrapper end ***********************/

/****************** yearEnd start ***********************/
.yearEnd{
	font-size: 1.3em;
	font-weight: 500;
	color:var(--theme-color);
	border:0.2em solid #beaf6e;
	margin:5%;
	padding:2.5% 5% 3%;
}
.yearEnd h5{
	font-size: 1.25em;
	font-weight: 600;
	text-align: center;
}
.yearEnd p{
	text-align: justify;
	line-height: 1.8em;
	margin:0.8em 0 0;
}
/****************** yearEnd end ***********************/
/*********************************** yearBlock end ***********************************************/

/*********************************** galleryBlock start ***********************************************/
.galleryBlock{
	aspect-ratio:2;
	background: url(../images/galleryBg.jpg) no-repeat center/cover;
	overflow:hidden;
}

.galleryBlock .imgWrapper{
	display: flex;
	aspect-ratio:10;
	height:100%;
	animation:gallery 100s linear infinite;
}
@keyframes gallery{
	to{
		translate:-50%;
	}
}

.galleryBlock .group{
	position: relative;
	width:50%;
	aspect-ratio:5;
}
.galleryBlock .group:hover{
	z-index: 1;
}
.galleryBlock .group img{
	position: absolute;
	left:0;
	top:0;
	cursor:pointer;
	display: block;
	transition: all 0.5s;
}
.galleryBlock .group img:hover{
	scale:1.05;
	box-shadow:0 0 0 0.6em #FFF;
	z-index: 1;
}
.galleryBlock .group img:nth-child(1){ width: 10%; margin: 5% 0 0 1%;}
.galleryBlock .group img:nth-child(2){ width: 12%; margin: 2% 0 0 9%;}
.galleryBlock .group img:nth-child(3){ width: 9%; margin: 9% 0 0 22%;}
.galleryBlock .group img:nth-child(4){ width:10%; margin: 3% 0 0 30%;}
.galleryBlock .group img:nth-child(5){ width: 13%; margin: 5% 0 0 39%;}
.galleryBlock .group img:nth-child(6){ width:10%; margin: 9% 0 0 53%;}
.galleryBlock .group img:nth-child(7){ width:10%; margin: 2% 0 0 60%;}
.galleryBlock .group img:nth-child(8){ width:10%; margin: 7% 0 0 70%;}
.galleryBlock .group img:nth-child(9){ width: 11%; margin: 1% 0 0 82%;}
.galleryBlock .group img:nth-child(10){ width: 10%; margin: 9% 0 0 89%;}
/*********************************** galleryBlock end ***********************************************/

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

.videoBlock img{
	display:block;
	width:100%;
}

.videoBlock .vBtn{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	cursor:pointer;
	display:flex;
	justify-content:center;
	align-items:center;
}
.videoBlock .vBtn span{
	display:block;
	width:8.5%;
	min-width:50px;
	max-width:68px;
	animation:flashVBtn 0.8s ease-in infinite alternate;
}
@keyframes flashVBtn{
	from{
		transform:scale(0.9);
		opacity:0.6;
	}
}
.videoBlock .vBtn span:before{
	content:"";
	display:block;
	padding-top:100%;
	background:url(https://www.nordic.com.tw/images/vBtn.png) no-repeat center;
	background-size:contain;
}
.videoBlock .vBtn:hover span{
	animation:none;
}

/** videoOverlay start **/
.videoOverlay{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100vh;
	z-index:2;
	background:rgba(255, 255, 255, 0.9);
	justify-content:center;
	align-items:center;
	display:flex;
	opacity:0;
	transition:opacity 0.3s;
	pointer-events:none;
}
.videoOverlay.show{
	opacity:1;
	pointer-events:auto;
}
.videoOverlay .videoOverlayCT{
	position:relative;
	width:95%;
	max-width:960px;
	background:#000;
	transform:scale(0.5);
	transition:transform 0.3s;
}
.videoOverlay.show .videoOverlayCT{
	transform:none;
}
.videoOverlay .videoOverlayCT:before{
	content:"";
	display:block;
	padding-top:56.25%;
}
.videoOverlay iframe{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border:none;
	display:block;
}

.videoOverlay .closeBtn{
	position:absolute;
	right:0;
	bottom:calc(100% + 10px);
	width:30px;
	height:30px;
	cursor:pointer;
}
.videoOverlay .closeBtn:before,
.videoOverlay .closeBtn:after{
	position:absolute;
	content:"";
	right:0;
	top:50%;
	width:90%;
	height:2px;
	background:#999;
	border-radius:1px;
}
.videoOverlay .closeBtn:before{
	transform:translateY(-50%) rotate(-45deg);
}
.videoOverlay .closeBtn:after{
	transform:translateY(-50%) rotate(-135deg);
}
.videoOverlay .closeBtn:hover:before,
.videoOverlay .closeBtn:hover:after{
	background:#666;
}
/** videoOverlay end **/
/*********************************** videoBlock end ***********************************************/


@media screen and (max-width:1023px){
	
	.themeEventContainer{
		font-size: clamp(10px, 3.68vw, 24px);
	}
	
	.themeEventContainer > div:not(.kvBlock){
		margin-top:10%;
	}

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

	.kvBlock hgroup{
		flex-direction: column;
	}
	.kvBlock hgroup h2{
		width:45%;
	}
	.kvBlock hgroup h3{
		font-size: 3em;
		margin: 0.5em 0 0;
		text-align: center;
	}
	/*********************************** kvBlock end ***********************************************/
	
	/*********************************** introBlock start ***********************************************/
	.introBlock{
		flex-direction: column;
	}

	.introBlock img{
		width:70%;
	}

	.introBlock .txt{
		width:100%;
		padding:10% 5%;
	}
	.introBlock .txt h4{
		font-size: 1.8em;
	}
	.introBlock .txt p{
		margin-top:1.4em;
	}
	/*********************************** introBlock end ***********************************************/
	
	/*********************************** yearBlock start ***********************************************/
	.yearBlock h4{
		font-size: 2em;
	}

	/****************** yearWrapper start ***********************/
	.yearWrapper{
		margin:10% 0 0 5%;
	}

	.year{
		padding:30% 0 10%;
	}
	.year:nth-child(4){
		padding-top:45%;
	}

	/********* 年份數字 start *********/
	.year h5{
		margin-top:15%;
	}
	.year h5 span{
		right:auto;
		left:190%;
		font-size: 3.2em;
	}
	/********* 年份數字 end *********/

	/********* photo start *********/
	.photo{
		width:90%;
	}
	/********* photo end *********/

	/********* 建築名 start *********/
	.year > h6{
		font-size: 2.2em;
	}
	/********* 建築名 end *********/

	/******** furniture start **********/
	.furniture{
		margin-top:10%;
	}

	.furniture h6{
		font-size: 2em;
	}

	.furniture .ctWrapper{
		margin-top:10%;
	}

	.furniture li{
		width:5%;
	}
	
	.furniture li a br.forM{
		display: block;
	}
	/******** furniture end **********/
	/****************** yearWrapper end ***********************/

	/****************** yearEnd start ***********************/
	.yearEnd{
		font-size: 1.15em;
		padding:6% 5% 7%;
	}
	/****************** yearEnd end ***********************/
	/*********************************** yearBlock end ***********************************************/
	
	/*********************************** galleryBlock start ***********************************************/
	.galleryBlock{
		aspect-ratio:1;
	}
	/*********************************** galleryBlock end ***********************************************/
	
}