@mixin noSelect{
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  //字体过多显示省略号
  @mixin omit($l: 1){
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $l;
    -webkit-box-orient: vertical;
  }
  @mixin bdr($radius: 4px) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
  }
  //定位全屏
  @mixin allcover{
    position:absolute;
    top:0;
    right:0;
  }
  //fixed自定义高
  @mixin fhz($z, $h){
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: $h;
    z-index: $z;
  }
  //fixed全屏
  @mixin full($z: 100){
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: $z;
  }
  //定位上下左右居中
  @mixin center {  
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  //宽高
  @mixin wh($width: 100%, $height: auto){
    width: $width;
    height: $height;
  }
  //px宽高
  @mixin pwh($width: 10, $height: 10){
    width: $width * 1px;
    height: $height *1px;
  }
  //vw宽高
  @mixin vwh($width: 10, $height: 10){
    width: $width * 1vw;
    height: $height *1vw;
  }
  //字体大小、行高、weight
  @mixin font($size: 14, $line-height: 28,$weight: 100) {  
    font-size: $size * 1px;
    line-height: $line-height *1px;
    font-weight: $weight;
  }
  //字体大小，颜色
  @mixin sc($size: 14px, $color: #333){
    font-size: $size;
    color: $color;
  }
  //flex行居中
  @mixin fc{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  //flex行两头列居中
  @mixin fs{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }



html,
body {
    background: #F6F6F6;
    line-height: normal;
    margin: 0;
    padding: 0;
    height: 100%;
}

a:hover {
    text-decoration: none;
}

ul,
li {
    text-indent: 0;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

img {
    border: none;
}

input {
    border: none;
    outline: none;
}

#liveroom {
    .top-bar {
        background: #FFF;
        border-radius: 10px 10px 0 0;
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        height: 96px;
        .top-bar-main {
            flex-grow: 1;
            flex-shrink: 1;
            display: flex;
            justify-content: space-between;
        }
        .top-bar-left,
        .top-bar-right {
            flex-shrink: 0;
        }
        .top-bar-popup {
            position: absolute;
            left: -158px;
            bottom: -123px;
            width: 178px;
            height: 196px;
            background: url("/public/images/enter-qz1.png") no-repeat left top/100% 100%;
            display: none;
            z-index: 9999999;
            &.corner {
                background: url(/public/images/enter-qz1.png) no-repeat left top/100% 100%;
            }
        }
        a {
            color: inherit;
        }
        .avatar {
            position: relative;
            margin: 8px 8px 8px 0;
            a:hover {
                .mask {
                    display: block;
                }
            }
            img {
                border-radius: 40px;
                width: 80px;
                height: 80px;
            }
            .king {
                background: url('../images/king_02.gif') center no-repeat;
                background-size: contain;
                position: absolute;
                z-index: 1;
                bottom: -2px;
                right: 0;
                width: 20px;
                height: 20px;
            }
            .mask {
                background: rgba(0, 0, 0, 0.25);
                border-radius: 40px;
                text-align: center;
                display: none;
                position: absolute;
                z-index: 1;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                &:before {
                    content: '';
                    display: inline-block;
                    vertical-align: middle;
                    height: 100%;
                }
                span {
                    color: #FFF;
                    font-size: 14px;
                    text-align: center;
                    display: inline-block;
                    vertical-align: middle;
                }
            }
        }
        .detail {
            margin-top: 19px;
            .title {
                color: #3C3C3C;
                font-size: 16px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                max-width: 480px;
                min-height: 20px;
            }
            .block {
                font-size: 12px;
                white-space: nowrap;
                margin-top: 16px;
                div, span {
                    display: inline-block;
                    vertical-align: middle;
                }
            }
            .level {
                margin-right: 5px;
                img {
                    display: block;
                    margin: 1px 0;
                    height: 22px;
                }
            }
            .name {
                color: #999;
                font-size: 14px;
                max-width: 300px;
                a {
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    display: block;
                }
            }
            .like {
                background: #F2F2F2;
                border-radius: 12px;
                font-size: 0;
                line-height: 16px;
                margin-left: 23px;
                > div {
                    text-align: center;
                    box-sizing: content-box;
                    padding: 3px 10px;
                    height: 16px;
                }
                .icon {
                    background: #FF203A;
                    border-radius: 12px;
                    color: #FFF;
                    font-size: 12px;
                    line-height: 16px;
                    cursor: pointer;
                    &.gray {
                        background: #CCC;
                    }
                    &:before {
                        background: url('../images/Live_like_icon.png') center center no-repeat;
                        content: '';
                        display: inline-block;
                        vertical-align: top;
                        margin-right: 4px;
                        width: 16px;
                        height: 16px;
                    }
                }
                .text {
                    color: #A1A1A1;
                    font-size: 12px;
                    padding: 0 15px 0 12px;
                }
                .none {
                    display: none;
                }
            }
        }
        .button {
            text-align: right;
            margin-top: 19px;
            > div {
                text-align: right;
            }
            .list {
                ul {
                    font-size: 0;
                    text-align: right;
                }
                li {
                    font-size: 0;
                    display: inline-block;
                    position: relative;
                    margin-left: 15px;
                    &:nth-child(1) {
                        margin: 0;
                    }
                    &:hover {
                        .top-bar-popup {
                            display: block;
                        }
                    }
                    a,
                    span {
                        font-size: 0;
                        display: inline-block;
                        vertical-align: middle;
                    }
                    .icon {
                        background-position: center;
                        background-size: 16px;
                        margin-right: 5px;
                        width: 16px;
                        height: 16px;
                    }
                    .text {
                        color: #999;
                        font-size: 12px;
                    }
                }
            }
            .main {
                white-space: nowrap;
                margin-top: 22px;
                > div {
                    display: inline-block;
                    vertical-align: middle;
                }
            }
            .hots {
                font-size: 0;
                cursor: pointer;
                display: inline-block;
                position: relative;
                &:hover {
                    .top-bar-popup {
                        display: block;
                    }
                }
                .text {
                    font-size: 12px;
                    color: #333;
                    line-height: 18px;
                    white-space: pre-wrap;
                    word-break: break-all;
                    padding: 0 20px;
                    text-align: center;
                    span {
                        color: #FBA422;
                        font-size: 10px;
                        padding: 0 5px;
                    }
                }
            }
            .action {
                > a {
                    background: #FF203AFF;
                    border-radius: 5px;
                    color: #FFF;
                    font-size: 14px;
                    cursor: pointer;
                    display: inline-block;
                    margin-left: 10px;
                    padding: 1px 10px;
                }
            }
        }
        .qrcode {
            background: #FF203A;
            border-radius: 5px;
            margin: 11px 0 15px 10px;
            position: relative;
            padding: 5px;
            // &:before {
            //     background: url('/public/front/images/code_face1.png') center no-repeat;
            //     background-size: 100%;
            //     border-radius: 50%;
            //     border: 1px solid #FFF;
            //     content: '';
            //     display: block;
            //     position: absolute;
            //     top: 27px;
            //     left: 0;
            //     right: 0;
            //     margin: 0 auto;
            //     width: 16px;
            //     height: 16px;
            // }
            &:hover {
                .top-bar-popup {
                    display: block;
                }
            }
            img {
                width: 60px;
                height: 60px;
            }
        }
        .live-code {
            // background: url('../images/Live_code_bg.png') center no-repeat;
            text-align: center;
            position: relative;
            width: 100%;
            height: 100%;
            .code {
                margin-top: 30px;
                width: 120px;
                height: 120px;
            }
            .text {
                color: #3C3C3C;
                font-size: 12px;
                text-align: center;
                position: absolute;
                top: 155px;
                width: 100%;
            }
        }
        .live-hots {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px;
            box-sizing: border-box;
            .code {
                width: 120px;
                height: auto;
                margin-bottom: 10px;
            }
            .text {
                font-size: 14px;
                color: #333;
            }
        }
        .live-share {
            background: url('../images/Live_share_bg.png') center no-repeat;
            box-sizing: border-box;
            transform: translate(-320px, 0);
            padding: 18px 9px 9px;
            width: 418px;
            height: 170px;
            .inner {
                padding: 20px;
                &:after {
                    content: '';
                    display: block;
                    clear: both;
                }
            }
            .share_site {
                float: left;
                width: 250px;
                &:before {
                    display: none;
                }
                ul {
                    text-align: left;
                    white-space: nowrap;
                }
                li {
                    display: inline-block;
                    vertical-align: middle;
                    margin: 0;
                    img {
                        width: 50px;
                        height: 50px;
                    }
                    span {
                        color: #3C3C3C;
                        font-size: 12px;
                        line-height: 50px;
                        padding: 0 10px;
                    }
                }
            }
            .share_link {
                font-size: 0;
                margin-top: 20px;
                > div {
                    box-sizing: border-box;
                    display: inline-block;
                    vertical-align: middle;
                    text-align: center;
                    height: 28px;
                }
                input {
                    background: none;
                    border: none;
                    outline: none;
                    color: inherit;
                    font-size: 12px;
                    line-height: 28px;
                    text-align: center;
                    cursor: pointer;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                    height: 28px;
                }
                .link {
                    background: #FFF;
                    border-radius: 14px 0 0 14px;
                    border: 1px solid #F2F2F2;
                    border-width: 1px 0 1px 1px;
                    color: #999;
                    padding: 0 5px 0 10px;
                    width: 170px;
                }
                .copy {
                    background: #FF203A;
                    border-radius: 0 14px 14px 0;
                    color: #FFF;
                    width: 80px;
                }
            }
            .share_code {
                text-align: center;
                float: right;
                img {
                    width: 80px;
                    height: 80px;
                }
                div {
                    color: #3C3C3C;
                    font-size: 14px;
                    text-align: center;
                    margin: 5px 0;
                }
            }
            .border {
                border-right: 1px solid #F2F2F2;
                float: right;
                margin-right: 20px;
                height: 100px;
            }
        }
    }
    .chat-gift {
        border-radius: 0 0 10px 10px;
        padding: 10px 20px;
        height: auto;
        .MR-gift {
            position: relative;
        }
        .gift-tab {
            display: none;
        }
        .gift-con {
            padding: 0;
            height: auto;
            .gift-wrap {
                padding: 8px 0 8px 18px;
                .con {
                    overflow: visible;
                    margin: 0;
                    padding: 0;
                    width: 800px;
                    height: 40px;
                    .scroll {
                        transform: translateX(4px);
                    }
                }
            }
            .gift {
                background: none;
                box-sizing: content-box;
                margin: 0;
                padding-left: 9px;
                width: 40px;
                height: 40px;
                &.selected {
                    position: relative;
                    &:before {
                        border-radius: 3px;
                        border: 2px solid #FF6365;
                        content: '';
                        display: block;
                        position: absolute;
                        z-index: 1;
                        width: 36px;
                        height: 36px;
                    }
                    ::selection {
                        background: none;
                    }
                }
                img,
                .gift-pic {
                    background: none;
                    border-radius: 3px;
                    margin: 0;
                    width: 40px;
                    height: 40px;
                }
                .gift-num {
                    background: #FF203A;
                    font-size: 10px;
                    z-index: 2;
                    top: -5px;
                    right: -5px;
                }
            }
            .left-arrow {
                background: url('../images/gift_left_red.png') center center no-repeat;
                left: -18px;
                &.disable {
                    background-image: url('../images/gift_left_grey.png');
                }
            }
            .right-arrow {
                background: url('../images/gift_right_red.png') center center no-repeat;
                right: 0;
                &.disable {
                    background-image: url('../images/gift_right_grey.png');
                }
            }
            .left-arrow,
            .right-arrow {
                top: 0;
                width: 18px;
                height: 40px;
            }
            .MR-gift-tip {
                background: url('../images/gift_bg_white.png') center bottom no-repeat;
                box-sizing: border-box;
                transform: translateX(-23px);
                padding: 16px 19px;
                bottom: 42px;
                width: 143px;
                height: 187px;
                .tip-content {
                    background: #FFF;
                    border-width: 0;
                    padding: 0;
                    img {
                        width: 105px;
                        height: 105px;
                    }
                    .gift-tip-con {
                        text-align: center;
                        line-height: 1.4;
                        margin: 4px 0 0;
                    }
                    .gift-tip-name {
                        color: #3C3C3C;
                        font-weight: bold;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        display: block;
                    }
                    .gift-tip-price {
                        color: #FF6365;
                        display: block;
                        margin: 0;
                        &:before {
                            content: '(';
                        }
                        &::after {
                            content: ')';
                        }
                    }
                }
            }
        }
        .gift-btn {
            text-align: right;
            padding: 8px 0;
            span,
            div {
                display: inline-block;
                vertical-align: middle;
            }
            .gems {
                .icon {
                    background: url('../images/Live_Diamonds_normal.png') center no-repeat;
                    margin-right: 5px;
                    width: 20px;
                    height: 20px;
                }
                .coin {
                    color: #666;
                    font-size: 12px;
                }
            }
            .btns {
                a {
                    color: #F5484B;
                    font-size: 12px;
                    line-height: 20px;
                    margin-left: 15px;
                }
                .send-btn {
                    background: #FF3551;
                    border-radius: 4px;
                    color: #FFF;
                    display: inline-block;
                    position: static;
                    padding: 0 8px;
                    width: auto;
                    height: auto;
                }
            }
        }
        .live-topic {
            border: 1px solid #EDEDED;
            border-radius: 12px;
            display: none;
            position: absolute;
            z-index: 1;
            left: 0;
            bottom: 7px;
            padding-left: 72px;
            .label {
                background: url('../images/Live_topic_normal.png') center no-repeat;
                position: absolute;
                z-index: 2;
                top: -1px;
                left: -1px;
                width: 72px;
                height: 22px;
            }
            .topic {
                color: #999;
                font-size: 12px;
                line-height: 20px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                padding: 0 15px 0 10px;
                max-width: 300px;
            }
            > a {
                display: block;
            }
        }
    }
    .live-show {
        position: relative;
        max-width: 1600px;
        min-width: 1305px;
        height: 108px;
        margin: 0 auto;
        margin-top: 20px;
        .live-show-item, .live-show-item-link, .live-show-item-pic {
            position: relative;
            @include wh(100%, 100%);
            border-radius: 8px;
            object-fit: cover;
        }
        .live-show-dot {
            position: absolute;
            left: calc(100% - 140px);
            bottom: 0;
            @include wh(140px, 30px);
            padding: 0 5px;
            @include fc;
            z-index: 2;
            box-sizing: border-box;
            .swiper-pagination-bullet {
                @include wh(8px, 8px);
                margin: 0 5px;
                background: #FFF;
                border-radius: 4px;
                transition-duration: .2s;
                &.swiper-pagination-bullet-active {
                    width: 40px;
                }
            }
        }
    }
    .live-tabs {
        position: relative;
        margin-top: 12px;
        .tab-bar {
            font-size: 0;
            padding: 0 20px;
            > div.tab {
                cursor: pointer;
                display: inline-block;
                vertical-align: middle;
                margin: 0 0 0 50px;
                &:first-child {
                    margin: 0;
                }
                &.active {
                    span {
                        color: #FF203A;
                        border-color: #FF203A;
                    }
                }
                span {
                    color: #3C3C3C;
                    font-size: 18px;
                    border-bottom: 2px solid transparent;
                    padding: 8px 0;
                    display: inline-block;
                }
            }
        }
        .tab-box {
            > div.box {
                background: #FFF;
                border-radius: 10px;
                overflow: hidden;
                display: none;
                min-height: 80px;
            }
        }
        .box-bar {
            font-size: 0;
            position: absolute;
            top: 0;
            right: 0;
            height: 42px;
            &:before {
                content: '';
                display: inline-block;
                vertical-align: middle;
                width: 0;
                height: 100%;
            }
            > * {
                display: inline-block;
                vertical-align: middle;
            }
            > span {
                background: #FFF;
                border-radius: 5px;
                border: 1px solid #FF203A;
                color: #FF203A;
                font-size: 14px;
                cursor: pointer;
                margin-left: 10px;
                padding: 2px 16px;
            }
            .switch {
                background: #FF203A;
                color: #FFF;
            }
            .rule {
                background: #FF203A;
                border-radius: 10px;
                color: #FFF;
                font-size: 14px;
                line-height: 20px;
                text-align: center;
                margin: 0 15px;
                width: 20px;
                height: 20px;
                &:after {
                    content: '!';
                }
            }
            .hide {
                display: none;
            }
            .more {
                font-size: 0;
                *,
                &:after {
                    display: inline-block;
                    vertical-align: middle;
                }
                &:after {
                    background: url('../images/Live_more_grey.png') center no-repeat;
                    content: '';
                    width: 16px;
                    height: 16px;
                }
                *,
                & {
                    color: #999;
                    font-size: 14px;
                    line-height: 1;
                }
            }
        }
    }
    .live-Quiz {
        .Quiz-tab {
            border-radius: 10px 10px 0 0;
            overflow: hidden;
            > div {
                background: #EBEBEB;
                color: #BBB;
                font-size: 14px;
            }
            .tab-cur {
                background:#FF203A;
                color: #FFF;
            }
        }
        .Quiz-box {
            padding: 10px 15px;
            &.none {
                color: #AAA;
                font-size: 14px;
                text-align: center;
                padding: 70px 0;
                width: 100%;
                &:before {
                    background: url('../images/default_data_bo.png') center center no-repeat;
                    content: '';
                    display: block;
                    margin: 0 auto;
                    width: 173px;
                    height: 140px;
                }
                .Quiz-none {
                    display: inline-block;
                    padding: 15px 0 0;
                }
                .Quiz-main {
                    display: none;
                }
            }
            .Quiz-none {
                display: none;
            }
            .Quiz-main {
                display: flex;
                flex-wrap: wrap;
                background: none;
                padding: 0;
                width: 100%;
            }
            .Quiz {
                background: #F6F6F6;
                border-radius: 10px;
                flex-basis: 24%;
                position: relative;
                margin: 10px 5px;
                max-width: 320px;
                min-height: 160px;
                .Quiz-state {
                    color: #FFF;
                    font-size: 12px;
                    line-height: 20px;
                    text-align: center;
                    position: absolute;
                    z-index: 1;
                    top: 9px;
                    right: 0;
                    width: 60px;
                    height: 20px;
                    &.Quizing {
                        background: url('../images/Quiz_red.png') center no-repeat;
                    }
                    &.Quizend {
                        background: url('../images/Quiz_gray.png') center no-repeat;
                    }
                    &.Quizover {
                        background: url('../images/Quiz_blue.png') center no-repeat;
                    }
                }
                .Quiz-about {
                    font-size: 0;
                    padding: 8px 10px;
                    height: 28px;
                    img {
                        border-radius: 50%;
                        width: 26px;
                        height: 26px;
                    }
                    img,
                    div {
                        display: inline-block;
                        vertical-align: middle;
                    }
                    .name {
                        color: #606060;
                        font-size: 12px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        margin-left: 5px;
                        max-width: 100px;
                    }
                    .time {
                        color: #999;
                        font-size: 12px;
                        margin-left: 10px;
                    }
                }
                .Quiz-title {
                    color: #3C3C3C;
                    font-size: 14px;
                    line-height: 19px;
                    text-align: center;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    border-width: 0;
                    margin: 0 auto;
                    height: 19px;
                    max-width: 200px;
                }
                .Quiz-time {
                    position: absolute;
                    right: 5px;
                    top: 45px;
                    font-size: 12px;
                    color: #ff3456;
                }
                .Quiz-total {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 8px;
                    padding: 0 10px;
                    .text {
                        color: #999;
                        font-size: 12px;
                        span {
                            color: #FF203A;
                        }
                    }
                }
                .Quiz-block {
                    margin: 10px 0;
                    padding: 0 10px;
                    height: 92px;
                    .vote {
                        background: #FFF;
                        border-radius: 12px;
                        display: flex;
                        justify-content: space-between;
                        position: relative;
                        margin-top: 10px;
                        height: 24px;
                        &:first-child {
                            margin: 0;
                        }
                        &.voted {
                            .width {
                                background: #FF203A;
                            }
                        }
                        &.result,
                        &.winner,
                        &.loser {
                            &:after {
                                content: '';
                                display: block;
                                position: absolute;
                                z-index: 2;
                                top: -5px;
                                right: 20%;
                                width: 47px;
                                height: 35px;
                            }
                        }
                        &.loser:after {
                            background: url('../images/Quiz_error.png') center no-repeat;
                        }
                        &.winner:after {
                            background: url('../images/Quiz_right.png') center no-repeat;
                        }
                        &.result:after {
                            background: url('../images/Quiz_check.png') center no-repeat;
                        }
                        &,
                        div {
                            line-height: 24px;
                            height: 24px;
                        }
                    }
                    .title,
                    .click,
                    .count {
                        font-size: 12px;
                        position: absolute;
                        z-index: 1;
                        top: 0;
                    }
                    .title {
                        color: #3C3C3C;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        left: 10px;
                        width: 64%;
                    }
                    .click {
                        background: #FF203A;
                        border-radius: 12px;
                        color: #FFF;
                        cursor: pointer;
                        right: 0;
                        padding: 0 12px;
                    }
                    .count {
                        color: #3C3C3C;
                        right: 10px;
                    }
                    .width {
                        background: #DDD;
                        border-radius: 12px;
                    }
                }
                .Quiz-click {
                    display: flex;
                    justify-content: space-evenly;
                    margin: 15px 0;
                    padding: 0 5px;
                    .action {
                        font-size: 0;
                        span {
                            cursor: pointer;
                            white-space: nowrap;
                            display: inline-block;
                            vertical-align: middle;
                        }
                        .btn {
                            background: #FF203A;
                            border-radius: 18px;
                            color: #FFF;
                            font-size: 12px;
                            line-height: 16px;
                            padding: 5px 25px;
                        }
                        .tip {
                            background: #C9C9C9;
                            border-radius: 18px;
                            font-size: 16px;
                            line-height: 26px;
                            text-align: center;
                            margin-left: 5px;
                            width: 26px;
                            height: 26px;
                            &:after {
                                content: '?';
                            }
                        }
                    }
                }
            }
        }
    }
    .live-videos {
        margin-top: 20px;
        .title-bar {
            padding: 25px 0 5px 0;
            .title {
                color: #707070;
                font-size: 18px;
                margin-right: 30px;
            }
            .more a {
                color: #999999FF;
                &:after {
                    // background-image: url('../images/beach/more.png');
                }
            }
        }
        .video-list {
            // background: #FFF;
            // border-radius: 10px;
            // padding: 10px 15px;
            padding-left: 10px;
            .list {
              .recommend-item {
                width: 232px;
                margin: 0 10px 14px 0;
                position: relative;
                &:nth-child(4n) {
                    margin-right: 0;
                }
                .recommend-cover {
                  width: 284.3px;
                  height: 128px;
                  object-fit: cover;
                }

                .recommend-info {
                  width: 100%;
                  height: 72px;
                  background-color: #fff;
                  padding: 10px 10px 7px 10px;
                  box-sizing: border-box;

                  .recommend-title {
                    font-size: 14px;
                    color: #000000ff;
                    font-weight: 400;
                    line-height: 19px;

                    margin-bottom: 10px;
                  }

                  .recom {
                    color: #999999ff;
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 16px;
                    display: flex;
                    justify-content: space-between;

                    .name {
                      display: flex;
                      align-items: center;

                      img {
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                        margin-right: 4px;
                      }
                    }

                    .recom-num {
                      display: flex;
                      align-items: center;

                      img {
                        width: 10px;
                        height: 10px;
                        margin-right: 4px;
                      }
                    }
                  }
                }

                .recommend-label {
                  width: 103px;
                  height: 26px;
                  position: absolute;
                  top: 2px;
                  left: 2px;
                  img {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
            // li {
            //     box-sizing: border-box;
            //     padding: 10px 5px 5px;
            //     width: 20%;
            //     .thumb {
            //         padding-top: 57.25%;
            //         a:before {
            //             top: 0;
            //             z-index: 3;
            //         }
            //         .times {
            //             z-index: 2;
            //         }
            //         img {
            //             position: absolute;
            //             z-index: 1;
            //             top: 0;
            //             left: 0;
            //             width: 100%;
            //             height: 100%;
            //         }
            //     }
            // }
        }
    }
    .live-games {

        border-radius: 10px;
        margin:40px 0 15px 0;
        .anchor-reserve {
            background: none;
            margin: 0;
        }
        .reserve-header {
            border-bottom: 1px solid #F2F2F2;
            line-height: 49px;
            // margin: 0 27px;
            // padding: 0 0 3px;
            height: auto;
            &:after {
                content: '';
                display: block;
                clear: both;
            }
            a {
                color: #999;
                font-size: 12px;
                font-weight: normal;
                &:after {
                    content: '>';
                }
            }
            span {
                color: #3C3C3C;
                font-size: 16px;
                font-weight: normal;
                &:after {
                    display: none;
                }
            }
        }
        .reserve-list {
            padding: 10px 15px 18px;
            max-height: 400px;
            overflow-y: scroll;
            background: #FFF;
            .reserve-item {
                background: #F6F6F6;
                border-radius: 5px;
                border-width: 0;
                overflow: hidden;
                margin-top: 10px;
                .team {
                    color: #3C3C3C;
                    font-size: 12px;
                    &.home-team img {
                        right: 45px;
                    }
                    &.away-team img {
                        left: 45px;
                    }
                    img {
                        top: 28px;
                        width: 24px;
                        height: 24px;
                    }
                }
                .league-name,
                .league-date {
                    color: #999;
                    font-size: 12px;
                }
                .league-time {
                    color: #3C3C3C;
                    font-size: 14px;
                }
                .recomend-btn {
                    background: url('../images/beach/Live_recommend_red.png') center no-repeat;
                    font-size: 0;
                    width: 90px;
                    height: 24px;
                    &:before {
                        display: none;
                    }
                }
            }
        }
    }
    .live-board {
        background: #FFF;
        border-radius: 10px;
        position: relative;
        margin-bottom: 15px;
        .board-bar {
            border-bottom: 1px solid #EDEDED;
            margin: 0 15px;
            .title {
                color: #3C3C3C;
                font-size: 16px;
                display: inline-block;
                padding: 13px 0 16px;
            }
            .isHelper2 {
                // background: url("/public//images/act-helper.png") center no-repeat;
                // background-size: 100%;
                // display: block;
                position: absolute;
                z-index: 1;
                top: 6px;
                right: 6px;
                width: 240px;
                height: 39px;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    width: auto;
                    height: auto;
                    max-width: 80%;
                    max-height: 80%;
                }
            }
        }
        .board-box {
            padding: 15px;
        }
    }
    .copyLinkUrl {
        background: #FF203A url('../images/public_link_white.png') 5px no-repeat;
        border: 1px solid #E9E9E9;
        input[type="text"] {
            color: #404040;
        }
        input[type="button"] {
            color: #FFF;
            cursor: pointer;
        }
    }

    .slide-cont1 {
        background: none;
        border: none;
        margin: auto;
        padding: 0;
        width: 100%;
        > span {
            background: none;
            padding: 0;
            width: 100%;
        }
        .item-qq,
        .item-url,
        .item-wechat,
        .item-helper {
            display: inline-block;
        }
    }
    .active-main {
        border: none;
        margin: 0;
        padding: 20px;
        &.none {
            color: #AAA;
            font-size: 14px;
            text-align: center;
            padding: 70px 0;
            width: 100%;
            &:before {
                background: url('../images/default_data_bo.png') center center no-repeat;
                content: '';
                display: block;
                margin: 0 auto;
                width: 173px;
                height: 140px;
            }
            .active-none {
                display: inline-block;
                padding: 15px 0 0;
            }
        }
        .active-none {
            display: none;
        }
        .active-list {
            justify-content: start;
            margin: 0;
            .active-item {
                margin: 0 0 0 12px;
                width: 25%;
                &:first-child {
                    margin: 0;
                }
                .active-title,
                .active-discr {
                    display: none;
                }
                img {
                    border-radius: 5px;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .SR-pager {
        .SR-stager {
            margin: 20px auto;
            padding-left: 0;
        }
    }
}

@media screen and (max-width: 1600px) {
    #liveroom {
        .top-bar {
            .detail {
                .name {
                    max-width: 200px;
                }
                .title {
                    max-width: 400px;
                }
            }
        }
    }
}

@media screen and (max-width: 1500px) {
    #liveroom {
        .live-Quiz {
            .Quiz-box {
                .Quiz {
                    flex-basis: 32%;
                }
            }
        }
    }
}

@media screen and (max-width: 1400px) {
    #liveroom {
        .top-bar {
            .detail {
                .name {
                    max-width: 120px;
                }
                .title {
                    max-width: 300px;
                }
            }
        }
    }
}

#header {
    .popup {
        background: none;
        position: static;
        padding: 0;
        top: auto;
    }
    .panel {
        ul,
        li {
            text-align: center;
        }
    }
}

#selectPlay {
    .mount_select {
        position: relative;
        select {
            background: #F9F9F9;
            width: 100%;
            height: 40px;
        }
        &:before {
            background: url('../images/Down_normal.png') center no-repeat;
            background-size: contain;
            pointer-events: none;
            content: '';
            display: block;
            position: absolute;
            top: 10px;
            right: 15px;
            width: 20px;
            height: 20px;
        }
    }
    .mount_btn_no,
    .mount_btn_on {
        border-radius: 5px;
        line-height: 30px;
        height: 30px;
    }
    .mount_btn_on {
        color: #FF6365;
        border-color: #FF6365;
    }
    .deal-footer {
        text-align: center;
        margin: 36px 0 40px;
        .mount_con {
            background: #FD6E6F;
        }
        .mount_cancel {
            border-color: #999;
        }
        .mount_con,
        .mount_cancel {
            font-size: 18px;
            border-radius: 0;
            width: 165px;
        }
    }
}

// .advertise_swiper {
//     display: none !important;
// }
#announcement {
    position: absolute;
    z-index: 999;
    right: 0;
    width: 100%;
    overflow: hidden;
    display: none;

    ul {
        position: relative;
        width: 100%;
        height: auto;
    }

    li {
        position: relative;
        width: 100%;
        height: 60px;

        a {
            position: absolute;
            width: auto;
            box-sizing: border-box;
            padding: 13px 0 8px 25px;
            display: inline-block;
            color: #fff;
            font-size: 16px;
            line-height: 39px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: url('/public/front/images/announcementBg.png') repeat left top;
            background-size: auto 100%;
            background-clip: content-box;
            text-indent: 21px;

            &:before {
                position: absolute;
                top: 0;
                left: 0;
                content: '';
                display: block;
                height: 60px;
                width: 60px;
                background: url("/public/front/images/announcementBg_PC.png") no-repeat left top;
            }

            &:after {
                content: ' ';
                width: 15px;
                display: inline-block;
            }

            &:hover {
                color: #fff;
                text-decoration: underline;
            }

            i {
                color: #FFD502;
                font-size: 16px;
            }
        }
    }
}

#chatServerBox,
#todayTopicLink {
    display: none;
}


.open_room_dia_masker {
    display: none;
    background: url('/public/front/images/open_room_dia_bg.png');
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1000;
    top: 0;
}

@keyframes open_room_dia {
    0% {
        transform: translate(-54%, -50%) scale(1);
        right: 16px;
        top: 50%;
    }

    // 50% {
    //     transform: translate(-10%, -50%) scale(0.01);
    //     right: 16px;
    //     top: 56%;
    // }

    100% {
        transform: translate(178px, -50%) scale(0);
        right: 16px;
        top: 67%;
    }
}

.open_room_dia.mini {
    animation: open_room_dia .3s 1 ease-in-out;
    transform: translate(178px, -50%) scale(0);
    right: 16px;
    top: 67%;
}
@keyframes open_room_dia_mini {
    0% {
        transform:  scale(0);
        right: 16px;
        top: 62%;
    }
    70% {
        transform: scale(1.2);
        right: 16px;
        top: 62%;
    }
    100% {
        transform:  scale(1);
        right: 16px;
        top: 62%;
    }
}

.open_room_dia_mini {
    position: absolute;
    animation: open_room_dia_mini .3s 1 ease-in-out;
    transform: scale(1);
    display: none;
    right: 16px;
    top: 62%;
    z-index: 1001;
    width: 71px;
    height: 71px;


    .his_avatar_img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        padding: 7px;
        box-sizing: border-box;
        background: url('/public/front/images/room_avatar_kuang.png') no-repeat center center /100% 100%;
    }

    .islive {
        position: absolute;
        right: 0;
        top: 0;
    }

    .his_room_status {
        display: inline-block;
        width: 71px;
        height: 19px;
        line-height: 19px;
        text-align: center;
        background: #FFEDEE;
        color: #F75052;
        opacity: 1;
        border-radius: 11px;
        position: absolute;
        left: 0;
        bottom: 0;
    }

}

.open_room_dia {
    display: none;
    text-align: center;
    width: 438px;
    height: 398px;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
    background: url('/public/front/images/open_room_con_dia_bg.png') no-repeat center center /100% 100%;
    z-index: 1000;
    color: #fabdc0;
    padding: 40px 29px;
    box-sizing: border-box;

    .mini_btn {
        position: absolute;
        width: 16px;
        height: 16px;
        right: 20px;
        top: 20px;
        cursor: pointer;
    }
}

.open_room_dia h3 {
    margin: 10px auto;
    color: #3C3C3C;
    font-size: 16px;
    text-align: center;
}

.open_room_dia {

    .his_avatar {
        border-radius: 50%;
        text-align: center;
    }

    .his_avatar_img {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        padding: 9px;
        box-sizing: border-box;
        background: url('/public/front/images/room_avatar_kuang.png') no-repeat center center /100% 100%;
    }

    .his_avatar .islive {
        margin-left: -31px;
        margin-top: 6px;
    }

    .his_room_status {
        display: inline-block;
        width: 80px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        background: #FFEDEE;
        color: #F75052;
        opacity: 1;
        border-radius: 11px;
        position: absolute;
        top: 14px;
        left: 237px;
    }

    .his_room_agora_trick {
        width: 182px;
        height: 33px;
        line-height: 33px;
        background: rgba(247, 80, 82, 1);
        cursor: pointer;
        user-select: none;
        border-radius: 19px;
        margin: 0 auto;
        font-size: 14px;
        color: white;
    }

    .his_room_agora_trick img {
        width: 33.5px;
        height: 20px;
        margin-top: 6px;
        margin-left: 15px;
    }

    .his_room_p {
        width: 286px;
        margin: 10px auto;
        text-align: center;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 16px;
        color: rgba(153, 153, 153, 1);
    }

    .open_room_qr {
        text-align: center;
    }

    .open_room_qr_img {
        display: inline-block;
    }
}

.gift_box {
    position: absolute;
    left: 0;
    /*top: 155px;*/
    height: auto;
    width: auto;
    color: #FFF;
    z-index: 99999;
    overflow: hidden;
    box-sizing: border-box;

    .gift_item {
        position: relative;
        min-width: 240px;
        max-width: 505px;
        height: 64px;
        margin-top: 5px;
        overflow: hidden;
        box-sizing: border-box;
        background: url("/public/front/images/bg_1.png") no-repeat top right/auto 100%;
        padding: 13px 40px 5px 20px;

        .user_info_left {
            float: left;
            height: 100%;
            width: auto;
            padding-right: 5px;

            .user_name,
            .gift_name {
                width: 100%;
                color: #FFDFA2;
                font-size: 14px;
                line-height: 20px;
            }

            .user_name {
                font-size: 20px;
                line-height: 26px;
                max-width: 119px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .gift_dh {
            float: left;
            position: relative;
            width: 48px;
            height: 48px;
            border-radius: 6px;
        }

        .gift_dh img {
            position: absolute;
            top: -10px;
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 6px;
            border: 2px solid #FFD899;
            box-sizing: border-box;
        }

        .gift_num {
            float: left;
            color: #FFD899;
            height: 46px;

            span {
                height: 46px;
                line-height: 46px;
                display: block;
                float: left;

                &:nth-of-type(1) {
                    font-size: 30px;
                    padding: 0 5px;
                }
            }

            .gift_nums {
                font-size: 40px;
                font-weight: 600;
                max-width: 120px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}

.clearfix:after {
    content: '.';
    height: 0;
    display: block;
    clear: both;
}

.user1,
.user2,
.user3 {
    width: 100px;
    height: 40px;
    margin-left: 20px;
    cursor: pointer;
    box-sizing: border-box;
}

.record-item {
    margin-left: 10px;
    position: relative;
    float: left;
    border: 1px solid rgba(128, 128, 128, 0.377);
    padding: 0px 20px;
    height: 30px;
    line-height: 30px;
    color: #FF203A;
    border-radius: 30px;
    margin-top: 10px;
    font-size: 10px;
    cursor: pointer;
}

.recordcurr {
    background-color: #FF203A;
    color: white;
    border: none;
}

#anchor-recommend .live-title div a:after {
    content: ">";
    color: #FF203A;
    font-size: 18px;
}

#live800iconlink {
    display: none;
}

#chatServerBox {
    position: relative;
    overflow: hidden;
    margin-top: 10px;

    #live800iconlink {
        display: block;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        background: #fe5d67;

        img {
            display: block;
            margin: 0 auto;
            max-width: 400px;
            height: auto;
        }
    }
}


.redpacket2 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* top: 10%;
             left: 30%; */
    display: none;
    background: rgba(0, 0, 0, .7);
    overflow: hidden;
    z-index: 100000;
}

.redBg {
    width: 215px;
    height: 312px;
    /* position: fixed; */
    /* top: 10%;
		left: 30%; */
    margin: 0 auto;
    background: url('/public/front/images/PC.png')no-repeat;
    z-index: 998;
    background-size: contain;
    margin-top: 70px;
    position: relative;
}

.timerCount {
    display: block;
    width: 22px;
    height: 34px;
    font-size: 29px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: rgba(247, 56, 74, 1);
    margin: 0 auto;
    margin-top: 9px;
    position: absolute;
    top: 185px;
    left: 98px;
}

.redpacket .special {
    list-style: none;
    position: absolute;
    /* animation: scroll 10s linear .2s infinite;
    transform: perspective(300px) rotateX(35deg);
    -o-transform: perspective(300px) rotateX(35deg);
    -webkit-transform: perspective(300px) rotateX(35deg);
    -moz-transform: perspective(300px) rotateX(35deg); */
    /* box-shadow: 0px 1px 4px 1px saddlebrown; */
}

.redpacket .special a {
    display: block;
    width: 100%;
    height: 100%;
}

.redpacket-main {
    width: 50px;
    height: 50px;
    left: 45%;
    top: 50%;
    position: absolute;
    background: url('/public/front/images/package.png')no-repeat;
    z-index: 9999;
}

.redpacket {
    width: 398px;
    height: 429px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* top: 10%;
    left: 30%; */
    display: none;
    background: rgba(13, 13, 13, 1);
    opacity: 0.7;
    overflow: hidden;
    z-index: 100000;
}

.redpacket-mask {
    width: 650px;
    height: 350px;
    position: fixed;
    top: 10.4%;
    left: 30%;
}

.redpacket-wrap {
    width: 301px;
    height: 312px;
    /* position: fixed; */
    /* top: 10%;
            left: 30%; */
    margin: 0 auto;
    animation: shake 1s infinite;
    -o-animation: shake 1s infinite;
    -webkit-animation: shake 1s infinite;
    -moz-animation: shake 1s infinite;
    background: url('/public/front/images/package.png')no-repeat;
    z-index: 998;
    background-size: cover;
    margin-top: 70px;
    position: relative;
}

.goldMounse {
    width: 97px;
    height: 114px;
    position: absolute;
    background: url('/public/front/images/goldMouse.png')no-repeat;
    left: 16px;
    top: 197px;
    background-size: cover;
}

.daojishi {
    width: 105px;
    height: 49px;
    position: absolute;
    background: url('/public/front/images/daojishi.png')no-repeat;
    left: 104px;
    top: 224px;
    background-size: cover;
}

.daojishi span {
    display: block;
    width: 22px;
    height: 34px;
    font-size: 41px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: rgba(247, 56, 74, 1);
    margin: 0 auto;
    margin-top: 5px;
}

@keyframes scroll {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes shake {
    0%,
    40%,
    50%,
    100% {
        -webkit-transform: rotate(0);
    }

    10%,
    30%,
    70%,
    90% {
        -webkit-transform: rotate(-5deg);
    }

    20%,
    60%,
    80% {
        -webkit-transform: rotate(5deg);
    }
}


.leftRedPackage {
    position: absolute;
    top: 360px;
    left: 18px;
    width: auto;
    z-index: 99;

    img {
        width: 34px;
        height: 46px;
        animation: shake 1s infinite;
        -o-animation: shake 1s infinite;
        -webkit-animation: shake 1s infinite;
        -moz-animation: shake 1s infinite;
        cursor: pointer;
    }

    div {
        color: #D7700E;
        margin-top: 10px;
    }
}

.downLoadPackage {
    position: absolute;
    top: 40%;
    right: 16px;
    transform: translate(0, -50%);
    width: auto;
    z-index: 999;

    img {
        width: 83px;
        height: 89px;
        display: block;
        margin: 0 auto;
        animation: shake 1s infinite;
        -o-animation: shake 1s infinite;
        -webkit-animation: shake 1s infinite;
        -moz-animation: shake 1s infinite;
        cursor: pointer;
    }

    .closeTip {
        background: url('/public/front/images/closeBtn.png') center no-repeat;
        background-size: contain;
        cursor: pointer;
        position: absolute;
        margin: 0 auto;
        z-index: 120;
        right: 0;
        width: 20px;
        height: 20px;
    }

    .downLoadTip {
        color: white;
        text-align: center;
        margin-top: 10px;
    }
}


.chipHelper {
    /* display: block; */
}

.chipHelperContainer {
    width: 464px;
    height: 420px;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    border-radius: 10px;
}

.chipHelperTitle {
    width: 464px;
    height: 50px;
    background: rgba(244, 244, 244, 1);
    opacity: 1;
    border-radius: 10px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 50px;
    color: rgba(36, 36, 36, 1);
    opacity: 1;
    position: relative;
    text-align: center;
}

.closeChipHelper {
    position: absolute;
    top: 15px;
    right: 20px;
    cursor: pointer;
}

.chipHelperContent {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
}

.chipHelperTip {
    width: 154px;
    height: 19px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 19px;
    color: rgba(112, 112, 112, 1);
    opacity: 1;
    margin-bottom: 12px;
}

.chipHelperTypeList {
    display: flex;
    justify-content: center;
}

.chipHelperTypeItem {
    cursor: pointer;
    width: 200px;
    height: auto;
    overflow: hidden;
    margin-bottom: 6px;

}

.chipHelperTypeItem img {
    width: 98%;
    height: 100%;
}



.vip_fans_promition {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.582);
    z-index: 3000;

    .vip_fans_dia {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 3001;
      width: 380px;
      // height:984px;
      background: rgba(255, 255, 255, 1);
      border-radius: 15px;
    }

    .prom_head {
      color: #f5484b;
      font-weight: 900;
      height: 48px;
      line-height: 48px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.123);
      text-align: center;
      font-size: 16px;
    }
    .prom_body {
      max-height: 306px;
      min-height: 100px;
      padding: 20px 20px 0px;
      overflow: auto;
      color:#999999;
      .prom_info {
          font-size: 14px;
          line-height: 25px;
        img {
          max-width: 100%;
        }
      }
    }
    .prom_foot {
      text-align: center;
      padding: 20px 0;
      .btns{
         span {
        display: inline-block;
        width: 118px;
        height: 36px;
        line-height: 36px;
        background: rgba(245, 72, 75, 1);
        color: white;
        border-radius: 318px;
        font-size: 14px;
        margin-right: 10px;
        cursor: pointer;

        &:nth-last-child(2){
            background-color: #fba422;
        }
        &:nth-last-child(1){
            background-color: #FF7840;
            margin-right: 0;
        }
      }
      }

      div{
          padding-top: 10px;
          a{
              .gt{
                display: inline-block;
                width: 7px;
                height: 7px;
                border: 1px solid #707070;
                border-left-width: 0;
                border-bottom-width: 0;
                margin: 0px;
                    transform: matrix(0.71,0.71,-0.71,0.71,0,0);
              }
              color:#707070;
              margin-top: 10px;
              &:visited{
                color:#707070;
              }
              &:hover{
                color:#f75255;
                .gt{
                    border: 1px solid #f75255;
                    border-left-width: 0;
                    border-bottom-width: 0;
                }
              }
          }
      }
    }
}


