@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";
}

.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/new/cal_leftb.svg) no-repeat;
}

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

/* 이동 불가(disabled)일 때 이미지 교체 */
.calendar-wrap .ui-datepicker .ui-datepicker-prev.ui-state-disabled span{
  background-image:url(/images/new/cal_lefta.svg);
}
.calendar-wrap .ui-datepicker .ui-datepicker-next.ui-state-disabled span{
  background-image:url(/images/new/cal_reagta.svg);
}

.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:8px 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 !important;
    color: #fff !important;
    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-only1 {
    overflow: hidden;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    position: absolute;
}

/*input {appearance: none;}*/

/* 레이어 */
.layer{position: fixed;top: 0px;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"; }
.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;}
.calendar-wrap{ position:relative; }
.calendar-wrap::before{ content: ""; position: absolute; top: 100px; bottom: 25px; left: 50%; width: 1px; background: #F5F5F5; transform: translateX(-50%); }
.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 20px; justify-content: space-evenly; align-items: center; background-color: #f8f8f8; border-radius: 0 0 20px 20px;}
.acquisition-return>dl{display: flex; flex:0 0 auto; column-gap: 10px}
.acquisition-return dt{font-size: 14px; font-weight: 700; color: #2D2D2D; 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 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"; }
.choose-schedule .btn_comm {
    width:300px;
    height:50px;
    margin: 0 0 0 0;
    font-size: 15px;
    background-color:#ec5050;
    border:0;
    border-radius:10px;
    color: #FFF;
    font-weight: 600;
    cursor:pointer;
}
.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;}  /*토요일 */
td.date-holiday a { color:#ec5050 !important; } /* 공휴일 */

.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: 73px; left: 70px; }
/* .ui-datepicker .ui-datepicker-prev-hover{position: absolute; left: 55px; top: 50px;} */

.ui-datepicker .ui-datepicker-next{position: absolute; top:73px; right:50px;}
/* .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; }



/* 시분선택 시작 */
/* 기존 폭 유지 */
.acquisition-return .form-control{width:120px;}

/* 기존 select는 숨김(로직은 유지) */
#datepicker_popup select[name=shm],
#datepicker_popup select[name=ehm]{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* 커스텀 셀렉트 */
#datepicker_popup .cSelect1{position:relative;width:100%;}
#datepicker_popup .cs-btn1{
  width:100%;
  height:40px;
  border:1px solid #D9D9D9;
  border-radius:10px;
  background:#fff;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
}
#datepicker_popup .cs-txt1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size: 15px;color: #5A5A5A;font-weight: 500;}
#datepicker_popup .cs-arrow1{font-size:12px;line-height:1;transition:transform .15s ease;}

/* 리스트 */
#datepicker_popup .cs-list1{
  display:none;
  position:absolute;
  left:0;
  width:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.10);
  z-index:9999;
  max-height:220px;
  overflow:auto;
  font-size: 15px;
  color: #5A5A5A;
  font-weight: 500;
}

/* 위로 뜨기(dropup) */
#datepicker_popup .cSelect1.is-dropup1 .cs-list1{
  bottom:calc(100% + 8px);
}

#datepicker_popup .cs-opt1{
  width:100%;
  border:0;
  background:#fff;
  text-align:center;
  padding:10px 0;
  cursor:pointer;
}
#datepicker_popup .cs-opt1:hover{background:#f7f7f7;}
#datepicker_popup .cs-opt1.is-on1{font-weight:800;}

#datepicker_popup .cSelect1.is-open1 .cs-list1{display:block;}
#datepicker_popup .cSelect1.is-open1 .cs-arrow1{transform:rotate(180deg);}
/* 시분선택 끝 */

/* 상단 헤더 시작 */
.choose-schedule{
  position:relative;
  width:800px;
  border-radius:20px;
  font-family:"Pretendard";
  background:#fff;
  overflow:hidden; /* 라운드 유지 */
  border:1px solid #111; /* 이미지처럼 테두리 */
}

/* 상단 헤더 */
.cs-head{
  position:absolute;
  left:0; top:0;
  width:100%;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center; /* 타이틀 중앙 */
  z-index:10;
  background:#fff;
}

/* 타이틀 */
.cs-title{
  margin:10px 0 0 0;
  font-size:14px;
  font-weight:600;
  color:#000000;
}

/* 닫기 버튼(모달 내부 우상단) */
.choose-schedule .btn-close{
  position:absolute;
  right:18px;
  top:14px;
  /*width:28px;
  height:28px;*/
  border:0;
  background:transparent;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.choose-schedule .btn-close img{
  width:12px;
  height:12px;
  display:block;
}

/* 달력 영역이 헤더에 가리지 않게 위 패딩 */
.choose-schedule .calendar-wrap{
  padding-top:56px; /* 헤더 높이만큼 */
}
/* 상단 헤더 끝 */

@media (max-width:1024px){
    .acquisition-return{flex-wrap:wrap;row-gap:10px;}
    .acquisition-return > dl:last-child{width:100%;margin-left:0;}
    #sheetDriver .popsheet-inner {right:0 !important;}
    #sheetDriver .popsheet-box {margin-top:100px;}
}

@media screen and (max-width:820px) {
    /* 레이어 */
    .layer { display: block; max-height:100%; }
    /* .choose-schedule { padding-bottom: 150px; overflow: scroll; margin-left:10px; }
    .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: 35px; }
    .ui-datepicker .ui-datepicker-next{ top: 35px; }

    /* 날짜선택 */
    .choose-schedule{ width:400px; margin-left: calc(50% - 220px); }
    .choose-schedule .btn-close {position: absolute; top: 10px; right: 10px; 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;}

    .cs-head {height:0;}
    .cs-title {display:none;}
    .choose-schedule .calendar-wrap{display: flex; width: 90%;  margin: 0 auto; padding:20px 0 150px 0; justify-content: space-between;}
    .choose-schedule .calendar-wrap .calendar{flex:1; text-align: center;}
    .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: 10px 0 20px;}

    .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 60px 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;color: #fff; */width: 100%;border-radius: 0;height: 55px;padding: 0 34px;margin: 0;font-size: 21px;border: 0;position: absolute;right: 0;bottom: 0;left: 0;}

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