@charset "utf-8";

/* vue 렌더링 될 동안 감추기 */
[v-cloak] {
  display: none;
}

/* 데이터 상세페이지 접고 펼치기 */
.vd_depth02.collapsible > .vd_col{
	cursor: pointer; 
}

.vd_depth02.collapsible .vd_col.collapsed span {
	background-image: url(../img/background/view_tbl_a02.png);
	font-weight:bold;
}

.vd_depth02.collapsible .vd_col.collapsed {
  border-bottom-width: 3px;
  border-color: lightskyblue;
  border-bottom-style: dashed;
  padding-bottom: 2px; /* border 두께로 padding 을 줄임 */
}

.vd_depth02.collapsible .vd_col.collapsed :after {
	content: "……";
	padding-left: 1em;
	color: gray;
}

/* thumbmail preview */
.vd_col .media {
	margin: 0 0 10px 226px;
}
.media-left, .media-right, .media-body {
	line-height: 28px;
	padding-left: 10px;
	font-size: 13px;
}
.preview-wrap {
	border: 1px solid #ddd;
	border-radius: 4px;
	-webkit-transition: border .2s ease-in-out;
	-o-transition: border .2s ease-in-out;
	transition: border .2s ease-in-out;
	padding: 3px;
	margin-right: 10px;
}
.preview {
	position: relative;
	width: 80px;
	/* height: 50px; */
	overflow: hidden;
}
.preview img {
	width: 100%;
}

/* material icons */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/material-icons.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  width:1em;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: text-top; /* */
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.mgt_15 { margin-top:15px !important;}

.modal-body-scroll {
	height:70vh;
	overflow-y:scroll;
}
.modal-body {
	color: #444444;
}
.relative {
	position:relative;
}
.form-collection-search {
	position:absolute;
	width: 70%;
	right: 1em;
	top: 10px;
}
#collection-select-modal li {
	display:block;
	overflow:hidden;
	white-space:nowrap;
	/* text-overflow:ellipsis; */ 
}
.inline-block-label {
	display:inline-block;
	padding:1px 2px;
	margin:1px;
}
.clickable {
	cursor:pointer;
}


/* 개인정보처리방침 */
.policy {
	margin: auto;
	width: 90%;
	padding-left:2em;
	line-height:120%;
}

.policy h3 {
	margin-top:3em;
	color:darkblue;
	margin-left: -2em;
}

.policy h4 {
	color:darkcyan;
	margin-left: -2em;
	margin-top: 1em;
}

.policy h5 {
	margin-left: -2em;
}

.dmp-project {
	color: olivedrab;
}

.row_list .list_tbox span.dmp-project {
	color: olivedrab;
}

/* 컬렉션 명 */
.collection-title {
	color: darkcyan;
}

/* 첫화면 */
.f_l_box a {
	overflow:visible;
}

.f_l_box a.collection-title {
	color: darkcyan;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	font-size:96%;
	height:auto;
}

.row_list .list_tbox a.collection-title {
	color: darkcyan;
}

.f_l_box a .material-icons {
	opacity: 0.2;
	margin-right: 3px;
}
.f_l_box a:hover .material-icons {
	opacity: 1;
}
.f_l_box a.data-title {
	padding-left: 15px;
}
.f_l_box a.data-title i.material-icons {
	margin-left: -17px;
}

.data-submitter {
	color:slategrey;
}

.wkt-geo {
	display:block;
	width:100%;
	height: 300px;	
}

.panel-body .preview-text {
	font-family: monospace;
	/* font-size:90%; */
	line-height:110%;
	height:70vh;
	overflow:auto;
}

.panel-body p {
	margin-bottom: 5px;
}

/* 하이라이팅 */
.row_list .list_tbox em {
	color: darkred;
	font-weight: bold;
	font-style: normal;
}

