/* ============================================================
   hero-new.css — (주)한서켐 메인 비주얼 Hero 새 디자인
   작성일: 2026-05
   적용 위치: htdocs/hschem/css/hero-new.css

   ▶ page.php에 이미 링크 추가됨:
     <link rel="stylesheet" href="./css/hero-new.css">

   ▶ 기존 style.css와 충돌 방지:
     - 모든 신규 클래스에 'hs-' 접두사 사용
     - #main_visual, .mv_wrap 등 기존 클래스는 최소 오버라이드
============================================================ */

/* ────────────────────────────────────────
   0. 헤더 — 항상 흰색 불투명 고정
   기존 style.css: #header { position:fixed; } (배경 없음 → 투명)
                   #header.hovered { background:#fff } → hover 시에만 흰색
   변경: 항상 흰색 불투명 → 로고·메뉴 가독성 확보
──────────────────────────────────────── */

/* ① 헤더 배경 항상 흰색 */
#header {
  background: #ffffff !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08) !important;
}

/* ② white-menu 클래스 유무 관계없이 GNB 텍스트 항상 검정 */
#header .gnb > li > a,
#header.white-menu .gnb > li > a,
#header.white-menu.hovered .gnb > li > a {
  color: #1a1a1a !important;
}

/* ③ GNB hover 시 포인트컬러 + 하단 보더 */
#header .gnb > li:hover > a,
#header.white-menu .gnb > li:hover > a {
  color: var(--col-men, #B40019) !important;
  border-bottom-color: var(--col-men, #B40019) !important;
}

/* ④ 현재 활성 페이지 언더라인 컬러도 포인트 컬러 유지 */
#header .gnb > li > a.on,
#header .gnb > li.on > a {
  color: var(--col-men, #B40019) !important;
  border-bottom: 3px solid var(--col-men, #B40019) !important;
}

/* ────────────────────────────────────────
   1. 슬라이드 기본 레이아웃
   FullPage.js가 section 높이를 100vh로 관리하므로
   swiper-slide는 높이 100%로 채움
──────────────────────────────────────── */

/* [수정] Hero mv_wrap — FullPage.js paddingTop(100px)이 section에 적용되면
   height:100%는 (100vh - 100px)로 계산되어 이미지가 짧아지는 문제 발생.
   → position:absolute; inset:0 으로 패딩 영역 포함 섹션 전체를 채워 100vh 확보.
   ※ #main_visual 은 FullPage.js가 position:relative로 관리하므로 absolute 사용 가능 */
#main_visual .mv_wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

#main_visual .mv_wrap,
#main_visual .mv_list,
#main_visual .hs-hero-slide {
  height: 100%;
}

#main_visual .hs-hero-slide {
  position: relative;
  display: flex;
  align-items: center;
}

/* ────────────────────────────────────────
   2. 어두운 오버레이 — 배경 이미지 위에 덮기
   ① 상단 불투명 처리: !important로 style.css 오버라이드 보장
──────────────────────────────────────── */
.hs-slide-overlay {
  position: absolute !important;
  inset: 0 !important;
  /* 헤더가 흰색 고정이므로 최상단 강조 불필요.
     텍스트 가독성만 확보할 수 있는 최소한의 어두운 톤 유지 */
  background: linear-gradient(
    to bottom,
    rgba(5, 10, 22, 0.22) 0%,    /* 최상단: 연하게 (헤더가 커버) */
    rgba(5, 10, 22, 0.42) 35%,   /* 텍스트 영역: 흰 글자 가독성 확보 */
    rgba(5, 10, 22, 0.30) 65%,   /* 중간: 이미지 생동감 유지 */
    rgba(5, 10, 22, 0.38) 100%   /* 하단: 페이지네이션 영역 살짝 어둡게 */
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* ────────────────────────────────────────
   3. 슬라이드 콘텐츠 래퍼
──────────────────────────────────────── */
.hs-slide-content {
  position: relative;
  z-index: 2;
  /* 하단 퀵버튼(.mv_btns) 높이(약 80px) + 페이지네이션 공간 확보 */
  padding-bottom: 120px;
}

/* ────────────────────────────────────────
   4. Hero 타이포그래피
──────────────────────────────────────── */

/* 상단 작은 레이블 */
/* ② 빨간색→흰색 변경, font-size 확대 */
.hs-hero-eyebrow {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;              /* 12px → 15px */
  font-weight: 600;
  color: rgba(255, 255, 255, 0.90);   /* 빨간색 → 흰색 */
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
  animation: hsHeroFadeUp 0.7s ease 0.1s forwards;
}

/* 메인 타이틀 (DB: HS_Data_Title) */
/* ③ 2줄 배치: max-width 제한으로 자연스럽게 줄바꿈 유도 */
.hs-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.12;
  letter-spacing: -1px;
  margin-bottom: 20px;
  max-width: 700px;             /* 2줄 유도 */
  word-break: keep-all;
  opacity: 0;
  transform: translateY(20px);
  animation: hsHeroFadeUp 0.7s ease 0.25s forwards;
}

/* 설명 텍스트 (DB: HS_Data_Text) */
.hs-hero-desc {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 17px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 40px;
  max-width: 520px;
  opacity: 0;
  transform: translateY(20px);
  animation: hsHeroFadeUp 0.7s ease 0.4s forwards;
}

/* ────────────────────────────────────────
   5. Hero 버튼
──────────────────────────────────────── */
.hs-hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  animation: hsHeroFadeUp 0.7s ease 0.55s forwards;
}

/* 주 버튼 — 빨간 채움 */
.hs-btn-primary {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 32px;
  background: #B40019;
  color: #ffffff !important;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background 0.2s ease;
  white-space: nowrap;
}
.hs-btn-primary:hover {
  background: #940015;
  color: #ffffff !important;
}

