/* section01 */
#section01 {
  background: #ffffff;
  background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(216, 228, 242, 1) 100%);
  }
  #section01 .inner {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: var(--krds-gap-9);
    }
    /* 검색 및 도서관 수 */
    #section01 .inner .section01-left {
      width: 100%;
      max-width: 64rem;
      }
      #section01 .inner .section01-left > img {max-width: 43rem;}
      #section01 .inner .section01-left .fieldset {
        margin-top: var(--krds-gap-7);
        gap: var(--krds-gap-3);
      }
      #section01 .inner .section01-left .form-group {flex-direction: row;}
        #section01 .inner .section01-left .form-group select,
        #section01 .inner .section01-left .form-group input{
          border-width: var(--krds-light-border-width-variable-medium);
          border-color: var(--krds-form-select--color-border);
        }
        #section01 .inner .section01-left .form-group input#searchLibraryName {
          padding: 0 2.4rem;
          font-family: 'Pretendard GOV', sans-serif;
        }
        #section01 .inner .section01-left .form-group select:focus,
        #section01 .inner .section01-left .form-group input:focus {
          border-color: var(--krds-form-select--color-border-active);
          border-color: #256ef4;
        }
        #section01 .inner .section01-left .today_slibrary {
        background: var(--krds-light-color-background-white);
        border-radius: var(--krds-radius-xlarge1);
        padding: var(--krds-padding-card-medium);
        margin-top: var(--krds-gap-9);
        color: var(--krds-light-color-text-secondary);
        /* font-family: 'S-CoreDream', sans-serif; */
        font-family: 'GMarketSans', sans-serif;
        position: relative;
        z-index: 1;
        overflow: hidden;
        }
        #section01 .inner .section01-left .today_slibrary:before {
          content: '';
          background: url(../../images/main/main_map.png);
          background-size: cover;
          width: 13.5rem;
          height: 18rem;
          position: absolute;
          top: 50%;
          right: 10%;
          transform: translateY(-50%);
          z-index: -1;
        }
        #section01 .inner .section01-left .today_slibrary .main_today {font-size: var(--krds-font-size-heading-medium);}
        #section01 .inner .section01-left .today_slibrary p:not(.main_today) {font-weight: var(--krds-font-weight-bold);}
        #section01 .inner .section01-left .today_slibrary p:nth-of-type(2) {
          font-size: var(--krds-font-size-display-small);
          line-height: 130%;
          margin-top: var(--krds-gap-2);
        }
        #section01 .inner .section01-left .today_slibrary .main_slibrary_count {
          font-size: var(--krds-font-size-display-small);
          position: absolute;
          bottom: 1.2rem;
          right: 4rem;
          }
          #section01 .inner .section01-left .today_slibrary .main_slibrary_count span {
            font-size: var(--krds-font-size-display-large);
            color: var(--krds-light-color-text-primary);
            margin: 0 var(--krds-gap-3);
          }
    /* 슬라이드 배너 */
    #section01 .inner .main-box-responsive {
      width: 100%;
      max-width: 90rem;
      position: relative;
      border-radius: var(--krds-radius-xlarge1);
      overflow: hidden;
      aspect-ratio: 854 / 521;
      }
      #section01 .inner .main-box-responsive .swiper,
      #section01 .inner .main-box-responsive .swiper-wrapper,
      #section01 .inner .main-box-responsive .swiper-slide {height: 100%;}
      #section01 .inner .main-box-responsive .swiper-slide img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
      #section01 .inner .main-box-responsive .swiper-indicator {
        position: absolute;
        bottom: 2.4rem;
        right: 2.4rem;
        z-index: 10;
      }

@media (max-width: 1439px) and (min-width: 1024px) {
  #section01 .inner {gap: var(--krds-gap-6);}
  #section01 .inner .section01-left .today_slibrary {margin-top: var(--krds-gap-7);}
  #section01 .inner .section01-left .today_slibrary p br {display: none;}
  #section01 .inner .section01-left .today_slibrary .main_slibrary_count {
    position: unset;
    width: 100%;
    text-align: right;
  }
  #section01 .inner .main-box-responsive {min-width: 54rem;}
}

