.topics-page-content{background-color: #f2f2f2;padding-bottom: 36px;}
.topics-page-content .topic-listing-panel{background-color: #ffffff;border-radius: 6px;padding: 26px 15px 0;margin-top: 20px;}
.topics-page-content .topic-listing-panel .topics-tab-bar{display: flex;column-gap: 60px;padding-bottom: 11px;border-bottom: 1px solid #e2e2e2;margin-bottom: 30px;}
.topics-page-content .topic-listing-panel .topics-tab-bar > div a{cursor: pointer;position: relative;font-size: 18px;color: #333333;padding: 0 16px;}
.topics-page-content .topic-listing-panel .topics-tab-bar > div.active::after a{position: absolute;content: "";width: 100%;height: 2px;bottom: -12px;background-color: #40f6bd;left: 0;}
.topics-page-content .topic-listing-panel .topics-tab-bar > div.active a{font-size: 20px;font-weight: bold;color: #40F6BD;}

.topics-page-content .topic-banner-listing{margin-top: 20px;display: grid;gap: 20px;grid-template-columns: 1fr auto 1fr;grid-template-rows: 1fr 1fr;align-items: center;justify-items: center;}
.topics-page-content .topic-banner-listing a{position: relative;max-height: 160px;min-width: 324px;max-width: 324px;}
.topics-page-content .topic-banner-listing a:nth-child(1) { grid-column: 2; grid-row: 1 / 3;max-width: 512px;max-height: 340px;min-width: 512px;height: 100%;}
.topics-page-content .topic-banner-listing a:nth-child(2) { grid-column: 1; grid-row: 1; }
.topics-page-content .topic-banner-listing a:nth-child(3) { grid-column: 1; grid-row: 2; }
.topics-page-content .topic-banner-listing a:nth-child(4) { grid-column: 3; grid-row: 1; }
.topics-page-content .topic-banner-listing a:nth-child(5) { grid-column: 3; grid-row: 2; }
.topics-page-content .topic-banner-listing a > img{width: 100%;height: 100%;border-radius: 6px;display: block;max-height: 160px;max-width: 324px;object-fit: cover;}
.topics-page-content .topic-banner-listing a:nth-child(1) > img{max-height: 340px;max-width: 512px;}
.topics-page-content .topic-banner-listing a .topic-number{position: absolute;background-color: rgba(0, 0, 0, 0.5);color: #ffffff;font-size: 14px;border-radius: 12px;border: 1px solid #ffffff;top: 10px;right: 11px;padding: 3px 12px;}
.topics-page-content .topic-banner-listing a .detailWrap{position: absolute;left: 12px;bottom: 13px;display: flex;align-items: center;}
.topics-page-content .topic-banner-listing a .detailWrap .topicTitle{font-size: 18px;color: #ffffff;padding-right: 10px;max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.topics-page-content .topic-banner-listing a:nth-child(1) .detailWrap .topicTitle{max-width: 385px;}
.topics-page-content .topic-banner-listing a .detailWrap .dateUpdate{padding-left: 10px;color: #ffffff;font-size: 12px;border-left: 1px solid #ffffff;}
.topics-page-content .topic-banner-listing a .overlay{width: 100%; height: 60%; border-radius: 6px; position: absolute; bottom: 0; left: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);}
.topics-page-content .topic-banner-listing a:hover{border-radius: 6px;position: relative;}
.topics-page-content .topic-banner-listing a:hover img{width: 100%;height: 100%;border-radius: 6px;}
.topics-page-content .topic-banner-listing a:hover .overlay{position: absolute;z-index: 1;width: 100%;height: 100%;border-radius: 6px;background-color: rgba(0, 0, 0, 0.4);top: 0;left: 0;background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);}
.topics-page-content .topic-banner-listing a:hover .detailWrap{display: flex;flex-direction: column;row-gap: 10px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 2;width: 100%;justify-content: center;align-items: center;border-radius: 6px;}
.topics-page-content .topic-banner-listing a:hover .detailWrap .topicTitle{font-size: 20px;color: #ffffff;max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topics-page-content .topic-banner-listing a:hover .detailWrap .dateUpdate{font-size: 14px;color: #ffffff;border-left: none;}
.topics-page-content .topic-banner-listing a:hover .topic-number{display: none;}

.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: 20px 0;border-bottom: 1px solid #ececec;column-gap: 20px;}
.topics-page-content .topic-listing-panel .topics-item-panel:first-child{padding-top: 0;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-left{flex: 0 0 660px;max-width: 660px;display: flex;align-items: center;column-gap: 22px;background-color: #F9FAFA;border-radius: 10px;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-left .imgWrap{position: relative;flex: 0 0 330px;max-width: 330px;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-left .imgWrap img{width: 100%;height: auto;border-radius: 10px;max-height: 174px;object-fit: cover;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-left .imgWrap .topic-number{position: absolute;background-color: rgba(0, 0, 0, 0.5);color: #ffffff;font-size: 14px;border-radius: 12px;border: 1px solid #ffffff;top: 10px;right: 10px;padding: 3px 12px;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-left .topicWrap{display: flex;flex-direction: column;padding-right: 20px;overflow: hidden;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-left .topicWrap h3{font-weight: normal;font-size: 22px;color: #333333;margin-bottom: 7px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-left .topicWrap .dateTimeWrap{display: flex;align-items: center;column-gap: 5px;margin-bottom: 14px;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-left .topicWrap .dateTimeWrap img{width: 14px;height: 14px;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-left .topicWrap .dateTimeWrap p{font-size: 14px;color: #999999;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-left .topicWrap > p{font-size: 16px;color: #333333;display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-right{display: grid;grid-template-columns: repeat(auto-fit, minmax(0, 110px));column-gap: 16px;width: 100%;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-right .topic-game-item{display: flex;flex-direction: column;justify-content: center;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-right .topic-game-item img{width: 100%;height: auto;border-radius: 20px;margin-bottom: 10px;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-right .topic-game-item p.name{color: #333333;font-size: 15px;margin-bottom: 5px;text-align: center;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.topics-page-content .topic-listing-panel .topics-item-panel .topic-right .topic-game-item p.dateUpdate{color: #9A9A9A;font-size: 12px;text-align: center;}

.topics-page-content .topic-listing-panel .pagination{display: flex;justify-content: center;padding-bottom: 40px;background-color: #ffffff;border-radius: 0 0 6px 6px;column-gap: 8px;padding-top: 30px;}
.topics-page-content .topic-listing-panel .pagination a{outline: none;background-color: #F6F6F6;border-radius: 3px;border: 1px solid #EAEAEA;font-size: 14px;color: #666666;padding: 0 14px;height: 40px;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: #72ECB8;color: #ffffff;border:none;}
.topics-page-content .topic-listing-panel .pagination a.page-number{font-weight: bold;min-width: 40px;}

@media (min-width: 751px) and (max-width: 1199px) {
    .topics-page-content .topic-banner-listing a .detailWrap{flex-direction: column;align-items: flex-start;}
    .topics-page-content .topic-banner-listing a .detailWrap .dateUpdate{border-left: none;padding: 0;}
    .topics-page-content .topic-banner-listing a .detailWrap .topicTitle{font-size: 14px;}
    .topics-page-content .topic-banner-listing a:nth-child(1){min-width: 300px;}
    .topics-page-content .topic-banner-listing a{min-width: 180px;}
    .topics-page-content .topic-listing-panel .topics-tab-bar{column-gap: 30px;}
    .topics-page-content .topic-listing-panel .topics-item-panel{flex-direction: column;row-gap: 10px;}
    .topics-page-content .topic-listing-panel .topics-item-panel .topic-left{flex-direction: column;}
    .topics-page-content .topic-listing-panel .topics-item-panel .topic-left, .topics-page-content .topic-listing-panel .topics-item-panel .topic-left .imgWrap{flex: 0 0 100%;max-width: 100%;row-gap: 10px;}
    .topics-page-content .topic-listing-panel .topics-item-panel .topic-left .topicWrap{align-items: center;}
    .topics-page-content .topic-listing-panel .topics-item-panel .topic-left .topicWrap > p{text-align: center;}
    .topics-page-content .topic-listing-panel .topics-item-panel .topic-right{justify-content: center;}
}