body {
    background-color: #f1f1f1;
    color: #FFF
}

.header-right-img {

    max-height: 745px !important;
}

.header-bg {
    background-image: url('../image/company-big.webp');
    background-size: cover;
    background-position: center;
    height: 0;
    padding-top: 38%;
    overflow: hidden;
}

.header-bg-div {
    position: absolute;
    top: 23%;
    left: 4%;
    width: clamp(47px, 5.52vw, 130px);
    height: 27px;
    background-color: #5FCFE4;
}

.header-text {
    position: absolute;
    top: 23.8%;
    left: 4.3%;
    line-height: 80px;
    color: #086869;
    font-size: 56px;
    width: 50%;
    text-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}

.one-font1 {
    line-height: 60px;
    font-size: 48px;
    font-weight: 600;
    padding-left: clamp(20px, 5.208vw, 100px);
}

.one-font1 .one {
    color: #3EABBF;
}

.one-font1 .two {
    color: #313131;
    margin-left: -13px;

}

.one-left-div {
    padding: 30px 0;
}

.one-font2 {
    height: 6px;
    width: 8%;
    background-color: #3EABBF;
    margin-left: clamp(20px, 5.208vw, 100px);
    margin-top: 20px;
    margin-bottom: 40px;
}

.one-font3 {
    font-family: 'Montserrat', Light;
    font-size: 20px;
    line-height: 30px;
    color: #333333;
    padding-left: clamp(20px, 5.208vw, 100px);
    padding-right: clamp(20px, 5.208vw, 100px);
    margin-bottom: 50px;
}

.one-font4 {
    margin-left: clamp(20px, 3.906vw, 75px);
    margin-top: 33px;
}

.one-font5 {
    width: 80%;
}

.one-font6 {
    color: #212121;
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    padding-left: 28px;
}

.one-font7,
.one-font8 {
    font-size: 18px;
    line-height: 30px;
    color: #666666;
    padding-bottom: 22px;
    border-bottom: 1px dashed #D1CFC7;
}

.one-font9 {
    font-family: 'AbrilFatface';
    font-size: 60px;
    color: #212121;
    top: 60%;
}

.one-right-div {
    padding-left: 5%;
}

.one-row {
    margin: 91px 0;
}

.header-bg-img1 {
    background-image: url('../image/success-blue.webp');
    background-position: left center;
    background-repeat: no-repeat;
}

.two-section {
    background-color: #FEFAFC;
}

.two-section-div1 {
    height: 636px;
    background-color: #f1f1f1;
}

.two-section-div {
    background-color: #242424;
    background-image: url('../image/company-2.webp');
    background-repeat: no-repeat;
    margin-left: clamp(20px, 2.604vw, 50px);
    margin-right: clamp(20px, 2.604vw, 50px);
    margin-top: -636px;
    border-radius: 48px;
    padding-bottom: 104px;
}

.two-font1 {
    line-height: 60px;
    font-size: 48px;
    font-weight: 600;
    padding-top: 45px;
}

.two-font1 .one {
    color: #3EABBF;
}

.two-font1 .two {
    color: #fff;
}

.two-font2 {
    height: 6px;
    width: 4%;
    background-color: #3EABBF;
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
}

.two-font3 {
    font-size: 24px;
    line-height: 44px;
    color: #F3F3F3;
}

.two-div-font4 {
    margin-top: 12px;
}

.two-font4 {
    background-color: #A3C6DD;
    border-radius: 16px;
    line-height: 48px;
    padding: 0 55px;
    color: #051C2D;
    font-size: 20px;
}

.shape-mt {
    margin-top: 86px;
}

.shape {
    margin-top: 30px;
    position: relative;
    z-index: 1;
    /* 开启堆叠上下文（可选，但推荐） */
    box-sizing: border-box;
    background-color: #3EABBF;
    border-radius: 48px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: skew(0, 12deg);
    padding-left: 31px;
}

.shape div {
    position: relative;
    /* 确保内容在堆叠上下文中可提升 */
    z-index: 2;
    /* 高于 ::after */
    transform: skew(0, -12deg);
    pointer-events: auto;
    /* 确保可交互 */
}

