main {
    min-height: 100vh !important;
}
.heading{
    font-size: 24px;
    font-weight: bold;
    padding: 15px;
    text-align: center;
    word-break: keep-all;
}
.table-wrapper {
    width: 100%;   
}
.table-container {
    width: 100%;
    /* padding을 조금 작게 한다. */
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    /* 스크롤바가 보이지 않게 한다. */
    /* IE and Edge */
    -ms-overflow-style: none;
    /* Firefox */
    scrollbar-width: none;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    background: #ffffff;
    border: 5px solid var(--site-color-1);
}
/* 스크롤바가 보이지 않게 한다. */
.table-container::-webkit-scrollbar{
    /* Chrome, Safari, Opera*/
    display: none;    
}
.table-container table{
    width: 100%;
    border-collapse: collapse;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    background: #ffffff;
}
.table-container th {
    padding: 10px;
    font-size: 24px;
    color: #000000;
    background: var(--site-color-1);
}
/* mobile에서는 글자 크기를 작게 한다. */
.table-container tbody td{
    padding: 10px;
    word-break: keep-all;
    font-size: 24px;   
    /* 아래 css를 설정해야 가로를 줄였을 때 테이블 칸이 줄어든다.*/ 
    max-width: 0;    
    overflow: hidden;  
    /* white-space:wrap은 없다. */
}

.table-container tbody td{
    text-align: center;     
}

.table-container img{
        display: inline-block;
    width: 80px;
}
#my-grade .table-container tbody td:nth-child(1){
    word-break: keep-all;
}

@media screen and (max-width: 660px) {     
    .table-container th{
        /* mobile에서는 글자 크기를 작게한다. */
        font-size: 20px !important;      
    }    
    .table-container tbody td{
        /* mobile에서는 글자 크기를 작게한다. */
        font-size: 20px !important;      
    }    
    .table-container img {
        display: inline-block;
        width: 60px;
    }
}