:root{
  --orange:#1f5bff;
  --ink:#14181f;
  --white:#fff;
  --header-h:84px;
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory}
body{font-family:'Pretendard Variable',Pretendard,-apple-system,'Malgun Gothic',sans-serif;color:var(--white);background:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- 공통: 섹션 + 전체 배경 이미지 ---------- */
.sec{position:relative;min-height:100vh;min-height:100svh;scroll-snap-align:start;overflow:hidden;display:flex;align-items:center}
.sec>.bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.sec>.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,20,.55),rgba(10,14,20,.35) 45%,rgba(10,14,20,.7))}
.wrap{position:relative;z-index:2;width:100%;max-width:1400px;margin:0 auto;padding:0 40px}

.btn-more{display:inline-flex;align-items:center;gap:14px;margin-top:36px;padding:14px 26px;border:1px solid rgba(255,255,255,.7);border-radius:60px;font-size:15px;font-weight:500;transition:background .3s,border-color .3s}
.btn-more i{display:inline-block;width:22px;height:1px;background:currentColor;position:relative;transition:width .3s var(--ease)}
.btn-more i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn-more:hover{background:var(--orange);border-color:var(--orange)}
.btn-more:hover i{width:32px}

/* ---------- 헤더 ---------- */
.header{position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:100;display:flex;align-items:center}
.header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(14,18,25,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transition:opacity .35s}
.header.scrolled::before{opacity:1}
body.menu-open{overflow:hidden}
.header .wrap{display:flex;align-items:center;justify-content:space-between;max-width:none;padding:0 48px}


.logo{position:relative;display:block}
.logo img{display:block;height:58px;width:auto;transition:opacity .35s}
.logo .logo-wh{position:absolute;left:0;top:0;opacity:0}

 /* 로고 아웃글로우 (스크롤 전 네이비 로고용) */
.logo .logo-def{
  filter:
  drop-shadow(0 0 4px rgba(255,255,255,.6))
}


.header.scrolled .logo .logo-def{opacity:0}
.header.scrolled .logo .logo-wh{opacity:1}



