.top-ranking-panel{margin-top: 10px;}
.top-ranking-panel .topWrap{display: flex;flex-direction: column;row-gap: 24px;}
.top-ranking-panel .topWrap .top-tab-banner{background-image: url(../images/top/rank-banner.png);background-repeat: no-repeat;background-size: cover;border-radius: 5px;width: 100%;height: 200px;position: relative;overflow: hidden;display: flex;justify-content: center;flex-direction: column;}
.top-ranking-panel .topWrap .top-tab-banner::before{content: '';display: block;width: 137px;height: 175px;background: url(../images/top/banner-icon-left.png) no-repeat;position: absolute;left: 138px;top: 50%;transform: translateY(-50%);}
.top-ranking-panel .topWrap .top-tab-banner::after{content: '';display: block;width: 215px;height: 230px;background: url(../images/top/banner-icon-right.png) no-repeat;position: absolute;right: 93px;top: 12px;}


.top-ranking-panel .topWrap .top-tab-banner .banner-icon-left{position: absolute;width: 137px;height: auto;display: block;left: 138px;top: 50%;transform: translateY(-50%);}
.top-ranking-panel .topWrap .top-tab-banner .banner-icon-right{position: absolute;width: 215px;height: auto;display: block;right: 93px;top: 12px;}

.top-ranking-panel .topWrap .top-tab-banner h1{text-align: center;font-size: 72px;font-weight: bold;color: #FFFFFF;text-shadow: 0px 4px 2px rgba(61, 33, 19, 0.2);position: relative;width: fit-content;margin: 0 auto 20px;}
.top-ranking-panel .topWrap .top-tab-banner h1::before{position: absolute;content: "";background-image: url(../images/top/banner-title-icon.png);width: 64px;height: 65px;display: block;top: -22px;left: -25px;}
.top-ranking-panel .topWrap .top-tab-banner > span{text-align: center;    color: #802D0F;}

.top-ranking-panel .topWrap .top-tab-banner .top-tab-list{display: flex;align-items: center;justify-content: center;column-gap: 45px;}
.top-ranking-panel .topWrap .top-tab-banner .top-tab-list a{font-size: 18px;color: #802D0F;transition: .3s all;}
.top-ranking-panel .topWrap .top-tab-banner .top-tab-list a.active, .top-ranking-panel .topWrap .top-tab-banner .top-tab-list a:hover{font-size: 24px;font-weight: bold;color: #FFFFFFCC;}

.hot-rank-panel{display: flex;align-items: center;justify-content: space-between;}
.hot-rank-panel .hot-rank-column{width: 284px;max-width: 284px;flex: 0 0 284px;background-color: #ffffff;border-radius: 5px;padding: 20px 24px;display: flex;flex-direction: column;}
.hot-rank-panel .hot-rank-column .hot-rank-title{position: relative;font-size: 22px;color: #404040;text-align: center;margin: 0 auto 20px;width: fit-content;}
.hot-rank-panel .hot-rank-column .hot-rank-title::before{position: absolute;content: "";width: 12px;height: 12px;border-radius: 50%;background-color: #D2D2D2;top: 50%;transform: translateY(-50%);left: -28px;}
.hot-rank-panel .hot-rank-column .hot-rank-title::after{position: absolute;content: "";width: 12px;height: 12px;border-radius: 50%;background-color: #D2D2D2;top: 50%;transform: translateY(-50%);right: -28px;}
/*.hot-rank-panel .hot-rank-column .hot-rank-title span{position: relative;}*/
.hot-rank-panel .hot-rank-column .hot-rank-title span{max-width: 170px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;}
.hot-rank-panel .hot-rank-column .hot-rank-title span::before{position: absolute;content: "";width: 8px;height: 8px;border-radius: 50%;background-color: #D2D2D2;top: 50%;transform: translateY(-50%);left: -50px;}
.hot-rank-panel .hot-rank-column .hot-rank-title span::after{position: absolute;content: "";width: 8px;height: 8px;border-radius: 50%;background-color: #D2D2D2;top: 50%;transform: translateY(-50%);right: -50px;}
.hot-rank-panel .hot-rank-column .hot-rank-list{display: flex;flex-direction: column;row-gap: 18px;}
.hot-rank-panel .hot-rank-column .hot-rank-list a{display: flex;align-items: center;}
.hot-rank-panel .hot-rank-column .hot-rank-list a::before{content: '';display: block;width: 18px;height: 24px;background: url("../images/top/1.png") no-repeat;margin-right: 12px;background-size: 18px 24px;}
.hot-rank-panel .hot-rank-column .hot-rank-list>a:nth-child(1)::before{background-image: url("../images/top/1.png")}
.hot-rank-panel .hot-rank-column .hot-rank-list>a:nth-child(2)::before{background-image: url("../images/top/2.png")}
.hot-rank-panel .hot-rank-column .hot-rank-list>a:nth-child(3)::before{background-image: url("../images/top/3.png")}

.hot-rank-panel .hot-rank-column .hot-rank-list a > img{width: 18px;height: 24px;display: block;object-fit: cover;margin-right: 12px;}
.hot-rank-panel .hot-rank-column .hot-rank-list a p.name{font-size: 16px;color: #404040;width: 130px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;transition: .3s all;}
.hot-rank-panel .hot-rank-column .hot-rank-list a p.size{font-size: 14px;color: #999999;margin-left: auto;}
.hot-rank-panel .hot-rank-column .viewMore{color: #CCCCCC;font-size: 14px;font-weight: bold;margin: 14px auto 0;display: flex;align-items: center;}
.hot-rank-panel .hot-rank-column .viewMore::after{content: '>>';display: block;width: 14px;position: relative;    font-size: 12px;
    top: -1px;
    margin-left: 5px;}
.hot-rank-panel .hot-rank-column .viewMore img{width: 14px;filter: brightness(0) saturate(100%) invert(88%) sepia(0%) saturate(0%) hue-rotate(208deg) brightness(96%) contrast(86%);}
.hot-rank-panel .hot-rank-column .hot-rank-list a:hover p.name{color: #4AABFF;}

.rank-tab-panel{background-color: #ffffff;border-radius: 5px;padding: 24px;display: flex;flex-wrap: wrap;gap: 10px;margin-bottom: 5px;}
.rank-tab-panel a{background-color: #F5F5F5;border-radius: 5px;min-width: 280px;height: 40px;line-height: 40px;text-align: center;font-size: 16px;color: #666666;transition: .3s all;}
.rank-tab-panel a:hover, .rank-tab-panel a.active{background-color: #4AABFF;color: #ffffff;}

.rank-item-list-panel{background-color: #ffffff;border-radius: 5px;padding: 10px 24px 14px;display: flex;flex-direction: column;}
.rank-item-list-panel > ul{overflow: hidden;}
.rank-item-list-panel > ul > li{    padding: 20px 0;    border-bottom: 1px solid #EEEEEE;}
.rank-item-list-panel > ul > li:last-child{border-bottom: 0;}
.rank-item-list-panel > ul > li > a{display: block;overflow: hidden;height: 100px;}
.rank-item-list-panel > ul > li > a > i{display: block;float: left;    margin-right: 16px;    width: 35px;
    height: 38px;    background-color: #EEEEEE;
    border-radius: 5px;
    line-height: 38px;
    text-align: center;
    color: #999999;
    font-size: 20px;font-style: unset;    font-weight: bold;margin-top: 31px;}
.rank-item-list-panel > ul > li:nth-child(-n+3) > a > i{font-size: 0;background-color: unset;height: 44px;background: url("../images/top/1.png") no-repeat;background-size: 35px 44px;}
.rank-item-list-panel > ul > li:nth-child(1) > a > i{background-image: url("../images/top/1.png")}
.rank-item-list-panel > ul > li:nth-child(2) > a > i{background-image: url("../images/top/2.png")}
.rank-item-list-panel > ul > li:nth-child(3) > a > i{background-image: url("../images/top/3.png")}

.rank-item-list-panel > ul > li > a > img{    width: 100px;
    height: 100px;
    border-radius: 24px;
    margin-right: 18px;float: left;}
.rank-item-list-panel > ul > li > a > div{float: left;overflow:hidden;width: 855px;}
.rank-item-list-panel > ul > li > a > div > p{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.rank-item-list-panel > ul > li > a > div > p:nth-child(1){    font-size: 24px;
    font-weight: bold;
    color: #404040;margin-bottom: 10px;}
.rank-item-list-panel > ul > li > a > div > p:nth-child(2){    margin-bottom: 5px;}
.rank-item-list-panel > ul > li > a > div > p:nth-child(2) > span{margin-right: 25px;    font-size: 16px;
    color: #999999;}
.rank-item-list-panel > ul > li > a > div > p:nth-child(2) > span:last-child{margin-right: 0;}
.rank-item-list-panel > ul > li > a > div > p:nth-child(3){font-size: 16px;
    color: #999999;}
.rank-item-list-panel > ul > li > a > span{display: block;width: 100px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border: 1px solid #4AABFF;
    font-size: 14px;
    color: #4AABFF;
    border-radius: 18px;float: right;margin-top: 32px;}
.rank-item-list-panel > ul > li:hover > a > div > p:nth-child(1){color: #4AABFF;}
.rank-item-list-panel > ul > li:hover > a > span{background: #4AABFF;color: #fff;}

/*
.rank-item-list-panel{background-color: #ffffff;border-radius: 5px;padding: 10px 24px 14px;display: flex;flex-direction: column;}
.rank-item-list-panel .rank-item-wrap{display: flex;align-items: center;padding: 20px 0;border-bottom: 1px solid #EEEEEE;}
.rank-item-list-panel .rank-item-wrap:last-child{border-bottom: none;}
.rank-item-list-panel .rank-item-wrap .rankNo{width: 35px;height: 38px;margin-right: 16px;background-color: #EEEEEE;border-radius: 5px;line-height: 38px;text-align: center;color: #999999;font-size: 20px;font-weight: bold;}
.rank-item-list-panel .rank-item-wrap.first .rankNo, .rank-item-list-panel .rank-item-wrap.second .rankNo, .rank-item-list-panel .rank-item-wrap.third .rankNo{background-color: unset;height: 44px;}
.rank-item-list-panel .rank-item-wrap .rankNo img{width: 100%;height: 100%;object-fit: cover;display: block;}
.rank-item-list-panel .rank-item-wrap a > img{width: 100px;height: 100px;border-radius: 24px;margin-right: 18px;}
.rank-item-list-panel .rank-item-wrap .item-detail{display: flex;flex-direction: column;flex: 0 0 856px;width: 856px;max-width: 856px;}
.rank-item-list-panel .rank-item-wrap .item-detail h4{font-size: 24px;font-weight: bold;color: #404040;margin-bottom: 10px;transition: .3s all;}
.rank-item-list-panel .rank-item-wrap .item-detail .sizeUpdate{display: flex;align-items: center;column-gap: 26px;margin-bottom: 5px;}
.rank-item-list-panel .rank-item-wrap .item-detail .sizeUpdate p{font-size: 16px;color: #999999;}
.rank-item-list-panel .rank-item-wrap .item-detail .content{display: flex;align-items: center;overflow: hidden;}
.rank-item-list-panel .rank-item-wrap .item-detail .content span{font-size: 16px;color: #999999;white-space: nowrap;}
.rank-item-list-panel .rank-item-wrap .item-detail .content p{font-size: 16px;color: #999999;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.rank-item-list-panel .rank-item-wrap .downloadBtn{margin-left: auto;width: 100px;height: 36px;line-height: 36px;text-align: center;border: 1px solid #4AABFF;font-size: 14px;color: #4AABFF;border-radius: 18px;}
.rank-item-list-panel .rank-item-wrap:hover .item-detail h4{color: #4AABFF;}
*/

.hot-rank-tab-panel{background-color: #ffffff;border-radius: 5px;padding: 20px 24px 24px;display: flex;flex-direction: column;row-gap: 20px;}
.hot-rank-tab-panel h2{font-size: 24px;font-weight: bold;color: #404040;}
.hot-rank-tab-panel > p{font-size: 24px;font-weight: bold;color: #404040;}
.hot-rank-tab-panel .hot-rank-tab-list{display: flex;flex-wrap: wrap;column-gap: 38px;row-gap: 20px;}
.hot-rank-tab-panel .hot-rank-tab-list a{display: flex;align-items: center;justify-content: center;column-gap: 3px;min-width: 200px;height: 40px;border-radius: 20px;background-color: #F3F3F3;font-size: 16px;color: #404040;transition: .3s all;}
.hot-rank-tab-panel .hot-rank-tab-list a::before{content: '';display: block;width: 16px;height: 18px;background: url("../images/top/hot-icon.png") no-repeat;}
.hot-rank-tab-panel .hot-rank-tab-list a img{width: 16px;height: auto;display: block;}
.hot-rank-tab-panel .hot-rank-tab-list a:hover{background-color: #4AABFF;color: #ffffff;}