.playlist{width:1300px;margin:40px auto 0;min-height:calc(100vh - 308px)}.playlist-navlist{background-color:#fff;border-radius:5px;overflow:hidden}.playlist-navlist-category{border-bottom:1px solid #eee}.playlist-navlist-category-name{width:136px;height:110px;line-height:110px;text-align:center;background-color:#f9f9f9;font-size:16px}.playlist-navlist-category.playlist-navlist-gender .playlist-navlist-category-name,.playlist-navlist-category.playlist-navlist-rank .playlist-navlist-category-name{height:66px;line-height:66px}.playlist-navlist-category-list .game-item{width:110px;font-size:14px;color:#666;cursor:pointer}.playlist-navlist-category-list .game-item .game-img{width:60px;height:60px;background-repeat:no-repeat;background-image:url(https://asset.tuwan.com/static/img/game_icons.37d02eae.png);background-position-y:0;-webkit-transition:all .3s ease;transition:all .3s ease}.playlist-navlist-category-list .game-item .game-name{margin-top:10px}.playlist-navlist-category-list .game-item.actived,.playlist-navlist-category-list .game-item:hover{color:#fa6543}.playlist-navlist-category-list .game-item.actived .game-img,.playlist-navlist-category-list .game-item:hover .game-img{background-position-y:-80px}.playlist-navlist-category-list .game-item.lol .game-img{background-position-x:-254px}.playlist-navlist-category-list .game-item.pubg .game-img{background-position-x:-856px}.playlist-navlist-category-list .game-item.hok .game-img{background-position-x:-491px}.playlist-navlist-category-list .game-item.gp .game-img{background-position-x:-1068px}.playlist-navlist-category-list .game-item.dota .game-img{background-position-x:-1734px}.playlist-navlist-category-list .game-item.tft .game-img{background-position-x:-1657px}.playlist-navlist-category-list .game-item.dnf .game-img{background-position-x:-1582px}.playlist-navlist-category-list .game-item.apex .game-img{background-position-x:-1437px}.playlist-navlist-category-list .game-item.daota-chess .game-img{background-position-x:-1509px}.playlist-navlist-category-list .game-item.singer .game-img{background-position-x:-96px}.playlist-navlist-category-list .game-item.cod .game-img{background-position-x:-1883px}.playlist-navlist-category-list .game-item.wild .game-img{background-position-x:-1960px}.playlist-navlist-category-list .game-item.nb .game-img{background-position-x:-2187px}.playlist-navlist-category-list .filter_btn{width:90px;height:36px;margin:0 13px;border-radius:18px;font-size:14px;color:#666;text-align:center;line-height:36px;cursor:pointer}.playlist-navlist-category-list .filter_btn.actived,.playlist-navlist-category-list .filter_btn:hover{background-color:#fa6543;color:#fff}.playlist-sortlist{margin-top:30px}.playlist-sortlist-sortitem{position:relative;width:92px;height:38px;line-height:36px;border:1px solid #ccc;font-size:15px;color:#999;margin-right:22px;text-align:center;border-radius:5px;cursor:pointer;background-color:#fff}.playlist-sortlist-sortitem.actived,.playlist-sortlist-sortitem:hover{border:1px solid #fa6543;background-color:#fa6543;color:#fff}.playlist-content{margin-top:20px}.playlist-content-userlist{width:1034px;-ms-flex-wrap:wrap;flex-wrap:wrap}.playlist-content-userlist,.playlist-content-userlist .useritem{height:-webkit-max-content;height:-moz-max-content;height:max-content}.playlist-content-userlist .useritem{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:236px;border-radius:8px;background-color:#fff;z-index:2;margin-bottom:30px;margin-right:30px}.playlist-content-userlist .useritem-container{position:relative;border-radius:5px;background-color:#fff;z-index:1}.playlist-content-userlist .useritem-img{position:relative;width:236px;height:233px}.playlist-content-userlist .useritem-img-avatar{width:100%;height:100%;border-radius:8px 8px 0 0;-o-object-fit:cover;object-fit:cover}.playlist-content-userlist .useritem-img-plutocrat_rick{position:absolute;right:10px;top:10px;width:70px;height:22px}.playlist-content-userlist .useritem-img-discount{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;position:absolute;left:0;bottom:0;width:100%;height:30px;color:#fff;font-size:12px;padding-right:20px;background-color:rgba(253,174,97,.9)}.playlist-content-userlist .useritem-img-discount-count{position:absolute;bottom:7px;left:2px;width:84px;height:28px;line-height:24px;padding-left:14px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAAAcCAMAAAAA0oIkAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAARnQU1BAACxjwv8YQUAAAABc1JHQgCuzhzpAAAAS1BMVEUAAAD6Mjz6Mjz6Mjz4MTv6Mjz6Mjz6Mjz3MTr2MDr6Mjz6Mjz6MjzzLzmeExr6Mjz6Mjz6Mjz6MjyeExr6MjyfExqzGiLRLSDmMiC904b7AAAAFHRSTlMA1khyBujA+hY0j7I+WrClfin05dQ/9DsAAACESURBVDjL7dXJDsIwDATQye60DV2ogf//UqgRLZdywFfPbTTRk3IyALT7qkiApDI/FErxG0JXZi4KZpmBeHkhfNP8yREEUTIZn2iU1RRTTDHFlP+UPNRxPyplrLVLx9PUnfZvJQ9ynyZZ0kRbi74XtvQ+nvdDeRuytJxb3BcKzgXCr/4EDfx/LTZiuzoAAAAASUVORK5CYII=);background-repeat:no-repeat}.playlist-content-userlist .useritem-img-discount-count span{font-size:18px;margin:0 2px}.playlist-content-userlist .useritem-img-recommend{position:absolute;top:1px;left:-32px;width:108px;height:47px;color:#fff;font-size:12px;line-height:28px;text-align:center;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAAAvCAMAAAAxdN89AAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAARnQU1BAACxjwv8YQUAAAABc1JHQgCuzhzpAAAAQlBMVEUAAAD6Mjz6Mjz6Mjz6Mjz6Mjz6Mjz6Mjz6Mjz6Mjz6Mjz4MTv6Mjz6Mjz6Mjz2MDr6Mjz3MTrzLzn6Mjz6Mjz6MjwFxga5AAAAFXRSTlMAfh5ywPTopZqP+gYPKUg0shZa1j60DvhbAAABmUlEQVRYw72XibKCMAxF0z0tLZvm/3/1IcqiyBNK2zPMxLlTOKIxWIDfcIZMoBUWGUPLLIo5EK8yBpCAypLSRNo9C5FS5N4CrcfAJHCJ4TrHuGzjSMe5amOOStm4VUSlbJbOEm3zTFMpW4cUQ5xNKCpl4xjpirExiuekrYvpjUibR7rGGZvQVMrGr97XGRsjKmXj9uxn6OJtllLx0+av98ZhW4eUkv9tTFEp24V5eN5mKT0myzw8ZfNIeTBZ5uFhG8dpDqjxcG56tQ3cOnC0v3DPNs9DJ1vbSkRphmLNUKagRSlNK1szlOEwY4BmWoh2c+Z32zIPtQjQNb4KAXhT+YZDeASdb4IP947Xgd/vXag5b5oh8EP+vnB1Jq+/2ar5Peh+7y//XKqlLPkOX2yrvQOrICkb2/KsvPWJXVvbsncQkJ7FFtZ7h5vwkNPWH+mNVLYe+qk3HPOQ1yZAzr0B+Xja2CwTALltFm6v+/KQ3YYwfmWqh9zUjx/aQ6aZhwI2CSpjz3/YJGSYh3s0kGMe7pK55z+e0F051x8iZqhdXp2/HgAAAABJRU5ErkJggg==);background-repeat:no-repeat}.playlist-content-userlist .useritem-info{-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px}.playlist-content-userlist .useritem-info-name{-webkit-box-flex:1;-ms-flex:1;flex:1;height:28px;line-height:28px;font-size:18px;color:#333;font-weight:400}.playlist-content-userlist .useritem-info-name img{width:24px;height:24px;vertical-align:text-bottom}.playlist-content-userlist .useritem-info-rank{line-height:18px;padding:0 5px;color:#fff;font-size:12px;border-radius:2px;background-color:#eed7ca}.playlist-content-userlist .useritem-info-details{margin-top:10px}.playlist-content-userlist .useritem-info-details-age{color:#fff;padding:0 5px;font-size:12px;line-height:18px;margin-right:6px;border-radius:2px;background-color:#ffc4d0}.playlist-content-userlist .useritem-info-details-age .user-gender{font-size:12px;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);margin-right:3px;vertical-align:middle;display:inline-block}.playlist-content-userlist .useritem-info-details-age.man{background-color:#97bcf0}.playlist-content-userlist .useritem-info-details-age.woman{background-color:#ffc4d0}.playlist-content-userlist .useritem-info-details-area{color:#666;font-size:12px}.playlist-content-userlist .useritem-info-details-price{color:#fa323c;-ms-flex-negative:0;flex-shrink:0;font-size:14px;line-height:26px}.playlist-content-userlist .useritem-info-details-price span{font-size:20px}.playlist-content-userlist .useritem-info-state{margin-top:10px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-size:14px;line-height:16px}.playlist-content-userlist .useritem-info-state-icon{width:12px;height:12px;margin-right:2px;background-image:url(https://res.tuwan.com/templet/teach/play/list/images/side.png)}.playlist-content-userlist .useritem-info-state-icon.online+span{color:#1dd3b8}.playlist-content-userlist .useritem-info-state-icon.online{background-position:-19px 0}.playlist-content-userlist .useritem-info-state-icon.offline+span{color:#666}.playlist-content-userlist .useritem-info-state-icon.offline{background-position:-19px 26px}.playlist-content-userlist .useritem-info-state-icon.busy+span{color:#ffa230}.playlist-content-userlist .useritem-info-state-icon.busy{background-position:-19px 12px}.playlist-content-userlist .useritem-bg{background-image:url(http://res.tuwan.com/templet/play/playlist/images/border_list.png?22=);background-repeat:no-repeat;background-position:top;width:300px;height:390px;margin-left:-27px;position:absolute;top:-24px;left:0;z-index:0}.playlist-content-userlist .useritem:hover{border-radius:8px;-webkit-box-shadow:0 15px 30px 0 rgba(65,59,49,.3);box-shadow:0 15px 30px 0 rgba(65,59,49,.3)}.playlist-content-userlist .useritem:nth-child(4n){margin-right:0}.playlist-content-userlist .nodata{margin:0 auto;padding-top:100px;font-size:14px;text-align:center;color:#999}.playlist-content-ranklist{width:240px;margin-left:auto}.playlist-content-ranklist .rank-list{width:100%;background:#fafafa;background:-webkit-gradient(linear,left top,right top,color-stop(0,#fcf8fa),to(#f8fbfa));background:linear-gradient(90deg,#fcf8fa,#f8fbfa);border-radius:5px;margin-bottom:30px}.playlist-content-ranklist .rank-list .rank-title{padding:10px 15px 0}.playlist-content-ranklist .rank-list .rank-title-cont{height:40px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-bottom:1px solid #ddd}.playlist-content-ranklist .rank-list .rank-title-cont h2{height:39px;line-height:38px;margin-top:1px;font-weight:400;font-size:18px;color:#333;border-bottom:1px solid #ff5353}.playlist-content-ranklist .rank-list .rank-title-cont a{height:20px;font-size:12px;line-height:20px;padding:0 5px;color:#999}.playlist-content-ranklist .rank-list .rank-title-cont a.actived{color:#333}.playlist-content-ranklist .rank-list .rank-lists .rank-user{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:5px 10px;border-bottom:1px solid #f0f0f0}.playlist-content-ranklist .rank-list .rank-lists .rank-user-img{position:relative;-ms-flex-negative:0;flex-shrink:0;width:78px;height:78px}.playlist-content-ranklist .rank-list .rank-lists .rank-user-img img{position:relative;width:56px;height:56px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.playlist-content-ranklist .rank-list .rank-lists .rank-user-img-bg{position:absolute;left:0;top:0;width:78px;height:78px;background-image:url(https://res.tuwan.com/templet/play/audio/images/rank_mask_icon_v1.png);background-repeat:no-repeat;background-position:-313px 0;-webkit-transition:background .3s linear 0s;transition:background .3s linear 0s;z-index:1}.playlist-content-ranklist .rank-list .rank-lists .rank-user-img:hover .rank-user-img-bg{background-image:url(https://res.tuwan.com/templet/play/audio/images/rank_mask_icon_hover_v2.png)}.playlist-content-ranklist .rank-list .rank-lists .rank-user-info{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.playlist-content-ranklist .rank-list .rank-lists .rank-user-info-name{-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:14px;color:#222}.playlist-content-ranklist .rank-list .rank-lists .rank-user-info-name img{width:20px;height:20px;margin-top:-5px;vertical-align:middle}.playlist-content-ranklist .rank-list .rank-lists .rank-user-info-name:hover{color:#ff4949}.playlist-content-ranklist .rank-list .rank-lists .rank-user-info-value{height:22px;margin-top:5px;line-height:22px;font-size:12px;color:#999}.playlist-content-ranklist .rank-list .rank-lists li:first-child .rank-user-img-bg{background-position:0 0}.playlist-content-ranklist .rank-list .rank-lists li:nth-child(2) .rank-user-img-bg{background-position:-104px 0}.playlist-content-ranklist .rank-list .rank-lists li:nth-child(3) .rank-user-img-bg{background-position:-208px 0}