.topic-info-panel{margin-top: 10px;}
.topic-info-panel .topic-hero-panel{background-color: #ffffff;border-radius: 5px;padding: 24px;}
.topic-info-panel .topic-hero-panel .banner-list{display: flex;align-items: center;justify-content: space-between;}
.topic-info-panel .topic-hero-panel .banner-list a{display: flex;flex-direction: column;row-gap: 12px;overflow: hidden;width: 272px;max-width: 272px;flex: 0 0 272px;}
.topic-info-panel .topic-hero-panel .banner-list a .imgWrap{width: 100%;height: 100px;overflow: hidden;border-radius: 5px;}
.topic-info-panel .topic-hero-panel .banner-list a .imgWrap img{width: 100%;height: 100%;object-fit: cover;display: block;border-radius: 5px;transition: transform .3s ease;}
.topic-info-panel .topic-hero-panel .banner-list a p{font-size: 16px;font-weight: bold;color: #404040;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;transition: .3s all;}
.topic-info-panel .topic-hero-panel .banner-list a:hover .imgWrap img{transform: scale(1.1);}
.topic-info-panel .topic-hero-panel .banner-list a:hover p{color: #4AABFF;}

.topic-banner-panel{margin-top: 24px;display: flex;align-items: center;column-gap: 20px;background-color: #ffffff;border-radius: 5px;padding: 24px;}
.topic-banner-panel .imgWrap{width: 344px;flex: 0 0 344px;max-width: 344px;height: 200px;overflow: hidden;border-radius: 5px;}
.topic-banner-panel .imgWrap img{width: 100%;height: 100%;object-fit: cover;display: block;border-radius: 5px;transition: transform .3s ease;}
.topic-banner-panel .detailWrap{display: flex;flex-direction: column;overflow: hidden;}
.topic-banner-panel .detailWrap h1{font-size: 24px;font-weight: bold;color: #404040;margin-bottom: 10px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;transition: .3s all;}
.topic-banner-panel .detailWrap .dateAmountWrap{display: flex;align-items: center;justify-content: space-between;margin-bottom: 18px;}
.topic-banner-panel .detailWrap .dateAmountWrap p{font-size: 16px;color: #999999;}
.topic-banner-panel .detailWrap .dateAmountWrap p span{font-weight: bold;color: #4AABFF;}
.topic-banner-panel .detailWrap .content{background-color: #FAFAFA;border-radius: 5px;padding: 16px;overflow-y: auto;max-height: 100px;}
.topic-banner-panel .detailWrap .content > div{font-size: 16px;color: #999999;overflow-y: auto;max-height:68px;}
.topic-banner-panel .detailWrap .content p{font-size: 16px;color: #999999;}
.topic-banner-panel:hover .imgWrap img{transform: scale(1.1);}
.topic-banner-panel:hover .detailWrap h2{color: #4AABFF;}

.editor-recommend-panel{margin-top: 24px;background-color: #ffffff;border-radius: 5px;padding: 20px 24px;display: flex;flex-direction: column;row-gap: 16px;}
.editor-recommend-panel .editor-title{display: flex;flex-direction: column;position: relative;text-align: center;}
.editor-recommend-panel .editor-title h2{font-size: 24px;font-weight: bold;color: #404040;text-align: center;}
.editor-recommend-panel .editor-title strong{display:block;font-size: 24px;font-weight: bold;color: #404040;text-align: center;}
.editor-recommend-panel .editor-title p{font-size: 16px;color: #999999;text-align: center;}
.editor-recommend-panel .editor-title::before{position: absolute;content: "";top: 50%;transform: translateY(-50%);left: 0;border-top: 1px dashed #DCDCDC;width: 43%;}
.editor-recommend-panel .editor-title::after{position: absolute;content: "";top: 50%;transform: translateY(-50%);right: 0;border-top: 1px dashed #DCDCDC;width: 43%;}
.editor-recommend-panel .app-list{display: flex;align-items: center;justify-content: flex-start;flex-flow: wrap;gap: 20px;}
.editor-recommend-panel .app-list a{display: flex;align-items: center;column-gap: 12px;padding: 15px;background-color: #F3F3F3;border-radius: 5px;width: 370px;flex: 0 0 370px;max-width: 370px;}
.editor-recommend-panel .app-list a img{width: 100px;height: 100px;flex: 0 0 100px;max-width: 100px;border-radius: 24px;transition: transform .3s ease;}
.editor-recommend-panel .app-list a .detailWrap{overflow: hidden;display: flex;flex-direction: column;}
.editor-recommend-panel .app-list a .detailWrap h4{font-size: 18px;font-weight: bold;color: #404040;margin-bottom: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.editor-recommend-panel .app-list a .detailWrap p:nth-child(1){font-size: 18px;font-weight: bold;color: #404040;margin-bottom: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.editor-recommend-panel .app-list a .detailWrap > p:nth-child(2){display: flex;align-items: center;column-gap: 5px;margin-bottom: 8px;font-size: 14px;color: #999999;}


.editor-recommend-panel .app-list a .detailWrap .middleWrap{display: flex;align-items: center;column-gap: 18px;margin-bottom: 8px;}
.editor-recommend-panel .app-list a .detailWrap .middleWrap p{font-size: 14px;color: #999999;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.editor-recommend-panel .app-list a .detailWrap .content{font-size: 14px;color: #999999;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.editor-recommend-panel .app-list a:hover .detailWrap h4{color:#4AABFF}
.editor-recommend-panel .app-list a:hover .detailWrap p:nth-child(1){color:#4AABFF}
.editor-recommend-panel .app-list a:hover  img{transform: scale(1.1);}

.loding_btn{display:block;height: 32px;line-height: 32px;background-color:#4AABFF;color: #fff;white-space: nowrap;text-align: center;font-size: 14px;border: none;border-radius: 2px;cursor: pointer;width: 95px;margin: 0 auto;margin-bottom: 10px;}

.app-list-panel{background-color: #ffffff;border-radius: 5px;padding: 24px;margin-top: 24px;}
.app-list-panel .app-listing{display: flex;flex-wrap: wrap;column-gap: 16px;row-gap: 16px;}
.app-list-panel .app-listing a{width: 178px;flex: 0 0 178px;max-width: 178px;padding: 24px;background-color: #FFFFFF;border: 1px solid #EEEEEE;border-radius: 5px;display: flex;flex-direction: column;transition: background-color .3s ease;}
.app-list-panel .app-listing a .imgWrap{margin: 0 auto 8px;position: relative;width: 100px;height: 100px;}
.app-list-panel .app-listing a .imgWrap > img{width: 100px;height: 100px;object-fit: cover;display: block;border-radius: 24px;position: relative;}
.app-list-panel .app-listing a h4{font-size: 16px;color: #404040;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: normal;transition: .3s all;}
.app-list-panel .app-listing a .viewNowBtn{width: 100px;height: 36px;line-height: 36px;text-align: center;background-color: #ffffff;border: 1px solid #CCCCCC;font-size: 14px;color: #999999;border-radius: 18px;margin: 10px auto 0;}
.app-list-panel .app-listing a .detailWrap{display: none;flex-direction: column;row-gap: 5px;padding-left: 5px;margin-top: 8px;}
.app-list-panel .app-listing a .detailWrap p{font-size: 14px;color: #ffffff;}
.app-list-panel .app-listing a:hover .detailWrap{display: flex;}
.app-list-panel .app-listing a:hover .viewNowBtn{display: none;}
.app-list-panel .app-listing a:hover{ background-color: #4AABFF;border: none;}
.app-list-panel .app-listing a:hover h4{color: #ffffff;font-weight: bold;}
.app-list-panel .app-listing a:hover .imgWrap::before{position: absolute;content: "";width: 104px;height: 104px;background-color: #ffffff;border-radius: 24px;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.app-list-panel .app-listing a:hover{padding: 24px 24px 21px;}

.hot-topic-panel{margin-top: 24px;background-color: #ffffff;border-radius: 5px;padding: 20px 24px 24px;display: flex;flex-direction: column;row-gap: 20px;}
.hot-topic-panel h2{font-size: 24px;font-weight: bold;color: #404040;}
.hot-topic-panel strong.infoTit{font-size: 24px;font-weight: bold;color: #404040;display: block;}
.hot-topic-panel .hot-topic-list{display: flex;flex-wrap: wrap;column-gap: 13px;}
.hot-topic-panel .hot-topic-list a{display: flex;flex-direction: column;padding: 20px 20px 24px;background-color: #ffffff;border-radius: 5px;overflow: hidden;width: 278px;flex: 0 0 278px;max-width: 278px;transition: .3s all;border: 1px solid #EEEEEE;}
.hot-topic-panel .hot-topic-list a > img{width: 240px;height: 140px;display: block;object-fit: cover;border-radius: 5px;margin-bottom: 12px;}
.hot-topic-panel .hot-topic-list a h4{font-size: 18px;color: #404040;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;margin-bottom: 6px;font-weight: normal;transition: .3s all;}
.hot-topic-panel .hot-topic-list a > p{font-size: 18px;color: #404040;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;margin-bottom: 6px;font-weight: normal;transition: .3s all;}
.hot-topic-panel .hot-topic-list a .dateWrap{display: flex;align-items: center;justify-content: space-between;margin-bottom: 14px;}
.hot-topic-panel .hot-topic-list a .dateWrap p{font-size: 14px;color: #999999;transition: .3s all;}
.hot-topic-panel .hot-topic-list a .dateWrap p span{font-weight: bold;color: #4AABFF;transition: .3s all;}
.hot-topic-panel .hot-topic-list a .content{background-color: #FAFAFA; border-radius: 5px; padding: 15px 10px; max-height: 63px;transition: .3s all;}
.hot-topic-panel .hot-topic-list a .content p{font-size: 14px; color: #999999; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;transition: .3s all;}
.hot-topic-panel .hot-topic-list a:hover{background-color: #4AABFF;border: none;}
.hot-topic-panel .hot-topic-list a:hover h4{color: #ffffff;}
.hot-topic-panel .hot-topic-list a:hover > p{color: #ffffff;}
.hot-topic-panel .hot-topic-list a:hover .dateWrap p{color: #ffffff;}
.hot-topic-panel .hot-topic-list a:hover .dateWrap p span{color: #ffffff;}
.hot-topic-panel .hot-topic-list a:hover .content p{color: #4AABFF;}

.related-topic-panel{background-color: #ffffff;border-radius: 5px;padding: 20px 24px 24px;display: flex;flex-direction: column;row-gap: 20px;margin-top: 24px;}
.related-topic-panel h2{font-size: 24px;font-weight: bold;color: #404040;}
.related-topic-panel strong.infoTit{font-size: 24px;font-weight: bold;color: #404040;display: block;}
.related-topic-panel .related-topic-list{display: flex;flex-wrap: wrap;column-gap: 38px;row-gap: 20px;}
.related-topic-panel .related-topic-list a{display: flex;align-items: center;justify-content: center;column-gap: 3px;min-width: 200px;height: 40px;border-radius: 20px;background-color: #F3F3F3;font-size: 16px;color: #404040;transition: .3s all;}
.related-topic-panel .related-topic-list a img{width: 16px;height: auto;display: block;}
.related-topic-panel .related-topic-list a:hover{background-color: #4AABFF;color: #ffffff;}