.coc-news {
  position: relative;
  z-index: 2;
  padding: 40px 108px 80px;
  border-radius: 0 0 99px 99px;
}

.coc-news__type-btns {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-bottom: 80px;
}

.coc-news__type-btns__btn {
  all: unset;
  width: 184px;
  height: 40px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.1px;
  border-radius: 99px;
}

.coc-news__type-btns__btn:not(.coc-news__type-btns__btn--active):hover {
  color: #246987;
}

.coc-news__type-btns__btn--active {
  background-color: #C4E6E8;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: default;
}

.coc-news .hidden {
  visibility: hidden;
}

.coc-news__list {
  all: unset;
  padding: 0 104px;
  display: flex;
  flex-direction: column;
  margin-bottom: 80px;
}

.coc-news__list a {
  all: unset;
  display: block;
}

.coc-news__list__item {
  all: unset;
  padding: 24px 24px 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid #E0E0E0;
}

.coc-news__list__item:hover {
  color: #246987;
}

.coc-news__list__item__header {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  overflow: hidden;
}

.coc-news__list__item__header__title {
  all: unset;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  color: #1A1A1A;
  font-size: 18px;
  letter-spacing: 0.25px;

}

.coc-news__list__item__link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coc-news__list__item__link {
  height: 100%;
}

.coc-news__list__item__link img {
  height: 16px;
}

.coc-news__list__item__header__chip {
  height: 26px;
  width: 82px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FAFAFA;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.coc-news__list__item__header__chip--pink {
  background-color: #C84E97;
}

.coc-news__list__item__header__chip--green {
  background-color: #07A0A7;
}

.coc-news__list__item__header__chip--blue {
  background-color: #3487AA;
}

.coc-news__list__item__header__date {
  font-size: 14px;
  letter-spacing: -0.1px;
  color: #525252;
}

.coc-news__pagination {
  width: 210px;
  overflow: hidden;
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coc-news__pagination a {
  all: unset
}

.coc-news__pagination__num {
  all: unset;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  color: #1A1A1A;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.coc-news__pagination__num__none {
  display: none;
}

.coc-news__pagination__num--active {
  cursor: default;
  background-color: #C4E6E8;
}

.coc-news__pagination__num:not(.coc-news__pagination__num--active):hover {
  color: #246987;
}

.coc-news__pagination__arrow {
  fill: #525252;
}

.coc-news__pagination__arrow--disable {
  fill: #9E9E9E;
  cursor: default;
}

@media screen and (max-width: 991px) {
  .coc-news {
    padding: 20px 40px 40px;
  }

  .coc-news__type-btns {
    margin-bottom: 40px;
  }

  .coc-news__type-btns__btn {
    width: 154px;
  }

  .coc-news__list {
    padding: 0 78px;
    margin-bottom: 40px;
  }

  .coc-news__list__item {
    padding: 16px 16px 16px 24px;
  }

  .coc-news__list__item__header {
    gap: 16px
  }

  .coc-news__list__item__header__date {
    font-size: 12px;
  }

  .coc-news__list__item__header__title {
    font-size: 16px;
    letter-spacing: 0.2px;
  }
}

@media screen and (max-width: 768px) {
  .coc-news {
    padding: 20px 20px 40px;
  }

  .coc-news__type-btns {
    overflow-x: scroll;
    gap: 16px;
    justify-content: flex-start;
  }

  .coc-news__type-btns__btn {
    flex-shrink: 0;
    width: 106px;
  }

  .coc-news__list {
    padding: 0;
  }

  .coc-news__list__item {
    align-items: flex-start;
    padding: 16px 8px 16px 16px;
  }

  .coc-news__list__item__header {
    flex-wrap: wrap;
  }

  .coc-news__list__item__header__title {
    flex: unset;
    width: 100%;
    font-size: 14px;
    letter-spacing: 0.1px;
  }

  .coc-news__list__item__link {
    height: 26px;
    width: 26px;
  }
}