@charset "utf-8";
.snbArea{
    display: flex;
    gap: 0 40px;
    padding: 50px 0 80px;
}
.snbW{
    flex: 0 0 auto;
    min-width: 288px;
    width: 288px;
}
.snbTit{
    width: 232px;
    height: 56px;
    margin: 0 auto -28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--txt-font-size-xl);
    color: #fff;
    font-weight: 800;
    background-color: var(--primary-base);
    border-radius: 999px;
    box-shadow: 0 3px 6px rgba(3, 7, 116, .3);
    position: relative;
}
.snb{
    display: block;
    padding: 40px 24px 16px;
    background-color: var(--primary-lighten5);
    border: 1px solid var(--primary-lighten4);
    box-shadow: 0 0 15px rgba(3, 7, 116, .08);
    border-radius: 20px;
}
.snb>li{
    display: block;
}
.snb>li + li{
    border-top: 1px solid var(--primary-lighten2);
}
.snbLink{
    position: relative;
    min-height: 54px;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 45px 12px 12px;
    font-size: var(--txt-font-size-xl);
    font-weight: 600;
    color: var(--primary-darken1);
    text-align: left;
    background-color: transparent;
    transition: var(--transition);
}
button.snbLink::after{
    content: "";
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url(../image/icon-chevron-point.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    top: 50%;
    right: 10px;
    transform: translateY(-50%) rotate(90deg);
    transition: var(--transition);
}
.snbLink::before{
    content: "";
    display: block;
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: var(--primary-darken1);
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    transition: var(--transition);
}
.snb>li.active .snbLink{
    color: var(--info-base);
}
.snb>li.active .snbLink::before{
    background-color: var(--info-base);
}
.snb>li.active button.snbLink::after{
    transform: translateY(-50%) rotate(-90deg);
}
.snbDepth3{
    position: relative;
    top: -4px;
    display: block;
    height: 0;
    opacity: 0;
    visibility: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: var(--transition);
}
.snb>li.active .snbDepth3{
    opacity: 1;
    visibility: visible;
}
.snbDepth3>li{
    display: block;
}
.snbDepth3>li:last-child{
    margin-bottom: 6px;
}
.snbDepth3Link{
    min-height: 34px;
    display: flex;
    align-items: center;
    font-size: var(--txt-font-size);
    font-weight: 400;
    color: var(--primary-darken1);
    padding: 5px 22px 5px 32px;
    text-indent: -10px;
    border-radius: 8px;
    transition: var(--transition);
}
.snbDepth3Link.active{
    font-weight: 600;
}

.snbContents{
    flex-basis: 0;
    flex-grow: 1;
    max-width: calc(100% - 328px);
}
.naviW{
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding-bottom: 16px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border-color);
}
.naviW>.tit{
    flex-basis: 0;
    flex-grow: 1;
}
.navi{
    flex: 0 0 auto;
    display: flex;
    gap: 34px;
}
.navi>span{
    display: block;
    line-height: 24px;
    font-size: var(--txt-font-size);
    font-weight: 500;
    color: var(--grey-darken4);
    position: relative;
    margin-top: 4px;
}
.navi>span::before{
    content: "";
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url(../image/icon-chevron-lightgrey.svg);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    left: -17px;
    transform: translateX(-50%);
    top: 0;
}
.naviHome{
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 -6px;
    border-radius: 50%;
    transition: var(--transition);
}
.snbContentsInner{
    padding: 30px;
    border-radius: 16px;
    background-color: #fff;
    border: 1px solid var(--primary-lighten4);
    box-shadow: 0 0 15px rgba(0, 0, 0, .08);
}
.snbContentsInner.wide{
    padding: 0;
}
.snbContentsInner h3.tit.xs{
    margin-bottom: 24px;
}
@media screen and (min-width: 1201px){
    .snb>li:hover .snbLink{
        color: var(--info-base);
    }
    .snb>li:hover .snbLink::before{
        background-color: var(--info-base);
    }
    .snbDepth3Link:hover{
        background-color: var(--primary-lighten4);
    }
    .naviHome:hover{
        background-color: var(--primary-lighten4);
    }
}
@media screen and (max-width: 1439px){
    .snbW {
        min-width: 240px;
        width: 240px;
    }
    .snbDepth3Link{
        padding: 5px 12px 5px 22px;
    }
    .snbContents{
        max-width: calc(100% - 280px);
    }
}
@media screen and (max-width: 1200px){
    .snbArea{
        display: block;
    }
    .snbW{
        display: none;
    }
    .snbContents{
        max-width: 100%;
    }
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .snbArea {
        padding: 50px 0;
    }
    .naviW{
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 8px;
        padding-bottom: 16px;
        margin-bottom: 30px;
        border-bottom: 1px solid var(--border-color);
    }
    .naviW>.tit{
        flex-basis: 0;
        flex-grow: 1;
    }
    .navi{
        width: 100%;
        justify-content: flex-end;
        gap: 20px;
    }
    .navi>span{
        line-height: 20px;
        margin-top: 4px;
    }
    .navi>span::before{
        width: 20px;
        height: 20px;
        left: -10px;
    }
    .naviHome{
        width: 28px;
        height: 28px;
        margin: 0 -4px;
    }
    .naviHome>.icon{
        width: 20px;
        height: 20px;
    }
    .snbContentsInner{
        padding: 20px 16px;
    }
    .snbContentsInner h3.tit.xs{
        margin-bottom: 18px;
    }
}
@media screen and (max-width: 500px){
}

/* 통합검색 */
.searchArea{
    padding: 50px 0 80px;
}
.searchTop{
    padding-bottom: 24px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}
.searchTop>h2{
    line-height: 1;
}
.searchTop>p{
    margin-top: 10px;
}
.searchSectionArea{
    border-radius: 8px;
    border: 1px solid var(--secondary-lighten4);
    overflow: hidden;
    margin-top: 30px;
}
.searchSectionTop{
    height: var(--btn-height-lg);
    background-color: var(--secondary-lighten4);
    gap: 0 8px;
    display: flex;
    align-items: center;
    padding: 0 22px 0 30px;
}
.searchSectionTop>.btnTxt{
    margin-left: auto;
    gap: 0 4px;
    color: var(--primary-base);
    font-weight: 500;
}
.searchSectionW{
    padding: 20px 30px;
}
.searchSection + .searchSection{
    margin-top: 30px;
}
.searchSectionTit{
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 16px;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--secondary-lighten3);
}

