.greeting-box{
    display:inline-block;
    font-size:20px;    
    line-height:59px;
    color:#222;
 
    word-spacing:-1.2px;
    font-family:'Noto Sans'
}

.greeting-box p{
    margin:0 0 3px;
}



.greeting-box .title{
    font-size:30px;
    letter-spacing:-0.5px;

}


.greeting-box .speak{
   
    letter-spacing:-1px;

}



.greeting-box .title > .sign{
    font-size:36px;
    font-family:'Noto Sans Kr';
    font-weight:bold;    
    color:#000;

}
.greeting-box .title img{
    position:relative;
    top:-10px;
}



.greeting-box .title span{
    color:#b98a34;

}

.ceo-sign-wrap{
    display:flex;
    align-items:center;
    gap:40px;
}

.ceo-text{
    font-size:48px;
    font-weight:700;
    color:#222;
}

.ceo-text span{
    color:#b98a34;
}

.ceo-sign{
    height:120px;
    object-fit:contain;
}

/* ============================================================
   [2026-08-10] CEO 인사말 리디자인 — 좌측 대표 사진 + 우측 인사말 (포인트=골드)
   ============================================================ */
.greeting-box.ceo-greet{
    display:flex;
    align-items:flex-start;
    gap:64px;
    width:1180px;
    max-width:100%;
    line-height:normal;
}
.ceo-greet__photo{
    flex:0 0 340px;
    position:sticky;
    top:110px;
}
.ceo-photo-frame{
    position:relative;
    border-radius:22px;
    overflow:hidden;
    background:linear-gradient(160deg,#f7efdd 0%,#efe1c2 100%);
    border:1px solid #e7d4a8;
    box-shadow:0 34px 66px -34px rgba(120,90,30,.5);
}
.ceo-photo-frame::after{
    content:'';
    position:absolute;
    left:0; bottom:0; width:100%; height:34%;
    background:linear-gradient(180deg,rgba(185,138,52,0) 0%,rgba(120,90,30,.10) 100%);
    pointer-events:none;
}
.ceo-photo-frame img{
    display:block;
    width:100%;
    height:auto;
}
.ceo-photo-name{
    margin-top:22px;
    padding:6px 0 6px 16px;
    border-left:3px solid #b98a34;
}
.ceo-photo-name b{
    display:block;
    font-size:24px;
    color:#141110;
    font-family:'Noto Sans bold';
    letter-spacing:-.5px;
}
.ceo-photo-name span{
    display:block;
    margin-top:5px;
    font-size:15px;
    color:#a08a5a;
    letter-spacing:-.4px;
}
.ceo-greet__body{
    flex:1;
    min-width:0;
}
.ceo-greet__body .speak{
    line-height:38px;
    color:#333;
}
.ceo-greet__body .speak p{
    margin:0 0 20px;
}
.ceo-greet__body .speak p:last-child{ margin-bottom:0; }
.ceo-greet__body .ceo-thanks{ margin-top:26px; }
.ceo-greet__body .ceo-sign-line{
    margin-top:52px;
    padding-top:30px;
    border-top:1px solid #eee5d2;
}

.info-wrap{
    width:100%;
    font-family:'Noto Sans KR', sans-serif;
}


.info-row{
    display:flex;
    align-items:flex-start;
    padding:44px 0;
  
}


.info-row:not(:last-child){

    border-bottom:1px solid #ddd;
}


.info-title{
    width:285px;
    font-size:33px;
    font-weight:bold;
    color:#000;
    text-align:left;
}

.info-line{
    width:1px;
    background:#ddd;
    margin-right:70px;
}

.info-content{
    flex:1;
    font-family:'Segoe UI';
    font-size:23px;
    color:#000;
    text-align:left;
}

.info-content div{
    display:flex;
    margin-bottom:12px;
    line-height:40px;
}

.info-content div:last-child{
    margin-bottom:0;
}

.info-content strong{
    width:120px;
    font-size:28px;
    font-weight:700;
}

.info-content span{
    font-weight:400;
}

.bg-naver-radius{background-color:#3cb05b; border-radius:20px}
.bg-youtube-radius{background-color:#d92c28; border-radius:20px}
.bg-insta{background-image:url("/assets/images/company/bg_insta.png"); width:1440px; height:211px}

.certWrap{
    position:relative;
    width:314px;
    height:442px;
    overflow:hidden;
}


.ceo-intro-bold{
    
    font-family:'Noto Sans bold';
    font-weight:bold;    
    color:#000;

}



._certCover{
    position:absolute;  
    cursor:pointer;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.72);
    display:none;
    z-index:10;
}




#certModal{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    display:none;

    justify-content:center;
    align-items:center;

    z-index:99999;
}

.certModalWrap{
    position:relative;
    display:inline-block;
}
#certModal img{
    max-width:80vw;
    max-height:90vh;
    object-fit:contain;

    box-shadow:0 0 30px rgba(0,0,0,0.5);
}

