/* s-core-dream 폰트 패밀리명 매핑 (/fonts/ 절대경로) */
@font-face { font-family: "s-core-dream-thin";      font-weight: normal; src: url('/fonts/SCoreDreamThin.woff2') format('woff2'), url('/fonts/SCoreDreamThin.woff') format('woff'); }
@font-face { font-family: "s-core-dream-light";     font-weight: normal; src: url('/fonts/SCoreDreamLight.woff2') format('woff2'), url('/fonts/SCoreDreamLight.woff') format('woff'); }
@font-face { font-family: "s-core-dream-medium";    font-weight: normal; src: url('/fonts/SCoreDreamMedium.woff2') format('woff2'), url('/fonts/SCoreDreamMedium.woff') format('woff'); }
@font-face { font-family: "s-core-dream-regular";   font-weight: normal; src: url('/fonts/SCoreDreamRegular.woff2') format('woff2'), url('/fonts/SCoreDreamRegular.woff') format('woff'); }
@font-face { font-family: "s-core-dream-bold";      font-weight: normal; src: url('/fonts/SCoreDreamBold.woff2') format('woff2'), url('/fonts/SCoreDreamBold.woff') format('woff'); }
@font-face { font-family: "s-core-dream-extrabold"; font-weight: normal; src: url('/fonts/SCoreDreamExtraBold.woff2') format('woff2'), url('/fonts/SCoreDreamExtraBold.woff') format('woff'); }
@font-face { font-family: "s-core-dream-heavy";     font-weight: normal; src: url('/fonts/SCoreDreamHeavy.woff2') format('woff2'), url('/fonts/SCoreDreamHeavy.woff') format('woff'); }
@font-face { font-family: "s-core-dream-black";     font-weight: normal; src: url('/fonts/SCoreDreamBlack.woff2') format('woff2'), url('/fonts/SCoreDreamBlack.woff') format('woff'); }

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

/* 서브 sub-visual 배경이미지 영역 */
.sub-visual {position: relative; width: 100%; height: 55rem; background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: 1;}

