@media screen and (max-width: 768px) {
    body {
        background-color: #FFFFFF;
    }

    .rongzi {
        width: 15%;
        margin-left: 25% !important;

    }

    #aboutUs {
        height: 30%; /* 控制容器的高度 */
        background-color: #333333; /* 背景色 */
        padding: 10px; /* 容器内间距增加，避免内容紧凑 */
        width: 90%;
        margin-left: 5%;
        margin-bottom: 3%;
        margin-top: 3%;
    }

    .left {
        height: 120%; /* 调整左侧内容的高度 */
        display: flex;
        flex-direction: column; /* 让内容垂直排列 */
        justify-content: center; /* 居中对齐 */
        align-items: flex-start; /* 左对齐 */
    }

    .left h1 {
        width: 100%; /* 让标题占满父元素的宽度 */
        font-weight: 600;
        font-size: 32px; /* 增大字体大小 */
        color: #FFFFFF;
        line-height: 1.5; /* 增加行高，增强可读性 */
        text-align: left; /* 左对齐 */
        margin: 0; /* 去除默认的外边距 */
        padding: 1px 0 1px 0; /* 增加上下内边距，增加标题间距 */
        letter-spacing: 1px; /* 字母间距，增强视觉效果 */
    }

    .right p {
        width: 259rpx;
        height: 109rpx;
        font-weight: 400;
        font-size: 9rpx;
        color: #FFFFFF;
        line-height: 16rpx;
        text-align: left;
        font-style: normal;
    /*    下边距*/
        margin-bottom: 2%;
    }
   .font1 {
       background-color: #333333;
       width: 90%;
       margin-left: 5%;
   }
    .top1 {
        width: 93%;
        height: 40%;
        margin-left:3%;
        margin-right:3%;
        margin-top:3%;

        .cn {
            width: 100%; /* 让标题占满父元素的宽度 */
            font-weight: 600;
            font-size: 32px; /* 增大字体大小 */
            color: #FFFFFF;
            line-height: 1.5; /* 增加行高，增强可读性 */
            text-align: left; /* 左对齐 */
            margin: 0; /* 去除默认的外边距 */
            padding: 1px 0 1px 0; /* 增加上下内边距，增加标题间距 */
            letter-spacing: 1px; /* 字母间距，增强视觉效果 */
            margin-bottom: 0.5%;
            margin-top: 1.5%;
        }

        .en {
            width: 100%; /* 让标题占满父元素的宽度 */
            font-weight: 600;
            font-size: 32px; /* 增大字体大小 */
            color: #FFFFFF;
            line-height: 1.5; /* 增加行高，增强可读性 */
            text-align: left; /* 左对齐 */
            margin: 0; /* 去除默认的外边距 */
            padding: 1px 0 1px 0; /* 增加上下内边距，增加标题间距 */
            letter-spacing: 1px; /* 字母间距，增强视觉效果 */
            margin-bottom: 1.5%;
        }
    }

    .bottom {
        width: 100%;
        height: 40%;

        p {
            width: 93%;
            font-weight: 400;
            font-size: 9rpx;
            color: #FFFFFF;
            line-height: 16rpx;
            text-align: left;
            font-style: normal;
            margin-bottom: 3%;
            margin-left: 3%;
        }
    }

    .img2 {
        background-color: #000000;
        width: 100%;
        height: 100%;
    }

    .font2 p {
        background-color: #333333;
        width: 90%;
        font-weight: 400;
        font-size: 9rpx;
        color: #FFFFFF;
        line-height: 16rpx;
        text-align: left;
        font-style: normal;
        margin-top: 3%;
        margin-bottom: 3%;
        margin-left: 5%;
    }

    .footcopy {
        width: 100%;
        height: 20%;
        background-color: #000000;
        padding-left: 6% !important;
        padding-bottom: 3% !important;
    }

    .join {
        width: 100%;
        height: 50px;
        font-weight: 600;
        font-size: 32px; /* 增大字体大小 */
        color: #FFFFFF;
        line-height: 1.5; /* 增加行高，增强可读性 */
        text-align: left; /* 左对齐 */
        margin: 0; /* 去除默认的外边距 */
        padding: 1px 0 1px 0; /* 增加上下内边距，增加标题间距 */
        letter-spacing: 1px; /* 字母间距，增强视觉效果 */
        background-color: #000000;
        /*    居中*/
        display: flex;
        justify-content: center;
    }

    .waptop_item {
        background-color: #000000;
    }

    /*    羽绒&羽毛页面 */
    . yumao {
        width: 100%;
        height: 40%;

        img {
            width: 100%;
            height: 100%;
        }
    }

    body {
        background-color: #0d0d0d;
    }

    /*     水禽羽毛*/
    .feather {
        width: 100%;
        height: 50%;
        background-color: #000000;

        .waterfowl {
            width: 90%;
            height: 100%;
            background-color: #333333;
            margin-top: 3%;
            margin-bottom: 3%;
            margin-left: 5%;
            .waterfowl_left {
                width: 100%;
                height: 100%;
                color: #FFFFFF;
                /*    字体大小*/
                font-size: 40px; /* 增大字体大小 */
            }

            .waterfowl_right {
                .l1 {
                    width: 100%;
                }

                width: 30%;
                a {
                    /*    居中*/
                    display: flex;
                    justify-content: center;
                    font-size: 30px;
                    width: 80%;
                    color: #FFFFFF;
                }
            }

            .waterfowl_bottom {
                .l2 {
                    width: 40%;
                    margin-left: 50%;
                }
                a {
                    /*    居中*/
                    display: flex;
                    justify-content: center;
                    font-size: 30px;
                    width: 60%;
                    color: #FFFFFF;
                    margin-top: -43px;
                    margin-left: 50%;

                }
            }
        }
    }

    #downy-feathers {
        p {
            color: #FFFFFF;
            font-size: 20px;
        }
    }

    #barbs {
        p {
            color: #FFFFFF;
            font-size: 20px;
        }
    }

    .typeColor {
        /*    让子元素横着拍成一排*/
        display: flex;
        justify-content: space-around;
    }

    .row1 .items {
        color: #FFFFFF;
        font-size: 30px;
        /*    居中*/
        display: flex;
        justify-content: center;
    }

    .row1 .item img {
        margin-top: 20px;
    }

    .row1 .item p {
        margin-top: 20px;
        margin-left: 30px;
        color: #FFFFFF;
    }

    .row2 .item img {
        margin-top: 30px;
    }

    .row2 .item p {
        margin-top: 35px;
        margin-left: 10px;
        color: #FFFFFF;
    }

    .row2 .items {
        color: #FFFFFF;
        font-size: 30px;
        /*    居中*/
        display: flex;
        justify-content: center;
    }

    .feather {
        .mao img {
            width: 60%;
            height: 60%;
            /*   居中*/
            display: flex;
            justify-content: center;
            margin-left: 80px;
        }
        .tab {
            color: #808080;
        }

        .tab-content.active {
            display: block;
        }
        .tab.active {
            color: #FFFFFF;
        }


    }

    .product h1 {
        color: #FFFFFF;
        font-size: 38px;
        /*    居中*/
        display: flex;
        justify-content: center;
        padding-bottom: 10px;
    }
    .product {
        background-color: #333333;
        width: 90%;
        margin-left: 5%;
        margin-top: 3%;
    }
    .product2 {
        background-color: #333333;
        width: 90%;
        margin-left: 5%;
        margin-bottom: 3%;
    }
    .product2 p {
        color: #FFFFFF;
        font-size: 20px;
        padding-bottom: 10px;
    }
  .product3 {
      background-color: #333333;
      width: 90%;
      margin-left: 5%;
      margin-top: 3%;
  }
    .product3 h1 {
        color: #FFFFFF;
        font-size: 38px;
        /*    居中*/
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

    .product4 p {
        color: #FFFFFF;
        font-size: 20px;
        background-color: #333333;
        width: 90%;
        margin-left: 5%;
        margin-top: 3%;
    }

    .product5 img {
        width: 50%;
        height: 50%;
        display: flex;
        justify-content: center;
        margin-left: 20%;
        margin-bottom: 10px;
    }
    .product6 {
        background-color: #333333;
        width: 90%;
        margin-left: 5%;
        margin-top: 3%;
    }
    .product6 p {
        color: #FFFFFF;
        font-size: 20px;
        margin-bottom: 10px;
    }
    .product7 {
        background-color: #333333;
        width: 90%;
        margin-left: 5%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .product7 p {
        color: #FFFFFF;
        font-size: 20px;
    }

    .product8 p {
        color: #FFFFFF;
        font-size: 20px;
        background-color: #333333;
        width: 90%;
        margin-left: 5%;
        margin-top: 3%;
    }

    .product8 img {
        width: 50%;
        height: 50%;
        display: flex;
        justify-content: center;
        margin-left: 20%;
        margin-bottom: 30px;
    }

    .product9 p {
        color: #FFFFFF;
        font-size: 20px;
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }

    .cell p {
        color: #FFFFFF;
        font-size: 20px;
    }

    /* 九宫格容器 */
    .grid-container {
        /* 使用 grid 布局，三列排列 */
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 每行3列 */
        grid-gap: 10px; /* 单元格之间的间距 */
        padding: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%; /* 保证容器占满宽度 */
    }

    /* 单元格样式 */
    .cell {
        width: 100%; /* 单元格宽度占满 */
        height: 180px; /* 设置一个适合移动端的高度 */
        font-size: 16px; /* 调整文字大小 */
        border: 1px solid #808080;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        cursor: pointer;
        overflow: hidden; /* 防止图片溢出 */
    }

    /* 单元格中的文字 */
    .cell p {
        font-weight: 400;
        font-size: 16px; /* 适合移动端的字体大小 */
        color: #808080;
        line-height: 24px;
        text-align: center;
        margin: 0;
    }

    /* 图片默认隐藏 */
    .cell img {
        width: 70%; /* 图片宽度调整为100% */
        height: auto;
        display: none; /* 默认隐藏图片 */
        clip-path: inset(3px); /* 根据需要调整裁剪区域 */
    }

    /* 当单元格显示图片时，文字调整到左上方 */
    .cell.with-image p {
        position: absolute; /* 绝对定位 */
        top: 10px; /* 距离上边距10px */
        left: 10px; /* 距离左边距10px */
        font-size: 14px; /* 调整字体大小 */
        color: #808080; /* 文字颜色 */
        line-height: 18px;
    }

    /* 高亮选中的单元格 */
    .cell.highlighted {
        border: 2px solid #ffffff; /* 高亮边框，使用白色 */
    }

    .cell.highlighted p {
        color: #ffffff; /* 高亮文字颜色 */
    }


    .product10 h1 {
        color: #FFFFFF;
        font-size: 30px;
        display: flex;
        justify-content: center;
    }

    /* 标签区调整 */
    .product11 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin-top: 20px;
    }

    .c1 {
        width: 100%;
        font-size: 18px;
        height: 50px;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #444;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .c1:hover {
        background-color: #666;
    }
   .underline {
       width: 90%;
       margin-left: 5%;
       margin-top: 3%;
   }
    .c1.selected {
        transform: scale(1);
        background-color: #999; /* 高亮效果 */
    }

    /* 内容区调整 */
    .product12 {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
        height: auto; /* 自适应内容高度 */
        min-height: 120px; /* 设置最小高度以防布局塌陷 */
        position: relative;
        overflow: hidden;
    }

    .product12 .content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        visibility: hidden; /* 默认隐藏 */
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .product12 .content.active {
        opacity: 1;
        visibility: visible; /* 显示内容 */
    }

    .product12 .content p {
        font-size: 15px;
        color: #FFFFFF;
        line-height: 28px;
        background-color: #333333;
        width: 90%;
        margin-left: 5%;
        margin-bottom: 5%;
    }

    /* 图片区调整 */
    .product13 {

        width: 100%;
    }

    .product13 .image-pair {
        display: flex; /* 使用flex布局来居中 */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        width: 100%; /* 保证容器宽度为100% */
    }

    .product13 #image1 {
        width: 60%;
        border-radius: 8px; /* 保持圆角 */
        margin-bottom: 10px;
        margin-left: 19%;
    }
    .product13 #image2 {
        width: 50%;
        border-radius: 8px; /* 保持圆角 */
        margin-bottom: 10px;
        margin-left: 26%;
    }
    .product13 #image3 {
        width: 30%;
        border-radius: 8px; /* 保持圆角 */
        margin-bottom: 10px;
        margin-left: 45%;
    }
    .product13 #image4 {
        width: 60%;
        border-radius: 8px; /* 保持圆角 */
        margin-bottom: 10px;
        margin-left: 19%;
    }
    .product13 #image5 {
        width: 40%;
        border-radius: 8px; /* 保持圆角 */
        margin-bottom: 10px;
        margin-left: 45%;
    }
    .product13 #image6 {
        width: 40%;
        border-radius: 8px; /* 保持圆角 */
        margin-bottom: 10px;
        margin-left: 25%;
    }


    /* 不需要 display: flex, 因为已经在容器上应用了 flex 布局 */
}


/* 防止点击切换影响布局 */
.product13 .image-pair.show {
    display: flex;
}