.topic-detail-page{margin-top: 1.25rem;}
.topic-detail-page .topic-banner{display: flex;flex-direction: column;}
.topic-detail-page .topic-banner .imgWrap{position: relative;height: 15rem;}
.topic-detail-page .topic-banner .imgWrap::after{position: absolute;content: "";width: 100%;height: 5.625rem;border-radius: 0.75rem 0.75rem 0 0;bottom: 0;left: 0;background: linear-gradient( 0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);;}
.topic-detail-page .topic-banner .imgWrap img{width: 100%;height: 100%;display: block;object-fit: cover;border-radius: 0.75rem 0.75rem 0 0;}
.topic-detail-page .topic-banner .imgWrap .detailWrap{position: absolute;padding: 0 3rem 0 1.25rem;bottom: 1.25rem;left: 0;display: flex;align-items: center;width: 100%;z-index: 1;flex-wrap: wrap}
.topic-detail-page .topic-banner .imgWrap .detailWrap h1{font-size: 1.875rem;color: #ffffff;font-weight: 900;margin-right: 1.5rem;width:100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-detail-page .topic-banner .imgWrap .detailWrap p.amount{font-size: 1.5rem;color: #ffffff;}
.topic-detail-page .topic-banner .imgWrap .detailWrap p.dateUpdate{font-size: 1.375rem;color: #ffffff;margin-left: auto;} 
.topic-detail-page .topic-banner .topic-content{padding: 1.25rem;border-radius: 0 0 0.75rem 0.75rem;background-color: #313131;position: relative;}
.topic-detail-page .topic-banner .topic-content > div{font-size: 1.5rem;color: #B3B3B3;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.topic-detail-page .topic-banner .topic-content p{font-size: 1.5rem;color: #B3B3B3;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.topic-detail-page .topic-banner .topic-content .viewAllDetail{position: absolute;bottom: 1.25rem;right: 1.25rem;font-size: 1.5rem;font-weight: 700;color: #4AABFF;width: 10.625rem;text-align: right;background: linear-gradient( 90deg, rgba(49,49,49,0) 0%, rgba(49,49,49,0.97) 35%, rgb(49,49,49) 36%, rgb(49,49,49) 100%);}

.topic-detail-page .editor-recommend-panel{margin-top: 1.875rem;padding: 1.5rem 0 2.5rem;border: 3px solid #FF8F57;border-radius: 0.75rem;position: relative;overflow: hidden;display: flex;flex-direction: column;align-items: center;}
.topic-detail-page .editor-recommend-panel .bg-top-right{width: 15rem; height: auto; display: block; position: absolute; top: -14.75rem; right: -2.5rem;}
.topic-detail-page .editor-recommend-panel .bg-bottom-left{width: 20rem; height: auto; display: block; position: absolute; bottom: -22rem; left: -2rem;}
.topic-detail-page .editor-recommend-panel .editorTitle{position: relative;text-align: center;width: max-content;display: block;}
.topic-detail-page .editor-recommend-panel .editorTitle h2{position: relative;font-size: 2.25rem;font-weight: 700;color: #FF5F59;}
.topic-detail-page .editor-recommend-panel .editorTitle h2 span{position: relative;padding: 0 1.25rem;}
.topic-detail-page .editor-recommend-panel .editorTitle h2 span::after{position: absolute;content: "";height: 1rem;width: 100%;background-color: #FFDED7;border-radius: 0.5rem;bottom: 0;left: 0;z-index: -1;}
.topic-detail-page .editor-recommend-panel .editorTitle::before{position: absolute;content: "";background-image: url(../images/topicInfo/title-line.png);height: 0.63rem;width: 3.875rem;top: 50%;transform: translateY(-50%);left: -7.25rem;background-repeat: no-repeat;background-size: cover;}
.topic-detail-page .editor-recommend-panel .editorTitle::after{position: absolute;content: "";background-image: url(../images/topicInfo/title-line.png);height: 0.63rem;width: 3.875rem;top: 50%;transform: translateY(-50%);right: -7.25rem;background-repeat: no-repeat;background-size: cover;}
.topic-detail-page .editor-recommend-panel .editorTitle h2::before{position: absolute;content: "";background-image: url(../images/topicInfo/title-star.png);height: 1.563rem;width: 1.625rem;top: 50%;transform: translateY(-50%);left: -2.75rem;background-repeat: no-repeat;background-size: cover;}
.topic-detail-page .editor-recommend-panel .editorTitle h2::after{position: absolute;content: "";background-image: url(../images/topicInfo/title-star.png);height: 1.563rem;width: 1.625rem;top: 50%;transform: translateY(-50%);right: -2.75rem;background-repeat: no-repeat;background-size: cover;}
.topic-detail-page .editor-recommend-panel .recommend-list{margin-top: 2.375rem;display: flex;justify-content: center;column-gap: 4.25rem;position: relative;z-index: 3;}
.topic-detail-page .editor-recommend-panel .recommend-list .itemWrap{width: 8.75rem;flex: 0 0 8.75rem;max-width: 8.75rem;display: flex;flex-direction: column;overflow: hidden;}
.topic-detail-page .editor-recommend-panel .recommend-list .itemWrap img{width: 8.75rem;height: 8.75rem;border-radius: 2rem;display: block;margin-bottom: 0.31rem;}
.topic-detail-page .editor-recommend-panel .recommend-list .itemWrap p{font-size: 1.75rem;font-weight: 500;color: #404040;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-detail-page .editor-recommend-panel .recommend-list .itemWrap a{width: 7.188rem;height: 3rem;background: linear-gradient( 0deg, rgb(74,171,255) 0%, rgb(56,196,232) 100%);border-radius: 1.5rem;display: flex;align-items: center;justify-content: center;font-size: 1.5rem;color: #ffffff;margin: 0.63rem auto 0;}

.app-listing-panel{margin-top: 0.63rem;}
.app-listing-panel .app-listing{    display: flex;
    flex-direction: column;
    row-gap: 1.25rem;}
.app-listing-panel .app-listing > a{display:block;padding-bottom: 1.25rem;border-bottom: 1px solid #F3F3F3;}
.app-listing-panel .app-listing > a:last-child{border-bottom: 0;}
.app-listing-panel .app-listing > a > img{width: 8.75rem;height: 8.75rem;border-radius: 2rem;margin-right: 1.25rem;float: left;}
.app-listing-panel .app-listing > a > div{width:24rem;margin-right: 1rem;float: left;}
.app-listing-panel .app-listing > a > div > h4{font-size: 1.875rem;font-weight: 500;color: #404040;margin-bottom: 1rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.app-listing-panel .app-listing > a > div > p{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 1.5rem;color: #999999;}
.app-listing-panel .app-listing > a > div > p:nth-child(1){font-size: 1.875rem;font-weight: 500;color: #404040;margin-bottom: 1rem;}
.app-listing-panel .app-listing > a > div > p:nth-child(2){margin-bottom: 1rem;}
.app-listing-panel .app-listing > a > div > p:nth-child(4){display: none;}
.app-listing-panel .app-listing > a > span{width: 7.188rem;height: 3rem;line-height: 3rem;text-align: center;flex: 0 0 7.188rem;max-width: 7.188rem;color: #999999;font-size: 1.5rem;background-color: #F3F3F3;border-radius: 1.5rem;display: block;float: left;margin-top: 3rem;}

.loding_box {padding: .1rem 0;}
.loding_box .loding_btn {display: block;width:9rem;height: 3.5rem;line-height:3.5rem;background-color:#4AABFF;border: 1px solid #4AABFF;border-radius: 0.5rem;font-size: 1.5rem;color: #fff;text-align: center;margin:.5rem auto;}

.app-listing-panel .app-listing > div{display: flex;align-items: center;padding: 1.25rem 0;border-bottom: 1px solid #F3F3F3;}
.app-listing-panel .app-listing > div:last-child{border-bottom: none;}
.app-listing-panel .app-listing > div > a img{width: 8.75rem;height: 8.75rem;flex: 0 0 8.75rem;max-width: 8.75rem;border-radius: 2rem;margin-right: 1.25rem;}
.app-listing-panel .app-listing div .detailWrap{display: flex;flex-direction: column;row-gap: 1rem;max-width: 17.313rem;flex: 0 0 17.313rem;margin-right: 1rem;}
.app-listing-panel .app-listing div .detailWrap h4{font-size: 1.875rem;font-weight: 500;color: #404040;}
.app-listing-panel .app-listing div .detailWrap .tag-list{display: flex;align-items: center;flex-wrap: wrap;gap: 0.63rem;}
.app-listing-panel .app-listing div .detailWrap .tag-list a{border-radius: 0.31rem;background-color: #DDF8F1;font-size: 1.25rem;color: #17A79F;padding: 0.31rem 0.5rem;}
.app-listing-panel .app-listing div .detailWrap .tag-list a:nth-child(2){background-color: #E9F8FF;color: #3C69E4;}
.app-listing-panel .app-listing div .detailWrap .tag-list a:nth-child(3){background-color: #FFEFEB;color: #F75A53;}
.app-listing-panel .app-listing div .detailWrap .dateUpdate{font-size: 1.5rem;color: #999999;}
.app-listing-panel .app-listing div .viewBtn{margin-left: auto;width: 7.188rem;height: 3rem;line-height: 3rem;text-align: center;flex: 0 0 7.188rem;max-width: 7.188rem;color: #999999;font-size: 1.5rem;background-color: #F3F3F3;border-radius: 1.5rem;}

.hot-topic-panel{margin-top: 0.63rem;}
.hot-topic-panel .hot-topic-content{display: flex;flex-direction: column;row-gap: 1.875rem;}
.hot-topic-panel .hot-topic-content .topic-banner-wrap{display: flex;column-gap: 1rem;overflow-x: scroll;}
.hot-topic-panel .hot-topic-content .topic-banner-wrap::-webkit-scrollbar{height: 0;}
.hot-topic-panel .hot-topic-content .topic-banner-wrap a{width: 15rem;flex: 0 0 15rem;max-width: 15rem;height: 10.875rem;position: relative;}
.hot-topic-panel .hot-topic-content .topic-banner-wrap a:last-child{margin-right: 1.875rem;}
.hot-topic-panel .hot-topic-content .topic-banner-wrap a img{width: 100%;height: 100%;border-radius: 1.25rem;object-fit: cover;}
.hot-topic-panel .hot-topic-content .topic-banner-wrap a .infoWrap{position: absolute;bottom: 0;border-radius: 0 0 1.25rem 1.25rem;display: flex;align-items: flex-end;column-gap: 1.25rem;background-color: #F7B3A0;padding: 0.63rem 1.125rem 0.63rem 0.875rem;justify-content: space-between;width: 15rem;}
.hot-topic-panel .hot-topic-content .topic-banner-wrap a .infoWrap h4{font-size: 1.5rem;color: #ffffff;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: normal;width: 100%;}
.hot-topic-panel .hot-topic-content .topic-banner-wrap a .infoWrap p{font-size: 1.25rem;color: #ffffff;}
.hot-topic-panel .hot-topic-content .topic-banner-wrap a .infoWrap p:nth-child(1){font-size: 1.5rem;color: #ffffff;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: normal;width: 100%;}
.hot-topic-panel .hot-topic-content .topic-listing{display: flex;flex-wrap: wrap;gap: 1.25rem;}
.hot-topic-panel .hot-topic-content .topic-listing a{width: calc(50% - 0.625rem);height: 3.348rem;background-color: #EBF5FF;border-radius: 0.5rem;display: flex;align-items: center;justify-content:center;padding: 0 1.25rem;column-gap: 1rem;}
.hot-topic-panel .hot-topic-content .topic-listing a .title{font-size: 1.5rem;color: #4AABFF;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center;}
.hot-topic-panel .hot-topic-content .topic-listing a .amount{font-size: 1.25rem;color: #4AABFF;}
.hot-topic-panel .hot-topic-content .topic-listing-wrap{display: flex;flex-direction: column;row-gap: 1.5rem;}
.hot-topic-panel .hot-topic-content .topic-listing-wrap h2{font-size: 2.25rem;font-weight: 900;color: #404040;}
.hot-topic-panel .hot-topic-content .topic-listing-wrap > p{font-size: 2.25rem;font-weight: 900;color: #404040;}

.topic-intro-popup{position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%;text-align: center;display: none;}
.topic-intro-popup.show{display: block;}
.topic-intro-popup .overlay{background: #00000080; position: absolute;width: 100%;height: 100%;z-index: -1;}
.topic-intro-popup .intro-content-wrap{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 2rem;width: 40rem;background-color: #ffffff;padding: 4rem 1.875rem 2.5rem;}
.topic-intro-popup .intro-content-wrap::before{position: absolute;content: "";width: 100%;height: 8.125rem;border-radius: 2rem;background: linear-gradient( 0deg, rgba(56,196,232,0) 0%, rgba(74,171,255,0.4) 100%);top: 0;left: 0;}
.topic-intro-popup .intro-content-wrap > img{width: 7.875rem;height: auto;display: block;position: absolute;left: 50%;transform: translateX(-50%);top: -4.5rem;}
.topic-intro-popup .intro-content-wrap h2{font-size: 2.25rem;font-weight: 900;color: #404040;margin-bottom: 1.875rem;}
.topic-intro-popup .intro-content-wrap > p{font-size: 2.25rem;font-weight: 900;color: #404040;margin-bottom: 1.875rem;}
.topic-intro-popup .intro-content-wrap .intro-content .tab-list{display: flex;align-items: center;gap: 1.25rem;margin-bottom: 1.25rem;justify-content: center;}
.topic-intro-popup .intro-content-wrap .intro-content .tab-list .tab{min-width: 9.75rem;height: 4rem;line-height: 4rem;text-align: center;background-color: #F5FAFF;border-radius: 0.75rem;font-size: 1.75rem;color: #666666;}
.topic-intro-popup .intro-content-wrap .intro-content .content{font-size: 1.75rem;color: #666666;margin-bottom: 2rem;text-align: left;line-height: 3rem;}
.topic-intro-popup .intro-content-wrap .confirmBtn{width: 100%;height: 4.5rem;line-height: 4.5rem;text-align: center;border-radius: 2.25rem;background-color: #4AABFF;font-size: 1.875rem;font-weight: 900;color: #ffffff;}
.topic-intro-popup .intro-content-wrap .close-button{position: absolute;left: 50%;transform: translateX(-50%);bottom: -5rem;}
.topic-intro-popup .intro-content-wrap .close-button i{font-size: 3rem;color: #ffffff;}