@charset "utf-8";
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#onboardingOverlay {
  position: fixed;
  width: calc(100% - 200px);
  overflow: hidden;
  height: 100%;
  right: 0;
  top: 70px;
  /* background: #f5f7f8; */
  background-color: white;
  z-index: 1;
  display: none;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* active 상태일 때 opacity 1, pointer-events 활성화 */
/* active가 붙었을 때만 flex + opacity:1 상태 */
#onboardingOverlay.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.modal-list {
  position: relative;
  overflow: hidden !important;
  padding: 0 1rem 0.5rem 1rem !important;
}
#listonboardingOverlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  height: 100%;
  background-color: white;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#listonboardingOverlay.active {
  opacity: 1;
  pointer-events: none;
}
.onboarding-content {
  font-size: 24px;
  color: #616161;
}
.dot-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh; /* 전체 화면 중앙 정렬용 */
  gap: 10px;
}

.dot-spinner .dot {
  width: 20px;
  height: 20px;
  background-color:#43bd6a; /* 물방울 색상 (민트) */
  border-radius: 50%;
  animation: bounce 0.6s infinite ease-in-out;
}

.dot-spinner .dot:nth-child(1) {
  animation-delay: 0s;
}
.dot-spinner .dot:nth-child(2) {
  animation-delay: 0.15s;
}
.dot-spinner .dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  40% {
    transform: translateY(-12px);
    opacity: 1;
  }
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar:horizontal {
  display: none;
}

::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 5px;
}
.side::-webkit-scrollbar {
  width: 3px !important; /* 세로 스크롤 너비 */
  height: 3px !important; /* 가로 스크롤 높이 */
}

.side::-webkit-scrollbar:horizontal {
  height: 0px !important; /* 가로 스크롤을 보이지 않게 설정 */
}

.side::-webkit-scrollbar-thumb {
  background-color: #3ba35c !important; /* 스크롤바 색상 */
  border-radius: 5px !important; /* 둥근 모서리 */
}

div:where(.swal2-icon).swal2-warning {
  border-color: #ff3e1d;
  color: #ff3e1d;
}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
  background-color: #43bd6a;
  color: #fff;
}
.swal2-confirm:hover{
  background-color: #359654;
}
#dataTabletab01_info {
  padding: 0 !important;
}

#dataTabletab02_info {
  padding: 0 !important;
}

/* 모달 검색창 */
/* #form-control0 {
  position: relative;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  border: 0.1rem solid transparent;
  border-radius: 3rem;
  background-image: linear-gradient(to right, #05a15c, #3adca9);
  background-origin: border-box;
  background-clip: content-box, border-box;
} */
#form-control0 {
  position: sticky !important;
  padding: 0 1rem !important;
}
.search-button2 {
  position: absolute;
  top: 18% !important;
  right: 25px !important;
  background-color: transparent;
  border: none;
  z-index: 2;
}
#form-control0 > .search-button2 > .fa-circle-xmark{
  color: #d9d9d9 !important;
  font-size: 23px !important;
}
.form-control,
.input-group,
.input-group-merge {
  box-shadow: none !important;
}
#form-control {
  width: 100%; /* 기본 너비 설정 */
  border: none;
  padding: 0.3rem 2rem 0.3rem 1rem !important;
  border-radius: 3rem;
  border: 1px solid #d3dbd5 !important;
  box-shadow: none !important;
  background-color: white;
}

.custom-input{
  width: 80% !important;
  border: none;
  padding: 0.3rem 2rem 0.3rem 1rem !important;
  border: 1px solid #d3dbd5 !important;
  color: #b2b2b2 !important;
}

.search-button {
  position: absolute;
  top: 17% !important;
  right: 15px !important;
  background-color: transparent;
  border: none;
  z-index: 1;
}

