body.loading {
	position: fixed;
}
.lazy_loading {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: #EFF1DE;
	svg {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.loading-bar {
		position: absolute;
		top: calc(50% + 80px);
		left: 50%;
		width: 160px;
		height: 8px;
		border-radius: 5px;
		border: #6A30B5 1px solid;
		background: #6A30B5;
		transform: translateX(-50%);
		&>div {
			position: absolute;
			width: 100%;
			right: 0;
			top: 0px;
			bottom: 0px;
			border-radius: 4px;
			background: #FFFFFF;
			transform-origin: right center;
		}
	}
}

body::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
 
body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px #FFFFFF;
}
 
body::-webkit-scrollbar-thumb {
  background-color: #000000;
  outline: 1px solid #000000;
}

.visible-xs {
	@media (min-width: 1081px) {
		display: none !important;
	}
	@media (max-width: 1080px) {
		display: block !important;
	}
}
.hidden-xs {
	@media (max-width: 1080px) {
		display: none !important;
	}
}

.bg-center {
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
h2 {
	position: relative;
	margin: 0;
	padding-bottom: calc(10vw / 19.2) 0;
	color: #FD5D4D;
	font-size: calc(48vw / 19.2);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	letter-spacing: 0.1em;
	@media (max-width: 1440px) {
		font-size: 36px;
	}
}
h3 {
	position: relative;
	margin: 0;
	padding-bottom: calc(10vw / 19.2) 0;
	color: #FD5D4D;
	font-size: calc(20vw / 19.2);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	@media (max-width: 1440px) {
		font-size: 15px;
	}
}
.btn-custom {
	display: block;
	position: relative;
	padding: 14px 30px;
	width: calc(100% - 60px);
	color: #FFFFFF;
	font-size: 20px;
	line-height: 28px;
	text-align: center;
	text-decoration: none;
	background: #FD5D4D;
	border-radius: 30px;
}
.grid-item {
	display: flex;
	display: -webkit-flex;
	position: relative;
	&[data-type=artise] {
		display: inline-flex;
		display: -webkit-inline-flex;
		margin-top: calc(74vw / 19.2);
		gap: calc(31vw / 19.2);
		@media (max-width: 767px) {
			display: inline-grid;
			display: -webkit-inline-grid;
			gap: calc(30vw / 7.68);
			grid-template: 'a b c d';
			padding: 0 30px;
		}
		@media (max-width: 575px) {
			display: inline-grid;
			display: -webkit-inline-grid;
			gap: calc(30vw / 7.68);
			grid-template: 'a b';
		}
		&>* {
			width: calc(340vw / 19.2);
			@media (max-width: 767px) {
				width: auto;
			}
			img {
				width: 100%;
				height: auto;
			}
			p {
				margin: calc(31vw / 19.2) 0 0;
				padding: 0;
				color: #252525;
				font-size: calc(32vw / 19.2);
				font-weight: 500;
				line-height: 1.5;
				text-align: left;
				letter-spacing: 0.04em;
				@media (max-width: 1440px) {
					font-size: 24px;
				}
			}
		}
	}
	&[data-type=service] {
		display: inline-flex;
		display: -webkit-inline-flex;
		margin-top: calc(70vw / 19.2);
		gap: calc(20vw / 19.2);
		@media (max-width: 767px) {
			display: inline-grid;
			display: -webkit-inline-grid;
			grid-template: 'a b c d';
		}
		@media (max-width: 575px) {
			display: inline-grid;
			display: -webkit-inline-grid;
			gap: calc(30vw / 7.68);
			grid-template: 'a b';
		}
		&>* {
			img {
				width: calc(340vw / 19.2);
				height: calc(340vw / 19.2);
			}
			p {
				margin: calc(28vw / 19.2) 0 0;
				padding: 0;
				color: #252525;
				font-size: calc(24vw / 19.2);
				font-weight: 500;
				line-height: 1.5;
				@media (max-width: 1440px) {
					font-size: 18px;
				}
			}
		}
	}
	&[data-type=news] {
		margin-top: calc(74vw / 19.2);
		.swiper {
			width: calc(1180vw / 19.2);
		}
		.item {
			display: flex;
			display: -webkit-flex;
			gap: calc(20vw / 19.2);
			/* width: calc(1180vw / 19.2); */
			@media (max-width: 767px) {
				flex-flow: column;
				-webkit-flex-flow: column;
			}
			.img {
				width: calc(580vw / 19.2);
				height: calc(323vw / 19.2);
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
				@media (max-width: 767px) {
					width: calc(472vw / 7.68);
					height: calc(262.855vw / 7.68);
				}
			}
			.info {
				padding: calc(20vw / 19.2) calc(20vw / 19.2) calc(10vw / 19.2);
				width: calc(580vw / 19.2);
				text-align: left;
				@media (max-width: 767px) {
					padding: calc(20vw / 19.2) 0 calc(10vw / 19.2);
					width: 100%;
				}
			}
			h3 {
				color: #252525;
				font-size: calc(32vw / 19.2);
				font-weight: 500;
				line-height: 1.5;
				text-align: left;
				letter-spacing: 0.04em;
				@media (max-width: 1440px) {
					font-size: 24px;
				}
			}
			.desc {
				margin-top: calc(34vw / 19.2);
				color: #252525;
				font-size: calc(16vw / 19.2);
				font-weight: 400;
				line-height: 1.5;
				text-align: left;
				letter-spacing: 0.04em;
				@media (max-width: 1440px) {
					font-size: 12px;
				}
			}
			.btn-custom {
				display: inline-block;
				display: -webkit-inline-block;
				margin-top: calc(50vw / 19.2);
				padding: calc(10vw / 19.2) calc(40vw / 19.2);
				width: auto;
				min-width: unset;
				color: #FFFFFF;
				font-size: calc(20vw / 19.2);
				font-weight: 500;
				line-height: 1.5;
				letter-spacing: 0.04em;
				background-color: #FD5D4D;
				border-radius: calc(10vw / 19.2);
				@media (max-width: 1440px) {
					font-size: 15px;
				}
			}
		}
		.custom-swiper-button-prev, 
		.custom-swiper-button-next {
			position: absolute;
			top: 50%;
			width: calc(100vw / 19.2);
			height: calc(100vw / 19.2);
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			transform: translateY(-50%);
			cursor: pointer;
		}
		.custom-swiper-button-prev {
			left: calc(250vw / 19.2);
			background-image: url('./../images/homepage/btn-prev.svg');
		}
		.custom-swiper-button-next {
			right: calc(250vw / 19.2);
			background-image: url('./../images/homepage/btn-next.svg');
		}
	}
	&[data-type=follow] {
		padding-top: calc(40vw / 19.2);
		gap: calc(36vw / 19.2);
		@media (max-width: 768px) {
			display: inline-flex;
			display: -webkit-inline-flex;
		}
		&>* {
			width: calc(36vw / 19.2);
			height: calc(36vw / 19.2);
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			cursor: pointer;
			&.icon-fb {
				background-image: url('./../images/homepage/icon-fb.svg');
			}
			&.icon-ig {
				background-image: url('./../images/homepage/icon-ig.svg');
			}
			&.icon-tt {
				background-image: url('./../images/homepage/icon-tt.svg');
			}
			&.icon-wc {
				background-image: url('./../images/homepage/icon-wc.svg');
			}
			&.icon-wb {
				background-image: url('./../images/homepage/icon-wb.svg');
			}
		}
	}
	&[data-type=gallery] {
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		margin-top: calc(70vw / 19.2);
		gap: calc(60vw / 19.2);
		img {
			width: 100%;
		}

		&>* {
			&.size-1 {
				width: 100%;
			}
			&.size-2 {
				width: calc(100% / 2 - 15px);
			}
			&.size-3 {
				width: calc(100% / 3 - 15px * 2);
			}
			&>div {
				display: flex;
				display: -webkit-flex;
				flex-wrap: wrap;
				-webkit-flex-wrap: wrap;
				gap: calc(15vw / 19.2);
				&>* {
					flex: 1;
					-webkit-flex: 1;
				}
				&>.iframe {
					flex: auto;
					-webkit-flex: auto;
					position: relative;
					padding-top: 56.25%;
					width: 100%;
					height: 0;
					&>iframe {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}

html, body {
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans TC', sans-serif;
}

.btn-menu {
	position: fixed;
	cursor: pointer;
}
.menu-desktop {
	display: flex;
	display: -webkit-flex;
	position: fixed;
	align-items: center;
	margin: 0;
	padding: calc(30vw / 19.2) calc(32vw / 19.2);
	left: 50%;
	top: 0;
	width: calc(1376vw / 19.2);
	height: calc(40vw / 19.2);
	background-color: transparent;
	border-radius: calc(200vw / 19.2);
	transform: translateX(-50%);
	z-index: 20;
	@media (max-width: 1440px) {
		padding: 9px 31.5px;
		width: 1080px;
		height: 60px;
		border-radius: 150px;
		box-sizing: border-box;
	}
	@media (max-width: 1080px) {
		flex-flow: column;
		-webkit-flex-flow: column;
		padding: 15px 0;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 42px;
		height: auto;
		height: 30px;
		background: linear-gradient( #FFFFFF 0px , #FFFFFF 60px , transparent 60px, transparent 100% );
		/* box-shadow: rgba(0,0,0,.1) 0px 1px 1px; */
		border-radius: 0;
		transform: none;
		box-sizing: content-box;
		overflow: hidden;
		transition: 300ms;
	}
	@media (max-width: 390px) {
		padding: calc(15vw / 3.9) 0;
		height: calc(30vw / 3.9);
		background: linear-gradient( #FFFFFF 0px , #FFFFFF calc(60vw / 3.9) , transparent calc(60vw / 3.9), transparent 100% );
	}

	.logo {
		width: calc(290vw / 19.2);
		height: calc(40vw / 19.2);
		@media (max-width: 1440px) {
			width: 217.5px;
			height: 30px;
		}
		@media (max-width: 1080px) {
			width: 217.5px;
			height: 30px;
		}
		@media (max-width: 390px) {
			width: calc(217.5vw / 3.9);
			height: calc(30vw / 3.9);
		}
		img {
			width: 100%;
			height: 100%;
		}
	}
	.content {
		flex: 1;
		-webkit-flex: 1;
		text-align: right;
		@media (max-width: 1080px) {
			position: absolute;
			right: 0;
			top: 60px;
			background-color: #FFFFFF;
		}
		@media (max-width: 390px) {
			top: calc(60vw / 3.9);
		}
		.sitemap {
			display: inline-flex;
			display: -webkit-inline-flex;
			gap: calc(40vw / 19.2);
			@media (max-width: 1440px) {
				gap: 30px;
			}
			@media (max-width: 1080px) {
				flex-flow: column;
				-webkit-flex-flow: column;
				gap: 0;
				margin: 0;
				padding: 0;
				text-align: center;
			}
			&>* {
				position: relative;
				padding: calc(6vw / 19.2) calc(10vw / 19.2);
				color: #252525;
				font-size: calc(18vw / 19.2);
				font-weight: 400;
				line-height: 1.5;
				list-style-type: none;
				cursor: pointer;
				@media (max-width: 1440px) {
					padding: 4.5px 7.5px;
					font-size: 16px;
				}
				@media (max-width: 1080px) {
					padding: 8px 20px;
					min-width: 280px;
					font-size: 16px;
				}
				&.active {
					color: #F1F3E3;
					text-shadow: rgba(37,37,37,.8) 1px 1px;
					@media (max-width: 1080px) {
						color: #F1F3E3;
						background-color: #000000;
					}
					&:after {
						content: '';
						position: absolute;
						left: 0;
						right: 0;
						top: 100%;
						height: calc(3vw / 19.2);
						background-color: #F1F3E3;
						@media (max-width: 1080px) {
							display: none;
						}
					}
				}
			}
		}
	}

	&.active {
		@media (max-width: 1080px) {
			height: 260px;
		}
		@media (max-width: 390px) {
			height: calc(60vw / 3.9 + 200px);
		}
	}
}
.btn-menu {
	right: 0;
	top: 0;
	width: 60px;
	height: 60px;
	background: #000000;
	z-index: 10;
	@media (max-width: 390px) {
		width: calc(60vw / 3.9);
		height: calc(60vw / 3.9);
	}
	&>i {
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		width: calc(50vw / 19.2);
		height: calc(7.76vw / 19.2);
		background: #FFFFFF;
		border-radius: 4px;
		transform: translate(-50%, -50%);
		transition: 300ms;
		@media (min-width: 390px) and (max-width: 1080px) {
			width: 30px;
			height: 4.66px;
		}
		@media (max-width: 390px) {
			width: calc(30vw / 3.9);
			height: calc(4.66vw / 3.9);
		}
		&:before, &:after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			width: calc(50vw / 19.2);
			height: calc(7.76vw / 19.2);
			background: #FFFFFF;
			border-radius: 4px;
			transition: 300ms;
			@media (min-width: 390px) and (max-width: 1080px) {
				width: 30px;
				height: 4.66px;
			}
			@media (max-width: 390px) {
				width: calc(30vw / 3.9);
				height: calc(4.66vw / 3.9);
			}
		}
		&:before {
			transform: translateY(calc(-17.76vw / 19.2));
			@media (min-width: 390px) and (max-width: 1080px) {
				transform: translateY(-10px);
			}
			@media (max-width: 390px) {
				transform: translateY(calc(-10vw / 3.9));
			}
		}
		&:after {
			transform: translateY(calc(17.76vw / 19.2));
			@media (min-width: 390px) and (max-width: 1080px) {
				transform: translateY(10px);
			}
			@media (max-width: 390px) {
				transform: translateY(calc(10vw / 3.9));
			}
		}
	}
	&.active {
		z-index: 12;
		&>i {
			width: 0;
			height: 0;
			&:before{
				transform: translateX(-50%) rotate(45deg);
			}
			&:after {
				transform: translateX(-50%) rotate(-45deg);
			}
		}
	}
}
.menu {
	position: fixed;
	left: calc(100% - 140vw / 19.2);
	right: 0;
	top: 0;
	bottom: calc(100% - 140vw / 19.2);
	min-height: 0;
	background-color: #B21B20;
	border-bottom-left-radius: 100%;
	transition: 200ms;
	transition-timing-function: cubic-bezier(1, 0.3, 0.3, 0.24);
	overflow: hidden;
	z-index: 9;
	&.active {
		left: 0;
		bottom: 0;
		min-height: 480px;
		border-bottom-left-radius: 0%;
		z-index: 11;
	}
	
	.lang {
		position: absolute;
		padding-left: 43px;
		left: calc(250vw / 19.2);
		top: calc(69vw / 19.2);
		background-image: url('./../images/common/lang.svg');
		background-position: left center;
		background-size: 32px auto;
		background-repeat: no-repeat;
		@media (min-width: 390px) and (max-width: 1080px) {
			top: 40px;
			left: 40px;
			transform: translateY(-50%);
		}
		@media (max-width: 390px) {
			top: calc(40vw / 3.9);
			left: calc(40vw / 3.9);
			transform: translateY(-50%);
		}
		a {
			position: relative;
			color: rgba(255,255,255,.5);
			font-weight: 400;
			font-size: 24px;
			line-height: 34px;
			letter-spacing: 0.06em;
			text-decoration: none;
			&.active {
				color: rgba(255,255,255);
			}
			&+a {
				margin-left: 34px;
				&:before {
					content: '/';
					position: absolute;
					left: -17px;
					color: #FFFFFF;
					transform: translateX(-50%);
					transform: translate(-50%, -50%);
					top: 50%;
				}
			}
		}
	}

	.content {
		position: relative;
		left: 50%;
		top: 50%;
		text-align: center;
		transform: translate(-50%, -50%);
	}
	
	ul {
		display: inline-flex;
		display: -webkit-inline-flex;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		gap: calc(80vw / 19.2);
		padding: 0px;
		list-style-type: none;
		@media (min-width: 390px) and (max-width: 768px) {
			gap: 60px;
		}
		@media (max-width: 390px) {
			gap: calc(60vw / 3.9);
		}
		li {
			width: 100%;
			text-align: center;
			color: #FFFFFF;
			font-weight: 600;
			font-size: 36px;
			line-height: 50px;
			letter-spacing: 0.06em;
			white-space: nowrap;
			cursor: pointer;
			@media (max-width: 768px) {
				font-size: 28px;
				line-height: 39px;
			}
		}
	}
	.social {
		margin-top: 24px;
		text-align: right;
		display: inline-flex;
		display: -webkit-inline-flex;
		gap: 30px;
		text-align: right;
		&>a {
			width: 40px;
			height: 40px;
		}
		.fb {
			background-image: url('./../images/common/fb-white.svg');
		}
		.ig {
			background-image: url('./../images/common/ig-white.svg');
		}
	}
}

#banner {
	position: relative;
	height: calc(880vw / 19.2);
	background: url('./../images/homepage/banner-bg.png');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	@media (max-width: 1080px) {
		margin-top: 60px;
	}
	@media (max-width: 390px) {
		margin-top: calc(60vw / 3.9);
	}

	.content {
		position: absolute;
		left: calc(980vw / 19.2);
		top: calc(265vw / 19.2);
		@media (max-width: 1440px) {
			/* top: 177px; */
		}
		@media (max-width: 1080px) {
			top: calc(150vw / 10.8);
		}
		
		.title {
			margin: 0 0 calc(34vw / 19.2);
			padding: 0;
			color: #252525;
			font-size: calc(68vw / 19.2);
			font-weight: 900;
			line-height: 1.5;
			letter-spacing: 0.1em;
			@media (max-width: 1440px) {
				font-size: 49.5px;
			}
			@media (max-width: 1080px) {
				font-size: 37.125px;
			}
			@media (max-width: 767px) {
				font-size: calc(24vw / 7.68);
			}
			@media (max-width: 575px) {
				font-size: 18px;
			}
		}
		.desc {
			margin: 0;
			padding: 0;
			color: #252525;
			font-size: calc(48vw / 19.2);
			font-weight: 500;
			line-height: 1.5;
			letter-spacing: 0.1em;
			@media (max-width: 1440px) {
				font-size: 18px;
			}
			@media (max-width: 1080px) {
				font-size: 13.5px;
			}
		}
	}

	img {
		position: absolute;
		left: calc(270vw / 19.2);
		top: calc(200vw / 19.2);
		width: calc(660vw / 19.2);
		height: calc(800vw / 19.2);
		z-index: 2;
	}
}
#banner-slide {
	position: relative;
	margin-bottom: calc(-130vw / 19.2);
	transform: translateY(-50%);
	.custom-swiper-button-prev, 
	.custom-swiper-button-next {
		position: absolute;
		left: calc(268vw / 19.2);
		width: calc(64vw / 19.2);
		height: calc(64vw / 19.2);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		cursor: pointer;
	}
	.custom-swiper-button-prev {
		bottom: calc(104vw / 19.2);
		background-image: url('./../images/homepage/btn-prev.svg');
	}
	.custom-swiper-button-next {
		bottom: 0;
		background-image: url('./../images/homepage/btn-next.svg');
	}
}


#gallery {
	position: relative;
	padding: 0 calc(370vw / 19.2);
	padding-top: calc(181vw / 19.2);

	/* display: none; */

	/* position: fixed;
	top: 5vw;
	bottom: 5vw;
	left: 5vw;
	right: 5vw;
	background: #FFFFFF;
	margin: 0;
	z-index: 1000;
	overflow: auto;
	border: #FD5D4D 1px solid;
	border-radius: 4px;

	&::-webkit-scrollbar {
		width: 2px;
		height: 2px;
	}
	
	&::-webkit-scrollbar-track {
		box-shadow: inset 0 0 6px #FFFFFF;
	}
	
	&::-webkit-scrollbar-thumb {
		background-color: #000000;
		outline: 1px solid #000000;
	} */

	/* .btn-close-gallery {
		position: fixed;
		right: 7vw;
		top: 7vw;
		width: 32px;
		height: 32px;
		cursor: pointer;
		&:before, &:after {
			content: '';
			position: absolute;
			width: 100%;
			height: 2px;
			background-color: #000000;
		}
		&:before {
			transform: rotate(45deg);
		}
		&:after {
			transform: rotate(-45deg);
		}
	} */
}

#artise {
	margin-top: calc(110vw / 19.2);
	padding-top: calc(100vw / 19.2);
	text-align: center;
}

#service {
	margin-top: calc(150vw / 19.2);
	margin-top: calc(-84vw / 19.2);
	text-align: center;
	transform: skew(0, -5deg);
	background-color: #EFF1DE;
	&>div {
		transform: skew(0, 5deg);
		padding: calc(124vw / 19.2) calc(250vw / 19.2) calc(57vw / 19.2);
	}
	.content {
		position: relative;
		margin: 0 calc(120vw / 19.2);

		&:before {
			content: '';
			position: absolute;
			left: 0;
			right: calc(247vw / 19.2);
			top: 50%;
			height: calc(2vw / 19.2);
			background-color: #4BDC97;
			transform: translateY(-50%);
			@media (max-width: 1440px) {
				right: 185.25px;
				height: 1.5px;
			}
		}
	}
	h2, h3 {
		text-align: right;
	}
	.sticker {
		position: absolute;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 50%;
		pointer-events: none;
		overflow: hidden;
		border-radius: 0;
		background-size: 100%;
		z-index: -1;
		&.sticker-0 {
			left: 0;
			right: 0;
			bottom: calc(-85vw / 19.2);
			height: calc(170vw / 19.2);
			background: #EFF1DE;
		}
		&.sticker-1 {
			left: calc(61.82vw / 19.2);
			left: calc(53.82vw / 19.2);
			top: calc(-100vw / 19.2);
			width: calc(216.36vw / 19.2);
			height: calc(573.96vw / 19.2);
			&.visible {
				background-image: url('./../images/homepage/sticker-1.png');
			}
		}
	}
}

#news {
	position: relative;
	text-align: center;
	margin-top: calc(115vw / 19.2);
	padding-top: calc(100vw / 19.2);
	.sticker {
		position: absolute;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 50%;
		pointer-events: none;
		overflow: hidden;
		border-radius: 0;
		background-size: 100%;
		z-index: -1;
		&.sticker-0 {
			left: calc(69vw / 19.2);
			top: calc(-50vw / 19.2);
			width: calc(280vw / 19.2);
			height: calc(220vw / 19.2);
			&.visible {
				background-image: url('./../images/homepage/sticker-2.png');
			}
		}
	}
}

.col {
	padding: 0 15px;
}
.col-md-6 {
	width: 50%;
	@media (min-width: 1081px) {
		width: 50% !important;
	}
}
.col-xs-12 {
	width: 100%;
	@media (max-width: 1080px) {
		width: 100% !important;
	}
}

#about {
	position: relative;
	margin-top: calc(181vw / 19.2);
	padding: 0 calc(730vw / 19.2) calc(149vw / 19.2) calc(370vw / 19.2) ;

	.content {
		position: relative;
		.content-title {
			position: relative;
			&:before {
				content: '';
				position: absolute;
				left: calc(247vw / 19.2);
				right: 0;
				top: 50%;
				height: calc(2vw / 19.2);
				background-color: #4BDC97;
				transform: translateY(-50%);
				@media (max-width: 1440px) {
					left: 185.25px;
					height: 1.5px;
				}
			}
		}
		.content-desc {
			padding: calc(74vw / 19.2) 0 calc(84vw / 19.2);
		}
		.title {
			text-align: left;
		}
		.desc {
			font-size: calc(16vw / 19.2);
			font-weight: 400;
			line-height: 1.5;
			@media (max-width: 1440px) {
				font-size: 12px;
			}
		}

		&:before {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: calc(2vw / 19.2);
			background-color: #4BDC97;
			transform: translateY(-50%);
			@media (max-width: 1440px) {
				height: 1.5px;
			}
		}
	}

	.sticker {
		position: absolute;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 50%;
		pointer-events: none;
		overflow: hidden;
		border-radius: 0;
		background-size: 100%;
		z-index: -1;
		&.sticker-0 {
			right: calc(100vw / 19.2);
			top: calc(-80vw / 19.2);
			width: calc(480vw / 19.2);
			height: calc(424vw / 19.2);
			&.visible {
				background-image: url('./../images/homepage/sticker-3.png');
			}
		}
		&.sticker-1 {
			left: calc(1210vw / 19.2);
			bottom: calc(-30vw / 19.2);
			width: calc(340vw / 19.2);
			height: calc(198vw / 19.2);
			z-index: 11;
			&.visible {
				background-image: url('./../images/homepage/sticker-4.png');
			}
		}
	}
}

