/* 해더 */
#header {position: fixed; left: 0; top: 0; width: 100%; height: 6.25rem; background: #fff; z-index: 100; filter: drop-shadow(0 0 0.75rem rgba(40,167,255,0.15));}
#header.active {border-bottom: 1px solid rgba(137,137,137,0.3);}
#header .inner {max-width: 1800px; width: 100%; margin: auto;}
#header .logo-wrap {width: 20%;}
#header .logo img {padding-bottom: 0.5rem;}

/* gnb */
#header .gnb {width: 75%; margin-left: 5%; gap: 1rem;} 
#header .gnb .menu-wrap {width: 70%; text-align: center;}
#header .gnb .menu-wrap li.menu {width: calc(100% / 5);}
#header .gnb .menu-wrap li.menu span {cursor: pointer;}

/* lnb */
#header .lnb {position: absolute; top: 6.25rem; left: 0; width: 100%; background: #fff; border-top: 1px solid rgba(137,137,137,0.3); height: 27rem; opacity: 0; transition: opacity 0.45s; pointer-events: none;}
#header .lnb.on {opacity: 1; pointer-events: auto;}

#header .lnb .tit {background: var(--sub2color); position: relative; overflow: hidden; width: 25%; text-align: left; padding: 2.5rem 0 2.5rem 2%;}
#header .lnb .tit:after {position: absolute; left: 0; bottom: -30%; content: url("/img/main/tit_logo.png"); width: 100%; height: 100%;}

/* depath */
#header .depath {text-align: left; padding: 2.5rem 0; height: 100%; overflow: hidden; display: block;}
#header .depath li {padding: 0.5rem 2rem; display: flex;}
#header .depath li a {color: var(--dark-gray); display: inline-block;}

#header .depath li a.on {color: var(--point3color); font-weight: 700;}

#header .depath.depath2 {position: relative; width: 45%;}
#header .depath.depath2:after {position: absolute; left: 33.333%; top: 0; height: 1000%; width: 1px; background: rgba(137,137,137,0.3); content: "";}
#header .depath.depath2::before {position: absolute; left: 66.666%; top: 0; height: 1000%; width: 1px; background: rgba(137,137,137,0.3); content: "";}


@media(min-width:991px) {
    #header .depath.depath3,
    #header .depath.depath4 {position: absolute; left: 33.333%; top: 0; width: 100%; z-index: 1; display: none;}
    
    #header .depath.depath3.on,
    #header .depath.depath4.on {display: block;}
}

/* snb */
#header .snb {width: 35%; border-left: 1px solid rgba(137,137,137,0.3); padding: 2.5rem 0; height: 100%; margin-right: 2%;}
#header .snb > li img {filter: grayscale(100%) brightness(0);}
#header .snb > li span {cursor: default !important;}

#header .snb .box .imgbox {position: relative; width: 62px; height: 62px; display: flex; justify-content: center; align-items: center; background: var(--sub2color); border-radius: 50%; transition: 0.45s; margin: auto;}
#header .snb .box .imgbox img {position: relative; z-index: 1;}
#header .snb .box:hover .imgbox {background: var(--point3color);}
#header .snb .box:hover img {filter: brightness(0) invert(1);}


/* 해더 로그인버튼 */
#header .login li {width: 8rem; padding: 0.5rem; border-radius: 20px; background: var(--dark-gray); position: relative; overflow: hidden;}
#header .login li::before {position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: #000; content: ""; transition: 0.45s;}
#header .login li:hover::before {width: 100%;}
#header .login li a {position: relative; z-index: 1;}

@media(max-width: 1800px) {
    #header .inner {width: 90%;}
    #header .lnb .tit {padding: 2.5rem 0 2.5rem 5%;}
    #header .snb {margin-right: 5%;}
}

@media(max-width:1440px) {
    #header .gnb {margin-left: 2%;}
    #header .gnb,
    #header .gnb .menu-wrap {width: 80%;}
}

