

/* display flex*/


/** Display**/

.d-flex {
  display: flex !important;
}

.d-flex.row {
  flex-direction: row !important;
}
.d-flex.col {
  flex-direction: column !important;
}

.flex-direction-row {
  flex-direction: row !important;
}

.flex-direction-col {
  flex-direction: column !important;
}

.flex-start {
  justify-content: flex-start !important;
}

.flex-end {
  justify-content: flex-end !important;
}

.flex-space-bettween {
  justify-content: space-between !important;
}

.flex-center {
  justify-content: center !important;
}

.d1 {
  flex: 1;
}

.d2 {
  flex: 2;
}

.d3 {
  flex: 3;
}

.d4 {
  flex: 4;
}

.d5 {
  flex: 5;
}

.d6 {
  flex: 6;
}

.d7 {
  flex: 7;
}

.d8 {
  flex: 8;
}

.d9 {
  flex: 9;
}

.d10 {
  flex: 10;
}

.d11 {
  flex: 11;
}

.d12 {
  flex: 12;
}

.gap-1-rem {
  gap: 1rem;
}

.gap-harf-rem {
  gap: 0.5rem;
}


/* common */
.row {
  padding-bottom: 0;
}

/* nav */

header {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1rem 1.875rem;
  background-color: var(--Primary1);
  background-image: linear-gradient(90deg, var(--Primary1) 0%, #3595d2 100%);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}

header h1 {
  flex-shrink: 0;
}

header h1>a {
  color: #fff;
  font-size: 20px;
  word-break: keep-all;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

header h1>a>span {
  padding-top: 12px;
  color: #fff;
  flex-shrink: 0;
}

.navbar {
  width: 100%;
}

.navbar .container {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.navbar .container .leftItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
}

.navbar h1 {
  color: #fff;
  cursor: default;
  font-size: 1.1875rem;
}

.navbar h1 img {
  height: 2.5rem;
}

.navbar .gnb-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0px;
}

.navbar .gnb-menu li a {
  display: flex;
  flex-direction: row;
  gap: 0.625rem;
  align-items: center;
  padding: 1rem 1.25rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 0.625rem;
  box-sizing: border-box;
}

.navbar .gnb-menu li a.active {
  background-color: rgba(0, 0, 0, 0.2);
}

.navbar .rightItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.navbar .rightItem a.btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.375rem;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 1rem;
}

.navbar .rightItem .userName {
  font-size: 0.875rem;
  color: #fff;
}

header .mBtn {
  top: 50%;
  transform: translateY(-50%);
}

.mBtn .bar {
  background-color: #fff;
}

@media (max-width: 1200px) {
  header {
    gap: 1rem;
    padding: 1rem 1.5rem;
  }

  header > h1 > img {
    height: 2rem;
  }

  .navbar .gnb-menu li a {
    font-size: 0.9375rem;
  }

  .navbar .gnb-menu li a > img {
    display: none;
  }

  .selectric .label,
  .navbar .rightItem a.btn {
    font-size: 0.9375rem;
  }
}

@media (max-width: 960px) {
  .navbar {
    position: fixed;
    top: 0;
    right: 0;
    width: 0 !important;
    height: 100%;
    height: calc(var(--vh, 1vh) * 100);
    background: #fff;
    overflow-x: hidden;
    transition: all ease-out 0.3s;
    z-index: 990;
  }

  .navbar.active {
    width: 460px !important;
    background-color: var(--Primary1);
  }

  .navbar .container {
    flex-direction: column-reverse;
    padding-top: 5rem;
    gap: 1.5rem;
  }

  .navbar .container .leftItem,
  .navbar .gnb-menu {
    flex-direction: column;
  }

  .navbar .gnb-menu li a {
    width: 100%;
  }

  .navbar .gnb-menu li a.active {
    background-color: rgba(255, 255, 255, 0.2);
  }

  .navbar .gnb-menu li a > img {
    display: block;
  }

  .headerGnb .headerInner .gnb {
    flex-direction: column !important;
  }

  header .mBtn.active .bar {
    background-color: #fff !important;
  }

  .navbar .rightItem {
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    width: 100%;
    padding-bottom: 1.5rem;
  }
}

@media (max-width: 640px) {
  .navbar.active {
    width: 100% !important;
  }

  .navbar .rightItem {
    flex-wrap: wrap;
  }
}

/* content area */

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: start;
  padding: 1.875rem;
  gap: 2.5rem;
  margin-top: 5.3125rem;
}