.cc_under_box ul li {
	position:relative;
}
.cc_under_box a.collapse-button {
	position:absolute;
	top: 0;
	left: 0;
	padding: 0;
	width: 24px;
	height: 24px;
	background: none;
	font-size: 15px;
	margin-bottom: 0;
	text-align:center;
}
.cc_under_box li a.collapse-button {
	display:none;
}
.cc_under_box li a.collapse-button.collapsed {
	display:block;
}
.cc_under_box li:hover a.collapse-button {
	display:block;
}
a.collapse-button .on-nocollapsed {
	display:none;
}
a.collapse-button .on-collapsed {
	display:inline;
}
a.collapse-button.collapsed .on-nocollapsed {
	display:inline;
}
a.collapse-button.collapsed .on-collapsed {
	display:none;
}
.cc_under_box ul li p a.collapse-button:hover {
	color: blue;
	font-weight:bold;
}

/* SIP */

.form-control {
	box-shadow:none;
}

/* .write_tbl tr > th:nth-child(1) { */
/* 	width: 18%; */
/* } */

.write_tbl.metadata-table th .repeatable-index {
  position: absolute; right:5px; bottom: 2px;
  margin-left:1em;
  font-size:80%;
  color:darkgrey;
}
.write_tbl.metadata-table th th_b {
	padding: 8px 10px;
}
.write_tbl.metadata-table td {
	padding: 3px 3px;
}
.write_tbl.metadata-table td .form-control {
	padding: 3px 8px;
}
.write_tbl.metadata-table .repeat-control .btn-default { background-color: #FFFFCC; }
.write_tbl.metadata-table .row_tr td { padding-right: 6px; }
.write_tbl.metadata-table .modal-select {
  cursor:pointer;
  padding: 6px 8px;
  border: 1px solid #ccc;
  background-color:aliceblue;
  border-radius: 4px;
  line-height:1.4em;
}

.error-content {
	width: 70%;
	margin: auto;
	margin-top:40px;
	text-align: center;
}

fieldset.fieldset-inline {
    display: inline-block;
}
fieldset.fieldset-box {
    border: 1px solid #b0c4de; /* lightsteelblue */
    padding: 2px 14px;
}
td fieldset.fieldset-box {
	margin:-8px 0;
}
fieldset.fieldset-info{
    background-color: lightgoldenrodyellow;
}
.fieldset-inline input.form-inline {
	  line-height:inherit;
}

.vb_search_box .vb_search_bt { border:none; }

/* modal 오류? */
.modal-backdrop {
  z-index: 1010;
}
/* IE 11 에서 */
.modal-dialog {
	z-index: 2000;
}

/* modal center https://codepen.io/anon/pen/zGBpNq */
@media only screen and (min-width: 768px) {
  .modal {
    text-align: center;
  }
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
  .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
  }
  .modal.fade .modal-dialog {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .modal.fade.in .modal-dialog {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    /* -webkit-transform: translate3d(0, -300px, 0); */
    /* transform: translate3d(0, -300px, 0); */
    opacity: 1;
  }
}

.table-sm { font-size:90%; }
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 3px;
}

.btn-x { min-width:80px; padding-top: 3px; padding-bottom:3px; }

/* panel in modal */
.modal-content > .panel { margin-bottom:0; }

.jumbo {
	display:block;
	padding:1em 2em 1.5em;
	margin-bottom:2em;
	border:0;
}
a.jumbo {
  text-decoration:none;	
}
.jumbo p {
	text-align:center;
  margin-bottom:2em;	
  min-height:4.5em;
}

td > .sample-mask {
	display:block;
	padding-left:1em;
	height:1em;
	background-color:#FFEEFF;
}

table .progress {
	margin-bottom:0;
}

.panel-heading .progress {
	margin-bottom:0;
	height:1em;
}

#form-code-list {
	padding:1em 1em;
	min-height:20em;
}
/* bootstrap code */
span.code-code {
	width: 10%;
	padding: 3px 6px;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 4px;
}
#form-code-list .form-group {
	margin-bottom:4px;
	padding-bottom:8px;
}
#form-code-list .pretty {
	display:block;
	border:1px solid silvergrey;
}

