.full-width-img {
    width: 100%; /* 改为100%避免vw可能导致的溢出 */
    height: auto;
    display: block;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 核心属性：禁止横向滚动 */
    position: relative; /* 确保子元素定位正确 */
}

html {
    overflow-x: hidden; /* 同时在html上设置，确保完全禁止横向滚动 */
}
.heshan{
    z-index: 35;position: absolute;margin-top: -16vh;
}
.image-wrapper {
    line-height: 0;
    position: relative;
    width: 100%; /* 确保容器不超出视口 */
    overflow: hidden; /* 隐藏超出容器的内容 */
}
.twz{
    z-index: 100;position: absolute;margin-top: 6.2vh;width: 100%
}
.xhlywz{
    width: 45vw;
    position: absolute;
    margin-top: 20vh;
    margin-left: 19vw;
}
.xhlywz2 {
    width: 45vw;
    position: absolute;
    margin-top: 68vh;
    margin-left: 38vw;
    z-index: 91;
}
.xhlywz3 {
    width: 45vw;
    position: absolute;
    margin-top: 47vh;
    margin-left: 45vw;
    z-index: 91;
}
.xhlywz4 {
    width: 45vw;
    position: absolute;
    margin-top: 13vh;
    margin-left: 18vw;
    z-index: 1000;
}
.xhlywz5 {
    width: 45vw;
    position: absolute;
    margin-top: 0vh;
    margin-left: 18vw;
    z-index: 1000;
}
/* 云朵容器 - 解决overflow-x裁剪问题 */
.cloud-container {
    position: relative;
    width: 100%;
    z-index: 20; /* 提高容器层级 */
}

/* yun1 图片默认样式 */
.yun1-img {
    position: absolute;
    opacity: 1;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.yun1-img2 {
    position: absolute;
    transition: transform 0.3s ease-out, opacity 0.5s ease-out;
    will-change: transform, opacity; /* 优化动画性能 */
    z-index: 20; /* 确保云朵在上方 */
}

/* 为img2添加过渡效果，使移动更平滑 */
#img2 {
    transition: transform 0.3s ease-out;
    position: relative;
    z-index: 10; /* 背景图层级低于云朵 */
}

/* 基础样式 - 适用于大多数屏幕 */
.img3-wrapper {
    margin-top: -25vh; /* 使用视口高度单位，自动适应不同屏幕 */
}

.yun5 {
    margin-top: -469px;
}

.yun4 {
    margin-top: -33vh;
}

.yun6 {
    margin-top: 6vh;
}

.yun9 {
    margin-top: -8vh;
}

.yun10 {
    margin-top: -27vh;
}

.shu {
    position: absolute;
    left: -31px;
    width: 80%;
    margin-top: 35vh;
}

.shu2 {
    position: absolute;
    right: -24px;
    width: 70%;
    margin-top: 275px;
}

.button2 {
    width: 40vw;
    position: absolute;
    margin-top: -415px;
    left: 175px;
    height: auto;
    z-index: 90;
}
.button_wz2 {
    width: 40vw;
    position: absolute;
    margin-top: -402px;
    left: 210px;
    height: auto;
    z-index: 90;
    color: #fff7c5;
}
.button3 {
    width: 45vw;
    position: absolute;
    margin-top: -458px;
    left: 86px;
    height: auto;
    z-index: 90;
}
.button_wz3 {
    width: 50vw;
    position: absolute;
    margin-top: -430px;
    left: 128px;
    height: auto;
    color: #fff7c5;
}
.button4 {
    width: 50vw;
    position: absolute;
    margin-top: -4px;
    left: 86px;
    height: auto;
    z-index: 90;
}
.button_wz4 {
    width: 50vw;
    position: absolute;
    margin-top: 20px;
    left: 118px;
    height: auto;
    z-index: 90;
    color: #fff7c5;
}

