/* [전체 적용] 헤더 평소 투명 + 스크롤 따라오게(fixed) */
body.ax-site .header {
  background: transparent;
  transition: background 0s;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
/* 평소 헤더 메뉴 글자: 색상·굵기 (크기는 큰 화면 전용으로 분리) */
body.ax-site .header .depth1 > li > a {
  color: #fff;
  font-weight: 700;
}
/* 헤더에 마우스 올리면 흰 배경 */
body.ax-site .header:hover {
  background: #fff;
}
body.ax-site .header:hover .depth1 > li > a {
  color: #222;
}
/* 현재 페이지 메뉴는 포인트 색 고정 */
body.ax-site .header .depth1 > li > a.active {
  color: #c8005f;
}
/* 마우스 올린 메뉴만 포인트 색으로 */
body.ax-site .header .depth1 > li:hover > a {
  color: #c8005f;
}
/* 스크롤 시 흰 배경 (원본 sticky + 우리 scrolled 둘 다) */
body.ax-site .header.sticky,
body.ax-site .header.scrolled {
  background: #fff;
}
body.ax-site .header.sticky .depth1 > li > a,
body.ax-site .header.scrolled .depth1 > li > a {
  color: #222;
}

/* 메뉴 가운데 정렬 (1025px 이상 모든 화면) */
@media only screen and (min-width: 1025px) {
  body.ax-site .wrapper .header .gnb {
    margin: 0 auto;
  }
}

/* 큰 화면(1400px 이상)에서만 메뉴 글자 키우고 간격 넓히기 */
@media only screen and (min-width: 1400px) {
  body.ax-site .wrapper .header {
    --header-gnb-space: 0 6rem;   /* 메뉴 사이 간격 */
  }
  body.ax-site .header .depth1 > li > a {
    font-size: 18px;              /* 큰 화면에서만 글자 키움 */
  }
}

/* [전체 적용] 상단 배경 이미지 영역 높이 (변수 덮어쓰기) */
@media only screen and (min-width: 1025px) {
  body.ax-site .wrapper .container {
    --visual-height: 65rem;    /* 배경 이미지 영역 높이 */
    --visual-fontSize: 8rem;   /* 제목 글자 크기 */
  }
}

/* 하위메뉴 설정 */
@media only screen and (min-width: 1025px) {
  /* 하위 메뉴 박스 테두리 + 위치 */
  body.ax-site .wrapper .header .gnb .submenu {
    top: calc(100% + 1.5rem);   /* 헤더 선까지 거리 */
    border: 1px solid #ddd;
  }
  /* 하위 메뉴 안쪽 항목들을 넓고 시원하게 */
  body.ax-site .wrapper .header .gnb .submenu > ul {
    gap: 5rem;
    padding: 3rem 4rem;
  }
  /* 하위 메뉴 글자 크기 */
  body.ax-site .wrapper .header .gnb .submenu > ul > li > a {
    font-size: 1.8rem;
  }
}

/* 태블릿 구간(1025~1400px)에서 폰트 크기 + 간격 조절 */
@media only screen and (min-width: 1025px) and (max-width: 1400px) {
  /* 메뉴 사이 간격 */
  body.ax-site .wrapper .header {
    --header-gnb-space: 0 3rem;    /* 이 구간의 메뉴 사이 간격 */
  }
  /* 상단 메뉴 폰트 */
  body.ax-site .header .depth1 > li > a {
    font-size: 18px;
  }
  /* 서브메뉴 폰트 */
  body.ax-site .wrapper .header .gnb .submenu > ul > li > a {
    font-size: 1.8rem;
  }
}

/* 헤더 전체 높이 조절 */
body.ax-site {
  --header-height: 11rem;   /* 기존 9rem → 원하는 높이로 */
}

/* 헤더 안쪽 내용을 세로 가운데 정렬 */
body.ax-site .wrapper .header > div {
  height: 100%;              /* 헤더 전체 높이만큼 차지 */
  align-items: center;       /* 세로 가운데 정렬 */
}