:root {
  --inner_base_mw: 80rem;
  --inner_sm_mw: 75rem;

  --icongray: #33363d;
  --icondisabled: #8a949e;
  --gray90: #1d1d1d;
  --gray80: #2d2d2d;
  --gray70: #555555;
  --gray50: #8e8e8e;
  --gray40: #c6c6c6;
  --gray30: #d8d8d8;
  --gray20: #e4e4e4;
  --gray10: #f0f0f0;
  --txtbasic: #1e2124;
  --txtbolder: #131416;
  --txtsubtit: #464c53;
  --txtdisabled: #8a949e;

  --iptborder: #58616a;

  --bordergray: #b1b8be;

  --white1: #ffffff;
  --point1: #063a74;
  --point1-2: #00215d;

  --primary: #0b50d0;
  --danger: #eb003b;
}
* {
  font-family: 'Pretendard GOV';
}
.hov {
  transition: opacity 0.2s ease-in-out;
  &:hover {
    opacity: 0.5;
  }
}
.space {
  height: 50vh;
}
main {
  padding-top: 8.75rem;
}
.grid_lay {
  column-gap: 1.5rem;
}

i.tag {
  display: block;
  width: max-content;
  height: max-content;
  padding: 0 0.4375rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 150%;
  border-radius: 0.25rem;
  text-align: center;

  &.red {
    min-width: 3.4375rem;
    background-color: #d63d4a;
    color: var(--white1);
  }
  &.white {
    min-width: 3.75rem;
    border: 1px solid #464c53;
    color: #464c53;
  }
  &.blue {
    min-width: 3.125rem;
    color: #1d56bc;
    background-color: #eff5ff;
  }
  &.blue2 {
    min-width: 45px;
    color: #063a74;
    border-radius: 50px;
    border: 1px solid #063a74;
  }
}
.red {
  color: #d63d4a;
}
.red i.tag {
  min-width: 3.4375rem;
  background-color: #d63d4a;
  color: var(--white1);
}
.white {
  color: #464c53;
}
.white i.tag {
  min-width: 3.75rem;
  border: 1px solid #464c53;
  color: #464c53;
}
.blue {
  color: #1d56bc;
}
.blue i.tag {
  min-width: 3.125rem;
  color: #1d56bc;
  background-color: #eff5ff;
}

.ck.ck-editor {
  ol li {
    list-style: decimal inside;
  }
  ul li {
    list-style: disc inside;
  }
  i {
    font-style: italic;
  }
}

/* 공통 SWIPER START*/
.js-common-swiper.swiper {
  --grid-cols: 12;
  --grid-gap: 1.5rem;
  --col-span: 3;
  width: 100%;
  padding-bottom: 64px;

  .swiper-slide {
    width: calc(
      ((100% - (var(--grid-cols) - 1) * var(--grid-gap)) / var(--grid-cols)) *
        var(--col-span) + (var(--col-span) - 1) * var(--grid-gap)
    );
    min-height: 228px;
    height: 100%;
    &:not(:last-child) {
      margin-right: var(--grid-gap);
    }
  }
  .controller {
    position: absolute;
    bottom: 0;
    right: 0;
    gap: 0.5rem;
  }
  .swiper-pagination {
    position: static;
    margin: 0;
    padding: 0.875rem 1rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--gray90);
    border-radius: 2.5rem;
    background-color: var(--white1);
    line-height: 0.75rem;

    .swiper-pagination-current {
      color: #003675;
    }
  }
  .swiper-button-prev,
  .swiper-button-next {
    position: relative;
    inset: 0;
    transform: none;
    display: block;
    min-width: 2.5rem;
    min-height: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--gray20);
    background-color: var(--white1);

    &::before {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1.5rem;
      height: 1.5rem;
      background: var(--gray80);
      mask: url('../images/icons/ico_pagination_arrow.svg') no-repeat center /
        1.5rem;
      content: '';
    }
    &::after {
      content: '';
    }
  }
  .swiper-button-prev {
    transform: scaleX(-1);
  }
}