.shape::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 260px;
    background-color: #3EABBF;
    background-image: url('../image/first-hehua.webp');
    background-position: right -27px bottom;
    background-repeat: no-repeat;
    transform-origin: left;
    transform: skew(0, -12deg);
    border-radius: 0 0 48px 48px;
    bottom: -93px;
    left: 0;
    z-index: 1;
    /* 明确设置低于内容 */
    pointer-events: none;
    /* 🌟 关键：让点击穿透 */
}

.shape-font1 {
    margin-top: 50px;
    color: #FFF;
    font-size: 24px;
    line-height: 48px;
}

.shape-font5 {
    margin-top: 50px;
    color: #212121;
    font-size: 24px;
    line-height: 48px;
}

.shape-font2 {
    height: 3px;
    width: 10%;
    margin-top: 46px;
    background-color: #FFF;
}

.shape-font6 {
    height: 3px;
    width: 10%;
    margin-top: 46px;
    background-color: #333333;
}

.shape-font3 {
    color: #FEFCFC;
    font-size: 18px;
    line-height: 30px;
    width: 367px;
    height: 93px;
    padding-right: 10px;
}

.shape-font4 {
    color: #666666;
    font-size: 18px;
    line-height: 30px;
    width: 367px;
    height: 93px;
    padding-right: 10px;
}

.shape-color {
    background-color: #FFF;
}

.shape-color::after {
    background-color: #fff;
    border-color: #FFF;
}

.shape-font1-img {
    margin-top: 30px;
}

.shape-font1-img {
    margin-top: 30px;
    height: 60px;
    background-image: url('../image/pencil.svg');
    background-repeat: no-repeat;

}

.shape-font1-img2 {
    margin-top: 30px;
    height: 60px;
    background-image: url('../image/vector.svg');
    background-repeat: no-repeat;
}

.shape-font1-img3 {
    margin-top: 30px;
    height: 60px;
    background-image: url('../image/homestay.svg');
    background-repeat: no-repeat;
}

.four-shape {
    width: 635px;
    height: 420px;
    position: relative;
    z-index: 2;
    /* 开启堆叠上下文（可选，但推荐） */
    box-sizing: border-box;
    background-color: #242424;
    border-radius: 68px 100px 68px 68px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: skew(-25deg);
    padding-left: 31px;
    left: clamp(20px, 7vw, 160px);
}

.four-shape div {
    position: relative;
    /* 确保内容在堆叠上下文中可提升 */
    z-index: 2;
    /* 高于 ::after */
    transform: skew(25deg);
    pointer-events: auto;
    /* 确保可交互 */
}

.four-shape::after {
    content: "";
    display: block;
    position: absolute;
    width: 600px;
    height: 420px;
    background-color: #242424;
    background-image: url('../image/first-bg-f2.webp'), url('../image/first-bg-r7.webp');
    /* 多个背景图 */
    background-position: right -10px bottom 10px, left 42px bottom 62px;
    /* 分别指定每张图片的位置 */
    background-repeat: no-repeat, no-repeat;
    transform-origin: left;
    transform: skew(25deg);
    border-radius: 68px 0 68px 68px;
    bottom: 0px;
    left: -20%;
    z-index: 1;
    /* 明确设置低于内容 */
    pointer-events: none;
    /* 🌟 关键：让点击穿透 */
}

.four-shape .one {
    padding-top: 61px;
    color: #3EABBF;
    font-weight: 600;
    font-size: 30px;
    line-height: 60px;
    margin-left: -185px;
}

.four-shape .two {
    padding-top: 20px;
    padding-right: 25px;
    color: #FFF;
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
    opacity: 0.8;
    margin-left: -118px;
}

.four-shape-div {
    padding-top: 80px;
}

.four-shape2 {
    width: 775px;
    height: 500px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    background-color: #f3f3f3;
    border-radius: 188px 68px 68px 85px;
    transform: skew(-25deg);
    padding-left: 20px;
    overflow: hidden;
    left: clamp(-178px, 2vw, 50px);
}

.four-shape2 .four-shape2-bg-r {
    position: relative;
    z-index: 3;
    transform: skew(25deg);
    pointer-events: auto;
    left: -120px;
    top: 80px;
    border-radius: 300px 68px 68px 68px;
}