@media (max-width: 960px) {
  .wrapper {
    padding: 1rem;
  }
}

/* aside */

.wrapper .asideWrap {
  width: 15rem;
}

.wrapper .asideWrap .asideTit {
  background-color: var(--Primary1);
  padding: 1.25rem 0;
  text-align: center;
  font-size: 1.625rem;
  font-weight: 700;
  color: #fff;
  border-radius: 1.25rem 1.25rem 0px 0px;
}

.wrapper .asideWrap .asideNav {
  border: 0.0625rem solid #ced4da;
}

.wrapper .asideWrap .asideNav li a {
  display: flex;
  padding: 1rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-bottom: 0.0625rem solid #ced4da;
  color: var(--Greyscale8);
}

.wrapper .asideWrap .asideNav li a::after {
  display: block;
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.39922 17.3002L8.69922 16.6002L13.2992 12.0002L8.69922 7.4002L9.39922 6.7002L14.6992 12.0002L9.39922 17.3002Z' fill='%23333333'/%3E%3C/svg%3E%0A");
}

.wrapper .asideWrap .asideNav li:last-child > a {
  border-bottom: 0px;
}

.wrapper .asideWrap .asideNav li:last-child .sub-menu {
  border-bottom: 0px;
}

.wrapper .asideWrap .asideNav li.toggle > a.active {
  color: var(--Primary1);
  border-right: 0.25rem solid var(--Primary1);
  font-weight: 700;
}

.asideNav .toggle li > a.active {
  font-weight: 700;
}

.wrapper .asideWrap .asideNav li.open .sub-menu {
  display: block;
}

.wrapper .asideWrap .asideNav .sub-menu {
  display: none;
  background: #f1f3f5;
  border-bottom: 0.0625rem solid #ced4da;
}

.wrapper > .container {
  max-width: 100%;
}

/* content header */

.contentWrap {
  width: 100%;
}

.contentWrap .container {
  width: 100%;
  max-width: 100%;
}

.conTop .conTit {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.conTop .conTit h3 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--Greyscale8);
}

/* .conTop .conTit .breadcrumb {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0px;
} */

.conTop .conTit .breadcrumb .breadcrumbItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0px;
}

.conTop .conTit .breadcrumb .breadcrumbItem a {
  color: #b0b0b0;
}

.conTop .conTit .breadcrumb .breadcrumbItem::after {
  display: block;
  content: "";
  height: 0.625rem;
  width: 0.375rem;
  background: url("../assets/icon/common/breadcrumb_arrow.svg") center no-repeat;
}

.conTop .conTit .breadcrumb .breadcrumbItem:last-child a {
  color: #666666;
}

.conTop .conTit .breadcrumb .breadcrumbItem:last-child::after {
  display: none;
}

/* ------------------------------------------------------ */

/* 입력양식 스타일 */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"] {
  border: 0.0625rem solid var(--Greyscale4);
  padding: 0.75rem 0.875rem;
  font-size: 1rem;
}

/* 숫자입력 시 화살표 삭제 */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="text"]:disabled {
  background-color: var(--Greyscale2);
  color: var(--Greyscale6);
}

input[type="file"]::file-selector-button {
  position: absolute;
  background: var(--Primary1);
  color: #fff;
  border: 0;
  padding: 0.75rem 1rem;
  font-family: "Pretendard GOV";
  font-size: 1rem;
  border-radius: 0.25rem;
  top: 0;
  right: 0;
  margin: 0;
}

input[type="file"] {
  align-self: stretch;
  font-size: 1rem;
  font-family: "Pretendard GOV";
  border: 0.0625rem solid var(--Greyscale4);
  border-radius: 0.25rem;
  position: relative;
  width: 100%;
  padding: 0.75rem 0.875rem;
  line-height: 1.375rem;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  border: 0.0625rem solid var(--Greyscale4);
}

