@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

/* ===== tokens (measured from reference) ===== */
:root{
  --navy:#0B2A15;
  --slate:#123D20;
  --slate2:#17492A;
  --slate3:#1C5732;
  --teal:#5BA049;
  --blue:#3F7A2B;
  --sky:#86C95F;
  --offwhite:#F6F8F5;
  --brown:#97592B;
  --brown2:#6E4E2C;
  /* 본문 보조색 · 각주색 — 흰 배경에서 WCAG AA(4.5:1) 를 넘도록 낮춘 값.
     이전 값(#7E7E7E 4.06:1 / #9aa2a6 2.59:1)은 기준 미달이었다. */
  --gray:#5C665F;
  --note:#5C666A;
  --line:#CECECE;
  --ease-out-expo:cubic-bezier(.19,1,.22,1);
}

*{margin:0;padding:0;box-sizing:border-box;}

/* 장식용 오버레이는 절대 입력을 가로채면 안 된다.
   조상 요소의 가상요소가 위에 깔리면 자손(슬라이더·버튼)의 포인터 이벤트가 죽는다. */
.intro_vd_box::after,.visual_bg::after,.loc_map .mapimg::after,.map_circle::after,
#section3 .inner::before,#section4::before,#section5::before,#section7::before,
.imgcut::before,.imgcut::after,.skip_circle::before{pointer-events:none;}
html{scroll-behavior:smooth;}
body{
  font-family:"Pretendard","Pretendard Variable",-apple-system,"Malgun Gothic",sans-serif;
  font-size:16px;color:#000;background:#fff;
  letter-spacing:-.5px;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.lock{overflow:hidden;height:100vh;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ul,ol{list-style:none;}

/* ===== 선형(outline) 아이콘 =====
   전부 인라인 SVG 다(외부 아이콘 CDN 을 쓰지 않는다).
   선 굵기는 1.5 로 통일하고 색은 currentColor 를 따라간다 → 크기는 CSS 로만 정한다.
   장식이므로 마크업에서 aria-hidden="true" focusable="false" 를 함께 준다. */
.nico{
  width:20px;height:20px;flex:0 0 auto;display:block;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ===== image placeholders (원본 사진 미사용 · 자리표시자) ===== */
.imgcut{
  position:relative;overflow:hidden;background:#dfe4e6;
  background-image:linear-gradient(135deg,#c9d6db 0%,#e8eef0 45%,#b9cbd2 100%);
}
.imgcut::before{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 22% 78%,rgba(255,255,255,.55) 0,transparent 42%),
    radial-gradient(circle at 74% 24%,rgba(61,80,94,.30) 0,transparent 48%);
}
.imgcut::after{
  content:"이미지컷";position:absolute;right:0;bottom:0;
  background:rgba(0,0,0,.35);color:#fff;font-size:11px;
  letter-spacing:0;padding:3px 7px;
}
.imgcut.t2{background-image:linear-gradient(135deg,#9fb9c4 0%,#dfe9ec 50%,#7fa2b0 100%);}
.imgcut.t3{background-image:linear-gradient(135deg,#a8cdd6 0%,#e4f1f4 50%,#7cb4c2 100%);}
.imgcut.t4{background-image:linear-gradient(135deg,#d5cec4 0%,#f2eee8 50%,#bdb2a3 100%);}
.imgcut.t5{background-image:linear-gradient(135deg,#8fa6b3 0%,#ccd9df 50%,#6d8998 100%);}
.imgcut.plain::after{display:none;}
/* 실제 사진을 넣는 변형 — 자리표시자 그라데이션과 "이미지컷" 라벨을 끈다 */
.imgcut.photo{background-size:cover;background-position:center;background-repeat:no-repeat;}
.imgcut.photo::before,.imgcut.photo::after{display:none;}

/* ===== 영상 배경 (data-video 가 채워졌을 때만 생성된다) ===== */
.bgmedia{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;min-width:177.78vh;min-height:56.25vw;
  object-fit:cover;border:0;pointer-events:none;z-index:0;
}
.has-video::after{z-index:1;}

/* 섹션 배경 영상 호스트.
   ::after 가 오버레이다. 영상 프레임이 순백(#fff)일 때를 최악으로 잡고
   그 위에서도 본문이 AA 를 넘도록 알파를 정했다. */
.sec_vbg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.sec_vbg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;}

/* ===== 인트로 ===== */
.main_wrap{position:fixed;inset:0;z-index:9000;background:#000;overflow:hidden;}
.main_wrap.done{display:none;}

.intro_vd_box{
  position:absolute;inset:0;z-index:1;
  background-image:linear-gradient(160deg,#0b1d2a 0%,#16394d 45%,#0d2331 100%);
  clip-path:circle(0% at 50% 50%);
}
.intro_vd_box::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(ellipse at 50% 92%,rgba(91,181,196,.35) 0,transparent 55%),
    radial-gradient(ellipse at 18% 12%,rgba(255,255,255,.10) 0,transparent 45%);
}
/* 참조 파라미터 4단계: 8% 2.0s → 80% 4.0s → 7% 1s .5s → 100% 3s 1s */
.main_wrap.intro  .intro_vd_box{clip-path:circle(8% at 50% 50%);transition:2s;}
.main_wrap.intro1b .intro_vd_box{clip-path:circle(80% at 50% 50%);transition:4s;}
.main_wrap.intro2 .intro_vd_box{clip-path:circle(7% at 50% 50%);transition:1s .5s;}
.main_wrap.intro2b .intro_vd_box{clip-path:circle(100% at 50% 50%);transition:3s 1s;}

.intro_tit{
  width:100%;height:100%;position:absolute;z-index:2;left:0;right:0;margin:0 auto;
  text-align:left;display:flex;justify-content:center;align-items:center;transition:.8s;
}
.intro_tit>div{width:100%;max-width:1496px;position:relative;margin:0 auto;}
.intro_tit h2{
  color:#fff;font-size:1.125rem;opacity:0;transform:translateX(-3rem);
  text-align:center;font-weight:400;
}
.intro_tit h1{
  font-size:4.5625rem;line-height:100%;display:flex;justify-content:center;align-items:center;
  color:var(--navy);gap:.625rem;margin-top:.5rem;font-weight:800;
}
.intro_tit h1 b{display:flex;justify-content:center;align-items:center;overflow:hidden;padding-bottom:.125rem;}
.intro_tit h1 b i{
  font-weight:800;font-style:normal;display:inline-block;
  transform:translateY(101%);transition-duration:1.2s;transition-timing-function:ease;
  transition-delay:calc(var(--i) * .06s);
}
.intro_tit h1 b i.spacing{position:relative;width:100%;height:100%;margin-right:1rem;}
.intro_tit.tit01 h1,.intro_tit.tit02 h1{color:#fff;}

.main_wrap.intro .intro_tit h2{opacity:1;transform:translateX(0);transition:1s .2s;}
.main_wrap.intro1b .intro_tit h1 b.int_tit01 i,
.main_wrap.intro2  .intro_tit h1 b.int_tit02 i,
.main_wrap.intro2b .intro_tit h1 b.int_tit03 i,
.main_wrap.intro3  .intro_tit h1 b.int_tit04 i{
  opacity:1;transform:translate(0);transition-duration:2s;transition-timing-function:var(--ease-out-expo);
}
.main_wrap.intro3b .intro_tit{opacity:0;transition:.8s;}

/* 원본은 데스크톱에서 이 4분할 밴드를 쓰지 않는다(display:none) */
.intro_bg_box{width:100%;height:100%;position:absolute;left:0;top:0;z-index:3;display:none;}
.intro_bg_box>div{width:140%;height:25%;position:absolute;transition:1s var(--ease-out-expo);}
.intro_bg01{right:-140%;top:0;}
.intro_bg02{left:-140%;top:25%;}
.intro_bg03{right:-140%;bottom:25%;}
.intro_bg04{left:-140%;bottom:0;}
.intro_bg_box.box01{z-index:4;}
.intro_bg_box.box01>div{background-color:var(--navy);}
.main_wrap.wipe .intro_bg01,.main_wrap.wipe .intro_bg03{right:-40%;}
.main_wrap.wipe .intro_bg02,.main_wrap.wipe .intro_bg04{left:-40%;}
.main_wrap.wipeout .intro_bg01,.main_wrap.wipeout .intro_bg03{right:100%;}
.main_wrap.wipeout .intro_bg02,.main_wrap.wipeout .intro_bg04{left:100%;}

/* 원본과 동일: 클릭 가능한 SKIP 은 우하단 70x70 만. 화면 중앙 클릭으로는 넘어가지 않는다. */
.main_skip_wrap{width:100%;height:100%;position:absolute;left:0;top:0;z-index:2147483647;pointer-events:none;}
.main_skip_bt{
  position:absolute;right:64px;bottom:40px;width:70px;height:70px;
  cursor:pointer;pointer-events:auto;
}
.main_skip_bt p{display:none;}
.skip_circle{
  position:absolute;left:50%;top:50%;width:70px;height:70px;margin:-35px 0 0 -35px;
  border-radius:50%;
  background:#000;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;letter-spacing:.5px;pointer-events:none;
  animation:cursor_skip 2.4s infinite;
}
.skip_circle::before{
  content:"";position:absolute;inset:-14px;border-radius:50%;background:#000;
  opacity:0;animation:cursor_skip2 2.4s infinite;z-index:-1;
}
@keyframes cursor_skip{0%{transform:scale(.7)}30%{transform:scale(.7)}80%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes cursor_skip2{0%{opacity:0}20%{opacity:.3}70%{opacity:.3}100%{opacity:0}}

/* ===== 상단 고정 바 ===== */
/* 바 자체는 장식이다. pointer-events 를 끄지 않으면 화면 상단 68px 에 들어온
   본문 링크의 클릭을 가로챈다. 실제 조작 요소에서만 다시 켠다. */
.header{
  position:fixed;left:0;top:0;width:100%;height:68px;z-index:800;color:#fff;
  display:flex;align-items:center;justify-content:space-between;padding:0 34px;
  transition:background .3s;pointer-events:none;
}
.header.solid{background:rgba(10,22,30,.9);backdrop-filter:blur(6px);}
/* 전체메뉴가 열려 있는 동안에는 헤더를 오버레이 위로 올린다.
   오버레이(z-index 900)가 헤더(800)를 덮고 있어서 햄버거를 다시 눌러도
   클릭이 오버레이 배경에 먹히고 버튼까지 닿지 않았다(재클릭 미닫힘 버그).
   상시 메뉴는 오버레이와 겹쳐 읽히므로 열려 있는 동안만 감춘다.
   헤더 배경도 지운다. 헤더가 위로 올라온 만큼, 배경을 남기면 오버레이의
   닫기(×)가 헤더 뒤로 들어가 흐리게 보인다. */
body.menu-open .header{z-index:950;background:transparent;backdrop-filter:none;}
body.menu-open .header::before{opacity:0;}
body.menu-open .h_nav{display:none;}
/* 헤더는 히어로 영상 위에 겹친다. 영상 밝기는 프레임마다 달라지므로 글자 대비를
   영상에 맡길 수 없다. 상단에만 어두운 그라데이션을 깔아 흰 글자의 대비를 고정한다.
   (배경이 이미 불투명해지는 solid 상태·서브페이지에서는 끈다) */
.header::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:132px;z-index:-1;
  background:linear-gradient(180deg,rgba(4,14,8,.80) 0%,rgba(4,14,8,.74) 52%,rgba(4,14,8,0) 100%);
  pointer-events:none;transition:opacity .3s;
}
.header.solid::before{opacity:0;}
.h_left{display:flex;align-items:center;gap:22px;pointer-events:auto;min-width:0;}
.h_brand{display:flex;align-items:center;gap:10px;color:#fff;white-space:nowrap;}
.h_mark{flex:0 0 auto;opacity:.9;width:30px;height:30px;object-fit:contain;}
.h_badge{background:rgba(255,255,255,.18);padding:4px 9px;font-size:13px;font-weight:600;}
.h_nm{font-size:21px;font-weight:800;letter-spacing:-1px;}
.h_nm em{font-style:normal;font-weight:400;}
.h_bar{width:1px;height:13px;background:rgba(255,255,255,.4);margin:0 4px;}
.h_type{font-size:13px;color:var(--sky);font-weight:500;}
/* 햄버거 : 아이콘 3줄은 .mb_ico 안으로 옮겼다. 열림 애니메이션 선택자
   (.menu_bt.on span:nth-child(n)) 는 자손 선택자라 그대로 동작한다. */
.menu_bt{height:34px;display:flex;flex-direction:row;align-items:center;gap:9px;}
.mb_ico{display:flex;flex-direction:column;justify-content:center;gap:6px;width:28px;height:34px;}
.mb_lb{font-style:normal;font-size:13px;font-weight:600;letter-spacing:-.02em;color:#fff;display:none;}
.menu_bt span{display:block;height:2px;width:28px;background:#fff;transition:.3s;}
.menu_bt.on span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.menu_bt.on span:nth-child(2){opacity:0;}
.menu_bt.on span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ===== 헤더 상시 노출 메뉴 (데스크톱) =====
   좁은 화면에서는 감춘다. 이때 이동 경로는 햄버거(전체메뉴) + 푸터가 맡는다. */
.h_nav{display:none;}
@media (min-width:1024px){
  .mb_lb{display:block;}
  .h_nav{
    display:flex;align-items:center;gap:2px;flex:0 0 auto;pointer-events:auto;
    white-space:nowrap;
  }
  .h_nav a{
    position:relative;display:inline-block;padding:9px 13px;
    font-size:15px;font-weight:600;letter-spacing:-.02em;color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,.5);transition:color .25s;
  }
  .h_nav a::after{
    content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
    background:var(--sky);transform:scaleX(0);transform-origin:left center;
    transition:transform .3s var(--ease-out-expo);
  }
  .h_nav a:hover{color:var(--sky);}
  .h_nav a:hover::after{transform:scaleX(1);}
  .h_nav a[aria-current="page"]{color:var(--sky);}
  .h_nav a[aria-current="page"]::after{transform:scaleX(1);}
  /* 전환 동선 : 문의하기만 버튼으로 세운다.
     밝은 초록 바탕(#86C95F) + 진초록 글자(#123D20) = 대비 6.0:1 */
  .h_nav a.h_cta{
    margin-left:12px;padding:10px 20px;border-radius:22px;
    background:var(--sky);color:var(--slate);font-weight:700;text-shadow:none;
    transition:background .25s,color .25s;
  }
  .h_nav a.h_cta::after{display:none;}
  .h_nav a.h_cta:hover{background:#fff;color:var(--slate);}
  .h_nav a.h_cta[aria-current="page"]{background:#fff;color:var(--slate);}
}
/* 1024–1279 : 메뉴가 들어오면서 좌측이 길면 줄바꿈이 난다. 영문 사명과
   보조 라벨을 접어 한 줄을 유지한다. (메뉴가 없는 1023 이하는 그대로 둔다) */
@media (min-width:1024px) and (max-width:1279px){
  .header{padding:0 22px;}
  .h_left{gap:16px;}
  .h_nm em{display:none;}
  .h_type,.h_bar{display:none;}
  .h_nav a{padding:9px 10px;font-size:14px;}
  .h_nav a.h_cta{margin-left:8px;padding:9px 16px;}
}

/* ===== 전체 메뉴 ===== */
.site_wrap{position:fixed;inset:0;z-index:900;display:none;}
.site_wrap.on{display:block;}
.site_bg{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .5s;}
.site_wrap.on .site_bg{opacity:.94;}
/* 페이지 링크 그룹이 붙으면서 좁은 화면에서는 목록이 화면보다 길어진다.
   flex 로 세로 중앙정렬한 채로 넘치면 위쪽이 잘려 스크롤로도 못 본다.
   → 바깥(.site_inner)은 스크롤 컨테이너, 안쪽(.site_menu)이 min-height 로 중앙정렬. */
.site_inner{
  position:relative;z-index:2;height:100%;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
}
.site_menu{
  min-height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;padding:84px 20px 48px;
}
.site_grp{width:100%;max-width:760px;text-align:center;}
.site_lb{
  font-size:11px;font-weight:700;letter-spacing:.16em;color:#A8B8AE;
  margin-bottom:8px;
}
.site_grp_pg{margin-top:32px;padding-top:28px;border-top:1px solid rgba(255,255,255,.20);}
.site_pages{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 10px;}
.site_pages li a{
  height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.38);border-radius:20px;
  font-size:14px;font-weight:500;color:#fff;white-space:nowrap;gap:8px;
}
.site_pages .nico{width:16px;height:16px;opacity:.72;}
.site_pages li a:hover .nico{opacity:1;}
.site_pages li a:hover{background:#fff;color:#12210f;border-color:#fff;}
.site_inner li{overflow:hidden;}
.site_inner li a{
  height:52px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;font-weight:400;
  transform:translateY(100%);opacity:0;transition:.9s var(--ease-out-expo);
}
.site_wrap.on .site_inner li a{transform:translateY(0);opacity:1;}
.site_inner li:nth-child(1) a{transition-delay:.10s}
.site_inner li:nth-child(2) a{transition-delay:.16s}
.site_inner li:nth-child(3) a{transition-delay:.22s}
.site_inner li:nth-child(4) a{transition-delay:.28s}
.site_inner li:nth-child(5) a{transition-delay:.34s}
.site_inner li:nth-child(6) a{transition-delay:.40s}
.site_inner li:nth-child(7) a{transition-delay:.46s}
.site_inner li:nth-child(8) a{transition-delay:.52s}
.site_inner li:nth-child(9) a{transition-delay:.58s}
.site_inner li:nth-child(10) a{transition-delay:.64s}
.site_inner li a em{font-style:normal;transition:.3s;}
.site_inner li a:hover em{color:var(--teal);}
.site_close{position:absolute;right:46px;top:30px;color:#fff;font-size:26px;z-index:3;}

/* ===== 우하단 회전 배너 ===== */
/* 원본과 동일: 첫 화면 안에 absolute 로 놓여 스크롤과 함께 사라진다(fixed 아님).
   크기는 119px 고정이며 스크롤에 따라 커지지 않는다. */
.by_bn_box{
  position:absolute;right:62px;top:50%;transform:translateY(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.by_bn{
  width:119px;height:119px;position:relative;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .8s;
}
.by_bn.show{opacity:1;transition:opacity 1.2s;}
.by_bn_bg{
  position:absolute;left:0;top:0;width:100%;height:100%;
  border-radius:50%;
  animation:main_circle 38s linear infinite;
}
/* 배너는 히어로 오른쪽(오버레이가 얇은 쪽)에 놓인다.
   반투명 흰 원 위의 흰 글자는 밝은 영상 프레임에서 1.95:1 까지 떨어졌다 → 원을 진한 그린으로 채운다. */
.by_bn01 .by_bn_bg,.by_bn03 .by_bn_bg{border:1px solid rgba(255,255,255,.55);background:rgba(11,42,21,.72);}
.by_bn02 .by_bn_bg{background:rgba(11,42,21,.72);border:1px solid rgba(255,255,255,.4);}
.by_bn_txt b{display:block;font-size:17px;font-weight:800;margin-bottom:3px;}
.by_bn_go{
  position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;z-index:3;
}
.by_bn_bg svg{width:100%;height:100%;display:block;}
.ringtx{fill:rgba(255,255,255,.85);font-size:9.5px;font-weight:600;letter-spacing:1.4px;}
.by_bn02 .ringtx{fill:rgba(255,255,255,.92);}
.by_bn_txt{
  position:relative;z-index:2;color:#fff;font-size:13px;font-weight:700;
  line-height:1.35;text-align:center;letter-spacing:-.5px;
}
.by_bn02 .by_bn_bg{background:var(--blue);}
@keyframes main_circle{0%{transform:rotate(-360deg)}100%{transform:rotate(0)}}

/* ===== 공통 섹션 ===== */
.section{position:relative;width:100%;overflow:hidden;background:#fff;}
.inner{width:1152px;margin:0 auto;position:relative;}
.eng_tit{font-weight:800;letter-spacing:-.5px;line-height:1;}
.sec_sub{font-size:18px;font-weight:500;letter-spacing:-.5px;}

/* 스크롤 등장 */
.rv{opacity:0;transform:translateY(42px);transition:opacity 1s var(--ease-out-expo),transform 1s var(--ease-out-expo);}
.rv.x{transform:translateX(42px);}
.rv.up{transform:translateY(-40px);}
.rv.sc{transform:scale(.95);}
.rv.on{opacity:1;transform:none;}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}
.rv.d3{transition-delay:.36s}.rv.d4{transition-delay:.48s}
.rv.d5{transition-delay:.60s}.rv.d6{transition-delay:.72s}

/* ===== section1 : 메인비주얼 + SUMMARY (h 1890) ===== */
/* 참조 대상이 없는 신규 사이트이므로 섹션 높이는 px 상수 대신 내용에 맡긴다.
   px 로 묶어두면 문구 길이가 조금만 달라져도 overflow:hidden 에 잘린다. */
#section1{background:#000;}
/* 첫 화면은 뷰포트를 꽉 채운다.
   100vh 만 쓰면 iOS Safari 주소창 높이만큼 아래가 잘린다 → 100svh 로 덮어쓴다.
   height 가 아니라 min-height 로 잡아야 문구가 길어져도 overflow:hidden 에 잘리지 않는다. */
.visual{
  position:relative;overflow:hidden;padding:120px 0 140px;
  display:flex;align-items:center;
  min-height:640px;
  min-height:100vh;
  min-height:100svh;
}
.visual_bg{
  position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(165deg,#0c2130 0%,#1b4a5f 48%,#0a1b26 100%);
  animation:visual-bg 2.4s var(--ease-out-expo) both;
}
/* 회사 영상(company.mp4)은 로고가 흰 배경 위에 뜨는 구간이 있다.
   이전 오버레이는 가운데 알파가 .46 이라 그 구간에서 흰 글자가 1.6:1 까지 떨어졌다.
   글자가 놓이는 왼쪽 58% 를 .92~.94 로 덮고 오른쪽은 열어 로고가 보이게 한다.
   최악(영상 프레임이 순백)에서도 글자 영역 배경은 rgb(30,59,39) → 흰 글자 12.3:1.
   위쪽 스크림은 헤더(전화번호·상호)를 위한 것이다. */
.visual_bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to bottom,rgba(0,0,0,.55) 0,transparent 22%),
    linear-gradient(to top,rgba(0,0,0,.45) 0,transparent 40%),
    linear-gradient(95deg,
      rgba(11,42,21,.94) 0%,
      rgba(11,42,21,.92) 58%,
      rgba(18,61,32,.60) 78%,
      rgba(18,61,32,.34) 100%);
}
@keyframes visual-bg{0%{transform:scale(1.1);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes visual-obj{0%{transform:translateY(-40px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes visual-obj1{0%{transform:scale(.1);opacity:0}100%{transform:scale(1);opacity:1}}

.visual_in{position:relative;top:-23px;z-index:2;width:1152px;margin:0 auto;color:#fff;}
/* 안전·법규 업종이라 대제목을 40~48px 로 낮춘다(기본값 74.9px 는 경박해 보인다) */
.main_tit_box h1{
  font-size:46px;line-height:58px;font-weight:800;letter-spacing:-.5px;color:#fff;
}
.main_tit_box h1 span{display:flex;align-items:flex-end;gap:22px;overflow:hidden;}
.main_tit_box h1 span i{
  font-style:normal;display:inline-block;transform:translateY(101%);
  transition:transform 1.6s var(--ease-out-expo);
}
.visual.on .main_tit_box h1 span i{transform:translateY(0);}
.visual.on .main_tit_box h1 .l2 i{transition-delay:.12s}
.visual.on .main_tit_box h1 .l3 i{transition-delay:.24s}
.main_tit_box h1 u{text-decoration:none;color:var(--sky);}
.main_tit_box .vs_sub{
  font-style:normal;font-size:16px;line-height:25px;font-weight:400;letter-spacing:-.5px;
  padding-bottom:18px;opacity:0;transform:translateX(42px);
  transition:opacity 1.2s .7s var(--ease-out-expo),transform 1.2s .7s var(--ease-out-expo);
}
.main_tit_box .vs_sub b{font-weight:700;font-size:19px;}
.visual.on .main_tit_box .vs_sub{opacity:1;transform:translateX(0);}
.main_logo{
  margin-top:36px;display:flex;align-items:center;gap:9px;
  opacity:0;transform:translateY(42px);
  transition:opacity 1.2s .9s var(--ease-out-expo),transform 1.2s .9s var(--ease-out-expo);
}
.visual.on .main_logo{opacity:1;transform:translateY(0);}
.main_logo b{background:rgba(255,255,255,.2);padding:5px 11px;font-size:15px;font-weight:600;white-space:nowrap;}
.main_logo .nm{font-size:23px;font-weight:800;letter-spacing:-1px;}
.main_logo .nm em{font-style:normal;font-weight:400;}
/* 스크립트체 슬로건(.main_ori) 자리를 국문 한 줄로 대체 */
.main_lead{
  margin-top:22px;max-width:640px;font-size:15px;line-height:26px;font-weight:400;
  color:rgba(255,255,255,.92);word-break:keep-all;
  opacity:0;transform:translateY(42px);
  transition:opacity 1.2s 1.1s var(--ease-out-expo),transform 1.2s 1.1s var(--ease-out-expo);
}
.visual.on .main_lead{opacity:1;transform:translateY(0);}
.visual_scroll{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;
  color:#fff;font-size:11px;letter-spacing:2px;text-align:center;
}
.visual_scroll i{display:block;width:1px;height:44px;background:rgba(255,255,255,.5);margin:10px auto 0;position:relative;overflow:hidden;}
.visual_scroll i::after{content:"";position:absolute;left:0;top:-44px;width:1px;height:44px;background:#fff;animation:scrollline 2s infinite;}
@keyframes scrollline{0%{top:-44px}60%{top:44px}100%{top:44px}}

/* SUMMARY (h 1090) — 배경 영상 about-bg.mp4 */
.summary{background:var(--slate);padding:96px 0 110px;position:relative;overflow:hidden;}
/* 오버레이 알파 .90 — 영상이 순백일 때도 배경이 rgb(41,80,54) 라 흰 글자 9.1:1 */
.summary .sec_vbg::after{
  background-image:
    linear-gradient(165deg,rgba(11,42,21,.92) 0%,rgba(18,61,32,.90) 48%,rgba(11,42,21,.94) 100%);
}
.summary .inner{z-index:2;}
.summary h2{font-size:44px;line-height:48px;font-weight:700;color:#fff;text-align:center;letter-spacing:-.5px;}
.summary .script{
  display:block;text-align:right;width:530px;margin:6px auto 0;
  font-family:"Apple Chancery","Segoe Script","Brush Script MT",cursive;
  font-size:19px;color:var(--brown);font-weight:400;letter-spacing:0;
}
.sum_badge{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:56px;color:#fff;}
.sum_badge b{
  background:rgba(255,255,255,.16);padding:5px 11px;font-size:15px;font-weight:600;
}
.sum_badge .nm{font-size:23px;font-weight:800;letter-spacing:-1px;}
.sum_badge .nm em{font-style:normal;font-weight:400;}
.sum_line{width:34px;height:1px;background:rgba(255,255,255,.45);margin:40px auto 0;}
.sum_desc{margin-top:32px;text-align:center;color:rgba(255,255,255,.88);font-size:14px;line-height:26px;}
.sum_head{margin-top:120px;color:#fff;}
.sum_head h3{font-size:28px;font-weight:700;letter-spacing:-1px;}
.sum_head .bar{width:28px;height:1px;background:rgba(255,255,255,.5);margin:22px 0;}
.sum_head p{font-size:16px;font-weight:600;}
.sum_tbl{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:76px;}
.sum_tbl dl{padding-top:36px;}
.sum_tbl dt{color:#fff;font-size:17px;font-weight:700;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.35);}
.sum_tbl dd{color:rgba(255,255,255,.90);font-size:14px;padding-top:20px;}
.sum_note{margin-top:64px;color:rgba(255,255,255,.80);font-size:11px;line-height:19px;}

/* ===== section2 : LOCATION (h 1456) ===== */
#section2{height:1456px;}
.loc_map{position:relative;height:818px;background:#eef1f0;overflow:hidden;}
.loc_map .mapimg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(115deg,#e9efe9 0%,#f4f6f3 40%,#e2eaea 100%),
    repeating-linear-gradient(58deg,rgba(120,150,140,.18) 0 2px,transparent 2px 46px),
    repeating-linear-gradient(-32deg,rgba(140,160,190,.16) 0 2px,transparent 2px 62px);
  background-blend-mode:normal,multiply,multiply;
}
.loc_map .mapimg::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 68% 34%,rgba(139,196,161,.45) 0,transparent 16%),
    radial-gradient(circle at 24% 62%,rgba(160,196,225,.42) 0,transparent 14%),
    radial-gradient(circle at 46% 20%,rgba(226,206,160,.40) 0,transparent 12%);
}
.map_circle{
  position:absolute;right:-90px;top:-150px;width:820px;height:820px;border-radius:50%;
  border:5px solid var(--slate);overflow:hidden;
  background-image:
    linear-gradient(120deg,#f3f6f2 0%,#e6eef0 55%,#eef2ee 100%),
    repeating-linear-gradient(72deg,rgba(120,150,140,.20) 0 2px,transparent 2px 40px);
  background-blend-mode:normal,multiply;
}
.map_circle::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 40% 46%,rgba(139,196,161,.5) 0,transparent 15%),
    radial-gradient(circle at 62% 66%,rgba(160,196,225,.45) 0,transparent 13%),
    radial-gradient(circle at 30% 72%,rgba(226,206,160,.45) 0,transparent 12%);
}
.map_pin{
  position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:8px;background:#fff;padding:9px 15px;
  border-radius:3px;box-shadow:0 5px 18px rgba(0,0,0,.18);white-space:nowrap;z-index:3;
}
.map_pin b{background:var(--slate);color:#fff;font-size:13px;padding:4px 9px;font-weight:600;}
.map_pin .nm{font-size:19px;font-weight:800;letter-spacing:-1px;}
.map_pin .nm em{font-style:normal;font-weight:400;}
.map_zoom{
  position:absolute;left:76px;top:242px;width:96px;height:96px;border-radius:50%;
  background:#000;color:#fff;font-size:13px;line-height:1.45;text-align:center;z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:transform .3s,background .3s;
}
.map_zoom:hover{transform:scale(1.06);background:var(--blue);}
.map_zoom span{display:block;font-size:19px;font-weight:300;margin-top:3px;}

.loc_body{background:var(--offwhite);height:638px;padding-top:78px;}
.loc_body h2{font-size:63.7px;line-height:63.7px;font-weight:800;color:var(--slate);text-align:center;letter-spacing:-.5px;}
.loc_body .sec_sub{text-align:center;margin-top:12px;color:var(--slate);}
.loc_list{display:grid;grid-template-columns:1fr 1fr;gap:64px 0;margin-top:64px;}
.loc_list li{display:flex;align-items:flex-start;gap:24px;}
.loc_ico{width:56px;height:56px;flex:0 0 56px;display:flex;align-items:center;justify-content:center;}
.loc_ico svg{width:44px;height:44px;stroke:var(--slate);fill:none;stroke-width:1.4;}
.loc_txt{border-left:1px solid var(--line);padding-left:24px;}
.loc_txt .en{color:var(--blue);font-size:13px;font-weight:700;letter-spacing:0;}
.loc_txt h3{font-size:23px;font-weight:700;color:#1e2b33;margin-top:5px;letter-spacing:-1px;}
.loc_txt p{font-size:14px;color:var(--gray);margin-top:11px;}
.loc_note{margin-top:74px;font-size:11px;color:var(--note);}

/* ===== section3 : PREMIUM (h 1702) ===== */
#section3{background:var(--offwhite);padding:140px 0 110px;}
#section3 .inner::before{
  content:"";position:absolute;left:0;top:-86px;width:50%;height:1px;background:var(--line);
}
.pre_grid{display:grid;grid-template-columns:1fr 1fr;gap:96px 62px;}
.pre_item{position:relative;padding:0 0 0 40px;border-left:1px solid var(--line);}
/* 실사진(16:9)을 쓰므로 세로 313x350 대신 가로형으로 — 세로 박스에서는 화면 캡처가 잘린다 */
.pre_item .imgcut{width:100%;height:260px;margin-bottom:44px;}
.pre_item .en{font-size:14px;font-weight:700;color:var(--slate);letter-spacing:0;}
.pre_item h3{font-size:31px;line-height:42px;font-weight:700;color:#1b262d;margin-top:22px;letter-spacing:-1.5px;}
.pre_item p{font-size:14px;line-height:23px;color:var(--slate);margin-top:26px;font-weight:500;}
.pre_note{margin-top:80px;font-size:11px;line-height:18px;color:var(--note);}

/* ===== section4 : 공공지원 민간임대 (h 1160) ===== */
#section4{background:#fff;padding:110px 0 100px;position:relative;}
#section4::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:100%;
  background-image:radial-gradient(ellipse at 8% 46%,rgba(61,80,94,.10) 0,transparent 34%);
}
.rent_head{text-align:center;position:relative;}
.rent_head .small{font-size:23px;color:var(--note);font-weight:500;letter-spacing:-1px;}
.rent_head h2{font-size:45.5px;line-height:50.05px;font-weight:800;color:var(--slate);margin-top:10px;letter-spacing:-.5px;}
.rent_head p{margin-top:34px;font-size:14px;line-height:25px;color:var(--note);}
.ben_grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:88px;position:relative;}
.ben_grid li{padding:44px 30px;text-align:center;position:relative;}
.ben_grid li::after{content:"";position:absolute;right:0;top:12%;width:1px;height:76%;background:var(--line);}
.ben_grid li:nth-child(3)::after,.ben_grid li:nth-child(6)::after{display:none;}
.ben_grid li:nth-child(-n+3){border-bottom:1px solid var(--line);}
.ben_no{font-size:13px;font-weight:700;color:var(--blue);letter-spacing:0;}
.ben_ico{height:52px;margin:22px 0 26px;display:flex;align-items:center;justify-content:center;}
.ben_ico svg{width:46px;height:46px;stroke:var(--slate);fill:none;stroke-width:1.3;}
.ben_grid h3{font-size:20px;line-height:29px;font-weight:700;color:#1b262d;letter-spacing:-1px;}
.ben_grid p{font-size:14px;line-height:26px;color:var(--gray);margin-top:18px;}
.ben_grid p b{display:inline-block;margin-top:12px;color:var(--blue);font-weight:700;}
.rent_note{margin-top:60px;font-size:11px;line-height:19px;color:var(--note);}

/* ===== section5 : CHECK POINT (h 940) =====
   연초록(--teal #5BA049) 배경 + 청회색 글자는 본문이 1.75~2.29:1 밖에 안 나왔다.
   배경을 브랜드 진한 그린(--slate #123D20)으로 내리고 글자를 흰색/연초록으로 올린다.
   장식 글로우도 흰색 .22 → 연초록 .12 로 낮춰 배경이 밝아지는 폭을 제한했다.
   글로우 정점(rgb(31,77,39))에서도 최저값이 4.84:1 이다. */
#section5{background:var(--slate);padding:110px 0 110px;overflow:hidden;}
#section5::before{
  content:"";position:absolute;right:-6%;top:8%;width:768px;height:428px;
  background-image:radial-gradient(ellipse at 50% 50%,rgba(134,201,95,.12) 0,transparent 62%);
}
.chk_head{text-align:center;position:relative;}
.chk_head .small{font-size:23px;color:var(--sky);font-weight:500;letter-spacing:-1px;}
.chk_head h2{font-size:44px;line-height:52px;font-weight:800;color:#fff;margin-top:8px;letter-spacing:-.5px;}
.chk_list{margin-top:70px;position:relative;}
.chk_list li{
  display:flex;align-items:center;gap:20px;padding:30px 0;
  border-bottom:1px solid rgba(255,255,255,.28);
}
.chk_list .tx{flex:1;}
.chk_list h3{font-size:26px;font-weight:700;color:#fff;letter-spacing:-1px;}
.chk_list p{font-size:14px;color:rgba(255,255,255,.88);margin-top:8px;}
.chk_no{font-size:12px;font-weight:700;color:var(--sky);text-align:right;line-height:1.5;letter-spacing:0;}
.chk_ico{width:102px;display:flex;justify-content:flex-end;padding-left:26px;border-left:1px solid rgba(255,255,255,.32);}
.chk_ico svg{width:52px;height:52px;stroke:var(--sky);fill:none;stroke-width:1.2;}
.chk_note{margin-top:52px;position:relative;font-size:11px;line-height:19px;color:rgba(255,255,255,.84);}

/* ===== section7 : BRAND STORY (h 1230) — 배경 영상 demo.mp4 =====
   기존 ::before 그라데이션이 불투명이라 영상을 완전히 가렸다.
   알파를 넣어 영상이 비치게 하되, 영상이 순백일 때 배경이 rgb(70,91,91) 을
   넘지 않도록 .93~.95 로 잡았다. 글로우도 브랜드 연초록으로 바꿨다. */
#section7{background:#2b3a44;overflow:hidden;padding:107px 0 110px;}
#section7::before{
  content:"";position:absolute;inset:0;z-index:1;
  background-image:
    radial-gradient(ellipse at 62% 78%,rgba(134,201,95,.08) 0,transparent 55%),
    linear-gradient(180deg,rgba(51,69,79,.93) 0%,rgba(32,49,58,.94) 55%,rgba(26,40,48,.95) 100%);
}
#section7 .inner{z-index:2;}
.brand_head{position:relative;padding-left:200px;}
.brand_head .small{font-size:23px;color:rgba(255,255,255,.78);font-weight:500;letter-spacing:-1px;}
.brand_head h2{font-size:42px;line-height:54px;font-weight:800;color:rgba(255,255,255,.88);letter-spacing:-.5px;}
.brand_stat{margin-top:64px;padding:0 128px;position:relative;}
.brand_stat li{display:flex;align-items:center;justify-content:space-between;padding:24px 0 22px;border-bottom:1px solid rgba(255,255,255,.22);}
.brand_stat .en{font-size:19px;font-weight:700;color:var(--sky);letter-spacing:-.5px;}
.brand_stat .ds{font-size:15px;font-weight:700;color:#fff;margin-top:9px;}
.brand_stat .big{font-size:38px;font-weight:800;color:#fff;letter-spacing:-1px;white-space:nowrap;margin-left:28px;}
.brand_slogan{position:relative;margin-top:78px;padding:0 128px;color:rgba(255,255,255,.82);font-size:15px;line-height:30px;}
.brand_slogan b{color:#fff;font-weight:700;}
.brand_note{position:relative;margin-top:22px;padding:0 128px;color:rgba(255,255,255,.80);font-size:11px;line-height:19px;}

/* 브랜드 슬라이더 (Swiper 참조 파라미터 재현) */
.bswrap{position:relative;margin-top:52px;padding:0 128px;}
.bs_view{overflow:hidden;}
.bs_track{display:flex;will-change:transform;}
.bs_slide{flex:0 0 auto;margin-right:15px;}
.bs_slide .imgcut{height:186px;}
.bs_slide .cap{margin-top:12px;font-size:13px;color:rgba(255,255,255,.85);}
/* 원본 브랜드 슬라이더에는 화살표·도트가 없다(pagination:false, nav 요소 0개) */

/* ===== section6 : CONTACT (h 832) ===== */
#section6{background:#fff;padding:100px 0 110px;}
.ct_head{display:flex;align-items:flex-end;justify-content:space-between;}
.ct_head h2{font-size:44px;line-height:48px;font-weight:700;color:#000;letter-spacing:-.5px;}
.ct_head .sec_sub{color:#000;padding-bottom:8px;}
/* 약도 자리에 도입 절차 3단계를 둔다 — 오프라인 접점보다 "도입 어떻게"가 먼저다 */
.ct_step{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.ct_step li{padding:34px 30px;position:relative;}
.ct_step li+li{border-left:1px solid var(--line);}
.ct_step .st_no{font-size:13px;font-weight:800;color:var(--blue);letter-spacing:0;}
.ct_step h3{font-size:20px;font-weight:700;color:#1b262d;margin-top:12px;letter-spacing:-1px;}
.ct_step p{font-size:14px;line-height:23px;color:var(--gray);margin-top:10px;}

.ct_body{display:grid;grid-template-columns:1fr 1fr;gap:52px;margin-top:52px;text-align:center;}
.ct_col h3{font-size:17px;font-weight:700;color:#000;}
.ct_col p{font-size:14px;color:var(--gray);margin-top:12px;line-height:23px;}
.ct_ico{display:flex;justify-content:center;gap:10px;margin-top:20px;}
.ct_ico a{height:38px;padding:0 18px;border-radius:19px;background:#e9edee;color:#425258;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
  cursor:pointer;transition:background .3s,color .3s;}
.ct_ico a:hover{background:var(--blue);color:#fff;}
.ct_ico .ct_bt{background:var(--slate);color:#fff;padding:0 26px;}
.ct_ico .ct_bt:hover{background:var(--blue);}

/* ===== 블록 → 관련 페이지 인라인 링크 =====
   설명이 그 섹션 안에서 끝나지 않는 두 곳(서류 6종 → 서비스, 핵심 기능 → 기술)에만 남긴다.
   나머지 섹션에는 기계적으로 달려 있었으나, 바로 아래 "더 알아보기" 목록과
   같은 링크가 겹쳐 제거했다.
   밝은 배경 : 진초록 글자(#3F7A2B)로 흰 바탕 대비 5.2:1
   어두운 배경 : .on_dark 로 흰 글자 */
.more_row{margin-top:44px;display:flex;justify-content:center;position:relative;z-index:2;}
.more_row.left{justify-content:flex-start;}
.more_link{
  display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 28px;
  border:1px solid var(--teal);border-radius:26px;background:#fff;
  font-size:15px;font-weight:700;letter-spacing:-.03em;color:var(--blue);
  transition:background .28s,color .28s,border-color .28s;
}
/* 아이콘은 currentColor 를 따라간다 → 글자와 같은 색·같은 대비로 움직인다 */
.more_link .nico{width:18px;height:18px;}
.more_link i{font-style:normal;font-size:12px;transition:transform .28s var(--ease-out-expo);}
.more_link:hover{background:var(--blue);border-color:var(--blue);color:#fff;}
.more_link:hover i{transform:translateX(4px);}
.more_link.on_dark{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7);color:#fff;}
.more_link.on_dark:hover{background:#fff;border-color:#fff;color:var(--slate);}

/* ===== 더 알아보기 : 홈 하단 페이지 안내 (푸터 바로 위) =====
   카드마다 두르던 흰 상자·테두리·그림자를 걷어내고 가로줄 하나와 여백으로만 나눈다.
   같은 화면에 10개가 놓이므로 상자를 치는 순간 그것만으로 화면이 무거워진다. */
#pages{background:var(--offwhite);padding:104px 0 108px;}
.pg_head{text-align:center;}
.pg_head .small{font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--blue);}
.pg_head h2{font-size:42px;line-height:52px;font-weight:800;color:var(--slate);margin-top:12px;letter-spacing:-1px;}
.pg_head p{margin-top:16px;font-size:15px;line-height:26px;color:var(--gray);}
.pg_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px;margin-top:44px;}
.pg_card{
  display:flex;flex-direction:column;padding:24px 2px 26px;
  border-top:1px solid rgba(18,61,32,.16);
  transition:border-color .28s;
}
.pg_card:hover{border-top-color:var(--teal);}
.pg_card .pg_nm{
  display:flex;align-items:center;gap:10px;
  font-size:18px;font-weight:700;color:var(--slate);letter-spacing:-.04em;
}
.pg_card .pg_nm b{flex:1;font-weight:inherit;}
.pg_card .pg_nm .nico{width:19px;height:19px;color:var(--blue);transition:color .28s;}
.pg_card .pg_nm i{font-style:normal;font-size:13px;color:var(--teal);transition:transform .28s var(--ease-out-expo);}
.pg_card:hover .pg_nm{color:var(--blue);}
.pg_card:hover .pg_nm i{transform:translateX(4px);}
.pg_card p{margin-top:10px;font-size:14px;line-height:24px;color:var(--gray);}
/* 개인정보처리방침은 폼이 개인정보를 수집하므로 반드시 접근 가능해야 한다.
   소개용 카드 목록에서는 빼고, 전 페이지 푸터 · 전체메뉴 · 문의 폼 세 곳에 항상 노출한다. */

/* ===== footer (h 395) ===== */
/* 페이지 링크 줄이 들어가 높이를 고정하면 잘린다 → 최소높이로 바꾼다 */
#footer{min-height:395px;background:#1e2a31;color:rgba(255,255,255,.72);padding:64px 0 56px;}
.ft_top{display:flex;align-items:center;gap:14px;font-size:14px;color:#fff;}
.ft_top .bar{width:1px;height:12px;background:rgba(255,255,255,.35);}
.ft_co{margin-top:26px;font-size:13px;color:rgba(255,255,255,.86);display:flex;flex-wrap:wrap;gap:10px 32px;}
.ft_nav{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:11px 22px;}
.ft_nav a{font-size:13px;font-weight:500;color:#dbe4e7;transition:color .25s;}
.ft_nav a:hover{color:#fff;text-decoration:underline;}
.ft_nav .ft_pv{font-weight:700;color:#fff;}
.ft_note{margin-top:26px;font-size:11px;line-height:20px;color:rgba(255,255,255,.80);}
.ft_cp{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:11px;color:rgba(255,255,255,.74);}

/* ===== 팝업 (진입 시) ===== */
.popup_wrap{position:fixed;inset:0;z-index:1000;display:none;}
.popup_wrap.on{display:block;}
.popup_dim{position:absolute;inset:0;background:rgba(0,0,0,.6);}
.popup_in{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:350px;z-index:2;
  animation:pop .7s var(--ease-out-expo) both;}
@keyframes pop{0%{top:-100vh}100%{top:50%}}
.pop_view{width:350px;height:570px;overflow:hidden;position:relative;background:#000;}
.pop_track{display:flex;height:100%;}
.pop_slide{flex:0 0 350px;height:570px;position:relative;}
.pop_slide .imgcut{width:100%;height:100%;}
.pop_slide .pv_tx{position:absolute;left:0;bottom:0;width:100%;padding:26px 24px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.78),transparent);}
.pop_slide .pv_tx b{display:block;font-size:23px;font-weight:800;letter-spacing:-1px;}
.pop_slide .pv_tx span{display:block;font-size:13px;margin-top:8px;opacity:.85;}
.pop_pag{position:absolute;left:0;bottom:14px;width:100%;display:flex;justify-content:center;gap:7px;z-index:3;}
.pop_pag i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;}
.pop_pag i.on{background:#fff;}
.pop_x{display:block;width:100%;text-align:center;color:#fff;font-size:15px;font-weight:600;padding-bottom:14px;}
/* 모바일 하단 고정 CTA (원본 .right_by.mo 대응) */
.right_by{display:none;}
.right_by.show{opacity:1;}
.pop_cta{width:350px;height:52px;display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--slate);color:#fff;font-size:15px;font-weight:600;transition:background .3s;}
.pop_cta:hover{background:var(--blue);}
.pop_cta i{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-style:normal;}
.pop_bar{width:350px;height:34px;display:flex;align-items:center;justify-content:space-between;
  background:#000;color:#fff;font-size:13px;padding:0 12px;}
.pop_bar button{font-size:13px;color:rgba(255,255,255,.8);}
.pop_bar button:hover{color:#fff;}

/* ===== 관심고객등록 ===== */
.guest_pop_wrap{position:fixed;inset:0;z-index:1100;display:none;}
.guest_pop_wrap.on{display:block;}
.guest_pop_bg{position:absolute;inset:0;background:#000;opacity:.86;}
.guest_in{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:1152px;max-height:88vh;overflow-y:auto;background:#fff;padding:56px 72px;z-index:2;}
.guest_in h2{font-size:35.875px;line-height:35.875px;font-weight:400;color:#000;letter-spacing:-.5px;}
.guest_in .g_sub{font-size:23px;font-weight:800;letter-spacing:-1px;margin-top:14px;}
.guest_close{position:absolute;right:26px;top:20px;font-size:26px;}
.g_form{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;}
.g_form .row{display:flex;flex-direction:column;gap:9px;}
.g_form .row.full{grid-column:1 / -1;}
.g_form label{font-size:14px;font-weight:700;}
.g_form input,.g_form select,.g_form textarea{
  height:50px;border:1px solid #ddd;padding:0 15px;font-size:14px;font-family:inherit;
  transition:border-color .3s;background:#fff;
}
.g_form textarea{height:96px;padding:14px 15px;resize:none;}
.g_form ::placeholder{color:#63706A;opacity:1;}
.g_form input:focus,.g_form select:focus,.g_form textarea:focus{outline:none;border-color:var(--teal);}
.g_agree{grid-column:1 / -1;margin-top:6px;border:1px solid #eee;padding:18px;background:#fafafa;}
.g_agree p{font-size:12px;line-height:20px;color:var(--gray);height:78px;overflow-y:auto;}
.g_agree .g_pv{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;
  color:var(--slate);text-decoration:underline;text-underline-offset:2px;}
.g_agree .g_pv:hover{color:var(--blue);}
.g_agree label{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:500;cursor:pointer;}
.g_submit{grid-column:1 / -1;height:58px;background:var(--slate);color:#fff;font-size:16px;font-weight:700;
  transition:background .3s;margin-top:6px;}
.g_submit:hover{background:var(--blue);}
.g_msg{grid-column:1 / -1;font-size:13px;color:var(--blue);font-weight:600;min-height:18px;}

/* ===== 지역도 확대 ===== */
.zoom_wrap{position:fixed;inset:0;z-index:1200;display:none;}
.zoom_wrap.on{display:block;}
.zoom_dim{position:absolute;inset:0;background:rgba(0,0,0,.86);}
.zoom_in{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1000px;height:660px;z-index:2;
  animation:building-popup-image .6s var(--ease-out-expo) both;}
@keyframes building-popup-image{0%{transform:translate(-50%,-50%) scale(.95);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.zoom_close{position:absolute;right:-6px;top:-44px;color:#fff;font-size:26px;}

/* ===== 반응형 ===== */
/* =========================================================
   반응형 — 3단 구성
     1200 : 폭만 좁힘 (데스크톱 레이아웃 유지)
     1024 : 태블릿. 섹션 높이 해제 + 제목 축소. 다열은 그대로 유지한다.
      600 : 1열 전환. 여기서만 접는다.
   768 에서 통째로 1열로 접으면 태블릿에서 세로로 크게 늘어나고
   원본 대비 위치가 수천 px 어긋난다. 접는 지점은 600 이 맞다.
   ========================================================= */
@media (max-width:1200px){
  .inner,.visual_in{width:92%;}
  .guest_in{width:92%;padding:44px 28px;}
  .brand_head{padding-left:0;}
  .brand_stat,.brand_slogan,.brand_note,.bswrap{padding:0;}
}

/* ── 태블릿 : 다열 유지 ── */
@media (max-width:1024px){
  /* 폭이 좁아지면 내용이 길어진다. 높이를 px 로 묶어두면 잘리므로 해제한다. */
  #section1,#section2,#section3,#section4,#section5,#section7,#section6,#footer{height:auto;}
  .summary,.loc_body{height:auto;}
  .visual{padding:110px 0 120px;}
  .summary{padding:64px 0 88px;}
  .loc_body{padding:64px 0 80px;}
  #section3{padding:96px 0 88px;}
  #section4,#section5,#section7,#section6{padding-bottom:80px;}
  #footer{padding-bottom:64px;}

  .main_tit_box h1{font-size:40px;line-height:50px;}
  .summary h2{font-size:38px;line-height:44px;}
  .loc_body h2,.chk_head h2,.brand_head h2{font-size:36px;line-height:46px;}
  .ct_head h2{font-size:36px;line-height:40px;}
  .rent_head h2{font-size:34px;line-height:44px;}

  .loc_map{height:560px;}
  .map_circle{width:620px;height:620px;right:-80px;top:-120px;}
  .pre_item .imgcut{width:100%;height:240px;}
  .pre_item h3{font-size:27px;line-height:37px;}
  .ben_grid li{padding:36px 20px;}
  .bs_slide .imgcut{height:150px;}

  /* 좁아지면 회전 배너가 본문을 덮는다 → 숨기고 하단 CTA 로 대체 */
  .by_bn_box{display:none;}
  /* 하단 고정 CTA 가 스크롤 표시를 덮는다 */
  .visual_scroll{display:none;}
  .right_by.mo{
    display:flex;position:fixed;left:0;bottom:0;width:100%;height:88px;z-index:10;
    background:rgba(16,28,35,.94);align-items:center;
  }
  .right_by .rb_item{
    flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
    color:#fff;font-size:12px;line-height:1.4;text-align:center;gap:2px;
    border-right:1px solid rgba(255,255,255,.16);
  }
  .right_by .rb_item:last-child{border-right:0;}
  .right_by .rb_item b{font-size:14px;font-weight:800;}
  .right_by .rb_main{background:var(--blue);font-weight:700;font-size:14px;}
  #footer{padding-bottom:104px;}

  #pages{padding:80px 0 84px;}
  .pg_head h2{font-size:34px;line-height:44px;}
  .pg_grid{grid-template-columns:1fr 1fr;gap:0 36px;margin-top:36px;}
}

/* ── 좁은 태블릿 : 혜택 6칸만 3열 → 2열 ── */
@media (max-width:820px){
  .ben_grid{grid-template-columns:1fr 1fr;}
  .ct_step{grid-template-columns:1fr;}
  .ct_step li+li{border-left:0;border-top:1px solid var(--line);}
  .ben_grid li:nth-child(3)::after{display:block;}
  .ben_grid li:nth-child(2n)::after{display:none;}
  .ben_grid li:nth-child(-n+4){border-bottom:1px solid var(--line);}
  .header{padding:0 22px;}
  .h_type,.h_bar{display:none;}
}

/* ── 모바일 : 여기서 1열로 접는다 ── */
@media (max-width:600px){
  .header{padding:0 16px;height:56px;}
  .h_nm,.h_badge{display:none;}
  .visual{padding:96px 0 110px;}
  .main_tit_box h1{font-size:32px;line-height:42px;}
  .main_tit_box h1 span{flex-direction:column;align-items:flex-start;gap:0;}
  .main_tit_box .vs_sub{padding-bottom:8px;}
  .intro_tit h1{font-size:2rem;gap:.3rem;}
  .summary{padding:56px 0 64px;}
  .summary h2{font-size:30px;line-height:38px;}
  .summary .script{width:100%;text-align:center;}
  .sum_tbl{grid-template-columns:1fr;gap:0;}
  .sum_head{margin-top:64px;}
  .loc_map{height:340px;}
  .map_circle{width:420px;height:420px;right:-120px;top:-90px;}
  .map_zoom{left:20px;top:auto;bottom:20px;width:78px;height:78px;font-size:11px;}
  .loc_body{padding:56px 0 64px;}
  .loc_body h2,.chk_head h2,.brand_head h2{font-size:30px;line-height:40px;}
  .ct_head h2{font-size:30px;line-height:34px;}
  .rent_head h2{font-size:26px;line-height:36px;}
  .loc_list,.pre_grid,.ben_grid,.ct_body{grid-template-columns:1fr;gap:34px;}
  .pg_grid{grid-template-columns:1fr;gap:0;}
  .pg_head h2{font-size:28px;line-height:38px;}
  .more_row{margin-top:34px;}
  .more_link{height:48px;padding:0 22px;font-size:14px;}
  .pre_item .imgcut{width:100%;height:240px;}
  .pre_item h3{font-size:25px;line-height:34px;}
  .ben_grid li::after{display:none;}
  .ben_grid li{border-bottom:1px solid var(--line);padding:32px 16px;}
  .chk_list li{gap:10px;}
  .chk_ico{width:56px;padding-left:12px;}
  .chk_ico svg{width:34px;height:34px;}
  .chk_list h3{font-size:19px;}
  .chk_no{font-size:10px;}
  .ct_head{flex-direction:column;align-items:flex-start;gap:12px;}
  .ct_step li{padding:26px 4px;}
  .g_form{grid-template-columns:1fr;}
  /* 전체메뉴 : 앵커 7 + 페이지 10 이 한 화면에 들어가도록 밀도를 올린다 */
  .site_menu{padding:76px 16px 40px;}
  .site_nav li a{height:46px;font-size:15px;}
  .site_pages li a{height:38px;padding:0 13px;font-size:13px;}
  .site_grp_pg{margin-top:26px;padding-top:22px;}
  .ft_nav{gap:10px 16px;}
  .ft_co{gap:8px 18px;}
  .zoom_in{width:92%;height:60vh;}
  /* 오른쪽 항목이 숫자가 아니라 문장이므로, 좁은 화면에서는 세로로 쌓아 본문 폭을 확보한다 */
  .brand_stat li{flex-direction:column;align-items:flex-start;gap:10px;}
  .brand_stat .big{font-size:26px;margin-left:0;}
  .bs_slide .imgcut{height:120px;}
}

/* =========================================================
   좁은 화면(≤1023)의 페이지 이동 — 헤더 둘째 줄 가로 스크롤 탭
   1024 미만에서는 첫 화면에 햄버거밖에 없어 다른 페이지가 있다는 사실이
   드러나지 않았다. 헤더를 두 줄로 나눠 둘째 줄에 같은 5개(데스크톱 상시 메뉴와
   동일한 항목)를 알약 탭으로 깐다. 넘치면 가로로만 스크롤되므로 헤더 높이는
   한 줄(약 34px)만 늘고, 히어로는 그대로 풀스크린이다.
   ※ 이 블록은 위의 1024/820/600 블록보다 뒤에 와야 헤더 규칙을 덮어쓴다.
   ========================================================= */
@media (max-width:1023px){
  .header{
    height:auto;padding:0;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
  }
  /* align-self 를 주지 않으면 세로 플렉스에서 가로로 늘어나 헤더 폭을 다 덮는다.
     그러면 그 아래 깔린 전체메뉴 닫기(×) 클릭을 h_left 가 가로챈다. */
  .h_left{height:58px;padding:0 22px;flex:0 0 auto;align-self:flex-start;}

  .h_nav{
    display:flex;align-items:center;gap:7px;flex:0 0 auto;pointer-events:auto;
    padding:0 22px 9px;
    overflow-x:auto;overflow-y:hidden;white-space:nowrap;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .h_nav::-webkit-scrollbar{display:none;}
  .h_nav a{
    flex:0 0 auto;height:30px;padding:0 13px;border-radius:15px;
    display:inline-flex;align-items:center;
    border:1px solid rgba(255,255,255,.38);
    font-size:13px;font-weight:600;letter-spacing:-.02em;color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,.45);
  }
  /* 흰 알약(#fff) + 진초록 글자(#123D20) = 대비 14.6:1 */
  .h_nav a[aria-current="page"]{
    background:#fff;color:var(--slate);border-color:#fff;font-weight:700;text-shadow:none;
  }
  /* 연초록 알약(#86C95F) + 진초록 글자(#123D20) = 대비 6.0:1 */
  .h_nav a.h_cta{
    background:var(--sky);color:var(--slate);border-color:var(--sky);
    font-weight:700;text-shadow:none;
  }
}
@media (max-width:600px){
  .h_left{height:52px;padding:0 16px;}
  .h_nav{padding:0 16px 8px;gap:6px;}
  .h_nav a{height:28px;padding:0 11px;font-size:12px;}
}

/* =========================================================
   모바일 최적화 — 2026-08-18
   실제 크롬 390px(동일 출처 iframe) 으로 직접 보고 잡은 것만 적는다.
   이 블록은 위의 1023/600 블록보다 뒤에 와야 덮어쓴다.
   ========================================================= */

/* 한글이 음절 단위로 깨졌다("온사이트(On-site) 충전 / 소가"). 전 폭 공통. */
body,h1,h2,h3,h4,p,li,dd,dt,a,span,strong,b,em{word-break:keep-all;overflow-wrap:break-word;}

@media (max-width:1023px){
  /* 헤더 배경이 투명이라 스크롤 중 본문 제목이 헤더 뒤로 겹쳐 읽혔다. */
  .header{background:rgba(11,26,17,.93);backdrop-filter:saturate(140%) blur(10px);}
  .header::before{display:none;}
  body.menu-open .header{background:transparent;backdrop-filter:none;}
  /* 전체메뉴 배경이 opacity .94 라 본문과 하단 CTA 가 그대로 비쳤다. */
  .site_wrap.on .site_bg{opacity:1;background:#0B1A11;}
}

@media (max-width:600px){
  /* ── 헤더 ── */
  /* 로고만 남아 회사명이 사라졌다. 국문만 되살린다(영문은 폭이 안 나온다). */
  .h_nm{display:inline;font-size:13px;font-weight:700;letter-spacing:-.04em;}
  .h_nm em{display:none;}

  /* ── 히어로 ── */
  /* iOS/안드로이드 주소창 때문에 100vh 가 실제 화면보다 크다 */
  .visual{min-height:100vh;min-height:100svh;}
  /* 하단 CTA 를 낮췄으므로 스크롤 표시를 되살려 하단 빈 공간을 채운다 */
  .visual_scroll{display:block;bottom:84px;}

  /* ── 하단 고정 CTA ── */
  /* 88px 은 800px 화면의 11% 였다 */
  .right_by.mo{height:64px;}
  .right_by .rb_item{font-size:11px;gap:1px;}
  .right_by .rb_item b{font-size:13px;}
  .right_by .rb_main{font-size:14px;}
  #footer{padding-bottom:80px;}

  /* 앵커로 이동하면 고정 헤더(88px)가 제목 윗줄을 잘랐다 */
  #section1,#section2,#section3,#section4,#section5,#section6,#section7,#pages,#footer,#summary{
    scroll-margin-top:92px;
  }

  /* ── 전체메뉴 ── */
  /* ×가 두 개였다(햄버거가 변한 ×, 메뉴 자체의 ×). 누른 자리의 하나만 남긴다. */
  .site_close{display:none;}
  .site_menu{padding:70px 16px 88px;}

  /* ── 서류 6종 카드 ── */
  /* 가운데 정렬 4줄 본문은 375px 에서 읽기 어렵다. 왼쪽 정렬로 내리고
     아이콘 블록(카드당 100px × 6)을 줄여 스크롤 길이를 낮춘다. */
  .ben_grid{margin-top:40px;}
  .ben_grid li{padding:26px 2px;text-align:left;}
  .ben_ico{height:38px;margin:12px 0 14px;justify-content:flex-start;}
  .ben_ico svg{width:32px;height:32px;}
  .ben_grid h3{font-size:19px;line-height:28px;}
  .ben_grid p{margin-top:12px;line-height:25px;}

  /* ── 그 외 세로 리듬 ── */
  .pre_item{padding-left:0;border-left:0;}
  .rent_note{margin-top:36px;}
}

@media (max-width:600px){
  /* 820 블록의 `.ben_grid li:nth-child(3)::after{display:block}` 이 특이성에서 이겨
     1열로 접힌 뒤에도 3번째 카드에만 세로 구분선이 남아 있었다. */
  .ben_grid li:nth-child(3)::after,.ben_grid li:nth-child(6)::after{display:none;}
  /* 회사 개요에서 항목 목록과 슬로건 사이가 120px 비었다 */
  .brand_slogan{margin-top:44px;}
}

@media (max-width:600px){
  /* iOS Safari 는 글자 16px 미만 입력칸에 포커스가 가면 화면을 자동 확대하고,
     빠져나와도 배율이 되돌아오지 않는다. 문의 폼 전체가 그 대상이었다(15px). */
  input[type=text],input[type=tel],input[type=email],input[type=number],
  input[type=search],input[type=url],input[type=date],select,textarea{font-size:16px;}
  /* 전체메뉴가 세로 중앙정렬인데 아래 여백만 커서 위로 쏠려 보였다 */
  .site_menu{padding-bottom:56px;}
}
@media (max-width:600px){
  .g_form input,.g_form select,.g_form textarea{font-size:16px;}
}

/* =========================================================
   모바일 디자인 재정비 — 2026-08-18 (2차)
   실제 크롬 390px 로 전 구간을 다시 보고 잡은 것.
   1차가 "안 깨지게" 였다면 이번은 "읽는 축을 하나로".
   ========================================================= */
@media (max-width:600px){
  /* ── ① 강제 줄바꿈 해제 ──
     데스크톱 2줄용 <br> 이 좁은 폭에서 조판을 망가뜨렸다.
     줄머리에 가운뎃점이 오거나("·점검 LIST"), 한 단어만 떨어졌다.
     keep-all 이 들어갔으므로 자연 줄바꿈이 더 낫다. */
  .mbr{display:none;}

  /* ── ② 정렬 축 통일 ──
     히어로·카드·도입대상·푸터는 좌측인데 섹션 헤드와 문의 블록만
     가운데였다. 한 화면 안에서 축이 두 번 바뀌면 완성도가 떨어져 보인다.
     좁은 폭에서 여러 줄이 되는 한글 본문은 좌측이 정석이다. */
  .rent_head,.chk_head,.ct_body,.pg_head{text-align:left;}
  .rent_head .script,.chk_head .small{display:block;}
  /* 버튼은 폭을 꽉 채워 글 기둥과 좌우 끝을 맞춘다 */
  .more_row{justify-content:stretch;}
  .more_link{width:100%;justify-content:center;}
  .ct_ico{display:flex;}
  .ct_bt{width:100%;justify-content:center;}

  /* ── ③ 도입 대상 : 본문 폭 회복 ──
     데스크톱 가로 배치(글 | CHECK | 아이콘)가 그대로 눌려
     375px 에서 본문에 230px 밖에 안 남아 있었다.
     번호와 아이콘을 위로 올리고 글은 전체 폭을 쓴다. */
  .chk_list{margin-top:44px;}
  .chk_list li{flex-wrap:wrap;align-items:center;gap:0 10px;padding:26px 0;}
  .chk_ico{order:1;width:auto;padding-left:0;border-left:0;justify-content:flex-start;}
  .chk_ico svg{width:30px;height:30px;}
  .chk_no{order:2;flex:1;text-align:left;font-size:11px;line-height:1.2;}
  .chk_list .tx{order:3;flex:0 0 100%;margin-top:14px;}
  .chk_list h3{font-size:21px;line-height:30px;}
  .chk_list p{font-size:14px;line-height:24px;margin-top:10px;}
  .chk_note{margin-top:34px;}

  /* ── ④ 세로 리듬 ──
     블록 사이가 64~86px 이라 800px 화면에서 빈 화면처럼 보였다. */
  .sum_head{margin-top:44px;}
  .sum_tbl{margin-top:34px;}
  .sum_note,.pre_note{margin-top:36px;}
  .brand_stat{margin-top:40px;}
  .ct_step{margin-top:44px;}
  .ct_body{margin-top:36px;gap:36px;}

  /* ── ⑤ 푸터 상단 메타 ──
     3열 가로 배치라 항목마다 2줄로 깨지고 구분선만 남았다. */
  .ft_top{flex-direction:column;align-items:flex-start;gap:6px;line-height:1.5;}
  .ft_top .bar{display:none;}

  /* ── ⑥ 서류 카드 아이콘 위계 ──
     선 아이콘 하나가 왼쪽에 떠 있어 카드 시작점이 약했다. */
  .ben_ico svg{width:30px;height:30px;stroke:var(--blue);stroke-width:1.5;}
  .ben_no{letter-spacing:.06em;}
}

@media (max-width:600px){
  /* ── ⑦ 본문 문단의 데스크톱용 줄바꿈 해제 ──
     "…온사이트(On-site) 충전소가" 가 폭을 넘겨 '충전소가' 한 마디만
     떨어져 나왔다. 원문에 <br> 앞뒤로 공백이 있어 해제하면 한 문단으로 붙는다. */
  /* .ct_col 은 제외한다 — 주소의 <br> 는 앞뒤에 공백이 없어서
     숨기면 "505-J312호대표" 처럼 붙어버린다(실제로 그렇게 깨졌다). */
  .rent_head p br,.sum_desc br{display:none;}

  /* ── ⑧ 서류 카드도 도입 대상과 같은 문법으로 ──
     [아이콘] 서류 01 을 한 줄로 묶어 카드 시작점을 만들고,
     제목·본문은 전체 폭을 쓴다. 두 섹션의 카드 언어가 같아진다. */
  .ben_grid li{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;}
  .ben_ico{order:1;height:auto;margin:0;}
  .ben_no{order:2;flex:1;}
  .ben_grid h3{order:3;flex:0 0 100%;margin-top:14px;}
  .ben_grid p{order:4;flex:0 0 100%;}
}

@media (max-width:600px){
  /* ── ⑨ 회사 개요 섹션의 남은 가운데 정렬 ──
     섹션 위쪽(라벨·회사명·설명)만 가운데였고 '회사 개요' 아래는 왼쪽이라
     한 섹션 안에서 축이 바뀌었다. */
  #summary .inner > .rv{text-align:left;}
  .sum_badge{justify-content:flex-start;}
  .sum_line{margin-left:0;}
  .sum_desc{text-align:left;}
}

@media (max-width:600px){
  /* 연락처 칼럼의 전화·메일 버튼만 가운데였다 */
  .ct_ico{justify-content:flex-start;gap:10px;}
}

@media (max-width:600px){
  /* 마지막 페이지 카드 아래 110px 가 흰 여백으로 남았다 */
  #pages{padding:64px 0 48px;}
  .pg_grid li:last-child{padding-bottom:0;border-bottom:0;}
}

/* =========================================================
   폰 실기기 조건 — 2026-08-18 (3차)
   노치/홈 인디케이터와 손가락 크기는 데스크톱 창을 좁혀서는 안 보인다.
   ========================================================= */
@media (max-width:1023px){
  /* ── 안전영역 ──
     하단 고정 CTA 가 아이폰 홈 인디케이터(약 34px)와 안드로이드 제스처바에
     그대로 깔려 마지막 줄이 가려졌다. 바를 그만큼 키우고 안쪽 여백으로 민다. */
  .right_by.mo{
    height:calc(64px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    align-items:flex-start;
  }
  .right_by .rb_item{height:64px;}
  #footer{padding-bottom:calc(80px + env(safe-area-inset-bottom));}
  /* 가로모드에서 노치가 본문을 먹는다 */
  .header,.inner,.visual_in{
    padding-left:max(0px,env(safe-area-inset-left));
    padding-right:max(0px,env(safe-area-inset-right));
  }
}

@media (max-width:600px){
  /* ── 터치 영역 44px ──
     헤더 알약이 28px, 햄버거가 34px 이라 손가락으로 오탭이 났다.
     보이는 크기는 그대로 두고 눌리는 범위만 넓힌다. */
  .h_nav a{position:relative;}
  .h_nav a::after{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px;}
  .menu_bt{position:relative;}
  .menu_bt::after{content:"";position:absolute;left:-10px;right:-10px;top:-6px;bottom:-6px;}
  .ct_bt{height:48px;}
  .site_pages li a{height:42px;}
  /* 탭 시 파란 사각형 하이라이트 제거 */
  a,button{-webkit-tap-highlight-color:rgba(134,201,95,.18);}
}