/* Original ranking page styles scoped to the new local route. */
.rankings-page{margin: 0px; background-color: rgb(255, 255, 255); font: 14px / 1.4 "pingfang sc", "Segoe UI", "Microsoft YaHei", "Hiragino Sans GB", arial, sans-serif; color: rgb(51, 51, 51); -webkit-font-smoothing: antialiased; text-size-adjust: none;}
.rankings-page ul,.rankings-page li,.rankings-page ol{list-style: none; padding-left: 0px;}
.rankings-page h1,.rankings-page h2,.rankings-page h3,.rankings-page h4,.rankings-page h5,.rankings-page h6,.rankings-page p,.rankings-page ul,.rankings-page ol,.rankings-page form{margin: 0px; font-size: 100%; font-weight: normal; -webkit-tap-highlight-color: transparent;}
.rankings-page em{font-style: normal;}
.rankings-page img{border: 0px;}
.rankings-page input,.rankings-page img{vertical-align: middle; border-style: solid;}
.rankings-page input,.rankings-page textarea{font-family: tahoma, arial, "pingfang sc", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;}
.rankings-page *{box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
.rankings-page a{text-decoration: none; color: rgb(51, 51, 51); -webkit-tap-highlight-color: transparent;}
.rankings-page a:hover{text-decoration: none;}
.rankings-page a{}
.rankings-page :focus{outline: none;}
.rankings-page .clearfix{zoom: 1;}
.rankings-page .clearfix::after{content: " "; display: block; height: 0px; clear: both;}
.rankings-page .category-title{position: relative; padding: 0px 10px; height: 48px; line-height: 48px; font-size: 48px; color: rgb(51, 51, 51);}
@media (max-width: 400px){
.rankings-page .category-title{font-size: 16px;}
}
.rankings-page .category-title span{position: relative; margin-left: 20px; padding-left: 20px; top: 2px; display: inline-block; line-height: 48px; color: rgb(153, 153, 153);}
.rankings-page .category-title span::before{content: ""; position: absolute; top: 7px; left: 0px; z-index: 0; width: 1px; height: 38px; background-color: rgb(153, 153, 153);}
.rankings-page .cm-duration{position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 0px 5px; min-width: 44px; height: 20px; line-height: 20px; font-size: 12px; color: rgb(215, 215, 215); text-align: center; background-color: rgba(0, 0, 0, 0.7); border-radius: 2px;}
@media only screen and (min-width: 992px){
.rankings-page .popular-navlist li:hover a{color: rgb(51, 51, 51); border-bottom: 2px solid rgb(255, 209, 0);}
.rankings-page .popularembd:hover .popularem-title{color: rgb(255, 141, 0);}
}
.rankings-page.popular-main{margin: 0px auto; padding: 60px 40px 0px; max-width: 1280px;}
.rankings-page .popular-bd{position: relative; margin: 0px auto; padding: 40px 10px 0px;}
.rankings-page .popular-nav{height: 27px; overflow: hidden;}
.rankings-page .popular-navlist{width: 100%; height: 27px;}
.rankings-page .popular-navlist li{float: left; height: 27px; line-height: 20px;}
.rankings-page .popular-navlist li a{padding-bottom: 5px; height: 27px; display: inline-block; line-height: 20px; font-size: 20px; color: rgb(153, 153, 153);}
.rankings-page .popular-navlist li.on a{color: rgb(51, 51, 51); font-weight: bold; border-bottom: 2px solid rgb(255, 209, 0);}
.rankings-page .popular-list{padding-top: 13px;}
.rankings-page .popularem{margin-top: 40px; width: 100%; height: 216px; overflow: hidden;}
.rankings-page .popularem-sort{float: left; position: relative; width: 148px; height: 216px; line-height: 216px; font-size: 48px; color: rgb(51, 51, 51); text-align: center;}
.rankings-page .popularem-img{position: relative; float: left; width: 384px; height: 216px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.rankings-page .popularem-ath{position: relative; margin-left: 532px; padding: 20px 20px 40px; height: 216px; background-color: rgb(242, 242, 242);}
.rankings-page .popularembd{display: block; width: 100%; height: 100%;}
.rankings-page .popularem-title{min-height: 30px; line-height: 30px; font-size: 26px; color: rgb(51, 51, 51);}
.rankings-page .popularem-abs{margin-top: 20px; max-height: 84px; line-height: 21px; font-size: 14px; color: rgb(153, 153, 153); overflow: hidden;}
.rankings-page .vercont-auto{position: absolute; bottom: 18px; left: 0px; z-index: 2; padding-left: 20px; width: 100%; height: 16px; text-align: center;}
.rankings-page .vercont-auto span{float: left; margin-right: 10px; display: inline-block; vertical-align: middle; height: 16px; line-height: 16px; font-size: 12px; color: rgb(153, 153, 153);}
.rankings-page .vercont-auto .source{padding: 1px 2px; min-width: 32px; line-height: 1; color: rgb(255, 141, 0); border: 1px solid rgb(255, 141, 0); border-radius: 2px;}
.rankings-page .vercont-auto .source.dj{color: rgb(74, 144, 226); border: 1px solid rgb(74, 144, 226);}
.rankings-page .vercont-auto .fav{margin-right: 0px; padding-left: 18px; min-width: 32px; line-height: 15px; background-image: url("/img/act_fav_icon.png"); background-repeat: no-repeat; background-position: 0px 1px; background-size: 14px auto; cursor: pointer;}
.rankings-page .vercont-auto .fav:hover{background-position: 0px -18px;}
@media only screen and (max-width: 759px){
.rankings-page .popularem-sort{width: 32px; height: 100%; font-size: 12px; line-height: 80px; vertical-align: middle;}
.rankings-page .cm-duration{right: 14px; bottom: 6px;}
.rankings-page .vercont-auto{display: none;}
.rankings-page .popularem-abs{margin-top: 0px; max-height: 84px; line-height: 21px; font-size: 14px; color: rgb(153, 153, 153); overflow: hidden;}
.rankings-page .popularem-img{width: 120px; height: 81px;}
}
@media only screen and (min-width: 760px) and (max-width: 991px){
.rankings-page.popular-main{padding: 40px 12px 0px;}
.rankings-page .popular-bd{padding: 40px 10px 0px;}
.rankings-page .popular-list{padding-top: 23px;}
.rankings-page .popularem{margin-top: 20px; height: 126px;}
.rankings-page .popularem-sort{width: 92px; height: 126px; line-height: 126px; font-size: 36px;}
.rankings-page .popularem-img{width: 224px; height: 126px;}
.rankings-page .popularem-ath{margin-left: 316px; padding: 15px 20px 35px; height: 126px;}
.rankings-page .popularem-ath .vercont-auto{bottom: 15px;}
.rankings-page .popularem-title{min-height: 20px; height: 20px; line-height: 20px; font-size: 20px; overflow: hidden;}
.rankings-page .popularem-abs{margin-top: 10px; max-height: 40px; line-height: 20px;}
}
@media only screen and (min-width: 400px) and (max-width: 759px){
.rankings-page .category-title{padding: 0px 20px; height: 28px; line-height: 28px; font-size: 28px; color: rgb(51, 51, 51);}
}
@media only screen and (max-width: 399px){
.rankings-page .category-title{padding: 0px 10px; font-size: 16px; color: rgb(51, 51, 51);}
}
@media only screen and (min-width: 320px) and (max-width: 759px){
.rankings-page .category-title span{margin-left: 14px; padding-left: 14px; top: 0px; line-height: 28px;}
.rankings-page .category-title span::before{content: ""; position: absolute; top: 2px; left: 0px; z-index: 0; width: 1px; height: 24px; background-color: rgb(153, 153, 153);}
.rankings-page.popular-main{padding: 20px 0px 0px;}
.rankings-page .popular-main .category-title{padding: 0px 20px;}
.rankings-page .popular-bd{padding: 30px 0px 0px;}
.rankings-page .popular-nav{position: relative; margin: 0px 10px 0px 20px; height: 23px;}
.rankings-page .popular-nav::after{position: absolute; right: -10px; top: 0px; z-index: 2; content: " "; width: 100px; height: 20px; background: url("/img/popular_opactiy.png") right center / auto 100% no-repeat;}
.rankings-page .popular-nav.slide-end::after{display: none;}
.rankings-page .popular-navlist{height: 23px;}
.rankings-page .popular-navlist li{height: 23px; line-height: 16px;}
.rankings-page .popular-navlist li a{height: 23px; line-height: 16px; font-size: 14px;}
.rankings-page .popular-list{padding: 5px 5px 0px;}
.rankings-page .popularem{margin-top: 15px; height: 81px;}
.rankings-page .popularem-ath{margin-left: 144px; padding: 10px 10px 30px; height: 81px;}
.rankings-page .popularem-ath .vercont-auto{bottom: 8px; padding-left: 10px;}
.rankings-page .popularem-ath .vercont-auto .fav{display: none;}
.rankings-page .popularem-title{max-height: 36px; line-height: 18px; font-size: 14px;}
}
@media only screen and (min-width: 992px) and (max-width: 1120px){
.rankings-page .popularem{height: 162px;}
.rankings-page .popularem-sort{width: 111px; height: 162px; line-height: 162px; font-size: 36px;}
.rankings-page .popularem-img{width: 288px; height: 162px;}
.rankings-page .popularem-ath{margin-left: 399px; height: 162px;}
.rankings-page .popularem-title{height: 26px; line-height: 26px; font-size: 24px;}
.rankings-page .popularem-abs{margin-top: 15px; max-height: 60px; line-height: 20px;}
}
@media only screen and (min-width: 1600px){
.rankings-page.popular-main{max-width: 1440px;}
}
.rankings-page .swiper-wrapper{position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box;}
.rankings-page .swiper-wrapper{transform: translate3d(0px, 0px, 0px);}
.rankings-page .swiper-container-free-mode > .swiper-wrapper{transition-timing-function: ease-out; margin: 0px auto;}
.rankings-page .swiper-slide{flex-shrink: 0; width: 100%; height: 100%; position: relative;}
.rankings-page{margin: 0px; background-color: rgb(255, 255, 255); font: 14px / 1.4 "pingfang sc", "Segoe UI", "Microsoft YaHei", "Hiragino Sans GB", arial, sans-serif; color: rgb(51, 51, 51); -webkit-font-smoothing: antialiased; text-size-adjust: none;}
.rankings-page ul,.rankings-page li,.rankings-page ol{list-style: none; padding-left: 0px;}
.rankings-page h1,.rankings-page h2,.rankings-page h3,.rankings-page h4,.rankings-page h5,.rankings-page h6,.rankings-page p,.rankings-page ul,.rankings-page ol,.rankings-page form{margin: 0px; font-size: 100%; font-weight: normal; -webkit-tap-highlight-color: transparent;}
.rankings-page em{font-style: normal;}
.rankings-page img{border: 0px;}
.rankings-page input,.rankings-page img{vertical-align: middle; border-style: solid;}
.rankings-page input,.rankings-page textarea{font-family: tahoma, arial, "pingfang sc", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;}
.rankings-page *{box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
.rankings-page a{text-decoration: none; color: rgb(51, 51, 51); -webkit-tap-highlight-color: transparent;}
.rankings-page a:hover{text-decoration: none;}
.rankings-page a{}
.rankings-page :focus{outline: none;}
.rankings-page .clearfix{zoom: 1;}
.rankings-page .clearfix::after{content: " "; display: block; height: 0px; clear: both;}
.rankings-page .category-title{position: relative; padding: 0px 10px; height: 48px; line-height: 48px; font-size: 48px; color: rgb(51, 51, 51);}
@media (max-width: 400px){
.rankings-page .category-title{font-size: 16px;}
}
.rankings-page .category-title span{position: relative; margin-left: 20px; padding-left: 20px; top: 2px; display: inline-block; line-height: 48px; color: rgb(153, 153, 153);}
.rankings-page .category-title span::before{content: ""; position: absolute; top: 7px; left: 0px; z-index: 0; width: 1px; height: 38px; background-color: rgb(153, 153, 153);}
.rankings-page .cm-duration{position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 0px 5px; min-width: 44px; height: 20px; line-height: 20px; font-size: 12px; color: rgb(215, 215, 215); text-align: center; background-color: rgba(0, 0, 0, 0.7); border-radius: 2px;}
@media only screen and (min-width: 992px){
.rankings-page .popular-navlist li:hover a{color: rgb(51, 51, 51); border-bottom: 2px solid rgb(255, 209, 0);}
.rankings-page .popularembd:hover .popularem-title{color: rgb(255, 141, 0);}
}
.rankings-page.popular-main{margin: 89px auto 0px; padding-top: 32px;}
.rankings-page .popular-nav,.rankings-page .popular-navlist{height: 34px;}
.rankings-page .popular-navlist li{width: auto; height: 34px;}
.rankings-page .popular-navlist li a{height: 34px; line-height: 28px; white-space: nowrap;}
@media (max-width: 759px){
.rankings-page.popular-main{padding-top: 24px;}
.rankings-page .popular-nav,.rankings-page .popular-navlist,.rankings-page .popular-navlist li,.rankings-page .popular-navlist li a{height: 28px;}
.rankings-page .popular-navlist li a{line-height: 22px;}
}

.rankings-page .popular-nav{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.rankings-page .popular-nav::-webkit-scrollbar{display:none}
.rankings-page .popular-nav::after{display:none}
.rankings-page .popular-navlist{display:flex;gap:30px;width:max-content}
.rankings-page .popular-navlist li{flex-shrink:0;float:none;width:auto}
.rankings-page .popularem-img picture,.rankings-page .popularem-img img{display:block;width:100%;height:100%;object-fit:cover}
.rankings-page .popularem-sort,.rankings-page .popularem-abs{display:block}
@media(max-width:759px){.rankings-page .popular-navlist{gap:25px}.rankings-page.popular-main .category-title{padding-left:20px}}

/* Keep phone headings compact after the shared desktop rules. */
@media(max-width:759px){
 .rankings-page.popular-main .category-title{display:flex;align-items:center;white-space:nowrap;height:28px;line-height:28px;font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .rankings-page .category-title span{display:block;flex-shrink:0;top:0;margin-left:14px;padding-left:14px;font-size:16px;line-height:28px}
 .rankings-page .category-title span::before{top:2px;height:24px}
}