.anyin-px{
  --aps-height:560px;
  --aps-line-width:1.6px;
  position:relative;
  overflow:hidden;
  width:100%;
}

.anyin-px,
.anyin-px *,
.anyin-px *::before,
.anyin-px *::after{
  box-sizing:border-box;
}

.anyin-px__viewport{
  position:relative;
  overflow:hidden;
}

.anyin-px__track{
  display:flex;
  transition:transform .65s ease;
  will-change:transform;
}

.anyin-px__slide{
  position:relative;
  flex:0 0 100%;
  min-width:100%;
  height:var(--aps-height);
}

.anyin-px__bg,
.anyin-px__inner{
  position:absolute;
  inset:0;
}

.anyin-px__bg{
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.anyin-px__inner{
  position:relative;
  width:100%;
  height:100%;
  margin:0 auto;
}

.anyin-px__title,
.anyin-px__media,
.anyin-px__subtitle,
.anyin-px__button,
.anyin-px__annotation{
  position:absolute;
  left:var(--aps-x,50%);
  top:var(--aps-y,50%);
  transform:translate(-50%,-50%);
}

.anyin-px__title{
  z-index:1;
  margin:0;
  width:min(100%,1440px);
  max-width:none;
  white-space:nowrap;
  font-size:clamp(44px,7vw,102px);
  line-height:.95;
  font-weight:700;
  letter-spacing:-.045em;
  text-transform:uppercase;
  text-align:center;
  color:#111;
}

.anyin-px__media{
  z-index:3;
  width:min(42vw,520px);
  max-width:90%;
}

.anyin-px__media img{
  display:block;
  width:100%;
  height:auto;
  max-height:calc(var(--aps-height) - 20px);
  object-fit:contain;
}

.anyin-px__subtitle{
  z-index:4;
  width:min(90%,760px);
  max-width:none;
  font-size:clamp(18px,2vw,46px);
  line-height:1.15;
  color:#666;
  text-align:center;
}

.anyin-px__button{
  z-index:6;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-radius:14px;
  background:#1f4f1a;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  line-height:1.25;
  max-width:220px;
}

.anyin-px__annotation{
  z-index:5;
  width:var(--aps-box-width,250px);
}

.anyin-px__box{
  position:relative;
  width:100%;
  padding:13px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-size:13px;
  line-height:1.42;
  color:#303030;
}

.anyin-px__point{
  position:absolute;
  left:var(--aps-hotspot-x);
  top:var(--aps-hotspot-y);
  transform:translate(-50%,-50%);
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  border:2px solid #8b8b8b;
  z-index:2;
}

.anyin-px__connector{
  position:absolute;
  inset:0;
  overflow:visible;
  pointer-events:none;
  z-index:1;
}

.anyin-px__connector path{
  fill:none;
  stroke:#303030;
  stroke-width:var(--aps-line-width);
  vector-effect:non-scaling-stroke;
}

.anyin-px__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:8;
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.84);
  color:#222;
  font-size:32px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.anyin-px__arrow--prev{ left:18px; }
.anyin-px__arrow--next{ right:18px; }

.anyin-px__dots{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  z-index:8;
}

.anyin-px__dots .anyin-px__dot{
  appearance:none !important;
  -webkit-appearance:none !important;
  display:block !important;
  flex:0 0 auto !important;

  width:6px !important;
  min-width:6px !important;
  max-width:6px !important;
  height:6px !important;
  min-height:6px !important;
  max-height:6px !important;

  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;

  background:#1C3A19 !important;
  border-radius:50% !important;
  line-height:0 !important;
  font-size:0 !important;
  cursor:pointer;
}

.anyin-px__dots .anyin-px__dot.is-active{
  width:22px !important;
  min-width:22px !important;
  max-width:22px !important;
  height:6px !important;
  min-height:6px !important;
  max-height:6px !important;
  border-radius:999px !important;
}

.anyin-px__dots .anyin-px__dot::before,
.anyin-px__dots .anyin-px__dot::after{
  content:none !important;
  display:none !important;
}

.anyin-px__annotation--left .anyin-px__box,
.anyin-px__annotation--right .anyin-px__box{
  text-align:left;
}

@media (max-width:1024px){
  .anyin-px__title,
  .anyin-px__media,
  .anyin-px__subtitle,
  .anyin-px__button,
  .anyin-px__annotation{
    left:var(--aps-tablet-x,var(--aps-x,50%));
    top:var(--aps-tablet-y,var(--aps-y,50%));
  }

  .anyin-px__media{
    width:min(48vw,420px);
  }
}

@media (max-width:767px){
  .anyin-px__title,
  .anyin-px__media,
  .anyin-px__subtitle,
  .anyin-px__button,
  .anyin-px__annotation{
    left:var(--aps-mobile-x,var(--aps-x,50%));
    top:var(--aps-mobile-y,var(--aps-y,50%));
  }

  .anyin-px__title{
    font-size:clamp(34px,11vw,58px);
    width:92%;
    max-width:92%;
    white-space:normal;
  }

  .anyin-px__media{
    width:min(78vw,360px);
  }

  .anyin-px__subtitle{
    width:86%;
    max-width:none;
    font-size:clamp(18px,5vw,28px);
    white-space:normal;
  }

  .anyin-px__button{
    max-width:200px;
    padding:12px 16px;
  }

  .anyin-px__annotation{
    width:min(var(--aps-box-width,250px),80vw);
  }

  .anyin-px__box{
    font-size:12px;
    line-height:1.45;
  }

  .anyin-px__arrow{
    display:none;
  }
}