#intro {
	display: flex;
	display: -webkit-flex;
	position: relative;
	margin-top: calc(30vw / 19.2);
	padding: 0 calc(370vw / 19.2) calc(149vw / 19.2) calc(370vw / 19.2) ;
	gap: calc(60vw / 19.2);
	img {
		width: calc(500vw / 19.2);
		@media( max-width: 767px ) {
			width: 100%;
		}
	}
	@media( max-width: 767px ) {
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
	}

	.content {
		position: relative;
		.content-title {
			position: relative;
			white-space: nowrap;
			&:before {
				content: '';
				position: absolute;
				right: calc(400vw / 19.2);
				left: 0;
				top: 50%;
				height: calc(2vw / 19.2);
				background-color: #4BDC97;
				transform: translateY(-50%);
				@media (max-width: 1440px) {
					left: 185.25px;
					height: 1.5px;
				}
			}
		}
		.content-desc {
			padding: calc(74vw / 19.2) 0 calc(84vw / 19.2);
		}
		.title {
			text-align: right;
		}
		.desc {
			font-size: calc(16vw / 19.2);
			font-weight: 400;
			line-height: 1.5;
			@media (max-width: 1440px) {
				font-size: 12px;
			}
		}

		&:before {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: calc(2vw / 19.2);
			background-color: #4BDC97;
			transform: translateY(-50%);
			@media (max-width: 1440px) {
				height: 1.5px;
			}
		}
	}
}

