@charset "UTF-8";

#bo_v > header {
  display: none;
}

#content_wrap {
  padding-bottom: 3%;
}

#bo_v_title .bo_v_tit {
  display: block;
  font-size: 17px;
  margin: 5px 0 0;
  word-break: break-all;
  font-weight: 500;
  letter-spacing: -1px;
  font-family: "pretendard Variable" !important;
}

.board_title {
  font-family: "pretendard Variable";
}

#bo_v > header {
  display: block;
  position: relative;
  background: transparent;
  font-size: unset;
  padding: unset;
  border-bottom: 1px solid black;
  font-family: "pretendard Variable";
}

#content_wrap {
  padding-bottom: 0% !important;
}

/* 레거시 admin 드롭다운(ul.admin_head) 전용 스타일 삭제 —
   마크업이 프로젝트 어디에도 없고(0건), element 셀렉터라 신규 nav.header_menu > ul > li > a
   를 덮어써 메뉴에 빨간 3px 테두리·uppercase·float 이 걸리고 있었다. */

header img {
  width: 100%;
}

/* ═══════════════════════ HEADER (야수각) ═══════════════════════
   구조: header.header
           > nav.header_menu.header_menu_left  (메뉴 3개)
           > a.header_logo   (육각형 로고 — 헤더 밑으로 튀어나옴)
           > .header_right   (우측 그룹)
              > nav.header_menu.header_menu_right (메뉴 3개)
              > a.header_call (1833-3977 이미지)
           > .hamburger      (모바일)
   ★ 로고 페이지 정중앙: display:grid + 1fr auto 1fr — 로고가 가운데 auto 열에 배치돼
     화면 정중앙에 고정됨. 좌/우 nav 는 각 1fr 열 안에서 start/end 로 정렬.
   ★ 로고 protrude: 헤더는 overflow:visible + 로고만 align-self:start 로 위쪽 정렬 →
     이미지 height 가 헤더보다 크면 자연스레 밑으로 넘친다.
   ★ font-family: header 는 <section> 밖이라 광역 Pretendard 카스케이드 못 받음 → 직접 지정.
   ═══════════════════════════════════════════════════════════════ */
.header img {
  width: 100%;
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: calc(var(--px) * 80);
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 80);
  padding: 0 calc(var(--px) * 20);
  font-family: "Pretendard Variable", "Pretendard", sans-serif;
  letter-spacing: -0.04vw;
  background-color: var(--color-bg);
  overflow: visible;
  transition-duration: 0.3s;
  transition-property: top;
}

.header_logo {
  justify-self: center;
  align-self: start;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
  width: calc(var(--px) * 201);
  aspect-ratio: 201 / 153;
}

.header_menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.header_menu_left {
  justify-self: start;
  margin-left: calc(var(--px) * 258);
}

.header_right {
  justify-self: end;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: calc(var(--px) * 31);
  gap: calc(var(--px) * 63);
}

.header_menu_list {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 시안 메뉴는 글자 길이와 무관하게 중심간 175px 등간격 →
   li 를 175 고정 셀로 두고 그 안에서 텍스트를 가운데 정렬한다.
   (텍스트 래퍼가 아니라 레이아웃 셀이라 고정폭을 쓴다) */
.header_menu_item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 175);
}

.header_menu_1 {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(var(--px) * 17);
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  transition: color 0.3s;
}

.header_menu_1:hover {
  color: var(--color-point);
}
.header_menu_1.remote_on {
  color: var(--color-point);
}

/* 우측 CTA — 전화 이미지 (아이콘 + 1833-3977) */
.header_call {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 161);
  aspect-ratio: 161 / 26;
}

/* ═══════════════════════ HEADER end ═══════════════════════ */

/* ═══════════════ 게시판 바로가기 (레벨 10 이상 전용) ═══════════════
   마크업은 theme/design/template/header/index.html — g5_board 를 읽어 자동 생성.
   헤더(.header height calc(--px*80)) 바로 아래 우측에 fixed. z-index 는 헤더보다 1 낮게.
   ★ 폰트: Pretendard 는 글로벌 section{} 으로만 카스케이드되는데 이 위젯은 section 밖이라
     상속을 못 받는다 → 여기서 직접 지정한다. */
.hd_boards {
  position: fixed;
  right: calc(var(--px) * 24);
  top: calc(var(--px) * 92);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  letter-spacing: -0.02vw;
}

