.topic-detail-banner{display: flex;flex-direction: column;margin-top: 1.75rem;}
.topic-detail-banner .bannerWrap{position: relative;width: 100%;height: 23.75rem;border-radius: 1rem;margin-bottom: 1.5rem;}
.topic-detail-banner .bannerWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 1rem;}
.topic-detail-banner .bannerWrap .amountWrap{width: fit-content;height: 2.5rem;padding: 0 1.25rem;border-radius: 1.25rem;background-color: #00000080;font-size: 1.5rem;color: #FFFFFF;text-align: center;position: absolute;top: 0.625rem;right: 0.625rem;}
.topic-detail-banner .nameWrap{display: flex;align-items: center;column-gap: 1rem;margin-bottom: 0.75rem;}
.topic-detail-banner .nameWrap .topicName{font-size: 2rem;font-weight: 500;color: #060D1F;line-height: 2.75rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;flex: 1;flex-shrink: 0;}
.topic-detail-banner .nameWrap .dateUpdate{font-size: 1.5rem;color: #54C5FF;line-height: 2rem;}
.topic-detail-banner .topic-content{font-size: 1.5rem;color: #999999;line-height: 2.5rem;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.topic-detail-banner .openFeedback{font-size: 1.5rem;color: #FC5B53;line-height: 2rem;position: relative;padding-left: 1.875rem;margin-left: auto;margin-top: 0.875rem;}
.topic-detail-banner .openFeedback::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 1.5rem;height: 1.5rem;background-image: url(../images/feedbackIcon.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}

.rank-nav-panel {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1.875rem;row-gap: 1.875rem;margin-top: 2.5rem;}
.rank-nav-panel .rank-nav-wrap{height: 5.5rem;background-color: #E5F6FF;border-radius: 1rem;display: flex;align-items: center;padding: 0 0.875rem;position: relative;z-index: 1;overflow: hidden;}
.rank-nav-panel .rank-nav-wrap::after{content: "";position: absolute;top: 0.75rem;right: 6.5rem;width: 3.875rem;height: 4.625rem;background-image: url(../images/home/starsIcon.webp);background-position: center;background-repeat: no-repeat;background-size: contain;z-index: -1;}
.rank-nav-panel .rank-nav-wrap .rank-nav{display: flex;flex-direction: column;max-width: 11rem;overflow: hidden;}
.rank-nav-panel .rank-nav-wrap .rank-nav .rank-title{font-size: 1.75rem;color: #060D1F;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.rank-nav-panel .rank-nav-wrap .rank-nav .amountWrap{position: relative;padding-left: 1.875rem;font-size: 1.375rem;color: #54C5FF;}
.rank-nav-panel .rank-nav-wrap .rank-nav .amountWrap::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 1.5rem;height: 1.5rem;background-image: url(../images/home/packageIcon.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}
.rank-nav-panel .rank-nav-wrap .top-three-wrap{position: absolute;z-index: 1;top: 50%;transform: translateY(-50%);right: 1rem;display: flex;align-items: center;}
.rank-nav-panel .rank-nav-wrap .top-three-wrap a{width: 3.75rem;flex: 0 0 3.75rem;max-width: 3.75rem;height: 3.75rem;border-radius: 50%;border: 2px solid #ffffff;position: relative;}
.rank-nav-panel .rank-nav-wrap .top-three-wrap a img{width: 100%;height: 100%;border-radius: 50%;object-fit: cover;object-position: center;}
.rank-nav-panel .rank-nav-wrap .top-three-wrap a:nth-child(1){z-index: 3;margin-right: -1.875rem;}
.rank-nav-panel .rank-nav-wrap .top-three-wrap a:nth-child(2){z-index: 2;margin-right: -1.875rem;}
.rank-nav-panel .rank-nav-wrap .top-three-wrap a:nth-child(3){z-index: 1;}

.topic-content-page .topic-tabs-wrap{position: relative;width: 100%;height: 5.5rem;display: grid; grid-template-columns: repeat(3, 1fr);z-index: 1;margin-top: 2.5rem;}
.topic-content-page .topic-tabs-wrap::after{content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 5rem;border-radius: 1.25rem 1.25rem 0 0;background-color: #F5F5F5;z-index: -1;}
.topic-content-page .topic-tabs-wrap a{text-align: center;font-size: 1.75rem;color: #666666;position: relative;display: flex;align-items: center;justify-content: center;}
.topic-content-page .topic-tabs-wrap a span{position: relative;z-index: 1;}
.topic-content-page .topic-tabs-wrap a.active{font-size: 2rem;color: #333333;font-weight: bold;}
.topic-content-page .topic-tabs-wrap a.active::after{content: "";position: absolute;bottom: 0;width: 21rem;height: 5.625rem;background-image: url(../images/app/tab-shape-2.webp);background-position: center;background-repeat: no-repeat;background-size: cover;left: 50%;transform: translateX(-50%);}
.topic-content-page .topic-tabs-wrap a.active:first-child::after{background-image: url(../images/app/tab-shape.webp);background-position: center;background-repeat: no-repeat;background-size: cover;height: 5.625rem;width: 17.438rem;left: 0;transform: unset;}
.topic-content-page .topic-tabs-wrap a.active:last-child::after{background-image: url(../images/app/tab-shape.webp);background-position: center;background-repeat: no-repeat;background-size: cover;height: 5.625rem;width: 17.438rem;right: 0;transform: scaleX(-1);left: unset;}
.topic-content-page .topic-tabs-wrap a.active span::after{content: "";position: absolute;left: 50%;transform: translateX(-50%);bottom: -0.5rem;width: 2.125rem;height: 0.375rem;border-radius: 0.25rem;background-color: #54C5FF;}

.topic-content-page .topic-listing-panel .topic-listing{margin-top: 2.25rem;display: flex;flex-direction: column;row-gap: 1.875rem;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap{display: flex;flex-direction: column;overflow: hidden;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .topicBannerWrap{overflow: hidden;position: relative;width: 100%;height: 25rem;border-radius: 0.625rem;margin-bottom: 1.25rem;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .topicBannerWrap .bannerWrap{width: 100%;height: 100%;border-radius: 0.625rem 0.625rem 0 0;display: block;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .topicBannerWrap .bannerWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 0.625rem 0.625rem 0 0;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .topicBannerWrap .amountWrap{width: fit-content;height: 2.5rem;line-height: 2.5rem;padding: 0 1.25rem;border-radius: 1.25rem;background-color: #00000080;font-size: 1.5rem;color: #FFFFFF;text-align: center;position: absolute;top: 0.625rem;right: 0.625rem;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .topicBannerWrap .topic-app-listing{position: absolute;left: 0;bottom: 0;border-radius: 0 0 0.625rem 0.625rem;height: 5rem;display: flex;align-items: center;column-gap: 1.75rem;padding: 0 1.75rem;background: rgba(255, 255, 255, 0.5);backdrop-filter: blur(10px);width: 100%;box-shadow: 0 -20px 40px rgba(255, 255, 255);}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .topicBannerWrap .topic-app-listing .imgWrap{width: 3rem;flex: 0 0 3rem;max-width: 3rem;height: 3rem;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .topicBannerWrap .topic-app-listing .imgWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 0.75rem;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .nameWrap{display: flex;align-items: center;column-gap: 1rem;margin-bottom: 0.75rem;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .nameWrap .topicName{font-size: 1.75rem;font-weight: 500;color: #191F30;line-height: 2.25rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;flex: 1;flex-shrink: 0;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .nameWrap .dateUpdate{font-size: 1.5rem;color: #54C5FF;line-height: 2rem;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .topic-content{font-size: 1.5rem;color: #999999;line-height: 2.25rem;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}

.topic-detail-page .topic-app-panel{margin-top: 1.875rem;}
.topic-detail-page .topic-app-panel .app-listing{margin-top: 1.25rem;display: flex;flex-direction: column;}
.topic-detail-page .topic-app-panel .app-listing .appWrap{padding: 1rem 0;display: flex;align-items: center;column-gap: 1.25rem;overflow: hidden;position: relative;}
.topic-detail-page .topic-app-panel .app-listing .appWrap::after{content: "";position: absolute;bottom: 0;right: 0;width: calc(100% - 6.25rem);height: 2px;background-color: #EEEEEE;}
.topic-detail-page .topic-app-panel .app-listing .appWrap .imgWrap{width: 5.5rem;flex: 0 0 5.5rem;max-width: 5.5rem;height: 5.5rem;}
.topic-detail-page .topic-app-panel .app-listing .appWrap .imgWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 1.5rem;}
.topic-detail-page .topic-app-panel .app-listing .appWrap .detailWrap{flex: 1;flex-shrink: 0;overflow: hidden;display: flex;align-items: center;column-gap: 1.25rem;}
.topic-detail-page .topic-app-panel .app-listing .appWrap .detailWrap .app-detail{flex: 1;flex-shrink: 0;display: flex;flex-direction: column;row-gap: 0.625rem;overflow: hidden;}
.topic-detail-page .topic-app-panel .app-listing .appWrap .detailWrap .app-detail .nameWrap{display: flex;align-items: center;column-gap: 0.5rem;}
.topic-detail-page .topic-app-panel .app-listing .appWrap .detailWrap .app-detail .appName{font-size: 1.75rem;color: #091F17;line-height: 2.25rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-detail-page .topic-app-panel .app-listing .appWrap .detailWrap .app-detail .nameWrap .hot-tag{width: 1.125rem;height: 1.375rem;background-image: url(../images/topic/hotIcon.webp);background-position: center;background-repeat: no-repeat;background-size: contain;flex: 0 0 1.125rem;max-width: 1.125rem;}
.topic-detail-page .topic-app-panel .app-listing .appWrap .detailWrap .app-detail .app-content{font-size: 1.5rem;color: #999999;line-height: 2rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-detail-page .topic-app-panel .app-listing .appWrap .detailWrap .viewBtn{width: 5.5rem; height: 3rem; flex: 0 0 5.5rem; max-width: 5.5rem; border-radius: 1.5rem; text-align: center; line-height: 3rem; background-color: #54C5FF; font-size: 1.5rem; color: #ffffff;}
.topic-detail-page .topic-app-panel .app-listing .appWrap.hot .detailWrap .app-detail .appName{position: relative;padding-right: 1.625rem;}
.topic-detail-page .topic-app-panel .app-listing .appWrap .detailWrap .app-detail .infoWrap{display: flex; align-items: center; column-gap: 0.625rem;}
.topic-detail-page .topic-app-panel .app-listing .appWrap .detailWrap .app-detail .infoWrap i{width: 0.25rem; height: 0.25rem; border-radius: 50%; background-color: #999999;}
.topic-detail-page .topic-app-panel .app-listing .appWrap .detailWrap .app-detail .infoWrap p{font-size: 1.5rem;color: #999999; line-height: 2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}


.topic-detail-page .hot-topic-panel{margin-top: 2.75rem;}
.topic-detail-page .hot-topic-panel .hot-topic-list{margin-top: 1rem;display: flex;align-items: center;column-gap: 1.75rem;flex-wrap: nowrap;overflow-x: scroll;}
.topic-detail-page .hot-topic-panel .hot-topic-list::-webkit-scrollbar{height: 0;}
.topic-detail-page .hot-topic-panel .hot-topic-list .topicWrap{display: flex;flex-direction: column;row-gap: 0.875rem;overflow: hidden;width: 16.25rem;flex: 0 0 16.25rem;max-width: 16.25rem;}
.topic-detail-page .hot-topic-panel .hot-topic-list .topicWrap .bannerWrap{position: relative;width: 100%;height: 9.5rem;border-radius: 0.5rem;}
.topic-detail-page .hot-topic-panel .hot-topic-list .topicWrap .bannerWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 0.5rem;}
.topic-detail-page .hot-topic-panel .hot-topic-list .topicWrap .bannerWrap .amountWrap{width: fit-content;height: 2.125rem;padding: 0 1rem;border-radius: 1rem;background-color: #00000080;font-size: 1.25rem;color: #FFFFFF;text-align: center;position: absolute;top: 0.315rem;right: 0.315rem;}
.topic-detail-page .hot-topic-panel .hot-topic-list .topicWrap .topicName{font-size: 1.5rem;color: #212121;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

.feedback-popup{display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%;text-align: center;}
.feedback-popup .overlay{background: #00000099; position: absolute;width: 100%;height: 100%;z-index: -1;}
.feedback-popup .feedback-wrap{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 80%;background: #ffffff;display: flex;flex-direction: column;border-radius: 0.625rem;}
.feedback-popup .feedback-wrap .popupTitle{margin-top:0.5rem;height: 4rem;width: 100%;text-align: center;line-height: 4rem;border-radius: 0.625rem 0.625rem 0 0;font-size: 2.5rem;color: #17183A;font-weight: bold;position: relative;}
.feedback-popup .feedback-wrap .popupTitle span{position: relative;width: fit-content;display: block;text-align: center;margin: 0 auto;z-index: 1;}
.feedback-popup .feedback-wrap .feedback-inner{background: #ffffff;border-radius: 0.625rem;position: relative;z-index: 1;padding: 0 1.25rem 2rem;display: flex;flex-direction: column;row-gap: 0.75rem;}
.feedback-popup .feedback-wrap .feedback-inner .feed-sec{display: flex;flex-direction: column;row-gap: 0.75rem;}
.feedback-popup .feedback-wrap .feedback-inner .feed-sec .innerTitle{font-size: 1.75rem;color: #484846;text-align: left;position: relative;padding-left: 1.5rem;}
.feedback-popup .feedback-wrap .feedback-inner .feed-sec .innerTitle::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 0.5rem;height: 1.5rem;background-color: #54C5FF;}
.feedback-popup .feedback-wrap .feedback-inner .type-list{display: flex;flex-wrap: wrap;column-gap: 1rem;row-gap: 1rem;}
.feedback-popup .feedback-wrap .feedback-inner .type-list .feedback-reason{width: calc(50% - 0.5rem);height: 3rem;text-align: center;padding: 0 0.25rem;line-height: 3rem;border-radius: 0.625rem;background-color: #F4F4F4;font-size: 1.5rem;color: #17183A;cursor: pointer;border: 1px solid transparent;}
.feedback-popup .feedback-wrap .feedback-inner .type-list .feedback-reason.selected{background: #54C5FF;color: #ffffff;}
.feedback-popup .feedback-wrap .feedback-inner .fieldWrap textarea{width: 100%;height: 6.25rem;padding: 1rem 1.25rem;border-radius: 0.625rem;background-color: #F4F4F4;font-size: 1.25rem;color: #000000;border: none;outline: none;resize: none;}
.feedback-popup .feedback-wrap .feedback-inner .fieldWrap textarea::placeholder{color: #A3A3A3;}
.feedback-popup .feedback-wrap .feedback-inner .feedback-contact input{width: 100%;height: 3rem;border: none;outline: none;border-radius: 0.625rem;line-height: 3rem;padding: 1rem 1.25rem;background-color: #F4F4F4;font-size: 1.25rem;color: #000000;}
.feedback-popup .feedback-wrap .feedback-inner .feedback-contact input::placeholder{color: #A3A3A3;}
.feedback-popup .feedback-wrap .feedback-inner .submitFeedback{width: 100%;height: 5rem;background: #54C5FF;line-height: 5rem;border-radius: 2.813rem;text-align: center;font-size: 2rem;color: #ffffff;cursor: pointer;font-weight: bold;}
.feedback-popup .feedback-wrap .close-button{position: absolute;width: 5rem;height: 5rem;background: #cccccc;border-radius: 50%;text-align: center;line-height: 5rem;font-size: 3.5rem;color: #ffffff;z-index: 1;cursor: pointer;bottom: -6rem;left: 50%;transform: translateX(-50%);}