@charset 'utf-8';

/************************************************************************
* 예약 달력 *
************************************************************************/
/** 예약 달력 아이콘 세팅 **/

.cal-icon {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    display: inline-block;

    padding: 2.5px;

    text-align: center;

    color: #fff;
    border-radius: 1px;
}


/* 예약 */
.cal-icon.ic_reserv {
    background: #41c842;
}

.cal-icon.ic_reserv::before {
    content: '예';
    text-align: center;
}


/* 대기 */
.cal-icon.ic_wait {
    background: #299ce4;
}

.cal-icon.ic_wait::before {
    content: '대';
    text-align: center;
}


/* 예약완료 */
.cal-icon.ic_done {
    background: #fc5b62;
}

.cal-icon.ic_done::before {
    content: '완';
    text-align: center;
}


/* 방역 */
.cal-icon.ic_disinfect {
    background: #edc988;
}

.cal-icon.ic_disinfect::before {
    content: '방';
    text-align: center;
}


/* 방막기 */
.cal-icon.ic_close {
    background: hsl(0, 0%, 29%);
}

.cal-icon.ic_close::before {
    content: '막';
    text-align: center;
}


/* 전화문의 */
.cal-icon.ic_call {
    background: #818181;
}

.cal-icon.ic_call::before {
    content: '전';
    text-align: center;
}


/* 방막음 */
.cal-icon.ic_closed {
    min-width: 16px !important;

    text-align: center;

    background: #a519eb;
}

.cal-icon.ic_closed::before {
    font-family: 'Orbitron', sans-serif;

    content: 'X';
    text-align: center;
}

.cal-icon.ic_closed_d {
    /* min-width: 28px !important; */
    background: #9465b7;
}

.cal-icon.ic_closed_d::before {
    content: '막';
    text-align: center;
}


/* 방열림 */

.cal-icon.ic_open {
    /* min-width: 28px !important; */
    background: #5aa469;
}

.cal-icon.ic_open::before {
    content: '열';
    text-align: center;
}

.cal-icon.ic_open_d {
    /* min-width: 28px !important; */
    background: #95c19e;
}

.cal-icon.ic_open_d::before {
    content: '열';
    text-align: center;
}


/* 전화문의 */

.cal-icon.ic_called {
    min-width: 28px !important;

    background: #818181;
}

.cal-icon.ic_called.blank {
    min-width: 28px !important;

    background: transparent;
}

.cal-icon.ic_called::before {
    content: '문의';
    text-align: center;
}


/* 실시간 예약가능 */

.cal-icon.ic_reserved {
    min-width: 28px !important;

    background: #5aa469;
}

.cal-icon.ic_reserved.blank {
    min-width: 28px !important;

    background: transparent;
}

.cal-icon.ic_reserved::before {
    content: '예';
    text-align: center;
}


/*--------- 예약시스템 레이아웃 ----------*/

.wrapper-rsv-calendar {
    min-width: 1280px;
}

.rsv-cal-header {
    border-bottom: 1px solid hsl(0, 0%, 96%);
}

.rsv-cal-header .rsv-cal-title {
    color: #fc5b62 !important;
}

.rsv-cal-header .column ul li {
    display: inline-block;
}

.rsv-cal-header .column ul li a {
    font-size: 14px;
    font-weight: 500;

    padding: 5px;

    color: hsl(0, 0%, 21%) !important;
}

.rsv-cal-header .column ul li.active a {
    font-weight: 700 !important;

    color: #fc5b62 !important;
}

.rsv-cal-header .column ul li.active {
    border-bottom: 2px solid #fc5b62;
}

.pension_info {
    padding: 15px 20px;
}

.pension_info dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    margin-bottom: 5px;
}

.pension_info dl dt {
    font-weight: 700;

    width: 50px;
    margin-right: 10px;
}

.pension_info dl dd {
    flex: 1;
}

.pension_info dl dt,
.pension_info dl dd {
    font-size: 14px;
}

.pension_info dl dd a {
    text-decoration: underline;

    text-decoration-color: #1d72aa !important;
}

div.table-rsv {
    overflow-y: auto !important;

    max-height: 425px !important;
}

div.table-rsv td.room-main-header {
    position: sticky;
    z-index: 38;
    top: 0;
    left: 0;
}

#rsv-week-thead tr th {
    position: sticky;
    z-index: 37;
    top: 0;
    /* border: none !important; */

    border: 1px solid hsl(0, 0%, 96%);
}

div.table-rsv td.room-name-header {
    position: sticky;
    z-index: 36;
    left: 0;
}

