@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');

._inBlock {
    display: inline-block;
    vertical-align: top;
}

._hide {
    display: none !important;
}

.poRe {
    position: relative;
}

.poAb {
    position: absolute;
}

.poFix {
    position: fixed !important;
}

.lecViewDv {
    font-family: "Noto Sans KR", sans-serif !important;
    font-size: 0;
}

.lecVw {
    margin-bottom: 36px;
}

input[type="radio"] {
    display: none;
}

input[type=radio]+label {
    display: inline-block;
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
    cursor: pointer;
    width: auto;
    /* height: 20px; */
    background: url('/assets/data/img/icon/modal/radio.svg') no-repeat left top 1px;
    padding-left: 27px;
    font-size: 14px;
    /* line-height: 20px; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* margin-bottom: 10px; */
    margin-right: 22px;
}

input[type=radio]:checked+label {
    background: url('/assets/data/img/icon/modal/radio_on.svg') no-repeat left top 1px;
}

/* 비활성화(disabled)인 경우 */
input[type=radio]:disabled+label {
    background: url('/assets/data/img/icon/modal/radio_disable.svg') no-repeat left top 1px;
    cursor: not-allowed;
    /* 마우스 커서 변경 */
    /* opacity: 0.6; */
    /* 흐리게 */
}

input[type=radio]+label>b {
    font-weight: bold;
}

input[type="checkbox"] {
    display: none;
}

