@import "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,900;1,900&display=swap";
*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	/* animation: none !important; */
}
.banner {
	margin: 0 auto;
	min-width: 280px;
	width: 100%;
	height: 90px;
	background: linear-gradient(113deg, rgb(5, 15, 56) 55%, rgb(35, 55, 138) 100%);
	border: 1px solid #006aff;
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-style: italic;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.container {
	width: 1000px;
	height: 100%;
	position: relative;
}
.container div,
.container img {
	position: absolute;
}
.logo-wrapper,
.btn-wrapper {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo-wrapper {
	top: 0;
	left: 0;
	width: 26.5%;
	height: 100%;
}
.logo {
	position: relative;
	width: 200px;
	z-index: 30;
}
.btn-wrapper {
	bottom: 0;
	right: 0;
	width: 24.5%;
	height: 100%;
}
.btn {
	font-size: 17px;
	width: 142px;
	height: 56px;
	color: #000;
	font-style: normal;
	background: #76e600;
	border-radius: 47px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden;
	position: relative;
	z-index: 10;
}
.btn-border {
	position: absolute;
	box-sizing: content-box;
	background: none !important;
	box-shadow: inset 0 0 0 0.1em #76e600;
	line-height: 1.1;
	padding: 0.4em;
	border-radius: 65px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 22;
}
.btn-border::before {
	content: "";
	width: 100%;
	height: 300%;
	position: absolute;
	background: url(../img/glare.png) no-repeat center center/contain;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	animation: glare 4.9s infinite;
}
.img {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.txt-shadow {
	text-shadow:
		#001c44 3px 0px 0px,
		#001c44 2.83487px 0.981584px 0px,
		#001c44 2.35766px 1.85511px 0px,
		#001c44 1.62091px 2.52441px 0px,
		#001c44 0.705713px 2.91581px 0px,
		#001c44 -0.287171px 2.98622px 0px,
		#001c44 -1.24844px 2.72789px 0px,
		#001c44 -2.07227px 2.16926px 0px,
		#001c44 -2.66798px 1.37182px 0px,
		#001c44 -2.96998px 0.42336px 0px,
		#001c44 -2.94502px -0.571704px 0px,
		#001c44 -2.59586px -1.50383px 0px,
		#001c44 -1.96093px -2.27041px 0px,
		#001c44 -1.11013px -2.78704px 0px,
		#001c44 -0.137119px -2.99686px 0px,
		#001c44 0.850987px -2.87677px 0px,
		#001c44 1.74541px -2.43999px 0px,
		#001c44 2.44769px -1.73459px 0px,
		#001c44 2.88051px -0.838247px 0px,
		#000c54 0 0 14px;
}

.s1-title {
	width: 158px;
	height: 81px;
	top: 2px;
	left: 261px;
	background: url(../img/s1-title.png) no-repeat center center/contain;
	z-index: 1;
	animation: s1-title 4.9s infinite;
}

.s1-man {
	width: 231px;
	height: 470px;
	top: -43px;
	left: 753px;
	background: url(../img/s1-man.png) no-repeat center center/contain;
	z-index: 1;
}
.txt-2-wrapper {
	width: 800px;
	font-size: 21.5px;
	line-height: 1.3;
	height: 100%;
	top: 0;
	left: -21px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 3;
	animation: txt-2 4.9s infinite;
}
.txt-2 {
	font-size: inherit;
	width: 100%;
	position: static !important;
}
.txt-2 span {
	color: #fff300;
}
.txt-2-wrapper br {
	display: none;
}
.txt-3-wrapper {
	width: 600px;
	font-size: 48px;
	line-height: 1.3;
	height: 100%;
	top: 0;
	left: 152px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 3;
	animation: txt-3 4.9s infinite;
}
.txt-3 {
	font-size: inherit;
	width: 100%;
	position: static !important;
	color: #fff300;
}
.s3-img {
	width: 98px;
	height: 105px;
	top: -5px;
	left: 100px;
	z-index: 1;
}
.s3-img-y {
	background: url(../img/s3-img-y.png) no-repeat center center/contain;
	animation: s3-img-y 4.9s infinite;
}
.s3-img-w {
	background: url(../img/s3-img-w.png) no-repeat center center/contain;
	animation: s3-img-w 4.9s infinite;
}

@keyframes s1-title {
	from,
	45%,
	to {
		opacity: 0;
	}
	2%,
	43% {
		opacity: 1;
	}
}
@keyframes txt-2 {
	from,
	43% {
		transform: translateY(90px);
	}
	47%,
	96% {
		transform: translateY(0);
	}
	to {
		transform: translateY(-90px);
	}
}
@keyframes glare {
	from,
	0.0001%,
	65.5% {
		transform: translate(-100%, -50%);
	}
	77.5%,
	to {
		transform: translate(100%, -50%);
	}
}
@media (max-width: 1900px) {
	.txt-2-wrapper {
		width: 336px;
		font-size: 18.4px;
		text-align: left;
		left: 215px;
	}
	.s1-man {
		width: 231px;
		top: -44px;
		left: 561px;
	}

	.s1-title {
		width: 160px;
		top: 4px;
		left: 268px;
	}

	.btn-wrapper {
		width: 22.5%;
	}
	.btn {
		font-size: 14px;
		width: 116px;
		height: 48px;
	}
	.logo {
		width: 154px;
	}
}
@media (max-width: 1279px) {
	.txt-2-wrapper {
		width: 225px;
		font-size: 16.5px;
		left: 200px;
		text-align: left;
	}

	.s1-man {
		width: 182px;
		top: -83px;
		left: 385px;
	}

	.s1-title {
		width: 149px;
		top: 7px;
		left: 206px;
	}
	.btn-wrapper {
		width: 22.5%;
	}
	.btn {
		font-size: 12px;
		width: 100px;
		height: 40px;
	}
	.logo-wrapper {
		width: 24.5%;
	}
	.logo {
		width: 113px;
	}
	.container {
		width: 750px;
	}
	.txt-shadow {
		text-shadow:
			#001c44 1px 0px 0px,
			#001c44 0.540302px 0.841471px 0px,
			#001c44 -0.416147px 0.909297px 0px,
			#001c44 -0.989992px 0.14112px 0px,
			#001c44 -0.653644px -0.756802px 0px,
			#001c44 0.283662px -0.958924px 0px,
			#001c44 0.96017px -0.279415px 0px;
	}
	.txt-1 .second {
		padding-left: 0;
	}
}
@media (max-width: 767px) {
	.txt-2-wrapper {
		width: 158px;
		font-size: 12.5px;
		left: 105px;
	}
	.txt-2-wrapper br {
		display: inline;
	}
	.s1-man {
		width: 133px;
		top: -121px;
		left: 239px;
	}

	.s1-title {
		width: 121px;
		top: 5px;
		left: 102px;
	}
	.btn-wrapper {
		width: 18.5%;
	}
	.btn {
		font-size: 6.5px;
		width: 56px;
		height: 24px;
	}
	.logo-wrapper {
		width: 21.5%;
	}
	.logo {
		width: 70px;
	}
	.container {
		width: 450px;
	}
}
@media (max-width: 467px) {
	.txt-2-wrapper {
		width: 122px;
		font-size: 11px;
		left: 78px;
	}

	.s1-man {
		width: 100px;
		top: -148px;
		left: 159px;
	}

	.s1-title {
		width: 79px;
		top: 3px;
		left: 74px;
	}
	.btn-wrapper {
		width: 32.5%;
		height: 67%;
		right: auto;
		left: 0;
	}
	.logo-wrapper {
		width: 32.5%;
		height: 56%;
	}
	.logo {
		width: 62px;
	}
	.container {
		width: 250px;
	}
}