#more {
	display: flex;
	display: -webkit-flex;
	@media (max-width: 1440px) {
		flex-flow: column;
		-webkit-flex-flow: column;
	}
	&>div {
		flex: 1;
		-webkit-flex: 1;
		height: calc(361.11vw / 19.2);
   		box-sizing: border-box;
		@media (max-width: 1440px) {
			height: auto;
		}
	}
	.follow {
		position: relative;
		padding: calc(60vw / 19.2) calc(120vw / 19.2) 0 calc(250vw / 19.2);
		background-color: #F9796C;
		@media (max-width: 1440px) {
			padding-right: calc(250vw / 19.2);
			padding-bottom: calc(60vw / 19.2);
		}
	}
	.hkfym {
		display: flex;
		display: -webkit-flex;
		gap: calc(40vw / 19.2);
		position: relative;
		padding: calc(60vw / 19.2) calc(250vw / 19.2) 0 calc(40vw / 19.2);
		background-color: #4FCF92;
		@media (max-width: 1440px) {
			padding-left: calc(250vw / 19.2);
			padding-bottom: calc(60vw / 19.2);
		}
	}
	.image-div {
		width: calc(180vw / 19.2);
		height: calc(241.11vw / 19.2);
		@media (max-width: 1440px) {
			width: 180px;
			height: auto;
		}
		img {
			width: 100%;
		}
	}
	.content-div {
		width: calc(450vw / 19.2);
		@media (max-width: 1440px) {
			width: 100%;
		}
	}
	h3 {
		color: #FFFFFF;
		font-size: calc(20vw / 19.2);
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: 0.1em;
		text-align: left;
		text-transform: uppercase;
		@media (max-width: 1440px) {
			font-size: 15px;
		}
	}
	h2 {
		color: #FFFFFF;
		font-size: calc(32vw / 19.2);
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: 0.1em;
		text-align: left;
		@media (max-width: 1440px) {
			font-size: 24px;
		}
	}
	.desc {
		margin-top: calc(20vw / 19.2);
		margin-bottom: calc(20vw / 19.2);
		color: #FFFFFF;
		font-size: calc(16vw / 19.2);
		font-weight: 400;
		line-height: 1.5;
		letter-spacing: 0.1em;
		@media (max-width: 1440px) {
			font-size: 12px;
		}
	}
	.btn-more {
		padding-right: calc(40vw / 19.2);
		color: #FFFFFF;
		font-size: calc(16vw / 19.2);
		font-weight: 400;
		line-height: 1.5;
		letter-spacing: 0.1em;
		background-image: url('./../images/homepage/btn-more.svg');
		background-position: right center;
		background-size: calc(20vw / 19.2) auto;
		background-repeat: no-repeat;
		cursor: pointer;
		@media (max-width: 1440px) {
			font-size: 12px;
		}
	}
	.social {
		margin-top: 24px;
		text-align: right;
		display: inline-flex;
		display: -webkit-inline-flex;
		gap: 30px;
		text-align: right;
		&>a {
			width: 40px;
			height: 40px;
		}
		.icon-fb {
			background-image: url('./../images/common/fb-white.svg');
		}
		.icon-ig {
			background-image: url('./../images/common/ig-white.svg');
		}
	}
}

