@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400&display=swap');

h0 {font-size: 55px; font-family: Noto Sans KR; font-weight: 400;}
h1 {font-size: 40px; font-family: Noto Sans KR; font-weight: 700;}
h2 {font-size: 36px; font-family: Noto Sans KR; font-weight: 700;}
h3 {font-size: 28px; font-family: Noto Sans KR; font-weight: 700;}
h4 {font-size: 24px; font-family: Noto Sans KR; font-weight: 700;}
h6 {font-size: 14px; font-family: Noto Sans KR; font-weight: 400; white-space: pre-wrap; line-height: 28px;}
.page p {font-size: 20px; font-family: Noto Sans KR; font-weight: 350;}
span {font-size: 18px; font-family: Noto Sans KR; font-weight: 400; display: block;}
.page {max-width: 1280px; margin: 0 auto; padding: 100px 0;}

.underline {width: 58px; height: 2px; background-color: #ffffff; margin: 16px 0;}
.background {height: 100vh; width: 100%; top: 0; right: 0; background-color: #00000050; position: fixed; z-index: 100; transition: opacity 0.5s ease; opacity: 0; display: none;}
.background.active {display: block; opacity: 1;}
.closer {padding: 20px; cursor: pointer; text-align: right; color: #ffffff; font-weight: 200; position: absolute; right: 0; z-index: 10000;}

.text-center {text-align: center;}
.text-left {text-align: left;}
.font-weight-black {font-weight: 900 !important;}
.font-weight-bold {font-weight: 700 !important;}
.font-weight-regular {font-weight: 400 !important;}
.NotoSerifKR {font-family: 'Noto Serif KR' !important;}
.mb16 {margin-bottom: 16px;}
.mb24 {margin-bottom: 24px;}
.mb36 {margin-bottom: 36px;}
.mb44 {margin-bottom: 44px;}

#main-wethink-wrapper {background: url(../images/pc_main/back01.jpg) center/cover no-repeat; }
#main-wethink-wrapper article {background-color: rgba(255, 255, 255, 0.9); padding: 72px 120px; width: max-content; margin: 0 auto; border-radius: 30px;}

#main-what-spicial-wrapper article {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; color: #FFFFFF;}
#main-what-spicial-wrapper article > div:not(.underline) {border-radius: 30px; padding: 40px 26px; background: #000000;}
#main-what-spicial-wrapper #first {background: url(../images/pc_main/img_01.png) center/cover no-repeat;}
#main-what-spicial-wrapper #second {background: url(../images/pc_main/img_02.png) center/cover no-repeat;}
#main-what-spicial-wrapper #third {background: url(../images/pc_main/img_03.png) center/cover no-repeat;}
#main-what-spicial-wrapper #fourth {background: url(../images/pc_main/img_04.png) center/cover no-repeat; color: #363636;}


#main-doctors-wrapper .doctors {display: grid; grid-template-columns: repeat(5, 1fr);}
#main-doctors-wrapper .소개합니다 {position: absolute; z-index: 10; color: white;}
#main-doctors-wrapper .doctor {background-color: #000000; color: #FFFFFF; cursor: pointer;}
#main-doctors-wrapper .doctor .info {display: flex; flex-direction: column; align-items: end; padding: 60px 48px; padding-top: 60vh;}
#main-doctors-wrapper .doctor .info div:first-child {display: flex; align-items: center; gap: 12px; margin-bottom: 12px;}
#main-doctors-wrapper .doctor .info span {font-size: 14px; text-align: right;}
#main-doctors-wrapper .doctor .info .viewMore {padding-bottom: 4px; border-bottom: 2px solid #FFFFFF; width: max-content;}
#main-doctors-wrapper .doctor#남윤 {background: url(../images/pc_main/doc_01.jpg) center/cover no-repeat;}
/*#main-doctors-wrapper .doctor#우승석 {background: url(../images/pc_main/doc_02.jpg) center/cover no-repeat;}*/
#main-doctors-wrapper .doctor#박유진 {background: url(../images/pc_main/doc_03.jpg) center/cover no-repeat;}
#main-doctors-wrapper .doctor#남현 {background: url(../images/pc_main/doc_04.jpg) center/cover no-repeat;}
#main-doctors-wrapper .doctor#문영미 {background: url(../images/pc_main/doc_05.jpg) center/cover no-repeat;}
#main-doctors-wrapper .doctor#김기홍 {background: url(../images/pc_main/doc_06.jpg) center/cover no-repeat;}
#main-doctors-wrapper .doctor-modal {z-index: 1001; background-color: #172243; color: #FFFFFF; max-height: 750px; overflow: hidden; overflow-y: auto; position: fixed; top: 50%; left: 50%; width: 100%; max-width: 1280px; margin: 0 auto; transform: translate(-50%, 100%); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease; display: none;}
#main-doctors-wrapper .doctor-modal.active {transform: translate(-50%, -50%); opacity: 1; display: block; z-index: 10000;}
#main-doctors-wrapper .doctor-modal:not(.active) {transition: transform 0.5s ease, opacity 0.5s ease; transform: translate(-50%, 100%); opacity: 0; display: none;}
#main-doctors-wrapper .doctor-modal .doctor-modal-inner {display: grid; grid-template-columns: 45% 55%; align-items: center;}
#main-doctors-wrapper .doctor-modal .doctor-modal-inner img {max-width: 800px;}
#main-doctors-wrapper .doctor-modal .history {display: flex; gap: 42px;}


#main-system-wrapper {padding:60px 0;}
#main-system-wrapper article {background: url(../images/pc_main/system_bg.png) center/cover no-repeat; border-radius: 30px; padding: 72px; display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 90px; color: #FFFFFF;}
#main-system-wrapper article .sub {display: flex; /*align-items: center;*/ gap: 20px; margin-bottom: 12px;}
#main-system-wrapper article .sub span {z-index: 10;}
#main-system-wrapper article .sub .underlineImage {display: inline; position: absolute; width: calc(90% - 20px); margin-left: 36px; margin-top: 24px;}

#main-doctors-sys-wrapper {background: url(../images/pc_main/dotorosSys_bg.jpg) center/cover no-repeat; padding: 80px;}

#main-tools-wrapper .select-list {display: grid;  grid-template-columns: repeat(5, 1fr);}
#main-tools-wrapper .select-list h4 {border-bottom: 4px solid #DCDCDC; padding-bottom: 12px; text-align: center; cursor: pointer;}
#main-tools-wrapper .select-list h4.selected {border-bottom: 4px solid #363636}
#main-tools-wrapper .tools {display: none; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 48px; margin-top: 60px; padding: 0 120px;}
#main-tools-wrapper .tools img {width: 100%;}
.select-list-blur::after {content: ''; position: absolute; top: 0; right: 0; width: 100px; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); pointer-events: none;}

#main-intro-wrapper {background-color: #1E2A4D; color: #ffffff; padding-top: 30px; overflow: hidden;}
#main-intro-wrapper .content {background: url(../images/pc_main/greeting_bak.png); padding: 72px; border-radius: 32px; color: #181818; text-align: left;}
#main-intro-wrapper .content span {color: #313131; white-space: pre-wrap; max-width: 500px;}
#main-intro-slider .swiper-wrapper {display: flex;}
#main-intro-slider .swiper-slide img {width: 100%; height: auto;}

#main-sub-footer-wrapper {display: grid; grid-template-columns: repeat(2, 1fr); gap: 90px;}
#main-sub-footer-1, #main-sub-footer-2 {background-color: #F8F8F8; border-radius: 30px;}
#main-sub-footer-1 .schedule {display: grid; grid-template-columns: auto 1fr; gap: 16px;}
#main-sub-footer-1 { padding: 40px; display: flex; flex-direction: column; align-items: center; }
#main-sub-footer-2 .contact {padding: 40px; padding-top: 24px;}
#main-sub-footer-2 .contact div > div {display: flex; align-items: center; gap: 20px; }
#main-sub-footer-2 .contact div > div p {width: 96px; white-space: nowrap;}
#main-sub-footer-2 iframe {max-height: 260px; border-radius:30px 30px 0 0; width: 100%; object-fit: cover;}


/* 유튜브 수정 */
#main-video-wrapper {padding-top: 0;}
#main-video { display: flex; gap: 30px; }
#main-video iframe { width: 100%; height: auto; }
#main-video-tum { display: flex; flex-direction: column; gap: 14px; }
#main-video-tum img { width: 235px; height: 132px; object-fit: cover; } /* 높이값조정 */
/* 유튜브 수정 */


@media screen and (max-width: 768px) {
    h0 {font-size: 32px;}
    h1 {font-size: 24px;}
    h2 {font-size: 22px;}
    h3 {font-size: 16px;}
    h4 {font-size: 14px; letter-spacing: -0.1em;}
    h6 {font-size: 14px;}
    .page p {font-size: 13px;}
    span {font-size: 14px;}
    .page {max-width: unset; margin: 0 auto; padding: 42px 0;}

    .mb16 {margin-bottom: 8px;}
    .mb24 {margin-bottom: 12px;}
    .mb36 {margin-bottom: 24px;}
    .mb44 {margin-bottom: 32px;}
    

    #main-wethink-wrapper article {width: calc(100% - 36px); padding: 48px 36px; margin: 18px;}
    #main-wethink-wrapper span {font-size: 8px;}
    #main-wethink-wrapper img {height: 32px;}

    #main-what-spicial-wrapper article {grid-template-columns: 100%; gap: 16px; margin: 18px;}
    #main-what-spicial-wrapper article > div:not(.underline) {border-radius: 12px; padding: 32px 12px; background: #000000;}

    #main-doctors-wrapper .page {text-align: right; position: relative; top: 30px; z-index: 100; margin-right: 24px;}
    #main-doctors-wrapper .doctors {grid-template-columns: 100%;}
    #main-doctors-wrapper h0 {font-size: 20px;}
    #main-doctors-wrapper .소개합니다 {position: relative}
    #main-doctors-wrapper .doctor .info {padding-top: 36px !important; padding: 24px;}
    #main-doctors-wrapper .doctor .info:first-child {padding-top: 48px !important;}
    #main-doctors-wrapper .doctor .info div:first-child {margin-bottom: 0;}
    #main-doctors-wrapper .doctor .info.left { align-items: start; }
    #main-doctors-wrapper .doctor .info.left span {text-align: left;}
    #main-doctors-wrapper .doctor .info span {font-size: 11px; line-height: 14px;}
    #main-doctors-wrapper .doctor#남윤 {background: url(../images/mobile_main/con_03_01.jpg) left/cover no-repeat;}
    /*#main-doctors-wrapper .doctor#우승석 {background: url(../images/mobile_main/con_03_02.jpg) right/cover no-repeat;}*/
    #main-doctors-wrapper .doctor#박유진 {background: url(../images/mobile_main/con_03_03_r.jpg) left/cover no-repeat;}
    #main-doctors-wrapper .doctor#남현 {background: url(../images/mobile_main/con_03_04_l.jpg) right/cover no-repeat;}
    #main-doctors-wrapper .doctor#문영미 {background: url(../images/mobile_main/con_03_05_r.jpg) left/cover no-repeat;}
	#main-doctors-wrapper .doctor#김기홍 {background: url(../images/mobile_main/con_03_06_l.jpg) left/cover no-repeat;}
    #main-doctors-wrapper .doctor-modal .doctor-modal-inner {display: flex; flex-direction: column; align-items: start; padding: 12px; gap: 24px;}
    #main-doctors-wrapper .doctor-modal .history {flex-direction: column; text-align: left; gap: 0;}
    #main-doctors-wrapper .doctor-modal .doctor-modal-inner div {text-align: left;}
    #main-doctors-wrapper .doctor-modal.active {transform: translate(0%, 0%); width: calc(100% - 36px); padding: 18px;}
    #main-doctors-wrapper .doctor-modal .closer {font-size: 40px !important; top:-15px;}
    #main-doctors-wrapper .doctor-modal h6 {margin-left: 8px; opacity: .8;}
    #main-doctors-wrapper .doctor-modal h1 {font-size: 32px;}
    #main-doctors-wrapper .doctor-modal {max-height: unset; height: 90%; top: 60px; left: 18px; right: 18px; bottom: 60px; transform: translate(0%, 0%);}
    #main-doctors-wrapper .doctor-modal-inner img {width: 147%; left: 0; margin: 0 auto; margin-bottom: 24px;}
    .background.active {z-index: 1;}

    #main-system-wrapper article {grid-template-columns: 100%; padding: 24px; gap: 25px; margin: 24px;}
    #main-system-wrapper article .sub {gap: 7px !important; letter-spacing: -0.-5em;}
    #main-system-wrapper article .sub img {height: 20px !important;}

    #main-doctors-sys-wrapper {background-image: url(../images/mobile_main/con_05.jpg); background-size: cover; padding: 0; text-align: center; padding-bottom: 25vh;}



    #main-tools-wrapper .select-list::-webkit-scrollbar {display: none;}
    #main-tools-wrapper .select-list{ display: flex; overflow-x: auto; margin: 18px; }
    #main-tools-wrapper .select-list h4 {white-space: nowrap; padding:8px 16px; border-bottom: 2px solid #DCDCDC !important;}
    #main-tools-wrapper .select-list h4.selected {border-bottom: 2px solid #363636 !important}
    #main-tools-wrapper .tools {grid-template-columns: 100%; padding: 24px;}
    #main-tools-wrapper .tools br {display: none;}
    #main-tools-wrapper .tools img {max-height: 300px; text-align: center;}

    #main-intro-wrapper .content {padding:36px 16px ; margin: 12px; padding-bottom: 40vh; background: url(../images/mobile_main/con_06.png) right/cover no-repeat;}
    #main-intro-wrapper .content img {width: 150px !important; margin-left: 0 !important;}

    #main-sub-footer-wrapper {grid-template-columns: 100%; margin: 24px; gap: 16px;}
    #main-sub-footer-1 {padding: 36px 24px;}
    #main-sub-footer-2 .contact {padding: 24px;}
    #main-sub-footer-2 .contact div > div {gap: 0;}

    #main-video {flex-direction: column; gap: 16px; margin: 24px;}
    #main-video-tum {display: grid; grid-template-columns: repeat(3, 1fr);}
    #main-video-tum img { width: 100%; height: 65px;}
    #main-video-tum img:last-child {display: none;}

    .popup-back .popup-box {
        display: flex;
        flex-direction: column;
        align-items: center; /* 수평 중앙 정렬 */
        justify-content: center; /* 수직 중앙 정렬 */
        width: 80%;
        max-height: 650px; /* 최대 높이 제한 */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden; /* 높이를 초과하는 내용 숨김 */
    }
}

@media screen and (max-width: 350px) {
	 h0 {font-size: 32px;}
    h1 {font-size: 24px;}
    h2 {font-size: 22px;}
    h3 {font-size: 14px;}
    h4 {font-size: 14px; letter-spacing: -0.1em;}
    h6 {font-size: 11px;}
    .page p {font-size: 12px;}
    span {font-size: 14px;}
    .page {max-width: unset; margin: 0 auto; padding: 42px 0;}

    .mb16 {margin-bottom: 8px;}
    .mb24 {margin-bottom: 12px;}
    .mb36 {margin-bottom: 24px;}
    .mb44 {margin-bottom: 32px;}
    #main-intro-wrapper .content {padding-bottom: 50vh !important;}
	 #main-wethink-wrapper article {width: calc(100% - 36px); padding: 48px 36px; margin: 18px;}
    #main-wethink-wrapper span {font-size: 6px;}
    #main-wethink-wrapper img {height: 32px;}

}