@charset "utf-8";

.bbs_common_wrap {
    background:var(--rank_color1);
	border-top:var(--rank_border1sizet) solid var(--rank_border1t);
	border-bottom:var(--rank_border1sizeb) solid var(--rank_border1b);
	border-left:var(--rank_border1sizel) solid var(--rank_border1l);
	border-right:var(--rank_border1sizer) solid var(--rank_border1r);
    padding:var(--rank_val1);
}

.rank_act_tit {
    width: 100%;
    height: auto;
    position: relative;
    background-color: var(--rank_color2);
	border-top:var(--rank_border2sizet) solid var(--rank_border2t);
	border-bottom:var(--rank_border2sizeb) solid var(--rank_border2b);
	border-left:var(--rank_border2sizel) solid var(--rank_border2l);
	border-right:var(--rank_border2sizer) solid var(--rank_border2r);
    margin-bottom: 10px;
}

.rank_act_tit .rank_titbox {
    width: 100%;
    height: auto;
    position: relative;
    padding: 15px 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;
}

.rank_act_tit .rank_titbox > h2 {
    font-size: 18px;
    font-weight: 500;
    color: var(--rank_color3);
}

.rank_list2 {
    width: 100%;
    height: auto;
    position: relative;
    background-color: var(--rank_color5);
	border-top:var(--rank_border3sizet) solid var(--rank_border3t);
	border-bottom:var(--rank_border3sizeb) solid var(--rank_border3b);
	border-left:var(--rank_border3sizel) solid var(--rank_border3l);
	border-right:var(--rank_border3sizer) solid var(--rank_border3r);
    padding: var(--rank_val2);
}

.rank_list2 .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:var(--rank_val3);
	border-top:var(--rank_border4sizet) solid var(--rank_border4t);
	border-bottom:var(--rank_border4sizeb) solid var(--rank_border4b);
	border-left:var(--rank_border4sizel) solid var(--rank_border4l);
	border-right:var(--rank_border4sizer) solid var(--rank_border4r);
}

.rank_list2 .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_list2 .list_item .user_info > p {
    width: 35px;
    height: 26px;
    position: relative;
    font-size: 14px;
    font-weight: 500;
    color: var(--rank_color7);
    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: 22px 22px;
    background-size: 22px;
}

.rank_list2 .list_item:nth-of-type(1) .user_info > p.medal {
    background-image: url(/images/medal_01.png);
    color: transparent;
}

.rank_list2 .list_item:nth-of-type(2) .user_info > p.medal {
    background-image: url(/images/medal_02.png);
    color: transparent;
}

.rank_list2 .list_item:nth-of-type(3) .user_info > p.medal {
    background-image: url(/images/medal_03.png);
    color: transparent;
}

.rank_list2 .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_list2 .list_item .user_info .user_name > span {
    width: 20px;
    height: 20px;
    position: relative;
}

.rank_list2 .list_item .user_info .user_name > span > img {
    width: 100%;
    height: 100%;
}

.rank_list2 .list_item .user_point {
    width: auto;
    height: auto;
    position: relative;
    font-size: 13px;
    font-weight: 400;
    color: var(--rank_color9);
}

.rank_list2 .list_item .user_info .user_name > p {
    font-size: 13px;
    font-weight: 500;
    color: var(--rank_color6);
}

.rank_list2 .list_item .user_point > span {
    color: var(--rank_color8);
}

.rank_subtit {
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 15px;
}

.rank_subtit > h2 {
    font-size: 17px;
    font-weight: 500;
    color: var(--rank_color4);
    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;
    gap: 10px;
}

.rank_subtit > h2 > span {
    width: 17px;
    height: 17px;
    position: relative;
    background-image: url(/images/rank_subicon.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
}