.search{width: 100%;background-color: #fff;margin-top: 5rem;padding: 1rem 0;height: calc(2rem + 1.875rem + 0.2rem);position: relative;}
.search .saerch-box{width: 100%;max-width: 1000px;margin: 0 auto;position: absolute; top: 1rem;left: 50%;z-index: 11;transform: translateX(-50%); border: solid 1px #191919;border-radius: 1.2rem;overflow: hidden;}
.search-area{display: flex;align-items: center;background-color: #fff;padding: 0.1rem 0;}
.search-area input{min-width: 0;flex: 1;height: 1.875rem;line-height: 1.875rem;border: none;}
.search-area .btn{width: 4.25rem;height: 1.875rem;border-radius: 1.2rem;background-color: var(--default-color);display: flex;align-items: center;justify-content: center;cursor: pointer;margin-right: 0.1rem;}
.search-area .btn img{width: 1.5rem;height: 1.5rem;}
.search-history{width: 100%;padding: 1.5rem 2rem;border-top: solid 1px #fafafa;display: none;background-color: #ffffff;}
.search-history .hist{width: 100%;}
.search-history .hist .tit{width: 100%;display: flex;align-items: center;justify-content: space-between;}
.search-history .hist .tit span{font-size: var(--font-size-14);color: #999999;}
.search-history .hist .tit img{margin-left: var(--margin-12);width: 1rem;height: 1rem;cursor: pointer;}
.search-history .hist .list{width: 100%;overflow: hidden;margin-top: var(--margin-8);}
.search-history .hist .list .item{float: left;margin: var(--margin-4) var(--margin-12) var(--margin-4) 0;padding: var(--padding-4) var(--padding-16);border: solid 1px #e7e7e7;border-radius: 0.3rem;font-size: var(--font-size-12);cursor: pointer;}

.search-history .hot{width: 100%;margin-top: var(--margin-16);}
.search-history .hot .tit{width: 100%;font-size: var(--font-size-14);color: #999999;}
.search-history .hot .list{width: 100%;display: grid;grid-template-columns: repeat(3, 1fr);gap: var(--padding-16);margin: var(--margin-16) 0;}
.search-history .hot .list .item{font-size: var(--font-size-12);cursor: pointer;}

main{padding-top: 0 !important;}


.main-container{display: flex;margin-top: var(--margin-24);}
.cate-list{width: 12.5rem;padding: 0 var(--padding-24);background-color: #fff;border-radius: 0.85rem;}
.cate-list .item{width: 100%;}
.cate-list .item .box{min-width: 0;flex: 1;display: flex;align-items: center;height: 2.8125rem;cursor: pointer;}
.cate-list .item .box .info{min-width: 0;flex: 1;display: flex;align-items: center;}
.cate-list .item .box .info img{width: 1.25rem;height: 1.25rem;}
.cate-list .item .box .info span{margin-left: var(--margin-12);font-size: var(--font-size-16);color: #333;}
.cate-list .item .box .bottom{width:1rem;height:1rem;transition: all .3s;transform: rotate(-90deg);}
.cate-list .item .box.active .info span, .cate-list .item .box:hover .info span{color: var(--default-color);font-weight: bold;}
.cate-list .item .box.active .bottom{transform: rotate(0deg);}
.cate-list .item dl{width: 100%;display: none;}
.cate-list .item dl dd{width: 100%;padding: 0 var(--padding-12) 0 var(--padding-32);cursor: pointer;}
.cate-list .item dl dd span{font-size: var(--font-size-14);color: #666;display: inline-block;line-height: 2.5rem;width: 100%;}
.cate-list .item dl dd.active span, .cate-list .item dl dd span:hover{color: var(--default-color);}

.cate-list .item dl{width: 100%;}

.goods-main{min-width: 0;flex: 1;margin-left: var(--margin-16);}


.sub-cate-list{width: 100%;padding: var(--padding-16) var(--padding-12);position: relative;overflow: hidden;background-color: #fff;margin-bottom: var(--margin-12);border-radius: 0.85rem;box-sizing: border-box;}
.sub-cate-list .swiper-wrapper{width: 100%;}
.sub-cate-list .swiper-wrapper .swiper-slide{width: auto;height: 1.875rem;padding: 0 var(--padding-16);display: flex;align-items: center;white-space: nowrap;cursor: pointer;border-radius: 0.5rem;}
.sub-cate-list .swiper-wrapper .swiper-slide.active{background-color: var(--default-color);}
.sub-cate-list .swiper-wrapper .swiper-slide.active span{color: #fff;}
.sub-cate-list .swiper-wrapper .swiper-slide img{width: 1.25rem;height: 1.25rem;}
.sub-cate-list .swiper-wrapper .swiper-slide span{margin-left: var(--margin-12);font-size: var(--font-size-14);color: #333;}
.sub-cate-list .swiper-button-prev:after, .sub-cate-list .swiper-button-next:after{display: none;}
.sub-cate-list .swiper-button-item{width: 1.875rem;height: 1.875rem;display: flex;align-items: center;justify-content: center;border: solid 1px #eeeeee;border-radius: 0.25rem;background-color: #fff;opacity: 1;top: 50%;transform: translateY(-50%);margin: 0;left: 0;cursor: pointer;pointer-events: initial;/*box-shadow: 20px 0 20px 25px #fff;*/}
.sub-cate-list .swiper-button-item img{width: 1rem;height: 1rem;}
.sub-cate-list .swiper-button-prev{display: none;}
.sub-cate-list .swiper-button-next{left: auto;right: 0;/*box-shadow: -20px 0 20px 25px #fff;*/}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{display: none;}

.field-search{width: 100%;background-color: #fff;border-radius: 0.85rem;display: grid;grid-template-columns: repeat(6, 1fr);gap: .5rem;padding: var(--padding-12) 0;}
.field-search .item{height: 2.8125rem;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.field-search .item span{font-size: var(--font-size-14);}
.field-search .item img{width: 1rem;height: 1rem;margin-right: var(--margin-8);}
.field-search .item select{width: 6rem;border: none;height: 100%;padding: 0;margin-left: var(--margin-8);}
.field-search .item.active span{color: var(--default-color);}


.goods-list{min-width: 100%;display: grid;grid-template-columns: repeat(4, calc((100% - 36px) / 4));gap: 12px;background-color: #fff;border-radius: 0.85rem;padding: var(--padding-12);margin-top: var(--margin-12);}
.goods-list .item .thumb{width: 100%;border-radius: 0.85rem;overflow: hidden;}
.goods-list .item .tag-list{display: flex;margin-top: var(--margin-8);overflow-x: auto;white-space: nowrap;}
.goods-list .item .tag-list span{padding: 0 var(--padding-4);background-color: #d3eadd;border-radius: 0.5rem;margin-right: var(--margin-4);font-size: var(--font-size-12);}
.goods-list .item .tag-list span:last-child{margin-right: 0;}
.goods-list .item .money{margin-top: var(--margin-8);}
.goods-list .item .money .pirce{font-size: var(--font-size-16);font-weight: bold;color: #333;}
.goods-list .item .money .market-pirce{margin-left: var(--margin-4);font-size: var(--font-size-12);font-weight: bold;color: #999999;text-decoration: line-through;}
.goods-list .item .name{font-size: var(--font-size-16);font-weight: bold;color: #333;}


.slide-cate-nav-mask{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.35);z-index: 998;display: none;}

.slide-cate-nav{position: fixed;bottom: 15%;left: 1rem;width: 2.7rem;height: 2.7rem;display: flex;align-items: center;justify-content: center;border-radius: 100%;display: none;cursor: pointer;background-color: var(--default-color);}
.slide-cate-nav img{width: 1.75rem;height: 1.75rem;}

@media (max-width: 1201px) {
    
}
@media (max-width: 993px) {
    .search{width: calc(100% - var(--margin-24) * 2);margin-left: var(--margin-24);margin-right: var(--margin-24);}
    .field-search{grid-template-columns: repeat(3, 1fr);}

    .cate-list{position: fixed;top: 0;left: 0;height: 100%;z-index: 999;padding-top: calc(5rem + 1rem);transform: translateX(-100%);transition: all .3s ease-in-out;}
    .goods-main{margin-left: 0;}
    .slide-cate-nav{display: flex;}
}
@media (max-width: 768px) {
    .goods-list{grid-template-columns: repeat(3, calc((100% - 24px) / 3));gap: 12px;}

}
@media (max-width: 576px) {
    .field-search{grid-template-columns: repeat(2, 1fr);}
    .field-search .item select{width: 5rem;}
    .goods-list{grid-template-columns: repeat(2, calc((100% - 12px) / 2));gap: 12px;}
}