#body
{
    #picture-list
    {
        .main
        {

            li
            {
                display: none;
                &.active
                {
                    display: block;
                    picture
                    {
                        display: block;
                        img
                        {
                            display: block;
                            max-width:100%;
                        }
                    }
                }
            }
        }
        .thumb
        {
            display: flex;
            flex-wrap: wrap;
            @media(min-width:1200px)
            {
                padding-top:30px;
                li
                {
                    width: calc((100% - 150px) / 6);
                    margin:0 15px 30px 15px;
                    &:nth-child(6n)
                    {
                        margin-right: 0px;
                    }
                    &:nth-child(6n + 1)
                    {
                        margin-left: 0px;
                    }
                }

            }
            @media(max-width:1199px)
            {
                padding-top:20px;
                li
                {
                    width: calc((100% - 100px) / 6);
                    margin:0 10px 20px 10px;
                    &:nth-child(6n)
                    {
                        margin-right: 0px;
                    }
                    &:nth-child(6n + 1)
                    {
                        margin-left: 0px;
                    }
                }
            }
            @media(max-width:980px)
            {
                padding-top:10px;
                li
                {
                    width: calc((100% - 50px) / 6);
                    margin:0 5px 10px 5px;
                    &:nth-child(6n)
                    {
                        margin-right: 0px;
                    }
                    &:nth-child(6n + 1)
                    {
                        margin-left: 0px;
                    }
                }
            }
            @media(max-width:767px)
            {
                padding-top:0;
                li
                {
                    width: calc(100% / 4);
                    margin:0px;
                }
            }
            li
            {

                picture
                {
                    display: block;
                    width: 100%;
                    position: relative;
                    cursor: pointer;
                    padding-top:70%;
                    overflow: hidden;
                    img
                    {
                        width:100%;
                        position: absolute;
                        top:0px;
                        left: 0px;
                    }
                }

            }
        }
    }

    @media(min-width:980px)
    {
        #product-body
        {

            display: flex;
            #content
            {
                width: 60%;
            }
            #sale
            {
                width: 40%;
                padding-left: 30px;
            }
        }
    }
    @media(max-width:979px)
    {
        #product-body
        {


            #content
            {
                padding-top:50px;
                padding-bottom:50px;
            }
            #sale
            {

            }
        }
    }
    #product-body
    {

        #content
        {
            line-height: 150%;
            letter-spacing: 2px;
            font-size:0.9em;
            h2
            {
                font-size:1.2rem;
                font-weight: 600;
                padding:10px 0;
            }
            ul
            {
                padding:10px 0;
            }
            dl
            {
                padding:10px 0;
                dt
                {
                    display: inline-block;
                    padding-left:20px;
                    position: relative;
                    &::before
                    {
                        position: absolute;
                        left:0px;
                        top:5px;
                        content:' ';
                        width: 15px;
                        height:15px;
                        display: block;
                        background: $main-color;
                    }
                }
                dd
                {
                    display: inline;
                }
            }
        }

        #sale
        {
            #sale-price
            {
                color:#F21919;
                font-size:1.2em;
                font-weight: 600;
                margin-bottom: 20px;
                display: block;
            }

            .form-group
            {
                display: block;
                margin-bottom: 20px;
                label
                {
                    width: 100%;
                    display: block;
                    line-height: 150%;
                    margin-bottom: 10px;
                }
            }
            #sale-option
            {
                .form-group
                {
                    select
                    {
                        padding:0px 10px;
                        margin:0px;
                        border:1px solid #E0E0E0;
                        height:50px;
                        width:100%;
                    }
                }
            }
            #sale-num
            {
                border:1px solid #E0E0E0;
                height: 50px;
                display: flex;
                margin-bottom: 20px;
                button
                {
                    height: 48px;
                    width: 48px;
                    border:0px;
                    margin:0px;
                    padding:0px;
                    background: rgba(255,255,255,0);
                    cursor: pointer;
                }
                div
                {
                    text-align: center;
                    line-height: 38px;
                    flex:1;
                    position: relative;
                    input
                    {
                        width: 100%;
                        height: 100%;
                        text-align: center;
                        margin:0px;
                        padding:0px;
                        border:0px;
                        font-size:1em;
                    }
                    &::before
                    {
                        content: ' ';
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top:0px;
                        background: rgba(255,255,255,0);
                        left: 0px;
                        z-index:100;
                    }

                }
            }
            #sale-more
            {
                border:1px solid #E0E0E0;
                padding:10px 10px 0 10px;
                >div
                {
                    background: #F2F2F2;
                    padding:10px 20px;
                    display: flex;
                    margin-bottom: 10px;
                    align-items:center;
                    >span
                    {
                        flex:1;
                    }
                    select
                    {
                        width: 50px;
                        border:0px;
                        text-align: center;
                        height: 30px;
                    }
                }
            }
            #sale-button
            {
                button
                {
                    width: 100%;
                    border:0px;
                    margin-bottom: 20px;
                    height: 50px;
                    padding:0px;
                    font-size:1.1em;
                    font-weight: 600;
                    &[type=submit]
                    {
                        color:#fff;
                        background:$main-color
                    }
                    &[type=button]
                    {
                        color:#222;
                        background: #F4F4F4;
                    }
                }
            }
        }
    }
}