body{background-color: #e5f5ff;}
.rank-content-page{margin-top: 16px;}
.rank-content-page .title-tab-wrap{display: flex;align-items: center;justify-content: space-between;margin-bottom: 18px;}
.rank-content-page .title-tab-wrap .titleIcon{width: 171px;height: 58px;flex: 0 0 171px;max-width: 171px;}
.rank-content-page .title-tab-wrap .titleIcon img{width: 171px;height: 58px;object-fit: cover;}
.rank-content-page .title-tab-wrap .rank-tabs{display: flex;align-items: center;column-gap: 10px;}
.rank-content-page .title-tab-wrap .rank-tabs a{width: 118px;height: 41px;text-align: center;line-height: 41px;padding: 0 16px;border-radius: 18px;background: #ffffffcc;font-size: 15px;color: #999999;position: relative;white-space: nowrap;}
.rank-content-page .title-tab-wrap .rank-tabs a.active{color: #ffffff;background: linear-gradient( 90deg, rgb(246,198,87) 0%, rgb(255,135,0) 100%);font-size: 16px;font-weight: bold;}
.rank-content-page .title-tab-wrap .rank-tabs a.active::after{content: "";position: absolute;left: 50%;transform: translateX(-50%);background-image: url(../images/rank/activeArrow.webp);width: 16px;height: 11px;background-repeat: no-repeat;background-size: cover;bottom: -14px;}

.rank-content-page .rank-listing{margin-top: 10px;display: flex;flex-direction: column;background-color: #ffffff;border-radius: 10px;}
.rank-content-page .rank-listing .rankWrap{display: flex;padding-bottom: 30px;padding-top: 28px;background-color: #ffffff;margin: 0 auto;transition: .3s ease;width: 100%;padding-left: 30px;padding-right: 30px;position: relative;}
.rank-content-page .rank-listing .rankWrap:first-child{padding-top: 38px;border-radius: 10px 10px 0 0;}
.rank-content-page .rank-listing .rankWrap:last-child{padding-bottom: 40px;border-radius: 0 0 10px 10px;}
.rank-content-page .rank-listing .rankWrap::after{content: "";position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: calc(100% - 60px);height: 1px;background-color: #02a1ff33;}
.rank-content-page .rank-listing .rankWrap:last-child::after{display: none;}
.rank-content-page .rank-listing .rankWrap .rankNo{width: 32px;flex: 0 0 32px;max-width: 32px;text-align: center;font-size: 26px;color: #62626266;font-weight: bold;font-style: italic;margin: 30px 28px 0 0;}
.rank-content-page .rank-listing .rankWrap:nth-child(1) .rankNo,
.rank-content-page .rank-listing .rankWrap:nth-child(2) .rankNo,
.rank-content-page .rank-listing .rankWrap:nth-child(3) .rankNo{background: linear-gradient(to bottom, #F6C656, #FF8906); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.rank-content-page .rank-listing .rankWrap .imgWrap{width: 104px;height: 104px;margin-right: 30px;}
.rank-content-page .rank-listing .rankWrap .imgWrap img{width: 104px;height: 104px;object-fit: cover;border-radius: 18px;}
.rank-content-page .rank-listing .rankWrap .detailWrap{display: flex;flex-direction: column;width: 602px;overflow: hidden;margin-right: 34px;flex: 0 0 602px;max-width: 602px;}
.rank-content-page .rank-listing .rankWrap .detailWrap h4{font-size: 20px;color: #333333;font-weight: 400;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-bottom: 12px;}
.rank-content-page .rank-listing .rankWrap .detailWrap .typeWrap{display: flex;align-items: center;column-gap: 12px;margin-bottom: 10px;}
.rank-content-page .rank-listing .rankWrap .detailWrap .typeWrap p{font-size: 12px;color: #BABABA;position: relative;}
.rank-content-page .rank-listing .rankWrap .detailWrap .typeWrap p::after{content: "";position: absolute;top: 50%;right: -6px;transform: translateY(-50%);width: 1px;height: 75%;background-color: #BABABA;}
.rank-content-page .rank-listing .rankWrap .detailWrap .typeWrap p:last-child::after{display: none;}
.rank-content-page .rank-listing .rankWrap .detailWrap p.content{font-size: 14px;color: #999999;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;margin-bottom: 18px;}
.rank-content-page .rank-listing .rankWrap .detailWrap .tag-list{display: flex;flex-wrap: wrap;gap: 8px;}
.rank-content-page .rank-listing .rankWrap .detailWrap .tag-list a{height: 30px;line-height: 30px;padding: 0 12px;background-color: #f6f6f6;font-size: 12px;color: #666666;border-radius: 10px;}
.rank-content-page .rank-listing .rankWrap .viewBtn{width: 72px;max-width: 72px;flex: 0 0 72px;height: 28px;line-height: 26px;text-align: center;border-radius: 14px;border: 1px solid #0872FF4D;font-size: 14px;color: #0975FF;margin: auto 30px auto 0;}
.rank-content-page .rank-listing .rankWrap .app-banner{width: 207px;height: 118px;flex: 0 0 207px;max-width: 207px;position: relative;margin: auto 0 auto auto;}
.rank-content-page .rank-listing .rankWrap .app-banner img{width: 207px;height: 118px;object-fit: cover;border-radius: 10px;}
.rank-content-page .rank-listing .rankWrap:hover{background-color: #f5fbff;}
.rank-content-page .rank-listing .rankWrap:hover .viewBtn{background: linear-gradient(90deg, rgb(2, 162, 255) 0%, rgb(9, 115, 255) 100%); color: #ffffff;}