@import "https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@100..900&family=Roboto:wght@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: #001d45;
	font-size: 0.97vw;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
	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;
}
.main-wrapper {
	width: 46.875em;
	height: 56.25em;
	top: 50%;
	left: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translate(-90%, -50%);
	z-index: 11;
}
.logo-wrapper {
	width: 36.4583333333em;
	height: 10.4166666667em;
	top: 50%;
	left: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translate(-50%, -227%);
	z-index: 22;
}
.logo {
	position: absolute;
	width: 22.7604166667em;
	height: 7.3958333333em;
	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%, 126%);
}
.btn {
	font-size: 1.87em;
	width: 13em;
	height: 2.3em;
	color: #00102c;
	border-radius: 2em;
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 900;
	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 #9ee607,
		0 0 0.2em 0 #9ee607;
	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 #c7ff94,
		0 0 0.4em 0 #9ee607;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #9ee607;
	z-index: -1;
}
.btn-txt {
	font-size: 1.1em;
}
.wrapper {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
}
.txt-1-wrapper {
	width: 100%;
	height: 18.2291666667em;
	line-height: 1.4;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -52%);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 5;
}
.txt-1-wrapper .txt-1 {
	font-size: 3.18em;
	width: 100%;
	position: relative;
	text-shadow:
		0px 0.0491803279em 0.131147em #00000e,
		0px 0.0655737705em 0.7540983607em #001d43;
}
.txt-1-wrapper .txt-1 .first {
	width: 11.9016393443em;
	height: 2.1475409836em;
	position: relative;
	display: inline-block;
	transform: translate(-0.1em, 0.6em);
	background: url(../img/title.png) no-repeat center center/contain;
	animation: txt-1 5s forwards;
}
.txt-1-wrapper .txt-1 .second {
	font-size: 1em;
	line-height: 1;
	font-weight: 700;
	display: block;
	animation: txt-2 5s forwards;
}

