@charset "utf-8";

/* 내용관리 */
#ctt {background:#fff}
.ctt_admin {text-align:right}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {line-height:1.6em}
#ctt_con img{max-width:100%;height:auto}
.ctt_img {text-align:center}


/* Introduction */
.intro {}
.intro .t1 {font-size:36px;font-weight:700;text-align:center;color:#0a0a0a;margin:0 0 15px;}
.intro .t2 {font-size:20px;text-align:center;word-break:auto-phrase;color:#333;margin:0 0 30px;}
.intro .info_box {display:flex;gap:60px;justify-content:center;margin:0 0 100px;}
.intro .info_box p {font-size:24px;font-weight:700;color:#0a0a0a;display:flex;align-items:center;
    gap:6px;}
.intro .info_box p span {font-weight:400;color:#666;font-size:18px;display:flex;align-items:center;
    gap:6px;}
.intro .info_box p span::after {content:'';display:block;width:15px;height:1px;border-bottom:1px solid #888;}
.intro > ul {display:flex;flex-direction:column;gap:60px;}
.intro > ul li {display:flex;gap:15px;align-items:center;}
.intro > ul .right {flex-direction:row-reverse;}
.intro > ul li .img_box {width:45%;}
.intro > ul li .art_box {width:55%;display:flex;flex-direction:column;gap:10px;}
.intro > ul .p1 {font-size:28px;font-weight:700;line-height:36px;padding:0 30px;}
.intro > ul .p2 {font-size:18px;font-weight:500;line-height:26px;padding:0 30px;
    color:#888;}
.intro > ul .left .p1 {text-align:right;}
.intro > ul .left .p2 {text-align:right;}


/* Publications */
.publications {display:flex;flex-direction:column;}
.publications li {}
.publications .year {padding:0 10px;line-height:56px;font-size:24px;font-weight:700;color:#0A4A9B;
    border-bottom:1px solid #0A4A9B;}
.publications .cont_wrap {padding:25px 10px;display:flex;flex-direction:column;gap:20px;}
.publications .cont_wrap p {font-size:16px;line-height:24px;color:#555;word-break:auto-phrase;}
.publications .cont_wrap p .bold {font-weight:700;font-size:18px;color:#0a0a0a;}



/* Teaching */
.teaching {}
.teaching ul {display:flex;flex-direction:column;position:relative;gap:30px;}
.teaching ul::before {content:'';position:absolute;top:15px;left:50%;transform:translateX(-50%);
    width:3px;height:calc(100% - 15px);background:#eee;}
.teaching ul li {width:calc(50% - 40px);position:relative;display:flex;flex-direction:column;gap:10px;}
.teaching ul li:nth-child(2n) {text-align:right;}
.teaching ul li:nth-child(2n-1) {align-self:end;}
.teaching .date {font-size:28px;font-weight:700;color:#0a4a9b;position:relative;}
.teaching .date::before {content:'';position:absolute;top:50%;left:-52px;width:24px;height:24px;border-radius:100vw;
    background:#fff;transform:translateY(-50%);border:4px solid #0a4a9b;}
.teaching li:nth-child(2n) .date::before {left:auto;right:-52px;}
.teaching .art_box {display:flex;flex-direction:column;gap:5px;}
.teaching .art_box span {padding-left:20px;font-size:16px;font-weight:500;display:block;line-height:26px;
    position:relative;}
.teaching .art_box span::before {content:'';position:absolute;top:10px;left:6px;width:4px;height:4px;
    background:#333;border-radius:100vw;}
.teaching li:nth-child(2n) .art_box span {padding-left:auto;padding-right:20px;}
.teaching li:nth-child(2n) .art_box span::before {left:auto;right:6px;}















@media (max-width:1220px) {
    .intro .t1 {font-size:32px;margin:0 0 5px;}
    .intro .t2 {font-size:18px;margin:0 0 20px;}
    .intro .info_box p {font-size:22px;}
    .intro > ul .p1 {font-size:24px;line-height:30px;}
    .intro > ul .p2 {font-size:16px;line-height:24px;}

    .teaching ul li {gap:8px;width:calc(50% - 30px)};
    .teaching .date {font-size:24px;}
    .teaching .date::before {width:20px;height:20px;left:-40px;border:3px solid #0a4a9b;}
    .teaching li:nth-child(2n) .date::before {right:-40px;}
    .teaching .art_box {gap:3px}
    .teaching .art_box span {font-size:15px;}
}

@media (max-width:640px) {
    .intro .t1 {font-size:26px;margin:0 0 5px;}
    .intro .t2 {font-size:16px;}
    .intro .info_box {gap:10px;margin:0 0 50px;flex-direction:column;align-items:center;}
    .intro .info_box p {font-size:18px;}
    .intro .info_box p span {font-size:14px;}
    .intro > ul li {flex-direction:column!important;}
    .intro > ul li > * {width:100%!important;}
    .intro > ul .p1 {text-align:center!important;font-size:20px;line-height:26px;padding:0;}
    .intro > ul .p2 {text-align:center!important;font-size:14px;line-height:20px;padding:0;}

    
}