/* BASIC css start */
/* class-list */
#productClass .cate-wrap {  }
#productClass .cate-wrap .bcate {padding:70px 0 40px;  font-size:32px; color:#111111; font-weight:600; text-align:center; }
#productClass .cate-wrap .class-list ul {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
}

#productClass .cate-wrap .class-list ul:after { display:block; clear:both; content:'' }
#productClass .cate-wrap .class-list ul li {width:calc(100% / 7 ) }
#productClass .cate-wrap .class-list ul li a {position:relative; font-weight:500; display:block; font-size:14px; color:#000;  padding:20px 27px; transition:all .1s; border:1px solid #e8e8e8; text-align:center;}
#productClass .cate-wrap .class-list ul li:not(:nth-child(6n),:last-child) a{border-right:none}
#productClass .cate-wrap .class-list ul li a:hover,#productClass .cate-wrap .class-list ul li.sel a{color:#fff; background-color:#000}

#productClass .cate-wrap .class-list ul li.on a {color:#fff; background-color:#000}




#productClass .cate-wrap .class-list2 {width: 900px; margin: 0 auto;}
#productClass .cate-wrap .class-list2 ul {display: flex; justify-content: center; flex-direction: row;  flex-wrap: nowrap;  margin: 0 auto;}
#productClass .cate-wrap .class-list2 ul li {width:calc(100% / 4 );      border:1px solid pink; display: flex; justify-content: center;}



/*#productClass .cate-wrap .class-list ul li:not(:nth-child(1),:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6)) a{border-top:none}*/



.item-wrap {overflow: hidden; width: 1200px;}

.item-wrap .x4 .item-list {width: 25%; margin: 30px 0 0 10px;} 
.item-wrap .x4 .item-list:nth-child(4n+1) { margin-left: 0; }

.item-wrap .x4 .prd-info .prd-name {display: block;}
.item-wrap .x4 .prd-info .color {max-width: 190px;}


/* BASIC css end */