#ds-ct-header {overflow:hidden; border-bottom:0;}

#ds-ct-header>div>div:not(#ds-page-nav) {padding:5% 0 10% 0;}

#ds-ct-header h1 {margin:0 0 1.5em 0;}
#ds-ct-header h1 strong {color:#fff;}

#ds-ct-header-a {color:#fff; text-align:center; line-height:1.3; }
#ds-ct-header-a ul {padding:0; margin:5% 0; list-style:none; display:flex; justify-content:space-around; align-items:flex-start;}
#ds-ct-header-a ul li>* {display:block; }
#ds-ct-header-a ul strong {color:#fff; font-size:3em; font-weight:800;}

@media all and (max-width:768px) { /* MOBILE */
	#ds-ct-header-a ul {justify-content:space-evenly; flex-wrap:wrap; }
	#ds-ct-header-a ul>li:nth-of-type(1),
	#ds-ct-header-a ul>li:nth-of-type(2) {flex:0 0 48%;}
	#ds-ct-header-a ul>li:nth-of-type(3) {flex:0 0 48%;}
}

#ds-ct-header-bottom {height:0%; width:100%; padding-bottom:5%;background:url('../pages/img/imgc1201aa1.webp') repeat-x center bottom; background-size:auto 100%;}

.ds-hn-spc-sect-img >div>div {position:relative;}
.ds-hn-spc-sect-img  h2 {font-size:2.3em; font-weight:800; position:absolute; bottom:1rem; left: 1rem;}
.ds-hn-spc-sect-img img {display:block;}

#ds-ct-history-c {background-color:#f4f5f6;}
#ds-ct-history-d >div {display:flex; align-items:flex-start; gap:5%; margin:5% 0 0 0;}
#ds-ct-history-d h3 {color:#fff; background:var(--color-3b); width:5em; height:5em; border-radius:50%; display:flex; justify-content:center; align-items:center; font-size:2em; line-height:1.3; flex:0 0 5em;}

@media all and (max-width:768px) { /* MOBILE */
	#ds-ct-history-d >div {gap:3%;}
	#ds-ct-history-d h3 {font-size:1.2em;width:4.5em; height:4.5em; flex:0 0 4.5em;}
}
/* #ds-ct-header-c>div>div>div {background:#eee;} */
/* #ds-ct-history-d dl {flex: auto; display:flex; flex-wrap:wrap; max-width:100%;} */
/* #ds-ct-history-d dl dt{flex:0 0 5em;} */
/* #ds-ct-history-d dl dd{flex: auto;} */

/* CHART */

:root{
  --org-gap-y: 2em;
  --org-gap-x: 1em;
  --org-line: 4px solid var(--color-3b);
  --org-color-1a : var(--color-3a);
  --org-color-1b : var(--color-3b);
  --org-color-1c : var(--color-3c);
}

.org-chart,
.org-chart *{ box-sizing:border-box; }
.org-chart{display:flex; flex-direction:column; align-items:center; text-align:center; font-weight:bold; line-height:1.3;}

.org-chart ul {line-height:1.6; list-style:none; margin:0; padding:0;}

.org-st1 {font-size:2em; font-weight:800; width:5em; height:5em; display:flex; justify-content:center; align-items:center; border-radius:50%; background-color:var(--org-color-1c);}

