@charset "UTF-8";
/* ==========================================================================
   autobase — 연혁 반응형 (모든 @media 는 이 파일에만)
   레퍼런스 800px 분기를 사이트 컨벤션(1024/768)에 맞춰 적용.
   ========================================================================== */

/* ── 1024 이하 ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hs { margin-top: 60px; }
  .hs-top { height: 440px; }
  .hs-top__box { top: 70px; width: 360px; height: 370px; padding: 40px; }
  .hs-top__tit { margin-top: 30px; font-size: 21px; }
  .hs-top__years { left: 40px; bottom: 40px; }
  .hs-year { font-size: 18px; }

  .hs-tl { padding-top: 110px; }
  .hs-tl__year { padding-right: 60px; font-size: 48px; }
  .hs-tl__box { padding-left: 60px; }
}

/* ── 768 이하 : 모바일 — 라인 좌측 정렬 스택 ─────────────────────────── */
@media (max-width: 768px) {
  .hs { margin-top: 48px; }

  .hs-top { height: auto; }
  .hs-top__box { position: relative; top: 0; width: 100%; height: auto; padding: 28px 24px; }
  .hs-top__tit { margin-top: 22px; font-size: 19px; }
  .hs-top__years { position: static; padding-top: 24px; }
  .hs-year { font-size: 16px; }
  .hs-top__bg { position: relative; inset: auto; height: auto; padding-top: 56%; }

  .hs-body { padding-bottom: 56px; }
  .hs-tl { padding-top: 56px; }
  .hs-tl__group { padding-bottom: 40px; }
  .hs-tl::before,
  .hs-tl::after { left: 10px; }

  .hs-tl__box { width: auto; margin-left: 0; padding-left: 40px; }
  .hs-tl__box::before { top: 8px; left: 10px; right: auto; transform: translateX(-50%); width: 12px; height: 12px; }
  .hs-tl__year {
    position: static;
    padding-right: 0;
    font-size: 32px;
    white-space: normal;
  }
  .hs-tl__year span { display: inline; margin: 0 0 0 6px; font-size: 15px; }
  .hs-tl__list { margin-top: 14px; }
  .hs-tl__txt { font-size: 14px; }
}