@charset "utf-8";


.sub_visual {width: 100%; height:450px; position: relative;
    background-image: url(../images/img_visual_bg.webp);  background-repeat: no-repeat;  background-position: center bottom; background-size: cover;
    background-attachment: fixed;background-color: rgba(0, 0, 0, 0.2); background-blend-mode: darken;}
.sub_visual .text_box {text-align: center; color: #fff;}
.sub_visual .text_box .add_text{font-family: "El Messiri", sans-serif; font-size: 24px; font-weight: 700; line-height: 1.1; margin-bottom: 20px;}
.sub_visual .text_box h3{font-size: 40px; font-weight: 500; line-height: 1.3; }

/* #content */
section .main_title {letter-spacing: -0.02em; line-height: 56px; margin-bottom: 20px;}
section .main_title.on {display: none;}
section .sub_text {letter-spacing: -0.02em;}
.img_box img {width: 100%;}

.list_box {padding: 160px 12.5%;}
.list_box .inner ul {display: grid; grid-template-columns: repeat(3,1fr); flex-wrap: wrap; gap:80px  20px;}
.list_box .inner ul li a {display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%;
    border-radius: 20px; background: #FAFAFA; overflow: hidden; }
.list_box .inner ul li .text_box {/* font-size: 18px; */letter-spacing: -1px;margin: 56px 10% 0;box-sizing: border-box;border-bottom: 1px solid #DFE0E2;padding-bottom: 30px;}
.list_box .inner ul li .text_box .doc_name {display: inline-block; font-weight: 500; font-size: 38px; letter-spacing: -1px; margin-right: 12px;}
.list_box .inner ul li .text_box span {font-size: 25px;display: inline-block;font-weight: 500;color: #474A4D;/* margin-left: 6px; */}
.list_box .inner ul li .text_box .branch {; color: var(--gray-color-700); position: relative;}
.list_box .inner ul li .text_box .branch::before {content: '•'; display: inline-block; color: #C5C7C9; margin-right: 6px;}
.list_box .inner ul li .text_box .parts {color: #909498; margin-top: 8px;}
.list_box .inner ul li .text_box .parts {display: none !important;} /** rmsidtest 리스트에서 parts 안보이게 처리 */

.list_box .inner ul li.doc_chief .text_box .label {font-size: 23px;padding: 4px 8px;background: var( --secondary-gold-200);border-radius: 4px;color: #3F2312;vertical-align: top;margin-top: 7px;}
.list_box .inner ul li.doc_principal .text_box .label {color: var(--primary-color);}

.list_box .inner ul li .img_box::before {content: ''; display: block; width: 80%;  margin: 20px auto 0;}
.list_box .inner ul li .img_box img {object-position: center bottom;}

@media (hover: hover) {
    .list_box .inner ul li a:hover {outline: 2px solid var( --secondary-gold-200);}
}


/* 의료진 팝업 S */
.popup_area {width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1000; background: #fff;}
.popup_area .btn_close {display: block; width: 80px; height: 80px; position: absolute; top: 40px; right: 40px; z-index: 999;}
.popup_area .btn_close span {display: block; width: 40px; height: 3px; background: #2E3032; position: absolute; top: 50%; left: 50%; margin: -1.5px -20px;}
.popup_area .btn_close span:nth-of-type(1) {transform: rotate(45deg);}
.popup_area .btn_close span:nth-of-type(2) {transform: rotate(-45deg);}

.popup_area .popup_con {height: 100%; display: flex; position: relative;}
.popup_area .popup_con > div {width: 50%; height: 100%;}
.popup_area .popup_con .img_box {height: 100%; background: #FAFAFA;}
.popup_area .popup_con .img_box img {height: 100%;object-position: center top;object-fit: cover;}
.popup_area .popup_con .img_box .doc_intro {display: none;}

.popup_area .popup_con .text_box {padding: 120px 4% 94px; box-sizing: border-box;}
.popup_area .popup_con .text_box .doc_intro {display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 52px;}
.popup_area .popup_con .text_box .doc_intro h3 strong {display: inline-block; font-size: 42px; letter-spacing: -1px; vertical-align: middle;}
.popup_area .popup_con .text_box .doc_intro h3 .label {display: inline-block; font-weight: 600; font-size: 24px; letter-spacing: -1px; background: var( --secondary-gold-200); color: #3F2312;
    padding: 6px 8px; border-radius: 6px;  vertical-align: middle; margin-left: 16px;}
.popup_area .popup_con .text_box .doc_intro .parts {display: block; font-weight: 400; font-size: 21px; letter-spacing: -1px; color: #2E3032; margin-top: 20px;}
.popup_area .popup_con .text_box .doc_intro .btn_story {display: inline-block; font-weight: 600; font-size: 21px; letter-spacing: -1px; color: #fff;
    padding: 17.5px 40px; border-radius: 100px; background: var(--primary-color); white-space: nowrap;}
.popup_area .popup_con .text_box .doc_info {overflow-y: auto; height: 80%;}
.popup_area .popup_con .text_box .doc_info .info_title {display: block; font-weight: 600; font-size: 28px; letter-spacing: -1px; margin-bottom: .6em;}
.popup_area .popup_con .text_box .doc_info .info_text {font-size: 18px; letter-spacing: -1px; color: #777C81; margin-bottom: .4em;}
.popup_area .popup_con .text_box .doc_info .info_text span {display: block;line-height: 1.8rem;/* padding-left: 1em; */position: relative;}
.popup_area .popup_con .text_box .doc_info .info_text span::before {/* content: '-'; */ display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); left: 0;}
.popup_area .popup_con .text_box .doc_info .info_text:last-of-type {margin-bottom: 0;}
.popup_area .popup_con .text_box .doc_info .video_box {width: 85%; position: relative; margin-bottom: 52px;}
.popup_area .popup_con .text_box .doc_info .video_box::before {content: ''; display: block; width: 100%; padding-top: calc(315/560 * 100%);}
.popup_area .popup_con .text_box .doc_info .video_box iframe {width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
.popup_area .popup_con .text_box .doc_info .doc_info_main {display: block;}
.popup_area .popup_con .text_box .doc_info .doc_info_main li {display: block; width: 100%;margin-bottom: 50px;}
.popup_area .popup_con .text_box .doc_info .doc_info_etc {margin-top: 40px;}

/* 스크롤바 커스텀 */
.popup_area .popup_con .text_box .doc_info::-webkit-scrollbar {width: 3px; /* 스크롤바 너비 */}
.popup_area .popup_con .text_box .doc_info::-webkit-scrollbar-thumb {background: var(--primary-color); /* 스크롤바 색상 */}
.popup_area .popup_con .text_box .doc_info::-webkit-scrollbar-track {background: #DFE0E2; /*스크롤바 뒷 배경 색상*/}

/* 의료진 팝업 E */


.btn_write {display: inline-block; outline: none; line-height: 50px; height: 50px; padding: 0 30px; border: 1px solid #777C81; border-radius: 100px; background: #fff;
    font-size: 18px;  letter-spacing: -1px; white-space: nowrap; position: relative; left: calc(100% - 105px); margin-bottom: 32px;}
.btn_write::after {display: none !important;}



/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    section .inner .title_text {font-size: 44px;}
    section .inner .sub_text {font-size: 22px; padding: 30px 0; margin-top: 30px;}
    section .inner .sub_text::before {width: 60px; margin-left: -30px;}
    section .inner .sub_explain p {font-size: 22px; line-height: 1.5em;}

    .list_box {padding: 150px 10%;}
    .list_box .inner ul li .text_box .doc_name {font-size: 30px;}
    .list_box .inner ul li .text_box span{font-size: 22px;}
    .list_box .inner ul li.doc_chief .text_box .label {font-size: 20px;margin-top:4px;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .list_box {padding: 150px 8%;}
    .list_box .inner ul li .text_box .doc_name {font-size: 28px;}
    .list_box .inner ul li .text_box span,  .list_box .inner ul li.doc_chief .text_box .label{font-size: 18px;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    .list_box {padding: 150px 6%;}
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */

    .btn_write {display: none;}

    .list_box {padding: 80px 5%;}
    .list_box .inner ul {grid-template-columns: repeat(2, 1fr); column-gap: 15px; row-gap: 40px;}
    .list_box .inner ul li a {border-radius: 15px}
    .list_box .inner ul li .text_box {font-size: 14px;/* padding: 28px 8% 0; */}
    .list_box .inner ul li .text_box::after {margin-top: 14px;}
    .list_box .inner ul li .text_box .doc_name {font-size: 24px;}
    .list_box .inner ul li .text_box span{font-size: 20px;}
    .list_box .inner ul li.doc_chief .text_box .label {font-size: 18px;padding: 3px 2px;margin-top: 0;}
    .list_box .inner ul li .text_box .branch::before {margin-right: 4px;}
    .list_box .inner ul li .text_box .parts {margin-top: 6px;}


    .list_box .inner ul li .img_box::before {width: 84%;}


    /* 의료진 팝업 S */
    .popup_area {height: 100%; overflow-y: scroll;}
    .popup_area .btn_close {width: 104px; height: 104px; position: fixed; top: 0; right: 0;}
    .popup_area .btn_close span {width: 34px; height: 2px; margin: -1px -17px;}

    .popup_area .popup_con {flex-direction: column; height: auto;}
    .popup_area .popup_con > div {width: 100%; height: auto;}
    .popup_area .popup_con .img_box {height: auto;}
    .popup_area .popup_con .img_box img {height: auto;}

    .popup_area .popup_con .text_box {padding: 80px 5%;}
    .popup_area .popup_con .text_box .doc_intro {margin-bottom: 60px;}
    .popup_area .popup_con .text_box .doc_intro h3 strong {font-size: 36px;}
    .popup_area .popup_con .text_box .doc_intro h3 .label {font-size: 22px; padding: 4px 5px; border-radius: 4px; margin: 0 16px;}
    .popup_area .popup_con .text_box .doc_intro .parts {display: inline-block; font-size: 20px; margin-top: 0; vertical-align: middle;}
    .popup_area .popup_con .text_box .doc_intro .btn_story {font-size: 16px; padding: 11.5px 20px; border-radius: 80px;}
    .popup_area .popup_con .text_box .doc_info {overflow-y: auto; height: auto;}
    .popup_area .popup_con .text_box .doc_info .info_title {font-size: 24px;}
    .popup_area .popup_con .text_box .doc_info .info_text {font-size: 16px;}
    .popup_area .popup_con .text_box .doc_info .video_box {width: 100%;}

    /* 스크롤바 커스텀 */
    .popup_area::-webkit-scrollbar {width: 3px; /* 스크롤바 너비 */}
    .popup_area::-webkit-scrollbar-thumb {background: var(--primary-color); /* 스크롤바 색상 */}
    .popup_area::-webkit-scrollbar-track {background: #DFE0E2; /*스크롤바 뒷 배경 색상*/}

    /* 의료진 팝업 E */
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .wrap { min-width: 375px; }
    #content {position: relative;}
    /* content */

    .sub_visual {box-sizing: border-box;height: 240px;background-image: url(../images/img_visual_bg_mo.jpg);background-position: center center;background-attachment:local;padding:0;}
    .sub_visual .text_box h3{font-size: 26px; }
    .sub_visual .text_box .add_text{font-size:20px;}


    .list_box {padding: 50px 5%;}
    .list_box .inner ul {grid-template-columns: repeat(1, 1fr); gap: 20px;}
    .list_box .inner ul li a {border-radius: 20px;}
    .list_box .inner ul li .text_box {font-size: 20px;margin: 42px 8% 0;padding-bottom: 20px;}
    .list_box .inner ul li .text_box::after {margin-top: 20px;}
    .list_box .inner ul li .text_box .doc_name {font-size: 30px; margin-right: 6px;}
    .list_box .inner ul li .text_box span {margin-left: 6px;}
    .list_box .inner ul li .text_box .branch::before {margin-right: 6px;}
    .list_box .inner ul li .text_box .parts {margin-top: 10px;}

    .list_box .inner ul li.doc_chief .text_box .label {padding: 5px 3.5px;margin-top: 4px;}


    /* 의료진 팝업 S */
    .popup_area .btn_close {width: 60px;height: 60px;}
    .popup_area .btn_close span {width: 20px; height: 2px; margin: -1px -10px;}

    .popup_area .popup_con .img_box {position: relative;padding-top: 160px;}
    .popup_area .popup_con .img_box .doc_intro {display: block; width: 100%; height: 100%; padding: 60px 5%; box-sizing: border-box; position: absolute; top: 0; left: 0;}
    .popup_area .popup_con .img_box .doc_intro h3 strong {display: inline-block; font-size: 32px; letter-spacing: -1px; vertical-align: middle;}
    .popup_area .popup_con .img_box .doc_intro h3 .label {display: inline-block; font-weight: 600; font-size: 18px; letter-spacing: -1px; color: var(--primary-color);
        padding: 2.5px 5.6px; border-radius: 4px; background: var( --secondary-gold-200); color: #3F2312; vertical-align: middle; margin-left: 12px;}
    .popup_area .popup_con .img_box .doc_intro .parts {display: block;font-weight: 400;font-size: 16px;letter-spacing: -1px;color: #2E3032;margin-top: 10px;display: block;}
    .popup_area .popup_con .img_box .doc_intro .btn_story {display: inline-block; font-weight: 600; font-size: 18px; letter-spacing: -1px; color: #fff;
        padding: 14.5px 20px; border-radius: 100px; background: var(--primary-color); position: absolute; bottom: 25px; right: 5%;}

    .popup_area .popup_con .text_box {padding: 60px 8%; box-sizing: border-box;}
    .popup_area .popup_con .text_box .doc_intro {display: none;}
    .popup_area .popup_con .text_box .doc_info .doc_info_main {flex-direction: column;}
    .popup_area .popup_con .text_box .doc_info .doc_info_main li {width: 100%;}
    /* 의료진 팝업 E */
}