@charset "utf-8";

#table, .table, table, #caption, .caption, .cap-tion, caption, #thead, .thead, thead, #tfoot, .tfoot, tfoot, tr, .row, .cell, .row li, td, th {
    border-collapse: collapse;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.5;
    color: #F00;
}
#table, .table, table, section .table {
    background: #FF0;
    display: table;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin: 0 auto;
}
#tfoot, .tfoot, tfoot, .row, tr, .cell, .row li, #table ul, .table ul, #table ul li, .table ul li, td, th {
    background: transparent;
}    
#caption, .caption, caption, .cap-tion {
    display: table-caption;
    caption-side: top;
    max-width: 100%;
    text-align: center;
    background: #0CF;
    color: #E36;
    font-size: 1.7rem;
    margin: 0 auto;
}
#caption:hover, .caption:hover, .cap-tion:hover, caption:hover {
    background: #0C3;
    text-transform: uppercase;
    border-radius: .7rem;
    color: #E36;
}
#thead, .thead, thead {
    display: table-header-group;
    font-weight: bold;
    color: #0F2;
    background: #564;
}
.row, .table ul, #table ul, tr {
    display: table-row;
}
.table ul:hover, tr:hover {
    background: #999;
}
.cell, .row li, #table ul li, .table ul li, td, th {
    display: table-cell;
    line-height: 1.25;
    padding: .25rem;
    color: #F00;
	border: 1px #000 solid;
}
.table ul li:hover, td:hover, th:hover {
    background: #3FD;
    color: #F33;
}
#tfoot, .tfoot, tfoot {
    display: table-footer-group;
    background: #F3C;
    color: #3E3;
    font-size: 1.4rem;
}
#tfoot:hover, .tfoot:hover, tfoot:hover {
    background: #26E;
    color: #20C;
    border-radius: .85rem;
}
.table ul li a, th a, td a {
    color: #F00;
    background: transparent;
	padding: .25rem;
    border-radius: .75rem;
}
.table ul li a:hover, th a:hover, td a:hover {
    color: #00F;
	background: #C72;
}
.table ul li, td, th {
	border: 1px #000 solid;
}
.row li:first-child, .table ul li:first-child, #table ul li:first-child, td:first-child {
    color: #00F;
}
.row:hover, .row:hover li .table ul:hover, #table ul:hover, .table ul:hover li, #table ul:hover li, tr:hover {
    background: #999;
}
.cell:hover, .row li:hover, #table ul li:hover, .table ul li:hover, th:hover, td:hover {
    background: #2C9;
    color: #00F;
    border: 1px #FCF solid;
}
/******************************************************************960***********************************************************************************/
@media only screen and (max-width: 60rem) {
    #table, .table, table, #caption, .caption, .cap-tion, caption, #thead, .thead, thead, #tfoot, .tfoot, tfoot, #table ul, .table ul, #row, .row, tr {
        width: 40rem;
        max-width: 100%;
        font-size: .6rem;
        margin: 0 auto;
        padding: 0;
    }
    #caption, .caption, .cap-tion, caption {
        font-size: 1.2rem;
        margin: 0 auto;
    }
    #caption:hover, .caption:hover, .cap-tion:hover, caption:hover {
        border-radius: .4rem;
    }
    #cell, .cell, #table ul li, .table ul li, th, td {
        font-size: .5rem;
        padding: 0;
    }
}
/******************************************************************640***********************************************************************************/
@media only screen and (max-width: 40rem) {
    #table, .table, table, #caption, .caption, caption, #thead, .thead, thead, #tfoot, .tfoot, tfoot, #table ul, .table ul, #row, .row, tr {
        width: 30rem;
        max-width: 100%;
        font-size: .25rem;
        margin: 0 auto;
        padding: 0;
    }
    #caption, .caption, .cap-tion, caption {
        font-size: 1rem;
    }
    #caption:hover, .caption:hover, .cap-tion:hover, caption:hover {
        border-radius: .25rem;
        margin: 0 auto;
    }
    #cell, .cell, #table ul li, .table ul li, th, td {
        font-size: .25rem;
    }
}
/******************************************************************480***********************************************************************************/
@media only screen and (max-width: 30rem) {
    #table, .table, table, #caption, .caption, caption, #thead, .thead, thead, #tfoot, .tfoot, tfoot, #table ul, .table ul, #row, .row, tr {
        width: 22.5rem;
        max-width: 100%;
        font-size: .25rem;
        margin: 0 auto;
        padding: 0;
    }
    #caption, .caption, .cap-tion, caption {
        font-size: 1rem;
        margin: 0 auto;
    }
    #caption:hover, .caption:hover, .cap-tion:hover, caption:hover {
        border-radius: .2rem;
    }
    #cell, .cell, #table ul li, .table ul li, th, td {
        font-size: .2rem;
    }
}
/******************************************************************360***********************************************************************************/
@media only screen and (max-width: 22.5rem) {
    #table, .table, table, #caption, .caption, caption, #thead, .thead, thead, #tfoot, .tfoot, tfoot, #table ul, .table ul, #row, .row, tr {
        width: 15rem;
        max-width: 100%;
        font-size: .2rem;
        margin: 0 auto;
        padding: 0;
    }
    #caption, .caption, .cap-tion, caption {
        font-size: .85rem;
        margin: 0 auto;
    }
    #caption:hover, .caption:hover, .cap-tion:hover, caption:hover {
        border-radius: .15rem;
    }
    #cell, .cell, #table ul li, .table ul li, th, td {
        font-size: .15rem;
    }
}
/******************************************************************360***********************************************************************************/