/* reset */
html, body, div, main, section, article, header, footer, aside, nav, h1, h2, p, ul, li, a, button, img, time {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    color: #2c2730;
    background: #070911;
    -webkit-text-size-adjust: 100%;
}

ul {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

button {
    border: 0;
    color: inherit;
    font: inherit;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

img {
    display: block;
    max-width: 100%;
    border: 0;
}

button:focus-visible,
a:focus-visible {
    outline: .04rem solid #ffd25f;
    outline-offset: .04rem;
}

.sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.home_page {
    height: 100dvh;
    overflow: hidden;
}

.site_shell,
.article_shell {
    position: relative;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    overflow: hidden;
}

.site_shell,
.main_swiper,
.main_swiper > .swiper-wrapper,
.page {
    height: 100dvh;
    min-height: 12rem;
}

.main_swiper {
    width: 100%;
    overflow: hidden;
}

.page {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #0b1020 url(/images/dcsl_m/page-bg.png) no-repeat top center / auto 100%;
}

.home_section {
    background-image: url(/images/dcsl_m/home-bg.png);
}

.topbar {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 60;
    width: 100%;
    max-width: 450px;
    height: 1.5rem;
    border-bottom: .02rem solid #050505;
    background: linear-gradient(180deg, #242424 0%, #181818 100%);
    transform: translateX(-50%);
}

.topbar_icon,
.topbar_title,
.topbar_subtitle {
    position: absolute;
    object-fit: contain;
}

.topbar_icon {
    top: .08rem;
    left: .34rem;
    width: 1.35rem;
    height: 1.35rem;
}

.topbar_title {
    top: .32rem;
    left: 1.95rem;
    width: 2.47rem;
    height: .61rem;
}

.topbar_subtitle {
    top: .98rem;
    left: 1.96rem;
    width: 2.46rem;
    height: .27rem;
}

.topbar_download {
    position: absolute;
    top: .24rem;
    right: .35rem;
    width: 3.07rem;
    height: 1.02rem;
    transition: transform .18s ease;
}

.topbar_download img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.topbar_download:active,
.home_download:active,
.side_menu_download:active,
.news_tabs button:active,
.world_nav_items button:active {
    transform: scale(.97);
}

.menu_toggle {
    display: none;
    position: absolute;
    top: .15rem;
    right: 0;
    width: 1.08rem;
    height: 1.2rem;
}

.side_menu {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    z-index: 55;
    width: 100%;
    max-width: 450px;
    height: calc(100dvh - 1.5rem);
    padding: 1.1rem 1.15rem .8rem;
    background: rgba(7, 9, 17, .96);
    transform: translate(50%, 0);
    opacity: 0;
    pointer-events: none;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .25s ease;
}

.menu_open .side_menu {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.menu_mask {
    position: fixed;
    inset: 1.5rem 0 0;
    z-index: 54;
    display: none;
    background: rgba(0, 0, 0, .35);
}

.menu_open .menu_mask {
    display: block;
}

.side_menu_nav a {
    display: block;
    height: 1.45rem;
    margin-bottom: .28rem;
    border: .04rem solid #aa7a30;
    border-radius: .12rem;
    color: #ffe29a;
    font-size: .52rem;
    font-weight: 700;
    line-height: 1.37rem;
    text-align: center;
    background: linear-gradient(180deg, #3b2d34, #18161f);
}

.side_menu_download {
    display: block;
    width: 4.55rem;
    margin: .75rem auto .7rem;
}

.side_menu_social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.side_menu_social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: .84rem;
    height: .84rem;
    border: .02rem solid rgba(255, 210, 95, .45);
    border-radius: 50%;
    background: #282831;
}

.side_menu_social img {
    max-width: .44rem;
    max-height: .44rem;
}

.age_tag {
    position: absolute;
    top: 1.72rem;
    left: .25rem;
    z-index: 4;
    width: .76rem;
}

.home_social {
    position: absolute;
    top: 2.5rem;
    right: .1rem;
    z-index: 4;
    width: .72rem;
    pointer-events: none;
}

.home_social_toggle {
    position: absolute;
    top: -.72rem;
    left: .08rem;
    width: .56rem;
    height: .56rem;
    border-radius: 50%;
    color: #fff;
    font-size: .46rem;
    line-height: .52rem;
    text-align: center;
    background: rgba(40, 40, 44, .9);
    pointer-events: auto;
}

.home_social_toggle::before {
    content: "×";
}

.home_social.is_collapsed .home_social_toggle::before {
    content: "+";
}

.home_social_links {
    display: flex;
    width: .72rem;
    padding: .15rem 0;
    border-radius: .36rem 0 0 .36rem;
    flex-direction: column;
    align-items: center;
    gap: .26rem;
    opacity: 1;
    background: rgba(25, 25, 30, .85);
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: top center;
    transition: opacity .2s ease, transform .28s cubic-bezier(.16, 1, .3, 1), visibility 0s linear;
    visibility: visible;
    pointer-events: auto;
}

.home_social.is_collapsed .home_social_links {
    opacity: 0;
    transform: translate3d(.14rem, -.12rem, 0) scale(.86);
    transition: opacity .18s ease, transform .22s ease, visibility 0s linear .22s;
    visibility: hidden;
    pointer-events: none;
}

.home_social a {
    display: flex;
    width: .55rem;
    height: .55rem;
    align-items: center;
    justify-content: center;
}

.home_social img {
    max-width: .42rem;
    max-height: .42rem;
}

.home_collaboration {
    position: absolute;
    top: max(3.05rem, 15.8dvh);
    left: 0;
    z-index: 5;
    width: 2.26rem;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity .22s ease, transform .28s ease, visibility 0s linear;
    visibility: visible;
}

.home_collaboration.is_hidden {
    opacity: 0;
    transform: translate3d(-.5rem, 0, 0) scale(.92);
    transition: opacity .2s ease, transform .24s ease, visibility 0s linear .24s;
    visibility: hidden;
    pointer-events: none;
}

.home_collaboration_link,
.home_collaboration_link img {
    display: block;
    width: 100%;
}

.home_collaboration_link[aria-disabled="true"] {
    pointer-events: none;
}

.home_collaboration_close {
    position: absolute;
    top: -.07rem;
    right: .06rem;
    z-index: 1;
    width: .36rem;
    height: .36rem;
}

.home_collaboration_close img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.home_popup_video_trigger {
    position: absolute;
    top: 50.5dvh;
    left: 50%;
    z-index: 5;
    width: .88rem;
    height: .87rem;
    filter: drop-shadow(0 .05rem .08rem rgba(0, 0, 0, .55));
    transform: translateX(-50%);
    transition: filter .2s ease, transform .2s ease;
}

.home_popup_video_trigger img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.home_popup_video_trigger:active {
    filter: brightness(1.18) drop-shadow(0 .04rem .06rem rgba(0, 0, 0, .5));
    transform: translateX(-50%) scale(.92);
}

.home_popup_video_modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    width: 100%;
    max-width: 450px;
    height: 100dvh;
    min-height: 12rem;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background: rgba(5, 7, 17, .82);
    transition: opacity .24s ease, visibility 0s linear .24s;
    visibility: hidden;
    pointer-events: none;
}

.home_popup_video_modal.is_open {
    opacity: 1;
    transition-delay: 0s;
    visibility: visible;
    pointer-events: auto;
}

.home_popup_video_dialog {
    position: relative;
    width: 10.8rem;
    height: 6.85rem;
    transform: translate3d(0, .28rem, 0) scale(.96);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.home_popup_video_modal.is_open .home_popup_video_dialog {
    transform: translate3d(0, 0, 0) scale(1);
}

.home_popup_video_player {
    position: absolute;
    top: .95rem;
    left: .91rem;
    z-index: 3;
    width: 8.99rem;
    height: 5.05rem;
    background: #000;
    object-fit: contain;
}

.home_popup_video_frame {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.home_popup_video_close {
    position: absolute;
    top: .52rem;
    right: .34rem;
    z-index: 4;
    width: .72rem;
    height: .72rem;
}

.home_title {
    position: absolute;
    left: .58rem;
    bottom: 3.36rem;
    width: 9.64rem;
    opacity: 0;
    transform: translate3d(0, .48rem, 0) scale(.94);
    pointer-events: none;
}

.swiper-slide-active .home_title {
    animation: hero-title-enter .78s cubic-bezier(.16, 1, .3, 1) .08s both;
}

.home_download {
    position: absolute;
    left: 3.13rem;
    bottom: 2.19rem;
    z-index: 3;
    width: 4.55rem;
    transition: transform .18s ease;
}

.section_title,
.article_page_title {
    position: absolute;
    top: 1.25rem;
    left: 1.8rem;
    z-index: 2;
    width: 7.2rem;
    height: 2.9rem;
    opacity: 0;
    object-fit: contain;
    transform: translate3d(0, -.36rem, 0) scale(.92);
}

.swiper-slide-active .section_title,
.article_page_title {
    animation: section-title-enter .72s cubic-bezier(.16, 1, .3, 1) .08s both;
}

.news_board {
    position: absolute;
    top: 0;
    left: .115rem;
    width: 10.57rem;
    height: 19.2rem;
    padding: 5.24rem 1.25rem .5rem;
    opacity: 0;
    background: url(/images/dcsl_m/news-frame.png) no-repeat center / 100% 100%;
    transform: translate3d(0, .58rem, 0) scale(.965);
}

.swiper-slide-active .news_board {
    animation: panel-enter .82s cubic-bezier(.16, 1, .3, 1) .16s both;
}

.news_banner_stage {
    position: relative;
    width: 7.99rem;
    height: 4.84rem;
    margin: 0 auto;
}

.news_banner_envelope {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.news_carousel {
    position: absolute;
    top: .27rem;
    left: .22rem;
    width: 7.44rem;
    height: 4.21rem;
    overflow: hidden;
    border: .08rem solid #fff;
    border-radius: .12rem;
    background: #201d2d;
    box-shadow: 0 .05rem .08rem rgba(34, 19, 29, .34);
}

.news_carousel .swiper-slide,
.news_carousel .swiper-slide img {
    width: 100%;
    height: 100%;
}

.news_carousel .swiper-slide img {
    object-fit: cover;
}

.news_banner_stage > .swiper-pagination {
    position: absolute;
    bottom: .06rem !important;
    left: 0;
    z-index: 4;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.news_banner_stage > .swiper-pagination .swiper-pagination-bullet {
    width: .13rem;
    height: .13rem;
    margin: 0 .07rem !important;
    border: .025rem solid #111;
    border-radius: 50%;
    opacity: 1;
    background: transparent;
}

.news_banner_stage > .swiper-pagination .swiper-pagination-bullet-active {
    background: #111;
}

.news_tabs,
.article_tabs {
    display: grid;
    height: .75rem;
    margin-top: .18rem;
    padding: .06rem .18rem;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: url(/images/dcsl_m/news-tabs.png) no-repeat center / 100% 100%;
}

.news_tabs button,
.article_tabs a {
    position: relative;
    display: flex;
    height: .63rem;
    align-items: center;
    justify-content: center;
}

.news_tabs button:not(:last-child)::after,
.article_tabs a:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: .04rem;
    height: .55rem;
    content: "";
    background: var(--news-tab-divider, url(/images/dcsl_m/tab-divider.png)) no-repeat center / 100% 100%;
    transform: translateY(-50%);
}

.news_tabs img,
.article_tabs img {
    object-fit: contain;
}

.news_tabs .tab_icon_default,
.article_tabs .tab_icon_default {
    max-width: 0.74rem;
    max-height: .66rem;
}

.news_tabs .tab_icon_active,
.article_tabs .tab_icon_active {
    display: none;
    width: 1.55rem;
    max-width: none;
    max-height: .66rem;
}

.news_tabs .active .tab_icon_default,
.article_tabs .active .tab_icon_default {
    display: none;
}

.news_tabs .active .tab_icon_active,
.article_tabs .active .tab_icon_active {
    display: block;
}

.news_lists {
    height: 3.18rem;
    margin-top: .24rem;
}

.news_list {
    display: none;
}

.news_list.active {
    display: block;
}

.news_list li {
    position: relative;
    display: flex;
    height: 1.02rem;
    align-items: center;
    justify-content: space-between;
    color: #51444a;
    font-size: .25rem;
}

.news_list li::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: .04rem;
    content: "";
    background: url(/images/dcsl_m/article-title-line.png) repeat-x left center / auto .03rem;
}

.news_list li::before {
    flex: 0 0 auto;
    margin-right: .08rem;
    color: #d99218;
    content: "◆";
    font-size: .16rem;
}

.news_list a {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: bold;
    font-size: 0.32rem;
}

.news_item_type {
    margin-right: .08rem;
    color: #7b3e8e;
}

.news_item_title,
.news_item_type {
    transition: color .18s ease;
}

.news_list a:hover .news_item_type,
.news_list a:focus-visible .news_item_type {
    color: #b34cb5;
}

.news_list a:hover .news_item_title,
.news_list a:focus-visible .news_item_title {
    color: #e79a18;
}

.news_list time {
    flex: 0 0 1.62rem;
    color: #806f6e;
    text-align: right;
    white-space: nowrap;
    font-size: .3rem;
}

.news_list .news_empty {
    height: 3.5rem;
    justify-content: center;
    border: 0;
    color: #887b7a;
    font-size: .3rem;
}

.news_list .news_empty::before, .news_list .news_empty::after {
    display: none;
}

.more_news {
    display: block;
    width: 3.54rem;
    margin: .38rem auto 0;
    transition: transform .18s ease, filter .18s ease;
}

.more_news:hover,
.more_news:focus-visible {
    filter: brightness(1.12);
}

.more_news:active {
    transform: scale(.96);
}

.more_news[aria-disabled="true"] {
    opacity: .55;
    pointer-events: none;
}
.world_cards {
    position: absolute;
    top: 3.79rem;
    left: 0;
    width: 100%;
    height: 14.5rem;
}

.world_card {
    z-index: 4;
    opacity: 0;
    transform: translate3d(var(--entry-x, 0), var(--entry-y, .4rem), 0) rotate(var(--entry-rotate, 0)) scale(.94);
    transition: filter .18s ease;
}

.swiper-slide-active .world_card {
    animation: world-card-enter .72s cubic-bezier(.16, 1, .3, 1) both;
}

.world_card img,
.world_globe img {
    width: 100%;
    height: 100%;
}

.world_card_role {
    --entry-x: -1.35rem;
    --entry-rotate: -2deg;
    position: relative;
    display: block;
    left: 0;
    width: 10.32rem;
}

.world_card_pet {
    --entry-x: 1.35rem;
    --entry-rotate: 2deg;
    position: relative;
    display: block;
    left: .2rem;
    z-index: 3;
    width: 10.27rem;
    margin-top: -3.2rem;
    animation-delay: .14s !important;
}

.world_card_fashion {
    --entry-x: -1.15rem;
    --entry-rotate: -2deg;
    position: relative;
    display: block;
    left: .52rem;
    z-index: 4;
    width: 10.28rem;
    margin-top: -1.3rem;
    animation-delay: .28s !important;
}

.world_entry_hotspot {
    position: absolute;
    left: 5%;
    z-index: 6;
    width: 90%;
    background: transparent;
}

.world_entry_role {
    top: 0;
    height: 31%;
}

.world_entry_pet {
    top: 32%;
    height: 31%;
}

.world_entry_fashion {
    top: 64%;
    height: 29%;
}

.world_globe {
    position: absolute;
    /* top: 81.71875%; */
    top: 81.51875%;
    right: calc((100% - 56.25dvh) / 2);
    z-index: 7;
    /* width: 26.574074%; */
    width: 14.9479167dvh;
    height: 18.28125dvh;
    opacity: 1;
    filter: brightness(1.1) saturate(1.06) drop-shadow(0 0 .08rem rgba(255, 213, 101, .32));
    transition: filter .18s ease, transform .18s ease;
}

.swiper-slide-active .world_globe {
    animation: world-globe-enter .9s ease-out .3s both;
}

.world_card:active,
.world_globe:active {
    filter: brightness(1.2) saturate(1.16);
}

.world_globe:active,
.world_globe:focus-visible {
    animation: none;
    opacity: 1;
    filter: brightness(1.48) saturate(1.2) drop-shadow(0 0 .18rem rgba(255, 218, 99, .82));
    transform: scale(1.025);
}

@keyframes world-card-enter {
    0% {
        opacity: 0;
        transform: translate3d(var(--entry-x, 0), var(--entry-y, .4rem), 0) rotate(var(--entry-rotate, 0)) scale(.94);
    }

    72% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0) scale(1.015);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0) scale(1);
    }
}

@keyframes world-globe-enter {
    0% {
        opacity: 0;
        filter: brightness(1) saturate(1);
    }

    68% {
        opacity: 1;
        filter: brightness(1.38) saturate(1.16) drop-shadow(0 0 .15rem rgba(255, 210, 86, .68));
    }

    100% {
        opacity: 1;
        filter: brightness(1.1) saturate(1.06) drop-shadow(0 0 .08rem rgba(255, 213, 101, .32));
    }
}

@keyframes hero-title-enter {
    0% {
        opacity: 0;
        transform: translate3d(0, .48rem, 0) scale(.94);
    }

    72% {
        opacity: 1;
        transform: translate3d(0, -.04rem, 0) scale(1.015);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes section-title-enter {
    0% {
        opacity: 0;
        transform: translate3d(0, -.36rem, 0) scale(.92);
    }

    72% {
        opacity: 1;
        transform: translate3d(0, .03rem, 0) scale(1.02);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes panel-enter {
    0% {
        opacity: 0;
        transform: translate3d(0, .58rem, 0) scale(.965);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.world_detail_modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    width: 100%;
    max-width: 450px;
    height: 100dvh;
    min-height: 12rem;
    margin: 0 auto;
    overflow: hidden;
    opacity: 0;
    background: #0b1020 url(/images/dcsl_m/page-bg.png) no-repeat top center / auto 100%;
    transition: opacity .26s ease, visibility 0s linear .26s;
    visibility: hidden;
    pointer-events: none;
}

.world_detail_modal.is_open {
    opacity: 1;
    transition-delay: 0s;
    visibility: visible;
    pointer-events: auto;
}

.world_detail_modal:not(.is_open) *,
.world_detail_modal:not(.is_open) .world_gallery {
    visibility: hidden;
    pointer-events: none !important;
}

.world_detail_modal .world_stage {
    opacity: 0;
    transition: opacity .24s ease .08s;
}

.world_detail_modal.is_open .world_stage {
    opacity: 1;
}

.world_stage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9.08rem;
    height: 15.32rem;
    transform: translate(-50%, -50%);
}

.world_frame {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.world_close {
    position: absolute;
    top: .13rem;
    right: .1rem;
    z-index: 7;
    width: .76rem;
}

.world_arrow {
    position: absolute;
    top: 7.35rem;
    z-index: 7;
    width: .97rem;
    transition: transform .18s ease;
}

.world_arrow:active {
    transform: scale(.9);
}

.world_prev {
    left: -.83rem;
}

.world_next {
    right: -.83rem;
}

.world_viewport {
    position: absolute;
    top: .56rem;
    left: .62rem;
    z-index: 2;
    width: 7.84rem;
    height: 13.85rem;
    overflow: hidden;
}

.world_detail_modal.showing_map .world_viewport {
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.world_gallery {
    position: absolute;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}

.world_gallery.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.world_gallery .swiper-wrapper,
.world_gallery .swiper-slide {
    width: 100%;
    height: 100%;
}

.world_fallback_slide {
    position: relative;
    overflow: hidden;
}

.world_gallery_link {
    display: block;
}

.world_gallery_link > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.world_queue {
    position: absolute;
    top: 3.25rem;
    right: 1rem;
    z-index: 6;
    display: none;
    width: 1.22rem;
    max-height: 5.3rem;
    overflow-x: hidden;
    overflow-y: auto;
    flex-direction: column;
    gap: .12rem;
    scrollbar-width: none;
}

.world_queue::-webkit-scrollbar {
    display: none;
}

.world_queue.active {
    display: flex;
}

.world_queue_item {
    position: relative;
    width: 1.22rem;
    height: 1.22rem;
    padding: .15rem;
    flex: 0 0 1.22rem;
    background: var(--world-queue-default) no-repeat center / 100% 100%;
    opacity: .68;
    transition: opacity .22s ease, filter .22s ease, transform .18s ease;
}

.world_queue_item img {
    width: 100%;
    height: 100%;
    border-radius: .03rem;
    object-fit: cover;
}

.world_queue_item.active {
    padding: .17rem;
    background-image: var(--world-queue-active);
    opacity: 1;
    filter: brightness(1.08) saturate(1.08);
}

.world_queue_item:active {
    transform: scale(.92);
}

.world_intro {
    position: absolute;
    top: .34rem;
    left: 1.2rem;
    z-index: 4;
    width: 5.43rem;
}

.world_character {
    position: absolute;
    left: 50%;
    pointer-events: none;
}

.role_character {
    top: 1.3rem;
    width: 9.4rem;
    transform: translateX(calc(-50% + 0rem));
}

.pet_character {
    top: 1.3rem;
    width: 9.4rem;
    transform: translateX(calc(-50% + 0rem));
}

.fashion_character {
    top: 4.6rem;
    width: 9.4rem;
    transform: translateX(calc(-50% - 0rem));
}

.map_title {
    position: absolute;
    top: .2rem;
    left: .88rem;
    z-index: 5;
    width: 6.06rem;
}

.map_main {
    position: absolute;
    top: 0;
    left: -.1rem;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.world_nav {
    position: absolute;
    bottom: 1.62rem;
    left: .98rem;
    z-index: 6;
    width: 7.12rem;
    height: 2.06rem;
}

.world_nav_bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.world_nav_items {
    position: absolute;
    top: .35rem;
    right: .22rem;
    display: grid;
    width: 5.58rem;
    grid-template-columns: repeat(4, 1.22rem);
    gap: .16rem;
}

.world_nav_items button {
    position: relative;
    width: 1.22rem;
    height: 1.22rem;
    overflow: hidden;
    border: .04rem solid transparent;
    border-radius: .08rem;
    opacity: .55;
    transition: opacity .2s ease, border-color .2s ease, transform .18s ease;
}

.world_nav_items button.active {
    border-color: #f0c13d;
    opacity: 1;
}

.world_nav_items img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.world_detail_modal.showing_map .world_nav {
    display: none;
}

/* game feature and game information */
.feature_section {
    overflow-x: hidden;
    overflow-y: auto;
    /* background-image: url(/images/dcsl_m/feature-overlay.png), url(/images/dcsl_m/feature-bg.png); */
    background-image: url(/images/dcsl_m/feature-bg.png);
    background-position: top center, top center;
    background-repeat: no-repeat, no-repeat;
    background-size: auto 100%, auto 100%;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.feature_section::-webkit-scrollbar {
    display: none;
}

.feature_stage {
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 12rem;
    overflow: hidden;
}

.feature_title {
    position: absolute;
    top: 1.78rem;
    left: 50%;
    z-index: 5;
    display: flex;
    width: 7.2rem;
    height: 2.9rem;
    color: #ffc335;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1.2;
    opacity: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-shadow: -.04rem 0 #111, .04rem 0 #111, 0 -.04rem #111, 0 .04rem #111, 0 .08rem 0 #8c3f06;
    transform: translate3d(-50%, -.36rem, 0) scale(.92);
}

.swiper-slide-active .feature_title {
    animation: feature-title-enter .72s cubic-bezier(.16, 1, .3, 1) .08s both;
}

.feature_title img {
    width: 7.17rem;
    height: 2.9rem;
    margin: 0 auto;
    object-fit: contain;
}

.feature_gallery_wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, .62rem, 0) scale(.96);
}

.swiper-slide-active .feature_gallery_wrap {
    animation: feature-gallery-enter .86s cubic-bezier(.16, 1, .3, 1) .2s both;
}

.feature_carousel {
    position: absolute;
    top: 4.63rem;
    left: 50%;
    z-index: 3;
    width: 7.49rem;
    height: 12.4rem;
    overflow: visible;
    pointer-events: auto;
    transform: translateX(-50%);
}

.feature_carousel .swiper-wrapper {
    overflow: visible;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

.feature_carousel .swiper-slide {
    width: 7.49rem;
    height: 12.4rem;
    opacity: .36;
    filter: brightness(.35) saturate(.82);
    pointer-events: none;
    transition-property: transform, opacity, filter;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1), ease-out, ease-out;
}

.feature_carousel .swiper-slide-prev,
.feature_carousel .swiper-slide-next {
    z-index: 2;
    opacity: .62;
    filter: brightness(.44) saturate(.82);
    pointer-events: auto;
}

.feature_carousel .swiper-slide-active {
    z-index: 4;
    opacity: 1;
    filter: brightness(1) saturate(1);
    pointer-events: auto;
}

.feature_card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: center;
}

.feature_carousel.is_switching .swiper-slide-active .feature_card {
    animation: feature-card-focus .68s cubic-bezier(.16, 1, .3, 1) both;
}

.feature_carousel.is_switching .swiper-slide-prev .feature_card,
.feature_carousel.is_switching .swiper-slide-next .feature_card {
    animation: feature-card-recede .68s cubic-bezier(.16, 1, .3, 1) both;
}

.feature_card_back,
.feature_card_paper,
.feature_card_art {
    position: absolute;
    object-fit: contain;
}

.feature_card_back {
    top: .14rem;
    left: .42rem;
    width: 6.65rem;
    height: 11.8rem;
}

.feature_card_paper {
    inset: 0;
    width: 7.49rem;
    height: 12.4rem;
}

.feature_card_art {
    top: .2rem;
    left: .54rem;
    width: 6.55rem;
    height: 12rem;
    object-fit: contain;
}

.feature_arrow {
    position: absolute;
    top: 10.06rem;
    z-index: 5;
    width: .97rem;
    height: .83rem;
    pointer-events: auto;
    transition: transform .18s ease;
}

.feature_arrow img {
    width: 100%;
    height: 100%;
}

.feature_arrow:active {
    transform: scale(.9);
}

.feature_prev {
    left: .48rem;
}

.feature_next {
    right: .48rem;
}

@keyframes feature-title-enter {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -.36rem, 0) scale(.92);
    }

    72% {
        opacity: 1;
        transform: translate3d(-50%, .03rem, 0) scale(1.02);
    }

    100% {
        opacity: 1;
        transform: translate3d(-50%, 0, 0) scale(1);
    }
}

@keyframes feature-gallery-enter {
    0% {
        opacity: 0;
        transform: translate3d(0, .62rem, 0) scale(.96);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes feature-card-focus {
    0% {
        opacity: .58;
    }

    68% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes feature-card-recede {
    0% {
        opacity: 1;
    }

    100% {
        opacity: .72;
    }
}

.feature_section > .site_footer {
    position: relative;
    width: 100%;
}

/* article pages */
.article_page {
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    background: #f2e6cf;
}

.article_shell {
    min-height: 100dvh;
    padding-top: 4.35rem;
    background: url(/images/dcsl_m/article-sheet.png) no-repeat top center / 100% auto;
}

.article_page_title {
    position: absolute;
    top: 1.25rem;
}

.article_list_panel,
.article_detail_panel {
    position: relative;
    width: 10.8rem;
    min-height: 14.6rem;
    margin: 0 auto .8rem;
    padding: .42rem .47rem .65rem;
    background: transparent;
}

.article_tabs {
    width: 8.08rem;
    height: .72rem;
    margin: 0 auto .33rem;
}

.article_nav_row {
    display: flex;
    width: 9.86rem;
    margin: 0 auto .33rem;
    align-items: center;
    gap: .45rem;
    position: relative;
}

.article_nav_row .article_tabs {
    margin: 0;
    flex: 0 0 8.08rem;
    margin-left: 1rem;
}

.article_list_back {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 .82rem;
}

.article_cards li {
    position: relative;
    height: 3.65rem;
    margin-bottom: .33rem;
    overflow: hidden;
    background: url(/images/dcsl_m/news-card.png) no-repeat center / 100% 100%;
}

.article_cards li > a {
    display: grid;
    width: 100%;
    height: 100%;
    padding: .43rem .29rem .3rem .55rem;
    grid-template-columns: 1fr 4.62rem;
    gap: .3rem;
}

.article_card_text {
    position: relative;
    min-width: 0;
    color: #73636b;
}

.article_card_text h2 {
    position: relative;
    padding: 0 0 .16rem .34rem;
    overflow: hidden;
    color: #5e4856;
    font-size: .32rem;
    font-weight: 500;
    line-height: .55rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.article_card_text h2::before {
    position: absolute;
    top: .12rem;
    left: 0;
    width: .22rem;
    height: .22rem;
    content: "";
    background: var(--article-title-icon, url(/images/dcsl_m/article-title-icon.png)) no-repeat center / contain;
}

.article_card_text h2::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: .04rem;
    content: "";
    background: var(--article-title-line, url(/images/dcsl_m/article-title-line.png)) no-repeat left center / 100% .03rem;
}

.article_card_text p {
    display: -webkit-box;
    margin-top: .22rem;
    overflow: hidden;
    color: #94898a;
    font-size: .23rem;
    line-height: .42rem;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.article_card_text time {
    position: absolute;
    left: 0;
    bottom: .05rem;
    color: #a09a97;
    font-size: .23rem;
}

.article_card_thumb {
    width: 4.62rem;
    height: 2.6rem;
    margin-top: .1rem;
    overflow: hidden;
    border: .04rem solid #f1e8d4;
    border-radius: .18rem;
    box-shadow: .08rem .08rem 0 #d8d0c0;
}

.article_card_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article_pagination,
.article_pagination .scott {
    display: flex;
    min-height: .64rem;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    color: #565052;
    font-size: .2rem;
}

.article_pagination a,
.article_pagination span {
    display: flex;
    min-width: .58rem;
    height: .58rem;
    padding: 0 .12rem;
    align-items: center;
    justify-content: center;
    border: .02rem solid #777171;
    background: #fffdf5;
    font-size: 0.16rem;
}

.article_pagination .current,.article_pagination .active {
    border-color: #484447;
    color: #fff;
    background: #484447;
}

.article_pagination input {
    text-align: center;
    padding: 1px;
}

.article_detail_panel {
    width: 9.37rem;
    min-height: 13.2rem;
    padding: .36rem .5rem .8rem;
    background: transparent;
}

.article_detail_panel::before {
    position: absolute;
    top: 1.45rem;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    border-radius: .18rem;
    background: #f5edda var(--article-paper-bg, url(/images/dcsl_m/article-paper.png)) no-repeat center / 100% 100%;
}

.article_back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: .82rem;
    height: .74rem;
    color: #e7972a;
    font-family: Arial, sans-serif;
    font-size: .72rem;
    font-weight: 700;
    line-height: .5rem;
    text-align: center;
    transition: transform .18s ease;
}

.article_detail_panel .article_back {
    top: .35rem;
    left: .1rem;
}

.article_back img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.article_back:active {
    transform: scale(.92);
}

.article_detail_meta {
    position: relative;
    z-index: 1;
    display: flex;
    height: .72rem;
    margin-left: .6rem;
    padding: 0 .35rem;
    border-radius: .38rem;
    align-items: center;
    justify-content: space-between;
    color: #000;
    font-size: .3rem;
    background: linear-gradient(180deg, #ffdc61, #f2ac27);
    font-weight: bold;
}

.article_detail_path {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .1rem;
}

.article_detail_path img {
    width: .28rem;
    height: .28rem;
    flex: 0 0 .28rem;
    object-fit: contain;
}

.article_detail_path span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.article_detail_meta time {
    font-style: italic;
}

.article_detail_content {
    position: relative;
    z-index: 1;
    padding: 0.55rem .3rem 0;
}

.article_detail_content h1 {
    font-size: 0.5rem;
    text-align: center;
}

.article_body {
    color: #756d68;
    font-size: .27rem;
    line-height: 1.85;
    word-break: break-word;
    padding-right: .18rem;
    scrollbar-gutter: stable;
    overflow: auto;
    max-height: 10.5rem;
}

.article_body img,
.article_body video,
.article_body iframe {
    max-width: 100% !important;
    height: auto !important;
    margin: .22rem auto;
}

.article_body p {
    margin-bottom: .32rem;
}

.site_footer {
    padding: .42rem .34rem .52rem;
    color: #9ba0aa;
    font-size: .16rem;
    line-height: 1.9;
    text-align: center;
    background: rgba(5, 8, 16, .92);
}

.site_footer_logo {
    display: flex;
    width: 1.75rem;
    height: .85rem;
    margin: 0 auto .12rem;
    align-items: center;
    justify-content: center;
}

.site_footer_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.site_footer a {
    color: #c3c7ce;
}

@media (min-width: 451px) {
    html {
        font-size: 41.6667px !important;
    }
}

@media (max-height: 650px) and (orientation: portrait) {
    .world_stage {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(.92);
        transform-origin: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home_title,
    .home_collaboration,
    .home_popup_video_dialog,
    .section_title,
    .article_page_title,
    .news_board,
    .feature_gallery_wrap,
    .world_card {
        animation-delay: 0s !important;
        opacity: 1;
        transform: none;
    }

    .world_globe {
        animation: none !important;
        opacity: 1;
        filter: brightness(1.1) saturate(1.06) drop-shadow(0 0 .08rem rgba(255, 213, 101, .32));
    }

    .world_globe:active,
    .world_globe:focus-visible {
        opacity: 1;
    }

    .world_globe img {
        animation: none !important;
    }

    .feature_title {
        animation-delay: 0s !important;
        opacity: 1;
        transform: translateX(-50%);
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.__data__ {
	zoom: 0.3;
}

html.wechat-video-fix body.article_content_page .article_body video {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    margin: .22rem auto !important;
    background: #000;
    object-fit: contain !important;
}