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

.mainContainer{
	max-width: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.midBlock{
	width:min(95%, 1140px);
	margin-left:min(2.5%, 30px);
	margin-right:min(2.5%, 30px);
}
.themeMain{
	width:min(calc(100% - 160px), 1040px);
}

.themeEventContainer{
	color:#000;
	font-family: 'Noto Sans TC';
	font-size: clamp(10px, 1.16vw, 14px);
	width:100%;
	max-width:1920px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.themeEventContainer + section{
	max-width:1200px;
}

/*********************************** 共用 start ***********************************************/
.groupWrapper{
	width:100%;
	max-width: 1040px;
}

.group{
	--img-w:42%;
}
.group+.group{
	margin-top:5%;
}

/**************** header start **********************/
.group header{
	position: relative;
	display: flex;
	align-items: flex-start;
}
.group.R header{
	flex-direction: row-reverse;
}

.group hgroup{
	width:var(--img-w);
	aspect-ratio:1.3;
	display: flex;
	justify-content: center;
	align-items: center;
}
.group hgroup h3{
	font-family: 'Google Sans Flex';
	font-weight: 800;
	font-size: 2.8em;
}

/******* deco start *********/
.deco{
	--gap:5%;
	position: absolute;
	top:0;
	width:62%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.group.L .deco{
	right:0;
	align-items: flex-end;
}
.group.R .deco{
	left:0;
	align-items: flex-start;
}

.ball{
	width:10%;
	aspect-ratio:1;
	background: #000;
	border-radius:50%;
}
.group.L .ball{
	translate:50% 0;
}
.group.R .ball{
	translate:-50% 0;
}
.rec1{
	width:68.13%;
	aspect-ratio:20;
}
.rec2{
	width:100%;
	aspect-ratio:8;
}
.group.L .rec1,
.group.L .rec2{
	transform-origin: right center;
}
.group.R .rec1,
.group.R .rec2{
	transform-origin: left center;
}
/******* deco end *********/
/**************** header end **********************/

.group .body{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top:2.5%;
}
.group.R .body{
	flex-direction: row-reverse;
}

.group .body img{
	display: block;
	width:var(--img-w);
}

.group .body .txt{
	flex-grow: 1;
	margin-top:1.25em;
	padding:0 5%;
}
.group .body .txt h4{
	font-weight: 700;
	font-size: 1.2em;
	line-height: 1em;
}
.group .body .txt p{
	line-height: 1.8em;
	margin:1.5em 0 0;
	text-align: justify;
}
/*********************************** 共用 end ***********************************************/

/*********************************** g1 start ***********************************************/
/**************** header start **********************/
.g1 hgroup{
	justify-content: flex-start;
	align-items: flex-start;
	background: #f57b26;
}
.g1 hgroup h2{
	font-size: 1em;
	margin:5% 7%;
}
.g1 hgroup h2 *{
	display: block;
}
.g1 hgroup h2 strong{
	font-family: 'Passion One';
	font-weight: 400;
	font-size: 7.14em;
}
.g1 hgroup h2 em{
	font-family: 'Google Sans Flex';
	font-weight: 800;
	font-style: normal;
	font-size: 1.71em;
}

/******* deco start *********/
.g1 .ball{
	margin-top:12.36%;
}
.g1 .rec1{
	margin-top:var(--gap);
	background: #9ccf34;
}
.g1 .rec2{
	background: #fff45c;
}
/******* deco end *********/
/**************** header end **********************/
/*********************************** g1 end ***********************************************/

/*********************************** g2 start ***********************************************/
/**************** header start **********************/
.g2 hgroup{
	background: #f19a93;
}

/******* deco start *********/
.g2 .rec2{
	margin-top:var(--gap);
	background: #ed5e62;
}
.g2 .rec1{
	background: #7bcaf3;
}
.g2 .ball{
	margin-top:var(--gap);
}
/******* deco end *********/
/**************** header end **********************/
/*********************************** g2 end ***********************************************/

/*********************************** g3 start ***********************************************/
/**************** header start **********************/
.g3 hgroup{
	background: #0168b7;
}

/******* deco start *********/
.g3 .rec2{
	margin-top:var(--gap);
	background: #78110a;
}
.g3 .rec1{
	background: #f29ec2;
}
.g3 .ball{
	margin-top:var(--gap);
}
/******* deco end *********/
/**************** header end **********************/

.g3 .body{
	margin-top:-15%;
}
.g3 .body img{
	margin-top:18%;
}
/*********************************** g3 end ***********************************************/

/*********************************** g4 start ***********************************************/
/**************** header start **********************/
.g4 hgroup{
	background: #fbf466;
}

/******* deco start *********/
.g4 .deco{
	margin-top:-5%;
}

.g4 .rec2{
	margin-top:var(--gap);
	background: #6d9384;
}
.g4 .rec1{
	background: #d1d2c4;
}
/******* deco end *********/
/**************** header end **********************/

.g4 .body{
	display: block;
	margin-top:-15%;
}

.g4 .body .txt{
	width:58%;
}
/*********************************** g4 end ***********************************************/

/*********************************** product start ***********************************************/
.productWrapper{
	width:100%;
	max-width: 1040px;
	margin-top:2.5%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.product{
	position: relative;
	width:95%;
}
.product+.product{
	margin-top:2.5%;
}

.product .item{
	--bg:#f7ecda;
	--bdr-r:0.8em;
	position: relative;
	aspect-ratio:2;
	display: flex;
	align-items: flex-start;
	font-size: 0.9em;
	padding:0 1em;
}
.product+.product .item{
	flex-direction: row-reverse;
}

/**************** 圖 start **********************/
.product .imgWrapper{
	display: block;
	width:38%;
	border-radius:50% var(--bdr-r);
	background: linear-gradient(45deg, #e2bfde 50%, #f9cbce 50%);
}
.product+.product .imgWrapper{
	border-radius:var(--bdr-r) 50%;
	background: linear-gradient(-45deg, #fef6b5 50%, #a2bebf 50%);
}
.product .imgWrapper:hover{
	color:currentColor;
}
.product .img{
	position: relative;
	height:100%;
	border-radius:50%;
	background: var(--bg);
}
.product img{
	width:100%;
	display: block;
	transition: scale 0.5s;
}
.product .imgWrapper:hover img{
	scale:1.03;
}
.product .img span{
	position: absolute;
	left:0;
	bottom:0;
	width:100%;
	text-align: center;
	margin-bottom:2em;
}
.product .img span i{
	font-style: normal;
	color:#C00;
}
/**************** 圖 end **********************/

/**************** 文 start **********************/
.product .txtWrapper{
	position: absolute;
	right:0;
	top:0;
	width:64%;
	display: flex;
	align-items: center;
	aspect-ratio:2;
	border-radius:var(--bdr-r);
	background: var(--bg);
	margin-top:17%;
	padding:0 5%;
}
.product+.product .txtWrapper{
	right:auto;
	left:0;
}
.product .txt h5{
	font-weight: 700;
	font-size: 1.2em;
}
.product .txt p{
	line-height: 1.8em;
	margin:1.5em 0 0;
	text-align: justify;
}
/**************** 文 end **********************/

.product ._slickPN{
	position: absolute;
	top:50%;
	translate:0 -50%;
	width:3%;
	aspect-ratio:1;
	font-size: 0;
	cursor:pointer;
	transition: scale 0.2s;
	background: url(../images/arrow.svg) no-repeat center/100%;
}
.product ._slickPN.prev{
	right:102%;
	scale:-1 1;
}
.product ._slickPN.next{
	left:102%;
}
.product ._slickPN.prev:hover{
	scale:-1.2 1.2;
}
.product ._slickPN.next:hover{
	scale:1.2;
}
/*********************************** product end ***********************************************/

/*********************************** galleryBlock start ***********************************************/
.galleryBlock{
	position: relative;
	margin-top:5%;
	width:100%;
	aspect-ratio:4.5;
	overflow:hidden;
}
.galleryBlock:before{
	position: absolute;
	top:0;
	content:"";
	display: block;
	height:100%;
	background-repeat: repeat-x;
	background-position: left center;
	background-size: contain;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	left:0;
	background-image: url(../images/gallery.jpg);
	aspect-ratio:17.991;
	animation-name: toLeft;
	animation-duration: 80s;
}
@keyframes toLeft{
	to{
		transform:translateX(-50%);
	}
}
/*********************************** galleryBlock end ***********************************************/


@media screen and (max-width:1023px){
	
	.midBlock,
	.themeMain{
		width:calc(100% - 20px);
	}
	
	.themeEventContainer{
		font-size: clamp(8px, 3.42vw, 39px);
	}
	
	/*********************************** 共用 start ***********************************************/
	.group{
		--img-w:100%;
	}
	.group+.group{
		margin-top:10%;
	}

	/**************** header start **********************/
	.group header,
	.group.R header{
		flex-direction: column;
	}

	.group hgroup{
		aspect-ratio:1.6;
	}
	.group hgroup h3{
		font-size: 2.4em;
	}

	/******* deco start *********/
	.deco{
		--gap:5%;
		position: static;
		width:95%;
		margin-top:-10%;
	}
	
	.group.L .deco{
		align-self: flex-end;
	}
	.group.R .deco{
		align-self: flex-start;
	}
	/******* deco end *********/
	/**************** header end **********************/

	.group .body{
		display: block;
		margin:5% 5% 0;
	}

	.group .body .txt{
		margin-top:2em;
		padding:0;
	}
	/*********************************** 共用 end ***********************************************/

	/*********************************** g1 start ***********************************************/
	/**************** header start **********************/
	.g1 hgroup h2{
		font-size: 0.9em;
	}

	/******* deco start *********/
	.g1 .deco{
		margin-top:-35%;
	}
	/******* deco end *********/
	/**************** header end **********************/
	/*********************************** g1 end ***********************************************/

	/*********************************** g3 start ***********************************************/
	.g3 .body img{
		margin-top:0;
	}
	/*********************************** g3 end ***********************************************/

	/*********************************** g4 start ***********************************************/
	/**************** header start **********************/
	/******* deco start *********/
	.g4 .deco{
		margin-top:-20%;
	}
	/******* deco end *********/
	/**************** header end **********************/

	.g4 .body .txt{
		width:auto;
	}
	/*********************************** g4 end ***********************************************/
	
	/*********************************** product start ***********************************************/
	.productWrapper{
		width:85%;
		margin-top:10%;
	}

	.product{
		width:100%;
	}
	.product+.product{
		margin-top:5%;
	}

	.product .item{
		aspect-ratio:auto;
		display: block;
		font-size: 1em;
		padding:0 0.5em;
	}

	/**************** 圖 start **********************/
	.product .imgWrapper{
		width:auto;
		font-size: 0.9em;
	}
	/**************** 圖 end **********************/

	/**************** 文 start **********************/
	.product .txtWrapper{
		position: static;
		width:auto;
		display: block;
		aspect-ratio:auto;
		margin-top:1em;
		padding:8% 4% 10% 8%;
	}
	.product .txt{
		aspect-ratio:0.7;
		padding-right:0.5em;
		overflow:auto;
	}
	.product .txt::-webkit-scrollbar{
		width:10px;
	}
	.product .txt::-webkit-scrollbar-thumb{
		border:2px solid transparent;
		border-radius:10px;
		background-color: #ded0b9;
		background-clip: content-box;
	}
	.product .txt::-webkit-scrollbar-thumb:hover{
		background-color: #bfad8f;
	}
	/**************** 文 end **********************/

	.product ._slickPN{
		top:0;
		margin-top:50%;
		width:6%;
	}
	/*********************************** product end ***********************************************/
	
	/*********************************** galleryBlock start ***********************************************/
	.galleryBlock{
		margin-top:10%;
		aspect-ratio:2;
	}
	/*********************************** galleryBlock end ***********************************************/
	
}