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, .breadcrumb p{color: #c4c4c4;}
.top-tab{height: 5rem;display: flex;align-items: center;justify-content: center;column-gap: 0.315rem;background: rgb(2, 1, 10,0.5);}
.top-tab a{font-size: 1.75rem;color: #cccccc;position: relative;padding: 0 1.25rem;line-height: 2rem;}
.top-tab a::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%) rotate(18deg); width: 1px; height: 1.75rem; background: #bababa4D;right: 0;}
.top-tab a.active{position: relative;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 2rem;}
.top-tab a.active::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 1.625rem;height: 3.25rem;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: 1.625rem;height: 3.25rem;background: unset;background-image: url(../images/rankWing.webp);background-position: center;background-repeat: no-repeat;background-size: contain;}

.top-listing-panel{margin-top: 1.25rem;background: #ffffff;padding: 1.25rem 0;display: flex;flex-direction: column;row-gap: 1.25rem;}
.top-listing-panel .top-types-panel{padding: 0 1rem;display: grid;grid-template-columns: repeat(4,1fr);column-gap: 0.625rem;row-gap: 1.25rem;}
.top-listing-panel .top-types-panel a{width: 100%;height: 3.625rem;text-align: center;line-height: 3.625rem;overflow: hidden;background: #f5f5f5;border-radius: 0.375rem;font-size: 1.25rem;color: #666666;padding: 0 0.625rem;}
.top-listing-panel .top-types-panel a.active{font-weight: bold;color: #ffffff;background: #3071f2;}

.top-listing-panel .top-listing{display: flex;flex-direction: column;}
.top-listing-panel .top-listing .appWrap{display: flex;align-items: center;column-gap: 1.5rem;padding: 1.25rem 1.25rem 1.25rem 4.25rem;position: relative;}
.top-listing-panel .top-listing .appWrap .imgWrap{width: 7.5rem;height: 7.5rem;overflow: hidden;flex-shrink: 0;}
.top-listing-panel .top-listing .appWrap .imgWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 1.625rem;overflow: hidden;}
.top-listing-panel .top-listing .appWrap .infoWrap{flex: 1;display: flex;flex-direction: column;row-gap: 0.5rem;overflow: hidden;}
.top-listing-panel .top-listing .appWrap .infoWrap .appName{font-size: 1.75rem;color: #02010a;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.top-listing-panel .top-listing .appWrap .infoWrap .detailWrap{display: flex;align-items: center;column-gap: 0.5rem;font-size: 1.375rem;color: #bababa;}
.top-listing-panel .top-listing .appWrap .infoWrap > span{font-size: 1.375rem;color: #bababa;}
.top-listing-panel .top-listing .appWrap .viewBtn{width: 7.75rem;height: 3.125rem;line-height: 3.25rem;text-align: center;border-radius: 0.625rem;font-size: 1.5rem;color: #ffffff;background: linear-gradient( 90deg, rgb(91,111,255) 0%, rgb(51,161,255) 100%);flex-shrink: 0;}
.top-listing-panel .top-listing .appWrap:nth-child(odd){background: #f5f6f8;}
.top-listing-panel .top-listing .appWrap .rankNo{position: absolute;top: 50%;left: 0.625rem;width: 2.25rem;text-align: center;transform: translateY(-50%);font-size: 1.875rem;font-weight: bold;color: #bababa;}
.top-listing-panel .top-listing .appWrap:nth-child(1) .rankNo,
.top-listing-panel .top-listing .appWrap:nth-child(2) .rankNo,
.top-listing-panel .top-listing .appWrap:nth-child(3) .rankNo{top: 14px;left: -2px;transform: unset;width: 3.5rem; height: 1.875rem; line-height: 1.875rem; padding: 0 0.75rem; font-size: 1.25rem; font-weight: bold; color: #ffffff; background-image: url(../images/rankNoBg.webp); background-position: center; background-repeat: no-repeat; background-size: contain; text-align: left;}
.load-more{margin: 1.5rem auto 2rem;position: relative;font-size: 1.625rem;color: #cccccc;cursor: pointer;display: flex;align-items: center;column-gap: 0.875rem;justify-content: center;}
.load-more i{width: 2.125rem;height: 2.125rem;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);
  }
}