@charset "utf-8";

/*header 기본*/

    /*기본 레이아웃*/
    .header { width: 100%; height: 12.8rem; position: fixed; z-index: 100; background: white; transition: .3s ease; }
    .header .header-wrap { height: 100%; overflow: hidden; transition: all .3s ease-in-out; }
    .h-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1520px; width: 96%; height: 100%; position: relative; margin: 0 auto; } 

    /* logo */
    .header .header-wrap .logo { width: 17.2rem; }
    .header .header-wrap .logo img.logo_b { display: none; }
    
    .h-space { flex:1; }


/* 햄버튼 스타일 s */
    /* ham-btn */
    .ham-btn { width: 4rem; height: 4rem; transition: all .3s ease-in-out; z-index: 200; cursor: pointer; opacity: 1; }
    .ham-btn p { width: 20px; height: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); position: relative; }
    .ham-btn p span { transition: all .3s ease-in-out; position: absolute; background-color: var(--main-black); }
    .hd-ham-btn.ham-btn.on p span { background-color: var(--main-black); }

    /* 도시락 */
    .ham-btn.ham-bento span { display: block; width: 8px; height: 8px; border-radius: 50%; }
    .ham-btn.ham-bento span.hb01 { top: 0; left: 0; }
    .ham-btn.ham-bento span.hb02 { top: 0; right: 0; }
    .ham-btn.ham-bento span.hb03 { bottom: 0; left: 0; }
    .ham-btn.ham-bento span.hb04 { bottom: 0; right: 0; }


    /* 모바일메뉴 활성화시 햄버튼 */
    .mob_gnb .ham-btn { z-index: 9999; }

    .mob_gnb .ham-btn.active { position: relative; width: 40px; height: 40px; }
    .mob_gnb .ham-btn.active a { display: block; width: 28px; height: 28px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .mob_gnb .ham-btn.active p { width: 100%; height: 100%; }
    .mob_gnb .ham-btn.active p span { display: block; width: 100%; height: 1px; }
    .mob_gnb .ham-btn.active p span.hb01 { -webkit-transform: translateY(6px) rotate(-45deg); transform: translateY(6px) rotate(-45deg); top: 7px; }
    .mob_gnb .ham-btn.active p span.hb02 { opacity: 0; }
    .mob_gnb .ham-btn.active p span.hb03 { -webkit-transform: translateY(-7px) rotate(45deg); transform: translateY(-7px) rotate(45deg); bottom: 7px; }
    .mob_gnb .ham-btn.active p span.hb04 { opacity: 0; }
    

/* gnb s*/ 
    /* 기본 레이아웃 */
    .gnb_wrap { text-align: center; }
    .gnb_wrap > .gnb { overflow: hidden; }
    .gnb_wrap > .gnb > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -ms-flex-direction: row; flex-direction: row; -webkit-box-lines: single; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap:.7rem; float: right; margin-right: 5.3rem; }
    .gnb_wrap > .gnb > ul > li { display: inline-block; position: relative; vertical-align: top; }
    .gnb_wrap > .gnb > ul > li > a { display: inline-block; text-align: center; font-weight: 700; font-size: 1.8rem; padding: 0 1.5rem; }
    .gnb_wrap > .gnb > ul > li > a::before { content: ""; width: 100%; height: 3px; background: var(--key-color); position: absolute; bottom: -19px; left: 50%; transform: translateX(-50%); opacity: 0; }
        
    .gnb_wrap > .gnb > ul > li:hover > a,
    .gnb_wrap > .gnb > ul > li:focus > a { color: var(--key-color); position: relative; }
    .gnb_wrap > .gnb > ul > li:hover > a::before,
    .gnb_wrap > .gnb > ul > li:focus > a::before { opacity: 1; }

    .gnb_wrap .img_wrap { display: none; }
    .gnb_wrap > .gnb > ul ul > li > a { transition:.3s ease; font-size: 16px; color:var(--sub-black); font-weight: 300; }
    .gnb_wrap > .gnb > ul ul > li:hover a { font-weight: 400; color:var(--key-color); }

    