.hd_boards_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--px) * 8);
  box-sizing: border-box;
  height: calc(var(--px) * 36);
  padding: 0 calc(var(--px) * 15);
  font-family: inherit;
  font-size: calc(var(--px) * 14);
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  background-color: rgba(17, 17, 17, 0.88);
  border: 0;
  border-radius: calc(var(--px) * 18);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.hd_boards_btn:hover {
  background-color: #111111;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.26);
  transform: translateY(-1px);
}

/* 셰브론 — border 2변을 돌려 만든 ∨ (열리면 ∧ 로 회전) */
.hd_boards_btn::after {
  content: "";
  width: calc(var(--px) * 7);
  height: calc(var(--px) * 7);
  margin-top: calc(var(--px) * -3);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.hd_boards.is_open .hd_boards_btn::after {
  margin-top: calc(var(--px) * 3);
  transform: rotate(-135deg);
}

/* 닫힘 상태 — display 로 껐다 켜면 transition 이 안 걸리므로 흐름에는 남기고 시각만 감춘다 */
.hd_boards_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  margin-top: calc(var(--px) * 8);
  min-width: calc(var(--px) * 178);
  padding: calc(var(--px) * 6);
  background-color: #ffffff;
  border: 1px solid #ececf2;
  border-radius: calc(var(--px) * 12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(var(--px) * -8)) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s;
}

