@charset "utf-8";

#price table {
    border-collapse: collapse;
    margin: 0 auto;
    padding: 0;
    width: 90%;
    table-layout: fixed;
}

#price table tr {
    background-color: #fff4ea;
    padding: .35em;
    border-bottom: 2px solid #fff;
}

#price table th,
#price table td {
    padding: 1em 10px 1em 1em;
    border-right: 2px solid #fff;
}

#price table th {
    font-size: 1rem;
    font-weight: bold;
}

#price table thead tr{
    background-color: #d4c2b0;
    color:#fff;
}

#price table tbody th {
    background: #d4c2b0;
    color: #fff;
    font-weight: bold;
}

#price .txt{
    text-align: left;
    font-size: .85em;
}

#price .price{
    text-align: right;
    font-weight: bold;
}

#price .price p{
    display: inline-block;
    width: 50%;
}

#price .non{
    background:#fff
}

@media screen and (max-width: 600px) {
    #price table {
        border: 0;
        width:100%
    }

    #price table th{
        background-color: #d4c2b0;
        display: block;
        border-right: none;
    }

    #price table thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    #price table tr {
        display: block;
        margin-bottom: .625em;
    }

    #price table td {
        border-bottom: 1px solid #bbb;
        display: block;
        font-size: .8em;
        text-align: right;
        position: relative;
        padding: .625em .625em .625em 4em;
        border-right: none;
    }

    #price table td::before {
        content: attr(data-label);
        font-weight: bold;
        position: absolute;
        left: 10px;
    }

    #price table td:last-child {
        border-bottom: 0;
    }

    #price table tbody th {
        color: #fff;
        font-weight: bold;
    }
}