@charset "utf-8";
:root {
   --color-white: #fff;
   --color-basic: #395bcb;
   --color-secondary: #0abbab;
   --color-danger: #f84c4c;
   --color-dark: #333;
   --color-gray: #ebebeb;
   --color-lightgray: #f3f3f3;
   --color-warning: #fc8800;
   --body-bg: #f5f5f5;
   --app-header-height: 55px;
}
/* common */
body {
	height:100%; overflow:hidden;
}
#owp-map {
	position:relative; width:100vw; height:100vh;
}

/* header */
#owp-header {
	position:relative; display:flex; align-items:center; height:60px; padding:0 25px; background-color:#123c79;
}
#owp-header .logo {
	position:relative; display:flex; align-items:center;
}

#owp-header .logo::before {
	content:"";
	width: 200px;
	height: 40px;
	background:url("../images/logo.png") 50% 50% no-repeat;
	background-size: 67% 59%;
	background-color: white;
}

#owp-header .logo .serviceName {
	font-size:24px; line-height:1.2; color:#fff; font-weight:600; margin-left:10px; user-select:none;
}

/* main */
#owp-main {
	position:relative; height:calc(100vh - 60px);
}

/* left navi */
.left-navi {
	display:flex; position:absolute; top:0; left:0; bottom:0; z-index:100; transition:all 0.25s; box-shadow:1px 0 3px 0 rgba(0,0,0,0.2);
}
.left-navi.close {
	transform:translateX(-100%);
}
.left-navi .btn-expanded {
	position:absolute; top:50%; left:100%; width:20px; height:60px; border:1px solid #ddd; border-left:0; border-radius:0 4px 4px 0; background:#fff url("../images/icon-btn-expand-open-n.png") 50% 50% no-repeat; transform:translateY(-50%); transition:all 0.25s;
}
.left-navi .btn-expanded:hover {
	background:#f4f4f4 url("../images/icon-btn-expand-open-o.png") 50% 50% no-repeat;
}
.left-navi.close .btn-expanded {
	background-image:url("../images/icon-btn-expand-close-n.png");
}
.left-navi.close .btn-expanded:hover {
	background-image:url("../images/icon-btn-expand-close-o.png");
}

.left-navi .sec-navi {
	flex:0 0 auto; width:320px; position:relative; background-color:#fff; z-index:1;
}
.left-navi .sec-navi .sec-title {
	display:flex; align-items:center; justify-content:center; height:50px; background-color:#387ee7;
}
.left-navi .sec-navi .sec-title .title {
	display:flex; align-items:center; font-size:18px; line-height:1.2; color:#fff; font-weight:600;
}
.left-navi .sec-navi .sec-title .title::before {
	content:""; display:inline-block; width:20px; height:20px; margin-right:10px; background:url("../images/icon-nav-title.png") 50% 50% no-repeat;
}
.left-navi .sec-navi .category {
	position:relative; height:calc(100% - 50px); border-right:1px solid #ddd; overflow-y:auto;
}
.left-navi .sec-navi .category .form-checkbox .contxt {
	font-weight:600;
}
.left-navi .sec-navi .category .depth-1 {
	display:flex; align-items:center; position:relative; height:42px; padding:0 0 0 10px; border-bottom:1px solid #ddd;
}
.left-navi .sec-navi .category .depth-1.business {
	background-color:#f4f4f4;
}
.left-navi .sec-navi .category .arrow {
	width:32px; height:32px; margin-left:auto; background:url("../images/icon-collapse-arrow-n.png") 50% 50% no-repeat; cursor:pointer;
}
.left-navi .sec-navi .category .arrow:hover {
	background:url("../images/icon-collapse-arrow-o.png") 50% 50% no-repeat;
}
.left-navi .sec-navi .category .depth-1.business .arrow {
	transform:rotate(-90deg); cursor:default;
}
.left-navi .sec-navi .category .depth-1.business .arrow:hover {
	background:url("../images/icon-collapse-arrow-n.png") 50% 50% no-repeat;
}
.left-navi .sec-navi .category .open .arrow {
	transform:rotate(180deg);
}
.left-navi .sec-navi .category .subnav {
	display:none; position:relative;
}
.left-navi .sec-navi .category .open + .subnav {
	display:block;
}
.left-navi .sec-navi .category .subnav > li {
	position:relative;
}
.left-navi .sec-navi .category .depth-2 {
	display:flex; align-items:center; position:relative; height:42px; padding:0 0 0 17px;  border-bottom:1px solid #ddd;
}
.left-navi .sec-navi .category .depth-2:only-child .arrow {
	display:none;
}
.left-navi .sec-navi .category .tree-line {
	position:relative; width:16px; height:100%;
}
.left-navi .sec-navi .category .tree-line::before {
	content:""; position:absolute; top:0; left:0; width:1px; height:100%; background-color:#ddd;
}
.left-navi .sec-navi .category .tree-line::after {
	content:""; position:absolute; top:50%; left:0; width:12px; height:1px; margin-top:-1px; background-color:#ddd;
}
.left-navi .sec-navi .category .subnav > li:last-child > .depth-2 .tree-line::before {
	height:50%;
}
.left-navi .sec-navi .category .subnav > li:last-child > .depth-3 .tree-line::before {
	height:50%;
}
.left-navi .sec-navi .category .depth-2 + .subnav::before {
	content:""; position:absolute; top:0; left:17px; width:1px; height:100%; background-color:#ddd;
}
.left-navi .sec-navi .category .subnav > li:last-child > .depth-2 + .subnav::before {
	display:none;
}
.left-navi .sec-navi .category .depth-3 {
	display:flex; align-items:center; position:relative; height:42px; padding:0 0 0 40px; border-bottom:1px solid #ddd;
}

