/* ===============================================================
    * Header 
=============================================================== */
header {position: fixed; left: 0; top: 0; right: 0; padding: 50px 50px 0 50px; z-index: 950; transition: .3s;}
.header-icon {position: relative; width: 30px; height: 16px; margin-right: 20px; cursor: pointer;}
.header-icon span {position: absolute; height: 2px; background: #fff;}
.line-a {width: 20px; left: 50%; top: 0; transform: translateX(-50%); transition: .3s;}
.line-b {width: 30px; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: .3s;}
.line-c {width: 20px; left: 50%; bottom: 0; transform: translateX(-50%); transition: .3s;}
.header-logo img {cursor: pointer; margin-top: -30px; transition: .3s;}
.header-logo .logo-mo {display: none;}
.header-quick a {color: #fff; display: inline-block; margin-left: 20px;}
header.fixed {height: 100px; padding: 40px 50px 0; background: rgba(34,34,34,.6);}
header.fixed .header-logo img {transform: scale(.8); transform-origin: left;}
body.nav-active .line-a {width: 30px;top: 50%;-webkit-transform: translateX(-50%) rotate(45deg);transform: translateX(-50%) rotate(45deg);}
body.nav-active .line-b {display: none;}
body.nav-active .line-c {width: 30px;bottom: initial;top: 50%;-webkit-transform: translateX(-50%) rotate(-45deg);transform: translateX(-50%) rotate(-45deg);}
@media (max-width:820px){
	.cm-header {height: 50px;}
    header {height: 50px; background: #fff; padding: 0 15px;}
    .header-logo {margin-top: 5px;}
    .header-logo img {width: 100%; height: auto; position: relative; top: 18px}
    .header-logo .logo-pc {display: none; width: 111px;}
    .header-logo .logo-mo {display: block; width: 111px;}
	.header-left {padding-top: 15px;}
    .header-quick {padding-top: 15px;}
    .header-quick a {font-size: 13px; margin-left: 10px; color: #e3a259;}
    .header-icon {margin-left: 10px; width: 15px; height: 10px; margin-top: 5px;}
    .header-icon span {background: #777;}
    .line-a {width: 10px;}
    .line-b {width: 15px;}
    .line-c {width: 10px;}
	header.fixed {height: 50px; background: #fff; padding: 0 15px; }
    header.fixed .header-logo {margin-top: 5px;}
    header.fixed .header-logo img {transform: none; width: 100%; height: auto;}
    header.fixed .header-quick {padding-top: 15px;}
    header.fixed .header-icon {width: 15px; height: 10px; margin-top: 5px;}
    body.nav-active header {background: transparent; border-bottom: 1px solid #fff;}
    body.nav-active .header-logo .logo-pc {display: block;}
    body.nav-active .header-logo .logo-mo {display: none;}
    body.nav-active .header-quick a {color: #fff;}
    body.nav-active .header-quick .quick4 {color: #fff;}
    body.nav-active .header-icon span {background: #fff;}
	body.nav-active .line-a {width: 15px;}
	body.nav-active .line-c {width: 15px;}
}

/* ===============================================================
    * Panel
=============================================================== */
.nav {position: fixed; z-index: 940;}
.nav:before, .nav:after {content: "";position: fixed;top: 0;width: 100vw;height: 100vh;background: rgba(20, 21, 26,0.8);z-index: -1;-webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;-webkit-transform: translateX(0%) translateY(-100%);transform: translateX(0%) translateY(-100%);}
.nav:after {background-color: rgba(9,9,12,1);background: url('/img/header/panel-bg.png') no-repeat center / cover;-webkit-transition-delay: 0s;transition-delay: 0s;}
.nav:before {-webkit-transition-delay: .2s;transition-delay: .2s;}
.nav-content {position: fixed;visibility: hidden;opacity: 0;top: 50%;-webkit-transform: translate(0%, -50%);transform: translate(0%, -50%);width: 100%;text-align: center;transition-delay: .5s;}
body.nav-active .nav {visibility: visible;}
body.nav-active .nav-content {visibility: visible; opacity: 1;}
body.nav-active .nav:before, body.nav-active .nav:after {-webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%);}
body.nav-active .nav:after {-webkit-transition-delay: .1s; transition-delay: .1s;}
body.nav-active .nav:before {-webkit-transition-delay: 0s; transition-delay: 0s;}

/* ===============================================================
    * Gnb
=============================================================== */
body.nav-active .nav-main {opacity: 1;}
.nav-main {padding: 5px 0; opacity: 0;}
.nav-main span {position: relative; cursor: pointer; font-size: 60px; font-weight: 500; color: #888;}
.nav-main span:after {position: absolute; content: ''; width: 115%; height: 0; left: 50%; transform: translateX(-50%); bottom: 10px; background:#ebc69c;transition: .3s;}
.nav-main span:hover, .nav-main span.OPEN {color: #fefeff;}
.nav-main span:hover:after, .nav-main span.OPEN:after {height: 20px; z-index: -1;}
.nav-sub {display: none; padding: 10px 0;}
.nav-sub a {font-size: 18px; line-height: 26px; color: #b4b4b4;}
.nav-sub a:hover {color: #fefeff;}
.nav-bg {z-index: -1; display: none; width: 100%; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); font-weight: 700; font-size: 300px; letter-spacing: -0.06em; color: rgba(76,81,82,.18); white-space: nowrap;}
.nav-bg.OPEN {display: block;}
.nav-half li {padding: 0 10px;}
.nav-half li:nth-child(odd) {float: left; width: 50%; text-align: right;}
.nav-half li:nth-child(even) {float: right; width: 50%; text-align: left;} 
@media (max-width: 820px){
	.nav-main span {font-size: 35px;}
    .nav-main span:hover:after, 
    .nav-main span.OPEN:after {height: 10px; bottom: 5px;}
    .nav-sub a {font-size: 14px;}
    .nav-bg {font-size: 110px;}
}

/* ===============================================================
    * Bottom Fixed Button 
=============================================================== */
.fixed-booking {position: fixed;right: 6px;bottom: 54px;display: inline-block;width: 40px; height: 40px;border-radius: 100%;background: rgba(255,255,255,0.8);box-shadow: 0.5px 0.9px 5px 0 rgba(36, 36, 36, 0.2);border: solid 1px #c6c6c6;text-align: center;cursor: pointer;z-index: 930;transition: all 0.3s;color: #333;opacity:0;}
.fixed-booking i {font-size: 18px;line-height: 40px;}
.fixed-booking.active {bottom: 102px;transition: all 0.3s;}
.fixed-phone {position: fixed;right: 6px;bottom: 6px;display: inline-block;width: 40px; height: 40px;border-radius: 100%;background: rgba(255,255,255,0.8);box-shadow: 0.5px 0.9px 5px 0 rgba(36, 36, 36, 0.2);border: solid 1px #c6c6c6;text-align: center;cursor: pointer;z-index: 930;transition: all 0.3s;color: #333;opacity:0;}
.fixed-phone i {font-size: 18px;line-height: 40px;}
.fixed-phone.active {bottom: 54px;transition: all 0.3s;}
.fixed-scrollTop {position: fixed;right: 6px; bottom: -30px;display: inline-block;width: 40px; height: 40px;border-radius: 100%;background: rgba(32,32,32,0.8);text-align: center;cursor: pointer;z-index: 930;transition: all 0.3s;opacity:0;visibility:hidden;}
.fixed-scrollTop i {font-size: 18px;color: #fff;line-height: 40px;}
.fixed-scrollTop:hover {background: rgba(32,32,32,0.6);}
.fixed-scrollTop.active {bottom:6px;display: inline-block;opacity:1;visibility:visible;transition: all 0.3s;}
@media (max-width: 820px){
    .fixed-phone {opacity:1;}
	.fixed-booking {opacity:1;}
	.fixed-booking.active {opacity: 1;}
	.fixed-phone.active {opacity: 1;}
}