@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900');
/* 1 */
html {
	font-size: 16px;
}
@media all and (max-width: 1440px) {
	html {
		font-size: calc(1vw * (16 / 14.4));
	}
}
/* 2 */
/* html {
	font-size: calc(1vw * (16 / 14.4));
} */
@media all and (max-width: 767px) {
	html {
		font-size: calc(1vw * (16 / 4.4));
	}
}
* {
	scrollbar-width: thin;
	scrollbar-color: #FFBD12 #0B0B0B;
}
*::-webkit-scrollbar {
	width: 0.5rem;
	height: 0.5rem;
}
*::-webkit-scrollbar-track {
	background-color: #0B0B0B;
}
*::-webkit-scrollbar-thumb {
	border-radius: 0.25rem;
	border: #0B0B0B;;
	background-color: #FFBD12;
}
*::-webkit-scrollbar-thumb:active {
	background-color: #FFBD12;
}
:root {
	--animation_time: 0.5s;
}
* {
	margin: 0rem;
	padding: 0rem;
	box-sizing: border-box;
	font-family: 'Unbounded', sans-serif;
	font-style: normal;
	list-style-type: none;
	outline: none;
	border: none;
}
*::before,
*::after {
	box-sizing: border-box;
}
/* common */
body {
	background-color: #0B0B0B;
	overflow-x: hidden;
}
body.hidden {
	overflow: hidden;
}
section,
footer {
	width: 90rem;
	margin: 0 auto;
	overflow: hidden;
}
footer {
	height: 16rem;
}
a {
	text-decoration: none;
	transition: color var(--animation_time) ease;
}
a:not(.button):hover {
	color: #FFBD12;
}
.button {
	display: flex;
	gap: 0.25rem;
	align-items: center;
	justify-content: center;
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 1.25rem;
	text-align: center;
	text-transform: uppercase;
	color: #0B0B0B;
	background-color: #FFBD12;
	padding: 0.75rem 1.75rem;
	cursor: pointer;
	clip-path: polygon(0.3125rem 0%, calc(100% - 0.3125rem) 0%, 100% 0.3125rem, 100% 1rem, calc(100% - 0.1875rem) 1.1875rem, calc(100% - 0.1875rem) calc(100% - 1.1875rem), 100% calc(100% - 1rem), 100% calc(100% - 0.3125rem), calc(100% - 0.3125rem) 100%, 0.3125rem 100%, 0rem calc(100% - 0.3125rem), 0% calc(100% - 1rem), 0.1875rem calc(100% - 1.1875rem), 0.1875rem 1.1875rem, 0% 1rem, 0% 0.3125rem);
	transition-duration: var(--animation_time);
	transition-timing-function: ease;
	transition-property: color, background-color;
}
.button svg {
	height: 1.0625rem;
	width: 1.5rem;
	margin-top: 0.125rem;
}
.button:hover,
.button:focus-visible {
	background-color: #DFDFDF;
}
.button:disabled {
	background-color: #717171;
	color: #F7F7F7;
	cursor: not-allowed;
}
.noise {
	position: fixed;
	pointer-events: none;
	top: 0rem;
	left: 0rem;
	width: 100vw;
	height: 100vh;
	background-image: url('../images/common/noise.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 0.25;
	z-index: 8;
}
/* preloader */
.preloader {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0rem;
	left: 0rem;
	width: 100vw;
	min-height: 37.5rem;
	height: 100vh;
	background: #DFDFDF;
	z-index: 5;
}
.preloader_content {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90rem;
	min-height: 100vh;
	overflow: hidden;
}
.preloader_background {
	top: 0rem;
	left: 0rem;
	height: 100%;
	width: 1.5rem;
	background-image: url('../images/preloader/border.png');
	background-repeat: repeat-y;
	background-position: 0rem 0.625rem;
	background-size: contain;
	z-index: 1;
	animation: preloader_background calc(var(--animation_time) * 40) linear 0s infinite;
}
@keyframes preloader_background {
	0% {
		background-position-y: 100%;
	}
	100% {
		background-position-y: 0%;
	}
}
.blink {
	animation: blink calc(var(--animation_time) * 2) linear 0s infinite;
}
@keyframes blink {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	41% {
		opacity: 0;
	}
	60% {
		opacity: 0;
	}
	61% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
.preloader_background_lines {
	position: absolute;
	display: flex;
	flex-direction: column;
	width: 75.4375rem;
	height: 150rem;
	right: 0rem;
}
.preloader_background_lines > * {
	flex-shrink: 0;
	height: 50rem;
	background-image: url('../images/preloader/background.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.preloader_background_lines > *:first-child,
.preloader_background_lines > *:last-child {
	transform: scaleY(-1);
}
.preloader_content > *:not(.preloader_center) {
	position: absolute;
}
.preloader h1 {
	top: -2.375rem;
	left: -0.9375rem;
	font-weight: 900;
	font-size: 14.625rem;
	line-height: 15.5rem;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: #C0C0C0;
}
.preloader h2 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	bottom: 3.75rem;
	left: 3.75rem;
	text-transform: uppercase;
	color: #F7F7F7;
}
.preloader h2 > small {
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 1.25rem;
	display: flex;
	align-items: center;
	margin-bottom: 1.25rem;
}
.preloader h2 > span {
	font-weight: 300;
	font-size: 5rem;
	line-height: 6rem;
	letter-spacing: -0.02em;
}
.preloader h2 > strong {
	font-weight: 700;
	font-size: 7.5rem;
	line-height: 8.5rem;
	letter-spacing: -0.02em;
}
.preloader_code {
	display: flex;
	flex-direction: column;
	gap: 7.5rem;
	width: 13.125rem;
	top: 1.875rem;
	right: 1.25rem;
	font-weight: 300;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: #9C9C9C;
}
.preloader_background_lines_mobile {
	display: none;
}
.preloader_center {
	position: relative;
	display: flex;
	align-items: center;
	gap: 5rem;
	padding: 0rem 0.8125rem;
}
.preloader_center > .preloader_center_angles {
	position: absolute;
	top: 0rem;
	left: 0rem;
	width: 0.4375rem;
	height: 100%;
}
.preloader_center > .preloader_center_angles:last-child {
	left: auto;
	right: 0rem;
	transform: scaleX(-1);
}
.preloader_center > .preloader_center_angles::before,
.preloader_center > .preloader_center_angles::after {
	content: '';
	position: absolute;
	display: block;
	width: 0.4375rem;
	height: 0.4375rem;
	background-image: url('../images/preloader/angle.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	left: 0rem;
	top: 0rem;
}
.preloader_center > .preloader_center_angles::after {
	top: auto;
	bottom: 0rem;
	transform: scaleX(-1);
	transform: scaleY(-1);
}
.preloader_center svg {
	fill: currentColor;
	stroke: #F7F7F7;
	overflow: visible;
	height: 11.25rem;
	width: 2.9375rem;
	color: transparent;
	transition: var(--animation_time) ease color;
}
#logo {
	fill: currentColor;
}
.preloader_center.active svg {
	color: #F7F7F7;
}
.preloader_action {
	display: flex;
	flex-direction: column;
	gap: 2.125rem;
	bottom: -2.125rem;
	right: -5rem;
}
.preloader_action .button {
	align-self: flex-end;
	padding: 0.75rem 1.450625rem;
	right: 20.625rem;
	position: relative;
}
.preloader_percentage {
	font-weight: 900;
	font-size: 11.25rem;
	line-height: 12.5rem;
	text-align: right;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: #C0C0C0;
}
.preloader_small_percentage {
	font-weight: 300;
	font-size: 0.875rem;
	line-height: 1.25rem;
	text-align: center;
	text-transform: uppercase;
	color: #9C9C9C;
}
body > .preloader.clip:nth-child(1) {
	clip-path: polygon(0% 29%, 100% 69%, 100% 100%, 0% 100%);
}
body > .preloader.clip:nth-child(2) {
	clip-path: polygon(0% 0%, 100% 0%, 100% 71%, 0% 31%);
}
body > .preloader.animation:nth-child(1) {
	animation: open_preloader_bottom calc(var(--animation_time) * 2) ease 0s 1 forwards;
}
body > .preloader.animation:nth-child(2) {
	animation: open_preloader_top calc(var(--animation_time) * 2) ease 0s 1 forwards;
}
body > .preloader.animation.closed:nth-child(1) {
	animation: close_preloader_bottom calc(var(--animation_time) * 2) ease 0s 1 forwards;
}
body > .preloader.animation.closed:nth-child(2) {
	animation: close_preloader_top calc(var(--animation_time) * 2) ease 0s 1 forwards;
}
@keyframes open_preloader_bottom {
	0% {
		clip-path: polygon(0% 29%, 100% 69%, 100% 100%, 0% 100%);
	}
	100% {
		clip-path: polygon(0% 101%, 100% 141%, 100% 172%, 0% 172%);
	}
}
@keyframes open_preloader_top {
	0% {
		clip-path: polygon(0% 0%, 100% 0%, 100% 71%, 0% 31%);
	}
	100% {
		clip-path: polygon(0% -72%, 100% -72%, 100% -1%, 0% -41%);
	}
}
@keyframes close_preloader_bottom {
	0% {
		clip-path: polygon(0% 101%, 100% 141%, 100% 172%, 0% 172%);
	}
	100% {
		clip-path: polygon(0% 29%, 100% 69%, 100% 100%, 0% 100%);
	}
}
@keyframes close_preloader_top {
	0% {
		clip-path: polygon(0% -72%, 100% -72%, 100% -1%, 0% -41%);
	}
	100% {
		clip-path: polygon(0% 0%, 100% 0%, 100% 71%, 0% 31%);
	}
}
@media all and (max-width: 767px) {
	/* common */
	.mobile_hide {
		display: none !important;
	}
	.button {
		font-weight: 400;
		font-size: 0.875rem;
		line-height: 1.25rem;
		width: 100%;
		justify-content: center;
	}
	section,
	footer {
		width: 100%;
		margin: 0 auto;
		height: auto;
		overflow: visible;
	}
	/* preloader */
	.preloader {
		min-height: 66.875rem;
	}
	.preloader_background,
	.preloader_action .button,
	.preloader_center > .preloader_center_angles,
	.preloader_background_lines {
		display: none;
	}
	.preloader_background_lines_mobile {
		display: flex;
		height: 154.3125rem;
		flex-direction: column;
	}
	.preloader_background_lines_mobile > * {
		flex-shrink: 0;
		height: 51.4375rem;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
	.preloader_background_lines_mobile > *:first-child,
	.preloader_background_lines_mobile > *:last-child {
		transform: scaleY(-1);
	}
	.preloader_background_lines_mobile.left {
		width: 0.4375rem;
		left: 1.25rem;
	}
	.preloader_background_lines_mobile.center {
		width: 0.3125rem;
		z-index: -1;
	}
	.preloader_background_lines_mobile.right {
		width: 0.4375rem;
		right: 1.25rem;
	}
	.preloader_background_lines_mobile.left * {
		background-image: url('../images/preloader/background_mobile_left.svg');
	}
	.preloader_background_lines_mobile.center * {
		background-image: url('../images/preloader/background_mobile_center.svg');
	}
	.preloader_background_lines_mobile.right * {
		background-image: url('../images/preloader/background_mobile_right.svg');
	}
	.preloader h1 {
		top: -2.125rem;
		left: -4.0625rem;
		font-weight: 700;
		font-size: 7.5rem;
		line-height: 8.5rem;
	}
	.preloader h2 {
		bottom: 6.3125rem;
		left: 1.25rem;
	}
	.preloader h2 small {
		font-weight: 300;
		font-size: 0.875rem;
		margin-bottom: 0.75rem;
		line-height: 1.25rem;
	}
	.preloader h2 span {
		font-weight: 300;
		font-size: 2.75rem;
		line-height: 3.5rem;
		margin-bottom: -0.75rem;
	}
	.preloader h2 strong {
		font-weight: 400;
		font-size: 3.75rem;
		line-height: 4.5rem;
	}
	.preloader_code {
		font-weight: 300;
		font-size: 0.625rem;
		line-height: 0.875rem;
		top: 6.25rem;
		right: auto;
		left: 2.9375rem;
		gap: 0rem;
		width: 9.375rem;
	}
	.preloader_percentage {
		font-weight: 700;
		font-size: 7.5rem;
		line-height: 8.5rem;
	}
	.preloader_small_percentage {
		font-weight: 300;
		font-size: 0.875rem;
		line-height: 1.25rem;
	}
	.preloader_action {
		bottom: -2.1875rem;
		right: -4.5rem;
	}
}