@import "/assets/dist/css/font-9a34abf6cd55615377964d935a4da674.css";
/*
#=========================================#
        공통 커스텀
#=========================================#
*/
:root{
    --color-gold:#ac8f57;
    --color-gold2:#796237;
    --color-gold3:#C7903F;
}
/* 청담점 메인컬러 수정 */
body.chung{
    --color-primary: 78 118 145;
}

html,body {min-width:1500px; overflow-x:auto; height:100%; padding-right:0 !important; font-family: "Pretendard", "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }

.w-1300 {width:600px; }

svg use {width:100%; height:100%; }

.modal {width:100%; }

.bg-gold {background-color: var(--color-gold); }
.bg-gold2 {background-color: var(--color-gold2); }

.bg-top {background-color:#B69950;}

.txt-gold {color: var(--color-gold); }
.txt-gold2 {color: var(--color-gold2); }
.txt-gold3 {color: var(--color-gold3); }

/* form */
.form-control[readonly] {background-color:rgb(var(--color-slate-50)); cursor:text; }

.custom_radio {overflow:hidden; display:flex; gap:1px; border:1px solid rgb(var(--color-primary)); border-radius:5px; background-color: rgb(var(--color-primary));}
.custom_radio label {background-color:#fff;}
.custom_radio input {display:none; }
.custom_radio span {display:block; padding:5px 10px; color:rgb(var(--color-primary)); cursor:pointer; }
.custom_radio input:checked + span {background-color: rgb(var(--color-primary)); color:#fff; }

[type="file"] { background-color: #fff; border-width: 1px; border-radius: 0.375rem; padding:4px; font-size:14px; line-height: 1.5rem; --tw-shadow: 0 0 #0000; --tw-border-opacity: 1; border-color: rgb(var(--color-slate-200) / var(--tw-border-opacity));}

/* 버튼 */
.btn-success {color:#fff; }
.btn-gold {border-color: var(--color-gold); background-color: var(--color-gold); color: #fff; }
.btn-outline-gold {border-color: var(--color-gold); color:var(--color-gold); }

.btn-gray {border-color: #71717a; background-color: #71717a; color: #fff; }
.btn-outline-gray {border-color: #71717a; color:#71717a; }

/* 테이블 */
.table.pd-sm td, .table.pd-sm th {padding:0.35em; }
.table.head-sm th {padding:0.35em; }
.table th {border-bottom-width:1px; }
.table.table-sm th {padding-top:0.55rem; padding-bottom:0.55rem; }
.table.table-sm td {padding-top:0.35rem; padding-bottom:0.35rem;  }
.table.table-sm.td-samepd td {padding-top:0.55rem; padding-bottom:0.55rem;  }
.table.table-sm.rlpd-sm td {padding-left:0.35em; padding-right:0.35em; }
.table.table-hsm th {padding-top:0.35rem; padding-bottom:0.35rem; padding-left:0.35em; padding-right:0.35em; }
.table.baby_table {
    table-layout: fixed;
    width: 100%;
}

.pagination .page-item .page-link {height:38px; border:1px solid rgb(var(--color-slate-200)); }
.pagination .page-item.active .page-link {background-color: rgb(var(--color-primary)); color:#fff; }
.pagination.pagi-sm .page-item .page-link {min-width:25px; height:25px; padding:5px; margin-right:0.3rem; }

@media (max-width:calc(639px)){
    .pagination .page-item {flex:unset; }
    .pagination .page-item .page-link {min-width:40px; margin-right:0.5rem; padding-left:0.25rem; padding-right:0.25rem; }
}

/* 모달 - width 값 고정 */
.modal .modal-dialog.modal-sm {width:300px !important;}
.modal .modal-dialog {width:460px !important; }
.modal .modal-dialog.modal-lg {width:600px !important; }
.modal .modal-dialog.modal-2lg {width:750px !important; }
.modal .modal-dialog.modal-xl {width:900px !important; }
.modal .modal-dialog.modal-2xl {width:1050px !important; }
.modal .modal-dialog.modal-3xl {width:1200px !important; }

.modal.modal-full {padding:0 !important; }
.modal.modal-full .modal-dialog {width:100% !important; height:100% !important; margin-top:0; margin-bottom:0; }
.modal.modal-full .modal-dialog .modal-content {overflow-y:auto; height:100%; border-radius:0; }

/* 탭 */
.tab-content > div {width:100% !important; }

/*
#=========================================#
        모달
#=========================================#
*/
.custom_modal {z-index:-9999; position:fixed; left:0; top:64px; opacity:0; visibility: hidden; overflow-y:auto; display:block; width:100%; height: 100%; transition:opacity 0.2s;  }
.custom_modal .modal_bg {position:fixed; left:0; top:0; width:100%; height:100%; background-color:#000000a6; cursor:pointer; }
.custom_modal.show {z-index:9999; visibility:visible; opacity:1; transition:opacity 0.4s;  }
.custom_modal .modal_inner {width:700px; max-width:700px; margin:0 auto; transform:translateY(-40px); transition:all 0.3s; }
.custom_modal .modal_inner .tab_cont {overflow-y:auto; max-height:85vh; }
.custom_modal .modal_inner.modal-full {width:1400px; max-width:1400px; }
.custom_modal .modal_inner.modal-full-v2 {width:1600px; max-width:1600px; }
.custom_modal.show .modal_inner {transform:translateY(0);}
.custom_modal .close_btn {width:37px; height:37px; }
.custom_modal .close_btn i {display:block; width:60%; height:1.5px; margin:0 auto; background-color: #fff;} 
.custom_modal .close_btn i:first-of-type {transform:rotate(45deg); } 
.custom_modal .close_btn i:last-of-type {transform:translateY(-1px) rotate(-45deg); } 

/* @media (min-width:640px){
    .modal.modal-full {padding:0 !important; }
    .modal.modal-full .modal-dialog {width:100%; margin-top:0; margin-bottom:0; }
} */

/*
#=========================================#
        탭
#=========================================#
*/
.tab_layout button {border-radius:5px; background-color: #fbfbfb;}
.tab_layout button:hover {background-color: rgb(var(--color-primary)/0.05);}
.tab_layout button.active {background-color: rgb(var(--color-primary)); color:#fff; }

.nav.nav-boxed-tabs .nav-item .nav-link {background-color: #e2e8f0;}
/*
#=========================================#
        커스텀 툴팁
#=========================================#
*/
.custom_tooltip {position:relative; }
.custom_tooltip .hover_box {z-index:10; position:absolute; left:50%; top:100%; opacity:0; visibility: hidden; width:max-content; max-width:360px; transform:translateX(-50%); background-color: #fff; transition:opacity 0.1s; }
.custom_tooltip .hover_box.left {left:0; transform:translateX(0); }
.custom_tooltip .hover_box.right {left:auto; right:0; transform:translateX(0); }
.custom_tooltip .hover_box.autowidth {max-width:unset; }
.custom_tooltip .hover_box.type02 {max-width:200px; }
.custom_tooltip:hover .hover_box {visibility: visible; opacity:1; }

/*
#=========================================#
        custom_select
#=========================================#
*/
.custom_select {position:relative; }
.custom_select > ul {position:absolute; left:0; top:100%; display:none; width:100%; border:1px solid #333; }
.custom_select.on > ul {display:block; }

/*
#=========================================#
        litepicker
#=========================================#
*/
.litepicker .container__days .day-item.is-locked {background-color: #b0b0b0; color:#fff; }
.litepicker .container__days .day-item.is-locked:hover {color:#fff; }
/*
#=========================================#
        상단 내비
#=========================================#
*/
.top_pager {background-color: rgb(var(--color-primary));}
.top_pager .depth_box > div {display:none; }
.top_pager .depth_box > div.active {display:flex; }
.top_pager .depth2 a {min-width:130px; height:41px; }
.top_pager .depth2 a.active {height:45px; border-bottom:0 none; border-radius:6px 6px 0 0; box-shadow:none; }
/*
#=========================================#
        헤더
#=========================================#
*/

/* top-bar-boxed */
.top-bar-boxed .search select {position:absolute; left:0; top:0; width:125px; height:100%; padding-right:10px; font-size:14px; background-color:transparent; border-radius:20px; line-height:1; }
.top-bar-boxed .search select:focus {outline:none; border:0 none; box-shadow:none; }
.top-bar-boxed .search input {padding-left:125px; }

/* gnb */
.gnb {color:#fff; }
.gnb li {position:relative; }
.gnb > li:hover > a {background:rgba(0,0,0,0.1); }
.gnb > li.active > a {background:rgba(0,0,0,0.3); }
.gnb > li > a {display:block; padding:10px 15px; font-weight:500; border-radius:5px; }
.gnb li:hover ul {display:block; }
.gnb li ul {position:absolute; left:-12px; top:100%; display:none; width:160px; font-size:14px; border:1px solid #333; white-space:nowrap; background-color:#3f3f46; box-shadow:0 0 10px rgba(0,0,0,0.15); }
.gnb li ul li a {display:block; padding:4px 12px;}
.gnb li ul li + li {border-top:1px solid #333; }

/* profle */
.profile {padding:10px 0;}
.profile:hover .profile_menu {display:block; }
.profile .profile_menu {position:absolute; right:0; top:100%; display:none; border:1px solid #333; white-space:nowrap; background-color:#3f3f46; }
.profile .profile_menu a {display:block; padding:7px 20px; color:#fff; }
.profile .profile_menu a + a {border-top:1px solid #333; }

/*
#=========================================#
        로그인
#=========================================#
*/
.login_area {background-color:#292727; }
.login_box h4 {color:var(--color-gold); }
.login_box input:read-only,
.login_box input {width:100%; height:50px; border:1px solid #aaa; background-color:rgba(255,255,255,0.15); color:#fff; text-align:center; }
.login_box input::placeholder {color:#d5d5d5; }

/*
#=========================================#
        예약하기
#=========================================#
*/
.reser_wrap {display:flex; align-items:start; }
.reser_wrap .room {width:auto; flex-shrink: 0;  }

.reser_wrap .room table {width:100%; }
.reser_wrap .room table tr {height:50px; }
.reser_wrap .room table th {border:1px solid #efefef; padding:0 10px; }

.reser_wrap .room .room_type01 {background: #8F45FE; }
.reser_wrap .room .room_type02 {background: #E259FF; }
.reser_wrap .room .room_type03 {background: #5F8CFF; }
.reser_wrap .room .room_type04 {background: #A9A9A9; }
.reser_wrap .room .room_type05 {background: #ff7820; }

.reser_wrap .reser_box {position:relative; flex-grow:1; }

.reservation_table {table-layout:fixed; }
.reservation_table > thead tr:first-of-type th div {position:sticky; left:0; display:inline-block; }
.reservation_table > thead th {user-select: none;}
.reservation_table > thead th {width:54px; border:1px solid #EFEFEF; }
.reservation_table > thead .day th {padding:5px 0; font-size:14px; color:#9d9ca3; font-weight:400; }
.reservation_table > thead .day th.today {background-color: rgb(var(--color-primary)); border-radius:5px; color:#fff; }
.reservation_table > thead .day th.today b {color:#fff; }
.reservation_table > thead th b {display:block; font-size:18px; font-weight:700; color:#000; }
.reservation_table > thead th b.weekend {color:red}
.reservation_table > tbody {position:relative; }
.reservation_table > tbody > tr > th {border:1px solid #EFEFEF; }

.reservation_table > tbody > tr > td {vertical-align:top; padding:0; border:1px solid #EFEFEF; max-width:52px; min-width:52px; height:50px; }
.reservation_table > tbody > tr > td .blank {width:100%; height:40px; margin:5px 0; }
.reservation_table .first {position:sticky; left:0; width:54px; background-color:#fff; } 
.reservation_table .ui-selecting {border:0 none; background-color:rgb(var(--color-primary)/0.1);}
.reservation_table > tbody > tr > td .space {z-index:10; position:relative; left:16px; min-width:52px; min-height:40px; margin:5px 0; }
.reservation_table > tbody > tr > td .space:hover {z-index:20; }
.reservation_table > tbody > tr > td .space .view_data {height:40px; opacity:1; border-radius:5px; }
.reservation_table > tbody > tr > td .space.off .view_data {opacity:0.6; }
.reservation_table > tbody > tr > td .space.off .view_data:hover {opacity:0.95; }
.reservation_table > tbody > tr > td .space .view_data p {color:#fff; font-weight:700; }
.reservation_table > tbody > tr > td .space .view_data p.text-black {color:#000 !important; }
.reservation_table > tbody > tr > td .space .view_data p.text-black .vip {color:#9f7524 !important;}
.reservation_table > tbody > tr > td .space .view_data .hover_box {z-index:50; }
.reservation_table > tbody > tr > td .space .view_data .data_detail {position:absolute; left:90%; bottom:10px; display:none; width:120px; }
.reservation_table > tbody > tr:first-of-type > td .space .view_data .data_detail {top:10px; bottom:auto; }
.reservation_table > tbody > tr > td .space .view_data .data_detail.on {display:block; }

.reservation_table > tbody > tr > td .space.type01 .view_data {background-color:#8F45FE; }
.reservation_table > tbody > tr > td .space.type02 .view_data {background-color:#E259FF; }
.reservation_table > tbody > tr > td .space.type03 .view_data {background-color:#5F8CFF; }
.reservation_table > tbody > tr > td .space.type04 .view_data {background-color:#A9A9A9; }
.reservation_table > tbody > tr > td .space.type05 .view_data {background-color: #ff8e46; }
.reservation_table > tbody > tr > td .space.vip .view_data {border:2px solid #AC8F57; }
.reservation_table > tbody > tr > td .space.vip .view_data .vip {color:#efc36d; }

.reservation_table > tbody > tr:not(:first-of-type) > td .custom_tooltip .hover_box {top:auto; bottom:100%; }

/*
#=========================================#
        예약하기 - 계약상세 모달
#=========================================#
*/
.reser_detail .top_tab button {background-color:rgb(var(--color-zinc-300)); }
.reser_detail .top_tab button.on {background-color: #fff; border-bottom:1px solid #fff; }

.message_full {position:relative; height:32px; }
.message_full .message {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.message_full:hover .message {z-index:10; position:absolute; left:0; top:4px; width:100%; height:auto; padding:0.35em; overflow:visible; text-overflow:unset; white-space:normal; background-color: #fff; box-shadow:0 0 5px rgba(0,0,0,0.15); }

.message_full.type02:hover .message {left:15px; top:12px; }

/*
#=========================================#
        datetimepicker 커스텀
#=========================================#
*/
.xdsoft_datetimepicker {font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; border:0 none; padding:10px; box-shadow:0px 3px 20px #00000014; border-radius:0.375rem; font-size:0.875rem; line-height:1.25rem; }
.xdsoft_datetimepicker .xdsoft_today_button {display:none; }
.xdsoft_datetimepicker .xdsoft_calendar th {color:#a0acbf; font-weight:400; }
.xdsoft_datetimepicker .xdsoft_calendar td, 
.xdsoft_datetimepicker .xdsoft_calendar th {padding:5px 0; border:0 none; background-color:transparent; text-align:center; border-radius:5px;}
.xdsoft_datetimepicker .xdsoft_calendar td {color:#1e293b; }
.xdsoft_datetimepicker .xdsoft_calendar td>div {padding-right:0; }
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {color:rgb(var(--color-primary)); }
.xdsoft_datetimepicker .xdsoft_calendar td:hover {background-color:#f1f5f9 !important; color:#1e293b !important; }
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {color:#fff !important; background-color:rgb(var(--color-primary)) !important; box-shadow:none;}

.xdsoft_datetimepicker .xdsoft_monthpicker {display:flex; justify-content: space-between; }
.xdsoft_datetimepicker .xdsoft_month {width:70px; border:1px solid #e2e8f0; border-radius:5px; text-align:center; font-weight:normal; }
.xdsoft_datetimepicker .xdsoft_year {width:77px; margin:0; border:1px solid #e2e8f0; border-radius:5px; text-align:center; font-weight:normal; }
.xdsoft_datetimepicker .xdsoft_month span ,
.xdsoft_datetimepicker .xdsoft_year span {padding:0 5px; }
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select {width:100%; text-align:left; }

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {border-radius:7px; }
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div {background-color:#fff; }
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover {background-color:#f1f5f9 !important; color:#1e293b !important; }
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current:hover {color:#fff !important; background-color:rgb(var(--color-primary)) !important;}


@media all and (max-width:320px){
    .canvas-container {width:288px !important; height:162px !important; }
    #mycanvas2 {width:288px !important; height:162px !important; }
    #mycanvas2 + .upper-canvas {width:288px !important; height:162px !important; }
    #mycanvas3 {width:288px !important; height:162px !important; }
    #mycanvas3 + .upper-canvas {width:288px !important; height:162px !important; }
}

/*
#=========================================#
        프로그램 일정 
#=========================================#
*/
.schedule_wrap {display:flex; align-items:start; }
.schedule_wrap .time_table {width:84px; }
.schedule_wrap .schedule_table {overflow-x:auto; width:calc(100% - 84px); }
.schedule_wrap .schedule_table {overflow-y:auto; overflow-x: hidden; width:calc(100% - 84px); }

.schedule_wrap .time_table th {border-right:1px solid #efefef; }
.schedule_wrap .time_table td {height:88px; border:1px solid #efefef; font-size:14px; font-weight:700; color:#555; text-align:center; }
.schedule_wrap .time_table td.noborder {border:0 none; }


.schedule_wrap .schedule_table table {table-layout:fixed; }
.schedule_wrap .schedule_table thead {cursor:pointer; }
.schedule_wrap .schedule_table thead .year {text-align:left; }
.schedule_wrap .schedule_table thead .year th {border:1px solid #efefef; border-top:0 none; border-bottom:0 none; font-size:20px; }
.schedule_wrap .schedule_table thead .year th div {position:sticky; left:0; display:inline-block; padding:10px; color:#000; font-weight:bold; }
.schedule_wrap .schedule_table thead th {height:47px; border:1px solid #efefef; padding:7px 0; color:#9d9ca3; font-size:14px; font-weight:400; }
.schedule_wrap .schedule_table thead th b {display:block; font-size:19px; font-weight:700; color:#000; }
.schedule_wrap .schedule_table thead th b.weekend {color:#FF0000; }

.schedule_wrap .schedule_table tbody th {padding:0; border:0 none; }
.schedule_wrap .schedule_table tbody td {min-width:353px; max-width:353px; height:88px; border:1px solid #efefef; }
.schedule_wrap .schedule_table .schedule_list {overflow-y:auto; overflow-x: hidden; width:353px; height:88px; padding:13px; color:#000; font-size:13px; font-weight:400; }
.schedule_wrap .schedule_table .schedule_list {width:353px; height:88px; padding:13px; color:#000; font-size:13px; font-weight:400; }
.schedule_wrap .schedule_table .schedule_list > div {cursor:pointer; }

/*
#=========================================#
        스파 예약
#=========================================#
*/
.spa_timeline {height:calc(100vh - 280px); font-size:13px; }
.spa_timeline .left_btn {z-index:5; position:sticky; top:0; }
.spa_timeline .left_btn .week_list a {background-color:#fffaf3; }
.spa_timeline .left_btn .week_list a:nth-of-type(odd) {border-right-width:1px; }
.spa_timeline .left_btn .week_list a.active {background-color:#FFF3B0; color:#ff3d00; font-weight:bold; }

.spa_wrap table thead {z-index:50; position:sticky; top:-1px; }
.spa_wrap table thead th {padding:20px 5px; }
.spa_wrap table tbody tr:hover td {background-color:#FFFAF3; }
.spa_wrap table tbody td {padding:0 !important; }
.spa_wrap table tbody td.schedule {position:relative; padding:3px; color:#000; line-height:1.3; }
.spa_wrap table tbody td.schedule .hover_box {z-index:10; position:absolute; right:calc(100% + 2px); top:5%; display:none; width:200px; border:1px solid #ddd; padding:5px; background-color:#fff; font-size:12px; text-align:left; line-height:1.3; box-shadow:0 0 5px rgba(0,0,0,0.2); }
.spa_wrap table tbody td.schedule:hover .hover_box {display:block; }

.spa_wrap {z-index:10; }
.spa_wrap .bg-type01 {background-color:#e7e7e7 !important; }
.spa_wrap .bg-type02 {background-color:#d2d2d2 !important; }
.spa_wrap .bg-type03 {background-color:#d8b4fe !important; }
.spa_wrap .bg-type04 {background-color:#86efac !important; }
.spa_wrap .bg-type05 {background-color:#ffb6b6 !important; }
.spa_wrap .bg-type06 {background-color:#e4b653 !important; }
.spa_wrap .bg-type07 {background-color:#64a7b9 !important; }

.spa_wrap .cbx { width: 8px; height: 9px; border: 1px solid #d2d2d2; margin-bottom: -1px; display: inline-block; zoom: 1; }
.spa_wrap .cbx1 { background-color: #ff005a; /* 빨 */ }
.spa_wrap .cbx2 { background-color: #ff9800; /* 주 */ }
.spa_wrap .cbx3 { background-color: #fff100; /* 노 */ }
.spa_wrap .cbx4 { background-color: #afff00; /* 초 */ }
.spa_wrap .cbx5 { background-color: #00dbff; /* 파 */ }
.spa_wrap .cbx6 { background-color: #29026d; /* 남 */ }
.spa_wrap .cbx7 { background-color: #c100ff; /* 보 */ }

.spa_wrap .popup_menu {z-index:20; position:absolute; left:100px; top:100px; display:none; width:100px; border:1px solid #ddd; background-color:#fff; }
.spa_wrap .popup_menu a {display:block; padding:2px 7px; font-size:14px; }
.spa_wrap .popup_menu a:hover {background-color:#f1f1f1; }

/*
#=========================================#
        메시지 > 폰
#=========================================#
*/
.phone_box .phone_message {background-image:url('../img/phone/phone_bg_body.gif'); background-size:100% ; }
.phone_box .phone_message textarea {font-size:9pt; line-height:1.4; }
.phone_box .phone_byte {background-image:url('../img/phone/phone_bg_byte.gif'); background-size:100% ; }
.phone_box .phone_bottom {height:69px; background-image:url('../img/phone/phone_bg_bottom.gif'); background-size:100% ; }
.phone_box .char_cont table td {border:1px solid #ececec;}
.phone_box .char_cont table td a {display:block; }

.service_sale_list button:hover {background-color:rgb(var(--color-slate-100)); }
.service_sale_list button.active {background-color: rgb(var(--color-primary) / 0.2);}