#rsv-week-thead tr,
#rsv-week-thead th,
#rsv-week-thead td {
    border: none;
}

#rsv-week-thead tr td {
    border-right: 2px solid hsl(0, 0%, 86%);
}

#rsv-week-thead tr td,
#rsv-week-thead tr th {
    border-bottom: 2px solid hsl(0, 0%, 86%);
}

#rsv-week-thead tr th {
    border-right: 1px solid hsl(0, 0%, 86%);
}

table.table-rsv-week {
    border-collapse: separate;

    word-break: keep-all;
}

table.table-rsv-week th {
    line-height: 1;
}

table.table-rsv-week th,
table.table-rsv-week td,
table.table-rsv-selected th,
table.table-rsv-selected td,
table.table-options-selected th,
table.table-options-selected td {
    margin: 0;
    padding: 5px 15px;

    vertical-align: middle;
}

table.table-room-selected,
table.table-options-selected {
    word-break: keep-all;
}

table.table-room-selected .select {
    vertical-align: middle !important;
}

table.table-room-selected tbody tr td {
    vertical-align: middle;
}

table.table-rsv-week td.rsv-week-price-area {
    font-size: 11px;
    line-height: 1.2;

    border-right: 1px solid hsl(0, 0%, 86%);
}

table.table-rsv-week thead {
    border-bottom: 2px solid hsl(0, 0%, 86%);
}

table.table-rsv-week .room-divider {
    border-right: 2px solid hsl(0, 0%, 86%);
    border-bottom: 2px solid hsl(204, 86%, 53%);
}

.select-date {
    background: hsl(48, 100%, 67%) !important;
}

table.table-rsv-pay td {
    margin: 0;
    padding: 12px 15px;

    vertical-align: middle;

    border: 0;
}

#form-rsv-pay .field-label {
    max-width: 120px;
    padding-left: 10px;

    text-align: left;
}

#form-rsv-pay .field-label label.label {
    font-weight: 400;
}

#form-rsv-pay input.input-w-50 {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
}

#form-rsv-pay input.input-w-80 {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
}

#form-rsv-pay input.input-w-200 {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
}

#form-rsv-pay input.input-w-250 {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
}

#form-rsv-pay input.input-w-300 {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
}

#form-rsv-pay select[name='coupon'] > option {
    font-size: 12px;
    word-break: keep-all;
}

/*
#form-rsv-pay textarea[name='code_info'] {
    min-width: 500px !important;
    max-width: 500px !important;
    } */

table.table-rsv-bank,
table.table-rsv-bank th,
table.table-rsv-bank td {
    padding: 10px;

    vertical-align: middle;
}

table.table-rsv-bank label.checkbox span {
    line-height: 1;
}

table.table-rsv-done-room {
    word-break: keep-all;
}

.cal-room {
    /* display: inline-block; */
    /* overflow: hidden; */
    max-width: 81px;
    min-width: 81px;
    word-break: break-all;
    /* white-space: nowrap; */
    /* text-overflow: ellipsis; */

    border: 0;
}

table.table-rsv-done-bank {
    margin: 0 auto !important;

    background-color: transparent !important;
}

span[data-tooltip] {
    cursor: auto !important;

    border: 0 !important;
}

[data-tooltip]:not(.is-disabled).has-tooltip-arrow::after,
[data-tooltip]:not(.is-disabled)::before,
[data-tooltip]:not(.is-loading).has-tooltip-arrow::after,
[data-tooltip]:not(.is-loading)::before,
[data-tooltip]:not([disabled]).has-tooltip-arrow::after,
[data-tooltip]:not([disabled])::before {
    word-break: keep-all !important;
}

[data-tooltip]:not(.is-disabled)::before,
[data-tooltip]:not(.is-loading)::before,
[data-tooltip]:not([disabled])::before {
    white-space: nowrap !important;
}


/* 무료행사 적용 */

.options-icon.ic_free {
    font-size: 12px;
    line-height: 1;

    display: inline-block;

    padding: 2.5px;

    color: #fff;
    border-radius: 3px;
    background: hsl(204, 86%, 53%);
}

.options-icon.ic_free::before {
    padding: 0 2.1px;

    content: '무료행사중';
    text-align: center;
}


/* 예약 확인 반응형 처리 */

td.table-option-mobile,
th.table-option-mobile {
    display: table-cell;
}

span.option-content {
    font-size: .5rem !important;
}

table.table-room-selected td,
table.table-room-selected th {
    border: 1px solid #dbdbdb !important;
}

/** 레이어 팝업 **/

