@charset "utf-8"; 
#wrap {display:flex; flex-direction:column; width:100vw; height:100vh;}
#wrap #header {flex:0 0 auto;}

/* top */

/* top - topbar */
.toparea .topbar {border-bottom: 0; box-shadow: 0 5px 20px 0 rgba(56,56,56,0.15);}
.toparea .topbar .d_area {width:100%; padding:0 20px;}

/* top - facil_cate */
.toparea .topsearch {z-index: 9; position: absolute; top: 50px; left: 340px; width: calc(100% - 340px); padding:0 15px 0 0; display:flex; justify-content: flex-end; align-items: center; gap: 20px;}
.toparea .topsearch .facil_cate {padding: 10px 0; display:flex; gap: 5px;}
.toparea .topsearch .facil_cate .facil_cate_btn {display:inline-flex; justify-content:center; align-items:center; height:40px; padding: 0 15px; border-radius: 5px; color:#666; background-color: #fff; font-size:16px; font-weight:500; line-height:normal; letter-spacing:0; box-shadow: 0 5px 20px 0 rgba(56,56,56,0.15);}
.toparea .topsearch .facil_cate .facil_cate_btn.active {background-color:#666; color: #fff;}
.toparea .topsearch .facil_cate .item1 .facil_cate_btn.active {background-color: #e32c13;}
.toparea .topsearch .facil_cate .item2 .facil_cate_btn.active {background-color: #018665;}
.toparea .topsearch .facil_cate .item3 .facil_cate_btn.active {background-color: #1a69eb;}
.toparea .topsearch .facil_cate .item4 .facil_cate_btn.active {background-color: #c509e7;}
.toparea .topsearch .facil_cate .facil_cate_btn::before {content: ''; display:block; margin-right:10px; background-repeat:no-repeat; background-position:center; background-size:auto; content:'';}
.toparea .topsearch .facil_cate .item1 .facil_cate_btn::before {width:23px; height:20px; background-image:url(/images/hmpg/icon_cate1.png);}
.toparea .topsearch .facil_cate .item2 .facil_cate_btn::before {width:16px; height:16px;background-image:url(/images/hmpg/icon_cate2.png);}
.toparea .topsearch .facil_cate .item3 .facil_cate_btn::before {width:16px; height:22px;background-image:url(/images/hmpg/icon_cate3.png);}
.toparea .topsearch .facil_cate .item4 .facil_cate_btn::before {width:17px; height:17px;background-image:url(/images/hmpg/icon_cate4.png);}
.toparea .topsearch .facil_cate .item1 .facil_cate_btn.active::before {background-image:url(/images/hmpg/icon_cate1_active.png);}
.toparea .topsearch .facil_cate .item2 .facil_cate_btn.active::before {background-image:url(/images/hmpg/icon_cate2_active.png);}
.toparea .topsearch .facil_cate .item3 .facil_cate_btn.active::before {background-image:url(/images/hmpg/icon_cate3_active.png);}
.toparea .topsearch .facil_cate .item4 .facil_cate_btn.active::before {background-image:url(/images/hmpg/icon_cate4_active.png);}

/* search */
.facil_search_wrap {display:flex; gap: 5px; height:40px;}
.facil_search_wrap.mb {display:none;}
.facil_search_wrap .facil_search_query {margin-right: 5px; display:block; width:250px; height:100%; padding:0 15px; border-radius:5px; color:#333; font-size:15px; line-height:normal; letter-spacing:-.025em; box-shadow: 0 5px 20px 0 rgba(56,56,56,0.15);}
.facil_search_wrap .facil_search_query::placeholder {color:#8a949e;}
.facil_search_wrap button {width: 80px; height: 40px; font-size: 15px; display:flex; justify-content:center; align-items:center; gap:5px; border-radius: 5px; box-shadow: 0 5px 20px 0 rgba(56,56,56,0.15);}
.facil_search_wrap button::before {content: ''; display:block; width:15px; height:15px; background-repeat:no-repeat; background-size: cover;}
.facil_search_wrap .btn_search::before {background-image:url(/images/hmpg/icon_dolbom_reset.png);}
.facil_search_wrap .btn_reset::before {background-image:url(/images/hmpg/icon_dolbom_search.png);}
.btn_place {position: absolute; top: 60px; right: 15px; width: 34px; height: 34px; font-size: 0; background: #fff url(/images/hmpg/icon_place.png) no-repeat center; border-radius: 5px; box-shadow: 0 5px 20px 0 rgba(56,56,56,0.15);}

/* facil */
.facil {display:flex; position:relative; flex:1 1 auto;}

/* facil - facil_info */
.facil .facil_info {display:flex; position:absolute; top:0; left:-340px; z-index:50; flex-direction:column; width:340px; height:100%; background-color:#0276dd; transition:left .3s linear; box-shadow: 0 5px 20px 0 rgba(56,56,56,0.15);}
.facil .facil_info.active {left:0;}
.facil .facil_info .logo_box {padding: 25px 20px; display:flex; justify-content: space-between; align-items: center;}
.facil .facil_info .logo_box button {padding: 6px 25px 6px 10px; font-size: 13px; border: 1px solid #4e9fe7; border-radius: 5px; color: #fff; background: url(/images/hmpg/icon_bookmark2.png) no-repeat right 8px center;}
.facil .facil_info .logo_box button:hover,
.facil .facil_info .logo_box button.active {border-color: #0158bb; background-color: #0158bb;}
.facil .facil_info_top {display:flex; flex:0 0 auto; align-items:center; height:60px; padding:0 20px; background-color:#fff; color:#464c53; font-size:16px; font-weight:400; line-height:normal; letter-spacing:-.025em;}
.facil .facil_info_top span {font-weight:500;}
.facil .facil_info_top span em {font-weight:500; color:#0276dd; font-style:normal;}
.facil .facil_info_list {overflow-x:hidden; overflow-y:auto; position:relative; flex:1 1 auto; border-top:1px solid #cdd1d5; border-bottom:1px solid #cdd1d5; background-color:#fff;}
.facil .facil_info_list::-webkit-scrollbar {width:5px;}
.facil .facil_info_list::-webkit-scrollbar-track {background-color:#e6e8ea;}
.facil .facil_info_list::-webkit-scrollbar-thumb {background-color:#b1b8be;}
.facil .facil_info_item {position:relative;}
.facil .facil_info_item:not(:last-child) {border-bottom:1px solid #cdd1d5;}
.facil .facil_info_btn {display:flex; position:relative; flex-direction:column; width:100%; padding:20px 20px 65px; border-top:1px solid transparent; border-bottom:1px solid transparent; text-align:left; gap:16px;}
.facil .facil_info_name {position: relative; display:flex; gap: 10px; width: 100%;}
.facil .facil_info_name em {display:inline-flex; flex:0 0 auto; justify-content:center; align-items:center; width:26px; height:26px; border-radius:50%; border: 1px solid #666; color: #fff; background-color: #fff; font-size:14px; font-weight:600; font-style:normal; line-height:normal; letter-spacing: -1px;}
.facil .facil_info_item.CAFC .facil_info_name em {border-color:#e32c13; color: #e32c13;}
.facil .facil_info_item.MEDI .facil_info_name em {border-color:#018665; color: #018665;}
.facil .facil_info_item.CULT .facil_info_name em {border-color:#1a69eb; color: #1a69eb;}
.facil .facil_info_item.CHLD .facil_info_name em {border-color:#c509e7; color: #c509e7;}
.facil .facil_info_name span {width: calc(100% - 100px); font-size:20px; font-weight:600; line-height:24px;}
.facil .facil_info_name .bus {margin-top: 3px; width: 28px; height: 18px; font-size: 0; background:url(/images/hmpg/icon_bus.png) no-repeat center / contain;}
.facil .facil_info_name .bookmark {position: absolute; top: 0; right: 0;}
.facil .facil_info_cont {display:flex; flex-direction:column; margin-left:3px; font-size:16px; gap:5px;}
.facil .facil_info_addr,.facil .facil_info_tel {margin-bottom: 5px; display:flex; align-items:flex-start;}
.facil .facil_info_addr span,.facil .facil_info_tel span {font-size: 15px; color:#666; line-height:17px; letter-spacing:-.025em;}
.facil .facil_info_addr::before,.facil .facil_info_tel::before {content: ''; display:block; flex:0 0 auto; width:17px; height:17px; margin-right:5px; margin-bottom:2px; background-repeat:no-repeat; background-position:center; background-size:auto;}
.facil .facil_info_addr::before {background-image:url(/images/hmpg/icon_addr.png);}
.facil .facil_info_tel::before {background-image:url(/images/hmpg/icon_tel.png);}
.facil .facil_info_link {position:absolute; right:15px; bottom:20px; padding: 0 25px 0 15px; height: 30px; line-height: 28px; font-size: 14px; border-radius:30px; color: #666; border: 1px solid #c2c2c2; background:url(/images/hmpg/icon_arr.png) right 10px top 8px /auto no-repeat;}
.facil .facil_info_btn strong {background-color:#0480a9; color:#fff;}
.facil .facil_info_item.active .facil_info_btn {border-color:#cdd1d5; background-color:#e6e8ea;}
.facil .facil_info_item.active .facil_info_btn .facil_info_name span {text-decoration:underline;}
.facil .facil_info_item.active .facil_info_link {background-color:#cdd1d5;}
.facil .facil_info_toggle {display:block; position:absolute; top:calc(50% - 30px); left:100%; width:26px; height:60px; border:1px solid #d2d2d2; border-radius:0 12px 12px 0; border-left:none; background-color:#fff; font-size:0;}
.facil .facil_info_toggle::before {content: ''; display:block; width:100%; height:100%; background-image:url(/images/hmpg/icon_togg.png); background-repeat:no-repeat; background-position:center; background-size:auto; content:'';}
.facil .facil_info .facil_info_toggle::before {transform:rotate(180deg);}
.facil .facil_info.active .facil_info_toggle::before {transform:rotate(0);}
.facil .facil_info_pagenation {display:flex; flex:0 0 auto; justify-content:center; align-items:center; height:58px; background-color:#fff;}
.facil .facil_info_pagenation button {border: 1px solid #ddd; border-radius: 5px;}
.facil .facil_info_pagenation button:hover {border-color: #0276dd;}
.facil .facil_info_pagenation .prev_end,.facil .facil_info_pagenation .prev,.facil .facil_info_pagenation .next,.facil .facil_info_pagenation .next_end {flex:0 0 auto; width:33px; height:33px; margin:0 3px; background-repeat:no-repeat; background-position:center; background-size:auto; font-size:0;}
.facil .facil_info_pagenation .prev_end {background-image:url(/images/hmpg/paging_first.png);}
.facil .facil_info_pagenation .prev {background-image:url(/images/hmpg/paging_prev.png);}
.facil .facil_info_pagenation .next {background-image:url(/images/hmpg/paging_next.png);}
.facil .facil_info_pagenation .next_end {background-image:url(/images/hmpg/paging_last.png);}
.facil .pagenation_list {display:flex; flex-direction:row; justify-content:center; align-items:center; width:111px; margin:0 12px;}
.facil .page-btn {flex:0 0 auto; width:33px; height:33px; margin:0 2px; color:#666; font-size:16px; line-height:normal; letter-spacing:-.025em; border: 0 !important;}
.facil .page-btn.active {border: 1px solid #0276dd !important; color:#0276dd; font-weight:600;}

/* 지도 */
#facil_map {position:relative; z-index:30; flex:1 1 auto;}
#facil_map .facil_overlay {display:flex; position:absolute; top:auto !important; left:50% !important; bottom:90px !important; flex-direction:column; align-items:stretch; min-width:390px; max-width:600px; padding:15px 0 65px; border-radius:10px; background-color:#fff; text-align:left; gap:15px; transform:translateX(-50%) !important; box-shadow: 0 5px 20px 0 rgba(56,56,56,0.15);}
#facil_map .facil_overlay::before {content: ''; display:block; position:absolute; top:100%; left:calc(50% - 12px); z-index:1; border-top:25px solid #fff; border-right:12px solid transparent; border-left:12px solid transparent;}
#facil_map .facil_overlay::after {content: ''; display:block; position:absolute; top:100%; left:calc(50% - 14px); z-index:0; width:0; border-right:14px solid transparent; border-left:14px solid transparent; box-shadow: 0 5px 20px 0 rgba(56,56,56,0.15);}
#facil_map .facil_overlay .facil_name {margin:0 20px; display:flex; align-items: center; gap: 10px; color:#0276dd; font-size:20px; font-weight:500; line-height:24px; letter-spacing:-.025em;}
#facil_map .facil_overlay .facil_cont {display:flex; flex-direction:column; margin:0 20px; font-size:15px; gap:10px;}
#facil_map .facil_overlay .facil_addr,#facil_map .facil_overlay .facil_tel {display:flex; align-items:flex-start;}
#facil_map .facil_overlay .facil_addr span,#facil_map .facil_overlay .facil_tel span {font-size: 15px; color:#666; line-height:17px; letter-spacing:-.025em;}
#facil_map .facil_overlay .facil_addr::before,#facil_map .facil_overlay .facil_tel::before {content: ''; display:block; flex:0 0 auto; width:17px; height:17px; margin-right:6px; margin-bottom:2px; background-repeat:no-repeat; background-position:center; background-size:auto;}
#facil_map .facil_overlay .facil_addr::before {background-image:url(/images/hmpg/icon_addr.png);}
#facil_map .facil_overlay .facil_tel::before {background-image:url(/images/hmpg/icon_tel.png);}
#facil_map .facil_overlay .facil_link {position:absolute; right:20px; bottom:20px; padding: 0 25px 0 15px; height: 30px; line-height: 28px; font-size: 14px; border-radius:30px; color: #666; border: 1px solid #c2c2c2; background:url(/images/hmpg/icon_arr.png) right 10px top 7px /auto no-repeat;}
#facil_map .facil_overlay .overlay_close {position:absolute; top:20px; right:20px; width:18px; height:18px; background:url(/images/hmpg/icon_close2.png) center/contain no-repeat; font-size:0;}
#facil_map .facil_overlay strong {background-color:#0480a9; color:#fff;}

/* 지도 시설 정보 로딩중 */
#facil_map.loading {} 
#facil_map::before {display:block; visibility:hidden; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1; width:auto; height:auto; background-color:rgba(0,0,0,.6); transition:.25s linear; content:''; opacity:0;}
#facil_map .loading_ico {display:block; position:absolute; top:0; right:0; bottom:0; left:0; z-index:5; width:200px; height:26px; margin:auto; padding-top:60px; box-sizing:content-box; color:#fff; font-size:20px; font-weight:600; text-align:center;}
#facil_map .loading_ico::before {content: ''; display:block; position:absolute; top:24px; left:0; width:100%; height:6px; border-radius:3px; background-color:#fff;}
#facil_map .loading_ico::after {content: '';display:block; position:absolute; top:24px; left:0; width:var(--cur); height:6px; border-radius:3px; background-color:#00c6da;}
#facil_map.loading::before {visibility:visible; z-index:5; opacity:1;}

@media all and (min-width:1001px) {
    .facil .facil_info_item:hover .facil_info_btn {background-color:#eff7ff;}
    .facil .facil_info_item:hover .facil_info_btn .facil_info_name span {text-decoration:underline;}
    .facil .facil_info_item:hover .facil_info_link {background: #fff url(/images/hmpg/icon_arr_active.png) right 10px top 8px /auto no-repeat; border-color:#0276dd; color: #0276dd;}
}
@media all and (max-width:1240px) {
    .facil_search_wrap {display:none; position:relative; top:auto; right:auto; bottom:auto; left:auto; width:auto; margin:16px;}
    .facil_search_wrap.mb {display:flex; flex:0 0 auto;}
    .facil_search_wrap.mb .facil_search_query {width: calc(100% - 90px);}
    .btn_place {top: 75px; right: 25px;}
}
@media all and (max-width:1000px) {
    .toparea .topbar {display:none;}
    .toparea .topsearch {padding: 0; top: 0; left: 0; width: 100%;}
    .toparea .topsearch .facil_cate {padding: 0; width: 100%; gap: 0;}
    .toparea .topsearch .facil_cate li {width: 25%;}
    .toparea .topsearch .facil_cate .facil_cate_btn {width:100%; height:60px; border-radius: 0; box-shadow: none;}
    .facil .facil_info {top: 60px;}
    .facil .facil_info_name .bus {margin-top: 1px;}
}
@media all and (max-width:640px) {
    .toparea .topsearch .facil_cate {flex-wrap:wrap;}
    .toparea .topsearch .facil_cate li {width: 50%;}
    .toparea .topsearch .facil_cate .facil_cate_btn {height: 40px; padding:0 8px; font-size: 16px;}
    .toparea .topsearch .facil_cate .facil_cate_btn::before {width:16px; height:16px; background-size:contain;}
    .btn_place {top: 90px;}
    .facil_search_wrap.mb .facil_search_query {width: calc(100% - 80px);}
    .facil_search_wrap button {width: 70px; height: 30px;}
    .facil .facil_info {top: 80px; left:-270px; width:270px;}
    .facil .facil_info .logo_box {padding: 15px 10px;}
    .facil .facil_info .logo_box h1 a img {width: auto; height: 22px;}
    .facil .facil_info .logo_box button {font-size: 12px;}
    .facil .facil_info_top {height:40px; font-size:14px;}
    .facil_search_wrap {height:30px; margin:10px;}
    .facil_search_wrap .facil_search_query {padding:0 35px 0 10px; font-size:14px;}
    .facil_search_wrap .facil_search_btn {width:30px; height:30px; background-size:16px auto;}
    .facil .facil_info_btn {padding: 10px 10px 20px; gap:10px;}
    .facil .facil_info_name em {width:20px; height:20px; padding-top:1px; font-size:10px;}
    .facil .facil_info_name span {width: calc(100% - 94px); font-size:16px; line-height:normal;}
    .facil .facil_info_addr::before, .facil .facil_info_tel::before {width:12px; height:12px; background-size:10px auto;}
    .facil .facil_info_addr span, .facil .facil_info_tel span {font-size:13px; line-height:normal;}
    .facil .facil_info_tel {padding-right:28px;}
    .facil .facil_info_link {padding: 0; right:15px; bottom:15px; width:24px; height:24px; line-height: 24px; border-radius: 50%; font-size: 0; background-size:auto 11px; background-position: center;}
    .facil .facil_info_pagenation .prev_end, .facil .facil_info_pagenation .prev, .facil .facil_info_pagenation .next, .facil .facil_info_pagenation .next_end {width:24px; height:24px; background-size:auto 10px;}
    .facil .pagenation_list {width:96px; margin:0 5px;}
    .facil .page-btn {width:24px; height:24px; margin:0 4px; font-size:14px;}
    #facil_map .facil_overlay {min-width: 320px; bottom:50px !important; padding:15px 0 45px; border-width:1px; gap:10px;}
    #facil_map .facil_overlay::before {left:calc(50% - 9px); border-width:15px 9px 0 9px;}
    #facil_map .facil_overlay::after {left:calc(50% - 10px); border-width:16px 10px 0 10px;}
    #facil_map .facil_overlay .facil_name {margin:0 50px 0 20px; margin-top:1px; font-size:16px; line-height:normal;}
    #facil_map .facil_overlay .facil_cont {margin:0 15px; gap: 5px;}
    #facil_map .facil_overlay .facil_addr::before, #facil_map .facil_overlay .facil_tel::before {width:14px; height:14px; background-size: contain;}
    #facil_map .facil_overlay .facil_addr span, #facil_map .facil_overlay .facil_tel span {font-size:14px; line-height:normal;}
    #facil_map .facil_overlay .facil_tel {padding-right:28px;}
    #facil_map .facil_overlay .facil_link {right:15px; bottom:15px; padding: 0 20px 0 10px; height: 25px; line-height: 23px; font-size: 13px; border-radius:25px; background:url(/images/hmpg/icon_arr.png) right 8px top 6px / 6px auto no-repeat;}
    #facil_map .facil_overlay .overlay_close {top:16px; right:16px;}
}