.input-ghost {
	visibility:hidden;
	height:0;
}

.list-group.file-list { margin: 4px; list-style-type:none; }
.list-item.file-item { margin: 0; width:50%; float:left; position:relative; }
.list-item.file-item .tools {
	top:0.4em; right: 1em;
	position:absolute;
	display:none;
}
.list-item.file-item:hover .tools {
	display:block;
}
.file-item.uploading {
  background-color: #f9f2f4;
}
.file-item.uploading .btn {
	display:none;
}
.file-item .media {
	margin:0; padding: 4px;
	border:1px solid white;
}
.file-item:hover .media { border:1px solid lightgray; }
.file-item .media-heading {
	margin-top:6px;
	font-size:14px;
	word-break:break-all;
}
.file-item .media-left {
}
.file-item .media-left a {
	display:block;
  width:90px;
  height:60px;
  max-height:60px;
  overflow:hidden;	
}
.file-item .media-object {
	max-width:90px;
}
.file-item .media-object.loading,
.file-item .media-object.has-error {
	width:90px;
	height:60px;
}
.file-item .file-size { display:block; }
.file-container.has-file .file-empty { display:none; }
.file-empty-info { min-height: 70px; border:1px solid #e3e3e3;  text-align: center; padding: 15px 0 0 0;}
.file-empty-info span { display: inline-block; padding: 0 0 0 50px;  background: url(../img/background/no_uploadfile_icon.png) no-repeat 0  50%;  line-height: 40px; font-weight: bold; color: #777; font-size: 13px;  }

.vh70 {
	height: 70vh;
	max-height: 70vh;
	overflow-y: auto;
}
.vh60 {
	height: 60vh;
	max-height: 60vh;
	overflow-y: auto;
}
.vh50 {
	height: 50vh;
	max-height: 50vh;
	overflow-y: auto;
}
.modal-body.vh70 {
	
}
.text-ellipsis {
	overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selectable-primary {
	cursor:pointer;
}
.selectable-primary:hover {
	background-color: #d9edf7 !important;
}
.selectable-warning {
	cursor:not-allowed;
}
.selectable-warning {
	background-color: lightgoldenrodyellow;
}

.pretty.no-label { margin-right:0; }
.pretty-help { 
	font-size: 86%;
  margin: 2px 0 0.5em 2em;
  /* margin-left: 2em; */
  word-break: break-all;
  white-space: normal;
  color: #31708f;
  /* max-height: 3.1em; */
}

.contents_wrap .jumbotron {
	padding:50px 50px;
}

#store-files {
	min-height: 480px;
}

ul.indent > li > ul {
	margin-left:1.5em;
}
.indent1 {
	margin-left:1em;
}
.indent2 {
	margin-left:2em;
}
span.indent {
  display:inline-block;	
}
#panel-select-collection li {
	display:block;
	overflow:hidden;
	white-space:nowrap;
	/* text-overflow:ellipsis; */
}

.required_check {background:rgb(255, 210, 210) !important;}

.metadata-table.hide-help .help-block {
	display:none;
}
.metadata-table .help-block { 
	font-size: 12px;
  margin-bottom: 3px;
  margin-top: 2px;
  padding-left: 7px;
  color: mediumslateblue;
  white-space: pre-line;
}
.toggle-collapse {
	display:inline-block;
	width:1em;
	cursor: pointer;
}
.toggle-collapse.off .collapse-on {
	display: none;
}
.toggle-collapse.on .collapse-off {
	display: none;
}
.text-gray {
	color:lightgray;
}
.file-table .form-group {
	margin-bottom:5px;
}

dl.dl-text-left dt {
	text-align:left;
}
.table-form-control .form-control {
	height:auto;
}
.table-header {
	margin-bottom:0;
}
.table.table-form-control>tbody>tr>td {
	padding:0;
}

caption { display: none; }

/* CSS로만 트리 표현 */
/* @see https://gist.github.com/dylancwood/7368914 */
/* @see https://jsfiddle.net/tomaskafka/ur1hvzy3/ */
p.tree, 
ul.tree, 
ul.tree ul {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height:160%;
}

ul.tree ul {
	margin-left: 0.6em;
}

ul.tree li {
	margin-left: 0.5em;
	border-left: thin solid #000;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

ul.tree li:last-child {
	border-left: none;
}

ul.tree li:before {
	width: 0.6em;
	height: 0.8em;
	/* margin-right: 0.1em; */
	vertical-align: top;
	border-bottom: thin solid #000;
	content: "";
	display: inline-block;
}

ul.tree li:last-child:before {
	border-left: thin solid #000;
}

ul.tree b {
	font-weight:normal;
	color:darkblue;
	margin-left: 0.5em;
	margin-right: 1em;
}

ul.root a.btn-collapse {
  color: lightgray;	
}
ul.root li:hover > a.btn-collapse {
	color: lightblue;
}
ul.root a.btn-collapse:hover {
	color: blue !important;
}
ul.root a.btn-collapse .collapse-out {
	display:none;
}
ul.root a.btn-collapse.collapsed .collapse-in {
	display:none;
}
ul.root a.btn-collapse.collapsed .collapse-out {
	display: inline-block;
	color: darkblue;
}

/* https://www.w3schools.com/howto/howto_css_loader.asp */
.loader {
  width: 120px;
  height: 120px;
  background: url(../img/common/loading.png) no-repeat center center;
}

.modal-content > .loader {
	margin:30% auto;
}
.modal-content > .alert {
  min-height: 40vh;
  padding: 5em 4em;
  text-align: center;
  margin:0;
}

/* 메타데이터 추출 팝업 */
select#extract-texts-files {
  width: 400px;
  max-width: 400px;
  margin-top: -5px;
}
.extracted-list .extracted-tools {
	display:none;
}
.extracted-list .extracted-data {
	min-height: 23px;
  position: relative;
  cursor: pointer;
  padding-left: 1em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
} 
.extracted-list dd.extracted-data:hover {
	background-color:lightblue;
}
.extracted-list .extracted-data:hover .extracted-tools {
	display:block;
	position:absolute;
	top: 0;
	right: 1em;
}
#extract-texts-content { margin-top: -15px; }
#extract-texts-content h5.metadata-source {
	color: darksalmon;
  border-bottom: 1px dotted darksalmon;
  padding: 4px 0 2px 7px;
  background-color:#f8f8f8;
  margin-bottom: 0;
}