.clearfix {
    zoom: 1;
    &:after,
    &:before {
        content: '';
        height: 0;
        display: block;
        clear: both;
    }
}

.fl {
    float: left;
}

.fr {
    float: right;
}


.gift-funs {
    position: relative;
    width: 100%;
    height: auto;
    padding: 15px 25px;
    background: #FFF;
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.gift-funs * {
    box-sizing: border-box;
}

.gift-funs .MR-funs-clockin {
    position: relative;
    width: auto !important;
    height: 50px;

}

.gift-funs .MR-funs-clockin .MR-funs,
.gift-funs .MR-funs-clockin .MR-clockin {
    position: relative;
    width: 50px;
    height: 50px;
    background-image: url("/public/images/funs-clockin.png");
    background-position-x: 0;
    background-size: 100% 300%;
}

.gift-funs .MR-funs-clockin .MR-funs {
    background-position-y: 0;
    cursor: pointer;
}

.gift-funs .MR-funs-clockin .MR-clockin {
    background-position-y: -50px;
    margin-left: 20px;
}

.gift-funs .MR-funs-clockin .MR-clockin.clocked {
    background-position-y: -100px;
}

.gift-funs .MR-funs-clockin .MR-clockin:hover .clockin {
    display: block;
}

.gift-funs .MR-funs-clockin .MR-clockin .clockin {
    position: absolute;
    left: -12px;
    top: -188px;
    width: 178px;
    height: 196px;
    background: url("/public/images/enter-qz.png") no-repeat left top/100% 100%;
    padding-top: 18px;
    display: none;
    z-index: 9999999;
}

.gift-funs .MR-funs-clockin .MR-clockin .clockin-qrcode {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

.gift-funs .MR-funs-clockin .MR-clockin .app-scan,
.gift-funs .MR-funs-clockin .MR-clockin .enter-qz {
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    margin-top: 5px;
    color: #F5484B;
}

.gift-funs .MR-funs-clockin .MR-clockin .enter-qz {
    color: #333;
}

.gift-funs .gift-box {
    position: relative;
    height: auto;
    margin-left: 20px;
    flex: 1;
    display: none;
}

.gift-funs .gift-box .gift-tabs {
    position: relative;
    width: auto;
    height: 23px;
}

.gift-funs .gift-box .gift-tabs .gift-tabs-item {
    position: relative;
    width: auto;
    height: 20px;
    font-size: 14px;
    color: #999;
    font-weight: 400;
    margin-left: 20px;
    cursor: pointer;
    transition-duration: 0.5s;
    transform-style: all;
    transition-timing-function: ease-in-out;
}

.gift-funs .gift-box .gift-tabs .gift-tabs-item:first-child {
    margin-left: 0;
}

.gift-funs .gift-box .gift-tabs .gift-tabs-item.chooiced {
    color: #FF203A;
    font-weight: 600;
}

.gift-funs .gift-box .gift-tabs .hight-light {
    position: absolute;
    left: 0px;
    bottom: 0;
    width: 22px;
    height: 2px;
    background: #FF203A;
    border-radius: 2px;
    transition-duration: 0.5s;
    transform-style: left;
    transition-timing-function: ease-in-out;
}

.gift-funs .gift-box .gift-list {
    position: relative;
    width: 100%;
    height: 40px;
    padding: 0 34px;
    margin-top: 20px;
}

.gift-funs .gift-box .gift-list .change-pre,
.gift-funs .gift-box .gift-list .change-next {
    position: absolute;
    top: 0;
    width: 18px;
    height: 40px;
    background-image: url("/public/front/images/beach/gift_right_left.png");
    background-repeat: no-repeat;
    background-size: 200% 200%;
    z-index: 1;
    cursor: pointer;
}

.gift-funs .gift-box .gift-list .change-pre {
    background-position: 0 0;
    left: 0;
}

.gift-funs .gift-box .gift-list .change-pre.passable {
    background-position: 0 -40px;
}

.gift-funs .gift-box .gift-list .change-next {
    right: 0;
    background-position: -18px 0;
}

.gift-funs .gift-box .gift-list .change-next.passable {
    background-position: -18px -40px;
}

.gift-list .list-box {
    position: absolute;
    top: -10px;
    left: 34px;
    width: calc(100% - 68px);
    height: 60px;
    overflow: hidden;
    padding: 10px 0;
}

.gift-funs .gift-box .gift-list .gift-list-box {
    position: relative;
    width: auto;
    height: 100%;
    word-break: keep-all;
    white-space: nowrap;
    transition-duration: 0.5s;
    display: none;
}

.gift-funs .gift-box .gift-list .gift-list-box.activity {
    display: block;
}

.gift-funs .gift-box .gift-list .gift-list-box .gift-list-item {
    box-sizing: content-box;
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
    padding-right: 11px;
    vertical-align: top;
    cursor: pointer;
}

.gift-funs .gift-box .gift-list .gift-list-box .gift-list-item:hover img {
    transform: scale(0.95);
}

.gift-funs .gift-box .gift-list .gift-list-box .gift-list-item:active img {
    transform: scale(0.9);
}

.gift-funs .gift-box .gift-list .gift-list-box .gift-list-item:last-child {
    padding-right: 0;
}

.gift-funs .gift-box .gift-list .gift-list-box .gift-list-item .gift-icon {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 3px;
}

.gift-funs .gift-box .gift-list .gift-list-box .gift-list-item.act .gift-icon {
    border: 1px solid #FF203A;
}
.gift-funs .gift-box .gift-list .gift-list-box .no-pack-gift {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    color: #DDD;
}

.gift-list-item .gift-list-item-count,
.gift-list-item .gift-list-item-grade {
    position: absolute;
    top: -8px;
    right: 10px;
    width: auto;
    height: 16px;
    border-radius: 16px;
    background: #FF203A;
    color: #FFF;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    padding: 0 5px;
    transform: translateX(50%);
    z-index: 1;
}

.gift-list-item .gift-list-item-count {
    display: none;
}

.gift-list-item.with-grade .gift-list-item-count {
    top: 32px;
}

.gift-list-item .gift-list-item-hover {
    display: none;
}

.gift-list-item-hover {
    position: relative;
    width: 140px;
    height: 180px;
    padding-bottom: 16px;
    background: url("/public/front/images/gift_bg_white.png") center top no-repeat;
    display: block;
    box-sizing: border-box;
    padding: 15px;
}

.gift-icon-hover {
    display: block;
    width: 100%;
    height: auto;
    max-height: 110px;
}

.gift-name,
.gift-cost {
    position: relative;
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    text-align: center !important;
}

.gift-name {
    color: #333;
    text-align: left;
}

.gift-cost {
    color: #FF203A;
}

.gift-big-box {
    position: absolute;
    left: -1000px;
    top: -1000px;
    width: auto;
    height: auto;
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft {
    animation: fadeInLeft 0.5s 1 forwards;
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRight {
    animation: fadeInRight 0.5s 1 forwards;
}

.topic-send-gift {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 10px;
}

.topic-send-gift .topic {
    position: relative;
    width: auto;
    height: 22px;
    padding-left: 72px;
    border: 1px solid #ededed;
    border-radius: 12px;
}

.topic-send-gift .topic .topic-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 72px;
    height: 20px;
    background: url("/public/front/images/Live_topic_normal.png") no-repeat center/contain;
}

.topic-send-gift .topic .topic-today {
    display: block;
    position: relative;
    width: auto;
    height: 20px;
    max-width: 325px;
    font-size: 12px;
    color: #999;
    line-height: 20px;
    font-weight: normal;
    text-decoration: none;
    padding: 0 10px;
    overflow: hidden;
}

.topic-send-gift .send-gift {
    position: relative;
    width: auto;
    height: 22px;
    line-height: 22px;
}

.topic-send-gift .send-gift .icon {
    width: 20px;
    height: 16px;
    margin-top: 1px;
    margin-right: 5px;
    background: url("/public/front/images/beach/diamond.png") no-repeat center/contain;
}

.topic-send-gift .send-gift .coin {
    width: auto;
    color: #FF203A;
    font-size: 12px;
    margin-right: 10px;
}

.topic-send-gift .send-gift .diamond-charge {
    color: #FF203A;
    font-size: 14px;
    text-decoration: none;
    margin-right: 10px;
}

.topic-send-gift .send-gift .gitf_couter_btn_con {
    border: 1px solid #FF203A;
    border-radius: 12px;
    .gitf_couter_btn{
        color: #FF203A;
        position: relative;
        padding-right: 20px;
        padding-left: 7px;
        display: inline-block;
        height: 100%;
        cursor: pointer;
        width: 59px;
        text-align: center;
        .gitf_couter_btn_arrorw{
            width: 0;
            height: 0;
            border: 6px solid;
            border-color: #FF203A transparent transparent transparent;
            position: absolute;
            top: 8px;
            right: 3px;
            &::after{
                content: '';
                position: absolute;
                top: -12px;
                left: -10px;
                border: 10px solid;
                border-color: white transparent transparent transparent;
            }
            &.up{
                transform: rotate(180deg);
                top:1px;
            }
        }
    }
    .send-btn{
        width: auto;
        height: 100%;
        display: inline-block;
        background: #FF203A !important;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        color: #FFF;
        font-size: 12px;
        padding: 0 8px;
        cursor: pointer;
        //&:hover {
        //    background: #01a16c;
        //}
    }

    &.disabled{
    border: 1px solid #FF203A;
      .gitf_couter_btn{
          display: none;
      }
      .send-btn{
          background-color:#FF203A;
          border-radius: 12px;
      }
    }
    .counter-selector{
        display: none;
        position: absolute;
        bottom:22px;
        background-color: green;
        width: 116px;
        z-index: 3005;
        border-radius: 4px;
        overflow: hidden;
        text-align: center;
        .counter-select-item{
            width: 100%;
            color:#FF203A;
            height: 28px;
            background-color: #F6F6F6;
            cursor: pointer;
            &:nth-child(n+2):hover{
                background-color: rgba(229,229,229,1);
            }
            .icon-calc{
                display: inline-block;
                width: 27px;
                height: 100%;
                background: url(/public/images/calc.png) no-repeat center center;
            }
            .gitf_cout_input{
                width: 60px;
                height: 100%;
                text-align: center;
            }
            .gift_count_submit{
                display: inline-block;
                width: 27px;
                height: 100%;
                background: url(/public/images/public_dui_red.png) no-repeat center center;
                &.disabled{
                    background: url(/public/images/public_dui_grey.png) no-repeat center center;

                }
            }
        }
    }
}



.king-funs {
    position: absolute;
    left: 100%;
    width: auto;
    height: 50px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    padding-left: 25px;
    padding-right: 10px;
    z-index: 202;
    // animation: funsEnter 20s linear forwards;
    // &.lv9 {
    //     .funs-icon {
    //         color: #FFDE00;
    //     }
    //     .funs-avatar {
    //         border-color: #FFDE00;
    //     }
    //     .funs-avatar-img {
    //         background: #FFDE00;
    //     }
    //     .funs-lighter-bg {
    //         background: linear-gradient(68deg, rgba(255, 197, 87, 1) 0%, rgba(255, 216, 0, 0.9) 50%, rgba(255, 216, 0, 0.8) 60%, rgba(252, 150, 75, 0) 100%);
    //     }
    //     .meteor {
    //         background: linear-gradient(297deg, rgba(251, 214, 6, 0) 0%, rgba(251, 214, 6, 1) 51%, rgba(251, 214, 6, 0) 100%);
    //     }
    // }
    // &.lv10 {
    //     .funs-icon {
    //         color: #FD5E58;
    //     }
    //     .funs-avatar {
    //         border-color: #FD5E58;
    //     }
    //     .funs-avatar-img {
    //         background: #FD5E58;
    //     }
    //     .funs-lighter-bg {
    //         background: linear-gradient(68deg, rgba(255, 0, 0, 1) 0%, rgba(252, 146, 73, 0.9) 50%, rgba(252, 146, 73, 0.8) 60%, rgba(252, 150, 75, 0) 100%);
    //     }
    //     .meteor {
    //         background: linear-gradient(297deg, rgba(246, 90, 86, 0) 0%, rgba(246, 90, 86, 1) 51%, rgba(246, 90, 86, 0) 100%);
    //     }
    // }
    // &.lv11 {
    //     .funs-icon {
    //         color: #843504;
    //     }
    //     .funs-avatar {
    //         border-color: #843504;
    //     }
    //     .funs-avatar-img {
    //         background: #843504;
    //     }
    //     .funs-lighter-bg {
    //         background: linear-gradient(68deg, rgba(132, 53, 4, 1) 0%, rgba(219, 97, 13, 0.9) 50%, rgba(219, 97, 13, 0.8) 60%, rgba(252, 150, 75, 0) 100%);
    //     }
    //     .meteor {
    //         background: linear-gradient(297deg, rgba(246, 90, 86, 0) 0%, rgba(132, 53, 4, 1) 51%, rgba(132, 53, 4, 0) 100%);
    //     }
    // }
    // &.lv12 {
    //     .funs-icon {
    //         color: #FC4F5D;
    //     }
    //     .funs-avatar {
    //         border-color: #FC4F5D;
    //     }
    //     .funs-avatar-img {
    //         background: #FC4F5D;
    //     }
    //     .funs-lighter-bg {
    //         background: linear-gradient(68deg, rgba(255, 51, 67, 1) 0%, rgba(255, 114, 126, 0.9) 50%, rgba(255, 114, 126, 0.8) 60%, rgba(252, 150, 75, 0) 100%);
    //     }
    //     .meteor {
    //         background: linear-gradient(297deg, rgba(246, 90, 86, 0) 0%, rgba(252, 79, 93, 1) 51%, rgba(132, 53, 4, 0) 100%);
    //     }
    // }
    // &.lv13 {
    //     .funs-icon {
    //         color: #8341FF;
    //     }
    //     .funs-avatar {
    //         border-color: #8341FF;
    //     }
    //     .funs-avatar-img {
    //         background: #8341FF;
    //     }
    //     .funs-lighter-bg {
    //         background: linear-gradient(68deg, rgba(131, 65, 255, 1) 0%, rgba(168, 90, 255, 0.9) 50%, rgba(168, 90, 255, 0.8) 60%, rgba(164, 75, 252, 0) 100%);
    //     }
    //     .meteor {
    //         background: linear-gradient(297deg, rgba(131, 65, 255, 0) 0%, rgba(131, 65, 255, 1) 51%, rgba(131, 65, 255, 0) 100%);
    //     }
    // }
    // &.lv14 {
    //     .funs-icon {
    //         color: #071EFF;
    //     }
    //     .funs-avatar {
    //         border-color: #071EFF;
    //     }
    //     .funs-avatar-img {
    //         background: #071EFF;
    //     }
    //     .funs-lighter-bg {
    //         background: linear-gradient(68deg, rgba(7, 30, 255, 1) 0%, rgba(85, 98, 255, 0.9) 50%, rgba(85, 98, 255, 0.8) 60%, rgba(102, 75, 252, 0) 100%);
    //     }
    //     .meteor {
    //         background: linear-gradient(297deg, rgba(7, 30, 255, 0) 0%, rgba(7, 30, 255, 1) 51%, rgba(7, 30, 255, 0) 100%);
    //     }
    // }
    // &.lv15 {
    //     .funs-icon {
    //         color: #0E6C54;
    //     }
    //     .funs-avatar {
    //         border-color: #0E6C54;
    //     }
    //     .funs-avatar-img {
    //         background: #0E6C54;
    //     }
    //     .funs-lighter-bg {
    //         background: linear-gradient(68deg, rgba(2, 96, 72, 1) 0%, rgba(51, 144, 120, 0.9) 50%, rgba(51, 144, 120, 0.8) 60%, rgba(51, 144, 120, 0) 100%);
    //     }
    //     .meteor {
    //         background: linear-gradient(297deg, rgba(51, 144, 120, 0) 0%, rgba(51, 144, 120, 1) 51%, rgba(51, 144, 120, 0) 100%);
    //     }
    // }
    // &.lv16 {
    //     .funs-icon {
    //         color: #CC0000;
    //     }
    //     .funs-avatar {
    //         border-color: #CC0000;
    //     }
    //     .funs-avatar-img {
    //         background: #CC0000;
    //     }
    //     .funs-lighter-bg {
    //         background: linear-gradient(68deg, rgba(188, 5, 5, 1) 0%, rgba(206, 61, 59, 0.9) 50%, rgba(206, 61, 59, 0.8) 60%, rgba(206, 59, 57, 0) 100%);
    //     }
    //     .meteor {
    //         background: linear-gradient(297deg, rgba(204, 0, 0, 0) 0%, rgba(204, 0, 0, 1) 51%, rgba(204, 0, 0, 0) 100%);
    //     }
    // }
}

// @keyframes funsEnter {
//     from {
//         transform: translate(0%);
//     }

//     to {
//         transform: translate(-100%);
//     }
// }
#container{

    .running {
        position: absolute;
        left: 100%;
        // background: url('/public/front/images/level/zuoqibg.gif') no-repeat center center/100%;
        height: 40px;
        padding-left: 153px;
        padding-right: 60px;
        line-height: 40px;
        color: white;
        word-break: keep-all;
        font-size: 16px;
        box-sizing: border-box;
        z-index: 202;
        @for $i from 7 through 16 {
            &.level#{$i} {
              background: url('/public/front/images/level/vipbg#{$i}.gif');
              .gif{
                background-image: url('/public/front/images/level/zuoqi#{$i}.png');

              }
            }
          }

          .gif {
              width: 100px;
              height: 100px;
              background-size: 1800px 100px;
              animation: ani_run 3s steps(18, end) infinite;
              position: absolute;
              left: 43px;
              top: -30px;
          }
          .r_user_name {
              color: #FFE08D;
              margin-right: 10px;
          }
          @keyframes ani_run {
              from {
                  background-position: 0 0;
              }

              to {
                  background-position: -1800px 0;

              }
          }
    }
    .announcement{
        position: absolute;
        background:linear-gradient(to right, #fb7171 , #fb3333);
        margin: 13px 13px 8px 25px;
        display: inline-block;
        font-size: 16px;
        white-space: nowrap;
        background-size: auto 80%;
        background-clip: content-box;
        text-indent: 21px;
        left: 100%;
        height: 40px;
        line-height: 36px;
        color: white;
        z-index: 202;
        padding-left: 60px;
        border-radius: 0 10px 10px 0;
        &::after{
            content: '';
            position: absolute;
            top: -23px;
            left: 14.5px;
            height: 96.15px;
            width: 97.16px;
            background: url('/public/images/football.png') no-repeat center/cover;
        }
        &:hover{
            text-decoration: underline;
        }
        &.text:hover{
           text-decoration:none;
        }
        i{
            color: #FFD502;
            font-size: 16px;
        }
    }
}

.king-funs * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.king-funs .funs-avatar {
    border-color: #FF5E58;
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    padding: 8px;
    z-index: 6;
}

.king-funs .funs-avatar-img {
    position: relative;
    display: block;
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-color: inherit;
    border-radius: 50%;
    background: #FF5E58;
}

.king-funs .semicircle1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background: transparent;
    border: 1px solid transparent;
    border-left-color: inherit;
    border-radius: 50%;
    animation: rt360 2s linear infinite;
}

.king-funs .semicircle2 {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 46px;
    height: 46px;
    background: transparent;
    border: 1px solid transparent;
    border-right-color: inherit;
    border-radius: 50%;
    animation: rt360 1.5s linear infinite;
}

.king-funs .semicircle3 {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 1px solid transparent;
    border-color: inherit;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: rt360 1s linear infinite;
}

.king-funs .semicircle3::before {
    content: "";
    position: absolute;
    top: 33px;
    left: 4px;
    width: 5px;
    height: 5px;
    border: 1px solid transparent;
    border-color: inherit;
    border-radius: 50%;
    background: #FFF;
    box-sizing: border-box;
}

.king-funs .funs-lighter {
    position: relative;
    width: auto;
    height: 30px;
    margin-top: 10px;
    background: transparent;
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 3px;
}

.king-funs .funs-lighter-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(252, 145, 74, 0.9) 50%, rgba(252, 146, 73, 0.8) 60%, rgba(252, 150, 75, 0.1) 100%);
    filter: blur(3px);
    z-index: 1;
}

