body{background-color: #ffffff;}
.grey-bg{height: 386px;position: absolute;top: 103px;width: 100%;left: 0;background-color: #f7f7f7;z-index: -1;}
.topic-detail-page{margin-top: 16px;}
.topic-detail-page .topic-detail-banner{display: flex;justify-content: space-between;padding: 22px 30px;position: relative;}
.topic-detail-page .topic-detail-banner::after{content:"";position:absolute;background-color: #ffffff;border-radius: 10px;height: 306px;width: 100%;top: 0;left: 0;z-index: -1;}
.topic-detail-page .topic-detail-banner .detailWrap{width: 555px;max-width: 555px;flex: 0 0 555px;display: flex;flex-direction: column;}
.topic-detail-page .topic-detail-banner .detailWrap h1{font-size: 30px;font-weight: bold;color: #31242F;margin-bottom: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-detail-page .topic-detail-banner .detailWrap .topic-content{font-size: 15px;color: #666666;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;margin-bottom: 40px;line-height: 24px;}
.topic-detail-page .topic-detail-banner .detailWrap .amountDateWrap{display: flex;align-items: center;column-gap: 12px;margin-bottom: 20px;}
.topic-detail-page .topic-detail-banner .detailWrap .amountDateWrap p{font-size: 14px;color: #BABABA;position: relative;}
.topic-detail-page .topic-detail-banner .detailWrap .amountDateWrap p span{color: #02A1FF;}
.topic-detail-page .topic-detail-banner .detailWrap .amountDateWrap p:first-child::after{content: "";position: absolute;top: 50%;transform: translateY(-50%);right: -6px;width: 1px;height: 75%;background-color: #BABABA;}
.topic-detail-page .topic-detail-banner .detailWrap .tag-list{display: flex;align-items: center;column-gap: 4px;}
.topic-detail-page .topic-detail-banner .detailWrap .tag-list > p{font-size: 14px;font-weight: bold;color: #999999;}
.topic-detail-page .topic-detail-banner .detailWrap .tag-list .tagWrap{display: flex;flex-wrap: wrap;align-items: center;gap: 8px;}
.topic-detail-page .topic-detail-banner .detailWrap .tag-list .tagWrap a{height: 30px;line-height: 30px;border-radius: 10px;background-color: #F6F6F6;padding: 0 12px;font-size: 12px;color: #666666;}
.topic-detail-page .topic-detail-banner .topicBanner{width: 530px;flex: 0 0 530px;max-width: 530px;}
.topic-detail-page .topic-detail-banner .topicBanner img{width: 100%;height: 305px;object-fit: cover;border-radius: 10px;}

.topic-detail-page .app-listing-panel .app-listing{display: flex;flex-wrap: wrap;column-gap: 16px;row-gap: 20px;}
.topic-detail-page .app-listing-panel .app-listing .appWrap{display: flex;align-items: center;padding: 10px;border-radius: 10px;width: 376px;flex: 0 0 376px;max-width: 376px;height: 90px;}
.topic-detail-page .app-listing-panel .app-listing .appWrap:hover{background: #f5fbff;}
.topic-detail-page .app-listing-panel .app-listing .appWrap .imgWrap{width: 70px;height: 70px;position: relative;}
.topic-detail-page .app-listing-panel .app-listing .appWrap .imgWrap img{width: 100%;height: 100%;border-radius: 15px;object-fit: cover;}
.topic-detail-page .app-listing-panel .app-listing .appWrap .imgWrap .appTag{width: 48px;height: 53px;object-fit: cover;position: absolute;top: -1px;left: -1px;border-radius: 0;}
.topic-detail-page .app-listing-panel .app-listing .appWrap .appDetail{display: flex;flex-direction: column;overflow: hidden;width: 180px;margin-left: 10px;}
.topic-detail-page .app-listing-panel .app-listing .appWrap .appDetail h4{font-size: 16px;color: #000000;margin-bottom: 4px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: 400;}
.topic-detail-page .app-listing-panel .app-listing .appWrap .appDetail .typeWrap{display: flex;align-items: center;column-gap: 16px;margin-bottom: 6px;}
.topic-detail-page .app-listing-panel .app-listing .appWrap .appDetail .typeWrap p{font-size: 12px;color: #BABABA;position: relative;}
.topic-detail-page .app-listing-panel .app-listing .appWrap .appDetail .typeWrap p:first-child::after{content: "";position: absolute;top: 50%;right: -8px;transform: translateY(-50%);width: 1px;height: 75%;background-color: #BABABA;}
.topic-detail-page .app-listing-panel .app-listing .appWrap .appDetail .dateUpdate{font-size: 12px;color: #BABABA;}
.topic-detail-page .app-listing-panel .app-listing .appWrap .viewBtn{margin-left: auto;width: 72px;height: 28px;text-align: center;line-height: 26px;border-radius: 14px;border: 1px solid #0872FF4D;font-size: 14px;color: #0872FF;}
.topic-detail-page .app-listing-panel .app-listing .appWrap .viewBtn:hover{background: linear-gradient( 90deg, rgb(2,162,255) 0%, rgb(9,115,255) 100%);color: #ffffff;}

.topic-detail-page .topic-suggest-panel{margin-top: 24px;}
.topic-suggest-panel .titleWrap h2{font-size: 20px;}
.topic-detail-page .topic-suggest-panel .topic-list{display: flex;flex-wrap: wrap;column-gap: 20px;row-gap: 22px;margin-top: 18px;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap{width: 284px;flex: 0 0 284px;max-width: 284px;position: relative;border-radius: 10px;overflow: hidden;background-color: #F7F7F7;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap .topic-img-wrap{width: 100%;height: 176px;position: relative;border-radius: 10px;overflow: hidden;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap .topic-img-wrap .imgWrap{width: 284px;height: 176px;border-radius: 10px;overflow: hidden;position: absolute;left: 0;top: 0;background-color: #000000;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap .topic-img-wrap .imgWrap img{width: 100%;height: 176px;object-fit: cover;border-radius: 10px;opacity: 0.8;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap .topic-img-wrap .topic-apps-list{position: absolute;bottom: 20px;left: 30px;display: flex;align-items: center;column-gap: 14px;z-index: 1;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap .topic-img-wrap .topic-apps-list a{width: 45px;height: 45px;flex: 0 0 45px;max-width: 45px;background-color: #ffffff4d;border-radius: 10px;display: flex;align-items: center;justify-content: center;color: #ffffff;font-size: 14px;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap .topic-img-wrap .topic-apps-list a img{width: 43px;height: 43px;border-radius: 10px;object-fit: cover;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap .topic-title{padding: 6px 16px 10px;display: flex;align-items: center;justify-content: space-between;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap .topic-title p{font-size: 16px;color: #000000;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap .topic-title a{opacity: 0;pointer-events: none;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap .topic-title a img{width: 22px;height: 8px;object-fit: cover;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap .topic-content-wrap{width: calc(100% - 32px); height: 176px; position: relative; overflow: hidden; background-color: #ffffff; padding: 16px 0; border-bottom: 2px dashed #02A1FF33; display: none; margin: 0 auto;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap .topic-content-wrap .topic-content{font-size: 14px;color: #010101;margin-bottom: 10px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;line-height: 24px;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap .topic-content-wrap .amountDateWrap{display: flex;align-items: center;column-gap: 10px;position: relative;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap .topic-content-wrap .amountDateWrap p{font-size: 12px;color: #BABABA;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap .topic-content-wrap .amountDateWrap p span{color: #02A1FF;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap:hover .topic-img-wrap{display: none;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap:hover .topic-content-wrap{display: block;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap:hover .topic-title p{font-weight: bold;color: #02A1FF;}
.topic-detail-page .topic-suggest-panel .topic-list .topicWrap:hover .topic-title a{opacity: 1;pointer-events: auto;}