@media only screen and (max-width: 500px) { 

	.main_animation {
		position: absolute;
		top: 200px;
		left: 0;

		width: 240px;
		height: 252px;
	}

	.main_animation_img span {
		bottom: 0;

		width: 80px;
	}
}

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

	.main_animation {
		position: absolute;
		top: 200px;
		left: 0;

		width: 50%;
		height: 220px;
	}

	.main_animation_img span {
		bottom: 0;

		width: 80px;
	}
}

.main_animation {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	    -ms-flex-direction: row-reverse;
	        flex-direction: row-reverse;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	position: relative;

	width: 800px;
	height: 252px;
	margin-left: -80px;
	background-color: transparent;
	opacity: 1;
}

.main_animation_img {
	position: absolute;

	height: inherit;
	margin-right: -72px;
	-webkit-animation: scroll_img 27s linear 0s infinite;
	        animation: scroll_img 27s linear 0s infinite;
}

.main_animation_img img {
	width: 100%;
	height: 100%;

	-o-object-fit: contain;
	   object-fit: contain;
    -o-object-position: center;
       object-position: center;
}

.main_animation_img span {
	position: absolute;
	right: 40px;
	bottom: -20px;

	width: 140px;
	height: 140px;
	opacity: 0;

	-webkit-animation: scroll_span 27s linear 0s infinite;
	        animation: scroll_span 27s linear 0s infinite;
}

@-webkit-keyframes scroll_img {
	0% {
		right: 100%;

		width: 20%;
		opacity: 0;
	}

	16% {
		right: 100%;

		width: 20%;
		opacity: 0;
	}

	32% {
		right: 100%;

		width: 20%;
		opacity: 0;
	}

	42% {
		right: 80%;

		width: 20%;
		opacity: 0;
	}

	48% {
		right: 80%;

		width: 20%;
		opacity: 0;
	}

	58% {
		right: 60%;

		width: 20%;
		opacity: 0;
	}

	64% {
		right: 60%;

		width: 20%;
		opacity: 0;
	}

	74% {
		right: 40%;

		width: 20%;
		opacity: .9
	}

	80% {
		right: 40%;

		width: 20%;
		opacity: .9
	}

	90% {
		right: 0;

		width: 40%;
		opacity: 1;
	}

	96% {
		right: 0;

		width: 40%;
		opacity: 1;
	}

	100% {
		right: 0;

		width: 40%;
		opacity: 0;
	}
}

@keyframes scroll_img {
	0% {
		right: 100%;

		width: 20%;
		opacity: 0;
	}

	16% {
		right: 100%;

		width: 20%;
		opacity: 0;
	}

	32% {
		right: 100%;

		width: 20%;
		opacity: 0;
	}

	42% {
		right: 80%;

		width: 20%;
		opacity: 0;
	}

	48% {
		right: 80%;

		width: 20%;
		opacity: 0;
	}

	58% {
		right: 60%;

		width: 20%;
		opacity: 0;
	}

	64% {
		right: 60%;

		width: 20%;
		opacity: 0;
	}

	74% {
		right: 40%;

		width: 20%;
		opacity: .9
	}

	80% {
		right: 40%;

		width: 20%;
		opacity: .9
	}

	90% {
		right: 0;

		width: 40%;
		opacity: 1;
	}

	96% {
		right: 0;

		width: 40%;
		opacity: 1;
	}

	100% {
		right: 0;

		width: 40%;
		opacity: 0;
	}
}

@-webkit-keyframes scroll_span {
	89% {
		opacity: 0;
	}

	90% {
		opacity: 1;
	}

	96% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes scroll_span {
	89% {
		opacity: 0;
	}

	90% {
		opacity: 1;
	}

	96% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.main_animation_img:nth-child(1),
.main_animation_img:nth-child(1) span {
	-webkit-animation-delay: -24s;
	        animation-delay: -24s
}

.main_animation_img:nth-child(2),
.main_animation_img:nth-child(2) span {
	-webkit-animation-delay: -21s;
	        animation-delay: -21s
}

.main_animation_img:nth-child(3),
.main_animation_img:nth-child(3) span {
	-webkit-animation-delay: -18s;
	        animation-delay: -18s
}

.main_animation_img:nth-child(4),
.main_animation_img:nth-child(4) span {
	-webkit-animation-delay: -15s;
	        animation-delay: -15s
}

.main_animation_img:nth-child(5),
.main_animation_img:nth-child(5) span {
	-webkit-animation-delay: -12s;
	        animation-delay: -12s
}

.main_animation_img:nth-child(6),
.main_animation_img:nth-child(6) span {
	-webkit-animation-delay: -9s;
	        animation-delay: -9s
}
.main_animation_img:nth-child(7),
.main_animation_img:nth-child(7) span {
	-webkit-animation-delay: -6s;
	        animation-delay: -6s
}
.main_animation_img:nth-child(8),
.main_animation_img:nth-child(8) span {
	-webkit-animation-delay: -3s;
	        animation-delay: -3s
}
.main_animation_img:nth-child(9),
.main_animation_img:nth-child(9) span {
	-webkit-animation-delay: 0s;
	        animation-delay: 0s
}

@media only screen and (max-width: 1199px) {

	.main_animation {
		width: 540px;
	}

	.main_animation_img span {
		right: 20px;
		bottom: 0;

		width: 100px;
	}

}

@media only screen and (max-width: 767px) {

	.main_animation {
		position: absolute;
		top: 200px;
		left: 0;

		width: 340px;
		height: 252px;
	}

	.main_animation_img span {
		right: 20px;
		bottom: -50px;

		width: 80px;
	}

	@-webkit-keyframes scroll_img {
		0% {
			opacity: 0;
		}

		85% {
			right: 0;

			width: 100%;
			opacity: 0;
		}


		90% {
			right: 0;

			width: 100%;
			opacity: 1;
		}

		96% {
			right: 0;

			width: 100%;
			opacity: 1;
		}

		100% {
			right: 0;

			width: 100%;
			opacity: 0;
		}
	}

	@keyframes scroll_img {
		0% {
			opacity: 0;
		}

		85% {
			right: 0;

			width: 100%;
			opacity: 0;
		}


		90% {
			right: 0;

			width: 100%;
			opacity: 1;
		}

		96% {
			right: 0;

			width: 100%;
			opacity: 1;
		}

		100% {
			right: 0;

			width: 100%;
			opacity: 0;
		}
	}

	@-webkit-keyframes scroll_span {
		85% {
			opacity: 0;
		}

		90% {
			opacity: 1;
		}

		96% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes scroll_span {
		85% {
			opacity: 0;
		}

		90% {
			opacity: 1;
		}

		96% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}
}

@media only screen and (max-width: 500px) { 

	.main_animation {
		position: absolute;
		top: 200px;
		left: 0;

		width: 240px;
		height: 252px;
	}

	.main_animation_img span {
		bottom: 0;

		width: 80px;
	}
}