/* The8.Lab — 공용 스타일 */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff}
body{font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#000}
a{color:#000;text-decoration:none}
a:hover{background:linear-gradient(60deg,#5B1FDB,#007a7a);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
h1,h2,h3,p{margin:0}
img{display:block}
.back-gray{background:#E8EBEF;}


/* 레이아웃 */
.frame{display:flex;align-items:stretch;min-height:100vh}
#site-nav{position:fixed;top:0;bottom:0;left:0;width:240px;border-right:1px solid rgba(0,0,0,0.1);display:flex;flex-direction:column;align-items:stretch;background:#fff;z-index:100;}
.nav-wrap{width:100%;height:100%;flex-shrink:0;border-right:1px solid rgba(0,0,0,0);}
.content{flex:1;min-width:0;margin-left:240px;display:flex;flex-direction:column}
.br-pc{display:block;}
.back-gary{background:#E8EBEF}

/* 사이드바 */
.sidebar{width:100%;min-height:100vh;display:flex;flex-direction:column;background:rgba(255,255,255,0);}
.logo-box{height:150px;padding:55px 30px 45px;display:flex;align-items:center}
.logo-box a{display:flex;align-items:center;gap:10px}
.logo-box img{width:auto;height:auto}
.logo-box img:first-child{width:48px;}
.logo-box img:last-child{width:107px;}
@keyframes logo-symbol-spin{
  0%{transform:rotate(0deg)}
  5%,10%{transform:rotate(135deg)}
  15%,20%{transform:rotate(180deg)}
  25%,30%{transform:rotate(315deg)}
  35%,40%{transform:rotate(360deg)}
  100%{transform:rotate(360deg)}
}
.logo-box img:first-child{animation:logo-symbol-spin 4.2s linear infinite;transform-origin:center}
.side-menu{border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);height:270px;padding:47px 35px;display:flex;flex-direction:column;gap:26px}
.side-menu a{font-weight:600;font-size:clamp(17px, .18vw + 16.43px, 19px);line-height:1.2;letter-spacing:-.04em;white-space:nowrap;padding-bottom:1px;}
.side-menu a:not(.download-kit):not(.active):hover,.m-menu a:not(.download-kit):not(.active):hover{background:linear-gradient(60deg,#5B1FDB,#007a7a);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.side-menu a.active,.m-menu a.active{align-self:flex-start;padding-bottom:1px;border-bottom:1px solid #000;background:none;color:#000;-webkit-text-fill-color:#000;text-decoration:none}
.download-kit{margin:47px 35px;box-shadow:inset 0 0 0 1px #dcdfe3;padding:15px 20px;display:flex;justify-content:center;align-items:center;font-size:clamp(15px, .09vw + 14.71px, 16px);font-weight:500;letter-spacing:-.04em;color:#212121;}
.download-kit:hover,.download-kit.active{background:#222;box-shadow:inset 0 0 0 1px #222;color:#fff;-webkit-text-fill-color:#fff}

/* 모바일 헤더 */
.m-head{display:none;position:fixed;top:0;left:0;right:0;height:60px;background:#fff;border-bottom:1px solid rgba(0,0,0,.1);z-index:200;align-items:center;justify-content:space-between;padding:0 16px}
.m-head > a{padding-top:8px}
.m-head img{height:40px;width:auto}
.m-burger{background:none;border:none;padding:8px;cursor:pointer;display:flex}
.m-menu{display:none;position:fixed;top:60px;left:0;right:0;bottom:0;background:#fff;z-index:199;flex-direction:column;padding:30px 24px;gap:28px}
.m-menu a{font-size:clamp(16px, .09vw + 15.71px, 17px);font-weight:500;letter-spacing:-.04em}
.m-menu .download-kit{margin:12px 0 0;padding:12px 20px}
body.menu-open .m-menu{display:flex}

/* 섹션 공통 */
.sec{display:flex;flex-direction:column;gap:45px;padding:70px 50px;align-items:center}
.sec-head{display:flex;flex-direction:column;gap:15px;align-items:center;align-self:stretch;padding:0;}
.rule-title{display:flex;gap:10px;align-items:center;font-weight:600;font-size:clamp(20px, .36vw + 18.86px, 24px);line-height:1.5;letter-spacing:-.04em;white-space:nowrap}
.rule-title::before,.rule-title::after{content:"";width:30px;height:1px;background:#000}
.sec-title{font-weight:600;font-size:clamp(26px, .89vw + 23.14px, 36px);text-align:center;line-height:1.35;letter-spacing:-.04em}
.sec-sub{font-weight:500;font-size:clamp(17px, .27vw + 16.14px, 20px);text-align:center;line-height:1.5;letter-spacing:-.01em;}
.sec-text{display:flex;flex-direction:column;gap:10px;align-items:center;max-width:760px}
.mid-title{font-weight:600;font-size:clamp(22px, .36vw + 20.86px, 26px);text-align:center;line-height:1.5;letter-spacing:-.04em}
.body-text{font-weight:400;font-size:clamp(17px, .18vw + 16.43px, 19px);text-align:center;line-height:1.5;letter-spacing:-.03em;color:#212121}
.body-text.gray{color:#575757}
.prod-title{font-weight:600;font-size:clamp(25px, .45vw + 23.57px, 30px);text-align:center;line-height:1.5;letter-spacing:-.04em}
.prod-lead{font-weight:600;font-size:clamp(18px, .36vw + 16.85px, 22px);text-align:center;line-height:1.3;letter-spacing:-.04em;}
.prod-desc{width:100%;max-width:1024px;font-weight:400;font-size:clamp(16px, .18vw + 15.43px, 18px);text-align:justify;line-height:1.5;letter-spacing:-.03em;color:#212121}
.sec-head .prod-desc:first-child{padding-top:20px}
.sec-head .prod-desc{padding-top:0}
.dual-title{display:flex;flex-direction:column;gap:0px;align-items:center}

/* gardation background setting */ 
.hero{position:relative;height:100vh;overflow:hidden;container-type:inline-size;background:radial-gradient(circle at 50% 45%,#102127 0%,#071313 52%,#020504 100%);isolation:isolate}
.hero::before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 8% 78%,rgba(255,235,32,.95) 0,rgba(255,235,32,0) 28%),radial-gradient(circle at 20% 18%,rgba(255,104,22,.85) 0,rgba(255,104,22,0) 30%),radial-gradient(circle at 42% 82%,rgba(107,18,255,.82) 0,rgba(107,18,255,0) 27%),radial-gradient(circle at 82% 72%,rgba(0,215,143,.88) 0,rgba(0,215,143,0) 32%),radial-gradient(circle at 92% 18%,rgba(16,126,92,.62) 0,rgba(16,126,92,0) 26%);background-size:115% 135%,135% 130%,125% 145%,140% 135%,130% 130%;background-position:0% 100%,100% 0%,35% 100%,100% 100%,100% 0%;filter:blur(32px);animation:hero-gradient-flow 6s ease-in-out infinite alternate;transform:translateZ(0)}
@keyframes hero-gradient-flow{
  0%{background-position:-20% 120%,120% -20%,25% 120%,120% 120%,120% -20%;transform:scale(1)}
  25%{background-position:35% 75%,85% 25%,55% 95%,75% 55%,95% 15%;transform:scale(1.1)}
  50%{background-position:110% 105%,20% 55%,90% 70%,35% 95%,55% 45%;transform:scale(1.18)}
  75%{background-position:70% 25%,-10% 85%,20% 45%,105% 25%,15% 90%;transform:scale(1.1)}
  100%{background-position:125% 80%,55% 115%,105% 20%,10% 70%,75% -15%;transform:scale(1.22)}
}
/* hero-overlay:공백 없는 15초 */
.hero-overlay{position:absolute;inset:0;margin:auto;width:100%;height:100vh;clip-path:inset(0 0 2% 0);top:4vh;border:0;background:transparent!important;mix-blend-mode:screen;transform:scale(1.3);transform-origin:center;z-index:1;pointer-events:none;overflow:hidden;visibility:visible;opacity:0;transition:opacity 0.5s ease-in-out;}
/*************/
/* hero text — 영상 17초 루프에 맞춰 두 글자 세트가 번갈아 등장 */
.hero-t{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:100%;height: 100%;display:flex;flex-direction:column;gap:clamp(0px, 1.2cqw, 6px);justify-content:center;align-items:center;z-index:3;opacity:0;visibility:hidden;padding:40px 60px;box-sizing:border-box;}

/* 주기 34초 = 영상 17초 루프 × 2. 세트1은 0~4초, 세트2는 17~21초 노출.
   .is-live 는 components.js 가 오버레이 0초 첫 프레임에 붙여 영상과 위상을 맞춘다. */
.hero.is-live .hero-t { animation:hero-text-cycle 34s linear infinite;}
@keyframes hero-text-cycle {
  0% { opacity:0;visibility:visible;}
  1.765% { opacity:1;visibility:visible;}   /* 0.6s — 페이드 인 */
  10% { opacity:1;visibility:visible;}      /* 3.4s — 유지 */
  11.765% { opacity:0;visibility:hidden;}   /* 4.0s — 페이드 아웃 */
  100% { opacity:0;visibility:hidden;}
}

/* ── 소제목(hero-sub):위에서 아래로 미끄러짐 ── */
.hero-sub {font-weight:700;font-size:clamp(28px, 2.02cqw, 60px);text-align:center;line-height:1.15;margin-bottom:20px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.hero.is-live .hero-sub{animation:sub-slide-down 34s ease-out infinite;}
@keyframes sub-slide-down {
  0% { transform:translateY(-25px);opacity:0;}
  1.765% { transform:translateY(0);opacity:1;}
  10% { transform:translateY(0);opacity:1;}
  11.765% { transform:translateY(10px);opacity:0;}
  100% { transform:translateY(10px);opacity:0;}
}
/* ── 큰제목(h1):진정한 다이나믹 메탈릭 크롬 그라데이션 ── */
.hero-t h1{font-weight:700;font-size:clamp(38px, 4.5cqw, 96px);text-align:center;line-height:1.15;letter-spacing:-.04em;
  /* 글로우 — 채움이 투명해도 text-shadow 는 글자 모양대로 그려지므로 테두리 밖으로 번진다.
     앞에 적은 것이 위에 깔린다: 흰 코어 → 시안 확산 → 넓은 광원 → 가독용 어두운 그림자 */
  text-shadow:
    0 0 .04em rgba(255,255,255,.0),
    0 0 .08em rgba(130,238,255,.0),
    0 0 .05em rgba(60,200,255,.0),
    0 2px .08em rgba(0,0,0,.0);
  background:linear-gradient(
    45deg, 
    #ffffff 0%, 
    #d9fbff 10%, 
    #ffffff 22%, 
    #8ff3ff 38%, 
    #ffffff 50%, 
    #ccf8ff 64%, 
    #ffffff 78%, 
    #a8f1ff 90%, 
    #ffffff 100%
  );
  background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.hero.is-live .hero-t h1 { animation:title-gradient-move 34s cubic-bezier(0.25, 1, 0.5, 1) infinite;}
@keyframes title-gradient-move {
  0% { background-position:0% center;opacity:0;}
  1.765% { opacity:1;}
  11.765% { background-position:300% center;opacity:1;}
  100% { background-position:300% center;opacity:1;}
}

/* 두 번째 세트는 영상 두 번째 루프(17초)에 등장 */
.hero.is-live .hero-t--2,
.hero.is-live .hero-t--2 .hero-sub,
.hero.is-live .hero-t--2 h1 { animation-delay:17s;}

/* 서브페이지 커버 */
@keyframes cover-gradient-flow-before{
  0%{transform:translate(-12%,8%) scale(1)}
  50%{transform:translate(18%,-12%) scale(1.22)}
  100%{transform:translate(-8%,14%) scale(1.12)}
}
@keyframes cover-gradient-flow-after{
  0%{transform:translate(12%,-10%) scale(1.08)}
  50%{transform:translate(-20%,12%) scale(1.26)}
  100%{transform:translate(8%,-8%) scale(1)}
}
.cover{position:relative;height:420px;overflow:hidden;background:#000;display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:center;padding:0 20px}
.cover::before,.cover::after{content:"";position:absolute;filter:blur(30px);pointer-events:none;will-change:transform}
.cover::before{animation:cover-gradient-flow-before 4s ease-in-out infinite alternate}
.cover::after{animation:cover-gradient-flow-after 4.5s ease-in-out infinite alternate-reverse}
.cover-sub{font-weight:600;font-size:clamp(24px, 1.34vw + 10.29px, 36px);text-align:center;line-height:1.15;letter-spacing:-.02em;color:#00e5ff;z-index:1}
.cover h1{font-weight:600;font-size:clamp(34px, 2.23vw + 11.14px, 54px);text-align:center;line-height:1;letter-spacing:-.04em;color:#fff;z-index:1}
.cover--story::before{left:-25%;top:-60%;width:90%;height:200%;background:radial-gradient(closest-side,rgba(34,104,148,.95),rgba(0,0,0,0) 72%)}
.cover--story::after{right:-30%;bottom:-80%;width:100%;height:220%;background:radial-gradient(closest-side,rgba(1,171,123,.9),rgba(0,0,0,0) 72%)}
.cover--tech::before{left:-25%;top:-60%;width:90%;height:200%;background:radial-gradient(closest-side,rgba(216,77,9,.85),rgba(0,0,0,0) 72%)}
.cover--tech::after{right:-30%;bottom:-80%;width:100%;height:220%;background:radial-gradient(closest-side,rgba(228,196,35,.8),rgba(0,0,0,0) 72%)}
.cover--sc{background:#000}
.cover--sc::before{right:-20%;top:-70%;width:90%;height:200%;background:radial-gradient(closest-side,rgba(172,136,255,.9),rgba(0,0,0,0) 72%)}
.cover--sc::after{left:-30%;bottom:-80%;width:100%;height:220%;background:radial-gradient(closest-side,rgba(17,146,118,.85),rgba(0,0,0,0) 72%)}
.cover--contact::before{left:-25%;top:-60%;width:90%;height:200%;background:radial-gradient(closest-side,rgba(24,77,187,.95),rgba(0,0,0,0) 72%)}
.cover--contact::after{right:-30%;bottom:-80%;width:100%;height:220%;background:radial-gradient(closest-side,rgba(0,225,255,.75),rgba(0,0,0,0) 72%)}

/* ── 커버 텍스트 등장:멀리 흩어진 글자가 바람에 쓸리듯 제자리로 모인다 ──
   글자 크기·색은 원본 그대로 둔다. 흩어짐은 transform 으로만 만들어
   (test.html 처럼 font-size 를 흔들면 커버 안 텍스트 배치가 매 프레임 밀린다) */
.cover .word{display:inline-block;white-space:nowrap}
.cover .char{display:inline-block;will-change:transform;
  transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(var(--ss));
  animation:cover-char-float var(--dur) ease-in-out infinite;
  transition:transform 1.05s cubic-bezier(.22,.68,.25,1) var(--gd)}
@keyframes cover-char-float{
  0%,100%{transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(var(--ss))}
  50%{transform:translate(var(--mx),var(--my)) rotate(var(--mr)) scale(var(--ss))}
}
/* 도착한 뒤에만 반짝이고 사라진다 — 최종 상태는 효과 적용 전과 완전히 동일.
   이동 중 text-shadow 를 함께 움직이면 매 프레임 리페인트라 끊긴다 */
.cover .char.gathered{transform:none;
  animation:cover-char-land 1.1s ease-out calc(1.05s + var(--gd)) forwards}
@keyframes cover-char-land{
  0%{text-shadow:0 0 0 rgba(255,255,255,0)}
  15%{text-shadow:0 0 14px rgba(255,255,255,.75)}
  100%{text-shadow:0 0 0 rgba(255,255,255,0)}
}
.cover .char.settled{will-change:auto}

/* 바람 결 / 입자 — .cover 가 overflow:hidden 이라 커버 밖으로 새지 않는다 */
.cover .wind-line{position:absolute;height:2px;z-index:2;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:cover-wind-line var(--dur) ease-out forwards}
@keyframes cover-wind-line{
  0%{transform:translateX(-300px) scaleX(.5);opacity:0}
  30%{opacity:.8}
  100%{transform:translateX(400px) scaleX(2);opacity:0}
}
.cover .wind-particle{position:absolute;border-radius:50%;z-index:2;pointer-events:none;
  will-change:transform,opacity;
  background:radial-gradient(circle,rgba(255,255,255,.8) 30%,rgba(255,255,255,0) 70%);
  animation:cover-wind-particle var(--dur) cubic-bezier(.1,.8,.3,1) forwards}
@keyframes cover-wind-particle{
  0%{transform:translate(0,0) scale(1);opacity:.8}
  100%{transform:translate(var(--px),var(--py)) scale(0);opacity:0}
}

/* Tech Architecture (메인) */
@keyframes flow-row-drop{
  0%{opacity:0;transform:translateY(-70px)}
  70%{opacity:1;transform:translateY(8px)}
  100%{opacity:1;transform:translateY(0)}
}
.flow-box{width:100%;max-width:760px;display:flex;flex-direction:column;gap:20px;padding:32px 30px;background:#fff;}
.flow-row{box-shadow:inset 0 0 0 1px #dcdfe3;display:flex;gap:20px;padding:20px 25px;align-items:center;opacity:0;transform:translateY(-70px)}
.flow-row.is-visible{animation:flow-row-drop .95s cubic-bezier(.22,1,.36,1) both}
.flow-row:nth-child(2).is-visible{animation-delay:.14s}
.flow-row:nth-child(3).is-visible{animation-delay:.28s}
.flow-row:nth-child(4).is-visible{animation-delay:.42s}
.flow-icon{width:85px;height:85px;border-radius:18px;display:flex;justify-content:center;align-items:center;flex-shrink:0}
.flow-icon img{width:55px;height:55px;object-fit:contain}
.flow-body{display:flex;flex-direction:column;gap:8px;flex:1}
.flow-title{padding:0 10px;font-weight:600;font-size:clamp(18px, .09vw + 17.71px, 19px);line-height:1.2;letter-spacing:-.04em}
.flow-desc-inner{display:flex;flex-direction:column;gap:0}
.flow-desc{font-weight:400;font-size:clamp(16px, .09vw + 15.71px, 17px);line-height:1.5;letter-spacing:-.03em;color:#575757;padding-left:20px;text-indent:-10px;}
.flow-desc::before{content:"";display:inline-block;width:3px;height:3px;margin:0 8px 3px 0;border-radius:50%;background:rgba(0,0,0,.5)}

/* Target Solution (메인) */
.sol{width:100%;max-width:1024px;display:flex;flex-direction:column;align-items:flex-end;gap:15px;}
.sol-head{align-self:stretch;display:flex;gap:12px;align-items:center;height:54px}
.sol-head::after{content:"";flex:1;border-top:1px solid #dcdfe3}
.sol-num{font-weight:600;font-size:clamp(40px, 1.79vw + 34.29px, 60px);line-height:1;letter-spacing:-.01em;color:#dcdfe3}
.sol-title{font-weight:600;font-size:clamp(22px, .18vw + 21.43px, 24px);line-height:1.2;letter-spacing:-.04em}
.w540{width:540px;max-width:100%;display:flex;flex-direction:column;gap:20px}
.blk{display:flex;flex-direction:column;gap:2px}
.blk-label{font-weight:600;font-size:clamp(18px, .09vw + 17.71px, 19px);line-height:1.6;letter-spacing:-.04em}
.bullet{display:flex;gap:8px;font-weight:400;line-height:1.5;font-size:clamp(16px, .09vw + 15.71px, 17px);text-align:justify;letter-spacing:-.03em;color:#575757}
.bullet span:first-child{color:#777;}
.bullet--j{font-size:clamp(15px, .09vw + 14.71px, 16px);line-height:1.6;text-align:justify}
.sol-img{height:100%;object-fit:cover}

/* 이미지 밴드 / CTA */
.photo-band{height:250px;background-position:center;background-size:cover;background-repeat:no-repeat}
.cta-band{position:relative;height:260px;background-attachment:fixed;background-position:center;background-size:cover;background-repeat:no-repeat;display:flex;justify-content:center;align-items:center}
.cta-btn{width:200px;height:49px;display:flex;justify-content:center;align-items:center;font-weight:600;font-size:clamp(16px, .18vw + 15.43px, 18px);letter-spacing:-.04em;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 1px 4px rgba(12,12,13,.05)}
.cta-btn:hover{background-clip:border-box;color:#fff;-webkit-background-clip:border-box;-webkit-text-fill-color:#fff}
.cta-btn[style*="rgba(0,47,24,.35)"]:hover{background:rgba(0,47,24,.7) !important}
.cta-btn[style*="rgba(28, 10, 107, 0.35)"]:hover{background:rgba(28, 10, 107, 0.7) !important}
.cta-btn[style*="rgba(59, 0, 94, 0.35)"]:hover{background:rgba(59, 0, 94, 0.7) !important}


/* 원형 배너 */
@keyframes circle-drop{
  0%{opacity:0;transform:translateY(-80px)}
  70%{opacity:1;transform:translateY(8px)}
  100%{opacity:1;transform:translateY(0)}
}
.circle-bar{background:#E8EBEF;display:flex;gap:50px;padding:35px 50px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.circle-bar--light{background:#E8EBEF}
.circle{width:150px;height:150px;border-radius:100px;display:flex;flex-direction:column;gap:5px;justify-content:center;align-items:center;text-align:center;font-weight:600;font-size:clamp(15px, .09vw + 14.71px, 16px);line-height:1.3;letter-spacing:-.04em;background:#fff;opacity:0;transform:translateY(-80px)}
.circle:hover{background:#dcffff}
.circle.is-visible{animation:circle-drop .95s cubic-bezier(.22,1,.36,1) both}
.circle:nth-child(2).is-visible{animation-delay:.16s}
.circle:nth-child(3).is-visible{animation-delay:.32s}
.circle--card{background:#fff;gap:6px}
.circle img{width:55px;height:55px;object-fit:contain}
.circle .stat-label{font-weight:600;font-size:clamp(15px, .09vw + 14.71px, 16px);color:#1f1f1f}
.circle .stat-label--lg{font-size:clamp(17px, .18vw + 16.43px, 19px);line-height:1;letter-spacing:-.04em;color:#000}
.circle .stat-val{font-weight:700;font-size:clamp(26px, .36vw + 24.86px, 30px);color:#1f1f1f}
.circle .stat-val--lg{font-size:clamp(21px, .45vw + 19.57px, 26px);color:#000;line-height:1.2;letter-spacing:-.04em}

/* 2단 행 (Tech / Q.BOX) */
.row2{width:100%;max-width:1024px;display:flex;gap:50px;align-items:flex-start}
.tech-page .sec,.smart-page .sec{container-type:inline-size}
.row2 .img-col{flex:1;min-width:0;align-self:stretch}
.row2 .img-col img{width:100%;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
@media (max-width:1279px){
  .index-page .row2{flex-direction:column;padding:0 15px;gap:35px;}
  .index-page .row2 .img-col{flex:none;width:400px;max-width:100%;align-self:center}
  .index-page .row2 .w540{width:100%;max-width:1024px;align-self:center}
}
@container (max-width:939px){
  .tech-page .row2,.smart-page .row2{flex-direction:column;padding:0 15px;}
  .tech-page .row2 .img-col,.smart-page .row2 .img-col{flex:none;width:400px;max-width:100%;align-self:center}
  .tech-page .row2 .w540,.smart-page .row2 .w540{width:100%;max-width:1024px;align-self:center}
}
.list-block{display:flex;flex-direction:column;gap:5px}
.list-title{font-weight:600;font-size:clamp(17px, .18vw + 16.43px, 19px);line-height:1.5;letter-spacing:-.04em}

/* 뉴스 리스트 */
.news{width:100%;max-width:760px;display:flex;flex-direction:column;gap:20px}
.news a{box-shadow:inset 0 0 0 1px #d1d6dc;height:55px;display:flex;gap:10px;padding-left:40px;align-items:center;}
.news a:hover{background:rgba(237, 240, 244,.5);color:#121212;-webkit-text-fill-color:#121212}
.news .t{flex:1;min-width:0;font-weight:500;font-size:clamp(16px, .27vw + 16.14px, 19px);line-height:1.5;letter-spacing:-.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:3px;}
.news .arr{width:46px;align-self:stretch;display:flex;justify-content:center;align-items:center;flex-shrink:0}
.news .arr svg{fill:#8a8a8a}

/* Contact 폼 */
.form{width:540px;max-width:100%;display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:500;font-size:clamp(15px, .18vw + 14.43px, 17px);line-height:1.5;letter-spacing:-.04em}
.field input,.field textarea{box-shadow:inset 0 0 0 1px #d1d6dc;border:none;padding:10px 12px;font-family:inherit;font-weight:400;font-size:clamp(16px, .09vw + 15.71px, 17px);letter-spacing:-.04em;color:#121212;background:#fff}
.field input::placeholder,.field textarea::placeholder{color:#a09f9f;opacity:1}
.field input{height:46px}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{outline:1px solid #5b1fdb;outline-offset:-1px}
.agree{display:flex;gap:10px;align-items:center;font-weight:500;font-size:clamp(16px, .18vw + 15.43px, 18px);letter-spacing:-.04em;cursor:pointer}
.agree input{width:20px;height:20px;accent-color:#5b1fdb}
.submit{height:52px;border:none;border-radius:4px;background:linear-gradient(90deg,#5b1fdb 0%,#00bebe 100%);display:flex;gap:8px;justify-content:center;align-items:center;cursor:pointer;font-family:inherit;font-weight:600;font-size:clamp(17px, .18vw + 16.43px, 19px);color:#fff;padding-right:20px}

/* 오시는 길 */
.map-area {gap:20px;padding:30px 50px}
.map-box{width:100%;height:450px;object-fit:cover}
.row3{width:100%;max-width:1024px;display:flex;gap:50px;align-items:flex-start;justify-content:flex-end}
.info-row{display:flex;gap:5px;font-weight:400;font-size:clamp(17px, .18vw + 16.43px, 19px);line-height:1.6;letter-spacing:-.04em;color:#575757}
.info-row.col {display:flex;flex-direction:column;gap:2px}
.info-row.col > p{display:flex;gap:5px}
.info-row.col > p::before{content:'·';flex-shrink:0}
.info-row .k{width:100px;flex-shrink:0;color:#000;font-weight:600;}
.info-group{display:flex;flex-direction:column;gap:8px}
.info-group .h{font-weight:600;font-size:clamp(22px, .54vw + 20.27px, 28px);line-height:1.5;letter-spacing:-.04em;color:#000;}
.info-group .h1{font-weight:600;font-size:clamp(18px, .36vw + 16.85px, 22px);line-height:1.5;letter-spacing:-.04em;color:#000;}
.w540.contact{gap:40px;}

/* 풋터 */
.footer{display:flex;flex-direction:column;gap:20px;padding:80px 0 10px;background:#fff}
.foot-pad{padding:0 50px}
.footer .logo img{height:60px;width:auto}
.foot-bar{border-top:1px solid rgba(0,0,0,.1);padding:30px 50px;display:flex;flex-direction:column;gap:25px}
.link-row{display:flex;gap:55px;align-items:center}
.link-row a{font-weight:500;font-size:clamp(15px, .09vw + 14.71px, 16px);line-height:1.2;letter-spacing:-.04em;white-space:nowrap}
.link-row a:hover,.link-row a.active{background:linear-gradient(60deg,#5B1FDB,#007a7a);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.addr-wrap{display:flex;flex-direction:column;gap:6px;font-weight:400;font-size:clamp(14px, .09vw + 13.71px, 15px);line-height:1.2;letter-spacing:-.03em;color:#575757;}
.addr{display:flex;gap:12px;align-items:center}
.addr .co{color:#575757;white-space:nowrap}
.addr .div{width:1px;height:14px;background:rgba(0,0,0,.3)}
.addr .txt{color:#575757;white-space:nowrap}

.gap-line1{gap:10px}


@media (max-width:1479px){
  .hero-overlay{transform: scale(1.4);}
}
@media (max-width:1319px){
  .hero-overlay{transform: scale(1.48);}
}
@media (max-width:1219px){
  .hero-overlay{transform: scale(1.5);}
}

/* ── 모바일 (<1024px) ── */
@media (max-width:1023px){
  #site-nav{position:static;width:auto;border-right:0;}
  .nav-wrap{display:none}
  .m-head{display:flex}
  .frame{padding-top:60px}
  .content{margin-left:0}
  .sec{padding:50px 50px}
  .hero{height:75vh;min-height:700px;display:block;padding:0}
  .hero-overlay{transform: scale(1.4);}
  .hero-t{position:absolute;padding:0 20px;gap:16px}
  /*.hero-t--1{top:120px}
  .hero-t--2{top:290px}*/
  .hero-t--2 .hero-sub{color:#e8e8e8}
  .hero-t--2 h1{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45)}
  .cover{height:300px}
  .sol-img{height:220px}
  .row2{flex-direction:column}
  .row2 .img-col{align-self:auto;width:100%}
  .row3{align-self:auto;width:100%}
  .row3 .w540{width:100%}
  .tech-page .row2 .img-col,.smart-page .row2 .img-col{width:400px;max-width:100%;align-self:center}
  .tech-page .w540,.smart-page .w540{width:100%;max-width:760px;align-self:center}
  .news a{padding-left:16px}
  .form{width:100%}
  .map-box{height:380px}
  .foot-pad{padding:0 15px;width:100%;max-width:760px;align-self:center}
  .foot-bar{padding:30px 35px}
  .link-row{gap:30px;padding:0;width:100%;max-width:760px;align-self:center}
  .addr-wrap{width:100%;padding:0;max-width:760px;align-self:center}
  .addr{flex-direction:column;align-items:flex-start;gap:4px}
  .addr .div{display:none}
  .addr .txt{white-space:normal}
}

@media (max-width:800px){
  .sec-head{padding:0 15px;}
}

/* ── 모바일 소형 (<768px) ── */
@media (max-width:767px){
  .m-menu{padding:24px 20px;gap:24px}
  .hero{min-height:480px;padding:50px 0;gap:48px}
  .cover{height:260px}  
  .w540{width:100%}
  .sec{padding:42px 20px;gap:36px}
  .map-area{padding:30px 20px;gap:20px}
  .map-box{height:340px}
  .circle-bar{gap:10px 50px;padding:30px 16px}
  .circle{width:140px;height:140px;}
  .flow-box{padding:20px;}
  .flow-row{flex-direction:column;gap:12px;padding:20px 15px;}
  .flow-icon{border-radius:100px;width:80px;height:80px}  
  .flow-icon img{width:45px;height:45px;object-fit:contain}
  .flow-title{text-align:center;}
  .flow-desc{padding-left:10px;text-indent:-10px;}
  .news a{height:44px}
  .foot-pad{padding:0 25px}
  .foot-bar{padding:25px}
  .link-row{flex-direction:column;gap:16px;align-items:flex-start}
  .field input,.field textarea{padding:6px 12px;}
  .submit{height:48px}
}

@media (max-width:499px){
  .hero-overlay{transform: scale(2.8);}
}

@media (max-width:460px){
  .br-pc{display:inline;}
  .sec-head {padding:0;}
  .body-text{text-align:left;}
}