/* 파일 업로드 */
.file-transfer-pool .file-size {
	font-size:80%; 
	margin-left:2em; 
	color: darkblue;
}
.file-transfer-pool {
	height:50vh;
	overflow:auto;
}
.file-transfer-pool .progress {
	margin-bottom:0;
}

/* 내저장소 */
#store-files .folder-name,
#store-files .go-parent {
	color: darkorange; 
	font-weight:bold;
}

.wkt-geo-content {
  display: block;
  width: 100%;
  max-height: 36px;
  overflow: auto;
  font-size: 80%;
  margin: 0;
  margin-bottom: 3px;
  color: darkolivegreen;
}

/* 데이터 소트 */
.tbl_type thead th.sort {
	padding: 0;
}

th.sort a {
	display: block;
	line-height: 32px;
	color:#284984;
}

th.sort a:after {
	content: ' ';
	display: inline-block;
	width: 16px;
	height: 16px; vertical-align : text-bottom;
	background: url(../img/background/sort_bg01.png) no-repeat right 50%;
	vertical-align: text-bottom;
}

th.sort a:hover {
	background-color: lightgoldenrodyellow;
}

th.sort a.order-asc:after {
	background: url(../img/background/sort_bg03.png) no-repeat right 50%;
}

th.sort a.order-desc:after {
	background: url(../img/background/sort_bg02.png) no-repeat right 50%;
}

/* 목록, 총 ()건의 데이터가 있습니다. */
.top_help_box {
	margin-bottom: 20px;
}

.list-header {
	margin-bottom:6px;
}

