/* ---------------------------------------- marquee */

.marquee {
	position: relative; 
	width: 100%;
}
.marquee::before,
.marquee::after {
	content: "";
	display: block;
	background: url( ../images/commons/catch-copy.svg ) no-repeat left top;
	background-size: contain;
	opacity: .8;
	position: absolute;
	top: 0;
	z-index: 10;
	animation: scroll-left 30s linear infinite;
}

@media (max-width: 767px) {

	.marquee::before,
	.marquee::after {
		width: 73.875em;
		height: 2.875em;
	}
	.marquee::before {
		left: 0;
	}
	.marquee::after {
		left: 73.875em;
	}

	@keyframes scroll-left {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-73.875em);
		}
	}

}

@media (min-width: 768px) {

	.marquee::before,
	.marquee::after {
		width: 166.125em;
		height: 6.4375em;
	}
	.marquee::before {
		left: 0;
	}
	.marquee::after {
		left: 166.125em;
	}

	@keyframes scroll-left {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-166.125em);
		}
	}

}