@charset "utf-8";

/*
	popup
	:: default
	:: dim O, 닫기 버튼 X
	:: 각 페이지별 다른 디자인은 그 페이지 부모 class 속에 css 추가
*/

.popupOn{cursor: pointer;} /* 팝업을 열 영역에 클래스 추가 */
.popupWrap{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999999; display: none; overflow: hidden; }
.popupWrap .dim{background: rgba(0, 0, 0, 0.2); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; cursor: pointer;}
.popupWrap .popup{width: calc(100% - 32px); max-width: 328px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; background-color: var(--n-white); border-radius: var(--b-radius1); padding: 24px 24px 72px 24px; text-align: center; box-shadow: var(--box-shadow3); border: 1px solid var(--s-color1); }
.popupWrap .popup .title{font-size: var(--f-heading2); font-weight: 700; line-height: 26px; letter-spacing: -0.36px; }
.popupWrap .popup .title + *{margin-top: 16px;}
.popupWrap .popup .title + .info{font-size: 11px; line-height: 14px; letter-spacing: -0.22px; color: var(--n-info); white-space: nowrap; margin-top: 8px;}
.popupWrap .popup .scrollWrap{max-height: 280px;}

/* popup 속 콘텐츠가 텍스트만 있을 때 */
.popupWrap .popup.textPopup .textWrap{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; line-height: 20px; letter-spacing: -0.56px;}

/* 확인(버튼) */
.popupWrap .popup .popupClose{position: absolute; right: 0; top: auto; bottom: 0; width: 100%; height: 56px; background-color: var(--b-color4); background-image: none; border-radius: 0 0 16px 16px; text-align: center; font-size: var(--f-heading3); line-height: 56px; font-weight: 700; color: var(--n-info); display: block; transition: all 0.3s ease;}
.popupWrap .popup .popupClose:active{background-color: var(--p-color2); color: var(--n-white); }

/* 닫기 버튼 X */
.popupWrap .popup .closeIcon{display: none;  position: absolute; right: 16px; top: 16px; background-size: contain; background-repeat: no-repeat; cursor: pointer; background-image: url('https://static.edmclass.com/common/popupCloseBtn.svg'); background-position: center; width: 24px; height: 24px;}

/* 닫기 버튼 X (circle) */
.popupWrap .popup .closeIcon.type2{display: block; width: 32px; height: 32px; background-color: var(--n-subTitle); border-radius: 50%; background-image: url('https://static.edmclass.com/common/popupCloseBtn-circle.svg'); background-size: 16px;}

.popupWrap.active{display: block;}








/************************************************
	메인
************************************************/
#wrap.mainPage .popupWrap .mainPopup{position: relative; z-index: 2; height: 100%; display: flex; justify-content: center; align-items: center;}
#wrap.mainPage .popupWrap .mainPopup .closeIcon.type2{display: block; width: 32px; height: 32px; background-color: var(--n-subTitle); border-radius: 50%; background-image: url('https://static.edmclass.com/common/popupCloseBtn-circle.svg'); background-size: 16px; background-repeat: no-repeat; background-position: center; position: absolute; top: 16px; right: 16px; cursor: pointer;}
#wrap.mainPage .popupWrap .mainPopup .imgWrap {max-width: calc(100% - 32px); width: auto; height: auto; position: absolute; z-index: 2;}
#wrap.mainPage .popupWrap .mainPopup .imgWrap img{width: 100%; height: 100%; max-height: 70vh; border-radius: var(--b-radius1);  box-shadow: var(--box-shadow3); }





/************************************************
	마이페이지
************************************************/
/* 마이페이지 > 비밀번호 변경 팝업 */
#membership .myPage .popupWrap .popup .passwordWrap{margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--s-color1); text-align: left;}
#membership .myPage .popupWrap .popup .passwordWrap .box{display: flex; font-size: var(--f-body3); }
#membership .myPage .popupWrap .popup .passwordWrap .box + .box{margin-top: 16px;}
#membership .myPage .popupWrap .popup .passwordWrap .box p{width: 108px; padding-top: 13px;}
#membership .myPage .popupWrap .popup .passwordWrap .box label{width: calc(100% - 108px);}
#membership .myPage .popupWrap .popup .passwordWrap .box label .message{font-size: 11px; white-space: nowrap;}

/* 마이페이지 > 탈퇴 불가 팝업 */
#membership .myPage .popupWrap .popup.textPopup{height: 188px;}



/************************************************
	마이페이지 - 쿠폰내역
************************************************/
#membership .myPage.coupon .popupWrap .popup .couponDetail{border: 1px solid var(--s-color1); border-radius: 8px;}
#membership .myPage.coupon .popupWrap .popup .couponDetail + .couponDetail{margin-top: 16px;}
#membership .myPage.coupon .popupWrap .popup .couponDetail .title{font-size: var(--f-heading3); font-weight: 700; background-color: var(--b-color5); padding: 8px; border-bottom: 1px solid var(--s-color1); line-height: 22px; letter-spacing: -0.32px; border-radius: 8px 8px 0 0;}
#membership .myPage.coupon .popupWrap .popup .couponDetail .info{line-height: 20px; letter-spacing: -0.28px; font-size: var(--f-body1); padding: 16px;}
#membership .myPage.coupon .popupWrap .popup .couponDetail .info .dotTxt::before{width: 2px; height: 2px;}



/************************************************
	마이페이지 - 결제, 배송조회
************************************************/
/* 영수증 팝업 */
#membership .myPage.payment #receipt-popup .popupWrap .popup{padding-bottom: 56px;}
#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail{font-size: var(--f-body3); letter-spacing: -0.28px;}
#membership .myPage.payment #receipt-popup .popupWrap .popup .scrollWrap{max-height: 320px;}
#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail ul{ border-radius: 8px; overflow: hidden; text-align: left; border: 1px solid var(--s-color1);}
#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail ul li{display: flex;}
#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail ul li + li{border-top: 1px solid var(--s-color1);}
#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail ul li .tit{background-color: var(--b-color4); width: 96px; padding: 12px 16px; line-height: 16px; color: var(--n-info); font-weight: 700;}
#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail ul li .text{width: calc(100% - 96px); line-height: 20px; padding: 10px 16px; font-size: var(--f-body1);}
#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail ul li .cancelPrice{text-align: right; color: var(--p-color1); font-weight: 500;}
#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail ul li .price{text-align: right; font-weight: 500;}
#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail .btnWrap{text-align: right; padding: 8px 0 16px;}
#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail .btnWrap .btn{border: 1px solid var(--s-color1); border-radius: 4px; background-repeat: no-repeat; background-size: 16px; background-position: left 6px center; padding: 4px 6px 4px 22px; display: inline-block; line-height: 16px; font-weight: 500; color: var(--n-info);}
#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail .btnWrap .downloadBtn{background-image: url('https://static.edmclass.com/common/new_downloadIcon.svg'); }
#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail .btnWrap .printBtn{background-image: url('https://static.edmclass.com/common/new_printIcon.svg'); display: none;}
#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail .bottom{color: var(--n-info); line-height: 16px; padding-bottom: 24px;}
#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail .bottom .tit{font-size: var(--f-body1); line-height: 20px; color: var(--n-mainTitle);}
#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail .bottom .date{margin: 8px 0;}




/************************************************
	내 강의실
************************************************/
.popupWrap.myClass{width: 100%; display: block; visibility: hidden; }
.popupWrap.myClass .popup{padding-bottom: 34px; width: 100%; max-width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; bottom: 0; top: auto; left: 0; padding-right: 24px; padding-top: 41px;  transform: translateY(100%); transition: transform 0.5s ease;}
.popupWrap.myClass.active{visibility: visible;}
.popupWrap.myClass.active .popup{transform: translateY(0);}
.popupWrap.myClass .popup::after{content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; border-radius: 100px; background-color: var(--n-info2);}
.popupWrap.myClass .popup [class^=icon] { display: block; width: 40px; height: 40px; background-repeat: no-repeat; background-size: contain; background-position: center; margin: 4px auto 0;}
.popupWrap.myClass .popup .icon-c { background-image: url('https://static.edmclass.com/ielts/my_class/alert-icon-c.svg'); }
.popupWrap.myClass .popup .icon-e { background-image: url('https://static.edmclass.com/ielts/my_class/alert-icon-e.svg'); }
.popupWrap.myClass .popup .icon-q { background-image: url('https://static.edmclass.com/ielts/my_class/alert-icon-q.svg'); }
.popupWrap.myClass .popup .textWrap .caption{font-size: 11px; color: var(--n-info); margin-top: 8px; line-height: 14px; letter-spacing: -0.22px;}
.popupWrap.myClass .popup .textWrap .caption + .info,
.popupWrap.myClass .popup .textWrap .title + .info{margin-top: 16px;}
.popupWrap.myClass .popup .textWrap .info{font-size: var(--f-body1); color: var(--n-subTitle); }
.popupWrap.myClass .popup .textWrap .info *{line-height: 20px; letter-spacing: -0.28px;}
.popupWrap.myClass .popup .textWrap .info .scrollWrap{max-height: 100px; padding-bottom: 16px;}
.popupWrap.myClass .popup .textWrap .grayBox .listTitle{display: none;}
.popupWrap.myClass .popup .textWrap .info .dotList{text-align: left; }
.popupWrap.myClass .popup .textWrap .info .dotList > li {padding-left: 10px; line-height: 20px; letter-spacing: -0.28px; position: relative;}
.popupWrap.myClass .popup .textWrap .info .dotList > li::before{content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background-color: var(--n-subTitle);}
.popupWrap.myClass .popup .textWrap .info .dotList > li + li{margin-top: 4px;}

