@charset "utf-8";
/*
 * main.css — 모바일 메인 페이지 (clean-room rewrite)
 * 풀폭 슬라이더 + 배너 이미지 영역. 이미지는 슬라이드 안에서 100% 폭.
 */

#container { width: 100%; }
#contents_wrap { width: 100%; }

.main { width: 100%; max-width: 100%; overflow: hidden; }

/* 슬라이더 영역 — 폭을 뷰포트로 강하게 제약 (slick 폭 폭주 방지) */
.main_slide { width: 100%; max-width: 100vw; overflow: hidden; }
.main_slide img { width: 100%; display: block; }

/* slick 래퍼: 슬라이드 이미지 풀폭 */
.slider-wrap { width: 100%; max-width: 100vw; overflow: hidden; }
.slider-wrap .slick-slide img,
.main_slide .slick-slide img { width: 100%; display: block; height: auto; }

/* ───────────────────────────────────────────────────────────
   slick 폭 측정 무력화 (이 컨테이너 구조에서 slick이 슬라이드 폭을
   과대 측정 → 거대하게 굳는 문제). 측정에 의존하지 않도록 인라인
   width/transform 을 강제 덮어쓰고, 활성 슬라이드만 풀폭으로 표시한다.
   autoplay 는 .slick-active 를 교체하므로 컷 방식으로 전환된다.
   ─────────────────────────────────────────────────────────── */
.slider-wrap .slick-list,
.main_slide .slick-list { width: 100% !important; overflow: hidden !important; }
.slider-wrap .slick-track,
.main_slide .slick-track {
  width: 100% !important;
  transform: none !important;
  display: block !important;
}
.slider-wrap .slick-slide,
.main_slide .slick-slide {
  width: 100% !important;
  float: none !important;
  display: none !important;
}
.slider-wrap .slick-slide.slick-active,
.main_slide .slick-slide.slick-active { display: block !important; }
/* slick 초기화 전(아직 .slick-initialized 없음): 첫 슬라이드만 노출 */
.slider-wrap:not(.slick-initialized) > div:first-child,
.main_slide .slider-wrap:not(.slick-initialized) > div:first-child { display: block; }
.slider-wrap:not(.slick-initialized) > div:nth-child(n+2) { display: none; }

/* 배너 이미지 박스 */
.main_banner_box,
.main_banner_box2 { width: 100%; }
.main_banner_box img,
.main_banner_box2 img { width: 100%; display: block; }

/* 메인 슬라이더 점(dots) */
.main_slide .slick-dots {
  position: absolute; left: 0; right: 0; bottom: 10px;
  text-align: center; font-size: 0;
}
.main_slide .slick-dots li {
  display: inline-block; margin: 0 4px;
}
.main_slide .slick-dots li button {
  width: 8px; height: 8px; padding: 0; font-size: 0;
  border-radius: 50%; background: rgba(255,255,255,0.6); border: 0;
}
.main_slide .slick-dots li.slick-active button { background: #fff; }