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

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

.themeEventContainer{
	--theme-color1:#262626;
	--theme-color2:#492e7e;
	--theme-color3:#d47222;
	color:#FFF;
	font-size: clamp(8px, 0.95vw, 13px);
	font-family:'Noto Sans TC';
	font-weight: 400;
	max-width: 1920px;
	margin:0 auto;
	background: url(../images/bg.jpg) repeat-y center top/100%;
}

/*********************************** kvBlock start ***********************************************/
.kvBlock{
	position: relative;
	aspect-ratio:2.44;
	overflow: hidden;
}

.kvBlock hgroup{
	position: relative;
	width:62%;
	aspect-ratio:2;
	background: url(../images/kvTBg.png) no-repeat center/100%;
	box-shadow: 0 0 0.5em 0.25em rgba(255, 255, 255, 0.35);
}

.kvBlock hgroup > *{
	position: absolute;
	left:0;
	top:0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	font-size: 0;
}

.kvBlock em{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:73%;
	font-size: 1em;
	margin:13.1% 0 0 9.31%;
}
.kvBlock em span{
	width:46.51%;
	aspect-ratio:15.15;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background-image: url(../images/kvT1.svg);
}
.kvBlock em i{
	flex-grow:1;
	height:0.15em;
	background: #221714;
	margin-left:2.36%;
	transform-origin: left center;
}

.kvBlock h2{
	width:55.17%;
	aspect-ratio:11.85;
	margin:17.24% 0 0 9.31%;
	background-image: url(../images/kvT2.png);
}

.kvBlock h3{
	width:54.31%;
	aspect-ratio:12.6;
	margin:23.96% 0 0 27.93%;
	background-image: url(../images/kvT3.png);
}

