.dropdown-button {
    background-color: transparent; /* 배경 투명 */
    padding: 8px;
    font-size: 15px;
    border: none;
    color: white; /* 글자색 하얀색 */
    text-align: right; /* 버튼 내부의 텍스트를 오른쪽 정렬 */
}

.dropdown {
    position: absolute; /* 절대 위치 */
    right: 0; /* 화면의 오른쪽 끝에 위치 */
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: transparent; /* 배경 투명 */
    min-width: 75px;
    padding: 5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    right: 0; /* 드롭다운 내용을 오른쪽에 정렬 */
    text-align: right; /* 드롭다운 내용의 텍스트를 오른쪽 정렬 */
}

.dropdown-content a {
    color: white; /* 드롭다운 항목의 글자색 하얀색 */
    padding: 8px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover { 
    background-color: #CD853F; 
}

.dropdown:hover .dropdown-content { 
    display: block; 
}

.dropdown:hover .dropdown-button { 
    background-color: transparent; 
}

.rounded-text {
    background-color: green;  /* 배경색 */
    color: white;             /* 글자색 */
    padding: 1px 5px;        /* 상하, 좌우 패딩 */
    border-radius: 5px;       /* 라운드 모양의 테두리 */
    font-size: small;         /* 글자 크기 */
}

.rounded2-text {
    background-color: red;  /* 배경색 */
    color: white;             /* 글자색 */
    padding: 1px 5px;        /* 상하, 좌우 패딩 */
    border-radius: 5px;       /* 라운드 모양의 테두리 */
    font-size: small;         /* 글자 크기 */
}

.rounded3-text {
    background-color: blue;  /* 배경색 */
    color: white;             /* 글자색 */
    padding: 1px 5px;        /* 상하, 좌우 패딩 */
    border-radius: 5px;       /* 라운드 모양의 테두리 */
    font-size: small;         /* 글자 크기 */
}

.item-container {
    display: flex;
    align-items: center;
    gap: 10px; /* 조정 가능 */
}

.item-image {
    width: 50px; /* 이미지의 고정 가로 크기 */
    height: 50px; /* 이미지의 고정 세로 크기 */
}

.item-content {
    flex-grow: 1; /* 남은 공간을 채움 */
}

#loading {
    position: fixed;
    bottom: 50%; /* 화면 하단에서 20px 위에 위치 */
    left: 50%; /* 화면 중앙에 위치 */
    transform: translateX(-50%); /* 가로 중앙 정렬 */
    z-index: 1000; /* 다른 요소들 위에 표시 */
    display: none; /* 기본적으로 숨김 */
}

/* 그리드 관련 */
.table-box span.blank {
	color: #aaa;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.table-box span.blank:before {
	content: "\f0ce";
	color: #ccc;
	display: block;
	margin-bottom: .5em;
	font-size: 20px;
	font-family: "FontAwesome";
}

.ui-jqgrid .ui-jqgrid-bdiv.div {
overflow: hidden; 
overflow: auto; 
} 
select.mw190 {
	max-width: 190px;
}

select.mw200 {
	max-width: 200px;
}

select.mw230 {
	max-width: 230px;
}

select.mw250 {
	max-width: 250px;
}

.grid-col5    { padding-right: 5px !important; padding-left: 5px !important; }
.grid-col10   { padding-right: 10px !important; padding-left: 10px !important; }
.grid-col20   { padding-right: 20px !important; padding-left: 20px !important; }
.grid-col30   { padding-right: 30px !important; padding-left: 30px !important; }