.layer-rsv-popup {
    width: auto;
    height: auto;
    padding: 10px;

    color: #000;
    border: 1px solid hsl(0, 0%, 98%);
    background-color: white;
    -webkit-box-shadow: 5px 5px 8px 0 rgba(222, 222, 222, 1);
    -moz-box-shadow: 5px 5px 8px 0 rgba(222, 222, 222, 1);
    box-shadow: 5px 5px 8px 0 rgba(222, 222, 222, 1);
}

.b-close {
    position: absolute;
    right: 10px;
    bottom: 5px;

    cursor: pointer;

    color: black;
}

/** renew **/
.wrapper-image {
    overflow-x: hidden;

    width: 100%;
    height: 300px;
}

.rsv-pension-image {
    width: auto;
    height: 100%;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

span.rsv-title {
    padding: 0;
}

.wrapper-calendar,
.wrapper-check {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 50px 80px 50px;
}

.container-booking-room .columns {
    position: relative;

    -webkit-box-lines: multiple;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.modal.popup .columns {
    overflow-y: scroll;
}

.container-booking-room .column.room-price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;

    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.container-booking-room ul.room-info {
    line-height: 1.5 !important;
}

.container-booking-room ul.room-info li .room-info-sub-text {
    font-size: 16px !important;
}

.litepicker {
    z-index: 9998 !important;
    top: 186.167px !important;
    left: 48% !important;
    transform: translateX(-51%) !important;
    border: 1px solid #2e521e;
    border-radius: 12px;
    width: 630px;
    gap: 20px;
    background-color: #fff;
    padding:  0;
}

.litepicker.mobilefriendly {
    z-index: 10005 !important;
}

.litepicker-backdrop {
    z-index: 10000 !important;
}

#booking_date {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;

    border: 0;
}

.wrap-booking-date {
    display: flex;

    justify-content: space-between;
    align-items: center;
}

.wrap-start-date,
.wrap-end-date {
    position: relative;

    width: 100%;
}

.wrap-start-date span.booking-ic-left {
    position: absolute;
    top: 50%;
    left: 10px;

    transform: translateY(-50%);

    color: #3273dcd6;
}

.wrap-end-date span.booking-ic-right {
    position: absolute;
    top: 50%;
    right: 10px;

    transform: translateY(-50%);

    color: #3273dcd6;
}


.wrap-span {
    margin-right: 0;
    margin-left: 0;
}

input[name='r_start_date'] {
    text-align: center;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-left: 60px;
}

input[name='r_end_date'] {
    text-align: center;
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-right: 60px;
}

input[name='r_start_date'],
select.r_span,
input[name='r_end_date'] {
    font-size: 18px;
    font-weight: 700;
}

select.r_span {
    text-align: -moz-center;
    text-align: -webkit-center;
    text-align: center;
    height: 45px;
    border-radius: 0;
    min-width: 120px;
    color: hsl(217, 71%, 45%);
    border-color: hsl(217, 71%, 45%);
}

.container__footer .button-apply,
.container__footer .button-cancel {
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

.wrap-start-date::after {
    font-size: 14px;
    font-weight: 700;

    position: absolute;
    top: 50%;
    left: 40px;

    content: '입실일';
    transform: translateY(-50%);

    color: hsl(0, 0%, 50%);
}

.wrap-end-date::after {
    font-size: 14px;
    font-weight: 700;

    position: absolute;
    top: 50%;
    right: 40px;

    content: '퇴실일';
    transform: translateY(-50%);

    color: hsl(0, 0%, 50%);
}

.line {
    width: 100%;
    margin: 10px 0;

    border-bottom: 1px solid hsl(0, 0%, 90%);
}

.btn-room-selected {
    position: absolute;
    top: 0;
    right: 0;
}

.btn-room-selected input[type='checkbox'] {
    display: none;
}

.btn-room-selected::after {
    display: block;
    clear: both;

    content: '';
}

.btn-room-selected input[type='checkbox']+label {
    display: inline-block;

    width: 120px;
    height: 45px;

    cursor: pointer;
    text-align: center;

    color: hsl(0, 0%, 71%);
    border: 1px solid hsl(0, 0%, 71%);
    border-radius: 3px;
    background: white;
}

.btn-room-selected input[type='checkbox']:disabled+label {
    cursor: not-allowed;

    color: hsl(0, 0%, 90%);
    border: 1px solid hsl(0, 0%, 90%);
    background: hsl(0, 0%, 90%);
}

.btn-room-selected input[type='checkbox']+label span.material-icons {
    margin-right: 5px;
}

.btn-room-selected input[type='checkbox']:checked+label {
    color: white;
    border: 1px solid #fc5b62;
    background: #fc5b62;
}


.rsv-fixed-header {
    position: fixed;
    z-index: 49;
    top: 0;

    width: 100%;
    height: 50px;
    padding-left: 30px;

    background: white;
}

.rsv-nav {
    max-width: 1200px;
    height: 49px;
    margin: 0 auto;

    background-color: white;
}

#box-selected {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 5px 5px 5px;
    border-top: 1px solid hsl(0, 0%, 90%);
    background: white;
}

#box-selected .box-selected-text {
    font-size: 14px;
}