.search-button img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
[type="search"] {
  -webkit-appearance: textfield !important;
  outline-offset: -2px !important;
}
input::placeholder {
  color: #292929 !important;
  opacity: 0.45 !important;
}
.h1-color{
  color: #292929;
}
tr {
  cursor: pointer;
}
.btn-con > button {
  background-color: #fff !important;
  color: #323232 !important;
  padding: 0.3rem 0.4rem !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 20px !important;
}
#dataTableScrollWrapper{
  overflow-x: auto !important;
  scrollbar-width: auto !important;
  scroll-behavior: smooth !important;
  width: 100%;
}
/* 테이블은 내용에 맞춰 최대 너비를 가짐 */
.dataTables_scrollBody {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: 70vh; /* 세로 스크롤도 가능하게 */
  width: 100% !important;
}
div.dt-container {
  margin-bottom: 7rem !important;
}
div.dt-container.dt-empty-footer .dt-scroll-body{
  border-bottom: 1px solid #e1e8eb !important;
}
.dataTables_scroll {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* 헤더 영역 */
.dataTables_scrollHead {
  overflow: hidden;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* 헤더 내부 - 테이블 */
.dataTables_scrollHeadInner {
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* 헤더 테이블 */
/* 테이블 레이아웃 */
.dt-scroll-headInner table,
.dt-scroll-body table {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}

/* 헤더도 동일하게 너비 고정 */
.dataTables_scrollHeadInner,
.dataTables_scrollHeadInner table {
  width: 100% !important;
  table-layout: fixed !important;
}

/* 기본 테이블 스타일 */
table.dataTable {
  table-layout: auto !important;
  width: 100% !important;
  border-collapse: collapse;
  /* white-space: nowrap; */
}

/* 셀 스타일 */
.dataTable th,
.dataTable td {
  min-width: 70px !important;
  text-align: center !important;
  white-space: nowrap;
}
.dt-scroll {
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}
.dt-scroll-headInner th:last-child {
  padding-right: 20px !important; /* 스크롤바 너비만큼 보정 */
}
.dt-scroll-head,
.dt-scroll-headInner,
.dt-scroll-body {
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  /* background-color: white !important; */
}
.dtfh-floatingparent-head{
  top: 180px;
}

.dt-column-title{
  color: #616161 !important;
}
table.dataTable th.dt-type-numeric div.dt-column-header, table.dataTable th.dt-type-date div.dt-column-header{
  flex-direction: row !important;
}
.dt-column-order::before, .dt-column-order::after{
  /* color: #a3bac5; */
  color: #125026;
}
.dt-column-order::before{
  bottom: 60% !important;
}
.dt-column-order::after{
  top: 60% !important;
}
.dt-orderable-asc{
  text-align: center !important;
}
th.dt-orderable-asc:hover,
td.dt-orderable-asc:hover{
  box-shadow: inset 0 0 0 9999px rgb(244, 244, 244, 1) !important;
  border: transparent !important;
}

/* Firefox용 스크롤바 커스텀 */
.dt-scroll-body{
  max-height: calc(100% - 100px) !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #b6b6b6 #ffffff;
  position: relative;
  scroll-behavior: auto !important;
  /* max-height: calc(-350px + 100vh) !important; */
}

table.dataTable.display>tbody>tr>* {
  border-top: none !important;
}
/* 1. 기본 줄무늬 색 (홀수 줄만 연한 회색) */
table.dataTable tbody tr:nth-child(odd) > * {
  background-color: #fdfdfd !important;
  box-shadow: none !important;
}

/* 2. 짝수 줄은 흰색 (기본) */
table.dataTable tbody tr:nth-child(even) > * {
  background-color: #fff !important;
  box-shadow: none !important;
}

/* 3. hover 시 배경색만 변경 */
table.dataTable tbody tr:hover > * {
  background-color: #f0f0f0 !important; /* 파스텔 블루 느낌 */
  box-shadow: none !important;
}

/* 4. 선택된 행, 정렬 컬럼 등 다른 색상 효과 모두 제거 */
table.dataTable tbody tr.selected > *,
table.dataTable tbody tr.selected:hover > *,
table.dataTable tbody tr > td.sorting_1,
table.dataTable tbody tr > td.sorting_2,
table.dataTable tbody tr > td.sorting_3 {
  background-color: #eeeeee !important;
  box-shadow: none !important;
}

html body table.dataTable.display>tbody tr>.sorting_1{
  box-shadow: none !important;
}
/* 5. 포커스 및 기타 상태 색상 제거 */
table.dataTable tbody tr:focus > * {
  background-color: inherit !important;
  outline: none !important;
}

/* 6. 헤더 정렬 시 컬럼 배경색도 초기화 */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  background-color: #f9f9f9 !important;
  color: #333 !important;
  box-shadow: none !important;
}

/* 7. 헤더 hover 효과 유지하거나 제거 가능 */
table.dataTable thead th {
    border-bottom: 1px solid #e1e8eb !important;
}
table.dataTable thead th:hover {
  background-color: #ebebeb !important; /* 원하면 헤더도 살짝 색변경 */
}
html body table.dataTable tbody tr.selected>* {
  background-color: #dbdbdb !important;
  color: #292929 !important;
}
html body table.dataTable.display > tbody > tr.selected:hover > * {
  background-color: #dbdbdb !important;
  color: #292929 !important;
  box-shadow: none !important;
}
/* 홀수 줄: 약간의 회색 */
table.dataTable tbody tr:nth-child(odd) td {
  background-color: #f8f8f8 !important;
}
/* 짝수 줄: 흰색 */
table.dataTable tbody tr:nth-child(even) td {
  background-color: #ffffff !important;
}

/* 정렬된 컬럼 강조: 배경색 대신 투명으로 (줄무늬 유지) */
table.dataTable tbody td.sorting_1 {
  box-shadow: none !important;
}

html body table.dataTable tbody tr:hover > * {
  background-color: #e9e8e8 !important;  /* 진한 검정 */
}
#dataTable_wrapper > .top {
  position: sticky;
  top: 0;
  max-width: 1040px;
  width: 100%; /* 부모 폭 기준 */
  background-color: white;
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  z-index: 1;
}

.bottom {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.list-group {
  overflow-y: auto !important;
  scroll-behavior: auto !important;
  width: 100%;
  padding: 0.2rem 0.3rem !important;
}
.list-group-item.active{
  color: #292929 !important;
  border-color: #e8f7ed !important;
  background-color: #e8f7ed !important;
}
.dataTables_info {
  padding-top: 0 !important;
}

/* #dataTable_info {
  padding: 0 !important;
} */

.custom-length {
  position: relative;
  width: 75px;
  margin-right: 13px;
  display: inline-block;
}
.custom-length select {
  appearance: none !important; /* 기본 화살표 숨기기 */
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  padding: 0.3rem 1rem 0.3rem 0.7rem !important;
  width: 100% !important;
  background-color: var(--bs-body-bg) !important;
  background-clip: padding-box !important;
  border: 1px solid #d3dbd5 !important;
  border-radius: 3rem !important;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
  font-size: 16px !important;
  color: var(--bs-body-color) !important;
  outline: none !important;
}

.custom-length .custom-arrow {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important; /* select 오른쪽에 아이콘 배치 */
  transform: translateY(-50%) !important;
  pointer-events: none !important; /* 클릭 방지 */
  color: #555 !important; /* 화살표 색상 */
  font-size: 16px !important; /* 아이콘 크기 */
}

.dt-search {
  /* width: 40%; */
  flex-shrink: 0;
  width: 217px !important;
  height: 40px;
  display: flex;
  align-items: center;
  border: 0.1rem solid transparent;
  border-radius: 3rem;
  margin-top: 0 !important;
}

.dt-search input{
  margin-left: 0 !important;
}

#custom-search{
  width: 100%;
  border: none;
  padding: 0.3rem 1rem !important;
  border-radius: 3rem;
  border: 1px solid #d3dbd5 !important;
  background-color: white !important;
}

.input-wrapper:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

.custom-search-input {
  flex-grow: 1 !important;
  width: auto !important;
  border: none !important;
  padding: 0.3rem 1rem !important;
  border-radius: 3rem !important;
  border: 1px solid #d3dbd5 !important;
  background-color: #fff !important;
}

.custom-search-button {
  position: absolute;
  top: 15%;
  right: 15px;
  background-color: transparent;
  border: none;
  z-index: 1;
}

.custom-search-button img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

.dataTables_filter {
  height: 40px;
  display: flex;
  align-items: center;
  border: 0.1rem solid transparent;
  border-radius: 3rem;
  margin-top: 0;
}
.dt-empty{
  padding-left: 1rem !important;
  text-align: left !important;
}
.dt-paging {
  position: fixed;
  bottom: 30px;
  left: calc(230px + (100% - 230px)/2);
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  /* width: calc(100% - 230px); */
  max-width: 768px;
}

.dt-paging nav {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding: 0.5rem !important;
  background-color: white !important;
  border-radius: 50px !important;
  box-shadow: 0 0 5px 0 #e0e5e8 !important;
  cursor: pointer !important;
}
.dt-paging-button {
  font-size: 14px !important;
}
.dt-paging-button.first, .dt-paging-button.last{
  display: none !important;
}
.dt-paging-button.disabled.previous:hover{
  border: transparent !important;
}
div.dt-container div.dt-paging .dt-paging-button.current,
div.dt-container div.dt-paging .dt-paging-button.current:hover {
  color: white !important;
  border: none !important;
  border-radius: 50px !important;
  background-color: transparent !important;
  background: #43bd6a !important;
}
div.dt-container div.dt-paging .dt-paging-button:hover {
  border: 1px solid #43bd6a;
  border-radius: 50px !important;
  background: #fff !important;
  color: #43bd6a !important;
}

i {
  font-size: 1rem;
}

h6 {
  color: #566a7f !important;
}

ul,
li {
  list-style: none;
  text-decoration: none;
  padding: 0;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}
#dateRange{
  position: relative;
}
.daterangepicker{
  position: absolute;
  font-family: 'Pretendard-Regular' !important;
  /* left: 280px !important; */
  z-index: 1 !important;
}

