.topic-content-page .topic-listing-panel{margin-top: 22px;}
.topic-content-page .topic-listing-panel h1{font-size: 24px;color: #060D1F;font-weight: bold;margin-bottom: 25px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

.topic-content-page .topic-listing-panel .rank-nav-panel {display: flex;column-gap: 25px;align-items: center;}
.topic-content-page .topic-listing-panel .rank-nav-panel .rank-nav-wrap{width: calc(25% - 20px);flex: 0 0 calc(25% - 20px);max-width: calc(25% - 20px);height: 50px;background-color: #E5F6FF;border-radius: 25px;display: flex;align-items: center;padding: 0 30px;position: relative;z-index: 1;overflow: hidden;}
.topic-content-page .topic-listing-panel .rank-nav-panel .rank-nav-wrap::after{content: "";position: absolute;top: 9px;right: 97px;width: 42px;height: 50px;background-image: url(../images/home/starsIcon.webp);background-position: center;background-repeat: no-repeat;background-size: cover;z-index: -1;}
.topic-content-page .topic-listing-panel .rank-nav-panel .rank-nav-wrap .rank-nav{display: flex;flex-direction: column;width: 100%;}
.topic-content-page .topic-listing-panel .rank-nav-panel .rank-nav-wrap .rank-nav .rank-title{font-size: 14px;font-weight: bold;color: #060D1F;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 145px;}
.topic-content-page .topic-listing-panel .rank-nav-panel .rank-nav-wrap .rank-nav .amountWrap{position: relative;padding-left: 19px;font-size: 12px;color: #54C5FF;}
.topic-content-page .topic-listing-panel .rank-nav-panel .rank-nav-wrap .rank-nav .amountWrap::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 16px;height: 16px;background-image: url(../images/home/packageIcon.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}
.topic-content-page .topic-listing-panel .rank-nav-panel .rank-nav-wrap .top-three-wrap{position: absolute;z-index: 1;top: 50%;transform: translateY(-50%);right: 14px;display: flex;align-items: center;}
.topic-content-page .topic-listing-panel .rank-nav-panel .rank-nav-wrap .top-three-wrap a{width: 28px;flex: 0 0 28px;max-width: 28px;height: 28px;border-radius: 50%;border: 2px solid #ffffff;position: relative;}
.topic-content-page .topic-listing-panel .rank-nav-panel .rank-nav-wrap .top-three-wrap a img{width: 100%;height: 100%;border-radius: 50%;object-fit: cover;object-position: center;}
.topic-content-page .topic-listing-panel .rank-nav-panel .rank-nav-wrap .top-three-wrap a:nth-child(1){z-index: 3;margin-right: -8px;}
.topic-content-page .topic-listing-panel .rank-nav-panel .rank-nav-wrap .top-three-wrap a:nth-child(2){z-index: 2;margin-right: -8px;}
.topic-content-page .topic-listing-panel .rank-nav-panel .rank-nav-wrap .top-three-wrap a:nth-child(3){z-index: 1;}
.topic-content-page .topic-listing-panel .rank-nav-panel .rank-nav-wrap:hover{background-color: #54C5FF;}
.topic-content-page .topic-listing-panel .rank-nav-panel .rank-nav-wrap:hover .rank-nav .rank-title{color: #ffffff;}
.topic-content-page .topic-listing-panel .rank-nav-panel .rank-nav-wrap:hover .rank-nav .amountWrap{color: #ffffff;}
.topic-content-page .topic-listing-panel .rank-nav-panel .rank-nav-wrap:hover .rank-nav .amountWrap::before{filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(4499%) hue-rotate(80deg) brightness(107%) contrast(108%);}
.topic-content-page .topic-listing-panel .rank-nav-panel .rank-nav-wrap:hover::after{opacity: 0.2;}

.topic-content-page .topic-listing-panel .topic-tab-list{display: flex;align-items: flex-start;column-gap: 10px;margin-top: 30px;}
.topic-content-page .topic-listing-panel .topic-tab-list > p{font-size: 14px;color: #060D1F;line-height: 32px;white-space: nowrap;}
.topic-content-page .topic-listing-panel .topic-tab-list .category-list{display: flex;align-items: center;column-gap: 25px;flex-wrap: wrap;row-gap: 16px;}
.topic-content-page .topic-listing-panel .topic-tab-list .category-list a{width: 88px;flex: 0 0 88px;max-width: 88px;height: 32px;background-color: #F4F6F8;border-radius: 16px;text-align: center;font-size: 14px;color: #4D4D4D;line-height: 32px;}
.topic-content-page .topic-listing-panel .topic-tab-list .category-list a.active{background-color: #54C5FF;color: #ffffff;}

.topic-content-page .topic-listing-panel .filter-action-wrap{margin-top: 18px;display: flex;align-items: center;column-gap: 10px;}
.topic-content-page .topic-listing-panel .filter-action-wrap > p{font-size: 14px;color: #060D1F;line-height: 20px;}
.topic-content-page .topic-listing-panel .filter-action-wrap .filter-list{display: flex;align-items: center;column-gap: 30px;}
.topic-content-page .topic-listing-panel .filter-action-wrap .filter-list a{font-size: 14px;color: #060D1F;line-height: 20px;}
.topic-content-page .topic-listing-panel .filter-action-wrap .filter-list a.active{color: #54C5FF;}

.topic-content-page .topic-listing-panel .topic-listing{margin-top: 25px;display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 27px;row-gap: 30px;}
.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%;aspect-ratio:16 / 9;border-radius: 10px;margin-bottom: 18px;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .topicBannerWrap .bannerWrap{width: 100%;border-radius: 10px 10px 0 0;display: block;overflow: hidden;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .topicBannerWrap .bannerWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 10px 10px 0 0;transition: transform .3s ease;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .topicBannerWrap .amountWrap{width: fit-content;height: 36px;line-height: 36px;padding: 0 14px;border-radius: 18px;background-color: #00000080;font-size: 14px;color: #FFFFFF;text-align: center;position: absolute;top: 10px;right: 10px;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .topicBannerWrap .topic-app-listing{position: absolute;left: 0;bottom: 0;border-radius: 0 0 10px 10px;height: 80px;display: flex;align-items: center;column-gap: 32px;padding: 0 28px;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: 48px;flex: 0 0 48px;max-width: 48px;height: 48px;}
.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: 12px;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .nameWrap{display: flex;align-items: center;column-gap: 16px;margin-bottom: 14px;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .nameWrap .topicName{font-size: 20px;font-weight: bold;color: #060D1F;line-height: 26px;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: 14px;color: #54C5FF;line-height: 20px;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap .topic-content{font-size: 14px;color: #060D1F;line-height: 24px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap:hover .topicBannerWrap .bannerWrap img{transform: scale(1.1);}
.topic-content-page .topic-listing-panel .topic-listing .topicWrap:hover .nameWrap .topicName{color: #54C5FF;}

.topic-detail-page .topic-detail-banner{margin-top: 28px;display: flex;align-items: flex-start;column-gap: 24px;}
.topic-detail-page .topic-detail-banner > img{width: 444px;flex: 0 0 444px;max-width: 444px;height: 250px;border-radius: 10px;object-fit: cover;object-position: center;}
.topic-detail-page .topic-detail-banner .detailWrap{display: flex;flex-direction: column;row-gap: 25px;flex: 1;flex-shrink: 0;overflow: hidden;padding-top: 8px;}
.topic-detail-page .topic-detail-banner .detailWrap .nameWrap{display: flex;align-items: center;column-gap: 10px;}
.topic-detail-page .topic-detail-banner .detailWrap .nameWrap h1{flex: 1;flex-shrink: 0;overflow: hidden;font-size: 28px;color: #060D1F;font-weight: bold;white-space: nowrap;text-overflow: ellipsis;}
.topic-detail-page .topic-detail-banner .detailWrap .nameWrap h1 span{position: relative;width: fit-content;z-index: 1;}
.topic-detail-page .topic-detail-banner .detailWrap .nameWrap h1 span::after{content: ""; position: absolute; bottom: 2px; left: 0; width: 100%; height: 4px; border-radius: 5px; background: linear-gradient(90deg, rgb(84, 197, 255) 0%, rgba(84, 197, 255, 0) 100%); z-index: -1;}
.topic-detail-page .topic-detail-banner .detailWrap .nameWrap .amountWrap{width: fit-content;height: 28px;line-height: 28px;text-align: center;padding: 0 8px;border-radius: 6px;background-color: #E5F6FF;font-size: 14px;color: #54C5FF;}
.topic-detail-page .topic-detail-banner .detailWrap .topic-content{width: 100%;padding: 20px 10px 20px 20px;background-color: #F4F6F8;border-radius: 10px;height: 124px;}
.topic-detail-page .topic-detail-banner .detailWrap .topic-content p{font-size: 14px;color: #8A8E99;line-height: 28px;overflow-y: scroll;max-height: 90px;padding-right: 10px;}
.topic-detail-page .topic-detail-banner .detailWrap .topic-content p::-webkit-scrollbar{width: 6px;}
.topic-detail-page .topic-detail-banner .detailWrap .topic-content p::-webkit-scrollbar-thumb{background: #999999;border-radius: 8px;}
.topic-detail-page .topic-detail-banner .detailWrap .topic-content p::-webkit-scrollbar-track{background: #F4F6F8;}
.topic-detail-page .topic-detail-banner .detailWrap .actionWrap{display: flex;align-items: center;column-gap: 66px;}
.topic-detail-page .topic-detail-banner .detailWrap .actionWrap p{position: relative;font-size: 14px;color: #999999;line-height: 20px;}
.topic-detail-page .topic-detail-banner .detailWrap .actionWrap p.likeWrap{padding-left: 20px;cursor: pointer;}
.topic-detail-page .topic-detail-banner .detailWrap .actionWrap p.likeWrap::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 14px;height: 16px;background-image: url(../images/topic/like.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}
.topic-detail-page .topic-detail-banner .detailWrap .actionWrap p.likeWrap.active{color: #54C5FF; transform: scale(0.95);}
.topic-detail-page .topic-detail-banner .detailWrap .actionWrap p.likeWrap.active::before{background-image: url(../images/topic/likeActive.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}
.topic-detail-page .topic-detail-banner .detailWrap .actionWrap .openFeedback{font-size: 14px;color: #FC5B53;font-weight: bold;line-height: 20px;position: relative;padding-left: 26px;margin-left: auto;cursor: pointer;}
.topic-detail-page .topic-detail-banner .detailWrap .actionWrap .openFeedback::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 20px;height: 20px;background-image: url(../images/topic/feedbackIcon.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}

.topic-detail-page .topic-app-list{display: flex;column-gap: 20px;row-gap: 33px;margin-top: 40px;flex-wrap: wrap;}
.topic-detail-page .topic-app-list .appWrap{display: flex;align-items: center;column-gap: 14px;width: 285px;max-width: 285px;flex: 0 0 285px;}
.topic-detail-page .topic-app-list .appWrap .imgWrap{width: 100px;height: 100px;flex: 0 0 100px;max-width: 100px;border-radius: 25px;}
.topic-detail-page .topic-app-list .appWrap .imgWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 25px;transition: transform .3s ease;}
.topic-detail-page .topic-app-list .appWrap .detailWrap{display: flex;flex-direction: column;row-gap: 10px;flex: 1;flex-shrink: 0;overflow: hidden;}
.topic-detail-page .topic-app-list .appWrap .detailWrap .nameWrap {display: flex;align-items: center;column-gap: 5px;}
.topic-detail-page .topic-app-list .appWrap .detailWrap .nameWrap .appName{font-size: 16px;line-height: 24px;color: #091F17;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: calc(100% - 20px);}
.topic-detail-page .topic-app-list .appWrap .detailWrap .nameWrap .hot{width: 12px;flex: 0 0 12px;max-width: 12px;height: 14px;background-image: url(../images/topic/hotIcon.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}
.topic-detail-page .topic-app-list .appWrap .detailWrap > p, .topic-detail-page .topic-app-list .appWrap .detailWrap > a{font-size: 14px;color: #999999;}
.topic-detail-page .topic-app-list .appWrap:hover .detailWrap .nameWrap .appName{color: #54C5FF;font-weight: bold;}
.topic-detail-page .topic-app-list .appWrap:hover .imgWrap img{transform: scale(1.1);}

.topic-detail-page .hot-topic-panel{margin-top: 34px;}
.topic-detail-page .hot-topic-panel .hot-topic-swiper{margin-top: 18px;overflow: hidden;}
.topic-detail-page .hot-topic-panel .hot-topic-swiper .swiper-slide{display: flex;flex-direction: column;row-gap: 16px;}
.topic-detail-page .hot-topic-panel .hot-topic-swiper .swiper-slide .bannerWrap{width: 100%;height: 152px;border-radius: 8px;overflow: hidden;}
.topic-detail-page .hot-topic-panel .hot-topic-swiper .swiper-slide .bannerWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 8px;transition: transform .3s ease;}
.topic-detail-page .hot-topic-panel .hot-topic-swiper .swiper-slide .nameWrap{display: flex;align-items: center;column-gap: 10px;}
.topic-detail-page .hot-topic-panel .hot-topic-swiper .swiper-slide .nameWrap .topicName{flex: 1;flex-shrink: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;color: #212121;line-height: 20px;}
.topic-detail-page .hot-topic-panel .hot-topic-swiper .swiper-slide .nameWrap .amountWrap{font-size: 14px;color: #999999;line-height: 20px;}
.topic-detail-page .hot-topic-panel .hot-topic-swiper-pagination{width: 100%;height: 8px;background: #F1F1F1;position: relative;border-radius: 4px;margin-top: 16px;overflow: hidden;}
.topic-detail-page .hot-topic-panel .hot-topic-swiper-pagination .swiper-pagination-progressbar-fill{background: #C1C1C1;border-radius: 4px;}
.topic-detail-page .hot-topic-panel .hot-topic-swiper .swiper-slide:hover .bannerWrap img{transform: scale(1.1);}
.topic-detail-page .hot-topic-panel .hot-topic-swiper .swiper-slide:hover .nameWrap .topicName{color: #54C5FF;font-weight: bold;}

.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: 450px;background: #ffffff;display: flex;flex-direction: column;border-radius: 20px;}
.feedback-popup .feedback-wrap .popupTitle{height: 95px;width: 100%;text-align: center;line-height: 95px;border-radius: 20px 20px 0 0;font-size: 32px;color: #17183A;font-weight: bold;position: relative;}
.feedback-popup .feedback-wrap .feedback-inner{background: #ffffff;border-radius: 20px;position: relative;z-index: 1;padding: 0 32px 30px;display: flex;flex-direction: column;row-gap: 15px;}
.feedback-popup .feedback-wrap .feedback-inner .feed-sec{display: flex;flex-direction: column;row-gap: 15px;}
.feedback-popup .feedback-wrap .feedback-inner .feed-sec .innerTitle{font-size: 20px;color: #484846;text-align: left;position: relative;padding-left: 12px;}
.feedback-popup .feedback-wrap .feedback-inner .feed-sec .innerTitle::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 6px;height: 24px;background-color: #54C5FF;}
.feedback-popup .feedback-wrap .feedback-inner .type-list{display: flex;flex-wrap: wrap;column-gap: 15px;row-gap: 15px;}
.feedback-popup .feedback-wrap .feedback-inner .type-list .feedback-reason{width: 185px;height: 36px;text-align: center;padding: 0 8px;line-height: 36px;border-radius: 10px;background-color: #F4F4F4;font-size: 16px;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: 100px;padding: 10px 16px;border-radius: 10px;background-color: #F4F4F4;font-size: 16px;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: 40px;border: none;outline: none;border-radius: 10px;line-height: 40px;padding: 10px 16px;background-color: #F4F4F4;font-size: 16px;color: #000000;}
.feedback-popup .feedback-wrap .feedback-inner .feedback-contact input::placeholder{color: #A3A3A3;}
.feedback-popup .feedback-wrap .feedback-inner .submitFeedback{width: 100%;height: 54px;background: #54C5FF;line-height: 54px;border-radius: 45px;text-align: center;font-size: 24px;color: #ffffff;cursor: pointer;font-weight: bold;}
.feedback-popup .feedback-wrap .close-button{position: absolute;width: 50px;height: 50px;background: #cccccc;border-radius: 50%;text-align: center;line-height: 50px;font-size: 46px;color: #ffffff;z-index: 1;cursor: pointer;bottom: -70px;left: 50%;transform: translateX(-50%);}