.four-bg-r {
    position: absolute;
    top: -17%;
    right: 8%;
    width: clamp(100px, 24.84vw, 477px);
    z-index: 2;
    transform: skew(25deg);
    pointer-events: auto;
}

.four-shape3 {
    width: 694px;
    height: 420px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    background-color: #f3f3f3;
    border-radius: 68px 100px 68px 68px;
    transform: skew(-25deg);
    overflow: hidden;
    left: clamp(-70px, -3vw, 0px);
    margin-top: 32px;
}

.four-shape3 img {
    position: relative;
    z-index: 3;
    transform: skew(25deg);
    pointer-events: auto;
    margin-left: 78px;
    border-radius: 88px 68px 68px 68px;
    width: 100%;
}

.four-shape4 {
    width: 735px;
    height: 420px;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    background-color: #242424;
    border-radius: 68px 100px 68px 68px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: skew(-25deg);
    left: clamp(-178px, -8vw, 0px);
    margin-top: 32px;
}

.four-shape4 div {
    position: relative;
    /* 确保内容在堆叠上下文中可提升 */
    z-index: 3;
    /* 高于 ::after */
    transform: skew(25deg);
    pointer-events: auto;
    /* 确保可交互 */
}

.four-shape4::after {
    content: "";
    display: block;
    position: absolute;
    width: 800px;
    height: 420px;
    background-color: #242424;
    background-image: url(../image/first-bg-8.webp), url(../image/first-bg-r6.webp), url(../image/first-bg-r5.webp);
    background-position: left 0px bottom 10px, right 265px bottom 94px, right 40px bottom 85px;
    background-repeat: no-repeat, no-repeat, no-repeat;
    transform-origin: left;
    transform: skew(25deg);
    border-radius: 300px 68px 68px 68px;
    bottom: 0px;
    left: 0%;
    z-index: 2;
    pointer-events: none;
}

.four-shape4 .one {
    padding-top: 61px;
    color: #FFF;
    font-weight: 600;
    font-size: 30px;
    line-height: 60px;
    margin-right: 40px;
}

.four-shape4 .two {
    padding-top: 20px;
    color: #FFF;
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
    opacity: 0.8;
    left: 15px;
}

.four-bg-l {
    position: absolute;
    bottom: 1%;
    left: clamp(30px, 4.96vw, 170px);
    z-index: 10;
}

.three-font1,
.four-font1 {
    line-height: 60px;
    font-size: 48px;
    font-weight: 600;
}

.three-font1 {
    padding-top: 153px;
    margin-bottom: 20px;
}

.four-font1 {
    padding-top: 62px;
    margin-bottom: 20px;
}

.three-font1 .one,
.four-font1 .one {
    color: #3EABBF;
}

.three-font1 .two {
    color: #313131;
    margin-left: -13px;
}

.four-font1 .two {
    color: #313131;
}

.three-bg-div {
    height: 100%;
    padding-top: 148px;
    padding-left: clamp(16px, 5.208vw, 100px);
    padding-right: clamp(16px, 5.208vw, 100px);
    padding-bottom: 70px;
}

.three-left1 {
    background-color: #D1CFC7;
    border-radius: 48px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 100%;
    background-image: url('../image/first-3-1.webp');
}

.three-left1 .one {
    padding: 48px 7.3% 20px;
    color: #FEFCFC;
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
}

.three-left1 .two {
    padding: 0 7.3% 31px;
    color: #FEFCFC;
    font-size: 18px;
    line-height: 32px;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 1);
    opacity: 0.9;
}

.con-padding {
    padding:0 7.3%;
    position: relative;
    z-index: 2;
}

.three-left2 {
    background-color: #3EABBF;
    border-radius: 48px;
    overflow: hidden;
}

.three-left2 .bg-img {
    position: absolute;
    top: 0;
    right: 0;

    /* 响应式尺寸：在 408px 宽屏幕上，63vw ≈ 257px */
    width: 63vw;
    height: 63.5vw;

    /* 限制最大尺寸 = 图片原始尺寸，防止拉伸模糊 */
    max-width: 257px;
    max-height: 259px;

    /* 最小尺寸，防止太小 */
    min-width: 150px;
    min-height: 150px;

    /* 背景图：不重复、居中、不裁剪 */
    background: url(../image/small-iput.webp) no-repeat center center;
    background-size: contain;
    /* 关键：保持完整图片，不裁剪 */
    z-index: 1;
}

