.booking-hero-header {
    padding: 5rem 0;
    position: relative;
}

.bg-gametitle-warning-dark {
    --phoenix-bg-opacity: .45;
    background-color: rgba(var(--phoenix-warning-dark-rgb), var(--phoenix-bg-opacity)) !important;
    text-align: center;
}
.bg-gametitle-dark {
    --phoenix-bg-opacity: .75;
    /*background-color: rgba(var(--phoenix-warning-dark-rgb), var(--phoenix-bg-opacity)) !important; */
    background-color: rgba(var(--phoenix-secondary-darker-rgb), var(--phoenix-bg-opacity)) !important;
    text-align: center;
}
.bg-dark-subtle-x {
    background-color: var(--phoenix-dark-bg-subtle) !important;
}

.bg-gradient-x {
    background-image: var(--phoenix-gradient) !important;
}
.navbar-landing .nav-link {
    /*
    color: var(--phoenix-nav-link-hover-color);
    padding: .5rem .9rem !important;
    */
    background: var(--phoenix-body-highlight-bg);
    text-decoration: none;
    margin: 0 .25rem !important;
}
/* -----------  */
/* https://projects.verou.me/css3patterns/ */
.Starry_night {
    background-color: #0f111a;
    background-image:
    radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
    radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
    radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
    background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
    background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}
/* -----------  */
.noHover{ pointer-events: none;}

.xbutton {
    background-size: 100% 100%;
    /*
    background-image: url('/assets/img/gallery/45.png');
    background-position:left;
    display: flex;
    height: 20px;
    padding: 40px;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    border:none;
    */
    padding:0;
    
    
    height: 50px;
    width: 100%;
    font-size: 1rem;
    

}
.xbutton_off:hover { color: gold; opacity: 1 !important; transform: scale(0.95); border: 3px solid gold;}

.xbutton_on {
    background-image: url('/assets/img/btn/bg_btn_hotel_on.jpg');
    color: gold;
    border: 4px solid gold;
    border-radius: 50rem;
    pointer-events: none !important; 
}
.xbutton_on:after {
    content: "게임"
}
.xbutton_off {
    background-image: url('/assets/img/btn/bg_btn_hotel_off.jpg');
    color: #e3e6ed;
    /* opacity: .6; */
    border: 3px solid silver;
    border-radius: 50rem;
}

@media(min-width: 576px) {
    .xbutton {
        font-size: 1rem;
        height: 50px;
    }
}

@media(min-width: 768px) {
    .xbutton {
        font-size: 1.25rem;
        height: 70px;
    }
}



@media(min-width: 992px) {
    .xbutton {
        font-size: 2rem;
        height: 80px;
    }
}


@media(min-width: 1200px) {
    .xbutton {
        font-size: 2rem;
        height: 80px;
    }
}



@media(min-width: 1540px) {
    .xbutton {
        font-size: 2rem;
        height: 80px;
    }
}