/* 테이블 공통 */
.table-box {position:relative; background-color: #fff;}
.table-box.scroll {background-color:#fdfdfd; border-bottom:solid 1px #e1e1e1;}
.table-box div.tit {margin-bottom:8px; padding-left:0; position:relative;}
.table-box div.tit:before {display:none;}
.table-box div.tit > span:first-child {font-weight: 600; color:#555; font-size:14px;}
.table-box div.tit a.btn {height:26px; line-height: 24px;}
.table-box div.tit > span.comment {font-size:12px; vertical-align: bottom; color:#888; margin-left:10px;}
.table-box table {background-color:#fff; border-collapse:inherit;}
.table-box table thead th {font-weight:600; color:#454e62; height:46px; padding:0 4px; /* border-bottom:solid 1px #5b5555; */}
.table-box table th,
.table-box table td {border-bottom:solid 1px #e1e1e1; font-size:14px; padding:9px 4px; color:#767676; transition:all 0.2s; text-align:center; word-break: break-all;}
.table-box table td > img {max-width: 95%; display: block; margin:5px auto;}
.table-box table th.must {font-weight: 600;}
.table-box table th.must:before {content:"*"; display:inline-block; margin-right:4px;}
.table-box table th.exp {background-color:#eef9fd !important;}
.table-box table td.empty {height:90px; font-size: 16px;}
.table-box table td.empty > span.fa {font-size:20px; color:#aaa;}
.table-box table td.empty > p {margin-top:12px;}
.table-box table td.color01 {background-color:#f9f6f6 !important;}
.table-box table td p {font-size:14px;}
.table-box table td p.para {margin:5px 0;}
.table-box table tr > *:last-child {border-right:none;}
.table-box + .comment {font-size:12px; margin-top:8px;}
.table-box + .comment > .color01,
.table-box + .comment > .color02 {vertical-align: baseline; font-weight: 600;}
.table-box + .comment > .color01 {color:#ea4d41;}
.table-box + .comment > .color02 {color:#4884cd;}

.table-box.list {border:solid 1px #cdd4dd; border-right:none}
.table-box.list table {border-top:none;}
.table-box.list table thead th {background-color:#f1f5fa; height:40px; color:#585f66; border-right:solid 1px; border-color:#cdd4dd;}
.table-box.list table tr td {padding:9px 4px; border-color:#e1e6ed; border-right:solid 1px #e1e6ed;}
.table-box.list table tbody tr:last-child > * {border-bottom:none;}
.table-box.list table tr > *:last-child {border-right-color:#cdd4dd;}
.table-box.list table tbody tr.exp td,
.table-box.list table tbody tr td.exp {background-color: #f1eeea !important; color:#555 !important; font-weight: 600; border-color:#dfdad5;}
.table-box.list table tbody tr.alm td,
.table-box.list table tbody tr td.alm {background-color: #f9f0f3 !important; color:#555 !important; font-weight: 600; border-color:#eadadf;}
.table-box.list table tr.bt > * {border-top:solid 1px #cdd4dd;}
.table-box.list table tr th.total {background-color: #e1eaf5 !important; font-weight: 600; border-right:solid 1px #dfdad5;}
.table-box.list table tr td.total {background-color: #fdfdfd !important; font-weight: 600; border-right:solid 1px #dfdad5;}
.table-box.list table td > img.ui-datepicker-trigger {display:inline-block; margin-left:5px;}

.table-box.list.master table tbody tr {cursor: pointer;}
.table-box.list.master table tbody tr:nth-child(2n) td {background-color:#fdfdfd;}
.table-box.list.master table tbody tr:hover td {background-color:#e2f1fb;}
.table-box.list.master table tr.active td,
.table-box.list.master table tr.active:hover td {background-color:#6b7de8 !important; color:#fff !important;}

.table-box table td .icon {height:24px; line-height:22px; color:#fff; font-size:11px; font-weight:600; border-radius:2px; vertical-align:middle; border:solid 1px #ccc; padding:0 7px 0 6px; text-align:center; margin-left:2px;}
.table-box table td .icon.color01 {background-color:#769ce2; border-color:#5785d8;}
.table-box table td .icon.color02 {background-color:#e27692; border-color:#d95779;}
.table-box table td.minus {color:#ec561a;}

.table-box table td a.btn {height:24px; line-height:22px; font-size:12px;}
.table-box.vertical table td a.btn {height:26px; line-height:24px; font-size:12px;}

/* 세로 */
.table-box.vertical table {}
.table-box.vertical tr > *:last-child {border-right:none;}
.table-box.vertical tr > *.br {border-right:solid 1px #e1e1e1 !important;}
.table-box.vertical table tbody th,
.table-box.vertical table tbody td {height:40px; padding:0 3px; font-size: 14px; color:#575757;}
.table-box.vertical table tbody th {background-color:#f7fafb; font-weight:500;}
.table-box.vertical table tbody td {text-align:left; padding-left:10px; padding-right:10px; font-size:14px;}
.table-box.vertical table tbody td > input {max-width:100%;}
.table-box.vertical table tbody td .label {font-weight: 500; margin-right:1em;}
.table-box.vertical textarea {width:100%; min-height:140px; margin:6px 0;}
.table-box.vertical tbody tr.exp th {background-color: #f1eeea; font-weight: 600; border-right:solid 1px #dfdad5;}
.table-box.vertical tbody tr.exp th:last-child {border-right:none;}

/* 세로 */
.table-box.form table {border-left:solid 1px #fcfcfc;}
.table-box.form table tbody th,
.table-box.form table tbody td {height:36px; padding:0 3px; font-size: 13px; color:#575757;}
.table-box.form table tbody th {background-color:#f7fafb; font-weight:500;}
.table-box.form table tbody td {text-align:left; font-size:14px; padding:2px 3px 2px 2px; position: relative;}
.table-box.form table tbody td > input,
.table-box.form table tbody td > select,
.table-box.form table tbody td > textarea,
.table-box.form table tbody td > .numeric-input,
.table-box.form table tbody td > .file-upload,
.table-box.form table tbody td > .file-upload > a.btn,
.table-box.form table tbody td > a.btn,
.table-box.form table tbody td > span,
/* 0306추가 퍼블리싱 by khj
.table-box.form table tbody td span.unit {height:32px; line-height:32px; width:100%; border:solid 1px #d5ddee; border-radius: 3px; font-size: 13px; float:left;} */
.table-box.form table tbody td span.unit,
.table-box.form table tbody td label {height:32px; line-height:32px; width:100%; border:solid 1px #d5ddee; border-radius: 3px; font-size: 13px; float:left;}
.table-box.form table tbody td label {width:auto; border:none; margin-right: 10px;}
.table-box.form table tbody td input[type="checkbox"],
.table-box.form table tbody td input[type="radio"] {margin-top:1px; margin-right:3px;}

.table-box.form table tbody td > a.btn,
.table-box.form table tbody td > .file-upload > a.btn {width:auto; text-align: center;}
.table-box.form table tbody td > input:hover,
.table-box.form table tbody td > select:hover,
.table-box.form table tbody td > textarea:hover,
.table-box.form table tbody td > .numeric-input:hover,
.table-box.form table tbody td > .file-upload:hover {background-color:#fcfcfc;}
.table-box.form table tbody td > input:focus,
.table-box.form table tbody td > select:focus,
.table-box.form table tbody td > textarea:focus,
.table-box.form table tbody td > .numeric-input:focus,
.table-box.form table tbody td > .file-upload:focus {background-color:#f9fcff; color:#2082c5;}
.table-box.form table tbody td > input:read-only {background-color: #e9e9e9 !important;}
.table-box.form table tbody td > .datepicker:read-only {background-color: #fff !important;}
.table-box.form table tbody td > *.border {border:solid 1px #eee; margin:4px 5px 4px 5px; box-sizing: border-box; width:calc(100% - 10px);}
.table-box.form table tbody td .label {font-weight: 500; margin-right:1em;}
.table-box.form table tbody td > a.btn.abs {position:absolute; top:0px; right:0;}
.table-box.form table tbody td > img.ui-datepicker-trigger {margin-top:9px;}
.table-box.form textarea {width:100%; min-height:140px; margin:0; line-height: 1.2em !important;}
.table-box.form tbody tr.exp th {background-color: #f1eeea; font-weight: 600; border-right:solid 1px #dfdad5;}
.table-box.form tbody tr.exp th:last-child {border-right:none;}
.table-box.form table td > img.ui-datepicker-trigger {display:inline-block; margin-left:-30px;}
.table-box.form table tr > *.blank {}
.table-box.form table tbody td input.number-unit {padding-right:44px; text-align: right;}
.table-box.form table tbody td > span {display:inline-block; width:auto; border:none;}
.table-box.form table tbody td span.unit {width:40px; margin-left:-40px; display: inline-block; float:none; color:#aaa; border:none;}
.table-box.form table tbody td p.comment {clear:both; margin:5px; font-size: 13px; color: #888;}

.artice_contents {line-height:2.0em;}

/* 테이블 타입 */
.table-box.type01 table { border-top:solid 1px #a19e99;}
.table-box.type01 table thead th {background-color: #f3f1ee; color:#706c65; border-bottom:solid 1px #e2ded7; border-right: solid 1px #e2ded7; padding:0; height:40px;}
.table-box.type01 table tbody th {background-color:#f7fafb; border-right: solid 1px #e2ded7; font-size:13px; font-weight:600;}
.table-box.type01 table tbody td { border-right: solid 1px #e2ded7; font-size:14px; padding:0 4px; color:#767676; height:30px;}
.table-box.type01 table tr > *:last-child {border-right:none;}
.table-box.type01 table tr > *.br {border-right:solid 1px #e2ded7 !important;}

.table-box.type02 table {border-color:#ec7c39;}
.table-box.type02 table tbody th {background-color:#fdfaf4;}

.table-box.type03 table {border-color:#6d88d0;}
.table-box.type03 table tbody th {background-color:#f4fbfd;}

/* 테이블 - 달력인 경우 */
.table-box.calendar table {border-top:none;}
.table-box.calendar table thead th.ym {border:none; background-color:#5d616d; color:#fff; font-size:16px; position:relative; height:42px; line-height:42px;}
.table-box.calendar table thead th.ym > a.btn {width:20px; line-height:20px; height:20px; border:none; padding:0; border-radius:50%; position:absolute; top:12px; transition:all 0.2s; background-color:transparent; color:#fff;}
.table-box.calendar table thead th.ym > a.btn:hover {background-color:#3d9fe3;}
.table-box.calendar table thead th.ym > a.btn.prev {left:10px;}
.table-box.calendar table thead th.ym > a.btn.next {right:10px;}
.table-box.calendar table thead th.ym > a.btn > span.fa {margin-right:0;}
.table-box.calendar table thead tr th,
.table-box.calendar table tbody tr td {border-right:solid 1px #e1e1e1; padding:0; height:36px;}
.table-box.calendar table tbody tr td {background-color:#fdfdfd; height:28px;}
.table-box.calendar table tr > *:first-child {border-left:solid 1px #e1e1e1;}
.table-box.calendar table td > a {display:block; width:100%; height:75px; text-align: left; padding:10px; background-color: #fff;}
.table-box.calendar table td > a:hover {background-color:#f2f8ff;}
.table-box.calendar table td.event > a {background-color:#fcf9ee;}
.table-box.calendar table td.today > a {font-weight:600; color:#444; border:solid 1px #444; line-height:22px;}
.table-box.calendar table td.active > a {font-weight:600; color:#3d9fe3; border:solid 2px #3d9fe3; line-height:20px; background-color: #fff;}
.table-box.calendar table td.weekend > a {background-color: #fdfdfd; color:#aaa;}

/* 하단 */
.bottom-area {margin-top:16px; min-height:36px; position: relative; clear: both;}
.bottom-area .btn-wrap {position:absolute;top:0;right:0;}
.bottom-area .btn-wrap.left {left:0; right:auto;}
.bottom-area .btn-wrap.center {right:50%; transform: translate(50%, 0);}
.bottom-area .btn-wrap > a.btn {height:36px; line-height: 34px; font-size:13px;}

/* 페이징 */
.paging {text-align:center;}
.paging li {display:inline;}
.paging li a {display:inline-block; border:1px solid #cccccc; min-width:30px; height:30px; line-height:28px; margin:0 2px; text-align:center; font-weight:300; transition:all 0.2s; background-color: #fff;}
.paging li a:hover {border:1px solid #3d9fe3;}
.paging li.active > a {border-color:#a4c5eb;}
.paging li.btn a {text-indent:-9999px; border-color:#fff; margin:0 1px; min-width:24px;}
.paging li.btn-first a {background:url("img/common/btn_paging_first.png") center center no-repeat;}
.paging li.btn-first a:hover {background:url("img/common/btn_paging_first_active.png") center center no-repeat;}
.paging li.btn-prev a {background:url("img/common/btn_paging_prev.png") center center no-repeat;}
.paging li.btn-prev:hover a {background:url("img/common/btn_paging_prev_active.png") center center no-repeat;}
.paging li.btn-next a {background:url("img/common/btn_paging_next.png") center center no-repeat;}
.paging li.btn-next a:hover {background:url("img/common/btn_paging_next_active.png") center center no-repeat;}
.paging li.btn-last a {background:url("img/common/btn_paging_last.png") center center no-repeat;}
.paging li.btn-last a:hover {background:url("img/common/btn_paging_last_active.png") center center no-repeat;}

/* 커스터마이징 */
/* .table-box,
.tree-box {border:solid 1px #cad1e7; border-radius: 3px;}
.table-box {overflow-x: auto;} */

/* 커스터마이징 */
.table-box.list table thead tr th {background-color:#4dacee; border-color: #3698dc; color:#fff; height:36px;}
.table-box.list table thead tr th.br {border-right:solid 1px #3698dc;}
.table-box.list table tbody tr td {border-color:#dce0e7; font-weight: 500;}
.table-box.small table tbody tr td {padding:4px 4px;}

.table-box.list table thead tr th,
.table-box.list table thead tr td {word-break:keep-all;}

.table-box.fixed-header {border:none; border-radius:3px 3px 0 0;}
.table-box.fixed-body {border-radius: 0 0 3px 3px; border-top:none; border:solid 1px #cdd4dd;}
.table-box.fixed-header table thead tr > *:last-child,
.table-box.fixed-body table tbody tr > *:last-child {border-right:none;}

.table-box.form table tbody td > input,
.table-box.form table tbody td > select,
.table-box.form table tbody td > textarea,
.table-box.form table tbody td > .numeric-input,
.table-box.form table tbody td > .file-upload,
.table-box.form table tbody td > .file-upload > a.btn,
.table-box.form table tbody td > a.btn,
.table-box.form table tbody td > span,
.table-box.form table tbody td span.unit {width:auto;}
.table-box.form table tbody td > input[type='text'],
.table-box.form table tbody td > input[type='number'],
.table-box.form table tbody td > input[type='password'] {width:80px;}
#left .table-box.form table tbody td > input[type='text'],
#left .table-box.form table tbody td > input[type='number'],
#left .table-box.form table tbody td > input[type='password'],
#left .table-box.form table tbody td > select {width:100%;}

.table-box.form table th,
.table-box.form table td,
.table-box.vertical table th,
.table-box.vertical table td {border-top:solid 1px #e1e1e1; border-bottom:none;}
.table-box.form table tr:first-child > *,
.table-box.vertical table tr:first-child > * {border-top:none;}
.table-box.form table td > .datepicker {width:100px !important; float:none;}
.table-box.form table td > img.ui-datepicker-trigger {margin-left:7px;}
.table-box.form textarea {width:100% !important; min-height:60px; margin-top:4px; margin-bottom: 4px;}
.table-box.form table tbody td > .file-upload {width:100%;}
.table-box.form table tbody td > .file-upload > a.btn {border-radius:0 3px 3px 0; border:none; box-shadow:none;}
.file-upload:hover > a.btn {background-color: #3d9fe3;}