@charset "utf-8";

.lab-title{display: none !important;}
.lab-mb,.lab-al,.lab-gal{padding: 0 !important;}

/* -------------------------------- 서브 헤더 -------------------------------- */
.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: #000; overflow: hidden;}
.s_visual::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../images/sub/sVisual.jpg') 50% no-repeat; background-size: cover; opacity: .5;}
.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: 20px; 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: 10px; 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: 10px; font-size: 24px;}
}

/* -------------------------------- s_content -------------------------------- */
.wrap{background: #fff;} /* 서브페이지 배경은 흰색 (메인은 .lab_wrap 이라 영향 없음) */
.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: 20px 0; z-index: 10;}
.loca ul.loc li{display: inline-block; font-size: 18px; padding: 0 20px 0 0; color: #999; position: relative; font-weight: 500;}
.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: 700; 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 20px;}
    .i_section{padding: 0 20px;}
    .s_tit h3{padding-bottom: 20px; font-size: 28px;}
    .txtCon .ConWr a{width: 100%;}
}
@media (max-width: 640px){
    .s_tit h3{font-size: 26px;}
    .loca{padding: 0 0 20px;}
}
@media (max-width: 550px){
    .s_tit h3{font-size: 24px;}
    .loca ul.loc li{padding: 0 20px 0 0;}
    .loca ul.loc li:after{right: 5px; top: 8px;}
}
@media (max-width: 450px){
    .s_tit h3{padding-bottom: 10px; 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 20px; 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: var(--point2); 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: 20px 0; border-top: 1px solid rgba(255,255,255,.1); height: auto;}
    .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: 0 10px;}
    .sub_menu ul.tab_ul > li ul.m_moreMenu li a{display: inline-block; padding: 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: var(--point1); 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: 20px 0; height: auto;}
}
@media (max-width: 640px){
    .tab_view{margin-top: 27px;}
    .sub_menu{margin-top: -1px;}
    .sub_menu ul.tab_ul > li{padding: 20px 0; height: auto;}
}
@media (max-width: 450px){
    .tab_view{margin-top: 20px; padding: 10px;}
    .sub_menu ul.tab_ul > li ul.m_moreMenu li{padding: 0 10px;}
    .sub_menu ul.tab_ul > li ul.m_moreMenu li a{padding: 10px;}
}

