@charset "utf-8";
.indicator ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.indicator li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.6);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.indicator .no,
.indicator .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 500;
  line-height: 1;
}

.indicator li > a:hover {
  background-color: #e9eaec;
  color: #000bb2;
}

/* 현재 페이지 */
.indicator li > a.active,
.indicator li > a.active:hover {
  background-color: #000bb2;
  color: #ffffff;
}

.indicator .no.active {
  font-weight: 700;
}

/* 비활성 : PHP 에서 첫/이전/다음/끝 버튼이 막힐 때 href='#' 로 출력되는 것을 이용 */
.indicator li > a[href="#"] {
  color: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* Font Awesome 미사용 시 화살표 대체 (FA 를 쓰면 이 블록 삭제) */
.indicator .arrow i {
  font-style: normal;
  line-height: 1;
}
.indicator .fa-angle-double-left::before {
  content: '\00AB';
}
.indicator .fa-angle-left::before {
  content: '\2039';
}
.indicator .fa-angle-right::before {
  content: '\203A';
}
.indicator .fa-angle-double-right::before {
  content: '\00BB';
}

/** Desktop **/
@media (min-width: 1321px) {
  .indicator {
    margin-top: 60px;
  }
  .indicator li > a {
    width: 40px;
    height: 40px;
  }
  .indicator .no {
    font-size: 16px;
  }
  .indicator .arrow {
    font-size: 20px;
  }
}

/** Tablet 이하 통합 **/
@media (max-width: 1320px) {
  .indicator {
    margin-top: 2.5rem;
  }
  .indicator li > a {
    width: 2.125rem;
    height: 2.125rem;
  }
  .indicator .no {
    font-size: 0.875rem;
  }
  .indicator .arrow {
    font-size: 1.125rem;
  }
}