#home-banner {
position: relative;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
} #home-banner,
#home-banner .banner-slide,
#home-banner img {
max-width: 100%;
} .banner-slide {
display: none;
width: 100%;
}
.banner-slide.active {
display: block;
animation: fadeIn 0.8s ease-in-out;
} .banner-slide img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
} @keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
} .banner-prev,
.banner-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: #fff;
border: none;
padding: 10px 15px;
cursor: pointer;
font-size: 24px;
border-radius: 4px;
z-index: 10;
}
.banner-prev { left: 10px; }
.banner-next { right: 10px; }
.banner-prev:hover,
.banner-next:hover {
background: rgba(0, 0, 0, 0.8);
} .banner-dots {
text-align: center;
position: absolute;
bottom: 15px;
width: 100%;
z-index: 10;
}
.banner-dots span {
cursor: pointer;
height: 12px;
width: 12px;
margin: 0 4px;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 50%;
display: inline-block;
transition: background-color 0.3s;
}
.banner-dots span.active {
background-color: #fff;
}