.left-navi .sec-search {
	flex:0 0 auto; display:none; width:0; position:relative; border-right:0; background-color:#fff; z-index:0; transition:all 0.25s; transform:translateX(-320px);
}
.left-navi .sec-search.open {
	display:block; width:320px; border-right:1px solid #ddd; transform:translateX(0);
}
.left-navi .sec-search > .inner {
	display:flex; flex-direction:column; position:relative; height:100%;
}
.left-navi .sec-search .search {
	display:flex; align-items:center; position:relative; height:50px; padding:0 10px; border-bottom:1px solid #ddd;
}
.left-navi .sec-search .search label {
	flex:1;
}
.left-navi .sec-search .search .form-input {
	font-size:16px; border:0; width:100%;
}
.left-navi .sec-search .search .form-input:focus-visible {
	outline:0;
}
.left-navi .sec-search .search .btn-search {
	width:30px; height:30px; border:0; background:url("../images/icon-btn-search-n.png") 50% 50% no-repeat;
}
.left-navi .sec-search .search .btn-search:hover {
	background:url("../images/icon-btn-search-o.png") 50% 50% no-repeat;
}
.left-navi .sec-search .option {
	position:relative; padding:15px;
}
.left-navi .sec-search .option .progress {
	position:relative; border:1px solid #ddd; border-radius:3px;
}
.left-navi .sec-search .option .progress .title {
	position:relative; border-radius:3px 3px 0 0; background-color:#f8f8f8; cursor:pointer;
}
.left-navi .sec-search .option .progress .title .inner {
	display:flex; align-items:center; height:34px; padding:0 5px 0 10px;
}
.left-navi .sec-search .option .progress .title .tit {
	font-size:14px; line-height:1.2; color:#222; font-weight:400;
}
.left-navi .sec-search .option .progress .title .arrow {
	width:24px; height:24px; margin-left:auto; background:url("../images/icon-collapse-arrow-n.png") 50% 50% no-repeat;
}
.left-navi .sec-search .option .progress .title.open .arrow {
	transform:rotate(-180deg);
}
.left-navi .sec-search .option .progress .subnav {
	position:relative; padding:10px 10px 5px 10px;
}
.left-navi .sec-search .option .progress .subnav > li {
	padding:2px 0;
}
.left-navi .sec-search .option .progress .subnav .row-inline {	
	padding:2px 0 5px 22px;
}

.left-navi .sec-search .option .items {
	position:relative; margin-top:10px; border:1px solid #ddd; border-radius:3px;
}
.left-navi .sec-search .option .items .item {
	display:flex; align-items:center; height:34px;
}
.left-navi .sec-search .option .items .item:not(:first-child) {
	border-top:1px solid #ddd;
}
.left-navi .sec-search .option .items .item .label {
	display:flex; align-items:center; width:120px; height:100%; font-size:14px; line-height:1.2; color:#222; font-weight:400; padding-left:10px; border-right:1px solid #ddd; background-color:#f8f8f8;
}
.left-navi .sec-search .option .items .item:first-child .label {
	border-radius:3px 0 0 0;
}
.left-navi .sec-search .option .items .item:last-child .label {
	border-radius:0 0 0 3px;
}
.left-navi .sec-search .option .items .item .form-element {
	flex:1; height:100%;
}
.left-navi .sec-search .option .items .item .form-element label {
	width:100%; height:100%;
}
.left-navi .sec-search .option .items .item .form-element select {
	border:0; width:100%; height:100%;
}
.left-navi .sec-search .result {
	flex:1; position:relative; max-height:100%; overflow:hidden;
}
.left-navi .sec-search .result .title {
	display:flex; align-items:center; position:relative; height:40px; padding:0 15px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; background-color:#f8f8f8;
}
.left-navi .sec-search .result .title .tit {
	font-size:16px; line-height:1.2; color:#222; font-weight:600;
}
.left-navi .sec-search .result .title .num {
	font-size:16px; line-height:1.2; color:#222; font-weight:400; margin-left:5px;
}
.left-navi .sec-search .result .title .num em {
	color:#387ee7; font-weight:600;
}
.left-navi .sec-search .result .list {
	position:relative; height:calc(100% - 40px); overflow-y:auto;
}
.left-navi .sec-search .result .list > ul > li {
	position:relative; padding:10px 10px 10px 15px; border-bottom:1px solid #e8e8e8;
}
.left-navi .sec-search .result .list .notresult-message {
	font-size:14px; line-height:1.2; color:#333; font-weight:400; padding:15px; border-bottom:1px solid #e8e8e8;
}
.left-navi .sec-search .result .list .item-title {
	display:flex; align-items:center;
}
.left-navi .sec-search .result .list .item-title .tit {
	font-size:15px; line-height:1.2; color:#333; font-weight:600;
}
.left-navi .sec-search .result .list .item-title .icons {
	margin-left:auto; display:flex; align-items:center;
}
.left-navi .sec-search .result .list .item-title .icons .icon {
	width:20px; height:20px; margin-left:5px; border:0; background-color:transparent;
}
.left-navi .sec-search .result .list .item-title .icons .icon.location {
	background:url("../images/icon-searchResult-location-n.png") 50% 50% no-repeat;
}
.left-navi .sec-search .result .list .item-title .icons .icon.location:hover {
	background:url("../images/icon-searchResult-location-o.png") 50% 50% no-repeat;
}
.left-navi .sec-search .result .list .item-title .icons .icon.info {
	background:url("../images/icon-searchResult-info-n.png") 50% 50% no-repeat;
}
.left-navi .sec-search .result .list .item-title .icons .icon.info:hover {
	background:url("../images/icon-searchResult-info-o.png") 50% 50% no-repeat;
}
.left-navi .sec-search .result .list .item-content {
	margin-top:10px;
}
.left-navi .sec-search .result .list .item-content > li {
	display:flex; align-items:center; font-size:14px; line-height:1.2; color:#333; font-weight:400; padding:2px 0;
}
.left-navi .sec-search .result .list .item-content .label {
	display:flex; align-items:center; width:110px;
}
.left-navi .sec-search .result .list .item-content .label::before {
	content:"·"; margin-right:5px;
}
.left-navi .sec-search .result .list .item-content .contxt {
	display:flex; align-items:center;
}
.left-navi .sec-search .result .list .item-content .contxt::before {
	content:":"; margin-right:10px;
}

