html{
    overflow-x: hidden;
}

/* 描述 */
.contDesc {
    transition: all 0.4s ease;
    position: relative;
}
.contDesc.collapsed {
    display: -webkit-box!important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
}

.contDesc .icoBox {
    display: none;
}

.contDesc .icoBoxUp {
    transform: rotate(180deg);
}

/* 轮播图左右滑动按钮 */
.swiper-but {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.swiper-but svg {
    width: 18px;
    height: auto;
}

.swiper-but-prev {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.swiper-but-next {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

/* 搜索页面搜索框 */
.goodsSchBox{
    width: 100%;
    height: 56px;
    padding:10px 70px 10px 30px;
    border-radius: 30px;
    margin: 0 150px;
    box-sizing: border-box;
    position: relative;
    background-color: #f6f8fa;
}

.goodsSchBox input{
    width: 100%;
    height: 100%;
    background-color: #f6f8fa;
    font-size: 16px;
}

.goodsSchBox .icoBox{
    width: 25px;
    display: flex;
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
}

.goodsSchBox .icoBox svg{
    width: 100%;
    height: auto;
    fill: #999;
}

.goodsSchBox .icoBox:hover svg{
    fill: #FA6E07;
}

/* Filters上方已筛选列表 */
.filtersBox {
    width: 100%;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
}

.filtersBox .tot {
    font-weight: 700;
    margin-right: 10px;
}

.filtersLists {
    display: flex;
    align-items: center;
}

.filtersList {
    height: 30px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    background-color: #F3F3F3;
    border-radius: 20px;
    cursor: pointer;
    margin-right: 10px;
}

.filtersList .chaBox {
    width: 8px;
    display: flex;
    margin-left: 6px;
}

.filtersBox .more {
    margin-right: 6px;
}

.filtersBox .clear {
    color: #000;
    text-decoration: underline;
    cursor: pointer;
}

.filtersBox .clear:hover {
    color: #FA6E07;
}

/* 左方筛选栏 */
.filter {
    width: 234px;
    padding: 22px;
    box-sizing: border-box;
    background-color: #FAFAFA;
    margin-right: 30px;
    height: calc(100vh - 100px);
    position: sticky;
    top: 100px;
    overflow: auto;
    flex-shrink: 0;
}

.filter-item {
    width: 100%;
    padding-bottom: 15px;
    border-bottom: 1px solid #EEEEEE;
    margin-bottom: 15px;
}

.filter-item .filterTit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #333;
    font-weight: 700;
    cursor: pointer;
}

.filter-item .filterTit .titBox {
    display: flex;
    align-items: center;
}

.filter-item .filterTit .filterNum {
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    color: #fff;
    padding: 0 6px;
    background-color: #FA6E07;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-left: 8px;
    font-weight: 500;
    visibility: hidden;
}

.filter-item .filterTit .filterNum-active {
    visibility: visible;
}

.filter-item .filterTit .jtBox {
    width: 10px;
    position: relative;
    transform: translateY(1px);
}

.filter-item .filterTit .jtBox::after,
.filter-item .filterTit .jtBox::before {
    position: absolute;
    width: 8px;
    height: 1.5px;
    background-color: currentColor;
    border-radius: 2px;
    transition: background .3s cubic-bezier(.645, .045, .355, 1), transform .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1), color .3s cubic-bezier(.645, .045, .355, 1);
    content: "";
    z-index: 10;
}

.filter-item .filterTit .jtBox::after {
    transform: rotate(45deg) translateX(-4px);
}

.filter-item .filterTit .jtBox::before {
    transform: rotate(-45deg) translateX(4px);
}

.filter-item-active .filterTit .jtBox {
    transform: translateY(-2px);
}

.filter-item-active .filterTit .jtBox::after {
    transform: rotate(-45deg) translateX(-4px);
}

.filter-item-active .filterTit .jtBox::before {
    transform: rotate(45deg) translateX(4px);
}

.filter-item .filterCont {
    width: 100% !important;
    margin-top: 6px;
    display: none;
    overflow: hidden;
}

.filter-item .filterCont .flrLists {
    width: 100%;
}

.filter-item .flrList {
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #666666;
    margin-top: 10px;
}

.filter-item .flrList-active {
    color: #FA6E07;
}

.filter-item .flrList .chk {
    width: 12px;
    height: 12px;
    display: flex;
    border: 1px solid #DCDFE6;
    margin-left: 0;
    margin-right: 8px;
    border-radius: 2px;
    overflow: hidden;
    box-sizing: border-box;
}

.filter-item .flrList .chk svg {
    width: 100%;
    height: auto;
    display: none;
}

.filter-item .flrList-active .chk {
    border: none;
}

.filter-item .flrList-active .chk svg {
    display: block;
}

.filter-item .flrList .saImg {
    width: 36px;
    display: flex;
    margin-right: 6px;
}

.filter-item .flrList .saImg img {
    width: 100%;
    height: auto;
}

/* 拖拽条 */
.filter-item .tach {
    width: 100%;
    margin-top: 10px;
}

.filter-item .tachTop {
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 14px;
    color: #333;
}

.filter-item .tachTop img {
    width: 55px;
    height: auto;
}

.filter-item .tachbon {
    font-size: 12px;
    width: 100%;
    display: flex;
    justify-content: center;
    color: #999;
}

.irs--round {
    height: 10px;
}

.irs--round .irs-min,
.irs--round .irs-max,
.irs--round .irs-from,
.irs--round .irs-to,
.irs-single {
    display: none !important;
}



.irs--round .irs-bar {
    top: 0px;
    height: 2px;
    background-color: #FA6F06;
}

.irs--round .irs-line {
    top: 0px;
    height: 2px;
    background-color: #DDDFE7;
}

.irs--round .irs-handle {
    top: -5px;
    width: 12px;
    height: 12px;
    border: none;
    background-color: #FA6F06 !important;
    border-radius: 50%;
    cursor: pointer;
}

.irs--round .irs-handle:hover {
    background-color: #FA6F06;
}

/* 筛选颜色列表 */
.filter-item .colorLists {
    width: calc(100% + 12px);
    display: flex;
    position: relative;
    transform: translateX(-6px);
    flex-wrap: wrap;
}

.filter-item .colorList {
    margin: 16px 6px 0;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 50%;
}

.filter-item .colorList-active{
    border: 1px solid #333333;
    padding: 1.5px;
}

.filter-item .colorList img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.filter-item .colorList .colorName{
        /* height: 18px; */
        padding: 4px 7px;
        box-sizing: border-box;
        align-items: center;
        position: absolute;
        bottom: 80%;
        font-size: 14px;
        color: #FA6E07;
        filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.1));
        display: none;
        background-color: #fff;
        white-space: nowrap;
        z-index: 2;
        border-radius: 4px;
   
}

