.am-theme-header.am-topbar.am-nav-absolute {
    background: transparent;
    box-shadow: none;
}

.am-home-content {
    background-color: #fff;
}

a:hover {
    color: var(--color-main);
}

.am-home-content {
    --padding-t: 9rem;
}

.am-re {
    position: relative;
}

@media only screen and (max-width: 1200px) {
    .am-home-content {
        --padding-t: 6rem;
    }
}

@media only screen and (max-width: 1000px) {
    .am-home-content {
        --padding-t: 4rem;
    }
}

@media only screen and (max-width: 640px) {
    .am-home-content {
        --padding-t: 3rem;
    }
}

/* 
 * 轮播
*/
.am-swiper-container {
    width: 100%;
    height: 89rem;
    overflow: hidden;
    position: relative;
}

.am-swiper-container .swiper-slide {
    background-color: #fff;
}

.am-swiper-container .swiper-slide img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.swiper-pagination {
    bottom: 10rem;
    z-index: 1;
}

.swiper-pagination-bullet {
    background-color: #fff;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 5rem);
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 5rem);
}

@media only screen and (max-width: 1440px) {
    .swiper-pagination {
        bottom: 6rem;
    }
}

@media only screen and (max-width: 1260px) {
    .swiper-pagination {
        bottom: 4rem;
    }
}

@media only screen and (max-width: 1000px) {
    .swiper-pagination {
        bottom: 2rem;
    }

    .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
        left: var(--swiper-navigation-sides-offset, 3rem);
    }

    .swiper-button-next,
    .swiper-rtl .swiper-button-prev {
        right: var(--swiper-navigation-sides-offset, 3rem);
    }
}

@media only screen and (max-width: 820px) {
    .swiper-pagination>div {
        padding-left: 2.6rem;
    }

    .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
        left: var(--swiper-navigation-sides-offset, 2rem);
    }

    .swiper-button-next,
    .swiper-rtl .swiper-button-prev {
        right: var(--swiper-navigation-sides-offset, 2rem);
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 3rem;
    }
}

@media only screen and (max-width: 640px) {
    .swiper-pagination {
        bottom: 1rem;
    }

    .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
        left: var(--swiper-navigation-sides-offset, 1rem);
    }

    .swiper-button-next,
    .swiper-rtl .swiper-button-prev {
        right: var(--swiper-navigation-sides-offset, 1rem);
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 2rem;
    }
}

/* 
 * 宣传海报
*/
.poster {
    padding-top: 1.8rem;
}

/* 
 * 商品分类展示
*/
.shop-category {
    --gap: 1.2rem;
    --position: 2rem;
    --title-size: 2.4rem;
    --p: 4.4rem;
    --item-size: 1.6rem;
    --item-lh: 3.6rem;
    padding-top: 1.8rem;
}

.shop-category-flex {
    display: flex;
    gap: var(--gap);

    .left,
    .right {
        width: 50%;
        overflow: hidden;
    }

    .left {
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        overflow: hidden;

        .left-flex {
            display: flex;
            gap: var(--gap);
            overflow: hidden;
        }
    }

    .title {
        position: absolute;
        bottom: var(--position);
        left: var(--position);
        font-weight: 500;
        font-size: var(--title-size);
        color: #FFFFFF;

        &:hover {
            color: var(--color-main);
        }
    }

    .categroy {
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.8);
        padding: var(--p);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;

        .item {
            display: block;
            font-weight: 400;
            font-size: var(--item-size);
            color: #FFFFFF;
            line-height: var(--item-lh);

            :hover {
                color: var(--color-main);
            }
        }
    }
}

@media only screen and (max-width: 1024px) {
    .shop-category {
        --gap: 1rem;
        --position: 1.5rem;
        --title-size: 2rem;
        --p: 2rem;
        --item-size: 1.4rem;
        --item-lh: 2.8rem;
    }
}

@media only screen and (max-width: 820px) {
    .shop-category {
        --gap: 1rem;
        --position: 1rem;
        --title-size: 1.8rem;
        --p: 1rem;
        --item-size: 1.2rem;
        --item-lh: 2rem;
    }
}

