@charset "utf-8";
/*오른쪽 영역*/
.content_box {margin:10px 0 0 0;}
.box_tit {position:relative;line-height:30px;}
.box_tit .tit {margin:0 0 12px 0;font-size:16px;font-weight:700;}

.box_menu {position:absolute;right:0;top:0;}
.box_menu > a{font-size:14px;letter-spacing:-1px}
.box_menu > a:before {content:"";display:inline-block;width:1px;height:10px;margin:0 8px 0 3px;vertical-align:-1px;background:#d7d7d7}
.box_menu > a:first-child:before {display:none}

.popular_rank1 {}
.popular_rank1:hover {text-decoration:underline}
.popular_rank2 {}
.popular_rank2:hover {text-decoration:underline}
.popular_rank3 {}
.popular_rank3:hover {text-decoration:underline}
.popular_rank1.on,.popular_rank2.on,.popular_rank3.on{text-decoration:underline}

.rank_list {margin:0 0 20px 0;}
.rank_list li {position:relative;margin:0 0 5px 0;}
.rank_list li:last-child {margin:0;}
.rank_list a {display:block;padding:8px 10px;background:#f6f6f6;border-radius:var(--radius);}
.rank_list a:hover {text-decoration:none}
.rank_list a:after {display:table;clear:both;table-layout:fixed;content:""}
.rank_list a span {display:inline-block;vertical-align:top;}

.rank_num {width:22px;height:22px;margin:0 8px 0 0;line-height:22px;color:#fff;font-size:12px;text-align:center;font-weight:500;background:#444;border-radius:5px;}
.rank1.rank_num {background:#f00001;}
.rank2.rank_num {background:#f00001;}
.rank3.rank_num {background:#f00001;}

.rank_txt {width:150px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:22px;}
.rank_txt:hover {text-decoration:underline}
.rank_state {float:right;font-size:13px;color:#222;line-height:22px;}

.ico_ranking {display:block;position:absolute;right:30px;top:50%;width:16px;margin:-11px 0 0 0;text-align:center;}
.ico_ranking i {font-size:12px;line-height:22px;}
.ico_ranking i.xi-new {color:#ff7700;font-size:16px;}
.ico_ranking i.xi-caret-up {color:#1398d9;}
.ico_ranking i.xi-caret-down {color:#f75665;}
.ico_ranking i.xi-minus {color:#999;}

.box_bottom {display:none;width:100%;line-height:50px;text-align:right;font-size:12px;color:#888;line-height:50px;border-radius:var(--radius);}
.rank_box {display:none;position:relative;}
.rank_box .box_bottom {text-decoration:underline;cursor:pointer}

@media screen and (max-width:980px) {
.rank_box {display:block;}
}