input[type="checkbox"]:checked {
  background-color: var(--Primary1);
  border: 0.0625rem solid var(--Primary1);
}

input[type="checkbox"]::before {
  content: "✔";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  line-height: 0.0625rem;
  color: #fff;
}

textarea {
  border: 0.0625rem solid var(--Greyscale4);
  padding: 0.75rem 0.875rem;
}

button {
  cursor: pointer;
}

select.slcLst {
  width: 100%;
  border: 0.0625rem solid var(--Greyscale4);
  height: 10.312rem;
  font-size: 1rem;
}

/* 날짜선택 */
.DatePickerWrap {
  display: flex;
  flex-direction: row;
}

.DatePicker {
  flex-grow: 1;
  display: flex;
  align-items: stretch;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  max-width: 12.5rem;
  height: 3rem;
  background: #fff;
  border-radius: 0.5rem;
  box-sizing: border-box;
  border: 0.0625rem solid var(--Greyscale4);
}

/* .DatePicker.both {
  max-width: 16rem;
} */

.DatePickerWrap .DatePicker:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.DatePickerWrap .DatePicker:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}

.DatePicker > input {
  padding: 0.75rem 1rem;
  width: 100%;
  height: 100%;
  font-size: 1rem;
  flex-grow: 1;
  border-radius: 0.5rem;
  border: 0;
  align-self: stretch;
}

.DatePicker > input.datePickerInput::placeholder {
  color: #b5bec6 !important;
  font-size: 1rem;
}

.DatePicker > input:focus-visible {
  outline: transparent;
}

.DatePickerWrap + .DatePickerBtn {
  display: flex;
  flex-direction: row;
}

.DatePickerBtn > button {
  padding: 0.75rem 0.875rem;
  background-color: #fff;
  border: 0.0625rem solid var(--Greyscale4);
  border-right: 0;
}

.DatePickerBtn > button:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.DatePickerBtn > button:last-child {
  border-right: 0.0625rem solid var(--Greyscale4);
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.DatePickerBtn > button.on {
  background-color: var(--Primary1);
  color: #fff;
}

/* 스위치 */

.switchWrap {
  display: flex;
  width: 4.125rem;
  align-items: center;
}

.switchWrap label {
  display: block;
  position: relative;
  width: 4.125rem;
  height: 20.5rem;
  background: #d3d3d3;
  border-radius: 0.3125rem;
  transition: background 0.4s;
}

.switchWrap label::after {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 2.0625rem;
  height: 20.5rem;
  border-radius: 0.3125rem;
  background-color: var(--Primary1);
  transition: all 0.4s;
}

.switchWrap label::before {
  content: "Y";
  width: 2.0625rem;
  height: 20.5rem;
  font-size: 0.875rem;
  line-height: 20.5rem;
  position: absolute;
  left: 0px;
  top: 0;
  transition: all 0.4s;
  color: #fff;
  z-index: 1;
  text-align: center;
}

.switchWrap input[type="checkbox"]:checked + label {
  background: var(--Greyscale4);
}

.switchWrap input[type="checkbox"]:checked + label::after {
  left: 2.0625rem;
  background-color: var(--Greyscale6);
}

.switchWrap input[type="checkbox"]:checked + label::before {
  content: "N";
  color: #fff;
  left: 2.0625rem;
}

/* input + 설명/텍스트표기 */

.inputWrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 0.625rem;
  position: relative;
}

.inputWrap.top input {
  padding-right: 2.5rem;
}

.inputWrap.top .inputEtc {
  position: absolute;
  top: 50%;
  right: 0.625rem;
  transform: translateY(-50%);
}

/* 버튼영역 */

.buttonArea {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  gap: 0.625rem;
  font-size: 1.125rem;
}

.buttonArea.left {
  justify-content: flex-start;
}

.buttonArea.right {
  justify-content: flex-end;
}

.buttonArea.center {
  justify-content: center;
}

.buttonArea .buttonSec {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
}

button.btn,
a.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 6.25rem;
  padding: 0.625rem;
  gap: 0.3125rem;
  background-color: var(--Primary1);
  color: #fff;
  border-radius: 0.25rem;
  flex-shrink: 0;
}

