@use '../global' as *;

.c-news-col {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: fz(20);
  row-gap: fz(29);

  &::before,
  &::after {
    display: none;
  }
}

.c-news-empty {
  width: 100%;
  padding: rem(48) rem(20);
  border: 1px solid #d9e0e7;
  border-radius: rem(8);
  background-color: #fff;
  text-align: center;
}

.c-news {
  width: fz(328);
  background-color: #fff;
  border-radius: fz(10);
  overflow: hidden;
  box-shadow: 0 fz(3) fz(15) rgba($color: #000000, $alpha: 0.16);
  transition: linear 0.1222s;

  min-height: fz(306);

  @include mq-down(lg) {
    width: 31.78%;
  }

  @include mq-down(sm) {
    width: fz(328);
    margin: 0 auto;

    &:not(:last-of-type) {
      //margin-bottom: rem(13);
    }
  }

  &:hover {
    box-shadow: none;

    a {
      opacity: 1;
    }
  }

  &__link {
  }

  &__thumb {
    height: fz(185);
  }

  &__main {
    padding: fz(16) fz(20);
  }

  &__date {
    display: flex;
    font-size: fz(14);
    line-height: 1;
    margin-bottom: fz(8);

    &-txt {
      color: #8694aa;
    }

    &-new {
      color: #ff1766;
      font-size: fz(10);
      font-weight: 900;
      margin-left: 0.5em;
    }
  }

  &__ttl {
    color: $key_blue;
    font-size: fz(18);
    @include lh(18, 25);
  }
}

.pagination {
  font-weight: 600;
  margin-top: rem(80.3);

  &__list {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__item {
    //flex: 0 0 auto;
  }

  &__link,
  span {
    width: rem(39);
    height: rem(39);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: rem(17);
    font-weight: 500;

    @include mq-down(sm) {
      font-size: rem(15);
    }

    &.current {
      background-color: $key_black;
      color: #fff;
      width: rem(31);
      height: rem(31);
    }
  }

  &__nav {
    span {
      width: auto;
      height: auto;
      border-radius: auto;
      display: block;
    }
  }

  &__arw {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    background-color: $key_blue !important;
  }

  &__guide {
    flex: 1 0 auto;
  }

  .prev,
  .next {
    display: flex;
    align-items: center;
    font-size: rem(18);
    gap: rem(12.5);

    @include mq-down(sm) {
      font-size: rem(14);
      gap: rem(8);
    }
  }

  .prev {
    margin-right: rem(38);

    .cricle-arw__arw {
      transform: scale(-1, 1);
    }
  }

  .next {
    margin-left: rem(38);
    flex-flow: row-reverse;
  }
}