@charset "utf-8";

/*───────────────────────────────────────────────────────────────
  ONWEB 리빌더 헤더 · 사진 카드 드롭다운 (gt_hd_A_1) · style.css
  v1.0.0 / 2026-09-05 / ONWEB

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

  · 수치는 header.php 가 인라인 변수로 내려보낸다.
    여기 적힌 값은 변수가 없을 때의 대비값이다.
  · 강조컬러는 인라인으로 받지 않는다. --rb-point → --point-color →
    고정 대비값 순으로 CSS 가 직접 찾아간다. 그래야 PHP 쪽이 전부
    실패해도 화면이 산다.
  · 브레이크포인트는 768 이 아니라 1360px 이다.
    PC 대메뉴를 숨기는 일은 core.css 가 #header 특이도로 처리한다 —
    여기서 대메뉴에 클래스를 더 붙여도 그 숨김이 지지 않는다.

  ── 차례 ─────────────────────────────────────────────────────
   1. 판번호
   2. 대메뉴 (plain / underline / dot)
   3. 사진 카드 드롭다운 — 공통
   4. 카드 배치 4가지
   5. 하위 목록 · 현재 메뉴 · 호버
   6. 오른쪽 유틸 (util_mini)
   7. 전체메뉴
   8. 화면 크기별
───────────────────────────────────────────────────────────────*/


