@charset "utf-8";

.calendar-wrap .ui-widget-content{
    padding:0;
    border:0;
    width: 730px !important;
    display: flex !important;
    justify-content: space-between;
    column-gap: 64px;
    height:330px;
    font-family: "Pretendard-Regular", 'NBG', '나눔 바른 고딕', NanumGothic, AppleSDGothicNeo-Regular, "Nanum Gothic", "Nanum Square", '맑은 고딕', 'Malgun Gothic', "dotum", "Poppins", sans-serif;
}

.calendar-wrap .ui-widget-content:before, 
.calendar-wrap .ui-widget-content:after {
    content: none;
}

.calendar-wrap .ui-widget-content .ui-datepicker-row-break{
    display: none;
}

.calendar-wrap .ui-datepicker-multi .ui-datepicker-group{
    margin-top:33px;
}

.calendar-wrap .ui-datepicker-prev, .calendar-wrap .ui-datepicker-next{
    display: inline-block;
    /* width: 33px;
    height:33px; */
}

.calendar-wrap .ui-datepicker .ui-datepicker-prev span, .calendar-wrap .ui-datepicker .ui-datepicker-next span{
    display: inline-block;
    position:initial;
    cursor: pointer;
    margin:0;
}
.calendar-wrap .ui-datepicker .ui-datepicker-prev span{
    background: url(/images/bt_pre2.png) no-repeat;
}

.calendar-wrap .ui-datepicker .ui-datepicker-next span{
    background: url(/images/bt_next2.png) no-repeat;
}

.calendar-wrap .ui-datepicker .ui-datepicker-header{
    padding:0;
    height:auto;
}

.calendar-wrap .ui-widget-header .ui-datepicker-title,
.calendar-wrap .ui-widget-header .ui-datepicker-year, 
.calendar-wrap .ui-widget-header .ui-datepicker-month{
    font-size: 20px;
    text-align: center;
    color: #000;
    font-weight:bold;
    line-height: 1.5;
    margin:0;
}

.calendar-wrap .ui-datepicker-multi .ui-datepicker-group table{
    width: 100%;
    margin:21px 0 0 0 !important;
}

.calendar-wrap .calendar td,
.calendar-wrap .calendar td > * {
    font-size: 15px;
    border: 0 !important;
    padding: 0;
}
.calendar-wrap .calendar th, 
.calendar-wrap .calendar td{
    height: 40px;
    width: 48px;
    text-align: center;
}

.calendar-wrap .calendar td > * {
    height: 30px;
    line-height: 30px;
}

.calendar-wrap .calendar td > a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    width: 40px;
    height:40px;
    position: relative;
    margin: 0 auto;
}

td.datepicker-selected.datepicker-start, td.datepicker-selected.datepicker-end
{
    position: relative;
}

.calendar-wrap .calendar td.datepicker-selected.datepicker-start a, 
.calendar-wrap .calendar td.datepicker-selected.datepicker-end a{
    width: 40px;
    height: 40px;
    background-color: #ec5050;
    color: #fff;
    border-radius:50%;
}
.calendar-wrap .calendar td.datepicker-selected.datepicker-start a:before{
    content: "";
    left: 20px;
    right: -4px;
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgb(236 80 80 / 10%);
}
.calendar-wrap .calendar td.datepicker-selected.datepicker-end a:before{
    content: "";
    left: -4px;
    right: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgb(236 80 80 / 10%);
}
.datepicker-start.datepicker-end a:before {background: rgba(255, 255, 255, 0.1) !important;}

.calendar-wrap .calendar td.datepicker-selected-term a:before{
    content: "";
    left: -4px;
    right: -4px;
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgb(236 80 80 / 10%);
}

.sr-only {
    overflow: hidden;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    position: absolute;
}

input {appearance: none;}

