/* =====================================================================
   responsive.css — 响应式增强（在原站 1024px 断点之上补充 768px 断点）
   原则：不改动原站原有版式、间距与配色；仅在 <=768px 做小屏兜底，
        并全局防止横向滚动条与元素溢出。
   断点：1024px（原站已有） / 768px（新增）
   ===================================================================== */

/* ------------------------------------------------------------------
   [Global] 全局防溢出
   ------------------------------------------------------------------ */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

img,
video,
svg,
canvas {
    max-width: 100%;
}

/* 首屏视频在任意宽度下都不溢出 */
.banner video {
    width: 100%;
    height: 100vh;
    max-width: 100%;
    display: block;
    object-fit: cover;
}

/* ------------------------------------------------------------------
   [Breakpoint 1024px] 平板 —— 补齐原站在该断点未覆盖的元素
   ------------------------------------------------------------------ */
@media screen and (max-width: 1024px) {

    /* 子品牌 logo 栅格：小屏两列对齐，保持原图比例 */
    .section1 .content .flex2 .dis {
        justify-content: flex-start;
    }

    .section1 .content .flex2 .dis .img {
        flex: 0 0 auto;
        max-width: 45%;
    }

    .section1 .content .flex2 .dis .img img {
        width: auto;
        height: 100%;
        object-fit: contain;
    }

    /* Section4 通栏大图自适应 */
    .section4 {
        width: 92%;
        height: auto;
        margin: 60px auto;
    }

    .section4 img {
        height: auto;
    }

    /* 头部 logo 固定尺寸，避免 vw 换算过小 */
    .header .box .logo img {
        width: 84px;
        min-width: 64px;
    }
}

/* ------------------------------------------------------------------
   [Breakpoint 768px] 移动端 —— 单列纵向堆叠
   ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {

    /* --- Hero Banner --- */
    .banner {
        margin-top: 60px;
    }

    .banner video {
        height: auto;
        max-height: 78vh;
    }

    .banner .down {
        bottom: 20px;
    }

    /* --- Section 01 / OUR STORY --- */
    .section1 {
        padding: 40px 5%;
    }

    .section1 .title {
        margin: 0 0 32px;
    }

    .section1 .content .flex2 .dis {
        gap: 18px;
    }

    .section1 .content .flex2 .dis .img {
        height: 34px;
        max-width: 44%;
    }

    /* --- Section 02 / SERVICES --- */
    .section2 {
        padding: 40px 5%;
    }

    .section2 .t {
        margin: 0;
    }

    .section2 .t .cut {
        height: auto;
        min-height: 170px;
    }

    .section2 .content .swiper1 .swiper-slide .img {
        height: 320px;
    }

    .section2 .content2 {
        margin: 40px auto 0;
        line-height: 1.8;
    }

    /* --- Section 03 / LIVING ART --- */
    .section3 .l .t1 {
        padding: 32px 5%;
    }

    .section3 .img {
        height: auto;
    }

    /* --- Section 04 / 通栏大图 --- */
    .section4 {
        width: 92%;
        margin: 40px auto;
    }

    /* --- Section 06 / LIFESTYLE AESTHETICS --- */
    .section6 {
        padding: 40px 5%;
        gap: 18px;
    }

    .section6 .r .title p:nth-child(2) {
        left: 20px;
    }

    .section6 .r .img {
        margin: 20px 0 0 0;
    }

    .section6 .big_img video,
    .section6 .item1 .img video {
        width: 100%;
        height: auto;
    }

    /* --- Section 07 --- */
    .section7 .l {
        height: auto;
        min-height: 360px;
        padding: 40px 5%;
    }

    .section7 .l .img {
        width: 88px;
        height: auto;
        margin: 0 auto 40px;
    }

    .section7 .l .p1 {
        width: 100%;
    }

    /* --- Back to Top --- */
    .goTop {
        right: 16px;
        bottom: 16px;
        width: 36px;
        height: 36px;
    }

    /* --- 移动端菜单兜底：保证不出现横向滚动 --- */
    .menuList,
    .menuList .item,
    .menuList .types_top {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* ------------------------------------------------------------------
   [Breakpoint 320px] 超小屏兜底
   ------------------------------------------------------------------ */
@media screen and (max-width: 360px) {
    .section1,
    .section2,
    .section6,
    .section7 .l {
        padding-left: 4%;
        padding-right: 4%;
    }

    .section2 .content .swiper1 .swiper-slide .img {
        height: 260px;
    }

    .section1 .content .flex2 .dis .img {
        height: 30px;
    }

    .foot .copyright {
        font-size: 10px;
        line-height: 1.6;
    }
}