@charset "utf-8";
:root{
	--f-size10: 10px;
	--f-size14: 14px;
	--f-size22: 22px;
	--f-size26: 26px;
}
img { vertical-align: middle; }

#header body,
#header input,
#header button,
#header li,
#header p{line-height: inherit; letter-spacing: inherit;} /* 하단 기본으로 들어가있던 css의 영향으로 추가함 */

body, input, button, li, p {line-height: 1.69; letter-spacing: -1px; }

input[type="date"]::after { content: ''; position: absolute; width: auto; height: auto; border: 0; left: 0; top: 0; transform: none; border-radius: 0; display: none; }
input[type="date"]::before { display: none; }


/* select */
select { border: 1px solid var(--s-color1); border-radius: 12px; padding: 0px 16px; padding-right: 48px; height: 56px; font-size:var(--f-body1); font-family: inherit; appearance: none; -webkit-appearance: none; font-family: inherit; background-size: 24px 24px; background-image: url('https://static.edmclass.com/common/new_selectArrow.svg'); background-repeat: no-repeat; background-position: right 16px center; outline: none; min-width: 150px; letter-spacing: -0.32px; cursor: pointer; color: var(--n-info);}
select:focus,
select:focus-visible { border-color: var(--n-info) !important; outline: 0;}
select option:checked{background: var(--b-color4);}
.select-option{border-radius: var(--b-radius3); height: 56px; line-height: 56px; cursor: pointer; color: var(--n-info); background-image: url('https://static.edmclass.com/common/new_selectArrow-24.svg'); border: 1px solid var(--s-color1); background-position: right 16px center; background-size: 24px; font-size: var(--f-heading3); letter-spacing: -0.32px;}
.select-option .list{width: 100%; pointer-events: auto; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); border-radius: var(--b-radius0); max-height: 300px; overflow-y: auto; transition: none; display: none; opacity: 1;}
.select-option .list::-webkit-scrollbar{display: block; width: 6px; }
.select-option .list::-webkit-scrollbar-track{background-color: transparent;}
.select-option .list::-webkit-scrollbar-thumb{background: var(--b-color2); border-radius: 8px;}
.select-option.open{border-color: var(--n-info) !important; background-image: url('https://static.edmclass.com/common/new_selectArrow-active-24.svg');}
.select-option.open .list{display: block;}