.swiper.card_lay {
  a {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 2rem;
    border-radius: 0.75rem;
    border: 1px solid var(--gray40);
    background-color: var(--white1);
  }
  h3 {
    margin-top: 1.25rem;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 150%;
    color: var(--gray90);
    -webkit-line-clamp: 3;
  }
  p {
    display: block;
    margin-top: auto;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 0.75rem;
    color: var(--gray70);
  }
}
.swiper.photo_lay {
  a {
    width: 100%;
    .img_box {
      display: block;
      border-radius: 0.75rem;
      overflow: hidden;
      img {
        width: 100%;
        height: auto;
        aspect-ratio: 410/273;
      }
    }
    h3 {
      margin-top: 1.5rem;
      font-size: 1.1875rem;
      font-weight: 700;
      line-height: 150%;
      color: var(--gray90);
      -webkit-line-clamp: 2;
    }
  }
}
/* 공통 SWIPER END */

/* HEADER START */
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000000;
  width: 100%;

  .hd_top {
    height: 2.5rem;
    background-color: #edf1f5;

    .member,
    .logout {
      display: flex;
      align-items: center;
      font-size: 0.9375rem;
      font-weight: 400;
      line-height: 150%;
      color: var(--gray90);
      padding: 2px;
    }
    .logout::before,
    .member::before {
      content: '';
      display: block;
      width: 1rem;
      height: 1rem;
      margin-right: 2px;
      background-color: var(--gray80);
      mask-size: cover;
      mask-position: center;
      mask-repeat: no-repeat;
    }
    .member::before {
      mask-image: url('../images/icons/ico_member.svg');
    }
    .logout::before {
      mask-image: url('../images/icons/ico_logout.svg');
    }
    .member::after {
      content: '';
      width: 1px;
      height: 1rem;
      background: var(--gray30);
      margin: 0 0.375rem 0 0.75rem;
    }
  }

  .hd_bd {
    position: relative;
    height: 6.25rem;
    background-color: var(--point1);

    .menu_bg {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 15.875rem;
      background-color: var(--white1);
      z-index: 1;
      transform-origin: top;
      transform: scaleY(0);
      transition: transform 0.25s ease-in-out;
    }

    .inner_base {
      height: 100%;
    }
    .menu_wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    .logo {
      position: relative;
      transform: translateY(-20px);
      min-width: 6.875rem;
      min-height: 6.875rem;
      margin: 0 7.8125rem;
      border: solid + 2px var(--point1);
      background: var(--white1);
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 150%;
      border-radius: 50%;
      color: var(--point1);
      a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5625rem;
        width: 100%;
        height: 6.875rem;
      }
      a::before {
        content: '';
        width: 4.625rem;
        height: 2.375rem;
        mask: url('../images/common/logo.svg') no-repeat center / contain;
        background: var(--point1);
      }
      span {
        line-height: 0.875rem;
        vertical-align: middle;
      }
    }

    .depth1 {
      display: flex;
      align-items: center;
      gap: 5rem;
      height: 100%;

      & > li {
        position: relative;
        height: 100%;
      }
      li > a,
      li > button {
        display: flex;
        align-items: center;
        width: 6.25rem;
        height: 100%;
        font-size: 1.1875rem;
        font-weight: 600;
        color: var(--white1);
      }
      .search::before {
        display: block;
        content: '';
        width: 1.25rem;
        height: 1.25rem;
        margin-right: 0.375rem;
        mask: url('../images/icons/ico_search.svg') no-repeat center / cover;
        background: var(--white1);
      }
    }
    .depth1 ul {
      position: absolute;
      top: 100%;
      z-index: 5;
      padding: 1.5625rem 0;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;

      a {
        width: max-content;
        padding: 0.9375rem 0;
        font-size: 1.0625rem;
        font-weight: 400;
        line-height: 125%;
        color: var(--gray90);
      }
    }
  }

  &.hd_hov {
    .hd_bd .menu_bg {
      transform: scaleY(1);
    }
    .depth1 ul {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    }
  }
}
/* HEADER END */

/* SEARCH MODAL START */
#searchModal {
  width: 100%;
  height: 100%;
  background-color: #dee2e8;
  z-index: 10000000;

  .close_modal {
    position: absolute;
    inset: 5rem 5rem auto auto;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--gray80);
    mask: url('../images/icons/ico_close.svg') no-repeat center / cover;
  }
  form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    max-width: 52.875rem;
  }
  label {
    display: block;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4375rem;
    color: var(--gray90);
  }
  .ipt {
    position: relative;
    width: 100%;
    height: 5rem;
    border-radius: 0.75rem;
    border: 1px solid #717171;
    background-color: var(--white1);
    overflow: hidden;

    input {
      padding: 0 4.5rem 0 1.5rem;
      width: 100%;
      height: 100%;
      font-size: 1.5625rem;
      font-weight: 600;
      outline: none;
      &::placeholder {
        color: var(--gray50);
      }
    }
    .search_btn {
      position: absolute;
      top: 50%;
      right: 1.5rem;
      transform: translateY(-50%);
      width: 2.5rem;
      height: 2.5rem;
      background: var(--gray80);
      mask: url('../images/icons/ico_search.svg') no-repeat center / cover;
    }
  }
}
/* SEARCH MODAL END */