@media (max-width: 1023px) {
  #section01 .inner {flex-direction: column;}
  #section01 .inner .section01-left,
  #section01 .inner .main-box-responsive {max-width: unset;}
}

@media (max-width: 767px) {
  #section01 .inner .section01-left > img {width: 80%;}
  #section01 .inner .section01-left .today_slibrary {margin-top: var(--krds-gap-7);}
  #section01 .inner .section01-left .today_slibrary p br {display: none;}
  #section01 .inner .section01-left .today_slibrary .main_slibrary_count {
    position: unset;
    width: 100%;
    text-align: right;
  }

  #section01 .inner .main-box-responsive .swiper-indicator {
    bottom: 1rem;
    right: 1rem;
  }
}

@media (max-width: 359px) {
  #section01 .inner .section01-left .form-group:first-child {flex-direction: column;}
  #section01 .inner .section01-left .form-group select, #section01 .inner .section01-left .form-group input {
    border-width: var(--krds-light-border-width-variable-regular);
  }
  .section01-left .krds-form-select.large {
    font-size: var(--krds-form-select--mobile-font-size-medium);
    height: var(--krds-form-select--size-height-medium);
    padding: 0 var(--krds-form-select--padding-right-medium) 0 var(--krds-form-select--padding-default);
    border-radius: var(--krds-form-select--radius-medium);
    background-size: var(--krds-form-select--icon-size-medium) !important;
  }
  .section01-left .krds-input.large {
    font-size: var(--krds-input--mobile-font-size-medium);
    height: var(--krds-input--size-height-medium);
    border-radius: var(--krds-input--radius-medium);
  }
  .section01-left .krds-btn.large {
    font-size: var(--krds-button--mobile-font-size-medium);
    height: var(--krds-button--size-height-medium);
    padding: var(--krds-button--padding-y-medium) var(--krds-button--padding-x-medium);
    border-radius: var(--krds-button--radius-medium);
  }
  .section01-left .krds-btn.large .svg-icon {
    width: var(--krds-icon--size-medium);
    height: var(--krds-icon--size-medium);
  }
}

/* section 공통 */
section {padding: var(--krds-gap-11) 0;}
.bg_gray {background-color: var(--krds-light-color-surface-gray-subtler);}
.main-tit-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--krds-gap-7);
}
.main-tit-wrap .tit {font-size: var(--krds-font-size-heading-large);}
section .inner > .main-tit-wrap:not(:first-child) {margin-top: var(--krds-gap-11);}

@media (max-width: 767px) {
  section {padding: var(--krds-gap-9) 0;}
  .main-tit-wrap {margin-bottom: var(--krds-gap-6);}
  section .inner > .main-tit-wrap:not(:first-child) {margin-top: var(--krds-gap-9);}
}

/* section02 */
#section02 {
  background-color: var(--krds-light-color-background-white);
  border-radius: 0 0 0 7rem;
}
@media (max-width: 767px) {
  #section02 {border-radius: 0;}
}