.three-left2-font1 {
    font-size: 60px;
    line-height: 30px;
    color: #fff;
    font-style: italic;
    margin-top: 73px;
    margin-bottom: 78px;
}

.three-left2-font2 {
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    color: #FEFCFC;
    padding: 0 16px 20px 0;
}

.three-left2-font5 {
    font-size: 18px;
    line-height: 30px;
    color: #FEFCFC;
    padding-bottom: 80px;
}

.three-left3 {
    background-color: #F1F1F1;
    border-radius: 48px;
}

.three-left3 .one {
    padding-top: 68px;
    padding-bottom: 20px;
    font-weight: 500;
    color: #313131;
    font-size: 24px;
    line-height: 30px;
}

.three-left3 .two {
    font-size: 18px;
    line-height: 30px;
    color: #666666;
    width: 85%;
}

.three-left3 .two {
    padding-bottom: 54px;
}

.three-bg-div .three-bg3-l {
    bottom: 610px;
    left: 2px;
    width: clamp(45px, 3.8vw, 73px);
}

.three-bg-div .three-bg3-r {
    top: -100px;
    right: 0;
    width: clamp(72px, 12.29vw, 236px);
    ;
}

.three-m-one {
    background-color: #2D83A1;
    color: #FEFCFC;
    border-radius: 48px;
}

.three-m-one .one {
    font-size: 500;
    line-height: 36px;
    font-size: 24px;
    padding-bottom: 19px;
    width: 85%;
    padding-top: 27px;
}

.three-m-one .three {
    font-size: 18px;
    line-height: 30px;
    padding-bottom: 29px;
    width: 90%;
}

.three-m-two {
    background-color: #F1F1F1;
    border-radius: 48px;
    background-image: url('../image/first-san.svg');
    background-position: top 60px left 30px;
    background-repeat: no-repeat;
}

.three-m-two .one {
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    padding-top: 162px;
    padding-bottom: 20px;
    color: #313131;
}

.three-m-two .two {
    font-size: 18px;
    line-height: 30px;
    color: #666666;
    padding-bottom: 50px;
    padding-right: 7.3%;
}

.three-m-three {
    background-color: #F1F1F1;
    border-radius: 48px;
    padding-right: 7.3%;
}

.three-m-three .one {
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    padding-top: 26px;
    padding-bottom: 20px;
    color: #313131;
}

.three-m-three .two {
    font-size: 18px;
    line-height: 30px;
    color: #666666;
    padding-bottom: 30px;
}

.four-m-one {
    background-color: #F1F1F1;
    border-radius: 48px;
    padding-right: 7.3%;
    background-image: url('../image/first-hotel.svg');
    background-position: top 60px left 30px;
    background-repeat: no-repeat;
}

.four-m-one .one {
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    padding-top: 162px;
    padding-bottom: 20px;
    color: #212121;
}

.four-m-one .two {
    font-size: 18px;
    line-height: 30px;
    color: #666666;
    padding-bottom: 60px;
}

.four-m-two {
    background-color: #3EABBF;
    border-radius: 48px;
    padding-right: 7.3%;
}

.four-m-two .one {
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    padding-top: 39px;
    padding-bottom: 20px;
    color: #FFFFFF;
}

.four-m-two .two {
    font-size: 18px;
    line-height: 30px;
    color: #FFF;
    padding-bottom: 9px;
}

.four-m-three {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 100%;
    background-image: url('../image/first-baota.webp');
    border-radius: 48px;
}

.four-m-three .one {
    padding: 68px 7.3% 20px;
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    color: #FEFCFC;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);
}

.four-m-three .two {
    font-size: 18px;
    line-height: 30px;
    color: #FEFCFC;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);
    padding: 0 7.3% 60px;
}

.three-right .bg-img {
    position: absolute;
    top: 0;
    right: 0;

    /* 响应式尺寸：在 408px 宽屏幕上，63vw ≈ 257px */
    width: 63vw;
    height: 63.5vw;

    /* 限制最大尺寸 = 图片原始尺寸，防止拉伸模糊 */
    max-width: 257px;
    max-height: 259px;

    /* 最小尺寸，防止太小 */
    min-width: 150px;
    min-height: 150px;

    /* 背景图：不重复、居中、不裁剪 */
    background: url(../image/small-iput.webp) no-repeat center center;
    background-size: contain;
    /* 关键：保持完整图片，不裁剪 */
}

