@charset "UTF-8";

/* 본부 및 총장 */
.content {
	/*font-family:Verdana;
	font-size:13px;*/
	position:relative;
	overflow:hidden;
}
.content * {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing: border-box;
}
.org-chart {
	display:block;
	clear:both;
	margin-bottom:70px;
	position:relative;
	/** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
	/* Box colors */
	/* 1 column */
	/* 2 column */
	/* 3 column */
	/* DEPARTMENTS COLUMNs */
}
.org-chart.cf:before,.org-chart.cf:after {
	content:" ";
	/* 1 */
	display:table;
	/* 2 */
}
.org-chart.cf:after {
	clear:both;
}
.org-chart.cf {
	*zoom:1;
}
.org-chart ul {
	padding:0;
	margin:0;
	list-style:none;
}
.org-chart ul li {
	position:relative;
}
.org-chart ul li span {
	display:block;
	border:3px solid #aaa;
	text-align:center;
	overflow:hidden;
	text-decoration:none;
	color:#4d4d4d;
	font-size:13px;
	/*box-shadow:4px 4px 9px -4px rgba(0,0,0,0.4);*/
	-webkit-transition:all linear .1s;
	-moz-transition:all linear .1s;
	transition:all linear .1s;
	background:#fff;
	padding:16px 0;
	height:56px;
	vertical-align:middle;
}
.org-chart ul.departments li span {
    display: flex;
    justify-content: center;
    align-items: center;
	height:70px;
}

.org-chart .lvl-a {
	background:#231816;
	color:#fff;
}
.org-chart .lvl-b {
	background:#d38f6a;
	color:#fff;
}
.org-chart .lvl-c {
	background:#0078ad;
	color:#fff;
}
.org-chart .lvl-d {
	background:#cacfd3;
	color:#4d4d4d;
}
.org-chart .lvl-e {
	background:#00abeb;
	color:#fff;
}
.org-chart .lvl-f {
	background:#caae65;
	color:#fff;
}
.org-chart .board {
	width:70%;
	margin:0 auto;
	display:block;
	position:relative;
}
.org-chart .board:before {
	content:"";
	display:block;
	position:absolute;
	height:347px;
	width:0px;
	border-left:2px solid #aaa;
	margin-left:49%;
	top:15px;
}
.org-chart ul.columnOne {
	height:90px;
	position:relative;
	width:100%;
	display:block;
	clear:both;
}
.org-chart ul.columnOne li {
	width:30%;
	margin:0px auto;
	top:10px;
}
.org-chart ul.columnTwo {
	position:relative;
	width:100%;
	display:block;
	height:90px;
	clear:both;
}
.org-chart ul.columnTwo li:first-child {
	width:30%;
	float:left;
}
.org-chart ul.columnTwo li {
	width:30%;
	float:right;
}
.org-chart ul.columnTwo:before {
	content:"";
	display:block;
	position:relative;
	width:80%;
	height:10px;
	border-top:2px solid #aaa;
	margin:0 auto;
	top:40px;
}
.org-chart ul.columnThree {
	position:relative;
	width:100%;
	display:block;
	height:90px;
	clear:both;
}
.org-chart ul.columnThree li:first-child {
	width:30%;
	float:left;
	margin-left:0;
}
.org-chart ul.columnThree li {
	width:30%;
	margin-left:5%;
	float:left;
}
.org-chart ul.columnThree li:last-child {
	width:30%;
	float:right;
	margin-left:0;
}
.org-chart ul.columnThree:before {
	content:"";
	display:block;
	position:relative;
	width:80%;
	height:10px;
	border-top:2px solid #aaa;
	margin:0 auto;
	top:40px;
}
.org-chart .departments {
	width:100%;
	display:block;
	clear:both;
}
.org-chart .departments:before {
	content:"";
	display:block;
	width:85%;
	height:22px;
	border-top:2px solid #aaa;
	border-left:2px solid #aaa;
	border-right:2px solid #aaa;
	margin:0 auto;
	top:0px;
}
.org-chart .department {
	border-left:2px solid #aaa;
	width:calc(100% / 7 - 1%);
	float:left;
	margin:0px 4px;
}
.org-chart .department:after {
	content:"";
	position:absolute;
	display:block;
	width:10px;
	height:22px;
	border-left:2px solid #aaa;
	left:50%;
	top:-22px;
}
.org-chart .department:first-child:after {
	display:none;
}
.org-chart .department:last-child:after {
	display:none;
}
.org-chart .department.central {
	/*background:#F5EEC9;*/
}
.org-chart .department.central:after {
	display:none;
}
.org-chart .department span {
	border-left:1px solid #aaa;
}
.org-chart .department li {
	padding-left:25px;
	border-bottom:2px solid #aaa;
	height:80px;
}
.org-chart .department li span {
	top:38px;
	position:absolute;
	z-index:1;
	width:95%;
	height:56px;
	vertical-align:middle;
	right:0px;
	line-height:14px;
	border:3px solid #aaa;
}
.org-chart .department .sections {
	margin-top: -20px;
}
/* MEDIA QUERIES */
@media all and (max-width:768px) {
	.org-chart .board {
		margin:0px;
		width:100%;
	}
	/*.org-chart .board:before {
		height:430px;
	}*/
	.org-chart ul.columnOne {
		height:75px;
	}
	.org-chart ul.columnOne li {
		width:100%;
	}
	.org-chart .departments:before {
		border: none;
	}
	.org-chart .department {
		float:none;
		width:100%;
		margin-left:0;
		/*background:#F5EEC9;*/
		margin-bottom:40px;
	}
	.org-chart .department:before {
		content:"";
		display:block;
		position:absolute;
		width:15px;
		height:60px;
		border-left:2px solid #aaa;
		z-index:1;
		top:-45px;
		left:0%;
		margin-left:-2px;
	}
	.org-chart .department:after {
		display:none;
	}
	.org-chart .department:first-child:before {
		display: none;
	}
}
/*--------- TO BE REMOVED FROM YOUR CSS --*/
/* this is just to display the behaviour of responsive on codepen */
.responsive-content {
	width:767px;
	margin:0px auto;
}
.responsive-content .org-chart .board {
	margin:0px;
	width:100%;
}
.responsive-content .org-chart .departments:before {
	border:none;
}
.responsive-content .org-chart .department {
	float:none;
	width:100%;
	margin-left:0;
	background:#F5EEC9;
	margin-bottom:40px;
}
.responsive-content .org-chart .department:before {
	content:"";
	display:block;
	position:absolute;
	width:15px;
	height:60px;
	border-left:2px solid #aaa;
	z-index:1;
	top:-45px;
	left:0%;
	margin-left:-2px;
}
.responsive-content .org-chart .department:after {
	display:none;
}
.responsive-content .org-chart .department:first-child:before {
	display: none;
}