/* -------------------------------- 모바일 가로 스크롤 -------------------------------- */
.table_wrap{position: relative;}
.table_wrap table{width: 100%; border-spacing: 0px; border-top: 2px solid var(--point2); border-left: 1px solid #ddd;}
.table_wrap table thead{background-color: var(--bg-box);}
.table_wrap table thead tr th{padding: 20px 10px; 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: 10px; 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: var(--bg-box);}
.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(37,99,212,.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(37,99,212,.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: 10px;}
    .table_wrap table tbody tr td{padding: 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: 10px;}
    .table_wrap table tbody tr td{padding: 10px;}
    .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 --- Introduction */
#introduction {position: relative; text-align: center;}
#introduction .sub-con-wrap:nth-child(n + 3) {margin-top: 120px;}
#introduction .sub-con-wrap h2 {font-size: 32px;font-weight: 700;margin-top: 100px;margin-bottom: 0px;position: relative;display: inline-block; color: #193c6e;}
#introduction .sub-con-wrap h2:before {position: absolute; content: ""; bottom: 2px; left: 0; width: 100%; height: 2px; background-color: #193c6e;}
#introduction .bg_wrap{position: relative;overflow: hidden;}
#introduction .bg{background: url(/images/sub/intro_bg.jpg) center/cover no-repeat;height: 350px;background-attachment: fixed !important;border-radius: 20px;position: relative;}

#introduction h3 {font-size: 40px;font-weight: 700;overflow-y: hidden;word-break: keep-all;line-height: 1.3;margin-bottom: 32px;color: #193c6e;}
#introduction h3 b {color: #193c6e; font-weight: 800;}

#introduction .video-wrap {margin-top: 30px; width: 100%; /* height: 680px; */ border-radius: 15px; overflow: hidden; display: flex; justify-content: center; align-items: center;}
#introduction .video-wrap  video {width: 100%;  border-radius: 15px;}

#introduction p {width: 90%;margin: auto;font-size: 20px;word-break: keep-all;line-height: 1.8;color: #333;font-weight: 400;font-family: 'Pretendard';}
#introduction p b {color:#193c6e;}
#introduction .txt {margin-top: 35px;}
#introduction .eng {font-weight: 500;letter-spacing: -0.2px;font-size: 22px;margin-top: 20px;line-height: 1.8;/* width: 90%; */padding: 32px;background: var(--bg-box);border-radius: 20px;}

@media (max-width: 1440px){
    #introduction h3 {font-size: 28px;}
    #introduction .txt br {display: none;} /* 좁은 화면에서는 강제 줄바꿈 해제 */
    #introduction .video-wrap {height: auto;}
    #introduction .txt {font-size: 20px;}
}

@media (max-width: 1024px){
    #introduction h3 {font-size: 24px;}
    #introduction .video-wrap {margin-top: 25px;}
    #introduction .txt {font-size: 18px; margin-top: 25px;}
	#introduction .bg {height: 270px;}
}

@media (max-width: 650px){
    #introduction h3 {font-size: 20px;}
    #introduction .video-wrap {margin-top: 15px;}
    #introduction .txt {font-size: 16px;margin-top: 15px;width: 100%;}
    #introduction .eng {/* font-size: 26px; */padding: 20px;}
    #introduction .eng span {display: block;}
	#introduction .bg {height: 230px;background-attachment: unset !important;}
}

@media (max-width: 480px){
	 #introduction h3 {font-size: 18px;margin-bottom: 16px;}
	#introduction .txt {/* font-size:14px; */}
	#introduction .bg {height: 160px;}
}
/*//  sub1_1 --- Introduction */

/* -------------------------------- sub2_1 : Research topic -------------------------------- */

/* --- 리서치 토픽 탭 메뉴 (a 태그 링크 방식, 탭 전환 JS 없음) --- */
/* #Rsc_topic { padding: 60px 0; max-width: 1440px; margin: 0 auto; width: 100%; } */
.topic_tabs {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 90px;
    list-style: none;
    padding: 0;
    width: 100%;
}
.topic_tabs li {
    width: 30%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid #e6e6e6;
    background: var(--bg-box);
    font-size: 18px;
    font-weight: 500;
    color: #383838;
    cursor: pointer;
    transition: all 0.3s;
    box-sizing: border-box;
    word-break: keep-all;
}
.topic_tabs li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; } /* 탭 전체를 클릭 영역으로 */

.topic_tabs li:hover {
    background: #eef2f9;
    transition: 0.3s; 
}

.topic_tabs li.active { 
    background: #042e86; 
    /* border: 3px solid #042e86;  */
    color: #ffffff; 
    font-weight: 700; 
    position: relative;
    z-index: 2;
}
.tab_content { display: none; }
.tab_content.active { display: block; }

.topic_item { margin-bottom: 80px; }
.topic_item:last-child { margin-bottom: 0; }

.topic_item .img_wrap { 
	margin: 0 auto;
    width: 80%;
    text-align: center;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}
/* 원본보다 크게 늘리지 않음 (작은 원본이 확대되며 흐려지는 문제) */
.topic_item .img_wrap img {
    width: auto;
    max-width: 100%;
    display: block;
    height: auto;
}

.topic_item .txt_wrap { 
    background-color: var(--bg-box);
    padding: 45px 50px; 
    margin-top: 50px;
}
.topic_item .txt_wrap ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}
.topic_item .txt_wrap ul li { 
    position: relative; 
    padding-left: 20px; 
    font-size: 18px; 
    color: #333; 
    line-height: 1.6; 
    margin-bottom: 20px; 
    word-break: keep-all; 
}
.topic_item .txt_wrap ul li:last-child { margin-bottom: 0; }

.topic_item .txt_wrap ul li::before { 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 10px; 
    width: 5px; 
    height: 5px; 
    background-color: #042e86; 
    border-radius: 50%; 
}

/* 등장 애니메이션은 본문의 data-aos 로 처리 (옛 .show 클래스 방식 제거) */

@media (max-width: 1280px) {
    .topic_tabs li { font-size: 18px; }
    .topic_item .img_wrap {width: 100%;}
}

