.red { color: #d53236;}

/*********************************************
    내강의실 모바일 > 카드 리스트형 css
*********************************************/
.list-group { line-height: normal; }
.ielts .list-group.ongoing { margin-top: 16px;}
.list-group .list-item { border-radius: var(--b-radius0);padding: 12px;background-color: var(--n-white);}
.list-group .list-item + .list-item {  margin-top: 12px; }
.list-group .list-item .list-header { display: flex; align-items: center;}
.list-group.temporary .list-item .list-header,
.list-group.feedbacks .list-item .list-header { display: block}
.list-group .list-item .list-header .badge { display: inline-block; padding: 2px 8px;align-items: center;background-color: #F8F8F8;border-radius: 4px;font-size: var(--f-body3); }

.list-group .list-item .list-header .list-icon { background-size: contain;width: 60px;height: 60px; }
.list-group .list-item .list-header .list-icon + .list-title,
.list-group .list-item .list-header .list-image + .list-title { margin-left: 12px;}

.list-group .list-item .list-header .list-image img { aspect-ratio: 136 / 59; border-radius: 8px;height: auto;width: 130px; vertical-align: middle;}

.list-group .list-item .list-header .list-desc { display: flex; align-items: center; justify-content: space-between;}
.list-group .list-item .list-header .list-desc .date { color: var(--n-info);font-size: var(--f-body2); }
.list-group .list-item .list-header .list-desc .badge-warp { display: flex;}
.list-group .list-item .list-header .list-desc .round-text { font-size: var(--f-body2);}
.list-group .list-item .list-header .list-desc + .list-title { margin-top: 6px;}

.list-group.feedbacks .list-item .list-header .list-desc { display: flex; align-items: center;}

.list-group .list-item .list-header .list-title .name { color: var(--n-mainTitle);font-size: var(--f-body1); }
.list-group .list-item .list-header .list-title .desc { color: var(--n-info);font-size: var(--f-body2);}

/* .list-group .list-item .list-header .list-title .tag-wrap { margin-bottom: 6px;;} */
.list-group .list-item .list-header .list-title .tag-wrap .tag { font-size: var(--f-body3); }
.list-group .list-item .list-header .list-title .tag-wrap .tag + .tag {  padding-left: 8px; position: relative;}
.list-group .list-item .list-header .list-title .tag-wrap .tag + .tag::before { content : "|"; position: absolute; top: 0; left: 0; color: var(--n-info1) }
.ielts .list-group .list-item .list-header .list-title .tag-wrap .tag.module { color: var(--p-color2) }
.academy .list-group .list-item .list-header .list-title .tag-wrap .tag.module { color: var(--p-color1) }




/*********************************************
    Badge
*********************************************/
.list-group.feedback .list-item .list-header .badge { margin-bottom: 8px;}

/*  Basic */
.list-group.feedback .list-item .list-header.basic .list-icon { background : url("../img/ielts/my_class/mo/ico-correct-bs.svg") no-repeat }
.list-group.feedback .list-item .list-header.basic .badge,
.list-group .list-item .list-header .badge.basic { background: var(--e-writing-color-bg);color: var(--e-writing-color);  }
.list-group.feedback .list-item .list-header.basic .badge::before,
.list-group .list-item .list-header .badge.basic::before { content: "Basic" }

/* Premium */
.list-group.feedback .list-item .list-header.premium .list-icon { background : url("../img/ielts/my_class/mo/ico-correct-pr.svg") no-repeat }
.list-group.feedback .list-item .list-header.premium .badge,
.list-group .list-item .list-header .badge.premium { background: var(--e-reading-color-bg);color: var(--e-reading-color);}
.list-group.feedback .list-item .list-header.premium .badge::before,
.list-group .list-item .list-header .badge.premium::before { content: "Premium" }

/* CDT */
.list-group .list-item .list-header .badge.cdt {background: var(--e-reading-color-bg);color: var(--e-reading-color)}
.list-group .list-item .list-header .badge.cdt::before { content: "CDT" }
.list-group .list-item .list-header .badge.used { background: #FFEDE9; color: #FF3636;}
.list-group .list-item .list-header .badge.used::before { content: "이용중"}
.ielts .list-group .list-item .list-header .badge.module {color: var(--p-color2)  }
.academy .list-group .list-item .list-header .badge.module {color: var(--p-color2)  }

/* round */
.list-group.temporary .list-item .list-header .badge.round { color :#000; }


/*********************************************
    Content
*********************************************/
.list-group .list-item .list-contents { margin-top: 16px; position: relative;}
.list-group.cdt .list-item .list-contents + .list-contents { margin-top:  0px ;}

.list-group .list-item .list-contents .info-group + .info-group { margin-top: 4px; ;}
.list-group .list-item .list-contents .info-group .info-box{  display: flex; font-size: var(--f-body3); width: 100%;}
.list-group .list-item .list-contents .info-group .info-box .info-title { color: var(--n-subTitle); margin-right: 4px;}
.list-group .list-item .list-contents .info-group .info-box .info-title::before { content: "· "; display: inline;}

.list-group .list-item .list-contents .info-group .info-box .info-desc span { color: var(--n-info);font-weight: 400;}

/* 내강의실 > 메인 상품 진도율  */
.list-group.course .list-item .list-contents .rate { background: var(--e-speaking-color-bg);border-radius: 8px;color: var(--n-mainTitle);font-size: var(--f-body3);font-weight: 700;padding: 6px 12px;position: absolute;right: 0;top: 0; }


/* 한줄에 2개 나오는 경우  */
.list-group .list-item .list-contents .info-group.col-2 { display: flex;}
.list-group .list-item .list-contents .info-group.col-2 .info-box {  width: 50%; }

/* 첨삭 > 임시저장 Custom */
.list-group.temporary .list-item .list-contents,
.list-group.feedbacks .list-item .list-contents { margin-top: 4px !important;}


/*********************************************
    Button
*********************************************/
.list-group .list-item .list-action { margin-top: 16px;}
.list-group .list-item .list-action button.btn-submit,
.list-group .list-item .list-action a.btn-submit { align-items: center;border-radius: var(--b-radius0);color: var(--n-white);display: flex;font-size: var(--f-body1);font-weight: 500;height: 40px;justify-content: center;letter-spacing: -.28px;line-height: 20px; width: 100%;}
.list-group .list-item .list-action a.btn-default { align-items: center;border-radius: var(--b-radius0); display: flex;font-size: var(--f-body2);font-weight: 500;height: 40px; justify-content: center; border: 1px solid var(--n-info2); color: var(--n-info); width: 100%; }
.list-group .list-item .list-action a.btn-attendance { align-items: center;border-radius: var(--b-radius0); display: block;font-size: var(--f-body2);font-weight: 500;height: unset; justify-content: center;  border: 1px solid var(--n-info2); color: var(--n-info); width: 100%; background: var(--n-white);width: 100%; text-align: center; padding: 6px 0px; min-height: 40px; }
.list-group .list-item .list-action a.btn-attendance span { vertical-align: middle; }
.list-group .list-item .list-action a.btn-attendance b { color : #000}
.list-group .list-item .list-action a.btn-attendance.active { border: 1px solid var(--p-color1); background: var(--p-color1); color: var(--n-white);  }
.list-group .list-item .list-action a.btn-attendance.active b { color: var(--n-white)}
.list-group .list-item .list-action a.btn-attendance.deny { width: 100%; background: var(--b-color3);    border: 1px solid var(--s-color1);}
.list-group .list-item .list-action a.btn-attendance.deny b { color: var(--n-info); }
.list-group .list-item .list-action:not(.sub-action) * + * { margin-top: 8px;}

.ielts .list-group .list-item .list-action button.btn-submit,
.ielts .list-group .list-item .list-action a.btn-submit { background-color: var(--p-color2); }
.academy .list-group .list-item .list-action button.btn-submit,
.academy .list-group .list-item .list-action a.btn-submit { background-color: var(--p-color1); }
.list-group .list-item .list-action button.disabled,
.list-group .list-item .list-action a.disabled {      background-color: var(--b-color4) !important;border-color: var(--b-color4) !important;color: var(--n-deactivate) !important;cursor: default;pointer-events: none;  }

.list-group .list-item .list-action i.play {    background-image: url(../img/ielts/my_class/mo/ico_play.svg); background-position: 50%;background-repeat: no-repeat;background-size: 14px 14px;display: block;height: 14px;margin-right: 4px;width: 14px; }

.list-group .list-item .list-action.sub-action { display: flex; justify-content: flex-end; }
.list-group .list-item .list-action.sub-action a.btn-default { padding: 8px 12px; height: unset; width: auto; }
.list-group .list-item .list-action.sub-action * + * { margin-left: 8px;}

.list-group .list-item .list-action.sub-action + .list-action { margin-top: 6px;;}


/*********************************************
    Question
*********************************************/
/* .list-group .list-item .list-question {border-top: 1px dashed var(--b-color2);margin-top: 12px;padding-top: 12px;  } */
.list-group .list-item .list-question { margin-top: 12px;padding: 12px;display: block;  border-radius: var(--b-radius0);background-color: var(--b-color5);}
.list-group .list-item .list-question .question { font-size: var(--f-body2);font-weight: 500; }
.list-group .list-item .list-question .question::after { content: ""; display: block; width: 100%;border-bottom: 1px solid var(--s-color1); margin: 8px 0px; }
.list-group .list-item .list-question .answer { margin-top: 8px;font-size: var(--f-body2);}




/*********************************************
    첨삭 - 스피킹
*********************************************/
.correct-popup-header-essay .speaking-textarea .speaking-essay { padding-top: 36px; }
.correct-popup-header-essay .speaking-textarea .speaking-essay .feedback-notice { font-size: var(--f-body3);  padding-top: 12px;text-align: center;}
.correct-popup-header-essay .speaking-textarea .speaking-essay .swiper { padding-top: 12px; }


.info-popup-wrap { z-index: 99999 ; bottom: 56px;}
.info-popup-wrap .info-popup { padding: 36px 16px 16px;}



/*********************************************
    무료연장신청 - 신청내역
*********************************************/
.extension-wrap { width: 100%; }
.extension-wrap .extension-header { height: 43px; background-color: #F3FFEC; font-size: var(--f-body2); letter-spacing: -0.26px; color: #333333; border-bottom: 1px solid #1D2631; border-top: 1px solid #1D2631; display: flex; width: 100%; align-items: center;}
.extension-wrap .extension-header div { width: 50%; text-align: center; }

.extension-wrap .extension-body { }
.extension-wrap .extension-body .extension-card { border-bottom: 1px solid #c5c5c5; padding-bottom: 12px;;}
.extension-wrap .extension-body .extension-card .extension-item { width: 100%; display: flex; align-items: center; }
.extension-wrap .extension-body .extension-card .extension-item div { width: 50%; padding-top: 16px;     font-size: var(--f-body1);line-height: normal;}
.extension-wrap .extension-body .extension-card .extension-item div:nth-child(2) { text-align: center;}
.extension-wrap .extension-body .extension-card .extension-response {font-size: var(--f-body2); line-height: 20px; letter-spacing: -0.01px;  text-align: left;position: relative; padding-top: 12px;}
.extension-wrap .extension-body .extension-card .extension-response.reject { padding-left: 20px;}
.extension-wrap .extension-body .extension-card .extension-response.reject .box {  background: #f8f8f8;border-radius: 4px;padding: 16px;  }
.extension-wrap .extension-body .extension-card .extension-response strong { margin-bottom: 4px; ;width: 100%; display: block;}
.extension-wrap .extension-body .extension-card .extension-response.reject span { color: #D53236; }
.extension-wrap .extension-body .extension-card .extension-response.reject::before { content: ""; border-top: hidden; padding: 0 0 12px !important; padding-left: 20px !important; background-image: url(../img/ielts/my_class/ico_reply.svg); background-size: 14px 14px; background-position: 0 0; background-repeat: no-repeat; position: absolute; top: 16px; left: 0;}

.period-list { margin-top: 6px;;}
.period-list .period-item { margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; }
.period-list .period-item .course-name {     color: #333;font-size: var(--f-body2);overflow: hidden;text-overflow: ellipsis;white-space: nowrap; position: relative;}
.period-list .period-item .course-name::before { content: "· ";display: inline;}
.period-list .period-item .course-period { color: #666;font-size: var(--f-body2);letter-spacing: -.01px;margin-left: 12px;    min-width: 120px;}


/* .academy .option-info { margin-top : 24px !important; margin-bottom: 8px !important ;} */

.academy .course-header { display: flex; align-items: center; justify-content: space-between ; margin: 24px 0 8px ;}
.academy .course-header .lecture-title , .academy .course-header .option-info { margin: 0px !important;}
.academy .option-info strong { color: var(--p-color1)}
.ielts .option-info strong { color: var(--p-color2)}