button.btn.line,
a.line {
  border: 0.0625rem solid var(--Greyscale4);
  background-color: #fff;
  color: var(--Greyscale8);
}

button.sml,
a.btn.sml {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  min-width: 0;
  font-size: 1rem;
  font-weight: normal;
}

.boardBodyItem .buttonArea {
  margin: 0;
}

.adminTable .col.txt .buttonArea {
  margin: 0;
}

.adminTable .col.txt p {
  flex-shrink: 0;
}

/* ------------------------------------------------------ */
/* content component */

/* 검색바 */
.srchFltrWrap .subsearch {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.srchFltrWrap .subsearch .selectBox {
  width: 100%;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  border: 0.0625rem solid var(--Greyscale4);
  border-right: 0;
  font-size: 1rem;
  height: 3rem;
  border-radius: 0.5rem 0 0 0.5rem;
}

.subsearch .rightItem {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.subsearch .rightItem .searchBtn {
  background-color: var(--Primary1);
  color: #fff;
  padding: 0.75rem 1rem;
  height: 100%;
  width: 3.875rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 0.5rem;
}

.subsearch input[type="search"] {
  padding: 0 1rem;
  border: 0.0625rem solid var(--Greyscale4);
  width: 100%;
  border-radius: 0.5rem;
}

.subsearch .rightItem input {
  flex-grow: 1;
  padding: 0 1rem;
  height: 100%;
  border: 1px solid var(--Greyscale4);
  border-radius: 0px 0.5rem 0.5rem 0px;
}

.subsearch .searchBtn {
  background-color: var(--Primary1);
  color: #fff;
  padding: 0.75rem 1rem;
  height: 100%;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 0.5rem;
  margin-left: 0.625rem;
  flex-shrink: 0;
}

.srchFltrWrap .srchFltrItem p.tit {
  flex-shrink: 0;
  font-weight: 500;
  margin-left: 1rem;
}

.srchFltrWrap .srchFltrItem p.tit:first-of-type {
  margin-left: 0rem;
}

/* 팝업 */

html.noScroll {
  overflow: hidden;
}

.popupWrap {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
}

.popupWrap.on {
  display: block;
}

.popupWrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
}

.popupWrap .popupInner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 1200px;
  min-width: 480px;
  background-color: #fff;
  padding: 1.25rem;
  border-radius: 0.625rem;
  max-height: 80%;
  overflow-y: auto;
}

.popupWrap .popupInner .popupTop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 1.875rem;
}

.popupWrap .popupInner .popupTop > h5 {
  font-size: 1.5rem;
}

.popupCon.survey {
  border: 0.0625rem solid var(--Greyscale4);
}

.popupCon .board-dtlPage {
  min-width: 1200px;
}

/* ------------------------------------------------------ */

/* 게시판 스타일 */

.boardCount {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.1875rem;
  font-size: 1rem;
  color: var(--Greyscale6);
  margin-bottom: 1rem;
}

.boardCount::before {
  content: "";
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  background-image: url("../assets/icon/content/point_dot.svg");
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 0.4375rem;
}

.table-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1rem;
}

.table-top .boardCount {
  margin-bottom: 0;
}

.table-top .buttonArea {
  width: unset;
}

.table-area {
  overflow-x: auto;
  overflow: hidden;
}

table.board {
  margin-bottom: 1rem;
}

table.board thead {
  background: #fff;
  border-top: 0.0625rem solid var(--Greyscale9);
  border-bottom: 0.0625rem solid var(--Greyscale9);
}

table.board thead,
table.board tbody {
  text-align: center;
}

table.board tbody {
  background: #fff !important;
}

table.board thead th {
  position: relative;
}

table.board thead th::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 0.0625rem;
  height: 1.25rem;
  background-color: var(--Greyscale4);
}

table.board thead th:last-child::after {
  display: none;
}

table.board tbody.t-line {
  border-top: 0.125rem solid var(--Greyscale8);
}

table.board tbody > tr {
  border-bottom: 0.0625rem solid var(--Greyscale4);
  border-top: 0;
}

