@media screen and (min-width: 1000px) {
    .layout-back {
        width: 100%;
    }

    .layout-back .line-box {
        width: 100%;
        height: 10.3rem;
        display: flex;
        align-items: center;
        border-bottom: .07rem solid #D2D2D2;
    }

    .layout-back .line-box > img {
        width: 1.5rem;
    }

    .layout-back .line-box > a {
        margin-left: 2rem;
        font-size: 1.43rem;
        color: #333333;
    }

    .layout-back .line-box > div {
        margin-left: 3rem;
        font-size: 2.57rem;
        color: #333333;
    }

    .layout-tags {
        width: 100%;
    }
    .layout-tags .top {
        margin-top: 2.8rem;
        width: 100%;
        height: 6.5rem;
        display: flex;
        align-items: center;
    }

    .layout-tags .top > li {
        width: 13.14rem;
        height: 100%;
        line-height: 6.5rem;
        font-size: 1.71rem;
        font-weight: 800;
        color: #333333;
        text-align: center;
        cursor: pointer;
    }

    .layout-tags .top > li.active {
        color: #AC610B;
        background: #FCF7F3;
    }

    .layout-tags .box > .bot {
        width: 100%;
        height: 7.5rem;
        background: #F8F8F8;
    }

    .layout-tags .bot .list {
        display: none;
        width: 100%;
        height: 100%;
    }

    .layout-tags .bot .list.active {
        display: flex;
        align-items: center;
    }

    .layout-tags .bot .list > li {
        margin-left: 3.9rem;
        font-size: 1.43rem;
        color: #333333;
        cursor: pointer;
    }

    .layout-tags .bot .list > li.active {
        /*color: #AC610B;*/
        border-bottom: 1px solid #AC610B;
    }

    .layout-tags .detail {
        padding: 4.86rem 0 11.86rem;
    }

    .layout-tags .detail .list {
        display: none;
    }

    .layout-tags .detail .list.active {
        display: block;
    }

    .layout-tags .detail .list > .item {
        display: none;
    }

    .layout-tags .detail .list > .item.active {
        display: flex;
        flex-direction: column;
    }

    .layout-tags .detail .list .item > .title {
        font-weight: 800;
        font-size: 2.29rem;
        color: #333333;
    }
    .layout-tags .detail .list .item .picture-img {
        margin-top: 3rem;
        width: 100%;
        height: 62rem;
        display: flex;
        justify-content: space-between;
    }

    .layout-tags .detail .list .item .picture-img .left {
        width: 71.44rem;
        height: 100%;
        border: 1px dotted #F2F2F2;
        overflow: hidden;
        position: relative;
    }

    .layout-tags .detail .list .item .picture-img .left #layoutsPhotoUrl {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .layout-tags .detail .list .item .picture-img .left .layoutPictureBtn {
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        width: 10rem;
        height: 2.93rem;
        background: #FFFFFF;
        font-size: 1.43rem;
        color: #333333;
        border-radius: 1.46rem;
        z-index: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .layout-tags .detail .list .item .picture-img .left .layoutPictureBtn img {
        width: 1.7rem;
        height: auto;
        margin-right: 4px;
    }

    .layout-tags .detail .list .item .picture-img .left div {
        width: 100%;
        height: 100%;
    }

    .layout-tags .detail .list .item .picture-img .left .slick-slide {
        height: 100%;
    }

    .layout-tags .detail .list .item .picture-img .left img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slick-track{
        min-width: 64.3rem;
    }

    .slick-prev{
        left: 2.14rem;
    }

    .slick-next {
        right: 2.14rem;
    }

    .layout-tags .detail .list .item .picture-img .right {
        width: 35.8rem;
        height: 100%;
    }

    .layout-tags .detail .list .item .picture-img .right > .title {
        font-weight: 800;
        font-size: 2.57rem;
        color: #333333;
    }

    .layout-tags .detail .list .item .picture-img .right > .name {
        margin-top: 2.4rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .layout-tags .detail .list .item .picture-img .right > .name span {
        font-weight: 500;
        font-size: 1.57rem;
        color: #333333;
    }

    .layout-tags .detail .list .item .picture-img .right > .area {
        width: 100%;
        margin-top: 2.7rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .layout-tags .detail .list .item .picture-img .right > .area li {
        font-size: 1.43rem;
        color: #999999;
    }

    .layout-tags .detail .list .item .picture-img .right > .area li.line {
        height: 1rem;
        width: .04rem;
        background: #999999;
    }

    .layout-tags .detail .list .item .picture-img .right > .floor {
        width: 100%;
    }

    .layout-tags .detail .list .item .picture-img .right > .floor .top,
    .layout-tags .detail .list .item .picture-img .right > .floor .bot .item {
        display: flex;
        align-items: center;
        width: 100%;
        height: 5.3rem;
        background: #7C4302;
    }

    .layout-tags .detail .list .item .picture-img .right > .floor .bot .item:nth-child(2n) {
        background: #F2F2F2;
    }

    .layout-tags .detail .list .item .picture-img .right > .floor .bot .item:nth-child(2n -1) {
        background: #FFFFFF;
    }

    .layout-tags .detail .list .item .picture-img .right > .floor .top span,
    .layout-tags .detail .list .item .picture-img .right > .floor .bot span{
        display: inline-block;
        width: calc(100% / 3);
        text-align: center;
        font-size: 1.43rem;
        color: #FFFFFF;
    }

    .layout-tags .detail .list .item .picture-img .right > .floor .bot span {
        color: #333333;
    }

    .layout-tags .detail .list .item .picture-img .right > .floor .bot {
        width: 100%;
        max-height: 40.4rem;
        overflow-y: auto;
    }
}

@media screen and (min-width: 350px) and (max-width: 999px) {
    .layout-back {
        padding: 1rem 0;
        width: 100%;
        border-bottom: .07rem solid #D2D2D2;
    }
    .layout-back .line-box {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .layout-back .line-box > img {
        width: 1rem;
    }

    .layout-back .line-box > a {
        margin-left: 1rem;
        font-size: 1rem;
        color: #333333;
    }

    .layout-back .line-box > div {
        margin-left: 1rem;
        font-size: 1.14rem;
        font-weight: bold;
        color: #333333;
    }

    .layout-tags {
        width: 100%;
        padding: 1rem 0;
    }

    .layout-tags .top {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .layout-tags .top > li {
        padding: .4rem 1rem;
        font-size: 14px;
        font-weight: 800;
        color: #333333;
        text-align: center;
        cursor: pointer;
    }

    .layout-tags .top > li.active {
        color: #AC610B;
        background: #FCF7F3;
    }

    .layout-tags .box > .bot {
        width: 100%;
        padding: 1rem;
        background: #F8F8F8;
    }

    .layout-tags .bot .list {
        display: none;
        width: 100%;
        height: 100%;
    }

    .layout-tags .bot .list.active {
        display: flex;
        align-items: center;
    }

    .layout-tags .bot .list > li {
        margin-left: 1.14rem;
        font-size: 14px;
        height: 20px;
        color: #333333;
        cursor: pointer;
    }

    .layout-tags .bot .list > li:first-child {
        margin-left: 0;
    }

    .layout-tags .bot .list > li.active {
        /* color: #AC610B; */
        border-bottom: 1px solid #AC610B;
    }

    .layout-tags .detail {
        padding: 1rem 0;
        width: 100%;
    }

    .layout-tags .detail .list {
        display: none;
    }

    .layout-tags .detail .list.active {
        display: block;
    }

    .layout-tags .detail .list > .item {
        display: none;
    }

    .layout-tags .detail .list > .item.active {
        display: flex;
        flex-direction: column;
    }

    .layout-tags .detail .list .item > .title {
        font-weight: 800;
        font-size: 1.14rem;
        color: #333333;
    }

    .layout-tags .detail .list .item .picture-img {
        margin-top: 1rem;
        width: 100%;
    }

    .layout-tags .detail .list .item .picture-img .left {
        width: 100%;
        height: 18rem;
        overflow: hidden;
        position: relative;
    }

    .layout-tags .detail .list .item .picture-img .left #layoutsPhotoUrl {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .layout-tags .detail .list .item .picture-img .left .layoutPictureBtn {
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        width: 8rem;
        height: 2rem;
        background: #FFFFFF;
        font-size: 1rem;
        color: #333333;
        border-radius: 1.46rem;
        z-index: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .layout-tags .detail .list .item .picture-img .left .layoutPictureBtn img {
        width: 1rem;
        height: auto;
    }


    .layout-tags .detail .list .item .picture-img .left div {
        width: 100%;
        height: 100%;
    }

    .slick-prev {
        left: 2.14rem;
    }

    .slick-next {
        right: 2.14rem;
    }

    .layout-tags .detail .list .item .picture-img .right {
        margin-top: 1rem;
        width: 100%;
    }

    .layout-tags .detail .list .item .picture-img .right > .title {
        font-weight: 800;
        font-size: 1.14rem;
        color: #333333;
    }

    .layout-tags .detail .list .item .picture-img .right > .name {
        margin-top: 1rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .layout-tags .detail .list .item .picture-img .right > .name span {
        font-weight: 500;
        font-size: 1rem;
        color: #333333;
    }

    .layout-tags .detail .list .item .picture-img .right > .area {
        width: 100%;
        margin-top: 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .layout-tags .detail .list .item .picture-img .right > .area li {
        font-size: 12px;
        color: #999999;
    }

    .layout-tags .detail .list .item .picture-img .right > .area li.line {
        height: 1rem;
        width: .04rem;
        background: #999999;
    }

    .layout-tags .detail .list .item .picture-img .right > .floor {
        margin-top: 2rem;
        width: 100%;
    }

    .layout-tags .detail .list .item .picture-img .right > .floor .top, .layout-tags .detail .list .item .picture-img .right > .floor .bot .item {
        display: flex;
        align-items: center;
        width: 100%;
        height: 44px;
        background: #7C4302;
    }

    .layout-tags .detail .list .item .picture-img .right > .floor .top span, .layout-tags .detail .list .item .picture-img .right > .floor .bot span {
        display: inline-block;
        width: calc(100% / 3);
        text-align: center;
        font-size: 12px;
        color: #FFFFFF;
    }

    .layout-tags .detail .list .item .picture-img .right > .floor .bot {
        width: 100%;
    }

    .layout-tags .detail .list .item .picture-img .right > .floor .bot .item:nth-child(2n -1) {
        background: #FFFFFF;
    }

    .layout-tags .detail .list .item .picture-img .right > .floor .bot .item:nth-child(2n) {
        background: #F2F2F2;
    }

    .layout-tags .detail .list .item .picture-img .right > .floor .bot span {
        color: #333333;
    }

}

/* 放大镜效果 */
#zoomContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;

    z-index: 6000; /* 确保它在最上层 */
}

#zoomContainer .zoomImages-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#zoomImage {
    max-width: 90%;
    max-height: 90%;
    cursor: zoom-out;
    transition: transform 0.3s ease; /* 为缩放效果添加平滑过渡 */
}

/* 可选：为了确保图片有平滑缩放效果 */
#zoomImage:hover {
    transform: scale(1.1); /* 鼠标悬停时稍微放大图片 */
}