:root
{
    --max:1440px;
    --main-color:#0a1f35;
    --sub-color:#A3C857;
    --pad:24px;
    --text:#ffffff;
    --muted:rgba(255,255,255,.78);
    --line:rgba(255,255,255,.16);
    --cta:#ffffff;
    --ctaText:#0f172a;
  --gnb-h:72px;
}

/* reset to ensure full-viewport hero */
html,body{height:100%;margin:0;padding:0;}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Helvetica Neue","Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;color:#111;line-height:1.5;word-break:keep-all;}
a{color:inherit;text-decoration:none;}
a:hover,a:focus,a:active{text-decoration:none;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--color_primary);outline-offset:2px;}
ul,ol{margin:0;padding:0;list-style:none;}
img{vertical-align:middle;border:0;max-width:100%;height:auto;}
button{background:none;border:0;cursor:pointer;font:inherit;color:inherit;}
table{border-collapse:collapse;border-spacing:0;}
input,textarea,select{font-family:inherit;}
::placeholder{color:#abb4bd;opacity:1;}::-webkit-input-placeholder{color:#abb4bd;}:-ms-input-placeholder{color:#abb4bd;}
i{font-style:normal;}


.mobile_only{ display:none; }
.hero-official-sub2 {display: block;}
.hero-official-sub3 {display: none;}


@media (max-width: 560px){
  .mobile_only{ display:inline; }
  .desktop_only{ display:none; }
  .hero-official-sub2 {display: none;}
  .hero-official-sub3 {display: block;}
}
/* HERO */
/* use --vh to avoid mobile address-bar gaps; fallback to 1vh */
/* 헤더(GNB) 영역은 그대로 두고, 히어로는 남은 화면 높이를 꽉 채움 */
.hero{position:relative;width:100%;height:calc(var(--vh,1vh) * 100 - var(--gnb-h));min-height:0;color:#fff;overflow:hidden;}
/* 배경 이미지: 여기만 교체하면 됨 */
.hero-bg{position:absolute;top:0;left:0;right:0;bottom:0;background-image:url("/images/hero_1.png");background-position:center center;background-size:cover;background-repeat:no-repeat;}
/* Ensure swiper slides (used as background) fill hero area */
.hero-swiper{position:absolute;inset:0;height:100%;width:100%;}
.hero-swiper .swiper-wrapper,.hero-swiper .swiper-slide{height:100%;}
.hero-swiper .swiper-slide{background-position:center center;background-size:cover;background-repeat:no-repeat;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.55) 100%);}
/* GNB: 이미지와 분리된 상단 고정 영역 (화이트 배경) */
.gnb{ position:relative; z-index:10; background:#ffffff; border-bottom:1px solid rgba(15,23,42,.06); }
.gnb-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:18px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.logo img{ height:34px; width:auto; display:block; }
.logo{ display:inline-flex; align-items:center; }
.menu > a.logo{ padding:0 !important; }
.menu > a.logo::after{ content:none; }

.menu{ display:flex; justify-content: space-between; align-items:center; gap:40px; max-width: var(--max); width: 100%;}
.menu a{ 
  color:#0f172a; 
  text-decoration:none; 
  font-weight:600; 
  font-size:17px; 
  padding:10px 10px; 
  border-radius:999px; 
  transition:background .2s ease, transform .2s ease;
  position:relative;
}
.menu > a::after{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:2px;
  /* background:var(--sub-color); */
  background:var(--main-color);
  transition:width .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu > a:hover::after{
  width:100%;
}
.menu a:hover{ transform:translateY(-1px); }
.menu-cta{ background:#0f172a; color:#fff !important; padding:10px 14px !important; box-shadow:0 10px 18px rgba(15,23,42,.12); }

/* GNB products dropdown */
.menu-dd{position:relative;display:inline-flex;align-items:center;}
.menu-dd__btn{
  color:var(--main-color);
  font-weight:700;
  font-size:16px;
  padding:10px 16px;
  border-radius:8px;
  transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:2px solid transparent;
  position:relative;
  z-index:10001;
}
.menu-dd__btn::before{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  margin:0 auto;
  width:0;
  height:2px;
  background:var(--main-color);
  /* background:var(--sub-color); */
  transition:width .3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index:10002;
}
.menu-dd__btn:hover::before,
.menu-dd.is-open .menu-dd__btn::before{
  width:100%;
}
.menu-dd__btn::after{
  content:'▼';
  font-size:9px;
  opacity:0.7;
  transition:transform .25s ease;
}
/* .menu-dd.is-open .menu-dd__btn{
  background:rgba(163, 200, 87, 0.08);
  border-color:rgba(163, 200, 87, 0.2);
} */
.menu-dd.is-open .menu-dd__btn::after{
  transform:rotate(180deg);
}
/* .menu-dd__btn:hover{
  background:rgba(163, 200, 87, 0.06);
  transform:translateY(-1px);
} */
.menu-dd__panel{
  display:none;
  position:absolute;
  top:calc(100% + 20px);
  left:50%;
  transform:translateX(-50%);
  min-width:300px;
  max-width:340px;
  background:#fff;
  color:var(--main-color);
  border:1px solid var(--main-color);
  border-radius:6px;
  /* box-shadow:0 20px 60px rgba(10, 31, 53, 0.15), 0 0 0 1px rgba(163, 200, 87, 0.1); */
  padding:12px;
  z-index:9999;
  animation:dropdown-fade-in .3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow:visible;
}
@keyframes dropdown-fade-in{
  from{opacity:0;transform:translateX(-50%) translateY(-10px) scale(0.95);}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
}
.menu-dd.is-open .menu-dd__panel{
  display:block;
}

.menu-dd__primary-list{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:0;
}

/* 1차 카테고리 아이템 */
.menu-dd__item{
  position:relative;
  border-radius:12px;
  transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0px 8px;
  /* border:2px solid transparent; */
  /* background:linear-gradient(135deg, rgba(163, 200, 87, 0.02) 0%, rgba(163, 200, 87, 0.04) 100%); */
  cursor:pointer;
}
.menu-dd__primary-link{
  flex:1;
  color:var(--main-color);
  padding:6px 14px !important;
  transition:all .25s ease;
  letter-spacing:-0.2px;
}

.menu-dd__item:hover .menu-dd__primary-link{
  color:var(--main-color);
}
.menu-dd__item.is-active{
  background:linear-gradient(135deg, var(--main-color) 0%, #0d2842 100%);
  /* 배경은 기본 상태와 동일하게 유지합니다 (강한 hover 배경 제거) */
  background: linear-gradient(135deg, rgba(163, 200, 87, 0.02) 0%, rgba(163, 200, 87, 0.04) 100%);
  border-color: transparent;
  color: tomato;
  font-weight:800;
}
.menu-dd__item.is-active .menu-dd__primary-link{
  color: tomato;
}
.menu-dd__arrow{
  font-size:18px;
  opacity:0.5;
  transition:all .25s ease;
  font-weight:bold;
  color:var(--main-color);
}
.menu-dd__primary-link::after,
.menu-dd__primary-link:hover::after{content:none !important; display:none !important;}
.menu-dd__item:hover .menu-dd__arrow{
  opacity:1;
  color:var(--main-color);
}
.menu-dd__item.is-active .menu-dd__arrow{
  color:var(--sub-color);
  opacity:1;
  transform:translateX(4px) scale(1.2);
}

/* 2차 카테고리 플라이아웃: 1차 패널 옆에 별도로 표시 */
.menu-dd__flyout{
  position:absolute;
  left:calc(100% + 2px);

  min-width:260px;
  max-width:320px;
  background:#fff;
  border:1px solid var(--main-color);
  border-radius:6px;
  /* box-shadow:0 20px 60px rgba(10, 31, 53, 0.18), 0 0 0 1px rgba(163, 200, 87, 0.15); */
  padding:10px !important;
  z-index:10000;
  animation:submenu-slide-in .3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3차 제품 플라이아웃 */
.menu-dd__flyout--products{
  min-width:280px;
  max-width:360px;
  max-height:420px;
  overflow:auto;
}

.menu-dd__sublink.is-active{
  font-weight:800 !important;
  color: tomato !important;
}

.menu-dd__productlist{
  display:flex;
  flex-direction:column;
}

.menu-dd__productlink{
  display:block;
  padding:8px 14px !important;
  border-bottom: 1px solid #ebebeb;
  text-decoration:none;
}

.menu-dd__productname{
  display:block;
  font-weight:600;
  font-size:14px;
  color:var(--main-color);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@keyframes submenu-slide-in{
  from{opacity:0;transform:translateX(-15px) scale(0.95);}
  to{opacity:1;transform:translateX(0) scale(1);}
}
.menu-dd__sublink{
  display:block;
  padding:8px 14px !important;
  border-radius:10px;
  font-weight:600 !important;
  font-size:15px !important;
  color:var(--main-color);
  /* transition:all .25s cubic-bezier(0.4, 0, 0.2, 1); */
  white-space:nowrap;
  border:1px solid transparent;
  position:relative;
  /* background:transparent; */
  letter-spacing:-0.2px;
}
.menu-dd__sublink::after,
.menu-dd__sublink:hover::after{content:none !important; display:none !important;}
.menu-dd__sublink::before{
  content:'';
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--sub-color);
  opacity:0;
  transition:all .25s ease;
}
.menu-dd__sublink:hover::before{
  opacity:0;
}
.menu-dd__sublink:hover{
  /* 호버 시 배경색 변경 없음 */
  color:var(--main-color);
  border-bottom: 1px solid #ebebeb;
  border-radius: 0;
}
.menu-dd__empty{
  display:block;
  padding:20px 16px;
  color:#94a3b8;
  font-size:13px;
  text-align:center;
  font-style:italic;
}

/* Categories section under hero */
.cat-sec{padding:80px var(--pad) 80px;background:#fff}
.cat-wrap{max-width:var(--max);margin:0 auto}
.cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
.cat-head h2{margin:0;font-size:22px;color:var(--main-color);font-weight:900;letter-spacing:-.3px}
.cat-head p{margin:0;color:#64748b;font-size:13px}
.cat-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.cat-nav{margin-left:auto;display:flex;gap:8px;align-items:center}
.cat-nav .cat-prev,.cat-nav .cat-next,.cat-nav .w-prev,.cat-nav .w-next{width:34px;height:34px;border:1px solid rgba(15,23,42,.12);border-radius:8px;background:#fff;color:var(--main-color);font-weight:900;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.cat-nav .swiper-button-disabled{opacity:.35;cursor:default}
.cat-swiper{overflow:hidden}
.cat-swiper .swiper-wrapper{align-items:stretch}
.cat-swiper .swiper-slide{height:auto}
.w-swiper{overflow:hidden}
.w-swiper .swiper-wrapper{align-items:stretch}
.w-swiper .swiper-slide{height:auto}
.cat-card{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(15,23,42,.06);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.cat-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,23,42,.12);border-color:rgba(163,200,87,.45)}
.cat-link{display:flex;flex-direction:column;height:100%}
.cat-thumb{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#f8fafc,#eef2f7);margin:4px;border-radius:10px;overflow:hidden}
.cat-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-thumb-fallback{position:absolute;inset:0;background:linear-gradient(135deg,rgba(163,200,87,.25),rgba(163,200,87,.05))}
.cat-name{padding:12px 10px;font-size:15px;font-weight:700;color:var(--main-color);text-align:center;display:block}

.order_products {background: #ffffff; margin-bottom: 50px;}
#order_products2 {background: #f7f7f7;}

/* Quote/CTA banner (after hydraulic products) */
.quote-banner{background:#0a7894; color:#fff;padding:0 var(--pad);}
.quote-banner__inner{max-width:var(--max);margin:0 auto;min-height:180px;padding:30px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.quote-banner__content{flex:1;min-width:0;}
.quote-banner__kicker{margin:0;font-size:22px;font-weight:900;letter-spacing:-.3px;}
.quote-banner__desc{margin:8px 0 0;color:rgba(255,255,255,.86);font-size:14px;line-height:1.6;}
.quote-banner__aside{display:flex;align-items:center;gap:16px;}
.quote-banner__ico{width:320px;height:auto;flex:0 0 auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.25));}
.quote-banner__btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px; margin-top: 20px; border-radius:4px;background:#fff;color:var(--main-color);font-weight:900;letter-spacing:-.2px;box-shadow:0 12px 24px rgba(0,0,0,.22);transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;}
.quote-banner__btn:hover{transform:translateY(-2px);filter:brightness(1.02);box-shadow:0 16px 30px rgba(0,0,0,.26);}

@media (max-width: 560px){
  .menu{ gap:14px; }
  .quote-banner__inner{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 0;min-height:auto;}
  .quote-banner__kicker{font-size:18px;}
  .quote-banner__aside{width:100%;justify-content:flex-start;}
  .quote-banner__ico{width:40px;}
}

/* Hide the quote banner on mobile */
@media (max-width: 560px){
  .quote-banner{ display:none; }
}

@media (max-width: 560px){
  /* 모바일: 유압스크랩 제품 섹션 상단 패딩 50px */
  .cat-sec{padding:50px var(--pad) 0}
  .cat-head h2{font-size:18px}
  .cat-grid{gap:10px}
  /* 모바일: 첫 카테고리 설명 문구 숨김 */
  .cat-sec:not(.order_products) .cat-head p{display:none}
  /* 모바일: 선별기 제품 섹션 설명 문구 숨김 */
  .cat-sec.order_products .cat-head p{display:none}
  /* 모바일: 선별기 제품 섹션 상단 50px, 하단 30px */
  .cat-sec.order_products{padding:50px var(--pad) 30px}
}

/* Center content wrapper */
.hero-center{
  position:relative;
  z-index:5;
  height:100%;
  display:flex;
  align-items:center;            /* 세로 중앙 */
}

.hero-grid{width:100%;max-width:var(--max);margin:0 auto;padding:36px var(--pad);display:grid;grid-template-columns:1.2fr .85fr;gap:28px;align-items:center;}

/* Left text */
/* NewYzer 스타일 텍스트 */
.hero-kicker{margin:0 0 14px;color:rgba(255,255,255,.85);font-size:14px;}
.hero-title{margin:0;font-size:64px;line-height:1.1;letter-spacing:-1.4px;font-weight:900;text-shadow:0 2px 12px rgba(0,0,0,.15);}
/* .hero-title .brand{color:#66d69b;} */
.hero-title .brand{color:#fff;}
.hero-mini{margin:10px 0 0;color:rgba(255,255,255,.85);font-size:14px;line-height:1.6}
.hero-official-lead{margin:18px 0 0;color:rgba(255,255,255,.9);font-size:26px; font-weight: 800; line-height:1.7;max-width:900px}
.hero-official{margin:8px 0 0;color:#fff;font-size:50px;line-height:1.15;font-weight:900;letter-spacing:-.6px;text-shadow:0 2px 12px rgba(0,0,0,.18)}
.hero-official-sub{margin:6px 0 0;color:rgba(255,255,255,.95);font-size:32px;line-height:1.5;font-weight:800}
.hero-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:#cfe9dc;font-weight:800;}
.hero-link:hover{color:#fff;text-decoration:underline;}
.hero-mini span {border: 1px solid #fff; padding: 6px 6px; border-radius: 4px;}

/* .hero-official::before{
  content:"";
  display:inline-block;
  width:8px;
  height:48px;
  background:#66d69b;
  border-radius:2px;
  padding-right: 6px;
  margin-right: 8px;
  margin-bottom: -6px;
} */

.hero-actions{
  margin-top:32px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.btn{
  height:52px;
  padding:0 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  font-size:15px;
  border:2px solid transparent;
  color:rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  transition:all .3s ease;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
}
.btn:hover{ transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2); }
.btn.primary{
  background:#fff;
  color:#0f172a;
  border-color:#fff;
}
.btn.primary:hover{
  background:#f8fafc;
}
.btn.ghost{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.3);
}
.btn.ghost:hover{
  background:rgba(255,255,255,.25);
}

/* Right card */
.hero-card{background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);color:#0f172a;border-radius:14px;overflow:hidden;border:1px solid rgba(15,23,42,.06);box-shadow:0 8px 24px rgba(15,23,42,.08);}
.card-head{padding:18px;background:linear-gradient(90deg,#061826,#0f172a);color:#fff}
.card-head h2{margin:0;font-size:18px;font-weight:800}
.card-head p{margin:6px 0 0;font-size:13px;opacity:.95}
.card-form{padding:16px;display:flex;flex-direction:column;gap:12px}
.field span{display:block;font-size:12px;font-weight:700;color:#334155;margin-bottom:6px}
.field input,.field select{width:100%;height:44px;border-radius:10px;border:1px solid rgba(15,23,42,.08);background:#fff;padding:0 12px;font-size:14px;outline:none}
.field input:focus,.field select:focus{border-color:rgba(59,130,246,.45);box-shadow:0 8px 20px rgba(59,130,246,.08)}
.btn.full{width:100%;padding:12px 16px;border-radius:10px;font-size:15px}
.card-steps{display:flex;gap:8px;padding:12px 16px;border-top:1px solid rgba(15,23,42,.04);background:transparent}
.card-steps .step{display:flex;align-items:center;gap:8px;background:rgba(15,23,42,.03);padding:8px 10px;border-radius:10px}
.card-steps .step b{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:#fff;color:#0f172a;font-weight:800}

/* Industry list styles - circular design (no card) */
.hero-industries{padding:8px 0;}
.industry-title{margin:0 0 10px;font-size:18px;font-weight:900;color:#fff}
.industry-container{padding:0;}
.industry-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:16px;justify-content:center;}
.industry-item{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:default;}
.industry-icon{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#0f172a,#334155);display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;box-shadow:0 4px 16px rgba(15,23,42,.15);transition:all .3s ease;}
.industry-item:hover .industry-icon{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 24px rgba(15,23,42,.25);}
.industry-item span{font-size:13px;font-weight:800;color:#ffffff;text-align:center;line-height:1.3;max-width:110px;}
.industry-cta{margin-top:24px;padding-top:24px;border-top:1px solid rgba(15,23,42,.08);}
.industry-note{margin:0 0 16px;font-size:14px;color:#334155;text-align:center;line-height:1.6;}
.industry-note strong{color:#0f172a;font-weight:800;}

.chip:has(input:checked){
  border-color:rgba(37,99,235,.35);
  box-shadow:0 10px 22px rgba(37,99,235,.10);
}

/* submit */
.submit{
  height:48px;
  border:none;
  border-radius:16px;
  background:#0f172a;
  color:#fff;
  font-size:14px;
  font-weight:950;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 12px 30px rgba(15,23,42,.18);
}
.submit:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 38px rgba(15,23,42,.22);
}

.mini{
  margin:4px 0 0;
  font-size:12px;
  line-height:1.5;
  color:#64748b;
}
.mini a{
  color:#334155;
  font-weight:900;
  text-decoration:none;
}
.mini a:hover{ text-decoration:underline; }

/* Hero features (bottom circles) */
.hero-features{display:flex;gap:22px;margin-top:36px;flex-wrap:wrap}
.hf-item{display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff}
.hf-icon{width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.hf-icon img{width:60%;height:60%;object-fit:contain}
.hf-item span{font-size:14px;font-weight:800;opacity:.95}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;gap:18px;}
  .hero-left{ text-align:center; }
  .hero-title{ font-size:42px; }
  .hero-official-lead{ font-size:18px; }
  .hero-official{ font-size:34px; }
  .hero-official-sub{ font-size:18px; }
  .hero-features{ justify-content:center; }
  .hf-icon{ width:72px; height:72px; font-size:26px; }
  .hf-item span{ font-size:13px; }
  .industry-icon{width:70px;height:70px;font-size:24px;}
}

@media (max-width: 560px){
  /* Mobile GNB: show only logo + hamburger */
  .menu{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
  .menu .menu-dd{display:none}
  .menu > a:not(.logo):not(.menu-hamburger){display:none}
  .menu > a.menu-hamburger{padding:0}
  .menu > a.menu-hamburger::after{content:none}
  .menu-hamburger img{width:34px;height:auto;display:block}

  .hero-left{ text-align:center; }
  .hero-title{ font-size:32px; }
  .hero-official-lead{ font-size:18px; margin-bottom: 30px;}
  .hero-official{ font-size:38px; }
  .hero-official-sub{ font-size:26px; }
  .btn{height:48px;padding:0 20px;font-size:14px;}
  .hero-features{ justify-content:center; gap:16px; }
  /* mobile: 3 items per row (two rows for 6 items) */
  .hero-features .hf-item{flex:0 0 25.3333%;box-sizing:border-box;text-align:center}
  .hf-icon{ width:60px; height:60px; font-size:22px; }
  .hf-item span{ font-size:12px; }
  .industry-icon{width:64px;height:64px;font-size:20px;}
  .industry-list{gap:12px;}
  .hero{ height:calc(100svh - var(--gnb-h)); min-height:0; }
}

/* About/Greeting section */
.about-sec{padding:80px var(--pad);background:#fff}
.about-wrap{max-width:var(--max);margin:0 auto}
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center}
.about-title{margin:0 0 12px;color:var(--main-color);font-size:26px;font-weight:900;letter-spacing:-.4px}
.about-lead{margin:0;color:#334155;font-size:16px;line-height:1.9;max-width:720px}
.about-sub{margin:12px 0 0;color:#475569;font-size:15px;line-height:1.8;max-width:720px}
.about-thanks{margin:10px 0 0;color:#64748b;font-size:14px;line-height:1.8;max-width:720px}
.about-actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.about-btn{height:44px;padding:0 16px;border-radius:10px;border:1px solid rgba(15,23,42,.14);background:#fff;color:var(--main-color);font-weight:800;font-size:14px;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}
.about-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(15,23,42,.12);border-color:rgba(163,200,87,.35)}
.about-right{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.about-card{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(15,23,42,.08)}
.about-media{position:relative;aspect-ratio:4/3;min-height:360px;background:linear-gradient(135deg,#f8fafc,#eef2f7);max-width: 100%;}
.about-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-overlay{position:absolute;inset:0;color:#fff;pointer-events:none}
.about-overlay::after{content:"";position:absolute;left:0;right:0;bottom:0;top:50%;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%)}
.about-tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff;padding:6px 10px;border-radius:10px;font-size:13px;font-weight:900;backdrop-filter: blur(6px)}
.about-desc{position:absolute;left:50%;top:70%;transform:translate(-50%,-50%);padding:10px;color:#fff;font-size:16px;line-height:1.7;font-weight:700;width:100%;max-width:100%; background: #000; text-align: center; white-space:normal;overflow-wrap:anywhere;word-break:break-all;}

/* Unified taller media across both cards */

/* Mobile: stack about images one-per-row and adjust sizes */
@media (max-width: 560px){
  .about-right{grid-template-columns:1fr !important;gap:12px}
  .about-media{min-height:260px}
  /* .about-desc{top:55%;left:0;right:0;padding:0 14px} */
}

@media (max-width: 980px){
  .about-grid{grid-template-columns:1fr;}
}

/* Estimate + Support (50:50) */
.service-duo{padding:80px var(--pad);background:#f8fafc}
.service-duo__inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.service-card{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:16px;padding:28px;box-shadow:0 6px 20px rgba(15,23,42,.06);display:flex;flex-direction:column}
.service-title{margin:0 0 10px;font-size:22px;font-weight:900;color:var(--main-color)}
.service-desc{margin:0 0 16px;color:#475569;font-size:15px;line-height:1.8}
.service-meta{margin:0 0 16px;color:#64748b;font-size:14px}
.service-meta__extra{margin-top:8px;color:#334155;font-size:14px;font-weight:700}
.service-meta-list{margin:0 0 16px;padding:0;list-style:none;color:#64748b;font-size:14px}
.service-meta-list li{margin:4px 0}
.service-actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
.service-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:6px;background:var(--main-color);color:#fff;font-weight:900;letter-spacing:-.2px;box-shadow:0 12px 24px rgba(0,0,0,.12);transition:transform .2s ease, box-shadow .2s ease}
.service-btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(0,0,0,.16)}
.service-btn.primary{background:#000;color:#fff;padding:0 18px;font-weight:900;box-shadow:0 12px 24px rgba(0,0,0,.22)}
.service-link{color:var(--main-color);font-weight:800;text-decoration:underline}

@media (max-width: 980px){
  .service-duo__inner{grid-template-columns:1fr}
}

/* Footer */
.site-footer{background:#0b1523;color:rgba(255,255,255,.86);padding:40px var(--pad) 28px;position:relative}
.site-footer__inner{max-width:var(--max);margin:0 auto}
.site-footer__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.10)}
.site-footer__links{display:flex;flex-wrap:wrap;gap:14px}
.site-footer__link{color:rgba(255,255,255,.9);font-weight:800;font-size:14px;letter-spacing:-.2px}
.site-footer__link:hover{text-decoration:underline}
.site-footer__mini{color:rgba(255,255,255,.65);font-size:13px;white-space:nowrap}

.site-footer__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;padding-top:22px}
.site-footer__brand{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.site-footer__name{font-size:18px;font-weight:900;color:#fff;letter-spacing:-.3px}
.site-footer__tag{font-size:13px;color:rgba(255,255,255,.72)}

.site-footer__info{margin:0;display:grid;gap:8px}
.site-footer__row{display:grid;grid-template-columns:86px 1fr;gap:10px;align-items:baseline}
.site-footer__row dt{margin:0;color:rgba(255,255,255,.55);font-size:13px;font-weight:700}
.site-footer__row dd{margin:0;color:rgba(255,255,255,.86);font-size:13px}
.site-footer__row a{color:#fff}
.site-footer__row a:hover{text-decoration:underline}

.site-footer__csTitle{display:block;color:#fff;font-weight:900;font-size:16px;margin-bottom:10px}
.site-footer__phone{display:inline-flex;color:#fff;font-size:22px;font-weight:900;letter-spacing:-.3px}
.site-footer__phone:hover{text-decoration:underline}
.site-footer__hours{margin-top:8px;color:rgba(255,255,255,.7);font-size:13px;line-height:1.6}
.site-footer__cta{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.site-footer__btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:10px;background:#fff;color:var(--main-color);font-weight:900;letter-spacing:-.2px;box-shadow:0 12px 24px rgba(0,0,0,.22);transition:transform .2s ease, box-shadow .2s ease, filter .2s ease}
.site-footer__btn:hover{transform:translateY(-2px);filter:brightness(1.02);box-shadow:0 16px 30px rgba(0,0,0,.26)}
.site-footer__btn.is-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:none}
.site-footer__btn.is-ghost:hover{box-shadow:0 10px 22px rgba(0,0,0,.18)}

.site-footer__bottom{padding-top:18px;margin-top:22px;border-top:1px solid rgba(255,255,255,.10)}
.site-footer__copy{color:rgba(255,255,255,.55);font-size:12px}

.btn-top{position:absolute;right:18px;bottom:18px;width:44px;height:44px;border-radius:999px;background:rgba(255, 255, 255, 0.1);border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:900;backdrop-filter: blur(6px)}
.btn-top:hover{background:rgba(255,255,255,.16)}

@media (max-width: 980px){
  .site-footer__grid{grid-template-columns:1fr}
  .site-footer__mini{white-space:normal}
}

@media (max-width: 560px){
  .site-footer{padding:32px var(--pad) 24px}
  .site-footer__top{align-items:flex-start;flex-direction:column}
  .site-footer__row{grid-template-columns:74px 1fr}
  .site-footer__phone{font-size:20px}
}

/* Policy modal */
body.hh-modal-open{overflow:hidden}
.hh-modal{display:none;position:fixed;inset:0;z-index:99999}
.hh-modal.is-open{display:flex;align-items:flex-start;justify-content:center}
.hh-modal__backdrop{position:absolute;inset:0;background:rgba(2,6,23,.62)}
.hh-modal__dialog{position:relative;width:min(740px, calc(100% - 32px));margin:10vh auto 0;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.hh-modal__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;background:var(--main-color);color:#fff}
.hh-modal__title{margin:0;font-size:19px;font-weight:900;color:#fff;letter-spacing:-0.03em}
.hh-modal__close{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff !important;font-size:22px;line-height:1;cursor:pointer}
.hh-modal__close:hover{background:rgba(255,255,255,.12)}
.hh-modal__body{padding:22px 24px 24px;color:#334155;max-height:calc(90vh - 180px);overflow-y:auto}
.hh-modal__actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 24px 20px;border-top:1px solid rgba(15,23,42,.06)}
.hh-modal__ok{height:42px;padding:0 20px;border-radius:10px;background:#ffffff;color:var(--main-color);font-size:15px;font-weight:900;border:1px solid rgba(15,23,42,.06);box-shadow:0 8px 18px rgba(2,6,23,.06);transition:transform .18s ease,box-shadow .18s ease;cursor:pointer}
.hh-modal__ok:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(2,6,23,.08)}

.policy-doc .policy-intro{margin-bottom:16px;padding:14px 16px;background:rgba(10,31,53,.02);border-left:3px solid var(--main-color);border-radius:6px}
.policy-doc .policy-intro p{margin:0;font-size:14px;line-height:1.7;color:#475569}
.policy-doc h4{margin:20px 0 10px;font-size:16px;font-weight:900;color:var(--main-color);letter-spacing:-0.02em}
.policy-doc h4:first-of-type{margin-top:0}
.policy-doc p{margin:0 0 10px;font-size:14px;line-height:1.75;color:#475569}
.policy-doc ul{margin:6px 0 12px;padding-left:20px;list-style:none}
.policy-doc ul li{position:relative;padding-left:14px;margin-bottom:6px;font-size:14px;line-height:1.7;color:#475569}
.policy-doc ul li:before{content:"•";position:absolute;left:0;color:var(--sub-color);font-weight:900}
.policy-doc ul ul{margin-top:6px;margin-bottom:8px}
.policy-doc strong{color:var(--main-color);font-weight:900}
.policy-doc .policy-footer{margin-top:24px;padding-top:18px;border-top:1px solid rgba(15,23,42,.08)}
.policy-doc .policy-footer p{margin:0;font-size:14px;color:#64748b}

@media (max-width: 560px){
  .hh-modal{align-items:center}
  .hh-modal__dialog{margin:0 auto;width:calc(100% - 20px)}
  .hh-modal__header{padding:14px 18px}
  .hh-modal__title{font-size:17px}
  .hh-modal__body{padding:18px;max-height:calc(80vh - 150px)}
  .hh-modal__actions{padding:12px 18px 16px}
  .policy-doc h4{font-size:15px}
}

/* Contact (content_us) */
.sub_hero{background:#f8fafc;}

/* Hero banner with background */
.contact-hero{position:relative; width:100%; min-height:280px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.contact-hero__bg{position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat;}
.contact-hero__overlay{position:relative; z-index:2; text-align:center; color:#fff; padding:40px var(--pad);}
.contact-hero__overlay::before{content:""; position:absolute; inset:0; z-index:-1;}
.contact-hero__title{margin:0 0 10px; font-size:36px; font-weight:900; color:#ffffff; text-shadow:0 2px 12px rgba(0,0,0,.3);}
.contact-hero__lead{margin:0; font-size:16px; color:rgba(255,255,255,.95); text-shadow:0 1px 6px rgba(0,0,0,.25);}

/* Form wrapper */
.contact-wrap{max-width:1000px; margin:0 auto; padding:50px var(--pad);}
.contact-form{ border-radius:16px; padding:40px; }

/* Prevent any overlap/shrink issues inside the form */
.contact-form, .contact-form *{box-sizing:border-box;}
.form-field{min-width:0;}
.form-field input, .form-field textarea{min-width:0;}

/* Alert box */
.contact-alert{margin:0 0 22px; padding:18px 18px; border-radius:14px; background:#ffffff; border:1px solid rgba(15,23,42,.08); box-shadow:0 10px 28px rgba(15,23,42,.06);}
.contact-alert__title{margin:0 0 10px; font-size:16px; font-weight:900; color:var(--main-color); letter-spacing:-.02em;}
.contact-alert__list{margin:0; padding:0; list-style:none; display:grid; gap:8px;}
.contact-alert__list li{position:relative; padding-left:18px; color:#475569; font-size:14px; line-height:1.7;}
.contact-alert__list li::before{content:""; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%; background:var(--sub-color);}
.contact-alert__list strong{color:var(--main-color); font-weight:900;}

/* Form grid */
.form-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; margin-bottom:20px;}
.form-field{display:flex; flex-direction:column; gap:6px;}
.form-field label{font-size:14px; font-weight:800; color:var(--main-color); letter-spacing:-.02em;}
.form-field input, .form-field textarea{width:100%; border:2px solid rgba(15,23,42,.10); background:#fff; border-radius:12px; padding:12px 14px; font-size:15px; transition:all .2s ease;}
.form-field input:focus, .form-field textarea:focus{outline:none; border-color:var(--main-color); box-shadow:0 0 0 3px rgba(10,31,53,.06);}
.form-field textarea{min-height:160px; resize:vertical; font-family:inherit; line-height:1.6;}
.form-field.required label::after{content:" *"; color:#ef4444; font-weight:900;}

/* Consent row */
.form-consent{display:flex; align-items:center; gap:12px; margin-top:24px; padding:16px; background:rgba(10,31,53,.02); border-radius:10px; border:1px solid rgba(15,23,42,.06);}
.consent-label{display:flex; align-items:center; gap:10px; font-size:14px; color:#334155; font-weight:700; cursor:pointer;}
.consent-label input[type="checkbox"]{width:18px; height:18px; cursor:pointer;}
.consent-view{font-size:13px; color:var(--main-color); font-weight:800; text-decoration:underline;}
.consent-view:hover{color:#0a7894;}

/* Actions */
.form-actions{display:flex; align-items:center; gap:16px; margin-top:28px;}
.contact-submit{height:52px; padding:0 32px; border-radius:12px; background:var(--main-color); color:#fff; font-weight:900; font-size:16px; border:none; box-shadow:0 12px 24px rgba(10,31,53,.16); transition:all .2s ease; cursor:pointer;}
.contact-submit:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 16px 32px rgba(10,31,53,.22);}
.contact-submit:disabled{opacity:.4; cursor:not-allowed;}
.form-status{font-size:14px; color:#64748b; font-weight:600;}

@media (max-width: 980px){
  .form-grid{grid-template-columns:1fr;}
  .contact-form{padding:32px;}
}

@media (max-width: 560px){
  .contact-hero{min-height:220px;}
  .contact-hero__title{font-size:28px;}
  .contact-hero__lead{font-size:14px;}
  .contact-wrap{padding:40px var(--pad);}
  .contact-form{padding:24px;}
  .form-actions{flex-direction:column; align-items:stretch;}
  .contact-submit{width:100%;}
}

/* Certificate: 기술혁신 카드 섹션 */
.tech-sec{max-width:1000px; margin:0 auto; padding:20px 0 0;}
.tech-sec .section-title{margin:50px 0 20px; font-size:30px; font-weight:900; color:var(--main-color);}
.tech-sec .section-desc{margin:0 0 18px; color:#475569; font-size:14px;}
.tech-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;}
.tech-card{background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(15,23,42,.06); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.tech-card:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(15,23,42,.12); border-color:rgba(163,200,87,.35);}
.tech-card a{display:flex; flex-direction:column; height:100%;}
.tech-card .thumb{position:relative; aspect-ratio:16/16; background:#ffffff; background-size:cover; background-position:center; margin:auto; display:flex; align-items:center; justify-content:center;}
.tech-card .thumb img{display:block; max-width:100%; max-height:100%; object-fit:contain;}
.tech-card .card-body{padding:12px 12px 14px; text-align: center}
.tech-card .card-title{margin:0; font-size:16px; font-weight:900; color:var(--main-color);}
.tech-card .card-desc{margin:6px 0 8px; color:#64748b; font-size:13px; line-height:1.6;}
.tech-card .card-link{display:inline-block; font-size:13px; font-weight:800; color:var(--main-color); text-decoration:underline;}

@media (max-width: 980px){
  .tech-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 560px){
  .tech-sec{padding:10px 0 0;}
  .tech-grid{grid-template-columns:1fr;}
}

#daumRoughmapContainer1769520240121 {
    max-width: var(--max);
    width: 100%;
    height: 100%;
    margin-top: 30px;
  }

/* Company (company/index.php) */
.company-page{background:#ffffff; }

.company-hero{background:#ffffff; padding:0;}
.company-hero__inner{max-width:1200px; margin:0 auto; display:grid; grid-template-columns: 1fr 1.2fr; align-items:stretch; min-height:520px;}

.company-hero__content{padding:70px var(--pad) 70px var(--pad); display:flex; flex-direction:column; justify-content:center; gap:12px;}
.company-hero__eyebrow{font-size:13px; font-weight:900; letter-spacing:.16em; color:#0a3b7a; text-transform:uppercase;}
.company-hero__title{margin:0; font-size:38px; font-weight:950; letter-spacing:-.04em; color:var(--main-color);}
.company-hero__lead{margin:6px 0 0; color:#334155; font-size:15px; line-height:1.85;}
.company-hero__sub{margin:0; color:#475569; font-size:14.5px; line-height:1.85;}
.company-hero__thanks{margin:0; color:#64748b; font-size:14px; line-height:1.85;}

.company-hero__actions{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap;}
.company-hero__btn{display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:999px; background:#ffffff; color:#0a3b7a; font-weight:900; border:2px solid rgba(10,59,122,.35); box-shadow:0 10px 24px rgba(10,31,53,.10); transition:transform .2s ease, box-shadow .2s ease, background .2s ease;}
.company-hero__btn:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(10,31,53,.14); background:rgba(10,59,122,.05);}

/* Right image with diagonal cut */
.company-hero__media{position:relative; overflow:hidden; background:#e7f0ff;}
.company-hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%);}
.company-hero__media::before{content:""; position:absolute; left:0; top:0; bottom:0; width:22%; background:#ffffff; clip-path:polygon(0 0, 100% 0, 0 100%); z-index:2;}
.company-hero__media::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 40%); z-index:1;}

/* Map section */
.company-map{background:#f8fafc; padding:70px var(--pad);}
.company-map__inner{max-width:1200px; margin:0 auto;}
.company-map__title{margin:0 0 8px; font-size:26px; font-weight:950; color:var(--main-color); letter-spacing:-.03em;}
.company-map__addr{margin:0 0 16px; color:#64748b; font-size:14px;}
.company-map__canvas{width:100%; height:420px; border-radius:16px; overflow:hidden; background:#e2e8f0; border:1px solid rgba(15,23,42,.08); box-shadow:0 10px 30px rgba(15,23,42,.08);}

@media (max-width: 980px){
  .company-hero__inner{grid-template-columns:1fr; min-height:auto;}
  .company-hero__content{padding:50px var(--pad);}
  .company-hero__media{height:340px;}
  .company-hero__img{clip-path:none;}
  .company-hero__media::before{display:none;}
}

@media (max-width: 560px){
  .company-hero__title{font-size:28px;}
  .company-hero__content{padding:42px var(--pad);}
  .company-map{padding:50px var(--pad);}
  .company-map__canvas{height:320px;}
}