#loading {z-index: 999999; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(34,34,34,.8);}
.loading {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);text-align: center;}
.loading p {font-size: 40px; color: #fff; margin-bottom: 20px;}
.loading span {display: inline-block;background: #9e0016;box-shadow: 1px 2px 3px #999;height: 10px;width: 10px;  border-radius: 50%;animation: wave 2s ease  infinite;transition: all 500ms ease;}  
.loading span:nth-child(1) {animation-delay: 0;}
.loading span:nth-child(2) {animation-delay: 100ms;}
.loading span:nth-child(3) {animation-delay: 200ms;}
.loading span:nth-child(4) {animation-delay: 300ms;}
.loading span:nth-child(5) {animation-delay: 400ms;}
.loading span:nth-child(6) {animation-delay: 500ms;}
@keyframes wave{
    0%, 40%, 100% {transform: translate(0, 0);background-color: #9e0016;}
    10% { transform: translate(0, -15px); background-color: #eee;}
}
@media (max-width: 750px){
    .loading p {font-size: 20px;}
}

/* ===============================================================
* cm-top
=============================================================== */
body {transition: .3s; 
    /* 배너 사용할 때 */
    /* padding-top: calc(4.428vw + 80px); */

    /* 배너 사용하지 않을 때(index.css도 변경필요!) */
    padding-top: 80px;
}
body.bannerUp {padding-top: 80px;}
.cm-top {position: fixed; left: 0; right: 0; top: 0; z-index: 990; transition: .3s;}
/* banner */
.banner-wrap img {width: 100%; object-fit: cover; height: 4.428vw;}
.banner-wrap__arrow {z-index: 800; position: absolute; right: 4px; width: 40px; height: 22px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background: #fff; text-align: center; box-shadow: 0px 0px 4px 0px rgba(51, 51, 51, 0.3);}
.banner-wrap__arrow i {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 20px; color: #555; transition: .3s;}
.banner-wrap__arrow .fa-sort-up {margin-top: 5px;}
.banner-wrap__arrow .fa-sort-down {display: none;}
/* bannerUp */
.cm-top.bannerUp {margin-top: -4.428vw ;}
.cm-top.bannerUp .banner-wrap__arrow .fa-sort-up {display: none;}
.cm-top.bannerUp .banner-wrap__arrow .fa-sort-down {display: block; margin-top: -5px;}
@media (max-width: 750px){
    body {transition: .3s; 
        /* padding-top: 34.801vw; */
        padding-top: calc(14.667vw + 10.667vw + 1px)
    }
    body.bannerUp {padding-top: 25.334vw;}
    .banner-wrap img {width: 100%; object-fit: cover; height: 9.467vw;}
    .banner-wrap__arrow {width: 5.3vw; height: 2.9vw; right: 6px;}
    .banner-wrap__arrow i {font-size: 2.6vw; margin-top: 0.66vw;}
    .banner-wrap__arrow .fa-sort-up {margin-top: 0.66vw;}
    .cm-top.bannerUp {margin-top: -9.467vw;}
    .cm-top.bannerUp .banner-wrap__arrow .fa-sort-down {margin-top: -0.66vw;}
}

/* ===============================================================
    * header-wrap
=============================================================== */
.header-wrap {height: 110px; padding: 30px 3.125vw 0; transition: .3s; background: url(../img/layout/headerbg.png) no-repeat center / cover;}
.header {height: 80px; display: flex; justify-content: space-between; align-items: center; transition: .3s;}
.header-logo {position: relative; padding-bottom: 20px; padding-top: 8px;}
.header-logo a {display: block; width: 100%; height: 100%;}
.header-logo a img {width: 195px; height: auto; object-fit: cover;}
.logo-change {display: none;}
/* gnb */
.nav {display: flex; justify-content: space-between;}
.nav-main {position: relative; transition: .3s; height: 80px;}
.nav-main:hover span {color: #9e0016;}
.nav-main span {font-size: 15px; color: #fff; cursor: pointer; padding: 0 1.8vw; line-height: 80px;}
.nav-sub {position: absolute; opacity: 0; visibility: hidden; width: calc(100% + 80px); left: 50%; top: 100%; transform: translateX(-50%); background: #fff; text-align: center; border-top: 1px solid #e0e0e0; padding: 20px 0; transition: .3s;}
.nav-sub.active {opacity: 1; visibility: visible;}
.nav-sub li:hover a {color: #9e0016;}
.nav-sub li a {font-size: 13px; line-height: 26px; color: #888;}
/* btn */
.header-btn {display: flex; justify-content: flex-end;}
.header-btn a {display: block; padding: 0 1.56vw; height: 40px; line-height: 40px; font-size: 15px; color: #fff; text-align: center; border-radius: 4px; border: 1px solid rgba(255,255,255,.6)}
.header-btn .bg1 {border-color: transparent; background: #9e0016; color: #fff; margin-left: 10px;}
/* active */
.header-wrap.active {background: #fff;}
.header-wrap.active .logo-basic {display: none;}
.header-wrap.active .logo-change {display: block;}
.header-wrap.active .nav-main span {color: #555;}
.header-wrap.active .nav-main:hover span {color: #9e0016;}
.header-wrap.active .header-btn a {border-color: rgba(85,85,85.6); color: #555;}
.header-wrap.active .header-btn .bg1 {color: #fff; border-color: transparent;}
/* fixed */
.header-wrap.fixed {padding-top: 0; height: 80px;}
.header-wrap.fixed {background: #fff;}
.header-wrap.fixed .header-logo { padding-top: 18px;}
.header-wrap.fixed .logo-basic {display: none;}
.header-wrap.fixed .logo-change {display: block;}
.header-wrap.fixed .nav-main span {color: #555;}
.header-wrap.fixed .nav-main:hover span {color: #9e0016;}
.header-wrap.fixed .header-btn a {border-color: rgba(85,85,85.6); color: #555;}
.header-wrap.fixed .header-btn .bg1 {color: #fff; border-color: transparent;}
@media (max-width: 1500px){
    .header-btn {display: none;}
}
@media (max-width: 1050px){
    .header-wrap {height: 80px; padding: 0 3.125vw;}
    .header-logo a img {margin-top: 0;}
    .nav-main span {font-size: 1.27vw; padding: 0 1.5vw}
    .nav-sub li a {font-size: 1.17vw;}
}
@media (max-width: 850px){
    .header-logo a img {width: 20vw; margin-top: 0;}
}
@media (max-width: 750px){
    .nav {display: none;}
    .header-wrap {height: 14.667vw; background: #fff; padding: 0;}
    .header-wrap.fixed {height: 14.667vw;}
    .header-wrap .header-logo { padding-top: 0;}
    .header-wrap.fixed .header-logo { padding-top: 0;}
    .header {height: 14.667vw; align-items: center; padding: 0 4vw;}
    .header-icon {position: relative; width: 5.33vw; height: 4.267vw; cursor: pointer;}
    .header-icon span {position: absolute; left: 0; display: block; height: 2px; background: #555;}
    .header-icon .line-a {width: 100%; top: 0;}
    .header-icon .line-b {width: 100%; top: 50%; transform: translateY(-50%);}
    .header-icon .line-c {width: 100%; bottom: 0;} 
    /* header logo */
    .header-logo {padding-left: 4vw; padding-bottom: 1vw;}
    .header-logo a img {width: 34vw; margin-top: 0;}
    .logo-basic {display: none;}
    .logo-change {display: block;}
    /* header btns */
    .header .reserve-btn {position:relative;display:flex;gap:5px;/* width: 16vw;background: #9e0016; border-radius: 4px; */ height: 8vw; line-height: 8vw; color: #fff; font-size: 2.93vw; text-align: center; }
}

/* ===============================================================
    * mobile navigation
=============================================================== */
@media (max-width: 750px){
    .mobile {position: relative; overflow: hidden; overflow-x: auto; padding: 0 4vw; background: #fff; height: 10.667vw;}
    .mobile:after, .mobile:before {content: ''; position: absolute; background: #e0e0e0; width: 645px; height: 1px; left: 0; }
    .mobile:after {top: 0;}
    .mobile:before {bottom: 0;}
    .mobile::-webkit-scrollbar-track, 
    .mobile::-webkit-scrollbar, 
    .mobile::-webkit-scrollbar-thumb {display: none;}
    .nav-mobile {position: relative; height: 10.6vw; line-height: 10.6vw; width: 630px;}
    .nav-mobile:before {bottom: -1px;}
    .nav-mobile li {display: inline-block; margin-right: 5.3vw; font-size: 2.93vw; color: #555;}
    .nav-mobile li:last-of-type {margin-right: 0;}
    /* panel */
    body.nav-active .panel {left: 0; right: 0;}
    .panel {position: fixed; left: -100%; right: 100%;  height: 100vh; transition: .3s; z-index: 990;}
    .panel-bg {position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,.6); z-index: -1;}
    .panel.bannerUp {top: 0;}
    .panel-wrap {position: absolute; left: 0; top: 0; width: 80%; height: 100vh; background: #fff; z-index: 990;}
    .panel-top {height: 14.667vw; display: flex; justify-content: space-between; align-items: center; padding: 0 4vw;}
    .panel-logo a {display: block; width: 100%; height: 100%;}
    .panel-logo a img {width: 34.8vw; object-fit: cover;}
    .panel-top .panel-close {font-size: 6.66vw; color: #555; cursor: pointer;}
    .panel-phone {height: 10.66vw; line-height: 10.66vw; text-align: center; font-size: 3.46vw; color: #fff;}
    .panel-menu {height: 80vh; overflow-y: auto;}
    .panel-main {border-bottom: 1px solid #e0e0e0; cursor: pointer;}
    .panel-mainmenu {height: 12vw; display: flex; justify-content: space-between; align-items: center; padding: 0 4vw;}
    .panel-mainmenu span {font-family: 'RixRak-Sans_Bold'; font-size: 3.46vw; color: #555;}
    .panel-mainmenu i {font-size: 4vw; color: #555;}
    .panel-mainmenu .up {display: none;}
    .panel-sub {padding: 2.66vw 5.3vw; display: none; border-top: 1px solid #e0e0e0;}
    .panel-sub li {display: inline-block; width: 49%; padding: 2.66vw 0;}
    .panel-sub li.w100 {width: 100%;}
    .panel-sub li a {font-size: 3.2vw; color: #999;}
    /* panel open */
    .panel-main.OPEN .panel-mainmenu span {color: #9e0016;}
    .panel-main.OPEN .panel-mainmenu .up {display: block; color: #9e0016;}
    .panel-main.OPEN .panel-mainmenu .down {display: none;}
}

/* ===============================================================
    * quick
=============================================================== */
.quick-pc {position: fixed; right: 0; bottom: 100px;}
.quick {width: 70px; background: #2a2924; text-align: center; padding: 30px 0;}
.quick-item {position: relative; margin-bottom: 30px;}
.quick-item:last-of-type {margin-bottom: 0;}
.quick-item a {display: block; width: 100%; height: 100%;}
.quick-icon {font-size: 20px; color: #fff;}
.quick-item .tooltip {position: absolute; top: 50%; transform: translateY(-50%); right: 30%; background: #fff; height: 40px; line-height: 40px; color: #9e0016; text-align: center; display: flex; justify-content: center; align-items: center; padding: 0 30px; border-radius: 20px; opacity: 0; visibility: hidden; transition: .3s; box-shadow: 0px 0px 4px 0px rgba(85, 85, 85, 0.3);}
.quick-item .tooltip i {font-size: 20px;}
.quick-item .tooltip span {font-size: 14px; padding-left: 10px; width: max-content;}
.quick-item:hover .tooltip {opacity: 1; visibility: visible;}
@media (max-width: 750px){
    .quick-mo {position: fixed; left: 0; right: 0; bottom: 0; height: 14.67vw;}
    .quick-mo__list {height: 100%; display: flex; justify-content: space-between; align-items: center; background: #fff;}
    .quick-mo__item {height: 100%; width: 20%;}
    .quick-mo__item a {display: block; width: 100%; height: 100%; position: relative;}
    .quick-mo__item span {font-size: 4.27vw; position: absolute; top: 20%; left: 50%; transform: translateX(-50%);}
    .quick-mo__item:nth-of-type(2) span img {width: 4.67vw; object-fit: cover;}
    .quick-mo__item:nth-of-type(5) span img {width: 5.73vw; object-fit: cover;}
    .quick-mo__item p {position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; font-size: 2.67vw; color: #666; margin-top: 7px;}
}

.goTop {opacity: 0; visibility: hidden; z-index: 9999; position: fixed; right: 20px; bottom: 20px; width: 50px; height: 50px; line-height: 50px; border-radius: 4px; background: #9e0016; color: #fff; font-size: 16px; text-align: center; cursor: pointer; transition: .3s;}
.goTop.Top {opacity: 1; visibility: visible;}
@media (max-width: 750px){
    .goTop {right: 10px;bottom: 65px;width: 30px;height: 30px;line-height: 34px;font-size: 12px;}
}
/* ===============================================================
    * footer
=============================================================== */
.footer-info {background: #333;}
.footer-wrap {display: flex; justify-content: space-between; padding: 38px 0 60px; position: relative;}
.footer-box1 {width: 20%;}
.footer-box1 img {width: 70%; object-fit: cover;}
.footer-box2 {width: 30%; padding: 8px 5px 0;}
.footer-box2 .fontL {font-size: 13px; line-height: 20px; color: #e0e0e0; margin-top: 12px;}
.footer-box2 .fontR {font-size: 14px; line-height: 22px; color: #fff;}
.footer-box3 {width: 30%; padding: 0 5px 0;}
.footer-box3 p {font-size: 13px; line-height: 24px; color: #e0e0e0; margin-top: 20px;}
.footer-box4 {width: 20%;}
.footer-box4 .join-btn {display: inline-block; padding: 0 2vw; height: 40px; line-height: 40px; text-align: center; color: #e0e0e0; border-radius: 4px; border: 1px solid #e0e0e0; transition: .3s; font-size: 14px; margin-top: 20px;}
.footer-box4 .join-btn:hover {background: #9e0016; border-color: #9e0016; color: #fff;}
.footer-copy {height: 56px; line-height: 56px; text-align: center; background: #555;}
.footer-copy li {display: inline-block; padding: 0 10px; position: relative; font-size: 13px;}
.footer-copy li:after {content: ''; position: absolute; width: 1px; height: 12px; right: -3px; top: calc(50% - 6px); background: #e0e0e0;}
.footer-copy li:last-of-type:after {display: none;}
@media (max-width: 750px){
    footer {padding-bottom: 14.67vw;}
    .footer-wrap {padding: 9.3vw 0; display: block;}
    .footer-box1 {width: 100%; margin-bottom: 7.3vw;}
    .footer-box1 img {width: 34.8vw;}
    .footer-box4 .join-btn {position: absolute; right: 0; top: 12.33vw; font-size: 2.93vw; height: 8vw; line-height: 8vw; padding: 0 3.6vw; margin-top: 0;}
    .footer-box2 {width: 100%; position: relative; padding: 0;}
    .footer-box2 .fontL {font-size: 2.4vw; line-height: 3.7vw;}
    .footer-box2 .fontR {font-size: 2.9vw; line-height: 3.7vw;}
    .footer-box2__mo {position: absolute; top: 0; left: 50%; }
    .footer-box2__mo .fontL {margin-top: 0;}
    .footer-box3 {width: 100%; padding: 0;}
    .footer-box3 p {font-size: 2.66vw; line-height: 5.33vw; font-family: 'RixRak-Sans_Light' !important;}
    .footer-copy {height: auto; line-height: 1; padding: 2.667vw 0;}
    .footer-copy li {font-size: 2.66vw; line-height: 4vw;}
}