/*───────────────────────────────────────────────────────────────
  1. 판번호 — header.php 의 스크립트가 이 값을 읽어 대조한다
───────────────────────────────────────────────────────────────*/
.gthd.gthd_A1 {
    --gthd-skin-ver: 12;

    --a1-card-bg  : #ffffff;
    --a1-card-line: rgba(0, 0, 0, .07);
    --a1-card-fg  : #25282b;
    --a1-card-dim : rgba(37, 40, 43, .58);
    --a1-point    : var(--rb-point, var(--point-color, #25282b));

    /* 따라다니는 물방울의 둥글기 — .a1_list a 와 같은 값 */
    --gthd-subblobr: 8px;
}


/*───────────────────────────────────────────────────────────────
  2. 대메뉴

  담백한 세 가지만 쓴다 — 알약 계열은 gt_hd_garo2 의 것이라
  헤더끼리 인상이 겹치지 않게 여기서는 뺐다.
───────────────────────────────────────────────────────────────*/
.gthd.gthd_A1 .a1_ul {
    display: flex;
    align-items: stretch;
    gap: var(--gthd-gap, 34px);
    height: 100%;
}

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

.gthd.gthd_A1 .a1_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_A1 .a1_a > span { position: relative; display: inline-block; }

/* 표시 — 기본은 없다. 아래 gnb_* 블록이 모양을 정한다.
   ★ 모양을 갈아끼우는 자리이므로 각 블록이 앞 블록의 속성을
     전부 되돌려 적는다. top 과 height 가 같이 잡히면 bottom 은
     무시되어 밑줄이 칸 한가운데에 뜬다. */
.gthd.gthd_A1 .a1_a > span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    /* 글자 아래끝에서 표시까지 거리 — 설정 gnb_mark_gap */
    bottom: calc(-1 * var(--gthd-markgap, 8px));
    height: 0;
    border-radius: 0;
    background: var(--a1-point);
    opacity: 0;
    transform: none;
    transition: opacity .22s ease, height .22s ease;
    pointer-events: none;
}

/* plain — 글자색만 바뀐다 */
.gthd.gthd_A1.gnb_plain .a1_a > span::after { content: none; }

/* underline — 글자 아래 밑줄. 두께는 설정 gnb_mark_h */
.gthd.gthd_A1.gnb_underline .a1_li:hover > .a1_a > span::after,
.gthd.gthd_A1.gnb_underline .a1_li:focus-within > .a1_a > span::after,
.gthd.gthd_A1.gnb_underline .a1_li.is_on > .a1_a > span::after {
    height: var(--gthd-markh, 2px);
    opacity: 1;
}

/* dot — 글자 아래 작은 점.
   지름은 gnb_mark_h 의 2.5배로 잡는다 — 밑줄 두께와 점 지름을 같은
   숫자로 쓰면 점이 너무 작아 안 보인다.
   ★ 앞 블록이 잡아 둔 left/right/height 를 전부 되돌려 적는다.
     한쪽만 고치면 점이 가로로 늘어난 막대가 된다. */
.gthd.gthd_A1.gnb_dot .a1_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_A1.gnb_dot .a1_li:hover > .a1_a > span::after,
.gthd.gthd_A1.gnb_dot .a1_li:focus-within > .a1_a > span::after,
.gthd.gthd_A1.gnb_dot .a1_li.is_on > .a1_a > span::after { opacity: 1; }

/* 글자색 */
.gthd.gthd_A1 .a1_li:hover > .a1_a,
.gthd.gthd_A1 .a1_li:focus-within > .a1_a,
.gthd.gthd_A1 .a1_li.is_on > .a1_a { color: var(--a1-point); }

/* 투명(사진 위) 상태에서는 강조컬러가 묻히므로 흰색으로 뒤집는다.
   배경 밝기를 계산할 방법이 CSS 에는 없다 — "사진 위에서는 무조건
   흰색" 이 가장 안전하다. */
.gthd.gthd_A1.gthd_over:not(.scrolling) .a1_li:hover > .a1_a,
.gthd.gthd_A1.gthd_over:not(.scrolling) .a1_li:focus-within > .a1_a,
.gthd.gthd_A1.gthd_over:not(.scrolling) .a1_li.is_on > .a1_a { color: #fff; }
.gthd.gthd_A1.gthd_over:not(.scrolling) .a1_a > span::after { background: #fff; }


/*───────────────────────────────────────────────────────────────
  3. 사진 카드 드롭다운 — 공통

  ★ width:max-content 가 핵심이다.
    절대배치 요소의 폭은 "담는 상자 폭 − left 오프셋" 으로 정해진다.
    담는 상자가 대메뉴 한 칸(100px 남짓)이고 left:50% 면 쓸 수 있는
    폭이 50px 밖에 안 되어, 카드가 min-content 까지 쭈그러든다.
    사진이 붙은 카드에서는 사진 한 장 폭까지 줄어 목록이 전부
    줄바꿈된다.

  ★ 좌우 정렬은 --sub-x 변수 하나로 뺀다.
    닫힘·열림·양 끝 정렬이 각각 transform 을 다시 쓰면, 한 곳을
    빠뜨렸을 때 카드가 열리는 순간 옆으로 튄다.
───────────────────────────────────────────────────────────────*/
.gthd.gthd_A1 .a1_sub {
    --sub-x: -50%;

    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 30;

    width: -webkit-max-content;
    width: max-content;
    min-width: var(--gthd-submin, 380px);
    max-width: var(--gthd-submax, calc(100vw - 48px));

    /* 대메뉴 줄 아래끝과 카드 윗변 사이 간격 — 설정 sub_gap.
       ★ padding 이 아니라 margin 이다. padding 은 음수를 못 받는데,
         카드를 헤더 쪽으로 끌어올리고 싶다는 요청이 실제로 나온다. */
    margin-top: var(--gthd-subgap, 14px);

    opacity: 0;
    visibility: hidden;
    transform: translate(var(--sub-x), 8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

.gthd.gthd_A1 .a1_li:hover > .a1_sub,
.gthd.gthd_A1 .a1_li:focus-within > .a1_sub {
    opacity: 1;
    visibility: visible;
    transform: translate(var(--sub-x), 0);
}

/* 양 끝 정렬 — 첫 카드는 왼쪽 끝, 마지막 카드는 오른쪽 끝에.
   ★ left:auto 를 반드시 함께 되돌린다. left 와 right 가 동시에
     잡히면 상자가 그 사이로 늘어나 width 가 무시된다.
   ★ 첫·마지막 표시는 :first-child 가 아니라 PHP 가 붙인 클래스다
     (ul 안에 요소를 하나 더 넣어도 어긋나지 않게). */
.gthd.gthd_A1.sal_edge .a1_li.is_first > .a1_sub { --sub-x: 0; left: 0; right: auto; }
.gthd.gthd_A1.sal_edge .a1_li.is_last  > .a1_sub { --sub-x: 0; left: auto; right: 0; }

/* 보이지 않는 다리 — 대메뉴와 카드 사이 간격에서 마우스가 빠지는
   것을 막는다. 높이는 core.php 가 "간격 + 4"(최소 6)로 계산해 둔
   값이다. CSS 의 calc() 로 미루면 간격 0 일 때 다리만 남아 대메뉴
   글자를 덮는다.
   ★ 카드 "위" 를 덮어야 하므로 위로 끌어올린다. 카드가 margin-top
     으로 내려가 있으니 이 자리가 곧 그 빈 틈이다. */
.gthd.gthd_A1 .a1_bridge {
    position: absolute;
    top: calc(-1 * var(--gthd-subbridge, 18px));
    left: 0;
    right: 0;
    height: var(--gthd-subbridge, 18px);
}

.gthd.gthd_A1 .a1_card {
    display: flex;
    align-items: flex-start;
    gap: var(--a1-imggap, 26px);

    padding: var(--gthd-subpad, 22px);
    border-radius: var(--gthd-subrad, 12px);
    background: var(--a1-card-bg);
    border: 1px solid var(--a1-card-line);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .12);
    color: var(--a1-card-fg);
}

/* 카드 위쪽 강조컬러 선.
   ★ 3px 선에 큰 둥글기를 주면 브라우저가 선의 반지름을 높이의
     절반까지 깎아 양 끝이 카드 모서리 밖으로 들떠 보인다.
     선에 둥글기를 거는 대신 둥글기만큼 안쪽으로 들인다.
     둥글기가 0 이면 좌우 0 이 되어 폭 전체를 채운다. */
.gthd.gthd_A1 .a1_card { position: relative; }
.gthd.gthd_A1.sub_topline .a1_card::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(var(--gthd-subrad, 12px) * .62);
    right: calc(var(--gthd-subrad, 12px) * .62);
    height: var(--gthd-toplineh, 2px);
    background: var(--a1-point);
}

.gthd.gthd_A1 .a1_body { flex: 1 1 auto; min-width: 0; }

.gthd.gthd_A1 .a1_ttl {
    margin: 0;
    padding-bottom: 8px;
    font-size: var(--gthd-subttl, 19px);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--a1-card-fg);
}
.gthd.gthd_A1.sub_line .a1_ttl {
    margin-bottom: 12px;
    border-bottom: 1px dotted rgba(0, 0, 0, .22);
}
.gthd.gthd_A1:not(.sub_line) .a1_ttl { margin-bottom: 10px; }

.gthd.gthd_A1 .a1_desc {
    margin: -4px 0 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--a1-card-dim);
}


/*───────────────────────────────────────────────────────────────
  4. 카드 배치 4가지
───────────────────────────────────────────────────────────────*/
.gthd.gthd_A1 .a1_img {
    flex: 0 0 var(--a1-imgw, 150px);
    width: var(--a1-imgw, 150px);
    line-height: 0;
}

.gthd.gthd_A1 .a1_img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--a1-ratio, 1 / 1);
    object-fit: cover;              /* 빼먹으면 사진이 찌그러진다 */
    border-radius: var(--a1-imgrad, 10px);
}

