/* 希望OL 菲尼克斯新区专题页 v=2026110401 */

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #5eb3f0;
    text-align: center;
}

body {
    font-size: 16px;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}

body.bg-home {
    background: #5eb3f0 url(../images/bg.png?v=2026101309) center top no-repeat;
    background-size: cover;
}

/* 分页背景 */
body.bg-other {
    background: #5eb3f0 url(../images/bg_page.png?v=2026101309) center top no-repeat;
    background-size: cover;
}

/* 首页背景视频：盖在背景图之上、内容之下；未就绪时透明，露出原背景图 */
.home-bg-video {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
    display: none;
    pointer-events: none;
}

body.bg-home .home-bg-video {
    display: block;
}

body.bg-other .home-bg-video {
    display: none;
}

.home-bg-video video {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    filter: alpha(opacity=0);
}

.home-bg-video.is-ready video {
    opacity: 1;
    filter: alpha(opacity=100);
}

/* 设计稿画布 1920×1080，由 auto.js 按分辨率等比缩放 */
.wrap {
    width: 1920px;
    height: 1080px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}

.wrap-scale {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.page {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    min-width: 0;
    overflow: hidden;
}

.page-main,
.page-header {
    position: relative;
    z-index: 1;
}

/* ========== 首页 ========== */
#home {
    overflow-y: hidden;
}

#home .page-main {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

/* 首页标题字：PC 与视频背景 slogan 重叠，PC 端隐藏；移动端仍显示 */
#home .home-title {
    display: none;
    position: absolute;
    left: 50%;
    top: 48px;
    margin-left: -960px;
    width: 1920px;
    z-index: 2;
}

#home .home-title img {
    display: block;
    width: 1920px;
    height: auto;
    max-width: none;
    margin: 0 auto;
}

/* 首页两个按钮：首页按钮切图 */
#home .btn-handler {
    position: absolute;
    left: 50%;
    bottom: 100px;
    margin-left: -400px;
    width: 800px;
    height: 152px;
    text-align: center;
    z-index: 2;
    font-size: 0;
}

#home .btn-enter {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 375px;
    height: 152px;
    margin: 0 12px;
    background: url(../images/btn_home.png?v=2026101309) center center no-repeat;
    background-size: 100% 100%;
    position: relative;
    text-decoration: none;
    vertical-align: top;
    cursor: pointer;
}

/* 首页按钮文字：微软雅黑 Bold 40.11 / #691b09；整体略向下 */
#home .btn-enter-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-weight: bold;
    font-size: 40.11px;
    color: #691b09;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 2px;
    padding-top: 58px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#home .btn-enter:hover {
    filter: alpha(opacity=90);
    opacity: 0.9;
}

/* ========== 返回键（随 wrap 缩放，不用 fixed） ========== */
.to-home {
    display: none;
    position: absolute;
    z-index: 99;
    right: 46px;
    top: 46px;
    width: 114px;
    height: 116px;
}

.to-home img {
    display: block;
    width: 114px;
    height: 116px;
}

.to-home:hover {
    filter: alpha(opacity=90);
    opacity: 0.9;
}

/* ========== 分页（内容页，按 1920 设计稿排布） ========== */
.detail-page .page-main {
    width: 1920px;
    margin: 24px 0 0;
    position: relative;
}

/* 分页大标题：微软雅黑 Bold 62.25，反向上下渐变 ffffff-ff93a9-ec4d60，描边外部白 5px */
.page-main-title-wrap {
    text-align: center;
    margin: 0 auto;
    height: 88px;
    line-height: 88px;
    position: relative;
    z-index: 2;
}

