@charset "utf-8";
/* ==========================================================================
   LJ INTERNATIONAL — 반응형 전용 (@media 는 전부 이 파일에만)
   브레이크포인트: 1479 / 1280 / 768 / 480 (큰 값 → 작은 값 순)

   ※ 시안에 모바일/태블릿 안이 없다. 아래는 데스크톱 시안(1920 기준)을
      가로 스크롤 없이 읽히도록 축약한 것으로, 수치는 시안 근거가 아닌 판단이다.
      모바일 시안이 나오면 이 파일만 교체하면 된다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ~1479px — 지도가 시안 폭(1440)보다 좁아지는 구간 (글로벌 네트워크)
   카드는 고정 크기(330×392)인데 지도만 줄어들어 핀 간격이 좁아진다.
   예전에는 이 구간 전체에서 카드를 지도 아래로 내렸지만, 이제 motion.js placeCards() 가
   폭마다 핀 옆 빈자리를 계산하고, 자리가 없을 때만 .is-stack 을 붙여 아래로 내린다 (2026-09-29).
   ※ JS 가 없으면 이 구간에서 설계 폭 좌표 그대로 떠서 핀을 가릴 수 있다.
   -------------------------------------------------------------------------- */
@media (max-width: 1479px) {
  .gn-map-area.is-stack { height: auto; padding-bottom: 24px; background-size: 100% 557px; }
  .gn-map-area.is-stack .gn-map { margin-bottom: 440px; }
  .gn-map-area.is-stack .gn-card {
    left: 50%;
    top: calc(100% + 24px);
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   ~1280px — 노트북·태블릿 가로
   컨테이너 여백을 좁히고 헤더 GNB 간격을 줄여 1행을 유지한다.
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .container { padding: 0 40px; }

  .gnb-link { padding: 0 22px; font-size: 17px; }
  .header.gnb-on .gnb-link { padding: 0 32px; }

  .header-util { gap: 16px; }
  .lang { font-size: 16px; }
  .btn-inquiry { width: 132px; height: 46px; font-size: 16px; }

  .logo img { width: 200px; height: auto; }

  .sub-head { padding: 60px 0 48px; }
  .sub-cat { font-size: 21px; }
  .sub-title { margin-top: 18px; font-size: 48px; line-height: 1.1; }

  .sub-visual { height: 400px; }

  .sub-tabs-inner { height: 68px; gap: 44px; }
  .sub-tab { font-size: 18px; }

  /* 푸터 컬럼 고정폭 해제 — 균등 분배로 전환 */
  .footer { padding-top: 60px; }
  .footer-nav { flex: 1; gap: 24px; }
  .footer-col { width: auto !important; flex: 1; }
  .btn-contact { margin-left: 32px; }

  /* ---- 메인 ---- */
  .hero { padding: 150px 0 140px; }
  .hero-title { font-size: 68px; line-height: 82px; }
  .hero-sub { font-size: 22px; line-height: 31px; }
  .hero-btns { margin-top: 32px; }
  .btn-pill { width: 152px; height: 46px; font-size: 16px; }

  .sec-label { font-size: 21px; }
  .sec-title { margin-top: 16px; font-size: 38px; line-height: 50px; }

  .about { padding-top: 120px; }
  .stats { margin-top: 48px; }
  .stat::before { top: 61px; }
  .stat-en { font-size: 16px; }
  .stat-icon { margin-top: 24px; height: 96px; }
  .stat-icon img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
  .stat-num { margin-top: 24px; font-size: 32px; }
  .stat-ko { margin-top: 10px; font-size: 18px; }
  .about-more { margin-top: 48px; }
  .btn-round { width: 180px; height: 60px; font-size: 16px; }

  .business { padding-top: 140px; padding-bottom: 150px; }
  .biz-cards { margin-top: 32px; }
  .biz-card-link { height: 600px; }
  .biz-card h3 { padding: 28px 28px 0; font-size: 26px; }
  .biz-card p { margin-top: 16px; padding: 0 28px; font-size: 17px; line-height: 26px; }

  .global-map-area { margin-top: 36px; height: 460px; padding-top: 90px; }
  .global-map { max-width: calc(100% - 80px); }
  .map-pin { width: 22px; }
  .map-pin img { width: 22px; height: 22px; }
  .map-pin b { top: 24px; font-size: 16px; }
  .office-card { width: 220px; }
  .office-photo { height: 130px; }
  .office-body { padding: 16px 18px 20px 20px; }
  .office-name { font-size: 16px; }
  .office-name span { font-size: 12px; }
  .office-dl { margin-top: 14px; grid-template-columns: 42px 1fr; row-gap: 10px; font-size: 14px; }

  .brand { padding-top: 150px; }
  .brand .sec-more { margin-top: 28px; }
  .brand-roll { margin-top: 48px; }
  .brand-tile { width: 290px; height: 134px; margin-right: 27px; }

  .news { padding-top: 150px; }
  .news-cards { margin-top: 32px; gap: 24px; }
  .news-card { height: 340px; padding: 44px 36px 0; }
  .news-card h3 { font-size: 22px; line-height: 28px; }
  .news-card p { margin-top: 14px; font-size: 15px; line-height: 23px; }
  .news-arrow { left: 36px; bottom: 40px; width: 42px; height: 42px; }
  .news-arrow img { width: 100%; height: 100%; }
  .news .sec-more { margin-top: 48px; }

  .contact { padding-top: 150px; }
  .contact::after { height: 210px; }
  .contact-inner { padding-bottom: 150px; }
  .contact-title { font-size: 46px; }
  .contact-desc { margin-top: 18px; font-size: 16px; line-height: 25px; }
  .contact-inner .btn-round { margin-top: 90px; }

  /* ---- 회사개요 ---- */
  .ov-intro { padding: 100px 0 150px; }
  .ov-head { font-size: 48px; line-height: 56px; }
  .ov-band { height: 760px; }
  .ov-symbol { width: 110px; height: 168px; }
  .ov-desc { margin-top: 40px; width: 700px; font-size: 24px; line-height: 38px; }

  /* ---- CEO 메세지 ---- */
  .ceo { padding: 100px 0 120px; }
  .ceo-inner { gap: 60px; }
  .ceo-txt { width: auto; flex: 1; min-width: 0; }
  .ceo-photo { width: 480px; }
  .ceo-photo img { height: 662px; }
  .ceo-head { font-size: 38px; line-height: 50px; }
  .ceo-lead { margin-top: 60px; font-size: 20px; line-height: 32px; }
  .ceo-body { margin-top: 32px; font-size: 16px; line-height: 25px; }
  .ceo-body p + p { margin-top: 25px; }
  .ceo-sign { margin-top: 44px; font-size: 16px; }

  /* ---- 비전·미션 ---- */
  .vm { padding: 60px 0 130px; }
  .vm-title { font-size: 38px; line-height: 50px; }
  .vm-banner { margin-top: 32px; height: 560px; }
  .vm-banner-head { font-size: 50px; line-height: 62px; }
  .vm-banner-sub { margin-top: 22px; width: 580px; font-size: 19px; line-height: 29px; }
  .vm-cards { margin-top: 70px; gap: 22px; }
  .vm-card { height: 460px; padding: 60px 24px 0; }
  .vm-ico { height: 150px; }
  .vm-card:nth-child(1) .vm-ico img { width: 152px; height: 130px; margin-top: 11px; }
  .vm-card:nth-child(2) .vm-ico img { width: 181px; height: 130px; margin-top: 11px; }
  .vm-card:nth-child(3) .vm-ico img { width: 181px; height: 150px; }
  .vm-card-ko { margin-top: 26px; font-size: 27px; }
  .vm-card-en { margin-top: 14px; font-size: 16px; }
  .vm-card-desc { margin-top: 16px; font-size: 15px; line-height: 23px; }

  /* ---- 연혁 ---- */
  .hist { padding: 60px 0 120px; }
  .hist-title { font-size: 38px; line-height: 50px; }
  .hist-sub { font-size: 16px; line-height: 25px; }
  .tl { margin-top: 70px; }
  .tl::before { top: 19px; height: var(--tl-fill, 250px); }
  .tl-item { column-gap: 200px; }
  .tl-item + .tl-item { margin-top: 80px; }
  .tl-item::before { top: 19px; }
  .tl-item::after { top: 19px; bottom: -99px; }
  .tl-date { font-size: 28px; line-height: 38px; }
  .tl-en { margin-top: 12px; font-size: 16px; line-height: 22px; }
  .tl-desc { margin-top: 8px; font-size: 16px; line-height: 22px; }

  /* ---- 글로벌 네트워크 ---- */
  .gn { padding-top: 60px; }
  .gn-title { font-size: 38px; line-height: 50px; }
  .gn-sub { font-size: 16px; line-height: 25px; }
  .gn-map-area { margin-top: 60px; padding-top: 80px; background-size: 100% 460px; }
  .gn-map-area.is-stack .gn-map { margin-bottom: 390px; }
  .gn-card { width: 280px; height: 340px; }
  .gn-card-photo { height: 136px; }
  .gn-card-body { padding: 16px 18px 0 20px; }
  .gn-card-name { font-size: 16px; }
  .gn-card-name span { font-size: 12px; }
  .gn-dl { margin-top: 14px; grid-template-columns: 56px 1fr; row-gap: 9px; font-size: 14px; line-height: 20px; }
  .gn-contact { padding-top: 120px; }

  /* ---- 화장품 유통 ---- */
  .cos-hero { padding-top: 60px; }
  .cos-title { font-size: 38px; line-height: 50px; }
  .cos-hero-img { margin-top: 32px; height: 560px; padding-top: 250px; }
  .cos-hero-head { font-size: 50px; line-height: 60px; }
  .cos-hero-sub { margin-top: 22px; width: 580px; font-size: 19px; line-height: 29px; }

  .cos-ov { padding-top: 120px; }
  .cos-ov-txt { padding-top: 80px; padding-right: 32px; }
  .cos-ov-head { font-size: 38px; line-height: 50px; }
  .cos-ov-desc { margin-top: 28px; width: 100%; font-size: 16px; line-height: 25px; }
  .cos-ov-media { width: 520px; }
  .cos-ov-img { height: 380px; }

  .cos-brands { padding-top: 150px; padding-bottom: 150px; }
  .cos-process--solo { padding-top: 150px; }
  .cos-brands-head { font-size: 38px; line-height: 50px; }
  /* 파트너 브랜드 — 기본 타일 × 2.019 = 활성 타일 (slider.js SCALE), 간격은 slider.js breakpoints */
  .cos-roll { margin-top: 48px; }
  .cos-swiper { height: 243px; }
  .cos-tile { width: 260px; height: 120px; }
  .cos-swiper--square .cos-tile { width: 120px; height: 120px; }

  .cos-process-head { font-size: 38px; line-height: 50px; }
  .pr-steps { margin-top: 48px; gap: 20px; }
  .pr-ill { height: 280px; }
  .pr-label { height: 58px; font-size: 20px; }
  .cos-contact { padding-top: 150px; }

  /* ---- 게시판 ---- */
  .bd { padding: 60px 0 120px; }
  .bd-title { font-size: 38px; line-height: 50px; }
  .bd-head { margin-top: 52px; }
  .bd-filter { margin-top: 28px; }
  .bd-filter + .bd-head { margin-top: 52px; }
  .bd-table { margin-top: 26px; }
  .bd-col-no { width: 90px; }
  .bd-col-date { width: 120px; }
  .bd-col-hit { width: 110px; }
  .bd-table th { height: 56px; }
  .bd-table td { height: 56px; }
  .bd-pager { margin-top: 56px; }

  .bd--card { padding-bottom: 120px; }
  .bd-cards { margin-top: 52px; gap: 26px; }
  .bd-card-thumb { height: 258px; }
  .bd-card-title { margin-top: 16px; font-size: 18px; line-height: 26px; }
  .bd-card-date { font-size: 15px; }
  .bd-cards + .bd-pager { margin-top: 50px; }

  /* ---- 게시판 상세 ---- */
  .nv { padding: 60px 0 130px; }
  .nv-article { margin-top: 60px; }
  .nv-title { font-size: 24px; line-height: 34px; }
  .nv-body { padding-top: 40px; }
  .nv-body-img { width: 100%; height: 440px; margin-bottom: 26px; }
  .nv-more { margin-top: 60px; }

  /* ---- 파트너쉽 문의 ---- */
  .cf { padding: 60px 0 120px; }
  .cf-inner { gap: 24px; }
  .cf-intro h3 { font-size: 28px; line-height: 40px; }
  .cf-intro p { margin-top: 16px; font-size: 17px; line-height: 26px; }
  .cf-form { width: 720px; }
  .cf-field + .cf-field { margin-top: 40px; }
  .cf-label { font-size: 18px; line-height: 42px; }
  .cf-form input, .cf-form select { height: 58px; padding: 0 16px; font-size: 16px; }
  .cf-form textarea { height: 220px; padding: 16px; font-size: 16px; }
  .cf-selectbox.is-narrow { width: 360px; }
  .cf-submit { margin-top: 40px; }
  .cf-submit .btn-round { height: 58px; }

  /* ---- 오시는 길 ---- */
  .lc { padding: 60px 0 120px; }
  .lc-title { font-size: 38px; line-height: 50px; }
  .lc-top { margin-top: 120px; gap: 60px; }
  .lc-txt h4 { font-size: 38px; line-height: 40px; }
  .lc-list { margin-top: 40px; }
  .lc-row { font-size: 16px; }
  .lc-row dt { width: 130px; }
  .lc-photo { width: 480px; }
  .lc-photo img { height: 288px; }
  .lc-map { margin-top: 48px; }
  .lc-map iframe { height: 480px; }

  /* 지사 정보 */
  .br { padding: 60px 0 120px; }
  .br-title { font-size: 38px; line-height: 50px; }
  .br-list { margin-top: 70px; }
  .br-item { gap: 60px; padding: 50px 0 56px; }
  .br-photo { width: 430px; }
  .br-photo img { height: 258px; }
  .br-head h4 { font-size: 26px; line-height: 38px; }
  .br-ask { font-size: 16px; }
  .br-row { font-size: 16px; }
  .br-row dt { width: 110px; margin-left: 12px; }
  .br-map img, .br-map iframe { height: 348px; }

  /* 브랜드 > 공식 유통 화장품 — CEO 메세지와 같은 축소 비율 */
  .bc { padding-top: 100px; }
  .bc-inner { gap: 60px; }
  .bc-txt { width: auto; flex: 1; min-width: 0; }
  .bc-photo { width: 480px; }
  .bc-photo img { height: 554px; }   /* 600:693 비율 유지 */
  .bc-head { font-size: 38px; line-height: 50px; }
  .bc-points { margin-top: 60px; font-size: 20px; line-height: 32px; }
  .bc-desc { margin-top: 32px; font-size: 16px; line-height: 25px; }
  .bc-gallery { padding: 100px 0 120px; }
  .bc-card { width: 320px; }
  .bc-card img { height: 426px; }
}

/* --------------------------------------------------------------------------
   ~991px — 헤더 모바일 메뉴 전환점 (2026-09-29, 사용자 요청: 768 → 991)
   이 폭부터 GNB 를 햄버거 + 오른쪽에서 밀려 들어오는 전체 메뉴로 바꾼다.
   레이아웃(컨테이너 여백·본문 1단 전환 등)은 여전히 768 블록이 담당한다 — 이 블록은 헤더만.
   ※ motion.js gnbHover() 의 matchMedia(992 / 991)와 반드시 같이 바꾼다.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* 헤더 — 햄버거 + 오른쪽에서 밀려 들어오는 전체 메뉴 (sumang/ 방식) */
  .header { height: 72px; }

  /* .header-inner 는 .container 와 같은 요소다.
     padding 단축속성을 쓰면 컨테이너의 좌우 여백이 0으로 덮여 로고·버튼이 화면 밖으로 잘린다. */
  .header-inner { flex-wrap: nowrap; }

  .ham-btn { display: flex; }
  .gnb-bg { display: none; }

  .gnb {
    position: fixed;
    left: 0;
    top: 72px;
    width: 100%;
    height: calc(100vh - 72px);
    padding: 8px 20px 60px;
    background: #fff;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s ease;
  }

  .header.menu-open .gnb { transform: translateX(0); }

  .gnb .depth1 {
    flex-direction: column;
    height: auto;
    align-items: stretch;
  }

  .gnb .depth1 > li {
    height: auto;
    border-bottom: 1px solid var(--line);
  }

  /* 데스크톱 hover 효과가 터치로 남아도 세로 메뉴가 깨지지 않게 무력화 */
  .gnb .depth1 > li::before,
  .header.gnb-on .gnb .depth1 > li::before { display: none; }

  .gnb-link,
  .header.gnb-on .gnb-link {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 4px 18px;
    font-size: 18px;
    font-weight: 600;
  }

  .gnb .depth1 > li:hover > .gnb-link { color: inherit; }

  /* 뎁스1 우측 펼침 화살표 — 열리면 회전 */
  .gnb-link::after {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid var(--tab-off);
    border-bottom: 2px solid var(--tab-off);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .25s ease;
  }

  .gnb .depth1 > li.open > .gnb-link::after {
    transform: translateY(2px) rotate(-135deg);
    border-color: var(--red);
  }

  /* 하위 메뉴는 기본 접힘, 뎁스1 .open 시 펼침 */
  .gnb .depth2 {
    position: static;
    width: auto;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 1;
    pointer-events: auto;
    text-align: left;
    transition: max-height .3s ease;
  }

  .gnb .depth1 > li.open .depth2 { max-height: 400px; padding: 0 0 14px; }

  .gnb .depth2 > li > a {
    padding: 8px 12px;
    font-size: 15px;
    color: var(--tab-off);
    text-align: left;
  }

  .gnb .depth2 > li > a > span::after { display: none; }

  /* 메뉴 패널 맨 아래 언어 전환 (헤더의 .lang 은 480 이하에서 숨는다) */
  .gnb-lang { display: flex; gap: 20px; padding: 24px 4px 0; font-size: 15px; font-weight: 600; }
  .gnb-lang a { color: var(--tab-off); }
  .gnb-lang a.is-on { color: #000; }

  .logo img { width: 168px; }

  .lang { font-size: 15px; }
  .btn-inquiry { width: 108px; height: 40px; font-size: 15px; }
}

/* --------------------------------------------------------------------------
   ~768px — 태블릿 세로 / 큰 모바일
   본문을 1단으로 접고, 푸터 사이트맵을 3컬럼으로 접는다. (헤더 모바일 메뉴는 ~991px 블록)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .container { padding: 0 20px; }

  /* 헤더 모바일 메뉴(햄버거·슬라이드 메뉴)는 ~991px 블록으로 옮겼다 (2026-09-29) */

  .sub-head { padding: 40px 0 32px; }
  .sub-cat { font-size: 17px; }
  .sub-title { margin-top: 12px; font-size: 34px; }

  .sub-visual { height: 260px; }

  /* 탭이 많은 카테고리(회사소개 5개)는 가로 스크롤 허용 — 줄바꿈보다 안정적 */
  .sub-tabs-inner {
    height: 56px;
    justify-content: flex-start;
    gap: 28px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sub-tabs-inner::-webkit-scrollbar { display: none; }

  .sub-tab { font-size: 16px; }

  /* 푸터: 사이트맵 3컬럼 + Contact 버튼을 아래로 */
  .footer { padding: 48px 0 16px; }

  .footer-top {
    flex-direction: column;
    padding-bottom: 32px;
  }

  .footer-nav {
    flex-wrap: wrap;
    width: 100%;
    gap: 28px 20px;
  }

  .footer-col { flex: 0 0 calc((100% - 40px) / 3); }

  .footer-col ul { margin-top: 14px; }
  .footer-col li + li { margin-top: 12px; }
  .footer-col a { font-size: 15px; }

  .btn-contact { margin: 28px 0 0; }

  .footer-body {
    flex-direction: column;
    gap: 24px;
    padding: 24px 0 24px;
  }

  /* 세로 구분자를 없애고 항목을 줄바꿈 */
  .footer-info-row {
    flex-wrap: wrap;
    gap: 4px 16px;
  }

  .footer-info-row span + span::before { display: none; }

  .footer-logo { width: 180px; height: auto; }

  .footer-copy { text-align: left; font-size: 13px; }
  .footer-privacy { display: block; margin: 0 0 6px; }

  /* ---- 개인정보처리방침 ---- */
  .pv { padding: 60px 0 90px; }
  .pv-title { margin-bottom: 28px; font-size: 30px; }
  .pv h3 { margin-top: 36px; font-size: 18px; }
  .pv p, .pv li { font-size: 15px; }
  .pv-table table { min-width: 480px; font-size: 14px; }

  /* ---- 메인 ---- */
  .hero { padding: 100px 0 90px; }
  .hero-title { font-size: 42px; line-height: 52px; }
  .hero-sub { margin-top: 12px; font-size: 17px; line-height: 25px; }
  .hero-btns { margin-top: 26px; gap: 12px; }
  .btn-pill { width: 140px; height: 44px; font-size: 14px; }

  .sec-label { font-size: 18px; }
  .sec-title { margin-top: 12px; font-size: 28px; line-height: 40px; }

  .about { padding-top: 80px; }

  /* 4컬럼 → 2컬럼. 각 행의 첫 칸에는 구분선을 두지 않는다 */
  .stats { margin-top: 36px; grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .stat:nth-child(odd)::before { display: none; }
  .stat::before { top: 47px; }
  .stat-en { font-size: 14px; }
  .stat-icon { margin-top: 20px; height: 80px; }
  .stat-num { margin-top: 18px; font-size: 26px; }
  .stat-ko { margin-top: 8px; font-size: 16px; }
  .about-more { margin-top: 40px; }
  .btn-round { width: 160px; height: 54px; font-size: 15px; }

  .business { padding-top: 90px; padding-bottom: 100px; }
  .biz-cards { margin-top: 24px; grid-template-columns: repeat(2, 1fr); }
  .biz-card-link { height: 420px; }
  .biz-card h3 { padding: 20px 20px 0; font-size: 22px; }
  .biz-card p { margin-top: 12px; padding: 0 20px; font-size: 15px; line-height: 23px; }

  /* 터치 기기에는 hover 가 없어 + 아이콘이 뜨지 않는다 — 상시 노출로 전환 */
  .biz-plus { width: 56px; height: 56px; opacity: 1; }
  .biz-plus img { width: 100%; height: 100%; }

  /* 지도 위에 겹쳐두면 지도를 다 가린다 → 오피스 카드를 지도 아래로 내린다.
     핀 좌표(%)를 지키려고 .global-map 은 그대로 두고 카드만 top:100% 로 뺀다 */
  .global-map-area {
    margin-top: 28px;
    height: auto;
    padding: 60px 0 24px;
    background-size: 100% 300px;
  }
  .global-map { max-width: calc(100% - 40px); margin-bottom: 300px; }
  .map-pin { width: 16px; }
  .map-pin img { width: 16px; height: 16px; }
  /* 지도가 좁아지면 핀 간격이 줄어 국가 코드가 서로 겹친다 — 라벨은 감춘다.
     글로벌 네트워크의 핀은 버튼에 aria-label 이 있어 접근성 이름은 유지된다. */
  .map-pin b { display: none; }

  .office-card {
    left: 50%;
    top: calc(100% + 24px);
    transform: translateX(-50%);
    width: min(320px, 100%);
  }
  .office-photo { height: 120px; }

  .brand { padding-top: 90px; }
  .brand .sec-more { margin-top: 24px; }
  .brand-roll { margin-top: 32px; }
  .brand-tile { width: 240px; height: 112px; margin-right: 20px; }

  .news { padding-top: 90px; }
  /* 3열은 너무 좁아진다 → 1열, 높이는 내용에 맞춰 늘리되 화살표 자리를 남긴다 */
  .news-cards { margin-top: 24px; grid-template-columns: 1fr; gap: 16px; }
  .news-card { height: auto; min-height: 0; padding: 32px 28px 96px; }
  .news-card h3 { font-size: 20px; line-height: 26px; }
  .news-card p { margin-top: 12px; font-size: 15px; line-height: 23px; }
  .news-arrow { left: 28px; bottom: 28px; width: 40px; height: 40px; }
  .news .sec-more { margin-top: 32px; }

  .contact { padding-top: 90px; }
  .contact::after { height: 160px; }
  .contact-inner { flex-direction: column; gap: 0; padding-bottom: 90px; }
  .contact-title { margin-top: 12px; font-size: 30px; }
  .contact-desc { margin-top: 14px; font-size: 15px; line-height: 24px; }
  .contact-inner .btn-round { margin-top: 28px; }

  /* ---- 회사개요 ---- */
  .ov-intro { padding: 64px 0 90px; }
  .ov-head { font-size: 34px; line-height: 42px; }
  .ov-band { height: 520px; }
  .ov-symbol { width: 84px; height: 128px; }
  .ov-desc { margin-top: 28px; width: 100%; font-size: 18px; line-height: 30px; }
  /* 데스크톱 시안의 줄바꿈 위치는 좁은 폭에서 어색하다 — 자연스럽게 흐르게 둔다 */
  .ov-desc br { display: none; }

  /* ---- CEO 메세지 ---- */
  .ceo { padding: 64px 0 80px; }
  .ceo-inner { flex-direction: column; gap: 40px; }
  .ceo-txt { width: 100%; }
  .ceo-photo { width: 100%; margin-top: 0; }
  .ceo-photo img { height: 420px; }
  .ceo-head { font-size: 28px; line-height: 40px; }
  .ceo-lead { margin-top: 32px; font-size: 17px; line-height: 28px; }
  .ceo-body { margin-top: 24px; font-size: 15px; line-height: 24px; }
  .ceo-body p + p { margin-top: 24px; }
  .ceo-sign { margin-top: 32px; font-size: 15px; }

  /* ---- 비전·미션 ---- */
  .vm { padding: 48px 0 80px; }
  .vm-title { font-size: 28px; line-height: 40px; }
  .vm-banner { margin-top: 24px; height: 380px; }
  .vm-banner-head { font-size: 34px; line-height: 46px; }
  .vm-banner-sub { margin-top: 16px; width: 100%; font-size: 16px; line-height: 26px; }
  .vm-banner-sub br { display: none; }
  /* 3열은 카드 폭이 너무 좁아진다 → 1열 */
  .vm-cards { margin-top: 40px; grid-template-columns: 1fr; gap: 16px; }
  .vm-card { height: auto; padding: 40px 24px; }
  .vm-ico { height: 120px; }
  .vm-card:nth-child(1) .vm-ico img { width: 122px; height: 104px; margin-top: 9px; }
  .vm-card:nth-child(2) .vm-ico img { width: 145px; height: 104px; margin-top: 9px; }
  .vm-card:nth-child(3) .vm-ico img { width: 145px; height: 120px; }
  .vm-card-ko { margin-top: 20px; font-size: 24px; }
  .vm-card-en { margin-top: 10px; font-size: 15px; }
  .vm-card-desc { margin-top: 14px; font-size: 15px; line-height: 23px; }

  /* ---- 연혁 ----
     교차 배치는 좁은 폭에서 읽기 어렵다 → 선을 왼쪽으로 옮기고 전부 좌측 정렬 1열로 */
  .hist { padding: 48px 0 80px; }
  .hist-title { font-size: 28px; line-height: 40px; }
  .hist-sub { font-size: 15px; line-height: 24px; }
  .tl { margin-top: 48px; }
  .tl::before { left: 5px; top: 16px; height: var(--tl-fill, 200px); transform: none; }
  .tl-item { grid-template-columns: 1fr; column-gap: 0; padding-left: 30px; }
  .tl-item .tl-body { grid-column: 1; text-align: left; }
  .tl-item + .tl-item { margin-top: 56px; }
  .tl-item::before { left: 5px; top: 16px; transform: translate(-50%, -50%); }
  .tl-item::after { left: 5px; top: 16px; bottom: -72px; transform: none; }
  .tl-date { font-size: 24px; line-height: 32px; }
  .tl-en { margin-top: 8px; font-size: 15px; line-height: 21px; }
  .tl-desc { margin-top: 6px; font-size: 15px; line-height: 22px; }

  /* ---- 글로벌 네트워크 ----
     카드를 지도 위에 겹치면 지도를 다 가린다 → 지도 아래로 내린다 (메인 Global 과 같은 처리) */
  .gn { padding-top: 48px; }
  .gn-title { font-size: 28px; line-height: 40px; }
  .gn-sub { font-size: 15px; line-height: 24px; }
  .gn-map-area {
    margin-top: 40px;
    height: auto;
    padding: 50px 0 24px;
    background-size: 100% 300px;
  }
  .gn-map { margin-bottom: 360px; }
  .gn-card {
    left: 50%;
    top: calc(100% + 24px);
    transform: translateX(-50%);
    width: min(330px, 100%);
    height: auto;
    padding-bottom: 24px;
  }
  .gn-card-photo { height: 150px; }
  .gn-contact { padding-top: 90px; }

  /* ---- 화장품 유통 ---- */
  .cos-hero { padding-top: 48px; }
  .cos-title { font-size: 28px; line-height: 40px; }
  .cos-hero-img { margin-top: 24px; height: 380px; padding-top: 150px; }
  .cos-hero-head { font-size: 34px; line-height: 44px; }
  .cos-hero-sub { margin-top: 16px; width: 100%; font-size: 16px; line-height: 26px; }
  .cos-hero-sub br { display: none; }

  /* 2단 → 1단 (이미지가 아래로) */
  .cos-ov { padding-top: 80px; }
  .cos-ov-inner { flex-direction: column; }
  .cos-ov-txt { padding: 0 0 32px; width: 100%; }
  .cos-ov-head { font-size: 28px; line-height: 40px; }
  .cos-ov-desc { margin-top: 20px; font-size: 15px; line-height: 24px; }
  .cos-ov-desc br { display: none; }
  .cos-ov-media { width: 100%; }
  .cos-ov-img { height: 300px; }

  .cos-brands { padding-top: 90px; padding-bottom: 90px; }
  .cos-process--solo { padding-top: 90px; }
  .cos-brands-head { font-size: 28px; line-height: 40px; }
  .cos-roll { margin-top: 32px; }
  .cos-swiper { height: 150px; }
  .cos-tile { width: 160px; height: 74px; }
  .cos-swiper--square .cos-tile { width: 74px; height: 74px; }

  /* 4열은 라벨이 뭉개진다 → 2열 */
  .cos-process-head { font-size: 28px; line-height: 40px; }
  .pr-steps { margin-top: 32px; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .pr-ill { height: 200px; }
  .pr-label { height: 52px; font-size: 17px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
  .cos-contact { padding-top: 90px; }

  /* ---- 게시판 ----
     좁은 폭에서 4열은 제목이 뭉개진다 → 번호·조회수를 숨기고 제목/등록일만 남긴다 */
  .bd { padding: 48px 0 80px; }
  .bd-title { font-size: 28px; line-height: 40px; }
  .bd-head { margin-top: 32px; flex-direction: column; align-items: stretch; gap: 12px; }
  .bd-filter { margin-top: 22px; gap: 10px; }
  .bd-filter + .bd-head { margin-top: 32px; }
  .bd-filter a { width: 80px; height: 32px; font-size: 15px; }
  .bd-search { width: 100%; }
  .bd-select { width: 96px; padding: 0 14px; }
  .bd-input { flex: 1; width: auto; padding: 0 14px; }
  .bd-select select, .bd-input input { font-size: 15px; }
  .bd-table { margin-top: 20px; font-size: 15px; }
  /* 번호·조회수 열은 0폭으로 접는다. 셀 자체를 display:none 으로 지우면
     table-layout:fixed + colgroup 조합에서 남은 셀이 앞 컬럼으로 밀려
     제목이 0폭 컬럼(.bd-col-no)에 들어가 사라진다 — 셀은 남기고 폭만 0. */
  .bd-col-no, .bd-col-hit { width: 0; }
  .bd-table th:first-child, .bd-table td:first-child,
  .bd-table th:last-child,  .bd-table td:last-child {
    padding: 0;
    overflow: hidden;
    white-space: nowrap;   /* 0폭에서 글자가 세로로 쪼개져 행 높이를 밀지 않게 */
    visibility: hidden;
  }
  .bd-col-date { width: 100px; }
  .bd-table th { height: 48px; }
  .bd-table td { height: 52px; }
  .bd-subject { padding: 0 12px 0 4px; }   /* 말줄임이 등록일에 붙지 않게 */
  .bd-pager { margin-top: 40px; gap: 18px; }

  /* 카드 3열 → 1열 */
  .bd--card { padding-bottom: 80px; }
  .bd-cards { margin-top: 32px; grid-template-columns: 1fr; gap: 32px; }
  .bd-card-thumb { height: 240px; }
  .bd-card-title { margin-top: 14px; font-size: 17px; line-height: 25px; }
  .bd-card-date { margin-top: 8px; font-size: 14px; }
  .bd-cards + .bd-pager { margin-top: 40px; }

  /* ---- 게시판 상세 ---- */
  .nv { padding: 48px 0 80px; }
  .nv-article { margin-top: 40px; }
  .nv-title { font-size: 20px; line-height: 30px; }
  .nv-meta { gap: 16px; flex-wrap: wrap; font-size: 13px; }
  .nv-body { margin-top: 16px; padding-top: 28px; font-size: 15px; line-height: 23px; }
  .nv-body p + p { margin-top: 23px; }
  .nv-body-img { height: 260px; margin-bottom: 20px; }
  .nv-tags-label { width: 100%; margin: 0 0 4px; }
  .nv-nav-row { height: auto; padding: 16px 0; font-size: 15px; }
  .nv-more { margin-top: 40px; }

  /* ---- 파트너쉽 문의 ---- 좌우 2단 → 1단 */
  .cf { padding: 48px 0 80px; }
  .cf-inner { flex-direction: column; gap: 32px; }
  .cf-intro { margin-top: 0; }
  .cf-intro h3 { font-size: 24px; line-height: 34px; }
  .cf-intro p { margin-top: 12px; font-size: 16px; line-height: 25px; }
  .cf-form { width: 100%; }
  .cf-field + .cf-field { margin-top: 28px; }
  .cf-label { font-size: 16px; line-height: 34px; }
  .cf-form input, .cf-form select { height: 52px; padding: 0 14px; font-size: 15px; }
  .cf-form textarea { height: 180px; padding: 14px; font-size: 15px; line-height: 26px; }
  .cf-selectbox.is-narrow { width: 100%; }
  .cf-agree { flex-wrap: wrap; font-size: 15px; }
  .cf-agree a { margin-left: 0; width: 100%; padding-left: 26px; }
  .cf-submit { margin-top: 28px; }
  .cf-submit .btn-round { width: 100%; height: 52px; }

  /* ---- 오시는 길 ---- 좌우 2단 → 1단(사진이 위) */
  .lc { padding: 48px 0 80px; }
  .lc-title { font-size: 28px; line-height: 40px; }
  .lc-top { margin-top: 40px; flex-direction: column-reverse; gap: 28px; }
  .lc-txt { margin-top: 0; width: 100%; }
  .lc-txt h4 { font-size: 26px; line-height: 34px; }
  .lc-list { margin-top: 24px; }
  .lc-row { height: auto; align-items: flex-start; font-size: 15px; line-height: 24px; }
  .lc-row + .lc-row { margin-top: 16px; }
  .lc-row i { width: 26px; height: 26px; }
  .lc-row dt { width: 96px; margin-left: 10px; }
  .lc-photo { width: 100%; }
  .lc-photo img { height: 240px; }
  .lc-map { margin-top: 32px; }
  .lc-map iframe { height: 300px; }

  /* 지사 정보 — 사진을 본문 위로 쌓는다 */
  .br { padding: 40px 0 80px; }
  .br-title { font-size: 28px; line-height: 40px; }
  .br-list { margin-top: 40px; }
  .br-item { flex-direction: column; gap: 24px; padding: 36px 0 40px; }
  .br-photo { width: 100%; margin-top: 0; }
  .br-photo img { height: 240px; }
  .br-head h4 { font-size: 26px; line-height: 34px; }
  .br-ask { font-size: 15px; gap: 8px; }
  .br-info { margin-top: 8px; padding-top: 16px; }
  .br-row { align-items: flex-start; font-size: 15px; line-height: 24px; }
  .br-row + .br-row { margin-top: 14px; }
  .br-row dt { width: 96px; margin-left: 0; }
  .br-mapbtn { margin-top: 20px; }
  .br-mapbtn button { width: 124px; height: 44px; font-size: 15px; }
  .br-map { margin-top: 14px; }
  .br-map img, .br-map iframe { height: 220px; }

  /* 브랜드 > 공식 유통 화장품 — 2단 → 1단 (텍스트 → 사진) */
  .bc { padding-top: 64px; }
  .bc-inner { flex-direction: column; gap: 40px; }
  .bc-txt { width: 100%; }
  .bc-photo { width: 100%; margin-top: 0; }
  .bc-photo img { height: 480px; }
  .bc-head { font-size: 28px; line-height: 40px; }
  .bc-points { margin-top: 32px; font-size: 17px; line-height: 28px; }
  .bc-desc { margin-top: 24px; font-size: 15px; line-height: 24px; }
  .bc-gallery { padding: 64px 0 80px; }
  .bc-card { width: 260px; margin-right: 12px; }
  .bc-card img { height: 346px; }
}

/* --------------------------------------------------------------------------
   ~480px — 모바일
   푸터 사이트맵 2컬럼, 타이포 최소 축약.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .container { padding: 0 16px; }

  /* 오프캔버스 메뉴 글자는 768 값을 유지한다 (좁아도 읽혀야 한다) */
  .logo img { width: 148px; }
  .lang { display: none; }   /* 로고+문의하기+햄버거가 한 줄에 들어가야 한다 */
  .btn-inquiry { width: 96px; height: 36px; font-size: 14px; }
  .gnb .depth2 > li > a { font-size: 14px; }

  .sub-head { padding: 32px 0 24px; }
  .sub-cat { font-size: 15px; }
  .sub-title { margin-top: 10px; font-size: 26px; }

  .sub-visual { height: 180px; }

  .sub-tabs-inner { height: 50px; gap: 22px; }
  .sub-tab { font-size: 15px; }

  .footer-col { flex: 0 0 calc((100% - 20px) / 2); }
  .footer-col-title { font-size: 16px; }
  .footer-col a { font-size: 14px; }

  .footer-info-row { font-size: 13px; }
  .footer-logo { width: 156px; }

  /* ---- 메인 ---- */
  .hero { padding: 70px 0 60px; }
  .hero-title { font-size: 30px; line-height: 38px; }
  .hero-sub { margin-top: 10px; font-size: 14px; line-height: 21px; }
  .hero-btns { margin-top: 20px; gap: 10px; }
  .btn-pill { width: 128px; height: 40px; font-size: 13px; }

  .sec-label { font-size: 15px; }
  .sec-title { margin-top: 10px; font-size: 22px; line-height: 32px; }

  .about { padding-top: 60px; }
  .stats { margin-top: 28px; row-gap: 32px; }
  .stat::before { top: 34px; }
  .stat-en { font-size: 13px; }
  .stat-icon { margin-top: 16px; height: 64px; }
  .stat-num { margin-top: 14px; font-size: 22px; }
  .stat-ko { font-size: 14px; }
  .about-more { margin-top: 32px; }
  .btn-round { width: 148px; height: 48px; font-size: 14px; }

  .business { padding-top: 70px; padding-bottom: 70px; }
  .biz-cards { margin-top: 20px; gap: 10px; }
  .biz-card-link { height: 320px; }
  .biz-card h3 { padding: 16px 16px 0; font-size: 18px; }
  .biz-card p { margin-top: 10px; padding: 0 16px; font-size: 13px; line-height: 20px; }

  .biz-plus { width: 44px; height: 44px; }

  .global-map-area { padding-top: 40px; background-size: 100% 220px; }
  .global-map { margin-bottom: 280px; }
  .map-pin { width: 13px; }
  .map-pin img { width: 13px; height: 13px; }

  .office-card { width: 100%; }
  .office-photo { height: 104px; }
  .office-body { padding: 14px 16px 18px; }
  .office-dl { grid-template-columns: 40px 1fr; font-size: 13px; }

  .brand { padding-top: 70px; }
  .brand-roll { margin-top: 24px; }
  .brand-tile { width: 190px; height: 88px; margin-right: 14px; border-radius: 4px; }

  .news { padding-top: 70px; }
  .news-card { padding: 26px 20px 84px; }
  .news-card h3 { font-size: 18px; line-height: 24px; }
  .news-card p { font-size: 14px; line-height: 22px; }
  .news-arrow { left: 20px; bottom: 24px; width: 36px; height: 36px; }

  .contact { padding-top: 70px; }
  .contact::after { height: 120px; }
  .contact-inner { padding-bottom: 70px; }
  .contact-title { font-size: 24px; }
  .contact-desc { font-size: 14px; line-height: 22px; }

  /* ---- 회사개요 ---- */
  .ov-intro { padding: 44px 0 60px; }
  .ov-head { font-size: 24px; line-height: 32px; }
  .ov-band { height: 400px; }
  .ov-symbol { width: 64px; height: 98px; }
  .ov-desc { margin-top: 20px; font-size: 15px; line-height: 26px; }

  /* ---- CEO 메세지 ---- */
  .ceo { padding: 44px 0 60px; }
  .ceo-inner { gap: 28px; }
  .ceo-photo img { height: 300px; }
  .ceo-head { font-size: 22px; line-height: 32px; }
  .ceo-lead { margin-top: 24px; font-size: 15px; line-height: 25px; }
  .ceo-body { margin-top: 20px; font-size: 14px; line-height: 23px; }
  .ceo-body p + p { margin-top: 20px; }
  .ceo-sign { margin-top: 24px; font-size: 14px; }

  /* ---- 비전·미션 ---- */
  .vm { padding: 36px 0 60px; }
  .vm-title { font-size: 22px; line-height: 32px; }
  .vm-banner { height: 280px; }
  .vm-banner-head { font-size: 24px; line-height: 34px; }
  .vm-banner-sub { margin-top: 12px; font-size: 14px; line-height: 22px; }
  .vm-card { padding: 32px 16px; }
  .vm-ico { height: 96px; }
  .vm-card:nth-child(1) .vm-ico img { width: 98px; height: 83px; margin-top: 7px; }
  .vm-card:nth-child(2) .vm-ico img { width: 116px; height: 83px; margin-top: 7px; }
  .vm-card:nth-child(3) .vm-ico img { width: 116px; height: 96px; }
  .vm-card-ko { margin-top: 16px; font-size: 20px; }
  .vm-card-en { font-size: 14px; }
  .vm-card-desc { font-size: 14px; line-height: 22px; }
  .vm-card-desc br { display: none; }

  /* ---- 연혁 ---- */
  .hist { padding: 36px 0 60px; }
  .hist-title { font-size: 22px; line-height: 32px; }
  .hist-sub { font-size: 14px; line-height: 22px; }
  .tl { margin-top: 36px; }
  .tl::before { top: 14px; height: var(--tl-fill, 170px); }
  .tl-item { padding-left: 24px; }
  .tl-item + .tl-item { margin-top: 44px; }
  .tl-item::before { top: 14px; }
  .tl-item::after { top: 14px; bottom: -58px; }
  .tl-date { font-size: 20px; line-height: 28px; }
  .tl-en { font-size: 14px; line-height: 20px; }
  .tl-desc { font-size: 14px; line-height: 21px; }

  /* ---- 글로벌 네트워크 ---- */
  .gn { padding-top: 36px; }
  .gn-title { font-size: 22px; line-height: 32px; }
  .gn-sub { font-size: 14px; line-height: 22px; }
  .gn-map-area { margin-top: 28px; padding-top: 36px; background-size: 100% 220px; }
  .gn-map { margin-bottom: 340px; }
  .gn-card { width: 100%; }
  .gn-card-photo { height: 120px; }
  .gn-card-body { padding: 14px 16px 0; }
  .gn-dl { grid-template-columns: 54px 1fr; font-size: 13px; line-height: 19px; }
  .gn-contact { padding-top: 70px; }

  /* ---- 화장품 유통 ---- */
  .cos-hero { padding-top: 36px; }
  .cos-title { font-size: 22px; line-height: 32px; }
  .cos-hero-img { margin-top: 20px; height: 280px; padding-top: 105px; }
  .cos-hero-head { font-size: 24px; line-height: 32px; }
  .cos-hero-sub { margin-top: 12px; font-size: 14px; line-height: 22px; }

  .cos-ov { padding-top: 60px; }
  .cos-ov-head { font-size: 22px; line-height: 32px; }
  .cos-ov-desc { font-size: 14px; line-height: 23px; }
  .cos-ov-img { height: 220px; }

  .cos-brands { padding-top: 70px; padding-bottom: 70px; }
  .cos-process--solo { padding-top: 70px; }
  .cos-brands-head { font-size: 22px; line-height: 32px; }
  .cos-roll { margin-top: 24px; }
  .cos-swiper { height: 104px; }
  .cos-tile { width: 110px; height: 51px; }
  .cos-swiper--square .cos-tile { width: 51px; height: 51px; }

  .cos-process-head { font-size: 22px; line-height: 32px; }
  .pr-steps { margin-top: 24px; gap: 16px 10px; }
  .pr-ill { height: 140px; }
  .pr-label { height: 44px; font-size: 15px; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%); }
  .cos-contact { padding-top: 70px; }

  /* ---- 게시판 ---- */
  .bd { padding: 36px 0 60px; }
  .bd-title { font-size: 22px; line-height: 32px; }
  .bd-table { font-size: 14px; }
  .bd-col-date { width: 88px; }
  .bd-table th { height: 44px; }
  .bd-table td { height: 48px; }
  .bd-select { width: 84px; }
  .bd-select select, .bd-input input { font-size: 14px; }
  .bd-filter { gap: 8px; }
  .bd-filter a { width: 72px; height: 30px; font-size: 14px; }

  .bd--card { padding-bottom: 60px; }
  .bd-cards { margin-top: 24px; gap: 24px; }
  .bd-card-thumb { height: 200px; }
  .bd-card-title { font-size: 16px; line-height: 24px; }

  /* ---- 게시판 상세 ---- */
  .nv { padding: 36px 0 60px; }
  .nv-title { font-size: 18px; line-height: 27px; }
  .nv-body { font-size: 14px; line-height: 22px; }
  .nv-body p + p { margin-top: 22px; }
  .nv-body-img { height: 200px; }
  .nv-nav-row { font-size: 14px; }
  .nv-tags a { padding: 0 10px; font-size: 12px; }

  /* ---- 파트너쉽 문의 ---- */
  .cf { padding: 36px 0 60px; }
  .cf-intro h3 { font-size: 20px; line-height: 30px; }
  .cf-intro p { font-size: 15px; line-height: 24px; }
  .cf-label { font-size: 15px; line-height: 30px; }
  .cf-form input, .cf-form select { height: 48px; font-size: 14px; }
  .cf-form textarea { height: 160px; font-size: 14px; }
  .cf-agree { font-size: 14px; }

  /* ---- 오시는 길 ---- */
  .lc { padding: 36px 0 60px; }
  .lc-title { font-size: 22px; line-height: 32px; }
  .lc-txt h4 { font-size: 22px; line-height: 30px; }
  .lc-row { font-size: 14px; line-height: 22px; }
  .lc-row i { width: 22px; height: 22px; }
  .lc-row dt { width: 84px; }
  .lc-photo img { height: 200px; }
  .lc-map iframe { height: 240px; }

  /* 지사 정보 — 지역명과 문의 링크를 두 줄로 */
  .br-title { font-size: 22px; line-height: 32px; }
  .br-item { padding: 28px 0 32px; }
  .br-photo img { height: 200px; }
  .br-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .br-head h4 { font-size: 22px; line-height: 30px; }
  .br-ask { font-size: 14px; }
  .br-row { font-size: 14px; line-height: 22px; }
  .br-row dt { width: 78px; }
  .br-mapbtn button { width: 112px; height: 40px; font-size: 14px; }
  .br-map img, .br-map iframe { height: 170px; }

  /* 브랜드 > 공식 유통 화장품 */
  .bc { padding-top: 44px; }
  .bc-inner { gap: 28px; }
  .bc-photo img { height: 360px; }
  .bc-head { font-size: 22px; line-height: 32px; }
  .bc-points { margin-top: 24px; font-size: 15px; line-height: 25px; }
  .bc-desc { margin-top: 20px; font-size: 14px; line-height: 23px; }
  .bc-gallery { padding: 44px 0 60px; }
  .bc-card { width: 220px; }
  .bc-card img { height: 293px; }
}

/* --------------------------------------------------------------------------
   동작 최소화 선호 — 브랜드 로고 띠 정지
   (브레이크포인트 쿼리는 아니지만 @media 이므로 규약에 따라 이 파일에 둔다)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .brand-track,
  .bc-track { animation: none; }
  .gnb .depth1 > li::before,
  .gnb-link,
  .gnb .depth2,
  .gnb .depth2 > li > a,
  .gnb .depth2 > li > a > span::after,
  .gnb-bg,
  .ham-btn span { transition: none; }
  .gnb { transition: none; }
  .gn-map .map-pin::after,
  .global-map .map-pin::after { animation: none; opacity: 0; }
  /* .gn-card.is-on (0,2,0) 이 더 구체적이라 일반 선언으로는 안 꺼진다.
     접근성 차단이므로 !important 로 확실히 끈다. */
  .gn-card,
  .gn-card.is-on,
  .office-card,
  .office-card.is-on {
    transition: none !important;
    translate: none !important;
    scale: none !important;
  }
}