.tong {
    position: absolute;
    width: 50%;
    left: 2vw;
    margin-top: 63vh;
    z-index: 90;
}

.ban1{
    width: 60%;
    z-index: 50;
    position: absolute;
    margin-top: -45vh;
    right: 2px;
}
.ban2{
    width: 40%;
    z-index: 50;
    position: absolute;
    margin-top: -34.5vh;
    right: 0px;
}
.zhi{
    position: absolute;
    z-index: 100;
    margin-top: -45vh;
    width: 60%;
    left: 0vw;
}
.pao{
    position: absolute;
    z-index: 100;
    margin-top: -52vh;
    width: 100%;
    right: 3vw;
}
.button5 {
    width: 40vw;
    position: absolute;
    margin-top: -335px;
    left: 95px;
    height: auto;
    z-index: 90;
}
.button_wz5 {
    width: 40vw;
    position: absolute;
    margin-top: -310px;
    left: 143px;
    height: auto;
    z-index: 90;
    color: #fff7c5;
}
/* 定位jxh图片的样式 */
.jxh-image {
    /* 与tan1保持相同的居中定位 */
    left: 28%;
    position: fixed;
    transform: translateX(-50%); /* 水平居中 */
    z-index: 1000; /* 确保在遮罩层上方 */
    display: none; /* 初始隐藏，与tan1保持一致 */
    width: 118px;
    height: 44px;
}
.jxh-image2{
    /* 与tan1保持相同的居中定位 */
    position: fixed;
    left: 72%;
    transform: translateX(-50%); /* 水平居中 */
    z-index: 1000; /* 确保在遮罩层上方 */
    display: none; /* 初始隐藏，与tan1保持一致 */
    width: 118px;
    height: 44px;
}
.guang {
    position: absolute;
    right: 16vw;
    width: 100%;
    margin-top: 400px;
    opacity: 0.7;
}
@media (max-width: 430px) {

    .yun6 {
        margin-top: -2vh;
    }
    .yun3-y {
        margin-top: -0px;
    }
    .button5 {
        width: 40vw;
        position: absolute;
        margin-top: -330px;
        left: 110px;
        height: auto;
        z-index: 90;
    }
    .button_wz5 {
        width: 40vw;
        position: absolute;
        margin-top: -305px;
        left: 155px;
        height: auto;
        z-index: 90;
        color: #fff7c5;
    }
    .button_wz4 {
        width: 50vw;
        position: absolute;
        margin-top: 34px;
        left: 128px;
        height: auto;
        z-index: 90;
        color: #fff7c5;
    }
    .button4 {
        margin-top: 14px;

    }
    .yun5 {
        margin-top: -550px;
    }

    .yun4 {
        margin-top: -23vh;
    }

    .shu {
        position: absolute;
        left: -32px;
        width: 75%;
        margin-top: 285px;
    }

    .shu2 {
        position: absolute;
        right: 0px;
        width: 65%;
        margin-top: 235px;
    }
}

