/* ===============================================================
    * header
=============================================================== */
.header {position: fixed; left: 0; right: 0; top: 0; z-index: 990; padding-top: 20px; background: transparent; transition: .4s;}
.header .width-max {width: 100%; height: 60px; display: flex; justify-content: space-between; align-items: center; transition: .4s;}
.header .logo {height: 100%;}
.header .logo a {display: flex; justify-content: flex-start; align-items: center;}
.header .logo img {height: 60px; width: auto; object-fit: cover; transition: .4s;}
.header .logo2 {display: none;}

.header-wrap {display: flex; justify-content: flex-end; align-items: center;}
.gnb {display: flex; justify-content: flex-end; align-items: center;}
.gnb-main {position: relative;}
.gnb-main h2 {font-size: 12px; line-height: 60px; color: #fff; padding-right: 30px; text-transform: capitalize;}
.gnb-main h2 a {position: relative; display: block; width: 100%; height: 100%;}
.gnb-main h2 a:after {content: ''; position: absolute; left: 0; right: 0; top: calc(50% + 10px); height: 2px; background: var(--color-1); opacity: 0; transition: .4s;}
.gnb-sub {position: absolute; left: 0; top: 100%; width: 160px; padding: 20px 20px 0; background: rgba(34,34,34,.9); opacity: 0; visibility: hidden; transition: .4s;}
.gnb-main:nth-child(2) .gnb-sub {width:230px; line-height: 16px;}
.gnb-sub li {font-size: 12px; color: #fff; margin-bottom: 20px; transition: .4s;}
.gnb-sub li:hover {color: var(--color-1);}
.gnb-sub li a {display: block; width: 100%; height: 100%;}
.gnb-main:hover .gnb-sub {opacity: 1; visibility: visible;}
.gnb-main:hover h2 a:after {opacity: 1;}

.header-wrap .btns {display: flex; justify-content: flex-end; align-items: center;}
.header-wrap .btns a {display: block; margin-left: 10px; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; border: 1px solid #fff; color: #fff; transition: .4s;}
.header-wrap .btns span {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.header-wrap .btns img {transition: .4s; height: 22px; width: auto; object-fit: cover}
.header-wrap .btns .btn-book {background: var(--color-1); border-color: var(--color-1);}
.header-wrap .btns a:hover {border-color: #ccc; color: var(--color-1); background: #fff;}
/* .header-wrap .btns a:hover img {filter: invert(57%) sepia(83%) saturate(790%) hue-rotate(352deg) brightness(99%) contrast(93%);} */

/* fixed */
.header.fixed {padding-top: 0; background: #fff;}
.header.fixed .width-max {height: 70px;}
.header.fixed .logo img {height: 50px;}
.header.fixed .logo1 {display: none;}
.header.fixed .logo2 {display: block;}
.header.fixed .gnb-main h2 {color: #222; line-height: 70px;}
.header.fixed .header-wrap .btns a {border-color: #ccc; color: var(--color-1);}
/* .header.fixed .header-wrap .btns img {filter: invert(57%) sepia(83%) saturate(790%) hue-rotate(352deg) brightness(99%) contrast(93%);} */
.header.fixed .header-wrap .btns .btn-book {color: #fff; border-color: var(--color-1);}
.header.fixed .header-wrap .btns .btn-book:hover {background: var(--color-1); color: #fff;}

/* anchor 추가 */
.anchor {position: absolute; left: 0; right: 0; top: 80px; display: flex; justify-content: flex-end; align-items: flex-start;}
/* .anchor img {transition: .4s;} */
.anchor .link2 {opacity: 0;}
.anchor:hover .link1 {opacity: 0;}
.anchor:hover .link2 {opacity: 1;}
.anchor div {position: relative;}
.anchor img {position: absolute; right: 0; top: 0;}

@media (max-width: 992px){
    .header {padding-top: 0; height: 50px; background: #fff;}
    .header .width-max {height: 100% !important;}
    .header .logo img {height: 35px !important;}
    .header .logo1 {display: none !important;}
    .header .logo2 {display: block !important;}
    .gnb {display: none;}
    .header-wrap .btns a {width: 30px; height: 30px; margin-left: 5px; font-size: 13px; border-color: #ccc !important; color: var(--color-1) !important;}
    .header-wrap .btns img {height: 20px;}
    /* .header-wrap .btns img {filter: invert(57%) sepia(83%) saturate(790%) hue-rotate(352deg) brightness(99%) contrast(93%) !important;} */
    .header-wrap .btns .btn-book {background: var(--color-1) !important; color: #fff !important; border-color: var(--color-1) !important;}
    .mo-btn {font-size: 22px; color: #222; cursor: pointer; margin-left: 10px;}

    .panel-wrap {position: fixed; left: 0; right: 0; top: 0; height: 100vh; z-index: 999; background: url(/img/cm/panel-bg.jpg) no-repeat center / cover; display: none;}
    .panel-top {height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 0 15px;}
    .panel-top .logo img {height: 35px; width: auto; object-fit: cover;}
    .panel-btns {display: flex; justify-content: flex-end; align-items: center;}
    .panel-btns a {flex: none; display: block; width: 30px; height: 30px; border-radius: 50%; margin-left: 5px; font-size: 13px; border: 1px solid #ccc; color: #fff;}
    .panel-btns img {width: 24px; height: auto; object-fit: cover;}
    .panel-btns span {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
    .panel-btns .close {width: 24px; font-size: 24px; color: #fff; margin-left: 10px; cursor: pointer;}

    .panel-box {height: calc(100vh - 50px); overflow-y: auto; display: flex; justify-content: flex-start; align-items: center; padding-left: 50px;}
    .panel-main h2 {position: relative; padding: 10px 0; font-size: 30px; color: #777; display: inline-block;}
    .panel-main h2:after {content: ''; position: absolute; left: 0; right: 0; bottom: 5px; height: 1px; background: var(--color-1); opacity: 0; transition: .4s;}
    .panel-sub {padding: 10px 0 30px 15px; display: none;}
    .panel-sub li {font-size: 13px; line-height: 30px; color: #aaa;}

    .panel-main.active h2 {color: #fff;}
    .panel-main.active h2:after {opacity: 1;}

    body.nav-active .panel-wrap {display: block;}

    .anchor {top: 55px; padding: 0 5px;}
    .anchor:hover .link1 {opacity: 1;}
}

/* ===============================================================
    * footer
=============================================================== */
footer {background: #222;}
footer .links {height: 75px; display: flex; justify-content: center; align-items: center; background: #282828;}
footer .links ul {color: #fff; opacity: 0.5; text-align: center;}
footer .links li {position: relative; font-size: 12px; padding: 0 10px; letter-spacing: 0.02em; display: inline-block;}
footer .links li:after {content: ''; position: absolute; width: 1px; height: 11px; background: #fff; right: -4px; top: 50%; transform: translateY(-50%);}
footer .links li:last-of-type:after {display: none;}
footer .width-max {display: flex; justify-content: space-between; align-items: center; padding: 50px 0;}
footer .logo-f {width: 270px;}
footer .logo-f img {width: 100%; height: auto; object-fit: cover;}
footer .info {text-align: center;}
footer .info li {position: relative; display: inline-block; font-size: 12px; line-height: 26px; padding: 0 10px; color: #fff; opacity: 0.5;}
footer .info li:after {content: ''; position: absolute; width: 1px; height: 11px; background: #fff; right: 0; top: 50%; transform: translateY(-50%);}
footer .info li:nth-of-type(4):after, footer .info li:nth-of-type(5):after {display: none;}
footer .icons {display: flex; justify-content: flex-end; align-items: center;}
footer .icons li {margin-left: 30px;}
footer .icons img {height: 22px; width: auto; object-fit: cover;}
footer .copy {height: 75px; display: flex; justify-content: center; align-items: center; border-top: 1px solid rgba(255,255,255,.1);}
footer .copy p {font-size: 12px; line-height: 22px; color: rgba(255,255,255,.2);}
@media (max-width: 992px){
    footer .links li {padding: 0 8px; line-height: 20px;}
    footer .links li:nth-of-type(4):after {display: none;}
    footer .width-max {display: block; text-align: center; padding: 40px 0;}
    footer .logo-f {width: 195px; margin: 0 auto;}
    footer .info {margin: 30px auto;}
    footer .info li:after {display: none;}
    footer .info li:nth-of-type(1):after {display: block;}
    footer .icons {justify-content: center;}
    footer .icons li {margin: 0 15px;}
}