.topic-content-page .topic-top-wrap{padding: 1.875rem;border-radius: 1.375rem;background-color: #ffffff;box-shadow: 0px 2px 2px 0px #0EC9A308;display: flex;flex-direction: column;row-gap: 1.875rem;position: relative;z-index: 1;margin-top: 1.25rem;}
.topic-content-page .topic-top-wrap .topic-slider{width: 100%;height: 20.625rem;position: relative;overflow: hidden;padding-right: 0.5rem;padding-left: 0.5rem;}
.topic-content-page .topic-top-wrap .topic-slider .swiper-container{width: 100%;height: 100%;}
.topic-content-page .topic-top-wrap .topic-slider .swiper-slide{width: 100%;height: 100%;position: relative;z-index: 1;}
.topic-content-page .topic-top-wrap .topic-slider .swiper-slide .amount{position: absolute; right: -0.31rem; top: 1rem; height: 2.125rem; width: fit-content; padding: 0 0.75rem 0 1.25rem; text-align: center; background: linear-gradient(94.1deg, #44F4C6 1.62%, #3DD9FF 83.19%); font-size: 1.375rem; font-weight: bold; color: #FFFFFF; clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 10% 50%);}
.topic-content-page .topic-top-wrap .topic-slider .swiper-slide::before { content: ""; position: absolute; top: 3.05rem; right: -0.3rem; width: 0.4rem; height: 0.4rem; background-color: #4BBCAE; clip-path: polygon(0 0, 0% 100%, 100% 0); z-index: -1;}
.topic-content-page .topic-top-wrap .topic-slider .swiper-slide img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 1.25rem;}
.topic-content-page .topic-top-wrap .topic-slider .swiper-slide .overlay-text{position: absolute;bottom: 0;left: 0;width: 100%;height: 3.75rem;line-height: 3.75rem;padding: 0 1.25rem;border-radius: 0 0 1.25rem 1.25rem;background-color: #33333366;font-size: 1.625rem;color: #FFFFFF;font-weight: bold;}
.topic-content-page .topic-top-wrap .topic-slider .swiper-slide-count{position: absolute;right: 1rem;bottom: 0.875rem;z-index: 2;}
.topic-content-page .topic-top-wrap .topic-slider .swiper-slide-count {font-size: 1.5rem;color: #FFFFFF;font-style: oblique;}
.topic-content-page .topic-top-wrap .topic-slider .swiper-slide-count span{font-size: 1.875rem;color: #27F2B2;}
.topic-content-page .topic-top-wrap .topic-tag-list{display: flex;flex-wrap: wrap;column-gap: 1.25rem;row-gap: 1.25rem;}
.topic-content-page .topic-top-wrap .topic-tag-list a{width: fit-content;padding: 0 1.125rem;height: 3.125rem;line-height: 3.125rem;border-radius: 2.75rem;text-align: center;font-size: 1.5rem;font-weight: 500;}
.topic-content-page .topic-top-wrap .topic-tag-list a:nth-child(6n + 1){background-color: #DEFFE4;color: #1BE900;}
.topic-content-page .topic-top-wrap .topic-tag-list a:nth-child(6n + 2){background-color: #FFEAE5;color: #FF793F;}
.topic-content-page .topic-top-wrap .topic-tag-list a:nth-child(6n + 3){background-color: #E4EFFF;color: #4690FF;}
.topic-content-page .topic-top-wrap .topic-tag-list a:nth-child(6n + 4){background-color: #FFF3D0;color: #F88501;}
.topic-content-page .topic-top-wrap .topic-tag-list a:nth-child(6n + 5){background-color: #F1EDFF;color: #9F46FF;}
.topic-content-page .topic-top-wrap .topic-tag-list a:nth-child(6n + 6){background-color: #E6FEFF;color: #21D8DD;}

.topic-content-page .topic-listing-panel .topic-listing{margin-top: 1.875rem;display: flex;flex-direction: column;row-gap: 1.875rem;}
.topic-content-page .topic-listing-panel .topic-listing > a{position: relative;width: 100%;border-radius: 1.875rem;display: flex;flex-direction: column;background-color: #F7F7FB;z-index: 1;}
.topic-content-page .topic-listing-panel .topic-listing > a > img{width: 100%;height: 18.125rem;object-fit: cover;object-position: center;border-radius: 1.875rem 1.875rem 0 0;}
.topic-content-page .topic-listing-panel .topic-listing > a .amount{position: absolute; right: -0.31rem; top: 1rem; height: 2.125rem; width: fit-content; padding: 0 0.75rem 0 1.25rem; text-align: center; background: linear-gradient(94.1deg, #44F4C6 1.62%, #3DD9FF 83.19%); font-size: 1.375rem; font-weight: bold; color: #FFFFFF; clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 10% 50%);}
.topic-content-page .topic-listing-panel .topic-listing > a::before { content: ""; position: absolute; top: 3.05rem; right: -0.3rem; width: 0.4rem; height: 0.4rem; background-color: #4BBCAE; clip-path: polygon(0 0, 0% 100%, 100% 0); z-index: -1;}
.topic-content-page .topic-listing-panel .topic-listing > a .detailWrap{display: flex;flex-direction: column;row-gap: 0.875rem;padding: 1.25rem;}
.topic-content-page .topic-listing-panel .topic-listing > a .detailWrap .topWrap{display: flex;align-items: center;justify-content: space-between;}
.topic-content-page .topic-listing-panel .topic-listing > a .detailWrap .topWrap .topicName{font-size: 1.75rem;font-weight: bold;color: #333333;max-width: 21.875rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-content-page .topic-listing-panel .topic-listing > a .detailWrap .topWrap .dateUpdate{font-size: 1.375rem;color: #949494;}
.topic-content-page .topic-listing-panel .topic-listing > a .detailWrap .content{font-size: 1.5rem;color: #949494;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-content-page .topic-listing-panel .pagination{margin-top: 2.5rem;}