/* 열림 — js/header.js 가 .hd_boards 에 .is_open 토글 */
.hd_boards.is_open .hd_boards_list {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.hd_boards_link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  height: calc(var(--px) * 36);
  padding: 0 calc(var(--px) * 12);
  font-size: calc(var(--px) * 14);
  font-weight: 500;
  color: #2b2b33;
  white-space: nowrap;
  border-radius: calc(var(--px) * 8);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.hd_boards_link:hover {
  color: #111111;
  background-color: #f3f4f8;
}

@media screen and (max-width: 599px) {
  .hd_boards {
    right: 4vw;
    top: 18vw;
  }
  .hd_boards_btn {
    gap: 1.6vw;
    height: 8vw;
    padding: 0 3.4vw;
    font-size: 3.2vw;
    border-radius: 4vw;
  }
  .hd_boards_btn::after {
    width: 1.6vw;
    height: 1.6vw;
    margin-top: -0.7vw;
  }
  .hd_boards.is_open .hd_boards_btn::after {
    margin-top: 0.7vw;
  }
  .hd_boards_list {
    margin-top: 1.8vw;
    min-width: 40vw;
    padding: 1.4vw;
    border-radius: 2.8vw;
  }
  .hd_boards_link {
    height: 8.4vw;
    padding: 0 2.8vw;
    font-size: 3.2vw;
    border-radius: 2vw;
  }
}


/* -------------------header 커스텀 끝------------------- */
@media screen and (max-width: 599px) {
  .pc-mobile {
    display: none !important;
  }
  .mobile-pc {
    display: flex !important;
  }
  .pc-inline {
    display: none !important;
  }
  .menu-hide {
    display: none !important;
  }
  .menu-show {
    display: flex !important;
  }
  .hamburger-top {
    top: 13% !important;
  }
  .hamburger {
    position: absolute;
    top: 33%;
    right: 5%;
  }
  .hamburger-menu {
    width: 8vw;
    height: 4.5vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div.line {
    background: #ce0014;
    width: 100%;
    height: 2px;
    border-radius: 0px;
    position: relative;
    transition: all 0.3s;
    transform-origin: center;
    position: absolute;
    margin: 0 !important;
  }
  div.line.mid-reverse {
    background-color: #ce0014;
  }
  .top-reverse {
    top: 0%;
  }
  .bot-reverse {
    bottom: 0%;
  }
  .line_change.top-reverse {
    top: 50%;
    transform: translate(0, -50%) rotate(45deg);
    background-color: #ce0014;
  }
  .line_change.mid-reverse {
    opacity: 0;
  }
  .line_change.bot-reverse {
    bottom: 50%;
    transform: translate(0, 50%) rotate(-45deg);
    background-color: #ce0014;
  }
  /* -------------------header 커스텀 시작------------------- */
  .header {
    position: fixed;
    left: 0;
    top: 0;
    grid-template-rows: 15vw;
    justify-content: space-between;
    align-items: center;
    height: 15vw;
    padding: 0 5vw;
    font-size: 4.5vw;
    background: var(--color-bg);
    transform: translateX(0);
    width: 100%;
    overflow: visible;
  }

  /* 로고 — 모바일에선 헤더 안에 맞춰 표시 (튀어나오지 않음) */
  .header_logo {
    align-self: center;
    justify-self: start;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18vw;
    aspect-ratio: 201 / 153;
    margin-left: 0;
    order: 0;
  }

  /* 모바일 헤더에서 전화 CTA 제거 */
  .header_call {
    display: none;
  }

  /* 모바일 메뉴 = 오른쪽에서 밀려 들어오는 드로어. 열림 상태는 .header_menu_drop (js/header.js).
     좌/우 nav 두 벌을 하나의 드로어에 같이 넣는다. */
  .header_menu {
    position: fixed !important;
    right: -100%;
    pointer-events: none;
    padding: 24vw 6vw 0 10vw;
    width: 62%;
    box-sizing: border-box;
    transition: all 0.3s;
    clear: both;
    background-color: #000000;
    color: #fff;
    height: 100vh;
    flex-wrap: nowrap;
    gap: 5.5vw;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    top: 0%;
    margin-left: 0;
  }

  /* 좌측 nav 는 드로어 상단, 우측 nav 는 그 아래에 이어 붙게.
     ★ 둘 다 fixed(top:0/height:100vh/검정배경) 라 그대로 두면 정확히 포개져
       뒤에 오는 우측 nav 의 배경이 좌측 3개 메뉴를 덮는다.
       → 좌측이 드로어 배경을 맡고, 우측은 배경을 지운 뒤 좌측 마지막 항목
         bottom(50.4vw) + 그룹 간격(5.5vw) = 56vw 아래로 내려 붙인다. */
  .header_menu_left {
    padding-top: 24vw;
  }

  .header_menu_right {
    height: auto;
    margin-top: 56vw;
    padding-top: 0;
    background-color: transparent;
  }

  .header_menu_list {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5.5vw;
    width: 100%;
  }

  /* PC 고정폭(175px)이 남아 있으면 링크가 li 밖으로 넘쳐 가운데정렬처럼 보인다 */
  .header_menu_item {
    justify-content: flex-start;
    width: 100%;
  }

  .header_menu.header_menu_drop {
    top: 0%;
    pointer-events: initial !important;
    opacity: 1;
    right: 0;
  }

  .header_menu_1 {
    height: auto;
    font-size: 4.4vw;
    color: #fff;
    font-weight: 500;
    text-align: left;
  }

  .header_menu_1:hover {
    color: #fff;
  }
  /* -------------------header 커스텀 끝------------------- */
}

#bo_v_title .bo_v_tit {
  display: block;
  font-size: 17px;
  margin: 5px 0 0;
  word-break: break-all;
  font-weight: 700;
  letter-spacing: -1px;
  font-family: "pretendard Variable" !important;
}

.board_title {
  font-weight: 700;
  font-family: "pretendard Variable";
}

#bo_w .bo_w_tit .frm_input {
  padding-right: 0px !important;
}

#bo_v > header {
  display: block;
  position: relative;
  background: transparent;
  font-size: unset;
  padding: unset;
  border-bottom: 1px solid black;
  font-family: "pretendard Variable";
  font-weight: 900;
}

#bo_v_con {
  margin: 30px 0 30px;
  width: 100%;
  line-height: 1.7em;
  min-height: 200px;
  word-break: break-all;
  overflow: hidden;
  font-size: 1.3em;
  font-family: "pretendard Variable";
}



/* ═══════════════════════ TOP 버튼 (fixed · 퀵바 위쪽) ═══════════════════════
   시안: 빨간 원 + 위 화살표 아이콘 (텍스트 없음).
   마크업은 theme/design/template/header/index.html 하단. */
.top_btn {
  position: fixed;
  right: calc(var(--px) * 37);
  bottom: calc(var(--px) * 98);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.top_btn img {
  width: 100%;
}

.top_btn_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 53);
  aspect-ratio: 1 / 1;
}
@media screen and (max-width: 599px) {
  .main_small_title {
    font-size: 3.1vw;
    line-height: 4.7vw;
  }
.top_btn {
    right: 3vw;
    bottom: 27vw;
}
  .top_btn_img {
    width: calc(var(--px) * 180);
}
}