@charset "utf-8";

/*
	** LAYOUT
*/


.kiosk-wrapper {
	width: 2160px;
	height: 3840px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 100px 0;
	background-image: url("../img/layout/kiosk-bg.png");
	background-repeat: repeat-y;
	background-position-x: left;
	position: relative;
	z-index: 1;
}
.kiosk-wrapper::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.45);
}
.kiosk-wrapper:has(.main-wrapper) {
	animation: left-right 10s ease-in-out 1s infinite alternate;
}
@keyframes left-right {
	0% {background-position-x: left;}
	100% {background-position-x: right;}
}


.sub-wrapper {
	width: 1700px;
	margin: 0 auto;
	border-radius: 36px;
	background-color: rgba(255,255,255,0.75);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	position: relative;
	z-index: 10;
}
.sub-wrapper .container {
	padding: 100px;
}
.sub-title {
	font-size: var(--font-size-60);
	margin-bottom: 10px;
}
.sub-desc {
	font-size: var(--font-size-48);
	margin-bottom: 10px;
}


.header {
	text-align: center;
	color: #fff;
}
.header-title {
	margin-bottom: 10px;
	font-family: "SBAggro";
	font-weight: 400;
	font-size: 150px;
	line-height: 1;
}
.header-subtitle {
	margin-bottom: 60px;
	font-size: var(--font-size-60);
	opacity: 0.32;
}
.header-desc {
	font-size: var(--font-size-48);
}


.footer-menu {
	gap: 0 70px;
}
.footer-menu .button {
	flex-direction: column;
	gap: 10px 0;
	width: 440px;
	height: 440px;
	border-radius: 50%;
	border: 10px solid #FFFFFF;
	background-color: rgba(255,255,255,0.35);
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
}
.footer-menu .button:active {
	background-color: rgba(255,255,255,0.2);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
}
.footer-menu .button .title {
	margin-bottom: 10px;
	font-size: var(--font-size-48);
	color: #fff;
}
.footer-menu .button .desc {
	font-size: var(--font-size-40);
	color: #BDE1CF;
}