/*
 * 게시판/갤러리 공용 페이지네이션 (그누보드 pg_wrap 구조)
 * 원본 /theme/daeat/css/board.page.css 중 실제 적용되는 규칙만 발췌.
 * 갤러리 모듈마다 중복 정의하지 않도록 분리했다.
 */

.pg_wrap {clear: both; margin: 30px 0; text-align: center;}
.pg_wrap:after {display: block; visibility: hidden; clear: both; content: "";}
.pg a:focus, .pg a:hover {text-decoration: none;}
.pg_page, .pg_current {display: inline-block; vertical-align: middle; width: 44px; height: 44px; line-height: 44px;
    font-family: 'Inter'; font-weight: 300; font-size: 24px; text-align: center; text-decoration: none; color: #555;
    margin: 0; padding: 0; box-sizing: border-box; background: none; border: none; border-radius: 100px;}
.pg_page:hover {background: rgba(220, 204, 255, 0.42); color: #7435FF; font-weight: 400; font-size: 24px;}
.pg_current {background: rgba(220, 204, 255, 0.42); color: #7435FF; font-weight: 400; font-size: 24px;}
.pg_start, .pg_prev, .pg_next, .pg_end {text-indent: -999px; overflow: hidden; background-size: contain;}
.pg_start {background: url(../images/btn_start_arrow.png) center no-repeat; background-size: contain;}
.pg_start:hover {background: url(../images/btn_start_arrow_on.png) center no-repeat; background-size: contain; border: none;}
.pg_prev {background: url(../images/btn_prev_arrow.png) center no-repeat; background-size: contain;}
.pg_prev:hover {background: url(../images/btn_prev_arrow_on.png) center no-repeat; background-size: contain; border: none;}
.pg_next {background: url(../images/btn_next_arrow.png) center no-repeat; background-size: contain;}
.pg_next:hover {background: url(../images/btn_next_arrow_on.png) center no-repeat; background-size: contain; border: none;}
.pg_end {background: url(../images/btn_end_arrow.png) center no-repeat; background-size: contain;}
.pg_end:hover {background: url(../images/btn_end_arrow_on.png) center no-repeat; background-size: contain; border: none;}

@media all and (max-width: 1024px) {
    .pg_wrap {margin: 44px 0;}
    .pg_page, .pg_current {width: 38px; height: 38px; line-height: 38px; font-size: 20px;}
    .pg_page:hover, .pg_current {font-size: 18px;}
}
@media all and (max-width: 767px) {
    .pg_wrap {margin: 60px 0 20px;}
    .pg_page, .pg_current, .pg_page:hover {font-size: 16px;}
}