.organization {width:100%;height:auto;text-align:center;}
.organization > li {width:100%; position:relative;}

/* ===== 총장 ===== */
.organization > li strong.secretary {
	color:#fff; font-size:30px; display:block;
	width:109px; height:86px; padding:50px 0 0 0;
	margin:0 auto 250px auto;
	background:url(/_res/u1/u1/img/content/org_secretary_bg.png) no-repeat;
	text-align:center; position:relative; z-index:1;
}
/* 총장 → 대학본부 중앙 수직 기둥 (직속 3단 관통 / % → 고정 px) */
.organization > li strong.secretary:after {
	display:block; position:absolute; top:100%; left:50%;
	z-index:0; width:1px; height:250px;
	background-color:#ddd; content:'';
}

/* ===== 총장 직속기관 4개 공통 ===== */
.organization > li .side_01,
.organization > li .side_02,
.organization > li .side_03,
.organization > li .side_04 {
	display:block; color:#fff; text-align:center;
	width:145px; padding:10px 0;
	position:absolute; z-index:2;
}
.organization > li .side_01 a,
.organization > li .side_02 a,
.organization > li .side_03 a,
.organization > li .side_04 a {color:#fff; text-decoration:none;}
.organization > li .side_01 a:hover, .organization > li .side_01 a:focus,
.organization > li .side_02 a:hover, .organization > li .side_02 a:focus,
.organization > li .side_03 a:hover, .organization > li .side_03 a:focus,
.organization > li .side_04 a:hover, .organization > li .side_04 a:focus {text-decoration:underline;}

/* 좌측 : 비서실 */
.organization > li .side_01 {background:#6a95ca; left:10%; top:190px;}
/* 우측 : 감사실 / 인권센터 / IR센터 — 각각 총장 직속(감사실 산하 아님)
   ※ 기존 #d1d6db + 흰글자는 명도대비 1.5:1(기준 4.5:1 미달) → #8a929b 상향 */
.organization > li .side_02 {background:#8a929b; right:10%; top:190px;}
.organization > li .side_03 {background:#8a929b; right:10%; top:251px;}
.organization > li .side_04 {background:#8a929b; right:10%; top:312px;}

/* 연결선 : 각 박스 → 중앙 기둥 개별 수평 분기 */
.organization > li .side_01:after {
	display:block; position:absolute; top:50%; left:100%;
	width:calc(40vw - 145px); max-width:415px; height:1px;
	background-color:#ddd; content:'';
}
.organization > li .side_02:after,
.organization > li .side_03:after,
.organization > li .side_04:after {
	display:block; position:absolute; top:50%; right:100%;
	width:calc(40vw - 145px); max-width:415px; height:1px;
	background-color:#ddd; content:'';
}

/* ===== 2단계 : 대학본부 / 대학 / 부속기관 / 산학협력단 / 사업단 띠 ===== */
.organization > li > ul > li {padding-bottom:30px;}
.organization > li > ul > li:last-child {padding:0;}
.organization > li > ul > li strong {
	background:#6a7698; color:#fff; display:block; width:100%;
	text-align:center; font-size:22px; padding:10px 0; margin:0 0 12px 0;
}
.organization > li > ul > li strong.etc {background:#4a9ccb;}

/* ===== 3단계 : 처/센터 카드 (4열 그리드) ===== */
.organization > li > ul > li > ul {overflow:hidden; display:flex; gap:20px; flex-wrap:wrap;}
.organization > li > ul > li > ul > li {flex:0 0 calc(25% - 15px); padding:0; box-sizing:border-box;}

.organization > li > ul > li > ul > li strong {
	background:#f9f9f9; border:1px solid #e2e2e2; display:block;
	width:auto; padding:0; font-size:20px; margin:0;
}
.organization > li > ul > li > ul > li strong span {
	display:block; padding:10px 0; color:#4d5876; background:none; letter-spacing:-0.5px;
}
.organization > li > ul > li > ul > li strong a:hover,
.organization > li > ul > li > ul > li strong a:active,
.organization > li > ul > li > ul > li strong a:focus {text-decoration:underline;}
.organization > li > ul > li > ul > li strong a span {
	display:inline-block; vertical-align:top; padding-right:15px;
	background:url(/Img/kr/common/blank_ico.svg) no-repeat right 6px;
}
.organization > li > ul > li > ul > li strong a:hover span,
.organization > li > ul > li > ul > li strong a:active span,
.organization > li > ul > li > ul > li strong a:focus span {text-decoration:underline;}

/* ===== 4단계 : 팀 목록 ===== */
.organization > li > ul > li > ul > li ul {width:auto; padding:0 10px;}
.organization > li > ul > li > ul > li ul li {
	float:none; width:auto; margin:3px 0 0 0 !important;
	padding:0 0 0 15px; text-align:left;
}
.organization > li > ul > li > ul > li .none_ul li {
	float:none; width:auto; margin:3px 0 0 0 !important;
	padding:0 0 0 15px; text-align:left; background:none;
}

/* ===== 반응형 ===== */
@media screen and (max-width:1024px) {
	.organization > li > ul > li > ul > li {flex:0 0 calc(33.33% - 14px);}
}

@media (max-width:768px) {
	.organization > li > ul > li > ul > li {flex:0 0 calc(50% - 10px);}
	.organization > li > ul > li > ul > li ul {padding:0;}

	.organization > li strong.secretary {margin-bottom:300px;}
	.organization > li strong.secretary:after {height:300px;}

	.organization > li .side_01,
	.organization > li .side_02,
	.organization > li .side_03,
	.organization > li .side_04 {
		width:100%; left:0; right:auto; box-sizing:border-box;
	}
	.organization > li .side_01 {top:150px;}
	.organization > li .side_02 {top:205px;}
	.organization > li .side_03 {top:260px;}
	.organization > li .side_04 {top:315px;}

	.organization > li .side_01:after,
	.organization > li .side_02:after,
	.organization > li .side_03:after,
	.organization > li .side_04:after {display:none;}

	.organization > li > ul > li strong {font-size:18px;}
	.organization > li > ul > li > ul > li strong {font-size:16px;}
}

@media (max-width:550px) {
	.organization > li strong.secretary:after {height:300px;}
	.organization > li > ul > li > ul {flex-direction:column;}
	.organization > li > ul > li > ul > li {flex:1;}
}