.king-funs .funs-lighter-flash {
    position: absolute;
    left: 0;
    top: 5px;
    height: 20px;
    width: 5px;
    background: #FFF;
    transform: skewX(30deg);
    filter: blur(3px);
    z-index: 5;
    animation: tR100 3s ease-in infinite;
}

.king-funs .funs-lighter-content {
    position: relative;
    width: auto;
    height: 20px;
    word-break: keep-all;
    white-space: nowrap;
    background: transparent;
    line-height: 20px;
    z-index: 2;
    margin-top: 2px;
}

.king-funs .funs-icon {
    display: inline-block;
    width: auto;
    height: 20px;
    border-radius: 10px;
    background: #FFF;
    line-height: 20px;
    padding: 0 10px;
    margin-right: 5px;
    color: #FC1108;
    font-size: 12px;
    font-weight: 400;
}

.king-funs .funs-icon .the-icon {
    display: inline-block;
    width: 13.54px;
    height: 8.55px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAJCAMAAAA1k+1bAAAAq1BMVEUAAAD/PDz9QEr+qa3/xMf7QEr/7vD8P0z/M0D/////uLz8QUv8QUv/0dX/wsb7QEr/0NP/1tn/2tv8QEv+rbL/4+T/5Ob8QEv/7/H6P0n//Pz/////Pkr6V2L////2OUL/QEv+pKn8QUv/aHD/YGn/XGX+WmL/U13/R1H/OkX/dHv/Y2z/NUD/LDf9q6//lZv9kZb/e4L8eYD/bnb/T1n/Tlf/TFb/Mz7/JjKilm/DAAAAIHRSTlMABK/+7diKJgoJ8e/h2c3KxcO6uLKqoaCAbVxNPi8rG955zT8AAABzSURBVAjXRc3FEoQwAAPQtMAC6+5SL7qO/P+X0RkOvEsmuQQE8W68ul9m/giuTOlc6dz3ss9ru6EIBE/+Viv5y57igJPgKUsqa5Tk4orH4psXbqgtN5QA4cRjZZMy+Q4iONFtWbSl2YcEvXjNtLsZHM99difFCnkJuwh+AAAAAElFTkSuQmCC") no-repeat center/contain;
    margin-right: 2px;
}

