.global-slider-p__box {
min-height: calc(100vh - 4rem);
}
.swiper-HB-slider-popup {
position: relative;
width: 100%;
min-height: calc(100vh - 4rem);
height: auto;
}
.swiper-HB-slider-popup .swiper-wrapper {
display: flex;
align-items: stretch;
height: 100%;
}
.swiper-HB-slider-popup .swiper-slide {
height: auto;
min-height: calc(100vh - 6rem);
user-select: text;
display: flex;
flex-direction: column;
} .swiper-HB-slider-popup .HB-slider-popup__wrap {
display: flex;
flex-direction: column;
height: 100%;
min-height: calc(100vh - 6rem);
position: relative;
} .swiper-HB-slider-popup .HB-slider-popup__box,
.swiper-HB-slider-popup .GP-status__imgbox {
flex: 1;
display: none;
align-items: center;
justify-content: center;
min-height: 300px;
} .swiper-HB-slider-popup .HB-slider-popup__box.active,
.swiper-HB-slider-popup .GP-status__imgbox.active {
display: flex;
}
.swiper-HB-slider-popup .GP-status__img {
width: 100%;
max-height: calc(100vh - 250px);
object-fit: contain;
object-position: center;
display: block;
} .swiper-HB-slider-popup .HB-slider-popup__img-lines {
position: absolute;
display: flex;
gap: 15px;
top: 20px;
width: 400px;
max-width: 90%;
left: 50%;
transform: translateX(-50%);
z-index: 100;
}
.swiper-HB-slider-popup .HB-slider-popup__img-line,
.swiper-HB-slider-popup .progress-strip__item {
background-color: rgba(255, 255, 255, 0.5);
height: 3px;
flex: 1;
position: relative;
border-radius: 2px;
}
.swiper-HB-slider-popup .HB-slider-popup__img-line span,
.swiper-HB-slider-popup .progress-strip__item span {
display: block;
position: absolute;
height: 100%;
left: 0;
width: 0;
background-color: #fff;
border-radius: 2px;
transition: none;
} .swiper-HB-slider-popup .HB-slider-popup__img-line.active span,
.swiper-HB-slider-popup .progress-strip__item.active span {
width: 100%;
transition: width 5s linear;
} .swiper-HB-slider-popup .HB-slider-popup__img-line.completed span,
.swiper-HB-slider-popup .progress-strip__item.completed span {
width: 100%;
transition: none;
background-color: rgba(255, 255, 255, 0.5);
height: 3px;
flex: 1;
position: relative;
border-radius: 2px;
}
.swiper-HB-slider-popup .HB-slider-popup__img-line span {
display: block;
position: absolute;
height: 100%;
left: 0;
width: 0;
background-color: #fff;
border-radius: 2px;
} .swiper-HB-slider-popup .swiper-button-next,
.swiper-HB-slider-popup .swiper-button-prev {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
color: #3369f6;
width: 40px;
height: 58px;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: transparent;
}
.swiper-HB-slider-popup .swiper-button-prev {
left: 10px;
}
.swiper-HB-slider-popup .swiper-button-next {
right: 10px;
}
.swiper-HB-slider-popup .swiper-button-next::after,
.swiper-HB-slider-popup .swiper-button-prev::after {
display: none;
}
.swiper-HB-slider-popup .swiper-button-next img,
.swiper-HB-slider-popup .swiper-button-prev img {
width: 40px;
height: auto;
filter: brightness(0) invert(1);
} .swiper-HB-slider-popup .swiper-pagination {
display: none;
} .swiper-status-slider-popup {
position: relative;
width: 100%;
overflow: hidden;
}
.swiper-status-slider-popup .swiper-wrapper {
display: flex;
}
.swiper-status-slider-popup .swiper-slide {
height: auto;
} .swiper-status-slider-popup .swiper-button-next,
.swiper-status-slider-popup .swiper-button-prev {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
width: 40px;
height: 58px;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: transparent;
}
.swiper-status-slider-popup .swiper-button-prev {
left: 0;
}
.swiper-status-slider-popup .swiper-button-next {
right: 0;
}
.swiper-status-slider-popup .swiper-button-next::after,
.swiper-status-slider-popup .swiper-button-prev::after {
display: none;
}
.swiper-status-slider-popup .swiper-button-next img,
.swiper-status-slider-popup .swiper-button-prev img {
width: 40px;
height: auto;
filter: brightness(0) invert(1);
} .swiper-status-slider-popup .swiper-pagination {
position: relative;
display: flex;
gap: 20px;
padding-top: 16px;
bottom: auto;
left: auto;
width: 100%;
justify-content: center;
}
.swiper-status-slider-popup .swiper-pagination-bullet {
background-color: #646464;
width: 100%;
max-width: 60px;
height: 3px;
border-radius: 0;
opacity: 1;
position: relative;
margin: 0 !important;
}
.swiper-status-slider-popup .swiper-pagination-bullet span {
display: block;
background-color: #fff;
width: 0;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.swiper-status-slider-popup .swiper-pagination-bullet-active {
background-color: #646464;
}
.swiper-status-slider-popup .swiper-pagination-bullet.line-active span {
width: 100%;
transition: width 3s linear;
} .swiper-status-slider-popup .status-slider-popup__box {
width: 100%;
}
.swiper-status-slider-popup .GP-status__img {
width: 100%;
height: auto;
max-height: 70vh;
object-fit: contain;
}  .swiper-button-next,
.swiper-button-prev {
--swiper-navigation-color: #fff;
} @media (min-width: 992px) {
.sc-HB-slider-popup .global-slider-p__wrap {
margin-left: 130px;
max-width: calc(100% - 160px);
}
.swiper-HB-slider-popup .swiper-button-prev {
left: -60px;
}
.swiper-HB-slider-popup .swiper-button-next {
right: -60px;
}
} @media (max-width: 991px) {
.swiper-HB-slider-popup .swiper-button-prev,
.swiper-HB-slider-popup .swiper-button-next {
display: none;
}
.swiper-HB-slider-popup .HB-slider-popup__img-lines {
top: 10px;
gap: 8px;
}
}
@media (max-width: 575px) {
.swiper-status-slider-popup .swiper-pagination {
gap: 10px;
padding-top: 12px;
}
.swiper-status-slider-popup .swiper-pagination-bullet {
max-width: 40px;
}
.swiper-status-slider-popup .swiper-button-next,
.swiper-status-slider-popup .swiper-button-prev {
width: 30px;
}
.swiper-status-slider-popup .swiper-button-next img,
.swiper-status-slider-popup .swiper-button-prev img {
width: 30px;
}
} .swiper-HB-slider-popup .swiper-slide-active,
.swiper-status-slider-popup .swiper-slide-active {
z-index: 1;
} .swiper-HB-slider-popup .swiper-wrapper,
.swiper-status-slider-popup .swiper-wrapper {
transition-timing-function: ease-out;
} .HB-slider-popup__navs {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 15px;
align-items: center;
justify-content: center;
z-index: 20;
padding: 10px 20px;
}
.hbsp-thumb {
position: relative;
width: 60px;
height: 60px;
cursor: pointer;
transition: transform 0.3s ease;
}
.hbsp-thumb:hover {
transform: scale(1.1);
}
.hbsp-thumb.active {
transform: scale(1.15);
}
.hbsp-thumb__svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
pointer-events: none;
}
.hbsp-thumb__bg {
fill: none;
stroke: #5c5c5c;
}
.hbsp-thumb__bar {
fill: none;
stroke: #fff;
stroke-linecap: round;
opacity: 1;
transition: opacity 0.3s ease;
}
.hbsp-thumb.active .hbsp-thumb__bar { }
.hbsp-thumb__img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.4);
transition: border-color 0.3s ease;
}
.hbsp-thumb.active .hbsp-thumb__img {
border-color: rgba(255, 255, 255, 0.8);
}
.hbsp-thumb__img img {
width: 100%;
height: 100%;
object-fit: cover;
} .swiper-HB-slider-popup,
.swiper-status-slider-popup {
touch-action: pan-y;
}