@media only screen and (max-width: 767px) {
    body {
        font-family: 'MyCustomFont', sans-serif;
        /* 使用自定义字体，并指定备用字体 */
        margin: 0px;
        padding: 0px;
        width: 100%;
        background-attachment: fixed;
        /* 背景图固定在视口 */
    }
    .swiper-content {
        width: 100vw;
        height: 100vh;
    }
    .main-bg-swiper {
        width: 100vw;
        height: 100vh;
    }
    .swiper-3d .swiper-slide-shadow-right,
    .swiper-3d .swiper-slide-shadow-left {
        background-color: rgba(0, 0, 0, 0);
    }
    .main-bg .slide-div {
        position: relative;
        /* 使子元素可以基于 .slide-div 定位 */
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        z-index: 1;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .bg1 {
        background-image: url('../image/mobile/bg1.webp');
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .bg2 {
        background-image: url('../image/mobile/bg2.png');
    }
    .bg3 {
        background-image: url('../image/mobile/bg3.webp');
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .logo {
        width: 18.1vw;
        height: 8.4vw;
        background-image: url('../image/mobile/logo.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 2.2vw;
        left: 3.2vw;
    }
    .menu {
        width: 5.6vw;
        height: 4.1vw;
        background-image: url('../image/mobile/menu.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 5.4vw;
        right: 5.3vw;
    }
    .purchase {
        width: 18.5vw;
        height: 30.2vw;
        background-image: url('../image/mobile/purchase.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 31.7vw;
        right: 0vw;
    }
    .play-content {
        width: 100%;
        height: 12.2vw;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        bottom: 63vw;
    }
    .play {
        width: 14.4vw;
        height: 12.2vw;
        background-image: url('../image/mobile/play.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        animation: play-spin 4s linear infinite;
    }
    .bg1 .title-content {
        width: 100%;
        height: 12.2vw;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        bottom: 45vw;
    }
    .bg1 .title {
        width: 77.3vw;
        height: 11.2vw;
        background-image: url('../image/mobile/title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .download-content {
        display: none;
    }
    .download-content1 {
        height: 10.1vw;
        width: 72%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        bottom: 33vw;
    }
    .download-content2 {
        height: 10.1vw;
        width: 72%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        bottom: 20.1vw;
    }
    .download-item {
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 34.6vw;
        height: 10.1vw;
    }
    .ios {
        background-image: url('../image/mobile/ios.png');
    }
    .google {
        background-image: url('../image/mobile/google.png');
    }
    .one {
        background-image: url('../image/mobile/one.png');
    }
    .samsung {
        background-image: url('../image/mobile/samsung.png');
    }
    /** bg2 **/
    .bg2 .title-content {
        width: 100%;
        height: 10.1vw;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 8vw;
    }
    .bg2 .title {
        width: 55.6vw;
        height: 10.1vw;
        background-image: url('../image/mobile/bg2-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .body-content-3 {
        width: 100vw;
        height: auto;
        position: absolute;
        top: 28vw;
    }
    .bg2 .bg3-swiper {
        width: 100%;
        height: auto;
        position: absolute;
        display: flex;
        flex-direction: column;
    }
    .swiper-3d .swiper-slide-shadow-right,
    .swiper-3d .swiper-slide-shadow-left {
        background-color: rgba(0, 0, 0, 0);
    }
    .bg2 .slide-div {
        width: 100vw;
        height: auto;
        flex-shrink: 0;
        /* 禁止宽度压缩 */
        position: relative;
    }
    /* 确保父容器不裁剪内容 */
    .body-content-3,
    .bg3-swiper {
        overflow: visible;
    }
    .bg2 .slide-div img {
        width: 100vw;
        height: auto;
        display: block;
        z-index: 1;
        /* 确保 img 在伪元素下方 */
        position: relative;
        /* 为了控制层级 */
    }
    /* 中间幻灯片在上面 */
    #swiper2 .swiper-slide {
        transition: transform 0.5s, z-index 0.5s;
        /** 重点 **/
    }
    /* 设置 z-index 控制中间 slide 在最上层 */
    #swiper2 .swiper-slide-active {
        z-index: 3;
        transform: translateY(-30px) scale(1);
        /* 中间向上 */
    }
    /* 左右两侧图片向下缩放 */
    #swiper2 .swiper-slide-prev,
    #swiper2 .swiper-slide-next {
        z-index: 2;
        transform: translateY(30px) scale(0.85);
        /* 左右向下、缩小 */
    }
    .role-des {
        width: 100%;
        height: 100%;
        z-index: 100;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 28vw;
    }
    .close {
        height: 10.8vw;
        width: 10.8vw;
        background-image: url('../image/mobile/close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        left: -37vw;
        position: relative;
    }
    .des {
        width: 89.6vw;
        height: 99.2vw;
        background-image: url('../image/mobile/desc1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .des-item {
        width: 45vw;
        height: 25.3vw;
        background-image: url('../image/mobile/des-1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 55vw;
    }
    .des-border {
        width: 45vw;
        height: 25.3vw;
        background-image: url('../image/mobile/desc-border.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg3 .title-content {
        width: 100%;
        height: 10.1vw;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 38vw;
    }
    .bg3 .title {
        width: 55.6vw;
        height: 10.1vw;
        background-image: url('../image/mobile/bg3-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .big-img-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 55.6vw;
    }
    .bgimg {
        z-index: -1 !important;
    }
    .big-img {
        width: 95vw;
        height: 74vw;
        background-image: url('../image/mobile/image-border.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        /* 移除z-index或设为auto */
        z-index: 1;
    }
    .bgimg {
        width: 84.1vw;
        height: 63vw;
        background-image: url('../image/mobile/b1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        z-index: -1;
    }
    .bg4-swiper {
        width: 65%;
        height: 17.2vw;
        position: absolute;
        top: 133.6vw;
        display: flex;
    }
    .bg4-swiper .slide-div {
        width: 22.9;
        height: 17.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .border-info {
        z-index: 1000;
        position: absolute;
        width: 22.9vw;
        height: 17.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../image/mobile/footer-border.png');
    }
    .bg4-swiper img {
        width: 18.6vw;
        height: 14vw;
    }
    .current-size {
        width: 22.9vw;
        height: 17.2vw;
    }
    .s1 {
        opacity: 1;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        display: none;
    }
    .swiper-button-prev {
        width: 6.6vw;
        height: 11.7vw;
        background-image: url('../image/mobile/left.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 142vw;
        left: 8.4vw;
    }
    .swiper-button-next {
        width: 6.6vw;
        height: 11.7vw;
        background-image: url('../image/mobile/right.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 142vw;
        right: 8.4vw;
    }
    .apk {
        display: none;
    }
    .pc-bgimg {
        display: none;
    }
    .pc-swiper {
        display: none;
    }
    .video {
        width: 100vw;
        height: 100%;
        z-index: 200;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.7);
    }
    .video-content {
        width: 100vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .myVideo {
        width: 90vw;
        height: auto;
        top: 65vw;
        position: absolute;
    }
    .close-video {
        background-image: url('../image/pc/close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 10.1vw;
        width: 10.1vw;
        z-index: 300;
        position: fixed;
        top: 120vw;
        animation: spin 0.8s ease-out 1;
    }
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    .right-content {
        display: none;
    }
    .menu {
        width: 5.6vw;
        height: 4.1vw;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('../image/mobile/menu.webp');
        z-index: 1000;
    }
    .menu-content {
        width: 48.6vw;
        height: 68.1vw;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('../image/mobile/menu-bg.webp');
        position: fixed;
        right: 1.4vw;
        top: 6.8vw;
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .menu-top {
        width: 25vw;
        height: 35vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
        margin-top: 10vw;
    }
    .menu1 {
        width: 13.7vw;
        height: 3.6vw;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('../image/mobile/menu1.webp');
    }
    .menu2 {
        width: 22vw;
        height: 3.6vw;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('../image/mobile/menu2.webp');
    }
    .menu3 {
        width: 22vw;
        height: 3.6vw;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('../image/mobile/menu3.webp');
    }
    .menu-bottom {
        height: 8vw;
        width: 60%;
        margin-top: 5vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .kakao {
        width: 8vw;
        height: 8vw;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('../image/mobile/kakao.png');
    }
    .naver {
        width: 8vw;
        height: 8vw;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('../image/mobile/naver.png');
    }
    .group {
        width: 8vw;
        height: 8vw;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('../image/mobile/group.png');
    }
    .menu-close {
        top: -3vw;
        right: 2.5vw;
        position: absolute;
        z-index: 200;
        width: 4.2vw;
        height: 4.2vw;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('../image/mobile/menu-close.webp');
    }
    .menu-close-rotate {
        animation: spin 1s ease-out 1;
    }
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
}

@media only screen and (min-width: 767px) {
    body {
        font-family: 'MyCustomFont', sans-serif;
        /* 使用自定义字体，并指定备用字体 */
        margin: 0px;
        padding: 0px;
    }
    body:hover {
        cursor: url('../image/mobile/finger.png'), pointer;
    }
    .menu-content {
        display: none;
    }
    .menu {
        display: none;
    }
    .swiper-content {
        width: 100vw;
        height: 100vh;
    }
    .main-bg-swiper {
        width: 100vw;
        height: 100vh;
    }
    .swiper-3d .swiper-slide-shadow-right,
    .swiper-3d .swiper-slide-shadow-left {
        background-color: rgba(0, 0, 0, 0);
    }
    .main-bg .slide-div {
        position: relative;
        /* 使子元素可以基于 .slide-div 定位 */
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        z-index: 1;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .bg1 {
        background-image: url('../image/pc/bg1.webp');
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .bg2 {
        background-image: url('../image/pc/bg2.webp');
    }
    .bg3 {
        background-image: url('../image/pc/bg3.webp');
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .logo {
        width: 10vw;
        height: 4.6vw;
        background-image: url('../image/pc/logo.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0.5vw;
        left: 3.4vw;
    }
    .menu {
        display: none;
    }
    .purchase {
        width: 6.8vw;
        height: 11.2vw;
        background-image: url('../image/pc/purchase.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 16vw;
        right: 0.5vw;
    }
    .play-content {
        width: 100%;
        height: 5vw;
        position: fixed;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        bottom: 15vw;
    }
    .play {
        width: 5.8vw;
        height: 5vw;
        background-image: url('../image/mobile/play.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        animation: play-spin 4s linear infinite;
    }
    .bg1 .title-content {
        width: 100%;
        height: 5.3vw;
        position: fixed;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        bottom: 8vw;
    }
    .bg1 .title {
        width: 37.1vw;
        height: 5.3vw;
        background-image: url('../image/pc/title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .download-content {
        height: 3.4vw;
        width: 50%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        bottom: 3vw;
    }
    .download-content1 {
        display: none;
    }
    .download-content2 {
        display: none;
    }
    .download-item {
        width: 11.7vw;
        height: 3.4vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .apk {
        background-image: url('../image/pc/apk-l.webp');
    }
    .apk-d {
        box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.3);
    }
    .ios {
        background-image: url('../image/pc/ios-l.webp');
        /* 红色半透明蒙层 */
    }
    .ios-d {
        box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.3);
    }
    .google {
        background-image: url('../image/pc/google-l.webp');
    }
    .google-d {
        box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.3);
    }
    .one {
        background-image: url('../image/pc/one-l.webp');
    }
    .one-d {
        box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.3);
    }
    .samsung {
        background-image: url('../image/pc/samsung.png');
    }
    .samsung-d {
        box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.3);
    }
    .right-content {
        width: 9vw;
        height: 2vw;
        position: fixed;
        right: 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        top: 0.8vw;
        z-index: 1000;
    }
    .right-item {
        height: 2vw;
        width: 2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .kakao {
        background-image: url('../image/pc/kakao.png');
    }
    .naver {
        background-image: url('../image/pc/naver.png');
    }
    .group {
        background-image: url('../image/pc/group.png');
    }
    /** bg2 **/
    .bg2 .title-content {
        width: 100%;
        height: 5.7vw;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 3vw;
    }
    .bg2 .title {
        width: 31.2vw;
        height: 5.7vw;
        background-image: url('../image/pc/bg2-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .body-content-3 {
        display: none;
    }
    .role-info {
        width: 100%;
        height: 33.7vw;
        position: fixed;
        bottom: 13vw;
    }
    .role-desc2 {
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 43.6vw;
        height: 26.6vw;
        background-image: url('../image/pc/desc2.webp');
        position: relative;
        top: 11.4vw;
        left: 25vw;
        z-index: 11;
        animation: fadeIn 1s ease-in;
    }
    .role-desc1 {
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 43.6vw;
        height: 26.6vw;
        background-image: url('../image/pc/desc1.webp');
        position: relative;
        top: 11.4vw;
        left: 25vw;
        z-index: 11;
        animation: fadeIn 1s ease-in;
    }
    .role-desc3 {
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 43.6vw;
        height: 26.6vw;
        background-image: url('../image/pc/desc3.webp');
        position: relative;
        top: 11.4vw;
        left: 25vw;
        z-index: 11;
        animation: fadeIn 1s ease-in;
    }
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    /* 定义淡出动画 */
    @keyframes fadeOut {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }
    .mb-role-img {
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        /* transition: transform 1s ease, opacity 1s ease; */
        /* 同时为 transform 和 opacity 添加过渡效果 */
    }
    .r1 {
        width: 22.9vw;
        height: 33.3vw;
        background-image: url('../image/pc/d1.png');
        z-index: 1;
        left: 19vw;
        top: 9vw;
    }
    .r2 {
        width: 29.1vw;
        height: 36.4vw;
        background-image: url('../image/pc/l2.png');
        z-index: 2;
        left: 37.2vw;
        top: 8.1vw;
    }
    .r3 {
        width: 22.9vw;
        height: 33.3vw;
        background-image: url('../image/pc/d3.png');
        z-index: 1;
        right: 12vw;
        top: 9vw;
    }
    .r2-move-forward {
        /* 往前移动 50px，可根据需求调整 */
        /* opacity: 1;
        /* 悬停时完全不透明 */
        /* transform: scale(1.2); */
        animation: zoomAndMove 2s ease forwards;
        z-index: 12;
    }
    @keyframes zoomAndMove {
        0% {
            transform: scale(1) translate(0, 0);
        }
        50% {
            transform: scale(1.12) translate(0, 0);
            /* 先放大 */
        }
        100% {
            transform: scale(1.12) translate(9vw, 0);
            /* 再移动 */
        }
    }
    .r2-return {
        /* 往前移动 50px，可根据需求调整 */
        /* opacity: 1;
        /* 悬停时完全不透明 */
        /* transform: scale(1.2); */
        animation: r2back 2s ease forwards;
        z-index: 10;
    }
    @keyframes r2back {
        0% {
            transform: scale(1.2) translate(10vw, 0);
        }
        50% {
            transform: scale(1.2) translate(0, 0);
            /* 先放大 */
        }
        100% {
            transform: scale(1) translate(0vw, 0);
            /* 再移动 */
        }
    }
    .r1-move-forward {
        /* 往前移动 50px，可根据需求调整 */
        /* opacity: 1;
        /* 悬停时完全不透明 */
        /* transform: scale(1.2); */
        animation: r1zoomAndMove 2s ease forwards;
        z-index: 12;
    }
    @keyframes r1zoomAndMove {
        0% {
            transform: scale(1) translate(0, 0);
        }
        50% {
            transform: scale(1.2) translate(0, 0);
            /* 先放大 */
        }
        100% {
            transform: scale(1.4) translate(24vw, 0);
            /* 再移动 */
        }
    }
    .r1-return {
        /* 往前移动 50px，可根据需求调整 */
        /* opacity: 1;
        /* 悬停时完全不透明 */
        /* transform: scale(1.2); */
        animation: r1back 2s ease forwards;
        z-index: 10;
    }
    @keyframes r1back {
        0% {
            transform: scale(1.4) translate(26vw, 0);
        }
        50% {
            transform: scale(1.2) translate(0, 0);
            /* 先放大 */
        }
        100% {
            transform: scale(1) translate(0vw, 0);
            /* 再移动 */
        }
    }
    .r3-move-forward {
        /* 往前移动 50px，可根据需求调整 */
        /* opacity: 1;
        /* 悬停时完全不透明 */
        /* transform: scale(1.2); */
        animation: r3zoomAndMove 2s ease forwards;
        z-index: 12;
    }
    @keyframes r3zoomAndMove {
        0% {
            transform: scale(1) translate(0, 0);
        }
        50% {
            transform: scale(1.2) translate(0, 0);
            /* 先放大 */
        }
        100% {
            transform: scale(1.4) translate(-7vw, 0);
            /* 再移动 */
        }
    }
    .r3-return {
        /* 往前移动 50px，可根据需求调整 */
        /* opacity: 1;
        /* 悬停时完全不透明 */
        /* transform: scale(1.2); */
        animation: r3back 2s ease forwards;
        z-index: 10;
    }
    @keyframes r3back {
        0% {
            transform: scale(1.4) translate(-7vw, 0);
        }
        50% {
            transform: scale(1.2) translate(0, 0);
            /* 先放大 */
        }
        100% {
            transform: scale(1) translate(0vw, 0);
            /* 再移动 */
        }
    }
    .role-des {
        width: 100%;
        height: 100%;
        z-index: 100;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: red;
    }
    .close {
        height: 3.1vw;
        width: 3.1vw;
        background-image: url('../image/pc/close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        top: -3vw;
        left: -2vw;
        z-index: 13;
        animation: fadeIn 1s ease-in;
    }
    .role-image1 {
        width: 12.1vw;
        height: 6.8vw;
        background-image: url('../image/pc/1g.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        left: 10vw;
        top: 13vw;
    }
    .des-border {
        width: 12.1vw;
        height: 6.8vw;
        background-image: url('../image/mobile/desc-border.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .role-image2 {
        width: 12.1vw;
        height: 6.8vw;
        background-image: url('../image/pc/2g.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        left: 10vw;
        top: 13vw;
    }
    .role-image3 {
        width: 12.1vw;
        height: 6.8vw;
        background-image: url('../image/pc/3g.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        left: 10vw;
        top: 13vw;
    }
    .des {
        width: 89.6vw;
        height: 99.2vw;
        background-image: url('../image/mobile/desc1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg3 .title-content {
        width: 100%;
        height: 5.7vw;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 3vw;
    }
    .bg3 .title {
        width: 31.2vw;
        height: 5.7vw;
        background-image: url('../image/mobile/bg3-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .big-img-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 12vw;
    }
    .bgimg {
        z-index: -1 !important;
    }
    .big-img {
        width: 48.6vw;
        height: 24.5vw;
        background-image: url('../image/pc/image-border.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        /* 移除z-index或设为auto */
        z-index: 1;
    }
    .bgimg {
        display: none;
    }
    .pc-bgimg {
        width: 43.2vw;
        height: 19.5vw;
        background-image: url('../image/pc/b1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        z-index: -1;
    }
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    .pc-bgimg.show {
        opacity: 1;
        visibility: visible;
        animation: fadeIn 1s ease;
    }
    .mobile-swiper {
        display: none;
    }
    .bg4-swiper {
        width: 42vw;
        height: 3.6vw;
        position: absolute;
        top: 37.5vw;
        display: flex;
    }
    .bg4-swiper .slide-div {
        width: 7.9vw;
        height: 3.6vw;
    }
    .bg4-swiper img {
        width: 7.9vw;
        height: 3.6vw;
    }
    .pc-border-info {
        z-index: 1000;
        position: absolute;
        width: 7.9vw;
        height: 3.6vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../image/mobile/footer-border.png');
    }
    .s1 {
        opacity: 1;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        display: none;
    }
    .pc-swiper {}
    .swiper-button-prev {
        width: 1.4vw;
        height: 2.7vw;
        background-image: url('../image/pc/left.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 39.2vw;
        left: 27vw;
        position: fixed;
    }
    .swiper-button-next {
        width: 1.4vw;
        height: 2.7vw;
        background-image: url('../image/pc/right.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 39.2vw;
        right: 27vw;
        position: fixed;
    }
    .left-border-content {
        height: 100%;
        width: 6.1vw;
        position: fixed;
        z-index: 100;
        top: 0px;
        display: flex !important;
        /* 临时用 !important 测试 */
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .left-border {
        height: 37.5vw;
        width: 6.1vw;
        background-image: url('../image/pc/left-border.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        display: flex;
    }
    .left-item {
        width: 5.3vw;
        height: 5.3vw;
    }
    .left-item-1 {
        background-image: url('../image/pc/left1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 7vw;
        position: absolute;
        margin-left: 1vw;
        width: 5.3vw;
        height: 5.3vw;
    }
    .left-item-2 {
        background-image: url('../image/pc/left2.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 3.8vw;
        width: 5.3vw;
        height: 5.3vw;
    }
    .left-item-3 {
        background-image: url('../image/pc/left3.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 7vw;
        position: absolute;
        margin-left: 1vw;
        width: 5.3vw;
        height: 5.3vw;
    }
    .left-item-content {
        width: 5.3vw;
        height: 5.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .left-center {
        margin-left: 2vw;
    }
    .light {
        opacity: 0;
        /* 初始透明度为 0 */
        animation: fadeInOut 1.5s forwards;
    }
    .dark {}
    @keyframes fadeInOut {
        0% {
            opacity: 0;
            /* 开始时完全透明 */
        }
        100% {
            opacity: 1;
            /* 中间时刻完全不透明 */
        }
    }
    .role-des {
        display: none;
    }
    .video {
        width: 100vw;
        height: 100%;
        z-index: 200;
        position: fixed;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.7);
        /* 白色，50% 透明度 */
    }
    .video-content {
        width: 100vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .myVideo {
        width: 50vw;
        height: 30vw;
    }
    .close-video {
        background-image: url('../image/pc/close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 3.1vw;
        width: 3.1vw;
        z-index: 300;
        position: fixed;
        right: 20vw;
        animation: spin 0.8s ease-out 1;
        top: 7vw;
    }
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('../font/sy.otf'), /* IE9 及更早版本 */
    url('../font/sy.otf?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../font/sy.otf') format('woff2'), /* 现代浏览器 */
    url('../font/sy.otf') format('woff'), /* 现代浏览器 */
    url('../font/sy.otf') format('truetype'), /* Safari, Android, iOS */
    url('../font/sy.otf#svgMyFont') format('svg');
    /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

@keyframes play-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}