/* 취소, 확인 (투 버튼 디자인) */
.popupWrap.myClass .popup .buttonWrap{justify-content: space-between; max-width: 312px; margin: 0 auto; padding-top: 16px;}
.popupWrap.myClass .popup .buttonWrap .btn{text-align: center; font-size: var(--f-heading3); font-weight: 700; line-height: 52px; letter-spacing: -0.32px; width: calc(50% - 4px); height: 52px; border-radius: var(--b-radius0); color: #fff; background-color: var(--p-color2);}
.popupWrap.myClass .popup .buttonWrap .btn.cancel{background-color: var(--b-color4); color: var(--n-info);}
.popupWrap.myClass .popup .buttonWrap .btn:disabled,
.popupWrap.myClass .popup .buttonWrap .btn.disabled{background-color: var(--b-color4); color: var(--n-deactivate); border-color: var(--b-color4); touch-action: none; pointer-events: none;}


/************************************************
	수강 신청
************************************************/
.popupWrap-lecture-comparison{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999999; display: none; overflow: hidden; font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px;}
.popupWrap-lecture-comparison .dim{background: rgba(0, 0, 0, 0.2); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; cursor: pointer;}
.popupWrap-lecture-comparison button{position: static;}
.popupWrap-lecture-comparison .popup{width: calc(100% - 32px); max-width: 328px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; background-color: var(--n-white); border-radius: var(--b-radius1); padding: 24px 24px 56px 24px; text-align: center; box-shadow: var(--box-shadow3); padding-left: 24px; padding-right: 24px; max-height: calc(100% - 40px);}
.popupWrap-lecture-comparison .popup .textWrap > .scrollWidth > .scrollWrap{max-height: 440px; height: calc(100vh - 200px); height: calc((var(--vh, 1vh) * 100) - 200px); padding-top: 16px; padding-bottom: 16px;}
.popupWrap-lecture-comparison .popup .title{font-size: var(--f-heading2); font-weight: 700; line-height: 26px; letter-spacing: -0.36px; border-bottom: 1px solid var(--s-color1); padding-bottom: 16px; /*margin-bottom: 16px;*/}
.popupWrap-lecture-comparison .popup .info-text{padding: 0 8px; width: 100%; margin-bottom: 8px; text-align: left;}
.popupWrap-lecture-comparison .popup .selectArea .dropDownMenu{width: calc(50% - 4px); font-size: var(--f-body1); height: 40px;}
.popupWrap-lecture-comparison .popup .comparison-table{width: 100%; margin-top: 8px; overflow-x: auto; border-radius: 12px; border: 1px solid var(--s-color1); text-align: left;}
.popupWrap-lecture-comparison .popup .comparison-table::-webkit-scrollbar{display: none;}
.popupWrap-lecture-comparison .popup .comparison-table table{width: 100%; }
.popupWrap-lecture-comparison .popup .comparison-table table th,
.popupWrap-lecture-comparison .popup .comparison-table table td{padding: 8px 5px; border-collapse: collapse;}
.popupWrap-lecture-comparison .popup .comparison-table table th{background-color: var(--b-color4); font-weight: 700; color: var(--n-info); position: sticky; left: 0; z-index: 2;}
.popupWrap-lecture-comparison .popup .comparison-table table th::after{content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: var(--s-color1);}
.popupWrap-lecture-comparison .popup .comparison-table table th{width: 60px;}
.popupWrap-lecture-comparison .popup .comparison-table table td{width: calc((100% - 60px) / 2); min-width: 110px;}
.popupWrap-lecture-comparison .popup .comparison-table table thead{position: relative;}
.popupWrap-lecture-comparison .popup .comparison-table table thead::before{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--s-color1); z-index: 3;}
.popupWrap-lecture-comparison .popup .comparison-table table thead th,
.popupWrap-lecture-comparison .popup .comparison-table table thead td{padding-top: 12px; padding-bottom: 12px;}
.popupWrap-lecture-comparison .popup .comparison-table table thead td{background-color: var(--b-color5); text-align: center; }
.popupWrap-lecture-comparison .popup .comparison-table table thead td:nth-last-of-type(2){border-right: 1px solid var(--s-color1);}
.popupWrap-lecture-comparison .popup .comparison-table table tbody td:nth-last-of-type(2){border-right: 1px solid var(--s-color1);}
.popupWrap-lecture-comparison .popup .comparison-table table tbody td{vertical-align: text-top;}
.popupWrap-lecture-comparison .popup .comparison-table table tbody .iconBox{justify-content: center; display: flex;}
.popupWrap-lecture-comparison .popup .comparison-table table tbody .iconBox .icon{background-color: var(--b-color5); border-radius: var(--b-radius0); font-size: 11px; width: calc(50% - 2px); padding: 4px 0; line-height: 14px; letter-spacing: -0.22px; min-height: 60px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; width: 48px;}
.popupWrap-lecture-comparison .popup .comparison-table table tbody .iconBox .icon + .icon{margin-left: 4px;}
.popupWrap-lecture-comparison .popup .comparison-table table tbody .iconBox .icon figure{width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; background-position: center; margin: 0 auto;}
.popupWrap-lecture-comparison .popup .comparison-table table tbody .iconBox .icon p{width: 100%;}
.popupWrap-lecture-comparison .popup .comparison-table table tbody .lecture-composition{padding-right: 1px;}
.popupWrap-lecture-comparison .popup .comparison-table table tbody .lecture-composition p{position: relative; padding-left: 5px;}
.popupWrap-lecture-comparison .popup .comparison-table table tbody .lecture-composition p::before{content: ''; position: absolute; width: 2px; height: 2px; border-radius: 50%; background-color: var(--n-subTitle); left: 0; top: 8px;}
.popupWrap-lecture-comparison .popup .bottom-text{color: var(--n-info); font-size: 11px; text-align: right; margin-top: 8px; width: 100%;}
/* 닫기 버튼 X */
.popupWrap-lecture-comparison .popup .closeIcon{display: none;  position: absolute; right: 16px; top: 16px; background-size: contain; background-repeat: no-repeat; cursor: pointer; background-image: url('https://static.edmclass.com/common/popupCloseBtn.svg'); background-position: center; width: 24px; height: 24px;}
/* 확인(버튼) */
.popupWrap-lecture-comparison .popup .popupClose{position: absolute; right: 0; top: auto; bottom: 0; width: 100%; height: 56px; background-color: var(--b-color4); background-image: none; border-radius: 0 0 16px 16px; text-align: center; font-size: var(--f-heading3); line-height: 56px; font-weight: 700; color: var(--n-info); display: block; transition: all 0.3s ease;}
.popupWrap-lecture-comparison .popup .popupClose:active{background-color: var(--p-color2); color: var(--n-white); }
.popupWrap-lecture-comparison.active{display: block;}



