.fixed-banner-container {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 100%;
background-color: #f8f9fa;
background: #f8f9fa;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
border-radius: 0;
overflow: hidden;
z-index: 999999;
transition: box-shadow 0.3s ease, background-color 0.3s ease; } @media (max-width: 768px) {
.fixed-banner-container { }
} @media (max-width: 768px) {
.fixed-banner-container {
width: 100%;
max-width: none;
border-radius: 0;
left: 0;
transform: none;
}
} @media (min-width: 769px) {
.fixed-banner-container {
width: 100%;
max-width: 100%;
left: 0;
transform: none;
border-radius: 0;
}
} .banner-slides {
position: relative;
width: 100%;
overflow: hidden;
background: transparent; } .banner-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100% !important;
min-height: 100% !important;
transform: translateX(100%);
transition: transform 0.6s linear;
opacity: 1;
z-index: 0;
}
.banner-slide.active {
transform: translateX(0);
opacity: 1;
z-index: 2;
}
.banner-slide.prev {
transform: translateX(-100%);
opacity: 1;
z-index: 1;
}
.banner-slide img {
width: 100%;
height: 100% !important;
min-height: 100% !important;
object-fit: cover;
display: block;
} .banner-image-mobile {
display: block;
}
.banner-image-pc {
display: none;
} @media (min-width: 769px) {
.banner-image-mobile {
display: none;
}
.banner-image-pc {
display: block;
}
}
.banner-slide a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
position: relative;
} .banner-timer {
position: absolute;
top: 8px;
right: 8px;
background: rgba(0,0,0,0.7);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: bold;
} .banner-countdown {
position: absolute;
top: 4px;
right: 6px;
background: rgba(0,0,0,0.55);
color: #fff;
padding: 1px 5px;
border-radius: 3px;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
@media (max-width: 768px) {
.banner-timer {
top: 4px;
right: 4px;
padding: 2px 6px;
font-size: 10px;
}
} .fixed-banner-container.hidden {
transform: translateY(100%);
opacity: 0;
visibility: hidden;
} .banner-slider {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
background-color: #f8f9fa;
background: #f8f9fa;
}
.banner-slider .banner-slides {
height: auto;
min-height: 200px;
background: transparent;
}
@media (max-width: 768px) {
.banner-slider .banner-slides {
min-height: 150px;
}
}
.banner-slider .banner-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateX(100%);
transition: transform 0.6s linear;
opacity: 1;
z-index: 0;
}
.banner-slider .banner-slide.active {
transform: translateX(0);
opacity: 1;
z-index: 2;
}
.banner-slider .banner-slide.prev {
transform: translateX(-100%);
opacity: 1;
z-index: 1;
}
.banner-slider .banner-slide img {
width: 100%;
height: auto;
min-height: 200px;
object-fit: cover;
}
@media (max-width: 768px) {
.banner-slider .banner-slide img {
min-height: 150px;
}
} .banner-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.7);
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
opacity: 0;
visibility: hidden;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
font-weight: bold;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.banner-nav:hover,
.banner-nav:focus {
background: rgba(0,0,0,0.9);
transform: translateY(-50%) scale(1.1);
outline: none;
}
.banner-nav:active {
transform: translateY(-50%) scale(0.95);
}
.banner-prev {
left: 10px;
}
.banner-next {
right: 10px;
} .fixed-banner-container:hover .banner-nav {
opacity: 1;
visibility: visible;
pointer-events: auto;
} .banner-slider:hover .banner-nav {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media (max-width: 768px) {
.banner-nav {
width: 36px;
height: 36px;
font-size: 16px;
}
.banner-prev {
left: 8px;
}
.banner-next {
right: 8px;
} .fixed-banner-container.touched .banner-nav,
.banner-slider.touched .banner-nav {
opacity: 1;
visibility: visible;
pointer-events: auto;
} @media (max-width: 768px) {
.banner-nav {
background: rgba(0,0,0,0.8);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
}
} @media screen and (max-width: 480px) {
.fixed-banner-container {
display: block !important;
visibility: visible !important;
}
} @keyframes slideInFromRight {
from {
transform: translateX(-50%) translateX(100%);
opacity: 0;
}
to {
transform: translateX(-50%) translateX(0);
opacity: 1;
}
}
@media (max-width: 768px) {
@keyframes slideInFromRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
}
.fixed-banner-container {
animation: none !important;
} .fixed-banner-container * {
box-sizing: border-box;
}
.fixed-banner-container .banner-slides,
.fixed-banner-container .banner-slide,
.fixed-banner-container .banner-slide img {
height: inherit !important;
min-height: inherit !important;
} .fixed-banner-container {
height: var(--banner-height, 80px) !important;
min-height: var(--banner-height, 80px) !important;
max-height: var(--banner-height, 80px) !important;
}
.fixed-banner-container .banner-slides {
height: var(--banner-height, 80px) !important;
min-height: var(--banner-height, 80px) !important;
max-height: var(--banner-height, 80px) !important;
}
@media (max-width: 768px) {
.fixed-banner-container {
height: var(--banner-mobile-height, 60px) !important;
min-height: var(--banner-mobile-height, 60px) !important;
max-height: var(--banner-mobile-height, 60px) !important;
}
.fixed-banner-container .banner-slides {
height: var(--banner-mobile-height, 60px) !important;
min-height: var(--banner-mobile-height, 60px) !important;
max-height: var(--banner-mobile-height, 60px) !important;
}
} .fixed-banner-container.loading { }