@import url('sub.css'); 





/**** S:: 연구원 소개 > 인사말 ****/
.greeting_cont {display:flex; flex-wrap:wrap; align-items:flex-start;}
.greeting_cont .tbox {width:calc(100% - 685px); padding-right:50px; box-sizing:border-box;}
.greeting_cont .tbox .fs22 {margin:35px 0;}
.greeting_cont .tbox .stxt+.stxt {margin:25px 0 0;}
.greeting_cont .imgBox {position:relative; width:685px; z-index:10;}
.greeting_cont .imgBox::after {content:''; width:180px; height:180px; background:url("/about/img/greeting_ci.png")no-repeat center; position:absolute; top:0; right:0; z-index:-1;}
.greeting_cont .imgBox span {padding:35px 21px; height:calc(100% - 145px); box-sizing:border-box; writing-mode: vertical-rl; text-orientation: mixed; position:absolute; bottom:0; left:505px; background:var(--main); color:var(--white); font-weight: 600; line-height:100%; letter-spacing: 0.54px;}
.greeting_cont .imgBox .img_in {width:505px; position:relative; }
.greeting_cont .imgBox .img_in img {width:100%;}
.greeting_cont .imgBox .img_in .profile {box-sizing:border-box; padding:35px 50px; box-sizing:border-box; background:var(--sub5); width:calc(100% - 60px); margin:0 0 0 auto;}
.greeting_cont .imgBox .img_in .profile p {color:var(--white);}
.greeting_cont .imgBox .img_in .profile h4 {color: var(--white); font-size: 1.5rem; font-weight: 700; line-height:144.444%; letter-spacing: -1.62px; margin:6px 0 0;}
/**** E:: 연구원 소개 > 인사말 ****/



/**** S:: 연구원 소개 > 연혁 ****/
.cont_table {display:flex; flex-wrap:wrap; justify-content:space-between;}
.cont_table .tBox {width:50%; padding-right:5%; box-sizing:border-box;}
.cont_table .tBox .fs40 {margin:0 0 30px;}
.cont_table .imgBox {width:50%; max-width:810px;}
.cont_table .imgBox img {width:100%;}

.history_bbs_cont {}
.history_bbs_cont .bg {position:sticky; top:0; left:0; width:100%; height:var(--vh); background:var(--grayBg) url("/about/img/history_bg.png")no-repeat center / cover; border-radius:50px 50px 0 0;}
.history_bbs_cont .basic_in {margin-top:calc(var(--vh) * -1);}
/**** E:: 연구원 소개 > 연혁 ****/



/**** S:: 연구원 소개 > 소속운영위원회 ****/
.people_main {display: grid;  grid-template-columns: repeat(2, 1fr);  gap:30px;}
.people_main dl {display:flex; flex-wrap:wrap; align-items:flex-start; background: var(--grayBg); padding:60px; box-sizing:border-box;}
.people_main dl dt {width:230px; overflow: hidden; aspect-ratio: 3 / 4;}
.people_main dl dt img {display: block; width: 100%; height: 100%; object-fit: cover;}
.people_main dl dd {width:calc(100% - 230px); padding:30px 0 0 60px; box-sizing:border-box;}
.people_main dl dd .pointColor {display:block; font-size: 1.5rem; font-weight: 700; line-height:144.444%; letter-spacing: -1.62px; margin:0 0 30px;}
.people_main dl dd h4 {font-size: 1.222rem; font-weight: 400; line-height: 154.545%; letter-spacing: -0.88px; color:var(--white); margin:0 0 20px;}
.people_main dl dd h4 b {font-size: 1.888rem; font-weight: 700; line-height:100%; letter-spacing: -2.04px; margin-right:7px; display:inline-block;}
.people_main dl dd p {color: var(--basic); letter-spacing: -0.72px; padding-left:40px; position:relative; }
.people_main dl dd p+p {margin:7px 0 0;}
.people_main dl dd p span {position:absolute; top:2px; left:0; font-size: 0.8333rem; font-weight: 700; line-height:166.667%; letter-spacing: -0.3px; color:var(--white);}