/* FOOTER START */
footer {
  margin-top: 5rem;
  padding: 3.25rem 0;
  background-color: #f4f5f6;

  .inner_base {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.5625rem;
    font-weight: 700;
    line-height: 150%;
    color: #58595b;

    &::before {
      display: block;
      content: '';
      width: 5.75rem;
      height: 2.9375rem;
      background: var(--point1-2);
      mask: url('../images/common/logo.svg') no-repeat center / cover;
    }
  }
  strong{
    font-size: 1.0625rem;
    font-weight: 700;
    color: #58595b;
  }
  a{
    display : flex;
    align-items: center;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--txtsubtit);
  }
  a::after{
    content: "";
    width : 1.25rem;
    height: 1.25rem;
    background-color : var(--txtsubtit);
    mask: url("../images/icons/ico_link.svg") no-repeat center / cover;
  }
  .copyright {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--txtsubtit);
  }
}
/* FOOTER END */

/* BREADCRUMB START */
.breadcrumb {
  display: flex;
  align-items: center;
  padding-top: 1.5rem;

  a {
    display: flex;
    align-items: center;
    width: max-content;
    padding: 0.375rem;
    padding-right: 0;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 150%;
    color: var(--gray90);
    text-decoration: underline;
    text-underline-offset: 3px;

    &:first-of-type {
      padding-left: 0;
    }
    &:first-of-type::before {
      display: block;
      content: '';
      width: 1.5rem;
      height: 1.5rem;
      background: var(--gray80);
      mask: url('../images/icons/ico_breadcrumb_home.svg') no-repeat center /
        cover;
    }
    &:not(:last-of-type)::after {
      display: block;
      content: '';
      width: 1rem;
      height: 1rem;
      margin-left: 0.5rem;
      background: var(--gray80);
      mask: url('../images/icons/ico_breadcrumb_arrow.svg') no-repeat center /
        cover;
    }
  }
}
/* BREADCRUMB END */

/* SECTION TITLE START*/
.sec_tit {
  margin-top: 5rem;
  h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.75rem;
    color: var(--gray90);
  }
  p {
    margin-top: 1.5rem;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 0.75rem;
    color: var(--gray70);
  }
}
/* SECTION TITLE END */

/* PAGINATION START */
.pagination_wrap {
  margin: 0 auto;

  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    a {
      font-size: 1.0625rem;
      font-weight: 400;
      line-height: 150%;
      color: var(--txtsubtit);
    }
    a:not(.prev, .next) {
      padding: 0.4375rem 0.9375rem;
      border-radius: 0.375rem;
    }
    a.on {
      background: var(--point1);
      color: var(--white1);
      font-weight: 600;
    }
    .prev,
    .next {
      display: flex;
      align-items: center;
      padding: 0.4375rem 0.25rem;
    }
    .prev::before {
      content: '';
      width: 1.25rem;
      height: 1.25rem;
      background: var(--icongray);
      mask: url('../images/icons/ico_pagination_arrow.svg') no-repeat center /
        cover;
      transform: rotate(180deg);
    }
    .next::after {
      content: '';
      width: 1.25rem;
      height: 1.25rem;
      background: var(--icongray);
      mask: url('../images/icons/ico_pagination_arrow.svg') no-repeat center /
        cover;
    }
    .disabled {
      color: var(--icondisabled);
      cursor: auto;
    }
    .disabled::after,
    .disabled::before {
      background: var(--icondisabled);
    }
    .dots {
      width: 2.5rem;
      height: 2.5rem;
      background: url('../images/icons/ico_pagination_dots.svg') no-repeat
        center / 1.5rem 1.5rem;
    }
  }
  .pagination_form {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.5rem auto 0;

    #paginationIpt {
      width: 3.5rem;
      height: 2.5rem;
      border-radius: 0.375rem;
      font-size: 0.9375rem;
      font-weight: 400;
      text-align: center;
      border: 1px solid var(--iptborder);
      outline: none;
    }
    label {
      padding: 0 0.5625rem;
      font-size: 0.9375rem;
      font-weight: 400;
      line-height: 150%;
    }
    button[type='submit'] {
      width: 4rem;
      height: 2.5rem;
      font-size: 0.9375rem;
      font-weight: 400;
      line-height: 150%;
      border-radius: 0.375rem;
      border: 1px solid #256ef4;
      color: #256ef4;
      background-color: #ecf2fe;
      margin-left: 1rem;
    }
  }
}
/* PAGINATION END */

