body{background-color: #f7f7f7;}
.topic-content-page{margin-top: 16px;}
.topic-content-page .hot-topic-panel{display: flex;align-items: center;column-gap: 20px;}
.topic-content-page .hot-topic-panel .hot-topic-wrap{width: 387px;height: 346px;position: relative;background-color: #000000;border-radius: 10px;transition: width .3s ease;}
.topic-content-page .hot-topic-panel .hot-topic-wrap .hotIcon{width: 76px;height: 24px;object-fit: cover;position: absolute;top: 20px;left: 30px;z-index: 1;}
.topic-content-page .hot-topic-panel .hot-topic-wrap .topicBanner{width: 100%;height: 100%;}
.topic-content-page .hot-topic-panel .hot-topic-wrap .topicBanner img{width: 100%;height: 100%;object-fit: cover;border-radius: 10px;position: absolute;left: 0;top: 0;object-position: right;opacity: 0.8;}
.topic-content-page .hot-topic-panel .hot-topic-wrap .topicDetail{position: absolute;top: 80px;left:28px;max-width: 266px;display: flex;flex-direction: column;row-gap: 10px;z-index: 1;transition: max-width .3s ease;}
.topic-content-page .hot-topic-panel .hot-topic-wrap .topicDetail h4{font-size: 26px;font-weight: bold;color: #ffffff;}
.topic-content-page .hot-topic-panel .hot-topic-wrap .topicDetail p{font-size: 14px;color: #ffffffbf;}
.topic-content-page .hot-topic-panel .hot-topic-wrap .topic-apps-list{position: absolute;bottom: 20px;left: 30px;display: flex;align-items: center;column-gap: 13px;z-index: 1;}
.topic-content-page .hot-topic-panel .hot-topic-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-content-page .hot-topic-panel .hot-topic-wrap .topic-apps-list a img{width: 43px;height: 43px;border-radius: 10px;object-fit: cover;}
.topic-content-page .hot-topic-panel .hot-topic-wrap.active{width: 793px;}
.topic-content-page .hot-topic-panel .hot-topic-wrap.active .topicDetail{max-width: 452px;}

.topic-content-page .all-topic-panel{margin-top: 26px;}
.topic-content-page .all-topic-panel h2{font-size: 20px;font-weight: bold;color: #31242F;margin-bottom: 18px;}
.topic-content-page .all-topic-panel .all-topic-list{display: flex;flex-wrap: wrap;column-gap: 20px;row-gap: 22px;}
.topic-content-page .all-topic-panel .all-topic-list .topicWrap{width: 284px;flex: 0 0 284px;max-width: 284px;position: relative;border-radius: 10px;overflow: hidden;background-color: #ffffff;}
.topic-content-page .all-topic-panel .all-topic-list .topicWrap .topic-img-wrap{width: 100%;height: 176px;position: relative;border-radius: 10px;overflow: hidden;}
.topic-content-page .all-topic-panel .all-topic-list .topicWrap .topic-img-wrap .imgWrap{width: 284px;height: 176px;border-radius: 10px;overflow: hidden;position: absolute;left: 0;top: 0;}
.topic-content-page .all-topic-panel .all-topic-list .topicWrap .topic-img-wrap .imgWrap img{width: 100%;height: 176px;object-fit: cover;border-radius: 10px;}
.topic-content-page .all-topic-panel .all-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-content-page .all-topic-panel .all-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-content-page .all-topic-panel .all-topic-list .topicWrap .topic-img-wrap .topic-apps-list a img{width: 43px;height: 43px;border-radius: 10px;object-fit: cover;}
.topic-content-page .all-topic-panel .all-topic-list .topicWrap .topic-title{padding: 6px 16px 10px;display: flex;align-items: center;justify-content: space-between;}
.topic-content-page .all-topic-panel .all-topic-list .topicWrap .topic-title p{font-size: 16px;color: #000000;}
.topic-content-page .all-topic-panel .all-topic-list .topicWrap .topic-title a{opacity: 0;pointer-events: none;}
.topic-content-page .all-topic-panel .all-topic-list .topicWrap .topic-title a img{width: 22px;height: 8px;object-fit: cover;}
.topic-content-page .all-topic-panel .all-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-content-page .all-topic-panel .all-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-content-page .all-topic-panel .all-topic-list .topicWrap .topic-content-wrap .amountDateWrap{display: flex;align-items: center;column-gap: 10px;position: relative;}
.topic-content-page .all-topic-panel .all-topic-list .topicWrap .topic-content-wrap .amountDateWrap p{font-size: 12px;color: #BABABA;}
.topic-content-page .all-topic-panel .all-topic-list .topicWrap .topic-content-wrap .amountDateWrap p span{color: #02A1FF;}
.topic-content-page .all-topic-panel .all-topic-list .topicWrap:hover .topic-img-wrap{display: none;}
.topic-content-page .all-topic-panel .all-topic-list .topicWrap:hover .topic-content-wrap{display: block;}
.topic-content-page .all-topic-panel .all-topic-list .topicWrap:hover .topic-title p{font-weight: bold;color: #02A1FF;}
.topic-content-page .all-topic-panel .all-topic-list .topicWrap:hover .topic-title a{opacity: 1;pointer-events: auto;}

.pagination a{background-color: #ffffff;}

.topic-content-page .topic-tab-panel{margin-top: 30px;background-color: #ffffff;border-radius: 10px;padding: 20px;}
.topic-content-page .topic-tab-panel .title{display: flex;align-items: center;column-gap: 40px;margin-bottom: 16px;}
.topic-content-page .topic-tab-panel .title a{font-size: 20px;color: #A5A5A5;position: relative;}
.topic-content-page .topic-tab-panel .title a.active{font-weight: bold;background: linear-gradient(to right, #00c6ff, #0072ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.topic-content-page .topic-tab-panel .title a:first-child::after{content: "";position: absolute;right: -20px;top: 50%;transform: translateY(-50%) rotate(20deg);width: 2px;height: 75%;background-color: #A5A5A5;}
.topic-content-page .topic-tab-panel .topic-tab-list{display: flex;flex-wrap: wrap;column-gap: 30px;row-gap: 16px;align-items: center;}
.topic-content-page .topic-tab-panel .topic-tab-list a{font-size: 16px;color: #000000;}
.topic-content-page .topic-tab-panel .topic-tab-list a.bold{font-size: 20px;font-weight: bold;}