@media (max-width: 1024px) {
	.topic_tabs {display:grid; flex-wrap:nowrap; grid-template-columns: repeat(2, 1fr);}
    .topic_tabs li { width: 100%; height: 70px; font-size: 17px; }
    
    .topic_tabs li.active { border: 3px solid #042e86; }
}

@media (max-width: 767px) {
    .topic_tabs {gap: 15px;}
    .topic_tabs li { width: 100%; height: auto; padding: 15px; font-size: 16px; }
    .topic_tabs li.active { border: 3px solid #042e86; }
    .topic_item .txt_wrap {padding: 30px 20px;}
    .topic_item .txt_wrap ul li {line-height: 1.4;}
}
@media (max-width: 480px) {
    .topic_tabs {gap: 10px; display:flex; flex-direction:column;}
    #Rsc_topic {padding: 40px 0 0 0;}
    #s_content .s_tit h3 {padding-bottom: 15px;}
    .topic_tabs {margin-bottom: 50px;}
    .topic_item .txt_wrap {margin-top: 20px;}
    .topic_item {margin-bottom: 40px;}

    #bo_cate a {padding: 8px 15px !important}
}
/*//  sub2_1 : Research topic */


/* html 스킨 게시글 본문 공통 : 그누보드 default.css 의 p{word-break:break-all} 때문에 영문이 단어 중간에서 끊기는 것 방지 */
.lab-html-con p, .lab-html-con li{word-break: keep-all; overflow-wrap: break-word;}

/* -------------------------------- sub6_1 : Microscopy Overview -------------------------------- */
/* 게시글(html 스킨) 본문에 <section id="overview"> 마크업을 넣어 사용. 등장 효과는 data-aos */
#overview{--ov-navy: #193c6e; --ov-blue: #042e86; --ov-bg: var(--bg-box); --ov-line: #e6e9ef; margin: 0 auto; padding: 20px 0 40px; color: #333; font-family: 'Pretendard Variable', Pretendard, sans-serif; word-break: keep-all;}
#overview h2{margin: 0 0 60px; font-size: 42px; font-weight: 700; color: var(--ov-navy); text-align: center;}
#overview h2::after{content: ''; display: block; width: 40px; height: 3px; margin: 16px auto 0; background: var(--ov-blue);}
#overview .ov-sec{margin-top: 110px;}

/* 시설 소개 : 사진 + 글 */
.ov-intro{display: flex; align-items: center; gap: 60px;}
.ov-intro-img{flex: 0 0 42%; border-radius: 20px; overflow: hidden; background: var(--ov-bg);}
.ov-intro-img img{display: block; width: 100%; height: auto;}
.ov-intro-txt{flex: 1; min-width: 0;}
.ov-intro-txt h3{margin: 0 0 20px; font-size: 34px; font-weight: 700; line-height: 1.3; color: var(--ov-navy);}
.ov-intro-txt h3 span{display: block; margin-bottom: 10px; font-size: 18px; font-weight: 600; text-transform: uppercase; color: var(--ov-blue);}
.ov-intro-txt p{margin: 0; font-size: 18px; line-height: 1.8; color: #444;}
.ov-intro-txt p + p{margin-top: 14px;}
.ov-links{display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none;}
.ov-links a{display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--ov-line); border-radius: 999px; font-size: 17px; font-weight: 500; color: var(--ov-navy); background: #fff; transition: .25s;}
.ov-links a i{font-size: 13px; color: var(--ov-blue);}
.ov-links a:hover{border-color: var(--ov-blue); color: var(--ov-blue); transform: translateY(-2px);}

/* 예약 절차 : 아이콘 원 + Step + 설명 (짝수 단계는 회색 박스) */
.ov-steps{margin: 0; padding: 0; list-style: none; counter-reset: ovstep;}
.ov-steps li{display: flex; align-items: center; gap: 80px; padding:50px; border-radius: 20px;}
.ov-steps li:nth-child(even){background: var(--ov-bg);}
.ov-step-icon{flex: 0 0 180px; width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ov-navy); box-shadow: 0 0 0 10px #fff, 0 0 0 11px var(--ov-line); color: #fff; font-size: 36px;}
.ov-steps li:nth-child(even) .ov-step-icon{box-shadow: 0 0 0 10px var(--ov-bg), 0 0 0 11px var(--ov-line);}
.ov-step-txt{flex: 1; min-width: 0;}
.ov-step-txt em{display: block; margin-bottom: 6px; font-style: normal; font-size: 18px; font-weight: 700; color: var(--ov-blue);}
.ov-step-txt strong{display: block; margin-bottom: 8px; font-size: 26px; font-weight: 700; color: var(--ov-navy);}
.ov-step-txt p{margin: 0; font-size: 17px; line-height: 1.7; color: #555;}
.ov-step-link{display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 18px; font-weight: 600; color: var(--ov-blue);}
.ov-step-link i{font-size: 16px; transition: transform .25s;}
.ov-step-link:hover i{transform: translateX(4px);}

/* 이용 수칙 : 체크 아이콘 목록 카드 */
.ov-guide{padding: 50px 60px; border-radius: 20px; background: var(--ov-bg);}
.ov-guide > ul{margin: 0; padding: 0; list-style: none;}
.ov-guide > ul > li{position: relative; padding-left: 34px; font-size: 18px; line-height: 1.7; color: #444;}
.ov-guide > ul > li + li{margin-top: 18px;}
.ov-guide > ul > li::before{content: '\f058'; position: absolute; left: 0; top: 1px; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 19px; color: var(--ov-blue);} /* fa-circle-check */
.ov-guide ul ul{margin: 10px 0 0; padding: 0 0 0 4px; list-style: none;}
.ov-guide ul ul li{position: relative; padding-left: 16px; font-size: 18px; line-height: 1.7; color: #666;}
.ov-guide ul ul li::before{content: ''; position: absolute; left: 0; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: #b8c0cc;}
.ov-guide b{color: var(--ov-navy);}

@media (max-width: 1280px){
    #overview h2{font-size: 28px;}
    #overview .ov-sec{margin-top: 90px;}
    .ov-intro{gap: 40px;}
    .ov-intro-txt h3{font-size: 30px;}
    .ov-steps li{gap: 30px; padding: 28px 36px;}
    .ov-step-icon{flex-basis: 96px; width: 96px; height: 96px; font-size: 32px;}
}
@media (max-width: 1024px){
    #overview h2{font-size: 25px; margin-bottom: 30px;}
    #overview .ov-sec{margin-top: 70px;}
    .ov-intro{flex-direction: column; align-items: stretch; gap: 30px;}
    .ov-intro-img{flex-basis: auto;}
    .ov-intro-txt h3{font-size: 26px;}
    .ov-intro-txt p{font-size: 17px;}
    .ov-step-txt strong{font-size: 20px;}
    .ov-step-txt p{font-size: 16px;}
    .ov-guide{padding: 36px 30px;}
}
@media (max-width: 650px){
    #overview h2{font-size: 22px;}
    .ov-intro-txt h3{font-size: 22px;}
    .ov-intro-txt p{font-size: 16px;}
    .ov-links a{padding: 9px 14px; font-size: 14px;}
    .ov-steps li{gap: 18px; padding: 22px 18px; border-radius: 14px;}
    .ov-step-icon{flex-basis: 64px; width: 64px; height: 64px; font-size: 22px; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--ov-line);}
    .ov-steps li:nth-child(even) .ov-step-icon{box-shadow: 0 0 0 6px var(--ov-bg), 0 0 0 7px var(--ov-line);}
    .ov-step-txt strong{font-size: 18px;}
    .ov-step-txt p{font-size: 15px;}
    .ov-guide{padding: 26px 18px; border-radius: 14px;}
    .ov-guide > ul > li{padding-left: 28px; font-size: 15px;}
    .ov-guide ul ul li{font-size: 14px;}
}
/*//  sub6_1 : Microscopy Overview */


/* -------------------------------- sub6_3 : Equipment -------------------------------- */
/* 게시글(html 스킨) 본문에 <section id="equipment"> 마크업. 장비 블록은 사진·글 좌우 교대 */
#equipment{--eq-navy: #193c6e; --eq-blue: #042e86; --eq-bg: var(--bg-box); --eq-line: #e6e9ef; margin: 0 auto; padding: 20px 0 40px; color: #333; font-family: 'Pretendard Variable', Pretendard, sans-serif; word-break: keep-all;}
.eq-item{display: flex; align-items: flex-start; gap: 60px;}
.eq-item + .eq-item{margin-top: 110px; padding-top: 110px; border-top: 1px solid var(--eq-line);}
.eq-item:nth-child(even){flex-direction: row-reverse;}
/* 사진 박스는 스크롤 시 고정 헤더(70px) 아래에 붙어 장비 블록 끝까지 따라옴 */
.eq-img{flex: 0 0 42%; position: sticky; top: 100px; display: flex; align-items: center; justify-content: center; padding: 30px; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 10px 40px rgba(25, 60, 110, .12);}
.eq-img img{display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto;}
/* 예약 버튼을 스펙 표 위로 : 게시글 마크업은 그대로 두고 order 로 스펙 표를 맨 뒤로 보냄 */
.eq-txt{flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;}
.eq-txt > h3, .eq-txt > p{align-self: stretch;}
.eq-txt > h3{order: -1;}
#equipment .eq-txt > h3{margin-top: 0;} /* html 스킨 .lab-html-con h3 상단 여백 32px 제거 : 이용 조건 박스와 붙도록 */
.eq-txt h3{margin: 0 0 20px; font-size: 32px; font-weight: 700; line-height: 1.3; color: var(--eq-navy);}
.eq-txt h3 span{display: none;} /* 원본에 없는 분류 라벨(Super-resolution 등) 삭제, 그 자리에 .eq-rule */
.eq-txt > p{margin: 0; font-size: 18px; line-height: 1.8; color: #444;}
.eq-txt > p + p{margin-top: 14px;}
/* 이용 조건 박스 : 장비명(h3) 위, 기존 분류 라벨 자리 */
.eq-rule{order: -2; display: inline-flex; align-items: center; gap: 10px; margin: 0 0 50px; padding: 12px 18px; border-radius: 12px; background: #eef2f9; font-size: 16px; font-weight: 600; color: var(--eq-navy);}
.eq-rule i{color: var(--eq-blue);}

/* 스펙 표 */
.eq-spec{order: 1; align-self: stretch; margin-top: 34px;}
.eq-spec h4{margin: 0 0 14px; font-size: 16px; font-weight: 700; text-transform: uppercase; color: #333;}
.eq-spec table{width: 100%; border-collapse: collapse; border-top: 2px solid var(--eq-navy);}
.eq-spec th, .eq-spec td{padding: 14px 16px; border-bottom: 1px solid var(--eq-line); font-size: 16px; line-height: 1.6; text-align: left; vertical-align: top;}
.eq-spec th{width: 34%; font-weight: 600; color: var(--eq-blue); background: var(--eq-bg);}
.eq-spec td{color: #444;}
.eq-spec td br{line-height: 1.9;}

/* 캘린더로 가는 버튼 */
.eq-btn{display: inline-flex; align-items: center; gap: 20px; margin-top: 28px; padding: 16px 40px; border-radius: 999px; background: var(--eq-navy); font-size: 18px; font-weight: 600; color: #fff; transition: .25s;}
#equipment a.eq-btn{color: #fff;}
.eq-btn i{font-size: 18px; transition: transform .25s;}
.eq-btn:hover{background: var(--eq-blue); transform: translateY(-2px);}
.eq-btn:hover i{transform: translateX(4px);}

/* sub6 공통 : 예약 문의 안내(.eq-inquiry) — Equipment 본문 상단 + Reservation Calendar(calendar_new 스킨) 상단에서 공용 */
/* 제목 → 안내 문장 → 담당자·이메일·전화 한 줄, 모두 가운데 정렬 */
.eq-inquiry{display: flex; flex-direction: column; align-items: center; text-align: center; gap: 50px; margin: 0 0 50px; padding: 50px; border-radius: 20px; background: var(--bg-box); font-family: 'Pretendard Variable', Pretendard, sans-serif; word-break: keep-all;}
.eq-inquiry-txt{min-width: 0;}
.eq-inquiry-txt strong{display: block; margin: 0 0 30px; font-size: 32px; font-weight: 700; color: #193c6e;}
.eq-inquiry-txt p{margin: 0; font-size: 16px; line-height: 1.7; color: #555;}
.eq-inquiry-list{display: flex; flex-wrap: wrap; justify-content: center; gap: 80px; margin: 0; padding: 0; list-style: none;}
.eq-inquiry .eq-inquiry-txt p, .eq-inquiry .eq-inquiry-list{margin: 0;} /* html 스킨 .lab-html-con p·ul 여백 제거 */
.eq-inquiry-list li{display: flex; align-items: center; gap: 10px; font-size: 18px; color: #333;}
.eq-inquiry-list li i{font-size: 18px; color: #042e86;}
.eq-inquiry-list li span{color: #777;}
.eq-inquiry-list li b{font-weight: 600;}
.eq-inquiry-list li a{font-weight: 600; color: #042e86; text-decoration: underline; text-underline-offset: 4px;}
@media (max-width: 1024px){
    .eq-inquiry{padding: 24px;}
}
@media (max-width: 650px){
    .eq-inquiry{padding: 20px; border-radius: 14px;}
    .eq-inquiry-list{flex-direction: column; align-items: center;}
    .eq-inquiry-txt strong{font-size: 19px;}
}

@media (max-width: 1280px){
    .eq-item{gap: 40px;}
    .eq-item + .eq-item{margin-top: 90px; padding-top: 90px;}
    .eq-txt h3{font-size: 28px;}
}
@media (max-width: 1024px){
    .eq-item, .eq-item:nth-child(even){flex-direction: column; align-items: stretch; gap: 30px;}
    .eq-item + .eq-item{margin-top: 70px; padding-top: 70px;}
    .eq-img{flex-basis: auto; position: static;}
    .eq-txt h3{font-size: 25px;}
    .eq-txt > p{font-size: 17px;}
}
@media (max-width: 650px){
    .eq-item + .eq-item{margin-top: 50px; padding-top: 50px;}
    .eq-txt h3{font-size: 22px;}
    .eq-txt > p{font-size: 16px;}
    .eq-rule{padding: 10px 14px;}
    .eq-img{padding: 20px; border-radius: 14px;}
    .eq-spec th, .eq-spec td{display: block; width: auto; padding: 10px 14px;}
    .eq-spec th{border-bottom: 0; padding-bottom: 4px;}
    .eq-spec td{font-size: 16px;}
}
/*//  sub6_3 : Equipment */


/* -------------------------------- sub6_4 : Reservation Calendar -------------------------------- */
/* 게시판 스킨 skin/board/calendar_new 사용 (담당자가 예약 현황을 글로 등록). 스킨 CSS 는 스킨 폴더의 style.css,
   상단 예약 문의 안내 박스는 아래 "sub6 공통 : 예약 문의 안내(.eq-inquiry)" 를 장비 페이지와 함께 사용한다. */
/*//  sub6_4 : Reservation Calendar */




/* -------------------------------- sub7_1 : Contact Us -------------------------------- */
/* 게시글(html 스킨) 본문에 <section id="contact"> 마크업.
   위 줄 : 좌 구글맵 / 우 Professor · Lab 카드 (지도 높이는 카드 두 개 합친 만큼)
   아래 줄 : 관련 사이트 4개 큰 버튼 (전체 폭, 네이비 카드) */
#contact{--ct-navy: #193c6e; --ct-blue: #042e86; --ct-line: #e6e9ef;color: #333; font-family: 'Pretendard Variable', Pretendard, sans-serif; word-break: keep-all;}
/* html 스킨(.lab-html-con)이 h3·h4·p·ul·li 에 거는 기본 여백을 Contact 안에서는 0 으로 — 간격은 여기서 따로 지정 */
#contact h3, #contact h4, #contact p, #contact ul, #contact li{margin: 0; padding: 0;}
.ct-layout{display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch;}

/* 왼쪽 : 지도 (오른쪽 카드 높이에 맞춰 늘어남) */
.ct-map{position: relative; min-height: 420px; border-radius: 24px; overflow: hidden; background: var(--bg-box);}
.ct-map iframe{position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;}

/* 오른쪽 : 연구실 제목 + 주소·전화 줄, 아래에 교수실 회색 박스 (참고 시안 구조) */
.ct-side{display: flex; flex-direction: column; justify-content: center;}
#contact .ct-lab-tit{font-size: clamp(30px, 2.6vw, 60px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--ct-blue);}
.ct-lines{list-style: none; display: flex; flex-direction: column; align-items: flex-start;gap: 12px;}
.ct-lines:nth-child(2){padding-top: 50px !important;}
.ct-lines:last-child{padding: 30px !important;}
.ct-lines li{position: relative; font-size: 20px; line-height: 1.5; color: #444; padding-left: 26px !important;}
.ct-lines li i{position: absolute; left: 0; top: 7px; font-size: 18px; color: var(--point1, #2563d4);}
.ct-lines a{color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #c9d3e4;}
.ct-lines a:hover{color: var(--ct-blue);}
#contact .ct-prof-tit{font-size: 30px; font-weight: 700; color: var(--ct-navy);padding-top: 50px !important;}
.ct-prof-box{border-radius: 16px; background: var(--bg-box);}
.ct-prof-box .ct-lines li{font-size: 18px; color: #555;}

/* Prof. Office 아래 : 관련 사이트 작은 버튼 4개 (2×2) */
.ct-links{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; margin-top: 20px !important;}
.ct-links a{display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; border: 1px solid var(--ct-line); border-radius: 12px; background: #fff; color: var(--ct-navy); font-size: 18px; font-weight: 700; line-height: 1.3; transition: .2s; padding: 20px;}
.ct-links a i{flex: 0 0 auto; font-size: 16px; color: #8a90a0; transition: .2s;}
.ct-links a:hover{border-color: var(--point1, #2563d4); color: var(--point1, #2563d4) !important;}
.ct-links a:hover i{color: var(--point1, #2563d4); transform: translate(1px,-1px);}

/* 아래 줄 : 관련 사이트 큰 버튼 4개 */
.ct-sites-card{border-radius: 24px; background: var(--point2, #0d1f45); color: #fff;}
#contact .ct-sites-card .lbl{font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6);}
#contact .ct-sites-card h3{font-size: 24px; font-weight: 700; color: #fff;}
.ct-sites{display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none;}
.ct-sites a{display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 84px; border-radius: 16px; background: #fff; color: var(--ct-navy); transition: .25s;}
.ct-sites .txt{min-width: 0;}
.ct-sites .txt strong{display: block; font-size: 17px; font-weight: 700; line-height: 1.3;}
.ct-sites .txt span{display: block; font-size: 13px; color: #8a90a0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ct-sites .arr{flex: 0 0 36px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-box); color: var(--ct-blue); font-size: 13px; transition: .25s;}
.ct-sites a:hover{background: var(--point1, #2563d4); color: #fff; transform: translateY(-3px);}
.ct-sites a:hover .txt span{color: rgba(255,255,255,.7);}
.ct-sites a:hover .arr{background: rgba(255,255,255,.18); color: #fff; transform: rotate(45deg);}

@media (max-width: 1280px){    .ct-lines li{font-size: 16px;}
    .ct-sites .txt strong{font-size: 15.5px;}
}
@media (max-width: 1024px){    .ct-layout{grid-template-columns: 1fr;}
    .ct-map{min-height: 0; height: 400px;}
    .ct-sites{grid-template-columns: 1fr 1fr;}
    .ct-links{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 767px){    .ct-map{height: 300px; border-radius: 16px;}
    .ct-side{grid-template-columns: 1fr; gap: 14px;}
    .ct-sites-card{border-radius: 16px;}
    .ct-lab-tit{font-size: 26px;}
    .ct-lines li{font-size: 15px;}
    .ct-prof-tit{font-size: 17px;}
    .ct-prof-box{border-radius: 12px;}
    .ct-sites-card h3{font-size: 20px;}
    .ct-sites{grid-template-columns: 1fr; gap: 10px;}
    .ct-sites a{min-height: 0;}
    .ct-links{grid-template-columns: 1fr; gap: 8px;}
    .ct-links a{min-height: 46px;}
}
/*//  sub7_1 : Contact Us */