@media only screen and (max-width: 640px) {
    .shop-category {
        --gap: 1rem;
        --position: 1rem;
        --title-size: 1.8rem;
        --p: 1rem;
        --item-size: 1.2rem;
        --item-lh: 2rem;
    }

    .shop-category-flex {
        flex-direction: column;

        .left,
        .right {
            width: 100%;
        }
    }
}

/* 
 * 热销专区
*/
.hot {
    padding-top: 4.3rem;
}

@media only screen and (max-width: 640px) {
    .hot {
        padding-top: 2rem;
    }
}

/* 
 * 新产品
*/
.new-product {
    --mt: 6rem;
    --v-title: 2.4rem;
    --title-mt: 1.2rem;
    --title: 10rem;
    --title-lh: 12.3rem;
    --title-spacing: 1rem;
    --more: 2.1rem;
    --more-mt: 2.6rem;
    --more-height: 5.4rem;
    --more-p: 0 2.6rem;
    margin-top: var(--mt);
    position: relative;
    transition: all 0.5s;

    img {
        transition: all 0.5s;
    }

    &:hover img {
        /* 背景磨砂效果 */
        filter: blur(10px);
    }

    &:hover .title {
        /* 鼠标悬浮时的伸缩状态 */
        letter-spacing: calc(var(--title-spacing) * 1.4) !important;
    }

    &:hover .vice-title {
        /* 鼠标悬浮时的伸缩状态 */
        letter-spacing: 0.2rem !important;
    }

    .content {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: all 0.5s;

        .vice-title {
            font-weight: 500;
            font-size: var(--v-title);
            color: #FFFFFF;
            transition: all 0.5s;
        }

        .title {
            margin-top: var(--title-mt);
            font-weight: 900;
            font-size: var(--title);
            color: #FFFFFF;
            line-height: var(--title-lh);
            letter-spacing: var(--title-spacing);
            transition: all 0.5s;
        }

        .more {
            margin-top: var(--more-mt);
            height: var(--more-height);
            padding: var(--more-p);
            font-weight: 500;
            font-size: var(--more);
            color: #FFFFFF;
            letter-spacing: 0.2rem;
            border: 0.1rem solid #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .3s;
            position: relative;

            span {
                position: relative;
                z-index: 1;
            }

            &::before {
                content: '';
                position: absolute;
                inset: 0;
                width: 0;
                height: 100%;
                background-color: var(--color-main);
                transition: all 1s;
            }

            &:hover {
                border-color: var(--color-main);

                &::before {
                    width: 100%;
                }
            }
        }
    }

    &:hover .content {
        background: rgba(0, 0, 0, 0.3);
    }
}

@media only screen and (max-width: 1440px) {
    .new-product {
        --title: 9rem;
        --title-lh: 11rem;
    }
}

@media only screen and (max-width: 1200px) {
    .new-product {
        --mt: 5rem;
        --v-title: 2.2rem;
        --title-mt: 1rem;
        --title: 7rem;
        --title-lh: 9rem;
        --title-spacing: 1rem;
        --more: 2rem;
        --more-mt: 2.4rem;
        --more-height: 5rem;
        --more-p: 0 2.4rem;
    }
}

@media only screen and (max-width: 1024px) {
    .new-product {
        --mt: 4rem;
        --v-title: 2rem;
        --title-mt: 1rem;
        --title: 6rem;
        --title-lh: 8rem;
        --title-spacing: 1rem;
        --more: 1.8rem;
        --more-mt: 2rem;
        --more-height: 4.4rem;
        --more-p: 0 2rem;
    }
}

@media only screen and (max-width: 820px) {
    .new-product {
        --mt: 3rem;
        --v-title: 1.8rem;
        --title-mt: 0.6rem;
        --title: 5rem;
        --title-lh: 7rem;
        --title-spacing: 0.6rem;
        --more: 1.6rem;
        --more-mt: 1.5rem;
        --more-height: 4rem;
        --more-p: 0 1.8rem;
    }
}

@media only screen and (max-width: 640px) {
    .new-product {
        --mt: 2rem;
        --v-title: 1.4rem;
        --title-mt: 0.5rem;
        --title: 3.6rem;
        --title-lh: 5rem;
        --title-spacing: 0.5rem;
        --more: 1.6rem;
        --more-mt: 1rem;
        --more-height: 3.6rem;
        --more-p: 0 1.5rem;
    }
}

