@import "https://fonts.googleapis.com/css2?family=Noto+Sans:wght@800&display=swap";
*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.banner {
	margin: 0 auto;
	min-width: 280px;
	width: 100%;
	height: 90px;
	background: #007d43;
	border: 1px solid #ffdd17;
	font-family: "Noto Sans", sans-serif;
	font-weight: 800;
	color: #fff;
	font-style: normal;
	text-align: center;
	text-transform: uppercase;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.txt-wrapper,
.img-wrapper {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.txt-wrapper {
	text-transform: uppercase;
}
.img-wrapper div {
	background-size: contain !important;
}
.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: 30%;
	height: 100%;
}
.logo {
	position: relative;
	width: 260px;
	z-index: 30;
}
.btn-wrapper {
	bottom: 0;
	right: 0;
	width: 37%;
	height: 100%;
}
.btn {
	font-size: 26px;
	width: 202px;
	height: 72px;
	line-height: 1;
	background: url(../img/btn.png) no-repeat center center/contain;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden;
	position: relative;
	z-index: 10;
}
.btn br {
	display: none;
}
.btn span {
	position: relative;
}
.btn::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url(../img/btn-shadow.png) no-repeat center center/contain;
	animation: btn 5.1s infinite;
}
.img {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.container::before {
	content: "";
	position: absolute;
	width: 535px;
	height: 537px;
	top: -279px;
	left: 88px;
	background: url(../img/bg.png) no-repeat center center/contain;
}
.ball-1 {
	width: 61px;
	height: 62px;
	top: 37px;
	left: 72px;
	background: url(../img/ball-1.png) no-repeat center center/contain;
	animation: ball-1 5.1s infinite;
}
.ball-2 {
	width: 68px;
	height: 67px;
	top: 6px;
	left: 227px;
	background: url(../img/ball-2.png) no-repeat center center/contain;
	animation: ball-2 5.1s infinite;
}
.earth {
	width: 89px;
	height: 104px;
	top: 0px;
	left: 122px;
	background: url(../img/earth.png) no-repeat center center/contain;
}
.txt-1-wrapper {
	width: 600px;
	height: 100%;
	top: 6px;
	left: 327px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	z-index: 1;
}
.txt-1-percent {
	width: 193px;
	height: 75px;
	top: 11px;
	left: 415px;
	background: url(../img/percent.png) no-repeat center center/contain;
	animation: txt-1 5.1s infinite;
}
.txt-1 {
	font-size: 59px;
	line-height: 1;
	width: 300px;
	top: 20px;
	left: 622px;
	text-align: left;
	animation: txt-1 5.1s infinite;
}
.txt-1-gradient {
	background: linear-gradient(0deg, rgb(247, 203, 21) 35%, rgb(254, 177, 25) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(0, 0, 0, 0);
}
.txt-1-border {
	color: rgba(0, 0, 0, 0);
	background: linear-gradient(180deg, rgb(255, 255, 82) 0%, rgb(255, 221, 22) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(0, 0, 0, 0);
	-webkit-text-stroke: 0.05em #ffff52;
	-webkit-text-stroke-color: rgba(0, 0, 0, 0);
	color: rgba(0, 0, 0, 0);
}
.txt-1-shadow {
	-webkit-text-stroke: 0.05em #689658;
	color: #689658;
	transform: translateY(0.05em);
	text-shadow:
		0 0.05em 0.15em #00512c,
		0 0.05em 0.15em #00512c;
}
.txt-2 .txt-1-shadow {
	-webkit-text-stroke: 0.05em #689658;
	color: #689658;
	transform: translateY(0.05em);
	display: inline-block;
	text-shadow:
		0 0.05em 0.15em #00512c,
		0 0.05em 0.15em #00512c;
}
.txt-2-wrapper {
	width: 600px;
	font-size: 42px;
	height: 100%;
	top: 0;
	left: 344px;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: txt-2 5.1s infinite;
}
.txt-2 {
	font-size: inherit;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.txt-2 span {
	display: inline-block;
}
.txt-2 .second {
	font-size: 1.3em;
	letter-spacing: 0.025em;
}
@keyframes txt-1 {
	from {
		transform: translateY(-90px);
	}
	4%,
	41% {
		transform: translateY(0);
	}
	45%,
	to {
		transform: translateY(90px);
	}
}
@keyframes txt-1-280 {
	from,
	45%,
	to {
		transform: translateX(450px);
	}
	4%,
	41% {
		transform: translateX(0);
	}
}
@keyframes ball-1 {
	from,
	to {
		transform: translate(-150px, 90px);
	}
	4%,
	96% {
		transform: translate(0, 0);
	}
}
@keyframes ball-2 {
	from,
	to {
		transform: translate(150px, -90px);
	}
	4%,
	96% {
		transform: translate(0, 0);
	}
}
@keyframes ball-1-468 {
	from,
	to {
		transform: translate(-80px, 90px);
	}
	4%,
	96% {
		transform: translate(0, 0);
	}
}
@keyframes ball-2-468 {
	from,
	to {
		transform: translate(80px, -90px) rotate(32deg);
	}
	4%,
	96% {
		transform: translate(0, 0) rotate(32deg);
	}
}
@keyframes txt-2 {
	from,
	45% {
		transform: translateY(-90px);
	}
	49%,
	96% {
		transform: translateY(0);
	}
	to {
		transform: translateY(90px);
	}
}
@keyframes txt-2-280 {
	from,
	45%,
	to {
		transform: translateX(450px);
	}
	49%,
	96% {
		transform: translateX(0);
	}
}
@keyframes btn {
	from,
	66.5%,
	70.5%,
	74.5%,
	78.5%,
	to {
		opacity: 0;
	}
	68.5%,
	72.5%,
	76.5% {
		opacity: 1;
	}
}
@media (max-width: 1900px) {
	.txt-2-wrapper {
		font-size: 34px;
		top: -2px;
		left: 331px;
		line-height: 1;
	}
	.txt-2-wrapper .first {
		display: block;
	}
	.txt-1 {
		font-size: 39px;
		width: 300px;
		top: 32px;
		left: 648px;
	}
	.txt-1-percent {
		width: 159px;
		top: 10px;
		left: 479px;
	}
	.container::before {
		left: 236px;
	}
	.earth {
		left: 268px;
	}
	.ball-2 {
		left: 373px;
	}
	.ball-1 {
		left: 218px;
	}
	.btn-wrapper {
		width: 29.5%;
	}
	.logo-wrapper {
		width: 28%;
	}
	.logo {
		width: 212px;
	}
}
@media (max-width: 1279px) {
	.txt-2-wrapper {
		font-size: 23px;
		width: 312px;
		top: -1px;
		left: 326px;
		line-height: 1.1;
	}
	.txt-2-wrapper .second {
		font-size: 1.5em;
	}
	.container::before {
		width: 424px;
		top: -269px;
		left: 165px;
	}
	.txt-1 {
		font-size: 30px;
		width: 200px;
		top: 37px;
		left: 495px;
	}
	.txt-1-percent {
		width: 123px;
		top: 10px;
		left: 365px;
	}
	.earth {
		width: 71px;
		top: -2px;
		left: 214px;
	}
	.ball-2 {
		width: 54px;
		top: 8px;
		left: 297px;
	}
	.ball-1 {
		width: 48px;
		top: 31px;
		left: 173px;
	}
	.btn-wrapper {
		width: 19.5%;
	}
	.btn {
		font-size: 16px;
		width: 126px;
	}
	.logo-wrapper {
		width: 22.5%;
	}
	.logo {
		width: 127px;
	}
	.container {
		width: 750px;
	}
}
@media (max-width: 767px) {
	.txt-2-wrapper {
		font-size: 19px;
		width: 129px;
		top: 2px;
		left: 211px;
		line-height: 1;
	}
	.txt-2-wrapper .second {
		font-size: 1.3em;
		letter-spacing: 0.04em;
	}
	.container::before {
		width: 242px;
		top: -296px;
		left: 120px;
	}
	.txt-1 {
		font-size: 25px;
		width: 122px;
		top: 54px;
		left: 212px;
		text-align: center;
	}
	.txt-1-percent {
		width: 101px;
		top: -2px;
		left: 223px;
		background: url(../img/percent-468.png) no-repeat center center/contain;
	}
	.earth {
		width: 71px;
		top: -8px;
		left: 127px;
		background: url(../img/earth-468.png) no-repeat center center/contain;
	}
	.ball-2 {
		width: 31px;
		top: -3px;
		left: 184px;
		transform: rotate(32deg);
		animation-name: ball-2-468;
	}
	.ball-1 {
		width: 29px;
		top: 36px;
		left: 126px;
		animation-name: ball-1-468;
	}
	.btn-wrapper {
		width: 25.5%;
	}
	.btn {
		font-size: 14px;
		width: 104px;
	}
	.logo-wrapper {
		width: 27.5%;
	}
	.logo {
		width: 100px;
	}
	.container {
		width: 450px;
	}
}
@media (max-width: 467px) {
	.txt-2-wrapper {
		font-size: 17px;
		width: 100px;
		top: 0;
		left: 165px;
		animation-name: txt-2-280;
	}
	.container::before {
		top: -299px;
		left: 114px;
	}
	.txt-1 {
		font-size: 20.3px;
		width: 122px;
		top: 52px;
		left: 153px;
		text-align: center;
		animation-name: txt-1-280;
	}
	.txt-1-percent {
		width: 84px;
		top: -1px;
		left: 173px;
		animation-name: txt-1-280;
	}
	.earth {
		width: 58px;
		top: -7px;
		left: 104px;
	}
	.ball-2 {
		width: 26px;
		top: -14px;
		left: 142px;
		transform: rotate(32deg);
	}
	.ball-1 {
		width: 24px;
		top: 39px;
		left: 104px;
	}
	.btn-wrapper {
		width: 43.5%;
		height: 56%;
		right: auto;
		left: 0;
	}
	.btn {
		width: 98px;
	}
	.logo-wrapper {
		width: 43.5%;
		height: 56%;
	}
	.logo {
		width: 87px;
	}
	.container {
		width: 250px;
	}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.txt-1-gradient {
		color: #f8c915;
		background: none;
		text-shadow:
			0 -1px 0 #ffff52,
			0 -1px 0 #ffff52,
			0 1px 0 #ffff52,
			0 1px 0 #ffff52,
			-1px 0 0 #ffff52,
			1px 0 0 #ffff52,
			-1px 0 0 #ffff52,
			1px 0 0 #ffff52,
			-1px -1px 0 #ffff52,
			1px -1px 0 #ffff52,
			-1px 1px 0 #ffff52,
			1px 1px 0 #ffff52,
			-1px -1px 0 #ffff52,
			1px -1px 0 #ffff52,
			-1px 1px 0 #ffff52,
			1px 1px 0 #ffff52;
	}
	.txt-1-border {
		opacity: 0;
	}
	.txt-1-shadow {
		color: #689658;
		transform: translateY(0.05em);
		text-shadow:
			0 -1px 0 #689658,
			0 -1px 0 #689658,
			0 1px 0 #689658,
			0 1px 0 #689658,
			-1px 0 0 #689658,
			1px 0 0 #689658,
			-1px 0 0 #689658,
			1px 0 0 #689658,
			-1px -1px 0 #689658,
			1px -1px 0 #689658,
			-1px 1px 0 #689658,
			1px 1px 0 #689658,
			-1px -1px 0 #689658,
			1px -1px 0 #689658,
			-1px 1px 0 #689658,
			1px 1px 0 #689658,
			0 0.1em 0.15em #00512c;
	}
}