/* 보조 버튼 — 흰 테두리 */
/* ⑤ 외곽선이 잘 보이도록 opacity 높이고 !important 강제 적용 */
.hs-btn-outline {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 32px;
  background: transparent !important;
  color: #ffffff !important;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 15px;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;  /* 선명한 흰 테두리 */
  border-radius: 8px;
  text-decoration: none !important;
  transition: border-color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.hs-btn-outline:hover {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* ────────────────────────────────────────
   6. 등장 애니메이션
──────────────────────────────────────── */
@keyframes hsHeroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Swiper 슬라이드 전환 시 재실행 */
.swiper-slide-active .hs-hero-eyebrow,
.swiper-slide-active .hs-hero-title,
.swiper-slide-active .hs-hero-desc,
.swiper-slide-active .hs-hero-btns {
  animation-play-state: running;
}
.swiper-slide:not(.swiper-slide-active) .hs-hero-eyebrow,
.swiper-slide:not(.swiper-slide-active) .hs-hero-title,
.swiper-slide:not(.swiper-slide-active) .hs-hero-desc,
.swiper-slide:not(.swiper-slide-active) .hs-hero-btns {
  opacity: 0;
  transform: translateY(20px);
  animation: none;
}

/* ────────────────────────────────────────
   7. 퀵 네비게이션 버튼 (.mv_btns) — [수정] 완전 숨김
   사용자 요청: 4개 버튼 겹침 문제로 제거
──────────────────────────────────────── */
#main_visual .mv_btns {
  display: none !important;
}

/* 아래는 혹시 남아있을 경우를 대비해 유지 */
#main_visual .mv_btns_old {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: rgba(10, 16, 32, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0;
}

#main_visual .m_btn {
  display: flex;
  margin: 0 auto;
  max-width: var(--hed-wid, 1400px);
  padding: 0 40px;
}

#main_visual .m_btn > li {
  flex: 1;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
#main_visual .m_btn > li:last-child {
  border-right: none;
}

#main_visual .m_btn > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease;
}
#main_visual .m_btn > li > a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff !important;
}

#main_visual .mv_icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

/* 기존 arrow 이미지 숨김 (텍스트 + 아이콘 조합으로 충분) */
#main_visual .m_btn > li > a img:last-child {
  margin-left: auto;
  opacity: 0.5;
  width: 16px;
}

/* ────────────────────────────────────────
   8. ④⑥ 네비게이션 — 좌우 화살표 + 하단 점 페이지네이션
   [핵심 수정] style.css 고특이도 선택자 및 .inner class(1400px) 전면 !important 오버라이드
──────────────────────────────────────── */

/* ── mvpg_inner ──
   .inner 클래스가 width:1400px;margin:0 auto 를 부여하므로
   절대위치+inset:0 만으로는 full-width 커버가 안됨.
   width:100%!important + max-width:none!important + margin:0!important 필수 */
#main_visual .mvpg_inner {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  z-index: 10;
  pointer-events: none;
}

/* mv_pg: 컨테이너 전체 채우기 */
#main_visual .mv_pg {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

/* ══════════════════════════════════════
   좌측 화살표 (mv_prev)
   style.css: #main_visual .mv_wrap .mv_pg .mv_prev { width:7px; height:14px }
   → 동일 특이도 이상 선택자 + !important 로 완전 오버라이드
══════════════════════════════════════ */
#main_visual .mv_wrap .mv_pg .mv_prev,
#main_visual .mvpg_inner .mv_prev,
#main_visual .mv_prev {
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: all !important;
  cursor: pointer !important;
  /* ② 원형 버튼: style.css의 7×14 강제 오버라이드 */
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.18) !important;
  border: 2px solid rgba(255,255,255,0.60) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: background 0.2s, border-color 0.2s !important;
}
#main_visual .mv_prev:hover {
  background: rgba(255,255,255,0.32) !important;
  border-color: rgba(255,255,255,0.95) !important;
}

/* ══════════════════════════════════════
   우측 화살표 (mv_next)
══════════════════════════════════════ */
#main_visual .mv_wrap .mv_pg .mv_next,
#main_visual .mvpg_inner .mv_next,
#main_visual .mv_next {
  position: absolute !important;
  right: 20px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: all !important;
  cursor: pointer !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.18) !important;
  border: 2px solid rgba(255,255,255,0.60) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: background 0.2s, border-color 0.2s !important;
}
#main_visual .mv_next:hover {
  background: rgba(255,255,255,0.32) !important;
  border-color: rgba(255,255,255,0.95) !important;
}

/* 화살표 내부 이미지: 작게 + 흰색 변환 */
#main_visual .mv_prev img,
#main_visual .mv_next img {
  width: 10px !important;
  height: auto !important;
  max-width: 10px !important;
  filter: brightness(0) invert(1) !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* ══════════════════════════════════════
   하단 중앙 페이지네이션 dots
   ③ 위치: 세로 중앙 → 하단 고정
      활성점: 빨간색 → 흰색 (Swiper가 --col-bar:#B40019 상속하는 것을 막음)
══════════════════════════════════════ */
#main_visual .mv_pagination {
  position: absolute !important;
  bottom: 28px !important;
  top: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  pointer-events: all !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  /* Swiper가 자동으로 top/bottom 을 바꾸지 못하도록 */
  width: auto !important;
  height: auto !important;
}

/* 비활성 점 */
#main_visual .mv_pagination .swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.45) !important;
  opacity: 1 !important;
  margin: 0 !important;
  transition: background 0.25s, width 0.3s, border-radius 0.3s !important;
  cursor: pointer !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* 활성 점: 흰색 pill 형태 */
#main_visual .mv_pagination .swiper-pagination-bullet-active {
  background: #ffffff !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 8px !important;
  border-radius: 4px !important;
  opacity: 1 !important;
}