/* 작은도서관 이야기 */
.section02_slide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--krds-gap-10);
  }
  .section02_slide .title-image {
    width: 30%;
    max-width: 40rem;
  }
  .section02_slide > div:not(.title-image) {width: 67%}
  /* 대표 이미지 */
  .main-story-swiper01 {
    border-radius: var(--krds-radius-xlarge1);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    max-width: 40rem;
    margin: 0 auto;
  }
  /* 대표 텍스트 */
  .main-story-swiper02 {margin-bottom: var(--krds-gap-9);}
    .main-story-swiper02 .lib_name {
      border: 2px solid var(--krds-high-contrast-color-border-inverse);
      border-radius: var(--krds-radius-max);
      text-align: center;
      padding: var(--krds-padding-4) var(--krds-padding-7);
      background: var(--krds-light-color-background-white);
      font-size: var(--krds-font-size-body-large);
      font-weight: var(--krds-font-weight-bold);
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      position: absolute;
      top: 0;
      left: 6px;
    }
    .main-story-swiper02 div {
      background: var(--krds-color-high-contrast-gray-5);
      border-radius: var(--krds-radius-xlarge1);
      padding: var(--krds-padding-10) var(--krds-padding-9) var(--krds-padding-9);
      margin: var(--krds-gap-7) 0 0 var(--krds-gap-4);
      display:flex;
      flex-direction:column;
      }
      .main-story-swiper02 .tit {
        font-size: var(--krds-font-size-heading-medium);
        font-weight: var(--krds-font-weight-bold);
      }
      .main-story-swiper02 .detail {
        font-size: var(--krds-font-size-body-large);
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        margin-top: var(--krds-gap-3);
      }
      .main-story-swiper02 span {
        display: block;
        margin-left: auto;
        margin-top: var(--krds-gap-1);
        float: right;
      }
  /* 썸네일 */
  .main-story-swiper03 {margin-left: var(--krds-gap-4);}
    .main-story-swiper03 .swiper-slide.active {filter: brightness(0.6);}
      .main-story-swiper .swiper-indicator{margin-top: var(--krds-gap-4);}
  .main-story-swiper01,
  .main-story-swiper01 .swiper-wrapper,
  .main-story-swiper01 .swiper-slide {height: 100%;}
  .main-story-swiper01 .swiper-slide img,
  .main-story-swiper03 .swiper-slide img {
    width: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 5 / 7;
  }
  .main-story-swiper01 .swiper-slide a {
    display: block;
    border-radius: var(--krds-radius-xlarge1);
  }
  .main-story-swiper01 .swiper-slide a:focus {
    outline-offset: -2px;
    outline: 0.2rem solid #256ef4;
  }
  .main-story-swiper01 .swiper-slide img {
    max-height: 56rem;
  }
@media (max-width: 1439px) {
  .section02_slide {gap: var(--krds-gap-8);}
  .section02_slide .title-image {width: 30%;}
  .section02_slide > div:not(.title-image) {width: 67%;}
}
@media (max-width: 1023px) {
  .section02_slide {gap: var(--krds-gap-7);}
  .section02_slide .title-image {width: 34%;}
  .section02_slide > div:not(.title-image) {width: 62%;}
  .main-story-swiper02 {margin-bottom: var(--krds-gap-7);}
  .main-story-swiper02 .lib_name {
    font-size: var(--krds-font-size-body-medium);
    padding: var(--krds-padding-3) var(--krds-padding-6);
  }
  .main-story-swiper02 div {
    margin: var(--krds-gap-6) 0 0 var(--krds-gap-3);
    padding: var(--krds-padding-10) var(--krds-padding-card-medium) var(--krds-padding-card-small);
  }
  .main-story-swiper02 .tit {font-size: var(--krds-font-size-heading-small);}
  .main-story-swiper02 .detail {font-size: var(--krds-font-size-body-medium);}
  .main-story-swiper02 .krds-btn.text.large {padding: var(--krds-button--padding-y-medium) var(--krds-button--padding-x-medium);}
}
@media (max-width: 767px) {
  .section02_slide {flex-direction: column;}
  .section02_slide .title-image {
    width: 90%;
    max-width: 33rem;
  }
  .section02_slide > div:not(.title-image) {width: 100%;}
  .main-story-swiper02 div {margin: var(--krds-gap-6) 0 0 var(--krds-gap-1);}

  .main-story-swiper03 .swiper-wrapper {display: none;}
  .main-story-swiper .swiper-indicator {margin-top: 0;}
}

/* 소식공유방 */
#section02 .krds-structured-list {grid-template-columns: 1fr 1fr 1fr 1fr;}
  #section02 .krds-structured-list .structured-item {
    width: 100%;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: none;
    }
    #section02 .krds-structured-list .card-body .c-text .c-tit::after {display: none;}
    #section02 .krds-structured-list.type2 .card-body .c-tit .span {color: var(--krds-light-color-text-basic)}
    #section02 .krds-structured-list.type2 .card-body .c-tit .span,
    #section02 .krds-structured-list.type2 .card-body .c-txt {-webkit-line-clamp: 2;}
    #section02 .krds-structured-list .card-body .c-text .c-date {justify-content: right;}

