/* 🔥 스크롤 생기게 */

html, body { margin: 0; padding: 0; }


body {
  min-width: 1200px;
}


body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #fff;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
}

/* 헤더 내부 */
.header-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 40px;
}

/* 로고 */
.logo {
    position: absolute;
    left: 30px;
}

/* 메뉴 */
.menu {
    display: flex;
    height: 70px;
    gap: 1px;
    margin: 0 auto;
    margin-top: 15px;
}

.menu > ul {
    list-style: none;
    margin: 5px;
    padding: 0;
    gap: 50px;
    display: flex;
}

.menu > ul > li > a {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    position: relative;   /* ⭐ 기준 */
    padding: 5px 0;       /* 밑줄 여유 */
}

.menu > ul > li > a:hover {
    color: #0052cc;
}

.menu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;          /* 글자 아래 위치 */
    width: 100%;
    height: 2px;           /* 선 두께 */
    background-color: #0052cc;
    transform: scaleX(0);  /* 처음엔 안 보이게 */
    transform-origin: center;
    transition: transform 0.25s ease;
}

.menu > ul > li > a:hover::after {
    transform: scaleX(1);
}

/* 서브 메뉴 */
.has-sub {
    position: relative;
}

.sub-menu {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    width: max-content;
}

.sub-menu li {
    list-style: none;
    float: left;
    margin-right: 18px;
}

.has-sub:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.sub-menu li a {
    font-size: 14px;
    font-weight: 400;
    color: #000;
    text-decoration: none;
}

.sub-menu li a:hover {
    color: #0052cc;
}


/*맨 밑에꺼*/
/* footer : 스크롤 맨 아래에서만 보이게 */
.footer {
    position: relative;
    width: 100%;
    height: 130px;
    background-color: #687396;
    margin-top: 60px;
}

.footer-inner {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

/* 콘텐츠 */
#content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-top: 120px;
    width: 90%;
    text-align: center;
    flex: 1;
}

#content > div {
    display: none;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* 연혁 전체 영역 중앙 정렬 */
#history {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-left:30px ;
}

/* 조직도 */
#org {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ======================================================
   ✅ 조직도 가운데 정렬 + 크기 살짝 키움
   ====================================================== */
.org-map-wrap{
  width: 100%;
  max-width: 1200px;
  margin-top: 10px;

  transform: none;
  margin-left: auto;
  margin-right: auto;

  display: flex;
  justify-content: center;

  overflow: visible;
}

.org-map-svg{
  width: 100%;
  height: auto;
  display: block;

  transform: scale(1.2); /* 조직도 크기 */
  transform-origin: center top;
}

/* ===== 내부 사진 ===== */
#inside { width: 100%; }

.inside-wrap {
    display: flex;
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 80px;
}

/* 3열 × 4행 */
.inside-grid {
    width: 65%;
    display: grid;
    grid-template-columns: 260px 260px 260px;
  grid-auto-rows: 260px;
    gap: 30px;
}

/* hover 효과 */
.photo {
    border: none;
    overflow: hidden;
    background: transparent;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.photo:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 14px 30px rgba(0,0,0,0.2);
}

.photo:hover img { transform: scale(1.06); }

/* 배치 */
.big-left { grid-column: 1 / 3; grid-row: 1 / 3; }
.small-right-1 { grid-column: 3; grid-row: 1; }
.small-right-2 { grid-column: 3; grid-row: 2; }
.small-left-1 { grid-column: 1; grid-row: 3; }
.small-left-2 { grid-column: 1; grid-row: 4; }
.big-center { grid-column: 2 / 4; grid-row: 3 / 5; }

/* 오른쪽 텍스트 */
.inside-text  {
    padding-top: 0;              /* 기존 여백 제거 */
    margin-top: -15px;           /* ← 위로 당기기 */
}



/* ✅✅✅ [추가] 텍스트만 padding-left:100px 적용 (지도는 영향 X) */
.inside-text > h2,
.inside-text > p {
  padding-left: 0;      /* ✅ 글을 칼럼 왼쪽으로 붙임 */
  margin-left: 0;
}

.inside-text h2 {
    font-size: 22px;
    margin-bottom: 16px;
    white-space: noweap;
}

.inside-text p {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}


/* 광주/김해 사이 여백 */
/* =========================
   ✅ 인사말
   ========================= */
.greeting-wrap{
  width: 100%;
  max-width: 1100px;
  margin: 40px auto 0;
  display: flex;
  align-items: flex-start;
  gap: 50px;
  transform: translateX(60px);
}
.greeting-photo{
  flex: 0 0 360px;
  transform: translateX(-30px);
}
.greeting-photo img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.15);
}
.greeting-text{
  flex: 1;
  text-align: left;
  padding-top: 10px;
}
.greeting-title{
  font-size: 23px;
  font-weight: 800;
  margin: 0 0 18px;
  color: #173e73;
}
.greeting-text p{
  font-size: 15px;
  line-height: 1.9;
  color: #333;
  margin: 0 0 16px;
}
.greeting-sign{
  margin-top: 22px;
  font-weight: 700;
}

/* =========================
   ✅ 개요(연혁)
   ========================= */
.history-board{
  width: 100%;
  max-width: 500px;
  margin: 40px auto 0;
  padding: 0 20px; /* 모바일 여백 */
  box-sizing: border-box;
}


.hy-group{
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #d9d9d9;
  padding: 26px 0;
}

.hy-year{
  width: 180px;
  font-size: 30px;
  font-weight: 800;
  color: #122a4a;
  text-align: left;
  padding-left: 10px;
}

.hy-list{
  flex: 1;
  padding-right: 10px;
}

.hy-item{
  display: flex;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid #ededed;
}

.hy-item:first-child{
  border-top: none;
  padding-top: 0;
}

.hy-date{
  width: 110px;
  font-weight: 700;
  color: #333;
  text-align: left;
  white-space: nowrap;
}

.hy-desc{
  flex: 1;
  color: #333;
  text-align: left;
  line-height: 1.7;
}

/* =========================
   ✅ 주요 생산제품 (개요 스타일 + 카드 갤러리)
   ========================= */
#main-product{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: none;
  padding-left: 30px;
}

#main-product h2{
  width: 100%;
  max-width: 1100px;
  text-align: center;
  transform: translateX(60px);
}

.product-board{
  width: 100%;
  max-width: 1000px;
  margin: 40px auto 0;
  border-top: 1px solid #d9d9d9;
  transform: translateX(60px);
}

.product-group{
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #d9d9d9;
  padding: 26px 0;
}

.product-head{
  width: 240px;
  font-size: 26px;
  font-weight: 800;
  color: #123157;
  text-align: left;
  padding-left: 10px;
  line-height: 1.2;
}

.product-list{
  flex: 1;
  padding-right: 10px;
}

.product-item{
  display: flex;
  padding: 14px 0;
  border-top: 1px solid #ededed;
}

.product-item:first-child{
  border-top: none;
  padding-top: 0;
}

.product-desc-line{
  flex: 1;
  color: #333;
  text-align: left;
  line-height: 1.7;
}

/* ✅ 카드형 갤러리(예시 디자인 + hover 효과) */
.product-cards-wrap{
  width: 100%;
  max-width: 1100px;
  margin: 26px auto 0;
  transform: translateX(60px);
}

.product-cards-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.p-card{
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  padding: 14px 14px 12px;
  box-sizing: border-box;
  text-align: left;

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.p-card:hover{
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}

.p-title{
  font-size: 14px;
  font-weight: 800;
  color: #555;
  text-align: center;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* ✅✅✅ 여기만 수정: 이미지 칸을 세로로 더 길게 */
.p-image{
  width: 100%;
  height: 220px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f3f3;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.p-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.p-card:hover .p-image img{
  transform: scale(1.05);
}

/* 아래 설명 리스트(점 느낌) */
.p-bullets{
  margin: 12px 0 0;
  padding-left: 18px;
}

.p-bullets li{
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

.p-bullets li::marker{
  color: #123157;
}

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

/* =========================
   ✅ 주요 거래처 (개요 스타일)
   ========================= */
#partners{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: none;
  padding-left: 30px;
}

#partners h2{
  width: 100%;
  max-width: 1100px;
  text-align: center;
  transform: translateX(60px);
}

.partner-board{
  width: 100%;
  max-width: 1100px;
  margin: 40px auto 0;
  border-top: 1px solid #d9d9d9;
  transform: translateX(60px);
}

.partner-group{
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #d9d9d9;
  padding: 26px 0;
}

.partner-head{
  width: 240px;
  font-size: 26px;
  font-weight: 800;
  color: #123157;
  text-align: left;
  padding-left: 10px;
}

.partner-list{
  flex: 1;
  padding-right: 10px;
}

.partner-item{
  padding: 14px 0;
  border-top: 1px solid #ededed;
  text-align: left;
  color: #333;
  line-height: 1.7;
}

.partner-item:first-child{
  border-top: none;
  padding-top: 0;
}



/*
   ✅ 인증서 섹션 (신규)*/
#certificate{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cert-wrap{
  width: 100%;
  max-width: 1100px;
  margin: 30px auto 0;
  transform: translateX(60px);
}

.cert-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* ✅ 한 줄 4개 */
  gap: 34px 28px;
}

.cert-card{
  text-align: center;
}

.cert-img{
  width: 100%;
  height: 330px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  box-sizing: border-box;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cert-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cert-img:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 14px 30px rgba(0,0,0,0.16);
}

.cert-title{
  display: inline-block;
  margin-top: 10px;
  font-weight: 800;
  font-size: 14px;
  color: #0b57d0;  /* 파란 제목 */
  text-decoration: none;
}

.cert-title:hover{
  text-decoration: underline;
}

.cert-date{
  margin-top: 6px;
  font-size: 13px;
  color: #555;
}

.cert-org{
  margin-top: 4px;
  font-size: 13px;
  color: #666;
}

/* =========================
   ✅ 공장 위치 지도
   =========================    글 쓰면 top 위치 바꾸기*/
.factory-map {
    margin-top: 100px;
    width: 100%;
    height: 370px;
    overflow: hidden;

    /* ✅✅✅ [수정] 이제 inside-text에 padding이 없어서 당길 필요 없음 */
    margin-left: 0;
}

/* roughmap 내부가 100% 채우게 */
.factory-map .root_daum_roughmap{
  width: 100% !important;
  height: 100% !important;
}

/* ✅✅✅ [추가] roughmap이 박는 고정 인라인 width/height 전부 무시하고 100%로 강제 */
.factory-map [id^="daumRoughmapContainer"]{
  width: 100% !important;
  height: 100% !important;
}
.factory-map .root_daum_roughmap .wrap_map{
  width: 100% !important;
  height: 100% !important;
}


/* 카카오 roughmap 강제 반응형 */
.factory-map,
.factory-map *{
  box-sizing: border-box;
}


.factory-map .root_daum_roughmap,
.factory-map .root_daum_roughmap_landing,
.factory-map .wrap_map,
.factory-map iframe{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/*  roughmap absolute 요소를 .factory-map 안에 가두기 */
.factory-map { 
  position: relative !important;
}

.factory-map .root_daum_roughmap,
.factory-map .root_daum_roughmap_landing,
.factory-map .wrap_map {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
}

/*  iframe이 absolute로 떠버리는 케이스를 박스 안으로 고정 */
.factory-map .wrap_map iframe{
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
}


/*  광주 지도만 오른쪽으로 더 넓게 보이게 */
.factory-map--gwangju{
  overflow: visible !important;
  width: calc(100% + 10px) !important;
  margin-left: 65px;   /*  100px → 40px 정도로 복귀 (원하면 20~60 조절) */
}
/* 내부 iframe도 같이 넓게 */
.factory-map--gwangju .root_daum_roughmap,
.factory-map--gwangju .wrap_map,
.factory-map--gwangju iframe{
  width: 100% !important;
  height: 100% !important;
}

/*  광주공장 텍스트만 오른쪽(네모 위치)로 이동 */
.inside-text--gwangju > h2,
.inside-text--gwangju > p{
  margin-left: 230px;   /* ← 이 숫자만 조절 */
  text-align: right;
}



/*  두 칼럼 폭 고정 + 글이 레이아웃 안 밀게 */
.inside-wrap{
  display: flex;
  align-items: flex-start;
}

.inside-grid{
  flex: 0 0 65%;
  min-width: 0;   /*이거 없으면 글 때문에 옆 칼럼이 안 줄어들어서 밀림 */
}

.inside-text{
  flex: 0 0 35%;
  min-width: 0; 
}



/* =========================
   홈 섹션만 전체 폭 + 배경 제거
   ========================= */
#home{
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background: transparent; /* 회색 배경 제거 */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding-left: 300px; 
}


#home .home-banner{
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);

  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-start; /* ⭐ 왼쪽 */
}

#home .home-banner img{
  width: auto;
  max-width: 900px;   /* ← 원하는 크기로 조절 */
  height: auto;
  display: block;
}

/*홈 배너 옆 글*/

/* #content가 center여도, home만 예외로 왼쪽부터 */
#home{
  width: 100%;
  max-width: none;
  margin: 0;
  align-self: stretch;     /* #content의 flex에서 가로 꽉 */
  background: transparent; /* 회색 배경 제거 */
}

/* 홈 레이아웃(사진+글) : 화면 왼쪽 기준으로 시작 */
#home .home-layout{
  width: 100vw;                       /*  화면 기준 */
  margin-left: calc(50% - 50vw);      /*  90%/center 영향 탈출 */
  margin-right: calc(50% - 50vw);
  padding: 60px 60px 0;              /*  왼쪽 여백(원하면 20~80 조절) */

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 80px;
  box-sizing: border-box;
  margin-bottom: 70px;   /* KPI랑 간격 */
}


/* 왼쪽 이미지 박스 (정사각형 유지) */
#home .home-image{
  flex: 0 0 450px;         /* 사진 크기 (여기만 키우면 커짐) */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 22px;
}

/* 이미지 비율 유지 + 꽉 채우기 */
#home .home-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 오른쪽 텍스트 */
#home .home-text{
  flex: 1;
  text-align: left;
}
#home .home-text h2{
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 20px;
}
#home .home-text p{
  font-size: 17px;
  line-height: 1.8;
  margin: 0 0 24px;
  color: #333;
}
#home .home-text ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
#home .home-text li{
  font-size: 16px;
  margin: 0 0 10px;
}



#home .home-quick{
  /* 화면 기준으로 꽉 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  display: flex;
  justify-content: center;
  gap: 80px;
  padding: 60px 0 40px;
  box-sizing: border-box;
}


/* 원 버튼 */
#home .quick-bubble{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  /* 은은한 느낌 */
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
  transition: transform .2s ease, box-shadow .2s ease;
  background: #f3f6fb; /* fallback */
}

#home .quick-bubble:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.14);
}

#home .quick-bubble:active{
  transform: translateY(-2px);
}

/* 텍스트 */
#home .qb-title{
  font-size: 18px;
  font-weight: 800;
  color: #123157;
  letter-spacing: -0.3px;
}

/* 원마다 다른 '은은한' 그라데이션 */
#home .qb1{
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #eef3ff 45%, #e6efff 100%);
}
#home .qb2{
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #f1f6ff 45%, #eaf0ff 100%);
}
#home .qb3{
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #f3f7ff 45%, #edf2ff 100%);
}

/* 반응형: 화면 좁으면 세로로 */
@media (max-width: 900px){
  #home .home-quick{
    flex-direction: column;
    gap: 22px;
    padding: 40px 0 30px;
    align-items: center;
  }
  #home .quick-bubble{
    width: 180px;
    height: 180px;
  }
}


/* 홈 섹션 기준 잡기 */

/* 홈일 때만 원이 보이게 */
body.is-home{
  position: relative;
}

#home{
  position: relative;   /* 기준 */
  overflow: visible;     /* 원 잘라내기 */
}


/* 오른쪽 위 원 */
body.is-home::after{
  top: -360px;
  right: -360px;
}

/* 왼쪽 아래 원 */
body.is-home::before{
  bottom: -420px;
  left: -420px;

}

/* 홈 콘텐츠는 원 위로 */
body.is-home #home .home-layout,
body.is-home #home .home-quick{
  position: relative;
  z-index: 1;
}


#home .home-layout,
#home .home-quick{
  position: relative;
  z-index: 1;
}




/* ---------------------------------------------------------------------- */


/* ==================================================
   0) Design System (전체 톤 통일)
   ================================================== */
:root{
  --bg: #ffffff;
  --surface: rgba(255,255,255,.82);
  --text: #0f172a;
  --muted: #475569;
  --line: rgba(15, 23, 42, .10);
  --shadow-sm: 0 6px 18px rgba(2,6,23,.06);
  --shadow-md: 0 14px 40px rgba(2,6,23,.10);
  --radius: 18px;
  --radius-sm: 12px;

  --brand: #1d4ed8;
  --brand-2: #0ea5e9;

  --container: 1200px;
  --gutter: 24px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  color: var(--text);
  background: var(--bg);
  font-family: "Pretendard","Noto Sans KR",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 기본 링크 */
a{ color: inherit; }

/* ==================================================
   1) Header (고급: 유리 느낌 + 얇은 라인)
   ================================================== */
.header{
  height: 88px;                 /* 100 -> 88 더 세련됨 */
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;              /* 기존 shadow 과함 */
}

.header-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.logo{
  left: var(--gutter);
}

/* 메뉴 간격/타이포 */
.menu{
  margin-top: 0;
  height: 88px;
  align-items: center;
}

.menu > ul{
  gap: 44px;
  margin: 0;
}

.menu > ul > li > a{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: rgba(15,23,42,.88);
  padding: 10px 0;
}

.menu > ul > li > a:hover{ color: var(--brand); }

.menu > ul > li > a::after{
  bottom: 2px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-radius: 999px;
}

/* 서브 메뉴: 깔끔한 pill */
.sub-menu{
  top: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.sub-menu li{
  margin-right: 14px;
}

.sub-menu li a{
  font-size: 13px;
  font-weight: 700;
  color: rgba(15,23,42,.78);
}

.sub-menu li a:hover{
  color: var(--brand);
}

/* ==================================================
   2) Content container + Section spacing
   ================================================== */
#content{
  width: 100%;
  margin-top: 110px;            /* 헤더 88에 맞춰 자연스럽게 */
  padding: 0 var(--gutter);
}

#content > div{
  max-width: var(--container);
  padding: 10px 0 40px;
}

/* 각 섹션 제목 통일 */
#content h2{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.6px;
  margin: 10px 0 24px;
  color: var(--text);
}

/* 설명 텍스트 통일 */
#content p{
  color: var(--muted);
}

/* ==================================================
   3) HOME Hero (전체 홈페이지급으로 정돈)
   ================================================== */
#home{
  padding-left: 0 !important;     /* 기존 300px 강제 제거 */
}

#home .home-layout{
  max-width: var(--container);
  margin: 0 auto;
  padding: 54px 0 0;
  gap: 56px;
}

#home .home-image{
  flex: 0 0 480px;
  border-radius: 28px;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(15,23,42,.08);
}

#home .home-text h2{
  font-size: 44px;
  margin: 0 0 16px;
  line-height: 1.15;
}

#home .home-text p{
  font-size: 17px;
  line-height: 1.9;
  color: rgba(71,85,105,.95);
  max-width: 560px;
}

/* 체크 리스트 느낌(✔ 있는 부분) */
#home .home-text ul{
  margin-top: 18px;
  gap: 10px;
}
#home .home-text li{
  display: flex;
  gap: 10px;
  align-items: center;
  color: rgba(15,23,42,.85);
  font-weight: 700;
}
#home .home-text li::before{
  content: "✓";
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(29,78,216,.10);
  color: var(--brand);
  font-weight: 900;
}

/* HOME 배경 원(더 자연스러운 그라데이션) */
body.is-home::before,
body.is-home::after{
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #eef3ff 42%, #e8f0ff 100%);
  filter: saturate(1.05);
}

/* 퀵 버튼 영역 */
#home .home-quick{
  max-width: var(--container);
  margin: 0 auto;
  padding: 54px 0 26px;
  gap: 26px;
}

/* 퀵 버튼: “카드형 원” 느낌으로 고급화 */
#home .quick-bubble{
  width: 220px;
  height: 220px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: var(--shadow-sm);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
}

#home .quick-bubble:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(29,78,216,.22);
}

#home .qb-title{
  font-size: 16px;
  font-weight: 900;
  color: rgba(15,23,42,.88);
}