/* ────────────────────────────────────────
   9. 반응형 — 태블릿/모바일
──────────────────────────────────────── */
@media (max-width: 1023px) {
  .hs-slide-content {
    padding: 60px 24px 100px;
  }
  .hs-hero-title {
    font-size: clamp(28px, 6vw, 48px);
    letter-spacing: -0.5px;
  }
  .hs-hero-desc {
    font-size: 15px;
  }
  .hs-btn-primary,
  .hs-btn-outline {
    height: 46px;
    padding: 0 24px;
    font-size: 14px;
  }
  #main_visual .m_btn > li > a {
    padding: 12px 14px;
    font-size: 13px;
    gap: 8px;
  }
  #main_visual .mv_icon {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 767px) {
  .hs-hero-eyebrow {
    font-size: 10px;
    letter-spacing: 1.5px;
  }
  .hs-hero-btns {
    flex-direction: column;
    gap: 10px;
  }
  .hs-btn-primary,
  .hs-btn-outline {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  #main_visual .m_btn > li > a span,
  #main_visual .m_btn > li > a img:last-child {
    display: none;
  }
}


/* ============================================================
   홈 서브 섹션 — 상단 여백 처리
   ※ FullPage.js paddingTop:'100px' 옵션으로 모든 섹션에 padding-top:100px 자동 적용.
      → 섹션 내부 컨테이너에 별도 padding-top 추가 시 200px 이중 오프셋 발생하므로
         내부 컨테이너 padding-top은 0 또는 최소값으로 유지.
============================================================ */

/* secondPage — con1: FullPage paddingTop(100px) 이후 추가 여백 32px */
#con1 .con1_top {
  padding-top: 32px !important;
}

/* 4thPage — con4: FullPage paddingTop(100px) 이후 추가 여백 32px */
#con4 > .inner {
  padding-top: 32px !important;
}

/* 4thPage con4 배경 이미지 제거 (style.css: bg_txt.png 좌하단 워터마크 배경) */
#con4 {
  background-image: none !important;
}

/* ============================================================
   #con2 — Our Products 카드 그리드 (신규)
   작성일: 2026-05
   적용: body_default.php #con2 섹션
============================================================ */

/* ────────────────────────────────────────
   1. 섹션 전체 레이아웃: 좌 타이틀 + 우 카드 그리드
──────────────────────────────────────── */
#con2 .hs-products-wrap {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  /* padding-top: FullPage paddingTop(100px) 이후 32px 추가 여백으로 여유 확보 (32도 너무 붙어서 60px로 추가 수정함) */
  padding: 60px 0 80px;
  min-height: 100%;
  box-sizing: border-box;
}

/* ── 좌측 컬럼 ── */
#con2 .hs-products-left {
  flex: 0 0 260px;
  /* [수정] sticky → relative: FullPage.js 섹션 전환 시 레이아웃 깨짐 방지 */
  position: relative;
  top: auto;
}

#con2 .hs-prod-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;  /* secondPage .title span(22px)과 동일 크기 */
  font-weight: 700;
  color: var(--col-bar, #B40019);
  letter-spacing: 0.3px;
  margin-bottom: 14px;
}

#con2 .hs-prod-h2 {
  font-size: 50px;
  font-weight: 900;
  line-height: 1.15;
  color: #1a1a1a;
  margin-bottom: 20px;
}

#con2 .hs-prod-desc {
  font-size: 19px;
  line-height: 1.85;
  color: #444;
  font-weight: 500;
  margin-bottom: 24px;
}

#con2 .hs-all-link {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  color: var(--col-bar, #B40019);
  text-decoration: none;
  margin-bottom: 32px;
  transition: gap .15s;
}
#con2 .hs-all-link:hover { text-decoration: underline; }

/* ── 검색창 ── */
#con2 .hs-search-form { width: 100%; }
#con2 .hs-search-box {
  display: flex;
  border: 1.5px solid #d0d0d0;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  transition: border-color .2s;
}
#con2 .hs-search-box:focus-within { border-color: var(--col-bar, #B40019); }
#con2 .hs-search-box input {
  flex: 1;
  border: none;
  outline: none;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 500;
  background: transparent;
  color: #111;
}
#con2 .hs-search-box button {
  flex-shrink: 0;
  background: var(--col-bar, #B40019);
  color: #fff;
  border: none;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}
#con2 .hs-search-box button:hover { background: #940015; }

/* ── 우측 카드 그리드 ── */
#con2 .hs-products-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-content: start;
}

/* ────────────────────────────────────────
   2. 카테고리 카드 (기존 style.css에 없으므로 전체 정의)
──────────────────────────────────────── */
#con2 .prod-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 165px;
  background: #fff;
  border: 1.5px solid #e2e2e2;
  border-radius: 18px;
  padding: 28px 26px 30px;
  text-decoration: none;
  color: inherit;
  transition: background .25s, color .25s, border-color .25s,
              transform .2s, box-shadow .2s;
  position: relative;
}
#con2 .prod-card:hover,
#con2 .prod-card:focus-visible {
  background: #354A62;
  border-color: #708399;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(53, 74, 98, .18);
  text-decoration: none;
  color: inherit;
}

/* CATEGORY 코드 칩 (차분하고 세련된 블루/슬레이트 톤으로 조정) */
#con2 .cat-code {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #0070C0;
  background: #F0F4F8;
  border: 1px solid #D8E2EC;
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 14px;
  letter-spacing: .8px;
  transition: color .25s, background .25s, border-color .25s;
  width: fit-content;
}
#con2 .prod-card:hover .cat-code,
#con2 .prod-card:focus-visible .cat-code {
  color: #ffffff;
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .3);
}

/* 카테고리명 */
#con2 .prod-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: #111;
  margin-bottom: 10px;
  line-height: 1.3;
  transition: color .25s;
}
#con2 .prod-card:hover h3,
#con2 .prod-card:focus-visible h3 { color: #fff; }

/* 대표 품목 (줄바꿈 시 제품명 단어 분리 방지) */
#con2 .prod-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  font-weight: 500;
  margin-top: 6px;
  transition: color .25s;
}

