﻿body {
    background: rgba(243, 243, 246, 1);
}

#wrapper {
    padding-bottom: 100px;
}

.filterTagRq {
    display: flex;
}

    .filterTagRq .item {
        color: rgba(255, 255, 255, 1);
        /*   font-family: 'bold';
    font-size: 28px;
    line-height: 52px;*/
        text-align: center;
        text-transform: capitalize;
        margin: 0 18px;
    }

        .filterTagRq .item.atc {
            color: rgba(0, 153, 255, 1);
        }


.head-fenlei {
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    line-height: 64px;
    background: #ffffff;
    overflow: hidden;
}

.head-fenlei-ova {
    height: 84px;
    width: 100%;
    overflow: hidden;
}

    .head-fenlei-ova .filter-option {
        height: 84px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 16px 10px 16px;
    }

.head-fenlei-list {
    height: 84px;
    flex-wrap: nowrap;
}

    .head-fenlei-list .item {
        padding: 0 24px;
        margin: 0 16px;
        color: rgba(153, 153, 153, 1);
        line-height: 64px;
        height: 64px;
        text-align: center;
        text-transform: capitalize;
        white-space: nowrap
    }

        .head-fenlei-list .item.atc {
            color: rgba(0, 153, 255, 1);
            position: relative;
        }

            .head-fenlei-list .item.atc::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: rgba(0, 153, 255, 1);
            }

.content-list {
    padding: 32px;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-gap: 34px;
}

    .content-list .item {
        width: 326px;
        height: 500px;
        background: #fff;
        border-radius: 4px;
        position: relative;
        box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.25);
    }

        .content-list .item .item-brand {
            margin: 16px 16px 0;
            color: rgba(102, 102, 102, 1);
            font-size: 28px;
            font-weight: 700;
            line-height: 32px;
            letter-spacing: 1px;
            text-transform: uppercase;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .content-list .item .item-img {
            width: 100%;
            height: 240px;
            /*background: rgba(226, 226, 227, 1);*/
            border-radius: 4px;
        }

            .content-list .item .item-img img {
                width: 240px;
                height: 240px;
                margin: 0 auto;
                display: block;
            }

        .content-list .item .item-Inventory,
        .content-list .item .item-badge {
            position: absolute;
            top: 16px;
            right: 16px;
            background: rgba(30, 30, 30, 1);
            color: rgba(255, 255, 255, 1);
            /*font-family: 'regular';
    font-size: 20px;
    line-height: 32px;*/
            text-align: center;
            padding: 0 10px;
            border-radius: 32px;
            font-size: 12px;
            line-height: 20px;
        }

        .content-list .item .item-badge--coming {
            background: rgba(0, 153, 255, 1);
        }

        /* HOT 徽章位於狀態徽章下方，與其同欄對齊 */
        .content-list .item .item-badge--hot {
            top: 44px;
            background: rgba(220, 38, 38, 1);
        }

        .content-list .item .item-title {
            margin: 4px 16px 0;
            color: rgba(51, 51, 51, 1);
            /* font-family: 'light';
    font-size: 28px;
    line-height: 36px;*/
            text-align: left;
            text-transform: capitalize;
            height: 72px;
        }

        .content-list .item .item-ren {
            /* font-family: 'light';
    font-size: 24px;
    line-height: 52px;*/
            text-align: left;
            text-transform: capitalize;
            margin: 8px 16px;
            color: rgba(153, 153, 153, 1);
        }

            .content-list .item .item-ren span {
                /*  font-family: 'bold';
    color: rgba(30, 30, 30, 1);*/
                margin: 0 4px;
            }

        .content-list .item .item-price {
            color: rgba(0, 153, 255, 1);
            /* font-family: 'medium';
    font-size: 28px;
    line-height: 36px;*/
            text-align: left;
            text-transform: capitalize;
            margin: 8px 16px;
        }


.fixed-button-cart {
    display: block;
}