.people_list {display: grid;  grid-template-columns: repeat(3, 1fr);  gap:30px;}
.people_list dl {display:flex; flex-wrap:wrap; align-items:flex-start; padding:30px; box-sizing:border-box; border:1px solid var(--border);}
.people_list dl dt {width:150px; overflow: hidden; aspect-ratio: 3 / 4;}
.people_list dl dt img {display: block; width: 100%; height: 100%; object-fit: cover;}
.people_list dl dd {width:calc(100% - 150px); padding:5px 0 0 30px; box-sizing:border-box;}
.people_list dl dd h4 {color: var(--white); font-weight: 400; line-height:155.556%; letter-spacing: -0.72px; margin:0 0 15px;}
.people_list dl dd h4 b {font-size: 1.5rem; font-weight: 700; line-height:144.444%; letter-spacing: -1.62px; display:inline-block; margin-right:7px;}
.people_list dl dd p {color: var(--basic); letter-spacing: -0.72px; padding-left:40px; position:relative; }
.people_list dl dd p+p {margin:7px 0 0;}
.people_list dl dd p span {position:absolute; top:2px; left:0; font-size: 0.8333rem; font-weight: 700; line-height:166.667%; letter-spacing: -0.3px; color:var(--white);}
/**** E:: 연구원 소개 > 소속운영위원회 ****/




/**** S:: 연구원 소개 > 조직도 ****/
.organ_wrap {position:relative; }
.organ_line {position:Absolute; top:0; left:0; width:100%; height:100%;}
.organ_line ul {display:flex; flex-wrap:wrap; justify-content:space-between; height:1px; background:rgba(255,255,255,0.35); position:absolute; }
.organ_line ul.one {width:calc(59.5% + 40px); top:205px; left:50%; transform:translateX(-50%); z-index:10;}
.organ_line ul.two {width:calc(61.4%); top:490px; left:9.25%;  z-index:10;}
.organ_line ul.three {width:10.7%; top:490px; right:19%;  z-index:10; justify-content:flex-end;}
.organ_line ul li {border-radius:100%; transform:translateY(-50%);}
.organ_line ul li.dot {width: 7px; height: 7px; background:var(--main); position:relative; }
.organ_line ul li.dot:nth-of-type(1) {}
.organ_line ul li.dot:nth-of-type(2) {left:-1px;}
.organ_line ul li.dot:nth-of-type(3) {left:-1px;}
.organ_line ul li.dot:nth-of-type(4) {}


.organ_line ul li.border {width: 9px; height: 9px; border:3px solid var(--sub5); box-sizing:border-box; background:var(--black);}
.organ_line ul.two li::after {content:''; width:1px; height:70px; background:rgba(255,255,255,0.35); position:absolute; bottom:0; left:45%; transform:translateY(100%);}
.organ_line ul.two li:nth-of-type(3)::after {display:none;}
.organ_cont {position:relative; display:flex; flex-wrap:wrap; padding:0 0 450px}
.organ_cont dl {width:calc((100% - 160px) / 5);}
.organ_cont dl dt {width:100%; position:relative; font-size: 1.222rem; box-sizing:border-box; font-weight: 700; line-height: 154.545%; letter-spacing: -0.88px; background:var(--main); border-radius:10px; text-align:center; color: var(--white); padding:14px 10px 16px; margin:0 0 10px;}
.organ_cont dl.blue, .organ_cont dl.five {margin-left:40px;}
.organ_cont dl.blue.seven {margin-left:0;}
.organ_cont dl.center dt {width:calc((100% - 160px) / 5);}
.organ_cont dl.center.one {width:100%;}
.organ_cont dl.center.one dt {background:var(--sub5); margin:0 auto 145px;}
.organ_cont dl.center.one dt::after {content:''; width:1px; height:145px; bottom:0; left:50%; position:absolute; transform:translateY(100%); background:rgba(255,255,255,0.35);}
.organ_cont dl.center.three {width:100%;}
.organ_cont dl.center.three dt {border:5px solid var(--sub3); box-sizing:border-box; background:transparent; margin:0 auto 160px;}
.organ_cont dl.center.three dt::after {content:''; width:1px; height:160px; bottom:0; left:50%; position:absolute; transform:translateY(102%); background:rgba(255,255,255,0.35);}
.organ_cont dl.center.three dt b {color:var(--sub3);}
.organ_cont dl.center dt b {font-size:1.5rem; font-weight: 700; line-height:144.444%; letter-spacing: -1.62px;}
.organ_cont dl.center dt p {font-size: 1.222rem; font-weight: 400; line-height: 154.545%; letter-spacing: -0.88px; color:rgba(255,255,255,0.6); padding-top:10px; margin-top:10px; border-top:1px solid var(--border); max-width:200px; margin-left:auto; margin-right:auto;}

.organ_cont dl dd {position:relative; letter-spacing: -0.72px; color: var(--white); text-align: center; padding:15px 10px; box-sizing:border-box; background:rgba(255,255,255,0.3); border-radius: 10px;}
.organ_cont dl.two dd {border:1px solid var(--border); background:transparent;}
.organ_cont dl dd b {display:block; color: var(--main); font-size: 0.8333rem; font-weight: 700; line-height:166.667%; letter-spacing: -0.3px; margin:0 0 2px;}
.organ_cont dl dd+dd {margin:2px 0 0;}


