@charset "utf-8";

/* schedule : Annual : list type */
.schedule-list {width: 100%; overflow-x: auto;}
.schedule-list table {white-space: nowrap;}
.schedule-list .bt-schedule {width: 13rem;}
@media (max-width: 767px) {
    .schedule-list .bt-schedule {width: 100%;}
}

/* app guide */
.app-guide {width: 100%; height: auto; font-size: var(--fs17);}
.app-guide.bg {padding: 2.4rem 3.6rem; border: 1px solid var(--gray-200); border-radius: var(--radius-10); background-color: var(--yellow-20);}
.app-guide > h3 {font-weight: 600; font-size: var(--fs23); color: var(--secondary-color);}
.app-guide > .current {font-weight: 500; padding: 1.4rem 0;}
.app-guide > ul {line-height: 1.6;}

/* app user */
.app-user-wrap {width: 100%; height: auto; margin-top: 3rem;}
.app-user-wrap .bo-table .subject {background-color: var(--tbl-tby-th); font-weight: 500; color: var(--primary-color);}
.app-user-wrap .bo-table .select {width: 100%;}
.app-user-wrap > .btn-cnt button {width: 24rem;}

@media (max-width: 1024px) {
    .app-user-wrap .bo-table td[data-label]::before {min-width: var(--label-max-width);}
    .app-user-wrap .bo-table .subject {background-color: transparent;}
    .app-user-wrap .bo-table .select {width: 22rem;}
}
@media (max-width: 767px) {
    .app-user-wrap .bo-table .select {width: 100%;}
    .app-user-wrap .btn-cnt button {width: 100%;}
}

/* app : submitter */
.app-smt-wrap {margin-top: 2rem;}

/* modal : timetable */
#timetable-wrap .timetable {width: 50rem; margin: 0 auto; border: 1px solid var(--gray-200); border-radius: var(--radius-10); overflow: hidden;}
#timetable-wrap .timetable li {display: grid; grid-template-columns: 23.5rem 1fr; align-items: center;}
#timetable-wrap .timetable li:not(:last-child) {border-bottom: 1px solid var(--gray-200);}
#timetable-wrap .timetable li p {padding: 0 2.4rem; display: grid; grid-template-columns: 6rem 1fr; align-items: center; column-gap: 1rem;}
#timetable-wrap .timetable li span {display: block; font-weight: 500; font-size: var(--fs17);}
#timetable-wrap .timetable li .label {padding: .5rem 0; font-size: var(--fs14); color: var(--select-color); border: 1px solid #86aff9; border-radius: var(--radius-50); text-align: center;}
#timetable-wrap .timetable li .time {color: var(--primary-color); background-color: #f7f9fe; text-align: center; padding: 1.5rem 2.4rem;}

@media (max-width: 768px) {
    #timetable-wrap .timetable {width: 100%;}
}
@media (max-width: 667px) {
    #timetable-wrap {max-height: 80%; overflow-y: auto;}
    #timetable-wrap .timetable li {padding: 1.6rem 0 0; grid-template-columns: 1fr; }
    #timetable-wrap .timetable li p {padding: 0 1.6rem;}
    #timetable-wrap .timetable li .label {width: 6rem;}
    #timetable-wrap .timetable li .time {margin-top: 1.6rem; border-top: 1px solid var(--gray-200);}
}

/* modal : grade */
#grade-wrap {width: 100%; max-width: 118rem; max-height: 90%;}
#grade-wrap .grade-info {font-size: var(--fs14);}
#grade-wrap .grade-info ul {display: grid; row-gap: .8rem;}
#grade-wrap .grade-info ul li {padding-left: 1rem; position: relative;}
#grade-wrap .grade-info ul li::before {content: ''; display: block; width: var(--bul5); height: var(--bul5); background-color: var(--bg-bul-color2); border-radius: var(--radius-10); position: absolute; top: .6rem; left: 0;}
#grade-wrap .grade-info > p {margin: .8rem 0 0 1rem;}

#grade-wrap .grade-bar {padding: 2rem 3rem; margin: 2.5rem 0 3rem; border: 1px solid var(--gray-200); border-radius: var(--radius-6); background-color: var(--yellow-20); display: grid; grid-template-columns: 20rem 1fr 19rem; column-gap: 4rem;}
#grade-wrap .grade-bar li {display: flex; align-items: center; gap: 0 .8rem;}
#grade-wrap .grade-bar li .title {font-weight: 500; font-size: var(--fs17); width: auto;}

