/* ===============================================================
    * header
=============================================================== */
.cm-header {position: fixed; z-index: 990; left: 0; right: 0; top: 0; padding: 45px 40px 0; display: flex; justify-content: space-between; align-items: center;}
.cm-header .logo h1 {font-size: 40px; font-weight: bold; color: #fff; letter-spacing: 0.04em;}

.header-icon {position: relative; width: 30px; height: 20px; cursor: pointer;}
.header-icon span {position: absolute; left: 0; width: 100%; height: 2px; background: #fff; transition: .3s;}
.header-icon .line-a {top: 0;}
.header-icon .line-b {top: 50%; transform: translateY(-50%);}
.header-icon .line-c {bottom: 0;}
body.nav-active .line-a {top: 50%; transform: rotate(45deg);}
body.nav-active .line-b {display: none;}
body.nav-active .line-c {bottom: initial; top: 50%; transform: rotate(-45deg);}

.gnb {display: flex; justify-content: flex-end; align-items: center;}
.gnb-list {display: flex; justify-content: flex-end; align-items: center; margin-right: -200px; opacity: 0; visibility: hidden; transition: .3s;} 
.gnb-item {position: relative; width: auto; white-space: nowrap; padding: 0 20px; font-size: 14px; text-align: center;}
.gnb-item span {display: block; font-family: 'twayfly'; color: #fff; transition: .3s;}
.gnb-item span.eng {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0;}
.gnb-item:hover span.kor {opacity: 0;}
.gnb-item:hover span.eng {opacity: 1;}
.gnb-list.OPEN {margin-right: 0; opacity: 1; visibility: visible;}
@media (max-width: 820px){
    .cm-header {height: 13.33vw; background: #fff; padding: 0 4.00vw;}
    .cm-header .logo h1 {font-size: 7.20vw; color: #222;}
    .gnb {display: none;}
    
    .mo-reserve {font-size: 5.33vw; color: #194052;}
    .mo-header-icon {position: relative; width: 5.33vw; height: 3.73vw; cursor: pointer;}
    .mo-header-icon span {position: absolute; left: 0; width: 100%; height: 2px; background: #222; transition: .3s;}
    .mo-header-icon .line-a {top: 0;}
    .mo-header-icon .line-b {top: 50%; transform: translateY(-50%);}
    .mo-header-icon .line-c {bottom: 0;}
    body.nav-active .mo-header-icon .line-a {top: 50%; transform: rotate(45deg);}
    body.nav-active .mo-header-icon .line-b {display: none;}
    body.nav-active .mo-header-icon .line-c {bottom: initial; top: 50%; transform: rotate(-45deg);}

    .panel {display: none;}
    body.nav-active .panel {display: block; position: fixed; left: 0; right: 0; top: 13.33vw; height: calc(100% - 13.33vw); background: #fff; border-top: 1px solid #ddd;}
    .panel-list {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center;}
    .panel-item h2 {position: relative; padding: 3.33vw 0; font-size: 7.47vw; letter-spacing: 0.04em; color: #222; cursor: pointer;}
    .panel-item h2 span {width: auto; white-space: nowrap; }
    .panel-item h2 span.eng {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #194052; opacity: 0; visibility: hidden;}
    .panel-item.OPEN h2 span.kor {opacity: 0; visibility: hidden;}
    .panel-item.OPEN h2 span.eng {opacity: 1; visibility: visible;}
    .panel-sub {display: none; padding-bottom: 3vw;}
    .panel-sub a {font-size: 3.70vw; line-height: 6.40vw; color: #777;}

}


/* 예약창 */
.reservation-modal {display: none;}
.reservation-modal.js-show {display: block; z-index: 999; position: fixed; left: 0;right: 0;top: 0;bottom: 0;}



/* ===============================================================
    * footer
=============================================================== */
body {position: relative; min-height: 100%;}
.footer-btn {position: absolute; bottom: 35px; right: 35px; font-size: 50px; color: #fff; cursor: pointer; z-index: 800;}
footer {display: none; position: absolute; padding: 30px 60px; left: 0; right: 0; bottom: 0; background: #212324;}
footer.active {display: block; z-index: 900; cursor: pointer;}
.footer-wrap {display: flex; justify-content: space-between; align-items: center;}
.f-info p, .f-basic p {position: relative; display: inline-block; padding: 0 8px; font-size: 12px; font-weight: 300; line-height: 24px; color: #ccc;}
.f-info p a {color: #fff;}
.f-info p:after, .f-basic p:after {content: ''; position: absolute; right: -4px; top: 50%; transform: translateY(-50%); width: 1px; height: 11px; background: #ccc;}
.f-info p:nth-of-type(3):after {display: none;}
.f-info p:last-of-type:after {display: none;}
.f-basic p:last-of-type:after {display: none;}
@media (max-width: 820px){
    .footer-btn {display: none;}
    footer {position: static; display: block; padding: 0;}
    .footer-wrap {display: block;}
    .f-info {text-align: center; padding: 9.33vw 0;}
    .f-info p, .f-basic p {padding: 0 2vw; font-size: 3.20vw; line-height: 6.40vw;}
    .f-info p:after, .f-basic p:after {right: -0.53vw; height: 2.47vw;}
    .f-info p:nth-of-type(2):after {display: none;}
    .f-basic {text-align: center; padding: 4.00vw 0; background: #111111;}
    .f-basic p:nth-of-type(4):after {display: none;}
}