/* 全局样式重置 */
@media screen and (min-width: 769px) {
     
    .main-backgrond {
        background-color: #000000;
    }
    /* 第二个页面 羽绒 & 羽毛页面*/
    .yumao {
        width: 100%;
        height: 60%;
        img {
            width: 100%;
            height: 100%;
            atsc-nav-left: 50%;

        }
    }

    .feather {
        height: 676px;

        .waterfowl {
            position: absolute;
            left: 19%;
            margin-top: 2%;
            width: 70%;
            height: 397px;

            .waterfowl_left {
                width: 240px;
                height: 60px;
                font-weight: 600;
                font-size: 3vw;
                color: #FFFFFF;
                line-height: 60px;
                text-align: left;
                font-style: normal;
            }

            .waterfowl_right {
                width: 170px;
                height: 60px;
                display: flex;
                justify-content: center; /* 水平居中 */
                align-items: center; /* 垂直居中 */
            }

            .waterfowl_bottom {
                margin-top: -60px;
                margin-left: 170px;
                width: 170px;
                height: 60px;

                display: flex;
                justify-content: center; /* 水平居中 */
                align-items: center; /* 垂直居中 */
            }

            .content {
                width: 65%;
                height: 120px;

                p {
                    font-weight: 400;
                    font-size: 1.5vw;
                    color: #FFFFFF;
                    line-height: 40px;
                    text-align: left;
                    font-style: normal;
                }
            }
        }

        .nav ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;

        }

        .nav li {
            border-left: 1px solid white;
            padding: 10px;
        }

        .nav li:first-child {
            border-left: none;
        }

        .tab-content {
            padding: 20px;
        }

        .tab-content.active {
            display: block;
        }

        .tab {
            text-decoration: none;
            color: white;
            width: 48px;
            height: 24px;
            font-weight: 600;
            font-size: 1.5vw;
            color: #808080;
            line-height: 1.5vw;
            text-align: right;
            font-style: normal;

        }

        .tab.active {
            color: #FFFFFF;
        }

        .mao {
            img {
                width: 30%;
                height: 548px;
                margin-top: 75px;
                margin-left: 63%;
            }
        }

        .typeColor {
            width: 33%;
            height: 180px;
            position: absolute;
            left: 19%;
            top: 1355px;
            display: flex;
            flex-direction: column;
        }

        .category {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .row1 {
            display: flex;
            justify-content: space-between;
            width: 100%;
            position: absolute;

            top: 30px;
        }

        .row2 {
            display: flex;
            justify-content: space-between;
            width: 100%;
            position: absolute;
            top: 110px;
        }

        .item {
            position: relative;
            top: -40px;
            justify-content: space-between;

            p {
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #333;
                color: #fff;
                padding: 10px;
                border-radius: 5px;
                font-size: 0.7vw;
                width: 181px;
                height: 55px;
                text-align: center;
                border-radius: 28px;
                border: 1px solid #FFFFFF;
                opacity: 0.5;
            }
        }

        .item img {
            width: 20%;
            height: 33px;
            position: relative;
            top: 45px;
            left: 30px;
            align-items: center;
        }

        .items {
            width: 80%;
            height: 24px;
            padding-top: -40%;
            font-weight: 600;
            font-size: 1.5vw;
            color: #FFFFFF;
            line-height: 24px;
            text-align: left;
            margin-top: 10px;
            font-style: normal;
        }
    }

    /*两张图片*/
    .imgs {
        display: flex;
    }

    .imgs .img1 img {
        width: 100%;

    }

    .imgs .img2 img {
        width: 100%;

    }

    .product {
        width: 120px;
        height: 60px;
        margin-left: 19%;
        margin-top: 60px;
        h1 {
            width: 320px;
            height: 60px;
            font-weight: 600;
            font-size: 2.8vw;
            color: #FFFFFF;
            line-height: 60px;
            text-align: left;
            font-style: normal;
            margin-top: 15%;
        }
    }

    .product2 {
        width: 63%;
        margin-left: 19%;
        margin-top: 40px;

        p {
            width: 76%;
            font-weight: 400;
            font-size: 1.5vw;
            color: #FFFFFF;
            line-height: 40px;
            text-align: left;
            font-style: normal;
            margin-bottom: 5%;
        }
    }

    .product2 .underline {
        border: none; /* 去除默认边框 */
        border-top: 1px solid #ffffff; /* 添加上边框作为下划线 */
        margin: 20px 0; /* 设置上边距和下边距 */
    }

    .product3 {
        width: 22%;
        margin-left: 19%;
        margin-top: 140px;

        h1 {
            font-weight: 600;
            font-size: 2.8vw;
            color: #FFFFFF !important;
            line-height: 60px;
            text-align: left;
            font-style: normal;
            margin-top: 10%;
            margin-bottom: 15%;
        }
    }

    .product4 {
        width: 63%;

        margin-left: 19%;
        margin-top: 40px;

        p {
            width: 47%;
            height: 40px;
            font-weight: 400;
            font-size: 24px;
            color: #FFFFFF;
            line-height: 40px;
            text-align: left;
            font-style: normal;
            margin-bottom: 5%;
        }
    }

    .product4 p {
        width: 100%;
        font-weight: 400;
        font-size: 1.5vw;
        color: #FFFFFF;
        text-align: left;
        font-style: normal;
    }

    .product4 .underline {
        border: none; /* 去除默认边框 */
        border-top: 1px solid #ffffff; /* 添加上边框作为下划线 */
        margin: 20px 0; /* 设置上边距和下边距 */
        margin-bottom: 5%;
    }

    .product5 {
        width: 10%;
        margin-top: 200px;
        margin-left: 27%;

        img {
            width: 100%;

        }
    }

    .product6 {
        width: 27%;
        height: 200px;
        margin-top: -170px;
        margin-left: 45%;

        p {
            font-weight: 400;
            font-size: 1.5vw;
            color: #FFFFFF;
            line-height: 50px;
            text-align: left;
            font-style: normal;
        }
    }

    .product7 {
        width: 60%;
        height: 80px;
        margin-top: 100px;
        margin-left: 19%;

        p {
            width: 120%;
            height: 100%;
            font-weight: 400;
            font-size: 1.5vw;
            color: #FFFFFF;
            line-height: 40px;
            text-align: left;
            font-style: normal;
        }
    }

    .product8 {
        width: 37%;
        margin-left: 19%;
        margin-top: 60px;

        p {
            font-weight: 400;
            font-size: 1.5vw;
            color: #FFFFFF;
            line-height: 50px;
            text-align: left;
            font-style: normal;
        }

        img {
            width: 40%;
            height: 192px;
            margin-left: 120%;
            margin-top: -200px;
        }
    }

    .product9 {
        width: 38%;
        margin-left: 19%;
        margin-top: 80px;

        p {
            width: 120%;
            height: auto;
            font-weight: 600;
            font-size: 60px;
            color: #FFFFFF;
            line-height: 60px;
            text-align: left;
            font-style: normal;
        }
    }

    /* 九宫格容器 */
    .grid-container {
        display: flex;
        flex-wrap: wrap;
        margin-left: 19%;
        margin-top: 30px;
        width: 63%;
        height: auto;
    }

    /* 单元格样式 */
    .cell {
        width: 31%;
        height: 200px;
        font-size: 24px;
        border: 1px solid #808080;
        margin: 1px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative; /* 为了让文字可以绝对定位 */
        cursor: pointer; /* 鼠标悬停时显示为可点击 */
    }

    /* 单元格中的文字 */
    .cell p {
        font-weight: 400;
        font-size: 1.5vw;
        color: #808080;
        line-height: 24px;
        text-align: left;
        margin: 0;
    }

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

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

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

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

    .product10 {
        width: 35%;
        margin-left: 19%;
        margin-top: 80px;

        h1 {
            width: 100%;
            font-weight: 600;
            font-size: 3vw;
            color: #FFFFFF;
            line-height: 60px;
            text-align: left;
            font-style: normal;
        }
    }

    /* 默认标签样式 */
    .product11 {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        flex-wrap: wrap;
        margin-left: 19%;
        margin-top: 30px;
    }

    .c1 {
        width: 10%;
        height: 60px;
        font-size: 1.5vw;
        border: 1px solid #808080;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        cursor: pointer;
        transition: background-color 0.3s ease, border 0.3s ease, transform 0.3s ease;
    }

    /* 单元格中的文字 */
    .c1 p {
        font-weight: 400;
        font-size: 1.5vw;
        color: #808080;
        line-height: 24px;
        text-align: center;
        margin: 0;
    }

    /* 高亮样式 */
    .c1.selected {
        border: 2px solid #ffffff;
        transform: scale(1.1); /* 标签点击时缩放 */
    }

    .c1.selected p {
        color: #ffffff;
    }

    /* 内容区域默认隐藏 */
    .product12 {
        width: 63%;
        height: 222px;
        margin-left: 20%;
        margin-top: 30px;
    }

    .product12 .content {
        display: none; /* 默认所有内容隐藏 */
        opacity: 0;
        transform: translateX(50px); /* 初始位置 */
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    /* 激活内容区域 */
    .product12 .content.active {
        display: block;
        opacity: 1;
        transform: translateX(0); /* 滑动动画 */
    }

    .product12 .content p {
        color: #FFFFFF;
        width: 42%;
        height: 240px;
        font-weight: 400;
        font-size: 1.5vw;
        line-height: 40px;
        text-align: left;
    }
    .con140 {
        display: flex;
        justify-content: center; /* 水平居中 */
    }
    .footc_l {

    }

    /* 图片区域默认隐藏 */
    .product13 {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
        margin-left: 30%;
        margin-top: -12%;
    }

    .product13 .image-pair {
        display: none; /* 默认隐藏图片 */
        opacity: 0;
        transform: translateX(50px); /* 初始位置 */
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .product13 .image-pair.show {
        display: flex;
        opacity: 1; /* 图片淡入 */
        transform: translateX(0); /* 图片滑入 */
    }

    .product13 .image-pair img {
        width: 80%;
        height: auto;
        object-fit: cover;
        margin: 0;
    }
}
.animated {
    opacity: 0; /* 初始状态不可见 */
    animation-fill-mode: forwards; /* 确保动画完成后保持最终状态 */
    animation-duration: 1.2s; /* 动画持续时间 */
}

/* 125% 缩放时调整 */
@media screen and (min-resolution: 120dpi) {
    .img11 {
        width: 30vw;     /* 调整图片大小 */
        margin-top: 1%;
    }
}

/* 150% 缩放时调整 */
@media screen and (min-resolution: 144dpi) {
    .img11 {
        width: 20vw;     /* 调整图片大小 */
        margin-top: 1%;
    }
    /* < 1920 的适配 */

/* < 1440 的适配 */
  
}