@charset "utf-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* 색상값, px값 프로젝트마다 변경해서 쓰기 */

body{font-family: var(--font-sans-serif);}
:root{
    --main_border: 1px solid #ddd;
    --top_border: 2px solid #333;
    --font-sans-serif:  "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
.bdT{border-top: var(--main_border);}
.bdB{border-top: var(--main_border);}
.bdL{border-top: var(--main_border);}
.bdR{border-top: var(--main_border);}
.taC{text-align: center;}
.taL{text-align: left;}
.taR{text-align: right;}
.vaM{vertical-align: middle;}
.mg_auto{margin: 0 auto;}
.flex{display: flex;}
.flex_center{display: flex; align-items: center;}
.flex_ac{display: flex; justify-content: center; align-items: center;}
.flex_column{flex-direction: column;}
.text_overflow{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.absolute_center{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

/* 가로값 */
.w_800{width: 240px;}
.w_500{width: 240px;}
.w_240{width: 240px;}

/* 여백값 */
.pt30{padding-top: 30px;}
.pb30{padding-bottom: 30px;}
.pl30{padding-left: 30px;}
.pr30{padding-right: 30px;}

.mt30{margin-top: 30px;}
.mb30{margin-bottom: 30px;}
.ml30{margin-left: 30px;}
.mr30{margin-right: 30px;}

/* 셀렉트, 인풋 */
select:focus {outline: none;}
input:focus {outline: none;}
textarea {outline: none;}
select { -webkit-appearance: none;  /* 크롬 화살표 없애기 */-moz-appearance: none; /* 파이어폭스 화살표 없애기 */appearance: none;  /* 화살표 없애기 */}

/* 웹 접근성 */
.blind{width: 1px; height: 1px; position: absolute; top: 0; left: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);}




.wrap {width: 100%; overflow: hidden;}
.wrap .inner {width: 100%; max-width: unset; overflow: hidden;}


/* 헤더 */
header {width: 100%; height: 70px; display: flex; align-items: center; background: #fff;}
header .header_inner {width: 100%; box-sizing: border-box; padding: 0 60px; display: flex; align-items: center; justify-content: space-between;}
header .header_inner a {display: block; width: 295px;}
header .header_inner a img {display: block; width: 100%;}

header .header_inner .right_box {display: flex; align-items: center; width: 80%; justify-content: flex-end;}
header .header_inner .right_box .radius_select {width: 100%; max-width: 180px; border-radius: 8px; border: 1px solid #717171; height: 48px; margin-right: 8px; font-size: 16px; color: #1D1D1D; box-sizing: border-box; padding: 0 16px; display: flex; align-items: center; justify-content: space-between;}
header .header_inner .right_box .radius_select h2 {font-size: 16px;}
header .header_inner .right_box .radius_select img {width: 100%; max-width: 16px; transition: all 0.3s;}
header .header_inner .right_box .radius_select.on img {transform: rotate(-180deg); transition: all 0.3s;}

header .header_inner .right_box .search_content {width: 100%; max-width: 360px; position: relative;}
header .header_inner .right_box .m_search_box {width: 100%; border-radius: 8px;  height: 30px; position: relative; display: flex; align-self: center; justify-content: space-between;}
header .header_inner .right_box .m_search_box input {width: 100%; max-width: 130px; border-radius: 6px; border: 1px solid #717171; height: 100%; font-size: 14px; box-sizing: border-box; padding-left: 8px;}
header .header_inner .right_box .m_search_box button {width: 100%; max-width: 69px; border-radius: 6px; height: 100%; background: #0940A1; color: #fff; font-weight: 600;}

header .header_inner .right_box .search_box input {width: 100%; height: 100%; font-size: 16px; border: none; box-sizing: border-box; padding: 0 48px 0 16px; border-radius: 8px;  border: 1px solid #717171; height: 48px; position: relative;}
header .header_inner .right_box .search_box input::placeholder {color: #818181;}
header .header_inner .right_box .search_box .search_btn {width: 100%; max-width: 48px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 100%; background: none;}
header .header_inner .right_box .search_box .search_btn img {display: block; width: 100%; max-width: 21px; margin: 0 auto;}

header .header_inner .right_box .search_content .search_result_box {position: absolute; left: 0; top: 46px; width: 100%; z-index: 999; }
header .header_inner .right_box .search_content .search_result_box #searchResults {background: #fff;  border-radius: 8px; border-right: 1px solid #717171; border-left: 1px solid #717171; display: block;}
header .header_inner .right_box .search_content .search_result_box #searchResults li {font-size: 16px; box-sizing: border-box; padding: 8px 16px;}
header .header_inner .right_box .search_content .search_result_box #searchResults li a {display: block; width: 100%;}
header .header_inner .right_box .search_content .search_result_box #searchResults li:first-child {padding-top: 30px; border-top: 1px solid #717171; border-radius: 8px 8px 0 0 ;}
header .header_inner .right_box .search_content .search_result_box #searchResults li:last-child {padding-bottom: 30px; border-bottom: 1px solid #717171; border-radius: 0 0 8px 8px;}
header .header_inner .right_box .search_content .search_result_box #searchResults.off {display: none;}



/* 그래프 페이지 */
#graphSwitchBtn {display: inline-block; box-sizing: border-box; padding: 6px 10px; border-radius: 12px; background: #58a2c1; color: #fff; position: absolute; right: 0; bottom: -35px; z-index: 99999;}
.graph {width: 100%; height: auto; margin-top: 70px; overflow-y: auto;}
.graph .graph_inner {width: 100%; background: #fff; box-sizing: border-box;}
.graph .graph_inner .top_tab {width: 100%; display: flex; align-items: center; border-bottom: 1px solid #D1D1D1; margin-bottom: 20px;}
.graph .graph_inner .top_tab li {width: 10%;  height: 48px; background: #fff; box-sizing: border-box; padding: 2px;}
.graph .graph_inner .top_tab li a {display: block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #999999; font-weight: 600; text-align: center; word-break: keep-all; line-height: 1.2;}
.graph .graph_inner .top_tab li a img { width: 100%; max-width: 22px; margin-right: 8px;}
.graph .graph_inner .top_tab li.active a img.activeIcon {display: block;}
.graph .graph_inner .top_tab li a img.activeIcon {display: none;}
.graph .graph_inner .top_tab li.active a img.normalIcon {display: none;}

.graph .graph_inner .top_tab li.active {border-bottom: 2px solid #3C9BC4;}
.graph .graph_inner .top_tab li.active a {color: #3C9BC4; font-weight: 600;}
.graph .graph_inner .map_content {width: 100%; display: flex; align-items: flex-start; box-sizing: border-box; padding: 0 30px 30px; justify-content: center; overflow-x: auto;}
.graph .graph_inner .map_content .left_tab {width: 244px; max-width: 244px; margin-right: 29px; box-sizing: border-box; padding: 17px; background: #F4F9FB;}
.graph .graph_inner .map_content .left_tab .left_menu {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 10px;}
.graph .graph_inner .map_content .left_tab .left_menu li {width: 100%; height: 34px; background: #fff; border: 1px solid #D7E0E9;}


.graph .graph_inner .map_content .left_tab .left_menu li a {display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 18px; color: #555555; font-weight: 600; white-space: nowrap;}
.graph .graph_inner .map_content .left_tab .left_menu li.active {background: #0940A1;}
.graph .graph_inner .map_content .left_tab .left_menu li.active a {background: #2A8EB9; color: #fff;}

.graph .graph_inner .center_map {width: 740px; max-width: 740px; margin-right: 42px; height: 720px; background: #E7F8FF;}
.graph .graph_inner .center_map #container {height: auto;}
.graph .graph_inner .center_map .select_wrap {display: none;}
.graph .graph_inner .center_map #container .group .left #main canvas {height: 574px !important; width: 100% !important; max-width: 738px; left: 0 !important;}

.graph .graph_inner .right_graph {width: 753px; max-width: 753px;}
.graph .graph_inner .right_graph .top_graph { border: 1px solid #DDDDDD;  height: 350px; margin-bottom: 20px; width: 100%;}
.graph .graph_inner .right_graph .top_graph .grapg_title {font-size: 18px; margin: 0 0 20px; width: 100%; text-align: center; text-align: left; box-sizing: border-box; padding: 14px 24px; background: #2A8EB9; color: #fff; position: relative; border: 1px solid #2A8EB9;}
.graph .graph_inner .right_graph .bottom_graph {width: calc(100% - 2px); display: flex; align-items: center; justify-content: space-between;}
.graph .graph_inner .right_graph .bottom_graph .graph_list {width: 100%; border: 1px solid #DDDDDD; height: 350px; text-align: right;}
.graph .graph_inner .right_graph .bottom_graph .graph_list .grapg_title {font-size: 18px; margin: 0 0 20px; width: 100%; text-align: center;  text-align: left; box-sizing: border-box; padding: 14px 24px; background: #2A8EB9; color: #fff; position: relative; border: 1px solid #2A8EB9;}

.grapg_title .title_icon {position: absolute; right: 24px; top: 50%; transform: translateY(-50%);}

.graph .graph_inner .center_map .map_top_title {width: 100%; text-align: center; line-height: 1.3; font-size: 18px; display: flex; align-items: center; box-sizing: border-box; padding: 14px 24px; background: #2A8EB9; color: #fff; position: relative;}
.graph .graph_inner .center_map .map_top_title .title_icon {position: absolute; right: 24px; top: 50%; transform: translateY(-50% );}
.graph .graph_inner .center_map .map_top_title h2 { font-weight: 600;}
.graph .graph_inner .center_map .map_top_title span {display: inline-block; margin-left: 4px; font-weight: 600;}
.graph .graph_inner .center_map .details_list {display: flex; align-items: center; justify-content: center; margin-bottom: 10px; width: 100%;}
.graph .graph_inner .center_map .details_list li {width: 100%;  height: 48px; background: #fff; overflow: hidden; display: flex; align-items: center; text-align: center; justify-content: center; border-right: 1px solid #D8D8D8; color: #8D919F;}
.graph .graph_inner .center_map .details_list li:last-child {margin-right: 0;}
.graph .graph_inner .center_map .details_list li a {display: inline-block; font-size: 14px; display: flex; align-items: center; justify-content: center;} 
.graph .graph_inner .center_map .details_list li a span {display: block;}
.graph .graph_inner .center_map .details_list li.on { border-bottom: 2px solid #2A8EB9; color: #2A8EB9; font-weight: 600;}
.graph .graph_inner .center_map .map_top_title .sub_box {display: inline-block; position: relative;}
.graph .graph_inner .center_map .map_top_title .sub_box .notice_box {display: inline-block; position: absolute; right: -50px; top: 50%; transform: translateY(-50%);}
.graph .graph_inner .center_map .map_top_title .sub_box .notice_box .notice_inner {position: relative;}
.graph .graph_inner .center_map .map_top_title .sub_box .notice_box .notice_inner .notice_text {visibility: hidden;display: none; transition: all 0.3s; width: 340px; box-sizing: border-box; padding: 16px 14px; border: 1px solid #D9D9D9; border-radius: 5px; position: absolute; right: -340px; top: 0; background: #F8F8F8;}
.graph .graph_inner .center_map .map_top_title .sub_box .notice_box .notice_inner .notice_text .top_box {display: flex; align-items: center; width: 100%; box-sizing: border-box; padding-bottom: 4px; border-bottom: 1px solid #D9D9D9;}
.graph .graph_inner .center_map .map_top_title .sub_box .notice_box .notice_inner .notice_text .top_box img {display: block; width: 100%; max-width: 24px;}
.graph .graph_inner .center_map .map_top_title .sub_box .notice_box .notice_inner .notice_text .top_box h2 {font-size: 16px; font-weight: 800; margin-left: 8px; word-break: keep-all;}
.graph .graph_inner .center_map .map_top_title .sub_box .notice_box .notice_inner .notice_text .bottom_box {box-sizing: border-box; padding-top: 4px; font-size: 16px; word-break: keep-all; text-align: left;}
.graph .graph_inner .center_map .map_top_title .sub_box .notice_box .notice_inner .notice_text.on{visibility: visible; display: block; transition: all 0.3s;}


.map_style .layerSelector {width: 100%; max-width: 140px;}
.map_style .layerSelector li { border-radius: 30px; border: 1px solid #606060; background: #fff;  width: 100%; margin-top: 10px;}
.map_style .layerSelector li a {display: flex; align-items: center; justify-content: center; width: 100%; font-size: 20px; color: #1D1D1D; font-weight: 600; height: 36px; }
.map_style .layerSelector li.on {background: #E7ECF6; color: #0940A1;}


/* 지도 페이지 */
.map {width: 100%; height: calc(100vh - 92px); overflow: hidden;margin-top: 0 !important;}
.map .map_inner {width: 100%; height: 100%; position: relative;}
.map .map_inner .category {display: flex; align-items: center; position: absolute; top: 40px; left: 56px;}
.map .map_inner .category li {display: inline-block; box-sizing: border-box; padding: 12px 18px; border-radius: 30px; background-color: #fff; margin-right: 8px;}
.map .map_inner .category li:last-child {margin-right: 0;}
.map .map_inner .category li a {font-size: 18px; font-weight: 800; color: #1D1D1D; display: flex; align-items: center;}
.map .map_inner .category li a img {display: inline-block; margin-right: 8px;}
.map .map_inner .category li.active {background: #E7ECF6;}
.map .map_inner .category li.active a {color: #0940A1;}



.popup{display: none; position: absolute;}
.popup.show{display: block;}

.popup.left{width: 100%; max-width: 380px; top: 220px; left: 56px; background: #fff; border-radius: 16px; overflow: hidden; display: none;}
.popup.left.on {display: block;}
.popup.left .pop_head{padding: 16px 21px;  border-bottom: 1px solid #555555;}
.popup.left .pop_head .pop_head_left {display: flex; align-items: center;}
.popup.left .pop_head strong{font-size: 18px; color: #2E3033; font-weight: 800;}
.popup.left .pop_head .result_num {font-size: 18px; font-weight: 800;}
.popup.left .pop_head .result_num span {display: inline-block; color: #0940A1; margin-left: 4px;}
.popup.left .pop_head .download_btn {display: inline-block; box-sizing: border-box; padding: 7px 8px; border: 1px solid #0940A1; border-radius: 5px; font-size: 13px; color: #1D1D1D; display: flex; align-items: center; transition: all 0.2s;}
.popup.left .pop_head .download_btn:hover {background: #0940A1; color: #fff; transition: all 0.2s;}
.popup.left .pop_head .download_btn img {display: block; width: 100%; max-width: 14px; margin-left: 6px;}
.popup.left .pop_head .download_btn:hover img {filter: invert(100%);}
#search_address, #bookmark_pop{height: 72vh; overflow: hidden;}
#bookmark_pop .pop_body,
#search_address .pop_body{background: #F7F7F9;}
.popup.left .pop_head{display: flex; align-items: center; justify-content: space-between;}
.popup.left .pop_body{height: calc(100% - 52px); background: #fff; overflow-y: auto; }
.popup.left .pop_body.off {display: none;}
.popup.left .pop_head .pop_close_btn{width: 20px; height: 20px; background: url(/gged/assets/images/map/ico_pop_close.png)no-repeat center;}
.popup.left .pop_body .pop_list{width: 100%; background: #fff; height: 534px; overflow-y: scroll;}
.popup.left .pop_body .pop_list li {width: 100%; display: block; border-bottom: 1px solid #C6C6C6;}
.popup.left .pop_body .pop_list li.active {background: #F2F5FA;}
.popup.left .pop_body .pop_list li:hover {background: #F2F5FA; }
.popup.left .pop_body .pop_list li a {display: block; width: 100%; box-sizing: border-box; padding:  10px 16px;}
.popup.left .pop_body .pop_list li a .result_list_top {width: 100%; display: flex; align-items: center; margin-bottom: 14px;}
.popup.left .pop_body .pop_list li a .result_list_top .title {font-size: 16px; color: #1D1D1D; font-weight: 600; margin-right: 8px;}
.popup.left .pop_body .pop_list li a .result_list_top span {display: inline-block; box-sizing: border-box; padding: 8px; border: 1px solid #C6C6C6; background: #F8F8F8; border-radius: 20px;}
.popup.left .pop_body .pop_list li a .result_list_bottom {width: 100%; display: flex; align-items: center;}
.popup.left .pop_body .pop_list li a .result_list_bottom img {display: block; width: 100%; max-width: 16px; margin-right: 8px;}

.no_result {display: none; width: 100%; text-align: center; box-sizing: border-box; padding: 12px 0;}
.no_result.on {display: block;}
.no_result h2 {display: inline-block; font-size: 20px; color: #000;}


/* 페이징 */
.paging_box {width: 100%; box-sizing: border-box; padding: 0 16px; height: calc(100% - 546px); display: flex; align-items: center;}
.paging_box .paging {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.paging_box .paging li.arrow {width: 100%; max-width: 20px; box-sizing: border-box; padding: 0 4px;}
.paging_box .paging li {width: 100%; max-width: 40px; height: 40px; border-radius: 6px; margin-right: 6px;}
.paging_box .paging li.active {background: #0940A1;}
.paging_box .paging li.active a {font-weight: 800; color: #fff;}
.paging_box .paging li:last-child {margin-right: 0;}
.paging_box .paging li a {display: block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #555555;}
.paging_box .paging li a img {display: block;}


.setting_pop_box {display: none; width: 100%; max-width: 240px; background: #fff; box-sizing: border-box;padding: 16px; position: absolute; right: 375px; top: 108px; z-index: 99999;}
.setting_pop_box.show {display: block;}
.setting_pop_box .pop_header {width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;}
.setting_pop_box .pop_header .title {font-size: 16px; color: #1D1D1D; font-weight: 800;}
.setting_pop_box .pop_header a {width: 100%; max-width: 14px;}
.setting_pop_box .pop_header a img {display: block; width: 100%;}
.setting_pop_box .distance {display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid #C6C6C6; border-top: 1px solid #C6C6C6; margin-bottom: 10px;}
.setting_pop_box .distance li { border-right: 1px solid #C6C6C6; border-bottom: 1px solid #C6C6C6;background: #fff;}
.setting_pop_box .distance li a {display: block; box-sizing: border-box;  font-size: 14px; color: #1D1D1D; height: 30px; display: flex; align-items: center; justify-content: center; width: 100%;}
.setting_pop_box .distance li.active {background: #0940A1;}
.setting_pop_box .distance li.active a {color: #fff;}
.setting_pop_box .search_box {width: 100%;}
.setting_pop_box .search_box {display: block; width: 100%; display: flex; align-items: center; justify-content: space-between;}
.setting_pop_box .search_box input {width: 100%; border-radius: 6px; overflow: hidden; border: 1px solid #717171; font-size: 14px; box-sizing: border-box; padding: 0 16px; height: 30px; margin-right: 8px;}
.setting_pop_box .search_box button {width: 100%; max-width: 69px; height: 30px; border-radius: 6px; background: #0940A1; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #FFFFFF; border: none; padding: 0;}

.map_style {display: inline-block; position: absolute; right: 30px; top: 40px;}
.map_style .list {display: flex; align-items: center;}
.map_style .list li {width: 100%; max-width: 66px; height: 58px; border-radius: 5px; border: 1px solid #C6C6C6; background: #fff;}
.map_style .list li.active {border: 1px solid #0940A1;}
.map_style .list li.active .bottom p {color: #0940A1; transition: all 0.2s;}
.map_style .list li:first-child {margin-right: 8px;}
.map_style .list li .top {width: 100%; height: 36px; overflow: hidden; border-radius: 5px 5px 0 0;}
.map_style .list li .top img {width: 100%; display: block;}
.map_style .list li .bottom {width: 100%; height: 20px;}
.map_style .list li .bottom p {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #232021;}
.map_style .list li:hover .bottom p  {color: #0940A1; transition: all 0.2s;}
.right_btn_wrap {display: inline-block; position: absolute; top: 26%; right: 30px; width: 100%; max-width: 51px;}
.right_btn_wrap .right_menu_list {width: 100%; max-width: 100%; background: #fff; border: 1px solid #606060; border-radius: 5px; overflow: hidden;}
.right_btn_wrap .right_menu_list li {width: 100%; height: 49px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #606060;}
.right_btn_wrap .right_menu_list li:last-child {border-bottom: none;}
.right_btn_wrap .right_menu_list li.active {background: #0940A1;}
.right_btn_wrap .right_menu_list li a {display: block; text-align: center;}
.right_btn_wrap .right_menu_list li a img {display: inline-block;}
.right_btn_wrap .right_menu_list li.active a img.white {display: inline-block;}
.right_btn_wrap .right_menu_list li.active a img.gray {display: none;}
.right_btn_wrap .right_menu_list li a img.white {display: none;}
.right_btn_wrap .right_menu_list li a img.gray {display: inline-block;}
.right_btn_wrap .right_menu_list li a .text {font-size: 10px; color: #232021;margin-top: 3px;}
.right_btn_wrap .right_menu_list li.active a .text {color: #fff;}

.location_icon {display: none; width: 100%; max-width: 28px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.location_icon.on {display: block;}
.location_icon img {display: block; width: 100%;}

.result_num_pop { display: none; width: 100%; max-width: 320px; height: 48px; border-radius: 10px;  align-items: center; justify-content: center; position: absolute; left: 50%; bottom: 92px; background: #fff; transform: translateX(-50%);}
.result_num_pop h2 {text-align: center; width: 100%; font-size: 20px;}
.result_num_pop.on {display: flex;}


/* 지도 반경 드래그 했을때 팝업 커스텀 */
#map .radius_box { border-radius: 10px; background: #fff; border: 1px solid #0940A1; box-sizing: border-box; padding: 12px 18px; font-size: 14px; font-weight: normal; position: relative; display: flex; align-items: center; white-space: nowrap;}
#map .radius_box .radius {color: #0940A1; font-weight: 800; }
#map .radius_box .btn_remove_overlay {width: 22px; height: 22px; border-radius: 50%; border: 1px solid #000; position: relative;  background: #fff; transition: all 0.3s; margin-right: 10px;}
#map .radius_box .btn_remove_overlay:hover {background: #0940A1; transition: all 0.3s; border: 1px solid #0940A1;}
#map .radius_box .btn_remove_overlay::after {content: ''; width: 100%; max-width: 14px; height: 2px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #000; transition: all 0.3s;}
#map .radius_box .btn_remove_overlay:hover:after {background: #fff; transition: all 0.3s;}