/* 원마다 미세하게 톤 차이 */
#home .qb1{ background: radial-gradient(circle at 30% 30%, #fff 0%, #eef6ff 45%, #e9f1ff 100%); }
#home .qb2{ background: radial-gradient(circle at 30% 30%, #fff 0%, #f1f8ff 45%, #edf3ff 100%); }
#home .qb3{ background: radial-gradient(circle at 30% 30%, #fff 0%, #f4f8ff 45%, #eef2ff 100%); }

/* ==================================================
   4) Cards (제품/인증서 카드 디자인 업그레이드)
   ================================================== */
.p-card{
  border-radius: var(--radius);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}

.p-title{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.4px;
  color: rgba(15,23,42,.72);
}

.p-image{
  height: 230px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.06);
  background: #f8fafc;
}

.p-bullets li{
  color: rgba(71,85,105,.95);
  font-weight: 600;
}

.cert-img{
  border-radius: var(--radius);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.cert-title{
  font-weight: 900;
  color: var(--brand);
}

.cert-date{
  color: rgba(71,85,105,.9);
  font-weight: 700;
}

/* ==================================================
   5) Boards (연혁/거래처 레이아웃 더 정돈)
   ================================================== */
.history-board,
.product-board,
.partner-board{
  border-top: 1px solid var(--line);
  transform: none !important;     /* 기존 translateX 제거 */
}

.hy-group,
.product-group,
.partner-group{
  border-bottom: 1px solid var(--line);
}

.hy-item,
.product-item{
  border-top: 1px solid rgba(15,23,42,.06);
}

.hy-year{
  color: rgba(15,23,42,.92);
}

.product-head,
.partner-head{
  color: rgba(15,23,42,.92);
}

/* ==================================================
   6) Footer (깔끔하게)
   ================================================== */
.footer{
  background: #f8fafc;
  border-top: 1px solid var(--line);
}

.footer-inner{
  max-width: var(--container);
  padding: 0 var(--gutter);
  color: rgba(71,85,105,.9);
  font-weight: 600;
}

/* ==================================================
   7) Responsive (모바일)
   ================================================== */
@media (max-width: 980px){
  .header-inner{ padding: 0 16px; }
  .menu > ul{ gap: 22px; }
  #home .home-layout{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    flex-direction: column;
    padding: 28px 0 0;
    gap: 24px;
  }
  #home .home-image{ flex: 0 0 auto; width: 100%; }
  #home .home-text h2{ font-size: 34px; }
  #home .home-quick{ flex-direction: column; }
  #home .quick-bubble{ width: 200px; height: 200px; }
}


.bg-orbs{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1; /* 제일 아래 */
}

.bg-orbs::before,
.bg-orbs::after{
  content:"";
  position: absolute;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #eef3ff 45%, #e6f0ff 100%);
  filter: saturate(1.05);
}

/* 오른쪽 위 */
.bg-orbs::after{
  top: -360px;
  right: -360px;
}

/* 왼쪽 아래 */
.bg-orbs::before{
  bottom: -420px;
  left: -420px;
}

/* 홈일 때만 보이게 */
body:not(.is-home) .bg-orbs{
  display:none;
}


/* 드롭다운을 박스형으로 */
.sub-menu{
  top: 56px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(2,6,23,.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 4000;
}

/* hover 시 등장 */
.has-sub:hover .sub-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* 서브 메뉴 항목을 pill 버튼처럼 */
.sub-menu li{
  float: none;
  display: inline-block;
  margin: 0 6px 0 0;
}

.sub-menu li a{
  display: inline-block;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,23,42,.78);
  background: transparent;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.sub-menu li a:hover{
  background: linear-gradient(90deg, rgba(29,78,216,.12), rgba(14,165,233,.10));
  color: #1d4ed8;
  transform: translateY(-1px);
}

/* ✅ 헤더/서브메뉴 클릭 보장 */
.header{
  z-index: 9999 !important;
  isolation: isolate; /* 레이어 꼬임 방지 */
}

.sub-menu{
  z-index: 10000 !important;
}


.menu > ul > li.has-sub{ padding-bottom: 16px; }

.has-sub{ position: relative; }

.sub-menu{
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
}


/* ==================================================
   ✅ Premium Polish Patch (복붙용)
   - 허전함 제거: 배경 텍스처/그라데이션, 섹션 카드화, 버튼/호버 강화
   - 서브메뉴 hover 끊김/클릭 문제 해결 포함
   ================================================== */

/* 0) 배경을 '페이지 전체'에 은은한 텍스처 + 그라데이션 */
body{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(29,78,216,.10), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(14,165,233,.10), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 40%, #f7fbff 100%);
}

/* 섹션 사이 여백 조금 더 “웹사이트 느낌” */
#content > div{
  padding: 28px 0 54px;
}

/* 1) 헤더: 위쪽 라인/그라데이션/살짝 떠있는 느낌 */
.header{
  background: rgba(255,255,255,.78) !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 10px 30px rgba(2,6,23,.06) !important;
}
.header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(29,78,216,.35), rgba(14,165,233,.25), transparent);
  pointer-events:none;
}

/* 메뉴 hover: 밑줄 더 고급 + 살짝 떠오름 */
.menu > ul > li > a{
  transition: color .18s ease, transform .18s ease;
}
.menu > ul > li > a:hover{
  transform: translateY(-1px);
}

/* 2) ✅ 서브 메뉴 “사라짐”/클릭 문제 해결 (hover bridge + 레이어 안정화) */
.header{ isolation:isolate; z-index:9999 !important; }
.menu{ position:relative; z-index:9999; }

/* li hover 범위 아래로 늘려서 메뉴->서브메뉴 이동할 때 안 끊김 */
.menu > ul > li.has-sub{ padding-bottom: 18px; }

/* 서브메뉴 박스: 더 고급스럽게 + 클릭 가능 보장 */
.sub-menu{
  top: calc(100% + 6px) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10000 !important;

  /* 고급스러운 박스 */
  border-radius: 16px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 18px 55px rgba(2,6,23,.16) !important;

  transform: translateX(-50%) translateY(10px) !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

/* hover 시 등장 */
.has-sub:hover .sub-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) !important;
}

/* 서브 메뉴 pill 버튼들 */
.sub-menu li{ float:none !important; display:inline-block; margin:0 6px 0 0 !important; }
.sub-menu li a{
  display:inline-flex !important;
  align-items:center;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  color: rgba(15,23,42,.78) !important;
  background: rgba(29,78,216,.06);
  border: 1px solid rgba(29,78,216,.08);
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.sub-menu li a:hover{
  background: linear-gradient(90deg, rgba(29,78,216,.14), rgba(14,165,233,.10));
  color: #1d4ed8 !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}

/* 3) 섹션 제목: 밑에 장식 라인 + 강조 */
#content h2{
  position: relative;
  padding-bottom: 10px;
}
#content h2::after{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:0;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9);
  opacity: .35;
}

/* 4) “보드/리스트” 섹션들: 카드처럼 보이게(허전함 끝) */
.history-board,
.product-board,
.partner-board{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(2,6,23,.08);
  padding: 10px 18px;
}

/* 보드 내부 아이템: 줄 대신 ‘칸’ 느낌 */
.hy-group,
.product-group,
.partner-group{
  padding: 22px 0 !important;
}
.hy-item,
.product-item,
.partner-item{
  border-top: 1px dashed rgba(15,23,42,.10) !important;
}

/* 5) 카드(제품/인증서) 더 “브랜드 사이트”처럼 */
.p-card{
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 16px 40px rgba(2,6,23,.10) !important;
  overflow: hidden;
  position: relative;
}
.p-card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height: 3px;
  background: linear-gradient(90deg, rgba(29,78,216,.65), rgba(14,165,233,.45));
  opacity: .55;
}
.p-card:hover{
  transform: translateY(-8px) scale(1.02) !important;
}

.cert-img{
  background: rgba(255,255,255,.90) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 16px 40px rgba(2,6,23,.10) !important;
}

/* 6) HOME: 이미지에 살짝 오버레이/포커스 느낌 */
#home .home-image{
  position: relative;
}
#home .home-image::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(800px 400px at 20% 10%, rgba(255,255,255,.25), transparent 55%);
  pointer-events:none;
}

/* 퀵버튼 더 반짝이게 */
#home .quick-bubble{
  position: relative;
  overflow: hidden;
}
#home .quick-bubble::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 45%);
  transform: rotate(10deg);
  opacity: .55;
  pointer-events:none;
}
#home .quick-bubble:hover::after{
  opacity:.75;
}

/* 7) 푸터도 약간 고급스럽게 */
.footer{
  background: linear-gradient(180deg, #f8fafc 0%, #f3f6fb 100%) !important;
}
.footer-inner{
  font-weight: 600;
}

/* 8) (선택) 스크롤바 살짝 정리 (크롬/엣지) */
body::-webkit-scrollbar{ width: 10px; }
body::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.18);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.65);
}
body::-webkit-scrollbar-track{ background: rgba(15,23,42,.04); }


/* 조직도 뒤 배경(네모) 제거 */
#org,
.org-map-wrap,
.org-map-wrap svg,
.org-map-svg{
  background: transparent !important;
  box-shadow: none !important;
}

/* 혹시 흰 박스가 div에 padding+배경으로 잡혀있으면 */
.org-map-wrap{
  border: 0 !important;
}



/* ✅ 맨 마지막(2025년) 아래쪽 여백만 살짝 주면 더 자연스러움 */
.hy-group:last-child{
  padding-bottom: 8px;
}


/* =========================
   ✅ 연혁: 연도 구분선만 남기기 (최종)
   ========================= */
.history-board{ border-top: none; }

.hy-item{ border-top: none; }

.hy-group{
  border-bottom: 1px solid rgba(15,23,42,0.08);
  padding: 26px 0;
}

.hy-group:last-child{
  border-bottom: none;
  padding-bottom: 10px;
}


/* 마지막 연도 아래 선 제거 */
.hy-group:last-child{
  border-bottom: none;
  padding-bottom: 10px;
}

.hy-year{
  letter-spacing: -0.5px;
}

/* ✅ 연혁 항목 위/아래 점선(대시) 싹 제거 */
#history .hy-item,
#history .hy-list,
#history .hy-desc{
  border-top: none !important;
  border-bottom: none !important;
}

/* 혹시 hy-item + hy-item 에 dashed 넣은 경우까지 제거 */
#history .hy-item + .hy-item{
  border-top: none !important;
}


/* =========================
   주요 생산제품 / 사업종목 점선 제거
   ========================= */

/* 제품/사업 리스트 위 점선 제거 */
#main-product .product-item{
  border-top: none !important;
}

/* 보드 안에서 생기는 dashed 라인 제거 */
#main-product .product-list{
  border-top: none !important;
}

/* 혹시 남아있을 수 있는 dashed 전부 컷 */
#main-product *{
  border-top-style: none !important;
}

#main-product .product-item{
  border-top: 1px solid rgba(15,23,42,0.05) !important;
}

/* ✅ 제품 소개 맨 아래 가로선 제거 */
#main-product .product-board{
  border-bottom: none !important;
}

/* 혹시 그룹에 걸린 경우까지 대비 */
#main-product .product-group:last-child{
  border-bottom: none !important;
}

/* =========================
   제품 소개 카드 중앙 정렬 FIX
   ========================= */

/* 제품 소개 전체 */
#product{
  display: flex;
  justify-content: center;
}

/* 카드 그리드 감싸는 래퍼 */
.product-cards-wrap{
  width: 100%;
  max-width: 1200px;

  /* 🔥 중앙 정렬 핵심 */
  margin-left: auto !important;
  margin-right: auto !important;

  /* ❌ 기존 밀던 거 제거 */
  transform: none !important;
  padding-left: 0 !important;
}

/* 카드 그리드 */
.product-cards-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  /* 🔥 그리드 자체 중앙 */
  justify-content: center;
  align-content: center;

  gap: 26px;
}

/* ✅ 제품 리스트 선을 "글자 아래"로 */
.product-item{
  border-top: none !important;
  border-bottom: 1px solid rgba(15,23,42,0.08) !important;
  padding: 18px 0;
}

/* ✅ 맨 마지막 줄은 선 없애고 싶으면 */
.product-item:last-child{
  border-bottom: none !important;
}


/* ✅ main-product 리스트: 윗선(dashed) 완전 제거 + 밑선만 */
#main-product .product-item{
  border-top: none !important;
  border-bottom: 1px solid rgba(15,23,42,0.08) !important;
  padding: 18px 0 !important;
}

/* ✅ 첫 항목 위도 선 없게 */
#main-product .product-item:first-child{
  border-top: none !important;
}

/* ✅ 마지막 항목 밑선 제거(원하면 유지해도 됨) */
#main-product .product-item:last-child{
  border-bottom: none !important;
}



/* ✅ 윗선(dashed) 대신 밑선으로 통일 */
.hy-item, .product-item, .partner-item{
  border-top: none !important;
  border-bottom: 1px solid rgba(15,23,42,0.08) !important;
}

/* ✅ 해외 거래처(마지막 그룹) 아래 선만 제거 */
#partners .partner-group:last-child{
  border-bottom: none !important;
}

/* (혹시 partner-board 자체에 아래선이 있으면 이것도 같이) */
#partners .partner-board{
  border-bottom: none !important;
}

/* ✅ 인증서 섹션 진짜 중앙 정렬 */
#certificate .cert-wrap{
  transform: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ==================================================
   ✅ ENTERPRISE PREMIUM PATCH (맨 아래에 추가)
   - 컨테이너/간격/타이포/카드/보드/버튼 통일
   ================================================== */

:root{
  --container: 1200px;
  --gutter: 24px;

  --bg: #f6f8fc;
  --surface: rgba(255,255,255,.85);
  --surface-solid: #fff;

  --text: #0f172a;
  --muted: #475569;

  --brand: #1d4ed8;
  --brand2:#0ea5e9;

  --line: rgba(15,23,42,.10);
  --line2: rgba(15,23,42,.06);

  --shadow-sm: 0 10px 26px rgba(2,6,23,.08);
  --shadow-md: 0 18px 60px rgba(2,6,23,.12);

  --radius: 20px;
}

/* ✅ 전체 배경을 “기업 사이트”처럼 은은하게 */
body{
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(29,78,216,.10), transparent 55%),
    radial-gradient(1000px 600px at 90% 0%, rgba(14,165,233,.10), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f6f9ff 55%, #f5f8fe 100%);
  color: var(--text);
}

/* ✅ 공통 컨테이너(섹션 폭) 통일 */
#content{
  width: 100%;
  max-width: var(--container);
  margin: 110px auto 0;
  padding: 0 var(--gutter);
}

/* ✅ 섹션 블록 간격(리듬감) */
#content > div{
  padding: 46px 0 66px;
}

/* ✅ 섹션 제목: “대기업” 스타일 */
#content h2{
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.8px;
  margin: 0 0 28px;
  position: relative;
}
#content h2::after{
  content:"";
  display:block;
  width: 84px;
  height: 5px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  opacity: .28;
}

/* ✅ 서브 텍스트 */
#content p{
  color: var(--muted);
  line-height: 1.9;
}

/* ==================================================
   ✅ Header 업그레이드: 유리 느낌 + 라인 + 안정감
   ================================================== */
.header{
  height: 88px !important;
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 12px 40px rgba(2,6,23,.06) !important;
}
.header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(29,78,216,.35), rgba(14,165,233,.25), transparent);
}

/* 메뉴 hover가 더 “프리미엄” */
.menu > ul > li > a{
  transition: transform .18s ease, color .18s ease;
}
.menu > ul > li > a:hover{
  transform: translateY(-1px);
}

/* ==================================================
   ✅ 보드(연혁/제품리스트/거래처) = “카드형 섹션”
   ================================================== */
.history-board,
.product-board,
.partner-board{
  background: rgba(255,255,255,.80) !important;
  border: 1px solid var(--line2) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 12px 20px !important;
}

/* 리스트 아이템: 밑선만, 너무 진하지 않게 */
.hy-item, .product-item, .partner-item{
  border-top: none !important;
  border-bottom: 1px solid rgba(15,23,42,0.06) !important;
  padding: 16px 0 !important;
}
.hy-item:last-child,
.product-item:last-child,
.partner-item:last-child{
  border-bottom: none !important;
}

/* 연도/헤드 타이포 더 단단하게 */
.hy-year, .product-head, .partner-head{
  color: rgba(15,23,42,.92) !important;
  font-weight: 900 !important;
}

/* ==================================================
   ✅ 제품 카드 그리드: 기업 카탈로그 느낌
   ================================================== */
.product-cards-wrap{
  max-width: var(--container) !important;
  margin: 30px auto 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.product-cards-grid{
  gap: 22px !important;
}

.p-card{
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 14px 42px rgba(2,6,23,.10) !important;
  overflow: hidden;
  position: relative;
}

.p-card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height: 3px;
  background: linear-gradient(90deg, rgba(29,78,216,.70), rgba(14,165,233,.45));
  opacity: .55;
}

.p-title{
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .6px !important;
  color: rgba(15,23,42,.75) !important;
}

.p-image{
  height: 230px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  background: #f8fafc !important;
}

.p-card:hover{
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 22px 70px rgba(2,6,23,.16) !important;
}

/* ==================================================
   ✅ 인증서: “전시관” 느낌 (정렬 + 카드 고급화)
   ================================================== */
#certificate .cert-wrap{
  transform: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.cert-grid{
  gap: 34px 26px !important;
}

.cert-img{
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  background: rgba(255,255,255,.90) !important;
  box-shadow: 0 16px 50px rgba(2,6,23,.10) !important;
}

.cert-title{
  font-weight: 900 !important;
  color: var(--brand) !important;
}

/* ==================================================
   ✅ Footer: 기업 사이트 하단 스타일
   ================================================== */
.footer{
  background: linear-gradient(180deg, #f8fafc 0%, #f2f6ff 100%) !important;
  border-top: 1px solid var(--line) !important;
}
.footer-inner{
  color: rgba(71,85,105,.92) !important;
  font-weight: 600 !important;
}

/* ==================================================
   ✅ 스크롤바(선택): 더 고급
   ================================================== */
body::-webkit-scrollbar{ width: 10px; }
body::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.20);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.70);
}
body::-webkit-scrollbar-track{ background: rgba(15,23,42,.05); }


/* ==================================================
   ✅ BIG ENTERPRISE LAYOUT PATCH
   - “텅 빈 느낌” 없애는 큰 구조(밴드/히어로/섹션 카드화)
   ================================================== */

/* 전체 배경: 단순 그라데이션 말고 패턴/오브젝트 레이어 */
.global-bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(29,78,216,.14), transparent 60%),
    radial-gradient(800px 500px at 85% 0%, rgba(14,165,233,.12), transparent 60%),
    radial-gradient(700px 500px at 75% 90%, rgba(29,78,216,.10), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f6f9ff 40%, #f5f7fb 100%);
}
/* 은은한 도트/그리드 질감(대기업 사이트 자주 씀) */
.global-bg::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.22;
  background-image:
    radial-gradient(rgba(15,23,42,.12) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(circle at 50% 20%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.25) 55%, transparent 78%);
}

/* 콘텐츠 폭/리듬: “섹션 밴드” 기준 */
:root{
  --container: 1200px;
  --gutter: 24px;
  --radius: 22px;
  --line: rgba(15,23,42,.08);
  --shadow: 0 18px 60px rgba(2,6,23,.12);
  --shadow2: 0 10px 30px rgba(2,6,23,.08);
  --brand: #1d4ed8;
  --brand2: #0ea5e9;
}

#content{
  width: 100%;
  max-width: none;            /* ⭐ 밴드로 가려면 제한 풀고 */
  margin-top: 110px;
  padding: 0;
  text-align: center;
}

/* 섹션(각 div)을 “밴드”로 만들기 */
#content > div{
  display:none;
  width: 100%;
  padding: 74px 0;           /* ⭐ 큰 여백이 핵심 */
  position: relative;
}

/* 섹션마다 번갈아 배경 톤(빈 느낌 제거) */
#content > div:nth-of-type(odd){
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
}
#content > div:nth-of-type(even){
  background: rgba(248,250,252,.75);
}

/* 섹션 안 컨테이너(실제 내용은 1200px에 모으기) */
#content > div > *{
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* 섹션 제목: 크고 단단하게 + 상단 장식(빈 느낌 제거) */
#content h2{
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.9px;
  margin: 0 0 22px;
  position: relative;
}
#content h2::after{
  content:"";
  display:block;
  width: 92px;
  height: 6px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  opacity:.30;
}

/* =========================
   ✅ HERO(홈) “큰 덩어리” 만들기
   ========================= */
