:root{--safe-area-inset-bottom: env(safe-area-inset-bottom)}@supports not (constant(safe-area-inset-bottom)){>.mobile-container{padding-bottom:30px !important}>footer{padding-bottom:0 !important}}main.rank{margin:0 auto;padding-bottom:43px}main.rank>header{padding:50px 14px 35px 14px}main.rank .rank-container{display:-webkit-box;display:-ms-flexbox;display:flex}main.rank .rank-container .rank-left,main.rank .rank-container .rank-right{margin:0 14px}main.rank .rank-container .rank-box{position:relative;width:800px;padding:15px 2px;background-image:-webkit-linear-gradient(90deg, rgb(33, 41, 73) 0%, rgb(32, 37, 57) 100%)}main.rank .rank-container .rank-box::before{content:"";display:inline-block;width:269px;height:140px;position:absolute;top:0;right:0;background:url(/static/front/assets/images/rank/rank-bg1.png) center/cover no-repeat}main.rank .rank-container .rank-box .rank-inner{position:relative;border:2px solid #454d6b;border-top:none;border-bottom:none}main.rank .rank-container .rank-box .rank-inner::before{content:"";display:inline-block;width:100%;height:17px;position:absolute;left:0;top:-16px;background:url(/static/front/assets/images/rank/rank-border.png) center top/100% 17px no-repeat}main.rank .rank-container .rank-box .rank-inner::after{content:"";display:inline-block;width:100%;height:17px;position:absolute;left:0;bottom:-16px;background:url(/static/front/assets/images/rank/rank-border.png) center top/100% 17px no-repeat;-webkit-transform:rotate(180deg);transform:rotate(180deg)}main.rank .rank-container .rank-box .rank-inner .banner{margin:0 22px 0 22px;padding-top:13px;overflow:hidden}main.rank .rank-container .rank-box .rank-inner .banner img{width:100%;height:200px;border-radius:20px}main.rank .rank-container .rank-box .rank-inner .ouhuang-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:35px 22px 0 22px;padding-bottom:10px;border-bottom:1px solid #454d6b}main.rank .rank-container .rank-box .rank-inner .ouhuang-header .nav{display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:30px}main.rank .rank-container .rank-box .rank-inner .ouhuang-header .nav a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:90px;height:29px;margin-left:12px;font-size:16px;color:#b9c0ef;background:url(/static/front/assets/images/rank/nav.png) center/cover no-repeat}main.rank .rank-container .rank-box .rank-inner .ouhuang-header .nav a.active{color:#20263b;background:url(/static/front/assets/images/rank/nav-active.png) center/cover no-repeat}main.rank .rank-container .rank-box .rank-inner .ouhuang-header .time{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:12px;color:#7a80a2}main.rank .rank-container .rank-box .rank-inner .ouhuang-header .time .tips{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative}main.rank .rank-container .rank-box .rank-inner .ouhuang-header .time .tips .icon-tips{display:inline-block;width:14px;height:14px;margin-left:14px;cursor:pointer;background:url(/static/front/assets/images/rank/icon-tips.png) center/cover no-repeat}main.rank .rank-container .rank-box .rank-inner .ouhuang-header .time .tips .icon-tips:hover+.tips-text{display:-webkit-box;display:-ms-flexbox;display:flex}main.rank .rank-container .rank-box .rank-inner .ouhuang-header .time .tips .tips-text{position:absolute;left:50%;top:-62px;display:none;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:274px;height:50px;margin-left:-130px;padding:0 10px;font-size:12px;color:#7a80a2;text-align:center;border-radius:6px;z-index:2;background-color:rgba(28,28,28,.7)}main.rank .rank-container .rank-box .rank-inner .ouhuang-header .time .tips .tips-text::before{content:"";display:inline-block;width:0;height:0;position:absolute;bottom:-10px;left:50%;-webkit-transform:translate3d(-50%, 0, 0);transform:translate3d(-50%, 0, 0);border:5px solid;border-color:rgba(28,28,28,.7) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)}main.rank .rank-container .rank-box .rank-inner .rank-table{margin:0 22px;font-size:14px;color:#b9c0ef}main.rank .rank-container .rank-box .rank-inner .rank-table>header{display:grid;grid-template-columns:150px 200px 80px 245px 75px}main.rank .rank-container .rank-box .rank-inner .rank-table>header>div{text-align:center;padding:14px 0}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .item{display:grid;grid-template-columns:150px 200px 80px 245px 75px;height:70px;margin-bottom:1px}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .item>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .item>div:nth-child(5){-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .item>div .sort-box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .item>div .sort-box .logo{margin-right:12px}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .item>div .sort-box .sort{width:35px;margin-right:12px;font-size:20px;color:#b9c0ef;text-align:center}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .item>div .sort-box .avatar{width:34px;height:34px;border-radius:50%;border:1px solid #444c6f;background-color:#393939}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .item>div .btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:14px;color:#b9c0ef}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .item>div .btn::after{content:"";display:inline-block;position:relative;width:0;height:0;margin-left:10px;top:2px;border:4px solid;border-color:#b9c0ef rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .item.gold{background-image:url(/static/front/assets/images/rank/gold-bg.png);background-position:center;background-size:100% 60px;background-repeat:no-repeat}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .item.gold>div .sort-box .avatar-box{position:relative}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .item.gold>div .sort-box .avatar-box .avatar{position:relative;z-index:2;border:none}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .item.gold>div .sort-box .avatar-box::before{content:"";display:inline-block;width:107px;height:60px;position:absolute;left:50%;top:50%;-webkit-transform:translate3d(-50%, -50%, 0);transform:translate3d(-50%, -50%, 0);background:url(/static/front/assets/images/rank/gold-avatar.png) center/cover no-repeat}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .item.gold>div:nth-child(4){position:relative}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .item.gold>div:nth-child(4)::after{content:"";display:inline-block;width:81px;height:32px;position:absolute;right:-5px;background:url(/static/front/assets/images//rank/gold-text.png) center/cover no-repeat}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li:nth-child(1) .item{background-color:rgba(69,77,107,.3)}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li:nth-child(1) .item .sort-box .avatar{border-color:#fd8f01}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li:nth-child(2) .item{background-color:rgba(69,77,107,.15)}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li:nth-child(2) .item .sort-box .avatar{border-color:#547ba0}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li:nth-child(3) .item{background-color:rgba(69,77,107,.08)}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li:nth-child(3) .item .sort-box .avatar{border-color:#fd8f01}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li:nth-child(-n+3) .item{height:80px}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li:nth-child(-n+3) .item>div:nth-child(4){color:#ff6d00}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li:nth-child(-n+3) .item .sort-box .avatar{width:44px;height:44px}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li:nth-child(-n+3) .item.gold>div .sort-box .avatar-box{position:relative}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li:nth-child(-n+3) .item.gold>div .sort-box .avatar-box::before{-webkit-transform:translate3d(-50%, -50%, 0) scale(1.5);transform:translate3d(-50%, -50%, 0) scale(1.5)}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .product-list{display:none;-ms-flex-wrap:wrap;flex-wrap:wrap;width:674px;padding:4px 10px 14px 10px;border-style:solid;border-width:1px;border-color:#454d6b;border-radius:6px;background-color:rgba(43,50,73,0)}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .product-list .product-item{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:10px;margin-right:10px;border:1px solid #313856;border-radius:5px;width:84px;height:60px;cursor:pointer}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .product-list .product-item:nth-child(7n){margin-right:0}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .product-list .product-item:hover .product-dialog{display:block}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .product-list .product-item .product-dialog{display:none;width:334px;height:323px;padding:40px 55px 20px 55px;position:absolute;z-index:2;bottom:37px;margin-left:-12px;line-height:1;background:url(/static/front/assets/images/rank/dialog-bg.png) center/cover no-repeat}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .product-list .product-item .product-dialog .name{font-size:14px;font-weight:bold;color:#fff}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .product-list .product-item .product-dialog .type{margin-top:12px;font-size:14px;font-weight:bold;color:#fff}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .product-list .product-item .product-dialog .tag{margin-top:14px;font-size:14px;color:#090}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .product-list .product-item .product-dialog .pic-box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:20px 0 17px 0}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .product-list .product-item .product-dialog .pic-box .pic{width:214px;height:97px;-o-object-fit:contain;object-fit:contain}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .product-list .product-item .product-dialog .wear-box .wear-num{font-size:14px;color:#fff}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .product-list .product-item .product-dialog .wear-box .wear-progress-box{position:relative;width:171px;height:4px;margin-top:10px;margin-left:42px;background:url(/static/front/assets/images/rank/wear-progress.png) center/cover no-repeat}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .product-list .product-item .product-dialog .wear-box .wear-progress-box .wear-progress{display:inline-block;width:0;height:0;border:5px solid;position:absolute;top:-6px;margin-left:-5px;border-color:#fff rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .product-list .product-item .pic{max-width:90%;max-height:90%}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li .product-list .product-item .color{position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:0 0 5px 5px}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li.active .product-list{display:-webkit-box;display:-ms-flexbox;display:flex}main.rank .rank-container .rank-box .rank-inner .rank-table>ul li.active .item>div .btn::after{top:-2px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}main.rank .rank-container .rank-right .rank-box{width:517px}main.rank .rank-container .rank-right .rank-box .rank-inner{position:relative}main.rank .rank-container .rank-right .rank-box .rank-inner::before{background:url(/static/front/assets/images/rank/rank-border-small.png) center top/100% 17px no-repeat}main.rank .rank-container .rank-right .rank-box .rank-inner::after{background:url(/static/front/assets/images/rank/rank-border-small.png) center top/100% 17px no-repeat}main.rank .rank-container .rank-right .rank-box .rank-inner .rank-tips{position:absolute;left:24px;top:-20px;height:52px}main.rank .rank-container .rank-right .rank-box .rank-inner .time-float{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-right:20px;font-size:12px;color:#7a80a2}main.rank .rank-container .rank-right .rank-box .rank-inner .time-float .tips{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative}main.rank .rank-container .rank-right .rank-box .rank-inner .time-float .tips .icon-tips{display:inline-block;width:14px;height:14px;margin-left:14px;cursor:pointer;background:url(/static/front/assets/images/rank/icon-tips.png) center/cover no-repeat}main.rank .rank-container .rank-right .rank-box .rank-inner .time-float .tips .icon-tips:hover+.tips-text{display:-webkit-box;display:-ms-flexbox;display:flex}main.rank .rank-container .rank-right .rank-box .rank-inner .time-float .tips .tips-text{position:absolute;left:50%;top:-62px;display:none;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:10px 15px;font-size:12px;color:#7a80a2;white-space:nowrap;text-align:center;border-radius:6px;z-index:2;margin-left:6px;-webkit-transform:translate3d(-50%, 0, 0);transform:translate3d(-50%, 0, 0);background-color:rgba(28,28,28,.7)}main.rank .rank-container .rank-right .rank-box .rank-inner .time-float .tips .tips-text::before{content:"";display:inline-block;width:0;height:0;position:absolute;bottom:-10px;left:50%;-webkit-transform:translate3d(-50%, 0, 0);transform:translate3d(-50%, 0, 0);border:5px solid;border-color:rgba(28,28,28,.7) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)}main.rank .rank-container .rank-right .rank-box .rank-inner .miandan-rank{display:-webkit-box;display:-ms-flexbox;display:flex;padding:40px 12px 8px 12px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}main.rank .rank-container .rank-right .rank-box .rank-inner .miandan-rank .miandan-rank-item{width:154px;height:103px;position:relative}main.rank .rank-container .rank-right .rank-box .rank-inner .miandan-rank .miandan-rank-item:nth-child(1){-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background:url(/static/front/assets/images/rank/miandan1.png) center/cover no-repeat}main.rank .rank-container .rank-right .rank-box .rank-inner .miandan-rank .miandan-rank-item:nth-child(2){-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;margin-top:38px;background:url(/static/front/assets/images/rank/maindan2.png) center/cover no-repeat}main.rank .rank-container .rank-right .rank-box .rank-inner .miandan-rank .miandan-rank-item:nth-child(3){-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;margin-top:60px;background:url(/static/front/assets/images/rank/miandan3.png) center/cover no-repeat}main.rank .rank-container .rank-right .rank-box .rank-inner .miandan-rank .miandan-rank-item .tel{position:absolute;top:40px;left:50px;font-size:16px;color:#b9c0ef}main.rank .rank-container .rank-right .rank-box .rank-inner .miandan-rank .miandan-rank-item .num{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:122px;height:24px;position:absolute;left:15px;bottom:0;font-size:14px;color:#ff6d00}main.rank .rank-container .rank-right .rank-box .rank-inner .miandan-rank .miandan-rank-item .num>span{font-size:18px;font-weight:bold}main.rank .rank-container .rank-right .rank-box .rank-inner .miandan-list{padding:0 22px 12px 22px}main.rank .rank-container .rank-right .rank-box .rank-inner .miandan-list .miandan-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:44px;margin-top:12px}main.rank .rank-container .rank-right .rank-box .rank-inner .miandan-list .miandan-item .sort{width:40px;font-size:20px;color:#b9c0ef}main.rank .rank-container .rank-right .rank-box .rank-inner .miandan-list .miandan-item .content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex:1;flex:1;height:44px;padding:0 32px 0 25px;background-image:-webkit-linear-gradient(90deg, rgba(16, 31, 47, 0) 0%, rgb(43, 50, 73) 100%);border-radius:22px}main.rank .rank-container .rank-right .rank-box .rank-inner .miandan-list .miandan-item .content .tel{font-size:14px;color:#b9c0ef}main.rank .rank-container .rank-right .rank-box .rank-inner .miandan-list .miandan-item .content .num{font-size:14px;color:#fff}main.rank .rank-container .rank-right .rank-box .rank-inner .miandan-list .miandan-item .content .num>span{font-size:18px;font-weight:bold;color:#b9c0ef}main.rank .rank-container .rank-right .rank-box .rank-inner .box-list{padding:25px 22px 12px 25px}main.rank .rank-container .rank-right .rank-box .rank-inner .box-list .box-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:60px;margin-top:12px}main.rank .rank-container .rank-right .rank-box .rank-inner .box-list .box-item:nth-child(-n+3) .content{padding:0 28px 0 26px}main.rank .rank-container .rank-right .rank-box .rank-inner .box-list .box-item:nth-child(-n+3) .content .left .pic{width:50px;height:50px}main.rank .rank-container .rank-right .rank-box .rank-inner .box-list .box-item:nth-child(-n+3) .content .left .name{margin-left:12px}main.rank .rank-container .rank-right .rank-box .rank-inner .box-list .box-item:nth-child(-n+3) .content .right>span{color:#ff6d00}main.rank .rank-container .rank-right .rank-box .rank-inner .box-list .box-item .sort-box{width:40px;margin-right:10px;text-align:center}main.rank .rank-container .rank-right .rank-box .rank-inner .box-list .box-item .sort-box .sort{font-size:20px;color:#b9c0ef}main.rank .rank-container .rank-right .rank-box .rank-inner .box-list .box-item .content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex:1;flex:1;height:60px;padding:0 28px 0 33px;border-radius:30px;background-image:-webkit-linear-gradient(90deg, rgba(16, 31, 47, 0) 0%, rgb(43, 50, 73) 100%)}main.rank .rank-container .rank-right .rank-box .rank-inner .box-list .box-item .content .left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}main.rank .rank-container .rank-right .rank-box .rank-inner .box-list .box-item .content .left .pic{width:36px;height:36px;-o-object-fit:contain;object-fit:contain}main.rank .rank-container .rank-right .rank-box .rank-inner .box-list .box-item .content .left .name{margin-left:19px;font-size:14px;color:#b9c0ef}main.rank .rank-container .rank-right .rank-box .rank-inner .box-list .box-item .content .right{font-size:14px;color:#fff}main.rank .rank-container .rank-right .rank-box .rank-inner .box-list .box-item .content .right>span{font-size:18px;font-weight:bold;color:#b9c0ef}main.rank .rank-container .rank-right .rank-box:nth-child(2){margin-top:27px}