/************************************************
	내 강의실 > 수강증 팝업 (인강, 어학원 공통 사용)
************************************************/
body .popupWrap-common{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999999; display: none; overflow: hidden; }
body .popupWrap-common .dim{background: rgba(0, 0, 0, 0.2); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; cursor: pointer;}
body .popupWrap-common .popup{width: calc(100% - 32px); max-width: 328px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; background-color: var(--n-white); border-radius: var(--b-radius1); padding: 24px 24px 80px 24px; text-align: center; box-shadow: var(--box-shadow3); color: #40404E; font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; }
body .popupWrap-common .popup .title{font-size: var(--f-heading2); font-weight: 700; line-height: 26px; letter-spacing: -0.36px; color: #40404E !important;}
body .popupWrap-common .popup .title + *{margin-top: 16px;}
body .popupWrap-common .popup .title + .info{font-size: 11px; line-height: 14px; letter-spacing: -0.22px; color: var(--n-info); white-space: nowrap; margin-top: 8px;}
body .popupWrap-common .popup .textWrap > .scrollWidth > .scrollWrap{max-height: 214px; height: calc(100vh - 400px); height: calc((var(--vh, 1vh) * 100) - 400px);}
/* 확인(버튼) */
body .popupWrap-common .popup .popupClose{position: absolute; right: 0; top: auto; bottom: 0; width: 100%; height: 56px; background-color: var(--b-color4); background-image: none; border-radius: 0 0 16px 16px; text-align: center; font-size: var(--f-heading3); line-height: 56px; font-weight: 700; color: var(--n-info); display: block; transition: all 0.3s ease;}
body .popupWrap-common .popup .popupClose:active{background-color: var(--p-color2); color: var(--n-white); }
/* 닫기 버튼 X */
body .popupWrap-common .popup .closeIcon{display: none;  position: absolute; right: 16px; top: 16px; background-size: contain; background-repeat: no-repeat; cursor: pointer; background-image: url('https://static.edmclass.com/common/popupCloseBtn.svg'); background-position: center; width: 24px; height: 24px;}
/* 수강증 팝업 */
.certificateArea .popupWrap-common .popup .textWrap > .scrollWidth > .scrollWrap{height: calc(100vh - 186px); height: calc((var(--vh, 1vh) * 100) - 186px); max-height: 453px;}
.certificateArea .popupWrap-common .popup .infoWrap{text-align: left; border: 1px solid var(--s-color1); border-radius: var(--b-radius0); margin-top: 8px !important;}
.certificateArea .popupWrap-common .popup .infoWrap li{display: flex;}
.certificateArea .popupWrap-common .popup .infoWrap li + li{border-top: 1px solid var(--s-color1);}
.certificateArea .popupWrap-common .popup .infoWrap .subject{background-color: var(--b-color4); width: 96px; font-weight: 700; color: var(--n-info); font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; padding: 12px 16px;}
.certificateArea .popupWrap-common .popup .infoWrap .content{width: calc(100% - 96px); padding: 10px 16px;}
.certificateArea .popupWrap-common .popup .infoWrap .content.price{text-align: right; font-weight: 500;}
.certificateArea .popupWrap-common .popup .actionBtn{text-align: right; margin: 8px auto 16px;}
.certificateArea .popupWrap-common .popup .actionBtn .btn{border: 1px solid var(--s-color1); border-radius: 4px; font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; font-weight: 500; color: var(--n-info); padding: 4px 6px 4px 22px; display: inline-block; background-repeat: no-repeat; background-size: 16px; background-position: left 6px center; transition: all 0.3s ease; text-decoration: none;}
.certificateArea .popupWrap-common .popup .downloadBtn .btn{background-image: url('https://static.edmclass.com/common/board/file_down_gray.svg');}
.certificateArea .popupWrap-common .popup .printBtn .btn{background-image: url('https://static.edmclass.com/common/print.svg');}
.certificateArea .popupWrap-common .popup .bottom-text,
.my-class-wrapper .wrapper .certificateArea .popupWrap-common .popup .bottom-text{color: #1D1D1F; font-size: inherit;}
.certificateArea .popupWrap-common .popup .date,
.certificateArea .popupWrap-common .popup .company,
.my-class-wrapper .wrapper .certificateArea .popupWrap-common .popup .date,
.my-class-wrapper .wrapper .certificateArea .popupWrap-common .popup .company{color: var(--n-info); font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px;}
.certificateArea .popupWrap-common .popup .date,
.my-class-wrapper .wrapper .certificateArea .popupWrap-common .popup .date{margin: 8px 0;}



/************************************************
	단체 수강 문의
************************************************/
/* 팝업(default 폰트 사이즈/팝업 사이즈즈) */
#wrap.boardPage.inquiry-group .popupWrap{font-size: var(--f-body1);}
#wrap.boardPage.inquiry-group .popupWrap .popup.textPopup{max-width: 360px; padding-top: 16px;}
#wrap.boardPage.inquiry-group .popupWrap .popup.textPopup .textWrap{min-height: 100px;}



/************************************************
	레벨 테스트 결과
************************************************/
#wrap.level-test .bottom-sheetArea{display: none;}
#wrap.level-test .bottom-sheetArea.show{display: block;}
#wrap.level-test .bottom-sheet.type2.verChange .slidingWrap{height: 455px; overflow: initial; padding: 41px 8px 34px; transition: all 0.5s ease; }
#wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .stopPopup{position: absolute; top: -27px; left: 0; font-size: var(--f-body4); line-height: 14px; letter-spacing: -0.22px; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; width: 100%;}
#wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .stopPopup .left{color: var(--n-white); }
#wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .stopPopup .right{width: 16px; height: 16px; position: static; transform: none; background-color: transparent; margin: initial; border-radius: 0;}
#wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .stopPopup .right svg{width: 100%; }
#wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .event{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; text-align: center;}
#wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .event img{width: 100%; border-radius: var(--b-radius0); max-width: 312px;}
#wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .event p{margin-top: 16px;}
#wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .buttonWrap{padding-left: 0; padding-right: 0;}
#wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .buttonWrap .btn{width: 100%; position: static; transform: none;}



/************************************************
	레벨테스트 정답 확인
************************************************/
#wrap.level-test.result .popupWrap .popup{padding-bottom: 56px; padding-left: 16px; padding-right: 16px;}
#wrap.level-test.result .popupWrap .popup .textWrap .title {font-size: var(--f-heading2); font-weight: 700; line-height: 26px; letter-spacing: -0.36px; border-bottom: 1px solid var(--s-color1); padding-bottom: 16px;}
#wrap.level-test.result .popupWrap .popup .textWrap > .scrollWidth {margin-top: 0;}
#wrap.level-test.result .popupWrap .popup .textWrap > .scrollWidth > .scrollWrap{max-height: 440px; height: calc(100vh - 200px); height: calc((var(--vh, 1vh) * 100) - 200px); padding-top: 16px; padding-bottom: 16px;}
#wrap.level-test.result .popupWrap .popup .listWrap{border-radius: var(--b-radius3); overflow: hidden; border: 1px solid var(--s-color1); font-size: var(--f-body3); letter-spacing: -0.24px; text-align: center; line-height: 16px;}
#wrap.level-test.result .popupWrap .popup .subject{background-color: var(--b-color4); color: var(--n-info); font-weight: 700; height: 40px; line-height: 40px; display: flex; border-bottom: 1px solid var(--s-color1);}
#wrap.level-test.result .popupWrap .popup .subject .box.left{width: 71%;}
#wrap.level-test.result .popupWrap .popup .subject .box.right{width: 29%;}
#wrap.level-test.result .popupWrap .popup .list li{display: flex; align-items: center;}
#wrap.level-test.result .popupWrap .popup .list li + li{border-top: 1px solid var(--s-color1);}
#wrap.level-test.result .popupWrap .popup .list li .left{padding: 8px; width: 71%;}
#wrap.level-test.result .popupWrap .popup .list li .right{padding: 8px 5px; width: 29%;}
#wrap.level-test.result .popupWrap .popup .list li span{display: block; color: var(--n-info);}
#wrap.level-test.result .popupWrap .popup .list .sub-subject{height: 32px; line-height: 32px; display: block; background-color: var(--b-color5);}
#wrap.level-test.result .popupWrap .popup .list em{color: var(--waring-color); display: block;}
#wrap.level-test.result .popupWrap .popup .list2 li .left{text-align: left;}
#wrap.level-test.result .popupWrap .popup .list2 li .left em{display: inline-block;}
#wrap.level-test.result .popupWrap .popup .list3 .left,
#wrap.level-test.result .popupWrap .popup .list3 .right{text-align: left;}
#wrap.level-test.result .popupWrap .popup .list3 li .left{width: 40px; padding: 8px 0; text-align: center;}
#wrap.level-test.result .popupWrap .popup .list3 li .right{width: calc(100% - 40px); padding-left: 8px; padding-right: 8px;}
/* 어학원 */
.academy #wrap.level-test.result .popupWrap .popup .textWrap > .scrollWidth > .scrollWrap{padding-top: 8px;}
.academy #wrap.level-test.result .popupWrap .popup .download{margin-bottom: 8px; text-align: right;}
.academy #wrap.level-test.result .popupWrap .popup .downloadBtn{background-image: url('https://static.edmclass.com/common/new_downloadIcon.svg'); background-repeat: no-repeat; background-size: 16px; border: 1px solid var(--s-color1); border-radius: 4px; background-repeat: no-repeat; background-size: 16px; background-position: left 6px center; padding: 4px 6px 4px 22px; display: inline-block; line-height: 16px; font-weight: 500; color: var(--n-info); font-size: var(--f-body3); letter-spacing: -0.24px;}



/************************************************
	내 강의실 > CDT 모의고사 > 내용보기 > 각 과목별 팝업
************************************************/
.classRoomPage .popupWrap body,
.classRoomPage .popupWrap input,
.classRoomPage .popupWrap button,
.classRoomPage .popupWrap li,
.classRoomPage .popupWrap p { line-height: inherit; letter-spacing: inherit; }
.classRoomPage .popupWrap .popup{width: 600px; max-width: initial; background-color: var(--b-color5); text-align: left; padding: 56px 10px 32px;}
.classRoomPage .popupWrap .popup .closeIcon{display: block;}
.classRoomPage .popupWrap .popup .popupClose { background-color: transparent; color: var(--p-color2); border: 1px solid var(--p-color2); width: auto; height: auto; position: static; margin: 0 auto; border-radius: 8px; font-size: var(--f-body2); padding: 6px 40px; line-height: 20px; letter-spacing: -0.26px; font-weight: 500; margin-top: 32px; }
/* 콘텐츠 그림자 때문에 scrollWidth, scrollWrap 스타일 수정 필요 */
/* .classRoomPage .popupWrap .popup .scrollWidth{width: calc(100% - 29px);} */
.classRoomPage .popupWrap .popup .scrollWidth{width: 100%;}
.classRoomPage .popupWrap .popup .scrollWrap{max-height: 644px; height: calc(50vh + 104px); /*padding: 0 3px 16px 37px;*/  padding: 0 29px 16px 37px;}
.classRoomPage .popupWrap .popup .playBarWrap{display: flex; align-items: center; font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; column-gap: 16px;}
.classRoomPage .popupWrap .popup .playBarWrap .playBar{display: flex; align-items: center; background-color: var(--b-color5); border-radius: 40px; height: 44px; width: 314px; padding: 10px 12px; column-gap: 8px;}
.classRoomPage .popupWrap .popup .playBarWrap .playBar .time{display: flex; align-items: center;}
.classRoomPage .popupWrap .popup .playBarWrap .playBar .timeline{width: 178px; height: 8px; border-radius: var(--b-radius0); background-color: var(--b-color3); overflow: hidden; position: relative; cursor: pointer;}
.classRoomPage .popupWrap .popup .playBarWrap .playBar .timeline span{width: 0; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--p-color2); border-radius: var(--b-radius0); }
.classRoomPage .popupWrap .popup .playBarWrap .btn{width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; background-position:  center;}
.classRoomPage .popupWrap .popup .playBarWrap .control{background-image : url('https://static.edmclass.com/common/my_class/control-play.svg');}
.classRoomPage .popupWrap .popup .playBarWrap .control.pause{background-image : url('https://static.edmclass.com/common/my_class/control-pause.svg');}
.classRoomPage .popupWrap .popup .playBarWrap .speaker{background-image: url('https://static.edmclass.com/common/my_class/speaker-default.svg');}
.classRoomPage .popupWrap .popup .playBarWrap .speaker.mute{background-image: url('https://static.edmclass.com/common/my_class/speaker-mute.svg');}
.classRoomPage .popupWrap .popup .playBarWrap .speaker.active{background-image: url('https://static.edmclass.com/common/my_class/speaker-active.svg');}
.classRoomPage .popupWrap .popup .playBarWrap .download {background-image: url('https://static.edmclass.com/common/my_class/download.svg');}
.classRoomPage .popupWrap .popup .textWrap .title-1{font-size: var(--f-heading1); font-weight: 700; line-height: 28px; letter-spacing: -0.4px; color: var(--n-mainTitle); display: flex; align-items: flex-end; margin-bottom: 16px;}
.classRoomPage .popupWrap .popup .textWrap .title-1 span{font-size: var(--f-body2); font-weight: 700; letter-spacing: -0.26px; height: 24px; padding: 0 8.5px; border-radius: 100px; display: inline-block; line-height: 1.7; margin-left: 8px;}
.classRoomPage .popupWrap .popup .textWrap .title-2{font-size: var(--f-heading2); font-weight: 700; color: var(--n-mainTitle); line-height: 26px; letter-spacing: -0.36px; margin-bottom: 16px;}
.classRoomPage .popupWrap .popup .textWrap .sub-title{font-size: var(--f-body1); font-weight: 700; line-height: 20px; letter-spacing: -0.28px; margin-bottom: 8px;}
.classRoomPage .popupWrap .popup .textWrap .small-text{font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; margin-bottom: 16px;}
.classRoomPage .popupWrap .popup .textWrap .tableWrap{overflow-x: auto; width: 100%;}
.classRoomPage .popupWrap .popup .textWrap .tableWrap::-webkit-scrollbar{display: block; height: 5px;}
.classRoomPage .popupWrap .popup .textWrap .tableWrap::-webkit-scrollbar-track{background: transparent;}
.classRoomPage .popupWrap .popup .textWrap .tableWrap::-webkit-scrollbar-thumb{background: var(--b-color2); border-radius: 100px;}
.classRoomPage .popupWrap .popup .textWrap table{font-size: var(--f-body3); letter-spacing: -0.24px; line-height: 16px; width: 729px; text-align: center; border-bottom: 1px solid var(--s-color1);}
.classRoomPage .popupWrap .popup .textWrap table tr{border-top: 1px solid var(--s-color1);}
.classRoomPage .popupWrap .popup .textWrap table th,
.classRoomPage .popupWrap .popup .textWrap table td{height: 40px; width: 46px;}
.classRoomPage .popupWrap .popup .textWrap table .point{position: relative;}
.classRoomPage .popupWrap .popup .textWrap table th.point::after{content: ''; position: absolute; top: 0; left: 0; width: calc(100% - 2px); height: 100%; border-radius: var(--b-radius0) var(--b-radius0) 0 0; border: 1px solid var(--e-listening-color); border-bottom: none;}
.classRoomPage .popupWrap .popup .textWrap table td.point::after{content: ''; position: absolute; bottom: 0; left: 0; width: calc(100% - 2px); height: 100%; border-radius: 0 0 var(--b-radius0) var(--b-radius0); border: 1px solid var(--e-listening-color); border-top: none;}
.classRoomPage .popupWrap .popup .textWrap table th{font-weight: 700;}
.classRoomPage .popupWrap .popup .textWrap table thead{color: var(--n-info);}
.classRoomPage .popupWrap .popup .textWrap table thead th{background-color: var(--b-color5);}
.classRoomPage .popupWrap .popup .textWrap table thead th.first{background-color: var(--b-color4);}
.classRoomPage .popupWrap .popup .textWrap table tbody .first{background-color: var(--b-color5);}
.classRoomPage .popupWrap .popup .textWrap table .first{width: 82px !important; position: sticky; left: 0; position: -webkit-sticky;}
.classRoomPage .popupWrap .popup .textWrap .roundBox{border-radius: var(--b-radius3); background-color: var(--n-white); box-shadow: var(--box-shadow2); padding: 16px;}
.classRoomPage .popupWrap .popup .textWrap .infoArea + .infoArea{margin-top: 40px;}
.classRoomPage .popupWrap .popup .textWrap .infoArea .info + .info{margin-top: 16px;}
.classRoomPage .popupWrap .popup .textWrap .infoArea .sectionBtnWrap{display: grid; grid-template-columns: repeat(4,1fr); column-gap: 10px; margin-bottom: 16px;}
.classRoomPage .popupWrap .popup .textWrap .infoArea .sectionBtnWrap .btn{height: 64px; background-color: var(--b-color4); border-radius: var(--b-radius3); font-size: var(--f-body2); line-height: 20px; letter-spacing: -0.26px; padding: 12px 8px 12px 14px; position: relative;}
.classRoomPage .popupWrap .popup .textWrap .infoArea .sectionBtnWrap .btn b{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; font-weight: 700;}
.classRoomPage .popupWrap .popup .textWrap .infoArea .sectionBtnWrap .btn.active{background-color: var(--n-subTitle); color: var(--n-white);}
/* test result */
.classRoomPage .popupWrap .popup .textWrap .infoArea.result .scoreWrap{height: 76px; text-align: center; column-gap: 16px; font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.result .scoreWrap .roundBox{height: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column; padding: 0;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.result .scoreWrap .band{width: 86px; border: 1px solid var(--p-color2);}
.classRoomPage .popupWrap .popup .textWrap .infoArea.result .scoreWrap .band .score{font-size: var(--f-heading1); font-weight: 700; color: var(--p-color2); line-height: 28px; letter-spacing: -0.4px;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.result .scoreWrap .other{display: grid; grid-template-columns: repeat(5,1fr); width: calc(100% - 102px); padding: 0 12px;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.result .scoreWrap .other li + li{position: relative;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.result .scoreWrap .other li + li::before{content: ''; position: absolute; left: 0; width: 1px; height: 24px; background-color: var(--s-color1); top: 50%; transform: translateY(-50%);}
.classRoomPage .popupWrap .popup .textWrap .infoArea.result .scoreWrap .other .score{font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px;}
/* 문제 다시보기 */
.classRoomPage .popupWrap .popup .textWrap .infoArea.reviewing .sectionBtnWrap .btn i{background-image: url('https://static.edmclass.com/common/my_class/cdt-reviewing-default.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 24px; height: 24px; display: inline-block; position: absolute; top: 50%; right: 8px; transform: translateY(-50%);}
.classRoomPage .popupWrap .popup .textWrap .infoArea.reviewing .sectionContents{background-color: var(--b-color5); border-radius: var(--b-radius3); height: 240px;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.reviewing .sectionPageBtn{justify-content: center; padding: 16px 0 0;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.reviewing .sectionPageBtn .btn{height: 40px; width: 130px; border-radius: var(--b-radius0); border: 1px solid var(--p-color2); text-align: center; margin: 0 4px; font-size: var(--f-body1); font-weight: 500; letter-spacing: -0.28px; background-color: var(--n-white); color: var(--p-color2); line-height: 2.6;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.reviewing .sectionPageBtn .btn.next{background-color: var(--p-color2); color: var(--n-white);}
/* 정답 확인하기 */
.classRoomPage .popupWrap .popup .textWrap .infoArea.checkOut .sectionBtnWrap .btn{text-align: center; padding: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; flex-wrap: wrap;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.checkOut .box{font-size: var(--f-body3); text-align: center; line-height: 16px; letter-spacing: -0.24px;}
/* .classRoomPage .popupWrap .popup .textWrap .infoArea.checkOut .box + .box{margin-top: 12px;} */
.classRoomPage .popupWrap .popup .textWrap .infoArea.checkOut .box b{color: var(--n-info); font-weight: 700; line-height: inherit; letter-spacing: inherit;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.checkOut .box .top{background-color: var(--b-color4); border-top: 1px solid var(--s-color1); border-bottom: 1px solid var(--s-color1);}
.classRoomPage .popupWrap .popup .textWrap .infoArea.checkOut .box .style1{display: grid; grid-template-columns: auto 180px 180px 66px; line-height: 1.2; padding: 8px;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.checkOut .box .explanation{padding: 0 8px;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.checkOut .box .explanation .wrap{background-color: var(--b-color5); border-radius: var(--b-radius0); display: flex; padding: 12px;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.checkOut .box .explanation b{width: 34px;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.checkOut .box .explanation p{text-align: left; width: calc(100% - 34px);}
.classRoomPage .popupWrap .popup .textWrap .infoArea.checkOut .box .error{color: var(--waring-color);}
.classRoomPage .popupWrap .popup .textWrap .infoArea.checkOut .box:last-child{padding-bottom: 12px; border-bottom: 1px solid var(--s-color1);}
/* 내 답안 */
.classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .title-2{margin-bottom: 5px;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .partWrap .part{align-items: center;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .partWrap .part + .part{margin-top: 16px;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .partWrap .part b{width: 72px;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .textAnswer{border: 1px solid var(--s-color1); font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; padding: 0; overflow: hidden;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .textAnswer ul + ul{border-top: 1px solid var(--s-color1);}
.classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .textAnswer ul li{display: grid; grid-template-columns: 48px 1fr;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .textAnswer ul li.subject{background-color: var(--b-color4); text-align: center; height: 32px; line-height: 32px; color: var(--n-info); border-bottom: 1px solid var(--s-color1); padding: 0;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .textAnswer ul li:not(.subject) .task{padding: 8px 0; text-align: center;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .textAnswer ul li:not(.subject) .my-a,
.classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .textAnswer ul li:not(.subject) .right-a{padding: 8px 12px;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .textAnswer ul .right-a{display: none;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .textAnswer ul.yes-answer li{grid-template-columns: 48px 1fr 1fr;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .textAnswer ul.yes-answer .right-a{display: block;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .textAnswer ul li .right-a.blur{position: relative; }
.classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .textAnswer ul li .right-a.blur .viewBtn{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; background-color: var(--p-color2); color: var(--n-white); font-size: var(--f-body1); font-weight: 500; width: 103px; height: 40px; text-align: center; border-radius: var(--b-radius0); line-height: 2.7; letter-spacing: -0.28px;}
.classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .textAnswer ul li .right-a.blur::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(5px); background-color: rgba(255,255,255,0.1); z-index: 1;}

/* listening */
.classRoomPage .popupWrap .popup.listening .textWrap .title-1 span,
.classRoomPage .popupWrap .popup .popupInfo.listening .textWrap .title-1 span{color: var(--e-listening-color); background-color: var(--e-listening-color-bg);}
/* reading */
.classRoomPage .popupWrap .popup.reading .textWrap .title-1 span,
.classRoomPage .popupWrap .popup .popupInfo.reading .textWrap .title-1 span{color: var(--e-reading-color); background-color: var(--e-reading-color-bg);}
.classRoomPage .popupWrap .popup.reading .textWrap table th.point::after,
.classRoomPage .popupWrap .popup .popupInfo.reading .textWrap table th.point::after{border-color: var(--e-reading-color);}
.classRoomPage .popupWrap .popup.reading .textWrap table td.point::after,
.classRoomPage .popupWrap .popup .popupInfo.reading .textWrap table td.point::after{border-color: var(--e-reading-color);}
.classRoomPage .popupWrap .popup.reading .textWrap .infoArea .sectionBtnWrap,
.classRoomPage .popupWrap .popup .popupInfo.reading .textWrap .infoArea .sectionBtnWrap{grid-template-columns: repeat(3,1fr);}
.classRoomPage .popupWrap .popup.reading .textWrap .infoArea.checkOut .sectionBtnWrap .btn,
.classRoomPage .popupWrap .popup .popupInfo.reading .textWrap .infoArea.checkOut .sectionBtnWrap .btn{height: 44px; flex-wrap: nowrap; flex-direction: initial;}
/* speaking */
.classRoomPage .popupWrap .popup.speaking .textWrap .title-1 span,
.classRoomPage .popupWrap .popup .popupInfo.speaking .textWrap .title-1 span{color: var(--e-speaking-color); background-color: var(--e-speaking-color-bg);}
/* writing */
.classRoomPage .popupWrap .popup.writing .textWrap .title-1 span,
.classRoomPage .popupWrap .popup .popupInfo.writing .textWrap .title-1 span{color: var(--e-writing-color); background-color: var(--e-writing-color-bg);}

/* 전체 결과 팝업 (Overall > 전체결과보기 버튼 클릭) */
.classRoomPage .popupWrap.allResult .popup .popupInfo{display: none;}
.classRoomPage .popupWrap.allResult .popup .popupInfo.active{display: block;}
.classRoomPage .popupWrap .popup .scrollWrap{height: calc(50vh + 80px);}
.classRoomPage .popupWrap.allResult .popup .tabWrap{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; column-gap: 32px; padding: 0 37px; border-bottom: 1px solid var(--s-color1); margin-bottom: 24px;}
.classRoomPage .popupWrap.allResult .popup .tabWrap .tabBtn{padding: 14px 0; color: var(--n-info);}
.classRoomPage .popupWrap.allResult .popup .tabWrap .tabBtn.active{color: var(--n-mainTitle); position: relative;}
.classRoomPage .popupWrap.allResult .popup .tabWrap .tabBtn.active::after{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--n-mainTitle);}



/************************************************
	내 강의실 > 기기 관리
************************************************/
.myClassPage .popupWrap.deviceManagement .popup{padding-bottom: 56px; max-height: calc(100% - 40px);}
.myClassPage .popupWrap.deviceManagement .popup .textWrap > .scrollWidth > .scrollWrap{max-height: 318px; height: calc(100vh - 285px); height: calc((var(--vh, 1vh) * 100) - 285px);}
.myClassPage .popupWrap.deviceManagement .popup .scrollWidth{border-top: 1px solid var(--s-color1);}
.myClassPage .popupWrap.deviceManagement .popup .info{white-space: normal; color: var(--n-subTitle); text-align: left; font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; padding: 16px 0;}
.myClassPage .popupWrap.deviceManagement .popup .info .dotList > li{position: relative; padding-left: 6px;}
.myClassPage .popupWrap.deviceManagement .popup .info .dotList > li::before{content: ''; position: absolute; top: 9px; left: 0; width: 2px; height: 2px; border-radius: 50%; background-color: var(--n-subTitle);}
.myClassPage .popupWrap.deviceManagement .popup .info .user-info{background-color: var(--b-color5); padding: 12px; border-radius: var(--b-radius0); margin-top: 16px; font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; color: var(--n-info); text-align: center;}
.myClassPage .popupWrap.deviceManagement .popup .info .user-info p{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; color: var(--n-mainTitle); margin-bottom: 2px;}
.myClassPage .popupWrap.deviceManagement .popup .info .user-info .device-delete{margin-top: 2px;}
.myClassPage .popupWrap.deviceManagement .popup .info .user-info .device-delete .device{display: flex; justify-content: space-between; align-items: center; font-size: 11px; line-height: 14px; letter-spacing: -0.22px;}
.myClassPage .popupWrap.deviceManagement .popup .info .user-info .device-delete .device + .device{margin-top: 4px;}
.myClassPage .popupWrap.deviceManagement .popup .info .user-info .device-delete .device a{margin: 0; color: var(--waring-color); font-size: inherit; line-height: inherit; letter-spacing: inherit;}



/************************************************
	HND > 상담신청
************************************************/
.hnd .popup.contact{padding: 24px 32px; max-width: 360px; border: none; border-radius: var(--b-radius3);}
.hnd .popup.contact .message.error{color: #FC1D01; font-size: var(--f-body3); line-height: 150%; letter-spacing: -0.12px; margin-top: 4px;}
.hnd .popup.contact .scrollWrap{max-height: calc(100vh - 160px);}
.hnd .popup.contact .closeIcon{display: block; background-image: url('https://static.edmclass.com/btecHnd/common/popupCloseBtn.svg'); background-size: 24px; background-position: center; background-repeat: no-repeat; width: 24px; height: 24px; right: 32px; top: 25px;}
.hnd .popup.contact .title{color: #000;}
.hnd .popup.contact .title + *{margin-top: 24px;}
.hnd .popup.contact .box input[type="text"],
.hnd .popup.contact .box input[type="tel"],
.hnd .popup.contact .box textarea{border-radius: 4px; border-color: #C5C5C5; color: #000; font-size: var(--f-body1);}
.hnd .popup.contact .box input[type="text"],
.hnd .popup.contact .box input[type="tel"]{height: 34px; padding: 0 12px;}
.hnd .popup.contact .box textarea{height:120px; padding: 12px;}
.hnd .popup.contact .box{font-size: 15px; text-align: left;}
.hnd .popup.contact .box + .box{margin-top: 12px;}
.hnd .popup.contact .box p{line-height: 150%; letter-spacing: -0.15px;}
.hnd .popup.contact .box.flex{align-items: center;}
.hnd .popup.contact .box.flex p{width: 61px; color: #333333;}
.hnd .popup.contact .box.flex .input{width: calc(100% - 61px);}
.hnd .popup.contact .box.text p{margin-bottom: 8px;}
.hnd .popup.contact .agreementWrap{text-align: left; font-size: var(--f-body3); color: #666666; line-height: 150%; letter-spacing: -0.12px; margin-top: 16px; position: relative;}
.hnd .popup.contact .agreementWrap label{font-size: 15px; line-height: 150%; letter-spacing: -0.15px; color: #000;}
.hnd .popup.contact .agreementWrap input[type="checkbox"] + span{padding-left: 28px;}
.hnd .popup.contact .agreementWrap input[type="checkbox"] + span::before{width: 18px; height: 18px; top: 0;}
.hnd .popup.contact .agreementWrap input[type="checkbox"] + span::after{background-image: url('https://static.edmclass.com/btecHnd/common/checkIcon.svg'); width: 20px; height: 20px; top: 0; background-size: 20px;}
.hnd .popup.contact .agreementWrap input[type="checkbox"]:checked + span::before{background-color: #00B4A7; border-color: #00B4A7;}
.hnd .popup.contact .agreementWrap .toggle-btn{position: absolute; right: 0; top: 0; font-size: 15px; line-height: 150%; letter-spacing: -0.15px; color: #999999; background-image: url('https://static.edmclass.com/btecHnd/common/agreeDown.svg'); background-repeat: no-repeat; background-size: 12px; background-position: right center; padding-right: 16px;}
.hnd .popup.contact .agreementWrap .toggle-btn span{text-decoration: underline;}
.hnd .popup.contact .agreementWrap .toggle-btn.open{background-image: url('https://static.edmclass.com/btecHnd/common/checkIcon-open.svg');}
.hnd .popup.contact .agreementWrap .terms-detail{margin-top: 12px;}
.hnd .popup.contact .agreementWrap .terms-detail .terms-viewer{padding: 12px 0; border-top: 1px solid #E4E8F1; border-bottom: 1px solid #E4E8F1; color: #666666; display: none;}
.hnd .popup.contact .btn-submit{background-color: #00B4A7; color: var(--n-white); width: 201px; height: 45px; border-radius: 4px; margin: 16px auto 0; font-size: var(--f-heading2); font-weight: 600; letter-spacing: -0.18px; display: block; padding: 13.5px 0; line-height: 1; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center;}
.hnd .popup.contact .btn-submit svg{margin-left: 4px;}
.hnd .popup.contact .btn-submit svg path{stroke: #fff; transition: all 0.3s ease;}
.hnd .popup.contact .btn-submit:disabled,
.hnd .popup.contact .btn-submit.disabled{color: #999 !important; background-color: #CCCCCC;}
.hnd .popup.contact .btn-submit:disabled svg path,
.hnd .popup.contact .btn-submit.disabled svg path{stroke: #999;}



/******************************************************************************
    아카데미 메인 + 이벤트 게시판 > 여름방학특강 상담 팝업
******************************************************************************/
.popupWrap.common-contact .dim { background:rgba(0,0,0,.5); display:block }
.popupWrap.common-contact .popup { width: 100%; max-width: 360px; width: calc(100% - 32px); max-height: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; background-color: var(--n-white); border-radius: var(--b-radius3); padding: 48px 0 0; overflow: hidden; border: none;}
.popupWrap.common-contact .popup .closeBtn { background-image: url(https://static.edmclass.com/academy/new_main/new_popupClose.svg); background-repeat: no-repeat; background-size: 55%; background-position: center; width: 23px; height: 23px; border-radius: 50%; background-color: #eee; position: absolute; right: 13px; top: 13px; cursor: pointer; transition: all .15s ease-in-out}
.popupWrap.common-contact .popup .popupCont { max-width: 438px; margin: 0 auto; padding: 0 32px}
.popupWrap.common-contact .popup .popupCont .popupTitle { display: flex; font-weight: 700; font-size: var(--f-size16); letter-spacing: -.03px; color: #333; align-items: center; justify-content: center}
.popupWrap.common-contact .popup .popupCont .popupTitle .ico-balloon { display: block; width: 22px; height: 21px; background-image: url(https://static.edmclass.com/academy/new_main/ico_balloon.svg); background-size: contain; background-repeat: no-repeat; background-position: center center; margin-right: 2px}
.popupWrap.common-contact .popup .popupCont .checkList { display: flex; gap: 8px; margin: 30px 0 0}
.popupWrap.common-contact .popup .popupCont .checkList .checkLi { flex: 1 1 0}
.popupWrap.common-contact .popup .popupCont .checkList .checkLi label { display: flex; flex-direction: column; height: 93px; background: #f5f5f7; border: 1px solid #f5f5f7; border-radius: 16px; position: relative; align-items: center; justify-content: center; cursor: pointer}
.popupWrap.common-contact .popup .popupCont .checkList .checkLi input:checked+label { background: #f5fdff; border: 1px solid #35a0fc}
.popupWrap.common-contact .popup .popupCont .checkList .checkLi label::before { content: ''; display: block; width: 20px; height: 20px; background-image: url(https://static.edmclass.com/academy/new_main/ico_checkp_off.svg); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; position: absolute; left: 50%; top: -9px; transform: translateX(-50%)}
.popupWrap.common-contact .popup .popupCont .checkList .checkLi input:checked+label::before { background-image: url(https://static.edmclass.com/academy/new_main/ico_checkp_on.svg)}
.popupWrap.common-contact .popup .popupCont .checkList .checkLi label i { display: block; width: 30px; height: 30px; background-repeat: no-repeat; background-position: center; background-size: 30px 30px; margin-top: 10px}
.popupWrap.common-contact .popup .popupCont .checkList .checkLi label i.ico_pop_01 { background-image: url(https://static.edmclass.com/academy/new_main/ico_pop_01.svg)}
.popupWrap.common-contact .popup .popupCont .checkList .checkLi label i.ico_pop_02 { background-image: url(https://static.edmclass.com/academy/new_main/ico_pop_02.svg)}
.popupWrap.common-contact .popup .popupCont .checkList .checkLi label i.ico_pop_03 { background-image: url(https://static.edmclass.com/academy/new_main/ico_pop_03.svg)}
.popupWrap.common-contact .popup .popupCont .checkList .checkLi label span { font-weight: 500; font-size: var(--f-body1); line-height: 26px; letter-spacing: -.01px; color: #333}
.popupWrap.common-contact .popup .popupCont .popupBanner { text-indent: -99999px; overflow: hidden; aspect-ratio: 428/117; background-image: url(https://static.edmclass.com/academy/new_main/img_pop_01.png); background-repeat: no-repeat; background-position: center; background-size: contain; margin: 16px 0 0}
.popupWrap.common-contact .popup .popupCont .popupApply { font-size: var(--f-body1); line-height: 20px; letter-spacing: -.01px; color: #666; margin: 24px 0 0}
.popupWrap.common-contact .popup .popupCont dl { display: flex; margin: 16px 0 0; align-items: center}
.popupWrap.common-contact .popup .popupCont dl+dl { margin: 8px 0 0}
.popupWrap.common-contact .popup .popupCont dl dt { width: 76px; font-weight: 500; font-size: var(--f-size16); letter-spacing: -.02px; color: #333}
.popupWrap.common-contact .popup .popupCont dl dd { flex: 1 1 0}
.popupWrap.common-contact .popup .popupBtn:not(:disabled) { height: 58px; background: #35a0fc; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--f-heading2); letter-spacing: -.02px; color: #fff; margin: 40px 0 0}
/* 팝업 내 약관동의 */
.popupWrap.common-contact .popup .termWrap { margin-top: 16px;}
.popupWrap.common-contact .popup .termWrap .termHeader { display: flex; align-items: baseline; justify-content: space-between; }
.popupWrap.common-contact .popup .termWrap .termHeader a { font-size: var(--f-body1); color: var(--n-info); display: flex; cursor: pointer; }
.popupWrap.common-contact .popup .termWrap .termHeader a::after { content: ""; background-image: url(https://static.edmclass.com/common/new_allMenuArrow.svg); display: block; width: 18px; height: 18px; background-position: center;margin-left: 4px;transition: all .3s ease; }
.popupWrap.common-contact .popup .termWrap.active .termHeader a::after { content: "";  transform: rotate(180deg); }
.popupWrap.common-contact .popup .termWrap .textWrap{background-color: var(--b-color5); border-radius: var(--b-radius0); padding: 12px 8px; line-height: 16px; letter-spacing: -0.24px; font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; text-align: left; margin-top: 12px; display: none;}
.popupWrap.common-contact .popup .termWrap .textWrap .tit{margin-bottom: 2px;}
.popupWrap.common-contact .popup .termWrap .textWrap .dotTxt{color: var(--n-info); position: relative; padding-left: 15px;}
.popupWrap.common-contact .popup .termWrap .textWrap .dotTxt::before{content: ''; position: absolute; top:  7px; left: 10px; width: 2px; height: 2px; border-radius: 50%; background-color: var(--n-info);}
.popupWrap.common-contact .popup .termWrap .textWrap .dotTxt.type2{padding-left: 17px;}
.popupWrap.common-contact .popup .termWrap .textWrap .dotTxt.type2::before{width: 3px; height: 3px;}
.popupWrap.common-contact .popup .termWrap .textWrap .dotTxt + .tit{margin-top: 2px;}



/*
	alert
*/
.alertWrap,
.cautionAlert{z-index: 99999999; position: fixed; top: 0;left: 0; width: 100%; height: 100%; display: none;}
.alertWrap.active,
.cautionAlert.active{display: block;}
/* 닫기 버튼 X */
.alertWrap .closeIcon,
.cautionAlert .closeIcon{display: none;  position: absolute; right: 16px; top: 16px; background-size: contain; background-repeat: no-repeat; cursor: pointer; background-image: url('https://static.edmclass.com/common/popupCloseBtn.svg'); background-position: center; width: 24px; height: 24px;}
.alertWrap .dim,
.cautionAlert .dim{background: transparent; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; background: rgba(0,0,0,0.2); cursor: pointer;}

.alertWrap .alert,
.cautionAlert .alert{background-color: var(--n-white); box-shadow: var(--box-shadow3); border: 1px solid var(--s-color1); border-radius: var(--b-radius1); padding: 16px 24px 56px; width: 328px; text-align: center; line-height: 22px; letter-spacing: -0.32px; font-size: var(--f-body1); color: var(--n-subTitle); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; }
.alertWrap [class^=icon],
.cautionAlert [class^=icon] { display: block; width: 40px; height: 40px; background-repeat: no-repeat; background-size: contain; background-position: center; margin: 4px auto 0;}
.alertWrap .icon-c { background-image: url('https://static.edmclass.com/ielts/my_class/alert-icon-c.svg'); }
.alertWrap .icon-e,
.cautionAlert .icon-e { background-image: url('https://static.edmclass.com/ielts/my_class/alert-icon-e.svg'); }
.alertWrap .icon-q { background-image: url('https://static.edmclass.com/ielts/my_class/alert-icon-q.svg'); }
.alertWrap .title,
.cautionAlert .title{font-weight: 700; font-size: var(--f-heading2); line-height: 26px; letter-spacing: -0.36px;}
.alertWrap .alert-contents,
.cautionAlert .alert-contents{min-height: 100px; display: flex; align-content: center; flex-wrap:wrap; justify-content: center; margin-bottom: 16px;}
.alertWrap .caption{font-size: 11px; color: var(--n-info); margin-top: 8px; line-height: 14px; letter-spacing: -0.22px;}
.alertWrap .caption + .alert-contents{margin-top: 16px; min-height: initial; display: block;}
.alertWrap .title+ .alert-contents{margin-top: 38px; min-height: initial; display: block;}
.alertWrap .alert-contents .scrollWrap{max-height: 152px; padding-bottom: 16px;}
/* 확인 버튼 */
.alertWrap .alert-btn,
.cautionAlert .alert-btn{position: absolute; right: 0; top: auto; bottom: 0; width: 100%; height: 56px; background-color: var(--b-color4); background-image: none; border-radius: 0 0 16px 16px; text-align: center; font-size: var(--f-heading3); line-height: 56px; font-weight: 700; color: var(--n-info); display: block;}
.alertWrap .alert-btn:active,
.cautionAlert .alert-btn:active{background-color: var(--p-color2); color: var(--n-white); }

/************************************************
	상품 상세 > 옵션 > 유의사항
************************************************/
.cautionAlert .alert-contents{display: block; margin-top: 16px;}
.cautionAlert .alert-contents .scrollWrap{padding-bottom: 0; max-height: 184px;}
.cautionAlert .alert-contents .cautionWrap{background-color: var(--b-color5); border-radius: var(--b-radius0); padding: 12px 8px; font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; text-align: left; color: var(--n-info);}


/*************************************************************
	hover effect
*************************************************************/
@media (hover: hover) and (pointer: fine) {
	.alertWrap .alert-btn:hover,
    .cautionAlert .alert-btn:hover{background-color: var(--b-color3);}

	.popupWrap .popup .popupClose:hover,
    .popupWrap-lecture-comparison .popup .popupClose:hover{background-color: var(--b-color3);}

	.certificateArea .popupWrap-common .popup .closeIcon:hover{background-color: transparent;}
	.certificateArea .popupWrap-common .popup .actionBtn .btn:hover{background-color: var(--b-color4); border-color: var(--b-color4);}
}







/*
    반응형
*/

@media screen and (min-width: 576px) {
    /************************************************
		내 강의실
	************************************************/
	.popupWrap.myClass{display: none; visibility: visible;}
	.popupWrap.myClass .popup{left: 50%; top: 50%; bottom: auto; transform: translate(-50%,-50%); border-radius: var(--b-radius1); padding-top: 56px; width: 420px; transition: none;}
	.popupWrap.myClass.active{display: block;}
	.popupWrap.myClass.active .popup{transform: translate(-50%,-50%);}
	.popupWrap.myClass .popup.large{width: 600px; }
	.popupWrap.myClass .popup::after{display: none;}
	.popupWrap.myClass .popup [class^=icon]{margin-bottom: 4px; width: 48px; height: 48px;}
	.popupWrap.myClass .popup .title{padding-top: 0;}
	.popupWrap.myClass .popup .textWrap .info .scrollWrap{max-height: initial;}
	.popupWrap.myClass .popup .textWrap .caption{margin-top: 8px;}
	.popupWrap.myClass .popup .textWrap .caption.strong-caption{font-weight: 700; font-size: var(--f-body1); text-align: left; color: var(--n-subTitle); margin-top: 16px;}
	.popupWrap.myClass .popup .textWrap .grayBox{background-color: var(--b-color5); border-radius: var(--b-radius0); padding: 16px;}
	.popupWrap.myClass .popup .textWrap .grayBox .listTitle{display: block; text-align: left; color: var(--p-color1); font-size: var(--f-heading3); padding-left: 24px; background-image: url('https://static.edmclass.com/ielts/my_class/infoIcon-black-pc.svg'); background-repeat: no-repeat; background-position: left center; background-size: 18px; line-height: 18px; margin-bottom: 7px;}
	.popupWrap.myClass .popup .textWrap .info .dotList > li{color: var(--n-info);}
	.popupWrap.myClass .popup .textWrap .info .dotList > li::before{background-color: var(--n-info );}

	/* 취소, 확인 (투 버튼 디자인) */
	.popupWrap.myClass .popup .buttonWrap{max-width: 216px;}
	.popupWrap.myClass .popup .buttonWrap .btn{height: 34px; line-height: 34px; font-size: var(--f-body2); background-color: var(--n-white); color: var(--p-color2); border: 1px solid var(--p-color2); font-weight: 500; transition: all 0.3s ease;}
	.popupWrap.myClass .popup .buttonWrap .btn.cancel{background-color: inherit; border-color: var(--s-color1);}




    /************************************************
        메인
    ************************************************/
    #wrap.mainPage .popupWrap .mainPopup .imgWrap{max-width: calc(100% - 64px);}

	/************************************************
		수강 신청
	************************************************/
	.popupWrap.lecture-comparison .popup .textWrap > .scrollWidth > .scrollWrap{max-height: 445px;}

    /************************************************
        레벨 테스트 문항 응시
    ************************************************/
    #wrap.level-test.exam .popupWrap.myClass .popup{max-width: 360px;}
    #wrap.level-test.exam .popupWrap.myClass .popup [class^=icon]{background-image: url('https://static.edmclass.com/common/board/no-data-56.svg'); width: 56px; height: 56px; margin: 0 auto 16px;}
    #wrap.level-test.exam .popupWrap.myClass .popup .textWrap{text-align: center;}
    #wrap.level-test.exam .popupWrap.myClass .popup .textWrap .info{white-space: normal;}
    #wrap.level-test.exam .popupWrap.myClass .popup .textWrap .info *{font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; color: var(--n-subTitle); text-align: center;}
    #wrap.level-test.exam .popupWrap.myClass .popup .textWrap .info .message{padding: 0; margin: 0;}
    #wrap.level-test.exam .popupWrap.myClass .popup .buttonWrap{justify-content: center; column-gap: 8px;}

    /************************************************
        레벨 테스트 결과
    ************************************************/
    #wrap.level-test .bottom-sheet.type2.verChange .slidingWrap{transform: translate(-50%,-50%); height: auto; bottom: auto; top: 50%; left: 50%; max-width: 420px; max-height: initial; border-radius: var(--b-radius1); padding: 24px 0 0; border: 1px solid var(--s-color1); transition: none;}
    #wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .max-width{padding: 0; max-width: 100%;}
    #wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .stopPopup{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; padding: 0 8px; top: -32px; font-weight: 700;}
    #wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .stopPopup .right{width: 24px; height: 24px;}
    #wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .event img{max-width: 372px;}
    #wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .event p{margin: 16px 0 0; text-align: center;}
    #wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .event .todayPopupClose{font-size: var(--f-body3); color: var(--n-info);}
    #wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .buttonWrap {text-align: center; padding: 32px 0; border-bottom-right-radius: var(--b-radius1); border-bottom-left-radius: var(--b-radius1);}
    #wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .buttonWrap .btn{width: 104px; height: 36px; background-color: var(--n-white); color: var(--p-color2); border: 1px solid var(--p-color2); font-size: var(--f-body2); letter-spacing: -0.26px; font-weight: 500; background-image: none; line-height: 2.8;}
    #wrap.level-test .bottom-sheet.type2.verChange .closeBtn {background-image: url('https://static.edmclass.com/common/popupCloseBtn.svg'); background-repeat: no-repeat; width: 24px; height: 24px; background-size: contain; background-position: center; background-color: transparent; top: 16px; right: 16px; transform: none; left: auto; }


    /*************************************************************
        hover effect
    *************************************************************/
    @media (hover: hover) and (pointer: fine) {
        #wrap.level-test .bottom-sheet.type2.verChange .slidingWrap .buttonWrap .btn:hover{background-color: var(--p-color2); color: var(--n-white);}
    }
}

@media screen and (min-width: 744px) {
    /******************************************************************************
        아카데미 메인 + 이벤트 게시판 > 여름방학특강 상담 팝업
    ******************************************************************************/
    .popupWrap.common-contact .popup { max-height: 100%; top: 50%; transform: translate(-50%, -50%); padding: 60px 0 0 !important; width: 100%; max-width: 534px;}
    .popupWrap.common-contact .popup .closeBtn { width: 40px; height: 40px; background-size: 45%;}
    .popupWrap.common-contact .popup .popupCont .popupTitle { font-size: var(--f-display3); letter-spacing: -.05px}
    .popupWrap.common-contact .popup .popupCont .popupTitle .ico-balloon { width: 32px; height: 32px; margin-right: 4px}
    .popupWrap.common-contact .popup .popupCont .checkList { gap: 8px; margin: 53px 0 0}
    .popupWrap.common-contact .popup .popupCont .checkList .checkLi { flex: 1 1 0}
    .popupWrap.common-contact .popup .popupCont .checkList .checkLi label { height: 138px; border-radius: 16px}
    .popupWrap.common-contact .popup .popupCont .checkList .checkLi label::before { width: 30px; height: 30px; background-size: 30px 30px; left: 50%; top: -13px; transform: translateX(-50%)}
    .popupWrap.common-contact .popup .popupCont .checkList .checkLi label i { width: 42px; height: 42px; background-size: 42px 42px; margin-top: 10px}
    .popupWrap.common-contact .popup .popupCont .checkList .checkLi label span { font-size: var(--f-heading2); line-height: 26px; letter-spacing: -.02px; color: var(--n-subTitle); margin-top: 13px}
    .popupWrap.common-contact .popup .popupCont .popupApply { font-size: var(--f-heading3); line-height: 24px; letter-spacing: -.01px;color: var(--n-subTitle); margin: 40px 0 0}
    .popupWrap.common-contact .popup .popupCont dl { display: flex; margin: 16px 0 0; align-items: center}
    .popupWrap.common-contact .popup .popupCont dl+dl { margin: 10px 0 0}
    .popupWrap.common-contact .popup .popupCont dl dt { width: 76px; font-weight: 500; font-size: var(--f-body1); letter-spacing: -.02px; color: var(--n-subTitle)}
    .popupWrap.common-contact .popup .popupCont dl dd { flex: 1 1 0}
    .popupWrap.common-contact .popup .popupCont dl dd input[type=text] { font-size: var(--f-body1);}
    .popupWrap.common-contact .popup .popupBtn:disabled { height: 64px; background: #c5c5c5; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--f-size22); letter-spacing: -.02px; color: #fff; margin: 40px 0 0}
    .popupWrap.common-contact .popup .popupBtn:hover { background: var(--p-color1); transition: all .15s ease-in-out}
}

@media screen and (min-width: 1200px) {
	/*
		popup
		:: default
		:: dim X, 닫기 버튼 O
		:: 각 페이지별 다른 디자인은 그 페이지 부모 class 속에 css 추가
	*/

	.popupWrap .dim{display: none;}
	.popupWrap .popup{width: 100%; max-width: 600px; padding-bottom: 32px;}
	.popupWrap .popup .closeIcon{display: block; }
	.popupWrap .popup .title{padding-top: 32px;}
	.popupWrap .popup .title + *{margin-top: 24px;}
	.popupWrap .popup .popupClose{background-color: var(--n-white); color: var(--p-color2); border: 1px solid var(--p-color2); width: auto; height: auto; position: static; margin: 0 auto; border-radius: 8px; font-size: var(--f-body2); padding: 6px 40px; line-height: 20px; letter-spacing: -0.26px; font-weight: 500; margin-top: 32px;}


	/* 닫기 버튼 X (circle) */
	.popupWrap .popup .closeIcon.type2{top: 24px; right: 24px; width: 40px; height: 40px; background-image: url('https://static.edmclass.com/common/popupCloseBtn-circle-pc.svg'); background-size: 24px;}




	/************************************************
        메인
    ************************************************/
    #wrap.mainPage .popupWrap .mainPopup .imgWrap{max-width: 948px;}
    #wrap.mainPage .popupWrap .mainPopup .closeIcon.type2{top: 24px; right: 24px; width: 40px; height: 40px; background-image: url('https://static.edmclass.com/common/popupCloseBtn-circle-pc.svg'); background-size: 24px;}



	/************************************************
		마이페이지
	************************************************/
	/* 마이페이지 > 비밀번호 변경 팝업 */
	#membership .myPage .popupWrap .popup{max-width: 360px;}
	#membership .myPage .popupWrap .popup .passwordWrap{border-bottom: 1px solid var(--s-color1); padding: 16px 0 12px;}

	/* 마이페이지 > 탈퇴 불가 팝업 */
	#membership .myPage .popupWrap .popup.textPopup{height: auto; padding-top: 56px; }



	/************************************************
		마이페이지 - 쿠폰내역
	************************************************/
	#membership .myPage.coupon .popupWrap .popup{max-width: 420px;}
	#membership .myPage.coupon .popupWrap .popup .scrollWrap{max-height: 398px;}



	/************************************************
		마이페이지 - 결제, 배송조회
	************************************************/
	/* 영수증 팝업 */
	#membership .myPage.payment #receipt-popup .popupWrap .popup{max-width: 420px;}
	#membership .myPage.payment #receipt-popup .popupWrap .popup .scrollWrap{max-height: initial;}
	#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail .bottom{padding-bottom: 0;}
	#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail ul li .tit{padding: 14px 16px;}
	#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail ul li .text{padding: 12px 16px;}
	#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail .btnWrap .downloadBtn{display: inline-block;}
	#membership .myPage.payment #receipt-popup .popupWrap .popup .receiptDetail .btnWrap .printBtn{display: inline-block;}



	/************************************************
		수강 신청
	************************************************/
	.popupWrap-lecture-comparison{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;}
    .popupWrap-lecture-comparison .dim{display: none;}
    .popupWrap-lecture-comparison .popup{width: 100%; max-width: 600px; padding-bottom: 32px;}
    .popupWrap-lecture-comparison .popup .closeIcon{display: block; }
	.popupWrap-lecture-comparison .popup .textWrap > .scrollWidth > .scrollWrap{max-height: 516px; height: calc(100vh - 455px); padding-bottom: 0; padding-top: 0;}
	.popupWrap-lecture-comparison .popup .title{padding-top: 32px; border-bottom: none; padding-bottom: 0; margin-bottom: 16px;}
	.popupWrap-lecture-comparison .popup .info-text{font-weight: 700;}
	.popupWrap-lecture-comparison .popup .selectArea .dropDownMenu{height: auto;}
	.popupWrap-lecture-comparison .popup .comparison-table{margin-top: 24px;}
	.popupWrap-lecture-comparison .popup .comparison-table table th,
	.popupWrap-lecture-comparison .popup .comparison-table table td{padding: 12px 16px;}
    .popupWrap-lecture-comparison .popup .comparison-table table th{width: 118px;}
    .popupWrap-lecture-comparison .popup .comparison-table table td{width: calc((100% - 118px) / 2); min-width: 217px;}
	.popupWrap-lecture-comparison .popup .comparison-table table thead th,
	.popupWrap-lecture-comparison .popup .comparison-table table thead td{padding-top: 18.5px; padding-bottom: 18.5px;}
	.popupWrap-lecture-comparison .popup .comparison-table table thead td{font-weight: 700;}
	.popupWrap-lecture-comparison .popup .comparison-table table tbody .iconBox .icon{width: 83px; font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; font-weight: 700; padding: 8px 0;}
	.popupWrap-lecture-comparison .popup .comparison-table table tbody .iconBox .icon + .icon{margin-left: 16px;}
	.popupWrap-lecture-comparison .popup .comparison-table table tbody .iconBox .icon figure{width: 32px; height: 32px;}
    .popupWrap-lecture-comparison .popup .comparison-table table tbody .lecture-composition p{padding-left: 0;}
    .popupWrap-lecture-comparison .popup .comparison-table table tbody .lecture-composition p::before{display: none;}
    .popupWrap-lecture-comparison .popup .popupClose{background-color: var(--n-white); color: var(--p-color2); border: 1px solid var(--p-color2); width: auto; height: auto; position: static; margin: 0 auto; border-radius: 8px; font-size: var(--f-body2); padding: 6px 40px; line-height: 20px; letter-spacing: -0.26px; font-weight: 500; margin-top: 32px;}

	/************************************************
		내 강의실 > 수강증 팝업 (인강, 어학원 공통 사용)
	************************************************/
	body .popupWrap-common .popup{max-width: 420px;  padding: 56px 24px 32px !important; border-radius: var(--b-radius1) !important;}
	body .popupWrap-common .popup .textWrap > .scrollWidth > .scrollWrap{max-height: 440px; }
	body .popupWrap-common .popup .closeIcon{display: block; background-color: transparent; background-image: url('https://static.edmclass.com/common/popupCloseBtn.svg'); width: 24px; height: 24px; background-size: contain;}
	body .popupWrap-common .popup .title{padding-top: 0; }
	body .popupWrap-common .popup .title + *{margin-top: 16px;}
	body .popupWrap-common .popup .popupClose{background-color: var(--n-white); color: var(--p-color2); border: 1px solid var(--p-color2); width: auto; height: auto; position: static; margin: 0 auto; border-radius: 8px; font-size: var(--f-body2); padding: 6px 40px; line-height: 20px; letter-spacing: -0.26px; font-weight: 500; margin-top: 32px;}
	body .popupWrap-common .popup .popupClose:hover{background-color: var(--p-color2); color: var(--n-white); }
	/* 수강증 팝업 */
	.certificateArea .popupWrap-common .popup .textWrap > .scrollWidth > .scrollWrap{height: calc(100vh - 427px); max-height: 448px;}
	.certificateArea .popupWrap-common .popup .infoWrap .subject{padding: 12px 16px;}
	.certificateArea .popupWrap-common .popup .infoWrap .content{padding: 9.5px 16px;}
	.certificateArea .popupWrap-common .popup .actionBtn .btn{font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; color: var(--n-info); margin-top: 0;}
	.certificateArea .popupWrap-common .popup .printBtn .btn{background-image: url('https://static.edmclass.com/common/print.svg'); background-repeat: no-repeat; background-size: 16px; background-position: left 6px center;}
	.my-class-wrapper .wrapper .certificateArea .popupWrap-common .popup .bottom-text{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; height: auto;}
	.my-class-wrapper .wrapper .certificateArea .popupWrap-common .popup .date,
	.my-class-wrapper .wrapper .certificateArea .popupWrap-common .popup .company{font-size: var(--f-body3); color: var(--n-info); line-height: 16px; letter-spacing: -0.24px; height: auto;}

    /************************************************
        레벨테스트 정답 확인
    ************************************************/
	#wrap.level-test.result .popupWrap .popup{padding-left: 24px; padding-right: 24px;}
    #wrap.level-test.result .popupWrap .popup .textWrap .title{padding-top: 32px; border-bottom: none; padding-bottom: 0; margin-bottom: 16px;}
    #wrap.level-test.result .popupWrap .popup .textWrap > .scrollWidth > .scrollWrap{max-height: 516px; height: calc(100vh - 455px); padding-top: 0; padding-bottom: 0;}
    #wrap.level-test.result .popupWrap .popup .subject{line-height: 48px; height: 48px;}
    #wrap.level-test.result .popupWrap .popup .subject .box.left{width: 50%;}
    #wrap.level-test.result .popupWrap .popup .subject .box.right{width: 50%;}
    #wrap.level-test.result .popupWrap .popup .listWrap{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;}
    #wrap.level-test.result .popupWrap .popup .list .sub-subject{line-height: 40px; height: 40px; font-weight: 700;}
    #wrap.level-test.result .popupWrap .popup .list li .box{padding: 10px 16px; font-weight: 500;}
    #wrap.level-test.result .popupWrap .popup .list li .box em,
    #wrap.level-test.result .popupWrap .popup .list li .box span{font-weight: 400;}
    #wrap.level-test.result .popupWrap .popup .list1 li .box{width: 50%;}
    #wrap.level-test.result .popupWrap .popup .list2 li .left{width: 61%;}
    #wrap.level-test.result .popupWrap .popup .list2 li .left em{font-weight: inherit;}
    #wrap.level-test.result .popupWrap .popup .list2 li .right{width: 39%;}


     /************************************************
        레벨 테스트 결과
    ************************************************/
    #wrap.level-test .bottom-sheet.type2.verChange .dim{display: block;}
    #wrap.level-test.result .popupWrap .popup .list3 li .left{width: 62px;}
    #wrap.level-test.result .popupWrap .popup .list3 li .right{width: calc(100% - 62px); padding-left: 16px; padding-right: 16px;}
    /* 어학원 */
    .academy #wrap.level-test.result .popupWrap .popup .textWrap > .scrollWidth > .scrollWrap{display: flex; flex-wrap: wrap; padding-top: 0;}
    .academy #wrap.level-test.result .popupWrap .popup .download{order: 2; margin-top: 8px; margin-bottom: 0; width: 100%;}
    .academy #wrap.level-test.result .popupWrap .popup .listWrap{order: 1;}


    /************************************************
        내 강의실 > 기기 관리
    ************************************************/
    .myClassPage .popupWrap.deviceManagement .popup{padding-bottom: 32px; max-width: 420px;}
    .myClassPage .popupWrap.deviceManagement .popup .textWrap > .scrollWidth > .scrollWrap{height: calc(100vh - 457px); height: calc((var(--vh, 1vh)* 100) - 457px); max-height: 366px;}
    .myClassPage .popupWrap.deviceManagement .popup .scrollWidth{border: none;}
    .myClassPage .popupWrap.deviceManagement .popup .info{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; padding-bottom: 0;}
    .myClassPage .popupWrap.deviceManagement .popup .info .dotList > li{padding-left: 8px;}
    .myClassPage .popupWrap.deviceManagement .popup .info .dotList > li::before{top: 10px;}


	/************************************************
		HND > 상담신청
	************************************************/
	.hnd .popup.contact{max-width: 375px;}
	.hnd .popup.contact .box{font-size: var(--f-heading3); letter-spacing: -0.16px;}
	.hnd .popup.contact .box input[type="text"],
	.hnd .popup.contact .box input[type="tel"],
	.hnd .popup.contact .box textarea{border-radius: 4px; border-color: #C5C5C5; color: #000; font-size: var(--f-heading3); letter-spacing: -0.16px;}
	.hnd .popup.contact .box.text{margin-top: 16px;}
	.hnd .popup.contact .agreementWrap input[type="checkbox"] + span{font-size: var(--f-heading3); letter-spacing: -0.16px; line-height: 150%;}
	.hnd .popup.contact .btn-submit{width: 161px; }



	/*
		alert
	*/
	.alertWrap .dim,
    .cautionAlert .dim{display: none;}
	.alertWrap .alert,
    .cautionAlert .alert{padding: 56px 24px 32px;}
	.alertWrap .alert.large{width: 420px;}
	.alertWrap .closeIcon,
    .cautionAlert .closeIcon{display: block; background-color: transparent;}
	.alertWrap .alert-contents,
    .cautionAlert .alert-contents{margin-bottom: 32px; font-size: var(--f-heading3);}
	.alertWrap .alert-btn,
    .cautionAlert .alert-btn{position: static; width: 104px; height: 36px; background-color: var(--n-white); font-size: var(--f-body2); border: 1px solid var(--p-color2); border-radius: var(--b-radius0); line-height: 36px; color: var(--p-color2); transform: none; margin: 0 auto; font-weight: 500; transition: all 0.3s ease;}
	.alertWrap .alert-btn.disabled,
    .cautionAlert .alert-btn.disabled{background-color: var(--b-color4); color: var(--n-deactivate); border-color: var(--b-color4); touch-action: none; pointer-events: none;}

    /************************************************
		상품 상세 > 옵션 > 유의사항
	************************************************/
	.cautionAlert [class^=icon]{display: none;}
    .cautionAlert .alert{width: 600px;}
    .cautionAlert .closeIcon{display: block !important;}
    .cautionAlert .alert-contents .cautionWrap{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; padding: 16px;}

    /************************************************
		단체 수강 문의
	************************************************/
    /* 팝업(default 폰트사이즈) */
    #wrap.boardPage.inquiry-group .popupWrap{font-size: var(--f-heading3); }
    #wrap.boardPage.inquiry-group .popupWrap .popup.textPopup{padding-top: 56px;}
    #wrap.boardPage.inquiry-group .popupWrap .popup.textPopup .textWrap{line-height: 22px; letter-spacing: -0.32px;}
    #wrap.boardPage.inquiry-group .popupWrap .popup.textPopup .textWrap{min-height: 100px;}




	/*************************************************************
		hover effect
	*************************************************************/
	@media (hover: hover) and (pointer: fine) {
        .popupWrap .popup .popupClose:hover,
        .popupWrap-lecture-comparison .popup .popupClose:hover{background-color: var(--p-color2); color: var(--n-white); }

		.alertWrap .alert-btn:hover,
        .cautionAlert .alert-btn:hover{background-color: var(--p-color2); color: var(--n-white);}
	}

}


/*************************************************************
	hover effect
*************************************************************/
@media (hover: hover) and (pointer: fine) {
	.popupWrap .popup .closeIcon.type2:hover{background-color: var(--n-info);}
	.popupWrap.myClass .popup .buttonWrap .btn:hover{background-color: var(--p-color2); color: var(--n-white);}
	.popupWrap.myClass .popup .buttonWrap .btn.cancel:hover{background-color: var(--b-color4); border-color: var(--b-color4); color: var(--n-info);}

    .academy #wrap.level-test.result .popupWrap .popup .downloadBtn:hover{background-color: var(--b-color4); border-color: var(--b-color4);}

    .classRoomPage .popupWrap .popup .playBarWrap .control.play:hover{background-image : url('https://static.edmclass.com/common/my_class/control-play-hover.svg');}
    .classRoomPage .popupWrap .popup .playBarWrap .control.pause:hover{background-image : url('https://static.edmclass.com/common/my_class/control-pause-hover.svg');}
    .classRoomPage .popupWrap .popup .playBarWrap .speaker.default:hover{background-image: url('https://static.edmclass.com/common/my_class/speaker-active.svg');}
    .classRoomPage .popupWrap .popup .textWrap .infoArea .sectionBtnWrap .btn:hover{background-color: var(--b-color3);}
    .classRoomPage .popupWrap .popup .textWrap .infoArea .sectionBtnWrap .btn.active:hover{background-color: var(--n-subTitle);}
    .classRoomPage .popupWrap .popup .textWrap .infoArea.reviewing .sectionPageBtn .btn.prev:hover{background-color: var(--p-color2); color: var(--n-white);}
    .classRoomPage .popupWrap .popup .textWrap .infoArea.reviewing .sectionPageBtn .btn.next:hover{background-color: var(--n-subTitle); border-color: var(--n-subTitle);}
    .classRoomPage .popupWrap .popup .popupClose:hover{background-color: var(--p-color2); color: var(--n-white);}
    .classRoomPage .popupWrap .popup .textWrap .infoArea.myAnswer .textAnswer ul li .right-a.blur .viewBtn:hover{background-color: var(--n-subTitle);}

	.hnd .popup.contact .btn-submit:hover{background-color: #18A149;}
}