table.board thead > tr th {
  font-weight: 700;
}

table.board tbody > tr th {
  font-weight: 400;
}

table.board tbody > tr.noticeBox {
  background: var(--Greyscale0);
}

table.board tbody > tr.noticeBox p.noticeTxt {
  display: block;
  padding: 0.1875rem 0.3125rem;
  color: var(--Greyscale8);
  font-weight: 400;
  background: var(--Secondary);
  border-radius: 0.1875rem;
}

table.board thead > tr th,
table.board tbody > tr td {
  /* padding: 1rem; */
  /* height: 3.125rem; */
  font-size: 1rem !important;
  word-break: keep-all;
  color: var(--Greyscale8);
  box-sizing: border-box;
}

table.board thead > tr th.check,
table.board tbody > tr td.check {
  width: 3.5rem;
}

.boardBodyItem.switch,
.boardHeaderItem.switch {
  width: 70.5rem;
}

.boardBodyItem.date,
.boardHeaderItem.date {
  width: 12.5rem;
}

.boardBodyItem .smlTxt {
  font-size: 0.875rem;
}

table.board thead > tr th.num,
table.board tbody > tr td.num {
  width: 5%;
}

table.board thead > tr th.item01,
table.board tbody > tr td.item01 {
  width: 10%;
}

table.board thead > tr th.item02,
table.board tbody > tr td.item02 {
  width: 20%;
}

table.board thead > tr th.fix100,
table.board tbody > tr td.fix100 {
  width: 6.25rem;
}

table.board thead > tr th.fix200,
table.board tbody > tr td.fix200 {
  width: 12.5rem;
}

table.board thead > tr th.date,
table.board tbody > tr td.date {
  width: 12.5rem;
}

table.board thead > tr th.select,
table.board tbody > tr td.select {
  width: 18.0rem;
}


table.board thead > tr th.tit,
table.board tbody > tr td.tit {
  flex: auto;
  max-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  /* white-space: nowrap; */
}

table.board tbody > tr td.left {
  text-align: left;
}

table.board tbody > tr td.tit,
table.board tbody > tr td.tit a {
  color: var(--Greyscale8);
  font-weight: 400;
}

table.board tbody.l-line > tr td {
  border-left: 0.0625rem solid var(--Greyscale4);
  min-width: 11.25rem;
}

table.board tbody.l-line > tr td:first-child {
  border-left: 0;
}

table.board thead .overHeader-b {
  border-bottom: 0.0625rem solid var(--Greyscale4);
}

table.board thead .overHeader-r {
  border-right: 0.0625rem solid var(--Greyscale4);
}

table.board tbody > tr .overHeader-l {
  border-left: 0.0625rem solid var(--Greyscale4) !important;
}

table.board tbody tr .boardBodyItem > div.flexBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
}

/* 상세/수정 표 */

.adminTable {
  border-top: 0.0625rem solid #ced4da;
  margin-bottom: 1rem;
}

.adminTable .row {
  border-bottom: 0.0625rem solid #ced4da;
  margin: 0;
}

.adminTable .col.tit,
.adminTable .col.txt {
  padding: 1rem;
}

.adminTable .col.tit {
  display: flex;
  align-items: center;
  justify-content: start;
  background-color: var(--Greyscale1);
  width: 12.5rem;
  font-weight: 700;
}

.adminTable .col.txt {
  width: 100%;
  flex: 1 0 0;
  display: flex;
  gap: 0.625rem;
  align-items: center;
}

.adminTable .col.txt.form {
  flex-direction: column;
  align-items: flex-start;
}

.adminTable .col.txt input[type="checkbox"] {
  flex-shrink: 0;
}

.adminTable .col.txt input[type="text"],
.adminTable .col.txt textarea,
.adminTable .col.txt input[type="password"] {
  width: 100%;
  font-size: 1rem;
}

.adminTable .col.txt .dropdown {
  width: 100%;
}

.adminTable .col.txt label {
  flex-shrink: 0;
}

.adminTable .row > .col.txt > form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

.adminTable fieldset {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
}

.adminTable .col.txt .description {
  color: #868e96;
  font-size: 0.875rem;
}

