@font-face{
	font-family: HyundaiSansText;
	src: url(../fonts/HyundaiSansText-Bold.woff2) format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: HyundaiSansText; 
	src: url(../fonts/HyundaiSansText-BoldItalic.woff2) format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face{
	font-family: HyundaiSansText;
	src: url(../fonts/HyundaiSansText-Medium.woff2) format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: HyundaiSansText;
	src: url(../fonts/HyundaiSansText-MediumItalic.woff2) format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face{
	font-family: HyundaiSansText;
	src: url(../fonts/HyundaiSansText.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: HyundaiSansText;
	src: url(../fonts/HyundaiSansText-Italic.woff2) format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face{
	font-family: HyundaiSansHead;
	src: url(../fonts/HyundaiSansHead-Bold.woff2) format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: HyundaiSansHead;
	src: url(../fonts/HyundaiSansHeadMedium.woff2) format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: HyundaiSansHead;
	src: url(../fonts/HyundaiSansHead.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: HyundaiSansHead;
	src: url(../fonts/HyundaiSansHead-Light.woff2) format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

body, html { 
	margin: 0; 
	padding: 0; 
	background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.6) 100%), url('t/bg.jpg'); 
	background-size: cover;
}

* { 
	outline: none;
	text-decoration: none;
}

#app { 
	position: relative; 
	text-align: center;
}

h1 { 
	font-family: 'HyundaiSansHead'; 
	font-size: 30px; 
	color: #fff; 
	width: 100%; 
	text-align: center; 
	text-wrap: balance;
	margin: 0;
}

.logo { 
	width: 170px;
	height: auto; 
	margin: 20px auto; 
}

.are-you-in {
	position: absolute;
	right: 0;
	top: 0;
	height: 100dvh;
	width: auto;
}

label {
	display: block;
	color: #fff;
	font: 16px/1 'HyundaiSansText';
	margin: 20px auto 10px;
	width: 80%;
}

p {
	color: #fff;
	font: 16px/1.2 'HyundaiSansText';
}

input {
	color: #fff;
	font: 16px/1 'HyundaiSansText';
	background: transparent;
	border: 1px solid #fff;
	border-radius: 6px;
	padding: 5px 10px;
}

input[type="checkbox"] {
	accent-color: #7e206c;
}

.error {
	color: #fed93c;
}

.upper {
	text-transform: uppercase
}



.box { 
	margin: 40px auto; 
	width: 220px; 
	padding: 16px; 
	color: #fff; 
	position: relative; 
	font-size: 24px; 
	font-family: 'HyundaiSansHead'; 
	text-align: center; 
	text-wrap: balance; 
	border: 1px solid #fff; 
	border-radius: 10px;
}

.box .border {
	content: ''; 
	position: absolute; 
	top: 0; 
	left: 0; 
	display: block; 
	width: 100%; 
	height: 100%;
	filter: blur(6px);
	pointer-events: none;
}

.box .border:before { 
	content: ''; 
	position: absolute; 
	top: -4px; 
	left: -4px; 
	display: block; 
	width: 100%; 
	height: 100%; 
	border: 4px solid;
	border-image-slice: 1;
	clip-path: inset(0 round 10px); 
	border-image-source: linear-gradient(150deg, #ff0 0%, #7e206c 40%, #8d46ff 100%);
}

.box a {
	color: #fff;
	text-decoration: none;
}

.box .text span {
	display: block;
	font-size: 40px;
	letter-spacing: 10px;
}

.my-lg {
	margin-top: 160px;
}