.container {
    position: relative;
    width: 1920px;
    padding-bottom: 100px;
    margin-top: -50px;
    margin-left: -20px;
}


.block-intro {
    height: 937px;
    background: url('../version/img_QiJingBaMai/main_1.png') no-repeat center top;
    background-size: cover;
    position: relative;
}

.block-map {
    position: relative;
    height: 1012px;
    background: url('../version/img_QiJingBaMai/main_2.png') no-repeat center top;
    background-size: cover;
}

.block-monster {
    min-height: 3395px !important;
    background:
        url('../version/img_QiJingBaMai/main3_2.png') no-repeat center 2174px,
        url('../version/img_QiJingBaMai/main3_2.png') no-repeat center 953px,
        url('../version/img_QiJingBaMai/main_3.png') no-repeat center top;
    background-size:
        100%,
        100%,
        100%;
    position: relative;
}

.main1-img {
    width: 100%;
    max-width: 1920px;
    display: block;
}

.main2-img {
    width: 100%;
    max-width: 1920px;
    margin-top: 150px;
    display: block;
}

.qilin-sequence-frame {

    max-width: 1920px;
    margin: 0 auto;
}

.qilin-sequence-img {

    max-width: 1920px;
    display: block;
}

.side-nav {
    position: fixed;
    left: 350px;
    top: 50%;
    transform: translateY(-50%);
    border: 2px solid #ffd700;
    border-radius: 10px;
    padding: 20px;
    z-index: 1000;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.side-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-nav li {
    margin: 15px 0;
    text-align: center;
}

.side-nav a {
    color: #ffd700;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
    display: block;
    padding: 10px 20px;
    border-radius: 5px;
}

.side-nav a:hover {
    background: rgba(255, 215, 0, 0.2);
    background: #ffd700;
    color: #000;
}

.side-nav a.active {
    background: #ffd700;
    color: #000;
}

.section {
    margin-bottom: 40px;
    border-radius: 10px;
    padding: 20px;
    color: #fff;
    display: none;
}

.section.active {
    display: block;
}

/* 地图标签容器样式，使用 flex 布局，设置子元素间距为 10px */
.map-tabs {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    margin-top: 0px;
}

/* 单个地图标签基础样式，设置宽高，默认显示普通状态图片，鼠标指针设为手型 */
.map-tab {
    width: 168px;
    height: 60px;
    background: url('../version/img_QiJingBaMai/map_btn_normal.png') no-repeat center;
    background-size: cover;
    cursor: pointer;
    text-align: center;
    line-height: 60px;
    font-family: '宋体', SimSun;
    color: #fae7c6;
    margin-top: 250px;
}

/* 鼠标悬停在地图标签上时的样式，显示悬停状态图片 */
.map-tab:hover {
    background: url('../version/img_QiJingBaMai/map_btn_hover.png') no-repeat center;
    background-size: cover;
}

/* 当前激活的地图标签样式，显示激活状态图片 */
.map-tab.active {
    background: url('../version/img_QiJingBaMai/map_btn_active.png') no-repeat center;
    background-size: cover;
}

.map-item {
    margin: 0;
}

.map-content {
    display: none;
}

.map-content.active {
    display: block;
}

.map-item {
    width: 1920px;  /* 增加宽度 */
    display: flex;
    gap: 30px;  /* 增加间距 */
    align-items: center;  /* 垂直居中 */
    padding: 10px;  /* 减小内边距 */
}

.map-image {
    margin-left: 300px;
    object-fit: contain;  /* 改为contain确保图片完整显示 */
    margin-top: 50px;
}

.map-name {
    display: block;
    width: 300px;         /* 统一宽度，可根据实际图片调整 */
    height: 60px;         /* 统一高度，按最大图片高度设置 */
    object-fit: contain;  /* 保证图片完整显示 */
    margin-bottom: 0;
    margin-top: -100px;
    margin-left: 100px;
}

.map-info {
    font-size: 20px;
    color: #fae7c6;  /* 改为白色 */
    padding: 10px;  /* 减小内边距 */
    margin-top: 100px;
    margin-left: -300px;
}


.main-title-img {
    position: absolute;
    left: 50%;
    top: 60px; /* 距离顶部的距离，可调整 */
    transform: translateX(-50%);
    height: auto;
    margin: 0;
    z-index: 2;
    pointer-events: none; /* 可选，防止遮挡交互 */
}

/* 怪物图鉴样式 */
.monster-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 20px;
    padding-top: 250px;
    margin-top: 0;
    margin-left: 290px;
    width: 1300px;
}

.monster-card {
    background: url('../version/img_QiJingBaMai/monbg.png') no-repeat center top;
    height: 500px;
    overflow: hidden;
    transition: transform 0.3s;
    text-align: center;
}

.monster-image {
    max-width: 130px;
    max-height: 130px;
    margin-top: 10px;
    margin-left: 0;
}

.monster-info {
    padding: 10px;
    color: #fff;
    margin-left: 0;
    max-width: 245px;
    margin: 0 auto;
}

.monster-info h4 {
    color: #ffd700;
    font-size: 16px;  /* 减小标题字体 */
    margin: 35px 0 8px 0;
    width: 245px;
    text-align: center;
}

.monster-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-nav-img {
    position: fixed;
    right: 40px;
    top: 50%;
    transform: translateY(-50%) translateX(-80%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.4s;
}

.side-nav-img.hide {
    opacity: 0;
    pointer-events: none;
}

.nav-map-btns {
    position: relative;
    width: 120px;   /* nav_map.png 的宽度 */
    height: 886px;  /* nav_map.png 的高度 */
    margin-right: 100px;
}

.nav-map-img {
    width: 100%;
    height: 100%;
    display: block;
}

.nav-btn-img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 110px; /* 按钮图片宽度，如有不同请调整 */
    height: 40px; /* 按钮图片高度，如有不同请调整 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border-radius: 8px;
}


.nav-btn1 { top: 26%; left: 45%; transform: translateX(-160%); background-image: url('../version/img_QiJingBaMai/nav_btn1.png'); }
.nav-btn2 { top: 41%; left: 45%; transform: translateX(-160%); background-image: url('../version/img_QiJingBaMai/nav_btn2.png'); }
.nav-btn3 { top: 56%; left: 45%; transform: translateX(-160%); background-image: url('../version/img_QiJingBaMai/nav_btn3.png'); }
.nav-btn4 { top: 70%; left: 45%; transform: translateX(-160%); background-image: url('../version/img_QiJingBaMai/nav_btn4.png'); }

.nav-btn1:hover, .nav-btn1.active { background-image: url('../version/img_QiJingBaMai/nav_btn1_1.png'); }
.nav-btn2:hover, .nav-btn2.active { background-image: url('../version/img_QiJingBaMai/nav_btn2_1.png'); }
.nav-btn3:hover, .nav-btn3.active { background-image: url('../version/img_QiJingBaMai/nav_btn3_1.png'); }
.nav-btn4:hover, .nav-btn4.active { background-image: url('../version/img_QiJingBaMai/nav_btn4_1.png'); }
/* nav-btn4 不需要高亮 */