form {
	border: none;
	margin: auto;
	max-width: calc(1280 / 19.2);
	fieldset {
		border: none;
		padding: 0;
	}
	label {
		display: block;
		width: 100%;
		color: #333030;
		font-size: 14px;
		line-height: 1.4;
		letter-spacing: 0.04em;
		&.req {
			&:after {
				content: '*';
				
			}
		}
	}
	input, textarea {
		display: block;
		padding: 4px 0;
		width: 100%;
		color: #333030;
		font-size: 16px;
		line-height: 1;
		background: transparent;
		border: none;
		border-bottom: 1px solid #333030;
		outline: none;
	}
	input {
		&[type=submit] {
			max-width: calc(240vw / 19.2);
			margin: 20px auto 20px;
			padding: 8px 20px;
			border-radius: 10px;
			float: left;
			@media (max-width: 767px) {
				max-width: 330px;
			}
		}
	}
	textarea {
		resize: none;
	}
	.input-group {
		display: flex;
		display: -webkit-flex;
		gap: calc(80vw / 19.2) calc(40vw / 19.2);
		@media (max-width: 768px) {
			gap: 44px;
		}
		@media (max-width: 767px) {
			flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
		}
		.input {
			flex: 1;
			-webkit-flex: 1;
			@media (max-width: 767px) {
				flex: auto;
				-webkit-flex: auto;
				width: 100%;
			}
		}
		&+.input-group {
			margin-top: calc(40vw / 19.2);
			@media (max-width: 768px) {
				margin-top: 44px;
			}
		}
	}
	.input {
		display: inline-block;
		display: -webkit-inline-block;
	}
}