.organ_cont dl.two {position:absolute; top:175px; left:0;}
.organ_cont dl.four {position:absolute; top:175px; right:0;}
.organ_cont dl.four dt {background: var(--sub4);}
.organ_cont dl.four dd {background:rgba(255,255,255,0.15);}

.organ_cont dl.five dt {background: var(--white); color:var(--black);}
.organ_cont dl.six {display:flex; flex-wrap:wrap; justify-content:space-between; align-content:flex-start;}
.organ_cont dl.six dd {width:calc((100% - 2px) / 2);}

.organ_cont dl.two::after {content:''; width:1px; height:calc(100% - 58px); position:absolute; top:50%; right:-20px; transform:translateY(-50%); border-left:1px solid rgba(255,255,255,0.35); box-sizing:border-box;}
.organ_cont dl.four::after {content:''; width:1px; height:calc(100% - 60px); position:absolute; bottom:29px; left:-20px; border-left:1px dashed rgba(255,255,255,0.35); box-sizing:border-box;}
.organ_cont dl.two dd::before, .organ_cont dl.four dd::before {content:''; width:20px; height:1px; border-top:1px dashed rgba(255,255,255,0.35); box-sizing:border-box; position:absolute; top:50%;}
.organ_cont dl.two dd::before {right:0; transform:translateX(100%);  border:1px solid rgba(255,255,255,0.35);}
.organ_cont dl.four dt::before {content:''; width:20px; height:1px; border-top:1px dashed rgba(255,255,255,0.35); box-sizing:border-box; position:absolute; top:50%; left:0; transform:translateX(-100%);}
.organ_cont dl.four dd::before {left:0; transform:translateX(-100%);}
/**** E:: 연구원 소개 > 조직도 ****/