/* TAB START */
.tab {
  display: flex;
  width: 100%;
  height: 3.5rem;
  overflow: hidden;
  border: 1px solid var(--bordergray);
  border-radius: 0.5rem;

  a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 100%;
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--txtsubtit);
  }
  a:not(:last-child) {
    border-right: 1px solid var(--bordergray);
  }
  a.on {
    color: var(--white1);
    background-color: var(--point1);
  }
}
/* TAB END */

/* BOARD SEARCH START*/
.board_search {
  form {
    display: flex;
    gap: 0.5rem;

    > p {
      display: flex;
      align-items: flex-end;
      padding-bottom: 1rem;
      font-size: 1.1875rem;
      font-weight: 400;
      color: var(--gray90);
    }
  }
  label {
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 150%;
    color: var(--gray90);
  }
  .calendar_wrap {
    position: relative;
  }
  /* .calendar_wrap::after{ */
  /*   display:block; */
  /*   position : absolute; */
  /*   top: 50%; */
  /*   right: 1rem; */
  /*   transform: translateY(-50%); */
  /*   content:""; */
  /*   width : 1.5rem; */
  /*   height: 1.5rem; */
  /*   mask: url("../images/icons/ico_calendar.svg") no-repeat center / cover; */
  /*   background: var(--gray80); */
  /* } */
  .calendar_wrap input {
    background: url('../images/icons/ico_calendar.svg') no-repeat
      calc(100% - 1rem) center / 1.5rem 1.5rem;
  }
  .prj_calendar {
    width: 100%;
    max-width: 15rem;
    color: var(--gray90);
    &::placeholder {
      color: var(--gray50);
    }
  }
  input,
  select {
    border-radius: 0.5rem;
    border: 1px solid var(--iptborder);
    padding: 0 1rem;
    height: 3.5rem;
    font-size: 1.1875rem;
    color: var(--txtdisabled);
  }
  .select_wrap {
    display: block;
    width: 100%;
    max-width: 11.25rem;

    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url('../images/icons/ico_select_arrow.svg');
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
      background-size: 1.5rem;
      color: var(--gray90);

      option {
        color: var(--txtdisabled);
      }
    }
  }
  .keyword_wrap {
    position: relative;
  }
  .keyword_wrap button {
    display: block;
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    mask: url('../images/icons/ico_search.svg') no-repeat center / cover;
    background: var(--gray80);
  }
  input#searchKeyword {
    padding: 0 3rem 0 1rem;
    color: var(--gray90);

    &::placeholder {
      color: var(--gray50);
    }
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill:active {
      -webkit-box-shadow: 0 0 0 30px white inset !important;
    }
  }
}
/* BOARD SEARCH END */

