/* 1920 design — --pc = 1% of layout width (wrap, min 1280) */
html {
    --pc: 1vw;
}

html, body {
    margin: 0;
    padding: 0;
    background: #140c08;
    color: #5c3a22;
    font-family: "Noto Serif", "Times New Roman", "Segoe UI", serif;
    min-width: 1280px;
}

a { text-decoration: none; color: inherit; }
img { display: block; border: 0; max-width: 100%; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
ul, li { margin: 0; padding: 0; list-style: none; }

.wrap {
    width: 100%;
    min-width: 1280px;
    position: relative;
    overflow: hidden;
    background: #140c08;
}

/* ----- nav ----- */
.head {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    min-width: 1280px;
    height: calc(4.22 * var(--pc));
    background: url("../images/pc/nav-bar.webp") no-repeat center / 100% 100%;
    z-index: 1000;
}

.head .logo {
    position: absolute;
    left: calc(2.4 * var(--pc));
    top: calc(0.15 * var(--pc));
    width: calc(8.28 * var(--pc));
    height: calc(5.78 * var(--pc));
    z-index: 2;
}

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

.menu {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    /* 文案→分隔符 19px + 分隔符 15px + 分隔符→文案 22px = 56px */
    gap: calc(2.91667 * var(--pc));
}

.menu a {
    position: relative;
    display: block;
    flex-shrink: 0;
    height: calc(3.333 * var(--pc));
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: none;
}

/* @2x 切图：槽位固定为选中态尺寸，悬停只换图不改宽，避免抖动 */
.nav-home {
    width: calc(5.46875 * var(--pc));
    background-image: url("../images/pc/nav-home.webp");
}
.nav-class {
    width: calc(5.41667 * var(--pc));
    background-image: url("../images/pc/nav-class.webp");
}
.nav-pay {
    width: calc(5.41667 * var(--pc));
    background-image: url("../images/pc/nav-pay.webp");
}
.nav-news {
    width: calc(4.11458 * var(--pc));
    background-image: url("../images/pc/nav-news.webp");
}
.nav-scene {
    width: calc(4.79167 * var(--pc));
    background-image: url("../images/pc/nav-scene.webp");
}
.nav-video {
    width: calc(4.47917 * var(--pc));
    background-image: url("../images/pc/nav-video.webp");
}
.nav-feature {
    width: calc(5.10417 * var(--pc));
    background-image: url("../images/pc/nav-feature.webp");
}

.nav-home.on,
.nav-home:hover {
    background-image: url("../images/pc/nav-home-on.webp");
}
.nav-class.on,
.nav-class:hover {
    background-image: url("../images/pc/nav-class-on.webp");
}
.nav-pay.on,
.nav-pay:hover {
    background-image: url("../images/pc/nav-pay-on.webp");
}
.nav-news.on,
.nav-news:hover {
    background-image: url("../images/pc/nav-news-on.webp");
}
.nav-scene.on,
.nav-scene:hover {
    background-image: url("../images/pc/nav-scene-on.webp");
}
.nav-video.on,
.nav-video:hover {
    background-image: url("../images/pc/nav-video-on.webp");
}
.nav-feature.on,
.nav-feature:hover {
    background-image: url("../images/pc/nav-feature-on.webp");
}

.menu a:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    /* 设计稿：标题右侧到分隔符 19px；分隔符 15×11 */
    width: calc(0.78125 * var(--pc));
    height: calc(0.57292 * var(--pc));
    margin-left: calc(0.98958 * var(--pc));
    margin-top: calc(-0.28646 * var(--pc));
    background: url("../images/pc/nav-divider.webp") no-repeat center / contain;
    pointer-events: none;
}

.head .sns {
    position: absolute;
    right: calc(2.1 * var(--pc));
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: calc(0.52 * var(--pc));
}

.head .sns a {
    width: calc(3.18 * var(--pc));
    height: calc(3.18 * var(--pc));
    background-repeat: no-repeat;
    background-size: contain;
}

.sns-fb { background-image: url("../images/pc/sns-1.webp"); }
.sns-yt { background-image: url("../images/pc/sns-2.webp"); }
.sns-dc { background-image: url("../images/pc/sns-3.webp"); }
.sns-group { background-image: url("../images/pc/sns-4.webp"); }