/* map area */
.map-container {
	position:relative; width:100%; height:100%;
}
.map-toolkit {
	position:absolute; top:60px; right:15px; z-index:50;
}
.map-toolkit .item {
	display:flex; flex-direction:column; border:1px solid rgba(0,0,0,0.2); border-radius:4px; background-color:#fff; box-shadow:0 1px 4px 0 rgba(0,0,0,0.2);
}
.map-toolkit .item:not(:first-child) {
	margin-top:8px;
}
.map-toolkit .widget {
	position:relative; width:34px; min-height:34px; border:0; border-top:1px solid rgba(0,0,0,0.1); background-color:transparent; transition:all 0.25s;
}
.map-toolkit .widget:first-child {
	border-top:0; border-radius:4px 4px 0 0;
}
.map-toolkit .widget:last-child {
	border-radius:0 0 4px 4px;
}
.map-toolkit .widget:only-child{
	border-radius:4px;
}
.map-toolkit .widget.mapType {
	background:#fff url("../images/icon-mapToolkit-mapType-n.png") 50% 50% no-repeat;
}
.map-toolkit .widget.mapType:hover {
	background:#f8f8f8 url("../images/icon-mapToolkit-mapType-o.png") 50% 50% no-repeat;
}
.map-toolkit .widget.zoomin {
	background:#fff url("../images/icon-mapToolkit-zoomin-n.png") 50% 50% no-repeat;
}
.map-toolkit .widget.zoomin:hover {
	background:#f8f8f8 url("../images/icon-mapToolkit-zoomin-o.png") 50% 50% no-repeat;
}
.map-toolkit .widget.zoomout {
	background:#fff url("../images/icon-mapToolkit-zoomout-n.png") 50% 50% no-repeat;
}
.map-toolkit .widget.zoomout:hover {
	background:#f8f8f8 url("../images/icon-mapToolkit-zoomout-o.png") 50% 50% no-repeat;
}
.map-toolkit .widget.zoomfull {
	background:#fff url("../images/icon-mapToolkit-zoomfull-n.png") 50% 50% no-repeat;
}
.map-toolkit .widget.zoomfull:hover {
	background:#f8f8f8 url("../images/icon-mapToolkit-zoomfull-o.png") 50% 50% no-repeat;
}
.map-toolkit .widget.distance {
	background:#fff url("../images/icon-mapToolkit-distance-n.png") 50% 50% no-repeat;
}
.map-toolkit .widget.distance:hover {
	background:#f8f8f8 url("../images/icon-mapToolkit-distance-o.png") 50% 50% no-repeat;
}
.map-toolkit .widget.area {
	background:#fff url("../images/icon-mapToolkit-area-n.png") 50% 50% no-repeat;
}
.map-toolkit .widget.area:hover {
	background:#f8f8f8 url("../images/icon-mapToolkit-area-o.png") 50% 50% no-repeat;
}
.map-toolkit .widget.reset {
	background:#fff url("../images/icon-mapToolkit-reset-n.png") 50% 50% no-repeat;
}
.map-toolkit .widget.reset:hover {
	background:#f8f8f8 url("../images/icon-mapToolkit-reset-o.png") 50% 50% no-repeat;
}
.map-toolkit .widget.info {
	background:#fff url("../images/icon-mapToolkit-info-n.png") 50% 50% no-repeat;
}
.map-toolkit .widget.info:hover {
	background:#f8f8f8 url("../images/icon-mapToolkit-info-o.png") 50% 50% no-repeat;
}
.map-toolkit .zoom-slider {
	position:relative; padding:10px 0; border-top:1px solid rgba(0,0,0,0.1);
}
.map-toolkit .zoom-slider .inner {
	position:relative; width:20px; margin:auto;
}
.map-toolkit .zoom-slider .slider-wrapper {
	position:absolute; top:0; bottom:0; left:8px; width:4px; z-index:5;
}
.map-toolkit .zoom-slider .zoomSlider {
	position:absolute; top:0; left:0;
}
.map-toolkit .zoom-slider .zoomRange {
	position:absolute; top:100%; left:0; width:100px; height:4px; transform:rotate(-90deg); transform-origin:0 0; background:transparent; appearance:none;
}
.map-toolkit .zoom-slider .zoomRange::-webkit-slider-thumb {
  appearance:none; width:14px; height:14px; border:2px solid #333; border-radius:50%; background:#fff; cursor: pointer;
}
.map-toolkit .zoom-slider .outline .line {
	height:10px; border-bottom:1px solid #999;
}
.map-toolkit .zoom-slider .outline .line:first-child {
	border-top:1px solid #ccc;
}
.map-toolkit .zoom-slider .outline .line:nth-child(2n) {
	border-color:#ccc;
}
.map-toolkit .zoom-slider .outline:before {
	content:""; position:absolute; top:0; bottom:0; left:5px; width:10px; background-color:#fff;
}
.map-toolkit .widget span {
	display:none; position:absolute; top:50%; left:0; font-size:11px; line-height:1.2; color:#fff; font-weight:400; padding:5px 7px; border-radius:3px; background-color:#333; white-space:nowrap; transform:translate(calc(-100% - 8px), -50%); z-index:1;
}
.map-toolkit .widget span::after {
	content:""; position:absolute; top:6px; right:-5px; width:0; height:0; border-left:5px solid #333; border-top:5px solid transparent; border-bottom:5px solid transparent;
}
.map-toolkit .widget:hover span {
	display:block;
}
.map-toolkit .item.open span {
	display:none;
}
.map-toolkit .mapType-layer {
	display:none; position:absolute; top:0; left:0; border-radius:4px; background-color:#fff; box-shadow:0 1px 3px 0 rgba(0,0,0,0.2); transform:translateX(calc(-100% - 10px)); z-index:2;
}
.map-toolkit .item.open .mapType-layer {
	display:block;
}
.map-toolkit .mapType-layer ul {
	display:flex; align-items:flex-start; padding:3px;
}
.map-toolkit .mapType-layer ul li {
	flex:1; padding:3px;
}
.map-toolkit .mapType-layer .type-item {
	position:relative; cursor:pointer;
}
.map-toolkit .mapType-layer .thumbnail {
	position:relative; width:48px; height:48px; border-radius:4px;
}
.map-toolkit .mapType-layer .thumbnail.default {
	background:url("../images/thumb_maptype_default.png") 50% 50% no-repeat; background-size:cover;
}
.map-toolkit .mapType-layer .thumbnail.satellite {
	background:url("../images/thumb_maptype_satellite.png") 50% 50% no-repeat; background-size:cover;
}
.map-toolkit .mapType-layer .contxt {
	position:relative; font-size:13px; line-height:1.2; color:#555; font-weight:600; text-align:center; padding-top:5px;
}
.map-toolkit .mapType-layer .type-item:hover .contxt {
	color:#258fff;
}

