@media only screen and (max-width: 767px) {
    body {
        padding: 0px;
        margin: 0px;
        overflow-x: hidden;
        /* 隐藏水平滚动条 */
    }
    #swiper1 {
        display: '';
    }
    #swiper3 {
        display: none;
    }
    #swiper1pc {
        display: none;
    }
    .container {
        width: 100vw;
    }
    .container-content {
        width: 100vw;
    }
    /** 顶部悬浮 **/
    .header {
        width: 100%;
        height: 13.3vw;
        display: flex;
        position: fixed;
        z-index: 299;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../img/header-bg.png');
    }
    .header-content {
        width: 88vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .header-left {
        width: 9.3vw;
        height: 9.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .header-avatar {
        width: 9.3vw;
        height: 9.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../img/avatar.png');
    }
    .header-middle {
        width: 60vw;
        height: 9.3vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
    }
    .header-middle-top {
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../img/game-name.png');
        width: 31.4vw;
        height: 4.7vw;
    }
    .header-middle-down {
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../img/game-tip.png');
        width: 46.4vw;
        height: 2.9vw;
    }
    .header-right {
        width: 15vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        position: relative;
        right: -1.5vw;
    }
    .header-right-button {
        width: 10.1vw;
        height: 10.1vw;
        background-image: url('../img/header-menu.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .menu {
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.95);
        position: fixed;
        z-index: 300;
    }
    .close-btn {
        width: 10.2vw;
        height: 10.2vw;
        background-image: url('../img/close.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 3.8vw;
        top: 1.6vw;
        animation: fast-spin 0.5s forwards;
        /* 快速旋转的动画 */
    }
    @keyframes fast-spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(180deg);
            /* 快速旋转两圈 */
        }
    }
    .menu-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .menu-item {
        width: 63vw;
        height: auto;
        position: relative;
        top: 56.9vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .show-home {
        background-image: url('../img/select-home.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 50.2vw;
        height: 13.8vw;
    }
    .hide-home {
        background-image: url('../img/home.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 50.2vw;
        height: 13.8vw;
    }
    .show-role {
        background-image: url('../img/select-role.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 50.2vw;
        height: 13.8vw;
    }
    .hide-role {
        background-image: url('../img/role.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 50.2vw;
        height: 13.8vw;
    }
    .show-desc {
        background-image: url('../img/select-desc.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 50.2vw;
        height: 13.8vw;
    }
    .hide-desc {
        background-image: url('../img/desc.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 50.2vw;
        height: 13.8vw;
    }
    .menu-line {
        width: 62.9vw;
        height: 0.4vw;
        background-image: url('../img/line.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 5.7vw;
        margin-bottom: 9vw;
    }
    .menu-btn-list {
        width: 100%;
        height: 16vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 150.4vw;
    }
    .menu-btn-content {
        height: 16vw;
        width: 70vw;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .fb {
        height: 16vw;
        width: 16vw;
        background-image: url('../img/facebook.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .ins {
        height: 16vw;
        width: 16vw;
        background-image: url('../img/ins.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .youtube {
        height: 16vw;
        width: 16vw;
        background-image: url('../img/youtube.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .discrad {
        height: 16vw;
        width: 16vw;
        background-image: url('../img/discard.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    /** 背景 **/
    .body-content-1 {
        width: 100%;
        height: 218.6vw;
        background-image: url('../img/bg1.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .logo {
        width: 54.8vw;
        height: 32vw;
        background-image: url('../img/logo.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 15.7vw;
    }
    .slogan {
        width: 87.3vw;
        height: 41.3vw;
        background-image: url('../img/slogan.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .slogan-content {
        width: 100vw;
        height: 41.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 100;
        top: 125vw;
    }
    .book-btn {
        width: 100%;
        height: 48vw;
        position: absolute;
        top: 155vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .body-btn {
        height: 20.8vw;
        width: 78.1vw;
        background-image: url('../img/bg1-btn.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .body-content-2 {
        width: 100%;
        height: 218.6vw;
        background-image: url('../img/bg2.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        top: -1px;
    }
    .pc {
        display: none;
    }
    .mobile {
        display: '';
    }
    .bg2-swiper {
        width: 100vw;
        height: 216vw;
        position: absolute;
        top: 3vw;
    }
    .bg2-swiper img {
        width: 100%;
        height: 216vw;
    }
    .role-show-content {
        /* pointer-events: none; */
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 15.7vw;
        z-index: 100;
        position: absolute;
        align-items: center;
        top: 170vw;
    }
    .role-show {
        width: 98vw;
        height: 34.4vw;
        background-image: url('../img/avatar-lin.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .lvel1 {
        width: 95vw;
        height: 11.7vw;
        position: absolute;
        z-index: 100;
        bottom: 3vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .lvel2 {
        width: 69vw;
        height: 11.7vw;
        position: absolute;
        z-index: 100;
        bottom: -1vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .lvel3 {
        width: 42vw;
        height: 11.7vw;
        position: absolute;
        z-index: 100;
        bottom: -2.5vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .lvel4 {
        width: 15vw;
        height: 15vw;
        position: absolute;
        z-index: 100;
        bottom: -6vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .avatar {
        width: 11.7vw;
        height: 11.7vw;
    }
    .a1 {
        width: 11.7vw;
        height: 11.7vw;
        background-image: url('../img/pc/r5.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .a2 {
        width: 11.7vw;
        height: 11.7vw;
        background-image: url('../img/pc/r6.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .a3 {
        width: 11.7vw;
        height: 11.7vw;
        background-image: url('../img/pc/r7.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .a4 {
        width: 15vw;
        height: 15vw;
        background-image: url('../img/pc/r1.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .a5 {
        width: 11.7vw;
        height: 11.7vw;
        background-image: url('../img/pc/r2.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .a6 {
        width: 11.7vw;
        height: 11.7vw;
        background-image: url('../img/pc/r3.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .a7 {
        width: 11.7vw;
        height: 11.7vw;
        background-image: url('../img/pc/r4.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .body-content-3 {
        width: 100%;
        height: 218.8vw;
        background-image: url('../img/bg3.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        margin-top: -2px;
    }
    .bg3-swiper {
        width: 100%;
        height: 87.7vw;
        position: absolute;
        top: 39.6vw;
        display: flex;
        flex-direction: column;
    }
    .swiper-3d .swiper-slide-shadow-right,
    .swiper-3d .swiper-slide-shadow-left {
        background-color: rgba(0, 0, 0, .4);
    }
    /* .bg3-swiper .swiper-slide-active {
        background-image: url('../img/border.png');
        width: 50.5vw;
        height: 87.7vw;
    } */
    .slide-div {
        position: relative;
        /* 使子元素可以基于 .slide-div 定位 */
        width: 51vw;
        height: 87.7vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    .slide-div::before {
        content: '';
        /* 创建伪元素 */
        position: absolute;
        /* 绝对定位 */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../img/border.png');
        /* 添加背景图片 */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 2;
        /* 保证伪元素在 img 上方 */
        pointer-events: none;
        /* 防止伪元素影响点击事件 */
    }
    .slide-div img {
        width: 47.3vw;
        height: 84.1;
        display: block;
        z-index: 1;
        /* 确保 img 在伪元素下方 */
        position: relative;
        /* 为了控制层级 */
    }
    .next {
        width: 6.1vw;
        height: 9.8vw;
        background-image: url('../img/right.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        right: -10vw;
        position: relative;
    }
    .prev {
        width: 6.1vw;
        height: 9.8vw;
        background-image: url('../img/left.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        left: -8vw;
        position: relative;
    }
    .swiper-button {
        width: 100%;
        height: 9.8vw;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        position: relative;
        top: 78.5vw;
        z-index: 120;
    }
    .bg3-btn-content {
        width: 100%;
        height: 14.4vw;
        top: 135.8vw;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .bg3-btn-group {
        display: flex;
        flex-direction: row;
        width: 70%;
        align-items: center;
        justify-content: space-around;
    }
    .bg3-btn {
        width: 14.4vw;
        height: 14.4vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg3-tip {
        width: 58.1vw;
        height: 12.6vw;
        background-image: url('../img/footer-tip.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 175vw;
        z-index: 100;
        left: 30vw;
    }
    .facebook {
        background-image: url('../img/facebook.png');
    }
    .ins {
        background-image: url('../img/ins.png');
    }
    .ins {
        background-image: url('../img/ins.png');
    }
    .youtube {
        background-image: url('../img/youtube.png');
    }
    .footer {
        width: 100%;
        height: 27.2vw;
        z-index: 200;
        position: fixed;
        bottom: 0vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .footer-content {
        width: 92.4vw;
        height: 100%;
        background-image: url('../img/footer.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .footer-btn {
        width: 39.3vw;
        height: 13.2vw;
        background-image: url('../img/book-btn.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        right: 5vw;
        z-index: 210;
        top: 9vw;
        position: absolute;
    }
    .pc-header {
        display: none;
    }
}

@media only screen and (min-width: 767px) {
    body {
        padding: 0px;
        margin: 0px;
        overflow-x: hidden;
        /* 隐藏水平滚动条 */
    }
    .container {
        width: 100vw;
    }
    .container-content {
        width: 100vw;
    }
    .pc-header {
        width: 23vw;
        height: 4.3vw;
        z-index: 299;
        position: fixed;
        right: 1.5vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        top: 0.5vw;
    }
    .pc-header-content {
        width: 80%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }
    .pc-fb {
        width: 4.3vw;
        height: 4.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../img/pc/fb.png');
        cursor: pointer;
    }
    .pc-ins {
        width: 4.3vw;
        height: 4.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../img/pc/ins.png');
        cursor: pointer;
    }
    .pc-youtube {
        width: 4.3vw;
        height: 4.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../img/pc/youtbe.png');
        cursor: pointer;
    }
    .pc-discrad {
        width: 4.3vw;
        height: 4.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../img/pc/discard.png');
        cursor: pointer;
    }
    .pc-menu {
        width: 4.3vw;
        height: 4.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../img/pc/menu.png');
        cursor: pointer;
    }
    /** 顶部悬浮 **/
    .header {
        width: 100%;
        height: 10.6vw;
        display: flex;
        position: fixed;
        z-index: 50;
        align-items: center;
        justify-content: center;
        top: 1.3vw;
        display: none;
    }
    .header-content {
        width: 88vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .header-left {
        width: 9.3vw;
        height: 9.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .header-avatar {
        width: 9.3vw;
        height: 9.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../img/avatar.png');
    }
    .header-middle {
        width: 60vw;
        height: 9.3vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
    }
    .header-middle-top {
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../img/game-name.png');
        width: 31.4vw;
        height: 4.7vw;
    }
    .header-middle-down {
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../img/game-tip.png');
        width: 46.4vw;
        height: 2.9vw;
    }
    .header-right {
        width: 15vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        position: relative;
        right: -1.5vw;
    }
    .header-right-button {
        width: 10.1vw;
        height: 10.1vw;
        background-image: url('../img/header-menu.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .menu {
        width: 28.7vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.95);
        position: fixed;
        z-index: 300;
        right: 0px;
    }
    .close-btn {
        width: 3.9vw;
        height: 3.9vw;
        background-image: url('../img/close.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 3.8vw;
        top: 1.6vw;
        animation: fast-spin 0.5s forwards;
        /* 快速旋转的动画 */
    }
    @keyframes fast-spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(180deg);
            /* 快速旋转两圈 */
        }
    }
    .menu-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .menu-item {
        width: 24.5vw;
        height: auto;
        position: relative;
        top: 11.6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .show-home {
        background-image: url('../img/pc/select-home.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 19.6vw;
        height: 4.7vw;
    }
    .hide-home {
        background-image: url('../img/pc/home.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 19.6vw;
        height: 4.7vw;
    }
    .show-role {
        background-image: url('../img/pc/select-role.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 19.6vw;
        height: 4.7vw;
    }
    .hide-role {
        background-image: url('../img/pc/role.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 19.6vw;
        height: 4.7vw;
    }
    .show-desc {
        background-image: url('../img/pc/select-desc.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 19.6vw;
        height: 4.7vw;
    }
    .hide-desc {
        background-image: url('../img/pc/desc.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 19.6vw;
        height: 4.7vw;
    }
    .menu-line {
        width: 24.5vw;
        height: 0.2vw;
        background-image: url('../img/line.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 2.2vw;
        margin-bottom: 3.5vw;
    }
    .menu-btn-list {
        width: 100%;
        height: 4.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 3vw;
    }
    .menu-btn-content {
        height: 4.2vw;
        width: 50%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .fb {
        width: 4.3vw;
        height: 4.2vw;
        background-image: url('../img/facebook.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .ins {
        width: 4.3vw;
        height: 4.2vw;
        background-image: url('../img/ins.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .youtube {
        width: 4.3vw;
        height: 4.2vw;
        background-image: url('../img/youtube.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .discrad {
        width: 4.3vw;
        height: 4.2vw;
        background-image: url('../img/discard.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    /** 背景 **/
    .body-content-1 {
        width: 100%;
        height: 56.2vw;
        background-image: url('../img/pc/bg1.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .book-btn {
        width: 100%;
        height: 8.1vw;
        position: absolute;
        top: 40vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .body-btn {
        width: 30.5vw;
        height: 8.1vw;
        background-image: url('../img/pc/down.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .slogan {
        width: 57.3vw;
        height: 11.1vw;
        background-image: url('../img/pc/slogan.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .slogan-content {
        width: 100vw;
        height: 11.1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 29vw;
    }
    .body-content-2 {
        width: 100%;
        height: 56.2vw;
        background-image: url('../img/pc/bg2.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: -1px;
    }
    .bg2-swiper {
        width: 100vw;
        height: 56.2vw;
        position: absolute;
    }
    .pc-slide {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .bg2-swiper img {
        width: 100vw;
        height: 56.2vw;
    }
    /* .role1 img {
        background-image: url('../img/pc/role1.png');
    }
    .role2 img {
        background-image: url('../img/pc/role2.png');
    }
    .role3 img {
        background-image: url('../img/pc/role3.png');
    }
    .role4 img {
        background-image: url('../img/pc/role4.png');
    }
    .role5 img {
        background-image: url('../img/pc/role5.png');
    }
    .role6 img {
        background-image: url('../img/pc/role6.png');
    }
    .role7 img {
        background-image: url('../img/pc/role7.png');
    } */
    .role-show-content {
        /* pointer-events: none; */
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 10vw;
        z-index: 100;
        position: absolute;
        align-items: center;
        top: 42vw;
    }
    .role-show {
        width: 82.5vw;
        height: 10vw;
        background-image: url('../img/pc/avatar-line.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .lvel1 {
        width: 62vw;
        height: 6.1vw;
        position: absolute;
        z-index: 100;
        bottom: 1vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .lvel2 {
        width: 44vw;
        height: 6.1vw;
        position: absolute;
        z-index: 100;
        bottom: -1vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .lvel3 {
        width: 26vw;
        height: 6.1vw;
        position: absolute;
        z-index: 100;
        bottom: -2.5vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .lvel4 {
        width: 7.5vw;
        height: 7.5vw;
        position: absolute;
        z-index: 100;
        bottom: -3.5vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .avatar {
        width: 6.1vw;
        height: 6.1vw;
    }
    .a1 {
        width: 6.1vw;
        height: 6.1vw;
        background-image: url('../img/pc/r5.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .a2 {
        width: 6.1vw;
        height: 6.1vw;
        background-image: url('../img/pc/r6.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .a3 {
        width: 6.1vw;
        height: 6.1vw;
        background-image: url('../img/pc/r7.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .a4 {
        width: 6.1vw;
        height: 6.1vw;
        background-image: url('../img/pc/r1.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .a5 {
        width: 6.1vw;
        height: 6.1vw;
        background-image: url('../img/pc/r2.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .a6 {
        width: 6.1vw;
        height: 6.1vw;
        background-image: url('../img/pc/r3.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .a7 {
        width: 6.1vw;
        height: 6.1vw;
        background-image: url('../img/pc/r4.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .body-content-3 {
        width: 100%;
        height: 60.5vw;
        background-image: url('../img/pc/bg3.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: -1px;
    }
    .bg3-swiper {
        width: 42.3vw;
        height: 30.3vw;
        position: absolute;
        top: 12.3vw;
        display: flex;
        flex-direction: column;
    }
    .swiper-3d .swiper-slide-shadow-right,
    .swiper-3d .swiper-slide-shadow-left {
        background-color: rgba(0, 0, 0, .4);
    }
    /* .bg3-swiper .swiper-slide-active {
        background-image: url('../img/border.png');
        width: 50.5vw;
        height: 87.7vw;
    } */
    .slide-div {
        position: relative;
        /* 使子元素可以基于 .slide-div 定位 */
        width: 17vw;
        height: 30.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    .slide-div::before {
        content: '';
        /* 创建伪元素 */
        position: absolute;
        /* 绝对定位 */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../img/border.png');
        /* 添加背景图片 */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 2;
        /* 保证伪元素在 img 上方 */
        pointer-events: none;
        /* 防止伪元素影响点击事件 */
    }
    .slide-div img {
        width: 95%;
        height: 95%;
        display: block;
        z-index: 1;
        /* 确保 img 在伪元素下方 */
        position: relative;
        /* 为了控制层级 */
    }
    .next {
        width: 2.2vw;
        height: 3.6vw;
        background-image: url('../img/pc/right.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        right: -8.5vw;
        position: relative;
    }
    .prev {
        width: 2.2vw;
        height: 3.6vw;
        background-image: url('../img/pc/left.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        left: -8vw;
        position: relative;
    }
    .swiper-button {
        width: 10%;
        height: 3.6vw;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        position: relative;
        top: 26.2vw;
        z-index: 120;
    }
    .bg3-btn-content {
        width: 100%;
        height: 14.4vw;
        top: 39.5vw;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .bg3-btn-group {
        display: flex;
        flex-direction: row;
        width: 20%;
        align-items: center;
        justify-content: space-around;
    }
    .bg3-btn {
        width: 4vw;
        height: 4vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg3-tip {
        width: 33.2vw;
        height: 6.6vw;
        background-image: url('../img/pc/footer-tip.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 50vw;
        z-index: 100;
    }
    .facebook {
        background-image: url('../img/facebook.png');
    }
    .ins {
        background-image: url('../img/ins.png');
    }
    .youtube {
        background-image: url('../img/youtube.png');
    }
    .footer {
        width: 15.1vw;
        height: 100vh;
        z-index: 200;
        display: flex;
        flex-direction: column;
        top: 9.4vw;
        position: fixed;
    }
    .footer-content {
        width: 15.1vw;
        height: 23.7vw;
        background-image: url('../img/pc/footer.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .footer-btn {
        width: 10vw;
        height: 3.6vw;
        background-image: url('../img/pc/pc-down.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 210;
        position: absolute;
        top: 19.2vw;
        left: 1.5vw;
    }
    .logo {
        width: 11.4vw;
        height: 4.4vw;
        background-image: url('../img/pc/logo.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        z-index: 100;
        left: 1.5vw;
        top: 0.5vw;
    }
    .pc {
        display: '';
    }
    .mobile {
        display: none;
    }
    #swiper1 {
        display: none;
    }
    #swiper1pc {
        display: '';
    }
    .avatar-scole {
        width: 7.5vw;
        height: 7.5vw;
    }
    #swiper2 {
        display: none;
    }
    .pointer:hover {
        cursor: pointer;
    }
}