body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;margin:0;color:#333;background:#f5f5f5;line-height:1.6}
a{color:#333;text-decoration:none}
.top{background:#242424;color:#ccc}
.top-inner{width:980px;margin:0 auto;padding:0 20px;box-sizing:border-box;display:flex;align-items:center;gap:22px;height:70px}
.logo{font-weight:900;font-size:22px;color:#fff;white-space:nowrap}.logo span{color:#c20c0c;background:#fff;border-radius:50%;padding:2px 8px;margin-right:6px}
.top nav{display:flex;gap:16px;flex-wrap:wrap}
.top nav a{color:#ccc;font-size:15px}.top nav a.on{color:#fff;background:#000;padding:6px 12px;border-radius:20px}
.search{margin-left:auto;color:#333;background:#fff;border-radius:20px;padding:6px 14px;font-size:13px;white-space:nowrap}
.sub{background:#c20c0c;color:#fff}
.sub-inner{width:980px;margin:0 auto;padding:0 20px;box-sizing:border-box;display:flex;gap:18px;height:35px;align-items:center;font-size:12px}
.sub a{color:#fff}.sub a.on{background:#8f0a0a;padding:3px 10px;border-radius:12px}
.hero-wrap{background:#333}
.hero{width:980px;margin:0 auto;display:flex;height:285px}
.hero-main{width:730px;position:relative;overflow:hidden}
.hero-main img{width:730px;height:285px;object-fit:cover;display:block}
.hero-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:23px}
.hero-dots span{width:6px;height:6px;border-radius:50%;background:#fff;display:block}.hero-dots span.on{background:#c20c0c}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:32px;padding:0 10px}
.dl{width:250px;background:#242424;color:#ccc;padding:20px;box-sizing:border-box;text-align:center}
.dl b{color:#fff;display:block;margin-bottom:14px}
.dl .btn{display:block;background:#888;color:#fff;border-radius:20px;padding:12px 0;margin:0 auto;width:220px}
.dl p{font-size:12px;color:#999}
main{width:980px;margin:0 auto;background:#fff;display:flex}
.left{width:729px;padding:20px;box-sizing:border-box}
.right{width:250px;padding:20px 10px;box-sizing:border-box}
.sec{margin-bottom:28px}
.sec-head{display:flex;align-items:center;gap:10px;border-bottom:2px solid #c10d0c;padding-bottom:8px;flex-wrap:wrap}
.ring{width:12px;height:12px;border:2px solid #c20c0c;border-radius:50%;background:#fff;flex:none}
.sec-head h2{margin:0;font-size:20px}
.tags{font-size:12px;color:#888}.tags span{padding:0 8px;border-left:1px solid #ddd}.tags span:first-child{border-left:none}
.more{margin-left:auto;font-size:12px;color:#888}
.grid{display:grid;grid-template-columns:repeat(4,140px);gap:20px 42px;margin-top:16px;justify-content:start}
.card img{width:140px;height:140px;object-fit:cover;display:block;border-radius:4px}
.card .cap{margin-top:-27px;height:27px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:12px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;box-sizing:border-box;position:relative}
.card h3{font-size:12px;margin:6px 0;line-height:1.4}
.card p{color:#888;font-size:12px;margin:0}
.album-box{border:1px solid #d3d3d3;width:680px;max-width:100%;padding:16px;box-sizing:border-box;display:grid;grid-template-columns:repeat(5,100px);gap:20px 29px;margin-top:16px;position:relative}
.album{position:relative}.album .disc{position:absolute;left:18px;top:0;width:100px;height:100px;background:#111;border-radius:50%;z-index:0}
.album img{width:100px;height:100px;object-fit:cover;position:relative;z-index:1;display:block}
.album h4{font-size:14px;margin:6px 0 0}.album p{font-size:12px;color:#888;margin:0}
.rank{display:grid;grid-template-columns:repeat(3,229px);border:1px solid #ddd;margin-top:16px}
.rank-box{padding:12px;border-right:1px solid #ddd;box-sizing:border-box}.rank-box:last-child{border-right:none}
.rank-head{display:flex;gap:10px;align-items:center}
.rank-head img{width:80px;height:80px;object-fit:cover}
.rank-head b{font-size:14px}
.rank-box ol{margin:12px 0 0;padding:0;list-style:none}
.rank-box li{height:32px;line-height:32px;font-size:12px;display:flex;gap:8px}
.rank-box li:nth-child(odd){background:#f5f5f5}
.rank-box li .n{width:20px;text-align:center;font-size:16px;color:#888}.rank-box li:nth-child(-n+3) .n{color:#c20c0c}
.rank-box .all{text-align:center;font-size:12px;margin-top:8px}
.side-box{border:1px solid #eee;border-radius:6px;padding:12px;margin-bottom:16px}
.side-box h3{font-size:14px;margin:0 0 8px}
.side-box p{font-size:12px;color:#888;margin:4px 0}
.songlist{width:100%;border-collapse:collapse;margin-top:12px}
.songlist th,.songlist td{border-bottom:1px solid #eee;padding:0 8px;height:40px;text-align:left;font-size:12px}
.songlist tr:nth-child(even) td{background:#f5f5f5}
.badge{background:#c20c0c;color:#fff;font-size:12px;padding:2px 8px;border-radius:3px}
.btn-blue{background:#2a7bd4;color:#fff;border:none;padding:8px 18px;border-radius:4px}
.btn-white{background:#fff;border:1px solid #ccc;padding:7px 12px;border-radius:4px}
.tagpill{border:1px solid #ddd;border-radius:12px;padding:2px 10px;font-size:12px;margin-right:6px}
.cover150{width:150px;height:150px;object-fit:cover;float:left;margin-right:20px}
.ranknav{width:240px;padding:20px;box-sizing:border-box;border-right:1px solid #eee}
.rankmain{width:740px;padding:20px;box-sizing:border-box}
.playbar{position:fixed;bottom:0;left:0;right:0;background:#2b2b2b;color:#fff;height:53px;display:flex;gap:12px;align-items:center;padding:0 20px;font-size:13px;z-index:20;border-top:1px solid #555}
.playbar .bar{width:430px;height:4px;background:#555;border-radius:2px;flex:none}
.playbar img{width:35px;height:35px;object-fit:cover}
footer{width:980px;margin:0 auto;padding:24px 20px 80px;background:#f2f2f2;border-top:1px solid #d3d3d3;color:#999;font-size:12px;text-align:center;box-sizing:border-box}
footer a{color:#999;margin:0 8px}
@media(max-width:820px){main,.top-inner,.sub-inner,.hero{width:100%;flex-wrap:wrap}.hero{height:auto}.hero-main,.hero-main img{width:100%}.left,.right,.ranknav,.rankmain{width:100%}.grid{grid-template-columns:repeat(2,140px)}.rank{grid-template-columns:1fr}.album-box{grid-template-columns:repeat(2,100px)}.playbar .bar{width:120px}}