@charset "UTF-8";
/* Ding How Slideshow CSS Document */

.slideshow_container {
	max-width: 1200px;
	width: 100%;
	aspect-ratio: 4 / 1;
	overflow: hidden;
	position: relative;
}

.placeholder {
	height: 100%;
	width: 100%;
	visibility: hidden;
}
.layer_1, .layer_2, .layer_3, .layer_4, .layer_5 {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-repeat: no-repeat;
		background-size: contain;
	}

.layer_1 {
	background-image: url("../images/slideshow/logo_slide.jpg");
	animation: slide1 20s infinite;
}
.layer_2 {
	background-image: url("../images/slideshow/silde_2.jpg");
	animation: slide2 20s infinite;
}
.layer_3 {
	background-image: url("../images/slideshow/chinese.jpg");
	animation: slide3 20s infinite;
}
.layer_4 {
	background-image: url("../images/slideshow/japanese.jpg");
	animation: slide4 20s infinite;
}
.layer_5 {
	background-image: url("../images/slideshow/mongolian.jpg");
	animation: slide5 20s infinite;
}


@keyframes slide1 {
	0% {opacity: 1;}
	30% {opacity: 1;}
	40% {opacity: 0;}
	85% {opacity: 0;}
	90% {opacity: 1;}
}

@keyframes slide2 {
	0% {opacity: 0;}
	15% {opacity: 1;}
	45% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes slide3 {
	0% {opacity: 0; transform: translateX(100%);}
	40% {opacity: 1; transform: translateX(0%);}
	45% {transform: translateX(0%);}  
	55% {transform: translateX(-100%);}
	100% {transform: translateX(-100%);}
}

@keyframes slide4 {
	0% {transform: translateX(100%);}
	45% {transform: translateX(100%);}
	55% {transform: translateX(0%);}
	70% {transform: translateX(0%);}
	80% {transform: translateX(-100%);}
	100% {transform: translateX(-100%);}
}
@keyframes slide5 {
	0% {transform: translateX(100%);}
	70% {transform: translateX(100%);}
	80% {transform: translateX(0%);}
	95% {transform: translateX(0%); opacity: 1;}
	100% {transform: translateX(0%); opacity: 0;}
}