.paginations {
  margin: 3rem 0; }
  @media (max-width: 1023px) {
    .paginations {
      margin: 20px 0; } }
  .paginations__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0; }
  .paginations__link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%; }
    .paginations__link .icon {
      width: 30px !important;
      height: 8px !important; }
  .paginations__item {
    min-width: 4.4rem;
    user-select: none;
    overflow: hidden;
    margin-right: 1.2rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    border: 1px solid #C4C4C4;
    fill: #C4C4C4;
    transition: all ease .3s;
    border-color: transparent; }
    @media (max-width: 1023px) {
      .paginations__item {
        width: 40px;
        height: 40px; } }
    .paginations__item:before {
      content: '';
      position: absolute;
      left: 1px;
      right: 1px;
      bottom: 1px;
      top: 1px;
      pointer-events: none;
      border: 1px solid transparent;
      transition: all ease .3s; }
    @media (min-width: 1024px) {
      .paginations__item {
        cursor: pointer; }
        .paginations__item:hover {
          fill: #8B8B8B;
          border-color: #8B8B8B; }
          .paginations__item:hover:before {
            border-color: #8B8B8B; } }
    .paginations__item:active {
      fill: #444444;
      border-color: #444444;
      transform: translateY(1px); }
      .paginations__item:active:before {
        border-color: #444444; }
    @media (max-width: 1023px) {
      .paginations__item {
        width: 40px;
        height: 40px; } }
    @media (min-width: 1024px) {
      .paginations__item {
        cursor: pointer; }
        .paginations__item:hover {
          border-color: #121219; }
          .paginations__item:hover:before {
            border-color: transparent; } }
    .paginations__item:active {
      border-color: #121219; }
      .paginations__item:active:before {
        border-color: #121219; }
    .paginations__item.active {
      pointer-events: none;
      border-color: #121219; }
      .paginations__item.active:before {
        border-color: #121219; }
      .paginations__item.active .paginations__link {
        cursor: default; }
    .paginations__item--first, .paginations__item--last {
      width: 4.4rem;
      height: 4.4rem;
      flex-shrink: 0;
      overflow: visible;
      fill: #121219;
      border: none; }
      .paginations__item--first:before, .paginations__item--last:before {
        content: none; }
      @media (max-width: 1023px) {
        .paginations__item--first, .paginations__item--last {
          width: 40px;
          height: 40px; } }
      .paginations__item--first .paginations__link, .paginations__item--last .paginations__link {
        position: relative;
        padding: 0;
        background-color: transparent;
        border-radius: 0px; }
        .paginations__item--first .paginations__link:before, .paginations__item--last .paginations__link:before {
          content: '';
          position: absolute;
          left: -1px;
          top: 0;
          bottom: 0;
          height: 2rem;
          margin: auto 0;
          width: 1px;
          background-color: #121219; }
      @media (min-width: 1024px) {
        .paginations__item--first:hover, .paginations__item--last:hover {
          cursor: pointer;
          fill: #FFC422; } }
    .paginations__item--first {
      margin-right: 1rem; }
      .paginations__item--first .paginations__link:before {
        left: auto;
        right: -1px; }
      @media (max-width: 767px) {
        .paginations__item--first {
          margin-right: 0; } }
    .paginations__item--last {
      margin-left: 10px; }
      @media (max-width: 767px) {
        .paginations__item--last {
          margin-left: 0; } }
      .paginations__item--last .icon {
        transform: rotate(0deg); }
    .paginations__item[disabled] {
      pointer-events: none;
      box-shadow: none; }
      .paginations__item[disabled] .icon {
        fill: #E4E4E4; }
      .paginations__item[disabled] .paginations__link:before {
        background-color: #E4E4E4; }
  .paginations .paginations__item--active.paginations__item--first,
  .paginations .paginations__item--active.paginations__item--last {
    visibility: hidden; }
  .paginations__more {
    margin-top: 1.6rem;
    display: flex;
    justify-content: center; }
    @media (max-width: 1023px) {
      .paginations__more {
        margin-top: 12px; } }
    .paginations__more .btn {
      height: 4.4rem;
      font-size: 1.6rem; }
      @media (max-width: 1023px) {
        .paginations__more .btn {
          height: 36px;
          font-size: 14px; } }