@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@100..900&family=Roboto:wght@100..900&display=swap");
*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	/* animation: none !important; */
}

:root {
	--b-height: 90px;
}

.banner {
	margin: 0 auto;
	min-width: 280px;
	width: 100%;
	height: var(--b-height);
	background: #072a6e url(../img/bg.jpg) no-repeat center center;
	border: 1px solid #14a0ff;
	color: #fff;
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-style: normal;
	text-align: center;
	text-transform: uppercase;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: 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: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.logo-wrapper {
	font-size: 20px;
	top: 0;
	left: 0;
	width: 27.5%;
	height: 100%;
}

.logo {
	position: relative;
	width: 10em;
	z-index: 30;
}

.btn-wrapper {
	font-size: 20px;
	bottom: 0;
	right: 0;
	width: 27%;
	height: 100%;
	z-index: 10;
}

/* button glare */
.btn {
	width: 8.2em;
	height: 2.2em;
	color: #000f2c;
	font-weight: 900;
	background: #5dd301;
	-webkit-box-shadow: inset 0 0.08em 0 0 #97e55e;
	box-shadow: inset 0 0.08em 0 0 #97e55e;
	border-radius: 47px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	position: relative;
	z-index: 10;
	outline: 0.18em solid #5dd301;
	outline-offset: 0.3em;
	-webkit-animation: btn 7.9s infinite;
	animation: btn 7.9s infinite;
}
.btn span {
	font-size: 0.8em;
}
.img {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

/* slide 1 */
.txt-1-wrapper {
	width: 900px;
	font-size: 56px;
	height: var(--b-height);
	top: 0;
	left: 155px;
	line-height: 1.1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 10;
	text-shadow: 0.0185185185em 0.0740740741em 0.1666666667em rgba(0, 0, 0, 0.56);
	-webkit-animation: txt-1 7.9s infinite;
	animation: txt-1 7.9s infinite;
}
.txt-1-wrapper .txt-1 {
	font-size: 0.7em;
	width: 100%;
	position: relative;
}

.s1-title-bg {
	width: 212px;
	height: 259px;
	top: -30px;
	left: 41px;
	background: url(../img/s1-title-bg.png) no-repeat center center/contain;
	z-index: 1;
	-webkit-animation: txt-1 7.9s infinite;
	animation: txt-1 7.9s infinite;
}

.s1-title {
	width: 353px;
	height: 330px;
	top: -122px;
	left: -30px;
	background: url(../img/s1-title.png) no-repeat center center/contain;
	z-index: 1;
	-webkit-animation: s1-title 7.9s infinite;
	animation: s1-title 7.9s infinite;
}

.bg-item-1 {
	width: 81px;
	height: 209px;
	top: -67px;
	left: -54px;
	background: url(../img/bg-item-1.png) no-repeat center center/contain;
	z-index: 1;
}

.bg-item-2 {
	width: 82px;
	height: 336px;
	top: -80px;
	left: 1006px;
	background: url(../img/bg-item-2.png) no-repeat center center/contain;
	z-index: 1;
}

.bg-item-3 {
	width: 391px;
	height: 617px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 995px;
	background: url(../img/bg-curtaine.png) no-repeat center center/contain;
	z-index: 1;
}

.img-2-wrapper {
	font-size: 50px;
	width: 275px;
	top: 0;
	left: 643px;
	height: 90px;
	-webkit-filter: drop-shadow(0 0 0.3em rgba(0, 115, 255, 0.9));
	filter: drop-shadow(0 0 0.3em rgba(0, 115, 255, 0.9));
	z-index: 5;
}

.s2-item-1 {
	width: 0.76em;
	height: 0.88em;
	top: 0.04em;
	left: 0.76em;
	background: url(../img/s2-item-1.png) no-repeat center center/contain;
	-webkit-animation: s2-item-1 7.9s infinite;
	animation: s2-item-1 7.9s infinite;
	z-index: 1;
}

.s2-item-2 {
	width: 1.08em;
	height: 1.12em;
	top: 0.62em;
	left: 0.68em;
	background: url(../img/s2-item-2.png) no-repeat center center/contain;
	-webkit-animation: s2-item-2 7.9s infinite;
	animation: s2-item-2 7.9s infinite;
	z-index: 1;
}

.s2-item-3 {
	width: 1.8em;
	height: 1.12em;
	top: 0.34em;
	left: 1.7em;
	background: url(../img/s2-item-3.png) no-repeat center center/contain;
	-webkit-animation: s2-item-3 7.9s infinite;
	animation: s2-item-3 7.9s infinite;
}

.s2-item-4 {
	width: 1.72em;
	height: 2.14em;
	top: -0.12em;
	left: 3.14em;
	background: url(../img/s2-item-4.png) no-repeat center center/contain;
	-webkit-animation: s2-item-4 7.9s infinite;
	animation: s2-item-4 7.9s infinite;
}

.txt-2-wrapper {
	width: 900px;
	font-size: 34.5px;
	height: var(--b-height);
	top: 0;
	left: -100px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 10;
	-webkit-animation: txt-2 7.9s infinite;
	animation: txt-2 7.9s infinite;
	text-shadow: 0.0185185185em 0.0740740741em 0.1666666667em rgba(0, 0, 0, 0.56);
}

.txt-2-wrapper .txt-2 {
	font-size: 0.9em;
	width: 100%;
	position: relative;
}

.legal {
	font-size: 6.5px;
	justify-content: flex-start;
	position: relative;
}
.line {
	width: 0.07em;
	height: 2em;
	background: #fff;
	margin: 0 1em;
}

.legal-number {
	font-size: 5.8px;
}
.lgl-g {
	font-size: 12px;
	width: 83em;
	height: 4.8em;
	left: 50%;
	bottom: 50%;
	z-index: 12;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	transform: translate(-52%, 54%);
	font-weight: 400;
	letter-spacing: 0.05em;
	font-style: normal;
	animation: legal 7.9s infinite;
}
.legal-1 {
	width: 25em;
	height: 3em;
	background: url(../img/legal-1.png) no-repeat center center/contain;
	z-index: 1;
	position: relative !important;
}
.legal-2 {
	width: 35em;
	height: 3em;
	background: url(../img/legal-2.png) no-repeat center center/contain;
	z-index: 1;
	position: relative !important;
}

@-webkit-keyframes txt-1 {
	from,
	24.1%,
	to {
		opacity: 1;
	}
	26.7%,
	96.1% {
		opacity: 0;
	}
}

@keyframes txt-1 {
	from,
	24.1%,
	to {
		opacity: 1;
	}
	26.7%,
	96.1% {
		opacity: 0;
	}
}
@-webkit-keyframes s1-title {
	from,
	24.1%,
	to {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
	26.7% {
		-webkit-transform: translateY(100px);
		transform: translateY(100px);
		opacity: 1;
	}
	26.71% {
		-webkit-transform: translateY(100px);
		transform: translateY(100px);
		opacity: 0;
	}
	26.72% {
		-webkit-transform: translateY(-100px);
		transform: translateY(-100px);
		opacity: 0;
	}
	96.1% {
		-webkit-transform: translateY(-100px);
		transform: translateY(-100px);
		opacity: 1;
	}
}

@keyframes s1-title {
	from,
	24.1%,
	to {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
	26.7% {
		-webkit-transform: translateY(100px);
		transform: translateY(100px);
		opacity: 1;
	}
	26.71% {
		-webkit-transform: translateY(100px);
		transform: translateY(100px);
		opacity: 0;
	}
	26.72% {
		-webkit-transform: translateY(-100px);
		transform: translateY(-100px);
		opacity: 0;
	}
	96.1% {
		-webkit-transform: translateY(-100px);
		transform: translateY(-100px);
		opacity: 1;
	}
}
@-webkit-keyframes txt-2 {
	from,
	26.7%,
	69.7%,
	to {
		opacity: 0;
	}
	30.6%,
	67.1% {
		opacity: 1;
	}
}
@keyframes txt-2 {
	from,
	26.7%,
	69.7%,
	to {
		opacity: 0;
	}
	30.6%,
	67.1% {
		opacity: 1;
	}
}
@-webkit-keyframes s2-item-1 {
	from,
	26.7%,
	69.7%,
	to {
		-webkit-transform: translateY(-110px) scale(1);
		transform: translateY(-110px) scale(1);
		z-index: 1;
	}
	30.6%,
	35.6%,
	39.4%,
	67.1% {
		-webkit-transform: translateY(0) scale(1);
		transform: translateY(0) scale(1);
		z-index: 1;
	}
	36.9%,
	38.1% {
		-webkit-transform: translateY(0) scale(1.15);
		transform: translateY(0) scale(1.15);
		z-index: 2;
	}
}
@keyframes s2-item-1 {
	from,
	26.7%,
	69.7%,
	to {
		-webkit-transform: translateY(-110px) scale(1);
		transform: translateY(-110px) scale(1);
		z-index: 1;
	}
	30.6%,
	35.6%,
	39.4%,
	67.1% {
		-webkit-transform: translateY(0) scale(1);
		transform: translateY(0) scale(1);
		z-index: 1;
	}
	36.9%,
	38.1% {
		-webkit-transform: translateY(0) scale(1.15);
		transform: translateY(0) scale(1.15);
		z-index: 2;
	}
}
@-webkit-keyframes s2-item-2 {
	from,
	26.7%,
	69.7%,
	to {
		-webkit-transform: translateY(-110px) scale(1);
		transform: translateY(-110px) scale(1);
		z-index: 1;
	}
	30.6%,
	38.1%,
	41.9%,
	67.1% {
		-webkit-transform: translateY(0) scale(1);
		transform: translateY(0) scale(1);
		z-index: 1;
	}
	39.4%,
	40.6% {
		-webkit-transform: translateY(0) scale(1.15);
		transform: translateY(0) scale(1.15);
		z-index: 2;
	}
}
@keyframes s2-item-2 {
	from,
	26.7%,
	69.7%,
	to {
		-webkit-transform: translateY(-110px) scale(1);
		transform: translateY(-110px) scale(1);
		z-index: 1;
	}
	30.6%,
	38.1%,
	41.9%,
	67.1% {
		-webkit-transform: translateY(0) scale(1);
		transform: translateY(0) scale(1);
		z-index: 1;
	}
	39.4%,
	40.6% {
		-webkit-transform: translateY(0) scale(1.15);
		transform: translateY(0) scale(1.15);
		z-index: 2;
	}
}
@-webkit-keyframes s2-item-3 {
	from,
	26.7%,
	69.7%,
	to {
		-webkit-transform: translateY(-110px) scale(1);
		transform: translateY(-110px) scale(1);
		z-index: 1;
	}
	30.6%,
	40.6%,
	44.4%,
	67.1% {
		-webkit-transform: translateY(0) scale(1);
		transform: translateY(0) scale(1);
		z-index: 1;
	}
	41.9%,
	43.1% {
		-webkit-transform: translateY(0) scale(1.15);
		transform: translateY(0) scale(1.15);
		z-index: 2;
	}
}
@keyframes s2-item-3 {
	from,
	26.7%,
	69.7%,
	to {
		-webkit-transform: translateY(-110px) scale(1);
		transform: translateY(-110px) scale(1);
		z-index: 1;
	}
	30.6%,
	40.6%,
	44.4%,
	67.1% {
		-webkit-transform: translateY(0) scale(1);
		transform: translateY(0) scale(1);
		z-index: 1;
	}
	41.9%,
	43.1% {
		-webkit-transform: translateY(0) scale(1.15);
		transform: translateY(0) scale(1.15);
		z-index: 2;
	}
}
@-webkit-keyframes s2-item-4 {
	from,
	26.7%,
	69.7%,
	to {
		-webkit-transform: translateY(-110px) scale(1);
		transform: translateY(-110px) scale(1);
		z-index: 1;
	}
	30.6%,
	43.1%,
	46.9%,
	67.1% {
		-webkit-transform: translateY(0) scale(1);
		transform: translateY(0) scale(1);
		z-index: 1;
	}
	44.4%,
	45.6% {
		-webkit-transform: translateY(0) scale(1.15);
		transform: translateY(0) scale(1.15);
		z-index: 2;
	}
}
@keyframes s2-item-4 {
	from,
	26.7%,
	69.7%,
	to {
		-webkit-transform: translateY(-110px) scale(1);
		transform: translateY(-110px) scale(1);
		z-index: 1;
	}
	30.6%,
	43.1%,
	46.9%,
	67.1% {
		-webkit-transform: translateY(0) scale(1);
		transform: translateY(0) scale(1);
		z-index: 1;
	}
	44.4%,
	45.6% {
		-webkit-transform: translateY(0) scale(1.15);
		transform: translateY(0) scale(1.15);
		z-index: 2;
	}
}
@-webkit-keyframes btn {
	from,
	35.6%,
	39.4%,
	40.6%,
	44.4%,
	45.6%,
	49.4%,
	to {
		-webkit-box-shadow:
			inset 0 0.08em 0 0 #97e55e,
			0 0.22em 1em 0 rgba(0, 0, 0, 0.5);
		box-shadow:
			inset 0 0.08em 0 0 #97e55e,
			0 0.22em 1em 0 rgba(0, 0, 0, 0.5);
	}
	36.9%,
	38.1%,
	41.9%,
	43.1%,
	46.9%,
	48.1% {
		-webkit-box-shadow:
			inset 0 0.08em 0 0 #97e55e,
			0 0 1em 0 #5dd301,
			0 0 1.3em 0 #5dd301,
			0 0.22em 1em 0 rgba(0, 0, 0, 0.5);
		box-shadow:
			inset 0 0.08em 0 0 #97e55e,
			0 0 1em 0 #5dd301,
			0 0 1.3em 0 #5dd301,
			0 0.22em 1em 0 rgba(0, 0, 0, 0.5);
	}
}
@keyframes btn {
	from,
	35.6%,
	39.4%,
	40.6%,
	44.4%,
	45.6%,
	49.4%,
	to {
		-webkit-box-shadow:
			inset 0 0.08em 0 0 #97e55e,
			0 0.22em 1em 0 rgba(0, 0, 0, 0.5);
		box-shadow:
			inset 0 0.08em 0 0 #97e55e,
			0 0.22em 1em 0 rgba(0, 0, 0, 0.5);
	}
	36.9%,
	38.1%,
	41.9%,
	43.1%,
	46.9%,
	48.1% {
		-webkit-box-shadow:
			inset 0 0.08em 0 0 #97e55e,
			0 0 1em 0 #5dd301,
			0 0 1.3em 0 #5dd301,
			0 0.22em 1em 0 rgba(0, 0, 0, 0.5);
		box-shadow:
			inset 0 0.08em 0 0 #97e55e,
			0 0 1em 0 #5dd301,
			0 0 1.3em 0 #5dd301,
			0 0.22em 1em 0 rgba(0, 0, 0, 0.5);
	}
}
@-webkit-keyframes legal {
	from,
	69.1%,
	to {
		opacity: 0;
	}
	71%,
	96.1% {
		opacity: 1;
	}
}

@keyframes legal {
	from,
	69.1%,
	to {
		opacity: 0;
	}
	71%,
	96.1% {
		opacity: 1;
	}
}
@media (max-width: 1900px) {
	.legal::before {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(-240%, -50%);
	}
	.lgl-g {
		width: 35em;
		height: 4.8em;
		line-height: 1.4;
		font-size: 11px;
		transform: translate(-50%, 50%);
	}
	.lgl-g br {
		display: none;
	}
	.img-2-wrapper {
		font-size: 50px;
		left: 542px;
	}
	.txt-2-wrapper {
		font-size: 27.5px;
		left: -71px;
	}
	.txt-2-wrapper br {
		display: inline;
	}
	.bg-item-3 {
		width: 291px;
		left: 874px;
	}
	.bg-item-2 {
		width: 82px;
		top: -80px;
		left: 865px;
	}
	.bg-item-1 {
		width: 81px;
		top: -67px;
		left: 75px;
	}
	.s1-title-bg {
		left: 153px;
	}
	.s1-title {
		left: 82px;
	}
	.txt-1-wrapper {
		width: 600px;
		font-size: 41px;
		left: 292px;
	}
	.btn-wrapper {
		font-size: 15px;
		width: 19.5%;
	}
	.logo-wrapper {
		font-size: 15px;
		width: 19.5%;
	}
	.banner {
		background: #072a6e url(../img/bg-1280.jpg) no-repeat center center;
	}
}
@media (max-width: 1279px) {
	.legal::before {
		transform: translate(-150%, -50%);
	}
	.lgl-g {
		font-size: 10px;
		transform: translate(-50%, 54%);
	}
	.img-2-wrapper {
		font-size: 38px;
		top: 10px;
		left: 376px;
	}
	.txt-2-wrapper {
		font-size: 20.5px;
		left: -156px;
	}
	.txt-2-wrapper br {
		display: none;
	}
	.txt-2-wrapper span {
		display: block;
	}
	.bg-item-3 {
		width: 291px;
		left: 583px;
	}
	.bg-item-2 {
		width: 61px;
		top: -93px;
		left: 590px;
	}
	.bg-item-1 {
		width: 59px;
		top: -64px;
		left: 128px;
	}
	.s1-title-bg {
		width: 171px;
		top: -43px;
		left: 175px;
	}
	.s1-title {
		width: 285px;
		top: -124px;
		left: 118px;
	}
	.txt-1-wrapper {
		width: 368px;
		font-size: 31px;
		line-height: 1;
		left: 267px;
	}
	.txt-1-wrapper span {
		display: block;
	}
	.txt-1-wrapper br {
		display: none;
	}
	.btn-wrapper {
		font-size: 11.5px;
		width: 16.5%;
	}
	.logo-wrapper {
		font-size: 11px;
		width: 19.5%;
	}
	.container {
		width: 750px;
	}
	.banner {
		background: #072a6e url(../img/bg-768.jpg) no-repeat center center;
	}
}
@media (max-width: 767px) {
	.legal::before {
		transform: translate(-50%, -230%);
		left: 50%;
	}
	.lgl-g {
		font-size: 7.8px;
		transform: translate(-29%, 50%);
	}
	.img-2-wrapper {
		font-size: 34px;
		top: 30px;
		left: 187px;
	}
	.txt-2-wrapper {
		font-size: 14.2px;
		top: -24px;
		left: -168px;
	}
	.txt-2-wrapper span {
		display: inline;
	}
	.s1-title-bg {
		width: 137px;
		top: -67px;
		left: 213px;
	}
	.s1-title {
		width: 231px;
		top: -140px;
		left: 167px;
	}
	.txt-1-wrapper {
		width: 368px;
		font-size: 25px;
		line-height: 1;
		top: 26px;
		left: 97px;
	}
	.txt-1-wrapper span,
	.txt-1-wrapper br {
		display: inline;
	}
	.bg-item-3 {
		width: 142px;
		left: 430px;
	}
	.bg-item-2 {
		width: 42px;
		top: -104px;
		left: 424px;
	}
	.bg-item-1 {
		width: 39px;
		top: -64px;
		left: 107px;
	}
	.btn-wrapper {
		font-size: 9px;
		width: 25.5%;
		height: 56%;
		left: 0;
		right: auto;
	}
	.logo-wrapper {
		font-size: 8px;
		width: 25.5%;
		height: 63%;
	}
	.container {
		width: 450px;
	}
	.btn {
		padding-bottom: 0.1em;
	}
	.banner {
		background: #072a6e url(../img/bg-468.jpg) no-repeat center center;
	}
}
@media (max-width: 467px) {
	.legal::before {
		font-size: 1.5em;
		transform: translate(-50%, -305%);
		line-height: 1.2;
		left: 50%;
	}
	.lgl-g {
		font-size: 5px;
		height: 7.8em;
		transform: translate(-16%, 50%);
		width: 27em;
		row-gap: 0.2em;
	}
	.img-2-wrapper {
		font-size: 30px;
		top: 34px;
		left: 93px;
	}
	.txt-2-wrapper {
		font-size: 11.4px;
		line-height: 1;
		top: -26px;
		left: -276px;
	}
	.txt-2-wrapper br {
		display: inline;
	}
	.bg-item-2,
	.bg-item-3 {
		display: none;
	}
	.s1-title-bg {
		width: 131px;
		top: -74px;
		left: 108px;
	}
	.s1-title {
		width: 213px;
		top: -144px;
		left: 66px;
	}
	.txt-1-wrapper {
		width: 168px;
		font-size: 20px;
		line-height: 1;
		top: 21px;
		left: 90px;
	}
	.txt-1-wrapper span {
		display: block;
	}
	.txt-1-wrapper br {
		display: none;
	}
	.bg-item-1 {
		width: 29px;
		top: -65px;
		left: 63px;
		-webkit-transform: scaleY(1.4);
		-ms-transform: scaleY(1.4);
		transform: scaleY(1.4);
	}
	.btn-wrapper {
		font-size: 6.5px;
		width: 27.5%;
		height: 52%;
	}
	.logo-wrapper {
		font-size: 5.5px;
		width: 27.5%;
		height: 68%;
	}
	.container {
		width: 250px;
	}
	.banner {
		background: #072a6e url(../img/bg-280.jpg) no-repeat center center;
	}
}