.homeproduct {
    clear: both;
    display: block;
    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    flex: 1 100%;
    padding: 10px 0;
    gap: 10px
}
.homeproduct .item {
    position: relative;
    width: 19%;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px;
    text-align: center;
}

.homeproduct .item a {
    display: block;
    overflow: hidden;
    background: #fff;
    padding: 10px 0
}
.homeproduct .item a:hover h3 {
    color: #288ad6
}
.homeproduct .item img {
    display: block;
    width: 180px;
    height: 180px;
    margin: 15px auto
}

.homeproduct .item h3 {
    display: block;
    line-height: 1.3em;
    min-height: 36px;
    font-size: 14px;
    padding: 0 10px;
    color: #111;
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden
}
.homeproduct .item .price {
    display: block;
    overflow: hidden;
    padding: 5px 10px 10px 10px
}
.homeproduct .item .price strong {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    font-size: 14px;
    color: #e10c00;
    line-height: 15px
}
.homeproduct .item .price span, .homeproduct .item strong del{
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    text-decoration: line-through;
    margin-left: 5px;
    color: #222;
    font-weight: normal;
}
.homeproduct .item label {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 11px;
    color: #fff;
    font-weight: 600;
    background: #3fb846;
    border-radius: 2px;
    padding: 0 5px;
    height: 18px
}

.homeproduct .item label.new {
    background: #1191f8
}

.homeproduct .item label.discount {
    background-image: linear-gradient(-90deg, #ec1f1f 0%, #ff9c00 100%);
    border-radius: 10px;
    padding: 1px 7px;
    padding-left: 0;
    padding-right: 10px
}
.homeproduct .item label.discount:before {
    content: ' ';
    display: inline-block;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAaCAYAAAC+aNwHAAAABGdBTUEAALGPC/xhBQAAAVpJREFUOBGVki1LBFEUhueuH0FQTAuimxVE2KZBgxj8AxaLglj8AYLJZLOYtFpFwWQ2iMUkiyBqNCloEFEQYXzuzl7mzP0Y7z3w7j0f73PuDDtZFhl5njfRI5qJREobUB+6RL9otJxEZkD7SMd1JFLagFa6aPGzW04iMpgp9CEWzEZghQVoGN0L+I28kbLgVMA6PUmBty1YlxtRCzAuIv132THx7wKIcfRik9R3IbjfDDANkp+hpumJ8535pqhN+mySDMMhSo1OdwHUWiqJ/wu19c3tXsGRFOvm9k4SVpiPzLsr6mWKlmmIc568uEU0SW/QglLqp9q2KhYfe57slZ7vsiqNqYHs70F/XEtVZ6DCOIfs2AnY3TbknkWfUyvXGehgvhULHshHAla3jbkl4E/yaddV0wHYEgtWa6z+EfBFb8GB31HTBRxC3+gKDdRY/SOgSfSExvwOt/sHwv9i4NYIgYYAAAAASUVORK5CYII=');
    background-size: 50% 50%;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #f13500;
    border-radius: 50%;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-right: 5px
}
.homeproduct .ratingresult {
    padding: 5px 10px
}

.homeproduct .ratingresult span {
    color: #777;
    text-decoration: none;
    position: relative;
    top: 1px
}

.rank{display:inline-block;height:12px;width:70px;text-indent:-999em;background:url('../img/stars.gif') no-repeat left top;vertical-align: middle;background-size: 65px 67px;}
.rank_one{background-position:0 0;width: 12px}
.rank_2{background-position:0 -14px}
.rank_3{background-position:0 -27px}
.rank_4{background-position:0 -40px}
.rank_5{background-position:0 -52px}

.homeproduct .item .promotion, .homepromo .item  .promotion{
    display: block;
    max-height: 36px;
    overflow: hidden;
    padding-left: 5px;
}
.homeproduct .item .promotion p, .homepromo .item  .promotion p {
    color: #666;
    display: block;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.homeproduct .item .promotion p::before, .homepromo .item  .promotion p::before{
    color: #999;
    content: "•";
    display: inline-block;
    font-size: 16px;
    margin-right: 5px;
    vertical-align: middle;
}

.homeproduct .item.feature img {
    width: 480px;
    height: 222px;
    margin: 0 0 14px;
}


.homeproduct .item .percent {
    position: absolute;
    display: block;
    padding: 0 .5em;
    border-radius: .2em;
    background: #c35100;
    font-weight: 700;
    color: #fff;
    order: 99;
    left: 10px;
    top:10px;
    font-size: 12px;
}



/* Accessories Relate */
.col_sub .homeproduct {
    padding: 0;
    margin-top: 0;
    gap:10px;
}
.col_sub .homeproduct .item {
    display: block;
    overflow: hidden;
    width: 100%;
    padding: 0 5px;
    box-sizing: border-box;
    position: relative;
    text-align: left;
    box-shadow: none
}
.col_sub .homeproduct .item img {
    float: left;
    width: 70px;
    height: auto;
    margin: 0 10px 0 0;
}
.col_sub .homeproduct .item h3 {
    display: block;
    overflow: hidden;
    color: #333;
    padding: 0;
    line-height: 1.3em;
    font-weight: bold;
    font-size: 14px;
}
.col_sub .homeproduct .item .price {
    padding: 0;
}
.col_sub .homeproduct .item .actions {
    position: absolute;
    bottom:10px;
    right: 10px;
}