@font-face {
  font-family: 'NotoSerifKR';
  src: url('/fonts/NotoSansKR-Regular.ttf') format('truetype');
  font-weight: 400; /* Regular */
  font-style: normal;
}

@font-face {
  font-family: 'NotoSerifKR';
  src: url('/fonts/NotoSansKR-Bold.ttf') format('truetype');
  font-weight: 700; /* Bold */
  font-style: normal;
}

/*==========================================================================================================
  컨텐츠
============================================================================================================ */
body {
  font-family: 'NotoSerifKR', serif !important;
}

.contents-wrap {
  margin-top: 75px;
  padding: 10px 20px 15px 20px;
  width: 100%;
}

.page-title-wrap {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contents-wrap h2 {
  font-size: 22px;
  color: #333;
  font-weight: bold;
}

.tab-wrap {
  width: 100%;
  margin: 0; /* 좌우 여백 제거 */
  padding: 0; /* 내부 여백 제거 */
}

.tab-wrap ul {
  display: flex;
  /* justify-content: left; */
  border-bottom: 1px solid #dbdbdb;
  flex-flow: row wrap;
  padding: 0;
  justify-content: flex-start; /* 왼쪽 정렬 */
}

.tab-wrap ul li {
  display: inline-block;
  width: auto;
  min-width: 200px;
  text-align: center;
  font-size: 1.5rem;
}

.tab-wrap ul li.on a {
  background-color: #9bf58fc7;
  color: #3a0be4;
  /* border: 1px solid #9bf58fc7; */
  font-weight: bold;
  text-decoration: none;
}
.tab-wrap ul li a {
  display: block;
  padding: 8px 0;
  background-color: #fff;
  padding: 7px 20px;
  font-weight: 500;
  line-height: 24px;
  color: #000000;
  margin-bottom: -1px;
  border: 1px solid #dbdbdb;
  text-decoration: none;
}
/*==========================================================================================================
  검색
============================================================================================================ */

.search-wrap {
  border: 1px solid #dfe0e1;
  border-radius: 8px;
  padding: 16px 16px 16px 16px;
  margin-bottom: 15px;
  position: relative; /* 조회 버튼을 오른쪽 끝에 고정하기 위한 설정 */
  overflow: visible !important;
}

.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  /* min-width: 250px;  */
}

.search-item label {
  font-weight: bold;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  margin-right: 8px;
}

.input-select,
.input-search {
  width: 100%;
  max-width: 200px; /* 필드 최대 크기 */
  height: 36px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 14px;
  box-sizing: border-box;
}

.separator {
  margin: 0 5px; /* '~' 기호 간격 */
  color: #666; /* 회색 텍스트 */
}

.search-btn-container {
  position: absolute;
  right: 16px; /* 오른쪽 여백 */
  top: 16px;
  /* top: 50%;
    transform: translateY(-50%); */
}

.btn-search {
  /* background: url(/img/icon-search.png) #0e40e6 no-repeat 50% 50%; */
  background: url(/img/icon-search.png) #8f9091 no-repeat 15% 50%;
  color: white;
  border: none;
  padding: 5px 20px 7px 40px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: block;
  white-space: nowrap;
}

.search-icon {
  background: url(/img/icon-search.png) #b7b8b9 no-repeat 50% 50%;
  color: #fff;
  border: none;
  padding: 25px 10px 10px 25px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: block;
  white-space: nowrap;
}

.btn-search:hover, .search-icon:hover {
  background-color: #303131;
}
.row {
  min-height: calc(100vh - 400px);
}

.row-1 {
  display: flex;
  min-height: calc(100vh - 400px);
}

.contents-wrap .row-1:last-child section {
  margin-bottom: 0;
}

.row-1 section:last-child {
  margin-right: 0;
}

.row-1 section {
  margin-right: 20px;
}
.wp60 {
  width: 60% !important;
}
.wp20 {
  width: 20% !important;
}
.wp40 {
  width: 40% !important;
}
section {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #dfe0e1;
}

