body{background: #f5f6f8;}

.topBg{position: absolute;top: -20px;left: 0;width: 100%;height: 364px;object-fit: cover;object-position: center;z-index: -1;}
.breadcrumb a, .breadcrumb span{color: #c4c4c4;}
.top-tab{height: 60px;display: flex;align-items: center;justify-content: center;column-gap: 10px;background: rgb(2, 1, 10,0.5);}
.top-tab a{font-size: 18px;color: #cccccc;position: relative;padding: 0 30px;line-height: 24px;}
.top-tab a::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%) rotate(18deg); width: 2px; height: 20px; background: rgba(204, 204, 204, 0.2);right: 0;}
.top-tab a.active{position: relative;font-size: 22px;font-weight: bold;background: linear-gradient(90deg, #23F792, #CDFF74); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;width: fit-content;padding: 0 24px;}
.top-tab a.active::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 18px;height: 31px;background-image: url(../images/rankWing.webp);background-position: center;background-repeat: no-repeat;background-size: contain;}
.top-tab a.active::after{content: "";position: absolute;top: 50%;transform: translateY(-50%) scaleX(-1);right: 0;width: 18px;height: 31px;background: unset;background-image: url(../images/rankWing.webp);background-position: center;background-repeat: no-repeat;background-size: contain;}

.top-listing-panel{margin-top: 10px;background: #ffffff;padding: 30px 20px;display: flex;flex-direction: column;row-gap: 40px;}
.top-listing-panel .top-types-panel{padding: 0 15px;display: flex;flex-wrap: wrap;column-gap: 20px;row-gap: 20px;}
.top-listing-panel .top-types-panel a{height: 36px;line-height: 36px;text-align: center;width: fit-content;padding: 0 10px;border-radius: 6px;font-size: 14px;color: #666666;background: #f4f4f4;}
.top-listing-panel .top-types-panel a.active{background: #3071f2;color: #ffffff;}

.top-listing-panel .top_lr{display: grid;align-items: flex-start;column-gap: 30px;grid-template-columns: 825px 305px;}
.top-listing-panel .top_lr .top-listing{display: flex;flex-direction: column;row-gap: 40px;}
.top-listing-panel .top_lr .top-listing .topWrap{display: flex;flex-direction: column;}
.top-listing-panel .top_lr .top-listing .topWrap .top-info-wrap{display: flex;align-items: center;column-gap: 20px;}
.top-listing-panel .top_lr .top-listing .topWrap .top-info-wrap .imgWrap{flex-shrink: 0;width: 112px;height: 112px;overflow: hidden;}
.top-listing-panel .top_lr .top-listing .topWrap .top-info-wrap .imgWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 12px;}
.top-listing-panel .top_lr .top-listing .topWrap .top-info-wrap .infoWrap{flex: 1;display: flex;flex-direction: column;row-gap: 10px;overflow: hidden;}
.top-listing-panel .top_lr .top-listing .topWrap .top-info-wrap .infoWrap .nameWrap{display: flex;align-items: center;column-gap: 8px;overflow: hidden;}
.top-listing-panel .top_lr .top-listing .topWrap .top-info-wrap .infoWrap .nameWrap .rankNo{width: 46px; height: 24px; line-height: 24px; padding: 0 10px; font-size: 18px; color: #ffffff; background-image: url(../images/rankNoGrey.webp); background-position: center; background-repeat: no-repeat; background-size: contain;flex-shrink: 0;}
.top-listing-panel .top_lr .top-listing .topWrap:nth-child(1) .top-info-wrap .infoWrap .nameWrap .rankNo,
.top-listing-panel .top_lr .top-listing .topWrap:nth-child(2) .top-info-wrap .infoWrap .nameWrap .rankNo,
.top-listing-panel .top_lr .top-listing .topWrap:nth-child(3) .top-info-wrap .infoWrap .nameWrap .rankNo{background-image: url(../images/rankNoBg.webp);}
.top-listing-panel .top_lr .top-listing .topWrap .top-info-wrap .infoWrap .nameWrap .appName{font-size: 20px;font-weight: bold;color: #060606;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.top-listing-panel .top_lr .top-listing .topWrap .top-info-wrap .infoWrap .detailWrap{display: flex; align-items: center; column-gap: 6px; font-size: 14px; color: #bababa;}
.top-listing-panel .top_lr .top-listing .topWrap .top-info-wrap .infoWrap .desc{font-size: 14px;color: #666666;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.top-listing-panel .top_lr .top-listing .topWrap .top-info-wrap .infoWrap .tag-list{display: flex;align-items: center;column-gap: 10px;}
.top-listing-panel .top_lr .top-listing .topWrap .top-info-wrap .infoWrap .tag-list a{height: 24px;line-height: 22px;text-align: center;width: fit-content;padding: 0 12px;font-size: 14px;color: #999999;border: 1px solid #999999;border-radius: 4px;}
.top-listing-panel .top_lr .top-listing .topWrap .top-info-wrap .viewBtn{width: 74px; height: 32px; flex-shrink: 0; text-align: center; line-height: 32px; border-radius: 6px; color: #ffffff; background: linear-gradient(90deg, rgb(51, 161, 255) 0%, rgb(91, 111, 255) 100%); font-size: 14px;}
.top-listing-panel .top_lr .top-listing .topWrap .app-screenshot-slider{margin-top: 20px;position: relative;height: fit-content;overflow: hidden;}
.top-listing-panel .top_lr .top-listing .topWrap .app-screenshot-slider .swiper-slide{width: auto;height: 237px;}
.top-listing-panel .top_lr .top-listing .topWrap .app-screenshot-slider .swiper-slide img{max-height: 237px;width: auto;cursor: pointer;}
.top-listing-panel .top_lr .top-listing .topWrap:nth-child(n+10) .top-info-wrap .infoWrap .nameWrap .rankNo { padding: 0 5px; }

.load-more{margin: 20px auto 0;position: relative;font-size: 16px;color: #cccccc;cursor: pointer;display: flex;align-items: center;column-gap: 10px;justify-content: center;}
.load-more i{width: 20px;height: 20px;background-image: url(../images/loading-icon.webp);background-position: center;background-repeat: no-repeat;background-size: contain;animation: spin 2s linear infinite;}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.top-listing-panel .top_right {display: flex;flex-direction: column;row-gap: 20px;}
.top-listing-panel .top_right > div{padding: 15px 10px 20px;background: #f5f6f8;}