\
.myapp24-hps { width:100%; position:relative; overflow:hidden; }
.myapp24-hps * { box-sizing:border-box; }
.myapp24-hps-inner { width:100%; height:100%; position:relative; }

.myapp24-hps-stage { width:100%; height:100%; position:relative; overflow:hidden; perspective: 1200px; }
.myapp24-hps-track { width:100%; height:100%; position:relative; }

.myapp24-hps-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform: translate3d(0,0,0);
  transition: opacity .45s ease, transform .65s ease;
  display:flex; align-items:flex-end; justify-content:center;
}

.myapp24-hps-slide.is-active { opacity:1; }

.myapp24-hps-text {
  width:min(1100px, 92%);
  margin: 0 0 44px;
  padding: 16px 18px;
  background: rgba(0,0,0,.35);
  border-radius: 14px;
  color:#fff;
  backdrop-filter: blur(4px);
}
.myapp24-hps-text .t { font-size:28px; line-height:1.15; }
.myapp24-hps-text .c { font-size:16px; line-height:1.35; margin-top:8px; opacity:.95; }

.myapp24-hps-nav {
  position:absolute; top:50%;
  width:44px; height:44px;
  border:0; border-radius:22px;
  background: rgba(0,0,0,.45);
  transform: translateY(-50%);
  cursor:pointer;
  z-index:5;
}
.myapp24-hps-nav.prev { left:16px; }
.myapp24-hps-nav.next { right:16px; }
.myapp24-hps-nav::before {
  content:'';
  position:absolute; inset:0;
  margin:auto;
  width:10px; height:10px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
  transform: rotate(45deg);
  top:0; bottom:0;
}
.myapp24-hps-nav.prev::before { transform: rotate(-135deg); left:18px; }
.myapp24-hps-nav.next::before { transform: rotate(45deg); left:16px; }

.myapp24-hps-pagination {
  position:absolute;
  right:16px;
  top:50%;
  transform: translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:6;
}
.myapp24-hps-pagination .line {
  width:3px;
  height:28px;
  border-radius:2px;
  background: rgba(255,255,255,.35);
}
.myapp24-hps-pagination .line.active { background: rgba(255,255,255,.95); }

.myapp24-hps-thumbs {
  position:absolute;
  left:50%;
  bottom:14px;
  transform: translateX(-50%);
  display:flex;
  gap:10px;
  z-index:7;
  padding:10px 12px;
  border-radius:16px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
}
.myapp24-hps-thumb {
  width:62px; height:44px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:10px;
  background-size:cover;
  background-position:center;
  cursor:pointer;
  opacity:.75;
}
.myapp24-hps-thumb.active { opacity:1; border-color: rgba(255,255,255,.85); }

.myapp24-hps-empty {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:#111; color:#fff;
}

.myapp24-hps-layout-ken_burns .myapp24-hps-slide.is-active {
  animation: myapp24KenBurns 8s ease-in-out infinite alternate;
}
@keyframes myapp24KenBurns {
  from { transform: scale(1.02); }
  to { transform: scale(1.12); }
}

.myapp24-hps-layout-vertical_cube .myapp24-hps-slide {
  transform-origin: center center;
  transform: rotateX(90deg) translateZ(0);
  opacity:0;
}
.myapp24-hps-layout-vertical_cube .myapp24-hps-slide.is-active {
  opacity:1;
  transform: rotateX(0deg) translateZ(0);
}
.myapp24-hps-layout-vertical_cube .myapp24-hps-slide.is-prev {
  opacity:0;
  transform: rotateX(-90deg) translateZ(0);
}
.myapp24-hps-layout-vertical_cube .myapp24-hps-slide.is-next {
  opacity:0;
  transform: rotateX(90deg) translateZ(0);
}

.myapp24-hps-layout-vertical_split .myapp24-hps-slide.is-active::after,
.myapp24-hps-layout-vertical_split_double .myapp24-hps-slide.is-active::after {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,0));
}

.myapp24-hps-layout-split_title .myapp24-hps-text { background: rgba(255,255,255,.75); color:#111; }
.myapp24-hps-layout-split_title .myapp24-hps-text .t { font-size:34px; }

.myapp24-hps-videoWrap { width:100%; height:100%; position:relative; background:#000; }
.myapp24-hps-video, .myapp24-hps-iframe { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }

@media (max-width: 768px){
  .myapp24-hps-text .t { font-size:22px; }
  .myapp24-hps-nav { width:40px; height:40px; border-radius:20px; }
  .myapp24-hps-thumb { width:54px; height:40px; }
}