@media(max-width:1240px) {
    #header .gnb,
    #header .gnb .menu-wrap {width: 90%;}

    #header .login li.mr-20 {margin-right: 0.5rem;}
}

@media(max-width:1024px) {
    .sitemap_btn {display: none;}
}


/* 모바일 */
@media(max-width:990px) {
    /* 모바일 폰트 크기 */
    #header .font-16,
    #header .lnb .tit .font-20 {font-size: 1.750rem;}
    #header .font-18 {font-size: 2.000rem;}
    #header .font-20,
    #header .font-32 {font-size: 2.625rem;}
    #header .font-30 {font-size: 3.375rem;}
    #header .logo-wrap {width: 100%;}
    #header .logo {width: fit-content; margin-right: -5%;}
    #header .logo img {transform: scale(0.8); margin-left: -8%; width: fit-content;}

    #header .inner {flex-direction: column;}
    #header .gnb {width: 100%; order: 3;}
    #header .login  {width: 90%; padding: 4.375rem 2.5rem; border-bottom: 1px solid rgba(137,137,137,0.3); margin: auto;}
    #header .login li {width: 50%;}

    #header .nav {width: 100%; flex-direction: column; position: fixed; top: 6.25rem; left: 0; right: 0; background: #fff; height: calc(100vh - 6.25rem); overflow-y: auto; display: none !important;}
    #header .nav.on {display: flex !important;}

    #header .gnb {margin-left: 0;}
    #header .gnb .menu-wrap {flex-direction: column; align-items: start; text-align: left; width: 100%; overflow: auto;}
    #header .gnb .menu-wrap li.menu {width: 90%; margin: auto; position: relative;}
    #header .gnb .menu-wrap li.menu > a {display: none;}

    #header .lnb {position: initial; flex-direction: column;  opacity: 1; height: auto; border: none; pointer-events: auto;}
    #header .lnb .tit {padding: 2.5rem; width: 100%; border-bottom: 1px solid rgba(137,137,137,0.3); background: #fff;}
    #header .lnb .tit h2 {position: relative;}
    #header .lnb .tit h2:after {position: absolute; right: 0; top: 50%; transform: translateY(-50%); content: "\f078"; font-family: FontAwesome; color: var(--dark-gray);}
    #header .lnb .tit.on {background: var(--sub2color);}
    #header .lnb .tit:after {display: none;}
    #header .lnb .tit.on:after {transform: scale(0.35) translateY(50%); bottom: 50%; display: block; left: auto; right: -36%;}
    #header .lnb .tit.on h2:after {display: none;}

    #header .depath {overflow: visible; width: 100% !important; padding: 0;}

    #header .depath2,
    #header .depath3,
    #header .depath3 {display: none;}

    #header .depath.depath3,
    #header .depath.depath4 {position: initial;}

    #header .depath li {flex-direction: column; padding: 0;}
    #header .depath li a {position: relative;}
    #header .depath li a:after {position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%); content: "\f078"; font-family: FontAwesome; transition: 0.3s;}
    /* #header .depth2-item.on > a:after {transform: translateY(-50%) rotate(180deg); color: #000;} */
    #header .depath4 li a:after {display: none;}
    #header .depth2-item {background: var(--light-gray); border-bottom: 1px solid rgba(137,137,137,0.3);}
    #header .depth3-item {background: #fff; border-top: 1px solid rgba(137,137,137,0.3);}
    #header .depth4-item {background: #f2fafd; border-top: 1px solid rgba(137,137,137,0.3);}

    #header .depath li a.on:after {color: #000; transform: translateY(-50%) rotate(180deg);}

    #header .depth2-item a {padding: 2rem 2.5rem;}
    #header .depth3-item a {padding: 2rem 5rem;}
    #header .depth4-item a {padding: 2rem 7.5rem;}

    #header .depath.depath2:after,
    #header .depath.depath2::before,
    #header .lnb .snb,
    #header ::-webkit-scrollbar {display: none;}

    /* snb */
    #header .mo-snb {width: 100%; order: 3;}
    #header .mo-snb .snb {width: 100%; margin-top: 1rem;}

    /* 햄버거 메뉴 */
    .hamberder-menu {position: absolute; right: 5%; top: 50%; transform: translateY(-50%); height: 100%; z-index: 14; cursor: pointer; display: block;}
    .hamberder-menu .line {width: 3rem; height: 3px; background: #000; position: relative; transition: 0.3s; top: 50%;}
    .hamberder-menu .line:after {width: 3rem; height: 3px; background: #000; position: absolute; top: calc(50% - 0.9rem); left: 0; content: ""; transform: translateY(-50%); transition: 0.3s;}
    .hamberder-menu .line:before {width: 3rem; height: 3px; background: #000; position: absolute; top: calc(50% + 0.9rem); left: 0; content: ""; transform: translateY(-50%); transition: 0.3s;}
    .hamberder-menu.active .line {background: #fff;}
    .hamberder-menu.active .line:after {transform: translateY(-50%) rotate(45deg); top: 0;}
    .hamberder-menu.active .line:before {transform: translateY(-50%) rotate(-45deg); top: 0;}
}

@media(max-width:420px) {
    #header .font-20, #header .font-32 {
        font-size: 2rem;
    }

    #header .lnb .tit.on:after {transform: scale(0.3) translateY(50%); right: -28%;}
}

@media(max-width:380px) {
    #header .logo-wrap {transform: scale(0.8); margin-left: -12%;}
}

@media(max-width:330px) {
    #header .snb > li {flex-direction: column;}
    #header .snb > li img {display: none;}
}

/* 푸터 */
footer {background: #333333;}
footer li {color: #fff !important;}
footer ul.infor li {border-right: 1px solid #fff; line-height: 1;}
footer ul.infor li:last-child {border: none;}

footer ul.snsbox li {position: relative; transform: scale(0.8);}
footer ul.snsbox li.pl-10 {padding-left: 0;}

@media(max-width:680px) {
    footer .font-16 {font-size: 1.375rem;}
    footer .box-wrap {flex-direction: column; align-items: flex-start;}
    footer ul.infor {flex-direction: column;}
    footer ul.infor.mt-10 {margin-top: 0;}
    footer ul.infor li {padding: 0; border: none; margin-top: 0.625rem;}

    footer ul.snsbox li {margin-top: 1.875rem; margin-bottom: 1.875rem;}
    footer .text-right {text-align: left;}
}

@media(max-width:400px) {
    footer ul.manage {flex-wrap: wrap; gap: 1rem !important;}
}

/* 퀵메뉴 */
#quick {position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 11;}
#quick .list {padding: 1rem;}
#quick .list span {margin-top: 0.25rem;}

#quick .list.rez,
#quick ul {border-radius: 20px 0 0 20px; filter: drop-shadow(0 0 0.75rem rgba(40,167,255,0.15));}

#quick ul {display: block;}
#quick ul .list {position: relative;}
#quick ul .list:after {width: 70%; margin: auto; background: var(--gray); height: 1px; content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 10001;}
#quick ul .list:last-child:after {display: none;}

#quick .q_telbox {position: absolute; width: 20rem; right: 6.25rem; top: 50%; transform: translateY(-50%); border-radius: 25px; padding: 0.5rem; display: none; opacity: 0;}

#quick ul .list.tel:hover > .q_telbox {display: flex; opacity: 1;}

@media(max-width:768px) {
    #quick .font-14 {font-size: 1.250rem;}

    #quick {right: 5%; top: auto; bottom: 8.5rem; transform: translateY(0);}
    #quick .wrap {display: flex; flex-direction: column; align-items: center;}
    
    #quick .list.rez,
    #quick ul {border-radius: 20px;}
    #quick ul {display: none; width: 6.25rem;}
    #quick ul .list:nth-child(6):after {display: none;}
    #quick .list.rez { width: 6.25rem; height: 6.25rem;}
    #quick .list img {width: 20px;}


    #quick .go_top {background: #000; border-radius: 50%; width: 6.25rem; height: 6.25rem;}
    #quick .go_top img {filter: brightness(0) invert(1); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.6);}

    #quick .q_btn {background: #fff; width: 6.25rem; height: 6.25rem; border-radius: 20px; filter: drop-shadow(0 0 0.75rem rgba(40,167,255,0.15));}
    #quick .q_btn img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.8);}
    #quick .q_btn.active img {transform: translate(-50%, -50%) scale(0.8) rotate(45deg);}

    #quick ul .list.tel:hover > .q_telbox {display: none;}
}

@media(max-width:500px) {
    #quick {bottom: 7rem;}
}

@media(max-width:360px) {
    #quick {bottom: 6.5rem;}
}

/* 하단 예약하기 */
#rez_mo {position: fixed; left: 0; right: 0; z-index: 11; bottom: 0; width: 100%;}
#rez_mo ul {width: 100%;}
#rez_mo ul li {width: calc(100% / 3); background: var(--pointcolor); padding: 2rem 1rem;}
#rez_mo ul li:nth-child(1) {border-radius: 20px 0 0 0;}
#rez_mo ul li:nth-child(2) {background: var(--orgcolor);}
#rez_mo ul li:nth-child(3) {border-radius: 0 20px 0 0;}

@media(max-width:500px) {
    #rez_mo ul li img {width: 20px;}
    #rez_mo .font-26 {font-size: 1.5rem;}
}

@media(max-width:420px) {
    #rez_mo .font-26 {font-size: 1.2rem;}
}

@media(max-width:360px) {
    #rez_mo ul li img {display: none;}
    #rez_mo ul li span.pl-10 {padding-left: 0;}
}

/* 사이트맵 */

/* 버튼 */
.sitemap_btn {cursor: pointer; height: 6.25rem;}

.sitemap_btn .line {width: 1.5rem; height: 2px; background: #000; position: relative; transition: 0.3s; top: 50%;}
.sitemap_btn .line:after {width: 1.5rem; height: 2px; background: #000; position: absolute; top: calc(50% - 0.5rem); left: 0; content: ""; transform: translateY(-50%); transition: 0.3s;}
.sitemap_btn .line:before {width: 1.5rem; height: 2px; background: #000; position: absolute; top: calc(50% + 0.5rem); left: 0; content: ""; transform: translateY(-50%); transition: 0.3s;}
.sitemap_btn.active .line {background: #fff;}
.sitemap_btn.active .line:after {transform: translateY(-50%) rotate(45deg); top: 0;}
.header .sitemap_btn.active .line:before {transform: translateY(-50%) rotate(-45deg); top: 0;}


.sitemap {position: fixed; top: 6.25rem; left: 0; width: 100%; z-index: 12; background: #fff; height: calc(100vh - 6.25rem); display: none; overflow-x: hidden;}

.sitemap .list .tit {width: 15%; background: var(--sub2color); padding: 3rem 2rem;}
.sitemap .list:first-child .tit {padding: 5rem 2rem 2rem;}

.sitemap .list .sitemenu {padding: 2rem; width: 85%; border-left: 1px solid rgba(137,137,137,0.3); position: relative;}
.sitemap .list .sitemenu:after {position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: calc(100% - 7rem); height: 1px; background: rgba(137,137,137,0.3); content: "";}
.sitemap .list:first-child .sitemenu:after {display: none;} 
.sitemap .list:first-child .sitemenu {padding: 5rem 2rem 2rem;}

.sitemap .list .sitemenu li {padding: 0.5rem 0;}
.sitemap .list .sitemenu > li {padding: 0.5rem 1.5rem;}
.sitemap .list .sitemenu > li ul {padding: 0.5rem 0;}
.sitemap .list .sitemenu li .flex {gap: 1.5rem;}

@media(max-width: 1440px) {
    .sitemap .list .sitemenu {flex-wrap: wrap;}
}