#catWrapper{padding:0 12px 0 32px;}
#catWrapper .box {position:relative;display:inline-block;}
#catWrapper .box.box-w20{width: calc(20% - 4px);}
#catWrapper .box:before {content: "";display:block;padding-top: 100%;}
#catWrapper .box .content {position: absolute;top: 0px;left: 10px;right: 10px;bottom: 16px;background:#fff;}
#catWrapper .box .content .cat-inner {padding:40px 20px 35px 20px;}
#catWrapper .box .content .cat-inner img {width:60px;}
#catWrapper .box .content .cat-inner .cat-title {padding: 20px 0 10px 0;font-family: var(--hw-font-primary-semi-bold) !important;font-size: var(--hw--font-size--small) !important;color: var(--hw--white-gray-five) !important;text-overflow: ellipsis;}

#catWrapper .box .content .cat-inner.cat-button {
	padding: 20px!important;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: center;
    align-items: center;
	cursor: pointer;
	font-family: var(--hw-font-primary-semi-bold) !important;font-size: var(--hw--font-size--small) !important;color: #fff !important;
}

@media all and (max-width: 1260px){
	#catWrapper {padding: 0 16px 0 32px;}
	#catWrapper .box.box-w20 {width: calc(25% - 4px);}
}
@media all and (max-width: 1005px){
	#catWrapper {padding: 0 20px 0 32px;}
	#catWrapper .box.box-w20 {width: calc(33.33% - 4px);}
}
@media all and (max-width: 768px){
	#catWrapper {padding: 0 0px 0 12px;}
	#catWrapper .box.box-w20 {width: calc(50% - 4px);}
	#catWrapper .box .content .cat-inner .cat-title {font-size: 16px !important;padding: 20px 0 0 0;}
	#catWrapper .box .content .cat-inner {padding: 20px;}
	#catWrapper .box .content .cat-inner .cat-item-count{display: none}
}