.topics-page-content .greyBg{max-height: 382px;position: absolute;top: 0;background-color: #ecfef8;height: 382px;width: 100%;z-index: -1;}
.topics-page-content .top-topic-banner{margin-top: 23px;display: flex;justify-content: space-between;}
.topics-page-content .top-topic-banner .banner-left{display: flex;flex-direction: column;flex: 0 0 592px;max-width: 592px;}
.topics-page-content .top-topic-banner .banner-left h1{font-size: 30px;font-weight: bold;color: #333333;margin-bottom: 10px;}
.topics-page-content .top-topic-banner .banner-left p.content{font-size: 16px;color: #333333;margin-bottom: 26px;}
.topics-page-content .top-topic-banner .banner-left .dateUpdate{display: flex;align-items: center;column-gap: 5px;margin-bottom: 25px;}
.topics-page-content .top-topic-banner .banner-left .dateUpdate img{width: 14px;height: 14px;}
.topics-page-content .top-topic-banner .banner-left .dateUpdate p{font-size: 14px;color: #999999;}
.topics-page-content .top-topic-banner .banner-left .category-list{display: flex;flex-wrap: wrap;gap: 11px;margin-bottom: 35px;}
.topics-page-content .top-topic-banner .banner-left .category-list a{background-color: #9999991A;border-radius: 4px;font-size: 14px;color: #999999;height: 24px;padding: 0 12px;text-align: center;line-height: 24px;}
.topics-page-content .top-topic-banner .banner-right{position: relative;max-width: 428px;flex: 0 0 428px;}
.topics-page-content .top-topic-banner .banner-right .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 .top-topic-banner .banner-right img{width: 100%;height: auto;display: block;border-radius: 10px;max-height: 225px;object-fit: cover;}

.topics-page-content .all-game-listing{margin-top: 17px;}
.topics-page-content .all-game-listing > h2{font-size: 24px;color: #1C1E2C;font-weight: normal;margin-bottom: 18px;}
.topics-page-content .game-list-panel{display: grid;grid-template-columns: repeat(auto-fit, minmax(0, 386px));column-gap: 10px;row-gap: 20px;}
.topics-page-content .game-list-panel .game-item{display: flex;align-items: center;background-color: #FFFAF8;border-radius: 6px;padding: 10px 22px;cursor: pointer;position: relative;transition: .3s all;}
.topics-page-content .game-list-panel .game-item .img-block{width: 70px;height: 70px;border-radius: 15px;margin-right: 10px;flex: 0 0 70px;}
.topics-page-content .game-list-panel .game-item .img-block img{width: 100%;height: 100%;border-radius: 15px;}
.topics-page-content .game-list-panel .game-item .game-detail{display: flex;flex-direction: column;overflow: hidden;margin-right: 5px;}
.topics-page-content .game-list-panel .game-item .game-detail h3{font-weight: normal;font-size: 16px;color: #000000;margin-bottom: 3px;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topics-page-content .game-list-panel .game-item .game-detail .game-inner-detail{display: flex;align-items: center;}
.topics-page-content .game-list-panel .game-item .game-detail .game-inner-detail p{font-size: 12px;color: #999999;padding-right: 5px;position: relative;}
.topics-page-content .game-list-panel .game-item .game-detail .game-inner-detail p:last-child{padding-left: 5px;padding-right: 0;}
.topics-page-content .game-list-panel .game-item .game-detail .game-inner-detail p:last-child::before{position: absolute;content: "";width: 1px;height: 70%;background-color: #999999;top: 50%;left: 0;transform: translateY(-50%);}
.topics-page-content .game-list-panel .game-item .game-detail .dateUpdate{margin-top: 8px;font-size: 12px;color: #999999;}
.topics-page-content .game-list-panel .game-item .viewBtn{margin-left: auto;border-radius: 14px;border: 1px solid #42EAB2;color: #42EAB2;font-size: 14px;min-width: 72px;height: 28px;line-height: 28px;text-align: center;z-index: 1;}
.topics-page-content .game-list-panel .game-item:hover .viewBtn{background-color: #42EAB2;color: #ffffff;}
.topics-page-content .game-list-panel .game-item .top-icon{position: absolute;top: -3px;left: -3px;}
.topics-page-content .game-list-panel .game-item .top-icon img{width: 89px;height: auto;}
.topics-page-content .game-list-panel .game-item .top-icon p{font-size: 14px; color: #ffffff; position: absolute; top: 40%; transform: translateY(-50%); left: 6%;}
.topics-page-content .game-list-panel .game-item .img-overlay{position: absolute;right: 0;opacity: 0;z-index: 1;height: 100%!important;width: auto!important;transition: .3s all;-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%);}
.topics-page-content .game-list-panel .game-item:hover .img-overlay{opacity: 0.2;}
.topics-page-content .game-list-panel .game-item:hover{background-color: #fef4f0;}

.topics-page-content .pagination{display: flex;justify-content: center;padding-bottom: 40px;background-color: #ffffff;border-radius: 0 0 6px 6px;column-gap: 10px;padding-top: 30px;}
.topics-page-content .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 .pagination a.current{background-color: #72ECB8;color: #ffffff;border:none;}
.topics-page-content .pagination a.page-number{font-weight: bold;min-width: 40px;}

@media (min-width: 751px) and (max-width: 1199px) {
    .topics-page-content .top-topic-banner{flex-direction: column-reverse;row-gap: 20px;}
    .topics-page-content .top-topic-banner .banner-right, .topics-page-content .top-topic-banner .banner-left{flex: 0 0 100%;max-width: 100%;}
    .topics-page-content .top-topic-banner .banner-right img{max-height: 300px;}
    .topics-page-content .game-list-panel{grid-template-columns: repeat(auto-fit, minmax(0, 345px));}
}