#box-selected .columns {
    max-width: 1200px;
    margin: 0 auto;
}

footer.footer .content {
    max-width: 1200px;
    margin: 0 auto;
}

/** datepicker **/
.modal {
    z-index: 10000 !important;
}

.modal.popup .modal-card {
    width: 20rem;
    max-width: 60vw;
    height: 50vh;
    max-height: 55vh;
}

.modal.popup .modal-card .modal-card-body {
    overflow: hidden;

    padding: 0 !important;

    border-radius: 10px;
}

.room-text-col {
    overflow-y: auto !important;
    height: 100%;
    padding: 2rem !important;
}


.room-carousel-col {
    max-width: 600px;
}

dl.room_text dt,
dl.item-text dt {
    font-size: 16px;
    font-weight: 700;

    width: 60px;
    min-width: 60px;
}

dl.item-text dt {
    width: 80px !important;
    min-width: 80px !important;
}

dl.room_text dt,
dl.room_text dd,
dl.item-text dt,
dl.item-text dd {
    font-size: 14px;

    color: hsl(0, 0%, 21%);
}

table.table-extra-price {
    font-size: 12px;
}

table.table-extra-price thead tr th,
table.table-extra-price tbody tr th {
    font-weight: 600;

    text-align: center !important;
    vertical-align: middle;

    background: hsl(0, 0%, 90%);
}

table.table-extra-price tbody tr th,
table.table-extra-price tbody tr td {
    text-align: center;
    vertical-align: middle;
}

table.table-extra-price tbody tr td {
    font-size: 10px;
}

figure.room-img {
    position: relative;
}

figure.room-img span.thumbnail-icon {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 40px;
    height: 40px;

    transform: translate(-50%, -50%);

    opacity: .7;
    background: url(/assets/images/zoom_in_white_48dp.svg) no-repeat center/cover;
}

.container-booking-room figure.room-img .darkness {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    transition: all .3s linear;

    opacity: 0;
    background: #000;
}

.box {
    transition: all .3s linear;

    border: 1px solid hsl(0, 0%, 90%);
    box-shadow: none !important;
}

.box.hover:hover {
    background-color: #185adb1a;
}


.image-wrapper {
    overflow: hidden;

    width: 96px;
    height: 96px;

    border: 1px solid hsl(0, 0%, 90%);
}

.image-wrapper .image-cover {
    width: 100%;
    height: 100%;
}

.media-content {
    overflow-x: hidden;
}

.container-booking-room figure.room-img:hover .darkness {
    opacity: .4;
}



.owl-nav {
    position: absolute;
    top: 50%;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    width: 100%;
    padding: 0 10px;

    transform: translateY(-90%);

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
    width: 40px;
    height: 40px;

    border-radius: 50% !important;
    background: rgba(0, 0, 0, .5) !important;
}

.owl-carousel .owl-nav button.owl-next span,
.owl-carousel .owl-nav button.owl-prev span {
    font-size: 30px;
    line-height: .8;

    color: white;
}

.owl-carousel .owl-stage-outer {
    background: rgba(0, 0, 0, .7) !important;
}

.datetimepicker-dummy .datetimepicker-dummy-wrapper::before,
.datetimepicker-dummy .datetimepicker-dummy-wrapper::before {
    background-color: #1d72aa !important;
}

.datetimepicker.is-link .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item.is-today {
    color: #3273dc !important;
}

.datetimepicker-dummy .datetimepicker-dummy-wrapper .datetimepicker-dummy-input {
    font-size: 18px !important;

    text-align: center !important;
}

.datetimepicker {
    width: 100%;
}

.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item {
    font-size: 12px;
}

.datetimepicker.is-link .datetimepicker-header .datetimepicker-selection-day,
.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active {
    font-weight: 600;
}

.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date {
    margin: .4rem 0 !important;
}

.not_scroll {
    /* position: fixed; */
    overflow: hidden;
    /* width: 100%;
    height: 100% */
}

.date-input {
    content: attr(value); /* This can cause issues */
}