.start-date, .end-date{
  background-color: #43bd6a !important;
  border-color: transparent;
  color: #fff !important;
}
.cancelBtn{
  border: 1px solid #43bd6a !important;
  color: #43bd6a !important;
}
.golist-button {
  display: flex;
  align-items: center;
  background-color: #e6f5ed;
  color: #292929;
  border: none;
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s;
}

.golist-button:hover {
  background-color: #43bd6a;
  /* 호버시 색상 변화 */
  color: #fff;
}

.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #43bd6a;
  color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.icon-container i {
  font-size: 1rem;
}

.btn {
  box-shadow: none !important;
}
/* .btn:focus {
  border: none !important;
} */

.btn-primary,
.btn-outline-primary {
  color: #fff !important;
  border-color: #43bd6a !important;
  background: #43bd6a !important;
}
.btn-primary,
.btn-outline-primary:hover {
  color: #fff;
  background-color: #43bd6a;
  border-color: #43bd6a;
  box-shadow: 0 0 5px 0 #e0e5e8 !important;
  transform: translateY(-1px);
}

#datatablebtn {
  margin-top: 0.5rem !important;
}

#printSelectedRows,
#smsSendList {
  background-color: #959595 !important;
  color: #fff !important;
}

#smsSelectedRows {
  background-color: #00a7e4 !important;
  color: #fff !important;
}

#orderSelectedRows {
  background-color: #00a7e4 !important;
  color: #fff !important;
}