.contents-wrap section .section-tit-wrap {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.contents-wrap section .section-tit-wrap h3 {
  font-size: 18px;
  font-weight: 500;
  font-weight: bold;
}

.contents-wrap section .section-tit-wrap h3 span {
  font-size: 14px;
  font-weight: 400;
  color: #919191;
}

/* input */
.contents-wrap section .section-tit-wrap h3 span input[type="text"] {
  width: 22px;
  height: 14px;
  text-align: center;
  border: none;
  color: #dd1c23;
  display: inline-block;
  padding: 3px;
  min-width: inherit;
  font-size: 14px;
}

.hide {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  text-indent: -9999999px;
  overflow: hidden;
}

.contents-wrap section .section-tit-wrap .btn-right-box {
  position: absolute;
  right: 0;
  top: -6px;
}

/*==========================================================================================================
  버튼
============================================================================================================ */

.btn-right-box ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.btn-right-box li:last-child {
  padding-right: 0;
}
.btn-right-box li:first-child {
  padding-left: 0;
}

.btn-right-box li:not(:last-child) {
  margin-right: 5px;
}

.btn-right-box li a:not(.btn-question) {
  display: inline-block;
  padding: 7px 25px;
  background-color: #3d5670;
  vertical-align: bottom;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  font-weight: 400;
  text-decoration: none;
}

.input-btn-wrap {
  display: flex;
  justify-content: space-between;
}

.btn-select {
  display: inline-block;
  padding: 7px 25px;
  vertical-align: bottom;
  border-radius: 5px; /* 모서리 둥글게 */
  text-align: center;
  color: #fff; /* 텍스트 색상 */
  font-weight: 400;
  text-decoration: none; /* 버튼 내부 텍스트 꾸밈 제거 */
  border: none; /* 버튼 테두리 제거 */
  cursor: pointer; /* 마우스 오버 시 커서 변경 */
}


.btn-add {
  background-color: #4e4e4e !important;
}
.btn-update, .btn-save, .btn-write {
  background-color: #111111b6 !important;
}
.btn-update:hover, .btn-save:hover, .btn-write:hover {
  background-color: #000000b6 !important;
}
.btn-excel {
  background-color: #087408 !important;
}
.btn-excel:hover {
  background-color: #065306 !important;
}
.btn-cancel, .btn-delete {
  background-color: #eb0f0fb6 !important;
}
.btn-cancel:hover, .btn-delete:hover {
  background-color: #c50606b6 !important;
}

/*==========================================================================================================
  테이블
============================================================================================================ */
.table-container {
  width: 100%;
  overflow-x: auto;
  display: block;
  
}

.table-write {
  width: 100%;
  border-top: 2px solid #6d6d6d;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.table-write tbody th {
  color: #2d2f3a;
  padding: 5px 10px;
  font-weight: bold;
  background-color: #f9f9f9;
  border-right: 1px solid #d5d5d5;
  border-bottom: 1px solid #d5d5d5;
  border-left: 1px solid #d5d5d5;
  height: 36px;
  white-space: nowrap;
  text-align: center;
}
.table-write tbody th:first-child {
  border-left: 0;
}

.table-write tbody td:last-child {
  border-right: 0;
}
.table-write tbody td {
  padding: 5px 7px;
  border-right: 1px solid #e4e5e6;
  border-left: 1px solid #e4e5e6;
  border-bottom: 1px solid #e4e5e6;
  font-weight: 400;
}

.table-list {
  
  width: 100%;
  border-collapse: collapse; /* 테두리 선 겹침 방지 */
  font-size: 0.9rem;
  border-top: 2px solid #6d6d6d;
  text-align: center;
  table-layout: auto;
  white-space: nowrap; 
}

.table-list thead th {
  color: #333;
  padding: 10px;
  font-weight: bold;
  background-color: #f9f9f9; /* 약간 밝은 배경 */
  border-bottom: 2px solid #ddd; /* 하단 테두리 */
  text-align: center; /* 헤더는 가운데 정렬 */
}

.table-list tbody tr {
  border-bottom: 1px solid #e4e5e6; /* 행 간의 구분선 */
}

.table-list tbody td {
  padding: 15px; /* 적절한 패딩 */
  color: #555;
  font-weight: 400;
  vertical-align: middle; /* 텍스트 중앙 정렬 */
}

.table-list tbody tr:hover {
  background-color: #f7f7f7; /* 행 호버 시 색상 변경 */
}

ul {
  list-style: none;
}

.red {
  color: #ee001c !important;
}

.grid-container {
  border: 1px solid #ddd;
}
.grid-wrapper {
  display: flex;
  justify-content: space-between;
}

.grid-list {
  width: 100%;
  table-layout: fixed; 
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  text-align: center;
  white-space: nowrap; 
}

.grid-list thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  color: #333;
  padding: 10px;
  font-weight: bold;
  background-color: #f9f9f9;
  text-align: center; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 2px solid #6d6d6d;
  border-bottom: 2px solid #ddd;
}