@media (max-width: 1281px) {
    #grade-wrap {width: 90%; max-width: 100%;}
    #grade-wrap .grade-bar {grid-template-columns: 1fr; row-gap: 1rem}
    #grade-wrap .grade-bar li .title {width: 8rem;}
}
@media (max-width: 768px) {
    #grade-wrap .grade-bar li .frm-file-upload {flex-direction: row; align-items: center; gap: 0 .6rem;}
}
@media (max-width: 767px) {
    #grade-wrap .grade-bar {padding: 1rem 2rem;}
    #grade-wrap .grade-bar li, #grade-wrap .grade-bar li .frm-file-upload {flex-direction: column; align-items: flex-start; gap: .6rem 0;}
}
@media (max-width: 667px) {
    #grade-wrap .grade-bar li .file-upload {flex-direction: column;}
    #grade-wrap .grade-bar li .file-upload input[type="text"] {width: 100%; border-radius: var(--radius-6) var(--radius-6) 0 0;}
    #grade-wrap .grade-bar li .file-upload .inp-label {width: 100%; height: 4rem; border-radius: 0 0 var(--radius-6) var(--radius-6);}
}

/* modal : exam monitoring & access monitoring */
#exam-mtr-wrap {width: 100%; max-width: 118rem; height: 700px;}
#access-mtr-wrap {width: 100%; max-width: 128rem; height: 700px;}

.mtr-info {padding: 1rem 2rem; border: 1px solid var(--gray-250); border-radius: var(--radius-6); background-color: var(--blue-25); font-size: var(--fs15); display: flex; align-items: center; justify-content: space-between;}
.mtr-info .inner {display: flex; align-items: center; gap: 0 1rem; font-size: var(--fs17);}
.mtr-info .inner .chips-room {border-color: var(--gray-250); background-color: var(--white); font-size: inherit;}
.mtr-info .inner p {font-weight: 500;}
.mtr-info .inner p span {font-weight: 600;}
.mtr-info .inner p span::before {content: ''; display: inline-block; vertical-align: middle; margin: 0 1.2rem 0 1rem; width: 1px; height: 1.6rem; background-color: var(--gray-250);}

.mtr-list-wrap {width: 100%; height: auto; margin-top: 3rem; overflow-x: auto;}
.mtr-list-wrap .crad-list {width: 100%; height: auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem;}
.mtr-list-wrap .crad-list li {border: 1px solid var(--gray-250); border-radius: var(--radius-10); overflow: hidden;}
.mtr-list-wrap .crad-list li .crad-tit {padding: .9rem 1.2rem; border-bottom: 1px solid var(--gray-250); background-color: var(--blue-25);}
.mtr-list-wrap .crad-list li .crad-tit .chips-num {width: 3.6rem; height: 2rem; font-size: 1.2rem; color: var(--select-color); border-color: currentColor; background-color: var(--white); letter-spacing: 0;}
.mtr-list-wrap .crad-list li .crad-tit b {vertical-align: middle; padding-left: 1vw; font-weight: 500; letter-spacing: 0;}
.mtr-list-wrap .crad-list li .crad-cont {width: 100%; height: 10.7rem; display: grid; place-content: center; row-gap: 1rem; text-align: center; font-size: var(--fs17);}
.mtr-list-wrap .crad-list li .crad-cont button {font-size: var(--fs14);}

.mtr-list-wrap .bo-table {white-space: nowrap;}
.mtr-list-wrap .bo-table .bg-yellow {background-color: var(--tbl-yellow); text-align: left;}

@media (max-width: 1281px) {
    #exam-mtr-wrap, #access-mtr-wrap {width: 90%; max-width: 100%; height: auto; max-height: 90%;}
    .mtr-list-wrap .crad-list li .crad-tit {text-align: center;}
    .mtr-list-wrap .crad-list li .crad-tit b {display: block; padding-left: 0; margin-top: .5rem;}
}
@media (max-width: 1024px) {
    .mtr-list-wrap .crad-list {grid-template-columns: repeat(4, 1fr);}
    .mtr-list-wrap .bo-table {white-space: normal;}
    .mtr-list-wrap .bo-table .bg-yellow {background-color: transparent;}
}
@media (max-width: 768px) {
    .mtr-list-wrap .crad-list {grid-template-columns: repeat(3, 1fr);}
    .mtr-list-wrap .crad-list li .crad-cont button {width: 100%;}
}
@media (max-width: 667px) {
    .mtr-info {font-size: var(--fs14);}
    .mtr-info, .mtr-info .inner {flex-direction: column; gap: 1rem 0;}
    .mtr-list-wrap .crad-list {grid-template-columns: repeat(2, 1fr);}
    /*.mtr-list-wrap .bo-table td {flex-direction: column; align-items: flex-start; gap: .5rem 0;}
    .mtr-list-wrap .bo-table td[data-label]::after {top: 1rem; transform: none;} 모바일에서 업로드 파일명을 더 보여주려면 주석을 해제하세요.*/
}