/* 레이어 */
.layer{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 1000;display: flex;max-height:inherit;background-color: rgba(0,0,0, .4);align-items: center;justify-content: center;}
.layer>*{width: 1100px; max-height: 90%; background-color: #fff;}
.layer-header{display: flex; height: 76px; padding:0 20px 0 30px; align-items: center; justify-content: space-between; background-color: #37b7b5; font-size: 21px; color: #fff;}

.btn-close { --bs-btn-close-bg: unset; }
.btn-close{overflow:hidden; position: relative; width: 30px; height: 30px; background-color: transparent; color: transparent; border: 0; cursor: pointer;}
.btn-close:before,
.btn-close:after{content:''; position: absolute; top: 50%; left: 50%; width: 100%; height: 2px; background-color: #fff; margin-top: -1px; transform-origin: center; transform:translateX(-50%)}
.btn-close:before{transform:translateX(-50%) rotate(45deg)}
.btn-close:after{transform:translateX(-50%) rotate(-45deg)}

.btn-up{overflow:hidden; position: relative; width: 30px; height: 30px; background-color: transparent; color: transparent; border: 0; cursor: pointer;}
.btn-up:before,
.btn-up:after{content:''; position: absolute; top: 50%; left: 50%; width: 60%; height: 2px; background-color: #fff; margin-top: -1px; transform-origin: center; transform:translateX(-50%)}
.btn-up:before{transform: translateX(-10%) rotate(45deg);}
.btn-up:after{transform: translateX(-80%) rotate(-45deg);}

.btn-down{overflow:hidden; position: relative; width: 30px; height: 30px; background-color: transparent; color: transparent; border: 0; cursor: pointer;}
.btn-down:before,
.btn-down:after{content:''; position: absolute; top: 50%; left: 50%; width: 60%; height: 2px; background-color: #fff; margin-top: -1px; transform-origin: center; transform:translateX(-50%)}
.btn-down:before{transform: translateX(-10%) rotate(-45deg);}
.btn-down:after{transform: translateX(-80%) rotate(45deg);}

.layer-contents::-webkit-scrollbar{width:5px;}
.layer-contents::-webkit-scrollbar-track{background-color: transparent;}
.layer-contents::-webkit-scrollbar-thumb{border-radius:3px; background-color: rgba(0,0,0, .3);}
.layer-btns{display: flex; column-gap: 10px;}
.layer-btns>*{flex:1; height: 46px; font-size: 19px;}

.rent-layer > div {position: relative; box-sizing: border-box;}
.rent-layer-header {margin: 32px 32px 24px 32px; border-bottom: 1px solid #ebebeb;}
.rent-layer-header > p {font-size: 21px; font-weight: bold; padding-bottom: 20px;}
.rent-layer-header .btn-close{width: 26px; height: 26px; position: absolute; top: 36px; right: 30px;}
.rent-layer-header .btn-close:before,
.rent-layer-header .btn-close:after{background-color: #979797;}
.rent-layer-body {box-sizing: border-box; padding: 0 32px 32px;}


/* 날짜선택 */
.choose-schedule{position: relative; width:856px; border-radius: 20px; font-family: "Pretendard-Regular"; }
.choose-schedule .btn-close {position: absolute; top: -30px; right: -30px; width: 30px; height: 30px; border: 1px solid #fff; border-radius: 50%;} */

.choose-schedule .btn-close:before,
.choose-schedule .btn-close:after{width: 70%; background-color: #fff; height: 1px;}
.calendar-navi{display: flex; width: 730px; margin: 0 auto; justify-content: space-between;}
.calendar-navi>*{position: relative; width: 33px; height: 33px; background: url(./img/icon.png) no-repeat;}
.calendar-navi .btn-prev{background-position: 100% -108px;}
.calendar-navi .btn-next{background-position: 100% -75px;}
.choose-schedule .calendar-wrap{display: flex; width: 730px; margin: 0 auto; padding: 40px 0 14px 0; justify-content: space-between;}
.choose-schedule .calendar-wrap .calendar{flex:1; text-align: center;}
.calendar .year-month{font-size: 18px; text-align: center; color: #000;}
.calendar table{width:100%; border-spacing:0; margin-top: 21px; border-collapse: collapse; table-layout: fixed;}
.calendar th, .calendar td{height: 44px; font-size: 15px; border: 0; padding: 0;}
.calendar th{ font-size: 14px; color: #000; border-bottom:1px solid #f5f5f5; }
.calendar td>*{width: 100%; height: 30px;}
.calendar td>*.selected{background-color: rgb(139 123 117 / 10%);}
.calendar td>*.selected.start,
.calendar td>*.selected.end{width:30px; background-color: #7c6246; color: #fff;}
.calendar td>*.selected.start{margin-left: calc(100% - 30px); border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
.calendar td>*.selected.end{margin-right: calc(100% - 30px); border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
.calendar :disabled{color: #c4c4c4;}
.acquisition-return{display: flex; height:100px; padding:20px 50px; justify-content: space-evenly; background-color: #f8f8f8; border-radius: 0 0 20px 20px;}
.acquisition-return>dl{display: flex; flex:1 1 auto; column-gap: 10px}
.acquisition-return dt{font-size: 14px; font-weight: bold; color: #000; line-height:40px; text-align:center; }
.acquisition-return #dp_date {width:180px;height:40px;border:0;background:#ddd;border-radius:10px;margin-right:40px;font-size:16px;line-height:40px;text-align:center;}
.acquisition-return .form-control{width:160px;}
.acquisition-return p{font-size: 12px; margin-top: 7px; color: #979797;}
.acquisition-return select { border:1px solid #ccc; border-radius:10px; width:120px; height:40px; padding:5px 10px; font-size:16px; font-family: "Pretendard-Regular"; }
.choose-schedule .btn_comm {position:absolute; width:240px; height:50px; left:50%; margin:-65px 0 0 -120px; font-size: 16px; background-color:#ec5050; border:0; border-radius:10px; color: #FFF; } 
.choose-schedule .calendar-wrap .ui-widget-content {justify-content: center;}
.choose-schedule .calendar-wrap .calendar .ui-datepicker-multi .ui-datepicker-group{margin-top: 10px;}

/* 달력 팝업 체크인/아웃 문구 적용 */
/* .layer.rc-cal .calendar-wrap .calendar td.datepicker-selected.datepicker-start a::after, 
.layer.rc-cal .calendar-wrap .calendar td.datepicker-selected.datepicker-end a::after{position: absolute; top: 22px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #7c6246; word-break: keep-all; z-index: 10;}
.layer.rc-cal .calendar-wrap .calendar td.datepicker-selected.datepicker-start a::after { content: '대여';}
.layer.rc-cal .calendar-wrap .calendar td.datepicker-selected.datepicker-end a::after {content: '반납';} */
/* .layer.rc-cal .calendar-wrap .calendar td.ui-datepicker-today a {background:#fff; color:#666 !important; } */
.layer.rc-cal .calendar-wrap .calendar td.ui-datepicker-today a::after { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #bbb; word-break: keep-all; z-index: 10; content: 'today'; }


/* 캘린더 datepicker 스킨 재정의 */
.ui-widget-content{ border:#ebebeb 1px solid; padding:10px;}
.ui-widget-header{ border:none; background:none; height:32px; }
.ui-datepicker .ui-datepicker-title{ margin:10px 2.3em;}

.ui-widget-header .ui-datepicker-year,.ui-widget-header .ui-datepicker-month{ font-size:16px;}
.ui-state-default, .ui-widget-content .ui-state-default{ background:#fff; border:#ebebeb 1px solid; text-align:center; font-size:15px;}

/* .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active{ background:#ec5050; color:#fff !important; border-radius:50%; } */
.ui-state-disabled{ color:#e0e0e0}
.ui-datepicker-calendar { margin-top:10px !important;}
.ui-datepicker-calendar th{ color:#808080; font-weight:normal;}

td.ui-datepicker-week-end:nth-child(1) a{ color:#ff3838;} /*일요일 */
td.ui-datepicker-week-end:nth-child(7) a {   color:#6cc9f1;}  /*토요일 */

.ui-icon, .ui-widget-content .ui-icon {   background-image: url("../img/btn_navi_total.gif") ;}
.ui-icon-circle-triangle-w{background-position:0 0;}
.ui-icon-circle-triangle-e{background-position:-48px 0; right:10px;}
.ui-icon { width:32px; height:32px; text-indent: -99999px; overflow: hidden;}
.ui-state-hover, ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover{ border:none; background:none; }
.ui-datepicker .ui-datepicker-prev{position: absolute; top: 55px; left: 75px; }
/* .ui-datepicker .ui-datepicker-prev-hover{position: absolute; left: 55px; top: 50px;} */

.ui-datepicker .ui-datepicker-next{position: absolute; top:55px; right:60px;}
/* .ui-datepicker .ui-datepicker-next-hover{position: absolute; right:55px; top: 50px;} */
.ui-datepicker .ui-datepicker-next span{left:-5%;}

#filter_slider.ui-widget-content{ padding:0px;} 
#ui-datepicker-div{ z-index: 999999 !important; }

.template{ display: none !important; }

@media screen and (max-width:820px) {

    /* 레이어 */
    .layer { display: block; max-height:100%; }
    .choose-schedule { max-height: 100%; padding-bottom: 150px; overflow: scroll; }
    .choose-schedule .calendar-wrap { padding: 0 !important;}

    .layer .cal-header-mo { width:100%; height: 40px; padding-top: 10px; background: #7c6246; color:#FFF; font-size : 1.1em; font-weight: 600; text-align: center;}
    .layer .cal-btn-mo { position: absolute; right:5px; top:5px; }

    .calendar-wrap .ui-widget-content{
        width: 100% !important;
        height: 100%;
    }

    .calendar-wrap .calendar td.datepicker-selected-term a:before {
        content: "";
        left: -15px;
        right: -14px;
    }

    .ui-datepicker .ui-datepicker-prev{ top: 10px; } 
    .ui-datepicker .ui-datepicker-next{ top: 10px; } 

    /* 날짜선택 */
    .choose-schedule{position: relative; width:100%; height:100%; border-radius: 0;}
    .choose-schedule .btn-close {position: absolute; top: 0; right: 0; width: 30px; height: 30px; border: 1px solid #fff; border-radius: 50%;}
    .choose-schedule .btn-close:before,
    .choose-schedule .btn-close:after{width: 70%; background-color: #fff; height: 1px;}
    .calendar-navi{display: flex; width: 90%; margin: 0 auto; justify-content: space-between;}
    .calendar-navi>*{position: relative; width: 33px; height: 33px; background: url(./img/icon.png) no-repeat;}
    .calendar-navi .btn-prev{background-position: 100% -108px;}
    .calendar-navi .btn-next{background-position: 100% -75px;}
    .choose-schedule .calendar-wrap{display: flex; width: 100%; margin: 0 auto; padding: 40px 0 14px 0; justify-content: space-between;}
    .choose-schedule .calendar-wrap .calendar{flex:1; text-align: center;}
    .calendar .year-month{font-size: 18px; text-align: center; color: #000;}
    .calendar table{width:90%; margin-top: 21px; border-collapse: collapse; table-layout: fixed;}
    .calendar th, .calendar td{height: 44px; font-size: 14px; border: 0; padding: 0;}
    .calendar th{ background-color: #fafafa; color: #000; }
    .calendar td>*{width: 100%; height: 30px;}
    .calendar td>*.selected{background-color: rgb(139 123 117 / 10%); }
    .calendar td>*.selected.start,
    .calendar td>*.selected.end{width:30px; background-color: #7c6246; color: #fff;}
    .calendar td>*.selected.start{margin-left: calc(100% - 30px); border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
    .calendar td>*.selected.end{margin-right: calc(100% - 30px); border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
    .calendar :disabled{color: #c4c4c4;}
    .acquisition-mo-return{ position: absolute; right: 0; bottom:0; left: 0;width: 100%; background-color: #FFF; border-top: 1px solid #ebe3d9; }
    .acquisition-mo-return .hm { display: flex; padding-bottom: 60px; }
    .acquisition-mo-return .hm dl { display: table-cell; min-width: 50%; text-align:left; padding: 8px 18px; font-size: 13px; color: var(--color-lightgray)}
    .acquisition-mo-return .hm select { border: 0; width:100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('../img/ico_arr_d.svg') no-repeat 100% 50% #fff; }
    .acquisition-mo-return .btn_comm {
        background-color: #7c6246;
        width: 100%;
        border-radius: 0;
        height: 55px;
        padding: 0 34px;
        margin: 0;
        font-size: 21px;
        color: #fff;
        border: 0;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .acquisition-return { position: absolute; right: 0; bottom:0; left: 0;width: 100%; background-color: #FFF; border-top: 1px solid #ebe3d9;  padding: 0 20px 80px 20px;}
    .acquisition-return>dl { display: table-cell !important; }
    .acquisition-return .hm { display: flex; padding-bottom: 60px; }
    .acquisition-return .hm dl { min-width: 50%; text-align:left; padding: 8px 18px; font-size: 13px; color: var(--color-lightgray)}
    .acquisition-return .hm select { border: 0; width:100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('../img/ico_arr_d.svg') no-repeat 100% 50% #fff; }
    .acquisition-return .btn_comm {
        background-color: #7c6246;
        width: 100%;
        border-radius: 0;
        height: 55px;
        padding: 0 34px;
        margin: 0;
        font-size: 21px;
        color: #fff;
        border: 0;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .choose-schedule .calendar-wrap .ui-widget-content {flex-direction: column; justify-content: center;}
    .choose-schedule .calendar-wrap .calendar .ui-datepicker-multi .ui-datepicker-group{margin-top: 10px;}

    .bi-chevron-left::before {
        font-weight: 800 !important;
        font-size : 1.2em;
    }
}