:root {
    font-size: calc(100vw / 7.5);
}

* {
    margin: 0;
    padding: 0;
}

html,
body,
.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    display: -webkit-box;
    display: flex;
}

/* 示例容器 */
.wrapper {
    position: relative;
    width: 6.4rem;
    height: 3.6rem;
    margin: auto;
}

/* svg mask */
.svg-mask-video,
.svg-mask-svg {
    position: absolute;
    width: 100%;
    height: 100%;
}

.svg-mask-text {
    font-weight: 700;
}

/* css backgroun-clip */
.background-clip-mask {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 2.2rem;
    font-weight: 700;
    color: transparent;
    background-image: url('./bgpic.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
}

/* svg clip-path */
.svg-clip-video,
.svg-clip-svg {
    position: absolute;
    width: 100%;
    height: 100%;
}
.svg-clip-text {
    font-weight: 700;
}

/* css mix-blend-mode */
.mix-blend-video,
.mix-blend-text {
    position: absolute;
    width: 100%;
    height: 100%;
}
.mix-blend-text {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    font-size: 2.9rem;
    font-weight: 700;
    background-color: rgb(240, 240, 240);
    mix-blend-mode: lighten;
}

.background-image {
    display: none;
}

@media (max-width: 768px) {
    .background-image {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url('./bgpic.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
}