.topbox,
.topbox .top {
    width: 1024px;
    margin: 0 auto
}

.jzyx-nav li a,
.topbox .top a {
    text-decoration: none
}

.jzyx-gk,
.jzyx_mljz {
    padding-bottom: 40px;
    overflow: hidden
}

.topbox {
    height: 32px;
    line-height: 32px;
    background: rgba(255, 255, 255, .1)
}

.topbox .top {
    height: 100%
}

.topbox .top a {
    font-size: 14px;
    color: #75797c
}

.topbox .top span {
    display: inline-block;
    width: 2px;
    background: #75797c;
    height: 14px;
    overflow: hidden;
    margin-top: -3px;
    vertical-align: middle
}

.topbox .topleft {
    float: left
}

.topbox .topright {
    float: right
}

.jzyx-gk .gk-left,
.jzyx-gk .left-gkxx,
.jzyx-logo,
.jzyx-nav,
.jzyx-nav li {
    float: left
}

.jzyx-header {
    width: 100%;
    height: 95px;
    background: #00acf0
}

.container {
    width: 1037px;
    margin: 0 auto
}

.jzyx-nav {
    margin-left: 52px
}

.jzyx-nav li {
    width: 109px;
    height: 95px
}

.jzyx-nav i {
    height: 60px;
    display: block
}

.jzyx-nav span {
    display: block;
    text-align: center;
    color: #fff;
    font-size: 18px
}

.jzyx-nav .jz-xwzx {
    background: url(../image/jzyx_xxzx.png) center 70% no-repeat
}

.jzyx-nav .jz-xxgk {
    background: url(../image/jzyx_xxgk.png) center 70% no-repeat
}

.jzyx-nav .jz-wsbs {
    background: url(../image/jzyx_wsbs.png) center 70% no-repeat
}

.jzyx-nav .jz-zmhd {
    background: url(../image/jzyx_zmhd.png) center 70% no-repeat
}

.jzyx-nav .jz-home {
    background: url(../image/home.png) center 70% no-repeat
}

.jzyx-nav .jz-ldzc {
    background: url(../image/jzyx_ldzc.png) center 70% no-repeat
}

.jzyx-nav .jz-yx {
    background: url(../image/jzyx_jzyx.png) center 70% no-repeat
}

.jzyx-bg {
    height: 600px;
    background: url(../image/jzyx_b_bg.jpg) center top no-repeat
}

.jzyx-gk {
    background: url(../image/jzyx_gk_bg.png)
}

.jzyx-gk .left-more {
    margin-top: 397px;
    background: url(../image/jzyx_more.png) no-repeat;
    width: 30px;
    height: 118px;
    cursor: pointer;
    float: left;
    margin-left: 21px;
    display: block
}

.jzyx-gk .left-gkxx {
    background: url(../image/jzyx_gk_l.png) no-repeat;
    width: 366px;
    height: 484px
}

.jzyx-gk .gk-right {
    float: right;
    margin-left: 50px;
    margin-top: 116px;
    background: url(../image/jzyx_zrdl.png) no-repeat;
    width: 567px;
    height: 567px;
    position: relative
}

.jzyx-gk .gk-right .jzyx_gk_mj {
    height: 30px;
    display: block;
    position: absolute;
    width: 115px;
    bottom: 34px;
    right: 225px
}

.jzyx_yszs_bg {
    background: url(../image/jzyx_ysxq.png) center top no-repeat
}

/* 因为HTML结构改变，新增一个外层容器的PC端样式，让它包含背景图和文字 */
.jzyx_yszs_bg > .container > div:first-child {
    margin-left: 188px;
    height: 260px;
    position: relative; /* 为内部的文字定位提供参考 */
}

.jzyx_yszs_bg .jzyx_syxq {
    background: url(../image/jzyx_yszs_a.png) left bottom no-repeat;
    height: 260px;
    width: 100%; /* 给背景图一个固定宽度 */
    position: absolute;
    left: 0;
    top: 0;
}

.jzyx_yszs_bg .jzyx_contents {
    display: block;
    padding-top: 127px;
    margin-left: 270px;
    width: 390px;
    height: 105px;
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
    position: relative; /* 确保文字在背景图上方或右侧 */
}

.jzyx_yszs_bg .jzyx_js {
    margin-left: 18px;
    background: url(../image/jzyx_js.png) left top no-repeat;
    margin-top: 35px;
    height: 403px
}

.jzyx_yszs_bg .jzyx_js .jzyz_js_b {
    margin-left: 70px;
    padding-top: 169px
}

.jzyx_yszs_bg .jzyx_js .jzyz_js_b .margint {
    margin-top: 126px
}

