@charset "utf-8";


/* 체크인아웃 */
.area_roomCheckIN{box-sizing: border-box; transition: all .3s; padding:20px; margin-bottom: 40px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #e5e5e5; border-top:2px solid #222;}
.area_roomCheckIN > *{transition: all .3s;}
.area_roomCheckIN ul{display: flex;}
.area_roomCheckIN ul li{display: flex; align-items: center;}
.area_roomCheckIN ul li + li {margin-left: 20px;}
.area_roomCheckIN ul li label{font-size: 13px; margin-right: 8px;}
.area_roomCheckIN ul li .inputBox{position: relative;}
.area_roomCheckIN ul li .inputBox i.icon{width: 20px; height: 20px; opacity: 0.4;  background: url(/images/module/img_calendar.svg) no-repeat 50% 50%; display: block; position: absolute; left: 12px; top: 50%; margin-top: -10px;}
.area_roomCheckIN ul li input{height: 40px; padding-left:40px;}
.area_roomCheckIN button[type="button"]{box-sizing: border-box; border-radius: 2px; display: block; border:1px solid #666; background-color: #666; font-size:13px; width: 100px; height:40px; color:#fff; font-family: 'Noto Serif JP', 'Noto Serif KR', serif;}



/* 체크되었을때 */
.area_calendar.type02 .calendar table td.check_on div{border:1px solid;z-index:10; box-shadow:0 8px 15px rgba(0,0,0,0.10); }

/* 예약대기신청 버튼 */
a.for_wating.apply_btn{font-size: 12px; border-radius: 3px; background-color: #f5f5f5; border:1px solid #e3e3e3; display: block;box-sizing: border-box;padding: 8px 0;color: #555;line-height: 1.5; transition:all 0.3s ease;}
a.for_wating.apply_btn:hover{background:rgba(54,40,39,1); border:1px solid rgba(54,40,39,1); color:#fff !Important;}


/* 예약대기시 팝업 */
.apply_form{background-color: #fff; z-index: 9; border:1px solid #222; max-height: 90vh; box-sizing: border-box; box-shadow:0px 13px 27px 0px rgb(48 48 48 / 48%); max-width:480px; width: 90%; position: fixed; left: 50%; top: 50%; }
.apply_form dl{display: flex; align-items: center; justify-content: space-between; margin: 20px 0;}
.apply_form dt, .apply_formBox strong{font-weight: 700; font-size:16px; box-sizing: border-box; padding: 0 4px}
.apply_formBox strong{display: block; margin-bottom: 8px;}
.apply_formBox{max-height: 60vh; overflow-y: auto;  padding:40px; box-sizing: border-box;}
.apply_formBox h6{font-size: 24px; box-sizing: border-box; padding: 0 4px; position: relative;}
.layer_popup .apply_formBox .btn_cancle{ right: 0;}
.layer_popup .apply_formBox .bar::before, .layer_popup .apply_formBox .bar::after{background-color: #333;}
.apply_formBox .detail ul{display: flex; flex-wrap: wrap;}
.apply_formBox .detail ul li{width: 100%; box-sizing: border-box; margin: 6px 0;  padding: 0 4px; }
.apply_formBox .detail ul li.w50{width: 50%; padding: 0 4px; }
.apply_formBox .detail ul li label{font-size: 13px; display: block;}
.apply_formBox .detail ul li input[type="text"],
.apply_formBox .detail ul li input[type="number"],
.apply_formBox .detail ul li input[type="tel"]{height: 40px; width: 100%; border-radius: 0;}
.apply_formBox .detail ul li input::placeholder{font-size: 14px;}
.apply_formBox .detail ul li select{width: 100%; height: 40px;}
.apply_formBox .detail ul li textarea{width: 100%; height: 100px; resize: none; ;}
.apply_formBox .apply_button{text-align: center; margin-top: 8px;}
.apply_formBox .apply_button button{width: 120px; height: 40px; line-height: 40px; color: #fff; border-radius: 2px;}
.apply_formBox .apply_button button[type="submit"]{background-color:rgba(54,40,39,1);}
.apply_formBox .apply_button button.cancel{background-color:#999}

.layer_popup{position:fixed; visibility:hidden; overflow:hidden; top:0; left:0; z-index:99; width:100%; height:100%;}
.layer_popup.active{visibility:visible;}
.layer_popup .cancle{position:fixed; opacity:0; visibility:hidden; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.65); transition:all 0.3s ease 0s;}
.layer_popup.active .cancle{opacity:1; visibility:visible;}
.layer_popup .pop_inner{position:fixed;top:50%;left:50%;z-index:9;box-shadow:36px 39px 47px 0px rgb(48 48 48 / 54%);width: 80%;max-width: 1000px;}
.layer_popup a.btn_cancle{position:absolute; top:-3px; right:-56px;}
.layer_popup .nav_pop{opacity:0;transition:none;width: 100%;}
.layer_popup .nav_pop a{display:block;transition:all 0.3s ease 0s;position: absolute;top: 46%;}
.layer_popup.active .nav_pop{opacity:1; transition:all 0.2s ease 0s;}
.layer_popup .nav_pop a:hover{background:#fff; color:#333; border-color:#fff;}
.layer_popup a.arrow.prev{margin-bottom:10px;left: 30px;}
.layer_popup .nav_pop span{display:block;width:45px;margin-top:20px;font-size: 15px;color:#fff;text-align:center;position: absolute;left: 50%;bottom: 30px;background: rgba(0,0,0,0.4);border-radius: 100px;padding: 4px 20px;margin-left: -42px;}
.layer_popup .nav_pop span em{opacity:0.6;}
.layer_popup .btn_cancle{display:flex;justify-content:center;align-items:center;position:fixed;position:relative;top:0px;top:0;right:0px;right:0;z-index:10;width:30px;height:30px;cursor:pointer;transition: all 0.3s ease-in-out;opacity: 0;visibility: hidden;}
.layer_popup.active .btn_cancle{opacity:1; visibility:visible;}
.layer_popup .bar::before{content:""; position:absolute; bottom:-1px; left:0; Transform:rotate(-45deg);}
.layer_popup .bar::after{content:""; position:absolute; top:0px; left:0; transform:rotate(45deg);}
.layer_popup .bar::before,
.layer_popup .bar::after{width:100%; height:2px; background-color:#fff; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out;}
.layer_popup .bar{display:block; position:absolute; top:50%; left:50%; width:27px; height:1px; margin-left:-8.2px; background-color:transparent; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out;}
.layer_popup .nav_pop a img{width:auto; height:31px;}
.layer_popup .nav_pop a.next{right:48px;}
.layer_popup .nav_pop a:after{content:""; position:absolute; top:0; left:0; width:17px; height:30px; background:url(../../images/content/arr_pop.svg) no-repeat 50% 50% / cover;}
.layer_popup .nav_pop a.next:after{transform:rotate(180deg); -webkit-transform:rotate(180deg);}

.s4_1 .box_color{position:absolute; left:0;}

.area_calendar .note{text-align: right;margin: -35px 0 10px;}