@charset "utf-8";
/* =========================================================
   SAPAE 3 기획전 (PC / MO 반응형)
   - 클래스 prefix : sp3-
   - 브레이크포인트 : 1024px 이하 태블릿 / 767px 이하 모바일
   ========================================================= */

.sp3-wrap { width: 100%; overflow: hidden; background: #fff; color: #111; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; letter-spacing: -0.02em; word-break: keep-all; }
.sp3-wrap * { box-sizing: border-box; }
.sp3-wrap img { display: block; max-width: none; border: 0; }

/* ---------- 1. 메인 히어로 (1920 x 760) ---------- */
.sp3-hero { position: relative; width: 100%; max-width: 1920px; height: 760px; margin: 0 auto; overflow: hidden; }
.sp3-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sp3-hero .sp3-mo { display: none; }

/* ---------- 2. 타이틀 / 본문 ---------- */
.sp3-intro { padding: 70px 20px 90px; text-align: center; }
.sp3-intro .sp3-tit { margin: 0; font-size: 64px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: #000; }
.sp3-intro .sp3-sub { margin: 10px 0 0; font-size: 20px; font-weight: 400; line-height: 1.4; color: #111; }
.sp3-intro .sp3-desc { margin: 48px 0 0; font-size: 18px; font-weight: 400; line-height: 1.65; color: #333; }
.sp3-intro .sp3-desc p { margin: 0; }
.sp3-intro .sp3-desc p + p { margin-top: 26px; }
.sp3-intro .sp3-br-mo { display: none; }

@media (max-width: 767px) {
  .sp3-intro .sp3-sp-pc { display: none; }
  .sp3-intro .sp3-sp-mo { display: inline; }
}


/* ---------- 3. 오토 스와이프 ---------- */
.sp3-flow { position: relative; width: 100%; margin-bottom: 120px; overflow: hidden; }
.sp3-flow-track { display: flex; width: max-content; will-change: transform; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.sp3-flow-track.is-drag { cursor: grabbing; }
.sp3-flow-item { flex: 0 0 auto; width: 440px; height: 660px; margin-right: 4px; overflow: hidden; }
/* 가로로 넓은 이미지 : 높이만 맞추고 너비는 원본 비율 유지 */
.sp3-flow-item.sp3-wide { width: auto; }
.sp3-flow-item.sp3-wide img { width: auto; height: 100%; }
.sp3-flow-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }

/* ---------- 태블릿 ---------- */
@media (max-width: 1024px) {
  .sp3-hero { height: auto; aspect-ratio: 1920 / 760; }
  .sp3-intro .sp3-tit { font-size: 52px; }
  .sp3-flow-item { width: 340px; height: 510px; }
}

/* ---------- 모바일 ---------- */
@media (max-width: 767px) {
  .sp3-hero { aspect-ratio: auto; height: auto; }
  .sp3-hero .sp3-pc { display: none; }
  .sp3-hero .sp3-mo { display: block; width: 100%; height: auto; }

  .sp3-intro { padding: 40px 16px 50px; }
  .sp3-intro .sp3-tit { font-size: 34px; }
  .sp3-intro .sp3-sub { margin-top: 6px; font-size: 14px; }
  .sp3-intro .sp3-desc { margin-top: 28px; font-size: 14px; line-height: 1.7; }
  .sp3-intro .sp3-desc p + p { margin-top: 18px; }
  .sp3-intro .sp3-br-pc { display: none; }
  .sp3-intro .sp3-br-mo { display: inline; }

  .sp3-flow { margin-bottom: 60px; }
  .sp3-flow-item { width: 62vw; height: 93vw; margin-right: 4px; }
}