select:invalid,
select:user-invalid { border-color: #FF5959; color: var(--n-subTitle);}
.select-option:invalid,
.select-option:user-invalid,
.select-option.invalid { border-color: #FF5959; color: var(--n-subTitle);}
.select-option option[value=""][disabled] { display: none }

.boardWrite select{height: 40px; border-radius: var(--b-radius0); background-size: 16px; font-size: inherit; padding: 0 32px 0 12px;}
.boardWrite .select-option{height: 40px; line-height: 37px; font-size: inherit; border-radius: var(--b-radius0);}
/* .select-option { width: 100%; border: 1px solid var(--s-color1); border-radius: 12px; height: 56px; font-size:var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; display: flex; align-items: center;}
.select-option.small { height: 44px; font-size:var(--f-size14); letter-spacing: -0.01px; color: #333333; }
.select-option option { color: #111; } */



/* 인풋 */
input[type="text"] { height: 48px; border: 1px solid #C5C5C5; border-radius: 4px; padding: 0 16px; box-sizing: border-box; /* font-size:var(--f-body1); */ line-height: 34px; vertical-align: middle; font-size:var(--f-heading3); letter-spacing: -0.02px; color: #333333; outline: none; }
input[type="text"]::placeholder { color: #c5c5c5; }
input[type="text"]:focus { border: 1px solid #949EA2; }
input[type="text"]:disabled { border: 1px solid #C5C5C5; color: #c5c5c5; background-color: #F8F8F8; }
input[type="checkbox"] { border: 1px solid #C5C5C5; }
input[type="checkbox"]+label { margin-left: 5px; }
label+input[type="checkbox"] { margin-left: 5px; }

/* 버튼기본설정 */
a.button,
input.button,
button.button { display: inline-block; width: auto; height: 42px; padding: 0 16px; box-sizing: border-box; border-radius: 4px; background-color: #8b8b8b; line-height: 42px; text-align: center; vertical-align: middle; letter-spacing: -0.02px; cursor: pointer; outline: none; transition: all .3s ease-in-out; border: 0; box-sizing: border-box; font-size:var(--f-heading3); color: #FFFFFF; }

a.button:hover,
input.button:hover,
button.button:hover { background-color: #777; }

a.button.black,
input.button.black,
button.button.black { background-color: #333; color: #fff; }

a.button.black:hover,
input.button.black:hover,
button.button.black:hover { background-color: #222; }

a.button.disabled,
input.button.disabled,
button.button.disabled,
input.button:disabled,
button.button:disabled { background-color: #EFF1F6!important; color: #C5C5C5!important; border: 0!important; cursor: default; padding: 0 16px!important; }

a.button.disabled:hover,
input.button.disabled:hover,
button.button.disabled:hover,
input.button:disabled:hover,
button.button:disabled:hover { background-color: #EFF1F6!important; color: #C5C5C5!important; border: 0!important; cursor: default; padding: 0 16px!important; }


a.button.primary,
input.button.primary,
button.button.primary { background-color: #30B2F3; color: #fff; }

a.button.primary:hover,
input.button.primary:hover,
button.button.primary:hover { background-color: #22a4e6; }

a.button.line,
input.button.line,
button.button.line { border:1px solid #30B2F3; color: #30B2F3; background-color: #ffffff; line-height: 40px; padding: 0 15px; }

a.button.line:hover,
input.button.line:hover,
button.button.line:hover { background-color: #F2FAFF; }

a.button.black.line,
input.button.black.line,
button.button.black.line { border:1px solid #999999; color: #333333; background-color: #ffffff; line-height: 40px; padding: 0 15px; }

a.button.black.line:hover,
input.button.black.line:hover,
button.button.black.line:hover { background-color: transparent; }


.button+.button { margin-left: 5px; }


.blind { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; }
#breadcrumb { background: #F0F0F2 }

/* wrapper 설정 */
.wrapper { width: 100%; max-width: 1248px; margin: 0 auto; /* overflow: hidden; */ }
.pb0 { padding-bottom: 0 !important; }
.mt0 { margin-top: 0 !important; }
.row { display: flex; align-items: flex-start; justify-content: flex-start; margin: 0 -35px; }
.row.p18 { margin: 0 -18px; }
.row .column { padding: 0 35px; }
.row.p18 .column { padding: 0 18px; }
.row .column.c6 { width: 50%; }
.row .column.c4 { width: calc(100% / 3); }
.row .column.c3 { width: calc(100% / 4); }
.row .column.c20p { width: calc(100% / 5); }
.container a, .container button { transition: all .3s ease; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.no-data { text-align: center!important; }

/* 게시글이 없는 경우 */
.noData{width: 100% !important; text-align: center; padding: 85px 0 !important; border-top: 1px solid var(--s-color1) !important; border-bottom: 1px solid var(--s-color1) !important; height: auto;}
.noData .flex{width: 100%; justify-content: center;}
.noData p{position: relative; padding-top: 32px; color: var(--n-deactivate); line-height: 20px; letter-spacing: -0.28px; font-size: var(--f-body1); font-weight: 700; padding-top: 60px;}
.noData p::before{content: ''; background-image: url('https://static.edmclass.com/common/board/no-data_pc.svg'); width: 46px; height: 46px; background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.noData.editing{border: none !important;}

.my-class-wrapper .wrapper .my-class-contents .card{position: relative;}
.my-class-wrapper .wrapper .my-class-contents .card .ico-more{position: absolute; right: 32px; top: 32px; width: 24px; height: 24px; background-image: url('https://static.edmclass.com/ielts/my_class/plus-icon-24.svg'); background-repeat: no-repeat; background-size: contain; background-position: center;}

.my-class-wrapper .wrapper .my-class-contents .notice .card .noData {height: 150px !important; border: unset !important; padding: 0 !important;}
.my-class-wrapper .wrapper .my-class-contents .noData#schedule-list-empty { border: unset !important; padding: 44px 0px !important; min-height: 150px;;}
.my-class-wrapper .wrapper .my-class-contents .notice .card .board-list{height: 150px; overflow: hidden;}
.my-class-wrapper .wrapper .my-class-contents .notice .card .board-list li{display: flex; align-items: center; }
.my-class-wrapper .wrapper .my-class-contents .notice .card .board-list li + li{margin-top: 8px;}
.my-class-wrapper .wrapper .my-class-contents .notice .card .board-list li a{width: calc(100% - 60px); padding-right: 16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.my-class-wrapper .wrapper .my-class-contents .notice .card .board-list li .date{width: 60px; color: var(--n-info);}
/* 1:1 학습문의 */
.my-class-wrapper .wrapper .my-class-contents .notice .contact .card .board-list li{position: relative; padding-left: 57px;}
.my-class-wrapper .wrapper .my-class-contents .notice .contact .card .board-list li .badge{width: 57px; position: absolute; left: 0;}
.my-class-wrapper .wrapper .my-class-contents .notice .contact .card .board-list li .badge.waiting{background-color: #F0F0F2; color: #40404E; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; height: 24px; border-radius: 4px; font-size:var(--f-body3); letter-spacing: -0.01px; }
.my-class-wrapper .wrapper .my-class-contents .notice .contact .card .board-list li a{padding: 0 16px; }

td.no-data { padding: 40px 0!important; text-align: center!important; }
.bold { font-weight: bold !important; }
select { padding-right: 36px; background-position: right 12px center; }
textarea { height: 192px; padding: 16px; font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #333333; /* UI Properties */ background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #C5C5C5; border-radius: 12px; width: 100%; }
input[type=date] { padding: 0px 16px; font-size:var(--f-heading3); letter-spacing: -0.02px; color: #333333; font-family: inherit; outline: none; border: 1px solid #C5C5C5; border-radius: 4px; width: 140px; height: 44px; font-size:var(--f-size14); letter-spacing: -0.01px; }

/* width 공통 */
.w140 { width: 140px !important; min-width: 140px !important; }
.w100p { width: 100% !important; }
.flex-end { display: flex; align-items: center; justify-content: flex-end; }

/* margin 공통 */
.mt60 { margin-top: 60px; }
.mt50 { margin-top: 50px !important; }
.mt40 { margin-top: 40px !important; }
.mt36 { margin-top: 36px; }
.mt32 { margin-top: 32px; }
.mt24 { margin-top: 24px; }
.mt16 { margin-top: 16px !important; }
.mb8 { margin-bottom: 8px !important; }

/* margin 공통 */


/* padding 공통 */
.pl16 { padding-left: 16px; }
.pd32 { padding: 32px !important; }
.pd24 { padding: 24px !important; }
.pd2416 { padding: 24px 16px; }
.pd16 { padding: 16px; }
.pb0 { padding-bottom: 0 !important; }
.pt24 { padding-top: 24px; }

.pd1600,
.my-class-wrapper .correct-table tbody.tdpd16 td.pd1600 { padding: 16px 0 !important; }



/* padding 공통 */

/* bg 공통 */
.bg-lightgreen { background: #E5F8D6; font-size:var(--f-size14); line-height: 23px; letter-spacing: -0.01px; }
.bg-white { background: var(--n-white); border: 1px solid var(--s-color1); }
.bg-skyblue { background: #f5fdff; border: 1px solid #45BDF2; }
.bg-gray { background: #f8f8f8; display: flex; flex-direction: column; gap: 8px; }
.bg-reply { background: #F8F8F8; border-radius: 4px; padding: 16px; }
.bg-gray .text-gray { font-size:var(--f-body1); line-height: 20px; letter-spacing: -0.01px; color: #666666; display: flex; flex-direction: column; gap: 5px; }
.bg-gray .text-gray strong+strong { margin-top: 11px }
.bg-gray .text-gray strong.medium { font-weight: 500;; }
.delay-form { background: #F8F8F8; border: 1px solid #C9C9C9; border-radius: 12px; padding: 24px 16px; margin-top: 12px; }
.my-class-wrapper .delay-form .option-category.pd2416 { padding: 0 !important; }
/* bg 공통 */


/* border 공통 */
.bdr0 { border-right: 0 !important; }
.bdb0 { border-bottom: 0 !important; }
.bdt0 { border-top: 0 !important; }

/* border 공통 */

/* border-radius 공통 */
.br12 { border-radius: var(--b-radius3); }

/* border-radius 공통 */

/* 버튼공통 */

a.button.primary,
input.button.primary,
button.primary,
input[type=button].primary { background: #46BC2F; color: #fff; }

a.button.primary:hover,
input.button.primary:hover,
button.primary:hover,
input[type=button].primary:hover { background: #1B8F03; }

a.button.error,
input.button.error,
button.error,
input[type=button].error { background: #D53236; color: #fff; }

a.button.error:hover,
input.button.error:hover,
button.error:hover,
input[type=button].error:hover { background: #a71d1f; }


.board-btn { display: inline-flex; padding: 0 16px; font-size:var(--f-body1); letter-spacing: -0.01px; height: 44px; border: 1px solid var(--s-color1); border-radius: var(--b-radius0); align-items: center;  background-color: var(--n-white);}

a.my-btn-default,
button.my-btn-default { display: inline-flex; padding: 0 9px; min-width: 106px; height: 46px; background: #46BC2F; border-radius: var(--b-radius0); align-items: center; justify-content: center; font-size:var(--f-size14); letter-spacing: -0.01px; color: #FFFFFF!important; vertical-align: top; }
a.my-btn-default.my-btn-gray, button.my-btn-default.my-btn-gray { background: #9FA1A9 !important; color: #FFFFFF !important;}

a.my-btn-default.lg,
button.my-btn-default.lg { height: 50px; padding: 0 32px; font-size:var(--f-heading2); letter-spacing: -0.02px; }

a.my-btn-default.sm,
button.my-btn-default.sm { height: 39px; }


a.my-btn-default:hover,
button.my-btn-default:hover { background: #1B8F03; }

a.my-btn-default .ico-go-class,
button.my-btn-default .ico-go-class { display: block; width: 18px; height: 18px; background-image: url(https://static.edmclass.com/ielts/my_class/go_class.svg); background-size: 18px 18px; background-position: center center; background-repeat: no-repeat; margin-right: 2px; }

a.my-btn-default .ico-arrow,
button.my-btn-default .ico-arrow { display: block; width: 14px; height: 14px; background-image: url(https://static.edmclass.com/ielts/my_class/ico_arrow.svg); background-size: 14px 14px; background-position: center center; background-repeat: no-repeat; margin-left: 2px; }

a.my-btn-default2,
button.my-btn-default2 { display: inline-flex; padding: 0 9px; min-width: 106px; height: 46px; background: #ffffff; border: 1px solid #C5C5C5; border-radius: var(--b-radius0); align-items: center; justify-content: center; font-size:var(--f-size14); letter-spacing: -0.01px; color: #333333; vertical-align: top; }

a.my-btn-default2.md,
button.my-btn-default2.md { height: 44px; font-size:var(--f-body1); padding: 0 16px; }

a.my-btn-default2.sm,
button.my-btn-default2.sm { height: 39px; }

a.my-btn-default2.file,
button.my-btn-default2.file { padding: 0; width: 64px; height: 37px; /* UI Properties */
background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #999999; border-radius: 4px; font-size:var(--f-size14); min-width: 0; margin-right: 6px; }

a.my-btn-default2.mini,
button.my-btn-default2.mini { height: 31px; min-width: auto; font-size:var(--f-body2); letter-spacing: -0.01px; color: #333333; }

a.my-btn-default2.re,
button.my-btn-default2.re { height: 33px; background: #F6F6F6 0% 0% no-repeat padding-box; border: 1px solid #C5C5C5; border-radius: 4px; font-size:var(--f-body3); letter-spacing: -0.01px; color: #303030; margin-top: 8px; }

[class^="my-btn-default"].ico { min-width: auto; width: 40px; height: 40px; }

[class^="my-btn-default"].ico i { margin-right: 0; margin-left: 0; margin-top: 0; margin-bottom: 0; }

a.my-btn-default3,
button.my-btn-default3 { display: inline-flex; padding: 0 9px; min-width: 83px; height: 44px; background: #EFF1F6; border: 1px solid #EFF1F6; border-radius: 4px; align-items: center; justify-content: center; font-size:var(--f-body1); letter-spacing: -0.01px; color: #999999; vertical-align: top; }

a.my-btn-default3:hover,
button.my-btn-default3:hover { background: #ffffff; border: 1px solid #c5c5c5; color: #333333; }

a.my-btn-default5,
button.my-btn-default5 { padding: 0 16px; display: inline-flex; align-items: center; height: 36px; /* UI Properties */
background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #999999; border-radius: 4px; font-size:var(--f-size14); letter-spacing: -0.01px; color: #333333; }

.go-video { display: flex; align-items: center; justify-content: center; width: 88px; height: 35px; /* UI Properties */
background: #FFFFFF; border: 1px solid #999999; border-radius: 4px; font-size:var(--f-body2); letter-spacing: -0.01px; color: #666666; margin-top: 8px; }

a.my-btn-default4,
button.my-btn-default4 { display: inline-flex; padding: 0 16px; height: 37px; /* UI Properties */ background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #46BC2F; border-radius: var(--b-radius0); align-items: center; color: #46BC2F; font-size:var(--f-size14); letter-spacing: -0.01px; }

a.my-btn-default4, button.my-btn-default4 { font-size: var(--f-body2); letter-spacing: -1px;padding: 4px 8px;height: auto; }

.ico-file { display: inline-block; width: 24px; height: 24px; background-image: url(https://static.edmclass.com/ielts/my_class/ico_file.svg); background-size: 24px 24px; background-position: center center; background-repeat: no-repeat; }

.cdt-btn { width: 112px; height: 35px; /* UI Properties */
background: #FFFFFF; border: 1px solid #C5C5C5; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size:var(--f-body2); letter-spacing: -0.01px; color: #333333; }

.cdt-btn.overall { border: 1px solid #46BC2F; color: #46BC2F; }

.cdt-btn+.cdt-btn { margin-top: 4px; }

.cdt-btn:hover { border: 1px solid #666666; text-decoration: underline; }

.cdt-btn.overall:hover { border: 1px solid #46BC2F; color: #46BC2F; }

.disabled .cdt-btn,
.disabled .cdt-btn:hover,
.cdt-btn.disabled,
.cdt-btn.disabled :hover { cursor: default; background-color: #F6F6F6; color: #999999; text-decoration: none; border: 1px solid #C5C5C5; pointer-events: none; }

.cdt-btn.enabled, .cdt-btn.enabled:hover { background-color: #FFFFFF; color: #333333; border: 1px solid #C5C5C5; pointer-events: auto; cursor: pointer; }

/* 버튼공통 */

/* 탭공통 */
.my-tab>ul { display: inline-flex; align-items: center; background: #F8F8F8 0% 0% no-repeat padding-box; border: 1px solid #C5C5C5; border-radius: 8px; height: 50px; }

.my-tab>ul li { position: relative; z-index: 0; border-left: 1px solid #c5c5c5; margin-left: -1px; }


.my-tab>ul li.on + li,
.my-tab>ul li:first-child,
.my-tab>ul li.on { border-left: 0px; }

.my-tab>ul li a { display: flex; align-items: center; justify-content: center; width: auto; height: 50px; padding: 0 40px 0 39px; /* UI Properties */
background-color: transparent; font-size:var(--f-heading2); letter-spacing: -0.02px; color: #999999; border-radius: 8px; min-width: 146px; }

.my-tab>ul li.on + li a,
.my-tab>ul li:first-child a,
.my-tab>ul li.on a { padding: 0 40px; }

.my-tab>ul li.on a { color: #ffffff; background: #273039; }

.sub-tab>ul { display: flex; align-items: center; }

.sub-tab>ul li { position: relative; padding-right: 13px; margin-right: 12px; }

.sub-tab>ul li a { font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #999999; }

.sub-tab>ul li a:hover,
.sub-tab>ul li.on a { font-weight: bold; color: #000000; }

.sub-tab>ul li::after { content: ''; display: block; width: 1px; height: 12px; background-color: #C5C5C5; position: absolute; right: 0; top: 50%; margin-top: -6px; }


.sub-tab>ul li:last-child { padding-right: 0; margin-right: 0; }

.sub-tab>ul li:last-child::after { display: none; }

/* 탭공통 */
/* badge 공통 */
.badge.green { padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; height: 24px; /* UI Properties */ background: #E5F6DA 0% 0% no-repeat padding-box; border-radius: 4px; font-size:var(--f-body3); letter-spacing: -0.01px; color: #46BC2F; }

.badge.new {display: inline-block; background: #FFDBDB; border-radius: 4px; vertical-align: text-bottom; color: #FF5959; font-size: var(--f-body3); padding: 1.5px 6px; line-height: 16px; letter-spacing: -0.24px; border-radius: 100px; font-weight: 500; vertical-align: middle; margin-left: 8px;}
.badge.new::after{content: 'NEW';}

/* badge 공통 */
/* process bar 공통 */
.process .bar { display: block; height: 8px; background: #E9E9E9; border-radius: 8px; flex-grow: 1; overflow: hidden; }

.process .bar .bar-inner { display: block; height: 8px; background-color: #46BC2F; border-radius: 8px; }

.process .bar+p { margin-top: 5px; font-size:var(--f-body3); line-height: 17px; letter-spacing: -0.01px; color: var(--n-info2); }

.process .bar+p span { color: #000000; }

/* process bar 공통 */

/* icon 공통 */
.ico-pdf { display: inline-block; width: 27px; height: 14px; background-size: 24px 17px; background-position: center; background-repeat: no-repeat; background-image: url(https://static.edmclass.com/ielts/my_class/ico_pdf.svg); vertical-align: middle; }

.ico-download { display: inline-block; width: 24px; height: 24px; background-size: 24px 24px; background-position: center; background-repeat: no-repeat; background-image: url(https://static.edmclass.com/ielts/my_class/ico_down_d.svg); vertical-align: top; }

.ico-download:hover { background-image: url(https://static.edmclass.com/ielts/my_class/ico_down.svg); }

.dw-btn.loading i.ico-download { background-image: url(https://static.edmclass.com/ielts/my_class/ico_down_loading.svg); -webkit-animation: loading 2s infinite linear; animation: loading 2s infinite linear; }

.dw-btn.success i.ico-download { background-image: url(https://static.edmclass.com/ielts/my_class/ico_down_success.svg); }

@keyframes loading {
0% { transform: rotate(0deg); }

100% { transform: rotate(359deg); }
}

.ico-upload { display: inline-block; width: 24px; height: 24px; background-size: 24px 24px; background-position: center; background-repeat: no-repeat; background-image: url(https://static.edmclass.com/ielts/my_class/ico_upload.svg); vertical-align: top; }
.ico-file-delete { display: inline-block; width: 18px; height: 18px; background-size: 18px 18px; background-position: center; background-repeat: no-repeat; background-image: url(https://static.edmclass.com/ielts/my_class/ico_file_delete.svg); vertical-align: top; }
.ico-option-arrow { display: inline-block; width: 24px; height: 24px; background-size: 24px; background-position: center; background-repeat: no-repeat; background-image: url('https://static.edmclass.com/common/new_selectArrow.svg');  vertical-align: middle; transition: all .5s ease-in-out; }
.option-list-wrap.on .ico-option-arrow {background-image: url('https://static.edmclass.com/common/new_selectArrow-active.svg');}
[class^=ico-ctable] { display: inline-block; width: 50px; height: 50px; background-size: 28px 28px; background-position: center center; background-repeat: no-repeat; vertical-align: middle; background-color: #ffffff; border-radius: 100%; }
.ico-ctable-01 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_correct_table_01.svg); }
.ico-ctable-02 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_correct_table_02.svg); }
.ico-ctable-03 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_correct_table_03.svg); }
[class^=ico-correct-prc] { display: block; width: 28px; height: 28px; background-size: 28px 28px; background-position: center center; background-repeat: no-repeat; }
.ico-correct-prc1 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_correct_prc_01.svg); }
.ico-correct-prc2 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_correct_prc_02.svg); }
.ico-correct-prc3 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_correct_prc_03.svg); }
.ico-correct-prc4 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_correct_prc_04.svg); }
.off .ico-correct-prc1 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_correct_prc_01_off.svg); }
.off .ico-correct-prc2 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_correct_prc_02_off.svg); }
.off .ico-correct-prc3 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_correct_prc_03_off.svg); }
.off .ico-correct-prc4 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_correct_prc_04_off.svg); }
.on .ico-correct-prc1 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_correct_prc_01_on.svg); }
.on .ico-correct-prc2 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_correct_prc_02_on.svg); }
.on .ico-correct-prc3 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_correct_prc_03_on.svg); }
.on .ico-correct-prc4 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_correct_prc_04_on.svg); }
.ico-video { display: block; width: 20px; height: 20px; background-image: url(https://static.edmclass.com/ielts/my_class/ico_video.svg); background-size: 20px 20px; background-position: center center; background-repeat: no-repeat; }
.go-video .ico-video { margin-left: 4px; }
.ico-clipboard { display: inline-block; width: 28px; height: 28px; background-image: url(https://static.edmclass.com/ielts/my_class/ico_clipboard.svg); background-size: contain; background-position: center center; background-repeat: no-repeat; }


/* icon 공통 */


.text-right { text-align: right; color: var(--n-info2)}

.container { background-color: #F0F0F2; padding-bottom: 168px; padding-top: 40px; }

.path-wrapper { /* height: 70px; */ padding: 24px 0 60px; }
.path-wrapper .wrapper { display: flex; /* height: 70px; */ align-items: center; /* justify-content: space-between; */ }
.path-wrapper .page-title { font-weight: bold; font-size:var(--f-display3); letter-spacing: -0.02px; color: #888888; }
.path-wrapper .path { display: flex; align-items: center; color: #888888; margin-left: 16px; }
.path-wrapper .path dd { display: flex; align-items: center; font-size:var(--f-body1); line-height: 20px; letter-spacing: -0.28px; color: #747474; }
.path-wrapper .path dd::after { content: ''; display: block; width: 6px; height: 11px; background-image: url(https://static.edmclass.com/common/ico-path-arrow.svg); background-repeat: no-repeat; background-size: 6px 11px; background-position: center center; margin: 2px 7px 0; }
.path-wrapper .path dd:last-child::after { display: none; }
.path-wrapper { padding: 26px 0 24px; }
.path-wrapper .path { margin-left: 0; }
.path-wrapper .path dd { font-size:var(--f-size14); color: #999999; font-weight: bold; }
.path-wrapper .path dd:last-child { color: #333333; }

.my-class-wrapper .wrapper { display: flex; gap: 24px; }
.my-class-wrapper .wrapper .my-class-menu { width: 82px; }
.my-class-wrapper .wrapper .my-class-menu ul { border-radius: 12px; overflow: hidden; }
.my-class-wrapper .wrapper .my-class-menu ul li { background-color: #273039; }
.my-class-wrapper .wrapper .my-class-menu ul li a { display: flex; flex-direction: column; width: 100%; min-height: 92px; align-items: center; justify-content: center; padding: 12px 10px; }
.my-class-wrapper .wrapper .my-class-menu ul li a i { display: block; width: 44px; height: 44px; background-size: 44px 44px; background-position: center; background-repeat: no-repeat; margin-bottom: 1px; }
.my-class-wrapper .wrapper .my-class-menu ul li a span { font-size:var(--f-size14); line-height: 20px; letter-spacing: -0.01px; color: #737E8D; text-align: center; }
.my-class-wrapper .wrapper .my-class-menu ul li i.ico-myclass-01 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_01_d.svg); }
.my-class-wrapper .wrapper .my-class-menu ul li i.ico-myclass-02 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_02_d.svg); }
.my-class-wrapper .wrapper .my-class-menu ul li i.ico-myclass-03 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_04_d.svg); }
.my-class-wrapper .wrapper .my-class-menu ul li i.ico-myclass-04 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_03_d.svg); }
.my-class-wrapper .wrapper .my-class-menu ul li i.ico-myclass-05 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_05_d.svg); }
.my-class-wrapper .wrapper .my-class-menu ul li i.ico-myclass-06 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_06_d.svg); }
.my-class-wrapper .wrapper .my-class-menu ul li.on a span { color: #ffffff; }
.my-class-wrapper .wrapper .my-class-menu ul li.on a i.ico-myclass-01 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_01.svg); }
.my-class-wrapper .wrapper .my-class-menu ul li.on a i.ico-myclass-02 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_02.svg); }
.my-class-wrapper .wrapper .my-class-menu ul li.on a i.ico-myclass-03 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_04.svg); }
.my-class-wrapper .wrapper .my-class-menu ul li.on a i.ico-myclass-04 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_03.svg); }
.my-class-wrapper .wrapper .my-class-menu ul li.on a i.ico-myclass-05 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_05.svg); }
.my-class-wrapper .wrapper .my-class-menu ul li.on a i.ico-myclass-06 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_06.svg); }
.my-class-wrapper .wrapper .my-class-menu ul li.on { background-color: #46BC2F; }
.academy .my-class-wrapper .wrapper .my-class-menu ul li i.ico-myclass-03{background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_03_d.svg); }
.academy .my-class-wrapper .wrapper .my-class-menu ul li.on a i.ico-myclass-03 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_03.svg); }
/*************************************************************
	hover effect
*************************************************************/
@media (hover: hover) and (pointer: fine) {
	.my-class-wrapper .wrapper .my-class-menu ul li a:hover span{ color: #ffffff; transition: all 0.3s ease;}
	.my-class-wrapper .wrapper .my-class-menu ul li a:hover i{transition: all 0.3s ease;}
	.my-class-wrapper .wrapper .my-class-menu ul li a:hover i.ico-myclass-01{ background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_01.svg); }
	.my-class-wrapper .wrapper .my-class-menu ul li a:hover i.ico-myclass-02{ background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_02.svg); }
    .my-class-wrapper .wrapper .my-class-menu ul li a:hover i.ico-myclass-03{ background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_04.svg); }
	.my-class-wrapper .wrapper .my-class-menu ul li a:hover i.ico-myclass-04{ background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_03.svg); }
	.my-class-wrapper .wrapper .my-class-menu ul li a:hover i.ico-myclass-05{ background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_05.svg); }
	.my-class-wrapper .wrapper .my-class-menu ul li a:hover i.ico-myclass-06{ background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_06.svg); }
    .academy .my-class-wrapper .wrapper .my-class-menu ul li a:hover i.ico-myclass-03{ background-image: url(https://static.edmclass.com/ielts/my_class/ico_menu_03.svg); }
}


.my-class-wrapper .wrapper .my-class-contents { width: calc(100% - 106px); font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;}
.my-class-wrapper .wrapper .my-class-contents .row { margin: 0 -12px; }
.my-class-wrapper .wrapper .my-class-contents .row+.row { margin-top: 24px; }
.my-class-wrapper .wrapper .my-class-contents .row .column { padding: 0 12px; }
.my-class-wrapper .wrapper .my-class-contents .row .c50p { width: 50%; }
.my-class-wrapper .wrapper .my-class-contents .row .c80p { width: 80%; }
.my-class-wrapper .wrapper .my-class-contents .row .c100p { width: 100%; }
.my-class-wrapper .wrapper .my-class-contents .row .c212 { width: 212px; }
.my-class-wrapper .wrapper .my-class-contents .row .h215 { height: 215px; }
.my-class-wrapper .wrapper .my-class-contents .row .h215 div { height: 100% ;}
.my-class-wrapper .wrapper .my-class-contents .row h3 { font-weight: medium; font-size:var(--f-heading2); line-height: 26px; letter-spacing: -0.36px; color: #000000; }
.my-class-wrapper .wrapper .my-class-contents .row h2 { font-weight: 700; font-size:var(--f-display2); line-height: 38px; letter-spacing: -0.56px; padding-bottom: 32px; color: var(--n-mainTitle); }
.my-class-wrapper .wrapper .my-class-contents .card { display: block; background-color: #ffffff; border-radius: 12px; }
.my-class-wrapper .wrapper .my-class-contents .main-process,
.my-class-wrapper .wrapper .my-class-contents .main-process2,
.my-class-wrapper .wrapper .my-class-contents .pd32 { padding: 34px 32px; }
.my-class-wrapper .wrapper .my-class-contents .main-process2 { text-align: center; }
.my-class-wrapper .wrapper .my-class-contents .card h3 { font-weight: 500; font-size:var(--f-display3); letter-spacing: -0.02px; color: #333333; line-height: 35px; margin-bottom: 24px; }
.my-class-wrapper .wrapper .my-class-contents .card h4 { width: 100%; text-align: left; font-size:var(--f-heading1); line-height: 28px; letter-spacing: -0.02px; color: var(--n-subTitle); margin-bottom: 22px; font-weight: 700; }
.my-class-wrapper .wrapper .my-class-contents .main-process>p:nth-child(2) { font-size:var(--f-heading2); line-height: 25px; letter-spacing: -0.02px; color: #000000; }
.my-class-wrapper .wrapper .my-class-contents .main-process>p:nth-child(3) { margin-top: 9px; font-size:var(--f-body1); line-height: 19px; letter-spacing: -0.01px; color: #777777; min-width: 1px; height: 19px; }
.my-class-wrapper .wrapper .my-class-contents .main-process .class-rate { height: 62px; /* UI Properties */ background: transparent linear-gradient(270deg, #D8FCFA 0%, #DAFCC6 100%) 0% 0% no-repeat padding-box; border-radius: 32px; margin-top: 20px; display: flex; align-items: center; }
.my-class-wrapper .wrapper .my-class-contents .main-process .class-rate>p { line-height: 1; }
.my-class-wrapper .wrapper .my-class-contents .main-process .class-rate>p:first-child { margin-left: 24px; font-size:var(--f-body1); letter-spacing: -0.01px; color: #666666; }
.my-class-wrapper .wrapper .my-class-contents .main-process .class-rate>p:nth-child(2) { margin-left: 10px; font-size:var(--f-size14); font-weight: bold; letter-spacing: -0.01px; color: #000000; }
.my-class-wrapper .wrapper .my-class-contents .main-process .class-rate>p:nth-child(4) { font-weight: bold; font-size:var(--f-heading2); letter-spacing: -0.02px; color: #000000; }
.my-class-wrapper .wrapper .my-class-contents .main-process .class-rate .bar { display: block; height: 6px; background-color: #E9E9E9; margin: 0 16px; flex-grow: 1; }
.my-class-wrapper .wrapper .my-class-contents .main-process .class-rate .bar .bar-inner { display: block; height: 6px; background-color: #000000; }
.my-class-wrapper .wrapper .my-class-contents .main-process .class-rate>a { display: flex; align-items: center; justify-content: center; width: 106px; height: 46px; /* UI Properties */ background: #000000 0% 0% no-repeat padding-box; border-radius: 23px; font-size:var(--f-size14); letter-spacing: -0.01px; color: #ffffff; margin-left: 40px; margin-right: 8px; }
.my-class-wrapper .wrapper .my-class-contents .main-process .class-rate>a .ico-go-class { display: block; width: 18px; height: 18px; background-image: url(https://static.edmclass.com/ielts/my_class/go_class.svg); background-size: 18px 18px; background-position: center center; background-repeat: no-repeat; margin-right: 2px; }
.my-class-wrapper .wrapper .my-class-contents .main-process a.class-rate { width: 216px; align-items: center; justify-content: center; font-size:var(--f-3); letter-spacing: -0.02px; color: var(--n-subTitle); }
.my-class-wrapper .wrapper .my-class-contents .main-process2 .atdc-rate { margin: 0 auto; width: 105px; height: 62px; /* UI Properties */ background: #DAFAEB 0% 0% no-repeat padding-box; border-radius: 32px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size:var(--f-heading1); letter-spacing: -0.02px; color: #000000; }
.my-class-wrapper .wrapper .my-class-contents .main-process2 span { margin-top: 20px; font-size:var(--f-heading3); line-height: 21px; letter-spacing: -0.02px; color: #333333; display: block; text-align: center; }
.my-class-wrapper .wrapper .my-class-contents .main-process2 .detail_popup { display: inline-block; text-decoration: underline; font-size:var(--f-size14); line-height: 20px; letter-spacing: -0.01px; color: #000000; margin-top: 9px; }
.my-class-wrapper .wrapper .my-class-contents .main-process sup {font-size: 0.7em; line-height: 1;}
.my-class-wrapper .wrapper .my-class-contents .card.recent,
.my-class-wrapper .wrapper .my-class-contents .card.attendance{min-height: 251px;}
/* 출석 현황 */
.my-class-wrapper .wrapper .my-class-contents .card.attendance{position: relative;}
.my-class-wrapper .wrapper .my-class-contents .card.attendance .x-attendance{text-align: center; font-size: var(--f-body1); line-height: 22px; letter-spacing: -0.2px; position: absolute; top: calc(50% + 22px); left: 0; width: 100%; transform: translateY(-50%); color: var(--n-subTitle)}

/* 출석 현황 팝업 */
.my-class-wrapper .wrapper .my-class-contents .status-bottom{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; z-index: 99999; touch-action: none; pointer-events: none; overflow: hidden; visibility: hidden;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .slidingWrap{background-color: var(--n-white); padding-top: 56px; position: absolute; top: calc(50% + 100px); left: 50%; transform: translate(-50%,-50%); width: 600px; max-height: 800px; height: auto; transition: top 0.5s ease; border-radius: var(--b-radius1); overflow: hidden; box-shadow: var(--box-shadow3);}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .slidingWrap .closeIcon{position: absolute; background-size: contain; background-repeat: no-repeat; cursor: pointer; background-image: url('https://static.edmclass.com/common/popupCloseBtn.svg'); background-position: center; top: 16px; right: 16px; width: 24px; height: 24px;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .slidingWrap .scrollWidth{height: auto;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .slidingWrap .scrollWrap{max-height: 447px;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .slidingWrap #calendar *{transition: none;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .max-width{padding: 0 24px;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .title{padding-bottom: 16px; font-size: var(--f-heading2); line-height: 22px; letter-spacing: -0.32px; text-align: center;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .progressWrap{margin-top: 16px; background-color: var(--b-color5); text-align: center; padding: 12px 0; border-radius: var(--b-radius0); margin-bottom: 24px; justify-content: center;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .progressWrap .box{width: auto; margin: 0 24px;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .progressWrap .box p{margin-bottom: 4px;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .progressWrap .box b{font-size: var(--f-heading2);}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .progressWrap .box .primary{color: var(--p-color2);}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .progressWrap .box .waring{color: var(--waring-color);}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .calendarWrap .bottom-text{font-size: var(--f-body4); color: var(--n-info); line-height: 14px; letter-spacing: -0.22px; margin-top: 8px;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .notice{margin-top: 24px; background-color: var(--b-color5); border-radius: 12px; padding: 12px 8px; font-size: var(--f-body3); color: var(--n-info); }
.my-class-wrapper .wrapper .my-class-contents .status-bottom .notice p{line-height: 16px; letter-spacing: -0.24px;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .notice p + p{margin-top: 8px;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .scrollWidth{height: calc(100vh - 263px);}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .buttonWrap{justify-content: center; margin: 0 auto; width: 100%; background-color: var(--n-white); padding: 32px 0;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .buttonWrap .btn{text-align: center; width: 104px; height: 34px; line-height: 34px; font-size: var(--f-body2); border: 1px solid var(--p-color2); font-weight: 500; letter-spacing: -0.32px; border-radius: var(--b-radius0); color: var(--p-color2); background-color: var(--n-white); transition: none; margin: 0 4px;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .buttonWrap .btn.cancel{color: var(--n-info); background-color: inherit; border-color: var(--s-color1);}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .buttonWrap .btn:disabled,
.my-class-wrapper .wrapper .my-class-contents .status-bottom .buttonWrap .btn.disabled{background-color: var(--b-color4); color: var(--n-deactivate); border-color: var(--b-color4); touch-action: none; pointer-events: none;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom .buttonWrap .closeBtn{position: static; background-image: none;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom.active{touch-action: auto; pointer-events: visible; visibility: visible;}
.my-class-wrapper .wrapper .my-class-contents .status-bottom.active .slidingWrap{top: 50%; transform: translate(-50%,-50%);}
/*************************************************************
	hover effect
*************************************************************/
@media (hover: hover) and (pointer: fine) {
	.my-class-wrapper .wrapper .my-class-contents .status-bottom .buttonWrap .btn:hover{background-color: var(--p-color2); color: var(--n-white); transition: all 0.3s ease;}
	.my-class-wrapper .wrapper .my-class-contents .status-bottom .buttonWrap .btn.cancel:hover{background-color: var(--b-color4); border-color: var(--b-color4); color: var(--n-info);}
}

.my-class-wrapper .wrapper .card.pd16 { padding: 18px 16px; }
.my-class-wrapper .wrapper .card.pd2416 { padding: 24px 18px 16px; }

.my-class-wrapper .wrapper .my-class-contents .card h5 { width: 100%; text-align: left; font-weight: normal; font-size:var(--f-heading3); line-height: 22px; letter-spacing: -0.02px; color: var(--n-subTitle); }
.my-class-wrapper .wrapper .my-class-contents .card [class^=ico-crt] { display: block; width: 60px; height: 60px; border-radius: 30px; /* UI Properties */ background-color: #E5F6DA; background-position: center; background-size: 36px 36px; background-repeat: no-repeat; margin: 20px auto 12px; }
.my-class-wrapper .wrapper .my-class-contents .card .ico-crt-01 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_crt_01.svg); }
.my-class-wrapper .wrapper .my-class-contents .card .ico-crt-02 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_crt_02.svg); }
.my-class-wrapper .wrapper .my-class-contents .card .ico-crt-03 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_crt_03.svg); }
.my-class-wrapper .wrapper .my-class-contents .card .ico-crt-04 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_crt_04.svg); }
.my-class-wrapper .wrapper .my-class-contents .card .ico-crt-05 { background-image: url(https://static.edmclass.com/ielts/my_class/ico_crt_05.svg); }

.my-class-wrapper .wrapper .my-class-contents .crt p { font-size:var(--f-heading2); letter-spacing: -0.02px; color: #000000; width: 100%; height: 24px; line-height: 24px; display: flex; align-items: center; justify-content: center; }
.my-class-wrapper .wrapper .my-class-contents .crt p span { margin-left: 4px; font-size:var(--f-body1); letter-spacing: -0.01px; color: #666666; }
.my-class-wrapper .wrapper .my-class-contents .crt a { display: inline-block; text-decoration: underline; font-size:var(--f-size14); line-height: 20px; letter-spacing: -0.01px; color: #000000; margin-top: 16px; }

.my-class-wrapper .wrapper .my-class-contents .main-list-table { width: 100%; border-collapse: collapse; border: 0; padding: 0; margin: 0; outline: 0; border-spacing: 0; table-layout: fixed; }
.my-class-wrapper .wrapper .my-class-contents .main-list-table thead,
.my-class-wrapper .wrapper .my-class-contents .main-list-table tr,
.my-class-wrapper .wrapper .my-class-contents .main-list-table th,
.my-class-wrapper .wrapper .my-class-contents .main-list-table td { border: none; outline: 0; border-spacing: 0; }
.my-class-wrapper .wrapper .my-class-contents .main-list-table thead { height: 45px; /* UI Properties */ background: #F0F0F2 0% 0% no-repeat padding-box; }
.my-class-wrapper .wrapper .my-class-contents .main-list-table thead th { font-weight: normal; font-size:var(--f-body1); letter-spacing: -0.01px; color: #333333; padding: 0 8px; }
.my-class-wrapper .wrapper .my-class-contents .main-list-table thead th:first-child { padding-left: 0; border-radius: 4px 0 0 4px; }
.my-class-wrapper .wrapper .my-class-contents .main-list-table thead th:last-child { padding-right: 0; border-radius: 0 4px 4px 0; }
.my-class-wrapper .wrapper .my-class-contents .main-list-table tbody td { padding: 16px 8px; font-size:var(--f-heading3); letter-spacing: -0.02px; color: #333333; border-bottom: 1px solid #C5C5C5; }
.my-class-wrapper .wrapper .my-class-contents .main-list-table tbody tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.my-class-wrapper .wrapper .my-class-contents .main-list-table tbody tr.no-data td { padding: 35px 0 !important; border-bottom: 1px solid #C5C5C5 !important; }
.my-class-wrapper .wrapper .my-class-contents .main-list-table tbody td:first-child { padding-left: 0; }
.my-class-wrapper .wrapper .my-class-contents .main-list-table tbody td:last-child { padding-right: 0; }

.my-class-wrapper .wrapper .my-class-contents .main-list-table tbody td .pd { display: flex; align-items: center; }
.my-class-wrapper .wrapper .my-class-contents .main-list-table tbody td .pd img { border-radius: 6px; margin-right: 16px; }
.my-class-wrapper .wrapper .my-class-contents .main-list-table tbody td .pd span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size:var(--f-heading3); letter-spacing: -0.02px; color: #333333; line-height: 1; }
.my-class-wrapper .wrapper .my-class-contents .main-list-table tbody td.date { letter-spacing: -0.5px; color: var(--n-info); line-height: 1;    font-size: var(--f-body2); text-align: center; }
.my-class-wrapper .wrapper .my-class-contents .main-list-table tbody td.td-rate { font-weight: bold; font-size:var(--f-heading3); letter-spacing: -0.02px; color: #333333; }
.my-class-wrapper .wrapper .my-class-contents .main-list-table tbody td.option { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 270px; line-height: 1; }

.my-class-wrapper .wrapper .my-class-contents .welcome-package .card { text-align: center; height: 188px; min-height: 169px;}
.my-class-wrapper .wrapper .my-class-contents .welcome-package .card img { vertical-align: top; width: 92px; height: 92px; }
.my-class-wrapper .wrapper .my-class-contents .welcome-package .card p { margin-top: 8px; font-size:var(--f-size14); line-height: 21px; letter-spacing: -0.01px; color: #333333; }
.my-class-wrapper .wrapper .my-class-contents .welcome-package .card .ico-download { margin-top: 3px; }

.my-class-wrapper .wrapper .my-class-contents .my-class-sub { padding: 32px; }
.my-class-wrapper .wrapper .my-class-contents .my-class-sub .board-header { margin-bottom: 16px;    display: flex;align-items: flex-end;justify-content: space-between; }


/* ScrollBar 2 */

/* .my-class-wrapper .wrapper .my-class-contents .my-class-sub *::-webkit-scrollbar { width: 5px; }
.my-class-wrapper .wrapper .my-class-contents .my-class-sub *::-webkit-scrollbar-track { border-radius: 0; background-color: transparent; }
.my-class-wrapper .wrapper .my-class-contents .my-class-sub *::-webkit-scrollbar-thumb { background-color: #999999; background-clip: padding-box; border-top: 24px solid transparent; border-bottom: 24px solid transparent; border-right: 1px solid transparent; } */
.my-class-wrapper .wrapper .my-class-contents .my-class-sub h4 { margin-bottom: 24px; }
.my-class-wrapper .wrapper .my-class-contents .my-class-sub .my-lecture-list { border: 1px solid #C5C5C5; border-radius: 12px; margin-bottom: 1rem;}
.my-class-wrapper .wrapper .my-class-contents .my-class-sub .my-lecture-list li { padding: 25px 24px; border-bottom: 1px solid #C5C5C5; display: flex; align-items: center; height: 96px; }
.my-class-wrapper .wrapper .my-class-contents .my-class-sub .my-lecture-list li:last-child { border-bottom: 0; }
.my-class-wrapper .wrapper .my-class-contents .my-class-sub .my-lecture-list li strong { text-align: left; font-size:var(--f-size14); line-height: 20px; letter-spacing: -0.01px; color: #46BC2F; width: 138px; display: block; }
.my-class-wrapper .wrapper .my-class-contents .my-class-sub .my-lecture-list li .lecture-name { display: flex; flex-direction: column; }
.my-class-wrapper .wrapper .my-class-contents .my-class-sub .my-lecture-list li .lecture-name p { font-size:var(--f-heading2); line-height: 24px; letter-spacing: -0.02px; color: #333333; }
.my-class-wrapper .wrapper .my-class-contents .my-class-sub .my-lecture-list li .lecture-name span { font-size:var(--f-body1); line-height: 19px; letter-spacing: -0.01px; color: var(--n-info2); margin-bottom: 4px; }
.my-class-wrapper .wrapper .my-class-contents .my-class-sub .my-lecture-list li .lecture-name a { font-weight: 500; font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #000000; border-bottom: 1px solid transparent;  width: fit-content}
.my-class-wrapper .wrapper .my-class-contents .my-class-sub .my-lecture-list li .lecture-name a:hover { color: #46BC2F; border-bottom: 1px solid #46BC2F; }
.my-class-wrapper .wrapper .my-class-contents .my-class-sub .my-lecture-list li .process { width: 200px; margin-left: auto; margin-right: 36px; }

.my-class-wrapper .my-class-list>ul { display: flex; gap: 24px; flex-direction: column; }
.my-class-wrapper .my-class-list>ul>li { padding: 24px; border: 1px solid #C5C5C5; border-radius: 8px; display: flex; align-items: center; }
.my-class-wrapper .my-class-list>ul>li img { margin-right: 32px; border-radius: 8px; width: 238px; object-fit: cover;aspect-ratio: 2.3 / 1; /*  height: 149px; */}
.my-class-wrapper .my-class-list>ul>li>div { width: 90%; max-width: 540px; display: flex; flex-direction: column; }
.my-class-wrapper .my-class-list>ul>li>div * { vertical-align: top; }
.my-class-wrapper .my-class-list>ul>li .pd-name { font-size:var(--f-heading3); letter-spacing: -0.02px; color: #333333; vertical-align: middle;    display: flex;align-items: center; }
.my-class-wrapper .my-class-list>ul>li .pd-name .badge { margin-left: 4px; vertical-align: middle; }
.my-class-wrapper .my-class-list>ul>li .pd-name+a { display: inline-block; font-weight: 500; font-size:var(--f-heading2); line-height: 26px; letter-spacing: -0.02px; color: #000000; margin-top: 8px; margin-bottom: 9px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
.my-class-wrapper .my-class-list>ul>li .pd-detail { margin-bottom: 4px; font-size:var(--f-body1); line-height: 19px; letter-spacing: -0.01px; color: #999999; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-class-wrapper .my-class-list>ul>li .pd-detail:last-of-type { margin-bottom: 0; }
.my-class-wrapper .my-class-list>ul>li .process-wrap { padding: 8px; background: #F8F8F8; border-radius: 8px; display: flex; align-items: center; margin-top: 16px; }
.my-class-wrapper .my-class-list>ul>li .process-wrap .process { flex-grow: 1; }
.my-class-wrapper .my-class-list>ul>li .process-wrap a { margin-right: 0; margin-left: 14px; }
.my-class-wrapper .my-class-list>ul>li .mini-menu { border: 1px solid #C5C5C5; border-radius: 8px; width: 111px; margin-left: auto; }
.my-class-wrapper .my-class-list>ul>li .mini-menu li { border-bottom: 1px solid #C5C5C5; }
.my-class-wrapper .my-class-list>ul>li .mini-menu li:last-child { border-bottom: 0; }
.my-class-wrapper .my-class-list>ul>li .mini-menu li a { display: flex; height: 35px; align-items: center; justify-content: center; font-size:var(--f-body1); }

.my-class-wrapper .sub-text { font-size:var(--f-body1); line-height: 20px; letter-spacing: -0.01px; color: #666666; margin-top: 25px; }

.my-class-wrapper .wrapper .my-class-contents .card h5.option-title { font-size:var(--f-heading3); font-weight: 700; line-height: 27px; letter-spacing: -0.02px; color: #333333; padding-bottom: 8px; border-bottom: 2px solid #333333; }
.my-class-wrapper .wrapper .my-class-contents .card h5.option-title.bd1 { border-bottom: 1px solid var(--s-color1); }
.my-class-wrapper .wrapper .my-class-contents .card h5.option-title.bd0 { border-bottom: 0px; }
.my-class-wrapper .option-cont { padding: 12px 0 0; }
.my-class-wrapper .option-cont .noData{padding: 60px 0 85px !important; border-top: none !important;}
.my-class-wrapper .option-cont .option-info { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; }
.my-class-wrapper .option-cont .option-info strong { display: block; font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #333333; }
.my-class-wrapper .option-cont .option-info strong span { font-size:var(--f-body1); line-height: 20px; letter-spacing: -0.02px; vertical-align: bottom; font-weight: 400;color: var(--n-info2)}
.my-class-wrapper .option-cont .option-info a { font-size:var(--f-body1); line-height: 24px; letter-spacing: -0.01px; color: #333333; }
.my-class-wrapper .option-category { display: flex; align-items: center; gap: 24px; margin-bottom: 24px;;}
.my-class-wrapper .option-category dl { display: flex; align-items: center; }
.my-class-wrapper .option-category dl dt { font-size:var(--f-size14); font-weight: bold; letter-spacing: -0.05px; color: #333333; margin-right: 16px; white-space: nowrap; }
.my-class-wrapper .option-category dl dt::before { content: '· '; display: inline; }
.my-class-wrapper .option-category dl dd { font-size:var(--f-heading3); letter-spacing: -0.02px; color: #333333; }
#course-wrap { width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-class-wrapper .option-category.pd2416 { flex-wrap: wrap; column-gap: 24px; row-gap: 16px; }
.my-class-wrapper .option-category.pd2416 dl { width: calc(50% - 12px); }
.my-class-wrapper .option-category.pd2416 dl.w100p { width: 100%; }
.my-class-wrapper .option-category.pd2416 dl dt { margin-right: 1rem; }
.my-class-wrapper .option-category.pd2416 dl dd { flex-grow: 1; max-width: calc(100% - 180px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:var(--f-size14); letter-spacing: -0.01px; color: #333333; display: flex; gap: 16px; align-items: center; }
.my-class-wrapper .option-category.pd2416 dl dd strong { color: #D53236; text-decoration: underline; }
.my-class-wrapper .option-category select:required:invalid { color: #999999; }
.my-class-wrapper .option-category select option[value=""][disabled] { display: none }

.my-class-wrapper .option-cont .option-wrap+.option-wrap { margin-top: 16px; }
.my-class-wrapper .option-cont .option-list-wrap { border: 1px solid var(--s-color1); transition: all 0s ease-in-out; border-radius: 12px; overflow: hidden; margin-bottom: 1rem; }
.my-class-wrapper .option-cont .option-list-wrap:last-of-type { margin-bottom: 0px;;}
.my-class-wrapper .option-cont .option-list-wrap.on { box-shadow: var(--box-shadow1); border-color: var(--n-info); }
.my-class-wrapper .option-cont .option-list-wrap.on:first-child { margin-top:0!important; }
.my-class-wrapper .option-cont .option-list-wrap+.option-list-wrap { margin-top: -1px; }
.my-class-wrapper .option-cont .option-list-title { display: flex; align-items: center; justify-content: space-between; height: 56px; border-radius: var(--b-radius1); padding: 0 12px 0 16px; font-size: var(--f-heading3); cursor: pointer;  line-height: 22px; letter-spacing: -0.32px; color: var(--n-info);}
.my-class-wrapper .option-cont .option-list-wrap .option-list-title i { transition: all 0.3s ease;}
.my-class-wrapper .option-cont .option-list { overflow: hidden; }
.my-class-wrapper .option-cont .option-list-title+.option-list { transition: all 0s ease-in-out; max-height: 0; box-sizing: border-box; visibility: hidden; }
.my-class-wrapper .option-cont .option-list-title.on+.option-list { max-height: 100vh; visibility: visible; overflow-y: scroll;}
.my-class-wrapper .option-cont .option-list>li { display: flex; align-items: center; height: 60px; background-color: #F3FFEC; padding-left: 24px; padding-right: 24px; /* border-top: 1px solid #C5C5C5; */ }
.my-class-wrapper .option-cont .option-list>li:first-child { border-top: 0; }
.my-class-wrapper .option-cont .option-list>li .rate { flex: 0 0 54px; text-align: center; background: #FFFFFF; border: 1px solid #C5C5C5; border-radius: 16px; font-size:var(--f-body2); letter-spacing: -0.01px; color: #333333; margin-right: 16px; }
.my-class-wrapper .option-cont .option-list>li p { width: 560px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:var(--f-heading3); letter-spacing: -0.32px; color: #333333; margin-right: 43px; }
.my-class-wrapper .option-cont .option-list>li ul { width: 220px; display: flex; margin-right: 5px; }
.my-class-wrapper .option-cont .option-list>li ul li { flex: 50%; font-size:var(--f-body1); letter-spacing: -0.28px; color: #666666; padding-right: 13px; margin-right: 12px; position: relative; }
/*.my-class-wrapper .option-cont .option-list>li ul li::after { position: absolute; content: ''; display: block; width: 1px; height: 12px; background-color: #C5C5C5; top: 50%; margin-top: -6px; right: 0; }*/
.my-class-wrapper .option-cont .option-list>li ul li:last-child { padding-right: 0; margin-right: 0; }
.my-class-wrapper .option-cont .option-list>li ul li:last-child::after { display: none; }
.my-class-wrapper .option-cont .option-list>li .time { font-size:var(--f-body2); letter-spacing: -0.26px; color: #666666; margin-left: auto; }
.my-class-wrapper .option-cont .option-list>li .btn { display: flex; gap: 8px; margin-left: 12px; min-width: 90px; }

.my-correct-table { width: 100%; border-collapse: collapse; }
.my-correct-table thead th { font-size:var(--f-heading2); letter-spacing: -0.02px; color: #000000; vertical-align: middle; border-bottom: 1px dashed #666666; border-right: 1px dashed #666666; padding-bottom: 16px; }
.my-correct-table thead th i { margin-right: 8px; }
.my-correct-table thead th.text-left { font-weight: 500; }
.my-correct-table tbody td { font-size:var(--f-size14); letter-spacing: -0.01px; color: #333333; border-right: 1px dashed #666666; padding: 12px 10px; }
.my-correct-table tbody td:first-child { padding: 0; }

/******************************************************
	첨삭 학습 > 첨삭신청 > 상단 테이블 
******************************************************/
.my-class-contents.feedback-page .serviceGuide{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;}
.my-class-contents.feedback-page .serviceGuide table{width: 100%; border-top: 1px solid var(--s-color1); text-align: center; color: var(--n-mainTitle);}
.my-class-contents.feedback-page .serviceGuide table tr{border-bottom: 1px solid var(--s-color1);}
.my-class-contents.feedback-page .serviceGuide table th{font-weight: 700; color: var(--n-info);}
.my-class-contents.feedback-page .serviceGuide table td{padding: 12px; font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px;}
.my-class-contents.feedback-page .serviceGuide table thead{height: 48px; background-color: var(--b-color5); }
.my-class-contents.feedback-page .serviceGuide table thead p{display: flex; align-items: center; justify-content: center;}
.my-class-contents.feedback-page .serviceGuide table thead i{background-size: contain; background-repeat: no-repeat; background-position: center; width: 24px; height: 24px; display: inline-block; margin-right: 4px;}
.my-class-contents.feedback-page .serviceGuide .bottomTxt{background-color: var(--b-color5); padding: 16px; border-radius: var(--b-radius3); margin-top: 8px; color: var(--n-info); line-height: 24px;}
.my-class-contents.feedback-page .serviceGuide .bottomTxt p{position: relative; padding-left: 12px;}
.my-class-contents.feedback-page .serviceGuide .bottomTxt p::before{content: ''; width: 3px; height: 3px; border-radius: 50%; background-color: var(--n-info); position: absolute; left: 5px; top: 10px;}
/* 임시저장한 내용 불러오기 */
.my-class-contents.feedback-page .list-info { margin: 24px 0 16px; text-align: right; font-size:var(--f-body1); letter-spacing: -0.01px; color: #333333; }
.my-class-contents.feedback-page .list-info a{display: inline-block; border: 1px solid #666666; padding: 0 16px; height: 44px; border-radius: var(--b-radius0); color: #333333; background-color: var(--n-white); line-height: 2.9;}
.my-class-contents.feedback-page .list-info.border-top { margin: 16px 0; border-top: 1px solid #c5c5c5; padding: 9px 0;}
/* 상품 선택 영역 */
.my-class-contents.feedback-page .product-select-area{border: 1px solid var(--s-color1); border-radius: var(--b-radius1);}
/* select design */
.my-class-contents.feedback-page select{height: 40px; border-radius: var(--b-radius0); background-image: url('https://static.edmclass.com/common/board/review-fakeSelect.svg'); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;}



.my-class-wrapper .option-category.between { gap: 24px; justify-content: space-between; }
.my-class-wrapper .option-category.between dl dd select { width: 250px; }
.my-class-wrapper .option-category.between dl[disabled] dt { color: #999999; }
.my-class-wrapper .option-category.between dl dd select[disabled] { background-color: var(--b-color5); color: var(--n-deactivate); background-image: url('https://static.edmclass.com/common/board/review-fakeSelect-disabled.svg');}
.my-class-wrapper .correct-process { border: 1px solid #C5C5C5; border-radius: 12px; overflow: hidden; }
.my-class-wrapper .correct-process .correct-process-header { border-bottom: 1px solid #C5C5C5; box-shadow: 0px 4px 4px #00000017; position: relative; z-index: 1; }
.my-class-wrapper .correct-process .correct-process-header ul { display: flex; }
.my-class-wrapper .correct-process .correct-process-header ul li { display: flex; align-items: center; font-weight: bold; font-size:var(--f-heading2); letter-spacing: -0.02px; color: #333333; padding: 0 16px; height: 60px; background-image: url(https://static.edmclass.com/ielts/my_class/bg_correct_prc.svg); background-repeat: no-repeat; background-position: right 0 center; background-size: 20px 60px; flex: 1 1 0; padding-right: 0; }
.my-class-wrapper .correct-process .correct-process-header ul li:last-child { background-image: none; }
.my-class-wrapper .correct-process .correct-process-header ul li.on { color: #46BC2F; }
.my-class-wrapper .correct-process .correct-process-header ul li.off { color: #999999; }
.my-class-wrapper .correct-process .correct-process-header ul li.activated:hover { cursor: pointer; color: #000; opacity: 0.5; transition: .3s all; }
.my-class-wrapper .correct-process .correct-process-header ul li.activated { transition: .3s all; color: #999; }
.my-class-wrapper .correct-process .correct-process-header ul li i { margin-right: 4px; }
.my-class-wrapper .correct-process .correct-process-body { padding: 16px; background-color: #F8F8F8; /* max-height: 790px; */ overflow-y: auto; display: none; }
.my-class-wrapper .correct-process .correct-process-body.active { display: block;}
.my-class-wrapper .correct-process .correct-process-body .select-crt-prc li+li { margin-top: 4px; }
.my-class-wrapper .correct-process .correct-process-body .select-crt-prc input { display: none; }
.my-class-wrapper .correct-process .correct-process-body .select-crt-prc label { padding: 20px 24px; display: block; background-color: #ffffff; border: 1px solid #ffffff; border-radius: 4px; cursor: pointer; }
.my-class-wrapper .correct-process .correct-process-body .select-crt-prc input:checked+label { background: #F3FFEC; border: 1px solid #46BC2F; }
.my-class-wrapper .correct-process .correct-process-body .select-crt-prc label dl { display: flex; }
.my-class-wrapper .correct-process .correct-process-body .select-crt-prc label dl dt { width: 106px; font-size:var(--f-heading3); letter-spacing: -0.01px; color: #666666; line-height: 24px; }
.my-class-wrapper .correct-process .correct-process-body .select-crt-prc label dl dd { width: calc(100% - 106px); font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #333333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-class-wrapper .correct-process .correct-process-body .topic-title { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border: 1px solid #c5c5c5; background-color: #ffffff; border-radius: 4px; height: 58px; cursor: pointer; }
.my-class-wrapper .correct-process .correct-process-body .topic-title strong { font-weight: normal; font-size:var(--f-heading2); letter-spacing: -0.02px; color: #333333; }
.my-class-wrapper .correct-process .correct-process-body .topic-title i.ico-option-arrow { background-image: url('https://static.edmclass.com/common/new_selectArrow.svg'); transition: all .5s ease-in-out; }
.my-class-wrapper .correct-process .correct-process-body .topic-title.on i.ico-option-arrow { transform: rotate(180deg); }
.my-class-wrapper .correct-process .correct-process-body .select-crt-prc.topic { margin-top: 0; max-height: 0; transition: all .5s ease-in-out; overflow-y: scroll; }
.my-class-wrapper .correct-process .correct-process-body .topic-title.on+.select-crt-prc.topic { max-height: 100vh; margin-top: 8px; }
.my-class-wrapper .correct-process .correct-process-body .select-crt-prc.topic label { padding: 20px 24px; display: block; background-color: #ffffff; border: 1px solid #c5c5c5; border-radius: 0; cursor: pointer; }
.my-class-wrapper .correct-process .correct-process-body .select-crt-prc.topic li { position: relative; z-index: 0; }
.my-class-wrapper .correct-process .correct-process-body .select-crt-prc.topic li:has(input:checked) { z-index: 1; }
.my-class-wrapper .correct-process .correct-process-body .select-crt-prc.topic li+li { margin-top: -1px; }
.my-class-wrapper .correct-process .correct-process-body .select-crt-prc.topic label dl dd { width: calc(100% - 106px); font-size:var(--f-heading2); line-height: 26px; letter-spacing: -0.02px; color: #333333; white-space: wrap; overflow: visible; }
.my-class-wrapper .correct-process .correct-process-body .topic-contents { margin-top: 16px; border: 1px solid #C5C5C5; background-color: #ffffff; padding: 24px 24px 32px; display: none; }
.my-class-wrapper .correct-process .correct-process-body .topic-contents.active { display: block; }
.my-class-wrapper .correct-process .correct-process-body .topic-contents dl { display: flex; }
.my-class-wrapper .correct-process .correct-process-body .topic-contents dl+dl { margin-top: 8px; }
.my-class-wrapper .correct-process .correct-process-body .topic-contents dl dt { width: 106px; font-size:var(--f-size14); letter-spacing: -0.01px; color: #666666; line-height: 26px; }
.my-class-wrapper .correct-process .correct-process-body .topic-contents dl dd { width: calc(100% - 106px); font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #333333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-class-wrapper .correct-process .correct-process-body .topic-contents dl.topic dd { width: calc(100% - 106px); font-size:var(--f-heading2); line-height: 26px; letter-spacing: -0.02px; color: #333333; white-space: wrap; overflow: visible; text-overflow: none; }
.my-class-wrapper .correct-process .correct-process-body .topic-contents img { margin: 24px auto 0; max-width: 670px; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents { border: 1px solid #C5C5C5; background-color: #ffffff; padding: 32px 24px; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents img { max-width: 670px; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents+.essay-contents { margin-top: -1px; }
.my-class-wrapper .correct-process .correct-process-body h5 { font-weight: 500; font-size:var(--f-size14); line-height: 21px; letter-spacing: -0.01px; color: #666666; }
.my-class-wrapper .correct-process .correct-process-body .essay-noti { font-size:var(--f-body1); line-height: 20px; letter-spacing: -0.01px; color: #666666; margin-top: 8px; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents.cont2 { padding: 0 24px; height: 66px; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents.cont2 dl { height: 66px; align-items: center; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents dl { display: flex; padding-bottom: 16px;}
.my-class-wrapper .correct-process .correct-process-body .essay-contents dl dt { width: 106px; font-size:var(--f-heading3); letter-spacing: -0.01px; color: #666666; line-height: 24px; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents dl dd { width: calc(100% - 106px); font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #333333; /*white-space: nowrap;*/ overflow: hidden; text-overflow: ellipsis; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents dl.topic dd { width: calc(100% - 106px); font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #333333; white-space: wrap; overflow: visible; text-overflow: none; }

.my-class-wrapper .correct-process .correct-process-body .essay-contents .textWrap{border: 1px solid #C5C5C5; border-radius: 12px; padding: 16px 8px 16px 16px; margin-top: 24px;}
.my-class-wrapper .correct-process .correct-process-body .essay-contents textarea { width: 100%; height: 472px; font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #333333; display: block; border-radius: 0; padding: 0 3px 0 0; border: none;}
.my-class-wrapper .correct-process .correct-process-body .essay-contents textarea::-webkit-scrollbar{display: block; width: 5px;}
.my-class-wrapper .correct-process .correct-process-body .essay-contents textarea::-webkit-scrollbar-track{background: transparent;}
.my-class-wrapper .correct-process .correct-process-body .essay-contents textarea::-webkit-scrollbar-thumb{background: var(--b-color2); border-radius: 8px;}

.my-class-wrapper .validation-wrap p { font-size:var(--f-body3); line-height: 17px; letter-spacing: -0.19px; color: #D53236; margin-top: 6px; }

.my-class-wrapper .agree-wrap { margin-top: 14px; display: flex; align-items: center;}
.my-class-wrapper .agree-wrap label { font-size:var(--f-body1); line-height: 20px; letter-spacing: -0.01px; color: #666666; vertical-align: middle; }

.my-class-wrapper .correct-process .correct-process-body .validation-wrap { display: none; }
.my-class-wrapper .correct-process .correct-process-body .validation-wrap p { font-size: 15px; letter-spacing: normal; margin: 0; }
.my-class-wrapper .correct-process .correct-process-body .validation-wrap.error-teacher p { padding: 1rem; font-size: 15px; margin-left: 40px; }
.my-class-wrapper .correct-process .correct-process-body .validation-wrap.error-audio-file1 p, .my-class-wrapper .correct-process .correct-process-body .validation-wrap.error-audio-file2 p { padding: 0; font-size: 12px; text-align: center; }
.my-class-wrapper .correct-process .correct-process-body .validation-wrap.error-agree p { padding: 6px 1rem; margin-left: 8px; }

.my-class-wrapper .correct-process .correct-process-body .essay-contents h4 { font-weight: bold; font-size:var(--f-heading2); line-height: 26px; letter-spacing: -0.02px; color: #333333; margin-bottom: 16px; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .select-teacher { display: flex; align-items: center; gap: 30px; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .tcSwiper-wrap { width: 100%; position: relative; padding: 0 56px;}
.my-class-wrapper .correct-process .correct-process-body .essay-contents .tcSwiper { width: 100%; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents [class^=swiper-button] { display: block; width: 40px; height: 40px; border: 1px solid #D2D2D2; border-radius: 100%; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents [class^=swiper-button]::after { content: ''; display: block; width: 12px; height: 18px; background-image: url(https://static.edmclass.com/ielts/my_class/ico_swiper_arrow.svg); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-left: -2px; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .swiper-button-prev { left: 0; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .swiper-button-next { right: 0; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .swiper-button-next::after { transform: translate(-50%, -50%) rotate(180deg); margin-left: 2px; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .tcSwiper input { display: none; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .tcSwiper label { display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; padding: 16px 0; background: #F8F8F8 0% 0% no-repeat padding-box; border: 1px solid #F8F8F8; border-radius: 12px; position: relative; overflow: hidden; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .tcSwiper input:checked+label { border: 1px solid #46BC2F; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .tcSwiper label::after { display: flex; content: '선택'; width: 38px; height: 24px; /* UI Properties */ background: #46BC2F 0% 0% no-repeat padding-box; border-radius: 0px 0px 0px 11px; font-size:var(--f-body2); letter-spacing: -0.01px; color: #FFFFFF; position: absolute; top: 0; right: 0; align-items: center; justify-content: center; opacity: 0; transition: all .2 ease-in-out; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .tcSwiper input:checked+label::after { opacity: 1; }
/* .my-class-wrapper .correct-process .correct-process-body .essay-contents .tcSwiper label img { width: 74px; height: 74px; border-radius: 100%; } */
.my-class-wrapper .correct-process .correct-process-body .essay-contents .tcSwiper label img { max-width: 74px; height: 74px; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .tcSwiper label .tc-name { margin-top: 12px; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .tcSwiper label .tc-name { font-size:var(--f-body1); line-height: 20px; letter-spacing: -0.01px; color: #333333; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .tcSwiper label .tc-name strong { font-size:var(--f-size14); line-height: 20px; letter-spacing: -0.01px; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .select-teacher .selected-teacher { border: 1px solid #C5C5C5; border-radius: 12px; overflow: hidden; width: 160px; position: relative; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .select-teacher .selected-teacher::after { content: url(https://static.edmclass.com/ielts/my_class/ico_check_tc.svg); position: absolute; top: 8px; right: 8px; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .select-teacher .selected-teacher .teacher-profile { padding: 16px 0; text-align: center; background: transparent linear-gradient(180deg, #D9FCCF 0%, #D8FCF3 100%) 0% 0% no-repeat padding-box; border-bottom: 1px solid #c5c5c5; border-radius: 12px 12px 0 0; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .select-teacher .selected-teacher .teacher-name { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 74px; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .select-teacher .selected-teacher .teacher-name p { font-size:var(--f-body1); line-height: 20px; letter-spacing: -0.01px; color: #46BC2F; }
.my-class-wrapper .correct-process .correct-process-body .essay-contents .select-teacher .selected-teacher .teacher-name strong { font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #333333; }

.my-class-wrapper .correct-table { border-collapse: collapse; width: 100%; border-top: 1px solid var(--s-color1);}
.my-class-wrapper .correct-table thead{border-bottom: 1px solid var(--s-color1);}
.my-class-wrapper .correct-table thead th { height: 48px; background-color: var(--b-color4); color: var(--n-info); font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; font-weight: 700;}
.my-class-wrapper .correct-table tbody td { border-bottom: 1px solid #C5C5C5; height: 57px; text-align: center; font-size:var(--f-size14); letter-spacing: -0.01px; color: #333333; }
.my-class-wrapper .correct-table tbody td p.board-pd-name { width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-class-wrapper .correct-table tbody td.text-center p.board-pd-name { margin: 0px auto;}
.my-class-wrapper .correct-table tbody td a.board-pd-sbj { display: inline-block; max-width: 350px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.my-class-wrapper .correct-table tbody.tdpd16 td { padding: 16px !important; }
.my-class-wrapper .correct-table tbody.tdpd16 tr.td-reply td { border-top: hidden; padding-top: 0 !important; padding-left: 48px !important; background-image: url(https://static.edmclass.com/ielts/my_class/ico_reply.svg); background-size: 24px 24px; background-position: 16px 14px; background-repeat: no-repeat; }
.my-class-wrapper .correct-table tbody.tdpd16 td.text-left p { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-class-wrapper .correct-table tbody.tdpd16 td.no-data { padding: 40px 16px !important; text-align: center; }
.my-class-wrapper .correct-table tbody td:first-child { padding: 0 24px; text-align: left; }
.my-class-wrapper .correct-table tbody td dl { display: flex; }
.my-class-wrapper .correct-table tbody td dl dt { width: 106px; font-size:var(--f-size14); letter-spacing: -0.01px; color: #666666; line-height: 26px; }
.my-class-wrapper .correct-table tbody td dl dd { width: calc(100% - 106px); font-size:var(--f-body1); line-height: 24px; letter-spacing: -0.02px; color: #333333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-class-wrapper .correct-table tbody td dl.topic dd { white-space: wrap; overflow: visible; text-overflow: none; }
.my-class-wrapper .correct-table tbody td dl+dl { margin-top: 8px; }
.my-class-wrapper .correct-table tbody td img { border-radius: var(--b-radius0); }
.my-class-wrapper .correct-table tbody td ul { display: inline-flex; margin-left: 12px; }
.my-class-wrapper .correct-table tbody td ul li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:var(--f-size14); letter-spacing: -0.01px; color: #333333; width: 240px }
.my-class-wrapper .correct-table tbody td span.text { margin-left: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:var(--f-size14); letter-spacing: -0.01px; color: #333333; width: 240px; }
.my-class-wrapper .correct-table tbody td ul li:first-child { width: 148px; width: unset; padding-right: 12px; margin-right: 12px; position: relative; }
.my-class-wrapper .correct-table tbody td ul li:first-child::after { content: ''; display: block; width: 1px; height: 14px; /* UI Properties */ background: #C5C5C5 0% 0% no-repeat padding-box; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

/* 구매상품 영역 */
.my-class-wrapper .correct-table.cdt tbody td{height: auto;}
.my-class-wrapper .correct-table.cdt tbody td.purchase .wrap{align-items: center; display: flex;}
.my-class-wrapper .correct-table.cdt tbody td.purchase ul{width: calc(100% - 96px); margin: 0; padding-left: 12px;}

.my-class-wrapper .chart-img-detail { display: flex; gap: 8px; }
.my-class-wrapper .chart-img-detail .chart-img { width: 382px; height: 382px; display: flex; background: #F5FDFF; border: 1px solid #45BDF2; border-radius: 12px; align-items: center; justify-content: center; font-weight: bold; font-size:var(--f-heading3); letter-spacing: -0.48px; color: #333333; }
.my-class-wrapper .chart-img-detail .chart-img img { object-fit: contain; width: 100%; height: auto; border-radius: 12px; }
.my-class-wrapper .chart-img-detail .chart-img.task { display: block; font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #333333; overflow-y: auto; padding: 24px; font-weight: 400; }
.my-class-wrapper .chart-img-detail .chart-detail { flex-grow: 1;height: 382px; border: 1px solid #C5C5C5; border-radius: 12px; padding: 16px; font-size:var(--f-body1); letter-spacing: -0.02px; color: #333333; overflow-y: auto; line-height: 24px; }

.my-class-wrapper .chart-img-detail .chart-img + .chart-detail {  max-width: calc(100% - 390px); }

.my-class-wrapper .my-class-sub h4.correct-title { font-size:var(--f-heading1) !important; letter-spacing: -0.03px !important; color: var(--n-subTitle) !important; line-height: 36px !important; margin-top: 60px; font-weight: 700 !important; display: flex; align-items: center;    margin-bottom: 12px;padding-bottom: 8px;border-bottom: 2px solid var(--n-subTitle); color: var(--n-subTitle)}
.my-class-wrapper .my-class-sub h5.correct-sub-title { font-weight: 500 !important; font-size:var(--f-heading3) !important; letter-spacing: -0.02px !important; color: var(--n-subTitle); margin-top: 24px;}
/* .my-class-wrapper .my-class-sub h5.correct-sub-title span { font-weight: bold !important; } */
.my-class-wrapper .my-class-sub .score-ul { display: flex; margin-top: 12px; justify-content: space-between; }
.my-class-wrapper .my-class-sub .score-ul li { display: flex; flex-direction: column; width: 192px; border: 1px solid #c5c5c5; border-radius: 12px; overflow: hidden; box-shadow: 0px 3px 6px #0000001A; }
.my-class-wrapper .my-class-sub .score-ul li div { display: flex; align-items: center; justify-content: center; text-align: center; height: 85px; font-weight: 600; font-size:var(--f-heading1); letter-spacing: -0.03px; color: var(--n-subTitle); }
.my-class-wrapper .my-class-sub .score-ul li .bg-gradient { background: transparent linear-gradient(118deg, #F3FFEC 0%, #D9F6E9 100%) 0% 0%; height: 94px; font-weight: 700; font-size:var(--f-heading3); line-height: 20px; letter-spacing: -0.02px;  }

.my-class-wrapper .my-class-sub .file-list {display: flex; flex-wrap: wrap; row-gap: 6px; align-items: flex-start;}
.my-class-wrapper .my-class-sub .list-info+.file-list { margin-top: 16px; }
.my-class-wrapper .my-class-sub .file-list+.file-list { margin-top: 16px; }
.my-class-wrapper .my-class-sub h5 + .file-list { margin-top: 12px;}
.my-class-wrapper .my-class-sub .file-list span.name { display: flex; align-items: center; font-size:var(--f-size14); letter-spacing: -0.01px; color: #333333; gap: 8px; width: 150px; margin-right: 20px; }
.my-class-wrapper .my-class-sub .file-list ul { flex-grow: 1; }
.my-class-wrapper .my-class-sub .file-list ul li { display: flex; align-items: center; justify-content: space-between; }
.my-class-wrapper .my-class-sub .file-list ul li a:first-child, .my-class-wrapper .my-class-sub .file-list ul li a:first-child:link, .my-class-wrapper .my-class-sub .file-list ul li a:first-child:visited { text-decoration: underline; font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #4C4BAE; }
.my-class-wrapper .my-class-sub .file-list ul li a:first-child:hover { text-decoration: none; color: #323176; }
.my-class-wrapper .my-class-sub .file-list ul li a:nth-child(2) { font-size:var(--f-size14); line-height: 24px; letter-spacing: -0.01px; color: #666666; display: inline-flex; }
.my-class-wrapper .my-class-sub .file-list ul li a:nth-child(2) i { margin-left: 4px; }
.my-class-wrapper .my-class-sub .file-list span.date { margin-left: 12px; font-size:var(--f-body2); letter-spacing: -0.01px; color: #777777; }

.my-class-wrapper .my-class-sub h6 { font-size:var(--f-heading3); line-height: 24px; color: var(--n-subTitle); margin-top: 24px; }
.my-class-wrapper .my-class-sub .cmt-wrap { margin-top: 12px; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-write { display: flex; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-write textarea { flex-grow: 1; height: 66px; /* UI Properties */ background: #FFFFFF; border: 1px solid #C5C5C5; font-size:var(--f-size14); letter-spacing: -0.3px; padding: 16px; border-radius: 0; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-write button { width: 66px; height: 66px; /* UI Properties */ background: #999999 0% 0% no-repeat padding-box; font-size:var(--f-heading3); letter-spacing: -0.02px; color: #FFFFFF; border: 0; outline: 0; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-view { margin-top: 22px; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-view .cmt-view-wrap { padding: 16px; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-view .cmt-info { display: flex; align-items: center; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-view .cmt-info .ico-profile { display: block; width: 40px; height: 40px; border-radius: 100%; margin-right: 12px; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-view .cmt-info strong { font-size:var(--f-heading3); letter-spacing: -0.32px; color: #222222; margin-right: 16px; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-view .cmt-info span { font-size:var(--f-size14); letter-spacing: -0.3px; color: #777777; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-view .cmt-contents { margin-left: 52px; font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #777777; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-button { margin-left: 52px; margin-top: 12px; display: flex; gap: 20px; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-button a { font-size:var(--f-body1); line-height: 24px; letter-spacing: -0.28px; color: #999999; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-view>ul>li>.cmt-view-wrap { background-color: #F8F8F8; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-view>ul>li:first-child { border-top: 0; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-view>ul { border-bottom: 1px solid #c5c5c5; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-view ul li { border-top: 1px solid #C5C5C5; position: relative; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-view ul li .ico-delete { display: block; width: 30px; height: 30px; background-image: url(https://static.edmclass.com/ielts/my_class/ico_delete.svg); background-repeat: no-repeat; background-position: center center; background-size: 30px 30px; position: absolute; top: 16px; right: 16px; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-view ul.depth li { padding-left: 49px; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-view ul li .at { color: #4C4BAE; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-view ul li .at::after { content: ' '; display: inline; }
.my-class-wrapper .my-class-sub .cmt-wrap .cmt-view form { padding-left: 50px; margin-top: 1rem; }

.my-class-wrapper .my-class-sub .ctSwiper-wrap { position: relative; }
.my-class-wrapper .my-class-sub .ctSwiper-wrap [class^=swiper-button] { display: block; width: 48px; height: 48px; border: 1px solid #D2D2D2; border-radius: 100%; background-color: #ffffff; opacity: 0.9; }
.my-class-wrapper .my-class-sub .ctSwiper-wrap [class^=swiper-button]::after { content: ''; display: block; width: 12px; height: 18px; background-image: url(https://static.edmclass.com/ielts/my_class/ico_swiper_arrow.svg); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-left: -2px; }
.my-class-wrapper .my-class-sub .ctSwiper-wrap .swiper-button-prev { left: -24px; }
.my-class-wrapper .my-class-sub .ctSwiper-wrap .swiper-button-next { right: -24px; }
.my-class-wrapper .my-class-sub .ctSwiper-wrap .swiper-button-next::after { transform: translate(-50%, -50%) rotate(180deg); margin-left: 2px; }

.my-class-wrapper .correct-table tbody td .swiper-pagination { position: static; margin-top: 25px; }
.my-class-wrapper .correct-table tbody td .swiper-pagination .swiper-pagination-bullet { display: inline-flex; background-color: transparent; margin: 0 12px; opacity: 1; font-size:var(--f-size14); letter-spacing: -0.01px; color: #333333; border-radius: 0; padding: 0 16px; width: auto; height: 45px; background: #F8F8F8; border-radius: 23px; align-items: center; justify-content: center; }
.my-class-wrapper .correct-table tbody td .swiper-pagination .swiper-pagination-bullet-active { background: #273039; color: #ffffff; border-radius: 23px; }
.my-class-wrapper .correct-table .thumb { width: 96px; aspect-ratio: 2.3 / 1;object-fit: cover; }

.my-class-wrapper .my-class-sub .btn-all-down { display: inline-flex; align-items: center; }
.my-class-wrapper .my-class-sub .btn-all-down .ico-file { margin-right: 2px; }
.my-class-wrapper .my-class-sub .btn-all-down .ico-download { margin-left: 4px; }

/* player for feedback view: speaking */
.my-class-wrapper .my-class-sub .speaking-wrap { display: flex; gap: 8px; }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-contents { height: 268px; background: #F5FDFF; border: 1px solid #45BDF2; padding: 24px; border-radius: 12px; flex-grow: 1; overflow-y: auto; width: 50%; font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #333333; }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play { height: 268px; background: #ffffff; border: 1px solid #C5C5C5; padding: 24px; border-radius: 12px; flex-grow: 1; width: 50%; display: flex; align-items: center; justify-content: center; }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player { width: 300px; }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player audio { display: none; }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player .playbar .bar { width: 300px; height: 8px; background: #E1E1E1; position: relative; }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player .playbar .bar .bar-ing { position: absolute; height: 8px; width: 0; background: #46BC2F; left: 0; top: 0; }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player .playbar .bar .bar-ing::after { content: ''; width: 4px; height: 16px; background: #46BC2F; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player .playbar .playtime { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player .playbar .playtime span { font-size:var(--f-body2); line-height: 19px; letter-spacing: -0.01px; color: #777777; }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player .playbtn { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player .playbtn .ico-speaker { display: block; width: 30px; height: 30px; background-image: url(https://static.edmclass.com/ielts/my_class/ico_speaker.svg); background-size: 30px 30px; background-position: center center; background-repeat: no-repeat; position: relative; }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player .playbtn .ico-speaker:hover,
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player .playbtn .ico-speaker:active { background-image: url(https://static.edmclass.com/ielts/my_class/ico_speaker_on.svg); }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player .playbtn .ico-play { display: block; width: 40px; height: 40px; background-image: url(https://static.edmclass.com/ielts/my_class/ico_play.svg); background-size: 40px 40px; background-position: center center; background-repeat: no-repeat; }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player .playbtn .ico-play.stop { background-image: url(https://static.edmclass.com/ielts/my_class/ico_stop.svg); }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player .playbtn .ico-setting { display: block; width: 30px; height: 30px; background-image: url(https://static.edmclass.com/ielts/my_class/ico_setting.svg); background-size: 30px 30px; background-position: center center; background-repeat: no-repeat; position: relative; }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player .playbtn .ico-setting:hover,
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player .playbtn .ico-setting:active { background-image: url(https://static.edmclass.com/ielts/my_class/ico_setting_on.svg); }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player .playbtn .ico-speaker:hover .volume { display: flex; }
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .speaking-player .playbtn .ico-setting:hover .playx { display: flex; }


.volume { display: none; position: absolute; bottom: 30px; padding: 8px 5px; background-color: #000000; flex-direction: column; gap: 4px; left: 0; }
.volume:not(:checked)>input { position: absolute; top: -9999px; }
.volume:not(:checked)>label { display: block; width: 15px; height: 6px; background: #FFFFFF; cursor: pointer; }
.volume>input:checked~label { background: #46BC2F; }
.volume:not(:checked)>label:hover,
.volume:not(:checked)>label:hover~label { color: #46BC2F; }
.volume>input:checked+label:hover,
.volume>input:checked+label:hover~label,
.volume>input:checked~label:hover,
.volume>input:checked~label:hover~label,
.volume>label:hover~input:checked~label { color: #46BC2F; }

.playx { display: none; position: absolute; bottom: -40px; padding: 8px 8px; background-color: #000000; flex-direction: column; gap: 4px; right: -64px; }
.playx span { white-space: nowrap; font-size:var(--f-body2); line-height: 19px; letter-spacing: -0.01px; margin-bottom: 5px; color: #ffffff; }
.playx:not(:checked)>input { position: absolute; top: -9999px; }
.playx:not(:checked)>label { display: block; cursor: pointer; color: #ffffff; white-space: nowrap; font-size:var(--f-body4); letter-spacing: -0.01px; color: #FFFFFF; }
.playx>input:checked+label { color: #46BC2F; }
.playx:not(:checked)>label:hover,
.playx:not(:checked)>label:hover+label { color: #46BC2F; }

.speaking-textarea-wrap { background: #FFFFFF; border: 1px solid #C5C5C5; border-radius: 12px; }
.speaking-textarea-wrap .textarea-header { display: flex; padding: 16px 24px; align-items: center; justify-content: space-between; border-bottom: 1px solid #C5C5C5; }
.speaking-textarea-wrap .textarea-header span { display: flex; align-items: center; gap: 8px; font-size:var(--f-size14); letter-spacing: -0.01px; color: #333333; }
.speaking-textarea-wrap .textarea-header a { display: flex; font-size:var(--f-size14); letter-spacing: -0.01px; color: #666666; gap: 4px; margin-left: auto; }
.speaking-textarea-wrap .textarea-header .date { font-size:var(--f-body2); letter-spacing: -0.01px; color: #777777; margin-left: 12px; }
.speaking-textarea-wrap textarea { border-radius: 0; border: 0; width: 100%; height: 443px; }
.speaking-textarea { margin-top: 24px; }
.speaking-textarea .swiper-pagination2 .swiper-pagination-bullet { display: inline-flex; background-color: transparent; margin: 0 12px; opacity: 1; font-size:var(--f-size14); letter-spacing: -0.01px; color: #333333; border-radius: 0; padding: 0 16px; width: auto; height: 45px; background: #F8F8F8; border-radius: 23px; align-items: center; justify-content: center; }
.speaking-textarea .swiper-pagination2 .swiper-pagination-bullet-active { background: #273039; color: #ffffff; border-radius: 23px; }
.speaking-textarea .skSwiper { margin-top: 24px; }

.my-class-wrapper .correct-process .correct-process-body .essay-contents.rec { display: flex; height: auto; min-height: 305px; justify-content: space-between; flex-wrap: wrap;}
.my-class-wrapper .correct-process .correct-process-body .essay-contents.rec dl dd { overflow-y: auto; }

/* record */
.record {margin-left: auto; }
.record .record-wrap { min-width: 280px; height: 154px; background: #F6F6F6; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; margin-bottom: 8px; }
.record .record-wrap.h130 { height: 130px; }

.record .record-wrap .control-button { display: block; width: 75px; height: 75px; border-radius: 100%; margin-top: 24px; background-repeat: no-repeat; background-position: center center; background-size: 34px 34px; background-color: #F3393D; }
.record .record-wrap .ready { background-image: url(https://static.edmclass.com/ielts/my_class/ico_record.svg);  }
.record .record-wrap .ready.off { background-color: #C5C5C5; pointer-events: none; cursor: default; }

.record .record-wrap .control-button.recording { animation: recording-blink 1s infinite; position: relative;}
.record .record-wrap .control-button.recording::after { content: ''; width: 30px; height: 30px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

@keyframes recording-blink {
    0%, 100% { background-color: #F3393D; }
    50% { background-color: transparent; }
}

#fileUploadWrapper {width: 100%;}
.file-drag { width: 100%; min-height: 80px; background: #FFFFFF 0% 0% no-repeat padding-box; border: 2px dashed #C5C5C5; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size:var(--f-size14); letter-spacing: -0.01px; color: #999999; }
.file-drag.drag-over {border-color: #cc0011; background-color: #fad9d9;}
.file-drag ul { width: 100%; padding: 16px; }

.file-drag ul li { display: flex; align-items: center; }
.record .file-drag { margin-top: 8px; min-width: 280px; height: 52px; font-size:var(--f-body2); color: #666666; border: 1px dashed #999999; border-radius: 0; min-height: 52px; width: 100%;}
.record .file-drag.drag-over { border-color: #cc0011; background-color: #fad9d9; }
.record .file-drag span { color: #339DFF; font-weight: 700; }
.record input[type="file"] { display: none; }
.file-drag i { margin-right: 4px; }
.file-drag a { letter-spacing: -0.01px; color: #4C4BAE; margin: 0 4px; }
.file-drag a:hover { text-decoration: underline; }
.d-none {display: none;}

.record.disabled .record-wrap .control-button { background-color: #C5C5C5; pointer-events: none; cursor: default; }
.record .file-drag.disabled { pointer-events: none; cursor: default; border-color: #e7e7e7; }

.record .record-wrap .rec-time { display: flex; align-items: center; line-height: 20px; font-weight: 500; font-size:var(--f-body1); letter-spacing: -0.01px; color: #444444; }
.record .record-wrap .rec-time .ico-recording { display: block; width: 10px; height: 10px; border-radius: 10px; background-color: #F3393D; margin-right: 8px; }
.record .record-wrap .voice-print { width: 248px; height: 52px; background: #FFFFFF; border-radius: 26px; margin-top: 10px; background-image: url(https://static.edmclass.com/ielts/my_class/bg_voiceprint.svg); background-position: center center; background-repeat: no-repeat; background-size: 216px 38px; }

.record .rec-down { text-align: right; margin-top: -8px; margin-bottom: 8px; }
.record .rec-down a { display: inline-flex; font-size:var(--f-body3); letter-spacing: -0.01px; color: #666666; }
.record .rec-down a i { margin-left: 4px; }

.record .record-wrap .player { display: none; }
.record .record-wrap .player audio { display: none;}
.record .record-wrap .player.on { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.record .record-wrap .player .playbar { display: flex; align-items: center; justify-content: space-between; }
.record .record-wrap .player .playbar span { font-size:var(--f-body2); letter-spacing: -0.01px; color: #333333; }
.record .record-wrap .player .playbar .bar { width: 180px; height: 4px; background: #C5C5C5; margin: 0 10px; }
.record .record-wrap .player .playbar .bar .bar-ing { width: 0; height: 4px; background: #46BC2F; position: relative; }
.record .record-wrap .player .playbar .bar .bar-ing::after { content: ''; display: block; width: 8px; height: 8px; background: #46BC2F; border-radius: 100%; position: absolute; top: 50%; right: 0; transform: translateY(-50%); margin-right: -4px; }
.record .record-wrap .player .playbtn { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; width: 100% }
.record .record-wrap .player .playbtn .ico-speaker { display: block; width: 24px; height: 24px; background-image: url(https://static.edmclass.com/ielts/my_class/ico_speaker.svg); background-size: 24px 24px; background-position: center center; background-repeat: no-repeat; position: relative; }
.record .record-wrap .player .playbtn .ico-speaker:hover,
.record .record-wrap .player .playbtn .ico-speaker:active { background-image: url(https://static.edmclass.com/ielts/my_class/ico_speaker_on.svg); }
.record .record-wrap .player .playbtn .ico-play { display: block; width: 30px; height: 30px; background-image: url(https://static.edmclass.com/ielts/my_class/ico_play.svg); background-size: 30px 30px; background-position: center center; background-repeat: no-repeat; margin-top: 0; }
.record .record-wrap .player .playbtn .ico-play.stop { background-image: url(https://static.edmclass.com/ielts/my_class/ico_stop.svg); }
.record .record-wrap .player .playbtn .ico-setting { display: block; width: 24px; height: 24px; background-image: url(https://static.edmclass.com/ielts/my_class/ico_setting.svg); background-size: 24px 24px; background-position: center center; background-repeat: no-repeat; position: relative; }
.record .record-wrap .player .playbtn .ico-setting:hover,
.record .record-wrap .player .playbtn .ico-setting:active { background-image: url(https://static.edmclass.com/ielts/my_class/ico_setting_on.svg); }
.record .record-wrap .player .playbtn .ico-speaker:hover .volume { display: flex; }
.record .record-wrap .player .playbtn .ico-setting:hover .playx { display: flex; }
.record .record-wrap .player .playbtn .ico-speaker .volume { bottom: 24px; }
.record .record-wrap .player .btns { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 10px; }
.record .record-wrap .player .btns button { min-width: auto; width: auto; flex: 1 1 auto; height: 33px; padding: 0 3px; white-space: nowrap; font-size: 12px; background-color: transparent; border-radius: 8px; }
.record .record-wrap .player .btns button:not(:first-child) { margin-left: 1px; }
.record .record-wrap .player .btns button:hover { background-color: #fff; }


.cdt-table-noti { font-size:var(--f-body2); letter-spacing: -0.01px; color: #333333; display: block; margin-bottom: 8px; }

.my-class-wrapper .wrapper .my-class-contents .my-class-sub h4.dot-title { font-size:var(--f-heading1); font-weight: bold; letter-spacing: -0.6px; color: #333333; position: relative; padding-left: 16px; margin-bottom: 0; }
.my-class-wrapper .wrapper .my-class-contents .my-class-sub h4.dot-title::before { content: ''; display: block; width: 4px; height: 4px; border-radius: 4px; background: #000000; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }

.dot-title+.pd16 { display: flex; flex-direction: column; gap: 7px; }
.dot-title+.pd156 { font-size:var(--f-size14); line-height: 21px; letter-spacing: -0.45px; color: #333333; }

.my-class-wrapper .wrapper .my-class-contents .card h3.board-title { font-weight: 700; font-size:var(--f-heading2); color: #40404E; line-height: 26px; letter-spacing: -0.36px; text-align: left; margin-bottom: 16px;}
.my-class-wrapper .wrapper .my-class-contents .card h5.cdt-title { font-weight: 500; font-size:var(--f-heading2); letter-spacing: -0.54px; color: #333333; }
.my-class-wrapper .wrapper .my-class-contents .card h5.cdt-title span { font-weight: 300; }
.my-class-wrapper .wrapper .my-class-contents .cdt-score-wrap { border: 1px solid #C5C5C5; border-radius: 12px; padding: 16px; margin-top: 24px; }
.my-class-wrapper .wrapper .my-class-contents .cdt-score-wrap+.cdt-score-wrap { margin-top: 32px; }
.my-class-wrapper .wrapper .my-class-contents .cdt-score-wrap.disabled { background: #f6f6f6; }
.my-class-wrapper .wrapper .my-class-contents .cdt-score { margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.my-class-wrapper .wrapper .my-class-contents .cdt-score li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 214px; background: #FFFFFF; box-shadow: 0px 3px 6px #00000029; border: 1px solid #C5C5C5; border-radius: 12px; }

/* 보더 색상 변경 애니메이션 */
@keyframes rainbow-border {
    0% { border-color: #ff0000; }
    14% { border-color: #ff8000; }
    28% { border-color: #ffff00; }
    42% { border-color: #00ff00; }
    56% { border-color: #00ffff; }
    70% { border-color: #0080ff; }
    85% { border-color: #8000ff; }
    100% { border-color: #ff0000; }
}

/* 글로우 효과 애니메이션 - 보더와 다른 색상이 되도록 시차 적용 */
@keyframes glowing-offset {
    0% {
        box-shadow: 0 0 7px 3px rgba(255, 128, 0, 0.5); /* 보더보다 1단계 뒤의 색상으로 시작 */
    }
    14% {
        box-shadow: 0 0 7px 3px rgba(255, 255, 0, 0.5);
    }
    28% {
        box-shadow: 0 0 7px 3px rgba(0, 255, 0, 0.5);
    }
    42% {
        box-shadow: 0 0 7px 3px rgba(0, 255, 255, 0.5);
    }
    56% {
        box-shadow: 0 0 7px 3px rgba(0, 128, 255, 0.5);
    }
    70% {
        box-shadow: 0 0 7px 3px rgba(128, 0, 255, 0.5);
    }
    85% {
        box-shadow: 0 0 20px 10px rgba(255, 0, 0, 0.5);
    }
    100% {
        box-shadow: 0 0 7px 3px rgba(255, 128, 0, 0.5);
    }
}

/* 글로우 효과와 레인보우 보더 */
.my-class-wrapper .wrapper .my-class-contents .cdt-score li.just-finished:not(.disabled) {
    background: #FFFFFF;
    position: relative;
    border: 1px solid #ff0000; /* 두껍게 설정하여 더 눈에 띄게 */
    border-radius: 12px;

    /* 두 애니메이션 적용 - 동일한 타이밍으로 실행하지만 내용은 다름 */
    animation:
        glowing-offset 4s infinite linear,
        rainbow-border 4s infinite linear;
}

/* 비활성화된 카드의 배경색 유지 */
.my-class-wrapper .wrapper .my-class-contents .cdt-score-wrap.disabled .cdt-score li.just-finished {
    background: #f6f6f6;
    border: 1px solid #e7e7e7;
    animation: none;
}

.my-class-wrapper .wrapper .my-class-contents .cdt-score li.disabled, .my-class-wrapper .wrapper .my-class-contents .cdt-score-wrap.disabled .cdt-score li { background: #f6f6f6; box-shadow: none; border-color: #e7e7e7 }
.my-class-wrapper .wrapper .my-class-contents .cdt-score li h6 { display: flex; align-items: center; font-weight: bold; font-size:var(--f-heading2); line-height: 26px; letter-spacing: -0.54px; color: #333333; margin-top: 24px; margin-bottom: 0; }
.my-class-wrapper .wrapper .my-class-contents .cdt-score li.cdt-listen h6 { color: #889CFF; }
.my-class-wrapper .wrapper .my-class-contents .cdt-score li.cdt-read h6 { color: #C577F9; }
.my-class-wrapper .wrapper .my-class-contents .cdt-score li.cdt-write h6 { color: #5EDC90; }
.my-class-wrapper .wrapper .my-class-contents .cdt-score li.cdt-speak h6 { color: #F67667; }
.my-class-wrapper .wrapper .my-class-contents .cdt-score li h6 i { display: block; width: 22px; height: 22px; background-size: 22px 22px; background-position: center center; background-repeat: no-repeat; margin-right: 5px; }
.my-class-wrapper .wrapper .my-class-contents .cdt-score li h6 i.ico-listen { background-image: url(https://static.edmclass.com/ielts/my_class/ico_listen.svg); }
.my-class-wrapper .wrapper .my-class-contents .cdt-score li h6 i.ico-read { background-image: url(https://static.edmclass.com/ielts/my_class/ico_read.svg); }
.my-class-wrapper .wrapper .my-class-contents .cdt-score li h6 i.ico-write { background-image: url(https://static.edmclass.com/ielts/my_class/ico_write.svg); }
.my-class-wrapper .wrapper .my-class-contents .cdt-score li h6 i.ico-speak { background-image: url(https://static.edmclass.com/ielts/my_class/ico_speak.svg); }
.my-class-wrapper .wrapper .my-class-contents .cdt-score li .score { height: 46px; line-height: 46px; /* UI Properties */ text-align: center; font-weight: bold; font-size:var(--f-size32); letter-spacing: -0.96px; color: #333333; margin: 16px 0 12px; }
/* board list */

/* board view */
.my-class-wrapper .boardView .topWrap .infoWrap{border-top: 1px solid var(--s-color1); }
.my-class-wrapper .boardView .topWrap .infoWrap .box{width: 50%; height: 40px; line-height: 40px;}
.my-class-wrapper .boardView .topWrap .infoWrap .box strong{color: var(--n-info); width: 180px; display: inline-block; padding: 0 16px;}
.my-class-wrapper .boardView .topWrap .infoWrap .box span{width: calc(100% - 180px); color: #40404E; padding: 0 16px;}
.my-class-wrapper .boardView .contentWrap{border-top: 1px solid var(--s-color1); padding: 16px; min-height: 400px;}
.my-class-wrapper .boardView .fileWrap{background-color: var(--b-color5); margin-top: 16px; border: 1px solid var(--s-color1); border-radius: var(--b-radius1); padding: 23px 20px; font-size: var(--f-body3); font-weight: 700; }
.my-class-wrapper .boardView .fileWrap .file{color: var(--n-info); display: flex; justify-content: flex-start; line-height: 16px; letter-spacing: -0.24px; width: 100%;}
/* .my-class-wrapper .boardView .fileWrap .file + .file{margin-top: 12px;} */
.my-class-wrapper .boardView .fileWrap .file .name{display: inline-block; max-width: calc(100% - 68px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--n-info); display: inline-block;}
.my-class-wrapper .boardView .fileWrap .file .icon{color: var(--p-color1); background-image: url('https://static.edmclass.com/common/board/file_down.svg'); background-repeat: no-repeat; background-size: 16px; background-position: right center;  padding-right: 20px; text-align: right; text-decoration: underline; display: inline-block; width: auto; margin-left: 12px;}

.board-btn+.board { margin-top: 16px; }
.gray th strong { font-weight: 500; letter-spacing: -0.48px; color: #333333; margin-right: 24px; }
.gray th span { display: inline-block; font-weight: 400; letter-spacing: -0.48px; color: #666666; width: 220px; }
.board-contents { font-size:var(--f-heading3); line-height: 27px; letter-spacing: -0.02px; color: #333333; }




/*****************************************************
	내 강의실 > 게시판 하단 버튼
*****************************************************/
.my-class-sub .bottomBtnWrap{justify-content: space-between; margin-top: 32px;}
.my-class-sub .bottomBtnWrap input,
.my-class-sub .bottomBtnWrap a {text-align: center; font-size: var(--f-heading2); border: none; line-height: 1; font-weight: 700; border-radius: 12px; width: 236px; height: 56px; line-height: 56px;  color: var(--n-white); font-family: inherit; outline: 0; cursor: pointer; transition: background-color 0.3s ease; white-space: nowrap;}
.my-class-sub .bottomBtnWrap .go-list a { background-color: var(--b-color4); padding: 0 68px 0 100px; background-size: 24px; background-position: left 67px center; background-image: url(https://static.edmclass.com/common/board/go-list_pc.svg); background-repeat: no-repeat; color: var(--n-info); }
.my-class-sub .bottomBtnWrap input{background-color: var(--p-color2);}
/* .my-class-sub .bottomBtnWrap .applyWrap input[type="submit"]{background-color: var(--p-color2); font-weight: 600; } */

.my-class-sub .bottomBtnWrap .bottomBtnLeft { display: flex;}
.my-class-sub .bottomBtnWrap .bottomBtnLeft div + div { margin-left: 12px;;}
.my-class-sub .bottomBtnWrap .bottomBtnLeft a { width: 168px;  }
.my-class-sub .bottomBtnWrap .applyWrap input[type="button"].active ,
.my-class-sub .bottomBtnWrap .applyWrap a { background-color: var(--p-color2); font-weight: 600; }
.my-class-sub .bottomBtnWrap .delete a{background-color: var(--waring-color);}

.my-class-sub .bottomBtnWrap .bottomBtnLeft .applyWrap a { border: 1px solid var(--p-color2); color: var(--p-color2); background: var(--n-white); }
.my-class-sub .bottomBtnWrap .bottomBtnLeft .delete a{border: 1px solid var(--waring-color); color: var(--waring-color);background: var(--n-white);}



.my-class-sub .bottomBtnWrap a:active,
/* .my-class-sub .bottomBtnWrap input[type="submit"]:active{background-color: var(--p-color2); color: var(--n-white);} */
.my-class-sub .bottomBtnWrap input[type="button"].active:active{background-color: var(--p-color2); color: var(--n-white);}














/*****************************************************
	내 강의실 > 글쓰기 페이지
*****************************************************/
.my-class-sub.boardWrite{ font-size: var(--f-body1);}
.my-class-sub.boardWrite .topWrap{ width: 100%; border-bottom: 1px solid var(--s-color1);}
.my-class-sub.boardWrite .topWrap .boxWrap{display: flex; border-top: 1px solid var(--s-color1);}
.my-class-sub.boardWrite .topWrap .boxWrap .box{display: flex; align-items: center; min-height: 48px;}
.my-class-sub.boardWrite .topWrap .boxWrap .titleBox { text-align: center; font-size: var(--f-body1); line-height: 20px; letter-spacing:-0.28px; font-weight: 700; color: var(--n-info); background-color: var(--b-color4); width: 180px; justify-content: center; }
.my-class-sub.boardWrite .topWrap .boxWrap .contentBox{width: calc(100% - 180px); padding: 12px 16px;}
.my-class-sub.boardWrite .topWrap .boxWrap .contentBox .dropDownMenu .label{height: 40px; border-radius: var(--b-radius0); background-size: 16px; font-size: inherit; padding: 0 32px 0 12px;}
.my-class-sub.boardWrite .topWrap .boxWrap .contentBox .dropDownMenu .selectBox .optionListWrap{top: 44px;}
.my-class-sub.boardWrite .topWrap .boxWrap .box.subject input[type="text"]{border: 1px solid var(--s-color1); border-radius: var(--b-radius0); height: 40px; font-size: inherit; padding: 0 8px;}
.my-class-sub.boardWrite .topWrap .boxWrap .box.subject input[type="text"]::placeholder{color: var(--n-info);}
.my-class-sub.boardWrite .text-editor { min-height: 400px; margin: 16px 0; border: 1px solid var(--s-color1); border-radius: var(--b-radius1); padding: 16px;}
.my-class-sub.boardWrite .uploadFile{width: 100%; position: relative;}
.my-class-sub.boardWrite .uploadFile .flex{justify-content: center; align-items: center; height: 100%;}
.my-class-sub.boardWrite .uploadFile .uploadArea{width: 100%; background-color: var(--b-color5); height: 62px; line-height: 62px; text-align: center; font-size: var(--f-heading3); border-radius: var(--b-radius0); color: var(--n-info); border: 1px solid var(--s-color1); cursor: pointer;}
.my-class-sub.boardWrite .uploadFile .uploadArea .flex{justify-content: center; align-items: center;}
.my-class-sub.boardWrite .uploadFile .file-drop span{color: var(--p-color1); font-size: var(--f-body3); margin-left: 12px; font-weight: 600; position: relative; line-height: normal;}
.my-class-sub.boardWrite .uploadFile .file-drop span::after{content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: var(--p-color1);}
.my-class-sub.boardWrite .uploadFile .upload-icon{background-image: url('https://static.edmclass.com/common/board/file-upload.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 16px; height: 16px; margin-right: 8px;}
.my-class-sub.boardWrite .uploadFile .file-list{position: relative;}
.my-class-sub.boardWrite .uploadFile .file-list .fileBtn{display: none;}
.my-class-sub.boardWrite .uploadFile .file-list .file-name{display: flex; align-items: flex-start; width: 100%;}
.my-class-sub.boardWrite .uploadFile .file-list .file-name + .file-name{margin-top: 4px;}
.my-class-sub.boardWrite .uploadFile .file-list .file-name .remove{background-image: url('https://static.edmclass.com/common/board/upload-remove.svg'); background-repeat: no-repeat; background-size: contain; width: 14px; height: 14px; background-position: center; margin-left: 4px;}
.my-class-sub.boardWrite .uploadFile.active .file-list{background-color: var(--b-color5); border: 1px solid var(--s-color1); border-radius: var(--b-radius0); margin-top: 16px; padding: 12px; font-size: var(--f-body3); color: var(--n-info); line-height: 16px; letter-spacing: -0.24px;}
.my-class-sub.boardWrite .uploadFile.active .uploadArea{position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: auto; height: auto; z-index: 1; border: none; background-color: transparent;}
.my-class-sub.boardWrite .uploadFile.active .uploadArea .upload-icon,
.my-class-sub.boardWrite .uploadFile.active .uploadArea p{display: none;}
.my-class-sub.boardWrite .uploadFile.active .file-list{padding: 21px 16px; font-size: var(--f-body1); min-height: 62px; margin-top: 0;}



.my-class-wrapper .wrapper .my-class-contents .card h5.file-title { padding-left: 16px; font-size:var(--f-heading3); letter-spacing: -0.02px; font-weight: bold; margin-top: 36px }

.my-class-wrapper .wrapper .my-class-contents .file-wrap { display: flex; margin-top: 12px; }


.no-data-wrap { padding: 20px 0px;border-radius: 10px;background: #f8f8f8;  font-size: var(--f-size14); text-align: center; font-weight: 300;}

/* popup wrap */

.popup-wrap { background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #00000029; border: 1px solid #D9D9D9; /* border-radius: 12px; */
/* padding: 32px 24px; */
position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 500px; display: none; flex-direction: column; align-items: center; z-index: 999999; }

.popup-wrap.w740 { width: 740px; }

.popup-wrap.on { display: flex; }

.popup-wrap .popup-header { display: flex; width: 100%; height: 50px; background-color: #F5F5F5; align-items: center; justify-content: center; font-weight: bold; font-size:var(--f-heading3); letter-spacing: -0.02px; color: #222222; }

.popup-wrap .popup-header .ico-close { position: absolute; top: 16px; right: 16px; display: block; width: 20px; height: 20px; background-image: url(https://static.edmclass.com/ielts/my_class/ico_alert_close.svg); background-repeat: no-repeat; background-position: center center; background-size: 20px 20px; }

.popup-wrap .popup-contents { width: 100%; padding: 24px; }

.popup-wrap .popup-btn { padding: 0 24px 24px; }

.popup-wrap .popup-contents strong { font-size:var(--f-size14); line-height: 20px; letter-spacing: -0.01px; color: #333333; }

.popup-wrap .popup-contents strong + p { font-size:var(--f-size14); line-height: 20px; letter-spacing: -0.01px; color: #666666; margin-top: 4px; }

.popup-wrap .popup-contents .calendar-wrap { margin-top: 12px; padding: 16px; background-color: #F5F5F5; display: flex; flex-direction: column; align-items: flex-start; }

.popup-wrap .popup-contents .calendar-wrap .calendar-status { background-color: #ffffff; border-radius: 4px; padding: 9px 24px 7px; display: flex; align-items: center; justify-content: center; gap: 24px; margin-left: auto; margin-right: 0; text-align: center; }

.popup-wrap .popup-contents .calendar-wrap .calendar-status dt { font-weight: bold; font-size:var(--f-body2); line-height: 19px; letter-spacing: -0.01px; color: #666666; }

.popup-wrap .popup-contents .calendar-wrap .calendar-status dd { font-size:var(--f-body2); line-height: 19px; letter-spacing: -0.01px; color: #666666; margin-top: 4px; }

.popup-wrap .popup-contents .calendar-wrap .calendar-status dd.green { color: #46BC2F; }

.popup-wrap .popup-contents .calendar-wrap .calendar-status dd.red { color: #D53236; }

/* 캘린더 */


/* toggle schedule table */

#calendar { width: 100%; }

.fc .fc-scroller { overflow: visible!important; }

[role="presentation"] td { height: 54px!important; }

.fc .fc-view-harness-active > .fc-view,
.fc .fc-scroller-liquid-absolute { position: relative; }
.fc .fc-daygrid-body,
.fc .fc-scrollgrid-section, .fc .fc-scrollgrid-section table, .fc .fc-scrollgrid-section > td,
.fc .fc-view-harness { width: 100%!important; height: auto!important; }

.toggle-sche { padding: 16px; background-color: #ffffff; margin-top: 12px; }

.toggle-sche td, .toggle-sche th { border: 0; }
.toggle-sche .fc-scrollgrid { border: 0; }

.toggle-sche .fc-daygrid-day-frame { display: flex; align-items: center; justify-content: center; }

.toggle-sche .fc-daygrid-day-events { display: none; }

.toggle-sche .fc-day-today { background-color: transparent!important; }

.toggle-sche td { cursor: pointer }

.toggle-sche td.selected { background-color: rgb(188 232 241 / 80%); }

.noti-text { margin-top: 6px; font-size:var(--f-body3); line-height: 17px; }

.certificate { border: 1px solid #C5C5C5; margin-top: 16px; }

.certificate .head { display: flex; padding: 0 16px; align-items: center; height: 48px; background: #F5F5F5 0% 0% no-repeat padding-box; font-weight: bold; font-size:var(--f-heading3); letter-spacing: -0.02px; }

.certificate .contents { padding: 40px; text-align: center; }

.certificate .contents .logo-edm { display: inline-block; width: 76px; height: 29px; background-image: url(https://static.edmclass.com/ielts/my_class/c_logo.svg); background-repeat: no-repeat; background-position: center center; background-size: 76px 29px; text-indent: -9999px; overflow: hidden; margin-bottom: 24px; }

.certificate .contents ul { padding: 24px 14px; border-top: 1px solid #333333; border-bottom: 2px solid #C5C5C5; display: flex; flex-direction: column; gap: 16px; }

.certificate .contents ul li dl { display: flex; align-items: flex-start; text-align: left; }

.certificate .contents ul li dl dt { width: 92px; font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #999999; }

.certificate .contents ul li dl dd { font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #333333; width: calc(100% - 92px); }

.certificate .contents .bold-text { margin-top: 32px; font-weight: bold; font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #333333; }

.certificate .contents .date { margin-top: 6px; font-size:var(--f-size14); line-height: 21px; letter-spacing: -0.01px; color: #666666; }

.certificate .contents .ceo { font-size:var(--f-size14); line-height: 21px; letter-spacing: -0.3px; color: #999999; }


.certificate .contents .logo-edu { display: inline-block; width: 142px; height: 24px; background-image: url(https://static.edmclass.com/ielts/my_class/c_logo_edu.svg); background-repeat: no-repeat; background-position: center center; background-size: 142px 24px; text-indent: -9999px; overflow: hidden; margin-top: 16px; }

.imsi { display: flex; flex-direction: column; width: 100%; gap: 16px; }

.imsi input { display: none; }

.imsi input + label { display: block; cursor: pointer; }

.imsi-wrap { display: flex; align-items: flex-start; justify-content: space-between; }

.imsi-wrap .ico-imsi { display: block; width: 42px; height: 42px; background-image: url(https://static.edmclass.com/ielts/my_class/ico_imsi.svg); background-repeat: no-repeat; background-size: 42px 42px; background-position: center center; }

.imsi input:checked + label .ico-imsi { background-image: url(https://static.edmclass.com/ielts/my_class/ico_imsi_on.svg); }

.imsi-wrap .ico-imsi + dd { width: calc(100% - 50px); background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #C5C5C5; border-radius: 12px; padding: 16px; }

.imsi input:checked + label dd { border: 1px solid #46BC2F; }

.imsi label dd .badge-wrap { display: flex; align-items: center; gap: 8px; }

.imsi label dd .badge-wrap span { font-size:var(--f-body1); letter-spacing: -0.01px; color: #666666; }

.imsi label dd .badge-wrap .badge { display: flex; align-items: center; justify-content: center; padding: 0 8px; height: 29px; /* UI Properties */
background-color: #E5F6DA; border-radius: 4px; font-size:var(--f-body1); letter-spacing: -0.01px; color: #101010; }

.imsi label dd .badge-wrap .badge.gray { background-color: #F8F8F8; }

.imsi label dd .title { margin-top: 16px; font-size:var(--f-body1); line-height: 20px; letter-spacing: -0.01px; color: #666666; padding-bottom: 8px; border-bottom: 1px solid #c5c5c5; }

.imsi label dd .subject { font-weight: bold; font-size:var(--f-heading3); line-height: 24px; letter-spacing: -0.02px; color: #333333; margin-top: 8px; }

.imsi label dd .contents { margin-top: 4px; font-size:var(--f-size14); line-height: 23px; letter-spacing: -0.01px; }

/* event swiper */
.eventSwiper { width: 100%; height: 100%; }

.eventSwiper .swiper-slide { text-align: center; display: flex; align-items: center; }

/* 내 강의실 dashboard */
.main-list-table td .pd img { width: 136px; object-fit: cover; aspect-ratio: 136/59;}










/*************************************************************
    댓글 (my_class_mo.css 동일 내용)
	:: mobile first로 작성된 내용
*************************************************************/
.commentArea{font-size: var(--f-body1); padding: 0 16px 40px;}
.commentArea textarea{border-radius: 8px; border: 1px solid var(--s-color1); padding: 9px; font-size: var(--f-body1); outline: 0; font-family: inherit; white-space: pre-wrap;word-wrap: break-word; overflow: hidden;}
.commentArea textarea::placeholder{color: var(--n-info);}
.commentArea textarea:focus-visible {border-color: #339DFF;}

.commentArea .comment .box textarea,
.commentArea .userContentText textarea{background-color: transparent; padding: 0; border: none; font-size: inherit; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -moz-box-orient: vertical; display: -moz-box; display: -webkit-box; height: 100%; line-height: 16px; letter-spacing: -0.24px; color: var(--n-subTitle);}
.commentArea .comment .box textarea:focus-visible,
.commentArea .userContentText textarea:focus-visible{outline: none;}
.commentArea .comment .box .moreBtn,
.commentArea .userContentText .moreBtn{text-decoration: underline; color: var(--n-info2); font-weight: 500; margin-top: 6px;}
.commentArea .comment .box .textWrap,
.commentArea .userContentText .textWrap{line-height: 16px; letter-spacing: -0.24px;}
/* 댓글 */
.commentArea .box{position: relative; border-radius: var(--b-radius0); padding: 12px; font-size: var(--f-body3); }
.commentArea .box .manager{border-bottom: 1px solid var(--s-color1); padding-bottom: 9px; margin-bottom: 8px; display: flex; align-items: center;}
.commentArea .box .manager .profile{width: 32px; height: 32px; border-radius: var(--b-radius3); border: 1px solid var(--s-color1); background-image: url('https://static.edmclass.com/common/board/comment-profile.png'); background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; position: relative;}
.commentArea .box .manager .profile.teacher{background-image: url('https://static.edmclass.com/common/board/comment-profile-t.png');}
.commentArea .box .manager .profile.manager{background-image: url('https://static.edmclass.com/common/board/comment-profile-m.png');}
.commentArea .box .manager .info{padding-left: 8px; font-size: var(--f-body4); color: var(--n-info); line-height: 14px; letter-spacing: -0.22px;}
.commentArea .box .manager .info .name{font-weight: 700; color: var(--n-subTitle); font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;}
.commentArea .box .remove-comment{position: absolute; top: 12px; right: 12px; width: 14px; height: 14px; background-image: url('https://static.edmclass.com/common/popupCloseBtn_mo.svg'); background-repeat: no-repeat; background-size: contain; background-position: center;}
.commentArea .box .textWrap .buttonWrap{padding-top: 4px;}
.commentArea .box .textWrap .buttonWrap > * + *{margin-left: 17px; position: relative;}
.commentArea .box .textWrap .buttonWrap > * + *::before{content: ''; position: absolute; left: -8.5px; top: 50%; transform: translateY(-50%); width: 1px; height: 8px; background-color: var(--s-color1);}
.commentArea .box .textWrap .buttonWrap .add-comment{background-image: url('https://static.edmclass.com/common/board/add-comment-icon.svg'); background-repeat: no-repeat; background-size: 14px; background-position: left center; padding-left: 18px;}
.commentArea .box .textWrap .buttonWrap .hide-comment{display: flex; cursor: default;}
.commentArea .box .textWrap .buttonWrap .hide-comment p{cursor: pointer;}
.commentArea .box .textWrap .buttonWrap .hide-comment .num{font-weight: 500; display: inline-block;}
.commentArea .box .textWrap .buttonWrap .hide-comment .type2{display: none;}
.commentArea .box .textWrap .buttonWrap .hide-comment.hide .type1{display: none;}
.commentArea .box .textWrap .buttonWrap .hide-comment.hide .type2{display: inline-block;}
.commentArea .comment{padding-left: 24px; padding-top: 16px; position: relative;}
.commentArea .comment::before{content: ''; position: absolute; left: 0; top: 16px; background-image: url('https://static.edmclass.com/common/board/refund-comment.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 16px; height: 16px;}
.commentArea .comment .box{background-color: var(--b-color5);}
.commentArea .comment .box .textWrap .text{max-height: 63px; overflow: hidden;}
.commentArea .comment .box textarea{line-clamp: 4; -webkit-line-clamp: 4;}
/* 답글 달기 - input */
.replyArea .replyInputWrap .pictureWrap{display: none;}
.replyArea .replyInputWrap{margin-top: 8px; padding-left: 24px; margin-top: 8px; position: relative; display: none;} /* 답글 -input */
.replyArea.input .replyInputWrap{display: block;}
/* 화살표가 없는 코멘트 */
.commentArea .comment.n{padding-left: 0;}
.commentArea .comment.n::before{display: none;}
/* 본문 */
.commentArea .userContentText .textWrap .text{max-height: 98px; overflow: hidden;}
.commentArea .userContentText textarea{line-clamp: 6; -webkit-line-clamp: 6; cursor: pointer;}
.commentArea .userContentText .imgWrap{width: 100%; max-width: 328px; border-radius: var(--b-radius0); overflow: hidden; margin-top: 14px; height: 100px; position: relative;}
.commentArea .userContentText .imgWrap img{width: 100%; object-fit: contain; border-radius: var(--b-radius0);}
.commentArea .userContentText .imgWrap img + img{margin-top: 8px;}
.commentArea .userContentText .imgWrap .allNum{position: absolute; bottom: 0; right: 0; background-color: rgba(29, 29, 31,0.5); color: var(--n-white); font-size: var(--f-body4); font-weight: 700; width: 16px; height: 16px; border-top-left-radius: 4px; text-align: center; line-height: 16px;}
.commentArea .userContentText .imgWrap .allNum::after{content: ''; position: absolute; width: 100%; height: 100%; backdrop-filter: blur(6px);}
/* 더보기 클릭 후 */
.commentArea .comment .box .textWrap.allView .text,
.commentArea .userContentText .textWrap.allView .text{max-height: initial;}
.commentArea .comment .box .textWrap.allView .text textarea,
.commentArea .userContentText .textWrap.allView .text textarea{max-height: initial; line-clamp: initial; -webkit-line-clamp: initial;}
.commentArea .comment .box .textWrap.allView .text textarea:focus-visible,
.commentArea .userContentText .textWrap.allView .text textarea:focus-visible{outline: 1px solid transparent; border-color: transparent;}
.commentArea .userContentText .textWrap.allView .imgWrap{height: auto;}
.commentArea .userContentText .textWrap.allView .imgWrap .allNum{display: none;}
.commentArea .comment .box .textWrap.allView .moreBtn,
.commentArea .userContentText .textWrap.allView .moreBtn{display: none;}
/* 회색 배경 > 댓글 컬러 */
.commentArea .commentArea.gray{background-color: transparent;}
.commentArea .commentArea.gray .box{background-color: var(--n-white); border: 1px solid var(--s-color1);}

.commentArea .title{font-weight: 700; padding: 16px 0; margin-bottom: 16px;}
.commentArea .title span{color: #0059FF;}
.commentArea .original-comment .box{border: 1px solid var(--s-color1);}
.commentArea .original-comment .box .textWrap .text{line-height: 16px; letter-spacing: -0.24px;}
.commentArea .replyArea{padding-top: 12px;}
.commentArea .comment{padding-top: 12px;}
.commentArea .comment .reply .who{position: relative; display: none; padding-right: 5px;}
.commentArea .comment .reply .who::before{content: '@'; font-weight: 700;}
.commentArea .comment ~ .comment::before{display: none;}

.commentArea .title{font-weight: 700; padding: 16px 0; margin-bottom: 16px;}
.commentArea .title span{color: #0059FF;}
.commentArea .original-comment .box{border: 1px solid var(--s-color1);}
.commentArea .original-comment .box .textWrap .text{line-height: 16px; letter-spacing: -0.24px;}
.commentArea .replyArea{padding-top: 12px;}
.commentArea .comment{padding-top: 12px;}
.commentArea .comment .reply .who{position: relative; display: none; padding-right: 5px;}
.commentArea .comment .reply .who::before{content: '@'; font-weight: 700;}
.commentArea .comment ~ .comment::before{display: none;}

.replyInputWrap .file-list{display: flex; flex-wrap: nowrap; overflow-x: auto; padding: 0 8px;}
.replyInputWrap .file-list .imageFile{position: relative; width: 72px; margin-right: 8px;}
.replyInputWrap .file-list .imageFile img{width: 72px; height: 72px; border-radius: var(--b-radius0); overflow: hidden; object-fit: cover;}
.replyInputWrap .file-list .imageFile .remove{background-image: url('https://static.edmclass.com/common/board/upload-remove-white.svg'); background-repeat: no-repeat; background-size: contain; width: 16px; height: 16px; background-position: center; background-color: var(--n-deactivate); border-radius: 50%; top: 5.33px; right: 5.33px; position: absolute;}
.replyInputWrap .file-list .imageFile .file-name{font-size: var(--f-body3); display: flex; align-items: center; margin-top: 4px;}
.replyInputWrap .file-list .imageFile .file-name span::before{content: '.';}
.replyInputWrap .reply-textWrap{position: relative; width: 100%; width: calc(100% - 50px); padding-right: 8px}
.replyInputWrap .reply-textWrap .send-file{background-image: url('https://static.edmclass.com/common/board/add-file-16.svg'); width: 16px; height: 16px; background-size: contain; background-position: center; position: absolute; right: 20px; top: 12px; cursor: pointer;}
.replyInputWrap .reply-textWrap .text{height: 40px; max-height: 100px; min-height: 40px; display: block;}
.replyInputWrap .reply-textWrap .text textarea{height: 100%; padding-right: 18px;}
/* 첨부파일 있을 때 */
.replyInputWrap.addFile .file-list{padding-bottom: 10px;}
.replyInputWrap.addFile .reply-textWrap{padding: 0; position: relative;}
.replyInputWrap.addFile .reply-textWrap::before{content: ''; position: absolute; top: 0; left: 0; width: calc(100% - 8px); height: 100%; border: 1px solid var(--p-color1); border-radius: var(--b-radius0); touch-action: none; pointer-events: none; z-index: 2;}
.replyInputWrap.addFile .reply-textWrap::after{content: ''; position: absolute; top: 0; right: 0; background-color: #fff; width: 16px; height: 100%;}
.replyInputWrap.addFile .reply-textWrap .text textarea{border-color: transparent;}

.replyInputWrap .registration{height: 40px; line-height: 1.2; background-color: var(--n-white); color: var(--p-color2); border: 1px solid var(--p-color2); font-size: var(--f-body1); width: 50px; border-radius: var(--b-radius0); transition: background-color 0.3s ease;}
.replyInputWrap.re-reply{display: none; margin-top: 8px; padding-left: 24px;}


@media screen and (min-width: 1200px){
	.commentArea{margin-top: 40px; padding: 0;}

    .commentArea .comment .box textarea,
    .commentArea .userContentText textarea{line-height: 20px; letter-spacing: -0.28px;}
    /* 댓글 */
    .commentArea .box{border-radius: var(--b-radius2); padding: 16px; font-size: var(--f-body1);}
    .commentArea .box .manager{padding-bottom: 18px; margin-bottom: 16px;}
    .commentArea .box .manager .profile{width: 48px; height: 48px; background-image: url('https://static.edmclass.com/common/board/comment-profile-48.png');}
    .commentArea .box .manager .profile.teacher{background-image: url('https://static.edmclass.com/common/board/comment-profile-t-48.png');}
    .commentArea .box .manager .profile.manager{background-image: url('https://static.edmclass.com/common/board/comment-profile-m-48.png');}
    .commentArea .box .manager .info{color: var(--n-subTitle); font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;}
    .commentArea .box .manager .info .name{font-size: var(--f-heading3); padding-right: 8px; line-height: 22px; letter-spacing: -0.32px;}
    .commentArea .box .remove-comment{top: 16px; right: 16px; background-image: url('https://static.edmclass.com/common/popupCloseBtn.svg'); width: 24px; height: 24px;}
    .commentArea .box .textWrap .buttonWrap{padding-top: 16px;}
    .commentArea .box .textWrap .buttonWrap .add-comment{background-image: url('https://static.edmclass.com/common/board/add-comment-icon_pc.svg'); background-size: 16px; padding-left: 20px;}
    .commentArea .box .textWrap .buttonWrap > * + *{margin-left: 33px;}
    .commentArea .box .textWrap .buttonWrap > * + *::before{left: -16.5px;}

    .commentArea .comment{padding-left: 32px; padding-top: 32px;}
    .commentArea .comment::before{width: 24px; height: 24px; background-image: url('https://static.edmclass.com/common/board/refund-comment_pc.svg'); top: 32px;}
    .commentArea .comment .box .textWrap{line-height: 20px; letter-spacing: -0.28px; }
    .commentArea .comment .box .textWrap .text{line-clamp: initial; -webkit-line-clamp: initial; height: auto; max-height: initial;}
    .commentArea .comment .box .textWrap .text textarea{line-height: 20px; letter-spacing: -0.28px; text-overflow: initial; line-clamp: initial; -webkit-line-clamp: initial;}
    .commentArea .comment .box .textWrap .moreBtn{display: none !important;}
    /* 답글 달기 - input */
    .commentArea .replyArea .replyInputWrap{margin-top: 24px; padding-left: 88px; position: relative;}
    .commentArea .replyArea .replyInputWrap .pictureWrap{background-image: url('https://static.edmclass.com/common/board/refund-comment-profile.svg'); background-repeat: no-repeat; background-size: cover; background-position: center; width: 48px; height: 48px; border: 1px solid var(--s-color1); border-radius: var(--b-radius1); position: absolute; left: 32px; top: 0; display: block;}
    .commentArea .replyArea .replyInputWrap .pictureWrap figure{width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center;}
    /* 본문 */
    .commentArea .userContentText .textWrap.imgTrue{display: flex; flex-wrap: wrap;}
    .commentArea .userContentText .textWrap.imgTrue .text{width: calc(100% - 132px); order: 1; padding-right: 16px;}
    .commentArea .userContentText .textWrap .imgWrap{width: 132px; height: 132px; margin-top: 0; order: 2; }
    .commentArea .userContentText .imgWrap img{height: 100%; width: 100%; object-fit: cover; object-position: center;}
    .commentArea .userContentText .moreBtn{order: 3;}
    .commentArea .userContentText .imgWrap .allNum{width: 20px; height: 20px; line-height: 20px; font-size: var(--f-body3);}
    /* 더보기 클릭 후 */
    .commentArea .userContentText .textWrap.allView{display: block;}
    .commentArea .userContentText .textWrap.allView.imgTrue .text{width: 100%;}
    .commentArea .userContentText .textWrap.allView.imgTrue .imgWrap{width: 100%;height: auto; display: flex; flex-wrap: wrap; margin-top: 24px; max-width: initial; row-gap: 24px; column-gap: 24px;}
    .commentArea .userContentText .textWrap.allView .imgWrap img{height: auto; width: calc(50% - 12px); }
    .commentArea .userContentText .textWrap.allView .imgWrap img + img{margin-top: 0;}


	.commentArea .title{font-size: var(--f-heading2); padding-top: 0; padding-bottom: 0; margin-bottom: 24px;}
    .commentArea .title::after{display: none;}
    .commentArea .comment{padding-top: 24px;}
    .commentArea .comment .reply .who{display: inline-block;}
    .commentArea .replyArea{padding-top: 24px;}


    .replyInputWrap .registration{width: 130px; height: 56px; font-size: var(--f-heading2); font-weight: 700; border-radius: 12px;}
    .replyInputWrap .registration:disabled{color: var(--n-info) !important;}

    .replyInputWrap .reply-textWrap{width: calc(100% - 130px); padding-right: 16px;}
    .replyInputWrap .reply-textWrap .text{height: 56px; min-height: 56px; max-height: initial; padding-right: 0;}
    .replyInputWrap .reply-textWrap .text textarea{font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; border-radius: 12px; padding: 16px; height: 100% !important; overflow: hidden;}
    .replyInputWrap .reply-textWrap .send-file{width: 24px; height: 24px; background-image: url('https://static.edmclass.com/common/board/add-file.svg'); top: 16px; right: 28px;}
    .replyInputWrap.addFile .reply-textWrap::before{width:calc(100% - 16px); }
    .replyInputWrap.addFile .reply-textWrap::after{width: 28px;}

    .inputArea .replyInputWrap .flex.align-c{align-items: flex-start;}
    .inputArea .replyInputWrap .reply-textWrap{ width: calc(100% - 24px); padding-right: 8px;}
    .inputArea .replyInputWrap .registration{height: 24px; width: 24px; font-size: var(--f-heading2); text-indent: -99999999999999%; background-image: url('https://static.edmclass.com/common/board/send-text-active.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; background-color:transparent !important; border:none;}
    .inputArea .replyInputWrap .registration:disabled{background-image: url('https://static.edmclass.com/common/board/send-text.svg');}
    .inputArea .replyInputWrap .reply-textWrap .send-file{right: 20px;}
    .inputArea .replyInputWrap.addFile .reply-textWrap::before{border-radius: 12px; width: calc(100% - 8px);}
    .inputArea .replyInputWrap.addFile .reply-textWrap::after{width: 20px;}

    .replyInputWrap.bottom-fix-btn{margin-top: 24px;}
    .replyInputWrap.re-reply{padding-left: 32px; margin-top: 24px;}
}





@media screen and (max-width:1279px){
    .container { padding-left: 24px; padding-right: 24px; }
    .my-class-wrapper .wrapper { gap: 16px; }
    .my-class-wrapper .wrapper .my-class-menu { width: 76px; }
    .my-class-wrapper .wrapper .my-class-menu ul li a { padding: 12px 6px; }
    .my-class-wrapper .wrapper .my-class-contents { width: calc(100% - 92px); }
    .my-class-wrapper .wrapper .my-class-contents .row { margin: 0 -8px; }
    .my-class-wrapper .wrapper .my-class-contents .row .column { padding: 0 8px; }
    .my-class-wrapper .wrapper .my-class-contents .row .column.c20p { width: 184px; }
    .my-class-wrapper .wrapper .my-class-contents .row .column.c80p { width: calc(100% - 184px); }
    .my-class-wrapper .wrapper .my-class-contents .main-process,
    .my-class-wrapper .wrapper .my-class-contents .main-process2,
    .my-class-wrapper .wrapper .my-class-contents .pd32,
    .my-class-wrapper .wrapper .my-class-contents .notice .card { padding: 32px 16px!important; }
    .my-class-wrapper .wrapper .my-class-contents .main-process .class-rate>a { margin-left: 5px; }
    .my-class-wrapper .wrapper .my-class-contents .main-process2 .atdc-rate { width: 98px; height: 58px; font-size:var(--f-heading1); }
    .my-class-wrapper .wrapper .my-class-contents .main-process2 span { font-size:var(--f-size14); }
    .my-class-wrapper .wrapper .my-class-contents .main-process2 a { font-size:var(--f-size14); margin-top: 13px; }
    .my-class-wrapper .wrapper .my-class-contents .row.crt { flex-wrap: wrap; }
    .my-class-wrapper .wrapper .my-class-contents .row.crt .column.c20p { width: 33.333% }
    .my-class-wrapper .wrapper .my-class-contents .row.crt .column.c20p:nth-child(4),
    .my-class-wrapper .wrapper .my-class-contents .row.crt .column.c20p:nth-child(5) { margin-top: 16px; }
    .my-class-wrapper .wrapper .my-class-contents .card h5 { font-weight: 500; font-size:var(--f-heading3); letter-spacing: -0.02px; }
    .my-class-wrapper .wrapper .my-class-contents .card [class^=ico-crt] { margin: 17px auto 11px; }
    .my-class-wrapper .wrapper .my-class-contents .crt p { font-size:var(--f-heading3); }
    .my-class-wrapper .wrapper .my-class-contents .crt p span { font-size:var(--f-body3); }
    .my-class-wrapper .wrapper .my-class-contents .crt a { font-size:var(--f-body2); }

    .my-class-wrapper .wrapper .my-class-contents .notice .card ul li .badge { width: 51px; height: 24px; padding: 0; font-size:var(--f-body2); margin-right: 5px; }
    .my-class-wrapper .wrapper .my-class-contents .notice .card ul li a { display: block; max-width: calc(100% - 127px); }
    .my-class-wrapper .wrapper .my-class-contents .main-list-table colgroup { display: none; }
    /* .my-class-wrapper .wrapper .my-class-contents .notice .card .ico-more { right: 16px; } */
    .my-class-wrapper .wrapper .my-class-contents .main-list-table thead th { white-space: nowrap; }
    .my-class-wrapper .wrapper .my-class-contents .main-list-table tbody td { padding: 16px 6px; }
    .my-class-wrapper .wrapper .my-class-contents .main-list-table tbody td.pd img { width: 70px; }
    .my-class-wrapper .wrapper .my-class-contents .main-list-table tbody td.pd span { margin-left: 8px; max-width: calc(100% - 78px); }
    .my-class-wrapper .wrapper .my-class-contents .main-list-table tbody td.pd span,
    .my-class-wrapper .wrapper .my-class-contents .main-list-table tbody td.option a { text-overflow: unset; overflow: visible; white-space: pre-wrap; }
    .my-class-wrapper .wrapper .my-class-contents .main-list-table tbody td a.my-btn-default { width: 46px; min-width: auto; }
    .my-class-wrapper .wrapper .my-class-contents .main-list-table tbody td a.my-btn-default span { display: none; }
    .my-class-wrapper .wrapper .my-class-contents .main-list-table tbody td.text-center:not(.date) { white-space: nowrap; }
    .my-class-wrapper .wrapper .my-class-contents .welcome-package .card img { width: 70px; height: 70px; }
    .my-class-wrapper .wrapper .my-class-contents .welcome-package .card { padding: 16px 16px 14px; height: 152px;}
    .my-class-wrapper .wrapper .my-class-contents .welcome-package .card p { margin-top: 8px; font-size:var(--f-body3); line-height: 17px; }
    .my-class-wrapper .wrapper .my-class-contents .my-class-sub { padding: 60px 12px; }
    .my-class-wrapper .option-category.pd2416 { row-gap: 16px; column-gap: 8px; }
    .my-class-wrapper .option-category.pd2416 dl dt { width: 176px; }
    .my-class-wrapper .option-category.pd2416 dl dd { display: block; }
    .my-class-wrapper .option-category.pd2416 dl:nth-child(2n-1) { width: calc(100% - 218px); }
    .my-class-wrapper .option-category.pd2416 dl:nth-child(2n) { width: 210px; }
    .my-class-wrapper .option-category.pd2416 dl:nth-child(2n) dt { width: 86px; }
    .my-class-wrapper .option-category.pd2416 dl:nth-child(2n) dd { max-width: calc(100% - 90px); }
    .my-class-wrapper .option-category.pd2416 dl:nth-child(6) dt { width: 176px; }
    .my-class-wrapper .option-category.pd2416 { padding: 24px 0px; }
    .my-class-wrapper .wrapper .my-class-contents .my-class-sub .bg-white.pd2416 { padding: 24px 12px; }
    .my-class-wrapper .option-category.between { gap: 16px; }
    .my-class-wrapper .option-category.between dl{width: 100%;}
    .my-class-wrapper .option-category.between dl dd{width: 100%;}
    .my-class-wrapper .option-category.between select{width: 100% !important;}
    .my-class-wrapper .option-category select { width: auto!important; min-width: auto; }
    .my-class-wrapper .option-category dl dt { word-break: keep-all; position: relative; padding-left: 10px; }
    .my-class-wrapper .option-category dl dt::before { position: absolute; top: 0; left: 0; }
    .my-class-wrapper .correct-process .correct-process-header ul li { font-size:var(--f-heading3); }
    .my-class-wrapper .correct-process .correct-process-body { padding: 16px 12px; }
    .my-class-wrapper .correct-process .correct-process-body img { max-width: 100%; }
    .my-class-wrapper .correct-process .correct-process-body .essay-contents .tcSwiper-wrap { width: 100%; }
    .my-class-wrapper .correct-process .correct-process-body .essay-contents .tcSwiper { width: auto; margin-right: 0; }
    /* .my-class-wrapper .correct-process .correct-process-body .essay-contents .swiper-button-next { display: none; } */
    .my-class-wrapper .wrapper .my-class-contents .my-class-sub .my-lecture-list li { padding: 25px 12px; }
    .my-class-wrapper .wrapper .my-class-contents .my-class-sub .my-lecture-list li strong { width: 60px; margin-right: 8px; }
    .my-class-wrapper .wrapper .my-class-contents .my-class-sub .my-lecture-list li .process { margin-right: 12px; width: 100px; }
    .my-class-wrapper .wrapper .my-class-contents .my-class-sub .my-lecture-list li .lecture-name { width: calc(100% - 288px); }
    .my-class-wrapper .wrapper .my-class-contents .my-class-sub .my-lecture-list li .lecture-name span,
    .my-class-wrapper .wrapper .my-class-contents .my-class-sub .my-lecture-list li .lecture-name a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
    .my-lecture-list + .sub-tab { margin-top: 24px; }
    .my-class-wrapper .my-class-list>ul>li { padding: 24px 12px; }
    .my-class-wrapper .my-class-list>ul>li img { width: 120px; margin-right: 12px; align-self: flex-start; }
    .my-class-wrapper .my-class-list>ul>li>div { width: calc(100% - 206px); }
    .my-class-wrapper .my-class-list>ul>li .mini-menu { width: 64px; }
    .my-class-wrapper .my-class-list>ul>li .mini-menu li a { height: 29px; font-size:var(--f-body4); }
    .my-class-wrapper .correct-table thead th { font-size:var(--f-body1); letter-spacing: -0.42px; color: #333333; white-space: nowrap; }
    .my-class-wrapper .correct-table tbody td:first-child { padding: 0 3px; }
    .my-class-wrapper .correct-table tbody td { white-space: nowrap; padding: 0; }
    .my-class-wrapper .correct-table tbody td { font-size:var(--f-body1); }
    .my-class-wrapper .correct-table tbody td a.my-btn-default4 { height: 37px; padding: 0; width: 44px; font-size:var(--f-size14); letter-spacing: -0.01px; justify-content: center; }
    .my-class-wrapper .correct-table tbody td a.my-btn-default4 span { display: none; }
    .my-class-wrapper .correct-table tbody td[colspan="7"] { padding: 16px!important; }
    .my-class-wrapper .chart-img-detail .chart-img { width: 216px; height: 216px; }
    .my-class-wrapper .chart-img-detail .chart-detail { max-width: calc(100% - 224px); font-size:var(--f-body1); line-height: 21px; max-height: 216px; }
    .my-class-wrapper .my-class-sub .score-ul { flex-wrap: wrap; gap: 20px; justify-content: flex-start; }
    .my-class-wrapper .my-class-sub .score-ul li { width: calc((100% - 40px) / 3) }
    /* .my-class-wrapper .my-class-sub .file-list span.name { width: 95px; } */
    .my-class-wrapper .correct-table tbody td ul { flex-direction: column; vertical-align: middle; margin-left: 8px; }
    .my-class-wrapper .correct-table tbody td ul li { line-height: 21px; width: 160px; }
    .my-class-wrapper .correct-table tbody td img.thumb { width: 84px; height: 53px; }
    .my-class-wrapper .correct-table tbody.tdpd16 td { padding: 16px 0!important; }
    .my-class-wrapper .wrapper .my-class-contents .my-class-sub .bg-gray { padding: 24px 8px!important; }
    .my-class-wrapper .wrapper .my-class-contents .cdt-score { gap: 4px; }
    .my-class-wrapper .wrapper .my-class-contents .cdt-score li h6 { font-size:var(--f-heading3); letter-spacing: -0.48px; }
    .cdt-btn { width: 92px; height: 35px; font-size:var(--f-body2); }
    .my-class-wrapper .option-cont .option-list-title { padding: 0 16px; }
    .my-class-wrapper .option-cont .option-list>li { padding-left: 15px; padding-right: 15px; }
    .my-class-wrapper .option-cont .option-list>li .rate { width: 44px; height: 31px; margin-right: 8px; display: flex;align-items: center;justify-content: center;}
    .my-class-wrapper .option-cont .option-list>li .btn { gap: 3px; min-width: 70px;}
    .option-list [class^="my-btn-default"].ico { width: 32px; height: 32px; }
    .my-class-wrapper .option-cont .option-list>li p { margin-right: 15px; width: calc(100% - 376px); }
    .my-class-wrapper .wrapper .my-class-contents .card h3.board-title { padding-left: 0; }
    .my-class-wrapper .wrapper .my-class-contents .row h2 { font-size:var(--f-size22); line-height: 32px; letter-spacing: -0.02px; }
    .my-class-wrapper .correct-table tbody td p.board-pd-name,
    .my-class-wrapper .correct-table tbody td a.board-pd-sbj { width: 100%; max-width: 190px; }
    .my-class-wrapper .correct-table.board thead th { padding: 0 10px; }
    .my-class-wrapper .correct-table tbody td.board-contents { white-space: unset; }
    .my-class-wrapper .correct-table.gray thead th { font-size:var(--f-body1); letter-spacing: -0.42px; }
    .my-class-wrapper .correct-table tbody td dl dt { font-size:var(--f-body1); }
    .my-class-wrapper .correct-table tbody td dl dd { white-space: wrap; overflow: visible; text-overflow: unset; font-size:var(--f-body1); }
}

@media screen and (max-width: 1024px){
.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .player { width: 200px; }

.my-class-wrapper .my-class-sub .speaking-wrap .speaking-play .player .playbar .bar { width: 200px; }
}

/* pagination */


.board-footer { margin-top: 32px; }

.board-footer .pagination { display: flex; gap: 0px; align-items: center; justify-content: center; margin-top: 60px; }

.board-footer .pagination a { display: flex; height: 32px; border-radius: 4px; align-items: center; justify-content: center; font-size:var(--f-heading3); letter-spacing: -0.02px; color: #666666; /* margin: 0 6px; */
min-width: 32px; }

.board-footer .pagination a.prev-all,
.board-footer .pagination a.prev,
.board-footer .pagination a.next-all,
.board-footer .pagination a.next { text-indent: -99999px; width: 32px; border: 1px solid #C5C5C5; background-position: center center; background-repeat: no-repeat; margin: 0 4px; }

.board-footer .pagination a.prev { margin-right: 12px!important; }
.board-footer .pagination a.next { margin-left: 12px!important; }

.board-footer .pagination a.prev-all,
.board-footer .pagination a.next-all { background-size: 12px 12px; }

.board-footer .pagination a.prev,
.board-footer .pagination a.next { background-size: 7px 12px; }

.board-footer .pagination a.prev-all { background-image: url(https://static.edmclass.com/common/ico-pag-prevall.svg); }

.board-footer .pagination a.prev { background-image: url(https://static.edmclass.com/common/ico-pag-prev.svg); }

.board-footer .pagination a.next-all { background-image: url(https://static.edmclass.com/common/ico-pag-nextall.svg); }

.board-footer .pagination a.next { background-image: url(https://static.edmclass.com/common/ico-pag-next.svg); }

.board-footer .pagination a.on { background-color: #EFF1F6; border: 1px solid #EFF1F6; color: #333333; min-width: 32px; }

.board-footer .pagination a:last-child { margin-right: 0!important; }


.ncsr::after { content: ' *'; color: #D53236; }


.view-footer { border-top: 1px solid #555555; }

.view-footer .view-btn-area { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }

.view-footer .view-btn-area .view-btn-left { margin-right: auto; }

.view-footer .view-btn-area .view-btn-right { margin-left: auto; }

.view-footer .view-btn-area [class^=board-btn] { display: flex; align-items: center; }

.view-cmt+.view-footer { border-top: 0; }

@media screen and (max-width:768px){
.view-wrapper { padding: 0 15px; margin-top: 32px; }

.view-header .view-title { height: auto; font-size:var(--f-heading1); line-height: 29px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-height: 58px; white-space: inherit; letter-spacing: -0.02px; }

.view-header .view-info { height: auto; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 0; }

.view-header .view-info dl { height: 44px; align-items: center; width: 100%; padding: 0 8px; gap: 0; }

.view-header .view-info dl dt { width: 88px; font-size:var(--f-size14); line-height: 24px; letter-spacing: -0.3px; }

.view-header .view-info dl dd { font-size:var(--f-size14); line-height: 24px; letter-spacing: -0.3px; }

.view { padding: 32px 8px; font-size:var(--f-size14); }

.view-cmt .view-cmt-total { padding: 0 10px; }

.view-cmt .view-cmt-contents { padding: 18px 10px; }
}

/* extension */
.extension-table tbody td { padding: 1rem !important; }
.extension-table .text-end { text-align: right !important;}
.extension-table .REJECTED { color: #F3393D; }
.extension-table .EXTENDED { color: #397af3; }

.product-with-thumbnail {display: flex; align-items: center;}
.product-with-thumbnail img {margin-right: 1rem;}
.product-with-thumbnail .product-name, .product-with-thumbnail .product-option-name {display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2;}
.product-with-thumbnail .product-name {font-weight: 600;}
.product-with-thumbnail .product-option-name {font-weight: 400;}


span.comment {font-size: 0.7em !important; color: red !important}


/* cdt */
.cdt_provide_type { font-size: 0.8em; color: #727272; }

/*임시 팝업*/
.notice-container { width: 100%; text-align: left;}
.notice-link {font-family: 'Noto Sans KR', sans-serif;font-weight: 400;font-size: 16px;line-height: 22px;letter-spacing: -0.02em;display: flex;align-items: center;width: 100%;position: relative;text-decoration: none;color: #0059FF !important;background-color: #EDF5FA; border-radius: 50px;padding: 16px 24px;margin-bottom: 15px;}
.notice-icon-left {width: 20px; height: 20px; margin : 4px;}
.notice-icon-right-wrapper {position: absolute;right: 24px;top: 50%;transform: translateY(-50%);}
.notice-icon-right {width: 24px;height: 24px;}


/*************************************************************
	hover effect
*************************************************************/
@media (hover: hover) and (pointer: fine) {
    .my-class-sub .bottomBtnWrap .go-list a:hover{background-color: var(--b-color3); color: var(--n-subTitle);}
	.my-class-sub .bottomBtnWrap .applyWrap input[type="submit"]:hover,
    .my-class-sub .bottomBtnWrap .delete a:hover{background-color: var(--n-subTitle);}



    .my-class-sub .bottomBtnWrap .bottomBtnLeft .applyWrap a:hover { border: none; color: var(--n-white); background: var(--p-color2);}
    .my-class-sub .bottomBtnWrap .bottomBtnLeft .delete a:hover { border: none; color: var(--n-white); background: var(--waring-color);}

    .my-class-sub .replyInputWrap .registration:hover{background-color: var(--p-color2); color: var(--n-white);}
}


/* 녹음 완료 버튼 스타일 - 크기 축소 및 애니메이션 완화 */
.uploadAudio {
    background: linear-gradient(135deg, #ff6b35, #f7931e) !important;
    color: white !important;
    border: none !important;
    font-weight: bold !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
    transition: all 0.3s ease !important;
    margin-left: 3px !important;
    margin-right: 3px;
}