.searchTxtItemW{
    display: block;
    margin: -14px 0;
}
.searchSectionTit + .searchSectionContents .searchTxtItemW{
    margin-top: -30px;
}
.searchTxtItemW>li{
    display: block;
}
.searchTxtItemW>li + li{
    border-top: 1px solid var(--secondary-lighten4);
}
.searchTxtItem{
    padding: 14px 0;
    display: block;
    transition: var(--transition);
}
.searchTxtItem>strong{
    font-size: var(--txt-font-size);
    font-weight: 600;
}
.searchTxtItem span{
    transition: var(--transition);
}
.searchTxtItem>p{
    margin-top: 6px;
}
.searchThumbItemW{
    display: flex;
    flex-wrap: wrap;
    margin: -20px -30px;
}
.searchThumbItemW>li{
    display: block;
    padding: 20px 30px;
    flex: 1 1 25%;
    max-width: 25%;
    width: 25%;
}
.searchThumbItemContents{
    padding-top: 16px;
}
.searchThumbItemContents>.labelW,
.searchThumbItemContents>.label,
.searchTxtItem>.labelW{
    margin-bottom: 12px;
}
.searchThumbItemContents>strong{
    font-size: var(--txt-font-size);
    font-weight: 600;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
    height: 45px;
}
.searchThumbItemContents .infoRowW{
    margin-top: 12px;
}
.searchThumbItemContents>p{
    margin-top: 6px;
}
.searchNodata{
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px 0;
}
.searchNodataIcon{
    width: 114px;
    height: 114px;
    background-color: var(--secondary-lighten5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.searchNodataIcon>.icon{
    width: 66px;
    height: 66px;
}
.searchThumbItemW.cardnews .thumb{
    box-shadow: none;
}
.searchThumbItemW.book .thumb{
    padding-top: calc((240 / 170)* 100%);
    border: 1px solid var(--border-color);
}
@media screen and (min-width: 1201px){
    .searchTxtItem:hover,
    .searchTxtItem:hover span{
        color: var(--primary-base) !important;
    }
}
@media screen and (max-width: 1439px){
    .searchThumbItemW{
        margin: -15px;
    }
    .searchThumbItemW>li{
        padding: 15px;
    }
    .searchThumbItemW .infoRow{
        display: block;
    }
    .searchThumbItemW .infoRow>strong{
        min-width: 0;
        width: 100%;
    }
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .searchThumbItemW>li{
        flex: 1 1 50%;
        width: 50%;
        min-width: 50%;
    }
}
@media screen and (max-width: 767px){
    .searchArea{
        padding: 50px 0;
    }
    .searchTop{
        padding-bottom: 24px;
        margin-bottom: 30px;
    }
    .searchTop>h2{
        line-height: 1;
    }
    .searchTop>p{
        margin-top: 8px;
    }
    .searchSectionArea{
        margin-top: 20px;
    }
    .searchSectionTop{
        gap: 0 6px;
        padding: 0 8px 0 16px;
    }
    .searchSectionTop>.btnTxt{
        gap: 0 2px;
    }
    .searchSectionW{
        padding: 20px 16px;
    }
    .searchSection + .searchSection{
        margin-top: 20px;
    }
    .searchSectionTit{
        font-size: 16px;
        padding-bottom: 12px;
        margin-bottom: 20px;
    }

    .searchTxtItemW{
        display: block;
        margin: -12px 0;
    }
    .searchSectionTit + .searchSectionContents .searchTxtItemW{
        margin-top: -20px;
    }
    .searchTxtItem{
        padding: 12px 0;
    }
    .searchTxtItem>p{
        margin-top: 4px;
    }
    .searchThumbItemContents{
        padding-top: 12px;
    }
    .searchThumbItemContents>.labelW,
    .searchThumbItemContents>.label,
    .searchTxtItem>.labelW{
        margin-bottom: 8px;
    }
    .searchThumbItemContents>strong{
        height: 40px;
    }
    .searchThumbItemContents .infoRowW{
        margin-top: 8px;
    }
    .searchThumbItemContents>p{
        margin-top: 4px;
    }
    .searchNodata{
        gap: 12px 0;
    }
    .searchNodataIcon{
        width: 94px;
        height: 94px;
    }
    .searchNodataIcon>.icon{
        width: 58px;
        height: 58px;
    }
}
@media screen and (max-width: 500px){
    .searchThumbItemW>li{
        flex: 1 1 100%;
        width: 100%;
        min-width: 100%;
    }
}

/* 로그인 / 회원가입 */
.cardAreaW{
    padding: 50px 0 80px;
}
.cardArea{
    width: 100%;
    max-width: 702px;
    margin: 0 auto;
    border-radius: 16px;
    border: 1px solid var(--primary-lighten4);
    box-shadow: 0 0 15px rgba(0, 0, 0, .08);
    padding: 45px 16px;
}
.cardArea.wide{
    max-width: 808px;
}
.cardArea .cardAreaInner{
    max-width: 334px;
    margin: 0 auto;
}
.cardArea.lg .cardAreaInner{
    max-width: 528px;
}
.cardArea.xl .cardAreaInner{
    max-width: 574px;
}
.cardArea.wide .cardAreaInner{
    max-width: 676px;
}
.cardAreaTit{
    text-align: center;
    margin-bottom: 30px;
}
.cardAreaTit.divider{
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}
.cardAreaTit>.tit{
    line-height: 1;
    position: relative;
    display: flex;
    justify-content: center;
    max-width: 334px;
    margin: 0 auto;
}
.cardAreaTit>.tit::before{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.cardAreaTit>.tit>span{
    display: block;
    padding: 0 26px;
    background-color: #fff;
    z-index: 1;
}
.cardAreaTit>.txt{
    margin-top: 18px;
}
.cardAreaTit .tabW{
    margin-top: 20px;
}
.cardAreaTit .radioW{
    justify-content: center;
    margin-top: 28px;
}
.cardAreaInput .inputPrimary + .inputPrimary{
    margin-top: 18px;
}
.cardAreaInput>p{
    margin-top: 10px;
    display: flex;
    gap: 0 6px;
    line-height: 24px;
    font-size: var(--txt-font-size);
}
.cardAreaInput>p>.icon{
    min-width: 24px;
}
.cardAreaInput .checkPrimary{
    margin-top: 16px;
}
.loginBtnW{
    display: flex;
    flex-wrap: wrap;
    gap: 20px 16px;
    margin-top: 30px;
}
.loginBtnW>.btn:not(:first-child){
    --btn-font-size-lg: 16px;
    flex-basis: 0;
    flex-grow: 1;
}
.loginBtnW>.btn:first-child{
    flex: 1 1 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}
.loginTxtBtnW{
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 0 25px;
}
.loginTxtBtnW>.btnTxt{
    position: relative;
}
.loginTxtBtnW>.btnTxt:not(:last-child)::after {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 12px;
    background-color: var(--grey-lighten1);
    top: 50%;
    right: -13px;
    transform: translateY(-50%);
}
.cardAreaFoot{
    margin-top: 30px;
    text-align: center;
}
.cardAreaFoot>.txt{
    display: flex;
    justify-content: center;
    line-height: 24px;
    gap: 0 6px;
}
.cardAreaFoot>.txt>.icon{
    min-width: 24px;
}
.cardAreaFoot.divider{
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}
.cardAreaFoot>.btn{
    margin-top: 22px;
}
.cardAreaInner>.txt{
    text-align: center;
    margin-bottom: 18px;
}
.cardAreaInner>.infoCard{
    max-width: 520px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    margin-bottom: 18px;
    text-align: left;
}
.cardAreaInner>.infoCard p + p{
    margin-top: 8px;
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .cardAreaW{
        padding: 50px 0;
    }
    .cardArea,
    .cardArea.wide{
        max-width: 100%;
        padding: 30px 16px;
    }
    .cardArea .cardAreaInner,
    .cardArea.lg .cardAreaInner,
    .cardArea.xl .cardAreaInner,
    .cardArea.wide .cardAreaInner{
        max-width: 100%;
    }
    .cardAreaTit{
        margin-bottom: 20px;
    }
    .cardAreaTit>.tit{
        max-width: 100%;
    }
    .cardAreaTit>.tit>span{
        padding: 0 18px;
    }
    .cardAreaTit .radioW{
        margin-top: 20px;
    }
    .cardAreaInput .inputPrimary + .inputPrimary{
        margin-top: 10px;
    }
    .cardAreaInput .checkPrimary{
        margin-top: 10px;
    }
    .loginBtnW{
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 20px;
    }
    .loginBtnW>.btn .icon.sm{
        width: 16px;
        height: 16px;
    }
    .loginBtnW>.btn:not(:first-child){
        --btn-font-size-lg: 14px;
    }
    .loginTxtBtnW{
        margin-top: 16px;
        gap: 0 10px;
    }
    .loginTxtBtnW>.btnTxt:not(:last-child)::after {
        right: -5px;
    }
    .cardAreaFoot{
        margin-top: 20px;
    }
    .cardAreaFoot.divider{
        padding-top: 20px;
    }
    .cardAreaFoot>.btn{
        margin-top: 18px;
    }
    .cardAreaFoot>.txt{
        flex-direction: column;
        align-items: center;
        line-height: 1.4;
        gap: 6px;
    }
}
@media screen and (max-width: 500px){
}

.loginKakao .loginBtnW{
    margin-top: 18px;
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .loginKakao br.mo{
        display: none;
    }
}
@media screen and (max-width: 500px){
}
@media screen and (max-width: 374px){
    .loginKakao br.mo{
        display: block;
    }
}

.cardArea.find .inputPrimary,
.cardArea.find .inputCert{
    max-width: 280px;
}
.cardArea.lg.find .inputPrimary{
    max-width: 100%;
}
.cardArea.find .formRowContents>.btn.lg{
    width: 146px;
}
.cardArea .btn{
    white-space: nowrap;
}
.findCheck{
    max-width: 334px;
    margin: 0 auto;
    background-color: var(--primary-lighten5);
    border-radius: 8px;
    padding: 30px 16px;
    text-align: center;
}
.cardAreaTit + .findCheck{
    margin-top: 40px;
}
.findCheck:has(.selectId){
    max-width: 520px;
}
.selectId{
    max-width: 368px;
    margin: 0 auto;
}
.selectId .radioPrimary + .radioPrimary{
    margin-top: 14px;
}
.selectId .radioPrimary,
.selectId .radioPrimary input[type="radio"] + label{
    width: 100%;
}
.selectId .radioPrimary input[type="radio"] + label p{
    --control-gap: 12px;
    display: flex;
    align-items: center;
    color: var(--primary-base);
}
.selectId .radioPrimary input[type="radio"] + label p>strong{
    display: block;
    font-size: var(--tit-font-size-xs);
    font-weight: 600;
    line-height: 1;
    flex-basis: 0;
    flex-grow: 1;
    text-align: left;
}
.selectId .radioPrimary input[type="radio"] + label p>span{
    display: block;
    text-align: right;
    flex: 0 0 auto;
    font-size: var(--txt-font-size);
    font-weight: 500;
}

@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .cardArea.find .inputPrimary,
    .cardArea.find .inputCert{
        max-width: 100%;
    }
    .formRowContents{
        min-height: 0;
    }
    .cardArea.find .formRowContents>.btn.lg{
        width: 100%;
    }
    .cardAreaTit + .findCheck{
        margin-top: 20px;
    }
    .findCheck{
        max-width: 100%;
        padding: 20px 16px;
    }
    .cardAreaTit + .findCheck{
        margin-top: 20px;
    }
    .findCheck:has(.selectId){
        max-width: 100%;
    }
    .selectId{
        max-width: 100%;
    }
    .selectId .radioPrimary input[type="radio"] + label p{
        --control-gap: 8px;
        display: block;
    }
    .selectId .radioPrimary input[type="radio"] + label p>span{
        text-align: left;
        margin-top: 8px;
    }
    .cardAreaInner>.infoCard{
        max-width: 100%;
        padding: 30px 16px;
    }
}
@media screen and (max-width: 500px){
}
@media screen and (max-width: 374px){
    .loginKakao br.mo{
        display: block;
    }
}

.cardAreaTop{
    margin-bottom: 14px;
}
.cardArea.join{
    max-width: 1010px;
}
.cardArea.join .cardAreaInner{
    max-width: 888px;
}
.joinStepW{
    display: flex;
    gap: 0 80px;
    margin-bottom: 40px;
}
.joinStepW>li{
    position: relative;
    display: block;
    flex: 1 1 0;
}
.joinStepW>li:not(:last-child)::after{
    content: "";
    display: block;
    position: absolute;
    width: 28px;
    height: 28px;
    background-image: url(../image/icon-stat3-grey.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 50%;
    right: -40px;
    transform: translate(50%, -50%);
}
.joinStep{
    border-radius: 16px;
    border: 1px solid var(--primary-lighten4);
    padding: 24px 30px;
    display: flex;
    align-items: center;
    gap: 0 16px;
    color: var(--grey-base);
}
.iconJoinW{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--primary-lighten5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.iconJoinW>.icon{
    width: 28px;
    height: 28px;
    opacity: .3;
}
.iconJoin1{
    background-image: url(../image/join/join-icon1.svg);
}
.iconJoin2{
    background-image: url(../image/join/join-icon2.svg);
}
.iconJoin3{
    background-image: url(../image/join/join-icon3.svg);
}
.joinStepContents>p{
    line-height: 1;
    margin-bottom: 4px;
}
.joinStepW>li.active .joinStep{
    box-shadow: 0 0 10px rgba(0, 0, 0, .08);
    color: var(--grey-darken4);
}
.joinStepW>li.active .iconJoinW{
    background-color: var(--primary-base);
}
.joinStepW>li.active .iconJoinW>.icon{
    opacity: 1;
    filter: grayscale(100%) invert(100%);
}
.joinStepW>li.active .joinStepContents>p>span{
    color: var(--primary-base);
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .joinStepW{
        gap: 0 60px;
        margin-bottom: 30px;
    }
    .joinStepW>li:not(:last-child)::after{
        width: 24px;
        height: 24px;
        right: -30px;
    }
    .joinStep{
        padding: 20px 16px;
    }
}
@media screen and (max-width: 767px){
    .joinStepW{
        gap: 0 10px;
    }
    .joinStepW>li:not(:last-child)::after{
        display: none;
    }
    .joinStep{
        padding: 20px 10px;
        flex-direction: column;
        text-align: center;
    }
    .iconJoinW{
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }
    .iconJoinW>.icon{
        width: 20px;
        height: 20px;
    }
}
@media screen and (max-width: 500px){
}

.agreement + .agreement{
    margin-top: 40px;
}
.agreement>h4{
    margin-bottom: 16px;
}
.agreement .card{
    padding: 30px 24px 30px 30px;
}
.agreement .cardInner{
    padding: 0 6px 0 0;
    max-height: 240px;
    overflow-x: hidden;
    overflow-y: auto;
}
.agreement .cardInner::-webkit-scrollbar {
    width: 8px;
}
.agreement .cardInner::-webkit-scrollbar-track {
    background-color: var(--border-color);
    border-radius: 999px;
}
.agreement .cardInner::-webkit-scrollbar-thumb {
    background-color: var(--primary-base);
    border-radius: 999px;
}
.agreement .cardInner::-webkit-scrollbar-button {
    display: none;
}
.agreement .cardInner{
    font-size: var(--txt-font-size);
    color: var(--grey-base);
}
.agreementFoot{
    margin-top: 16px;
    display: flex;
    gap: 0 30px;
    justify-content: flex-end;
    text-align: right;
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .agreement + .agreement{
        margin-top: 30px;
    }
    .agreement>h4{
        margin-bottom: 10px;
    }
    .agreement .card{
        padding: 20px 10px 20px 20px;
    }
    .agreement .cardInner::-webkit-scrollbar {
        width: 4px;
    }
    .agreementFoot{
        display: block;
        text-align: left;
    }
    .agreementFoot>p{
        margin-bottom: 8px;
    }
}
@media screen and (max-width: 500px){
}

.joinSection + .joinSection{
    margin-top: 50px;
}
.joinSectionTit,
.joinSection>h3{
    margin-bottom: 40px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}
.joinSection .formRowContents .inputPrimary:not([type='date']):not(textarea),
.joinSection .inputBirth,
.joinSection .inputAddress,
.joinSection .inputRrn,
.joinSection .inputBank{
    max-width: 410px;
}
.joinSection .formRowContents>.btn.lg{
    min-width: 114px;
}
.joinSection .inputEmail{
    width: 100%;
    max-width: 534px;
}

.joinSection .inputSelectW:not(.sm){
    max-width: 534px;
    width: 100%;
}
.joinSection .inputSelectW.sm{
    max-width: calc(100% - 124px);
    width: 100%;
}
.joinSection .inputSelectW.sm>*:nth-child(1){
    flex: 0 0 18%;
}
.joinSection .inputSelectW.sm>*:nth-child(2){
    flex: 0 0 34%;
}
.joinSection .inputSelectW.sm>*:nth-child(3){
    flex-basis: 0;
    flex-grow: 1;
}

.certBtn{
    width: 100%;
    max-width: 324px;
    margin: 50px auto 0;
    padding: 30px 16px;
    border-radius: 16px;
    background-color: #fff;
    border: 1px solid var(--primary-lighten4);
    box-shadow: 0 0 10px rgba(0, 0, 0, .08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    position: relative;
}
.certBtn:not(:has(.iconPhoneCert.done))::after{
    content: "";
    display: block;
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    border: 2px solid var(--primary-base);
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}
.certBtn:has(.iconPhoneCert.done){
    cursor: default;
}
.certBtn:disabled{
    opacity: 1;
}
.certBtn>strong{
    display: block;
}
.iconPhoneCert{
    width: 116px;
    height: 116px;
    background-image: url(../image/join/icon-phone-cert.svg);
}
@media screen and (min-width: 1201px){
    .certBtn:not(:has(.iconPhoneCert.done)):hover::after{
        opacity: 1;
        visibility: visible;
    }
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .joinSection .formRow:has(.inputSelectW.sm) .formRowContents{
        align-items: stretch;
    }
    .joinSection .formRow:has(.inputSelectW.sm) .formRowContents>.btn.lg{
        height: auto;
    }
    .joinSection .inputSelectW.sm{
        flex-wrap: wrap;
    }
    .joinSection .inputSelectW.sm>*:nth-child(1){
        flex: 0 0 calc(40% - 8px);
    }
    .joinSection .inputSelectW.sm>*:nth-child(2){
        flex: 0 0 60%;
    }
    .joinSection .inputSelectW.sm>*:nth-child(3){
        flex: 1 1 100%;
    }
}
@media screen and (max-width: 767px){
    .joinSection + .joinSection{
        margin-top: 30px;
    }
    .joinSectionTit,
    .joinSection>h3{
        margin-bottom: 18px;
        padding-bottom: 8px;
    }
    .joinSection .formRowContents .inputPrimary:not([type='date']):not(textarea),
    .joinSection .inputBirth,
    .joinSection .inputAddress,
    .joinSection .inputRrn,
    .joinSection .inputBank{
        max-width: 100%;
    }
    .joinSection .formRowContents>.btn.lg{
        min-width: 0;
    }
    .joinSection .inputEmail{
        max-width: 100%;
    }
    .joinSection .formRow:has(.inputSelectW.sm) .formRowContents>.btn.lg{
        height: var(--btn-height-lg);
    }
    .joinSection .inputSelectW:not(.sm),
    .joinSection .inputSelectW.sm{
        max-width: 100%;
    }
    .joinSection .inputSelectW.sm>*:nth-child(1),
    .joinSection .inputSelectW.sm>*:nth-child(2){
        flex: 1 1 100%;
    }
}

@media screen and (max-width: 500px){
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .modal.inst .boardCaption{
        display: block;
    }
    .modal.inst .boardCaption .radioW{
        margin-bottom: 12px;
    }
    .modal.inst:not(.learner) .tableResponsive tr>td:nth-child(1)::after{
        content: "분야";
    }
    .modal.inst:not(.learner) .tableResponsive tr>td:nth-child(2)::after{
        content: "기관명";
    }
    .modal.inst:not(.learner) .tableResponsive tr>td:nth-child(3)::after{
        content: "지역";
    }
    .modal.inst:not(.learner) .tableResponsive tr>td:nth-child(4)::after{
        content: "사업자번호";
    }
    .certBtn{
        max-width: 100%;
        padding: 20px 16px;
        gap: 10px;
        margin: 30px 0 0;
    }
    .iconPhoneCert{
        width: 84px;
        height: 84px;
    }
}
@media screen and (max-width: 500px){
}

.joinDone{
    padding: 94px 16px;
    background-color: var(--primary-lighten5);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.iconJoinDone{
    width: 172px;
    height: 150px;
    background-image: url(../image/join/join-done.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 28px;
}
@media screen and (max-width: 500px){
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .joinDone{
        padding: 30px 16px;
    }
    .iconJoinDone{
        width: 104px;
        height: 90px;
        margin-bottom: 18px;
    }
}
@media screen and (max-width: 500px){
}

.eduViewTop{
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
}
.eduViewTop + p{
    margin-top: -42px;
    margin-bottom: 40px;
}
.eduViewLeft{
    flex: 0 0 auto;
    width: 36%;
    max-width: 372px;
}
.eduViewLeft .thumb .thumbInner {
    background-size: contain;
}
.eduViewLeft .thumb.contain .thumbInner{
    background-size: auto 90%;
}
.eduViewRight{
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.eduViewRight>*:not(.label){
    width: 100%;
}
.eduViewRight>.label{
    margin-bottom: 10px;
}
.eduViewRight>.labelW{
    margin-bottom: 16px;
}
.keywordW{
    display: flex;
    gap: 8px 10px;
}
.keyword{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--primary-lighten2);
    font-size: 14px;
    height: 28px;
    padding: 0 10px;
    color: var(--primary-base);
    font-weight: 600;
}
.tit + .keywordW{
    margin-top: 16px;
}
.eduInfoW{
    margin-top: 16px;
    position: relative;
}
.eduViewTop:has(.eduViewBtn) .eduInfoW{
    padding-right: 154px;
    flex-basis: 0;
    flex-grow: 1;
}
.eduInfoW .infoRowW{
    flex-basis: 0;
    flex-grow: 1;
}
.eduViewBtn{
    flex: 0 0 auto;
    width: 134px;
    min-width: 134px;
    position: absolute;
    bottom: 0;
    right: 0;
}
.eduViewBtn .btn + .btn{
    margin-top: 16px;
}
.eduViewBtn>.tooltipArea{
    margin-bottom: 16px;
    margin-left: auto;
    width: 24px;
}
.tooltipArea{
    position: relative;
}
.tooltipW{
    position: absolute;
    top: -33px;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -100%);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}
.tooltipArea.active .tooltipW{
    top: -17px;
    opacity: 1;
    visibility: visible;
}
.tooltip{
    position: relative;
    padding: 16px 24px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    width: 340px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .08);
}
.tooltip::after{
    content: "";
    display: block;
    position: absolute;
    width: 14px;
    height: 14px;
    left: 50%;
    bottom: -12px;
    z-index: 1;
    transform: translateX(-50%);
    background-image: url(../image/tooltip-arrow.svg);
    background-repeat: no-repeat;
    background-size: cover;
}
.tooltipBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--primary-lighten5);
    border: 1px solid var(--primary-lighten4);
    transition: var(--transition);
}
.tooltip>.icon{
    display: none;
}
@media screen and (min-width: 1201px){
    .tooltipBtn:hover{
        border-color: var(--primary-base);
    }
}
@media screen and (max-width: 1720px){
    .tooltipW{
        left: unset;
        right: -15px;
        transform: translateY(-100%);
    }
    .tooltip::after{
        left: unset;
        right: 19px;
        transform: translateX(0);
    }
}
@media screen and (max-width: 1439px){
    .eduViewRight{
        display: block;
    }
    .eduViewTop:has(.eduViewBtn) .eduInfoW{
        padding-right: 0;
    }
    .eduInfoW .infoRowW{
        flex-basis: 0;
        flex-grow: 1;
    }
    .eduViewBtn{
        position: static;
        width: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 0 10px;
        margin-top: 16px;
    }
    .eduViewBtn .btn{
        flex-basis: 0;
        flex-grow: 1;
        white-space: normal;
        padding: 0 8px;
        line-height: 1.2;
    }
    .eduViewBtn .btn + .btn{
        margin-top: 0;
    }
    .eduViewBtn>.tooltipArea{
        margin-bottom: 0;
    }
    .tooltipW{
        left: 50%;
        right: unset;
        transform: translate(-50%, -100%);
    }
    .tooltip::after{
        left: 50%;
        right: unset;
        transform: translateX(-50%);
    }
    .eduViewTop + p{
        margin-top: -38px;
        text-align: right;
    }
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .eduViewTop{
        display: block;
        margin-bottom: 30px;
    }
    .eduViewTop + p{
        margin-top: -18px;
        margin-bottom: 30px;
        text-align: left;
    }
    .eduViewLeft{
        width: 100%;
        max-width: 372px;
        margin: 0 auto;
        margin-bottom: 30px;
    }
    .eduViewRight>.labelW{
        margin-bottom: 10px;
    }
    .keywordW{
        gap: 8px;
    }
    .eduViewBtn{
        gap: 0 8px;
    }
    .eduViewBtn:has(.tooltipArea){
        flex-wrap: wrap;
        gap: 10px 8px;
    }
    .tooltipArea{
        width: 100%;
        flex: 1 1 100%;
    }
    .tooltipBtn{
        display: none;
    }
    .tooltipArea:not(:has(.tooltipClickBtn)) .tooltipW{
        position: static;
        transform: translate(0);
        opacity: 1;
        visibility: visible;
    }
    .tooltip::after{
        display: none;
    }
    .tooltipArea:not(:has(.tooltipClickBtn)) .tooltip{
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        width: 100%;
        border: 0;
        text-align: left;
        display: flex;
        gap: 0 8px;
    }
    .tooltip>.icon{
        display: block;
        border-radius: 50%;
        overflow: hidden;
        min-width: 16px;
    }
}
@media screen and (max-width: 500px){
}

.eduContents{
    margin-top: 50px;
}
.eduContentsTit{
    margin-bottom: 16px;
    display: flex;
    align-items: flex-end;
}
.eduContentsTit>h3{
    padding-left: 18px;
    position: relative;
    flex-basis: 0;
    flex-grow: 1;
}
.eduContentsTit>.checkPrimary.tb{
    display: none;
}
.eduContentsTit>h3::before{
    content: "";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primary-base);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.eduContentsTxt{
    padding-left: 18px;
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .eduContentsTit:has(.checkPrimary.tb){
        flex-wrap: wrap;
        gap: 8px;
    }
    .eduContentsTit:has(.checkPrimary.tb)>h3{
        flex: 1 1 100%;
    }
    .eduContentsTit:has(.checkPrimary.tb)>.btn{
        order: 3;
    }
    .eduContentsTit>.checkPrimary.tb{
        display: block;
        flex-basis: 0;
        flex-grow: 1;
        order: 2;
    }
}
@media screen and (max-width: 767px){
    .eduContents{
        margin-top: 30px;
    }
    .eduContentsTit{
        margin-bottom: 12px;
    }
    .eduContentsTit>h3{
        padding-left: 12px;
    }
    .eduContentsTit>h3::before{
        width: 4px;
        height: 4px;
    }
    .eduContentsTxt{
        padding-left: 12px;
    }
}
@media screen and (max-width: 500px){
}

.ContentsOnline.tablePrimary td>.tableInner{
    min-height: 62px;
}
.previewBtn{
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: var(--transition);
}
.previewBtn>.icon{
    width: 40px;
    height: 40px;
}
@media screen and (min-width: 1201px){
    .previewBtn:hover{
        background-color: var(--primary-lighten5);
    }
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .ContentsOnline.tablePrimary td>.tableInner{
        min-height: 0;
    }
    .ContentsOnline.tableResponsive tr>td:nth-child(1)::after{
        content: "차시";
    }
    .ContentsOnline.tableResponsive tr>td:nth-child(2)::after{
        content: "차시 명";
    }
    .ContentsOnline.tableResponsive tr>td:nth-child(3)::after{
        content: "강사";
    }
    .ContentsOnline.tableResponsive tr>td:nth-child(4)::after{
        content: "학습시간";
    }
    .ContentsOnline.tableResponsive tr>td:nth-child(5)::after{
        content: "미리보기";
        top: 50%;
        transform: translateY(-50%);
    }
    .ContentsOffline.tableResponsive tr>td:nth-child(1)::after{
        content: "차시";
    }
    .ContentsOffline.tableResponsive tr>td:nth-child(2)::after{
        content: "강의일자";
    }
    .ContentsOffline.tableResponsive tr>td:nth-child(3)::after{
        content: "시작/종료시간";
    }
    .ContentsOffline.tableResponsive tr>td:nth-child(4)::after{
        content: "강의주제";
    }
    .ContentsOffline.tableResponsive tr>td:nth-child(5)::after{
        content: "강사";
    }
    .ContentsOffline.tableResponsive tr>td:nth-child(6)::after{
        content: "준비물";
    }
    .previewBtn{
        width: 28px;
        height: 28px;
    }
    .previewBtn>.icon{
        width: 24px;
        height: 24px;
    }
}
@media screen and (max-width: 500px){
}

.boardList.book{
    margin: -20px;
}
.boardList.book>li{
    padding: 20px;
    flex: 1 1 50%;
    max-width: 50%;
}
.bookItem{
    padding: 25px;
    border-radius: 20px;
    border: 1px solid var(--primary-lighten4);
    display: flex;
    gap: 0 20px;
}
.bookThumbW{
    width: 170px;
    flex: 0 0 auto;
}
.bookThumbW .thumb{
    padding-top: calc((240 / 170) * 100%);
    border: 1px solid var(--border-color);
}
.bookContents{
    flex-basis: 0;
    flex-grow: 1;
    max-width: calc(100% - 190px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: var(--btn-height-sm);
}
.bookContents>.labelW{
    margin-bottom: 10px;
}
.bookContents>*{
    width: 100%;
}
.bookContents .infoRowW{
    margin-top: 10px;
}
.bookBtnW{
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    gap: 0 10px;
}
.bookBtnW>.iconBtn{
    flex: 0 0 auto;
}
.bookBtnW>.btn:not(.iconBtn){
    flex-basis: 0;
    flex-grow: 1;
}
.emptyArea{
    border-radius: 16px;
    padding: 30px;
    border: 1px solid var(--border-color);
}
.emptyTxt{
    font-size: var(--txt-font-size);
    text-align: center;
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
    .boardList.book{
        margin: -15px;
    }
    .boardList.book>li{
        padding: 15px;
    }
    .bookItem{
        display: block;
    }
    .bookThumbW{
        width: 100%;
        max-width: 170px;
        margin: 0 auto;
        margin-bottom: 30px;
    }
    .bookContents{
        max-width: 100%;
        padding-bottom: 0;
    }
    .bookBtnW{
        position: static;
        margin-top: 36px;
    }
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .boardList.book{
        margin: -10px;
    }
    .boardList.book>li{
        padding: 10px;
        flex: 1 1 100%;
        max-width: 100%;
    }
    .bookItem{
        padding: 20px 16px;
        display: flex;
        align-items: center;
    }
    .bookThumbW{
        width: 170px;
        margin-bottom: 0;
    }
    .bookContents{
        max-width: calc(100% - 190px);
    }
    .bookContents .infoRowW{
        margin-top: 8px;
    }
    .bookBtnW{
        gap: 0 8px;
        margin-top: 16px;
    }
    .emptyArea{
        padding: 20px 16px;
    }
}
@media screen and (max-width: 500px){
    .bookItem{
        display: block;
    }
    .bookThumbW{
        width: 100%;
        max-width: 170px;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .bookContents{
        max-width: 100%;
    }
}

.reviewInputW{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 30px;
    border-radius: 16px;
    background-color: var(--primary-lighten5);
    gap: 10px 8px;
}
.rankBtnW{
    display: flex;
}
.reviewInputW .rankBtnW{
    min-height: var(--btn-height);
    align-items: center;
    flex: 0 0 auto;
}
.rankBtn{
    background-color: transparent;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.rankBtnW.sm .rankBtn{
    width: 28px;
    height: 28px;
}
.rankBtn.active .iconRankPoint{
    background-image: url(../image/icon-rank-point-active.svg)
}
.reviewInputW>input{
    flex-basis: 0;
    flex-grow: 1;
}
.reviewInputW>p{
    padding-left: 148px;
    flex: 1 1 100%;
}
.reviewInputW>.btn{
    flex: 0 0 auto;
}
.reviewList{
    display: block;
}
.reviewInputW + .reviewList{
    margin-top: 30px;
}
.reviewList>li{
    display: block;
}
.reviewList>li + li{
    margin-top: 16px;
}
.review{
    border-radius: 16px;
    padding: 30px;
    border: 1px solid var(--border-color);
}
.reviewTop{
    display: flex;
    align-items: center;
    gap: 0 6px;
    margin-bottom: 10px;
}
.reviewTop>strong{
    display: block;
    line-height: 1;
    flex: 0 0 auto;
}
.reviewTop>.rankBtnW{
    flex: 0 0 auto;
}
.reviewTop>p{
    flex-basis: 0;
    flex-grow: 1;
    text-align: right;
    line-height: 1;
}
.reviewBottom{
    display: flex;
    gap: 0 8px;
    justify-content: flex-end;
    margin-top: 16px;
}
@media screen and (min-width: 1201px){
    button.rankBtn:hover{
        background-color: var(--primary-lighten3);
    }
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .reviewInputW{
        padding: 20px 16px;
        gap: 8px;
    }
    .reviewInputW .rankBtnW{
        min-height: 0;
    }
    .rankBtn{
        width: 28px;
        height: 28px;
    }
    .rankBtnW.sm .rankBtn {
        width: 20px;
        height: 20px;
    }
    .reviewInputW>input{
        flex: 1 1 100%;
    }
    .reviewInputW>p{
        padding-left: 0;
    }
    .reviewInputW>.btn{
        margin-left: auto;
    }
    .review{
        padding: 20px 16px;
    }
    .reviewTop{
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 10px;
    }
    .reviewTop>strong{
        flex-basis: 0;
        flex-grow: 1;
        order: 1;
    }
    .reviewTop>.rankBtnW{
        flex: 1 1 100%;
        order: 3;
    }
    .reviewTop>p{
        order: 2;
    }
    .reviewBottom{
        margin-top: 8px;
    }
}
@media screen and (max-width: 500px){
}

.downloadCard{
    border-radius: 16px;
    border: 1px solid var(--primary-lighten4);
    padding: 30px 24px;
}
.downloadCard>p{
    text-align: center;
}
.downloadCard>.btn{
    --btn-height: var(--btn-height-sm);
    width: fit-content;
    margin: 20px auto 0;
}
.uploadCard{
    border-radius: 16px;
    background-color: var(--primary-lighten5);
    padding: 24px;
}
.downloadCard + .uploadCard{
    margin-top: 20px;
}
.uploadCard>strong{
    display: block;
    margin-bottom: 14px;
    line-height: 1;
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .downloadCard{
        padding: 20px 16px;
    }
    .downloadCard>.btn{
        margin: 16px auto 0;
    }
    .uploadCard{
        padding: 20px 16px;
    }
    .downloadCard + .uploadCard{
        margin-top: 20px;
    }
    .uploadCard>strong{
        margin-bottom: 8px;
    }
}
@media screen and (max-width: 500px){
}

.offlineFilter{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 0;
}
.offlineYear{
    display: block;
    min-width: 94px;
    width: 94px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.offlineMonth{
    flex-basis: 0;
    flex-grow: 1;
    max-width: calc(100% - 94px);
    display: flex;
    align-items: center;
    gap: 0 8px;
}
.offlineDay{
    flex: 1 1 100%;
}
.offlineMonthBtnArea>.slideRoundedBtn{
    flex: 0 0 auto;
}
.offlineMonthBtnArea{
    padding: 0 8px;
    flex-basis: 0;
    flex-grow: 1;
    max-width: calc(100% - 76px);
}
.offlineMonthBtnW{
    display: flex;
    gap: 0 6px;
    justify-content: space-between;
    overflow-x: auto;
    overflow-y: hidden;
}
.offlineMonthBtn{
    flex: 1 1 0;
    max-width: 60px;
    height: 34px;
    border-radius: 999px;
    background-color: var(--grey-lighten1);
    color: #fff;
    font-size: var(--txt-font-size);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: var(--transition);
}
.offlineMonthBtn.active{
    background-color: var(--primary-base);
}
.offlineDay{
    padding: 24px;
    border-radius: 16px;
    background-color: var(--primary-lighten5);
    display: flex;
    justify-content: space-between;
    position: relative;
}
.offlineDayBtn{
    flex: 1 1 auto;
    position: relative;
    height: 50px;
    min-width: 22px;
    background-color: transparent;
    font-size: var(--txt-font-size);
    font-weight: 500;
    color: var(--grey-darken4);
    display: flex;
    justify-content: center;
    align-self: flex-start;
}
.offlineDayBtn:disabled{
    opacity: 1;
}
.offlineDayBtn>span{
    display: block;
    position: relative;
    z-index: 1;
}
.offlineDayBtn.today{
    color: #fff;
}
.offlineDayBtn.today::before{
    content: "";
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: var(--primary-base);
    border-radius: 50%;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
}
.offlineDayBtn.hasData::after{
    content: "";
    display: block;
    position: absolute;
    box-sizing: border-box;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background-color: #FF742B;
    border: 2px solid #FF742B;
    transition: var(--transition);
}
.offlineDayBtn.active.hasData::after{
    border-color: #803107;
}
.offlineDayBtn.sa{
    color: #002BFF;
}
.offlineDayBtn.su{
    color: #FF0000;
}
.offlineSlideW{
    display: flex;
    gap: 0 16px;
    align-items: center;
    margin-top: 50px;
    position: relative;
}
.offlineSlideW::before{
    content: "";
    display: block;
    position: absolute;
    top: -20px;
    right: 0;
    z-index: 2;
    height: calc(100% + 40px);
    width: calc((100% - 138px) / 3);
    background-image: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, .46) 40%, #fff 100%);
}
.offlineSlideW:not(:has(.offlineSlide.loop))::before{
    display: none;
}
.offlineSlideW::after{
    content: "";
    display: block;
    position: absolute;
    top: -20px;
    right: -20px;
    z-index: 2;
    height: calc(100% + 40px);
    width: 20px;
    background-color: #fff;
}
.offlineSlideW>.slideRoundedBtn{
    flex: 0 0 auto;
    position: relative;
    z-index: 3;
}
.offlineSlideW>.slideBtnNext{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}
.offlineSlide{
    flex-basis: 0;
    flex-grow: 1;
    width: calc(100% - 58px);
}
.offlineSlide .swiper-wrapper{
    align-items: stretch;
}
.offlineSlide .swiper-container{
    margin: -9px;
    padding: 9px;
    overflow: hidden;
}
.offlineSlide .swiper-slide{
    height: auto;
}
.offlineSlide .boardItem::before{
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border: 2px solid #FF742B;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 2;
}
.offlineSlide .swiper-slide-active .boardItem::before{
    opacity: 1;
    visibility: visible;
}
.periodBr{
    display: none;
}

@media screen and (min-width: 1201px){
    .offlineMonthBtn:hover{
        background-color: var(--primary-base);
    }
    .offlineDayBtn.hasData:hover::after{
        border-color: #803107;
    }
}
@media screen and (max-width: 1439px){
    .offlineSlideW::before{
        width: calc((100% - 102px) / 3);
    }
    .periodBr{
        display: block;
    }
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .offlineFilter{
        display: block;
    }
    .offlineYear{
        margin-bottom: 16px;
    }
    .offlineMonth{
        max-width: 100%;
    }
    .offlineMonth>.slideRoundedBtn{
        margin-bottom: 12px;
    }
    .offlineMonthBtnArea{
        padding: 0;
    }
    .offlineMonthBtnW{
        padding-bottom: 8px;
    }
    .offlineMonthBtnW::-webkit-scrollbar {
        height: 4px;
    }
    .offlineMonthBtnW::-webkit-scrollbar-track {
        background-color: var(--primary-lighten5);
        border-radius: 999px;
    }
    .offlineMonthBtnW::-webkit-scrollbar-thumb {
        background-color: var(--primary-base);
        border-radius: 999px;
    }
    .offlineMonthBtnW::-webkit-scrollbar-button {
        display: none;
    }
    .offlineMonthBtn{
        flex: 0 0 auto;
        width: 68px;
        min-width: 68px;
    }
    .offlineDay{
        display: none;
    }
}
@media screen and (max-width: 767px){
    .offlineMonth{
        display: block;
    }
    .offlineMonth>.slideRoundedBtn{
        display: none;
    }
    .offlineMonthBtnArea{
        max-width: 100%;
    }
    .offlineMonthBtn{
        flex: 0 0 auto;
        width: 58px;
        min-width: 58px;
        height: 32px;
    }
    .offlineYear{
        margin-bottom: 12px;
        font-size: 18px;
    }
    .offlineSlideW{
        margin-top: 30px;
        display: block;
    }
    .offlineSlideW::before{
        width: 20%;
        top: -10px;
        height: calc(100% + 20px);
    }
    .offlineSlideW:not(:has(.offlineSlide.loop))::before{
        display: block;
    }
    .offlineSlideW::after{
        right: -16px;
        width: 16px;
        top: -10px;
        height: calc(100% + 20px);
        border-radius: 0 0 16px 0;
    }
    .offlineSlide{
        width: 100%;
    }
    .offlineSlideW>.slideRoundedBtn{
        display: none;
    }
    .periodBr{
        display: none;
    }
}
@media screen and (max-width: 500px){

}
@media screen and (max-width: 374px){
    .periodBr{
        display: block;
    }
}

.noData{
    min-height: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px 0;
    padding: 50px 16px;
    border-radius: 16px;
    background-color: var(--primary-lighten5);
}
.noData>.icon{
    width: 128px;
    height: 128px;
}
.iconNodata1{
    background-image: url(../image/icon-nodata1.svg);
}
.iconNodata2{
    background-image: url(../image/icon-nodata2.svg);
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .noData{
        min-height: 0;
    }
    .noData>.icon{
        width: 98px;
        height: 98px;
    }
}

.modal.emp .boardCaption>.selectSecondary{
    flex: 0 0 auto;
    width: 174px;
}
@media screen and (max-width: 500px){
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .groupApply.tableResponsiveLg tr>td:nth-child(2) {
        display: none;
    }
    .groupApply.tableResponsiveLg tr>td:nth-child(3)::after {
        content: "이름";
    }
    .groupApply.tableResponsiveLg tr>td:nth-child(4)::after {
        content: "생년월일";
    }
    .groupApply.tableResponsiveLg tr>td:nth-child(5)::after {
        content: "휴대폰번호";
    }
    .groupApply.tableResponsiveLg tr>td:nth-child(6)::after {
        content: "이메일";
    }
    .groupApply.tableResponsiveLg tr>td:nth-child(7)::after {
        content: "회원종류";
    }
    .modal.emp .boardCaption{
        flex-wrap: wrap;
        gap: 8px 16px;
        justify-content: flex-start;
    }
    .modal.emp .boardCaption>.selectSecondary{
        margin-right: calc(100% - 190px);
    }
    .modal.emp .boardCaption>.radioW{
        flex-basis: 0;
        flex-grow: 1;
    }
}
@media screen and (max-width: 767px){
    .modal.emp .boardCaption{
        gap: 8px;
    }
    .modal.emp .boardCaption>.selectSecondary{
        margin-bottom: 8px;
    }
}
@media screen and (max-width: 500px){
}

.eduSelectArea{
    display: flex;
    align-items: flex-start;
    gap: 0 30px;
}
.eduSelectPanel{
    width: 70%;
    max-width: 722px;
}
.eduSelectPanel .panelItem{
    border: 1px solid transparent;
    border-radius: 8px;
    overflow: hidden;
}
.eduSelectPanel .panelItem + .panelItem{
    margin-top: 20px;
}
.eduSelectPanel .panelItem.active{
    border-color: var(--secondary-lighten4);
}
.eduSelectHead{
    background-color: var(--secondary-lighten4);
    display: flex;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 24px;
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
    min-height: 52px;
}
.eduSelectList{
    display: block;
    padding: 0 30px;
}
.eduSelectList>li{
    padding: 18px 0;
    display: flex;
    align-items: center;
    gap: 0 8px;
}
.eduSelectList>li + li{
    border-top: 1px solid var(--secondary-lighten4);
}
.eduSelectList>li>p{
    min-width: 92px;
    width: 92px;
    flex: 0 0 auto;
}
.eduSelectList>li>.btnTxt{
    padding: 0;
    color: var(--secondary-base);
    border-radius: 0;
    height: auto;
    flex-basis: 0;
    flex-grow: 1;
    max-width: calc(100% - 156px);
    white-space: wrap;
    text-align: left;
}

.eduSelectedArea{
    flex-basis: 0;
    flex-grow: 1;
    width: calc(30% - 30px);
    padding: 20px;
    border-radius: 20px;
    border: 1px solid var(--primary-lighten4);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .08);
}
.eduSelectedArea>strong{
    display: block;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}
.eduSelectedW{
    padding-right: 4px;
    margin-right: -4px;
    overflow-x: hidden;
    overflow-y: auto;
    height: 400px;
}
.eduSelectedW::-webkit-scrollbar {
    width: 5px;
}
.eduSelectedW::-webkit-scrollbar-track {
    background-color: var(--primary-lighten5);
    border-radius: 999px;
}
.eduSelectedW::-webkit-scrollbar-thumb {
    background-color: var(--primary-base);
    border-radius: 999px;
}
.eduSelectedW::-webkit-scrollbar-button {
    display: none;
}
.eduSelected{
    width: 100%;
    display: block;
}
.eduSelected>li{
    display: flex;
    flex-direction: column;
    gap: 18px 0;
    width: 100%;
    padding: 20px;
    background-color: var(--primary-lighten5);
    border: 1px solid var(--primary-lighten4);
    border-radius: 16px;
}
.eduSelected>li + li{
    margin-top: 10px;
}
.eduSelected>li>.btn{
    --btn-height-xxs: 28px;
    --btn-padding-xxs: 0 12px;
    --btn-font-size-xxs: 14px;
    margin-left: auto;
}
.eduSelectedArea>.bottomBtnW{
    margin-top: 16px;
    gap: 0 8px;
}

.package .infoRow>strong{
    min-width: 94px;
    width: 94px;
}

@media screen and (min-width: 1201px){
    .eduSelectList>li>.btnTxt:hover{
        background-color: #fff;
        color: var(--primary-base);
    }
}
@media screen and (max-width: 1439px){
    .package .infoRow>strong{
        min-width: 100%;
        width: 100%;
    }
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .eduMore.tableResponsiveTit tr>td:nth-child(1)>.tableInner::before{
        content: "과정분야: ";
    }
    .eduMore.tableResponsiveTit tr>td:nth-child(2)>.tableInner::before{
        content: "과정방법: ";
    }
    .eduMore.tableResponsiveTit tr>td:nth-child(1){
        flex: 1 1 100%;
        order: 2;
        margin-bottom: 4px;
    }
    .eduMore.tableResponsiveTit tr>td:nth-child(2){
        flex: 1 1 100%;
        order: 3;
    }
    .eduMore.tableResponsiveTit tr>td:nth-child(3){
        order: 1;
    }
    .eduSelectPanel{
        width: 60%;
    }
    .eduSelectedArea{
        width: calc(40% - 30px);
    }
}
@media screen and (max-width: 767px){
    .eduSelectArea{
        display: block;
    }
    .eduSelectPanel{
        width: 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }
    .eduSelectPanel .panelItem + .panelItem{
        margin-top: 10px;
    }
    .eduSelectHead{
        padding-left: 16px;
        min-height: 46px;
    }
    .eduSelectList{
        padding: 0 12px;
    }
    .eduSelectList>li{
        padding: 12px 0;
        gap: 6px 8px;
        flex-wrap: wrap;
    }
    .eduSelectList>li>p{
        min-width: 0;
        width: auto;
        max-width: calc(100% - 56px);
        flex-basis: 0;
        flex-grow: 1;
        order: 2;
    }
    .eduSelectList>li>.btnTxt{
        max-width: 100%;
        width: 100%;
        flex: 1 1 100%;
        order: 1;
    }
    .eduSelectList>li>.btn{
        flex: 0 0 auto;
        order: 3;
    }

    .eduSelectedArea{
        width: 100%;
        padding: 20px 16px;
    }
    .eduSelectedW{
        padding-right: 0;
        margin-right: 0;
        overflow: unset;
        height: auto;
    }
    .eduSelected{
        width: 100%;
        display: block;
    }
    .eduSelected>li{
        gap: 6px 0;
        padding: 20px 12px;
    }
    .eduSelected>li + li{
        margin-top: 10px;
    }
}
@media screen and (max-width: 500px){
}

.bookViewBtn{
    display: flex;
    gap: 0 10px;
    margin-top: auto;
}
.bookViewBtn>.btn{
    flex: 0 0 auto;
    width: 134px;
    min-width: 134px;
}
.countBtnArea{
    display: flex;
    align-items: center;
    gap: 0 24px;
    margin-right: auto;
}
.countBtnArea>strong{
    display: block;
    font-weight: 600;
    font-size: var(--txt-font-size-lg);
}
.countBtnW{
    display: flex;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: #fff;
    width: 134px;
    height: var(--btn-height);
    overflow: hidden;
}
.bookViewBtn .countBtnW{
    margin-right: auto;
}
.countBtn{
    flex: 0 0 auto;
    width: var(--btn-height);
    min-width: var(--btn-height);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.countInput{
    flex-basis: 0;
    flex-grow: 1;
    border-right: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    min-width: 0;
    text-align: center;
    font-size: var(--input-font-size);
    font-weight: 600;
    padding: 0 6px;
}
@media screen and (min-width: 1201px){
    .countBtn:hover{
        background-color: var(--primary-lighten5);
    }
}
@media screen and (max-width: 1439px){
    .bookViewBtn{
        margin-top: 16px;
    }
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .bookViewBtn>.btn{
        white-space: nowrap;
        flex-basis: 0;
        flex-grow: 1;
        width: auto;
        min-width: 0;
    }
}
@media screen and (max-width: 767px){
    .bookViewBtn{
        flex-wrap: wrap;
        gap: 10px 8px;
        margin-top: 10px;
    }
    .countBtnArea{
        flex: 1 1 100%;
        display: block;
    }
    .countBtnArea>strong{
        margin-bottom: 4px;
    }
}
@media screen and (max-width: 500px){
}

.courseList{
    display: block;
}
.courseList>li{
    display: block;
    padding: 30px 0;
    border-bottom: 1px solid var(--border-color);
}
.courseList>li:first-child{
    padding-top: 0;
}
.courseList .eduViewTop{
    margin-bottom: 0;
}
.courseList .eduViewLeft{
    width: 32%;
    max-width: 328px;
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .courseList .eduViewLeft{
        width: 100%;
        max-width: 372px;
    }
    .courseList .eduViewRight>.label.sm{
        font-size: var(--txt-font-size);
        height: 30px;
    }
    .courseList>li{
        padding: 20px 0;
    }
    .courseList>li:first-child{
        padding-top: 0;
    }
    .courseList .eduViewLeft{
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 500px){
}
.inputCard{
    padding: 18px 30px;
    background-color: var(--primary-lighten5);
    border-radius: 16px;
}
.inputCard .formRow{
    padding: 12px 0;
}
.inputCard .formRow>strong{
    width: 154px;
    min-width: 154px;
    min-height: var(--btn-height);
}
.inputCard .formRow + .formRow {
    margin-top: 0;
    border-top: 1px solid var(--primary-lighten3);
}
.inputCard:not(.wide) .formRowContents .inputSecondary,
.inputCard:not(.wide) .inputBirth,
.inputCard:not(.wide) .inputAddress,
.inputCard:not(.wide) .inputRrn,
.inputCard:not(.wide) .inputBank{
    max-width: 400px;
}
.inputCard .formRowContents .btn{
    min-width: 96px;
    padding: 0 20px;
}
.inputCard .inputEmail{
    max-width: 534px;
}
.inputCard .inputSecondary,
.inputCard .selectSecondary>select,
.inputCard .fileInput{
    border: 0;
}
.inputCard textarea.inputSecondary{
    height: 280px;
}
.inputCard .inputCaptcha{
    display: flex;
    gap: 0 10px;
    width: 100%;
}
.inputCard .inputCaptcha .captcha{
    background-color: var(--grey-lighten1);
    flex: 0 0 auto;
    border-radius: 8px;
}
.inputCard .inputCaptcha>.inputSecondary{
    flex-basis: 0;
    flex-grow: 1;
    max-width: calc(100% - 106px);
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .inputCard{
        padding: 8px 12px;
        border-radius: 16px;
    }
    .inputCard .formRow>strong{
        width: 100%;
        min-width: 0;
        min-height: 0;
    }
    .inputCard .formRowContents .inputSecondary,
    .inputCard .inputBirth,
    .inputCard .inputAddress,
    .inputCard .inputRrn,
    .inputCard .inputBank{
        max-width: 100%;
    }
    .inputCard .formRowContents .btn{
        min-width: 0;
    }
    .inputCard .inputEmail{
        max-width: 100%;
    }
    .inputCard .inputCaptcha{
        display: block;
    }
    .inputCard .inputCaptcha>.inputSecondary{
        margin-top: 10px;
        max-width: 100%;
    }
}

.orderTable{
    --order-col1: 34%;
    --order-col2: 22%;
    --order-col3: 22%;
    --order-col4: 22%;

    border: 1px solid var(--primary-lighten4);
    border-radius: 16px;
    overflow: hidden;
}
.orderTableHead{
    display: flex;
    background-color: var(--primary-lighten5);
    border-bottom: 1px solid var(--primary-lighten4);
}
.orderTableHead>p{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 16px;
    height: 56px;
    font-size: var(--txt-font-size-lg);
    font-weight: 600;
}
.orderTableHead>p + p{
    border-left: 1px solid var(--primary-lighten4);
}
.orderTableHead>p:nth-child(1){
    width: var(--order-col1);
}
.orderTableHead>p:nth-child(2){
    width: var(--order-col2);
}
.orderTableHead>p:nth-child(3){
    width: var(--order-col3);
}
.orderTableHead>p:nth-child(4){
    width: var(--order-col4);
}
.orderTableTrW{
    display: block;
    width: 100%;
}
.orderTableTr{
    position: relative;
    padding: 50px 0;
    display: flex;
    align-items: center;
}
.orderTableTr::after{
    content: "";
    display: block;
    position: absolute;
    width: calc(100% - 60px);
    height: 1px;
    background-color: var(--primary-lighten4);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.orderTableTd{
    text-align: center;
}
.orderTableTd:not(.bookNameW){
    padding: 0 16px;
}
.orderTableTr>.orderTableTd:nth-child(1){
    width: calc(var(--order-col1) + var(--order-col2));
}
.orderTableTr>.orderTableTd:nth-child(2){
    width: var(--order-col3);
}
.orderTableTr>.orderTableTd:nth-child(3){
    width: var(--order-col4);
}
.orderInfo{
    font-weight: 500;
    font-size: var(--txt-font-size);
}
.orderTableBody .orderInfo>strong{
    display: none;
}
.orderTableTd.bookNameW{
    display: flex;
    align-items: center;
}
.orderTableTd.bookNameW>.bookThumbW{
    width: 150px;
    padding-left: 30px;
    margin-bottom: 0;
}
.orderTableTd.bookNameW>.bookThumbW .thumb{
    border-radius: 0;
}
.orderTableTd.bookNameW>.bookName{
    padding: 0 30px;
    flex-basis: 0;
    flex-grow: 1;
    text-align: left;
    max-width: calc(61% - 150px);
    font-weight: 500;
    font-size: var(--txt-font-size);
}
.orderTableTd.bookNameW>.orderInfo{
    padding: 0 30px;
    width: 39%;
}
.orderInfo .countBtnW{
    margin: 0 auto;
}
.orderTableFoot .orderInfo{
    width: calc(var(--order-col3) + var(--order-col4));
    margin-left: auto;
    display: flex;
    align-items: center;
}
.orderTableFoot .orderInfo>strong,
.orderTableFoot .orderInfo>p{
    width: 50%;
}
.orderTableFoot .orderInfo>strong{
    display: block;
    font-size: var(--txt-font-size-lg);
    font-weight: 600;
    text-align: left;
    padding-left: 30px;
}
.orderTableFoot .orderInfo>p{
    text-align: right;
    padding-right: 30px;
}
.orderDelivery{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.orderDelivery .orderInfo{
    padding: 20px 0;
}
.orderDelivery>span{
    display: block;
    font-weight: 500;
    font-size: var(--txt-font-size);
    width: calc(var(--order-col1) + var(--order-col2));
    padding-left: 30px;
}
.orderDelivery .orderInfoAdd{
    margin-top: -10px;
    margin-left: calc(100% - (var(--order-col3) + var(--order-col4)));
}
.orderTotal .orderInfo{
    padding: 20px 0;
}
.orderTotal .orderInfo>p{
    color: var(--primary-base);
    font-weight: 700;
    font-size: var(--tit-font-size-sm);
}
.orderCoupon{
    width: 100%;
    display: flex;
    align-items: center;
}
.orderCouponSelect{
    display: flex;
    align-items: center;
    gap: 0 20px;
    width: calc(var(--order-col1) + var(--order-col2));
    padding-left: 30px;
}
.orderCouponSelect>.selectSecondary{
    flex-basis: 0;
    flex-grow: 1;
    max-width: 345px;
}
.orderCouponSelect>strong{
    display: block;
    font-size: var(--txt-font-size-lg);
    font-weight: 600;
    text-align: left;
}
.orderCoupon>.orderInfo{
    width: calc(var(--order-col3) + var(--order-col4));
    margin-left: auto;
    display: flex;
    align-items: center;
}
@media screen and (min-width: 1201px){
}
@media screen and (min-width: 1024px){
    .orderTable.check{
        --order-col1: 30%;
        --order-col2: 20%;
        --order-col3: 20%;
        --order-col4: 20%;
        --order-col5: 10%;

        position: relative;
    }
    .orderTable.check .orderTableHead>p:nth-child(5){
        width: var(--order-col5);
    }
    .orderTable.check .orderTableTr>.orderTableTd:nth-child(4){
        width: var(--order-col5);
    }
    .orderTable.check .orderTableFoot .orderInfo{
        width: calc(var(--order-col3) + var(--order-col4) + var(--order-col5));
    }
    .orderTable.check .orderTableMoHead{
        position: absolute;
        left: 40px;
        top: 18px;
    }
    .orderTable.check .orderTableHead{
        padding-left: 100px;
    }
    .orderTable.check .orderTableHead>p:nth-child(1){
        border-left: 1px solid var(--primary-lighten4);
    }
    .orderTable.check .orderTableTrW{
        padding-left: 100px;
        position: relative;
    }
    .orderTable.check .orderTableTrW>.checkPrimary{
        position: absolute;
        top: 50%;
        left: 40px;
        transform: translateY(-50%);
    }
    .orderTable.check .orderTableTr::after{
        width: calc(100% + 40px);
        left: unset;
        right: 30px;
        transform: translateX(0);
    }
    .orderTable.check .orderTableFoot{
        padding-left: 100px;
    }
    .orderTable.check .orderDelivery>span{
        position: relative;
        left: -100px;
    }
    .orderTable.check .orderCouponSelect{
        position: relative;
        left: -100px;
    }
}
@media screen and (max-width: 1439px){
    .orderTableTd.bookNameW>.bookThumbW {
        width: 130px;
        margin: 0;
    }
    .orderTableTd.bookNameW>.bookName{
        max-width: calc(61% - 130px);
        padding: 0 30px 0 16px;
    }
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .orderTableHead{
        display: none;
    }
    .orderTableTr{
        padding: 30px;
        display: block;
    }
    .orderTableTr::after{
        width: calc(100% - 60px);
    }
    .orderTableTd{
        text-align: left;
    }
    .orderTableTd + .orderTableTd{
        margin-top: 10px;
    }
    .orderInfo{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0 24px;
    }
    .orderInfo>p{
        text-align: right;
    }
    .orderTableTd:not(.bookNameW){
        padding: 0;
    }
    .orderTableTr>.orderTableTd:nth-child(1),
    .orderTableTr>.orderTableTd:nth-child(2),
    .orderTableTr>.orderTableTd:nth-child(3){
        width: 100%;
    }
    .orderTableBody .orderInfo>strong{
        display: block;
        font-weight: 600;
    }
    .orderTableTd.bookNameW{
        display: block;
        position: relative;
        margin-bottom: 20px;
    }
    .orderTableTd.bookNameW>.bookThumbW{
        width: 120px;
        padding-left: 0;
    }
    .orderTableTd.bookNameW>.bookName{
        padding: 0;
        width: 100%;
        max-width: calc(100% - 140px);
        position: absolute;
        left: 140px;
        top: 50%;
        transform: translateY(calc(-100% + 7px));
        min-height: 45px;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: keep-all;
    }
    .orderTableTd.bookNameW>.orderInfo{
        padding: 0;
        width: 100%;
        max-width: calc(100% - 140px);
        position: absolute;
        left: 140px;
        top: 50%;
        transform: translateY(15px);
        justify-content: flex-start;
    }
    .orderInfo .countBtnW{
        margin-right: 0;
    }
    .orderTableFoot .orderInfo{
        width: 100%;
    }
    .orderTableFoot .orderInfo>strong,
    .orderTableFoot .orderInfo>p{
        width: 50%;
    }
    .orderTableFoot .orderInfo>strong{
        font-size: var(--txt-font-size);
        padding-left: 0;
    }
    .orderTableFoot .orderInfo>p{
        padding-right: 0;
    }
    .orderDelivery{
        flex-direction: column;
        padding: 20px 30px 0;
    }
    .orderDelivery .orderInfo{
        padding: 0;
        order: 1;
    }
    .orderDelivery .orderInfoAdd{
        margin-top: 4px;
        margin-left: 0;
        order: 2;
    }
    .orderDelivery>span{
        margin-top: 8px;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--primary-lighten4);
        text-align: right;
        order: 3;
    }
    .orderTotal{
        padding: 20px 30px;
    }
    .orderTotal .orderInfo{
        padding: 0;
    }
    .orderTableMoHead{
        display: flex;
        align-items: center;
        height: 44px;
        background-color: var(--primary-lighten5);
        border-bottom: 1px solid var(--primary-lighten4);
        padding: 0 30px;
    }
    .orderTable.check .orderTableTrW{
        padding-left: 50px;
        position: relative;
    }
    .orderTable.check .orderTableTrW .checkPrimary{
        position: absolute;
        left: 30px;
        top: 30px;
    }
    .orderTable.check .orderTableTr::after {
        width: calc(100% - 10px);
        left: unset;
        right: 30px;
        transform: translateX(0);
    }
    .orderTable.check .orderTableTd:has(.btn.greyLighten1){
        display: flex;
        justify-content: flex-end;
    }
    .orderCoupon{
        display: block;
        padding: 20px 0;
    }
    .orderCouponSelect{
        justify-content: space-between;
        padding: 0 30px;
        width: 100%;
    }
    .orderCouponSelect>.selectSecondary{
        max-width: 100%;
    }
    .orderCouponSelect>strong{
        font-size: var(--txt-font-size);
        font-weight: 600;
        width: 50%;
    }
    .orderCoupon>.orderInfo{
        width: 100%;
        margin-top: 0;
        padding: 0 30px;
        margin-top: 20px;
    }
}
@media screen and (max-width: 767px){
    .orderTableTr{
        padding: 20px 12px;
        display: block;
    }
    .orderTableTr::after{
        width: calc(100% - 24px);
    }
    .orderInfo{
        gap: 0 8px;
    }
    .orderTableTd.bookNameW{
        margin-bottom: 16px;
    }
    .orderTableTd.bookNameW>.bookThumbW{
        width: 120px;
        padding-left: 0;
        margin: 0 auto 16px;
    }
    .orderTableTd.bookNameW>.bookName{
        max-width: 100%;
        position: static;
        transform: translateY(0);
        min-height: 0;
        font-size: var(--txt-font-size-lg);
        font-weight: 600;
    }
    .orderTableTd.bookNameW>.orderInfo{
        max-width: 100%;
        position: static;
        transform: translateY(0);
        justify-content: space-between;
        margin-top: 16px;
    }
    .orderDelivery{
        padding: 20px 12px 0;
    }
    .orderDelivery>span {
        margin-top: 4px;
    }
    .orderTotal{
        padding: 20px 12px;
    }
    .orderTotal .orderInfo{
        display: block;
    }
    .orderTableFoot .orderTotal .orderInfo>strong,
    .orderTableFoot .orderTotal .orderInfo>p {
        width: 100%;
    }
    .orderTotal .orderInfo>p{
        margin-top: 4px;
    }
    .orderTableMoHead{
        padding: 0 16px;
    }
    .orderTable.check .orderTableTrW{
        padding-left: 0;
    }
    .orderTable.check .orderTableTrW .checkPrimary{
        position: static;
        margin: 12px 0 0 16px;
    }
    .orderTable.check .orderTableTr::after {
        width: calc(100% - 24px);
        left: 50%;
        transform: translateX(-50%);
    }
    .orderCoupon{
        padding: 20px 12px 0;
    }
    .orderCouponSelect{
        padding: 0;
        width: 100%;
        display: block;
    }
    .orderCouponSelect>strong{
        width: 100%;
        margin-bottom: 8px;
    }
    .orderCoupon>.orderInfo{
        width: 100%;
        padding: 0 0 20px;
        margin-top: 20px;
        border-bottom: 1px solid var(--border-color);
    }
}
@media screen and (max-width: 500px){
}

.dashboardInfoArea{
    padding: 40px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
}
.dashboardInfoArea:has(.dashboardInfoTop>.dashboardInfoW){
    padding: 25px 30px;
}
.dashboardInfoTop{
    display: flex;
    align-items: center;
    gap: 0 30px;
}
.dashboardInfoTop>strong{
    flex-basis: 0;
    flex-grow: 1;
    display: block;
    font-size: 22px;
    line-height: 1;
}
.dashboardInfoTop>strong>span{
    display: inline-block;
    margin-left: 4px;
}
.lineInfo{
    flex: 0 0 auto;
    display: flex;
    gap: 0 30px;
}
.lineInfo>li{
    display: flex;
    align-items: center;
    gap: 0 16px;
}
.lineInfo>li>span{
    display: block;
    flex: 0 0 auto;
    padding-right: 17px;
    color: var(--grey-base);
    position: relative;
}
.lineInfo>li>span::after{
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 14px;
    background-color: var(--border-color);
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.lineInfo>li>p,
.lineInfo>li>button{
    font-size: var(--txt-font-size-lg);
    font-weight: 600;
}
.lineInfo>li>button {
    transition: var(--transition);
}
.dashboardInfoTop .tooltipArea{
    flex: 0 0 auto;
}
.dashboardInfoTop .tooltipClickBtn.btn{
    padding: 0 18px;
    font-size: var(--txt-font-size);
    height: 35px;
}
.dashboardInfoW{
    display: flex;
    margin: 40px -6px 0;
}
.dashboardInfoW>li{
    display: block;
    padding: 0 6px;
    flex: 1 1 calc(100% / 6);
}
.dashboardInfo{
    display: block;
    text-align: center;
    padding: 24px 16px;
    height: 100%;
    border-radius: 16px;
    border: 1px solid var(--primary-lighten5);
    background-color: var(--primary-lighten5);
    transition: var(--transition);
}
.dashboardInfo.white{
    background-color: #fff;
    border-color: var(--border-color);
}
.dashboardInfo>span{
    display: block;
    color: var(--primary-base);
    font-weight: 600;
    font-size: var(--txt-font-size);
}
.dashboardInfo>p{
    line-height: 1;
    font-size: 22px;
    font-weight: 600;
    margin-top: 8px;
}
.tooltipArea.bottom .tooltipW{
    top: unset;
    left: unset;
    bottom: -26px;
    right: 0;
    transform: translateY(100%);
}
.tooltipArea.bottom.active .tooltipW{
    bottom: -10px;
}
.tooltipArea.bottom .tooltip::after{
    display: none;
}
.tooltipArea.lg .tooltip{
    width: 500px;
}
.tooltipBody{
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
}
.tooltipBody::-webkit-scrollbar {
    width: 5px;
}
.tooltipBody::-webkit-scrollbar-track {
    background-color: var(--primary-lighten5);
    border-radius: 999px;
}
.tooltipBody::-webkit-scrollbar-thumb {
    background-color: var(--primary-base);
    border-radius: 999px;
}
.tooltipBody::-webkit-scrollbar-button {
    display: none;
}
.tooltipTit{
    font-size: var(--txt-font-size-lg);
    padding-bottom: 14px;
    text-align: left;
    border-bottom: 1px solid var(--primary-lighten4);
}
.arrowBoardList{
    display: block;
}
.arrowBoardList>li{
    display: block;
}
.arrowBoardList>li + li{
    border-top: 1px solid var(--border-color);
}
.arrowBoardItem{
    position: relative;
    display: block;
    padding: 16px 0;
    text-align: left;
    width: 100%;
    padding-right: 38px;
}
.arrowBoardItem::after{
    content: "";
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url(../image/icon-chevron-grey.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
}
.arrowBoardItem>.label{
    margin-bottom: 8px;
}
.arrowBoardItem>p.primaryTxt{
    margin-bottom: 8px;
}
.arrowBoardItem>strong{
    display: flex;
    align-items: center;
    gap: 0 10px;
    line-height: 26px;
    transition: var(--transition);
}
.arrowBoardItem>strong>.label{
    flex: 0 0 auto;
}
.arrowBoardItem>strong>span:not(.label){
    flex-basis: 0;
    flex-grow: 1;
    display: block;
    max-width: calc(100% - 70px);
}
.arrowBoardItem>p.greyTxt{
    margin-top: 10px;
    line-height: 1;
}
.dashboardInfoTop>.dashboardInfoW{
    margin-top: 0;
    width: 316px;
    min-width: 316px;
}

@media screen and (min-width: 1201px){
    a.dashboardInfo:hover,
    button.dashboardInfo:hover{
        border-color: var(--primary-lighten3);
    }
    .arrowBoardItem:hover>strong{
        color: var(--primary-base);
    }
    .lineInfo>li>button:hover{
        text-decoration: underline;
    }
}

@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
    .dashboardInfoW{
        flex-wrap: wrap;
        margin: 34px -6px -6px;
    }
    .dashboardInfoW>li{
        padding: 6px;
        flex: 1 1 33.3333%;
    }
}
@media screen and (max-width: 1023px){
    .dashboardInfoTop{
        gap: 8px;
        flex-wrap: wrap;
    }
    .dashboardInfoTop:not(:has(>.dashboardInfoW))>strong{
        order: 1;
    }
    .dashboardInfoTop .tooltipArea{
        order: 2;
        width: fit-content;
    }
    .lineInfo{
        order: 3;
        flex: 1 1 100%;
    }
    .arrowBoardItem>strong{
        display: block;
        line-height: 1.4;
    }
    .arrowBoardItem>strong>.label{
        margin-bottom: 4px;
    }
    .arrowBoardItem>strong>span:not(.label){
        max-width: 100%;
    }
}
@media screen and (max-width: 767px){
    .dashboardInfoArea{
        padding: 20px 12px;
    }
    .dashboardInfoArea:has(.dashboardInfoTop>.dashboardInfoW){
        padding: 20px 12px;
    }
    .dashboardInfoTop>strong{
        font-size: 18px;
    }
    .dashboardInfoTop>strong>span{
        display: inline;
        margin-left: 0;
    }
    .dashboardInfoTop .tooltipArea{
        width: fit-content;
    }
    .dashboardInfoTop:has(>.dashboardInfoW){
        display: block;
    }
    .dashboardInfoTop>.dashboardInfoW{
        width: 100%;
        min-width: 0;
        margin-top: 16px;
    }
    .dashboardInfoTop .tooltipClickBtn.btn{
        height: var(--btn-height-xs);
        font-size: var(--btn-font-size-xs);
        padding: var(--btn-padding-xs);
    }
    .lineInfo{
        flex-wrap: wrap;
        gap: 4px 16px;
    }
    .lineInfo>li{
        gap: 0 8px;
    }
    .lineInfo>li>span{
        padding-right: 9px;
    }
    .lineInfo>li>span::after{
        height: 10px;
    }
    .dashboardInfoW{
        margin: 16px -4px -4px;
    }
    .dashboardInfoW>li{
        display: block;
        padding: 4px;
        flex: 1 1 50%;
    }
    .dashboardInfo{
        padding: 16px 12px;
    }
    .dashboardInfo>p{
        font-size: 18px;
        margin-top: 6px;
    }
    .tooltipArea.lg .tooltip{
        max-width: calc(100vw - 96px);
        padding: 16px 12px;
    }
    .tooltipBody{
        max-height: 240px;
        padding-right: 4px;
    }
    .arrowBoardItem{
        padding: 14px 0;
        padding-right: 28px;
    }
    .arrowBoardItem::after{
        width: 20px;
        height: 20px;
    }
    .arrowBoardItem>.label{
        margin-bottom: 8px;
    }
    .arrowBoardItem>p.primaryTxt{
        margin-bottom: 6px;
    }
    .arrowBoardItem>p.greyTxt{
        margin-top: 6px;
    }
}
@media screen and (max-width: 500px){
}

.tooltipBody>p.boardCaption{
    margin-top: 14px;
}
.dragList{
    display: block;
    border-top: 1px solid var(--primary-lighten4);
}
.dargItem{
    display: flex;
    border-bottom: 1px solid var(--primary-lighten4);
    min-height: 56px;
}
.dargItemInner{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 12px;
    font-size: var(--txt-font-size);
    font-weight: 500;
}
.dargItemInner.left{
    justify-content: flex-start;
    text-align: left;
}
.dargItemInner>.icon{
    min-width: 24px;
}
.dargItem>*:not(:last-child){
    border-right: 1px solid var(--primary-lighten4);
}
.dargItem>*:nth-child(1){
    width: 82px;
}
.dargItem>*:nth-child(2){
    width: 52px;
}
.dargItem>*:nth-child(3){
    width: calc(100% - 172px);
    font-weight: 600;
}
.dargItem>*:nth-child(4){
    width: 38px;
}
.dragArea{
    cursor: grab;
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .tooltipArea.lg:has(.dargItem) .tooltip {
        max-width: calc(100vw - 72px);
    }
    .dargItem{
        padding: 16px 0;
        display: block;
        padding-right: 48px;
        position: relative;
    }
    .dargItemInner{
        padding: 0;
        display: block;
        text-align: left;
    }
    .dargItem>*:not(:last-child){
        border: 0;
    }
    .dargItem>*:nth-child(1){
        width: 100%;
        margin-bottom: 8px;
    }
    .dargItem>*:nth-child(2){
        width: 100%;
        margin-bottom: 4px;
        font-size: 14px;
    }
    .dargItem>*:nth-child(3){
        width: 100%;
        font-size: 16px;
    }
    .dargItem>*:nth-child(4){
        height: 100%;
        width: 48px;
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 1px solid var(--primary-lighten4);
    }
    .dragArea{
        cursor: grab;
    }

}
@media screen and (max-width: 500px){
}

.eduStatusList{
    display: flex;
    flex-wrap: wrap;
    margin: -20px;
}
.eduStatusList>li{
    display: block;
    padding: 20px;
    flex: 1 1 50%;
    width: 50%;
    max-width: 50%;
}
.eduStatus{
    position: relative;
    display: block;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
}
.eduStatusList>li .eduStatus{
    height: 100%;
    display: flex;
    flex-direction: column;
}
.eduStatusTop{
    display: flex;
    align-items: center;
    gap: 0 16px;
    margin-bottom: 20px;
}
.eduStatus:has(.eduGoBtn) .eduStatusTop{
    padding-right: 120px;
}
.eduStatusTop>*:not(p){
    flex: 0 0 auto;
}
.eduStatusTop>.label + .label{
    margin-left: -10px;
}
.eduStatusTop>p{
    flex-basis: 0;
    flex-grow: 1;
    font-size: var(--txt-font-size-sm);
    font-weight: 600;
}
.eduStatusTit{
    display: block;
    font-size: var(--txt-font-size-lg);
    font-weight: 600;
    margin-bottom: 40px;
}
.eduStatusTit + .eduStatusTxt{
    margin-top: -20px;
    margin-bottom: 40px;
}
.eduStatusTxt{
    font-size: var(--txt-font-size-sm);
    font-weight: 600;
}
.eduGoBtn{
    position: absolute;
    top: 30px;
    right: 30px;
}
.eduStatusList>li .progressW{
    margin-top: auto;
}
.progressTop{
    display: flex;
    gap: 0 8px;
    align-items: flex-end;
    font-size: var(--txt-font-size);
    margin-bottom: 16px;
}
.progressTop>p{
    font-weight: 600;
    flex-basis: 0;
    flex-grow: 1;
}
.progressTop>p>span{
    display: inline-block;
    margin-left: 4px;
}
.progressTop>span{
    flex: 0 0 auto;
    display: block;
    font-weight: 500;
}
.progress{
    width: 100%;
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background-color: var(--grey-lighten5);
}
.progress>span{
    display: block;
    height: 100%;
    border-radius: 999px;
    background-color: var(--primary-base);
    transition: .15s linear;
}
.eduStatusBtn{
    display: flex;
    padding: 16px;
    justify-content: center;
    gap: 65px;
    border-radius: 16px;
    margin-top: 20px;
}
.eduStatusBtn:has(>li){
    border: 1px solid var(--border-color);
}
.eduStatusBtn>li{
    position: relative;
    flex: 1 1 33%;
    display: block;
    max-width: 80px;
}
.eduStatusBtn>li:not(:last-child)::after{
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 26px;
    top: 50%;
    right: -33px;
    transform: translateY(-50%);
    background-color: var(--border-color);
}
.eduStatusBtn>li>strong{
    display: block;
    font-size: var(--txt-font-size);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    margin-bottom: 8px;
}
.eduStatusList .eduStatusBtn {
    gap: 41px;
}
.eduStatusList .eduStatusBtn>li:not(:last-child)::after {
    right: -21px;
}
.eduStatusList .eduStatusBtn>li{
    flex-basis: 0;
    flex-grow: 1;
    max-width: unset;
}
.eduStatusList .eduStatusBtn .btn.block{
    max-width: 80px;
    margin: 0 auto;
}
.eduStatusCountW{
    display: block;
}
.eduStatusCountW>.noData{
    border-radius: 0;
    background-color: #fff;
}
.eduStatusCountW>li{
    display: block;
    position: relative;
}
.eduStatusCountW>li:not(:last-child)::after{
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 60px);
    height: 1px;
    background-color: var(--border-color);
}
.eduStatusCount{
    display: flex;
    align-items: center;
    gap: 0 30px;
    padding: 30px;
}
.eduStatusCount>.eduStatus{
    border-radius: 0;
    border: 0;
    padding: 0;
    flex-basis: 0;
    flex-grow: 1;
}
.eduStatusCount .eduStatusInfo{
    position: static;
    max-width: 100%;
    justify-content: flex-start;
}
.eduStatusCount .eduStatusTop{
    margin-bottom: 16px;
}
.eduStatusCount .eduStatus:has(.eduStatusInfo) .eduStatusTop{
    padding-right: 0;
}
.eduStatusCount .eduStatusTit{
    margin-bottom: 16px;
    transition: var(--transition);
}
.eduStatusCount .eduStatusInfo>li:nth-child(3)::before{
    display: block;
}
.eduStatusCount>.dashboardInfo{
    width: 146px;
    min-width: 146px;
}
@media screen and (min-width: 1201px){
    .eduStatusCount:hover .eduStatusTit{
        color: var(--primary-base);
    }
}
@media screen and (max-width: 1439px){
    .eduStatusList{
        margin: -15px;
    }
    .eduStatusList>li{
        padding: 15px;
    }
    .eduStatusBtn{
        gap: 40px;
    }
    .eduStatusBtn>li:not(:last-child)::after{
        right: -20px;
    }
    .eduStatusCount .eduStatusInfo{
        display: block;
    }
    .eduStatusCount .eduStatusInfo>li:not(:first-child)::before{
        display: none;
    }
    .eduStatusCount .eduStatusInfo>li + li{
        margin-top: 4px;
    }
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .eduStatusList>li{
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
    .eduStatusBtn>li{
        max-width: 100%;
    }
    .progressTop>p>span{
        margin-left: 0;
    }
}
@media screen and (max-width: 767px){
    .eduStatusList{
        margin: -10px;
    }
    .eduStatusList>li{
        padding: 10px;
    }
    .eduStatus{
        padding: 20px 12px;
    }
    .eduStatusList>li .eduStatus{
        display: block;
    }
    .eduStatusTop{
        gap: 0 8px;
        margin-bottom: 16px;
    }
    .eduStatus:has(.eduGoBtn) .eduStatusTop{
        padding-right: 0;
    }
    .eduStatusTop>*:not(p){
        flex: 0 0 auto;
    }
    .eduStatusTop>p{
        flex-basis: 0;
        flex-grow: 1;
        font-size: var(--txt-font-size-sm);
        font-weight: 600;
    }
    .eduStatusTit{
        margin-bottom: 20px;
    }
    .eduStatusTit + .eduStatusTxt{
        margin-top: -8px;
        margin-bottom: 20px;
    }
    .eduGoBtn {
        position: static;
        width: 100%;
        margin-bottom: 16px;
    }
    .progressTop{
        font-size: 12px;
        margin-bottom: 8px;
    }
    .eduStatusList>li .progressW{
        margin-top: 0;
    }
    .eduStatusBtn{
        display: block;
        padding: 6px 12px;
        margin-top: 16px;
    }
    .eduStatusBtn>li{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
    }
    .eduStatusBtn>li + li{
        border-top: 1px solid var(--border-color);
    }
    .eduStatusBtn>li:not(:last-child)::after{
        display: none;
    }
    .eduStatusBtn>li>strong{
        text-align: left;
        margin-bottom: 0;
    }
    .eduStatusBtn>li>.btn{
        width: fit-content;
        padding: 0 16px;
    }
    .eduStatusList .eduStatusBtn .btn.block {
        max-width: unset;
        margin: 0;
    }
    .eduStatusCountW>li:not(:last-child)::after{
        width: calc(100% - 24px);
    }
    .eduStatusCount{
        display: block;
        padding: 20px 12px;
    }
    .eduStatusCount>.dashboardInfo{
        width: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0 8px;
        padding: 16px;
    }
    .eduStatusCount>.dashboardInfo>p{
        margin-top: 0;
    }
}
@media screen and (max-width: 500px){
}

.dashboardNotice{
    display: flex;
    gap: 0 40px;
}
.dashboardNotice>*{
    flex: 1 1 50%;
    max-width: calc(50% - 20px);
}
.dashboardNotice .card{
    padding: 30px;
    height: calc(100% - 40px);
}
.arrowBoardList.bg .arrowBoardItem{
    padding: 24px 54px 24px 30px;
    background-color: var(--primary-lighten5);
    border-radius: 16px;
}
.arrowBoardList.bg .arrowBoardItem::after{
    right: 25px;
    background-image: url(../image/icon-chevron-point2.svg);
}
.arrowBoardList.bg>li + li{
    border-top: 0;
    margin-top: 20px;
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
    .dashboardNotice{
        gap: 0 30px;
    }
    .dashboardNotice>*{
        max-width: calc(50% - 15px);
    }
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .dashboardNotice{
        display: block;
    }
    .dashboardNotice>*{
        max-width: 100%;
    }
    .dashboardNotice>* + *{
        margin-top: 50px;
    }
    .dashboardNotice .card{
        height: auto;
    }
}
@media screen and (max-width: 767px){
    .dashboardNotice>* + *{
        margin-top: 30px;
    }
    .dashboardNotice .card{
        padding: 20px 12px;
    }
    .arrowBoardList.bg .arrowBoardItem{
        padding: 12px 30px 12px 12px;
    }
    .arrowBoardList.bg .arrowBoardItem::after{
        right: 10px;
    }
    .arrowBoardList.bg>li + li{
        margin-top: 16px;
    }
}
@media screen and (max-width: 500px){
}

.infoBox{
    padding: 30px;
    border-radius: 8px;
    background-color: var(--primary-lighten5);
    margin-bottom: 40px;
}
.infoBox.sm{
    padding: 24px 30px;
    border-radius: 16px;
}
.infoBox>strong{
    display: block;
    margin-bottom: 16px;
}
.infoBox>.indent + .indent{
    margin-top: 6px;
}
.boardFilterRow{
    width: 100%;
    display: flex;
    gap: 0 20px;
    justify-content: space-between;
}
.boardFilterRow .boardFilterContents{
    display: flex;
    gap: 0 10px;
}
.boardFilterRow .boardFilterContents>.selectSecondary{
    width: 142px;
}
.boardFilterRow:not(.lg) .boardFilter>strong{
    min-width: 72px;
    width: 72px;
}
.boardFilterRow.lg  .boardFilterContents>.selectSecondary{
    width: 168px;
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
    .boardFilterRow{
        width: 100%;
        display: block;
    }
    .boardCaption:has(.boardFilterContents.period) .boardFilterRow .boardFilter{
        margin-bottom: 0;
    }
    .boardFilterRow .boardFilter + .boardFilter{
        margin-top: 16px;
    }
    .boardFilterRow .boardFilterContents>.selectSecondary{
        width: 146px;
    }
    .boardFilterRow.lg  .boardFilterContents>.selectSecondary{
        width: 146px;
    }
    .boardFilterRow:not(.lg) .boardFilter>strong{
        min-width: 90px;
        width: 90px;
    }
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .infoBox{
        padding: 20px 12px;
    }
    .infoBox.sm{
        padding: 20px 12px;
    }
    .infoBox>strong{
        margin-bottom: 8px;
    }
    .infoBox>.indent + .indent{
        margin-top: 4px;
    }
    .boardFilterRow .boardFilterContents{
        gap: 0 8px;
        flex-wrap: wrap;
    }
    .boardFilterRow .boardFilterContents>.selectSecondary{
        width: calc(50% - 4px);
    }
    .boardFilterRow.lg .boardFilterContents>.selectSecondary{
        width: calc(50% - 4px);
    }
    .modal.packageList .tableResponsive td .tableInner{
        padding-left: 80px;
    }
    .modal.packageList .tableResponsive tr>td:nth-child(1){
        display: none;
    }
    .modal.packageList .tableResponsive tr>td:nth-child(2)::after{
        content: "과정분야";
    }
    .modal.packageList .tableResponsive tr>td:nth-child(3)::after{
        content: "교육/패키지명";
    }
}
@media screen and (max-width: 500px){
}

.couponW{
    display: flex;
    align-items: center;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    justify-content: space-between;
}
.couponW>.selectSecondary{
    flex-basis: 0;
    flex-grow: 1;
    max-width: 345px;
}
.couponW>strong{
    text-align: right;
    display: block;
}
.panelItem:has(.couponHead){
    border-radius: 16px;
    border: 1px solid var(--border-color);
    max-width: 345px;
    overflow: hidden;
}
.couponHead{
    height: 63px;
    display: flex;
    align-items: center;
    padding: 0 60px 0 30px;
    background-color: transparent;
    color: var(--primary-base);
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}
.panelItem:has(.couponHead).active .couponHead{
    margin-bottom: -12px;
}
.panelItem:has(.couponHead) .radioW{
    display: block;
    padding-bottom: 18px;
}
.panelItem:has(.couponHead) .radioBtn{
    width: 100%;
}
.panelItem:has(.couponHead) .radioBtn input + label{
    min-height: 28px;
    height: auto;
    padding: 3px 30px;
    border-radius: 0;
    justify-content: flex-start;
    text-align: left;
    background-color: transparent;
}
.panelItem:has(.couponHead) .radioBtn input + label p{
    color: var(--grey-darken4);
    font-size: var(--txt-font-size);
    font-weight: 600;
}
.panelItem:has(.couponHead) .radioBtn input:checked + label p{
    color: var(--primary-base);
}
.totalPrice{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 28px 30px;
    border-radius: 16px;
    background-color: var(--primary-lighten5);
}
.totalPrice.grey{
    background-color: var(--grey-lighten5);
}
.totalPrice>strong{
    display: block;
    text-align: right;
}
@media screen and (min-width: 1201px){
    .couponHead:hover{
        color: var(--secondary-base);
    }
    .panelItem:has(.couponHead) .radioBtn:hover input + label p{
        color: var(--primary-base);
    }
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .couponW{
        padding: 20px 12px;
        display: block;
    }
    .couponW>strong{
        margin-top: 12px;
    }
    .couponW>.selectSecondary{
        max-width: 100%;
    }
    .panelItem:has(.couponHead){
        max-width: 100%;
        border-radius: 8px;
    }
    .couponHead{
        height: 44px;
        padding: 0 40px 0 12px;
    }
    .panelItem:has(.couponHead).active .couponHead{
        margin-bottom: 0;
    }
    .panelItem:has(.couponHead) .radioW{
        padding-bottom: 16px;
    }
    .panelItem:has(.couponHead) .radioBtn input + label{
        padding: 3px 12px;
    }
    .totalPrice{
        display: block;
        padding: 20px 12px;
    }
}
@media screen and (max-width: 500px){
    .totalPrice>span{
        display: block;
        margin-bottom: 8px;
    }
}

.eduStatusListRow{
    display: block;
}
.eduStatusListRow>li{
    display: block;
}
.eduStatusListRow>li + li{
    margin-top: 30px;
}
.eduStatusInfo{
    position: absolute;
    top: 34px;
    right: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 360px;
    font-size: var(--txt-font-size-sm);
    font-weight: 600;
    gap: 4px 31px;
}
.eduStatusInfo>li{
    display: block;
    position: relative;
}
.eduStatusInfo>li:not(:first-child)::before{
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 10px;
    background-color: var(--border-color);
    top: 50%;
    left: -16px;
    transform: translateY(-50%);
}
.eduStatusInfo>li:nth-child(3)::before{
    display: none;
}
.eduStatus:has(.eduStatusInfo) .eduStatusTop{
    padding-right: 360px;
}
.eduStatus:has(.eduStatusInfo) .eduStatusTop:has(>.label + .label){
    padding-right: 200px;
}
.eduStatus.lg .eduStatusTop>p{
    font-size: var(--txt-font-size);
}
.eduStatus.lg .eduStatusTop{
    margin-bottom: 24px;
}
.eduStatus.lg .eduStatusTit{
    font-size: var(--tit-font-size-xxs);
    margin-bottom: 30px;
}
.eduStatus.lg .progressTop{
    font-size: var(--txt-font-size-lg);
}
.progressArea{
    display: flex;
    flex-wrap: wrap;
    gap: 24px 16px;
    width: 70%;
    max-width: 686px;
}
.progressArea>*:first-child{
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
}
.progressArea>*:not(:first-child){
    flex: 1 1 calc(50% - 8px);
    width: calc(50% - 8px);
    max-width: calc(50% - 8px);
}
.eduStatusBtnArea{
    display: flex;
    gap: 0 20px;
    margin-top: 30px;
}
.eduStatusBtnArea .eduStatusBtnW{
    width: 70%;
    max-width: 686px;
}
.eduStatusBtnArea .eduStatusBtn{
    width: 33.333%;
    margin-top: 0;
    padding: 0;
    height: 90px;
    gap: 0;
}
.eduStatusBtnArea .eduStatusBtn>li{
    max-width: 100%;
    width: 100%;
    flex: 1 1 100%;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 30px;
}
.eduStatusBtnArea .eduStatusBtn:has(>li:nth-child(2)){
    width: 66.666%;
}
.eduStatusBtnArea .eduStatusBtn:has(>li:nth-child(2))>li{
    max-width: 50%;
    width: 50%;
    flex: 1 1 50%;
}
.eduStatusBtnArea .eduStatusBtn:has(>li:nth-child(3)){
    width: 100%;
}
.eduStatusBtnArea .eduStatusBtn:has(>li:nth-child(3))>li{
    max-width: 33%;
    width: 33%;
    flex: 1 1 33%;
}
.eduStatusBtnArea .eduStatusBtn>li:not(:last-child)::after{
    right: 0;
}
.eduStatusBtnArea .eduStatusBtn>li>strong{
    margin-bottom: 0;
    flex: 0 0 auto;
}
.eduStatusBtnArea .eduStatusBtn>li>.btn{
    max-width: 72px;
}
.eduStatusGoBtn{
    min-height: 90px;
    padding: 10px 16px;
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    background: var(--primary-lighten5);
    border-radius: 16px;
    border: 1px solid var(--primary-lighten3);
    color: var(--primary-base);
    font-size: var(--txt-font-size-lg);
    font-weight: 600;
    transition: var(--transition);
}
.eduStatusGoBtn.grey{
    background-color: var(--grey-lighten5);
    border-color: var(--border-color);
}
.eduStatusGoBtn>.icon{
    width: 54px;
    min-width: 54px;
    height: 54px;
    border-radius: 50%;
}
.iconCert{
    background-image: url(../image/icon-cert.svg);
}
.iconCertApply{
    background-image: url(../image/icon-cert-apply.svg);
}
.iconInstr{
    background-image: url(../image/icon-instr.png);
}
.iconEdu{
    background-image: url(../image/icon-edu.svg);
}
.eduStatusBottom{
    margin-top: 30px;
    padding: 20px 30px;
    border-radius: 16px;
    background-color: var(--grey-lighten5);
}
.eduStatusBottomInfo{
    display: flex;
    gap: 61px;
    font-size: var(--txt-font-size);
    font-weight: 600;
}
.eduStatusBottomInfo>li{
    position: relative;
    display: flex;
    gap: 0 12px;
}
.eduStatusBottomInfo>li:not(:last-child)::after{
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 18px;
    background-color: var(--border-color);
    top: 50%;
    right: -31px;
    transform: translateY(-50%);
}
.eduStatusBottomInfo>li>span.greyTxt{
    display: block;
    font-weight: 500;
}
.eduStatusBottomInfo>li.eduOutLink>a{
    color: var(--secondary-base);
    text-decoration: underline;
    transition: var(--transition);
}
.eduStatusBtnArea:has(.eduStatusGoBtnW){
    display: block;
}
.eduStatusBtnArea:has(.eduStatusGoBtnW)>p{
    margin-bottom: 16px;
}
.eduStatusGoBtnW{
    display: flex;
    gap: 0 18px;
}
.eduStatusGoBtnW>.eduStatusGoBtn:not(.grey){
    flex: 0 0 auto;
    width: 30%;
    max-width: 282px;
}
.eduStatusGoBtnW>.eduStatusGoBtn.grey{
    flex-basis: 0;
    flex-grow: 1;
}
.eduStatusBtnArea:not(:has(.eduStatusBtn>li)):has(>.eduStatusGoBtn){
    margin-top: -90px;
}


@media screen and (min-width: 1201px){
    a.eduStatusGoBtn:hover,
    button.eduStatusGoBtn:hover{
        background-color: var(--primary-lighten4);
    }
    a.eduStatusGoBtn.grey:hover,
    button.eduStatusGoBtn.grey:hover{
        background-color: var(--grey-lighten4);
    }
    .eduStatusBottomInfo>li.eduOutLink>a:hover{
        color: var(--primary-base);
    }
}
@media screen and (max-width: 1439px){
    .progressArea{
        width: 64%;
    }
    .eduStatusBtnArea .eduStatusBtnW{
        width: 64%;
    }
    .eduStatusBtnArea .eduStatusBtn>li{
        width: 64%;
        padding: 0 8px;
        gap: 0px 12px
    }
    .eduStatusGoBtn>.icon{
        width: 48px;
        min-width: 48px;
        height: 48px;
    }
    .eduStatusGoBtnW>.eduStatusGoBtn:not(.grey){
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .eduStatusListRow>li + li{
        margin-top: 20px;
    }
    .eduStatusInfo{
        position: static;
        display: block;
        max-width: 100%;
        margin-bottom: 20px;
    }
    .eduStatusInfo>li + li{
        margin-top: 4px;
    }
    .eduStatusInfo>li:not(:first-child)::before{
        display: none;
    }
    .eduStatusTop>.label + .label{
        margin-left: 0;
    }
    .eduStatus:has(.eduStatusInfo) .eduStatusTop{
        padding-right: 0;
    }
    .eduStatus:has(.eduStatusInfo) .eduStatusTop:has(>.label + .label) {
        flex-wrap: wrap;
        gap: 8px;
        padding-right: 0;
    }
    .eduStatus:has(.eduStatusInfo) .eduStatusTop:has(>.label + .label)>p{
        white-space: nowrap;
    }
    .eduStatus.lg .eduStatusTop{
        margin-bottom: 16px;
    }
    .eduStatus.lg .eduStatusTit{
        margin-bottom: 20px;
    }
    .eduStatus.lg .progressTop{
        font-size: 12px;
    }
    .progressArea{
        display: block;
        width: 100%;
        max-width: 100%;
    }
    .progressArea>*:not(:first-child){
        width: 100%;
        max-width: 100%;
    }
    .progressArea>* + *{
        margin-top: 8px;
    }
    .eduStatusBtnArea{
        display: block;
        margin-top: 16px;
    }
    .eduStatusBtnArea:not(:has(.eduStatusBtn>li)):has(>.eduStatusGoBtn){
        margin-top: 16px;
    }
    .eduStatusBtnArea .eduStatusBtnW{
        width: 100%;
        max-width: 100%;
    }
    .eduStatusBtnArea .eduStatusBtn{
        width: 100%;
        padding: 6px 12px;
        height: auto;
    }
    .eduStatusBtnArea .eduStatusBtn>li{
        max-width: 100%;
        width: 100%;
        padding: 12px 0;
        justify-content: space-between;
    }
    .eduStatusBtnArea .eduStatusBtn:has(>li:nth-child(2)){
        width: 100%;
    }
    .eduStatusBtnArea .eduStatusBtn:has(>li:nth-child(2))>li{
        max-width: 100%;
        width: 100%;
    }
    .eduStatusBtnArea .eduStatusBtn:has(>li:nth-child(3)){
        width: 100%;
    }
    .eduStatusBtnArea .eduStatusBtn:has(>li:nth-child(3))>li{
        max-width: 100%;
        width: 100%;
    }
    .eduStatusBtnArea .eduStatusBtn>li:not(:last-child)::after{
        right: 0;
    }
    .eduStatusBtnArea .eduStatusBtn>li>.btn{
        max-width: 100%;
        width: fit-content;
        padding: 0 16px;
    }
    .eduStatusGoBtn{
        margin-top: 16px;
        min-height: 0;
        height: auto;
        padding: 8px 12px;
        gap: 8px 10px;
        width: 100%;
    }
    .eduStatusGoBtn>.icon{
        width: 44px;
        min-width: 44px;
        height: 44px;
    }
    .eduStatusBottom{
        margin-top: 20px;
        padding: 20px 12px;
    }
    .eduStatusBottomInfo{
        display: block;
    }
    .eduStatusBottomInfo>li{
        position: relative;
        display: flex;
        flex-wrap: wrap;
        gap: 0 6px;
    }
    .eduStatusBottomInfo>li:not(.eduOutLink){
        display: block;
    }
    .eduStatusBottomInfo>li + li{
        margin-top: 4px;
    }
    .eduStatusBottomInfo>li:not(:last-child)::after{
        display: none;
    }
    .eduStatusBtnArea:has(.eduStatusGoBtnW)>p{
        margin-bottom: 0;
    }
    .eduStatusGoBtnW{
        display: block;
    }
    .eduStatusGoBtnW>.eduStatusGoBtn:not(.grey){
        width: 100%;
        max-width: 100%;
    }
}
@media screen and (max-width: 500px){
}

.boardCaption + .eduStatus.lg{
    margin-bottom: 30px;
}
.eduStatus.lg:has(.eduStatusRightBtnW) .eduStatusTit{
    margin-bottom: 0;
}
.eduStatusRightBtnW{
    display: flex;
    gap: 0 30px;
}
.eduStatusRightBtnW .progressArea{
    margin-top: 23px;
}
.eduStatusRightBtn{
    flex-basis: 0;
    flex-grow: 1;
    max-width: 162px;
    margin-left: auto;
}
.eduStatusRightBtn .btn + .btn{
    margin-top: 8px;
}
.eduStatusBottomBtn{
    display: flex;
    gap: 0 16px;
    margin-top: 16px;
}

@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .boardCaption + .eduStatus.lg{
        margin-bottom: 20px;
    }
    .eduStatus.lg:has(.eduStatusRightBtnW) .eduStatusTit{
        margin-bottom: 20px;
    }
    .eduStatusRightBtnW{
        display: block;
    }
    .eduStatusRightBtnW .progressArea{
        margin-top: 0;
    }
    .eduStatusRightBtn{
        display: flex;
        gap: 0 8px;
        max-width: 100%;
        margin-left: auto;
        margin-top: 16px;
    }
    .eduStatusRightBtn .btn{
        flex: 1 1 0;
    }
    .eduStatusRightBtn .btn + .btn{
        margin-top: 0;
    }
    .eduStatusBottomBtn{
        gap: 8px;
        flex-wrap: wrap;
    }
    .eduStatusBottomBtn>.btn{
        flex: 1 1 0;
        white-space: nowrap;
    }
}
@media screen and (max-width: 500px){
    .eduStatusRightBtn{
        display: block;
    }
    .eduStatusRightBtn .btn + .btn{
        margin-top: 8px;
    }
}


@media screen and (max-width: 1023px){
    .learning1.tableResponsiveLg tr>td:nth-child(1){
        display: none;
    }
    .learning1.tableResponsiveLg tr>td:nth-child(2)::after{
        content: "구분";
    }
    .learning1.tableResponsiveLg tr>td:nth-child(3)::after{
        content: "학습기간";
    }
    .learning1.tableResponsiveLg tr>td:nth-child(4)::after{
        content: "차시명";
    }
    .learning1.tableResponsiveLg tr>td:nth-child(5)::after{
        content: "강사";
    }
    .learning1.tableResponsiveLg tr>td:nth-child(6)::after{
        content: "학습진행현황";
    }

    .learning2.tableResponsiveLg tr>td:nth-child(1){
        display: none;
    }
    .learning2.tableResponsiveLg tr>td:nth-child(2)::after{
        content: "구분";
    }
    .learning2.tableResponsiveLg tr>td:nth-child(3)::after{
        content: "학습기간";
    }
    .learning2.tableResponsiveLg tr>td:nth-child(4)::after{
        content: "차시명";
    }
    .learning2.tableResponsiveLg tr>td:nth-child(5)::after{
        content: "ZOOM URL";
    }
    .learning2.tableResponsiveLg tr>td:nth-child(6)::after{
        content: "강사";
    }
    .learning2.tableResponsiveLg tr>td:nth-child(7)::after{
        content: "학습진행 현황";
    }

    .learning3.tableResponsiveLg tr>td:nth-child(1){
        display: none;
    }
    .learning3.tableResponsiveLg tr>td:nth-child(2)::after{
        content: "구분";
    }
    .learning3.tableResponsiveLg tr>td:nth-child(3)::after{
        content: "학습기간";
    }
    .learning3.tableResponsiveLg tr>td:nth-child(4)::after{
        content: "차시명";
    }
    .learning3.tableResponsiveLg tr>td:nth-child(5)::after{
        content: "강사";
    }
    .learning3.tableResponsiveLg tr>td:nth-child(6)::after{
        content: "준비물";
    }
    .learning3.tableResponsiveLg tr>td:nth-child(7)::after{
        content: "학습진행 현황";
    }

    .learning4.tableResponsiveLg tr>td:nth-child(1){
        display: none;
    }
    .learning4.tableResponsiveLg tr>td:nth-child(2)::after{
        content: "구분";
    }
    .learning4.tableResponsiveLg tr>td:nth-child(3)::after{
        content: "학습기간";
    }
    .learning4.tableResponsiveLg tr>td:nth-child(4)::after{
        content: "차시명";
    }
    .learning4.tableResponsiveLg tr>td:nth-child(5)::after{
        content: "ZOOM URL";
    }
    .learning4.tableResponsiveLg tr>td:nth-child(6)::after{
        content: "강사";
    }
    .learning4.tableResponsiveLg tr>td:nth-child(7)::after{
        content: "준비물";
    }
    .learning4.tableResponsiveLg tr>td:nth-child(8)::after{
        content: "학습진행 현황";
    }

    .learning5.tableResponsiveLg tr>td:nth-child(1){
        display: none;
    }
    .learning5.tableResponsiveLg tr>td:nth-child(2)::after{
        content: "구분";
    }
    .learning5.tableResponsiveLg tr>td:nth-child(3)::after{
        content: "학습기간";
    }
    .learning5.tableResponsiveLg tr>td:nth-child(4)::after{
        content: "차시명";
    }
    .learning5.tableResponsiveLg tr>td:nth-child(5)::after{
        content: "강사";
    }
    .learning5.tableResponsiveLg tr>td:nth-child(6)::after{
        content: "준비물";
    }
    .learning5.tableResponsiveLg tr>td:nth-child(7)::after{
        content: "학습진행 현황";
    }

    .learning6.tableResponsiveLg tr>td:nth-child(1){
        display: none;
    }
    .learning6.tableResponsiveLg tr>td:nth-child(2)::after{
        content: "구분";
    }
    .learning6.tableResponsiveLg tr>td:nth-child(3)::after{
        content: "학습기간";
    }
    .learning6.tableResponsiveLg tr>td:nth-child(4)::after{
        content: "차시명";
    }
    .learning6.tableResponsiveLg tr>td:nth-child(5)::after{
        content: "강사";
    }
    .learning6.tableResponsiveLg tr>td:nth-child(6)::after{
        content: "학습진행현황";
    }

    .learningOnoff.tableResponsiveLg tr>td:nth-child(1){
        display: none;
    }
    .learningOnoff.tableResponsiveLg tr>td:nth-child(2)::after{
        content: "구분";
    }
    .learningOnoff.tableResponsiveLg tr>td:nth-child(3)::after{
        content: "차시명";
    }
    .learningOnoff.tableResponsiveLg tr>td:nth-child(4)::after{
        content: "진도율";
    }

    .learningExam.tableResponsiveLg tr>td:nth-child(1){
        display: none;
    }
    .learningExam.tableResponsiveLg tr>td:nth-child(2)::after{
        content: "시험명";
    }
    .learningExam.tableResponsiveLg tr>td:nth-child(3)::after{
        content: "시험시간";
    }
    .learningExam.tableResponsiveLg tr>td:nth-child(4)::after{
        content: "점수";
    }

    .learningTask.tableResponsiveLg tr>td:nth-child(1){
        display: none;
    }
    .learningTask.tableResponsiveLg tr>td:nth-child(2)::after{
        content: "과제명";
    }
    .learningTask.tableResponsiveLg tr>td:nth-child(3)::after{
        content: "점수";
    }

    .learningSrvy.tableResponsiveLg tr>td:nth-child(1){
        display: none;
    }
    .learningSrvy.tableResponsiveLg tr>td:nth-child(2)::after{
        content: "설문명";
    }

    .learningAssignment.tableResponsiveLg tr>td:nth-child(1){
        display: none;
    }
    .learningAssignment.tableResponsiveLg tr>td:nth-child(2)::after{
        content: "시험명";
    }
    .learningAssignment.tableResponsiveLg tr>td:nth-child(3)::after{
        content: "점수";
    }

    .learningSurvey.tableResponsiveLg tr>td:nth-child(1){
        display: none;
    }
    .learningSurvey.tableResponsiveLg tr>td:nth-child(2)::after{
        content: "설문명";
    }

    .myBookOrder.tableResponsiveLg tr>td:nth-child(1)::after{
        content: "주문일자";
    }
    .myBookOrder.tableResponsiveLg tr>td:nth-child(2)::after{
        content: "주문번호";
    }
    .myBookOrder.tableResponsiveLg tr>td:nth-child(3)::after{
        content: "도서명";
    }
    .myBookOrder.tableResponsiveLg tr>td:nth-child(4)::after{
        content: "가격";
    }
    .myBookOrder.tableResponsiveLg tr>td:nth-child(5)::after{
        content: "수량";
    }
    .myBookOrder.tableResponsiveLg tr>td:nth-child(6)::after{
        content: "배송비";
    }
    .myBookOrder.tableResponsiveLg tr>td:nth-child(7)::after{
        content: "전체 결제금액";
    }
    .myBookOrder.tableResponsiveLg tr>td:nth-child(8)::after{
        content: "결제방법";
    }
    .myBookOrder.tableResponsiveLg tr>td:nth-child(9)::after{
        content: "결제상태";
    }
    .myBookOrder.tableResponsiveLg tr>td:nth-child(10)::after{
        content: "운송장번호";
    }
}

.playerArea{
    display: flex;
    gap: 0 24px;
}
.playerW{
    flex-basis: 0;
    flex-grow: 1;
    background-color: var(--grey-lighten5);
    border-radius: 20px;
}
.playerLeft{
    padding-top: 24px;
    width: 34%;
    max-width: 354px;
    flex: 0 0 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.playerLeft .eduStatusTit{
    margin-bottom: 20px;
}
.playerLeft>.card{
    padding: 20px 24px;
    flex-basis: 0;
    flex-grow: 1;
    margin-top: 30px;
}
.playerListW{
    display: block;
    padding-right: 24px;
    height: calc(100% - 42px);
    overflow-x: hidden;
    overflow-y: scroll;
}
.playerListW>li{
    display: block;
}
.playerListW>li + li{
    margin-top: 16px;
}
.playerListW::-webkit-scrollbar {
    width: 8px;
}
.playerListW::-webkit-scrollbar-track {
    background-color: var(--grey-lighten5);
}
.playerListW::-webkit-scrollbar-thumb {
    background-color: var(--grey-lighten2);
}
.playerListW::-webkit-scrollbar-button {
    display: none;
}
.playerList{
    width: 100%;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 0 8px;
    text-align: left;
    transition: var(--transition);
}
.playerList>p{
    font-size: var(--txt-font-size);
    font-weight: 600;
    flex-basis: 0;
    flex-grow: 1;
    max-width: calc(100% - 68px);
}
.playerList>.label{
    min-width: 60px;
}
.playerList.active{
    background-color: var(--primary-lighten5);
    border-color: var(--primary-lighten3);
    color: var(--primary-base);
}

@media screen and (min-width: 1201px){
    .playerList:hover{
        background-color: var(--primary-lighten5);
        border-color: var(--primary-lighten3);
        color: var(--primary-base);
    }
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .playerArea{
        display: block;
    }
    .playerW{
        max-width: 694px;
        margin: 0 auto 30px;
    }
    .playerLeft{
        padding-top: 0;
        width: 100%;
        max-width: 100%;
        display: block;
    }
}
@media screen and (max-width: 767px){
    .playerLeft .eduStatusTit{
        margin-bottom: 16px;
    }
    .playerLeft>.card{
        padding: 20px 12px;
        margin-top: 20px;
    }
    .playerListW{
        padding-right: 4px;
        height: auto;
        max-height: 480px;
    }
    .playerListW>li + li{
        margin-top: 10px;
    }
    .playerListW::-webkit-scrollbar {
        width: 4px;
    }
    .playerList{
        padding: 20px 12px;
        gap: 0 6px;
    }
}
@media screen and (max-width: 500px){
}

.examArea{
    display: flex;
    align-items: flex-start;
    gap: 0 24px;
}
.examListW{
    flex-basis: 0;
    flex-grow: 1;
    border-radius: 16px;
    padding: 10px 30px 10px 0;
    border: 1px solid var(--border-color);
}
.examArea .examList{
    display: block;
    padding: 20px 24px 20px 30px;
    width: 100%;
    max-height: 40vh;
    height: 40vh;
    overflow-x: hidden;
    overflow-y: auto;
}
.examList::-webkit-scrollbar {
    width: 8px;
}
.examList::-webkit-scrollbar-track {
    background-color: var(--grey-lighten5);
}
.examList::-webkit-scrollbar-thumb {
    background-color: var(--grey-lighten2);
}
.examList::-webkit-scrollbar-button {
    display: none;
}
.examList>li{
    display: block;
}
.examList>li + li{
    margin-top: 30px;
}
.examList>li>strong{
    display: block;
    margin-bottom: 10px;
    position: relative;
}
.examList>li>strong::after{
    display: block;
    position: absolute;
    width: 66px;
    height: 66px;
    top: 50%;
    left: -24px;
    transform: translateY(-50%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.examList>li.correct>strong::after{
    content: "";
    background-image: url(../image/icon-correct.svg);
}
.examList>li.wrong>strong::after{
    content: "";
    background-image: url(../image/icon-wrong.svg);
}
.examList>li>p + .examQImg{
    margin-top: 20px;
}
.examList .radioW{
    display: block;
}
.examList .radioBtn{
    width: 100%;
}
.examList .radioBtn input + label{
    min-height: 30px;
    height: auto;
    padding: 4px 0;
    border-radius: 0;
    justify-content: flex-start;
    text-align: left;
    background-color: transparent;
}
.examList .radioBtn input + label p{
    color: var(--grey-base);
    font-size: var(--txt-font-size);
    font-weight: 600;
}
.examList .radioBtn input:checked + label p{
    color: var(--secondary-base);
}
.examHint.infoBox{
    margin: 24px 0 0 0;
}
.examQImg{
    display: block;
    max-width: calc(100% - 18px);
    margin-left: 18px;
    margin-bottom: 20px;
}
.examList .radioBtn input + label:has(.examQImg){
    padding-bottom: 0;
    display: block;
}
.examList .radioBtn + .radioBtn input + label{
    padding-top: 0;
}
.examList .radioBtn input + label .examQImg{
    margin-top: 10px;
}

.examReultW{
    width: 256px;
    min-width: 256px;
    flex: 0 0 auto;
}
.examReult{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 25px 16px;
    background-color: var(--grey-lighten5);
    border-radius: 16px;
    margin-bottom: 24px;
}
.examReult>p{
    margin-bottom: 10px;
}
.examReultTable{
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    margin-right: -4px;
}
.examReultTableTd{
    flex: 1 1 20%;
    max-width: 20%;
    width: 20%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    border: 1px solid var(--border-color);
    margin-bottom: -1px;
    font-size: var(--txt-font-size-lg);
    font-weight: 600;
    position: relative;
}
.examReultTableTd:not(:nth-child(5n)){
    margin-right: -1px;
}
.examReultTableTd.correct,
.examReultTableTd.wrong{
    background-color: var(--primary-lighten5);
}
.examReultTableTd::after{
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.examReultTableTd.correct::after{
    content: "";
    background-image: url(../image/icon-correct.svg);
}
.examReultTableTd.wrong::after{
    content: "";
    background-image: url(../image/icon-wrong.svg);
}

.assignment .infoBox.sm{
    margin-bottom: 20px;
}
.assignment .totalPrice{
    margin-top: 20px;
}
.downloadBtn{
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0 14px;
    color: var(--secondary-base);
    font-size: var(--txt-font-size);
    font-weight: 600;
}
.downloadBtn>span{
    display: block;
    max-width: calc(100% - 34px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

.modal.survey .modalBodyInner .examList{
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(var(--view-height) - 323px);
}

.survey .infoBox{
    margin-bottom: 0;
    text-align: center;
}
.surveyCaption{
    text-align: right;
    margin-bottom: 10px;
}
.survey .examList{
    display: block;
    padding: 40px 30px;
    border-radius: 16px;
    background-color: var(--primary-lighten5);
}

@media screen and (min-width: 1201px){
    .examList .radioBtn:hover input + label p{
        color: var(--secondary-base);
    }
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .examArea{
        display: block;
    }
    .examListW{
        padding: 20px 12px;
        margin-bottom: 20px;
    }
    .examArea .examList{
        padding: 0;
        max-height: unset;
        height: auto;
        overflow: unset;
    }
    .examList>li + li{
        margin-top: 20px;
    }
    .examList>li>strong{
        margin-bottom: 8px;
    }
    .examList>li>strong::after{
        width: 48px;
        height: 48px;
        left: -16px;
    }
    .examHint.infoBox{
        margin: 20px 0 0 0;
    }
    .examQImg{
        max-width: calc(100% - 16px);
        margin-left: 16px;
        margin-bottom: 12px;
    }
    .examList .radioBtn input + label .examQImg{
        margin-top: 8px;
    }
    .examList>li>p + .examQImg{
        margin-top: 12px;
    }
    .examReultW{
        width: 100%;
        min-width: 0;
    }
    .examReult{
        padding: 16px;
        margin-bottom: 24px;
    }
    .examReult>p{
        margin-bottom: 6px;
    }
    .examReultTableTd{
        height: 48px;
    }
    .examReultTableTd::after{
        width: 100%;
        height: 100%;
    }
    .survey .examList{
        padding: 20px 12px;
    }
    .modal.survey .modalBodyInner .examList{
        overflow: unset;
        max-height: unset;
    }

    .moCustom colgroup,
    .moCustom thead{
        display: none;
    }
    .moCustom{
        border: 0;
    }
    .moCustom,
    .moCustom tbody,
    .moCustom td{
        display: block;
    }
    .moCustom tr{
        display: flex;
        gap: 6px 21px;
        justify-content: flex-start;
        flex-wrap: wrap;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 20px 12px;
    }
    .moCustom tr + tr{
        margin-top: 20px;
    }
    .moCustom tr td{
        border: 0;
    }
    .moCustom tr td:first-child{
        flex: 1 1 100%;
    }
    .moCustom tr td:has(.left){
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
    .moCustom.tablePrimary td>.tableInner{
        width: 100%;
        min-height: 0;
        padding: 0;
        justify-content: flex-start;
        text-align: left;
        position: relative;
    }
    .moCustom.tablePrimary td>.tableInner::before{
        display: block;
        position: absolute;
        width: 1px;
        height: 12px;
        top: 50%;
        left: -11px;
        transform: translateY(-50%);
        background-color: var(--border-color);
    }
    .moCustom td>.tableInner.view{
        padding-left: 24px;
        position: relative;
    }
    .moCustom .tableInner.view::before{
        content: "";
    }
    .moCustom .tableInner.view::after{
        content: "";
        display: block;
        position: absolute;
        width: 20px;
        height: 20px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        background-image: url(../image/icon-view-point.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .tablePrimary.moCustom .tableInner>.tableBtnTxt{
        font-size: var(--txt-font-size) !important;
        align-items: flex-start;
        gap: 0 4px;
    }
    .tableInner>.tableBtnTxt>.icon{
        min-width: 20px;
        width: 20px;
        height: 20px;
    }
    .tablePrimary.moCustom .tableInner>.tableBtnTxt:has(.icon)>span{
        max-width: calc(100% - 48px);
        margin-top: 2px;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: keep-all;
    }
    .myLearningInquiry tr>td:nth-child(1){
        order: 2;
        width: auto;
        flex: 0 0 auto;
        margin-left: -10px;
    }
    .myLearningInquiry tr>td:nth-child(2){
        order: 3;
    }
    .myLearningInquiry tr>td:nth-child(3){
        order: 4;
    }
    .myLearningInquiry tr>td:nth-child(4){
        order: 5;
    }
    .myLearningInquiry tr>td:nth-child(4)>.tableInner::before{
        content: "";
    }
    .myLearningInquiry tr>td:nth-child(5){
        order: 6;
    }
    .myLearningInquiry tr>td:nth-child(6){
        order: 1;
        width: auto;
        flex: 0 0 auto;
    }

    .myInquiryCourse tr>td:nth-child(1){
        order: 2;
        width: auto;
        flex: 0 0 auto;
        margin-left: -10px;
    }
    .myInquiryCourse tr>td:nth-child(2){
        order: 3;
    }
    .myInquiryCourse tr>td:nth-child(3){
        order: 4;
    }
    .myInquiryCourse tr>td:nth-child(4){
        order: 5;
    }
    .myInquiryCourse tr>td:nth-child(5){
        order: 6;
    }
    .myInquiryCourse tr>td:nth-child(6){
        order: 1;
        width: auto;
        flex: 0 0 auto;
    }

    .myInquiry tr>td:nth-child(1){
        order: 2;
        width: auto;
        flex: 0 0 auto;
        margin-left: -10px;
    }
    .myInquiry tr>td:nth-child(2){
        order: 1;
        width: auto;
        flex: 0 0 auto;
    }
    .myInquiry tr>td:nth-child(3){
        order: 3;
    }
    .myInquiry tr>td:nth-child(4){
        order: 4;
    }
    .myInquiry tr>td:nth-child(5){
        order: 5;
    }
}
@media screen and (max-width: 500px){
}
.likeList{
    display: block;
    border-top: 1px solid var(--grey-darken4);
}
.likeList>li{
    display: flex;
    align-items: center;
    gap: 0 16px;
    padding: 26px 16px;
    border-bottom: 1px solid var(--border-color);
}
.likeList>li>.label{
    flex: 0 0 auto;
}
.likeList>li>a{
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    font-size: var(--txt-font-size);
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    max-width: calc(100% - 176px);
}
.likeList>li>.btn{
    flex: 0 0 auto;
    min-width: 72px;
    margin-left: auto;
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .likeList>li{
        display: block;
        padding: 16px 0;
    }
    .likeList>li>.label{
        margin-bottom: 8px;
    }
    .likeList>li>a{
        max-width: 100%;
    }
    .likeList>li>.btn{
        width: 100%;
        min-width: 0;
        margin-top: 12px;
    }
}
@media screen and (max-width: 500px){
}

.mileageTotalW{
    margin-bottom: 40px;
}
.mileageTotalW>p + p{
    margin-top: 8px;
}
.mileageTotal{
    border-radius: 16px;
    background-color: var(--grey-lighten5);
    display: flex;
    align-items: center;
    gap: 28px 16px;
    padding: 28px 40px;
    margin-top: 20px;
}
.mileageTotal.border{
    border: 1px solid var(--border-color);
}
.mileageTotal.primary{
    border: 1px solid var(--primary-lighten3);
    background-color: var(--primary-lighten5);
}
.mileageTotal>p{
    flex-basis: 0;
    flex-grow: 1;
}
.mileageTotalGroup{
    display: flex;
    gap: 0 40px;
    margin-top: 20px;
}
.mileageTotalGroup .mileageTotal{
    flex: 1 1 0;
    margin-top: 0;
    flex-wrap: wrap;
}
.mileageTotalGroup .mileageTotal>p{
    flex-basis: 0;
    flex-grow: 1;
}
.mileageTotalGroup .mileageTotal>.btn{
    flex: 0 0 auto;
}
.mileageTotalGroup .mileageTotal>strong{
    flex: 1 1 100%;
    text-align: right;
}
.boardList.mileage{
    margin: -20px -15px;
}
.mileage.boardList>li{
    padding: 20px 16px;
    flex: 1 1 50%;
    width: 50%;
    max-width: 50%;
}
.mileage .mileageItem{
    border: 1px solid var(--primary-lighten4);
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
}
.mileageTop{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0 20px;
    margin-bottom: 20px;
}
.mileageItem>.boardTit{
    margin-bottom: 16px;
}
.mileageThumbW{
    flex-basis: 0;
    flex-grow: 1;
}
.mileageThumbW>.thumb{
    padding-top: calc((134 / 268) * 100%);
    border-radius: 0;
    margin-top: 6px;
}
.mileageThumbW .thumbInner{
    background-color: #fff;
}
.mileageContents .boardTit{
    margin-bottom: 16px;
}
.mileageContents .infoRow{
    font-size: var(--txt-font-size);
}
.mileageContents .infoRow>p{
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: keep-all;
}
.mileageContents{
    flex: 0 0 auto;
    width: 69%;
    max-width: 304px;
}
.mileageBottom{
    --btn-height: 38px;
    display: flex;
    gap: 0 20px;
    margin-top: auto;
}
.mileageTxt{
    flex-basis: 0;
    flex-grow: 1;
    height: var(--btn-height-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0 4px;
    background-color: var(--grey-lighten5);
    border-radius: 8px;
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
}
.mileageBottom:has(.mileageTxt)>.btn{
    flex: 0 0 auto;
    width: 140px;
    height: auto;
}
.mileageCount{
    display: flex;
    gap: 0 10px;
}
.couponInput{
    display: flex;
    align-items: center;
    gap: 0 16px;
    background-color: var(--grey-base);
    border-radius: 16px;
    background-color: var(--grey-lighten5);
    padding: 30px 40px;
    margin-bottom: 40px;
}
.couponInput>strong{
    display: block;
    flex-basis: 0;
    flex-grow: 1;
}
.couponInput .boardSerach>input{
    width: 400px;
    max-width: 400px;
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
    .mileage.boardList{
        margin: -15px;
    }
    .mileage.boardList>li {
        padding: 15px;
    }
    .mileageTop{
        display: block;
    }
    .mileageThumbW {
        max-width: 134px;
        margin: 0 auto 30px;
    }
    .mileageThumbW>.thumb{
        margin-top: 0;
    }
    .mileageContents{
        width: 100%;
        max-width: 100%;
    }
    .mileageCount{
        margin-top: 10px;
    }
    .mileageCount>.btn{
        flex-basis: 0;
        flex-grow: 1;
    }
}
@media screen and (max-width: 1200px){
    .mileageBottom:has(.mileageTxt)>.btn{
        width: 120px;
    }
}
@media screen and (max-width: 1023px){
    .mileageTotalGroup{
        gap: 0 20px;
    }
    .mileageTotalGroup .mileageTotal{
        padding: 20px;
    }
    .mileageBottom{
        display: block;
    }
    .mileageBottom:has(.mileageTxt)>.btn{
        height: var(--btn-height);
        width: 100%;
    }
    .mileageBottom>.btn{
        margin-top: 10px;
    }
}
@media screen and (max-width: 767px){
    .mileageTotalW{
        margin-bottom: 20px;
    }
    .mileageTotalW>p + p{
        margin-top: 4px;
    }
    .mileageTotal{
        display: block;
        padding: 20px 12px;
        margin-top: 16px;
    }
    .mileageTotal>p{
        margin-bottom: 8px;
    }
    .mileageTotal>strong{
        display: block;
        text-align: right;
    }

    .mileageTotalGroup{
        display: block;
        margin-top: 16px;
    }
    .mileageTotalGroup .mileageTotal{
        padding: 20px 12px;
    }
    .mileageTotalGroup .mileageTotal + .mileageTotal{
        margin-top: 10px;
    }
    .mileageTotalGroup .mileageTotal:has(.btn){
        padding-bottom: 66px;
        position: relative;
    }
    .mileageTotalGroup .mileageTotal>.btn{
        position: absolute;
        width: calc(100% - 24px);
        bottom: 20px;
        left: 12px;
    }

    .boardList.mileage{
        margin: -10px;
    }
    .mileage.boardList>li{
        padding: 10px;
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
    .mileageItem{
        padding: 20px 16px;
    }
    .mileageThumbW{
        margin-bottom: 20px;
    }
    .mileageItem>.boardTit{
        margin-bottom: 8px;
    }
    .mileageContents .boardTit{
        margin-bottom: 8px;
    }
    .mileageTop{
        margin-bottom: 16px;
    }
    .mileageBottom{
        position: relative;
    }
    .mileageTxt{
        height: var(--btn-height);
        justify-content: flex-start;
        text-align: left;
        background-color: transparent;
        border-radius: 0;
        padding-right: 150px;
    }
    .mileageBottom>.btn{
        margin-top: 16px;
    }
    .mileageCount .countBtnW{
        position: absolute;
        right: 0;
        top: 0;
    }
    .couponInput{
        display: block;
        padding: 20px 12px;
        margin-bottom: 20px;
    }
    .couponInput>strong{
        margin-bottom: 8px;
    }
    .couponInput .boardSerach>input{
        width: 100%;
        max-width: 100%;
    }
}
@media screen and (max-width: 500px){
    .mileageTxt{
        height: auto;
        padding-right: 0;
        margin-bottom: 8px;
    }
    .mileageCount .countBtnW{
        position: static;
        margin-bottom: 16px;
        margin-left: auto
    }
    .mileageCount{
        display: block;
    }
    .mileageCount>.btn{
        width: 100%;
    }
}
.tableLightW{
    --border-color: var(--primary-lighten4);
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--border-color);
}
.tablePrimary.light{
    border: 0;
}
.tablePrimary.light th{
    background-color: var(--primary-lighten5);
}
.tablePrimary.light th>.tableInner{
    min-height: 56px;
    font-size: var(--txt-font-size-lg);
}
.tablePrimary.light td>.tableInner{
    padding: 30px 8px;
}
.tablePrimary.light tbody>tr:last-child{
    border-bottom: 0;
}
.tablePrimary.light tr>*:last-child{
    border-right: 0;
}
.tablePrimary.light td{
    border-right: 0;
}

.mileageOrder.tablePrimary td>.tableInner{
    min-height: 268px;
}
.mileageOrder.tablePrimary tbody tr>td:nth-child(1) .tableInner{
    padding: 30px;
}
.mileageOrder.tablePrimary .mileageContents{
    width: 63%;
    max-width: 314px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mileageCert{
    border: 1px solid var(--primary-lighten4);
    border-radius: 16px;
    padding: 30px 24px;
}
.infoIconBox{
    display: flex;
    align-items: center;
    gap: 0 10px;
    padding: 20px 24px;
    border-radius: 16px;
    background-color: var(--grey-lighten5);
    margin-bottom: 20px
}
.infoIconBox>.iconIPoint{
    min-width: 24px;
    border-radius: 50%;
    border: 1px solid var(--primary-lighten4);
}
.mileageCert .inputPrimary{
    max-width: 360px;
}
.mileageCert .formRow>strong{
    min-width: 92px;
    width: 92px;
}

@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
    .mileageOrder.tablePrimary tbody tr>td:nth-child(1) .tableInner{
        padding: 30px 16px;
    }
    .mileageOrder.tablePrimary .mileageContents{
        width: 100%;
        max-width: 100%;
        display: block;
    }
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .milStatus.tablePrimary tbody tr>td:nth-child(1){
        display: none;
    }
    .milStatus.tablePrimary tbody tr>td:nth-child(2)::after{
        content: "일자";
    }
    .milStatus.tablePrimary tbody tr>td:nth-child(3)::after{
        content: "구분";
    }
    .milStatus.tablePrimary tbody tr>td:nth-child(4)::after{
        content: "내역";
    }
    .milStatus.tablePrimary tbody tr>td:nth-child(5)::after{
        content: "마일리지";
    }
    .milStatus.tablePrimary tbody tr>td:nth-child(6)::after{
        content: "유효기간";
    }
}
@media screen and (max-width: 767px){
    .tableLightW{
        border: 0;
    }
    .tablePrimary.light tbody>tr:last-child{
        border-bottom: 1px solid var(--border-color);
    }
    .tablePrimary.light td>.tableInner{
        padding: 8px 0 8px 64px;
    }
    .mileageInfo.tableResponsive tr>td:nth-child(1)::after{
        content: "보유 마일리지";
    }
    .mileageInfo.tableResponsive tr>td:nth-child(2)::after{
        content: "사용 마일리지";
    }
    .mileageInfo.tableResponsive tr>td:nth-child(3)::after{
        content: "잔여 마일리지";
    }
    .mileageOrder.tablePrimary td>.tableInner{
        min-height: 0;
    }
    .mileageOrder.tablePrimary tbody tr>td:nth-child(1) .tableInner{
        padding: 8px 0 16px;
    }
    .mileageOrder.tablePrimary .mileageContents .boardTit{
        text-align: left;
    }
    .mileageOrder.tablePrimary .mileageContents .infoRow{
        display: flex;
        justify-content: space-between;
    }
    .mileageOrder.tablePrimary .mileageContents .infoRow>strong{
        font-size: var(--txt-font-size);
        font-weight: 600;
        text-align: left;
    }
    .mileageOrder.tablePrimary .mileageContents .infoRow>p{
        text-align: right;
        font-size: var(--txt-font-size);
        color: var(--grey-darken4);
    }
    .mileageOrder.tablePrimary tbody tr>td:nth-child(2),
    .mileageOrder.tablePrimary tbody tr>td:nth-child(3){
        border-bottom: 0;
        margin-bottom: 6px;
    }
    .mileageOrder.tablePrimary tbody tr>td:nth-child(2) .tableInner{
        padding: 16px 0 0 64px;
    }
    .mileageOrder.tablePrimary tbody tr>td:nth-child(3) .tableInner{
        padding: 0 0 0 64px;
    }
    .mileageOrder.tablePrimary tbody tr>td:nth-child(4) .tableInner{
        padding: 0 0 0 64px;
    }
    .mileageOrder.tablePrimary tbody tr>td:nth-child(2)::after{
        content: "필요 마일리지";
        padding: 16px 0 8px 0;
    }
    .mileageOrder.tablePrimary tbody tr>td:nth-child(3)::after{
        content: "수량";
        padding: 22px 0 0 0;
    }
    .mileageOrder.tablePrimary tbody tr>td:nth-child(4)::after{
        content: "전체 필요 마일리지";
        padding: 0;
    }

    .mileageCert{
        padding: 20px 12px;
    }
    .infoIconBox{
        gap: 0 8px;
        padding: 12px;
        margin-bottom: 16px;
    }
    .infoIconBox>.iconIPoint{
        min-width: 20px;
        width: 20px;
        height: 20px;
    }
    .mileageCert .inputPrimary{
        max-width: 100%;
    }
    .mileageCert .formRow>strong{
        min-width: 100%;
        width: 100%;
    }
}
@media screen and (max-width: 500px){
}

.findPw{
    min-height: 368px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background-color: var(--primary-lighten5);
}
.findPw>h3{
    width: fit-content;
    text-align: center;
    font-size: 22px;
    padding: 0 20px;
    position: relative;
    margin-bottom: 50px;
}
.findPw>h3::before,
.findPw>h3::after{
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background-color: var(--primary-base);
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.findPw>h3::before{
    left: 0;
}
.findPw>h3::after{
    right: 0;
}
.findPw .inputPrimary{
    width: 360px;
    max-width: 100%;
    background-color: #fff;
}
.findPw .btn.lg{
    width: 144px;
}
.findPw .formRow>strong{
    min-width: 92px;
    width: 92px;
}

.snsJoinW{
    display: flex;
    gap: 0 40px;
    width: 100%;
}
.snsJoin{
    display: flex;
    align-items: center;
    gap: 0 30px;
    padding: 30px;
}
.snsJoinIcon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    margin-right: -14px;
}
.snsJoinIcon:has(.iconKakao){
    background-color: #FEE500;
}
.snsJoinIcon:has(.iconNaverWhite){
    background-color: #19CE60;
}
.snsJoin>p>span{
    display: inline-block;
    margin-left: 4px;
}
.snsJoin>.btn.sm{
    font-size: var(--txt-font-size);
    padding: 0;
    width: 68px;
}

@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .snsJoinW{
        gap: 0 20px;
    }
    .snsJoin{
        padding: 20px 16px;
        gap: 0 12px;
    }
    .snsJoinIcon{
        margin-right: -4px;
    }
}
@media screen and (max-width: 767px){
    .findPw{
        min-height: 0;
        padding: 20px 12px;
        display: block;
    }
    .findPw>h3{
        font-size: 18px;
        padding: 0 16px;
        margin: 0 auto 30px;
    }
    .findPw>h3::before,
    .findPw>h3::after{
        width: 5px;
        height: 5px;
    }
    .findPw .inputPrimary{
        width: 100%;
    }
    .findPw .btn.lg{
        width: 100%;
    }
    .findPw .formRow>strong{
        min-width: 100%;
        width: 100%;
    }
    .snsJoinW{
        display: block;
    }
    .snsJoin{
        gap: 16px 6px;
        padding: 20px 12px;
    }
    .snsJoin + .snsJoin{
        margin-top: 20px;
    }
    .snsJoinIcon{
        min-width: 28px;
        width: 28px;
        height: 28px;
        margin-right: 0;
    }
    .snsJoinIcon>.icon{
        width: 16px;
        height: 16px;
    }
    .snsJoin>strong{
        flex-basis: 0;
        flex-grow: 1;
    }
    .snsJoin>p>span{
        display: inline-block;
        margin-left: 4px;
    }
    .snsJoin>.btn.sm{
        font-size: var(--txt-font-size);
        padding: 0;
        width: 68px;
    }
}
@media screen and (max-width: 500px){
    .snsJoin{
        flex-wrap: wrap;
    }
    .snsJoin>.btn.sm{
        width: 100%;
    }
}

.btnCard{
    border-radius: 16px;
    background-color: var(--grey-lighten5);
    display: flex;
    align-items: center;
    gap: 28px 24px;
    padding: 28px 40px;
    margin-bottom: 30px;
}
.btnCard>.btn{
    flex: 0 0 auto;
    margin-left: auto;
}
.instPayment .boardFilter{
    margin-left: auto;
    flex: 0 0 auto;
}
.instPayment .boardFilter .selectSecondary{
    width: 148px;
}
.joinSectionTit{
    display: flex;
    align-items: flex-end;
    gap: 0 16px;
}
.joinSectionTit>h3{
    flex: 0 0 auto;
}
.joinSectionTit>p{
    flex-basis: 0;
    flex-grow: 1;
}
.joinSectionTit>.btn{
    flex: 0 0 auto;
    margin-left: auto;
}
.formCard{
    border-radius: 16px;
    padding: 30px;
    border: 1px solid var(--border-color);
}
.formCard + .formCard{
    margin-top: 30px;
}
.formRowW + .tablePrimaryScroll{
    margin-top: 30px;
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .instCourse.tableResponsiveLg tr{
        display: flex;
        flex-wrap: wrap;
    }
    .instCourse.tableResponsiveLg td{
        flex: 1 1 100%;
        min-width: 100%;
        width: 100%;
    }
    .instCourse.tableResponsiveLg tr>td:nth-child(2){
        flex: 0 0 auto;
        min-width: 0;
        width: auto;
        border-bottom: 0;
        margin-left: 12px;
        order: 2;
    }
    .instCourse.tableResponsiveLg tr>td:nth-child(3){
        flex: 0 0 auto;
        min-width: 0;
        width: auto;
        border-bottom: 0;
        order: 1;
    }
    .instCourse.tableResponsiveLg tr>td:nth-child(2) .tableInner,
    .instCourse.tableResponsiveLg tr>td:nth-child(3) .tableInner{
        padding-left: 0;
        min-height: 0;
    }
    .instCourse.tableResponsiveLg tr>td:nth-child(4){
        order: 3;
    }
    .instCourse.tableResponsiveLg tr>td:nth-child(5){
        order: 4;
    }
    .instCourse.tableResponsiveLg tr>td:nth-child(6){
        order: 5;
    }
    .instCourse.tableResponsiveLg tr>td:nth-child(7){
        order: 6;
    }
    .instCourse.tableResponsiveLg tr>td:nth-child(8){
        order: 7;
    }
    .instCourse.tableResponsiveLg tr>td:nth-child(4)::after {
        content: "교육분류";
    }
    .instCourse.tableResponsiveLg tr>td:nth-child(5)::after {
        content: "교육유형";
    }
    .instCourse.tableResponsiveLg tr>td:nth-child(6)::after {
        content: "과정명";
    }
    .instCourse.tableResponsiveLg tr>td:nth-child(7)::after {
        content: "접수기간";
    }
    .instCourse.tableResponsiveLg tr>td:nth-child(8)::after {
        content: "교육기간";
    }
    .instPay.tableResponsiveLg tr>td:nth-child(1)::after {
        content: "번호";
    }
    .instPay.tableResponsiveLg tr>td:nth-child(2)::after {
        content: "교육분류";
    }
    .instPay.tableResponsiveLg tr>td:nth-child(3)::after {
        content: "교육유형";
    }
    .instPay.tableResponsiveLg tr>td:nth-child(4)::after {
        content: "과정명";
    }
    .instPay.tableResponsiveLg tr>td:nth-child(5)::after {
        content: "교육기간";
    }
    .instPay.tableResponsiveLg tr>td:nth-child(6)::after {
        content: "정산상태";
    }
    .instPay.tableResponsiveLg tr>td:nth-child(7)::after {
        content: "정산일자";
    }
    .instPay.tableResponsiveLg tr>td:nth-child(8)::after {
        content: "정산비용";
    }
    .incForm.tableResponsiveLg tr>td:nth-child(1)::after {
        content: "중분류;
    }
    .incForm.tableResponsiveLg tr>td:nth-child(2)::after {
        content: "소분류";
    }
    .incForm.tableResponsiveLg tr>td:nth-child(3)::after {
        content: "교육방법";
    }
    .incForm.tableResponsiveLg tr>td:nth-child(4)::after {
        content: "과정명";
    }
    .instPayment .boardCaption.center{
        flex-wrap: wrap;
        gap: 20px 16px;
        justify-content: flex-start;
    }
    .instPayment .boardFilter{
        margin-left: 0;
        flex: 1 1 100%;
    }
}
@media screen and (max-width: 767px){
    .learner.tableResponsive tr>td:nth-child(1)::after {
        content: "번호";
    }
    .learner.tableResponsive tr>td:nth-child(2)::after {
        content: "소속기관";
    }
    .learner.tableResponsive tr>td:nth-child(3)::after {
        content: "이름";
    }
    .learner.tableResponsive tr>td:nth-child(4)::after {
        content: "출생년도";
    }
    .instPayment .tableResponsive tr>td:nth-child(1)::after {
        content: "번호";
    }
    .instPayment .tableResponsive tr>td:nth-child(2)::after {
        content: "요청일";
    }
    .instPayment .tableResponsive tr>td:nth-child(3)::after {
        content: "증빙요청기간";
    }
    .instPayment .tableResponsive tr>td:nth-child(4)::after {
        content: "상태";
    }
    .btnCard{
        display: block;
        padding: 20px 12px;
        margin-top: 16px;
    }
    .btnCard>p{
        margin-bottom: 12px;
    }
    .btnCard>.inputPeriod{
        margin-bottom: 20px;
    }
    .btnCard>.btn{
        width: 100%;
    }
    .instPayment .boardCaption.center{
        gap: 8px;
    }
    .instPayment .boardFilter .selectSecondary{
        width: 100%;
    }
    .instPorposal.tableResponsive tr>td:nth-child(1)::after {
        content: "번호";
    }
    .instPorposal.tableResponsive tr>td:nth-child(2)::after {
        content: "제목";
    }
    .instPorposal.tableResponsive tr>td:nth-child(3)::after {
        content: "등록일";
    }
    .instPorposal.tableResponsive tr>td:nth-child(4)::after {
        content: "작성자";
    }
    .joinSectionTit{
        flex-wrap: wrap;
        gap: 8px 16px;
    }
    .joinSectionTit>h3{
        flex: 1 1 100%;
        width: 100%;
        min-width: 100%;
    }
    .joinSectionTit>p{
        flex: 1 1 100%;
        width: 100%;
        min-width: 100%;
    }
    .formCard{
        padding: 20px 12px;
    }
    .formCard + .formCard{
        margin-top: 20px;
    }
    .formRowW + .tablePrimaryScroll{
        margin-top: 20px;
    }
}
@media screen and (max-width: 500px){
}

.tableCourse{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 8px 0;
}
.tableCourse>strong{
    display: block;
    flex: 1 1 100%;
}
.refund .inputAppend>span{
    min-width: 62px;
}

.card:has(.bgTitW) + .card:has(.bgTitW){
    margin-top: 20px;
}
.bgTitW{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 16px;
    padding: 16px 30px;
    background-color: var(--primary-lighten5);
    border-bottom: 1px solid var(--border-color);
}
.instCountArea{
    display: flex;
    gap: 0 40px;
}
.instCountArea>*:nth-child(1){
    width: calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
}
.instCountArea>*:nth-child(2){
    width: calc((100% - 40px) / 3 * 2);
    max-width: calc((100% - 40px) / 3 * 2);
}
.instCountW{
    border: 1px solid var(--border-color);
    border-radius: 16px;
    display: flex;
}
.instCount{
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    position: relative;
}
.instCountW>.instCount:not(:last-child)::after{
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 16px;
    background-color: var(--border-color);
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.instCount>span{
    display: block;
    color: var(--primary-base);
    font-weight: 600;
    font-size: var(--txt-font-size);
}
.instCount>p{
    line-height: 1;
    font-size: 22px;
    font-weight: 600;
    transition: var(--transition);
}
@media screen and (min-width: 1201px){
    .instCount:hover>p{
        color: var(--primary-base);
    }
}
@media screen and (max-width: 1439px){
    .instCountArea{
        gap: 0 30px;
    }
    .instCountArea>*:nth-child(1){
        width: calc((100% - 30px) / 3);
        max-width: calc((100% - 30px) / 3);
    }
    .instCountArea>*:nth-child(2){
        width: calc((100% - 30px) / 3 * 2);
        max-width: calc((100% - 30px) / 3 * 2);
    }
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .courseSearch .boardCaption{
        flex-wrap: wrap;
    }
    .courseSearch .boardSerach{
        margin-left: auto;
    }

    .courseSearch .tableResponsiveLg tr>td:nth-child(1)::after {
        content: "중분류";
    }
    .courseSearch .tableResponsiveLg tr>td:nth-child(2)::after {
        content: "소분류";
    }
    .courseSearch .tableResponsiveLg tr>td:nth-child(3)::after {
        content: "교육방법";
    }
    .courseSearch .tableResponsiveLg tr>td:nth-child(4)::after {
        content: "과정명";
    }
    .instCount{
        padding: 30px 20px;
    }
}
@media screen and (max-width: 767px){
    .tableBlue colgroup>col:first-child{
        width: 120px !important;
    }
    .tableCourse{
        padding: 8px 0;
    }
    .tableCourse>p{
        flex: 1 1 100%;
    }
    .instApply.tableResponsive tr>td:nth-child(1)::after{
        content: "번호";
    }
    .instApply.tableResponsive tr>td:nth-child(2)::after{
        content: "내용";
    }
    .instApply.tableResponsive tr>td:nth-child(3)::after{
        content: "신청일";
    }
    .instApply.tableResponsive tr>td:nth-child(4)::after{
        content: "상태";
    }
    .bgTitW{
        padding: 12px;
    }
    .instCountArea{
        display: block;
    }
    .instCountArea>*:nth-child(1){
        width: 100%;
        max-width: 100%;
    }
    .instCountArea>*:nth-child(2){
        width: 100%;
        max-width: 100%;
    }
    .instCountArea>* + *{
        margin-top: 30px;
    }
    .instCountW{
        display: block;
        padding: 0 12px;
    }
    .instCount{
        padding: 20px 0;
    }
    .instCountW>.instCount:not(:last-child){
        border-bottom: 1px solid var(--border-color);
    }
    .instCountW>.instCount:not(:last-child)::after{
        display: none;
    }
    .instCount>p{
        font-size: 18px;
    }
}
@media screen and (max-width: 500px){
}

/* 프린트 */
.printPage{
    width: 210mm;
    padding: 10mm;
}
.printPage:has(.cert){
    padding: 0 0 10mm 0;
}
.printPage h1{
    font-size: 32px;
    text-align: center;
    letter-spacing: 10px;
    margin: 0 auto 4mm;
}
.printPage .tableSecondary .tableInner{
    font-size: 15px;
    padding: 8px 16px;
}
.printPage .tableSecondary .tableInner.fit{
    padding: 0;
}
.stampW{
    display: flex;
    align-items: center;
    width: fit-content;
    height: 80px;
    padding: 10px 0;
    position: relative;
}
.stampW.center{
    justify-content: center;
    margin: 0 auto;
}
.stampW>strong{
    font-size: 20px;
    font-weight: normal;
}
.stampW>.stamp{
    display: block;
    width: 80px;
    position: absolute;
    right: 0;
    top: 50%;
    mix-blend-mode: darken;
    transform: translate(50%, -50%);
}
.stampW.lg{
    height: 120px;
}
.stampW.sm{
    padding: 0;
    height: auto;
}
.stampW.sm>strong{
    font-size: 16px;
    letter-spacing: -0.025em;
    font-weight: 400;
    font-family: "Pretendard", "Paperlogy", sans-serif;
}
.stampW.sm>.stamp{
    width: 50px;
}
.printPage .bottomBtnW{
    margin-top: 40px;
    gap: 16px;
}
.printPage .bottomBtnW .btn.lg{
    min-width: 130px;
    width: 130px;
    max-width: 130px;
    height: 50px;
    font-size: 18px;
    padding: 0;
}
.invoiceDate{
    width: 100%;
}
.invoiceDate p + p{
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid var(--border-color);
    text-align: right;
}

.docs{
    font-size: 16px;
}
.docsHead{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 8mm;
}
.docsHead>img{
    display: block;
}
.docsHead>img:nth-child(1){
    width: 120px;
    margin-left: 20px;
}
.docsHead>img:nth-child(2){
    width: 250px;
}
.docsHead>img:nth-child(3){
    width: 120px;
}
.docs .tableSecondary tr>*{
    border: 0;
}
.tableInner:has(.docsContents).left{
    padding: 0;
}
.docsContents{
    padding: 30px 0;
    min-height: 400px;
}
.docs .tableSecondary tbody>tr:last-child{
    border-bottom: 0;
}
.docs .stampW>strong{
    font-size: 24px;
}
.rcptW>p{
    margin-bottom: 2mm;
}
.rcptHead{
    padding-top: 2mm;
    margin-bottom: 4mm;
    border-top: 1mm solid var(--border-color);
}
.rcptInfo{
    display: flex;
    flex-wrap: wrap;
    gap: 1mm 8mm;
}
.rcptInfo>li{
    display: flex;
    gap: 0 4mm;
}
/* 이수증 */
.cert,
.cert *{
    font-family: 'ChosunGs', "Pretendard", 'NanumSquare';
    font-weight: normal;
}

.cert{
    width: 210mm;
    height: 297mm;
    position: relative;
    overflow: hidden;
}
.certBg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center;
    display: block;
}
.certContent{
    position: relative;
    z-index: 1;
    padding: 36mm 26mm;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.certCaption{
    /*font-family: "Pretendard", 'NanumSquare', sans-serif;*/
    /*font-weight: 700;*/
    font-size: 16px;
    margin-bottom: 32px;
}
.printPage h1.certTit{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 44px;
    font-size: 50px;
    line-height: 1;
}
.certInfo,
.certInfo>li{
    width: 100%;
}
.certInfo{
    padding: 0 2rem;
}
.certInfo>li{
    display: flex;
    gap: 0 14px;
}
.certInfo>li + li{
    margin-top: 14px;
}
.certInfo>li h4,
.certInfo>li span,
.certInfo>li p{
    font-size: 20px;
}
.certInfo>li p{
    max-width: calc(100% - 156px);
}
.certInfoTit{
    height: 25px;
    overflow: hidden;
    min-width: 120px;
    width: 120px;
    text-align: justify;
    position: relative;
}
.certInfoTit::after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
}

.certBody{
    margin: 20px 0;
    width: 100%;
    text-align: center;
    font-size: 26px;
    padding: 0 5mm;
}

.certDate{
    font-size: 26px;
    line-height: 1;
    display: flex;
    justify-content: center;
    gap: 0 20px;
}
.certStemp{
    height: 90px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}
.cert .stampW>strong{
    font-size: 32px;
    letter-spacing: 4px;
}
.printOnly + .eduContents{
    margin-top: 0;
}
.pageSection + .pageSection{
    margin-top: 50px;
}
@media print {
    html, body {
        width: 210mm;
        height: 297mm;
    }
    .printPage{
        margin: 0;
        padding: 4mm .1mm;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: auto;
    }
    .printPage:has(.docs){
        padding: 10mm .1mm;
    }
    .printPage:has(.cert){
        padding: 0;
    }
    .printOnly + .eduContents{
        margin-top: 50px;
    }
    .header,
    .fullmenuArea,
    .snbW, footer,
    .chatBtn,
    .bottomBtnW,
    .boardViewControlW,
    .naviW,
    .btn{
        display: none;
    }
    .wrap{
        padding-top: 0;
    }
    .snbContents{
        max-width: 100%;
    }
    .snbContentsInner{
        padding: 0;
        border: 0;
        box-shadow: none;
        border-radius: 0;
    }
    .tablePrimaryScroll{
        overflow: unset !important;
    }
    .tablePrimaryScroll>.tablePrimary{
        min-width: 0 !important;
        width: 100% !important;
    }
    .courseUnit colgroup>col:nth-child(1){
        width: 8% !important;
    }
    .courseUnit colgroup>col:nth-child(3){
        width: 30% !important;
    }
    .pageSection + .pageSection{
        margin-top: 0;
        break-before: page;
        page-break-before: always;
    }
    .docsContents{
        padding: 30px 0;
        min-height: calc(279mm - 500px);
    }
}

/* 최유림대리 작업내용 - 서브페이지 작업 후 정리 예정*/
/* comon */
.txtRight {
    text-align: right;
}

.txtLeft {
    text-align: left;
}

.tableGrey {
    border: 1px solid var(--grey-lighten4);
    width: 100%;
}

.tableGrey th,
.tableGrey td {
    transition: var(--transition);
}

.tableGrey th {
    background-color: #eee;
}

.tableGrey tr+tr {
    border-top: 1px solid var(--grey-lighten4);
}

.tableGrey *+td {
    border-left: 1px solid var(--grey-lighten4);
}

.inputSecondary.md,
.selectSecondary.md {
    min-width: 250px;
}

.tablePrimary.lg th .tableInner {
    padding-left: 20px;
    padding-right: 20px;
}

.tablePrimary.lg td .tableInner {
    padding: 24px 20px;
}

.tableInner.column {
    flex-direction: column;
    gap: 0 6px;
}
.tableInner.column.left{
    align-items: flex-start;
}

.label.lightGreen {
    background-color: #E5FCE4;
    color: #24B524;
}

.label.lightBlue {
    background-color: #E8FAFF;
    color: #309AE1;
}

.label.lightOrange {
    background-color: #FFF4E8;
    color: #FF764B;
}

.label.long {
    padding: 0 16px;
}

.bottomBtnW.sm {
    margin-top: 20px;
}

.bottomBtnW.right {
    justify-content: right;
}

.tableBlue {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    --border-radius: 16px;
}

.tableBlue+.tableBlue {
    margin-top: 40px;
}

.tableBlue tr th {
    background-color: var(--primary-lighten5);
    min-width: 100px;
}

.tableBlue tr th,
.tableBlue tr td {
    border-top: 1px solid var(--primary-lighten4);
    border-left: 1px solid var(--primary-lighten4);
}

.tableBlue tr:first-child>*:first-child {
    border-top-left-radius: var(--border-radius);
}

.tableBlue tr:last-child>*:first-child {
    border-bottom-left-radius: var(--border-radius);
}

.tableBlue tr>*:last-child {
    border-right: 1px solid var(--primary-lighten4);
}

.tableBlue tr:last-child>* {
    border-bottom: 1px solid var(--primary-lighten4);
}

.tableBlue tr:first-child>*:last-child {
    border-top-right-radius: var(--border-radius);
}

.tableBlue tr:last-child>*:last-child {
    border-bottom-right-radius: var(--border-radius);
}

.tableBlue th .tableInner.left {
    padding: 16px 20px;
}

.tableBlueComment {
    border-top: 0 !important;
    padding: 20px 0;
}

.tableBlueComment .tableInner {
    min-height: 100px;
}

.radioPrimary.white input[type="radio"]+label::after {
    background-color: #fff;
    border-radius: 99px;
}

input[type="file"] {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    font-size: initial;
    clip: rect(0 0 0 0);
}

.inputFileW {
    width: 100%;
    position: relative;
}

.inputFileName {
    height: var(--btn-height);
    padding: 0 16px;
    border-radius: 8px;
    background-color: #fff;
    width: calc(100% - 107px - 16px);
    display: flex;
    align-items: center;
    gap: 8px;
}

.inputFileName>span {
    font-size: var(--btn-font-size);
    font-weight: 500;
    color: var(--secondary-base);
}

.btnFileDelet {
    width: 30px;
    height: 30px;
    position: relative;
    z-index: 2;
    border-radius: 99px;
    transition: var(--transition);
}

.btnFileDelet::before,
.btnFileDelet::after {
    content: '';
    display: block;
    background-color: var(--danger-base);
    width: 1px;
    height: 20px;
    border-radius: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.btnFileDelet::before {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.btnFileDelet::after {
    transform: translate(-50%, -50%) rotate(45deg);
}

.btnInputFile {
    position: absolute;
    right: 0;
    top: 0;
}

.selectSerach.fix,
.selectSerach.fixLg {
    width: 155px;
}

.formRowW.sm .formRow>strong{
    width: 100px;
    min-width: 100px;
}

@media screen and (min-width: 1201px) {
    .btnFileDelet:hover {
        background-color: var(--primary-lighten5);
    }
}

@media screen and (max-width: 767px) {
    .tableBlue th .tableInner.left,
    .tablePrimary.lg th .tableInner,
    .tablePrimary.lg td .tableInner {
        padding: 8px;
    }

    .tableBlue {
        --border-radius: 8px;
    }

    .tableBlue+.tableBlue {
        margin-top: 20px;
    }

    .selectSerach.fix,
    .selectSerach.fixLg {
        width: 100%;
    }
}

@media screen and (max-width: 500px) {

    .inputSecondary.md,
    .selectSecondary.md {
        min-width: 0;
        width: 100%;
    }

    .bottomBtnW.right {
        justify-content: center;
    }
}

.btn.line {
    border: 1px solid var(--border-color);
}

/* 기타 */
.errorW {
    text-align: center;
    position: fixed;
    width: calc(100% - var(--container-gutter)*2);
    max-width: 877px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.errorW::before {
    content: '';
    display: block;
    background-image: url(../image/etc/etc-icon-bg.svg);
    background-position: center;
    background-size: contain;
    position: absolute;
    top: -236px;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    max-width: 1074px;
    aspect-ratio: 1 / 1;
    z-index: -1;
}

.errorTit {
    font-size: 36px;
}

.errorW.sm::before {
    top: -50px;
    max-width: 400px;
}

.errorW .logo {
    margin: 60px auto 0;
}

.errorTxtW {
    padding-top: 60px;
}

.errorTxtW>.tit+.txt {
    padding-top: 16px;
}

.errorTxt {
    font-size: 24px;
}

.errorTxtW+.joinDone {
    margin-top: 50px;
}

.index1 {
    margin-left: 10px;
}

.index1:has(.dot) {
    margin-left: 18px;
}

.index2 {
    margin-left: 18px;
}

.btnGo {
    width: 154px;
}

@media (max-height: 650px) {
    .errorW.sm {
        position: static;
        transform: initial;
        width: 100%;
        padding-bottom: 30px;
    }

    .errorW.sm::before {
        top: 0;
    }
}

@media screen and (max-width: 1200px) {
    .errorW::before {
        width: calc(100% + var(--container-gutter)*2);
    }
}

@media screen and (max-width: 767px) {
    .errorW::before {
        top: -118px;
    }

    .errorTit {
        font-size: 24px;
    }

    .errorTxt {
        font-size: 18px;
    }

    .index1 {
        margin: 0;
    }

    .index1:has(.dot) {
        margin-left: 10px;
    }

    .index2 {
        margin-left: 8px;
    }
}

@media screen and (max-width: 500px) {
    .errorTxtW {
        padding-top: 30px;
    }
}

.changTxtW,
.changInfoList {
    padding-top: 30px;
}

.changTxtW p+p {
    padding-top: 10px;
}

.changTxt {
    font-size: 24px;
}

.changInfoLi {
    display: flex;
    gap: 8px 16px;
}

.changInfoLi+.changInfoLi {
    padding-top: 10px;
}

@media screen and (max-width: 767px) {

    .changInfoList,
    .changTxtW {
        padding-top: 16px;
    }

    .changTxt {
        font-size: 18px;
    }

}

@media screen and (max-width: 500px) {
    .changInfoLi {
        text-align: left;
    }

    .errorTxtW+.joinDone {
        margin-top: 24px;
    }

    .changTxtW p+p {
        padding: 0;
    }

    .errorW .logo {
        margin: 30px auto 0;
    }

}

.snbContentsTitW {
    position: relative;
    margin-bottom: 10px;
}

.dot+.snbContentsTit {
    padding-left: 18px;
}

.dot {
    position: absolute;
    left: 0px;

}

.dotTit2,
.dotTit {
    width: 8px;
    height: 8px;
    border-radius: 1px;
    background-color: var(--primary-base);
    top: 8px;
}

.dotTit2 {
    width: 6px;
    height: 6px;
    transform: rotate(45deg)
}

.dotTxt {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background-color: var(--grey-base);
    top: 9px;
}

.snbContentsW+.snbContentsW {
    margin-top: 24px;
}

.snbContentsW+.snbContentsW.lg {
    margin-top: 30px;
}

.snbContentsTxtList {
    display: block;
}

.snbContentsTxtList>li {
    position: relative;
    display: block;
}

.snbContentsTxtList>li+li {
    margin-top: 4px;
}

.snbContentsTxtList>li>p {
    padding-left: 10px;
}

.snbContentsSubTit {
    margin-top: 20px;
}

.snbContentsW .snbContentsSubTit {
    margin-bottom: 8px;
}

.dotNum {
    font-style: normal;
}

.snbContentsTxtList .dotNum+p {
    padding-left: 20px;
}

@media screen and (max-width: 767px) {
    .snbContentsW+.snbContentsW {
        margin-top: 20px;
    }

    .dotTit {
        top: 6px;
    }

    .dotTxt {
        top: 8px;
    }

    .snbContentsW+.snbContentsW.lg {
        margin-top: 20px;
    }

    .dot+.snbContentsTit {
        padding-left: 10px;
    }

    .snbContentsTxtList .dotNum+p {
        padding-left: 15px;
    }
}

.mapArea {
    position: relative;
    width: 100%;
    padding-bottom: 39.92%;
    height: 0;
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--grey-lighten4);
    margin-top: 16px;
}

.mapInfoW {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 30px;
    background-color: var(--primary-lighten5);
    border-radius: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 0 10px;
    transition: var(--transition);
}


.mapInfoR {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn.pill {
    border-radius: 20px;
    padding: 0 30px;
    height: 36px;
    font-size: 14px;
}

.snbContentsW .btn.pill {
    margin-top: 20px;
    margin-left: 10px;
}

.mapInfoW .btn.pill {
    margin: 0;
}

.transporArea {
    padding-top: 30px;
}

.transporW {
    padding-top: 16px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.transporChip {
    border-radius: 6px;
    border: 0;
    width: 70px;
    min-width: 70px;
    height: 28px;
    color: #fff;
}

.transporChip>p {
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
}

.transporChip.green {
    background-color: #39B64A;
}

.transporChip.blue {
    background-color: #1DBFF2
}

.transporChip.orange {
    background-color: #F2881D
}

.transporTxt {
    font-size: 15px;
}

.transporInfo {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 30px;
}

@media screen and (max-width: 767px) {
    .mapInfoW {
        padding: 16px;
        margin-top: 20px;
    }

    .transporW {
        flex-direction: column;
    }

    .snbContentsW .btn.pill {
        margin-top: 10px;
    }
}

.snbContentsInfoW {
    padding-left: 10px;
    margin-top: 8px;
    display: flex;
    gap: 10px 30px;
}

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

.snbContentsSubTxt {
    margin-bottom: 12px;
    line-height: 16px;
}

.snbContentsSubTxt.lg {
    margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
    .snbContentsInfoW {
        flex-direction: column;
    }
}

/* 교육소개 */
.tableResponsive.edu tr {
    border-radius: 0;
    padding: 0;
}

.moTd {
    border-right: 1px solid var(--border-color);
    min-width: 75px;
}

@media screen and (max-width: 767px) {
    .tableResponsive.edu td .tableInner {
        padding: 8px;
        text-align: left;
        justify-content: flex-start;
    }

    .tableResponsive.edu td .tableInner.moThead {
        background-color: var(--grey-lighten5);
        text-align: center;
        justify-content: center;
    }
}

@media screen and (max-width: 374px) {
    .moTd {
        min-width: 65px;
    }
}

.proInfoList {
    display: flex;
    justify-content: space-between;
    gap: 20px 56px;
    padding: 20px 20px 0;
}

.proInfoList>li {
    flex: 1 1 100%;
}

.proInfoCard {
    width: 100%;
    padding: 30px 24px;
    border: 0;
    background-color: var(--primary-lighten5);
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top 0 right 0;
    transition: var(--transition);
}

.proInfoList>li:nth-child(1)>.proInfoCard {
    background-image: url(../image/sub/eduinfo/edu-info-bg-1.svg);
}

.proInfoList>li:nth-child(2)>.proInfoCard {
    background-image: url(../image/sub/eduinfo/edu-info-bg-2.svg);
}

.proInfoList>li:nth-child(3)>.proInfoCard {
    background-image: url(../image/sub/eduinfo/edu-info-bg-3.svg);
}

.proInfoCard>.tit {
    padding-bottom: 24px;
}

.proInfoTxt {
    font-size: 15px;
    line-height: 25px;
}

@media screen and (max-width: 1200px) {
    .proInfoList {
        gap: 20px 30px;
    }
}

@media screen and (max-width: 767px) {
    .proInfoList {
        flex-direction: column;
        padding-left: 0;
        padding-right: 0;
    }

    .proInfoCard {
        padding: 20px 16px;
    }

    .proInfoCard>.tit {
        padding-bottom: 16px;
    }
}

.progress6 {
    --process-gap: 32px;
}

.processList {
    display: flex;
    column-gap: var(--process-gap);
    padding-top: 30px;
}

.processList>li {
    flex: 1 1 calc(100%/6);
    position: relative;
}

.processList>li::before {
    content: '';
    display: block;
    width: calc(100% + var(--process-gap));
    border-top: 2px dashed var(--process-color);
    position: absolute;
    top: 10px;
    left: 24px;
}

.processList>li:last-child:before {
    width: calc(100% - 24px);
}

.progress6 li:nth-child(1) {
    --process-color: #5D70D1;
}

.progress6 li:nth-child(2) {
    --process-color: #5A6ED0;
}

.progress6 li:nth-child(3) {
    --process-color: #3E5AB5;
}

.progress6 li:nth-child(4) {
    --process-color: #264A9D;
}

.progress6 li:nth-child(5) {
    --process-color: #0A3781;
}

.progress6 li:nth-child(6) {
    --process-color: #030774;
}

.processW .dangerTxt {
    padding-top: 10px;
}

.processNum {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: var(--process-color);
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 2;
}

.processNum>p {
    color: #fff;
    font-size: 13px;
    line-height: 15px;
}

.processTit {
    color: var(--process-color);
    margin: 20px 0 16px;
    font-size: 18px;
    min-height: 47px;
    display: block;
}

.processTit.sm {
    min-height: 0;
}

.processCnt {
    font-size: 15px;
}

.bgBlue {
    background-color: #E8F9FF;
}

.bgPink {
    background-color: #FFF6F6;
}

.snbContentsSection {
    margin-top: 60px;
}

.snbContentsSection.sm {
    margin-top: 40px;
}

.progress4 {
    --process-gap: 50px;
}

.progress4 li:nth-child(1) {
    --process-color: #5D70D1;
}

.progress4 li:nth-child(2) {
    --process-color: #264A9D;
}

.progress4 li:nth-child(3) {
    --process-color: #0A3781;
}

.progress4 li:nth-child(4) {
    --process-color: #030774;
}

@media screen and (max-width: 1200px) {
    .progress6 {
        --process-gap: 16px;
    }

    .progress4 {
        --process-gap: 30px;
    }

}

@media screen and (max-width: 767px) {
    .progress4 {
        --process-gap: 16px;
    }

    .processList {
        flex-wrap: wrap;
        row-gap: 24px;
    }

    .processList>li {
        flex: 1 1 calc(100%/3);
    }

    .processList>li:nth-child(n+2)::before {
        left: 0;
    }

    .processList>li:nth-child(3)::before,
    .processList>li:nth-child(5)::before {
        left: -16px;
        width: calc(100% + 32px);
    }

    .processList>li:last-child:before {
        width: 100%;
    }

    .processTit {
        font-size: 16px;
        min-height: 46px;
        margin: 16px 0 8px;
    }

    .snbContentsSection {
        margin-top: 40px;
    }

    .snbContentsSection.sm {
        margin-top: 24px;
    }

}

@media screen and (max-width: 500px) {
    .progress4,
    .progress6 {
        --process-gap: 10px;
    }
}

.tableFix {
    table-layout: fixed;
}

.tableResponsive.notice .tableInner {
    gap: 0;
}

.tableResponsive.notice .moDate::after {
    content: '';
    display: none;
    width: 1px;
    background-color: var(--grey-lighten4);
    height: 17px;
    margin: 0 12px 0 15px;
}

.tableInner.iconView {
    position: relative;
}

.tableInner.iconView.left {
    justify-content: flex-start;
    padding: 0 0 0 25px;
}

.tableInner.iconView::before {
    content: '';
    display: block;
    background-image: url(../image/icon-view-point.svg);
    background-repeat: no-repeat;
    background-position: center -1px;
    background-size: cover;
    width: 20px;
    min-width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.tableResponsive.notice .tableInner.mo,
.tableInner.iconView.pc::before {
    display: none;
}

@media screen and (max-width: 767px) {

    .tableInner.view::before,
    .tableResponsive.notice .tableInner.mo {
        display: block;
    }
    .tableResponsive.notice .tableInner {
        padding: 0;
        text-align: left;
        justify-content: flex-start;
    }

    .tableInner.mo.iconView {
        padding-left: 25px;
    }

    .tableResponsive.notice td:not(:last-child) {
        border: 0;
    }

    .tableResponsive.notice .noticeItem.sm {
        padding: 15px 0;
    }

    .tableResponsive.notice td {
        display: inline-block;
    }

    .tableResponsive.notice .tableInner.mo .label {
        margin-right: 12px;
    }

    .tableResponsive.notice .moDate::after {
        display: block;
    }

    .boardCaption .selectSerach {
        min-width: 110px;
    }

    .tableResponsive.notice .ellipsis {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: keep-all;
        white-space: initial;
    }
}

@media screen and (max-width: 500px) {
    .boardCaption:has(.selectSerach) {
        flex-direction: column;
    }
    .boardCaption:has(strong) {
        flex-direction: row !important;
        flex-wrap: wrap;
    }
    .boardCaption:has(strong) .selectSerach {
        width: calc(100% - 40px);
    }

    .boardCaption .selectSerach {
        width: 100%;
    }
}

/* 게시판 - 상세 */
.boardDetailTit {
    display: flex;
    gap: 0 10px;
}

.boardDetailTit.center {
    text-align: center;
    justify-content: center;
    padding-top: 20px;
}

.boardDetailInfo {
    padding: 20px 0 30px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

.boardDetailInfo.center {
    text-align: center;
    justify-content: center;
}

.boardDetailInfoList {
    display: flex;
    gap: 8px 16px;
    flex-wrap: wrap;
}

.boardDetailInfoList>li {
    display: flex;
    gap: 8px;
    align-items: center;
}

.boardDetailInfoList>li:not(:last-child)::after {
    content: '';
    display: block;
    width: 1px;
    height: 14px;
    background-color: var(--grey-lighten1);
    margin-left: 8px;
}

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

.boardDetailFileW {
    padding: 24px 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 20px;
}

.boardDetailFileW>a {
    color: #0074E5;
    text-decoration: underline;
}

.boardDetailCnt {
    min-height: 450px;
    padding: 40px 0;
    border-bottom: 1px solid var(--primary-lighten4);;
}

/*  */
.boardViewBorderNone {
    border-top: 0;
}

.boardViewBorderNone .boardViewRowTit {
    padding-top: 0;
}

.boardViewRowTitW {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.boardViewRowTit>.center {
    text-align: center;
}

.boardViewInfo.center {
    justify-content: center;
}
.boardViewInfo.flexwrap {
    flex-wrap: wrap;
}

.linkBtnW {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 0 40px;
    border-bottom: 1px solid var(--primary-lighten4);
    transition: var(--transition);
}

@media screen and (min-width: 1201px) {
    .boardDetailLinkItem>a:hover {
        text-decoration: underline;
    }
}

@media screen and (max-width: 767px) {
    .linkBtnW {
        padding: 20px 0 30px;
    }
    .boardDetailCnt{
        padding: 30px 0;
    }
}
@media screen and (max-width: 500px) {
    .boardDetailInfo {
        padding: 10px 0 20px;
    }

    .boardDetailFileW {
        padding: 18px 0;
        gap: 14px;
    }

    .boardDetailLinkItem {
        gap: 20px;
    }

    .boardDetailInfo {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .linkBtnW > .btn {
        width: 100%;
    }
}

.thumb.cardnews {
    padding-top: calc((300 / 300) * 100%);
}

.boardDetailKeywordW {
    display: flex;
    justify-content: center;
    padding-top: 24px;
    padding-bottom: 4px;
    gap: 10px;
    flex-wrap: wrap
}

.boardDetailKeyword {
    border: 1px solid var(--primary-lighten2);
    padding: 0 10px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

.boardDetailKeyword>p {
    text-align: center;
    color: var(--primary-base);
    font-size: 14px;
    line-height: 19px;
}

.cardNewsSlide {
    overflow: hidden;
    position: relative;
}

.cardNewsSlide .slideBtn {
    position: absolute;
    z-index: 9;
    top: 50%;
    transform: translateY(-50%);
}

.thumbSlideControl .slideBtnPrev {
    left: 0;
}

.thumbSlideControl .slideBtnNext {
    right: 0;
}

.thumbSlide {
    margin: 30px auto 60px;
    max-width: 645px;
}

.thumbSlide .swiper-wrapper {
    max-height: 500px;
}

.btnCardNews {
    max-width: 500px;
    border-radius: 20px;
    width: 100%;
    margin: 0 auto;
    display: block;
    height: 100%;
}

.btnCardNews>.thumb {
    border-radius: 20px;
}

.nailSlide {
    padding: 15px 60px;
    position: relative;
    margin: -15px 0 15px;
}

.nailSlide::before,
.nailSlide::after {
    content: '';
    display: block;
    width: 50px;
    height: 180px;
    background-color: #fff;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    z-index: 2;
    top: 0;
    transition: var(--transition);
}

.nailSlide::before {
    left: 0;
}

.nailSlide::after {
    right: 0;
    transform: rotate(180deg);
}


.nailSlideControl .slideBtnPrev {
    left: 0;
}

.nailSlideControl .slideBtnNext {
    right: 0;
}

.nailSlide .swiper-slide{
    position: relative;
}

.nailSlide .swiper-slide::after {
    content: '';
    display: block;
    border: 2px solid var(--primary-base);
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    z-index: 1;
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    box-sizing: border-box;
}

.nailSlide .swiper-slide-thumb-active::after {
    opacity: 1;
    visibility: visible;
}

@media screen and (max-width: 767px) {

    .nailSlide::before,
    .nailSlide::after {
        width: 50px;
    }

    .thumbSlide {
        margin: 20px 0 30px;
    }

    .thumbSlideControl {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding-top: 30px;
    }

    .thumbSlideControl .slideBtn {
        position: static;
        transform: initial;
    }
}

.eventStatus {
    position: absolute;
    z-index: 2;
    width: 190px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-45deg);
    top: 30px;
    left: -50px;
    transition: var(--transition);
}

.eventStatus.eventLive {
    background-color: var(--secondary-base);
}

.eventStatus.eventDone {
    background-color: var(--grey-lighten1);
}

.eventStatus>p {
    color: #fff;
    text-align: center;
}


@media screen and (max-width: 767px) {
    .eventStatus {
        height: 30px;
        top: 20px;
        left: -60px;
    }
}

@media screen and (max-width: 1023px) {
    .tableResponsiveLg.complet tr>td>.tableInner::before {
        position: absolute;
        left: 0;
    }

    .tableResponsiveLg.complet tr>td:nth-child(1)>.tableInner::before {
        content: "번호";

    }

    .tableResponsiveLg.complet tr>td:nth-child(2)>.tableInner::before {
        content: "과목명";

    }

    .tableResponsiveLg.complet tr>td:nth-child(3)>.tableInner::before {
        content: "교육기간";

    }

    .tableResponsiveLg.complet tr>td:nth-child(4)>.tableInner::before {
        content: "이름";

    }

    .tableResponsiveLg.complet tr>td:nth-child(5)>.tableInner::before {
        content: "수료번호";

    }

    .tableResponsiveLg.complet tr>td:last-child>.tableInner {
        padding: 8px 0 0;
    }

    .tableResponsiveLg.complet tr>td:last-child>.tableInner .btn {
        width: 100%;
    }
}

.completArea {
    background-color: var(--primary-lighten5);
    border-radius: 16px;
    padding: 70px 40px;
    margin-bottom: 50px;
    transition: var(--transition);
}

.completAreaInner {
    max-width: 435px;
    margin: 0 auto;
}

.completAreaInner .btn {
    max-width: 334px;
}

.completAreaTit {
    padding-bottom: 30px;
    text-align: center;
}
.completAreaTxt{
    padding-bottom: 30px;
    text-align: center;
}

.borderNone,
.borderNone select {
    border: 0;
}


@media screen and (max-width: 500px) {
    .completArea {
        padding: 30px 20px;
    }
}

.answerInfoListW {
    padding: 25px 30px;
    background-color: var(--grey-lighten4);
}

.answerInfoList {
    display: flex;
    align-items: center;
    gap: 16px;
    transition: var(--transition);
}

.answerInfoList>li {
    display: flex;
    align-items: center;
}

.answerInfoList>li+li::before {
    content: '';
    display: block;
    width: 1px;
    height: 14px;
    background-color: var(--primary-lighten2);
    margin-right: 16px;
}

.answerAreaInner {
    padding-top: 20px;
    min-height: 200px;
}

@media screen and (max-width: 767px) {
    .answerInfoListW {
        padding: 15px 20px;
    }
}

@media screen and (max-width: 500px) {
    .answerInfoListW {
        padding: 10px 15px;
    }

    .answerInfoList {
        gap: 8px;
    }

    .answerInfoList>li+li::before {
        margin-right: 8px;
    }
}

.boardViewControlW>.boardViewControl.last:last-child{
    padding-bottom: 18px;
    border-bottom: 1px solid var(--primary-lighten4);
}

/* faq */
.faqList {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--primary-lighten4);
}
.faqList>li {
    border-top: 1px solid var(--primary-lighten4);
}
.btnFaq {
    text-align: left;
    justify-content: flex-start;
    padding: 24px 58px 24px 30px;
    transition: var(--transition);
    line-height: 1;
}

.faqAnswerW {
    transition: var(--transition);
    overflow: hidden;
    opacity: 0;
    height: 0;
}

.faqAnswerW.active {
    opacity: 1;
    height: auto;
}

.faqAnswer {
    border-top: 1px solid var(--primary-lighten4);
    background-color: var(--primary-lighten5);
    padding: 30px;
}

.faqAnswerTit {
    padding-bottom: 16px;
}
.faqAnswerContent{
    display: flex;
    gap: 0 5px;
}
.faqAnswerContent>span{
    display: block;
    flex: 0 0 auto;
}
.faqAnswerTxt{
    flex-basis: 0;
    flex-grow: 1;
    width: calc(100% - 14px);
}
.btnFaq>.icon{
    display: none;
}
.panelItem.active .btnFaq{
    background-color: var(--primary-lighten5);
}

@media screen and (max-width: 767px) {
    .btnFaq {
        padding: 16px 38px 16px 16px;
    }
    .faqAnswer {
        padding: 20px 16px;
    }

    .faqAnswerTit {
        font-size: 16px;
    }
}

.inquiryList tr>td:nth-child(1),
.noticeList tr>td:nth-child(1) {
    order: 2;
    flex: initial;
    margin-left: -9px;
}

.inquiryList tr>td:nth-child(2),
.noticeList tr>td:nth-child(2) {
    order: 1;
}

.inquiryList tr>td:nth-child(3),
.noticeList tr>td:nth-child(3) {
    order: 3;
}

.inquiryList tr>td:nth-child(4),
.noticeList tr>td:nth-child(4) {
    order: 4;
}

.inquiryList tr>td:nth-child(5),
.noticeList tr>td:nth-child(5) {
    order: 5;
}

.boardViewLink:has(.label) {
    display: flex;
    align-items: center;
    gap: 12px;
}

.boardList.cardnews {
    margin: -15px -28px;
}
.boardList.cardnews>li {
    padding: 15px 28px;
}

.inquiryCaption {
    text-align: right;
}

.boardViewRowTit.borderNone {
    border-bottom: 0;
    padding: 0;
    margin-bottom: 30px;
}

/* 기관소개 */
.infoArea {
    background-color: var(--primary-lighten5);
    border-radius: 16px;
}

.greetArea {
    display: flex;
    /*flex-direction: row-reverse;*/
    align-items: flex-start;
    justify-content: space-between;
    background: linear-gradient(to top, #f3f6fb 20%, #ffffff00);
    padding-right: 25px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.greetArea::before {
    content: '';
    position: absolute;
    background-image: url(../image/sub/info/info-bg.svg);
    width: 665px;
    height: 383px;
    bottom: -36px;
    right: -68px;
    transition: var(--transition);
    background-size: contain;
    background-repeat: no-repeat;
}
.greetImg {
    display: none;
}
.greetContent {
    padding: 50px 0 50px 40px;
    /*max-width: 510px;*/
    position: relative;
    z-index: 2;
}

.greetTit>p {
    line-height: 1.4;
}

.greetTxtW {
    padding-top: 40px;
    position: relative;
    z-index: 2;
}

.greetTit br:not(:nth-child(3)) {
    display: none;
}

.greetTxtW>p {
    font-size: var(--txt-font-size-lg);
}

.greetTxtW>p+p {
    padding-top: 24px;
}


@media screen and (max-width: 1023px) {
    .greetArea {
        padding: 0;
        flex-direction: column;
    }

    .greetContent {
        padding: 0 30px 45px;
        max-width: 100%;
    }

    .greetImg {
        margin: 0 auto;
    }
}

@media screen and (max-width: 767px) {
    .greetArea::before {
        width: 120%;
        bottom: 0;
        right: -45%;
        background-position: bottom;
    }
}

@media screen and (max-width: 500px) {
    .greetContent {
        padding: 0 10px 45px;
    }
}

/* 비전 */
.visionArea {
    padding: 80px 50px 100px;
    transition: var(--transition);
}

.visionTit {
    text-align: center;
}

.visionSubTit {
    padding-top: 30px;
    text-align: center;
}

.visionKeywordList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 110px;
    gap: 0 46px;
}

.visionKeywordW {
    flex: 1 1 100%;
    background-color: #fff;
    padding: 26px 30px;
    border-radius: 20px;
    border: 1px solid var(--primary-base);
    min-height: 280px;
    background-repeat: no-repeat;
    transition: var(--transition);
    box-sizing: border-box;
}

.visionKeywordW:nth-child(1) {
    background-image: url(../image/sub/info/info-vision-keyword-1.svg);
    background-position: right 0 bottom;
}

.visionKeywordW:nth-child(2) {
    background-image: url(../image/sub/info/info-vision-keyword-2.svg);
    background-position: center bottom;
}

.visionKeywordW:nth-child(3) {
    background-image: url(../image/sub/info/info-vision-keyword-3.svg);
    background-position: right 0 bottom
}

.visionKeywordTxt {
    padding-top: 6px;
}

@media screen and (max-width: 1439px) {
    .visionArea {
        padding: 80px 20px 100px;
    }

    .visionKeywordW {
        min-width: 240px;
    }
}

@media screen and (max-width: 1200px) {
    .visionArea {
        padding: 60px 30px 80px;
    }

    .visionKeywordList {
        gap: 40px 20px;
    }

    .visionKeywordW {
        padding: 18px 24px;
        min-width: 280px;
    }
}

@media screen and (max-width: 1023px) {
    .visionKeywordList {
        flex-direction: column;
    }
}

@media screen and (max-width: 700px) {
    .visionArea {
        padding: 60px 20px;
    }

    .visionKeywordList {
        padding-top: 60px;
    }
}

@media screen and (max-width: 500px) {
    .visionKeywordW {
        min-width: unset;
        width: 100%;
    }
}

/* 연혁 */
.historyArea {
    padding: 60px 120px;
}

.historyTit {
    text-align: center;
    padding-bottom: 30px;
}

.tabPrimary .tabWhite {
    background-color: #fff;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.tabPrimary li:first-child .tabWhite {
    border-left: 1px solid var(--border-color);
}

.tabPrimary li:last-child .tabWhite {
    border-right: 1px solid var(--border-color);
}

.historyList {
    margin-top: 40px;
    width: 100%;
    position: relative;
}

.historyList::before {
    content: '';
    display: block;
    background-image: url(../image/sub/info/info-line.svg);
    height: 100%;
    width: 1px;
    position: absolute;
    left: 118px;
    top: 0;
}

.historyList>li {
    display: flex;
    align-items: center;
    gap: 0 75px;
}

.historyList>li+li {
    padding-top: 30px;
}

.historyYear {
    position: relative;
    width: 85px;
    min-width: 85px;
}

.historyContent {
    position: relative;
    width: 100%;
    background-color: #fff;
    padding: 16px 24px;
    border-radius: 8px;
    border: 1px solid var(--primary-lighten2);
    box-shadow: 0 3px 6px #00000008;
}

.historyContent::after {
    content: '';
    display: block;
    background-color: var(--primary-base);
    width: 10px;
    height: 10px;
    border-radius: 999px;
    position: absolute;
    left: -48px;
    top: 50%;
    transform: translateY(-50%);
}

.historyW {
    display: flex;
    align-items: baseline;
    gap: 6px 16px;
    width: 100%;
}

.historyW+.historyW {
    padding-top: 18px;
}

.tablet {
    display: none;
}

@media screen and (max-width: 1023px) {
    .historyArea {
        padding: 60px 20px;
    }
}

@media screen and (max-width: 767px) {
    .tablet {
        display: block;
    }

    .historyArea {
        padding: 30px 20px;
    }

    .historyList::before {
        left: 98px;
    }

    .historyList>li {
        gap: 57px;
    }

    .historyContent {
        padding: 16px 18px;
    }

    .historyContent::after {
        left: -35px;
    }

    .historyW {
        flex-direction: column;
    }

    .historyYear {
        min-width: 70px;
        width: 70px;
    }
}

@media screen and (max-width: 500px) {
    .historyList>li {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .historyList::before {
        left: -10px;
    }

    .historyContent::after {
        display: none;
    }

    .historyYear::before {
        content: '';
        display: block;
        width: 5px;
        height: 5px;
        border-radius: 99px;
        background-color: var(--primary-base);
        position: absolute;
        left: -12px;
        top: 50%;
        transform: translateY(-50%);
    }
}

.tableRound {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.tableRound th {
    background-color: var(--primary-lighten5);
}

.tableRound thead th {
    border-top: 1px solid var(--primary-lighten3);
    border-bottom: 1px solid var(--primary-lighten3);
    border-left: 1px solid var(--primary-lighten3);
}

.tableRound thead p {
    line-height: 21px;
}

.tableRound thead th:first-child {
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
}

.tableRound thead th:last-child {
    border-right: 1px solid var(--primary-lighten3);
    border-top-right-radius: 13px;
    border-bottom-right-radius: 13px;
}

.tableInner.md {
    padding-top: 14px;
    padding-bottom: 14px;
}

.tableInner.lg {
    padding: 18px 30px;
}

.tableRoundRow {
    height: 30px;
}

.tableRound tbody th,
.tableRound tbody td {
    border-top: 1px solid var(--primary-lighten3);
    border-left: 1px solid var(--primary-lighten3);
}

.tableRound tbody tr td:last-child {
    border-right: 1px solid var(--primary-lighten3);
}

.tableRound tbody tr:last-child>* {
    border-bottom: 1px solid var(--primary-lighten3);
}

.tableRound tbody tr:nth-child(2) th {
    border-top-left-radius: 16px;
}

.tableRound tbody tr:nth-child(2) td:last-child {
    border-top-right-radius: 16px;
}

.tableRound tbody tr:last-child th {
    border-bottom-left-radius: 16px;
}

.tableRound tbody tr:last-child td:last-child {
    border-bottom-right-radius: 16px;
}

@media screen and (max-width: 767px) {

    .tableRound,
    .tableRound tbody,
    .tableRound tr,
    .tableRound th,
    .tableRound td {
        display: block;
    }

    .tableRound tr.tableRoundRow,
    .tableRound thead {
        display: none;
    }

    .tableRound tr:nth-child(n+3) {
        margin-top: 20px;
    }

    .tableRound tbody tr th {
        border-top-right-radius: 16px;
        border-top-left-radius: 16px;
        border-right: 1px solid var(--primary-lighten3);
    }

    .tableRound tbody tr td {
        border-right: 1px solid var(--primary-lighten3);
    }

    .tableRound tbody tr:nth-child(2) td:last-child,
    .tableRound tbody tr td:last-child {
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    .tableRound tbody tr td:last-child {
        border-bottom: 1px solid var(--primary-lighten3);
    }

    .tableRound tbody tr:last-child th {
        border-bottom-left-radius: 0;
    }

    .tableRound tbody tr:last-child>* {
        border-bottom: 0;
    }

    .tableRound th p {
        font-weight: 700;
    }

    .tableRound .tableInner.left {
        text-align: center;
        justify-content: center;
    }
}

.swal2-container{
    padding: 0 20px !important;
}
.swal2-popup{
    background-color: #fff !important;
    border-radius: var(--rounded) !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .15) !important;
    max-width: 100% !important;
    padding: 40px 0 !important;
}
.swal2-icon{
    display: none !important;
}
.swal2-html-container{
    text-align: center !important;
    font-size: var(--txt-font-size-xl) !important;
    font-weight: 500 !important;
    color: var(--grey-darken4);
}
.swal2-actions{
    margin: 30px 0 0 0 !important;
    gap: 0 10px !important;
}
.swal2-actions .swal2-styled{
    margin: 0 !important;
    height: var(--btn-height) !important;
    font-size: var(--btn-font-size) !important;
    padding: var(--btn-padding) !important;
    color: var(--grey-darken4) !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 8px !important;
    gap: 4px !important;
    transition: var(--transition) !important;
}
.swal2-actions .swal2-styled.swal2-cancel{
    font-size: var(--btn-font-size) !important;
    background-color: var(--primary-lighten5) !important;
    border: 1px solid var(--primary-lighten3) !important;
    color: var(--primary-base) !important;
    transition: .45s cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
}
.swal2-actions .swal2-styled.swal2-confirm{
    font-size: var(--btn-font-size) !important;
    background-color: var(--primary-base) !important;
    color: #fff !important;
    transition: .45s cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
}
.swal2-actions .swal2-styled.swal2-deny{
    font-size: var(--btn-font-size) !important;
    background-color: var(--primary-lighten5) !important;
    border: 1px solid var(--primary-lighten3) !important;
    color: var(--primary-base) !important;
    transition: .45s cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
}
@media screen and (min-width: 1201px){
    .swal2-actions .swal2-styled.swal2-cancel:hover{
        background-color: var(--primary-lighten3) !important;
    }
    .swal2-actions .swal2-styled.swal2-confirm:hover{
        background-color: var(--primary-darken1) !important;
    }
    .swal2-actions .swal2-styled.swal2-deny:hover{
        background-color: var(--primary-lighten3) !important;
    }
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .swal2-popup{
        padding: 20px 0 !important;
    }
    .swal2-actions{
        padding: 0 20px !important;
        margin: 20px 0 0 0 !important;
        gap: 0 8px !important;
    }
    .swal2-actions .swal2-styled{
        flex: 1 1 auto;
        padding: 0 !important;
    }
}
@media screen and (max-width: 500px){
}

.privacySection + .privacySection{
    margin-top: 50px;
}
.labelBoxTit{
    padding: 20px;
    background-color: var(--primary-lighten5);
    border-radius: 16px;
    text-align: center;
    margin-bottom: 30px;
}
.labelBoxW{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
.labelBox{
    width: calc((100% - 40px) / 3);
    border-radius: 16px;
    border: 1px solid var(--primary-lighten3);
    padding: 30px;
    text-align: center;
}
.labelBox>img{
    display: block;
    margin: 16px auto;
}
.privacySection>.txt.lg{
    display: flex;
    align-items: center;
    gap: 0 10px;
    margin-bottom: 20px;
}
.privacySection>.txt.lg img{
    display: block;
    width: 100%;
}
.privacySection>.txt.lg .listIcon{
    min-width: 31px;
    flex: 0 0 auto;
}
.privacySection ol>li{
    display: block;
    padding-left: 11px;
    text-indent: -11px;
}
.privacySection ol>li + li{
    margin-top: 4px;
}
.privacySection ol + .tablePrimaryScroll{
    margin-top: 20px;
}
.privacySection .tablePrimaryScroll + ol{
    margin-top: 20px;
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .privacySection + .privacySection{
        margin-top: 30px;
    }
    .labelBoxTit{
        padding: 16px;
        margin-bottom: 20px;
    }
    .labelBoxW{
        gap: 16px;
    }
    .labelBox{
        width: calc(50% - 8px);
        padding: 20px 16px;
        text-align: center;
    }
    .labelBox>img{
        width: 60px;
        margin: 12px auto;
    }
    .privacySection>.txt.lg{
        gap: 0 8px;
        margin-bottom: 16px;
    }
    .privacySection ol>li{
        padding-left: 9px;
        text-indent: -9px;
    }
    .privacySection ol>li + li{
        margin-top: 2px;
    }
    .privacySection ol + .tablePrimaryScroll{
        margin-top: 16px;
    }
    .privacySection .tablePrimaryScroll + ol{
        margin-top: 16px;
    }
}
@media screen and (max-width: 500px){
    .labelBox{
        width: 100%;
    }
}

.modal .agreement .card{
    padding: 20px 14px 20px 20px;
}
.modal.bankInfo .infoBox{
    margin-bottom: 0;
    margin-top: 20px;
}
@media screen and (max-width: 767px) {
    .modal .agreement .card{
        padding: 20px 10px 20px 20px;
    }
    .modal.bankInfo .infoBox{
        margin-top: 16px;
    }
}
@media screen and (max-width: 374px) {
}

.popup{
    position: absolute;
    max-width: calc(100% - 40px);
    left: 20px;
    top: calc(var(--header-height) + 20px);
    z-index: 100;
    border: 1px solid var(--border-color);
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
}
.popup:has(:nth-child(n+1)) {
    max-width: calc(50% - 30px);
}
.popup:nth-child(odd) {
    left: unset;
    right: 150px;
}




.popup a:not(.btn),
.popup img{
    display: block;
    width: 100%;
}
.pop-foot{
    display: flex;
    border-top: 1px solid var(--border-color);
}
.pop-foot>.btn{
    flex: 1 1 0;
    border-radius: 0;
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .popup{
        width: calc(100% - 40px);
        top: 20px;
        z-index: 101;
    }
    .popup:has(:nth-child(n+1)) {
        max-width: calc(100% - 40px);
    }
    .popup:nth-child(odd) {
        left: 20px;
        right: unset;
    }
}
@media screen and (max-width: 767px){
    .popup:has(:nth-child(n+1)) {
       max-width: 100%;
        width: calc(100% - 40px);
    }
}
@media screen and (max-width: 500px){
}
.popup:has(.popupTemplate){
    width: 600px;
}
.popupTemplate{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%;
    overflow: hidden;
}
.popupInner{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.pop-foot{
    display: flex;
}
.pop-foot>a{
    flex: 1 1 auto;
    box-sizing: border-box;
    width: 50%;
    height: var(--btn-height-xs);
    font-size: var(--btn-font-size-xs);
    font-weight: 600;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    transition: var(--transition);
}
.pop-foot>a:first-child{
    background-color: #fff;
    color: #000;
}
.pop-foot>a:last-child{
    background-color: #788287;
    color: #fff;
}
@media (min-width: 1024px){
    .pop-foot>a:first-child{
        background-color: var(--grey-lighten5);
    }
    .pop-foot>a:last-child{
        background-color: var(--grey-base);
    }
}
@media (max-width: 1439px){
    .popup:has(.popupTemplate){
        width: 400px;
    }
}
@media (max-width: 1023px){
    .popup:has(.popupTemplate),
    .popup{
        width: calc(100% - 40px);
    }
}

/* 시스템 점검안내 */
@font-face {
    font-family: 'GmarketSansTTFBold';
    src: local(GmarketSansTTFBold),url(../font/GmarketSansTTFBold.woff2) format('woff2'),url(../font/GmarketSansTTFBold.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
.popupInner.tenance{
    background-image: url(../image/popup/tenance.jpg);
    font-family: 'GmarketSansTTFBold';
}
.tenanceBox{
    width: 66.6666%;
    height: 15%;
    position: relative;
    top: 45.8333%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.tenanceBox h3{
    font-weight: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.06em;
}
.tenanceBox h3 + h3{
    margin-top: 10px;
}
@media (max-width: 1439px){
    .tenanceBox h3{
        font-size: 16px;
    }
    .tenanceBox h3 + h3{
        margin-top: 6px;
    }
}
@media (max-width: 1023px){
    .tenanceBox h3{
        font-size: 3vw;
    }
    .tenanceBox h3 + h3{
        margin-top: 1.5vw;
    }
}

/*cs상담업무 지연안내*/
.popupInner.cs{
    background-image: url(../image/popup/cs.jpg);
    font-family: 'GmarketSansTTFBold';
}
.csBox{
    width: 61.3333%;
    height: 8.8333%;
    position: relative;
    top: 43.3333%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.csBox h3{
    font-weight: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.06em;
    color: #fff;
}
@media (max-width: 1439px){
    .csBox h3{
        font-size: 16px;
    }

}
@media (max-width: 1023px){
    .csBox h3{
        font-size: 3vw;
    }
}

/*기본*/
@font-face {
    font-family: 'Jalnan';
    src: local(Jalnan),url(../font/Jalnan.woff2) format('woff2'),url(../font/Jalnan.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NanumSquareRound';
    src: local(NanumSquareRoundB),url(../font/NanumSquareRoundB.woff2) format('woff2'),url(../font/NanumSquareRoundB.woff) format('woff');
    font-weight: 700;
    font-style: normal;
}
.popupInner.default{
    --primary-base: #7e16ff;
    --primary-darken1: #5212a2;
    --primary-lighten5: #e1e5ff;

    background-image: url(../image/popup/default.jpg);
    text-align: center;
}
.defaultHead{
    position: relative;
    top: 6%;
}
.defaultHead h2{
    font-family: 'Jalnan';
    font-weight: normal;
    line-height: 1.2;
    font-size: 50px;
    letter-spacing: -0.05em;
}
.defaultHead h2>span.popupCaption{
    font-size: 30px;
    display: block;
}
.defaultBox{
    width: 84%;
    height: 55.3333%;
    padding: 10px;
    position: absolute;
    top: 31.5%;
    left: 49.5%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'NanumSquareRound';
}
.defaultBox h3{
    font-size: 24px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -0.075em;
}
.defaultBox h3>strong{
    font-weight: 700;
    color: var(--primary-darken1);
}
.defaultBox h3 + h3{
    margin-top: 10px;
}
.lightUnderline{
    position: relative;
}
.lightUnderline::before{
    content: "";
    display: block;
    position: absolute;
    width: calc(100% + 4%);
    height: 6px;
    bottom: 3px;
    left: -2%;
    z-index: -1;
    border-radius: 999px;
    background-color: var(--primary-lighten5);
}

@media (max-width: 1439px){
    .defaultHead h2{
        font-size: 32px;
    }
    .defaultHead h2>span.popupCaption{
        font-size: 16px;
    }
    .defaultBox h3{
        font-size: 16px;
    }
    .defaultBox h3 + h3{
        margin-top: 6px;
    }
    .lightUnderline::before{
        height: 6px;
        bottom: 3px;
    }
}
@media (max-width: 1023px){
    .defaultHead h2{
        font-size: 7vw;
    }
    .defaultHead h2>span.popupCaption{
        font-size: 4vw;
    }
    .defaultBox h3{
        font-size: 3vw;
    }
    .defaultBox h3 + h3{
        margin-top: 1.5vw;
    }
    .lightUnderline::before{
        height: 4px;
        bottom: 2px;
    }
}

/* S::20250822 최유림 추가 */
/* 리뉴얼 안내 */
.wrap:has(.renewalW) {
    padding: 60px 0;
    justify-content: center;
}
.renewalW {
    display: flex;
    align-items: center;
    gap: 30px 147px;
    justify-content: center;
}
.renewalImg {
    position: relative;
}
.renewalImg::before {
    content: '';
    display: block;
    background-image: url(../image/etc/etc-icon-bg.svg);
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: -156px;
    transform: translateY(-50%);
    width: 1074px;
    height: 1074px;
    z-index: -1;
}
.renewalTxtW > .logo {
    margin-bottom: 20px;
}
.renewalTxtW>p {
    line-height: 26px;
}
.renewalTxtW> p+p {
    margin-top: 28px;
}
.renewalTxtW>p.renewalTit {
    margin-bottom: 40px;
    line-height: 48px;
}
@media (max-width: 1439px){
    .renewalW {
        column-gap: 100px;
    }
}
@media (max-width: 1199px){
    .renewalW {
        column-gap: 80px;
    }
}
.renewalWorkMo,
.renewalWork {
    display: none;
}
@media (max-width: 1439px){
    .renewalWork {
        display: block;
    }
    .renewalWork+span{
        padding-left: 85px;
    }
}
@media (max-width: 1023px){
    .renewalW {
        flex-direction: column;
    }
    .renewalImg {
        max-width: 400px;
        margin: 0 auto;
    }
    .renewalImg::before {
        width: 150%;
        height: 150%;
        background-repeat: no-repeat;
        left: 50%;
        transform: translateX(-50%);
        top: -50%;
    }
    .renewalTxtW> p+p {
        margin-top: 20px;
    }
    .renewalTxtW>p>br {
        display: none;
    }
    .renewalWork+span {
        padding-left: 0;
    }
}
@media (max-width: 767px) {
    .renewalTxtW> p+p {
        margin-top: 16px;
    }
    .renewalTxtW>p.renewalTit,
    .renewalTxtW>p {
        line-height: 1.3;
    }
    .renewalTxtW>p.renewalTit {
        margin-bottom: 30px;
    }
}
@media (max-width: 500px) {
    .renewalWorkMo,
    .renewalWork {
        display: block;
    }
    .renewalWorkMo+span,
    .renewalWork+span{
        display: block;
    }
}
/* E::20250822 최유림 추가 */