#deleteSelectedRows {
  background-color: #e10101 !important;
  color: #fff !important;
}

.btn-group {
  position: relative;
  cursor: pointer;
  /* 부모 요소에 상대 위치를 부여해 자식 요소 위치를 고정 */
}

.btn-group > .btn {
  flex: 0 !important;
  border: none;
  --bs-btn-padding-x: 0rem !important;
  --bs-btn-padding-y: 0rem !important;
}

.header-480 > .btn-group {
  position: relative;
  right: 0;
}
.hamburger480{
  display: none;
}
.btn-group .dropdown-menu {
  position: absolute;
  left: auto;
  right: 0 !important;
  transform: none !important;
  /* 트랜스폼 제거 */
  padding: 0% 0% 50% 0% !important;
  margin-top: 10px;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.25);
  max-width: 265px;
  height: 235px;
  /* 최대 높이 설정 */
  overflow: hidden;
  /* 기본적으로 스크롤 숨김 */
}

.jepum {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dropdown-item {
  font-size: 1rem;
  display: block;
  width: 100%;
  padding: 0% !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.input-group-text {
  border: 1px solid #d3dbd5 !important;
}

/* .input-group:focus-within .input-group-text {
        border-color: #28a745 !important;
        border-width: 1px !important;
      } */

/* .navbar {
        z-index: 99 !important;
      } */

.allimtit {
  text-align: center !important;
  border-bottom: 1px solid #d9dee3 !important;
  font-size: 1rem !important;
}

.card {
  --bs-card-spacer-y: 0rem !important;
  --bs-card-spacer-x: 0rem !important;
  padding: 1rem !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 0 5px 0 #e0e5e8 !important;
}
.card2 {
  padding: 0.8rem !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 0 5px 0 #e0e5e8 !important;
}


.hd-left {
  width: 100%;
  padding: 0rem 1rem;
}
/* 버튼 스타일 */
.arrow-btn {
  position: absolute;
  bottom: 50%;
  transform: translateY(50%);
  right: -28px;
  font-size: 20px;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  z-index: -1;
}
.arrow-btn2 {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  z-index: 2;
}
.offcanvas-header{
  padding: 1.5rem 1rem 0.5rem 1rem !important;
}
.offcanvas-body {
  padding: 0 1rem 1rem 1rem !important;
  height: calc(100% - 110px);
  overflow-y: scroll !important;
  margin-bottom: 2rem;
}
.accordion-wrapper {
  flex-grow: 1; /* 남은 높이 차지 */
  overflow: hidden; /* 내부 요소가 넘치지 않도록 */
}
.side {
  overflow-y: auto !important; /* 스크롤 활성화 */
  height: 100%;
  border: none !important;
  --bs-accordion-border-color: none !important;
  padding: 0rem 1rem !important;
  white-space: nowrap;
  scroll-behavior: auto !important;
}
.mobile-side {
  height: 100%;
  padding-right: 16px;
  border: none !important;
  overflow-y: auto !important;
  scroll-behavior: auto !important;
  --bs-accordion-border-color: none !important;
}
.mobile-body{
  overflow-y: unset !important;
}
.side-item {
  background-color: transparent !important;
  border: none !important;
  color: white !important;
}
.side-header {
  color: white !important;
  background-color: transparent !important;
}
.side-header > button {
  font-size: 18px !important;
  font-weight: bold !important;
}
.side .side-item.active,
.mobile-side .side-item.active {
  box-shadow: none !important;
}
.side-button,
.mobile-side-button {
  background-color: transparent !important;
  color: white !important;
  padding: 0.3rem 0rem !important;
}
.mobile-guide{
  padding: 0.3rem 0rem !important;
  font-size: 18px !important;
  font-weight: 500;
  color: #616161 !important;
  cursor: pointer !important;
}
.guide{
  background-color: transparent !important;
  color: white !important;
  padding: 0.3rem 0rem !important;
  font-size: 18px !important;
  font-weight: bold !important;
  cursor: pointer !important;
}
.side-button::after,
.mobile-side-button::after {
  color: white !important;
}
.side-button.collapsed::after {
  transform: rotate(0deg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") !important;
}
.side-button:not(.collapsed)::after {
  transform: rotate(0deg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E") !important;
}
.mobile-side-button.collapsed::after {
  transform: rotate(0deg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23919191' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") !important;
}
.mobile-side-button:not(.collapsed)::after {
  transform: rotate(0deg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23919191' d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E") !important;
}
.side-button.collapsed.active::after {
  transform: rotate(0deg) !important;
}
.side-button:not(.collapsed).active::after {
  transform: rotate(0deg) !important;
}
/* .mobile-side-button.collapsed.active::after {
  transform: rotate(180deg) !important;
} */
/* .mobile-side-button:not(.collapsed).active::after {
  transform: rotate(180deg) !important;
} */

.side-button:focus {
  outline: none !important;
  box-shadow: none !important;
}
.side-body {
  padding: 0 !important;
}
.side-body > ul > li {
  display: flex;
  padding: 0.8rem 1rem 0.8rem 1rem !important;
  border-radius: 30px !important;
  cursor: pointer !important;
  align-items: center;
  justify-content: space-between;
}
.mobile-side > .side-item > .side-collapse > .side-body > ul > li {
  padding: 0.8rem 1rem 0.8rem 2.8rem !important;
  border-radius: 30px !important;
  cursor: pointer !important;
}
.modal-fullscreen .btn-close {
  box-shadow: none;
  transform: translate(0, 0) !important;
}

.modal .btn-close {
  background-color: #fff;
  border-radius: 0.5rem;
  opacity: 1;
  padding: 0.635rem;
  transition: all 0.23s ease 0.1s;
}
.badge > .btn-close{
  --bs-btn-close-bg : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  width: 0.8rem;
  height: 0.8rem;
  background: transparent var(--bs-btn-close-bg) center / 1rem auto no-repeat !important;
  padding: 0 !important;
}
#scrollTopBtn {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 20px;
  background-color: #ffffff;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  color: #292929;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
}
#scrollTopBtn:hover {
  transform: scale(1.1);
}
.icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #616161;
}
p {
  margin: 0 !important;
  padding: 0 !important;
  color: #616161 !important; 
}
.guide > .goGuide{
  color: white !important;
}
.main-color {
  color: #292929 !important;
}
#fc2 {
  color: #9b9b9b;
}

input {
  border: 1px solid #d3dbd5 !important;
  border-radius: 5px;
}
input::-webkit-search-cancel-button {
  -webkit-appearance: none; /* 크롬, 사파리 */
  appearance: none;
}

input::-ms-clear {
  display: none; /* IE, Edge */
}
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #d9d9d9 !important;
  border-radius: 30px !important;
  padding: 0 !important;
  background-color: white !important;
  margin-left: 0 !important;
}
.inputWrap {
  width: 100% !important;
  position: relative !important;
  display: inline-block !important;
}

.inputWrap button[type="reset"], #reset-search {
  position: absolute !important;
  top: 5px !important;
  right: 4px !important;
  border: transparent !important;
  color: #d3dbd5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  background-color: transparent;
}
.inputWrap button[type="reset"] > i, #reset-search > i {
  font-size: 25px !important;
}
.vr {
  align-items: center;
  height: 10%;
  background-color: 1px solid #e8eaed;
}
/* 또는 포커스 시 테두리 색상을 원하는 색상으로 변경 */
.custom-select {
  position: relative;
  display: inline-block;
  width: 200px;
  display: flex;
  align-items: center;
  gap: 0.5rem
}
.custom-select select {
  appearance: none !important; /* 기본 화살표 숨기기 */
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  padding: 0.5rem 1rem 0.5rem 0.7rem !important;
  width: 100% !important;
  background-color: var(--bs-body-bg) !important;
  background-clip: padding-box !important;
  border: 1px solid #d3dbd5 !important;
  border-radius: var(--bs-border-radius) !important;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
  font-size: 16px !important;
  color: #616161 !important;
  outline: none !important;
}

