@charset "utf-8";
/* ═══════════════════════════════════════════
   PAGE-COMMON.CSS
   서브페이지(project, news, awds, history, group, hr, Q-E ...)
   전부가 공유하는 "상단 공통 영역" 전용 CSS
   - .sub-nav      : 헤더 아래 초록색 서브메뉴 바
   - .page-title-block : 페이지 큰 제목
   - .breadcrumb-bar / .breadcrumb : 홈 > 현위치

   ⚠️ 주의
   - reset / :root 변수 / body / #globalDropdown / footer / .back-to-top
     은 이미 style.css에 있으므로 여기서는 절대 다시 정의하지 않습니다.
   - 페이지별로 패딩 값을 다르게 주고 싶으면, 이 파일을 고치지 말고
     해당 페이지의 개별 css 파일에 1~2줄짜리 오버라이드만 추가하세요.
     예) news_detail.css 안에:
         .page-title-block { padding: 140px 0 0; }
═══════════════════════════════════════════ */

/* ══════════════════════════
   SUB NAV (sticky)
══════════════════════════ */
.sub-nav {
  position: sticky;
  top: var(--header-h, 84px);
  z-index: 150;
  background: var(--green);
  width: 100%;
  margin-bottom: 64px;
  border-top: 1px solid rgba(0, 0, 0, 0.03);
}
.sub-nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  height: 52px;
}
.sub-nav-inner li { position: relative; }
.sub-nav-inner li + li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 14px;
  background: rgba(255, 255, 255, 0.35);
}
.sub-nav-inner a {
  display: block;
  cursor: pointer;
  padding: 0 28px 0 36px;
  height: 52px;
  line-height: 52px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  letter-spacing: 0.04em;
  position: relative;
  transition: color 0.2s;
  text-decoration: none !important;
}
.sub-nav-inner a::before {
  content: '';
  position: absolute;
  top: 15px; left: 26px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.sub-nav-inner a:hover,
.sub-nav-inner a.active {
  color: #fff;
  background: none !important;
  text-decoration: none !important;
}
.sub-nav-inner a:hover::before,
.sub-nav-inner a.active::before { opacity: 1; transform: scale(1); }

/* ══════════════════════════
   PAGE TITLE
══════════════════════════ */
.page-title-block { text-align: center; padding: 80px 0 0; }
.page-title-block h1 {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #111;
  line-height: 1.2;
}

/* ══════════════════════════
   BREADCRUMB
══════════════════════════ */
.breadcrumb-bar { padding: 18px 0 0; text-align: center; width: 100%; }
.breadcrumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 16px;
  color: #999;
  padding-bottom: 50px;
  margin: 0 auto;
}
.breadcrumb a { color: #666; cursor: pointer; text-decoration: none !important; }
.breadcrumb a:hover { color: var(--green); text-decoration: none !important; }
.breadcrumb .sep { color: #ccc; }
.breadcrumb .current { color: #000; }
.breadcrumb-bar::after {
  content: '';
  display: block;
  max-width: 1400px;
  height: 1px;
  background: #eaeaea;
  margin: 0 auto;
}

/* ══════════════════════════
   RESPONSIVE ≤ 1024px
══════════════════════════ */
@media (max-width: 1024px) {
  .sub-nav { top: 76px; }
  .sub-nav-inner { justify-content: flex-start; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
  .sub-nav-inner::-webkit-scrollbar { display: none; }
  .sub-nav-inner a { padding: 0 20px; font-size: 14px; }
  .sub-nav-inner a::before { display: none; }
}

/* ══════════════════════════
   RESPONSIVE ≤ 768px
══════════════════════════ */
@media (max-width: 768px) {
  .sub-nav { top: 52px; }
  .sub-nav-inner { padding: 0 8px; }
  .sub-nav-inner a { padding: 0 18px; font-size: 14px; }
  .page-title-block { padding: 60px 0 0; }
  .page-title-block h1 { font-size: 28px; }
  .breadcrumb { padding-bottom: 40px; }
}