.king-funs .funs-name {
    display: inline-block;
    width: auto;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #FFF;
    font-weight: 600;
}

.meteor {
    position: absolute;
    left: 0;
    width: 107px;
    height: 2px;
    background: linear-gradient(297deg, rgba(246, 90, 86, 0) 0%, rgba(245, 92, 87, 1) 51%, rgba(246, 90, 86, 0) 100%);
    z-index: 3;
    opacity: 0.6;
}

.meteor.meteor1 {
    top: 5px;
    animation: tR100 0.8s linear infinite;
}

.meteor.meteor2 {
    top: 15px;
    animation: tR100 1.2s 0.5s linear infinite;
}

.meteor.meteor3 {
    top: 25px;
    animation: tR100 1.4s 1s linear infinite;
}

@keyframes rt360 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes tR100 {
    from {
        left: 0%;
    }

    to {
        left: 100%;
    }
}

.fans-box {
    position: relative;
    display: inline-block;
    width: auto;
    height: 16px;
    line-height: 16px;
    border-radius: 8px 0 0 8px;
    background: linear-gradient(to right, #fc7c7e, #f5484b);
    white-space: nowrap;
    font-size: 12px;
    color: #FFF;
    margin: 0 5px;
    padding-left: 21px;
    padding-right: 28px;
}

.fans-box .fans-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    background: url("/public/images/fans-icon.png") no-repeat center/contain;
}