@media (max-width: 420px) {
    .xhlywz{
        margin-top: 22vh;
    }
    .xhlywz3 {
        margin-left: 43vw;
        margin-top: 47vh;
    }
    .yun6 {
        margin-top: -4vh;
    }
    .heshan {
        z-index: 35;
        position: absolute;
        margin-top: -21vh;
    }
    .jxh-image2{
        left: 28%;
    }
    .jxh-image{
        left: 72%;
    }
    .button5 {
        width: 40vw;
        position: absolute;
        margin-top: -315px;
        left: 104px;
        height: auto;
        z-index: 90;
    }
    .button_wz5 {
        width: 40vw;
        position: absolute;
        margin-top: -291px;
        left: 148px;
        height: auto;
        z-index: 90;
        color: #fff7c5;
    }
    .button4 {
        width: 50vw;
        position: absolute;
        margin-top: 10px;
        left: 86px;
        height: auto;
        z-index: 90;
    }
    .button_wz4 {
        width: 50vw;
        position: absolute;
        margin-top: 29px;
        left: 124px;
        height: auto;
        z-index: 90;
        color: #fff7c5;
    }
    .button3 {
        width: 45vw;
        margin-top: -439px;
        left: 74px;
    }
    .button_wz3 {
        width: 50vw;
        position: absolute;
        margin-top: -412px;
        left: 112px;
        height: auto;
        z-index: 90;
        color: #fff7c5;
    }
    .yun4 {
        margin-top: -23vh;
    }

    .yun3-y {
        margin-top: 10px;
    }

    .yun5 {
        margin-top: -530px;
    }

    .shu2 {
        position: absolute;
        right: 0px;
        width: 64%;
        margin-top: 240px;
    }
    .button2 {
        width: 40vw;
        position: absolute;
        margin-top: -400px;
        left: 165px;
        height: auto;
        z-index: 90;
    }
    .button_wz2 {
        width: 40vw;
        position: absolute;
        margin-top: -387px;
        left: 198px;
        height: auto;
        z-index: 90;
        color: #fff7c5;
    }

}

@media (max-width: 390px) {
    .xhlywz{
        margin-top: 23vh;
        margin-left: 17vw;
    }
    .xhlywz2 {
        margin-top: 74vh;
    }
    .xhlywz3{
        margin-top: 47vh;
        margin-left: 41vw;
    }
    .xhlywz4{
        margin-top: 12vh;
    }
    yun6 {
        margin-top: 2vh;
    }
    .tong{
        .margin-top: 63vh;
    }
    .jxh-image2{
        left: 26%;
    }
    .jxh-image{
        left: 73%;
    }
    .button5 {
        width: 40vw;
        position: absolute;
        margin-top: -298px;
        left: 100px;
        height: auto;
        z-index: 90;
    }
    .button_wz5 {
        width: 40vw;
        position: absolute;
        margin-top: -275px;
        left: 139px;
        height: auto;
        z-index: 90;
        color: #fff7c5;
    }
    .button_wz3 {
        width: 50vw;
        position: absolute;
        margin-top: -385px;
        left: 107px;
        height: auto;
        z-index: 90;
        color: #fff7c5;
    }
    .yun5 {
        margin-top: -510px;
    }

    .yun4 {
        margin-top: -25vh;
    }

    .yun3-y {
        margin-top: 10px;
    }

    .shu {
        position: absolute;
        left: -24px;
        width: 70%;
        margin-top: 275px;
    }

    .shu2 {
        position: absolute;
        right: 0px;
        width: 65%;
        margin-top: 215px;
    }

    .button_wz2 {
        width: 40vw;
        position: absolute;
        margin-top: -367px;
        left: 182px;
        height: auto;
        z-index: 90;
        color: #fff7c5;
    }
    .button3 {
        width: 45vw;
        margin-top: -412px;
        left: 74px;
    }
}

