@charset "utf-8";


/* =======================================================
	popup
========================================================*/
#popup {display: none; }
.popup {position: absolute; top: 0; /*top: 50%; left: 50%; transform: translate(-50%, -50%);*/ z-index: 998; background-color: #fff; border: 1px solid #e1e1e1; border-radius: 20px; box-sizing: border-box; box-shadow: 0 0 20px 3px rgba(58, 133, 97, 0.4); }
.popup:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.popup .input-text {height: 37px; border-radius: 8px; font-size: 16px; color: #888c83; /*letter-spacing: -1px;*/}
.popup-header {position: relative; width: 100%; height: 165px; padding: 40px 30px; box-sizing: border-box; border-bottom: 1px solid #cfcfcf; }
.popup-header .title {font-weight: 600; font-size: 36px; color: #1e211b; }
.popup-header .title span {font-size: 36px; color: #1e211b; margin-right: 0.3em; }
.popup-header .btn-close {position: absolute; top: 40px; right: 40px; width: 37px; height: 36px; background: url("../images/popup_close.png") no-repeat center center; }
.popup-content { }


/* tabmenu */
.tab-content {display: none; }
.tab-content.on {display: block; }

/* form-control */
/* .form-control + .form-control {margin-left: 38px; }
.form-control label + .input-text {margin-left: 35px; } */


/* 예약자확인 슬라이드 */
#popup_slide {position: absolute; left: -60px; z-index: 998; width: 360px; height: 100%; transition: .6s; opacity: 0; visibility: hidden; border-radius: 0 20px 20px 0; }
#popup_slide.active {left: 0; visibility: visible; opacity: 1; }
/* #popup_slide .slide-title {padding-left: 70px; background: url("../images/icon_clock.png") no-repeat left center;font-weight: 700; color: #444a3e; } */
#popup_slide .slide-title .title {display: flex; align-items:center; color: #1e1e1e; }
#popup_slide table thead th {background-color: #fff4d9; }
#popup_slide table td {padding: 15px 0; border: 0; }


/* 판매현황 - 이용등록 */
#popup_register {width: 70%; max-height: 940px; min-width:1000px; /*margin-left: 150px;*/ left:15%;  }
#popup_register .left {float: left; width: 590px; border-right: 1px solid #cfcfcf; box-sizing: border-box; }
#popup_register .right {float: right; width: calc(100% - 590px); }
#popup_register .title {font-weight: 700; color: #444a3e; }
#popup_register .popup-header .btn-slide {display: block; padding: 10px 20px 10px 38px; background: url("../images/arrow_slide.png") no-repeat left 15px center; background-color: #fcb503; border: 1px solid #d79a03; border-radius: 18px; color: #fff; font-weight: 700;}


/* 팝업 메뉴 */
.popup-menu {display: inline-block; margin-left: 153px; }
.popup-menu li {display: inline-block; }
.popup-menu li + li {margin-left: 80px; }
.popup-menu li a {font-size: 30px; color: #888c83; font-weight: 700; }
.popup-menu li:active, 
.popup-menu li.on a {color: #52a2ff; }


/* 룸제어 탭메뉴 */
.room-tabmenu {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;  }
.room-tabmenu li {width: 100%; height: 60px; border-left: 1px solid #cfcfcf;  border-bottom: 1px solid #cfcfcf;  text-align: center; line-height: 60px; }
.room-tabmenu li:first-child {border-left: 0;}
.room-tabmenu li.on {border-bottom: 1px solid #fff; }
.room-tabmenu li a {display: block; font-weight: 500; }
.room-tabmenu li.on a {color: #52a2ff}



/*--------------------------------
  회원조회
---------------------------------- */
.popup-search {display: none; position: absolute; top: 165px; right: 0; z-index: 999; height: calc(100% - 164px); background-color: #fff; border-bottom-right-radius: 20px; }
.popup-search .category-wrap {display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; }
.popup-search .category-top {width: 100%; }
.popup-search .member-list {width: calc(100% - 318px); }
.popup-search .member-search {width: 318px; padding: 25px 25px; box-sizing: border-box; border-left: 1px solid #cfcfcf; }
.close-member {display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: url("../images/popup_close_s.png") no-repeat center center; }
.popup-search .input-group label {display: block; font-weight: 700; }
.popup-search .input-group + .input-group {margin-top: 26px; }
.popup-search .input-group .input-text {width: 100%; height: 48px; margin-top: 8px; }
.popup-search .member-list .btn-group {padding-top: 34px; padding-bottom: 15px; border-top: 1px solid #cfcfcf; }
.popup-search .member-search .btn-group {margin-top: 67px; padding: 0; }
.popup-search .member-search .btn-group button + button {margin-top: 20px; }




.product-list {height: 530px; max-height: 530px; overflow-y: auto; }
.product-top {position: relative; padding: 17px 30px; }
.product-top .btn-white {position: absolute; top: 10px; right: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 15px; }
.product-top .btn-white:active,
.product-top .btn-white.active {background-color: #40cb5a; color: #fff; }
.product-list tr.active .td-price {color: #ff553e; }

/* 발급번호 입력 */
.issue-number {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 15px 10px 10px 30px; }
.issue-number .lbl {font-weight: 900; }
.issue-number .input-text {width: 258px; margin: 0 10px 0 15px; }
.issue-number .btn-white {width: 132px; }

.total-wrap {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 590px; padding: 24px 28px 30px; border-right: 1px solid #cfcfcf; line-height: 1; font-weight: 700; color: #444a3e; letter-spacing: -1px; line-height: 1.2; }
.total-wrap .total-text p {font-size: 36px; }
.total-wrap .total {font-size: 24px; }
.total-wrap .total span {font-size: 48px; }

.category-top {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; height: 60px; border-top: 1px solid #cfcfcf; border-bottom: 1px solid #cfcfcf; }
.category-wrap:first-child .category-top {border-top: 0; }
.category-top .title {display: inline-block; margin-left: 20px; }
.category-top .slide-page {padding: 0 32px; font-size: 30px; font-weight: 700; }
.category-top .slide-btn-group {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; }
.category-top .btn-wrap {position: relative; width: 60px; height: 100%; border-left: 1px solid #cfcfcf; text-align: center; }
.category-top .btn-wrap:first-child {border-right: 1px solid #cfcfcf;}
.category-top .slide-btn-group .btn-prev {display: inline-block; width: 100%; height: 100%; background: url("../images/arrow_prev.png") no-repeat center center; }
.category-top .slide-btn-group .btn-next {display: inline-block; width: 100%; height: 100%; background: url("../images/arrow_next_on.png") no-repeat center center; }


/*
  group01 - 이용등록 분류선택1
  group02 - 이용등록 분류선택2
  group03 - 룸제어
  group04 - 단체방설정
  group05 - 결제 > 결제수단 선택
  group06 - 결제 > 현금결제 > 받은금액
  group07 - 결제 > 신용카드 > 할부선택
*/
.category-group {height: 266px; box-sizing: border-box; }
.category-list {margin: 14px 30px; box-sizing: border-box; }
.category-list li {display: inline-block; background-color: #f7f7f7; border-radius: 10px; border: 1px solid #e1e1e1; box-sizing: border-box; box-shadow: 0 0 10px 0 rgba(117, 117, 117, 0.4); cursor: pointer; text-align: center; }
.category-list li:active,
.category-list li.active {background-color: #52a2ff; border: 1px solid #4896f0; box-sizing: border-box; }
.category-list li:active button,
.category-list li.active button {color: #fff; }
.category-group.group01 .category-list li {width: calc(100% / 3 - 24px ); margin-top: 10px; margin-left: -4px; }
.category-group.group02 .category-list li {width: calc(25% - 15px); margin-top: 15px; }
.category-group.group01 .category-list li + li {margin-left: 30px; }
.category-group.group02 .category-list li + li {margin-left: 15px; }
.category-group.group01 .category-list li:nth-child(3n+1) {margin-left: 0; }
.category-group.group02 .category-list li:nth-child(4n+1) {margin-left: 0; }
.category-list li .btn-category {width: 100%; padding: 20px 0; border-radius: 10px; box-sizing: border-box; line-height: 1.2; }
.category-list li .btn-category.check {background: url("../images/icon_check_blue.png") no-repeat left 30px center; }

.category-group.group03 {padding: 27px 30px; }
.category-group.group03 .category-list {margin: 0; }
.category-group.group03 .category-list li {width: calc(100% / 6 - 20px); }
.category-group.group03 .category-list li + li {margin-left: 19px; }
.category-group.group03 .category-list li .btn-category {padding: 15px 0; }
.category-group.group03 .btn-group {padding: 0; }

.category-group.group04 {margin: 0 0 40px; }
.category-group.group04 .category-list li {position: relative; width: calc(100% / 6 - 17px); height: 120px; margin-top: 15px; }
.category-group.group04 .category-list li:nth-child(6n+1) {margin-left: 0; }
.category-group.group04 .category-list li + li {margin-left: 15px; }
.category-group.group04 .category-list li .btn-category {padding: 15px 0; } 
.category-group.group04 .room-info {padding: 0 16px; color: #444a3e; }
.category-group.group04 .category-list li.on {background-color: #52a2ff; }
.category-group.group04 .category-list li.group {background-color: #e3e3e3; }
.category-group.group04 .category-list li.group .room-info {color: #848782; }
.category-group.group04 .category-list li.on .room-info {color: #fff; }
.category-group.group04 .room-num {display: block; font-size: 30px; text-align: left; line-height: 1; }
.category-group.group04 .tag-group {display: inline-block; position: absolute; left: 8px; bottom: 2px; min-width: 70px; padding: 5px 0; border-radius: 20px; background-color: #52a2ff; color: #fff; text-align: center; }

/* group06 결제 - 현금 받은금액 */
.category-group.group06 {display: inline-block; margin-left: 70px; }
.category-group.group06 .category-list {margin: 0; }
.category-group.group06 .category-list li + li {margin-left: 15px; }

/* group07 결제 - 신용카드 - 할부선택 */
.category-group.group07 .category-list {display:flex; gap: 15px; margin: 10px 0 27px; flex-wrap:wrap;}
.category-group.group07 .category-list li + li {margin-left: 0; }
.category-group.group07 .category-list li:last-child {margin-left: 5px; background: none; border: 0; box-shadow: none;}
.category-group.group07 .category-list li:last-child .input-text {width: 163px; min-width: 163px; margin-left: 20px; }






/*--------------------------------
  룸제어
---------------------------------- */
.room-wrap {position: relative; height: 593px; }
.room-wrap .room-text {padding-top: 32px; text-align: center; }
.room-wrap .btn-group {position: absolute; right: 30px; bottom: 10px; padding: 0; }

/* toggle switch */
.toggle-control {display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 20px 20px; gap: 20px 20px; }
.toggle-item {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.toggle-item > span {width: 80px; }
.toggle-switch {display: inline-block; position: relative; width: 123px; margin-left: 20px; padding: 10px 20px; border-radius: 32px; background-color: #52a2ff; border: 1px solid #4896f0; box-sizing: border-box; transition: all 0.2s ease-in; }
.toggle-switch:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.toggle-switch .switch.on {float: left; }
.toggle-switch .switch.off {float: right; display: none; }
.toggle-switch .switch {color: #fff; font-weight: 500; }
.toggle-switch .switch-btn {position: absolute; top: 1px; right: 0; width: 45px; height: 45px; background-color: #fff; border-radius: 50%; border: 1px solid #4896f0; transition: all 0.2s ease-in; }
.toggle-switch.active {background-color: #cfcfcf; border: 1px solid #b9b9b9; 
}
.toggle-switch.active .switch.on {display: none; }
.toggle-switch.active .switch.off {display: block;}
.toggle-switch.active .switch-btn {right: calc(100% - 47px); border: 1px solid #b9b9b9;}

#room01 .input-group {padding: 30px 0 25px; box-sizing: border-box; }
#room01 .input-group .input-text {margin: 0 18px 0 28px; }

.graph-group {display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px 0; margin-bottom: 23px; line-height: 1; font-weight: 700; }
.graph-group .graph-text {font-size: 18px; }
.graph-group .graph-time {font-size: 30px; }
.graph-group .time-graph {margin-top: 0; height: 17px; }
.graph-group .time-graph .graph-bar {height: 15px; }


/* 단체방설정, 룸 이동 */
.select-wrap {height: 60px; padding: 0 30px 55px; font-weight: 700;}
.select-wrap .title {display: block; }
.select-wrap .room {display: inline-block; font-size: 30px; }
.select-wrap .room + .room {padding-left: 10px; }

.move-room {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin-bottom: 64px; }
.move-room .select-wrap {padding-bottom: 0; }
.move-room .select-wrap .room {font-size: 36px; line-height: 1; }
.move-room .arrow-move {display: inline-block; width: 182px; height: 29px; background: url("../images/arrow_move.png") no-repeat center center; }



/*--------------------------------
  결제
---------------------------------- */
.pay-wrap {}
.pay-group {padding: 15px 20px; }
.pay-group .title {display: block; margin-bottom: 15px;}
.pay-group .category-group { }
.pay-group .product-list {height: auto; max-height: 259px; overflow-y: auto; }
.pay-group .category-list {display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; gap: 20px 20px; margin: 0; }
.pay-group .category-list li {width: calc(50% - 10px); }
.pay-group .category-list li .btn-category {padding: 13px 0; }
.pay-group.table-basic {padding-bottom: 30px; }
.pay-group.table-basic td .price {font-size: 30px; }
.pay-group.table-basic .input-text {width: 130px; min-width: 130px; height: 48px; color: #52a2ff; font-size: 30px; font-weight: 700; text-align: right; }
.pay-group.table {padding: 0; }
.pay-group.table .title {padding-left: 24px; }
.pay-group.table .product-list .btn-delete {display: none; }
.pay-group.table .product-list table tr:hover .btn-delete {display: inline-block; }

.popup-pay {display: none; position: absolute; top: 120px; left: 50%; transform: translateX(-50%); z-index: 999; width: 896px; height: 615px; background-color: #fff; border-radius: 20px; border: 1px solid #e1e1e1; box-shadow: 0 0 20px 3px rgba(58, 133, 97, 0.4); }



.popup .bottom {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; box-sizing: border-box; }
.popup .popup-bottom {position: relative; height: 117px; box-sizing: border-box; border-top: 1px solid #cfcfcf;}
.popup .popup-bottom.btn-group {padding: 24px 30px 24px 0; text-align: right; }



/*--------------------------------
  결제팝업 - 현금, 신용카드, 포인트, 쿠폰
---------------------------------- */
.popup-pay .popup-header {height: 80px; padding: 0 42px; line-height: 80px; }
.popup-pay .popup-header .title {font-size: 30px; }
.popup-pay .category-group {height: auto; }

.popup-pay .pay-field {padding: 0 42px;}
.popup-pay .pay-field .input-text {height: 48px; }
.popup-pay .pay-field.table-basic {padding: 24px 42px 10px; font-size: 18px; }
.popup-pay .pay-field.table-basic th,
.popup-pay .pay-field.table-basic td {font-size: 18px; }
.popup-pay .pay-field.table-basic td .price {font-size: 30px; font-weight: 700; }
.popup-pay .pay-field.table-basic .input-text {min-width: 120px; width: 120px; }
.popup-pay .pay-field.table-basic .input-text.font-blue {text-align: right; font-size: 30px; font-weight: 700; }
.popup-pay .pay-field > span + .category-list,
.popup-pay .pay-field > span + .radio-group {display: inline-block; margin-left: 60px; }
.popup-pay .pay-field.input-group .label-text {padding-left: 30px; }
/* .popup-pay .pay-field .category-list {margin: 0; padding-bottom: 15px; } */
.popup-pay .pay-field .category-list .btn-category {min-width: 90px; height: 48px; padding: 0; }
/* 영수증 출력/미출력 */
.popup-pay .pay-field .category-list.receipt {margin: 14px 0; }
.popup-pay .pay-field .category-list.receipt li + li {margin-left: 15px;}
.popup-pay .pay-field .category-list.receipt .btn-category {width: 240px !important; }
.popup-pay .pay-field .category-list.receipt .btn-category.check,
.popup-pay .pay-field .category-list.receipt .btn-category.check:active {background-color: #e8f3ff; border: 1px solid #52a2ff; color: #444a3e; }

.popup-pay .popup-bottom.btn-group {text-align: center; }


/* 신용카드 결제 진행 - pay02 */
#pay02 .category-list .btn-category {width: 120px; }