.pagination {
  align-items: center;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.pagination a {
  font-size: 16px;
}

.pagination a:not(.--active) {
  transition: color 400ms ease;
}

.pagination a:last-child,
.pagination a:first-child {
  height: 36px;
  width: 36px;
  position: relative;
}

.pagination a:last-child::before,
.pagination a:first-child::before {
  content: "";
  height: 15px;
  width: 15px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: center;
  transition: border 400ms ease;
}

.pagination a:last-child.--disabled,
.pagination a:first-child.--disabled {
  opacity: 0.3;
  pointer-events: none;
}

.pagination a:first-child::before {
  border-bottom: 3px solid #08287f;
  border-left: 3px solid #08287f;
}

.pagination a:last-child::before {
  border-right: 3px solid #08287f;
  border-top: 3px solid #08287f;
}

.pagination a.--active {
  color: #08287f;
  font-weight: 700;
  pointer-events: none;
}

.project-case {
  position: relative;
  z-index: 0;
}

.project-case .sec {
  position: relative;
}

.project-case .sec::before {
  background-color: #f0f0f0;
  content: "";
  margin-left: -50%;
  position: absolute;
  left: 50%;
  z-index: -1;
}

.project-case .sec::after {
  content: "";
  display: block;
  position: absolute;
  top: -70px;
  right: 100%;
  z-index: -1;
  width: 50vw;
  max-width: 280px;
  height: 100%;
  background-color: #f0f0f0;
}

.project-case .project-case_list {
  display: grid;
  gap: 60px 50px;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
}

.project-case .project-case_list .tag {
  pointer-events: none;
}

@media screen and (min-width: 768px) {
  .project-case .sec::after {
    top: -104px;
    height: 398px;
  }
}

@media screen and (min-width: 1366px) {
  .project-case .sec::before {
    margin-left: -700px;
    height: 398px;
    width: 568px;
    top: -104px;
  }
}

@media screen and (max-width: 1365.8px) {
  .project-case .sec::before {
    height: 29.13616vw;
    width: 41.58126vw;
    top: -104px;
  }
}

@media screen and (max-width: 767.8px) {
  .project-case .sec::before {
    height: 207px;
    width: 290px;
    top: -70px;
  }

  .project-case .project-case_list {
    gap: 70px 0;
    grid-template-columns: auto;
  }
}

@media (hover: hover) {
  .pagination a:not(.--active):hover {
    opacity: 1;
    color: #285ae1;
  }

  .pagination a:last-child:not(.--disabled):hover::before,
  .pagination a:first-child:not(.--disabled):hover::before {
    border-color: #285ae1;
  }
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .pagination a:not(.--active):hover {
    opacity: 1;
    color: #285ae1;
  }

  .pagination a:last-child:not(.--disabled):hover::before,
  .pagination a:first-child:not(.--disabled):hover::before {
    border-color: #285ae1;
  }
}