.filter-item .colorList .colorName .sanj{
    width: 8px;
    height: 8px;
    background-color: #fff;
    transform: rotate(45deg) translateX(-50%);
    position: absolute;
    bottom: -5px;
    left: 50%;
    z-index: -1;
}

.filter-item .colorList:hover .colorName{
    display: flex;
}




/* 商品上方筛选按钮 */
.filterButBox {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

/* 左方筛选按钮 */
.filterButLists {
    display: flex;
    align-items: center;
}

.filterButList {
    min-width: 108px;
    height: 32px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 16px;
    border: 1px solid #DDDFE7;
    font-size: 16px;
    color: #333;
    margin-right: 10px;
    cursor: pointer;
}

.filterButList-active {
    background-color: #FA6E07;
    border-color: #FA6E07;
    color: #fff;
}

.filterButList:hover {
    background-color: #FA6E07;
    border-color: #FA6E07;
    color: #fff;
}

/* 切换正侧视图按钮 */
.filterButBox .franBox {
    border-radius: 4px;
    background-color: #F3F3F3;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.filterButBox .franBox .franBut {
    height: 32px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
}

.filterButBox .franBox .franBut .icoBox {
    width: 20px;
    display: flex;
    margin-right: 4px;
}

.filterButBox .franBox .franBut .icoBox svg {
    width: 100%;
    height: auto;
    fill: #333;
}

.filterButBox .franBox .franBut-active {
    background-color: #333333;
    color: #fff;
}

.filterButBox .franBox .franBut-active .icoBox svg {
    fill: #fff;
}

/* sortBy筛选 */
.sortByBox{
    position: relative;
}
.sortByBox .sortBy {
    height: 32px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #DDDFE7;
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
    cursor: pointer;
}

.sortByBox .sortBy .jtBox {
    width: 11px;
    display: flex;
    margin-left: 8px;
}

.sortByBox .sortBy .jtBox svg {
    width: 100%;
    height: auto;
}

.sortByBox-active .jtBox {
    transform: rotate(180deg);
}

.sortBySel{
    width: 100%;
    min-width: 210px;
    padding: 16px;
    border-radius: 6px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
    box-sizing: border-box;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    display: none;
    z-index: 2;
}

.sortBySel .sortByItem{
    margin-top: 10px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.sortBySel .sortByItem:nth-child(1){
    margin-top: 0;
}

.sortBySel .sortByItem:hover{
    color: #FA6E07;
}

.sortBySel .sortByItem-active{
    color: #FA6E07;
}


/* 商品上方广告 */
.adve {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 30px;
    cursor: pointer;
    display: flex;
}

.adve img {
    width: 100%;
    height: auto;
}

/* 博客 */
.blogBox{
    width: 100%;
    margin-bottom: 30px;
}

.blogBox .blogTotTit{
    font-size: 50px;
    font-weight: 700;
}

.blogBox .blogTotTit .numBox{
    margin-left: 11px;
    font-size: 16px;
    color: #4a4a4a;
    font-weight: 600;
}

.blogBox .blogLists{
    width: 100%;
    display: flex;
    margin-top: 20px;
}

.blogBox .blogList{
    width: calc((100% - 30px) / 2);
    display: flex;
    align-items: center;
    margin-left: 30px;
}

.blogBox .blogList:nth-child(1){
    margin-left: 0;
}

.blogBox .blogList .imgBox{
    width: 260px;
    height: 173px;
    display: flex;
    margin-right: 18px;
    border-radius: 5px;
    overflow: hidden;
}

.blogBox .blogList .imgBox img{
    width: 100%;
    height: auto;
    transition: all .35s;
    object-fit: cover;
}

.blogBox .blogList .conBox{
    flex: 1;
}

.blogBox .blogList .blogTit{
    width: 100%;
    height: 46px;
    line-height: 23px;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 19px;
    font-weight: 700;
    color: #333;
    margin: -3px 0 13px;
}

.blogBox .blogList .blogDesc{
    height: 66px;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.4;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: #242424;
}

.blogBox .blogList .blogRemo{
    display: inline-block;
    padding-top: 28px;
    font-size: 16px;
    line-height: 14px;
    color: #FA6E07;
    text-decoration: underline;
}

/* 商品列表 */
.goodsListBox {
    width: 100%;
    position: relative;
    padding-bottom: 50px;
    border-bottom: 1px solid #E6E6E6;
    margin-bottom: 40px;
}

.goodsList {
    width: calc(100% + 24px);
    min-height: calc(100vh - 100px);
    position: relative;
    left: -12px;
    display: flex;
    flex-wrap: wrap;
}

.goodsList .goodsItem {
    width: calc(100% / 3);
    box-sizing: border-box;
    padding: 0 12px 50px;
}

/* 广告位 */
.goodsAdv{
    padding: 0 12px 50px;
    box-sizing: border-box;
    
}

.goodsAdv .advImgBox{
    width: 100%;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.goodsAdv .advImgBox img{
    width: 100%;
    height: auto;
    transition: all .35s;
}

.goodsAdv .advImgBox img:hover{
    transform: scale(1.05);
}

.advW1{
    width: calc(100% / 3);
}
.advW2{
    width: calc(100% / 3 * 2);
}
.advW3{
    width: 100%;
}

/* 轮播图下方按钮 */
.goodsAdv .swiper-pagination-bullet{
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background-color: #FFFFFF66 !important;
    margin: 0 2px !important;
}

.goodsAdv .swiper-pagination-bullet-active{
    background-color: #FFFFFF !important;
}

/* 未查询到商品占位 */
.goodsEmp{
    width: 100%;
    display: flex;
    justify-content: center;
}

.goodsEmp img{
    margin-top: 50px;
    width: 400px;
    height: auto;
}

/* 加载中 */
.goodsLoading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 10;
    opacity: .6;
    display: none;
}

.goodsLoading svg {
    width: 64px;
    height: auto;
    position: absolute;
    top: 160px;
    left: 50%;
    transform: translateX(-50%);
}

/* 分页 */
.goodsPageBox {
    width: 100%;
    display: flex;
    align-items: center;
}

.goodsPageBox .pageLists {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
    margin-right: 4px;
}

.goodsPageBox .pageList {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F0F0F0;
    border-radius: 4px;
    margin-right: 6px;
    cursor: pointer;
}

.goodsPageBox .pagesl {
    font-size: 16px;
    color: #333;
    margin-right: 6px;
}

.goodsPageBox .pageList:hover {
    background-color: #FA6E07;
    color: #fff;
}

.goodsPageBox .pageList-active {
    background-color: #FA6E07;
    color: #fff;
}

.goodsPageBox .pageTot {
    font-weight: 700;
    margin-right: 4px;
}


/* 相关分类管理 */
.relCatLists {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #333;
    font-size: 16px;
}

.relCatList {
    margin-top: 15px;
    margin-right: 20px;
}

.relCatList a{
    height: 36px;
    padding: 0 20px;
    border-radius: 24px;
    box-sizing: border-box;
    border: 1px solid #CBCBCB;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.relCatList a:hover {
    border-color: #FA6E07;
    color: #FA6E07;
}

.relCatList .jtBox {
    width: 10px;
    display: flex;
    margin-left: 8px;
}

.relCatList .jtBox svg {
    width: 100%;
    height: auto;
    fill: #cbcbcb;
}

.relCatList:hover .jtBox svg{
    fill:#FA6E07 ;
}

/* FAQ */
.faqLists {
    width: 100%;
}

.faqList {
    margin-top: 20px;
    width: 100%;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    cursor: pointer;
    padding: 20px 30px;
    box-sizing: border-box;
}

.faqList .faqTit {
    width: 100%;
    font-size: 16px;
    color: #333;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faqList .faqTit .jtBox {
    width: 13px;
    display: flex;
}

.faqList .faqTit .jtBox svg {
    width: 100%;
    height: auto;
}

.faqList-active .faqTit .jtBox {
    transform: rotate(180deg);
}

.faqList .faqDtl {
    margin-top: 16px;
    width: 100% !important;
    font-size: 14px;
    color: #666666;
    padding-top: 10px;
    border-top: 1px solid #E6E6E6;
    display: none;
    line-height: 18px;
}