/*{ background: url(../images/map/map.png); width: 100%; height: calc(100vh - 70px);}*/ 

.map-area {
	position:relative; width:100%; height:100%; overflow:hidden;
}
.map-area .sample-map {
	width:100%; height:100%; background:#fff url("../images/sample-map.png") 100% 50% no-repeat; background-size:cover;
}
.map-area .mapArea {
	width:100%; height:100%; background:#fff; background-size:cover;
}

/* layer popup */
.layer-popup {
	display:none; position:absolute; top:300px; left:800px; border-radius:5px; background-color:#fff; box-shadow:0 1px 4px 0 rgba(0,0,0,0.2); z-index:5;
}
.layer-popup.buInfo {
	top:100px; left:50%; width:500px; z-index:2;
}
.cu-modal {
	top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:9999;
}
.cu-modal .layer-popup {
	top:50%; left:50%; width:500px; transform:translate(-50%,-50%);
}
.layer-popup.loInfo {
	top:500px; left:800px; width:280px; z-index:1;
}
.layer-popup .layer-header {
	display:flex; align-items:center; position:relative; height:40px; padding:0 10px; border-radius:5px 5px 0 0; background-color:#3E5577;
}
.layer-popup .layer-header .title {
	font-size:14px; line-height:1.2; color:#fff; font-weight:600;
}
.layer-popup .layer-header .btn-close {
	position:relative; width:20px; height:20px; margin-left:auto; border:0; background-color:transparent; opacity:0.7; transition:all 0.25s;
}
.layer-popup .layer-header .btn-close::before {
	content:""; position:absolute; top:50%; left:0; width:100%; height:1px; background-color:#fff; transform:rotate(45deg);
}
.layer-popup .layer-header .btn-close::after {
	content:""; position:absolute; top:50%; left:0; width:100%; height:1px; background-color:#fff; transform:rotate(-45deg);
}
.layer-popup .layer-header .btn-close:hover{
	opacity:1;
}

.layer-popup.buInfo .layer-body {
	position:relative; max-height:420px; overflow-y:auto;
}
.layer-popup.buInfo .layer-body table thead {
	border-bottom:2px solid #ddd;
}
.layer-popup.buInfo .layer-body th, .layer-popup.buInfo .layer-body td {
	font-size:14px; line-height:1.4; color:#333; font-weight:400; border:1px solid #ddd; padding:7px 10px;
}
.layer-popup.buInfo .layer-body th:first-child, .layer-popup.buInfo .layer-body td:first-child {
	border-left:0;
}
.layer-popup.buInfo .layer-body th:last-child, .layer-popup.buInfo .layer-body td:last-child {
	border-right:0;
}
.layer-popup.buInfo .layer-body th {
	font-weight:600; background-color:#fafafa;
}
.layer-popup.buInfo .layer-body thead th {
	text-align:center; background-color:#f4f4f4;
}
.layer-popup.buInfo .layer-body .row-btns {
	display:flex; align-items:center; justify-content:flex-end; padding:5px;
}
.layer-popup.buInfo .layer-body .row-btns .btn-detailview {
	font-size:13px; line-height:1.2; color:#222; font-weight:400; letter-spacing:-0.5px; padding:5px; border:1px solid #ccc; border-radius:4px; background-color:#f4f4f4; transition:all 0.25s;
}
.layer-popup.buInfo .layer-body .row-btns .btn-detailview:hover {
	color:#258fff;
}

.layer-popup.loInfo .layer-body {
	position:relative; padding:10px 5px;
}
.layer-popup.loInfo .layer-body .item {
	display:flex; align-items:center; position:relative; padding:2px 0;
}
.layer-popup.loInfo .layer-body .item .label {
	width:60px; font-size:14px; line-height:1.2; color:#333; font-weight:600;
}
.layer-popup.loInfo .layer-body .item .contxt {
	font-size:14px; line-height:1.2; color:#333; font-weight:400;
}

.map-legend {
	position:absolute; top:80px; right:70px; z-index:50; display:flex; align-items:flex-start;
}
.map-legend .legend-item {
	position:relative; min-width:80px; border-radius:4px; background-color:#fff; box-shadow:0 1px 4px 0 rgba(0,0,0,0.2); overflow:hidden;
}
.map-legend .legend-item:not(:first-child) {
	margin-left:5px;
}
.map-legend .legend-item .title {
	font-size:13px; line-height:1.2; color:#fff; font-weight:500; text-align:center; padding:8px 0; background-color:#3E5577;
}

.map-legend .legend-item .content .legend_d {
	font-size:13px; line-height:1.2; font-weight:500; text-align:center; padding:8px 0;
}

.map-legend .legend-item .content {
	text-align:center;
}


.circle_chk1_1 {
  background: #FFFF00;
  border: 0.1em solid #0F1C3F;
  border-radius: 50%;  
  height: 0.8em;
  width: 0.8em;
  margin-right:3px;
}

.circle_chk1_2 {
  background: #DBFAF7;
  border: 0.1em solid #0F1C3F;
  border-radius: 50%;  
  height: 0.8em;
  width: 0.8em;
  margin-right:3px;
}

.circle_chk1_3 {
  background: #75C2EE;
  border: 0.1em solid #0F1C3F;
  border-radius: 50%;  
  height: 0.8em;
  width: 0.8em;
  margin-right:3px;
}

.circle_chk1_4 {
  background: #98C96D;
  border: 0.1em solid #0F1C3F;
  border-radius: 50%;  
  height: 0.8em;
  width: 0.8em;
  margin-right:3px;
}


