.category-container-left-bot{
    padding-top: 7px;
    float: left;
    border: 1px solid;
    width: 100%;
}

.category-main-container.category-1 .category-container-left-bot{
    border-color: var(--color-category-1);
}
.category-main-container.category-2 .category-container-left-bot{
    border-color: var(--color-category-2);
}
.category-main-container.category-3 .category-container-left-bot{
    border-color: var(--color-category-3);
}
.category-main-container.category-4 .category-container-left-bot{
    border-color: var(--color-category-4);
}
.category-main-container.category-5 .category-container-left-bot{
    border-color: var(--color-category-5);
}
.category-main-container.category-6 .category-container-left-bot{
    border-color: var(--color-category-6);
}
.category-main-container.category-7 .category-container-left-bot{
    border-color: var(--color-category-7);
}
.category-main-container.category-8 .category-container-left-bot{
    border-color: var(--color-category-8);
}

.category-container-left-top{
    width: 100%;
    height: 55px;
    overflow: hidden;
    text-decoration: none;
    display: inline-block;
    float: left;
}

.category-container-left-top:hover, .category-container-left-top:focus{
    text-decoration: none;
    color: #fff;
}

.category-container-left-top .icon{
    display: inline-block;
    width: 100%;
    height: 40px;
    text-align: center;
    padding: 8px 0px;
    margin-bottom: -4px;
    transition: transform ease 1s;
}

.category-container-left-top .name{
    font-size: 12px;
    font-weight: normal;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    margin-bottom: 0px;
}

.category-container-left-bot .title{
    width: 100%;
    text-align: left;
    padding: 0px 15px;
    color: #3b3b3b;
    text-transform: uppercase;
    font-size: 12px;
    font-family: OpenSansBold;
    margin-top: 7px;
    margin-bottom: 7px;
}

.category-container-left-bot .option-title{
    width: 100%;
    text-align: left;
    padding: 0px 15px;
    color: #3b3b3b;
    font-size: 12px;
    font-family: OpenSansBold;
    margin-top: 7px;
    margin-bottom: 5px;
}

.category-container-left-bot .option-list{
    display: inline-block;
    width: 100%;
    padding: 0px 10px 0px 5px;
}

.category-container-left-bot .option-list .option-item{
    float: left;
    padding: 2px 6px;
    border: 1px solid #ddd;
    margin-right: 5px;
    margin-left: 5px;
    font-size: 12px;
    margin-bottom: 5px;
    border-radius: 3px;
    color: #4a4a4a;
}

.category-container-left-bot .option-list .option-item:hover, .category-container-left-bot .option-list .option-item:focus{
    text-decoration: none;
    transition: all 0.2s ease;
}

.category-container-left-bot .item{
    display: inline-block;
    width: 100%;
    text-align: left;
    padding: 0px 15px;
    color: #4a4a4a;
    font-size: 12px;
    text-decoration: none;
    margin-bottom: 7px;
}

.category-container-left-bot .item:hover, .category-container-left-bot .item:focus{
    text-decoration: none;
    color: #ea377c;
}

.category-main-container{
    width: 100%;
    max-width: 1150px;
    margin: auto;
    margin-bottom: 50px;
}

.category-container-left{
    width: 100%;
    max-width: 185px;
    display: inline-block;
    float: left;
}

.category-container-right{
    width: calc(100% - 193px);
    margin-left: 8px;
    float: left;
    display: inline-block;
}


.category-logo {
    width: 100%;
    height: 55px;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    overflow: hidden;
    background: #fff;

}

.category-logo img {
    height: 55px;
    float: left;
}

.category-logo .logo-line {
    display: inline-block;
    width: 13px;
    height: 100%;
    background: linear-gradient(#e7e7e7 100%, transparent 0%);
    background-size: 1px 20px;
    background-position: center center;
    background-repeat: no-repeat;
    float: left;
}

.category-logo .logo-line:last-child{
    display: none;
}

.category-list-product-cover{
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-border);
    border-right: 0px;
    border-bottom: 0px;
    display: inline-block;
}

.category-product-item-clothes{
    width: 100%;
    max-width: 318px;
    height: 386px;
    display: inline-block;
    float: left;
    position: relative;
    border: 1px solid var(--color-border);
    border-top: 0px;
    border-left: 0px;
    text-align: center;
    text-decoration: none!important;
}

.category-product-item-clothes img.img-main{
    width: 285px;
    height: 285px;
    display: inline-block;
    margin-top: 20px;
}

.category-product-item-clothes .price{
    font-family: OpenSansSemibold;
    font-size: 20px;
    text-align: left;
    line-height: 15px;
    margin: 3px 5px 7px 7px;
    color: #e32124;
    display: inline-block;
}

.category-product-item-clothes .cover-price{
    text-align: left;
}

.category-product-item-clothes .price-old{
    text-align: left;
    color: #858585;
    font-size: 13px;
    text-decoration: line-through;
    margin-left: 5px;
}

.category-product-item-clothes .sale-off{
    color: #fff;
    font-size: 13px;
    height: 21px;
    line-height: 21px;
    background: #c63829;
    border-radius: 4px;
    padding: 0px 5px;
    position: absolute;
    top: 4px;
    left: 4px;
}

.category-product-item-clothes .name{
    height: 37px;
    margin-left: 6px;
    overflow: hidden;
    line-height: 17px;
    font-size: 14px;
    color: #4a4a4a;
    text-align: left;
    margin-bottom: 0px;
}

.category-product-item-clothes .list-image{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: calc(100% + 1px);
    height: 90px;
    transform: translate(0px, 100%);
    box-shadow: 0 0 5px 0 rgba(0,0,0,.35);
    text-align: center; 
    background: #fff;
    display: none;
    padding-top: 6px;
}

.category-product-item-clothes:hover, .category-product-item-food:hover{
    box-shadow: 0 0 5px 0 rgba(0,0,0,.35);
    z-index: 2;
}

.category-product-item-clothes:hover .list-image{
    display: block;
}

.category-product-item-clothes .list-image img{
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 3px;
    border: 1px solid #4FC6E7;
    margin: 2px;
}


.category-product-item-clothes .cover-list-image{
    position: absolute;
    left: 0px;
    top: -2px;
    width: 100%;
    height: 4px;
    background: #fff;
}

.category-product-item-food{
    width: 100%;
    max-width: 239px;
    height: 270px;
    display: inline-block;
    float: left;
    position: relative;
    border: 1px solid var(--color-border);
    border-top: 0px;
    border-left: 0px;
    text-align: center;
    text-decoration: none!important;
}

.category-product-item-food img.img-main{
    display: inline-block;
    width: 200px;
    height: 200px;
}

.category-product-item-food .price{
    font-family: OpenSansSemibold;
    font-size: 13px;
    text-align: left;
    line-height: 15px;
    margin: 3px 5px 7px 7px;
    color: #e32124;
    display: inline-block;
}

.category-product-item-food .name{
    height: 37px;
    margin-left: 6px;
    overflow: hidden;
    line-height: 15px;
    font-size: 13px;
    color: #858585;
    text-align: left;
    margin-bottom: 0px;
}

.category-product-item-food .cover-price{
    text-align: left;
}

.category-product-item-food .price-old{
    text-align: left;
    color: #858585;
    font-size: 13px;
    text-decoration: line-through;
    margin-left: 5px;
}

.category-product-item-food .sale-off{
    color: #fff;
    font-size: 13px;
    height: 21px;
    line-height: 21px;
    background: #c63829;
    border-radius: 4px;
    padding: 0px 5px;
    position: absolute;
    top: 4px;
    left: 4px;
}