.list-header .data-summary {
	padding-left:18px;
  background: url(../img/background/list_arrow01.png) no-repeat left center;
  margin:10px 0 0 0;
} 

.data-summary strong {  color: #0579e6; } /* 데이터 건수 */

.glyphicon-lock.encrypted {
	color:darkgreen;
	margin-right:4px;
}

.modal-body .preview-text {
	font-family: monospace;
	/* font-size:90%; */
	line-height:110%;
	height:70vh;
	overflow:auto;
}

/* 제출 화면 컬렉션 트리 */
#submit-new ul.root li {
	font-size:14px;
}

#submit-new ul.root {
	color: gray;
	list-style:none;
}

/* 제출 가능한 컬렉션에 링크됨 */
#submit-new a.collection {
	color: blue;
}

#submit-new a.collection:hover {
	background-color: lightgreen;
}

#submit-new ul.root > li {
	font-size:14px;
	line-height: 24px;
}

/* 스키마 선택 */
.option {
	cursor:pointer;
}
.panel.option .panel-body {
	display:none;
}
.panel.option.panel-expanded .panel-body {
	display:block;
}
.option .option-ok {
  display:none;
}
.panel.option.panel-primary .option-ok {
	display:initial;
	color:greenyellow;
}
.list-group-files {
	
}
.list-group-files > .file-item {
	font-size: 12px;
	margin:0; padding:0;
}

.btn-other-link {
	background-color: #fff;
	border:1px dotted lightskyblue;
}
.btn-other-link:hover {
	border:1px solid skyblue;
	background-color:lightskyblue;
	color:white;
}

/* 메인 카운트 */
.info-box {
	display:block;
	border-radius: 2px;
	box-shadow: 4px 3px 3px -1px rgb(0 0 0/ 20%);
	-webkit-box-shadow: 4px 3px 3px -1px rgb(0 0 0/ 20%);
	-moz-box-shadow: 4px 3px 3px -1px rgb(0 0 0/ 20%);
	height: 80px;
	background-color: #fff;
	position: relative;
	overflow: hidden;
	margin-bottom: 30px;
	width: 90%;
	margin: auto;
}

.info-box .icon {
	position: absolute;
	right: 10px;
	text-align: center;
}

.info-box .content {
	display: inline-block;
	padding: 7px 20px;
}

.info-box .content .text {
	/* font-size: 13px; */
	margin-top: 11px;
}

.info-box .content .number {
	font-weight: bold;
	font-size: 26px;
	color:black;
}

.info-box .icon .material-icons {
	color: #00ced1;
	font-size: 40px;
	line-height: 80px;
}

.header_inner h1 a {
	background-image: url(../static/logo.png);
	background-size: 100%;
	background-position: center;
}
.batch-area {
	position: relative;
	background: lightcyan;
	border: 1px solid #c2e1f5;
	padding: 0.4em 1em;
	line-height: 30px;
}
.batch-area:after, .batch-area:before {
	top: 100%;
	left: 34px;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.batch-area:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: lightcyan;
	border-width: 6px;
	margin-left: -6px;
}
.batch-area:before {
	border-color: rgba(194, 225, 245, 0);
	border-top-color: #c2e1f5;
	border-width: 7px;
	margin-left: -7px;
}
.h_pointer:hover {
	cursor: pointer !important;
	text-decoration: none;
}
.green {
	color: green;	
}
.red {
	color: orangered;
}
.grey {
	color: grey;
}
.steelblue {
	color: steelblue;
}
.tbl_type tbody tr.odd{
    background: #f9f9f9;
}
.tbl_type tbody tr.even{
    background: #fff;
}
tr.small-row td{
	font-size: 0.8em;
}
.url {
	color: royalblue;
	font-weight: bold;
}
.fit {
	width: 100%;
	height: 100%;
}
.main_search_box input {
	outline: none;
}
.main_search_box:focus-within {
	outline: 3.5px solid #444;
}

/* 버튼이 잘 안보인다는 요청 */
.close {
	opacity:0.7;
}
.panel-primary .close {
  color: white;
}

