@charset "utf-8";
@import url("../fonts/Inter/Inter.css");

/* ==========================================================
페이지네이션 스타일 따로 설정 START
==========================================================*/
.pg_wrap {clear: both; margin: 30px 0; text-align: center;}
nav {display: block;}
.msg_sound_only, .sound_only {display: inline-block !important; position: absolute; top: 0; left: 0;
    margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important;}

.pg_wrap {clear:both; margin:30px 0 ; text-align:center; }
.pg_wrap:after {display:block; visibility:hidden; clear:both; content:""; }
.pg_page {color: #555; font-size: 1.083em; height: 30px; line-height: 28px; padding: 0 5px; min-width: 30px; text-decoration: none; border-radius: 15px;}
.pg_page, .pg_current {display: inline-block; vertical-align: middle; background: #f3f3f3; border: 1px solid #bbbcc3; margin: 2px 0;}
.pg a:focus, .pg a:hover {text-decoration:none;}
.pg_page:hover{background:#ddd; color:#000;}
.pg_current {display: inline-block; background: #666; color: #fff; border: 1px solid #444; font-weight: bold; height: 30px; line-height: 30px; padding: 0 10px; min-width: 22px; border-radius: 15px;}
.pg_start {text-indent: -999px; overflow: hidden; background: url(../img/btn_first.gif) no-repeat 50% 50% #fff; padding: 0; border: 1px solid #bbb;}
.pg_end {text-indent: -999px; overflow: hidden; background: url(../img/btn_end.gif) no-repeat 50% 50% #fff; padding: 0; border: 1px solid #bbb;}
.pg_prev {text-indent: -999px; overflow: hidden; background: url(../img/btn_prev.gif) no-repeat 50% 50% #fff; padding:0; border:1px solid #bbb;}
.pg_next {text-indent: -999px; overflow: hidden; background: url(../img/btn_next.gif) no-repeat 50% 50% #fff; padding:0; border:1px solid #bbb;}
.pg_start:hover {background: url(../img/btn_first.gif) no-repeat 50% 50% #efefef; border: 1px solid #ddd;}
.pg_prev:hover {background: url(../img/btn_prev.gif) no-repeat 50% 50% #efefef; border: 1px solid #ddd;}
.pg_end:hover {background: url(../img/btn_end.gif) no-repeat 50% 50% #efefef; border: 1px solid #ddd;}
.pg_next:hover {background: url(../img/btn_next.gif) no-repeat 50% 50% #efefef; border: 1px solid #ddd;}
/* ==========================================================
페이지네이션 스타일 따로 설정 END
==========================================================*/


/* ========================================================== 
페이지네이션 스타일 재설정 START 
==========================================================*/
.pg_page, .pg_current {width: 44px; height: 44px; line-height: 44px; font-family: 'Inter'; font-weight: 300; font-size: 24px; text-align: center;
    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_end {background: url(../common/images/btn_end_arrow.png) center no-repeat; background-size: contain;}
.pg_end:hover {background: url(../common/images/btn_end_arrow_on.png) center no-repeat; background-size: contain; border: none;}
.pg_next {background: url(../common/images/btn_next_arrow.png) center no-repeat; background-size: contain;}
.pg_next:hover {background: url(../common/images/btn_next_arrow_on.png) center no-repeat; background-size: contain; border: none;}
.pg_start {background: url(../common/images/btn_start_arrow.png) center no-repeat; background-size: contain;}
.pg_start:hover {background: url(../common/images/btn_start_arrow_on.png) center no-repeat; background-size: contain; border: none;}
.pg_prev {background: url(../common/images/btn_prev_arrow.png) center no-repeat; background-size: contain;}
.pg_prev:hover {background: url(../common/images/btn_prev_arrow_on.png) center no-repeat; background-size: contain; border: none;}

/* 태블릿 (해상도 769px ~ 1024px) */
@media screen 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 {font-size: 18px;}
    .pg_current {font-size: 18px;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .pg_wrap {margin: 60px 0 20px;}
    .pg_page, .pg_current {font-size: 16px;}
    .pg_page:hover {font-size: 16px;}
    .pg_current {font-size: 16px;}
}
/* ==========================================================
페이지네이션 스타일 재설정 END
==========================================================*/