/* 
 * 热门推荐
*/
.shop-recommend {
    --mt: 5rem;
    --li-m: 3rem 4.8rem;
    --span: 2.2rem;
    --btn-box-mt: 2rem;
    --btn-box-mb: 2.4rem;
    --btn-p: 0 4.4rem;
    --btn-h: 4.6rem;
    --btn-br-r: 2.3rem;
    --btn: 1.8rem;
    margin-top: var(--mt);

    .item {
        display: flex;
        align-items: center;

        li {
            margin: var(--li-m);

            &.am-active {
                span {
                    color: var(--color-main);
                    font-weight: 500;
                }
            }

            span {
                font-size: var(--span);
            }
        }
    }

    .shop-recommend-list {
        position: relative;
        .swiper-container {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            opacity: 0;
            z-index: 0;

            /* transition: all .3s; */

            &.am-active {
                position: relative;
                opacity: 1;
                z-index: 1;
            }
        }
    }

    .text-btn-box {
        margin-top: var(--btn-box-mt);
        margin-bottom: var(--btn-box-mb);
        text-align: center;

        .text-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: var(--btn-p);
            height: var(--btn-h);
            border-radius: var(--btn-br-r);
            border: 0.1rem solid #D2BD84;
            font-weight: 500;
            font-size: var(--btn);
            color: #D2BD84;
            transition: all .3s;
            position: relative;
            overflow: hidden;

            span {
                position: relative;
                z-index: 1;
                transition: all 1s;
            }

            &::before {
                content: '';
                position: absolute;
                inset: 0;
                width: 0;
                height: 100%;
                background-color: var(--color-main);
                transition: all 1s;
            }

            &:hover {
                border-color: var(--color-main);

                span {
                    color: #fff;
                }

                &::before {
                    width: 100%;
                }
            }
        }
    }
}

@media only screen and (max-width: 1440px) {
    .shop-recommend {
        --mt: 5rem;
        --li-m: 3rem 4rem;
        --span: 2rem;
        --btn-box-mt: 2rem;
        --btn-box-mb: 2rem;
        --btn-p: 0 4rem;
        --btn-h: 4rem;
        --btn-br-r: 2rem;
        --btn: 1.6rem;
    }
}

@media only screen and (max-width: 1260px) {
    .shop-recommend {
        --mt: 4rem;
        --li-m: 2.5rem 3.5rem;
        --span: 2rem;
        --btn-box-mt: 2rem;
        --btn-box-mb: 2rem;
        --btn-p: 0 4rem;
        --btn-h: 4rem;
        --btn-br-r: 2rem;
        --btn: 1.6rem;
    }
}

@media only screen and (max-width: 1024px) {
    .shop-recommend {
        --mt: 3rem;
        --li-m: 2rem 3rem;
        --span: 1.8rem;
        --btn-box-mt: 2rem;
        --btn-box-mb: 2rem;
        --btn-p: 0 4rem;
        --btn-h: 4rem;
        --btn-br-r: 2rem;
        --btn: 1.6rem;
    }
}

@media only screen and (max-width: 820px) {
    .shop-recommend {
        --mt: 2rem;
        --li-m: 1rem 2rem;
        --span: 1.8rem;
        --btn-box-mt: 1.8rem;
        --btn-box-mb: 1.8rem;
        --btn-p: 0 3.6rem;
        --btn-h: 3.6rem;
        --btn-br-r: 1.8rem;
        --btn: 1.4rem;
    }
}

@media only screen and (max-width: 640px) {
    .shop-recommend {
        --mt: 1rem;
        --li-m: 1rem 2rem 1rem 0;
        --span: 1.6rem;
        --btn-box-mt: 1rem;
        --btn-box-mb: 1rem;
        --btn-p: 0 3rem;
        --btn-h: 3.4rem;
        --btn-br-r: 2rem;
        --btn: 1.4rem;
    }
}