.fans-box .fans-grade {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: 16px;
    background: #FFE8E6;
    line-height: 16px;
    color: #FF3434;
    font-size: 12px;
    padding: 0 5px;
    vertical-align: middle;
    font-style: normal;
}

#LF-chat-msg {
    position: relative;
    padding-top: 36px;
    .chat-change {
        position: absolute;   
        left: 0;
        top: 0;
        width: 100%;
        height: 36px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 6px 20px;
        padding-bottom: 0;
        background: linear-gradient(to right, #ff7b5b, #ffa972, #ffb17c);
        box-sizing: border-box;
        margin-left: 1px;
        .chat-change-item {
            position: relative;
            flex: 1;
            height: 30px;
            font-size: 16px;
            color: #FFF;
            text-align: center;
            line-height: 30px;
            border-radius: 4px 4px 0 0;
            margin-right: 8px;
            cursor: pointer;
            &:last-child {
                margin-right: 0;
            }
            &.current {
                background: #FFF;
                color: #FF3551;
                font-weight: bold;
            }
            .group-msg {
                position: absolute;
                right: 12px;
                top: 0px;
                width: auto;
                min-width: 16px;
                text-align: center;
                padding: 0 5px;
                height: 16px;
                font-size: 12px;
                color: #FFF;
                background: #FF3456;
                line-height: 16px;
                border-radius: 8px;
                box-sizing: border-box;
                z-index: 2;
                display: none;
            }
        }
    }
    .live800, .quick-chat {
        position: relative;
        width: 400px;
        height: 560px;
        background: #FFF;
        display: none;
    }
    .live800 {
        padding: 16px 10px;
        box-sizing: border-box;
        background: url("/public/images/anchor-bg.png") no-repeat center/100% auto;
        .chat-with-server {
            position: relative;
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            .server-icon {
                display: block;
                width: 40px;
                height: 40px;
                border-radius: 2px;
                margin-right: 10px;
                border: 2px solid #FFF;
                border-radius: 8px;
            }
            .server-text {
                position: relative;
                width: 215px;
                height: auto;
                padding: 12px;
                border-radius: 8px;
                background: rgba(0, 0, 0, .6);
                color: #FFF;
                font-size: 14px;
                line-height: 28px;
                word-break: break-all;
                &::before {
                    content: "";
                    position: absolute;
                    left: -8px;
                    top: 12px;
                    width: 0;
                    height: 0;
                    border-top: 8px solid transparent;
                    border-right: 8px solid rgba(0, 0, 0, .6);
                    border-bottom: 8px solid transparent;
                }
            }
        }
    }
}
.anchor-gift {
    position: relative;
    width: 50px;
    height: 50px;
    margin-left: 20px;
    background: url("/public/images/lottery.png?v=0.1") no-repeat center/contain;
    cursor: pointer;
    .anchor-gift-countdown {
        position: absolute;
        left: 50%;
        bottom: 0;
        width: auto;
        height: 18px;
        padding: 0 8px;
        background: linear-gradient(45deg, #fed58f, #fdb456);
        border-radius: 9px;
        color: #FFF;
        font-size: 12px;
        line-height: 18px;
        transform: translateX(-50%);
        display: none;
        &.rgb-countdown {
            display: block;
        }
    }
}

.download-dom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    padding-top: 10px;
    background: rgba(0, 0, 0, .6);
    .download {
        position: relative;
        @include wh(calc(100% - 20px), auto);
        margin: 0 auto;
        background: #FFF;
        border-radius: 20px;
        padding-bottom: 20px;
        overflow: hidden;
        &.to-down {
            position: absolute;
            left: 0;
            top: 0;
            margin: 0;
        }
        .lot {
            position: relative;
            @include wh(calc(100% - 40px), auto);
            margin: 20px auto;
            .lot-pic {
                display: block;
                @include wh(100%, auto);
                border-radius: 20px 20px 0 0;
            }
        }
        .avatar {
            position: relative;
            @include wh(100%, 50px);
            background: #FFF;
            border-radius: 50%;
            padding-left: 20px;
            .avatar-pic {
                display: block;
                @include wh(50px, 50px);
                object-fit: cover;
                border-radius: 50%;
            }
        }
        .user-logo {
            position: relative;
            @include wh(calc(100% - 40px), 38px);
            @include fs;
            align-items: flex-end;
            margin: 0 auto;
            margin-top: -12px;
            .username {
                font-size: 14px;
                color: #333;
                font-weight: bold;
                line-height: 20px;
                span {
                    color: #E44956;
                }
            }
            .logo {
                position: relative;
                @include wh(36px, 36px);
                img {
                    display: block;
                    @include wh(100%, 100%);
                }
            }
        }
    }
    .close-download {
        position: absolute;
        right: 25px;
        top: 10px;
        @include wh(32px, 41px);
        border-radius: 0 0 16px 16px;
        background: rgba(0, 0, 0, .3);
        cursor: pointer;
        z-index: 2;
        .close-download-icon {
            display: block;
            @include wh(20px, 20px);
            margin: 0 auto;
            margin-top: 10px;
        }
    }
    .download-btn {
        position: absolute;
        left: 50%;
        bottom: 20px;
        @include wh(136px, 42px);
        background: url("/public/images/save-right-now.png") no-repeat center/contain;
        margin-left: -68px;
        cursor: pointer;
        z-index: 3;
    }
}