/* popups */
.popups{ z-index:9999; position:absolute; top:100px; left:100px; }
.popups .container { display:flex; flex-wrap:wrap; height:0; padding:0; }
.popups .container .popup{ position:relative; width:420px; min-width:360px; max-width:calc(100vw - 20px); height:25px; }
.popups .container .popup .popup-wrap{ z-index:1; position:absolute; top:0; left:0; width:100%; box-shadow:0 5px 15px rgb(0 0 0 / 30%); border-radius:5px; }
.popups .container .popup .popup-wrap:before{ content:""; z-index:0; position:absolute; top:0; left:0; width:100%; height:100%; border:solid 1px rgba(0, 0, 0, 0.2); border-radius:inherit; box-shadow:0 0 0 2px rgba(180, 110, 10, 0.6); }
.popups .container .popup .popup-wrap .popup-head{ position: relative;display:flex; align-items:center; justify-content:space-between; gap:20px; height:50px; padding:0 15px; border-top-left-radius:inherit; border-top-right-radius:inherit; background:#333333; }
.popups .container .popup .popup-wrap .popup-head .popup-close-btn{ display:flex; align-items:center; margin:0;; border:none; background-color:transparent; white-space:nowrap; }
.popups .container .popup .popup-wrap .popup-head .popup-close-btn span{ margin-right:10px; color:#ffffff; font-size:12px; font-weight:bold; }
.popups .container .popup .popup-wrap .popup-head .popup-close-btn i{ position:relative; width:20px; height:20px; border: solid 1px #ffffff; border-radius:50%; transition:0.3s; outline:none; }
.popups .container .popup .popup-wrap .popup-head .popup-close-btn i:before,
.popups .container .popup .popup-wrap .popup-head .popup-close-btn i:after{ content:''; width:2px; height:calc(100% - 10px); background-color: #ffffff; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; transform:rotate(45deg); transition:0.3s; }
.popups .container .popup .popup-wrap .popup-head .popup-close-btn i:after{ transform:rotate(-45deg); }
.popups .container .popup .popup-wrap .popup-head .popup-close-btn:hover span{ color:#ff8839; }
.popups .container .popup .popup-wrap .popup-head .popup-close-btn:hover i:before{ transform:rotate(135deg); background-color:#ff8839; }
.popups .container .popup .popup-wrap .popup-head .popup-close-btn:hover i:after{ transform:rotate(-135deg); background-color:#ff8839; }
.popups .container .popup .popup-wrap .popup-head h6{ margin:0; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.popups .container .popup .popup-wrap .popup-head h6 i{ margin:0 10px; }
.popups .container .popup .popup-wrap .popup-body{ min-height:360px;; max-height:520px; overflow-y:auto; text-align:left; }
.popups .container .popup .popup-wrap .popup-body span{ padding:2px 5px; border-radius:3px; }
.popups .container .popup .popup-wrap .popup-body img{ width:100%; background:var( --bg-color-dark ); }
.popups .container .popup .popup-wrap .popup-footer{ position: relative; display:flex; align-items:center; justify-content:center; height:70px; padding:15px; border-bottom-left-radius:inherit; border-bottom-right-radius:inherit; background:#333333; }
.popups .container .popup .popup-wrap .popup-footer .btn{ color:#ffffff; }

/* dark */
.popups .container .popup.dark .popup-wrap .popup-body{ margin:0; padding:20px; background:var( --bg-color-dark ); color:#ffffff; }

/* light */
.popups .container .popup.white .popup-wrap{ background:#2f3338; }
.popups .container .popup.white .popup-wrap .popup-body{ margin:0 10px; padding:20px; border-radius:5px; background:#ffffff; color:#000000; }

/* transparent */
.popups .container .popup.transparent .popup-wrap .popup-body{ margin:0; padding:20px; background:rgba(0, 0, 0, 0.9); color:#ffffff; }

.popups .container .popup.hide{ display:none; }
.popups .container .popup.closed{ visibility:hidden; }
.popups .container .popup.closed .popup-wrap{ display:none; }
.popups .container .popup.expired{ display:none; }
.popups .container .popup.expired .popup-wrap{ display:none; }
@media(max-width:1200px) {
	.popups{ top:50px; left:50%; transform:translate(-50%, 0); }
	.popups .container .popup{ height:15px; }
}
/* popups */

/* -----------------------------------------
  Go Top CSS
----------------------------------------- */
.go-top {
    position: fixed;
    top: 50%;
    right: 3%;
    opacity: 0;
    cursor: pointer;
    text-decoration: none;
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    background: #fd5056;
    padding: 8px 13px;
    border-radius: 5px;
    z-index: 100;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  
  .go-top i {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    vertical-align: middle;
  }
  
  .go-top:hover i {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  
  @media only screen and (max-width: 767px) {
    .go-top {
      font-size: 18px;
    }
  }
  
  .go-top.active {
    top: 95%;
    -webkit-transform: translateY(-95%);
            transform: translateY(-95%);
    opacity: 1;
    visibility: visible;
  }