@charset "utf-8";
/* ============================================================
 * 모바일 슬라이드 메뉴 스타일만 발췌
 *
 * 신형 템플릿(main2/sub2)을 쓰는 페이지 55p 용이다. 이 페이지들은 이미
 * 자체 반응형 CSS 가 있어서 css2/m/master.css 를 통째로 얹으면
 * 본문 레이아웃까지 덮어써 망가진다. 메뉴에 필요한 규칙만 뽑아 쓴다.
 *
 * 출처: css2/m/main.css (원본 모바일 메뉴 스타일)
 * ============================================================ */

@media (max-width: 768px) {
  header .vip {position:absolute; top:13px; right:86px; width:36px; height:36px; margin-right:10px; text-align:center; border-radius:100%; background:#fff; line-height:40px; font-size:12px; font-weight:700; color:#000; font-family: 'Jost', sans-serif;}
  header .vip a {color:#000;}
  #allmenuwrap {position:fixed; right:-100%; top:0px; width:100%; height:100%; z-index:150; overflow-x:hidden; overflow-y:scroll; background-color:#fff;}
  .allmenu_top {width:100%; height:60px; line-height:60px; background:#c28558; opacity:1;}
  .allmenu_top ul {position:relative; width:90%; padding:0 5%; overflow:hidden;}
  .allmenu_top ul li {float:left; color:#fff;}
  .allmenu_top ul li a {font-size:14px; font-weight:700; color:#fff;}
  .allmenu_top ul li span {font-size:10px; font-weight:100; padding:0 8px;}
  .allmenu_top ul li.allmenu_point a {color:#ffec19;}
  .allmenu_top ul li.allmenu_close {position:absolute; top:50%; right:20px; transform:translateY(-50%); width:16px; height:19px; line-height:100%;}
  .allmenu_top ul li.allmenu_close img {width:100%;}
  .allmenu_list {position:relative; height:100%;}
  .allmenu_list .allmenu_01dep_wrap li.dep01 a {position:relative; display:block; width:90%; height:40px; line-height:40px; padding:0 5%;  font-size:14px; color:#000; font-weight:700; border-bottom:1px solid #999; background:#fff; z-index:0;}
  .allmenu_list .allmenu_01dep_wrap li.dep01_on a {background:#c28558; color:#fff;}
  .allmenu_02dep_wrap {position:absolute; top:0; right:-50%; width:50%; overflow:hidden; height:auto; min-height:100%;background:#fff;}
  .allmenu_list .allmenu_02dep_wrap li.dep02 a {position:relative; display:block; width:90%; height:40px; line-height:40px; padding:0 5%;  font-size:13px; color:#000; font-weight:500; border-bottom:1px solid #999; background:#f5f5f5; z-index:1;}
  .allmenu_list .allmenu_02dep_wrap li.dep02_on a {background:#07212d; color:#fff;}
  .allmenu_02dep_more {float:right;width:2%; padding-right:5%;}
  .allmenu_list .allmenu_03dep_wrap li.dep03 > a {padding:10px 7%; width:86%; display:inline-block; font-size:14px;color:#fff;}

  /* 상단 바 — 로고 + Menu */
  .elz-mheader { display: block !important; }
  .elz-mbar {
    position: fixed; top: 0; left: 0; right: 0; height: 54px; z-index: 320;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 14px; background: rgba(16,16,16,.92); box-sizing: border-box;
  }
  .elz-mlogo { display: block; width: 140px; }
  .elz-mlogo img { width: 100%; height: auto; display: block; }
  .elz-mbtn {
    border: 0; border-radius: 40px; background: #dda478; color: #101010;
    font-size: 14px; font-weight: 700; padding: 8px 18px; cursor: pointer;
  }
  body { padding-top: 54px; }

  /* 이 페이지들의 원래 헤더·PC 전체메뉴는 감춘다 */
  header, #allmenu, .mobilequick { display: none !important; }

  /* 게시판 카테고리 탭 — 신형 템플릿에도 같은 문제가 있다 */
  .tap { width: 100% !important; overflow: visible !important; }
  .tap ul { display: flex !important; flex-wrap: wrap; gap: 6px; width: 100% !important; padding: 0 !important; }
  .tap ul li {
    float: none !important; margin: 0 !important;
    flex: 0 0 calc(50% - 3px); width: calc(50% - 3px) !important; padding: 11px 10px !important; font-size: 13.5px !important;
    text-align: center; box-sizing: border-box;
  }

  /* 고정 헤더에 가려지는 것 방지.
     body padding-top 만으로는 페이지 안에서 앵커·scrollIntoView 로 이동했을 때
     제목이 헤더 밑에 깔린다. 스크롤 기준선을 헤더 높이만큼 내린다. */
  html { scroll-padding-top: 62px; }
  #subwrap { padding-top: 12px; }

  /* ── 우측 고정 버튼 정리 ──
     EVENT 는 화면 중간(top 421px)에 떠서 본문·카테고리 탭을 가린다.
     아래쪽 한 곳에 모아 작게 두면 내용을 안 가린다. */
  .rightquick2 {
    top: auto !important; bottom: 120px !important; right: 8px !important;
    transform: scale(.62); transform-origin: 100% 100%;
  }
  .rightquick {
    top: auto !important; bottom: 10px !important; right: 8px !important;
    transform: scale(.78); transform-origin: 100% 100%;
  }

  /* ── 고정 헤더가 본문 첫 줄을 덮던 것 ──
     서브 페이지 첫 섹션은 내용이 세로 가운데 정렬이라 헤더 밑으로 들어간다. */
  #fullpage > .section:first-child { padding-top: 84px; }
}