.custom-select .custom-arrow {
  position: absolute !important;
  top: 50% !important;
  right: 15px !important; /* select 오른쪽에 아이콘 배치 */
  transform: translateY(-50%) !important;
  pointer-events: none !important; /* 클릭 방지 */
  color: #555 !important; /* 화살표 색상 */
  font-size: 16px !important; /* 아이콘 크기 */
}

select {
  border: 1px solid #d3dbd5 !important;
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
input:focus,
textarea:focus,
select:focus {
  border: 1px solid #d3dbd5 !important;
  box-shadow: none !important;
  outline: none !important;
}

select option {
  background-color: #fff !important;
  color: var(--gray) !important;
  border: none !important;
  box-shadow: 0 0 5px #ebebeb !important;
}
select option:hover {
  background-color: white !important;
  color: #83D39C !important;
}
select option:checked {
  background-color: #83D39C !important;
  color: white !important;
}
.form-check-input:checked {
  background-color: #28a745;
  border-color: #28a745;
  box-shadow: 0 0px 0 3px rgba(40, 167, 69, 0.2);
}
.form-check-input:not(.bs-switch):checked,
.form-check-input:not(.bs-switch)[type="checkbox"]:indeterminate {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  box-shadow: 0 0px 0 3px rgba(40, 167, 69, 0.2) !important;
}

.bs-switch {
  cursor: pointer;
  appearance: none;
  position: relative;
  border-radius: 1.25em;
  background-color: #cccc;
  width: 3.5rem;
  height: 1.8rem;
}

.bs-switch::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  transform: scale(0.8);
  background-color: white;
  box-shadow: 0 3px 5px #aaaaaa;
  transition: left 250ms linear;
}

.bs-switch:checked {
  background-color: #28a745 !important;
  border-color: transparent !important;
  box-shadow: 0 0px 0 3px rgba(40, 167, 69, 0.2) !important;
}

.bs-switch:checked > .bs-switch {
  border-color: transparent !important;
}
.bs-switch:checked > .bs-switch::before {
  border-color: transparent !important;
}

.bs-switch:checked::before {
  background-color: white;
  border-color: transparent !important;
  box-shadow: 0 3px 5px #1b7430 !important;
  left: 1.5em;
}
.popover {
  background-color: white !important;
  color: #292929 !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  box-shadow: 0 0 5px 0 #e0e5e8 !important;
}
.popover-arrow::after {
  display: none !important;
}

