.hero-panel{margin-top: 24px;}
.hero-panel .hero-panel-wrap{background-color: #FFFFFF;border-radius: 5px;padding: 20px 24px;display: flex;flex-direction: column;row-gap: 24px;}
.hero-panel .hero-panel-wrap .hero-tabs{display: flex;flex-direction: column;row-gap: 20px;}
.hero-panel .hero-panel-wrap .hero-tabs .tab-buttons{display: flex;align-items: center;}
.hero-panel .hero-panel-wrap .hero-tabs .tab-buttons li{padding: 0 35px;display: flex;align-items: center;column-gap: 8px;position: relative;cursor: pointer;}
.hero-panel .hero-panel-wrap .hero-tabs .tab-buttons li:first-child{padding: 0 35px 0 0;}
.hero-panel .hero-panel-wrap .hero-tabs .tab-buttons li:last-child{padding: 0 0 0 35px;}
.hero-panel .hero-panel-wrap .hero-tabs .tab-buttons li img{width: 24px;}
.hero-panel .hero-panel-wrap .hero-tabs .tab-buttons li p{font-size: 18px;font-weight: bold;color: #404040;line-height: 24px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;max-width: 75px;}
.hero-panel .hero-panel-wrap .hero-tabs .tab-buttons li.active p{color: #4AABFF;}
.hero-panel .hero-panel-wrap .hero-tabs .tab-buttons li.active img{filter: brightness(0) saturate(100%) invert(68%) sepia(20%) saturate(7418%) hue-rotate(183deg) brightness(101%) contrast(101%);}
.hero-panel .hero-panel-wrap .hero-tabs .tab-buttons li::after{position: absolute;content: "";right: 0;top: 50%;transform: translateY(-50%) rotate(24deg);width: 2px;height: 60%;background-color: #626262;border-radius: 50%;}
.hero-panel .hero-panel-wrap .hero-tabs .tab-buttons li:last-child::after{display: none;}
.hero-panel .hero-panel-wrap .hero-tabs .tab-contents .tab-content{display: none;align-items: center;column-gap: 16px;}
.hero-panel .hero-panel-wrap .hero-tabs .tab-contents .tab-content.active{display: flex;}
.hero-panel .hero-panel-wrap .hero-tabs .tab-contents .tab-content a{width: 130px;background-color: #F3F3F3;border-radius: 5px;display: flex;flex-direction: column;row-gap: 8px;padding: 15px 12px 14px;overflow: hidden;transition: transform .3s ease;}
.hero-panel .hero-panel-wrap .hero-tabs .tab-contents .tab-content a img{width: 100px;height: 100px;display: block;object-fit: cover;border-radius: 24px;margin: 0 auto;}
.hero-panel .hero-panel-wrap .hero-tabs .tab-contents .tab-content a p{text-align: center;font-size: 14px;color: #666666;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;transition: .3s all;}
.hero-panel .hero-panel-wrap .hero-tabs .tab-contents .tab-content a:hover{transform: translateY(-5px) scale(1.02);}
.hero-panel .hero-panel-wrap .hero-tabs .tab-contents .tab-content a:hover p{color: #4AABFF;}
.hero-panel .hero-panel-wrap .hero-hot-list{display: flex;flex-wrap: wrap;column-gap: 20px;row-gap: 10px;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row{width: calc(50% - 10px);flex: 0 0 calc(50% - 10px);max-width: calc(50% - 10px);display: flex;align-items: center;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row .hot-title{position: relative;background-color: #F36161;width: 50px;height: 24px;line-height: 24px;text-align: center;padding: 0 10px;color: #ffffff;font-size: 14px;font-weight: bold;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row .hot-title::after{position: absolute; content: ""; width: 0; height: 0; border-top: 8px solid transparent; border-left: 10px solid #F36161; border-bottom: 8px solid transparent; top: 50%; transform: translateY(-50%); right: -7px;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row .hot-list{margin-left: 16px;display: flex;align-items: center;overflow: hidden;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row .hot-list a{padding: 0 2px;font-size: 14px;color: #666666;border-right: 1px solid #C4C4C4;line-height: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;min-width:70px;text-align: center;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row .hot-list a:first-child{padding: 0 10px 0 0;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row .hot-list a:last-child{padding: 0 2px 0 10px;border-right: none;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row .hot-list a:hover{color: #FF6801;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row:nth-child(2) .hot-title{background-color: #FF6801;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row:nth-child(2) .hot-title::after{border-left: 10px solid #FF6801;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row:nth-child(3) .hot-title{background-color: #00A9E8;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row:nth-child(3) .hot-title::after{border-left: 10px solid #00A9E8;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row:nth-child(4) .hot-title{background-color: #1AA9D6;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row:nth-child(4) .hot-title::after{border-left: 10px solid #1AA9D6;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row:nth-child(5) .hot-title{background-color: #FFA500;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row:nth-child(5) .hot-title::after{border-left: 10px solid #FFA500;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row:nth-child(6) .hot-title{background-color: #4BC5C3;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row:nth-child(6) .hot-title::after{border-left: 10px solid #4BC5C3;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row:nth-child(7) .hot-title{background-color: #52BE7F;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row:nth-child(7) .hot-title::after{border-left: 10px solid #52BE7F;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row:nth-child(8) .hot-title{background-color: #58A2ED;}
.hero-panel .hero-panel-wrap .hero-hot-list .hot-list-row:nth-child(8) .hot-title::after{border-left: 10px solid #58A2ED;}

.recommend-panel{margin-top: 24px;}
.recommend-panel .recommend-wrap{padding: 24px;background-color: #ffffff;border-radius: 5px;display: flex;justify-content: space-between;}
.recommend-panel .recommend-wrap .recommend-left{width: 390px;flex: 0 0 390px;max-width: 390px;display: flex;flex-direction: column;row-gap: 20px;}
.recommend-panel .recommend-wrap .recommend-left .recommend-slider{position: relative;width: 100%;height: 250px;max-height: 250px;}
.recommend-panel .recommend-wrap .recommend-left .recommend-slider .swiper-container{height: 100%;}
.recommend-panel .recommend-wrap .recommend-left .recommend-slider .swiper-slide{position: relative;}
.recommend-panel .recommend-wrap .recommend-left .recommend-slider .swiper-slide img{height: 100%;width: 100%;object-fit: cover;}
.recommend-panel .recommend-wrap .recommend-left .recommend-slider .swiper-slide p{position: absolute;bottom: 14px;padding: 0 12px;width: 298px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 18px;color: #ffffff;left: 0;}
.recommend-panel .recommend-wrap .recommend-left .recommend-slider .swiper-button-next, .recommend-panel .recommend-wrap .recommend-left .recommend-slider .swiper-button-prev{background-color: #00000080;width: 40px;height: 80px;transform: translateY(-50%);margin-top: 0;background-size: 21px 40px;}
.recommend-panel .recommend-wrap .recommend-left .recommend-slider .swiper-button-next{right: 0;background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='%23ffffff'/%3E%3C/svg%3E");}
.recommend-panel .recommend-wrap .recommend-left .recommend-slider .swiper-button-prev{left: 0;background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='%23ffffff'/%3E%3C/svg%3E");}
.recommend-panel .recommend-wrap .recommend-left .recommend-slider .swiper-slide-count{position: absolute;bottom: 10px;right: 20px;font-size: 18px;color: #ffffff;display: flex;align-items: flex-end;z-index: 1;}
.recommend-panel .recommend-wrap .recommend-left .recommend-slider .swiper-slide-count span{color: #EE1600;font-size: 30px;font-weight: bold;color: #EE1600;}
.recommend-panel .recommend-wrap .recommend-left .game-article-panel{display: flex;flex-direction: column;}
.recommend-panel .recommend-wrap .recommend-left .game-article-panel .article-list{display: flex;flex-direction: column;row-gap: 16px;}
.recommend-panel .recommend-wrap .recommend-left .game-article-panel .article-list a{display: flex;flex-direction: column;}
.recommend-panel .recommend-wrap .recommend-left .game-article-panel .article-list a .article-title{display: flex;align-items: center;overflow: hidden;}
.recommend-panel .recommend-wrap .recommend-left .game-article-panel .article-list a .article-title span{font-size: 14px;color: #999999;position: relative;padding-right: 10px;white-space: nowrap;}
.recommend-panel .recommend-wrap .recommend-left .game-article-panel .article-list a .article-title span::after{position: absolute;content: "";width: 2px;height: 14px;background-color: #DCDCDC;border-radius: 50%;top: 50%;transform: translateY(-50%);right: 0;}
.recommend-panel .recommend-wrap .recommend-left .game-article-panel .article-list a .article-title p{padding: 0 8px;font-size: 14px;color: #404040;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.recommend-panel .recommend-wrap .recommend-left .game-article-panel .article-list a .contentWrap{display: flex;align-items: center;column-gap: 10px;height: 0;overflow: hidden;transition: height .3s ease;}
.recommend-panel .recommend-wrap .recommend-left .game-article-panel .article-list a .contentWrap > img{width: 120px;flex: 0 0 120px;max-width: 120px;height: 70px;object-fit: cover;}
.recommend-panel .recommend-wrap .recommend-left .game-article-panel .article-list a .contentWrap p{font-size: 14px;color: #808080;display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
.recommend-panel .recommend-wrap .recommend-left .game-article-panel .article-list a.active .contentWrap{height: 70px;margin-top: 8px;}
.recommend-panel .recommend-wrap .recommend-left .game-article-panel .article-list a.active .article-title p{font-size: 16px;font-weight: bold;}

.recommend-panel .recommend-wrap .recommend-middle{width: 412px;flex: 0 0 412px;max-width: 412px;}
.recommend-panel .recommend-wrap .recommend-middle .recommend-tab{display: flex;row-gap: 20px;background-color: #FFFFFF;flex-direction: column;}
.recommend-panel .recommend-wrap .recommend-middle .recommend-tab .tab-buttons{display: flex;align-items: center;justify-content: space-between;}
.recommend-panel .recommend-wrap .recommend-middle .recommend-tab .tab-buttons li{width: 136px;height: 42px;display: flex;align-items: center;justify-content: center;background-color: #F2F2F2;color: #666666;font-size: 16px;position: relative;cursor: pointer;}
.recommend-panel .recommend-wrap .recommend-middle .recommend-tab .tab-buttons li.active{background-color: #FFFFFF;font-weight: bold;}
.recommend-panel .recommend-wrap .recommend-middle .recommend-tab .tab-buttons li.active::before{position: absolute;content: "";top: 0;width: 100%;height: 3px;background-color: #4AABFF;}
.recommend-panel .recommend-wrap .recommend-middle .recommend-tab .tab-content{display: none;flex-direction: column;row-gap: 15px;}
.recommend-panel .recommend-wrap .recommend-middle .recommend-tab .tab-content.active{display: flex;}
.recommend-panel .recommend-wrap .recommend-middle .recommend-tab .tab-content a{display: flex;align-items: center;}
.recommend-panel .recommend-wrap .recommend-middle .recommend-tab .tab-content a > img{width: 20px;height: 20px;border-radius: 6px;margin-right: 8px;object-fit: cover;}
.recommend-panel .recommend-wrap .recommend-middle .recommend-tab .tab-content a > p{font-size: 16px;color: #404040;white-space: nowrap;transition: .3s all;}
.recommend-panel .recommend-wrap .recommend-middle .recommend-tab .tab-content a p.name{overflow: hidden;text-overflow: ellipsis;max-width: 250px;}
.recommend-panel .recommend-wrap .recommend-middle .recommend-tab .tab-content a > p.date{font-size: 14px;color: #999999;margin-left: auto;}
.recommend-panel .recommend-wrap .recommend-middle .recommend-tab .tab-content a .line{border-top: 1px dashed #EEEEEE; margin: 0 10px;flex-grow: 1;}
.recommend-panel .recommend-wrap .recommend-middle .recommend-tab .tab-content a:hover p{font-weight: bold;}

.recommend-panel .recommend-wrap .recommend-right{width: 304px;flex: 0 0 304px;max-width: 304px;display: flex;flex-direction: column;}
.recommend-panel .recommend-wrap .recommend-right .titleWrap{margin-bottom: 17px;}
.recommend-panel .recommend-wrap .recommend-right .new-game-recommend{display: flex;flex-direction: column;row-gap: 20px;position: relative;}
.recommend-panel .recommend-wrap .recommend-right .new-game-recommend::before{position: absolute;content: "";height: 100%;width: 1px;background-color: #E5E5E5;left: 4px;top: 0;}
.recommend-panel .recommend-wrap .recommend-right .new-game-recommend a{display: flex;align-items: center;column-gap: 14px;padding-left: 35px;position: relative;}
.recommend-panel .recommend-wrap .recommend-right .new-game-recommend a > img{width: 88px;height: 88px;flex: 0 0 88px;max-width: 88px;border-radius: 20px;}
.recommend-panel .recommend-wrap .recommend-right .new-game-recommend a .detailWrap{display: flex;flex-direction: column;row-gap: 10px;overflow: hidden;}
.recommend-panel .recommend-wrap .recommend-right .new-game-recommend a .detailWrap h4{font-size: 18px;font-weight: normal;color: #404040;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.recommend-panel .recommend-wrap .recommend-right .new-game-recommend a .detailWrap p{font-size: 14px;color: #999999;}
.recommend-panel .recommend-wrap .recommend-right .new-game-recommend a .detailWrap p:nth-child(1){font-size: 18px;font-weight: normal;color: #404040;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

.recommend-panel .recommend-wrap .recommend-right .new-game-recommend a::after{position: absolute;content: "";width: 8px;height: 8px;border-radius: 50%;background-color: #4AABFF;left: 1px;top: 50%;transform: translateY(-50%);}
.recommend-panel .recommend-wrap .recommend-right .topic-banner{width: 100%;height: auto;display: block;margin-top: auto;border-radius: 12px;}

.mobile-app-panel{margin-top: 24px;}
.mobile-app-panel .mobile-app-wrap{background-color: #FFFFFF;border-radius: 5px;padding: 30px 24px 24px;position: relative;}
.mobile-app-panel .mobile-app-wrap .overlay-title{font-size: 36px;font-weight: bold;color: #404040;opacity: 0.1;position: absolute;top: 8px;left: 50%;transform: translateX(-50%);}
.mobile-app-panel .mobile-app-wrap h2{text-align: center;font-size: 36px;font-weight: bold;color: #404040;margin-bottom: 25px;}
.mobile-app-panel .mobile-app-wrap p{text-align: center;font-size: 36px;font-weight: bold;color: #404040;}
/*.mobile-app-panel .mobile-app-wrap .category-apps{display: flex;flex-direction: column;row-gap: 24px;}*/
.mobile-app-panel .mobile-app-wrap .category-apps{overflow: hidden;}
.mobile-app-panel .mobile-app-wrap .category-apps .tab-buttons{display: flex;align-items: center;position: relative;margin-bottom: 24px;}
.mobile-app-panel .mobile-app-wrap .category-apps .tab-buttons::after{position: absolute;content: "";bottom: 0;width: 100%;height: 2px;background-color: #4AABFF;}
.mobile-app-panel .mobile-app-wrap .category-apps .tab-buttons li{height: 36px;line-height: 36px;width: max-content;padding: 0 5px;color: #404040;font-size: 16px;text-align: center;cursor: pointer;flex: 0 0 9.09%;position: relative;z-index: 2;transition: .3s all;}
.mobile-app-panel .mobile-app-wrap .category-apps .tab-buttons li.active{font-weight: bold;color: #ffffff;}
.mobile-app-panel .mobile-app-wrap .category-apps .tab-buttons .tab-indicator{position: absolute;width: 9.09%;height: 100%;background-color: #4AABFF;z-index: 1;transition: transform .3s ease;}
.mobile-app-panel .mobile-app-wrap .category-apps .tab-buttons .tab-indicator::after{position: absolute; width: 18px; height: 36px; background-color: #4AABFF; content: ""; clip-path: polygon(0 0, 0% 100%, 100% 100%); right: -17.5px; top: 0px;}
.mobile-app-panel .mobile-app-wrap .category-apps .tab-buttons .tab-indicator.last-tab::after{left: -17.5px;right: unset;transform: scaleX(-1);}
.mobile-app-panel .mobile-app-wrap .category-apps .tab-contents{width: 810px;float: left;}
.mobile-app-panel .mobile-app-wrap .category-apps .tab-content{display: none;justify-content: space-between;}
.mobile-app-panel .mobile-app-wrap .category-apps .tab-content.active{display:block;}
.mobile-app-panel .mobile-app-wrap .category-apps .tab-content .category-app-list{width: 810px;flex: 0 0 810px;max-width: 810px;display: flex;flex-wrap: wrap;column-gap: 42px;row-gap: 27px;}
.mobile-app-panel .mobile-app-wrap .category-apps .tab-content .category-app-list a{display: flex;flex-direction: column;row-gap: 8px;width: 100px;flex: 0 0 100px;max-width: 100px;overflow: hidden;transition: transform .3s ease;}
.mobile-app-panel .mobile-app-wrap .category-apps .tab-content .category-app-list a:hover{transform: translateY(-5px) scale(1.02);}
.mobile-app-panel .mobile-app-wrap .category-apps .tab-content .category-app-list a img{width: 100px;height: 100px;border-radius: 24px;display: block;object-fit: cover;}
.mobile-app-panel .mobile-app-wrap .category-apps .tab-content .category-app-list a p{font-size: 16px;text-align: center;color: #404040;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank{width: 304px;flex: 0 0 304px;max-width: 304px;display: flex;flex-direction: column;row-gap: 23px;float: right;height: 445px;}
.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank .cat-app-rank-title{width: 100%;height: 40px;line-height: 40px;text-align: center;padding: 0 10px;background-color: #4AABFF;border-radius: 20px;font-size: 18px;font-weight: bold;color: #ffffff;}
.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank .app-rank-list{display: flex;flex-direction: column;justify-content: space-between;height: 100%;}
.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank .app-rank-list a{display: flex;align-items: center;}
.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank .app-rank-list a .rankNo{width: 30px;height: 24px;margin-right: 20px;text-align: center;line-height: 24px;font-size: 14px;font-weight: bold;color: #B3B3B3;}
.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank .app-rank-list a .rankNo img{width: 100%;height: 100%;object-fit: cover;display: block;}
.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank .app-rank-list a p.name{font-size: 16px;color: #404040;max-width: 170px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank .app-rank-list a p.size{margin-left: auto;font-size: 14px;color: #999999;}
.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank .app-rank-list a:hover p.name{font-weight: bold;color: #4AABFF;}


/*.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank{width: 304px;flex: 0 0 304px;max-width: 304px;display: flex;flex-direction: column;row-gap: 23px;}
.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank .cat-app-rank-title{width: 100%;height: 40px;line-height: 40px;text-align: center;padding: 0 10px;background-color: #4AABFF;border-radius: 20px;font-size: 18px;font-weight: bold;color: #ffffff;}
.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank .app-rank-list{display: flex;flex-direction: column;justify-content: space-between;height: 100%;}
.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank .app-rank-list a{display: flex;align-items: center;}
.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank .app-rank-list a .rankNo{width: 30px;height: 24px;margin-right: 20px;text-align: center;line-height: 24px;font-size: 14px;font-weight: bold;color: #B3B3B3;}
.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank .app-rank-list a .rankNo img{width: 100%;height: 100%;object-fit: cover;display: block;}
.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank .app-rank-list a p.name{font-size: 16px;color: #404040;max-width: 170px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank .app-rank-list a p.size{margin-left: auto;font-size: 14px;color: #999999;}
.mobile-app-panel .mobile-app-wrap .category-apps .category-app-rank .app-rank-list a:hover p.name{font-weight: bold;color: #4AABFF;}*/

.topic-panel{margin-top: 24px;background-color: #434343;}
.topic-panel .topicWrap{padding: 30px 24px;position: relative;}
.topic-panel .topicWrap .overlay-title{font-size: 36px;font-weight: bold;color: #ffffff;opacity: 0.1;position: absolute;top: 8px;left: 50%;transform: translateX(-50%);}
.topic-panel .topicWrap h2{text-align: center;font-size: 36px;font-weight: bold;color: #ffffff;margin-bottom: 25px;}
.topic-panel .topicWrap .topic-list{display: flex;flex-wrap: wrap;}
.topic-panel .topicWrap .topic-list a{display: flex;flex: 0 0 50%;max-width: 50%;}
.topic-panel .topicWrap .topic-list a > img{width: 288px;flex: 0 0 288px;max-width: 288px;height: 190px;object-fit: cover;display: block;}
.topic-panel .topicWrap .topic-list a .topicDetail{display: flex;flex-direction: column;overflow: hidden;padding-left: 18px;padding-bottom: 5px;padding-right: 20px;padding-top: 12px;}
.topic-panel .topicWrap .topic-list a .topicDetail .titleTop{display: flex;align-items: center;justify-content: space-between;position: relative;margin-bottom: 20px;}
.topic-panel .topicWrap .topic-list a .topicDetail .titleTop::before{position: absolute;content: "";width: 4px;height: 20px;background-color: #ffffff;left: -18px;top: 50%;transform: translateY(-50%);}
.topic-panel .topicWrap .topic-list a .topicDetail .titleTop h4{font-size: 24px;font-weight: bold;color: #ffffff;line-height: 30px;/*max-width: 150px;*/overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-panel .topicWrap .topic-list a .topicDetail .titleTop p{font-size: 24px;font-weight: bold;color: #ffffff;line-height: 30px;/*max-width: 150px;*/overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-panel .topicWrap .topic-list a .topicDetail .titleTop .amount{font-size: 14px;font-weight: bold;color: #ffffff;}
.topic-panel .topicWrap .topic-list a .topicDetail .titleTop .amount span{font-size: 24px;color: #4AABFF;}
.topic-panel .topicWrap .topic-list a .topicDetail .topicContent{font-size: 14px;color: #FFFFFFB3;display: -webkit-box; -webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;margin-bottom: 15px;}
.topic-panel .topicWrap .topic-list a .topicDetail p.date{font-size: 14px;color: #FFFFFFB3;}
.topic-panel .topicWrap .topic-list a:nth-child(3), .topic-panel .topicWrap .topic-list a:nth-child(4){flex-direction: row-reverse;}
.topic-panel .topicWrap .topic-list a:hover .topicDetail .titleTop h4{color:#4AABFF}
.topic-panel .topicWrap .topic-list a:hover .topicDetail .titleTop p{color:#4AABFF}


.ranking-panel{margin-top: 24px;}
.ranking-panel .ranking-list-wrap{display: flex;justify-content: space-between;}
.ranking-panel .ranking-list-wrap .rank-listing{background-color: #ffffff;border-radius: 5px;padding: 16px 24px 24px 27px;width: 387px;flex: 0 0 387px;max-width: 387px;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap{display: flex;flex-direction: column;row-gap: 20px;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-title{display: flex;justify-content: space-between;align-items: flex-end;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-title > img{width: 90px;height: auto;display: block;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-title .moreBtn{font-size: 14px;color: #999999;display: flex;align-items: center;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-title a img{width: 14px;filter: brightness(0) saturate(100%) invert(73%) sepia(35%) saturate(0%) hue-rotate(240deg) brightness(94%) contrast(87%);}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list{display: flex;flex-direction: column;row-gap: 18px;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap{display: flex;align-items: center;position: relative;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap .rankNo{width: 24px;height: 24px;text-align: center;line-height: 24px;font-size: 18px;font-weight: bold;color: #999999;margin-right: 20px;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap .infoWrap{display: flex;align-items: center;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap .infoWrap > a img{width: 108px;height: 108px;flex: 0 0 108px;max-width: 108px;border-radius: 24px;display: none;margin-right: 16px;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap .infoWrap .infoDetailWrap{display: flex;flex-direction: column;overflow: hidden;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap .infoWrap .infoDetailWrap a h4{font-size: 18px;color: #404040;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: normal;width: 210px;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap .infoWrap .infoDetailWrap a p{font-size: 18px;color: #404040;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: normal;width: 210px;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap .infoWrap .infoDetailWrap > span{background-color: #F5F6F8;padding: 1px 3.5px;font-size: 14px;color: #9DA3AA;margin-bottom: 18px;width: max-content;display: none;margin-top: 10px;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap .infoWrap .infoDetailWrap > p{color: #9DA3AA;font-size: 14px;display: none;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap .rightWrap{margin-left: auto;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap .rightWrap p{color: #9DA3AA;font-size: 14px;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap.active{margin-bottom: 2px;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap.active .infoWrap > a img{display: block;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap.active .infoWrap .infoDetailWrap > span{display: block;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap.active .infoWrap .infoDetailWrap > p{display: block;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap.active .rightWrap{display: none;}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap.active .rankNo{position: absolute;left: -27px;top: 0;color: #ffffff;margin-right: 0;background-color: #999999;width: 38px;height: 32px;line-height: 32px;clip-path: polygon(0 0, 100% 0, 79% 100%, 0% 100%);}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap.active.first .rankNo{background-color: #FC564C;box-shadow: 0px 6px 6px 0px rgba(252, 86, 76, 0.2);}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap.active.second .rankNo{background-color: #2A84FE;box-shadow: 0px 6px 6px 0px rgba(42, 132, 254, 0.2);}
.ranking-panel .ranking-list-wrap .rank-listing .rankWrap .rank-list .rank-item-wrap.active.third .rankNo{background-color: #FFAB00;box-shadow: 0px 6px 6px 0px rgba(255, 171, 0, 0.2);}

.article-panel{margin-top: 24px;}
.article-panel .article-wrap{background-color: #ffffff;border-radius: 5px;justify-content: space-between;padding: 20px 24px 24px;display: flex;}
.article-panel .article-wrap .guide-block{width: 326px;flex: 0 0 326px;max-width: 326px;}
.article-panel .article-wrap .guide-block .titleWrap{margin-bottom: 20px;}
.article-panel .article-wrap .guide-block .guide-list{display: flex;flex-direction: column;row-gap: 18px;}
.article-panel .article-wrap .guide-block .guide-list a{display: flex;column-gap: 20px;}
.article-panel .article-wrap .guide-block .guide-list a > img{width: 120px;flex: 0 0 120px;max-width: 120px;height: 68px;border-radius: 8px;}
.article-panel .article-wrap .guide-block .guide-list a .detailWrap{display: flex;flex-direction: column;justify-content: space-between;height: 68px;}
.article-panel .article-wrap .guide-block .guide-list a .detailWrap h4{font-size: 16px;color: #404040;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;font-weight: normal;}
.article-panel .article-wrap .guide-block .guide-list a .detailWrap p{font-size: 14px;color: #999999;}

.article-panel .article-wrap .article-block{display: flex;flex-direction: column;row-gap: 15px;width: 450px;max-width: 450px;flex: 0 0 450px;}
.article-panel .article-wrap .article-block a{position: relative;display: flex;align-items: center;padding-left: 10px;overflow: hidden;}
.article-panel .article-wrap .article-block a::before{position: absolute;content: "";width: 4px;height: 4px;border-radius: 50%;background-color: #4AABFF;left: 0;top: 50%;transform: translateY(-50%);}
.article-panel .article-wrap .article-block a > img{width: 224px;height: 130px;border-radius: 8px;object-fit: cover;margin-right: 20px;flex: 0 0 224px;max-width: 224px;display: none;}
.article-panel .article-wrap .article-block a .infoWrap{display: flex;align-items: center;width: 100%;}
.article-panel .article-wrap .article-block a .infoWrap h4{font-size: 16px;color: #404040;width: 374px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: normal;}
.article-panel .article-wrap .article-block a .infoWrap p.content{font-size: 14px;color: #999999;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;display: none;}
.article-panel .article-wrap .article-block a .infoWrap p.date{font-size: 14px;color: #999999;margin-left: auto;}
.article-panel .article-wrap .article-block a.active > img{display: block;}
.article-panel .article-wrap .article-block a.active .infoWrap{display: flex ; flex-direction: column; height: 100%; justify-content: space-between;}
.article-panel .article-wrap .article-block a.active .infoWrap p.content{display: -webkit-box;}
.article-panel .article-wrap .article-block a.active .infoWrap p.date{display: none;}
.article-panel .article-wrap .article-block a.active::before{display: none;}
.article-panel .article-wrap .article-block a.active .infoWrap h4{font-size: 20px;font-weight: bold;width: unset;text-overflow: unset;white-space: unset;display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.article-panel .article-wrap .article-block a.active{padding-left: 0;margin-bottom: 8px;}

.friendship-link-panel{margin-top: 24px;}
.friendship-link-panel .friendship-link-wrap{background-color: #FFFFFF;border-radius: 5px;padding: 30px 24px 24px;position: relative;}
.friendship-link-panel .friendship-link-wrap .overlay-title{font-size: 36px;font-weight: bold;color: #404040;opacity: 0.1;position: absolute;top: 8px;left: 50%;transform: translateX(-50%);}
.friendship-link-panel .friendship-link-wrap h2{text-align: center;font-size: 36px;font-weight: bold;color: #404040;margin-bottom: 25px;}
.friendship-link-panel .friendship-link-wrap .link-list{display: flex;flex-wrap: wrap;column-gap: 38px;row-gap: 20px;}
.friendship-link-panel .friendship-link-wrap .link-list a{width: 200px;flex: 0 0 200px;max-width: 200px;height: 40px;line-height: 40px;text-align: center;padding: 0 10px;background-color: #F3F3F3;border-radius: 20px;color: #404040;font-size: 16px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}