.calendar-wrap .month_list_wrap{width: 100%; background-color:#EFEFEF; margin-bottom:30px; border-radius: 20px; overflow: hidden; display: flex;} 
.month_list_wrap .month_title{width: 193px;  font-size: var(--ft--22); font-weight: 700;  text-align: center; padding: 35px 20px 30px; color:#fff; background-color: #393939; }
.month_list_wrap  .month_input_box{width: calc(100% - 193px); height: auto; padding:20px 20px; display: flex; gap: 50px; justify-content: flex-start; align-items: center;}

.month_list_wrap .month_list{display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;}
.month_list .month_item a{width: 60px; height: 50px; background-color: #fff; font-family:'Pretendard', sans-serif; font-size: var(--ft--20); border-radius: 10px; display: flex; justify-content: center; align-items: center; color:#333;}
.month_list .month_item a.on{ background-color: #F5C728; position: relative; font-weight: 700}

.month_list .month_item a.on::after{
    content:'';
    display: inline-block;
    width: 16px;
    height: 9px;
    background: url("../images/sub/calendarIcon02.png") center no-repeat;
    background-size: 100%;
    position: absolute;
    left:50%;
    bottom:-8px;
    transform: translateX(-50%);
}

.calendar-wrap .box_wrap{display: flex; gap: 30px; justify-content: center; align-items: stretch; flex-wrap: wrap;}
.calendar-wrap .box_wrap >div{box-shadow: 0px 20px 50px 0px rgba(197, 197, 197, 0.28); border-radius: 40px; margin-bottom:20px; overflow: hidden;
}

#calendar{
    width: 680px;
    background-color: #fff;
    padding:40px 45px;
}
.dateTit{font-size: var(--ft--25); font-weight: 700; text-align: center; margin-bottom:45px;}

#weekday,#dates{overflow: hidden;}
#weekday >li{width: calc(100% / 7); font-size: var(--ft--20); font-weight: 700; margin-bottom:40px; float:left; text-align: center; text-transform: capitalize;}
#dates >li{
    width: calc(100% / 7);
    height: 56px;
    float:left;
    font-size:1.8rem;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin:5px 0;
}
#dates >li button{width: 50px; height: 56px; line-height: 30px; border-radius: 10px;}
.calendar_table td{text-align:center; height:56px}
.calendar_table td button {
    position: relative;
    width: 35px;
    height: 80%;
    border-radius: 15px;
    box-sizing: border-box;
    background-color: #747474; color:#fff;
}
/* 예약가능 */
/* 선택일자 */
.calendar_table td button.active{
    background-color: #f5c728;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

.calendar_label_list{width: 100%; display: flex;  align-items: center; gap: 30px; padding-left:188px; font-family: 'Pretendard', sans-serif; font-size:var(--ft--20); font-weight: 700;}
.calendar_label_list li{position: relative; padding-left: 34px; line-height: 32px;}
.calendar_label_list li::before{
    content:"";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 32px;
    border-radius: 10px;
}

.calendar_label_list li:nth-child(1)::before{background-color:#747474;}
.calendar_label_list li:nth-child(2)::before{
    background-color:#f5c728;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center center;
}

/* 이용시간선택 */
.rsrvt_time_list{
    width: calc(100% - 710px);
    background:rgb(255,222,108);
    background: linear-gradient(146deg, rgba(255,222,108,1) 0%, rgba(244,197,32,1) 100%);
    padding:30px 20px 20px;
}
.rsrvt_time_list .box{height: calc(100% - 75px); background-color:#fff; border-radius: 30px; padding:45px 40px;}
.rsrvt_time_list  h6{font-size: var(--ft--25); font-weight: 700; padding-bottom:20px; padding-left:30px; position: relative;}
.rsrvt_time_list  h6::before{
    content:'';
    display: inline-block;
    width: 23px;
    height: 23px;
    background-image:url("../images/sub/calendarIcon01.png");
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: top;
    position: absolute;
    left:0;
}

.rsrvt_time_list .time_list table{width: 100%; font-family: 'Pretendard', sans-serif; line-height: 1.5; font-size: var(--ft--22)}
.rsrvt_time_list .time_list th{border-top:2px solid #333; border-bottom:1px solid #E5E5E5; font-weight: 700;}
.rsrvt_time_list .time_list td{border-bottom:1px solid #E5E5E5; font-weight: 400; }

.rsrvt_time_list .time_list th,.rsrvt_time_list .time_list td{padding:14px 30px 10px; text-align: center;}
.rsrvt_time_list .time_list .p-form-radio{text-align: left; }
.rsrvt_time_list .time_list .form-check-input ~label{color:#333;}

@media screen and (max-width: 1400px) {
    .calendar-wrap .box_wrap{flex-direction: column;}
    .calendar-wrap .box_wrap >div{width: 100%;}
    #calendar{width: 100%;}
    .calendar_label_list{ justify-content: center; padding-left:0;}
}
@media screen and (max-width: 760px) {
    .month_list_wrap .month_title{display: none; }
    .month_list_wrap .month_input_box{width: 100%; flex-direction: column; gap: 35px;}
    .dateTit {margin-bottom:20px;}

}
@media screen and (max-width: 680px) {
    #calendar{    padding: 30px 25px;}
    .rsrvt_time_list .box{    padding: 20px 20px;}
    .rsrvt_time_list .time_list th, .rsrvt_time_list .time_list td {    padding: 14px 10px 10px;}
}