#home{
  display:block; /* 홈은 항상 보일 때만 적용되긴 하지만 안전 */
  padding: 86px 0 90px;
  background: transparent !important;
}

/* 홈 내부 레이아웃을 ‘기업 히어로 카드’로 */
#home .home-layout{
  max-width: var(--container);
  margin: 0 auto;
  padding: 34px;
  border-radius: 28px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: flex;
  gap: 56px;
  align-items: center;
}

/* 히어로 왼쪽 큰 이미지/비주얼 */
#home .home-image{
  flex: 0 0 520px;
  border-radius: 26px;
  overflow:hidden;
  box-shadow: var(--shadow2);
  border: 1px solid rgba(15,23,42,.06);
}

/* 히어로 텍스트 */
#home .home-text h2{
  font-size: 46px;
  line-height: 1.12;
  margin-bottom: 14px;
}
#home .home-text p{
  font-size: 17px;
  line-height: 1.9;
  color: rgba(71,85,105,.95);
  max-width: 560px;
}

/* ✅ 홈에 “KPI 줄” 추가(빈 느낌 바로 사라짐) */
#home .home-text::after{
  content:"";
  display:block;
  height:1px;
  margin: 26px 0 18px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.12), transparent);
}

/* KPI(숫자) - HTML 수정 없이 가짜로라도 분위기 내기 */
#home .home-text ul{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
#home .home-text li{
  background: rgba(29,78,216,.06);
  border: 1px solid rgba(29,78,216,.10);
  border-radius: 16px;
  padding: 14px 12px;
  font-weight: 800;
  color: rgba(15,23,42,.85);
}

/* =========================
   ✅ 보드/리스트도 ‘큰 카드’로(섹션 밴드 위에 올리기)
   ========================= */
.history-board,
.product-board,
.partner-board{
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow2) !important;
  padding: 18px 22px !important;
  margin-top: 28px !important;
}

/* 리스트 라인: 너무 많으면 밋밋 → 행 hover로 정보성 추가 */
.hy-item, .product-item, .partner-item{
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  transition: background .18s ease;
}
.hy-item:hover, .product-item:hover, .partner-item:hover{
  background: rgba(15,23,42,.02);
}

/* =========================
   ✅ 카드 그리드(제품/인증서)도 섹션 안에서 ‘전시관’ 느낌
   ========================= */
.product-cards-wrap,
#certificate .cert-wrap{
  margin-top: 34px !important;
}

/* 제품 카드: 더 커보이게 */
.product-cards-grid{
  gap: 26px !important;
}
.p-card{
  border-radius: 20px !important;
  box-shadow: var(--shadow2) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  background: rgba(255,255,255,.90) !important;
}
.p-image{ height: 240px !important; }

/* 인증서 섹션도 카드 크기 업 */
.cert-img{
  border-radius: 20px !important;
  box-shadow: var(--shadow2) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  background: rgba(255,255,255,.92) !important;
}

/* =========================
   ✅ footer도 밴드 느낌으로 확실히
   ========================= */
.footer{
  background: rgba(255,255,255,.75) !important;
  border-top: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 -14px 50px rgba(2,6,23,.06);
}

/* 🔥 모든 섹션 뒤 흰 네모 박스 제거 */
#content > div{
  background: transparent !important;
  backdrop-filter: none !important;
}

/* ===== KPI ===== */
.kpi-section{
  max-width: var(--container);
  margin: 28px auto 0;
  margin-top: 60px;    /* 히어로랑 거리 */
  margin-bottom: 80px;/* 다음 섹션과 거리 */
}
.kpi-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.kpi-card{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  text-align: left;
}
.kpi-num{
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.6px;
}
.kpi-label{
  margin-top: 6px;
  color: rgba(71,85,105,.95);
  font-weight: 700;
}

/* ===== 사업영역 ===== */
.biz-section{
  max-width: var(--container);
  margin: 26px auto 0;
  margin-top: 80px;
}
.section-subtitle{
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 14px;
  color: rgba(15,23,42,.85);
}
.biz-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.biz-card{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  position: relative;
  overflow: hidden;
}
.biz-card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height: 3px;
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9);
  opacity:.55;
}
.biz-card h4{
  margin: 4px 0 8px;
  font-size: 16px;
  font-weight: 900;
}
.biz-card p{
  margin: 0;
  color: rgba(71,85,105,.95);
  line-height: 1.7;
  font-weight: 600;
}

@media (max-width: 980px){
  .kpi-grid{ grid-template-columns: repeat(2, 1fr); }
  .biz-grid{ grid-template-columns: 1fr; }
}


/* 공장 제목 밑줄을 글자 바로 밑으로 */
.inside-text h2{
  display: inline-block;      /* 글자 길이만큼만 */
  width: fit-content;
  position: relative;
  padding-bottom: 10px;
}

/* 기본: 밑줄을 글자 기준으로 */
.inside-text h2::after{
  content:"";
  position:absolute;
  bottom: 0;
  height: 4px;
  width: 72px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9);
  opacity: .35;

  left: 0;            /*  글자 시작 기준 */
  transform: none;    /* 가운데 정렬 제거 */
}

/* 광주처럼 h2가 오른쪽 정렬이면 밑줄도 오른쪽에 붙게 */
.inside-text--gwangju h2::after{
  left: auto;
  right: 0;
}


/* 김해지점 텍스트 오른쪽 정렬 */
.inside-text--gimhae{
  text-align: right;
  margin-left: auto;   /* 오른쪽으로 밀기 */
}

/* 김해지점 제목 밑줄도 오른쪽 */
.inside-text--gimhae h2{
  display: inline-block;
  width: fit-content;
  position: relative;
}

.inside-text--gimhae h2::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -10px;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9);
  opacity: .35;
}

#history,
#main-product,
#partners{
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}


.product-board,
.partner-board{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/*  제품 소개 제목 위 여백 */
#main-product h2{
  margin-top: 60px !important;
}


#main-product h2{
  position: relative;
}

#main-product h2::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  top:-28px;
  width: 200px;
  height:1px;
  background: rgba(15,23,42,0.06);
}

/* 제목 + 밑줄 (글자 길이 맞춤) */
.home-text h2{
  display: inline-block;
  position: relative;
  padding-bottom: 12px;
}

.home-text h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9);
}

/* ===============================
   1️⃣ HOME : 밑줄 완전 제거
   =============================== */
#home h2::after{
  content: none !important;
}

/* ===============================
   2️⃣ 나머지 섹션: 글자 길이만큼 밑줄
   (회사소개 / 제품 / 주요 거래처 / 인증서 등)
   =============================== */
#content h2{
  display: inline-block;   /* ⭐ 글자 길이 기준 */
  position: relative;
  padding-bottom: 12px;
  margin-left: auto;
  margin-right: auto;     /* 가운데 정렬 유지 */
}

#content h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;            /* ⭐ 글자 길이만큼 */
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9);
  opacity: .35;
}

/* ===============================
   3️⃣ 혹시 기존 중앙 기준 밑줄 코드가 있으면 무력화
   =============================== */
#content h2::after{
  transform: none !important;
}


/* ===============================
   ❌ 섹션 전체 폭 밑줄 전부 제거
   =============================== */
#content > div::after,
section::after,
.section::after{
  content: none !important;
}

/* ===============================
   ✅ 제목 밑줄: 글자 길이만
   =============================== */
#content h2{
  display: inline-block !important;
  position: relative;
  padding-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
}

/* 글자 길이 기준 밑줄 */
#content h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9);
  opacity: .35;

  transform: none !important;
}

/* ===============================
   🏠 HOME만 밑줄 완전 제거
   =============================== */
#home h2::after{
  content: none !important;
}

/* =========================================================
   ✅ 0) (긴 선) 범인 후보들 전부 강제 OFF
   - 섹션/컨테이너에 걸린 border/배경선/가짜 line 싹 제거
   ========================================================= */
#content h2::before,
#content h2::after{
  content: none !important; /* 일단 전부 끄고 다시 만듦 */
}

/* 네가 직접 넣었던 '제품소개 위 선'도 제거 */
#main-product h2::before{
  content: none !important;
}

/* 혹시 섹션이나 보드에서 길게 보이는 상단 border가 밑줄처럼 보일 수 있음 */
.product-board,
.partner-board,
.history-board{
  border-top: none !important;
}

/* 섹션 자체에 after로 선 그리는 코드가 남아있는 경우까지 */
#content > div::before,
#content > div::after,
section::before,
section::after{
  content: none !important;
  border: 0 !important;
  background: none !important;
}

/* =========================================================
   ✅ 1) HOME만 밑줄 완전 제거
   ========================================================= */
#home h2{
  display: block !important;
}
#home h2::after{
  content: none !important;
}

/* =========================================================
   ✅ 2) HOME 제외한 나머지 섹션: 글자 길이만큼 밑줄
   ========================================================= */
#content > div:not(#home) h2{
  display: inline-block !important;  /* 글자 길이 기준 */
  position: relative !important;
  padding-bottom: 12px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 글자 폭 = 밑줄 폭 */
#content > div:not(#home) h2::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;

  width: 100% !important;            /* ✅ 글자 길이 */
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9) !important;
  opacity: .35 !important;

  transform: none !important;
}

/* ✅ 제목 밑줄이 길게 나오는 원인: h2 width:100% 강제 해제 */
#partners h2,
#main-product h2{
  width: auto !important;
  max-width: none !important;
  transform: none !important;     /* translateX(60px) 같은 것도 제거 */
  margin-left: auto !important;
  margin-right: auto !important;
  display: inline-block !important; /* 글자 길이 기준 */
  position: relative !important;
  padding-bottom: 12px !important;
}

/* ✅ 홈은 밑줄 제거(원하면 유지 가능) */
#home h2::after{
  content: none !important;
}

/* ✅ 거래처/생산제품 제목 밑줄: 글자 길이만큼 */
#partners h2::after,
#main-product h2::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;         /* ✅ 글자 길이(=h2 폭) */
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9) !important;
  opacity: .35 !important;
  transform: none !important;
}

/* ✅ 주요 생산제품 제목 위치를 주요 거래처와 동일하게 */
#main-product h2{
  margin-top: 0 !important;
}

/* 제품 소개 제목 위 여백 */
#main-product .product-intro-title{
  margin-top: 100px;   /* 원하는 만큼 조절 (40~90 추천) */
}

#main-product h2.product-intro-title{
  margin-top: 100px !important;
}


/* ✅ 섹션 한 줄 설명(서브카피) */
.section-lead{
  margin: -10px auto 26px;   /* h2 아래 간격 */
  max-width: 860px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(71,85,105,.92);
  font-weight: 600;
}

/* =========================
   ✅ 개요(연혁) 타임라인
   ========================= */
#history{
  text-align: center;
}

/* 전체 래퍼 */
#history .timeline{
  position: relative;
  max-width: 980px;
  margin: 44px auto 0;
  padding: 6px 0;
}

/* 가운데 세로 라인 */
#history .tl-line{
  position: absolute;
  left: 44%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(15,23,42,.10);
  transform: translateX(-50%);
  border-radius: 999px;
}

/* 한 줄(연도 블록) */
#history .tl-item{
  display: grid;
  grid-template-columns: 1fr 64px 1.35fr; /* (연도) (점/라인) (내용) */
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  position: relative;
}

/* 중앙 점 */
#history .tl-dot{
  grid-column: 2;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(29,78,216,.55);
  margin: 6px auto 0;
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
  z-index: 2;
}

/* 왼쪽 연도 */
#history .tl-year{
  grid-column: 1;
  text-align: right;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.6px;
  color: #0d1f39;
  padding-right: 12px;
}

/* 오른쪽 내용 */
#history .tl-content{
  grid-column: 3;
  text-align: left;
  padding-left: 10px;
}

/* 날짜+설명 한 줄 */
#history .tl-row{
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(15,23,42,.06);
}
#history .tl-row:last-child{
  border-bottom: none;
}

/* 날짜 */
#history .tl-date{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.55);
  letter-spacing: .2px;
}

/* 설명 */
#history .tl-text{
  font-size: 15px;
  font-weight: 700;
  color: rgba(15,23,42,.86);
  line-height: 1.7;
}

/* =========================
   ✅ HISTORY : 점-라인-연도-내용 (참고 이미지 스타일)
   ========================= */
#history .timeline{
  max-width: 1000px;
  margin: 40px auto 0;
}

/* 한 줄(한 연도 블록) : 3컬럼 */
#history .tl-item{
  display: grid;
  grid-template-columns: 28px 120px 1fr; /* (라인) (연도) (내용) */
  column-gap: 26px;
  padding: 26px 0;
  position: relative;
}


#history .tl-dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(15,23,42,.60);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);

  position: relative;   /* ⭐ 핵심 */
  top: 50px;             /* ⭐ 아래로 내리기 */

  z-index: 1;
}


/* 연도 */
#history .tl-year{
  font-size: 20px;
  font-weight: 900;
  color: #1d4ed8;
  letter-spacing: -0.6px;
  text-align: left;
  padding-top: 0;
  padding-left: 50px;
}

/* 오른쪽 내용 */
#history .tl-content{
  text-align: left;
}

/* 날짜 + 텍스트 */
#history .tl-row{
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  padding: 10px 0;
}

#history .tl-date{
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,23,42,.55);
}

#history .tl-text{
  font-size: 15px;
  font-weight: 700;
  color: rgba(15,23,42,.85);
  line-height: 1.7;
}

/* 첫/마지막 아이템은 선이 바깥으로 튀는 거 방지 */
#history .tl-item:first-child .tl-rail::before{ top: 6px; }
#history .tl-item:last-child  .tl-rail::before{ bottom: 6px; }

#history .tl-year{
  white-space: nowrap;   /* ✅ 2025년 줄바꿈 금지 */
  line-height: 1;        /* ✅ 글자 높이 줄여서 정렬 안정 */
}

/* timeline 전체 기준 */
#history .timeline{
  max-width: 1000px;
  margin: 40px auto 0;
  position: relative;
  padding-left: 0;
}

/* ✅ 세로선: timeline에 1번만 */
#history .timeline::before{
  content:"";
  position:absolute;
  left: 14px;              /* rail(28px)의 중앙 */
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(15,23,42,.12);
  border-radius: 999px;
}

/* 한 연도 블록 */
#history .tl-item{
  display: grid;
  grid-template-columns: 28px 140px 1fr; /* (점) (연도) (내용) */
  column-gap: 26px;
  padding: 26px 0;
  position: relative;
}

/* 왼쪽 rail: 점만 가운데 */
#history .tl-rail{
  position: relative;
  display:flex;
  justify-content:center;
}

/* ✅ 점 */
#history .tl-dot{
  width: 12px;
  height: 12px;
  border-radius: 40%;
  background: #fff;
  border: 3px solid rgba(15,23,42,.60);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  margin-top: 6px;
  z-index: 2;
}

/* ✅ 연도: 옆으로 + 줄바꿈 금지 */
#history .tl-year{
  font-size: 28px;
  font-weight: 900;
  color: #162e6c;
  letter-spacing: -0.6px;
  text-align: left;

  white-space: nowrap;   /* ✅ 2025년 한 줄 */
  line-height: 1.1;
  padding-top: 2px;
}

/* 오른쪽 내용 */
#history .tl-content{ text-align:left; }

#history .tl-row{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  padding: 10px 0;
}

#history .tl-date{
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,23,42,.55);
}

#history .tl-text{
  font-size: 15px;
  font-weight: 700;
  color: rgba(15,23,42,.85);
  line-height: 1.7;
}


/* ✅ 개요 섹션(overview) */
#overview{
  text-align: center;
}

#overview .section-lead{
  margin-top: 6px;
  margin-bottom: 26px;
  color: rgba(71,85,105,.95);
  font-weight: 600;
}

.overview-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
}

.ov-card{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  padding: 18px;
  text-align: left;
}

.ov-title{
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,.55);
  margin-bottom: 8px;
  letter-spacing: .3px;
}

.ov-value{
  font-size: 16px;
  font-weight: 800;
  color: rgba(15,23,42,.90);
  line-height: 1.6;
}

.overview-box{
  max-width: 900px;
  margin: 22px auto 0;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  padding: 18px;
  text-align: left;
}

.ov-subtitle{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 900;
  color: rgba(15,23,42,.85);
}

.ov-bullets{
  margin: 0;
  padding-left: 18px;
}

.ov-bullets li{
  margin: 8px 0;
  color: rgba(71,85,105,.95);
  font-weight: 600;
  line-height: 1.7;
}

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


/* =========================
   ✅ 개요 - 회사 기본 정보
   ========================= */

.overview-info{
  max-width: 900px;
  margin: 28px auto 0;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(2,6,23,.08);
  padding: 22px 26px;
  text-align: left;
}

.ov-info-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 26px;
}

.ov-info-item{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(15,23,42,.08);
}

.ov-info-item:last-child{
  border-bottom: none;
}

.ov-label{
  flex: 0 0 90px;
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,.55);
  letter-spacing: .3px;
}

.ov-text{
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: rgba(15,23,42,.9);
  line-height: 1.6;
}



/* =========================
   ✅ 개요 - 아이콘 기본정보(1)
   ========================= */
.overview-info{
  max-width: 980px;
  margin: 30px auto 0;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(2,6,23,.08);
  padding: 22px 26px;
  text-align: left;
}

.ov-subtitle{
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 14px;
  color: rgba(15,23,42,.88);
}

.ov-info-cards{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.ov-card{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 12px 28px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ov-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(2,6,23,.10);
  border-color: rgba(29,78,216,.20);
}

.ov-ic{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: linear-gradient(180deg, rgba(29,78,216,.12), rgba(14,165,233,.10));
  border: 1px solid rgba(29,78,216,.12);
  flex: 0 0 44px;
}

.ov-k{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .4px;
  color: rgba(15,23,42,.55);
}

.ov-v{
  margin-top: 4px;
  font-size: 15px;
  font-weight: 800;
  color: rgba(15,23,42,.90);
  line-height: 1.5;
}

.ov-v a{
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 900;
}
.ov-v a:hover{
  text-decoration: underline;
}

/* 모바일 */
@media (max-width: 860px){
  .ov-info-cards{ grid-template-columns: 1fr; }
}


/* =========================
   ✅ 비전/미션 카드(3)
   ========================= */
.overview-vm{
  max-width: 980px;
  margin: 26px auto 0;
  text-align: left;
}

.ov-vm-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.ov-vm-card{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(2,6,23,.08);
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.ov-vm-card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height: 3px;
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9);
  opacity: .55;
}

.ov-vm-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 70px rgba(2,6,23,.12);
}

.ov-vm-top{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.ov-vm-badge{
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .8px;
  color: rgba(15,23,42,.75);
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.10);
}

.ov-vm-card h4{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: rgba(15,23,42,.92);
  line-height: 1.35;
}

.ov-vm-card p{
  margin: 0;
  color: rgba(71,85,105,.95);
  line-height: 1.7;
  font-weight: 650;
}

.ov-vm-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(71,85,105,.95);
  line-height: 1.7;
  font-weight: 650;
}

.ov-vm-list b{
  color: rgba(15,23,42,.88);
}

/* 반응형 */
@media (max-width: 980px){
  .ov-vm-grid{ grid-template-columns: 1fr; }
}

/* =========================
   ✅ HOME 중간 줄(원 2개) 퀵 메뉴
   ========================= */
#home .home-quick--mid{
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px 0 10px;   /* 핵심 사업영역 아래에서 자연스럽게 */
  display: flex;
  justify-content: center;
  gap: 80px;
}

/* 중간 줄 원은 아래 3개보다 살짝 작게 */
#home .home-quick--mid .quick-bubble{
  width: 180px;
  height: 180px;
}

/* 중간 줄 원 배경 톤 */
#home .qb4{
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #eef6ff 45%, #e9f1ff 100%);
}
#home .qb5{
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #f1f8ff 45%, #edf3ff 100%);
}

/* 모바일에서는 2개도 세로로 */
@media (max-width: 900px){
  #home .home-quick--mid{
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 22px 0 10px;
  }
  #home .home-quick--mid .quick-bubble{
    width: 180px;
    height: 180px;
  }
}


/* 전체 묶음: 줄 사이 간격을 이걸로 조절 */
#home .home-quick-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;  /* 여기 숫자 줄이면 위/아래 줄이 붙음 */
}

/* 각 줄은 가로로 */
#home .home-quick{
  display: flex;
  justify-content: center;
  gap: 80px;
  padding: 0 !important; /* 기존 padding이 간격 벌리는 거 방지 */
  width: 100%;
}

