/* ======== 시간 선택 모달 ======== */
.modal-inner.default-mo {width: 50vw;}
.default-mo p {text-align: center; color: #777;}
.default-mo .modal-btn {justify-content: center;}
.default-mo .modal-btn button {width: 100%; padding: 14px 0;}

/* ======== 모달 ======== */
.modal-wrap {background-color: rgba(0, 0, 0, .4); position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 999;}
.modal-inner {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 25px; border-radius: 10px; background-color: #fff;}
.default-mo .modal-tit {margin-bottom: 12px;}
.modal-tit {font-size: 24px; font-weight: 600; color: #333; margin-bottom: 20px; text-align: center;}
.sign-modal {width: 70vw !important;}
.modal-btn {display: flex; align-items: center; justify-content: flex-end; gap: 25px; margin-top: 20px;}
button {font-family: inherit;}
.mo-col2 {color: #434343; font-size: 16px;}
.mo-col1 {padding: 9px 25px; border-radius: 5px; background-color: #295bcc; color: #fff; font-size: 16px;}
.sign-modal .modal-con {width: 100%; height: 235px; border-radius: 8px; border: 1px solid #ddd;}
.modal-inner.time-modal {width: 40vw;}

.modal-inner {width: 60vw;}
.term-modal .modal-con {border-radius: 5px; border: 1px solid #ddd; height: 300px; overflow-y: auto; padding: 10px;}
.term-modal .modal-btn {justify-content: center;}


/* ======== 시간 선택 모달 ======== */

.time-con-wrap {display: flex; height: 135px; overflow: hidden; width: 70%; margin: 25px auto; width: 200px; position: relative;}
.bar-wrap {display: flex; justify-content: space-around;}
.bar-wrap > div {width: 30%; height: 45px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; position: absolute; }
.bar-wrap > div:first-child {left: 0; top: 50%; transform: translateY(-50%);}
.bar-wrap > div:nth-child(2) {left: 50%; top: 50%; transform: translate(-50%, -50%);}
.bar-wrap > div:nth-child(3) {right: 0; top: 50%; transform: translateY(-50%);}

.time-con-wrap .swiper {height: 135px;}
.modal-wrap .swiper-container {
  width: 50%;
  min-height: 135px;
  max-height: 135px;
  float: left;
}

.modal-wrap .swiper-slide {
  text-align: center;
  font-size: 16px;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  opacity: 0.25;
  transition: opacity 0.3s ease;
  cursor: default;
  font-weight: bold;
  -webkit-tap-highlight-color: transparent;
  display: flex !important; align-items: center; justify-content: center;
  margin-bottom: 0;
}

.modal-wrap .swiper-slide-prev,
.modal-wrap .swiper-slide-next {
  cursor: pointer;
}

.modal-wrap .swiper-slide-active {
  font-size: 18px;
  opacity: 1;
  color: #295bcc;
  font-weight: 700;
}
.modal-wrap .swiper-slide{
  height: 45px !important;
}

.modal-tit {position: relative;}
.modal-tit .reset {position: absolute; font-size: 16px; top: 50%; right: 0; transform: translateY(-50%); display: flex; align-items: center; gap: 5px; cursor: pointer;}
.modal-tit .reset em {background: url(../img/reset.png) no-repeat center/cover; width: 15px; height: 15px;}

.picker-opened>.picker-dialog {top: 50%; left: 50% !important; right: auto; transform: translate(-50%,-50%); width: 40vw; height: fit-content; border-radius: 10px; padding: 20px;}
.picker-cell::before {content: none !important;}
.picker-cell+.picker-cell {border: none !important;}
.picker-cell__control {display: none;}
.picker-close {display: none;}
.picker-title {text-align: center; font-size: 22px !important; font-weight: 600 !important; color: #333; padding: 0 !important;}
.picker-header, .picker-footer {border: none !important;}
.picker-body {padding: 30px 0;}
.picker-grid {display: flex !important; justify-content: center; gap: 21px;}
.picker-grid > div {width: 75px; }
.picker-cell {position: relative !important;}
.picker-cell::after {content: ""; display: block; width: 60px !important; height: 46px !important; border-top: 1px solid #ddd !important; border-bottom: 1px solid #ddd !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; margin-top: 0 !important; background-image: none !important;}
.picker-grid > div::after {content: ""; display: block; width: fit-content; height: 48px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.picker-cancel, .picker-confirm {padding: 9px 28px !important; width: fit-content !important; border-radius: 5px !important;}
.picker-confirm {background-color: #295bcc !important; color: #fff !important;}
.picker-fixed .picker-footer {display: flex !important; justify-content: flex-end;}
.picker-item {color: #bababa !important;}
.picker-picked {color: #295bcc !important; font-weight: 700; padding: 11px 0 !important; font-size: 18px !important; height: 48px !important; display: flex; align-items: center; justify-content: center;}
.picker-months, .picker-days {width: 60px !important;}
.picker-cell__header {display: none !important;}
.picker-item {padding: .25rem 0 !important;}



/* ======== 800px ======== */
@media screen and (max-width: 800px) {
  .picker-opened>.picker-dialog {width: 60vw;}
  .modal-inner.time-modal {width: 50vw;}
}