.circle_chk2_1 {
  background: #FF0000;
  border: 0.1em solid #0F1C3F;
  border-radius: 50%;  
  height: 0.8em;
  width: 0.8em;
  margin-right:3px;
}
.circle_chk2_2 {
  background: #FFC000;
  border: 0.1em solid #0F1C3F;
  border-radius: 50%;  
  height: 0.8em;
  width: 0.8em;
  margin-right:3px;
}
.circle_chk2_3 {
  background: #00B050;
  border: 0.1em solid #0F1C3F;
  border-radius: 50%;  
  height: 0.8em;
  width: 0.8em;
  margin-right:3px;
}

.circle_chk3 {
  background: #E49EDD;
  border: 0.1em solid #0F1C3F;
  border-radius: 50%;  
  height: 0.8em;
  width: 0.8em;
  margin-right:3px;
}
.circle_chk4 {
  background: #A6C9EC;
  border: 0.1em solid #0F1C3F;
  border-radius: 50%;  
  height: 0.8em;
  width: 0.8em;
  margin-right:3px;
}
.circle_chk5 {
  background: #FFFFFF;
  border: 0.1em solid #0F1C3F;
  border-radius: 50%;  
  height: 0.8em;
  width: 0.8em;
  margin-right:3px;
}

.circle_chk6 {
  background: #e4cf9e;
  border: 0.1em solid #0F1C3F;
  border-radius: 50%;
  height: 0.8em;
  width: 0.8em;
  margin-right:3px;
}

/* right top */
.right-top{
	position:absolute; top:2px; right:0px; z-index:50;background-color: white;
}


.right-top a {
  color: var(--ol-subtle-foreground-color);
  text-decoration: none;
}

.right-top ul {
  margin: 0;
  padding: 1px .5em;
  color: var(--ol-foreground-color);
  text-shadow: 0 0 2px var(--ol-background-color);
  font-size: 12px;
}

.right-top li {
  display: inline;
  list-style: none;
  color:red;
}

.right-top li:not(:last-child):after {
  content: " ";
}

/*2025- 04 추가 */
#owp-header {align-items: center; justify-content: space-between; }
.button-wrap .btn {
   display: inline-block;
   vertical-align: middle;
   border-radius: 4px;
   box-sizing: border-box;
   text-align: center;
   font-size: 14px;
   margin-right: 4px;
}
.button-wrap .btn-md {
   padding: 0 12px;
   line-height: 32px;
   border: 1px solid;
}
.button-wrap .btn-lg {
   width: 180px;
   padding: 0 12px;
   line-height: 44px;
   border: 1px solid;
}
.button-wrap .btn-full {
   flex: 1;
   line-height: 46px;
}
.button-wrap .btn-basic {
   background: #395bcb;
   color: #fff;
   border-color: #395bcb;
}
.button-wrap .btn-basic:hover {
   background: #2c3e92;
   border-color: #2c3e92;
   color: #fff;
}
.button-wrap .btn-secondary {
   background: #0abbab;
   color: #fff;
   border-color: #0abbab;
}
.button-wrap .btn-secondary:hover {
   color: #fff;
}
.button-wrap .btn-white {
   color: #395bcb;
   border-color: #ccc;
   background: #fff;
}
.button-wrap .btn-gray {
   background: #ebebeb;
   color: #666;
   border-color: #ebebeb;
}
.button-wrap .btn-gray:hover {
   color: #666;
}
.button-wrap .btn-dark {
   background: #333;
   color: #fff;
   border-color: #333;
}
.button-wrap .btn-dark:hover {
   background: #000;
   color: #fff;
   border-color: #000;
}
.button-wrap .btn-line {
   border: none;
   border: 1px solid #fff;
}
.button-wrap .btn-line:hover {
   color: #999;
   background: #f9f9f9;
}

.page-container {
	position: absolute;
	top: 60px; 
	left: 0;
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: calc(100vh - 60px);
	min-block-size: 100vh;
	padding: 30px 0 5rem;
	background: #fff;	
	overflow-y: scroll;
	font-size: 12px;
	z-index: 100;	
}
.page-container  p {
	font-size: 1.1em;
}
.sr-only,
.app-caption {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip-path: inset(50%);
   border: 0;
   clip: rect(0 0 0 0);
}
.d-block {
   display: block;
}

/*=================================================================================
* Flex
=================================================================================*/
.flex {
   display: flex;
   align-items: flex-start;
}

.flex-column {
   flex-direction: column;
}

.flex-wrap {
   flex-wrap: wrap;
}

.align-center {
   align-items: center;
}

.align-end {
   align-items: flex-end;
}

.space-between {
   justify-content: space-between;
}

.space-around {
   justify-content: space-around;
}

.justify-end {
   justify-content: flex-end;
}