#con2 .prod-list .prod-item {
  display: inline-block;
  white-space: nowrap !important; /* 제품명이 단어 중간에서 쪼개지지 않도록 방지 */
  word-break: keep-all !important;
}

#con2 .prod-list .prod-item:not(:last-child)::after {
  content: ",";
  margin-right: 3px;
}

#con2 .prod-card:hover .prod-list,
#con2 .prod-card:focus-visible .prod-list,
#con2 .prod-card:hover .prod-list .prod-item,
#con2 .prod-card:focus-visible .prod-list .prod-item { 
  color: rgba(255, 255, 255, .85); 
}

/* ============================================================
   새로운 언어 선택 콤보박스 (카테고리 캡슐 뱃지 스타일)
============================================================ */
#header #langSelect.custom-select,
#langSelect.custom-select {
  position: absolute !important;
  right: 60px !important;
  top: 34px !important;
  z-index: 1001 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

#header #langSelect_mob.custom-select,
#langSelect_mob.custom-select {
  position: absolute !important;
  left: 20px !important;
  top: 25px !important;
  z-index: 1001 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 1023px) {
  #header #langSelect.custom-select,
  #langSelect.custom-select {
    display: none !important;
  }
}

.hs-lang-pill-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.hs-lang-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  background: #F0F4F8;
  border: 1px solid #D8E2EC;
  border-radius: 999px;
  color: #0070C0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.hs-lang-pill-btn:hover,
.custom-select.open .hs-lang-pill-btn {
  background: #E2EBF4;
  border-color: #0070C0;
  color: #005a9e;
  box-shadow: 0 2px 6px rgba(0, 112, 192, 0.15);
}

.hs-lang-pill-arrow {
  transition: transform 0.25s ease;
  stroke: currentColor;
}

.custom-select.open .hs-lang-pill-arrow {
  transform: rotate(180deg);
}

.hs-lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 130px;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 6px;
  margin: 0;
  list-style: none;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9999;
}

.custom-select.open .hs-lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hs-lang-dropdown li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-lang-dropdown li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 12.5px;
  color: #334155;
  transition: all 0.15s ease;
}

.hs-lang-dropdown li a .lang-code {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  color: #64748b;
  letter-spacing: 0.5px;
}

.hs-lang-dropdown li a .lang-label {
  font-size: 12px;
  font-weight: 500;
}

.hs-lang-dropdown li:hover a {
  background: #F0F7FF;
  color: #0070C0;
}
.hs-lang-dropdown li:hover a .lang-code {
  color: #0070C0;
}

.hs-lang-dropdown li.active a {
  background: #EBF3FA;
  color: #0070C0;
  font-weight: 700;
}
.hs-lang-dropdown li.active a .lang-code {
  color: #0070C0;
  font-weight: 800;
}


/* ────────────────────────────────────────
   3. ALL CATEGORIES 전체보기 카드 (마지막)
──────────────────────────────────────── */
#con2 .prod-card.all-card {
  background: rgba(180, 0, 25, .06);
  border-color: rgba(180, 0, 25, .18);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 165px;
  padding: 28px 26px 30px;
}
#con2 .prod-card.all-card:hover {
  background: var(--col-bar, #B40019);
  border-color: var(--col-bar, #B40019);
}

#con2 .all-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--col-bar, #B40019);
  letter-spacing: 1px;
  margin-bottom: 10px;
  transition: color .25s;
}
#con2 .prod-card.all-card:hover .all-label { color: rgba(255, 255, 255, .85); }

#con2 .all-title {
  font-size: 20px;
  font-weight: 800;
  color: #111;
  line-height: 1.4;
  margin-bottom: 20px;
  transition: color .25s;
}
#con2 .prod-card.all-card:hover .all-title { color: #fff; }

#con2 .all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--col-bar, #B40019);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  align-self: flex-start;
  transition: background .2s, color .2s;
}
#con2 .prod-card.all-card:hover .all-btn {
  background: #fff;
  color: var(--col-bar, #B40019);
}

/* ────────────────────────────────────────
   4. 반응형
──────────────────────────────────────── */
@media (max-width: 1200px) {
  #con2 .hs-products-wrap { gap: 40px; }
  #con2 .hs-products-left { flex: 0 0 220px; }
  #con2 .hs-products-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

@media (max-width: 1023px) {
  #con2 .hs-products-wrap {
    flex-direction: column;
    gap: 32px;
    padding: 60px 0;
  }
  #con2 .hs-products-left {
    flex: none;
    width: 100%;
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 32px;
  }
  #con2 .hs-prod-h2 { font-size: 40px; }
  #con2 .hs-products-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  #con2 .hs-products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  #con2 .hs-prod-h2 { font-size: 32px; }
  #con2 .prod-card { padding: 16px 16px 18px; }
  #con2 .prod-card h3 { font-size: 15px; }
}


/* ============================================================
   FOOTER — 2단 구조 [리뉴얼]
   상단: .hs-foot-info  — 흰색, 회사정보 + 관련사이트 + copyright
   하단: .hs-foot-cta   — 검은색 CTA 띠
============================================================ */

/* 기존 footer 스타일 초기화 */
footer.hs-footer {
  background: transparent;
  height: auto;
  width: 100%;
}

/* ── 상단: 흰색 회사정보 ── */
.hs-foot-info {
  background: #ffffff;
  padding: 56px 0 0;
  border-top: 1px solid #e8e8e8;
}

.hs-foot-info-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding-bottom: 40px;
}

/* 로고 */
.hs-foot-logo {
  display: block;
  width: 120px;
  margin-bottom: 18px;
}

/* 회사명 */
.hs-foot-company {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 16px;
}

/* 연락처 목록 */
.hs-foot-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 32px;
}
.hs-foot-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #555;
}
.hs-foot-contact b {
  font-weight: 700;
  color: #333;
  white-space: nowrap;
}