/* 위 2개 줄은 살짝 작게(원하면) */
#home .home-quick--mid .quick-bubble{
  width: 180px;
  height: 180px;
}


/* 홈 핵심사업영역 ↔ 퀵버블 간격 강제 확보*/
#home .biz-section{
  margin-bottom: 60px !important;
}

#home .home-quick-wrap{
  margin-top: 0 !important;   /* 위에서 준 간격만 쓰게 */
}


/* ===============================
   개요 - 사업 수행 프로세스
   =============================== */
.overview-process{
  margin-top: 60px;
}

.ov-process{
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.ov-process li{
  background: #f8fafc;
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  gap: 14px;
}

.ov-process .op-step{
  font-size: 22px;
  font-weight: 700;
  color: #1c4f8f;
  flex-shrink: 0;
}

.ov-process strong{
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
}

.ov-process p{
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* ===============================
   개요 - 적용 산업 분야
   =============================== */
.overview-industry{
  margin-top: 56px;
}

.ov-tags{
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ov-tags li{
  padding: 10px 16px;
  background: #eef4ff;
  border-radius: 20px;
  font-size: 14px;
  color: #1c4f8f;
  font-weight: 500;
}

/* ===============================
   사업 수행 프로세스 - 카드 톤 통일
   =============================== */
.ov-process li{
  background: #ffffff;
  border: 1px solid #e6edf5;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.04);
}

/* 숫자 컬러도 위 카드와 맞추기 */
.ov-process .op-step{
  color: #1c4f8f;
}

/* 제목 강조 */
.ov-process strong{
  font-weight: 700;
  color: #1f2d3d;
}

/* 설명 텍스트 */
.ov-process p{
  color: #566b85;
}

/* hover 시 동일한 카드 반응 */
.ov-process li:hover{
  box-shadow: 0 14px 32px rgba(28,79,143,0.12);
  transform: translateY(-4px);
  transition: all 0.25s ease;
}

/* ===============================
   개요 섹션 제목 중앙 정렬 통일
   =============================== */

/* 사업 수행 프로세스 제목 */
.overview-process .ov-subtitle{
  text-align: center;
}

/* 비전·미션 섹션 제목 */
.overview-vm .ov-subtitle{
  text-align: center;
}

/* 적용 산업 분야 제목 */
.overview-industry .ov-subtitle{
  text-align: center;
}

.ov-subtitle{
  margin: 0 auto 28px;
}

/* ===============================
   지점 제목 + 설명 정렬 스타일
   =============================== */
.branch-text{
  margin-bottom: 24px;
}

/* 네모(제목) */
.branch-title{
  display: inline-block;
  font-size: 26px;
  font-weight: 700;
  color: #1f2d3d;

  padding-bottom: 6px;
  border-bottom: 3px solid #4c7fd8; /* 파란 포인트 */
}

/* 제목 아래 글 */
.branch-desc{
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.7;
  color: #5f6f86;
}

/**/


/* 한 줄에: (사진그리드) + (텍스트) */
.branch{
  display: flex;
  align-items: flex-start;
  gap: 48px;          /* 사진-텍스트 사이 간격 */
  margin: 70px 0;
}

/* 사진 영역은 넓게 */
.branch-media{
  flex: 1.2;
  min-width: 0;
}

/* 텍스트 영역 */
.branch-info{
  flex: 0.8;
  min-width: 260px;
  padding-top: 14px;
}

/* ✅ 김해는 반대로 (텍스트가 왼쪽, 사진이 오른쪽) */
.branch--gimhae{
  flex-direction: row-reverse;
  text-align: right;         /* 제목/글 오른쪽 정렬 */
}

/* 제목/설명 스타일 (너 느낌 유지) */
.branch-title{
  display: inline-block;
  font-size: 34px;
  font-weight: 900;
  color: #1f2d3d;
  padding-bottom: 8px;
  border-bottom: 3px solid #4c7fd8;
}

.branch-desc{
  margin-top: 16px;
  line-height: 1.8;
  font-size: 15px;
  color: #5f6f86;
}

/* 모바일에서는 세로로 */
@media (max-width: 980px){
  .branch, .branch--gimhae{
    flex-direction: column;
    text-align: left;
  }
}

/* ✅ 지점 섹션: 사진(왼쪽) + 글(오른쪽) 2칸 고정 */
.branch{
  max-width: 1200px;
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: 1fr 320px; /* 왼쪽 사진 크게 / 오른쪽 글 고정폭 */
  gap: 40px;
  align-items: start;
}

/* ✅ 글은 사진 위로 절대 안 올라가게 */
.branch-info{
  position: relative;
  z-index: 2;
  padding-top: 20px;
}

/* ✅ 사진 영역은 따로 레이어 */
.branch-media{
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* ✅ 글 줄바꿈 자연스럽게 */
.branch-desc{
  margin-top: 18px;
  line-height: 1.7;
  word-break: keep-all;
}

.branch--gimhae{
  grid-template-columns: 320px 1fr;
}

.branch--gimhae .branch-info{ order: 1; }
.branch--gimhae .branch-media{ order: 2; }


/* 광주 텍스트는 마지막 칸으로 */
.branch--gwangju .branch-info{
  grid-column: 3 / 4;
  padding-top: 30px; /* 제목 위치 아래로 내리고 싶으면 여기 조절 */
}

/* (옵션) 광주 텍스트 줄간격/정렬 */
.branch--gwangju .branch-title{
  margin: 0 0 18px;
}
.branch--gwangju .branch-desc{
  line-height: 1.7;
  word-break: keep-all;
}

/* ✅ branch 기본 2칸 그리드(사진 / 글) 그대로 사용 */
.branch{
  max-width: 1200px;
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: 1fr 320px; /* 왼쪽 사진 크게 / 오른쪽 글 고정 */
  gap: 40px;
  align-items: start;
}

/* ✅ 광주: 사진 왼쪽 / 글 오른쪽 (기본값) */
.branch--gwangju .branch-media{ order: 1; }
.branch--gwangju .branch-info { order: 2; text-align: left; }


/* ✅ 제목/설명 “사진 옆에 딱 붙게” (공통) */
.branch-info{
  padding-top: 24px;     /* 제목 높이 맞추기 */
  align-self: start;
}
.branch-desc{
  white-space: normal;   /* ❗ 지금 네 코드에 nowrap 있어서 줄바꿈이 이상해질 수 있음 */
}


/* =========================
   ✅ branch 공통(지금 너 레이아웃 유지)
   ========================= */
.branch{
  max-width: 1200px;
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: 1fr 320px; /* (사진) (글) */
  gap: 40px;
  align-items: start;
}

.branch-info{
  padding-top: 20px;
  align-self: start;
}

/* =========================
   ✅ 광주: 사진 왼쪽 / 글 오른쪽 (기본 2칸)
   - "사진 옆에 딱 붙게" = 오른쪽 칼럼에 고정
   ========================= */
.branch--gwangju{
  grid-template-columns: 1fr 320px;
}

.branch--gwangju .branch-media{ order: 1; }
.branch--gwangju .branch-info { order: 2; text-align: left; }

/* ✅ 광주 설명 줄바꿈은 자연스럽게 */
.branch--gwangju .branch-desc{
  white-space: normal;   /* 필요하면 keep-all로 바꿔도 됨 */
  word-break: keep-all;
}

/* =========================
   ✅ 김해: "원래대로" (글 왼쪽 / 사진 오른쪽 + 오른쪽 정렬)
   ========================= */
.branch--gimhae{
  grid-template-columns: 320px 1fr; /* (글) (사진) */
}

.branch--gimhae .branch-info{ order: 1; text-align: right; }
.branch--gimhae .branch-media{ order: 2; }

/* ✅ 김해는 기존처럼 한 줄 유지하고 싶으면 */
.branch--gimhae .branch-desc{
  white-space: nowrap;   /* 김해 원래 느낌 */
}


.logo a{
  display: inline-block;
}
.logo img{
  cursor: pointer;
}


 
/* ✅ 메뉴 글자 크기 키우기 (최종 강제) */
.menu > ul > li > a{
  font-size: 18px !important;   /* ← 17~19 중에서 취향 */
  font-weight: 800 !important;
  letter-spacing: -0.3px;      /* 글자 넓이 살짝 압축 → 고급 */
}


/* =========================
   ▼ 헤더 아래로 내려오는 서브메뉴
   ========================= */

.has-sub{
  position: relative;
}

/* 서브메뉴 바 */
.sub-bar{
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);

  width: 100vw;
  padding: 18px 0;

  display: flex;
  justify-content: center;
  gap: 36px;

  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.08);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .2s ease;
  z-index: 9998;
}

/* hover 시 열기 */
.has-sub:hover .sub-bar{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 서브메뉴 아이템 */
.sub-bar a{
  font-size: 15px;
  font-weight: 700;
  color: #334155;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}

.sub-bar a:hover{
  background: rgba(29,78,216,.08);
  color: #1d4ed8;
}


.quick-bubble .qb-title{
  font-weight: 1000;
  font-size: 20px;          /* 기존보다 살짝만 */
  color: #0f172a;           /* 더 또렷한 네이비 */
  letter-spacing: -0.3px;
}

/* ✅ 원 안 텍스트 무조건 키우기/두껍게 (최종 강제) */
#home .quick-bubble,
#home .quick-bubble *{
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}


.contact-form {
  max-width: 600px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form label {
  font-size: 14px;
  color: #333;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form input,
.contact-form textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 14px;
  font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #3f79bf;
}

.contact-form button {
  margin-top: 10px;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: #3f79bf;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.contact-form button:hover {
  background: #2f5fa0;
}

#contact{
  text-align: center;
}

/* 가운데 카드(유리 느낌) */
#contact .contact-card{
  max-width: 880px;
  margin: 28px auto 0;
  padding: 26px 26px 22px;

  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(2,6,23,.10);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#contact .contact-form{
  width: 100%;
}

#contact .contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  align-items: start;
}

#contact .field{
  text-align: left;
}

#contact .field--full{
  grid-column: 1 / -1;
}

#contact label{
  display: block;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(15,23,42,.78);
  margin-bottom: 8px;
}

/* 인풋/텍스트영역 */
#contact input,
#contact textarea{
  width: 100%;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);

  font-size: 14px;
  font-weight: 700;
  color: rgba(15,23,42,.90);

  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#contact textarea{
  resize: vertical;
  min-height: 180px;
  line-height: 1.7;
}

#contact input:focus,
#contact textarea:focus{
  border-color: rgba(29,78,216,.40);
  box-shadow: 0 0 0 5px rgba(29,78,216,.12);
}

/* 버튼 */
#contact .btn-primary{
  border: 0;
  padding: 1
}


/* =========================
   문의 버튼 스타일 (최종)
   ========================= */
#contact button[type="submit"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 22px;
  border-radius: 14px;
  border: none;
  cursor: pointer;

  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.2px;

  color: #ffffff;
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9);

  box-shadow: 0 12px 28px rgba(29,78,216,.35);
  transition: 
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

/* hover */
#contact button[type="submit"]:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(29,78,216,.45);
  filter: saturate(1.05);
}

/* active (클릭 시) */
#contact button[type="submit"]:active{
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(29,78,216,.35);
}

/* disabled (혹시 나중에 쓰게 되면) */
#contact button[type="submit"]:disabled{
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
}


/* header가 화면 기준으로 배경을 덮도록 */
.header{
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
}

/* 혹시 상위 배경(그라데이션/orb)이 삐져나오면 가림 */
.header::before{
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  z-index: -1;
}


.sub-bar{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;

  /* 헤더 높이에 맞춰서 내려오게 (현재 헤더가 88px/100px 섞여있어서 안전하게 88~100 중 택1) */
  top: 88px !important;   /* 안 맞으면 100px로 바꿔 */

  transform: none !important;
  margin: 0 !important;

  z-index: 9998 !important;
}


/* 기준 */
.has-sub{
  position: relative;
}

/* 메뉴 → 서브바 사이 '투명 다리' */
.has-sub::after{
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 100px;
  height: 26px;
  background: transparent;
  pointer-events: auto;
  z-index: 9997;
}

/* 서브바 자체 hover 유지 */
.has-sub:hover .sub-bar{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* 1) 예전에 넣은 fixed 다리(화면 전체) 무력화 */
.has-sub::after{
  content: none !important;
}

/* 2) 메뉴(li) 아래에만 "다리" 만들기 (회사소개/제품 각각 따로 유지) */
.menu > ul > li.has-sub{
  position: relative;
}

/* 메뉴 텍스트 아래 ~ 서브바까지 빈 공간을 해당 li 범위에서만 메움 */
.menu > ul > li.has-sub::before{
  content:"";
  position:absolute;
  left: -20px;      /* 옆으로 조금 여유 (메뉴 글자만 딱이면 끊길 수 있음) */
  right:-20px;
  top: 100%;
  height: 26px;     /* 빈 공간 메우는 높이 (필요하면 20~32 조절) */
  background: transparent;
  pointer-events: auto;
}

/* 3) 서브바는 화면 끝까지(흰색 끝까지) 채우되, hover는 해당 li에서만 */
.menu > ul > li.has-sub .sub-bar{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  transform: none !important;

  /* 헤더 높이(네 코드에 header 높이 100px 있었음) */
  top: 100px !important;
}

/* 4) 해당 메뉴 hover일 때만 열리게 유지 */
.menu > ul > li.has-sub:hover .sub-bar{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ===============================
   ✅ 상단 메뉴 ↔ 서브메뉴 사이 여백 제거 (최종)
   =============================== */

/* 1) 서브바 위아래 padding 줄이기 */
.sub-bar{
  padding-top: 10px !important;   /* 기존 18px → 10px */
  padding-bottom: 10px !important;
}

/* 2) 메뉴(li)에 준 아래 여백 제거 */
.menu > ul > li.has-sub{
  padding-bottom: 0 !important;
}

/* 3) 서브메뉴 위치를 헤더 바로 아래로 당김 */
.menu > ul > li.has-sub .sub-bar{
  top: 88px !important;  /* header 높이에 맞춤 (네 헤더 88px) */
}

/* 4) 혹시 남아있는 투명 다리 높이 줄이기 */
.menu > ul > li.has-sub::before{
  height: 50px !important; /* 26px → 12px */
}


/* 헤더 자체 밑줄 제거 */
.header{
  border-bottom: none !important;
  box-shadow: none !important;
}

/* header::after 로 만든 가짜 라인 제거 */
.header::after{
  content: none !important;
}

/* 혹시 sub-bar 위쪽에 선이 남아있을 경우 대비 */
.sub-bar{
  border-top: none !important;
}


/* =========================
   ✅ 제품 카드: 한 줄 5개 (최종 override)
   ========================= */
#main-product .product-cards-grid{
  grid-template-columns: repeat(5, 1fr) !important;
}

/* 화면 줄어들면 자연스럽게 */
@media (max-width: 1200px){
  #main-product .product-cards-grid{
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@media (max-width: 900px){
  #main-product .product-cards-grid{
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 640px){
  #main-product .product-cards-grid{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 420px){
  #main-product .product-cards-grid{
    grid-template-columns: 1fr !important;
  }
}

/* ✅✅ 제품 카드 가로가 안 늘어나는 '진짜 원인' 해결: #main-product 폭 제한 해제 */
#main-product{
  max-width: none !important;   /* 기존 1000px 제한 해제 */
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ✅ 카드 래퍼를 화면 더 넓게 */
#main-product .product-cards-wrap{
  max-width: 1400px !important;  /* 1200/1000 제한보다 우선 */
  width: 100% !important;
  margin: 0 auto !important;
}

/* ✅ (선택) 5개 유지하면서 카드가 더 '가로로' 넓어 보이게: gap 조금 줄이기 */
#main-product .product-cards-grid{
  gap: 16px !important; /* 원래 22~26이면 줄여서 카드 폭 확보 */
}

/* 모든 섹션 기본 숨김 (JS로 제어) */
#content > div{
  display: none;
}

/* =========================================
   ✅ 서브메뉴를 "세로 드롭다운"으로 변경 (맨 아래에 복붙)
   - 기존 가로 풀폭 sub-bar 스타일을 전부 덮어씀
   ========================================= */

/* 부모(li) 기준 잡기 */
.menu > ul > li.has-sub{
  position: relative !important;
}

/* 기존에 넣었던 "투명 다리" 같은 거 있으면 끊김 원인이니 끔 */
.menu > ul > li.has-sub::before,
.menu > ul > li.has-sub::after{
  content: none !important;
}

/* 서브메뉴 박스 */
.menu > ul > li.has-sub .sub-bar{
  position: absolute !important;     /* ✅ fixed -> absolute */
  top: 100% !important;              /* ✅ 메인 메뉴 바로 아래 */
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: max-content !important;     /* ✅ 내용만큼 */
  max-width: 300px;                  /* 너무 길면 제한(원하면 조절) */

  display: flex !important;
  flex-direction: column !important; /* ✅ 세로로 */
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px !important;

  padding: 12px !important;          /* ✅ 흰 박스 여백 */
  background: rgba(255,255,255,.98) !important;  /* ✅ 흰색 박스 */
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(2,6,23,.12) !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 10000 !important;

  /* 살짝 내려왔다가 나타나는 효과 */
  margin-top: 8px !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

/* hover 시 보이게 */
.menu > ul > li.has-sub:hover .sub-bar{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 서브메뉴 항목(세로 버튼 느낌) */
.menu > ul > li.has-sub .sub-bar a{
  display: block !important;
  width: 100% !important;

  padding: 10px 12px !important;
  border-radius: 10px !important;

  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: rgba(15,23,42,.85) !important;

  background: transparent !important;
  transition: background .15s ease, color .15s ease, transform .15s ease !important;
}

.menu > ul > li.has-sub .sub-bar a:hover{
  background: rgba(29,78,216,.08) !important;
  color: #1d4ed8 !important;
  transform: translateX(2px) !important;
}

/* ✅ 메인 메뉴 기준점 */
.header { position: sticky; top: 0; z-index: 9999; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); }
.header-inner { position: relative; }

/* ✅ 서브메뉴: 풀폭 흰색 바(메인메뉴 바로 밑) */
.menu .has-sub { position: relative; }

.menu .sub-bar{
  position: fixed;                 /* 화면 기준으로 풀폭 */
  left: 0;
  right: 0;
  top: 80px;                       /* 헤더 높이에 맞게 조절 (지금 헤더 높이) */
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 14px 30px rgba(0,0,0,0.08);
  padding: 18px 0;

  display: none;                   /* 기본 숨김 */
  z-index: 9998;
}

/* ✅ hover 시 열리게 */
.menu .has-sub:hover > .sub-bar{
  display: block;
}

/* ✅ 서브메뉴 내용: 가운데 정렬된 컨테이너 */
.menu .sub-bar-inner{
  max-width: 1200px;               /* 너가 원하는 폭 */
  margin: 0 auto;
  padding: 0 18px;

  display: grid;
  grid-template-columns: 1fr;      /* 기본은 1열 */
  row-gap: 10px;
}

/* ✅ 링크를 "세로 리스트"처럼 */
.menu .sub-bar-inner a{
  display: block;
  padding: 10px 8px;
  border-radius: 10px;
  color: #111;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.25;
}

.menu .sub-bar-inner a:hover{
  background: #f5f7fb;
}


/* =========================
   ✅ 제품 서브페이지 갤러리 (5개씩 한 줄)
   - CSS 맨 아래에 복붙
   ========================= */

/* 서브 제품 섹션 공통 정리(선택) */
.product-sub{
  width: 100%;
}

/* 서브 갤러리 래퍼 */
.sub-gallery-wrap{
  width: 100%;
  max-width: 1800px;       /* 필요하면 1200~1600 사이로 조절 */
  margin: 28px auto 0;
  padding: 0 24px;
  box-sizing: border-box;
}

/* 5열 그리드 */
.sub-gallery-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;               /* 카드 간격 */
}

/* 서브페이지에서도 카드 높이 조금 통일(원하면 조절) */
.sub-gallery-grid .p-image{
  height: 240px;           /* 기존 230~240이랑 비슷 */
}

/* 반응형 */
@media (max-width: 1200px){
  .sub-gallery-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px){
  .sub-gallery-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .sub-gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px){
  .sub-gallery-grid{ grid-template-columns: 1fr; }
}


/* 카드 그리드 : 카드 최소 가로폭 키우기 */
.product-cards-grid,
.sub-gallery-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
}

/* 카드 자체 크기감 키우기 */
.p-card{
  padding: 20px;
  border-radius: 18px;
}

