/* -------------------------------- 서브 헤더 -------------------------------- */
.sub-hd .right_fix img.m_img_b{display: none;}
.sub-hd.fixed .right_fix img.m_img_w{display: none;}
.sub-hd.fixed .right_fix img.m_img_b{display: inline-block;}
.sub-hd.fixed .right_fix button.hpc_sm .m_img_w{display: none;}
.sub-hd.fixed .right_fix button.hpc_sm .m_img_b{display: inline-block;}

/* -------------------------------- s_visual -------------------------------- */
.s_visual{position: relative; width: 100%; height: 520px; background: url('../images/sub/sVisual.jpg') 50% no-repeat #000; background-size: cover;}
.s_visual .s_visual_bg img{animation: mymove 5s;}
.sv_txt{position: absolute; top: 48%; left: 0; width: 100%; text-align: center; color: #fff;}
.sv_txt h3{padding-bottom: 15px; font-size: 58px; line-height: 1; position: relative; font-weight: 600;}
.sv_txt p{font-size: 18px; opacity: .8;}

@keyframes mymove{
    from{transform: scale(1.2);}
    to{transform: scale(1);}
}

/* =================== 반응형 =================== */
@media (max-width: 1600px){
    .s_visual{height: 470px;}
    .s_visual .s_visual_bg img{height: 470px;}
    .sv_txt{top: 50%;}
    .sv_txt h3{font-size: 50px;}
}
@media (max-width: 1440px){
    .s_visual{height: 430px;}
    .s_visual .s_visual_bg img{height: 430px;}
    .sv_txt h3{font-size: 46px;}
}
@media (max-width: 1280px){
    .s_visual{height: 400px;}
    .s_visual .s_visual_bg img{height: 400px;}
    .sv_txt h3{font-size: 42px;}
}
@media (max-width: 1024px){
    .s_visual{height: 360px;}
    .s_visual .s_visual_bg img{height: 360px;}
    .sv_txt h3{font-size: 36px;}
}
@media (max-width: 860px){
    .s_visual{height: 320px;}
    .s_visual .s_visual_bg img{height: 320px;}
    .sv_txt h3{font-size: 32px;}
    .sv_txt p{font-size: 16px;}
}
@media (max-width: 768px){
    .s_visual{height: 295px;}
    .s_visual .s_visual_bg img{height: 295px;}
    .sv_txt h3{padding-bottom: 12px; font-size: 30px;}
}
@media (max-width: 640px){
    .s_visual{height: 260px;}
    .s_visual .s_visual_bg img{height: 260px;}
    .sv_txt h3{padding-bottom: 10px; font-size: 28px;}
}
@media (max-width: 550px){
    .s_visual{height: 240px;}
    .s_visual .s_visual_bg img{height: 240px;}
    .sv_txt h3{font-size: 26px;}
}
@media (max-width: 450px){
    .s_visual{height: 220px;}
    .s_visual .s_visual_bg img{height: 220px;}
    .sv_txt h3{padding-bottom: 6px; font-size: 24px;}
}

/* -------------------------------- s_content -------------------------------- */
.s_content{position: relative; padding: 150px 0;} /* 모바일(768px 이하)에서 50px 로 전환 */
.s_section{max-width: 1600px; margin: 0 auto;}
.i_section{max-width: 1600px; margin: 0 auto;}
.s_tit h3{padding-bottom: 20px; text-align: center; font-size: 44px; position: relative; word-break: keep-all;}

.txtCon .ConWr a{display: block; width: calc(100% - 160px);}
.txtCon .ConWr img{display: block; transition: transform .2s ease-in;}
.txtCon .ConWr a:hover img{transform: scale(1.2);}

.loca{width: 100%; text-align: center; margin-top: -10px; padding: 0 0 20px; z-index: 10;}
.loca ul.loc li{display: inline-block; font-size: 16px; padding: 0 20px 0 0; color: #999; position: relative;}
.loca ul.loc li:after{display: block; width: 3px; height: 3px; background-color: #999; border-radius: 50%; content: ''; position: absolute; right: 6px; top: 9px;}
.loca ul.loc li.last{color: #999; position: relative; font-weight: 500; padding: 0;}
.loca ul.loc li.last:after{display: none;}
.loca ul.loc li.home i{color: #333;}

/* =================== 반응형 =================== */
@media (max-width: 1600px){
    .s_section{padding: 0 20px;}
    .i_section{padding: 0 20px;}
}
@media (max-width: 1280px){
    .s_tit h3{font-size: 38px;}
}
@media (max-width: 1024px){
    .s_tit h3{font-size: 32px;}
}
@media (max-width: 860px){
    .s_tit h3{font-size: 30px;}
    .txtCon .ConWr a{width: calc(100% - 100px);}
}
@media (max-width: 768px){
    .s_content{padding: 50px 0;}
    .s_section{padding: 0 15px;}
    .i_section{padding: 0 15px;}
    .s_tit h3{padding-bottom: 15px; font-size: 28px;}
    .txtCon .ConWr a{width: 100%;}
}
@media (max-width: 640px){
    .s_tit h3{font-size: 26px;}
    .loca{padding: 0 0 15px;}
}
@media (max-width: 550px){
    .s_tit h3{font-size: 24px;}
    .loca ul.loc li{padding: 0 16px 0 0;}
    .loca ul.loc li:after{right: 5px; top: 8px;}
}
@media (max-width: 450px){
    .s_tit h3{padding-bottom: 12px; font-size: 22px;}
}

/* -------------------------------- 서브메뉴 -------------------------------- */
.tab_view{display: none;}
.sMenu{position: absolute; width: 100%; bottom: 0; z-index: 20;}
.sub_menu{text-align: center;}
.sub_menu ul.tab_ul{border-top: 1px solid rgba(255,255,255,0.2); display: flex; justify-content: center;}
.sub_menu ul.tab_ul > li{text-align: center; position: relative; height: 70px; width: 100%;}
.sub_menu ul.tab_ul > li > a{font-size: 18px; display: inline-block; width: 100%; color: #fff; font-weight: 600; position: relative; opacity: .5; line-height: 70px; transition: .5s;}
.sub_menu ul.tab_ul > li > a::after{position: absolute; display: block; content: ''; width: 10px; height: 10px; background: #fff; border-radius: 50%; top: 30px; left: 50%; transform: translateX(-50%); opacity: 0; transition: .5s;}

.sub_menu ul.tab_ul > li.on > a{border-color: #fff; opacity: 1;}
.sub_menu ul.tab_ul > li.on > a::after{top: -6px; left: 50%; transform: translateX(-50%); opacity: 1;}
.sub_menu ul.tab_ul > li > a:hover{opacity: 1; transition: .5s;}
.sub_menu ul.tab_ul > li > a:hover::after{top: -6px; left: 50%; transform: translateX(-50%); opacity: 1; transition: .5s;}

/* =================== 반응형 =================== */
@media (max-width: 1440px){
    .sub_menu ul.tab_ul > li{height: 64px;}
    .sub_menu ul.tab_ul > li > a{font-size: 17px; line-height: 64px;}
    .sub_menu ul.tab_ul > li > a::after{top: 27px;}
}
@media (max-width: 1280px){
    .sub_menu ul.tab_ul > li{height: 60px;}
    .sub_menu ul.tab_ul > li > a{font-size: 16px; line-height: 60px;}
    .sub_menu ul.tab_ul > li > a::after{top: 25px;}
}
@media (max-width: 1024px){
    .tab_view{display: block; font-size: 16px; font-weight: 400; width: 100%; border-top: 1px solid rgba(255,255,255,0.2); padding: 10px 10px 15px; margin-top: 40px; text-align: center;}
    .tab_view span{margin-left: 15px; color: #fff;}
    .tab_view i{position: relative; top: 2px; margin-left: 5px; color: #fff;}
    .tab_view.on{cursor: pointer; color: #fff;}
    .tab_view.on span i{transform: rotateX(180deg); color: #fff;}
    .sub_menu{position: relative; box-sizing: border-box; height: 0; margin-top: 0;}
    .sub_menu ul.tab_ul{padding: 0; display: none; z-index: 100; position: absolute; width: 100%; left: 50%; transform: translateX(-50%); margin: 0 auto; line-height: 0; background: #e84052; box-sizing: border-box; box-shadow: 6px 6px 6px 0px rgba(25, 25, 25, 0.15); border: none;}
    .sub_menu ul.tab_ul > li{margin: 0; width: 100%; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.1); height: 50px;}
    .sub_menu ul.tab_ul > li > a{display: block; color: #fff; opacity: .5; line-height: 1; font-size: 16px;}
    .sub_menu ul.tab_ul > li:before{display: none;}
    .sub_menu ul.tab_ul > li.on > a{opacity: 1; color: #fff; border-bottom: 0;}
    .sub_menu ul.moreMenu{display: none;}
    .sub_menu ul.tab_ul > li.on ul.m_moreMenu{margin-top: 10px; display: flex; justify-content: center; flex-wrap: wrap;}
    .sub_menu ul.tab_ul > li ul.m_moreMenu li{padding: 4px 7px;}
    .sub_menu ul.tab_ul > li ul.m_moreMenu li a{display: inline-block; padding: 5px 10px; opacity: .3; line-height: 1; color: #fff; font-weight: 600; border: 1px solid #ddd;}
    .sub_menu ul.tab_ul > li ul.m_moreMenu li a.active{opacity: 1; color: #347f92; background: #fff;}
    .sub_menu ul.tab_ul > li.on > a::after{display: none;}
    .sub_menu ul.tab_ul > li > a:hover::after{display: none;}
}
@media (max-width: 768px){
    .tab_view{margin-top: 32px;}
    .sub_menu ul.tab_ul > li{padding: 14px 0; height: 45px;}
}
@media (max-width: 640px){
    .tab_view{margin-top: 27px;}
    .sub_menu{margin-top: -1px;}
    .sub_menu ul.tab_ul > li{padding: 13px 0; height: 40px;}
}
@media (max-width: 450px){
    .tab_view{margin-top: 20px; padding: 10px 10px 12px;}
    .sub_menu ul.tab_ul > li ul.m_moreMenu li{padding: 3px 4px;}
    .sub_menu ul.tab_ul > li ul.m_moreMenu li a{padding: 5px 8px;}
}

/* -------------------------------- 모바일 가로 스크롤 -------------------------------- */
.table_wrap{position: relative;}
.table_wrap table{width: 100%; border-spacing: 0px; border-top: 2px solid #043a57; border-left: 1px solid #ddd;}
.table_wrap table thead{background-color: #f7f7f7;}
.table_wrap table thead tr th{padding: 15px 12px; color: #333; font-weight: 500; font-size: 16px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; word-break: keep-all; letter-spacing: -0.4px;}
.table_wrap table tbody tr td{padding: 12px; color: #444; font-size: 16px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center; word-break: keep-all; letter-spacing: -0.4px;}
.table_wrap table tbody tr td.bg{background-color: #f7f7f7;}
.table_wrap .table_prev_mo{display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); z-index: 10;}
.table_wrap .table_prev_mo ul{position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -75px;}
.table_wrap .table_prev_mo ul:after{content: ''; display: block; clear: both;}
.table_wrap .table_prev_mo ul li{float: left;}
.table_wrap .table_prev_mo ul li p{font-size: 16px; color: #fff;}
.table_wrap .table_prev_mo ul li i{margin-top: 4px; font-size: 12px; color: #fff; animation: prevarrow .5s ease-in infinite alternate;}
.table_wrap p.caption{font-size: 16px; color: #666; margin-top: 10px; letter-spacing: -0.4px; word-break: keep-all;}
.table_wrap p.caption a:hover{background-color: rgba(198,16,101,.2);}

.table_wrap table tbody tr td span{display: inline-block; border-radius: 50%; width: 10px; height: 10px;}
.table_wrap table tbody tr td span.c1{background-color: #21a462;}
.table_wrap table tbody tr td span.c2{background-color: #5697e9;}
.table_wrap table tbody tr td span.c3{background-color: #7d49d0;}
.table_wrap table tbody tr td span.c4{background-color: #fbb518;}
.table_wrap table tbody tr td span.c5{background-color: #f75b20;}
.table_wrap table tbody tr td span.c6{background-color: #2d29f1;}
.table_wrap table tbody tr td a.down:hover{background-color: rgba(198,16,101,.2);}

.table_wrap span.table_each{font-size: 16px; color: #888; display: block; margin-bottom: 5px; position: absolute; right: 0; top: -30px;}

/* =================== 반응형 =================== */
@media (max-width: 1024px){
    .table_wrap table thead tr th{padding: 13px 10px;}
    .table_wrap table tbody tr td{padding: 11px 10px;}
    .table_wrap p.caption{margin-top: 8px;}
}
@media (max-width: 860px){
    .table_wrap{width: 100%; overflow-x: auto; white-space: nowrap; padding-bottom: 20px;}
    .table_wrap table{width: 100%;}
    .table_wrap .table_prev_mo{display: block;}
}
@media (max-width: 640px){
    .table_wrap table thead tr th{padding: 10px; line-height: 22px;}
    .table_wrap table tbody tr td{padding: 10px; line-height: 22px;}
    .table_wrap p.caption{margin-top: 7px;}
    .table_wrap span.table_each{top: -25px;}
}
@media (max-width: 450px){
    .table_wrap table thead tr th{padding: 8px;}
    .table_wrap table tbody tr td{padding: 8px;}
    .table_wrap table tbody tr td ul li:after{top: 9px;}
    .table_wrap p.caption{margin-top: 5px;}
    .table_wrap span.table_each{top: -20px;}
}

/* -------------------------------- s_body -------------------------------- */
.s_body{margin-bottom: 80px; position: relative;}
.s_body:after{display: block; content: ''; clear: both;}
.s_body:last-child{margin-bottom: 0;}
.s_body h1.s_txt{text-align: left; font-size: 30px; font-weight: bold; color: #101010; margin-bottom: 20px;}

/* =================== 반응형 =================== */
@media (max-width: 1280px){
    .s_body h1.s_txt{font-size: 28px; margin-bottom: 15px;}
}
@media (max-width: 1024px){
    .s_body{margin-bottom: 60px;}
    .s_body h1.s_txt{font-size: 26px;}
}
@media (max-width: 860px){
    .s_body h1.s_txt{font-size: 23px;}
}
@media (max-width: 768px){
    .s_body{margin-bottom: 50px;}
    .s_body h1.s_txt{font-size: 22px;}
}
@media (max-width: 640px){
    .s_body{margin-bottom: 40px;}
    .s_body h1.s_txt{font-size: 21px; margin-bottom: 10px;}
}
@media (max-width: 450px){
    .s_body{margin-bottom: 30px;}
    .s_body h1.s_txt{font-size: 18px; margin-bottom: 5px;}
}

/* -------------------------------- sub1_1 : About -------------------------------- */
.greet{display: flex;}
.greet .greeimg{width: 500px; height: 888px; background: url('../images/sub/about_lab.png') center no-repeat; background-size: cover; border-radius: 30px; background-color: #000;}
.greet .greeimg[data-aos="right-bg"]{width: 0;}
.greet .greeimg[data-aos="right-bg"].aos-animate{width: 100%;}
.greet .greetxt{padding: 50px; width: calc(100% - 500px);}
.greet .greetxt h3{padding-bottom: 30px; font-size: 40px; font-weight: 700; word-break: keep-all;}
.greet .greetxt h3 b{color: #872434;}
.greet .greetxt p{padding: 10px 0; font-size: 16px; line-height: 26px; color: #888; word-break: keep-all;}
.greet .greetxt h5{padding-top: 30px; text-align: right; font-size: 16px; font-weight: 500;}
.greet .bg_ccc{background-color: #eee; padding: 20px 30px; border-radius: 10px; margin-top: 50px;}

/* =================== 반응형 =================== */
@media (max-width: 1600px){
    .greet .greeimg{width: 440px; height: 780px;}
    .greet .greetxt{padding: 45px; width: calc(100% - 440px);}
    .greet .greetxt h3{padding-bottom: 25px; font-size: 36px;}
}
@media (max-width: 1440px){
    .greet .greeimg{width: 400px; height: 720px;}
    .greet .greetxt{padding: 40px; width: calc(100% - 400px);}
    .greet .greetxt h3{font-size: 33px;}
}
@media (max-width: 1280px){
    .greet .greeimg{width: 360px; height: 660px;}
    .greet .greetxt{padding: 35px; width: calc(100% - 360px);}
    .greet .greetxt h3{padding-bottom: 22px; font-size: 30px;}
    .greet .greetxt p{padding: 8px 0; line-height: 25px;}
    .greet .bg_ccc{margin-top: 40px;}
}
@media (max-width: 1024px){
    .greet{flex-direction: column;}
    .greet .greeimg{width: 100%; height: 400px;}
    .greet .greetxt{padding: 35px 0 0; width: 100%;}
    .greet .greetxt h3{padding-bottom: 20px; font-size: 28px;}
    .greet .greetxt h5{padding-top: 25px;}
    .greet .bg_ccc{margin-top: 35px;}
}
@media (max-width: 860px){
    .greet .greeimg{height: 340px;}
    .greet .greetxt h3{font-size: 26px;}
}
@media (max-width: 768px){
    .greet .greeimg{height: 300px; border-radius: 20px;}
    .greet .greetxt{padding: 30px 0 0;}
    .greet .greetxt h3{padding-bottom: 18px; font-size: 24px;}
    .greet .bg_ccc{padding: 18px 22px; margin-top: 30px;}
}
@media (max-width: 640px){
    .greet .greeimg{height: 200px; border-radius: 10px; background-image: url('../images/sub/about_lab.png');}
    .greet .greetxt h3{padding-bottom: 15px; font-size: 20px; line-height: 28px;}
    .greet .greetxt p{padding: 5px 0; line-height: 24px;}
    .greet .greetxt h5{padding-top: 15px;}
}
@media (max-width: 550px){
    .greet .greeimg{height: 180px;}
    .greet .greetxt h3{font-size: 19px; line-height: 26px;}
}
@media (max-width: 450px){
    .greet .greeimg{height: 160px;}
    .greet .greetxt{padding: 25px 0 0;}
    .greet .greetxt h3{font-size: 18px; line-height: 25px;}
    .greet .bg_ccc{padding: 15px 18px; margin-top: 25px;}
}

/* -------------------------------- sub2_1 : Professor -------------------------------- */
.prof{position: relative;}
.prof .part1{position: relative; width: 100%; display: block;}
.prof .part1 .prof-info{position: relative; width: 100%;}
.prof .part1 .prof-info .prof-img{float: left; width: 360px; text-align: center; position: relative; transition: all .3s; display: flex; align-items: center; justify-content: center;}
.prof .part1 .prof-info .prof-img .prof-sq{width: 300px; height: 350px; background: #fff; overflow: hidden; box-shadow: 6px 8px 35px rgb(135 36 52/0.2); box-sizing: border-box;}
.prof .part1 .prof-info .prof-img .prof-sq img{width: 100%;}
.prof .part1 .prof-info .prof-txt{float: right; position: relative; width: calc(100% - 400px); z-index: 2; padding: 5px 0 0 0;}
.prof .part1 .prof-info .prof-txt h2.name{position: relative; font-weight: 700; font-size: 40px; line-height: 42px; margin-bottom: 15px;}
.prof .part1 .prof-info .prof-txt span.sub-na{padding-right: 10px; display: inline-block; font-size: 22px; color: #333; line-height: 160%;}
.prof .part1 .prof-info .prof-txt span.txt-po{display: block; font-size: 20px; color: #333; line-height: 160%;}
.prof .part1 .prof-info .prof-txt .info{margin-top: 15px;}
.prof .part1 .prof-info .prof-txt .info ul{display: inline-block;}
.prof .part1 .prof-info .prof-txt .info ul li{position: relative; padding-left: 35px; font-size: 16px; font-weight: 400; line-height: 200%; padding-top: 6px;}
.prof .part1 .prof-info .prof-txt a{color: #333; width: 100%;}
.prof .part1 .prof-info .prof-txt i{content: ""; font-size: 20px; position: absolute; top: 5px; left: 0; color: #872434;}
.prof .part1 .prof-info .prof-txt a:hover{text-decoration: underline;}

.prof .part2{clear: both; position: relative; width: 100%; display: block; overflow: hidden;}
.prof .part2 .prof-list{position: relative; margin-top: 100px;}
.prof .part2 .prof-list ul > li{position: relative; padding: 0 0 0 300px;}
.prof .part2 .prof-list ul > li h3{position: absolute; top: 0; left: 0; width: 350px; padding-top: 24px; font-size: 30px; color: #872434; font-weight: 600; line-height: 34px; border-top: 4px solid #872434; letter-spacing: -1.5px;}
.prof .part2 .prof-list ul > li > ol{padding-left: 0; list-style-type: none; display: block; border-top: 1px solid #666; margin-left: 100px; padding-top: 25px;}
.prof .part2 .prof-list ul > li > ol > li{position: relative; font-size: 17px; color: #872434; line-height: 1.6; padding-bottom: 15px;}
.prof .part2 .prof-list ul > li > ol.bu-list > li{padding-left: 17px;}
.prof .part2 .prof-list ul > li > ol.bu-list > li:after{content: ""; position: absolute; top: 10px; left: 0; display: inline-block; border-radius: 50%; width: 5px; height: 5px; background: #3e69bd;}
.prof .part2 .prof-list ul > li.prof-edu > ol > li{padding: 0;}
.prof .part2 .prof-list ul > li.prof-ex > ol > li{padding: 0 0 10px 0;}
.prof .part2 .prof-list ul > li > ol > li > h4{word-break: keep-all; display: inline-block; font-size: 18px; color: #f23434; font-weight: 700; line-height: 1.6; margin-right: 10px;}
.prof .part2 .prof-list ul > li > ol > li > p{word-break: keep-all; display: inline-block; font-size: 17px; color: #555; line-height: 1.6;}
.prof .part2 .prof-list ul > li + li{margin-top: 110px;}

.prof .prof-txt h2.name{opacity: 0; transform: translateX(80px); transition: all 0.2s;}
.prof .in-view .prof-txt h2.name{opacity: 1; transform: translateX(0px); transition: all 1s 0.2s ease;}
.prof .prof-txt span.txt-po{opacity: 0; transform: translateX(80px); transition: all 0.2s;}
.prof .in-view .prof-txt span.txt-po{opacity: 1; transform: translateX(0px); transition: all 1s 0.4s ease;}
.prof .prof-info .info ul:before{opacity: 0; transform: translateX(80px); transition: all 0.2s;}
.prof .in-view .prof-info .info ul:before{opacity: 1; transform: translateX(0px); transition: all 1s 0.6s ease;}
.prof .prof-info .info ul{opacity: 0; transition: all 0.2s;}
.prof .in-view .prof-info .info ul{opacity: 1; transition: all 1s 0.8s ease;}
.prof .prof-list ul > li h3{opacity: 0; transform: translateX(80px); transition: all 0.2s;}
.prof .in-view .prof-list ul > li h3{opacity: 1; transform: translateX(0px); transition: all 1s 0.2s ease;}
.prof .prof-list ul > li > ol{opacity: 0; transform: translateX(80px); transition: all 0.2s;}
.prof .in-view .prof-list ul > li > ol{opacity: 1; transform: translateX(0px); transition: all 1s 0.4s ease;}

/* =================== 반응형 =================== */
@media (max-width: 1440px){
    .prof .part2 .prof-list{margin-top: 80px;}
    .prof .part2 .prof-list ul > li{padding: 0 0 0 260px;}
    .prof .part2 .prof-list ul > li h3{width: 260px; font-size: 27px; line-height: 31px;}
    .prof .part2 .prof-list ul > li > ol{margin-left: 60px;}
    .prof .part2 .prof-list ul > li + li{margin-top: 80px;}
}
@media (max-width: 1280px){
    .prof .part1 .prof-info .prof-img{width: 320px;}
    .prof .part1 .prof-info .prof-img .prof-sq{width: 280px; height: 330px;}
    .prof .part1 .prof-info .prof-txt{width: calc(100% - 350px);}
    .prof .part1 .prof-info .prof-txt h2.name{font-size: 34px; line-height: 38px;}
    .prof .part1 .prof-info .prof-txt span.sub-na{font-size: 20px;}
    .prof .part1 .prof-info .prof-txt span.txt-po{font-size: 18px;}
    .prof .part2 .prof-list ul > li{padding: 0 0 0 230px;}
    .prof .part2 .prof-list ul > li h3{width: 230px; font-size: 25px; line-height: 29px;}
    .prof .part2 .prof-list ul > li > ol{margin-left: 40px;}
}
@media (max-width: 1024px){
    .prof .part1 .prof-info .prof-txt h2.name span.orcid-btn{margin-top: 10px; margin-left: 0; display: block;}
    .prof .part2 .prof-list{margin-top: 50px;}
    .prof .part2 .prof-list ul > li{padding: 0 0 0 200px;}
    .prof .part2 .prof-list ul > li h3{width: 200px; font-size: 23px; line-height: 27px;}
    .prof .part2 .prof-list ul > li > ol{margin-left: 20px;}
    .prof .part2 .prof-list ul > li + li{margin-top: 50px;}
}
@media (max-width: 860px){
    .prof .part1 .prof-info .prof-img{width: 300px;}
    .prof .part1 .prof-info .prof-img .prof-sq{width: 260px; height: 300px;}
    .prof .part1 .prof-info .prof-txt{width: calc(100% - 330px);}
    .prof .part1 .prof-info .prof-txt h2.name{font-size: 30px; line-height: 34px;}
    .prof .part2 .prof-list ul > li{padding: 0 0 0 180px;}
    .prof .part2 .prof-list ul > li h3{width: 180px; font-size: 22px; line-height: 26px;}
}
@media (max-width: 768px){
    .prof .part1 .prof-info:before{display: none;}
    .prof .part1 .prof-info{height: auto; text-align: center;}
    .prof .part1 .prof-info .prof-img{display: inline-block; text-align: center; float: none; width: 100%; margin: 0 auto;}
    .prof .part1 .prof-info .prof-img img{text-align: center;}
    .prof .part1 .prof-info .prof-img .prof-sq{margin: 0 auto;}
    .prof .part1 .prof-info .prof-txt{top: 0; position: relative; float: none; width: 100%; padding: 30px 0 0 0; height: auto;}
    .prof .part1 .prof-info .prof-txt h2.name{text-align: center;}
    .prof .part1 .prof-info .prof-txt span.txt-po{text-align: center;}
    .prof .part1 .prof-info .prof-txt a{margin-right: 0;}
    .prof .part1 .prof-info .prof-txt .info{text-align: center;}
    .prof .part1 .prof-info .prof-txt .info ul{text-align: center; display: inline-block; margin: 0 auto;}
    .prof .part1 .prof-info .prof-txt .info ul li{text-align: left; width: auto;}
    .prof .part2 .prof-list ul > li{padding: 0 0 0 160px;}
    .prof .part2 .prof-list ul > li h3{width: 160px; font-size: 21px; line-height: 25px; padding-top: 20px;}
    .prof .part2 .prof-list ul > li > ol{padding-top: 20px;}
}
@media (max-width: 640px){
    .prof .part1 .prof-info .prof-txt h2.name{font-size: 25px; line-height: 27px; margin-bottom: 10px;}
    .prof .part1 .prof-info .prof-txt span.sub-na{font-size: 18px;}
    .prof .part1 .prof-info .prof-txt span.txt-po{font-size: 17px;}
    .prof .part1 .prof-info .prof-txt .info{margin-top: 15px;}
    .prof .part1 .prof-info .prof-txt .info ul li{position: relative; padding-left: 30px; font-weight: 400; line-height: 200%;}
    .prof .part1 .prof-info .prof-txt a{display: inline-block; color: #17273d; margin-bottom: 5px;}
    .prof .part1 .prof-info .prof-txt i{font-size: 20px; top: 5px; left: 0;}
    .prof .part2 .prof-list ul > li{padding: 0;}
    .prof .part2 .prof-list ul > li h3{position: relative; width: 100%; font-size: 21px; text-align: center; margin-bottom: 20px; padding-top: 20px;}
    .prof .part2 .prof-list ul > li > ol{margin: 0; padding: 0; width: 100%;}
    .prof .part2 .prof-list ul > li.prof-ex > ol > li{padding: 0;}
    .prof .part2 .prof-list ul > li.prof-aw > ol > li{padding: 0;}
    .prof .part2 .prof-list ul > li.prof-pf > ol > li{padding: 0;}
    .prof .part2 .prof-list ul > li > ol > li > h4{position: relative; top: auto; left: auto; padding: 10px 0 0 0; font-size: 16px;}
    .prof .part2 .prof-list ul > li > ol > li > p{font-size: 16px;}
}
@media (max-width: 550px){
    .prof .part1 .prof-info .prof-img .prof-sq{width: 240px; height: 280px;}
    .prof .part1 .prof-info .prof-txt h2.name{font-size: 23px; line-height: 26px;}
    .prof .part1 .prof-info .prof-txt span.txt-po{font-size: 16px;}
    .prof .part1 .prof-info .prof-txt .info ul li{padding-left: 28px;}
    .prof .part2 .prof-list ul > li h3{font-size: 20px;}
}
@media (max-width: 450px){
    .prof .part1 .prof-info .prof-img .prof-sq{width: 210px; height: 245px;}
    .prof .part1 .prof-info .prof-txt{padding: 25px 0 0 0;}
    .prof .part1 .prof-info .prof-txt h2.name{font-size: 21px; line-height: 24px;}
    .prof .part1 .prof-info .prof-txt span.sub-na{font-size: 17px;}
    .prof .part1 .prof-info .prof-txt .info ul li{padding-left: 26px;}
    .prof .part1 .prof-info .prof-txt i{font-size: 17px;}
    .prof .part2 .prof-list ul > li h3{font-size: 19px; padding-top: 16px; margin-bottom: 15px;}
}

/* -------------------------------- sub7_1 : Contact -------------------------------- */
#contact .contactWr{display: flex; align-items: center;}
#contact .contactWr .map{width: 50%; height: 450px; border-radius: 10px; overflow: hidden;}
#contact .contactWr .map iframe{width: 100%; height: 100%;}
#contact .contactWr .txt{width: 50%; margin-left: 50px; vertical-align: middle;}
#contact .contactWr .txt h2{font-size: 40px; color: #000; font-weight: 600;}
#contact .contactWr .txt h2 span{font-size: 40px; color: #f23434; font-weight: 700;}
#contact .contactWr .txt .address{padding: 25px 0 60px;}
#contact .contactWr .txt h3{font-weight: 500; font-size: 17px; color: #787878; line-height: 1.5; width: 94%; margin-bottom: 6px;}
#contact .contactWr .txt h3:last-child{margin-bottom: 0;}
#contact .contactWr .txt .address h3:nth-of-type(3){font-weight: 600;}

#contact .contactWr .txt .user{display: flex; align-items: flex-start; padding: 32px 24px; background: #f5f5f5; margin-bottom: 8px; width: 100%; position: relative;}
#contact .contactWr .txt .user::before{content: 'ECLab'; position: absolute; font-size: 60px; color: #f5f5f5; top: -65px; right: 0; font-weight: 700;}
#contact .contactWr .txt .user .user-name{font-weight: 700; font-size: 20px; color: #444;}
#contact .contactWr .txt .user .user-con{font-size: 16px; margin-left: 40px; display: flex; gap: 10px; flex-direction: column;}
#contact .contactWr .txt .user .user-con p{display: flex; align-items: center; gap: 8px;}
#contact .contactWr .txt .user .user-con p i{color: var(--main);}
#contact .contactWr .txt .user .user-con p a,
#contact .contactWr .txt .user .user-con p span{line-height: 1.4; color: #555;}
#contact .contactWr .txt .user .user-con p a:hover{text-decoration: underline;}

#contact .recruit{background: #e5eaef47; padding: 30px 40px; margin-top: 40px;}
#contact .recruit .recruit-tit{display: block; font-size: 26px; font-weight: 700; color: #444; letter-spacing: 0.5px; position: relative;}
#contact .recruit .recruit-tit object{width: 20px; position: relative; top: 2px;}
#contact .recruit .recruit-con{padding-top: 10px;}
#contact .recruit .recruit-con li{font-size: 17px; color: #333; line-height: 1.6;}
#contact .recruit .recruit-con li > h5{font-size: 17px; padding-bottom: 2px; color: #555;}

#contact .contactWr .map.ani{opacity: 0; transform: translate(-6%,0); transition: all 1s 0.2s ease;}
#contact .contactWr .map.in-view{opacity: 1; transform: translate(0,0); transition: all 1s 0.2s ease;}
#contact .contactWr .txt.ani{opacity: 0; transform: translate(6%,0); transition: all 1s 0.2s ease;}
#contact .contactWr .txt.in-view{opacity: 1; transform: translate(0,0); transition: all 1s 0.2s ease;}
#contact .recruit.ani{opacity: 0; transform: translate(0,8%); transition: all 1s 0.2s ease;}
#contact .recruit.in-view{opacity: 1; transform: translate(0,0); transition: all 1s 0.2s ease;}

/* =================== 반응형 =================== */
@media (max-width: 1440px){
    #contact .contactWr .txt h2{font-size: 36px;}
    #contact .contactWr .txt h2 span{font-size: 36px;}
    #contact .recruit .recruit-tit{font-size: 24px;}
}
@media (max-width: 1280px){
    #contact .contactWr .map{height: 420px;}
    #contact .contactWr .txt{margin-left: 40px;}
    #contact .contactWr .txt h2{font-size: 34px;}
    #contact .contactWr .txt h2 span{font-size: 34px;}
    #contact .contactWr .txt h3{font-size: 16px;}
    #contact .contactWr .txt .address{padding: 22px 0 45px;}
    #contact .contactWr .txt .user::before{font-size: 52px; top: -56px;}
    #contact .contactWr .txt .user .user-con{margin-left: 30px;}
    #contact .recruit{padding: 28px 34px;}
    #contact .recruit .recruit-tit{font-size: 23px;}
}
@media (max-width: 1024px){
    #contact .contactWr .map{height: 400px;}
    #contact .contactWr .txt h2{font-size: 32px;}
    #contact .contactWr .txt h2 span{font-size: 32px;}
    #contact .contactWr .txt .user{padding: 28px 22px;}
    #contact .contactWr .txt .user .user-name{font-size: 19px;}
    #contact .recruit .recruit-con li{font-size: 16px;}
    #contact .recruit .recruit-con li > h5{font-size: 16px;}
}
@media (max-width: 980px){
    #contact .contactWr{flex-direction: column;}
    #contact .contactWr .map{width: 90%; height: 380px;}
    #contact .contactWr .txt{width: 90%; margin-left: 0; margin-top: 25px; text-align: center;}
    #contact .contactWr .txt h3{width: 100%;}
    #contact .contactWr .txt .address{padding: 20px 0 30px;}
    #contact .contactWr .txt .user{margin: 0 auto 8px;}
}
@media (max-width: 860px){
    #contact .contactWr .map{width: 96%;}
    #contact .contactWr .txt{width: 96%;}
    #contact .contactWr .txt h2{font-size: 30px;}
    #contact .contactWr .txt h2 span{font-size: 30px;}
}
@media (max-width: 768px){
    #contact .contactWr .map{height: 340px;}
    #contact .contactWr .txt .address{padding: 12px 0 30px;}
    #contact .contactWr .txt .user{flex-direction: column; padding: 26px 24px;}
    #contact .contactWr .txt .user .user-name{margin-bottom: 6px;}
    #contact .contactWr .txt .user .user-con{margin-left: 0;}
    #contact .recruit{padding: 26px 30px; margin-top: 30px;}
    #contact .recruit .recruit-tit{font-size: 22px;}
}
@media (max-width: 640px){
    #contact .contactWr .map{height: 300px;}
    #contact .contactWr .txt h2{font-size: 28px;}
    #contact .contactWr .txt h2 span{font-size: 28px;}
    #contact .contactWr .txt .user::before{font-size: 44px; top: -48px;}
}
@media (max-width: 550px){
    #contact .contactWr .map{width: 100%;}
    #contact .contactWr .txt{width: 100%;}
    #contact .contactWr .txt h2{font-size: 26px;}
    #contact .contactWr .txt h2 span{font-size: 26px;}
    #contact .contactWr .txt .address{padding: 20px 0;}
    #contact .recruit{padding: 24px 20px;}
    #contact .recruit .recruit-tit{font-size: 21px;}
    #contact .recruit .recruit-tit object{width: 18px;}
}
@media (max-width: 450px){
    #contact .contactWr .map{height: 260px;}
    #contact .contactWr .txt h2{font-size: 23px;}
    #contact .contactWr .txt h2 span{font-size: 23px;}
    #contact .contactWr .txt .user{padding: 22px 18px;}
    #contact .contactWr .txt .user::before{font-size: 38px; top: -42px;}
    #contact .contactWr .txt .user .user-name{font-size: 17px;}
    #contact .recruit .recruit-tit{font-size: 19px;}
}

/* -------------------------------- sub2_1_a ~ sub2_1_c : Research -------------------------------- */
.rsch{position: relative; width: 100%;}
.rsch .rsch-area{margin-top: 80px;}
.rsch ul{padding: 0; margin: 0; list-style: none;}
.rsch li{margin-bottom: 60px;}
.rsch .r-num-wrap{text-align: center;}
.rsch .r-num-wrap .r-num{margin: auto; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 5px; background-color: #f23434; width: 160px; height: 35px; font-size: 16px; color: #fff; line-height: 35px; border-radius: 100px; letter-spacing: 3px; font-weight: 400;}
.rsch .sCont_title{font-weight: 700; margin: 20px 0; text-align: center; font-size: 40px; color: #333; line-height: 1.5;}
.rsch .r-item{display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 80px; flex-wrap: wrap;}
.rsch .r-left .img{background: #fff; overflow: hidden; display: flex; justify-content: center; align-items: center; padding: 24px; box-shadow: 0px 7px 29px 0px rgb(111 100 102 / 20%);}
.rsch .r-left .img img{max-width: 100%; height: auto; border-radius: 10px;}
.r-txt h5{font-size: 24px; margin-bottom: 10px; text-align: center; color: var(--main);}
.rsch .r-txt_down{background-color: #fff; padding: 24px; border-radius: 10px;}
.rsch .r-txt_down p{font-size: 19px; color: #555; line-height: 1.6; word-break: keep-all;}
.rsch .r-txt_down .bg_k{display: block; margin-top: 50px; background-color: #f6f7f8; padding: 20px;}

/* =================== 반응형 =================== */
@media (max-width: 1280px){
    .rsch .rsch-area{margin-top: 60px;}
    .rsch li{margin-bottom: 50px;}
    .rsch .sCont_title{font-size: 36px;}
    .rsch .r-item{gap: 60px;}
}
@media (max-width: 1024px){
    .rsch .sCont_title{font-size: 32px;}
    .rsch .r-item{gap: 50px;}
    .r-txt h5{font-size: 22px;}
    .rsch .r-txt_down p{font-size: 18px;}
}
@media (max-width: 860px){
    .rsch .sCont_title{font-size: 30px;}
    .rsch .r-txt_down .bg_k{margin-top: 40px;}
}
@media (max-width: 768px){
    .rsch .rsch-area{margin-top: 45px;}
    .rsch li{margin-bottom: 40px;}
    .rsch .sCont_title{font-size: 28px;}
    .rsch .r-item{gap: 40px; padding: 16px;}
    .rsch .r-left .img{padding: 8px;}
    .r-txt h5{font-size: 21px;}
}
@media (max-width: 640px){
    .rsch .sCont_title{font-size: 25px;}
    .rsch .r-item{gap: 35px; padding: 10px;}
    .rsch .r-txt_down{padding: 18px;}
    .rsch .r-txt_down p{font-size: 17px;}
    .rsch .r-txt_down .bg_k{margin-top: 35px; padding: 16px;}
}
@media (max-width: 550px){
    .rsch .sCont_title{font-size: 23px;}
    .r-txt h5{font-size: 19px;}
    .rsch .r-txt_down{padding: 16px;}
    .rsch .r-txt_down p{font-size: 16px;}
}
@media (max-width: 450px){
    .rsch .rsch-area{margin-top: 35px;}
    .rsch li{margin-bottom: 30px;}
    .rsch .r-num-wrap .r-num{width: 140px; height: 30px; line-height: 30px;}
    .rsch .sCont_title{font-size: 20px;}
    .rsch .r-item{gap: 30px; padding: 0;}
    .r-txt h5{font-size: 17px;}
    .rsch .r-txt_down .bg_k{margin-top: 25px; padding: 14px;}
}


/* ==========================================================
   About lab 대표 이미지 : 전 해상도 크롭 방지
   원본 941 x 1672 (비율 1.7768).
   기존엔 구간마다 height 가 고정(888/780/720/660/400/340/300/200/180/160px)이고
   background-size:cover 여서 비율이 어긋나는 구간에서 이미지가 잘렸다.
   (1280px 구간 360x660 = 1.833 으로 약 3% 크롭)
   폭은 구간별 값을 그대로 쓰고, 높이만 원본 비율로 따라가게 한다.
   미디어쿼리는 우선순위가 아니며, 파일 뒤쪽 규칙이므로 앞쪽 height 선언을 모두 덮어쓴다.
   ========================================================== */
.greet .greeimg{
    height: auto;
    aspect-ratio: 941 / 1672;
    align-self: flex-start;   /* flex stretch 로 늘어나 비율이 깨지는 것 방지 */
    background-size: cover;
    background-position: center;
}


/* ==========================================================
   Contact 교수님 정보 카드 : 전 해상도 세로 배치 (260903)
   기존엔 PC 에서 이름(좌) / 연락처(우) 로 나뉘었으나,
   카드 폭이 좁아 "Prof. Hyun-Cheol So / ng",
   "Engineering buil / ding" 처럼 단어 중간에서 줄바뀜이 발생했다.
   768px 이하에서 쓰던 세로 배치를 전 해상도로 확대한다.
   ========================================================== */
#contact .contactWr .txt .user{
    flex-direction: column;
    align-items: flex-start;
}
#contact .contactWr .txt .user .user-name{
    margin-bottom: 12px;
    font-size: 26px;
}
#contact .contactWr .txt .user .user-con{
    margin-left: 0;
}

/* 교수님 성함 크기 : 해상도별 조절 */
@media (max-width:1024px){
    #contact .contactWr .txt .user .user-name{font-size: 24px;}
}
@media (max-width:768px){
    #contact .contactWr .txt .user .user-name{font-size: 22px;}
}
@media (max-width:450px){
    #contact .contactWr .txt .user .user-name{font-size: 20px;}
}