.products-content{position:relative;width:100%;padding-top:0}
.products-content .type-box{margin:0 260px 50px}
.products-content .type-box h1{padding-left:10px;color:#2B2B2B;border-left:5px solid var(--primary-color);border-bottom:1px solid #EEE;display:none}
.products-content .pro-list{width:100%;box-sizing:border-box;margin-top:50px;padding:0 260px}
.products-content .pro-list li{transition:all .4s ease}
.products-content .pro-list .list-1{box-sizing:border-box;flex:1;width:23%;min-width:23%;max-width:23%;border:2px solid #EEE;margin-right:20px;margin-bottom:40px}
.products-content .pro-list .list-1:nth-of-type(4n){margin-right:0}
.products-content .pro-list .list-1 .pro-img{position:relative;width:100%;display:flex;justify-content:center;align-items:center}
.products-content .pro-list .list-1 .pro-img a{width:100%;height:100%;display:flex;justify-content:center;align-items:center}
.products-content .pro-list .list-1 .pro-img img{position:absolute;max-width:100%;max-height:100%;display:block}
.products-content .pro-list .list-1 .pro-img:after{display:block;content:"";padding-top:100%}
.products-content .pro-list .list-1 .pro-name{padding:10px 20px 0;min-height:50px;display:flex;justify-content:center;align-items:center}
.products-content .pro-list .list-1 .pro-name a{text-align:center;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#4c4c4c;font-size:18px;font-weight:700;line-height:24px}
.products-content .pro-list .list-1 article{padding:0 20px;margin-top:10px}
.products-content .pro-list .list-1 article a{color:#4c4c4c;line-height:18px;font-size:14px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.products-content .pro-list .list-1>span{display:block;margin:20px;height:1px;background:#EEE}
.products-content .pro-list .list-1 .more-btn{display:block;margin:30px 20px;height:37px;background:var(--primary-color);color:#FFF;line-height:37px;text-align:center}
.products-content .pro-list .list-1:hover{box-shadow:0 5px 5px rgba(0,0,0,.1);transform:translateY(-3px)}

.products-content .pro-list .list-1.pro-checked{border:2px solid var(--primary-color)}
.products-content .pro-list:after{content:"";width:23%}
.products-content .seo-key{margin:0 260px;box-shadow:0 0 10px rgba(0,0,0,.1);border-radius:5px;padding:10px;line-height:1.7em;color:#2B2B2B}
.products-content .seo-key .keywords{margin-top:10px}
.products-content .seo-key .keywords a{padding:10px;background:#F1F1F1;line-height:2em;border-radius:999px;margin-right:20px;color:#2B2B2B}

.compare-action{position:relative;height:37px;margin:30px 20px;display:flex;justify-content:center;align-items:center;background-color:var(--primary-color);cursor:pointer}
.compare-action span{display:inline-block;color:#FFF;-webkit-user-select:none;-ms-user-select:none;user-select:none}
.compare-action .compare-action-check+label{width:16px;height:16px;content:" ";border:1px solid #1867d4;border-radius:1px;margin-right:10px;cursor:pointer}
.compare-action .compare-action-check:checked+label:before{display:block;font-size:16px;line-height:16px;content:"✓";text-align:center;color:#FFF;position:relative;left:2px;top:-1px}
.compare-action input[type=checkbox]{visibility:hidden}

.filter-box{
  overflow-y:auto;
  width:100%;
  max-height:300px;
  min-height:100px;
  background:#F8F8F8;
  transition:all .4s ease;
  z-index:20;
  box-shadow:0 7px 10px -7px rgba(0,0,0,.6);
}
.filter-box::-webkit-scrollbar{width:3px}
.filter-box::-webkit-scrollbar-thumb,.filter-box::-webkit-scrollbar-track{border-radius:10px;background-color:rgba(0,0,0,.1)}
.filter-box::-webkit-scrollbar-thumb{box-shadow:inset 0 0 6px rgba(0,0,0,.3)}
.filter-box .pro-type-list{padding:15px 0;}
.filter-box .pro-type-list>ul{width:100%;display:flex;flex-wrap:wrap;justify-content: center;}
.filter-box .pro-type-list>ul a{transition:all .4s ease}
.filter-box .pro-type-list>ul a:hover{color:var(--primary-color)}
.filter-box .pro-type-list>ul .LiLevel1{width:20%;margin-bottom:20px}
.filter-box .pro-type-list>ul .LiLevel1 li:last-child{margin-bottom:0}
.filter-box .pro-type-list>ul .LiLevel1 li a{width:100%;height:100%;line-height:40px}
.filter-box .pro-type-list>ul .LiLevel1 li a,.filter-box .pro-type-list>ul .LiLevel1>a{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-align:center}
.filter-box .pro-type-list>ul .LiLevel1>a{font-size:18px;height:35px;line-height:35px;background:#FFF;width:70%;border-top:2px solid var(--primary-color)}
.filter-box .pro-type-list>ul .LiLevel1 .sub-menu{margin:10px 0 0;display:flex;flex-wrap:wrap;flex-direction:column}
.filter-box .pro-type-list>ul .LiLevel2{width:70%;height:35px;background-color:#FFF;margin-bottom:10px}
.filter-box .pro-type-list>ul .LiLevel2 a{font-size:13px}
.filter-box .pro-type-list>ul .LiLevel2 .sub-menu{display:none}
.filter-box .pro-type-list .prosubmenu{width:100%}
.filter-box .pro-type-list .prosubmenu>ul{width:100%;display:flex;flex-wrap:wrap}
.filter-box .pro-type-list .prosubmenu>ul a{transition:all .4s ease}
.filter-box .pro-type-list .prosubmenu>ul a:hover{color:var(--primary-color)}
.filter-box .pro-type-list .prosubmenu>ul>li{width:25%;margin-bottom:10px}
.filter-box .pro-type-list .prosubmenu>ul>li>a{font-size:18px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;height:35px;line-height:35px;background:#FFF;text-align:center;width:70%;border-top:2px solid var(--primary-color)}
.filter-box .scrollTip{height:35px;width:35px;box-sizing:border-box;position:absolute;right:260px;bottom:40px;animation:down 1.5s infinite;border-radius:50%;background:rgba(0,0,0,.3);-webkit-animation:down 1.5s infinite;display:flex;justify-content:center;align-items:center}
.filter-box .scrollTip i{position:relative;top:1px;transform:scale(2);color:#FFF}

.mobcate-main-box{
  display: none;
}
@media(min-width:1024px)and (max-width:15000px){
  .filter-box .pro-type-list>ul .LiLevel1{width: 100% !important;}
  .filter-box .pro-type-list>ul .LiLevel1>a{width: 100% !important}
  .filter-box .pro-type-list>ul .LiLevel2{width: 80% !important}
  .filter-box{
    width: 240px !important;
    float: left !important;
    max-height:2000px !important;
    margin-left:50px !important;
  }
  .products-content .pro-list{width: calc(100% - 290px) !important;}
  .pro-list{
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
}
@media(min-width:1281px)and (max-width:1520px){
  .products-content .content-top{margin:0 100px}
  .products-content .type-box{margin:0 100px 50px}
  .products-content .pro-list,.products-content .pro-list-2{padding:0 100px}
  .products-content .seo-key{margin:0 100px}
  .pro-filter{right:100px}
  .filter-box{padding:0 100px}
  .filter-box .scrollTip{right:100px}}
@media(min-width:1081px)and (max-width:1280px){
  .products-content .content-top{margin:0 50px}
  .products-content .type-box{margin:0 50px 50px}
  .products-content .pro-list,.products-content .pro-list-2{padding:0 50px}
  .products-content .seo-key{margin:0 50px}
  .filter-box{padding:0 50px}
  .filter-box .scrollTip,.pro-filter{right:50px}}
@media(min-width:769px)and (max-width:1080px) {
  .products-content .content-top {
    margin: 0 25px
  }

  .products-content .type-box {
    margin: 0 25px 50px
  }

  .products-content .pro-list, .products-content .pro-list-2 {
    padding: 0 25px
  }

  .products-content .pro-list-2 li .pro-info {
    padding: 40px 50px
  }

  .products-content .seo-key {
    margin: 0 25px
  }
}

@media screen and (max-width:768px){
  .compare-action{
    font-size: 12px;
  }
  .products-content .pro-list .list-2 .pro-img a {
    display: block;
    height: 100%;
    width: 100%
  }

  .products-content .pro-list .list-2 .pro-img a img {
    height: 100%;
    object-fit: contain
  }
  .products-content .seo-key a{color:#2B2B2B}

  .products-content{padding:6.6vw 6.6vw 0}
  .products-content .content-top{margin:0px;height:100px;display:flex;align-items:center}
  .products-content .content-top .pro-counts{display:none}
  .products-content .content-top .pro-filter{display:inline-block;background:0 0;width:auto;height:auto;padding:0px;}
  .products-content .content-top .pro-filter span{font-size:4vw;color:#2B2B2B;font-weight:700}
  .products-content .content-top .pro-filter i{display:none}
  .products-content .type-box{margin:0 0 6.6vw}
  .products-content .type-box h1{display:block;height:10.6vw;font-size:4.8vw;line-height:10.6vw}
  .products-content .type-box p{line-height:1.6em}
  .products-content .pro-list{margin-top:0;padding:0px;}
  .products-content .pro-list .list-1{width:48%;min-width:48%;max-width:48%;margin-right:2.3vw;margin-bottom:5.3vw}
  .products-content .pro-list .list-1:nth-of-type(2n){margin-right:0}
  .products-content .pro-list .list-1 .pro-img{height:32.8vw;min-height:32.8vw}
  .products-content .pro-list .list-1 .pro-name{padding:0 2.6vw;min-height:8vw;display:flex;justify-content:center;align-items:center}
  .products-content .pro-list .list-1 .pro-name a{font-size:3.4vw;line-height:4vw}
  .products-content .pro-list .list-1 article{display:none}
  .products-content .pro-list .list-1 span{margin:2.6vw}
  .products-content .seo-key{margin:0 0 25px}
  .products-content .seo-key .keywords{margin-top:2.6vw}
  .products-content .seo-key .keywords span{display:flex;flex-wrap:wrap}
  .products-content .seo-key .keywords a{display:inline-block;width:auto;padding:0 2.6vw;background:#CCC;border-radius:999px;margin-right:1.3vw;color:#2B2B2B;margin-bottom:4vw}

  .filter-box{
    display: none;
  }
  .mobcate-main-box{
    position: relative;
    margin-bottom:30px;
    display: block;
  }
  .mobcate-main-title {
    color: #000;
    font-size: 20px;
    padding: 10px 0;
    cursor: pointer;
    background: url(../../assets/imgs/products/menu-icon.svg) right center/24px no-repeat;
    border-bottom: 1px solid #ccc;
    display: block;
  }
  .mobcate-main-title+ul{
    position:absolute;
    top:110%;
    left:0;
    right:0;
    padding:10px;
    z-index:20;
    background-color:#fff;
    box-shadow:rgb(0 0 0 / 20%) 0 2px 16px;
  }

  .mobcate-main-title+ul li>ul{padding-left: 20px;}
  .mobcate-main-title+ul li{position: relative;}
  .mobcate-main-title+ul li .menu-item-href-container{
    display: flex;justify-content: space-between;align-items: center;
  }
  .mobcate-main-title+ul li .menu-item-href-container .menu-item-href{line-height: 24px;padding: 4px 0;flex:1;}
  .mobcate-main-title+ul .icon-angle-right{width: 40px;z-index: 2;display: block;text-align: center;}
  .mobcate-main-title+ul .icon-angle-right.active{transform: rotate(90deg);}
}

.pro-intro article figure img{
  max-width:80%;
}
.pro-intro article  img{
  max-width:80%;
}