@charset "utf-8";

body{
	background:rgba(255, 255, 255, 0.6);
    background-image: radial-gradient(circle at 8% 15%, rgba(195, 218, 242, 0.35) 0%, transparent 40%), radial-gradient(circle at 92% 85%, rgba(185, 212, 240, 0.35) 0%, transparent 45%), linear-gradient(150deg, #f9fcff 0%, #eef4fc 100%);
	color:#1b2e47;
}
.rank{
	background: #fff;
    backdrop-filter: blur(4px);
    border-radius:10px;
    /*box-shadow: 0 20px 40px -16px rgba(30, 60, 100, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.85);*/
    padding:20px;
}
.rank .r_head{
	display:flex;justify-content: space-between;
	align-items: center; 
	padding-bottom:14px;
	gap:15px;
}
.rank .r_head h2{
	font-size: 1.3rem;
	background:url('/Public/images/rank_ico.png') no-repeat left center / 28px 28px;padding-left:35px;
}
.rank .r_h_r ul{
	display:flex;font-size:16px;
	gap:8px;
	background:rgba(237, 243, 250, 0.6);
	padding:5px;
	border-radius:40px;
}
.rank .r_h_r li{
    border: none;
    outline: none;
    padding: 7px 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #5f7d9c;
    cursor: pointer;
    transition: all 0.22s ease;
    letter-spacing: 0.2px;
}

.rank .r_h_r li.active,.rank .r_h_r li:hover{
    background:#ffffff;
    color:#1b2e47;
    font-weight:700;
	border-radius:40px;
    box-shadow:0 4px 12px -4px rgba(30, 60, 100, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 1.5px rgba(200, 220, 245, 0.6);
	
}

/*item*/
.rank .r_tit{display:flex;justify-content:space-between;align-items:center;}
.rank .r_t1{background:url('/Public/images/rank.png') no-repeat left -1px / 20px 20px;padding-left:26px;font-weight:700;}
.rank .r_t2 a{color:#4c86e6 !important;}
.rank .r_tab ul{display:flex;background:#EFF6FF;color:#6f7a89;margin-top:15px;border-radius:5px;padding:4px;user-select:none;}
.rank .r_tab li{flex:1;text-align:center;align-items:center;height:35px;line-height:35px;cursor:pointer;}
.rank .r_tab li.cur{color:#4c86e6;background:#fff;border-radius:5px;font-weight:700;}


@keyframes fadeInUp {
    from {
        transform: translateX(20px);
    }
    to {
        transform: translateX(0);
    }
}
.rank .r_list{border-radius:5px;}
.rank .r_item{display:flex;align-items:center;padding:8px 5px;margin-bottom:3px;border-radius:5px;background:#f6f6f6;transition: all 0.2s ease;/*animation: fadeInUp 0.3s ease both;*/}
.rank a:last-child .r_item{margin-bottom:0px;}
.rank .r_item:hover{
    transform: translateX(3px);
	/*background:linear-gradient(to right, #fddd14 , #fff) !important;*/
	background:#eef3fa !important;
}

.rank .r_s1{
	padding:0px 4px;height:35px;line-height:35px;width:45px;border-radius:5px;color:#374151;text-align:center;margin-right:5px;font-size:16px;
}
.rank a:nth-child(1) .r_s1{color:#9f6f20;background:url('/Public/images/rank_1.png') no-repeat center center / 35px 35px;}
.rank a:nth-child(2) .r_s1{color:#4b5563;background:url('/Public/images/rank_2.png') no-repeat center center / 35px 35px;}
.rank a:nth-child(3) .r_s1{color:#925a2f;background:url('/Public/images/rank_3.png') no-repeat center center / 35px 35px;}

.rank .r_s2{margin-right:8px;}
.rank .r_s2 img{border-radius:5px;max-height:60px;}
.rank .r_s2 .r_img_pc{display:inline;}
.rank .r_s2 .r_img_m{display:none;}

.rank .r_sinfo{display:flex;flex-direction:column;}
.rank .r_sinfo_b{font-size:12px;color:#999999;gap:8px;display:none;}
.rank .r_sinfo_b li{position:relative;}
.rank .r_sinfo_b li:not(:last-child)::after{
	content: "";
	position: absolute;
	right: -5px;
	top: 50%;
	transform: translateY(calc(-50% + 1px));
	width:1px;
	height: 8px; /* ✅ 控制竖线高度，自由改 */
	background-color: #dcdfe6;
}
.rank .r_s3{flex:1;}
.rank .r_s4,.rank .r_s5,.rank .r_s6{
	margin:0px 10px 0px 10px;
    background-color:#d7e4f4 !important;
    padding: 0px 8px;
    border-radius: 5px;
    padding-top:5px;
	padding-bottom:5px;
}
.rank .r_s4{background-color:#c4d3ec !important;}
.rank .r_s5{background-color:#bde0ce !important;}
.rank .r_s6{background-color:#ecd9c0 !important;}
.rank .score{
	background:url(/Public/images/score.png) no-repeat 8px center / 10px 10px;
	padding-left:20px;
	color:#ff6022;
}
.rank .r_sinfo_t{color:#333;}
.rank .loader{width:50px;}

.jump_btn .jd_d{background-image:url('../images/jd_down.png');}
@media (max-width:1360px){
	.rank{padding:10px;}
	.rank .score{
		color:red;
		background-position:left center;
		padding-left:12px;
	}
	
	.rank .r_s4,.rank .r_s5,.rank .r_s6{
		display:none;
	}
	
	.rank .r_sinfo_b{display:flex;}
	
	.rank .r_s2 .r_img_pc{display:none;}
	.rank .r_s2 .r_img_m{display:inline;}
	
	.rank .r_head{
		/* 核心：纵向排列，两个元素各占一行 */
		flex-direction: column;
		align-items: flex-start;
		gap:12px;
	}
	
	.rank .r_h_r{
		width:100%;
	}
	
	.rank .r_h_r ul{
		overflow-x: auto;
		overflow-y: hidden;
		flex-wrap: nowrap !important;
		-webkit-overflow-scrolling: touch;
		border-radius:5px;
	}
	
	.rank .r_h_r li{
		flex: 0 0 auto;
		white-space:nowrap;
	}
	
	/* 滚动条美化 */
	.rank .r_h_r ul::-webkit-scrollbar {
		height: 3px;
	}
	.rank .r_h_r ul::-webkit-scrollbar-thumb {
		background: #c5d5e8;
		border-radius: 3px;
	}
	.rank .r_h_r ul::-webkit-scrollbar-track {
		background: transparent;
	}
	
	.rank .r_h_r li.active,.rank .r_h_r li:hover{
		border-radius:5px;
	}
	
	.rank .r_item{
		padding:5px;
	}
	
	.rank a:nth-child(1) .r_item{background: linear-gradient(to right, #ffe9b8, #fff);}
	.rank a:nth-child(2) .r_item{background: linear-gradient(to right, #c5cad3, #fff);}
	.rank a:nth-child(3) .r_item{background: linear-gradient(to right, #f3d9c5, #fff);}
}