$deviceWidth: 750;

@function vmin($rpx) {
    @return #{$rpx * 100 / $deviceWidth}vmin;
}

::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
}

@mixin invite-entrance-liveroom-page {
    display: flex;
    height: 100%;
    flex-direction: column;

    .invite-rank-page {
        animation: popping ease 300ms;
        height: 100%;
        background-color: #fff !important;
        background: url("https://commonresource-1252524126.cdn.xiaoeknow.com/image/l311ytht0fgg.png");
        background-size: contain;
        background-repeat: no-repeat;
        
        .img-background {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            height: vmin(144);
            font-weight: 400;
            font-family: "PingFang SC";
            color: rgba(20, 114, 255, 1);
            font-size: vmin(28);
            position: relative;
            padding-top: vmin(48);
            box-sizing: border-box;

            .invite-rule-left {
                position: absolute;
                top: vmin(52);
                left: vmin(32);
            }

            .invite-rule-right {
                position: absolute;
                top: vmin(52);
                right: vmin(32);
            }

            .img-invite-title {
                width: vmin(105);
                height: vmin(48);
            }

            .close-icon {
                width: vmin(32);
                height: vmin(32);
                position: absolute;
                top: vmin(32);
                right: vmin(32);
            }
        }
        .scrollViewHeight {
            height: calc(100% - 136px);
            &.no-need {
                height: 100%;
            }

            .container-ranking {

                .rank-content,
                .custom-rank-content {
                    width: 100%;
                    .ranking-empty {
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        align-items: center;
                        margin-top: vmin(112);

                        image {
                            width: vmin(176);
                            height: vmin(176);
                        }

                        &.is-margin-top {
                            image {
                                width: vmin(374);
                                height: vmin(238);
                            }
                        }

                        .btn-inviting {
                            width: vmin(528);
                            height: vmin(80);
                            margin-top: vmin(64);
                            font-family: PingFangSC-Medium;
                            font-size: vmin(28);
                            color: #ffffff;
                            text-align: center;
                            line-height: vmin(80);

                            border-radius: vmin(40);
                            opacity: 1;
                            border: 0 solid rgba(0.5920000076293945, 0.5920000076293945, 0.5920000076293945, 1);
                            background: linear-gradient(270deg, rgba(255, 95, 70, 1) 0%, rgba(255, 162, 56, 1) 100%);
                            box-shadow: 0 vmin(8) vmin(16) 0 rgba(255, 118, 66, 0.15);

                            &::after {
                                border: none;
                            }

                            &.min-margin-top {
                                margin-top: vmin(32);
                            }
                        }

                        .title-empty {
                            margin-top: vmin(32);
                            height: vmin(32);
                            opacity: 1;
                            color: rgba(153, 153, 153, 1);
                            font-size: vmin(24);
                            font-weight: 400;
                            color: #ADADB4
                        }

                        &.has-all {
                            margin-top: vmin(107);
                        }

                        &.reward-margin {
                            margin-top: vmin(32);

                            image {
                                width: vmin(374);
                                height: vmin(238);
                            }
                        }

                        &.is-margin-top {
                            margin-top: vmin(138);

                            .title-empty {
                                margin-top: 0;
                            }
                        }
                    }

                    .ranking-list-view {
                        overflow-y: scroll;

                        .ranking-top-50 {
                            .ranking-list {
                                margin: 0 auto;
                                box-sizing: border-box;
                                position: relative;
                                z-index: 1;
                                flex: 1;
                            }

                            .limit-tips {
                                display: flex;
                                justify-content: center;
                                font-size: vmin(26);
                                color: darkgrey;
                            }

                            .ranking-item {
                                display: flex;
                                text-align: center;
                                margin: vmin(12) vmin(32) vmin(12) vmin(28);
                                height: vmin(96);
                                align-items: center;

                                .num {
                                    font-size: vmin(20);
                                    color: #666666;
                                    margin-right: vmin(0.12);
                                    height: vmin(44);
                                    font-size: vmin(32);
                                    font-weight: 400;
                                    line-height: vmin(44);
                                    text-align: center;
                                }

                                .name {
                                    font-size: vmin(28);
                                    max-width: vmin(220);
                                    font-weight: 500;
                                    font-family: "PingFang SC";
                                    text-align: left;
                                    line-height: 44rpx;
                                    margin-left: vmin(20);
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }

                                .desc {
                                    font-size: vmin(24);
                                    flex: 1;
                                    text-align: right;
                                    font-family: PingFangSC-Regular;
                                    color: #333333;
                                    letter-spacing: 0;

                                    .desc-top3 {
                                        display: inline-block;
                                        font-family: "PingFangSC-Medium", "PingFang SC";
                                        color: #333333;
                                        font-size: vmin(24);
                                        font-weight: 500;
                                        text-align: right;
                                        font-family: "PingFang SC";
                                    }
                                }

                                .warp-avatar {
                                    position: relative;
                                    display: flex;
                                    align-items: center;
                                    width: 100%;
                                    margin-left: vmin(22);

                                    .img-avatar {
                                        width: vmin(72);
                                        height: vmin(72);
                                        border-radius: 100%;
                                    }
                                    .name {
                                        view {
                                            max-width: vmin(252);
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                            overflow: hidden;
                                        }
                                    }
                                }

                                .warp-avatar::before {
                                    content: "";
                                    width: vmin(28);
                                    height: vmin(24);
                                    position: absolute;
                                    bottom: 100%;
                                    left: vmin(75);
                                    top: vmin(-0.8);
                                    transform: translate(-50%, vmin(0.1));
                                    display: none;
                                }

                                .warp-avatar-top3 {
                                    margin-left: vmin(16);

                                    .img-avatar-top3 {
                                        width: vmin(80) !important;
                                        height: vmin(80) !important;
                                        box-sizing: border-box;
                                    }
                                }
                            }

                            .ranking-item-top3 {
                                .num {
                                    width: vmin(32);
                                    height: vmin(32);
                                }
                                .desc {
                                    
                                    .desc-top3 {
                                        color: rgba(255, 120, 31, 1);
                                    }
                                }
                            }

                            // .ranking-item:nth-child(1) {
                            //     .warp-avatar {
                            //         .img-avatar {
                            //             border: vmin(4) solid #ffd014;
                            //         }
                            //     }

                            //     .warp-avatar::before {
                            //         display: inline-block;
                            //         background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDE2IDE0IiB2ZXJzaW9uPSIxLjEiPg0KICA8dGl0bGU+55qH5YagLTE8L3RpdGxlPg0KICA8ZGVmcz4NCiAgICA8cGF0aCBkPSJNMzkuMDc3MDU1NSw1LjMwMzQyMjA1IEMzOC45NTQxODU2LDUuMzAzNDIyMDUgMzguODQzNDI5Niw1LjM1MzQ1Mzg1IDM4Ljc2MjA5MzIsNS40MzM4NjIwOCBDMzguNzU2OTAxNiw1LjQzOTIyMjYzIDM4Ljc1NTE3MSw1LjQzNzQzNTc4IDM4Ljc1NjkwMTYsNS40MzAyODgzOSBMMzUuNzE2MzA0Nyw4LjI2MjQ0NTIxIEwzMy4yMzk4NzA5LDMuMTM5NTQ3MDMgQzMzLjEyMzkyMzMsMi45ODA1MTc0IDMyLjk0MDQ4MzgsMi44ODA0NTM4MiAzMi43MzI4MTY0LDIuODgwNDUzODIgQzMyLjQ5MDUzNzcsMi44ODA0NTM4MiAzMi4yNzk0MDkyLDMuMDIxNjE0OTUgMzIuMTcyMTE0NCwzLjIyNzEwMjY3IEwyOS43MzcyMTQxLDguMjYyNDQ1MjEgTDI2LjU5OTcwNTgsNS4zMzkxNTkwNSBDMjYuNTMzOTQ0NCw1LjMwMTYzNTIgMjYuNDU3Nzk5Nyw1LjI4MDE5MzAxIDI2LjM3NjQ2MzMsNS4yODAxOTMwMSBDMjYuMTI1NTMxOSw1LjI4MDE5MzAxIDI1LjkyMzA1NjIsNS40OTEwNDEyOCAyNS45MjMwNTYyLDUuNzQ4MzQ3NjQgQzI1LjkyMzA1NjIsNS43Njk3ODk4MyAyNS45MTk1OTUsNS43ODA1MTA5MyAyNS45MTI2NzI4LDUuNzgwNTEwOTMgTDI2Ljg4MzUxNzksMTMuMjY5MTk4MiBDMjYuODgzNTE3OSwxMy4yNDA2MDg2IDI2Ljg4MTc4NzMsMTMuMjEyMDE5IDI2Ljg3ODMyNjIsMTMuMTgxNjQyNSBDMjYuOTM3MTY1MywxMy43MDM0MDI2IDI3LjI3ODA4NiwxNC4xMzU4MjAzIDI3LjczNjY4NDgsMTQuMzE0NTA1MyBDMjcuNjk1MTUxMywxNC4yOTg0MjM2IDI3LjY1MzYxNzgsMTQuMjg1OTE1NyAyNy42MTU1NDU1LDE0LjI3ODc2ODMgQzI4LjU4OTg1MTcsMTQuNjU1NzkzNSAzMC41MDIxMjI0LDE0LjkwMDU5MiAzMi43MDUxMjc0LDE0Ljg3OTE0OTggQzM0LjkxODUxNTgsMTQuODU5NDk0NCAzNi44NDgwOTIsMTQuNTc3MTcyMiAzNy44MzYyNDI3LDE0LjE3ODcwNDcgQzM3Ljc5OTkwMSwxNC4xODU4NTIxIDM3Ljc2MTgyODYsMTQuMTk2NTczMiAzNy43MjAyOTUxLDE0LjIxMjY1NDggQzM4LjE3ODg5NCwxNC4wMzIxODMgMzguNTE5ODE0NiwxMy41OTk3NjU0IDM4LjU3ODY1MzcsMTMuMDc4MDA1MiBDMzguNTcxNzMxNSwxMy4xMzg3NTgxIDM4LjU3MTczMTUsMTMuMTk1OTM3MyAzOC41NzUxOTI2LDEzLjI0Nzc1NiBMMzkuNTM5MTE1NCw1Ljc5ODM3OTQzIEMzOS41MzU2NTQzLDUuNzk0ODA1NzMgMzkuNTMyMTkzMiw1Ljc4NDA4NDYzIDM5LjUzMjE5MzIsNS43NjgwMDI5OCBDMzkuNTMyMTkzMiw1LjUxNDI3MDMyIDM5LjMyOTcxNzUsNS4zMDM0MjIwNSAzOS4wNzcwNTU1LDUuMzAzNDIyMDUgWiIgaWQ9InBhdGgtMSI+PC9wYXRoPg0KICAgIDxmaWx0ZXIgeD0iLTExLjAlIiB5PSItMTIuNSUiIHdpZHRoPSIxMjIuMCUiIGhlaWdodD0iMTI1LjAlIiBpZD0iZmlsdGVyLTIiPg0KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd0JsdXJJbm5lcjEiPjwvZmVHYXVzc2lhbkJsdXI+DQogICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIxIiBpbj0ic2hhZG93Qmx1cklubmVyMSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRJbm5lcjEiPjwvZmVPZmZzZXQ+DQogICAgICA8ZmVDb21wb3NpdGUgaW49InNoYWRvd09mZnNldElubmVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9ImFyaXRobWV0aWMiIGsyPSItMSIgazM9IjEiIHJlc3VsdD0ic2hhZG93SW5uZXJJbm5lcjEiPjwvZmVDb21wb3NpdGU+DQogICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMSAgIDAgMCAwIDAgMC44MTU2ODYyNzUgICAwIDAgMCAwIDAuMDc4NDMxMzcyNSAgMCAwIDAgMSAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dJbm5lcklubmVyMSI+PC9mZUNvbG9yTWF0cml4Pg0KICAgIDwvZmlsdGVyPg0KICA8L2RlZnM+DQogIDxnIGlkPSLpobXpnaItMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgPGcgaWQ9IuerluWxj+ebtOaSrS3lt7LlvIDlp4vovr7kurrmppwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02My4wMDAwMDAsIC0zMjUuMDAwMDAwKSI+DQogICAgICA8ZyBpZD0i5by556qX5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMjUxLjAwMDAwMCkiPg0KICAgICAgICA8ZyBpZD0i5o6S5ZCNIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgNzIuMDAwMDAwKSI+DQogICAgICAgICAgPGcgaWQ9Iue8lue7hC0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzOC4wMDAwMDAsIDAuMDAwMDAwKSI+DQogICAgICAgICAgICA8ZyBpZD0i55qH5YagLTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyLjcyNTg5NCwgOC44ODA0NTQpIHJvdGF0ZSgtMzMwLjAwMDAwMCkgdHJhbnNsYXRlKC0zMi43MjU4OTQsIC04Ljg4MDQ1NCkgIj4NCiAgICAgICAgICAgICAgPHVzZSBmaWxsPSIjRkZEMDE0IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPg0KICAgICAgICAgICAgICA8dXNlIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjEiIGZpbHRlcj0idXJsKCNmaWx0ZXItMikiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPg0KICAgICAgICAgICAgPC9nPg0KICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgICAgPC9nPg0KICAgIDwvZz4NCiAgPC9nPg0KPC9zdmc+DQo=");
                            //         background-size: contain;
                            //         background-repeat: no-repeat;
                            //     }
                            // }

                            // .ranking-item:nth-child(2) {
                            //     .warp-avatar {
                            //         .img-avatar {
                            //             border: vmin(4) solid #d2daff;
                            //         }
                            //     }

                            //     .warp-avatar::before {
                            //         display: inline-block;
                            //         background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTVweCIgdmlld0JveD0iMCAwIDE2IDE1IiB2ZXJzaW9uPSIxLjEiPg0KICA8dGl0bGU+55qH5YagLTI8L3RpdGxlPg0KICA8ZGVmcz4NCiAgICA8cGF0aCBkPSJNMzkuNTc3MDU1NSw1LjQzNzM5NjY1IEMzOS40NTQxODU2LDUuNDM3Mzk2NjUgMzkuMzQzNDI5Niw1LjQ4NzQyODQ0IDM5LjI2MjA5MzIsNS41Njc4MzY2OCBDMzkuMjU2OTAxNiw1LjU3MzE5NzIzIDM5LjI1NTE3MSw1LjU3MTQxMDM4IDM5LjI1NjkwMTYsNS41NjQyNjI5OCBMMzYuMjE2MzA0Nyw4LjM5NjQxOTgxIEwzMy43Mzk4NzA5LDMuMjczNTIxNjMgQzMzLjYyMzkyMzMsMy4xMTQ0OTIgMzMuNDQwNDgzOCwzLjAxNDQyODQxIDMzLjIzMjgxNjQsMy4wMTQ0Mjg0MSBDMzIuOTkwNTM3NywzLjAxNDQyODQxIDMyLjc3OTQwOTIsMy4xNTU1ODk1NCAzMi42NzIxMTQ0LDMuMzYxMDc3MjYgTDMwLjIzNzIxNDEsOC4zOTY0MTk4MSBMMjcuMDk5NzA1OCw1LjQ3MzEzMzY1IEMyNy4wMzM5NDQ0LDUuNDM1NjA5OCAyNi45NTc3OTk3LDUuNDE0MTY3NiAyNi44NzY0NjMzLDUuNDE0MTY3NiBDMjYuNjI1NTMxOSw1LjQxNDE2NzYgMjYuNDIzMDU2Miw1LjYyNTAxNTg3IDI2LjQyMzA1NjIsNS44ODIzMjIyMyBDMjYuNDIzMDU2Miw1LjkwMzc2NDQzIDI2LjQxOTU5NSw1LjkxNDQ4NTUzIDI2LjQxMjY3MjgsNS45MTQ0ODU1MyBMMjcuMzgzNTE3OSwxMy40MDMxNzI4IEMyNy4zODM1MTc5LDEzLjM3NDU4MzIgMjcuMzgxNzg3MywxMy4zNDU5OTM2IDI3LjM3ODMyNjIsMTMuMzE1NjE3MSBDMjcuNDM3MTY1MywxMy44MzczNzcyIDI3Ljc3ODA4NiwxNC4yNjk3OTQ5IDI4LjIzNjY4NDgsMTQuNDQ4NDc5OCBDMjguMTk1MTUxMywxNC40MzIzOTgyIDI4LjE1MzYxNzgsMTQuNDE5ODkwMyAyOC4xMTU1NDU1LDE0LjQxMjc0MjkgQzI5LjA4OTg1MTcsMTQuNzg5NzY4MSAzMS4wMDIxMjI0LDE1LjAzNDU2NjYgMzMuMjA1MTI3NCwxNS4wMTMxMjQ0IEMzNS40MTg1MTU4LDE0Ljk5MzQ2OSAzNy4zNDgwOTIsMTQuNzExMTQ2OCAzOC4zMzYyNDI3LDE0LjMxMjY3OTMgQzM4LjI5OTkwMSwxNC4zMTk4MjY3IDM4LjI2MTgyODYsMTQuMzMwNTQ3OCAzOC4yMjAyOTUxLDE0LjM0NjYyOTQgQzM4LjY3ODg5NCwxNC4xNjYxNTc2IDM5LjAxOTgxNDYsMTMuNzMzNzQgMzkuMDc4NjUzNywxMy4yMTE5Nzk4IEMzOS4wNzE3MzE1LDEzLjI3MjczMjcgMzkuMDcxNzMxNSwxMy4zMjk5MTE5IDM5LjA3NTE5MjYsMTMuMzgxNzMwNiBMNDAuMDM5MTE1NCw1LjkzMjM1NDAzIEM0MC4wMzU2NTQzLDUuOTI4NzgwMzMgNDAuMDMyMTkzMiw1LjkxODA1OTIzIDQwLjAzMjE5MzIsNS45MDE5Nzc1OCBDNDAuMDMyMTkzMiw1LjY0ODI0NDkyIDM5LjgyOTcxNzUsNS40MzczOTY2NSAzOS41NzcwNTU1LDUuNDM3Mzk2NjUgWiIgaWQ9InBhdGgtMSI+PC9wYXRoPg0KICAgIDxmaWx0ZXIgeD0iLTExLjAlIiB5PSItMTIuNSUiIHdpZHRoPSIxMjIuMCUiIGhlaWdodD0iMTI1LjAlIiBpZD0iZmlsdGVyLTIiPg0KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd0JsdXJJbm5lcjEiPjwvZmVHYXVzc2lhbkJsdXI+DQogICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIxIiBpbj0ic2hhZG93Qmx1cklubmVyMSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRJbm5lcjEiPjwvZmVPZmZzZXQ+DQogICAgICA8ZmVDb21wb3NpdGUgaW49InNoYWRvd09mZnNldElubmVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9ImFyaXRobWV0aWMiIGsyPSItMSIgazM9IjEiIHJlc3VsdD0ic2hhZG93SW5uZXJJbm5lcjEiPjwvZmVDb21wb3NpdGU+DQogICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMC44MjU3ODYyMzIgICAwIDAgMCAwIDAuOTA1NDYyNzQ5ICAgMCAwIDAgMCAwLjk4NTEzOTI2NiAgMCAwIDAgMSAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dJbm5lcklubmVyMSI+PC9mZUNvbG9yTWF0cml4Pg0KICAgIDwvZmlsdGVyPg0KICA8L2RlZnM+DQogIDxnIGlkPSLpobXpnaItMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgPGcgaWQ9IuerluWxj+ebtOaSrS3lt7LlvIDlp4vovr7kurrmppwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02My4wMDAwMDAsIC0zODkuMDAwMDAwKSI+DQogICAgICA8ZyBpZD0i5by556qX5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMjUxLjAwMDAwMCkiPg0KICAgICAgICA8ZyBpZD0i5o6S5ZCNIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgNzIuMDAwMDAwKSI+DQogICAgICAgICAgPGcgaWQ9IjHlpIfku70tNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDY0LjAwMDAwMCkiPg0KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC0zIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzOC4wMDAwMDAsIDAuMDAwMDAwKSI+DQogICAgICAgICAgICAgIDxnIGlkPSLnmoflhqAtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzMuMjI1ODk0LCA5LjAxNDQyOCkgcm90YXRlKC0zMzAuMDAwMDAwKSB0cmFuc2xhdGUoLTMzLjIyNTg5NCwgLTkuMDE0NDI4KSAiPg0KICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iI0JBQzdGRiIgZmlsbC1ydWxlPSJldmVub2RkIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4NCiAgICAgICAgICAgICAgICA8dXNlIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjEiIGZpbHRlcj0idXJsKCNmaWx0ZXItMikiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPg0KICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICA8L2c+DQogICAgICAgICAgPC9nPg0KICAgICAgICA8L2c+DQogICAgICA8L2c+DQogICAgPC9nPg0KICA8L2c+DQo8L3N2Zz4NCg==");
                            //         background-size: contain;
                            //         background-repeat: no-repeat;
                            //     }

                            // }

                            // .ranking-item:nth-child(3) {
                            //     .warp-avatar {
                            //         .img-avatar {
                            //             border: vmin(4) solid #ffb897;
                            //         }
                            //     }

                            //     .warp-avatar::before {
                            //         display: inline-block;
                            //         background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDE2IDE0IiB2ZXJzaW9uPSIxLjEiPg0KICA8dGl0bGU+55qH5YagLTM8L3RpdGxlPg0KICA8ZGVmcz4NCiAgICA8cGF0aCBkPSJNMzkuMDc3MDU1NSw1LjMwMzQyMjA1IEMzOC45NTQxODU2LDUuMzAzNDIyMDUgMzguODQzNDI5Niw1LjM1MzQ1Mzg1IDM4Ljc2MjA5MzIsNS40MzM4NjIwOCBDMzguNzU2OTAxNiw1LjQzOTIyMjYzIDM4Ljc1NTE3MSw1LjQzNzQzNTc4IDM4Ljc1NjkwMTYsNS40MzAyODgzOSBMMzUuNzE2MzA0Nyw4LjI2MjQ0NTIxIEwzMy4yMzk4NzA5LDMuMTM5NTQ3MDMgQzMzLjEyMzkyMzMsMi45ODA1MTc0IDMyLjk0MDQ4MzgsMi44ODA0NTM4MiAzMi43MzI4MTY0LDIuODgwNDUzODIgQzMyLjQ5MDUzNzcsMi44ODA0NTM4MiAzMi4yNzk0MDkyLDMuMDIxNjE0OTUgMzIuMTcyMTE0NCwzLjIyNzEwMjY3IEwyOS43MzcyMTQxLDguMjYyNDQ1MjEgTDI2LjU5OTcwNTgsNS4zMzkxNTkwNSBDMjYuNTMzOTQ0NCw1LjMwMTYzNTIgMjYuNDU3Nzk5Nyw1LjI4MDE5MzAxIDI2LjM3NjQ2MzMsNS4yODAxOTMwMSBDMjYuMTI1NTMxOSw1LjI4MDE5MzAxIDI1LjkyMzA1NjIsNS40OTEwNDEyOCAyNS45MjMwNTYyLDUuNzQ4MzQ3NjQgQzI1LjkyMzA1NjIsNS43Njk3ODk4MyAyNS45MTk1OTUsNS43ODA1MTA5MyAyNS45MTI2NzI4LDUuNzgwNTEwOTMgTDI2Ljg4MzUxNzksMTMuMjY5MTk4MiBDMjYuODgzNTE3OSwxMy4yNDA2MDg2IDI2Ljg4MTc4NzMsMTMuMjEyMDE5IDI2Ljg3ODMyNjIsMTMuMTgxNjQyNSBDMjYuOTM3MTY1MywxMy43MDM0MDI2IDI3LjI3ODA4NiwxNC4xMzU4MjAzIDI3LjczNjY4NDgsMTQuMzE0NTA1MyBDMjcuNjk1MTUxMywxNC4yOTg0MjM2IDI3LjY1MzYxNzgsMTQuMjg1OTE1NyAyNy42MTU1NDU1LDE0LjI3ODc2ODMgQzI4LjU4OTg1MTcsMTQuNjU1NzkzNSAzMC41MDIxMjI0LDE0LjkwMDU5MiAzMi43MDUxMjc0LDE0Ljg3OTE0OTggQzM0LjkxODUxNTgsMTQuODU5NDk0NCAzNi44NDgwOTIsMTQuNTc3MTcyMiAzNy44MzYyNDI3LDE0LjE3ODcwNDcgQzM3Ljc5OTkwMSwxNC4xODU4NTIxIDM3Ljc2MTgyODYsMTQuMTk2NTczMiAzNy43MjAyOTUxLDE0LjIxMjY1NDggQzM4LjE3ODg5NCwxNC4wMzIxODMgMzguNTE5ODE0NiwxMy41OTk3NjU0IDM4LjU3ODY1MzcsMTMuMDc4MDA1MiBDMzguNTcxNzMxNSwxMy4xMzg3NTgxIDM4LjU3MTczMTUsMTMuMTk1OTM3MyAzOC41NzUxOTI2LDEzLjI0Nzc1NiBMMzkuNTM5MTE1NCw1Ljc5ODM3OTQzIEMzOS41MzU2NTQzLDUuNzk0ODA1NzMgMzkuNTMyMTkzMiw1Ljc4NDA4NDYzIDM5LjUzMjE5MzIsNS43NjgwMDI5OCBDMzkuNTMyMTkzMiw1LjUxNDI3MDMyIDM5LjMyOTcxNzUsNS4zMDM0MjIwNSAzOS4wNzcwNTU1LDUuMzAzNDIyMDUgWiIgaWQ9InBhdGgtMSI+PC9wYXRoPg0KICAgIDxmaWx0ZXIgeD0iLTExLjAlIiB5PSItMTIuNSUiIHdpZHRoPSIxMjIuMCUiIGhlaWdodD0iMTI1LjAlIiBpZD0iZmlsdGVyLTIiPg0KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd0JsdXJJbm5lcjEiPjwvZmVHYXVzc2lhbkJsdXI+DQogICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIxIiBpbj0ic2hhZG93Qmx1cklubmVyMSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRJbm5lcjEiPjwvZmVPZmZzZXQ+DQogICAgICA8ZmVDb21wb3NpdGUgaW49InNoYWRvd09mZnNldElubmVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9ImFyaXRobWV0aWMiIGsyPSItMSIgazM9IjEiIHJlc3VsdD0ic2hhZG93SW5uZXJJbm5lcjEiPjwvZmVDb21wb3NpdGU+DQogICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMSAgIDAgMCAwIDAgMC44MTk4Njc3NjMgICAwIDAgMCAwIDAuNzM4NjgxNDAyICAwIDAgMCAxIDAiIHR5cGU9Im1hdHJpeCIgaW49InNoYWRvd0lubmVySW5uZXIxIj48L2ZlQ29sb3JNYXRyaXg+DQogICAgPC9maWx0ZXI+DQogIDwvZGVmcz4NCiAgPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICA8ZyBpZD0i56uW5bGP55u05pKtLeW3suW8gOWni+i+vuS6uuamnCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYzLjAwMDAwMCwgLTQ1My4wMDAwMDApIj4NCiAgICAgIDxnIGlkPSLlvLnnqpflpIfku70iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAyNTEuMDAwMDAwKSI+DQogICAgICAgIDxnIGlkPSLmjpLlkI0iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCA3Mi4wMDAwMDApIj4NCiAgICAgICAgICA8ZyBpZD0iMeWkh+S7vS01IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMTI4LjAwMDAwMCkiPg0KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC03IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzOC4wMDAwMDAsIDAuMDAwMDAwKSI+DQogICAgICAgICAgICAgIDxnIGlkPSLnmoflhqAtMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIuNzI1ODk0LCA4Ljg4MDQ1NCkgcm90YXRlKC0zMzAuMDAwMDAwKSB0cmFuc2xhdGUoLTMyLjcyNTg5NCwgLTguODgwNDU0KSAiPg0KICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iI0ZGQjg5NyIgZmlsbC1ydWxlPSJldmVub2RkIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4NCiAgICAgICAgICAgICAgICA8dXNlIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjEiIGZpbHRlcj0idXJsKCNmaWx0ZXItMikiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPg0KICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICA8L2c+DQogICAgICAgICAgPC9nPg0KICAgICAgICA8L2c+DQogICAgICA8L2c+DQogICAgPC9nPg0KICA8L2c+DQo8L3N2Zz4NCg==");
                            //         background-size: contain;
                            //         background-repeat: no-repeat;
                            //     }
                            // }
                        }
                    }

                    .logo-empty {
                        width: 100%;
                        height: vmin(48);
                    }

                }
            }
        }

        .self-info {
            width: 100%;
            height: vmin(128);
            position: absolute;
            bottom: vmin(48);
            left: 0;
            right: 0;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fff;
            border-top: vmin(1) solid #eeeeee;
            padding: 0 vmin(32);
            box-sizing: border-box;
            z-index: 2;

            .personal-info {
                display: flex;
                align-items: center;

                .my-invite-num {
                    color: rgba(51, 51, 51, 1);
                    font-size: vmin(32);
                    font-weight: 400;
                    font-family: "PingFang SC";
                    text-align: left;
                    margin-right: vmin(16);
                }

                .img-avatar {
                    width: vmin(64);
                    height: vmin(64);
                    border-radius: 100%;
                    margin-right: vmin(16);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .inviting-info {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    flex: 1;
                    height: vmin(68);

                    .name {
                        width: vmin(252);
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        height: vmin(34);
                        line-height: vmin(34);
                        color: rgba(51, 51, 51, 1);
                        font-size: vmin(24);
                        font-weight: 500;
                        font-family: "PingFang SC";
                        letter-spacing: 0;

                        .medal {
                            margin-left: vmin(4);
                            height: vmin(12);
                            padding: 0 vmin(4);
                            line-height: vmin(12);
                            background: linear-gradient(180deg, #fffab8 0%, #ffd866 100%);
                            border-radius: vmin(6);
                            font-size: vmin(8);
                            color: #ff781f;
                        }
                    }

                    .desc {
                        height: vmin(34);
                        font-size: vmin(24);
                        font-family: PingFangSC-Regular;
                    }

                    .invite-desc {
                        color: rgba(255, 120, 31, 1);
                        font-size: vmin(24);
                        font-weight: 400;
                        font-family: "PingFang SC";
                        border-bottom: #FF781F solid vmin(2);
                        box-sizing: border-box;
                        width: fit-content;
                    }
                }
            }

            .num {
                font-size: vmin(32);
                color: #666;
                width: vmin(40);
                height: vmin(48);
                line-height: vmin(48);
                text-align: center;
                margin-right: vmin(16);
            }

            .btn-inviting {
                white-space: nowrap;
                font-family: "PingFangSC-Medium", "PingFang SC";
                font-weight: 500;
                background-image: linear-gradient(270deg, #ff5f46 0%, #ffa238 100%);
                color: #ffffff;
                border-radius: vmin(28);
                margin-right: vmin(4);
                font-size: vmin(28);
                outline: 0;
                border: 0;
                width: vmin(120);
                height: vmin(56);
                line-height: vmin(56);
                box-sizing: border-box;
            }
        }

        .logo {
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: vmin(32);
            padding: vmin(18) 0;
            z-index: 2;

            image {
                display: block;
                width: vmin(24);
                height: vmin(24);
                margin-right: vmin(8);
            }

            text {
                font-size: vmin(24);
                line-height: vmin(32);
                color: #CCCCCC;
            }
        }

        .safeDistance {
            padding-bottom: vmin(36);
        }

        .safeBottom {
            padding-bottom: vmin(28);
            height: vmin(128);
        }
    }
}


@mixin smallModelViewPackUpDefaultHeight {
    height: calc(100vh - 171px);
}

@mixin smallModelVeiwPackUpHeight {
    height: calc(100vh - 232px);
}


.invite-entrance-liveroom-page {
    @include invite-entrance-liveroom-page;
}

.smallModelViewPackUpDefaultHeight {
    @include smallModelViewPackUpDefaultHeight;
}

.smallModelVeiwPackUpHeight {
    @include smallModelVeiwPackUpHeight;
}

// 竖屏pad
@media screen and (min-width: 768px) and (orientation: portrait) {
    $deviceWidth: 1536 !global;

    .invite-entrance-liveroom-page {
        @include invite-entrance-liveroom-page;
    }

    .smallModelViewPackUpDefaultHeight {
        @include smallModelViewPackUpDefaultHeight;
    }

    .smallModelVeiwPackUpHeight {
        @include smallModelVeiwPackUpHeight;
    }
}

// PC 放大适配
@media screen and (min-height: 630px) and (orientation: landscape) {
    $deviceWidth: 1260 !global;
  
    .invite-entrance-liveroom-page {
        @include invite-entrance-liveroom-page;
    }

    .smallModelViewPackUpDefaultHeight {
        @include smallModelViewPackUpDefaultHeight;
    }

    .smallModelVeiwPackUpHeight {
        @include smallModelVeiwPackUpHeight;
    }
}

// 横屏pad
@media screen and (min-height: 768px) and (orientation: landscape) {
    $deviceWidth: 1536 !global;

    .invite-entrance-liveroom-page {
        @include invite-entrance-liveroom-page;
    }

    .smallModelViewPackUpDefaultHeight {
        @include smallModelViewPackUpDefaultHeight;
    }

    .smallModelVeiwPackUpHeight {
        @include smallModelVeiwPackUpHeight;
    }
}