:root{
 --ink:#0a1a2f;--sub:#5a6472;--line:#e2e6ec;--soft:#f4f6f9;--navy:#002c5f;--sky:#00aad2;--sand:#afc4d6;
 --f:'HyundaiSansText','Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;--wrap:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f);color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
em{font-style:normal;color:var(--navy)}
.cap{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.top{background:#00193a;color:#b9c6da;font-size:12.5px;text-align:center;padding:9px}
.top b{color:#fff;background:var(--navy);border:1px solid #33507a;padding:3px 10px;margin-left:8px;font-weight:700}
.nav{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.nav .in{display:flex;align-items:center;height:72px;gap:40px}
.logo{font-weight:800;font-size:24px;letter-spacing:.16em;color:var(--navy)}
.logo b{font-weight:400;letter-spacing:.02em;font-size:12px;display:block;color:var(--sub)}
.gnb{display:flex;gap:34px;margin-left:8px}
.gnb a{font-size:16px;font-weight:600;color:#1b2735;padding:24px 0;position:relative}
.gnb a:after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:3px;background:var(--navy);transition:width .25s}
.gnb a:hover:after,.gnb a.on:after{width:100%}
.gnb a.on{color:var(--navy)}
.navr{margin-left:auto;display:flex;align-items:center;gap:20px}
.navr .tel{font-weight:800;font-size:17px;color:var(--navy)}
.lang{font-size:12px;font-weight:700;color:#9aa4b2}
.cta{background:var(--navy);color:#fff;padding:12px 24px;font-weight:700;font-size:15px;transition:background .2s}
.cta:hover{background:#013b7d}
.mtog{display:none}
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 34px;font-weight:700;font-size:15px;letter-spacing:.02em;transition:all .2s;border:1.5px solid transparent}
.btn.p{background:var(--navy);color:#fff}.btn.p:hover{background:#013b7d}
.btn.o{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}.btn.o:hover{background:#fff;color:var(--navy)}
.btn.d{background:transparent;color:var(--navy);border-color:var(--navy)}.btn.d:hover{background:var(--navy);color:#fff}
/* hero full-bleed dark */
.hero{position:relative;height:640px;overflow:hidden;background:#0a1a2f}
.hero .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s}
.hero .slide.on{opacity:1}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,16,33,.82),rgba(6,16,33,.15) 60%,transparent)}
.hero .in{position:absolute;z-index:2;left:0;right:0;bottom:120px}
.hero .eyb{color:var(--sky);font-weight:800;letter-spacing:.22em;font-size:13px;text-transform:uppercase}
.hero h1{color:#fff;font-size:60px;font-weight:700;letter-spacing:-.03em;line-height:1.05;margin:18px 0 10px}
.hero p{color:#cdd6e2;font-size:18px;max-width:520px}
.hero .hbtns{display:flex;gap:12px;margin-top:32px}
.hero .dots{position:absolute;z-index:3;left:32px;bottom:80px;display:flex;gap:10px}
.hero .dots i{width:34px;height:3px;background:rgba(255,255,255,.4);cursor:pointer}
.hero .dots i.on{background:#fff}
/* quick action bar (signature) */
.qbar{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:4}
.qbar .in{display:flex;justify-content:space-between;max-width:1000px;margin:0 auto;padding:0 32px}
.qbar a{flex:1;text-align:center;padding:22px 6px;border-left:1px solid var(--line);transition:background .2s}
.qbar a:first-child{border-left:0}
.qbar a:hover{background:var(--soft)}
.qbar .ic{font-size:26px}
.qbar .t{display:block;margin-top:8px;font-size:14px;font-weight:600;color:#33404f}
/* sections */
.sec{padding:100px 0}
.sec.soft{background:var(--soft)}
.sec.dark{background:#0a1a2f;color:#fff}
.sh{font-size:42px;font-weight:700;letter-spacing:-.03em;line-height:1.12}
.sec.dark .sh{color:#fff}
.ey{color:var(--navy);font-weight:800;letter-spacing:.2em;font-size:13px;text-transform:uppercase;margin-bottom:14px}
.sec.dark .ey{color:var(--sky)}
.sp{color:var(--sub);font-size:17px;margin-top:14px;max-width:640px}
.sec.dark .sp{color:#b9c6da}
/* category tabs */
.ctabs{display:flex;gap:8px;margin:40px 0 30px;flex-wrap:wrap}
.ctabs a{padding:11px 22px;border:1px solid var(--line);font-weight:700;font-size:14px;color:#4a5666;background:#fff}
.ctabs a.on,.ctabs a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
/* model grid */
.models{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.mcard{border:1px solid var(--line);background:#fff;transition:box-shadow .25s,transform .25s}
.mcard:hover{box-shadow:0 20px 40px rgba(0,25,58,.13);transform:translateY(-4px)}
.mcard .im{height:180px;background-size:cover;background-position:center;background-color:#eef1f5}
.mcard .bd{padding:22px 22px 26px}
.mcard .seg{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--sky);text-transform:uppercase}
.mcard h3{font-size:22px;font-weight:700;margin:8px 0 4px}
.mcard .price{color:var(--sub);font-size:14px;font-weight:600}
.mcard .lk{margin-top:16px;font-size:13px;font-weight:800;color:var(--navy);letter-spacing:.03em}
/* feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;border:1px solid var(--line);margin-bottom:22px}
.frow .im{min-height:340px;background-size:cover;background-position:center}
.frow .tx{padding:56px 52px;display:flex;flex-direction:column;justify-content:center}
.frow.rev .im{order:2}
.frow .seg{color:var(--sky);font-weight:800;letter-spacing:.14em;font-size:12px;text-transform:uppercase}
.frow h3{font-size:30px;font-weight:700;margin:12px 0;letter-spacing:-.02em}
.frow p{color:var(--sub)}
.frow ul{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.frow li{list-style:none;font-size:13px;font-weight:700;color:var(--navy);border:1px solid var(--line);padding:7px 14px}
/* subpage hero */
.phero{height:320px;position:relative;overflow:hidden;background:#0a1a2f;display:flex;align-items:center}
.phero .im{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5}
.phero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,16,33,.9),rgba(6,16,33,.4))}
.phero .in{position:relative;z-index:2;color:#fff}
.crumb{color:var(--sand);font-size:13px;font-weight:600}
.phero h1{font-size:46px;font-weight:700;letter-spacing:-.03em;margin-top:10px}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(255,255,255,.16)}
.stats .s{padding:40px 30px;border-left:1px solid rgba(255,255,255,.16)}
.stats .s:first-child{border-left:0}
.stats .s b{display:block;font-size:46px;font-weight:800;color:#fff;letter-spacing:-.03em}
.stats .s b i{font-style:normal;font-size:22px;color:var(--sky)}
.stats .s span{color:#9fb0c6;font-weight:600;font-size:14px;margin-top:8px;display:block}
/* news */
.nlist{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px}
.ncard{border:1px solid var(--line);background:#fff;transition:transform .2s,box-shadow .2s}
.ncard:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(0,25,58,.12)}
.ncard .im{height:200px;background-size:cover;background-position:center}
.ncard .bd{padding:24px}
.ncard .cat{color:var(--sky);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.ncard h4{font-size:19px;font-weight:700;margin:10px 0;line-height:1.35}
.ncard .dt{color:#9aa4b2;font-weight:700;font-size:13px}
/* buy/benefit grid */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:20px}
.bcard{border:1px solid var(--line);padding:36px 30px;background:#fff}
.bcard .ic{font-size:32px}
.bcard h4{font-size:20px;font-weight:700;margin:16px 0 8px}
.bcard p{color:var(--sub);font-size:15px}
/* service list */
.svlist{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:20px}
.svcard{display:grid;grid-template-columns:130px 1fr;border:1px solid var(--line);background:#fff}
.svcard .im{background-size:cover;background-position:center;min-height:130px}
.svcard .bd{padding:26px}
.svcard h4{font-size:19px;font-weight:700}
.svcard p{color:var(--sub);font-size:14px;margin-top:8px}
/* esg pillars */
.epill{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line)}
.epill .e{padding:44px 34px;border-left:1px solid var(--line)}
.epill .e:first-child{border-left:0}
.epill .e .k{color:var(--sky);font-weight:800;letter-spacing:.14em;font-size:12px;text-transform:uppercase}
.epill .e h3{font-size:24px;font-weight:700;margin:12px 0 10px}
.epill .e p{color:var(--sub);font-size:15px}
/* contact */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line)}
.cinfo{padding:48px}
.cinfo .r{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.cinfo .r:last-child{border-bottom:0}
.cinfo .r .ic{width:44px;height:44px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--navy);flex:none}
.cinfo .r h4{font-size:12px;color:#8a95a4;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.cinfo .r b{font-size:18px;color:var(--navy)}
.cmap{width:100%;height:100%;min-height:420px;border:0}
.cform{padding:48px;background:var(--soft);grid-column:1/3;display:grid;grid-template-columns:1fr 1fr;gap:0}
.ctaband{background:var(--navy);color:#fff;padding:70px 60px;text-align:center}
.ctaband h2{font-size:36px;font-weight:700;letter-spacing:-.02em}
.ctaband p{color:#b9c6da;margin-top:12px;font-size:16px}
.ctaband .big{font-size:26px;font-weight:800;margin:22px 0 26px;color:var(--sky)}
.ctaband .btn.p{background:#fff;color:var(--navy)}
.foot{background:#00142e;color:#8a99b0;padding:56px 0 40px}
.foot .in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot .fl{font-weight:800;font-size:20px;color:#fff;letter-spacing:.14em}
.foot .fn{display:flex;gap:24px;flex-wrap:wrap}
.foot .fn a{font-size:14px;font-weight:600}
.foot .note{margin-top:24px;font-size:12.5px;color:#5d6b82;line-height:1.8}
.float{position:fixed;right:22px;bottom:24px;z-index:70;display:flex;flex-direction:column;gap:10px}
.float a{width:56px;height:56px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;box-shadow:0 10px 24px rgba(0,25,58,.3)}
.float a.s{background:var(--sky)}
@media(max-width:960px){
 .gnb,.navr .tel,.lang{display:none}.mtog{display:block;margin-left:auto;font-size:26px;background:none;border:0;color:var(--navy)}
 .hero{height:520px}.hero h1{font-size:38px}.sh{font-size:30px}.phero h1{font-size:32px}
 .models{grid-template-columns:1fr 1fr}.nlist,.bgrid,.epill,.svlist{grid-template-columns:1fr}
 .frow,.cgrid,.cform{grid-template-columns:1fr}.frow.rev .im{order:0}
 .stats{grid-template-columns:1fr 1fr}.qbar .in{overflow-x:auto}
}
/*IDCBG_START*/
.phero{background:linear-gradient(rgba(0,22,52,.72),rgba(0,22,52,.85)),url('/sample/ent/img/hyundai/24.jpg') center/cover no-repeat !important}.phero h1,.phero h2,.phero h3{color:#fff !important;text-shadow:0 2px 14px rgba(0,0,0,.5)}.phero p,.phero .sub,.phero .lead,.phero .desc,.phero .txt{color:rgba(255,255,255,.92) !important}.phero .crumb,.phero .bc,.phero .breadcrumb a,.phero .crumb a{color:rgba(255,255,255,.8) !important}
/*IDCBG_END*/