/* ----- home ----- */
.page-home {
    position: relative;
    width: 100%;
    height: calc(376.46 * var(--pc));
    background: url("../images/pc/bg.webp") no-repeat top center / 100% 100%;
}

.slogan {
    position: absolute;
    left: 50%;
    top: calc(33.6 * var(--pc));
    width: calc(75.83 * var(--pc));
    height: calc(12.71 * var(--pc));
    margin-left: calc(-37.92 * var(--pc));
    background: url("../images/pc/slogan.webp") no-repeat center / contain;
    z-index: 4;
}

.dl-row {
    position: absolute;
    left: 50%;
    top: calc(44 * var(--pc));
    width: calc(60.4 * var(--pc));
    margin-left: calc(-30.2 * var(--pc));
    display: grid;
    grid-template-columns: repeat(3, calc(19.53 * var(--pc)));
    column-gap: calc(0.9 * var(--pc));
    row-gap: calc(0.5 * var(--pc));
    z-index: 4;
}

.dl-row a {
    width: calc(19.53 * var(--pc));
    height: calc(5 * var(--pc));
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: transform 0.2s ease;
}

.dl-row a:hover { transform: translateY(calc(-0.2 * var(--pc))); }

.btn-gp { background-image: url("../images/pc/btn-1.webp"); }
.btn-ios { background-image: url("../images/pc/btn-2.webp"); }
.btn-apk { background-image: url("../images/pc/btn-3.webp"); }
.btn-bs { background-image: url("../images/pc/btn-4.webp"); }
.btn-ld { background-image: url("../images/pc/btn-5.webp"); }
.btn-pc { background-image: url("../images/pc/btn-6.webp"); }

.sec-title {
    position: absolute;
    left: 50%;
    width: calc(34.22 * var(--pc));
    height: calc(7.6 * var(--pc));
    margin-left: calc(-17.11 * var(--pc));
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 5;
}

.title-news { top: calc(59.5 * var(--pc)); background-image: url("../images/pc/title-news.webp"); }
.title-class { top: calc(98.4 * var(--pc)); background-image: url("../images/pc/title-class.webp"); }
.title-gallery { top: calc(167.8 * var(--pc)); background-image: url("../images/pc/title-gallery.webp"); }
.title-feature { top: calc(228.4 * var(--pc)); background-image: url("../images/pc/title-feature.webp"); }
.title-video { top: calc(294.6 * var(--pc)); background-image: url("../images/pc/title-video.webp"); }

.news-board {
    position: absolute;
    left: 50%;
    top: calc(70 * var(--pc));
    width: calc(88.18 * var(--pc));
    height: calc(27.92 * var(--pc));
    margin-left: calc(-44.09 * var(--pc));
    background: url("../images/pc/news-board.webp") no-repeat center / 100% 100%;
    z-index: 4;
    overflow: visible;
}

.news-board .news-banner {
    position: absolute;
    left: 9.6%;
    top: 14%;
    width: 36.6%;
    height: 68%;
    max-width: none;
    object-fit: cover;
    border-radius: calc(0.45 * var(--pc));
    z-index: 2;
}

.news-tabs {
    position: absolute;
    left: 52.4%;
    top: 4.8%;
    width: 40%;
    height: 17%;
    display: flex;
    align-items: center;
    gap: calc(2.5 * var(--pc));
    z-index: 8;
    overflow: visible;
}

.news-tabs button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background: none;
    flex-shrink: 0;
    z-index: 2;
    cursor: pointer;
}

/* 1920 设计稿未选中尺寸（px → calc(n * var(--pc)), n = px / 19.2） */
.news-tabs [data-category="guide"]:not(.on) {
    width: calc(6.45833 * var(--pc));
    height: calc(1.45833 * var(--pc));
}

.news-tabs [data-category="news"]:not(.on) {
    width: calc(4.0625 * var(--pc));
    height: calc(1.19792 * var(--pc));
}

.news-tabs [data-category="system"]:not(.on) {
    width: calc(5.625 * var(--pc));
    height: calc(1.45833 * var(--pc));
}

