.datepicker-popup {position: fixed; bottom: -600px; left: 50%; transform: translateX(-50%); z-index: -1; opacity: 0; width: 100%; max-width: 500px; height: auto; background: var(--white); border-radius: 20px 20px 0 0; overflow: hidden; box-sizing: border-box; transition: all .5s;}
.datepicker-popup.open {z-index: 13; opacity: 1; bottom: 0; transition: all .5s;}
.datepicker-popup .ui-widget.ui-widget-content {width: auto; box-sizing: border-box; padding: 30px 0 0; margin: 0 auto; border: none;}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {border-radius: initial;}
.datepicker-popup .ui-widget-header {border-radius: initial; border: none; background: transparent; font-size: var(--size18); font-weight: 500; line-height: 1.17; letter-spacing: -0.36px; color: var(--black);}
.datepicker-popup .ui-datepicker .ui-datepicker-header {display: flex; align-items: center; justify-content: center; padding: 0; margin-bottom: 31px;}
.datepicker-popup .ui-widget-header span {font-size: var(--size18); font-weight: 500; line-height: 1.17; letter-spacing: -0.36px; color: var(--black);}
.datepicker-popup .ui-helper-clearfix:before, .ui-helper-clearfix:after {display: none;}
.ui-widget-header .ui-icon {display: none !important;}
.ui-datepicker .ui-datepicker-title {order: 2; margin: 0 23px;}
.datepicker-popup .ui-datepicker-year:after {content: '년'; font-size: var(--size18); font-weight: 500; line-height: 1.17; letter-spacing: -0.36px; color: var(--black);}
.ui-datepicker .ui-datepicker-prev {position: initial; display: block; width: 7.2px; height: 12.1px; background: url(./../img/prev.png)no-repeat 50% 50%; background-size: 7.18px 12.5px; order: 1;}
.ui-datepicker .ui-datepicker-next {position: initial; display: block; width: 7.2px; height: 12.1px; background: url(./../img/next.png)no-repeat 50% 50%; background-size: 7.18px 12.5px; order: 3;}
.ui-datepicker table {width: auto; margin: 0 auto; font-size: auto;}
.ui-datepicker th {padding: 0; margin-bottom: 17px; font-size: var(--size11); font-weight: 400; line-height: 1.18; color: var(--black);}
.ui-datepicker td {width: 44px; height: 44px; padding: 0;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; margin: 0; border: none; background: transparent; color: initial; font-size: var(--size15); font-weight: 400; line-height: 1.2; letter-spacing: -0.45px; color: var(--black); border-radius: 100%;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {background: var(--pr2); color: var(--white);}
.ui-datepicker td .ui-state-active {width: 35px; height: 35px; margin: 0 auto; background: var(--pr2); color: var(--white);}

.btn-select {width: 100%; height: auto; padding: 20px 20px 25px; margin-top: 12px; margin-bottom: 15px; border-top: 1px solid var(--grayeb); box-sizing: border-box;}
.btn-select ul {display: flex; align-items: center; gap: 3px;}
.btn-select ul li {cursor: pointer;}
.btn-select ul li .child-box {display: none; padding: 12px; background: var(--white); border-radius: 5px; border: 1px solid var(--black); box-sizing: border-box; font-size: 13px; font-weight: 400; line-height: 1.15; letter-spacing: -0.13px; color: var(--black140); opacity: .3; transition: all .3s;}
.btn-select ul li label {display: flex; align-items: center; justify-content: center; padding: 12px; background: var(--white); border-radius: 5px; border: 1px solid var(--black); box-sizing: border-box; font-size: 13px; font-weight: 400; line-height: 1.15; letter-spacing: -0.13px; color: var(--black140); opacity: .3; transition: all .3s; cursor: pointer;}
.btn-select ul li .child-box:checked ~ label {background: var(--pr2); border: 1px solid var(--pr2); color: var(--white); opacity: 1; transition: all .3s;}
.select-tit {margin: 15px 0; font-size: var(--size12); font-weight: 500; line-height: 1.58; letter-spacing: -0.24px; color: var(--black140);}
.date-submit {display: flex; align-items: center; justify-content: center; width: 100%; height: 55px; margin: 15px 0; border: 1px solid var(--grayeb); border-radius: 3px; background: var(--white); box-sizing: border-box; font-size: var(--size17); font-weight: 600; line-height: 1.18; letter-spacing: -0.17px; color: var(--black);}
.description {font-size: var(--size13); font-weight: 500; line-height: 1.54; letter-spacing: -0.39px; color: var(--pr2); text-align: center;}


/* .datepicker-popup2 */
.datepicker-popup2 {position: fixed; bottom: -600px; left: 50%; transform: translateX(-50%); z-index: -1; opacity: 0; width: 100%; max-width: 500px; height: auto; padding: 50px 20px 23px; background: var(--white); border-radius: 20px 20px 0 0; overflow: hidden; box-sizing: border-box; transition: all .5s;}
.datepicker-popup2.open {z-index: 12; opacity: 1; bottom: 0; transition: all .5s;}
.date-tit_box {padding-bottom: 50px; margin-bottom: 29px; border-bottom: 1px solid var(--grayeb); text-align: center;}
.date-tit_box .date-tit {margin-bottom: 11px; font-size: var(--size24); font-weight: bold; line-height: 1.21; letter-spacing: -0.72px; color: var(--black);}
.date-tit_box .date-sub {font-size: var(--size12); font-weight: 500; line-height: 1.17; letter-spacing: -0.36px; color: var(--black);}

.icon-list {padding-bottom: 35px; margin-bottom: 35px; border-bottom: 1px solid var(--grayeb);}
.icon-list ul {display: flex; justify-content: space-between; width: 223px; height: auto; margin: 0 auto; box-sizing: border-box;}
.icon-list ul li {text-align: center; overflow: hidden;}
.icon-list ul li img {height: auto; margin: 0 auto;}
.icon-list ul li:first-of-type img {width: 43px;}
.datepicker-popup2.open .icon-list ul li:first-of-type img {animation: scale-in-ver-top .5s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
@keyframes scale-in-ver-top {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
}
.icon-list ul li:nth-of-type(2) img {width: 35px;}
.datepicker-popup2.open .icon-list ul li:nth-of-type(2) img {animation: rotate-in-center 1s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
@keyframes rotate-in-center {
  0% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1;
  }
}
.icon-list ul li:last-of-type img {width: 28.5px;}
.datepicker-popup2.open .icon-list ul li:last-of-type img {animation: slide-in-bottom 0.3s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
.icon-list ul li .icon-txt {margin-top: 14px; font-size: var(--size15); font-weight: 600; line-height: 1.2; letter-spacing: -0.45px; color: var(--pr2);}

.confirm-area {display: flex; align-items: center; justify-content: center; margin-top: 35px;}
.confirm-area button {display: flex; align-items: center; justify-content: center; width: 100%; height: 55px; margin-right: 7px; border-radius: 3px; font-size: var(--size17); font-weight: 600; line-height: 1.18; letter-spacing: -0.17px;}
.confirm-area button:last-of-type {margin-right: 0;}