@charset "utf-8";

:root {--blue:#034589; --purple:#6872D4; --point-font: 'SCDream'; --basic-font: 'Pretendard';}



/* wrap */
#wrap {position: relative; width: 100%;}



/* ======================== SUB ======================== */
/* 의료진 index 페이지 */
.doctor-idx-box-wrap {display: flex; flex-wrap: wrap; gap: 20px; max-width: 1128px;}
.doctor-idx-box {position: relative; display: flex; gap:25px; width: calc(100% / 2 - 10px); padding: 30px; border: 1px solid #ddd;}
.doctor-idx-img {width: 220px; min-width: 220px;}
.doctor-idx-txt {display: flex; flex-direction: column; justify-content: space-between; padding-top: 25px;}
.doctor-idx-title {font-size: 28px !important; font-weight: 700; margin: 0 !important;}
.doctor-idx-title span {font-size: 16px !important; font-weight: 500; color: #666;}
.doctor-idx-list li {font-size: 16px; font-weight: 500;}
.doctor-idx-list li:first-of-type {margin-bottom: 5px; font-weight: 700; color:#1F5E99;}
.doctor-idx-list li:last-of-type {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 22px; word-break: keep-all;}

.doctor-idx-btns {border: 1px solid #eee; border-radius: 5px;}
.doctor-idx-btn {width: 100%; height: 37px;}
.doctor-idx-btn:first-of-type {border-bottom: 1px solid #eee;}
.doctor-idx-btn .doctor-idx-icon {display: flex; width:100%; padding:0 20px; border: none; background-color: #fff;}
.doctor-idx-btn .doctor-idx-icon .doctor-idx-icon-img {margin: auto;}
.doctor-idx-btn p {margin: 0; text-align: center; line-height: 36px; color: #333; font-size: 14px; flex: 1;}

@media screen and (max-width: 1460px) {
    .doctor-idx-box {padding: 25px; gap: 20px;}
    .doctor-idx-img {width: 200px; min-width: 200px;}
    .doctor-idx-img img {width: 100%;}
    .doctor-idx-txt {padding-top: 0;}
    .doctor-idx-title {font-size: 24px !important;}
}

@media screen and (max-width: 1200px) {
    .doctor-idx-img {width: 170px; min-width: 170px;}
    .doctor-idx-list li {font-size: 14px; line-height: 19px;}
    .doctor-idx-title {font-size: 22px !important;}
}

@media screen and (max-width: 1100px) {
    .doctor-idx-title span {display: block;}
    .doctor-idx-txt {justify-content: start; gap: 15px;}
    .doctor-idx-box {padding-bottom: 85px;}
    .doctor-idx-btns {display: flex; position: absolute; bottom: 25px; left: 25px; width:calc(100% - 50px);}
    .doctor-idx-btn:first-of-type {border-bottom: none; border-right: 1px solid #eee;}
}

@media screen and (max-width: 800px) {
    .doctor-idx-box {width: 100%; padding: 25px;}
    .doctor-idx-img {width: 220px; min-width: 220px;}
    .doctor-idx-txt {justify-content: space-between;}
    .doctor-idx-list {padding-bottom: 40px;}
    .doctor-idx-btns {position: relative; bottom: auto; left: auto; display: block; max-width: 280px;}
    .doctor-idx-btn:first-of-type {border-right: none; border-bottom: 1px solid #eee;}
}

@media screen and (max-width: 600px) {
    .doctor-idx-img {width: 200px; min-width: 200px;}
    .doctor-idx-list {padding-bottom: 0;}
    .doctor-idx-btns {width: 100%;}
}

@media screen and (max-width: 500px) {
    .doctor-idx-box {padding: 20px; padding-bottom: 110px;}
    .doctor-idx-img {width: 160px; min-width: 160px;}
    .doctor-idx-txt {justify-content: start; padding-top: 15px;}
    .doctor-idx-title {font-size: 20px !important;}
    .doctor-idx-btns {position: absolute; bottom: 20px; left: 20px; max-width: calc(100% - 40px);}
}

@media screen and (max-width: 380px) {
	.doctor-idx-btn .doctor-idx-icon {width:100%; padding:0 15px;}
    .doctor-idx-img {width: 130px; min-width: 130px;}
    .doctor-idx-txt {padding-top: 5px;}
}



/* 의료진 상세 페이지 */
.doctor-detail-title {width:100%; height:800px; background: url(../images/doctor_title_bg.png) no-repeat; background-size: cover;}
.doctor-title-inner {position: relative; max-width: 1432px; height: 100%; margin: auto;}
.doctor-info-box {position: absolute; left: 0; bottom: 1px; display: flex; flex-direction: column; width:560px; height: 700px; background-color: rgba(3, 69, 137, 0.9); border-radius: 0 100px 0 0; z-index: 1;}
.doctor-info-head {display: flex;justify-content: space-between; width: 100%; height: 214px; padding:42px; border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
.doctor-info-list li {color:#fff;}
.doctor-info-list li:first-of-type {font-size: 65px; font-weight: 700;}
.doctor-info-list li:last-of-type {font-size: 40px; font-weight: 300;}
.doctor-info-btn {width: 50px; height: 50px; margin: auto 0 0; border-radius: 10px; background-color: #fff; border:none;}
.doctor-info-btn i,
.doctor-info-btn svg {font-size: 25px; color: var(--purple);}

.doctor-info-body {display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding:42px;}

.doctor-info-title {margin-bottom: 15px; font-size: 25px; font-weight: 700; color: #fff;}
.doctor-info-txt {font-size: 22px; line-height: 32px; font-weight: 500; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; word-break: keep-all;}

.doctor-table {width: 100%;}
.doctor-table th {height: 50px; padding: 0 10px; font-size: 18px; font-weight: 700; color: #fff; background-color: #0EB5AA;}
.doctor-table td {height: 50px; padding: 0 10px; font-size: 16px; font-weight: 500; color: #111; text-align: center; background-color: #fff;}

.doctor-info-foot {width: 100%; height: 65px; background-color: #fff;}

.doctor-info-foot button {display:flex; justify-content:space-between; width: 100%; padding: 0 25px; border:none; background-color: transparent;}
.doctor-info-foot-icon {margin:auto 0;}
.doctor-info-foot-title {font-size:24px; font-weight:500; line-height: 65px; color:#001976;}
.time-on {font-size: 16px; color: #6872D4;}

.doctor-img {display: flex; position: absolute; left: 695px; bottom: 0;}

.doctor-detail-info {}
.doctor-info-inner {width: 1432px; padding: 80px 0 60px; margin: auto;}

.doctor-info-item-wrap {padding-bottom: 92px;}
.doctor-info-item {display: flex; padding: 50px; border: 1px solid #E5E5EC; border-top: 2px solid #000; border-radius: 0 0 20px 20px;}
.doctor-info-item:not(:last-of-type) {margin-bottom: 33px;}
.doctor-info-item h3 {width: 285px; font-size: 35px; font-weight: 500; color: #111;}

.dot-list li {position: relative; padding-left: 12px; font-size: 16px; line-height: 24px; font-weight: 500; color:#767676; word-break: keep-all;}
.dot-list li::before {content: ""; position: absolute; top:8px; left:0; width: 3px; height: 3px; border-radius: 4px; background-color: #767676;}
.dot-list li:not(:last-of-type) {margin-bottom: 10px;}

.doctor-list-btn {height: 51px; padding: 0 15px; color: #000; font-size: 16px; font-weight: 500; border: none; background-color: #EEEEEE; transition: .3s;}
.doctor-list-btn:hover {color: #fff; background-color: var(--blue); transition: .3s;}

@media screen and (max-width: 1460px) {
    .doctor-detail-title {height: 720px;}
    .doctor-title-inner {max-width: 95%;}
    .doctor-info-box {width: 520px; height: 640px;}
    .doctor-info-head {padding: 38px;}
    .doctor-info-list li:first-of-type {font-size: 52px;}
    .doctor-info-list li:last-of-type {font-size: 38px;}
    .doctor-info-body {padding: 38px;}
    .doctor-info-title {margin-bottom: 13px; font-size: 23px;}
    .doctor-img {left: auto; right: 0; height: 100%;}
    
    .doctor-info-inner {width: 95%;}
    .doctor-info-item-wrap {padding-bottom: 75px;}
    .doctor-info-item h3 {width: 230px; min-width: 230px; font-size: 30px;}
}

@media screen and (max-width: 1200px) {
    .doctor-detail-title {height: 650px;}
    .doctor-info-box {width: 450px; height: 580px;}
    .doctor-info-head {padding: 35px 38px;}
    .doctor-info-list li:first-of-type {font-size: 44px;}
    .doctor-info-list li:last-of-type {font-size: 35px;}
    .doctor-info-body {padding: 35px 38px;}
    .doctor-info-title {margin-bottom: 10px; font-size: 21px;}
    .doctor-info-txt {font-size: 18px; line-height: 30px;}
    .doctor-table th {height: 45px; font-size: 16px;}
    .doctor-table td {height: 45px;}
}

@media screen and (max-width: 1020px) {
    .doctor-detail-title {height: auto; min-height: 895px; background: none;}
    .doctor-title-inner {display: flex; flex-direction: column-reverse; max-width: 100%;}
    .doctor-info-box {position: relative; width: 100%; height: auto; border-radius: 0; border-bottom: 1px solid #ddd;}
    .doctor-img {position: relative; left: auto; right: auto; background: url(../images/doctor_title_bg.png) no-repeat;background-size: cover;}
    .doctor-img img {max-width: 65%; margin: auto auto 0; object-fit: contain;}
    .doctor-info-head {height: auto;}
    .doctor-info-list {display: flex; gap: 8px; margin: auto 0;}
    .doctor-info-list li:last-of-type {margin: auto 0;}
    .doctor-info-btn {margin: auto 0;}
    .doctor-info-body {gap: 30px;}
    .doctor-table th {height: 50px;}
    .doctor-table td {height: 50px;}
	.doctor-info-foot button {padding:0 13px;}

    .doctor-info-inner {padding: 50px 0 60px;}
    .doctor-info-item-wrap {padding-bottom: 60px;}
    .doctor-info-item {padding: 40px;}
    .doctor-info-item h3 {width: 200px; min-width: 200px; font-size: 26px;}
}

@media screen and (max-width: 800px) {
	.doctor-info-foot button {padding:0 10px;}
    .doctor-info-foot-title {font-size: 22px;}

    .doctor-info-inner {padding: 35px 0 60px;}
    .doctor-info-item-wrap {padding-bottom: 40px;}
    .doctor-info-item {flex-direction: column; gap: 20px; padding: 30px 25px;}
    .doctor-info-item h3 {width: 100%;} 
}

@media screen and (max-width: 600px) {
    .doctor-info-head {padding: 30px 25px;}
    .doctor-info-list li:first-of-type {font-size: 40px;}
    .doctor-info-list li:last-of-type {font-size: 30px;}
    .doctor-info-body {padding: 30px 25px;}

    .doctor-info-item {padding: 30px 20px;}
    .doctor-info-item h3 {font-size: 22px;}
}

@media screen and (max-width: 500px) {
	.doctor-info-foot {height:55px;}
	.doctor-info-foot-icon img {max-width:24px !important;}
	.doctor-info-foot-title {font-size:20px; line-height:55px;}
	
	.doctor-info-list {flex-direction: column; gap: 5px;}
    .doctor-info-list li:first-of-type {font-size: 28px;}
    .doctor-info-list li:last-of-type {padding-top:3px; font-size: 22px;}
    .doctor-info-btn {width: 45px; height: 45px; margin: auto 0 0;}
    .doctor-table th {padding: 0;}
    .doctor-table td {padding: 0;}
}