.content-wrapper.homepage-box.middle-banners-wrapper {
background: #F6F2ED;
border-radius: 12px;
}
.brands-section {
max-width: 1400px;
margin: 60px auto;
padding: 0px 20px;
}
.brands-title {
text-align: center;
font-size: 32px;
font-weight: 600;
margin-bottom: 40px;
color: #333;
}
.carousel-container {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-track {
display: flex;
gap: 16px;
user-select: none;
}
.carousel-item {
flex: 0 0 auto;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
min-height: 240px;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-item:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
z-index: 2;
}
.carousel-item a {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 12px;
overflow: hidden;
}
.brand-logo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.carousel-item:hover .brand-logo {
transform: scale(1.1);
}
.carousel-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #fff;
color: #333;
border: 1px solid #e0e0e0;
font-size: 20px;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 10;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.carousel-button:hover {
background: #f5f5f5;
border-color: #ccc;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.carousel-button:active {
transform: translateY(-50%) scale(0.95);
}
.carousel-button.left {
left: 10px;
}
.carousel-button.right {
right: 10px;
}
@media (max-width: 1023px) {
.content-wrapper.homepage-box.middle-banners-wrapper {
background: #fff;
border-radius: 0;
}
.brands-section {
background: #fff;
margin: 40px auto;
padding: 0 20px;
}
}
@media (max-width: 768px) {
.brands-title {
font-size: 24px;
margin-bottom: 30px;
}
.carousel-item {
min-height: 180px;
}
.carousel-button {
width: 32px;
height: 32px;
font-size: 16px;
}
.carousel-button.left {
left: 0px;
}
.carousel-button.right {
right: 0px;
}
}
@media (max-width: 480px) {
.brands-section {
margin: 30px auto;
padding: 0 15px;
}
.brands-title {
font-size: 20px;
}
.carousel-item {
min-height: 140px;
}
.carousel-track {
gap: 12px;
}
}