#body
{
    #product
    {
        @media(min-width:980px)
        {
            display: flex;
            flex-wrap:wrap;
            #product-menu
            {
                width:25%;
                ul
                {
                    li
                    {
                        margin-bottom:20px;
                    }
                }
            }
            #product-list
            {
                width:75%;
                #article-list
                {

                    display: flex;
                    flex-wrap:wrap;
                    article
                    {
                        width:calc((100% - 6vw)  / 3);
                        margin:0 1.5vw 3vw 1.5vw;
                        &:nth-child(3n)
                        {
                            margin-right:0px;
                        }
                        &:nth-child(3n + 1)
                        {
                            margin-left:0px;
                        }
                    }
                }
            }
        }
        @media(max-width:979px)
        {
            #product-list
            {
                #article-list
                {

                    display: flex;
                    flex-wrap:wrap;
                    article
                    {
                        width:calc((100% - 9vw)  / 4);
                        margin:0 1.5vw 3vw 1.5vw;
                        &:nth-child(4n)
                        {
                            margin-right:0px;
                        }
                        &:nth-child(4n + 1)
                        {
                            margin-left:0px;
                        }
                    }
                }
            }
        }
        @media(max-width:767px)
        {
            #product-list
            {
                #article-list
                {

                    display: flex;
                    flex-wrap:wrap;
                    article
                    {
                        width:calc(50% - 5px);
                        margin:0 5px 10px 5px;
                        &:nth-child(2n)
                        {
                            margin-right:0px;
                        }
                        &:nth-child(2n + 1)
                        {
                            margin-left:0px;
                        }
                    }
                }
            }
        }

        #product-menu
        {
            ul
            {
                li
                {
                    a
                    {
                        color:#222;
                        font-weight: 500;
                    }
                    &.active
                    {
                        a
                        {
                            color:$main-color;
                        }
                    }
                }
            }
        }
        @media(max-width:979px)
        {
            #product-menu
            {
                margin-bottom: 20px;
                ul
                {
                    border:1px solid #f1f1f1;
                    li
                    {
                        border-bottom: 1px solid #f1f1f1;
                        display: none;
                        &.active
                        {
                            display: block;
                        }
                        &:last-child
                        {
                            border-bottom: 0px;
                        }
                        a
                        {
                            display: block;
                            padding:15px 10px;
                        }
                    }
                }
                &.active
                {
                    ul
                    {
                        li
                        {
                            display: block;
                        }
                    }
                }
            }
        }
        #product-list
        {
            #article-list
            {
                article
                {
                    a
                    {
                        display: block;
                        position: relative;
                        padding-bottom:20px;
                        picture
                        {
                            width:100%;
                            padding-top:100%;
                            display: block;
                            position: relative;
                            margin-bottom:20px;
                            img
                            {
                                position: absolute;
                                top:0px;
                                left:0px;
                                width: 100%;
                            }
                        }
                        h2
                        {
                            margin-bottom: 5px;
                            line-height: 1.5rem;
                            font-weight: 500;
                            color:#222;
                        }
                        span
                        {
                            display: block;
                            &.note
                            {
                                color:#B5B5B5;
                                margin-bottom: 20px;
                            }
                            &.price
                            {
                                position: absolute;
                                left: 0px;
                                bottom:0px;
                                line-height: 20px;
                                color:#222222;
                                font-weight: 600;
                            }
                        }
                    }
                }
            }
            #pagination
            {
                display: flex;
                flex-wrap:wrap;
                li
                {
                    a
                    {
                        display: block;
                        width: 20px;
                        height: 20px;
                        text-align: center;
                        line-height: 20px;
                        color:#222;
                    }
                    &.active
                    {
                        a
                        {
                            color:$main-color;
                        }
                    }
                }
            }
        }
    }
}