.SlideBanners {
	overflow: hidden;
}

.SlideBanners .contents {
	overflow: visible;
	margin: 0 auto;
	white-space: nowrap;
	line-height: 0;
	transition: all 400ms ease;
	animation: fadeInSlideBanner;
	animation-duration: 400ms;
	animation-delay: 1s;
	animation-fill-mode: both;
}

.SlideBanners[data-index="1"] .contents {
	transform: translateX(-100%);
}
.SlideBanners[data-index="2"] .contents {
	transform: translateX(-200%);
}
.SlideBanners[data-index="3"] .contents {
	transform: translateX(-300%);
}
.SlideBanners[data-index="4"] .contents {
	transform: translateX(-400%);
}
.SlideBanners[data-index="5"] .contents {
	transform: translateX(-500%);
}
.SlideBanners[data-index="6"] .contents {
	transform: translateX(-600%);
}
.SlideBanners[data-index="7"] .contents {
	transform: translateX(-700%);
}
.SlideBanners[data-index="8"] .contents {
	transform: translateX(-800%);
}
.SlideBanners[data-index="9"] .contents {
	transform: translateX(-900%);
}
.SlideBanners[data-index="10"] .contents {
	transform: translateX(-1000%);
}
.SlideBanners[data-index="11"] .contents {
	transform: translateX(-1100%);
}
.SlideBanners[data-index="12"] .contents {
	transform: translateX(-1200%);
}
.SlideBanners[data-index="13"] .contents {
	transform: translateX(-1300%);
}
.SlideBanners[data-index="14"] .contents {
	transform: translateX(-1400%);
}
.SlideBanners[data-index="15"] .contents {
	transform: translateX(-1500%);
}
.SlideBanners[data-index="16"] .contents {
	transform: translateX(-1600%);
}
.SlideBanners[data-index="17"] .contents {
	transform: translateX(-1700%);
}
.SlideBanners[data-index="18"] .contents {
	transform: translateX(-1800%);
}
.SlideBanners[data-index="19"] .contents {
	transform: translateX(-1900%);
}
.SlideBanners[data-index="20"] .contents {
	transform: translateX(-2000%);
}
.SlideBanners[data-index="21"] .contents {
	transform: translateX(-2100%);
}
.SlideBanners[data-index="22"] .contents {
	transform: translateX(-2200%);
}
.SlideBanners[data-index="23"] .contents {
	transform: translateX(-2300%);
}
.SlideBanners[data-index="24"] .contents {
	transform: translateX(-2400%);
}
.SlideBanners[data-index="25"] .contents {
	transform: translateX(-2500%);
}
.SlideBanners[data-index="26"] .contents {
	transform: translateX(-2600%);
}
.SlideBanners[data-index="27"] .contents {
	transform: translateX(-2700%);
}
.SlideBanners[data-index="28"] .contents {
	transform: translateX(-2800%);
}
.SlideBanners[data-index="29"] .contents {
	transform: translateX(-2900%);
}
.SlideBanners[data-index="30"] .contents {
	transform: translateX(-3000%);
}

@keyframes fadeInSlideBanner {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.SlideBanners .contents > div {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	width: 100%;
	height: 100%;
	transition: all 400ms ease;
	background-color: black;
	text-align: left;
}
.SlideBanners .contents > div:not(.active) img {
	opacity: 0.6;
	filter: blur(2px);
}

.SlideBanners .contents > div img {
	display: inline-block;
	max-width: none;
	position: relative;
	left: 50%;
	transform: translateX(-50%) scale(1.01);
}

@media all and (max-width: 567px) {
	.SlideBanners {
		display: none;
	}
	.SlideBanners .contents {
		width: 100vw;
		height: 34rem;
	}
}

@media all and (min-width: 568px) {
	.SlideBanners {
		font-size: 1rem;
	}
	.SlideBanners .contents {
		max-width: 100%;
		width: 65em;
		height: 33em;
	}
}