@charset "utf-8";
/* ═══════════════════════════════════════════════
   38 한울그룹 — 기업 그룹사이트
   컨셉: 대기업형 정제 레이아웃 / 풀와이드 비주얼 / 딥 코퍼레이트 블루
   ═══════════════════════════════════════════════ */
:root{
  --blue:#0a4da3;
  --blue-deep:#07346e;
  --navy:#0e1b2e;
  --sky:#eaf1fb;
  --bg:#fff;
  --gray:#f5f7fa;
  --line:#e3e8ef;
  --ink:#16202e;
  --dim:#66778c;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font-family:inherit}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
html.js .reveal.on{opacity:1;transform:none}

/* ── 헤더 ── */
.hd{position:sticky;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.95);border-bottom:1px solid var(--line)}
.hd-in{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:40px;height:74px}
.logo{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:900;letter-spacing:-.02em;flex-shrink:0}
.logo .mk{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--blue),#2e7de0);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900}
.logo small{font-size:10px;font-weight:700;color:var(--dim);letter-spacing:.26em;display:block}
.gnb{display:flex;gap:8px;margin-left:auto}
.gnb a{font-size:15.5px;font-weight:700;padding:26px 16px;position:relative;color:var(--ink)}
.gnb a::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;background:var(--blue);transform:scaleX(0);transition:transform .22s}
.gnb a:hover::after,.gnb a.active::after{transform:scaleX(1)}
.gnb a.active{color:var(--blue)}
.hd .lang{font-size:12.5px;font-weight:800;color:var(--dim);letter-spacing:.1em;border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.m-burger{display:none}
#mNav{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);background:#fff;z-index:300;padding:64px 28px;transform:translateX(100%);transition:transform .28s ease;box-shadow:-12px 0 44px rgba(14,27,46,.18)}
#mNav.open{transform:none}
#mNav a{display:block;padding:15px 4px;font-size:17px;font-weight:700;border-bottom:1px solid var(--line)}
#mNav .m-close{position:absolute;top:16px;right:18px;font-size:26px;color:var(--dim)}

/* ── 풀와이드 히어로 ── */
.hero{position:relative;height:min(86vh,760px);min-height:480px;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 텍스트 뒤 국소 스크림만 — 상단/우측은 투명 */
.hero .scrim{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,rgba(14,27,46,0),rgba(14,27,46,.62))}
.hero .inner{position:absolute;left:0;right:0;bottom:0;padding:0 0 64px}
.hero .lb{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.3em;color:#cfe0f8;text-shadow:0 1px 8px rgba(14,27,46,.5)}
.hero h1{font-size:clamp(34px,4.8vw,62px);font-weight:900;letter-spacing:-.04em;line-height:1.22;color:#fff;margin-top:14px;text-shadow:0 2px 18px rgba(14,27,46,.45)}
.hero p{font-size:17px;color:rgba(255,255,255,.88);margin-top:12px;max-width:560px;text-shadow:0 1px 10px rgba(14,27,46,.5)}
.hero .cta{margin-top:26px;display:flex;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:6px;padding:14px 28px;font-size:15px;font-weight:800;transition:.2s}
.btn-bl{background:var(--blue);color:#fff}
.btn-bl:hover{background:var(--blue-deep)}
.btn-wh{background:#fff;color:var(--navy)}
.btn-wh:hover{background:var(--sky)}
.btn-ol{border:1.5px solid var(--blue);color:var(--blue)}
.btn-ol:hover{background:var(--blue);color:#fff}

/* 숫자 스트립 */
.stats{background:var(--navy);color:#fff;padding:38px 0}
.stats-in{max-width:1240px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stats b{font-size:clamp(26px,3vw,40px);font-weight:900;letter-spacing:-.02em;display:block}
.stats b i{font-style:normal;color:#5b9bf0}
.stats span{font-size:13.5px;color:#9fb4d2}

/* ── 섹션 헤드 ── */
.sec{padding:90px 0}
.sec-head{margin-bottom:44px}
.sec-head .lb{font-size:12.5px;font-weight:800;letter-spacing:.3em;color:var(--blue)}
.sec-head h2{font-size:clamp(27px,3.4vw,42px);font-weight:900;letter-spacing:-.04em;margin-top:10px;line-height:1.3}
.sec-head .ds{margin-top:10px;font-size:16px;color:var(--dim);max-width:620px}
.sec-head.center{text-align:center}
.sec-head.center .ds{margin-left:auto;margin-right:auto}

/* 사업영역 카드 */
.biz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bz{display:block;position:relative;border-radius:12px;overflow:hidden;background:var(--navy)}
.bz img{width:100%;aspect-ratio:3/3.9;object-fit:cover;transition:transform .6s,opacity .4s;opacity:.92}
.bz:hover img{transform:scale(1.05);opacity:1}
.bz .tx{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 20px;background:linear-gradient(180deg,rgba(14,27,46,0),rgba(14,27,46,.78))}
.bz .en{font-size:11px;font-weight:800;letter-spacing:.26em;color:#9cc1f5}
.bz h3{font-size:20px;font-weight:900;color:#fff;margin-top:4px}
.bz p{font-size:12.5px;color:rgba(255,255,255,.78);margin-top:3px}
.bz .go{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:15px;opacity:0;transition:.25s}
.bz:hover .go{opacity:1}

/* 비전 밴드 */
.vision{position:relative;overflow:hidden;background:var(--navy)}
.vision .ph{position:absolute;inset:0}
.vision .ph img{width:100%;height:100%;object-fit:cover;opacity:.4}
.vision .in{position:relative;max-width:1240px;margin:0 auto;padding:110px 24px;color:#fff;text-align:center}
.vision .lb{font-size:13px;font-weight:800;letter-spacing:.34em;color:#8fc0ff}
.vision h2{font-size:clamp(26px,3.6vw,46px);font-weight:900;letter-spacing:-.03em;line-height:1.4;margin-top:16px}
.vision p{font-size:16px;color:rgba(255,255,255,.82);margin-top:14px;max-width:580px;margin-left:auto;margin-right:auto}

/* 뉴스·공시 */
.news-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px}
.news-grid>*{min-width:0}
.news-list{display:grid}
.nw{display:grid;grid-template-columns:84px 1fr;gap:20px;padding:20px 4px;border-bottom:1px solid var(--line);align-items:start}
.nw:first-child{border-top:2px solid var(--ink)}
.nw .date{font-size:13px;color:var(--dim);font-weight:700;padding-top:3px}
.nw .date b{display:block;font-size:21px;color:var(--ink);font-weight:900}
.nw h3{font-size:16.5px;font-weight:800;line-height:1.45}
.nw:hover h3{color:var(--blue);text-decoration:underline}
.nw p{font-size:13.5px;color:var(--dim);margin-top:4px}
.nw .tag{display:inline-block;font-size:11px;font-weight:800;color:var(--blue);background:var(--sky);border-radius:4px;padding:2px 9px;margin-bottom:6px}
.disc-box{background:var(--gray);border-radius:12px;padding:28px 30px}
.disc-box h3{font-size:16px;font-weight:900;margin-bottom:14px;display:flex;justify-content:space-between}
.disc-box h3 a{font-size:12.5px;color:var(--dim);font-weight:600}
.disc-box li{padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.disc-box li:last-child{border-bottom:0}
.disc-box li a{display:flex;justify-content:space-between;gap:12px}
.disc-box li a:hover{color:var(--blue)}
.disc-box li span{font-size:12.5px;color:var(--dim);white-space:nowrap}

/* ── 푸터 ── */
.footer{background:var(--navy);color:#8fa3bf;padding:54px 0 36px;font-size:14px}
.ft-in{max-width:1240px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.ft-in .lg{font-size:21px;font-weight:900;color:#fff}
.ft-in p{margin-top:12px;line-height:1.85;font-size:13px;color:#6b7f9c}
.ft-in h4{color:#fff;font-size:14px;font-weight:800;margin-bottom:13px}
.ft-in li{margin-bottom:9px;font-size:13.5px}
.ft-in li a:hover{color:#fff}
.ft-bot{max-width:1240px;margin:36px auto 0;padding:22px 24px 0;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:#566a86;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ── 서브 비주얼 ── */
.sub-visual{position:relative;height:320px;overflow:hidden}
.sub-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sub-visual .scrim{position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(180deg,rgba(14,27,46,0),rgba(14,27,46,.6))}
.sub-visual .in{position:absolute;left:0;right:0;bottom:0;padding-bottom:44px;color:#fff}
.sub-visual .lb{font-size:12px;font-weight:800;letter-spacing:.3em;color:#cfe0f8;text-shadow:0 1px 8px rgba(14,27,46,.5)}
.sub-visual h1{font-size:clamp(28px,3.6vw,46px);font-weight:900;letter-spacing:-.03em;margin-top:8px;text-shadow:0 2px 16px rgba(14,27,46,.5)}

/* ── BUSINESS 교차 섹션 ── */
.biz-rows{display:grid;gap:70px}
.bz-row{display:grid;grid-template-columns:1.15fr 1fr;gap:50px;align-items:center}
.bz-row>*{min-width:0}
.bz-row:nth-child(2n) .ph{order:2}
.bz-row .ph{border-radius:14px;overflow:hidden}
.bz-row .ph img{width:100%;aspect-ratio:16/10.5;object-fit:cover}
.bz-row .en{font-size:12px;font-weight:800;letter-spacing:.28em;color:var(--blue)}
.bz-row h2{font-size:clamp(23px,2.8vw,34px);font-weight:900;letter-spacing:-.03em;margin:10px 0 12px}
.bz-row p{font-size:15.5px;color:var(--dim);line-height:1.9}
.bz-row .facts{display:flex;gap:30px;margin-top:22px}
.bz-row .facts b{display:block;font-size:22px;font-weight:900;color:var(--blue)}
.bz-row .facts span{font-size:12.5px;color:var(--dim)}

/* ── IR ── */
.fin-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:54px}
.fin{background:var(--gray);border-radius:12px;padding:28px 30px}
.fin .lb{font-size:13px;font-weight:800;color:var(--dim)}
.fin .v{font-size:clamp(26px,2.8vw,36px);font-weight:900;letter-spacing:-.02em;margin-top:6px}
.fin .v small{font-size:14px;color:var(--dim);font-weight:600}
.fin .d{font-size:12.5px;font-weight:800;margin-top:5px;color:#0c8a56}
.fin .bars{display:flex;gap:9px;align-items:flex-end;height:64px;margin-top:18px}
.fin .bars i{flex:1;background:#c4d6ef;border-radius:4px 4px 0 0}
.fin .bars i.hl{background:var(--blue)}
.ir-tbl{width:100%;border-collapse:collapse;font-size:14.5px;border-top:2px solid var(--ink)}
.ir-tbl th{background:var(--gray);font-size:12.5px;font-weight:800;color:var(--dim);padding:13px 14px;border-bottom:1px solid var(--line)}
.ir-tbl td{padding:15px 14px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
.ir-tbl td.tit{text-align:left;max-width:0;width:60%}
.ir-tbl td.tit a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ir-tbl td.tit a:hover{color:var(--blue);text-decoration:underline}
.ir-tbl .dl{font-size:12.5px;font-weight:800;color:var(--blue);border:1px solid var(--blue);border-radius:5px;padding:4px 12px}
.paging{display:flex;gap:6px;justify-content:center;margin-top:26px}
.paging a{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);font-size:13px;color:var(--dim)}
.paging a.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:900}

/* ── CAREERS ── */
.talent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:60px}
.tl{border:1px solid var(--line);border-radius:12px;padding:32px 30px}
.tl .no{font-size:13px;font-weight:900;color:var(--blue);letter-spacing:.2em}
.tl h3{font-size:20px;font-weight:900;margin:10px 0 8px}
.tl p{font-size:14px;color:var(--dim)}
.job-list{border-top:2px solid var(--ink)}
.job{display:grid;grid-template-columns:110px 1fr auto auto;gap:18px;align-items:center;padding:19px 6px;border-bottom:1px solid var(--line)}
.job .co{font-size:13px;font-weight:800;color:var(--blue)}
.job h3{font-size:16.5px;font-weight:800}
.job:hover h3{color:var(--blue);text-decoration:underline}
.job .meta{font-size:13px;color:var(--dim);white-space:nowrap}
.job .dday{font-size:12px;font-weight:900;background:var(--sky);color:var(--blue);border-radius:999px;padding:5px 14px;white-space:nowrap}
.job .dday.always{background:var(--gray);color:var(--dim)}

/* ── ABOUT ── */
.ceo{display:grid;grid-template-columns:1fr 1.15fr;gap:50px;align-items:center;margin-bottom:80px}
.ceo>*{min-width:0}
.ceo .ph{border-radius:14px;overflow:hidden}
.ceo .ph img{width:100%;aspect-ratio:4/3.4;object-fit:cover}
.ceo h2{font-size:clamp(23px,2.8vw,34px);font-weight:900;letter-spacing:-.03em;line-height:1.4}
.ceo p{font-size:15.5px;color:var(--dim);line-height:1.95;margin-top:14px}
.ceo p b{color:var(--ink)}
.ceo .sign{margin-top:20px;font-size:14px;color:var(--dim)}
.ceo .sign b{font-size:18px;color:var(--ink);font-weight:900;margin-left:8px}
/* 연혁 */
.history{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:80px}
.hs{background:#fff;padding:30px 26px}
.hs b{font-size:24px;font-weight:900;color:var(--blue);display:block}
.hs h3{font-size:16px;font-weight:800;margin:8px 0 6px}
.hs p{font-size:13px;color:var(--dim)}
/* 계열사 */
.affil{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.af{border:1px solid var(--line);border-radius:10px;padding:24px 22px;transition:.2s;display:block}
.af:hover{border-color:var(--blue);box-shadow:0 12px 30px rgba(10,77,163,.1)}
.af .en{font-size:10.5px;font-weight:800;letter-spacing:.2em;color:var(--blue)}
.af h3{font-size:17px;font-weight:900;margin:6px 0 4px}
.af p{font-size:12.5px;color:var(--dim)}

/* ── CONTACT ── */
.ct-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:54px;align-items:start}
.ct-grid>*{min-width:0}
.ct-info h2{font-size:clamp(22px,2.6vw,32px);font-weight:900;letter-spacing:-.02em;line-height:1.45}
.ct-info .rows{margin-top:30px;display:grid;gap:20px}
.ct-info .it{display:flex;gap:14px;align-items:flex-start;font-size:15px}
.ct-info .it .em{width:44px;height:44px;border-radius:10px;background:var(--sky);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.ct-info .it b{display:block;font-weight:800}
.ct-info .it span{font-size:13.5px;color:var(--dim)}
.consult-form{background:var(--gray);border-radius:16px;padding:36px 38px}
.consult-form .fld{margin-bottom:16px}
.consult-form label{display:block;font-size:13px;font-weight:800;color:var(--dim);margin-bottom:7px}
.consult-form label .req{color:#dc2626}
.consult-form input,.consult-form select,.consult-form textarea{width:100%;background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:15px;padding:13px 15px;outline:0;transition:.15s}
.consult-form input:focus,.consult-form select:focus,.consult-form textarea:focus{border-color:var(--blue)}
.consult-form textarea{min-height:120px;resize:vertical}
.consult-form .fld-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.consult-form .submit{width:100%;background:var(--blue);color:#fff;border-radius:8px;padding:16px;font-size:16px;font-weight:900;margin-top:8px;transition:.2s}
.consult-form .submit:hover{background:var(--blue-deep)}
.consult-form .note{font-size:12px;color:var(--dim);margin-top:11px;text-align:center}

/* ── 반응형 ── */
@media (max-width:1024px){
  .gnb{display:none}
  .m-burger{display:block;font-size:23px;margin-left:auto}
  .hd .lang{display:none}
  .biz-grid{grid-template-columns:1fr 1fr}
  .stats-in{grid-template-columns:1fr 1fr;gap:26px}
  .news-grid,.bz-row,.ceo,.ct-grid{grid-template-columns:1fr}
  .bz-row:nth-child(2n) .ph{order:0}
  .fin-cards,.talent-grid{grid-template-columns:1fr}
  .history,.affil{grid-template-columns:1fr 1fr}
  .job{grid-template-columns:1fr auto}
  .job .co{grid-column:1/-1}
  .job .meta{display:none}
}
@media (max-width:640px){
  .hero{height:70vh}
  .sec{padding:60px 0}
  .biz-grid{grid-template-columns:1fr}
  .history,.affil{grid-template-columns:1fr}
  .consult-form{padding:26px 20px}
  .consult-form .fld-row{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr}
  .ft-bot{flex-direction:column}
}