@media only screen and (max-width: 767px) {
    body {
        font-family: 'MyCustomFont', sans-serif;
        /* 使用自定义字体，并指定备用字体 */
        margin: 0px;
        padding: 0px;
        width: 100%;
        background-attachment: fixed;
        /* 背景图固定在视口 */
    }
    .body {
        width: 100%;
        height: 866.2vw;
        background-image: url('../image/mobile/main-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .header-tab {
        display: none;
    }
    .header {
        width: 100%;
        height: 11vw;
        background-image: url('../image/mobile/header.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .logo-content {
        width: 27.3vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: 1.3vw;
    }
    .logo {
        width: 27.3vw;
        height: 9vw;
        background-image: url('../image/mobile/logo.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .header-menu {
        width: 10.8vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 100;
        right: 1.3vw;
    }
    .header-menu-item {
        width: 10.8vw;
        height: 10.8vw;
        background-image: url('../image/mobile/menu.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        right: 100px;
    }
    .select-container {
        width: 46.5vw;
        height: 82.8vw;
        background-image: url('../image/mobile/select-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        z-index: 100;
        top: 12.5vw;
        right: 5.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .select-bg {
        width: 27.7vw;
        height: 49.2vw;
        z-index: 99;
        background-image: url('../image/mobile/mune-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 20vw;
    }
    .select-content {
        width: 100%;
        height: 85%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        z-index: 100;
        position: absolute;
    }
    .select-item {
        width: 27.4vw;
        height: 6.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .tab-msg {
        background-image: url('../image/mobile/tab-msg.png');
    }
    .tab-role {
        background-image: url('../image/mobile/tab-role.png');
    }
    .tab-game {
        background-image: url('../image/mobile/tab-game.png');
    }
    .tab-pay {
        background-image: url('../image/mobile/tab-pay.png');
    }
    /* .btn-container {
        width: 60%;
        height: 20%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    } */
    .select-btn-cotnent {
        width: 100%;
        height: 6.6vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        margin-top: 3.5vw;
    }
    .fb {
        width: 10vw;
        height: 10vw;
        background-image: url('../image/pc/fkb.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .fb2 {
        width: 10vw;
        height: 10vw;
        background-image: url('../image/pc/qunzu.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .youtube {
        width: 10vw;
        height: 10vw;
        background-image: url('../image/pc/youtube.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .discord {
        width: 10vw;
        height: 10vw;
        background-image: url('../image/pc/discord.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .fb2 {
        width: 10vw;
        height: 10vw;
        background-image: url('../image/pc/qunzu.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg1 {
        width: 100%;
        height: 13vw;
        position: absolute;
        top: 174.5vw;
        display: flex;
        flex-direction: row;
        justify-content: center;
        justify-content: space-around;
    }
    .download-btn {
        width: 47vw;
        height: 13vw;
        background-image: url('../image/mobile/download.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .purchase-btn {
        width: 47vw;
        height: 13vw;
        background-image: url('../image/mobile/purchase.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .pull-down {
        width: 100%;
        height: 10.8vw;
        display: flex;
        top: 195.6vw;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .pull-down-btn {
        width: 9.8vw;
        height: 10.8vw;
        background-image: url('../image/mobile/pull-down.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    /** 文章轮播图 **/
    .bg2 {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 211vw;
        justify-content: center;
    }
    .bg2-swiper-content {
        width: 86.2vw;
        height: 50.1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 19vw;
    }
    .bg2-swiper {
        width: 100%;
        height: 50.1vw;
        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 {
        position: relative;
        /* 使子元素可以基于 .slide-div 定位 */
        width: 100vw;
        height: 50.1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    .bg2 .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;
        /* 防止伪元素影响点击事件 */
    }
    .bg2 .slide-div img {
        width: 86.2vw;
        height: 50.1vw;
        display: block;
        z-index: 1;
        /* 确保 img 在伪元素下方 */
        position: relative;
    }
    .role3 {
        width: 86.2vw;
        height: 50.1vw;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        display: none;
    }
    .bg2 .swiper-button-next {
        width: 3.9vw;
        height: 6.6vw;
        background-image: url('../img/role-right.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg2 .swiper-button-prev {
        width: 3.9vw;
        height: 6.6vw;
        background-image: url('../img/role-left.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .article-content {
        width: 86.6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 10vw;
    }
    .article-one {
        width: 100%;
        height: 20.1vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .article-two {
        width: 100%;
        height: 20.1vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: 2vw;
    }
    .article-item {
        width: 27.7vw;
        height: 20.1vw;
        background-image: url('../image/mobile/article.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
    .article-title {
        font-size: 3.2vw;
        height: 10vw;
        color: #4e483c;
        width: 87%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        text-align: center;
    }
    .article-time {
        width: 87%;
        font-size: 2.7vw;
        color: #b1afac;
    }
    .article-btn {
        width: 100%;
        height: 12vw;
        background-image: url('../image/mobile/article-more.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 6.5vw;
    }
    /** 人物轮播图 **/
    .bg3 {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 368vw;
        justify-content: center;
    }
    .bg3-swiper-content {
        width: 100vw;
        height: 108.6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 19vw;
    }
    .bg3-swiper {
        width: 100%;
        height: 108.6vw;
        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);
    }
    .bg3 .slide-div {
        position: relative;
        /* 使子元素可以基于 .slide-div 定位 */
        width: 100vw;
        height: 108.6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    .bg3 .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;
        /* 防止伪元素影响点击事件 */
    }
    .bg3 .slide-div img {
        width: 100vw;
        height: 108.6vw;
        display: block;
        z-index: 1;
        /* 确保 img 在伪元素下方 */
        position: relative;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        display: none;
    }
    .bg3 .swiper-button-next {
        width: 3.9vw;
        height: 6.6vw;
        background-image: url('../img/role-right.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg3 .swiper-button-prev {
        width: 3.9vw;
        height: 6.6vw;
        background-image: url('../img/role-left.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg3 .pc-point {
        display: none;
    }
    .bg3 .point {
        width: 87.4vw;
        height: 16.6vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        z-index: 100;
        position: relative;
        top: -6vw;
    }
    .point-item {
        height: 16.6vw;
        width: 15.4vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .p1 {
        background-image: url('../image/mobile/l1.webp');
    }
    .p2 {
        background-image: url('../image/mobile/d2.webp');
    }
    .p3 {
        background-image: url('../image/mobile/d3.webp');
    }
    .p4 {
        background-image: url('../image/mobile/d4.webp');
    }
    .p5 {
        background-image: url('../image/mobile/d5.webp');
    }
    .bg4 {
        width: 100%;
        position: absolute;
        top: 515.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 26vw;
    }
    /** 游戏特殊 **/
    .bg5 {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 764vw;
        justify-content: center;
    }
    .bg5-swiper-content {
        width: 100%;
        height: 52.1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 19vw;
    }
    .bg5-swiper {
        width: 100%;
        height: 52.1vw;
        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);
    }
    .bg5 .slide-div {
        position: relative;
        /* 使子元素可以基于 .slide-div 定位 */
        width: 100%;
        height: 52.1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    .bg5 .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;
        /* 防止伪元素影响点击事件 */
    }
    .bg5 .slide-div img {
        width: 92vw;
        height: 52.1vw;
        display: block;
        z-index: 1;
        /* 确保 img 在伪元素下方 */
        position: relative;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        display: none;
    }
    .bg5 .swiper-button-next {
        width: 10.2vw;
        height: 10.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -35vw;
        background-image: url('../image/mobile/right.webp');
        right: 1vw;
    }
    .bg5 .swiper-button-prev {
        width: 10.2vw;
        height: 10.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../image/mobile/left.webp');
        margin-top: -35vw;
        left: 1vw;
    }
    .panda {
        width: 24.8vw;
        height: 27vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        z-index: 100;
        left: 0px;
        background-image: url('../image/mobile/panda.webp');
    }
    .video {
        width: 79.8vw;
        height: 38.9vw;
        background-image: url('../image/mobile/video.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .play {
        width: 11.6vw;
        height: 11.6vw;
        background-image: url('../image/mobile/play.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .boy {
        width: 34.4vw;
        height: 55.3vw;
        background-image: url('../image/mobile/boy.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 100;
        position: absolute;
        left: 0px;
        top: 32vw;
    }
    .footer-content {
        width: 100%;
        height: 28.2vw;
        background-image: url('../image/mobile/footer-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: 0px;
    }
    .pc-header {
        display: none;
    }
    .pc-btn-content {
        display: none;
    }
    .pc-bg3-swiper-content {
        display: none;
    }
    .pc-bg5-swiper-content {
        display: none;
    }
    .section2 {
        width: 100%;
        top: -5vw;
        position: absolute;
        z-index: 100;
    }
    .section3 {
        width: 100%;
        top: 0vw;
        position: absolute;
        z-index: 100;
    }
    .section5 {
        width: 100%;
        top: 0vw;
        position: absolute;
        z-index: 100;
    }
    .article-tab {
        display: none;
    }
    .copy-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        color: darkgray;
        font-size: 2vw;
        top: 20vw;
        background: #05050f;
        padding: 2vw 0px;
    }
}

@media only screen and (min-width: 767px) {
    body {
        font-family: 'MyCustomFont', sans-serif;
        /* 使用自定义字体，并指定备用字体 */
        margin: 0px;
        padding: 0px;
    }
    .body {
        width: 100%;
        height: 408.9vw;
        background-image: url('../image/pc/main-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .header-tab {
        display: none;
    }
    .header {
        width: 100%;
        height: 11vw;
        background-image: url('../image/mobile/header.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        display: none;
    }
    .pc-header {
        width: 100%;
        height: 3.6vw;
        background-image: url('../image/pc/header-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .logo-content {
        width: 17vw;
        height: 3.6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .logo {
        width: 11.9vw;
        height: 4.1vw;
        background-image: url('../image/pc/logo.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0.8vw;
    }
    .tab-content {
        width: 62.5vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }
    .pc-header .tab1 {
        background-image: url('../image/pc/dark-jhzx.png');
    }
    .pc-header .tab2 {
        background-image: url('../image/pc/dark-zyjs.png');
    }
    .pc-header .tab3 {
        background-image: url('../image/pc/dark-yxts.png');
    }
    .pc-header .tab4 {
        background-image: url('../image/pc/dark-xscz.png');
    }
    .tab-item {
        height: 1.4vw;
        width: 6.8vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .tab-item:hover {
        cursor: pointer;
        color: #ff9232;
    }
    .header-btn {
        width: 22vw;
        height: 3.6vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
    .btn-item {
        width: 3.1vw;
        height: 3.1vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .download-btn {
        display: none;
    }
    .purchase-btn {
        display: none;
    }
    .fkb {
        background-image: url('../image/pc/fkb.webp');
    }
    .youtube {
        background-image: url('../image/pc/youtube.webp');
    }
    .qunzu {
        background-image: url('../image/pc/qunzu.webp');
    }
    .discord {
        background-image: url('../image/pc/discord.webp');
    }
    .bg1 {
        width: 100%;
        height: 13vw;
        position: absolute;
        top: 38.5vw;
        display: flex;
        flex-direction: row;
        justify-content: center;
        justify-content: space-around;
    }
    .bg1 .pc-btn-content {
        width: 100%;
        height: 7.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
    }
    .pc-btn-bg {
        width: 21vw;
        height: 7.5vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../image/pc/download-bg.webp');
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }
    .pc-btn-qrcode {
        width: 3.9vw;
        height: 5.6vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../image/pc/erweima.png');
    }
    .pc-btn-list {
        height: 5.5vw;
        width: 9vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .bg1-apple {
        width: 9vw;
        height: 2.6vw;
        background-image: url('../image/pc/ios.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg1-google {
        width: 9vw;
        height: 2.6vw;
        background-image: url('../image/pc/apk.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .pc-btn-purchase {
        width: 5.5vw;
        height: 5.5vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../image/pc/cz.webp');
    }
    .download-btn {
        width: 47vw;
        height: 13vw;
        background-image: url('../image/mobile/download.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .purchase-btn {
        width: 47vw;
        height: 13vw;
        background-image: url('../image/mobile/purchase.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .pull-down {
        width: 100%;
        height: 10.8vw;
        display: flex;
        top: 195.6vw;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        display: none;
    }
    .pull-down-btn {
        width: 9.8vw;
        height: 10.8vw;
        background-image: url('../image/mobile/pull-down.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    /** 文章轮播图 **/
    .bg2 {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: absolute;
        top: 76.3vw;
        justify-content: center;
    }
    .bg2-swiper-content {
        width: 36.8vw;
        height: 21.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 3vw;
    }
    .bg2-swiper {
        width: 36.8vw;
        height: 21.5vw;
        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 {
        position: relative;
        /* 使子元素可以基于 .slide-div 定位 */
        width: 36.8vw;
        height: 21.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    .bg2 .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;
        /* 防止伪元素影响点击事件 */
    }
    .bg2 .slide-div img {
        width: 36.8vw;
        height: 21.5vw;
        display: block;
        z-index: 1;
        /* 确保 img 在伪元素下方 */
        position: relative;
    }
    .role3 {
        width: 86.2vw;
        height: 50.1vw;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        display: none;
    }
    .bg2 .swiper-button-next {
        width: 3.9vw;
        height: 6.6vw;
        background-image: url('../img/role-right.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg2 .swiper-button-prev {
        width: 3.9vw;
        height: 6.6vw;
        background-image: url('../img/role-left.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .article-content {
        width: 35.9vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .article-one {
        width: 100%;
        height: 7.8vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .article-two {
        width: 100%;
        height: 7.8vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: 2vw;
    }
    .article-item {
        width: 10.8vw;
        height: 7.8vw;
        background-image: url('../image/mobile/article.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
    .article-title {
        font-size: 1.2vw;
        color: #6b675e;
        height: 4vw;
        width: 90%;
        text-align: center;
    }
    .article-time {
        width: 90%;
        color: #6b675e;
        height: 1.5vw;
        font-size: 0.8vw;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .article-btn {
        width: 100%;
        height: 12vw;
        background-image: url('../image/mobile/article-more.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 6.5vw;
        display: none;
    }
    .article-tab {
        width: 33.5vw;
        height: 4vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .article-tab-item {
        height: 3vw;
        width: 4.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        font-size: 2vw;
        padding: 0px;
        margin: 0px;
    }
    .select-article-tab-item {
        border-bottom: 3px solid #ff9232;
        color: #ff9232;
    }
    .more {
        width: 5.7vw;
        height: 2vw;
        background-image: url('../image/pc/more.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 0.5vw;
    }
    /** 人物轮播图 **/
    .bg3 {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 112.9vw;
        justify-content: center;
    }
    .bg3-swiper-content {
        width: 100vw;
        height: 64.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 19vw;
        display: none;
    }
    .pc-bg3-swiper-content {
        width: 100vw;
        height: 64.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 6vw;
    }
    .bg3-swiper {
        width: 100%;
        height: 64.5vw;
        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);
    }
    .bg3 .slide-div {
        position: relative;
        /* 使子元素可以基于 .slide-div 定位 */
        width: 100vw;
        height: 64.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    .bg3 .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;
        /* 防止伪元素影响点击事件 */
    }
    .bg3 .slide-div img {
        width: 100vw;
        height: 64.5vw;
        display: block;
        z-index: 1;
        /* 确保 img 在伪元素下方 */
        position: relative;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        display: none;
    }
    .bg3 .swiper-button-next {
        width: 3.9vw;
        height: 6.6vw;
        background-image: url('../img/role-right.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg3 .swiper-button-prev {
        width: 3.9vw;
        height: 6.6vw;
        background-image: url('../img/role-left.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg3 .point {
        display: none;
    }
    .bg3 .pc-point {
        width: 8.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        z-index: 100;
        position: relative;
        top: -57vw;
        right: -25.1vw;
    }
    .point-item {
        width: 8.5vw;
        height: 9.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .pc1 {
        background-image: url('../image/mobile/l1.webp');
    }
    .pc2 {
        background-image: url('../image/mobile/d2.webp');
        right: -7vw;
    }
    .pc3 {
        background-image: url('../image/mobile/d3.webp');
        right: -14vw;
    }
    .pc4 {
        background-image: url('../image/mobile/d4.webp');
        right: -7vw;
    }
    .pc5 {
        background-image: url('../image/mobile/d5.webp');
    }
    .bg4 {
        width: 100%;
        position: absolute;
        top: 199.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /** 游戏特殊 **/
    .bg5 {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 334vw;
        justify-content: center;
    }
    .bg5-swiper-content {
        width: 100%;
        height: 52.1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 19vw;
        display: none;
    }
    .pc-bg5-swiper-content {
        width: 50vw;
        height: 32.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 3vw;
    }
    .bg5-swiper {
        width: 80vw;
        height: 32.5vw;
        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);
    }
    .bg5 .slide-div {
        position: relative;
        /* 使子元素可以基于 .slide-div 定位 */
        width: 50%;
        height: 32.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    .bg5 .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;
        /* 防止伪元素影响点击事件 */
    }
    .bg5 .slide-div img {
        width: 58.6vw;
        height: 32.5vw;
        display: block;
        z-index: 1;
        /* 确保 img 在伪元素下方 */
        position: relative;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        display: none;
    }
    .bg5 .swiper-button-next {
        width: 10.2vw;
        height: 10.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -35vw;
        background-image: url('../image/mobile/right.webp');
        right: 1vw;
    }
    .bg5 .swiper-button-prev {
        width: 10.2vw;
        height: 10.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../image/mobile/left.webp');
        margin-top: -35vw;
        left: 1vw;
    }
    .panda {
        width: 19.7vw;
        height: 20.9vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        z-index: 100;
        left: 2.8vw;
        top: 22vw;
        background-image: url('../image/pc/panda.webp');
    }
    .video {
        width: 68.4vw;
        height: 34vw;
        background-image: url('../image/pc/video.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .play {
        width: 9.6vw;
        height: 9.6vw;
        background-image: url('../image/pc/play.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .boy {
        width: 32vw;
        height: 39.1vw;
        background-image: url('../image/pc/boy.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 100;
        position: absolute;
        left: 1.5vw;
        top: 20vw;
    }
    .footer-content {
        width: 100%;
        height: 13.5vw;
        background-image: url('../image/pc/footer-bg.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: 0px;
    }
    .section2 {
        position: absolute;
        z-index: 100;
        top: -20vw;
    }
    .section3 {
        position: absolute;
        z-index: 100;
        top: -3vw;
    }
    .section5 {
        position: absolute;
        z-index: 100;
        top: -11vw;
    }
    .copy-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        color: darkgray;
        font-size: 0.6vw;
        top: 9.5vw;
    }
}

@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;
}