.jzyx_yszs_bg .jzyx_js .jzyz_js_b a {
    display: block;
    width: 105px;
    height: 25px;
    background: #f39800;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 25px;
    float: left;
    margin-right: 23px
}

.jzyx_mljz {
    background: url(../image/jzyx_mljz.jpg) center top no-repeat
}

.jzyx_mljz .jzyx_channel {
    background: url(../image/jzys_main_scenic.png) center top no-repeat;
    height: 100px
}

.jzyx_mljz .jzyx_mlp {
    float: left;
    position: relative
}

.jzyx_mljz .jzyx_mlp img {
    width: 1027px;
    height: 467px;
    display: block
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    /* 1. 基础重置 */
    .container {
        width: 100% !important;
        padding: 0 10px;
        box-sizing: border-box;
    }
    img, video {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 2. 头部导航 */
    .jzyx-header {
        height: auto !important;
        padding: 10px 0;
    }
    .jzyx-logo {
        float: none !important;
        text-align: center;
        margin-bottom: 10px;
    }
    .jzyx-logo img {
        margin: 0 auto;
    }
    .jzyx-nav {
        float: none !important;
        margin-left: 0 !important;
        width: 100%;
    }
    .jzyx-nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .jzyx-nav li {
        float: none !important;
        width: 30%;
        /* margin-bottom: 10px; */
        margin-right: 0 !important;
        height: 75px  !important;
    }
    .jzyx-nav li a {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .jzyx-nav li a i {
        display: block !important;
        width: 35px !important;
        height: 35px !important;
        margin: 0 auto 5px !important;
        background-size: contain !important; /* 确保图标完整显示且不会被裁切或重叠 */
        background-position: center !important;
    }
    /* 修复特定的图标因为雪碧图定位导致在手机端错乱或重叠的问题 */
    .jzyx-nav .jz-ldzc { background: url(../image/jzyx_ldzc.png) center center no-repeat !important; background-size: contain !important; }
    .jzyx-nav .jz-xwzx { background: url(../image/jzyx_xxzx.png) center center no-repeat !important; background-size: contain !important; }
    .jzyx-nav .jz-xxgk { background: url(../image/jzyx_xxgk.png) center center no-repeat !important; background-size: contain !important; }
    .jzyx-nav .jz-wsbs { background: url(../image/jzyx_wsbs.png) center center no-repeat !important; background-size: contain !important; }
    .jzyx-nav .jz-zmhd { background: url(../image/jzyx_zmhd.png) center center no-repeat !important; background-size: contain !important; }
    .jzyx-nav .jz-yx { background: url(../image/jzyx_jzyx.png) center center no-repeat !important; background-size: contain !important; }

    /* 3. 背景图 */
    .jzyx-bg {
        height: 250px !important; /* 增加背景图高度，让它更显眼 */
        background: url(../image/jzyx_b_bg.jpg) center center no-repeat !important;
        background-size: cover !important;
    }

    /* 4. 概况区域 */
    .jzyx-gk {
        height: auto !important;
        background: url(../image/jzyx_gk_bg.png) center center no-repeat !important; /* 恢复背景图片 */
        background-size: cover !important; /* 让图片在手机端等比拉伸覆盖 */
        padding: 20px 0;
    }
    .jzyx-gk .gk-left {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        box-sizing: border-box;
        position: relative;
    }
    
    /* 左侧文字图的完美比例缩放 */
    .jzyx-gk .gk-left .left-gkxx {
        width: 100% !important;
        float: none !important;
        height: 0 !important;
        padding-top: 132% !important; /* 484 / 366 ≈ 1.32，保持原图比例 */
        background-size: contain !important;
        background-position: center top !important;
    }
    
    /* 左侧的“更多”按钮 */
    .jzyx-gk .gk-left .left-more {
        position: absolute;
        bottom: 5% !important; /* 相对于整个区域的高度百分比 */
        right: 10px;
        margin-top: 0 !important;
        width: 80px !important;
        height: 25px !important;
        background-size: contain !important;
    }

    /* 右侧地图区域，其实地图背景图是在 .gk-right 上的 */
    .jzyx-gk .gk-right {
        width: 100% !important;
        float: none !important;
        height: 0 !important;
        padding-top: 100% !important; /* 567 / 567 = 1，正方形原图比例 */
        margin-top: 20px !important;
        margin-left: 0 !important;
        
        background-size: contain !important;
        background-position: center top !important;
        position: relative !important;
    }
    
    /* 右侧地图上的点击热区，原本是个空 a 标签 */
    .jzyx-gk .gk-right .jzyx_gk_mj {
        width: 20% !important; /* 相对于父级正方形的宽度 */
        height: 5% !important; /* 相对于父级正方形的高度 */
        display: block !important;
        position: absolute !important;
        bottom: 6% !important;
        right: 40% !important;
        background: none !important; /* 移除我之前错误添加的背景 */
    }

    /* 5. 交融与发展区域 - 还原 PC 端的左右图文布局 */
    .jzyx_yszs_bg {
        height: auto !important;
        background: url(../image/jzyx_ysxq.png) no-repeat center center !important; /* 第一张：大背景底图 */
        background-size: cover !important;
        padding: 20px 0 !important;
        box-sizing: border-box;
    }
    
    /* 容器恢复为相对定位，以便内部元素绝对定位 */
    .jzyx_yszs_bg > .container > div:first-child {
        background: none !important; 
        margin-left: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 220px !important; /* 给个合适的高度容纳内部的绝对定位元素 */
        padding: 10px !important;
        box-sizing: border-box;
        display: block !important;
        position: relative !important;
    }
    
    /* 左侧：文字图形背景图 */
    .jzyx_yszs_bg .jzyx_syxq {
        background: url(../image/jzyx_yszs_a.png) no-repeat left top !important; 
        background-size: contain !important;
        width: 160px !important; /* 宽度固定，确保左侧图片清晰 */
        height: 100% !important;
        padding-top: 0 !important;
        position: absolute !important; /* 绝对定位在左上角 */
        left: 10px !important;
        top: 10px !important;
        margin-bottom: 0 !important;
        z-index: 1;
    }
    
    /* 右侧：文本内容 */
    .jzyx_yszs_bg .jzyx_contents {
        display: block !important;
        width: calc(100% - 150px) !important; /* 宽度自适应，减去左侧图片的占据空间 */
        height: auto !important;
        margin-left: 0 !important;
        padding-top: 0 !important;
        color: #fff !important; 
        font-size: 12px !important; 
        line-height: 1.6 !important;
        text-indent: 0 !important; 
        margin-bottom: 0 !important;
        position: absolute !important; /* 绝对定位 */
        right: 10px !important; /* 靠右对齐 */
        top: 40px !important; /* 关键点：向下偏移 65px，正好在“景城一体”的下方 */
        transform: none !important;
        z-index: 2;
    }
    
    /* 第三张：按钮区域的线条背景图 */
    .jzyx_yszs_bg .jzyx_js {
        background: url(../image/jzyx_js.png) no-repeat center top !important;
        background-size: 100% auto !important; /* 宽度铺满，高度自适应 */
        margin-left: 0 !important;
        margin-top: 15% !important;
        height: auto !important;
        width: 100% !important;
        padding: 15% 5% 5% 5% !important; /* 顶部留出背景图图案的空间 */
        box-sizing: border-box;
    }
    
    .jzyx_yszs_bg .jzyx_js .jzyz_js_b {
        margin-left: 0 !important;
        padding-top: 30% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }
    
    /* 重置原有的特定边距 */
    .jzyx_yszs_bg .jzyx_js .jzyz_js_b .margint {
        margin-top: 0 !important;
    }
    
    /* 按钮样式依然使用网格，但颜色可以搭配背景图调整 */
    .jzyx_yszs_bg .jzyx_js .jzyz_js_b a {
        display: block !important;
        width: 48% !important; 
        height: 35px !important; 
        line-height: 35px !important;
        margin-right: 0 !important;
        margin-bottom: 10px !important;
        float: none !important;
        background: rgba(255, 255, 255, 0.8) !important; /* 半透明白色背景，让底下的线条透出一点 */
        color: #df1618 !important; /* 使用主题红字 */
        border: 1px solid #df1618 !important;
        text-align: center !important;
        border-radius: 20px; /* 圆角药丸形状 */
        font-size: 14px !important;
        box-sizing: border-box;
    }
    
    .jzyx_yszs_bg .jzyx_js .jzyz_js_b a[style*="background:none"] {
        display: none !important;
    }

    /* 6. 魅力嘉州区域 */
    .jzyx_mljz {
        height: auto !important;
        background: none !important;
        padding: 20px 0;
        display: flex;
        flex-direction: column;
    }
    .jzyx_channel {
        position: static !important;
        width: 100% !important;
        height: 50px !important;
        background-size: contain !important;
        background-position: center !important;
        margin-bottom: 20px;
    }
    .jzyx_mlp {
        width: 100% !important;
        padding-left: 0 !important;
        margin-bottom: 20px;
        box-sizing: border-box;
    }
    .jzyx_mlp img {
        height: auto !important;
        border-radius: 8px;
    }
    #video {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9; /* 保持视频比例 */
    }
}