.img3-wrapper {
    margin-top: -430px; /* 保持指定的-400px */
}
@media (max-width: 400px) {
    .tong {
        margin-top: 69vh;
    }
}
@media (max-width: 375px) {
    .xhlywz{
        margin-top: 26vh;
        margin-left: 15vw;
    }
    .xhlywz2 {
        margin-top: 83vh;
        margin-left: 36vw;
    }
    .xhlywz3{
        margin-top: 56vh;
        margin-left: 39vw;
    }
    .xhlywz4 {
        margin-top: 15vh;
    }
    .twz{
        margin-top: 7.6vh;
    }

    .heshan{
        margin-top: -19vh;
    }
    .jxh-image2{
        left: 25%;
    }
    .jxh-image{
        left: 75%;
    }
    .button5 {
        width: 40vw;
        position: absolute;
        margin-top: -288px;
        left: 91px;
        height: auto;
        z-index: 90;
    }
    .button_wz5 {
        width: 40vw;
        position: absolute;
        margin-top: -266px;
        left: 128px;
        height: auto;
        z-index: 90;
        color: #fff7c5;
    }
    .button4 {
        width: 50vw;
        position: absolute;
        margin-top: 10px;
        left: 86px;
        height: auto;
        z-index: 90;
    }
    .button_wz4 {
        width: 50vw;
        position: absolute;
        margin-top: 26px;
        left: 116px;
        height: auto;
        z-index: 90;
        color: #fff7c5;
    }
    .button3 {
        margin-top: -400px;
        left: 72px;
    }
    .button_wz3 {
        margin-top: -375px;
        left: 101px;
    }
    .img3-wrapper {
        margin-top: -400px; /* 保持指定的-400px */
    }

    .yun5 {
        margin-top: -482px;
    }

    .yun4 {
        margin-top: -30vh;
    }

    .yun3-y {
        margin-top: 15px;
    }

    .yun4-y {
        margin-top: -20px;
    }

    .yun6 {
        margin-top: -2vh;
    }

    .yun9 {
        margin-top: -9.5vh;
    }

    .yun10 {
        margin-top: -31vh;
    }

    .shu {
        position: absolute;
        left: -24px;
        width: 70%;
        margin-top: 275px;
    }
    .tong {
        position: absolute;
        width: 50%;
        left: 1.8vw;
        margin-top: 77vh;
        z-index: 90;
    }
    .button2 {
        width: 40vw;
        position: absolute;
        margin-top: -366px;
        left: 148px;
        height: auto;
        z-index: 90;
    }
    .button_wz2 {
        width: 40vw;
        position: absolute;
        margin-top: -355px;
        left: 176px;
        height: auto;
        z-index: 90;
        color: #fff7c5;
    }
    .ban1{
        margin-top: -54.5vh;
    }
    .ban2{
        width: 40%;
        z-index: 50;
        position: absolute;
        margin-top: -42vh;
        right: 0px;
    }
    .zhi{
        position: absolute;
        z-index: 100;
        margin-top: -51vh;
        width: 60%;
        left: 0vw;
    }
    .pao{
        position: absolute;
        z-index: 100;
        margin-top: -60vh;
        width: 100%;
        right: 3vw;
    }
}

/* 针对较小屏幕（小于375px） */
@media (max-width: 374px) {
    .img3-wrapper {
        margin-top: -355px;
    }
}

/* 针对中等屏幕（376px到767px） */
@media (min-width: 376px) and (max-width: 389px) {
    .img3-wrapper {
        margin-top: -455px;
    }
}

/* 针对平板屏幕（768px到1023px） */
@media (min-width: 768px) and (max-width: 1023px) {
    .img3-wrapper {
        margin-top: -450px;
    }
}

/* 针对桌面屏幕（1024px及以上） */
@media (min-width: 1024px) {
    .img3-wrapper {
        margin-top: -500px;
    }
}

.tai1{
    width: 315px;
    height: 435px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* 关键：使用fixed定位相对于视口固定 */
    position: fixed;
    top: 50%;
    left: 50%;
    /* 平移自身一半尺寸实现完美居中 */
    transform: translate(-50%, -50%);
    z-index: 1000;
    padding-top: 20px;
    /* 移除冲突的position声明 */
}

/* 滚动容器样式 */
.scroll-container {
    overflow-y: auto;
    height: 95%;
    padding: 0 10px;
    scrollbar-width: thin;
}

/* 图片使用相对定位，遵循文档流 */
.scroll-container img {
    display: block;
    margin: 1px auto 15px;
}
/* 滚动容器样式 */
.scroll-container {
    overflow-y: auto;
    height: 95%;
    /* 为滚动容器添加内边距，避免内容贴边 */
    padding: 0 10px;
    /* 自定义滚动条（可选） */
    scrollbar-width: thin;
}

/* 图片使用相对定位，遵循文档流 */
.scroll-container img {
    display: block;
    margin: 0 auto 15px;
}