.hero-slider-panel{position: relative;overflow: hidden;}
.hero-slider-panel .swiper-slide{width: 100%;height: 22.375rem;position: relative;z-index: 1;}
.hero-slider-panel .swiper-slide .imgWrap{width: 100%;height: 100%;position: absolute;z-index: -1;top: 0;left: 0;}
.hero-slider-panel .swiper-slide .imgWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
.hero-slider-panel .swiper-slide::after{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgb(0 0 0) 0%, rgb(0 0 0 / 89%) 15%, rgb(0 0 0 / 73%) 35%, rgb(0 0 0 / 44%) 55%, rgba(0, 0, 0, 0) 75%);}
.hero-slider-panel .swiper-slide .sliderContent{display: flex; flex-direction: column; position: absolute; top: 50%; transform: translateY(-50%); padding: 0 1.875rem;width: 100%;z-index: 1;}
.hero-slider-panel .swiper-slide .sliderContent .tag{padding: 0.375rem 1rem;position: relative;z-index: 1;font-size: 1.125rem;color: #16bff6;border-radius: 3px;background: #112c39;width: fit-content;margin-bottom: 0.75rem;}
.hero-slider-panel .swiper-slide .sliderContent .appName{font-size: 2.125rem;font-weight: bold;color: #ffffff;margin-bottom: 0.625rem;}
.hero-slider-panel .swiper-slide .sliderContent .desc{font-size: 1.25rem;color: #ffffff80;margin-bottom: 1.25rem;}
.hero-slider-panel .swiper-slide .sliderContent .viewBtn{width: 9.625rem;height: 3.125rem;text-align: center;line-height: 3.125rem;border-radius: 6px;background: linear-gradient( 90deg, rgb(51,161,255) 0%, rgb(91,111,255) 100%);font-size: 1.5rem;color: #ffffff;}
.hero-slider-panel .hero-banner-swiper-pagination{position: absolute;bottom: 0.625rem;left: 50%!important;transform: translateX(-50%);display: flex;align-items: center;column-gap: 0.25rem;justify-content: center;z-index: 2;}
.hero-slider-panel .hero-banner-swiper-pagination .swiper-pagination-bullet{margin: 0!important;width: 2.25rem;height: 0.25rem;background: #ffffffBF;opacity: 1;border-radius: 0;}
.hero-slider-panel .hero-banner-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background: linear-gradient( 90deg, rgb(51,161,255) 0%, rgb(91,111,255) 100%);}

.hot-new-panel{margin-top: 0.625rem;}
.hot-new-panel .hot-new-swiper{padding-top: 0.625rem;position: relative;}
.hot-new-panel .hot-new-swiper::after{content: ""; position: absolute; top: 0; right: 0; width: 1.5rem; height: 100%; pointer-events: none; background: linear-gradient( to right, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.45) 50%, rgba(255,255,255, 0.9) 100% );z-index: 1;}
.hot-new-panel .swiper-slide{background: #ffffff;border: 1px solid rgb(203, 210, 217);border-radius: 0.375rem;padding: 0.75rem 1.5rem;text-align: center;font-size: 1.5rem;color: #666666;position: relative;width: auto;flex-shrink: 0;}
.hot-new-panel .swiper-slide.hot::after{content: "H";position: absolute;top: -4px;left: 0;font-size: 0.75rem;font-weight: bold;color: #ffffff;border-radius: 4px;background: #f91d60;padding: 0.25rem;transform: skew(-4deg);}
.hot-new-panel .swiper-slide.new::after{content: "N";position: absolute;top: -4px;left: 0;font-size: 0.75rem;font-weight: bold;color: #ffffff;border-radius: 4px;background: #09c8b8;padding: 0.25rem;transform: skew(-4deg);}

.hot-pick-panel{margin-top: 2.5rem;}

.latest-news-panel{margin-top: 2.5rem;}
.latest-news-panel .news-listing{display: flex;flex-wrap: nowrap;align-items: center;column-gap: 1.25rem;overflow-x: scroll;margin-top: 1.5rem;}
.latest-news-panel .news-listing::-webkit-scrollbar{height: 0;}
.latest-news-panel .news-listing .newsWrap{flex-shrink: 0;width: 18.75rem;display: flex;flex-direction: column;}
.latest-news-panel .news-listing .newsWrap .bannerWrap{position: relative;width: 100%;height: 11.125rem;overflow: hidden;margin-bottom: 0.625rem;}
.latest-news-panel .news-listing .newsWrap .bannerWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
.latest-news-panel .news-listing .newsWrap .bannerWrap .tag{position: absolute;left: 0.625rem;bottom: 0.625rem;padding: 0.5rem;border: 1px solid #16bff6;border-radius: 0.5rem;font-size: 1rem;color: #16bff6;z-index: 2;}
.latest-news-panel .news-listing .newsWrap .news-title{font-size: 1.5rem;color: #02010a;line-height: 2rem;height: 4rem;overflow: hidden;}
.latest-news-panel .news-listing .newsWrap .bottomWrap{display: flex;align-items: center;column-gap: 0.375rem;font-size: 1.25rem;color: #bababa;margin-top: 0.5rem;}
.latest-news-panel .news-listing .newsWrap .bannerWrap::after{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: linear-gradient( 0deg, rgb(3,0,0) 0%, rgba(0,0,0,0) 100%);}

.new-app-panel{margin-top: 2.5rem;}

.app-listing-panel{margin-top: 2.5rem;}

.topic-panel{margin-top: 2.5rem;}
.topic-panel .topic-slide-listing{margin-top: 1.5rem;display: flex;align-items: center;column-gap: 1.25rem;overflow-x: scroll;flex-wrap: nowrap;}
.topic-panel .topic-slide-listing::-webkit-scrollbar{height: 0;}
.topic-panel .topic-slide-listing .topicWrap{width: 28.125rem;display: flex;flex-direction: column;background: #f5f6f8;flex-shrink: 0;}
.topic-panel .topic-slide-listing .topicWrap .bannerWrap{width: 100%;height: 13.75rem;overflow: hidden;}
.topic-panel .topic-slide-listing .topicWrap .bannerWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;overflow: hidden;}
.topic-panel .topic-slide-listing .topicWrap .infoWrap{padding: 1rem 1.25rem 1.25rem;display: flex;flex-direction: column;overflow: hidden;}
.topic-panel .topic-slide-listing .topicWrap .infoWrap .topicName{font-size: 1.5rem;font-weight: bold;color: #02010a;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-panel .topic-slide-listing .topicWrap .infoWrap .detailWrap{display: flex;align-items: center;column-gap: 0.5rem;font-size: 1.25rem;color: #bababa;}

.rank-panel {margin-top: 2.5rem;}
.rank-panel .tab-contents{margin-top: 1.5rem;}
.rank-panel .rankWrap{display: flex; flex-direction: column;row-gap: 2.5rem;}
.rank-panel .rankWrap .topWrap{display: flex;align-items: center;padding: 1.5rem 0;position: relative;z-index: 1;column-gap: 1.25rem;}
.rank-panel .rankWrap .topWrap::before{content: "";position: absolute;top: 0;left: -1.5rem;width: calc(100% + 3rem);height: 100%;background: #e8f4ff;z-index: -1;}
.rank-panel .rankWrap .topWrap::after{content: "";position: absolute;top: 0;left: 0;width: 19.375rem;height: 100%;background-position: center;background-repeat: no-repeat;background-size: cover;background-image: url(../images/gameRankBg.webp);clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);z-index: -1;}
.rank-panel.app .rankWrap .topWrap::after{background-image: url(../images/appRankBg.webp);}
.rank-panel .rankWrap .topWrap .rankLeft{display: flex;flex-direction: column;row-gap: 1.25rem;align-items: center;padding-left: 1rem;}
.rank-panel .rankWrap .topWrap .rankLeft .rankTitle{position: relative;padding: 0 1.625rem;font-size: 1.75rem;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;}
.rank-panel .rankWrap .topWrap .rankLeft .rankTitle::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;}
.rank-panel .rankWrap .topWrap .rankLeft .rankTitle::after{content: "";position: absolute;top: 50%;transform: translateY(-50%) scaleX(-1);right: 0;width: 1.625rem;height: 3.25rem;background-image: url(../images/rankWing.webp);background-position: center;background-repeat: no-repeat;background-size: contain;}
.rank-panel .rankWrap .topWrap .rankLeft .viewAll{width: 7.75rem;height: 2.625rem;line-height: calc(2.625rem - 2px);text-align: center;border: 1px solid #ffffff80;font-size: 1.125rem;color: #ffffff;border-radius: 1.25rem;}
.rank-panel .rankWrap .topWrap .top-three-wrap{display: flex;align-items: center;column-gap: 0.875rem;flex-shrink: 0;}
.rank-panel .rankWrap .topWrap .top-three-wrap .appWrap{width: 9.875rem;height: 13.75rem;padding: 0 0.5rem;display: flex;flex-direction: column;background: #ffffff;justify-content: center;}
.rank-panel .rankWrap .topWrap .top-three-wrap .appWrap .imgWrap{margin: 0 auto 0.5rem;width: 6rem;height: 6rem;position: relative;}
.rank-panel .rankWrap .topWrap .top-three-wrap .appWrap .imgWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 1.5rem;}
.rank-panel .rankWrap .topWrap .top-three-wrap .appWrap .imgWrap .rankNo{position: absolute;top: -2px;left: -2px;width: 3.5rem;height: 1.875rem;line-height: 1.875rem;padding: 0 0.75rem;font-size: 1.25rem;color: #ffffff;background-image: url(../images/rankNoBg.webp);background-position: center;background-repeat: no-repeat;background-size: contain;}
.rank-panel .rankWrap .topWrap .top-three-wrap .appWrap .appName{text-align: center;font-size: 1.5rem;color: #02010a;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.rank-panel .rankWrap .topWrap .top-three-wrap .appWrap > span{font-size: 1.125rem;text-align: center;color: #bababa;}
.rank-panel .rankWrap .rank-listing-wrap{display: flex;flex-direction: column;row-gap: 2.5rem;}
.rank-panel .rankWrap .rank-listing-wrap .appWrap{display: flex;align-items: center;column-gap: 1.5rem;overflow: hidden;}
.rank-panel .rankWrap .rank-listing-wrap .appWrap .imgWrap{width: 7.5rem;height: 7.5rem;overflow: hidden;flex-shrink: 0;}
.rank-panel .rankWrap .rank-listing-wrap .appWrap .imgWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 1.625rem;overflow: hidden;}
.rank-panel .rankWrap .rank-listing-wrap .appWrap .infoWrap{flex: 1;display: flex;flex-direction: column;row-gap: 0.5rem;overflow: hidden;min-width: 0;}
.rank-panel .rankWrap .rank-listing-wrap .appWrap .infoWrap .appName{font-size: 1.75rem;color: #02010a;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.rank-panel .rankWrap .rank-listing-wrap .appWrap .infoWrap .detailWrap{display: flex;align-items: center;column-gap: 0.5rem;font-size: 1.375rem;color: #bababa;}
.rank-panel .rankWrap .rank-listing-wrap .appWrap .infoWrap > span{font-size: 1.375rem;color: #bababa;}
.rank-panel .rankWrap .rank-listing-wrap .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;}
.rank-panel .rankWrap .rank-listing-wrap .appWrap .rankNo{font-size: 1.875rem;font-weight: bold;color: #bababa;}

.news-panel{margin-top: 2.5rem;}
.news-panel .news-listing{margin-top: 1.5rem;display: flex;flex-direction: column;row-gap: 2.5rem;}
.news-panel .news-listing .newsWrap{display: flex;align-items: center;column-gap: 1.75rem;}
.news-panel .news-listing .newsWrap .bannerWrap{width: 15.313rem;height: 8.875rem;overflow: hidden;flex-shrink: 0;}
.news-panel .news-listing .newsWrap .bannerWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;overflow: hidden;}
.news-panel .news-listing .newsWrap .infoWrap{flex: 1;display: flex;flex-direction: column;height: 8.875rem;justify-content: space-between;padding: 0.25rem 0;}
.news-panel .news-listing .newsWrap .infoWrap .news-title{font-size: 1.75rem;color: #02010a;overflow: hidden;line-height: 2.25rem;height: 4.5rem;}
.news-panel .news-listing .newsWrap .infoWrap .detailWrap{display: flex; align-items: center; column-gap: 0.375rem; font-size: 1.25rem; color: #bababa;}

.latest-update-panel{margin-top: 2.5rem;}

.friendship-panel{background: #f5f6f8;margin-top: 3.125rem;}
.friendship-panel .friendship-title{display: flex;align-items: center;column-gap: 0.375rem;color: #3071f2;font-weight: bold;font-size: 1.75rem;}
.friendship-panel .friendship-title h2{font-size: 1.75rem;color: #3071f2;font-weight: bold;}
.friendship-panel .container {padding: 1.25rem 1.5rem;}
.friendship-panel .container::after{content: ""; position: absolute; top: 0; left: 1.5rem; width: calc(100% - 3rem); height: 2px; background: linear-gradient(to right, #4E85F3 0%, #7FA7F4 25%, #C9D8F7 50%, #F1F3F8 100%);}
.friendship-panel .links-list{margin-top: 1.75rem;display: flex;flex-wrap: wrap;overflow: hidden;margin-left: -1.25rem;row-gap: 1rem;}
.friendship-panel .links-list a{position: relative;font-size: 1.375rem;color: #666666;padding: 0 1.25rem;}
.friendship-panel .links-list a::after{content: "";position: absolute;top: 50%;transform: translateY(-50%);right: 0;width: 1px;height: 1.25rem;background: #bababa;}
.friendship-panel .links-list a:last-child::after{display: none;}

.app-row-listing{margin-top: 1.25rem;}