.random-gift-winner, .random-game-rules {
    position: relative;
    width: 100%;
    height: 406px;
    background: #FEF8E7;
    padding: 10px;
    overflow-y: auto;
    .random-gift-winner-title {
        position: relative;
        @include wh(100%, 32px);
        font-size: 16px;
        color: #333;
        line-height: 32px;
        text-align: center;
        @include fs;
    }
    .winner-item {
        position: relative;
        @include wh(100%, 60px);
        @include fs;
        border-bottom: 1px solid #DDD;
        &:last-child {
            border-bottom: none;
        }
        &+.winner-item {
            margin-top: 5px;
        }
        .left {
            position: relative;
            flex: 1;
            height: 100%;
            @include fs;
            justify-content: flex-start;
            .avatar {
                display: block;
                @include wh(40px, 40px);
                border-radius: 50%;
                object-fit: cover;
                margin-right: 3px;
            }
            .username {
                flex: 1;
                height: 40px;
                font-size: 14px;
                color: #333;
                line-height: 40px;
                @include omit(1)
            }
        }
        .prize-name {
            font-size: 14px;
            color: #333;
        }
    }
}
.random-game-rules {
    font-size: 14px;
    color: #333;
    line-height: 24px;
    text-align: left;
}
.quick-gift-mask {
    position: fixed;
    left: 0;
    top: 0;
    @include wh(100%, 100%);
    @include fc;
    background: rgba($color: #000000, $alpha: 0.3);
    z-index: 10000;
    * {
        box-sizing: border-box;
    }
    .quick-gift-box {
        position: relative;
        @include wh(221px, 189px);
        background: url("/public/images/quick-image.png") no-repeat center/contain;
        padding-top: 44px;
        .quick-gift-close {
            position: absolute;
            right: -22px;
            top: 10px;
            @include wh(20px, 20px);
            border-radius: 50%;
            border: 2px solid #fde0b7;
            cursor: pointer;
            &::before,
            &::after {
                content: '';
                position: absolute;
                top: 7px;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: #fde0b7;
                transform: rotate(45deg);
            }
            &::after {
                transform: rotate(-45deg);
            }
        }
        .quick-gift-title {
            @include wh(100%, 20px);
            font-size: 14px;
            color: #FFF;
            text-align: center;
            line-height: 20px;
        }
        .quick-gift-list {
            position: relative;
            @include wh(200px, 68px);
            margin: 0 auto;
            margin-top: 10px;
            .quick-gift-item {
                position: relative;
                @include wh(88px, 68px);
                @include fs;
                flex-direction: column;
                cursor: pointer;
                .quick-gift-item-active {
                    position: absolute;
                    left: 50px;
                    top: 0;
                    @include wh(auto, 14px);
                    background: #ff3456;
                    border-radius: 7px;
                    font-size: 12px;
                    color: #FFF;
                    line-height: 14px;
                    padding: 0 6px;
                    z-index: 1;
                    &[data-num="0"] {
                        display: none;
                    }
                }
                .quick-gift-item-icon {
                    display: block;
                    @include wh(50px, 50px);
                    border: 1px solid #EA7275;
                    object-fit: contain;
                    background: #DDD;
                }
                .quick-gift-item-coin {
                    position: relative;
                    @include wh(100%, 18px);
                    font-size: 12px;
                    color: #FFF;
                    line-height: 18px;
                    text-align: center;
                }
            }
        }
        .quick-gift-send {
            position: relative;
            @include wh(70px, 28px);
            background: linear-gradient(180deg,#f97781,#c51d2a);
            border-radius: 14px;
            padding: 0 14px;
            font-size: 12px;
            color: #FFF;
            line-height: 28px;
            text-align: center;
            margin: 0 auto;
            margin-top: 10px;
            cursor: pointer;
        }
    }
}
.dia-containner.play_explanation .dia-body {
    position: relative;
    @include wh(600px, auto);
    min-height: 400px;
    max-height: 550px;
    overflow-y: auto;
    .load-info {
        position: relative;
        @include wh(100%, 400px);
        @include fc;
        flex-direction: column;
        .load-icon {
            display: block;
            @include wh(50px, 50px);
        }
        .load-text {
            font-size: 14px;
            color: #999;
            line-height: 32px;
            margin-top: 10px;
            text-align: center;
        }
    }
}
.open-midfield {
    background: #FF203A;
    border-radius: 5px;
    color: #FFF;
    font-size: 14px;
    cursor: pointer;
    display: inline-block;
    margin-left: 10px;
    padding: 1px 10px;
    vertical-align: middle;
    &:hover {
        background: #ee596a;
    }
}
#container .dplayer-notice {
    visibility: hidden;
    @include wh(0 !important, 0 !important);
}