/* 카드 제목 조금 크게 */
.p-title{
  font-size: 17px;
  margin-bottom: 14px;
}

/* 이미지 영역 키우기 */
.p-image{
  height: 240px;
}

/* 이미지 꽉 차게 */
.p-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}


/* ===============================
   ✅ 이미지 클릭 전체보기 모달
   =============================== */

.img-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
}

.img-modal img{
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.img-modal-close{
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 40px;
  color: #fff;
  font-weight: 300;
  cursor: pointer;
}

/* 카드 이미지에 클릭 가능 표시 */
.p-image img{
  cursor: zoom-in;
}

/* ===============================
   상단 영상 카드 (큼직하게)
   =============================== */

.video-top-section{
  width: 100%;
  max-width: 1600px;
  margin: 40px auto 60px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.video-card{
  position: relative;
  width: 100%;
  height: 420px;                 /* 🔥 크게 */
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.video-card video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.video-card:hover .video-overlay{
  opacity: 1;
}

/* 모바일 */
@media (max-width: 900px){
  .video-top-section{
    grid-template-columns: 1fr;
  }
  .video-card{
    height: 300px;
  }
}

/* ===============================
   영상 전체보기 모달
   =============================== */

.video-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.video-modal video{
  width: 92%;
  max-width: 1400px;
  max-height: 90vh;
  border-radius: 16px;
  background: #000;
}

.video-modal-close{
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 42px;
  color: #fff;
  cursor: pointer;
}


/* ===============================
   S3 상단 비디오 가로 2개 정렬 강제
   =============================== */

/* 데스크탑: 무조건 2개 가로 */
.sub-video-grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px;
}

/* ===============================
   상단 비디오 정확히 가운데 정렬
   =============================== */

/* 비디오 전체 감싸는 영역 */
.sub-video-wrap{
  display: flex;
  justify-content: center;   /* ⬅️ 가운데 정렬 핵심 */
}

/* 비디오 2개 들어있는 그리드 */
.sub-video-grid{
  max-width: 1400px;         /* 영상 덩어리 자체 폭 */
  width: 100%;
  margin: 0 auto;            /* ⬅️ 중앙 고정 */
  grid-template-columns: 1fr 1fr !important;
  gap: 32px;
}

/* ===============================
   S3 상단 영상: 가운데 + 2개 가로 "최종 강제"
   =============================== */
#p-s3-film .sub-video-wrap{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

#p-s3-film .sub-video-grid{
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 32px !important;

  justify-content: center !important; /* 혹시라도 남는 공간 정렬 */
}

/* ✅ 상단 영상 2개: 가운데 + 고급 카드 디자인 */
.sub-video-wrap{
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 28px 0 46px;
}

.sub-video-grid{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  justify-items: center;
}

.video-card{
  width: 100%;
}

.video-frame{
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: 22px;
  overflow: hidden;

  background: #0b1220;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 20px 60px rgba(2,6,23,.18);

  transform: translateZ(0);
}

.video-el{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 위에 살짝 그라데이션(텍스트 가독성) */
.video-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 260px at 20% 20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.15), transparent 40%, rgba(0,0,0,.35));
  pointer-events:none;
}

/* 재생 버튼 */
.video-play-btn{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);

  width: 78px;
  height: 78px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;

  font-size: 26px;
  font-weight: 900;
  color: #fff;

  background: rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
  z-index: 2;
}

.video-play-btn:hover{
  transform: translate(-50%,-50%) scale(1.06);
  background: rgba(255,255,255,.24);
}

/* 제목 뱃지 */
.video-badge{
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;

  padding: 10px 12px;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 900;
  color: rgba(255,255,255,.92);

  background: rgba(15,23,42,.40);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}

/* 재생 중이면 버튼 숨김 */
.video-frame.is-playing .video-play-btn{
  opacity: 0;
  pointer-events: none;
}

/* 모바일 */
@media (max-width: 900px){
  .sub-video-grid{ grid-template-columns: 1fr; }
  .video-frame{ height: 300px; }
}

.video-overlay{
  pointer-events: none;
}


/* =========================
   제품 서브 영상 정렬 보정
   ========================= */

.sub-video-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  justify-items: center;
}

.video-card{
  width: 100%;
  max-width: 520px;
}

/* ✅ 영상 1개여도 가운데 정렬 + 여러개면 자동으로 가로 배치 */
.sub-video-grid{
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* 카드 폭 고정(너무 넓게 안 퍼지게) */
.sub-video-grid .video-card{
  width: 100%;
  max-width: 520px;
  flex: 0 1 520px;
}

.sub-gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 900px){
  .sub-gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .sub-gallery-grid{ grid-template-columns: 1fr; }
}

.sub-video-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  justify-content: center;
}

.sub-video-grid:has(.video-card:only-child){
  grid-template-columns: minmax(0, 700px);
}

/* ✅ 상단 영상: 1개면 가운데(고정폭), 2개면 2열 */
.sub-video-wrap{
  display: flex !important;
  justify-content: center !important;
}

.sub-video-grid{
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;

  display: grid !important;
  gap: 24px !important;
  justify-content: center !important;
}

/* ✅ 1개일 때: 가운데 1열 (최대 700px) */
.sub-video-grid:has(.video-card:only-child){
  grid-template-columns: minmax(0, 700px) !important;
}

/* ✅ 2개 이상일 때: 2열 */
.sub-video-grid:not(:has(.video-card:only-child)){
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* ===============================
   ✅ 이미지 모달
   =============================== */
.img-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.img-modal img{
  max-width: 80%;
  max-height: 85%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  position: relative;
  z-index: 2;
}

/* 닫기 버튼 */
.img-modal-close{
  position: absolute;
  top: 25px;
  right: 40px;
  font-size: 48px;
  color: white;
  cursor: pointer;
  z-index: 100000;
}

/* 좌/우 버튼 */
.img-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: none;
  font-size: 36px;
  font-weight: bold;
  color: white;
  background: rgba(0,0,0,0.5);
  cursor: pointer;
  z-index: 100000;
  transition: 0.2s;
}

.img-nav:hover{
  background: rgb(255, 255, 255);
}

.img-prev{
  left: 40px;
}

.img-next{
  right: 40px;
}

/* 카운터 */
.img-counter{
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-weight: bold;
  background: rgba(0,0,0,0.4);
  padding: 8px 18px;
  border-radius: 20px;
  z-index: 100000;
}


/* =========================
   HOME HERO BANNER
========================= */
.hero{
  position: relative;
  width: 100%;
  height: 80vh;   /* 조금 더 크게 */
  margin-top: 0;
  border-radius: 0;  /* 둥근 모서리 제거 */
}



.hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

}

/* 글자 잘 보이게 어두운 그라데이션 */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.35) 45%,
    rgba(0,0,0,0.00) 100%
  );
  pointer-events:none;
}

.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 5vw, 64px);
  max-width: 760px;
}

.hero-eyebrow{
  color: rgba(255,255,255,0.95);
  font-weight: 700;
  margin: 0 0 10px;
}

.hero-title{
  color: #fff;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.15;
  margin: 0 0 16px;
  font-weight: 800;
}

.hero-desc{
  color: white;
  margin: 0;
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.6;
}

/* 모바일에서 높이/여백 살짝 조정 */
@media (max-width: 640px){
  .hero{
    height: 420px;
    border-radius: 12px;
  }
}

.header{
  /* fixed 아님 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: transparent;  /* 배경 제거 */
}

.hero-overlay{
  padding-top: 140px;  /* 메뉴 높이만큼 밀기 (100~140px 조절) */
}

/* HOME 히어로를 메뉴 바로 밑까지 올리기 */

/* HOME일 때만 #content 위여백 제거 */
body.is-home #content{
  margin-top: 0 !important;
}

/*  혹시 hero 위에 남는 여백 방지 */
body.is-home #home{
  padding-top: 0 !important;
  margin-top: 0 !important;
}




/* 섹션 show/hide용 */
.page-section { display: none; }
.page-section.is-active { display: block; }

/* HOME 퀵버튼 영역: 원래처럼 아래쪽으로 */
.home-quick-section{
  padding: 60px 0 90px;
}

.home-quick-wrap{
  position: relative;
  z-index: 5;          /* 배경(orbs) 위로 */
  width: min(980px, 92%);
  margin: 0 auto;
  display: grid;
  gap: 22px;
}

.home-quick{
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* 원 버튼이 혹시 숨겨지는 경우 방지 */
.quick-bubble{
  position: relative;
  z-index: 6;
  cursor: pointer;
}


/* 헤더 고정 */
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
}

/* 고정 헤더 때문에 본문이 가려지지 않게 여백 확보*/
#content{
  padding-top: 90px; 
}

/* HERO 텍스트 완전 흰색 강제 적용 */


.hero-overlay,
.hero-overlay *{
  color: #ffffff !important;
  opacity: 1 !important;
}

/* 가독성 살리기 (추천) */
.hero-title,
.hero-desc,
.hero-eyebrow{
  text-shadow: 0 3px 8px rgba(0,0,0,0.6) !important;
}


/* 통합 메가메뉴 (전체 한 번에 펼침) */

.menu.mega-all{ position: relative; }

.menu.mega-all .main-nav{
  display:flex;
  gap:28px;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
}

/* 메가 패널 */
.menu.mega-all .mega-panel{
  position: fixed;
  left: 0;
  top: 90px; /* 헤더 높이에 맞게 조절 */
  width: 100%;
  background: #fff;
  padding: 46px 0 58px;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: .22s ease;
}

/* 메뉴영역에 마우스 올리면 전체 펼침 */
.menu.mega-all:hover .mega-panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.menu.mega-all .mega-inner{
  width: min(1200px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr 220px;
  gap: 60px;
}

/* 컬럼 타이틀 */
.menu.mega-all .mega-col h4{
  font-size:15px;
  font-weight:800;
  margin:0 0 16px;
  padding-bottom:8px;
  border-bottom:2px solid #2d5bff;
}

.menu.mega-all .mega-col a{
  display:block;
  text-decoration:none;
  color:#333;
  font-size:14px;
  margin-bottom:10px;
  transition:.18s ease;
}
.menu.mega-all .mega-col a:hover{
  color:#2d5bff;
  transform: translateX(4px);
}

/* 제품 컬럼 2단 */
.menu.mega-all .mega-2col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}


/* FIX: 메가메뉴 클릭 안되는 문제 해결*/

/* 예전 드롭다운/서브바 시스템 전부 비활성화 */
.sub-menu,
.sub-bar,
.has-sub::before,
.has-sub::after{
  display: none !important;
  content: none !important;
}

/* 헤더/메뉴 레이어 정리 */
.header{ z-index: 20000 !important; }
.menu.mega-all{ position: static !important; z-index: 20001 !important; }

/* 메가패널: 클릭 가능하게 강제 */
.menu.mega-all .mega-panel{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;

  top: 88px !important;

  width: 100vw !important;
  background: #fff !important;

  opacity: 0 !important;
  visibility: hidden !important;

  /*  핵심: 클릭되게 */
  pointer-events: none !important;

  transform: translateY(-10px) !important;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;

  z-index: 20000 !important;
}

/*  hover 시 활성화 */
.menu.mega-all:hover .mega-panel{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important; /*  클릭 활성화 */
  transform: translateY(0) !important;
}

/* 패널 안 링크가 무조건 클릭되게(레이어에 안 막히게) */
.menu.mega-all .mega-panel a{
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* 혹시 hero/overlay가 위에 덮는 경우 방지 */
.hero,
.hero::after,
.hero-overlay{
  pointer-events: none;
}

/* HEADER 바로 아래 hero 붙이기 */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* header 높이만큼 body에 패딩 */
body {
  margin: 0;
  padding-top: 90px; /* 헤더 실제 높이 맞게 조절 */
}

/* hero 위 빈공간 제거 */
#home {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.hero {
  margin-top: 0 !important;
}

/* FIX: 헤더 아래 흰공간(겹친 여백) 제거 최종
   - body padding-top / #content margin-top / #content padding-top
     겹쳐있던 것 전부 정리 */

:root{ --header-h: 100px; } /* 헤더 height가 100px 이라서 100으로 */

body{
  padding-top: 0 !important;   /* body에서 밀지 않기 */
}

#content{
  margin-top: 0 !important;    /* 추가로 내려가는 margin 제거 */
  padding-top: var(--header-h) !important;  /*여기서 딱 한 번만 밀기 */
}

/* HOME은 hero를 바로 보여주고 싶으면 padding도 제거 */
body.is-home #content{
  padding-top: 0 !important;
}

/* 혹시 HOME 섹션에 여백 남아있으면 제거 */
body.is-home #home,
body.is-home .hero{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 상단 메인 메뉴 글자 강제 Bold*/
.header .menu > ul > li > a,
.header .menu .main-nav > li > a{
  font-weight: 9000 !important;
  font-size: 20px !important;
  letter-spacing: -0.2px;
}

.header .menu > ul > li > a{
  font-family: "Pretendard", "Noto Sans KR", sans-serif !important;
  font-weight: 900 !important;
}


.menu .main-nav > li{
  margin-right: 50px;
}

.menu .main-nav > li:last-child{
  margin-right: 0;
}

/*  헤더 좌우 배치 정리 */

.header-inner{
  display: flex;
  justify-content: space-between; /* 로고 왼쪽 / 메뉴 오른쪽 */
  align-items: center;
  padding-left: 30px;
  padding-right: 60px;
}

/* 로고 영역 */
.logo-wrap{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* 로고 이미지 */
.logo-img{
  height: 45px;   /* 크기 조절 */
  width: auto;
}

/* 회사명 텍스트 */
.logo-text{
  font-size: 20px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.3px;
}


/* 헤더 좌우 완전 정렬 */

.header {
  padding: 0 !important;
}

.header-inner{
  display: flex !important;
  justify-content: space-between !important; /* 로고 왼쪽 / 메뉴 오른쪽 */
  align-items: center !important;
  width: 100%;
  padding: 0 40px !important;   /* 좌우 여백 조절 가능 */
}


.logo{
  margin: 0 !important;
}

.logo-wrap{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-text{
  font-size: 20px;
  font-weight: 800;
  color: #111;
  position: relative;
  top: -10px;   /*위로 살짝 올림  */
}

/* HEADER 완전 강제 정리*/

/* header 전체 */
.header{
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: #fff;
  z-index: 10000;
  padding: 0 40px !important; /* 좌우 여백 */
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* 내부 정렬 */
.header .header-inner{
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/*로고 absolute 제거 */
.header .logo{
  position: static !important;
  left: auto !important;
  top: auto !important;
}

/* 로고 + 회사명 묶음 */
.logo-wrap{
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  text-decoration: none;
}

/* 로고 이미지 */
.logo-img{
  height: 50px;
  width: auto;
}

/* 회사명 */
.logo-text{
  font-size: 18px;
  font-weight: 800;
  color: #222;
  position: relative;
  top: 10px;  /* 살짝 위로 */
}

/* 메뉴 스타일*/

.header .menu{
  margin-left: auto !important;
}

.header .menu ul{
  display: flex !important;
  gap: 60px;  /* 메뉴 간격 */
  list-style: none;
  margin: 0;
  padding: 0;
}

.header .menu ul li a{
  font-weight: 700 !important;
  font-size: 18px !important;
  text-decoration: none;
  color: #222;
}

/* 폰트 등록 */

@font-face {
  font-family: 'Cafe24Danjunghae';
  src: url('fonts/Cafe24Danjunghae-v2.0.woff2') format('woff2'),
       url('fonts/Cafe24Danjunghae-v2.0.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* 회사명에만 적용 */
.logo-text{
  font-family: 'Cafe24Danjunghae', sans-serif !important;
}


#home .biz-section .section-subtitle{
  font-size: 32px !important;  /* 원하는 크기로 조절 */
  font-weight: 700;
}


/* --- Scroll reveal base --- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* 모션 싫어하는 사람(접근성) 대응 */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; transform: none; opacity: 1; }
}

/* --- Section transition --- */
.page-section, main > div, .product-sub {
  animation: sectionFade 260ms ease;
}

@keyframes sectionFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* --- Mega menu smooth open --- */
.mega-panel {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.menu.mega-all:hover .mega-panel,
.menu.mega-all:focus-within .mega-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-panel{
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.92);
}

.header{
  transition: all .3s ease;
}
.header.scrolled{
  height:70px !important;
  box-shadow:0 5px 20px rgba(0,0,0,.08);
}


/* ✅ 개요 섹션 제목(사업 수행 프로세스/비전·미션/적용 산업 분야 등) 크게 */
#overview .ov-subtitle{
  font-size: 25px !important;   /* 원하면 22~28 사이로 조절 */
  font-weight: 800 !important;
  letter-spacing: -0.3px;
  margin: 28px 0 14px;
}

/* ✅ 고급스러운 표면(유리) 톤 + 그림자 통일 */
:root{
  --line: rgba(15,23,42,.10);
  --shadow: 0 18px 60px rgba(2,6,23,.10);
  --shadow2: 0 10px 28px rgba(2,6,23,.08);
  --radius: 20px;
}

.ov-card,
.overview-info,
.overview-box,
.ov-vm-card,
.p-card,
.cert-img,
.history-board,
.product-board,
.partner-board,
#contact .contact-card{
  background: rgba(255,255,255,.84) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow2) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* ✅ hover 통일: 살짝 올라오고 그림자 깊어짐 */
.ov-card:hover,
.ov-vm-card:hover,
.p-card:hover,
.cert-img:hover{
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}


/* ✅ 포인트 컬러/링크 톤 더 또렷하게 */
a:hover{ color:#1d4ed8; }

#contact button[type="submit"]{
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9) !important;
  box-shadow: 0 14px 36px rgba(29,78,216,.35) !important;
}
#contact button[type="submit"]:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 55px rgba(29,78,216,.45) !important;
}


#scrollProgress{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 999999;
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9);
}

#typeTitle::after{
  content:"";
  display:inline-block;
  width: 10px;
  height: 1em;
  margin-left: 6px;
  border-right: 2px solid rgba(255,255,255,.9);
  animation: blink .8s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }


.mega-panel{
  opacity: 0;
  transform: translateY(10px);
  transition: all .2s ease;
}

.menu.mega-all:hover .mega-panel{
  opacity: 1;
  transform: translateY(0);
}


.cert-img img{
  transition: transform .25s ease;
}

.cert-card:hover .cert-img img{
  transform: scale(1.05);
}


.header{
  transition: background .3s ease, backdrop-filter .3s ease;
}

.header.scrolled{
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
}

.kpi-num{
  font-size: 42px;
  font-weight: 800;
  color:#0f2f5f;
}

.kpi-label{
  font-size:14px;
  color:#6b7280;
  letter-spacing: .5px;
}


.ov-card:hover,
.p-card:hover,
.cert-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}


/* 연혁: 스크롤 등장 애니메이션 */
.timeline .tl-item{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

.timeline .tl-item.is-in{
  opacity: 1;
  transform: translateY(0);
}

/*약간 더 협력사 느낌: 등장할 때 레일/닷도 같이 */
.timeline .tl-item .tl-dot{
  transform: scale(0.85);
  transition: transform .7s ease;
}
.timeline .tl-item.is-in .tl-dot{
  transform: scale(1);
}


.biz-card {
  border:1px solid #eaeaea;
  background:#fff;
}

/* 로고 옆 텍스트(한글/영문) */
.logo-title {
  margin: 0;
  line-height: 1.15;
}

/* 영문만 작게 */
.logo-title-en {
  display: inline-block;
  font-size: 0.80em;   /* 원하는 크기로 조절 (0.65~0.85 추천) */
  font-weight: 400;    /* 필요하면 400/500/700 조절 */
  letter-spacing: 0.06em; /* 선택: 영문 간격 살짝 */
  opacity: 0.9;        /* 선택: 살짝 연하게 */
}

/* 로고 hover 색상 변경 제거 */
.logo-wrap,
.logo-wrap:visited {
  color: inherit;
  text-decoration: none;
}

.logo-wrap:hover,
.logo-wrap:active {
  color: inherit;
  text-decoration: none;
}

/* 모든 섹션 제목 크기 강제 조정 */
main h2 {
  font-size: 30px !important;
}


/* 연혁 - 큰 년도 줄이기 */
.tl-year {
  font-size: 22px !important;   /* 현재보다 작게 */
  font-weight: 600;
  opacity: 0.8;
}

.timeline .tl-date {
  font-size: 18px !important;
  font-weight: 800 !important;
}


/* 연혁 - 오른쪽 설명 크게 */
.tl-text {
  font-size: 18px !important;   /* 크게 */
  font-weight: 500;
}

/* 내부사진 가로형 강제 변경 */
#inside .photo {
  aspect-ratio: 16 / 9 !important;   /* 가로 비율 */
  height: auto !important;
}

