.popup {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    transition: all .6s;
    cursor: pointer;

    &.show {
        display: block;
    }

    &.active {
        opacity: 1;

        .popup_box {
            transform: translateY(0);
        }
    }

    .popup_box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        margin: auto;
        transform: translateY(-2rem);
        cursor: auto;
        transition: transform .6s;

        .content_box {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
            margin: auto;
            text-align: center;
            line-height: .6rem;
            color: #fff;
            font-size: .2rem;

            video {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 0;
                width: 100%;
                height: 100%;
                margin: auto;
                background: #000;
            }
        }

        .close {
            position: absolute;
            top: auto;
            left: 0;
            right: 0;
            bottom: -.4rem;
            z-index: 1;
            margin: 0 auto;
            width: .5rem;
            height: .5rem;
            background: url(https://image.gaeamobile.net/image/20240717/161017/popup_close.png);
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: .5rem .5rem;
            border-radius: 50%;
            transition: opacity .6s;
        }
    }
}

#video_popup {
    .popup_box {
        width: 6.48rem;
        height: 3.6rem;
        border: .05rem solid #cfcfcf;

        .close {
            top: -.12rem;
            right: -.56rem;
            left: auto;
        }
    }
}