@charset "UTF-8";
/* 공통으로 사용하는 버튼, 테이블폼, 게시판 등등 */
/* 게시판 그누보드 -> 자체적으로 개발 시 타입별로 만들기 */
/* 웹 -> 모바일 영역 가리기 임시 */
@media (max-width: 1440px){
    .disNone{
        display:none;
    }
}

/* reset */
*{
    font-family: Pretendard;
}
/* input */
input{border: 1px solid #eee;outline:none}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    background-color:#F5F5F5 !important;
}

 /* input type number 우측 버튼 삭제 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* // reset */


/* 버튼 */
.butn{display:inline-block}
.butn.btn_gray{background-color:#fff;border: 1px solid #E2E2E3; padding: 15px 45px;font-size: 16px;color:#2D2D2D}
.butn.btn_blue{background-color:#0083FE;padding: 16px 48px;font-size: 24px;color:#fff}
.butn.btn_white{background-color:#fff;border: 1px solid #E2E2E3;padding: 16px 48px;font-size: 24px;color:#2D2D2D}

/* 체크박스 스타일 */
.chk-Box {position:relative}
.chk-Box input{display:none}
.chk-Box span{padding-left: 25px;}
.chk-Box span::before{content: '';position: absolute;width: 20px;height: 20px;background-image: url(../img/common/check-box.png);background-repeat: no-repeat;background-size: contain;top: 0px;left: 0;}
.chk-Box input:checked + span::after{content: '';position: absolute;width: 20px;height: 20px;background-image: url(../img/common/check-box-foc.png);background-repeat: no-repeat;background-size: contain;top: 0px;left: 0;z-index: 1;}

@media (min-width: 976px){
    .chk-Box.size25 span::before,
    .chk-Box.size25 input:checked + span::after{width: 25px;height: 25px;}
    .chk-Box.size25 span{padding-left: 35px;}
}

.visually_hidden{border: 0;margin: -1px;clip: rect(0 0 0 0);height: 1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}

/* 테두리 반경 */
.rd5{border-radius: 5px;}

/* 보더칼라 */
.bdGray01{border: 1px solid #DADADA;}
.bdGray02{border: 1px solid #E2E2E3;}

.bdnone{border:none !important;}
/* 배경색상 */
.bcGray01{background-color: #F7F7F7;}
.bcGray02{background-color: #FAFAFA}
.bgSkyB01{background-color: #CCDFFF;}
.bgBlue01{background-color: #056EED;}

.bgnone{background:none !important;}
/* 폰트 종류 */
.ffPreten {font-family: 'Pretendard';}
.ffMalgun {font-family: 'Malgun Gothic';}

/* 폰트 너비 */
.fw400{font-weight: 400;}
.fw500{font-weight: 500;}
.fw600{font-weight: 600;}
.fw700{font-weight: 700;}
.fw800{font-weight: 800;}

/* 폰트 사이즈 */
.f12{font-size: 12px;}
.f14{font-size: 14px;}
.f15{font-size: 15px;}
.f16{font-size: 16px;}
.f18{font-size: 18px;}
.f22{font-size: 22px;}
.f26{font-size: 26px;}

/* 폰트 색상 */
.fcWhite{color:#fff !important}
.fcGray01{color:#767676 !important}
.fcBlue01{color:#172C8D !important}
.fcBlue02{color:#94c6fe !important}
.fcBlue03{color:#06F !important}
.fcBlue04{color:#00B1FF !important}
.fcRed01{color:#E80000 !important}
.fcRed02{color:#F93C00 !important}

/* margin */
.mt10{margin-top:10px;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px;}
.mt25{margin-top:25px;}
.mt30{margin-top:30px;}
.mt35{margin-top:35px;}
.mt50{margin-top:50px;}
.mt70{margin-top:70px;}

.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml30{margin-left:30px;}

.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}

/* padding */
.pd-a10{padding:10px}
.pt40{padding-top:40px}
.pb10{padding-bottom:10px}
.pb50{padding-bottom:50px}

/* display-block */
.dis_b{display:block}
/* display-flex + gap */
.df_g10{display:flex;gap:10px;align-items: flex-end}
.df_g20{display:flex;gap:20px;align-items: flex-end}
.df_g30{display:flex;gap:30px;align-items: flex-end}

/* position */
.posi_re{position: relative;}

/* flex */
.df{display: flex;}
.jf_cont{justify-content: space-between;}
.jf_center{justify-content: center;}
.jf_cont-end{justify-content: flex-end !important;}
.fd_col{flex-direction: column;}
.ai_center{align-items: center;}

.flex00{flex:none}
.flex01{flex:.1}
.flex03{flex:.3}
.flex05{flex:.5}
.flex07{flex:.7}
.flex09{flex:.9}
.flex10{flex:1}

/* flex -gap */
.fgap10{gap:10px !important}
.fgap40{gap:40px !important}

/* text-align */
.tar{text-align: right;}
.tal{text-align: left;}
.tac{text-align: center;}

/* title */
h2.tit{color: #2D2D2D;font-size: 24px;font-weight: 700;letter-spacing: 0px;font-family: Pretendard;}
h3.tit{color: #2D2D2D;font-size: 20px;font-weight: 700;letter-spacing: -0.4px;font-family: Pretendard;}

@media (max-width: 1140px){
    .mediaGray{background-color: #F7F7F7;}
    h2.tit{font-size: 18px;letter-spacing: -.4px;}
    h3.tit{font-size: 16px;letter-spacing: -1.48px;}
}

/* 컨텐츠 wrap */
.contents-wrap{padding-top: 128px !important;}
@media (max-width: 1440px){
    .contents-wrap{padding-top: 55px !important;}
}

/* 서브페이지 - 프로모션 */
section.sub > div {width:1200px; margin: 0 auto;}
@media (max-width: 1200px){
    section.sub > div {width:100%;padding:0 20px;}
}

/* 공통 팝업 div */
.commonPopup{position:fixed; display:none; z-index:999;left: 50%;top: 60%;transform: translate(-50%,-58%);}
.commonPopup.on{display: block;}
.commonPopup .btn_close {position: absolute;top: 12px;right: 12px;width:20px;height: 20px;font-size: 0;background:#210b0f url(../img/common/btn_close.svg) center no-repeat;}
.popupBtn{display:inline-block;}

/* 공통팝업 타입01 */
.commonPopup .type01{padding:25px 20px; width: 580px; border-radius: 8px;background: #FFF;box-shadow: 0px 10px 30px 10px rgba(0, 0, 0, 0.20);}
.commonPopup .type01 h2{font-size: 28px;font-weight: 500;letter-spacing: -1.01px;padding-bottom:20px ;border-bottom: 2px solid #333}
.commonPopup .type01 ul{margin-top:24px;display: flex;flex-direction: column;gap:8px}
.commonPopup .type01 li{display:flex;align-items: center;gap:10px; background-color: #F9F9F9;padding:10px}
.commonPopup .type01 li span{min-width: 80px; font-size: 18px;font-weight: 500;}
.commonPopup .type01 li input{width: 100%;padding:5px 10px; background: #FFF;border: 1px solid #E2E2E3}
.commonPopup .type01 .popupBtn{background-color:#056EED;padding: 12px 50px; border-radius: 4px;font-size: 20px;color:#fff}

@media (max-width: 700px){
    .commonPopup .type01{width:340px;}
    .commonPopup .type01 h2{font-size: 18px;}
    .commonPopup .type01 li span{font-size: 14px;}
    .commonPopup .type01 .popupBtn{font-size: 16px;padding: 8px 30px;}
}

/* LNB */
.content_body{width: 220px;min-width: 220px;font-family: Pretendard;}
.content_body_mo{display: none;font-family: Pretendard;}
.snb{padding-top: 30px;}
.content_body-border{border-bottom: 1px solid #E2E2E3;}
.content_body p{color:#fff; font-size: 20px;font-weight: 500;text-align: center; line-height: 32px;background-color: #172C8D;padding:11px 16px}
.content_body > li{border:solid #E2E2E3; border-width: 0 1px;}
.content_body li a{display:block;font-size: 16px;font-weight: 500;padding:15px 15px 15px 45px;border-bottom: 1px solid #E2E2E3;}
.content_body > li.on a,
.content_body li:hover a{color: #172C8D;}
.content_body .accordions:hover a{color: #111;}
.content_body .accordions > span{display:block;font-size: 16px;font-weight: 500;padding:15px 15px 15px 45px;border-bottom: 1px solid #E2E2E3}
.content_body .accordions > span + ul a{background: #f8f8f8;position: relative;}
.content_body .accordions > span + ul a::after{content:'-';position: absolute;top: 10px;left: 45px;}
.content_body .accordions li a{padding:10px 15px 10px 55px;font-weight: 400;font-size: 14px;}
.content_body .accordions li.on a{color: #172C8D;}
.content_body .accordions li:last-child a{border: none;}
.content_body .accordions + li{border-top: 1px solid #E2E2E3}
.content_body .accordions + .accordions{}

.content_body_mo{padding: 0 ;}
.content_body_mo li{padding: 10px 20px;background-color: #172C8D; color:#fff;font-weight: 500;display:flex; gap: 20px;white-space: nowrap;overflow-x: auto;}
.content_body_mo li span.on{color:#BAC4F0;}
.content_body_mo .child_item{display:none; border-bottom: 1px solid #E5E7EB; background-color: #FAFAFC;padding: 10px 20px;gap: 20px;white-space: nowrap;overflow-x: auto;}
.content_body_mo .child_item span.on{color: #2B43B2;position: relative;}
.content_body_mo .child_item span.on:after{content: ''; position: absolute;left:0;right:0;bottom:-11px;display: block;width: 100%;height: 2px;background-color: #2B43B2;}

@media (max-width: 1439px){
    .snb{padding-top: 0px;}
    .content_body{display: none;}
    .content_body_mo{display: block;}
}


/* 마이페이지 테이블 - 업로드 중지 수정필요 */
.contentTitle{
    padding:25px 0 15px;
    border-bottom: 2px solid #333;
}
.contentTitle h2{font-size: 24px;}
.contentTitle.df{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cartArea .tatalPayArea{display:flex;justify-content: flex-end;gap:60px; margin-top:30px;background: #F6F8FF;padding:30px 70px}
.tatalPayArea .tit{display: block;text-align:right; margin-bottom:10px; font-size: 18px;font-weight: 500;}
.tatalPayArea .cost{font-size: 27px;font-weight: 700;}
.tatalPayArea .costSign{display:flex;align-items: center;font-size: 22px;color:#D2D1D1;}
.tatalPayArea .tatalPrice {position:relative; padding-left:100px;}
.tatalPayArea .tatalPrice:after{content: '';position:absolute;top:5px;left:50px;width: 1px;height: 60px; background-color: #E2E2E3;display: inline-block;}
.tatalPayArea .tatalPrice .tit,
.tatalPayArea .tatalPrice .cost{color:#002AFF;}
.cartArea .btnPay{ justify-content: flex-end;}   
@media (max-width: 1200px){
    .butn.btn_gray{padding:10px 20px;}
    .tatalPayArea .tit{font-size: 14px;}
    .tatalPayArea .cost{font-size: 18px;}
    .tatalPayArea .costSign{font-size: 18px;}
    .tatalPayArea .tatalPrice:after{height:40px}
}

@media (max-width: 720px){
    .cartArea .btnPay .butn{font-size: 16px;}
    .cartArea .tatalPayArea{padding:10px;gap: 10px;}
    .tatalPayArea .tatalPrice{padding-left: 0;}
    .tatalPayArea .tatalPrice:after{content: none;}
    .contentTitle.df{flex-direction: column;align-items: flex-start;}
    .contentTitle h2{font-size: 16px;}
}

/* 로그인 페이지 */
section.signUp input:focus-visible{border:none}
section.signUp{width:530px;margin: 70px auto auto;font-family: Pretendard;}
.signUp h2{font-size: 42px;font-weight: 600;letter-spacing: -1.26px;}
.signUp .signUp_form{margin-top: 30px;display:flex;flex-direction: column;gap:20px;}
.signUp .signUp_form>div{gap:12px;}
.signUp .signUp_form>div span{color:#000;display: block;font-size: 12px;margin-top:4px}
.signUp .signUp_form input{width: 100%;background-color: #F5F5F5;padding: 10px 20px;border-radius: 4px}
.signUp .signUp_form input::placeholder{color:#BCBCBC}
.signUp .signUp_form .btn_check{color:#fff;font-weight: 500;font-size: 14px;padding:0 20px; border-radius: 4px; background: #4D4D4D;flex:none;margin-left:auto}
.signUp .idForm{gap:12px}
.signUp .mailForm div{position:relative; }
.signUp .mailForm div input{padding-left:30px;}
.signUp .mailForm em{position:absolute;top:11px;left:8px;}
.signupSocial{padding-top: 25px;}
.signupSocial h2{font-size: 42px;font-weight: 500;}
.signupSocial ul{display:flex;flex-direction:column;gap:18px;margin-top:40px;}
.signupSocial li a{display:inline-block;width:100%; border-radius: 2px;color: #000;font-size: 16px;padding:14px 55px;background-position: center left 5px;background-repeat: no-repeat;}
.signupSocial li:nth-child(1) a{background-image: url(../img/common/ico_kakao.svg); background-color: #F9E000;background-position-x: 10px;border:1px solid #F9E000;}
.signupSocial li:nth-child(2) a{background-image: url(../img/common/ico_naver.svg); background-color: #03CF5D;border:1px solid #03CF5D;}
.signupSocial li:nth-child(3) a{background-image: url(../img/common/ico_google.svg); background-color: #fff;border:1px solid #D9D9D9;}

@media (max-width: 569px){
    section.signUp{width:100%; padding:0 20px; margin-top:30px}
    .signUp h2{font-size: 28px;}
    .signUp .signUp_form>div,
    .signUp .idForm{gap:10px;}
    .signUp .signUp_form>div span{font-size: 11px;}
    .signUp .signUp_form{gap:16px}
    .signUp .signUp_form input{font-size: 14px;}
    .signUp .signUp_form .btn_check{padding: 0 16px;}
    .signUp .mailForm{flex-direction: column;position:relative}
    .signUp .mailForm div{padding-right: 92px;}
    .signUp .mailForm button{height: 38px;position: absolute;right: 0px;bottom: 0;}
}

/* 가입 - 추가 정보  */
.addinfoTitle {display: flex;align-items: center;gap:10px;}
.addinfoTitle span{font-size: 14px;color:#ff0202}
.addinfo_form ul{margin-top:20px;}
.addinfo_form li{display: flex;gap:20px;align-items: center;border-bottom: 1px solid #eee;padding-bottom: 5px;}
.addinfo_form li + li{margin-top: 10px;}
.addinfo_form li div:nth-child(1){width: 100px;}
.addinfo_form li div:nth-child(1) em{font-size: 14px;display:block}
.addinfo_form li div:nth-child(2){display: flex;gap:10px;}
.addinfo_form li div:nth-child(2) label{min-width: 60px;}

@media (max-width: 529px){
    .addinfo_form li{padding-bottom: 10px;align-items: flex-start; flex-direction: column;gap:10px;font-size:14px}
    .addinfo_form li div:nth-child(1){width: 100%;}
    .addinfo_form li div:nth-child(1) em{font-size: 12px;display:inline-block;margin-left: 5px;}
    .addinfo_form li div:nth-child(2){gap:0}
    .addinfo_form li div:nth-child(2) label{display: flex;align-items: center;gap:5px;}
}

/* 가입 - 추가 정보  type02*/
.addinfo_form.type02{}
.addinfo_form.type02 li{padding:0}
.addinfo_form.type02 li div{padding:10px 0}
.addinfo_form.type02 li:first-child{border-top:  2px solid #333;}
.addinfo_form.type02 li div:first-child{font-size: 16px;text-align: center;width: 200px; background: #F6F9FF;border: solid #E2E2E3;border-width: 0 1px 1px 0;}
.addinfo_form.type02 li + li{margin:0}
.addinfo_form.type02 li label input{width: 20px !important;}
.addinfo_form.type02 li div:nth-child(2) label{min-width: 100px;}

@media (max-width: 690px){
    .addinfo_form.type02 li div:first-child{width: 100px;}
}
@media (max-width: 590px){
    .addinfo_form li{padding-bottom: 10px;align-items: flex-start; flex-direction: column;gap:0px;font-size:14px}
    .addinfo_form.type02 li div{padding:4px 0}
    .addinfo_form.type02 li div:first-child{font-size: 14px;font-weight: 600;text-align: left; background-color: transparent;border:none}
    .addinfo_form.type02 li div:nth-child(2){flex-wrap: wrap;}
}

/* 가입 - 기입 정보 보기 */
.addveiw_form.type02{}
.addveiw_form.type02 > li:first-child{border-top:  2px solid #333;}
.addveiw_form.type02 > li{display: flex;gap:20px;align-items: center;border-bottom: 1px solid #eee}
.addveiw_form.type02 > li div{padding:10px 0}
.addveiw_form.type02 > li div:first-child{text-align: center; min-width: 120px; background: #F6F9FF;}

/* 시크릿코드 입력 창 */
.addinfoTitle.secret h3{flex:none;margin-right: auto;}
.addinfoTitle.secret input{width: 100%;height: 32px;border:solid #aaa;border-width: 0 0 1px;}
.addinfoTitle.secret input:focus{border-bottom:1px solid #424fc5;}
@media (max-width: 529px){
    .addinfoTitle.secret{flex-direction: column;}
}
/*** 공용 폼 ***/
/* 버튼 */
.btn_signUp{width:100%;padding:24px; color:#fff;font-size: 24px;font-weight: 700;letter-spacing: -1px;background-color:#195CF3;border-radius: 4px;} 
.btn_signUp.type01{padding:18px 24px;}
@media (max-width: 569px){
    .btn_signUp{font-size: 18px;padding:14px;}
}

/* 폼 type01 */
.form01{border-top: 1px solid #000;}
.form01 .form_block > div:first-child{flex:.3;font-size: 22px;background-color: #F9F9F9;border-right: 1px solid #E2E2E3;display: flex;align-items: center;}
.form01 .form_block > div:last-child{flex:.7;font-size: 20px;}
.form_block{display: flex;}
.form_block + .form_block{border-top:1px solid #E2E2E3}
.form_block.p-20-20 > div{padding: 20px;}
.form_block input{height:52px; padding:4px 5px;width: 100%;}
.form_block input[type='checkbox']{height:20px;}
.form_block input::placeholder{font-size: 16px;color:#bbb}
.form_block .phone_box{display:flex;gap:10px;}
.form_block .phone_box button{padding: 6px 10px;font-size: 16px;border-radius: 4px;background-color: royalblue;color: #fff;}
.form_block .req span{padding-top:10px; position:relative}
.form_block .req span:after{position:absolute;content:'*'; color:#F00;top:0px;right:-10px}
.form_block .subtext{margin-top:5px; font-size: 15px;color:#555}
.form_block .chk-Box{display:flex;align-items: center;}

@media (max-width: 799px){
    .form01 .form_block > div:first-child{font-size: 16px;min-width: 100px;}
    .form01 .form_block > div:last-child{font-size: 14px;}
    .form_block.p-20-20 > div{padding:10px;}
    .form_block.p-20-20 > div:first-child{padding:10px 5px;}
}
@media (max-width: 449px){
    .form_block .phone_box{flex-direction: column;}
}


/* 상품리스트 */

/* 상단뱃지 */
.listForm .badge{font-size: 8px;letter-spacing: -0.4px;padding: 2px 5px;border:1px solid; border-radius: 2px;}
.listForm .badge.popular{color: #3F7AE9;border-color: #3F7AE9;}
.listForm .badge.essential{color: #7A29DF;border-color: #7A29DF;}
.listForm .badge.start{color: #00B9CA;border-color: #00B9CA;}
.listForm .badge.limit{color: #fff;border-color: #F00;background-color: #F00;}
.listForm .badge.end{color: #fff;border-color: #A6A6A6;background-color: #A6A6A6}
.listForm .badge + .badge{ margin-left: 4px;}

/* 리스트 폼 */
.classTitle{padding:10px 0; color: #2D2D2D;font-size: 29px;font-weight: 700;letter-spacing: -0.58px;border-bottom: 2px solid #000;}
.classTit{min-width: 400px;max-width: 400px;}
.classList{padding: 10px 0 20px;border-bottom: 1px solid #eee;}
.classList ul{margin-top:12px; display:flex; justify-content: space-between;}
.classList li:nth-child(1){display:flex; gap:20px}
.classList .classTit p{color: #2D2D2D;font-size: 16px;font-weight: 500;letter-spacing: -0.8px; overflow: hidden;text-overflow: ellipsis;word-break: keep-all;white-space: nowrap;}
.classList .classTit span{color: #3b55ac;font-size: 20px;font-weight: 700;letter-spacing: -0.8px;}
.classList .classInfo{width: 400px;}
.classList .classInfo p{color: #2D2D2D;font-size: 16px;font-weight: 400;letter-spacing: -0.72px;text-overflow: ellipsis;white-space: nowrap;word-break: break-word;overflow: hidden;}
.classList .classInfo p + p{margin-top:5px}
.classPrice{display:flex;gap:12px;justify-content: flex-end;align-items: flex-end;}
.classPrice .discount{color: #E20000;font-size: 16px;font-weight: 500;letter-spacing: -0.64px;}
.classPrice .origin{color: #D9D9D9;font-size: 16px;font-weight: 500;letter-spacing: -0.64px;text-decoration-line: line-through;}
.classPrice .total{color: #2D2D2D;font-size: 24px;font-weight: 700;letter-spacing: -0.58px;}
.classPrice .MonthPrice{color: #10977c;font-size: 20px;font-weight: 700;letter-spacing: -0.58px;}
.classBtn{margin-top:12px; display: flex; gap:15px;justify-content: flex-end;}
.classBtn a{font-size: 16px;font-weight: 500;letter-spacing: -1.28px;padding:12px 30px;border-radius: 4px;}

.classList.type01{padding: 30px 0;}
.classList.type01 ul{align-items: flex-end;margin-top:0}
.classList.type01 li:nth-child(1){flex-direction: column;gap:20px}


/* 텝 폼 */
.classTab{margin-top: 20px;}
.classTab .tabs-box ul{display: flex;border-bottom: 2px solid #2D2D2D;}
.classTab .tabs-box li{flex:1;text-align: center;border: 1px solid #E2E2E3;}
.classTab .tabs-box li.on{border-color: #2D2D2D;border-bottom-width: 0;}
.classTab .tabs-box li a{display:flex;gap:20px;align-items: center;justify-content: center; padding:10px 0;color: #2D2D2D;font-size: 24px;font-weight: 600;letter-spacing: -0.58px;background-position: center;background-repeat: no-repeat;}
.classTab .tabs-box li em{background-position: center;background-repeat: no-repeat;display: inline-block; width:35px;height: 35px;}
.classTab .tabs-box li em.online{background-image: url(../img/common/ico_online.png);}
.classTab .tabs-box li em.academy{background-image: url(../img/common/ico_academy.png);}
.classTab .tab-panel{display:none;}
.classTab .tab-panel.on{display:block;}
@media (max-width: 999px){
    .classTitle{font-size: 20px;}
    .classList ul{flex-direction: column;}
    .classTab .tabs-box li a{font-size: 18px;}
    .classList.type01{padding: 20px 0;}
    .classList.type01 ul{align-items:unset}
}
@media (max-width: 799px){
    .classList li:nth-child(1){flex-direction: column;}
}
@media (max-width: 499px){
    .classTit{min-width: 100%;}
    .classList{border-bottom: none;}
    .classList ul{gap:30px}
    .classList li:nth-child(2){padding-top:10px;border-top:1px solid #E2E2E3}
    .classList .classInfo{width: 100%;}
    .classPrice .discount{font-size: 14px;}
    .classPrice .origin{font-size: 16px;}
    .classPrice .total{font-size: 20px;}
    .classBtn a{flex:1;text-align: center;}
}

/* 정보 탭 */
.info-Tab{}
.info-Tab .tabs-box ul{display: flex;}
.info-Tab .tabs-box ul li{font-size: 20px;flex:1}
.info-Tab .tabs-box ul li a{display:inline-block;border: 1px solid #E1E1E1;background: #FFF;width: 100%;height:100%;padding:20px;text-align: center;}
.info-Tab .tabs-box ul li a.on{border: 1px solid #E1E1E1;background: #1670DF;color:#fff}

/* 상품이 없을때 */
.noClassArea{text-align: center;padding-top: 160px;padding-bottom: 20px; background:url(../img/common/ico_noClass.png) center top 20px no-repeat;}

/* 페이지 리스트 */
.PagengArea{font-size:18px; margin-top:20px;display: flex;gap:20px;justify-content: center;    align-items: center;}
.PagengArea  span{cursor: pointer;color:#2b2f45;font-weight: 500;}
.PagengArea .prev.on,
.PagengArea .next.on{color:#a5a5a5}
.PagengArea .pageNum{display: flex;gap:15px;align-items: center;}
.PagengArea .pageNum span{color:#a0a8cd}
.PagengArea .pageNum span.on{padding:5px 10px;border-radius: 4px;background-color: #698aff;color: #fff;}

/* 결제 관련 폼 */
/* 주문서 작성 - 상품 */

.oder-title{display: flex; gap: 20px;margin-top: 50px;align-items: center;padding-bottom: 15px;border-bottom: 2px solid #333;}

@media (max-width: 1025px){
    .oder-title{flex-direction: column;align-items: flex-start;gap: 6px;margin-top: 30px;}
}

/* 상품 목록*/
.order-cart-form{border: 1px solid #E8E8E8;margin-top: 20px;}
.order-cart-form > div{text-align: center;}
.order-cart-head{font-size: 18px;display:flex;gap:15px; padding:18px 15px; background: #FAFAFC;border-bottom: 1px solid #E8E8E8;}
.order-cart-goods{width: 100%;padding-left: 50px;}
.order-cart-total{min-width: 50px;text-align: center;}
.order-cart-fee{min-width: 150px;text-align: right;}
.order-cart-disc{width: 100%;max-width: 300px;min-width: 300px;}

.order-cart-info{font-size: 18px;display: flex;gap:15px; align-items: center;padding:15px}
.order-cart-info + .order-cart-info{border-top: 1px solid #E8E8E8}
.order-cart-check{}
.order-cart-check .chk-Box span::before,
.order-cart-check .chk-Box input:checked + span::after{top:4px}
.order-cart-tit{width: 100%}
.order-cart-number{min-width: 50px;text-align: center;}
.order-cart-price{font-size: 16px;display: flex;flex-direction: column;align-items: flex-end;gap:6px; min-width: 150px;}
.order-cart-price .origin{color: #828282;}
.order-cart-price .sale{color: #FB634E;}
.order-cart-price .hot-sale{color: #0055F9;}
.order-cart-coupon{width: 100%;max-width: 300px;min-width: 300px;}
.order-cart-coupon .selected-option{font-size: 16px;overflow: hidden;text-overflow: ellipsis;word-break: keep-all;white-space: nowrap;}

.order-cart-form-mo{display: none;}
.order-cart-form-mo article{display: flex;flex-direction: column;align-items: flex-start;border-top: 1px solid #E5E7EB;padding: 15px 0;}

.order-cart-form-mo article:last-child{border-bottom: 1px solid #E5E7EB;} 
.order-cart-form-mo article > div:nth-child(1),
.order-cart-form-mo article > div:nth-child(2) {flex:1;display: flex;font-weight: 500;}
.order-cart-form-mo article > div:nth-child(2){padding-left: 30px;}
.order-cart-form-mo article .order-cart-coupon{min-width: 100%;max-width: 100%;}
.order-cart-form-mo .order-cart-number + .order-cart-price,
.order-cart-form-mo .order-cart-price + .eq{border-left: 1px solid #000;margin-left: 10px;padding-left: 10px;}
.order-cart-form-mo .hot-sale{padding-left: 30px;color: #0055F9;font-weight: 500;font-size: 14px;}
.order-cart-form-mo .order-cart-price{font-size: 14px;}
@media (max-width: 976px){
    .order-cart-check .chk-Box span::before,
    .order-cart-check .chk-Box input:checked + span::after{top:4px}
    .order-cart-head,
    .order-cart-info{font-size: 15px;gap:10px}
    .order-cart-fee,
    .order-cart-price{min-width: 110px;}
    .order-cart-price{font-size: 15px;}
    .order-cart-disc,
    .order-cart-coupon{max-width: 240px;min-width: 240px;}
    .order-cart-coupon .select-type02{padding:0px 16px}
    .order-cart-coupon .selected-option{padding: 10px 10px 10px 0;}
}

@media (max-width: 720px){
    .order-cart-form{display: none;}
    .order-cart-form-mo{display: block;margin-top: 20px;}
}
@media (max-width: 399px){
    .order-cart-check{font-size: 13px;}
    .order-cart-check .chk-Box{padding-top:5px}
    .order-cart-form-mo .order-cart-number + .order-cart-price, 
    .order-cart-form-mo .order-cart-price + .eq{margin-left: 5px;padding-left: 5px;border-color: #aaa;}
}

.pay-item{display: flex;justify-content: right;gap: 20px;margin-top: 10px;}
.pay-item span + span{margin-left: 5px;}

/* 상품 결제 금액 영역 */
.payArea{margin-top: 30px;padding-bottom: 80px;}
.payArea > ul{display:flex;justify-content: space-around;gap:50px;align-items: center;padding: 30px 30px 30px 10px;border: 1px solid #E8E8E8;background: #FAFAFC;}
.payArea li{display: flex;flex-direction: column;justify-content: space-between;}
.payArea li:nth-child(1){position: relative;}
.payArea > ul > li:nth-child(1)::after{content:'+'; position: absolute;font-size: 32px;color:#A1A1A1;right: -30px;}
.payArea li:nth-child(3){min-width: 180px;position: relative;}
.payArea li:nth-child(3):after,
.payArea li:nth-child(3):before{content: '';display: block; position: absolute;width: 1px;height: 60px;top: -10px;background-color:#E8E8E8 ;}
.payArea li:nth-child(3):after{right: -20px;}
.payArea li:nth-child(3):before{left: -20px;}
/* .payArea li:nth-child(3) > span{display: none;} */
.payArea li:nth-child(4){min-width: 180px;}
.payArea > ul > li > span {margin-bottom: 5px;}
.payArea li span{font-size: 16px;font-weight: 400;}
.payArea li p{font-size: 24px;font-weight: 700;}
.payArea input {padding: 15px 46px;border-radius: 2px;background-color: #0083FE;color:#fff;border:none} 

@media (max-width: 1099px){
    .payArea > ul{padding: 20px 20px 20px 10px;gap: 30px;}
    .payArea li:nth-child(1)::after{right: -20px}
    .payArea li p{font-size: 20px;}
}

@media (max-width: 999px){
    .payArea > ul{padding:20px 30px; flex-direction: column;align-items: normal}
    .payArea > ul > li{flex-direction: initial;}
    .payArea li:nth-child(3),
    .payArea li:nth-child(4){min-width: inherit;}
    .payArea li:nth-child(3) > span{display: block;}
    .payArea li:nth-child(3) .custom-select,
    .payArea li:nth-child(4) .custom-select{min-width: 200px;}
    .payArea li:nth-child(1)::after,
    .payArea li:nth-child(3):after,
    .payArea li:nth-child(3):before{content: none;}
    .payArea input{flex:1}
}
@media (max-width: 449px){
    .pay-item{justify-content: space-between;gap: 10px}
}
@media (max-width: 399px){
    .payArea li:nth-child(3) .custom-select,
    .payArea li:nth-child(4) .custom-select{max-width: 160px;min-width: 160px;}
}


/* 게시판 */
/* FAQ - 상단 조회 영역 */
.noteTbSerach{display: flex;gap:10px;}
.noteTbSerach ul{display: flex;}
.noteTbSerach select{min-width: 180px;height: 35px;}
.noteTbSerach li + li select{margin-left: 10px;} 
.noteTbSerach .searchBtn{padding: 5px 12px;border-radius: 4px;color: #000;background-color: #f1f1f1;border: 1px solid #aaa;}
@media (max-width: 499px){
    .noteTbSerach{flex-direction: column;}
    .noteTbSerach ul{display:grid;grid-template-columns: repeat(2, 1fr);grid-gap:10px}
    .noteTbSerach select{width: 100%;min-width: 100px;height: 29px;}
    .noteTbSerach li + li select{margin-left: 0px;} 
}
.board-wrap .pg_wrap{margin-top: 20px;}

/* 게시판 하단 버튼 */
.form-btn{display: flex;gap:18px;justify-content: center;}
.form-btn .butn{font-size: 18px;}

@media (max-width: 499px){
    .form-btn .butn{font-size: 16px;}
}

/* 동의 폼 색상 - gray */
.agree-form{padding:40px 60px; display: flex; flex-direction: column;gap:20px}
.agree-form.gray{border-top: 2px solid #000;background-color: #F9F9F9;}
.agree-form p {font-size: 18px;font-weight: 700;letter-spacing: -0.72px;}
.agree-form p em{color: #FF2727;}
.agree-form p + ul{margin-top: 30px;padding: 20px 28px;display: flex;flex-direction: column;gap:20px;background-color: #FFF;}
.agree-form li.treaty-choice label{min-width: 60px;display: inline-block;}
@media (max-width: 699px){
    .agree-form{padding:20px;}
    .agree-form p {font-size: 16px;}
    .agree-form p + ul{margin-top: 10px;}
}

/* 필기노트 */

/* 마이페이지 상단 타이틀  - 아마 공통으로 사용예정 */
.content-tit{padding-top:56px;display: flex;}
.content-tit p{color: #2D2D2D;font-size: 27px;font-weight: 500;}
.content-tit .content-sub-tit{font-size: 18px;font-weight: 400;position:relative;padding-left: 16px;}
.content-tit .content-sub-tit:after{content: '';position:absolute;display: inline-block;width:1px;height: 12px;background-color: #000;top: 4px;left:8px}
.content-tit-btn{flex:none;margin-left: auto;}
.content-tit-btn a{font-size: 16px;font-weight: 600; display: inline-block;padding:12px 25px;border-radius: 6px;}
.content-tit-btn a + a{margin-left: 10px;}
.content-tit-btn a.btn__blue{color:#fff;border: 1px solid #0083FE;background: #3B82F6;}
.content-tit-btn a.btn__white{color:#1F2937;border: 1px solid #E5E7EB;background: #fff;}

.content-tit.class-list{flex-direction:row;justify-content: space-between;}
.content-tit.class-list .btn-reset{display: inline-block;width: 126px;height: 42px;background:url(../img/pages/mystudy/new/class_ico_reset.png) center/contain no-repeat; }

/* 셀렉트박스 */
.content-select-area{margin-top: 30px;display: flex;gap:20px;flex-direction: column;}
.btn-pdf{font-size: 16px;font-weight: 500; border-radius: 8px;border: 1px solid #E2E2E3;background: #FFF;padding:10px 48px 10px 28px;background:url(../img/pages/mystudy/new/ico-pdf.png) center right 16px no-repeat; flex:none;margin:0 10px 0 auto}
.custom-select{position: relative;cursor: pointer;border-radius: 8px;}
.selected-option {position: relative;display: block;padding: 10px 0;border-radius: 4px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.selected-option:after{content:'';position: absolute;}
.select-type01{border: 1px solid #E5E7EB;background: #F8FAFC;padding:3px 24px}
.select-type01.custom-select{width:100%}
.select-type02{border: 1px solid #E5E7EB;background: #fff;padding:0px 20px}
.select-type01 .selected-option:after{top:10px;right:4px; background:url(../img/main_new/main_arrow.svg) center right/cover  no-repeat; background-size: 10px;width: 10px;height: 18px;transform: rotate(90deg);}
.select-type02 .selected-option:after{top: 12px;right: 2px;background: url(../img/main_new/main_arrow_B.svg) center right/cover no-repeat;background-size: 8px;width: 8px;height: 15px;transform: rotate(90deg);}
.select-type02 .selected-option.on:after,
.select-type02 .selected-option.on:after{transform: rotate(90deg);}

.slect-multi{display:flex;gap:14px;}
.slect-multi .custom-select{flex-basis: 220px;}
.list-member {z-index: 99;position: absolute;list-style: none;margin: 0;padding: 0;display: none;border: 1px solid #ccc;border-radius: 4px;left: -1px;right: -1px;top: 40px;max-height: 239px; overflow-y: auto;}
.list-member li {padding: 10px 24px;background-color: #fff;border-bottom: 1px solid #ccc;cursor: pointer;}

/* 마이노트 리스트 페이지 */
.content-list-page{margin-top:20px;min-height: 260px}
.content-list-page > h3{font-size: 20px;font-weight: 400;border-bottom:1px solid #000;padding-bottom: 10px;margin-bottom: 20px;}
.content-list-page li + li{margin-top:24px}
.note-list-top{padding-left: 20px;padding-right: 40px;display: flex;justify-content: space-between;align-items: center;}
.note-list-top select{border-radius: 8px;border: 1px solid #E5E7EB;padding: 7px;}
.note-list-box{padding:11px 40px 11px 20px; border-top: 1px solid #E5E7EB;border-bottom: 1px solid #E5E7EB;display: flex;align-items: center;}
.note-list-box .note-list-tit{color:#2D2D2D;font-weight: 500;font-size: 18px;flex:1;overflow: hidden;}
.note-list-box .note-list-tit p{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-break: keep-all;}
.note-list-box .note-list-tit span{font-size: 14px; margin-top:10px;}
.note-list-box .chk-Box{width: 50px;}
.note-list-box .note-list-btn-more{cursor: pointer; flex: none; margin-left: auto;width:150px;height:48px; font-size: 0;background:url(../img/pages/mystudy/new/ico-btn-more-open.svg) center/cover no-repeat;}
.note-list-box .note-list-btn-more.on{background:url(../img/pages/mystudy/new/ico-btn-more-close.svg) center/cover no-repeat;}
.note-list-box .note-list-btn-more button{width: 100%;height: 100%;}

.note-viwe{display:none; margin-top:22px;}
.note-viwe-area{background: #F8FAFC;padding:29px;position: relative;}
.note-viwe-area .chk-Box{position: absolute;top:20px;left:28px}
.note-viwe-area+.note-viwe-area{margin-top:22px}
.note-viwe-area .chk-Box + .note-viwe-text{margin-top: 20px;}
.note-viwe-text{outline:none; min-height: 100px;color: #2D2D2D;font-size: 14px; line-height: 18px;}
.note-viwe-text * {background-color: transparent !important;word-break: break-all;}/* 다른곳에서 문서를 복사해왔을 경우 배경색 투명하게 수정 */
.note-viwe-btn{margin-top: 10px; display: flex;gap: 12px;justify-content: center;}
.note-viwe-btn button{border-radius: 4px;border: 1px solid #DFE3E8;font-size: 15px;font-weight: 600;padding:12px 40px 12px 60px;background-color: #fff !important;}
.note-viwe-btn button.btn-retouch{background: url(../img/pages/mystudy/new/ico-btn-retouch.svg) center left 20px no-repeat }
.note-viwe-btn button.btn-delete{background: url(../img/pages/mystudy/new/ico-btn-delete.svg) center left 20px no-repeat }


@media (max-width: 699px){
    .content-tit{padding-top:28px; align-items: center;}
    .content-tit p{font-size: 24px;font-weight: 500;}
    .content-tit-btn a{font-size: 13px;padding:9px 10px;}
    .content-tit-btn a + a{margin-left: 6px;}
    .content-select-area{gap:12px}
    .slect-multi{flex-direction: column;gap:12px}
    .slect-multi .custom-select{flex-basis: auto;}
    .btn-pdf{font-size: 14px;padding: 6px 35px 6px 18px;background: url(../img/pages/mystudy/new/ico-pdf.png) center right 8px no-repeat;background-size: 22px;margin:0 6px 0 auto}
    .note-list-top{padding:0 0 0 10px;margin-bottom:20px}
    .note-list-top select{padding: 2px;}
    .select-type01,
    .select-type02{padding:3px 10px 3px 20px}
    .select-type01 .selected-option:after,
    .select-type02 .selected-option:after{right:6px}
    .selected-option{padding:6px 16px 6px 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    .list-member{top:36px}
    .list-member li:last-child{border-bottom: none;}
    .note-list-box{padding: 11px 5px 11px 10px;}
    .note-list-box .note-list-btn-more{width: 16px;height:16px; background: url(../img/main_new/main_arrow.svg) center right no-repeat; transform: rotate(90deg);}
    .note-list-box .note-list-btn-more.on{background: url(../img/main_new/main_arrow.svg) center right no-repeat;transform: rotate(270deg);}
    .content-list-page > h3{font-size: 16px;}
    .content-list-page li + li{margin-top:0}
    .content-list-page li + li .note-list-box{border-bottom-width:0px}
    .content-list-page li:last-child .note-list-box{border-bottom-width:1px}
    .note-viwe{margin: 0;padding:15px 0}
    .note-viwe-btn{justify-content: flex-end;}
    .note-viwe-btn button.btn-retouch,
    .note-viwe-btn button.btn-delete{background-color: transparent !important;border-color:transparent}
    .content-tit.class-list .btn-reset{width: 90px;height: 31px;}
}

@media (max-width: 499px){
    .content-tit-btn a{font-weight: 500;}
    .note-viwe-btn button{padding:10px 20px 10px 30px}
    .note-viwe-btn button.btn-retouch,
    .note-viwe-btn button.btn-delete{background-position-x:6px;}
    .note-viwe-area{padding:14px}
    .note-viwe-area .chk-Box{top: 10px;left: 14px;right:0}
    .note-viwe-area .chk-Box span{display:block;height: 21px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
    .note-list-box .chk-Box{width:30px;}
    .note-list-box .note-list-tit p{font-size: 14px;}
    .note-list-box .note-list-tit span{font-size: 12px;}
}

/* 단과 강좌 */
.class-list-box{margin-top: 45px;}
.class-list-box dt{background: #0006EB;color:#fff;display: flex;padding: 15px 0 15px 80px;}
.class-list-box dt span{color:#fff;font-size: 18px;font-weight: 600;flex: 1;}

.class-list-box dd{display:flex;padding:15px 0 30px 80px;border: 1px solid #EFEFEF;background-color: #f5f5f5}
.class-list-box dd div{flex:1}
.class-list-box dd span{cursor: pointer; display: block;font-size: 16px;font-weight: 500;line-height: 32px;}
.class-list-box dd span.eq{cursor: pointer; color: #0006EB;text-decoration: underline;}
.class-list-box dl.pc{background:#f5f5f5}
.class-list-box .list-member li.eq{color: #0006EB;}

.class-btn-area{margin:30px 0;display: flex;justify-content: space-between;align-items: center;}
.class-btn-area > div{display: flex;gap:10px}
.class-btn-area a{font-size: 16px;font-weight: 600;padding:10px 16px;border-radius: 6px;}
.class-btn-area a.class-btn-white{border: 1px solid #2563EB;color:#2563EB}
.class-btn-area a.class-btn-blue{border: 1px solid #2563EB;color:#fff;background-color: #0055F9;}

/* 강좌 리스트 */
.class-list-area + .class-list-area ul{border-top:none}
.class-list-area ul{border-top: 1px solid #E2E2E3;}
.class-list-area li{padding:20px 30px;; display: flex;align-items: center;border-bottom: 1px solid #E2E2E3;}
.class-list-area .class-tit{ font-size: 18px;font-weight: 500;width:100px;}
.class-list-area .class-sub-tit{position:relative; color: #2D2D2D;font-size: 18px; font-weight: 400;flex:1; display: flex;flex-direction: column;gap:5px}
.class-list-area .class-sub-tit p{font-weight: 500}
.class-list-area .class-sub-tit em{color: #2d2d2d;font-size: 15px;font-weight: 500}
.class-list-area .class-sub-tit span{color: #0055F9;font-size: 18px;font-weight: 400;}
.class-list-area .class-sub-tit .tags{position: absolute;top:-30px;left:0;display: flex;gap:5px}
.class-list-area .class-sub-tit .tags span{display: inline-block;padding:4px 5px; color:#fff;font-size: 13px;line-height: 13px;font-weight: 400;border-radius: 4px;}
.class-list-area .class-sub-tit .tags span.new{background-color: #FF3D12;}
.class-list-area .class-sub-tit .tags span.all{background-color: #1B376D;}
.class-list-area .class-sub-tit .tags span.popul{background-color: #6F6CD9;}
.class-list-area .class-sub-tit .tags span.pass{background-color: #FFBE17;}
.class-list-area .class-sub-tit .tags span.single{background-color: #2771FF;}
.class-list-area .class-sub-tit .tags span.sugges{background-color: #E929BA;}
.class-list-area .class-sub-tit .tags span.data24_01{background-color: #01A9DB;}
.class-list-area .class-sub-tit .tags span.data24_02{background-color: #11AF22;}
.class-list-area .class-sub-tit .tags span.data24_03{background-color: #168CE2;}
.class-list-area .class-sub-tit .tags span.data24_04{background-color: #B48C10;}
.class-list-area .class-sub-tit .tags span.data25_01{background-color: #FF5A5A;}
.class-list-area .class-teach{font-size: 18px;line-height: 27px;font-weight: 400;text-align: center; width:200px;flex:none;margin-left:auto}
.class-list-area .class-cost{display: flex;flex-direction: column; gap:8px;flex:none;margin-left:auto;width: 320px;}
.class-list-area .class-cost span{color: #2D2D2D;font-size: 18px;font-weight: 600;}
.class-list-area .class-cost span em{color: #2D2D2D;font-size: 16px;font-weight: 500;}
.class-list-area .class-cost em.discount{color: #2E5AF6;font-weight: 400;}
.class-list-area .class-cost em.origin-cost{color: #B4B4B4;font-weight: 400;text-decoration: line-through;}
.class-list-area .class-cost .chk-Box span{padding-left: 25px;}
.class-list-area .class-cost .chk-Box span::before,
.class-list-area .class-cost .chk-Box input:checked + span::after{top: -1px;}
.class-list-box .content-select-area{display: none;}

@media (max-width: 1023px){.class-list-area .class-tit{font-size: 16px;width: 70px;}.class-list-area .class-teach{width: 100px;}.class-list-area .class-sub-tit{font-size: 16px;}.class-list-area .class-cost span{font-size: 20px;}.class-list-area .class-cost em{font-size: 16px;}}
@media (max-width: 859px){.class-list-area li{flex-direction: column; padding:20px;}.class-list-area .class-tit,.class-list-area .class-sub-tit,.class-list-area .class-teach{width: 100%;text-align: left;}.class-list-area .class-sub-tit{padding-top: 0;}.class-list-area .class-sub-tit .tags{top: -53px;}.class-list-area .class-sub-tit .tags + p{padding-top:0px;}.class-list-area .class-cost{width: auto;}}
@media (max-width: 759px){.class-list-box{margin-top: 25px;}.class-list-box dl.pc{display: none;}.class-list-box .content-select-area{display: unset;}}
@media (max-width: 549px){.class-btn-area a{font-size: 13px;padding: 8px 12px;}.class-list-area li{gap: 5px;}.class-list-area .class-cost{padding-top: 10px;width: 100%;}.class-list-area .class-cost span{font-size: 18px;}.class-list-area .class-cost em{font-size: 14px;}.class-list-area .class-cost .chk-Box span{padding-left: 26px;}.class-list-area .class-sub-tit p,.class-list-area .class-sub-tit span{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}}
@media (max-width: 399px){.class-list-area .class-cost{margin-left: 0px;}}

/* 강의 상세 페이지 */
/* 상단 이미지 텍스트 */
.class-detail{}
.class-detail .img-tit{position: absolute;top: 50px;left:30px;z-index: 9;font-size: 27px;color: #14204F;font-weight: 400;line-height: 42px;}
.class-detail .img-tit em{font-weight: 700;}
/* .img-sub-tit{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 20px;color:#fff; background: rgba(0, 0, 0, 0.42) url(../img/pages/mystudy/new/class-ico-video-view.png) center right 15px/120px no-repeat;font-weight: 500;position: absolute;bottom: 0px;left:0px;right:0;z-index: 9;padding:20px 150px 20px 25px} */
.img-sub-tit{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 20px;color:#fff; background: rgba(0, 0, 0, 0.42) ;font-weight: 500;position: absolute;bottom: 0px;left:0px;right:0;z-index: 9;padding:20px 25px 20px 25px}

@media (max-width: 449px){
    .class-detail .img-tit{top: 20px;left:20px;font-size: 18px;}
    /* .img-sub-tit{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 16px;color:#fff; background: rgba(0, 0, 0, 0.42) url(../img/pages/mystudy/new/class-ico-video-view.png) center right 15px/80px no-repeat;font-weight: 500;position: absolute;bottom: 0px;left:0px;right:0;z-index: 9;padding:10px 150px 10px 25px} */
    .img-sub-tit{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 16px;color:#fff; background: rgba(0, 0, 0, 0.42);font-weight: 400;position: absolute;bottom: 0px;left:0px;right:0;z-index: 9;padding:10px 20px 10px 20px}

}

/* 강의 상세 페이지 하단 탭의 강좌구성 */
.class-composition{margin-top:10px}
.class-composition dt {margin-top:10px;background-color: #0055F9;display: flex;padding: 15px 0;}
.class-composition dt span{color:#fff;font-size: 16px;font-weight: 600;flex: 1;text-align: center;}
.class-composition dd{border-bottom: 1px solid #E2E2E3}
.composition-list{display: flex;}
.composition-list span{color:#2D2D2D;padding: 15px 0;font-size: 15px;font-weight: 500;flex: 1;text-align: center;}
.composition-tb{display: none; background-color: #FAFAFA;padding:20px;border-top: 1px solid #E2E2E3;}
.composition-tb ul div{background-color: #425995;color:#fff;font-size: 16px;font-weight: 500;text-align: center;padding:12px 0}
.composition-tb li{display: flex;background-color: #fff;}
.composition-tb li span{ color:#2D2D2D;font-size: 16px;font-weight: 500;flex: 1;text-align: center;padding:12px 0;border-bottom:1px solid #E2E2E3}
.composition-tb li.class-top{background-color: #EEEFF2;}
.composition-list .list-veiw.no_click{pointer-events: none;}
.composition-list span + span,
.composition-tb li span + span{border-left:1px solid #E2E2E3}
.class-composition-mo{display: none;}
@media (max-width: 849px){
    .class-composition{display: none;}
    .class-composition-mo{display: block;}    
}
/* 강의 상세 페이지 모바일인 경우 */
.class-composition-mo dd{border-radius: 8px;border: 1px solid #E5E7EB;padding:5px}
.class-composition-mo dd + dd{margin-top: 10px;}
.class-composition-mo .composition-list{padding:10px; flex-direction: column;align-items: flex-start;gap:6px}
.class-composition-mo .composition-list span{padding:0;text-align: left;word-break: keep-all;}
.class-composition-mo .composition-list span + span{border: none;}
.class-composition-mo .composition-tb{padding:0; background-color: #fff;border-top: none;}
.class-composition-mo .composition-tb ul{max-height: 240px;overflow-y: auto;}
.class-composition-mo .composition-tb li span{font-size: 14px;font-weight: 500;}
.class-composition-mo .composition-tb li.class-top{background-color: #425995;}
.class-composition-mo .composition-tb li.class-top span{color:#fff;}
.class-composition-mo .composition-tb li span:nth-child(1){flex:.2;}
.class-composition-mo .composition-tb li span:nth-child(2){}
.class-composition-mo .composition-tb li span:nth-child(3){flex:.3;}

/* 강좌 리스트 - 하단 띠 구매 영역*/
.bottom-pay-area{position: fixed;bottom:10px;width:1140px;padding:17px 20px; border-radius: 8px;background: rgb(34 34 34 / 68%);color: #FFF;font-size: 22px;font-weight: 700;display: flex;justify-content: space-between;align-items: center;z-index: 99;}
.bottom-pay-area.on{position: absolute;bottom:-50px;}
.bottom-pay-area .bottom-pay-btn a{display: inline-block;font-size: 16px;border-radius: 6px;padding:12px 50px 12px 30px}
.bottom-pay-area em{margin-left:5px}
.bottom-pay-area .class-btn-white{border: 1px solid #E2E2E3;color:#2D2D2D;background:#fff url(../img/pages/mystudy/new/class_ico_cartv02.png) center right 18px/26px no-repeat;}
.bottom-pay-area .class-btn-blue{margin-left:20px;border: 1px solid #014EFF;color:#fff;background: #014EFF url(../img/pages/mystudy/new/class_ico_registv02.png) center right 18px/24px no-repeat;}
@media (max-width: 1439px){
    .bottom-pay-area{left:10px;width: calc(100% - 20px);}
}
@media (max-width: 549px){
    .bottom-pay-area{font-size: 16px;padding:17px 20px;}
    .bottom-pay-area .bottom-pay-btn{display: flex;}
    .bottom-pay-area .bottom-pay-btn a{padding:0; font-size: 0;width: 42px;height: 42px;}
    .bottom-pay-area .class-btn-white{border:none;background:url(../img/pages/mystudy/new/class_ico_cart.png) center/cover no-repeat; }
    .bottom-pay-area .class-btn-blue{border:none;margin-left:10px;background:url(../img/pages/mystudy/new/class_ico_regist.png) center/cover no-repeat; }
}

/* 학원 상담 예약 정보 폼 */
.consultation-info{background-color: #f6f6f6; padding:20px 50px;border-radius: 10px;margin-bottom: 50px;}
.consultation-info ul{display: flex;align-items: center;gap:50px}
.consultation-info ul + ul{padding-top: 10px;}
.consultation-info .title{font-size: 20px;font-weight: 500;position: relative;}
.consultation-info .title::after{content: '';position: absolute;width: 2px;height: 20px; top: 3px;right:-26px;background-color: #1c1c31;}
.consultation-info .info{font-size: 16px;font-weight: 500;line-height: 24px;}
.consultation-info p{font-size: 14px;color:#4D4D4D}

@media (max-width: 649px){
    .consultation-info{padding:20px;}
    .consultation-info ul{gap:30px;}
    .consultation-info .title{font-size: 16px;word-break: auto-phrase;}
    .consultation-info .title::after{height: 14px;right:-16px}
    .consultation-info .info{font-size: 14px;word-break: auto-phrase;}
    .consultation-info p{font-size: 12px;}
}
@media (max-width: 519px){
    .consultation-info ul{gap:20px;}
    .consultation-info .title::after{content: none;}
    .consultation-info .title{font-size: 14px;}
    .consultation-info .info{font-size: 14px;}
    .consultation-info p{margin-top: 10px;}
}


/* 학원 교재 리스트 */
.campus-list-book{}
.campus-list-book li{display: flex;align-items: center;border:solid #E5E7EB;border-width: 1px 0;padding:10px 0}
.campus-list-book li + li{margin-top: 20px;}
.campus-list-book li > div:last-child{display: flex;flex: 1;}
.campus-list-book .tit{font-weight: 500;flex:none;margin-right: auto;padding-left:30px}
.campus-list-book .tit p{font-size: 18px;margin-bottom: 10px;}
.campus-list-book .tit span{font-size: 14px;}
.campus-list-book .class-cost{display: flex; align-items: center;}
.campus-list-book .class-cost em{font-size: 20px;font-weight: 400;}
.campus-list-book .class-cost .discount{color: #2E5AF6;}
.campus-list-book .class-cost .dis-price{color: #B4B4B4;text-decoration: line-through;}
.campus-list-book .class-cost .price{color: #000;}

.campus-list-book .butn{border-radius: 6px;padding: 12px 25px;font-size: 16px;margin-left:60px}

.campus-list-book .content-select-area{margin-bottom:20px}

@media (max-width: 890px){
    .campus-list-book ul{border-top: 1px solid #E5E7EB;}
    .campus-list-book li{align-items: flex-start;border-width: 0;}
    .campus-list-book li + li{margin-top: 0;border-top: 1px solid #E5E7EB;}
    .campus-list-book li > div:last-child{flex-direction: column; gap: 20px;}
    .campus-list-book .tit p{font-size: 16px;}
    .campus-list-book .tit{padding-left: 10px;}
    .campus-list-book .class-cost{justify-content: flex-end;}
    .campus-list-book .butn{flex: none;margin: auto;}
}


.campus-noti{border: 1px solid #E5E7EB;background: #FBFBFB;padding:10px 10px 10px 26px}
.campus-noti .login,
.campus-noti .pay{display: flex;justify-content: space-between;align-items: center;}
.campus-noti a{color: #0055F9;font-size: 15px;font-weight: 600;padding:12px 20px;min-width: 120px;text-align: center; border-radius: 6px;border: 1px solid #E5E7EB;background: #fff;box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);}

@media (max-width: 590px){
    .campus-noti{padding:20px}
    .campus-noti .login,
    .campus-noti .pay{flex-direction: column;gap:10px}
    .campus-noti .default span{display: block;}
}


/* 브랜딩페이지 11/24 */
.sub-wrap.branding img{max-width: 100%;}
.branding_main{display: flex;flex-direction: column;align-items: center;}
.branding_main.mo{display: none;}
@media (max-width: 1440px){
    .sub-wrap.branding{ padding-top: 0;}
}

@media (max-width: 760px){
    .branding_main{display: none;}
    .branding_main.mo{display: flex;flex-direction: column;}
}

.branding_01{position: relative;background-color: #181d31;}
.branding_01 > div{height: 80%;transform: translate(-50%, -50%);position: absolute;top: 50%;left: 50%;}
.branding_01 .swiper-container{width: 1000px; height: 100%;overflow: hidden;}
.branding_01 .swiper-container:after,
.branding_01 .swiper-container:before{content:'';display: block;height: 50px;width: 100%; position: absolute;left: 0;right: 0;z-index: 9;opacity: .8;}
.branding_01 .swiper-container:after{top:0;background-color: #181d31;box-shadow: 1px 20px 12px 20px rgba(24, 29 , 49, 1);}
.branding_01 .swiper-container:before{bottom:0;background-color: #151828;box-shadow: -1px -18px 12px 20px rgba(21 , 24 , 40, 1);}
.branding_01 .mo{display: none;}
.branding_01 .swiper-wrapper{transition-timing-function: linear}
.branding_01 .textSwiper img{object-fit: contain;}
.branding_main:nth-child(2){margin-top:-1px;}
.branding_main:nth-child(3){margin-top:-1px;}
.branding_main:nth-child(4){margin-top:-2px;}

@media (max-width: 1018px){
    .branding_01 .swiper-container{width: 100%;}
    .branding_01 .swiper-container:after,
    .branding_01 .swiper-container:before{height: 35px;}
}
@media (max-width: 658px){
    .branding_01 > div{height: 100%;width: max-content;}
    .branding_01 .swiper-container:after,
    .branding_01 .swiper-container:before{height: 25px;}
    .branding_01 .swiper-container:after{box-shadow: 0px 10px 10px 0px rgba(24, 29 , 49, 1);}
    .branding_01 .swiper-container:before{box-shadow:0px -10px 12px 10px rgba(21 , 24 , 40, 1)}
}

.branding_wing{position: fixed;width:160px;top: 200px; right:10px;display: flex;flex-direction: column;gap:10px;z-index: 19;}
.branding_wing .mo{display: none;}
@media (max-width: 1200px){
    .branding_wing {width:80px;}
    .branding_wing .pc{display: none;}
    .branding_wing .mo{display: unset;}
}

/* 온라인 실기 커리큘럼 */
.online-sil{}
.online-sil .font-zero{font-size: 0;}
/* 온라인 실기 커리큘럼 - 하단 띠 배너 */
.bottom-mo-banner{position: fixed;display:flex;bottom : 0;left: 0;right: 0;z-index: 99;}
.bottom-mo-banner a{display: inline-block;flex: 1;color:#fff;background-color: #19293f;font-size: 6vw;text-align: center;line-height: 100%;padding: 15px 0;}
.bottom-mo-banner a:last-child{background-color: #00ae46;}