@charset "utf-8";

/* CSS Document Start*/

.swiper-container .live-item {
    float: none;
    width: auto;
    margin: 0;
}

.swiper-container .live-item .live-img {
    width: 100%;
}

.live-list .swiper-button-next {
    right: -4px;
    top: 37%;
    background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='gray'/></svg>") no-repeat center center /17px 28px;
}
.live-list .swiper-button-prev {
    left: -4px;
    top: 37%;
    background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='gray'/></svg>") no-repeat center center /17px 28px;
}

#king-actives { display:none;overflow: hidden; background: #fff;padding: 20px 15px;border: 1px solid #e9e9e9;margin-bottom: 20px;}
#king-actives .active-header{ color: #080c12;margin-bottom: 20px;}
#king-actives .active-header a:after {content: ">";color: #ff2c3a;font-size: 18px;}
#king-actives .active-list{ margin-top:36px;display: flex;text-align: center;justify-content: space-between;}
#king-actives .active-list .active-item{text-align: center;width:250px;margin-right: 10px; text-decoration: none; position: relative; overflow: hidden; border-radius: 5px;}
#king-actives .active-list .active-item .img{  flex:1;height: 140px;background-color: #fff;position: relative;}
#king-actives .active-list .active-item .img img{width: 100%;height: 100%;}
#king-actives .active-list .active-item .img .status{position: absolute; right: 0;top: 0; width: 60px;height: 60px; z-index: 1;}
#king-actives .active-list .active-item .img .active-status0{background:url('https://staticfile.ztdj6.com/public/front/images/active-status0.png') no-repeat center center/100% 100%;}
#king-actives .active-list .active-item .img .active-status1{background:url('https://staticfile.ztdj6.com/public/front/images/active-status1.png') no-repeat center center/100% 100%;}
#king-actives .active-list .active-item .img .active-status2{background:url('https://staticfile.ztdj6.com/public/front/images/active-status2.png') no-repeat center center/100% 100%;}

#king-actives .active-list .active-item .active-title{text-align: left; width:100%;max-height:38px;font-size:14px;font-family:Microsoft YaHei;font-weight:400;line-height:19px;color:rgba(51,51,51,1); overflow: hidden;text-overflow: ellipsis;margin-top: 5px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#king-actives .active-list .active-item .active-discr{ text-align: left; width:100%;max-height:32px;font-size:12px;font-family:Microsoft YaHei;font-weight:400;line-height:16px;color:rgba(141,147,162,1);overflow: hidden;text-overflow: ellipsis;margin-top: 3px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#king-actives .active-list .active-item .active-end-time{ text-align: center; width:100%;height:36px;font-size:12px;font-family:Microsoft YaHei;font-weight:400;line-height:36px;color:#fff;background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);position: absolute;bottom: 0;}

