body.loading {
	position: fixed;
}
.lazy_loading {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: #FFF5E7;
	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: #B21B20 1px solid;
		background: #B21B20;
		transform: translateX(-50%);
		&>div {
			position: absolute;
			width: 100%;
			right: 0;
			top: 0px;
			bottom: 0px;
			border-radius: 4px;
			background: #FFF5E7;
			transform-origin: right center;
		}
	}
}

.ball {
	display: inline-block;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	position: relative;
	background: radial-gradient(circle at bottom, rgba(255,255,255,.0) , rgba(255,255,255,.1) 10%, rgba(0,0,0,.2) 80%, rgba(0,0,0,.3) 100%);
	&:before, &:after {
		content: "";
		position: absolute;
	}
	&:before {
		/* top: 1%;
		left: 5%; */
		width: 90%;
		height: 90%;
		border-radius: 100%;
		background: radial-gradient(circle at top, white, rgba(255, 255, 255, 0) 58%);
		-webkit-filter: blur(5px);
		filter: blur(5px);
		z-index: 2;
	}
	&:after {
		display: none;
		/* top: 5%;
		left: 10%; */
		width: 80%;
		height: 80%;
		border-radius: 100%;
		-webkit-filter: blur(1px);
		filter: blur(1px);
		z-index: 2;
		-webkit-transform: rotateZ(-30deg);
		transform: rotateZ(-30deg);
		transform: rotateZ(-110deg);
	}
	.shadow {
		position: absolute;
		width: 100%;
		height: 100%;
		background: radial-gradient(circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
		-webkit-transform: rotateX(90deg) translateZ(-160px);
		transform: rotateX(90deg) translateZ(-160px);
		z-index: 1;
	}
	&.plain {
		background: black;
		&:before, &:after {
			display: none;
		}
	}
	&.bubble {
		background: radial-gradient(circle at 50% 55%, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.3) 40%, rgba(225, 238, 255, 0.2) 60%, rgba(43, 130, 255, 0.1));
		-webkit-animation: bubble-anim 2s ease-out infinite;
		animation: bubble-anim 2s ease-out infinite;
		&:before {
			-webkit-filter: blur(0);
			filter: blur(0);
			height: 80%;
			width: 40%;
			background: radial-gradient(circle at 130% 130%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 58%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
			-webkit-transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);
			transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);
		}
		&:after {
			display: block;
			background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, white 80%, white 84%, rgba(255, 255, 255, 0) 100%);
		}
	}
}

