@charset 'utf-8';

/* Org Chart Container */
.org-chart{display:flex;flex-direction:column;align-items:center;position:relative;width:100%;}

/* Node Styles */
.node{display:inline-flex;align-items:center;justify-content:center;gap:1rem;position:relative;border-radius:8px;padding:1.5rem 3rem;min-width:18rem;min-height:6rem;font-weight:var(--font-weight-bold);;text-align: center;}
/* Root Node (Circle) */
.root-box{position:relative;padding:0 0 6rem;}
.root-box::before{content:'';position:absolute;left:50%;bottom:-14.5rem;width:1px;height:22.5rem;background:var(--color52);}
.node.root{display:flex;flex-direction:column;justify-content:center;gap:1rem;width:23rem;height:23rem;border-radius:50%;background:var(--color12);font-size:20px;border:none;color:#fff;box-sizing:border-box;}
.node.root .icon-univ{display:block;position:relative;padding:0 0 0 4rem;font-weight:var(--font-weight-bold);font-size:2.4rem;line-height:3.36rem;letter-spacing:-0.02em;}
.node.root .icon-univ::before{content:'';position:absolute;top:50%;left:0;width:3.2rem;height:3.2rem;background:url(../img/sub/intro/ico-univ@2x.png) no-repeat center center / 100%;transform:translateY(-50%);}

/* Level 1: Under Root */
.level-1-wrapper{position:relative;display:flex;justify-content:center;width:100%;margin-bottom:60px;}

/* Vertical line from Root to Level 1 */
.root-connection {position:absolute;top:-60px;/* Connects to root margin-bottom */left:50%;height:60px;border-left:1px solid var(--line-color);}
/* center  */
.center-wrap{position:relative;padding:8.5rem 0 10rem;width:100%;text-align:center;}
.center-wrap::before{content:'';position:absolute;}
.center-wrap::after{content:'';position:absolute;top:-3rem;left:50.1%;width:21rem;height:2rem;background:var(--white100);}
.center-wrap .bg-light::before{content:'';position:absolute;top:7.7rem;left:50%;width:1px;height:41rem;background:var(--color52);}
.center-wrap .bg-light::after{top:0;left:50%;transform:translate(-50%, -50%);}
.center-wrap .bg-light > span{position:relative;padding:0 0 0 4rem;}
.center-wrap .bg-light > span::before{content:'';position:absolute;top:50%;left:0;width:3.2rem;height:3.6rem;background:url(../img/sub/intro/ico-organ-center.png);transform:translateY(-50%);}
/* Side Node (RC 운영위원회) */
.side-branch{position:absolute;left:calc(0% + 19.9rem);}
.side-branch::before{content:'';position:absolute;top:50%;right:-22rem;z-index:-10;width:22rem;height:1px;background:var(--color52);}
.side-branch::after{content:'';position:absolute;right:0;width:1px;height:2px;background:var(--white100);}
.side-branch span{position:relative;padding:0 0 0 4rem;}
.side-branch span::before{content:'';position:absolute;top:50%;left:0;width:3.2rem;height:3.2rem;background:url(../img/sub/intro/ico-side-branch.png) no-repeat center center / 100%;transform:translateY(-50%);}
/* Connection from vertical line to side node */
.side-connection {position:absolute;top:50%;left:calc(20% + 180px);/* node width approx */right:50%;border-top:1px solid var(--line-color);}
/* Level 2 Wrapper (Under RC 교육원) */
.level-2-wrapper{display:flex;justify-content:center;position:relative;padding:0 0 6.3rem;width:100%;}
.level-2-wrapper .split-bar{position:relative;}
.level-2-wrapper .split-bar::before{content:'';position:absolute;top:4%;left:0;z-index:10;width:31.8rem;height:2rem;background:var(--white100);transform:translateY(-50%);}

/* Level 2 Nodes Container */
.level-2-nodes{display:flex;justify-content:space-between;align-items:flex-start;position:relative;padding:9.7rem 0 0;width:100%;}
.level-2-nodes::before{content:'';position:absolute;top:0;left:50%;width:100%;height:1px;background:var(--color52);transform:translateX(-50%);}
.level-2-nodes .bg-light:before{content:'';position:absolute;top:-6.8rem;left:50%;width:1px;height:6.5rem;background:var(--color52);}
.level-2-nodes .node-group-right{position:relative;}
.level-2-nodes .node-group-right::before{content:'';position:absolute;top:-135%;right:0;z-index:10;width:14.9rem;height:2rem;background:var(--white100);}
.level-2-nodes .node-group-right .bg-light:before{top:-9.7rem;height:9.5rem;}
.level-2-nodes .bg-light::after, .level-3-nodes .bg-light::after{top:-5px;left:50%;transform:translateX(-50%);}
.level-2-nodes .node-group-left .node-upside{position:relative;}
.level-2-nodes .node-group-left .node-upside:nth-of-type(1)::before{content:'';position:absolute;top:-7.1rem;width:14.9rem;height:2rem;background:var(--white100);}
.level-2-nodes .node-group-left .node-upside:nth-of-type(2)::before{content:'';position:absolute;top:-7.1rem;right:0;width:15.5rem;height:2rem;background:var(--white100);}
.level-2-nodes .node-group-left .node-upside:nth-of-type(1) .bg-light > span::before{width:3.2rem;height:3.3rem;background-image:url(../img/sub/intro/ico-two-node-group-node01.png);}
.level-2-nodes .node-group-left .node-upside:nth-of-type(2) .bg-light > span::before{width:3.2rem;height:3.25rem;background-image:url(../img/sub/intro/ico-two-node-group-node02.png);}
.level-2-nodes .node-group-right .node-upside:nth-of-type(1) .bg-light > span::before{width:3.2rem;height:2.7rem;background-image:url(../img/sub/intro/ico-two-node-group-node03.png);}
.node-group-left .two-node-group{display:flex;justify-content:center;gap:2.4rem;position:relative;}
.node-group-left .two-node-group::before{content:'';position:absolute;top:-6.7rem;left:50%;width:100%;height:1px;background:var(--color52);transform:translateX(-50%);}
.node-group-left .two-node-group::after{content:'';position:absolute;top:-9.7rem;width:1px;height:3.1rem;background:var(--color52);}
.node-group-right{display:flex;justify-content:flex-end;}
.node-group-center{display:flex;justify-content:center;position:relative;padding:0 0 10rem;width:100%}
.node-group-center::before{content:'';position:absolute;bottom:0;left:50%;width:100%;height:1px;background:var(--color52);transform:translateX(-50%);}
.node-group-center .bg-light::before{content:'';position:absolute;left:50%;bottom:-10rem;width:1px;height:10rem;background:var(--color52);}
.node-group-center .bg-light > span::before{width:3.8rem;height:3.4rem;background-image:url(../img/sub/intro/ico-node-group-center.png);}

/* Level 3 Wrapper (Under Residential Master) */
.level-3-wrapper{position:relative;width:100%;padding:6.3rem 0 0;}

/* level 4 */
.level-4-wrapper{width:100%;}
.level-4-wrapper .line{padding:0 0 4rem;position:relative;}
.level-4-wrapper .line::before{content:'';position:absolute;left:50%;top:0;width:1px;height:4rem;background:var(--color52);}
.level-4-layout{display:flex;justify-content:space-between;padding:0 0 8rem;}
.level-4-layout .level4-box{display:flex;gap:2.4rem;position:relative;margin:4rem 0 0;padding:4.2rem 0 0;}
.level-4-layout .level4-box::before{content:'';position:absolute;top:0;left:50%;width:100%;height:1px;background:var(--color52);transform:translateX(-50%);}
.level-4-layout .level4-box::after{content:'';position:absolute;top:-4rem;left:50%;width:1px;height:4rem;background:var(--color52);}
.level-4-layout .level4-box > ul{position:relative;}
.level-4-layout .level4-box > ul::before{content:'';position:absolute;left:50%;top:-4.2rem;width:1px;height:4.2rem;background:var(--color52);}
.level-4-layout .level4-box > ul > li{position:relative;padding:0 0 2rem;width:30rem;}
.level-4-layout .level4-box > ul > li:last-of-type{padding:0;}
.level-4-layout .level4-box > ul > li::before{content:'';position:absolute;bottom:0;left:50%;width:1px;height:2.1rem;background:var(--color52);transform:translateX(-50%);}
.level-4-layout .level4-box > ul:nth-of-type(1) > li:nth-of-type(1)::after{content:'';position:absolute;top:-24%;left:0;z-index:10;width:14.9rem;height:2rem;background:var(--white100);transform:translateY(-50%);}
.level-4-layout .level4-box > ul > li .title-wrap{position:relative;padding:1rem 2rem;border-radius:8px 8px 0 0;background:var(--color106);color:var(--white100);font-weight:var(--font-weight-bold);font-size:2rem;line-height:2.8rem;letter-spacing:-0.02em;text-align:center;}
.level-4-layout .level-4-left-box.level4-box > ul:nth-of-type(1) > li:nth-of-type(1) .title-wrap::before{content:'';position:absolute;top:-170%;left:0;z-index:10;width:31.1rem;height:2rem;background:var(--white100);transform:translateY(-50%);}
.level-4-layout .level4-box > ul:nth-of-type(2) > li:nth-of-type(1) .title-wrap::before{content:'';position:absolute;top:-88%;right:0;z-index:10;width:14.9rem;height:2rem;background:var(--white100);transform:translateY(-50%);}
.level-4-layout .level-4-right-box.level4-box > ul:nth-of-type(2) > li:nth-of-type(1) .title-wrap::after{content:'';position:absolute;top:-165%;right:0;z-index:10;width:31.1rem;height:2rem;background:var(--white100);transform:translateY(-50%);}
.level-4-layout .level4-box > ul > li:last-of-type::before{display:none;}.level-4-layout .level4-box
.achiev-list{display:flex;justify-content:center;align-items:center;padding:3rem 2rem;border:1px solid var(--color106);border-radius:0 0 8px 8px;}
.achiev-list > li{position:relative;margin:0 2.4rem 0 0;padding:0 2.4rem 0 0;}
.achiev-list > li::after{content:'';position:absolute;top:50%;right:0;width:1px;height:2.4rem;background:var(--color52);transform:translateY(-50%);}
.achiev-list > li:last-of-type{margin:0;padding:0;}
.achiev-list > li:last-of-type::after{display:none;}
.achiev-list > li:first-of-type span{width:4.2rem;height:3.8rem;}
.achiev-list > li span{display:block;position:relative;width:3.2rem;height:3.2rem;}
.achiev-list > li span::before{content:'';display:block;position:absolute;top:50%;left:50%;background-repeat:no-repeat;background-position:center;background-size:100%;transform:translate(-50%, -50%);}
.achiev-list > li:nth-of-type(1) span::before{width:4.2rem;height:3.8rem;background-image:url(../img/sub/intro/ico-organ-rm@2x.png);}
.achiev-list > li:nth-of-type(2) span::before{width:3.2rem;height:3.2rem;background-image:url(../img/sub/intro/ico-organ-ra@2x.png);}
.achiev-list > li:nth-of-type(3) span::before{width:3.2rem;height:3.2rem;background-image:url(../img/sub/intro/ico-organ-rc@2x.png);}

/* Specific Node Colors */
.bg-light{position:relative;padding:2.4rem 2rem;min-width:30rem;height:8rem;border:1px solid var(--color106);background:var(--color107);font-weight:var(--font-weight-bold);font-size:2rem;line-height:2.8rem;letter-spacing:-0.02em;color:var(--color106);box-sizing:border-box;}
.bg-light::after{content:'';display:block;position:absolute;top:50%;right:-5px;width:1rem;height:1rem;border:2px solid var(--color13);border-radius:50%;background:var(--white100);box-sizing:border-box;transform:translateY(-50%);z-index:1;}
.bg-light > span{position:relative;padding:0 0 0 4rem;text-align:left;}
.bg-light > span.txt-center{text-align:center;}
.bg-light > span::before{content:'';position:absolute;top:50%;left:0;background-repeat:no-repeat;background-size:100%;background-position:center;transform:translateY(-50%);}
.explan-box{display:flex;justify-content:center;gap:4.8rem;}
.explan-box > li > span{display:inline-block;position:relative;padding:0 0 0 4rem;font-weight:var(--font-weight-bold);font-size:2rem;line-height:2.8rem;letter-spacing:-0.02em;}
.explan-box > li > span::before{content:'';position:absolute;top:50%;left:0;background-size:100%;background-repeat:no-repeat;background-position:center;transform:translateY(-50%);}
.explan-box > li:nth-of-type(1) > span::before{width:4.2rem;height:3.8rem;background-image:url(../img/sub/intro/ico-organ-rm@2x.png);}
.explan-box > li:nth-of-type(2) > span::before{width:3.2rem;height:3.2rem;background-image:url(../img/sub/intro/ico-organ-ra@2x.png);}
.explan-box > li:nth-of-type(3) > span::before{width:3.2rem;height:3.2rem;background-image:url(../img/sub/intro/ico-organ-rc@2x.png);}

@media screen and (max-width:1350px){
	.bg-light{min-width:17rem;font-size:1.4rem;line-height:2.2rem;}
	.side-branch{left:calc(0% + 25.9rem);}
	.side-branch span::before{width:2.8rem;height:2.8rem;}
	.center-wrap::after{left:50.2%;}
	.center-wrap .bg-light::before{top:7.1rem;}
	.level-2-nodes .node-group-right::before{top:-144%;width:11.6rem;}
	.level-2-wrapper .split-bar::before{width:23rem;}
	.level-2-nodes .node-group-left .node-upside:nth-of-type(1)::before{width:10rem;}
	.level-2-nodes .node-group-left .node-upside:nth-of-type(2)::before{width:11.8rem;}
	.level-4-layout{padding:0 0 4rem;}
	.level-4-layout .level4-box > ul > li{width:23rem;}
	.level-4-layout .level4-box > ul > li .title-wrap{padding:1rem;font-size:1.4rem;line-height:2rem;}
	.level-4-layout .level4-box > ul:nth-of-type(2) > li:nth-of-type(1) .title-wrap::before{top:-100%;width:11.4rem;}
	.level-4-layout .level4-box > ul:nth-of-type(1) > li:nth-of-type(1)::after{top:-29%;width:11.5rem;}
	.level-4-layout .level4-box{gap:1rem;}
	.level-4-layout .level-4-left-box.level4-box > ul:nth-of-type(1) > li:nth-of-type(1) .title-wrap::before{top:-200%;width:23.5rem;}
	.level-4-layout .level-4-right-box.level4-box > ul:nth-of-type(2) > li:nth-of-type(1) .title-wrap::after{top:-204%;width:23.4rem;}
	.level-4-layout .level4-box .achiev-list{padding:2rem;}
	.achiev-list > li{margin:0 1.5rem 0 0;padding:0 1.5rem 0 0;}
	.achiev-list > li:nth-of-type(1) span::before{width:3.2rem;height:3.4rem;}
	.achiev-list > li:nth-of-type(2) span::before, .achiev-list > li:nth-of-type(3) span::before{width:3rem;height:3rem;}
	.explan-box{gap:2rem;}
	.explan-box > li > span{font-size:1.6rem;height:2.2rem;}
	.explan-box > li:nth-of-type(1) > span::before{width:3.2rem;height:3.2rem;}
	.explan-box > li:nth-of-type(2) > span::before,.explan-box > li:nth-of-type(3) > span::before{width:3rem;height:3rem;}
}

@media screen and (max-width:1024.98px){
	.root-box{padding:0 0 4rem;}
	.root-box::before{display:none;}
	.level-1-wrapper{margin:0;}
	.side-branch{position:static;left:0;width:100%;}
	.side-branch::before{display:none;}
	.bg-light{min-width:100%;width:100%;}
	.bg-light::before{display:none;}
	.bg-light::after{display:none;}
	.center-wrap{padding:1rem 0;}
	.center-wrap::after{display:none;}
	.level-2-nodes{flex-wrap:wrap;padding:0;}
	.level-2-nodes::before{display:none;}
	.level-2-wrapper .split-bar::before{display:none;}
	.level-2-nodes .node-group-right::before{display:none;}
	.node-group-left .two-node-group{flex-wrap:wrap;gap:1rem;}
	.level-2-nodes .node-group-left{width:100%;}
	.level-2-nodes .node-group-left .node-upside{width:100%;}
	.level-2-nodes .node-group-left .node-upside:nth-of-type(1)::before{display:none;}
	.level-2-nodes .node-group-left .node-upside:nth-of-type(2)::before{display:none;}
	.node-group-left .two-node-group::before{display:none;}
	.node-group-left .two-node-group::after{display:none;}
	.node-group-right{padding:1rem 0 0;width:100%;}
	.node-group-right .node-upside{width:100%;}
	.level-2-wrapper{padding:0 0 1rem;}
	.level-3-wrapper{padding:0;}
	.node-group-center{padding:0 0 2rem;}
	.node-group-center::before{display:none;}
	.level-4-layout{flex-wrap:wrap;}
	.level-4-layout .level4-box{padding:0;margin:0;width:100%;}
	.level-4-layout .level4-box::before{display:none;}
	.level-4-layout .level4-box::after{display:none;}
	.level-4-layout .level4-box > ul{width:100%;}
	.level-4-layout .level4-box > ul::before{display:none;}
	.level-4-layout .level4-box > ul > li{width:100%;}
	.level-4-layout .level4-box > ul > li .title-wrap{text-align:center;}
	.level-4-layout .level4-box > ul:nth-of-type(2) > li:nth-of-type(1) .title-wrap::before{display:none;}
	.level-4-layout .level-4-right-box.level4-box > ul:nth-of-type(2) > li:nth-of-type(1) .title-wrap::after{display:none;}
	.level-4-layout .level-4-left-box.level4-box > ul:nth-of-type(1) > li:nth-of-type(1) .title-wrap::before{display:none;}
	.level-4-layout .level4-box > ul:nth-of-type(1) > li:nth-of-type(1)::after{display:none;}
	.explan-box{flex-wrap:wrap;}
	.explan-box li{width:100%;text-align:center;}
}

@media screen and (max-width:480px){
	.level-4-layout .level4-box{flex-wrap:wrap;}
}