.news-tabs button .tab-off {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
}

.news-tabs button .tab-sel {
    display: none;
    pointer-events: none;
}

.news-tabs button.on {
    width: calc(10.57 * var(--pc));
    height: calc(3.13 * var(--pc));
}

.news-tabs button.on .tab-off {
    display: none;
}

.news-tabs button.on .tab-sel {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.news-plus {
    width: calc(2.15 * var(--pc));
    height: calc(2.15 * var(--pc));
    margin-left: auto;
    background: url("../images/pc/plus.webp") no-repeat center / contain;
    flex-shrink: 0;
}

.news-side {
    position: absolute;
    left: 52.4%;
    top: 26%;
    width: 40%;
    height: 45%;
    z-index: 2;
}

.news-side a {
    display: flex;
    align-items: center;
    height: 25%;
    box-sizing: border-box;
    padding: 0 calc(0.3 * var(--pc)) 0 0;
    color: #6a4a2a;
    font-size: calc(0.94 * var(--pc));
}

.news-side a:hover { color: #c45a12; }

.news-side .tit {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: calc(0.8 * var(--pc));
}

.news-side .date {
    flex-shrink: 0;
    color: #9a7a58;
}

.news-more {
    display: none;
    position: absolute;
    right: 4.2%;
    bottom: 6.5%;
    z-index: 3;
    font-size: calc(0.83 * var(--pc));
    color: #c45a12;
    font-weight: 700;
}

.news-more:hover { text-decoration: underline; }

/* class */
.class-info {
    position: absolute;
    left: calc(9.64 * var(--pc));
    top: calc(112.14 * var(--pc));
    width: calc(31.46 * var(--pc));
    height: auto;
    max-width: none;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

.class-info.on {
    opacity: 1;
    z-index: 6;
}

/* 人物舞台：只包职业区，右侧裁死在按钮列左侧，避免立绘盖住 class-icons */
.class-char-stage {
    position: absolute;
    left: 0;
    top: calc(100 * var(--pc));
    width: calc(75.5 * var(--pc));
    height: calc(68 * var(--pc));
    overflow: hidden;
    z-index: 4;
    pointer-events: none;
}

.class-char {
    position: absolute;
    left: calc(38.07 * var(--pc));
    top: calc(12.76 * var(--pc)); /* 相对 stage，原 page top 112.76 - 100 */
    width: auto;
    height: auto;
    max-width: calc(32 * var(--pc)) !important;
    object-fit: contain;
    object-position: center bottom;
    z-index: 1;
    opacity: 0;
    pointer-events: none !important;
}

/* 按切图实际像素定宽；sword/blade 原图像素较小按 1x，其余按 @2x 折半 */
.class-char.sword {
    left: calc(35.07 * var(--pc));
    top: calc(10.76 * var(--pc));
    width: calc(30.41667 * var(--pc)); /* 584 */
}

.class-char.blade {
    left: calc(40.07 * var(--pc));
    top: calc(10.06 * var(--pc));
    width: calc(29.375 * var(--pc)); /* 564 */
}

.class-char.doctor {
    left: calc(38.07 * var(--pc));
    top: calc(11.4 * var(--pc));
    width: calc(24.53125 * var(--pc)); /* 942 */
}

.class-char.spear {
    left: calc(39.07 * var(--pc));
    top: calc(9.76 * var(--pc));
    width: calc(26.19792 * var(--pc)); /* 1006 */
}

.class-char.bow {
    left: calc(39.07 * var(--pc));
    top: calc(7.7 * var(--pc));
    width: calc(26.09375 * var(--pc)); /* 1002 */
}

.class-char.on {
    opacity: 1;
}

.class-icons {
    position: absolute;
    left: calc(78 * var(--pc));
    top: calc(117.1875 * var(--pc));
    width: calc(5.46875 * var(--pc));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: calc(1.04167 * var(--pc));
    z-index: 300;
    overflow: visible;
    visibility: visible !important;
    opacity: 1 !important;
    animation: none;
    transform: translateZ(0);
    pointer-events: auto;
    isolation: isolate;
}

.class-icon {
    flex: 0 0 calc(5.46875 * var(--pc));
    width: calc(5.46875 * var(--pc));
    height: calc(5.46875 * var(--pc));
    padding: 0;
    margin: 0;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    pointer-events: auto;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.class-icon[data-class="sword"] { background-image: url("../images/pc/class-icon-1.webp"); }
.class-icon[data-class="blade"] { background-image: url("../images/pc/class-icon-2.webp"); }
.class-icon[data-class="doctor"] { background-image: url("../images/pc/class-icon-3.webp"); }
.class-icon[data-class="spear"] { background-image: url("../images/pc/class-icon-4.webp"); }
.class-icon[data-class="bow"] { background-image: url("../images/pc/class-icon-5.webp"); }

.class-icon[data-class="sword"].on { background-image: url("../images/pc/class-thumb-1.webp"); }
.class-icon[data-class="blade"].on { background-image: url("../images/pc/class-thumb-2.webp"); }
.class-icon[data-class="doctor"].on { background-image: url("../images/pc/class-thumb-3.webp"); }
.class-icon[data-class="spear"].on { background-image: url("../images/pc/class-thumb-4.webp"); }
.class-icon[data-class="bow"].on { background-image: url("../images/pc/class-thumb-5.webp"); }

/* gallery cards on scroll — 1920 稿 223×333，W 形错落（px / 19.2 → * var(--pc)） */
.gallery-cards {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.gallery-cards img {
    position: absolute;
    width: calc(11.614583 * var(--pc));
    height: calc(17.34375 * var(--pc));
    object-fit: contain;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.2s ease;
}

.gallery-cards img:nth-child(1) {
    left: calc(20.041667 * var(--pc));
    top: calc(184.114583 * var(--pc));
}

.gallery-cards img:nth-child(2) {
    left: calc(32.65625 * var(--pc));
    top: calc(200.7125 * var(--pc));
}

.gallery-cards img:nth-child(3) {
    left: calc(44.270833 * var(--pc));
    top: calc(182.125 * var(--pc));
}

.gallery-cards img:nth-child(4) {
    left: calc(57.8 * var(--pc));
    top: calc(194.0 * var(--pc));
}

.gallery-cards img:nth-child(5) {
    left: calc(70.729167 * var(--pc));
    top: calc(179.114583 * var(--pc));
}

.gallery-cards img:hover { transform: translateY(calc(-0.4 * var(--pc))); }

.gallery-plus {
    display: none;
    position: absolute;
    left: calc(83.2 * var(--pc));
    top: calc(189.6 * var(--pc));
    width: calc(2.76 * var(--pc));
    height: calc(2.76 * var(--pc));
    background: url("../images/pc/plus.webp") no-repeat center / contain;
    z-index: 6;
}

/* feature */
.feature-box {
    position: absolute;
    left: calc(21.46 * var(--pc));
    top: calc(247.17 * var(--pc));
    width: calc(58.18 * var(--pc));
    height: calc(32.24 * var(--pc));
    z-index: 5;
}

.feature-box .swiper-container {
    overflow: hidden;
    border-radius: calc(0.5 * var(--pc));
}

.feature-box .swiper-container,
.feature-box .swiper-wrapper,
.feature-box .swiper-slide {
    width: 100%;
    height: 100%;
}

.feature-box .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-prev,
.feature-next {
    position: absolute;
    top: 50%;
    width: calc(7.14 * var(--pc));
    height: calc(7.08 * var(--pc));
    margin-top: calc(-3.54 * var(--pc));
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 6;
}

.feature-prev {
    left: calc(-12 * var(--pc));
    background-image: url("../images/pc/arrow-r.webp");
}

.feature-next {
    right: calc(-12 * var(--pc));
    background-image: url("../images/pc/arrow-l.webp");
}

.feature-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-3.8 * var(--pc));
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(0.55 * var(--pc));
    z-index: 6;
}

/* 1920 稿选中 42×41（px / 19.2） */
.feature-dots span {
    width: calc(2.1875 * var(--pc));
    height: calc(2.135417 * var(--pc));
    background: url("../images/pc/class-icon-off.webp") no-repeat center / contain;
    cursor: pointer;
}

.feature-dots span.on {
    background-image: url("../images/pc/class-icon-on.webp");
}

/* video */
.video-box {
    position: absolute;
    left: calc(19.79 * var(--pc));
    top: calc(313 * var(--pc));
    width: calc(61.15 * var(--pc));
    height: calc(31.82 * var(--pc));
    overflow: hidden;
    border-radius: calc(0.4 * var(--pc));
    z-index: 5;
}

.video-box .video-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(9.9 * var(--pc));
    height: calc(10 * var(--pc));
    margin: calc(-5 * var(--pc)) 0 0 calc(-4.95 * var(--pc));
    background: url("../images/pc/play.webp") no-repeat center / contain;
    z-index: 6;
}

.video-player {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.video-box.playing .video-cover,
.video-box.playing .play-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.video-box.playing .video-player {
    z-index: 7;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.site-footer {
    position: relative;
    width: 100%;
    height: calc(22.65625 * var(--pc));
    /* 435 / 19.2 — pc/footer.webp 1920x435 */
    background: #000 url("../images/pc/footer.webp") no-repeat center / 100% 100%;
}

.site-footer img { display: none; }

.footer-links {
    position: absolute;
    left: calc(34.0625 * var(--pc));
    /* 654 */
    top: calc(1.77083 * var(--pc));
    /* 34 */
    width: calc(32.1875 * var(--pc));
    /* 618 */
    height: calc(1.66667 * var(--pc));
    /* 32 */
    z-index: 5;
    display: flex;
}

.footer-link {
    height: 100%;
    cursor: pointer;
}

.footer-link:nth-child(1) {
    flex: 194;
}

.footer-link:nth-child(2) {
    flex: 272;
}

.footer-link:nth-child(3) {
    flex: 152;
}

/* lightbox */
.lightbox {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 400;
}

.lightbox .mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.78);
}

.lightbox .pic {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 62vw;
    height: auto;
    max-height: 80vh;
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: 2;
}

.lightbox .close {
    position: absolute;
    right: 4vw;
    top: 3vw;
    width: 5.21vw;
    height: 5.52vw;
    background: url("../images/pc/lightbox-x.webp") no-repeat center / contain;
    z-index: 3;
}

.lightbox .lb-prev,
.lightbox .lb-next {
    position: absolute;
    top: 50%;
    width: 7.14vw;
    height: 7.08vw;
    margin-top: -3.54vw;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 3;
}

.lightbox .lb-prev { left: 4vw; background-image: url("../images/pc/arrow-r.webp"); }
.lightbox .lb-next { right: 4vw; background-image: url("../images/pc/arrow-l.webp"); }

.lightbox.is-video .lb-prev,
.lightbox.is-video .lb-next { display: none; }

/* ----- list / detail ----- */
.page-inner {
    position: relative;
    width: 100%;
    height: calc(114.58 * var(--pc));
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: calc(33.6 * var(--pc)) calc(13.4 * var(--pc)) 0;
}

.page-list { background-image: url("../images/pc/list-bg.webp"); }
.page-detail {
    background-image: url("../images/pc/detail-bg.webp");
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.list-tabs {
    display: flex;
    align-items: flex-end;
    gap: calc(2.4 * var(--pc));
    padding: 0 calc(0.2 * var(--pc)) calc(0.7 * var(--pc));
    border-bottom: 1px dashed rgba(139, 105, 70, 0.45);
}

.list-tabs a {
    font-size: calc(1.46 * var(--pc));
    line-height: calc(1.8 * var(--pc));
    color: #5a4a3a;
    padding-bottom: calc(0.35 * var(--pc));
    border-bottom: 1px dashed transparent;
}

.list-tabs a.on {
    color: #e56a12;
    font-weight: 700;
    border-bottom-color: #e56a12;
}

.news-list {
    margin-top: calc(0.4 * var(--pc));
}

.news-list li a {
    display: flex;
    align-items: center;
    height: calc(3.54 * var(--pc));
    padding: 0 calc(1.1 * var(--pc)) 0 calc(0.4 * var(--pc));
    box-sizing: border-box;
    border-bottom: 1px dashed rgba(160, 140, 110, 0.55);
}

.page-list .news-list li a {
    border-radius: 0;
    background: transparent;
}

.page-list .news-list li:nth-child(odd) a {
    background: transparent;
}

.page-list .news-list li a:hover {
    background: rgba(240, 170, 90, 0.28);
}

.news-list .tag {
    width: calc(6.25 * var(--pc));
    height: calc(1.41 * var(--pc));
    background: url("../images/pc/tag-notice.webp") no-repeat center / contain;
    flex-shrink: 0;
    margin-right: calc(1 * var(--pc));
}

/* PC 列表：文字标签「Công bố」，悬停变橙 */
.page-list .news-list .tag {
    width: auto;
    min-width: calc(5.2 * var(--pc));
    height: calc(1.56 * var(--pc));
    padding: 0 calc(0.7 * var(--pc));
    margin-right: calc(1.1 * var(--pc));
    background: #9a9088;
    border-radius: calc(0.78 * var(--pc));
    font-size: calc(0.83 * var(--pc));
    line-height: calc(1.56 * var(--pc));
    color: #fff;
    text-align: center;
    box-sizing: border-box;
}

.page-list .news-list .tag::before {
    content: "Công bố";
}

.page-list .news-list li a:hover .tag {
    background: #e56a12;
}

.news-list .tit {
    flex: 1;
    font-size: calc(1.04 * var(--pc));
    color: #4a4a4a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-list .date {
    width: calc(5.2 * var(--pc));
    text-align: right;
    font-size: calc(0.94 * var(--pc));
    color: #8a8a8a;
    flex-shrink: 0;
}

.page {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(0.9 * var(--pc));
    margin: calc(2.4 * var(--pc)) auto 0;
}

.page-nums {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(0.45 * var(--pc));
}

.page .page-prev,
.page .page-next {
    width: calc(6.09 * var(--pc));
    height: calc(1.98 * var(--pc));
    font-size: 0;
    background-repeat: no-repeat;
    background-size: contain;
    border: 0;
    background-color: transparent;
    border-radius: 0;
}

.page .page-prev { background-image: url("../images/pc/page-prev.webp"); }
.page .page-next { background-image: url("../images/pc/page-next.webp"); }

.page-nums a,
.page-nums span {
    min-width: calc(1.98 * var(--pc));
    height: calc(1.98 * var(--pc));
    line-height: calc(1.88 * var(--pc));
    text-align: center;
    font-size: calc(0.83 * var(--pc));
    color: #7a7a7a;
    border-radius: 50%;
    border: 1px solid #c8c8c8;
    background: #fff;
    box-sizing: border-box;
}

.page-nums span.cur {
    background: #fff;
    border-color: #e56a12;
    color: #e56a12;
}

/* detail */
.article-head {
    text-align: center;
}

.article-head h2 {
    margin: 0 0 calc(1.2 * var(--pc));
    font-size: calc(1.88 * var(--pc));
    color: #2b2116;
    font-weight: 700;
}

.article-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(0.6 * var(--pc));
    font-size: calc(0.94 * var(--pc));
    color: #7a5a38;
    padding-bottom: calc(0.9 * var(--pc));
    border-bottom: 1px solid rgba(139, 105, 70, 0.35);
}

.article-meta .back {
    width: calc(2.5 * var(--pc));
    height: calc(2.5 * var(--pc));
    background: url("../images/pc/btn-back.webp") no-repeat center / contain;
}

.article {
    width: calc(72.9 * var(--pc));
    margin: calc(1.6 * var(--pc)) auto 0;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: calc(1.2 * var(--pc));
    padding-bottom: calc(2.5 * var(--pc));
    box-sizing: border-box;
    font-size: calc(0.94 * var(--pc));
    line-height: calc(1.7 * var(--pc));
    color: #6a4e32;
}

.article::-webkit-scrollbar {
    width: calc(0.52 * var(--pc));
}

.article::-webkit-scrollbar-thumb {
    background: rgba(139, 105, 70, 0.45);
    border-radius: calc(0.26 * var(--pc));
}

.article::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.25);
    border-radius: calc(0.26 * var(--pc));
}

.article img {
    width: 100%;
    margin: calc(1.4 * var(--pc)) 0 0;
}

.article p { margin: 0 0 calc(0.7 * var(--pc)); }