@-webkit-keyframes bubble-anim {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	20% {
		-webkit-transform: scaleY(0.95) scaleX(1.05);
		transform: scaleY(0.95) scaleX(1.05);
	}
	48% {
		-webkit-transform: scaleY(1.1) scaleX(0.9);
		transform: scaleY(1.1) scaleX(0.9);
	}
	68% {
		-webkit-transform: scaleY(0.98) scaleX(1.02);
		transform: scaleY(0.98) scaleX(1.02);
	}
	80% {
		-webkit-transform: scaleY(1.02) scaleX(0.98);
		transform: scaleY(1.02) scaleX(0.98);
	}
	97%, 100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	} 
}
@keyframes bubble-anim {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	20% {
		-webkit-transform: scaleY(0.95) scaleX(1.05);
		transform: scaleY(0.95) scaleX(1.05);
	}
	48% {
		-webkit-transform: scaleY(1.1) scaleX(0.9);
		transform: scaleY(1.1) scaleX(0.9);
	}
	68% {
		-webkit-transform: scaleY(0.98) scaleX(1.02);
		transform: scaleY(0.98) scaleX(1.02);
	}
	80% {
		-webkit-transform: scaleY(1.02) scaleX(0.98);
		transform: scaleY(1.02) scaleX(0.98);
	}
	97%, 100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes scroll-down {
	0% {
		height: 0px;
	}
	100% {
		height: calc(60vw / 19.2);
	} 
}
@-webkit-keyframes scroll-down {
	0% {
		height: 0px;
	}
	100% {
		height: calc(60vw / 19.2);
	} 
}
@keyframes scroll-down-mb {
	0% {
		height: 0px;
	}
	100% {
		height: 44px;
	} 
}
@-webkit-keyframes scroll-down-mb {
	0% {
		height: 0px;
	}
	100% {
		height: 44px;
	} 
}

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

.bg-center {
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
h1 {
	display: none;
}
h2 {
	position: relative;
	margin: 0 0 40px;
	padding-bottom: 16px;
	font-size: 36px;
	line-height: 1;
	text-align: center;
	letter-spacing: 0.06em;
	@media (max-width: 767px) {
		font-size: 28px;
		line-height: 39px;;
	}
	@media (max-width: 390px) {
		font-size: calc(28vw / 3.9);
	}
	&:after {
		content: '';
		position: absolute;
		left: 50%;
		top: 100%;
		width: 60px;
		height: 4px;
		transform: translate(-50%, -50%);
		@media (max-width: 767px) {
			width: 40px;
		}
	}
	&.red {
		/* margin-top: calc(100vw / 19.2); */
		color: #333030;
		&:after {
			background: #B21B20
		}
	}
	&.gold {
		color: #FFFFFF;
		&:after {
			background: #FEBF5D
		}
	}
}
.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: #B21B20;
	border-radius: 30px;
}
.grid-item {
	display: flex;
	display: -webkit-flex;
	position: relative;
	&[data-type=brand] {
		display: block;
		gap: calc(68vw / 19.2);
		@media (max-width: 1199px) {
			padding: 0 calc(250vw / 19.2);
		}
		.item {
			width: calc(100% / 3 - 68vw / 19.2);
			@media (max-width: 768px) {
				text-align: center;
			}
			.img {
				width: 100%;
				padding-top: 65%;
				.bg-center();
				@media (max-width: 768px) {
					padding-top: 57%;
				}
			}
			h3 {
				margin: 20px 0 30px;
				color: #333030;
				font-size: 32px;
				line-height: 1.4;
				@media (max-width: 768px) {
					margin: 15px 0 23px;
					font-size: 28px;
				}
			}
			.desc {
				min-height: 120px;
				color: #5A5A5A;
				font-size: 20px;
				line-height: 1.4;
				@media (max-width: 768px) {
					min-height: unset;
					font-size: 16px;
				}
			}
			.address {
				display: block;
				margin-top: 18px;
				padding-left: 34px;
				min-height: 68px;
				color: #5A5A5A;
				font-size: 16px;
				line-height: 1.4;
				text-decoration: none;
				&.visible {
					background-image: url('./../images/common/location.svg');
				}
				background-position: left-top;
				background-size: 24px auto;
				background-repeat: no-repeat;
				@media (max-width: 768px) {
					display: inline-block;
					display: -webkit-inline-block;
					min-height: unset;
					font-size: 14px;
				}
			}
			.phone {
				display: block;
				margin-top: 18px;
				padding-left: 34px;
				color: #5A5A5A;
				font-size: 16px;
				line-height: 1.4;
				text-decoration: none;
				&.visible {
					background-image: url('./../images/common/phone.svg');
				}
				background-position: left-top;
				background-size: 24px auto;
				background-repeat: no-repeat;
				@media (max-width: 768px) {
					display: inline-block;
					display: -webkit-inline-block;
					font-size: 14px;
				}
			}
			.follow {
				margin-top: 30px;
				font-size: 18px;
				line-height: 30px;
				@media (max-width: 768px) {
					font-size: 16px;
				}
			}
			.btn-custom {
				margin-top: 30px;
				@media (max-width: 768px) {
					margin: 44px auto 0;
					max-width: 330px;
				}
			}
		}
		.swiper-pagination {
			display: none;
			position: relative;
			margin: 50px 0 80px;
			@media (max-width: 768px) {
				display: block;
			}
			.swiper-pagination-bullet {
				margin: 0 10px;
				width: 14px;
				height: 8px;
				background: #EDEDED;
				border-radius: 10px;
				opacity: 1;
				transition: 300ms;
				&.swiper-pagination-bullet-active {
					width: 40px;
					background: #FEBF5D;
				}
			}
		}
		.swiper-button-prev, .swiper-button-next {
			display: none;
			width: 36px;
			height: 36px;
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			z-index: 5;
			&:after {
				display: none;
				content: '';
			}
			@media (max-width: 1199px) {
				display: block;
			}
			@media (max-width: 768px) {
				top: calc((100vw - 80px - 60px) * 0.285);
			}
		}
		.swiper-button-prev {
			background-image: url('./../images/common/arrow-L.svg');
		}
		.swiper-button-next {
			background-image: url('./../images/common/arrow-R.svg');
		}
	}
	&[data-type=follow] {
		padding-top: calc(20vw / 19.2);
		gap: 20px;
		@media (max-width: 768px) {
			display: inline-flex;
			display: -webkit-inline-flex;
		}
		&>* {
			width: 28px;
			height: 28px;
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			cursor: pointer;
			&.visible {
				&.social-fb {
					background-image: url('./../images/common/fb.svg');
				}
				&.social-ig {
					background-image: url('./../images/common/ig.svg');
				}
				&.social-tt {
					background-image: url('./../images/common/tt.svg');
				}
				&.social-wc {
					background-image: url('./../images/common/wc.svg');
				}
				&.social-wb {
					background-image: url('./../images/common/wb.svg');
				}
				&.social-wa {
					background-image: url('./../images/common/wa.svg');
				}
			}
		}
	}
}

html, body {
	margin: 0;
	padding: 0;
	background: #FFFFFF;
}

.logo, .btn-menu {
	position: fixed;
	cursor: pointer;
}
.logo {
	padding: 20px;
	left: 0;
	top: 0;
	width: calc(100vw / 19.2);
	height: calc(100vw / 19.2);
	background: #FFFFFF;
	border-radius: 0px 0px 40px 0px;
	z-index: 8;
	@media (min-width: 390px) and (max-width: 767px) {
		padding: 10px;
		width: 60px;
		height: 60px;
	}
	@media (max-width: 390px) {
		padding: calc(10vw / 3.9);
		width: calc(60vw / 3.9);
		height: calc(60vw / 3.9);
	}
	img {
		width: 100%;
		height: auto;
		border-radius: 50%;
	}
}
.btn-menu {
	right: 0;
	top: 0;
	width: calc(140vw / 19.2);
	height: calc(140vw / 19.2);
	background: #B21B20;
	border-radius: 0px 0px 0px 40px;
	z-index: 10;
	@media (min-width: 390px) and (max-width: 767px) {
		width: 80px;
		height: 80px;
	}
	@media (max-width: 390px) {
		width: calc(80vw / 3.9);
		height: calc(80vw / 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: 767px) {
			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: 767px) {
				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: 767px) {
				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: 767px) {
				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: 767px) {
			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;
	background: #FFF5E7;
	/* min-height: 100vh; */
	overflow: hidden;
	height: calc(960vw / 19.2);
	@media (max-width: 767px) {
		height: 100vh;
	}

	.title {
		position: absolute;
		left: 50%;
		top: 50%;
		width: calc(881vw / 19.2);
		transform: translate(-50%, calc(-50% + 8vw / 19.2));
		z-index: 5;
		&.visible-xs {
			transform: translate(-50%, -50%);
		}
	}

	.sticker {
		position: absolute;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 50%;
		pointer-events: none;
		overflow: hidden;
		transition: 3000ms;
		transition-timing-function: ease-in-out;
		opacity: 1;
		&.sticker-0 {
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			border-radius: 0;
			&.visible {
				background-image: url('./../images/homepage/sticker-0.svg');
			}
			background-size: 100%;
			@media (max-width: 767px) {
				height: 100vh;
				&.visible {
					background-image: url('./../images/homepage/sticker-0-mb.svg');
				}
				background-size: cover;
			}
		}
		&.sticker-1 {
			left: calc(-79.2vw / 19.2);
			top: calc(-154vw / 19.2);
			width: calc(660vw / 19.2);
			height: calc(660vw / 19.2);
			&.before-ani {
				left: calc(156vw / 19.2);
				top: calc(75vw / 19.2);
				width: calc(580vw / 19.2);
				height: calc(580vw / 19.2);
				opacity: 0;
			}
			&.visible {
				background-image: url('./../images/homepage/sticker-1.webp');
			}
			.bg-center();
			@media (max-width: 767px) {
				left: calc(-69vw / 3.9);
				top: calc(35.39vw / 3.9);
				width: calc(280vw / 3.9);
				height: calc(280vw / 3.9);
				&:before,&:after {
					display: none !important;
				}
				.shadow{
					display: none;
				}
			}
			&:after {
				.ball();
			}
		}
		&.sticker-2 {
			left: calc(1342.72vw / 19.2);
			top: calc(-134vw / 19.2);
			width: calc(420vw / 19.2);
			height: calc(420vw / 19.2);
			&.before-ani {
				left: calc(808vw / 19.2);
				top: calc(127vw / 19.2);
				width: calc(480vw / 19.2);
				height: calc(480vw / 19.2);
				opacity: 0;
			}
			&.visible {
				background-image: url('./../images/homepage/sticker-2.webp');
			}
			.bg-center();
			@media (max-width: 767px) {
				left: calc(192vw / 3.9);
				top: calc(507vw / 3.9);
				width: calc(240vw / 3.9);
				height: calc(240vw / 3.9);
				&:before,&:after {
					display: none !important;
				}
				.shadow{
					display: none;
				}
			}
			&:after {
				.ball();
			}
		}
		&.sticker-3 {
			left: calc(1360vw / 19.2);
			top: calc(441vw / 19.2);
			width: calc(710vw / 19.2);
			height: calc(710vw / 19.2);
			&.before-ani {
				left: calc(1167vw / 19.2);
				top: calc(303vw / 19.2);
				width: calc(580vw / 19.2);
				height: calc(580vw / 19.2);
				opacity: 0;
			}
			&.visible {
				background-image: url('./../images/homepage/sticker-3.webp');
			}
			.bg-center();
			@media (max-width: 767px) {
				left: calc(-34vw / 3.9);
				top: calc(635vw / 3.9);
				width: calc(180vw / 3.9);
				height: calc(180vw / 3.9);
				&:before,&:after {
					display: none !important;
				}
				.shadow{
					display: none;
				}
			}
			&:after {
				.ball();
			}
		}
		&.sticker-4 {
			left: calc(322.59vw / 19.2);
			top: calc(615.34vw / 19.2);
			width: calc(491vw / 19.2);
			height: calc(491vw / 19.2);
			&.before-ani {
				left: calc(461vw / 19.2);
				top: calc(493vw / 19.2);
				width: calc(380vw / 19.2);
				height: calc(380vw / 19.2);
				opacity: 0;
			}
			&.visible {
				background-image: url('./../images/homepage/sticker-4.webp');
			}
			.bg-center();
			@media (max-width: 767px) {
				left: calc(184vw / 3.9);
				top: calc(170vw / 3.9);
				width: calc(200vw / 3.9);
				height: calc(200vw / 3.9);
				&:before,&:after {
					display: none !important;
				}
				.shadow{
					display: none;
				}
			}
			&:after {
				.ball();
			}
		}
		&.sticker-5 {
			left: calc(764vw / 19.2);
			top: calc(152.45vw / 19.2);
			width: calc(300vw / 19.2);
			height: calc(300vw / 19.2);
			&.before-ani {
				left: calc(960vw / 19.2);
				top: calc(480vw / 19.2);
				width: calc(380vw / 19.2);
				height: calc(380vw / 19.2);
				opacity: 0;
			}
			&.visible {
				background-image: url('./../images/homepage/sticker-5.webp');
			}
			.bg-center();
			@media (max-width: 767px) {
				display: none;
			}
			&:after {
				.ball();
			}
		}
	}
	.scroll {
		position: absolute;
		padding-bottom: calc(60vw / 19.2);
		left: 50%;
		bottom: 0; 
		color: #B21B20;
		font-size: 20px;
		line-height: 28px;
		transform: translateX(-50%);
		cursor: pointer;
		@media (max-width: 767px) {
			padding-bottom: 44px;
			font-size: 18px;
			line-height: 25px;
		}
		&:before {
			content: '';
			position: absolute;
			left: 50%;
			top: calc(100% - 60vw / 19.2);
			width: 1px;
			height: calc(60vw / 19.2);
			background-color: #B21B20;
			animation: scroll-down 1000ms ease-out infinite;
			transform: translateX(-50%);
			@media (max-width: 767px) {
				top: calc(100% - 44px);
				animation: scroll-down-mb 1000ms ease-out infinite;
			}
		}
	}
}

#brand {
	margin-bottom: calc(100vw / 19.2);
	padding: calc(100vw / 19.2) calc(250vw / 19.2) 0;
	@media (max-width: 1199px) {
		padding: calc(100vw / 19.2) 0 0;
	}
	@media (max-width: 768px) {
		padding-top: 60px;
	}
}

#download {
	padding: calc(100vw / 19.2) calc(250vw / 19.2);
	text-align: center;
	background: #101010;
	@media (max-width: 1199px) {
		padding: calc(100vw / 19.2) 0;
	}
	@media (max-width: 768px) {
		padding: 60px 30px;
	}
	h2 {
		@media (max-width: 768px) {
			word-break: keep-all;
		}
	}
	.app-link {
		display: inline-flex;
		display: -webkit-inline-flex;
		gap: 10px;
		padding: 8px;
		background-color: #333030;
		border-radius: 10px;
		@media (min-width: 769px) and (max-width: 991px) {
			flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
		}
		@media (max-width: 768px) {
			margin: 0 auto;
	    	width: calc(100% - 16px);
		}
		@media (max-width: 389px) {
		}
		a {
			width: calc(270vw / 19.2);
			height: calc(80vw / 19.2);
			width: 270px;
			height: 80px;
			@media (max-width: 768px) {
				flex: 1;
				-webkit-flex: 1;
				width: calc(50% - 30px - 8px - 5px);
				height: calc((50vw - 30px - 8px - 5px) / 27 * 8);
			}
			&.visible {
				&.ios {
					background-image: url('./../images/common/app-ios.webp');
				}
				&.android {
					background-image: url('./../images/common/app-android.webp');
				}
			}
		}
	}
}

#about {
	position: relative;
	padding: calc(100vw / 19.2) 0 0;
	min-height: calc(470vw / 19.2);
	&.visible {
		background: url('./../images/homepage/about-bg.webp');
	}
	background-position: center;
	background-size: cover;
	font-size: 16px;
	line-height: 34px;
	@media (max-width: 767px) {
		min-height: unset;
		padding: 80px 0 95px;
	}
	@media (min-width: 390px) and (max-width: 767px) {
	}
	@media (max-width: 390px) {
	}
	&>div {
		position: absolute;
		padding: 0 calc(320vw / 19.2) 0;
		top: 50%;
		width: auto;
		text-align: center;
		color: #FFFFFF;
		transform: translateY(-50%);
		letter-spacing: 0.06em;
		@media (max-width: 767px) {
			position: relative;
			transform: none;
			padding: 0 30px;
		}
	}
}

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

