.product-item-img {
    width: 4vw;
    opacity: 1;
    transition: all 0.3s;
}

@keyframes moveSubNa {
    0% {
        transform: translateY(0);
        height: 4vw; 
    }
    30% {
        transform: translateY(-2vw); 
        height: 4vw;
    }
    60% {
        transform: translateY(-2vw); 
        height: 1vw; 
        opacity: 0;
    }
    100% {
        transform: translateY(-2vw);
        height: 1vw; 
        opacity: 0;
    }
}

.product-item-img-up {
    animation: moveSubNa 0.3s forwards;
}

.product-item-img img {
    transform: scale(0.8);
}

img {
    width: 100%;
    transform: scale(1);
    transition: all 0.3s;
}

.html-content{
    display: block;
    width: 100%;
    margin-bottom:5.20833vw;
    min-height: 80vw; /* 使用视口高度作为最小高度 */
}
.product-name{
    text-align: center;
}


/* 全局样式 */
.main-content {
	font-family: "Manrope", "Harmony";
	font-weight: 400;
}

/* 
@media screen and (max-width: 768px) {
    .mian-content {
        width: auto;
        margin: 12.91667vw 5.55556vw 13.88889vw;
    }

} */

.tab-content {
    display: none;
}

/* 内容样式 */
.content-product {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3vw;
    background-color: #f5f5f5;
    width: 100%;
}

.banner-text-box{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 6.5vw;
}

.content-product-img {
    position: relative;
    overflow: hidden;
    width: 50%;
}

.content-product-text {
    position: relative;
    overflow: hidden;
    width: 50%;
    text-align: center;
    
}
.content-product-img img {
    width: 100%;
    display: block; /* 防止图片下方有间隙 */
    max-width: 100%; /* 确保图片不会超出其容器宽度 */
    transition: transform 0.3s ease; /* 为平滑过渡效果添加 */
    
}
.content-product-img img:hover {
    transform: scale(1.1);
    transition: all .3s;
    display: block;    
}

.content-product-img .img-tip {
    font-size: 0.625vw;
    position: absolute;
    left: 1.04167vw;
    bottom: 1.04167vw;
    color: #c6c6c6;
    
}

.banner-text-1 {
    font-size: 2.125vw;
    text-align: left;
    letter-spacing: 2px;
    line-height: 2;
}
.banner-text-2 {
    font-size: 0.9vw;
    line-height: 1.5;
    text-align: left;
}

/* 底部更多 */
.product-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    text-align: center;
    margin: 4vw 0;
}



.product-item-discover {
    /* margin-right: 3.125vw; */
    margin: 0px 3.8333vw;
    /* width: 17vw; */
    /* font-size: 0.83333vw; */
    /* color: #666; */
    cursor: pointer;
    position: relative;
    height: 100%;
    line-height: 2.125vw;
    display: inline-block;
    
}
.product-item-discover .product-name {
    width: 16vw;
    /* height: 15.83333vw; */
    display: flex;
    justify-content: center;
    align-items: center;

}
.product-img {
    /* width: 10.875vw; */
    width: 16vw;
    height: 15.43333vw;
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    overflow: hidden;
    /* transform: scale(0.7); */
}
.product-img img:hover{
    transform: scale(1.1);
    transition: all .3s;
    display: block;
}

.banner-btn-box{
    font-size: 0.83333vw;
}

.content-btn-box{
    text-align: left;
    margin-top: 3.125vw;
}
.product-btn-box{
    font-size: 1.13333vw;
    margin-left: 0.8vw;
    text-align: center!important;
}

.btn-product{
    font-size: 0.83333vw;
    padding: 0.12917vw 0.65833vw;
}
.btn-content{
    font-size: 0.83333vw;
    padding: 0.32917vw 1.45833vw;
}

.btn-product.buy-btn:hover {
    opacity: 0.7;
}
.btn-product.buy-btn {
    background-color: #000;
    color: #fff;
    font-size: 0.83333vw;
    border-radius: 2vw;
}
.btn-product.more-btn {
    /* background-color: #fff; */
    /* border-bottom: 0.10417vw solid #000; */

}

.btn-product.more-btn:hover::after {
    opacity: 0.7;
    content: " ";
    /* font-size: 0.8533vw; */
    /* font-size: 0.9333vw; */
}
.btn-content.buy-btn:hover {
    opacity: 0.7;
}
.btn-content.buy-btn {
    background-color: #000;
    color: #fff;
    font-size: 0.93333vw;
    border-radius: 2vw;
}
.btn-content.more-btn {
    font-size: 0.93333vw;
    /* background-color: #fff; */
    /* border-bottom: 0.10417vw solid #000; */

}

.btn-content.more-btn:hover {
    opacity: 0.7;
    /* font-size: 0.8533vw; */
    /* font-size: 0.9333vw; */
}
    /* 重写导航样式 */
.sub-header{
    border-bottom: 0.5px solid #eee;
    background-color: #fff;
    height: 6.3vw;
    transition: all 0.3s;
}

.sub-header-up{
    height: 3.1vw;
    transition: all 0.3s;
}

