body { margin:0; padding-top:88px; font-family:"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",Arial,sans-serif; color:#112136; background:#ffffff; line-height:1.7; }
a{ color:inherit; } a:hover{ text-decoration:none; }
.site-header{ position:fixed; top:0; left:0; width:100%; z-index:1050; background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); border-bottom:1px solid rgba(17,33,54,0.08); }
.mega-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:88px; position:relative; }
.brand-wrap{ display:flex; align-items:center; gap:14px; text-decoration:none; min-width:260px; position:relative; z-index:1002; }
.brand-logo{ width:48px; height:auto; display:block; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-size:1.45rem; color:#112136; font-weight:800; }
.brand-text small{ font-size:0.78rem; color:#6c7a89; }
.mega-gnb{ flex:1; display:flex; justify-content:center; position:static; }
.mega-gnb-list{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:6px; position:static; }
.mega-gnb-item{ list-style:none; position:static; }
.mega-gnb-item > a{ display:flex; align-items:center; justify-content:center; height:50px; padding:0 18px; border-radius:12px; text-decoration:none; color:#24364d; font-size:16px; font-weight:700; transition:background .2s ease,color .2s ease; white-space:nowrap; position:relative; z-index:1002; }
.mega-gnb-item:hover > a,.mega-gnb-item:focus-within > a{ background:#f2f7ff; color:#0a63d8; }
.header-cta{ display:inline-flex; align-items:center; justify-content:center; min-width:136px; height:48px; padding:0 18px; border-radius:14px; background:linear-gradient(135deg,#0b72c9,#1357c5); color:#fff; text-decoration:none; font-size:15px; font-weight:800; white-space:nowrap; box-shadow:0 10px 18px rgba(18,91,193,.18); position:relative; z-index:1002; }
.header-cta:hover{ color:#fff; filter:brightness(1.03); }
.mega-panel{ position:absolute; left:0; right:0; top:100%; background:#fff; border-top:2px solid #0a63d8; box-shadow:0 25px 50px rgba(0,0,0,0.12); margin-top:-1px; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(10px); transition:opacity .2s ease,transform .2s ease,visibility .2s ease; z-index:1001; }
.mega-gnb-item.has-panel:hover .mega-panel,.mega-gnb-item.has-panel:focus-within .mega-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.mega-panel-inner{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:26px 12px 30px; }
.mega-panel-2col{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mega-panel-col{ padding:0 28px; border-left:1px solid #eef2f7; }
.mega-panel-col:first-child{ border-left:none; }
.mega-panel-col h4{ margin:0 0 14px; font-size:13px; font-weight:800; letter-spacing:.08em; color:#0a63d8; text-transform:uppercase; }
.mega-panel-col a{ display:block; padding:6px 0; color:#4b5d73; font-size:15px; font-weight:600; transition:color .2s ease; }
.mega-panel-col a:hover{ color:#14253d; }
.btn{ border-radius:12px; font-weight:700; transition:all .2s ease; }
.btn-lg{ padding:14px 28px; font-size:1rem; }
.btn-brand{ background:linear-gradient(135deg,#0b72c9,#1357c5); border:none; color:#fff; box-shadow:0 10px 22px rgba(11,114,201,.18); }
.btn-brand:hover{ color:#fff; transform:translateY(-1px); box-shadow:0 12px 26px rgba(11,114,201,.24); }
.btn-lightline{ border:1px solid rgba(255,255,255,.38); color:#fff; background:transparent; }
.btn-lightline:hover{ color:#fff; background:rgba(255,255,255,.10); }
.hero-section{ position:relative; overflow:hidden; padding:92px 0 72px; }
.hero-network-bg{ background-image:linear-gradient(90deg,rgba(5,22,56,.84) 0%,rgba(7,30,74,.62) 36%,rgba(10,47,108,.24) 68%,rgba(10,47,108,.12) 100%),url('../img/hero-network-bg.png'); background-size:cover; background-position:center center; background-repeat:no-repeat; }
.hero-network-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.03) 0%,rgba(0,0,0,.18) 100%); z-index:1; pointer-events:none; }
.hero-row{ min-height:640px; position:relative; z-index:2; }
.eyebrow,.section-label{ display:inline-block; font-size:.83rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#7ec6ff; margin-bottom:16px; }
.section-label.light{ color:#8ec7ff; }
.hero-copy h1{ font-size:4.1rem; line-height:1.1; font-weight:800; margin-bottom:22px; letter-spacing:-.03em; color:#fff; }
.hero-desc{ font-size:1.18rem; color:rgba(255,255,255,.88); max-width:760px; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.hero-badges span{ padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); font-weight:600; color:#fff; backdrop-filter:blur(4px); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-panel{ background:rgba(8,30,68,.84); color:#fff; border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:34px 30px; box-shadow:0 24px 50px rgba(17,33,54,.24); backdrop-filter:blur(4px); position:relative; z-index:2; }
.panel-kicker{ font-size:1.6rem; line-height:1.35; font-weight:800; margin-bottom:20px; }
.panel-list{ margin:0; padding-left:20px; }
.panel-list li{ margin-bottom:10px; color:rgba(255,255,255,.90); }
.panel-cta{ margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16); display:flex; flex-direction:column; gap:6px; }
.section{ padding:88px 0; }
.section-soft{ background:#f7f9fc; }
.section-heading{ margin-bottom:36px; }
.section-heading.small-bottom{ margin-bottom:22px; }
.section-heading h2,.section-darkband h2,.cta-box h2{ font-size:2.5rem; line-height:1.25; font-weight:800; margin-bottom:14px; letter-spacing:-.025em; }
.section-heading p{ color:#55657c; font-size:1.07rem; max-width:760px; }
.service-card,.value-card,.notice-board{ background:#fff; border:1px solid rgba(17,33,54,.08); border-radius:22px; padding:28px; height:100%; box-shadow:0 14px 36px rgba(17,33,54,.05); }
.service-no{ color:#0b72c9; font-weight:800; margin-bottom:12px; }
.service-card h3,.value-card h3{ font-size:1.5rem; font-weight:800; margin-bottom:14px; }
.service-card ul{ margin:0; padding-left:18px; }
.service-card li{ margin-bottom:8px; color:#49586d; }
.section-darkband{ background:linear-gradient(90deg,#071733 0%,#102e60 100%); }
.section-darkband .light{ color:#fff; }
.section-darkband p.light{ color:rgba(255,255,255,.86); }
.value-card{ background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.10); box-shadow:none; }
.value-card p{ color:rgba(255,255,255,.86); }
.notice-list{ list-style:none; padding-left:0; margin:0; }
.notice-list li{ border-bottom:1px solid rgba(17,33,54,.08); }
.notice-list li:last-child{ border-bottom:none; }
.notice-list a{ display:flex; justify-content:space-between; gap:20px; padding:18px 4px; color:#24364d; }
.notice-title{ font-weight:700; }
.notice-date{ color:#7b8798; white-space:nowrap; }
.notice-more-wrap{ margin-top:18px; text-align:right; }
.notice-more{ color:#0b72c9; font-weight:700; }
.cta-box{ background:linear-gradient(135deg,#0a63d8,#123d96); border-radius:26px; padding:42px 42px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:26px; }
.cta-box p{ color:rgba(255,255,255,.88); margin-bottom:0; max-width:780px; }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:1199px){ .hero-copy h1{ font-size:3.5rem; } .mega-panel-inner{ max-width:1000px; } .mega-gnb-item>a{ padding:0 14px; font-size:15px; } }
@media (max-width:991px){ body{ padding-top:80px; } .mega-header-inner{ flex-wrap:wrap; gap:14px; padding-top:12px; padding-bottom:12px; } .mega-gnb{ width:100%; justify-content:flex-start; overflow-x:auto; } .mega-gnb-list{ min-width:max-content; padding-bottom:4px; } .mega-panel{ display:none !important; } .hero-row{ min-height:auto; } .hero-copy h1{ font-size:2.8rem; } .hero-panel{ margin-top:28px; } .cta-box{ flex-direction:column; align-items:flex-start; } }
@media (max-width:575px){ .brand-text strong{ font-size:1.2rem; } .brand-text small{ font-size:0.72rem; } .hero-copy h1{ font-size:2.2rem; } .hero-desc{ font-size:1rem; } .hero-badges span{ font-size:.92rem; } .cta-box{ padding:32px 24px; } }