/********************* scrollHint start *************************/
.scrollHint{
	position:absolute;
	left:50%;
	bottom:8%;
	width:1.38%;
	aspect-ratio:0.43;
	color:#000;
	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 *************************/
/*********************************** kvBlock end ***********************************************/

/*********************************** 共用 start ***********************************************/
.allCTWrapper{
	padding:7.5% 0;
	background: linear-gradient(to bottom, rgba(61, 70, 88, 0), rgba(61, 70, 88, 0.88) 33.33%, rgba(61, 70, 88, 0.88) 66.66%, #FFF) no-repeat center top;
}

.allCT{
	--highlight:#F56E1F;
	margin:0 auto;
	width:80%;
	max-width: 1000px;
}
.allCT .CT{
	padding:7.25%;
	border-radius:24em;
	background: var(--theme-color1);
}
.allCT > div:nth-child(odd) .CT{
	border-top-right-radius:0;
	border-bottom-right-radius:0;
}
.allCT > div:nth-child(even) .CT{
	border-top-left-radius:0;
	border-bottom-left-radius:0;
}
.allCT > div:last-child .CT{
	border-top-right-radius:0;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
}

.allCT .img{
	position: relative;
}

/**************** slick start *********************/
.allCT .slick{
	margin:0;
}
.allCT .slick img{
	display: block;
	width:100%;
	border-radius:50%;
}

.allCT .slick+h4{
	position: absolute;
	left:0;
	top:100%;
	width:100%;
	text-align: center;
	font-size: 0.85em;
	font-weight: normal;
	margin-top:0.5em;
	opacity: 0;
	transition: opacity 0.5s;
}
.allCT .slick+h4.done{
	opacity:1;
}
/**************** slick end *********************/
/*********************************** 共用 end ***********************************************/

/*********************************** story start ***********************************************/
.story .CT{
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
}

.story .img{
	width:46%;
}

.story .txt{
	width:47%;
}
.story .txt em{
	font-style: normal;
	font-family: Orbitron;
	font-size: 2em;
}
.story .txt h3{
	font-size: 1.5em;
	font-weight: 600;
	margin-top:0.8em;
}
.story .txt p{
	margin: 1.2em 0 0;
	line-height: 1.8em;
	text-align: justify;
}

/***************** welcome start **********************/
.welcome{
	background: linear-gradient(to bottom, transparent 50%, var(--theme-color2) 50%, var(--theme-color2) 100%);
}
/***************** welcome end **********************/

/***************** movement start **********************/
.movement{
	background: var(--theme-color1);
}

.movement .CT{
	background: var(--theme-color2);
}

.movement .img{
	order:1;
}
/***************** movement end **********************/
/*********************************** story end ***********************************************/

/*********************************** designer start ***********************************************/
.designer{
	background: linear-gradient(to bottom, var(--theme-color2) 50%, var(--theme-color3) 50%, var(--theme-color3) 100%);
}

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

/******* img start ********/
.designer .img{
	width:46%;
}
/******* img end *******/

/******* txt start ********/
.designer .txt{
	width:47%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding:0 5%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}
.designer .tabCT:nth-child(1) .txt{	background-image: url(../images/designer1.svg);}
.designer .tabCT:nth-child(2) .txt{	background-image: url(../images/designer2.svg);}
.designer .tabCT:nth-child(3) .txt{	background-image: url(../images/designer3.svg);}
.designer .tabCT:nth-child(4) .txt{	background-image: url(../images/designer4.svg);}
.designer .tabCT:nth-child(5) .txt{	background-image: url(../images/designer5.svg);}
.designer .tabCT:nth-child(6) .txt{	background-image: url(../images/designer6.svg);}
.designer .tabCT:nth-child(7) .txt{	background-image: url(../images/designer7.svg);}

.designer .txt hgroup{
	text-align: center;
}
.designer .txt hgroup h3{
	font-size: 1.5em;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	line-height: 1em;
}
.designer .txt hgroup h3:before,
.designer .txt hgroup h3:after{
	content:"";
	display: block;
	width:1.5em;
	height:1px;
	background: currentColor;
}
.designer .txt hgroup h3:before{ margin-right:0.5em;}
.designer .txt hgroup h3:after{ margin-left:0.5em;}
.designer .txt hgroup em{
	display: block;
	font-style: normal;
	font-family: Orbitron;
	font-size: 2em;
	margin-top:0.5em;
}

.designer .txt p{
	margin:1.2em 0 0;
	line-height: 1.8em;
	text-align: justify;
}
.designer .txt hgroup+p{
	margin-top:3em;
}
/******* txt end *******/
/*************** tabCT end ******************/

/*************** tab start ******************/
.designer .tab{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top:8%;
}
.designer .tab li{
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1em;
	cursor:pointer;
	transition: color 0.2s;
}
.designer .tab li+li{
	margin-left:1.5em;
}
.designer .tab li:hover,
.designer .tab li.active{
	color:var(--highlight);
}
/*************** tab end ******************/
/*********************************** designer end ***********************************************/

/*********************************** modpoly start ***********************************************/
.modpoly{
	background: var(--theme-color1);
}

.modpoly .CT{
	background: var(--theme-color3);
}

/*************** header start ******************/
.modpoly header{
	width:50%;
	margin:0 auto;
	text-align: center;
}
.modpoly header h3{
	font-size: 1.8em;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	line-height: 1em;
}
.modpoly header h3:before,
.modpoly header h3:after{
	content:"";
	display: block;
	width:1.5em;
	height:1px;
	background: currentColor;
}
.modpoly header h3:before{ margin-right:0.5em;}
.modpoly header h3:after{ margin-left:0.5em;}
.modpoly header p{
	margin:1.2em 0 0;
	line-height: 1.8em;
}
/*************** header end ******************/

.modpoly .tabCTWrapper{
	width:80%;
	margin:1% auto 0;
}

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

/******* img start ********/
.modpoly .img{
	width:46%;
	order:1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

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

.modpoly .img a{
	display: flex;
	align-items: center;
	color:#000;
	text-decoration: underline;
	font-size: 0.9em;
}
.modpoly .img a:after{
	content:"";
	display: block;
	width: 27px;
	height: 25px;
	margin-left: 0.2em;
	background: url(../images/snsLogo.svg) no-repeat center top/100%;
	transition: background-position-y 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modpoly .img a:hover{
	color:#FFF;
	text-decoration: none;
}
.modpoly .img a:hover:after{
	background-position-y: bottom;
}
/******* img end *******/

/******* txt start ********/
.modpoly .txt{
	width:50%;
	color:#000;
}

.modpoly .txt em{
	font-style: normal;
	font-family: Orbitron;
	font-size: 2em;
}
.modpoly .txt h3{
	font-size: 1.5em;
	font-weight: 600;
	margin-top:0.8em;
}
.modpoly .txt p{
	margin: 1.2em 0 0;
	line-height: 1.8em;
	text-align: justify;
}
/******* txt end ********/
/*************** tabCT end ******************/

/*************** tab start ****************/
.modpoly .tab{
	display: flex;
	justify-content: center;
	margin-top:2.5%;
}
.modpoly .tab li{
	position:relative;
	width:7%;
	margin:0 1%;
	cursor:pointer;
	opacity:0.3;
	transition:all 0.2s;
}
.modpoly .tab li img{
	display: block;
	width:100%;
}
.modpoly .tab li:hover,
.modpoly .tab li.active{
	opacity:1;
}
.modpoly .tab li em{
	position:absolute;
	display:flex;
	flex-direction: column;
	align-items: center;
	visibility:hidden;
	text-align:center;
	white-space:nowrap;
	left:50%;
	bottom:100%;
	transform:translateX(-50%);
	opacity:0;
	pointer-events:none;
	transition:all 0.2s;
}
.modpoly .tab li em i{
	display:block;
	background:#000;
	color:#FFF;
	font-size:12px;
	font-style:normal;
	padding:6px 10px;
	border-radius:3px;
}
.modpoly .tab li em:after{
	content:"";
	display:block;
	border:5px solid transparent;
	border-top-color:#000;
	border-bottom:none;
}
.modpoly .tab li:hover em{
	visibility:visible;
	opacity:1;
	bottom:110%;
}
/*************** tab end ****************/
/*********************************** modpoly end ***********************************************/

/*********************************** expo start ***********************************************/
.expo{
	background: var(--theme-color3);
}

.expo .CT{
	background: var(--theme-color1);
	overflow: hidden;
}

.expo iframe{
	display: none;
}

/*************** header start ******************/
.expo header{
	color:var(--highlight);
	text-align: center;
}
.expo header h3{
	font-size: 1.8em;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	line-height: 1em;
}
.expo header h3:before,
.expo header h3:after{
	content:"";
	display: block;
	width:1.5em;
	height:1px;
	background: currentColor;
}
.expo header h3:before{ margin-right:0.5em;}
.expo header h3:after{ margin-left:0.5em;}
/*************** header end ******************/

/*************** about start ******************/
.about{
	--txt-w:48%;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 5%;
}

.about h4{
	position: absolute;
	right:0;
	top:0;
	width:var(--txt-w);
	font-size: 1.5em;
	font-weight: 600;
}
.about h4 *{
	display: block;
}

.about .img{
	width:48%;
}
.about img{
	display: block;
	width:100%;
	border-radius:0.5em;
}

.about .txt{
	width:var(--txt-w);
	margin-top:6.5%;
}
.about .txt p{
	margin:1.2em 0 0;
	line-height: 1.8em;
	text-align: justify;
}

.about .txt .map{
	font-size: 0.9em;
	color: #000;
	display: inline-block;
	line-height: 1em;
	padding: 0.25em 0.5em 0.2em;
	background: #FFF;
	transition: background 0.2s;
	border-radius:0.25em;
}
.about .txt .map:hover{
	color: #FFF;
    background: #4f4d48;
}
/*************** about end ******************/

/*************** seminar start ******************/
.seminar{
	background: #4f4d48;
	padding:4%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top:5%;
	border-radius:0.5em;
}

/************* 標題 start ***************/
.seminar h4{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 1.5em;
	line-height: 1em;
}
.seminar h4:before,
.seminar h4:after{
	content:"";
	display: block;
	width:1.5em;
	height:1px;
	background: currentColor;
}
.seminar h4:before{	margin-right:0.5em;}
.seminar h4:after{ margin-left:0.5em;}
/************* 標題 end ***************/

/************* speaker start ***************/
.seminar .speaker{
	width:50%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top:5%;
}
.seminar .speaker li{
	width:30%;
	cursor:pointer;
}
.seminar .speaker img{
	transition: all 0.2s;
	width:100%;
	display: block;
	border-radius:50%;
}
.seminar .speaker li:hover img{
	transform: scale(1.05);
}
.seminar .speaker span{
	display: block;
	margin-top:1em;
	text-align: center;
}
.seminar .speaker span br{
	display: none;
}
.seminar .speaker .info{
	display: none;
}

/******** overlay start ***********/
.overlay.speaker .overlayCT {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: auto;
	max-width:500px;
	max-height: none;
	border-radius: 0.5em;
	padding: 3em;
	font-family: 'Noto Sans TC';
}
.overlay.speaker .overlayCT img{
	width:50%;
	max-width: 200px;
	display: block;
	border-radius:50%;
}
.overlay.speaker .overlayCT h5{
	text-align: center;
	color:#000;
	font-size: 1.3em;
	margin-top:0.5em;
}
.overlay.speaker .overlayCT h6{
	text-align: center;
	font-size: 1.1em;
	margin-top:0.5em;
}
.overlay.speaker .overlayCT p{
	width:100%;
	margin:1em 0 0;
	line-height: 1.8em;
	text-align: justify;
}
/******** overlay end ***********/
/************* speaker end ***************/

/************* session start ***************/
.sessionWrapper{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top:5%;
	width:100%;
}

.session{
	position: relative;
	width:48%;
	font-size: 0.91em;
}

.session > a{
	position: absolute;
	right:0;
	top:0;
	display: block;
	color: inherit;
	background: var(--theme-color1);
	padding:0.4em 0.75em 0.5em;
	line-height: 1em;
	border-radius:0.25em;
	transition: background 0.2s;
}
.session > a:hover{
	color: inherit;
    background: #000;
}

.session li{
	display: flex;
	align-items: flex-start;
}
.session li+li{
	margin-top:0.5em;
}
.session li em{
	font-style: normal;
	white-space: nowrap;
}
.session li span{
	margin-left:0.75em;
	padding-left:0.75em;
	border-left:1px solid;
}

.session .map{
	font-size: 0.9em;
	display: inline-block;
	line-height: 1em;
	padding: 0.25em 0.5em 0.2em;
	color: #000;
	background: #FFF;
	transition: background 0.2s;
	border-radius:0.25em;
}
.session .map:hover{
	color:#FFF;
    background: #000;
}
/************* session end ***************/
/*********************************** expo end ***********************************************/


@media screen and (max-width:1023px){
	
	.themeEventContainer{
		font-size: clamp(8px, 3.3vw, 24px);
		background-size: 150%;
	}
	
	/*********************************** kvBlock start ***********************************************/
	.kvBlock{
		aspect-ratio:auto;
	}
	
	.kvBlock hgroup{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width:auto;
		aspect-ratio:0.62;
		background-position-x: right;
		background-size: cover;
	}
	
	.kvBlock hgroup > *{
		position: static;
	}
	
	.kvBlock em{
		width:90%;
		margin:0;
	}
	.kvBlock em span{
		width:60%;
	}
	.kvBlock em i{
		height:0.1em;
	}
	
	.kvBlock h2{
		width: 90%;
		margin:5% 0 0;
	}
	
	.kvBlock h3{
		width: 75%;
		margin:5% 0 0;
	}
	
	/********************* scrollHint start *************************/
	.scrollHint{
		bottom:8%;
		width:2em;
	}
	/********************* scrollHint end *************************/
	/*********************************** kvBlock end ***********************************************/
	
	/*********************************** 共用 start ***********************************************/
	.allCTWrapper{
		padding:7.5% 0;
	}

	.allCT{
		width:95%;
	}
	.allCT .CT{
		padding:10% 5%;
	}
	.allCT > div:nth-child(odd) .CT,
	.allCT > div:nth-child(even) .CT,
	.allCT > div:last-child .CT{
		border-top-left-radius:50vw;
		border-top-right-radius:50vw;
	}
	.allCT > div:nth-child(odd) .CT,
	.allCT > div:nth-child(even) .CT,
	.allCT > div:last-child .CT{
		border-bottom-left-radius:0;
		border-bottom-right-radius:0;
	}
	/*********************************** 共用 end ***********************************************/

	/*********************************** story start ***********************************************/
	.story .CT{
		flex-direction: column;
	}

	.story .img{
		width:85%;
	}

	.story .txt{
		margin-top:20%;
		width:100%;
	}
	.story .txt em{
		font-size: 1.6em;
	}
	.story .txt h3{
		font-size: 1.3em;
	}

	/***************** welcome start **********************/
	.welcome{
		background: none;
	}
	/***************** welcome end **********************/

	/***************** movement start **********************/
	.movement .img{
		order:0;
	}
	/***************** movement end **********************/
	/*********************************** story end ***********************************************/

	/*********************************** designer start ***********************************************/
	.designer{
		background: var(--theme-color2);
	}

	/*************** tabCT start ******************/
	.designer .tabCT{
		flex-direction: column;
		align-items: center;
	}

	/******* img start ********/
	.designer .img{
		width:85%;
	}
	/******* img end *******/

	/******* txt start ********/
	.designer .txt{
		margin-top:20%;
		width:100%;
		padding: 0;
	}
	
	.designer .txt hgroup h3{
		font-size: 1.3em;
	}
	.designer .txt hgroup em{
		font-size: 1.6em;
	}

	.designer .txt hgroup+p{
		margin-top:2em;
	}
	/******* txt end *******/
	/*************** tabCT end ******************/

	/*************** tab start ******************/
	.designer .tab{
		position: sticky;
		bottom:0;
		margin-top:10%;
		font-size: 0.94em;
		padding:2em 0.8em 4em;
		background: inherit;
		border-radius:2em;
		border-bottom-left-radius:0;
		border-bottom-right-radius:0;
	}
	.designer .tab li:nth-child(4),
	.designer .tab li:nth-child(7){
		margin-left:0;
	}
	.designer .tab li:nth-child(n+4){
		margin-top:1em;
	}
	/*************** tab end ******************/
	/*********************************** designer end ***********************************************/
	
	/*********************************** modpoly start ***********************************************/
	.modpoly .CT{
		padding-top: 25%;
	}
	
	/*************** header start ******************/
	.modpoly header{
		width:90%;
	}
	.modpoly header h3{
		font-size: 1.5em;
	}
	/*************** header end ******************/

	.modpoly .tabCTWrapper{
		width:auto;
		margin-top:10%;
	}

	/*************** tabCT start ******************/
	.modpoly .tabCT{
		flex-direction: column;
		display: none;
	}
	.modpoly .tabCT.active{
		display: flex;
	}

	/******* img start ********/
	.modpoly .img{
		width:80%;
		order:0;
	}
	/******* img end *******/

	/******* txt start ********/
	.modpoly .txt{
		width:100%;
		margin-top:10%;
	}

	.modpoly .txt em{
		font-size: 1.6em;
	}
	.modpoly .txt h3{
		font-size: 1.3em;
	}
	/******* txt end ********/
	/*************** tabCT end ******************/

	/*************** tab start ****************/
	.modpoly .tab{
		position: sticky;
		bottom:0;
		padding:2em 1em 6em;
		background: inherit;
		border-radius:2em;
		border-bottom-left-radius:0;
		border-bottom-right-radius:0;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.modpoly .tab li{
		width:21%;
		margin:0;
	}
	.modpoly .tab li:nth-child(n+5){
		margin-top:3.5%;
	}
	.modpoly .tab li em{
		display: none;
	}
	/*************** tab end ****************/
	/*********************************** modpoly end ***********************************************/
	
	/*********************************** expo start ***********************************************/
	.expo .CT{
		padding-top:20%;
	}
	
	/*************** header start ******************/
	.expo header h3{
		font-size: 1.5em;
	}
	/*************** header end ******************/

	/*************** about start ******************/
	.about{
		display: block;
		margin-top:10%;
	}

	.about h4{
		position: static;
		width:auto;
		font-size: 1.3em;
	}
	
	.about .img{
		width:auto;
		margin-top:8%;
	}

	.about .txt{
		width:auto;
		margin-top:8%;
	}
	/*************** about end ******************/

	/*************** seminar start ******************/
	.seminar{
		margin-top: 10%;
		padding:10% 2.5%;
	}

	/************* 標題 start ***************/
	.seminar h4{
		font-size: 1.3em;
	}
	/************* 標題 end ***************/

	/************* speaker start ***************/
	.seminar .speaker{
		width:95%;
		margin-top:10%;
	}
	.seminar .speaker span br{
		display: block;
	}

	/******** overlay start ***********/
	.overlay.speaker .overlayCT {
		padding: 2em;
	}
	/******** overlay end ***********/
	/************* speaker end ***************/

	/************* session start ***************/
	.sessionWrapper{
		display: block;
		margin-top:10%;
	}

	.session{
		width:auto;
		display: flex;
		flex-direction: column;
	}
	.session+.session{
		margin-top:10%;
	}

	.session > a{
		order:1;
		align-self: center;
		width:35%;
		position: static;
		font-size: 1.1em;
		padding:0.8em 1em;
		text-align: center;
		margin-top:1.5em;
	}
	/************* session end ***************/
	/*********************************** expo end ***********************************************/
	
}