/* ------------common------------ */
 .container {
width: 100%;
height: auto;
background-color: #fff;
}
.slider-area {
position: relative;
width: 100%;
height: 100%;
}
.slider-area div img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ------------slider-item------------ */
.slider-item4-1 {
position: absolute;
inset: 0;
opacity: 0;
z-index: 0;
animation: slideShow4-1 20s linear infinite 0s;
}
.slider-item4-2 {
position: absolute;
inset: 0;
opacity: 0;
z-index: 0;
animation: slideShow4-2 20s linear infinite 0s;
}
.slider-item4-3 {
position: absolute;
inset: 0;
opacity: 0;
z-index: 0;
animation: slideShow4-3 20s linear infinite 0s;
}
/* ------------slider-item(nth-child)------------ */
.slider-item4-1:nth-child(2) {
animation-delay: 5s;
}
.slider-item4-1:nth-child(3) {
animation-delay: 10s;
}
.slider-item4-1:nth-child(4) {
animation-delay: 15s;
}
.slider-item4-2:nth-child(2) {
animation-delay: 5s;
}
.slider-item4-2:nth-child(3) {
animation-delay: 10s;
}
.slider-item4-2:nth-child(4) {
animation-delay: 15s;
}
.slider-item4-3:nth-child(2) {
animation-delay: 5s;
}
.slider-item4-3:nth-child(3) {
animation-delay: 10s;
}
.slider-item4-3:nth-child(4) {
animation-delay: 15s;
}
/* ------------keyframes------------ */
@keyframes slideShow4-1 {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
5% {
opacity: 1;
}
25% {
opacity: 1;
animation-timing-function: ease-out;
}
30% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes slideShow4-2 {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
5% {
opacity: 1;
}
25% {
opacity: 1;
animation-timing-function: ease-out;
}
30% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes slideShow4-3 {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
5% {
opacity: 1;
}
25% {
opacity: 1;
animation-timing-function: ease-out;
}
30% {
opacity: 0;
}
100% {
opacity: 0;
}
}