.anim {
	width: 100%;
	height: 80%;
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	pointer-events: none;
	-webkit-mask: linear-gradient(
		to bottom,
		rgba(0, 0, 0) 0%,
		rgb(0, 0, 0) calc(100% - 100px),
		rgba(0, 0, 0, 0) 100%
	);
}
@media (max-width: 1024px) {
	.anim {
		display: none;
	}
}
.anim__smoke {
	position: absolute;
}
.anim__smoke.smoke_1 {
	background: url("../img/animation/smoke_1.png");
	background-position: 0px 50%;
	width: 100%;
	height: 671px;
	top: -300px;
	-webkit-animation: smoke-1 14s linear infinite;
	animation: smoke-1 14s linear infinite;
	opacity: 1;
}
@-webkit-keyframes smoke-1 {
	from {
		background-position: 0px 50%;
	}
	to {
		background-position: 1166px 50%;
	}
}
@keyframes smoke-1 {
	from {
		background-position: 0px 50%;
	}
	to {
		background-position: 1166px 50%;
	}
}
.anim__smoke.smoke_2 {
	background: url("../img/animation/smoke_2.png");
	background-position: 0px 50%;
	width: 100%;
	height: 558px;
	left: 0px;
	top: -300px;
	-webkit-animation: smoke-2 10s linear infinite;
	animation: smoke-2 10s linear infinite;
	opacity: 1;
}
@-webkit-keyframes smoke-2 {
	from {
		background-position: 0px 50%;
	}
	to {
		background-position: 914px 50%;
	}
}
@keyframes smoke-2 {
	from {
		background-position: 0px 50%;
	}
	to {
		background-position: 914px 50%;
	}
}
.anim__smoke.smoke_3 {
	background: url("../img/animation/smoke_1.png");
	background-position: 0px 50%;
	width: 100%;
	height: 671px;
	bottom: -100px;
	-webkit-animation: smoke-3 18s linear infinite;
	animation: smoke-3 18s linear infinite;
	opacity: 1;
	z-index: 1;
}
@-webkit-keyframes smoke-3 {
	from {
		background-position: 0px 50%;
	}
	to {
		background-position: 1166px 50%;
	}
}
@keyframes smoke-3 {
	from {
		background-position: 0px 50%;
	}
	to {
		background-position: 1166px 50%;
	}
}
.anim__smoke.smoke_4 {
	background: url("../img/animation/smoke_2.png");
	background-position: 0px 50%;
	width: 100%;
	height: 558px;
	left: 0px;
	bottom: -200px;
	-webkit-animation: smoke-4 14s linear infinite;
	animation: smoke-4 14s linear infinite;
	opacity: 1;
	z-index: 1;
}
@-webkit-keyframes smoke-4 {
	from {
		background-position: 0px 50%;
	}
	to {
		background-position: 914px 50%;
	}
}
@keyframes smoke-4 {
	from {
		background-position: 0px 50%;
	}
	to {
		background-position: 914px 50%;
	}
}
.anim__sparks.right {
	top: 400px;
	right: -100px;
	-webkit-transform: rotate(135deg) scale(-1.8, -1.8);
	transform: rotate(135deg) scale(-1.8, -1.8);
}
.anim__sparks.left {
	top: 400px;
	left: -100px;
	-webkit-transform: rotate(-135deg) scale(1.8, -1.8);
	transform: rotate(-135deg) scale(1.8, -1.8);
}
.anim__sparks {
	position: absolute;
	z-index: 6;
}
.anim__sparks div {
	position: absolute;
}
.anim__sparks-spark-1 {
	background: url("../img/animation/spark_1.png") no-repeat;
	width: 764px;
	height: 313px;
	right: 0;
	bottom: -120px;
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
	-webkit-animation: spark-1 4s linear infinite;
	animation: spark-1 4s linear infinite;
}
@-webkit-keyframes spark-1 {
	0% {
		bottom: -320px;
		-webkit-transform: scale(0.6);
		transform: scale(0.6);
		opacity: 1;
	}
	25% {
		bottom: -240px;
		-webkit-transform: scale(0.7);
		transform: scale(0.7);
		opacity: 1;
	}
	50% {
		bottom: -160px;
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
		opacity: 1;
	}
	75% {
		bottom: -80px;
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
		opacity: 0.5;
	}
	to {
		bottom: 0;
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0;
	}
}
@keyframes spark-1 {
	0% {
		bottom: -320px;
		-webkit-transform: scale(0.6);
		transform: scale(0.6);
		opacity: 1;
	}
	25% {
		bottom: -240px;
		-webkit-transform: scale(0.7);
		transform: scale(0.7);
		opacity: 1;
	}
	50% {
		bottom: -160px;
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
		opacity: 1;
	}
	75% {
		bottom: -80px;
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
		opacity: 0.5;
	}
	to {
		bottom: 0;
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0;
	}
}
.anim__sparks-spark-2 {
	background: url("../img/animation/spark_2.png") no-repeat;
	width: 149px;
	height: 335px;
	right: 230px;
	bottom: -320px;
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
	-webkit-animation: spark-1 4s linear infinite;
	animation: spark-1 4s linear infinite;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}
