body{background:#f3f3f3}
.rank{width:1200px;text-align:left;font-size:16px;margin:15px auto;box-sizing:border-box}
.tab-box{margin-top:10px;font-size:12px;background:#fff;border:1px solid #ddd;padding:5px 20px;}
    .tab-box .tab{margin:15px 0;}
        .tab-box .tab span{padding:0 10px;display:inline-block;text-align:center;cursor:pointer;}
        .tab-box .tab a{padding:1px 5px;}
        .tab-box .tab .hover{background:#5cb85c;color:#fff;padding:1px 5px;}
    .tab-box .order a{width:120px;}

.tab-box .tab{display:flex;}
.tab-box .tab .t{width:36px;}
.tab-box .tab .l{flex:1;line-height:24px;}
.wlist{min-height:500px;}
.wlist li{display:flex;margin:10px 0;}
.wlist li .no{width:80px;height:80px;margin-right:10px;border:1px solid #ddd;background:#fff;text-align:center;font-size:26px;font-family:"Arial", "Helvetica", "sans-serif";}
    .wlist li .no span{width:40px;height:40px;line-height:40px;border-radius:20px;display:inline-block;margin-top:20px;}
    .wlist li .no .hot{background:#ff6666;color:#fff;}
.wlist li .box{padding:10px 0;text-align:left;background:#fff;padding:10px;border:1px solid #ddd;flex:1}
    .wlist li .dtop{line-height:24px;padding:5px 0;}
        .wlist .dtop img{ float:left;margin:3px 5px 0 0}
        .wlist .dtop a{font-size:14px; color:#204E89}
    .wlist li .dbody{font-size:12px;}
        .wlist .dbody p{color:#666;padding:3px 0 5px 0}
        .wlist .dbody span{width:120px;float:left;}
        .wlist .dbody .p1{width:160px;}
        .wlist .dbody .p2{width:160px;}

.load{text-align:center;margin-top:10px;}
.load .loading{
  border: 3px solid hsla(185, 100%, 62%, 0.2);
  border-top-color: #3cefff;
  border-radius: 50%;
  width: 2em;
  height: 2em;
  margin:0 auto;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}