/* 관련사이트 드롭다운 */
.hs-related-sites {
  width: 200px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 14px;
  color: #333;
  background: #fff;
  cursor: pointer;
}

/* Copyright 행 */
.hs-foot-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ebebeb;
  padding: 16px 0;
  font-size: 13px;
  color: #999;
}
.hs-foot-copy a {
  color: #999;
  text-decoration: none;
  transition: color .2s;
}
.hs-foot-copy a:hover { color: #333; }

/* ── 하단: 검은색 CTA 띠 ── */
.hs-foot-cta {
  background: #111111;
  padding: 28px 0;
}
.hs-foot-cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.hs-foot-cta-text {
  display: flex;
  align-items: center;
  gap: 28px;
}
.hs-foot-cta-text strong {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}
.hs-foot-cta-text span {
  font-size: 22px;
  font-weight: 700;
  color: var(--col-bar, #B40019);
  letter-spacing: -0.5px;
}
.hs-foot-cta-btn {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 32px;
  background: var(--col-bar, #B40019);
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .2s;
}
.hs-foot-cta-btn:hover { background: #940015; }

/* ── 반응형 ── */
@media (max-width: 1023px) {
  .hs-foot-info-inner { flex-direction: column; gap: 24px; }
  .hs-foot-right { width: 100%; }
  .hs-foot-cta-text span { font-size: 18px; }
}
@media (max-width: 767px) {
  .hs-foot-cta-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hs-foot-cta-text { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hs-foot-copy { flex-direction: column; align-items: flex-start; gap: 6px; }
}


/* ============================================================
   제품문의 페이지 — body_product_s5.php
   inquiry.html 디자인 적용
============================================================ */

/* ── 상단 컴팩트 서브 비주얼 ── */
.hs-inq-visual {
  background: linear-gradient(135deg, #0d1e36 0%, #1a2a46 100%);
  padding: 52px 0 48px;
}
.hs-inq-tag {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--col-bar, #B40019);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.hs-inq-title {
  font-size: 38px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 14px;
}
.hs-inq-desc {
  font-size: 15px;
  color: rgba(255,255,255,.62);
  line-height: 1.8;
}

/* ── 본문 래퍼 ── */
.hs-inq-body {
  padding: 72px 0 100px;
  background: #fff;
}
.hs-inq-wrap {
  display: flex;
  gap: 72px;
  align-items: flex-start;
}

/* ── 좌: 안내 패널 ── */
.hs-inq-left {
  flex: 0 0 300px;
  position: sticky;
  top: 120px;
}
.hs-inq-left-tag {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--col-bar, #B40019);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.hs-inq-left-h2 {
  font-size: 38px;
  font-weight: 900;
  line-height: 1.25;
  color: #1a1a1a;
  margin-bottom: 20px;
}
.hs-inq-left-desc {
  font-size: 17px;
  line-height: 1.85;
  color: #444;
  font-weight: 500;
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid #e8e8e8;
}
/* 연락처 목록 */
.hs-inq-contacts { display: flex; flex-direction: column; gap: 20px; }
.hs-inq-ci { display: flex; align-items: flex-start; gap: 14px; }
.hs-inq-ci-icon {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 50%;
  background: rgba(180,0,25,.08);
  display: flex; align-items: center; justify-content: center;
}
.hs-inq-ci-icon svg {
  width: 18px; height: 18px;
  stroke: var(--col-bar, #B40019);
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.hs-inq-ci-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  margin-bottom: 4px;
}
.hs-inq-ci-value {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #111;
  line-height: 1.4;
}

/* ── 우: 폼 영역 ── */
.hs-inq-right {
  flex: 1;
  background: #F5F5F5;
  border-radius: 24px;
  padding: 52px 56px;
}

/* 2열 그리드 */
.hs-inq-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin-bottom: 16px;
}
.hs-inq-field { display: flex; flex-direction: column; }
.hs-inq-full  { margin-bottom: 16px; }

.hs-inq-field label {
  font-size: 17px;
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
}
.hs-inq-req {
  color: var(--col-bar, #B40019);
  margin-left: 3px;
}

.hs-inq-right input,
.hs-inq-right textarea {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid #d0d0d0;
  border-radius: 10px;
  padding: 14px 20px;
  font-size: 17px;
  font-weight: 500;
  color: #111;
  font-family: 'Noto Sans KR', sans-serif;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.hs-inq-right input::placeholder,
.hs-inq-right textarea::placeholder { color: #888; font-size: 16px; }
.hs-inq-right input:focus,
.hs-inq-right textarea:focus {
  border-color: var(--col-bar, #B40019);
  box-shadow: 0 0 0 3px rgba(180,0,25,.08);
}
.hs-inq-right textarea {
  height: 170px;
  resize: vertical;
}

/* 에러 메시지 */
.hs-inq-error {
  display: block;
  font-size: 14px;
  color: var(--col-bar, #B40019);
  font-weight: 600;
  margin: 4px 0 16px;
  min-height: 20px;
}

/* 제출 버튼 */
.hs-inq-submit {
  width: 100%;
  height: 60px;
  background: var(--col-bar, #B40019);
  color: #ffffff;
  font-size: 19px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
  transition: background .2s;
  margin-top: 8px;
}
.hs-inq-submit:hover { background: #940015; }

/* ── 반응형 ── */
@media (max-width: 1100px) {
  .hs-inq-wrap   { gap: 48px; }
  .hs-inq-left   { flex: 0 0 260px; }
  .hs-inq-right  { padding: 40px 40px; }
}
@media (max-width: 900px) {
  .hs-inq-wrap   { flex-direction: column; }
  .hs-inq-left   { position: static; flex: none; width: 100%; }
  .hs-inq-left-h2 { font-size: 28px; }
  .hs-inq-left-desc { margin-bottom: 24px; padding-bottom: 24px; }
  .hs-inq-contacts { flex-direction: row; flex-wrap: wrap; gap: 16px; }
}
@media (max-width: 640px) {
  .hs-inq-grid2  { grid-template-columns: 1fr; }
  .hs-inq-right  { padding: 32px 24px; }
  .hs-inq-title  { font-size: 28px; }
}

/* ============================================================
   FOOTER POLICY LINKS + IN-PAGE MODAL
============================================================ */
footer .copy_con{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:52px}
footer .footer_policies{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.65)}
footer .footer_policy_btn{border:0;padding:4px 0;background:transparent;color:#fff;font:inherit;cursor:pointer}
footer .footer_policy_btn:hover,footer .footer_policy_btn:focus-visible{text-decoration:underline;text-underline-offset:4px}
body.policy_modal_open{overflow:hidden}.policy_modal[aria-hidden="true"]{display:none}.policy_modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px}.policy_modal_backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}.policy_modal_panel{position:relative;width:min(900px,100%);height:min(760px,calc(100vh - 48px));background:#fff;border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column}.policy_modal_head{min-height:68px;padding:16px 20px 16px 28px;border-bottom:1px solid #ddd;display:flex;align-items:center;justify-content:space-between}.policy_modal_head h2{margin:0;color:#111;font-size:22px}.policy_modal_close{width:40px;height:40px;border:0;border-radius:50%;background:#f2f2f2;color:#111;font-size:30px;line-height:1;cursor:pointer}.policy_modal iframe{flex:1;width:100%;border:0;background:#f6f6f6}.policy_modal_fallback{margin:0;padding:10px 20px;background:#f6f6f6;color:#555;font-size:13px;text-align:center}.policy_modal_fallback a{color:var(--col-bar,#B40019);font-weight:700}

/* ============================================================
   MOBILE FLOW + NAVIGATION FIXES
============================================================ */
@media(max-width:1023px){
#fullpage>.section{position:relative!important;height:auto!important;min-height:0!important;padding-top:0!important;display:block!important}
#main_visual.section{margin-top:70px;height:min(calc(100svh - 70px),680px)!important;min-height:520px!important;overflow:hidden}
#main_visual .mv_wrap{position:relative!important;inset:auto!important;height:100%!important;min-height:100%!important}
#main_visual .mv_list,#main_visual .hs-hero-slide{height:100%!important;min-height:100%!important}
#con1{clear:both;margin-top:0!important;padding-top:64px!important}#con1 .con1_top{padding-top:0!important}#con2 .hs-products-wrap{padding:60px 3%}#con4>.inner{padding-top:0!important}#con6{clear:both;position:relative;z-index:1}
.navi .lnb h3>a[aria-expanded]{position:relative;padding-right:28px}.navi .lnb h3>a[aria-expanded]::after{content:'';position:absolute;right:2px;top:50%;width:8px;height:8px;border-right:2px solid #777;border-bottom:2px solid #777;transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}.navi .lnb h3>a[aria-expanded="true"]::after{transform:translateY(-20%) rotate(225deg)}
#sub_contents .sticky{position:sticky;top:70px;z-index:90;width:100%;padding:10px 3%;margin-bottom:36px;background:rgba(255,255,255,.96);box-shadow:0 8px 18px rgba(0,0,0,.06)}#sub_contents .sub_btn{display:flex;justify-content:flex-start;gap:8px;overflow-x:auto;padding:6px;border-radius:14px;background:#f2f2f2;scrollbar-width:thin;-webkit-overflow-scrolling:touch}#sub_contents .sub_btn li{flex:0 0 auto;width:auto;min-width:112px;margin:0;border-radius:10px;text-align:center}#sub_contents .sub_btn li a{display:block;padding:11px 16px;color:#222;font-size:14px;font-weight:700;white-space:nowrap}#sub_contents .sub_btn li.on{background:var(--col-bar,#B40019)}#sub_contents .sub_btn li.on a{color:#fff}
footer .copy_con{flex-direction:column;align-items:flex-start;gap:8px}.policy_modal{padding:12px}.policy_modal_panel{height:calc(100svh - 24px);border-radius:12px}.policy_modal_head{min-height:60px;padding:12px 14px 12px 18px}.policy_modal_head h2{font-size:18px}
}
/* ============================================================
   CROSS-BROWSER R&D MOBILE WIDTH FIX + HTML POLICY CONTENT
============================================================ */
.policy_modal_body{flex:1;min-height:0;overflow-y:auto;padding:28px 32px;background:#fff;color:#222;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.policy_document{max-width:760px;margin:0 auto;font-family:'Pretendard','Noto Sans KR',sans-serif;font-size:15px;line-height:1.8;word-break:keep-all;overflow-wrap:break-word}.policy_document>p:first-child{margin-top:0}.policy_document section{margin-top:28px}.policy_document h3{margin:0 0 10px;color:#111;font-size:19px;line-height:1.45}.policy_document h4{margin:16px 0 6px;color:#222;font-size:16px}.policy_document p{margin:8px 0}.policy_document ul,.policy_document ol{margin:8px 0;padding-left:24px}.policy_document li{margin:4px 0}.policy_contact_table{margin:14px 0;border-top:1px solid #bbb}.policy_contact_table>div{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid #ddd}.policy_contact_table b,.policy_contact_table span{padding:10px 12px}.policy_contact_table b{background:#f6f6f6}.policy_document_short{padding-top:8px}.policy_effective_date{margin-top:28px!important}
@media(max-width:1023px){
#con4{width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important;box-sizing:border-box!important;padding:64px 0!important}
#con4>.inner{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:0 3%!important;padding-right:3%!important;box-sizing:border-box!important}
#con4 .title{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:0!important;box-sizing:border-box!important}
#con4 .title span,#con4 .title h2{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;white-space:normal!important;word-break:keep-all!important;overflow-wrap:break-word!important;writing-mode:horizontal-tb!important}
#con4 .con4_btns{display:flex!important;flex-direction:column!important;width:100%!important;max-width:100%!important;min-width:0!important;margin-top:36px!important}.con4_btns li,#con4 .con4_btns li{width:100%!important;max-width:100%!important;min-width:0!important;margin-right:0!important;box-sizing:border-box!important}
.policy_modal_body{padding:22px 18px}.policy_document{font-size:14px;line-height:1.75}.policy_document h3{font-size:17px}.policy_contact_table>div{grid-template-columns:120px 1fr}.policy_contact_table b,.policy_contact_table span{padding:9px 8px}
}
/* ============================================================
   FOOTER HIERARCHY + MOBILE SUBPAGE USABILITY FIXES
============================================================ */
footer .f_1 .f_bot > strong{
  font-size:16px!important;
  line-height:1.45;
  font-weight:800;
}
footer .copy_con,
footer .copy_con p,
footer .footer_policy_btn{
  font-size:13px!important;
  line-height:1.45;
  font-weight:500;
}

/* fullPage applies 100px top padding in addition to the section height. */
@media(min-width:1024px){
  #con6 .foot_banner{
    height:calc(100vh - 375px)!important;
    min-height:300px;
  }
  #con6 footer{
    height:275px!important;
    min-height:275px;
  }
}

@media(max-width:1023px){
  /* Keep subpage navigation in document flow so it never covers content. */
  #sub_contents .sticky{
    position:relative!important;
    top:auto!important;
    z-index:1!important;
    box-shadow:none!important;
  }

  footer .f_1 .f_bot > strong{
    font-size:16px!important;
    margin-bottom:14px;
  }
  footer .copy_con,
  footer .copy_con p,
  footer .footer_policy_btn{
    font-size:12px!important;
  }

  /* Career department tabs: consistent one-line rail across mobile browsers. */
  .material_wrap .job_info.inner{
    width:94%!important;
    max-width:94%!important;
    margin:32px auto 0!important;
    padding:0!important;
  }
  .material_wrap .job_info .rc_tab{
    display:flex!important;
    flex-flow:row nowrap!important;
    justify-content:flex-start!important;
    align-items:center!important;
    width:100%!important;
    max-width:100%!important;
    margin:28px 0 22px!important;
    padding:8px!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    border-radius:14px!important;
    background:#f5f5f5!important;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box!important;
  }
  .material_wrap .job_info .rc_tab li{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:92px!important;
    margin:0!important;
    padding:0!important;
    font-size:14px!important;
    line-height:1.35!important;
    text-align:center!important;
  }
  .material_wrap .job_info .rc_tab li::after{
    display:none!important;
    content:none!important;
  }
  .material_wrap .job_info .rc_tab li a{
    display:block!important;
    padding:11px 13px!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    color:#333!important;
    border-radius:9px!important;
  }
  .material_wrap .job_info .rc_tab li.on a{
    color:#fff!important;
    background:var(--col-bar,#B40019)!important;
  }
  .material_wrap .job_info .rc_tab li.on a::after{
    display:none!important;
    content:none!important;
  }
  .material_wrap .job_info .rc_con,
  .material_wrap .job_info .job,
  .material_wrap .job_info .job .txt{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}
/* ============================================================
   MOBILE TABS — SHOW EVERY OPTION WITHOUT HORIZONTAL SCROLL
============================================================ */
@media(max-width:1023px){
  /* Subpage navigation: two columns by default; three items fit in one row. */
  #sub_contents .sub_btn{
    display:flex!important;
    flex-flow:row wrap!important;
    justify-content:stretch!important;
    gap:8px!important;
    overflow:visible!important;
    padding:8px!important;
  }
  #sub_contents .sub_btn li{
    flex:1 1 calc(50% - 4px)!important;
    width:auto!important;
    min-width:0!important;
  }
  #sub_contents .sub_btn li:first-child:nth-last-child(3),
  #sub_contents .sub_btn li:first-child:nth-last-child(3) ~ li{
    flex-basis:calc(33.333% - 6px)!important;
  }
  #sub_contents .sub_btn li a{
    padding:11px 6px!important;
    font-size:13px!important;
    line-height:1.35!important;
    white-space:normal!important;
    word-break:keep-all!important;
  }

  /* Career departments: eight visible buttons in a fixed 4 x 2 grid. */
  .material_wrap .job_info .rc_tab{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    gap:6px!important;
    overflow:visible!important;
    padding:8px!important;
  }
  .material_wrap .job_info .rc_tab li{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  .material_wrap .job_info .rc_tab li a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:44px!important;
    padding:8px 2px!important;
    font-size:12px!important;
    line-height:1.25!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
}
/* ============================================================
   MOBILE TAB SIZING + PRODUCT CATEGORY FLOW
============================================================ */
@media(max-width:1023px){
  /* The gray background must contain every wrapped subpage button. */
  #sub_contents .sub_btn{
    height:auto!important;
    min-height:0!important;
    align-items:stretch!important;
    align-content:stretch!important;
    margin-bottom:42px!important;
    border-radius:14px!important;
    background:#f2f2f2!important;
  }
  #sub_contents .sub_btn li{
    display:flex!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    height:44px!important;
    min-height:44px!important;
    line-height:1.25!important;
    margin:0!important;
    border-radius:9px!important;
  }
  #sub_contents .sub_btn li a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    padding:6px 4px!important;
    text-align:center!important;
    box-sizing:border-box!important;
  }
  #sub_contents .sub_btn li.on{
  }
  #sub_contents > .inner.sticky > .sub_btn > li > a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:40px!important;
    min-height:40px!important;
    padding:4px!important;
    color:#222!important;
    font-size:12px!important;
    line-height:1.25!important;
    text-align:center!important;
    white-space:normal!important;
    word-break:keep-all!important;
    border-radius:8px!important;
    box-sizing:border-box!important;
  }
  #sub_contents > .inner.sticky > .sub_btn > li.on{
    background:transparent!important;
  }
  #sub_contents > .inner.sticky > .sub_btn > li.on > a{
    color:#fff!important;
    background:var(--col-bar,#B40019)!important;
  }

  #sub_contents .material_wrap > .inner > .tab_btn.sticky3{
    position:static!important;
    inset:auto!important;
    top:auto!important;
    z-index:auto!important;
    transform:none!important;
  }
}
/* Talent Pool: keep the six-step process legible on narrow mobile screens. */
@media screen and (max-width: 1023px) {
  .tpool_wrap .t_process.inner {
    width: 94% !important;
    margin: 40px auto 0 !important;
    padding: 0 !important;
  }

  .tpool_wrap .t_process .rp_list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 30px !important;
    margin: 0 0 42px !important;
  }

  .tpool_wrap .t_process .rp_list li {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
  }

  .tpool_wrap .t_process .rp_list li img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    object-fit: contain !important;
  }

  .tpool_wrap .t_process .rp_list li span {
    position: absolute !important;
    top: 27% !important;
    left: 50% !important;
    width: 76% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    color: #b40019 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }

  .tpool_wrap .t_process .rp_list li p {
    position: absolute !important;
    top: 57% !important;
    left: 50% !important;
    width: 72% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    word-break: keep-all !important;
  }

  .tpool_wrap .t_process .rp_list li::after {
    top: 50% !important;
    right: -23px !important;
    transform: translateY(-50%) !important;
  }

  .tpool_wrap .t_process .rp_list li:nth-child(even)::after,
  .tpool_wrap .t_process .rp_list li:last-child::after {
    content: none !important;
  }
}

/* Career department selector: softer active state on mobile (approved B option). */
@media screen and (max-width: 1023px) {
  .material_wrap .job_info .rc_tab li.on a {
    color: #b40019 !important;
    background: #fff1f3 !important;
    border: 1.5px solid #c95a6a !important;
    box-shadow: 0 2px 6px rgba(180, 0, 25, 0.10) !important;
    box-sizing: border-box !important;
  }
}

/* Recruitment page: restore a clear mobile heading hierarchy. */
@media screen and (max-width: 1023px) {
  .recruit_wrap h3.h3_tit {
    padding-left: 16px !important;
    margin-bottom: 28px !important;
    font-size: 24px !important;
    line-height: 1.3 !important;
  }

  .recruit_wrap h3.h3_tit::before {
    width: 4px !important;
    height: 24px !important;
    top: 3px !important;
  }
}

/* Talent Pool registration: scoped navy action button. */
.tpool_wrap .inquiry2_box .inq_btn {
  background: #1c2d42 !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.tpool_wrap .inquiry2_box .inq_btn:hover,
.tpool_wrap .inquiry2_box .inq_btn:focus-visible {
  background: #2e4461 !important;
}

.tpool_wrap .inquiry2_box .inq_btn:focus-visible {
  outline: 3px solid rgba(180, 0, 25, 0.28);
  outline-offset: 3px;
}

/* Product interactions: one slate family, scaled by component weight. */
.material_wrap .mat2_list > li:hover,
.material_wrap .mat2_list > li:focus-within {
  background: #e8eef5 !important;
  border-color: #708399 !important;
  box-shadow: 0 8px 18px rgba(53, 74, 98, 0.12);
  transform: translateY(-2px);
}

.material_wrap .mat2_list > li:hover h3,
.material_wrap .mat2_list > li:focus-within h3 {
  color: #1c2d42 !important;
}


/* ============================================================
   MOBILE MAIN — final production overrides
============================================================ */
@media (max-width: 1023px) {
  /* Keep slide controls clear of the hero copy. */
  #main_visual .mv_wrap .mv_pg .mv_prev,
  #main_visual .mvpg_inner .mv_prev,
  #main_visual .mv_prev,
  #main_visual .mv_wrap .mv_pg .mv_next,
  #main_visual .mvpg_inner .mv_next,
  #main_visual .mv_next {
    top: 20px !important;
    bottom: auto !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    transform: none !important;
  }
  #main_visual .mv_wrap .mv_pg .mv_prev,
  #main_visual .mvpg_inner .mv_prev,
  #main_visual .mv_prev {
    left: auto !important;
    right: 72px !important;
  }
  #main_visual .mv_wrap .mv_pg .mv_next,
  #main_visual .mvpg_inner .mv_next,
  #main_visual .mv_next {
    left: auto !important;
    right: 20px !important;
  }
  #defaultTopBtn,
  #defaultTopBtn img {
    width: 44px !important;
    height: 44px !important;
  }

  /* Match the About Company rhythm to the following product section. */
  #con1 { padding-top: 56px !important; }
  #con1 .con1_top { padding-bottom: 56px !important; }
  #con1 .title span {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px !important;
    line-height: 1.25;
    font-weight: 700;
  }

  /* Equal three-column company facts, including two-line labels. */
  #con1 .con1_bot {
    height: auto !important;
    min-height: 250px;
    padding: 42px 0;
    box-sizing: border-box;
  }
  #con1 .con1_bot .inner { height: 100%; }
  #con1 .con1_bot ul {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
    width: 100%;
  }
  #con1 .con1_bot ul li,
  #con1 .con1_bot ul li:nth-child(1),
  #con1 .con1_bot ul li:nth-child(2) {
    min-width: 0;
    margin: 0 !important;
  }
  #con1 .con1_bot ul li span {
    display: flex;
    align-items: flex-start;
    min-height: 2.5em;
    font-size: 13px !important;
    line-height: 1.25;
    word-break: keep-all;
  }
  #con1 .con1_bot ul li h3 {
    margin: 14px 0 16px !important;
    font-size: clamp(32px, 9vw, 40px) !important;
    line-height: 1;
    white-space: nowrap;
  }
  #con1 .con1_bot ul li p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    word-break: keep-all;
  }
}