@charset "utf-8";
/*-------------------------------------------------
Title       : layout
Name        : wiseplus kkh
Create date : 2025-11
-------------------------------------------------*/
html, body, #wrap {height: 100%;}
#wrap {position: relative; margin: 0; padding: 0; font-size: 1rem;}
/* 본문바로가기 */
#skip-link {position:relative;z-index:9999;}
#skip-link a {position: absolute; top: -200px; left:0; 	width: 100%; line-height: 30px; background-color: #333; color: #ffff; text-align: center;}
#skip-link a:focus, #skip-link a:active {top:0;}

/*---------- head ----------*/
header {z-index: 3; position: relative; display: flex; align-items: center; width: 100%; background-color: var(--white); border-bottom: 1px solid #cdd1d5; min-width: 1280px; height: 85px; box-sizing: border-box;}
header .inner {display: flex; align-items: center; justify-content: flex-start; flex-direction: row; width: 1280px; margin: 0 auto; }
header .inner .logo {color: var(--black); font-size: var(--text-hdline-md); transition: var(--transition-3); display: inline-flex;}
header .inner .logo a {display: flex; align-items: center; justify-content: flex-start; flex-direction: row; color: var(--black); font-weight: 600;}
header .inner .logo a::before {content: ""; width: 73px; height: 54px; margin-right: 1rem; background: url(../img/head_logo.svg) no-repeat center; background-size: contain;}
header .inner .gnb { margin-left: auto; display: inline-flex;}
header .inner .gnb > ul {display: flex; padding: 0; gap: 1rem;}
header .inner .gnb > ul > li {display: flex; align-items: center; position: relative; }
header .inner .gnb > ul > li > a, .gnb-main-trigger {position: relative; font-weight: 600; line-height: 1; border-radius: .4rem; color: var(--black); background-color: var(--white); font-size: var(--text-content-4); transition: var(--transition-3); padding: 16px;}
header .inner .gnb > ul > li > a:hover, .gnb-main-trigger:hover, header .inner .gnb > ul > li a:focus, .gnb-main-trigger:focus { background-color: #EEF2F7;}
header .inner .gnb > ul > li::after {position: absolute; bottom: -18px; left: 50%; content: ""; transition: var(--transition-3); width: 0; height: 4px; background-color: #063a74;}
header .inner .gnb > ul > li.on::after {left:0; width: 100%;}

/*일반 화면 상단에만 세팅, 지도화면X*/
.header-sticky {position: sticky;  left: 0; transition: all .5s ease-in-out;}
.header-sticky.active {top: var(--_top) !important;}
.header-sticky.clr {box-shadow : 0 5px 5px rgba(0,0,0, .01);}
.gnb > ul > li > ul {height: 0; line-height: 2.2em; display: none; position: absolute; left: 0; top:0; white-space: nowrap; z-index: 2; transition: var(--transition-3); background:var(--white); width: 100%; overflow: hidden; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;  padding: .5em 0;}
.gnb > ul > li > ul > li > a {line-height: 2em; display: block;  height: 100%; padding: 0 1em; font-size: .9375em; font-weight: 500; white-space: nowrap;  color: var(--darkgray);}
.gnb > ul > li > ul > li > a:hover, .gnb > ul > li > ul > li > a.show {background: var(--white); color: var(--blue);}
.gnb > ul > li:hover > ul, .gnb > ul > li > ul.show { margin-top: -1em; border: 1px solid var(--black); border-top: 5px solid var(--blue);}
.gnb > ul > li > a.active {font-weight: 600; color: var(--blue);}
.gnb > ul > li > ul > li > a.active {color: var(--blue); font-weight: 600;}
.gnb > ul > li:hover > ul, .gnb > ul > li > ul.show {height: auto !important; max-height: 300px !important; z-index: 10; display: block; top: calc(6em - 9px);}
.gnb > ul > li > ul > li.on > a {color: var(--blue);font-weight: 700;}

.gnb-dropdown {position: relative;}
.gnb-main-trigger { padding-right: 32px; border: 0;}
.gnb-main-trigger::after {width: 16px; height: 16px; position: absolute; right: 8px; top: calc(50% - 8px); background: url(../img/img_arrow_md_bk.png) 50% 50% no-repeat; content: ''; transition: var(--transition-3);}
.gnb-main-trigger.active::after {transform: rotate(-180deg);}
.gnb-toggle-wrap {position: absolute; /* top: 75px; */ top: 66px;  display: none; width: 100%; border: 1px solid #CDD1D5; background-color: var(--white); border-radius: 4px; padding: 8px; font-size: 1em;}
.gnb-toggle-wrap.is-open {left: 50%; transform: translateX(-50%); display: block;}
.gnb-toggle-wrap > ul {display: flex; flex-flow: row wrap;}
.gnb-toggle-wrap > ul li {flex: 1;}
.gnb-toggle-wrap > ul li a {font-weight: 400; line-height: 1.4; font-size: .95em; transition: var(--transition-3); color: var(--black); display: block; padding: 8px; border-radius: 4px;}
.gnb-toggle-wrap > ul li a:hover {background-color: #EEF2F7; color: var(--blue);font-weight: 700;}
.gnb-toggle-wrap > ul li.on a {color: var(--blue);font-weight: 700;}

/*---------- footer ----------*/
footer {background-color: #F0F0F0; min-width: 1280px;}
.foot-quick {background-color: var(--white); border-top: 1px solid #D8D8D8; border-bottom: 1px solid #D8D8D8;}
.foot-quick .inner {max-width: 1280px; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: flex-end;}
.foot-quick .inner .quick-item {width: 300px; border-left: 1px solid #D8D8D8; position: relative;}
.foot-quick .inner .quick-item:last-child {border-right: 1px solid #d8d8d8;}
.foot-quick .accordion {display:flex; flex-flow: row wrap; justify-content: flex-end; gap: 0; margin:0; z-index: 1;}
.foot-quick .accordion .accordion-item {position: relative; width: 320px; position: relative; border-left: 1px solid #D8D8D8;}
.foot-quick .accordion .link a {position: relative; display: block; padding: 15px 20px; font-size: var(--text-content-4); font-weight: 400; text-decoration: none; font-size: 1em; }
.foot-quick .accordion .link a::before {width: 11px; height: 11px; background: url(../img/ico_plus.png) 0 0 no-repeat; background-size: cover; content:''; right: 16px; top: calc(50% - 5px); position: absolute;}
.foot-quick .accordion .active .link > a {background: var(--white);}
.foot-quick .accordion .active .link > a::before {background: url(../img/ico_minus.png) 0 0 no-repeat;}
.foot-quick .accordion > li:last-child {border-right: 1px solid #D8D8D8;}
.foot-quick .accordion .link > a {background: var(--white); color: var(--black);}
.foot-quick .accordion .link > a:hover {background: var(--white);}
.foot-quick .submenu {display: none; background: var(--white); position: absolute; left: 0; bottom: 60px; width: 100%; max-height: 150px; overflow-y: auto; padding: 1em; box-sizing: border-box; border: 1px solid #ccc;}
.foot-quick h4 {font-size: 1em; font-weight: 500; color: #444; display: block; margin: 8px 0; position: relative; padding-left: 5px;}
.foot-quick h4::before {width: 5px; height: 5px; border-radius: 50%; background-color: #999; left: -4px; top: 3px; position: absolute; content:'';    background-image: none;}
.foot-quick hr {border-top: 1px dashed #ddd; margin: 12px 0; border-bottom: 0;}
.quick-item-cnt li {display: block; line-height: 1.4; font-size: .92em; color: #666; font-weight: 300; word-break: keep-all; position: relative;}
.quick-item-cnt li:last-child {margin-bottom: 0;}
.quick-item-cnt li span {display: inline-block;}
.quick-item-cnt.link li { display: block; word-break: keep-all; cursor: pointer;}
.quick-item-cnt.link li button {display: block; width: 100%; text-align: left;color: #666; font-weight: 300; line-height: 2; font-size: 1em; transition: var(--transition-1); background-color: var(--white); border: 0; padding: 0 12px; border-radius: 0;}
.quick-item-cnt.link li:hover button, .quick-item-cnt.link li button:focus {color: #333; font-weight:500; background-color: #f4f7ff;}
.quick-item-cnt.list li {margin-bottom: 6px; color: #666; font-weight: 300; padding-left: 16px;}
.quick-item-cnt.list li::before {width: 5px; height: 5px; color: #666; left: 6px; top: 0; position: absolute; content:'-';}
.go-top {z-index:1; position: fixed; bottom: 3.5rem; right: 16px; width: 50px; height: 50px; background-color: var(--white); border: 1px solid #ddd; color: var(--gray); border-radius: 4px;}
.go-top::before {display: block; width: 8px; height: 5px; text-align: center; background: url(../img/img_arrow_sm_gray.png) 0 0 no-repeat; background-size: 100% auto; content:''; transform: rotate(180deg); margin: 0 auto 6px;}
.go-top:hover {border-color: var(--blue);}
#footer .inner{display: flex; flex-flow: row wrap; justify-content: space-between; width: 1280px; margin: 0 auto;}
#footer .inner .f-inner-left {flex: 1; padding:2.5rem 0; display: flex; flex-flow:column wrap; gap: 2.5rem;}
#footer .inner .f-inner-right {width: 160px; padding: 2.5rem 0;}
#footer .f-logo {height: 4.8rem; display: flex;align-items: center;}
#footer .f-logo img {height: 100%; display: inline-flex;}
#footer .f-logo p {font-size: 1.5rem; display: inline-flex; font-weight: 600; color: var(--black); margin-left: 1rem;}
#footer .f-info {display: flex; align-items: normal; justify-content: flex-start;flex-direction: column; gap: 1.6rem;}
#footer .f-cnt { display: flex; gap: 10px; flex-direction: column;}
#footer .f-cnt .info-addr {font-size: 1.0625rem; line-height: 1.4; font-weight: 400;}
#footer .f-cnt .info-cs {font-size: 1.0625rem; line-height: 1.4; font-weight: 400;}
#footer .f-cnt .info-cs strong {font-weight: 700; min-width: 192px;}
#footer .f-cnt .info-cs li {display: flex; flex-flow: row wrap; gap: 16px;}
#footer .f-cnt .info-cs span {font-size: 1.0625rem; line-height: 1.4; font-weight: 400; color: var(--black);}
#footer .f-btm {display: flex; flex-direction: column; gap: 2.4rem; padding-top: .8rem; border-top: 0.1rem solid #d8d8d8; width: 100%; margin-bottom: 12px;}
#footer .f-btm .f-btm-text {display: flex; justify-content: space-between; align-items: center; gap: 1.6rem;}
#footer .f-btm .f-btm-text .f-menu {display: inline-flex; flex-wrap: wrap;}
#footer .f-btm .f-btm-text .f-menu a {display: inline-flex; align-items: center; height: 4rem; font-size: .9375em; font-weight: 300s; color: var(--black); padding: 0 1rem;}
#footer .f-btm .f-btm-text .f-menu a.point {font-weight: 700;}
#footer .f-btm .f-btm-text .f-menu a:first-child {padding-left: 0;}
#footer .f-btm .f-btm-text .f-copy {font-size: 1rem; color: var(--flood-gray-70);}
#footer .f-link ul {display: flex; flex-direction: column; align-items: flex-start; gap: 10px;}
#footer .f-link ul li {width: 100%;}
#footer .f-link ul li a {display: block; width: 100%; font-size: 1.0625rem; line-height: 1.4; font-weight: 400; color: var(--black); padding-right: 45px; position: relative;}
#footer .f-link ul li a::after {width: 24px; height: 24px; position: absolute; right: 0; top: 0; background: url(../img/img_arrow_md_gray.png) 50% 50% no-repeat; content:''; transform: rotate(-90deg);}

/*---------- table ----------*/
.tbl-wrap {margin-top: 2em;}
.b-right {border-right: 1px solid #EBEEF6; }
.b-left {border-left: 1px solid #EBEEF6; }
.b-bottom {border-bottom: 1px solid #EBEEF6; }
.b-top {border-top: 1px solid #EBEEF6; }
.tbl-basic {table-layout: fixed; max-width: none; width: auto; min-width: 100%; border-collapse: collapse; font-size: var(--text-content-4); border-top: 2px solid #6d7b95;}
.tbl-basic thead th {padding: 1rem 1.6rem; background-color: #EDF1F5; color: var(--black); font-weight: 500;}
.tbl-basic tbody th {color: var(--black); font-weight: 500; line-height: 1.4; text-align: left; border-bottom: 1px solid #EBEEF6; padding: .8rem 1.6rem; background-color: #F8F9FC; vertical-align: middle;}
.tbl-basic tbody td {color: var(--gray); font-weight: 300; line-height: 1.4; text-align: left; border-bottom: 1px solid #EBEEF6; padding: .8rem 1.6rem; background-color: var(--white); transition: var(--transition-3); font-size: .9em; vertical-align: middle;}
.tbl-basic tbody td a {text-align: left; color: var(--black); font-weight: 300; display: flex; flex-flow: row wrap; gap: 6px; align-items: center; transition: var(--transition-3);}
.tbl-basic tbody td a:hover, .tbl-basic tbody td a:focus {color: var(--blue); text-decoration: underline;}
.tbl-basic tbody td em {font-weight: 600; display: inline-block; font-size: .9em;}
.tbl-basic tbody td i {display: inline-flex;}
.tbl-basic caption {display: table-caption; text-align: -webkit-center; unicode-bidi: isolate; position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;}
.tbl-basic .tbl-list-typeA li {display: inline-block; padding-right: 20px; position: relative;}
.tbl-basic .tbl-list-typeA li::before {position: absolute; right: 2px; top: calc(50% - 6px); width: 10px; height: 12px; background: url(../img/img_linemap.png) 0 0 no-repeat; background-size: cover; content:'';}
.tbl-basic .tbl-list-typeA li:last-child {padding-right: 0;}
.tbl-basic .tbl-list-typeA li:last-child::before {display: none;}
.tbl-basic .tbl-list-typeB li {display: block; margin-bottom: 4px; padding-left: 16px; position: relative;}
.tbl-basic .tbl-list-typeB li::before {width: 5px; height: 5px; color: #666; left: 0; top: 0; position: absolute; content:'-';}
.tbl-basic .tbl-list-typeB li:last-child {margin-bottom: 0;}
.tbl-basic.hover tr:hover td {background-color: #f9f9f9;}
.tbl-basic .tbl-list-typeC > li {display: block; margin-bottom: 4px; padding-left: 12px; position: relative; color: #333}
.tbl-basic .tbl-list-typeC > li::before {width: 4px; height: 4px; background: #666; border-radius: 50%; font-weight: 500; left: 0; top: 8px; position: absolute; content:''; }
.tbl-basic .tbl-list-typeC > li:last-child {margin-bottom: 0;}
.tbl-basic .tbl-list-typeC > li ul {font-size: .9em; margin-top: 6px; color: #888}
.tbl-map-selector {border-collapse: collapse; border-top: 1px solid #EBEEF6; width: 100%; font-size: var(--text-content-5);}
.tbl-map-selector caption {display: table-caption; text-align: -webkit-center; unicode-bidi: isolate; position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;}
.tbl-map-selector thead th {background-color: #ECECEC; text-align: center; color: var(--black); font-weight: 600;padding: 8px 6px; position: sticky; top: -1px;}
.tbl-map-selector tbody td {background-color: var(--white); text-align: center; font-weight: 400; padding: 3px 6px; cursor: default;  line-height:1.2; vertical-align: middle; font-size: .865rem;color: var(--black); letter-spacing: -1px;}
.tbl-map-selector tbody tr:hover td, .tbl-map-selector tbody tr.active td {background-color: #fff7d1; color: var(—black); cursor: default;}
.tbl-map-selector tbody tr.on td {background-color: #FFE566; color: var(--black); font-weight: 600;}
.tbl-map-selector.show {display: table !important;}
.tbl-map-selector tbody td button {padding:0; margin: 0 auto; background-color: transparent; border: 0; height: 18px;}
.tbl-map-selector tbody td button:focus {box-shadow: inset 1px var(--black);}
.tbl-tt {font-weight: 600; font-size: 1.1em;}
.tbl-pop {border-collapse: collapse; border: 1px solid #EBEEF6; width: 100%; font-size: var(--text-content-5);}
.tbl-pop caption {display: table-caption; text-align: -webkit-center; unicode-bidi: isolate; position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;}
.tbl-pop thead th {padding: .4rem 1rem; background-color: #EDF1F5; color: var(--black); font-weight: 500;}
.tbl-pop tbody th {color: var(--black); font-weight: 500; line-height: 1.4; text-align: left; border-bottom: 1px solid #EBEEF6; padding: .2rem .8rem; background-color: #F8F9FC; vertical-align: middle;}
.tbl-pop tbody td {color: var(--gray); font-weight: 400; line-height: 1.4; text-align: left; border-bottom: 1px solid #EBEEF6; padding: .2rem .8rem; background-color: var(--white); transition: var(--transition-3);}

/*---------- pagination ----------*/
.pagination {display: flex; align-items: center; justify-content: center; flex-direction: row; gap: 8px; margin: 2rem 0;}
.pagination .page-link {background-color: var(--white); color: var(--darkgray); font-weight: 500; border-radius: 6px; height: 40px; width: 40px; line-height: 40px; text-align: center; transition: var(--transition-2);}
.pagination .page-link:hover {background-color: #EDF1F5;}
.pagination .page-link.active {background-color: #003675; color: var(--white);}
.pagination .page-navi {display: inline-flex; align-items: center; justify-content: center; flex-direction: row; position: relative; font-size: 0; color: var(--darkgray); line-height: 40px;}
.pagination .page-navi.first::before {content:'';width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin: -2px 0 0 0; background: url(../img/img_arrow_md_gray2.png) 50% 50% no-repeat; transform: rotate(90deg);}
.pagination .page-navi.prev::before {content:'';width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin: -2px 0 0 0; background: url(../img/img_arrow_md_gray.png) 50% 50% no-repeat; transform: rotate(90deg);}
.pagination .page-navi.next::after {content:'';width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin: -2px 0 0 0; background: url(../img/img_arrow_md_gray.png) 50% 50% no-repeat; transform: rotate(-90deg);}
.pagination .page-navi.last::after {content:'';width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin: -2px 0 0 0; background: url(../img/img_arrow_md_gray2.png) 50% 50% no-repeat; transform: rotate(-90deg);}

/*---------- tab ----------*/
.tabs{margin: 0; padding: 0; list-style: none; display: flex; flex-flow: row wrap; border: 1px solid #b1b8be; border-radius: 4px; overflow: hidden;}
.tabs li {flex: 1; background: none;cursor: pointer; border-right: 1px solid #b1b8be;}
.tabs li button {display: block; color: var(--gray);  text-align: center; font-size: var(--text-content-3); transition: var(--transition-3); padding: .86em 0; width: 100%; text-align: center; border: 0; background-color: var(--white);}
.tabs li:last-child {border-right: 0;}
.tabs li:hover button {background: #EEF2F7; color: var(--black);}
.tabs li.current button{background: var(--indigo); color: var(--white) !important;}
.tab-content{display: none; padding: 0; margin: 0;}
.tab-content.current{display: inherit;}
.tabs.cache {margin: 1em 0 0; border: 0; border-radius: 0; border: 1px solid var(--indigo);}
.tabs.cache li {font-size: var(--text-content-5);border-radius:0;}
.tabs.cache li button {padding: .4em 0; font-size: var(--text-content-5); color: var(--indigo);}
.cache-content { display: none; background-color: #F5FAFF; padding: 16px; border: 1px solid #BDCFF4; border-top: 0; height: 420px; overflow-y: auto;}
.cache-content.current {display: inherit;}
.cache_pop_text1 {font-size: .9em; color: #00488C; word-break: keep-all; padding-left: 12px; position: relative; margin-bottom: 16px;}
.cache_pop_text1 span {color: #017EFF; text-decoration: underline; cursor: pointer;}
.cache_pop_text1::before {content: ''; width: 6px; height: 1px; background-color: #00488C; position: absolute; left: 0; top: 10px; text-align: left;}    
    
/*---------- con-container ----------*/
#con-container {width: 1280px; margin: 40px auto 100px; position: relative; transition: var(--transition-3);}
.sub-content {min-height: 450px;}
.linemap {position: absolute; right: 0; top: 14px; display: flex; flex-flow: row wrap; gap: 16px; transition: var(--transition-3);}
.linemap li {position: relative; padding: 0 12px;}
.linemap li::before {position: absolute; right: -10px; top: calc(50% - 8px); width: 10px; height: 12px; background: url(../img/img_linemap.png) 0 0 no-repeat; background-size: cover; content:'';}
.linemap li:last-child {padding-right: 0;}
.linemap li:last-child::before {display: none;}
.linemap li a {color: #666666;}
.linemap li a img {display: inline-block; margin-right: 6px;}
.img_outline {width: 100%; margin: 1em 0; max-width: 1180px;}
.cnt-area {display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 2.4em; font-size: var(--text-content-4);}
.cnt-list {padding-left: 30px;}
.cnt-list > li {position: relative; margin-top: 1.1em; padding-left: 1.2em; line-height: 1.4; color: var(--darkgray); font-size: var(--text-content-3);}
.cnt-list > li strong {}
.cnt-list > li::before {position:absolute; top: 0; left: 0;}
.cnt-list > li > ul {font-size: .9em; padding-left: 0;}
.cnt-list.decimal > li::before {content: ''; width: 11px; height: 11px; border: 3px solid #284185; border-radius: 50%; box-sizing: border-box; top: 6px;}
.cnt-list.dash > li::before {content:'-';}
.search-group {background-color: #EAEFF3; padding: 2rem 4rem; box-sizing: border-box; border-radius: 16px; display: flex; gap: 24px;}
.search-group .item {display: flex; flex-flow: row wrap; align-items: center; gap: 14px; flex: 0 220px;}
.search-group .item .item-tt {display: inline-block; font-weight: 600;}
.search-group .item .item-cnt {flex: 1;}
.history-cnt-wrap {display: flex; flex-flow: row wrap; gap: 8px;  align-items: flex-start; justify-content: flex-start;}
.history-cnt {border: 1px solid #ccc; border-radius: 16px; overflow: hidden; min-height: 180px;  vertical-align: top; width: calc(25% - 8px);}
.history-tt {border-bottom:1px solid #d8d8d8; display: block; padding: 16px 16px 12px; font-size: var(--text-content-4); color: var(--black); position: relative; font-weight: 500;}
.history-tt span {background-color: #EFF5FF; color: var(--blue); display: inline-block; font-size: .8em; padding: 4px 8px; border-radius: 4px; font-weight: 500;}
.history-tt ul {display: block; margin: 8px 0 0 -12px;}
.history-tt ul li { display: inline-block; position: relative; padding: 0 12px; font-size: .95em;}
.history-tt ul li::before  {position: absolute; right: -8px; top: calc(50% - 8px); width: 10px; height: 12px; background: url(../img/img_linemap.png) 0 0 no-repeat; background-size: cover; content:'';}
.history-tt ul li:last-child::before {display: none;}
.history_hr {border-top: 1px dashed #ddd; margin: 16px 0; border-bottom: 0;}
.btn-history {background-color: #246BEB; position: absolute; right: 24px; top: 14px; width: 24px; height: 24px; border: 0; border-radius: 6px; transition: var(--transition-3); }
.btn-history span {width:10px; height: 7px; background: url(../img/img_arrow_sm_wh.png) 50% 50% no-repeat; display: block; margin: 0 auto;  padding: 0; transform: rotate(180deg);}
.btn-history:hover {cursor: pointer; background-color: #0f50c8;}
.btn-history.active {background-color: #B7C0E1;}
.btn-history.active span {transform: rotate(0deg);}
.history-list {padding: 18px;}
.history-list ul li {display: block; margin-bottom: 4px; padding-left: 16px; position: relative; font-weight: 300; color: var(--gray); margin-top: 8px;}
.history-list ul li:first-child {font-weight: 600; color: var(--black); margin-top: 0;}
.history-list ul li:first-child::after {width: 14px; height: 14px; display: inline-block; background: url(../img/img_check_wh.png) 50% 50% no-repeat #2141AE; background-size: 10px 10px; border-radius: 50%; content:''; margin: -2px 0 0 6px; vertical-align: middle; }
.history-list ul li::before {width: 5px; height: 5px; color: #666; left: 0; top: 0; position: absolute; content:'-';}
.history-list ul li > p {display: inline-block; padding-right: 24px; position: relative;}
.history-list ul li > p:first-child::before {width:1px; height: 12px; background-color: var(--lightgray); position: absolute; right: 12px; top: 2px; content:'';}
.history-list ul li > p:last-child {padding-right: 0;}
.history-list .hidden {display: none;}
.notice-group {background-color: #EAEFF3; padding: 1rem 2rem; box-sizing: border-box; border-radius: 16px; display: flex; gap: 24px;}
.notice-group .item {display: flex; flex-flow: row wrap; align-items: center; padding-left: 30px; gap: 14px; flex: 0 220px;}
.notice-group .item .item-tt {display: inline-block; font-weight: 600;}
.notice-group .item .item-cnt {flex: 1;}

.growWrap {display: flex; flex-flow: row wrap; gap:24px; margin-top: 24px;}
.growWrap .list {flex: 1; background-color: #E7EBF8; border: 1px solid #6F84CB; font-size: var(--text-content-5); text-align: center; padding: 16px 8px 8px; border-radius: 8px; position: relative;}
.growWrap .list:last-child {background-color: #CCD8FF;  border: 1px solid #385BD0; }
.growWrap .list::before {width: 11px; height: 7px; top: calc(50% - 2px); right: -18px; position: absolute; content: '';  background: url(../img/img_arrow_md_bk.png) 0 0 no-repeat; transform: rotate(-90deg); background-size: 100% 100%;}
.growWrap .list:last-child::before {display: none;}
.growWrap .list .tt {color: #233269; font-size: 1.6em; line-height:1; display: block; margin-bottom: 12px; font-weight: 700; }
.growWrap .list .cnt {background: var(--white); padding: 12px 8px; box-sizing: border-box; border-radius: 8px; color: #3D4663; height: calc(100% - 36px);}
.growWrap .list .cnt > p { font-weight: 400; line-height: 1.4; word-break: keep-all; display: block;}
.growWrap .list .cnt > p strong {font-size: 1.2em; color: #143182; font-weight: 600; line-height: 1.2; display: block; margin-bottom: 10px;}
.growWrap .list .cnt ul {display: flex; flex-flow:column wrap; gap: 4px;}
.growWrap .list .cnt ul li {flex: 1; text-align: left; word-break: keep-all; line-height: 1.2; padding-left: 12px; font-size: .9em; position: relative;}
.growWrap .list .cnt ul li:before {content:'-'; width: 10px; height: 10px; position: absolute; left: 0; top: 0; }

.historyWrap {display: flex;  flex-flow: row wrap; margin-top: 24px;}
.historyWrap > div {flex: 1;}
.historyWrap > div .tt { background: #E7EBF8; border-top: 1px solid #6F84CB; text-align: center; border-bottom: 1px solid #6F84CB; font-size: 1.375em; line-height: 1; padding: .5em 0; font-weight: 600; position: relative;}
.historyWrap > div .tt::before {width: 22px; height: 22px; top: 34px; left:5px; position: absolute; content: '';  background: url(../img/img_historyarrow.png) 0 0 no-repeat; z-index: 2;}
.historyWrap > div .tt::after {width: 1px; height: 100px; top: 40px; left:16px; position: absolute; content: '';  background: #7E87A8; }
.historyWrap > div:first-child .tt { border-left:1px solid #6F84CB; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
.historyWrap > div:last-child .tt { border-right:1px solid #6F84CB; border-top-right-radius: 8px; border-bottom-right-radius: 8px;}
.historyWrap > div .list {padding: 80px 40px 0; color: #143182; position: relative;}
.historyWrap > div .list > li {padding-bottom: 40px; position: relative;}
.historyWrap > div .list > li::before {width: 12px; height: 12px; border-radius: 50%; background: #143182; position: absolute; top: 3px; left: -30px; content:''; z-index: 1;}
.historyWrap > div .list > li::after {width:1px; height: 100%; background: #7E87A8; position: absolute; top:0; left: -24px; content:'';}
.historyWrap > div .list > li:last-child {margin-bottom:0;}
.historyWrap > div .list > li:last-child::before {top: 0;}
.historyWrap > div .list > li:last-child::after {display: none;}
.historyWrap > div .list > li.now::before {background: #2457E7;}
.historyWrap > div .list > li > p {display: block; font-size: 1.2rem; font-weight: 600; margin-bottom: 12px;}
.historyWrap > div .list > li.now > p, .historyWrap > div .list > li.now ul li {color: #2457E7;}
.historyWrap > div .list > li > ul {font-size: 1rem;}
.historyWrap > div .list > li > ul > li {color: inherit; line-height: 1.4; font-weight: 300; position:relative; padding-left: 16px; margin-bottom: 8px;}
.historyWrap > div .list > li > ul > li::before {width: 10px; height: 10px; left: 0; top: 0; position: absolute;  text-align: center; content:"-";}
.historyWrap > div .list > li > ul > li:last-child {margin-bottom: 0;}
.historyWrap > div .list > li > ul > li strong {font-weight: 600; display: block; margin-bottom: 4px;}
.img_moutline {display: block; margin:0 auto;}
.developWrap {display: flex; flex-flow: row wrap; gap: 100px; margin-top: 24px; position:relative; padding: 0 30px;}
.developWrap::before {position: absolute; left: calc(50% - 24px); top: calc(50% - 30px); width: 60px; height: 60px; content:''; background: url(../img/img_developarrow.png) 0 0 no-repeat; }
.developWrap .develop-list { background: #E7EBF8; border: 1px solid #6F84CB; border-radius: 8px; overflow: hidden; flex: 1;}
.developWrap .develop-list .tt {display: block; background: #233269; color: var(--white); font-size: 1.375em; line-height: 1; padding: .5em 0; font-weight: 600; text-align: center;}
.developWrap .develop-list .cnt {padding: 24px; width: calc(100% - 2em); margin: 1em auto; background: var(--white); border-radius: 8px;}
.developWrap .develop-list .cnt li {color: #3D4663; line-height: 1.4; font-weight: 400; position:relative; padding-left: 16px; margin-bottom: 8px;}
.developWrap .develop-list .cnt li::before {width: 10px; height: 10px; left: 0; top: 0; position: absolute;  text-align: center; content:"-";}
.developWrap .develop-list .cnt li:last-child {margin-bottom: 0;}
.developWrap .develop-list .cnt li strong {font-weight: 700; color: #2457E7; }
.developWrap .develop-list .cnt li img {width: 100%; max-width: 400px; margin: 24px auto 0; display: block; border: 1px solid #ededed;}
.developWrap.develop2 {gap: 180px; }
.developWrap.develop2::before { width: 140px; height: 100px; background: url(../img/img_developarrow2.png) 0 0 no-repeat;  background-size: 100% auto; left: calc(50% - 64px); top: calc(50% - 50px);}
.developWrap.develop2::after {content:'기초정보 제공';  position: absolute; left: calc(50% - 44px); top: calc(50% - 7px); width: 90px; height: 20px; color: #0E2B5E; font-weight: 600;}

/*---------- map-container ----------*/
#map-container {position: relative; width: 100%; min-width: 1280px; height: calc(100% - 85px); min-height: 800px; overflow: hidden;}

/* 지도 상단 */
.topWrap {width: 100%; height: 70px; background-color: var(--white); position: relative;}
.topWrap .topWrap_cnt {width: 1280px; margin: 0 auto; display: flex; flex-flow: row wrap; align-items: center; height: 70px;  transition: var(--transition-3);}
.topWrap .topWrap_cnt .tt {width: 160px; text-align: left; font-size: 1.25rem; font-weight: 600; color: var(--black); position: relative; display: inline-block;}
.topWrap .topWrap_cnt .tt .tooltip {height: 20px;}
.topWrap .topWrap_cnt .cnt {width:100%; height: 70px; flex:1; display: flex; gap: 32px; flex-flow: row wrap;}
.topWrap .topWrap_etc {position: absolute; right: 24px; top: 18px; display: flex; flex-flow: row wrap; gap: 6px;}
.topWrap .topWrap_etc button {width: 34px; height: 34px; border-radius: 50%; border: 0; color: var(--white); background-color: #A7B2D6; transition: var(--transition-2); background-repeat: no-repeat; background-image: url(../img/img_topetc.png); position: relative; margin-top: -4px;}
.topWrap .topWrap_etc button::after {content: '민원신청'; position: absolute; left: -1px; bottom: -14px; display: block; color: #7280AE; font-size: 10px; font-weight: 400; width: 100%; text-align: center;}
.topWrap .topWrap_etc button:hover {background-color: #7f8fc2;}
.topWrap .topWrap_etc .btn_mapinfo {background-position: -1px 0;}
.topWrap .topWrap_etc .btn_mapinfo::after {content: '안내';}
.topWrap .topWrap_etc .btn_customer {background-position: -39px 0;}
.topWrap .topWrap_etc .btn_customer::after {content: '민원신청';}

/* tooltip */
.tooltip {position: relative; display: inline-block; z-index: 4''}
.tooltip .img {display: block; margin-top: -4px;}
.tooltip .tooltiptext {visibility: hidden; width: 240px; background-color:rgba(99,141,255,1);color: var(--white); text-align: left; padding:.5rem; border-radius: 6px; position: absolute; z-index: 2; top: -13px; left: 25px; font-size:var(--text-content-6); font-weight: 300; line-height: 1.4; word-break: keep-all;  transition: var(--transition-2);}
.tooltip .tooltiptext::after {  content: ""; position: absolute; top: 16px; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent rgba(99,141,255,1) transparent transparent;}
.tooltip:hover .tooltiptext {visibility: visible;}

/* map tab */
.topWrap .tabs2{margin: 0px; padding: 0px; list-style: none;width: 280px; display: flex; gap: 8px; flex-flow: row wrap; align-items: center; position: relative;}
.topWrap .tabs2::after {content:''; width: 1px; height: 32px;background-color: #ccc; position: absolute; right: -16px; top: 18px;}
.topWrap .tabs2 > li {background: none;  flex: 1;  text-align: center;}
.topWrap .tabs2 > li:hover { }
.topWrap .tabs2 > li button {display: inline-block; border-radius: 4px; border: 1px solid #999; color: #333; cursor: pointer; font-size: var(--text-content-4); font-weight: 400; transition: var(--transition-2); background-color: transparent; padding: 8px 0; width: 100%;}
.topWrap .tabs2 > li button:hover {color: var(--blue); border-color: var(--blue);}
.topWrap .tabs2 > li.current button {color: var(--white); font-weight: 600; background-color: var(--blue); border-color: var(--blue);}
.topWrap .tab-content {display: none; width: 100%;}
.topWrap .tab-content > div {display: flex; flex-flow: row wrap; width: 100%; gap: 8px; align-items: center;}
.topWrap .tab-content.current{display: inherit;}
.tabs-cnt {flex: 1; height: 70px; display: flex; flex-flow: row wrap;}
.tabs-cnt .itemWrap {flex: 1; border: 1px solid #ddd; box-sizing: border-box; border-radius: 4px; display: flex; flex-flow: row wrap; gap: 4px; align-items: center; height: 40px; padding: 0 8px; position:relative;}
.tabs-cnt .itemWrap > label, .tabs-cnt .itemWrap > p {font-size: var(--text-content-5); color: var(--blue); font-weight: 600;}
.tabs-cnt .itemWrap .item {flex: 1; border: 0; font-size:  .865rem; color: var(--black); font-weight: 400; letter-spacing: -1px; width: 100%;}
.tabs-cnt .itemWrap select {background: url(../img/img_arrow_md_gray.png) 100% 50% no-repeat; height: 38px; line-height: 38px; padding: 0 6px;  border-radius: 0 !important;}
.tabs-cnt .itemWrap input[type="text"] {height: 38px; line-height: 38px; padding: 0; width: 100%; border-radius: 0 !important;}
.tabs-cnt .btn {height: 40px; line-height: 40px;}
.tabs-cnt .intemInput {width: 140px; flex: none;}
.map_input {height: 40px; border: 1px solid #ddd; padding: 0 16px;}
.map-selector-input {background: url(../img/img_arrow_md_gray.png) 100% 50% no-repeat; border: 0; font-size: var(--text-content-5); color: var(--black); font-weight: 400; cursor: default; user-select: none; caret-color: transparent;}
.map-selector-input2 {border: 0;  font-size: var(--text-content-5); color: var(--black); font-weight: 400; cursor: default;}
.tbl-map-wrap {display: none; position: absolute; right: 8px; top: 38px; width: calc(100% - 40px); max-height: 340px; overflow:hidden; overflow-y: auto; background-color:var(--white);  z-index: 10; border: 1px solid #666; padding: 3px 1px;}
.tbl-map-wrap .tbl-map-selector {border-top: 0;}
/* gis element */
.area {display:inline-block; vertical-align: middle; margin: -2px 4px 0 0;  width: 12px; height: 12px; border-radius: 50%; background-color: var(--white); box-sizing: border-box;}
.area.typeA {border:3px solid #adadad;}
.area.typeB{border:3px solid #9400de;}
.area.typeC {border:3px solid #fe5d00;}
.subcatchments  {display:inline-block; vertical-align: middle; margin: -2px 4px 0 0;  width: 12px; height: 12px; border-radius: 50%; background-color: var(--white); box-sizing: border-box;}
.subcatchments.typeA {border:3px solid #adadad;}
.subcatchments.typeB {border:3px solid #9400de;}
.subcatchments.typeC {border:3px solid #fe5d00;} 
.river {display:inline-block; margin: -2px 4px 0 0; width: 12px; height:12px; position:relative;}
.river::before {width: 12px; height: 2px; transform: rotate(-45deg); position: absolute; left: 0; top:6px; content:'';}
.river.typeA::before {background-color: #2141AE;}
.river.typeB::before {background-color: #60C6EC;}

/* gis */
body > form {height: 100%;}
.mapWarp {width: 100%; height: calc(100% - 70px); position: relative; background-color: #333;}
.maparea {height: 100%;}
.map-coyright {position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, -50%); color: var(--white); font-size: 12px; font-weight: 500;}
.map_img {margin: 24px 0; position: relative;}
.map_img > .img {width: 90%; max-width: 900px; display: block; margin: 0 auto;}
.map_img > .img img {width: 100%;}
.map_img > button {width: 42px; height: 42px; position: absolute; top: 280px /*calc(50% - 21px)*/; border: 0; background: transparent; transition: var(--transition-2);     padding: 0;}
.map_img > button:hover {opacity: .6;}
.map_img > button img {width: 100%;}
.map_img .btn-prev {left: 12px;}
.map_img .btn-next {right: 12px;}
.name_3dp  > img {display: inline-block; margin: -2px 4px 0 0;  vertical-align: middle;}
.mapGuide {position: absolute; padding: 8px 10px; box-sizing: border-box; left: 16px; bottom: 16px; background-color: var(--white); z-index: 1; border-radius: 4px; font-size: 13px; line-height: 1.3; color: #2F3B60; display: flex; flex-flow: row wrap; lign-items: flex-start;}
.guideImg {position: absolute; top: 15px;}
.guideImg img {width: 140px;}
.guideText {padding-left: 150px; font-size: 12px; letter-spacing: -1px; line-height: 1.2;}
.guideText a {color: var(--blue); text-decoration: underline;}

/* left */
.leftWrap {width: 220px;box-sizing: border-box; position: absolute; left: 16px; top: 86px; z-index: 1; display: flex; flex-flow: row wrap; gap: 8px;}
.leftWrap h4::before {top: 0;}
.itemWrap {position:relative; flex: 1;;}
.itemWrap .itemList {margin-top: 8px; background: #F9F9F9; border-radius: 4px; padding: 10px; box-sizing: border-box; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);}
.itemWrap .itemList > li {display: flex; gap: 8px; margin-bottom: 6px;}
.itemWrap .itemList > li:last-child {margin-bottom: 0;}
.itemWrap .itemList > li label { font-size: var(--text-content-5); color:#0B1F65; font-weight: 400; display: inline-block;}
.itemWrap .itemList > li:hover label {color:var(--blue);}
.itemWrap .itemList input[type="checkbox"], .itemWrap .itemList input[type="radio"] {width: 14px; height: 14px;}
.itemWrap .itemList input[type="checkbox"]:checked {background-size: 10px 10px;}
.leftWrap .itemWrap {margin-bottom: 0;  padding: 12px; background-color: var(--white); border-radius:8px; }
.leftWrap > div:last-child {margin-bottom: 0;}
.h5Map, .h5Notice, .h5Year {  font-size: 1rem; color: #2F3B60; font-weight: 600; padding: 0 20px 0 20px;  position: relative; margin: 0 0 .5em;}
.h5Map::before {background: url(../img/img_h5_map.png) 0 0 no-repeat;background-size: 100% auto; width: 16px; height: 16px;}
.h5Notice::before{background: url(../img/img_h5_notice.png) 0 0 no-repeat;background-size: 100% auto; width: 16px; height: 16px;}
.h5Year::before{background: url(../img/img_h5.png) 0 0 no-repeat;background-size: 100% auto; width: 14px; height: 14px; top: 2px;}
.leftWrap .itemWrap .itemList {background: #f4f7ff !important;}

.itemNotice { margin-top: 8px; background: #f4f7ff; border-radius: 4px; padding: 12px 8px; box-sizing: border-box; max-height: 200px; overflow-y: auto; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);}
.itemNotice > p {font-size: var(--text-content-5); font-weight: 400; color: #0B1F65; letter-spacing: -.04em; word-break: keep-all; line-height: 1.2;}
.itemNotice > ul {margin-top: 8px;}
.itemNotice > ul li {font-size: .865rem; color: #2F3B60; padding-left: 10px; position: relative; margin-bottom: 6px; line-height: 1.1;}
.itemNotice > ul li::before {content:''; width: 6px; height: 1px; position: absolute; left: 0; top:10px; background-color: #2F3B60;}
.itemNotice > ul li strong {font-weight: 600; line-height: 1.6;}
.itemNotice > ul li a {font-size: .9em; color: #256EF4; position: relative; display: inline-block; text-decoration: underline;}
.itemNotice > ul li a::after {width: 11px; height: 11px; background: url(../img/img_link_bl.png) 0 0 no-repeat; background-size: cover; content:''; display: inline-block; margin-left: 2px;}
.noticeHidden {display: none !important;}
.notice-close {position: absolute; right: 12px; top: 12px; z-index: 1; width: 14px; height: 14px;}

/* right */
.gistt {font-size: var(--text-hdline-sm); color: #2F3B60; font-weight: 600;  position: relative; padding: 0 0 16px 24px; margin:0 0 16px; height: 34px; border-bottom: 1px solid #999;}
.gistt::before {width: 20px; height: 20px; left: 0; top:-2px; position: absolute; background: url(../img/img_gistt.png) 0 0 no-repeat; background-size: auto 20px ; content:'';}
 .result_tt small {display: inline-block; background: #888; color: var(--white); font-size: 12px; height: 20px; line-height: 20px; padding: 0 6px; vertical-align: middle; margin: -4px 0 0 4px; border-radius: 4px; font-weight: 300;}
.result_tt {font-size: 1rem; color: #2F3B60; font-weight: 600; padding-left: 20px; position: relative; margin: 0 0 .5em;}
.result_tt::before {width: 11px; height: 15px; left: 4px; top: 0; position: absolute; background: url(../img/img_h3.png) 0 0 no-repeat; background-size: 100% 100%; content:'';}
.result_tt2 {font-size: var(--text-content-4); color:  #2F3B60; font-weight: 600; padding-left: 24px; position: relative; margin: 0 0 .5em;}
.result_tt2::before {background: url(../img/img_h5.png) 0 0 no-repeat; width: 16px; height: 16px; content:''; position: absolute; left: 0; top: 0; }
.gisCnt .itemWrap .item {margin-bottom: 12px;}
.rightWrap {position: absolute; right: 0; top: 86px; z-index: 1; height: calc(100% - 102px); display: flex;}
.rightWrap .gisBtnWrap {position: relative;}
.rightWrap .itemWrap {overflow-y: auto;}
.gisBtnWrap .item {width: 60px; display: flex; flex-flow: column wrap; gap: 6px;}
.gisBtnWrap .item > div { background: var(--white); border: 1px solid var(--black); padding: 10px 0; transition: var(--transition-2); border-radius: 6px; position: relative; cursor: pointer;}

.gisBtnWrap .item .tt {display: block; text-align: center; font-size: 12px; color:var(--black); font-weight: 600;}
.gisBtnWrap .item .img {display: block; margin:0 auto 8px; width:32px; height: 32px; border-radius:50%; background-color: #F2F2F2;background-image: url(../img/img_gisBtn.png); background-repeat:no-rep  eat; transition: var(--transition-2);}
.gisBtnWrap .item01 .img {background-position:0 0; }
.gisBtnWrap .item02 .img {background-position:-44px 0; }
.gisBtnWrap .item03 .img {background-position:-87px 0; }
.gisBtnWrap .item04 .img {background-position:-132px 0 !important; }
.gisBtnWrap .item05 .img {background-position: -152px 1px; background-size: auto 28px;}
.gisBtnWrap .item08 .img {background-position: -229px 1px; background-size: auto 28px;}
.gisBtnWrap .etc {position: absolute; bottom: 0px; right: 0; width: auto; display: flex; flex-flow: column wrap; gap: 10px; align-items: end;}
.gisBtnWrap .etc > div {background: none; width: 140px; padding: 0 !important; }
.gisBtnWrap .item > div.on, .btn-addr.active {background:#0F47FF !important;}
.gisBtnWrap .item > div.on .img, .btn-addr.active .img {background-color: var(--white);}
.gisBtnWrap .item > div.on .tt, .gisBtnWrap .item > div.active .tt {color: var(--white);}

.addrCnt {display: none; position: absolute !important; left: -190px; top: 0; background: var(--white); width: 180px; border-radius: 4px; padding: 14px 6px 6px !important; transition: var(--transition2)}
.addrCnt::before {top: 10px; border: solid transparent; content: ''; height: 0; width: 0; position: absolute; pointer-events: none; border-top-color: var(--white); border-width: 8px; right: -15px; margin-left: -8px; transform: rotate(-90deg); }
.addrCnt.active {display: block; background: #fff !important; padding: 14px 6px 6px !important; z-index: 2;}
.addrCnt .tt {text-align: center; color:var(--black) !important;font-weight: 500;font-size: .95rem !important; }
.addrForm {padding: 8px 0 0; display: flex; flex-flow: row wrap; gap: 4px;}
.addrForm input {flex: 1; width: 100%; border-radius: 3px; border: 1px solid #ddd; height: 32px; line-height: 32px; text-align: left; margin-bottom: 4px; font-size: .875rem; padding: 0 8px;}
.addrForm input:focus {border: 1px solid blue;}
.addrForm .addrBtn {width: 40px;height: 32px; line-height: 32px; background: var(--darkblue); color: var(--white); border: 0;  border-radius:4px;}

.addrLIst {display: none; width: 100%; height: 220px; overflow-y: auto; font-size: 12px; margin: 6px 0 0;}
.addrLIst > li {display: block; line-height: 1.2; margin-bottom: 5px; background: #f4f7ff; padding:8px; word-break: keep-all;  letter-spacing: -.4px; color: #666;  border-radius: 4px;  transition: var(--transition-2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);}
.addrLIst > li:hover, .addrLIst > li:focus, .addrLIst > li.on {background-color: var(--white); color: #0B1F65;  box-shadow: 0 0 0 1px inset var(--blue);}
.addrLIst > li:last-child {margin-bottom: 0;}
.addrLIst > li .btn {width: 34px; font-size: 10px; height: 16px; line-height: 16px; background-color: #666; color: var(--white); border: 0; padding: 0; display: inline-block; border-radius: 2px; margin:  2px;}
.addrLIst.active {display: block;}
.addrLIst.active li .btn {background: #666;}   
.addrLIst > li:hover .btn, .addrLIst > li:focus .btn, .addrLIst > li.on .btn {background: var(--blue);}

.itemWrap .resultList {margin-top: 8px; background: #f8f8f8; border-radius: 4px; padding: 8px; box-sizing: border-box; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);}
.itemWrap .resultList .dept1  {font-size: .9rem; color:#0B1F65; position:relative; padding-left: 24px; margin-bottom: 6px; display: flex; flex-flow: row wrap; gap: 6px;}
.itemWrap .resultList .dept1::before {width: 12px; height: 12px; left: 4px; top: 3px; position: absolute; background: url(../img/img_dept1.png) 0 0 no-repeat; background-size: cover; content:'';}
.itemWrap .resultList .dept1:last-child {margin-bottom: 0;}
.itemWrap .resultList .dept1 > .tt {font-weight: 600; line-height: 1.2}
.itemWrap .resultList .dept1 > .cnt {font-weight: 400; word-break: keep-all; flex: 1; line-height: 1.2;}
.itemWrap .resultList .dept1 > ul {margin:2px 0 4px; width: 100%; display: block;}
.itemWrap .resultList .dept2  {font-size: .875rem;  color: #485A8F; position:relative; padding-left: 16px; margin-bottom: 2px; display: flex; flex-flow: row wrap; gap: 6px; letter-spacing: -.04rem;}
.itemWrap .resultList .dept2::before {width: 12px; height: 12px; left: 0; top: 2px; position: absolute; background: url(../img/img_dept2.png) 0 0 no-repeat; background-size: cover; content:'';}
.itemWrap .resultList .dept2:last-child {margin-bottom: 0;}
.itemWrap .resultList .dept2 > .tt {font-weight: 400; line-height: 1.2}
.itemWrap .resultList .dept2 > .cnt {font-weight: 400; word-break: keep-all; flex: 1; line-height: 1.2;}
.waterlabel {width: 12px; height: 12px; display: inline-block; vertical-align: middle; margin: -3px 0 0;}

/* bottom */
.legend {width: 100px; border: 1px solid #003675; border-radius: 4px; background-color: var(--white) !important; font-size: 12px;}
.legend .tt {text-align: center; background-color:#003675; color: var(--white); line-height: 1.6;}
.legend ul {margin: 6px 12px;}
.legend ul li {padding: 0; margin: 0 0 4px 0; line-height: 11px; display: flex; flex-flow: row wrap; gap:4px;}
.legend ul li span {display: inline-block; width: 10px; height: 10px; border-radius: 10px; border: 1px solid rgba(0,0,0, .2); vertical-align: top; color: #666;}
.legend ul li span.lg1 {background-color: #FDFBC7;}
.legend ul li span.lg2 {background-color: #E6FF99;}
.legend ul li span.lg3 {background-color: #38FEFD;}
.legend ul li span.lg4 {background-color: #CE9AFE;}
.legend ul li span.lg5 {background-color: #CE3F87;}
.opacity {width: 100px; border: 1px solid #003675; border-radius: 4px; background-color: var(--white); font-size: 12px;}
.opacity .tt {text-align: center; background-color:#003675; color: var(--white); line-height: 1.6;}
.opacity .cnt {margin: 6px;}
.zoom {width: 100px; border: 1px solid #003675; border-radius: 4px; background-color: var(--white); font-size: 12px;}

.rightWrap .gisCnt-btn {position: relative; top: calc(50% - 40px); left: 1px; height: 80px; width: 20px; border-radius: 0; border: 1px solid var(--black); border-right: 0;  background-color: var(--white); transition: none; border-bottom-left-radius: 4px; border-top-left-radius: 4px;}
.rightWrap .gisCnt-btn::before {position: absolute; width: 12px; height: 12px; background: url(../img/img_arrow_md_bk.png) no-repeat center; background-size: auto; transform: rotate(-90deg); content:''; top: calc(50% - 4px); left: calc(50% - 6px);}
.rightWrap .gisCnt-btn.active {left: 2px}
.rightWrap .gisCnt-btn.active::before { transform: rotate(90deg); }
.rightWrap .gisCnt { width: 280px; padding: 16px 12px; background: var(--white); border:1px solid var(--black); border-radius: 8px; margin-right: 16px;  transition: var(--transition-1); overflow: hidden; height: 100%; display: flex; flex-flow: column; gap: 16	px;}
.rightWrap .gisCnt.active {width: 0; padding: 0; margin-right: 0; border : 0;}
.rightWrap .gisCnt hr {border-top: 1px dashed #ddd; margin: 12px 0; border-bottom: 0;}
/* map pop */
#mapPop {position: absolute; background-color: var(--white); padding: 16px; border-radius: 8px; border: 1px solid #1d1d1d;min-width: 230px; opacity: 1;  z-index: 10;}
#mapPop::before {bottom: -13px; border: solid transparent; content: " "; position: absolute;  /*height: 0; width: 0; pointer-events: none; border-top-color: var(--white); border-width: 11px; left: 48px; margin-left: -11px*/ width: 22px; height: 10px; background: url(../img/img_pop_arrow.png) 0 0 no-repeat; } 
#mapPop .tt {font-size: var(--text-content-4); font-weight: 700; display: flex; flex-flow: row wrap; align-items:center;  gap: 6px;}
#mapPop .tt i {width: 18px; height: 18px; display: inline-block; position:relative; margin-top: -1px;}
#mapPop .tt i::before {width: 100%; height: 100%; position:absolute; left:0; top: 0; content:''; background-size: cover; background-position: 50% 50%;}
#mapPop .tt.typeA {color: var(--black);}/*배수펌프장*/
#mapPop .tt.typeA i::before {background-image: url(../img/ico_pump.svg);}
#mapPop .tt.typeB {color: var(--black);}/*양수장*/
#mapPop .tt.typeB i::before {background-image: url(../img/ico_drain.svg);}
#mapPop .tt.typeC {color: #3447C6;}/*지하차도*/
#mapPop .tt.typeC i::before {background-image: url(../img/ico_underpass.svg);}
#mapPop .tt.typeD {color: #089E51;}/*대피소*/
#mapPop .tt.typeD i::before {background-image: url(../img/ico_shelter_green.svg);}
#mapPop .viewerWrap {/*width: 500px; height: 333px; width: 600px; height: 400px;*/ width: 400px; height: 260px; margin: 0 0 8px; padding: 0; border: 0;}
#mapPop .viewerWrap .viewer {width: 100%; height: 100%; background-color: #ccc;}
#mapPop .modal-close {transition:var(--transition-2); border: 0; background-color: var(--white); position: absolute; right: 16px; top: 16px;}
#mapPop .modal-close:hover {opacity: .6;}

/* dialog pop */
.pop {display: none; position: fixed; left: 0; top: 0; z-index: 1000; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); backdrop-filter: blur(2px);}
.pop .tb {display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; }
.pop .tb .inner {width: 100%; padding: 32px 24px 0; background: var(--white); border-radius: 16px;}
.pop .top {display: flex; align-item: center; border-bottom: 1px dashed #ddd; justify-content: space-between; padding-bottom: 16px; margin-bottom: 16px;}
.pop .top .tt {font-weight: bold; font-size: 20px; padding-left: 28px; position: relative;}
.pop .top .tt::before {width: 20px; height: 20px; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; content: '';left: 0; top: 0; position: absolute; }
.pop .top .tt.write::before {background-image: url(../img/ico_write.png);}
.pop .top .tt.notice::before {background-image: url(../img/ico_notice.png);}
.pop .top .tt.map::before {background-image: url(../img/ico_map.png);}
.pop .popCnt { overflow-y: auto; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: var(--white); position: relative;}
.pop .modal-close {transition:var(--transition-2); border: 0; background-color: var(--white);}
.pop .modal-close:hover {opacity: .6;}
.pop .tb.md {width: 560px; margin: 0 auto;}
.pop .tb.md .popCnt {max-height: 60vh;}
.pop .tb.sm {width: 560px; margin: 0 auto;}
.pop .tb.sm .popCnt {height: auto; max-height: 20vh;}
.pop .tb.sm .inner {padding: 32px 24px;}
.pop .tb.xsm {width: 400px; margin: 0 auto;}
.pop .tb.xsm .popCnt {height: auto; max-height: 24vh;}
.pop .tb.xsm .inner {padding: 32px 24px;}
.pop .tb.lg {width: 1100px; margin: 0 auto;}
.pop .tb.lg .popCnt {max-height: 80vh; height: 80vh;}
.popComment {margin: 0; font-size: var( --text-content-5); color:var(--gray);}
.popComment li {position: relative; display: block; word-break: keep-all; padding-left:14px; margin-bottom: 6px; line-height: 1.2; font-weight: 400;}
.popComment li strong {font-weight: 600; color: var(--black);}
.popComment li:last-child {margin-bottom: 0;}
.popComment li::before {content:'-';position: absolute; left: 0; top: 0; width: 12px; height: inhert;}
.pop .form {}
.pop .form .item {margin-top: 24px;}
.pop .form .item .tt { font-size: var( --text-content-5); color:var(--black); font-weight: 600; margin-bottom: 6px; display: block;}
.pop .form .item .Cnt {width: 100%; height: 46px; border-color: #ddd;}
.pop .form .item .textarea {color: var(--darkgray);}
.pop .form .item select {background: url(../img/ico_select.png) no-repeat; background-position: calc(100% - 16px) 50%;}
.popText1 {font-size: 16px; color:var(--darkgray); line-height: 1.4; display: block; margin-bottom: 8px;}
.today_form {display:flex; gap: 6px; align-items: center; margin: 16px 0 0;}
.today_form input[type=checkbox] {width: 18px; height: 18px;}
.btn_pdfdown {font-size: .8rem; padding: 6px 10px; position:absolute; top: 0; right: 0;}
#pop-error .popCnt {border-radius: 0;}
#pop-error .tb .inner {padding: 32px 24px;}
#pop-customer .tb.md .inner {position: relative;}
#pop-customer .tb.md .inner.process_overlay::after{content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.6) url(../img/loading.svg) center center no-repeat; background-size: 128px 128px; z-index: 9999; pointer-events: all; cursor: progress; border-radius: 16px;}
.pop_outline {
    display: block;
    background: none;
    backdrop-filter: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
}

.pop_outline.pop .tb .inner {border: 1px solid #333;}
/* summary */
.tbl-typeA { position: relative; width:100%; z-index: 1; margin: 2em auto 0; overflow: auto; height: 600px; border-left: 1px solid #EBEEF6; border-right: 1px solid #EBEEF6; border-top: 3px solid #abafbd;;}
.tbl-typeA table {width: 100%; min-width: 1280px; margin: auto; border-collapse: collapse; border-spacing: 0; }
.tbl-typeA th, .tbl-typeA td {padding: 8px;vertical-align: middle;word-break: keep-all;letter-spacing: -1px;}
.tbl-typeA th::before, .tbl-typeA td::before {position: absolute;right: 0;top: 0;width: 1px;height: 100%;background-color: #EBEEF6;content:'';}
.tbl-typeA th::after, .tbl-typeA td::after {position: absolute; right: 0; bottom: 0; width: 100%; height: 1px; background-color: #EBEEF6; content:'';}
.tbl-typeA thead th {color: var(--black);font-weight:500;line-height: 1.3;position: -webkit-sticky;position: sticky;background-color: #F8F9FC;z-index: 2;font-size: 15px;position: relative;}
.tbl-typeA thead th span {color: var(--gray); display: block; font-size: 14px; font-weight: 300;}
.tbl-typeA td {position: relative;}
.tbl-typeA td:first-child::before {display: none;}
.tbl-typeA thead th:last-child::before {position: absolute; right: 0; top: 0; width: 1px; height: 100%; background-color: #EBEEF6; content:'';}
.tbl-typeA thead tr:nth-child(1) th {position: -webkit-sticky; position: sticky; top: 0; height: 32px;}
.tbl-typeA thead tr:nth-child(2) th {position: -webkit-sticky; position: sticky; top: 54px;}
.tbl-typeA thead tr:nth-child(3) th {position: -webkit-sticky; position: sticky; top: 89px; height: 32px;}
.tbl-typeA thead tr:nth-child(4) th {position: -webkit-sticky; position: sticky; top: 126px; height: 50px;}
.tbl-typeA tbody th {color: var(--black); text-align: center; font-size: 14px; font-weight:400;}
.tbl-typeA tbody td {color: var(--gray); text-align: center; font-size: 14px; background-color: var(--white); line-height: 1.2;}
.tbl-typeA table .sticky-cells {z-index: 3; background-color: #F8F9FC; min-width: 60px;}
.tbl-typeA tbody th:nth-child(1), .tbl-typeA tbody th:nth-child(2), .tbl-typeA tbody th:nth-child(3), .tbl-typeA tbody th:nth-child(4), .tbl-typeA tbody th:nth-child(5),
.tbl-typeA tbody th:nth-child(6), .tbl-typeA tbody th:nth-child(7), .tbl-typeA tbody th:nth-child(8), .tbl-typeA tbody th:nth-child(9), .tbl-typeA tbody th:nth-child(10)
{position: -webkit-sticky;position: sticky;z-index: 1;background-color: #effaff;min-width: 78px;}
.tbl-typeA tbody td > span, .tbl-typeA tbody th > span {display: block;}
.tbl-typeA tbody tr.totalA th, .tbl-typeA tbody tr.totalA td {background-color: #FFFDE7; font-weight: 500;}
.tbl-typeA thead tr th:nth-child(1), .tbl-typeA tbody th:nth-child(1) {left: 0;}
.tbl-typeA thead tr:nth-child(1) th:nth-child(2), .tbl-typeA thead tr:nth-child(3) th:nth-child(1), .tbl-typeA tbody th:nth-child(2) {left: 79px;}
.tbl-typeA thead tr:nth-child(3) th:nth-child(2), .tbl-typeA tbody th:nth-child(3) {left: 157px;}
.tbl-typeA thead tr:nth-child(3) th:nth-child(3), .tbl-typeA tbody th:nth-child(4) {left: 235px;}
.tbl-typeA thead tr:nth-child(3) th:nth-child(4), .tbl-typeA tbody th:nth-child(5) {left: 313px;}
.tbl-typeA thead tr:nth-child(3) th:nth-child(5), .tbl-typeA tbody th:nth-child(6) {left: 391px;}
.tbl-typeA thead tr:nth-child(3) th:nth-child(6), .tbl-typeA tbody th:nth-child(7) {left: 469px;}
.tbl-typeA thead tr:nth-child(3) th:nth-child(7), .tbl-typeA tbody th:nth-child(8) {left: 547px;}
.tbl-typeA thead tr:nth-child(1) th:nth-child(3), .tbl-typeA tbody th:nth-child(9), .tbl-typeA tbody tr.totalA th:nth-child(2), .tbl-typeA tbody tr.totalB th:nth-child(2) {left: 625px;}
.tbl-typeA thead tr:nth-child(1) th:nth-child(4), .tbl-typeA tbody th:nth-child(10), .tbl-typeA tbody tr.totalA th:nth-child(3), .tbl-typeA tbody tr.totalB th:nth-child(3){left: 703px;}
.tbl-typeA tbody tr.totalA {position: -webkit-sticky; position: sticky; z-index: 2; top: 182px; height: 32px;}
.tbl-typeA strong {font-weight: 500;}
.tbl-typeA thead th.b-none::before {display: none;}
.tbl-typeA .b-black::before {background-color: #d4d7e1; z-index: 2;}
.tbl-input {position: relative; padding: 0.6rem; border: 1px solid; border-color: #bbb; color: #464c53; transition: var(--transition-1); }
.tbl-textarea {padding: 0.6rem; border: 1px solid; border-color: #bbb; color: #464c53; height: 300px;}
.tbl-select {width: 160px; height: 40px; line-height: 40px; border-color: #bbb;}
.file-download-wrap {}
.file-download-wrap li {display: block; margin-bottom: 2px;}
.file-download-wrap li:last-child {margin-bottom: 0;}
.file-download-wrap li a {display: block;}
.input-file{ background-color: #f8f9fc; border: 0; margin: 2px 0; border-radius: 4px; height: 36px; width: 500px; color: #464c53; padding: 0; font-size: .9em; }
.input-file::file-selector-button{border-radius: 4px; color: white; background-color: #256ef4; padding: 0 10px;border: 0;height: 36px; line-height: 1; cursor: pointer; transition: all .2s ease-in; cursor: pointer;}
.input-file::file-selector-button:hover{background-color: #0B50D0; transition: all .2s ease-in;}
.input-file-wrap {display: flex; justify-content: space-between; width: 100%;}
.input-file-wrap > p {display: flex;}
.input-file-wrap button {display: inline-flex;align-content: center; align-items: center; gap: 4px; background-color: var(--white); border: 0;}
.input-file-wrap button .img-delete {background-color: #bbb; width: 16px; height: 16px; border-radius: 50%; padding: 4px; transition: var(--transition-2);}
.input-file-wrap button:hover .img-delete {background-color: #999;}
.input-file-wrap button .img-add {background-color:var(--blue); width: 16px; height: 16px; border-radius: 50%; padding: 4px; transition: var(--transition-2); transform: rotate(45deg);}
.input-file-wrap button:hover .img-add {background-color:var(--darkblue);}

/***** responsive *****/
@media screen and (max-width: 1560px) {
  .topWrap .topWrap_etc {right: 10px;}
  .tabs-cnt {margin-right: 90px;}
  .topWrap .tabs2 {width: 240px;}
}
@media screen and (max-width: 1280px) {
  header .inner .logo {padding-left: 24px;}
  #con-container {padding: 0 24px;}
  .linemap {right: 24px;}
  /*.foot-quick .accordion > li:last-child {border-right: 0; }*/
  .topWrap .topWrap_cnt {padding: 0 16px;}
  .topWrap .tab-content > div {gap: 4px;}
}

.gisBtnWrap .toolbar {width: 32px; height: 32px; overflow: hidden;}
.gisBtnWrap .toolbar > .button {margin: 0; padding: 0; display: block; margin: 0 auto 8px; width: 32px; height: 32px; border-radius: 50%; background-color: #F2F2F2;  transition: var(--transition-2); background-position: -176px 0; }
.gisBtnWrap .toolbar > .button > span {display: block; width: 100%; height: 100%;}
.gisBtnWrap .toolbar > .button > span img {display: block; margin: 3px auto 0;}
.twipsy {font-size: 14px !important; top: 0; left: 0;}
/*.gisBtnWrap .item05 .img {background-image: none;}*/
.gisBtnWrap .item .img {overflow: hidden; }
.gisBtnWrap .item05.on .toolbar > .button {background: var(--white);}
.tabs3 {width: 120px !important;}
.compasImg {z-index: 1; background: transparent !important;}
.durationWrap {position: relative; width: 100%; min-width: 1280px; height: 100%}
.durationWrap .topWrap .topWrap_cnt {width: 600px;}
.durationWrap .topWrap .topWrap_cnt .tt{width: 120px;}
#pop-duration {background: none; backdrop-filter: none; width: auto; height: auto; left: 0; top: 0; transform: translate(26px, calc(50% + 35px));}
.imgDuration {width: 100%; }
.imgDuration img {width: 100%; }
.itemDuration {text-align: right; font-weight: 600 !important;}
.btn-duration {width: 40px; padding: 0; background: #A6ADC6; transition: all .2s ease-in-out;}
.btn-duration.active {background: #0B1F65;}
.btn-duration:hover {opacity: .9;}
.btn-duration img {display: block; margin: 0 auto;}
#pop-duration .modal-close { position: absolute; right: 24px; top: 16px;}
#pop-duration .inner { padding: 40px 24px 24px;}    
.gisBtnWrap .item07 .img {background-position: -220px 0;}
.itemWrap .resultList .dept1 > .cnt img {vertical-align: middle; margin: -3px 0 0 0;}
.cesium-viewer-toolbar {display: none !important;}
.gisBtnWrap .etc > div.opacity {border: 1px solid #003675; border-radius: 4px; background-color: var(--white) !important; font-size: 12px;}
.gisBtnWrap .etc > div.opacity  .cnt {margin: 6px;}
.gisBtnWrap #slider {float: left; clear: left; width: calc(100% - 32px); margin-left: 16px;}
.ui-widget.ui-widget-content {border: none; background: #ddd;}
.ol-popup {position: absolute; background-color: white; -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); padding: 11px; border-radius: 5px; border: 1px solid #cccccc; bottom: 12px; left: -50px; min-width: 250px; opacity: 0.9; }
.ol-popup p{padding-bottom:8px; font-size:.889em; font-size:.889rem; font-weight:700; color:#3d75cc}
.ol-popup .ps_name {font-weight:500}
.ol-popup table{width:100%;}
.ol-popup table td{padding:6px 8px 4px; border:1px solid #ddd; text-align:center;}
.ol-popup table td:first-child{background-color:#f6f8fa; color:#3d75cc}
.ol-popup:after, .ol-popup:before {top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
.ol-popup:after {border-top-color: white; border-width: 10px; left: 48px; margin-left: -10px;}
.ol-popup:before {border-top-color: #cccccc; border-width: 11px; left: 48px; margin-left: -11px;}
.ol-scale-line {background-color: transparent; position: static; width: 100%;}
.ol-scale-line-inner {background-color: rgba(0,60,136,.3); font-size: 12px; margin: 0; width: 100%  !important;}
#slider {float: left; clear: left; width:158px; margin-left:19px;}
#slider .ui-slider-range {background: var(--blue);}
#slider .ui-slider-handle {border-color: transparent; background-color: var(--darkblue); color: #fff; font-size: 10px; cursor: pointer; font-weight: 200;}
#custom-handle {width: 2.5em; height: 1.4em; top: 50%; margin-top: -.8em; text-align: center; line-height: 1.2em; margin-left: -1.5em;}
.maptype_slct {padding-top:10px; padding-bottom:7px;}
.maptype_slct select {width: 100%; text-align: left !important; margin: 0; padding: 4px 8px; border: 1px solid #003675; border-radius: 4px; font-size: 11px; box-shadow: 0 0 4px rgba(0, 0, 0, .2);  background: url(../img/img_arrow_md_bk.png) calc(100% - 8px) 50% no-repeat #ffffff; background-size: 10px auto;}

/* 게시판 에디터  */
.ck-editor__editable{ min-height:300px; }
.ck-content { font-synthesis: weight style; min-height: 200px}
.ck-content b, .ck-content strong { font-weight: 700 !important; }
.ck-content em, .ck-content i { font-style: italic !important; }
.ck.ck-editor__editable_inline *[style*="font-weight"] { font-weight: inherit; }

/* 지도 핀 관련 */
.pin{position:absolute; /* top:50%; left:50%; */ top: 43%; left: 52.5%; display:flex; z-index:1; transform: translateX(-50%);}
.pin .icon{z-index:2; width: 36px; height: 43px;}
.pin .pinbd{display:flex;}
.pin .pinbd p.txt{height:36px; line-height:36px; margin-left:-22px; padding-left:22px; background-color:#0048FF; color:#fff; font-size:.93rem; font-weight:500; letter-spacing:-.056rem; padding-right: 4px;}
.pin .pinbd p.txt.twoLn{line-height:17px; box-sizing:border-box; padding-top:5px; font-size:.85em; font-size:.85rem; letter-spacing:0em; letter-spacing:0rem;}
.pin .pinbd p.txt.twoLn span{display:block; color:#efff30; font-size:.77em; font-size:.77rem; font-weight:300; letter-spacing:-.030em; letter-spacing:-.030rem;}
.pin .pinbd .bgend{width:16px; height:41px; background-image:url(/img/gis_pin_end.png); background-repeat: no-repeat;  margin-left: -1px;}
.pin .pinbd.c_sky p.txt{background-color:#00AEDE;}
.pin .pinbd.c_sky .bgend{background-image:url(/img/gis_pin_sky_end.png);}
.pin .pinbd.c_grn p.txt{background-color:#00B445;}
.pin .pinbd.c_grn .bgend{background-image:url(/img/gis_pin_grn_end.png);}
.pin .pinbd.c_ppl p.txt{background-color:#6648FE;}
.pin .pinbd.c_ppl .bgend{background-image:url(/img/gis_pin_ppl_end.png);}

.tooltip_distance {padding: 4px;}
.tooltip_distance > strong {font-weight: 400; font-size: 13px; color: #fff; line-height: 1.2; background: var(--blue); padding: 4px 6px; margin-right: 4px; border-radius: 4px; text-align: center; display: inline-block;}
.tooltip_distance > .tooltip_len {font-size: 14px; font-weight: 700; color: #0B1F65; line-height: 1.2; letter-spacing: -.04rem;}
.tooltip_distance > p {font-size: 12px; color: #0B1F65; font-weight: 400; line-height: 1.2;}

.shelterPop {width: 400px;}/*대피소 팝업*/
.ugRoadPop {}/*지하차도 팝업*/

.legend.legend2 {width: 100px; border: 1px solid #003675; border-radius: 4px; background-color: var(--white) !important; font-size: 12px;}
.legend.legend2 .tt {text-align: center; background-color:#003675; color: var(--white); line-height: 1.6;}
.legend.legend2 ul {margin: 6px 12px;}
.legend.legend2 ul li {padding: 0; margin: 0 0 4px 0; line-height: 11px; display: flex; flex-flow: row wrap; gap:4px;}
.legend.legend2 ul li span {display: inline-block; width: 10px; height: 10px; border-radius: 10px; border: 1px solid rgba(0,0,0, .2); vertical-align: top; color: #666;}
.legend.legend2 ul li span.lg1 {background-color: #FDFBC7;}
.legend.legend2 ul li span.lg2 {background-color: #E6FF99;}
.legend.legend2 ul li span.lg3 {background-color: #A0FFD9;}
.legend.legend2 ul li span.lg4 {background-color: #38FEFD;}
.legend.legend2 ul li span.lg5 {background-color: #A19CFC;}
.legend.legend2 ul li span.lg6 {background-color: #DB5AEC;}

.tbody_data .data_tr td a {margin: 0; vertical-align: middle; display: block; padding: 0; height: 18px;}

/* 로드뷰 팝업 */
.open_ug_pop {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .5);
    position: absolute;
    right: 26px;
    top: 77px;
    z-index: 1;
}
.open_ug_pop > img {width: 16px; height: 16px;}

.roadview-full-overlay {
    position: fixed;
    inset: 0; 
    background: rgba(0, 0, 0, 0);
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
}

.roadview-full-overlay.active {
    display: flex;
}

.roadview-full-box {
    position: relative;
    width: 1000px;
    height: 600px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0);
}

.roadview-full-box .btn-rv-full-close {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 10;
    border: none;
    background: rgba(0,0,0,0.4);
    color: #fff;
    padding: 4px 8px;
    cursor: pointer;
}

.viewerWrap-full {
    width: 100%;
    height: 100%;
}

.viewerWrap-full .viewer {
    width: 100%;
    height: 100%;
}

.roadview-full-box {
border: 1px solid rgba(255, 255, 255, 1);
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -40%) !important;
}

.btn-rv-full-close {
    background: rgba(255, 255, 255, 1) !important;
    border-radius: 50%;
    width: 38px;
    height: 38px;
}

/* quick menu */
#quick-item { position: fixed; top: 200px; right: 0px; z-index: 2; border: 1px solid #ddd; background-color: #fff; border-radius: 2px; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
#quick-item ul {box-sizing: border-box; display: flex; flex-direction: column;    }
#quick-item ul li {text-align: center; padding: 10px 8px;background-color: #fff; transition: all .2s ease;}
#quick-item ul li:nth-child(1) {border-bottom: 1px dashed #ededed;}
#quick-item ul li a {font-size: .7rem; color: #666; line-height: 1; display: block; }
#quick-item ul li a p {color: #999; transition: all .2s ease-in-out; display: block; margin-top: 4px;}
#quick-item ul li:hover {background-color: #f5f5f5;}
#quick-item ul li:hover a p {color: #2457E7; color: #444;}

@media screen and (max-width: 1400px) {
    #quick-item {top: auto; bottom: 120px; border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0;}
    #quick-item ul li {padding: 6px 4px;}
}

/* Shelter Source Info */
#mapPop .tblSource {font-size: var(--text-content-6); text-align: left; color: var(--gray); margin-top: 10px;}

/* Intro page margin - cjk */
#conTab1 .img_outline {margin: 5em 0 .5em;}

/* 2026.02.26 cursor: pointer - cjk*/
.tabs-cnt .itemWrap select {cursor: pointer;}
.tbl-map-selector tbody tr:hover td, .tbl-map-selector tbody tr.active td {cursor: pointer;}
.tabs-cnt .itemWrap input[type="text"] {cursor:pointer;}
.itemWrap .itemList > li:hover label {cursor:pointer;}
.itemWrap .itemList > li:hover {cursor:pointer;}