/* RANK ACT */
.rank_act {
    width: 100%;
    height: auto;
    position: relative;
    padding: 15px;
}

.rank_act:last-of-type {
    margin-bottom: 0;
}

.rank_act .rank_act_tit {
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 20px;
}

.rank_act .rank_act_tit > span.rank_icon {
    display: block;
    width: 61px;
    height: 21px;
    position: relative;
    background-image: url(../../img/rank_icon.webp);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    margin: 0 auto;
    margin-bottom: 6px;
}

.rank_act .rank_act_tit .rank_titbox {
    width: 100%;
    height: auto;
    position: relative;
    padding: 10px 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #68f3af;
    border-radius: 5rem;
    gap: 10px;
}

.rank_act .rank_act_tit .rank_titbox > h2 {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -1px;
    color: #000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 1;
    gap: 10px;
}

.rank_act .rank_act_tit .rank_titbox > h2 > span {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 900;
    font-style: italic;
}

.rank_act .rank_act_tit .rank_titbox > span {
    width: 21px;
    height: 35px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
}

.rank_act .rank_act_list {
    width: 100%;
    height: auto;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px;
}

.rank_act .rank_act_list .rank_item {
    width: 100%;
    height: auto;
    position: relative;
}

.rank_act .rank_act_list .rank_item .rank_subtit {
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 10px;
}

.rank_act .rank_act_list .rank_item .rank_subtit > h2 {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: normal;
    gap: 2px;
}

.rank_act .rank_act_list .rank_item .rank_subtit > h2 > span.ft_w {
    font-weight: 700;
    color: #68f3af;
}

.rank_act .rank_act_list .rank_item .rank_subtit > h2 > span.rank_icon {
    width: 17px;
    height: 16px;
    position: relative;
    background-image: url(../../img/rank_sub_icon.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    top: -1px;
}

.rank_act .rank_act_list .rank_item .rank_list {
    width: 100%;
    height: auto;
    position: relative;
    background-color: #000;
    border-radius: 10px;
    padding: 0 10px;
}

.rank_act .rank_act_list .rank_item .rank_list .list_item {
    width: 100%;
    height: auto;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 8px 0;
}

.rank_act .rank_act_list .rank_item .rank_list .list_item:last-of-type {
    margin-bottom: 0;
}

.rank_act .rank_act_list .rank_item .rank_list .list_item .user_info {
    width: auto;
    height: auto;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
}

.rank_act .rank_act_list .rank_item .rank_list .list_item .user_info > p {
    width: 35px;
    height: 28px;
    position: relative;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-position: center;
    -webkit-background-size: contain;
    background-repeat: no-repeat;
    -webkit-background-size: 24px 24px;
    background-size: 24px;
}

/* .rank_act .rank_act_list .rank_item .rank_list .list_item:nth-of-type(1) .user_info > p.medal {
    background-image: url(/assets/Mobile/img/medal_01.png);
    color: transparent;
}

.rank_act .rank_act_list .rank_item .rank_list .list_item:nth-of-type(2) .user_info > p.medal {
    background-image: url(/assets/Mobile/img/medal_02.png);
    color: transparent;
}

.rank_act .rank_act_list .rank_item .rank_list .list_item:nth-of-type(3) .user_info > p.medal {
    background-image: url(/assets/Mobile/img/medal_03.png);
    color: transparent;
} */

.rank_act .rank_act_list .rank_item .rank_list .list_item .user_info .user_name {
    width: auto;
    height: auto;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
}

.rank_act .rank_act_list .rank_item .rank_list .list_item .user_info .user_name > span {
    width: 20px;
    height: 20px;
    position: relative;
}

.rank_act .rank_act_list .rank_item .rank_list .list_item .user_info .user_name > span > img {
    width: 100%;
    height: 100%;
}

.rank_act .rank_act_list .rank_item .rank_list .list_item .user_info .user_name > p {
    font-size: 13px;
    font-weight: 500;
    color: #9ba28c;
}

.rank_act .rank_act_list .rank_item .rank_list .list_item .user_point {
    width: auto;
    height: auto;
    position: relative;
    font-size: 13px;
    font-weight: 400;
    color: #68f3af;
}

.rank_act .rank_act_list .rank_item .rank_list .list_item .user_point > span {
    color: #68f3af;
    font-style: italic;
}

/* RANK ACT END */