/* 서브 대메뉴 타이틀 영역 */
.title-area {position: relative; display: flex; align-items: center; text-align: center; width: 100%; height: 100%;}
.title-area .inner {margin: 0 auto; width: 100%; max-width: 800px;}
.title-area h2.tit-kor {display: inline-block; font-family: "s-core-dream-extrabold", sans-serif; transform: rotate(-0.03deg); font-size: 4.7rem; color: #fff; line-height: 1; margin-top: 6rem;}
.title-area .tit-sub {font-family: "s-core-dream-light", sans-serif; font-size: 2rem; color: #fff; letter-spacing: -0.06rem; line-height: 1; padding-top: 2rem;}
.title-area .tit-sub span {display: inline-block; padding: 1.2rem 0 0.8rem; border-top: 1px solid rgba(255,255,255,0.5); border-bottom: 1px solid rgba(255,255,255,0.5);}

/* 서브 하위메뉴 리스트 영역 */
.sub-gnb-wrap {position: relative; display: flex; align-items: center; width: 100%; height: 8rem; border-bottom: 1px solid #dddddd;}
.sub-gnb-wrap .inner {margin: 0 auto; width: 100%; max-width: 800px;}
.sub-gnb-wrap .sub-gnb {float: left; width: 100%; text-align: center;}
.sub-gnb-wrap .sub-gnb ul {font-size: 0;}
.sub-gnb-wrap .sub-gnb ul li {position: relative; display: inline-block; padding: 0 3rem;}
.sub-gnb-wrap .sub-gnb ul li:before {position: absolute; left: 0; top: 50%; content: ""; width: 1px; height: 1.7rem; margin-top: -1rem; background: #cdcdcd;}
.sub-gnb-wrap .sub-gnb ul li:first-child:before {display: none;}
.sub-gnb-wrap .sub-gnb ul li a {font-family: "s-core-dream-medium", sans-serif; transform: rotate(-0.03deg); font-size: 1.8rem; color: #7f7d7d; letter-spacing: -0.06rem; line-height: 1;}
.sub-gnb-wrap .sub-gnb ul li a:hover {color: #ae8057;}
.sub-gnb-wrap .sub-gnb ul li.on a {color: #ae8057; padding-bottom: 0.2rem; border-bottom: 2px solid #ae8057;}

/* 서브페이지 레이아웃 공통 및 페이지명 영역 */
.sec-sub {position: relative; float: left; width: 100%; }
.sec-sub .title-bar {display: inline-block; width: 100%; text-align: center; }
.sec-sub .title-bar .page-nametxt {position: relative; font-family: "s-core-dream-medium", sans-serif; transform: rotate(-0.03deg); font-size: 3.8rem; color: #111; letter-spacing: -0.06rem; line-height: 1;}
.sec-sub .title-bar .page-nametxt:after {content: ""; position: absolute; left: 50%; top: 5.5rem; display: inline-block; width: 1px; height: 3rem; background-color: #111111;}
/* 고정 헤더 대응 padding-top 추가 */
.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;}
.page-common2 {width: 100%; padding: 16rem 0;}

.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: #09457b; border-radius: 1.6rem;}
.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 #c6d3df; border-radius: 1.5rem;}
.principle-note .note-list ul {width: 100%; text-align: left;}
.principle-note .note-list ul li {padding-left: 2rem; margin-bottom: 0.5rem; font-family: "s-core-dream-medium", sans-serif; transform: rotate(-0.04deg); font-size: 1.85rem; 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; margin-bottom: 3rem;}
.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: 2.5rem; height: 2.5rem; margin-right: 0.5rem; vertical-align: 0.4rem;}
.calendar-wrap .calendar-box .calendar-title .title-guide .reser-type i img {width: 100%;}
.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: #09457b; letter-spacing: -0.1rem;}

/* 예약 - 연도 선택 */
.yearselect-wrap {position: relative; width: 100%; text-align: right; margin-bottom: 1rem;}
.yearselect-wrap .basic-select {width: 10rem; height: 3rem; font-size: 1.35rem; color: #646262; font-weight: 400; border: 1px solid #d9d7d7;}
.yearselect-wrap p {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.2rem; color: #111; font-weight: 600;}

/* 예약 - 희망시간 선택 */
.medicalteam-box {width: 100%; margin-top: 4rem;}
.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: #09457b; font-weight: 700; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; background-color: #e5eff8;}
.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: #0376dd;}
.medicalteam-box .doctor-list .doctor-staff .table-tbl td a.btn-del {background: #787878;}

/* 신청폼 */
.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: #09457b; border: 1px solid #09457b; border-radius: 6px; transition: all 0.3s ease;}
.personal_button button:hover {color: #09457b; background: #fff; border: 1px solid #09457b;}

/* 주일예배 안내위원 모집 */
.title-wrap {width: 100%;}
.title-wrap .imgbox {width: 100%;}
.title-wrap .imgbox img {width: 100%;}


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

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

.sub-visual {height: 30rem;}
.title-area h2.tit-kor {font-size: 3.5rem; letter-spacing: -0.08rem;}
.title-area .tit-sub {font-size: 1.5rem;}
.sub-gnb-wrap {height: 6rem;}
.sub-gnb-wrap .sub-gnb ul li {padding: 0 1rem;}
.sub-gnb-wrap .sub-gnb ul li a {font-size: 1.4rem;}
.sec-sub .title-bar .page-nametxt {font-size: 3.5rem;}

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

.reservation-wrap {padding: 0 2rem;}
.calendar-wrap {padding: 0 2rem;}
.calendar-wrap .calendar-box .calendar-title {display: block; height: auto; padding-bottom: 1rem;}
.calendar-wrap .calendar-box .calendar-title .title-guide {margin-top: 1rem;}
.calendar-wrap .calendar-box .calendar-title .title-guide .reser-type {margin-left: 0;}

.medicalteam-box .time-title .title {font-size: 2.2rem;}
.medicalteam-box .doctor-list {display: block; padding: 0;}
.medicalteam-box .doctor-list .doctor-staff {float: left; width: 100%; margin-bottom: 2rem;}

#qnaform_tablelayout tr td {padding: 8px 0 8px 8px;}
#qnaform_tablelayout tr td span {display: block; letter-spacing: -0.08rem; margin-top: 10px;}
.modal-dialog {top: 50% !important; left: 50% !important; max-width: 720px; margin: 0 !important; padding: 0 1rem; transform: translate(-50%, -50%) !important;}

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

}


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

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

.sub-visual {height: 30rem;}
.title-area h2.tit-kor {font-size: 3.8rem; letter-spacing: -0.08rem;}
.title-area .tit-sub {font-size: 1.7rem;}
.sub-gnb-wrap {height: 6rem;}
.sub-gnb-wrap .sub-gnb ul li {padding: 0 1rem;}
.sub-gnb-wrap .sub-gnb ul li a {font-size: 1.6rem;}

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

.reservation-wrap {padding: 0 2rem;}
.calendar-wrap {padding: 0 2rem;}
.calendar-wrap .calendar-box .calendar-title {display: block; height: auto; padding-bottom: 1rem;}
.calendar-wrap .calendar-box .calendar-title .title-guide {margin-top: 1rem;}
.calendar-wrap .calendar-box .calendar-title .title-guide .reser-type {margin-left: 0;}

.medicalteam-box .time-title .title {font-size: 2.2rem;}
.medicalteam-box .doctor-list {display: block; padding: 0;}
.medicalteam-box .doctor-list .doctor-staff {float: left; width: 100%; margin-bottom: 2rem;}

#qnaform_tablelayout tr td {padding: 8px 0 8px 8px;}
#qnaform_tablelayout tr td span {letter-spacing: -0.08rem;}

.wc-modal-box #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;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 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 3rem;}
.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;}
.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 3rem;}
.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;}
.modal-dialog {padding: 0 2rem;}

}


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

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

.page-common {padding: 0 1rem;}
.page-common2 {padding: 16rem 1rem;}

}


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

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

.page-common {padding: 0 2rem;}
.page-common2 {padding: 16rem 2rem;}

}