@media only screen and (max-width: 1439px) {
    #king-actives .active-list .active-item{text-align: center;width:100%;margin-right: 10px; text-decoration: none;}
    #king-actives .active-list .active-item .img{ width:100%;height: 140px;background-color: #fff;}
    .live-list {
        background: #fff;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .live-item {
        float: left;
        width: 183px;
        height: auto;
        margin: 10px 5px 0px;
        position: relative;
    }

    .live-item .hd_tag {
        position: absolute;
        left: -6px;
        top: 0;
        height: 25px;
        width: 50px;
        z-index: 2;
    }

    .live-item .live-img {
        background: url(../images/default.jpg) 0 0 no-repeat;
        background-size: 100% 100%;
        height: 104px;
        overflow: hidden;
        position: relative;
    }

    .live-item .live-img a {
        display: block;
        height: 100%;
    }

    .live-item .live-img a img {
        width: 100%;
        height: 100%;
    }

    .live-item .live-img b {
        width: 63px;
        height: 24px;
        display: block;
        overflow: hidden;
        line-height: 24px;
        position: absolute;
        text-align: center;
        background: rgba(0, 0, 0, .5);
        bottom: 0;
        right: 0;
        color: #fff;
        font-size: 12px;
    }

    .live-item .live-user {
        height: 60px;
        padding: 10px 0;
        overflow: hidden;
    }

    .user-img {
        width: 43px;
        height: 43px;
        border-radius: 50%;
        float: left;
        overflow: hidden;
    }

    .user-info {
        /*float:right;*/
        height: auto;
        overflow: hidden;
    }

    .user-info strong {
        display: block;
        overflow: hidden;
        margin-bottom: 5px;
    }

    .user-info strong a {
        font-size: 14px;
        color: #333;
        width: 100%;
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .user-info strong a:hover {
        color: #ff3240;
    }

    .user-info span {
        display: block;
        font-size: 12px;
        color: #8d93a2;
        overflow: hidden;
    }

    .user-info span b {
        float: left;
        display: block;
        width: 60px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .user-info span i {
        float: right;
        display: block;
    }

    .user-info span i:before {
        content: '\e944';
        font-size: 12px;
        color: #8d93a2;
        margin-right: 3px;
    }
}

@media only screen and (min-width: 1440px) and (max-width: 1679px) {
    #king-actives .active-list .active-item{text-align: center;width:100%;margin-right: 10px; text-decoration: none;}
    #king-actives .active-list .active-item .img{ width:100%;height: 140px;background-color: #fff;}
    .live-list {
        background: #fff;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .live-item {
        float: left;
        width: 217px;
        height: auto;
        margin: 10px 5px 0px;
        position: relative;
    }

    .live-item .hd_tag {
        position: absolute;
        left: -6px;
        top: 0;
        height: 25px;
        width: 50px;
        z-index: 2;
    }

    .live-item .live-img {
        background: url(../images/default.jpg) 0 0 no-repeat;
        background-size: 100% 100%;
        width: 217px;
        height: 122px;
        overflow: hidden;
        position: relative;
    }

    .live-item .live-img a {
        display: block;
        height: 100%;
    }

    .live-item .live-img a img {
        width: 100%;
        height: 100%;
    }

    .live-item .live-img b {
        width: 63px;
        height: 24px;
        display: block;
        overflow: hidden;
        line-height: 24px;
        position: absolute;
        text-align: center;
        background: rgba(0, 0, 0, .5);
        bottom: 0;
        right: 0;
        color: #fff;
        font-size: 12px;
    }

    .live-item .live-user {
        height: 60px;
        padding: 10px 0;
        overflow: hidden;
    }

    .user-img {
        width: 43px;
        height: 43px;
        border-radius: 50%;
        float: left;
        overflow: hidden;
    }

    .user-info {
        /*float:right;*/
        height: auto;
        overflow: hidden;
    }

    .user-info strong {
        display: block;
        overflow: hidden;
        margin-bottom: 5px;
    }

    .user-info strong a {
        font-size: 14px;
        color: #333;
        width: 100%;
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .user-info strong a:hover {
        color: #ff3240;
    }

    .user-info span {
        display: block;
        font-size: 12px;
        color: #8d93a2;
        overflow: hidden;
    }

    .user-info span b {
        float: left;
        display: block;
        width: 90px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .user-info span i {
        float: right;
        display: block;
    }

    .user-info span i:before {
        content: '\e944';
        font-size: 12px;
        color: #8d93a2;
        margin-right: 3px;
    }
}

@media only screen and (min-width: 1680px) {
    .live-list {
        background: #fff;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .live-item {
        float: left;
        width: 250px;
        height: auto;
        margin: 10px 8px 0px;
        position: relative;
    }

    .live-item .hd_tag {
        position: absolute;
        left: -6px;
        top: 0;
        height: 25px;
        width: 50px;
        z-index: 2;
    }

    .live-item .live-img {
        background: url(../images/default.jpg) 0 0 no-repeat;
        background-size: 100% 100%;
        width: 250px;
        height: 140px;
        overflow: hidden;
        position: relative;
    }

    .live-item .live-img a {
        display: block;
        height: 100%;
    }

    .live-item .live-img a img {
        height: 100%;
        width: 100%;
    }

    .live-item .live-img b {
        width: 63px;
        height: 24px;
        display: block;
        overflow: hidden;
        line-height: 24px;
        position: absolute;
        text-align: center;
        background: rgba(0, 0, 0, .5);
        bottom: 0;
        right: 0;
        color: #fff;
        font-size: 12px;
    }

    .live-item .live-user {
        height: 60px;
        padding: 10px 0;
        overflow: hidden;
    }

    .user-img {
        width: 43px;
        height: 43px;
        border-radius: 50%;
        float: left;
        overflow: hidden;
    }

    .user-info {
        /*float:right;*/
        height: auto;
        overflow: hidden;
    }

    .user-info strong {
        display: block;
        overflow: hidden;
        margin-bottom: 5px;
    }

    .user-info strong a {
        font-size: 14px;
        color: #333;
        width: 100%;
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .user-info strong a:hover {
        color: #ff3240;
    }

    .user-info span {
        display: block;
        font-size: 12px;
        color: #8d93a2;
        overflow: hidden;
    }

    .user-info span b {
        float: left;
        display: block;
        width: 82px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .user-info span i {
        float: right;
        display: block;
    }

    .user-info span i:before {
        content: '\e944';
        font-size: 12px;
        color: #8d93a2;
        margin-right: 3px;
    }
}