/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* 서브 컨텐츠 공통영역 */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* 서브페이지 레이아웃 공통 및 페이지명 영역 */
.sec-sub {position: relative; float: left; width: 100%; }
.subpage-common {float: left; width: 100%; margin-top: 0; padding-top: calc(var(--header-h, 73px) + 2rem);}
.subpage-common .inner {margin: 0 auto; width: 100%; max-width: 800px;}
.page-common {width: 100%; margin-bottom: 5rem;} /* 컨텐츠별 공통 여백 */

.principle-note {width: 100%; text-align: center; margin-top: 6rem;}
.principle-note .tit {position: relative; z-index: 2; display: inline-block; width: 37.6rem; height: 7rem; font-family: "s-core-dream-bold", sans-serif; transform: rotate(-0.04deg); font-weight: normal; font-size: 3.2rem; color: #fff; letter-spacing: -0.06rem; line-height: 7.2rem; background-color: #b9978b; border-radius: 5.5rem;}
.principle-note .note-list {position: relative; z-index: 1; display: inline-block; width: 100%; padding: 3rem 3rem 3rem; margin-top: -3.4rem; background-color: #fff; border: 3px solid #e4d3cd; border-radius: 3rem;}
.principle-note .note-list ul {width: 100%; text-align: left;}
.principle-note .note-list ul li {padding-left: 2rem; margin-bottom: 1.5rem; font-family: "s-core-dream-medium", sans-serif; transform: rotate(-0.04deg); font-size: 2rem; color: #252525; line-height: 2.8rem; letter-spacing: -0.1rem; word-break: keep-all;}
.principle-note .note-list ul li:last-child {margin-bottom: 1rem;}

/* 예약 */
.reservation-wrap {width: 100%;}
.reservation-note {margin-top: 0;}
.reservation-note .tit {width: auto; padding: 0 5rem;}
.reservation-note .note-list {padding: 6rem 2rem 2rem;}

.calendar-wrap {width: 100%; margin-top: 3.5rem;}
.calendar-wrap .calendar-box {width: 100%;}
.calendar-wrap .calendar-box .calendar-title {display: flex; justify-content: space-between; align-items: center; width: 100%; height: 5rem; border-bottom: 1px solid #ccc;}
.calendar-wrap .calendar-box .calendar-title .title {font-family: "s-core-dream-heavy", sans-serif; transform: rotate(-0.04deg); font-size: 2.2rem; color: #252525; letter-spacing: -0.1rem;}
.calendar-wrap .calendar-box .calendar-title .title-guide {display: flex; align-items: center;}
.calendar-wrap .calendar-box .calendar-title .title-guide .reser-type {display: inline-block; margin-left: 2rem;}
.calendar-wrap .calendar-box .calendar-title .title-guide .reser-type i {display: inline-block; width: 2rem; height: 2.1rem; margin-right: 0.5rem; vertical-align: 0.4rem;}
.calendar-wrap .calendar-box .calendar-title .title-guide .reser-type span {font-family: "s-core-dream-medium", sans-serif; transform: rotate(-0.04deg); font-size: 1.6rem; color: #ad7967; letter-spacing: -0.1rem;}

/* 예약 - 달력 상단 */
.calendar-wrap .calendar-box .calendar-month {display: flex; justify-content: center; align-items: center; width: 100%; height: 4rem; text-align: center; margin: 2rem 0 1rem;}
.calendar-wrap .calendar-box .calendar-month a {display: inline-block; width: 6.6rem; height: 2rem;}
.calendar-wrap .calendar-box .calendar-month a img {width: 100%; margin-top: 0.1rem;}
.calendar-wrap .calendar-box .calendar-month span {display: inline-block; transform: rotate(-0.04deg); font-size: 2.2rem; color: #874831; font-weight: 700; margin: 0 2rem;}

/* 예약 - 달력 테이블 스타일 */
.calendar-wrap .calendar-box .calendar-tbl {width: 100%; transform: rotate(-0.02deg); border-right: 1px solid #ccc; margin-bottom: 2rem;}
.calendar-wrap .calendar-box .calendar-tbl th {padding: 2rem 2rem; text-align: center; font-size: 1.8rem; color: #ad7967; font-weight: 700; border-top: 2px solid #ac8979; border-left: 1px solid #f0e1da; border-right: 1px solid #f0e1da; border-bottom: 1px solid #ac8979; background-color: #fbf6f4;}
.calendar-wrap .calendar-box .calendar-tbl td {padding: 2rem 1rem; text-align: center; font-size: 1.75rem; color: #7e7d7d; font-weight: 400; border-left: 1px solid #ddd;  border-bottom: 1px solid #ddd;}
.calendar-wrap .calendar-box .calendar-tbl img {margin-left: 0.5rem; vertical-align: -0.3rem;}

/* 예약 - 희망시간 선택 */
.medicalteam-box {width: 100%;}
.medicalteam-box .time-title {display: flex; align-items: center; width: 100%; height: 5rem; border-bottom: 1px solid #ccc;}
.medicalteam-box .time-title .title {font-family: "s-core-dream-heavy", sans-serif; transform: rotate(-0.04deg); font-size: 2.2rem; color: #252525; letter-spacing: -0.1rem;}
.medicalteam-box .doctor-list {display: flex; justify-content: space-between; margin-top: 3rem;}
.medicalteam-box .doctor-list .doctor-staff {width: 100%;}
.medicalteam-box .doctor-list .doctor-staff .table-tbl {width: 100%; height: 26.7rem; transform: rotate(-0.02deg); border-top: 1px solid #252525;}
.medicalteam-box .doctor-list .doctor-staff .table-tbl th {padding: 0.5rem; text-align: center; font-size: 1.6rem; color: #252525; font-weight: 500; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; background-color: #f2f2f2;}
.medicalteam-box .doctor-list .doctor-staff .table-tbl th:last-child {border-right: 1px solid #ddd;}
.medicalteam-box .doctor-list .doctor-staff .table-tbl td {padding: 0.5rem; text-align: center; transform: rotate(-0.04deg); font-size: 1.45rem; color: #252525; font-weight: 400; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd;}
.medicalteam-box .doctor-list .doctor-staff .table-tbl td:last-child {border-right: 1px solid #ddd;}
.medicalteam-box .doctor-list .doctor-staff .table-tbl td span.contxt {font-size: 1.8rem; color: #b75d3d; font-weight: 500;}

.medicalteam-box .doctor-list .doctor-staff .table-tbl td a {display: inline-block; width: auto; padding: 0.5rem 2rem 0.6rem; font-size: 1.35rem; color: #fff; font-weight: 500; border-radius: 5rem;}
.medicalteam-box .doctor-list .doctor-staff .table-tbl td a.btn-applica {background: #b9978b;}
.medicalteam-box .doctor-list .doctor-staff .table-tbl td a.btn-del {background: #787878;}

/* 신청폼 추가 231223 */
.qnaform_title {float: left; width: 100%; height: 50px; font-family: "Noto Sans KR", sans-serif; font-size: 20px; color: #535252; font-weight: 400; line-height: 50px; text-align: center; background: #eff1f6;}
.qnaform_table {float: left; width: 100%;}
#qnaform_tablelayout {font-family: "Noto Sans KR", sans-serif; margin-bottom: 20px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
#qnaform_tablelayout tr th {width: 24%; font-size: 15px; color: #525151; font-weight: 500; text-align: center; padding: 5px 0; background-color: #f2f1f1; border-bottom: 1px solid #cbcaca;}
#qnaform_tablelayout tr td {font-size: 14px; font-weight: 400; color: #504f4f; padding: 8px 0 8px 15px; background-color: #fff; border-bottom: 1px solid #dadada;}
#qnaform_tablelayout tr:last-child th {border-bottom: 0;}
#qnaform_tablelayout tr:last-child td {border-bottom: 0;}
.qnaform_input {height: 33px; font-family: "Noto Sans KR", sans-serif; font-size: 14px; color: #737272; padding: 0 10px; margin-right: 10px; border: 1px solid #ccc;}

.personalbtn_area {float: left; width: 100%; margin-bottom: 30px;}
.personal_button {text-align: center;}
.personal_button button {width: 180px; height: 48px; font-family: "Noto Sans KR", sans-serif; font-size: 16px; color: #fff; line-height: 46px; background: #b9978b; border: 1px solid #b9978b; border-radius: 6px; transition: all 0.3s ease;}
.personal_button button:hover {color: #b9978b; background: #fff; border: 1px solid #b9978b;}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Mobile 359 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

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

.principle-note {display: inline-block;}
.principle-note .tit  {width: auto; font-size: 2.2rem; padding: 0 5rem;}
.principle-note .note-list {padding: 6rem 3rem 2rem;}
.principle-note .note-list ul li {font-size: 1.7rem; padding-top: 0.1rem; padding-left: 0;}

/* 예약 */
.reservation-wrap {padding: 0 2rem;}
.calendar-wrap {padding: 0 2rem;}
.calendar-wrap .calendar-box .calendar-title {display: flex; height: auto; padding-bottom: 1rem; align-items: center; justify-content: space-between; flex-wrap: nowrap;}
.calendar-wrap .calendar-box .calendar-title .title {font-size: 1.6rem; flex-shrink: 1; min-width: 0;}
.calendar-wrap .calendar-box .calendar-title .title-guide {margin-top: 0; justify-content: flex-end; flex-shrink: 0; margin-left: .8rem;}
.calendar-wrap .calendar-box .calendar-title .title-guide .reser-type {margin-left: 0;}

.calendar-wrap .calendar-box .calendar-tbl th {padding: 1rem 0; font-size: 1.6rem;}
.calendar-wrap .calendar-box .calendar-tbl td {padding: 1rem; font-size: 1.3rem;}
.calendar-wrap .calendar-box .calendar-tbl img {width: 100%; max-width: 2rem; margin-left: 0;}
.medicalteam-box .time-title .title {font-size: 1.8rem;}
.medicalteam-box .doctor-list {display: block; padding: 0;}
.medicalteam-box .doctor-list .doctor-staff {float: left; width: 100%; margin-bottom: 2rem;}
.medicalteam-box .doctor-list .doctor-staff:nth-of-type(2n+2) {float: right;}
.medicalteam-box .doctor-list .doctor-staff .table-tbl td span.contxt {font-size: 1.6rem; line-height: 1.2;}
.medicalteam-box .doctor-list .doctor-staff .table-tbl td span.contxt br {display: none;}

/* 신청폼 추가 231223 */
.calendar-wrap .calendar-box .calendar-month a img {vertical-align: top !important;}
.medicalteam-box .doctor-list .doctor-staff .table-tbl td {font-size: 1.3rem;}
.medicalteam-box .doctor-list .doctor-staff .table-tbl td a {font-size: 1.3rem;}
#qnaform_tablelayout tr td {padding: 8px 0 8px 8px;}

.modal-dialog {top: 50% !important; left: 50% !important; max-width: 720px; margin: 0 !important; padding: 0 1rem; transform: translate(-50%, -50%) !important;}

.modal-content #qnaform_tablelayout tr td span {display: block; margin-top: 10px;}

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Mobile 360,719 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:360px) and (max-width:719px) {

.principle-note {display: inline-block;}
.principle-note .tit  {width: auto; font-size: 2.2rem; padding: 0 5rem;}
.principle-note .note-list {padding: 6rem 3rem 2rem;}
.principle-note .note-list ul li {font-size: 1.7rem; padding-top: 0.1rem; padding-left: 0;}

/* 예약 */
.reservation-wrap {padding: 0 2rem;}
.calendar-wrap {padding: 0 2rem;}
.calendar-wrap .calendar-box .calendar-title {display: flex; height: auto; padding-bottom: 1rem; align-items: center; justify-content: space-between; flex-wrap: nowrap;}
.calendar-wrap .calendar-box .calendar-title .title {font-size: 1.6rem; flex-shrink: 1; min-width: 0;}
.calendar-wrap .calendar-box .calendar-title .title-guide {margin-top: 0; justify-content: flex-end; flex-shrink: 0; margin-left: .8rem;}
.calendar-wrap .calendar-box .calendar-title .title-guide .reser-type {margin-left: 0;}

.calendar-wrap .calendar-box .calendar-tbl th {padding: 1rem 0; font-size: 1.6rem;}
.calendar-wrap .calendar-box .calendar-tbl td {padding: 1rem 0.8rem; font-size: 1.5rem;}
.calendar-wrap .calendar-box .calendar-tbl img {width: 100%; max-width: 2rem; margin-left: 0;}
.medicalteam-box .time-title .title {font-size: 1.8rem;}
.medicalteam-box .doctor-list {display: block; padding: 0;}
.medicalteam-box .doctor-list .doctor-staff {float: left; width: 100%; margin-bottom: 2rem;}
.medicalteam-box .doctor-list .doctor-staff:nth-of-type(2n+2) {float: right;}
.medicalteam-box .doctor-list .doctor-staff .table-tbl td span.contxt {font-size: 1.6rem; line-height: 1.2;}
.medicalteam-box .doctor-list .doctor-staff .table-tbl td span.contxt br {display: none;}

/* 신청폼 추가 231223 */
.calendar-wrap .calendar-box .calendar-month a img {vertical-align: top !important;}
#qnaform_tablelayout tr td {padding: 8px 0 8px 8px;}
#qnaform_tablelayout tr td span {letter-spacing: -0.08rem;}

.modal-content #qnaform_tablelayout tr td span {display: block; margin-top: 10px;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Mobile 360,575 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:360px) and (max-width:575px) {

.modal-dialog {top: 50% !important; left: 50% !important; max-width: 720px; margin: 0 !important; padding: 0 1rem; transform: translate(-50%, -50%) !important;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Mobile 430,480 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:430px) and (max-width:480px) {

.calendar-wrap .calendar-box .calendar-tbl td {padding: 1rem 1.5rem;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Tablet 720,767 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:720px) and (max-width:767px) {

.principle-note {display: inline-block;}
.principle-note .tit  {width: auto; padding: 0 5rem;}
.principle-note .note-list {padding: 6rem 3rem 2rem;}
.principle-note .note-list ul li {padding-top: 0.1rem;}

/* 예약 */
.reservation-wrap {padding: 0 3rem;}
.calendar-wrap {padding: 0 3rem;}
.medicalteam-box .doctor-list {display: block; padding: 0;}
.medicalteam-box .doctor-list .doctor-staff {float: left; width: 100%; margin-bottom: 2rem;}
.medicalteam-box .doctor-list .doctor-staff:nth-of-type(2n+2) {float: right;}

/* 모달 팝업 여백 */
.modal-dialog {padding: 0 2rem;}

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Tablet 768,1023 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:768px) and (max-width:1023px) {

.principle-note {display: inline-block;}
.principle-note .tit  {width: auto; padding: 0 5rem;}
.principle-note .note-list {padding: 6rem 3rem 2rem;}
.principle-note .note-list ul li {padding-top: 0.1rem;}

/* 예약 */
.reservation-wrap {padding: 0 3rem;}
.calendar-wrap {padding: 0 3rem;}
.medicalteam-box .doctor-list {display: block; padding: 0;}
.medicalteam-box .doctor-list .doctor-staff {float: left; width: 100%; margin-bottom: 2rem;}
.medicalteam-box .doctor-list .doctor-staff:nth-of-type(2n+2) {float: right;}

/* 모달 팝업 여백 */
.modal-dialog {padding: 0 2rem;}

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 PC 1024,1279 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:1024px) and (max-width:1279px) {

/* 서브페이지 레이아웃 공통 및 페이지명 영역 */
.page-common {padding: 0 1rem;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 PC 1280 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:1280px) {

/* 서브페이지 레이아웃 공통 및 페이지명 영역 */
.page-common {padding: 0 2rem;}

}


/* ---------------------------------------- */
/* Footer */
/* ---------------------------------------- */

#footer { display: flex; flex-flow: column; margin: 0 auto; width: 100%; text-align: center; }
#footer .copyright { width: 100%; margin-top: 0; }
#footer .copyright p { transform: rotate(-0.03deg); font-family: "s-core-dream-medium", sans-serif; font-size: 1.8rem; color: #747373; letter-spacing: -0.06rem; line-height: 1; }
#footer .copyright span { font-size: 2rem; vertical-align: 0.1rem; }
#footer .copyright strong { color: #252525; }