#inside .photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 내부사진 섹션 전체 간격 줄이기 */
#inside {
  padding-top: 60px !important;
  padding-bottom: 40px !important;
}

/* 각 지점 섹션 간 간격 줄이기 */
#inside .branch {
  margin-bottom: 30px !important;
}

/* 혹시 기본 section padding이 크면 덮어쓰기 */
#inside section {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* =========================================
   ✅ 내부사진(광주/김해) 간격 딱 붙이기 - 최종 강제
   ========================================= */

/* 섹션 위아래 여백 최소화 */
#inside{
  padding-top: 20px !important;
  padding-bottom: 10px !important;
  margin-top: 0 !important;
}

/* 지점 블록 사이 간격 거의 제거 */
#inside .branch{
  margin: 0 auto 20px !important;
}

/* 내부에 혹시 숨은 여백까지 전부 컷 */
#inside .branch-media,
#inside .branch-info{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 내부사진 바로 위쪽 여백 제거 */
#inside h2{
  margin-top: 0 !important;
}


/* =========================================
   ✅ 내부사진 레이아웃 강제 재정렬 (광주/김해)
   ========================================= */

/* 사진 전체적으로 크게 */
#inside .inside-grid {
  width: 110% !important;
}

#inside .photo img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* =========================
   광주 → 왼쪽으로 이동
   ========================= */
.branch--gwangju .branch-media {
  margin-left: -80px !important;   /* 숫자 키우면 더 왼쪽 */
}

.branch--gwangju .inside-grid {
  transform: scale(1.05);   /* 살짝 확대 */
}


/* =========================
   김해 → 오른쪽으로 이동
   ========================= */
.branch--gimhae .branch-media {
  margin-right: 120px !important;  /* 숫자 키우면 더 오른쪽 */
}

.branch--gimhae .inside-grid {
  transform: scale(1.05);
}

/* =========================================
   ✅ 내부사진(광주/김해) - 사진 크게 + 위치 이동 (최종)
   ========================================= */

/* 1) 사진 영역 자체를 키움 (그리드/이미지 전체 영향) */
#inside .branch .branch-media{
  width: 100% !important;
  transform: scale(1.5) !important;         /* ✅ 사진 전체 크기 */
  transform-origin: center center !important;
}

/* 2) 사진 안 이미지가 꽉 차게 */
#inside .branch .branch-media img{
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
}




/* ✅ 내부사진(광주/김해) : 위 여백 + (사진+글) 같이 이동 + 김해 강제 적용 (맨 아래 복붙) */

/* 0) 섹션 위에 살짝 공간 */
#inside{
  padding-top: 40px !important;   /* 위 여백 */
}

/* 1) 공통: branch 자체를 기준으로 움직이게(사진+글 같이) */
#inside .branch{
  margin-top: 24px !important;
}

/* 2) 사진 크게(공통) */
#inside .branch .branch-media{
  transform: scale(1.10) !important;
  transform-origin: center center !important;
}






/* 7) 글도 같이 “옆으로” 가게(안전하게) */
#inside .branch .branch-info{
  transform: translateX(0) !important; /* branch를 움직이니까 글 따로 안 밀림 */
}

/* ✅ 내부사진(지점) 섹션 강제 레이아웃/이동 */
#inside {
  padding-top: 24px; /* 위에도 살짝 공간 */
}

#inside .branch{
  display: flex;
  align-items: center;
  gap: 48px;          /* 사진-글 간격 */
  margin: 28px auto;  /* 위아래 간격 */
  max-width: 1200px;
}

/* 사진/텍스트 비율 */
#inside .branch-info  { flex: 1; }



/* 모바일에서는 다시 가운데로 */
@media (max-width: 900px){
  #inside .branch{
    flex-direction: column;
    gap: 16px;
    margin-left: auto !important;
  }
  #inside .branch--gimhae{
    flex-direction: column;
  }
}






/* 혹시 .branch가 flex가 아니라서 order가 안 먹으면 flex도 강제 */
#inside .branch {
  display: flex !important;
  align-items: center;
  gap: 60px;
}

/* 너가 말한 “위에도 살짝 공간” */
#inside .branch { 
  padding-top: 30px; 
}


/* ===========================
   내부사진 - 한 줄 정리
=========================== */

#inside {
  padding-top: 40px;
}

#inside .branch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  max-width: 1200px;
  margin: 80px auto;
}



#inside .branch-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* 글 영역 */
#inside .branch-info {
  flex: 1;
}


/* =========================================
   ✅ 내부사진(#inside) 최종 고정(리셋)
   ========================================= */

/* #inside 안에서만 grid/transform/이상한 margin 전부 무력화 */
#inside .branch{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;

  max-width: 1200px !important;
  margin: 60px auto !important;
  gap: 60px !important;

  transform: none !important;
}


#inside .branch-info{
  flex: 1 !important;
  width: auto !important;
  margin: 0 !important;
  transform: none !important;
}



/* 이미지 꽉 */
#inside .branch-media img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}


/* ✅ 내부사진: 공통 한 줄 정리 + 김해만 반대로 (무조건 적용) */
#inside .branch{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 60px !important;

  max-width: 1200px !important;
  margin: 60px auto !important;

  /* 혹시 예전에 grid/transform 남아있으면 싹 제거 */
  grid-template-columns: unset !important;
  transform: none !important;
}

#inside .branch-info { flex: 1 !important; width: auto !important; }

/* 이미지 꽉 */
#inside .branch-media img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ✅ #inside 안에서 'branch'가 섞여있을 때: 마지막 지점을 김해로 보고 반전 */
#inside .branch:last-of-type{
  flex-direction: row-reverse !important;
}



#inside .branch{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  max-width:1200px;
  margin:80px auto;
}

#inside .branch-media{ flex:0 0 60%; }
#inside .branch-info{ flex:1; }


/* =========================
   ✅ #inside 지점 섹션 최종 고정
   ========================= */
#inside .branch{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 60px !important;

  max-width: 1200px !important;
  margin: 70px auto !important;

  /* 이전 grid/transform 무력화 */
  grid-template-columns: unset !important;
  transform: none !important;
}

#inside .branch-media{
  flex: 0 0 60% !important;
  width: 60% !important;
  margin: 0 !important;
  transform: none !important;
}

#inside .branch-info{
  flex: 1 !important;
  margin: 0 !important;
  transform: none !important;
  text-align: left !important;
}


#inside .branch-title{
  display: inline-block;
  font-size: 34px;
  font-weight: 900;
  padding-bottom: 8px;
  border-bottom: 3px solid #4c7fd8;
}

#inside .branch-desc{
  margin-top: 16px;
  line-height: 1.8;
  font-size: 15px;
  color: #5f6f86;
  white-space: normal !important;   /* ✅ 줄바꿈 허용 */
  word-break: keep-all;
}


/* =========================
   ✅ #inside 지점 레이아웃 최종 고정
   ========================= */
#inside .branch{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 60px !important;

  max-width: 1200px !important;
  margin: 70px auto !important;

  /* 예전 grid/transform 싹 무력화 */
  grid-template-columns: unset !important;
  transform: none !important;
}

#inside .branch-media{
  flex: 0 0 60% !important;
  width: 60% !important;
  margin: 0 !important;
  transform: none !important;
  min-width: 0;
}

#inside .branch-info{
  flex: 1 !important;
  margin: 0 !important;
  transform: none !important;
  min-width: 0;
  text-align: left !important;
}

/* ✅ 김해만 반대로 (HTML도 이미 반대로지만, 혹시 덮이면 이걸로 고정) */
#inside .branch--gimhae{
  flex-direction: row-reverse !important;
}

/* 이미지 꽉 */
#inside .branch-media img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover;
}

/* 설명 줄바꿈은 정상으로 */
#inside .branch-desc{
  white-space: normal !important;
  word-break: keep-all;
}

/* 모바일에서는 세로 */
@media (max-width: 900px){
  #inside .branch,
  #inside .branch--gimhae{
    flex-direction: column !important;
    gap: 18px !important;
  }
  #inside .branch-media{
    width: 100% !important;
    flex-basis: auto !important;
  }
}


#inside .inside-grid{
  width: 100% !important;
  display: block !important;
}
#inside .photo.big-left{
  grid-column: auto !important;
  grid-row: auto !important;
}

/* ✅ 내부사진: 사진 상단과 제목 상단 라인 맞추기 + 간격 조금 벌리기 */
#inside .branch{
  align-items: flex-start !important;  /* ⭐ 상단 정렬 */
  gap: 130px !important;                /* ⭐ 사진-글 간격 (60~90 조절) */
}

#inside .branch-info{
  padding-top: 0 !important;           /* ⭐ 내려가던 여백 제거 */
  margin-top: 0 !important;
}

#inside .branch-title{
  margin-top: 0 !important;            /* ⭐ 제목이 위로 딱 붙게 */
  line-height: 1.1;                    /* 선택: 제목 높이 안정 */
}

#inside .branch-info{
  margin-top: -30px !important;
}


/* 내부사진 더 크게 */
#inside .branch-media{
  flex: 1.8 !important;   /* ⭐ 기본 1 → 1.3~1.8 조절 가능 */
}

#inside .branch-info{
  flex: 1 !important;
}

/* 인사말 서명 오른쪽 정렬 */
#greeting .greeting-sign{
  text-align: right;
}


/* =========================
   🔥 그라데이션 강하게 덮어쓰기
========================= */

/* 1️⃣ 히어로/배너 오버레이 더 진하게 */
.hero-overlay{
  background: linear-gradient(
    90deg,
    rgba(10, 30, 70, 0.70) 0%,
    rgba(20, 70, 160, 0.70) 50%,
    rgba(10, 30, 70, 0.70) 100%
  ) !important;
}


/* 2️⃣ 혹시 section 배경에 그라데이션 쓴 경우 강하게 */
.page-section{
  background: linear-gradient(
    180deg,
    #eef3ff 0%,
    #cfdfff 60%,
    #b5ceff 100%
  ) !important;
}

body{
  background: linear-gradient(
    180deg,
    #f7f9ff 0%,
    #edf2ff 40%,
    #e6eeff 70%,
    #dee9ff 100%
  ) !important;
}

.header {
  position: relative;
  z-index: 1000;
}

.mega-panel {
  position: absolute;
  top: 100%;   /* header 바로 아래 */
  left: 0;
  width: 100%;
}


/* =========================
   ✅ 메가메뉴 + 헤더 아래 빈공간 FIX (최종)
   ========================= */

/* 1) 헤더는 fixed 유지 + 높이 변수 통일 */
:root { --header-h: 100px; }  /* 너 헤더 height:100px 이라서 100 */

/* 2) 본문은 딱 한 번만 내려라 (중복 제거) */
body { padding-top: 0 !important; }
#content { margin-top: 0 !important; padding-top: var(--header-h) !important; }

/* HOME은 히어로가 바로 붙게 */
body.is-home #content { padding-top: 0 !important; }

/* 3) 메가패널은 'fixed'로 유지 (absolute로 바꾸지 말고)
      헤더 바로 아래로만 딱 붙여라 */
.menu.mega-all .mega-panel{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--header-h) !important;     /* ✅ 헤더 바로 아래 */
  width: 100vw !important;

  margin: 0 !important;

  /* 패널이 열렸을 때 공간 밀어내지 않게 */
  transform: translateY(-10px) !important;
}

/* 4) 혹시 내부에서 absolute 선언한 mega-panel 무력화 */
.mega-panel{
  top: var(--header-h) !important;
}

.header { position: relative; z-index: 1000; }

/* nav 기준으로 드롭다운이 붙도록 */
.menu.mega-all { position: relative; }

/* ✅ 기본은 숨김 */
.menu.mega-all .mega-panel{
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;

  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

/* ✅ 마우스 올리거나(hover), 키보드 포커스 들어오면(focus-within) 열림 */
.menu.mega-all:hover .mega-panel,
.menu.mega-all:focus-within .mega-panel{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.header{
  top: 0; left: 0;
  width: 100%;
  background: rgba(255,255,255,0.92);
  z-index: 1000;
}

/* 배너가 헤더 뒤로 올라가게 */
.hero { position: relative; }

/* 🔥 상단 흰 공백 강제 제거 */

html, body {
  margin: 0 !important;
  padding: 0 !important;
}

main, #content, #home {
  margin: 0 !important;
  padding: 0 !important;
}

.header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 배너 위쪽 여백 제거 */
.hero {
  margin: 0 !important;
  padding: 0 !important;
}

.hero-img {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}

/* 🔥 메뉴바와 서브메뉴 사이 틈 제거 */

.header {
  position: relative;
  z-index: 1000;
}

/* 서브메뉴를 메뉴바에 딱 붙이기 */
.mega-panel {
  top: 100% !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* ✅ 메뉴바 아래 서브메뉴: 공백/비침 제거 + 흰색 꽉 */
.header { 
  position: relative;
  z-index: 9999;
  background: #fff;
}

.menu { 
  position: relative;  /* mega-panel 기준점 */
}

/* 서브메뉴 패널을 완전 밀착 + 완전 불투명 흰색 */
.mega-panel{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;

  top: calc(100% - 1px) !important; /* 1px까지 딱 붙임 */
  margin: 0 !important;
  padding: 0 !important;

  background: #fff !important;  /* ✅ 비침 제거 */
  opacity: 1 !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important; /* ✅ blur/유리효과 쓰면 배너 비침 */
}


.header-inner { padding-bottom: 0 !important; margin-bottom: 0 !important; }
nav.menu { padding-bottom: 0 !important; margin-bottom: 0 !important; }


/* =========================
   ✅ 메뉴바 + 서브메뉴바 틈 0px (최종)
   ========================= */

/* 1) 헤더 높이 통일 (너 지금 100px 쓰고 있으니 100) */
:root { --header-h: 100px; }

/* 2) 헤더는 고정 + 배경 완전 흰색 */
.header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--header-h) !important;
  background: #fff !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  z-index: 20000 !important;
}

/* 3) 메뉴/내부 여백 때문에 틈 생기는 거 방지 */
.header-inner,
.menu{
  margin: 0 !important;
  padding: 0 !important;
}

/* 4) 서브메뉴(메가패널)를 헤더 바닥에 "고정"으로 딱 붙임 */
.menu.mega-all .mega-panel{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--header-h) - 1px) !important; /* ✅ 1px 겹쳐서 틈 완전 제거 */
  width: 100vw !important;

  margin: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;

  background: #fff !important;      /* ✅ 배너 비침 방지 */
  backdrop-filter: none !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.08) !important;
  z-index: 19999 !important;
}

/* 5) hover/focus로 열릴 때만 클릭 가능 */
.menu.mega-all .mega-panel{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(0) !important;
  transition: opacity .18s ease, visibility .18s ease !important;
}

.menu.mega-all:hover .mega-panel,
.menu.mega-all:focus-within .mega-panel{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 🔥 로고 위치 복구 */

.header-inner{
  display: flex !important;
  align-items: center !important;   /* 세로 가운데 */
  justify-content: space-between !important;
  height: var(--header-h) !important;
  padding: 0 40px !important;       /* 좌우 여백 */
}

/* 로고 왼쪽 고정 */
.logo{
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 로고 이미지 정렬 */
.logo img{
  display: block !important;
  height: 48px; /* 원래 쓰던 로고 높이 맞춰서 조정 가능 */
  width: auto;
}


/*  스크롤해도 메뉴 높이 고정 */

.header,
.header.scrolled,
body.scrolled .header {  /* 네 원래 높이 값 */
  padding: 0 !important;
}

/* 내부 라인 높이도 같이 고정 */
.header-inner{
  height: 100px !important;
}

.main-nav a{
  line-height: 100px !important;
}


/* 헤더 실제 높이랑 동일하게 맞춰줘 (지금 너는 100px 쓰고 있어서 100) */
:root{ --header-h: 100px; }

/* 헤더는 무조건 고정 + 두께 고정(스크롤 얇아짐 방지) */
.header,
.header.scrolled{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;

  height: var(--header-h) !important;
  background: #fff !important;

  /* 얇아지는 효과/그림자/라인 다 무시해도 됨 */
  box-shadow: none !important;
  border: 0 !important;

  z-index: 999999 !important;
}

/* 헤더 내부도 높이 고정 */
.header-inner{
  height: var(--header-h) !important;
  align-items: center !important;
}

/* 핵심: 본문은 헤더 높이만큼 "body에서 딱 한 번만" 내려준다 */
html, body{
  margin: 0 !important;
  padding: 0 !important;
}

/* 기존에 #content가 또 밀거나(패딩/마진) 당기는 것 전부 무력화 */
#content{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 로고 원위치(헤더 왼쪽) - absolute로 날아간 거 복구 */
.header .logo{
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
}

/* 혹시 메뉴/로고 정렬이 꼬이면 기본 정렬만 잡아주기 */
.header .header-inner{
  display: flex !important;
  justify-content: space-between !important;
}


/* 메뉴바 높이 줄이기 */

:root{
  --header-h: 70px;   /* ← 100에서 80으로 줄임 */
}

/* 헤더 높이 */
.header,
.header.scrolled{
  height: var(--header-h) !important;
}

/* 내부 정렬 */
.header-inner{
  height: var(--header-h) !important;
}


/* 메뉴 텍스트 세로 가운데 맞춤 */
.main-nav a{
  line-height: var(--header-h) !important;
}

/* 헤더 고정은 유지 */
header{
  position: sticky;
  top: 0;
  z-index: 9999;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* 숨길 때 */
header.is-hidden{
  transform: translateY(-100%);
}

/*  인사말 사진 크게 */

.greeting-photo img{
  width: 100%;        /* 컨테이너 꽉 채움 */
  max-width: 500px;   /* 최대 크기 */
  height: auto;
}


/*  헤더(메뉴바) 스크롤해도 안 사라지게: style.css 맨 아래에 붙여넣기 */
.header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;

  /* 사라지게 만드는 효과들 강제 무력화 */
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;

  /* 헤더 배경 없으면 내용이 비쳐보여서 흰색 기본값 */
  background: #fff !important;
}



/* 위에 있는 스크롤 진행바가 헤더보다 위로/아래로 꼬이면 대비 */
#scrollProgress{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 100000 !important;
}

/*  인사말 사진 세로 길게 */
.greeting-photo img{
  width: 100% !important;
  height: 500px !important;  /* ← 숫자 키우면 더 길어짐 (500~600도 가능) */
  object-fit: cover !important;
  border-radius: 20px;

  /*  모달 열리면 헤더 숨김 */
.hide-header .header{
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none;
}
}

/*  배경 강제 덮어쓰기 */
html, body{
  background: linear-gradient(
    180deg,
    #f8fafc 0%,
    #eef2f7 40%,
    #e6edf5 100%
  ) !important;
}

/* 맨 위 스크롤 진행바 보이게/작동하게 */
#scrollProgress{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 4px !important;          /* ← 이게 없으면 안 보일 수 있음 */
  width: 0%;
  z-index: 100000 !important;
  background: linear-gradient(90deg, #00d2ff, #3a7bd5) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* 사진/영상 모달 볼 때는 진행바도 같이 숨기기(방해 안 되게) */
.hide-header #scrollProgress{
  opacity: 0 !important;
}


#scrollProgress{
  display: none !important;
}

