/* 조직도 */
[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: 1rem; background: #d9d9d9; content: "";}
.chartBox a,
.chartBox p {position: relative; display: flex; margin: 0 auto; width: 100%; max-width: 100%; height: 2.5rem; flex-direction: column; align-items: center; justify-content: center; 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: #08879d url(/images/web/goeay/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: 15%;width: 70%;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: calc(100% / 3);}
.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 {position:relative; margin-bottom: 1.5rem; width: 12.5rem; height: 3.5rem; font-size: 1rem; word-break: keep-all; font-weight: 600; color: #fff; background: url(/images/web/goeay/sub/step_bg.png) no-repeat right center; border: 4px solid #b8dfff; border-radius: 2rem;}
.chartBox .step02 > li > a:before{position: absolute; bottom: calc(-1.5rem - 4px); left: 50%; width: 1px; height: calc(1.5rem + 4px); background: #d9d9d9; content: "";}
.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: #FF5E30; border-color: #f6c99c;}
.chartBox .step02 > li:nth-of-type(4) > a {background-color: #008000; border-color: #01a301;}
.chartBox .step02 > li:nth-child(3) > a:before {height: 0;}
.chartBox .step02 > li:after {content: "●";}

.chartBox .step03 {position: relative; font-size:0; }
.chartBox .step03:after{position: absolute; top: 0; left: 25%; width: 50%; height: 1px; background: #d9d9d9; content: "";}
.chartBox .step03 > li { display:block; width:100%; vertical-align: top; margin-top:1rem; padding: 0 0.25rem; font-size:0.8rem;}
.chartBox .step03 > li:before{ top:-1rem; height:1rem;}
.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 { position:relative; font-size:0.75rem; margin-top:0.5rem;}
.chartBox .step04 > li:before{ top:-0.5rem}
.chartBox .step04 > li a { border: 1px solid; }
.chartBox .step04 > li {padding: 0 1.5rem;}
.chartBox .step04 > li a {background-color: #fff;}

/* 분류별 색상 */
.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: #FF5E30; border-color: #FF5E30;}
.chartBox .step02 > li:nth-of-type(4) .step03 > li > a {color: #fff; background: #008000; border-color: #008000;}
.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: #fff2e6;}
.chartBox .step02 > li:nth-of-type(4) .step04 > li > a:focus,
.chartBox .step02 > li:nth-of-type(4) .step04 > li > a:hover {background: #e7fffb;}

/*교육환경보호구역안내*/
.policy_tit{ font-size:1.25rem; text-align:center; font-weight:700; margin-bottom:1rem; color:#005fa5;}
.policy_wrap{ margin:0.5rem 0 2rem;}
.policy_wrap dt{ border-radius:0.25rem; padding:0.5rem; text-align:center; font-weight:600; font-size:0.9rem; background:#005fa5; color:#fff;  }
.policy_wrap dd > ul.row_list{ display: flex; flex-wrap: wrap;}
.policy_wrap dd > ul.row_list li{ width:calc(33.33% - 0.5rem); padding:0.75rem; margin:0.25rem; text-align:center; border:1px solid #ddd; border-radius:0.25rem;}
.policy_wrap dd > ul.row_list li .ico{ margin-bottom:1rem;}
.policy_wrap dd > ul.row_list li .ico img{ width:5.5rem; height:auto;}
.policy_wrap dd > ul.row_list li span{ font-weight: 600;}

.policy_wrap dd > ul.col_list li{ display: flex; align-items:center; padding:0.25rem 0.5rem; margin:0.25rem; border:1px solid #ddd; border-radius:0.25rem;}
.policy_wrap dd > ul.col_list li .ico{  margin-right:0.5rem;}
.policy_wrap dd > ul.col_list li .ico img{ width:2rem; height:auto;}
.policy_wrap dd > ul.col_list li span{ font-weight: 600;}

.policy_cont h3.tit1 > p{ display: inline-block; vertical-align: middle; }
.policy_cont h3.tit1 > p img{ width:1.75rem; height:auto; }

/* 240514 학원ㆍ교습소ㆍ개인과외 추가 */
.dt_view {transform: rotate(0deg);display: inline-block;}
.dt_view.on {transform: rotate(180deg);}

/* media query mobile */
@media (max-width: 960px) {
    /* 조직도 */
    .chartBox .step02:before { left: 25%; width: 50%; }
    .chartBox .step02 > li { width: 50%; }
    .chartBox .step02 > li:nth-child(3),
    .chartBox .step02 > li:nth-child(4) { margin-top: 1.5rem; }

}


@media (max-width: 480px) {
    /* 조직도 */
    .chartBox .step01 > li:before { display: none; }
    .chartBox .step01 > li > p { margin-bottom: 1.5rem; }
    .chartBox .step01 > li > a {margin-bottom:0;}
    .chartBox .step02:before { display: none; }
    .chartBox .step02 > li {width: 100%;margin-top: .5rem !important;!i;!;}
    .chartBox .step02 > li:nth-child(2) { margin-top: 1.5rem; }

}