@charset "utf-8";
/* CSS Document */

body{}
.box1{}

@media screen and (max-width:1400px){
.box1{ max-width:94%}

#header .box0{ width:96%; margin:0 auto}
#header .logo > a {width:8em;}
#header .gnb_wrap {padding:0;}
#header .gnb_wrap .gnb > li .dp1 {min-width:4.5em;}
#header .gnb_wrap .gnb > li .dp1 .va {font-size:.938em;}
#header .etc_wrap .mem_wrap .etc > li .in {width:4em;}

.main_visual .visual .item{ background-position:center center}
.main_visual .slogan{ transform:translate( -450px, -160px)}
.main_visual .slogan p:first-child{ font-size:1.2em}
.main_visual .slogan p:last-child{ font-size:2em}


.main_section1{ top:500px}
.quick_wrap{ height:auto}
.quick_wrap > li{ padding:2em}
.quick_wrap > li::after{ right:1em; bottom:44px; transform:scale(.6)}


/*SUB*/
#contents .subVisual_wrap .sub_gnb_wrap .gnb > li .dp2 > li{ max-width:20%!important}
.page_cover.hAuto{ padding:6em 2em 5em; box-sizing:border-box}

}

@media screen and (max-width:1024px){
body{ font-size:13px}

#header .logo > a {width:14em;}
#header .gnb_wrap { display:none}
#header .top_wrap .right{ position:absolute; right:0; top:0}

.main_visual .slogan{ transform:translate( -390px, -160px)}

.main_section3 .ref_wrap{ height:240px}

.family_wrap .control{ display:flex; flex-direction:column; width:10%; margin-top:0}
.family_wrap .control .tit{ margin-bottom:.5em}
.family_wrap .control .arrow{ position:relative}
.family_wrap .family{ width:90%}

/*sub3_2 연구소 사람들*/ 
.eri-person_list{ gap:2em 3em;}
.eri-person{width: calc( ( 100% - 9em) / 4);}

}
@media screen and (max-width:900px){
body{ font-size:11px}

#header .siteMap_wrap .gnb > li{ width:50%}

.main_visual .visual .slick-track{ height:60vh}
.main_visual .slogan{ transform:translate( -320px, -160px)}

.section2{ padding:4em 0}
.main_section3 .ref_wrap{ margin-top:140px}

#contents .subVisual_wrap .subVisual{ height:10em}
#contents .subVisual_wrap .sub_gnb_wrap{ display:none}

/* 연혁 */
.history_wrap:before, .history_wrap:after, .history_wrap .lineAni{ left:30%}
.history_wrap:after{ bottom:2px}
.history_wrap .history > li{ justify-content:flex-start}
.history_wrap .history>li .year{ justify-content:flex-start; width:35%;}
.history_wrap .history>li:nth-child(2n) .year{ text-align:left;}
.history_wrap .history>li:nth-child(2n) .year .tt:before{ left:100%; right:auto;}
.history_wrap .history>li .list{ width:60%;}
.history_wrap .history>li:nth-child(2n) .list{ order:0;}
.history_wrap .history>li:nth-child(2n) .list .detail{ order:0;}
.history_wrap .history>li:nth-child(2n) .list .detail .tt{ text-align:left}
.history_wrap .history>li:nth-child(2n) .list .detail .tt:before{ left:20px; right:auto;}

}

@media screen and (max-width:768px){
body{ font-size:11px}
#footer .info_wrap > div.box1{ flex-direction:column}
#footer .info_wrap .info{ width:100%; margin-top:20px}

.main_visual .slogan{ transform:translate( -275px, -160px)}

.main_list_col .inner:first-child{ width:100%; margin-right:0}
.main_list_col .inner:last-child{ display:none}

/*SUB*/
/*공통*/
.sub_tit1{ padding-left:1.2em}
.sub_tit1::before{ top:5px;}
.sub_tit1::after{ top:9px}

/*연구소 소개*/
.info_in .info_tx{ padding-left:3em}

/*sub3_2 연구소 사람들*/

.profile_intro{ padding:1em}
.profile_intro .info{ width:100%; padding-right:0}

/* 연구원 상세 */
.profile_intro .info{ padding-right: 0; padding-bottom: 2em;}
.profile_intro .info span{width: 6em;}
.profile_intro a{ zoom: .8;}

/* 연혁 */
.history_wrap .history>li .year .tt:before{ width:60%}

}