/* 메뉴바 아래 빈틈(하얀 띠) 없애기: fixed → sticky로 전환 */
.header{
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;

  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* fixed 쓸 때 넣었던 여백(틈)의 원인 제거 */
body{
  padding-top: 0 !important;
}

/* 첫 섹션/배너가 위에서 뜨는 여백 제거(혹시 남아있을 때 대비) */
#content,
#home,
.page-section,
.hero{
  margin-top: 0 !important;
  padding-top: 0 !important;
}



/* 1) 카드 자체 hover 그림자/배경 제거 */
.cert-card:hover{
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
}

/* 2) hover 때 뒤에 깔리는 가상요소(박스) 제거 */
.cert-card::before,
.cert-card::after,
.cert-card:hover::before,
.cert-card:hover::after{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

/* 3) 이미지 영역에 걸린 오버레이/그림자도 같이 제거(있을 경우) */
.cert-img::before,
.cert-img::after,
.cert-img:hover::before,
.cert-img:hover::after{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}


html, body { overflow-y: auto; }

/* ====== FIX: 인사말(#greeting) 스크롤 드르륵/끝까지 안 내려감 ====== */

/* 1) 페이지 전체 스크롤을 막아둔 설정이 있으면 해제 */
html, body{
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
}

/* 2) 스크롤 스냅/부드러운 스크롤이 드르륵 유발할 때가 많아서 끔 */
html, body, #content{
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

/* 3) main 컨테이너가 100vh/overflow로 잘라먹는 경우가 많아서 풀어줌 */
#content{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* 4) 인사말 섹션 자체도 강제 정상화 */
#greeting{
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

/* 5) 모바일(iOS)에서 내부 스크롤이 생기면 “드르륵” 체감 심해서 방지 */
#greeting *{
  -webkit-overflow-scrolling: auto !important;
}

/* ===== 스크롤/인사말 FIX (최소) ===== */
html, body { overflow-y: auto !important; height: auto !important; }

#content { overflow: visible !important; height: auto !important; }

/* 인사말은 숨기지 말고, 활성화될 때 보이게 */
#greeting { display: block !important; height: auto !important; overflow: visible !important; }




/* (혹시 page-section도 쓰는 중이면 같이 맞춰줌) */
.page-section{ display: none !important; }
.page-section.is-active{ display: block !important; }



/* 기본은 무조건 숨김 (예전에 display:block !important 들어간 거 무력화) */
#greeting{
  display: none !important;
}

/* "지금 선택된 섹션"일 때만 보이게 */
#content > #greeting.is-active{
  display: block !important;
}

/* 혹시 is-active가 section에 붙는 구조면 이것도 같이 */
#content #greeting.page-section.is-active{
  display: block !important;
}

/* 섹션 표시 로직: 활성 섹션만 보이게 (최종 고정) */
#content > div{ display: none !important; }
#content > div.is-active{ display: block !important; }


/* 페이지 섹션 공통 상단 여백 */
.page-section{
  padding-top: 130px !important;   /* 60~100px 사이에서 조절 */
}

/* 혹시 div로 만든 섹션이면 이것도 같이 */
#content > div{
  padding-top: 130px !important;
}

.footer{
  background: #f1f5fa !important;   /* 기존보다 살짝 밝게 */
  border-top: 1px solid #dfe6ee !important;
  box-shadow: none !important;
  color: rgba(15,23,42,.75);
}



/* =========================
   ✅ RESPONSIVE FINAL PATCH
   (CSS 맨 아래에 그대로 붙이기)
   ========================= */

/* 기본: 모바일에서 글자 깨짐 방지 */
html, body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

/* 헤더 레이아웃 */
.header { width: 100%; }
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

/* 햄버거 버튼 */
.nav-toggle{
  display:none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.92);
  border-radius: 12px;
  cursor: pointer;
  align-items:center;
  justify-content:center;
  padding: 10px;
}
.nav-toggle span{
  display:block;
  width: 22px;
  height: 2px;
  margin: 4px 0;
  background: rgba(15,23,42,.85);
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}

/* 모바일 메뉴 패널(숨김 상태) */
@media (max-width: 900px){

  /* 로고/메뉴가 공간을 더 먹지 않게 */
  .logo-img{ height: 42px !important; }
  .logo-text{ font-size: 16px !important; top: 0 !important; }

  .nav-toggle{ display:flex; }

  /* 상단 메뉴 줄바꿈으로 글자 세로 찢어지는 문제 차단 */
  .header .menu ul,
  .menu .main-nav{
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  /* 기존 가로 메뉴는 모바일에서 “패널”로 바꿈 */
  .header .menu{
    position: fixed !important;
    left: 0; right: 0;
    top: var(--header-h, 70px);
    z-index: 99998;
    background: rgba(255,255,255,.98);
    border-top: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 16px 50px rgba(2,6,23,.12);
    padding: 14px 16px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: .18s ease;
  }

  /* 메뉴 열림 상태 */
  body.nav-open .header .menu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* 메뉴 리스트를 세로로 */
  .header .menu ul,
  .menu .main-nav{
    display:flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  /* 메뉴 링크를 버튼처럼 */
  .header .menu ul li a,
  .menu .main-nav > li > a{
    display:block !important;
    line-height: 1.2 !important;
    padding: 12px 12px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: rgba(15,23,42,.9) !important;
    background: rgba(15,23,42,.04);
  }

  .header .menu ul li a:hover{
    background: rgba(29,78,216,.08);
    color: #1d4ed8 !important;
  }

  /* 페이지 좌우 패딩 (모바일에서 숨 막히는 거 방지) */
  #content, main{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  /* 카드/그리드들: 자동 1열/2열로 자연스럽게 */
  .overview-grid,
  .ov-vm-grid,
  .product-cards-grid,
  .sub-gallery-grid{
    grid-template-columns: 1fr !important;
  }

  /* 비디오/이미지 영역 높이 과한 것 완화(모바일에서 덜 답답) */
  .video-frame{ height: 260px !important; }

  /* 섹션 제목이 너무 위로 붙는 느낌이면 살짝 내려주기 */
  main h2{ margin-top: 22px !important; }
}

/* 햄버거 애니메이션(열렸을 때 X) */
body.nav-open .nav-toggle span:nth-child(1){
  transform: translateY(6px) rotate(45deg);
}
body.nav-open .nav-toggle span:nth-child(2){
  opacity: 0;
}
body.nav-open .nav-toggle span:nth-child(3){
  transform: translateY(-6px) rotate(-45deg);
}

/*  사진/영상 모달 열리면 헤더 숨기기 + 모달을 최상단으로 */
body.modal-open .header{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-120%) !important;
}

/*  모달이 헤더보다 무조건 위에 오게 */
.img-modal,
.video-modal{
  z-index: 9999999 !important;
}


html, body { height: 100%; }

body{
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(820px 520px at 85% 78%, rgba(14,165,233,.08), transparent 62%),
    linear-gradient(180deg, #f8fafc 0%, #f3f6fb 40%, #eef2f8 100%) !important;
  background-attachment: fixed !important;
  color: #0f172a;
  overflow-x: hidden;
  position: relative;
}

/* 너 HTML에 있는 bg-orbs를 "진짜 은은한 빛"으로 */
.bg-orbs{
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  opacity: .9;

  background:
    radial-gradient(circle at 22% 25%, rgba(99,102,241,.10) 0%, transparent 55%),
    radial-gradient(circle at 78% 32%, rgba(59,130,246,.09) 0%, transparent 58%),
    radial-gradient(circle at 70% 82%, rgba(14,165,233,.07) 0%, transparent 60%);
  filter: blur(55px);
}

/* 기술기업 느낌: 아주 미세한 그리드(없어도 됨) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .25;
  background-image:
    linear-gradient(to right, rgba(15,23,42,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* 섹션이 배경 덮지 않게 */
#content,
.page-section,
#home,
#greeting,
#overview,
#history,
#org,
#inside,
#main-product,
#partners,
#certificate,
#contact{
  background: transparent !important;
}


/* 텍스트 가독성 */
.section-lead{ color: rgba(30,41,59,.78); }
p,li{ color: rgba(30,41,59,.86); }


/* ===== 인사말 텍스트에 좌측 라인(브로슈어 느낌) ===== */
#greeting .greeting-text{
  border-left: 4px solid rgba(59,130,246,.35);
  padding-left: 26px;
}

/* ===== 배경 디테일(미세 그리드 + 노이즈) ===== */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .18;
  background-image:
    linear-gradient(to right, rgba(15,23,42,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.06) 1px, transparent 1px);
  background-size: 52px 52px;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .06; /* 아주 약하게 */
  background-image: radial-gradient(rgba(15,23,42,.8) 0.6px, transparent 0.6px);
  background-size: 6px 6px;
}

/* ===== 은은한 등장 모션(너무 튀지 않게) ===== */
.reveal,
.kpi-card, .biz-card, .p-card, .cert-card, .ov-card{
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: no-preference){
  .reveal,
  .kpi-card, .biz-card, .p-card, .cert-card, .ov-card{
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .55s ease, transform .55s ease;
  }
  .is-in{
    opacity: 1 !important;
    transform: none !important;
  }
}

#content h2{
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
  margin-bottom: 14px;
}

#content h2::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: 0;
  width: 86px;
  height: 3px;
  border-radius: 3px;
  background: rgba(59,130,246,.65);
}

#content .section-lead{
  max-width: 920px;
  margin: 10px auto 40px;
}

/* 인사말 2열을 같은 높이로 맞추고, 사진을 그 높이에 꽉 채움 */
#greeting .greeting-wrap{
  align-items: stretch !important; /* 핵심: 양쪽 높이 동일 */
}

/* 사진 박스가 wrap 높이를 그대로 따라가게 */
#greeting .greeting-photo{
  height: auto !important;
  align-self: stretch !important;  /* wrap 높이만큼 늘어남 */
  display: flex;
}

/* 사진이 박스를 꽉 채우게 */
#greeting .greeting-photo img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

#greeting .greeting-photo{
  flex: 0 0 520px !important; /* 480~560에서 취향대로 */
  width: 520px !important;
}

/* 인사말 상단 제목만 크게 */
#greeting .greeting-title{
  font-size: 21px;      /* ← 18~24 사이에서 조절 */
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

/* ✅ 햄버거 버튼 기본: PC에선 숨김 */
.nav-toggle{ display:none; }

/* ✅ 모바일에서만 버튼 보이게 + 클릭 되게 */
@media (max-width:768px){
  .header{ position: fixed; top:0; left:0; right:0; z-index: 9999; }
  .nav-toggle{
    display:block;
    width:44px; height:44px;
    border:0; background:transparent;
    position: relative;
    z-index: 10000;  /* ← 클릭 최우선 */
    cursor:pointer;
  }
  .nav-toggle span{
    display:block;
    height:2px;
    margin:6px 0;
    background:#0f172a;
    border-radius:2px;
  }

  /* 배경 장식이 클릭 막는 거 방지 */
  .bg-orbs{ pointer-events:none; }

  /* ✅ 모바일 메뉴 패널: 기본은 숨김 */
  nav.menu.mega-all{
    position: fixed;
    left:0; right:0;
    top:72px;
    height: calc(100vh - 72px);
    background:#fff;
    overflow:auto;
    padding:14px;
    z-index: 9998;

    display:none;
  }

  /* ✅ 토글 열렸을 때만 보이게 */
  body.nav-open nav.menu.mega-all{
    display:block;
  }

  /* 모바일에서는 메인 메뉴 세로로만 (PC 스타일 건드리지 않음) */
  nav.menu.mega-all .main-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:0;
    margin:0 0 12px;
  }
}

/* ✅ 모바일 메가메뉴: 1열로 강제 + 글자 세로 깨짐 방지 */
@media (max-width: 768px){

  /* 메가메뉴 내부를 세로 스택으로 */
  nav.menu.mega-all .mega-panel{ 
    display:block !important;
    position: static !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  nav.menu.mega-all .mega-inner{
    display:flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* 각 컬럼(회사소개/제품/바로가기)도 100% */
  nav.menu.mega-all .mega-col{
    width: 100% !important;
    min-width: 0 !important;
    background: rgba(15,23,42,.03) !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    border-radius: 14px !important;
    padding: 10px !important;
  }

  /* 제품 2열도 모바일에서는 1열로 */
  nav.menu.mega-all .mega-2col{
    display:flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  nav.menu.mega-all .mega-subcol{
    width: 100% !important;
  }

  /* 글자가 한 글자씩 떨어지는 문제 방지 */
  nav.menu.mega-all a{
    display:block !important;
    width: 100% !important;
    white-space: normal !important;      /* 줄바꿈은 단어 단위로 */
    word-break: keep-all !important;     /* 한글 한글자씩 쪼개짐 방지 */
    overflow-wrap: break-word !important;
    padding: 10px 10px !important;
    border-radius: 10px !important;
  }

  /* 제목(h4)도 보기 좋게 */
  nav.menu.mega-all .mega-col h4{
    margin: 0 0 6px !important;
    padding: 10px 10px !important;
    background: rgba(255,255,255,.9) !important;
    border-radius: 12px !important;
  }
}


/* ==================================================
   ✅ MOBILE NAV (PC 디자인 유지 + 모바일만 자연스럽게)
   - style.css 맨 아래에 붙이기
================================================== */
@media (max-width: 768px){

  /* (A) 클릭 막는 레이어 방지 */
  .bg-orbs{ pointer-events:none !important; }

  /* (B) 헤더는 항상 위 */
  .header{
    position: fixed !important;
    top:0; left:0; right:0;
    z-index: 10000 !important;
  }
  body{ padding-top: 72px; } /* 헤더 높이만큼 */

  .header-inner{
    height: 72px !important;
    display:flex !important;
    align-items:center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 14px !important;
  }

  /* 로고 영역 넘침 방지 */
  .logo-wrap{ max-width: calc(100vw - 72px); }
  .logo-img{ width:44px !important; height:44px !important; object-fit:contain; }
  .logo-title{ font-size:12px !important; line-height:1.15 !important; margin:0 !important; }
  .logo-title-en{ font-size:11px !important; }

  /* (C) 햄버거 버튼 */
  .nav-toggle{
    display:block;
    width:44px; height:44px;
    border:0; background:transparent;
    padding:10px;
    border-radius: 12px;
    cursor:pointer;
    position: relative;
    z-index: 11000 !important; /* ← 클릭 최우선 */
  }
  .nav-toggle span{
    display:block;
    height:2px;
    margin:6px 0;
    background:#0f172a;
    border-radius:2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  body.nav-open .nav-toggle span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

  /* (D) 메뉴 패널(전체 화면) */
  nav.menu.mega-all{
    position: fixed !important;
    left:0; right:0;
    top:72px;
    height: calc(100vh - 72px);
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(10px);
    z-index: 9999 !important;
    padding: 12px 14px 24px;
    overflow: auto;

    /* 기본은 숨김 */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
  }
  body.nav-open nav.menu.mega-all{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* (E) 메인 메뉴: 가로 바(스와이프 가능) */
  nav.menu.mega-all .main-nav{
    display:flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 6px 2px 12px !important;
    margin: 0 0 12px !important;
    border-bottom: 1px solid rgba(15,23,42,.10);
  }
  nav.menu.mega-all .main-nav::-webkit-scrollbar{ height:0; }
  nav.menu.mega-all .main-nav li{ flex:0 0 auto !important; list-style:none !important; }
  nav.menu.mega-all .main-nav a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding: 10px 12px !important;
    border-radius: 999px !important;
    background: rgba(15,23,42,.06) !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    text-decoration:none;
  }

  /* (F) 서브메뉴(메가패널): 세로 카드 형태 (너가 좋아하는 느낌 유지) */
  .mega-panel{
    display:block !important;
    position: static !important;
    width:100% !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  .mega-inner{
    display:flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .mega-col{
    width:100% !important;
    min-width: 0 !important;
    background: rgba(15,23,42,.03) !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    border-radius: 14px !important;
    padding: 10px !important;
  }
  .mega-col h4{
    margin:0 0 6px !important;
    padding:10px 10px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.9) !important;
    font-size: 15px !important;
  }
  .mega-2col{
    display:flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 4px !important;
  }
  .mega-subcol{ width:100% !important; }
  .mega-col a{
    display:block !important;
    padding: 10px 10px !important;
    border-radius: 10px !important;
    text-decoration:none;
    font-size: 14px !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }

  /* 배경 스크롤 잠금 */
  body.nav-open{ overflow:hidden; }
}

/* ✅ 모바일에서 햄버거를 오른쪽 위에 고정 */
@media (max-width: 768px){

  .header{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 10000 !important;
  }

  .header-inner{
    position: relative !important;   /* 기준점 */
    height: 72px !important;
    padding: 0 14px !important;
    display: block !important;       /* flex 말고, 버튼 absolute로 고정할거라 block이 편함 */
  }

  /* 로고는 왼쪽 */
  .logo{
    display: flex !important;
    align-items: center !important;
    height: 72px !important;
  }

  /* ✅ 햄버거: 헤더 우측 상단 고정 */
  .nav-toggle{
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;

    width: 44px; height: 44px;
    border: 0;
    background: transparent;
    z-index: 11000 !important;
    cursor: pointer;
  }

  /* 로고가 버튼 밑으로 들어가지 않게 오른쪽 여백 확보 */
  .logo-wrap{
    padding-right: 56px !important; /* 햄버거 공간 */
    max-width: 100% !important;
  }
}

/* ✅ PC로 커지면 햄버거 숨김 (PC 메뉴는 기존대로) */
@media (min-width: 769px){
  .nav-toggle{ display: none !important; }
}

/* ✅ 모바일: 서브메뉴(mega-panel) 강제 표시 */
@media (max-width: 768px){

  /* hover 의존 제거: 서브패널 무조건 보이게 */
  nav.menu.mega-all .mega-panel{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    position: static !important;   /* 모바일에선 자연스럽게 아래로 */
    transform: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;

    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    margin-top: 12px !important;
  }

  nav.menu.mega-all .mega-inner{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  nav.menu.mega-all .mega-col{
    width: 100% !important;
    min-width: 0 !important;
    background: rgba(15,23,42,.03) !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    border-radius: 14px !important;
    padding: 10px !important;
  }

  /* 제품 2열 -> 모바일 1열 */
  nav.menu.mega-all .mega-2col{
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  nav.menu.mega-all .mega-subcol{ width: 100% !important; }

  /* 링크 텍스트 깨짐 방지 */
  nav.menu.mega-all .mega-col a{
    display: block !important;
    padding: 10px 10px !important;
    border-radius: 10px !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
}

/*  모바일: 메인 메뉴 숨기고 서브만 사용 */
@media (max-width: 768px){

  /* 빨간 동그라미 부분 숨기기 */
  nav.menu.mega-all .main-nav{
    display: none !important;
  }

}
/*  모바일에서 제품 이미지 사각형으로 */
@media (max-width: 768px){

  .product-board img,
  .p-card img,
  .product-card img {
    width: 100%;
    aspect-ratio: 4 / 3;      
    object-fit: cover;        
    border-radius: 14px;
    display: block;
  }

}

/* ================================
   모바일 제품 카드 비율 강제 고정
================================ */
@media (max-width: 768px){

  /* 카드 박스 */
  .machine-board,
  .product-board,
  .p-card,
  .product-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
  }

  /* 비율 박스 생성 (4:3) */
  .machine-board::before,
  .product-board::before,
  .p-card::before,
  .product-card::before {
    content: "";
    display: block;
    padding-top: 75%;   /* 4:3 비율 (100 / 4 * 3 = 75%) */
  }

  /* 이미지 절대 배치 */
  .machine-board img,
  .product-board img,
  .p-card img,
  .product-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 꽉 채우기 */
    border-radius: 16px;
  }

}

/* 모바일: 제품 상세 사진 갤러리 2열(사각형 카드 느낌) */
@media (max-width: 768px){

  /* 사진 리스트를 2열 그리드로 */
  .sub-gallery-grid{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* 카드 자체도 꽉 차게 */
  .sub-gallery-grid .p-card{
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* 이미지: 정사각형/사각형으로 */
  .sub-gallery-grid .p-card .p-image{
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;   
    overflow: hidden !important;
  }

  .sub-gallery-grid .p-card .p-image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/*  모바일에서 마지막 여백 줄이기 */
@media (max-width: 768px){

  section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  footer {
    margin-top: 40px !important;
  }

  body {
    padding-bottom: 0 !important;
  }

}

@media (max-width:768px){
  #business {
    padding-bottom: 30px !important;
  }
}

/*  모바일 footer 높이 정리 */
@media (max-width: 768px){

  footer{
    min-height: auto !important;
    padding: 30px 15px !important;
  }

}

@media (max-width:768px){

  footer p,
  footer small{
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

}

/*  모바일에서 강제 전체화면 높이 제거 */
@media (max-width: 768px){

  section,
  .main-section,
  #home,
  #business,
  main {
    min-height: auto !important;
    height: auto !important;
  }

}

/*  모바일: 컨텐츠 끝나면 배경도 끝내기 */
@media (max-width: 768px){

  /* footer 아래로 보이는 배경을 잘라냄 */
  body{
    background: #fff !important;
  }

  /* 메인 영역 배경/장식이 길게 이어지는 경우 차단 */
  #content{
    background: transparent !important;
  }

  /* 떠다니는 배경 오브젝트(원형/그라데이션) 모바일에서 제거 */
  .bg-orbs{
    display: none !important;
  }

  /* 혹시 footer 자체 높이가 잡혀있으면 최소화 */
  footer.footer{
    min-height: auto !important;
    padding: 24px 14px !important;
  }
}

@media (max-width:768px){
  html, body{ height: auto !important; }
  body{ padding-bottom: 0 !important; margin-bottom: 0 !important; }
  #content{ padding-bottom: 0 !important; margin-bottom: 0 !important; }
  footer.footer{ margin-bottom: 0 !important; }
}

/*  모바일에서 footer 아래/위 공백(강제 채움) 제거 */
@media (max-width: 768px){

  html, body{
    height: auto !important;
    min-height: 0 !important;
  }

  body{
    display: block !important;   /* body flex 끊기 */
  }

  #content, main{
    flex: unset !important;      /* main이 flex:1로 공간 늘리는 것 방지 */
    min-height: 0 !important;
    height: auto !important;
  }

  footer, .footer{
    margin-top: 0 !important;    /* margin-top:auto 같은 거 무력화 */
  }
}

@media (max-width:768px){
  .page-section, #home{ min-height: auto !important; height:auto !important; }
}

/*  모바일: footer 여백 과다 강제 제거 */
@media (max-width: 768px){
  footer.footer{
    padding: 18px 14px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  footer.footer .footer-inner{
    padding: 0 !important;
    margin: 0 !important;
  }

  footer.footer p{
    margin: 6px 0 !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 768px){
  footer, .footer{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* 모바일: 바닥에 남는 영역 색을 흰색으로 */
@media (max-width: 768px){
  html, body{
    background: #fff !important;
  }
  footer, .footer{
    background: #fff !important;
  }
}

@media (max-width:768px){
  footer{
    background:#1f2937 !important;
    color:#fff !important;
    padding:40px 20px !important;
  }

  footer a{
    color:#cbd5e1 !important;
  }

  footer p{
    opacity:0.85;
  }
}

#business{
  padding-bottom:30px !important;
  border-bottom:1px solid #e5e7eb;
}

@media (max-width:768px){
  .kpi-grid{
    margin-bottom:20px !important;
  }
}

/*  KPI 카드 사이 이상한 줄 제거 */
@media (max-width:768px){

  .kpi-grid{
    background: transparent !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  .kpi-card{
    margin: 0 !important;
  }

}

.nav-menu{
  transition: all .3s ease;
}

/*  모바일 하단 고정 액션 버튼 */
.floating-actions{
  position: fixed;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

.floating-actions .fa-btn{
  border: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;

  background: #0f2f5f;   /* 네 사이트 톤(네이비) */
  color: #fff;

  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  transition: transform .15s ease, opacity .15s ease;
}

.floating-actions .fa-btn:active{
  transform: scale(0.98);
}

.floating-actions .fa-top{
  background: #334155; /* 조금 더 차분한 톤 */
}

/* PC에서는 숨김 (모바일만) */
@media (min-width: 769px){
  .floating-actions{ display:none; }
}

/* 아주 작은 폰에서는 조금 작게 */
@media (max-width: 380px){
  .floating-actions .fa-btn{
    padding: 11px 12px;
    font-size: 12px;
  }
}

/* 확대 대상 */
.zoomable {
  cursor: zoom-in;
}

.img-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.img-modal img {
  max-width: 90%;
  max-height: 90%;
  transform-origin: center;
  transition: transform .2s ease;
  touch-action: none;
}
/* ✅ 핀치 줌을 모달 이미지에만 */
#imgModalTarget{
  touch-action: none;
  transform-origin: center center;
}

/* ✅ 모달 이미지: 핀치 줌 가능 */
#imgModalTarget{
  touch-action: none;          /* 핀치/드래그 이벤트 받기 */
  transform-origin: center;    /* 확대 기준 */
  will-change: transform;
}

/* ==============================
   ✅ 지점 사진(광주/김해) 모바일 통일
   - 사진을 같은 박스(비율)로 강제해서 납작/과대 방지
   ============================== */

/* 1) 두 지점 사진 공통으로 잡히게: 이미지에 공통 클래스가 없을 때 대비 */
#inside img,
#inside .branch img,
#inside .inside-photo img,
#inside .branch-photo img {
  display: block;
  width: 100%;
}

/* 2) 모바일에서 "사진 카드" 규격 고정 */
@media (max-width: 768px) {
  /* 광주/김해 사진이 들어있는 래퍼(부모)에 적용될 수 있게 넉넉히 잡음 */
  #inside .branch-photo,
  #inside .inside-photo,
  #inside .branch-image,
  #inside .branch-img,
  #inside .branch .photo,
  #inside .branch .img-wrap {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
    /* ✅ 핵심: 카드 비율 고정 */
    aspect-ratio: 16 / 9;
    background: #e9edf5;
  }

  /* 래퍼가 뭔지 몰라도 이미지 자체를 강제로 맞추는 보험 */
  #inside .branch-photo img,
  #inside .inside-photo img,
  #inside .branch-image img,
  #inside .branch-img img,
  #inside .branch .photo img,
  #inside .branch .img-wrap img,
  #inside img {
    height: 100%;
    object-fit: cover; /* ✅ 꽉 차게 */
    border-radius: 16px;
  }
}

/* ==============================
   ✅ inside(지점) 사진 카드 통일
   ============================== */

/* 사진 영역 기본 */
#inside .branch-media{
  width: 100%;
}

/* ✅ "큰 사진" 카드처럼 보이게 (PC/모바일 공통) */
#inside .branch-media .inside-grid{
  width: 100%;
}

#inside .branch-media .inside-grid .photo{
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  background: #e9edf5;
}

/* ✅ 핵심: 이미지가 카드 안에서 꽉 차게 */
#inside .branch-media .inside-grid .photo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ✅ 모바일에서 사진 높이(비율) 고정 → 광주가 혼자 커지는 현상 방지 */
@media (max-width: 768px){
  #inside .branch-media .inside-grid .photo{
    aspect-ratio: 16 / 9;  /* 원하면 4/3, 3/2로 바꿔도 됨 */
  }
}

/* ✅ 이미지 모달 핀치줌용 */
#imgModal { 
  touch-action: none;          /* 모달에서 브라우저 기본 확대 대신 우리가 제어 */
}

#imgModalTarget{
  touch-action: none;
  transform-origin: center center;
  will-change: transform;
}

/* 핀치 줌용 */
#imgModalTarget{
  touch-action: none;
  transform-origin: center center;
}

