@charset "utf-8";

/*** 공통 ***/
body .commonWrap {display: grid; grid-template-columns: auto 380px; gap: 60px;}
body .commonWrap .common {padding-top: 20px; border-top: 2px solid #000;}
body .commonWrap .common h4 {font-size: var(--fs24); color: #000; margin-bottom: 20px;}
body .commonWrap .common ul li {color: #666; display: grid; grid-template-columns: 100px auto; gap: 15px; font-size: var(--fs17); font-weight: 300;}
body .commonWrap .awards ul li {grid-template-columns: 45px auto;}
body .commonWrap .paper ul li {grid-template-columns: 35px auto;}
body .name {font-size: var(--fs35); color: #000; margin-bottom: 30px;}
body .name span {font-size: var(--fs20); margin-left: 10px; font-weight: 500;}
body .line {width: 100%; height: 1px; width: 100%; background: #D9D9D9; margin: 70px 0;}
body .directWrap .commonWrap {grid-template-columns: 430px auto;}
body .directWrap .commonWrap .active ul li {grid-template-columns: auto;}
body .tabMenu li {width: 180px;}
body .tabMenu li a {width: 180px;}
body .tabWrap {grid-template-columns: 180px auto; margin-top: 130px; gap: 100px;}



body .pageTitle {font-size: var(--fs35); color: var(--base1); padding-bottom: 25px; margin-bottom: 60px; border-bottom: 1px solid #d9d9d9;}
body .pageTitle span {color: #000; font-size: var(--fs20); padding-left:20px; font-weight: 500;}

body .profWrap .profileTop {display: grid; grid-template-columns: 180px auto; gap: 100px;}
body .profWrap .profileTop .info .awardsWrap {margin: 35px 0;}
body .profWrap .profileTop .researchImages {display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;}
body .profWrap .profileTop .researchImages .item .img {border: 1px solid #ddd; display: flex; justify-content: center; align-items: center;  height: 100%; padding: 0 20px;}
body .profWrap .profileTop .researchImages .item p {text-align: center; margin-top: 10px; color: #000; font-size: var(--fs17);}

body .directWrap {margin-top:130px;}
body .directWrap .lab-title {font-size:var(--fs26); color:#000; margin-bottom:40px;}
body .directWrap .prof-item {display: grid; grid-template-columns: auto auto; gap: 60px;}
body .directWrap .prof-item .prof-left {display: grid; grid-template-columns: 180px auto; gap: 100px;}

body .prof-position {display: grid; grid-template-columns: 430px auto; gap: 60px; margin-bottom: 30px;}
body .prof-position span {font-size: var(--fs16); font-weight: ; color: #000;}
body .prof-position p {font-size: var(--fs20); font-weight: 700; color: #000; line-height: 1;}



body .tabCon ul {border: 2px solid #000; border-left: 0; border-right: 0;}
body .tabCon ul li {display: grid; grid-template-columns: 145px auto; gap: 40px; padding: 30px;}
body .tabCon ul li+li {border: 1px solid #d9d9d9; border-left: 0; border-right: 0;}
body .tabCon ul li dl dt {font-size: var(--fs24); color: #000; font-weight: 700; margin-bottom: 20px;}
body .tabCon ul li dl dt span {font-size: var(--fs18); margin-left: 6px; font-weight: 600;}
body .tabCon ul li dl dt strong {font-weight: 700; margin-left: 16px; font-size: var(--fs16); color: var(--base1);}
body .tabCon ul li dl dd {display: grid; grid-template-columns: 150px auto; font-size: var(--fs16); color: #777; gap: 30px; justify-content: start;}
body .tabCon ul li dl dd a {color: inherit; display: inline-block;}


/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 1249px) {

    body .commonWrap {gap: 30px;}

    body .profWrap .profileTop {gap: 50px; grid-template-columns: 140px auto;}
    body .directWrap .prof-item .prof-left {gap: 50px; grid-template-columns: 140px auto;}
    body .prof-position {gap: 30px; grid-template-columns: 350px auto;}
    body .directWrap .commonWrap {grid-template-columns: 350px auto;}

    body .tabWrap {gap: 50px; grid-template-columns: 140px auto;}
    body .tabMenu li a {width: 140px; font-size: 16px;}
    body .tabMenu li {width: 140px;}
    body .tabCon ul li .img {width: 120px;}
    body .tabCon ul li {grid-template-columns: 120px auto;]}

}


/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {

    
    body .tabWrap {margin-top: 70px;}
    body .tabMenu li {width: 100%;} 
    body .tabMenu li a {width: 100%;}

    body .profWrap .profileTop {display: block;}
    body .profWrap .profileTop .photo {margin-bottom: 30px; width: 140px;}
    body .name {font-size: 25px; margin-bottom: 20px;}

    body .directWrap .prof-item {display: block;}
    body .directWrap .prof-item .prof-left {display: block;}
    body .directWrap .prof-item .prof-photo {width: 140px; margin-bottom: 30px;}

    body .line {margin: 45px 0;}
    


}

/* ************************ 모바일 이하(~767) ************************ */
@media screen and (max-width: 767px) { 

    body .commonWrap {display: block;}
    body .pageTitle span {padding-left: 10px;}
    body .pageTitle {padding-bottom: 15px; margin-bottom: 30px;}
    body .name {margin-bottom: 15px;}
    body .commonWrap .common h4 {margin-bottom: 10px;}
    body .commonWrap .common {padding-bottom: 20px;}
    body .profWrap .profileTop .info .awardsWrap {margin-bottom: 0;}
    body .prof-position {display: block;}
    body .profWrap .profileTop .researchImages {display: block;}
    body .profWrap .profileTop .researchImages .item .img {padding: 20px;}
    body .profWrap .profileTop .researchImages .item p {margin-bottom: 15px; margin-top: 5px;}

    body .tabWrap {margin-top: 20px;}
    body .directWrap {margin-top: 70px;}
    body .tabCon ul li {display: block;}
    body .tabCon ul li dl dt {margin: 10px 0;}


}

/* ************************ 모바일 이하(~500) ************************ */
@media screen and (max-width: 500px) { 

    body .pageTitle span {display: block; margin-top: 5px; padding-left: 0;}
    body .commonWrap .rightImages {display: grid; align-items: flex-start; gap: 10px ; grid-template-columns: auto auto;}
    body .commonWrap .common ul li {grid-template-columns: auto; gap: 0px;}
    body .commonWrap .common ul li+li {margin-top: 5px;}
    body .commonWrap .common ul li span {color: #000; font-weight: 600;}

    body .tabCon ul li dl dd {grid-template-columns: auto; gap: 0px;}
    body .tabCon ul li dl dd span {color: #000; font-weight: 600;}



}