/* ===== 공통 (recruit.css 구성과 호환) ===== */
@font-face {
  font-family: "Pretendard";
  src: url("/b_assets/PretendardVariable.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root{
  --blue:#2a67c7;
  --ink:#1b2430;
  --muted:#6b7b8c;
  --bg-soft:#f6f9fc;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
img,video{display:block;max-width:100%}
body{font-family:"Noto Sans KR",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#1b1f23;background:#fff;line-height:1.6}
.container{width:min(1280px,92vw);margin-inline:auto}

/* Header / Nav / Footer - recruit.css 패턴과 동일 네이밍 */
.site-header {
  position:sticky;
  top:0;
  z-index:1000;
  background:#ffffffcc;backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid #eaecef;
  /*transition: opacity .2s ease;*/
}
.site-header .container {
  display:flex;
  align-items:center;
  gap:24px;
  padding:12px 0;
  margin-left: 64px;
  margin: 0 64px;
  width: auto;
}
.header--hidden {
  opacity: 0;
}
.logo img {
  width:207px;
  height:75px;
  min-width: 55px;
  overflow: hidden;
  object-fit: cover;
  object-position: left;
}
.nav{margin-left:auto}
.nav > ul{list-style:none;display:flex;gap:clamp(16px,3vw,36px)}
.nav a {
  font-family: "Pretendard";
  text-decoration: none;
  color: #000;
  font-weight: 500;
  font-size: 20px;
}
.nav a:hover {
  color: #5099d2;
  font-weight: 600;
}
.nav li {
  position: relative;
}
.nav-blue-box {
  position: absolute;
  top: 28px;
  width: 100%;
  height: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.4s ease;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left;
  margin-top: 10px;
}
.nav li:hover .nav-blue-box {
  transform: scaleX(1);
  width: 100%;
  opacity: 1;
  visibility: visible;
}

/* 사업영역 서브 메뉴 */
.has-popup { position: relative; }
.has-popup .popup-menu {
  position: absolute; 
  left: 100%;
  top: 100%;
  transform: translate(-40%, 15px) scale(.98);
  min-width: 182px;
  background: #fff; 
  border: 1px solid rgba(17,45,78,0.08);
  box-shadow: 0 9px 6px rgba(0,0,0,0.12);
  filter: drop-shadow(0 9px 6px rgba(0,0,0,.12));
  border-radius:6px;
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events:none;
  transition: opacity 0.15s ease, transform .15s ease, visibility 0s .15s;
  z-index: 1000;
}
.has-popup::after {
  content: "";
  position: absolute;
  left:0; right: 0;
  top: 100%;
  height: 46px;
}
.submenu { 
  display:flex;
  flex-direction: column;
  list-style:none;
  margin:0;
  padding:8px 2px;
  gap: 2px;
}
.submenu li {
  padding-bottom: 0px;
}
.submenu li a{
  display:block; 
  padding:6px 15px; 
  border-radius:10px;
  color:#939393;
  font-weight:400;
  font-size: 16px;
}
.submenu li a:hover {
  /*background:#f3f7fd;*/
  color:#5099d2;
  font-weight: 600;
}
.submenu li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 20%;
  bottom: auto;
  height: 1px;
  background-color: #e2e2e2;
  border-radius: 2px;
}
.has-popup:hover .popup-menu {
  top: 100%;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translate(-42%, 22px) scale(1);
  transition-delay: 0s;
}


.site-footer{background:#1c2a4f;color:#c9d4e5;padding:28px 0}
.footer-wrap {
  width:min(1200px,92vw);
  margin-left: 64px;
  margin-right: auto;
  display:flex;
  align-items:center;
  gap:24px;
}
.footer-brand img{width:135px;height:auto;margin:6px 0}
.footer-right{display:flex;flex-direction:column;gap:0px}
.company-line {
  font-size:13px;
  color:#c9d4e5;
  opacity:.9;
  word-break:keep-all;
}
@media (max-width:520px){
  .company-line{font-size:.85rem}
}

/* ===== HERO ===== */
.business-hero{
  position:relative;
  height: 400px;
  background:url('../a_img/business-hero.jpg') center/cover no-repeat;
  background-position: center 28%;
}
.business-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 0;
  background-color: rgba(255, 255, 255, 0.5);
}
.hero-overlay{
  position:relative;
  z-index:1;
  height:100%;
  display:grid;place-content:center;
  text-align:center;
  color:#000;
  font-family:"Pretendard";
  padding-top: 0px;
}
.business-hero .hero-overlay {
  position: relative;
  z-index: 1;
}
.business-hero .eyebrow{
  letter-spacing:.08em;
  font-weight:300;
  margin-bottom:0;
  color: #656565;
  font-size: 17px;
}
.business-hero h1 {
  font-weight:800;
  font-size:clamp(28px,3.6vw,42px);
  margin-top:-10px;
}
.hero-overlay-arrow {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0; left:0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 33px;
}
/* ===== SECTION LAYOUT ===== */
.section{
  padding-block:clamp(48px,7vw,96px);
  font-family: "Pretendard";
  scroll-margin-top: 80px;
}
.grid-2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:3px;
  width: 1145px;

}
.text {
  font-family: "Pretendard";
}
.text .small-title {
  color: #3d3d3d;
  font-size: 22px;
  font-weight:200;
  margin-top: 20px;
  margin-bottom: 0px;
}
.text .title  {
  font-family:"Pretendard";
  font-weight:800;
  color:#144197;
  font-size:clamp(20px,2.6vw,32px);
  margin-top: -5px;
  margin-bottom: clamp(20px, 7vw, 110px);
}
.lead-box {
  width: 506px;
  height: auto;
}
.text .lead{color:#1b1f23;opacity:.9;font-size:18px;}
.badge {
  display:inline-grid;place-items:center;
  width:34px;height:34px;
  border-radius:0px;
  background:#144197;
  color:#fff;
  font-weight:600;
  font-size: 23px;
  margin-top:20px;
}
.thumb {
  overflow:hidden;
  width: 580px;
  height: 385px;
  aspect-ratio: 580/385;
}
.thumb2 {
  overflow:hidden;
  width: 580px;
  height: 412px;
  aspect-ratio: 580/412;
}
.thumb img{
  width: 100%;
  height:100%
  object-fit:cover;
}
.thumb80-img {
  width: 100%;
  height: 100%;
  opacity: 0.8;
  object-fit: cover;
}
/* ===== 공통 타이틀 (기존 톤과 맞춤) ===== */
.container-backimg {
  background: url("../a_img/rectangle30.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 50%;
  padding-bottom: 30px;
  padding-top:115px;
}
.container-backimg2 {
  background: url("../a_img/Subtract.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 45%;
  padding-bottom: 6px;
}
.section-head{ text-align:center; margin-bottom:28px; position:relative; }
.section-head .eyebrow-en { 
  color:#88909f;
  font-size:18px;
  margin:0;
  font-weight: 400;
}
.section-head {
  color:#224bb8;
  font-weight:600;
  font-size: 25px;
  margin:.25rem 0 0;
}
.section-kr {
  color:#224bb8;
  font-weight:600;
  font-size: 25px;
  margin:.25rem 0 0;
  margin-top: -5px;
}
/* ===== 개발 효과 ===== */
.benefits{ position:relative; }

.benefit-grid{
  list-style:none; display:grid; gap:24px;
  grid-template-columns:repeat(3,1fr);
  margin-top: 80px;
  justify-content: center;
  justify-items: center;
}
.benefit-card{
  background:#f2f2f2;
  border-radius:16px;
  justify-content: center;
  padding:20px;
  display:grid;
  gap:16px;
  width: 362px;
  height: 384px;
  overflow: hidden;
}
.b-head { display:grid;}
.b-head-flex {
  display: flex;
  align-items: center;
}
.b-num{
  font-weight:800;
  font-size: 24px;
  color:#007aff;
  padding:4px 10px;
  width:max-content;
  margin-top:5px;
}
.b-title-kr {
  margin:0;
  margin-top:5px;
  font-size:24px;
  font-weight:800;
  color:#000;
}
.b-title-en {
  margin:0;
  margin-left: 10px;
  margin-top: -5px;
  color:#000;
  font-size:18px;
  opacity: 0.55;
  max-width: 298px;
}

.b-fig {
  aspect-ratio: 1/1;
  border-radius:16px;
  overflow:hidden;
  width: 313px;
  margin-top: 48px;
}
.b-fig img {
  width:100%;
  object-fit:cover;
  border-radius: 12px;
  display:block;
  box-shadow: 0 1px 7px 1px rgba(0,0,0,.05);
}
.b-fig2 {
  aspect-ratio: 1/1;
  border-radius:16px;
  overflow:hidden;
  width: 313px;
  margin-top: 22px;
}
.b-fig-img {
  margin-top: 0px;
  width:100%;
  object-fit:cover;
  border-radius: 12px;
  display:block;
  box-shadow: 0 1px 7px 1px rgba(0,0,0,.05);
}

/* ===== 구현 사례 ===== */
.case-study{ }
.case-caption {
  margin-left: 70px;
  padding-top: 60px;
}
.case-caption p {
  color: #254a6c;
  font-size: 19px;
  font-weight: 600;
  margin-top:10px;
  margin-bottom:20px;
}
.monitors{
  display:flex;
  gap: clamp( 20px, 5.73vw, 120px);
  align-items:flex-end;
  justify-content:center;
  margin: 8px 0 14px;
}
.monitor{
  flex:1 1 0;
  min-width:220px;
  max-width: 303px;
  overflow:hidden;
  padding:10px; display:grid; place-items:center;
}
.monitor img{
  width:100%; height:100%; object-fit:contain;
}

.case-desc{
  text-align:left;
  color:#000;
  margin-top:8px;
  margin-left: 70px;
  line-height:1.7;
  word-break:keep-all;
  font-size: 20px;
  font-weight: 400;
  padding-top: 20px;
  padding-bottom: 50px;
}
/* 섹션 2 ------------------------*/
.sites-grid {
  display:grid;
  grid-template-columns: 0.85fr 1fr;
  grid-template-rows: 0.4fr 1fr;
  grid-template-areas:
    "map intro"
    "map list";
  gap: 5px;
  margin-top: 100px;
  height: 750px;
}
@media (max-width: 900px){
  .sites-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "map"
      "list"
      "intro";
  }
}

.sites-map {
  grid-area: map;
  margin:0;
  overflow:hidden;
}
.sites-intro {
  grid-area: intro;
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.7;
  width: 590px;
}
.sites-intro-text {
  font-size: clamp(14px, 1.8vw, 18px);
  font-weight: 400;
  padding-right: 0px;;
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 0px;
  margin-bottom: 20px;
  word-break:keep-all;
  line-height:30px;
}
.sites-list {
  grid-area: list;
  font-size: clamp(14px, 1.8vw, 16px);
  justify-self: center;
  list-style:none;
  margin-right: 120px;
}
.sites-list img {
  width: 24px;
  height: auto;
  margin-right: 10px;
}
.sites-map img {
  display:block;
  width: 394px;
  height: auto;
  margin-left: 149px;
}
.sites-list ul {
  margin:0; padding-left: 1.1em;
}
.sites-list li {
  display: flex;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  margin: .4em 0;
}
.sites-list span {
  margin-top: 2px;
}
.sites-list em {
  color: #6b7280;
  font-style:normal;
}

/* 반응형 */
@media (max-width:1024px){
  .benefit-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .benefit-grid{ grid-template-columns:1fr; }
  .monitors{ flex-direction:column; }
}

.consulting-scope {
  position: relative;
  background: url("../a_img/consulting-back.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  overflow: hidden;
}

.cs-inner { max-width: 1120px; margin: 0 auto; }

.cs-head { 
  text-align: center;
  margin-top: 24px;
  margin-bottom: clamp(28px, 9vw, 150px);
}
.cs-head p{
color:#88909f;
font-size:18px;
margin-bottom:2px;
}
.section-head .eyebrow-en { 
  color:#88909f;
  font-size:18px;
  margin:0;
  font-weight: 400;
}

.cs-grid {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 420px) 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    ".      top      ."
    "left   figure   right";
  gap: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 40px);
  align-items: center;
  margin-bottom: clamp(24px, 6.48vh, 80px);
}

/* 영역 매핑 */
.cs-top   { grid-area: top; text-align: center; max-width: 660px; justify-self: center; }
.cs-left  { grid-area: left; justify-self: end; text-align: right; }
.cs-right { grid-area: right; justify-self: start; text-align: left; }
.cs-figure{ grid-area: figure; justify-self: center; }

.cs-item {
  width: 297px;
}
.cs-left h3 {
  text-align: center;
}
.cs-right h3 {
  text-align: center;
}
/* 텍스트 카드(아이콘 없이 깔끔한 스타일) */
.cs-item h3{
  font-size: 22px;
  font-weight: 700;
  color: #19517f;
  margin: 0 0 14px;
}
.cs-item p{
  font-size: 18px;
  line-height: 1.5;
  color: #535353;
  /* 가독성 살짝 올리는 텍스트 쉐도우(색상 변화 없이) */
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  margin-left: 17px;
  margin-right: 1px;
  text-align: left;
  
}

/* 중앙 이미지: 반응형 */
.cs-figure img{
  display: block;
  max-width: min(48vw, 269px);
  width: 100%;
  height: auto; /* 비율 유지 */
  filter: drop-shadow(0 12px 24px rgba(23,52,94,.15));
}

/* 푸터 카피 */
.cs-foot{
  margin-top: clamp(28px, 4vw, 44px);
  text-align: center;
  font-size: 23px;
  color: #3b3b3b;
  margin-bottom: clamp(12px, 2vh, 44px);
}
.cs-foot em {
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  color: #19517f;
}
.submenu-panel {
  width: 100vw;
  height: clamp(70px, 8.33vh, 90px);
  display: grid;
  background-color: #eaeaea;
  grid-template-columns: 2px auto;
  position: sticky;
  top: 0;
  z-index: 2000;
  background: #eaeaea;
  margin-top: -1px;
  margin-bottom: 10px;
}
.submenu-line {
  width: 100vw;
  height: 2px;
  background-color: #144197;
}
.submenu-items {
  display: flex;
  position: relative;
  align-items: center;
  padding: 0 64px;
  font-family: "Pretendard";
  
}
.submenu-items-home {
  width: 20px;
  height: 16px;
  margin-left: 33px;
  margin-right: 33px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.submenu-items-line {
  margin-left: 3px;
  margin-right: 38px;
}
.submenu-items-arrow {
  margin-left: 70px;
  width: 15px;
  height: 9px;
}
.submenu-items > p {
  font-weight: 600;
  font-size: 21px;
  font-family: "Pretendard";
  color: #144197;
  pointer-events: none;
  margin-right: 35px;
}
.submenu-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.submenu-select::after {
  content:""; position: absolute;
  left:0; right: 0;
  top:100%;
  height: 25px;
}
.submenu-text {
  font-weight: 500;
  font-size: 20px;
  font-family: "Pretendard";
  color: #2b2b2b;
  pointer-events: none;
  cursor: pointer;
}
.submenu-popup {
  position: absolute;
  inset-block-start: 120%;
  inset-inline-start: 0;
  display: none;
  background-color: #eaeaea;
  width: 266px;
  height: 148px;
  margin-left: -24px;
  font-family: "Pretendard";
  text-decoration: none;
  z-index: 1000;
}
.submenu-select:hover .submenu-popup {
  display: block;
}
.submenu-select:hover .submenu-items-arrow {
  transform:scaleY(-1);
}
@keyframes fade-in {
  from { opacity:0; transform: translateX(4px) }
  to   { opacity: 1; transform:transform:none;}
}
.submenu-popup-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 8px 2px;
  gap: 2px;
}
.submenu-popup-list li {
  padding-bottom: 0px;
}
.submenu-popup-list a {
  display: block;
  padding: 6px 15px;
  color:#c4c4c4;
  font-weight: 500;
  font-size: 20px;
  font-style: normal;
  font-family: "Pretendard";
  text-decoration: none;
}
.submenu-popup-list a:hover {
  color:#525252;
  font-weight: 500;
  font-size: 20px;
}
.submenu-popup-list a[aria-current="true"] {
  color:#525252;
  font-weight: 500;
  font-size: 20px;
}
.submenu-right {
  display: flex;
  margin-left: auto;
  margin-right: 64px;
  transition: opacity .5s ease;
  opacity: 0;
}
.submenu-right ul {
  list-style: none;
  display: flex;
  gap: clamp(16px, 3vw, 36px);
}
.submenu-right a {
  font-family: "Pretendard";
  text-decoration: none;
  color: #000;
  font-weight: 500;
  font-size: 20px;
}
.submenu-right a:hover {
  color: #5099d2;
  font-weight: 600;
}
.submenu-right li {
  position: relative;
}
.submenu-right li:hover .nav-blue-box {
  transform: scaleX(1);
  width: 100%;
  opacity: 1;
  visibility: visible;
}
.submenu-right--visible {
  opacity: 1;
}
.mobile-br {display:none;}
.desktop-br {display:none;}
/* ===== 반응형 ===== */
@media (max-width: 960px){
  .cs-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "figure"
      "top"
      "left"
      "right";
    text-align: left;
  }
  .cs-left, .cs-right, .cs-top { justify-self: start; }
  .cs-figure img{ max-width: 72vw; }
}

/*====================================================================/
/* reveal */
.reveal{opacity:0;transform:translateY(24px);will-change:transform,opacity}
.reveal.is-visible {
  animation:rise-in 4.5s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: .0s;
}
.mobile-visible {display:none;}
.menu-toggle {
  background:none; border:none;cursor:pointer;
  width: 24px; height: 24px;
  margin-left: auto;
  margin-right: 20px;
}
.mobile-menu {
  position: absolute;
  top: 71px;
  right: 16px;
  background: #fffffff0;
  border: 1px solid #ddd;
  padding: 8px 0;
  width: 146px;
  z-index:1000;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  border-radius: 4px;
  display:none;
}
.mobile-menu ul {
  list-style: none; margin:0; padding:0;
}
.mobile-menu li a {
  display:block;
  padding: 10px 16px;
  text-decoration: none;
  color: #333;
}
.mobile-menu li a:hover { background: #f5f5f5;}
.mobile-menu.is-open { display: block;}

@keyframes rise-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.is-visible{animation:none;opacity:1;transform:none}
}

/* 반응형 */
@media (max-width:1024px){
  .grid-2{grid-template-columns:1fr}
  .mini-grid{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr 1fr}
  .mapGrid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
}

@media (max-width: 780px) {
  .site-header .container {
    margin: 0 clamp(5px, 3.33vw, 64px);
  }
  .logo img {
    width: 55px;
  }
  .nav a {
    font-size: clamp(14px, 1.5vw, 20px);
  }
  .footer-wrap {
    margin-left: clamp(2px, 3.3vw, 64px);
  }
  .footer-brand img {
    visibility: hidden;
    width: 5px;
  }
  .grid-2 {
    width: auto;
    margin-inline: auto;
  }
  .text {
    padding:0 15px;
  }
  .text .small-title {
    font-size: clamp(20px, 4.18vw, 22px);
  }
  .lead-box { width: auto;}
  .text .lead {font-size:14px;}
  .thumb, .thumb2 {width: auto;height:auto;padding:15px;}
  .submenu-items {
    padding:0 clamp(5px, 3vw, 30px);
  }
  .submenu-panel {
    visibility: hidden;
    display: none;
  }
  .case-caption {
    margin-left: 0;
  }
  .monitor {
    min-height: 202px;
  }
  .monitors {
    justify-items: center;
    align-items:center;
  }
  .sites-map img {
    width: 220px;
    margin-left:100px;
  }
  .sites-map {
    height: 400px;
  }
  .sites-grid {
    margin-top: clamp(20px, 9vh, 100px);
  }
  .sites-intro {
    width: auto;
  }
  .cs-item {
    width: auto;
  }
  .cs-item p {
    margin-left: 10px;
    margin-right: 10px;
  }
  .mobile-br {
    display:block;
  }
  .desktop-br {display:none;}
  .cs-item h3 {
    font-size: clamp(18px, 2.82vw, 22px);
  }
  .cs-item p {
    font-size: clamp(15px, 2.3vw, 18px);
    padding: 0 22px;
  }
  .cs-foot {
    /*margin: 25px 25px;*/
    font-size: clamp(18px, 2.82vw, 22px);
    margin: auto;
    width: auto;
    display: block;
  }
  .cs-foot em {
    display: inline-block;
    font-size: clamp(20px, 3.2vw, 25px);
    width: clamp( 300px,80vw,780px);
    justify-self: center;
    word-break: keep-all;
  }
}
@media (max-width: 700px) {
  .logo img {width:207px;}
  .mobile-visible {display:block;}
  .nav {display:none;}
}
@media (prefers-color-scheme: dark) {
  .site-header {
    color-scheme: light dark;
    forced-color-adjust: none;
  }
  .sites-intro-text {
    color: #868686;
  }
  .sites-list li {
    color: #868686;
    text-shadow: 1px 1px 2px rgba(0,0,0,.2);
  }
  .cs-head p {
    color: #fff;
  }
  .case-desc {
    color: #868686;
  }
  .container-backimg2 {
    color-scheme: light dark;
    forced-color-adjust: none;
    background-color: #e3e3e3;
  }
  .sites-list li {
    text-shadow: none;
  }
}