/* paging */
.paging { display: table; margin: 6px auto 30px; }
.paging > button { color: #8e8e8e; background-color: #494949; min-width: 27px; height: 27px; line-height: 27px; border-radius: 2px; float: left; text-align: center; font-size: 12px; padding: 0 5px; margin: 0 3px 0 0; cursor: pointer; box-sizing: border-box; position: relative; }
.paging > button:hover { color: #000; background-color: #eee; }
.paging > button.active { color: #000; background-color: #eee; }
.paging > button::after, .paging > button::before { position: relative; top: 2px; }
.paging span { cursor: pointer; }
.paging .hide { display: none !important; }
.arial { }

/*paging first last*/
.paging button.arrow_first::before,
.paging button.arrow_last::after,
.paging button.arrow_left::after,
.paging button.arrow_right::after{content: '';background-repeat:no-repeat;position: absolute; top: 0; left: 0; display: inline-block; background-position: 50%;opacity: 0.4;width: 27px; height: 27px;}
/*paging left right*/
.paging button.arrow_left:hover::after,
.paging button.arrow_right:hover::after,
.paging button.arrow_first:hover::before,
.paging button.arrow_last:hover::after{content: '';background-repeat:no-repeat; background-position: 50%;opacity: 0.7;}

/*paging 이미지 경로*/
.paging button.arrow_first::before { background-image: url(/Common/img/paging/arrow_first_white.svg);  }
.paging button.arrow_last::after {background-image: url(/Common/img/paging/arrow_last_white.svg);}

.paging button.arrow_left::after {background-image: url(/Common/img/paging/arrow_left_white.svg);}
.paging button.arrow_right::after {background-image: url(/Common/img/paging/arrow_right_white.svg);}

.paging button.arrow_first:hover::before { background-image: url(/Common/img/paging/arrow_first_black.svg);}
.paging button.arrow_last:hover::after {background-image: url(/Common/img/paging/arrow_last_black.svg); }
.paging button.arrow_left:hover::after { background-image: url(/Common/img/paging/arrow_left_black.svg); }
.paging button.arrow_right:hover::after {  background-image: url(/Common/img/paging/arrow_right_black.svg); }



/* button type2 */
.paging.theme-white > button { background-color: white; color: #4c4c4c; border: 1px solid #e1e1e1; }
.paging.theme-white > button:hover { color: white !important; background-color: #1e94fa; border-color: #1e94fa; box-shadow: inset 0 0px 20px rgba(0,0,0, 0.18); }
.paging.theme-white > button:active { box-shadow: 100px 0 0 0 rgba(0,0,0, 0.15) inset; }
.paging.theme-white > button.active { color: white; background-color: #1e94fa; border-color: #1e94fa; box-shadow: inset 0 0px 20px rgba(0,0,0, 0.18); text-shadow: 1px 2px 2px rgba(0,0,0,0.5); }
.paging.theme-white span { cursor: pointer; }

.paging.theme-white button.arrow_left::after,
.paging.theme-white button.arrow_right::after{content: '';background-repeat:no-repeat; background-position: 50%;opacity:0.4;}
.paging.theme-white button.arrow_left:hover::after,
.paging.theme-white button.arrow_right:hover::after{opacity:1;}
.paging.theme-white button.arrow_first::before,
.paging.theme-white button.arrow_last::after{content: '';background-repeat:no-repeat; background-position: 50%;opacity:0.4;}
.paging.theme-white button.arrow_first:hover::before,
.paging.theme-white button.arrow_last:hover::after{opacity:1;}

.paging.theme-white button.arrow_left::after {background-image: url(/Common/img/paging/arrow_left_black.svg);}
.paging.theme-white button.arrow_right::after {background-image: url(/Common/img/paging/arrow_right_black.svg);}
.paging.theme-white button.arrow_left:hover::after {background-image: url(/Common/img/paging/arrow_left_white.svg);}
.paging.theme-white button.arrow_right:hover::after {background-image: url(/Common/img/paging/arrow_right_white.svg);}
.paging.theme-white button.arrow_first::before {background-image: url(/Common/img/paging/arrow_first_black.svg);}
.paging.theme-white button.arrow_last::after {background-image: url(/Common/img/paging/arrow_last_black.svg);}
.paging.theme-white button.arrow_first:hover::before {background-image: url(/Common/img/paging/arrow_first_white.svg);}
.paging.theme-white button.arrow_last:hover::after {background-image: url(/Common/img/paging/arrow_last_white.svg);}



/* big button */
.paging.bigBtn button.arrow_left { width: 50px; }
.paging.bigBtn button.arrow_right { width: 50px; }
.paging.bigBtn button.arrow_first { width: 50px; }
.paging.bigBtn button.arrow_last { width: 50px; }
.paging.bigBtn button.arrow_left::after { width: 50px; }
.paging.bigBtn button.arrow_right::after { width: 50px; }
.paging.bigBtn button.arrow_first::after { width: 50px; }
.paging.bigBtn button.arrow_last::after { width: 50px; }