.gnb{display:flex;gap:48px}
.gnb a{position:relative;font-size:16px;font-weight:600;padding:8px 0;opacity:.85;transition:opacity .25s}
.gnb a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.gnb a:hover,.gnb a.on{opacity:1}
.gnb a:hover::after,.gnb a.on::after{transform:scaleX(1)}
.gnb{align-items:center}
.has-sub{position:relative;display:flex;align-items:center;height:var(--header-h)}
.has-sub:hover>a,.has-sub:focus-within>a{opacity:1}
.has-sub:hover>a::after,.has-sub:focus-within>a::after{transform:scaleX(1)}
.gnb .sub{position:absolute;top:100%;left:50%;min-width:200px;padding:12px 0;background:rgba(14,18,25,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:2px solid var(--orange);opacity:0;visibility:hidden;transform:translate(-50%,12px);transition:opacity .3s,transform .4s var(--ease),visibility .3s}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.gnb .sub a{display:block;padding:12px 30px;font-size:15px;font-weight:500;white-space:nowrap;text-align:center;opacity:.8;transition:color .25s,background .25s,opacity .25s}
.gnb .sub a::after{display:none}
.gnb .sub a:hover{opacity:1;color:var(--orange);background:rgba(255,255,255,.06)}
.util{display:flex;align-items:center;gap:22px;font-size:14px}
.util a{opacity:.85}
.util a:hover{opacity:1}
.burger{display:none;width:32px;height:22px;position:relative}
.burger span{position:absolute;left:0;width:100%;height:2px;background:#fff;transition:transform .3s,opacity .3s,top .3s}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:10px}.burger span:nth-child(3){top:20px}
.burger.open span:nth-child(1){top:10px;transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){top:10px;transform:rotate(-45deg)}

/* ---------- 우측 점 네비 ---------- */
.dots{position:fixed;right:30px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:18px}
.dots a{position:relative;display:block;width:10px;height:10px;border-radius:50%;border:1px solid rgba(96,96,96,.95);transition:background .3s,transform .3s}
.dots a.on{background:var(--orange);border-color:var(--orange);transform:scale(1.35)}
.dots a span{position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none}
.dots a:hover span{opacity:1}

/* ---------- 1. HOME 슬라이더 ---------- */
#home{padding:0}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 1.2s}
.slide.on{opacity:1;visibility:visible;z-index:1}
.slide .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.12);transition:transform 7s linear}
.slide.on .bg{transform:scale(1)}
.slide .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,18,.7),rgba(8,12,18,.15) 70%),linear-gradient(0deg,rgba(8,12,18,.55),transparent 40%)}
.slide .txt{position:absolute;z-index:2;left:max(48px,calc((100% - 1400px)/2 + 40px));top:50%;transform:translateY(-46%)}
.slide .txt h6{font-size:18px;font-weight:500;color:#fff;margin-bottom:20px;letter-spacing:.02em}
.slide .txt h2{font-size:clamp(38px,5.6vw,84px);font-weight:800;line-height:1.18;letter-spacing:-.035em}
.slide .txt h2 em{font-style:normal;color:#1f5bff;}
.slide .txt h6,.slide .txt h2,.slide .txt .btn-more{opacity:0;transform:translateY(34px)}
.slide.on .txt h6{opacity:1;transform:none;transition:opacity .9s .5s,transform .9s .5s var(--ease)}
.slide.on .txt h2{opacity:1;transform:none;transition:opacity .9s .7s,transform .9s .7s var(--ease)}
.slide.on .txt .btn-more{opacity:1;transform:none;transition:opacity .9s .95s,transform .9s .95s var(--ease),background .3s,border-color .3s}
.hero-ctrl{position:absolute;z-index:5;left:max(48px,calc((100% - 1400px)/2 + 40px));bottom:56px;display:flex;align-items:center;gap:22px;font-size:14px;font-weight:600}
.hero-ctrl .bar{width:160px;height:2px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.hero-ctrl .bar i{position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left}
.hero-ctrl .bar i.run{animation:fill 6s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.hero-ctrl button{width:40px;height:40px;border:1px solid rgba(255,255,255,.6);border-radius:50%;font-size:16px;transition:background .3s}
.hero-ctrl button:hover{background:var(--orange);border-color:var(--orange)}
.scroll-down{position:absolute;z-index:5;right:80px;bottom:56px;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:12px;letter-spacing:.14em}
.scroll-down i{display:block;width:1px;height:56px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.scroll-down i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--orange);animation:drop 1.8s ease-in-out infinite}
@keyframes drop{to{top:100%}}

/* ---------- 2. ABOUT ---------- */
#overview .bg::after{background:linear-gradient(90deg,rgba(8,12,18,.85),rgba(8,12,18,.35))}
#overview .box{max-width:780px}
#overview h3{font-size:clamp(34px,4vw,60px);font-weight:800;letter-spacing:-.03em;margin-bottom:34px}
#overview h3::before{content:"";display:block;width:56px;height:4px;background:var(--orange);margin-bottom:26px}
#overview p{font-size:clamp(17px,1.5vw,22px);line-height:1.85;font-weight:300;opacity:.92}

/* ---------- 3. 사업소개 (3분할 풀 이미지) ---------- */
#public{padding:0}
.biz{position:absolute;inset:0;display:flex}
.biz li{position:relative;flex:1;overflow:hidden;transition:flex .8s var(--ease);border-right:1px solid rgba(255,255,255,.18)}
.biz li:last-child{border-right:0}
.biz li .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.2s var(--ease)}
.biz li .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,12,18,.88),rgba(8,12,18,.25) 60%,rgba(8,12,18,.45));transition:background .6s}
.biz li:hover{flex:1.7}
.biz li:hover .bg{transform:scale(1.07)}
.biz li:hover .bg::after{background:linear-gradient(0deg,rgba(8,12,18,.92),rgba(242,106,27,.18) 70%,rgba(8,12,18,.4))}

.biz .in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 48px 80px}
.biz h3{font-size:clamp(28px,2.8vw,44px);font-weight:800;letter-spacing:-.03em;margin-bottom:0;transition:margin .6s var(--ease)}
.biz p{max-width:520px;font-size:16px;line-height:1.8;font-weight:300;opacity:0;max-height:0;overflow:hidden;transition:opacity .6s,max-height .7s var(--ease)}
.biz li:hover h3{margin-bottom:18px}
.biz li:hover p{opacity:.92;max-height:200px}
.biz .more{display:inline-flex;align-items:center;gap:10px;margin-top:0;font-size:14px;font-weight:600;color:var(--orange);opacity:0;transition:opacity .6s,margin .6s}
.biz li:hover .more{opacity:1;margin-top:22px}
.biz .tag{position:absolute;top:calc(var(--header-h) + 36px);left:48px;z-index:2;font-size:15px;font-weight:600;opacity:.85}