.justify-center {
   justify-content: center;
}
/*=================================================================================
* 해상풍력사업 검색 필드 수정
=================================================================================*/
.left-navi .sec-navi .category .grp { background: #f1f1f1; }
.left-navi .sec-navi .category .depth-1.business .arrow {
	transform: rotate(0);
	cursor: pointer;
}
.left-navi .sec-navi .category .depth-1.business.open  .arrow {
	transform:rotate(180deg);
	cursor: pointer; 
}
.left-navi .sec-navi .category .depth-2.first-field {
	flex-direction: column;
	height: auto;
	padding: 8px 17px;
}
.left-navi .sec-navi .category .depth-2.first-field .search {
	display :flex;
	width: 100%;
	margin-bottom: 15px;
}
.left-navi .sec-navi .category .depth-2.first-field .option {
	width: 100%;
}
.left-navi .sec-navi .category .depth-2.first-field .search label { flex: 1; }
.left-navi .sec-navi .category .depth-2.first-field .btn-search {
	width:30px; height:30px; border:0; background:url("../images/icon-btn-search-n.png") 50% 50% no-repeat;
}
.left-navi .sec-navi .category .depth-2.first-field .option {
	position:relative; padding: 0;
	
}
.left-navi .sec-navi .category .depth-2.first-field  .option .progress {
	position:relative; border:1px solid #ddd; border-radius:3px;
}
.left-navi .sec-navi .category .depth-2.first-field  .option .progress .title {
	position:relative; border-radius:3px 3px 0 0; background-color:#f8f8f8; cursor:pointer;
}
.left-navi .sec-navi .category .depth-2.first-field .option .progress .title .inner {
	display:flex; align-items:center; height:34px; padding:0 5px 0 10px;
}
.left-navi .sec-navi .category .depth-2.first-field .option .progress .title .tit {
	font-size:14px; line-height:1.2; color:#222; font-weight:400;
}
.left-navi .sec-navi .category .depth-2.first-field  .option .progress .title .arrow {
	width:24px; height:24px; margin-left:auto; background:url("../images/icon-collapse-arrow-n.png") 50% 50% no-repeat;
}
.left-navi .sec-navi .category .depth-2.first-field  .option .progress .title.open .arrow {
	transform:rotate(-180deg);
}
.left-navi .sec-navi .category .depth-2.first-field .option .progress .subnav {
	position:relative; padding:10px 10px 5px 10px;
}
.left-navi .sec-navi .category .depth-2.first-field .option .progress .subnav > li {
	padding:2px 0;
}
.left-navi .sec-navi .category .depth-2.first-field .option .progress .subnav .row-inline {	
	padding:2px 0 5px 22px;
}

.left-navi .sec-navi .category .depth-2.first-field .option .items {
	position:relative; margin-top:10px; border:1px solid #ddd; border-radius:3px;
}
.left-navi .sec-navi .category .depth-2.first-field .option .items .item {
	display:flex; align-items:center; height:34px;
	
}
.left-navi .sec-navi .category .depth-2.first-field .option .items .item:not(:first-child) {
	border-top:1px solid #ddd;
}
.left-navi .sec-navi .category .depth-2.first-field .option .items .item .label {
	display:flex; align-items:center; width:120px; height:100%; font-size:14px; line-height:1.2; color:#222; font-weight:400; padding-left:10px; border-right:1px solid #ddd; background-color:#f8f8f8;
}
.left-navi .sec-navi .category .depth-2.first-field .option .items .item:first-child .label {
	border-radius:3px 0 0 0;
}
.left-navi .sec-navi .category .depth-2.first-field .option .items .item:last-child .label {
	border-radius:0 0 0 3px;
}
.left-navi .sec-navi .category .depth-2.first-field .option .items .item .form-element {
	flex:1; height:100%;
}
.left-navi .sec-navi .category .depth-2.first-field  .option .items .item .form-element label {
	width:100%; height:100%;
}
.left-navi .sec-navi .category .depth-2.first-field  .option .items .item .form-element select {
	border:0; width:100%; height:100%;
}




/*=================================================================================
* Wrap
=================================================================================*/
.sr-only,
.app-caption {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip-path: inset(50%);
   border: 0;
   clip: rect(0 0 0 0);
}
.d-block {
   display: block;
}

/*=================================================================================
* Flex
=================================================================================*/
.flex {
   display: flex;
   align-items: flex-start;
}

.flex-column {
   flex-direction: column;
}

.flex-wrap {
   flex-wrap: wrap;
}

.align-center {
   align-items: center;
}

.align-end {
   align-items: flex-end;
}

.space-between {
   justify-content: space-between;
}

.space-around {
   justify-content: space-around;
}

.justify-end {
   justify-content: flex-end;
}

.justify-center {
   justify-content: center;
}

/*===============================================================================
* margin padding
=================================================================================*/
.mt5 {
   margin-top: 5px;
}
.mt10 {
   margin-top: 10px;
}
.mt20 {
   margin-top: 20px;
}
.mt30 {
   margin-top: 30px;
}
.mt40 {
   margin-top: 40px;
}
.mt50 {
   margin-top: 50px;
}
.pt10 {
   padding-top: 10px;
}
.pt20 {
   padding-top: 20px;
}
.pt30 {
   padding-top: 30px;
}
.pt40 {
   padding-top: 40px;
}
.pt50 {
   padding-top: 50px;
}
.mb5 {
   margin-bottom: 5px;
}
.mb10 {
   margin-bottom: 10px;
}
.mb20 {
   margin-bottom: 20px;
}
.mb30 {
   margin-bottom: 30px;
}
.mb40 {
   margin-bottom: 40px;
}
.mb50 {
   margin-bottom: 50px;
}
.pb10 {
   padding-bottom: 10px;
}
.pb20 {
   padding-bottom: 20px;
}
.pb30 {
   padding-bottom: 30px;
}
.pb40 {
   padding-bottom: 40px;
}
.pb50 {
   padding-bottom: 50px;
}
.ml5 {
   margin-left: 10px;
}
.mr5 {
   margin-right: 10px;
}
.mr10 {
   margin-right: 10px;
}
.pl20 {
   padding-left: 20px;
}
/*=================================================================================
* text
=================================================================================*/
.title-h2 {
   font-size: 32px;
}
.text-01 {
   font-size: 14px;
}
.text-02 {
   font-size: 16px;
}
.text-03 {
   font-size: 18px;
}
.color-white {
   color: #fff;
}
.color-basic {
   color: #395bcb;
}
.color-secondary {
   color: #0abbab;
}

.color-danger {
   color: #f84c4c;
}
/*=================================================================================
* bg
=================================================================================*/
.bg-basic {
   background: #395bcb;
}
.bg-secondary {
   background: #0abbab;
}
.bg-gray {
   background: #ebebeb;
}
.bg-dark {
   background: #333;
}
.bg-danger {
   background: #f84c4c;
}

/*=================================================================================
* table style
=================================================================================*/
.table-wrap {
   width: 100%;
   padding: 10px 0;
}
.table-wrap table {
   width: 100%;
   table-layout: fixed;
   margin-bottom: 10px;
}
.table-wrap .table-title {
   margin-bottom: 20px;
}
.table-style01 {
   border-top: 2px solid #395bcb;
}
.table-style01 th,
.table-style01 td {
   border: 1px solid #e1e4e9;
   font-size: 14px;
}
.table-style01 th {
   text-align: center;
   padding: 8px 15px;
   font-weight: bold;
}
.table-style01 td {
   padding: 8px 10px;
}
/*  bottom line  */
.table-style02 {
   border-top: 2px solid #395bcb;
}
.table-style02 th,
.table-style02 td {
   padding: 8px 10px;
   font-size: 16px;
   height: 60px;
   border-bottom: 1px solid #e1e4e9;
}
.table-style02 th {
   font-weight: bold;
   text-align: left;
   background: var(--color-lightgray);
}

/* border 0 */
.borderR {
   border-right: 0 !important;
}
.borderL {
   border-left: 0 !important;
}
/*=================================================================================
* Pagination
=================================================================================*/
.pagination a {
   display: block;
   text-align: center;
   line-height: 27px;
   width: 27px;
   height: 27px;
   border-radius: 50%;
   font-size: 1.30px;
   margin: 0 2px;
}
.pagination a.active {
   background: #0abbab;
   color: #fff;
}
.pagination .paging-prev a,
.pagination .paging-next a {
   position: relative;
}
.pagination .paging-prev a:before,
.pagination .paging-prev a:after,
.pagination .paging-next a:before,
.pagination .paging-next a:after {
   position: absolute;
   top: 50%;
   left: 50%;
   display: block;
   clear: both;
   content: "";
   width: 2px;
   height: 6px;
   background: #ebebeb;
}

.pagination .paging-prev a:before {
   transform: translate(-50%, -70%) rotate(45deg);
}
.pagination .paging-prev a:after {
   transform: translate(-50%, -20%) rotate(-45deg);
}
.pagination .paging-next a:before {
   transform: translate(-50%, -70%) rotate(-45deg);
}
.pagination .paging-next a:after {
   transform: translate(-50%, -20%) rotate(45deg);
}
/*=================================================================================
* button style
=================================================================================*/
.button-wrap .btn {
   margin: 0 2px;
}
.button-wrap .btn:first-of-type {
   margin-left: 0;
}
.button-wrap .btn:last-of-type {
   margin-right: 0;
}
.btn {
   display: inline-block;
   vertical-align: middle;
   border-radius: 6px;
   box-sizing: border-box;
   text-align: center;
   font-size: 1.6rem;
}
.btn-sm {
   padding: 0 12px;
   line-height: 28px;
   font-size: 20px;
   border: 1px solid;
}
.btn-md {
   padding: 0 12px;
   line-height: 44px;
   border: 1px solid;
}
.btn-lg {
   width: 180px;
   padding: 0 12px;
   line-height: 44px;
   border: 1px solid;
}
.btn-full {
   flex: 1;
   line-height: 46px;
}
.btn-basic {
   background: #395bcb;
   color: #fff;
   border-color: #395bcb;
}
.btn-basic:hover {
   background: #2c3e92;

   border-color: #2c3e92;
   color: #fff;
}
.btn-secondary {
   background: #0abbab;
   color: #fff;
   border-color: #0abbab;
}
.btn-secondary:hover {
   color: #fff;
}
.btn-white {
   color: #395bcb;
   border-color: #ccc;
   background: #fff;
}
.btn-gray {
   background: #ebebeb;
   color: #666;
   border-color: #ebebeb;
}
.btn-gray:hover {
   color: #666;
}
.btn-dark {
   background: #333;
   color: #fff;
   border-color: #333;
}
.btn-dark:hover {
   background: #000;
   color: #fff;
   border-color: #000;
}
.btn-line {
   border: none;
   border: 1px solid #fff;
}
.btn-line:hover {
   color: #999;
   background: #f9f9f9;
}
/*=================================================================================
* data popup Style
=================================================================================*/
.popup {
   width: 100%;
   height: 100%;
   display: none;
   position: fixed;
   top: 0px;
   left: 0px;
   background: rgba(0, 0, 0, 0.5);
   -webkit-transition: all 1s ease-out;
   transition: all 1s ease-out;
   z-index: 41;
}
.popup.open {
   display: block;
}
/* Inner */
.popup-inner {
   max-width: 700px;
   width: 90%;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   box-shadow: 0px 2px 6px rgba(0, 0, 20px, 0.5);
   border-radius: 5px;
   background: #fff;
   overflow: hidden;
   border: 1px solid #395bcb;
}
.popup-lg .popup-inner {
   max-width: 1100px;
}
.popup-md .popup-inner {
   max-width: 750px;
}
.popup-sm .popup-inner {
   max-width: 650px;
}
/*  popup-header  */
.popup-header {
   position: relative;
   width: 100%;
   height: var(--popup-height);
   background: #00756e;
   padding: 0 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.popup-header .title-h2 {
   font-size: 18px;
   color: #fff;
}
.popup-header .popup-close {
   position: relative;
   transform: translateY(-50%);
}
.popup-header .popup-close:before,
.popup-header .popup-close:after {
   position: absolute;
   top: 50%;
   left: 50%;
   display: block;
   clear: both;
   content: "";
   width: 2px;
   height: 14px;
   border-radius: 5px;
   background: #fff;
}
.popup-header .popup-close:before {
   transform: translate(-50%, -50%) rotate(45deg);
}
.popup-header .popup-close:after {
   transform: translate(-50%, -50%) rotate(-45deg);
}
/*  popup cont  */
.popup-scroll {
   overflow-y: scroll;
   max-height: 600px;
   padding: 0 10px 0 0;
}
.popup-scroll::-webkit-scrollbar {
   background-color: #eee;
   width: 10px;
}
.popup-scroll::-webkit-scrollbar-thumb {
   border: 1px #eee solid;
   border-radius: 2px;
   background: #777;
   -webkit-box-shadow: 0 0 8px #555 inset;
   box-shadow: 0 0 8px #555 inset;
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}
.popup-scroll::-webkit-scrollbar-track {
   -webkit-box-shadow: 0 0 2px #ccc;
   box-shadow: 0 0 2px #ccc;
}
.popup-cont .row {
   padding: 20px 20px 0;
}
.popup-cont .row:last-of-type {
   margin-bottom: 20px;
}
.popup-cont .row .title-h3 {
   height: 40px;
   line-height: 40px;
}
.popup-cont .table-wrap {
   padding: 0;
}
/*  popup footer  */
.popup-footer {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   width: 100%;
   height: var(--popup-height);
   border-top: 1px solid #ebebeb;
   padding: 0 20px;
}
/*  레이어 팝업  */
.pop-layer .pop-container {
   padding: 30px 20px 20px;
}
.pop-layer .button-wrap {
   width: 100%;
   padding-top: 10px;
}
.pop-layer {
   display: none;
   position: absolute;
   top: 50%;
   left: 50%;
   width: 380px;
   height: auto;
   background-color: #fff;
   border-radius: 10px;
   z-index: 10;
}
.pop-layer h2 {
   margin-bottom: 20px;
}
.pop-layer .button-wrap {
   margin-top: 20px;
}
.dim-layer {
   display: none;
   position: fixed;
   _position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 100;
}
.dim-layer .dimBg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #000;
   opacity: 0.5;
   filter: alpha(opacity=50);
}
.dim-layer .pop-layer {
   display: block;
}


/*=================================================================================
* 도움말
=================================================================================*/
.help-popup {
   width: 620px;
}
.help-popup dl {
   display: flex;
   padding: 4px 0;
}
.help-popup dl dt {
   font-weight: bold;
   width: 170px;
   margin-right: 12px;
   padding: 2px 4px;
   background: #f1f1f1;
   border-radius: 4px;
   display: flex;
   justify-content: center;
   align-items: center;
}
.help-popup dl dd {
   flex: 1;
}
.help-popup .table-ul .step02 {
   padding-left: 20px;
}
.help-popup .comm-box {
   padding: 15px;
   border: 1px solid #ebebeb;
}
.help-popup .source dt {
   display: inline-block;
   padding: 2px 12px;
   border-radius: 4px;
   background: #f1f1f1;
   width: auto;
   height: 24px;
}
.help-popup .source dd {
   padding: 2px 0;
} 
/*=================================================================================
* Tab to Select
================================================================================*/
.tab-button-outer {
   display: none;
}
#tab-button li {
   flex: 1;
   height: 50px;
   line-height: 50px;
   text-align: center;
   border: 1px solid #f1f1f1;
   border-bottom-color: #395bcb;
   list-style: none;
}
#tab-button li a {
   display: block;
   width: 100%;
   height: 100%;
   color: #ccc;
}
#tab-button li.is-active {
   background: #395bcb;
   border-color: #395bcb;
}
#tab-button li.is-active a {
   color: #fff;
   font-weight: bold;
}
.tab-contents {
   padding: 20px 10px;
}
.pop-conts .tab-contents {
   max-height: 350px;
   overflow-y: auto;
}
#tab-select {
   width: 100%;
   margin-bottom: 30px;
}

