/* =========================================================
   GSDLAB 홈페이지 공통 스타일
   - 포인트 컬러(#00abeb)와 메뉴 구성은 기존 사이트 유지
   - 제품 상세(히어로형) 전용 스타일은 product-detail.css
   ========================================================= */
:root{
  --primary:#00abeb;
  --primary-dark:#0089bd;
  --primary-soft:#e8f7fd;
  --dark:#05070c;
  --ink:#0f1722;
  --text:#2b3540;
  --muted:#5b6673;
  --line:#e3e7eb;
  --soft:#f4f6f8;
  --radius:18px;
  --max:1160px;
  /* 글자 크기는 아래 네 단계만 쓴다 (히어로의 대형 제목·숫자만 예외) */
  --fs-s:14px;   /* 작은 글자: 분류 표시, 날짜·번호, 캡션 */
  --fs-m:16px;   /* 본문 */
  --fs-l:22px;   /* 소제목: 카드 제목, 묶음 제목 */
  --fs-xl:34px;  /* 제목: 페이지·구역 제목 */
}
@media (max-width:768px){
  :root{--fs-s:13px;--fs-m:15px;--fs-l:19px;--fs-xl:26px}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:"Pretendard Variable","Pretendard","Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",dotum,Helvetica,sans-serif;font-size:var(--fs-m);line-height:1.6;color:var(--text);background:#fff;word-break:keep-all}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,dl,dt,dd{margin:0;padding:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;border:0;vertical-align:top}
table{border-collapse:collapse}
button{font:inherit;cursor:pointer}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
.siteHeader{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #eceff2}
.headerInner{max-width:var(--max);margin:0 auto;padding:0 20px;height:72px;display:flex;align-items:center;justify-content:space-between}
.logo img{width:72px;height:35px}
.navlist{display:flex}
.navItem{position:relative}
.navItem>a{display:block;padding:0 26px;line-height:72px;font-size:var(--fs-m);font-weight:600;color:var(--ink);transition:color .15s}
.navItem:hover>a,.navItem.on>a{color:var(--primary)}
.subnav{display:none;position:absolute;top:66px;left:50%;transform:translateX(-50%);min-width:150px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(15,23,34,.12);text-align:center}
.navItem:hover .subnav{display:block}
.subnav a{display:block;padding:9px 16px;font-size:var(--fs-s);font-weight:500;border-radius:8px;white-space:nowrap}
.subnav a:hover{background:var(--soft);color:var(--primary-dark)}
.navToggle{display:none;width:44px;height:44px;border:0;background:none;padding:10px}
.navToggle span{display:block;height:2px;background:var(--ink);margin:5px 0}

/* ---------- sub page hero + tabs ---------- */
.subHero{position:relative;background:var(--dark);color:#fff;overflow:hidden}
.subHero:before{content:"";position:absolute;right:-10%;top:-60%;width:70%;height:220%;background:radial-gradient(closest-side,rgba(0,171,235,.34),rgba(0,171,235,0) 70%);pointer-events:none}
.subHero:after{content:"";position:absolute;left:-12%;bottom:-120%;width:46%;height:200%;background:radial-gradient(closest-side,rgba(255,170,90,.13),rgba(255,170,90,0) 70%);pointer-events:none}
.subHero .inner{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:64px 20px 58px}
.subHero .kicker{font-size:var(--fs-s);font-weight:700;letter-spacing:.18em;color:var(--primary)}
.subHero h1{margin-top:10px;font-size:46px;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.subHero .crumb{margin-top:14px;font-size:var(--fs-s);color:rgba(255,255,255,.55)}
.subHero .crumb a:hover{color:#fff}
.subHero .crumb strong{color:#fff;font-weight:600}
.subNav{position:sticky;top:72px;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.subNav ul{max-width:var(--max);margin:0 auto;padding:0 20px;display:flex;gap:34px;height:56px;overflow-x:auto}
.subNav a{display:block;line-height:56px;font-size:var(--fs-m);font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.subNav a:hover{color:var(--ink)}
.subNav a.active{color:var(--ink);border-bottom-color:var(--primary)}
main{min-height:50vh}
.sub main{padding-bottom:110px}
.ownTop main{padding-bottom:0}
.page{max-width:var(--max);margin:0 auto;padding:72px 20px 0}
.pageHead{margin-bottom:40px}
.pageHead .kicker{font-size:var(--fs-s);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--primary)}
.pageHead h2{margin-top:8px;font-size:var(--fs-xl);line-height:1.3;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.pageHead p{margin-top:14px;font-size:var(--fs-m);line-height:1.8;color:var(--muted);max-width:760px}
.pageHead p strong{color:var(--ink)}
.panel{background:var(--soft);border-radius:var(--radius);padding:40px}
.panel.center{text-align:center}
.block+.block{margin-top:72px}

/* ---------- footer ---------- */
.Footer{background:var(--dark);color:rgba(255,255,255,.55)}
.footer-wrap{max-width:var(--max);margin:0 auto;padding:44px 20px;display:flex;gap:34px;align-items:flex-start;font-size:var(--fs-s)}
.footer-logo img{width:72px;height:35px;filter:brightness(0) invert(1);opacity:.8}
.footer-top-wrap{margin-bottom:12px}
.footer-top-wrap a{color:#fff;font-weight:600}
.footer-top-wrap a:hover{color:var(--primary)}
.footer-wrap p{margin:3px 0;line-height:1.7}

/* ---------- buttons / badges ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;border-radius:24px;font-size:var(--fs-m);font-weight:700;border:1px solid var(--line);color:var(--ink);background:#fff;transition:background .2s,color .2s,border-color .2s}
.btn:hover{border-color:var(--ink)}
.btn.fill{background:var(--primary);border-color:var(--primary);color:#fff;align-self:flex-start}
.btn.fill:hover{background:#12bcfb;border-color:#12bcfb}
.badgeNew{display:inline-block;font-style:normal;font-size:var(--fs-s);font-weight:700;line-height:1;color:#fff;background:#ff5a36;padding:4px 7px;border-radius:10px;vertical-align:2px;margin-left:6px}
.badgeMall{display:inline-block;font-style:normal;font-size:var(--fs-s);font-weight:700;line-height:1;color:var(--primary-dark);border:1px solid var(--primary);padding:2px 6px;border-radius:9px;vertical-align:1px;margin-left:5px}

/* ---------- home : main slider ---------- */
.slider{position:relative;height:580px;overflow:hidden;background:var(--dark)}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
.slide.active{opacity:1;visibility:visible}
.slide>img{width:100%;height:100%;object-fit:cover}
.slide:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,12,.25),rgba(5,7,12,.55))}
.slideContent{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 60px 40px}
.slideIcon img{height:76px;width:auto;margin-bottom:22px}
.slideTitle{font-size:46px;font-weight:700;line-height:1.25;letter-spacing:-.02em;margin-bottom:18px}
.slideTitle span{color:var(--primary)}
.slideText{font-size:var(--fs-m);line-height:1.8;color:rgba(255,255,255,.78)}
.slideText span{color:#fff;font-weight:700}
.slideArrow{position:absolute;top:50%;z-index:3;width:48px;height:48px;margin-top:-44px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(5,7,12,.3);color:#fff;font-size:var(--fs-l);line-height:44px}
.slideArrow:hover{background:var(--primary);border-color:var(--primary)}
.slideArrow.prev{left:24px}
.slideArrow.next{right:24px}
.slideDots{position:absolute;left:0;right:0;bottom:78px;z-index:3;display:flex;justify-content:center;gap:8px}
.slideDots button,.promoDots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.4)}
.slideDots button.active,.promoDots button.active{width:26px;border-radius:5px;background:var(--primary)}

/* ---------- home : quick boxes ---------- */
.quick{max-width:var(--max);margin:-48px auto 0;padding:0 20px;position:relative;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quickBox{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 30px rgba(15,23,34,.08);padding:24px 28px;font-size:var(--fs-s);color:var(--muted);transition:border-color .15s,transform .15s}
a.quickBox:hover{border-color:var(--primary);transform:translateY(-3px)}
.quickBox h2{font-size:var(--fs-l);color:var(--ink);margin-top:4px;letter-spacing:-.01em}
.quickBox img{width:48px;height:48px}

/* ---------- home : sections ---------- */
.homeSection{max-width:var(--max);margin:0 auto;padding:96px 20px 0}
.homeSection:last-child{padding-bottom:110px}
.secTitle{margin-bottom:36px}
.secTitle .kicker{font-size:var(--fs-s);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--primary)}
.secTitle h2{margin-top:8px;font-size:var(--fs-xl);line-height:1.3;color:var(--ink);letter-spacing:-.02em}

/* 주요 제품·솔루션 홍보 슬라이드 */
.promo{position:relative;overflow:hidden;background:#0b1320;border-radius:var(--radius)}
.promoTrack{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.promoSlide{flex:0 0 100%;display:grid;grid-template-columns:1.1fr 1fr;min-height:420px;color:#fff}
.promoSlide .pic{display:flex;align-items:center;justify-content:center;background:#eef1f4;padding:36px;overflow:hidden}
.promoSlide .pic img{max-width:100%;max-height:320px;object-fit:contain}
.promoSlide .pic:not(.cover) img{mix-blend-mode:multiply}
.promoSlide .pic.cover{padding:0;background:var(--dark)}
.promoSlide .pic.cover img{width:100%;height:100%;max-height:none;object-fit:cover}
.promoSlide .txt{padding:48px 76px 64px 52px;display:flex;flex-direction:column;justify-content:center}
.promoSlide .tag{color:var(--primary);font-weight:700;font-size:var(--fs-s);letter-spacing:.14em}
.promoSlide h3{font-size:var(--fs-xl);line-height:1.3;letter-spacing:-.02em;margin:8px 0 12px}
.promoSlide p{color:rgba(255,255,255,.7);font-size:var(--fs-m);line-height:1.8}
.promoSlide .facts{display:flex;gap:28px;margin:24px 0 28px}
.promoSlide .facts strong{display:block;font-size:var(--fs-l);font-weight:300;letter-spacing:-.02em;color:#fff}
.promoSlide .facts span{font-size:var(--fs-s);color:rgba(255,255,255,.55)}
.promoSlide .points{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 28px}
.promoSlide .points li{padding:6px 14px;border:1px solid rgba(255,255,255,.25);border-radius:16px;font-size:var(--fs-s);color:#e6ebf0}
.promoArrow{position:absolute;top:50%;z-index:3;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;background:rgba(11,19,32,.55);color:#fff;font-size:var(--fs-l);line-height:44px;transition:background .2s}
.promoArrow:hover{background:var(--primary)}
.promoArrow.prev{left:14px}
.promoArrow.next{right:14px}
.promoDots{position:absolute;right:52px;bottom:26px;z-index:3;display:flex;gap:8px}

.techGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.techItem{border-radius:var(--radius);background:var(--soft);overflow:hidden;transition:transform .25s,box-shadow .25s}
.techItem:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(15,23,34,.1)}
.techItem .thumb{height:200px;background-size:cover;background-position:50%}
.techItem .detail{padding:26px 28px 30px}
.techItem h3{font-size:var(--fs-l);color:var(--ink);margin-bottom:10px;letter-spacing:-.01em}
.techItem p{font-size:var(--fs-s);color:var(--muted);line-height:1.8}

/* ---------- company : about ---------- */
.valueGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.valueGrid li{background:var(--soft);border-radius:var(--radius);padding:34px 30px}
.valueGrid .no{font-size:var(--fs-s);font-weight:700;color:var(--primary);letter-spacing:.1em}
.valueGrid h3{margin:10px 0 0;font-size:var(--fs-l);color:var(--ink);letter-spacing:-.01em}
.valueGoal{margin-top:16px;border-radius:var(--radius);background:linear-gradient(140deg,#0b1626 0%,#05070c 70%);color:#fff;padding:44px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.valueGoal span{font-size:var(--fs-s);font-weight:700;letter-spacing:.16em;color:var(--primary)}
.valueGoal strong{font-size:var(--fs-xl);font-weight:300;letter-spacing:-.02em}

/* ---------- company : history ---------- */
.timeline{position:relative;max-width:820px}
.timeline:before{content:"";position:absolute;left:119px;top:10px;bottom:10px;width:1px;background:var(--line)}
.timeline>li{position:relative;display:grid;grid-template-columns:120px 1fr;padding:0 0 46px}
.timeline>li:last-child{padding-bottom:0}
.timeline>li:before{content:"";position:absolute;left:113px;top:9px;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--primary)}
.timeline .year{font-size:var(--fs-xl);line-height:1;font-weight:300;letter-spacing:-.02em;color:var(--ink)}
.timeline .year small{display:block;margin-top:6px;font-size:var(--fs-s);font-weight:700;letter-spacing:.1em;color:var(--primary)}
.timeline ul{padding-left:36px}
.timeline ul li{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:5px 0;font-size:var(--fs-m);color:var(--text)}
.timeline ul li span{font-size:var(--fs-s);font-weight:700;color:var(--muted);padding-top:2px}

/* ---------- company : organization ---------- */
.orgWrap{display:grid;grid-template-columns:2.3fr 1fr;gap:16px;align-items:start}
.org{background:var(--soft);border-radius:var(--radius);padding:34px 28px}
.org .top{display:block;width:max-content;max-width:100%;margin:0 auto;padding:14px 34px;border-radius:12px;background:var(--ink);color:#fff;font-size:var(--fs-m);font-weight:700;text-align:center}
.org .staff{display:flex;justify-content:center;gap:12px;margin:18px 0;padding:18px 0;border-top:1px dashed #cfd6dd;border-bottom:1px dashed #cfd6dd}
.org .staff span{padding:10px 22px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:var(--fs-s);font-weight:600}
.org .depts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.org .depts.two{grid-template-columns:repeat(2,1fr)}
.org .dept h3{padding:12px 8px;border-radius:10px;background:var(--primary);color:#fff;font-size:var(--fs-m);text-align:center}
.org .dept ul{margin-top:8px}
.org .dept li{margin-top:6px;padding:10px 8px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:var(--fs-s);text-align:center}

/* ---------- image frames (인증서, 취급브랜드 등) ---------- */
.frame{background:var(--soft);border-radius:var(--radius);padding:34px;text-align:center}
.frame img{border-radius:8px;mix-blend-mode:multiply}
.frame.white{background:#fff;border:1px solid var(--line)}
.frame.white img{mix-blend-mode:normal}
.frame+.frame{margin-top:16px}
.frame h3{margin-bottom:22px;font-size:var(--fs-m);color:var(--ink);text-align:left}

/* ---------- business history ---------- */
.historyBlock{max-width:var(--max);margin:0 auto;padding:72px 20px 0}
.historyBlock+.historyBlock{padding-top:80px}
.historyBlock h1{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-bottom:24px}
.historyBlock table{width:100%;border-top:1px solid var(--ink);font-size:var(--fs-s)}
.historyBlock th{padding:14px 16px;text-align:left;font-size:var(--fs-s);font-weight:700;color:var(--muted);border-bottom:1px solid var(--line)}
.historyBlock td{padding:22px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:2}
.historyBlock td:first-child{width:190px;padding-left:0}
.historyBlock td:first-child span{display:inline-block;font-size:var(--fs-m);font-weight:700;color:var(--ink);line-height:1.5}
.historyBlock td:nth-child(2){width:260px;font-weight:600;color:var(--ink)}
.historyBlock td:nth-child(3){color:var(--muted)}

/* ---------- product list ---------- */
.brandNav{max-width:var(--max);margin:0 auto;padding:36px 20px 0;display:flex;flex-wrap:wrap;gap:8px}
.brandNav a{padding:8px 18px;border-radius:19px;border:1px solid var(--line);font-size:var(--fs-s);font-weight:600;color:var(--muted);transition:.15s}
.brandNav a:hover{border-color:var(--ink);color:var(--ink)}
.productWrap{max-width:var(--max);margin:0 auto;padding:28px 20px 0}
.productWrap>div,.productWrap>a.solutionCardLink{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:8px 36px 30px;margin:0 0 20px;font-size:var(--fs-s);background:#fff;scroll-margin-top:150px}
.productWrap>div>h1{position:relative;font-size:var(--fs-l);font-weight:700;letter-spacing:-.02em;color:var(--ink);padding:26px 180px 22px 0;border-bottom:1px solid var(--line)}
.productWrap>div>h1>span{position:absolute;top:50%;right:0;transform:translateY(-50%)}
.productWrap>div>h1>span img{max-height:40px;width:auto}
.productWrap dl{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:36px;align-items:center;padding:28px 0}
.productWrap dl>dt{text-align:center;background:var(--soft);border-radius:14px;padding:26px}
.productWrap dl>dt img{mix-blend-mode:multiply;max-height:260px;width:auto}
.productWrap dl>dd{font-size:var(--fs-m);line-height:1.9;color:var(--muted)}
.productWrap dl h2{font-size:var(--fs-l);color:var(--ink);margin:0 0 12px;letter-spacing:-.01em}
.productWrap dd p{margin:0 0 12px}
.productWrap dd strong{color:var(--ink)}
.productWrap dd table{width:100%;font-size:var(--fs-s);margin-top:6px;border-top:1px solid var(--ink)}
.productWrap dd table thead{display:none}
.productWrap dd table td{padding:8px 10px;border-bottom:1px solid var(--line);line-height:1.5;color:var(--text)}
.productWrap dd table td:first-child{width:32%;color:var(--muted)}
.productWrap dd ul li{font-size:var(--fs-s);line-height:1.9}
.productWrap>div>div:not([class]){display:flex;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)}
.productWrap>div>div:not([class])>div{padding:0 16px 8px 0}
.productWrap>div>div>div>h2{font-size:var(--fs-s);font-weight:700;letter-spacing:.04em;color:var(--primary-dark);margin:0 0 10px}
.productWrap>div>div:not([class])>div>p{margin:29px 0 6px;font-size:var(--fs-s);font-weight:600;color:var(--muted)}
.productWrap>div>div:not([class])>div>h2+p{margin-top:0}
.productWrap>div>div>div>ul{display:flex;flex-wrap:wrap}
.productWrap>div>div>div>ul>li{flex:0 0 100%;padding:4px 8px 4px 0;font-size:var(--fs-s);color:var(--text)}
.productWrap ul.twoLine>li{flex-basis:50%}
.productWrap ul.threeLine>li{flex-basis:33.33%}
.productWrap ul.fourLine>li{flex-basis:25%}
.productWrap li.hasDetail a,.productWrap li.inMall a{color:var(--primary-dark);font-weight:700}
.productWrap li.hasDetail a:hover,.productWrap li.inMall a:hover{text-decoration:underline}

/* 목록의 '상세 페이지가 있는 제품' 카드 */
.productWrap>a.solutionCardLink.compact{display:flex;align-items:center;gap:28px;padding:20px 30px 20px 20px;background:linear-gradient(140deg,#0b1626 0%,#05070c 70%);border-color:transparent;color:#fff;transition:transform .2s,box-shadow .2s}
.productWrap>a.solutionCardLink.compact:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(15,23,34,.2)}
.compact .thumb{flex:0 0 210px;height:124px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;overflow:hidden;padding:8px}
.compact .thumb img{max-width:100%;max-height:100%;object-fit:contain}
.compact .info{flex:1;min-width:0}
.compact .cat{display:block;font-size:var(--fs-s);font-weight:700;letter-spacing:.1em;color:var(--primary)}
.compact .name{display:block;font-size:var(--fs-l);letter-spacing:-.01em;margin:4px 0 6px}
.compact .desc{display:block;font-size:var(--fs-s);color:rgba(255,255,255,.65);line-height:1.6}
.compact .go{flex:0 0 auto;height:44px;line-height:44px;padding:0 22px;border-radius:22px;background:var(--primary);font-size:var(--fs-s);font-weight:700}

/* 예전 형식 상세 페이지용 (crumbBar) */
.crumbBar{max-width:var(--max);margin:0 auto;padding:28px 20px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.backLink{display:inline-flex;align-items:center;height:36px;padding:0 16px;border:1px solid var(--line);border-radius:18px;font-size:var(--fs-s);font-weight:600;color:var(--ink)}
.backLink:hover{border-color:var(--ink)}
.crumb{font-size:var(--fs-s);color:var(--muted)}

/* ---------- location ---------- */
.mapBox{height:460px;border-radius:var(--radius);background:var(--soft);overflow:hidden}
.mapInfo{margin-top:16px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.mapInfo div{background:var(--soft);border-radius:var(--radius);padding:28px}
.mapInfo h2{font-size:var(--fs-s);font-weight:700;letter-spacing:.1em;color:var(--primary);margin-bottom:8px}
.mapInfo p{color:var(--ink);font-size:var(--fs-m);font-weight:600;line-height:1.7}

/* ---------- support ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:s}
.steps li{position:relative;background:var(--soft);border-radius:var(--radius);padding:28px 22px 30px}
.steps li:not(:last-child):after{content:"›";position:absolute;right:-12px;top:50%;margin-top:-13px;width:24px;height:26px;line-height:24px;text-align:center;font-size:var(--fs-l);color:var(--primary);background:#fff;border-radius:50%;z-index:1}
.steps .no{font-size:var(--fs-s);font-weight:700;letter-spacing:.14em;color:var(--primary)}
.steps h3{margin:8px 0 12px;font-size:var(--fs-l);line-height:1.4;color:var(--ink);letter-spacing:-.01em}
.steps p{font-size:var(--fs-s);line-height:1.7;color:var(--muted)}
.steps em{display:block;margin-top:8px;font-style:normal;font-size:var(--fs-s);color:#d9482b}
.serviceGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.serviceGrid li{border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px}
.serviceGrid svg{width:40px;height:40px;fill:none;stroke:var(--primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.serviceGrid h3{margin:20px 0 8px;font-size:var(--fs-l);color:var(--ink)}
.serviceGrid p{font-size:var(--fs-s);line-height:1.7;color:var(--muted)}
.serviceGrid small{display:block;margin-top:4px;font-size:var(--fs-s);color:#8490a0}

/* ---------- contact ---------- */
.contactGrid{display:grid;grid-template-columns:1fr 1.5fr;gap:16px;align-items:start}
.contactInfo{border-radius:var(--radius);background:linear-gradient(140deg,#0b1626 0%,#05070c 70%);color:#fff;padding:40px 36px}
.contactInfo h3{font-size:var(--fs-l);line-height:1.4;letter-spacing:-.01em}
.contactInfo dl{margin-top:30px}
.contactInfo dt{margin-top:22px;font-size:var(--fs-s);font-weight:700;letter-spacing:.12em;color:var(--primary)}
.contactInfo dd{margin-top:4px;font-size:var(--fs-m);line-height:1.6;color:rgba(255,255,255,.85)}
.contactInfo dd strong{font-size:var(--fs-l);font-weight:300;color:#fff}
.contactWrap{border:1px solid var(--line);border-radius:var(--radius);padding:40px 36px}
.contactWrap .req{color:var(--muted);font-size:var(--fs-s);margin-bottom:18px}
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.formGrid .full{grid-column:1/-1}
.formGrid label{display:block;font-size:var(--fs-s);font-weight:700;color:var(--ink);margin-bottom:7px}
.formGrid input[type=text],.formGrid input[type=email],.formGrid input[type=tel],.formGrid textarea{width:100%;padding:13px 16px;border:1px solid #d5dbe1;border-radius:10px;font:inherit;background:#fff;transition:border-color .15s,box-shadow .15s}
.formGrid input:focus,.formGrid textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px rgba(0,171,235,.15)}
.formGrid textarea{height:190px;resize:vertical}
.hp{position:absolute;left:-9999px}
.agree{margin:20px 0;font-size:var(--fs-s)}
.agree a{color:var(--primary-dark);text-decoration:underline}
.contactWrap button[type=submit]{min-width:180px;height:52px;border:0;border-radius:26px;background:var(--primary);color:#fff;font-size:var(--fs-m);font-weight:700;transition:background .2s}
.contactWrap button[type=submit]:hover{background:#12bcfb}
.contactWrap button[disabled]{opacity:.6;cursor:default}
.formMsg{margin-top:16px;font-weight:700}
.formMsg.ok{color:#0a8f4d}
.formMsg.err{color:#d93025}

/* ---------- privacy ---------- */
.policy{max-width:820px;margin:0 auto;padding:72px 20px 0;font-size:var(--fs-m);line-height:1.95;color:var(--text)}
.policy p{margin:34px 0 10px;font-size:var(--fs-m);color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .navItem>a{padding:0 16px;font-size:var(--fs-m)}
  .techGrid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .steps li:after{display:none}
  .serviceGrid{grid-template-columns:repeat(2,1fr)}
  .orgWrap{grid-template-columns:1fr}
  .org .depts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .headerInner{height:60px}
  .navToggle{display:block}
  .siteNav{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 14px 24px rgba(15,23,34,.12);max-height:calc(100vh - 60px);overflow:auto}
  .siteNav.open{display:block}
  .navlist{display:block}
  .navItem>a{line-height:50px;padding:0 20px;border-bottom:1px solid #f0f2f4}
  .subnav{display:block;position:static;transform:none;border:0;border-radius:0;box-shadow:none;background:var(--soft);text-align:left;padding:6px 0}
  .subnav a{padding:9px 34px;border-radius:0}
  .subHero .inner{padding:40px 20px 36px}
  .subHero h1{font-size:var(--fs-xl)}
  .subNav{top:60px}
  .subNav ul{gap:22px;height:48px}
  .subNav a{line-height:48px;font-size:var(--fs-s)}
  .sub main{padding-bottom:70px}
  .page,.historyBlock,.policy{padding-top:48px}
  .pageHead{margin-bottom:28px}
  .pageHead h2{font-size:var(--fs-l)}
  .pageHead p{font-size:var(--fs-m)}
  .pageHead p br{display:none}
  .panel{padding:24px}
  .block+.block{margin-top:52px}
  .footer-wrap{flex-direction:column;gap:14px;padding:34px 20px}
  .slider{height:440px}
  .slideContent{padding:0 24px 30px}
  .slideIcon img{height:54px}
  .slideTitle{font-size:var(--fs-xl)}
  .slideText{font-size:var(--fs-s)}
  .slideText br{display:none}
  .slideArrow{display:none}
  .slideDots{bottom:22px}
  .quick{grid-template-columns:1fr;margin-top:16px}
  .homeSection{padding-top:60px}
  .homeSection:last-child{padding-bottom:70px}
  .secTitle h2{font-size:var(--fs-l)}
  .promoSlide{grid-template-columns:1fr;grid-template-rows:200px 1fr;min-height:0}
  .promoSlide .pic{padding:20px}
  .promoSlide .pic img{max-height:160px}
  .promoSlide .txt{padding:26px 22px 60px;justify-content:flex-start}
  .promoSlide h3{font-size:var(--fs-l)}
  .promoSlide .facts{flex-wrap:wrap;gap:16px 24px}
  .promoArrow{top:100px}
  .promoDots{right:auto;left:22px;bottom:24px}
  .techGrid{grid-template-columns:1fr}
  .valueGrid{grid-template-columns:1fr}
  .valueGoal{padding:30px 26px}
  .valueGoal strong{font-size:var(--fs-xl)}
  .timeline:before{left:5px}
  .timeline>li{grid-template-columns:1fr;padding-left:30px}
  .timeline>li:before{left:-1px;top:8px}
  .timeline ul{padding-left:0;margin-top:12px}
  .org{padding:24px 16px}
  .org .staff{flex-wrap:wrap}
  .frame{padding:18px}
  .historyBlock{overflow-x:auto}
  .historyBlock h1{font-size:var(--fs-l)}
  .historyBlock table{min-width:680px}
  .brandNav{padding-top:24px}
  .productWrap{padding:20px 12px 0}
  .productWrap>div,.productWrap>a.solutionCardLink{padding:4px 20px 22px}
  .productWrap>div>h1{font-size:var(--fs-l);padding:20px 0 16px}
  .productWrap>div>h1>span{display:none}
  .productWrap dl{grid-template-columns:1fr;gap:18px;padding:20px 0}
  .productWrap dl>dd{font-size:var(--fs-m)}
  .productWrap>div>div:not([class])>div{flex:0 0 100%;width:100%!important;padding-right:0}
  .productWrap>div>div:not([class])>div>p{margin-top:14px}
  .productWrap ul.twoLine>li{flex-basis:100%}
  .productWrap ul.threeLine>li,.productWrap ul.fourLine>li{flex-basis:50%}
  .productWrap>a.solutionCardLink.compact{flex-wrap:wrap;gap:14px;padding:16px}
  .compact .thumb{flex:0 0 100%;height:150px}
  .compact .go{flex:1 0 100%;text-align:center}
  .crumbBar{flex-direction:column;align-items:flex-start}
  .mapBox{height:320px}
  .mapInfo{grid-template-columns:1fr}
  .steps,.serviceGrid{grid-template-columns:1fr}
  .contactGrid{grid-template-columns:1fr}
  .contactInfo,.contactWrap{padding:28px 22px}
  .formGrid{grid-template-columns:1fr}
}

/* ---------- 미세 조정 ---------- */
.historyBlock th:first-child{padding-left:0}
.org .staff:empty{margin:18px 0 0;padding:0;border-bottom:0}
.productWrap>div>div:not([class])>div[style*="100%"]{margin-top:14px}

/* ---------- 원형 화살표: 글자(‹ ›) 대신 도형으로 그려 정확히 가운데 정렬 ---------- */
.slideArrow,.promoArrow{display:flex;align-items:center;justify-content:center;padding:0;font-size:0;line-height:0}
.slideArrow:before,.promoArrow:before{content:"";width:10px;height:10px;border-left:2px solid #fff;border-bottom:2px solid #fff}
.slideArrow.prev:before,.promoArrow.prev:before{transform:translateX(2.5px) rotate(45deg)}
.slideArrow.next:before,.promoArrow.next:before{transform:translateX(-2.5px) rotate(-135deg)}
.steps li:not(:last-child):after{content:"";width:8px;height:8px;margin-top:-5px;right:-8px;line-height:0;border-radius:0;background:none;border-top:2px solid var(--primary);border-right:2px solid var(--primary);transform:rotate(45deg)}
.steps li:not(:last-child):before{content:"";position:absolute;right:-18px;top:50%;margin-top:-12px;width:24px;height:24px;border-radius:50%;background:#fff;z-index:1}
.steps li:not(:last-child):after{z-index:2}

/* ---------- 맨 위로 버튼 (조금 내려가면 오른쪽 아래에 나타남) ---------- */
.toTop{position:fixed;right:24px;bottom:24px;z-index:90;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--ink);box-shadow:0 8px 20px rgba(15,23,34,.25);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s,background .2s}
.toTop.show{opacity:1;visibility:visible;transform:none}
.toTop:hover{background:var(--primary)}
.toTop:before{content:"";width:10px;height:10px;border-left:2px solid #fff;border-top:2px solid #fff;transform:translateY(2.5px) rotate(45deg)}
@media (max-width:768px){.toTop{right:16px;bottom:16px;width:44px;height:44px}}

/* ---------- 제품 목록 블록 안의 '상세 보기' 버튼 ---------- */
.productWrap dd .detailBtnWrap{margin:22px 0 0}
.detailBtn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;border-radius:22px;background:var(--primary);color:#fff;font-size:var(--fs-s);font-weight:700;transition:background .2s}
.detailBtn:hover{background:#12bcfb}
.productWrap dl>dt.photo{padding:0;overflow:hidden;background:var(--dark)}
.productWrap dl>dt.photo img{display:block;width:100%;max-height:none;mix-blend-mode:normal}

/* '상세 보기' 버튼을 눈에 띄게: 큰 하늘색 버튼 + 둥근 화살표, 해당 블록은 하늘색 테두리 */
.productWrap dd .detailBtnWrap{margin:26px 0 0}
.detailBtn{height:56px;padding:0 10px 0 30px;gap:16px;border-radius:28px;font-size:var(--fs-m);letter-spacing:-.01em;box-shadow:0 10px 24px rgba(0,171,235,.35);transition:background .2s,transform .2s,box-shadow .2s}
.detailBtn:after{content:"";flex:0 0 38px;height:38px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230089bd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") 50%/18px no-repeat;transition:transform .2s}
.detailBtn:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,171,235,.45)}
.detailBtn:hover:after{transform:translateX(3px)}
@media (max-width:768px){.detailBtn{width:100%;justify-content:space-between}}

/* ---------- 오시는길: 네이버 지도 ---------- */
.mapBox{position:relative}
.mapBox #map{width:100%;height:100%}
.mapFallback{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;text-align:center;background:var(--soft)}
.mapFallback.show{display:flex}
.mapFallback p{font-size:var(--fs-m);line-height:1.7;color:var(--muted)}
.mapFallback strong{display:block;font-size:var(--fs-l);color:var(--ink)}
.mapLinks{margin-top:12px;text-align:right;font-size:var(--fs-s);font-weight:700}
.mapLinks a{color:var(--primary-dark)}
.mapLinks a:hover{text-decoration:underline}

/* ---------- 인증/특허: 인증서 목록 + 크게 보기 ---------- */
.blockTitle{margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--ink);font-size:var(--fs-l);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.blockTitle small{margin-left:10px;font-size:var(--fs-s);font-weight:400;color:var(--muted)}
.certGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.certGrid.c3{grid-template-columns:repeat(3,1fr)}
.certItem{display:block;height:100%;cursor:zoom-in}
.certItem .thumb{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--soft);padding:14px;transition:border-color .2s,box-shadow .2s,transform .2s}
.certItem .thumb img{display:block;width:100%;border-radius:4px;box-shadow:0 2px 10px rgba(15,23,34,.12)}
.certItem:hover .thumb{border-color:var(--primary);box-shadow:0 14px 30px rgba(0,171,235,.16);transform:translateY(-3px)}
.certItem strong{display:block;margin-top:14px;font-size:var(--fs-m);color:var(--ink);line-height:1.4}
.certItem small{display:block;margin-top:5px;font-size:var(--fs-s);line-height:1.6;color:var(--muted)}
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(5,7,12,.86);cursor:zoom-out}
.lightbox.show{display:flex}
.lightbox img{max-width:100%;max-height:100%;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#fff}
.lightbox button{position:absolute;top:18px;right:18px;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:var(--fs-l);line-height:46px;padding:0}
.lightbox button:hover{background:var(--primary)}
@media (max-width:1024px){.certGrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.certGrid,.certGrid.c3{grid-template-columns:repeat(2,1fr);gap:14px}.certItem .thumb{padding:8px}.blockTitle{font-size:var(--fs-l)}.blockTitle small{display:block;margin:4px 0 0}}

.certMore{margin-top:28px}

/* 회사개요 'OUR GOAL 고객대만족' 띠: 파란색 배경 */
.valueGoal{background:linear-gradient(120deg,#00abeb 0%,#0089d6 100%)}
.valueGoal span{color:rgba(255,255,255,.85)}

/* 문의하기: 안내 박스와 입력폼 박스 높이를 같게 */
.contactGrid{align-items:stretch}

/* ---------- 취급브랜드: 분류별 로고 카드 ---------- */
.brandGroup+.brandGroup{margin-top:64px}
.brandGroup .blockTitle{display:flex;align-items:baseline}
.brandGroup .blockTitle em{margin-left:auto;font-style:normal;font-size:var(--fs-s);font-weight:700;color:var(--primary-dark);background:var(--primary-soft);padding:3px 12px;border-radius:12px}
.brandGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.brandGrid li{display:flex;align-items:center;justify-content:center;height:112px;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s}
.brandGrid li:hover{border-color:var(--primary);box-shadow:0 12px 26px rgba(0,171,235,.14);transform:translateY(-3px)}
.brandGrid img{max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain}
@media (max-width:1024px){.brandGrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:768px){.brandGrid{grid-template-columns:repeat(2,1fr);gap:10px}.brandGrid li{height:92px;padding:14px}.brandGroup+.brandGroup{margin-top:44px}}
.brandGrid img[src$=".svg"]{width:100%;height:56px;max-width:170px}
.brandGrid li{padding:18px 22px}

/* 조직도: 본사 하나만 남아 가로 전체 사용 */
.orgWrap{grid-template-columns:1fr}

/* ---------- 회사개요: 소개 이미지 + 가치 카드 이미지 ---------- */
.aboutVisual{position:relative;margin:0 0 16px;height:340px;border-radius:var(--radius);overflow:hidden;background:var(--dark)}
.aboutVisual img{width:100%;height:100%;object-fit:cover}
.aboutVisual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,12,.55) 0%,rgba(5,7,12,0) 60%),linear-gradient(0deg,rgba(0,171,235,.18),rgba(0,171,235,0) 55%)}
.valueGrid li{padding:0;overflow:hidden;display:flex;flex-direction:column}
.valueGrid .pic{display:block;height:190px;overflow:hidden;background:var(--dark)}
.valueGrid .pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.valueGrid li:hover .pic img{transform:scale(1.05)}
.valueGrid li>div{padding:26px 30px 30px}
@media (max-width:768px){.aboutVisual{height:200px}.valueGrid .pic{height:160px}.valueGrid li>div{padding:22px 24px 24px}}
/* OUR GOAL 띠: 파란 바탕 아래로 사진이 은은하게 비치게 */
.valueGoal{position:relative;overflow:hidden;min-height:180px;isolation:isolate}
.valueGoal .bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.valueGoal:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,rgba(0,171,235,.92) 0%,rgba(0,137,214,.82) 55%,rgba(0,110,190,.7) 100%)}

/* 회사개요: 소개 문장을 사진 위에 */
.aboutVisual{height:auto;min-height:420px;display:flex;align-items:flex-end}
.aboutVisual>img{position:absolute;inset:0}
.aboutVisual:after{background:linear-gradient(90deg,rgba(5,7,12,.88) 0%,rgba(5,7,12,.6) 50%,rgba(5,7,12,.15) 100%),linear-gradient(0deg,rgba(0,171,235,.22),rgba(0,171,235,0) 60%)}
.aboutVisual .txt{position:relative;z-index:1;padding:56px 56px 52px;color:#fff;max-width:900px}
.aboutVisual .kicker{font-size:var(--fs-s);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--primary)}
.aboutVisual h2{margin-top:10px;font-size:var(--fs-xl);line-height:1.3;letter-spacing:-.02em}
.aboutVisual .lead{margin-top:18px;font-size:var(--fs-m);line-height:1.9;color:rgba(255,255,255,.75)}
.aboutVisual .lead strong{color:#fff}
@media (max-width:768px){.aboutVisual{min-height:360px}.aboutVisual .txt{padding:32px 24px}.aboutVisual .lead br{display:none}}

/* 하위 메뉴(탭) 줄의 스크롤바 숨김: 좁은 화면에서는 손가락으로 밀어서 넘길 수 있고 막대만 보이지 않는다 */
.subNav ul,.pdNav ul{overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.subNav ul::-webkit-scrollbar,.pdNav ul::-webkit-scrollbar{display:none}