.page-main-title {
    display: inline-block;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-weight: bold;
    font-size: 62.25px;
    line-height: 1.2;
    color: #ffffff;
    /* 反向上下渐变：顶白 → 中粉 → 底红 */
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #ff93a9 50%, #ec4d60 100%);
    background-image: -ms-linear-gradient(top, #ffffff 0%, #ff93a9 50%, #ec4d60 100%);
    background-image: linear-gradient(180deg, #ffffff 0%, #ff93a9 50%, #ec4d60 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 5px #ffffff;
    filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff, Strength=5);
    text-shadow:
        -5px -5px 0 #fff,
        -4px -5px 0 #fff,
        -3px -5px 0 #fff,
        -2px -5px 0 #fff,
        -1px -5px 0 #fff,
         0px -5px 0 #fff,
         1px -5px 0 #fff,
         2px -5px 0 #fff,
         3px -5px 0 #fff,
         4px -5px 0 #fff,
         5px -5px 0 #fff,
        -5px  5px 0 #fff,
        -4px  5px 0 #fff,
        -3px  5px 0 #fff,
        -2px  5px 0 #fff,
        -1px  5px 0 #fff,
         0px  5px 0 #fff,
         1px  5px 0 #fff,
         2px  5px 0 #fff,
         3px  5px 0 #fff,
         4px  5px 0 #fff,
         5px  5px 0 #fff,
        -5px  0px 0 #fff,
         5px  0px 0 #fff,
        -5px -3px 0 #fff,
        -5px -1px 0 #fff,
        -5px  1px 0 #fff,
        -5px  3px 0 #fff,
         5px -3px 0 #fff,
         5px -1px 0 #fff,
         5px  1px 0 #fff,
         5px  3px 0 #fff;
}

/* SVG 大标题（IE10 上下渐变+描边更稳） */
.page-main-title-svg {
    display: block;
    margin: 0 auto;
    width: 520px;
    height: 90px;
    overflow: visible;
}

.page-main-title-svg text {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-weight: bold;
    font-size: 62.25px;
}

/* 长标题（如「旧域功勋，荣礼相迎」）加宽，字号略收 */
.page-main-title-svg-long {
    width: 780px;
    max-width: 100%;
}

.page-main-title-svg-long text {
    font-size: 48px;
}

.artical-wrap .page-main-title-svg-long {
    width: 100%;
    max-width: 780px;
    height: 96px;
}

/* 内容布局：分页框略回调向左；左侧留给导航 */
.detail-layout {
    width: 1480px;
    margin: 0 40px 0 340px;
    position: relative;
    text-align: left;
}

.detail-layout:after {
    content: "";
    display: table;
    clear: both;
}

/* 分页左侧按钮：整体贴左；按切图 232×97 原比例；上下留白居中 */
.sider {
    display: none;
    position: absolute;
    left: 36px;
    /* 8×97 + 7×4 = 804；画布 1080，上下留白一致 → top≈138 */
    top: 138px;
    margin-left: 0;
    width: 232px;
    z-index: 50;
}

/* PC 不显示左右切换箭头 */
.sider-arrow {
    display: none;
}

.sider-viewport {
    width: 100%;
    overflow: visible;
}

.sider ul,
.sider-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sider li {
    margin-bottom: 4px;
}

.sider .sider-list a {
    display: block;
    width: 232px;
    height: 97px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: url(../images/btn_enter.png?v=2026101309) center center no-repeat;
    background-size: 232px 97px;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-weight: bold;
    font-size: 25.62px;
    color: #f5d4ec;
    /* 文字落在华夫饼主体区（略偏下，避开顶部糖霜装饰） */
    line-height: 1.2;
    padding: 34px 12px 0;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    /* 描边外部 #995a2f 3px（text-shadow 兼容 IE10） */
    text-shadow:
        -3px -3px 0 #995a2f,
        -2px -3px 0 #995a2f,
        -1px -3px 0 #995a2f,
         0px -3px 0 #995a2f,
         1px -3px 0 #995a2f,
         2px -3px 0 #995a2f,
         3px -3px 0 #995a2f,
        -3px  3px 0 #995a2f,
        -2px  3px 0 #995a2f,
        -1px  3px 0 #995a2f,
         0px  3px 0 #995a2f,
         1px  3px 0 #995a2f,
         2px  3px 0 #995a2f,
         3px  3px 0 #995a2f,
        -3px  0px 0 #995a2f,
         3px  0px 0 #995a2f,
        -3px -2px 0 #995a2f,
        -3px -1px 0 #995a2f,
        -3px  1px 0 #995a2f,
        -3px  2px 0 #995a2f,
         3px -2px 0 #995a2f,
         3px -1px 0 #995a2f,
         3px  1px 0 #995a2f,
         3px  2px 0 #995a2f;
}

.sider .sider-list a:hover,
.sider .sider-list a.active {
    color: #ffffff;
    filter: alpha(opacity=95);
    opacity: 0.95;
}

/* 侧栏长文案两行显示 */
.sider .sider-list a.sider-btn-long {
    white-space: normal;
    padding-top: 22px;
    line-height: 1.2;
    font-size: 22px;
}

/* 右侧分页弹窗框：整体放大约 1340×910；本轮略向左回调 */
.artical-wrap {
    width: 1340px;
    margin-left: 40px;
    min-height: 910px;
    height: 910px;
    background: url(../images/frame_panel.png?v=2026101309) center top no-repeat;
    background-size: 100% 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 110px 120px;
}

/*
 * 大标题置于框架上方黄色华夫区域
 * 切图 1308×889，黄框约 y=96~201；按宽 1340 缩放后 top≈98、高≈108
 */
.artical-wrap .page-main-title-wrap {
    position: absolute;
    left: 160px;
    right: 160px;
    top: 98px;
    height: 108px;
    line-height: 108px;
    margin: 0;
    z-index: 3;
}

.artical-wrap .page-main-title-svg {
    width: 600px;
    height: 96px;
}

.artical {
    padding: 360px 32px 24px;
    color: #fff8ee;
    line-height: 1.85;
    text-align: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
}

.artical-txt {
    max-height: 420px;
    overflow-y: auto;
    font-size: 22px;
    font-weight: bold;
    color: #fff8ee;
}

.artical-txt p {
    margin-bottom: 18px;
}

.artical-txt a {
    color: #ffe0b0;
    text-decoration: underline;
}

.artical-txt img {
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.reward-showcase {
    margin: 10px 0 24px;
    text-align: center;
    font-size: 0;
}

.reward-showcase img {
    display: inline-block;
    vertical-align: top;
    width: 256px;
    max-width: 100%;
    margin: 0 8px 16px;
}

.event-time {
    color: #ffe0b0;
    font-weight: bold;
    font-size: 24px;
}

/* 弹框内容图片约束 */
.dialog-body img,
.app-dialog img,
.mod-dialog img {
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 滚动条 */
div::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

div::-webkit-scrollbar-thumb {
    background: rgba(153, 90, 47, 0.45);
}

div::-webkit-scrollbar-track {
    background: rgba(245, 212, 236, 0.4);
}

div {
    scrollbar-color: rgba(153, 90, 47, 0.45) rgba(245, 212, 236, 0.4);
    scrollbar-width: thin;
}

/* ========== 移动端（竖版切图：bg_m / frame_panel_m；导航在框架上方，常规显示 2 个 + 左右切换） ========== */
@media screen and (max-width: 768px) {
    html, body {
        overflow: auto;
        height: auto;
        min-height: 100%;
    }

    body.bg-home {
        background: #5eb3f0 url(../images/bg_m.png?v=2026101310) center top no-repeat;
        background-size: cover;
        background-attachment: scroll;
    }

    body.bg-other {
        background: #5eb3f0 url(../images/bg_m.png?v=2026101310) center top no-repeat;
        background-size: cover;
        background-attachment: scroll;
    }

    /* 移动端不显示首页背景视频，只用静态背景图 */
    .home-bg-video,
    body.bg-home .home-bg-video {
        display: none !important;
    }

    .wrap,
    .wrap-scale {
        width: 100%;
        height: auto;
        overflow: visible;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .page {
        position: static;
        width: 100%;
        height: auto;
        min-width: 100%;
        overflow: visible;
    }

    /* 首页 */
    #home {
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
        order: 0;
    }

    #home .page-main {
        width: 100%;
        height: 100vh;
        min-height: 640px;
        overflow: hidden; /* 裁切标题放大后两侧透明溢出，避免横向滚动 */
    }

    /* 主标题放大：切图左右透明留白约 14.7%/12.5%，放大至勺/叉贴近屏左右缘 */
    #home .home-title {
        display: block; /* 移动端保留主标题，不受 PC 隐藏影响 */
        left: 50%;
        margin-left: -70.16%; /* 抵消左侧透明区，使勺子贴左缘 */
        width: 137.2%; /* 1920/1399，内容区（勺到叉）铺满视口宽 */
        top: 5.2%;
        padding: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    #home .home-title img {
        width: 100%;
        max-width: none;
    }

    /* 双按钮：效果图各约 28.1vw 宽、高按切图 375×152，间距约 11vw，底距约 14% */
    #home .btn-handler {
        left: 50%;
        margin-left: -33.7vw;
        bottom: 14%;
        width: 67.4vw;
        height: 11.4vw;
        padding: 0;
        text-align: center;
        font-size: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    #home .btn-enter {
        width: 28.1vw;
        max-width: none;
        height: 11.4vw;
        margin: 0;
        background: url(../images/btn_home.png?v=2026101312) center center no-repeat;
        background-size: 100% 100%;
        vertical-align: top;
    }

    #home .btn-enter + .btn-enter {
        margin-left: 11.2vw;
    }

    #home .btn-enter-text {
        font-size: 3.1vw; /* 随按钮宽度缩放，约合切图 40.11 比例 */
        padding-top: 4.3vw; /* 约 38% 按钮高度，落在黄色主体区 */
        line-height: 1.15;
        letter-spacing: 0.5px;
    }

    .to-home {
        position: fixed;
        right: 12px;
        top: 12px;
        width: 72px;
        height: 73px;
        z-index: 99;
    }

    .to-home img {
        width: 72px;
        height: 73px;
    }

    /* 分页：导航在上、框架在下 */
    .detail-page {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }

    .detail-page .page-main {
        width: 100%;
        margin: 0;
        padding: 0 0 40px;
    }

    .page-main-title {
        font-size: 36px;
        -webkit-text-stroke: 3px #ffffff;
    }

    .page-main-title-svg {
        width: 92%;
        height: 56px;
    }

    .page-main-title-svg text {
        font-size: 52px;
    }

    .detail-layout {
        width: 100%;
        margin: 0;
        padding: 0 10px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    /* 导航条：置于框架上方；整体下移给返回键留空；常规显示 2 个 */
    .sider {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        position: relative;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
        /* 返回键约 top:12 + 高73，整体下移避免遮挡 */
        margin: 96px auto 10px;
        width: 100%;
        max-width: 720px;
        padding: 0 6px;
        z-index: 80;
        background: none;
        white-space: normal;
        overflow: visible;
        text-align: center;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .sider.sider-open {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .sider-arrow {
        display: block;
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 36px;
        height: 68px;
        margin: 0 4px;
        position: relative;
        cursor: pointer;
        text-decoration: none;
        background: none;
        -webkit-tap-highlight-color: transparent;
    }

    .sider-arrow:before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0;
        height: 0;
        margin-top: -14px;
        border-style: solid;
    }

    .sider-prev:before {
        margin-left: -10px;
        border-width: 14px 16px 14px 0;
        border-color: transparent #691b09 transparent transparent;
    }

    .sider-next:before {
        margin-left: -6px;
        border-width: 14px 0 14px 16px;
        border-color: transparent transparent transparent #691b09;
    }

    .sider-arrow.disabled {
        filter: alpha(opacity=35);
        opacity: 0.35;
        cursor: default;
        pointer-events: none;
    }

    .sider-viewport {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: auto;
        overflow: hidden;
        position: relative;
    }

    .sider-list {
        width: 400%;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 0;
        white-space: nowrap;
        -webkit-transition: margin-left 0.28s ease;
        transition: margin-left 0.28s ease;
    }

    .sider li {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        width: 12.5%;
        margin: 0;
        padding: 0 3px;
        vertical-align: top;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        white-space: normal;
    }

    /* 按钮内文字下移并居中落在华夫主体区（避开顶部糖霜） */
    .sider .sider-list a {
        width: 100%;
        height: 68px;
        line-height: 1.15;
        font-size: 15px;
        padding: 28px 6px 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: url(../images/btn_enter.png?v=2026101310) center center no-repeat;
        background-size: 100% 100%;
        white-space: nowrap;
        text-align: center;
    }

    .sider .sider-list a.sider-btn-long {
        white-space: normal;
        padding-top: 14px;
        font-size: 13px;
        line-height: 1.15;
    }

    .page-main-title-svg-long text {
        font-size: 36px;
    }

    /* 竖版分页框 1152×2048；黄框约 y=160~280；深黄底约 y=508~1904（24.8%~93%） */
    .artical-wrap {
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
        min-height: 0;
        height: 0;
        padding-bottom: 177.78%; /* 2048/1152 */
        background: url(../images/frame_panel_m.png?v=2026101310) center top no-repeat;
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;
    }

    .artical-wrap .page-main-title-wrap {
        position: absolute;
        left: 14%;
        right: 14%;
        top: 8.2%;
        height: 5.6%;
        line-height: normal;
        margin: 0;
        z-index: 3;
    }

    .artical-wrap .page-main-title-svg {
        width: 100%;
        height: 100%;
    }

    /* 正文严格限制在深黄色底色框内（内缩避开粉边糖霜） */
    .artical {
        position: absolute;
        left: 14%;
        right: 14%;
        top: 28%;
        bottom: 10%;
        padding: 0;
        height: auto;
        overflow: hidden;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .artical-txt {
        height: 100%;
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        font-size: 15px;
        font-weight: bold;
        color: #fff8ee;
        -webkit-overflow-scrolling: touch;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 2px 4px 8px;
        word-wrap: break-word;
        word-break: break-word;
    }

    .artical-txt p {
        margin-bottom: 12px;
    }

    .artical-txt img {
        max-width: 100%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .event-time {
        font-size: 16px;
    }
}