/* card_img    왼쪽 사진 (기본) — 위 규칙 그대로 */

/* card_img_r  사진을 오른쪽으로 */
.gthd.gthd_A1.sub_card_img_r .a1_card { flex-direction: row-reverse; }

/* card_top    사진을 위에 넓게 */
.gthd.gthd_A1.sub_card_top .a1_card { flex-direction: column; align-items: stretch; }
.gthd.gthd_A1.sub_card_top .a1_img { flex: 0 0 auto; width: 100%; }
.gthd.gthd_A1.sub_card_top .a1_img img { aspect-ratio: var(--a1-ratio, 16 / 9); }

/* card_plain  사진 없음 — PHP 가 .a1_img 자체를 만들지 않는다 */


/*───────────────────────────────────────────────────────────────
  5. 하위 목록 · 현재 메뉴 · 호버
───────────────────────────────────────────────────────────────*/
.gthd.gthd_A1 .a1_list { display: block; }

/* 칸을 나눌 때는 1fr 이 아니라 auto 로 나눈다.
   카드가 max-content 상자라 1fr 은 "남는 폭을 나눈다" 가 아니라
   "가장 긴 항목에 맞춰 모든 칸을 똑같이" 가 되어, 긴 항목이 하나
   있는 대메뉴에서만 카드가 유난히 넓어진다.
   (칸 수는 menu_A.php 가 인라인으로도 못박는다 — repeat() 안의
    변수를 못 읽는 브라우저에서 선언 전체가 무효가 되는 것을 막는다) */
.gthd.gthd_A1.sub_grid .a1_list {
    display: grid;
    grid-template-columns: repeat(var(--a1-cols, 1), auto);
    column-gap: 18px;
    align-items: start;
}

.gthd.gthd_A1 .a1_list > li { margin-bottom: 1px; }

