@charset "utf-8";


.police_notice_detail_wrap .detail_contents {
	min-height:260px;
	
}

.police_white_wrap .empty_msg {
	line-height:260px;
	height:260px;
}

.police_white_wrap .edu_empty_msg{
	text-align: center;
    width: 100%;
    margin: 100px;
    font-size: 18px;
}


.ui-dialog {
	background:#fff;
	z-index:9999;
}

.ui-dialog-titlebar {
	
}

.gmx_popup {
	height:400px;
}

.gmx_popup .title { 
  padding:10px;
  font-size:18px;
  font-weight: bold
}


.gmx_popup .content { 
  padding:10px;
  height:300px;
  font-size:16px;
}

.gmx_popup .footer { 
  text-align:right;
  padding:10px;
}

.hide-title-bar.ui-dialog-titlebar { display: none; }

.ui-dialog .ui-dialog-content.police_notice_popup {
	padding:0;
}
.contents_box {
	padding:30px;
}

/* gmx popup 스타일 */
.ol-popup {
  position: absolute;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
}
.ol-popup:after, .ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}


.ol-popup:after {
 /*  width: 0px;
  height: 0px;
  border-top: 20px solid #666666;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent; */
  
}

.ol-popup :before {
 
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "✖";
}


/* ol css 수정 */
.layerName, .layerThemeValue {font-size: 13px; color: #333;}
#map .ol-control {background-color: initial;}
#map .ol-control:hover {background-color: initial;}
#map .ol-control > button {background-color: #f1f1f1; color: #333; border: 1px solid #fff; border-left: 0; border-right: 0; margin: 0; padding: 5px 8px; font-size: 16px;}
/* #map .ol-control > button:disabled {background-color: #ccc; color: #666;} */
.ol-control-right.ol-overview.ol-collapsed button:before, .ol-control.ol-bookmark > button::before {display: none;}
#map .ol-control.bottom_btn > button:hover {background-color: #0078d4; color: #fff;}
#map .ol-control.ol-active.bottom_btn > button {background-color: #efefef; color: #fff;}
#map .ol-zoom, #map .ol-bookmark {display: none; top:25px;left: initial !important; right: 8px; background-color: initial; box-shadow: 0px 0px 5px 2px rgba(0,0,0,.3);}
#map .ol-searchgps  {left: initial !important; right: 8px; background-color: initial;}
#map .ol-zoom > button, .ol-bookmark > button, .ol-searchgps > button {width: 37px; height: 37px;}
#map .ol-zoom > button.ol-zoom-in {border-bottom: 0;}
#map .ol-zoom button:hover, .ol-bookmark button:hover, .ol-searchgps button:hover {background-color: #ddd; color: #333;}
#map .ol-zoom:hover {background-color: initial;}
#map .ol-overview button { display:none; }
#map .ol-overview button:before {display: none;}
#map .ol-overview button:hover {background-color: #ddd;}
#map .ol-overview .panel {margin-right: 40px;}
#map .ol-bookmark {top: 95px !important; display:none;}
#map .ol-bookmark > div {position: absolute; top: 0; left: -215px; z-index: 9; width: 200px; border: 1px solid #ddd; background-color: #fff; box-sizing: border-box; padding: 3px 5px; border-radius: 3px;}
#map .ol-bookmark > div input {width: 100%; text-indent: 10px; padding: 5px 0; font-size: 13px;}
#map .ol-bookmark > button {background-image:url(../../res/img/icon_bookmark_l.png);}
#map .ol-bookmark > button:first-child {border-bottom: 0;}
#map .ol-bookmark > button:hover:after {content: "즐겨찾기"; display: block; width: 60px; height: 30px; line-height: 30px; color: #fff; font-size: 13px; border-radius: 3px; background-color: rgba(0,0,0,0.6); position: absolute; left: -70px; top: 50%; transform: translateY(-50%);}
#map .ol-bookmark > button:hover:before {content: ""; display: block; border: 5px solid transparent; border-left: 5px solid rgba(0,0,0,0.6); position: absolute; left: -10px; top: 50%; transform: translateY(-50%);}
#map .ol-bookmark button:before {display: none;}
#map .ol-bookmark >  button:hover {background-color: #ddd;}
#map .ol-bookmark ul {margin-bottom: 5px;}
#map .ol-bookmark ul li {padding: 5px; height: 30px; line-height: 30px; color: #333;}
#map .ol-bookmark ul li > button {color: #333;}
#map .ol-bookmark ul li:hover {background-color: #fff;}
#map .ol-searchgps.ol-search {top: 132px !important; display: flex; flex-direction: column; color: #333;}
#map .ol-searchgps.ol-search > div, .ol-searchgps.ol-search > label, .ol-searchgps.ol-search > ul {background-color: #fff; margin: 0 !important; padding: 10px;}
#map .ol-searchgps.ol-search > .ol-switch-box {border: 1px solid #ddd; border-bottom: 0;}
#map .ol-searchgps.ol-search > .ol-longitude, #map .ol-searchgps.ol-search > .ol-latitude {border: 1px solid #ddd; border-top: 0; border-bottom: 0;}
#map .ol-searchgps.ol-search > .autocomplete {border: 1px solid #ddd; border-top: 0;}
#map .ol-searchgps.ol-search > label {text-align: right; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom: 1px solid #ccc; background-color: #fafafa;}
#map .ol-searchgps.ol-search .ol-longitude label, .ol-searchgps.ol-search .ol-latitude label  {width: auto !important; margin: 0 5px 0 0 !important; transform: none !important; font-size: 14px;}
#map .ol-searchgps.ol-search .ol-latitude {border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;}
#map .ol-searchgps.ol-search input {border-bottom: 1px solid #ddd;}
#map .ol-searchgps.ol-search button {background-image:url(../../res/img/icon_tude.png);  margin-bottom: 10px; box-shadow: 0px 4px 5px 2px rgba(0,0,0,.3);}
#map .ol-control.ol-searchgps > button:first-child {background-image:url(../../res/img/map/icon_tude_l.png); margin-left: auto; background-size: 52%; position: relative; top: 0; left: 0;}
#map .ol-searchgps.ol-search  button:hover {background-color: #ddd;}
#map .ol-control.ol-searchgps > button:first-child:before {display: none;}
#map .ol-control.ol-searchgps > button:first-child:hover:after {content: "좌표 검색"; display: block; width: 60px; height: 30px; line-height: 30px; color: #fff; font-size: 13px; border-radius: 3px; background-color: rgba(0,0,0,0.6); position: absolute; left: -70px; top: 50%; transform: translateY(-50%);}
#map .ol-control.ol-searchgps > button:first-child:hover:before {content: ""; display: block; border: 5px solid transparent; border-left: 5px solid rgba(0,0,0,0.6); position: absolute; left: -10px; top: 50%; transform: translateY(-50%);}

#map .ol-control.ol-bar .ol-toggle.ol-active > button {background-color: #0078d4;}
#map .ol-control.ol-toggle button:disabled {background-color: #ccc; border: 1px solid #ddd; color: #666;}
#map .ol-control.ol-button button:disabled {background-color: #ccc; border: 1px solid #ddd; color: #666;}

#map .ol-control.ol-bar .ol-control.ol-option-bar {left: 50%; transform: translateX(-50%);}
#map .ol-control.ol-bar .ol-control.ol-text-button {border-left: 0;}
#map .ol-control.ol-bar .ol-control.ol-text-button > div {border-left: 0; font-size: 14px; color: #333; font-family: 'NanumSquare';}
#map .ol-control.ol-bar .ol-control.ol-text-button > div:hover {color: #0078d4;}

#map .ol-attribution {display: none;}
#map .ol-overview {bottom: 4.5em;}
#map .ol-rotate {top: 49em; right: 50%;}
#map .ol-rotate .ol-rotate-reset {width: 100px; padding: 5px 6px; background-color: #0077ff; border: 1px solid #005a9f; color: #fff;}
#map .ol-rotate .ol-rotate-reset:after {content:"복구"; display: inline-block; font-size: 12px;}
#map .ol-rotate:hover .ol-rotate-reset {background-color: #fff;}
#map .ol-rotate:hover .ol-rotate-reset:after {color: #0077ff;}
#map .ol-rotate .ol-compass {transition: 0.3s;}
#map .ol-rotate:hover .ol-compass {transform: rotate(0deg) !important; color: #0077ff;}

/* 축척 */
#map #scaleBox {position: absolute; bottom: 40px; right: 0.5em; background: rgba(255,255,255,0.7); width: auto; height: 26px; display: flex; align-items: center; justify-content: flex-end; box-sizing: border-box; padding: 0 5px;}
#map #scaleBox .scaleText {font-size: 12px; margin-right: 5px; font-weight: bold; color: #333;}
#map #scaleBox .ol-scale-line {position: static; background-color: transparent; padding: 0;}
#map #scaleBox .ol-scale-line .ol-scale-line-inner {height: 3px; border: 2px solid #555; border-top: 0; overflow: hidden; text-indent: -9999px;}

#map #lonLatBox {position: absolute; bottom: 7px; right: 0.5em; background: rgba(255,255,255,0.7); width: auto; height: 26px; display: flex; align-items: center; justify-content: flex-end; box-sizing: border-box; padding: 0 5px;}
#map #lonLatBox p {margin-right : 1em; font-size : 11px; color : #333}

#parentBody .ol-ctx-menu-container {background-color: #fff; color: #333;}
#parentBody .ol-ctx-menu-container li:not(.ol-ctx-menu-separator) {position: relative; padding: 0.8em 1.2em; font-size: 1em; border-radius: 3px; transition: 0.3s;}
#parentBody .ol-ctx-menu-container li:not(.ol-ctx-menu-separator):hover {background-color: #e7f5ff; color: #0078d4;}
#parentBody .ol-ctx-menu-container li.ol-ctx-menu-submenu::after {top: 50%; transform: rotate(45deg) translateY(-50%);}
#parentBody .ol-ctx-menu-container li.ol-ctx-menu-submenu:hover::after {border-color: #0078d4;}
#parentBody .ol-ctx-menu-container li.ol-ctx-menu-separator hr {display: none;}
#parentBody .ol-ctx-menu-container li .sText {background-color: transparent;}
#gridMonitoringWrap .ui-state-default.ui-sortable-handle {display: flex; flex-direction: column; background: #fff; border: none;}
#gisEditTab {display: flex; align-items: center; justify-content: flex-end; padding: 0px; padding-right: 10px; height: 40px;}

.fa-search:before {
  content: "\f002"; }
#map .search_box {position: absolute; top: 0px; right: -250px; display: flex;}
#map .search_box > input[type="search"] {width: 200px; height: 36px; color: #333; background-color: #f3faff; border: 1px solid #ddd; outline: 0; box-sizing: border-box; padding: 5px 10px; font-size: 13px; transition: 0.3s;}
#map .search_box .btn_search {display: inline-block; width: 35px; height: 35px; background-color: #0077ff; border: 1px solid #005a9f; border-radius: 50%; vertical-align: top; margin-left: 5px; font-size: 13px;}
#map .search_box .btn_search:hover {border: 1px spolid #0077ff; background-color: #fff; color: #0077ff}
#map .search_box .btn_search > i {transition: 0.3s; cursor: pointer;}
#map .search_box .btn_search:hover > i {transform: rotate(90deg);}



/* XEUS-GATE-PLAYER 이주영 수정 */
.playerWrap { /* width: 100% !important; */  height: 100% !important;padding: 0 !important; overflow: hidden !important; }


/* 팝업 상단(제목, 닫기) */
.ui-dialog {padding: 0; border: 0 !important; border-radius: 0; background-color: #fff; box-shadow: 0px 5px 5px 3px rgba(0,0,0,0.2);}
.ui-dialog-titlebar {border-radius: 0; background-color: #0078d4; color: #fff; padding: .7em 1em !important;}
.ui-dialog-titlebar .ui-dialog-title {font-size: 15px;}
.ui-dialog .ui-dialog-titlebar-close {width: 50px; height: 100%; background-image: url(../../res/img/btn_close_w.png); background-size: 30%; background-color: transparent !important; background-repeat: no-repeat; background-position: center; top: 0; right: 0; margin: 0; padding: 0; border-radius: 0; border: 0;}
.ui-dialog .ui-dialog-titlebar-close > span {}
.ui-dialog .ui-dialog-titlebar-close:hover {background-color: #ddd;}
.ui-widget-header {border: 0;}
.ui-dialog[aria-describedby="webSearchWrap"] {bottom: initial !important;}
.ui-dialog, .ui-dialog-content {box-sizing: content-box;}
.ui-dialog-content {width: 100% !important;}


/* 지도 위 버튼 */
.ol-control.mainBar > .ol-bar {background-color: #fff; border: 1px solid #ddd; border-radius: 2px; padding: 0; box-shadow: 0px 0px 5px -3px rgba(0,0,0,0.6);}
.ol-control.mainBar:hover {background-color: #fff;}
#map .mainControl {position: relative; border-radius: 0;}
#map .mainControl > button {position: relative; background-color: #fff; font-size: 14px; color: #333; font-weight: 100; width: 50px; height: 35px; padding: 0; border-radius: 0; border: 1px solid transparent; transition: 0.3s; cursor: pointer; display: flex; justify-content: center; align-items: center;}
#map .mainControl > button:hover:after {content: attr(title); display: block; padding: 0 5px; min-width: 25px; height: 30px; line-height: 30px; color: #fff; font-size: 13px; border-radius: 3px; background-color: rgba(0,0,0,0.6); position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%);}
#map .mainControl > button:hover:before {content: ""; display: block; border: 5px solid transparent; border-bottom: 5px solid rgba(0,0,0,0.6); position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);}
#map .mainControl > button > span {display: inline-block; width: 16px; height: 16px; line-height: 16px; font-size: 15px; border-radius: 2px; color: #333;}
#map .mainControl > button > span > i {cursor:pointer;}
#map .mainControl > button.active {background-color: #0078d4;}
#map .mainControl > button:hover span {color: #333;}
#map .mainControl > button.active span {color: #fff;}
/* #map .mainControl > button > span.legendB {background-image: url(../../res/img/img/icon_legend.png);} */
#map .mainControl > button > span.home {background-image: url(../../res/img/map/light/icon_home.png);}
/* #map .mainControl > button:hover > span.home {background-image: url(../../res/img/img/map/white/icon_home.png);} */
#map .mainControl > button.active > span.home {background-image: url(../../res/img/map/white/icon_home.png);}
#map .mainControl > button > span.move {background-image: url(../../res/img/map/light/icon_move.png);}
/* #map .mainControl > button:hover > span.move {background-image: url(../../res/img/img/map/white/icon_move.png);} */
#map .mainControl > button.active > span.move {background-image: url(../../res/img/map/white/icon_move.png);}
#map .mainControl > button > span.length {background-image: url(../../res/img/map/light/icon_length.png);}
/* #map .mainControl > button:hover > span.length {background-image: url(../../res/img/img/map/white/icon_length.png);} */
#map .mainControl > button.active > span.length {background-image: url(../../res/img/map/white/icon_length.png);}
#map .mainControl > button > span.area {background-image: url(../../res/img/map/light/icon_area.png);}
/* #map .mainControl > button:hover > span.area {background-image: url(../../res/img/img/map/white/icon_area.png);} */
#map .mainControl > button.active > span.area {background-image: url(../../res/img/map/white/icon_area.png);}
#map .mainControl > button > span.export {background-image: url(../../res/img/map/light/icon_save.png);}
/* #map .mainControl > button:hover > span.export {background-image: url(../../res/img/img/map/white/icon_save.png);} */
#map .mainControl > button.active > span.export {background-image: url(../../res/img/map/white/icon_save.png);}
#map .mainControl > button > span.sketch {background-image: url(../../res/img/map/light/icon_sketch.png);}
/* #map .mainControl > button:hover > span.sketch {background-image: url(../../res/img/img/map/white/icon_sketch.png);} */
#map .mainControl > button.active > span.sketch {background-image: url(../../res/img/map/white/icon_sketch.png);}
#map .mainControl > button > span.roadview {background-image: url(../../res/img/map/light/icon_roadview.png);}
/* #map .mainControl > button:hover > span.roadview {background-image: url(../../res/img/img/map/white/icon_roadview.png);} */
#map .mainControl > button.active > span.roadview {background-image: url(../../res/img/map/white/icon_roadview.png);}
#map .mainControl > button > span.cesiumView {background-image: url(../../res/img/map/light/icon_3d.png);}
#map .mainControl > button > span.cctvSearch {background-image: url(../../res/img/map/light/icon_cctv.png);}
#map .mainControl > button > span.infoseed {background-image: url(../../res/img/map/light/icon_grid.png);}
#map .mainControl > button.active > span.infoseed {background-image: url(../../res/img/map/white/icon_grid.png);}
#map .mergeFeatureBtn > button, #map .splitFeatureBtn > button {display: inline-block; width: 30px; height: 30px; background-size: 52%; background-position: center;}
#map .mergeFeatureBtn > button {background-image: url(../../res/img/map/light/icon_merge.png);}
#map .splitFeatureBtn > button {background-image: url(../../res/img/map/light/icon_split.png);}
#map .mergeFeatureBtn > button:hover {background-image: url(../../res/img/map/white/icon_merge.png);}
#map .splitFeatureBtn > button:hover {background-image: url(../../res/img/map/white/icon_split.png);}
#map .mergeFeatureBtn > button:disabled:hover {background-image: url(../../res/img/map/light/icon_merge.png);}
#map .splitFeatureBtn > button:disabled:hover {background-image: url(../../res/img/map/light/icon_split.png);}



/* 페이지네이션 */
.police_paging_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
}
.police_paging_wrap ul {
    display: flex;
}

.police_paging_wrap ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-bottom: 1px solid #E8E8E8;
    font-size: 1.4rem;
    cursor: pointer;
}

.police_paging_wrap ul li.active {
    border-bottom: 2px solid #0054A6;
}

.police_paging_wrap ul li.active > a {
    color: #0054A6;
}

.police_paging_wrap ul li[class*="prev"],
.police_paging_wrap ul li[class*="next"],
.police_paging_wrap ul li[class*="first"],
.police_paging_wrap ul li[class*="last"] {
    position: relative;
    border-radius: 50%;
    background-color: #E8E8E8;
    border: 0;
    text-indent: -9999px;
    overflow: hidden;
}

.police_paging_wrap ul li[class*="prev"],
.police_paging_wrap ul li[class*="first"] {
    margin-right: 0.5em;
}

.police_paging_wrap ul li[class*="next"],
.police_paging_wrap ul li[class*="last"] {
    margin-left: 0.5rem;
}

.police_paging_wrap ul li[class*="prev"]:hover,
.police_paging_wrap ul li[class*="next"]:hover,
.police_paging_wrap ul li[class*="first"]:hover,
.police_paging_wrap ul li[class*="last"]:hover {
    background-color: #4A4A4A;
}

.police_paging_wrap ul li[class*="prev"]:before,
.police_paging_wrap ul li[class*="next"]:before,
.police_paging_wrap ul li[class*="first"]:before,
.police_paging_wrap ul li[class*="last"]:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

.police_paging_wrap ul li[class*="prev"]:before,
.police_paging_wrap ul li[class*="next"]:before {
    background-image: url(../img/icn_arrow.svg);
}

.police_paging_wrap ul li[class*="prev"]:before,
.police_paging_wrap ul li[class*="first"]:before {
    transform: translate(-50%, -50%) rotate(180deg);
}

.police_paging_wrap ul li[class*="first"]:before,
.police_paging_wrap ul li[class*="last"]:before {
    background-image: url(../img/icn_arrow2.svg);
}


.police_edu_wrap .police_edu_list > li .title {
	width: 400px;
    /* padding: 0 5px; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tooltipsy {
	font-size:16px;
    position:relative;
    padding: 10px;
    max-width: 200px;
    color: #fff;
    background-color: #0054A6;
    border: 1px solid #0054A6;
}
.tooltipsy:after {
    position:absolute;
    content:'';
    bottom:-6px;
    left:50%;
    margin-left:-5px;
    width:10px; height:10px;
    background-color: #0054A6;
    border-right:1px solid #0054A6;
    border-bottom:1px solid #0054A6;
    display:block;
    transform:rotate(45deg);
}