@charset "UTF-8";
.scale-enter-active, .scale-leave-active {
    transition: all .3s;
    transform: scale(0)
}

.scale-enter, .scale-leave-active {
    transform: scale(1)
}

.hide {
    display: none
}

.custom-video {
    background: url(../../assets/home/video-bg.png) no-repeat;
    background-size: 100% auto;
    position: relative;
    width: 100%;
    height: 100%
}

.custom-video video {
    width: 100%;
    height: 100%
}

.custom-video .mask {
    position: absolute;
    z-index: 99;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 80px 80px;
    background-position: center center
}

.custom-video .mask .title-box {
    width: 80%
}

.custom-video .mask .title-box .title {
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    line-height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.custom-video .mask .title-box .sub-title {
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    line-height: 14px
}

.custom-video .mask.pause-bg {
    background-image: url(../../assets/common/pause.png);
    cursor: pointer;
    background-position: left bottom;
    background-size: 50px 50px
}

.custom-video .mask.play-bg {
    background-image: url(../../assets/common/video-play.png);
    cursor: pointer;
    background-position: center center;
    background-size: 50px 50px
}

.custom-video .mask:hover {
    background-color: rgba(0, 0, 0, .2);
    background-image: url(../../assets/common/video-play.png);
    background-position: center center;
    background-size: 50px 50px;
    cursor: pointer
}

.custom-video .mask:hover .title-box {
    display: none
}

@media screen and (max-width: 750px) {
    .custom-video .mask.pause-bg, .custom-video .mask.play-bg, .custom-video .mask:hover {
        background-size: 8vw 8vw !important
    }
}