.gthd.gthd_A1 .a1_list a {
    display: flex;
    align-items: center;
    gap: 5px;

    /* 위아래 여백은 설정(sub_rowpad)이 정한다 — 카드가 답답하거나
       반대로 너무 성글어 보일 때 이 값 하나만 만지면 된다.
       ★ padding 단축으로 쓰지 않는다. 단축으로 쓰면 나중에 좌우만
         바꾸려다 위아래 설정값까지 조용히 지운다. */
    padding-top: var(--a1-rowpad, 7px);
    padding-bottom: var(--a1-rowpad, 7px);
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 8px;

    color: var(--a1-card-dim);
    font-size: var(--gthd-subsize, 14px);
    /* 굵기도 설정으로 뺀다(sub_weight).
       ★ 얇은 본문 폰트를 쓰는 사이트에서는 400 이면 회색 글씨가
         흐려 보인다. 크기만으로는 해결되지 않는다. */
    font-weight: var(--gthd-subw, 400);
    line-height: 1.5;
    white-space: nowrap;
    transition: color .18s ease, background-color .18s ease;
}

/* 마우스를 올린 하위 메뉴 */
.gthd.gthd_A1.sub_hover .a1_list a:hover,
.gthd.gthd_A1.sub_hover .a1_list a:focus-visible {
    background: var(--a1-point);
    color: #fff;
}
.gthd.gthd_A1:not(.sub_hover) .a1_list a:hover,
.gthd.gthd_A1:not(.sub_hover) .a1_list a:focus-visible {
    background: rgba(0, 0, 0, .045);
    color: var(--a1-point);
}

/* 지금 보고 있는 하위 메뉴.
   테두리형에 짙은 강조컬러를 글자색으로 쓰면 사이트에 따라 묻히므로
   채우는 쪽이 대비가 보장된다. */
.gthd.gthd_A1.sub_pill .a1_list a.is_on {
    background: var(--a1-point);
    color: #fff;
}
.gthd.gthd_A1:not(.sub_pill) .a1_list a.is_on {
    color: var(--a1-point);
    font-weight: 700;
}

/* 새글 아이콘 — 채워진 배경 위에서는 색을 뒤집는다 */
.gthd.gthd_A1 .a1_list .gnb_new_ico {
    display: inline-block;
    margin-left: 2px;
    padding: 0 4px;
    border-radius: 3px;
    background-color: var(--a1-point) !important;
    color: #fff;
    font-size: 9px;
    line-height: 15px;
    vertical-align: middle;
}
.gthd.gthd_A1.sub_hover .a1_list a:hover .gnb_new_ico,
.gthd.gthd_A1.sub_pill .a1_list a.is_on .gnb_new_ico {
    background-color: #fff !important;
    color: var(--a1-point);
}


/*───────────────────────────────────────────────────────────────
  6. 오른쪽 유틸 — util_mini

  아이콘 3개만. 원형 테두리를 두르지 않는다(그건 gt_hd_garo2 것).
  마우스를 올렸을 때만 옅은 원이 깔린다.
───────────────────────────────────────────────────────────────*/
/* 항목 사이 간격은 설정 snb_gap 이 정한다 (core.css 의 gap).
   여기서 다시 박지 않는다 — 두 곳에서 간격을 만들면 설정을 키워도
   생각만큼 안 벌어진다. */

/* 유틸 아이콘 크기.
   ------------------------------------------------------------
   값 자체는 core.php 가 설정(snb_ico_size)에서 내려보내는
   --gthd-snbico 를 그대로 쓴다. 여기에 px 를 박으면 설정을 바꿔도
   크기가 안 변한다.

   ★ 그런데 규칙은 여기에도 둔다. gt_hd_core 를 안 올린 상태에서는
     그 변수도, core.css 의 크기 규칙도 없어서 아이콘이 3줄 메뉴와
     같은 26px 로 부풀어 오른다. var() 의 대비값(20px)이 그 상황을
     막아 준다 — 두 파일 중 하나만 올라가도 크기는 맞는다.
     (실제로 core 만 안 올라가 아이콘이 커진 적이 있다)          */
.gthd.gthd_A1 .gthd_snb .gthd_ico svg {
    width: var(--gthd-snbico, 20px);
    height: var(--gthd-snbico, 20px);
}
.gthd.gthd_A1 .gthd_snb .gthd_ico .gthd_mi { font-size: var(--gthd-snbicomi, 22px); }

/* 구판 gt_hd_A 세트는 스크랩·쪽지가 원본 18px, 검색이 20px 이었다.
   도형이 viewBox 를 꽉 채우는 그림이라 셋을 같은 px 로 그리면
   스크랩·쪽지만 커 보인다. 그 비율(0.9)을 되살린다. */
.gthd.gthd_A1 .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_A1 .gthd_snb .gthd_maptog svg {
    width: var(--gthd-icosize, 26px);
    height: var(--gthd-icosize, 26px);
}
.gthd.gthd_A1 .gthd_snb .gthd_maptog .gthd_mi { font-size: var(--gthd-icosize, 26px); }