/* BOARD LIST START */
.board_list {
  /* 보기 전환(갤러리/리스트) 공통 */
  .view_mode_btns {
    display: flex;
    gap: 1rem;
  }
  .view_mode_btns button {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5rem;
    color: var(--txtsubtit);
    text-decoration: none;
  }
  .view_mode_btns button.on {
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    color: var(--txtbasic);
    font-weight: 600;
  }
  .btn_view_card,
  .btn_view_table {
    width: auto;
  }

  .result_num {
    margin-bottom: 1.5rem;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 150%;
    color: var(--txtbasic);

    strong {
      color: var(--primary);
    }
  }
  &.table_lay {
    .board_hd {
      display: flex;
      align-items: center;
      background: #eef2f7;
      border-bottom: 1px solid #d6e0eb;

      p {
        font-size: 0.9375rem;
        font-weight: 700;
        padding: 0.5rem 1rem;
        color: var(--txtbolder);
      }
    }
    .board_bd {
      li > a {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #cdd1d5;
      }
      p {
        padding: 0.75rem 1rem;
        color: var(--txtsubtit);
      }
      /* 20260122 작업 START */
      .t{
        position: relative;
        padding-right: 2rem;
        em{
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 1.5rem;
          height: 1.5rem;
          background: url("../images/icons/ico_file.svg") no-repeat center / cover;
        }
      }
      /* 20260122 작업 END */
    }
    p {
      width: 100%;
      max-width: 6.25rem;
      font-size: 1.0625rem;
      font-weight: 400;
      line-height: 150%;
    }
    .n{
      width: 100%;
      max-width: 5rem;
    }
    .d {
      width: 100%;
      max-width: 9.375rem;
    }
    .t {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      width: 100%;
      max-width: 100%;

      span {
        overflow: hidden;
        white-space: normal;
        text-align: left;
        word-wrap: break-word;
        display: -webkit-box;
        word-break: break-all;
        -webkit-box-orient: vertical;
        line-clamp: 1;
        -webkit-line-clamp: 1;
      }
      span.category{
        display:block;
        white-space:nowrap;
        line-clamp:0;
        -webkit-line-clamp:0;
        overflow:visible;
      }
    }
    .v{
      width : 100%;
      max-width: 5.375rem;
      text-align : center;
    }
  }

  &.card_lay {
    /* 카드형에서는 테이블 헤더를 숨김 */
    .board_hd {
      display: none;
    }
    .board_bd ul {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1.5rem;
    }
    li {
      grid-column: span 4;
      a {
        width: 100%;
      }
    }
    .img_box {
      width: 100%;
      height: auto;
      aspect-ratio: 384/256;
      overflow: hidden;
      border-radius: 0.75rem;
      margin-bottom: 1.5rem;
    }
    img {
      aspect-ratio: 4/3;
      object-fit: cover;
      object-position: center;
    }
    i {
      margin-right: 0.625rem;
    }
    h3 {
      font-size: 1.1875rem;
      font-weight: 700;
      line-height: 150%;
    }
    p {
      margin-top: 2rem;
      font-size: 1.0625rem;
      font-weight: 400;
      line-height: 150%;
      color: var(--gray70);
    }
  }

  /* 카드/리스트 전용 영역 토글 */
  &.table_lay {
    .card_view {
      display: none;
    }
  }
  &.card_lay {
    .table_view {
      display: none;
    }
  }
  i {
    padding: 0 0.4375rem;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 150%;
    border-radius: 0.25rem;
    text-align: center;

    &.red {
      min-width: 3.4375rem;
      background-color: #d63d4a;
      color: var(--white1);
    }
    &.white {
      min-width: 3.75rem;
      border: 1px solid #464c53;
      color: #464c53;
    }
    &.blue {
      min-width: 3.125rem;
      color: #1d56bc;
      background-color: #eff5ff;
    }
    &.grey {
      min-width: 2.625rem;
      color: #6D7882;
      background-color: #CDD1D5;
    }
  }

  .board_add_link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: max-content;
    margin: 1.25rem 0 0 auto;
    padding: 0.6875rem 1rem;
    border-radius: 0.375rem;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 150%;
    color: var(--white1);
    background-color: var(--point1);

    &::before {
      display: block;
      content: '';
      width: 1.25rem;
      height: 1.25rem;
      background: var(--white1);
      mask: url('../images/icons/ico_plus.svg') no-repeat center / cover;
    }
  }

  .search_result_empty {
    padding: 3.75rem 0;
    text-align: center;
    border-top: 1px solid #c6c6c6;
    border-bottom: 1px solid #c6c6c6;

    h3 {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      font-size: 1.1875rem;
      font-weight: 700;
      line-height: 150%;
      color: var(--gray90);

      &::before {
        content: '';
        width: 1.5rem;
        height: 1.5rem;
        background: var(--icongray);
        mask: url('../images/icons/ico_info.svg') no-repeat center / cover;
      }
    }
    p {
      max-width: 100%;
      margin-top: 1rem;
      font-size: 1.0625rem;
      font-weight: 400;
      line-height: 150%;
      color: var(--gray70);
      text-align: center;
    }
  }
}
/* BOARD LIST END */

