@charset "utf-8";

/*header 기본*/

    /*기본 레이아웃*/
    .header { width: 100%; height: 100px; position: fixed; z-index: 110; font-size: 14px; background: transparent; transition: .3s ease-out; }
    .header .header-wrap { height: 100px; overflow: hidden; box-sizing: border-box; transition: all .2s ease-in-out; background-color: transparent; }
    .header .header-wrap.on { overflow: initial; }
    .h-inner { width: 96%; height: 100%; display: flex; justify-content: space-between; padding-right: 100px; padding-top: 36px; position: relative; margin: 0 auto; } 

    /* logo */
    .header .header-wrap .logo { width: 190px; float: left; }
    .header .header-wrap .logo img { width: 100%; }
    .header .header-wrap .logo img.logo_b { display: none; }

    /* 헤더 호버 시 배경색이 바뀌는 경우의 로고(기본) */ 
    .header .header-wrap .logo.on img.logo_b { display: block; }
    .header .header-wrap .logo.on img.logo_w { display: none; }
 
    /* ---------------------------------------------------------------------------------------------------------------------------------------------- */

/*header 기본 e*/

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

/* 햄버튼 스타일 s */
    /* ham-btn */
    .ham-btn { width: 50px; height: 50px; position: fixed; top: 27px; transition: all .3s ease-in-out; z-index: 200; cursor: pointer; box-sizing: border-box; opacity: 1; }
    .ham-btn p { width: 30px; height: 18px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); position: relative; box-sizing: border-box; }
    .ham-btn p span { transition: all .3s ease-in-out; position: absolute; background-color: #FFFFFFCC; border-radius: 2px; }
    .hd-ham-btn.ham-btn.on p span { background-color: var(--main-black); }


    /* 햄버거 */
    .ham-btn.ham-line p span { display: block; height: 2px;  }
    .ham-btn.ham-line p span.hb01 { width: 70%; top: 0; right: 0;  }
    .ham-btn.ham-line p span.hb02 { width: 100%; top: calc(50% - 1px); right: 0; }
    .ham-btn.ham-line p span.hb03 { width: 70%; bottom: 0; left: 0; }
    .ham-btn.ham-line p span.hb04 { display: none; }

    /* 후라이*/
    .ham-btn.ham-fies p span { display: block; height: 4px; }
    .ham-btn.ham-fies p span.hb01 { width: 100%; top: 0; right: 0; }
    .ham-btn.ham-fies p span.hb02 { width: 70%; top: 11px; right: 0; }
    .ham-btn.ham-fies p span.hb03 { width: 100%; bottom: 0; right: 0; }
    .ham-btn.ham-fies p span.hb04 { display: none; }

    /* 도시락 */
    .ham-btn.ham-bento { height: 30px; }
    .ham-btn.ham-bento span { display: block; width: 12px; height: 12px; }
    .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; }

    /* 캔디박스 */
    .ham-btn.ham-candy { height: 29px; }
    .ham-btn.ham-candy span { display: block; width: 7px; height: 7px; left: 50%; transform: translateX(-50%); }
    .ham-btn.ham-candy span::before { content: ''; display: block; width: 7px; height: 7px; background-color: #fff; position: absolute; top: 0; left: -11px; }
    .ham-btn.ham-candy span::after { content: ''; display: block; width: 7px; height: 7px; background-color: #fff; position: absolute; top: 0; right: -11px; }

    .ham-btn.ham-candy span.hb01 { top: 0; }
    .ham-btn.ham-candy span.hb02 { top: 11px; }
    .ham-btn.ham-candy span.hb03 { bottom: 0; }
    .ham-btn.ham-candy span.hb04 { display: none;  }

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

    .mob_gnb .ham-btn.active { width: 100px; height: 90px; top: 0; right:10px; }
    .mob_gnb .ham-btn.active a { display: block; width: 30px; height: 26px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .mob_gnb .ham-btn.active p span { display: block; width: 100%; height: 2px; border-radius: 2px; }
    .mob_gnb .ham-btn.active p span.hb01 { -webkit-transform: translateY(6px) rotate(-45deg); transform: translateY(6px) rotate(-45deg); top: 1px; }
    .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: 1px; }
    .mob_gnb .ham-btn.active p span.hb04 { opacity: 0; }

    /* 스크롤 시 햄버튼 */
    .hd-ham-btn.ham-btn.scroll p span  { background: var(--main-black); }
    .hd-ham-btn.ham-btn.scroll.active span { background: #fff; }
    .hd-ham-btn.ham-btn.ham-candy.scroll span::before,
    .hd-ham-btn.ham-btn.ham-candy.scroll span::after {  background: var(--main-black); }
/* 햄버튼 스타일 e */

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

/* gnb s*/ 
    /* 기본 레이아웃 */
    .gnb_wrap { width: auto; position: absolute; left:50%; top:35px; transform: translateX(-50%); text-align: center; }
    .gnb_wrap > .gnb { overflow: hidden; float: right; } 
    .gnb_wrap > .gnb::after { content: ''; display: block; clear: both; height: 0; }
    .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:20px; transition: .3s ease-out; }
    .gnb_wrap > .gnb > ul > li { display: inline-block; position: relative; }
    .gnb_wrap > .gnb > ul > li > a { display: inline-block; text-align: center; color: #FFFFFFE5; font-size: 18px; font-weight: 800; padding: 10px; white-space: nowrap; transition: .3s ease-out; }
        
    .gnb_wrap > .gnb > ul > li:hover > a,
    .gnb_wrap > .gnb > ul > li:focus > a { color: var(--key-color) !important; 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:#111114E5; font-weight: 600;  white-space: nowrap; display: block; transform: rotate(-0.045deg); }
    .gnb_wrap > .gnb > ul ul > li:hover a { color:var(--key-color); }
  
    
    .etc-btn a { margin-left:10px; display: inline-flex; padding: 6px 12px; justify-content: center; align-items: center; color: #fff; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.30); transition: 0.3s ease-out; }
    .etc-btn a:hover { background: #111114 !important; color:white !important; }

    /*alldrop:S--------------------------*/
    .header:hover .header-wrap,
    .header:focus .header-wrap { background: white; }
    .header:hover .gnb_wrap.alldrop > .gnb > ul > li > a,
    .header:focus .gnb_wrap.alldrop > .gnb> ul > li > a { color: #111114E5; }
    .header:hover .gnb_wrap > .gnb > ul,
    .header:focus .gnb_wrap > .gnb > ul { gap:60px; }
    .header:hover .etc-btn a,
    .header:focus .etc-btn a { color:#111114; border-color: #1111144D; }
    #container:has(header:hover) .ham-btn p span,
    #container:has(header:focus) .ham-btn p span { background: #111114E5; }

    .gnb_wrap.alldrop > .gnb > ul .two_depth { position: absolute; left:50%; top:63px; transform: translateX(-50%); }
    .gnb_wrap.alldrop > .gnb > ul .two_depth > li { padding: 8px; }

    .header-wrap.on .gnb_wrap.alldrop > .gnb > ul > li .two_depth { opacity: 1; }
    .header-wrap.on .gnb_wrap > .gnb { overflow: inherit; }
    /*alldrop:E--------------------------*/

/* gnb e*/ 

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

/* 스크롤 탑이 메인 비주얼 지나면 헤더 변경 s */
    .header.scroll { background: white; }
    .header.scroll .gnb_wrap > .gnb > ul > li > a { color: var(--main-black); }
    .header.scroll .etc-btn a { color:#111114; border-color: #1111144D; }
    #container:has(.header.scroll) .ham-btn p span { background: #111114E5; }

    /* 스크롤 시 배경색이 바뀌지 않을 경우의 로고 */
    .scroll .header-wrap .logo img.logo_b { display: block; }
    .scroll .header-wrap .logo img.logo_w { display: none; }

/*스크롤 탑이 메인 비주얼 지나면 헤더 변경 e*/

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

/* 모바일메뉴 공통 기본 s*/
.mobile_menu { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; box-sizing: border-box; overflow: hidden; display: none; 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::after { opacity: 1; }

.mobile_menu .top_box { position: absolute; z-index: 500; }
.top_box .head-icons { margin-left: 0; }

.mob_gnb .gnb > ul > li .img_wrap { display: none; }

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

.quick-bar { position: fixed; right: 3%; bottom:11%; z-index: 100; }
.quick-bar a { display: block; width: 54px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); overflow: hidden; border-radius: 13px; }


/* 반응형 */
@media screen and (max-width:1700px){
  .h-inner { padding-right: 80px; }
  .gnb_wrap > .gnb > ul { gap:16px } 
  .gnb_wrap > .gnb > ul > li > a { font-size: 17px; }
  .gnb_wrap > .gnb > ul ul > li > a { font-size: 15px; }
  .header:hover .gnb_wrap > .gnb > ul,
  .header:focus .gnb_wrap > .gnb > ul { gap:40px; }
}
@media screen and (max-width:1400px){
  .h-inner { padding-right: 50px; }
  .gnb_wrap > .gnb > ul { gap:8px } 
  .gnb_wrap > .gnb > ul > li > a { font-size: 16px; transform: rotate(00.045deg); }
  .gnb_wrap > .gnb > ul ul > li > a { font-size: 14px; }
  .header:hover .gnb_wrap > .gnb > ul,
  .header:focus .gnb_wrap > .gnb > ul { gap:32px; }
  .etc-btn { margin-top: 5px; }
  .etc-btn a { padding: 4px 8px; margin-left: 8px; font-size: 13px; }

  .ham-btn { top: 28px; }
}

@media screen and (max-width:1130px){
  .header { height: 80px; }
  .header .header-wrap { height: 80px !important; }
  .h-inner { padding-top: 0; align-items: center; } 
  .header .header-wrap .logo { width: 180px; }
    .gnb_wrap { display: none; }

    .ham-btn { top:18px; }

    .quick-bar a { width: 48px; }
}

@media screen and (max-width:1024px){
  .header .header-wrap .logo { width: 170px; }
  .quick-bar a { width: 46px; }
}

@media screen and (max-width:768px){
  .header { height: 70px; }
  .header .header-wrap { height: 70px !important; }
  .h-inner { width: 100%; padding:0 20px; padding-right: 70px; }
  .ham-btn { top:14px; }
  .ham-btn p { width: 28px; }
  .etc-btn a { padding: 4px 6px; margin-left: 2px; }
  .quick-bar a { width: 44px; }
}
@media screen and (max-width:450px){
  .etc-btn { display: none; }
  .ham-btn p { width: 26px; height: 16px; }
  .ham-btn { top:13px; }
  .header .header-wrap .logo { width: 160px; }
}