.anim__sparks-spark-3 {
	background: url("../img/animation/spark_3.png") no-repeat;
	width: 128px;
	height: 165px;
	right: 280px;
	bottom: -140px;
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
	-webkit-animation: spark-3 4s linear infinite;
	animation: spark-3 4s linear infinite;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}
@-webkit-keyframes spark-3 {
	0% {
		bottom: -140px;
		-webkit-transform: scale(0.6);
		transform: scale(0.6);
		opacity: 1;
	}
	25% {
		bottom: -80px;
		-webkit-transform: scale(0.7);
		transform: scale(0.7);
		opacity: 1;
	}
	50% {
		bottom: -20px;
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
		opacity: 1;
	}
	75% {
		bottom: 40px;
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
		opacity: 0.5;
	}
	to {
		bottom: 100px;
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0;
	}
}
@keyframes spark-3 {
	0% {
		bottom: -140px;
		-webkit-transform: scale(0.6);
		transform: scale(0.6);
		opacity: 1;
	}
	25% {
		bottom: -80px;
		-webkit-transform: scale(0.7);
		transform: scale(0.7);
		opacity: 1;
	}
	50% {
		bottom: -20px;
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
		opacity: 1;
	}
	75% {
		bottom: 40px;
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
		opacity: 0.5;
	}
	to {
		bottom: 100px;
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0;
	}
}
.anim__sparks-spark-4 {
	background: url("../img/animation/spark_4.png") no-repeat;
	width: 794px;
	height: 176px;
	right: 0;
	bottom: -180px;
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
	-webkit-animation: spark-4 4s linear infinite;
	animation: spark-4 4s linear infinite;
}
@-webkit-keyframes spark-4 {
	0% {
		bottom: -180px;
		-webkit-transform: scale(0.6);
		transform: scale(0.6);
		opacity: 1;
	}
	25% {
		bottom: -120px;
		-webkit-transform: scale(0.7);
		transform: scale(0.7);
		opacity: 1;
	}
	50% {
		bottom: -60px;
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
		opacity: 1;
	}
	75% {
		bottom: 0;
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
		opacity: 0.5;
	}
	to {
		bottom: 60px;
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0;
	}
}
@keyframes spark-4 {
	0% {
		bottom: -180px;
		-webkit-transform: scale(0.6);
		transform: scale(0.6);
		opacity: 1;
	}
	25% {
		bottom: -120px;
		-webkit-transform: scale(0.7);
		transform: scale(0.7);
		opacity: 1;
	}
	50% {
		bottom: -60px;
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
		opacity: 1;
	}
	75% {
		bottom: 0;
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
		opacity: 0.5;
	}
	to {
		bottom: 60px;
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0;
	}
}