@media all and (max-width: 1280px) {
  :root {
    --inner_sm_mw: 62rem;
  }
  header {
    .hd_bd {
      .depth1 {
        gap: 3rem;
      }
      .logo {
        margin: 0 2.8125rem;
      }
    }
  }
}

@media all and (max-width: 768px) {
  main {
    padding-top: 84px;
  }

  header {
    .hd_top {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1000;
      width: 100%;
      height: 84px;
      background-color: #063a74;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
      &.on {
        opacity: 1;
        visibility: visible;
      }

      .member {
        flex-direction: row;
        z-index: 100;
        font-size: 19px;
        font-weight: 700;
        color: var(--white1);
      }
      .member::after {
        display: none;
      }
      .member::before {
        order: 2;
        width: 16px;
        height: 16px;
        margin: 0 2px 0 10px;
        background-color: var(--white1);
      }
      .member p {
        font-size: 15px;
        font-weight: 400;
      }
      .close_btn {
        width: 24px;
        height: 24px;
        background: url('../images/icons/ico_close.svg') no-repeat center /
          cover;
      }
    }
    .hd_bd {
      height: 84px;
      .menu_bg {
        display: none;
      }
      .inner_base {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
      }
      .logo {
        min-width: max-content;
        min-height: max-content;
        margin: 0;
        background: transparent;
        font-size: 17px;
        color: var(--white1);
        transform: none;

        a {
          flex-direction: row;
          gap: 6px;
          width: max-content;
          height: max-content;
          border-radius: 0;
        }
        a::before {
          width: 64px;
          height: 32px;
          background: var(--white1);
        }
        span {
          line-height: 12px;
        }
      }
      .logo + div.m_show {
        display: flex !important;
        gap: 8px;
      }
      .search,
      .logout,
      .menu_btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 0 4px;
        font-size: 13px;
        font-weight: 400;
        line-height: 9px;
        color: var(--white1);

        &:before {
          content: '';
          width: 20px;
          height: 20px;
          background: var(--white1);
          mask-size: cover;
          mask-repeat: no-repeat;
          mask-position: center;
        }
      }
      .search::before {
        mask-image: url('../images/icons/ico_search.svg');
      }
      .logout::before {
        mask-image: url('../images/icons/ico_logout.svg');
      }
      .menu_btn::before {
        mask-image: url('../images/icons/ico_menu.svg');
      }
      .menu_wrap {
        flex-direction: column;
        justify-content: flex-start;
        position: fixed;
        top: 84px;
        left: 0;
        z-index: 10000000;
        width: 100%;
        height: calc(100% - 84px);
        background-color: var(--white1);
        overflow-y: scroll;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
      }
      .menu_wrap.on {
        opacity: 1;
        visibility: visible;
        .depth1 ul {
          opacity: 1;
          visibility: visible;
        }
      }
      .depth1 {
        flex-direction: column;
        gap: 0;
        width: 100%;
        height: max-content;
        > li {
          display: flex;
          flex-direction: column;
          width: 100%;
          padding: 16px 0;
          border-top: 4px solid var(--gray20);
        }
        > li > a {
          height: 56px;
        }
        li > a,
        li > button {
          width: 100%;
          padding: 0 24px;
          font-size: 19px;
          font-weight: 700;
          color: var(--gray90);
        }
        ul {
          position: static;
          padding: 0;
          border-top: 1px solid var(--gray20);

          a {
            padding: 22px 24px;
            font-size: 17px;
            font-weight: 400;
          }
        }
      }
    }
  }

  #searchModal {
    .close_modal {
      inset: 24px 24px auto auto;
      width: 24px;
      height: 24px;
    }
    form {
      width: calc(100% - 32px);
    }
    label {
      margin-bottom: 24px;
      font-size: 25px;
      line-height: 18px;
    }
    .ipt {
      height: 56px;
      border-radius: 8px;
      input {
        padding: 0 50px 0 16px;
        font-size: 19px;
      }
      .search_btn {
        right: 16px;
        width: 24px;
        height: 24px;
      }
    }
  }

  footer {
    margin-top: 64px;
    padding: 24px 0;
    .inner_base {
      flex-direction: column;
      align-items: flex-start;
      gap: 40px;
    }
    .logo {
      gap: 6px;
      font-size: 17px;
      &::before {
        width: 62px;
        height: 32px;
      }
    }
    strong{
      font-size: 17px;
    }
    a{
      font-size: 13px;
    }
    a::after{
      width : 18px;
      height: 18px;
    }
    .copyright {
      font-size: 13px;
    }
  }

  .breadcrumb {
    padding-top: 24px;
    a {
      padding: 0 6px;
      font-size: 15px;
      &:first-of-type::before {
        width: 24px;
        height: 24px;
      }
      &:not(:last-of-type)::after {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }
    }
  }

  .sec_tit {
    margin-top: 64px;

    h2 {
      font-size: 32px;
      line-height: 23px;
    }
    p {
      margin-top: 32px;
      font-size: 17px;
      line-height: 150%;
    }
  }

  .tab {
    gap: 8px;
    height: 48px;
    border: none;
    border-radius: 0;

    a {
      border-radius: 6px;
      font-size: 17px;
    }
    a:not(:last-child) {
      border: none;
    }
  }

  .board_search {
    form {
      flex-direction: column;
      gap: 16px;
    }
    .prj_calendar {
      max-width: 100%;
    }
    .select_wrap {
      max-width: 100%;
    }
    input#searchKeyword {
      width: 100%;
      max-width: 100%;
    }
    label {
      margin-bottom: 12px;
      font-size: 15px;
    }
    input,
    select {
      height: 56px;
      padding: 0 48px 0 16px;
      border-radius: 8px;
      font-size: 19px;
    }
  }

  .board_list {
    .result_num {
      margin-bottom: 16px;
    }
    &.table_lay {
      .board_hd {
        .d, .v{display:none}
        .t{
            align-items: center;
            max-width: 100%;
        }
      }
      .board_bd {
        li > a{
            display:grid;
            grid-template-columns:80px 104px auto;
        }
        p {
          padding: 16px 12px;
        }
        .n{
            grid-row: 1/3;
        }
        .t{
            grid-column: 2/-1;
            max-width: 100%;
            padding: 12px 16px 0;

          /* 20260122 작업 START */
          em{
            position: static;
            transform: translate(4px, 4px);
            width: 20px;
            height: 20px;
          }
          /* 20260122 작업 END */
        }
        .d{
            position:relative;
            grid-column: 2/3;
            padding: 6px 0 12px 16px;
        }
        .d:after{
            position:absolute;
            top: 9px;
            right:0;
            display:block;
            content:"";
            width: 1px;
            height: 17px;
            background-color: #464c53;
        }
        .v{
            display:flex;
            align-items: center;
            gap: 4px;
            padding: 6px 0 12px 10px;
        }
        .v:before{
            content: "";
            width: 20px;
            height: 20px;
            background: url('../images/icons/ico_eye.svg') no-repeat center / cover;
        }
      }
      p {
        padding: 8px 16px;
        font-size: 15px;
      }
      .n{
        max-width: 80px;
      }
      .d {
        max-width: 120px;
      }
      .t {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 10px;
        max-width: calc(100% - 80px);
        span {
        /* 20260122 작업 START */
          -webkit-line-clamp: none;
          overflow: visible;
        /* 20260122 작업 END */
        }
      }
      .v{
        max-width: 80px;
      }
    }
    .board_add_link {
      gap: 4px;
      margin: 20px auto 0;
    }

    &.card_lay {
      .board_bd ul {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
      }
      li {
        grid-column: span 4;
      }
      a {
        display: block;
        width: 100%;
      }
    }
  }

  .pagination_wrap {
    .pagination {
      position: relative;
      padding-top: 64px;
      a:not(.prev, .next) {
        padding: 7px 15px;
        border-radius: 6px;
      }
      .prev,
      .next {
        position: absolute;
        top: 0;
        padding: 8px;
        font-size: 17px;
      }
      .prev {
        left: calc(50% - 35px);
        transform: translateX(-50%);
      }
      .next {
        right: calc(50% - 35px);
        transform: translateX(50%);
      }
      .prev::before,
      .next::after {
        width: 20px;
        height: 20px;
      }
    }
    .pagination_form {
      margin: 24px auto 0;
      #paginationIpt {
        width: 56px;
        height: 40px;
        border-radius: 6px;
        font-size: 15px;
      }
      label {
        font-size: 15px;
        padding: 0 9px;
      }
      button[type='submit'] {
        width: 64px;
        height: 40px;
        margin-left: 16px;
        border-radius: 6px;
        font-size: 15px;
      }
    }
  }
}