/* 스크롤 탑이 메인 비주얼 지나면 헤더 변경 s */
    .header.scroll { box-shadow: 0 3px 10px 10px rgba(0, 0, 0, 0.15); }
/*스크롤 탑이 메인 비주얼 지나면 헤더 변경 e*/

/* ---------------------------------------------------------------------------------------------------------------------------------------------- */

/* 모바일메뉴 공통 기본 s*/
.mobile_menu { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; padding: 4.8rem; overflow: hidden; visibility: hidden; background: transparent; z-index: 250; }
.mobile_menu::after { content: ''; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.75); position: fixed; top: 0; left: 0; opacity: 0; transition: all 0.7s linear;  z-index: -1; }
.mobile_menu.mobileOn { visibility: visible; }
.mobile_menu.mobileOn::after { opacity: 1; }

.mobile_menu .top_box { display: flex; justify-content: space-between; position: absolute; top:4.8rem; left:50%; transform: translateX(-50%); width: calc(100% - 9.6rem); padding-bottom: 2rem; border-bottom:1px solid var(--lite-gray); z-index: 500; }
.mobile_menu .top_box .logo { width: 12rem; }

.mobile_menu .nav-eng { display: none; }
.mobile_menu.eng-on .nav { display: none; }
.mobile_menu.eng-on .nav-eng { display: block; }
/* 모바일메뉴 공통 기본 e*/

.mobileOn .mobile-menu-wrap { transform: translateX(0); }
.mobile-menu-wrap { z-index: 1; width: 100%; max-width: 480px; height: 100vh; padding: 4.8rem; background-color: white; position: absolute; top: 0; left: unset; right: 0; transform: translateX(100%); overflow-y: auto; transition: .3s; }
.mobile-menu-wrap::before { z-index: -1; content: ''; display: block; position: absolute; bottom:5.6rem; right:10%; width:80%; aspect-ratio: 384/319; background: url('/resources/img/common/logo_mobile.svg') no-repeat center/contain; }
.mobile-menu-wrap .nav { width: 100%; margin-top: 10rem; } 
.mobile-menu-wrap .nav > ul { display: flex; flex-direction: column; gap:4.8rem; overflow-y: auto; height: 100%; }
.mobile-menu-wrap .nav > ul > li > a { position: relative; display: block; padding: 0 2.4rem; margin-bottom: 2rem; font-size: 1.8rem; font-weight: 700; line-height: 120%; word-break: keep-all; }
.mobile-menu-wrap .nav > ul > li > a::before { content: ''; position: absolute; display: block; left: 0; top:50%; transform: translateY(-70%); width: 1.2rem; aspect-ratio: 1/1; background: var(--point-color); border-radius: 50%; }

.mobile-menu-wrap .nav > ul > li ul a { display: inline-block; margin-left: 4.4rem; font-weight: 700; font-size: 2.2rem; line-height: 140%; padding: 1.2rem 0; position: relative; transition: .3s ease; }
.mobile-menu-wrap .nav > ul > li ul a:hover { color: var(--point-color); }


/* 하프창 크기 그대로 혹은 이상 */
.mobile_menu.mobileOn.rightIn .mob_gnb.mob_gnb_half { right: -645px; } 


@media screen and (max-width:1400px){
  .header { height: 10rem; }
  .header .header-wrap .logo { width: 15rem; }
}

@media screen and (max-width:768px){
  .h-inner { width: 100%; padding: 0 24px; }
  .gnb_wrap > .gnb > ul { display: none; }
}

@media screen and (max-width:500px){
  .mobile-menu-wrap .nav > ul > li > a { margin-bottom: 1.4rem; }
  .mobile-menu-wrap .nav > ul > li ul a { padding: 1rem 0; }
  .mobile-menu-wrap { padding: 4rem; }
  .mobile_menu .top_box { width: calc(100% - 7.6rem); }
  .mobile-menu-wrap .nav > ul { gap:4rem; }
}