@charset "utf-8";

/*───────────────────────────────────────────────────────────────
  ONWEB 리빌더 헤더 · 전폭 띠 서브메뉴 (gt_hd_B_1) · style.css
  v1.0.0 / 2026-09-05 / ONWEB

  ── 특이도 규칙 ──────────────────────────────────────────────
     gt_hd_core/core.css   .gthd .x           (0,2,0)
     이 파일                .gthd.gthd_B1 .x   (0,3,0)  ← 항상 이긴다
     소스 순서에 기대지 않는다.

  · 수치는 header.php 가 인라인 변수로 내려보낸다. 여기 적힌 값은
    변수가 없을 때의 대비값이다.
  · 강조컬러는 인라인으로 받지 않는다. --rb-point → --point-color →
    고정 대비값 순으로 CSS 가 직접 찾아간다.
  · 브레이크포인트는 1360px. PC 대메뉴 숨김은 core.css 가 #header
    특이도로 처리한다.
  · 전체메뉴 CSS 는 여기 없다 — core.css 10절에 공용으로 있다.
───────────────────────────────────────────────────────────────*/

.gthd.gthd_B1 {
    --gthd-skin-ver: 4;

    --b1-fg    : #25282b;
    --b1-dim   : rgba(37, 40, 43, .72);
    --b1-point : var(--rb-point, var(--point-color, #25282b));

    /* 따라다니는 물방울의 둥글기 — .b1_list a 와 같은 값 */
    --gthd-subblobr: var(--gthd-subrad, 20px);
}


/*───────────────────────────────────────────────────────────────
  1. 대메뉴 — 담백하게. 띠가 이미 강한 표시라 여기까지 칠하면
     한 화면에 강조가 두 번 들어간다.
───────────────────────────────────────────────────────────────*/
.gthd.gthd_B1 .b1_ul {
    display: flex;
    align-items: stretch;
    gap: var(--gthd-gap, 34px);
    height: 100%;
}

.gthd.gthd_B1 .b1_li {
    position: relative;   /* 띠의 기준. nav 나 ul 이 아니라 li 다 */
    display: flex;
    align-items: center;
}

.gthd.gthd_B1 .b1_a {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: var(--gthd-gnbpad, 6px);
    padding-right: var(--gthd-gnbpad, 6px);

    color: var(--gthd-fg);
    font-size: var(--gthd-gnb, 18px);
    font-weight: var(--gthd-gnbw, 700);
    letter-spacing: var(--gthd-track, 0px);
    white-space: nowrap;
    transition: color .2s ease;
}
.gthd.gthd_B1 .b1_a > span { position: relative; display: inline-block; }

/* 표시 — 아래 gnb_* 블록이 모양을 정한다.
   ★ 모양을 갈아끼우는 자리이므로 각 블록이 앞 블록이 잡아 둔
     속성을 전부 되돌려 적는다. */
.gthd.gthd_B1 .b1_a > span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(-1 * var(--gthd-markgap, 8px));
    height: 0;
    border-radius: 0;
    background: var(--b1-point);
    opacity: 0;
    transform: none;
    transition: opacity .22s ease, height .22s ease;
    pointer-events: none;
}
.gthd.gthd_B1.gnb_plain .b1_a > span::after { content: none; }

.gthd.gthd_B1.gnb_underline .b1_li:hover > .b1_a > span::after,
.gthd.gthd_B1.gnb_underline .b1_li:focus-within > .b1_a > span::after,
.gthd.gthd_B1.gnb_underline .b1_li.is_on > .b1_a > span::after {
    height: var(--gthd-markh, 2px);
    opacity: 1;
}

.gthd.gthd_B1.gnb_dot .b1_a > span::after {
    left: 50%;
    right: auto;
    bottom: calc(-1 * var(--gthd-markgap, 8px) - 2px);
    width: calc(var(--gthd-markh, 2px) * 2.5);
    height: calc(var(--gthd-markh, 2px) * 2.5);
    margin-left: calc(var(--gthd-markh, 2px) * -1.25);
    border-radius: 50%;
}
.gthd.gthd_B1.gnb_dot .b1_li:hover > .b1_a > span::after,
.gthd.gthd_B1.gnb_dot .b1_li:focus-within > .b1_a > span::after,
.gthd.gthd_B1.gnb_dot .b1_li.is_on > .b1_a > span::after { opacity: 1; }

.gthd.gthd_B1 .b1_li:hover > .b1_a,
.gthd.gthd_B1 .b1_li:focus-within > .b1_a,
.gthd.gthd_B1 .b1_li.is_on > .b1_a { color: var(--b1-point); }

/* 투명(사진 위) 상태에서는 흰색으로 뒤집는다 — 배경 밝기를 계산할
   방법이 CSS 에는 없다. */
.gthd.gthd_B1.gthd_over:not(.scrolling) .b1_li:hover > .b1_a,
.gthd.gthd_B1.gthd_over:not(.scrolling) .b1_li:focus-within > .b1_a,
.gthd.gthd_B1.gthd_over:not(.scrolling) .b1_li.is_on > .b1_a { color: #fff; }
.gthd.gthd_B1.gthd_over:not(.scrolling) .b1_a > span::after { background: #fff; }


/*───────────────────────────────────────────────────────────────
  2. 전폭 띠

  ★ 폭은 CSS 로 정하지 않는다.
    띠는 li(position:relative) 안에 있어서 width:100vw 로 늘리면
    li 의 가운데를 기준으로 벌어져 좌우가 어긋난다. header.php 의
    스크립트가 실제 좌표를 재서 left · margin-left · width 를
    인라인으로 못박는다. 여기 적힌 값은 그 전(또는 스크립트가 실패한
    경우)의 대비값이다.

  #header 가 position:fixed 라 화면보다 넓은 자식이 있어도 문서에
  가로 스크롤이 생기지 않는다 — 이 자리에서 100vw 가 안전한 이유다.
───────────────────────────────────────────────────────────────*/
.gthd.gthd_B1 .b1_sub {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 30;

    width: 100vw;
    margin-left: -50vw;
    margin-top: var(--gthd-subgap, 0px);

    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.gthd.gthd_B1 .b1_li:hover > .b1_sub,
.gthd.gthd_B1 .b1_li:focus-within > .b1_sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 보이지 않는 다리 — 대메뉴와 띠 사이 간격을 덮는다.
   높이는 core.php 가 계산한 값(간격 + 4, 최소 6)이다. CSS 의 calc()
   로 미루면 간격 0 일 때 다리만 남아 대메뉴 글자를 덮는다. */
.gthd.gthd_B1 .b1_bridge {
    position: absolute;
    top: calc(-1 * var(--gthd-subbridge, 6px));
    left: 0;
    right: 0;
    height: var(--gthd-subbridge, 6px);
}

/* 띠 배경 세 가지 */
.gthd.gthd_B1.barbg_tint  .b1_sub { background: #f7f7f8; }
.gthd.gthd_B1.barbg_white .b1_sub { background: #fff; box-shadow: 0 14px 30px rgba(0, 0, 0, .10); }
.gthd.gthd_B1.barbg_soft  .b1_sub { background: color-mix(in srgb, var(--b1-point) 7%, #fff); }
/* color-mix 를 못 읽는 브라우저는 위 tint 와 같은 회색으로 떨어진다 */
.gthd.gthd_B1.barbg_soft  .b1_sub { background: #f7f7f8; }
@supports (background: color-mix(in srgb, red 7%, #fff)) {
    .gthd.gthd_B1.barbg_soft .b1_sub { background: color-mix(in srgb, var(--b1-point) 7%, #fff); }
}

/* 어두운 판 — 띠 안 글자를 흰색 계열로 뒤집는다 */
.gthd.gthd_B1.barbg_dark .b1_sub { background: #22242a; }
.gthd.gthd_B1.barbg_dark .b1_label { color: #fff; }
.gthd.gthd_B1.barbg_dark .b1_list a { color: rgba(255, 255, 255, .78); }
.gthd.gthd_B1.barbg_dark.sub_hover .b1_list a:hover,
.gthd.gthd_B1.barbg_dark.sub_hover .b1_list a:focus-visible { background: var(--b1-point); color: #fff; }
.gthd.gthd_B1.barbg_dark:not(.sub_hover) .b1_list a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.gthd.gthd_B1.barbg_dark.bar_line .b1_sub { border-color: rgba(255, 255, 255, .12); }

/* 띠 경계선.
   ★ 아래만 그으면 밝은 판에서 헤더와 띠가 붙어 보여 "선이 안 보인다"
     가 된다. 위아래 모두 긋고, 색도 --gthd-line(rgba .09)이 아니라
     눈에 보이는 값을 쓴다. */
.gthd.gthd_B1.bar_line .b1_sub {
    border-top: 1px solid rgba(0, 0, 0, .12);
    border-bottom: 1px solid rgba(0, 0, 0, .10);
}

/* 띠 안쪽 — 본문 폭에 맞춘다 */
.gthd.gthd_B1 .b1_bar_in {
    display: flex;
    align-items: center;
    gap: 22px;

    width: 100%;
    max-width: var(--gthd-inner, 1400px);
    min-height: var(--b1-barh, auto);
    margin: 0 auto;
    padding: var(--gthd-subpad, 14px) var(--gthd-side, 40px);
}

.gthd.gthd_B1.bar_center .b1_bar_in { justify-content: center; }

/* bar_align = 'menu' (기본) — 항목 줄이 "마우스를 올린 대메뉴" 아래로
   미끄러진다. 실제 위치는 header.php 의 fitList() 가 margin-left 로 준다.

   ★ width:max-content + max-width:100% 조합이 핵심이다.
     들어가면 자연 폭(= JS 가 필요로 하는 값), 넘치면 칸 폭까지만
     늘고 그 안에서 줄바꿈된다. 폭을 안 주면 flex 가 칸 폭까지 늘려
     offsetWidth 가 항상 칸 폭이 되어 JS 계산이 무의미해진다. */
.gthd.gthd_B1.bar_menu .b1_bar_in { justify-content: flex-start; position: relative; }
.gthd.gthd_B1.bar_menu .b1_list {
    flex: 0 0 auto;
    width: -webkit-max-content;
    width: max-content;
    max-width: 100%;
    justify-content: flex-start;
    transition: margin-left .22s ease;
}

/* 라벨은 왼쪽 끝에 띄워 둔다 — 흐름 안에 두면 그 폭만큼 항목 줄이
   밀려 대메뉴와 어긋난다(가운데 정렬과 같은 이유).
   ★ bar_label 기본값은 false 다. 켜고 메뉴가 많으면 왼쪽 끝에서
     라벨과 항목이 겹칠 수 있다 — 그때는 라벨을 끄는 편이 낫다. */
.gthd.gthd_B1.bar_menu .b1_label {
    position: absolute;
    left: var(--gthd-side, 40px);
    top: 50%;
    transform: translateY(-50%);
}

/* 띠 왼쪽 라벨(대메뉴 이름).
   가운데 정렬에서는 항목 줄과 나란히 두면 가운데가 어긋나 보이므로
   라벨을 왼쪽에 고정하고 항목만 가운데로 밀어 둔다. */
.gthd.gthd_B1 .b1_label {
    flex: 0 0 auto;
    margin: 0;
    font-size: var(--gthd-subttl, 17px);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--b1-point);
    white-space: nowrap;
}
.gthd.gthd_B1.bar_center .b1_label {
    position: absolute;
    left: var(--gthd-side, 40px);
    top: 50%;
    transform: translateY(-50%);
}
.gthd.gthd_B1.bar_center .b1_bar_in { position: relative; }

/* 항목 줄 */
.gthd.gthd_B1 .b1_list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--b1-bargap, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}
.gthd.gthd_B1.bar_center .b1_list { justify-content: center; }

.gthd.gthd_B1 .b1_list a {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 7px 16px;
    border-radius: var(--gthd-subrad, 20px);

    color: var(--b1-dim);
    font-size: var(--gthd-subsize, 15px);
    font-weight: var(--gthd-subw, 500);
    line-height: 1.4;
    white-space: nowrap;
    transition: color .18s ease, background-color .18s ease;
}

.gthd.gthd_B1.sub_hover .b1_list a:hover,
.gthd.gthd_B1.sub_hover .b1_list a:focus-visible {
    background: var(--b1-point);
    color: #fff;
}
.gthd.gthd_B1:not(.sub_hover) .b1_list a:hover,
.gthd.gthd_B1:not(.sub_hover) .b1_list a:focus-visible {
    background: rgba(0, 0, 0, .05);
    color: var(--b1-point);
}

/* 지금 보고 있는 하위 메뉴 — 채우는 쪽이 대비가 보장된다 */
.gthd.gthd_B1.sub_pill .b1_list a.is_on { background: var(--b1-point); color: #fff; }
.gthd.gthd_B1:not(.sub_pill) .b1_list a.is_on { color: var(--b1-point); font-weight: 700; }

.gthd.gthd_B1 .b1_list .gnb_new_ico {
    display: inline-block;
    margin-left: 2px;
    padding: 0 4px;
    border-radius: 3px;
    background-color: var(--b1-point) !important;
    color: #fff;
    font-size: 9px;
    line-height: 15px;
    vertical-align: middle;
}
.gthd.gthd_B1.sub_hover .b1_list a:hover .gnb_new_ico,
.gthd.gthd_B1.sub_pill .b1_list a.is_on .gnb_new_ico {
    background-color: #fff !important;
    color: var(--b1-point);
}


/*───────────────────────────────────────────────────────────────
  3. 오른쪽 유틸 — util_line (항목 사이 세로 구분선)
───────────────────────────────────────────────────────────────*/
.gthd.gthd_B1 .gthd_snb > li { display: flex; align-items: center; }

/* 아이콘 크기는 core.css 가 설정(snb_ico_size)으로 잡는다.
   ★ 규칙을 여기에도 두는 이유 — gt_hd_core 를 안 올린 상태에서는
     그 변수도 규칙도 없어서 아이콘이 3줄 메뉴와 같은 26px 로 부푼다.
     var() 대비값이 그 상황을 막는다. */
.gthd.gthd_B1 .gthd_snb .gthd_ico svg {
    width: var(--gthd-snbico, 20px);
    height: var(--gthd-snbico, 20px);
}
.gthd.gthd_B1 .gthd_snb .gthd_ico .gthd_mi { font-size: var(--gthd-snbicomi, 22px); }
.gthd.gthd_B1 .gthd_snb .gthd_ico svg.gthd_pv18 {
    width: calc(var(--gthd-snbico, 20px) * .9);
    height: calc(var(--gthd-snbico, 20px) * .9);
}
/* 3줄 버튼만 ico_size 를 따른다. ★ 위와 특이도가 같으므로 뒤에 둔다. */
.gthd.gthd_B1 .gthd_snb .gthd_maptog svg {
    width: var(--gthd-icosize, 26px);
    height: var(--gthd-icosize, 26px);
}
.gthd.gthd_B1 .gthd_snb .gthd_maptog .gthd_mi { font-size: var(--gthd-icosize, 26px); }

/* 구분선. ★ 1360px 이하에서는 끈다 — 그 구간에서 .pc 항목이 숨는데,
   앞 항목이 사라지면 맨 앞 항목에 구분선만 덩그러니 남는다. */
.gthd.gthd_B1.util_line .gthd_snb > li + li {
    position: relative;
    padding-left: var(--gthd-snbgap, 8px);
}

/* ★ li 에 border-left 로 그리면 선이 항목 높이(아이콘 상자 40px
     안팎)를 그대로 채워 지나치게 길어 보인다. 가운데 정렬한
     가상요소로 그려서 높이를 설정(util_line_h)으로 뺀다. */
.gthd.gthd_B1.util_line .gthd_snb > li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: var(--gthd-lineh, 50%);
    transform: translateY(-50%);
    border-left: 1px solid var(--gthd-line);
}

.gthd.gthd_B1 .gthd_snb .gthd_ico::before {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .05);
    opacity: 0;
    transition: opacity .18s ease;
}
.gthd.gthd_B1 .gthd_snb .gthd_ico:hover::before,
.gthd.gthd_B1 .gthd_snb .gthd_ico.is_on::before { opacity: 1; }
.gthd.gthd_B1 .gthd_snb .gthd_ico svg,
.gthd.gthd_B1 .gthd_snb .gthd_ico img { position: relative; z-index: 1; }
.gthd.gthd_B1.gthd_over:not(.scrolling) .gthd_snb .gthd_ico::before { background: rgba(255, 255, 255, .18); }

/* 원형 회원 버튼은 core.css 가 배경·테두리를 그린다 — 원이 두 겹으로
   보이지 않게 여기 원은 끈다. */
.gthd.gthd_B1.snb_btn .gthd_mytog::before { display: none; }


/*───────────────────────────────────────────────────────────────
  4. 화면 크기별
───────────────────────────────────────────────────────────────*/
@media all and (max-width: 1360px) {
    .gthd.gthd_B1.util_line .gthd_snb > li + li { padding-left: 0; }
    .gthd.gthd_B1.util_line .gthd_snb > li + li::before { content: none; }
}