/* 
 * 商品专区
*/
.shop-zone {
    --mt: 3rem;
    --box-p: 2.2rem;
    --box-mt: 28.6rem;
    --box-common-style-pt: 1.4rem;
    --box-desc-mb: 2.6rem;
    --list-p: 0.7rem;
    --list-img-bottom: 1rem;
    --content-p: 1.8rem 0;
    --ps-right: 2rem;
    --ps-bottom: 4rem;
    margin-top: var(--mt);
    /* 背景图在水平方向上重复 */
    background-repeat: repeat-x;
    background-position: top center;
    /* 背景图在顶部居中，确保水平居中且顶部对齐 */
    background-size: 100% auto;

    .shop-box {
        background-color: #fff;
        padding: var(--box-p);
        margin-top: var(--box-mt);

        .common-style {
            padding-top: var(--box-common-style-pt);

            .desc {
                margin-bottom: var(--box-desc-mb);
            }
        }

        .shop-hover {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: all 0.5s;
        }

        .shop-hover-ps {
            position: absolute;
            right: var(--ps-right);
            bottom: var(--ps-bottom);
        }

        .shop-hover-ps i {
            box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.3);
        }

        .shop-img:hover .shop-hover {
            opacity: 1;
        }

        .shop-hover i {
            cursor: pointer;
            display: inline-flex;
            width: 3.2rem;
            height: 3.2rem;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            color: #454545;
            border-radius: 100%;
            transition: all 0.5s;
            font-size: 1.6rem;
        }

        .shop-hover i:hover {
            background-color: var(--color-main);
            color: #fff;
        }

        .shop-list {
            padding: var(--list-p);

            .content {
                padding: 1.8rem 0;

                .title {
                    font-weight: 500;
                    font-size: 1.6rem;
                    text-align: center;
                }

                .unit {
                    font-weight: 500;
                    font-size: 1.4rem;
                    color: #000000;
                }
            }
        }
    }
}

@media only screen and (max-width: 1440px) {
    .shop-zone {
        --mt: 3rem;
        --box-p: 2.2rem;
        --box-mt: 20rem;
        --box-common-style-pt: 1.4rem;
        --box-desc-mb: 2.6rem;
        --list-p: 0.7rem;
        --list-img-bottom: 1rem;
        --content-p: 1.8rem 0;
        --ps-right: 2rem;
        --ps-bottom: 3rem;
    }
}

@media only screen and (max-width: 1260px) {
    .shop-zone {
        --mt: 2rem;
        --box-p: 2rem;
        --box-mt: 14rem;
        --box-common-style-pt: 1rem;
        --box-desc-mb: 2rem;
        --list-p: 0.7rem;
        --list-img-bottom: 1rem;
        --content-p: 1.6rem 0;
        --ps-right: 2rem;
        --ps-bottom: 2rem;
    }
}

@media only screen and (max-width: 1024px) {
    .shop-zone {
        --mt: 2rem;
        --box-p: 1.5rem;
        --box-mt: 10rem;
        --box-common-style-pt: 0.5rem;
        --box-desc-mb: 1.5rem;
        --list-p: 0.7rem;
        --list-img-bottom: 1rem;
        --content-p: 1.6rem 0;
        --ps-right: 1.5rem;
        --ps-bottom: 1.5rem;
    }
}

@media only screen and (max-width: 820px) {
    .shop-zone {
        --mt: 1rem;
        --box-p: 1rem;
        --box-mt: 10rem;
        --box-common-style-pt: 0;
        --box-desc-mb: 1rem;
        --list-p: 0.5rem;
        --list-img-bottom: 1rem;
        --content-p: 1.6rem 0;
        --ps-right: 1.2rem;
        --ps-bottom: 1.2rem;
        background-size: 150% auto;
    }
}

@media only screen and (max-width: 640px) {
    .shop-zone {
        --mt: 1rem;
        --box-p: 0rem;
        --box-mt: 8rem;
        --box-common-style-pt: 1rem;
        --box-desc-mb: 1rem;
        --list-p: 0.5rem;
        --list-img-bottom: 0.5rem;
        --content-p: 1rem 0;
        --ps-right: 1rem;
        --ps-bottom: 1rem;
        background-size: 150% auto;
    }
}