/* =========================
   ✅ 모바일: 제품소개 2열 고정
   ========================= */
@media (max-width: 768px){

  /* 혹시 wrap이 폭/여백 이상하게 잡히면 같이 정리 */
  .product-cards-wrap{
    width: 100% !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }

  .product-cards-grid{
    display: grid !important; /* flex/다른 grid 설정 덮기 */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .product-cards-grid .p-card{
    width: 100% !important;
    margin: 0 !important;
  }

  /* 이미지가 납작/과확대 방지 */
  .product-cards-grid .p-image{
    width: 100% !important;
  }

  .product-cards-grid .p-image img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;      /* ✅ 카드 느낌으로 통일 (원하면 1/1, 16/9로 변경) */
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  /* 제목이 너무 길면 줄바꿈/깨짐 방지 */
  .product-cards-grid .p-title{
    font-size: 14px !important;
    line-height: 1.2 !important;
    word-break: keep-all !important;
  }
}

/* 더 작은 폰(아이폰 미니급)에서 1열로 */
@media (max-width: 420px){
  .product-cards-grid{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px){

  /* ✅ 제품 소개 영역에서 카드들이 2열로 */
  .product-cards-wrap .product-cards-grid,
  #product .product-cards-grid,
  #main-product .product-cards-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* ✅ 혹시 p-card가 grid 밖에서 width로 막고 있으면 강제 해제 */
  .product-cards-wrap .p-card,
  #product .p-card,
  #main-product .p-card{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    display: block !important;
  }

  /* ✅ 사진 납작/늘어짐 방지 + 카드 느낌 */
  .product-cards-wrap .p-image img,
  #product .p-image img,
  #main-product .p-image img{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block !important;
  }
}

@media (max-width: 420px){
  .product-cards-wrap .product-cards-grid,
  #product .product-cards-grid,
  #main-product .product-cards-grid{
    grid-template-columns: 1fr !important;
  }
}

/* ================================
   📱 모바일 전용 수정
   ================================ */
@media (max-width: 768px) {

  /* 🔥 위쪽 여백 제거 */
  body {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  section,
  .section,
  #main-product {
    padding-top: 20px !important;
  }

  /* 🔥 제품 소개 제목 위 공백 제거 */
  .product-intro-title {
    margin-top: 0 !important;
    padding-top: 10px !important;
    text-align: center;
  }

  /* 🔥 카드 2열로 변경 */
  .product-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2열 */
    gap: 12px;
  }

  /* 🔥 카드 크기 정리 */
  .p-card {
    padding: 10px;
  }

  .p-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* 🔥 카드 안 글씨 살짝 줄임 */
  .p-title {
    font-size: 13px;
    text-align: center;
  }

}

@media (max-width: 768px) {
  .header {
    height: 70px;
  }
}

/* ================================
   📱 모바일: 위 공백 제거 + 제품카드 2열 강제
   (style.css 맨 아래에 붙이기)
   ================================ */
@media (max-width: 768px){

  /* ✅ (A) 섹션이 가운데 정렬/100vh라서 생기는 상단 공백 제거 */
  #main-product,
  #products,
  .main-product,
  .products,
  section{
    min-height: auto !important;
    height: auto !important;
  }

  /* 섹션 안에 flex로 중앙정렬 해둔 래퍼들 강제 해제 */
  #main-product,
  #main-product .inner,
  #main-product .container,
  #main-product .section-inner,
  #main-product .wrap{
    display: block !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  /* 섹션 자체 여백 줄이기 (위 공백 체감 줄어듦) */
  #main-product{
    padding-top: 16px !important;
    margin-top: 0 !important;
  }

  /* ✅ (B) “제품 소개” 카드 2열 강제 */
  .product-cards-wrap .product-cards-grid,
  .product-cards-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .product-cards-grid .p-card,
  .p-card{
    width: 100% !important;
    max-width: none !important;
  }

  .p-image img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
  }

  .product-intro-title{
    margin-top: 0 !important;
    padding-top: 8px !important;
  }
}

/* ================================
   📱 모바일: product-board 위 공백(가짜 높이) 제거
   ================================ */
@media (max-width: 768px){
  .product-board::before{
    content: none !important;   /* ✅ pseudo 요소 자체 제거(제일 확실) */
    padding: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  /* 혹시 product-board 자체에도 여백이 있으면 같이 정리 */
  .product-board{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 768px){
  .product-cards-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .p-image img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* ================================
   📱 모바일: 제품카드 한줄(가로로 길게) → 2열로 강제
   ================================ */
@media (max-width: 768px){

  /* ✅ 가로로 길게 나열되는 원인(overflow/flex-nowrap) 차단 */
  .product-cards-wrap,
  .product-cards-grid{
    overflow-x: hidden !important;
  }

  /* ✅ grid로 강제 (flex든 뭐든 다 덮어씀) */
  .product-cards-wrap .product-cards-grid,
  .product-cards-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* ✅ 카드가 grid 칸 안에서 안 튀어나오게 */
  .product-cards-grid .p-card,
  .p-card{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* ✅ 이미지가 폭 고정되어 있으면 한줄로 밀어버리니까 강제 */
  .p-image,
  .p-image img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
  }
}

@media (max-width: 768px){

  /* 2열 강제 */
  .product-cards-wrap,
  .product-cards-grid{
    width: 100% !important;
    max-width: 100% !important;
  }

  .product-cards-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* 카드가 2칸에 들어갈 수 있게 “최소폭 제한” 깨기 */
  .p-card{
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* 이미지가 세로로 길어지는 현상 방지: 비율 고정 */
  .p-image{
    width: 100% !important;
    aspect-ratio: 4 / 3;     /* 필요하면 1/1, 3/2로 바꿔도 됨 */
    overflow: hidden;
    border-radius: 14px;
  }

  .p-image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }
}

/* ================================
   ✅ 이미지 라이트박스 (전체화면)
   ================================ */
.img-lightbox{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.92);
  z-index: 9999;
  padding: 16px;
}

.img-lightbox.is-open{
  display: grid;
}

.img-lightbox .lb-img{
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;   /* 화면 가득 + 비율 유지 */
}

.img-lightbox .lb-close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 28px;
  line-height: 42px;
  cursor: pointer;
}

/* ==================================
   📱 모바일 2열 갤러리(스샷 스타일)
   ================================== */
@media (max-width: 768px){

  /* ✅ 제품 카드 그리드: 2열 고정 */
  .product-cards-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 12px !important;      /* 화면 좌우 여백 */
    align-items: stretch;
  }

  /* ✅ 카드 모양(라운드/그림자/넘침방지) */
  .p-card{
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
    background: #fff !important;
    padding: 0 !important;           /* 카드 안쪽 여백 제거(사진이 꽉 차게) */
  }

  /* ✅ 제목/리스트 같은 텍스트가 있으면 모바일에서 과감히 숨기기(갤러리 느낌) */
  .p-title, .p-bullets{
    display: none !important;
  }

  /* ✅ “세로로 길어지는” 원인 제거: 이미지 영역 비율 고정 */
  .p-image{
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;  /* 스샷 느낌(원하면 1/1, 3/2로 바꿔도 됨) */
    margin: 0 !important;
  }

  /* ✅ 이미지 꽉 차게 (크롭되면서 보기 좋게) */
  .p-image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* ==================================
   📱 모바일: 제품소개 2열 강제(부모 구조 상관없이)
   ================================== */
@media (max-width: 768px){

  /* ✅ product-cards-wrap 자체를 2열 레이아웃으로 */
  .product-cards-wrap{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 12px !important;
  }

  /* ✅ 카드 2개씩 */
  .product-cards-wrap .p-card{
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;

    /* 혹시 다른 곳에서 “한 줄 다 차지” 주는 거 있으면 무효 */
    grid-column: auto !important;
  }

  /* ✅ 텍스트 숨기고 갤러리 느낌 */
  .product-cards-wrap .p-title,
  .product-cards-wrap .p-bullets{
    display: none !important;
  }

  /* ✅ 이미지 세로로 길어지는 거 방지(비율 고정) */
  .product-cards-wrap .p-image{
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;  /* 필요하면 1/1 로 바꿔도 됨 */
    margin: 0 !important;
  }

  .product-cards-wrap .p-image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* ==================================
   📱 모바일: 제품 소개 2열 "확정" 고정 (iPhone 포함)
   ================================== */
@media (max-width: 768px){

  /* ✅ 그리드 컨테이너: 무조건 grid로 */
  .product-cards-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ✅ 카드가 2칸에 들어가게 “최소폭/고정폭” 싹 제거 */
  .product-cards-grid .p-card{
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;     /* ← 이게 진짜 중요 */
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  /* ✅ 이미지 비율 고정해서 세로로 길어지는 느낌 제거 */
  .product-cards-grid .p-image{
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;  /* 필요하면 1 / 1 로 바꿔 */
    margin: 0 !important;
  }
  .product-cards-grid .p-image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* ✅ 갤러리 느낌이면 텍스트 숨김(원하면 지워도 됨) */
  .product-cards-grid .p-title,
  .product-cards-grid .p-bullets{
    display: none !important;
  }
}

/* ==================================
   📱 모바일: 제품카드 2열 "강제" (무조건)
   ================================== */
@media (max-width: 768px){

  /* ✅ 1) 감싸는 래퍼: 2열 배치 */
  .product-cards-wrap{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 12px !important;
  }

  /* ✅ 2) 그리드 div는 레이아웃 영향 없게 */
  .product-cards-grid{
    display: contents !important; /* 안의 p-card들을 wrap이 직접 배치 */
  }

  /* ✅ 3) 카드: 2개씩 */
  .product-cards-wrap .p-card{
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
  }

  /* ✅ 4) 이미지: 세로로 길어지는 느낌 방지(비율 고정) */
  .product-cards-wrap .p-image{
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;  /* 원하면 1/1 로 바꿔 */
    margin: 0 !important;
  }
  .product-cards-wrap .p-image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* ✅ 5) 갤러리 느낌이면 텍스트 숨김(원하면 삭제) */
  .product-cards-wrap .p-title,
  .product-cards-wrap .p-bullets{
    display: none !important;
  }
}

@media (max-width: 768px){
  .product-cards-wrap .p-card{ width: calc(50% - 5px) !important; }
}


@media (max-width: 768px){

  /*  1) 감싸는 래퍼: 2열 배치 */
  .product-cards-wrap{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 12px !important;
  }

  /*  2) 그리드 div는 레이아웃 영향 없게 */
  .product-cards-grid{
    display: contents !important; /* 안의 p-card들을 wrap이 직접 배치 */
  }

  /*  3) 카드: 2개씩 */
  .product-cards-wrap .p-card{
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
  }

  /*  4) 이미지: 세로로 길어지는 느낌 방지(비율 고정) */
  .product-cards-wrap .p-image{
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;  /* 원하면 1/1 로 바꿔 */
    margin: 0 !important;
  }
  .product-cards-wrap .p-image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /*  5) 갤러리 느낌이면 텍스트 숨김(원하면 삭제) */
  .product-cards-wrap .p-title,
  .product-cards-wrap .p-bullets{
    display: none !important;
  }
}


/* ✅ Language toggle */
.lang-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:12px;
  flex-shrink:0;
}

.lang-btn{
  border:1px solid rgba(15,23,42,.18);
  background:#fff;
  color:#0f172a;
  padding:7px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

.lang-btn:hover{ transform: translateY(-1px); }

.lang-btn.is-active{
  background:#0f2f5f;
  color:#fff;
  border-color:#0f2f5f;
}

/* 모바일에서 너무 커 보이면 */
@media (max-width: 768px){
  .lang-btn{ padding:6px 9px; font-size:11px; }
}


.ov-process {
  word-break: break-word;
  overflow-wrap: break-word;
}


/* 헤더 기준점 */
.header-inner {
  position: relative;
}

/* 🔥 언어 버튼 오른쪽 위 고정 */
.lang-switch {
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
}

/* 버튼 스타일 조금 정리 */
.lang-btn {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid #dcdcdc;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}

.lang-btn.is-active {
  background: #1d65b5;
  color: #fff;
  border-color: #1d65b5;
}

.footer-inner {
  text-align: center;   /* 전체 가운데 */
}

.footer-inner span {
  display: block;
}

.menu {
  transform: translateX(10px);   /* ← 숫자 키우면 더 오른쪽 */
}


/* ✅ 메가 서브메뉴 배경을 화면 전체(왼쪽 끝까지)로 깔기 */
.header { position: relative; } /* 혹시 없으면 추가 */

/* 서브메뉴 전체 배경(흰색 바) */
.mega-panel,
.mega-dropdown,
.mega-menu {            /* 네 클래스 중 네가 쓰는 걸로 하나만 적용돼도 됨 */
  position: fixed;      /* 화면 기준으로 */
  left: 0;
  right: 0;
  top: 100px;           /* ✅ 헤더 높이랑 맞춰 (너 헤더가 100px이면 그대로) */
  width: 100vw;
  background: #fff;
  z-index: 2000;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* ✅ 메가서브메뉴 내용은 가운데 정렬(너 헤더 폭이랑 동일하게) */
.mega-panel .mega-inner,
.mega-dropdown .mega-inner,
.mega-menu .mega-inner {
  max-width: 1200px;    /* 원하는 폭 */
  margin: 0 auto;
  padding: 18px 24px;
}

/* =========================
   ✅ 메가메뉴(서브바) 전체폭 강제
========================= */

.header { position: relative; z-index: 3000; }

/* 너가 쓰는 mega 드롭다운 박스 */
.mega{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;

  top: 100px !important;            /* 헤더 높이가 100px이면 그대로 */
  background: #fff !important;
  z-index: 4000 !important;

  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  border-top: 1px solid rgba(0,0,0,.06);
}

/* mega 내부 내용은 가운데 정렬(보기 좋게) */
.mega-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
}

/* ✅ 메가메뉴 패널: 부모 폭 무시하고 화면 전체폭으로 */
header .mega-panel,
.header .mega-panel,
.mega-panel{
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important; /* 화면 정중앙 기준 */
  width: 100vw !important;
  max-width: 100vw !important;

  top: 100px !important;  /* 헤더 높이에 맞게 */
  background: #fff !important;
  z-index: 99999 !important;
}

/* ✅ 헤더/내부 래퍼가 메가패널을 잘라먹지 못하게 */
header, .header, .header-inner{
  overflow: visible !important;
  transform: none !important; /* 부모 transform 있으면 fixed가 부모 기준으로 변함 */
}

.mega-panel .mega-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}