@charset "utf-8";

/* 기본 리셋 */
a{ text-decoration:none; color:#111; }
img{ border-style:none; }
html,body{ margin:0; }
*,*::before,*::after{ box-sizing:border-box; }
ul,li{ margin:0; padding:0; list-style:none; }

:root{ --bar-h:55px; /*container 로고영역 높이*/ 
        --nav-h:40px;  /* 메뉴높이 */
       }

/* 기본(모바일): 상단바만 보정 */
body{ padding-top: var(--bar-h); }

/* 상단바(로고/로그인/햄버거) */
.container{
  position:fixed; top:0; left:0; right:0;
  height:var(--bar-h);
  background:#fff; z-index:1000;
  overflow:visible;  padding:0 1%;
}
.container .logo{ width:45%; height:50px; padding:2px 0 2px 1%; float:left; border-bottom:1px solid #c0c0c0; }
.container .login{ width:45%; height:50px; padding:2px 1% 2px 0; float:left; text-align:right; border-bottom:1px solid #c0c0c0; }
.container .hamburger_icon{ width:8%; height:50px; padding:2px 0; float:left; border-bottom:1px solid #c0c0c0; background:#fff; }
.container .logo img{ width:170px; height:auto; }

/* PC 네비 바 */
.nav{
  position:fixed; left:0; right:0;
  top:var(--bar-h);
  background:#fff; z-index:9999;
  overflow:visible;
}

/* 1차 메뉴줄 */
.main-menu{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h);
  padding:0 16px;
  border-bottom:1px solid #9f9f9f;
}

/* 항목 */
.main-menu>li{ width:16.66%; text-align:center; }
.main-menu>li>a{
  display:block; color:#444; font-weight:600; padding:10px 0; transition:color .3s;
}
.main-menu>li>a:hover{ color:#000; }

/* 드롭다운 전체 래퍼(PC용) */
.sub-menu-wrapper{
  display:none;
  position:absolute; top:100%; left:0; right:0;
  background:#fff; border-bottom:1px solid #ccc;
  box-shadow:0 3px 10px rgba(0,0,0,.05);
  z-index:10000;
  justify-content:space-between;
}
.sub-menu{ width:16.66%; text-align:center; }
.sub-menu li{ padding:8px 0; border-bottom:1px solid #eee; font-size:14px; }
.sub-menu a{ display:block; color:#333; transition:background .2s,color .2s; }
.sub-menu a:hover{ background:#f7f7f7; color:#000; }

/* PC: 메뉴 hover 시 서브 보이기 (중복 한 줄로 정리) */
.nav:hover .sub-menu-wrapper{ display:flex; }
.nav:hover .main-menu{ border-bottom:none; }

/* 햄버거 아이콘 */
#icon{ display:none; }
#icon+label{
  position:relative; left:1%; top:2px;
  width:30px; height:30px; cursor:pointer; background:#fff; z-index:5;
}
#icon+label>span{
  position:absolute; display:block; width:100%; height:5px; border-radius:30px; transition:all .35s;
}
#icon+label>span:nth-child(1){ top:0; background:#0e6ca5; }
#icon+label>span:nth-child(2){
  top:50%; transform:translateY(-50%); background:#126e88;
}
#icon+label>span:nth-child(3){ bottom:0; background:#12887a; }
#icon:checked+label>span:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); background:green; }
#icon:checked+label>span:nth-child(2){ opacity:0; }
#icon:checked+label>span:nth-child(3){ bottom:50%; transform:translateY(50%) rotate(-45deg); background:blue; }

/* 모바일 햄버거 패널 위치도 변수로 */
#icon+label+#top_menu{
  position:fixed; left:0; right:0;
  top:var(--bar-h); /* 모바일 기준 */
  background:#eee; padding:20px 25px 25px;
  transition:all .35s; z-index:10000;
}
#icon:checked+label+#top_menu{ right:0; }
#icon:checked+label+#top_menu>ul>li>a{ color:#111; }

/* 반응형 분기 */
@media (min-width:701px){
  /* PC에서는 nav를 보이게 + 본문 보정값 = bar + nav */
  body{ padding-top: calc(var(--bar-h) + var(--nav-h)); }
  .nav{ display:block; }
  #icon+label{ display:none; }
  /* 햄버거 패널은 PC에선 네비 아래로 위치 가능(미사용이면 상관X) */
  #icon+label+#top_menu{ top: calc(var(--bar-h) + var(--nav-h)); }
}
@media (max-width:700px){
  /* 모바일: nav 숨김, 로고 넓힘, 햄버거 표시 */
  .nav{ display:none !important; }
  .main-menu{ display:none; }
  .container .logo{ width:90%; }
  .container .login{ display:none; }
  #icon+label{ display:block; }

  #icon+label+#top_menu{
    position: fixed;
    top: var(--bar-h);
    right: -100vw;             /* ← 핵심: 처음엔 완전히 밖으로 */
    left: auto;
    width: 100vw;
    height: calc(100vh - var(--bar-h));
    background: #EEE;
    z-index: 10000;
    padding: 20px 25px 25px;
    box-sizing: border-box;
    overflow:auto;
    transition: right .3s ease; /* 부드럽게 */
  }

  /* 체크되면 100% 꽉 차게 들어옴 */
  #icon:checked + label + #top_menu{
    right: 0;
  }

  /* 안쪽 리스트가 폭을 줄이지 않도록 */
  #top_menu ul{
    width: 100%;
    max-width: none;
  }
}

/* float 해제 */
.container::after{ content:""; display:block; clear:both; }