@charset "UTF-8";
/* ==========================================================================
   autobase — 반응형 (모든 @media 는 이 파일에만)
   ※ 시안은 데스크톱 1920 한 종류만 제공됨. 아래 축소 규칙은 시안 없이 비율을
      맞춘 임시 대응이므로, 태블릿·모바일 시안 수령 후 재작업 대상.
   ========================================================================== */

/* ── 1660 이하 : 컨테이너가 줄기 시작하는 구간 ───────────────────────── */
@media (max-width: 1660px) {
  .hero { margin: 0 20px; border-radius: 40px; }
  .hero__copy { left: 6.5%; }

  .gnb { margin-left: auto; }
  .gnb__list { gap: 48px; }

  .ab__copy { padding-top: 60px; }

  .pd__row { gap: 60px; }
  .pd__head { flex: 0 0 400px; }

  .tr__head-r { flex: 1 1 auto; margin-left: 40px; }

  .nw__head { flex: 0 0 500px; }

  .ft__info { margin-left: 50px; }
}

/* ── 1440 이하 ───────────────────────────────────────────────────────── */
@media (max-width: 1440px) {
  .hero { height: 760px; }
  .hero__title { font-size: 56px; }
  .hero__sub { margin-top: 32px; font-size: 22px; }

  .sec-title { font-size: 42px; }

  .ab__visual { height: 500px; }

  .pd__head { flex: 0 0 360px; }
  .pd__nav { margin-top: 44px; }
  .pd .nav-btn img { width: 56px; height: 56px; }

  .nw__head { flex: 0 0 440px; }
  .nw__ttl { font-size: 22px; }

  .ft__right { padding-top: 100px; }
}

