.topic-detail-page .topic-detail-banner{padding: 1.875rem;border-radius: 1.375rem;background-color: #ffffff;box-shadow: 0px 2px 2px 0px #0EC9A308;display: flex;flex-direction: column;row-gap: 1.625rem;position: relative;z-index: 1;margin-top: 1.25rem;}
.topic-detail-page .topic-detail-banner .imgWrap{width: 100%;height: 20.625rem;position: relative;border-radius: 1.25rem;z-index: 1;}
.topic-detail-page .topic-detail-banner .imgWrap > img{width: 100%;height: 100%;border-radius: 1.25rem;object-fit: cover;object-position: center;}
.topic-detail-page .topic-detail-banner .imgWrap .amount{position: absolute; right: -0.31rem; top: 1rem; height: 2.125rem; width: fit-content; padding: 0 0.75rem 0 1.25rem; text-align: center; background: linear-gradient(94.1deg, #44F4C6 1.62%, #3DD9FF 83.19%); font-size: 1.375rem; font-weight: bold; color: #FFFFFF; clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 10% 50%);}
.topic-detail-page .topic-detail-banner .imgWrap::before { content: ""; position: absolute; top: 3.05rem; right: -0.3rem; width: 0.4rem; height: 0.4rem; background-color: #4BBCAE; clip-path: polygon(0 0, 0% 100%, 100% 0); z-index: -1;}
.topic-detail-page .topic-detail-banner .detailWrap{display: flex;flex-direction: column;row-gap: 1.25rem;}
.topic-detail-page .topic-detail-banner .detailWrap .topWrap{display: flex;align-items: flex-end;justify-content: space-between;}
.topic-detail-page .topic-detail-banner .detailWrap .topWrap h1{font-size: 2rem;font-weight: bold;color: #333333;max-width: 26.25rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-detail-page .topic-detail-banner .detailWrap .topWrap .dateUpdate{font-size: 1.375rem;color: #949494;}
.topic-detail-page .topic-detail-banner .detailWrap .content{font-size: 1.5rem;color: #949494;overflow: hidden;line-height: 2.125rem;letter-spacing: 0.125rem;}

.topic-detail-page .hot-app-list{display: flex;flex-wrap: wrap;margin-top: 1.5rem;column-gap: 1rem;row-gap: 1.875rem;justify-content: space-between;}
.topic-detail-page .hot-app-panel .bgWrap{background: linear-gradient(324.95deg, #FFFFFF 57.52%, #FFF0F0 118.69%); }
.topic-detail-page .hot-app-list a{width: 9rem;flex: 0 0 9rem;max-width: 9rem;display: flex;flex-direction: column;row-gap: 0.875rem;}
.topic-detail-page .hot-app-list a > img{width: 7.5rem;height: 7.5rem;border-radius: 1.875rem;object-fit: cover;object-position: center;margin: 0 auto;}
.topic-detail-page .hot-app-list a > .appName{text-align: center;font-size: 1.75rem;color: #333333;font-weight: 500;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-detail-page .hot-app-list a > .viewBtn{margin-left: unset;margin: 0 auto;}

.topic-detail-page .app-listing-panel .app-listing a:last-child{padding: 1rem 0;}
.topic-detail-page .app-listing-panel .app-listing a:last-child::after{display: block;}

.topic-detail-page .hot-topic-panel .hot-topic-slider{display: flex;align-items: center;column-gap: 1.875rem;overflow-x: scroll;scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;}
.topic-detail-page .hot-topic-panel .hot-topic-slider::-webkit-scrollbar{height: 0;}
.topic-detail-page .hot-topic-panel .hot-topic-slider a{width: 34.625rem;flex: 0 0 34.625rem;max-width: 34.625rem;background-color: #F7F7FB;border-radius: 1.875rem;display: flex;flex-direction: column;position: relative;z-index: 1;}
.topic-detail-page .hot-topic-panel .hot-topic-slider a > img{width: 100%;height: 18.125rem;object-fit: cover;object-position: center;border-radius: 1.875rem 1.875rem 0 0;}
.topic-detail-page .hot-topic-panel .hot-topic-slider a > .detailWrap{width: 100%;display: flex;flex-direction: column;row-gap: 0.625rem;padding: 1.25rem;}
.topic-detail-page .hot-topic-panel .hot-topic-slider a > .detailWrap .topicName{font-size: 1.75rem;color: #333333;font-weight: bold;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-detail-page .hot-topic-panel .hot-topic-slider a > .detailWrap .dateUpdate{font-size: 1.375rem;color: #949494;}
.topic-detail-page .hot-topic-panel .hot-topic-slider a .amount{position: absolute; right: -0.31rem; top: 1rem; height: 2.125rem; width: fit-content; padding: 0 0.75rem 0 1.25rem; text-align: center; background: linear-gradient(94.1deg, #44F4C6 1.62%, #3DD9FF 83.19%); font-size: 1.375rem; font-weight: bold; color: #FFFFFF; clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 10% 50%);}
.topic-detail-page .hot-topic-panel .hot-topic-slider a::before { content: ""; position: absolute; top: 3.05rem; right: -0.3rem; width: 0.4rem; height: 0.4rem; background-color: #4BBCAE; clip-path: polygon(0 0, 0% 100%, 100% 0); z-index: -1;}

.topic-detail-page .hot-topic-panel .hot-app-list{margin-top: 1.875rem;}