.all-topics-panel{margin-top: 10px;}
.all-topics-panel .topicWrap{display: flex;flex-direction: column;row-gap: 30px;}
.all-topics-panel .topicWrap .topic-list{display: flex;flex-wrap: wrap;column-gap: 16px;row-gap: 16px;}
.all-topics-panel .topicWrap .topic-list a{display: flex;flex-direction: column;padding: 24px;background-color: #ffffff;border-radius: 5px;overflow: hidden;width: 288px;flex: 0 0 288px;max-width: 288px;transition: .3s all;}
.all-topics-panel .topicWrap .topic-list a > img{width: 240px;height: 140px;display: block;object-fit: cover;border-radius: 5px;margin-bottom: 12px;}
.all-topics-panel .topicWrap .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;}
.all-topics-panel .topicWrap .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;}
.all-topics-panel .topicWrap .topic-list a .dateWrap{display: flex;align-items: center;justify-content: space-between;margin-bottom: 14px;}
.all-topics-panel .topicWrap .topic-list a .dateWrap p{font-size: 14px;color: #999999;transition: .3s all;}
.all-topics-panel .topicWrap .topic-list a .dateWrap p span{font-weight: bold;color: #4AABFF;transition: .3s all;}
.all-topics-panel .topicWrap .topic-list a .content{background-color: #FAFAFA; border-radius: 5px; padding: 15px 10px; max-height: 63px;transition: .3s all;}
.all-topics-panel .topicWrap .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;}
.all-topics-panel .topicWrap .topic-list a:hover{background-color: #4AABFF;}
.all-topics-panel .topicWrap .topic-list a:hover h4{color: #ffffff;}
.all-topics-panel .topicWrap .topic-list a:hover > p{color: #ffffff;}
.all-topics-panel .topicWrap .topic-list a:hover .dateWrap p{color: #ffffff;}
.all-topics-panel .topicWrap .topic-list a:hover .dateWrap p span{color: #ffffff;}
.all-topics-panel .topicWrap .topic-list a:hover .content p{color: #4AABFF;}

.app-listing-panel .appWrap .pagination{display: flex;align-items: center;column-gap: 6px;margin: 0 auto;}
.app-listing-panel .appWrap .pagination > div.package{width: 50px;height: 36px;border: 1px solid #4AABFF;border-radius: 5px;text-align: center;line-height: 36px;}
.app-listing-panel .appWrap .pagination > div.package > a{color:#4AABFF;display: flex;align-items: center;justify-content: center;width: 50px;height: 36px;}
.app-listing-panel .appWrap .pagination > div.package img{width: 18px;filter: brightness(0) saturate(100%) invert(51%) sepia(100%) saturate(444%) hue-rotate(177deg) brightness(102%) contrast(101%);}
.app-listing-panel .appWrap .pagination > a{width: 28px;height: 36px;border-radius: 4px;display: flex;align-items: center;justify-content: center;font-size: 14px;color: #666666;}
.app-listing-panel .appWrap .pagination > a.current{background-color: #4AABFF;color: #ffffff;}

.all-topics-panel .topicWrap .pagination{display: flex;align-items: center;column-gap: 6px;margin: 30px auto 0;}
.all-topics-panel .topicWrap .pagination > div.package{width: 50px;height: 36px;border: 1px solid #4AABFF;border-radius: 5px;text-align: center;line-height: 36px;background-color: #ffffff;}
.all-topics-panel .topicWrap .pagination > div.package > a{color:#4AABFF;display: flex;align-items: center;justify-content: center;width: 50px;height: 36px;}
.all-topics-panel .topicWrap .pagination > div.package img{width: 18px;filter: brightness(0) saturate(100%) invert(51%) sepia(100%) saturate(444%) hue-rotate(177deg) brightness(102%) contrast(101%);}
.all-topics-panel .topicWrap .pagination > a{width: 28px;height: 36px;border-radius: 4px;display: flex;align-items: center;justify-content: center;font-size: 14px;color: #666666;}
.all-topics-panel .topicWrap .pagination > a.current{background-color: #4AABFF;color: #ffffff;}