@media (max-width: 1279px) {
  #section02 .krds-structured-list {grid-template-columns: 1fr 1fr;}
}
@media (max-width: 767px) {
  #section02 .krds-structured-list {grid-template-columns: 1fr;}
  #section02 .krds-structured-list.type2 .card-body .c-tit .span {-webkit-line-clamp: 1;}
}

/* section03 */
#section03 {border-radius: 0 5rem 5rem 0;}
  #section03 .main-box-responsive {
    display: flex;
    /* grid-template-columns: 3fr 2fr; */
    gap: var(--krds-gap-7);
    }
    #section03 .main-box-responsive .d-fix {width: 100%;}
      #section03 .main-box-responsive .d-fix > div:not(.main-tit-wrap) {
        background-color: var(--krds-light-color-background-white);
        border-radius: var(--krds-radius-xlarge1);
        padding: var(--krds-padding-card-medium);
        height: 38rem;
      }
  @media (max-width: 767px) {
    #section03 {border-radius: 0;}
  }

  /* 공지사항 */
  #section03 .news-tbl-list {
    display: flex;
    align-items: normal;
    justify-content: space-around;
    flex-direction: column;
    gap: var(--krds-gap-4);
    height: 100%;
    }
    #section03 .news-tbl-list li {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-direction: row;
      padding: var(--krds-padding-3) 0;
      gap: var(--krds-gap-5);
      }
      #section03 .news-tbl-list li a{
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        word-break: break-all;
      }
      #section03 .news-tbl-list li a:hover{
        text-decoration: underline;
        text-underline-offset: 0.5rem;
      }
      #section03 .news-tbl-list .date {
        color: var(--krds-light-color-text-subtle);
        min-width: 10rem;
      }
  @media (max-width: 767px) {
    #section03 .news-tbl-list li {
      flex-direction: column;
      gap: var(--krds-gap-3);
      padding: var(--krds-padding-2) 0;
    }
  }

  /* 추천도서 */
  #section03 .d-fix.main-recommended-book {width: 60rem;}
    #section03 .main-recommended-book-swiper {position: relative;}
      #section03 .main-recommended-book-swiper,
      #section03 .main-recommended-book-swiper .swiper,
      #section03 .main-recommended-book-swiper .swiper-wrapper {height: 100%;}
      #section03 .main-recommended-book-swiper .swiper {margin: 0 5rem;}
      #section03 .main-recommended-book-swiper .swiper-wrapper {align-items: center;}
        #section03 .main-recommended-book-swiper .swiper-slide {
          display: flex;
          justify-content: center;
          align-items: center;
          }
          #section03 .main-recommended-book-swiper a {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: var(--krds-gap-4);
            text-align: center;
            font-weight: var(--krds-font-weight-bold);
            width: fit-content;
            height: fit-content;
            }
            #section03 .main-recommended-book-swiper a img {
              width: 16rem;
              max-width: 100%;
              aspect-ratio: 20 / 28;
              object-fit: cover;
              transition: var(--krds-transition-base);
              box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            }
            #section03 .main-recommended-book-swiper a .tit{
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }
            #section03 .main-recommended-book-swiper a:hover img {
              transform: translateY(-10px);
            }
            #section03 .main-recommended-book-swiper button {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
            }
            #section03 .main-recommended-book-swiper button.swiper-button-prev {left: 2rem;}
            #section03 .main-recommended-book-swiper button.swiper-button-next {right: 2rem;}
  @media (max-width: 1279px) {
    #section03 .d-fix.main-recommended-book {width: 36rem;}
  }
  @media (max-width: 1023px) {
    #section03 .main-box-responsive {flex-direction: column;}
    #section03 .main-box-responsive .d-fix > div:not(.main-tit-wrap) {height: fit-content;}
    #section03 .d-fix.main-recommended-book {width: 100%;}
  }
  @media (max-width: 767px) {
    #section03 .main-box-responsive .d-fix > div:not(.main-tit-wrap) {padding: var(--krds-padding-card-medium);}
    #section03 .main-recommended-book-swiper .swiper {margin: 0 3rem;}
    #section03 .main-recommended-book-swiper button.swiper-button-prev {left: 1rem;}
    #section03 .main-recommended-book-swiper button.swiper-button-next {right: 1rem;}
  }

  /* 추천운영사례 */
  .main-best-practice-swiper a {
    display: block;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--krds-gap-4);
    font-size: var(--krds-font-size-body-large);
    font-weight: var(--krds-font-weight-bold);
    width: 100%;
    }
    .main-best-practice-swiper a .txt {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
    /* .main-best-practice-swiper a:hover .txt{
        text-decoration: underline;
        text-underline-offset: 0.5rem;
      } */
    .main-best-practice-swiper img{
      width: 100%;
      aspect-ratio: 50 / 33;
      object-fit: cover;
      border-radius: var(--krds-radius-xlarge1);
      transition: var(--krds-transition-base);
    }
    .main-best-practice-swiper a:hover img {
      transform: scale(0.97);
      border-radius: var(--krds-radius-xlarge1);
    }
    #section03 .main-best-practice-swiper .swiper-indicator {display: none;}
  @media (max-width: 767px) {
    #section03 .main-best-practice-swiper .swiper-indicator {
      display: flex;
      margin-top: var(--krds-gap-5);
    }
  }

