@charset "utf-8";

ul.icon-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
ul.icon-list li > a {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  color: #888;
  font-weight: bold;
}
ul.icon-list li > a:hover {
  color: #888;
}
ul.icon-list li > a.active {
  color: #000;
}
ul.icon-list li i {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}
ul.icon-list li i img {
  height: 100%;
  object-fit: contain;
  vertical-align: top;
  filter: grayscale(1);
  opacity: .3;
}
ul.icon-list li > a.active img {
  filter: grayscale(0);
  opacity: 1;
}
ul.icon-list li span {
  font-size: 0.8rem;
}
@media screen and (max-width:992px) { 
  ul.icon-list {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 5px;
  }
}

.rk-rank.rank-1 {
  background: #ff6666;
}

.rk-rank.rank-2 {
  background: #ff9966;
}

.rk-rank.rank-3 {
  background: #66ccff;
}

.hit { width:100%;flex: 0 0 100%;display:flex;align-items: center; font-size: 13px; color: #888}
.hit img { max-width: 18px;margin-right: 5px;}
.rk-rank { position:absolute;top: 0;font-size: 10px; letter-spacing:0; border-radius: 4px; display: inline-block; width: 24px; height: 24px; background-color: #777; color: #FFFFFF; text-align: center; line-height: 24px; font-weight: bold; } 
.rk-board { width:100%;display:flex;align-items:center;  border:1px solid #e1e1e1; margin-top:5px; background:#f9f9f9; color:#000; padding:0 8px; border-radius:4px; box-shadow:2px 1px 2px rgb(0 0 0 / 7%); font-weight:500; font-size:13px; display:flex; align-items: center; justify-content: center;}
.rk-board i { display:inline-block;width:15px;height: 15px;margin-right: 5px;}
.rk-board i img {width:100%;height: 100%;object-fit:contain;vertical-align: top;}
.rk-point { width:100%; display:block; }
.rk-title { margin-left:8px; display: flex; align-items: center; gap: 10px;}
.rk-title > .img-render {
  width: auto;
  height: auto;
  max-width: min(100%, 220px);
  max-height: 80px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #dcdcdc;
  background: #fdfffe;
}
.rk-name {font-size: 20px;}
.rk-wrap { display:flex;width:100%; }