@charset "utf-8";

/* members */
.members .list {display:flex; flex-wrap:wrap; column-gap:60px; row-gap:50px; word-break:break-word;}
.members .list>li {padding:40px; border:1px solid #dedede;
background:#fff; width:calc(50% - 30px); box-sizing:border-box; border-radius:20px;}
.members .list>li .left {display:flex; gap:40px;}
.members .list>li .photo {width:120px; height:160px;}
.members .list>li .photo img {width:100%; aspect-ratio:3/4; border:1px solid #dedede;}
.members .list>li .detail {width:100%;}
.members .list>li .detail {margin-top:25px; border-top:1px solid #ddd;}
.members .list>li .left .info {width:calc(100% - 160px);}
.members .list>li .left .info dl {margin-top:10px}
.members .list>li .left .info dl+dl {margin-top:2px;}
.members .list>li .info .name {display:flex; gap:10px; align-items:center; color:#000; font-size:24px; font-weight:600; line-height:1.6; padding-top:15px;}
.members .list>li .info .name span {color:#777; font-size:18px; font-weight:400;}
.members .list>li .course {color:var(--base1); font-size:15px; font-weight:500;}
.members .list>li .email {display:flex; gap:10px;}

.members .list>li .email dd {color:#000; line-height:1.8;}
.members .list>li .link {display:flex; gap:10px;}
.members .list>li .link dt {}
.members .list>li .link dt img {transform:translateY(-2px);}
.members .list>li .link dd {color:#000; line-height:1.8; font-size:15px;}
.members .list>li .email dd a:hover, .members .list>li .link dd a:hover {color:var(--base1);}
.members .list>li .topic {margin-top:25px;}
.members .list>li .topic dt {color:#000; font-size:18px; font-weight:500; padding-left:15px; position:relative;}
.members .list>li .topic dt:before {content:""; display:block; width:5px; height:15px; background:var(--base1); position:absolute; left:0; top:6px; border-radius:5px;}
.members .list>li .topic dd {color:#333; line-height:1.4; margin-top:5px; position:relative; padding-left:15px; position:relative;}
.members .list>li .topic dd li:before {content:""; display:block; width:4px; height:4px; background:#ddd; position:absolute; border-radius:50%; top:9px; left:0; }
.members .list>li .topic.typeB dd {display:grid; padding-left:0;}
.members .list>li .topic.typeB dd:before {display:none;}
.members .list>li .topic.typeB dd .during {display:inline-block; position:relative; font-weight:600; color:var(--base3);}
.members .list>li .topic.typeB dd ul li {position:relative; padding-left:15px;}
.members .list>li .topic.typeB dd ul li:before {content:""; display:block; width:4px; height:4px; background:#ddd; position:absolute; border-radius:50%; top:9px; left:0;}
.members .list>li .topic.typeB dd ul li+li {margin-top:10px;}
/*.members .list>li .topic.typeB dd .during:before {content:""; display:block; width:7px; height:2px; background:var(--base3); position:absolute; left:0; top:10px;}*/
.members .list>li .topic dd+dd {margin-top:10px;}
.members .list>li .thesis {margin-top:15px;}
.members .list>li .thesis dt {color:#000; font-size:18px; font-weight:500;}
.members .list>li .thesis dd {color:#000; line-height:1.4; margin-top:5px;}
.members .list>li .thesis dd a:hover {color:var(--red); text-decoration:underline!important;}

/* ************************ 태블릿 이하(~1199) ************************ */
@media (max-width: 1249px) {
.contents .inner {padding:0 30px;}	
/* members */
.members .list {gap:50px;}
.members .list>li {width:calc(50% - 25px); padding:30px;}


}

/* ************************ 태블릿 이하(~991) ************************ */
@media (max-width: 991px) {
.members .list {flex-direction:column; gap:40px;}
.members .list>li {width:100%;}

}

/* ************************ 모바일 ************************ */
@media (max-width: 767px) { 
.contents .inner {padding:0 20px;}	

/* members */

.members .list>li {flex-direction:column; gap:15px; padding:20px; align-items:center;}
.members .list>li .left {gap:30px;}
.members .list>li .left .info {width:calc(100% - 150px);}
.members .list>li .info {width:100%;}
.members .list>li .info .name {font-size:22px;}
.members .list>li .info .name span {font-size:16px;}
.members .list>li .course {font-size:14px;}
}

/* ************************ 모바일 ************************ */
@media (max-width: 500px) { 
.members .list>li .left {flex-direction:column; gap:0;}
.members .list>li .left .info {width:100%;}
}