.txt-1-wrapper .txt-1 .second span {
	font-size: 1.4em;
	color: #ffc000;
}
.txt-1-wrapper .txt-1 .third {
	font-size: 0.8em;
	line-height: 1.2;
	display: block;
	animation: txt-3 5s forwards;
}
.bg-1 {
	width: 65.3125em;
	height: 65.9895833333em;
	bottom: -30.5em;
	left: -25.5em;
	background: url(../img/bg-1.png) no-repeat center center/contain;
}
.bg-2 {
	width: 50.7291666667em;
	height: 41.71875em;
	bottom: -12.5em;
	right: -16.5em;
	transform: scaleX(-1) rotate(130deg);
	background: url(../img/bg-1.png) no-repeat center center/contain;
}
.bg-3 {
	width: 133.8541666667em;
	height: 49.21875em;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: url(../img/bg-3.jpg) no-repeat center center/contain;
}
.main-img {
	width: 105.4166666667em;
	height: 55.5208333333em;
	left: 50%;
	bottom: -9.3em;
	transform: translateX(-28.5%);
}
.bg-img {
	background: url(../img/main-img-bg.png) no-repeat center center/contain;
	animation: img-bg 5s forwards;
}
.slot {
	background: url(../img/main-img-slot.png) no-repeat center center/contain;
	animation: img-bg 5s forwards;
}
.man {
	background: url(../img/man.png) no-repeat center center/contain;
	animation: man 5s forwards;
}
.ball::before {
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
}
.ball-1 {
	width: 6.5104166667em;
	height: 5.2604166667em;
	top: 50%;
	left: 50%;
	transform: translate(-746%, -129%);
}
.ball-1::before {
	background: url(../img/ball-1.png) no-repeat center center/contain;
	animation: ball-1 5s forwards;
}
.ball-2 {
	width: 12.6041666667em;
	height: 9.5833333333em;
	top: 50%;
	left: 50%;
	transform: translate(-337%, -255%);
}
.ball-2::before {
	background: url(../img/ball-2.png) no-repeat center center/contain;
	animation: ball-2 5s forwards;
}
.ball-3 {
	width: 6.5104166667em;
	height: 5.2604166667em;
	top: 50%;
	left: 50%;
	transform: translate(412%, -420%) scaleX(-1);
}
.ball-3::before {
	background: url(../img/ball-1.png) no-repeat center center/contain;
	animation: ball-3 5s forwards;
}
.ball-4 {
	width: 18.90625em;
	height: 16.1458333333em;
	top: 50%;
	left: 50%;
	transform: translate(198%, -105%);
}
.ball-4::before {
	background: url(../img/ball-4.png) no-repeat center center/contain;
	animation: ball-4 5s forwards;
}
@keyframes txt-1 {
	from,
	10% {
		opacity: 0;
	}
	16%,
	to {
		opacity: 1;
	}
}
@keyframes txt-2 {
	from,
	16% {
		opacity: 0;
	}
	22%,
	to {
		opacity: 1;
	}
}
@keyframes txt-3 {
	from,
	22% {
		opacity: 0;
	}
	28%,
	to {
		opacity: 1;
	}
}
@keyframes man {
	from,
	10% {
		opacity: 0;
	}
	28%,
	to {
		opacity: 1;
	}
}
@keyframes img-bg {
	from,
	28% {
		opacity: 0;
	}
	42%,
	to {
		opacity: 1;
	}
}
@keyframes ball-1 {
	from,
	28% {
		transform: translate(-6em, -6em);
		opacity: 0;
	}
	42%,
	to {
		transform: translate(0, 0);
		opacity: 1;
	}
}
@keyframes ball-2 {
	from,
	28% {
		transform: translate(-6em, -6em);
		opacity: 0;
	}
	42%,
	to {
		transform: translate(0, 0);
		opacity: 1;
	}
}
@keyframes ball-3 {
	from,
	28% {
		transform: translate(-6em, -6em);
		opacity: 0;
	}
	42%,
	to {
		transform: translate(0, 0);
		opacity: 1;
	}
}
@keyframes ball-4 {
	from,
	28% {
		transform: translate(6em, -6em);
		opacity: 0;
	}
	42%,
	to {
		transform: translate(0, 0);
		opacity: 1;
	}
}
@keyframes glare {
	from,
	0.0001%,
	42% {
		transform: translate(-100%, -50%);
	}
	62%,
	to {
		transform: translate(100%, -50%);
	}
}
@media screen and (max-aspect-ratio: 1366/1024) and (min-aspect-ratio: 1000/999) {
	.legal {
		font-size: 0.9em;
		width: 30em;
		bottom: 2em;
		transform: translateX(-109%);
	}
	.txt-1-wrapper .txt-1 {
		font-size: 2.7em;
	}
	.legal {
		font-size: 0.75em;
	}
	.bg {
		width: 115em;
		height: 106.145833em;
	}
	.main-img {
		width: 117.416667em;
		height: 62.520833em;
		bottom: -11.3em;
		transform: translateX(-32.5%);
	}
	.logo {
		width: 25.760417em;
		height: 7.3958333333em;
	}
	.logo-wrapper {
		transform: translate(-50%, -259%);
	}
	.bg-1 {
		bottom: -30.5em;
		left: -34.5em;
	}
	.ball-2 {
		transform: translate(-299%, -287%);
	}
	.ball-3 {
		transform: translate(385%, -420%) scaleX(-1);
	}
	.banner {
		font-size: 1.25vw;
	}
}
@media screen and (min-aspect-ratio: 740/360) {
	.legal {
		font-size: 0.9em;
		width: 30em;
		bottom: 2em;
		left: 50%;
		transform: translateX(-122%);
	}
	.ball-4 {
		width: 15.90625em;
		height: 16.1458333333em;
		transform: translate(225%, -97%);
	}
	.main-img {
		bottom: -9.3em;
		transform: translateX(-24%);
	}
	.main-wrapper {
		transform: translate(-104%, -50%);
	}
	.ball-1,
	.ball-2,
	.ball-3,
	.ball-4,
	.bg {
		font-size: 1vw;
	}
	.banner {
		font-size: 0.83vw;
	}
}
@media screen and (orientation: portrait) {
	.legal {
		font-size: 1em;
		bottom: 1.3em;
		transform: translateX(-28%);
	}
	.ball-4 {
		width: 20.90625em;
		height: 18.145833em;
		transform: translate(90%, 20%);
	}
	.ball-3 {
		width: 8.510417em;
		height: 7.260417em;
		transform: translate(302%, -158%) scaleX(-1);
	}
	.ball-2 {
		width: 14.604167em;
		height: 10.583333em;
		transform: translate(-251%, -172%);
	}
	.ball-1 {
		width: 6.5104166667em;
		height: 5.2604166667em;
		transform: translate(-461%, 309%);
	}
	.bg-2 {
		width: 53.729167em;
		height: 47.71875em;
		bottom: -16.5em;
		right: -10.5em;
		transform: scaleX(-1) rotate(130deg);
	}
	.bg-1 {
		width: 45.3125em;
		height: 65.9895833333em;
		bottom: -28.5em;
		left: -12.5em;
	}
	.main-img {
		width: 122.416667em;
		height: 67.520833em;
		bottom: -13.3em;
		transform: translateX(-50%);
	}
	.btn {
		font-size: 2.1em;
	}
	.btn-wrapper {
		transform: translate(-50%, 298%);
	}
	.txt-1-wrapper {
		height: 25em;
		transform: translate(-50%, -117%);
	}
	.main-wrapper {
		width: 100em;
		height: 140em;
		transform: translate(-50%, -50%);
	}
	.logo-wrapper {
		height: 15em;
		transform: translate(-50%, -289%);
	}
	.logo {
		width: 28.760417em;
	}
	.banner {
		font-size: 1.53vw;
		font-size: calc(0.65vw + 0.65vh);
	}
}
@media screen and (max-aspect-ratio: 320/481) {
	.ball-1,
	.ball-2,
	.ball-3,
	.ball-4 {
		display: none;
	}
	.main-img {
		width: 132.416667em;
		height: 73.520833em;
		bottom: -13.3em;
		transform: translateX(-50%);
	}
	.btn {
		font-size: 2.4em;
	}
	.btn-wrapper {
		transform: translate(-50%, 333%);
	}
	.logo {
		width: 25.760417em;
	}
	.txt-1-wrapper {
		height: 25em;
		transform: translate(-50%, -126%);
	}
	.logo-wrapper {
		height: 15em;
		transform: translate(-50%, -312%);
	}
	.banner {
		font-size: 1.53vw;
		font-size: calc(0.66vw + 0.66vh);
	}
	.ball-1,
	.ball-2,
	.ball-3,
	.ball-4 {
		display: inline;
	}
	.ball-4 {
		width: 22.90625em;
		height: 21.145833em;
		transform: translate(65%, 48%);
	}
	.ball-3 {
		width: 8.510417em;
		height: 7.260417em;
		transform: translate(274%, -44%) scaleX(-1);
	}
	.ball-2 {
		width: 17.604167em;
		height: 12.583333em;
		transform: translate(-202%, -34%);
	}
	.ball-1 {
		width: 7.510417em;
		height: 6.260417em;
		transform: translate(-417%, 241%);
	}

	.legal {
		font-size: 1em;
		width: 45em;
		transform: translateX(-20%);
	}
}
@media screen and (max-aspect-ratio: 520/1024) {
	.txt-1-wrapper .txt-1 {
		font-size: 2.7em;
	}
	.legal {
		font-size: 0.8em;
		width: 45em;
	}
	.ball-1,
	.ball-2,
	.ball-3,
	.ball-4 {
		display: none;
	}
	.main-img {
		width: 132.416667em;
		height: 73.520833em;
		bottom: -13.3em;
		transform: translateX(-50%);
	}
	.btn {
		font-size: 2.4em;
	}
	.btn-wrapper {
		transform: translate(-50%, 333%);
	}
	.logo {
		width: 25.760417em;
	}
	.txt-1-wrapper {
		height: 25em;
		transform: translate(-50%, -126%);
	}
	.logo-wrapper {
		height: 15em;
		transform: translate(-50%, -312%);
	}
	.banner {
		font-size: 1.53vw;
		font-size: calc(0.7vw + 0.7vh);
	}
	.legal {
		font-size: 1em;
		width: 45em;
		transform: translateX(-20%);
	}
}