.popover-arrow::before {
  display: none !important;
}
#productIconblack {
  display: none;
}

.gongji {
  float: right;
}

.header-480 {
  display: none;
}
html, body {
  font-family: 'Pretendard' !important;
  font-size: 14px;
  /* height: 100%; */
  color: #616161 !important;
  /* background-color: #f5f7f8 !important; */
  background-color: white !important;
  scroll-behavior: auto !important;
  overflow: auto !important;
  overflow-x: hidden;
  height: 100vh;
}

/* body.no-scroll {
  overflow: hidden !important;
} */

.right-section,
#wrap,
.x-margin-header,
#onboardingOverlay,
#right,
.dt-paging{
  transition: max-width 0.3s ease, width 0.3s ease, left 0.3s ease, transform 0.3s ease !important;
}

.layout {
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  display: flex;
  height: 100vh;
  overflow: hidden;
}

#hd-end {
  min-width: 230px;
  position: sticky;
  top: 0;
  height: 100vh;
  background-color: #43bd6a;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0;
}

.right-section{
  width: 100%;
  max-width: calc(1366px - 200px);
  min-width: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

section {
  flex: 1;
  height: 100vh;
  overflow-y: auto;
  min-width: 0;
  padding: 2rem 3rem;
  background: white;
  scroll-behavior: auto !important;
}
.x-margin-header {
  position: sticky;
  top: 0;
  height: 70px;
  min-width: 0;
  background-color: white;
  box-shadow: 0 0 5px 0 #e0e5e8;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem !important;
}

.page-title {
  font-size: 20px;
  color: #616161 !important;
  font-weight: 600;
  padding: 0 !important;
  margin: 0 !important;
}
.page-title-1, .page-title-2, .page-title-3, .page-title-4, .mypage{
  color: #d8d8d8 !important; 
}
.bell {
  width: 23px;
  height: 23px;
}
.alarm-circle{
  position: absolute;
  border-radius: 50px;
  top: -10px;
  right: -13px;
  background-color: #ff5656;
  padding: 0 0.5rem;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.goMypage{
  cursor: pointer;
}
.namenim {
      display: flex;
      align-items: center;
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
.namenim:hover > .fa-gear{
  animation: spin 3s linear infinite;
}
#search-form {
  position: relative !important;
  width: 60% !important;
}

#search-button {
  position: absolute;
  top: 27%;
  right: 25px;
  width: 20px;
  height: 20px;
  background-color: transparent !important;
  border: none;
  z-index: 999;
}

#search-button i {
  background-color: none !important;
  position: absolute;
  color: #6f6f6f;
  top: 0;
  left: 50%;
}

#search-input {
  position: relative;
  padding-left: 15px !important;
  border: none !important;
  background-color: #f3f3f3 !important;
}

#loginSection {
  width: 100%;
}

#allimlogin {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5%;
  margin: 0 !important;
}
.filter-btn {
  border: 1px solid #d9d9d9 !important;
  border-radius: 20px !important;
  padding: 0.3rem 0.4rem !important;
}
.fixed-nav {
  display: none;
}
#fixed {
  display: none !important;
}
.top-11 {
  top: 25% !important;
}

.start-97 {
  left: 97.5% !important;
}

.border {
  border: 1px solid #d9dee3 !important;
}

.border-light {
  border-color: rgba(67, 89, 113, 0.1) !important;
}

.dropdown-toggle::after {
  display: none !important;
}

#allimbtn {
  border: none !important;
  padding: 0 !important;
  --bs-btn-padding-x: 0rem !important;
  --bs-btn-padding-y: 0rem !important;
}

#megaphone {
  color: #43bd6a !important;
}

.modal-body > #myList > .nav-link {
  padding: 0.5rem 1.25rem !important;
}

.modal-header {
  /* border-bottom: none !important; */
  padding: 1rem 1rem 0.7rem 1rem !important;
  /* padding: 1.5rem 1.5rem 0.25rem !important; */
}
/* .modal-content {
  position: fixed !important;
  width: 100% !important;
  height: 90vh !important;
  margin: 0 !important;
  top: 40% !important;
  left: 50% !important;
  transform: translate(-50%, -40%) !important;
} */
.modal-content > .modal-body {
  max-height: 60vh !important;
  min-height: 45vh !important;
  overflow: auto !important;
  color: #495057 !important;
  padding: 0.5rem 1rem;
}

#modalContent > .modal-body {
  max-height: 60vh !important;
  min-height: 45vh !important;
  overflow: scroll !important;
  color: #495057 !important;
}

h5 {
  font-size: 18px !important;
}

.nav-pills .nav-link {
  width: 100%;
  color: #fff !important;
  display: block !important;
  padding: 0.8rem 0 0.8rem 1rem !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out !important;
  border-radius: 10px !important;
}