/* section04 */
#section04 {
  background-color: var(--krds-light-color-background-white);
  border-radius: 5rem 0 0 0;
  }
  @media (max-width: 767px) {
    #section04 {border-radius: 0;}
  }

  /* 운영tip */
  #section04 .main-tip-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: flex-start;
    align-items: center;
    gap: var(--krds-gap-7);
    }
    #section04 .main-tip-list .tip-item {width: 100%;}
      #section04 .main-tip-list .tip-item a {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--krds-gap-7);
        padding: var(--krds-padding-card-large);
        border-radius: 1.2rem;
        aspect-ratio: 1 / 1;
        position: relative;
        z-index: 10;
        overflow: hidden;
      }
      #section04 .main-tip-list .tip-item a:hover {transform: scale(1.05);}
        #section04 .main-tip-list .tip-item a .tit{
          font-size: var(--krds-font-size-heading-xlarge);
          font-weight: var(--krds-font-weight-bold);
          margin: var(--krds-gap-3) 0;
          }
          #section04 .main-tip-list .tip-item a .c-txt {font-size: var(--krds-font-size-body-large);}
          #section04 .main-tip-list .tip-item:nth-of-type(1) a{background-color: #D8EEDD;}
          #section04 .main-tip-list .tip-item:nth-of-type(2) a{background-color: #D3EBFD;}
          #section04 .main-tip-list .tip-item:nth-of-type(3) a{background-color: #FFE0A3;}
          #section04 .main-tip-list .tip-item:nth-of-type(4) a{background-color: #F5D6D9;}
          #section04 .main-tip-list .tip-item a:before{
            font-size: 30rem;
            font-weight: bold;
            color: rgba(255, 255, 255, 0.3);
            position: absolute;
            top: 0;
            right: 0;
            z-index: -1;
            line-height: 15rem;
            letter-spacing: -5rem;
          }
          #section04 .main-tip-list .tip-item:nth-of-type(1) a:before {content: 'ㅅ';}
          #section04 .main-tip-list .tip-item:nth-of-type(2) a:before {content: 'ㅅ';}
          #section04 .main-tip-list .tip-item:nth-of-type(3) a:before {content: 'ㅁ';}
          #section04 .main-tip-list .tip-item:nth-of-type(4) a:before {content: 'ㅈ';}
  @media (max-width: 1279px) {
    #section04 .main-tip-list {grid-template-columns: 1fr 1fr;}
    #section04 .main-tip-list .tip-item a {aspect-ratio: auto;}
  }
  @media (max-width: 1023px) {
    #section04 .main-tip-list .tip-item a:before {
      font-size: 25rem;
      line-height: 12rem;
      letter-spacing: -4rem;
    }
  }
  @media (max-width: 767px) {
    #section04 {border-radius: 0;}

    /* 팁 */
    #section04 .main-tip-list {
      grid-template-columns: 1fr;
      gap: var(--krds-gap-4);
    }
    #section04 .main-tip-list .tip-item a {
      aspect-ratio: auto;
      gap: var(--krds-gap-5);
    }
    #section04 .main-tip-list .tip-item a:before {
      font-size: 20rem;
      line-height: 10rem;
      letter-spacing: -3rem;
    }
    #section04 .main-tip-list .tip-item a .card-top {
      position: relative;
      padding-left: 6rem;
    }
    #section04 .main-tip-list .tip-item a .card-top img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      height: 48px;
    }
    #section04 .main-tip-list .tip-item a .tit {
      margin: 0;
      font-size: var(--krds-font-size-heading-small);
    }
    #section04 .main-tip-list .tip-item a .sub-tit {font-size: var(--krds-font-size-body-small);}
    #section04 .main-tip-list .tip-item a .c-txt {font-size: var(--krds-font-size-body-medium);}
  }

  /* 퀵메뉴 */
  .main-quick-menu {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: var(--krds-gap-11);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 2.4rem;
    padding: var(--krds-padding-8);
    }
    .main-quick-menu div a {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: var(--krds-font-size-body-large);
      font-weight: var(--krds-font-weight-bold);
      gap: var(--krds-gap-5);
      padding: var(--krds-padding-6);
      border-radius: var(--krds-radius-xlarge1);
      }
      .main-quick-menu div a:hover {background-color: var(--krds-light-color-button-text-fill-hover);}
      .main-quick-menu div a span {
        width: 5.6rem;
        height: 5.6rem;
        border-radius: 2.4rem;
        transition: var(--krds-transition-base);
      }
      .main-quick-menu div:nth-of-type(1) a span {background-color: #EAF6EC;}
      .main-quick-menu div:nth-of-type(2) a span {background-color: #E7F4FE;}
      .main-quick-menu div:nth-of-type(3) a span {background-color: #FFF3DB;}
      .main-quick-menu div:nth-of-type(4) a span {background-color: #FBEFF0;}
      .main-quick-menu div a:hover span {background: #ffffff;}
      .main-quick-menu div a i {
        opacity: 0;
        transition: var(--krds-transition-base);
      }
      .main-quick-menu div a:hover i {opacity: 1;}

  @media (max-width: 1023px) {
    .main-quick-menu {
      flex-wrap: wrap;
      padding: var(--krds-padding-5);
    }
    .main-quick-menu div {width: 50%;}
    .main-quick-menu div a p {min-width: 15rem;}
  }
  @media (max-width: 767px) {
    .main-quick-menu {
      margin-top: var(--krds-gap-9);
      border-radius: var(--krds-radius-xlarge1);
    }
    .main-quick-menu div a {
      font-size: var(--krds-font-size-body-medium);
      gap: var(--krds-gap-4);
      padding: var(--krds-padding-3);
    }
    .main-quick-menu div a span {
      width: 5rem;
      height: 5rem;
      border-radius: 2rem;
    }
    .main-quick-menu div a p {
      width: calc(100% - 110px);
      min-width: auto;
    }
    .main-quick-menu div a i {opacity: 1;}
  }
  @media (max-width: 501px) {
    .main-quick-menu div {width: 100%;}
  }
  @media (max-width: 374px) {
    .main-quick-menu div a span {
      width: 4.5rem;
      height: 4.5rem;
      border-radius: 1.6rem;
    }
    .main-quick-menu div a p {width: calc(100% - 115px);}
  }

/* binded content */
.news-list-renew {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2.4rem;
  background: #fff;
  border-radius: var(--krds-radius-xlarge1);
  box-shadow: rgba(99, 99, 99, 0.12) 0px 2px 8px 0px;
}
.news-list-renew li + li {
  border-top: 1px solid var(--krds-light-color-divider-gray-light);
  padding-top: 1.2rem;
}
.news-list-renew a {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  justify-content: space-between;
}
.news-list-renew .subject {
  flex: 1 1 auto;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: var(--krds-font-size-body-large);
  font-weight: var(--krds-font-weight-bold);
}
.news-list-renew .date {
  flex: 0 0 auto;
  color: var(--krds-light-color-text-subtle);
  font-size: var(--krds-font-size-body-medium);
}

.book-card-renew,
.best-card-renew {
  display: flex;
  flex-direction: column;
  gap: var(--krds-gap-4);
}
.book-card-renew .thumb,
.best-card-renew .thumb {
  overflow: hidden;
  border-radius: var(--krds-radius-xlarge1);
  background: #fff;
}
.book-card-renew .thumb img,
.best-card-renew .thumb img {
  width: 100%;
  display: block;
  object-fit: cover;
}
.book-card-renew .thumb img {
  aspect-ratio: 5 / 7;
}
.best-card-renew .thumb img {
  aspect-ratio: 50 / 33;
}
.book-card-renew .title,
.best-card-renew .text p {
  font-size: var(--krds-font-size-body-large);
  font-weight: var(--krds-font-weight-bold);
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.best-card-renew .text strong {
  display: block;
  margin-bottom: .8rem;
  color: var(--krds-light-color-text-subtle);
  font-size: var(--krds-font-size-body-medium);
}

.tip-list-renew {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--krds-gap-7);
}
.tip-card-renew {
  display: flex;
  flex-direction: column;
  gap: var(--krds-gap-5);
  min-height: 22rem;
  padding: var(--krds-padding-card-large);
  border-radius: var(--krds-radius-xlarge1);
  position: relative;
  overflow: hidden;
  transition: transform var(--krds-transition-base);
}
.tip-card-renew:hover {
  transform: translateY(-4px);
}
.tip-card-renew:nth-child(1) { background: #D8EEDD; }
.tip-card-renew:nth-child(2) { background: #D3EBFD; }
.tip-card-renew:nth-child(3) { background: #FFE0A3; }
.tip-card-renew:nth-child(4) { background: #F5D6D9; }
.tip-card-renew span img {
  width: 5.6rem;
  height: 5.6rem;
}
.tip-card-renew strong {
  font-size: var(--krds-font-size-heading-medium);
  font-weight: var(--krds-font-weight-bold);
}
.tip-card-renew p {
  font-size: var(--krds-font-size-body-large);
}

.main-quick-menu > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--krds-gap-5);
  padding: var(--krds-padding-6);
  border-radius: var(--krds-radius-xlarge1);
  font-size: var(--krds-font-size-body-large);
  font-weight: var(--krds-font-weight-bold);
}
.main-quick-menu > a:hover {
  background-color: var(--krds-light-color-button-text-fill-hover);
}
.main-quick-menu > a > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 2.4rem;
  transition: var(--krds-transition-base);
}
.main-quick-menu > a:nth-child(1) > span { background-color: #EAF6EC; }
.main-quick-menu > a:nth-child(2) > span { background-color: #E7F4FE; }
.main-quick-menu > a:nth-child(3) > span { background-color: #FFF3DB; }
.main-quick-menu > a:nth-child(4) > span { background-color: #FBEFF0; }

@media (max-width: 1023px) {
  .tip-list-renew {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .main-quick-menu > a {
    width: calc(50% - 1rem);
  }
}

@media (max-width: 767px) {
  .news-list-renew {
    padding: 1.6rem;
  }
  .news-list-renew a {
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
  }
  .tip-list-renew {
    grid-template-columns: 1fr;
    gap: var(--krds-gap-4);
  }
  .tip-card-renew {
    min-height: auto;
    padding: var(--krds-padding-card-medium);
  }
  .tip-card-renew strong {
    font-size: var(--krds-font-size-heading-small);
  }
  .tip-card-renew p {
    font-size: var(--krds-font-size-body-medium);
  }
  .main-quick-menu > a {
    width: 100%;
    justify-content: flex-start;
    font-size: var(--krds-font-size-body-medium);
  }
}