.adminTable .col.txt > .line {
  margin-bottom: 0.625rem;
}

.adminTable .col.txt > .line:last-child {
  margin-bottom: 0;
}

.adminTable .col.txt textarea {
  width: 100%;
}

.adminTable .col.tit.required::before {
  content: "*";
  color: #d32f2f;
}

.adminTableTit {
  font-size: 1.125rem;
  font-weight: 700;
  padding: 1rem 0.625rem;
  border-bottom: 0.125rem solid var(--Greyscale8, #363a3c);
  margin-top: 1.875rem;
}

.adminTable .row.header .col.tit {
  justify-content: center;
}

.adminTable .col.txt.insd {
  padding: 0;
}

.adminTable .insd .row {
  width: 100%;
  flex-wrap: wrap;
  border-bottom: 0;
}

.adminTable .insd .row .col {
  flex-basis: unset;
  justify-content: center;
}

/* .container .adminTable:nth-child(2) {
  margin-top: 1.875rem;
} */

.adminTableInfo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.adminTableInfo p {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3125rem;
  color: var(--Greyscale8);
}

.adminTableInfo p::before {
  content: "-";
  display: inline-block;
}

.adminTable .adminTable {
  width: 100%;
  flex-shrink: 0;
}

.adminTable .col.tit.full {
  width: 100%;
  justify-content: space-between;
}

.adminTable .col.tit.full > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
}

.adminTable .adminTable .col.txt > .row {
  width: 100%;
  border-bottom: 0;
  gap: 0.625rem;
}

.adminTable .adminTable .col.txt > .row > .col {
  padding: 0;
}

.adminTable .adminTable .col.txt > .row > .col fieldset input[type="radio"],
.adminTable .adminTable .col.txt > .row > .col fieldset input[type="checkbox"] {
  margin-right: 0.625rem;
}

@media (max-width: 1199px) {
  .adminTable .row {
    flex-direction: column;
  }

  .adminTable .col.tit,
  .adminTable .col.txt {
    width: 100%;
  }

  .adminTable .col.txt {
    flex: unset;
  }

  .adminTable .adminTable > .row {
    flex-direction: row !important;
  }

  .adminTable .adminTable > .row .col.txt {
    flex: 1 0 0;
  }
}

/* 에디터 자리 */
.editorBox {
  width: 100%;
  height: 100%;
  min-height: 31.25rem;
}

/* 어드민테이블 내 좌우정렬 */

.adminTable .flexRow {
  display: flex;
  flex-direction: row;
  gap: 0.625rem;
  width: 100%;
}

/* -------------------------------------- */
/* 셀렉트박스 */

/* 디폴트 셀렉트박스 */

.selectric-hover .selectric,
.selectric-focus .selectric,
.selectric-open,
.selectric-open .selectric {
  border: none;
  outline: none;
}

.selectric-wrapper {
  min-width: 200px;
}

.selectric {
  background-color: #fff;
  border: 0px;
  padding-right: 3rem;
  min-height: 3rem;
  border-radius: 0.5rem;
}

.selectric .label {
  padding: 0.625rem 1rem;
  border: 0.0625rem solid var(--Greyscale4);
  color: var(--Greyscale8);
  font-size: 1rem;
  height: 3rem;
  box-sizing: border-box;
  border-radius: 0.5rem;
  line-height: 1.625rem;
}

.selectric .button {
  background-color: transparent;
  background-image: url(../assets/icon/Basic_Icon/Select_arrow.svg);
  border-top: 0.0625rem solid var(--Greyscale4);
  border-bottom: 0.0625rem solid var(--Greyscale4);
  border-right: 0.0625rem solid var(--Greyscale4);
  width: 3rem;
  height: 3rem;
  box-sizing: border-box;
  transition: none;
  border-radius: 0 0.5rem 0.5rem 0;
}

.selectric-focus .selectric .button {
  border-radius: 0.5rem 0 0 0.5rem;
  border-left: 0.0625rem solid var(--Greyscale4);
  border-right: 0px;
}

.selectric-items {
  background-color: #fff;
  border: 0px;
}

.selectric-items li.highlighted {
  color: var(--Primary1);
  background-color: var(--Greyscale1);
}