.three-right {
    background-color: #2D83A1;
    border-radius: 48px;
}

.three-right .con {
    padding: 0 7.3%;
}

.three-right .con .one {
    line-height: 36px;
    font-size: 60px;
    padding-top: 80px;
    padding-bottom: 55px;
    font-style: italic;
    color: #FFF;
}

.three-right .con .two {
    font-size: 24px;
    line-height: 36px;
    font-weight: 500;
    color: #FFF;
    padding-bottom: 20px;
    z-index: 2;
}

.three-right .con .three {
    font-size: 18px;
    line-height: 30px;
    color: #FEFCFC;
    padding-bottom: 85px;
}

.three-right2 {
    padding: 0 7.3%;
    border-radius: 48px;
    background-color: #F1F1F1;
    background-image: url('../image/first-zou.svg');
    background-position: top 60px left 30px;
    background-repeat: no-repeat;
}

.three-right2 .one {
    font-size: 24px;
    line-height: 36px;
    font-weight: 500;
    color: #313131;
    padding-top: 167px;
    padding-bottom: 20px;
}

.three-right2 .two {
    font-size: 18px;
    line-height: 30px;
    color: #666666;
    padding-bottom: 30px;
}

.four-content {
    padding-left: clamp(20px, 2.604vw, 207px);
    padding-right: clamp(20px, 2.604vw, 207px);
    background-image: url('../image/first-bg-f1.webp');
    background-position: 45% 50%;
    background-repeat: no-repeat;
}


@media (max-width: 1600px) {
    .four-shape {
        width: 596px;
        height: 320px;
        transform: skew(-20deg);
        padding-left: 31px;
        left: clamp(20px, 5.5vw, 160px);
    }

    .four-shape div {
        transform: skew(20deg);
    }

    .four-shape::after {
        width: 560px;
        height: 325px;
        background-position: right -10px bottom 10px, left 18px bottom 20px;
        transform: skew(20deg);
        bottom: -5px;
        left: -6.6%;
    }

    .four-shape .one {
        padding-top: 40px;
        margin-left: -90px;
    }

    .four-shape .two {
        margin-left: -55px;
    }

    .four-shape-div {
        padding-top: 80px;
    }

    .four-shape2 {
        width: 580px;
        height: 364px;
        transform: skew(-20deg);
        left: clamp(-178px, 5vw, 50px);
        top: 39px;
        border-radius: 108px 68px 68px 100px;
    }

    .four-shape2 .four-shape2-bg-r {
        transform: skew(20deg);
        left: -71px;
        top: 34px;
        border-radius: 181px 68px 68px 74px;
        width: 100%;
    }

    .four-bg-r {
        top: -20%;
        right: 5%;
        width: clamp(100px, 19.84vw, 477px);
        transform: skew(20deg);
    }

    .four-shape3 {
        width: 554px;
        height: 321px;
        border-radius: 68px 100px 58px 150px;
        transform: skew(-20deg);
        left: -15px;
    }

    .four-shape3 img {
        transform: skew(20deg);
        margin-left: 43px;
        border-radius: 87px 68px 33px 90px;
        width: 100%;
        margin-top: 6px;
    }

    .four-shape4 {
        width: 478px;
        height: 320px;
        transform: skew(-20deg);
    }

    .four-shape4 div {
        transform: skew(20deg);
    }

    .four-shape4::after {
        width: 646px;
        height: 320px;
        background-position: left 0px bottom -4px, right 265px bottom 40px, right 40px bottom 32px;
        transform: skew(20deg);
        bottom: 0px;
        left: -16px;
    }

    .four-shape4 .one {
        padding-top: 31px;
    }

    .four-shape4 .two {
        padding-top: 17px;
        right: -44px;
    }

    .four-bg-l {
        position: absolute;
        bottom: 1%;
        left: clamp(30px, 4.968vw, 200px);
        z-index: 10;
    }

}

@media (max-width: 1400px) {}


