.ranking-header{
    padding:14px 20px; background-color: #fff; display: flex; align-items: center; border-radius: 16px;
}

.ranking-header-title{
    font-size: 20px; font-weight: 600; height: 48px; line-height: 48px; padding:0 16px;
}
.ranking-select{
    padding: 8px 35px 8px 16px; min-width: 162px;height: 38px;line-height:20px;background: #FFFFFF; border: 1px solid #E8E8E8; border-radius: 20px; cursor: pointer;position: relative;  margin-left: 8px; font-size: 14px;
}
.ranking-select>.title{
    max-width: 162px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.ranking-select:after{
    content:' '; border-right: 1px solid #ACAAAA; border-bottom: 1px solid #ACAAAA; position: absolute; height: 9px; width: 9px; top:10px; right: 15px; transform: rotate(45deg);
}
.ranking-sub-wrap{
    position: absolute; top: 100%; right: 0; width: 100%; display: none;
}
.ranking-sub-wrap.large{
    width: 262px;
}
.ranking-sub-wrap:before{
    height: 8px; content: ' '; display: block;
}
.ranking-sub-body{
    max-height: 848px;  background: #fff; border: 1px solid #E8E8E8; box-shadow: 0px 6px 32px -2px rgba(0, 0, 0, 0.1); border-radius: 10px;
}
.ranking-sub-body.has-ptop{
    padding-top: 10px;
}
.ranking-sub-body>.title{
    padding:0 16px; height: 48px; line-height: 48px; border-bottom: 1px solid #E8E8E8; font-size: 20px; font-weight: 600;
}
.ranking-sub-body{display: flex;flex-direction: column}
.ranking-sub-body .scroll-wrapper{
    flex: 1; overflow: auto;
}
.ranking-sub-body .scroll-list{
    padding:0 14px;
}
.ranking-sub-body .scroll-list>.bar{
    height: 38px; line-height: 38px; font-size: 16px; color: #ACAAAA;
}
.ranking-sub-body .select-list>a{
    height: 37px; line-height: 37px; background: #F5F5F5; border-radius: 20px;display: block;padding:0 14px;  margin-bottom: 10px;text-align: center; text-overflow: ellipsis; overflow: hidden;white-space: nowrap;
}
.ranking-sub-body .select-list>a:hover{
    background: #BFF4E5;
}
.ranking-sub-body .select-list>a.on {
    background: var(--green);
    color: #fff;
}

.brand-wrapper{
    flex: 1; overflow: hidden; display: flex;
}

.brand-wrapper .letter{
    width: 48px; text-align: center; display: flex; flex-direction: column; align-items: center; padding: 4px 0;
}
.brand-wrapper .letter>li{
    display: block; text-align: center; width: 24px; height: 24px; line-height: 24px;  border-radius: 16px; font-size: 14px; margin: 1px 0; cursor: pointer;
}
.brand-wrapper .letter>li:hover{
    background: #BFF4E5;
}
.brand-wrapper .letter>li.on {
    background: #0EB67E; color: #fff;
}
.brand-wrapper .scroll-wrapper>.scroll-list{
    padding-left: 5px;
}
.ranking-select:hover .ranking-sub-wrap{
    display: block;
}
.ranking-item-wrap{
    margin-top: 30px;
}
.ranking-item{
    display: flex; background: #FFFFFF;  border-radius: 16px; height: 160px; margin:12px 0; align-items: center;
}
.ranking-item>.top{
    margin-right: 4px; background: linear-gradient(331.6deg, rgba(224, 224, 224, 0.25) 44.04%, rgba(218, 218, 218, 0) 126.98%);  border-radius:0 100px 100px 0;width: 98px;
    height: 100px; display: flex; align-items: center; justify-content: center; color: #ACAAAA; font-size: 14px; flex-direction: column;
}
.ranking-item>.top>.number{
    font-size: 28px; height: 43px; min-width: 43px; background-position: center center; background-repeat: no-repeat; text-align: center; margin-bottom: 3px;
}

.ranking-item:nth-of-type(1)>.top>.number{
    background-image: url("../../images/top_1.svg"); line-height: 55px; color: #fff;
}
.ranking-item:nth-of-type(2)>.top>.number{
    background-image: url("../../images/top_2.svg"); line-height: 55px; color: #fff;
}
.ranking-item:nth-of-type(3)>.top>.number{
    background-image: url("../../images/top_3.svg"); line-height: 55px; color: #fff;
}
.ranking-item>.image{
    width: 216px;  height: 160px; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-right: 40px;
}
.ranking-item>.image>img{object-fit: cover;max-width: 100%}
.ranking-item .name{
    font-size: 20px; line-height: 24px; height: 24px; margin:10px 0; font-weight: 600; line-height: 24px;
}
.ranking-item .price{
    font-size: 20px; color: #FF7B51; margin:10px 0; line-height: 24px;
}
.ranking-item .info{
    margin:5px 0; font-size: 14px; color: #777;
}
.ranking-item>.ranking-basic{
    border-right: 1px solid #E8E8E8;; display: flex; align-items: center;
}
.ranking-item .score{
    padding:0 30px; font-size: 16px;
}
.ranking-item .score>.number{
    color: #FF9B52; font-weight: 600; font-size: 32px; margin:5px 0; line-height: 1;
}
.ranking-item .score>.more{
    font-size: 14px; color: #777;
}
.ranking-item>.action{
    padding: 0 30px;
}
.ranking-item>.action>.button{
    height: 40px; line-height: 30px; width: 120px; font-size: 14px; border-radius: 20px; margin: 5px 0; padding: 5px 24px; display: inline-block; border: 1px solid var(--green); color: #fff; background: var(--green); text-align: center;
}