* { box-sizing:border-box; }
html{font-size: 20px;}
.wrap{ margin:0; padding:0; padding: 20px; overflow-x: hidden; max-width: 1200px; margin: 0 auto;}

.kyo_box { width:95%; text-align:center; margin: 0 auto; border-radius: 20px 20px 0 0;}
.kyo_box .kyo_title { display: flex; align-items: center; background-color: #e1e1e1; box-sizing: border-box; padding: 0.5em; border-radius: 20px 20px 0 0; border: 1px solid #ccc; justify-content: center; border-bottom: 0;}

.kyo_box .kyo_title div:first-child{margin-right: 8px; font-size: 0.9rem; font-weight: 600;}
.kyo_box .kyo_title div:last-child{font-size: 0.9rem; font-weight: 600; width: auto; color: #E01820;}

.kyo_box .kyo_title .kyo_title-inner{display: flex; align-items: center; justify-content: center; justify-items: center;}

table { width:100%; padding: 0; margin: 0; border-collapse: collapse !important;}
table th{ border: 1px solid #ccc; box-sizing: border-box; padding: 0.3rem; background-color: #f5f5f5; font-size: 1rem;}
table td{font-size: 1rem; padding: 0.3rem; border: 1px solid #ccc; box-sizing: border-box;}
input { width: 100%; text-align: center; font-size: 1rem;}
        
.resScore { width:80px; text-align:center;}
.selGwa { width:120px; font-size:16px; text-align:center; box-sizing: border-box; padding: 0.3rem;}

.tab-btn{display: flex; align-items: center; justify-content: space-around; width: 60%; text-align: center; margin: 0 auto; margin-bottom: 0.5rem; font-size: 0.9rem;}
.tab-btn>li{flex: 1; border: 1px solid #E01820; cursor: pointer; width: 49%; box-sizing: border-box; padding: 0.3rem;}
.tab-btn>li.active{background-color: #E01820; color: #fff;}

.save-my-grading-btn{width: 95%; text-align: center; background-color: #E01820; color: #fff; margin: 0 auto; margin-top: 20px; cursor: pointer; transition: .2s; font-size: 1rem; box-sizing: border-box; padding: 0.5rem; border-radius: 10px;}
.save-my-grading-btn:hover{background-color: #ba090f;}

.info{margin-bottom: 10px; font-size: 16px; text-align: center;}

/* .page_title { text-align:center; font-size:1rem; margin-bottom:10px; font-weight: bold;} */

.closed{display: none; cursor: pointer;}
.nesin-use-info-title{text-align: center; display: flex; align-items: center; justify-content: space-between; background-color: #fff; width: 100%; box-sizing: border-box; border-bottom: 1px solid #333; margin-bottom: 1rem;}
.nesin-use-info-title h2{font-size: 1rem; word-break: keep-all; text-align: left;}

.self-my-grading-btn{width: 95%; text-align: center; background-color: #fff; color: #E01820; margin: 0 auto; margin-top: 20px; cursor: pointer; transition: .2s; font-size: 1rem; box-sizing: border-box; padding: 0.5rem; border-radius: 10px; border: 1px solid #E01820;}
.self-my-grading-btn:hover{background-color: #ba090f; color: #fff;}

/* ¹ÝÀÀÇü */
/* ÅÂºí¸´ °¡·Î¸ðµå */
@media only screen and (min-width: 1024px) and (max-width: 1400px){

}

/*ÅÂºí¸´ ¼¼·Î¸ðµå*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {

}

/* ¸ð¹ÙÀÏ */
@media only screen and (max-width: 768px) and (min-width: 300px) {
.wrap{width: 100%;}
.kyo_box{width: 100%; overflow: hidden;}
.tab-btn{width: 100%; font-size: 0.8rem;}
.info{font-size: 0.75rem; line-height: normal;}
table th{font-size: 0.9rem;}

.kyo_box .kyo_title div:first-child{font-size: 0.8rem;}
.kyo_box .kyo_title div:last-child{font-size: 0.8rem;}

.self-my-grading-btn,.save-my-grading-btn{padding: 1rem; font-size: 0.8rem;}
.table th{font-size: 1rem !important; padding: 0.5rem;}
.table td{padding: 0;}
input{padding: 0.8rem 0.3rem; font-size: 1rem;}

.closed{color: #333; font-size: 30px; border: none; background-color: transparent; transition: .1s; display: block;}
.closed:hover {color: #E01820;}

.nesin-use-info-title h2{font-size: 1rem;}
.self-my-grading-btn{margin-bottom: 5rem;}
}