/* 字体声明 */
@font-face {
    font-family: "FZY4K";
    src: url("../font/FZY4K.woff2") format("woff2"),
        url("../font/FZY4K.woff") format("woff"),
        url("../font/FZY4K.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    background-color: #fff;
    display: flex;
    justify-content: center;
}

/* ===== 主容器 ===== */
.container {
    position: relative;
    width: 100%;
    max-width: 2560px;
    min-width: 1920px;
    overflow: hidden;
}

/* ===== 头部区域 ===== */
.header {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.header-bg {
    display: block;
    width: 100%;
    height: auto;
}

/* ===== 导航按钮容器 ===== */
.nav-wrapper {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 1480px;
}

.nav-row {
    display: flex;
    justify-content: center;
    gap: 100px;
}

/* .bottom-row {
    margin-left: -88px;
} */

/* ===== 导航按钮 ===== */
.nav-btn {
    width: 330px;
    height: 94px;
    border: none;
    outline: none;
    cursor: pointer;
    background: url("https://static.web.sdo.com/chd/pic/pro2026/20260630act/btn-bg.png") no-repeat center center;
    background-size: 100% 100%;
    font-size: 35px;
    font-family: "FZY4K", "Microsoft YaHei", "SimHei", sans-serif;
    color: rgb(216, 103, 23);
    line-height: 1.2;
    text-align: center;
    z-index: 112;
    transition: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 10px 0;
    white-space: nowrap;
    font-weight: bold;
    text-shadow: -2px -2px 0 #fff2d4,
        2px -2px 0 #fff2d4,
        -2px 2px 0 #fff2d4,
        2px 2px 0 #fff2d4,
        -2px 0 0 #fff2d4,
        2px 0 0 #fff2d4,
        0 -2px 0 #fff2d4,
        0 2px 0 #fff2d4;
}

.nav-btn:hover,
.nav-btn.active {
    background: url("https://static.web.sdo.com/chd/pic/pro2026/20260630act/btn-bg-hover.png") no-repeat center center;
    background-size: 100% 100%;
    color: rgb(255, 255, 255);
    text-shadow: 2.046px 2.194px 2px rgba(8, 13, 45, 0.72);
}

/* ===== 内容区域 ===== */
.page-bg {
    display: none;
    position: relative;
    width: 100%;
}

/* ===== 页面按钮遮罩 ===== */
.page-overlay {
    display: none;
}

.page-overlay.active {
    display: block;
}

.page-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    z-index: 10;
}

.btn-group {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 69px;
    justify-content: center;
    align-items: center;
}

.btn-group.page2-btn-group {
    top: 85%;
}
.btn-group.page3-btn-group {
    top: 88.5%;
}
.btn-group.page6-btn-group {
    top: 89%;
}
.btn-group.page7-btn-group {
    top: 88.5%;
}
.btn-group .page-btn {
    position: static;
    transform: none;
}

/* 页面按钮垂直位置 */
.page1-btn-1 { top: 15.5%; }
.page1-btn-2 { top: 51%;  }
.page1-btn-3 { top: 81.5%;  }
.page4-btn-1 { top: 77.2%;  }
.page5-btn-1 { top: 46.8%;  }
.page5-btn-2 { top: 85%;  }


.page-img {
    display: block;
    width: 100%;
}

/* ===== 页面 GIF 覆盖图 ===== */
.page-gif {
    position: absolute;
    z-index: 5;
    height: auto;
    pointer-events: none;
}

.page2-gif {
    width: 8.5%;   /* 228 / 1920 */
    left: 50%;
    top: 75%;
    transform: translate(-50%, -50%);
}

.page7-gif {
    width: 12.2%;   /* 314 / 1920 */
    left: 50%;
    top: 51.65%;
    transform: translate(-50%, -50%);
}

.page6-gif-1 {
    width: 8.6%;   /* 170 / 1920 */
    left: 37.65%;
    top: 51%;
    transform: translateY(-50%);
}

.page6-gif-2 {
    width: 8.5%;   /* 170 / 1920 */
    left: 54%;    /* 100% - 10.729% */
    top: 51%;
    transform: translateY(-50%);
}

.page6-gif-3 {
    width: 8.5%;   /* 228 / 1920 */
    left: 50%;
    top: 24.95%;
    transform: translate(-50%, -50%);
}
.page6-gif-4 {
    width: 6.55%;   
    left: 38.88%;
    top: 41.96%;
    transform: translate(-50%, -50%);
}

/* ===== footer ===== */
#footer {
    width: 100%;
    max-width: 2560px;
    margin: 0 auto;
}

#footer * {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
}