/* 
 * 我们承诺
*/
.we-promise {
    --mt: 3rem;
    --p: 3.8rem 0;
    --gap: 3.8rem;
    --item-p: 1.2rem 2.2rem;
    --item-gap: 1rem;
    --img: 4.1rem;
    --name: 1.8rem;
    --name-lh: 2.6rem;
    --value: 1.4rem;
    --value-lh: 2rem;
    background-color: #222;
    padding: var(--p);
    margin-top: var(--mt);

    .content {
        display: flex;
        justify-content: space-between;
        gap: var(--gap);

        .item {
            width: calc((100% - var(--gap) * 3) / 4);
            background: #D2BD84;
            color: #fff;
            padding: var(--item-p);
            display: flex;
            align-items: center;
            gap: 1rem;

            img {
                width: var(--img);
                height: var(--img);
            }

            .name {
                font-weight: 500;
                line-height: var(--name-lh);
                font-size: var(--name);
            }

            .value {
                font-size: var(--value);
                line-height: var(--value-lh);
            }
        }
    }
}

@media only screen and (max-width: 1260px) {
    .we-promise {
        --mt: 2rem;
        --p: 3rem 0;
        --gap: 3rem;
        --item-p: 1rem 2rem;
        --item-gap: 1rem;
        --img: 3.6rem;
        --name: 1.6rem;
        --name-lh: 2.5rem;
        --value: 1.2rem;
        --value-lh: 2rem;
    }
}

@media only screen and (max-width: 1024px) {
    .we-promise {
        --mt: 2rem;
        --p: 1.2rem 0;
        --gap: 1.2rem;
        --item-p: 1rem 1rem;
        --item-gap: 1rem;
        --img: 3.4rem;
        --name: 1.4rem;
        --name-lh: 2.3rem;
        --value: 1.2rem;
        --value-lh: 1.8rem;
    }
}

@media only screen and (max-width: 820px) {
    .we-promise {
        --mt: 1rem;
        --p: 1.2rem 0;
        --gap: 1.2rem;
        --item-p: 1rem 1rem;
        --item-gap: 1rem;
        --img: 3.4rem;
        --name: 1.4rem;
        --name-lh: 2.3rem;
        --value: 1.2rem;
        --value-lh: 1.8rem;

        .content {
            flex-wrap: wrap;

            .item {
                width: calc(50% - 0.6rem);
            }
        }
    }
}

@media only screen and (max-width: 640px) {
    .we-promise {
        --mt: 1rem;
        --p: 1.2rem 0;
        --gap: 1.2rem;
        --item-p: 0.8rem 0.2rem 0.8rem 0.5rem;
        --item-gap: 0rem;
        --img: 2.5rem;
        --name: 1.2rem;
        --name-lh: 2rem;
        --value: 1rem;
        --value-lh: 1.5rem;

        .content {
            .item {
                gap: 0.3rem;
            }
        }
    }
}

/* 
 * 常用样式
*/
.common-style {
    --title-size: 3rem;
    --desc-mt: 1.4rem;
    --desc-mb: 3rem;
    --p: 1.6rem 0;
    --title: 1.6rem;
    --unit: 1.8rem;

    .title {
        font-weight: 500;
        font-size: var(--title-size);
        color: #000000;
        text-align: center;
    }

    .desc {
        margin-top: var(--desc-mt);
        font-size: 1.4rem;
        color: #666666;
        text-align: center;
        margin-bottom: var(--desc-mb);
    }

    .shop-list {
        .content {
            padding: var(--p);

            .title {
                font-size: var(--title);
            }

            .unit {
                font-size: var(--unit);
            }
        }
    }
}

@media only screen and (max-width: 1024px) {
    .common-style {
        --title-size: 2.6rem;
        --desc-mt: 1rem;
        --desc-mb: 2rem;
    }
}

@media only screen and (max-width: 820px) {
    .common-style {
        --title-size: 2.4rem;
        --desc-mt: 0.5rem;
        --desc-mb: 1.5rem;
    }
}

@media only screen and (max-width: 640px) {
    .common-style {
        --title-size: 2rem;
        --desc-mb: 1rem;
        --p: 1rem 0;
        --title: 1.4rem;
        --unit: 1.4rem;
    }
}

.am-footer.am-footer-default {
    margin-top: 0 !important;
}