/* 
* 커스텀 페이징 전용 CSS
* admin/lib/function.php - custom_paging() 함수 사용시 적용됨
*/



/* custom_paging 페이징 관련 (story_visual)*/
/* paging */
.paging_wrap{text-align:center; box-sizing:border-box; margin-top: 80px;}
ul.paging{display: flex; justify-content: center; font-size:0; gap:10px;}
ul.paging li{display:block; border-radius:50%; width:40px; height:40px;  border:none; vertical-align:middle; }
ul.paging li.prev{margin-right: 10px;}
ul.paging li.next{margin-left: 10px;}
ul.paging li a{display:flex; align-items: center; justify-content: center; width: 100%; height: 100%;  font-size:18px; color:#333; font-weight: 500;font-size: 16px;}
ul.paging li.on{background: var(--co01);}
ul.paging li.on a{color:#fff; }

.paging_wrap02{margin-top: 40px;}
.paging_wrap02 ul{display: flex;justify-content: center;gap:5px;}
.paging_wrap02 ul li a{display: flex;align-items: center;justify-content: center;width: 35px; height: 35px; border:1px solid #ddd;color: #333;}
.paging_wrap02 ul li.on a{border:1px solid #2e2e2e;color: #2e2e2e;}

@media screen and (max-width:1024px) {
.paging_wrap{margin-top: 50px;}
ul.paging{gap:6px;}
ul.paging li{width: 30px;height: 30px;}
ul.paging li a{font-size: 13px;}
ul.paging li.prev{margin-right: 14px;}
ul.paging li.next{margin-left: 14px;}
ul.paging li img{width: 8px;}
}


@media screen and (max-width:767px) {
.paging_wrap{margin-top: 40px;}
ul.paging{gap:6px;}
ul.paging li{width: 27px;height: 27px;}
ul.paging li a{font-size: 12px;}
ul.paging li.prev{margin-right: 12px;}
ul.paging li.next{margin-left: 12px;}
ul.paging li img{width: 7px;}

.paging_wrap02{margin-top: 40px;}
.paging_wrap02 ul{display: flex;justify-content: center;gap:5px;}
.paging_wrap02 ul li a{display: flex;align-items: center;justify-content: center;width: 25px; height: 25px; border:1px solid #ddd;color: #333;}
.paging_wrap02 ul li.on a{border:1px solid #2e2e2e;color: #2e2e2e;}
.paging_wrap02 ul li img{height: 8px;}

}