@media screen and (max-width:650px){
body{ font-size:10px}
.family_wrap .control{ width:15%}
.family_wrap .family{ width:85%}


.main_visual .slogan{ width:80%; text-align:center; left:50%; transform:translate(-50%, -140px)}

.quick_wrap > li::after{ display:none}
.quick_wrap > li > p{ width:30px; margin-right:10px}
.quick_wrap > li > p img{ width:100%; height:100%; object-fit:cover}

.section4 .gallery ul li{ width:50%}
.section4 .gallery ul li:nth-child(n+1):nth-child(-n+2){margin-bottom:20px}

/*SUB*/
/*공통*/
.page_cover.hAuto{ width:100%}
.page_cover .cover_top_tit:before, .page_cover .cover_top_tit:after{ width:80px; top:13px}

.sitelink_btn{ width:80%}

/*sub3_2 연구소 사람들*/ 
.eri-person_list{ gap:3em 2em}
.eri-person{ width: calc( ( 100% - 4em) / 3); height:180px}

.profile_intro .img{ width:130px; height:160px; margin-right:20px}

}

@media screen and (max-width:500px){
body{ font-size:10px}

.box1{ max-width:96%}

#header .siteMap_wrap .gnb > li{ width:100%; padding:1em 0}
#header .siteMap_wrap .gnb .dp1 .tt{ font-size:1em}
#header .siteMap_wrap .gnb .dp2{ display:flex; flex-wrap:wrap}
#header .siteMap_wrap .gnb .dp2 li{ width:50%}
#header .siteMap_wrap .gnb .dp2 > li > a{ font-size:.875em; line-height:2} 
#header .siteMap_wrap .gnb .dp2 > li > a:before{ top:12px}

.family_wrap .control{ width:22%}
.family_wrap .family{ width:78%}

.main_visual .visual .slick-track{ height:calc( 100vh - 120px)}
.main_visual .slogan{ top:40%}
.main_visual .slogan p:first-child{ fon-size:1em;}
.main_visual .slogan p:last-child{ font-size:2em; }
.main_visual .arrow_wrap{ top:40%}


.main_section1{ margin-top:-50px;}
.quick_wrap{ flex-direction:column; gap:1em 0}
.quick_wrap > li{ margin-left:0}

.section2 > div{ flex-direction:column}
.section2 .box1 > div{ width:100%}
.section2 .box1 > div.notice{ margin-bottom:30px}

.main_section3 .con_idx{ min-height:200px}

.section4 .gallery ul li{ width:100%; margin-bottom:20px}
.section4 .gallery ul li:last-child{ margin-bottom:0}

/*SUB*/
/*공통*/
.sub_tit1{ padding-left:1.5em; font-size:1.8em}
.sub_tit1::before{ top:3px}
.sub_tit1::after{ top:7px}

.list_tab{ padding:0}
.list_tab > li a{ height:4.5em;}

/*연구소 소개*/
.page_cover .cover_top_tit{ font-size:20px}
.page_cover .cover_title .t1{ font-size:13px}

.info_in .info_icon::after{ width:80px; height:80px}
.info_in .info_tx{ padding-left:4em; font-size:13px}

.eri_info .table_w2{ width:40%}
.eri_info .tbl_st2 tbody td{ padding:10px 20px}

/* 연혁 */
.history_wrap:before, .history_wrap:after, .history_wrap .lineAni{ left:24%}
.history_wrap:after{ bottom:0}
.history_wrap .history>li .year{ width:20%;}
.history_wrap .history>li .list{ width:80%;}
.history_wrap .history>li:nth-child(2n) .list .detail .tt{ font-size:1.2em}

/*오시는 길*/
.map_info1 .t1 span{ margin-right:0}

/* 연구소 활동 */
.page_cover.hAuto{ margin-bottom:60px}
.page_cover .cover_top_img{ width:50px; height:50px}
.page_cover .cover_top_tit:before{ left:-100px}
.page_cover .cover_top_tit:after { right:-100px}

/*sub3_2 연구소 사람들*/ 
.eri-person_list{ gap:3em 2em}
.eri-person{ width: calc( ( 100% - 2em) / 2); height:180px}

.profile_intro .name{ margin-bottom:10px}
.profile_intro .img{ width:100px; height:120px; margin-right:8px}
.profile_intro .txt{ width:calc( 100% - 100px)}
.profile_intro a{ padding:0 5px; line-height:30px;}
.profile_con > div{ flex-direction:column}
.profile_con > div .tit{ width:100%; margin-bottom:30px;}
.profile_con > div .tit span::after{ top:20px}










}