.rank-content-page .rank-tabs{margin-top: 22px;display: flex;align-items: center;justify-content: center;column-gap: 180px;}
.rank-content-page .rank-tabs li, .rank-content-page h1{font-size: 24px;color: #060D1F;position: relative;z-index: 1;cursor: pointer;}
.rank-content-page .rank-tabs li.active, .rank-content-page h1{font-weight: bold;}
.rank-content-page .rank-tabs li.active::after, .rank-content-page h1::after{content: "";position: absolute;bottom: 1px;left: 0;width: 140px;height: 10px;border-radius: 5px;background: linear-gradient( 90deg, rgb(84,197,255) 0%, rgba(84,197,255,0) 100%);z-index: -1;}
.rank-content-page .top-content-wrap{margin-top: 22px;}
.rank-content-page h1{cursor: unset;}
.rank-content-page .tab-content, .rank-content-page .rank-list-wrap{position: relative;margin-top: 42px;display: none;}
.rank-content-page .tab-content.active, .rank-content-page .rank-list-wrap{display: block;}
.rank-content-page .rank-listing{display: flex;align-items: flex-start;column-gap: 56px;}
.rank-content-page .rank-listing .rank-column{display: flex;flex-direction: column;row-gap: 18px;}
.rank-content-page .arrowTop{width: 100%;height: 15px;background-image: url(../images/top/rank-line.webp);background-position: right;background-repeat: no-repeat;background-size: contain;position: absolute;top: 0;right: 0;}
.rank-content-page .arrowBottom{width: 100%;height: 15px;background-image: url(../images/top/rank-line.webp);background-position: left;background-repeat: no-repeat;background-size: contain;position: absolute;bottom: 0;left: 0;}
.rank-content-page .rank-listing .rankWrap{display: flex;align-items: center;column-gap: 24px;padding-bottom: 18px;position: relative;height: 120px;width: 572px;max-width: 572px;}
.rank-content-page .rank-listing .rankWrap::after{content: "";position: absolute;bottom: 0;right: 0;width: calc(100% - 124px);height: 1px;background-color: #EEEEEE;}
.rank-content-page .rank-listing .rankWrap .imgWrap{width: 100px;flex: 0 0 100px;max-width: 100px;height: 100px;border-radius: 25px;}
.rank-content-page .rank-listing .rankWrap .imgWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 25px;transition: transform .3s ease;}
.rank-content-page .rank-listing .rankWrap .detailWrap{display: flex;flex: 1;flex-shrink: 0;flex-direction: column;row-gap: 10px;overflow: hidden;}
.rank-content-page .rank-listing .rankWrap .detailWrap .nameWrap{display: flex;align-items: center;column-gap: 6px;overflow: hidden;}
.rank-content-page .rank-listing .rankWrap .detailWrap .nameWrap .rankNo{font-size: 20px;font-weight: bold;color: #54C5FF;}
.rank-content-page .rank-listing .rankWrap .detailWrap .nameWrap .appName{flex: 1;flex-shrink: 0;font-size: 18px;color: #060D1F;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.rank-content-page .rank-listing .rank-column.left .rankWrap:nth-child(1) .detailWrap .nameWrap .rankNo{color: #FA4726;}
.rank-content-page .rank-listing .rank-column.left .rankWrap:nth-child(2) .detailWrap .nameWrap .rankNo{color: #FA4726;}
.rank-content-page .rank-listing .rank-column.left .rankWrap:nth-child(3) .detailWrap .nameWrap .rankNo{color: #FA4726;}
.rank-content-page .rank-listing .rank-column.left .rankWrap:nth-child(4) .detailWrap .nameWrap .rankNo{color: #FA4726;}
.rank-content-page .rank-listing .rank-column.left .rankWrap:nth-child(5) .detailWrap .nameWrap .rankNo{color: #FA4726;}
.rank-content-page .rank-listing .rankWrap .detailWrap .infoWrap{display: flex;align-items: center;column-gap: 5px;}
.rank-content-page .rank-listing .rankWrap .detailWrap .infoWrap a, .rank-content-page .rank-listing .rankWrap .detailWrap .infoWrap p{font-size: 14px;color: #999999;line-height: 20px;}
.rank-content-page .rank-listing .rankWrap .detailWrap .infoWrap i{width: 3px;height: 3px;background-color: #999999;border-radius: 50%;}
.rank-content-page .rank-listing .rankWrap .detailWrap .appContent{font-size: 14px;color: #999999;line-height: 20px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.rank-content-page .rank-listing .rankWrap .viewBtn{width: 58px;flex: 0 0 58px;max-width: 58px;height: 32px;line-height: 32px;text-align: center;border-radius: 10px;background-color: #54C5FF;font-size: 14px;font-weight: bold;color: #ffffff;}
.rank-content-page .rank-listing .rankWrap:hover .imgWrap img{transform: scale(1.1);}
.rank-content-page .rank-listing .rankWrap:hover .detailWrap .nameWrap .appName{color: #54C5FF;font-weight: bold;}
.rank-content-page .rank-listing .rank-column.left{margin-bottom: 50px;}
.rank-content-page .rank-listing .rank-column.right{margin-top: 50px;}

.rank-content-page .rank-type-panel{margin-top: 34px;display: flex;column-gap: 25px;align-items: flex-start;}
.rank-content-page .rank-type-panel .rank-column{width: 281px;flex: 0 0 281px;max-width: 281px;}
.rank-content-page .rank-type-panel .rank-column .titleWrap h2{padding-left: 32px;position: relative;}
.rank-content-page .rank-type-panel .rank-column .titleWrap h2::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 24px;height: 24px;}
.rank-content-page .rank-type-panel .rank-column.gameRank .titleWrap h2::before{background-image: url(../images/top/gameRankIcon.webp);background-position: center;background-repeat: no-repeat;background-size: contain;}
.rank-content-page .rank-type-panel .rank-column.hotRank .titleWrap h2::before{background-image: url(../images/top/hotRankIcon.webp);background-position: center;background-repeat: no-repeat;background-size: contain;}
.rank-content-page .rank-type-panel .rank-column.downloadRank .titleWrap h2::before{background-image: url(../images/top/downloadRankIcon.webp);background-position: center;background-repeat: no-repeat;background-size: contain;}
.rank-content-page .rank-type-panel .rank-column.appRank .titleWrap h2::before{background-image: url(../images/top/appRankIcon.webp);background-position: center;background-repeat: no-repeat;background-size: contain;}
.rank-content-page .rank-type-panel .rank-column .app-listing{display: flex;flex-direction: column;row-gap: 25px;margin-top: 16px;}
.rank-content-page .rank-type-panel .rank-column .app-listing .appWrap{height: 88px;display: flex;align-items: center;column-gap: 14px;}
.rank-content-page .rank-type-panel .rank-column .app-listing .appWrap .imgWrap{width: 88px;height: 88px;flex: 0 0 88px;max-width: 88px;border-radius: 25px;}
.rank-content-page .rank-type-panel .rank-column .app-listing .appWrap .imgWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 25px;transition: transform .3s ease;}
.rank-content-page .rank-type-panel .rank-column .app-listing .appWrap .detailWrap{display: flex;flex-direction: column;row-gap: 10px;flex: 1;flex-shrink: 0;overflow: hidden;}
.rank-content-page .rank-type-panel .rank-column .app-listing .appWrap .detailWrap .nameWrap{display: flex;align-items: center;column-gap: 4px;}
.rank-content-page .rank-type-panel .rank-column .app-listing .appWrap .detailWrap .nameWrap .rankNo{font-size: 16px;color: #FA4726;line-height: 24px;}
.rank-content-page .rank-type-panel .rank-column .app-listing .appWrap .detailWrap .appName{font-size: 16px;line-height: 24px;color: #091F17;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;flex: 1;flex-shrink: 0;}
.rank-content-page .rank-type-panel .rank-column .app-listing .appWrap .detailWrap > p, .rank-content-page .rank-type-panel .rank-column .app-listing .appWrap .detailWrap > a{font-size: 14px;color: #999999;}
.rank-content-page .rank-type-panel .rank-column .app-listing .appWrap:hover .detailWrap .appName{color: #54C5FF;font-weight: bold;}
.rank-content-page .rank-type-panel .rank-column .app-listing .appWrap:hover .imgWrap img{transform: scale(1.1);}


.rank-content-page .topic-panel{margin-top: 34px;}
.rank-content-page .topic-panel .topic-listing {margin-top: 24px;display: flex;flex-direction: column;row-gap: 26px;overflow: hidden;}
.rank-content-page .topic-panel .topic-listing .topic-list-row{overflow-x: scroll;display: flex;align-items: center;column-gap: 20px;flex-wrap: nowrap;width: max-content; animation: marquee 20s linear infinite;}
.rank-content-page .topic-panel .topic-listing .topic-list-row:nth-child(2){animation: marquee 18s linear infinite;}
.rank-content-page .topic-panel .topic-listing .topic-list-row:nth-child(3){animation: marquee 16s linear infinite;}
.rank-content-page .topic-panel .topic-listing .topic-list-row::-webkit-scrollbar{height: 0;}
.rank-content-page .topic-panel .topic-listing .topic-list-row .topicWrap{width: fit-content;height: 40px;display: flex;align-items: center;column-gap: 12px;border-radius: 20px;background-color: #F4F6F8;padding-right: 14px;}
.rank-content-page .topic-panel .topic-listing .topic-list-row .topicWrap .imgWrap{width: 40px;flex: 0 0 40px;max-width: 40px;height: 40px;border-radius: 50%;}
.rank-content-page .topic-panel .topic-listing .topic-list-row .topicWrap .imgWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 50%;}
.rank-content-page .topic-panel .topic-listing .topic-list-row .topicWrap .topicName{font-size: 14px;color: #060D1F;line-height: 1.25;}
.rank-content-page .topic-panel .topic-listing .topic-list-row .topicWrap:hover{background-color: #54C5FF;}
.rank-content-page .topic-panel .topic-listing .topic-list-row .topicWrap:hover .topicName{color: #FFFFFF;}
.rank-content-page .topic-panel .topic-listing .topic-list-row:hover{ animation-play-state: paused; }