.title-h2 {
   font-size: 32px;
}
.text-01 {
   font-size:14px;
}
.text-02 {
   font-size: 16px;
}
.text-03 {
   font-size: 18px;
}
.color-white {
   color: #fff;
}
.color-basic {
   color: #395bcb;
}
.color-secondary {
   color: #0abbab;
}

.color-danger {
   color: #f84c4c;
}
/*=================================================================================
* 로그인
=================================================================================*/
.login-wrap,
.register-wrap {
   padding: 20px;
}
.login-form,
.register-form {
   width: 100%;
   max-width: 600px;
   margin: 0 auto;
}
.login-form .form-group .form-control {
   width: 100%;
}
.login-form .button-wrap {
   width: 100%;
}
.login-form .user-help a {
   display: block;
   margin-right: 5px;
   padding-right: 5px;
}
.login-form .user-help a:hover {
   text-decoration: underline;
}
.form-title {
   border-bottom: 2px solid #395bcb;
}
/*=================================================================================
* media Query
=================================================================================*/
@media screen and (min-width: 640px) {
   .tab-button-outer {
      display: block;
   }
   .tab-select-outer {
      display: none;
   }
}
@media (max-width: 820px) {
   .pop-layer.help-popup {
      width: 95%;
   }
}
@media (max-width: 480px) {
	#owp-header { padding: 0 12px; }
 	#owp-header .logo { flex-direction: column; align-items: flex-start; }
	#owp-header .logo::before { width: 110px; height: 20px; margin-bottom: 4px; }
	#owp-header .logo .serviceName { margin-left: 0; }
	.lnb-group { flex-direction: column; align-items: flex-end;}
	.lnb-group .text-01 { margin-right: 0!important; margin-bottom: 4px; font-size: 12px; } 
	   .lnb-group.button-wrap {
      flex: 1;
      justify-content: flex-end;
   }
   .lnb-group .btn {
      width: 32px;
      height: 32px;
      text-indent: -9999em;
      text-align: center;
      padding: 0;
      line-height: 32px;
   }
   .lnb-group .btn.btn-join {
      background: var(--color-basic) url(/images/icon-add.png) center/24px no-repeat;
   }
   .lnb-group .btn.btn-login {
      background: var(--color-basic) url(/images/icon-login.png) center/24px no-repeat;
      border-color: var(--color-basic);
   }
   .lnb-group .btn.btn-logout {
      background: var(--color-basic) url(/images/icon-logout.png) center/24px no-repeat;
   }
   .lnb-group .btn.btn-map {
      background: var(--color-basic) url(/images/icon-map.png) center/24px no-repeat;
   }
   .lnb-group .btn.btn-help {
      background: var(--color-secondary) url(/images/icon-question.png) center/24px no-repeat;
   }
   .lnb-group .btn.btn-modi {
      background: var(--color-basic) url(/images/icon-edit.png) center/24px no-repeat;
   }
   .lnb-group .btn.btn-admin {
      background: var(--color-dark) url(/images/icon-lock.png) center/24px no-repeat;
      border-color: var(--color-dark);
   }
   .lnb-group .btn.btn-back {
      background: var(--color-dark) url(/images/icon-arrow-left.png) center/24px no-repeat;
      border-color: var(--color-dark);
   }
   .button-wrap {
      width: 100%;
   }   
   .btn-lg {
      width: 48%;
   }  
   .pop-layer {
      width: 280px;
   }
   .right-top {
   		top: 0;
   }
}