/* 조직도 */
[class^="box_st"] + .organizationBox {margin-top: 3rem;}
.chartBox {text-align: center;}
.chartBox li {position: relative; padding-top: 0.5rem;}
.chartBox li:before {position: absolute; top: 0; left: 50%; width: 1px; height: 0.5rem; background: #d9d9d9; content: "";}
.chartBox a {position: relative; display: flex; margin: 0 auto; width: 100%; max-width: 100%; height: 2.5rem; flex-direction: column; align-items: center; justify-content: center; background: #fff; border: 1px solid; border-radius: 1.5rem; z-index: 1;}
.chartBox a > span {font-size: 0.85rem; font-weight: 500;}

.chartBox .step01 > li {position: relative; padding-top: 0;}
.chartBox .step01 > li:before {position: absolute; top: 0; left: 50%; width: 1px; height: 6rem; background: #d9d9d9; content: "";}
.chartBox .step01 > li > a {margin-bottom: 2.5rem; width: 12.5rem; height: 3.5rem; font-size: 1rem; font-weight: 600; color: #fff; background: #006ac0 url(/images/web/goeyi/sub/step_bg.png) no-repeat right center; border: 4px solid #b8dfff; border-radius: 2rem;}

.chartBox .step02 {position: relative;}
.chartBox .step02:before {position: absolute; top: 0; left: 16.7%; width: 75%; height: 1px; background: #d9d9d9; content: "";}
.chartBox .step02:after {clear: both; display: block; width: 100%; content: "";}
.chartBox .step02 > li {position: relative; float: left; padding-top: 2rem; width: 16.65%;}
.chartBox .step02 > li:before {position: absolute; top: 0; left: 50%; width: 1px; height: 2rem; background: #d9d9d9; content: "";}
.chartBox .step02 > li:after {position: absolute; top: -0.8rem; left: calc(50% - 0.8rem); width: 1.6rem; height: 1.6rem; text-align: center; line-height: 2; font-size: 10px; color: #006ac0; background: #e4f3ff; border: 0.3rem solid #fff; border-radius: 50%; content: "●";}
.chartBox .step02 > li.half {padding-top: 2rem !important; width: 33.35%;}
.chartBox .step02 > li.half:before {height: 7rem !important;}

.chartBox .step02 > li > a {margin-bottom: 1.5rem; width: 12.5rem; height: 3.5rem; font-size: 1rem; font-weight: 600; color: #fff; background: url(/images/web/goeyi/sub/step_bg.png) no-repeat right center; border: 4px solid #b8dfff; border-radius: 2rem;}
.chartBox .step02 > li:nth-of-type(1) > a {background-color: #0272b9; border-color: #bbe3fc;}
.chartBox .step02 > li:nth-of-type(2) > a {background-color: #3f7eff; border-color: #c7d6ff;}
.chartBox .step02 > li:nth-of-type(3) > a {background-color: #008000; border-color: #01a301;}
.chartBox .step02 > li:nth-of-type(4) > a {background-color: #FF5E30; border-color: #f6c99c;}

.chartBox .step03 {position: relative;}
.chartBox .step03 > li {padding: 0 0.25rem;}
.chartBox .step02 > li.half .step03 {padding-top: 1.5rem;}
.chartBox .step02 > li.half .step03:before {position: absolute; top: 0; left: 25%; width: 50%; height: 1px; background: #d9d9d9; content: "";}
.chartBox .step02 > li.half .step03:after {clear: both; display: block; content: "";}
.chartBox .step02 > li.half .step03 > li {float: left; width: 50%;}
.chartBox .step02 > li.half .step03 > li:before {top: -1.5rem; height: 1.5rem;}
.chartBox .step02 > li.half .step03 > li > a ~ a {margin-top: 1rem;}

.chartBox .step04 > li > a {}

/* 분류별 색상 */
.chartBox .step02 > li:nth-of-type(1) .step03 > li > a {color: #fff; background: #0272b9; border-color: #0272b9;}
.chartBox .step02 > li:nth-of-type(2) .step03 > li > a {color: #fff; background: #3f7eff; border-color: #3f7eff;}
.chartBox .step02 > li:nth-of-type(3) .step03 > li > a {color: #fff; background: #008000; border-color: #008000;}
.chartBox .step02 > li:nth-of-type(4) .step03 > li > a {color: #fff; background: #FF5E30; border-color: #FF5E30;}
.chartBox .step02 > li:nth-of-type(1) .step04 > li > a {border-color: #0272b9;}
.chartBox .step02 > li:nth-of-type(2) .step04 > li > a {border-color: #3f7eff;}
.chartBox .step02 > li:nth-of-type(3) .step04 > li > a {border-color: #008000;}
.chartBox .step02 > li:nth-of-type(4) .step04 > li > a {border-color: #FF5E30;}
/* hover */
.chartBox .step02 > li:nth-of-type(1) .step04 > li > a:focus,
.chartBox .step02 > li:nth-of-type(1) .step04 > li > a:hover {background: #e2f4ff;}
.chartBox .step02 > li:nth-of-type(2) .step04 > li > a:focus,
.chartBox .step02 > li:nth-of-type(2) .step04 > li > a:hover {background: #e6eeff;}
.chartBox .step02 > li:nth-of-type(3) .step04 > li > a:focus,
.chartBox .step02 > li:nth-of-type(3) .step04 > li > a:hover {background: #e7fffb;}
.chartBox .step02 > li:nth-of-type(4) .step04 > li > a:focus,
.chartBox .step02 > li:nth-of-type(4) .step04 > li > a:hover {background: #fff2e6;}

/* 광주하남, 부천 */
.chartBox.type01 .step02:before {left: 16.7%; width: 75%;}
.chartBox.type01 .step02 > li {padding-top: 8.5rem;}
.chartBox.type01 .step02 > li:before {height: 9.25rem;}

/* 안성 */
.chartBox.type02 .step02:before {left: 8.325%; width: 83.35%;}
/* 양평 */
.chartBox.type03 .step02:before {left: 16.66%; width: 66.66%;}
.chartBox.type03 .step02 > li {width: 33.33%;}

/* 용인 *//*240110*/
.chartBox.type04 .step02:before {left: 13.5%;width: 74%;}
.chartBox.type04 .step02 > li:first-of-type, .chartBox.type04 .step02 > li:last-of-type {width: 25%;}
.chartBox.type04 .step02 > li:nth-of-type(2) {margin:0 5%;}
.chartBox.type04 .step02 > li {width:40%;}
.chartBox.type04 .step02 > li > a {margin-bottom: 0;}
.chartBox.type04 .step03 > li {padding-top: 1.5rem;}

.chartBox.type04 {text-align: center;}
.chartBox.type04 li {position: relative; padding-top: 0.5rem;}
.chartBox.type04 li:before {position: absolute;top: 0;left: 50%;width: 1px;height: 1.5rem;background: #d9d9d9;content: "";}

.chartBox.type04 .step01 > li {position: relative; padding-top: 0;}
.chartBox.type04 .step01 > li:before {position: absolute; top: 0; left: 50%; width: 1px; height: 6rem; background: #d9d9d9; content: "";}
.chartBox.type04 .step01 > li > a {margin-bottom: 2.5rem; width: 12.5rem; height: 3.5rem; font-size: 1rem; font-weight: 600; color: #fff; background: #006ac0 url(/images/web/goeyi/sub/step_bg.png) no-repeat right center; border: 4px solid #b8dfff; border-radius: 2rem;}

.chartBox.type04 .step02 {position: relative;}
.chartBox.type04 .step02:before {position: absolute; top: 0; left: 14%; width: 75%; height: 1px; background: #d9d9d9; content: "";}
.chartBox.type04 .step02 > li {padding-top: 2rem;}
.chartBox.type04 .step02 > li:before {position: absolute;top: 0;left: 50%;width: 1px;height: 7.5rem;background: #d9d9d9;content: "";}

.chartBox.type04 .step03 {position: relative;display:flex;margin-top: 2rem;}
.chartBox.type04 .step03:before {position:absolute; content:''; width:67.1%; background:#d9d9d9; height:1px; left:50%; transform:translate(-50%, 0);}
.chartBox.type04 .step02 > li:nth-of-type(2) .step03:before {width:80.1% !important;}
.chartBox.type04 .step03 > li {flex:1;width:2.4rem;text-align:center;}
.chartBox.type04 .step03 > li > a {display: block;margin: 0 auto;padding: 1rem 1.1rem;width: 100%;max-width: 3.5rem;height: 11.5rem;background: #fff !important;border: 1px solid;border-radius: 0.5rem;color:#333 !important;}

.chartBox.type04 .step02 > li:nth-of-type(1) .step03 > li > a:hover,
.chartBox.type04 .step02 > li:nth-of-type(1) .step03 > li > a:focus {background:#ebf9ff !important;}
.chartBox.type04 .step02 > li:nth-of-type(2) .step03 > li > a:hover,
.chartBox.type04 .step02 > li:nth-of-type(2) .step03 > li > a:focus {background:#f0f4ff !important;}
.chartBox.type04 .step02 > li:nth-of-type(3) .step03 > li > a:hover,
.chartBox.type04 .step02 > li:nth-of-type(3) .step03 > li > a:focus {background:#e9f7e9 !important;}


@media (max-width:880px){


	/*240110*/
	.chartBox.type04 .step03 > li > a {padding:1rem .78rem;}
}

@media (max-width:768px){

    
	/* 조직도 */
	.chartBox .step02:before {display: none;}
	.chartBox .step02 > li {padding-top: 2rem; width: 50%;}
	.chartBox .step02 > li ~ li {margin-top: 2rem;}
	.chartBox .step02 > li.half {width: 100%;}
	.chartBox .step02 > li:before {height: 2rem;}
	.chartBox .step02 > li.half:before {height: 7rem;}
	/* 안성 */
	.chartBox.type02 .step02 > li,
	.chartBox.type03 .step02 > li,
	.chartBox.type04 .step02 > li {width: 100%;}

	/*240110*/
	.chartBox.type04 .step02 > li{width:100% !important;}
	.chartBox.type04 .step03 {display:block; margin-top:1rem;}
	.chartBox.type04 .step03:before {display:none;}
	.chartBox.type04 .step03 > li { flex:none; width:100% !important; padding-top:1rem;}
	.chartBox.type04 .step03 > li > a {max-width:100% !important; height:auto;}
	.chartBox.type04 .step02 > li:nth-of-type(2) {margin:1.5rem 0 0 0;}
}