<style>
.org-tree ul {
padding-top: 20px;
position: relative;
display: flex;
justify-content: center;
}
.org-tree li {
list-style: none;
text-align: center;
position: relative;
padding: 20px 15px 0 15px;
}
.org-tree li::before,
.org-tree li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 2px solid #ccc;
width: 50%;
height: 20px;
}
.org-tree li::after {
right: auto;
left: 50%;
border-left: 2px solid #ccc;
}
.org-tree li:only-child::after,
.org-tree li:only-child::before {
display: none;
}
.org-tree li:first-child::before,
.org-tree li:last-child::after {
border: none;
}
.org-tree ul ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 2px solid #ccc;
height: 20px;
}
.node {
background: white;
padding: 15px 25px;
border-radius: 10px;
display: inline-block;
min-width: 170px;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.ceo {
background: linear-gradient(135deg,#1e3c72,#2a5298);
color: white;
}
.division {
background: #e8f0ff;
border-left: 5px solid #2a5298;
}
.team {
background: #fafafa;
border: 1px solid #ddd;
font-weight: 500;
}
@media (max-width: 768px) {
.org-tree ul {
flex-direction: column;
align-items: center;
}
.org-tree li::before,
.org-tree li::after,
.org-tree ul ul::before {
display: none;
}
}
</style>
<div class="org-tree">
<ul>
<li>
<div class="node ceo">대표이사</div>
<ul>
<li>
<div class="node division">RISE 사업본부</div>
<ul>
<li><div class="node team">부산센터</div></li>
</ul>
</li>
<li>
<div class="node division">K-Landing 사업본부</div>
<ul>
<li><div class="node team">대구센터</div></li>
</ul>
</li>
<li>
<div class="node division">대학원 사업본부</div>
<ul>
<li><div class="node team">세종센터</div></li>
</ul>
</li>
<li>
<div class="node division">융합 연구본부</div>
<ul>
<li><div class="node team">제주센터</div></li>
<li><div class="node team">인문사회부</div></li>
<li><div class="node team">생명과학부</div></li>
<li><div class="node team">이공자연부</div></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>