#btnClose{
    position:fixed;
    top:26px;
    right:34px;
    width:46px;
    height:46px;
    line-height:44px;
    border-radius:50%;
    background:rgba(20,17,13,.5);
    color:#fff;
    border:1px solid rgba(255,255,255,.35);
    box-shadow:0 8px 22px rgba(0,0,0,.35);
    font-size:24px;
    font-weight:300;
    text-align:center;
    cursor:pointer;
    z-index:100000;
    transition:transform .3s ease, background .25s ease, border-color .25s ease;
}
#btnClose:hover{ transform:rotate(90deg); background:#b98a34; border-color:#b98a34; }



.who-wrap{
    width:100%;
    padding:100px 0px 0px 0px;
    text-align:center;
}

.who-desc{
    font-family:'Noto Sans KR';
    font-size:16px;
    color:#555;
    line-height:1.8;
    padding-top:24px;
}

.who-stats{
    display:flex;
    height:550px;
    justify-content:center;
    align-items:start;
    gap:80px;
    padding-top:90px;
}

.who-item{
    min-width:180px;
    text-align:center;
}

.who-num{
    font-family:'Noto Sans bold';
    font-size:75px;
    color:#2563ff;
    line-height:1;
}

.who-num span{
    color:#000;
    font-size:30px;
    margin-left:6px;
}

.who-text{
    font-family:'Noto Sans KR';
    font-size:25px;
    color:#777;
    padding-top:18px;
}

.who-line{
    width:1px;
    height:90px;
    background:#d9d9d9;
}

/* ============================================================
   [2026-08-09] #5 WHO WE ARE 숫자 블루→골드 / #3 이미지 캐러셀 라운드+골드 도트
   ============================================================ */
.who-num{
    color:#c19a3e !important;
    background:linear-gradient(180deg,#e6cd93 0%,#b98a34 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
}
.who-num span{ color:#8a7a54 !important; -webkit-text-fill-color:#8a7a54; }
/* 이미지 캐러셀: 라운드 + 페이지네이션 골드 도트(메인 히어로 톤 통일) */
.mySwiper .swiper-slide{ border-radius:22px; overflow:hidden; }
.mySwiper .swiper-slide img{ border-radius:22px; display:block; }
.mySwiper .swiper-pagination-bullet{ width:8px !important; height:8px !important; background:rgba(255,255,255,.5) !important; opacity:1 !important; border-radius:20px !important; margin:0 5px !important; transition:width .34s ease, background .34s ease; }
.mySwiper .swiper-pagination-bullet.swiper-pagination-bullet-active{ width:34px !important; background:#DDBD7E !important; }
/* 도트 위치 위로 */
.mySwiper .swiper-pagination{ bottom:30px !important; }

.who-background
{
    /* [2026-08-11] 지구: 별도 레이어(::before)로 상단 페이드 처리 — 칼선 제거 + 작게 + 아래로 */
    position:relative;
}
.who-background::before{
    content:"";
    position:absolute;
    inset:0;
    background:url('/assets/images/지구.svg') no-repeat center 58%;
    background-size:104% auto;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 46%, #000 100%);
    mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 46%, #000 100%);
    z-index:0;
    pointer-events:none;
}
.who-background > .who-item{ position:relative; z-index:1; }



#btnPrev,
#btnNext{
    position:absolute;
    top:48%;
    width:32px;
    height:32px;
    border-top:3px solid rgba(255,255,255,.85);
    border-right:3px solid rgba(255,255,255,.85);
    transition:opacity .2s ease, border-color .2s ease;

    display:inline-block;

    cursor:pointer;
    user-select:none;
    z-index:20;
}
#btnPrev:hover,
#btnNext:hover{ border-color:#DDBD7E; }

#btnPrev{
    transform:rotate(-135deg);
    left:-100px;
}

#btnNext{
    right:-100px;
    transform:rotate(45deg);
}

/* ============================================================
   [2026-08-10] 공용 스크롤 등장 애니메이션 (오시는길)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* [2026-08-10 #2] 오시는길 정보표 — 행 등장 + 라벨 호버 골드 */