/* .nav-pills .nav-link {
        background-color: transparent;
        border-bottom: 0.3rem solid #d3dbd5 !important;
      } */
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
  background-color: #67c986 !important;
  color: #fff !important;
  border-bottom: none !important;
}
.btn-close {
  background: transparent
    url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate%28-225.000000, -250.000000%29'%3E%3Cg id='Icon-Color' transform='translate%28225.000000, 250.500000%29'%3E%3Cuse fill='%23a1acb8' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.5' fill='%23a1acb8' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
    center / 0.9em auto no-repeat !important;
    outline: none !important;
    box-shadow: none !important;
}

.modal-header .btn-close {
  background: transparent
    url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate%28-225.000000, -250.000000%29'%3E%3Cg id='Icon-Color' transform='translate%28225.000000, 250.500000%29'%3E%3Cuse fill='%23a1acb8' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.5' fill='%23a1acb8' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
    center / 0.9em auto no-repeat !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0.4rem 0.2rem !important;
  margin-top: -0.6rem !important;
  transform: none !important;
}
.btn-close:hover{
  transform: translate(0, 0) !important;
}
.offcanvas-header .btn-close {
  margin: 0 !important;
}
/* .modal-header .modal-close {
  background: transparent
    url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate%28-225.000000, -250.000000%29'%3E%3Cg id='Icon-Color' transform='translate%28225.000000, 250.500000%29'%3E%3Cuse fill='%23a1acb8' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.5' fill='%23a1acb8' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
    center / 0.9em auto no-repeat !important;
    border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0.4rem 0.2rem !important;
  width: 1.5em;
  height: 1.5em;
  margin-top: -0.6rem !important;
} */

.dropdown-item {
  font-size: 1rem !important;
  display: block !important;
  width: 100% !important;
  padding: 0% !important;
  white-space: nowrap !important;
  /* 텍스트가 한 줄로 표시되도록 설정 */
  overflow: hidden !important;
  /* 넘치는 텍스트를 숨김 */
  text-overflow: ellipsis !important;
  /* 넘치는 텍스트를 '...'으로 표시 */
}

.scrollable-nav {
  margin-top: 1rem !important;
}
#pills-tab {
  width: 100% !important;
}
.nav-item {
  width: 100% !important;
}
.scrollable-custom {
  width: 100% !important;
}

.filter-btn {
  border: 1px solid #d9d9d9 !important;
  border-radius: 20px !important;
  padding: 0.3rem 0.4rem !important;
}
.btn-custom,
.btn-outline-custom {
  color: #43bd6a !important;
  border-color: #43bd6a !important;
  background: transparent !important;
}

.btn-custom:hover,
.btn-outline-custom:hover {
  color: #fff !important;
  background-color: #43bd6a !important;
  border-color: #43bd6a !important;
  box-shadow: 0 0px 0 3px rgba(40, 167, 69, 0.2) !important;
  transform: translateY(-1px) !important;
}
#toggle-allmenu {
  display: flex;
}
.title-design {
  padding: 0 !important;
}
@media screen and (max-width: 768px) {
  .x-margin{
    width: 100% !important;
  }
  section {
    width: 100% !important;
    height: 100% !important;
    padding: 20px 1.5rem 0 1.5rem;
  }
  .header-480 {
    position: sticky;
    top: 0;
    width: 100%;
    height: 72px;
    z-index: 3;
    padding: 1rem 1.5rem !important;
    /* background-color: #f5f7f8; */
    background-color: white;
    box-shadow: 0 0 5px 0 #e0e5e8;
    margin-top: 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #scrollTopBtn {
    bottom: 100px;
  }

  .back-button {
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #f5f7f8; */
    background-color: white;
    border-radius: 50%;
    height: 40px;
    cursor: pointer;
    transition: background-color 0.3s;
    position: relative;
  }

  .back-button i {
    font-size: 20px;
    color: #616161 !important;
  }

  .header-480-tit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .page-title {
    font-size: 20px;
    color: #616161 !important;
    font-weight: 600;
    padding: 0 !important;
    margin: 0 !important;
  }

  .bell {
    width: 24px;
    height: 24px;
  }

  .header {
    display: none;
  }

  #onboardingOverlay{
    width: 100% !important;
    top: 70px;
    height: calc(100% - 155px);
  }

  .arrow-btn2 {
    display: none !important;
  }

  .modal .modal-dialog:not(.modal-fullscreen) {
      padding: 0 0.5rem !important;
      padding-left: 0;
  }

  #password {
    border-radius: var(--bs-border-radius);
  }
  .input-group-text {
    display: none;
  }
  .x-margin-header {
    display: none !important;
  }
  #golist {
    display: none !important;
  }
  
  .daterangepicker{
    left: 50px !important;
  }

  .daterangepicker .drp-calendar{
    float: none !important;
    padding: 8px 8px 8px 8px;
  }

  #fixed {
    display: block !important;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    padding: 0.8rem 1rem;
    background-color: #fff;
    box-shadow: 0 0px 5px 0 #e0e5e8;
    border-radius: 20px 20px 0 0;
    z-index: 1;
  }

  #saveBtnmob {
    margin: 0 auto;
    width: 93%;
    color: #fff;
    background-color: #01a149;
    border: none;
    border-radius: 5px;
    box-shadow: none;
    transition: all 0.2s ease-in-out;
  }

  .top {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .top .d-flex {
    margin-top: 0.3rem;
  }

  .dataTables_wrapper .dataTables_filter input {
    border: 1px solid #d3dbd5 !important;
    border-radius: 3px;
    padding: 5px;
    background-color: transparent;
    margin-left: 0 !important;
  }

  .dt-search {
    width: 100% !important;
  }
  .custom-search-input {
    width: 99%;
    left: 0.5%;
    padding-left: 5% !important;
  }

  /* .dataTables_filter {
        margin-bottom: 2%;
      } */

  .hidden {
    display: none !important;
  }

  .dataTables_filter {
    width: 100% !important;
  }
  /* #dataTabletab01_info {
        margin-top: 10%;
      }

      #dataTabletab02_info {
        margin-top: 10%;
      } */

  #hd-down {
    width: 100%;
    height: 35px !important;
    margin-bottom: 10%;
  }

  #hd-end {
    display: none;
  }

  .navbar-brand,
  #allimlogin,
  .bx {
    display: none !important;
  }

  .navbar-expand-sm .navbar-collapse {
    display: block !important;
  }

  .navbar-nav {
    display: none !important;
  }

  #search-form {
    display: block;
    width: 100% !important;
    margin-top: 10%;
    position: relative !important;
  }

  #search-input {
    width: 100%;
  }

  #search-button {
    position: absolute;
    top: 27% !important;
    left: 10px !important;
    width: 20px;
    height: 20px;
    background-color: transparent !important;
    border: none;
    z-index: 999;
  }

  #search-button i {
    background-color: none !important;
    position: absolute;
    color: #6f6f6f;
    top: 0;
    left: 0;
  }

  #hd-container {
    display: block;
    margin: 0;
    padding: 0;
  }

  #hd-left {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
  }

  .h-logo-full {
    display: none;
  }

  .fixed-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    z-index: 1;
    background-color: #fff;
    box-shadow: 0 0px 5px 0 #e0e5e8;
    border-radius: 20px 20px 0 0;
  }

  .fixed-nav li {
    width: 20%;
    text-align: center;
    padding-top: 3%;
    padding-bottom: 2%;
    color: #d8d8d8;
    text-decoration: none;
  }
  
