.banner{position: relative;}
.banner .banner-title{color: #fff;line-height: 1.428;width: 6.6rem;margin-bottom: .5rem;transform: translateY(50%);opacity: 0;}
.banner .swiper-slide{position: relative;}
.banner .banner-inner{position: absolute;top: 0;left: 0;height: 100%;width: 100%; display: flex;flex-direction: column;justify-content: center;align-items: center;padding: .6rem;}
.banner .banner-content{display: flex;align-items: center; margin: 0 auto;width: 100%;max-width: 16.08rem;}
.banner .banner-text{margin-right: 3.52rem;}
.banner .banner-pic{height: 100%;width: 100%;}
.banner-title{animation: slide-ani 1s forwards;}

.banner-inner-pic{width: 4.25rem;}
.banner-footer-box{position: absolute;bottom: .4rem;left: 0;width: 100%;padding: 0 .6rem;}
.banner-footer{margin: 0 auto;width: 100%;max-width: 17.4rem;display: flex;justify-content: space-between;align-items: center;}
.swiper-pagination-bullet{width: .1rem;height: .1rem;border: 0.01rem solid #fff;background-color: #fff0;margin-right: .07rem;}
.swiper-pagination-bullet-active{background-color: #fff;}
@keyframes bounce {
    to{transform: translateY(-.1rem);}
}
.footnote{display: flex;align-items: center; margin-left: auto;color: #fff; z-index: 1;cursor: pointer;}
.icon-down{margin-left: .2rem;background: url("/static/home/images/icon/arr-down.png") no-repeat center;background-size: contain;}
.footnote .icon-down{animation: bounce 1s infinite alternate;}
.banner-ctrl-box{
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem;
    z-index: 5;
}
.banner-ctrl{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.8rem;height: 0.8rem;
    padding: .2rem;
    background-color: #fff3;
    border-radius: 50%;
    transition: .3s;
    cursor: pointer;
}
.banner-ctrl svg{
    width: 100%;
    height: 100%;
}
.banner-next svg{transform: rotateZ(180deg);}
.banner-ctrl:hover{
    background-color: var(--theme-color);
}
/* .icon-right{background: url("/static/home/images/icon/arr-down.png") no-repeat center;background-size: contain;transform: rotate(-90deg);margin-left: .5rem;} */



.goods-list{display: flex; height: 8rem;margin-top: .6rem;}
.goods-bigger{position: relative; width: 5.2rem;height: 100%;flex-shrink: 0; border-radius: .3rem;overflow: hidden;transition: .3s;}
.goods-bigger-info{position: absolute;bottom: 0;left: 0;right: 0;padding: .4rem;color: #fff;}
.goods-price.bigger{margin-top: .17rem;}
.goods-bigger .goods-model{color: #fff;}
/* .goods-bigger .goods-cart{background-color: var(--theme-color);} */
/* .goods-bigger .goods-cart img{filter: grayscale(1) brightness(5);} */

.discount{display: flex;align-items: center; color: var(--theme-color);}
.discount-text{margin-left: .1rem;}
.goods-mini{display: flex;flex-wrap: wrap;flex: 1;}
.goods-item{width: 5.2rem;padding: .4rem;margin-left: .2rem; background-color: #f7f7f7;border-radius: .3rem;transition: .3s;}
.goods-item:nth-child(n+3){margin-top:.2rem;}
.goods-item-main{display: flex;justify-content: space-between; height: 2.5rem;}
.goods-item-content{display: flex;align-items: center; flex-direction: column;justify-content: space-between;}
.price-origin{color: #999;}
.goods-item .goods-model{color: #999;}

.pre-order .goods-info{align-self: flex-start;max-width: 2rem;/* padding: 0 .3rem; */}
.pre-order .goods-info .goods-name{line-height: 1.5;font-family: "Montserrat-Bold";}
.pre-order .goods-info .goods-model{line-height: 1.5;}
.pre-order .goods-item-pic{margin-right: .6rem;display: flex;align-items: center;width: 1.8rem;}

.goods-price{display: flex;align-items: flex-end;}
.price-origin{text-decoration: line-through;margin-left: .2rem;}
.goods-cart{display: flex;align-items: center;justify-content: center; padding: .12rem;border-radius: 50%;border: 0.02rem solid var(--theme-color);cursor: pointer;transition: .3s;}
.goods-item-footer{display: flex;align-items: center;justify-content: space-between;margin-top: .14rem;}

.goods-cart img{transition: .3s;}
/* .goods-cart:hover{background-color: var(--theme-color);} */
/* .goods-cart:hover img{filter: grayscale(1) brightness(5);} */
.goods-bigger:hover,.goods-item:hover{box-shadow: 0 0 .2rem #0005;}
.goods-bigger:hover .goods-cart img,.goods-item:hover .goods-cart img{filter: grayscale(1) brightness(5);}
.goods-bigger:hover .goods-cart,.goods-item:hover .goods-cart{background-color: var(--theme-color);}
@media (max-width: 750px) {
    .goods-list{flex-direction: column;height: auto;}
    .goods-bigger{width: 100%;}
    .goods-item{width: 100%;margin: 0;margin-top: .6rem !important;}
    .pre-order .goods-info{padding: 0;}
}



.best-sellers{margin-top: .4rem;}
.bs-swiper{margin-top: .6rem;}
.bs-item{display: flex;height: 7.5rem;width: auto;}
.bs-item:nth-child(n+2){margin-left: .4rem;}
.bs-pic{height: 7.5rem; border-radius: .3rem;overflow: hidden;}
.bs-goods-box{display: flex;flex-direction: column;align-items: center; border-radius: .3rem;background-color: #f7f7f7;width: 5.63rem;padding: .4rem;}
.bs-goods-box:hover .goods-cart{background-color: var(--theme-color);}
.bs-goods-box:hover .goods-cart img{filter: grayscale(1) brightness(10);}
.bs-goods-pic img{height: 3.7rem;transition: .3s;}
.bs-pic{background-color: #f7f7f7;}
.bs-pic img{max-width: 10rem;width: 100%;}
.bs-goods-info{width: 100%;margin-top: auto;}
@media (max-width: 750px) {
    .best-sellers{padding: 0 .6rem;}
    .best-sellers .module-title{padding: 0 .6rem;}
    .bs-item{flex-direction: column; height: auto;width: 100%;flex-shrink: 0;}
    .bs-item:nth-child(n+2){margin-left: 0;}
    .bs-goods-box{width: 100%;}
}


.support-wrap{position: relative;height: 9.65rem;padding: 0 .6rem;}
.support{display: flex;align-items: center;height: 100%; background: url("/static/home/images/img/support-bg2.png") no-repeat bottom center/cover,#fff;}
.support::after{content: "";position: absolute;right: 0;top: 50%;height: 8rem;width: 6.52rem; transform: translateY(-50%); background: url("/static/home/images/img/support-bg.png") no-repeat center/contain;z-index: 0;}
.btn-box{display: inline-block;}
.support-content{flex: 1;z-index: 1;margin: 0 auto;width: 100%;max-width: 6rem;}
.support-pic{width: 8.4rem;height: 5.25rem;border-radius: .3rem;overflow: hidden;z-index: 1;}
.support-info{line-height: 1.454;color: #666;margin: .2rem 0 .55rem;}
@media (max-width: 750px) {
    .support-wrap{margin-top: .6rem;}
    .support{flex-direction: column;width: 100%;}
    .support-pic{margin-top: .6rem;}
    .support-pic{width: 100%;}
    .support::after{display: none;}
}




.goods-swiper .swiper-slide{position: relative;}
/* .goods-content{position: absolute;top: 0;left: 0;right: 0;width: 100%;height: 100%;} */
.goods-swiper .goods-pic{width: 28%;margin-top: .3rem;}
.goods-swiper .module-title{color: #fff;}
.goods-bg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;}
.goods-content{display: flex;flex-direction: column;padding-top: 1rem;padding-bottom: .75rem; align-items: center;justify-content: center; text-align: center;color: #fff;}
.goods-swiper .goods-info{line-height: 1.5;margin: 1.25rem 0 .49rem;}
@media (max-width: 750px) {
    .goods-swiper{margin-top: .6rem;}
}


.product-main{display: flex;justify-content: space-between;margin-top: .45rem;}
.product-bigger,.product-mini-box{width: 49.3%;position: relative;}
.product-mini{height: 48.9%;width: 100%;position: relative;}
.product-mini-box{display: flex;flex-direction: column;justify-content: space-between;}
.product-content{position: absolute;bottom: 0;left: 0;right: 0;width: 100%;padding: .6rem .4rem;color: #fff;line-height: 1.5;}
.product-pic{border-radius: .3rem;overflow: hidden;}
.product-pic img{transition: .3s;}
.product-bigger:hover img,.product-mini:hover img{ transform: scale(1.03); }
.product-bigger:hover .jump-btn,.product-mini:hover .jump-btn{ background-color: var(--theme-color); }
.product-info{margin: .05rem 0 .2rem;line-height: 1.5;}
.jump-btn{display: flex;align-items: center;justify-content: center; width: 0.46rem;height: 0.46rem;padding: .13rem;border-radius: 50%;border: .02rem solid #fff; cursor: pointer;transition: .3s;}
.jump-btn img{transition: .3s;}
/* .jump-btn:hover{background-color: var(--theme-color);} */
/* .jump-btn img{filter: grayscale(1) brightness(10);} */
.jump-btn img{filter: grayscale(1) brightness(10);}
@media (max-width: 750px) {
    .product-main{flex-direction: column;}
    .product-bigger,.product-mini-box{width: 100%;}
    .product-mini{margin-top: .6rem;}
}

.pic-view-box{position: relative;}
.pic-view{width: 100%;height: 10rem;}
.pic-view-content{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;padding: .6rem;transition: .3s;}
.pic-view-content .module-title,.pic-view-info{color: #fff;}
.pic-view-info{width: 100%; max-width: 5.6rem;line-height: 1.454;margin: .24rem 0 .6rem;}
.pic-view-inner{display: flex;justify-content: space-between;height: 7.4rem;margin: auto;}

.pic-view-card{display: flex;}
.pv-card-column:nth-child(n+2){margin-left: .6rem;margin-top: .8rem;}
.pv-card{display: flex;flex-direction: column;width: 3.65rem;height: 3.65rem;padding: 0 .4rem;padding-top: .35rem;transform: translateY(50%);opacity: 0; border-radius: .3rem;border: 0.01rem solid rgba(255,255,255,.4);background-color: rgba(255,255,255,.1);}
.pv-card:nth-child(n+2){margin-top: .6rem;}
.pc-card-icon{width: 1.2rem;height: 1.2rem;margin-top: auto;margin-left: auto;}
.pc-card-title,.pc-card-info{line-height: 1.5;color: #fff;}
.pc-card-title{line-height: 1.2;font-family: "Montserrat-Bold";}
.pic-view-content:hover{background-color: #0003;}
@keyframes slide-ani {
    80%{transform: translateY(-10%);}
    100%{transform: translateY(0);opacity: 1;}
}
.pic-view-content:hover .pv-card{animation: slide-ani .8s forwards;}
@media (max-width: 750px) {
    .pic-view{height: 6rem;}
    .pic-view-card{display: none;}
}



.comment{display: flex;justify-content: space-between;align-items: center;margin-bottom: 1.5rem;}
.module-info{line-height: 1.5;margin: .45rem 0 1.3rem;}
.quotation-mark{height: 0.8rem;text-align: left;}
.head-portrait-list{display: flex;margin-top: .25rem;}
.head-portrait-list .head-portrait:nth-child(1){z-index: 3;}
.head-portrait-list .head-portrait:nth-child(2){z-index: 2;}
.head-portrait-list .head-portrait:nth-child(3){z-index: 1;}
.head-portrait{position: relative;width: 0.7rem;height: 0.7rem;border-radius: 50%;background-color: #fff;cursor: pointer;}
.head-portrait img{opacity: .4;transition: opacity .3s;}
.head-portrait-list .head-portrait.active{z-index: 4;}
.head-portrait.active img{opacity: 1;}
.head-portrait:nth-child(n+2){margin-left: -.15rem;}
.head-portrait::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;box-shadow: 0 0 0.03rem #fff inset;}
.comment-mark-wrapper .swiper-prev{left: 0;border: .02rem solid var(--theme-color);}
.comment-mark-wrapper .swiper-next{right: 0;border: .02rem solid var(--theme-color);}
.comment-left{margin-left: 1rem;margin-right: .7rem;}
.comment-mark-wrapper{display: flex;justify-content: center;align-items: center; position: relative;width: 100%; max-width: 12rem;}
.comment-mark-box{position: relative;width: 100%; max-width: 8.8rem;height: 5.25rem;}
.comment-mark{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;padding: .6rem .4rem .7rem;background: url("/static/home/images/img/mark-bg.png") no-repeat center/contain;filter: drop-shadow(.4rem .4rem 0 #eee);}
.comment-mark{opacity: 0;transform: rotateZ(-45deg);transform-origin: 1.5rem bottom; transition: .8s;pointer-events: none;}
.mark-content{display: flex;flex-direction: column;}
.mark-pic{margin-left: .2rem;flex: 1 0 0;}

.mark-title{font-family: "Montserrat-Bold";line-height: 1.5;color: #222;margin-top: .125rem;}
.mark-subtitle{line-height: 1.5;color: #666;}
.mark-info{line-height: 1.875;width: 100%; max-width: 4.3rem; color: #666;margin-top: auto;}
.comment-mark.active{opacity: 1;transform: rotateZ(0);pointer-events: auto;}
.mark-star-list{display: flex;margin-top: .2rem;}
.mark-star{width: 0.2rem;height: 0.2rem;margin-right: .1rem;}
.mark-star img{filter: grayscale(1);}
.mark-star.full img{filter: none;}
@media (max-width: 1200px) {
    .mark-info{max-width: 100%;}
}
@media (max-width: 750px) {
    .comment{flex-direction: column;}
    .comment-mark{height: 5rem;}
    .quotation-mark{display: none;}
    .mark-info{margin-top: .2rem;line-height: 1.4;}
    .comment-mark-wrapper .swiper-prev{top: 100%;}
    .comment-mark-wrapper .swiper-next{top: 100%;}
}