@charset "utf-8";

/* 조직도 */
[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%;min-height: 2.5rem;padding:0.25rem 0.75rem;flex-direction: column;align-items: center;justify-content: center;background: #fff;border: 1px solid;border-radius: 1.5rem;z-index: 1;max-width: 12.5rem;}
.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: 100%;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: 25%;width: 50%;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: 50%;}
.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:nth-of-type(3) {width: 100%;margin: 0 auto;}

.chartBox .step02 > li:nth-of-type(4):before{ height:7rem;}
.chartBox .step02 > li:nth-of-type(5):before{ height:7rem;}

.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: #008000; border-color: #01a301;}
.chartBox .step02 > li:nth-of-type(4) > a {background-color: #FF5E30; border-color: #f6c99c;}

/* .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 { padding: 0 0.25rem; font-size:0.8rem;} */
/* .chartBox .step03 > li:before{ display:none;} */
/* .chartBox .step03 > li + li > a{ margin-top:1.5rem;} */

/* .chartBox .step04 > li:before{ top:0rem; height:1rem;} */
/* .chartBox .step04 > li > a { position:relative; border-radius:1rem; border:1px solid #ccc; background:#fff; padding:0.25rem 0.5rem; font-size:0.75rem;} */

.chartBox .step03 {position: relative;font-size:0;padding-top: 1.5rem;/* width: 12.5rem; *//* margin: 0 auto; */}
.chartBox .step03:after{position: absolute; top: 0; left: 25%; width: 50%; height: 1px; background: #d9d9d9; content: "";}
.chartBox .step03 > li {padding: 0 0.25rem;font-size:0.8rem;width: 50%;float: left;}
.chartBox .step03 > li > a:before{position: absolute;top: calc(-1.5rem - 5px);left: 50%;width: 1px;height: calc(1.5rem + 4px);background: #d9d9d9;content: "";}
.chartBox .step03 > li:after {position: absolute; top: -2.2rem; 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: "●"; z-index:1}
.chartBox .step03 > li:nth-of-type(n + 3):after {display:none;}
.chartBox .step03 > li:nth-of-type(n + 3) > a:before {display:none;}
.chartBox .step03 > li:before{ display:none;}
.chartBox .step03 > li:nth-of-type(n + 3) {margin-top:1rem;}

.chartBox .step04 {position: relative;font-size:0;max-width: 12.5rem;margin: 0 auto;}
.chartBox .step04 > li:before{ top:0rem; height:1rem;}
.chartBox .step04 > li > a { position:relative; border-radius:1rem; border:1px solid #ccc; background:#fff; padding:0.25rem 0.5rem; font-size:0.75rem;}


/* 분류별 색상 */
.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; margin-top:5rem;}
.chartBox .step02 > li:nth-of-type(5) .step03 > li > a {color: #fff; background: #ea4084; border-color: #ea4084; margin-top:5rem;}
.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;}
.chartBox .step02 > li:nth-of-type(5) .step04 > li > a {border-color: #ea4084;}
/* 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;}

/* toggle list(FAQ) */
.toggleList{ border-top:2px solid #33477e;}
.toggleList > dl{ border:1px solid transparent; border-bottom-color: #ddd; /* overflow:hidden; */}
.toggleList > dl:first-of-type{ border-top:0;}
.toggleList > dl > dt{ position:relative; }
.toggleList > dl > dt > a{ position:relative; display:block; padding:0.75rem 5rem 0.75rem 1.5rem; color:#000; font-size:1rem; font-weight:400; word-break: keep-all; z-index: 1;}
.toggleList > dl > dt:after{ content:"\e941"; position:absolute; right:1.5rem; top:0.7rem; font-weight:400; font-size:1rem; font-family: 'xeicon';}
.toggleList > dl > dt:before{ content:"더보기"; position:absolute; right:3rem; top:0.9rem;}
.toggleList > dl > dd{ display:none; padding:1rem 0; margin:0 1.5rem; border-top:1px solid #ddd;}
.toggleList > dl > dd > h3:first-child,
.toggleList > dl > dd > h4:first-child,
.toggleList > dl > dd > h5:first-child{ margin-top:0 !important;}
.toggleList > dd .tbl_st table{ border-color:#333; font-size:0.75rem;}
/* toggle list : active */
.toggleList > dl, .toggleList > dl > dt > a{ transition: all .2s; -webkit-transition: all .2s;}
.toggleList > dl.active{ border-color:#33477e}
.toggleList > dl.active > dt{ background:#33477e; }
.toggleList > dl.active > dt:after{ content:"\e944"; color:#fff;}
.toggleList > dl.active > dt:before{ content:"닫기"; color:#fff;}
.toggleList > dl.active > dt > a{ color:#fff; font-weight: 700;}
.toggleList > dl.active > dd{ display:block;}
/* toggle list : type2 */
.toggleList.ty2 > dl > dt{ padding-right:6rem;}
.toggleList.ty2 > dl > dt:after{ content:"상세내용보기"; top:0.9rem; color:#3f56c8; font-size:0.75rem; text-decoration: underline; font-family: 'SCDream'; }

.toggleList.Faq > dl { border: none; }
.toggleList.Faq > dl > dt { border-bottom: 1px solid #c0c6d1; }
.toggleList.Faq > dl > dt:before{ display: none; }
.toggleList.Faq > dl > dt:after { top: 1.1rem; z-index: 1; }
.toggleList.Faq > dl > dd { position: relative; margin: 0; background: #f9f9f9; padding: 1.75rem 3rem 2rem 3.1rem; font-size: 0.8rem; border-top: none; }
.toggleList.Faq > dl > dd::before { position: absolute; top: 1.5rem; left: 1rem; width: 1.6rem; height: 1.6rem; line-height: 1.6rem; text-align: center; color: #fff; background: #8f8f8f; border-radius: 50%; font-size: 0.9rem; content: "A"; }
.toggleList.Faq > dl > dt > a { padding: 1rem 4rem 1rem 3.1rem; font-size: 0.85rem; }
.toggleList.Faq > dl > dt > a::before { position: absolute; top: 0.85rem; left: 1rem; width: 1.6rem; height: 1.6rem; line-height: 1.5rem; text-align: center; border: 1px solid #dde7ff; color: #4366c1; border-radius: 50%; font-size: 0.9rem; content: "Q"; }

.toggleList.Faq > dl.active > dd { border-bottom: 1px solid #e0e3e8; }
.toggleList.Faq > dl.active > dt > a { color: #010101; background: #fff; font-weight: 400; }
.toggleList.Faq > dl.active > dt { border-bottom-color: #4366c1; }
.toggleList.Faq > dl.active > dt:after { color: #000; }
.toggleList.Faq > dl.active > dt > a::before { background: #4366c1; border-color: #4366c1; color: #fff; }

/* 안내도현황 */
.sch_state{ border-radius:1.5rem; padding:2.5rem 3rem; background:#e5f4ff url('/images/web/goehs/sub/img_0105_01.png') no-repeat 20% bottom; overflow:hidden;}
.sch_state > p{ float:right; width:16rem; }
.sch_state > p a{ display:block; text-align: left;}
.sch_state > p a i{ float:right;}
.sch_state > p a + a{ margin-top:0.5rem;}

/* 리스트 링크 */
.list_link{ display: flex; flex-wrap: wrap;}
.list_link li{ width:33.33%; padding:0 0.5rem;}
.list_link li a{ display:block; height:calc(100% - 0.5rem); margin:0.25rem 0; border-radius:0.5rem; padding:0.5rem; border:1px solid #006ac0; color:#000; text-align:center; word-break:keep-all; transition: all .2s; -webkit-transition: all .2s;}
.list_link li a:hover,
.list_link li a:focus{ background:#006ac0; text-decoration: underline; color:#fff;}

/* 전입학 */
.transSchl .tab_area{ border:2px solid #3a5792;}
.transSchl .tabTit{ padding:1rem; border-top:1px solid #cacedb; background:#f6f8ff;}
.transSchl .tabTit ul{ text-align: center;}
.transSchl .tabTit li{ display: inline-block; margin:0 0.5rem;}
.transSchl .tabTit li a{ position:relative; display: block; padding-left:1rem; color:#818590;}
.transSchl .tabTit li a:before{ content: ""; position: absolute; left: 0; top:50%; width:12px; height:3px; border-radius:5px; background:#b8bcc8; font-family: 'xeicon'; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.transSchl .tabTit li a.on{ font-weight: 600; color:#3a5792;}
.transSchl .tabTit li a.on:before{ content: "\e928"; background:none; width:auto; height:auto; font-weight: 600; color:#3a5792;}
.transSchl .list_box{ display: none; padding:1.5rem 2.5rem;}
.transSchl .list_box.on{ display: block;}
.transSchl .list_box.on + .list_box.on{ border-top:1px dotted #ddd;}
.transSchl .list_box ul{ display: flex; flex-wrap: wrap;}
.transSchl .list_box li{ width:16.66%; padding:0.15rem 0.25rem;}
.transSchl .list_box li button{ position:relative; min-height:1.5rem; padding-left:1.75rem;}
.transSchl .list_box li button:before{ content:""; position:absolute; left:0; top:0; width:1.5rem; height:1.5rem; border-radius:50%; background:#ecedf1;}
.transSchl .list_box li button:after{ display: none; content:""; position:absolute; left:0.5rem; top:0; width:1.1rem; height:1rem; background:url('/images/web/goehs/sub/ico_check_wh.png') no-repeat center/cover;}
.transSchl .list_box li button span{ position:relative; z-index: 0; padding:0 0.25rem; }
.transSchl .list_box li button span:before{ content:""; position:absolute; left:0; bottom:0; width:0px; height:0.5rem; border-radius:0.5rem; background:#d9ebf9; z-index: -1; opacity: 0;}

.transSchl .list_box li button:hover,
.transSchl .list_box li button:focus{ color: #0061a7;}
.transSchl .list_box li button.on{ color: #0061a7; font-weight: 600;}
.transSchl .list_box li button.on:before{ background:#007cd6;}
.transSchl .list_box li button.on:after{ display: block;}
.transSchl .list_box li button.on span:before{ opacity: 1; width:100%;}

.transSchl h2{ margin-top:2rem; font-size:1rem; font-weight:600; padding-bottom:0.5rem; border-bottom:2px solid #000;}
.transSchl .resultTbl table{ margin-top:1rem; border-bottom:1px solid #333;}
.transSchl .resultTbl thead{ background:#e6edf4; }
.transSchl .resultTbl thead:after{ content:""; display: block; height:10px; background:#fff;}
.transSchl .resultTbl thead th{ padding:0.5rem 0.25rem; }
.transSchl .resultTbl tbody{ position: relative; z-index: 0;}
.transSchl .resultTbl tbody:before{ content:""; position: absolute; left: 0; top: 0; width:100%; height:100%; border:1px solid #333; border-bottom:0; z-index: -1;}
.transSchl .resultTbl tbody + tbody:before{ border-top:0;}
.transSchl .resultTbl tbody + tbody tr:first-child td{ border-top:1px dotted #ccc;}
.transSchl .resultTbl tbody td{ line-height:1.6; padding: 0.75rem; text-align: center; word-break: keep-all; vertical-align: top;}
.transSchl .resultTbl tbody td > em{ display: none;}
.transSchl .etc_list .inr{ border:2px solid #dadada; line-height:1.3;}
.transSchl .etc_list li{ padding:0.5rem 1rem;}
.transSchl .etc_list li + li{ border-top:1px dotted #ddd;}
.transSchl .etc_list strong{ font-size:0.85rem; font-weight:600;}
.transSchl .etc_list p{ margin-top:0.35rem; font-size:0.75rem;}

/* media query mobile */

@media (max-width: 860px) {

    /* 전입학 */
    .transSchl .list_box{ padding:1rem;}
    .transSchl .list_box li{ width:20%;}

}

@media (max-width: 768px) {

    /* 전입학 */
    .transSchl .list_box li{ width:25%;}

    /* 조직도 */
    .chartBox .step02{ font-size:0;}
    .chartBox .step02:before{left:15%;width:66.66%;display: none;}
    .chartBox .step02 > li{ width:33.33%; font-size:0.8rem; float:none; display:inline-block; vertical-align: top;}
    .chartBox .step02 > li.step_side{ width:50%;}
    .chartBox .step02 > li.step_side:before,
    .chartBox .step02 > li.step_side:after{ display:none;}
    .chartBox .step02 > li.step_side .step03 > li > p{ margin-top:1rem;}

    /* toggle list */
    .toggleList > dl > dt:after{ font-size:0.9rem; top:0.75rem; right:0.75rem;}
    .toggleList > dl > dt:before{ top:0.85rem; right:2rem;}
    .toggleList > dl > dt > a{ font-size:0.9rem; padding:0.75rem 4rem 0.75rem 1rem;}
    .toggleList > dl > dd{ margin:0 .75rem;}

    .toggleList.Faq > dl > dd { padding: 1.5rem 1.5rem 1.5rem 3.4rem; }
    .toggleList.Faq > dl > dt > a::before { width: 1.5rem; height: 1.5rem; line-height: 1.4rem; font-size: 0.8rem; }
    .toggleList.Faq > dl > dd::before { width: 1.5rem; height: 1.5rem; line-height: 1.5rem; font-size: 0.8rem; }
    .toggleList.Faq > dl > dt > a { padding: 0.8rem 2.5rem 0.8rem 3.5rem; }
}

@media (max-width: 640px) {

    /* 안내도현황 */
    .sch_state{ padding:1rem; border-radius:1rem; background-image: none;}
    .sch_state > p{ float:none; width:100%; display: flex; flex-wrap: wrap }
    .sch_state > p a{ width:calc(50% - 0.5rem); margin:0.25rem;}
    .sch_state > p a + a{ margin-top:0.25rem;}

    /* 전입학 */
    .transSchl .resultTbl tbody{ border: 1px solid #ddd;}
    .transSchl .resultTbl tbody + tbody{ margin-top:1rem;}
    .transSchl .resultTbl tbody:before{ display:none;}
    .transSchl .resultTbl thead{ display: none;}
    .transSchl .resultTbl table,
    .transSchl .resultTbl tbody,
    .transSchl .resultTbl tbody tr,
    .transSchl .resultTbl tbody td{ display: block; width:100%; text-align: left;}
    .transSchl .resultTbl tbody td > em{ display: block; background: #e6edf4; font-weight:600; margin-bottom:0.25rem; padding:0.5rem 0.75rem;}
    .transSchl .resultTbl tbody td > p{ display: inline-block;}
    .transSchl .etc_list .inr{ background:#fafafa; border:none;}

}

@media (max-width: 580px) {

    /* 리스트 링크 */
    .list_link li{ width:50%; }

    /* 전입학 */
    .transSchl .list_box li{ width:33.33%;}
}

@media (max-width: 480px) {

    /* 조직도 */
    .chartBox .step02:before{ left:25%; width:50%;}
    .chartBox .step02 > li{ width:50%;}
    .chartBox .step02 > li.step_side{ width:100%;}
    .chartBox .step02 > li:after {display:none;}
    .chartBox .step03 > li {width: 100%;}
    .chartBox .step03 > li:nth-of-type(n+2) {margin-top:.5rem;}
    .chartBox .step03:after{display:none;}
    .chartBox .step03 > li:after{display:none;}
    .chartBox .step03 {padding-top: 0rem;}
    .chartBox .step03 > li > a:before {z-index:-1;display: none;}
     /* toggle list */
    .toggleList > dl > dt:before{ display:none;}
    .toggleList > dl > dt > a{ padding-right:1.75rem;}
    .toggleList.ty2 dt{ padding-right:1rem;}
    .toggleList.ty2 dt:after{display:none;}

    /* 안내도현황 */
    .sch_state > p a{ width:100%; margin:0.25rem 0;}

}

@media (max-width: 380px) {

    /* 조직도 */
    .chartBox .step01 > li > a{ margin-bottom:1rem;}
    .chartBox .step02:before{ display:none;}
    .chartBox .step02 > li{ width:100%; padding-top:1rem; margin-top:1rem;}

    /* 리스트 링크 */
    .list_link li{ width:100%; }

    /* 전입학 */
    .transSchl .tabTit{ padding:1rem 0;}
    .transSchl .list_box li{ width:50%;}
}