.main-sub-menu { 
    position:absolute; 
    width:100%; 
    height:90px; 
    bottom:0px;
    background-color:rgba(0,0,0,0.5) ;
    padding-top:10px;
    z-index:9
}

.main-sub-menu  li {  position:relative; font-size:20px; ; letter-spacing:-1px; line-height:30px; font-family:'Noto Sans';}

.main-sub-menu-text { font-family:'Noto Sans'; font-size:20px;   color:#FFF;font-family:'Noto Sans demi'}
.main-sub-menu-text a {color:#FFF; text-decoration:none}
.main-sub-menu-text li {padding:0px; padding:25px 55px 0px 55px; height:73px;}


.div-sub-menu-bar {width:80px;height:8px; background-color:#FFF}

/*
.li-sub-menu-item{
    width:220px;
    flex:0 0 220px;
    text-align:center;
}

.li-sub-menu-item a{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
}
    */



.main-sub-menu li.active::after{
    content:'';
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-12px;
    font-weight:bold;
    width:40%;
    height:7px;
    background:#fff;
}

.main-sub-menu li.active > a{
  
  font-family:'Noto Sans Bold';
  font-weight:bold;
}


.main-sub-bg-gray-radius{
    background:#ffffff;
    border:1px solid #efe9dc;
    border-left:4px solid #b98a34;
    border-radius:14px;
    box-shadow:0 22px 55px -34px rgba(20,16,8,.28);
}


.main-sub-certification-title-small {font-size:22px; font-family:'Noto Sans bold'}
.main-sub-certification-text {font-size:17px; letter-spacing:-1px; line-height:25px; font-family:'Noto Sans'}
/* [2026-08-10] 인증 카드 hover 애니메이션 (레이아웃 4/4 유지) */
.certWrap{ border-radius:10px; transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease; }
.certWrap:hover{ transform:translateY(-8px); box-shadow:0 24px 50px -24px rgba(0,0,0,.35); }
/* [2026-08-10 #2] 인증 이미지·글 등장 애니메이션 */
.certWrap, .main-sub-certification-title-small, .main-sub-certification-text{ animation:certFadeUp .7s cubic-bezier(.22,1,.36,1) both; }
@keyframes certFadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }


.cont > .section_address {display:none!important}

/* ============================================================
   [2026-08-09] 서브 섹션 탭: 헤더 컬러(브라운골드 밴드) 위 애니메이션 탭 버튼
   전 게시판 공통. 배경(검정 오버레이) 제거 → 헤더 밴드 색이 그대로 비침. 메인 미적용.
   ============================================================ */
.main-sub-menu{ background-color:transparent !important; height:auto !important; padding:0 0 22px !important; }
.main-sub-menu-text{ gap:clamp(6px,3vw,44px); }
.main-sub-menu-text li{ padding:10px 6px !important; height:auto !important; }
.li-sub-menu-item a{ position:relative; display:inline-block; padding:8px 12px; font-size:20px; color:rgba(255,255,255,.7) !important; border-radius:9px; transition:color .28s ease, background .28s ease, transform .28s ease; }
.li-sub-menu-item a:hover{ color:#fff !important; background:rgba(255,255,255,.07); transform:translateY(-1px); }
.li-sub-menu-item a::after{ content:''; position:absolute; left:12px; right:12px; bottom:0; height:2px; border-radius:2px; background:#DDBD7E; transform:scaleX(0); transform-origin:right; transition:transform .34s cubic-bezier(.22,1,.36,1); }
.li-sub-menu-item a:hover::after{ transform:scaleX(1); transform-origin:left; }
.li-sub-menu-item.active a{ color:#fff !important; font-weight:700; }
.li-sub-menu-item.active a::after{ transform:scaleX(1); }
/* 기존 흰색 언더바 제거 */
.main-sub-menu li.active::after{ display:none !important; }

/* ============================================================
   [2026-08-09 batch16] 서브 헤더 화이트 배경 대응 — 탭 & 상단바 다크 톤
   (탭은 서브 전용, 상단바는 .main-wrap 스코프라 메인 미영향)
   ============================================================ */
/* 탭: 블랙 헤더 위 골드 텍스트 */
.li-sub-menu-item a{ color:rgba(221,189,126,.72) !important; }
.li-sub-menu-item a:hover{ color:#f0d9a8 !important; background:rgba(221,189,126,.08); }
.li-sub-menu-item.active a{ color:#f0d9a8 !important; font-weight:700; }
/* 서브페이지 상단바(nav)만 골드 톤 (메인 미영향: .main-wrap 스코프) */
.main-wrap .nav .main-menu-bar{ background:rgba(18,16,13,.5) !important; border-color:rgba(221,189,126,.24) !important; }
.main-wrap .nav .nav__logo img{ filter:brightness(0) saturate(100%) invert(80%) sepia(45%) saturate(480%) hue-rotate(357deg) brightness(95%) contrast(88%) !important; }
.main-wrap .nav .menu>li>a{ color:#DDBD7E !important; }
.main-wrap .nav .menu>li:hover>a, .main-wrap .nav .menu>li:focus-within>a{ color:#f2dcaa !important; }
.main-wrap .nav .nav__search-btn,
.main-wrap .nav .nav__lang-btn,
.main-wrap .nav .nav__login>a{ border-color:rgba(221,189,126,.5) !important; color:#DDBD7E !important; }
.main-wrap .nav .nav__search-btn:hover,
.main-wrap .nav .nav__lang-btn:hover,
.main-wrap .nav .nav__login>a:hover{ background:#DDBD7E !important; border-color:#DDBD7E !important; color:#141110 !important; }
.main-wrap .nav .nav__burger{ color:#DDBD7E !important; }

/* ============================================================
   [2026-08-09 batch17] 서브 탭: 버튼식(흰 pill) + 활성 골드 / 언더라인 제거
   ============================================================ */
.main-sub-menu-text{ gap:12px !important; }
.main-sub-menu-text li{ padding:8px 4px !important; }
.li-sub-menu-item a{ background:#ffffff !important; color:#3a3a3a !important; border-radius:24px !important; padding:11px 24px !important; font-weight:600 !important; box-shadow:0 8px 20px -12px rgba(0,0,0,.5); transition:background .25s ease, color .25s ease, transform .25s ease; }
.li-sub-menu-item a:hover{ background:#f4ead2 !important; color:#141110 !important; transform:translateY(-1px); }
.li-sub-menu-item.active a{ background:#DDBD7E !important; color:#141110 !important; font-weight:700 !important; }
.li-sub-menu-item a::after{ display:none !important; }

/* ============================================================
   [2026-08-10 batch18] 서브 헤더 화이트 복원 (메인 제외) — 상단바 다크 톤 + 탭 밑줄형(20→18)
   ============================================================ */
/* [2026-08-10] nav 캡슐만 블랙 + 글자 골드 (페이지 배경 흰색 유지, 메인 제외) */
.main-wrap .nav .main-menu-bar{ background:#121212 !important; border-color:rgba(221,189,126,.28) !important; }
.main-wrap .nav .nav__logo img{ filter:brightness(0) saturate(100%) invert(80%) sepia(45%) saturate(480%) hue-rotate(357deg) brightness(95%) contrast(88%) !important; }
.main-wrap .nav .menu>li>a{ color:#DDBD7E !important; }
.main-wrap .nav .menu>li:hover>a, .main-wrap .nav .menu>li:focus-within>a{ color:#f2dcaa !important; }
.main-wrap .nav .nav__search-btn,
.main-wrap .nav .nav__lang-btn,
.main-wrap .nav .nav__login>a{ border-color:rgba(221,189,126,.5) !important; color:#DDBD7E !important; }
.main-wrap .nav .nav__search-btn:hover,
.main-wrap .nav .nav__lang-btn:hover,
.main-wrap .nav .nav__login>a:hover{ background:#DDBD7E !important; border-color:#DDBD7E !important; color:#141110 !important; }
.main-wrap .nav .nav__burger{ color:#DDBD7E !important; }
.main-wrap .nav .nav__user-name{ color:#fff !important; }
/* 탭: 흰 pill → 밑줄형(underline) 다크, 2pt 작게 */
.main-sub-menu-text{ gap:clamp(12px,3.4vw,50px) !important; }
.main-sub-menu-text li{ padding:10px 4px !important; }
.li-sub-menu-item a{ position:relative !important; background:transparent !important; color:#5f5f5f !important; border-radius:0 !important; padding:10px 6px !important; font-size:18px !important; font-weight:600 !important; box-shadow:none !important; transition:color .25s ease; }
.li-sub-menu-item a:hover{ background:transparent !important; color:#141414 !important; transform:none !important; }
.li-sub-menu-item.active a{ background:transparent !important; color:#141414 !important; font-weight:700 !important; }
.li-sub-menu-item a::after{ display:block !important; content:'' !important; position:absolute; left:6px; right:6px; bottom:-2px; height:2px; border-radius:2px; background:#DDBD7E; transform:scaleX(0); transform-origin:right; transition:transform .34s cubic-bezier(.22,1,.36,1); }
.li-sub-menu-item a:hover::after, .li-sub-menu-item.active a::after{ transform:scaleX(1) !important; transform-origin:left; }

/* [2026-08-12] 서브탭 전 페이지 좌측정렬 + 상단 GMN 로고 시작점에 맞춤 + 탭 간격 30px 고정 */
.main-sub-menu{ justify-content:flex-start !important; }
.main-sub-menu ._subMenuList.main-sub-menu-text{ box-sizing:border-box !important; width:1440px !important; max-width:100% !important; margin:0 auto !important; padding-left:32px !important; gap:30px !important; justify-content:flex-start !important; }
.main-sub-menu-text > li:first-child{ padding-left:0 !important; }
.main-sub-menu-text > li:first-child > a{ padding-left:0 !important; }
.main-sub-menu-text > li:first-child > a::after{ left:0 !important; }

/* [2026-08-10 #3] 페이지 제목·설명 등장 애니메이션 (전 서브페이지 통일) */
.main-sub-title{ animation:gmnSubFadeUp .7s cubic-bezier(.22,1,.36,1) both; }
.main-sub-text{ animation:gmnSubFadeUp .7s cubic-bezier(.22,1,.36,1) .1s both; }
@keyframes gmnSubFadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ============================================================
   [2026-08-10 #3-2] 전 서브 섹션 제목 → 공지사항(SUPPORT) 폼 통일
   좌측정렬 + 골드 eyebrow (회사소개/프로젝트/협업문의 등 모두)
   ============================================================ */
.main-sub-title{ position:relative; display:block; text-align:left !important; font-family:'Noto Sans bold'; font-size:40px !important; color:#141110 !important; letter-spacing:-1px; line-height:1.25; }
.main-sub-title::before{ content:'GMN'; display:block; font-family:'Noto Sans bold'; font-size:16.5px; letter-spacing:.16em; color:#b98a34; margin-bottom:9px; text-transform:uppercase; }
.main-sub-title[data-en]::before{ content:attr(data-en); }
.main-sub-title.mst-c{ text-align:center !important; }
.main-sub-title.mst-c ~ .main-sub-text{ text-align:center !important; }
.main-sub-text{ display:block; text-align:left !important; margin-top:8px !important; color:#8a8a8a !important; font-size:16px !important; line-height:1.6; }

/* ============================================================
   [2026-08-27] 서브페이지 모바일 (≤720px 전용 · 데스크톱 무변경)

   이 파일에는 모바일 분기가 없어 서브 13페이지가 데스크톱 값 그대로
   폰에 표시되고 있었다. 본문 24px, 좌우 여백 118px, 탭 컨테이너 1440px 고정 등.
   화면 기준: 좌우 20px / 본문 16px·1.7 / 보조 14~15px / 제목 22~26px /
   대표 제목 30px 이하 / 터치 44px / 섹션 간격 48~72px.
   ============================================================ */
@media (max-width:720px){

  /* ---------- 페이지 대표 제목 ---------- */
  .main-sub-title{
    font-size:28px !important;
    line-height:1.3;
    letter-spacing:-.03em;
    word-break:keep-all;
  }
  .main-sub-title::before{ font-size:12px; letter-spacing:.14em; margin-bottom:6px; }
  .main-sub-text{
    font-size:15px !important;
    line-height:1.7;
    margin-top:10px !important;
    word-break:keep-all;
  }

  /* ---------- 서브 탭 ----------
     데스크톱은 1440px 고정 폭이라 폰에서 화면을 벗어난다.
     화면 폭에 맞추고, 탭이 많은 페이지는 가로로 밀어 볼 수 있게 한다. */
  .main-sub-menu{ padding:0 0 16px !important; }
  .main-sub-menu ._subMenuList.main-sub-menu-text{
    width:100% !important;
    padding-left:20px !important;
    padding-right:20px !important;
    gap:20px !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .main-sub-menu ._subMenuList.main-sub-menu-text::-webkit-scrollbar{ display:none; }
  .main-sub-menu-text > li{ flex:0 0 auto; padding:0 !important; }
  .li-sub-menu-item a{
    font-size:16px !important;
    padding:11px 2px !important;
    min-height:44px;              /* 터치 영역 */
    line-height:22px;
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
  }

  /* ---------- 본문 박스 ----------
     부트스트랩 p-5(48px) + ps-7(70px) 이 걸려 있어 안쪽 폭이 195px 밖에
     남지 않았다. 그 상태에서 본문이 24px 이라 여덟 글자씩 끊겼다. */
  .main-sub-bg-gray-radius{
    padding:24px 20px !important;
    border-radius:12px !important;
    border-left-width:3px !important;
  }
  .main-sub-text-24{
    font-size:16px !important;
    line-height:1.7 !important;
    letter-spacing:-.01em !important;
    word-break:keep-all;
  }
  .main-sub-text-24 b,
  .main-sub-text-24 .txt-em{ font-weight:600; }   /* 과한 굵기 완화 */

  /* ---------- 고정 폭 컨테이너 ---------- */
  .main-content-container,
  .main-content-container-1440,
  .main-content-container-1447,
  .main-content-container-1450,
  .main-content-container-1640{
    width:100% !important;
    max-width:100% !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }
  .main-content-container-padding-100{ padding-top:52px !important; }
  .main-content-container-padding-90 { padding-top:48px !important; }
  .main-content-container-padding-80 { padding-top:48px !important; }
  .main-content-container-padding-70 { padding-top:44px !important; }

  /* ---------- 인증 카드 ---------- */
  .main-sub-certification-title-small{ font-size:17px !important; line-height:1.4 !important; }
  .main-sub-certification-text{ font-size:15px !important; line-height:1.7 !important; letter-spacing:-.01em !important; word-break:keep-all; }

  /* ---------- 이미지 ---------- */
  .main-wrap img{ max-width:100%; height:auto; }

  /* Swiper 는 슬라이드 폭을 인라인 px 로 박아 넣는다. 화면이 그보다 좁아지면
     이미지가 화면 밖으로 나가므로 상한을 걸어둔다. (비율은 유지) */
  .swiper{ max-width:100%; overflow:hidden; }
  .swiper-slide{ max-width:100% !important; }
  .swiper-slide img{ width:100%; height:auto; display:block; }
}

/* [2026-08-27] 마지막 탭이 화면 오른쪽으로 넘쳐 잘려 보이던 문제.
   가로로 미는 목록이므로 끝에 여백을 둬 마지막 항목까지 온전히 보이게 한다. */
@media (max-width:720px){
  .main-sub-menu ._subMenuList.main-sub-menu-text{ padding-right:24px !important; }
  .main-sub-menu ._subMenuList.main-sub-menu-text::after{ content:''; flex:0 0 4px; }
}

/* ============================================================
   [2026-08-27] 모바일 상단바 고정 (≤720px 전용)

   기존 상단바는 position:absolute 라 스크롤하면 위로 사라져,
   메뉴를 쓰려면 페이지 맨 위까지 되돌아가야 했다.

   내리면 숨고 올리면 나타나는 방식으로 고정한다. 읽는 동안에는
   화면을 다 쓰고, 메뉴가 필요하면 살짝 올리기만 하면 된다.
   맨 위에서는 원래 자리 그대로 두어 첫인상은 바뀌지 않는다.
   서브 탭은 고정하지 않는다. 둘 다 붙이면 화면 위쪽을 계속 뺏긴다.
   ============================================================ */
@media (max-width:720px){

  body.gmn-nav-fixed .nav{
    position:fixed !important;
    top:8px !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    transform:none !important;
    transition:transform .28s cubic-bezier(.22,1,.36,1);
  }
  /* 아래로 내리는 동안에는 감춘다 */
  body.gmn-nav-fixed.gmn-nav-up .nav{
    transform:translateY(calc(-100% - 16px)) !important;
  }
  /* 고정 상태에서는 캡슐을 조금 낮춰 화면을 덜 차지하게 */
  body.gmn-nav-fixed .nav .main-menu-bar{
    height:56px !important;
    border-radius:56px !important;
  }
  /* 메뉴가 열려 있으면 항상 보이게 */
  body.mnav-open .nav{ transform:none !important; }
}

/* ============================================================
   [2026-08-27] 서브페이지 상단바 — 메인과 동일 기준 (≤720px 전용)
   메인은 캡슐을 없애고 우측 햄버거만 남겼는데 서브는 캡슐이 그대로였다.
   두 곳의 기준을 맞춘다.
   주의: 상단바 스타일은 gmnNav.css 에 있고 그 파일이 이 파일보다 뒤에
        로드되며 `.nav .main-menu-bar` 로 더 구체적이다. 여기서 덮는다.
   ============================================================ */
@media (max-width:720px){

  .nav{
    top:12px !important;
    left:auto !important;
    right:12px !important;
    width:auto !important;
    transform:none !important;
  }
  /* 서브 전용 규칙 `.main-wrap .nav .main-menu-bar{background:#121212!important}` 가
     더 구체적이라 같은 구체성으로 맞춰 덮는다. */
  .main-wrap .nav .main-menu-bar,
  .nav .main-menu-bar{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    height:auto !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  /* [2026-08-28] 로고는 홈 버튼으로 되살린다.
     서브는 페이지 배경이 흰색이므로 검정 로고로 간다. (메인은 흰색) */
  .main-wrap .nav .nav__logo,
  .nav .nav__logo{
    display:flex !important;
    align-items:center;
    height:44px;
    padding:0 4px;
  }
  .main-wrap .nav .nav__logo img{
    height:19px !important;
    width:auto !important;
    filter:none !important;       /* 골드 필터 해제 */
  }
  .main-wrap .nav .nav__burger,
  .nav .nav__burger{
    display:flex !important;
    width:44px; height:44px;
    margin-left:0 !important;
    border-radius:50%;
    background:rgba(18,18,20,.34);
    border:1px solid rgba(221,189,126,.30);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  body.mnav-open .nav .nav__burger{ background:transparent; border-color:transparent; backdrop-filter:none; }

  /* 캡슐이 사라졌으므로 고정 시 높이 보정도 필요 없다 */
  body.gmn-nav-fixed .nav .main-menu-bar{ height:auto !important; border-radius:0 !important; background:transparent !important; }
  /* 햄버거 원형 배경도 서브 전용 규칙에 밀리지 않게 */
  /* 서브는 페이지 배경이 흰색이다. 메인(어두운 사진 위)과 달리
     반투명 검정 원을 두면 회색 덩어리로 튄다. 배경 없이 선만 남긴다. */
  .main-wrap .nav .nav__burger{
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    color:#141110 !important;
  }
  .main-wrap .nav .nav__burger span{ background:#141110 !important; }
  body.mnav-open .main-wrap .nav .nav__burger{ background:transparent !important; border-color:transparent !important; }
}

/* ============================================================
   [2026-08-28] 서브페이지 공통 모바일 시스템
   전 서브페이지(16개)에 동시 적용되는 규칙만 여기 둔다.
   페이지별 예외는 각 그룹 CSS(gmnCustomer/gmnWorks/…)에서 최소한으로 처리한다.
   ============================================================ */
@media (max-width:720px){

  /* ---------- ① 헤더 아래 빈 공간 ----------
     서브 상단 래퍼는 인라인 height:232px 이 박혀 있다(전 서브페이지 공통 include).
     상단바 하단이 56px 이므로 서브내비까지 116px 이 통째로 빈 공간이었다.
     래퍼 안에는 흰 밴드(.sub-hero-band)와 서브내비뿐이라 줄여도 잃는 것이 없다.
     146px = 서브내비(60px) + 상단바 아래 여백(30px) + 상단바(56px). */
  .main-wrap > .position-relative[style]{ height:146px !important; }

  /* ---------- ② 서브 내비게이션 ----------
     항목이 4개인 페이지(고객센터)는 320px 에서 마지막 항목이 잘렸다.
     좁은 화면에서만 글자·간격을 줄여 한 화면에 들어오게 한다. */
  .main-sub-menu ._subMenuList.main-sub-menu-text{ gap:16px !important; }
  .li-sub-menu-item a{ padding:11px 4px !important; }

  /* ---------- ③ 본문 하단 여백 ----------
     플로팅 버튼(우측 하단)에 마지막 줄이 가리지 않도록 숨 쉴 공간을 둔다. */
  .main-sub-bg-white > .main-content-container:last-child,
  .main-wrap .pb-10{ padding-bottom:72px !important; }
}

/* 좁은 화면 전용 — 서브내비 4항목이 320px 에 들어가도록 */
@media (max-width:360px){
  .main-sub-menu ._subMenuList.main-sub-menu-text{
    gap:12px !important; padding-left:16px !important; padding-right:16px !important; }
  .li-sub-menu-item a{ font-size:15px !important; padding:11px 2px !important; }
}

/* [2026-08-28] 부트스트랩 간격 유틸의 모바일 보정.
   pt-6(60px)·pb-300(300px) 같은 데스크톱 값이 폰에서는 화면 하나를 통째로 비웠다.
   섹션 간 리듬(48~72px) 안으로 들여놓는다. */
@media (max-width:720px){
  .main-wrap .pt-6{ padding-top:32px !important; }
  .main-wrap .pt-7{ padding-top:24px !important; }
  .main-wrap .pt-9{ padding-top:32px !important; }
  .main-wrap .pb-10{ padding-bottom:72px !important; }
  .main-wrap .pb-300{ padding-bottom:80px !important; }
}

/* ============================================================
   [2026-08-28 #2] 상단 간격 추가 축소 + 줄바꿈 규칙 통일
   ============================================================ */
@media (max-width:720px){
  /* 146px → 130px. 상단바 하단(56px)에서 서브내비까지 14px.
     로고 줄과 메뉴 줄이 한 덩어리로 읽히도록 붙인다. */
  .main-wrap > .position-relative[style]{ height:130px !important; }
  .main-sub-menu{ padding:0 0 12px !important; }

  /* 줄바꿈 통일 — 한국어는 단어 중간에서 끊으면 읽기가 나빠진다.
     어느 서브페이지든 같은 규칙으로 단어 단위로 끊는다. */
  .main-wrap h1, .main-wrap h2, .main-wrap h3, .main-wrap h4,
  .main-wrap p, .main-wrap li, .main-wrap dd, .main-wrap dt,
  .main-wrap td, .main-wrap th,
  .main-wrap .main-sub-title, .main-wrap .main-sub-text{
    word-break:keep-all;
    overflow-wrap:break-word;   /* 긴 URL·영문만 예외적으로 끊기 */
  }
}

/* [2026-08-28 #3] 서브내비 → 본문 시작 간격.
   컨테이너 상단 여백이 48~52px 이라 서브내비에서 제목까지 94px 이 떴다.
   페이지를 열자마자 내용이 눈에 들어오도록 34px 로 통일한다. */
@media (max-width:720px){
  .main-content-container-padding-100,
  .main-content-container-padding-90,
  .main-content-container-padding-80,
  .main-content-container-padding-70{ padding-top:34px !important; }
}

/* [2026-08-28 #4] pt-5(48px) 보정 — 상세 페이지에서 서브내비와 첫 콘텐츠 사이가
   pt-5 48px + 섹션 28px = 82px 로 떴다. 다른 페이지 리듬(48px)에 맞춘다. */
@media (max-width:720px){
  .main-wrap .pt-5{ padding-top:20px !important; }
}

/* ============================================================
   [2026-08-28 #5] 서브내비 — 항목이 많은 페이지에서 마지막 항목이 잘리던 문제
   회사소개는 항목이 5개(금마니 소개·대표 인사말·인증ㆍ특허·뉴스·오시는 길)라
   한 줄에 415px 이 필요해 화면(375px) 밖으로 나갔다.
   가로로 밀 수는 있었지만, 밀어야 보인다는 것 자체가 잘린 것으로 읽힌다.
   → 가로 스크롤 대신 줄바꿈을 허용해 어느 화면에서도 전 항목이 보이게 한다.
   ============================================================ */
@media (max-width:720px){
  .main-sub-menu ._subMenuList.main-sub-menu-text{
    flex-wrap:wrap !important;
    overflow-x:visible !important;
    justify-content:flex-start !important;
    column-gap:18px !important;
    row-gap:0 !important;
    padding-right:20px !important;
  }
  .main-sub-menu ._subMenuList.main-sub-menu-text::after{ display:none !important; }
  .main-sub-menu{ padding:0 0 10px !important; }
  /* 두 줄이 될 수 있으므로 상단 래퍼 높이를 내용에 맡긴다 */
  .main-wrap > .position-relative[style]{
    height:auto !important; min-height:130px !important;
    padding-top:74px !important; padding-bottom:12px !important; }
  .main-sub-menu{ position:static !important; }
}

/* [2026-08-28 #6] 큰 하단 여백 유틸 보정.
   pb-14 는 140px 이다. 여기에 컨테이너 72px 이 더해져 제출 버튼과 푸터 사이가
   212px — 화면 한 개의 4분의 1이 통째로 비었다. 폰에서는 그만한 여백이 필요 없다. */
@media (max-width:720px){
  .main-wrap .pb-11, .main-wrap .pb-12, .main-wrap .pb-13,
  .main-wrap .pb-14, .main-wrap .pb-15, .main-wrap .pb-16,
  .main-wrap .pb-20{ padding-bottom:48px !important; }
  .main-wrap .main-content-container-padding-90,
  .main-wrap .main-content-container{ padding-bottom:40px !important; }
}

/* ============================================================
   [2026-08-28 #7] 스크롤을 올릴 때 상단바가 본문 위에 겹쳐 보이던 문제
   원인: 고정될 때(.gmn-nav-fixed) main-menu-bar 가 background:transparent 라
         로고와 햄버거가 배경 없이 본문 글자 위에 그대로 얹혔다.
   조치: 고정 상태에서만 화면 폭 전체를 덮는 흰 띠를 둔다.
         서브페이지는 배경이 흰색이라 색이 튀지 않는다.
         메인페이지는 gmnSub.css 를 읽지 않으므로 영향이 없다.
   ============================================================ */
@media (max-width:720px){
  body.gmn-nav-fixed .nav{
    top:0 !important;
    left:0 !important;
    right:0 !important;
    padding:0 12px;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(180%) blur(10px);
    backdrop-filter:saturate(180%) blur(10px);
    border-bottom:1px solid rgba(20,17,16,.07);
    box-shadow:0 1px 12px rgba(20,17,16,.05);
  }
  body.gmn-nav-fixed .nav .main-menu-bar{
    height:52px !important;
    background:transparent !important;
  }
  /* 띠가 생겼으므로 아래로 내릴 때 감추는 거리도 그에 맞춘다 */
  body.gmn-nav-fixed.gmn-nav-up .nav{
    transform:translateY(-100%) !important;
  }
}

/* [2026-08-28 #8] 서브 보조설명(.main-sub-text) 줄바꿈 정리
   본문에 데스크톱용 <br> 이 박혀 있어 폰에서 엉뚱한 곳이 끊기고,
   좌우 여백이 없어 글자가 화면 끝에 닿았다.
   폰에서는 강제 줄바꿈을 풀고, 읽기 좋은 줄 길이로 가운데 모은다. */
@media (max-width:720px){
  .main-sub-text{
    padding-left:20px; padding-right:20px;
    /* [수정] 32ch 로 묶으니 266px 밖에 안 돼 "기반 플랫폼" 처럼 끝줄이 토막났다.
       화면 폭을 그대로 쓰되 balance 로 각 줄 길이를 고르게 맞춘다. */
    max-width:none; margin-left:auto; margin-right:auto;
    text-wrap:balance; word-break:keep-all;
  }
  .main-sub-text br{ display:none; }
}


/* ════════════════════════════════════════════════════════════
   [2026-08-28] 서브페이지 모바일 디자인 시스템
   ────────────────────────────────────────────────────────────
   적용 범위
     · 서브페이지 콘텐츠 영역만. 메인페이지는 이 파일을 읽지 않는다.
     · 햄버거(.mnav)와 푸터(.gm-footer)는 .main-wrap 안에 있으므로
       선택자에서 반드시 제외한다. 아래 규칙은 콘텐츠 요소만 직접 지목한다.
   설계 원칙
     · 장식(테두리·그림자·배경색·금색 선)을 기본값으로 쓰지 않는다.
     · 위계는 타이포와 여백으로 만든다.
     · 페이지마다 임의의 크기·간격을 만들지 않고 아래 단계만 사용한다.
   ════════════════════════════════════════════════════════════ */
@media (max-width:720px){

  /* ── 토큰 ── (푸터·햄버거는 이 이름을 쓰지 않으므로 영향 없음) */
  .main-wrap{
    --pad:20px;              /* 콘텐츠 좌우 여백 */
    --t-page:26px;           /* 페이지 제목 */
    --t-sec:21px;            /* 섹션 제목 */
    --t-lead:15px;           /* 리드 카피 */
    --t-body:16px;           /* 본문 */
    --t-cap:13px;            /* 캡션·메타 */
    --s-page:30px;           /* 서브내비 → 페이지 제목 */
    --s-tl:10px;             /* 제목 → 설명 */
    --s-lv:24px;             /* 설명 → 비주얼 */
    --s-vb:30px;             /* 비주얼 → 본문 */
    --s-sec:56px;            /* 섹션 → 섹션 */
    --s-para:16px;           /* 문단 → 문단 */
  }

  /* ── 서브 내비게이션 (공통 컴포넌트) ──
     여러 줄로 떨어뜨리지 않는다. 한 줄 가로 스크롤 + 현재 위치 표시.
     콘텐츠보다 약하게 보이도록 글자는 작고 회색, 현재만 진하게. */
  .main-sub-menu{
    position:static !important;
    height:auto !important;
    padding:0 !important;
    background:transparent !important;
    border-bottom:1px solid rgba(20,17,16,.08);
  }
  .main-sub-menu ._subMenuList.main-sub-menu-text{
    display:flex !important;
    flex-wrap:nowrap !important;         /* 줄바꿈 금지 */
    justify-content:flex-start !important;
    width:100% !important;
    margin:0 !important;
    padding:0 var(--pad) !important;
    column-gap:20px !important;
    row-gap:0 !important;
    overflow-x:auto !important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .main-sub-menu ._subMenuList.main-sub-menu-text::-webkit-scrollbar{ display:none; }
  .main-sub-menu ._subMenuList.main-sub-menu-text::after{ content:''; flex:0 0 var(--pad); }
  .main-sub-menu-text > li{ flex:0 0 auto; padding:0 !important; scroll-snap-align:start; }
  .li-sub-menu-item a{
    display:inline-flex !important; align-items:center;
    min-height:44px;                      /* 터치 영역 */
    padding:0 1px !important;
    font-size:14.5px !important; font-weight:500 !important;
    letter-spacing:-.02em; white-space:nowrap;
    color:rgba(20,17,16,.42) !important;
    border-radius:0;
  }
  .li-sub-menu-item.active a{
    color:#141110 !important; font-weight:700 !important;
  }
  .li-sub-menu-item a::after{
    left:0 !important; right:0 !important; bottom:0 !important;
    height:2px !important; background:#B98A34 !important;
  }
  .li-sub-menu-item:not(.active) a::after{ transform:scaleX(0) !important; }

  /* ── 페이지 머리 ── */
  .main-wrap > .position-relative[style]{
    height:auto !important; min-height:0 !important;
    padding-top:56px !important; padding-bottom:0 !important;
  }
  .main-sub-title{
    font-size:var(--t-page) !important;
    line-height:1.28 !important; letter-spacing:-.035em;
    font-weight:700; word-break:keep-all;
  }
  /* 영문 라벨(About GMN 등)은 제목을 한 번 더 말하는 장식이다.
     폰에서는 핵심 콘텐츠보다 먼저 나오지 않도록 감춘다. */
  .main-sub-title::before{ display:none !important; }
  .main-sub-text{
    font-size:var(--t-lead) !important;
    line-height:1.65 !important;
    margin-top:var(--s-tl) !important;
    color:#8a8a8a !important;
    padding-left:0; padding-right:0;
    max-width:none; text-wrap:balance; word-break:keep-all;
  }
  .main-sub-text br{ display:none; }

  /* ── 콘텐츠 폭 ── */
  .main-content-container,
  .main-content-container-1440,
  .main-content-container-1447,
  .main-content-container-1450,
  .main-content-container-1640{
    padding-left:var(--pad) !important;
    padding-right:var(--pad) !important;
  }
  .main-content-container-padding-100,
  .main-content-container-padding-90,
  .main-content-container-padding-80,
  .main-content-container-padding-70{ padding-top:var(--s-page) !important; }

  /* ── 비주얼: 화면 끝까지 ──
     이미지는 브랜드를 가장 강하게 보여주는 자산이다. 20px 안에 가두지 않는다. */
  .main-content-container > .d-flex:has(> .swiper),
  .gmn-bleed{
    margin-left:calc(var(--pad) * -1) !important;
    margin-right:calc(var(--pad) * -1) !important;
    padding-top:var(--s-lv) !important;
  }
}

/* [2026-08-28 #9] 제목·리드 정렬
   주의: 이 사이트의 CSS 로드 순서는 gmnCompany(5) → gmnCommon(6) → gmnSub(7) → gmnNav(8) 이다.
   페이지별 파일(gmnCompany)이 먼저 오므로, 공통 파일의 !important 를 이기지 못한다.
   따라서 공통 규칙을 덮는 결정은 반드시 이 파일(gmnSub) 이후에 둔다.

   서브내비·본문이 왼쪽 기준인데 제목만 가운데라 축이 두 개로 읽혔다.
   폰에서는 하나의 축으로 모은다. (데스크톱은 기존 가운데 정렬 그대로) */
@media (max-width:720px){
  .main-wrap .main-sub-title.mst-c{ text-align:left !important; }
  .main-wrap .main-sub-title.mst-c ~ .main-sub-text{ text-align:left !important; }
  .main-wrap .main-sub-bg-white.text-center{ text-align:left !important; }
}

/* [2026-08-28 #10] 본문 강조가 font-weight 가 아니라
   font-family:'Noto Sans bold' 로 걸려 있어 굵기 조절이 먹지 않았다.
   한 문단에 네 번씩 볼드체가 들어가 글이 얼룩덜룩했다.
   폰에서는 본문과 같은 서체를 쓰고 색으로만 구분한다. */
@media (max-width:720px){
  .main-wrap .main-sub-text-24 b,
  .main-wrap .main-sub-text-24 .txt-em,
  .main-wrap .main-sub-text-24 strong{
    font-family:'Noto Sans' !important;
    font-weight:600 !important;
    color:#141110 !important;
  }
}

/* [2026-08-28 #11] 마지막 섹션이 푸터에 붙어 있었다(간격 0).
   콘텐츠와 푸터 사이에 숨 쉴 공간을 둔다. */
@media (max-width:720px){
  .main-wrap .main-content-container-full{ padding-bottom:56px !important; }
  .main-wrap .who-wrap{ padding-bottom:56px !important; }
}

/* [2026-08-28 #12] 본문 카드 완전 해제 + 섹션 간격 정리
   앞서 gmnCompany 에서 배경·테두리만 지웠는데 box-shadow 가 남아
   카드 윤곽이 그대로 보였다. 로드 순서상 padding·radius 도 밀렸다.
   (로드 순서: gmnCompany(5) → gmnCommon(6) → gmnSub(7) → gmnNav(8))
   공통 파일인 여기에서 한 번에 끝낸다. */
@media (max-width:720px){
  .main-wrap .main-sub-bg-gray-radius{
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    padding:0 !important;
  }
  /* 비주얼 → 본문 */
  .main-wrap .main-content-container .pt-7:has(> .main-sub-bg-gray-radius){
    padding-top:30px !important;
  }
  /* 본문 → 다음 섹션. 앞 섹션 하단(48px)과 who-wrap 상단(56px)이 겹쳐 120px 이 떴다. */
  .main-wrap .main-sub-bg-white.pb-14{ padding-bottom:0 !important; }
  .main-wrap .who-wrap{ padding-top:56px !important; }
}


/* ════════════════════════════════════════════════════════════
   [2026-08-28 최종] 서브페이지 모바일 레이아웃 — 전면 재설계
   ────────────────────────────────────────────────────────────
   앞선 블록들은 개별 요소를 하나씩 손보다 보니 패딩이 겹쳐 쌓였다.
   (컨테이너 하단 72px + who-wrap 상단 56px = 128px 처럼)
   여기서 간격을 한 체계로 다시 정의하고, 겹치는 값은 0 으로 눌러 없앤다.

   적용 범위: .main-wrap 하위. 메인페이지에는 .main-wrap 이 없으므로 닿지 않는다.
             .mnav(햄버거)·.gm-footer(푸터)는 선택자에 넣지 않는다.
   원칙:      특정 기기 폭에 맞춘 고정값·음수 마진을 쓰지 않는다.
             모든 간격은 아래 8px 배수 스케일에서만 고른다.
   ════════════════════════════════════════════════════════════ */
@media (max-width:720px){

  .main-wrap{
    --pad:20px;
    --sp-1:8px; --sp-2:12px; --sp-3:16px;
    --sp-4:24px; --sp-5:32px; --sp-6:40px; --sp-7:48px;
  }

  /* ── 1. 섹션 리듬 ──
     세로 간격은 "섹션 시작"에서만 준다. 끝에서 또 주지 않는다.
     이렇게 해야 두 값이 더해져 화면 절반이 비는 일이 생기지 않는다. */
  .main-wrap .main-content-container,
  .main-wrap .main-content-container-1440,
  .main-wrap .main-content-container-1447,
  .main-wrap .main-content-container-1450,
  .main-wrap .main-content-container-1640{
    width:100% !important; max-width:100% !important;
    padding-left:var(--pad) !important; padding-right:var(--pad) !important;
    padding-top:0 !important; padding-bottom:0 !important;
  }
  .main-wrap .main-content-container-padding-100,
  .main-wrap .main-content-container-padding-90,
  .main-wrap .main-content-container-padding-80,
  .main-wrap .main-content-container-padding-70{
    padding-top:var(--sp-6) !important;
    padding-bottom:0 !important;
  }
  .main-wrap .main-sub-bg-white{ padding-top:0 !important; padding-bottom:0 !important; }
  .main-wrap .main-content-container-full{ padding:0 !important; }
  /* 부트스트랩 간격 유틸이 섹션 리듬 위에 다시 얹히지 않게 한다 */
  .main-wrap .pt-1,.main-wrap .pt-3,.main-wrap .pt-4,.main-wrap .pt-5,
  .main-wrap .pt-6,.main-wrap .pt-7,.main-wrap .pt-9{ padding-top:0 !important; }
  .main-wrap .pb-10,.main-wrap .pb-14,.main-wrap .pb-300{ padding-bottom:0 !important; }

  /* ── 2. 페이지 머리 ── */
  .main-wrap > .position-relative[style]{
    height:auto !important; min-height:0 !important;
    padding-top:52px !important; padding-bottom:0 !important;
  }
  .main-wrap .main-sub-title{
    font-size:24px !important; line-height:1.3 !important;
    letter-spacing:-.035em; font-weight:700;
    margin:0 !important; word-break:keep-all;
  }
  .main-wrap .main-sub-text{
    font-size:14.5px !important; line-height:1.6 !important;
    margin:var(--sp-1) 0 0 !important; padding:0 !important;
    color:#8a8a8a !important; max-width:none; text-wrap:balance; word-break:keep-all;
  }

  /* ── 3. 첫 이미지 ──
     화면을 다 먹지 않도록 비율과 상한을 둔다.
     폭이 넓어져도 비율로 따라가므로 기기마다 값을 따로 잡지 않는다. */
  .main-wrap .main-content-container > .d-flex:has(> .swiper){
    display:block !important;
    margin-left:calc(var(--pad) * -1) !important;
    margin-right:calc(var(--pad) * -1) !important;
    padding-top:var(--sp-4) !important;
  }
  .main-wrap .mySwiper .swiper-slide img{
    width:100%; height:auto; display:block;
    aspect-ratio:3/2; max-height:min(260px, 34vh);
    object-fit:cover; border-radius:0 !important;
  }
  .main-wrap .mySwiper .swiper-pagination{ margin-top:var(--sp-2); }

  /* ── 4. 본문 ──
     15px / 1.72 로 낮춰 같은 내용이 차지하는 면적을 줄인다. */
  .main-wrap .main-sub-bg-gray-radius{
    background:transparent !important; border:0 !important;
    border-radius:0 !important; box-shadow:none !important;
    padding:var(--sp-5) 0 0 !important;
  }
  .main-wrap .main-sub-text-24{
    font-size:15px !important; line-height:1.72 !important;
    letter-spacing:-.015em !important; color:#4a4744 !important;
    word-break:keep-all;
  }

  /* ── 5. 서브 내비게이션 ──
     한 줄 가로 스크롤임을 오른쪽 페이드로 분명히 알린다. */
  .main-wrap .main-sub-menu{
    position:relative !important;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  }

  /* ── 6. 플로팅 버튼 ──
     콘텐츠를 계속 가리지 않도록 서브페이지에서만 작게 줄인다.
     기능은 그대로 두고 크기와 간격만 조정한다. */
  body:has(.main-wrap) .floating-menu{ gap:6px !important; right:8px !important; }
  body:has(.main-wrap) .floating-btn{ width:40px !important; height:40px !important; }
  body:has(.main-wrap) .floating-btn img{ max-width:24px !important; max-height:24px !important; }
  body:has(.main-wrap) .floating-btn.kakao-circle img{ max-width:21px !important; max-height:21px !important; }
  body:has(.main-wrap) .floating-btn img.chatbot-icon-img{ max-width:30px !important; max-height:30px !important; }
  body:has(.main-wrap) .top-btn{ font-size:10.5px !important; }
  /* TOP 은 속이 찬 글자라 같은 크기여도 아이콘보다 무겁게 보인다.
     글자 상자가 29.1px(버튼의 73%)로 카카오(20px, 50%)보다 훨씬 컸다.
     .top-label 이 gmnCommon 에서 font-size:14px 을 직접 들고 있어 위 .top-btn 값이 먹지 않는다.
     라벨을 직접 12.5px 로 내려 26px 대(65%)로 맞춘다. */
  body:has(.main-wrap) .top-btn .top-label{ font-size:12.5px !important; }
}

/* ── 7. WHO WE ARE ──
   제목 → 설명 → 지표 2×2 가 하나의 정보 블록으로 읽히게 한다.
   섹션 위아래 간격은 여기서 한 번만 준다(앞 섹션은 하단 0). */
@media (max-width:720px){
  .main-wrap .who-wrap{
    padding:var(--sp-7) var(--pad) var(--sp-7) !important;
    text-align:left !important;
  }
  .main-wrap .who-wrap > .main-sub-title{
    font-size:20px !important; letter-spacing:.01em;
    padding:0 !important;
  }
  .main-wrap .who-wrap > .main-sub-text{
    padding:0 !important; margin-top:var(--sp-2) !important;
  }
  .main-wrap .who-wrap > .pt-5{ padding-top:var(--sp-5) !important; }

  .main-wrap .who-stats{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    height:auto !important;
    gap:var(--sp-5) var(--sp-3) !important;
    padding:0 !important;
  }
  .main-wrap .who-item{
    width:auto !important; min-width:0 !important; flex:none !important;
    display:flex; flex-direction:column; align-items:flex-start;
    text-align:left !important;
  }
  .main-wrap .who-num{
    display:flex; align-items:baseline; gap:2px;
    font-size:32px !important; line-height:1 !important;
    letter-spacing:-.04em; color:#141110 !important;
    font-variant-numeric:tabular-nums;
  }
  .main-wrap .who-num span{
    font-size:13px !important; font-weight:500; margin:0 !important;
    color:#B98A34 !important; -webkit-text-fill-color:#B98A34;
  }
  .main-wrap .who-text{
    font-size:12.5px !important; padding-top:var(--sp-1) !important;
    margin:0; color:#8a8a8a !important; letter-spacing:-.02em; word-break:keep-all;
  }
  /* 지도는 숫자 뒤로 완전히 물러난다 */
  .main-wrap .who-background::before{
    background-size:230% auto !important;
    background-position:center 60% !important;
    opacity:.16 !important;
  }
  .main-wrap .who-line{ display:none !important; }
}

/* [2026-08-28 최종 #2] 남은 두 가지
   1) 이미지 모서리 22px 는 .swiper-slide 에 걸려 있었다(이미지가 아니라).
      화면 끝까지 쓰는 비주얼이므로 각지게 둔다.
   2) 이미지→본문 사이에 .pt-7(30px) 과 본문 자체 패딩(32px) 이 겹쳐 62px 이 됐다.
      간격은 한 곳에서만 준다. 섹션 간격도 40px 로 통일한다. */
@media (max-width:720px){
  .main-wrap .mySwiper .swiper-slide{ border-radius:0 !important; overflow:hidden; }

  .main-wrap .main-content-container .pt-7:has(> .main-sub-bg-gray-radius){
    padding-top:0 !important;
  }
  .main-wrap .main-sub-bg-gray-radius{ padding:var(--sp-5) 0 0 !important; }
  .main-wrap .who-wrap{ padding-top:var(--sp-6) !important; }
}

/* [2026-08-28 최종 #3] 본문 → 다음 섹션 간격 정리
   본문 블록과 WHO 섹션 사이에 여러 래퍼의 하단 여백이 남아 겹쳐 있었다.
   사이에 있는 래퍼의 하단 여백을 전부 0 으로 두고,
   섹션 간격은 who-wrap 한 곳에서만 준다(--sp-6, 40px). */
@media (max-width:720px){
  .main-wrap .main-sub-bg-white > .main-content-container,
  .main-wrap .main-content-container > .pt-7,
  .main-wrap .main-content-container-1440,
  .main-wrap .main-sub-bg-gray-radius{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
  }
  .main-wrap .main-sub-bg-white{ margin-bottom:0 !important; }
  .main-wrap .who-wrap{ padding-top:var(--sp-6) !important; }
}

/* [2026-08-28 최종 #4] WHO WE ARE 지표를 한 줄(4열)로.
   320~430px 어디서든 자연스럽게 줄어들도록 고정값 대신 clamp 를 쓴다.
   가장 긴 값이 "3,850"(5자) 이고 라벨은 "누적 납품 건수"(7자) 라
   숫자는 화면폭 비례로, 라벨은 두 줄까지 허용해 균형을 맞춘다. */
@media (max-width:720px){
  .main-wrap .who-stats{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:0 clamp(6px,2.4vw,14px) !important;
    align-items:start;
  }
  .main-wrap .who-num{
    font-size:clamp(17px,5.6vw,24px) !important;
    gap:1px;
  }
  .main-wrap .who-num span{
    font-size:clamp(9.5px,2.8vw,12px) !important;
  }
  .main-wrap .who-text{
    font-size:clamp(10px,3vw,12px) !important;
    line-height:1.35 !important;
    padding-top:6px !important;
    word-break:keep-all;
  }
}

/* [2026-08-28 최종 #5] 섹션 경계와 WHO 내부 리듬
   문제: 본문 → WHO 간격이 56px 인데 본문 문단 간격이 26px 이라 2.2배밖에 안 됐다.
        주제가 바뀌는 자리인데 문단이 하나 더 이어지는 것처럼 읽혔다.
        WHO 안쪽도 제목→설명 12px, 설명→지표 16px 로 붙어 한 덩어리로 뭉쳤다.
   기준: 섹션 경계는 문단 간격의 3배 이상. 블록 안에서는 제목·설명·지표가
        각각 다른 층으로 읽히도록 단계를 벌린다. */
@media (max-width:720px){
  /* 섹션 경계 56 → 80px (문단 26px 대비 3.1배) */
  .main-wrap .who-wrap{ padding-top:64px !important; }

  /* 제목 → 설명 12 → 16px */
  .main-wrap .who-wrap > .main-sub-text{ margin-top:16px !important; }

  /* 설명 → 지표 16 → 36px : 숫자가 독립된 정보 단위로 보이게 */
  .main-wrap .who-wrap > .pt-5{ padding-top:36px !important; }
}

/* [2026-08-28 최종 #6] 지표 4개 간격이 들쭉날쭉해 보이던 문제
   칸 폭은 77px 로 같았지만 내용 길이가 달라(128개 / 3,850개 / 86.4% / 42%)
   각 칸에 남는 여백이 제각각이라 옆 항목과의 간격이 불규칙하게 읽혔다.
   칸 안에서 가운데로 모으면 남는 여백이 좌우로 균등하게 나뉘어 리듬이 맞는다. */
@media (max-width:720px){
  .main-wrap .who-item{
    align-items:center !important;
    text-align:center !important;
  }
  .main-wrap .who-num{ justify-content:center; }
  .main-wrap .who-text{ text-align:center !important; }
}




/* ════════════════════════════════════════════════════════════
   [2026-08-28] 서브페이지 하단 여백 — 푸터에 글이 붙어 끊기는 것 방지
   (대표 인사말 되돌리기 때 함께 지워졌던 공용 규칙을 복구)
   padding 은 다른 규칙과 경쟁하다 계속 밀렸다. ::after 로 빈 블록을
   깔면 덮어쓰기 경쟁이 없어 어느 페이지에서도 확실하다.
   푸터 바로 앞의 "콘텐츠 블록"에만 붙인다(서브헤더에 걸리면 상단이 벌어진다).
   ════════════════════════════════════════════════════════════ */
@media (max-width:720px){
  /* [2026-08-28 수정] :last-of-type 은 "형제 중 마지막 div" 를 뜻한다.
     주가지수 페이지는 푸터 뒤에도 .floating-menu 등 div 가 더 있어
     본문 블록이 마지막 div 가 아니었고, 스페이서가 아예 붙지 않았다.
     푸터 자체에 윗여백을 주면 구조와 상관없이 항상 간격이 생긴다.
     (푸터의 모양·색·내부 여백은 건드리지 않는다) */
  .main-wrap .gm-footer{ margin-top:56px; }
  .main-wrap > .main-sub-bg-white:last-of-type::after,
  .main-wrap > .main-content-container-full:last-of-type::after{
    content:none;
  }
}


/* ============================================================
   [2026-08-29] 상단 로고와 서브메뉴 사이 간격 (≤720px)
   로고 영역이 12~56px, 서브메뉴가 52px 에서 시작해 4px 겹쳐 있었다.
   서브메뉴를 내려 로고와 떨어뜨린다. 전 서브페이지 공통이다.
   ============================================================ */
@media (max-width:720px){
  .main-wrap .main-sub-menu{ padding-top:16px !important; }
}


/* ============================================================
   [2026-08-29] 모바일에서 페이지 제목·보조설명 제거 (≤720px)

   바로 위 서브내비에 페이지 이름이 이미 있다.
   좁은 화면에서 같은 말을 두 번 쓰고 첫 화면을 잡아먹을 이유가 없다.
   제목 블록(제목 + 보조설명)을 통째로 숨기고, 비는 자리만큼
   본문을 위로 올려 서브내비와의 간격을 다시 잡는다.

   대상: 콘텐츠 컨테이너의 첫 자식 중 .main-sub-title 을 품은 블록.
   페이지 중간의 섹션 제목(예: 금마니 소개의 WHO WE ARE)은 첫 자식이
   아니므로 그대로 남는다.
   ============================================================ */
@media (max-width:720px){
  .main-wrap .main-content-container > div:first-child:has(> .main-sub-title){
    display:none !important;
  }
  /* 제목이 사라진 만큼 본문 시작을 올린다.
     제목 블록 다음 요소가 페이지마다 자기 여백을 또 갖고 있어
     서브내비까지 간격이 41 / 67 / 137px 로 제각각이었다.
     그 여백을 지우고 컨테이너 한 곳에서만 간격을 준다. */
  .main-wrap .main-sub-bg-white:first-of-type .main-content-container{
    padding-top:32px !important;
  }
  .main-wrap .main-content-container > div:first-child:has(> .main-sub-title) + *{
    padding-top:0 !important;
    margin-top:0 !important;
  }
  .main-wrap .main-content-container > div:first-child:has(> .main-sub-title) + * > .root_daum_roughmap{
    margin-top:0 !important;
  }
}

/* [2026-08-29] 제목이 사라졌으니 제목과 붙어 있던 여백도 없앤다.
   인증·특허 81px, 오시는 길 67px 로 남아 있어 41px 로 맞춘다. */
@media (max-width:720px){
  .main-wrap .certGridWrap{ margin-top:0 !important; }
  /* :first-of-type 는 형제 중 첫 div 를 뜻해 이 페이지에서는 안 걸렸다 */
  .main-wrap .root_daum_roughmap{ margin-top:0 !important; }
}