.info-row.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.info-row.reveal.is-in{ opacity:1; transform:none; }
.info-row .info-title{ transition:color .3s ease; }
.info-row:hover .info-title{ color:#b98a34; }
.info-content strong{ transition:color .3s ease; }
.info-content div:hover strong{ color:#b98a34; }

/* ============================================================
   [2026-08-10 #1] SNS 배너 — HTML 재제작 (네이버/유튜브/인스타)
   1번(내용) : 좌→우 슬라이드 + 글자 스태거 / 2번(버튼) : 팝(scale) 등장
   ============================================================ */
.sns-banners{ display:flex; flex-direction:column; gap:22px; }
.snsb{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px;
    padding:30px 44px; border-radius:22px; text-decoration:none; overflow:hidden;
    box-shadow:0 30px 60px -34px rgba(20,16,8,.5); }
.snsb--naver{ background:linear-gradient(135deg,#22c15e 0%,#12a24a 100%); }
.snsb--youtube{ background:linear-gradient(135deg,#ff5252 0%,#d3231f 100%); }
.snsb--insta{ background:linear-gradient(120deg,#7b2ff7 0%,#e1306c 52%,#f9a03f 100%); }
.snsb__box1{ display:flex; align-items:center; gap:28px; min-width:0; }
.snsb__icon{ flex:0 0 auto; width:72px; height:72px; background:#fff; border-radius:18px; padding:9px; box-shadow:0 8px 18px -8px rgba(0,0,0,.28); }
.snsb__icon svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 6px 14px rgba(0,0,0,.2)); }
.snsb__icon img{ width:100%; height:100%; display:block; border-radius:11px; }
.snsb__btn-ic{ width:26px; height:26px; border-radius:7px; display:block; flex:0 0 auto; }
.snsb__title{ color:#fff; font-family:'Noto Sans bold'; font-size:26px; letter-spacing:-.3px; }
.snsb__desc{ color:rgba(255,255,255,.95); font-size:17px; margin-top:9px; letter-spacing:-.4px; }
.snsb__desc--m{ display:none; }   /* 폰 전용 문구. 데스크톱은 원래 문구를 쓴다 */
.snsb__tags{ margin-top:11px; display:flex; gap:12px; flex-wrap:wrap; }
.snsb__tags span{ color:rgba(255,255,255,.82); font-size:14px; }
.snsb__btn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
    background:#fff; color:#232323; font-family:'Noto Sans bold'; font-size:17px;
    padding:15px 28px; border-radius:40px; box-shadow:0 12px 28px -14px rgba(0,0,0,.55);
    transition:transform .3s ease, box-shadow .3s ease, gap .3s ease; }
.snsb__btn svg{ width:22px; height:22px; }
.snsb:hover .snsb__btn{ transform:translateX(6px); gap:16px; box-shadow:0 18px 36px -14px rgba(0,0,0,.6); }
.snsb:hover .snsb__icon{ animation:snsbPulse .6s ease; }
@keyframes snsbPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.13); } }

/* 등장 애니메이션 — 1번 슬라이드 / 2번 팝 / 글자 스태거 */
.snsb__box1{ opacity:0; transform:translateX(-42px); transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
.snsb.is-in .snsb__box1{ opacity:1; transform:none; }
.snsb__btn{ opacity:0; transform:scale(.82); }
.snsb.is-in .snsb__btn{ opacity:1; transform:scale(1);
    transition:opacity .6s ease .18s, transform .55s cubic-bezier(.34,1.56,.64,1) .18s, box-shadow .3s ease, gap .3s ease; }
.snsb__title,.snsb__desc,.snsb__tags{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
.snsb.is-in .snsb__title{ opacity:1; transform:none; transition-delay:.14s; }
.snsb.is-in .snsb__desc{ opacity:1; transform:none; transition-delay:.24s; }
.snsb.is-in .snsb__tags{ opacity:1; transform:none; transition-delay:.34s; }

@media (max-width:900px){
  .snsb{ flex-direction:column; align-items:flex-start; gap:18px; padding:26px 28px; }
  .snsb__btn{ align-self:stretch; justify-content:center; }
}

/* [2026-08-10 #7] SNS 배너 정렬/크기 보정 — 제목 좌측정렬, 내용·태그 +2pt, 버튼 폭 통일, 아이콘 확대 */
.snsb{ padding:32px 48px; }
.snsb__box1{ flex:1 1 auto; min-width:0; }
.snsb__txt{ text-align:left; }
.snsb__title{ text-align:left; }
.snsb__desc{ font-size:19px !important; }
.snsb__tags span{ font-size:16px !important; }
.snsb__btn{ min-width:250px; justify-content:center; flex:0 0 auto; }
.snsb__btn svg{ width:26px !important; height:26px !important; }
@media (max-width:900px){
  .snsb__btn{ min-width:0; }
}





/* ============================================================
   [2026-08-27] 회사소개 모바일 (≤720px 전용 · 데스크톱 무변경)
   콘텐츠와 순서는 그대로 두고, 데스크톱 2단 구성만 한 열로 펴고
   글자·여백을 폰 기준으로 맞춘다.
   ============================================================ */
@media (max-width:720px){

  /* ---------- 오시는 길: 라벨 | 구분선 | 값 2단 → 한 열 ----------
     라벨 칸이 285px, 라벨 글자 33px 이라 폰에서 "주소/안내", "본/사" 로
     세로로 쪼개지고 주소가 네 줄로 끊겼다. */
  .info-row{
    flex-direction:column;
    align-items:stretch;
    padding:28px 0;
    gap:16px;
  }
  .info-title{
    width:auto;
    font-size:22px;
    line-height:1.35;
    letter-spacing:-.02em;
    color:#141110;
  }
  .info-line{ display:none; }              /* 세로 구분선은 한 열에서 의미가 없다 */
  .info-content{ font-size:16px; }
  .info-content div{
    display:block;
    line-height:1.7;
    margin-bottom:18px;
  }
  .info-content strong{
    display:block;
    width:auto;
    font-size:15px;
    color:#b98a34;
    margin-bottom:2px;
  }
  .info-content span{ display:block; word-break:keep-all; }

  /* ---------- 지도 ----------
     [2026-08-29] 여기서 폭·높이를 !important 로 덮어쓰면 안 된다.
     카카오는 스크립트가 준 크기로 타일 격자를 미리 계산해 둔다.
     CSS 가 그 뒤에 상자만 늘리면 타일은 윗줄만 남고 아래가 빈 회색이 된다.
     (폰에서 지도 아래 3분의 2가 회색으로 비던 원인)
     크기는 Company/Directions.asp 실행 스크립트가 실제 폭을 재서 정한다. */
  .root_daum_roughmap{
    max-width:100%;
    transform:none !important;
  }
  .root_daum_roughmap .wrap_controllers{ display:none; }
  .d-flex > div:has(.root_daum_roughmap){
    width:100% !important;
    height:auto !important;
    overflow:visible !important;
  }

  /* ---------- SNS 연결 영역 ----------
     카드 하나가 화면을 다 먹지 않도록 높이를 줄이고 한 열로 정리한다. */
  .snsb{ padding:20px !important; border-radius:12px !important; }
  .snsb__box1{ flex-direction:row; align-items:center; gap:14px; }
  .snsb__title{ font-size:17px !important; line-height:1.4 !important; }
  .snsb__desc{ font-size:15px !important; line-height:1.7 !important; word-break:keep-all; }
  .snsb__btn{
    min-width:0 !important;
    width:100%;
    min-height:44px;
    font-size:16px !important;
  }
  .bg-insta{
    width:100% !important;
    height:150px !important;
    background-size:cover !important;
    background-position:center !important;
  }

  /* ---------- 대표 인사말: 사진 | 글 2단 → 한 열 ---------- */
  .ceo-greet{ flex-direction:column; gap:28px !important; width:100% !important; }
  .ceo-greet__photo{
    flex:0 0 auto;
    position:static;        /* sticky 는 폰에서 스크롤만 방해한다 */
    width:100%;
  }
  .ceo-greet__body .speak{ font-size:16px; line-height:1.7; }
  .ceo-greet__body .speak p{ word-break:keep-all; }
  .ceo-photo-name b{ font-size:19px; }
  .ceo-photo-name span{ font-size:15px; }
}

/* ============================================================
   [2026-08-27] 금마니 소개 — 모바일 (≤720px 전용)
   WHO WE ARE 통계 4개가 nowrap 한 줄에 각 180px + 간격 80px = 1,020px 이라
   390px 화면에서 양쪽으로 잘려 나갔다. 숫자도 75px 이었다.
   한 줄에 두 개씩 두 줄로 펴고 크기를 화면에 맞춘다.
   ============================================================ */
@media (max-width:720px){
  .who-stats{
    flex-wrap:wrap !important;
    justify-content:center;
    gap:36px 0 !important;
    padding:0 20px;
  }
  .who-item{
    flex:0 0 50% !important;
    min-width:0 !important;
    width:50%;
    text-align:center;
  }
  .who-num{
    font-size:34px !important;
    line-height:1.2 !important;
    letter-spacing:-.03em;
  }
  .who-num span{ font-size:16px !important; }
  .who-text{
    font-size:15px !important;
    line-height:1.5 !important;
    margin-top:6px;
    word-break:keep-all;
  }
}

/* ============================================================
   [2026-08-28] 금마니 소개 — WHO WE ARE 구역
   ============================================================ */
@media (max-width:720px){

  /* ---------- 수치 4개 ----------
     .who-stats 가 데스크톱 height:550px 를 그대로 물고 있었다.
     flex-wrap 만 켜 두니 두 줄이 550px 안에서 벌어져
     항목(87px) 사이가 293px 씩 떴다. 높이를 내용에 맡긴다. */
  .who-stats{
    height:auto !important;
    align-content:flex-start !important;
    align-items:flex-start !important;
    gap:30px 0 !important;
    padding:34px 20px 30px !important;
  }
  /* 지구 배경은 수치 뒤에 깔리도록 크기를 다시 잡는다 */
  .who-background::before{
    background-size:150% auto !important;
    background-position:center 62% !important;
    opacity:.85;
  }
  /* 항목 사이 세로 구분선은 두 줄 배치에서 의미가 없다 */
  .who-line{ display:none !important; }
}


/* ════════════════════════════════════════════════════════════
   [2026-08-28] 금마니 소개 — 모바일 재구성
   PC 를 줄인 것이 아니라, 같은 콘텐츠로 모바일 화면을 다시 편집한다.
   ════════════════════════════════════════════════════════════ */
@media (max-width:720px){

  /* ── 1. 이미지: 화면 끝까지, UI 는 최소로 ──
     PC 캐러셀의 점 10개는 이미지보다 눈에 띄었다.
     점을 없애고 진행을 가는 선 하나로만 알린다. */
  .main-content-container > .d-flex:has(> .swiper){ display:block !important; }
  .mySwiper{ width:100% !important; overflow:hidden; padding-bottom:0 !important; }
  .mySwiper .swiper-slide{ width:100% !important; }
  .mySwiper .swiper-slide img{
    display:block; width:100%; height:auto;
    aspect-ratio:4/3; object-fit:cover;
  }
  /* 점 10개 → 얇은 진행 막대 */
  .mySwiper .swiper-pagination{
    position:static !important; margin-top:12px;
    display:flex; gap:3px; padding:0 var(--pad);
  }
  .mySwiper .swiper-pagination-bullet{
    flex:1 1 0; width:auto !important; height:2px !important;
    margin:0 !important; border-radius:0 !important;
    background:rgba(20,17,16,.12) !important; opacity:1 !important;
    transition:background .3s ease;
  }
  .mySwiper .swiper-pagination-bullet-active{ background:#B98A34 !important; }

  /* ── 2. 본문: 카드가 아니라 읽는 글 ──
     둥근 테두리 + 회색 배경 + 금색 세로선은 걷어낸다.
     강조는 정말 필요한 문장에만 남기고, 나머지 bold 는 톤을 낮춘다. */
  .main-sub-bg-gray-radius{
    background:transparent !important;
    border:0 !important; border-left:0 !important;
    border-radius:0 !important;
    padding:var(--s-vb) 0 0 0 !important;
  }
  .main-sub-text-24{
    font-size:var(--t-body) !important;
    line-height:1.8 !important;
    letter-spacing:-.015em !important;
    color:#2c2926 !important;
    word-break:keep-all;
  }
  .main-sub-text-24 br + br{ line-height:var(--s-para); }
  .main-sub-text-24 b,
  .main-sub-text-24 .txt-em{
    font-weight:600 !important;
    color:#141110 !important;
    background:none !important;
  }

  /* ── 3. WHO WE ARE: 숫자가 주인공 ──
     세계지도는 숫자 뒤에서 아주 옅게만 남기고, 수치의 위계를 정확히 세운다. */
  .who-wrap{ padding:var(--s-sec) 0 0 !important; }
  .who-wrap > .main-sub-title{ font-size:var(--t-sec) !important; }

  .who-stats{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    height:auto !important;
    gap:34px 12px !important;
    padding:26px var(--pad) 0 !important;
  }
  .who-item{
    width:auto !important; min-width:0 !important;
    flex:none !important;
    text-align:left !important;
    display:flex; flex-direction:column; align-items:flex-start;
  }
  /* 숫자와 단위의 baseline 을 맞춘다 */
  .who-num{
    display:flex; align-items:baseline; gap:3px;
    font-size:36px !important; line-height:1 !important;
    letter-spacing:-.04em; color:#141110 !important;
    font-variant-numeric:tabular-nums;
  }
  .who-num span{
    font-size:14px !important; font-weight:500;
    margin-left:0 !important; color:#B98A34 !important;
    -webkit-text-fill-color:#B98A34;
  }
  .who-text{
    font-size:var(--t-cap) !important;
    padding-top:8px !important; margin:0;
    color:#8a8a8a !important; letter-spacing:-.02em;
    word-break:keep-all;
  }
  /* 지도는 배경으로만. 숫자 가독성을 방해하지 않는다. */
  .who-background::before{
    background-size:200% auto !important;
    background-position:center 70% !important;
    opacity:.28 !important;
  }
  .who-line{ display:none !important; }
}

/* [2026-08-28 #2] 금마니 소개 마감
   1) 본문 강조가 한 문단에 네 번씩 굵게 들어가 글이 얼룩덜룩했다.
      굵기 대신 색으로만 구분해 읽는 흐름을 끊지 않게 한다.
   2) 화면 끝까지 쓰는 이미지에 둥근 모서리가 남아 좌우에 흰 각이 생겼다.
   3) 가운데 정렬은 PC 에서 넘어온 것이다. 서브내비·본문이 왼쪽 기준이므로
      제목과 리드도 왼쪽으로 맞춰 한 축으로 읽히게 한다. */
@media (max-width:720px){
  .main-sub-text-24{ color:#4a4744 !important; }
  .main-sub-text-24 b,
  .main-sub-text-24 .txt-em{
    font-weight:500 !important;
    color:#141110 !important;
  }

  .mySwiper .swiper-slide img{ border-radius:0 !important; }
  .mySwiper{ border-radius:0 !important; }

  .main-sub-bg-white.text-center,
  .main-content-container.main-content-container-padding-90{ text-align:left !important; }
  .main-sub-title.mst-c{ text-align:left !important; }
  .who-wrap{ text-align:left !important; }
  .who-wrap > .main-sub-title{ padding-left:var(--pad); padding-right:var(--pad); }
  .who-wrap > .main-sub-text{ padding-left:var(--pad); padding-right:var(--pad); }
}


/* ============================================================
   [2026-08-28] CEO 인사말 — 모바일 정리
   데스크톱은 기존 인라인 값(35px / 24px / padding-top 48px)을
   그대로 CSS 로 옮긴 것이라 화면이 바뀌지 않는다.
   모바일만 서브페이지 디자인 시스템(15px / 1.72)에 맞춘다.
   ============================================================ */
.greeting-box .ceo-intro-bold{ font-size:35px; letter-spacing:-1px; }
/* 서명 이름부를 .ceo-sign-name 으로 감싸면서 두 규칙이 어긋났다.
   ① .greeting-box .title span{color:골드} 가 감싼 span 전체에 걸려 줄이 통째로 금색이 됐다.
   ② .greeting-box .title > .sign 이 직계 자식 선택자라 '김 도 현'이 검정·36px 을 잃었다.
   원래 색·크기를 그대로 되돌린다. */
.greeting-box .title .ceo-sign-name{ color:#222; }
.greeting-box .title .ceo-sign-name > span{ color:#b98a34; }
.greeting-box .title .ceo-sign-name > .sign{
    font-size:36px; font-family:'Noto Sans Kr'; font-weight:bold; color:#000;
}
.greeting-box .ceo-intro-bold br.mbr{ display:none; }
.greeting-box .speak.ceo-speak{ font-size:24px; padding-top:48px; letter-spacing:-1px; }

@media (max-width:720px){
  /* 상단 리듬 — 95px + 149px = 244px 였다 */
  .ceo-sec .main-content-container{ padding-top:var(--sp-6, 40px) !important; }
  .ceo-flex{ padding-top:var(--sp-5, 32px) !important; display:block !important; }

  /* 본문 컨테이너: inline-block + line-height:59px 해제 */
  .ceo-sec .greeting-box{
    display:block !important;
    font-size:15px !important;
    line-height:1.72 !important;
    word-spacing:normal !important;
  }

  /* 인사말 줄바꿈 위치 지정 — 모바일에서만 '찾아주신' 뒤에서 끊는다 */
  .ceo-sec .ceo-intro-bold br.mbr{ display:inline; }

  .ceo-sec .greeting-box .ceo-intro-bold{
    font-size:20px !important;
    line-height:1.5 !important;
    letter-spacing:-.03em !important;
    word-break:keep-all;
  }

  .ceo-sec .greeting-box .speak.ceo-speak{
    font-size:15px !important;
    line-height:1.75 !important;
    padding-top:var(--sp-4, 24px) !important;
    letter-spacing:-.02em !important;
    word-break:keep-all;
  }

  /* 데스크톱 폭에 맞춰 손으로 넣은 줄바꿈만 죽인다.
     문단 구분용 <br><br> 는 그대로 두어 문단 간격을 유지한다.
     ※ br + br 는 텍스트 노드를 건너뛰므로 모든 br 에 걸린다. 쓰지 말 것. */
  .ceo-sec .speak br.dbr{ display:none; }

  /* 첫 문장을 감싼 <div> 가 '기업입니다.' 뒤에서 문단을 끊고 있었다.
     한 문단이므로 모바일에서는 이어서 흐르게 한다. */
  .ceo-sec .speak > div:first-child{ display:inline; }

  /* 서명 — 이름줄과 사인을 한 줄에 둔다.
     남는 폭을 사인이 가져가되 100~150px 안에서만 움직이게 해
     기기 폭이 달라져도 이름줄과 비율이 흐트러지지 않는다. */
  .ceo-sec .greeting-box > br{ display:none; }
  .ceo-sec .greeting-box .ceo-sign-row{
    display:flex !important;
    align-items:center;
    flex-wrap:nowrap;
    gap:10px;
    font-size:13.5px !important;
    line-height:1.6 !important;
    letter-spacing:-.02em;
    margin-top:var(--sp-6, 40px) !important;
  }
  .ceo-sec .ceo-sign-name{ flex:0 0 auto; white-space:nowrap; }
  .ceo-sec .ceo-sign-row .sign{ font-size:16px !important; letter-spacing:0; color:#000; }
  .ceo-sec .ceo-sign-row .ceo-sign-img{
    flex:1 1 auto; min-width:0;
    padding-left:0 !important;
    display:block; line-height:0;
    text-align:right;   /* 폭이 넓어 사인이 150px 로 묶이면 오른쪽 여백선에 붙인다 */
  }
  .ceo-sec .ceo-sign-row img{
    width:100% !important; max-width:150px !important; min-width:100px;
    height:auto !important; top:0 !important;
  }

  /* 하단 여백은 gmnSub.css 의 공용 ::after 스페이서가 담당한다.
     여기서 padding 으로 또 주면 gmnSub 의 .main-wrap .main-sub-bg-white.pb-14
     (0,3,0 !important) 에 밀려 어차피 적용되지 않는다. */
}

@media (max-width:359px){
  .ceo-sec .greeting-box .ceo-sign-row{ display:block !important; }
  .ceo-sec .ceo-sign-row .ceo-sign-img{ margin-top:6px; }
  .ceo-sec .ceo-sign-row img{ width:150px !important; }
}


/* ============================================================
   [2026-08-29] 오시는 길 주소·전화·방문시간 (≤720px)

   · 라벨과 값이 간격 0 으로 붙어 "고객센터070-4402-1004" 로 읽혔다.
   · 행 여백이 데스크톱 인라인 값 그대로라 28 / 64 / 54px 로 제각각이었다.
     (인라인에 !important 가 붙어 있어 여기서도 !important 로 덮는다)
   · 라벨 폭을 맞춰 값의 시작선을 한 줄로 세운다.
   ============================================================ */
@media (max-width:720px){
  .main-wrap .info-row{ padding:26px 0 !important; }
  .main-wrap .info-row:first-child{ padding-top:6px !important; }
  .main-wrap .info-title{
    padding-top:0 !important;
    font-size:20px; font-weight:800; letter-spacing:-.03em;
    margin-bottom:14px;
  }

  /* 라벨 폭 고정 : 본사 / 연구소 / 고객센터 / 평일 / 주차 값이 같은 선에서 시작 */
  .main-wrap .info-content > div > strong{
    display:inline-block; min-width:62px;
  }
  /* 실제 폭을 잡는 것은 아래 922행 근처의 flex:0 0 ...px 이다(2026-08-30 확인).
     여기서 min-width 만 바꾸면 화면은 그대로다. */
  /* baseline 정렬을 쓰면 칸이 내용보다 19px 커져 구분선까지 여백이
     28 / 45 / 26px 로 어긋난다. 글자 크기가 같으므로 위 맞춤이면 충분하다. */
  .main-wrap .info-content .d-flex{ gap:0; align-items:flex-start; }
  .main-wrap .info-content .d-flex > div:first-child{ flex:0 0 62px; }
  .main-wrap .info-content .d-flex > div:first-child > strong{ min-width:0; }

  /* 전화번호 칸만 위쪽 여백이 따로 붙어 있었다 */
  .main-wrap .info-content .d-flex[style*="padding-top"]{ padding-top:0 !important; }

  .main-wrap .info-content{ line-height:1.7; }
  .main-wrap .info-content > div + div{ margin-top:10px; }
}

/* [2026-08-29] 오시는 길 행 여백을 인라인에서 CSS 로 옮겼다.
   인라인 !important 는 CSS 로 이길 수 없어 모바일에서 조정이 안 됐다.
   데스크톱 값은 그대로 유지한다. */
.info-row--tel{ padding:64px 0 65px 0; }
.info-row--time{ padding-top:54px; }

@media (max-width:720px){
  .main-wrap .info-row,
  .main-wrap .info-row--tel,
  .main-wrap .info-row--time{ padding:26px 0 !important; }
  .main-wrap .info-row:first-child{ padding-top:6px !important; }

  /* 본사 / 연구소 : 라벨과 주소를 두 칸으로 나눠 값 시작선을 맞춘다 */
  .main-wrap .info-content > div:has(> strong){
    display:flex; align-items:flex-start;
  }
  /* [2026-08-30] 62 -> 52px. 62 는 가장 긴 "고객센터"(글자폭 51.9px)에 맞춘 값인데,
     이 선택자는 본사/연구소에만 걸린다(고객센터·평일·주차는 .d-flex 안이라 896행이 따로 맡는다).
     그래서 "본사"(26px) 가 36px 이나 떨어져 벌어져 보였다.
     이 칸의 가장 긴 라벨은 "연구소"(38.9px) 라 52px 이면 충분하다.
     -> 본사 36 -> 26px, 연구소 23 -> 13px. 두 주소의 시작선은 그대로 맞는다. */
  .main-wrap .info-content > div > strong{ flex:0 0 52px; min-width:52px; }

  /* [2026-08-30] 본사 / 연구소 두 줄 사이가 벌어져 있었다.
     margin-bottom 18px 에 연구소 쪽 인라인 padding-top:6px 까지 겹쳐 실제 24px.
     같은 주소를 가리키는 두 줄이라 한 덩어리로 붙인다. 6px 어긋남도 없앤다. */
  .main-wrap .info-row:first-child .info-content > div{ margin-bottom:12px; }
  .main-wrap .info-row:first-child .info-content > div + div{ margin-top:0; }
  .main-wrap .info-row:first-child .info-content > div[style*="padding-top"]{ padding-top:0 !important; }
  .main-wrap .info-row:first-child .info-content > div:last-child{ margin-bottom:0; }
}


/* ============================================================
   [2026-08-29] 오시는 길 SNS 배너 좌우 축 (≤720px)
   페이지의 다른 요소는 전부 20~370 인데 SNS 카드만 40~350 이었다.
   .sns-banners 에 좌우 20px 이 한 겹 더 들어가 카드만 안쪽으로 들어가 있었다.
   ============================================================ */
@media (max-width:720px){
  .main-wrap .sns-banners{ padding-left:0 !important; padding-right:0 !important; }
  /* 카드 안쪽 여백은 폭이 넓어진 만큼 조금 키운다 */
  .main-wrap .snsb{ padding:22px !important; border-radius:18px; }
  .main-wrap .snsb__box1{ gap:16px !important; }
  .main-wrap .snsb__icon{ width:56px !important; height:56px !important; border-radius:14px; padding:7px; }
  .main-wrap .snsb__title{ font-size:19px !important; }
  .main-wrap .snsb__desc{ font-size:14px !important; margin-top:6px; line-height:1.6; }
  .main-wrap .snsb__tags{ margin-top:8px; gap:9px; }
  .main-wrap .snsb__tags span{ font-size:12.5px !important; }
  .main-wrap .snsb__btn{ font-size:15px; padding:13px 20px; min-width:0 !important; }
}


/* ============================================================
   [2026-08-29] 오시는 길 세로 간격 (≤720px)
   재보니 겹쳐 있었다.
     · 보조설명 → 지도      -16px (지도가 글자를 덮음)
     · 지도 → 주소안내       24px (너무 붙음)
     · 방문시간 → SNS       -18px (SNS 가 글자를 덮음)
   ============================================================ */
@media (max-width:720px){
  /* [2026-08-29] margin-top:26px 은 보조설명과 지도가 겹쳐서 넣었던 값이다.
     그 보조설명을 모바일에서 없앴으니 26px 도 같이 뺀다.
     (gmnSub.css 에서 0 으로 맞춰 뒀지만 이 파일이 뒤에 실려 계속 26px 이 이겼다.
      그래서 서브메뉴 → 지도 간격만 66px 로, 다른 페이지의 41px 축에서 벗어나 있었다.) */
  .main-wrap .root_daum_roughmap{
    margin-top:0 !important;
    margin-bottom:38px !important;
  }
  .main-wrap .info-wrap{ padding-top:0 !important; }
  .main-wrap .sns-banners{ margin-top:38px; }

  /* 방문시간 안내는 괄호 앞에서 줄을 바꾼다 (데스크톱은 한 줄 유지) */
  .main-wrap .info-content br.mbr{ display:inline; }
}
.info-content br.mbr{ display:none; }


/* [2026-08-29] 오시는 길 마감 손질 */
.info-content .tel-line{ padding-top:15px; }   /* 데스크톱 값 유지 */

@media (max-width:720px){
  /* 구분선까지 여백이 28 / 45 / 26px 로 달랐다. 전화번호 칸에만
     인라인 padding-top:15px 이 붙어 아래로도 밀려 있었다. */
  .main-wrap .info-content .tel-line{ padding-top:0 !important; }
  .main-wrap .info-content{ padding-bottom:0 !important; }
  .main-wrap .info-row{ padding:26px 0 !important; }

  /* 섹션 제목 색을 못 박는다. 세 개가 같은 검정이어야 한다 */
  .main-wrap .info-title{ color:#141110 !important; }

  /* [2026-08-30] SNS 배너는 폰에서만 정리한다. 데스크톱 마크업은 원래 그대로 둔다.
     폰에서 감추는 것 : 왼쪽 아이콘 / 영문 제목 / 태그 (아래 버튼에 이미 같은 말이 있다)
     폰에서 쓰는 것   : .snsb__desc--m (짧게 다시 쓴 두 줄) 하나와 버튼 */
  .main-wrap .snsb__icon,
  .main-wrap .snsb__title,
  .main-wrap .snsb__tags{ display:none !important; }
  .main-wrap .snsb__desc{ display:none !important; }
  .main-wrap .snsb__desc--m{ display:block !important;
                             color:rgba(255,255,255,.95); font-size:14px !important;
                             line-height:1.6; margin-top:0 !important; word-break:keep-all; }
  .main-wrap .snsb{ padding:22px !important; gap:18px !important; }
  .main-wrap .snsb__box1{ width:100%; }
  .main-wrap .snsb__txt{ text-align:center !important; width:100%; }
}

/* [2026-08-29] 전화번호 칸의 flex 상자가 내용보다 18px 크다.
   (자식은 848~876 인데 상자는 848~894)
   원인을 상자 쪽에서 없애지 못해 행 아래 여백에서 그만큼 뺀다.
   결과: 구분선까지 여백이 세 행 모두 27px 로 같아진다. */
@media (max-width:720px){
  .main-wrap .info-row--tel{ padding-bottom:8px !important; }
}