/* 카드 전체 클릭 (More 링크 영역 확장) */
.biz .in{top:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
.biz .more::after{content:"";position:absolute;inset:0;z-index:3;cursor:pointer}




/* ---------- 4. NEWS ---------- */
#guide .bg::after{background:linear-gradient(90deg,rgba(8,12,18,.88),rgba(8,12,18,.6))}
#guide .wrap{display:grid;grid-template-columns:320px 1fr;gap:64px;align-items:start}
#guide h3{font-size:clamp(40px,4.5vw,68px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
#guide h3::before{content:"";display:block;width:56px;height:4px;background:var(--orange);margin-bottom:26px}
.plus{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-top:40px;border:1px solid rgba(255,255,255,.6);border-radius:50%;transition:background .3s,transform .5s var(--ease)}
.plus:hover{background:var(--orange);border-color:var(--orange);transform:rotate(90deg)}
.plus svg{width:18px;height:18px}
.news li{border-top:1px solid rgba(255,255,255,.28)}
.news li:last-child{border-bottom:1px solid rgba(255,255,255,.28)}
.news a{display:grid;grid-template-columns:120px 1fr;gap:28px;padding:28px 12px;transition:background .3s,padding .4s var(--ease)}
.news a:hover{background:rgba(255,255,255,.06);padding-left:26px}
.news time{font-size:15px;opacity:.7;padding-top:4px}
.news b{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.news b span{color:var(--orange);font-size:13px;font-weight:600;margin-right:10px}
.news small{display:block;font-size:15px;font-weight:300;line-height:1.7;opacity:.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 5. INFO + FOOTER ---------- */
#alert{flex-direction:column;justify-content:space-between;align-items:stretch}
#alert .bg::after{background:linear-gradient(180deg,rgba(8,12,18,.6),rgba(8,12,18,.92))}
#alert .mid{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:calc(var(--header-h) + 20px) 40px 20px}
#alert .mid p{max-width:880px;font-size:clamp(17px,1.6vw,23px);font-weight:300;line-height:1.9}
.btn-solid{display:inline-flex;align-items:center;gap:12px;margin-top:34px;padding:16px 34px;background:var(--orange);border-radius:60px;font-weight:700;font-size:16px;transition:transform .3s var(--ease),box-shadow .3s}
.btn-solid:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(242,106,27,.35)}
.footer{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.18);padding:44px 0 36px;font-size:14px;font-weight:300;color:rgba(255,255,255,.75)}
.footer .wrap{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer h5{font-size:20px;font-weight:800;color:#fff;margin-bottom:14px}
.footer h5 b{color:var(--orange)}
.footer p{line-height:1.9}
.footer strong{color:#fff;font-weight:600;margin-left:0px}
.footer strong:first-child{margin-left:0}
.footer .sns{display:flex;gap:12px;align-items:flex-start}
.footer .sns a{width:42px;height:42px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;transition:background .3s,border-color .3s}
.footer .sns a:hover{background:var(--orange);border-color:var(--orange)}
.footer .copy{margin-top:26px;font-size:12px;opacity:.65}

/* ---------- 모바일 ---------- */
@media (max-width:1100px){
  .gnb{gap:30px}
  #guide .wrap{grid-template-columns:1fr;gap:34px}
}
@media (max-width:900px){
  :root{--header-h:72px;--tab-h:56px}
  html{scroll-snap-type:none}
  .header .wrap{padding:0 22px}
  .logo img{display:block;height:48px;width:auto;transition:opacity .35s}
  .burger{display:block}
  .util{display:none}
  .gnb{position:fixed;inset:0;background:rgba(10,14,20,.96);flex-direction:column;justify-content:center;align-items:center;gap:34px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;z-index:-1}
  .gnb.open{opacity:1;visibility:visible}
  .gnb a{font-size:26px}
  .has-sub{height:auto;flex-direction:column;gap:12px}
  .gnb .sub{position:static;min-width:0;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;opacity:1;visibility:visible;transform:none;display:none;}
  .gnb .sub a{font-size:15px;padding:6px 10px;opacity:.65}
  .dots{display:none}
  .wrap{padding:0 24px}
  .slide .txt{left:24px;right:24px}
  .hero-ctrl{left:24px;bottom:34px}
  .hero-ctrl .bar{width:90px}
  .scroll-down{display:none}

#guide{padding:120px 0 90px}
 /* 추가 */
#overview{display:block;min-height:0;padding:0}
.biz{width:100%}
.biz li{width:100%}

  #public{display:block;min-height:0}
  .biz{position:static;flex-direction:column}
  .biz li{flex:none;min-height:62vh;border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}
  .biz li:hover{flex:none}
  .biz p{opacity:.92;max-height:none}
  .biz .more{opacity:1;margin-top:20px}
  .biz h3{margin-bottom:14px}
  .biz .in{padding:0 24px 48px}
  .biz .tag{display:none}
  .news a{grid-template-columns:1fr;gap:6px;padding:22px 4px}
  #alert{min-height:100svh}
  .footer .wrap{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .slide .bg{transform:none}
}



/* ---------- Inquiry 영역 (footer 위) ---------- */
#alert .mid.inq{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;text-align:left;background:#f4f6fa;color:#14181f;padding:calc(var(--header-h,88px) + 56px) 0 72px}
#alert .inq-wrap{width:100%;max-width:1400px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1.15fr 1fr;gap:96px;align-items:center}
#alert .inq-eyebrow{display:flex;align-items:center;gap:14px;max-width:none;margin:0 0 28px;font-size:14px;font-weight:700;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:var(--blue,#1f5bff)}
#alert .inq-eyebrow::before{content:"";width:40px;height:2px;background:currentColor}
#alert .inq h3{font-size:clamp(34px,4.4vw,64px);font-weight:800;line-height:1.15;letter-spacing:-.035em;color:#14181f}
#alert .inq h3 em{font-style:normal;color:var(--blue,#1f5bff)}
#alert .inq-lead{max-width:560px;margin:28px 0 0;font-size:clamp(16px,1.3vw,19px);font-weight:400;line-height:1.85;color:#5d6572}
#alert .inq-btn{display:inline-flex;align-items:center;gap:16px;margin-top:40px;padding:17px 34px;background:#14181f;color:#fff;border-radius:60px;font-size:16px;font-weight:700;letter-spacing:.02em;transition:background .3s,transform .3s}
#alert .inq-btn span{display:inline-block;transition:transform .3s}
#alert .inq-btn:hover{background:var(--blue,#1f5bff);transform:translateY(-3px)}
#alert .inq-btn:hover span{transform:translateX(6px)}
#alert .inq-rows{list-style:none;margin:0;padding:0;border-top:2px solid #14181f}
#alert .inq-rows li{border-bottom:1px solid #dfe3ea}
#alert .inq-rows a{display:grid;grid-template-columns:110px 1fr 24px;align-items:center;gap:16px;padding:26px 4px;color:#14181f;transition:padding .35s,color .3s}
#alert .inq-rows span{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a93a1}
#alert .inq-rows b{font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.01em;word-break:break-all}
#alert .inq-rows i{font-style:normal;font-size:18px;text-align:right;opacity:.35;transition:opacity .3s,transform .3s}
#alert .inq-rows a:hover{padding-left:14px;color:var(--blue,#1f5bff)}
#alert .inq-rows a:hover i{opacity:1;transform:translateX(4px)}
#alert .inq-incl{margin-top:44px}
#alert .inq-incl h4{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a93a1;margin-bottom:14px}
#alert .inq-incl ol{list-style:none;margin:0;padding:0}
#alert .inq-incl li{display:flex;align-items:baseline;gap:18px;padding:9px 0;font-size:17px;font-weight:500;color:#14181f}
#alert .inq-incl em{font-style:normal;font-size:14px;font-weight:700;color:var(--blue,#1f5bff);min-width:24px}
@media (max-width:900px){
  #alert .mid.inq{padding:calc(var(--header-h,72px) + 40px) 0 56px}
  #alert .inq-wrap{grid-template-columns:1fr;gap:52px;padding:0 24px}
  #alert .inq-rows a{grid-template-columns:84px 1fr 20px;padding:22px 2px}
}