@charset "utf-8";
.anime_obj {
	position: absolute;
	opacity: 0;
}

.wave_1 {
	top: 9.867vw;
	left: 7.733vw;
	width: 2.1vw;
	z-index: 3;
	animation: wave2 3s ease-in-out infinite forwards normal;
}

.wave_2 {
	top: 11.73vw;
	left: 10.93vw;
	width: 5.554vw;
	z-index: 3;
	animation: wave1 3s .2s ease-in-out infinite forwards normal;
}

.wave_3 {
	top: 29.86vw;
	left: -1.866vw;
	width: 5.554vw;
	z-index: 3;
	animation: wave1 3s .4s ease-in-out infinite forwards normal;
}

.wave_4 {
	top: 18.9vw;
	left: 26.13vw;
	width: 2.1vw;
	z-index: 3;
	animation: wave2 3s .6s ease-in-out infinite forwards normal;
}

.wave_5 {
	top: 6.4vw;
	left: 44.53vw;
	width: 5.554vw;
	z-index: 3;
	animation: wave1 3s .8s ease-in-out infinite forwards normal;
}

.wave_6 {
	top: 9.86vw;
	left: 44vw;
	width: 2.1vw;
	z-index: 3;
	animation: wave2 3s .4s ease-in-out infinite forwards normal;
}

.wave_7 {
	top: 3.2vw;
	left: 58.6667vw;
	width: 2.1vw;
	z-index: 3;
	animation: wave2 3s .2s ease-in-out infinite forwards normal;
}

.cloud_1 {
	top: 7.73vw;
	left: -7.73vw;
	width: 19.2vw;
	z-index: 4;
	animation: cloud1 4s linear forwards infinite normal;
}

.cloud_2 {
	top: 4.533vw;
	left: 18.13vw;
	width: 21.792vw;
	z-index: 4;
	animation: cloud1 4s .3s linear forwards infinite normal;
}

.cloud_3 {
	bottom: 0;
	left: -9vw;
	width: 60vw;
	z-index: 4;
	animation: cloud1 4s linear forwards infinite normal;
}

.cloud_4 {
	top: -5vw;
	right: -10vw;
	width: 45vw;
	z-index: 4;
	animation: cloud2 4s 2.5s linear forwards infinite normal;
}

.cloud_5 {
	bottom: -2vw;
	right: 7.7vw;
	width: 31.4vw;
	z-index: 4;
	animation: cloud1 4s 5s linear forwards infinite normal;
}

.cloud_6 {
	display: none;
	animation: cloud1 4s 1.5s linear forwards infinite normal;
}

.wave_1,
.wave_2,
.wave_3,
.wave_4,
.wave_5,
.wave_6,
.wave_7 {
	display: none;
}

@keyframes wave1 {
	0% {
		transform: translateX(0);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 0;
	}
	100% {
		transform: translateX(15px);
	}

}

@keyframes wave2 {
	0% {
		transform: translateX(0);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 0;
	}
	100% {
		transform: translateX(10px);
	}

}

@keyframes cloud1 {
	0% {
		opacity: 0;
		transform: translate(0, 0);
	}
	30% {
		opacity: 1;
	}

	70% {
		opacity: 1;
	}

	/* 75% {
		opacity: 1;
	} */

	100% {
		opacity: 0;
		transform: translate(35px, 40px);
	}
}

@keyframes cloud2 {
	0% {
		opacity: 0;
		transform: translate(-35px, -40px);
	}
	30% {
		opacity: 1;
	}
	70% {
		opacity: 1;
	}

	/* 50% {
		opacity: 1;
	} */

	100% {
		opacity: 0;
		transform: translate(0, 0);
	}
}

@media screen and (min-width: 768px) {

	.wave_1 {
		top: 12.9%;
		left: 22%;
		width: 1.38%;
		/* width: 3.54%; */
	}

	.wave_2 {
		width: 3.54%;
		left: 15.3%;
		top: 32.6%;
	}

	.wave_3 {
		width: 3.54%;
		left: 23.9%;
		top: 15.1%;
	}

	.wave_4 {
		width: 1.38%;
		left: 33.819%;
		top: 24.5%;
	}

	.wave_5 {
		width: 3.54%;
		left: 46.1%;
		top: 8.5%;
	}

	.wave_6 {
		width: 1.38%;
		left: 46.1%;
		top: 13.1%;
	}

	.wave_7 {
		width: 1.38%;
		left: 55.8%;
		top: 4.27%;
	}

	.cloud_1 {
		left: 3.8%;
		top: 19.1%;
		width: 17.8%;
	}

	.cloud_2 {
		left: 10.9%;
		top: -1.8%;
		width: 21.52%;
	}

	.cloud_3 {
		left: -6%;
		width: 36%;
	}

	.cloud_4 {
		top: -3%;
		right: -6%;
		width: 25%;
	}

	.cloud_5 {
		right: -1.25%;
		bottom: 26%;
		width: 23%;
	}

	.cloud_6 {
		display: block;
		bottom: -11%;
		right: -8.8%;
		width: 35%;
	}
}