/* 로그인 상태일 때만: li 총 5개 */
.fixed-nav.five-items > li {
  width: 25%;
}

/* 비로그인 상태일 때: li 총 4개 */
.fixed-nav:not(.five-items) > li {
  width: 25%;
}

  .fixed-nav li > p {
    font-size: 1rem !important;
    margin-bottom: 0 !important;
  }

  .fixed-nav li > i {
    font-size: 1.5rem !important;
  }

  .custom-card {
    padding: 0 !important;
    height: 55px;
  }

  .custom-card > img {
    display: block;
    margin: 0 auto;
    width: 23px;
    height: 24px;
    margin-top: 6px;
    margin-bottom: 3px;
  }

  .title-design {
    display: none;
  }
  .dt-paging {
    /* width: 100%; */
    left: 50%;
    transform: translateX(-50%);
    bottom: 7rem;
}
}

@media screen and (max-height: 538px) {
  .side {
    max-height: 410px;
  }
}
@media screen and (max-height: 510px) {
  .side {
    max-height: 400px;
  }
}
@media screen and (max-height: 497px) {
  .side {
    max-height: 390px;
  }
}
@media screen and (max-width: 575px) {
  #dataTable_filter {
    height: 45px;
  }

  .custom-search-button {
    position: absolute;
    top: 17%;
  }

  .list-group > .text-center{
    display: none !important;
  }
}

@media screen and (max-width: 550px) {
  .fixed-nav li > p {
    font-size: 0.9rem !important;
    margin-bottom: 0 !important;
  }

  .fixed-nav li > i {
    font-size: 1.3rem !important;
  }

  .custom-card > img {
    display: block;
    margin: 0 auto;
    width: 20px;
    height: 22px;
    margin-top: 6px;
    margin-bottom: 2.5px;
  }
}

@media screen and (max-width: 520px) {
  /* 기본적으로 모든 페이지 번호 숨기기 */
  div.dt-container div.dt-paging .dt-paging-button {
    display: none !important;
  }

  /* "이전"과 "다음" 버튼은 항상 표시 */
  div.dt-container div.dt-paging .dt-paging-button.previous,
  div.dt-container div.dt-paging .dt-paging-button.next {
    display: inline-block !important;
  }

  /* 현재 페이지 버튼을 항상 표시 */
  div.dt-container div.dt-paging .dt-paging-button.current {
    display: inline-block !important;
  }

  /* 현재 페이지의 이전 버튼 */
  div.dt-container div.dt-paging .dt-paging-button.current ~ .dt-paging-button:not(.next):first-of-type {
    display: inline-block !important;
  }

  /* 현재 페이지의 다음 버튼 */
  div.dt-container div.dt-paging .dt-paging-button.current + .dt-paging-button:not(.next) {
    display: inline-block !important;
  }
}

@media screen and (max-width: 380px) {
  .daterangepicker{
    left: 50% !important;
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 367px) {
  #search-form {
    margin-top: 15%;
  }
}