.gthd.gthd_A1 .gthd_snb > li { display: flex; align-items: center; }

/* 아이콘 뒤에 깔리는 원 — 세 스킨이 이 하나를 공유하고
   보이는 시점(호버만 / 항상)만 다르게 한다. */
.gthd.gthd_A1 .gthd_snb .gthd_ico::before {
    content: "";
    position: absolute;
    /* inset 을 못 읽는 브라우저 대비로 낱개 속성을 적는다 */
    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_A1 .gthd_snb .gthd_ico svg,
.gthd.gthd_A1 .gthd_snb .gthd_ico img { position: relative; z-index: 1; }

.gthd.gthd_A1.gthd_over:not(.scrolling) .gthd_snb .gthd_ico::before {
    background: rgba(255, 255, 255, .18);
}

/*── util_skin = 'mini' (기본) — 아이콘만. 호버 때만 원 ──*/
.gthd.gthd_A1.util_mini .gthd_snb .gthd_ico:hover::before,
.gthd.gthd_A1.util_mini .gthd_snb .gthd_ico.is_on::before { opacity: 1; }

/*── util_skin = 'soft' — 옅은 원이 항상 깔린다 ──
   아이콘이 3개보다 많거나(쪽지·포인트 등) 배경이 복잡한 사이트에서
   버튼임이 분명해진다. */
.gthd.gthd_A1.util_soft .gthd_snb .gthd_ico::before { opacity: 1; }
.gthd.gthd_A1.util_soft .gthd_snb .gthd_ico:hover::before { background: rgba(0, 0, 0, .1); }
.gthd.gthd_A1.util_soft.gthd_over:not(.scrolling) .gthd_snb .gthd_ico:hover::before { background: rgba(255, 255, 255, .3); }

/*── util_skin = 'line' — 항목 사이 세로 구분선 ──
   담백한 기업사이트에 어울린다. 구분선은 왼쪽 테두리로 그린다.
   ★ 1360px 이하에서는 통째로 끈다. 그 구간에서는 .pc 항목이 숨는데,
     앞 항목이 사라지면 맨 앞 항목에 구분선만 덩그러니 남는다. */
.gthd.gthd_A1.util_line .gthd_snb > li + li {
    position: relative;
    padding-left: var(--gthd-snbgap, 12px);
}

/* ★ li 에 border-left 로 그리면 선이 항목 높이(아이콘 상자 40px
     안팎)를 그대로 채워 지나치게 길어 보인다. 가운데 정렬한
     가상요소로 그려서 높이를 설정(util_line_h)으로 뺀다. */
.gthd.gthd_A1.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_A1.util_line .gthd_snb .gthd_ico:hover::before,
.gthd.gthd_A1.util_line .gthd_snb .gthd_ico.is_on::before { opacity: 1; }

/*── 닉네임 · 포인트 · 전화번호 ──
   글자 항목은 아이콘 버튼보다 조금 작게 두어 아이콘 줄이 어수선해지지
   않게 한다. */
.gthd.gthd_A1 .gthd_nick,
.gthd.gthd_A1 .gthd_point {
    padding-left: 0;
    padding-right: 0;
    font-size: var(--gthd-snbsize, 13px);
}

/* 회원 아이콘(테두리 없는 icon 방식)일 때 사진은 원 안에 조금 작게.
   원형 버튼(btn) 방식은 core.css 가 사진을 꽉 채운다. */
.gthd.gthd_A1.snb_icon .gthd_mytog .gthd_avatar { width: 30px; height: 30px; }

/* 원형 버튼(btn) 은 core.css 가 이미 배경이나 테두리를 그린다.
   여기 원까지 겹치면 두 겹으로 보이므로 끈다. */
.gthd.gthd_A1.snb_btn .gthd_mytog::before { display: none; }


/*───────────────────────────────────────────────────────────────
  8. 화면 크기별

  PC 대메뉴 숨김은 core.css 가 #header 특이도로 처리한다.
  여기서는 카드·패널의 세부 수치만 손본다.
───────────────────────────────────────────────────────────────*/

@media all and (max-width: 1360px) {

    /* util_skin = 'line' 의 구분선을 끈다.
       이 구간에서는 .pc 항목이 숨는데, 앞 항목이 사라지면 맨 앞
       항목에 구분선만 덩그러니 남는다. */
    .gthd.gthd_A1.util_line .gthd_snb > li + li { padding-left: 0; }
    .gthd.gthd_A1.util_line .gthd_snb > li + li::before { content: none; }

}