/**** S:: 연구원 소개 > 찾아오시는 길 ****/
.location_cont{}
.location_cont .subTxt{padding:0 0 50px;}
.location_cont .location_map{}
.location_cont .location_map .root_daum_roughmap {width:100%;}
.location_cont .location_map .wrap_map{width:100%; height:550px;}
.location_cont .location_map .map_border{display:none !important;}
.location_cont .location_map .wrap_controllers{display:none !important;}
.location_cont .location_info{padding:30px 0 0; display:flex; flex-wrap:wrap; align-items:center;}
.location_cont .location_info ul{width:calc(100% - 520px); box-sizing:border-box; padding:0 30px 0 0; font-size:0;}
.location_cont .location_info ul li{display:inline-block; vertical-align:top; font-size:1.125rem; line-height:150%; padding: 3px 20px 3px 0;}
.location_cont .location_info ul li span{display:inline-block; letter-spacing:-0.35pt; color:var(--black); line-height:150%; margin-right: 7px;}
.location_cont .location_info .location_btn{display:flex;}
.location_cont .location_info .location_btn a{display: inline-block; margin: 0 0 0 5px; width: 170px; height: 60px; line-height: 58px; box-sizing:border-box; border:1px solid; text-align:center; transition:all .3s linear; font-size:1.063rem; letter-spacing: -0.35pt; font-weight: 500;}
.location_cont .location_info .location_btn a:first-child{margin: 0;}
.location_cont .location_info .location_btn a svg{display: inline-block; vertical-align: middle; margin: -2px 12px 0 0; transition:all .3s linear;}
.location_cont .location_info .location_btn a svg path{fill:#fff; transition:all .3s linear;}

.location_cont .location_info .location_btn a.naver_map{background:#10D265; border-color:#10D265; color:#fff;}
.location_cont .location_info .location_btn a.naver_map svg{width: 15px;}
.location_cont .location_info .location_btn a.naver_map:hover{background:#fff; color:#10D265;}
.location_cont .location_info .location_btn a.naver_map:hover svg path{fill:#10D265 !important;}

.location_cont .location_info .location_btn a.kakao_map{background:#FAE100; border-color:#FAE100; color:#371C1D;}
.location_cont .location_info .location_btn a.kakao_map svg{width: 13px;}
.location_cont .location_info .location_btn a.kakao_map svg path{fill:#371C1D;}

.location_cont .location_info .location_btn a.kakao_map:hover{background:#371C1D; border-color:#371C1D; color:#FAE100;}
.location_cont .location_info .location_btn a.kakao_map:hover svg path{fill:#FAE100;}

.location_cont .location_info .location_btn a.printBtn{background:var(--main); border-color:var(--main); color:#fff;}
.location_cont .location_info .location_btn a.printBtn:before{content:'\e55b'; display: inline-block; vertical-align: middle; margin: -2px 12px 0 0; color:#fff; font-family: "Material Symbols Outlined"; font-size:24px; font-weight: 400;}
.location_cont .location_info .location_btn a.printBtn:hover{background:var(--sub); border-color:var(--sub); color:#fff;}


.location_cont.print .location_info ul{width:calc(100% - 130px);}
.location_cont.print .location_info .location_btn{width: 130px;}
.location_cont.print .location_info .location_btn a{margin:0;}
/**** E:: 연구원 소개 > 찾아오시는 길 ****/



/*******************************************************************************
	@media ~1700px
*******************************************************************************/
@media all and (max-width:1700px) { 

/**** S:: 연구원 소개 > 인사말 ****/
.greeting_cont .tbox br {display:none;}
/**** E:: 연구원 소개 > 인사말 ****/

/**** S:: 연구원 소개 > 연혁 ****/
.cont_table .tBox br {display:none;}
/**** E:: 연구원 소개 > 연혁 ****/


}
/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 


}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 

/**** S:: 연구원 소개 > 인사말 ****/
.greeting_cont .tbox {width:50%; padding-right:5%;}
.greeting_cont .imgBox {width:50%;}
.greeting_cont .imgBox::after {width:25%; height:25%; background-size:100% !important;}
.greeting_cont .imgBox span {left:auto; right:60px;}
.greeting_cont .imgBox .img_in {width:calc(100% - 120px);}
.greeting_cont .imgBox .img_in .profile {padding:25px 30px;}
.greeting_cont .tbox .stxt+.stxt {margin:15px 0 0;}
/**** E:: 연구원 소개 > 인사말 ****/


.people_main dl {padding:30px;}
.people_main dl dt {width:170px;}
.people_main dl dd {width:calc(100% - 170px); padding:10px 0 0 30px;}
.people_main dl dd .pointColor {font-size:1.3rem; margin:0 0 15px;}
.people_main dl dd h4 b {font-size:1.5rem;}
.people_list {grid-template-columns: repeat(2, 1fr);}


}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 

/**** S:: 연구원 소개 > 인사말 ****/
.greeting_cont .tbox {width:60%; padding-right:5%;}
.greeting_cont .tbox .fs22 {margin:20px 0;}
.greeting_cont .imgBox {width:40%;}
.greeting_cont .imgBox::after {width:25%; height:25%; background-size:100% !important; top:-80px;}
.greeting_cont .imgBox span {left:auto; right:0; padding:20px 15px;}
.greeting_cont .imgBox .img_in {width:calc(100% - 45px);}
.greeting_cont .imgBox .img_in .profile {padding:25px 30px;}
.greeting_cont .tbox .stxt+.stxt {margin:15px 0 0;}
/**** E:: 연구원 소개 > 인사말 ****/


.organ_line ul.one {top:145px; width:calc(50% + 20px);}
.organ_line ul.two {width:77%; left:50%; transform:translateX(-50%); display:none;}
/*.organ_line ul.two li::after {height:30px; display:block !important;}
.organ_line ul.two {top:1172px;}*/

.organ_line ul.three {display:none;}
.organ_cont {justify-content:space-between; padding-bottom:0}
.organ_cont dl {position:relative; width:calc((100% - 30px) / 4);}
.organ_cont dl.blue, .organ_cont dl.five {margin-left:0;}
.organ_cont dl.two, .organ_cont dl.four {position:relative; top:0; width:calc(50% - 10px);}
.organ_cont dl.two::after, .organ_cont dl.four::after, .organ_cont dl.four dt::before {display:none;}
.organ_cont dl.two::after, .organ_cont dl.four::after {content:''; display:block; width:1px; height:30px; background:rgba(255,255,255,0.35); border:0; position:absolute; top:0; left:50%; transform:translateY(-100%);}
.organ_cont dl.two dd::before, .organ_cont dl.four dd::before {display:none;}
.organ_cont dl.center dt {width:50%;}
.organ_cont dl.center.one dt {margin:0 auto 65px;}
.organ_cont dl.center.one dt::after {height:32px; }
.organ_cont dl.center.three dt {margin:60px auto;}
.organ_cont dl.center.three dt::after {height:30px; bottom:-4px}
.organ_cont dl.center.three::before{content:""; display:block; position:absolute; bottom:30px; left:50%; transform: translateX(-50%); width:calc(((100% - 30px) / 4) * 3 + 30px); background:rgba(255,255,255,0.35); height:1px;}
.organ_cont dl.six dd {width:100%;}

.organ_cont dl.five::before, .organ_cont dl.six::before, .organ_cont dl.seven::before, .organ_cont dl.eight::before{content:""; display:block; width:1px; height:30px; position:absolute; left:50%; top:-30px; background:rgba(255,255,255,0.35); }
.organ_cont dl.five::after, .organ_cont dl.six::after, .organ_cont dl.seven::after, .organ_cont dl.eight::after{content:""; display:block; position:absolute; left:50%; top:-34px; width: 7px; height: 7px; background: var(--main); border-radius:9px; margin-left:-3px}


}
/*******************************************************************************
	@media 768px
*******************************************************************************/
@media all and (max-width:768px) { 


/**** S:: 연구원 소개 > 인사말 ****/
.greeting_cont .tbox {order:2; width:100%; padding-right:0; padding-top:40px;}
.greeting_cont .tbox .fs22 {margin:20px 0;}
.greeting_cont .imgBox {order:1; width:100%;}
.greeting_cont .imgBox::after {width:25%; height:25%; background-size:100% !important; top:-80px;}
.greeting_cont .imgBox span {left:auto; right:0; padding:20px 15px;}
.greeting_cont .imgBox .img_in {width:calc(100% - 44px);}
.greeting_cont .imgBox .img_in .profile {padding:15px 20px; width:calc(100% - 20px);}
.greeting_cont .imgBox .img_in .profile h4 {font-size:1.3rem;}
.greeting_cont .tbox .stxt+.stxt {margin:15px 0 0;}
/**** E:: 연구원 소개 > 인사말 ****/


.people_main {grid-template-columns: repeat(1, 1fr); gap:15px 0;}
.people_main dl {align-items:center; padding:15px;}
.people_main dl dt {width:120px;}
.people_main dl dd {width:calc(100% - 120px); padding:0 0 0 20px;}
.people_main dl dd .pointColor {font-size:1.15rem; margin:0 0 10px;}
.people_main dl dd h4 {font-size:1.1rem; margin:0 0 10px;}
.people_main dl dd h4 b {font-size:1.3rem;}
.people_main dl dd p span {top:1px;}
.people_list {grid-template-columns: repeat(1, 1fr); gap:15px 0;}
.people_list dl {align-items:center; padding:15px;}
.people_list dl dt {width:100px;}
.people_list dl dd {width:calc(100% - 100px);  padding:0 0 0 20px;}
.people_list dl dd h4 {margin:0 0 7px;}
.people_list dl dd h4 b {font-size:1.3rem;}
.people_list dl dd p span {top:1px;}



}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 


/**** S:: 연구원 소개 > 연혁 ****/
.cont_table .tBox {order:2; width:100%; padding-right:0; padding-top:30px;}
.cont_table .tBox .fs40 {margin:0 0 10px;}
.cont_table .imgBox {order:1; width:100%; max-width:100%;}
.history_bbs_cont .bg {background-position:center right 20%;}
/**** E:: 연구원 소개 > 연혁 ****/


/*.organ_line ul.two {top:940px; width:50%;}
.organ_line ul.two li::after {margin-left:-1px; height:10px;}
.organ_line ul.two li:nth-of-type(3), .organ_line ul.two li:nth-of-type(4) {display:none;}*/
.organ_line ul li.dot {width:5px; height:5px;}
.organ_line ul li.border {width:5px; height:5px; border-width:2px;}
.organ_cont dl {width:calc(50% - 10px);}
.organ_cont dl dt {padding:12px 10px;}
.organ_cont dl dd {padding:12px 10px;}
.organ_cont dl.center dt p {margin-top:5px; padding-top:5px;}
.organ_cont dl.center.one dt {margin:0 auto 30px;}
.organ_cont dl.center.three dt {margin:30px auto;}
.organ_cont dl.center.three dt::after {height:15px;}
.organ_cont dl.center.three::before{bottom:15px; width:calc(50% + 10px) }
.organ_cont dl.five {margin-top:20px;}
.organ_cont dl.eight {margin-top:20px;}
.organ_line ul.one {top:107px; width:calc(50% + 14px);}
.organ_cont dl.center.one dt::after {height:15px;}
.organ_cont dl.two::after, .organ_cont dl.four::after {height:15px;}

.organ_cont dl.six::before, .organ_cont dl.seven::before{height:15px; top:-15px;  }
.organ_cont dl.six::after, .organ_cont dl.seven::after{ top:-17px; width: 5px; height: 5px; margin-left:-2px}
.organ_cont dl.five::before, .organ_cont dl.five::after, .organ_cont dl.eight::before, .organ_cont dl.eight::after{display:none;}


}