@charset "utf-8";

:root {
    --blue: #6997ED;
}

/* component */
table.vertic-table tbody tr th { color: var(--blue); }
table.vertic-table tbody tr td { font-size: 1.5rem; }
table.vertic-table tbody tr td.add-data {font-size: 1.3rem;}
.form .school-wrap .depth02 { width: 150px; max-width: calc(50% - 7px);}
.noti-txt { font-size: 1.4rem; color: #999; margin-top: 5px; line-height: 1.5;}
.noti-txt.align-right { text-align: right; }


/* banner */
.banner-container .banner-wrap .banner { background: url(../../../img/sub/sick-child/bn_bg.png) no-repeat center 100%; background-size: cover;}
.banner-container .banner-wrap .banner .banner-area .bn-title { color: #FEF081; }
.banner-container .banner-wrap .banner .banner-area .bn-title h1 {text-shadow: 3.632px 6.053px 0 #93A6D0; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #889BC5;}


/* 센터 정보 */
.body-container .content-background-wrap .content-background { padding-top: 60px;}
.content-tab-area { padding-top: 60px; border-bottom: 2px solid var(--blue);}
.content-tab-area ul { width: 1200px; margin: 0 auto; max-width: 100%; display: flex; flex-wrap: wrap; }
.content-tab-area ul li { flex: 1; background-color: #ECF0EE; }
.content-tab-area ul li a { font-size: 1.5rem; font-weight: 600; color: #888; display: block; padding: 20px 0; text-align: center; }
.content-tab-area ul li.active { background-color: var(--blue); }
.content-tab-area ul li.active a { color: #fff; }

.center-detail-info-background {background: #F1F5F7;}
.center-detail-info .check-notice { text-align: right; margin-top: 10px;}
.center-detail-info .title-wrap h2 { color: var(--blue); }
.more-info h3 { color: var(--blue);}
table.notice-table tr th { background: var(--blue); }
.notice-tab ul li.notice-on a { background: var(--blue); border-color: var(--blue); }
.notice-tab ul:after { background: var(--blue); }

/* 예약 현황 UI 스타일 */
.reservation-status { display: inline-block; width: calc(100% - 27px);}
.reservation-status .service-tit { font-size: 1.4rem; font-weight: 600; color: #5e5e5e; padding-bottom: 7px;}
.reservation-status .service-category { display: flex; flex-direction: column; gap: 10px;}
.reservation-status .service-box .time-slot-wrap { background: #F1F5F7; border-radius: 5px; padding: 10px;}
.reservation-status .time-slot { margin-bottom: 8px;}
.reservation-status .time-slot:last-child { margin-bottom: 0;}
.reservation-status .time-info { display: flex; gap: 5px; flex-wrap: wrap; font-size: 1.3rem;}
.reservation-status .time { color: #666; font-weight: 500; }
.reservation-status .count { font-weight: 600; }
.reservation-status .count.orange { color: #FB9229;}
.reservation-status .capacity { color: #666;}
.reservation-status .status { font-weight: 600; }
.reservation-status .status.available { color: #30B64D; }
.reservation-status .status.unavailable { color: #B63030; }
.center-detail-info-wrap .reservation-status { width: 100%; padding-top: 10px;}
.center-detail-info-wrap .reservation-status .service-tit { font-size: 1.6rem; }
.center-detail-info-wrap .reservation-status .time-info { font-size: 1.4rem; }
.center-detail-info-wrap .reservation-status .service-category { flex-direction: row; }
.center-detail-info-wrap .reservation-status .service-category .service-box { flex: 1; }
.center-detail-info-wrap .reservation-status .service-category .service-box .apply-btn { width: 100%; font-size: 1.4rem; margin-top: 10px; color: #fff; background: #143066; font-weight: 600; border: 0; border-radius: 5px; padding: 10px 0; box-shadow: 5px 5px 0px #D4DAEA; }

input[type=radio]:not(old) + label { width: auto; }

@media (max-width: 768px) {
    .reservation-status .time-info { font-size: 1.2rem; }
    .reservation-status .service-tit { font-size: 1.2rem;}
}

@media (max-width: 700px) {
    .center-detail-info-wrap .reservation-status .service-category { flex-direction: column; gap: 20px; }
    .center-detail-info-wrap .reservation-status .service-tit { font-size: 1.3rem; }
    .center-detail-info-wrap .reservation-status .time-info { font-size: 1.3rem; }
    .center-detail-info-wrap .reservation-status .service-category .service-box .apply-btn { font-size: 1.3rem; margin-top: 5px;}
}

@media (max-width: 500px) {
    .btn-wrap.step-btn { display: flex; gap: 10px;}
    .btn-wrap.step-btn > div { flex: 1; }
}