#RoyalRanking {
    margin-bottom: 35px;
}

.box_content {
    width: min(1450px, 92%);
    margin: auto;
    border: 12.5px solid transparent;
    border-image: url("../../Res/background/border_a.png");
    border-image-slice: 30;
    border-image-repeat: round;
    box-sizing: border-box;
}

.TeamBox,
.List,
.Body,
.RankRows {
    width: 100%;
    height: 100%;
}

.TeamBox {
    display: flex;
    flex-flow: row;
}

.RankList {
    width: 100%;
    height: 100%;
    color: #372b00;
}

.flex,
.tc-rank,
.tc-pres,
.tc-honor,
.tc-memNum {
    display: flex;
    align-items: center;
    justify-content: center;
}

.RankList .Header {
    width: 100%;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-size: 19px;
    font-weight: bold;
    background-image: url("../../Res/border/border-h_.png");
    background-size: 100% 100%;
}

.RankList.RankPage .tc-rank {
    width: 8%;
}

.RankList.RankPage .tc-leader {
    width: 22%;
}

.RankList.RankPage .tc-team {
    width: 20%;
}

.RankList.RankPage .tc-pres,
.RankList.RankPage .tc-honor,
.RankList.RankPage .tc-memNum {
    width: 14%;
}

.RankList .tc-leader,
.RankList .tc-team {
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.RankList .tc-pres {
    width: 20%;
    height: 100%;
    text-align: center;
}

.RankList .tc-honor {
    width: 20%;
    height: 100%;
    text-align: center;
}

.RankList .tc-memNum {
    width: 10%;
    height: 100%;
    text-align: center;
}

.RankList .tr {
    width: 100%;
    height: 58px !important;
    line-height: 22px;
    display: flex;
    align-items: center;
    background-color: #fcf7e5;
    font-size: 20px;
}

.tr:nth-child(even) {
    background-color: #d2c498;
}

.tr div,
.th div {
    height: 100%;
    text-align: center;
}

.l-number {
    font-family: cursive;
    font-weight: bold;
}

.RankList.RankPage .tc-leader .image {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 5px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.RankList .tc-leader .image {
    width: 35%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.RankList .tc-leader .image .border {
    width: 100%;
    height: 100%;
    background-image: url("../../Res/border/RectBorder_a.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.RankList .tc-leader .name {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    line-height: normal;
    font-size: 22px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.RankList .team-slog {
    width: 52px;
    flex-shrink: 0;
}

.RankList .team-slog .slog {
    width: 100%;
    height: 100%;
    background-size: auto 90%;
    background-position: center;
    background-repeat: no-repeat;
}

.RankList .team-name {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    line-height: normal;
    font-size: 21px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ranking-title {
    margin: 50px 0;
    text-align: center;
}

.ranking-title .title {
    font-size: 58px;
    font-weight: bold;
    color: #6a3500;
    letter-spacing: 2px;
    text-shadow:
        0 2px 0 #fff6d2,
        0 4px 8px rgba(0, 0, 0, .25);
}

.ranking-title .subtitle {
    margin-top: 10px;
    font-size: 24px;
    color: #4e3310;
}

.ranking-server-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

.server-btn {
    min-width: 170px;
    height: 55px;
    border: 2px solid #b98d43;
    border-radius: 8px;
    cursor: pointer;
    color: #fff4d2;
    font-size: 18px;
    font-weight: bold;
    background: linear-gradient(#795020, #4d2f0d);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, .25),
        0 4px 10px rgba(0, 0, 0, .25);
    transition: .25s;
}

.server-btn:hover {
    transform: translateY(-3px);
    background: linear-gradient(#9c6c2f, #5f3811);
}

.server-btn.active {
    background: linear-gradient(#dfb545, #ad7718);
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 208, 85, .6);
}

.ranking-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 25px;
}

.rank-btn {
    width: 190px;
    height: 48px;
    border: 2px solid #a6782d;
    border-radius: 40px;
    cursor: pointer;
    font-size: 17px;
    font-weight: bold;
    color: #fff6db;
    background: linear-gradient(#69461f, #3e250d);
    transition: .25s;
}

.rank-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(#8a602a, #52300e);
}

.rank-btn.active {
    background: linear-gradient(#d6ab3b, #b67f1b);
    color: #fff;
    box-shadow: 0 0 18px rgba(255, 202, 61, .6);
}

.rank-panel {
    display: none;
    animation: fadeRank .35s;
}

.rank-panel.active {
    display: block;
}

@keyframes fadeRank {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tc-rank {
    flex: 0 0 8%;
}

.tc-leader {
    flex: 0 0 25%;
}

.tc-team {
    flex: 0 0 23%;
}

.tc-pres {
    flex: 0 0 18%;
}

.tc-honor {
    flex: 0 0 10%;
}

.tc-memNum {
    flex: 0 0 16%;
}