#live {
    margin-top: 30px;

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        color: #FFF604;
        text-align: center;
        margin-bottom: 20px;

        span {
            margin: 0 15px;
        }

        img {
            width: 37px;
            height: 18px;
        }
    }

    .live-container {
        width: 355px;
        margin: 0 auto;
        background: rgba(57, 0, 201, 1);
        border: 1px solid rgba(89, 112, 255, 1);
        border-radius: 5px;
        padding-bottom: 30px;

        .content {
            position: relative;
            width: 325px;
            height: 312px;
            padding: 26px 30px 0;
            margin-top: 50px;
            background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/live-bg.png") no-repeat;
            background-size: contain;
            color: #333;
            text-align: center;
            overflow: hidden;
        }

        .tag {
            position: absolute;
            right: -75px;
            top: 10px;
            width: 200px;
            height: 36px;
            font-size: 11px;
            color: #fff;
            line-height: 36px;
            text-align: center;
            transform: rotate(45deg);

            &.teacher {
                background: linear-gradient(rgba(178, 47, 175, 1) 0%, rgba(246, 64, 152, 1) 100%);
            }

            &.student {
                background: linear-gradient(rgba(10, 72, 245, 1) 0%, rgba(0, 153, 255, 1) 100%);
            }
        }

        .person-info {
            display: flex;
        }

        .name {
            color: #3900C9;
            font-size: 20px;
            text-align: left;
        }

        .avatar {
            width: 55px;
            height: 55px;
            margin-right: 20px;
            border-radius: 50%;
            border: 1px solid #5970FF;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .profession {
            color: #666;
            font-size: 12px;
        }

        .title {
            font-size: 15px;
            color: #333;
            text-align: left;
            margin-bottom: 10px;
            display: block;

        }

        .time {
            margin-bottom: 10px;
            color: #666;
            font-size: 12px;
            text-align: left;
        }

        .outline {
            text-align: left;
            margin-bottom: 10px;

            &-title {
                font-size: 14px;
                margin-bottom: 6px;
            }

            li {
                font-size: 11px;
                color: #666;
            }
        }

        button {
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -67px;
            width: 134px;
            height: 33px;
            border: none;
            border-radius: 17px;
            outline: none;
            font-size: 15px;
            color: #fff;

            &.subscribe {
                padding-left: 25px;
                background: linear-gradient(90deg, rgba(255, 140, 27, 1) 0%, rgba(255, 59, 5, 1) 100%);

                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    left: 25px;
                    top: 9px;
                    width: 15px;
                    height: 15px;
                    background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/subscribe-icon.png") no-repeat;
                    background-size: contain;
                }
            }

            &.subscribed {
                background: #CBCED0;
            }

            &.on-living {
                padding-left: 25px;
                background: linear-gradient(-90deg, rgba(7, 240, 255, 1) 0%, rgba(0, 153, 255, 1) 100%);

                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    top: 10px;
                    left: 25px;
                    width: 11px;
                    height: 12px;
                    background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/live-play-icon.png") no-repeat;
                    background-size: contain;
                }
            }
        }

    }

    .am-tabs-content-wrap {
        min-height: 423px;
    }

    .am-tabs {
        width: 330px;
        margin: 0 auto;
        color: #fff;

        & .am-tabs-default-bar-tab:nth-last-of-type(2) {
            width: 21% !important;
            &::after {
                display: none;
            }
        }

        .am-tabs-tab-bar-wrap {
            height: 33px;

        }

        .am-tabs-default-bar-tab {
            height: auto;
            line-height: 1;

            &::after {
                content: '';
                display: block;
                position: absolute;
                right: 0;
                left: unset;
                top: 50%;
                margin-top: -7px;
                width: 1px;
                height: 14px;
                background: #FFF604;
                transform: none;
            }
        }


        .am-tabs-default-bar-tab-active {
            background: #FFF604;
            border-radius: 0 0 5px 5px;
        }

        .am-tabs-default-bar-top {
            .am-tabs-default-bar-content {
                border: 1px solid rgba(255, 246, 4, 1);
                border-radius: 0 0 6px 6px;
                overflow: hidden;
            }
        }


    }
}

.popup-container {
    .title {
        color: #525C65;
    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
            width: 120px;
            height: 120px;
            margin-top: 10px;
        }
    }

    .save-image {
        width: 133px;
        height: 30px;
        margin-top: 16px;
        background: rgba(83, 39, 250, 1);
        border-radius: 15px;
        font-size: 14px;
        color: #fff;
        -webkit-appearance: none;
        outline: 0;
        border: none;
    }
}