.grid-list tbody td {
  padding: 15px; 
  color: #555;
  font-weight: 400;
  vertical-align: middle; 
  white-space: nowrap;
  /* text-overflow: ellipsis; */
  border-bottom: 1px solid #e4e5e6;
}


.grid-list tbody tr:hover {
  background-color: #f7f7f7;
}

.grid-list td input {
  width: 100%;
  box-sizing: border-box; 
  border: none;
  outline: none;
  background: transparent;
  text-align: center;  
}


/*==========================================================================================================
  공통 input button
============================================================================================================ */

input {
  font-size: 15px;
  border: 1px solid #c7cad3;
  padding: 6px 10px;
  border-radius: 4px;
  color: #61646d;
}

button {
    display: inline-block;
    padding: 7px 25px;
    vertical-align: bottom;
    border-radius: 5px !important;
    text-align: center;
    color: #fff;
    font-weight: 400;
    text-decoration: none;
    border:none;
}

input[type="text"]:read-only {
  background-color: #eeeeeecb;
}

/*==========================================================================================================
  파일 영역 
============================================================================================================ */

.file-box input[type="text"]:read-only {
  border: 1px solid #dcdcdc !important;
}

.file-box input.upload-nm {
  font-size: 13px;
}
.file-box input[type="text"] {
  width: calc(100% - 60px);
  overflow: hidden;
  vertical-align: middle;
  border: 1px solid #dcdcdc;
  background-color: #fff;
}

.file-box label.file-nm {
  display: inline-block;
  padding: 6px 15px;
  vertical-align: middle;
  background-color: #3a3b3b;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  white-space: nowrap;
  margin-left: 10px;
  margin-top: 5px;
}
label.file-nm:hover {
  background-color: #0d0e0e;
}

fieldset {
  width: 100%;
  border: 0px;
}

.file-box {
  display: flex;
  justify-content: space-between;
}

/*==========================================================================================================
  캘린더
============================================================================================================ */

.date-picker-input {
  position: relative;
  display: inline-block;
}

.calendar-icon {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  color: #272626;
  pointer-events: none; 
  z-index: 110;
}

/*==========================================================================================================
  모달
============================================================================================================ */

.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 300; /* 다른 요소 위에 표시되도록 */
}
.modal-overlay2 {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 500; /* 다른 요소 위에 표시되도록 */
}

.modal-wrap {
  background: #fff;
  max-width: 90%;
  padding: 20px;
  border-radius: 4px;
  outline: none; 
}

.modal-container {
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
}
.modal-content {
  flex: 1 1 auto;  
  overflow: auto; 
  padding: 20px;
  background-color: #fff;
}
.modal-btn-wrap {
  flex: 0 0 auto;
  margin: 0 20px 20px 0; 
  text-align: right; 
}
.modal-header {
  background-color: #3533b6f8;
  padding: 9px 10px 8px 20px !important;
  display: flex;
  justify-content: space-between;
  align-items: center !important;
  color: #fff;
}
.modal-header h5 {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}
.modal-header-span {
  font-size: 18px;
  font-weight: 400;
}
.modal-btn-close {
  background-color: #3533b6f8;
  border:none;
  padding: 0px 10px 0px 10px;
}
.modal-btn-close {
  color: #fff;
  font-size: 20px;
}

.date-popper {
  z-index: 9999 !important;
  position: absolute !important;
}






/*==========================================================================================================
  모바일 CSS
============================================================================================================ */

@media (max-width: 768px) {
  .input-select,
  .input-search {
    width: 100%;
    margin-bottom: 10px;
  }

  .btn-search {
    width: 100%;
    text-align: center;
  }
}