* {
    padding: 0px;
    margin: 0px;
}

body {
    background-color: white !important;
}

header {
    background-color: #ffffff00;
    width: 100%;
    height: 9vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 999999;
    overflow: hidden;
}



.headerlogo {
    flex: 7;
    transform: scale(0.18);
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    margin-left: 12vw;
}
.headerlogo img{
    
}

.headermenu {
    flex: 1.3;
    color: #000;
    font-size: 1.4vw;
}

.bar {
    flex: 1.5;
    color: #fff;
    transform: scale(0.3);
    /* margin-right: 1vw; */
    margin-left: -15vw;
}



.sider {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 0vw;
    height: 100vh;
    z-index: 99999999999999999;
    background-color: #fff;
    box-sizing: border-box;
    padding-left: 7%;
    padding-top: 4%;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    flex-wrap: nowrap;
}

    .sider button {
        font-size: 1.4vw;
        margin-left: 16vw;
        margin-top: -3vw;
        flex: 1;
    }

    .sider h2 {
        flex: 1;
        font: 18px / 1.5 Arial, Microsoft Yahei, Hiragino Sans GB, sans-serif;
        font-size: 1.3vw;
        font-weight: 900;
        /* font-size:1.5vw; */
        /* font-weight: 900; */
    }

    .sider ul li {
        font-style: italic;
        color: gray;
        font-size: 0.8vw;
    }

        .sider ul li span {
            display: none;
        }

.aboutlist {
    flex: 1;
}

.newproductslist {
    flex: 3;
}

.cobrandedcollectionlist {
    flex: 3;
}

.newslist {
    flex: 2;
}

.contactlist {
    flex: 2;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.menu {
    width: 80px;
    height: 58px;
    cursor: pointer;
    z-index: 50;
}

    .menu div {
        height: 9px;
        width: 100%;
        background-color: #000;
        border-radius: 3px;
        /* box-shadow: 0 2px 10px rgba(0,0,0,0.5); */
        transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }

    .menu .line-two {
        margin: 14px 0;
    }

    .menu:not(.active) .line-one {
        animation: line-one-rev 0.5s ease-in-out forwards;
    }

    .menu:not(.active) .line-two {
        animation: line-two-rev 0.5s ease-in-out forwards;
    }

    .menu:not(.active) .line-three {
        animation: line-three-rev 0.5s ease-in-out forwards;
    }

    .menu.active .line-one {
        animation: line-one 0.5s ease-in-out forwards;
    }

    .menu.active .line-two {
        animation: line-two 0.5s ease-in-out forwards;
    }

    .menu.active .line-three {
        animation: line-three 0.5s ease-in-out forwards;
    }

@keyframes line-one {
    0% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(22px) rotate(0);
    }

    100% {
        transform: translateY(22px) rotate(45deg);
    }
}

@keyframes line-two {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0);
    }
}

@keyframes line-three {
    0% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-22px) rotate(0);
    }

    100% {
        transform: translateY(-22px) rotate(135deg);
    }
}