.sub-header .sub-title{
    font-size: 1.225vw;
    color: #3b3b3b;
    font-weight: 500;
    letter-spacing: 1px;
}


.sub-header .sub-item-list{
    display: flex;
    justify-content: flex-end;
}

.sub-header .sub-item-list .sub-item{
    margin-bottom: 0.5vw;
}



.sub-header .sub-nav-link.active,
.sub-header .sub-nav-link:hover{
    color: #000;

}
.sub-header .sub-nav-link {
    margin: 0 0.1vw;
    font-size: 0.83333vw;
    color: #666;
    cursor: pointer;
    position: relative;
    line-height: initial;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1vw 0.5vw 1vw;
    transition: all 0.3s;
}

.sub-header .sub-nav-link.active::after {
    height: 0.1vw;
    width: 70%;
    background-color: #000;
}
.sub-header .sub-nav-link:hover::after {
    height: 0.1vw;
    width: 70%;
    background-color: #fff;
}

/* 移动端 */
@media screen and (max-aspect-ratio: 51 / 50) {

    .html-content{
        margin: auto;
    }

        /* 重写导航样式 */
    .sub-header{
        display: block;
        text-align: center;
        background-color: #fff;
        height: 23vw;
    }
    .sub-header-up{
        height: 11vw;
        transition: all 0.3s;
    }
    .sub-header .sub-title {
        font-size: 4.25vw;
        width: 89vw;
        display: none;
    }

    .sub-header .sub-nav-r {
        height: 22.333vw;
    }

    .sub-header .sub-item-list {
        width: 89vw;
        align-items: flex-end;
        flex-direction: row;
        justify-content: center;
        height: 100%;
    }
    .sub-header .sub-nav-link.active::after, 
    .sub-header .sub-nav-link:hover::after {
        bottom: -0.6vw;
        width: 90%;
        height: 0.5vw;
    }
    .sub-header .sub-nav-link {
        font-size: 3.61111vw;
        line-height: 8.333vw;
        margin:0 3vw;
    }
    .product-item-img img {
        transform: scale(0.5);
    }

    /* 主体内容 */
    .content-product {
        display: flex;
        justify-content: space-between;
        margin: 0;
        background-color: #f5f5f5;
        width: 100%;
        flex-direction: column; /* 纵向排列 */
    }
    .content-product-img {
        overflow: hidden;
        width: 100%;
    }

    .content-product-text {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 54.95833vw;
        text-align: center; /* 文本内容居中 */
        display: flex; /* 使用flex布局使banner-text-box居中 */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        order: 2; /* 设置order属性使文本在图片之后显示 */
        background-color: #fff;
    }

    .product-item-img {
        width: 20.875vw;
        height: 12.83333vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .banner-text-box{
        margin: auto;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
    }

    .banner-text-1 {
        font-size: 8.3333vw;
        text-align: center;
    }

    .banner-text-2 {
        font-size: 3.1333vw;
        padding: 1vw 0;
        text-align: center;
    }
    .content-btn-box {
        text-align: center;
        /* top: 1vw; */
        margin: 4.8333vw 0;
    }
    .btn-content.buy-btn {
        background-color: #000;
        color: #fff;
        font-size: 3.93333vw;
        padding: 0 3vw;
        border-radius: 3vw;
    }
    .btn-content.more-btn {
        font-size: 3.93333vw;
        /* background-color: #fff; */
        /* border-bottom: 0.10417vw solid #000; */
    }

    /* 底部滑动 */
    .product-list {
        text-align: center;
        /* margin: 4vw 0; */
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        padding: 4vw;
        margin: 0;
        background-color: #f6f6f6;
    }

    .product-item-discover {
        margin: 10vw 3vw;
        padding: 4vw;
        cursor: pointer;
        position: relative;
        line-height: unset; 
        /* 8.125vw; */
        display: inline-block;
        background: #fff;
    }

    .product-img {
        width: auto;
        height: auto;
    }
    .product-img img {
        display: block;
    }


    .btn-product.buy-btn {
        background-color: #000;
        color: #fff;
        font-size: 3.83333vw;
        padding: 0 3vw;
        border-radius: 4vw;
    }
    .btn-product {
        font-size: 3.83333vw;
        padding: 1.32917vw 1.85833vw;
    }

    .product-item-discover .product-name {
        font-size: 5.83333vw;
        text-align: center;
        width: 68vw;
        white-space: normal;
    }
    .product-item-discover .product-name.long-name {
        font-size: 4.3vw;
        line-height: 7.95vw;
    }
    .product-item-discover .d16_2024 {
        font-size: 5.5vw;
    }

    .product-btn-box {
        font-size: 1.13333vw;
        line-height: 10vw;
    }

    /* @keyframes moveSubNa-mobile {
        0% {
            transform: translateY(0);
            height: 23vw; 
        }
        30% {
            transform: translateY(-2vw); 
            height: 23vw;
        }
        60% {
            transform: translateY(-2vw); 
            height: 1vw; 
            opacity: 0;
        }
        100% {
            transform: translateY(-2vw);
            height: 11vw; 
            opacity: 0;
        }
    } */

}