/* IE 화면 깨짐 수정 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	/* IE에서 이상한 한자 나오던 오류 수정*/
	 .main_quick_box ul li.data-submit a:after { 
	 	content: none;
	 }
	 /* 아이콘 깨지던 현상 수정 */ 
	 i.material-icons {
	 	display: none;
	 }
	 /* 백그라운드 그림에 글씨가 가리던 현상 수정*/
	 .contents_wrap{
	 	background:white;
	 }
	 /* 로딩하는 동안 serv 사진 x표시 감추게 수정 */
	 .file-item .media-object.loading {
		display: none;
	 }
	
	.main_quick_box li { background-color: #4e8dda; opacity: 0.9; }
	.main_quick_box li:hover { opacity: 1.0; }
}

.tag_int_box { /*border:1px solid #cacaca; */padding: 4px;}
.tag_text_line { display: inline;border:1px solid #3165c1;   height: 20px;    position: relative; padding: 2px 25px 3px 8px; border-radius: 22px; margin-right: 5px; transition: all 0.3s ease;   color: #000}
.tag_text_line:hover  { box-shadow: -2px 2px 3px rgba(72,72,72,0.5) }
.tag_text_line em { color: #999; display: inline-block; /*vertical-align: middle;*/ }
.tag_text_line a{  display: block; position: absolute; right:3px; top:2px; width: 20px; height: 20px; text-indent: -9999px; overflow: hidden;  background: url(../img/background/tag_close_bt.png) no-repeat 50% 50%; opacity: 0.5; }
.tag_text_line a:hover{ opacity: 1; }

/* .tag_int_box .form-control { background-color: aliceblue; } */
.tag_int_box .form-control { width: 140px; display: inline-block; background-color: aliceblue; }

.p-top-20 {
	padding-top: 20px;
}


.thumbnail {
	width:30px;
	top:-50px; 
	left:-35px; 
	margin-bottom:0px;
	display:inline-block; 
	z-index:999; 
	cursor: pointer; 
	-webkit-transition-property: all; 
	-webkit-transition-duration: 0.3s; 
	-webkit-transition-timing-function: ease;
	transition: 0.5s all ease-in-out; 
} 

.thumbnail:hover { 
	width: 150px;
}

.view_modal_container {
    /* display: inline-flex; */
}

.layer_box {
	position: absolute;
	padding: 10px;
	z-index: 2000;
	right: 10px;
	top: 80px;
	background: #3e4e53;
	border-radius: 10px;
	min-width: 260px; /* 최소 너비 보장 */
}
.layer_box .layer_tree {
	/* WMS 트리 컨테이너 */
	min-width: 260px;
	width: 360px; /* 초기 너비 */
	max-width: 100%; /* 부모 너비 초과 방지 */
	max-height: 480px;
	overflow: auto;
	font-size: 13px;
	color: #fff;
}
.layer_box .tree-g1 {
	margin: 6px 0 10px 0;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid #0b314f;
	background: #33424a; /* 기존 톤과 유사한 어두운 배경 */
}
.layer_box .g1-head {
	font-weight: bold;
	color: #fff;
	margin-bottom: 6px;
	border-bottom: 1px solid rgb(63,72,84);
	padding-bottom: 4px;
}
.layer_box .g1-head .toggle-icon,
.layer_box .g2-head .toggle-icon {
	margin-right: 6px;
	color: #9fc3d1;
}
.layer_box .tree-g2 {
	margin-left: 8px;
	padding-left: 10px;
	border-left: 1px dashed #47616c;
	margin-bottom: 6px;
}
.layer_box .g2-head {
	font-weight: bold;
	color: #d5e6ee;
	margin: 4px 0;
}
.layer_box .g1-body,
.layer_box .g2-body {
	margin-top: 6px;
}
.layer_box .tree-item {
	margin: 2px 0 2px 20px;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.layer_box .tree-item .wms-item-head{
	display: flex;
	flex-direction: row;
}

.layer_box .tree-item input[type="checkbox"] {
	vertical-align: middle;
	margin-right: 6px;
	flex: 0 0 auto;
	margin-top: -5px;
}
.layer_box .tree-item label {
	display: inline-block;
	max-width: 300px;
	flex: 1 1 auto;
	color: #eef6f9;
	font-weight: normal;
	line-height: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* WMS item 구조와 정렬 보정 */
.layer_box .wms-item {
	margin: 6px 0;
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid #0b314f;
	background: #33424a;
}
.layer_box .wms-item-head {
	display: flex;
	align-items: center;
	gap: 6px;
}
.layer_box .wms-item-head input[type="checkbox"] {
	flex: 0 0 auto;
}
.layer_box .wms-item-head label {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.layer_box .wms-item .slider-container {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
	/* 체크박스 + 간격만큼 들여쓰기하여 라벨 시작선 정렬 */
	padding-left: 26px;
}
.layer_box .wms-item .slider-container label {
	width: 130px;
	min-width: 130px;
	font-size: 12px;
	color: #cfe6ee;
}
.layer_box .wms-item .slider-container .slider {
	flex: 1 1 auto;
}
.layer_box .tree-item:hover label {
	color: #ffffff;
}
.layer_box .tree-item:hover {
	background: rgba(255,255,255,0.06);
	border-radius: 4px;
}
.layer_box > ul > li {
	margin: 5px 0 5px 0;
	padding: 10px;
	border-radius: 10px;
	border: #0b314f 1px solid;
	color: #fff;
}
.layer_box > ul > li > .info_box > input {
	margin-right: 5px;
}

.layer_box .under_line {
	border-top: 1px solid rgb(63, 72, 84);
	margin: 5px 0;
}
.layer_box .slider-box {
	display: inline-flex;
}
.opacity-text {
	padding-left: 5px;
}


.legend_box {
	position: absolute;
	padding: 10px;
	z-index: 2000;
	left: 10px;
	top: 80px;
	background: #2c677a;
	border-radius: 10px;
	opacity: 0.9;
	overflow: auto;
	max-height: 500px;
}
.legend_box .commodity-title {
	font-size: 15px;
	font-weight: bold;
	color: #fff;
	padding: 10px 0 8px 0;
	border-bottom: 2px solid rgba(255, 255, 255, 0.3);
	margin-bottom: 10px;
	text-align: center;
	letter-spacing: 0.5px;
}

.legend_box .layer-item {
	padding: 3px;
	color: #fff;
	display: flex;
}

/* 범례 체크박스 여백 및 정렬 */
.legend_box .layer-item input.commodity-filter {
	margin: -2px 4px 0 0;
}

.legend_box .layer-item .circle {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: 8px;
	transition: background-color 0.3s;
	margin-top: 5px;
}

.circle_01{
	border: 2px solid #FF5733;
	background-color: #FF5733;
}
.circle_02{
	border: 2px solid #33A1FF;
	background-color: #33A1FF;
}
.circle_03{
	border: 2px solid #FFD700;
	background-color: #FFD700;
}
.circle_04{
	border: 2px solid #c894f7;
	background-color: #c894f7;
}
.circle_05{
	border: 2px solid #00FA9A;
	background-color: #00FA9A;
}
.circle_06{
	border: 2px solid #4CAF50;
	background-color: #4CAF50;
}
.circle_07{
	border: 2px solid #C71585;
	background-color: #C71585;
}
.circle_08{
	border: 2px solid #FF4500;
	background-color: #FF4500;
}
.circle_09{
	border: 2px solid #4682B4;
	background-color: #4682B4;
}

.map_box{
	display: flex
}
.map {
	flex-grow: 1;
	width: 1020px;
	height: 610px;
}

.login_popup .link{
	color: #000 !important;
	margin: 0  !important;
	display: block !important;
	padding: 0 !important;
	background: unset !important;
}

.property_wrap .property_title{
	font-size: 16px;
	font-weight: bold;
	padding: 5px;
	background: #ebebeb;
}

.property_wrap .property_content ul li{
	list-style: none;
	margin: 5px;
	font-size: 14px;
}
.property_wrap .property_content ul li div{
	display: inline-block;
}
.p_title {
	width: 20%;
	padding: 5px;
	font-weight: bold;
}

.p_value{
	padding: 5px;
	width: 80%;
}
.modal-content{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
/* interactive map 모달.
   modal-content 만 1325px 로 키우면 부모 modal-dialog(부트스트랩 기본 600px) 밖으로 넘쳐
   내부에 절대배치된 .layer_box/.legend_box 가 모달 경계를 벗어나 본문 위(검색 지도 등)에 그려지고,
   화면이 좁으면 왼쪽 .legend_box 가 뷰포트 밖으로 밀려난다. dialog 와 폭을 맞춘다. */
.asean_modal_dialog {
	width: 1325px;
	max-width: calc(100vw - 20px);
}

.asean_modal_box {
	width: 100% !important;
}

/* layer/legend 박스는 interactive map(모달) 안에서만 노출한다.
   map.js 가 .show() 로 인라인 display 를 강제하거나 다른 지도 위에 박스를 만드는 경로가 있어
   !important 로 고정한다(모달 안 규칙이 id 선택자라 우선순위가 높아 정상 노출된다). */
.layer_box,
.legend_box {
	display: none !important;
}

#modal_box .layer_box,
#modal_box .legend_box {
	display: block !important;
}

.slider-container {
	display: flex;
}
.slider-container label {
	margin-right: 10px;
	font-size: 10px;
	font-weight: normal;
}
.slider-container .slider {
	width: 60%;
}
.ccop_link a {
	display: inline-block !important;
}

.akcf_logo {
	width: 170px;
	margin-bottom: 5px;
	margin-left: 10px;
}

.footer_inner a {
	display: inline-block !important;
}

.gm-style-iw-chr{
	display: none;
}

.gm-style .gm-style-iw-d{
	margin-top: 7px;
}

.batch_dupl_wrap{
	border: 1px solid #cb0b0b;
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 10px;
	background: #e83737;
	font-weight: bold;
	font-size: 14px;
}
.batch_dupl_wrap .batch_dupl_comment ul{
	list-style: none;
	display: block;
	position: relative;
	padding: 0 0 10px 0;
	border-bottom: 1px dashed #ccc;
	margin-bottom: 20px;
}

.batch_dupl_wrap .batch_dupl_comment ul li{
	position: relative;
	margin-bottom: 3px;
	padding-left: 17px;
	/*background: url(../img/background/mng/sp_icon.png) 0px -98px no-repeat;*/
	color: #fff;
}
.batch_dupl_wrap .batch_dupl_btn{
	text-align: right;
}

.fl_right {
	text-align: right;
}

.batch-area .inst_title{
	font-weight: bold;
	font-size: 14px;
	text-align: left;
}

.replace_data_wrap{
	margin-top: 10px;
	margin-left: 30px;
}

.mgt_70 {
	margin-top: 70px;
}

.qr_info{
	text-align: center;
	font-weight: bold;
	color: #4293b7;
}

.main_asean_bt a{
	width: 148px !important;
}

.ml_full_box {
	width: 100%;
	position: relative;
}

/* ASEAN Interactive Map - Tabs */
.tabs-header {
	display:flex;
	margin-bottom:6px;
}

.tab-item {
	padding: 6px 10px;
	border-radius: 4px;
	background: #fff;
	color: #2c3e50;
	border-color: #2c3e50;
}
.tab-item input {
	margin: 0;
}
.tab-item.is-active {
	background: #2a84dd;
	color: #fff;
}

.tab-btn {
    background: #fff;
    color: #2c3e50;
    border: none;
}
.tab-item.is-active .tab-btn {
    background: #2a84dd;
    color: #fff;
}

.wms-label{
	margin-left:6px;
	color:#337ae1;
	cursor:pointer;
	text-decoration:underline;
}