.topics-page-content .top-topic-banner{margin-top: 1.71rem;}
.topics-page-content .greybg{background-color: #ecfef8;width: 100%;height: 41.07rem;position: absolute;top: 0;z-index: -1;top: 14.57rem;margin-top: 5px;}
.topics-page-content .top-topic-banner .imgWrap{position: relative;width: 100%;height: max-content;margin-bottom: 1.43rem;}
.topics-page-content .top-topic-banner .imgWrap .overlay{width: 100%; height: 60%; border-radius: 0.71rem; 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 .top-topic-banner .imgWrap > img{width: 100%;height: 25.93rem;max-height: 25.93rem;border-radius: 0.71rem;border: 1px solid #42eab2;display: block;}
.topics-page-content .top-topic-banner .imgWrap .topicIcon{position: absolute;top: 0;left: 1.57rem;width: 5.21rem;height: 3.64rem;display: flex;justify-content: center;line-height: 3rem;}
.topics-page-content .top-topic-banner .imgWrap .topicIcon img{width: 100%;height: 100%;position: absolute;}
.topics-page-content .top-topic-banner .imgWrap .topicIcon p{color: #15282D;font-size: 1.71rem;position: relative;}
.topics-page-content .top-topic-banner .imgWrap .topicNumber{position: absolute;background-color: rgba(0, 0, 0, 0.5);color: #ffffff;font-size: 1.29rem;border-radius: 0.86rem;border: 1px solid #ffffff;top: 0.86rem;right: 0.86rem;padding: 0 0.8rem;height: 2.2rem;text-align: center;line-height: 2.2rem;}
.topics-page-content .top-topic-banner .imgWrap .titleDateWrap{position: absolute;bottom: 1.29rem;padding: 0 1.5rem;display: flex;flex-direction: column;row-gap: 0.29rem;}
.topics-page-content .top-topic-banner .imgWrap .titleDateWrap p{font-size: 1.29rem;color: #CCCCCC;}
.topics-page-content .top-topic-banner .imgWrap .titleDateWrap h3{font-size: 2.43rem;color: #ffffff;}   
.topics-page-content .top-topic-banner p.content{font-size: 1.29rem;color: #333333;line-height: 2.58rem;padding-bottom: 2rem;}

.topics-page-content .gameBanner-recommend{display: flex;align-items: center;padding: 1.5rem;border-radius: 0.71rem;background: #fef4f0;margin-bottom: 1.71rem;margin-top: 1rem;position: relative;}
.topics-page-content .gameBanner-recommend img{width: 8.57rem;height: 8.57rem;border-radius: 2rem;margin-right: 1.86rem;}
.topics-page-content .gameBanner-recommend .detailWrap{display: flex;flex-direction: column;row-gap: 0.86rem;margin-right: 2rem;overflow: hidden;}
.topics-page-content .gameBanner-recommend .detailWrap h2{font-size: 2rem;font-weight: bold;color: #000000;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.topics-page-content .gameBanner-recommend .detailWrap .typeSizeWrap{display: flex;align-items: center;column-gap: 2rem;}
.topics-page-content .gameBanner-recommend .detailWrap .typeSizeWrap p {font-size: 1.57rem;color: #999999;position: relative;}
.topics-page-content .gameBanner-recommend .detailWrap .dateUpdate{font-size: 1.57rem;color: #999999; }
.topics-page-content .gameBanner-recommend .viewNowBtn{margin-left: auto;height: 3.57rem;min-width: 8.86rem;flex: 0 0 8.86rem;background-color: #FFB406;border-radius: 2rem;text-align: center;line-height: 3.57rem;font-size: 1.71rem;color: #ffffff;position: relative;z-index: 1;}
.topics-page-content .gameBanner-recommend .img-overlay{position: absolute;right: 0;opacity: 0.2;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%);border-radius: 0.71rem!important;margin-right: 0!important;}
.topics-page-content .gameBanner-recommend .top-icon{position: absolute;top: 0;left: 0;}
.topics-page-content .gameBanner-recommend .top-icon img{width: 7.93rem;height: auto;border-radius: 0;}
.topics-page-content .gameBanner-recommend .top-icon p{font-size: 1.29rem; color: #ffffff; position: absolute; top: 40%; transform: translateY(-50%); left: 6%;}

.topics-page-content .hot-game-panel{margin-top: 1.71rem;}
.topics-page-content .titleWrap{position: relative;padding-left: 1.07rem;margin-bottom: 1.86rem;}
.topics-page-content .titleWrap::before{position: absolute;content: "";width: 5px;height: 100%;border-radius: 2.5px;background-color: #FFE003;left: 0;top: 50%;max-height: 2.5rem;transform: translateY(-50%);}
.topics-page-content .hot-game-panel .itemListing{display: grid;grid-template-columns: repeat(auto-fit, minmax(0, 9.14rem));justify-content: space-between;column-gap: 3.64rem;row-gap: 2.14rem;}
.topics-page-content .hot-game-panel .itemListing a{display: flex;flex-direction: column;}
.topics-page-content .hot-game-panel .itemListing a img{width: 100%;height: auto;border-radius: 2.14rem;margin-bottom: 0.64rem;}
.topics-page-content .hot-game-panel .itemListing a .name{font-size: 1.71rem;color: #333333;margin-bottom: 0.86rem;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topics-page-content .hot-game-panel .itemListing a .viewNow{width: 100%;height: 3.57rem;border-radius: 2rem;text-align: center;line-height: 3.57rem;border: 1px solid #42EAB2;color: #42EAB2;font-size: 1.71rem;}

.topics-page-content .premium-game-panel{margin-top: 2.43rem;}
.topics-page-content .premium-game-panel .content-list{background-color: #ffffff;display: grid;grid-template-columns: repeat(1,1fr);padding: 0;border-radius: 0;margin: 0 -2.14rem;}
.topics-page-content .premium-game-panel .content-list .game-item{display: flex;align-items: center;background-color: #ffffff;border-radius: 0;padding: 2.14rem 3.57rem 2.14rem 2.86rem;cursor: pointer;}
.topics-page-content .premium-game-panel .content-list .game-item .img-block{width: 8.57rem;height: 8.57rem;border-radius: 2rem;margin-right: 1.86rem;flex: 0 0 8.57rem;}
.topics-page-content .premium-game-panel .content-list .game-item .img-block img{width: 100%;height: 100%;border-radius: 2rem;}
.topics-page-content .premium-game-panel .content-list .game-item .game-detail{display: flex;flex-direction: column;overflow: hidden;margin-right: 1rem;}
.topics-page-content .premium-game-panel .content-list .game-item .game-detail h3{font-weight: normal;font-size: 2rem;color: #000000;margin-bottom: 0.79rem;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 23rem;}
.topics-page-content .premium-game-panel .content-list .game-item .game-detail .game-inner-detail{display: flex;align-items: center;}
.topics-page-content .premium-game-panel .content-list .game-item .game-detail .game-inner-detail p{font-size: 1.57rem;color: #999999;padding-right: 0.5rem;position: relative;}
.topics-page-content .premium-game-panel .content-list .game-item .game-detail .game-inner-detail p:last-child{padding-left: 0.5rem;padding-right: 0;}
.topics-page-content .premium-game-panel .content-list .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 .premium-game-panel .content-list .game-item .game-detail .dateUpdate{margin-top: 0.86rem;font-size: 1.57rem;color: #999999;}
.topics-page-content .premium-game-panel .content-list .game-item .viewBtn{margin-left: auto;border-radius: 2rem;border: 1px solid #42EAB2;color: #42EAB2;font-size: 1.71rem;min-width: 8.86rem;height: 3.57rem;line-height: 3.57rem;text-align: center;}
.topics-page-content .premium-game-panel .content-list .game-item .viewBtn:hover{background-color: #42EAB2;color: #ffffff;}
.topics-page-content .premium-game-panel .content-list .game-item:nth-child(odd){background-color: #f9fafa;border-radius: 0.43rem;}

.topics-page-content .premium-topic-panel{margin-top: 0.71rem;}
.topics-page-content .premium-topic-panel .topics-list{display: flex;flex-direction: column;}
.topics-page-content .premium-topic-panel .topics-item-panel{display: flex;align-items: center;justify-content: space-between;padding: 1.43rem 0;border-bottom: 1px solid #ececec;column-gap: 1.43rem;} 
.topics-page-content .premium-topic-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 .premium-topic-panel .topics-item-panel .topic-wrap .imgWrap{position: relative;flex: 0 0 23.57rem;max-width: 23.57rem;}
.topics-page-content .premium-topic-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 .premium-topic-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 .premium-topic-panel .topics-item-panel .topic-wrap .topicWrap{display: flex;flex-direction: column;overflow: hidden;width: 100%;margin-right: 2rem;position: relative;}
.topics-page-content .premium-topic-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 .premium-topic-panel .topics-item-panel .topic-wrap .topicWrap .dateTimeWrap{display: flex;align-items: center;column-gap: 0.5rem;margin-bottom: 1.29rem;}
.topics-page-content .premium-topic-panel .topics-item-panel .topic-wrap .topicWrap .dateTimeWrap img{width: 1.29rem;height: 1.29rem;}
.topics-page-content .premium-topic-panel .topics-item-panel .topic-wrap .topicWrap .dateTimeWrap p{font-size: 1.29rem;color: #999999;} 
.topics-page-content .premium-topic-panel .topics-item-panel .topic-game{display: flex;column-gap: 2.14rem;width: 100%;}
.topics-page-content .premium-topic-panel .topics-item-panel .topic-game .topic-game-item{flex: 0 0 4.64rem;max-width: 4.64rem;position: relative;}
.topics-page-content .premium-topic-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 .premium-topic-panel .topics-item-panel .more-block{height: 4.64rem; width: 4.64rem; background-color: #E1E1E1; border-radius: 1rem;position: absolute;bottom: 0;right: 1.43rem;color: #999999;font-size: 1.29rem;}
.topics-page-content .premium-topic-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-buttons-panel{margin-top: 2.14rem;padding-bottom: 2.86rem;}
.topics-page-content .topic-buttons-panel{display: flex;flex-wrap: wrap;column-gap: 2rem;row-gap: 1.43rem;margin-top: 1.57rem;}
.topics-page-content .topic-buttons-panel a{height: 3.43rem;width: max-content;padding: 0 2.29rem;text-align: center;line-height: 3.43rem;color: #646567;font-size: 1.71rem;border-radius: 1.57rem;background-color: #F7F7F8;}

.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;}
.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;}
.pagination a.current{background-color: #42EAB2;color: #ffffff;border:none;}
.pagination a.page-number{font-weight: normal;min-width: 4.14rem;}
.pagination a.pagination-button{font-family: cursive;min-width: 4.14rem;}