input[type=checkbox]+label {
    display: inline-block;
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
    cursor: pointer;
    width: auto;
    /* height: 20px; */
    height: auto;
    background: url('/assets/data/img/icon/modal/check.svg') no-repeat left center;
    padding-left: 27px;
    /* margin-right: 20px; */
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input[type=checkbox]:checked+label {
    background: url('/assets/data/img/icon/modal/check_on.svg') no-repeat left center;
}

input[type="radio"]+label span {
    background: none;
    width: auto;
    height: auto;
    margin: 0px;
}

input[type="radio"]:checked+label span {
    background: none;
}

.conSec {
    position: relative;
    width: 100%;
    font-size: 0;
}

.conDiv {
    margin: 0 auto;
    width: 100%;
    position: relative;
}

.leftArea {
    width: 798px;
}

.lectureArea {
    width: 760px;
}

.rightArea {
    flex: 1 1 0%;
    align-self: flex-start;
    position: sticky;
    top: 0px;
    overflow-y: auto;
    width: 302px;
    height: calc(100vh - 240px);
    background: #F8FAFB;
}

.rightArea::-webkit-scrollbar {
    display: none;
}


.rightBox {
    margin-top: 14px;
    margin-left: 16px;
    box-shadow: 0px 1px 4px 0px #8898AF66;
    border-radius: 16px;
    padding-top: 20px;
    background: white;
    width: 270px;
}

.rightBox .typeImgBox {
    margin: 0px 20px 10px 20px;
    position: relative;

}

.rightBox .typeImgBoxYellow {
    background: #FFCC0026;
    padding: 10px 12px;
    border-radius: 8px;
}

/* .typeImgBoxYellow>div:first-child {
    font-size: 13px;
    font-weight: 700;
    color: #191E24;
} */

.typeImgBoxYellow>div:nth-child(2) {
    font-size: 13px;
    font-weight: 700;
    color: #191E24;
}

.typeImgBoxYellow>div:nth-child(3) {
    font-size: 16px;
    font-weight: 700;
    color: #191E24;
}

.rightBox .typeImgBoxGreen {
    background: #EEFDED;
    padding: 8px 12px;
    border-radius: 8px;
}

.typeImgBoxGreen>div:nth-child(2) {
    font-size: 13px;
    font-weight: 700;
    color: #126A0C;
}

.rightBox ._hr {
    width: 100%;
    height: 1px;
    background: #DEE4ED;
}

.rightBox .typeImg {
    position: absolute;
}

.rightBox ._LecTitle {
    font-size: 14px;
    font-weight: 700;
    color: #404040;
    padding-left: 20px;
    padding-right: 20px;
}

.rightBox ._couponText {
    font-size: 12px;
    font-weight: 400;
    color: #737373;
    width: 100%;
    padding: 8px 20px 1px 20px;
}

.rightBox .price_row {
    display: flex;
    padding: 0px 20px;
    column-gap: 4px;
    align-items: center;
}


.rightBox .price_area .price_row .price_row_rate {
    font-size: 18px;
    font-weight: 700;
    color: #F51000;
    letter-spacing: -0.6px;
}


.rightBox .price_area .price_row .price_row_price {
    font-size: 20px;
    font-weight: 700;
    color: #040404;
}

.rightBox .blueBox {
    border-radius: 8px;
    padding: 10px;
    font-size: 12px;
    font-weight: 400;
    margin: 8px 20px 0px 20px;
    color: #66768F;
    cursor: pointer;
    background: #F5F7F9;
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.rightBox .blueBoxRowTitle {
    background: url('/assets/img/classView/r_select_arrow.svg') right 10px center no-repeat;
    justify-content: space-between;
    row-gap: 4px;
    font-weight: 700;
}

.rightBox .blueBoxRowTitle.open {
    background: url('/assets/img/classView/r_select_arrow_off.svg') right 10px center no-repeat;
}



.rightBox .blueBoxRow {
    justify-content: space-between;
    row-gap: 4px;
    display: none;
    /* 기본은 닫혀있음 */
}

.rightBox .blueBoxRow.open {
    display: flex;
    /* 기본은 닫혀있음 */
}

._mt20 {
    margin-top: 20px;
}

.rightBox .couponUseable {
    border: 1px solid #D9EDFC;
    border-radius: 4px;
    background: #F1F8FE;
    font-size: 12px;
    font-weight: 700;
    color: #1082DA;
    padding: 7.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 4px;
    margin: 10px 20px 0px 20px;
    cursor: pointer;
}

.rightBox .addOption {
    font-size: 13px;
    margin-top: 20px;
    margin-left: 20px;
    font-weight: 700;
    color: #737373;
}

.rightBox .dateListArea {
    font-size: 13px;
    margin-top: 20px;
    margin-left: 20px;
    font-weight: 700;
    color: #737373;
    align-items: center;
    display: flex;
    column-gap: 4px;
    position: relative;
}

.rightBox .dateList {
    display: flex;
    margin-top: 10px;
    padding: 0px 20px 0px 20px;
    flex-direction: column;
    row-gap: 10px;
}

.rightBox .addOptionList {
    display: flex;
    /* margin-top: 10px; */
    padding: 0px 20px 0px 20px;
    flex-direction: column;
    /* row-gap: 10px; */
    /* max-height: 270px; */
    /* overflow: auto; */
    margin-right: 8px;
}

.rightBox .selectTitle {
    font-size: 13px;
    font-weight: 700;
    width: 230px;
}

.rightBox ._selectCustom {
    width: 212px;
    border: 1px solid #A6B2C4;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
    margin-top: 6px;
    padding: 8px 8px;
    background: url('/assets/img/classView/r_select_arrow.svg') right 15px center no-repeat;
    cursor: pointer;
}

.rightBox .checkbox_option_title {
    font-size: 13px;
}

.rightBox ._selectCustom.open {
    background: url('/assets/img/classView/r_select_arrow_off.svg') right 15px center no-repeat;
}

.rightBox .selectBox {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rightBox ._selectCustom span {
    font-size: 13px;
    font-weight: 400;
    color: #E83534;
}

.rightBox ._optionArea {
    position: relative;
}

.add_select_option {
    padding: 5px 12px;
    width: calc(100% - 18px) !important;
}


.rightBox ._optionList {
    /* position: absolute; */
    background-color: white;
    border: 1px solid #A6B2C4;
    border-radius: 8px;
    /* padding: 8px 8px; */
    width: 228px;
    display: none;
}

.rightBox .option {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #A6B2C4;
    /* 기본은 모두 적용 */
}

.rightBox .option.off {
    background-color: #F8FAFB;
    color: #A6B2C4;
}

.rightBox .option.off span {
    color: #A6B2C4;
}

.rightBox .option.off:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* 마지막 옵션 제외 */
.rightBox .option:last-child {
    border-bottom: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.rightBox .option:not(.off):hover {
    background: #F1F8FE;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.rightBox .option_text1 {
    font-size: 14px;
    font-weight: 700;
}

.rightBox .option_text1 span {
    color: #E83534;
}

.rightBox .option_text2 {
    font-size: 12px;
    font-weight: 400;
    color: #2F3642;
}

.rightBox .option_text3 {
    font-size: 12px;
    font-weight: 400;
    color: #2F3642;
}

/*
.addOptionList::-webkit-scrollbar {
    width: 5px;
}

.addOptionList::-webkit-scrollbar-track {
    background: transparent;
}

.addOptionList::-webkit-scrollbar-thumb {
    background: #66768F;
    border: 3px solid #66768F;
    border-radius: 3px;
}
*/

.rightBox .dateList .radio_option_title {
    font-size: 14px;
    font-weight: 700;
    color: #191919;
    display: flex;
    column-gap: 2px;
}

.rightBox .dateList .radio_option_title span {
    color: #E83534
}

.rightBox .dateList .radio_option_content {
    font-size: 12px;
    font-weight: 400;
}

input[type=radio]:disabled+label .radio_option_title {
    color: #8898AF;
    /* 기본 글씨 흐리게 */
}

input[type=radio]:disabled+label .radio_option_title span {
    color: #8898AF;
    /* 강조 부분도 동일하게 흐리게 */
}

input[type=radio]:disabled+label .radio_option_content {
    color: #8898AF;
    /* 설명 부분도 흐리게 */
}

.rightBox .dateContext {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 10px;
    border-radius: 8px;
    border-bottom-left-radius: 0px;
    background: #2F3642;
    color: #FFFFFF;
    top: -54px;
    left: 92px;
    display: none;
    /* 기본은 숨김 */
}

.rightBox .dateListArea img {
    margin-top: 1px;
    cursor: pointer;
}

.rightBox .dateListArea img:hover+.dateContext {
    display: block;
    /* 마우스 오버 시 노출 */
}

.rightBox ._bottomArea {
    padding: 16px 20px 20px 20px;
}

.rightBox ._bottomArea ._btns {
    display: inline-flex;
    gap: 8px;
}

.rightBox ._btn1 {
    width: 50px;
    height: 50px;
    background: #EFF2F6 url('/assets/img/classView/r_cart_icon.svg') left 14px center no-repeat;
    border-radius: 8px;
    cursor: pointer;
}


.rightBox ._btn1.active {
    width: 48px;
    height: 48px;
    background: white url('/assets/img/classView/r_cart_active_icon.svg') left 14px center no-repeat;
    border: 1px solid #8898AF;
    background-size: 27px auto;
}

.rightBox ._btn2 {
    width: 172px;
    height: 50px;
    background-color: #EFF2F6;
    border-radius: 8px;
    color: #A6B2C4;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 6px;
    cursor: pointer;
}

.rightBox ._btn2.active {
    background-color: #2754E7;
    color: white;
}

.rightBox ._btn2.active img {
    display: none;
}

.rightBox ._btn3 {
    margin-top: 8px;
    width: 100%;
    height: 40px;
    background-color: #F8FAFB;
    border: 1px solid #DEE4ED;
    border-radius: 8px;
    color: #4A5668;
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


.lecVwDv {
    display: flex;
    width: 1100px;
    margin: auto;
}

.lecNav {
    height: auto;
    margin-top: 27px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #404040;
    font-weight: 400;
    background: #fff;
}

.lecNavDiv {
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-direction: row;
}

.lecNav_left {}

.lecNav_right {}

.lecNav_right ._share_icon {
    cursor: pointer;
}

.navIcn {
    background: url('/assets/template/1/img/event/home_icon.png') left center no-repeat, url('/assets/template/1/img/event/arrow_icon.png') right center no-repeat;
    padding: 0 21px;
}

.navIcn1 {
    background: url('/assets/template/1/img/event/arrow_icon.png') right center no-repeat;
    padding: 0 21px 0 13px
}

.navIcn:last-child {
    background: none;
    padding-left: 13px;
}

.lecVwTit {
    margin-bottom: 28px;
}

.lecImg {
    width: 269px;
    height: 162px;
    border-radius: 8px;
    position: relative;
}

.lecImg .mainImg {
    border: 1px solid #e1e1e1;
    width: 269px;
    height: 162px;
    border-radius: 8px;
}

.lecImg .badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 4px;
}

.lecImg .preview {
    position: absolute;
    bottom: 8px;
    left: 10px;
    background: #F5F7F9;
    border-radius: 8px;
    width: 250px;
    height: 36px;
    color: #191919;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    opacity: 0.9;
}


.lecImg .preview img {
    width: 20px;
    height: 20px;
}

.lecVwInfo {
    border: 1px solid #EFF2F6;
    background: #F8FAFB;
    padding: 16px 20px;
    font-size: 13px;
    color: #191E24;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 10px;
    border-radius: 12px;
}

.lecVwInfo div {
    width: 215px;
    color: #66768F;
    font-weight: 700;
}


.lecVwInfo ._text2 {
    color: #191E24;
    font-weight: 400;
    margin-left: 8px;
}

.top_fixed {
    position: fixed;
    top: 0;
    /* left: 0; */
    z-index: 9999;
    left: 49.2%;
    transform: translateX(calc(27.5% - 760px));
    width: 800px;
    height: 60px;
}

.tabList_fixed {
    margin-top: 0px !important;
    border-top: 0px !important;
}


.tabListPcArea {
    position: relative;
}

.leftArea .tabList {
    display: flex;
    gap: 58px;
    width: 100%;
    flex-direction: row;
    border-top: 1px solid #DEE4ED;
    border-bottom: 1px solid #DEE4ED;
    border-right: 0px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 0px 20px;
    width: auto;
    background: white;
}

.leftArea .tabList .tab {
    padding: 15px 0px 13px 0px;
    border-bottom: 4px solid white;
}

.leftArea .tabList .tab.active {
    color: #2094EE;
    border-bottom: 4px solid #2094EE;
    font-weight: 700;
}


.leftArea .tabList .tab span {
    color: #2094EE;
}

.leftArea .tabList .tab:hover {
    color: #2094EE;
    font-weight: 700;
    border-bottom: 4px solid #2094EE;
}

.title_20_700_black {
    font-size: 20px;
    font-weight: 700;
    color: #191919;
}

.title_24_700_black {
    font-size: 20px;
    font-weight: 700;
    color: #191919;
}

._mt30 {
    margin-top: 30px;
}

._mt50 {
    margin-top: 50px;
}

._mt100 {
    margin-top: 100px;
}

._mt80 {
    margin-top: 80px;
}


.lectureIntoduce .intro_blueBox {
    background: #F8FAFB;
    border: 1px solid #DEE4ED;
    border-radius: 12px;
    margin-top: 24px;
    padding: 14px 20px;
}

.lectureIntoduce .intro_blueBox ._title {
    font-size: 18px;
    font-weight: 700;
}

.lectureIntoduce .intro_blueBox ._content {
    font-size: 16px;
    font-weight: 400;
    margin-top: 4px;
}

.lectureIntoduce .lectureContents {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.lectureIntoduce .lectureContents .lectureContent {
    border-radius: 12px;
    padding: 15px 20px 15px 48px;
    font-size: 16px;
    font-weight: 400;
    color: #191919;
    background: #F1F8FE url('/assets/img/classView/l_check_icon.svg') left 20px center no-repeat;

}

.applyToUser .applyList {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.needBackKnow .needBackData {
    font-size: 16px;
    font-weight: 400;
    margin-top: 12px;
    color: #595959;
}

.applyToUser .freeTalk {
    font-size: 16px;
    font-weight: 400;
    margin-top: 8px;
    color: #191919;
    width: auto;
    overflow-x: auto;
}

.applyToUser .freeTalk img {
    width: 100%;
}

.applyToUser .applyList .applyItem {
    font-size: 16px;
    font-weight: 400;
    color: #191919;
    padding-left: 18px;
    background: url('/assets/img/classView/l_blue_point.svg') left 0px center no-repeat;
}

.otImg {
    max-width: 100%;
    margin-bottom: 50px;
}

.lecTitWrp {
    width: 459px;
    margin-left: 16px;
    margin-right: 16px;
}


.disbge {
    margin: 0 10px 0 9px;
    padding: 0 6px;
    height: 19px;
    line-height: 19px;
    text-align: center;
    border-radius: 2px;
    background-color: #f93757;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    margin-top: 2px;
}

.badge .new {
    width: 30px;
    height: 18px;
    background: url("/assets/template/1/img/list/new-icon.jpg") no-repeat center;
    margin: 0 2.5px;
}

.badge .best {
    width: 30px;
    height: 18px;
    background: url("/assets/template/1/img/list/best-icon.jpg") no-repeat center;
    margin: 0 2.5px;
}

.badge .certi {
    color: #1a9711;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #999999;
}

.badge .classtag img {
    height: 19px;
}

.badge.classtag_best {
    height: 19px;
}

.bedge.classtag_new {
    height: 19px;
}

.bedge.classtag_openAlarm {
    height: 19px;
}

.bedge.classtag_nearDeadline {
    height: 19px;
}

.badge .retake {
    width: 62px;
    height: 18px;
    background: url("/assets/template/1/img/list/retake-icon.gif")no-repeat center;
    margin: 0 2.5px;
}

.lecSbj {
    font-size: 23.5px;
    color: #16181a;
    font-weight: bold;
    width: 475px;
    line-height: 1.4em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
    overflow: hidden;
}

.lecIntro {
    font-size: 14px;
    font-weight: 400;
    color: #404040;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    margin-top: 6px;
}

.calcDataArea {
    font-size: 12px;
    font-weight: 400;
    color: #595959;
    display: flex;
    gap: 16px;
}

.calcDataArea div {
    margin-top: 8px;
    gap: 3px;
    display: flex;
    align-items: center;
}

.rvwWrp {
    line-height: 34px;
    font-size: 12.5px;
    color: #16181a;
    font-weight: bold;
}

.rvwWrp .star_block {
    display: inline;
    margin-left: 18px;
}

.rvwWrp .star_slash {
    margin-left: 1px;
    margin-right: 2px;
}

.rvwWrp .star_cnt {
    color: #16181a;
    cursor: pointer;
    font-size: 12.5px;
}

.rvwWrp .star_cnt:hover {
    text-decoration: underline;
}

.rvwWrp .star {
    display: inline-block;
    width: 18px;
    height: 12px;
    margin: 0 -3px;
    background: url("/assets/template/1/img/list/star.png") no-repeat center;
}

.rvwWrp .starOff {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin: 0;
    background: url("/assets/template/1/img/list/star_off.png") no-repeat center 1px;
}

.lecSmr {
    font-size: 15px;
    line-height: 140%;
    color: #16181a;
    margin-top: 10px;
    margin-bottom: 24px;
}

.lecTbl {
    border-top: 2px solid #16181a;
    border-bottom: 1px solid #e1e1e1;
    padding: 21px 0 26px 0;
    font-size: 14px;
    color: #16181a;
}

.tblTit {
    width: 129px;
    font-weight: bold;
}

.tblWrp {
    margin-bottom: 4px;
}

.tblWrp:last-child {
    margin-bottom: 0;
}

.tblWrp .sample {
    width: 110px;
    height: 34px;
    background: url("/assets/template/1/img/list/sample.jpg") no-repeat center;
    margin-left: 18px;
}

.tblWrp1 .tblTit,
.tblWrp1 .tblTxt {
    line-height: 34px;
}

.lecAccTbl {
    border-top: 2px solid #16181a;
    border-bottom: 1px solid #e1e1e1;
    margin-bottom: 28px;
}

.lecAccWrp {
    width: 777px;
    padding-left: 15px;
    padding-right: 22px;
    padding-top: 28px;
}

.accTit {
    margin-bottom: 26px;
}

.lecType {
    margin-right: 50px;
    width: 120px;
}

input[type=checkbox]+label {
    padding-left: 36px;
}

.lec_chk span {
    font-weight: bold;
}

.lecTitle {
    width: 480px;
    font-size: 14px;
    color: #16181a;
    line-height: 23px;
}

/* .lecTot {
    line-height: 23px;
    font-weight: 500;
    font-size: 14px;
    color: #7d7e80;
    text-decoration: line-through;
}
.disbge {
    margin: 0 10px 0 9px;
    padding: 0 6px;
    height: 19px;
    line-height: 19px;
    text-align: center;
    border-radius: 2px;
    background-color: #f93757;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    margin-top: 2px;
} */
.lecRes {
    font-size: 18px;
    line-height: 21px;
    color: #16181a;
    font-weight: bold;
    width: 120px;
    text-align: right;
}

.lecRes span {
    font-size: 14px;
    font-weight: normal;
}

.accInfWrp {
    width: 226px;
    padding: 30px 30px 17px 30px;
    background-color: #f8f8f8;
}

.accPx {
    line-height: 20px;
    font-size: 14px;
    color: #1e1e1e;
    margin-bottom: 18px;
}

.accPxTit {
    width: 26px;
}

.accPxTot {
    width: 195px;
    text-align: right;
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
}

.accInf {
    margin-top: 18px;
    padding-top: 13px;
    border-top: 2px solid #cbcbcb;
}

.maxPrcWrp {
    margin-bottom: 10px;
}

.maxTit {
    line-height: 26px;
    font-size: 14px;
    color: #1e1e1e;
    font-weight: bold;
}

.tooltip {
    margin-left: 3px;
    margin-right: 9px;
    width: 16px;
    height: 26px;
    background: url("/assets/data/img/lecture/viewRn/tooltipBtn.png") no-repeat center center;
}

.disbge2 {
    margin: 6px 3px 0 0;
    padding: 0 5px;
    height: 16px;
    line-height: 16px;
    border-radius: 1px;
    font-size: 12px;
    width: 33px;
}

.accRes {
    font-size: 18px;
    font-weight: bold;
    color: #f93757;
    margin-bottom: 13px;
    width: 83px;
    text-align: right;
}

span.saleTxt {
    font-size: 12px;
    font-weight: normal;
    margin-left: -5px;
}

.addCpn {
    width: 226px;
    height: 40px;
    line-height: 40px;
    background: url("/assets/data/img/lecture/viewRn/cpnDwn1.png") no-repeat center center;
    text-indent: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #505ed1;
    margin-bottom: 10px;
    cursor: pointer;
}

.addCpn:hover {
    background: url("/assets/data/img/lecture/viewRn/cpnDwn2.png") no-repeat center center;
}

.addCpn2 {
    background: url("/assets/data/img/lecture/viewRn/cpnDwn3.png") no-repeat center center;
    color: #f93757;
}

.addCpn2:hover {
    background: url("/assets/data/img/lecture/viewRn/cpnDwn4.png") no-repeat center center;
}

.dscBox {
    padding: 10px 11px;
    background-color: #e6e6e6;
    font-size: 12px;
    color: #808080;
    border-radius: 4px;
}

.dscWrp {
    margin-bottom: 3px;
}

.dscWrp:last-child {
    margin-bottom: 0;
}

.dscTit {
    width: 83px;
    letter-spacing: -0.2px;
}

.dscCon {
    width: 117px;
    text-align: right;
}

.toolBx {
    width: 244px;
    height: 194px;
    border: 1px solid #999;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
    background-color: #fff;
    top: 120px;
    left: 0;
    z-index: 2;
    padding: 20px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: -0.24px;
    color: #1e1e1e;
    line-height: 1.57;
}

.toolArw {
    width: 10px;
    height: 9px;
    background: url("/assets/data/img/lecture/viewRn/toolArw.png?v=1") no-repeat center center;
    z-index: 2;
    top: 114px;
    left: 105px;
}

.toolBx span {
    font-weight: 500;
    color: #505ed1;
}

.lecAccBtn {
    text-align: right;
}

.accBtn {
    width: 198px;
    height: 48px;
    line-height: 46px;
    line-height: 48px;
    border-radius: 2px;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #16181a;
    color: #000;
    text-align: center;
    margin-right: 3px;
}

a.accBtn2 {
    background-color: #16181a;
    color: #fff;
}

.accBtn:last-child {
    margin-right: 0;
}

.basket {
    object-fit: contain;
    mix-blend-mode: exclusion;
    margin: 14px 9px 0 0;
}

.lecNav2 {
    height: 52px;
    line-height: 52px;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    margin-bottom: 40px;
    background: #fff;
}

.lecTab {
    width: 220px;
    font-size: 16px;
    text-align: center;
    color: #7d7e80;
    cursor: pointer;
}

.lecTab.on {
    color: #505ed1;
    font-weight: bold;
}

.lecTab.on::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 220px;
    height: 4px;
    background-color: #505ed1;
}

.bannerDv {
    margin-bottom: 72px;
}

.lecDv {
    margin-bottom: 72px;
    padding-bottom: 72px;
    border-bottom: 1px solid #e1e1e1;
}

.intrTit {
    margin-bottom: 24px;
}

.chrcTxt1 {
    font-size: 26px;
    line-height: 36px;
    color: #16181a;
    font-weight: bold;
    text-align: center;
    margin-bottom: 55px;
}

.chrcLst {
    margin-bottom: 40px;
}

.chrcLst:last-child {
    margin-bottom: 0;
}

.chrcCon {
    width: 690px;
    word-break: keep-all;
}

.chrcImg {
    width: 380px;
    height: 208px;
    margin-right: 30px;
}

.chrcTit {
    font-size: 22px;
    font-weight: 500;
    line-height: 22px;
    color: #222;
    padding-left: 35px;
    margin-bottom: 33px;
}

.chrcTit::after {
    content: '▣';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 22px;
}

.chrcTxt {
    padding-left: 10px;
    font-size: 18px;
    line-height: 18px;
    margin-bottom: 10px;
    color: #16181a;
}

.chrcTxt::after {
    content: '·';
    position: absolute;
    left: 0;
    top: 0;
}

.tchTit {
    margin-right: 65px;
}

.tchInfWrp {
    margin-top: 45px;
}

.tchImg {
    margin-top: 17px;
    margin-right: 24px;
    border-radius: 50%;
    overflow: hidden;
    width: 129px;
    height: 129px;
}

.tchImg img {
    width: 100%;
}

.tchTxt1 {
    font-size: 18px;
    font-weight: 500;
    color: #16181a;
    line-height: 18px;
    margin-bottom: 10px;
}

.tchName {
    font-size: 22px;
    font-weight: bold;
    color: #16181a;
    margin-bottom: 20px;
}

.tchName span {
    font-weight: normal;
}

.tchTxt2 {
    font-size: 14px;
    font-weight: 300;
    padding-left: 10px;
    line-height: 23px;
    color: #16181a;
}

.tchTxt2::after {
    content: '·';
    position: absolute;
    left: 0;
    top: 0;
}

.tchNmWrp {
    margin-top: 4px;
}

.tchNm {
    height: 16px;
    line-height: 16px;
    font-size: 15.5px;
    color: #16181a;
    font-weight: bold;
    margin-right: 16px;
    text-align: center;
    cursor: pointer;
}

.tchNm.on::after {
    content: '';
    position: absolute;
    left: 1px;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background-color: #505ed1;
}

.infoTit {
    font-size: 24px;
    line-height: 24px;
    font-weight: bold;
    color: #16181a;
}

.rcmCon {
    margin-top: 24px;
    padding: 38px 32px;
    background-color: #f8f8f8;
}

.rcmTxt {
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 16px;
}

.rcmTxt::after {
    content: '';
    width: 15px;
    height: 15px;
    background: url('/assets/template/1/img/detail-page/check.png') no-repeat left center;
    position: absolute;
    left: 0;
    top: 1px;
}

.rcmTxt:last-child {
    margin-bottom: 0;
}

.cntnTbl {
    margin-top: 24px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #9b9b9b;
    font-size: 14px;
}

.cntnTbl thead tr th {
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-bottom: 1px solid #16181a;
}

.cntnTbl thead tr th:nth-child(1) {
    width: 100px;
}

.cntnTbl thead tr th:nth-child(3) {
    width: 200px;
}

.cntnTbl thead tr th:nth-child(4) {
    width: 150px;
}

.cntnTbl2 thead tr th:nth-child(1) {
    width: 100px;
}

.cntnTbl2 thead tr th:nth-child(3) {
    width: 650px;
}

.cntnTbl2 thead tr th:nth-child(4) {
    width: 150px;
}

.cntnTbl tbody tr td {
    height: 48px;
    line-height: 48px;
    border-bottom: 1px solid #e7e7e7;
}

.cntnTbl tbody tr td:nth-child(1),
.cntnTbl tbody tr td:nth-child(3) {
    text-align: center;
}

.cntnTbl tbody tr td:nth-child(2) {
    padding-left: 56px;
    text-align: left;
}

.cntnTbl2 thead tr td {
    text-align: center;
}

.cntnTbl2 tbody tr td:nth-child(2),
.cntnTbl2 tbody tr td:nth-child(4) {
    padding-left: 0;
    text-align: center;
}

.cntnTbl2 tbody tr td:nth-child(3) {
    padding-left: 56px;
    text-align: left;
}

.plusWrp {
    font-size: 15.5px;
    font-weight: 500;
    text-align: center;
    color: #16181a;
    margin-top: 23px;
    cursor: pointer;
}

.bookImg {
    width: 219px;
    height: 213px;
}

.bookTit {
    width: 500px;
    font-size: 22px;
    font-weight: bold;
    color: #16181a;
    line-height: 1.36;
    word-break: keep-all;
}

a.bookBtn {
    display: block;
    width: 130px;
    height: 44px;
    line-height: 44px;
    border-radius: 2px;
    background-color: #505ed1;
    text-align: center;
    color: #fff;
    letter-spacing: -0.14px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 22px;
}

.rvwTblWrp {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    margin: 24px 0 29px 0;
}

.rvwTbl {
    font-size: 14px;
    color: #16181a;
}

.rvwTbl thead th {
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid grey;
}

.rvwTbl thead th:nth-child(1) {
    width: 100px;
}

.rvwTbl thead th:nth-child(2) {
    width: 820px;
}

.rvwTbl thead th:nth-child(3) {
    width: 80px;
}

.rvwTbl thead th:nth-child(4) {
    width: 100px;
}

.rvwTbl tbody tr {
    border-bottom: 1px solid #ebebeb;
}

.rvwTbl tbody tr:last-child {
    border-bottom: 0;
}

.rvwTbl tbody td {
    padding: 16px 0;
    cursor: pointer;
    text-align: center;
}

.rvwTbl tbody td:nth-child(2) {
    text-align: left;
    padding-left: 30px;
}

.star {
    width: 16px;
    height: 14px;
    background: url("/assets/template/1/img/introduce/star_off.png") no-repeat center center;
    vertical-align: middle;
}

.star.on {
    background: url("/assets/template/1/img/introduce/star_on.png") no-repeat center center;
}

.rv_head:hover {
    background: #f9f9f9;
}

.rcmdDv {
    border-bottom: 0;
}

.rcmdCon {
    margin-top: 22px;
}

.rcmdWrp {
    width: 263px;
    margin-right: 16px;
    position: relative;
    top: 0;
    left: 0;
}

.rcmdWrp:last-child {
    margin-right: 0;
}

.rcmdImg {
    width: 260px;
    height: 208px;
    border: 1px solid #e1e1e1;
}

.rcmdSbj {
    display: block;
    font-size: 17px;
    font-weight: 500;
    color: #16181a;
    margin: 11px 0 18px 0;
    height: 80px;
}

.tchrWrp {
    font-size: 14px;
    line-height: 14px;
    color: #16181a;
}

.tchMore {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.71;
    text-align: left;
    color: #16181a;
    padding: 14px;
    border: solid 1px #ccc;
    background-color: #fff;
    margin-top: 4px;
}

.moreTrg {
    padding-left: 5px;
    cursor: pointer;
}

.moreTrg img {
    transform-origin: center 50%;
    vertical-align: -3px;
}

._lodingDiv {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
}

._lodingBg {
    width: 184px;
    height: 184px;
    background: url('/assets/data/img/icon/loading/loading_img.png') no-repeat center;
    display: inline-block;
    margin-top: calc(25% - 30px);
}

._lodingCn {
    width: 184px;
    height: 184px;
    display: inline-block;
    margin-top: calc(25% - 30px);
    position: absolute;
    top: 0;
    left: calc(50% - 92px);
}

.loginGifImg {
    margin-top: 70px;
}


._modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    font-size: 0;
    opacity: 0;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

._modalBg {
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    cursor: pointer;
}

._modalWrp {
    background: #FFFFFF;
    z-index: 10001;
    position: absolute;
    width: 550px;
    height: 592px;
    left: calc(50% - 275px);
    top: calc(50% - 296px);
    padding: 50px;
    border-radius: 4px;
    box-sizing: border-box;
}

._modalTop {
    margin-bottom: 10px;
}

._tmdTxt1 {
    font-size: 20px;
    color: #1e1e1e;
    margin-bottom: 10px;
}

._tmdTxt1 span {
    color: #505ed1;
    font-weight: bold;
}

._mdTopBox {
    padding: 10px 20px;
    background: #f7f7f7;
}

._tmdTxt2 {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.57;
    margin-bottom: 10px;
}

._tmdTxt3 {
    font-size: 12px;
    line-height: 2.08;
    color: #1e1e1e;
    padding-left: 10px;
}

._tmdTxt3::after {
    content: "·";
    position: absolute;
    left: 0px;
    top: 0px;
}

._modalCon {
    width: 465px;
    height: 257px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-top: 10px;
}

._modalCon::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: #999;
}

._modalCon::-webkit-scrollbar-track {
    background: #fff;
}

._modalCon::-webkit-scrollbar-thumb {
    background: #ddd;
    border: 2px solid #dddddd;
    border-radius: 10px;
}

._modalCon::-webkit-scrollbar-thumb:hover {
    background: #999;
}

.cpnBoxWrp {
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.cpnBoxRn {
    width: 100%;
}

.cpnBox {
    width: 220px;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 23px;
}

.cpnBox2 {
    /* background: url('/assets/data/img/lecture/viewRn/cpnType2.png') no-repeat center center; */
}

.cpnBox:nth-child(2n+0) {
    margin-right: 0;
}

.cpnInfRn {
    width: 300px;
    padding: 14px;
    border: 1px solid #DEE4ED;
    border-radius: 12px;
    box-shadow: 0px 2px 5px 0px #00000024;

}

.cpnInf {
    width: 167.5px;
    padding: 11px 0 0 15px;
}

.cpnTxt1 {
    font-size: 14px;
    color: #191E24;
    font-weight: 700;
    margin-bottom: 2px;
}

.cpnTxt1 span {
    /* color: #505ed1; */
}

.cpnTxt1 .per {
    /* font-size: 20px;
    font-weight: bold; */
}

.cpnBtnRn {
    width: 70px;
    cursor: pointer;
    background: #C6CFDC;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2F3642;
    font-size: 12px;
    font-weight: 700;
    flex-direction: column;
    box-shadow: 0px 2px 5px 0px #00000024;

}

.cpnBtnRnOn {
    background: linear-gradient(180deg, #FFFFFF 0%, #CBDFFD 100%);
    border: 1px solid #B2D0FD
}

.cpnBtnRnOn:hover .cpnBtnRnOnItem {
    background: url("/assets/img/classView/coupon_down_on.svg") no-repeat center !important;
}


.cpnBtn {
    width: 36.5px;
    height: 100px;
    cursor: pointer;
}

.cpnTxt2 {
    font-size: 10px;
    color: #999;
}

.cpnbge {
    width: 47px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    font-size: 10px;
    color: #fff;
    background-color: #f93757;
    border-radius: 8px;
    top: -7px;
    left: 8px;
}

._modalBtm {
    margin-top: 10px;
}

.cpnBtn2 {
    display: block;
    margin: 0 auto;
    width: 220px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    background-color: #505ed1;
    text-align: center;
    font-size: 16px;
    color: #fff !important;
    font-weight: bold;
}

._mdClose {
    top: 20px;
    right: 20px;
    cursor: pointer;
}

.dwnIcon {
    margin-top: 14px;
}

.cpnSale {
    font-size: 12px;
    font-weight: 400;
    color: #2F3642;
    margin: 4px 0px;
}

.cpnTxt2List {
    display: flex;
    gap: 3px;
}

.cpnTxt2 {
    font-size: 12px;
    font-weight: 400;
    color: #66768F;
}

.cpnSale span {
    font-weight: bold;
}

.lecNav2.poFix {
    top: 0;
    left: 0;
    z-index: 2;
}

.sampleBtn {
    display: block;
    text-align: center;
}

.sampleBtn img {
    margin-top: 13px;
}

.plusBtn {
    line-height: 30px;
}

.lec_down_btn,
.rv_down_btn {
    cursor: pointer;
}

.lec_up_btn,
.rv_up_btn {
    cursor: pointer;
    display: none;
}

.bookInf {
    padding-top: 50px;
}

.rv_body {
    display: none;
}

.book_id,
.cmp_id {
    display: none !important;
}

.toolWrp {
    display: none;
}

.cpnBox2 .cpnBtn {
    cursor: auto;
}

.cpnBtn3 {
    background-color: #ccc;
}

.tchMore {
    display: none;
    position: absolute;
    width: 228px;
    bottom: -85px;
}

.tchDv {
    margin-top: 62px;
}

.noLgn {
    width: 16px;
    height: 26px;
    margin-left: 3px;
    margin-right: 9px;
}

.showPc {
    display: inline-block;
}

.showMo {
    display: none;
}

.lectureIntroTitle {
    margin-top: 30px;
}

.needBackKnow {
    /* margin-bottom: 50px; */
}

.otherUser {
    padding: 50px 0px;
}

.teacherList {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-height: 680px;
    /* 카드 4개쯤까지만 보이게 (원하는 높이 조정) */
    overflow: hidden;
    position: relative;
}

.loadingSpinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #ccc;
    border-top: 2px solid #333;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

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

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

/* 하단 블러 영역 */
.teacherList::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 181px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
    backdrop-filter: blur(4px);
    pointer-events: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    display: none;
    /* 기본은 숨김 */
}

.teacherList.blurred::after {
    display: block;
    /* 조건 만족 시 표시 */
}

.teacherItem {
    width: 332px;
    border: 1px solid #DEE4ED;
    border-radius: 12px;
    font-size: 13px;
    color: #595959;
    padding: 20px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}




.preReviewList {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.preReviewItem {
    width: 332px;
    border: 1px solid #DEE4ED;
    border-radius: 12px;
    font-size: 13px;
    color: #595959;
    padding: 20px;
    background: white;
}

.preReviewItem span {
    color: #737373;
}

.preReviewStarRow {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    margin-top: 8px;
}

.preReviewStarPoint {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
}

.preReviewContent {
    margin-top: 8px;
    font-size: 14px;
    color: #404040;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.showAllReviewPc {
    border: 1px solid #C6CFDC;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #404040;
    width: 734px;
    margin-top: 12px;
    padding: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.teacherBlueBox {
    display: flex;
    padding: 6px 8px;
    border-radius: 4px;
    background: #F1F8FE;
    gap: 12px;
}

.teacherBlueBoxItem {
    display: flex;
    gap: 4px;
    font-size: 12px;
    color: #404040;
    font-weight: 400;
}

.teacherInfo {
    /* display: flex; */
    /* gap: 20px; */
    align-items: center;
    display: inline-block;
    width: 100%;
}

.teacherInfo img {
    width: 58px;
    height: 58px;
    border: 1px solid #DEE4ED;
    border-radius: 8px;
    float: left;
    margin-right: 20px;
}

.teacherInfoText1 {
    font-size: 13px;
    font-weight: 400;
    color: #4A5668;
}

.teacherInfoText2 {
    font-size: 20px;
    font-weight: 700;
    color: #040404;
}

.teacherInfoContent {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 400;
    color: #404040;
    margin-bottom: 16px;
    overflow: auto;
    height: 84px;
    display: inline-block;
}

.showAllTeacher {
    border: 1px solid #C6CFDC;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #404040;
    width: 734px;
    margin-top: 12px;
    padding: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: white;
}

.TeacherIntrocude {
    padding-top: 50px;
    margin-top: 50px;
}

.place_tabs {
    display: flex;
    gap: 4px;
    margin-top: 12px;
    margin-bottom: 12px;
}

.place_tab {
    border: 1px solid #2F3642;
    color: #2F3642;
    font-size: 14px;
    font-weight: 700;
    background: white;
    border-radius: 90px;
    padding: 7px 28px;
    cursor: pointer;
}

.place_tab.active {
    border: 1px solid #2754E7;
    color: #2754E7;
    font-size: 14px;
    font-weight: 700;
}

.curriculum_pack_box_list {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

.curriculum_pack_title {
    color: #191E24;
    font-size: 13px;
    font-weight: 700;
    padding: 0px 0px 0px 0px;
    width: 100%;
    display: inline-block;
}

.curriculum_pack_text1 {
    color: #191E24;
    font-size: 13px;
    font-weight: 700;
    display: inline-block;
    float: left;
    margin-left: 44px;
}

.curriculum_pack_text2 {
    color: #191E24;
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    float: left;
    margin-left: 12px;
}

.curriculum_pack_text3 {
    color: #4A5668;
    font-size: 13px;
    font-weight: 700;
    display: inline-block;
    float: right;
}

.curriculum_pack_box {
    padding: 20px 16px 20px 16px;
    border-radius: 16px;
    cursor: pointer;
    background: #EFF2F6 url(/assets/img/classView/togle_dep1.svg) left 25px top 23px no-repeat;
}

.curriculum_pack_box.open {
    background: #EFF2F6 url(/assets/img/classView/togle_dep1_open.svg) left 25px top 26px no-repeat;
}

.curriculum_header {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 12px;
}

.curriculum_header_title {
    font-size: 13px;
    font-weight: 400;
    color: #404040;
}

.curriculum_header_btn {
    position: absolute;
    top: -14px;
    right: 0px;
    border: 1px solid #C6CFDC;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
    color: #040404;
    padding: 6px 16px 6px 28px;
    background: url(/assets/img/classView/r_select_arrow.svg) left 13px center no-repeat;
    border-style: solid !important;
}

.curriculum_header_btn.open {
    background: url(/assets/img/classView/r_select_arrow_off.svg) left 13px center no-repeat;
}

.curriculum .accordion:first-child {
    margin-top: 20px;
}

.curriculum .accordion {
    border: 1px solid #DEE4ED;
    border-radius: 12px;
    /* margin-bottom: 10px; */
    background: white;
    margin-bottom: 10px;
}

.curriculum .accordion:last-child {
    margin-bottom: 0px;
}

.curriculum .accordion-header {
    padding: 20px 25px;
    cursor: pointer;
    user-select: none;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    color: #4A5668;
    justify-content: space-between;
    background: url(/assets/img/classView/togle_dep1.svg) left 25px center no-repeat;
}

.curriculum .accordion-header.open {
    background: url(/assets/img/classView/togle_dep1_open.svg) left 25px center no-repeat;
}

.accodion-header-left {
    display: flex;
    margin-left: 28px;
    gap: 12px;
}

.accodion-header-left-content {
    color: #191E24;
}

.accodion-header-right {
    font-size: 13px;
    font-weight: 400;
}

.curriculum .accordion-content {
    display: none;
    /* padding: 25px 25px 24px 25px; */
    /* padding-top: 25px; */
    border-top: 1px solid #DEE4ED;
}

.accordion-list {
    display: flex;
    flex-direction: column;
    /* gap: 14px; */
}

.sub-accordion {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #DEE4ED;
}

.sub-accordion:last-child {
    border-bottom: none;
}

.sub-header {
    font-size: 14px;
    font-weight: 400;
    color: #191E24;
}

.sub-header span {
    color: #191E24;
    font-size: 12px;
    font-weight: 400;
    border: 1px solid #A6B2C4;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 5px;
    cursor: pointer;
}

.sub-header.active {
    color: #2094EE;
    text-decoration: underline;
    cursor: pointer;
}

.sub-header-right {
    font-size: 13px;
    font-weight: 400;
    color: #737373;
}

.sub-header-right img {
    /* cursor: pointer; */
    margin-right: 6px;
}

.sub-content {
    display: none;
    padding: 8px;
    border-top: 1px solid #ddd;
}

.content:last-child {
    border-bottom: none;
}

button {
    margin-bottom: 10px;
}

.curriculum-content {
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 2px;
}

.reviewSubTitle {
    font-size: 14px;
    font-weight: 400;
    color: #2F3642;
    margin-top: 4px;
}

.reviewSubTitle span {
    color: #2754E7;
}

.reviewBoxCalc {
    margin-top: 12px;
    background: #F8FAFB;
    border: 1px solid #DEE4ED;
    padding: 28px 25px 20px 23px;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 700;
    color: #4A5668;
    justify-content: space-evenly;
    align-items: center;
    box-shadow: 0px 2px 4px 0px #00000014;
    border-radius: 12px;
}

.reviewBoxStep2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reviewBoxStep2 img {
    margin-top: 17px;
    margin-bottom: 8px;
    height: 36px;
}

.reviewBoxCalcCnt {
    display: flex;
    align-items: center;
}

.reviewBoxCalcCnt1 {
    font-size: 28px;
    font-weight: 700;
    color: #191E24;
}

.reviewBoxCalcCnt2 {
    font-size: 24px;
    font-weight: 400;
    color: #A6B2C4;
}

.reviewPcGap {
    width: 1px;
    height: 80px;
    background: #DEE4ED;
}

.reviewRate {
    text-align: center;
    height: 142px;
}

.reviewBoxStep2,
.reviewBoxStep1 {
    height: 142px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reviewBoxStep1 img {
    margin-top: 17px;
    margin-bottom: 19px;
}

.reviewPcRate {
    display: flex;
    margin-top: 8px;
    gap: 6px;
}

.reviewPcRateCol {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.reviewPcRateCol .rateText {
    font-size: 12px;
    font-weight: 400;
    color: #8898AF;
}

.reviewPcRateCol .rateText.active {
    color: #0E71BE;
    font-weight: 700;
}



.reviewPcRateCol .pointText {
    font-size: 12px;
    font-weight: 400;
    color: #66768F;
}



.reviewPcRateCol .pointText.active {
    color: #0E71BE;
    font-weight: 700;
}

.applyReviewData {
    margin-top: 24px;
    font-size: 18px;
    font-weight: 700;
    color: #191E24;
}

.applyReviewDataBox {
    border: 1px solid #C6CFDC;
    background: white;
    padding: 18px 24px;
    border-radius: 12px;
    margin-top: 8px;
    /* margin-bottom: 22px; */
    box-shadow: 0px 2px 4px 0px #00000014;

}

.applyReviewDataBox.unActive {
    border: 0px solid #C6CFDC;
    padding: 18px 0px;
    margin-top: 8px;
    box-shadow: none;
    border-radius: 0px;
    border-bottom: 1px solid #DEE4ED;
}

.applyReviewDataBox.unActive:last-child {
    border-bottom: none;
}

.applyReviewData_row0 {
    display: flex;
    gap: 4px;
    align-items: center;
}

.applyReviewData_row1 {
    font-size: 16px;
    font-weight: 700;
    color: #191919;
}

.applyReviewNullArea {
    width: calc(100% - 70px);
    padding: 40px;
    background-color: #F8FAFB;
    border-radius: 12px;
    font-size: 14px;
    color: #4A5668;
    font-weight: 400;
    display: flex;
    margin-right: 30px;
    margin-top: 12px;
    gap: 4px;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.applyReviewNullRow1 {
    font-weight: 700;
}

.showMoreReview {
    border: 1px solid #C6CFDC;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #404040;
    width: 734px;
    margin-top: 12px;
    padding: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


.applyReviewData_row2 {
    font-size: 13px;
    font-weight: 400;
    color: #4A5668;
    margin-top: 2px;
}

.applyReviewData_row3 {
    font-size: 12px;
    font-weight: 400;
    color: #737373;
    margin-top: 8px;
}

.applyReviewData_row3 span {
    font-size: 12px;
    font-weight: 700;
    color: #737373;
}

.applyReviewData_row4 {
    font-size: 12px;
    font-weight: 400;
    color: #737373;
    margin-top: 8px;
}

.applyReviewData_row4 img {
    width: 18px;
}

.applyReviewData_row5 {
    font-size: 16px;
    font-weight: 700;
    color: #191919;
    margin-top: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* ✅ 최대 2줄까지만 표시 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    /* 줄 간격 */
    max-height: calc(1.4em * 2);
    /* 2줄 높이 제한 */
    word-break: break-word;
    /* 단어 길면 줄바꿈 */
}

.applyReviewData_row6 {
    font-size: 14px;
    font-weight: 400;
    margin-top: 6px;
    color: #404040;
    /* -webkit-line-clamp: 3; */
    /* -webkit-box-orient: vertical; */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    /* max-height: calc(1.4em * 3); */
    word-break: break-word;
}

.applyReviewData_btn {
    padding: 4px 12px;
    border: 1px solid #C6CFDC;
    border-radius: 90px;
    font-size: 12px;
    font-weight: 400;
    color: #2F3642;
    margin-top: 16px;
    display: flex;
    width: 76px;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}

/* 회색 기본 막대 */
.bar {
    --p: 0;
    /* 각 막대별 % 값 (style에서 덮어쓰기) */
    position: relative;
    width: 8px;
    height: 50px;
    background: #d1d5db;
    /* 회색 */
    border-radius: 4px;
    overflow: hidden;
}

/* 하늘색 채워지는 부분 (아래에서 위로) */
.bar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(var(--p) * 1%);
    background: #3b82f6;
    /* 하늘색 */
    border-radius: 4px;
    transition: height 0.8s ease;
}

.reviewStatusList {
    display: flex;
    margin-top: 24px;
    /* margin-top: 10px; */
    /* margin-top: 36px; */
    gap: 8px;
    flex-wrap: wrap;
}

.reviewStatusItem {
    min-width: 120px;
    border-radius: 8px;
    background: #fff url(/assets/img/classView/r_select_arrow.svg) right 12px center no-repeat;
    color: #8898AF;
    border: 1px solid #A6B2C4
}


/* 강의리스트  start*/

.classList {
    flex-wrap: wrap;
    -moz-column-gap: 30px;
    column-gap: 27px;
    overflow-x: unset;
}

.classList .banner {
    background-color: #ddd;
    border-radius: 8px;
}

.classList .banner .indicator {
    justify-content: space-between;
    align-items: center;
}

.classList .banner .dot {
    width: 10px;
    height: 10px;
    border: 1px solid #dee4ed;
    border-radius: 5px;
    background-color: #fff;
    opacity: 40%;
}

.classList .banner .dot:hover {
    cursor: pointer;
}

.classList .banner .dot_selected {
    opacity: 100%;
    background-color: #50abf2;
}

.classList .card {
    width: 235px;
    height: 234px;
}

.classList .card:hover {
    cursor: pointer;
}

.thumbnail {
    width: 235px;
    height: 142px;
    border-radius: 8px;
    border: 1px solid #dee4ed;
    background-size: cover !important;
}

.tagWrap {
    -moz-column-gap: 4px;
    column-gap: 4px;
}

.classType {
    color: #737373;
}

.classTitle {
    letter-spacing: -0.2px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    height: 48px;
    font-size: 16px;
}

.date {
    color: #737373;
    letter-spacing: -0.4px;
}

.price {
    align-items: center;
    font-weight: 700;
}

.price .discountInfo {
    color: #e83535;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 24px;
}

.price .originalPrice {
    color: #999999;
    text-decoration: line-through;
}

.reviewWrap {
    color: #737373;
}

.reviewWrap .review img {
    width: 13px;
    margin-right: 2px;
}

.reviewWrap .countStudent img {
    width: 11px;
    margin-right: 2px;
}

.description {
    color: #737373;
    letter-spacing: -0.3px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
}

.level {
    color: #404040;
}

.level p span {
    font-weight: 700;
}

.tagAndCartbtn p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    color: #999999;
}

.tagAndCartbtn .cartBtn {
    width: 34px;
    float: right;
}

.tagAndCartbtn .cartBtn:hover {
    content: url(/assets/img/classList/cart_2_hover.svg);
    cursor: pointer;
}

.headTitle2 {
    font-size: 28px;
    font-weight: 700;
}

.hover_change_area_hover {
    display: none;
}

.card:hover .hover_change_area_default {
    display: none;
}

.card:hover .hover_change_area_hover {
    display: block;
}

.hover_change_area {
    position: absolute;
    width: 235px;
    min-height: 100px;
}

._flexMidle {
    display: flex;
    align-items: center;
}

.finalPrice {
    color: #191919;
    font-size: 16px;
}

/* Modal */
.conSecMd {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10000;
    bottom: 0;
    left: 0;
}

.csmBg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9001;
    cursor: pointer;
}

.csmCon {
    position: absolute;
    z-index: 9002;
    background: #fff;
    max-height: 800px;
    overflow: auto;
}

.csmClsBtn {
    position: absolute;
    right: 40px;
    top: 40px;
    cursor: pointer;
}

.csmCon1 {
    width: calc(100% - 40px);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    padding: 16px 20px;
}

.csmCon2 {
    width: 100%;
    /* padding: 16px 20px; */
}

.csm2Header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    color: #4A5668;
    border-bottom: 8px solid #EFF2F6;
}

.csm2Header img {
    width: 20px;
}

.csmCon2 .selectList {
    padding: 24px 20px;
}

.csmCon3 {
    width: 800px;
    border-radius: 12px;
    padding: 20px 20px;
}

.csmCon4 {
    width: 400px;
    border-radius: 12px;
    padding: 40px;
}

.csmCon4 .isdBtn1 {
    background: #2754E7;
    color: white;
    width: 100%;
    padding: 6px 0px;

    border-radius: 8px;
}

.csmCon4 .isdBtn2 {
    background: #DEE4ED;
    color: #66768F !important;
    width: calc(100% - 24px);
    padding: 12px;
    border-radius: 8px;
}

.csm4Header {
    padding-bottom: 17px;
    display: flex;
    justify-content: space-between;
    font-size: 24px;
    font-weight: 700;
    color: #040404;
    border-bottom: 1px solid #DEE4ED;
    align-items: center;
}

.csm4HeaderText {
    font-size: 12px;
    font-weight: 400;
    color: #2F3642;
    margin-top: 12px;
    margin-bottom: 14px;
}

.csm4Header img {
    width: 20px;
}

.csm3Header {
    padding-bottom: 12px;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    color: #040404;
    align-items: center;
}

.previewList {
    display: flex;
    flex-direction: column;
    max-height: 580px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* iOS 부드러운 스크롤 */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

/* Chrome, Safari, Android 브라우저 */
.previewList::-webkit-scrollbar {
    display: none;
}


.previewItem {
    display: flex;
    padding: 14px 0px;
    border-bottom: 1px solid #DEE4ED;
    gap: 10px;
}

.previewItem:last-child {
    border-bottom: none;
}

.previewItem.active {
    text-decoration: underline;
    color: #1082DA;
    cursor: pointer;
}

.csm3Header img {
    width: 14px;
}

.csmCon1 ._m1Title {
    font-size: 14px;
    font-weight: 700;
    color: black;
    margin-bottom: 6px;
}

.csmCon2 ._m1Title {
    font-size: 14px;
    font-weight: 700;
    color: black;
    margin-bottom: 6px;
}

.selectList {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.csmCon1 ._m1Select,
.csmCon2 ._m1Select {
    border: 1px solid #A6B2C4;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #8898AF;
    width: calc(100% - 30px);
    padding: 14px;
    background: url(/assets/img/classView/r_select_arrow.svg) right 12px center no-repeat;
    cursor: pointer;
}

.csmCon1 ._m1Select.active,
.csmCon2 ._m1Select.active {
    background: url('/assets/img/classView/r_select_arrow_off.svg') right 12px center no-repeat;
}

.m1List {
    display: flex;
    flex-direction: column;
    border: 1px solid #A6B2C4;
    border-radius: 8px;
}

._m1Item {
    padding: 14px 16px;
    border-bottom: 1px solid #DEE4ED;
    cursor: pointer;
}

._m1Item.selected {
    background: #F1F8FE;
}

._m1Item.off {
    background-color: #F8FAFB;
    color: #A6B2C4;
}

._m1TextRow1Text1.off {
    color: #A6B2C4;
}

._m1TextRow1Text2.off {
    color: #A6B2C4;
}

._m1Item:first-child {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

._m1Item:last-child {
    border-bottom: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

._m1TextRow1 {
    display: flex;
    align-items: center;
    gap: 5px;
}

._m1TextRow1Text1 {
    color: #191919;
    font-size: 14px;
    font-weight: 700;
}

._m1TextRow1Text2 {
    color: #E83534;
    font-weight: 700;
}

._m1TextRow2 {
    font-size: 12px;
    font-weight: 400;
}

.csm2Body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 98px);
    overflow-y: auto;
}

._m1BtnArea {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 29px;
}


._m2BtnArea {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 0px 20px 30px;
}

._m1BtnR {
    background: #EFF2F6;
    color: #A6B2C4;
    width: 100%;
    height: 50px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    display: flex;
    gap: 5px;
}

._m1BtnR.active {
    background: #2754E7;
    color: white;
}

.teacherInfoText {
    display: inline-block;
    width: calc(100% - 80px);
    float: left;
}

.lecVwTit .pcImgThum {
    border: 1px solid #e1e1e1;
    width: 269px;
    height: 162px;
    border-radius: 8px;
    background-size: cover !important;
}

/* 복사 토스트 팝업 */
/* 토스트 팝업 기본 스타일 */
.toast-container {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    /* 클릭 방해 금지 */
}

/* 활성화 상태 */
.toast-container.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.date_null_date_text {
    font-size: 12px;
    color: gray;
}

@media screen and (max-width: 1100px) {
    .top_fixed {
        left: 550px;
        width: 792px;
    }
}

/* 강의리스트 end */
@media screen and (max-width: 768px) {
    .applyToUser .freeTalk img {
        width: auto;
    }

    .csmCon3 {
        width: calc(100% - 40px);
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;

        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        padding: 20px 20px;
    }

    #top_btn2,
    #top_btn {
        display: none;
    }

    #topBtn4Rn {
        display: none;
    }

    .tabList::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera */
    }

    .classList::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera */
    }

    .lecVwDv {
        width: 100%;
        display: inline-block;
    }

    .tagListMo {
        display: flex !important;
        gap: 4px;
        margin-bottom: 6px;
    }

    .lecNav_left {
        color: #4A5668;
        font-size: 13px;
        font-weight: 700;
    }

    .leftArea {
        width: 100%;
    }

    .lecSbj {
        width: auto;
    }

    .lecVwTit {
        margin-top: 6px;
        margin-bottom: 12px;
    }

    .lectureArea {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .lecNav {
        margin: 20px 20px 0px 20px;
        width: calc(100% - 40px);
    }

    .bookTit {
        width: 100%;
    }

    .infoTit img {
        width: auto;
    }

    .lecTitWrp {
        width: auto;
    }

    .mainImg {
        height: 100%;
        position: absolute;
        z-index: 2;
        left: 50%;
        transform: translateX(-50%);
    }

    .topImgArea {
        height: 200px;
        width: 100%;
        overflow: hidden;
        position: relative;
        text-align: center;
    }

    .topImgArea img {
        /* height: 100%; */
        /* position: absolute; */
    }

    .bgImg {
        margin-top: -30%;
        filter: blur(10px);
        position: absolute;
        left: 0px;
        width: 100%;
        z-index: 1;
    }

    #img_container_div {
        z-index: 2;
    }

    #header {
        display: none;
    }

    #footer {
        display: none;
    }

    .rightArea {
        display: none;
    }

    .showPc {
        display: none;
    }

    .showMo {
        display: inline-block;
    }

    .leftArea .tabList {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        font-size: 13px;
        font-weight: 700;
        gap: 20px;
        margin-top: 0px;
    }

    .leftArea .tabList .tab {
        padding: 12px 0px 8px 0px;
        font-size: 13px;
        font-weight: 400;
        color: #191E24;
    }

    .lecVwInfo {
        margin: 0px 20px 12px 20px;
    }

    .lecVwInfo div {
        width: auto;
    }

    .MoHr {
        height: 10px;
        background: #EFF2F6;
        width: 100%;
    }

    .lecVwInfo ._text1 {
        display: inline-block;
        width: 97px;
    }

    .lecVwInfo ._text2 {
        display: inline-block;
        width: 140px;
    }

    #img_container_div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.64);
        transition: opacity 0.3s ease;
        pointer-events: none;
        opacity: 1;
    }

    ._m2BtnArea {
        padding: 0px 20px 0px;
    }

    .topImgArea .preview {
        position: absolute;
        bottom: 12px;
        background: #FFFFFFD6;

        border-radius: 8px;
        width: calc(100% - 60px);
        height: 36px;
        color: #191919;
        font-size: 14px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        z-index: 4;
        left: 50%;
        transform: translateX(-50%);
    }


    .topImgArea .preview img {
        width: 20px;
        height: 20px;
    }

    .PaymentCard {
        width: calc(100% - 62px);
        border: 1px solid #DEE4ED;
        padding: 10px;
        border-radius: 12px;
        margin: 0px 20px 32px 20px;
        box-shadow: 0px 2px 6px 0px #0000002E;

    }

    .placeTitle {
        padding: 0px 20px;
    }

    .place_tabs {
        padding: 0px 20px;
    }

    .PaymentCard .typeImgBox {
        position: relative;

    }

    .PaymentCard .typeImg {
        position: absolute;
    }

    .PaymentCard .typeImgBoxYellow {
        background: #FFCC0026;
        padding: 10px 12px;
        border-radius: 8px;
    }

    .PaymentCard .typeImgBoxGreen {
        background: #EEFDED;
        padding: 8px 12px;
        border-radius: 8px;
    }

    .PaymentCard>div:nth-child(2) {
        font-size: 12px;
        font-weight: 400;
        color: #737373;
    }

    .PaymentCard .price_row {
        display: flex;
        margin-top: 10px;
        column-gap: 4px;
        align-items: center;
    }

    .PaymentCard .price_area .price_row .price_row_price {
        font-size: 24px;
        font-weight: 700;
        color: #040404;
    }


    .PaymentCard .price_area .price_row .price_row_rate {
        font-size: 16px;
        font-weight: 700;
        color: #F51000;
    }

    .PaymentCard ._couponText {
        font-size: 12px;
        font-weight: 400;
        color: #737373;
        width: 100%;
    }

    .PaymentCard ._innerHr {
        width: 100%;
        height: 1px;
        background: #DEE4ED;
    }

    ._mt10 {
        margin-top: 10px;
    }

    ._mb10 {
        margin-bottom: 10px;
    }

    .PaymentCard ._innerBox {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .PaymentCard ._innerBoxRow {
        font-size: 12px;
        font-weight: 400;
        color: #4A5668;
        display: flex;
        justify-content: space-between;
    }

    .PaymentCard .couponUseable {
        border: 1px solid #D9EDFC;
        border-radius: 4px;
        background: #F1F8FE;
        font-size: 12px;
        font-weight: 700;
        color: #1082DA;
        padding: 7.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 4px;
        margin: 10px 0px 0px;
        cursor: pointer;
        width: calc(100% - 15px);
    }

    .lectureIntroTitle {
        margin-top: 28px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .intro_blueBox {
        margin-left: 20px;
        margin-right: 20px;
    }

    .intro_blueBox ._title {
        font-size: 16px;
    }


    .lectureIntoduce .intro_blueBox ._content {
        font-size: 14px;
    }

    .lectureIntroStudy {
        margin-left: 20px;
        margin-right: 20px;

    }

    .lectureIntoduce {
        /* padding-bottom: 100px; */
    }

    .lectureIntoduce .applyList .applyItem {
        border: 1px solid #B8DDFA;
        border-radius: 12px;
        padding: 8px 12px 8px 26px;
    }

    .lectureIntoduce .applyList .applyItem {
        background: url(/assets/img/classView/l_blue_point.svg) left 12px center no-repeat;
    }

    .lectureIntoduce .lectureContents {
        margin-left: 20px;
        margin-right: 20px;
    }

    .lectureIntoduce .lectureContents .lectureContent {
        font-size: 14px;
    }

    .applyToUser .applyList .applyItem {
        font-size: 14px;
        border: 1px solid #B8DDFA;
        border-radius: 12px;
        padding: 8px 20px 8px 25px;
        background: url(/assets/img/classView/l_blue_point.svg) left 12px center no-repeat;
    }

    .applyToUser .applyList {
        gap: 8px
    }

    .applyToUser,
    .curriculum,
    .review {
        margin-left: 20px;
        margin-right: 20px;
    }

    .applyLecture {
        margin-left: 20px;
        /* margin-right: 20px; */
    }

    .card .review {
        margin-left: 0px;
        margin-right: 0px;
    }

    .otherUser {
        background: #F1F8FE;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 30px;
    }

    .TeacherIntrocude {
        background: #EFF2F6;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .lectureIntoduce .needBackData {
        font-size: 14px;
        color: #595959;
    }

    .preReviewItem {
        width: 100%;
    }

    .showAllReviewMo {
        border: 1px solid #8898AF;
        border-radius: 90px;
        font-size: 13px;
        font-size: 400;
        color: #2F3642;
        padding: 5px 14px;
        background: #FFFFFF99;
        margin-top: 12px;
        cursor: pointer;
    }

    .teacherItem {
        width: 100%;
        padding: 20px 20px 12px 20px;
    }

    .showAllTeacher {
        width: calc(100% - 26px);
    }

    .teacherList {
        max-height: 650px;
    }

    .teacherBlueBox {
        gap: 5px;
        background: white;
        border-top: 1px solid #DEE4ED;
        padding: 8px 0px 0px;
        justify-content: center;
    }

    .teacherBlueBoxItem {
        gap: 2px;
    }

    .curriculum .accordion-header {
        flex-wrap: wrap;
        gap: 2px;
    }

    .accodion-header-right {
        margin-left: 27px;
        font-size: 12px;
    }

    .accordion-content {
        margin: auto !important;
        padding: 0px !important;
    }

    .sub-headerOn {
        margin-left: 32px;
    }

    .sub-header {
        font-size: 13px;
        display: flex;
        gap: 5px;
    }

    .sub-header-rightOn {
        margin-left: 32px;
    }

    .sub-headerOn img {
        position: absolute;
        left: 16px;
        top: calc(50% - 10px);
    }

    .sub-header-right {
        font-size: 12px;
    }

    .sub-header-right span {
        /* display: none; */
    }

    .sub-accordion {
        /* flex-direction: row-reverse; */
        /* align-items: center; */
        padding: 16px;
        flex-direction: column;
        text-align: left;
        gap: 4px;
        position: relative;
    }

    .accodion-header-left {
        gap: 3px;
    }

    .curriculum-content {
        margin-top: 12px;
    }

    .moHrArea {
        width: 100%;
        height: 10px;
        background: #EFF2F6;
    }

    .reviewStatusItem {
        width: calc(50% - 4px);
    }

    .showMoreReview {
        width: calc(100% - 40px);
    }

    .hoverWrapper {
        position: relative;
    }

    /* 강의리스트 start */
    .classList {
        width: auto;
        overflow-x: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-y: hidden;
        /* white-space: nowrap; */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        column-gap: 8px;
    }

    .classList .card {
        width: 152px;
        height: 170px;
    }

    .hover_change_area {
        width: 152px;
    }

    .thumbnail {
        width: 152px;
        height: 92px;
    }

    .classTitle {
        font-size: 13px;
        height: 40px;
    }

    .caption1 {
        font-size: 11px;
    }

    .caption2 {
        font-size: 11px;
    }

    .discountInfo {
        font-size: 13px;
    }

    .finalPrice {
        font-size: 15px;
    }

    .applyLecture {
        padding-bottom: 80px;
    }

    /* 강의리스트 end */

    /* 모바일 하단 플로팅 영역 */
    .conSecBottom {
        display: block;
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 111px;
        /* background: #0F0F0F; */
        z-index: 1;
    }

    .moBottomRow1 {
        display: flex;
    }

    /* 좌측 파랑, 우측 검정 */
    .conDivBottom.blueLeft {
        background-color: #1082DA;
        border-top-left-radius: 12px;
        /* 좌측 위 모서리 */
        font-size: 13px;
        font-weight: 700;
        color: white;
        width: 50%;
        padding: 8px 0px 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .conDivBottom.blueAll {
        background-color: #1082DA;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        /* 좌측 위 모서리 */
        font-size: 13px;
        font-weight: 700;
        color: white;
        width: 100%;
        padding: 8px 0px 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .conDivBottom.blackRight {
        background-color: #191919;
        border-top-right-radius: 12px;
        /* 우측 위 모서리 */
        font-size: 13px;
        font-weight: 700;
        color: white;
        width: 50%;
        padding: 8px 0px 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .conDivBottom.blackAll {
        background-color: #191919;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        /* 우측 위 모서리 */
        font-size: 13px;
        font-weight: 700;
        color: white;
        width: 100%;
        padding: 8px 0px 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .conDivBottom.blackRight span {
        color: #FFCC00;
    }

    .conDivBottom {
        height: 100%;
    }

    .moBottomRow2 {
        background: white;
        position: absolute;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        height: 77px;
        width: calc(100% - 24px);
        top: 37px;
        display: flex;
        padding: 12px 14px;
        justify-content: space-between;
        border-top: 1px solid #C6CFDC;
        border-right: 1px solid #C6CFDC;
        border-left: 1px solid #C6CFDC;
    }

    .moFltB_origPrice {
        color: #8898AF;
        font-size: 13px;
        font-weight: 400;
        text-decoration: line-through;
    }

    .moFltB_salePrice {
        display: flex;
        align-items: center;
        gap: 4px;
        line-height: 20px;
    }

    .moFltB_salePrice1 {
        font-size: 14px;
        font-weight: 700;
        color: #F51000;
    }

    .moFltB_salePrice2 {
        font-size: 20px;
        font-weight: 700;
        color: #040404;
    }

    .moFltB_priceText {
        font-size: 11px;
        font-weight: 400;
        color: #737373;
    }

    .moBRight {
        display: flex;
        gap: 8px;
    }

    .mbBRCart {
        width: 50px;
        height: 50px;
        cursor: pointer;
    }

    .mbBRApply {
        border-radius: 8px;
        color: white;
        font-size: 14px;
        font-weight: 700;
        background: #2754E7;
        box-shadow: 0px 3px 4px 0px #00000040;
        display: flex;
        align-items: center;
        height: 50px;
        padding: 0px 15px;
        cursor: pointer;
    }

    .top_fixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 100%;
        transform: none
    }

    .checkbox_wrp_mo {

        padding: 14px;
        border-bottom: 1px solid #C6CFDC;
    }

    .checkbox_wrp_mo:last-child {
        border-bottom: none;
    }

    .lecIntro {
        display: none;
    }

    .teacherList::after {
        height: 208px;
    }

    .teacherInfoContent {
        font-size: 13px;
    }

    .freeTalk {
        margin-bottom: 50px;
    }

    .curriculum_header_title {
        width: 100%;
        display: flex;
        flex-direction: column;
    }


    .curriculum_pack_text1 {
        margin-left: 32px;
    }

    .applyReviewNullArea {
        width: calc(100% - 80px);
    }

    /* 모바일은 호버 없음 */
    .leftArea .tabList .tab:not(.active):hover {
        border-bottom: none !important;
        font-weight: 400;
        color: #191E24;
    }

    .reviewBoxStep1 img {
        width: 15px;
        margin-top: 1px;
        margin-bottom: 1px;
    }

    .reviewBoxCalcCnt1 {
        font-size: 16px;
    }

    .reviewBoxCalcCnt2 {
        font-size: 16px;
    }

    .star_List {
        width: 55px;
        text-align: center;
        margin-top: 14px;
        margin-bottom: 14px;
    }

    .reviewBoxStep2 img {
        width: 30px;
        margin-top: 20px;
        margin-bottom: 14px;
    }

    .reviewPcRateMo img {
        width: 41px;
        margin-top: 15px;
        margin-bottom: 14px;
    }

    .reviewBoxCalc {
        padding: 20px;
    }

    .reviewBoxStep2,
    .reviewBoxStep1,
    .reviewRate {
        height: auto;
    }

    .reviewBoxCalcCnt1 span {
        font-weight: 400;
    }

    .applyReviewData_row0 {
        align-items: flex-start;
        flex-direction: column;
    }

    .curriculum .accordion-header {
        padding: 16px;
        flex-direction: column;
    }

    .needBackKnow .needBackData {
        font-size: 14px;
    }


    .curriculum .accordion-header {
        background: url(/assets/img/classView/togle_dep1.svg) left 16px center no-repeat;
    }

    .curriculum .accordion-header.open {
        background: url(/assets/img/classView/togle_dep1_open.svg) left 16px center no-repeat;
    }

    .curriculum_header_btn {
        position: relative;
        top: auto;
        right: auto;
        background: none;
        margin-bottom: 0px;
        padding: 6px;
    }

    .curriculum_header_btn.open {
        background: none;
    }

    .curriculum_header {
        justify-content: space-between;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 8px;
    }

    .curriculum .accordion {
        margin-bottom: 8px;
    }

    .curriculum .accordion:first-child {
        margin-top: 8px;
    }

    .curriculum_pack_box_list {
        margin-top: 8px;
        gap: 8px;
    }

    .curriculum_pack_box {
        padding: 16px;
        background: #EFF2F6 url(/assets/img/classView/togle_dep1.svg) left 25px top 18px no-repeat;
    }

    .curriculum_pack_box.open {
        background: #EFF2F6 url(/assets/img/classView/togle_dep1_open.svg) left 25px top 22px no-repeat;
    }

    .curriculum_pack_text2 {
        margin-left: 2px;
    }

    .curriculum_pack_text3 {
        margin-left: 32px;
        float: left;
        font-weight: 400;
    }

    .csmCon4 {
        padding: 20px;
    }

    .csm4Header {
        font-size: 18px;
    }

    .cpnInfRn {
        width: calc(100% - 110px);
    }

    ._lodingCn {
        display: none;
    }

    ._lodingBg {
        width: 30px;
        height: 30px;
        margin-top: calc(100% - 20px);
        background-image: url("/assets/img/gnb/lodingLogo.svg");
        background-size: 30px 30px;
    }

    .reviewListArea {
        margin-bottom: 70px;
    }
}