.topics-page-content{background-color: #f2f2f2;padding-bottom: 2.14rem;}

.topics-page-content .topic-banner-listing{margin-top: 1.71rem;display: flex;column-gap: 1.5rem;overflow-x: scroll;}
.topics-page-content .topic-banner-listing::-webkit-scrollbar{height: 0;}
.topics-page-content .topic-banner-listing a{position: relative;max-height: 11.79rem;min-width: 23.86rem;max-width: 23.86rem;border-radius: 0.71rem;overflow: hidden;}
.topics-page-content .topic-banner-listing a > img{width: 100%;height: 100%;border-radius: 0.71rem;display: block;object-fit: cover;}
.topics-page-content .topic-banner-listing a img{width: 100%;height: 100%;}
.topics-page-content .topic-banner-listing a .overlay{position: absolute;z-index: 1;width: 100%;height: 100%;border-radius: 0.71rem;background-color: rgba(0, 0, 0, 0.4);top: 0;left: 0;}
.topics-page-content .topic-banner-listing a .detailWrap{display: flex;flex-direction: column;row-gap: 0.5rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 2;width: 100%;justify-content: center;align-items: center;}
.topics-page-content .topic-banner-listing a .detailWrap .topicTitle{font-size: 1.71rem;color: #ffffff;max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topics-page-content .topic-banner-listing a .detailWrap .dateUpdate{font-size: 1.29rem;color: #ffffff;}
.topics-page-content .topic-banner-listing a .special-pick{position: absolute;top: -2px;left: -2px;width: 5.5rem;clip-path: polygon(50% 0%, 100% 0, 45% 35%, 0 100%, 0 0);z-index: 2;}
.topics-page-content .topic-banner-listing a .special-pick img{width: 100%;height: auto;}
.topics-page-content .topic-banner-listing a .special-pick p{text-align: center; font-size: 1.29rem; color: #ffffff; font-weight: bold; position: absolute; top: 26%; left: 30%; transform: translate(-50%, -50%) rotate(-50deg);}

.topics-page-content .topic-listing-panel{background-color: #ffffff;border-radius: 0.71rem;padding: 1.93rem 0.71rem 0;margin-top: 2.14rem;}
.topics-page-content .topic-listing-panel .topics-tab-bar{display: flex;padding-bottom: 1.43rem;border-bottom: 1px solid #e2e2e2;column-gap: 3.71rem;}
.topics-page-content .topic-listing-panel .topics-tab-bar > div{cursor: pointer;position: relative;font-size: 2rem;color: #666666;padding: 0 1.14rem;text-align: center;}
.topics-page-content .topic-listing-panel .topics-tab-bar > div.active::after{position: absolute;content: "";width: 100%;height: 2px;bottom: -1.5rem;background-color: #40f6bd;left: 0;}
.topics-page-content .topic-listing-panel .topics-tab-bar > div.active{font-size: 2rem;font-weight: bold;color: #47F6BF;}
.topics-page-content .topic-listing-panel .topics-tab-bar > div a{color: #666;}
.topics-page-content .topic-listing-panel .topics-tab-bar > div.active a{color: #40f6bd;}
.topics-page-content .topic-listing-panel .topics-list{display: flex;flex-direction: column;}
.topics-page-content .topic-listing-panel .topics-item-panel{display: flex;align-items: center;justify-content: space-between;padding: 1.43rem 0.71rem;border-bottom: 1px solid #ececec;column-gap: 1.43rem;}

.topics-page-content .topic-listing-panel .topics-item-panel .topic-wrap{background-color: #f9fafa;border-radius: 0.71rem;display: flex;align-items: center;column-gap: 1.43rem;width: 100%;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-wrap .imgWrap{position: relative;flex: 0 0 23.57rem;max-width: 23.57rem;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-wrap .imgWrap img{width: 100%;height: auto;border-radius: 0.71rem;max-height: 12.43rem;object-fit: cover;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-wrap .imgWrap .topic-number{position: absolute;background-color: rgba(0, 0, 0, 0.5);color: #ffffff;font-size: 1.29rem;border-radius: 0.93rem;border: 1px solid #ffffff;top: 0.71rem;right: 0.71rem;padding: 0.21rem 1.21rem;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-wrap .topicWrap{display: flex;flex-direction: column;overflow: hidden;width: 100%;margin-right: 2rem;position: relative;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-wrap .topicWrap h3{font-weight: normal;font-size: 1.71rem;color: #333333;margin-bottom: 0.5rem;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-wrap .topicWrap .dateTimeWrap{display: flex;align-items: center;column-gap: 0.5rem;margin-bottom: 1.29rem;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-wrap .topicWrap .dateTimeWrap img{width: 1.29rem;height: 1.29rem;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-wrap .topicWrap .dateTimeWrap p{font-size: 1.29rem;color: #999999;}

.topics-page-content .topic-listing-panel .topics-item-panel .topic-game{display: flex;column-gap: 1.7rem;width: 100%;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-game .topic-game-item{flex: 0 0 4.64rem;max-width: 4.64rem;position: relative;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-game .topic-game-item img{width: 100%;height: auto;border-radius: 1rem;display: block;position: relative;z-index: 1;}
.topics-page-content .topic-listing-panel .topics-item-panel .more-block{height: 4.64rem; width: 4.64rem; background-color: #E1E1E1; border-radius: 1rem;position: absolute;bottom: 0;right: 0;color: #999999;font-size: 1.29rem;}
.topics-page-content .topic-listing-panel .topics-item-panel .more-block span{position: absolute; right: 0; width: 55%; height: 100%; display: flex ; align-items: center; text-align: center;}

.topics-page-content .topic-listing-panel .pagination{display: flex;justify-content: center;padding-bottom: 3rem;background-color: #ffffff;border-radius: 0 0 0.71rem 0.71rem;column-gap: 1.93rem;padding-top: 2.14rem;}
.topics-page-content .topic-listing-panel .pagination a{outline: none;background-color: #ECEBEE;border-radius: 0.43rem;border: none;font-size: 1.86rem;color: #94979B;padding: 0 1.29rem;height: 4.14rem;display: flex;align-items: center;justify-content: center;box-sizing: border-box;cursor: pointer;}
.topics-page-content .topic-listing-panel .pagination a.current{background-color: #42EAB2;color: #ffffff;border:none;}
.topics-page-content .topic-listing-panel .pagination a.page-number{font-weight: normal;min-width: 4.14rem;}
.topics-page-content .topic-listing-panel .pagination a.pagination-button{font-family: cursive;min-width: 4.14rem;}