@charset "utf-8";

/*
Theme Name:直播列表;
Author: jiang
Last Modify:2021/03/24
*/

body {
    background: #eff3f5;
}

.hide {
    display: none;
}

.living-item {
    margin-top: 16px;
    margin-bottom: 60px;
    clear: both;
}

.living-item-caption {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    line-height: 24px;
    margin-top: 24px;
}

.living-item-list {
    width: 588px;
    height: 112px;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 24px;
    margin-right: 24px;
    box-sizing: border-box;
    position: relative;
    padding: 52px 24px 0 24px;
    float: left;
}

.living-item-list.hover {
    box-shadow: 0px 10px 10px 0px rgba(207, 214, 229, 0.70);
}

.living-item-list:nth-child(2n) {
    margin-right: 0 !important;
}

.living-item-list-caption {
    max-width: 310px;
    color: #333333;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    line-height: 38px;
}

.living-item-list-no {
    height: 28px;
    line-height: 28px;
    padding: 0 12px;
    color: #3d7eff;
    font-size: 14px;
    border-radius: 0 0 4px 0;
    position: absolute;
    left: 0;
    top: 0;
    background: #e5eeff;
}

.living-item-list a {
    width: 102px;
    height: 36px;
    background: #fff;
    border: 1px solid #31cca5;
    border-radius: 5px;
    font-size: 14px;
    color: #31cca5;
    text-align: center;
    line-height: 36px;
    display: inline-block;
    vertical-align: middle;
}

.living-item-list .btn-enter {
    border: 1px solid #31cca5;
    color: #31cca5;
    margin-right: 16px;
}

.living-item-list .btn-enter:hover {
    background-color: #31cca5;
    color: #fff;
}

.living-item-list .btn-copy {
    border: 1px solid #3d7eff;
    color: #3d7eff;
}

.living-item-list .btn-copy:hover {
    border: 1px solid #73a2ff;
    color: #73a2ff;
}


/* 复制成功 */

.message-notice {
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.15);
    position: fixed;
    top: 180px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    padding: 12px 24px;
    z-index: 999;
    /* display: block; */
    opacity: 0;
}

.message-notice img {
    margin-right: 8px;
    vertical-align: -2px;
}

.move-up-enter,
.move-up-leave {
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

.move-up-enter.move-up-enter-active {
    -webkit-animation-name: MoveUpIn;
    animation-name: MoveUpIn;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.move-up-leave.move-up-leave-active {
    -webkit-animation-name: MoveUpOut;
    animation-name: MoveUpOut;
    -webkit-animation-play-state: running;
    animation-play-state: running;
    pointer-events: none
}

.move-up-enter {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(.08, .82, .17, 1);
    animation-timing-function: cubic-bezier(.08, .82, .17, 1)
}

.move-up-leave {
    -webkit-animation-timing-function: cubic-bezier(.6, .04, .98, .34);
    animation-timing-function: cubic-bezier(.6, .04, .98, .34)
}

.move-down-enter,
.move-down-leave {
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

.move-down-enter.move-down-enter-active {
    -webkit-animation-name: MoveDownIn;
    animation-name: antMoveDownIn;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.move-down-leave.move-down-leave-active {
    -webkit-animation-name: MoveDownOut;
    animation-name: antMoveDownOut;
    -webkit-animation-play-state: running;
    animation-play-state: running;
    pointer-events: none
}

.move-down-enter {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(.08, .82, .17, 1);
    animation-timing-function: cubic-bezier(.08, .82, .17, 1)
}

.move-down-leave {
    -webkit-animation-timing-function: cubic-bezier(.6, .04, .98, .34);
    animation-timing-function: cubic-bezier(.6, .04, .98, .34)
}

@-webkit-keyframes MoveUpIn {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 0
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1
    }
}

@keyframes MoveUpIn {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 0
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1
    }
}

@-webkit-keyframes MoveUpOut {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1
    }
    to {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 0
    }
}

@keyframes MoveUpOut {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1
    }
    to {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 0
    }
}