@keyframes line-one-rev {
    0% {
        transform: translateY(22px) rotate(45deg);
    }

    50% {
        transform: translateY(22px) rotate(0);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

@keyframes line-two-rev {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes line-three-rev {
    0% {
        transform: translateY(-22px) rotate(135deg);
    }

    50% {
        transform: translateY(-22px) rotate(0);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}


/*关于我们*/
.aboutuschunck {
    width: 100%;
    /* height: 40vh; */
}

.aboutustop {
    width: 60%;
    height: 70vh;
    border: 1px solid black;
    margin-left: 20%;
}
/* .aboutustopleftimg{
    width: 25%;
    height:70vh;
    border:1px solid black;
    margin-left: 15%;
    display: inline-block;
    margin-top:10vh;
}
.aboutustoprightimg{
    width: 45%;
    height:70vh;
    border:1px solid black;
    display: inline-block;
    margin-left:-0.3vw;
    margin-top:10vh;
} */
.aboutustopimg {
    width: 70%;
    height: auto;
    /* border: 1px solid black; */
    margin-left: 15%;
    display: inline-block;
    margin-top: 10vh;
}

.backfunction {
    margin-left: 20%;
    margin-top: 5vh;
    display: inline-block;
    font-size: 1.2vw;
}


.backfunction1 {
    font-weight: 900;
}

    .backfunction1:hover {
        cursor: pointer;
    }

.backfunction2 {
    cursor: pointer;
}

.aboutuslogo {
    display: inline-block;
    width: 14vw;
    height: auto;
    margin-left: 18vw;
}

.aboutusparagraphenglish {
    margin-left: 20%;
    width: 60%;
    margin-top: 5vh;
    font-size: 0.8vw;
    word-spacing: 0.2vw;
}

.englishname {
    width: 60%;
    font-size: 0.8vw;
    word-spacing: 0.2vw;
    text-align: right;
    margin-left: 20%;
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.aboutusparagraphchinese {
    width: 60%;
    margin-left: 20%;
    margin-top: 5vh;
    font-size: 0.8vw;
    letter-spacing: 0.2vw;
}

.chinesename {
    width: 60%;
    text-align: right;
    font-size: 0.8vw;
    letter-spacing: 0.2vw;
    margin-left: 20%;
    margin-top: 5vh;
    margin-bottom: 5vh;
}
/*时尚大片*/
.campaignchunck {
    width: 100%;
    /* height: 219vh; */
    background-color: #fff;
}

.campaignfirstphotoarea {
    width: 95%;
    height: 100vh;
    /* background-color: aqua; */
    overflow: hidden;
    margin-left: 2.5%;
    /* transform: translateY(10vh); */
}

.campaignsecondphotoarea {
    display: inline-block;
    width: 40%;
    height: 109vh;
    margin-left: 9%;
    margin-right: 0%;
    margin-top: 15vh;
    /* background-color: antiquewhite; */
    overflow: hidden;
    transform: translateY(10vh);
}
.campaignthirdphotoarea {
    display: inline-block;
    width: 40%;
    height: 109vh;
    margin-left: 2%;
    margin-right: 0%;
    /* margin-top: -3vh; */
    /* background-color: aquamarine; */
    transform: translateY(-4vh);
    overflow: hidden;
}

.campaignfourthphotoarea {
    width: 82%;
    height: auto;
    margin-left: 9%;
    background-color: pink;
    border: 10px solid black;
    margin-top: 20vh;
    object-fit: cover;
    overflow: hidden;
}

.campaignfirstphoto {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.campaignsecondphoto {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.campaignthirdphoto {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.campaignfourthphoto {
    width: 100%;
    /* height:100%; */
    height: 100%;
    object-fit: cover;
}

.campaignfirstphoto:hover {
    cursor: pointer;
}

.campaignsecondphoto:hover {
    cursor: pointer;
}

.campaignthirdphoto:hover {
    cursor: pointer;
}

.campaignfourthphoto:hover {
    cursor: pointer;
}
/*视频展示*/
.showvideochunck {
    width: 100%;
    /* height: 30vh; */
    /* background-color:aqua; */
}

.showvideofirstphotoarea {
    width: 100%;
    height: 100vh;
    background-color: aqua;
    overflow: hidden;
    /* margin-left: 5%; */
}

.showvideofirstphoto {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.videoarea {
    width: 80%;
    height: 55vh;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10vh;
    /* background-color:pink; */
}

    .videoarea ul {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
    }

        .videoarea ul li {
            position: relative;
        }

            .videoarea ul li:nth-child(1) {
                width: 50%;
                height: 55vh;
                /* background-color:purple; */
            }

                .videoarea ul li:nth-child(1) video {
                    width: 90%;
                    margin-left: 5%;
                    height: 48vh;
                    /* border:1px solid black; */
                    object-fit: cover;
                    overflow: hidden;
                }

                .videoarea ul li:nth-child(1) img {
                    position: absolute;
                    left: 31%;
                    top: 24%;
                    z-index: 3;
                    transform: scale(0.2);
                }

            .videoarea ul li:nth-child(2) img {
                position: absolute;
                left: 31%;
                top: 24%;
                z-index: 3;
                transform: scale(0.2);
            }

            .videoarea ul li:nth-child(1) img:hover {
                cursor: pointer;
            }

            .videoarea ul li:nth-child(2) img:hover {
                cursor: pointer;
            }

            .videoarea ul li:nth-child(1) p {
                width: 90%;
                margin-left: 5%;
                font-size: 1vw;
            }

            .videoarea ul li:nth-child(2) {
                width: 50%;
                height: 55vh;
                /* background-color:blue; */
            }

                .videoarea ul li:nth-child(2) video {
                    width: 90%;
                    margin-left: 5%;
                    height: 48vh;
                    /* border:1px solid black; */
                    object-fit: cover;
                    overflow: hidden;
                }

                .videoarea ul li:nth-child(2) p {
                    width: 90%;
                    margin-left: 5%;
                    font-size: 1vw;
                }

.loadmorebtn {
    width: 13vw;
    height: 5vh;
    background-color: white;
    border: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 42%;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    margin-bottom: 6vh;
}

    .loadmorebtn:hover {
        cursor: pointer;
    }

    .loadmorebtn img {
        display: inline-block;
        width: 1vw;
        /* animation-name:rightarrowmove;
    animation-duration: 2s;
    animation-iteration-count: infinite; */
    }

@keyframes rightarrowmove {
    0% {
        transform: translateX(1vw);
    }

    50% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(1vw);
    }
}

.loadmorebtn span {
    display: inline-block;
}
/*contactus*/
.contactuschunck {
    width: 100%;
    /* height: 57vh; */
    /*background-color: aqua;*/
}

.contactustopimg {
    width: 100%;
    height: auto;
    margin-left: 0;
}

.companyinformation {
    margin-top: 10vh;
    width: 100%;
    height: 30vh;
    /*background-color: pink;*/
    display: flex;
    flex-direction: row;
}

.companyinformationleft {
    box-sizing: border-box;
    flex: 1;
    /*background-color: antiquewhite;*/
    padding-left: 7%;
    padding-top: 5vh;
    border-right: 1px solid gray;
    flex-direction: column;
    display: flex;
    /* justify-content: center; */
    align-items: center;
}

    .companyinformationleft h1 {
        font-weight: 900;
        font-size: 1.3vw;
        line-height: 4vh;
    }

    .companyinformationleft ul li {
        color: gray;
        font-size: 0.9vw;
        line-height: 4vh;
    }

.companyinformationright {
    box-sizing: border-box;
    /* background-color: violet; */
    flex: 1;
    padding-left: 6%;
    padding-top: 5vh;
}

    .companyinformationright ul {
        /* background-color: green; */
        width: 70%;
        height: 21vh;
        display: flex;
        flex-direction: row;
    }

        .companyinformationright ul li {
            /* background-color: skyblue; */
            flex: 1;
        }

            .companyinformationright ul li img {
                width: 100%;
                height: auto;
                /* border: 1px solid black; */
            }

            .companyinformationright ul li p {
                font-size: 0.8vw;
                color: #000;
                text-align: center;
            }

.contactform {
    width: 50%;
    height: 50vh;
    margin-left: 25%;
    margin-top: 10vh;
    /*background-color:purple;*/
    display: flex;
    flex-direction: column;
}

.textinput {
    flex: 1;
    font-size: 0.8vw;
    color: gray;
    border: 0px solid gray;
}

    .textinput:focus {
        outline: none;
    }

.telinput {
    flex: 1;
    font-size: 0.8vw;
    color: gray;
    border: 0px solid gray;
}

    .telinput:focus {
        outline: none;
    }

.messagetextarea {
    flex: 4;
    font-size: 0.8vw;
    color: gray;
    border: 0px solid gray;
    resize:none;
    margin-top: 2vh;
}

.hr1 {
    width: 10%;
    height: 2px;
    background-color: gray;
}

.hr2 {
    width: 10%;
    height: 2px;
    background-color: gray;
}

.hr3 {
    width: 10%;
    height: 2px;
    background-color: gray;
}

.messagetextarea:focus {
    outline: none;
}

.sendbtn {
    flex: 1.5;
    width: 30%;
    margin-top: 3vh;
    background-color: gray;
    color: #fff;
    font-size: 1vw;
    align-self: center;
}
.sendbtn:hover {
    background-color:#000;
    cursor:pointer;
}

.contactlastparagraph {
    width: 100%;
    height: 20vh;
    background-color: gray;
    color: #fff;
    text-align: center;
    font-size: 0.8vw;
    box-sizing: border-box;
    padding-top: 7vh;
    margin-top: 15vh;
    margin-bottom: -2vh;
}
/*product1*/
.goodschunck{
    width:100%;
    /* height: 125vh; */
}
.goodschunck h1{
    font-size:3vw;
    font-weight: 900;
    text-align: center;
    display: none;
}
.goodschuncktopimg{
    width: 100%;
    /* margin-left:5%; */
    height: auto;
    margin-bottom:10vh;
}
.goodschunck ul{
    width: 80%;
    height:auto;
    margin-left:10%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.goodschunck ul li{
    width: 16vw;
    height: 50vh;
    /* background-color:yellow; */
    margin-left:2vw;
    margin-bottom:3vh;
    /* border: 1px solid black; */
    position: relative; /* 新增：为覆盖层提供定位上下文 */
    overflow: hidden; /* 新增：隐藏超出部分 */
    list-style: none; /* 移除默认列表样式 */
}
.goodschunck ul li:hover{
    cursor:pointer;
}
.goodschunck ul li img{
    width:100%;
    height:100%;
    object-fit: cover; /* 让图片充满容器 */
}

/* 新增覆盖层样式 */
.overlay {
    position: absolute;
    top: 0;
    left: 0; /* 固定从左侧开始 */
    height: 100%; /* 高度始终满屏 */
    width: 0; /* 初始宽度为0 */
    background-color: rgba(200, 200, 200, 0.7);
    transition: width 0.5s ease; /* 仅宽度过渡动画 */
    z-index: 10;
}

/* 鼠标悬停时从左到右展开 */
li:hover .overlay {
    width: 100%; /* 展开至全屏宽度 */
}

/* 非悬停状态重置 */
li:not(:hover) .overlay {
    width: 0;
}

#contact {
    width: 100%;
    height: 5vh !important;
    background-color: #eaeaea;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 2.5vw;
    padding-top: 2.5vw;
    padding-left: 12vw;
    /* margin-top: 2vh; */
    box-sizing: border-box;
}

    #contact .contactcopyright {
        flex: 12;
        text-align: center;
        font-size: 0.8vw;
    }

    #contact div {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0.8vw;
    }

    #contact .number {
        flex: 6;
        margin-left: -10vw;
        font-size: 0.8vw;
    }

    #contact div:hover {
        cursor: pointer;
    }


.poparea {
    width: 100%;
    height: 10vh;
    display: flex;
    /*background-color:green;*/
    position: fixed;
    bottom: 7vh;
    /*top:353vh;*/
    z-index: 555555;
    display:none;
}

.blank {
    flex: 15;
}

.popwindow {
    flex: 1;
    background-color: skyblue;
    margin-right: 0px;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}

.popwindow1 {
    visibility: hidden;
}

.popwindow2 {
    visibility: hidden;
}

.popwindow3 {
    visibility: hidden;
}

.popwindow4 {
    visibility: hidden;
}

.popwindow5 {
    visibility: hidden;
}

.popwindow6 {
    visibility: hidden;
}

.popwindow7 {
    visibility: hidden;
}

.popwindow8 {
    visibility: hidden;
    margin-right: 15vw;
}

.logoarray8 {
    margin-right: 15vw;
}













        /* 瀑布流基础样式保持不变 */
        .masonry-container {
            column-count: 4;
            column-gap: 15px;
            padding: 0 15px;
        }
        .masonry-item {
            break-inside: avoid;
            margin-bottom: 15px;
            list-style: none;
            position: relative;
            overflow: hidden;
            cursor: zoom-in;
        }
        .masonry-item img {
            width: 100%;
            display: block;
            transition: transform 0.3s ease;
        }
        @media (max-width: 1200px) {.masonry-container {column-count: 3;}}
        @media (max-width: 768px) {.masonry-container {column-count: 2;}}
        @media (max-width: 480px) {.masonry-container {column-count: 1;}}

        /* Hover效果 */
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .masonry-item:hover .overlay {opacity: 1;}
        .masonry-item:hover img {transform: scale(1.05);}

        /* 自定义图片查看器样式（替换fancybox） */
        /* 遮罩层 */
        .custom-viewer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(240, 240, 240, 0.95);
            z-index: 9999999;
            display: none; /* 默认隐藏 */
            align-items: center;
            justify-content: center;
        }
        /* 图片容器 */
        .viewer-content {
            position: relative;
            max-width: 100vw;
            max-height: 100vh;
        }
        /* 放大后的图片 */
        .viewer-img {
            max-width: 100vw;
            max-height: 100vh;
            object-fit: contain;
            margin: 0 auto;
        }
        /* 通用按钮样式 */
        .viewer-btn {
            position: absolute;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.5) no-repeat center;
            background-size: 28px;
            cursor: pointer;
            z-index: 10000;
            transition: all 0.3s ease;
            border: none;
            outline: none;
        }
        .viewer-btn:hover {
            background-color: rgba(0, 0, 0, 0.8);
            transform: scale(1.1);
        }
        /* 上一张按钮 */
        .btn-prev {
            top: 50%;
            left: 20px;
            margin-top: -28px;
            background-image: url("../image/prevbtn.png");
        }
        /* 下一张按钮 */
        .btn-next {
            top: 50%;
            right: 20px;
            margin-top: -28px;
            background-image: url("../image/nextbtn.png");
        }
        /* 关闭按钮 */
        .btn-close {
            top: 80px;
            right: 20px;
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, 0.5) url("../image/close.png") center no-repeat;
            background-size: cover;
        }