@charset "UTF-8";

.MainBox .wrapper-1 {
    width: 1000px;
    height: 220px;
    position: relative;
    margin-top: 0px;
    margin-right: auto;
    overflow: hidden;
}
.MainBox .caption300 h5 {
}
.caption300 h5 img {
    display: inline-block;
}
.wrapper-1 img {
    top:0px;
	left:0px;
	position: absolute;
    animation: showMe 4.2s linear infinite 0s forwards;
    animation-play-state: paused;

}

.wrapper-1:hover img{
    animation-play-state: running;
}
@keyframes showMe {
	0%{visibility: visible; z-index: 100}
	12.5% {visibility: visible; z-index: 100;}
	25% {visibility: hidden; z-index: 0;}
	100% {visibility: hidden;z-index: 0;}
}
.wrapper-1 img:nth-child(1){z-index: 8;}
.wrapper-1 img:nth-child(2){animation-delay: 0.8s; z-index: 7;}
.wrapper-1 img:nth-child(3){animation-delay: 1.6s; z-index: 6;}
.wrapper-1 img:nth-child(4){animation-delay: 2.0s; z-index: 5;}
.wrapper-1 img:nth-child(5){animation-delay: 3.0s; z-index: 4;}
.wrapper-1 img:nth-child(6){animation-delay: 3.8s; z-index: 3;}
.wrapper-1 img:nth-child(7){animation-delay: 4.2s; z-index: 2;}

.MainBox .wrapper-2 {
    width: 394px;
    height: 320px;
    position: relative;
    margin-top: 0px;
    margin-right: auto;
    overflow: hidden;
    display: inline-block;
}
.wrapper-2 img {
    top:0px;
	left:0px;
	position: absolute;
    animation: showMe 4.2s linear infinite 0s forwards;
    animation-play-state: paused;

}

.wrapper-2:hover img{
    animation-play-state: running;
}
@keyframes showMe {
	0%{visibility: visible; z-index: 100}
	12.5% {visibility: visible; z-index: 100;}
	25% {visibility: hidden; z-index: 0;}
	100% {visibility: hidden;z-index: 0;}
}
.wrapper-2 img:nth-child(1){z-index: 8;}
.wrapper-2 img:nth-child(2){animation-delay: 0.8s; z-index: 7;}
.wrapper-2 img:nth-child(3){animation-delay: 1.6s; z-index: 6;}
.wrapper-2 img:nth-child(4){animation-delay: 2.0s; z-index: 5;}
.wrapper-2 img:nth-child(5){animation-delay: 3.0s; z-index: 4;}
.wrapper-2 img:nth-child(6){animation-delay: 3.8s; z-index: 3;}
.wrapper-2 img:nth-child(7){animation-delay: 4.2s; z-index: 2;}

.MainBox .wrapper-3 {
    width: 300px;
    height: 200px;
    position: relative;
    margin-top: 0px;
    margin-right: auto;
    overflow: hidden;
    display: inline-block;
}
.wrapper-3 img {
    top:0px;
	left:0px;
	position: absolute;
    animation: showMe 4.2s linear infinite 0s forwards;
    animation-play-state: paused;

}

.wrapper-3:hover img{
    animation-play-state: running;
}
@keyframes showMe {
	0%{visibility: visible; z-index: 100}
	12.5% {visibility: visible; z-index: 100;}
	25% {visibility: hidden; z-index: 0;}
	100% {visibility: hidden;z-index: 0;}
}
.wrapper-3 img:nth-child(1){z-index: 8;}
.wrapper-3 img:nth-child(2){animation-delay: 0.8s; z-index: 7;}
.wrapper-3 img:nth-child(3){animation-delay: 1.6s; z-index: 6;}
.wrapper-3 img:nth-child(4){animation-delay: 2.0s; z-index: 5;}
.wrapper-3 img:nth-child(5){animation-delay: 3.0s; z-index: 4;}
.wrapper-3 img:nth-child(6){animation-delay: 3.8s; z-index: 3;}
.wrapper-3 img:nth-child(7){animation-delay: 4.2s; z-index: 2;}