.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.course-card{display:flex;align-items:center;height:2.18666667rem}.course-card .item-pic{margin-left:.42666667rem;width:2.4rem;height:1.65333333rem;border-radius:.16rem;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative}.course-card .item-pic .course-stat{position:absolute;left:0;top:0;width:.53333333rem;height:.53333333rem;border-top-left-radius:.16rem;border-bottom-right-radius:.16rem;font-weight:500;font-size:.32rem;color:#FFF;text-align:center;line-height:.53333333rem}.course-card .item-pic .course-stat.new{background:#F01414}.course-card .item-pic .learn-rate{position:absolute;right:0;bottom:0;padding-top:.08rem;padding-bottom:.08rem;padding-left:.16rem;padding-right:.16rem;background:#2B333B;border-top-left-radius:.16rem;border-bottom-right-radius:.16rem;font-size:.26666667rem;color:#FFF;line-height:.37333333rem}.course-card .item-pic .act-name{position:absolute;right:0;left:0;bottom:0;color:#fff;background-color:#EB4B4E;box-shadow:0 0 4px 0 rgba(255,226,36,.49),inset 0 1px 0 0 rgba(255,199,199,.76),inset 0 3px 4px 0 rgba(255,151,151,.5);text-align:center;line-height:1;padding:.10666667rem 0rem;border-bottom-left-radius:.10666667rem;border-bottom-right-radius:.10666667rem}.course-card .item-right{margin-left:.32rem;width:4.18666667rem}.course-card .item-right .item-name{font-weight:500;font-size:.4rem;color:#2B333B;line-height:.56rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.course-card .item-right .item-info{margin-top:.10666667rem;font-size:.32rem;color:#71777D;line-height:.45333333rem}.course-card .item-right .item-info .dot{margin-left:.10666667rem;margin-right:.10666667rem}.course-card .item-right .item-info .item-number i{margin-right:.10666667rem;color:#B7BBBF}.course-card .item-price-box{margin-left:.34666667rem}.course-card .item-price-box .pay-price{display:block;width:1.92rem;height:.85333333rem;background:rgba(43,51,59,.06);border-radius:.42666667rem;font-weight:500;font-size:.32rem;color:#71777D;text-align:center;line-height:.85333333rem}.course-card .item-price-box .pay-price.red{color:rgba(240,20,20,.6)}.course-card .item-price-box .discount-item{margin-top:.10666667rem;font-size:.26666667rem;color:rgba(240,20,20,.8);text-align:center;line-height:.37333333rem}.course-card .item-price-box .discount-item .origin-price{margin-left:.08rem;text-decoration:line-through}#wrapper{padding-bottom:0}#pages-container{padding-bottom:0}body{background:#F6F6F6!important}.hide{display:none}.headbg{width:100%;height:4.26666667rem;background:url(/static/coding/static/common/img/ranking/head_bg.png) no-repeat;background-size:cover;background-position:top center}.headbg .head-box{padding-top:1.68rem;width:6.66666667rem;margin:0 auto;box-sizing:border-box;position:relative;text-align:center}.headbg .head-box h3{font-size:.64rem;color:#FFF;font-weight:600;text-align:center;margin-bottom:.32rem;text-shadow:0 8px 16px rgba(28,31,33,.1)}.headbg .head-box .hoticon{position:absolute;top:1.30666667rem;right:-.4rem;width:1.41333333rem;height:.74666667rem;background:url(/static/coding/static/common/img/ranking/top10.png) no-repeat;background-size:cover;background-position:top center}.headbg p{text-align:center;font-size:.32rem;line-height:.48rem;color:#FFF}.ranking-box{height:1.2rem;background:#fff;margin-bottom:.26666667rem}.ranking-box .ranking-classfiy{padding-left:.42666667rem;height:1.2rem;display:flex;flex-direction:row;align-items:center}.ranking-box .ranking-classfiy span{margin-right:.85333333rem;line-height:.4rem;font-size:.4rem;color:#2B333B;text-align:center}.ranking-box .ranking-classfiy span.onactive{width:2.4rem;height:.4rem;font-size:.42666667rem;color:#FF4E00;background:url(/static/coding/static/common/img/ranking/tab_btn.png) no-repeat;background-size:cover;background-position:top center}.ranking-content{background:#fff;padding-top:.26666667rem;padding-left:.42666667rem;padding-bottom:.26666667rem;padding-right:.42666667rem;box-sizing:border-box}.ranking-content .sub-nav{height:.74666667rem;display:flex;flex-direction:row;align-items:center}.ranking-content .sub-nav li{padding-left:.42666667rem;padding-right:.42666667rem;height:.74666667rem;opacity:.8;background:rgba(239,239,239,.7);border-radius:.37333333rem;text-align:center;line-height:.74666667rem;font-size:.32rem;color:#71777D;margin-right:.34666667rem}.ranking-content .sub-nav li.onactive{background:rgba(240,20,20,.06);color:#F01414}.content-list{margin-top:.69333333rem;clear:both;overflow:hidden}.content-list .courseitem{display:flex;flex-direction:row;align-items:center;margin-bottom:.42666667rem}.content-list .courseitem .top{width:.50666667rem;height:.58666667rem;margin-right:.42666667rem}.content-list .courseitem .ranknumer{width:.50666667rem;margin-right:.42666667rem;text-align:center;font-size:.37333333rem;font-weight:600;color:#9199A1}.content-list .courseitem .coursecontent{display:flex;flex-direction:row}.content-list .courseitem .coursecontent .courseimg{width:1.6rem;height:2.24rem;background-repeat:no-repeat;background-size:cover;background-position:center;border-radius:.10666667rem;margin-right:.32rem}.content-list .courseitem .coursecontent .coursecon{vertical-align:text-top}.content-list .courseitem .coursecontent .coursecon h3{width:5.14666667rem;font-size:.37333333rem;line-height:.58666667rem;height:1.17333333rem;color:#2B333B;overflow:hidden;font-weight:500;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.content-list .courseitem .coursecontent .coursecon .info-bar{margin-top:.42666667rem;font-size:.32rem;color:#93999F;position:relative}.content-list .courseitem .coursecontent .coursecon .info-bar .number{position:absolute;right:-1rem}.content-list .courseitem .coursecontent .coursecon .info-bar .number em{color:#FF4E00;font-style:normal}.content-list .courseitem .coursecontent .coursecon .info-bar .hot{width:.48rem;height:.48rem;background:url(/static/coding/static/common/img/ranking/hot.png) no-repeat;background-size:cover;background-position:center center;display:inline-block;vertical-align:middle;margin-top:-.13333333rem}