@charset "utf-8";
/* @latest 2025.05.07 SSJ */
/* @latest 2025.10.31 SSJ */



.pbs_wrap {}
.pbs_wrap * {font-family:'Noto Sans KR' !important; word-wrap:break-word; word-break:keep-all; box-sizing:border-box;}



/* 지역*/
.area_wrap {display:flex;justify-content:space-between;flex-direction: row;align-items: flex-start;}
.area_wrap .title_box {left:0;z-index:2;display:inline-flex;box-sizing:border-box;}
.area_wrap .school_wrap .title_box {padding:20px 60px 20px 20px;}
.area_wrap .title_box .title {font-size:21px;font-weight:500;}

.area_wrap .map_wrap {position:relative;display:flex;align-items:flex-start;flex-direction:column;padding-top: 0;gap: 0;}
.area_wrap .map_wrap .title_box {padding:10px 10px 10px 30px;margin-bottom:10px;flex-direction:column;width:100%;background: transparent;position: relative;min-height: auto;align-items: flex-start;border-radius: 0;}
.area_wrap .map_wrap .title_box:before {content:'';display:block;position:absolute;top:19px;left:0;width:22px;height:22px;border-radius:10% 50% 50% 50%;background:#7ebb50;}
.area_wrap .map_wrap .title_box .title {font-size:23px;font-weight:600;color: #333;margin-left: 0;}
.area_wrap .map_wrap .title_box p {margin-top:10px; font-size:15px; color:#838383;}
.area_wrap .map_wrap .map_box {position:relative;z-index:1;display:inline-flex;width:100%;height:100%;padding:20px 40px;background-color:#f8f8f8;border:2px solid #ededea;margin-bottom:30px;border-radius:25px;}
.area_wrap .map_wrap .map_box .bg_box {width:100%; height:100%; background:url(../images/map_00.png) center no-repeat; background-size:contain; transition:background-image .03s ease-in-out;}

.area_wrap .map_wrap .map_list {display:flex;flex-wrap:wrap;padding:0;}
.area_wrap .map_wrap .map_list:not(.map_position) {gap: 10px;border-top: none;background: transparent;width: 100%;}
.area_wrap .map_wrap .map_list:not(.map_position) li {position:relative;list-style-type:none;padding-left: 0;width: auto;margin-left: 0 !important;margin-top: 0 !important;}
.area_wrap .map_wrap .map_list:not(.map_position) li:before {display:none;}
.area_wrap .map_wrap .map_list li a {color:#6b6b6b;}
.area_wrap .map_wrap .map_list:not(.map_position) li.active a {color:#fff;font-weight:600;background:#75b247;}
.area_wrap .map_wrap .map_list:not(.map_position) li a {display:block;width:100%;font-size:15px;text-align:center;padding:10px 25px;border-radius:20px;border:2px solid #7ebb50;background:#f7f9f6;letter-spacing:-0.5px;/* margin-bottom: -4px; */}
.area_wrap .map_wrap .map_list:not(.map_position) li:not(.active) a:hover {color:#559609; font-weight:600;}

/* map_list를 복제 후 지도 이미지 위에 배치 */
.area_wrap .map_wrap .map_box .map_position {position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;padding-left:0 !important;background-color:transparent;border:0;padding:0;display: block;}
.area_wrap .map_wrap .map_box .map_position li {position:absolute;width:auto !important;padding-left:0;font-size:13px;letter-spacing:-0.5px;list-style:none;}
.area_wrap .map_wrap .map_box .map_position li:before {display:none;}
.area_wrap .map_wrap .map_box .map_position li a {position:relative;color:#000;text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;letter-spacing:-1px !important;}
.area_wrap .map_wrap .map_box .map_position li a:not(.active):hover {text-decoration:underline; font-weight:500;}
.area_wrap .map_wrap .map_box .map_position li.active a {color:#fff; text-shadow:-1px 0 2px #000, 0 1px 2px #000, 1px 0 2px #000, 0 -1px 2px #000;}

    /* 지역 위치값 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_01"] {top:32%;left:61%;} /* 가평 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_02"] {top:43.5%;left:28.5%;} /* 고양 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_03"] {top:57.5%;left:29.5%;} /* 광명 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_04"] {top:60%;left:53%;} /* 광주·하남 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_05"] {top:42%;left:49%;} /* 구리·남양주 */

    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_06"] {top:63%;left:33.8%;} /* 군포·의왕 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_07"] {top:41%;left:15.5%;} /* 김포 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_08"] {top:32%;left:36%;} /* 동두천·양주 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_09"] {top:53.5%;left:25.5%;} /* 부천 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_10"] {top:59.5%;left:44%;} /* 성남 */

    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_11"] {top:68%;left:38.3%;} /* 수원 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_12"] {top:60.5%;left:26.8%;} /* 시흥 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_13"] {top:65.2%;left:29%;} /* 안산 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_14"] {top:86%;left:53.5%;} /* 안성 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_15"] {top:59.5%;left:33.5%;} /* 안양·과천 */

    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_16"] {top:52.5%;left:70%;} /* 양평 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_17"] {top:67.5%;left:74.5%;} /* 여주 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_18"] {top:13%;left:39.5%;} /* 연천 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_19"] {top:72.5%;left:51.5%;} /* 용인 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_20"] {top:38%;left:41%;} /* 의정부 */

    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_21"] {top:72%;left:62.5%;} /* 이천 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_22"] {top:29%;left:27%;} /* 파주 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_23"] {top:86.5%;left:37.6%;} /* 평택 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_24"] {top:21%;left:52.2%;} /* 포천 */
    .area_wrap .map_wrap .map_box .map_position li[data-bg *= "_25"] {top:74.5%;left:30%;} /* 화성·오산 */





.area_wrap .school_wrap {position:relative;display:flex;flex-direction:column;width:50%;padding-top:65px;gap: 0;}
.area_wrap .school_wrap .title_box {top: 0;min-width:200px;min-height:56px;background-color:#f7f9f6;margin-bottom:20px;position: relative;}
.area_wrap .school_wrap .title_box .title {margin-left:20px;position:relative;color: #333;}
.area_wrap .school_wrap .title_box .title:before {content:''; display:block; position:absolute; top:16px; left:-20px; width:5px; height:5px; border-radius:50%; background:#e59b0f; }
.area_wrap .school_wrap .title_box .title .area_name {position:relative; margin-right:6px; font-size:23px;}
.area_wrap .school_wrap .title_box .title .area_name:before {position:absolute;bottom:0;left:-3px;z-index:-1;content:'';width:calc(100% + 5px);height:30%;background-color:#b7d4a1;animation:revealWidth .5s ease forwards;}

/* table */
.tbl_title_wrap {display:flex; flex-direction:column; gap:15px;}
.tbl_list.over_bg tbody tr:hover :is(th, td),
.tbl_list.over_bg tbody tr:hover a:not([class *= "btn-"]) {color:#000; background-color:#f6f6f6;}
.tbl_list {border-top:2px solid #3262aa;background-color:#fff;}
.tbl_list thead th {padding:15px 10px;font-size:18px;font-weight:500;color:#121212;background-color:#f9f9f9;border-bottom:2px solid #ececec;}
.tbl_list tbody th {padding:10px; font-size:16px; color:#333; text-align:center; border-bottom:1px solid #ccc;}
.tbl_list tbody td {padding:10px;font-size:15.5px;color:#333;text-align:center;border-bottom:1px solid #ececec;}
.tbl_list tbody td.txt-l {text-align:left;}
.tbl_list tbody td a {color:#333;}
.tbl_list a[class *= "btn-"] {font-size:14px;}
.tbl_list .btn-basic {display:inline-flex; justify-content:center; align-items:center; height:40px; line-height:40px; padding:0 15px; margin-top:2px; margin-bottom:2px; border-radius:8px;}

/* boxTypeList */
.boxTypeList {width:100%;display:flex;flex-wrap:wrap;gap: 15px 2%;padding-left: 0 !important;}
.boxTypeList>p:only-child {font-size: 15px;padding-left: 40px;}
.boxTypeList li {width: 32%;text-align:center;border: 2px solid #ececec; padding: 20px 15px 25px; border-radius: 10px;}
.boxTypeList li p {font-size: 15px;line-height:150%;color:#333;}
.boxTypeList li a {padding: 9px 15px;margin-top: 7px;border-radius:8px;font-size:14px;display: inline-block;}

.tbl_list a[class *= "btn-"]:after,
.boxTypeList li a:after {content:"";display: inline-block;width: 5px;height: 5px;border: 1px solid #333;border-width: 1px 1px 0 0;transform: rotate(45deg);vertical-align: middle;margin: -2px 0 0 4px;}
.tbl_list a[class *= "btn-"]:hover,
.boxTypeList li a:hover {background:#dc8c00; color:#fff; border-color:#dc8c00;}
.tbl_list a[class *= "btn-"]:hover:after,
.boxTypeList li a:hover:after {border-color:#fff;}

@keyframes revealWidth { 
    from { width:0; } to { width:calc(100% + 5px); } 
}











    @media (min-width:1300px) {
        .area_wrap .map_wrap {width:45%;gap: 0;padding-top: 0;}
        .area_wrap .map_wrap .map_box .bg_box {min-height:550px;}
        .area_wrap .map_wrap .title_box .num {margin-right:auto;}
    }
    @media (max-width:1299px) and (min-width:990px) {
        .area_wrap .map_wrap {width:45%;gap: 0;padding-top: 0;}
    }
    @media (max-width:1299px) and (min-width:1200px) {.area_wrap .map_wrap .map_box .bg_box {min-height:530px;}}
    @media (max-width:1199px) and (min-width:1100px) {.area_wrap .map_wrap .map_box .bg_box {min-height:470px;}}
    @media (max-width:1099px) and (min-width:990px)  {.area_wrap .map_wrap .map_box .bg_box {min-height:420px;}}

    @media (max-width:990px) {
        .area_wrap {flex-direction:column;gap: 0;}
        .area_wrap .map_wrap .map_box {display:none;}
        .area_wrap .map_wrap .map_list {width: calc(100% - 40px) !important;margin:0 10px 0 30px;background-color: #f8f8f8 !important;border: 2px solid #ededea !important;padding:15px;border-radius:10px;}
        .area_wrap .school_wrap {width:100%;padding:30px 10px 0 20px;}
        .area_wrap .school_wrap .title_box {background:transparent;padding-bottom:0;padding-left:0;margin-bottom:10px;}
        .area_wrap .school_wrap .title_box .title {font-size:19px;}
        .area_wrap .school_wrap .title_box .title .area_name {font-size:20px;}

        .area_wrap .map_wrap .map_list:not(.map_position) li a {padding:6px 12px; border-radius:15px; font-weight:500;}
    }
    @media (max-width:799px) {
        .area_wrap .map_wrap .title_box .title {font-size:20px;}
        .area_wrap .map_wrap .title_box:before {top:15px;}

        .tbl_list thead th {font-size:16px;}
        .boxTypeList {gap: 0;}
        .boxTypeList li {width:100%;display: flex;justify-content: space-between; align-items:center; padding:11px 10px;margin-bottom: 10px;border-width: 1px;}
        .boxTypeList li a {margin-top:0;}
    }