@import "https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@1,700&family=Roboto:ital,wght@1,500;1,700;1,900&display=swap";
*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.banner {
	margin: 0 auto;
	min-width: 280px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(0deg, rgb(255, 255, 255) 43%, rgb(2, 6, 15) 50%);
	font-size: 1vw;
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-style: italic;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.banner div {
	position: absolute;
}
.banner img {
	position: absolute;
}
.bg-stadium {
	width: 100em;
	height: 57.2916666667em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background:
		linear-gradient(90deg, rgba(4, 13, 16, 0.8) 30%, rgba(4, 13, 16, 0) 45%),
		linear-gradient(131deg, rgba(4, 13, 16, 0.8) 28%, rgba(4, 13, 16, 0) 50%),
		url(../img/bg.jpg) no-repeat center center/contain;
}
.main-wrapper {
	width: 46.875em;
	height: 56.25em;
	top: 50%;
	left: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translate(-105.5%, -50%);
	z-index: 11;
}
.logo-wrapper {
	width: 100%;
	height: 10.4166666667em;
	top: 50%;
	left: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translate(-50%, -218%);
}
.logo {
	position: absolute;
	width: 24.7395833333em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.btn-wrapper {
	width: 100%;
	height: 10.4166666667em;
	top: 50%;
	left: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translate(-50%, 33%);
}
.btn {
	font-size: 1.5em;
	width: 12em;
	height: 2.4em;
	color: #393f46;
	border-radius: 2em;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden;
	z-index: 10;
	box-sizing: content-box;
	background: none !important;
	box-shadow: inset 0 0 0 0.1em #93e20b;
	padding: 0.4em;
	position: relative !important;
}
.btn::before {
	content: "";
	width: 100%;
	height: 300%;
	position: absolute;
	background: linear-gradient(
		110deg,
		rgba(255, 255, 255, 0) 35%,
		rgb(255, 255, 255) 45%,
		rgb(255, 255, 255) 55%,
		rgba(255, 255, 255, 0) 65%
	);
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	animation: glare 5s infinite;
}
.btn::after {
	content: "";
	width: calc(100% - 0.8em);
	height: calc(100% - 0.8em);
	position: absolute;
	border-radius: 2em;
	box-shadow: inset 0 0.06em 0 0 #c5ff8d;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #9de606;
	z-index: -1;
}
.legal {
	font-size: 0.68em;
	line-height: 1.4;
	width: 52.0833333333em;
	font-weight: 500;
	letter-spacing: 0.05em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 185%);
	z-index: 12;
}

.wrapper {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
}
.txt-1-wrapper {
	width: 100%;
	height: 18.2291666667em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -42%);
	text-shadow: 0 0.5em 2em #000;
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 5;
	animation: txt 5s forwards;
}
.txt-1 {
	font-size: 2.85em;
	width: 100%;
	position: relative !important;
}
.title {
	width: 24.9479166667em;
	height: 11.4583333333em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -112%);
	background: url(../img/title.png) no-repeat center center/contain;
	animation: txt 5s forwards;
}
.step-bg-white-under {
	width: 115.625em;
	height: 104.1666666667em;
	background: #e4e7e9;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 30%);
}
.step-bg-white {
	width: 115.625em;
	height: 31.25em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 49%);
	z-index: 3;
}
.step-bg-white::before {
	content: "";
	position: absolute;
	width: 52%;
	height: 100%;
	top: 0;
	left: 0;
	transform: rotate(-2deg);
	background: #fff;
	background: linear-gradient(2deg, rgb(228, 231, 233) 65%, rgb(250, 250, 250) 80%);
	border-radius: 2em;
	z-index: -1;
}
.step-bg-white::after {
	content: "";
	position: absolute;
	width: 52%;
	height: 100%;
	top: 0;
	right: 0;
	transform: rotate(2deg);
	background: linear-gradient(-2deg, rgb(228, 231, 233) 65%, rgb(250, 250, 250) 80%);
	border-radius: 2em;
	z-index: -1;
}
.blue-triangle {
	width: 52.96875em;
	height: 55.5208333333em;
	top: 50%;
	left: 50%;
	transform: translate(-5%, -42%);
	background: url(../img/blue-triangle.png) no-repeat center center/contain;
}
.man {
	width: 51.5104166667em;
	height: 39.84375em;
	top: 50%;
	left: 50%;
	transform: translate(-12%, -54%);
	background: url(../img/player.png) no-repeat center center/contain;
}
.man-wrapper {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	animation: man 5s forwards;
}
.items-triangle {
	width: 100em;
	height: 20.2083333333em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 22%);
	background: url(../img/bg-triangle.png) no-repeat center center/contain;
}
.items {
	width: 56.6145833333em;
	height: 24.6875em;
	top: 50%;
	left: 50%;
	transform: translate(-10%, 22%);
	animation: txt 5s forwards;
}
.items-img {
	background: url(../img/items.png) no-repeat center center/contain;
}
.items-emblem {
	background: url(../img/items-emblem.png) no-repeat center center/contain;
}
.white-triangle-1 {
	width: 7.2916666667em;
	height: 10.78125em;
	top: 50%;
	left: 50%;
	transform: translate(-56%, 22%) rotate(-18deg);
	background: url(../img/white-triangle.png) no-repeat center center/contain;
}
.white-triangle-2 {
	width: 7.2916666667em;
	height: 10.78125em;
	top: 50%;
	left: 50%;
	transform: translate(90%, -160%) rotate(-48deg);
	background: url(../img/white-triangle.png) no-repeat center center/contain;
}
.white-triangle-3 {
	width: 10.46875em;
	height: 10.78125em;
	top: 50%;
	left: 50%;
	transform: translate(355%, 37%);
	background: url(../img/white-triangle.png) no-repeat center center/contain;
}
.confetti-1 {
	width: 21.3541666667em;
	height: 22.8125em;
	top: 50%;
	left: 50%;
	transform: translate(-30%, -124%);
	background: url(../img/confetti-1.png) no-repeat center center/contain;
}
.confetti-2 {
	width: 26.6145833333em;
	height: 13.4895833333em;
	top: 50%;
	left: 50%;
	transform: translate(31%, -174%);
	background: url(../img/confetti-2.png) no-repeat center center/contain;
}
.bg-item-1 {
	width: 18.2291666667em;
	height: 27.8125em;
	top: -1.5em;
	left: -2.5em;
	background: url(../img/bg-item-1.png) no-repeat center center/contain;
}
.bg-item-2 {
	width: 31.7708333333em;
	height: 13.1770833333em;
	top: -1.5em;
	left: 50%;
	transform: translateX(-54%);
	background: url(../img/bg-item-2.png) no-repeat center center/contain;
}
.bg-item-3 {
	width: 54.9479166667em;
	height: 9.7395833333em;
	top: -2.9em;
	left: 50%;
	transform: translateX(-11%);
	background: url(../img/bg-item-3.png) no-repeat center center/contain;
}
.bg-item-4 {
	width: 66.875em;
	height: 21.9270833333em;
	top: -1.9em;
	left: 50%;
	transform: translateX(-16%);
	background: url(../img/bg-item-4.png) no-repeat center center/contain;
}
.bg-item-5 {
	width: 20.2083333333em;
	height: 14.3229166667em;
	top: 0.1em;
	right: 0em;
	background: url(../img/bg-item-5.png) no-repeat center center/contain;
}
.step {
	width: 78.9583333333em;
	height: 15.625em;
	top: 50%;
	left: 50%;
	left: 50%;
	transform: translate(-54%, 77%);
	font-family: "Roboto Condensed", serif;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 22;
}
.step div {
	position: relative;
}
.step-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.step-item__img {
	width: 8.90625em;
	height: 7.8125em;
	margin-right: 3em;
	margin-bottom: 0.5em;
}
.step-item__img img {
	width: 100%;
	position: relative;
}
.step-item__txt {
	font-size: 1.55em;
	color: #0c2072;
}
.step-item__txt span {
	display: block;
}
.step-item__txt br {
	display: none;
}
.content-wrapper {
	width: 100em;
	height: 49.21875em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.step-item-1 {
	animation: step-1 5s forwards;
}
.step-item-2 {
	animation: step-2 5s forwards;
}
.step-item-3 {
	animation: step-3 5s forwards;
}
@keyframes txt {
	from,
	10% {
		opacity: 0;
	}
	20%,
	to {
		opacity: 1;
	}
}
@keyframes man {
	from,
	10% {
		transform: translateY(20%);
		opacity: 0;
	}
	20%,
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes step-1 {
	from,
	20% {
		opacity: 0;
	}
	26%,
	to {
		opacity: 1;
	}
}
@keyframes step-2 {
	from,
	26% {
		opacity: 0;
	}
	32%,
	to {
		opacity: 1;
	}
}
@keyframes step-3 {
	from,
	32% {
		opacity: 0;
	}
	38%,
	to {
		opacity: 1;
	}
}
@keyframes glare {
	from,
	0.0001%,
	40% {
		transform: translate(-100%, -50%);
	}
	60%,
	to {
		transform: translate(100%, -50%);
	}
}
@media screen and (max-aspect-ratio: 1366/1024) and (min-aspect-ratio: 1000/999) {
	.bg-stadium {
		transform: translate(-50%, -71%);
	}
	.white-triangle-3 {
		transform: translate(355%, -83%);
	}
	.white-triangle-2 {
		transform: translate(90%, -280%) rotate(-48deg);
	}
	.white-triangle-1 {
		transform: translate(-56%, -97%) rotate(-18deg);
	}
	.confetti-2 {
		transform: translate(31%, -271%);
	}
	.confetti-1 {
		transform: translate(-30%, -180%);
	}
	.legal {
		font-size: 0.6em;
		transform: translate(-50%, 192%);
	}
	.blue-triangle {
		transform: translate(-5%, -60%);
	}
	.step-bg-white::before {
		background: linear-gradient(2deg, rgb(228, 231, 233) 2%, rgb(250, 250, 250) 24%);
	}
	.step-bg-white::after {
		background: linear-gradient(-2deg, rgb(228, 231, 233) 2%, rgb(250, 250, 250) 24%);
	}
	.step {
		font-size: 1.5vw;
		width: 58.5651537335em;
		height: 17.625em;
		transform: translate(-51%, 40%);
		flex-wrap: wrap;
		justify-content: center;
	}
	.step__item {
		margin: 0 2em;
	}
	.step-bg-white {
		transform: translate(-46%, 25%);
	}
	.content-wrapper {
		transform: translate(-50%, -66%);
	}
	.logo {
		width: 21.739583em;
	}
	.main-wrapper {
		font-size: 1.1vw;
		transform: translate(-100.5%, -64%);
	}
}
@media screen and (min-aspect-ratio: 740/360) {
	.legal {
		font-size: 0.65em;
	}
	.bg-item-1,
	.bg-item-2,
	.bg-item-3,
	.bg-item-4,
	.bg-item-5,
	.bg-stadium {
		font-size: 1vw;
	}
	.banner {
		font-size: 0.82vw;
	}
	.items-triangle {
		font-size: 1vw;
		transform: translate(-50%, 14%);
	}
	.step-bg-white {
		font-size: 0.89vw;
		transform: translate(-50%, 45%);
	}
}
@media screen and (orientation: portrait) {
	.items-emblem {
		transform: translate(-17%, 38%) rotate(10deg);
	}
	.bg-item-6 {
		width: 37.890625em;
		height: 26.85546875em;
		top: 50%;
		transform: translateY(-20%);
		left: -17em;
		background: url(../img/bg-item-6.png) no-repeat center center/contain;
	}
	.bg-stadium {
		font-size: 1.9vw;
		width: 100em;
		height: 57.2916666667em;
		transform: translate(-61%, -37%);
		background:
			linear-gradient(180deg, #02060f 21%, rgba(4, 13, 16, 0) 56%),
			url(../img/bg.jpg) no-repeat center center/contain;
	}
	.white-triangle-2,
	.white-triangle-3 {
		display: none;
	}
	.white-triangle-1 {
		width: 13.291667em;
		height: 12.78125em;
		transform: translate(-175%, 22%) rotate(-52deg);
	}
	.bg-item-2 {
		width: 31.7708333333em;
		height: 13.1770833333em;
		top: -2.5em;
		left: 50%;
		transform: translateX(-93%);
	}
	.bg-item-5 {
		width: 25.208333em;
		height: 21.322917em;
		top: 50%;
		transform: translateY(-52%);
		right: -14em;
	}
	.confetti-2 {
		width: 52.614583em;
		height: 33.489583em;
		transform: translate(33%, -48%);
	}
	.confetti-1 {
		width: 37.354167em;
		height: 40.8125em;
		transform: translate(-143%, -34%) rotate(17deg);
	}
	.blue-triangle {
		width: 90.96875em;
		height: 98.520833em;
		transform: translate(-42%, -18%);
	}
	.man {
		width: 55.510417em;
		height: 41.84375em;
		transform: translate(-16%, -40%);
	}
	.items-triangle {
		width: 107em;
		height: 21.208333em;
		transform: translate(-50%, 24%);
	}
	.content-wrapper {
		font-size: 1.5vw;
		width: 100em;
		height: 49.21875em;
		top: 50%;
		left: 50%;
		transform: translate(-69%, -34%);
	}
	.step-item__img {
		width: 8.90625em;
		height: 7.8125em;
		margin-right: 1em;
	}
	.step {
		font-size: 1.35vw;
		width: 69em;
		height: 15.625em;
		transform: translate(-51%, 152%);
	}
	.legal {
		font-size: 0.9em;
		transform: translate(-50%, 253%);
	}
	.step-bg-white-under {
		background: #051a38;
		transform: translate(-50%, 51%);
		z-index: 5;
	}
	.step-bg-white-under::before {
		content: "";
		position: absolute;
		width: 52%;
		height: 100%;
		top: -3em;
		left: 0;
		transform: rotate(2deg);
		background: #fff;
		background: #051a38;
		border-radius: 2em;
		z-index: -1;
	}
	.step-bg-white-under::after {
		content: "";
		position: absolute;
		width: 52%;
		height: 100%;
		top: -3em;
		right: 0;
		transform: rotate(-2deg);
		background: #051a38;
		border-radius: 2em;
		z-index: -1;
	}
	.step-bg-white::before,
	.step-bg-white::after {
		background: #fff;
	}
	.step-bg-white {
		transform: translate(-50%, 112%);
	}
	.btn {
		font-size: 3em;
	}
	.btn-wrapper {
		transform: translate(-50%, 499%);
	}
	.txt-1 {
		font-size: 5.8em;
	}
	.txt-1-wrapper {
		transform: translate(-50%, -178%);
	}
	.title {
		width: 90.91796875em;
		height: 21.58203125em;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -226%);
		background: url(../img/title-portrait.png) no-repeat center center/contain;
	}
	.logo {
		width: 45.739583em;
	}
	.logo-wrapper {
		transform: translate(-50%, -539%);
	}
	.main-wrapper {
		width: 100em;
		height: 133.3984375em;
		transform: translate(-50%, -50%);
	}
}
@media screen and (max-aspect-ratio: 320/481) {
	.step {
		font-size: 2vw;
		width: 58.5651537335em;
		height: 17.625em;
		transform: translate(-51%, 74%);
		flex-wrap: wrap;
		justify-content: center;
	}
	.step__item {
		margin: 0 2em;
	}
	.blue-triangle {
		width: 90.96875em;
		height: 98.520833em;
		transform: translate(-42%, -33%);
	}
	.legal {
		font-size: 1.2em;
		transform: translate(-50%, 261%);
	}
	.btn {
		font-size: 4.5em;
	}
	.btn-wrapper {
		transform: translate(-50%, 853%);
	}
	.step-bg-white::before,
	.step-bg-white::after {
		height: 170%;
	}
	.step-bg-white-under {
		transform: translate(-50%, 63%);
	}
	.step-bg-white {
		transform: translate(-50%, 72%);
	}
	.content-wrapper {
		font-size: 1.6vw;
		transform: translate(-69%, -54%);
	}
	.txt-1 {
		font-size: 6.5em;
	}
	.txt-1-wrapper {
		transform: translate(-50%, -162%);
	}
	.title {
		width: 94.917969em;
		height: 22.582031em;
		transform: translate(-50%, -223%);
	}
	.logo-wrapper {
		transform: translate(-50%, -565%);
	}
	.logo {
		width: 54.739583em;
	}
	.main-wrapper {
		width: 100em;
		height: 133.3984375em;
		transform: translate(-50%, -64%);
	}
	.confetti-1 {
		transform: translate(-143%, -70%) rotate(17deg);
	}
	.confetti-2 {
		transform: translate(33%, -94%);
	}
	.bg-item-5 {
		width: 25.208333em;
		height: 21.322917em;
		transform: translateY(-127%);
		right: -14em;
	}
}
@media screen and (max-aspect-ratio: 520/1024) {
	.step {
		font-size: 1.35vw;
		width: 69em;
		height: 15.625em;
		transform: translate(-51%, 152%);
	}
	.blue-triangle {
		width: 90.96875em;
		height: 98.520833em;
		transform: translate(-42%, -18%);
	}
	.legal {
		font-size: 0.9em;
		transform: translate(-50%, 253%);
	}
	.white-triangle-1 {
		width: 13.291667em;
		height: 12.78125em;
		transform: translate(-175%, -101%) rotate(-52deg);
	}
	.confetti-2 {
		width: 52.614583em;
		height: 33.489583em;
		transform: translate(33%, -95%);
	}
	.confetti-1 {
		width: 37.354167em;
		height: 40.8125em;
		transform: translate(-143%, -71%) rotate(17deg);
	}
	.bg-stadium {
		font-size: 2.5vw;
		width: 100em;
		height: 61.291667em;
		transform: translate(-61%, -52%);
		background:
			linear-gradient(180deg, #02060f 5%, rgba(4, 13, 16, 0) 35%),
			url(../img/bg.jpg) no-repeat center center/contain;
	}
	.step-item__txt br {
		display: inline;
	}
	.step-item__txt {
		font-size: 2.2em;
		width: 13em;
	}
	.step-item {
		width: 40em;
	}
	.step {
		font-size: 2vw;
		width: 76em;
		height: 28.625em;
		justify-content: center;
		flex-direction: column;
		transform: translate(-50%, 35%);
	}
	.step-bg-white::before,
	.step-bg-white::after {
		height: 173%;
	}
	.blue-triangle {
		width: 90.96875em;
		height: 103.520833em;
		transform: translate(-42%, -35%);
	}
	.legal {
		font-size: 1.3em;
		transform: translate(-50%, 305%);
	}
	.btn {
		font-size: 4.6em;
	}
	.btn-wrapper {
		height: 17em;
		transform: translate(-50%, 489%);
	}
	.step-bg-white-under {
		background: #051a38;
		transform: translate(-50%, 75%);
		z-index: 5;
	}
	.step-bg-white {
		transform: translate(-50%, 72%);
	}
	.content-wrapper {
		font-size: 1.6vw;
		width: 100em;
		height: 49.21875em;
		top: 50%;
		left: 50%;
		transform: translate(-69%, -53%);
	}
	.bg-item-4 {
		top: 0.1em;
	}
	.bg-item-3 {
		top: 0.1em;
	}
	.bg-item-2 {
		top: -2.5em;
	}
	.bg-item-5 {
		transform: translateY(-122%);
	}
	.bg-item-1 {
		width: 36.229167em;
		height: 54.8125em;
		top: -3.5em;
		left: -9.5em;
	}
	.txt-1 {
		font-size: 7em;
	}
	.txt-1-wrapper {
		transform: translate(-50%, -290%);
	}
	.title {
		width: 90.91796875em;
		height: 31.582031em;
		transform: translate(-51%, -256%);
		background: url(../img/title.png) no-repeat center center/contain;
	}
	.main-wrapper {
		font-size: 0.93vw;
		width: 100em;
		height: 237.398438em;
		transform: translate(-50%, -50%);
	}
	.logo-wrapper {
		transform: translate(-50%, -961%);
	}
	.logo {
		width: 55.739583em;
	}
	.step-item__txt span {
		display: inline;
	}
}