@charset "utf-8";

.hb_rank {
    width:100%;
    padding:0;
    color:#171A1F;
    font-family:'Pretendard',sans-serif;
    letter-spacing:-.02em;
}

.hb_rank_head {
    position:relative;
    padding:0 0 18px;
    border-bottom:2px solid #07345B;
}

.hb_rank_head:after {
    content:'';
    position:absolute;
    bottom:-2px;
    left:0;
    width:52px;
    height:2px;
    background:#D3AE52;
}

.hb_rank_head h2 {
    margin:0;
    padding:0;
    color:#07345B;
    font-size:22px;
    font-weight:700;
    line-height:1.35;
}

.hb_rank_list {
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:none;
}

.hb_rank_list li {
    margin:0;
    padding:0;
    border-bottom:1px solid #DEE3E8;
}

.hb_rank_list li a {
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    align-items:center;
    gap:12px;
    min-height:58px;
    padding:10px 2px;
    color:#3D444C;
    text-decoration:none;
}

.hb_rank_num {
    color:#1686C3;
    font-size:17px;
    font-weight:700;
    line-height:1;
}

.hb_rank_list strong {
    display:block;
    min-width:0;
    color:#30353A;
    font-size:15px;
    font-weight:500;
    line-height:1.5;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    transition:color .2s;
}

.hb_rank_list a:hover strong {
    color:#1686C3;
}

.hb_rank_empty {
    padding:35px 10px !important;
    color:#747C85;
    font-size:14px;
    text-align:center;
}

@media (max-width:969px) {
    .hb_rank_head h2 {font-size:20px}
    .hb_rank_list li a {min-height:54px}
    .hb_rank_list strong {
        display:-webkit-box;
        white-space:normal;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
    }
}

@media (max-width:520px) {
    .hb_rank_head {padding-bottom:15px}
    .hb_rank_head h2 {font-size:19px}
    .hb_rank_list li a {grid-template-columns:34px minmax(0,1fr);gap:8px;padding:9px 0}
    .hb_rank_num {font-size:16px}
    .hb_rank_list strong {font-size:14px}
}