@charset "utf-8";

/* #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%;}


.sub_visual {padding: 130px 0; text-align: center; background: linear-gradient(90deg, #3632E0 0%, #725BFC 100%); color: #fff;}
.sub_visual h1 {font-size: 72px; line-height: 80px; letter-spacing: -1px; margin-bottom: 24px;}
.sub_visual p {font-size: 28px; line-height: 32px; letter-spacing: -1px;}


/* .list_box .inner form {text-align: right; margin-bottom: 80px;}
.list_box .inner form input {border-radius: 15px; border: 3px solid #DFE0E2; padding: 16px 28px; margin-right: 10px; outline: none;
    font-family: 'Noto Sans CJK KR'; font-size: 28px; line-height: 46px; letter-spacing: -2px; vertical-align: middle;}
.list_box .inner form input::placeholder {color: #AAADB0;}
.list_box .inner form input:focus {border-color: #0C82FE;}
.list_box .inner form button {background: #0C82FE; border-radius: 15px; border: none; padding: 22px; vertical-align: middle; cursor: pointer;}
.list_box .inner form button span {display: block; position: relative;}
.list_box .inner form button span::before {content: ''; display: block; width: 36px; height: 36px; 
    background-image: url(../images/icon_search.png); background-size: contain; background-position: center; background-repeat: no-repeat;}
.list_box .inner form .btn_write {font-size: 24px; font-weight: 500; letter-spacing: -1px; color: #161718; margin-left: 2em;
    line-height: 44px; padding: 7px 36px; white-space: nowrap; border-radius: 75px; border: 1px solid #777C81; background: #FFF;}
.list_box .inner form .btn_write::after {display: none !important;}
.list_box .inner form .btn_write:hover {border: 1px solid #0C82FE; background: #0C82FE; color: #fff;} */

.list_box {padding: 160px 16.66%;}
.list_box .inner ul {display: grid; grid-template-columns: repeat(4,1fr); flex-wrap: wrap; gap: 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; transition: all .2s;}
.list_box .inner ul li .text_box {/*font-size: 18px;*/ letter-spacing: -1px; padding: 40px 10% 0; box-sizing: border-box;}
.list_box .inner ul li .text_box .doc_name {display: inline-block; font-weight: 600; font-size: 28px; letter-spacing: -1px; margin-right: 6px;}
.list_box .inner ul li .text_box span {display: inline-block; font-weight: 500; color: #474A4D; /*margin-left: 6px;*/}
.list_box .inner ul li .text_box .branch {color: #474A4D; 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.doc_chief .text_box .label {padding: 4px; background: #713FFF; border-radius: 4px; color: #fff; vertical-align: top; margin-top: 5px;}
.list_box .inner ul li.doc_principal .text_box .label {color: #713FFF;}

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

@media (hover: hover) {
    .list_box .inner ul li.doc_chief a:hover .text_box .label {background: #fff; border-radius: 4px; color: #713FFF;}
    .list_box .inner ul li a:hover {background: linear-gradient(45deg, #713FFF 0, #9570FF 100%); box-shadow: 4px 4px 10px rgba(0,0,0,.15);}
    .list_box .inner ul li a:hover .text_box {color: #fff;}
    .list_box .inner ul li a:hover .text_box span {color: #fff;}
    .list_box .inner ul li a:hover .text_box .parts {color: #fff;}
    .list_box .inner ul li a:hover .img_box::before {background: #BBA3FF;}
}


/* 의료진 팝업 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 bottom; object-fit: contain;}
.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; color: #713FFF; 
    padding: 6px 8px; border-radius: 6px; background: #F0EBFF; 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: #713FFF; white-space: nowrap;}
.popup_area .popup_con .text_box .doc_info {overflow-y: scroll; 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: flex; gap: 40px; flex-wrap: wrap;}
.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: #713FFF; /* 스크롤바 색상 */}
.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%;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .list_box {padding: 150px 8%;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    .list_box {padding: 150px 6%;}
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    .sub_visual {padding: 153px 0;}
    .sub_visual h1 {font-size: 64px; line-height: 1.2; margin-bottom: 20px;}
    .sub_visual p {font-size: 24px; line-height: 38px;}

    .btn_write {display: none;}
    

    /* .list_box .inner form {margin-bottom: 40px;}
    .list_box .inner form input {border-radius: 10px; border: 2px solid #DFE0E2; padding: 3px 20px; font-size: 24px;}
    .list_box .inner form button {border-radius: 10px; padding: 13px;}
    .list_box .inner form button span::before {width: 28px; height: 28px;} */

    
    .list_box {padding: 80px 5%;}
    .list_box .inner ul {grid-template-columns: repeat(3, 1fr); column-gap: 15px; row-gap: 20px;}
    .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: 21px;}
    .list_box .inner ul li .text_box span {/*margin-left: 4px;*/}
    .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.doc_chief .text_box .label {padding: 3px 2px;}

    .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: #713FFF; /* 스크롤바 색상 */}
    .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 {padding: 163px 0;}
    .sub_visual h1 {font-size: 48px; line-height: 1; margin-bottom: 14px;}
    .sub_visual p {font-size: 18px; line-height: 32px;}


    /* .list_box .inner form {text-align: center;}
    .list_box .inner form input {width: 75%; border: 1px solid #DFE0E2; padding: 0 16px; font-size: 20px; line-height: 40px; margin-right: 6px;}
    .list_box .inner form button {padding: 10px;}
    .list_box .inner form button span::before {width: 20px; height: 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; padding: 42px 8% 0;}
    .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;}


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

    .popup_area .popup_con .img_box {position: relative; padding-top: 120px;}
    .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: #713FFF; 
        padding: 2.5px 5.6px; border-radius: 4px; background: #F0EBFF; 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;}
    .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: #713FFF; 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 */
}