/* BASIC css start */
/* ===== 기존팝업 디자인 유지 ===== */
#MAKESHOPLY0, #MAKESHOPLY0 td { background: none !important; }
#specialEvt { position: relative; overflow: visible; }

#specialEvt .close-wrap {
  position: absolute; top: -5px; right: -5px; padding: 5px;
  background: transparent; z-index: 10;
}
#specialEvt .close-wrap .close { position: relative; width: auto; margin: 0; text-align: right; }
#specialEvt .close-wrap .close .btn-close {
  display: inline-flex; justify-content: center; align-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: #000; color: #fff; text-decoration: none;
  font-size: 18px; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
#specialEvt .close-wrap .close .btn-close:hover { background: #111; }
#specialEvt .MS_checkbox_show_term { appearance:auto!important; position:static!important; opacity:1!important; margin:0 6px 0 0!important; }
#specialEvt .close-wrap label { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#000; }

/* ===== 슬라이더 박스: 420×460 고정 ===== */
#specialEvt .slider {
  position: relative;
  overflow: hidden;
  width: 420px;
  height: 460px;
  margin: 0 auto;           /* 가운데 정렬 */
}

/* 슬라이드 트랙 */
#specialEvt .slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .5s ease;
  will-change: transform;
}

/* 각 슬라이드도 420×460에 딱 맞게 */
#specialEvt .slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

/* 이미지: 잘리지 않고 축소/확대만 해서 맞춤 */
#specialEvt .slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 잘리지 않고 비율 맞춰 채우기 */
  object-position: center;
  background: transparent;
}

/* 좌우 화살표 (순수 까만 화살표 문자) */
#specialEvt .nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #000;
  font-size: 32px; line-height: 1; cursor: pointer; z-index: 5;
}
#specialEvt .nav-prev { left: 24px; }
#specialEvt .nav-next { right: 24px; }
#specialEvt .nav-btn:hover { color: #111; }

/* ===== 반응형: 작은 화면에서 비율 유지 축소 ===== */
/* 90vw 기준으로 축소, 높이는 (460/420) 비율로 계산 */
@media (max-width: 460px) {
  #specialEvt .slider {
    width: 90vw;
    height: calc(90vw * 460 / 420);
  }
  #specialEvt .nav-btn { font-size: 28px; }
  #specialEvt .nav-prev { left: 16px; }
  #specialEvt .nav-next { right: 16px; }
}

/* BASIC css end */