/* ── 1200 이하 ───────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .hero { height: 680px; }
  .hero__title { font-size: 48px; }

  .sec-title { font-size: 38px; }
  .sec-desc, .ct__desc { font-size: 17px; }

  .pd__row { gap: 40px; }
  .pd__head { flex: 0 0 320px; }

  .tr__head { flex-wrap: wrap; }
  .tr__head-l { flex: 1 1 100%; }
  .tr__head-r { flex: 1 1 auto; margin-left: 0; padding-top: 28px; }
  .tr__nav { padding-top: 28px; }

  .nw__head { flex: 0 0 380px; }

  .ct__box { height: 500px; }
  .ct__box::after { width: 70%; }
  .ct__copy { padding-left: 56px; }

  .ft__info { margin-left: 40px; }
  .ft__logo img { width: 180px; height: 180px; }
  .ft__right { padding-top: 60px; }
}

/* ── 1024 이하 : 2단 구성을 세로로 쌓는 구간 ─────────────────────────── */
@media (max-width: 1024px) {
  /* 헤더 — PC GNB 숨기고 우측 드로어 (레퍼런스 pintel gnb-style-basic: 80%·max 280px, 1depth 17px, 2depth #f2f2f2) */
  .hd { position: relative; height: 80px; }
  .gnb { display: none; }
  .tabs { margin-top: 48px; }
  .tabs__list { grid-template-columns: repeat(auto-fit, 200px); gap: 12px 20px; }
  .hd__sitemap, .sitemap { display: none; }   /* 좁은 화면은 드로어 메뉴로 대체 */
  .hd__toggle {
    position: relative;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    margin-left: auto;
  }
  .hd__toggle span { width: 24px; height: 2px; margin: 0 auto; background: #000; transition: transform .4s ease-in-out, opacity .4s; }
  body.nav-open .hd__toggle { position: fixed; top: 20px; right: 20px; margin: 0; }
  body.nav-open .hd__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .hd__toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .hd__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .gnb-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, .5);
    visibility: hidden;
    opacity: 0;
    transition: all .4s ease-in-out;
  }
  body.nav-open .gnb-overlay { visibility: visible; opacity: 1; }

  .gnbm {
    display: block;
    position: fixed;
    top: 0;
    right: -82%;
    z-index: 9999;
    width: 80%;
    max-width: 280px;
    height: 100%;
    padding-top: 80px;
    background: #fff;
    overflow-y: auto;
    visibility: hidden;
    transition: all .4s ease-in-out;
  }
  body.nav-open .gnbm { right: 0; visibility: visible; }
  .gnbm__item { border-bottom: 1px solid #e7e7e7; }
  .gnbm__item:first-child { border-top: 1px solid #e7e7e7; }
  .gnbm__item > a { position: relative; display: block; padding: 15px 30px; font-size: 17px; font-weight: 500; color: #333; }
  .gnbm__item.active > a { color: var(--brand); }
  .gnbm__item.has-sub > a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 30px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .3s;
  }
  .gnbm__item.has-sub.active > a::before { transform: translateY(-30%) rotate(-135deg); }
  .gnbm__sub { padding: 15px 0; background: #f2f2f2; }
  .gnbm__sub[hidden] { display: none; }
  .gnbm__sub a { display: block; padding: 12px 30px; font-size: 14px; color: #888; }
  .gnbm__sub li.on a { color: #000; font-weight: 500; }

  .hero { height: 560px; border-radius: 32px; }
  .hero__title { font-size: 40px; }
  .hero__sub { margin-top: 24px; font-size: 18px; }

  .ab, .pd, .tr, .nw, .ct, .ft { margin-top: 100px; }
  .tr { padding: 100px 0; }

  .sec-title { font-size: 34px; }

  /* 회사 소개 — 이미지 위, 텍스트 아래 */
  .ab__inner { grid-template-columns: 1fr; gap: 40px; }
  .ab__visual { height: 420px; }
  .ab__copy { padding-top: 0; }

  /* 제품 — 좌측 텍스트를 슬라이더 위로 (이 폭에서 좌우 여백은 20px 고정) */
  .pd__row { flex-direction: column; gap: 40px; padding: 0 20px; }
  .pd__head { flex: none; padding-top: 0; }
  .pd__desc { max-width: 720px; }
  /* 세로 배치에서는 폭을 명시해야 한다(flex-grow 는 세로축에만 작용).
     좌측 여백만큼 더 넓혀 슬라이더가 화면 우측 끝까지 흐르게 한다. */
  .pd__slider { flex: none; width: calc(100% + 20px); }

  /* 공지 — 텍스트 위, 목록 아래 */
  .nw__inner { flex-direction: column; }
  .nw__head { flex: none; }
  .nw__list { flex: none; margin-top: 48px; }
  .nw__ttl { font-size: 20px; }

  .ct__box { height: 460px; }
  .ct__box::after { width: 100%; }
  .ct__copy { padding-left: 48px; }

  .ft__inner { flex-wrap: wrap; }
  .ft__logo img { width: 150px; height: 150px; }
  .ft__info { padding-top: 0; }
  .ft__right { flex: 1 1 100%; margin-left: 0; padding-top: 32px; text-align: left; }
}

/* ── 768 이하 : 모바일 ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tabs { margin-top: 32px; }
  .tabs__list { display: block; }
  /* 탭 → 드롭메뉴 (레퍼런스 pintel .sub-drop-menu-style ≤800: 버튼 48px·radius 30·main-color2, 목록 흰 패널·그림자) */
  .tab-drop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    border-radius: 30px;
    background: var(--brand);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-align: left;
    cursor: pointer;
  }
  .tab-drop__arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fff;
    transition: transform .3s;
  }
  [data-drop].open .tab-drop__arrow { transform: rotate(180deg); }
  .tab-drop__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 11;
    padding: 5px 0;
    border-radius: 30px;
    background: #fff;
    box-shadow: 6px 6px 20px rgba(0, 0, 0, .16);
  }
  [data-drop].open .tab-drop__list { display: block; }
  .tab-drop__list a {
    display: block;
    height: auto;
    padding: 10px 20px;
    border-top: 1px solid #eee;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #060606;
    text-align: left;
  }
  .tab-drop__list a:first-child { border-top: 0; }
  .tab-drop__list a:hover { background: transparent; color: #060606; }
  .tab-drop__list a.is-active { background: transparent; box-shadow: none; color: var(--brand); }

  .inner, .inner-sub { max-width: calc(100% - 32px); }

  .hero { height: 440px; margin: 0 16px; border-radius: 24px; }
  .hero__copy { left: 24px; right: 24px; }
  .hero__title { font-size: 30px; }
  .hero__sub { margin-top: 16px; font-size: 16px; }
  .hero .hero__dots.swiper-pagination { bottom: 32px; }

  .ab, .pd, .tr, .nw, .ct, .ft { margin-top: 72px; }
  .tr { padding: 72px 0; }

  .sec-title { font-size: 26px; }
  .sec-desc, .ct__desc { font-size: 15px; }
  .eyebrow { font-size: 14px; }

  .ab__visual { height: 260px; border-radius: 20px; }
  .ab__inner { gap: 28px; }
  .ab__desc { margin-top: 16px; }
  .btn-line { width: 240px; height: 60px; font-size: 16px; }
  .ab__btn { margin-top: 28px; }

  .pd__row { gap: 28px; padding: 0 16px; }
  .pd__slider { width: calc(100% + 16px); }
  .pd__desc { margin-top: 16px; }
  .pd__nav { gap: 16px; margin-top: 28px; }
  .pd .nav-btn img { width: 44px; height: 44px; }
  .pd__slide { width: 260px; }
  .pd__card { height: 360px; padding-top: 60px; }
  .pd__thumb { height: 150px; }
  .pd__name { margin-top: 18px; min-height: 46px; font-size: 19px; }
  .pd__more { margin-top: 22px; }

  .tr__head-r { padding-top: 16px; }
  .tr__nav { gap: 16px; padding-top: 20px; }
  .tr .nav-btn img { width: 40px; height: 40px; }
  .tr__slider-wrap { margin-top: 28px; padding-left: 16px; }
  .tr__slide { width: 260px; }
  .tr__card { height: 380px; border-radius: 18px; }
  .tr__card::after { height: 200px; }
  .tr__txt { left: 24px; top: auto; bottom: 28px; width: calc(100% - 48px); }
  .tr__name { font-size: 19px; }
  .tr__desc { font-size: 13px; }

  .nw__sub { margin-top: 16px; }
  .nw__btn { margin-top: 28px; }
  .nw__list { margin-top: 32px; }
  .nw__item { align-items: flex-start; flex-direction: column; gap: 6px; padding: 18px 0; }
  .nw__ttl { font-size: 17px; }
  .nw__date { font-size: 14px; }

  .ct__box { height: 380px; border-radius: 24px; }
  .ct__copy { padding: 0 24px; }
  .ct__desc { margin-top: 16px; }
  .ct__btn { margin-top: 28px; }

  .ft { padding: 48px 0; }
  .ft__logo img { width: 120px; height: 120px; }
  .ft__info { flex: 1 1 100%; margin-left: 0; margin-top: 24px; font-size: 14px; }
  .ft__right { padding-top: 24px; font-size: 14px; }
}

/* ── 480 이하 ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero { height: 380px; }
  .hero__title { font-size: 25px; }

  .sec-title { font-size: 23px; }

  .pd__slide, .tr__slide { width: 232px; }

  .ft__info p { line-height: 1.5; }
  .ft__info p + p { margin-top: 4px; }
}

/* ── 서브페이지 상단 비주얼 (.sv) — 전 서브페이지 공통 ─────────────────── */
@media (max-width: 1440px) {
  .sv { height: 540px; }
  .sv__title { font-size: 76px; }
  .sv__inner { padding-bottom: 150px; }
}
@media (max-width: 1200px) {
  .sv { height: 460px; }
  .sv__title { font-size: 60px; }
}
@media (max-width: 1024px) {
  .sv { height: 400px; }
  .sv__title { font-size: 48px; }
  .sv__inner { padding-bottom: 100px; }
}
@media (max-width: 768px) {
  .sv { height: 320px; }
  .sv__title { font-size: 36px; }
  .sv__inner { padding-bottom: 64px; }
  .sv__crumbs { gap: 10px; font-size: 14px; }
  .sv__crumbs a img { width: 16px; height: 16px; }
}
@media (max-width: 480px) {
  .sv { height: 280px; }
  .sv__title { font-size: 30px; }
}