form {
	border: none;
	margin: auto;
	max-width: calc(1280 / 19.2);
	fieldset {
		border: none;
	}
	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: 10px 0;
		width: 100%;
		color: #333030;
		font-size: 16px;
		line-height: 2;
		background: transparent;
		border: none;
		border-bottom: 1px solid #333030;
		outline: none;
	}
	input {
		&[type=submit] {
			max-width: calc(240vw / 19.2);
			margin: 60px auto 0;
			@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(100vw / 19.2) calc(320vw / 19.2) calc(170vw / 19.2);
	&.visible {
		background-image: url('./../images/homepage/contact-bg.svg');
	}
	background-position: center bottom;
	background-size: 100% auto;
	background-repeat: no-repeat;
	@media (max-width: 768px) {
		padding: 70px 30px calc(272vw / 3.9);
		overflow: hidden;
	}
	.sticker {
		position: absolute;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 50%;
		pointer-events: none;
		overflow: hidden;
		&.sticker-0 {
			right: 0;
			bottom: calc(-75vw / 19.2);
			width: calc(442vw / 19.2);
			height: calc(525vw / 19.2);
			border-radius: 0;
			&.visible {
				background-image: url('./../images/homepage/contact-sticker-0.webp');
			}
			background-size: 100%;
			z-index: 1;
			@media (max-width: 768px) {
				left: calc(194vw / 3.9);
				bottom: calc(-1vw / 3.9);
				width: calc(296vw / 3.9);
				height: calc(303vw / 3.9);
			}
		}
		&.sticker-1 {
			left: calc(1375vw / 19.2);
			bottom: calc(102vw / 19.2);
			width: calc(134vw / 19.2);
			height: calc(133vw / 19.2);
			border-radius: 0;
			&.visible {
				background-image: url('./../images/homepage/contact-sticker-1.svg');
			}
			background-size: 100%;
			@media (max-width: 768px) {
				left: calc(103vw / 3.9);
				bottom: calc(149vw / 3.9);
				width: calc(97vw / 3.9);
				height: calc(96vw / 3.9);
			}
		}
		&.sticker-2 {
			left: calc(1074vw / 19.2);
			bottom: calc(20vw / 19.2);
			width: calc(178vw / 19.2);
			height: calc(185vw / 19.2);
			border-radius: 0;
			&.visible {
				background-image: url('./../images/homepage/contact-sticker-2.svg');
			}
			background-size: 100%;
			@media (max-width: 768px) {
				left: calc(157vw / 3.9);
				bottom: calc(-1vw / 3.9);
				width: calc(93vw / 3.9);
				height: calc(97vw / 3.9);
			}
		}
		&.sticker-3 {
			left: calc(517vw / 19.2);
			bottom: calc(37.5vw / 19.2);
			width: calc(242vw / 19.2);
			height: calc(241vw / 19.2);
			border-radius: 0;
			&.visible {
				background-image: url('./../images/homepage/contact-sticker-3.svg');
			}
			background-size: 100%;
			@media (max-width: 768px) {
				left: calc(93vw / 3.9);
				bottom: calc(54vw / 3.9);
				width: calc(71.83vw / 3.9);
				height: calc(68.96vw / 3.9);
			}
		}
		&.sticker-4 {
			left: calc(290vw / 19.2);
			bottom: calc(38vw / 19.2);
			width: calc(87vw / 19.2);
			height: calc(87vw / 19.2);
			border-radius: 0;
			&.visible {
				background-image: url('./../images/homepage/contact-sticker-4.svg');
			}
			background-size: 100%;
			@media (max-width: 768px) {
				left: calc(-2.81vw / 3.9);
				bottom: calc(30.84vw / 3.9);
				width: calc(80vw / 3.9);
				height: calc(80vw / 3.9);
			}
		}
	}
}

.footer {
	position: relative;
	z-index: 10;
	.flex {
		display: flex;
		display: -webkit-flex;
		gap: calc(60vw / 19.2);
		align-items: center;
		&:first-child {
			padding: 14px calc(250vw / 19.2);
			background: #101010;
			@media (min-width: 769px) and (max-width: 991px) {
				gap: 0px;
			}
			@media (max-width: 768px) {
				flex-wrap: wrap;
				-webkit-flex-wrap: wrap;
				padding: 30px 20px 0;
				gap: 24px;
			}
		}
		&:last-child {
			padding: 23.5px calc(250vw / 19.2);
			background: #000000;
			@media (max-width: 768px) {
				padding: 14px 20px;
			}
		}
	}

	.logo-f {
		width: 140px;
		min-width: 140px;
		@media (max-width: 768px) {
			display: none;
		}
	}

	.sitemap {
		flex: 1;
		-webkit-flex: 1;
		@media (max-width: 768px) {
			order: 2;
		}
		ul {
			display: flex;
			display: -webkit-flex;
			gap: calc(80vw / 19.2);
			padding: 0px;
			list-style-type: none;
			@media (min-width: 768px) and (max-width: 991px) {
				gap: 14px;
			}
			@media (max-width: 768px) {
				flex-wrap: wrap;
				-webkit-flex-wrap: wrap;
				gap: 14px;
				margin: 0 0 20px;
				text-align: center;;
			}
			li {
				color: #FFFFFF;
				font-size: 16px;
				line-height: 22px;
				letter-spacing: 0.06em;
				white-space: nowrap;
				cursor: pointer;
				@media (max-width: 768px) {
					padding: 14px;
					width: 100%;
				}
			}
		}
	}

	.download {
		text-align: right;
		@media (max-width: 768px) {
			display: inline-flex;
			display: -webkit-inline-flex;
			flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			flex-direction: column;
			-webkit-flex-direction: column;
			align-items: center;
			gap: 14px;
			order: 1;
			margin: 0 auto;
			width: 100%;
			text-align: center;
			padding: 0 0 42px;
			padding: 0 0 30px;
			border-bottom: #333030 1px solid;
		}
		.logo-f {
			width: 140px;
			@media (max-width: 768px) {
				display: block;
				width: 74px;
				height: 74px;
				min-width: 74px;
			}
		}
		.label {
			margin-bottom: 13px;
			color: #FFFFFF;
			font-weight: 600;
			font-size: 18px;
			line-height: 25px;
			letter-spacing: 0.06em;
			@media (max-width: 768px) {
				display: inline-flex;
				display: -webkit-inline-flex;
				align-items: center;
				gap: 20px;
				margin: auto;
			}
			span {
				text-align: left;
				@media (min-width: 768px) and (max-width: 1199px) {
					word-break: keep-all;
				}
				@media (max-width: 768px) {
					max-width: 200px;
					word-break: keep-all;
				}
			}
		}
		.app-link {
			display: inline-flex;
			display: -webkit-inline-flex;
			gap: 10px;
			padding: 8px;
			background-color: #333030;
			border-radius: 10px;
			@media (min-width: 769px) and (max-width: 991px) {
				flex-wrap: wrap;
				-webkit-flex-wrap: wrap;
				width: 135px;
			}
			@media (max-width: 768px) {
				margin: 0 auto;
			}
			@media (max-width: 389px) {
				flex-direction: column;
				-webkit-flex-direction: column;
			}
			a {
				width: calc(135vw / 19.2);
				height: calc(40vw / 19.2);
				width: 135px;
				height: 40px;
				@media (max-width: 768px) {
					width: 162px;
					height: 48px;
				}
				&.visible {
					&.ios {
						background-image: url('./../images/common/app-ios.webp');
					}
					&.android {
						background-image: url('./../images/common/app-android.webp');
					}
				}
			}
		}
	}

	.follow {
		order: 4;
		label {
			display: block;
			margin-bottom: 14px;
		}
		@media (max-width: 768px) {
			font-size: 16px;
			line-height: 22px;
			text-align: center;
			letter-spacing: 0.06em;
			.social {
				display: inline-flex !important;
				display: -webkit-inline-flex !important;
			}
		}
	}

	.copyright {
		flex: 1;
		-webkit-flex: 1;
		color: #CCCCCC;
		font-size: 12px;
		line-height: 1;
		@media (max-width: 768px) {
			text-align: center;
		}
	}
	.social {
		text-align: right;
		display: inline-flex;
		display: -webkit-inline-flex;
		gap: 24px;
		text-align: right;
		&>a {
			width: 24px;
			height: 24px;
		}
		&.visible {
			.fb {
				background-image: url('./../images/common/fb-grey.svg');
			}
			.ig {
				background-image: url('./../images/common/ig-grey.svg');
			}
		}
	}
}