.hero-banner-section {margin-top: 20px;}
.hero-banner-section .banner-list{display: flex;flex-direction: column;row-gap: 20px;}
.hero-banner-section .banner-list .top-banner-section{display: flex;column-gap: 20px;align-items: center;}
.hero-banner-section .banner-list .top-banner-section a{position: relative;border-radius: 6px;overflow: hidden;width: 192px;height: 312px;transition: flex 0.4s ease, width 0.4s ease;flex: 0.3404;}
.hero-banner-section .banner-list .top-banner-section a img{width: 192px;height: 100%;border-radius: 6px;object-fit: cover;}
.hero-banner-section .banner-list .top-banner-section a p{position: absolute;font-size: 18px;color: #ffffff;width: 100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;bottom: 17px;padding: 0 14px;}
.hero-banner-section .banner-list .top-banner-section a.active{flex: 1;width: 100%;}
.hero-banner-section .banner-list .top-banner-section a.active img{width: 100%;}
.hero-banner-section .banner-list .top-banner-section 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%);}
.hero-banner-section .banner-list .bottom-banner-section{display: flex;justify-content: space-between;position: relative;}
.hero-banner-section .banner-list .bottom-banner-section .banner-left{background-color: #ffe66d;border-radius: 6px 85px 6px 6px;position: relative;padding: 20px;display: grid;align-items: center;grid-template-columns: repeat(auto-fit, minmax(0, 86px));column-gap: 25px;flex: 0 0 52%;max-width: 52%;clip-path: polygon(0 0, 89% 0, 100% 100%, 0% 100%);}
.hero-banner-section .banner-list .bottom-banner-section .hot-icon-wrap{position: absolute;top: 0;left: 0;width: 67px;clip-path: polygon(50% 0%, 100% 0, 45% 35%, 0 100%, 0 0);}
.hero-banner-section .banner-list .bottom-banner-section .hot-icon-wrap img{width: 100%;height: auto;}
.hero-banner-section .banner-list .bottom-banner-section .hot-icon-wrap p{text-align: center; font-size: 14px; color: #ffffff; font-weight: bold; position: absolute; top: 25%; left: 25%; transform: translate(-50%, -50%) rotate(-50deg);}
.hero-banner-section .banner-list .bottom-banner-section a{display: flex;flex-direction: column;row-gap: 10px;justify-content: center;align-items: center;}
.hero-banner-section .banner-list .bottom-banner-section a img{width: 100%;height: auto;border-radius: 20px;}
.hero-banner-section .banner-list .bottom-banner-section a p{font-size: 14px;color: #333333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;text-align: center;}
.hero-banner-section .banner-list .bottom-banner-section .banner-right{background-color: #1AEEB0;border-radius: 6px 6px 6px 80px;position: relative;padding: 20px;display: grid;align-items: center;grid-template-columns: repeat(auto-fit, minmax(0, 86px));column-gap: 25px;flex: 0 0 52%;max-width: 52%;justify-content: flex-end;clip-path: polygon(0 0, 100% 0, 100% 100%, 11% 100%);margin-left: -4%;}

.hot-topic-section{margin-top: 20px;}
.hot-topic-section .hot-topic-wrapping{display: flex;justify-content:space-between;}
.hot-topic-section .hot-topic-wrapping .hot-topic-banner-list .titleWrap .iconWrap img{width: 18px;height: auto;}
.hot-topic-section .hot-topic-wrapping .hot-topic-banner-list{flex: 0 0 37.2%;max-width: 37.2%;margin-right: 20px;}
.hot-topic-section .hot-topic-wrapping .hot-topic-banner-list .banner-list{display: grid;grid-template-columns: repeat(2,1fr);gap: 20px;}
.hot-topic-section .hot-topic-wrapping .hot-topic-banner-list .banner-list a{border-radius: 6px;}
.hot-topic-section .hot-topic-wrapping .hot-topic-banner-list .banner-list a img{width: 100%;height: 106px;border-radius: 6px;}
.hot-topic-section .hot-topic-wrapping .hot-topic-tab{flex: 0 0 37.2%;max-width: 37.2%;margin-right: 25px;}
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .top-panel{display: flex;justify-content: space-between;align-items: center;position: relative;background-color: #ffffff;padding-right: 10px;margin-bottom: 14px;}
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .top-panel::before{position: absolute; content: ""; width: 100.2%; height: 100%; background-color: #1aeeb0; z-index: -1; transform: rotate(0.6deg); }
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .top-panel .tab-list{display: flex;align-items: center;column-gap: 30px;}
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .top-panel .tab-list div{color: #aca8a8;font-size: 20px;position: relative;cursor: pointer;}
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .top-panel .tab-list div span{position: relative;z-index: 2;}
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .top-panel .tab-list div.active{color: #2E2E30;font-weight: bold;}
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .top-panel .tab-list div.active::after{position: absolute;z-index: 1;content: "";background-color: #FFE003;height: 8px;width: 100%;bottom: 0;left: 0;}
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .top-panel .moreIcon{font-size: 18px;font-weight: bold;color: #aca8a8;cursor: pointer;}
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .top-panel .moreIcon i{vertical-align: top;position: relative;top:-4px;font-weight: normal;}
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .tab-content .content { display: none; row-gap: 17px;flex-direction: column;}
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .tab-content .content.active { display: flex; }
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .tab-content .content .hot-topic-tab-wrap{display: flex;align-items: center;column-gap: 10px;}
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .tab-content .content .hot-topic-tab-wrap .play-icon{width: 20px;height: 20px;border-radius: 6px;padding: 5px;background-color: transparent;border: 1px solid #96f7d4;display: flex;align-items: center;justify-content: center;flex: 0 0 20px;max-width: 20px;}
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .tab-content .content .hot-topic-tab-wrap .play-icon i{width: 0; height: 0; border-top: 5px solid transparent; border-left: 10px solid #12ee9b; border-bottom: 5px solid transparent;}
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .tab-content .content .hot-topic-tab-wrap .square-icon {flex: 0 0 20px;max-width: 20px;display: flex;justify-content: center;}
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .tab-content .content .hot-topic-tab-wrap .square-icon i{width: 8px; height: 8px; border: 2px solid #354c35; background-color: transparent; display: block;}
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .tab-content .content .hot-topic-tab-wrap .contentTItle{color: #333333;font-size: 15px;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.hot-topic-section .hot-topic-wrapping .hot-topic-tab .tab-content .content .hot-topic-tab-wrap .dateTime{margin-left: auto;color: #cccccc;font-size: 15px;}
.hot-topic-section .hot-topic-wrapping .daily-recommend-panel{display: flex;flex-direction: column;background-color: #f2f2f2;flex: 0 0 21.6%;max-width: 21.6%;}
.hot-topic-section .hot-topic-wrapping .daily-recommend-panel .imgWrap{position: relative;}
.hot-topic-section .hot-topic-wrapping .daily-recommend-panel .imgWrap .top-icon{position: absolute;top: -3px;left: -3px;}
.hot-topic-section .hot-topic-wrapping .daily-recommend-panel .imgWrap .top-icon img{width: 89px;height: auto;}
.hot-topic-section .hot-topic-wrapping .daily-recommend-panel .imgWrap .top-icon p{font-size: 14px; color: #ffffff; position: absolute; top: 40%; transform: translateY(-50%); left: 6%;}
.hot-topic-section .hot-topic-wrapping .daily-recommend-panel .imgWrap > img{width: 100%;height: auto;border-radius: 6px 6px 0 0}
.hot-topic-section .hot-topic-wrapping .daily-recommend-panel .contentWrap{background-color: #f2f2f2;border-radius: 0 0 6px 6px;padding: 10px 16px 16px;position: relative;}
.hot-topic-section .hot-topic-wrapping .daily-recommend-panel .contentWrap h3{font-size: 16px;font-weight: bold;color: #333333;width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.hot-topic-section .hot-topic-wrapping .daily-recommend-panel .contentWrap .content{margin: 5px 0;font-size: 12px;color: #999999;overflow: hidden;width: 100%;text-overflow: ellipsis;white-space: nowrap;position: relative;z-index: 2;}
.hot-topic-section .hot-topic-wrapping .daily-recommend-panel .contentWrap .dateTime{font-size: 12px;color: #999999;}
.hot-topic-section .hot-topic-wrapping .daily-recommend-panel .contentWrap > img{width: 44px;height: auto;position: absolute;right: 11px;bottom: 17px;z-index: 1;}

.mobile-game-wrap{margin-top: 20px;}
.game-flex{display: flex;justify-content: space-between;column-gap: 40px;}
.mobile-game-list{flex: 0 0 71.5%;max-width: 71.5%;}
.mobile-game-list .titleWrap{margin-bottom: 18px;}
.mobile-game-list .titleWrap h2{font-size: 30px;}
.mobile-game-list .mobile-game-tab-listing{display: flex;column-gap: 30px;}
.mobile-game-list .mobile-game-tab-listing .mobile-game-tabs{background-color: #fffaf8;border-radius: 6px;padding: 15px 0;display: flex;flex-direction: column;row-gap: 12px;width: 120px;position: relative;flex: 0 0 120px;}
.mobile-game-list .mobile-game-tab-listing .mobile-game-tabs > div{height: 32px; width: 100%; align-items: center; color: #999999; font-size: 14px; cursor: pointer; position: relative; z-index: 1; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; line-height: 32px;}
.mobile-game-list .mobile-game-tab-listing .mobile-game-tabs > div.active{color: #666666;font-weight: bold;}
.mobile-game-list .mobile-game-tab-listing .mobile-game-tabs .tab-indicator { position: absolute; z-index: 0; height: 32px; width: 100%; border-radius: 6px; background: linear-gradient(90deg, rgb(255,222,202) 0%, rgb(255,244,238) 100%); transition: top 0.3s ease; }
.mobile-game-list .mobile-game-tab-listing .tab-content-listing{width: 100%;height: max-content;}
.mobile-game-list .mobile-game-tab-listing .tab-content-listing .content { display: none;grid-template-columns: repeat(auto-fit, minmax(0, 110px));column-gap: 38px;row-gap: 30px;}
.mobile-game-list .mobile-game-tab-listing .tab-content-listing .content.active { display: grid; }
.mobile-game-list .mobile-game-tab-listing .tab-content-listing .content a{display: flex;flex-direction: column;text-align: center;}
.mobile-game-list .mobile-game-tab-listing .tab-content-listing .content a p.name{width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #333333;font-size: 15px;margin-bottom: 5px;}
.mobile-game-list .mobile-game-tab-listing .tab-content-listing .content a img{width: 100%;height: auto;margin-bottom: 10px;border-radius: 20px;}
.mobile-game-list .mobile-game-tab-listing .tab-content-listing .content a p.dateUpdate{font-size: 12px;color: #999999;}
.hottest-of-week{flex: 0 0 25.2%;max-width: 25.2%;}
.hottest-of-week .hottest-game-list{display: flex;flex-direction: column;row-gap: 22px;}
.hottest-of-week .hottest-game-list a{display: flex;align-items: center;}
.hottest-of-week .hottest-game-list a .imgWrap{position: relative;width: 70px;height: 70px;border-radius: 20px;margin-right: 10px;}
.hottest-of-week .hottest-game-list a .imgWrap .rank-icon{position: absolute;top: -3px;left: 0;}
.hottest-of-week .hottest-game-list a .imgWrap .rank-icon > img{width: 28px;height: auto;}
.hottest-of-week .hottest-game-list a .imgWrap .rank-icon div{display: flex ; flex-direction: column; justify-content: center; align-items: center; font-size: 10px; color: #ffffff; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);}
.hottest-of-week .hottest-game-list a .imgWrap > img{border-radius: 20px;width: 100%;height: 100%;}
.hottest-of-week .hottest-game-list a .detailWrap{display: flex;flex-direction: column;}
.hottest-of-week .hottest-game-list a .detailWrap .name{font-size: 15px;color: #333333; max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.hottest-of-week .hottest-game-list a .detailWrap .categorySize{margin: 5px 0 10px;display: flex;align-items: center;}
.hottest-of-week .hottest-game-list a .detailWrap .categorySize p{color: #999999;font-size: 12px;}
.hottest-of-week .hottest-game-list a .detailWrap .categorySize p:first-child{padding-right: 5px;border-right: 1px solid #999999;}
.hottest-of-week .hottest-game-list a .detailWrap .categorySize p:last-child{padding-left: 5px;}
.hottest-of-week .hottest-game-list a .dateUpdate{color: #999999;font-size: 12px;}
.hottest-of-week .hottest-game-list a .viewBtn{cursor: pointer;margin-left: auto;border-radius: 20px;border: 1px solid #cccccc;color: #cccccc;font-size: 15px;width: 72px;height: 28px;display: flex;align-items: center;justify-content: center;}

.topics-panel{margin-top: 20px;}
.topics-panel .titleWrap{margin-bottom: 18px;}
.topics-panel .titleWrap h2{font-size: 30px;}
.topics-panel .topics-banners{display: flex;column-gap: 20px;}
.topics-panel .topic-left{position: relative;flex: 0 0 42.7%;max-width: 42.7%;}
.topics-panel .topic-left > img{width: 100%;height: 100%;border-radius: 6px;}
.topics-panel .topic-left .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-panel .topic-left .detailWrap{position: absolute;left: 12px;bottom: 13px;display: flex;align-items: center;}
.topics-panel .topic-left .detailWrap .topicTitle{font-size: 18px;color: #ffffff;padding-right: 10px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 380px;}
.topics-panel .topic-left .detailWrap .dateUpdate{padding-left: 10px;color: #ffffff;font-size: 12px;border-left: 1px solid #ffffff;}
.topics-panel .topic-left .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-panel .topics-right {display: grid;grid-template-columns: repeat(auto-fit, minmax(0, 324px));flex: 1;row-gap: 20px;justify-content: space-between;width: 100%;}
.topics-panel .topics-right a{position: relative;max-height: 160px;}
.topics-panel .topics-right a > img{width: 100%;height: 100%;border-radius: 6px;}
.topics-panel .topics-right 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-panel .topics-right a .detailWrap{position: absolute;left: 12px;bottom: 13px;display: flex;align-items: center;}
.topics-panel .topics-right a .detailWrap .topicTitle{font-size: 18px;color: #ffffff;padding-right: 10px;max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.topics-panel .topics-right a .detailWrap .dateUpdate{padding-left: 10px;color: #ffffff;font-size: 12px;border-left: 1px solid #ffffff;}
.topics-panel .topics-right 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-panel .topics-right a:hover{border-radius: 6px;position: relative;}
.topics-panel .topics-right a:hover img{width: 100%;height: 100%;border-radius: 6px;}
.topics-panel .topics-right 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-panel .topics-right 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-panel .topics-right a:hover .detailWrap .topicTitle{font-size: 20px;color: #ffffff;max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topics-panel .topics-right a:hover .detailWrap .dateUpdate{font-size: 14px;color: #ffffff;border-left: none;}
.topics-panel .topics-right a:hover .topic-number{display: none;}

.mobile-app-wrap{margin-top: 20px;}
.mobile-app-wrap .mobile-game-list .mobile-game-tab-listing .mobile-game-tabs{background-color: #ecfbf8;}
.mobile-app-wrap .mobile-game-list .mobile-game-tab-listing .mobile-game-tabs .tab-indicator{background: linear-gradient( 90deg, rgb(196,238,228) 0%, rgb(226,245,241) 100%);}

.guide-panel{margin-top: 24px;}
.guide-panel .titleWrap h2{font-size: 30px;}
.guide-panel .titleWrap{margin-bottom: 18px;}
.guide-panel .guideWrap{display: grid;grid-template-columns: repeat(2,1fr);column-gap: 20px;}
.guide-panel .guideWrap > div{background-color: #f6fbfe;border-radius: 6px;padding: 20px 20px 30px;display: flex;flex-direction: column;overflow: hidden;}
.guide-panel .guideWrap > div a.latest-guide{display: flex;column-gap: 20px;padding-bottom: 15px;border-bottom: 1px solid #CCCCCC;margin-bottom: 15px;}
.guide-panel .guideWrap > div a.latest-guide > img{width: 200px;height: auto;object-fit: contain;border-radius: 6px;flex: 0 0 200px;max-width: 200px;}
.guide-panel .guideWrap > div a.latest-guide .guideDetailWrap{display: flex;flex-direction: column;padding: 8px 0;width: 100%;overflow: hidden;}
.guide-panel .guideWrap > div a.latest-guide .guideDetailWrap p.guideTitle{width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 16px;color: #333333;margin-bottom: 10px;}
.guide-panel .guideWrap > div a.latest-guide .guideDetailWrap p.datePost{display: flex;align-items: center;column-gap: 5px;font-size: 14px;color: #999999;}
.guide-panel .guideWrap > div a.latest-guide .guideDetailWrap p.datePost img{width: 14px;height: 14px;}
.guide-panel .guideWrap > div a.latest-guide .guideDetailWrap button{border: none;outline: none;cursor: pointer;display: flex;align-items: center;justify-content: center;background-color: #EDF3FA;border-radius: 3px;padding: 0 8px;height: 32px;font-size: 14px;color: #333333;width: max-content;margin-top: auto;}
.guide-panel .guideWrap > div a.latest-guide .guideDetailWrap button img{width: 24px;height: 24px;border-radius: 3px;margin-right: 6px;}
.guide-panel .guideWrap .guide-listing { display: flex; flex-direction: column;row-gap: 15px;}
.guide-panel .guideWrap .guide-listing .hot-topic-tab-wrap{display: flex;align-items: center;column-gap: 10px;}
.guide-panel .guideWrap .guide-listing .hot-topic-tab-wrap .play-icon{width: 20px;height: 20px;border-radius: 6px;padding: 5px;background-color: transparent;border: 1px solid #96f7d4;display: flex;align-items: center;justify-content: center;flex: 0 0 20px;max-width: 20px;}
.guide-panel .guideWrap .guide-listing .hot-topic-tab-wrap .play-icon i{width: 0; height: 0; border-top: 5px solid transparent; border-left: 10px solid #12ee9b; border-bottom: 5px solid transparent;}
.guide-panel .guideWrap .guide-listing .hot-topic-tab-wrap .square-icon {flex: 0 0 20px;max-width: 20px;display: flex;justify-content: center;}
.guide-panel .guideWrap .guide-listing .hot-topic-tab-wrap .square-icon i{width: 8px; height: 8px; border: 2px solid #354c35; background-color: transparent; display: block;}
.guide-panel .guideWrap .guide-listing .hot-topic-tab-wrap .contentTItle{color: #333333;font-size: 15px;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.guide-panel .guideWrap .guide-listing .hot-topic-tab-wrap .dateTime{margin-left: auto;color: #cccccc;font-size: 15px;}

.ranking-panel{margin-top: 24px;}
.ranking-panel .titleWrap h2{font-size: 30px;}
.ranking-panel .titleWrap{margin-bottom: 12px;}
.ranking-panel .rankingWrap{display: grid;grid-template-columns: repeat(auto-fit, minmax(0, 386px));column-gap: 20px;}
.ranking-panel .rankingWrap .ranking-listing{border-radius: 6px;position: relative;padding-bottom: 20px;}
.ranking-panel .rankingWrap .ranking-listing:first-child::before{background: #fffaf8;position: absolute;content: "";width: 100%;height: 100%;top: 0;z-index: 1;border-radius: 6px 6px 0 0;}
.ranking-panel .rankingWrap .ranking-listing:nth-child(2)::before{background: #f9f5f9;position: absolute;content: "";width: 100%;height: 100%;top: 0;z-index: 1;border-radius: 6px 6px 0 0;}
.ranking-panel .rankingWrap .ranking-listing:last-child::before{background: #ecfbf8;position: absolute;content: "";width: 100%;height: 100%;top: 0;z-index: 1;border-radius: 6px 6px 0 0;}
.ranking-panel .rankingWrap .ranking-listing .titleWrap{position: relative;z-index: 2;margin: 16px 21px 10px 31px;}
.ranking-panel .rankingWrap .ranking-listing .titleWrap h2{font-size: 22px;}
.ranking-panel .rankingWrap .ranking-listing:first-child .titleWrap h2{color: #FFB23F;position: relative;padding: 0 15px 0 20px;}
.ranking-panel .rankingWrap .ranking-listing:nth-child(2) .titleWrap h2{color: #F086F0;position: relative;padding: 0 15px 0 20px;}
.ranking-panel .rankingWrap .ranking-listing:last-child .titleWrap h2{color: #77EF75;position: relative;padding: 0 15px 0 20px;}
.ranking-panel .rankingWrap .ranking-listing:first-child .titleWrap h2::before{position: absolute;content: "";width: 15px;height: 30px;background: url(../images/home/huobaoleft.png);background-size: contain;background-repeat: no-repeat;left: 0;}
.ranking-panel .rankingWrap .ranking-listing:first-child .titleWrap h2::after{position: absolute;content: "";width: 15px;height: 30px;background: url(../images/home/huobaoright.png);background-size: contain;background-repeat: no-repeat;}
.ranking-panel .rankingWrap .ranking-listing:nth-child(2) .titleWrap h2::before{position: absolute;content: "";width: 15px;height: 30px;background: url(../images/home/liuxingleft.png);background-size: contain;background-repeat: no-repeat;left: 0;}
.ranking-panel .rankingWrap .ranking-listing:nth-child(2) .titleWrap h2::after{position: absolute;content: "";width: 15px;height: 30px;background: url(../images/home/liuxingright.png);background-size: contain;background-repeat: no-repeat;}
.ranking-panel .rankingWrap .ranking-listing:last-child .titleWrap h2::before{position: absolute;content: "";width: 15px;height: 30px;background: url(../images/home/xiazaileft.png);background-size: contain;background-repeat: no-repeat;left: 0;}
.ranking-panel .rankingWrap .ranking-listing:last-child .titleWrap h2::after{position: absolute;content: "";width: 15px;height: 30px;background: url(../images/home/xiazairight.png);background-size: contain;background-repeat: no-repeat;}
.ranking-panel .rankingWrap .ranking-listing .rank-list{position: relative;z-index: 2;}
.ranking-panel .rankingWrap .ranking-listing .rank-list a{position: relative;transition: .3s all;}
.ranking-panel .rankingWrap .ranking-listing .rank-list a .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%);}
.ranking-panel .rankingWrap .ranking-listing .rank-list a .itemWrap{position: relative;z-index: 2;display: flex;align-items: center;padding: 10px 15px;}
.ranking-panel .rankingWrap .ranking-listing .rank-list a .itemWrap .rankNumber{font-size: 16px;font-weight: bold;color: #999999;flex: 0 0 12px;max-width: 12px;margin-right: 20px;transition: .3s all;}
.ranking-panel .rankingWrap .ranking-listing .rank-list a .itemWrap > img{width: 70px;height: 70px;border-radius: 15px;margin-right: 10px;}
.ranking-panel .rankingWrap .ranking-listing .rank-list a .itemWrap .detailWrap{display: flex;flex-direction: column;width: 100%;overflow: hidden;}
.ranking-panel .rankingWrap .ranking-listing .rank-list a .itemWrap .detailWrap .name{font-size: 16px;color: #000000;margin-bottom: 3px;overflow: hidden;width: 100%;text-overflow: ellipsis;white-space: nowrap;}
.ranking-panel .rankingWrap .ranking-listing .rank-list a .itemWrap .detailWrap .categorySize{margin: 5px 0 10px;display: flex;align-items: center;}
.ranking-panel .rankingWrap .ranking-listing .rank-list a .itemWrap .detailWrap .categorySize p{color: #999999;font-size: 12px;}
.ranking-panel .rankingWrap .ranking-listing .rank-list a .itemWrap .detailWrap .categorySize p:first-child{padding-right: 5px;border-right: 1px solid #999999;}
.ranking-panel .rankingWrap .ranking-listing .rank-list a .itemWrap .detailWrap .categorySize p:last-child{padding-left: 5px;}
.ranking-panel .rankingWrap .ranking-listing .rank-list a .itemWrap .detailWrap .dateUpdate{color: #999999;font-size: 12px;}
.ranking-panel .rankingWrap .ranking-listing .rank-list a .itemWrap .viewBtn{cursor: pointer;margin-left: auto;border-radius: 20px;border: 1px solid #cccccc;color: #cccccc;font-size: 15px;width: 72px;height: 28px;display: flex;align-items: center;justify-content: center;transition: .3s all;z-index: 1;flex: 0 0 72px;}
.ranking-panel .rankingWrap .ranking-listing .rank-list a:hover .img-overlay{opacity: 0.2;}
.ranking-panel .rankingWrap .ranking-listing:first-child .rank-list a:hover .itemWrap{background-color: #fef4f0;border-radius: 6px;}
.ranking-panel .rankingWrap .ranking-listing:nth-child(2) .rank-list a:hover .itemWrap{background-color: #f9edf9;border-radius: 6px;}
.ranking-panel .rankingWrap .ranking-listing:last-child .rank-list a:hover .itemWrap{background-color: #e3f9f4;border-radius: 6px;}
.ranking-panel .rankingWrap .ranking-listing .rank-list a:hover .itemWrap .rankNumber{color: #424242;}
.ranking-panel .rankingWrap .ranking-listing .rank-list a:hover .itemWrap .viewBtn{background-color: #42EAB2;color: #ffffff;}

.friendLinks-panel{margin-top: 30px;display: flex;align-items: center;background-color: #F7F7F8;border-radius: 6px;height: 95px;position: relative;}
.friendLinks-panel .titleBg{background: url(../images/home/friendLinkBg.png);background-size: cover;background-repeat: no-repeat;width: 120px;height: 100%;flex: 0 0 120px;max-width: 120px;display: flex;align-items: center;padding-left: 28px;}
.friendLinks-panel h2{font-size: 20px;color: #15282D;font-weight: normal;white-space: normal; word-break: break-word;max-width: 40px;position: relative;z-index: 1;}
.friendLinks-panel .linkArrow{position: absolute;top: 50%;transform: translateY(-50%);left: 60px;mix-blend-mode: multiply;}
.friendLinks-panel .link-list{position: relative;z-index: 1;padding-right: 67px;padding-left: 5px;display: flex;row-gap: 5px;flex-wrap: wrap;}
.friendLinks-panel .link-list a{font-size: 14px;color: #999999;padding: 0 8px;position: relative;}
.friendLinks-panel .link-list a::after{content: "";position: absolute;right: 0;width: 1px;background-color: #999999;height: 70%;top: 55%;transform: translateY(-50%);}
.friendLinks-panel .linkWrap{display: flex;flex-direction: column;row-gap: 5px;}
.friendLinks-panel .link-list a:last-child::after{display: none;}

@media (min-width: 751px) and (max-width: 1199px) {
    .hero-banner-section .banner-list .top-banner-section a{height: 250px;}
    .hero-banner-section .banner-list .bottom-banner-section .banner-left{grid-template-columns: repeat(auto-fit, minmax(0, 50px));column-gap: 10px;border-radius: 6px 50px 6px 6px;}
    .hero-banner-section .banner-list .bottom-banner-section .banner-right{grid-template-columns: repeat(auto-fit, minmax(0, 50px));column-gap: 10px;border-radius: 6px 6px 6px 50px;}
    .hero-banner-section .banner-list .bottom-banner-section a img{border-radius: 12px;}
    .hero-banner-section .banner-list .bottom-banner-section a p{font-size: 12px;}
    .hot-topic-section .hot-topic-wrapping .hot-topic-banner-list .banner-list a img{object-fit: cover;height: 85px;}
    .hot-topic-section .hot-topic-wrapping .hot-topic-banner-list .banner-list{gap: 10px;}
    .hot-topic-section .hot-topic-wrapping .hot-topic-tab .tab-content .content{row-gap: 9px;}
    .hot-topic-section .hot-topic-wrapping .hot-topic-banner-list{margin-right: 10px;}
    .hot-topic-section .hot-topic-wrapping .hot-topic-tab{margin-right: 15px;}
    .mobile-game-list .mobile-game-tab-listing .mobile-game-tabs{width: 90px;flex: 0 0 90px;}
    .mobile-game-list .mobile-game-tab-listing{column-gap: 15px;}
    .mobile-game-list .mobile-game-tab-listing .tab-content-listing .content{column-gap: 15px;grid-template-columns: repeat(auto-fit, minmax(0, 95px));}
    .mobile-game-list{flex: 0 0 62%;max-width: 62%;}
    .hottest-of-week{flex: 0 0 35%;max-width: 35%;}
    .hottest-of-week .hottest-game-list a .detailWrap .categorySize p{font-size: 10px;}
    .hottest-of-week .hottest-game-list a .viewBtn{width: 60px;height: 26px;}
    .topics-panel .topics-right{ grid-template-columns: repeat(auto-fit, minmax(0, 190px));row-gap: 10px;}
    .topics-panel .topics-right a .topic-number{font-size: 12px;}
    .topics-panel .topics-right a .detailWrap .topicTitle{font-size: 14px;}
    .topics-panel .topics-banners{column-gap: 10px;}
    .topics-panel .topics-right a .detailWrap{flex-direction: column;align-items: flex-start;}
    .topics-panel .topics-right a .detailWrap .dateUpdate{border-left: none;padding-left: 0;}
    .guide-panel .guideWrap > div a.latest-guide{flex-direction: column;}
    .guide-panel .guideWrap > div a.latest-guide > img{width: 100%;max-width: 100%;}
    .guide-panel .guideWrap .guide-listing{row-gap: 9px;}
    .ranking-panel .rankingWrap{grid-template-columns: repeat(auto-fit, minmax(0, 100%));}
    .friendLinks-panel .link-list a{font-size: 12px;}
}