#contact {
	position: relative;
	padding: calc(70vw / 19.2) 0;
	color: #FD5D4D;
	background-color: #FFFFFF;
    z-index: 1;
	h2 {
		color: #FD5D4D;
	}
	.content {
		text-align: center;
	}
	.content-desc {
		display: inline-flex;
		display: -webkit-inline-flex;
		gap: 0;
		align-items: center;
		margin: calc(20vw / 19.2) auto 0;
		padding: 0;
		width: calc(1180vw / 19.2);
		background-color: #FFFFFF;
		border-radius: calc(24vw / 19.2);
		overflow: hidden;
		@media (max-width: 768px) {
			width: 100%;
			border-radius: 0;
			flex-wrap: wrap;
		}
		.content-img-main {
			width: calc(0vw / 19.2);
			height: calc(560vw / 19.2);
			background-position: center center;
			background-size: cover;
			background-repeat: no-repeat;
			@media (max-width: 768px) {
				width: calc(0vw / 10.8);
				height: calc(0vw / 10.8);
			}
		}
		.desc {
			flex: 1;
			-webkit-flex: 1;
			padding: calc(44vw / 19.2) calc(44vw / 19.2);
			text-align: left;
			@media (max-width: 768px) {
				padding: 30px 30px;
			}
			@media (max-width: 575px) {
				padding: calc(30vw / 5.75) calc(30vw / 5.75);
			}
		}
		h3 {
			text-align: left;
			font-size: calc(36vw / 19.2);
			font-weight: 700;
			letter-spacing: calc(3.6vw / 19.2);
			@media (max-width: 768px) {
				font-size: 24px;
				letter-spacing: 0;
			}
			@media (max-width: 575px) {
				font-size: calc(24vw / 5.75);
			}
		}
		.info {
			display: flex;
			display: -webkit-flex;
			flex-direction: column;
			gap: calc(14vw / 19.2);
			margin: calc(30vw / 19.2) 0;
			font-size: calc(16vw / 19.2);
			@media (max-width: 768px) {
				gap: 10px;
				margin: 30px 0;
				font-size: 16px;
			}
			@media (max-width: 575px) {
				font-size: calc(16vw / 5.75);
			}
			&>* {
				padding-left: calc(33vw / 19.2);
				color: #484848;
				@media (max-width: 768px) {
					padding-left: 30px;
				}
				@media (max-width: 575px) {
					padding-left: calc(30vw / 5.75);
				}
				a {
					color: #484848;
					text-decoration: none;
				}

				&.address, &.phone {
					background-position: left top;
					background-size: calc(24vw / 19.2) auto;
					background-repeat: no-repeat;
					@media (max-width: 768px) {
						background-size: 20px auto;
						background-position: 0 3px;
					}
					@media (max-width: 575px) {
						background-size: calc(20vw / 5.75) auto;
						background-position: 0 calc(3vw / 5.75);
					}
				}
				&.address {
					background-image: url('./../images/homepage/info-address.png');
				}
				&.phone {
					background-image: url('./../images/homepage/info-phone.png');
				}
			}
		}
		.content-img-location {
			width: 100%;
			height: calc(421vw / 19.2);
			background-position: center center;
			background-size: cover;
			background-repeat: no-repeat;
		}
		.dt-location-map {
			@media (max-width: 768px) {
				display: none;
			}
		}
		.mb-location-map {
			display: none;
			width: 100%;
			@media (max-width: 768px) {
				display: block;
			}
			div {
				padding-top: 38.6%;
				width: 100%;
				height: 0;
				background-position: center center;
				background-size: cover;
				background-repeat: no-repeat;
			}
		}
	}
}

.footer {
	position: relative;
	z-index: 10;
	.flex {
		display: flex;
		display: -webkit-flex;
		gap: calc(60vw / 19.2);
		align-items: center;
		&:last-child {
			padding: calc(36vw / 19.2) calc(30vw / 19.2);
			background: #000000;
			@media (max-width: 768px) {
				padding: 14px 20px;
			}
		}
	}
	.copyright {
		flex: 1;
		-webkit-flex: 1;
		color: #CCCCCC;
		font-size: 13px;
		line-height: 1;
		text-align: center;
		@media (max-width: 768px) {
			text-align: center;
		}
	}
}

.btn-open-gallery {
	cursor: pointer;
}