@charset "utf-8";

/* ===================================================================
	조직도 (about/organ_test.html)
	- .organChart : 관장 / 부장 / 위원회 + 팀 조직도 (퍼블리싱)
	- .organList  : tablet 이하 팀장 및 팀원 목록 (design.css 기본 스타일 사용)
=================================================================== */

.about .inner.organ .organChart,
.about .inner.organ .organChart * {box-sizing:border-box;}
.about .inner.organ .organChart {position:relative; text-align:center;}
.about .inner.organ .organChart ul {list-style:none; margin:0; padding:0;}

/* 관장 / 부장 / 위원회 */
.about .inner.organ .organTop {position:relative; font-size:0; text-align:center;}
.about .inner.organ .organTop .organTopIn {display:inline-flex; align-items:center; position:relative; text-align:center; padding-left:208px;}
.about .inner.organ .organTop .topLeft {position:relative; flex:0 0 auto;}

.about .inner.organ .organTop .oBox {position:relative; background:#fff; border:2px solid #1b3c8e;}
.about .inner.organ .organTop .oBox .tit {font-family:'NexonGothic'; font-weight:700; color:#fff; background:#1b3c8e; letter-spacing:-.5px; line-height:1.2;}
.about .inner.organ .organTop .oBox .name {color:#000; background:#fff; letter-spacing:-.5px; line-height:1.2;}
.about .inner.organ .organTop .director {border-color:#1b3c8e;}
.about .inner.organ .organTop .director .tit {background:#1b3c8e;}
.about .inner.organ .organTop .manager {border-color:#00b0ec;}
.about .inner.organ .organTop .manager .tit {background:#00b0ec;}

/* 관장 - 부장 연결선 */
.about .inner.organ .organTop .vline {position:relative;}
.about .inner.organ .organTop .vline:before {content:''; position:absolute; left:50%; top:0; width:1px; height:100%; background:#d5d5d5;}

/* 위원회 */
.about .inner.organ .organTop .committee {position:relative; flex:0 0 auto; text-align:left;}
.about .inner.organ .organTop .committee:before {content:''; position:absolute; left:0; width:1px; background:#d5d5d5;}		/* 위원회 세로 연결선 */
.about .inner.organ .organTop .committee:after {content:''; position:absolute; top:50%; height:1px; background:#d5d5d5;}		/* 관장-부장 연결선에서 뻗어나오는 가로선 */
.about .inner.organ .organTop .committee>li {position:relative; color:#000; letter-spacing:-.5px; white-space:nowrap;}
.about .inner.organ .organTop .committee>li:before {content:''; position:absolute; left:0; top:50%; height:1px; background:#d5d5d5;}	/* 항목별 가로 연결선 */
.about .inner.organ .organTop .committee>li>span {position:relative; display:block;}
.about .inner.organ .organTop .committee>li>span:before {content:''; position:absolute; top:50%; border-radius:50%; border:2px solid #1b3c8e; background:#fff;}	/* 아이콘 바깥 원 */
.about .inner.organ .organTop .committee>li>span:after {content:''; position:absolute; top:50%; border-radius:50%; background:#1b3c8e;}					/* 아이콘 안쪽 원 */

/* 팀 (PC 전용) */
.about .inner.organ .organTeams {position:relative;}
.about .inner.organ .organTeams>ul {display:flex; position:relative;}
.about .inner.organ .organTeams>ul>li {position:relative; flex:1 1 0; min-width:0;}
.about .inner.organ .organTeams .team {display:flex; align-items:center; justify-content:center; font-family:'NexonGothic'; font-weight:700; color:#fff; background:#00d0bc; letter-spacing:-1px; line-height:1.25;}
.about .inner.organ .organTeams .teamLeader {border:3px solid #00d0bc; border-top:0; color:#000; letter-spacing:-.5px; line-height:1.2;}
.about .inner.organ .organTeams .person {text-align:left;}
.about .inner.organ .organTeams .person p {position:relative; color:#666; letter-spacing:-.8px;}
.about .inner.organ .organTeams .person p:before {content:''; position:absolute; left:0; border-radius:50%; background:#00d0bc;}


/* ===================================================================
	PC : 992 ~
=================================================================== */
@media screen and (min-width:992px), print {

    

	/* 관장 / 부장 / 위원회 */
	.about .inner.organ .organTop .topLeft {width:156px;}
	.about .inner.organ .organTop .oBox .tit {padding:12px 0; font-size:19px;}
	.about .inner.organ .organTop .oBox .name {padding:18px 0; font-size:17px;}
	.about .inner.organ .organTop .vline {height:72px;}

	.about .inner.organ .organTop .committee {margin-left:49px;}
	.about .inner.organ .organTop .committee:before {top:34px; bottom:34px;}
	.about .inner.organ .organTop .committee:after {left:-127px; width:127px;}
	.about .inner.organ .organTop .committee>li {height:68px; line-height:68px; padding-left:76px; font-size:18px;}
	.about .inner.organ .organTop .committee>li:before {width:52px;}
	.about .inner.organ .organTop .committee>li>span:before {left:-35px; margin-top:-11px; width:22px; height:22px;}
	.about .inner.organ .organTop .committee>li>span:after {left:-29px; margin-top:-5px; width:10px; height:10px;}

	/* 부장 - 팀 연결선 */
	.about .inner.organ .organTeams {margin-top:64px;}
	.about .inner.organ .organTeams:before {content:''; position:absolute; left:50%; top:-64px; width:1px; height:34px; background:#d5d5d5;}
	.about .inner.organ .organTeams>ul:before {content:''; position:absolute; left:6.25%; right:6.25%; top:-30px; height:1px; background:#d5d5d5;}
	.about .inner.organ .organTeams>ul>li {padding:0 11px;}
	.about .inner.organ .organTeams>ul>li:before {content:''; position:absolute; left:50%; top:-30px; width:1px; height:30px; background:#d5d5d5;}

	/* 팀 박스 */
	.about .inner.organ .organTeams .team {min-height:52px; padding:8px 4px; font-size:17px;}
	.about .inner.organ .organTeams .team.two {font-size:18px; letter-spacing:-1.5px; padding:0;}
	.about .inner.organ .organTeams .teamLeader {padding:15px 4px; font-size:16px;}
	.about .inner.organ .organTeams .person {margin-top:14px;}
	.about .inner.organ .organTeams .person p {padding-left:10px; font-size:15px; line-height:1.4;}
	.about .inner.organ .organTeams .person p+p {margin-top:9px;}
	.about .inner.organ .organTeams .person p:before {top:9px; width:3px; height:3px;}
	.about .inner.organ .organTeams .t8 .person {margin-top:12px;}
}


/* ===================================================================
	TABLET : 768 ~ 991
=================================================================== */
@media screen and (max-width:991px) {
    .about .inner.organ .organTop .organTopIn {padding-left:190px}
	.about .inner.organ .organTop .topLeft {width:170px;}
	.about .inner.organ .organTop .oBox .tit {padding:11px 0; font-size:18px;}
	.about .inner.organ .organTop .oBox .name {padding:16px 0; font-size:16px;}
	.about .inner.organ .organTop .vline {height:68px;}

	.about .inner.organ .organTop .committee {margin-left:45px;}
	.about .inner.organ .organTop .committee:before {top:34px; bottom:34px;}
	.about .inner.organ .organTop .committee:after {left:-130px; width:130px;}
	.about .inner.organ .organTop .committee>li {height:68px; line-height:68px; padding-left:72px; font-size:17px;}
	.about .inner.organ .organTop .committee>li:before {width:50px;}
	.about .inner.organ .organTop .committee>li>span:before {left:-33px; margin-top:-11px; width:22px; height:22px;}
	.about .inner.organ .organTop .committee>li>span:after {left:-27px; margin-top:-5px; width:10px; height:10px;}
}


/* ===================================================================
	MOBILE : ~ 767
=================================================================== */
@media screen and (max-width:767px) {
    .about .inner.organ .organTop .organTopIn {padding-left:0px}
	.about .inner.organ .organTop .topLeft {width:136px;}
	.about .inner.organ .organTop .oBox .tit {padding:8px 0; font-size:15px;}
	.about .inner.organ .organTop .oBox .name {padding:13px 0; font-size:14px;}
	.about .inner.organ .organTop .vline {height:46px;}

	.about .inner.organ .organTop .committee {margin-left:28px;}
	.about .inner.organ .organTop .committee:before {top:19px; bottom:19px;}
	.about .inner.organ .organTop .committee:after {left:-96px; width:96px;}
	.about .inner.organ .organTop .committee>li {height:38px; line-height:38px; padding-left:52px; font-size:13px;}
	.about .inner.organ .organTop .committee>li:before {width:34px;}
	.about .inner.organ .organTop .committee>li>span:before {left:-27px; margin-top:-9px; width:18px; height:18px;}
	.about .inner.organ .organTop .committee>li>span:after {left:-22px; margin-top:-4px; width:8px; height:8px;}
}

/* 소형 모바일 : ~ 359 */
@media screen and (max-width:359px) {

	.about .inner.organ .organTop .topLeft {width:116px;}
	.about .inner.organ .organTop .oBox .tit {padding:7px 0; font-size:14px;}
	.about .inner.organ .organTop .oBox .name {padding:11px 0; font-size:13px;}
	.about .inner.organ .organTop .vline {height:40px;}

	.about .inner.organ .organTop .committee {margin-left:20px;}
	.about .inner.organ .organTop .committee:before {top:18px; bottom:18px;}
	.about .inner.organ .organTop .committee:after {left:-78px; width:78px;}
	.about .inner.organ .organTop .committee>li {height:36px; line-height:36px; padding-left:44px; font-size:12px;}
	.about .inner.organ .organTop .committee>li:before {width:28px;}
	.about .inner.organ .organTop .committee>li>span:before {left:-24px; margin-top:-8px; width:16px; height:16px;}
	.about .inner.organ .organTop .committee>li>span:after {left:-20px; margin-top:-4px; width:8px; height:8px;}
}