@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap";
*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	/* animation: none !important; */
}
.banner {
	margin: 0 auto;
	min-width: 280px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 1vw;
	background: #040001;
	font-family: "Montserrat", sans-serif;
	font-weight: 900;
	font-style: normal;
	color: #fff;
	text-align: center;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.banner div {
	position: absolute;
}
.banner img {
	position: absolute;
}
.banner::before {
	content: "";
	width: 109.375em;
	height: 62.5em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-49.5%, -50%);
	background: url(../img/bg.jpg) no-repeat center center/contain;
}
.main-wrapper {
	width: 54.2708333333em;
	top: 50%;
	left: 50%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.link {
	width: 92%;
	height: 35%;
	position: absolute;
	bottom: 1em;
	left: 2em;
	border-radius: 5em;
	z-index: 1000;
	cursor: auto;
}
.logo-wrapper {
	height: 17.5em;
	transform: translate(-81%, -141%);
}
.logo {
	position: relative !important;
	width: 17.2916666667em;
	height: 7.3958333333em;
}
.btn-wrapper {
	height: 15.625em;
	transform: translate(-81%, 53%);
	z-index: 10;
}
.btn {
	font-size: 3.5em;
	width: 8.2em;
	height: 2.1875em;
	font-weight: 500;
	background: linear-gradient(0deg, rgb(5, 143, 53) 0%, rgb(91, 172, 40) 100%);
	border-radius: 10em;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden;
	position: relative;
	z-index: 10;
	animation: btn 3s infinite;
}
.btn::before {
	content: "";
	width: calc(100% - 0.4em);
	height: calc(100% - 0.4em);
	border-radius: 10em;
	background: linear-gradient(180deg, rgb(5, 143, 53) 0%, rgb(91, 172, 40) 100%);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.btn span {
	position: relative;
	transform: translateY(-0.1em);
	z-index: 1;
}
@keyframes btn {
	from,
	30%,
	50%,
	70%,
	90%,
	to {
		transform: scale(1);
	}
	40%,
	60%,
	80% {
		transform: scale(1.1);
	}
}
.txt-1-wrapper {
	height: 18.2291666667em;
	top: 50%;
	left: 50%;
	transform: translate(-81%, -54%);
	text-align: left;
	z-index: 5;
}
.txt-1 {
	font-size: 4.16em;
	width: 100%;
	position: relative !important;
}
.txt-1 .second {
	color: #ffc000;
}
.second-br {
	display: none;
}
.wrapper {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
}
.girl {
	width: 33.6875em;
	height: 44.770833em;
	bottom: -0.5em;
	left: 50%;
	transform: translateX(14%);
	background: url(../img/girl.png) no-repeat center center / contain;
}

.ball {
	width: 15.3645833333em;
	height: 15.3645833333em;
	top: 50%;
	left: 50%;
	transform: translate(-72%, 50%);
	background: url(../img/ball.png) no-repeat center center/contain;
}
.ball-blue {
	width: 8.6458333333em;
	height: 8.6979166667em;
	top: 50%;
	left: 50%;
	transform: translate(-153%, -244%);
	background: url(../img/ball-blue.png) no-repeat center center / contain;
}
.ball-blur {
	width: 27.1354166667em;
	height: 26.9270833333em;
	top: 50%;
	left: 50%;
	transform: translate(134%, -98%);
	background: url(../img/ball-blur.png) no-repeat center center/contain;
}
.money-1 {
	width: 13.4375em;
	height: 11.6145833333em;
	top: 50%;
	left: 50%;
	transform: translate(-13%, -100%);
	background: url(../img/money-1.png) no-repeat center center/contain;
}
.money-2 {
	width: 9.375em;
	height: 9.6354166667em;
	top: 50%;
	left: 50%;
	transform: translate(408%, 110%);
	background: url(../img/money-2.png) no-repeat center center/contain;
}
@media screen and (max-aspect-ratio: 1366/1024) and (min-aspect-ratio: 1000/999) {
	.link {
		width: 95%;
		height: 28%;
		bottom: 1em;
		left: 2em;
		border-radius: 5em;
	}
	.money-2 {
		width: 10.375em;
		height: 10.635417em;
		transform: translate(372%, -128%);
	}
	.money-1 {
		width: 14.4375em;
		height: 12.614583em;
		transform: translate(-88%, -44%);
	}
	.ball {
		width: 14.364583em;
		height: 14.364583em;
		transform: translate(-103%, 155%);
	}
	.ball-blue {
		width: 11.645833em;
		height: 11.697917em;
		transform: translate(-27%, -229%);
	}
	.ball-blur {
		transform: translate(121%, -176%);
	}
	.first-br {
		display: none;
	}
	.txt-1 .second {
		display: block;
	}
	.girl {
		width: 51.245em;
		height: 71.106881em;
		bottom: -1.8em;
		transform: translateX(-5%);
	}
	.txt-1 {
		font-size: 5.4em;
		width: 7em;
	}
	.txt-1-wrapper {
		height: 46.229167em;
		transform: translate(-85%, -57%);
	}
	.logo-wrapper {
		transform: translate(-85%, -209%);
	}
	.logo {
		width: 25.291667em;
	}
	.btn-wrapper {
		transform: translate(-85%, 100%);
	}
	.banner::before {
		width: 153.7335285505em;
		height: 87.8477306003em;
		transform: translate(-37%, -50%);
	}
	.btn {
		font-size: 3.8em;
	}
}
@media screen and (min-aspect-ratio: 740/360) {
	.banner {
		font-size: 0.9vw;
	}
	.banner::before {
		font-size: 1vw;
	}
}
@media screen and (orientation: portrait) {
	.link {
		width: 96%;
		height: 37%;
		bottom: 1em;
		left: 2em;
		border-radius: 5em;
	}
	.banner::before {
		content: "";
		width: 205.078125em;
		height: 117.1875em;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -29%) rotate(90deg);
		background: url(../img/bg.jpg) no-repeat center center/contain;
	}
	.ball-blur {
		width: 39.6484375em;
		height: 39.16015625em;
		transform: translate(56%, -215%) rotate(63deg);
	}
	.ball-blue {
		width: 30.56640625em;
		height: 30.56640625em;
		transform: translate(-162%, -81%) rotate(60deg);
	}
	.ball {
		width: 21.484375em;
		height: 28.80859375em;
		transform: translate(116%, 32%);
	}
	.money-2 {
		width: 20.8984375em;
		height: 21.484375em;
		transform: translate(87%, -85%);
	}
	.money-1 {
		width: 22.65625em;
		height: 19.7265625em;
		transform: translate(-211%, 94%);
	}
	.girl {
		width: 43.65234375em;
		height: 68.75em;
		bottom: 50%;
		left: 50%;
		transform: translate(-50%, 73%);
		background: url(../img/girl.png) no-repeat center center/contain;
	}
	.txt-1-wrapper {
		width: 99em;
		height: 23em;
		transform: translate(-50%, -192%);
		text-align: center;
	}
	.txt-1-wrapper br {
		display: none;
	}
	.txt-1-wrapper .first-br {
		display: inline;
	}
	.txt-1-wrapper .second {
		display: block;
	}
	.txt-1 {
		font-size: 6.2em;
	}
	.btn-wrapper {
		width: 75em;
		height: 20em;
		transform: translate(-50%, 212%);
	}
	.btn {
		font-size: 7.3em;
	}
	.logo-wrapper {
		transform: translate(-50%, -366%);
	}
	.logo {
		width: 33.291667em;
	}
	.main-wrapper {
		justify-content: center;
	}
}
@media screen and (max-aspect-ratio: 320/481) {
	.money-2 {
		width: 29.898438em;
		height: 28.484375em;
		transform: translate(69%, -98%);
	}
	.money-1 {
		width: 24.65625em;
		height: 26.726563em;
		transform: translate(-228%, 78%) rotate(-53deg);
	}
	.girl {
		width: 60.652344em;
		height: 112.75em;
		transform: translate(-50%, 67%);
	}
	.ball-blur {
		width: 48.648438em;
		height: 47.160156em;
		transform: translate(60%, -220%) rotate(68deg);
	}
	.ball-blue {
		width: 41.566406em;
		height: 45.566406em;
		transform: translate(-179%, -68%) rotate(60deg);
	}
	.txt-1-wrapper .second {
		display: block;
	}
	.txt-1 {
		font-size: 8.5em;
	}
	.txt-1-wrapper {
		width: 106em;
		height: 23em;
		transform: translate(-50%, -242%);
		text-align: center;
	}
	.btn-wrapper {
		width: 96em;
		height: 27em;
		transform: translate(-50%, 229%);
	}
	.ball {
		width: 31.484375em;
		height: 36.808594em;
		transform: translate(103%, 39%);
	}

	.btn {
		font-size: 10em;
	}
	.logo-wrapper {
		transform: translate(-50%, -493%);
	}
	.logo {
		width: 53.291667em;
		height: 9.395833em;
	}
	.banner::before {
		width: 282.078125em;
		height: 158.1875em;
		transform: translate(-51%, -31%) rotate(90deg);
	}
	.banner {
		font-size: 0.9vw;
	}
	.link {
		height: 30%;
	}
}
@media screen and (max-aspect-ratio: 520/1024) {
	.money-2 {
		width: 24.898438em;
		height: 24.484375em;
		transform: translate(87%, -143%);
	}
	.money-1 {
		width: 20.65625em;
		height: 19.7265625em;
		transform: translate(-241%, -21%) rotate(-53deg);
	}
	.girl {
		width: 67.652344em;
		height: 112.75em;
		transform: translate(-49%, 64%);
	}
	.ball-blur {
		width: 41.648438em;
		height: 41.160156em;
		transform: translate(58%, -267%) rotate(68deg);
	}
	.ball-blue {
		width: 26.566406em;
		transform: translate(-171%, -103%) rotate(60deg);
	}
	.txt-1-wrapper .second {
		display: block;
	}
	.txt-1 {
		font-size: 7.4em;
	}
	.txt-1-wrapper {
		width: 98em;
		height: 23em;
		transform: translate(-50%, -299%);
		text-align: center;
	}
	.btn-wrapper {
		width: 96em;
		height: 27em;
		transform: translate(-50%, 253%);
	}
	.ball {
		width: 24.484375em;
		height: 30.808594em;
		transform: translate(103%, -40%);
	}

	.btn {
		font-size: 11em;
	}
	.logo-wrapper {
		transform: translate(-50%, -557%);
	}
	.logo {
		width: 51.291667em;
		height: 8.395833em;
	}
	.banner::before {
		width: 244.078125em;
		height: 158.1875em;
		transform: translate(-50%, -52%) rotate(90deg);
	}
	.banner {
		font-size: 1vw;
	}
	.link {
		height: 34%;
	}
}
