#wrap .inner { padding: 30px 15px;}
h2 { font-weight: 600; font-size: 20px; margin-bottom: 20px;}

.filter_container { background: #fff; padding: 15px; border-radius: 15px;}
.filter_container .filter { margin-bottom: 15px;}
.filter_container .filter.job_wrap { margin-bottom: 0;}
.filter_container .filter > p { font-weight: 600; padding: 10px 5px; margin-bottom: 10px; border-bottom: 1px solid #ddd;}
.filter_container .filter ul { display: flex; gap: 5px; flex-wrap: wrap;}
.filter_container .filter ul li a,
.filter_container .filter ul li label { display: block; padding: 5px;  background: #EBEBEB; font-size: 16px; border-radius: 5px;}
.filter_container .filter ul li input { display: none;}
.filter_container .filter ul.job_group { padding: 3px; margin-bottom: 10px; background: #EBEBEB; border-radius: 5px; width: fit-content;}
.filter_container .filter ul.job_group li label { background: #fff; color: #333;}
.filter_container .filter ul a.on,
.filter_container .filter ul input:checked + label { background: #415067; color: #fff; font-weight: 600;}

.rank_table { margin-top: 30px; width: 100%;}
.rank_table thead { background: var(--navy_dark); text-align: center;}
.rank_table thead tr th { padding: 10px; color: #fff;}
.rank_table tbody { background: #fff;}
.rank_table tbody tr td {padding: 10px 5px; text-align: center;}
.rank_table tbody tr td a { display: flex; align-items: center; gap: 10px; }
.rank_table tbody tr td a .job_illust { width: 60px;}
.rank_table tbody tr td a p { text-align: left;}
.rank_table tbody tr td a .text { display: flex; flex-direction: column; gap: 2px;}
.rank_table tbody tr td a .text .fl { display: flex; align-items: center; gap: 3px;}
.rank_table tbody tr td a .text .fl p { font-weight: 600;}
.rank_table tbody tr td a .text .fl i { color: #8f8f8f; font-size: 10px;}
.rank_table tbody tr td a .world_img { width: 16px;}
.rank_table tbody tr .charcter { min-width: 160px;}
.rank_table tbody tr:hover .charcter .nick { text-decoration: underline;}
.rank_table tbody tr .guild { min-width: 80px;}

.pagination { display: flex; flex-direction: column; justify-content: center; gap: 10px; margin-top: 15px; align-items: center;}
.pagination a { padding: 3px;}
.pagination .on { color: #626f83; font-weight: 600;}
.pagination .nav_btns .next_btn img { transform: rotate(180deg);}
.pagination .page_input form { display: flex; align-items: center; gap: 10px;}
.pagination .page_input form input { text-align: center; padding: 5px; border: 1px solid #ddd;}
.pagination .page_input form button { padding: 7px 8px; background: var(--navy_dark); color: #fff;}

@media screen and (max-width: 767px) {
    .filter_container .filter ul li a,
    .filter_container .filter ul li label {font-size: 12px;}
    .rank_table thead tr th { font-size: 12px;}
    .rank_table tbody tr td { font-size: 12px;}
    .rank_table tbody tr td a {gap: 5px;}
    .rank_table tbody tr td a p { font-size: 12px;}
    .rank_table tbody tr .nick.sm { font-size: 10px;}
    .rank_table tbody tr .guild.sm { font-size: 8px;}
}