/* 3. 适配 1200px 及以下（如 1366×768 笔记本） */
@media (max-width: 1200px) {
        .four-shape-div {
        padding-top: 50px;
    }
    .four-shape {
        width: 571px;
        height: 302px;
        transform: skew(-22deg);
        padding-left: 31px;
        left: clamp(20px, 3.5vw, 160px);
    }
    .four-shape::after {
        width: 423px;
        height: 305px;
        background-position: right -10px bottom 10px, left 18px bottom 20px;
        transform: skew(22deg);
        bottom: -3px;
        left: -8.8%;
    }
}


/* 4. 适配 992px 及以下（如平板横屏） */
@media (max-width: 992px) {}


/* 5. 适配 768px 及以下（如平板竖屏） */
@media (max-width: 768px) {}


/* 6. 适配 576px 及以下（如手机） */
@media (max-width: 991.98px) {
    .header-bg {
        padding-top: 80%;
    }

    .header-bg-div {
        height: 14px;
    }

    .header-text {
        width: 70%;
    }

    .one-font1 {
        font-size: 18px;
        line-height: 22px;
    }

    .three-font1 {
        font-size: 22px;
        line-height: 30px;
    }

    .one-font1 .two,
    .three-font1 .two {
        margin-left: -5px;
    }

    .one-row {
        margin-top: 0;
        margin-bottom: 42px;
    }

    .one-font2 {
        height: 3px;
        margin-top: 10px;
        margin-bottom: 11px;
    }

    .one-font3 {
        font-size: 14px;
        line-height: 26px;
        margin-bottom: 0;
    }

    .one-font4 img {
        width: 45px;
        height: 45px;
    }

    .one-font4 {
        margin-top: 29px;
    }

    .one-font6 {
        font-size: 16px;
        line-height: 20px;
        padding-bottom: 6px;
    }

    .one-font7,
    .one-font8 {
        font-size: 13px;
        line-height: 20px;
        padding-bottom: 16px;
    }

    .one-font8-border {
        border: none;
    }

    .one-left-div {
        padding-bottom: 9px;
    }

    .one-font9 {
        font-size: 22px;
        line-height: 36px;
        left: 48% !important;
    }

    .one-right-div {
        padding-left: 9%;
    }

    .two-font1 span {
        font-size: 22px;
        line-height: 30px;
    }

    .two-font1 .two {
        margin-left: 0;
    }

    .two-font2 {
        width: 10%;
        height: 3px;
    }

    .two-font3 {
        font-size: 13px;
        line-height: 22px;
    }

    .two-font4 {
        display: none;
    }

    .shape-font1-img,
    .shape-font1-img2,
    .shape-font1-img3 {
        background-size: 36px 36px;
    }

    .shape-font1-img2 {
        background-image: url('../image/anquan-baise.svg');
    }

    .shape-font1-img3 {
        background-image: url('../image/homestay-baise.webp');
    }

    .shape {
        width: 288px;
    }

    .shape-font1,
    .shape-font5 {
        font-size: 16px;
        line-height: 32px;
        margin-top: 18px;
    }

    .shape-font2,
    .shape-font6 {

        margin-top: 28px;
    }

    .shape-font3,
    .shape-font4 {

        width: 248px;
        margin-top: 20px;
        font-size: 14px;
        line-height: 21px;
    }

    .shape-font4,
    .shape-font5 {

        color: #FFF;
    }

    .shape-font6 {
        background-color: #FFF;
    }

    .shape::after {
        background-size: 138px 127px;
        border-radius: 48px;
        bottom: -60px;
    }

    .shape-color {
        background-color: #3EABBF;
    }

    .shape-color::after {
        background-color: #3EABBF;
    }

    .shape-mt {
        margin-top: 40px !important;
    }

    .two-section-div {
        padding-bottom: 67px;
    }

    .three-font1 {
        padding-top: 50px;
    }

    .three-font1 {
        width: 245px;
        margin: auto;
    }

    .three-bg-div .three-bg3-r {
        top: -77px;
    }

    .three-bg-div {
        padding-top: 0;
    }

    .three-div {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 16px;
    }

    .three-bg-div1,
    .three-bg-div3 {
        padding-right: 15px;
    }

    .three-left1 {
        border-radius: 18px;
        margin-bottom: 16px !important;

    }

    .three-left1 .one {
        font-size: 14px;
        line-height: 21px;
        padding: 25px 0 7px 14px;
    }

    .three-left1 .two {
        font-size: 12px;
        line-height: 18px;
        padding: 0 21px 21px 21px;
    }

    .three-left2 {
        margin-top: 0;
        border-radius: 18px;
        margin-bottom: 16px !important;
    }

    .three-left2 .bg-img {
        width: 126px;
        top: -53px;
    }

    .con-padding {
        padding-left: 14px;
    }

    .three-left2-font1 {
        font-size: 30px;
        line-height: 30px;
        padding-top: 33px;
        margin-top: 0;
        margin-bottom: 20px;
    }

    .three-left2-font2 {
        font-size: 14px;
        line-height: 21px;
        padding: 0 10px 14px 0;
    }

    .three-left2-font5{
        font-size: 12px;
        line-height: 18px;
        width: 136px;
        padding-bottom: 48px;
    }

    .three-left3 {
        border-radius: 18px;
    }

    .three-left3 .one {
        font-size: 14px;
        line-height: 21px;
        padding-top: 26px;
        padding-bottom: 13px;
    }

    .three-left3 .two {
        font-size: 12px;
        line-height: 18px;
        padding-bottom: 49px;
    }

    .three-m-one {
        border-radius: 18px;
        margin-bottom: 16px !important;

    }

    .three-m-one .one {
        font-size: 14px;
        line-height: 21px;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .three-m-one .three {
        font-size: 12px;
        line-height: 18px;
        padding-bottom: 10px;
    }

    .three-m-two {
        border-radius: 18px;
        background-size: 24px 24px;
        background-position: top 22px left 14px;
        margin-bottom: 16px !important;

    }

    .three-m-two .one {
        padding-top: 80px;
        padding-bottom: 16px;
        font-size: 14px;
        line-height: 21px;
    }

    .three-m-two .two {
        font-size: 12px;
        line-height: 18px;
        padding-bottom: 21px;
    }

    .three-m-three {
        border-radius: 18px;
        margin-bottom: 16px !important;
    }

    .three-m-three .one {
        padding-top: 10px;
        padding-bottom: 8px;
        font-size: 14px;
        line-height: 21px;
    }

    .three-m-three .two {
        font-size: 12px;
        line-height: 18px;
        padding-bottom: 14px;
    }

    .four-m-one {
        position: relative;
        z-index: 2;
        margin-top: 0 !important;
        border-radius: 18px;
        margin-bottom: 16px !important;
        background-size: 24px 24px;
        background-position: top 22px left 14px;
    }

    .four-m-one .one {
        padding-top: 66px;
        padding-bottom: 16px;
        font-size: 14px;
        line-height: 21px;
    }

    .four-m-one .two {
        font-size: 12px;
        line-height: 18px;
        padding-bottom: 14px;
    }

    .three-right {
        margin-top: 0 !important;
        border-radius: 18px;
        margin-bottom: 16px !important;
    }

    .three-right .bg-img {
        width: 126px;
        top: -44px;
    }

    .three-right .con .one {
        padding-top: 33px;
        padding-bottom: 20px;
        font-size: 30px;
        line-height: 30px;
    }

    .three-right .con .two {
        font-size: 14px;
        line-height: 21px;
        padding-bottom: 16px;
    }

    .three-right .con .three {
        font-size: 12px;
        line-height: 18px;
        padding-bottom: 67px;
    }

    .four-m-two {
        border-radius: 18px;
        margin-bottom: 16px !important;
        margin-top: 0 !important;
        background-color: #2D83A1;
    }

    .four-m-two .one {
        padding-top: 28px;
        padding-bottom: 13px;
        font-size: 14px;
        line-height: 21px;
    }

    .four-m-two .two {
        font-size: 12px;
        line-height: 18px;
        padding-bottom: 18px;
    }

    .three-right2 {
        margin-top: 0 !important;
        border-radius: 18px;
        margin-bottom: 16px !important;
        background-size: 24px 24px;
        background-position: top 22px left 14px;
    }

    .three-right2 .one {
        padding-top: 66px;
        padding-bottom: 16px;
        font-size: 14px;
        line-height: 21px;
    }

    .three-right2 .two {
        font-size: 12px;
        line-height: 18px;
        padding-bottom: 25px;
    }

    .four-m-three {
        border-radius: 18px;
        margin-bottom: 16px !important;
        margin-top: 0 !important;
    }

    .four-m-three .one {
        padding-top: 18px;
        padding-bottom: 16px;
        font-size: 14px;
        line-height: 21px;
    }

    .four-m-three .two {
        font-size: 12px;
        line-height: 18px;
        padding-bottom: 12px;
    }

    .three-bg-div {
        padding-bottom: 17px;
    }

    .four-font1 .two {
        margin-left: 0;
    }

    .four-font1 {
        padding-top: 28px;
        margin-bottom: 12px;
        font-size: 22px;
        line-height: 30px;

    }

    .four-shape {
        width: 300px;
        height: 210px;
        border-radius: 34px 60px 34px 34px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transform: skew(-15deg);
        padding-left: 138px;
        left: 12px;
    }

    .four-shape div {
        position: relative;
        /* 确保内容在堆叠上下文中可提升 */
        z-index: 2;
        /* 高于 ::after */
        transform: skew(15deg);
        pointer-events: auto;
        /* 确保可交互 */
    }

    .four-shape::after {
        width: 300px;
        height: 210px;
        background-image: url('../image/first-bgs-f2.webp'), url('../image/first-bgs-r7.webp');
        /* 多个背景图 */
        background-position: right -8px bottom 15px, left 23px bottom 21px;
        transform: skew(15deg);
        border-radius: 34px 0 34px 34px;
        bottom: 0px;
        left: -38px;
    }

    .four-shape .one {
        padding-top: 15px;
        font-size: 16px;
        line-height: 30px;
        margin-left: -178px;
    }

    .four-shape .two {
        padding-top: 6px;
        font-size: 13px;
        line-height: 21px;
        margin-left: -159px;
    }

    .four-content {
        padding-left: clamp(10px, 2.604vw, 207px);
        padding-right: clamp(10px, 2.604vw, 207px);
        background-size: 390px;
        padding-bottom: 40px;
    }

    .four-shape-div {
        padding-top: 34px;
    }

    .four-shape2 {
        width: 344px;
        height: 210px;
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        background-color: #f3f3f3;
        border-radius: 33px 34px 34px 53px;
        transform: skew(-15deg);
        padding: 0;
        overflow: hidden;
        left: 16px;
        top: 12px;
    }

    .four-shape2 .four-shape2-bg-r {
        transform: skew(15deg);
        left: -23px;
        top: 0px;
        border-radius: 96px 34px 34px 34px;
        width: 350px;
    }

    .four-bg-r {
        display: none;
    }

    .shape-div-p0 {
        padding: 0;
    }

    .four-shape3 {
        width: 355px;
        height: 210px;
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        background-color: #f3f3f3;
        border-radius: 34px 34px 34px 34px;
        transform: skew(15deg);
        overflow: hidden;
        left: -20px;
        top: 15px;
        margin-top: 0;
    }

    .four-shape3 img {
        transform: skew(-15deg);
        left: 23px;
        border-radius: 34px 34px 34px 45px;
        width: 350px;
        margin: 0;
    }

    .four-shape4 {
        width: 300px;
        height: 210px;
        border-radius: 34px 34px 34px 34px;
        transform: skew(15deg);
        left: -6px;
        margin-top: 32px;
    }

    .four-shape4 div {
        transform: skew(-15deg);
    }

    .four-shape4::after {
        width: 308px;
        height: 210px;
        background-position: left 0px bottom 10px, right 128px bottom 26px, right 20px bottom 20px;
        background-size: 50px auto, 94px auto, 91px auto;
        transform: skew(-15deg);
        border-radius: 34px 34px 34px 34px;
        bottom: 0px;
        left: 25px;
    }

    .four-shape4 .one {
        padding-top: 15px;
        color: #3EABBF;
        font-size: 16px;
        line-height: 30px;
        margin-right: -35px;
    }

    .four-shape4 .two {
        padding-top: 6px;
        font-size: 13px;
        line-height: 21px;
        right: -14px;
    }

    .four-bg-l {
        bottom: 1%;
        left: 5%;
        width: 8px;
    }

}
@media (max-width: 576px) {
    .header-text {
        font-size: 24px;
        line-height: 36px;
    }
}