.org-st2 {color:#fff; font-size:1.5em; padding:0.3em 2em; font-weight:bold; background-color:var(--org-color-1b); border-radius:1em;}

.org-st3,
.org-st4 {padding:0.5em 1.3em; font-weight:bold; border:var(--org-line); border-radius:1em;}
.org-st4 {font-size:1.2em; z-index:1; position:relative; background:#fff;}


/* 척추 세로 연결선 (총회-이사회-위원회밴드-사무국) */
.org-conn{align-self:center; width:0; height:var(--org-gap-y); border-left:var(--org-line); }

/* ---- 위원회 밴드 (인사위원회 | 척추 | 상설위원회) ---- */
.org-com {
	min-width:30em;
	display:flex;
	justify-content:space-between;
	 color:var(--org-color-1a);
	font-size:1.2em;
}

.org-com-L,
.org-com-R {flex:auto;}

.org-com-line1 {width:0; align-self:stretch; border-left:var(--org-line); }

.org-com-item {width:10em; }




.org-com-L>div,
.org-com-R>div {display:flex; }
.org-com-R>div {flex-direction:row-reverse;}

.org-com>div>div+div {margin-top:0.5em;}
.org-com-line2 {flex:auto;position:relative;}
.org-com-line2:after {content:""; display:block; position:absolute; height:0; border-bottom:var(--org-line); top:50%; width:100%;}
.org-com>div>div:not(:first-child):after {content:""; display:block; background:pink;}
.org-com ul li {font-size:0.8em;}
.org-com small {font-size:0.8em;}

.org-branch{ display:flex; justify-content:center; align-items:stretch; position:relative; padding-top:var(--org-gap-y);}
.org-branch::before{ content:''; position:absolute; top:0; left:50%; height:var(--org-gap-y); border-left:var(--org-line); }

.org-branch > .org-branch-item{
  position:relative; display:flex; flex-direction:column; align-items:center;
  padding:var(--org-gap-y) var(--org-gap-x) 0;
}
.org-branch > .org-branch-item::before,
.org-branch > .org-branch-item::after{
  content:''; position:absolute; top:0; width:50%; height:var(--org-gap-y); border-top:var(--org-line);
}
.org-branch > .org-branch-item::before{ right:50%; }
.org-branch > .org-branch-item::after { left:50%; border-left:var(--org-line); }
.org-branch > .org-branch-item:first-child::before{ border:0; }
.org-branch > .org-branch-item:last-child::after { border-top:0; }
.org-branch > .org-branch-item:only-child::before{ border:0; }
.org-branch > .org-branch-item:only-child::after { border-top:0; }

.org-st4+ul {background:#eee; width:100%; padding:2em 0.5em 1em 0.5em; border-radius:1.5em; margin-top:-1em; z-index:0; position:relative; height:100%; height:16em;}
.org-st4+ul ul {color:var(--org-color-1a)}


@media all and (max-width:768px) { /* MOBILE */
	.org-chart {font-size:0.9em; width:100%; overflow-x:scroll; padding-bottom:5%;}
	:root{
	  --org-gap-x: 0.2em;
	  --org-line: 2px solid var(--color-3b);
	}
	.org-st1 {font-size:1.5em; width:4.5em; height:4.5em;}

	.org-st2 {font-size:1.3em; padding:0.3em 1em;}

	.org-st3,
	.org-st4 {padding:0.5em 0.8em;}
	.org-st4 {font-size:1.0em;}
	.org-com {
		min-width:20em;
	}
	.org-com-item {width:9em;}
	
	.org-st4+ul {padding:1em 0.5em 0.8em 0.5em;}
}


/* --- 박스류: 아래로 살짝 밀린 채 투명 → is-in 으로 등장 --- */
.anim-ready .org-chart .org-st1,
.anim-ready .org-chart .org-st2,
.anim-ready .org-chart .org-st3,
.anim-ready .org-chart ul.org-com-item,
.anim-ready .org-chart .org-st4,
.anim-ready .org-chart .org-st4 + ul{
  opacity:0;
  transform:translateY(-12px) scale(.96);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.org-chart .is-in{ opacity:1 !important; transform:none !important; }

/* --- 세로 척추선: 위→아래로 그어짐 (scaleY) --- */
.anim-ready .org-chart .org-conn,
.anim-ready .org-chart .org-com-line1{
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform .45s ease;
}
.org-chart .org-conn.is-drawn,
.org-chart .org-com-line1.is-drawn{ transform:scaleY(1); }

/* 본점/지점 세로 내림선(가상요소): 호스트에 .line-in 붙여 제어 */
.anim-ready .org-chart .org-branch::before{
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform .45s ease;
}
.org-chart .org-branch.line-in::before{ transform:scaleY(1); }

/* --- 위원회 가로선: 척추 쪽에서 항목 쪽으로 그어짐 (scaleX) --- */
.anim-ready .org-chart .org-com-L .org-com-line2::after{
  transform:scaleX(0); transform-origin:right; transition:transform .4s ease;
}
.anim-ready .org-chart .org-com-R .org-com-line2::after{
  transform:scaleX(0); transform-origin:left; transition:transform .4s ease;
}
.org-chart .org-com-L .org-com-line2.is-drawn::after{ transform:scaleX(1); }
.org-chart .org-com-R .org-com-line2.is-drawn::after{ transform:scaleX(1); }

/* --- 본점/지점 가로 버스선 + 각 항목 내림선(가상요소): 페이드 --- */
.anim-ready .org-chart .org-branch > .org-branch-item::before,
.anim-ready .org-chart .org-branch > .org-branch-item::after{
  opacity:0; transition:opacity .4s ease;
}
.org-chart .org-branch.bus-in > .org-branch-item::before,
.org-chart .org-branch.bus-in > .org-branch-item::after{ opacity:1; }