/* 검색필터 */

.srchFltrWrap {
  background-color: #f5f5f5;
  padding: 1.25rem;
  border-radius: 1rem;
  margin-bottom: 1.25rem;
}

.srchFltrWrap .srchFltrItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.srchFltrWrap .srchFltrItem:last-child {
  margin-bottom: 0px;
}

.srchFltrWrap .srchFltrItem .subsearch .selectric {
  border-radius: 0.5rem 0 0 0.5rem;
}

.srchFltrWrap .srchFltrItem .subsearch .selectric .button {
  border-right: 0px;
  border-radius: 0;
  border-left: 0;
}

@media (max-width: 1199px) {
  .srchFltrWrap .srchFltrItem {
    flex-direction: column;
    align-items: flex-start;
  }

  .srchFltrWrap .srchFltrItem p {
    margin-left: 0 !important;
  }

  .srchFltrWrap .srchFltrItem .DatePickerWrap {
    width: 100%;
  }

  .srchFltrWrap .srchFltrItem .DatePickerWrap .DatePicker {
    max-width: 100%;
  }

  .srchFltrWrap .srchFltrItem .selectWrap {
    width: 100%;
  }
}

/* 상세/수정/등록 */

.adminTable .selectric .label {
  border-radius: 0.5rem 0 0 0.5rem;
}

/* -------------------------------------- */

/* zoom in/out */

.zoomBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.5);
  height: 2rem;
  padding: 0.375rem;
  border-radius: 0.375rem;
  box-sizing: border-box;
}

.zoomBox p {
  font-size: 0.875rem;
  color: #fff;
}

.zoomBox button {
  background-color: #fff;
  border-radius: 0.1875rem;
  height: 1.25rem;
  width: 1.25rem;
  text-align: center;
  line-height: 1.25rem;
}

/* 검색바 내 셀렉트박스 */

.srchFltrWrap .selectric .label {
  border-radius: 0.5rem 0 0 0.5rem;
}

/* gnb select */

nav .rightItem .selectric-wrapper {
  min-width: unset;
}

nav .rightItem .selectric {
  background-color: rgba(255, 255, 255, 0.2);
  border: 0px;
  padding-right: 1.875rem;
  min-height: unset;
  border-radius: 0.5rem;
}

nav .rightItem .selectric .label {
  padding: 0.375rem 0.625rem;
  border: none;
  color: #fff;
  height: unset;
  border-radius: unset;
}

nav .rightItem .selectric .button {
  background-color: transparent;
  background-image: url(../assets/icon/App_Bar/Select_arrow_w.svg);
  border: none;
  width: 1.875rem;
  height: 100%;
}

nav .rightItem .selectric-items {
  background-color: #fff;
  border: 0px;
}

nav .rightItem .selectric-items li.highlighted {
  color: var(--Primary1);
}

/* 버튼 최소사이즈 설정 */
.btn {
  font-size: 1.125rem;
}

.buttonArea .btn {
  min-width: 130px;
}

/* 가로 구분선 추가 */

hr {
  display: block;
  height: 1px;
  box-sizing: border-box;
  background-color: var(--Greyscale4);
  border: 0;
  margin: 1rem 0;
}

/* 페이지네이션 커스텀 */

.pagination-area {
  margin-top: 1rem;
}

.pagination li:not(.page) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
}

.pagination li.active {
  border: 0.0625rem solid var(--Primary1);
}

.popupWrap .buttonArea {
  margin-top: 1rem;
}

/* 수정/등록 페이지 테이블 수정 */

.adminTable .checkList {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: 0.8125rem 0;
}

.adminTable .checkList fieldset {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.adminTable #tree {
  min-width: 16.25rem;
}

.adminTable .cus01 {
  background-color: var(--Greyscale1);
  text-align: center;
  justify-content: center;
  font-weight: 700;
}

/* 모바일 반응형 추가 */

@media (max-width: 960px) {
  .wrapper {
    flex-direction: column;
  }

  .wrapper .asideWrap {
    width: 100%;
  }

  .conTop .conTit {
    flex-wrap: wrap;
  }

  .conTop .conTit h3 {
    font-size: 1.5rem;
  }

  .adminTable .row > .col.txt > form {
    flex-wrap: wrap;
  }

  .breadCrumb {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .adminTable .col.tit {
    /* width: 10rem; */
    font-size: 0.9375rem;
  }

  button.btn,
  a.btn,
  .wrapper .asideWrap .asideNav li a,
  .popupWrap .popupInner .popupTop {
    font-size: 0.9375rem;
  }

  .wrapper .asideWrap .asideTit {
    font-size: 1.25rem;
  }

  .popupWrap .popupInner {
    width: 80%;
    min-width: unset;
  }

  .popupWrap .popupInner,
  .srchFltrWrap {
    padding: 1rem;
  }

  .srchFltrWrap .srchFltrItem,
  .srchFltrWrap .subsearch {
    flex-wrap: wrap;
  }

  .srchFltrWrap .subsearch {
    gap: 0.5rem;
  }

  .srchFltrWrap .subsearch .selectWrap {
    width: 100%;
  }

  .srchFltrWrap .srchFltrItem .subsearch .selectric {
    border-radius: 0.5rem;
  }

  .srchFltrWrap .srchFltrItem .subsearch .selectric .button {
    border-right: 0.0625rem solid var(--Greyscale4);
    border-radius: 0 0.5rem 0.5rem 0;
  }

  .subsearch .rightItem input {
    width: 100%;
    border-radius: 0.5rem;
  }

  .table-area {
    width: 100%;
    overflow-x: auto;
  }

  table.board {
    white-space: nowrap;
    width: auto;
  }

  table.board thead > tr th,
  table.board tbody > tr td,
  .pagination > li a {
    font-size: 0.875rem !important;
  }

  table.board thead > tr th,
  table.board tbody > tr td {
    width: auto !important;
    white-space: nowrap;
    max-width: unset !important;
  }

  .pagination li:not(.page) {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.1875rem;
  }

  .adminTable .checkList,
  .DatePickerWrap,
  .DatePickerWrap + .DatePickerBtn {
    flex-wrap: wrap;
    width: 100%;
  }

  .DatePicker {
    max-width: 100%;
    border-radius: 0.5rem !important;
  }

  .DatePicker:nth-child(2) {
    margin-top: 0.5rem;
    border-left: 0.0625rem solid var(--Greyscale4) !important;
  }
}

input[type="date"i]::-webkit-calendar-picker-indicator,
input::-webkit-calendar-picker-indicator {
  display: none;
}

@media (max-width: 460px) {
  .adminTable .row {
    flex-direction: column;
  }

  .adminTable .col {
    width: 100% !important;
    min-height: unset;
  }

  .buttonArea .btn {
    min-width: 3.75rem;
  }

  .fileBox > label {
    padding: 0.625rem 1rem;
  }
}

/* 메뉴타입 스타일 수정 */

.adminTable #divMenuTy {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.adminTable #divMenuTy > input {
  width: 100%;
  flex-grow: 1;
}

.adminTable #divMenuTy fieldset {
  flex-grow: 0;
}

/* ITSM 스타일 추가 */

.tbl .tblBodyItem .stateLable {
  display: block;
  width: fit-content;
  padding: 4px 8px;
  margin: 0 auto;
  border-radius: 4px;
}

.tbl .tblBodyItem .stateLable.low {
  background-color: #EAF6EB;
  color: #33A539;
}

.tbl .tblBodyItem .stateLable.usl {
  background-color: #DAF0FD;
  color: #335AA5;
}

.tbl .tblBodyItem .stateLable.hgh {
  background-color: #FFE9AF;
  color: #FF511B;
}

.tbl .tblBodyItem .stateLable.emr {
  background-color: #FF5656;
  color: #fff;
}

.tbl .tblBodyItem .cmplt {
  text-decoration: line-through;
  color: var(--Greyscale4);
}

.tbl .tblBodyItem .rejt {
  color: #FF5656;
}

/* 말줄임 */

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 작은 버튼 클래스 */
.btn-small {
  width: auto !important;
  padding: 2px 6px !important;
  margin: 0 2px !important;
  min-width: auto !important;
}

