/* common */
.page-navi-w{
    display: flex;
    align-items: center;
    gap: 0 2.4rem;
    padding-top: 4rem;
    margin-bottom: 3rem;
}
.page-navi-w .page-navi{
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 0 calc(1.6rem + clamp(16px, 2.4rem, 2.4rem));
}
.page-navi-w .page-navi>li{
    flex: 0 0 auto;
    display: flex;
    gap: 0 1px;
    align-items: center;
    font-size: var(--txt-font-size-sm);
    color: var(--grey-base);   
    position: relative;
}
.page-navi-w .page-navi>li>.icon{
    height: calc(var(--txt-font-size-sm) * 1.5);
    background-size: contain;
}
.page-navi-w .page-navi>li:not(:first-child)::before{
    content: "";
    display: block;
    position: absolute;
    width: clamp(16px, 2.4rem, 2.4rem);
    height: clamp(16px, 2.4rem, 2.4rem);
    top: 50%;
    left: -2rem;
    transform: translate(-50%, -50%);
    background-image: url(../images/icon/icon-navi.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-navi-w .page-navi>li:last-child{
    color: var(--primary-base);
    font-weight: 500;
}
.page-navi-w .page-navi .page-navi-home{
    width: clamp(24px, 3.2rem, 3.2rem);
    height: clamp(24px, 3.2rem, 3.2rem);
    display: block;
    border-radius: 1.2rem;
    background-image: url(../images/icon/icon-home-grey.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: clamp(16px, 2.4rem, 2.4rem) auto;
    margin: calc(((clamp(24px, 3.2rem, 3.2rem) - clamp(16px, 2.4rem, 2.4rem)) / -2));
    transition: var(--transition);
}
.page-util{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0 2.1rem;
    padding: 2px 6px;
    background-color: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .15);
}
.page-util>li{
    flex: 0 0 auto;
    display: block;
    position: relative;
}
.page-util>li:not(:first-child)::after{
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 1.6rem;
    background-color: var(--border-color);
    top: 50%;
    left: -1.1rem;
    transform: translateY(-50%);
}
.page-util .page-util-btn{
    width: clamp(16px, 2.8rem, 2.8rem);
    height: clamp(16px, 2.8rem, 2.8rem);
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: clamp(16px, 2rem, 2rem) auto;
    border-radius: 1.2rem;
    transition: var(--transition);
}
.page-util .page-util-btn.print{
    background-image: url(../images/icon/icon-print.svg);
}
.page-util .page-util-btn.share{
    background-image: url(../images/icon/icon-share.svg);
}
.page-head{
    margin-bottom: 5.6rem;
    text-align: center;
}
.page-head .page-tit{
    font-size: var(--tit-font-size-lg);
    font-weight: 800;
}
.page-head .page-tab{
    margin-top: 3.2rem;
}
.page-head .page-tab select.input-primary.pill{
    display: none;
    border: 2px solid var(--primary-base);
    color: var(--primary-base);
    font-weight: 600;
    background-image: url(../images/icon/icon-chevron-down-primary.svg);
}
.page-section + .page-section{
    margin-top: 8rem;
}
.share-list{
    display: flex;
    justify-content: center;
    gap: 0 2.4rem;
}
.share-list>li{
    flex: 1 1 0;
    display: block;
}
.share-item{
    display: block;
    text-align: center;
    padding: .8rem;
    border-radius: 1.5rem;
}
.share-item>.icon{
    margin: 0 auto;
}
.share-item>span{
    display: block;
    font-size: var(--txt-font-size);
    margin-top: 1.2rem;
    transition: var(--transition);
}
@media screen and (min-width: 1241px){
    .page-navi-w .page-navi .page-navi-home:hover,
    .page-util .page-util-btn:hover{
        background-color: var(--tertiary-lighten5);
    }
    .share-item:hover>span{
        color: var(--primary-base);
        font-weight: 600;
    }
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
    .page-head .page-tab .tab-secondary{
        display: none;
    }
    .page-head .page-tab select.input-primary.pill{
        display: block;
    }
}  
@media screen and (max-width: 640px){
    .page-navi-w{
        display: block;
        margin-bottom: 1.6rem;
    }
    .page-util{
        width: fit-content;
        margin: 4rem auto 0;
        padding: 0 4px;
    }
    .page-util .page-util-btn{        
        width: clamp(24px, 3.2rem, 3.2rem);
        height: clamp(24px, 3.2rem, 3.2rem);
    }
    .share-list{
        gap: 0 1.6rem;
    }
}
@media screen and (max-width: 424px){ 
}

/* 로그인, 회원가입 */
.login-w{
    text-align: center;
    color: var(--grey-darken2);
}
.login-btn-w{
    display: flex;
    gap: 4rem;
    margin-top: 4rem;
}
.login-btn-w .login-btn{
    flex: 1 1 0;
    color: var(--grey-darken4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 3rem;
    background-color: #fff;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .15);
    padding: 2.8rem;
    border: 2px solid #fff;
    transition: var(--transition);
}
.login-btn-w .login-btn p{
    font-size: var(--tit-font-size);
    font-weight: 700;
    margin-bottom: 1.6rem;
}
.login-btn-w .login-btn .icon{
    margin: 4rem 0;
}
.login-bottom{
    margin-top: 4rem;
    border-radius: 3rem;
    padding: 3rem;
    background-color: var(--tertiary-lighten5);
    display: flex;
    align-items: center;
    gap: 0 2.4rem;
}
.login-bottom p{
    flex-basis: 0;
    flex-grow: 1;
    font-size: var(--tit-font-size-sm);
    font-weight: 700;
    text-align: left;
    color: var(--grey-darken4);
}
#digital-inclusion-login-modal .modal-body-inner>p.txt{
    text-align: center;
    color: var(--grey-darken2);
    margin-bottom: 2.4rem;
}
@media screen and (min-width: 1241px){
    .login-btn-w .login-btn:hover{
        border-color: var(--primary-base);
    }
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
}  
@media screen and (max-width: 640px){
    .login-btn-w{
        display: block;
    }
    .login-btn-w .login-btn{
        width: 100%;
        flex-direction: row;
        text-align: left;
    }
    .login-btn-w .login-btn + .login-btn{
        margin-top: 4rem;
    }
    .login-bottom{
        display: block;
    }
    .login-bottom>.btn{
        width: 100%;
        margin-top: 1.6rem;
    }
    .login-btn-w .login-btn p{
        margin-bottom: 0;
        flex-basis: 0;
        flex-grow: 1;
    }
}
@media screen and (max-width: 424px){ 
}

.join-step{
    display: flex;
    gap: 0 6rem;
    padding: 2rem;
    border-radius: 3rem;
    background-color: var(--tertiary-lighten5);
}
.join-step>li{
    flex: 1 1 0;
    padding-top: 7.2rem;
    display: block;
    font-size: 2.4rem;
    color: var(--grey-base);
    text-align: center;
    position: relative;
}
.join-step>li::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: #fff;
    background-image: url(../images/icon/icon-check-grey.svg);
    background-size: 3.2rem auto;
    background-position: center;
    background-repeat: no-repeat;
}
.join-step>li.active{
    color: var(--tertiary-darken4);
    font-weight: 600;
    z-index: 1;
}
.join-step>li.active::after{
    border-color: var(--tertiary-darken4);
    background-color: var(--tertiary-darken4);
    background-image: url(../images/icon/icon-check-white.svg);
}

.join-step>li:not(:first-child)::before{
    content: "";
    display: block;
    position: absolute;
    width: calc(100% + 6rem - 5.6rem);
    height: .4rem;
    top: 2.6rem;
    left: 0;
    transform: translateX(calc(-50% - 3rem));
    background-color: var(--border-color);
}
.join-step>li.active::before{
    background-color: var(--tertiary-darken4);
}
.join-w{
    margin-top: 4rem;
}
.join-w>* + *{
    margin-top: 4rem;
}
.join-w .join-comment{
    font-size: var(--txt-font-size-lg);
    color: var(--grey-darken2);
    text-align: center;
}
.join-check{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.6rem 0;
}
.join-check strong{
    font-size: var(--tit-font-size-sm);
    font-weight: 500;
    display: block;
}
.join-check strong + p{
    font-size: var(--txt-font-size);
    margin-top: -.8rem;
}
.join-check>.icon{
    margin: 4rem 0;
}
@media screen and (min-width: 1241px){
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
}  
@media screen and (max-width: 640px){
    .join-step{
        gap: 0;
    }
    .join-step>li{
        font-size: clamp(14px, 2rem, 2rem);
    }
    .join-step>li:not(:first-child)::before{
        width: calc(100% - 5.6rem);
        transform: translateX(-50%);
    }
}
@media screen and (max-width: 424px){ 
}

.agreement + .agreement{
    margin-top: 4rem;
}
.agreement-head{
    margin-bottom: 2rem;
}
.agreement-tit{
    font-size: var(--tit-font-size-sm);
    font-weight: 700;
}
.agreement-body{
    border-radius: 2rem 2rem 0 0;
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-bottom: 0;
}
.agreement-body-inner{
    height: 160px;
    max-height: 160px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 2rem;
}
.agreement-body-inner::-webkit-scrollbar{
    width: 4px;
}
.agreement-body-inner::-webkit-scrollbar-track{
    background-color: var(--grey-lighten4);
    border-radius: 999px;
}
.agreement-body-inner::-webkit-scrollbar-thumb{ 
    background-color: var(--secondary-base);
    border-radius: 999px;
}
.agreement-body-inner::-webkit-scrollbar-button{
    display: none;
}
.term-contents ol,
.term-contents ol li{
    display: block;
}
.term-contents ol li + li{
    margin-top: 8px;
}
/* S:: 20260527 수정 */
.term-contents ol li>ol{
    margin-top: 8px;
    padding-left: 1.6rem;
}
/* E:: 20260527 수정 */
.term-contents ol li>ol li + li{
    margin-top: 4px;
}
.term-contents table{
    width: 100%;
    table-layout: fixed;
    border-top: 1px solid var(--grey-darken4);
}
.term-contents table tr{
    border-bottom: 1px solid var(--border-color);
}
.term-contents table th{
    font-size: var(--txt-font-size-lg);
    font-weight: 500;
}
.term-contents table td{
    padding: 1.6rem;
    font-size: var(--txt-font-size);
}
.agreement-foot{
    border-radius: 0 0 2rem 2rem;
    background-color: var(--grey-lighten5);
    padding: 2rem;
}
.agreement-foot .control-w{
    justify-content: flex-end;
}

/* 20260522 수정 */
.justify-list{
    display: block;
}
.justify-list>li{
    display: flex;
    gap: 0 .4rem;
    font-size: var(--txt-font-size);
    color: var(--grey-base);
}
.justify-list>li + li{
    margin-top: 8px;
}
.justify-list>li>strong{
    white-space: nowrap;
    color: var(--grey-darken2);
    font-weight: 600;
}
.justify-list>li>strong.justify-list-tit{
    display: block;
    width: clamp(64px, 8rem, 8rem);
    min-width: clamp(64px, 8rem, 8rem);
    text-align: justify;
    text-align-last: justify;
}
.justify-list>li>p>strong{
    color: var(--primary-base);
    font-weight: 600;
}
.card-primary-light>.agreement-foot{
    padding: 0;
    margin-top: 1.2rem;
    border-radius: 0;
    background-color: transparent;
}

/* 자산소식 */
.list-caption{
    display: flex;
    align-items: center;
    gap: 3.2rem 1.6rem;
    margin-bottom: 2.4rem;
}
.list-caption .list-caption-total{
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
}
.list-caption .list-caption-total.lg{
    font-size: var(--tit-font-size-sm);
}
.list-caption .list-caption-search{
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    gap: 1rem .8rem;
}
.list-caption .list-caption-search select.input-primary{
    flex: 0 0 auto;
    width: 16rem;
}
.list-caption .list-caption-search input.input-primary{
    flex-basis: 0;
    flex-grow: 1;
    max-width: 40.4rem;
}
.list-caption .list-caption-search .btn{
    flex: 0 0 auto;
    width: 12rem;
}
.list-caption .list-caption-right{
    margin-left: auto;
}
.list-caption .list-caption-right>select{
    min-width: 28.8rem;
}
.list-caption .list-caption-info{
    margin-left: auto;
    display: flex;
}
.list-caption .list-caption-info>li{
    display: flex;
    gap: 0 .8rem;
    padding: 0 .8rem;
    font-size: var(--txt-font-size-sm);
}
.list-caption .list-caption-info>li:first-child{
    padding-left: 0;
}
.list-caption .list-caption-info>li:last-child{
    padding-right: 0;
}
.list-caption .list-caption-info>li + li{
    border-left: 1px solid var(--border-color);
}
.list-caption .list-caption-info>li>p{
    font-weight: 600;
    color: var(--tertiary-darken4);
}
.list-caption .list-caption-info>li>span{
    display: block;
    color: var(--grey-base);
}
@media screen and (min-width: 1241px){
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
    .list-caption{
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    .list-caption.type2{
        flex-direction: column;
        gap: 4px 0;
    }
    .list-caption.type3{
        flex-direction: row;
        align-items: center;
    }
    .list-caption .list-caption-search{
        flex: 1 1 100%;
        width: 100%;
    }
    .list-caption .list-caption-search input.input-primary{
        max-width: 100%;
    }
}  
@media screen and (max-width: 640px){
    .list-caption .list-caption-search{
        flex-wrap: wrap;
    }
    .list-caption .list-caption-right{
        margin-left: 0;
        width: 100%;
    }
    .list-caption .list-caption-search select.input-primary{
        width: 100%;
        min-width: calc(50% - .4rem);
        flex-basis: 0;
        flex-grow: 1;
    }
    .list-caption .list-caption-search input.input-primary{
        min-width: calc(100% - 12.8rem);
    }
    .list-caption.type3 .list-caption-right{
        margin-left: auto;
        width: auto;
    }
}
@media screen and (max-width: 424px){ 
}

.nodat-area{
    width: 100%;
    text-align: center;
}
.nodat-area .icon{
    margin: 0 auto 2rem;
}
.nodat-area strong{
    display: block;
}

.board-view{
    padding: 3rem;
    border-radius: 2rem;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .15);
}
.board-view-head .label-w{
    margin-bottom: .8rem;
}
.board-view-tit>h3{
    font-size: var(--tit-font-size-sm);
    font-weight: 700;
    line-height: 1.2;
}
.board-view-head .board-view-info{
    display: flex;
    gap: 0 1.7rem;
    margin-top: 1.6rem;
}
.board-view-head .board-view-info>li{
    flex: 0 0 auto;
    display: block;
    font-size: var(--txt-font-size-sm);
    color: var(--grey-base);
    line-height: 1.2;
    position: relative;
}
.board-view-head .board-view-info>li:not(:first-child)::before{
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 1.2rem;
    background-color: var(--border-color);
    top: 50%;
    left: -.9rem;
    transform: translateY(-50%);
}
.board-view-body{
    margin-top: 2rem;
    padding: 2rem;
    border-radius: 1.6rem;
    border: 1px solid var(--border-color);   
}
/**
 * 게시글 본문(DEXT5 HTML) 이미지·유튜브(일반 16:9 / Shorts 9:16) 반응형
 * - JS: /common/js/boardContentsMedia.js (.yt-embed 래퍼 생성)
 */
.board-contents {
    overflow-wrap: break-word;
    word-break: break-word;
}

.board-contents img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

/* 에디터 표 잘림 수정 */
.board-contents table {
    max-width: 100% !important;
    overflow-wrap: anywhere;
}

.board-contents table {
    max-width: 100%;
}

.board-contents .yt-embed {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 1.6rem auto;
    overflow: hidden;
    background-color: #000;
}

.board-contents .yt-embed--landscape {
    aspect-ratio: 16 / 9;
}

.board-contents .yt-embed--portrait {
    aspect-ratio: 9 / 16;
    max-width: min(100%, 32rem);
}

.board-contents .yt-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    border: 0;
}

@supports not (aspect-ratio: 16 / 9) {
    .board-contents .yt-embed--landscape {
        height: 0;
        padding-bottom: 56.25%;
    }

    .board-contents .yt-embed--portrait {
        height: 0;
        padding-bottom: 177.78%;
        max-width: min(100%, 32rem);
    }
}

.board-view-foot{
    margin-top: 3.6rem;
}
.board-view-file-total{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .6rem;
}
.board-view-file-total>p{
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
}
.board-view-file-total>p>span{
    color: var(--primary-base);
}
.board-file-download{
    position: relative;
    left: .8rem;
    border-radius: .6rem;
    padding: 0 .8rem;
    height: clamp(24px, 3.2rem, 3.2rem);
    display: flex;
    align-items: center;
    gap: 0 4px;
    font-size: var(--txt-font-size);
    transition: var(--transition);
}
.board-view-file{
    display: block;
}
.board-view-file>li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 1.6rem;
    padding: 1.4rem 1.6rem;
    border-radius: .8rem;
    border: 1px solid var(--border-color);
}
.board-view-file>li + li{
    margin-top: 1rem;
}
.board-view-file>li>p{
    flex-basis: 0;
    flex-grow: 1;
    max-width: calc(100% - 11.4rem);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}
.board-view-control-w{
    display: flex;
    border-top: 1px solid var(--border-color);
    margin-top: 4rem;
    position: relative;
}
.board-view-control-w::after{
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: var(--border-color);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.board-view-control{
    width: 50%;
    max-width: 50%;
    display: flex;
}
.board-view-control>p{
    color: var(--primary-base);
    min-width: 10.4rem;
    gap: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: var(--txt-font-size);
    font-weight: 600;
}
.board-view-control>a{
    flex-basis: 0;
    flex-grow: 1;
    max-width: calc(100% - 10.4rem);
    padding: 2.3rem 1.6rem;
    display: block;
    font-size: var(--txt-font-size);
    color: var(--grey-base);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    transition: var(--transition);
}
.board-view-control.next{
    margin-left: auto;
    text-align: right;
    flex-direction: row-reverse;
}
.board-comment-area{
    margin-top: 4rem;
    padding: 3rem;
    border-radius: 2rem;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .15);
}
.board-comment-area .board-comment-tit-w{
    display: flex;
    align-items: center;
    gap: 0 1.6rem;
    margin-bottom: 2rem;
}
.board-comment-area .board-comment-tit{
    flex-basis: 0;
    flex-grow: 1;
    font-size: var(--tit-font-size-sm);
}
.board-comment-area .board-comment-tit-w>p{
    font-size: var(--txt-font-size);
    color: var(--grey-base);
}
.board-comment{
    padding: 2rem;
    border-radius: 1.6rem;
    border: 1px solid var(--border-color);
}
.board-comment + .board-comment{
    margin-top: 2rem;
}
.board-comment-head{
    display: flex;
    align-items: center;
    gap: 0 1.6rem;
    margin-bottom: 1.6rem;
}
.board-comment-head .board-comment-user{
    flex-basis: 0;
    flex-grow: 1;
    font-size: var(--tit-font-size-sm);
    font-weight: 700;
    color: var(--grey-darken2);
    display: block;
}
.board-comment-head .board-comment-info{
    flex: 0 0 auto;
    display: flex;
    gap: 0 calc(1.6rem + 1px);
}
.board-comment-head .board-comment-info>li {
    flex: 0 0 auto;
    display: block;
    font-size: var(--txt-font-size-sm);
    color: var(--grey-base);
    line-height: 1.2;
    position: relative;
}
.board-comment-head .board-comment-info>li:not(:first-child)::before {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 1.2rem;
    background-color: var(--border-color);
    top: 50%;
    left: calc(-.8rem - 1px);
    transform: translateY(-50%);
}
.board-comment-txt{
    font-size: var(--txt-font-size);
    color: var(--grey-base);
}
.board-comment-btn{
    margin-top: 1.6rem;
    display: flex;
    justify-content: flex-end;
    gap: 0 .8rem;
}
.board-comment-btn>.btn{
    min-width: 7.8rem;
}
.board-comment.tertiary{
    background-color: var(--tertiary-lighten5);
    border-color: var(--tertiary-lighten5);
}
.board-comment.tertiary .board-comment-txt{
    color: var(--grey-darken4);
}

@media screen and (min-width: 1241px){
    .board-file-download:hover{
        background-color: var(--grey-lighten4);
    }
    .board-view-control>a:hover{
        color: var(--primary-base);
    }
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
}
@media screen and (max-width: 640px){
    .board-view-control{
        display: block;
    }
    .board-view-control>p{
        min-width: 0;
        padding: 5px 1.2rem;
        justify-content: flex-start;
    }
    .board-view-control.next>p{
        justify-content: flex-end;
    }
    .board-view-control>a{
        padding: 5px 1.6rem;
        max-width: 100%;
    }
}
@media screen and (max-width: 424px){
}

.thumb-board-list{
    display: flex;
    flex-wrap: wrap;
    margin: -1.2rem;
}
.thumb-board-list>li{
    display: block;
    padding: 1.2rem;
    flex: 1 1 25%;
    width: 25%;
    max-width: 25%;
}
.modal .thumb-board-list>li{
    flex: 1 1 calc(100% / 3);
    width: calc(100% / 3);
    max-width: calc(100% / 3);
}
.thumb-board-list>li>.control-primary{
    margin-bottom: .8rem;
}
.modal .thumb-board-list>li>.control-primary input[type="radio"] + label::before,
.modal .thumb-board-list>li>.control-primary input[type="checkbox"] + label::before{
    display: none;
}
.thumb-board-item{
    display: block;
    padding: 1.6rem;
    border-radius: 2rem;
    border: 1px solid var(--border-color);
}
.thumb-board-item .thumb-board-item-contents{
    padding-top: 1.6rem;
}
.thumb-board-item .thumb-board-item-contents .thumb-board-item-category-w{
    display: flex;
    flex-wrap: wrap;
    gap: 0 .8rem;
    white-space: nowrap;
    font-size: var(--txt-font-size);
    margin-bottom: .8rem;
}
.thumb-board-item .thumb-board-item-contents .thumb-board-item-category-w>p{
    flex: 0 0 auto;
    color: var(--primary-base);
    font-weight: 600;
}
.thumb-board-item .thumb-board-item-contents .thumb-board-item-category{
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0 calc(.8rem + 1px);
}
.thumb-board-item .thumb-board-item-contents .thumb-board-item-category>li{
    position: relative;
}
.thumb-board-item .thumb-board-item-contents .thumb-board-item-category>li:not(:last-child)::before{
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 1.2rem;
    background-color: var(--border-color);
    top: 50%;
    right: calc(-.4rem - 1px);
    transform: translateY(-50%);
}
.thumb-board-item .thumb-board-item-contents strong{
    font-size: var(--txt-font-size-lg);
    display: block;
    font-weight: 700;
    height: calc(var(--txt-font-size-lg) * 3);
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
    transition: var(--transition);
}
.thumb-board-item-info{
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.6rem;
    justify-content: space-between;
    margin-top: 1.2rem;
}
.thumb-board-item-info>li{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0 .8rem;
}
.thumb-board-item-info>li.full{
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
}
.thumb-board-item-info>li .icon{
    width: clamp(16px, 2rem, 2rem);
    height: clamp(16px, 2rem, 2rem);
    min-width: clamp(16px, 2rem, 2rem);
}
.thumb-board-item-info>li p{
    font-size: var(--txt-font-size-sm);
    color: var(--grey-base);
}
.thumb-board-item-info>li p.tertiary-darken4-txt{
    font-weight: 600;
    margin-left: -.4rem;
}
.thumb-board-list>li:has(.thumb-board-item-foot) .thumb-board-item{
    border-radius: 2rem 2rem 0 0;
    border-bottom: 0;
}
.thumb-board-list>li:has(.thumb-board-item-foot) .thumb-board-item .thumb-board-item-contents{
    padding-bottom: .8rem;
}
.thumb-board-item-foot{
    margin-top: -.8rem;
    display: flex;
    gap: 0 .8rem;
}
.thumb-board-item-foot>.btn{
    flex: 1 1 0;
}

.thumb-board-list.type2 .thumb-board-item .thumb{
    padding-top: 100%;
}

.thumb-board-list.blur{
    position: relative;
    filter: blur(.5rem);
}
.thumb-board-list.blur::after{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.board-list{
    display: block;
}
.board-list>li{
    display: block;
}
.board-list>li + li{
    margin-top: 2rem;
}
.thumb-board-list.type2>li .thumb-size{
    max-width: 296px;
    margin: 0 auto;
}
.board-item{
    display: block;
    padding: 1.8rem;
    border-radius: 2rem;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .15);
    background-color: #fff;
    border: 2px solid transparent;
    transition: var(--transition);
}
.board-item>strong{
    display: block;
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
    width: 100%;
    height: calc(var(--txt-font-size-lg) * 1.5);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}
.board-item .board-item-contents{
    margin-top: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 1.6rem;
}
.board-item .board-item-contents p{
    font-size: var(--txt-font-size-sm);
    color: var(--grey-base);
}
.board-item .board-item-file{
    display: flex;
    align-items: center;
    gap: 0 .4rem;
}
.borad-more-view-w{
    display: flex;
    justify-content: center;
    gap: 0 1.6rem;
    margin-top: 4rem;
}
.borad-more-view{
    width: 23.2rem;
    height: clamp(40px, 5.4rem, 5.4rem);
    border-radius: 2rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 .8rem;
    font-size: clamp(16px, 1.8rem, 1.8rem);
    font-weight: 500;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .15);
    transition: var(--transition);
}
@media screen and (min-width: 1241px){
    .thumb-board-item:hover .thumb-board-item-contents strong{
        color: var(--primary-base);
        text-decoration: underline;
    }
    .board-item:hover{
        border-color: var(--primary-base);
    }
    .borad-more-view:hover{
                background-color: var(--grey-lighten5);
    }
}
@media screen and (max-width: 1240px){
    .thumb-board-list{
        margin: -1.2rem -1rem;
    }
    .thumb-board-list>li{
        padding: 1.2rem 1rem;
    }
    .thumb-board-list:not(.type2)>li{
        flex: 1 1 50%;
        width: 50%;
        max-width: 50%;
    }
    .modal .thumb-board-list>li{
        flex: 1 1 calc(100% / 3);
        width: calc(100% / 3);
        max-width: calc(100% / 3);
    }
}
@media screen and (max-width: 1028px){
    .thumb-board-list.type2>li{
        flex: 1 1 33.333%;
        width: 33.333%;
        max-width: 33.333%;
    }
    .modal .thumb-board-list>li{
        flex: 1 1 50%;
        width: 50%;
        max-width: 50%;
    }
}
@media screen and (max-width: 640px){
    .thumb-board-item{
        border-radius: 0;
        border: 0;
        padding: 0;
    }
    .thumb-board-list.type2>li{
        flex: 1 1 50%;
        width: 50%;
        max-width: 50%;
    }
    .thumb-board-item .thumb-board-item-contents .thumb-board-item-category-w{
        display: block;
    }
    .thumb-board-item .thumb-board-item-contents .thumb-board-item-category-w>p{
        margin-bottom: .4rem;
    }
    .thumb-board-item-info>li.responsive{
        flex-wrap: wrap;
        gap: .4rem .8rem;
    }
    .thumb-board-item-info>li p:not(.tertiary-darken4-txt){
        flex: 1 1 100%;
    }
    .thumb-board-list>li:has(.thumb-board-item-foot) .thumb-board-item .thumb-board-item-contents{
        padding-bottom: 1.6rem;
    }
    .thumb-board-item-foot{
        display: block;
        margin-top: 0;
    }
    .thumb-board-item-foot>.btn{
        width: 100%;
    }
    .thumb-board-item-foot>.btn + .btn{
        margin-top: .8rem;
    }
}
@media screen and (max-width: 424px){
    .thumb-board-item-info{
        display: block;
    }
    .thumb-board-item-info>li + li{
        margin-top: .8rem;
    }
}

/* 통합검색 */
.page-global-search .global-search-input-w{
    gap: 0 1.2rem;
}
.global-search-input-w.lg{
    padding: 4rem;
    border-radius: 3rem;
    background-color: var(--tertiary-lighten5);
}
.global-search-input-w.lg input[type=text].global-search-input{
    height: var(--btn-height-xl);
    background-color: #fff;
    border: 2px solid;
    border: 2px solid var(--tertiary-darken4);
    padding: 0 2.4rem 0 5.4rem;
    background-position: 2.4rem center;
}
.global-search-input-w.lg .global-search-btn{
    height: var(--btn-height-xl);
    font-size: var(--btn-font-size-xl);
    min-width: 16rem;
}
.page-global-search-keyword-area .global-search-btn{
    min-width: 9.4rem;
    background-color: var(--tertiary-darken4);
}
.page-global-search-keyword-area input[type=text].global-search-input{
    padding: 0 2.4rem 0 5.4rem;
    background-position: 2.4rem center;
}
.global-search-count{
    text-align: center;
    padding: 3rem;
    background-color: var(--grey-lighten5);
    border: 1px solid var(--border-color);
    border-radius: 2rem;
    margin-top: 4rem;
}
.global-search-count p{
    font-size: var(--tit-font-size-sm);
    font-weight: 700;
}
.page-global-search-result-area{
    margin-top: 2rem;
    display: flex;
    gap: 0 4rem;
}
.page-global-search-result-w{
    width: calc(66.6666% - 4rem);
    max-width: calc(66.6666% - 4rem);
}
.page-global-search-result + .page-global-search-result{
    margin-top: 5.6rem;
}
.page-global-search-result-head{
    padding-bottom: .8rem;
    margin-bottom: 2.4rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 0 1.6rem;
}
.page-global-search-result-tit{
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 0 .8rem;
}
.page-global-search-result-tit>h3{
    font-size: var(--tit-font-size-sm);
}
.page-global-search-result-tit .page-global-search-result-count{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: clamp(24px, 3.2rem, 3.2rem);
    height: clamp(24px, 3.2rem, 3.2rem);
    background-color: var(--secondary-base);
    color: #fff;
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
    border-radius: 50%;
}
.page-global-search-result-head .page-global-search-result-more{
    flex: 0 0 auto;
    display: block;
    width: clamp(24px, 3.2rem, 3.2rem);
    height: clamp(24px, 3.2rem, 3.2rem);
    background-color: var(--grey-darken4);
    border-radius: 50%;
    background-image: url(../images/icon/icon-plus-white.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: clamp(16px, 2.4rem, 2.4rem) auto;
    transition: var(--transition);
}
.page-global-search-keyword-area{
    flex: 0 0 auto;
    width: 33.3333%;
    max-width: 33.3333%;
}
.page-global-search-keyword-w{
    margin-top: 2rem;
    border-radius: 2rem;
    padding: 3rem;
    box-shadow: 0 .8rem 1.5rem rgba(0, 0, 0, .15);
}
.page-global-search-keyword-w>strong{
    font-size: 2.7rem;
    font-weight: 700;
}
.page-global-search-keyword{
    display: block;
    margin-top: 2rem;
}
.page-global-search-keyword>li{
    display: flex;
    gap: 0 1.6rem;
    width: 100%;
}
.keyword-delete-btn{
    width: 4.2rem;
    min-width: 4.2rem;
    height: 4.2rem;
    display: block;
    border-radius: .8rem;
    background-image: url(../images/icon/icon-close-grey.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 2rem auto;
    transition: var(--transition);
}
.page-global-search-keyword>li>a{
    display: flex;
    align-items: center;
    gap: 0 .4rem;
    height: 4.2rem;
    width: 100%;
    border-radius: .8rem;
    max-width: 100%;
    font-size: var(--txt-font-size);
    color: var(--grey-base);
    transition: var(--transition);
}
.page-global-search-keyword>li>a>.page-global-search-keyword-index{
    display: block;
    min-width: 2.5rem;
    text-align: center;
}
.page-global-search-keyword>li>a>span:not(.page-global-search-keyword-index){
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}
.page-global-search-keyword-w.trending .page-global-search-keyword>li>a>span:not(.page-global-search-keyword-index){
    max-width: calc(100% - 2.9rem);
}
.page-global-search-keyword-w.recent .page-global-search-keyword>li>a{
    max-width: calc(100% - 5.8rem);
}
.page-global-search-result .thumb-board-list>li{
    flex: 1 1 50%;
    width: 50%;
    max-width: 50%;
}
.page-global-search-result .thumb-board-list.type2>li{
    flex: 1 1 calc(100% / 3);
    width: calc(100% / 3);
    max-width: calc(100% / 3);
}
@media screen and (min-width: 1241px){
    .page-global-search-keyword-area .global-search-btn:hover{
        background-color: var(--tertiary-darken3);
    }
    .page-global-search-keyword>li>a:hover{
        background-color: var(--tertiary-lighten5);
        color: var(--primary-base);
    }
    .keyword-delete-btn:hover{
        background-color: var(--tertiary-lighten5);
    }
    .page-global-search-result-head .page-global-search-result-more:hover{
        background-color: var(--grey-darken2);
    }
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
    .page-global-search-result-area{
        flex-direction: column-reverse;
        gap: 4rem 0;
    }
    .page-global-search-keyword-w{
        display: none;
    }
    .page-global-search-result-w,
    .page-global-search-keyword-area{
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }
}  
@media screen and (max-width: 640px){
    .page-global-search>.global-search-input-w{
        padding: 3rem;
    }
    .page-global-search>.global-search-input-w .global-search-btn{
        min-width: 12rem;
    }
}
@media screen and (max-width: 424px){ 
}

/* 기타페이지 */
.application-head{
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 4rem;
}
.application-head>h3{
    flex-basis: 0;
    flex-grow: 1;
    font-size: var(--tit-font-size);
}
.application-step{
    display: flex;
    gap: 8.8rem;
}
.application-step>li{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 4.8rem;
    min-height: 4rem;
    font-size: var(--txt-font-size-lg);
    color: var(--grey-base);
}
.application-step>li::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4rem;
    height: 4rem;
    background-image: url(../images/icon/icon-check-grey.svg);
    background-size: 2.4rem auto;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 50%;
}
.application-step>li:not(:first-child)::after{
    content: "";
    display: block;
    position: absolute;
    width: 7.2rem;
    height: 2px;
    background-color: var(--border-color);
    left: -.8rem;
    top: 50%;
    transform: translate(-100%, -50%);
}
.application-step>li.active{
    color: var(--tertiary-darken4);
    font-weight: 600;
}
.application-step>li.active::before{
    border-color: var(--tertiary-darken4);
    background-color: var(--tertiary-darken4);
    background-image: url(../images/icon/icon-check-white.svg);
}
.application-step>li.active::after{
    background-color: var(--tertiary-darken4);
}
.application-status-head{
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding-bottom: 1.6rem;
    margin-bottom: 2.4rem;
    border-bottom: 1px solid var(--border-color);
}
.application-status .application-status-head:has(.btn){
    align-items: center;
}
.application-status-head .thumb-size{
    flex: 0 0 auto;
    min-width: 10rem;
    width: 10rem;
}
.application-status-head .thumb{
    border-radius: 0;
    padding-top: 100%;
}
.application-status-head .application-status-head-contents{
    flex-basis: 0;
    flex-grow: 1;
}
.application-status-head .application-status-head-contents>strong{
    display: block;
}
.application-status-info{
    display: block;
    padding: 2rem;
    border-radius: 2rem;
    background-color: var(--tertiary-lighten5);
    color: var(--grey-darken2);
}
.application-status-info>li{
    display: flex;
    align-items: center;
    gap: 0 .8rem;
}
.application-status-info>li + li{
    margin-top: .8rem;
}
.application-status-info>li>strong{
    padding: 4px 1.2rem;
    min-width: clamp(64px, 8.4rem, 8.4rem);
    text-align: center;
    border-radius: 9999px;
    background-color: var(--tertiary-darken4);
    color: #fff;
    font-size: var(--txt-font-size);
}
.application-status-info>li>p{
    font-size: var(--txt-font-size);
    color: var(--grey-darken2);
}
@media screen and (min-width: 1241px){
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
    .application-head{
        flex-direction: column;
    }
}  
@media screen and (max-width: 640px){
    .application-step>li{
        padding-left: 5.2rem;
    }
    .application-status .application-status-head{
        flex-wrap: wrap;
    }
    .application-status .application-status-head:has(.btn){
        align-items: flex-start;
    }
    .application-status-head .application-status-head-contents{
        min-width: calc(100% - 12rem);
    }
    .application-status-head>.btn{
        margin-left: 12rem;
    }
}
@media screen and (max-width: 424px){ 
}

.progress-area{
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}
.progress-head{
    display: flex;
    align-items: center;
    gap: 0 1.6rem;
    margin-bottom: 2rem;
}
.progress-head .progress-tit{
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 0 .8rem;
}
.progress-head .progress-tit h3{
    font-size: var(--tit-font-size);
}
.progress-head .progress-tit .reset-btn{
    width: clamp(24px, 3.2rem, 3.2rem);
    height: clamp(24px, 3.2rem, 3.2rem);
    border-radius: .8rem;
    background-color: var(--tertiary-lighten5);
    display: block;
    background-image: url(../images/icon/icon-reset-primary.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: clamp(16px, 2.4rem, 2.4rem) auto;
    transition: var(--transition);
}
.progress-caption{
    flex: 0 0 auto;
    text-align: right;
    font-size: var(--tit-font-size-sm);
}
.progress-caption>strong{
    font-size: var(--tit-font-size);
    font-weight: 700;
}
.progress-w{
    position: relative;
    padding-bottom: calc((var(--txt-font-size-lg) * 1.5) + .8rem);
}
.progress-state{
    font-size: var(--txt-font-size-lg);
    font-weight: 600;
    position: absolute;
    bottom: 0;
    left: 0;
}
.progress-target{
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
}
.progress-target-inner{
    position: relative;
    width: clamp(16px, 2rem, 2rem);
    height: calc(var(--txt-font-size-lg) * 1.5);
    display: flex;
    align-items: center;
}
.progress-target-inner>span{
    display: block;
    position: absolute;
    top: 50%;
    left: -4px;
    transform: translate(-100%, -50%);
    font-size: var(--txt-font-size-lg);
    font-weight: 600;
    color: var(--secondary-base);
    white-space: nowrap;
}
.progress{
    border-radius: 999px;
    width: 100%;
    height: clamp(26px, 4rem, 4rem);
    overflow: hidden;
    background-color: var(--grey-lighten5);
}
.progress-inner{
    border-radius: 999px;
    width: 100%;
    height: 100%;
    background-color: var(--primary-base);
}
.progress-w.type2{
    padding: 0;
}
.progress-w.type2>p{
    color: var(--primary-base);
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
    text-align: right;
    margin-bottom: .8rem;
}
@media screen and (min-width: 1241px){
    .progress-head .progress-tit .reset-btn:hover{
        background-color: var(--tertiary-lighten4);
    }
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
    .progress-w{
        padding-top: calc((var(--txt-font-size-lg)* 1.5) + .8rem);
    }
    .progress-w:not(:has(.progress-target)){
        padding-bottom: 0;
    }
    .progress-state{
        bottom: unset;
        top: 0;
    }
}  
@media screen and (max-width: 640px){
    .progress-head{
        display: block;
    }
    .progress-tit{
        justify-content: center;
        text-align: center;
    }
    .progress-caption{
        margin-top: .8rem;
        text-align: center;
    }
}
@media screen and (max-width: 424px){ 
}

/* 설문 */
.survey-area.center{
    text-align: center;
}
.survey-w + .survey-w{
    margin-top: 4rem;
}
.survey-w + .survey-w.sm{
    margin-top: 2rem;
}
.survey-w .survey-tit{
    display: flex;
    gap: 0 .6rem;
    margin-bottom: 1.2rem;
}
.survey-w .survey-tit>.icon{
    min-width: clamp(16px, 2.4rem, 2.4rem);
    height: calc(var(--txt-font-size-lg) * 1.5);
    background-size: contain;
}
.survey-area.center .survey-w .survey-tit{
    justify-content: center;
}
.survey-w .survey-tit>strong{
    flex-basis: 0;
    flex-grow: 1;
    display: block;
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
    color: var(--grey-darken2);
}
.survey-w .survey-tit>.survey-tit-index{
    flex: 0 0 auto;
    display: block;
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
    color: var(--primary-base);
}
.survey-contents{
    margin-bottom: 2rem;
}
.survey{
    display: block;
}
.survey>li{
    display: flex;
    align-items: center;
    gap: 0 2rem;
    min-height: var(--input-height);
}
.survey>li + li{
    margin-top: .8rem;
}
.survey .control-primary input[type="checkbox"] + label p,
.survey .control-primary input[type="radio"] + label p{
    font-size: var(--txt-font-size);
}

.survey.control-btn-w{
    display: flex;
    justify-content: center;
}
.survey.control-btn-w.start{
    justify-content: center;
}
.survey.control-btn-w>li + li{
    margin-top: 0;
}
.survey.survey-row{
    display: flex;
    justify-content: center;
    gap: 1.2rem 0;
}
.survey.survey-row>li + li{
    margin-top: 0;
}
.survey.survey-row .control-secondary input[type="checkbox"] + label p,
.survey.survey-row .control-secondary input[type="radio"] + label p{
    flex-direction: column-reverse;
    text-align: center;
    padding: 0 1.6rem;
    white-space: nowrap;
}
.survey.survey-row .control-secondary input[type="checkbox"] + label p .control-txt,
.survey.survey-row .control-secondary input[type="radio"] + label p .control-txt{
    max-width: 100%;
}

.pre-survey-done-tit{
    text-align: center;
    font-size: var(--tit-font-size-sm);
    font-weight: 700;
    margin-bottom: 2.4rem;
    color: var(--grey-darken2);
}
.pre-survey-done img{
    display: block;
    margin: 0 auto;
}

@media screen and (min-width: 1241px){
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
    .survey.survey-row .control-secondary input[type="checkbox"] + label p,
    .survey.survey-row .control-secondary input[type="radio"] + label p{
        padding: 0 .8rem;
    }
    .pre-survey-done img{
        width: 20rem;
    }
}  
@media screen and (max-width: 640px){
}
@media screen and (max-width: 424px){ 
}


/* 배움공간 */
.info-box{
    padding: 2.5rem 3rem;
    border-radius: 2rem;
    background-color: var(--indigo-lighten5);
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 4rem;
}
.info-box.sm{
    margin-bottom: 2.4rem;
}
.info-box.white{
    background-color: #fff;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .15);
}
.info-box.tertiary{
    background-color: var(--tertiary-lighten5);
}
.info-box>.icon{
    flex: 0 0 auto;
    min-width: 8rem;
}
.info-box>strong{
    flex-basis: 0;
    flex-grow: 1;
    display: block;
    font-size: var(--tit-font-size-sm);
}
.info-box>strong.sm{
    font-size: var(--txt-font-size-lg);
}
.info-box>.btn{
    flex: 0 0 auto;
}
@media screen and (min-width: 1241px){
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
    .info-box{
        flex-wrap: wrap; 
    }
    .info-box>strong{
        min-width: calc(100% - 10rem);
    }
    .info-box>.btn{
        margin: 0 auto;
    }
    .info-box.tertiary:not(:has(>.icon))>strong{
        text-align: center;
    }
}  
@media screen and (max-width: 640px){
}
@media screen and (max-width: 424px){ 
}

.edu-detail-head{
    padding-bottom: 1.6rem;
    margin-bottom: 2.4rem;
    border-bottom: 1px solid var(--border-color);
}
.edu-detail-head>h4{
    font-size: var(--tit-font-size-sm);
}
.edu-detail-info-w{
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;
}
.edu-detail-info{
    flex: 1 1 100%;
}
.edu-detail-info.short{
    flex: 1 1 calc((100% - 4.8rem) / 3);
    width: calc((100% - 4.8rem) / 3);
    max-width: calc((100% - 4.8rem) / 3);
}
.edu-detail-info>strong{
    display: block;
    font-weight: 600;
    font-size: var(--txt-font-size-lg);
    line-height: 1.2;
    margin-bottom: 1.2rem;
}
.edu-detail-info p,
.edu-detail-info ol,
.edu-detail-info ul,
.edu-detail-info li{
    font-size: var(--txt-font-size);
    color: var(--grey-darken2);
}
.edu-schedule{
    border-radius: 2rem;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: .4rem 2rem;
    padding: 2.6rem 2rem;
    position: relative;
}
.edu-schedule .edu-schedule-tit{
    flex-basis: 0;
    flex-grow: 1;
}
.edu-curriculum{
    display: block;
}
.edu-curriculum>li{
    border-radius: 2rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: .4rem .8rem;
    padding: 2.6rem 2rem 2.6rem 14.8rem;
    position: relative;
}
.edu-curriculum>li + li{
    margin-top: 1.6rem;
}
.edu-curriculum>li .edu-curriculum-index{
    position: absolute;
    top: 0;
    left: 0;
    width: 12.8rem;
    min-width: 12.8rem;
    height: 100%;
    border-right: 1px solid var(--border-color);
    background-color: var(--tertiary-lighten4);
    color: var(--tertiary-darken4);
    font-weight: 600;
    font-size: var(--txt-font-size-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.edu-curriculum>li .label{
    min-width: clamp(56px, 7.7rem, 7.7rem);
}
.edu-curriculum>li .edu-curriculum-tit{
    flex-basis: 0;
    flex-grow: 1;
    padding-right: 3.2rem;
}
.edu-curriculum>li .edu-curriculum-time{
    color: var(--grey-base);
}
@media screen and (min-width: 1241px){
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
}  
@media screen and (max-width: 640px){
    .edu-schedule{
        justify-content: flex-end;
        flex-wrap: wrap;
        padding: 2rem;
    }
    .edu-schedule .edu-schedule-tit{
        flex: 1 1 100%;
    }
    .edu-curriculum>li{
        flex-wrap: wrap;
        padding: 2rem;
    }
    .edu-curriculum>li .edu-curriculum-index{
        order: 4;
        position: static;
        width: auto;
        min-width: 0;
        height: auto;
        border: 0;
        background-color: transparent;
        display: block;
        text-align: left;
    }
    .edu-curriculum>li .label{
        order: 1;
    }
    .edu-curriculum>li .edu-curriculum-tit{
        order: 5;
        padding-right: 0;
    }
    .edu-curriculum>li .edu-curriculum-time{
        order: 2;
        padding: 0 1.4rem;
        height: clamp(24px, 2.6rem, 2.6rem);
        font-size: var(--txt-font-size-sm);
        font-weight: 700;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color: #fff;
        border: 1px solid var(--border-color);
        color: var(--grey-darken2);
    }
    .edu-curriculum>li::after{
        content: "";
        display: block;
        flex: 1 1 100%;
        order: 3;
    }
    .edu-detail-info.short{
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
}
@media screen and (max-width: 424px){ 
}

/* filter */
.list-filter-area{
    padding: 3rem;
    border-radius: 3rem;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .15);
    margin-bottom: 4rem;
}
.list-filter-w{
    display: flex;
    flex-wrap: wrap;
    margin: -1rem;
}
.list-filter{
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%
}
.list-filter-4{
    flex: 1 1 calc((100% / 12) * 4);
    width: calc((100% / 12) * 4);
    max-width: calc((100% / 12) * 4);
}
.list-filter-6{
    flex: 1 1 50%;
    width: 50%;
    max-width: 50%;
}
.list-filter-8{
    flex: 1 1 calc((100% / 12) * 8);
    width: calc((100% / 12) * 8);
    max-width: calc((100% / 12) * 8);
}
.list-filter>strong{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: var(--btn-height-xl);
    font-size: var(--txt-font-size);
    font-weight: 700;
    min-width:  8.6rem;
}
.list-filter-contents{
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: calc(100% - 8.6rem);
    min-height: var(--btn-height-xl);
    gap: .8rem;
}
.list-filter-contents>.input-primary{
    flex-basis: 0;
    flex-grow: 1;
}
.list-filter-contents>.btn{
    flex: 0 0 auto;
}
.list-filter-foot{
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
}
.input-period{
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
}
.input-period>.input-primary{
    flex-basis: 0;
    flex-grow: 1;
}
.input-period>.input-primary.pill{
    max-width: 32rem;
}
.input-period>span{
    flex: 0 0 auto;
    display: block;
    font-size: var(--txt-font-size-lg);
}

.fluid-panel{
    width: 100%;
    max-height: var(--btn-height);
    overflow: hidden;
    margin: calc((var(--btn-height-xl) - var(--btn-height)) / 2) 0;
    transition: var(--transition);
}
.fluid-panel-inner{
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0 .8rem;
}
.fluid-panel .fluid-panel-btn{
    opacity: 0;
    visibility: hidden;
    justify-content: space-between;
    min-width: clamp(86px, 12rem, 12rem);
}
.fluid-panel.on .fluid-panel-btn{
    opacity: 1;
    visibility: visible;
}
.fluid-panel.active .fluid-panel-btn>.icon{
    transform: rotate(180deg);
}
.fluid-panel .control-btn-w{
    flex-basis: 0;
    flex-grow: 1;
    max-width: calc(100% - 12.8rem);
}
@media screen and (min-width: 1241px){
    .fluid-panel-btn:hover .icon{
        background-image: url(../images/icon/icon-chevron-down-white.svg);
    }
}
@media screen and (max-width: 1240px){
    .list-filter-4,
    .list-filter-6,
    .list-filter-8{
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
    .list-filter-contents>select.input-primary,
    .input-period{
        max-width: 45rem;
    }
}
@media screen and (max-width: 1028px){
}
@media screen and (max-width: 640px){
    .list-filter-contents>.input-primary,
    .input-period{
        max-width: 100%;
    }
    .input-period{
        flex-wrap: wrap;
    }
    .input-period>.input-primary:last-child{
        flex: 1 1 100%;
    }
    .list-filter{
        display: block;
    }
    .list-filter>strong{
        min-width: 0;
        min-height: 0;
        width: 100%;
        margin-bottom: 1.2rem;
    }
    .list-filter-contents{
        display: block;
        min-height: 0;
        max-width: 100%
    }
    .list-filter-contents>.btn{
        width: 100%;
    }
    .input-period>.input-primary{
        max-width: 100%;
    }
    .list-filter-contents>* + *{
        margin-top: .8rem;
    }
    .fluid-panel .control-btn-w{
        max-width: calc(100% - calc(.8rem + var(--btn-height)));
    }
    .fluid-panel .fluid-panel-btn{
        min-width: var(--btn-height);
        width: var(--btn-height);
    }
    .fluid-panel .fluid-panel-btn>span{
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        border: 0;
    }
    .fluid-panel .fluid-panel-btn>.icon{
        background-image: url(../images/icon/icon-plus-tertiary-dark.svg);
    }
    .fluid-panel.active .fluid-panel-btn>.icon{
        transform: rotate(0);
        background-image: url(../images/icon/icon-minus-tertiary-dark.svg);
    }
}
@media screen and (max-width: 424px){
}

.edu-view{
    display: flex;
    align-items: center;
    gap: 4rem;
}
.edu-view .thumb-size{
    width: 40%;
    max-width: 54rem;
}
.edu-view-contents{
    flex-basis: 0;
    flex-grow: 1;
}
.edu-view-step-w{
    margin-bottom: 2.4rem;
}
.edu-view-step-w>strong{
    font-size: var(--txt-font-size-lg);
    font-weight: 600;
    color: var(--primary-base);
    display: block;
    margin-bottom: .4rem;
}
.edu-view-step{
    display: flex;
    width: fit-content;
    overflow: hidden;
}
.edu-view-step>li{
    flex: 0 0 auto;
    padding: 0 1.6rem;
    border: 1px solid var(--border-color);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: clamp(24px, 3.2rem, 3.2rem);
    background-color: var(--grey-lighten5);
    font-size: var(--txt-font-size-sm);
}
.edu-view-step>li:first-child{
    border-radius: .4rem 0 0 .4rem;
}
.edu-view-step>li:last-child{
    border-radius: 0 .4rem .4rem 0;
}
.edu-view-step>li + li{
    margin-left: -1px;
}
.edu-view-step>li.active{
    z-index: 1;
    border-color: var(--tertiary-darken4);
    background-color: var(--tertiary-darken4);
    color: #fff;
    font-weight: 700;
}
.edu-view-category{
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0 calc(1.6rem + 1px);
    margin-bottom: 1.6rem;
}
.edu-view-category>li{
    position: relative;
    font-size: var(--txt-font-size-lg);
}
.edu-view-category>li:not(:last-child)::before{
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 2rem;
    background-color: var(--border-color);
    top: 50%;
    right: calc(-.8rem - 1px);
    transform: translateY(-50%);
}
.edu-view-contents .edu-view-tit{
    font-size: var(--tit-font-size);
    line-height: 1.2;
}
.edu-view-info{
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.6rem;
    margin-top: 2.4rem;
}
.edu-view-info>li{
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 0 .4rem;
}
.edu-view-info>li.full{
    flex: 1 1 100%;
}
.edu-view-info>li>p{
    font-size: var(--txt-font-size);
    color: var(--grey-base);
}
.edu-view-info>li>p.tertiary-darken4-txt{
    margin-right: .4rem;
    font-weight: 600;
}
.edu-view-btn{
    display: flex;
    gap: 0 1rem;
    padding-top: 2.4rem;
    margin-top: 2.4rem;
    border-top: 1px solid var(--border-color);
}
.edu-view-btn>.btn{
    flex: 1 1 0;
}
.edu-detail .tab-sticky-contents{
    margin-top: -4rem;
}
.edu-detail .tab-sticky-contents>li{
    padding-top: 4rem;
}
@media screen and (min-width: 1241px){
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
    .edu-view{
        display: block;
    }
    .edu-view .thumb-size{
        width: 100%;
        margin: 0 auto 4rem;
    }
    .edu-detail.card{
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }
    .edu-detail .tab-sticky-contents{
        padding: 0 3rem 3rem;
        border-radius: 3rem;
        box-shadow: var(--shadow);
    }
    .edu-detail .tab-sticky-contents>li:first-child{
        padding-top: 3rem;
    }
}
@media screen and (max-width: 640px){
    .edu-view-step{
        width: 100%;
    }
    .edu-view-step>li{
        flex: 1 1 0;
        padding: 0;
    }
    .edu-view-info>li{
        flex: 1 1 100%;
    }
}

/* 역량진단 */
/* S:: 20260522 수정 */
.assessment-step{
    display: flex;
    padding: 1.6rem 2rem;
    border-radius: 3rem 3rem 0 0;
    background-color: var(--tertiary-lighten5);
}
.assessment-step>li{
    display: block;
    flex: 1 1 0;
    position: relative;
    font-size: var(--txt-font-size-lg);
    color: var(--grey-base);
    text-align: center;
}
.assessment-step>li:not(:first-child)::before{
    content: "";
    display: block;
    position: absolute;
    width: var(--btn-height);
    height: var(--btn-height);
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    background-image: url(../images/icon/icon-arrow-right-tertiary-dark.svg);
    background-size: clamp(16px, 2.4rem, 2.4rem) auto;
    background-position: center;
    background-repeat: no-repeat;
}
.assessment-step>li .assessment-step-index{
    width: var(--btn-height);
    height: var(--btn-height);
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid var(--border-color);
    margin: 0 auto 1rem;
    color: var(--grey-base);
    font-weight: 700;
}
.assessment-step>li.done,
.assessment-step>li.active{
    color: var(--tertiary-darken4);
    font-weight: 600;
}
.assessment-step>li.done .assessment-step-index,
.assessment-step>li.active .assessment-step-index{
    border-color: var(--tertiary-darken4);
    background-color: var(--tertiary-darken4);
    color: #fff;
}
.assessment-scale-w{
    border-radius: 0 0 3rem 3rem;
    padding: 0 1.6rem 1rem;
    background-color: var(--tertiary-lighten5);
}
.assessment-scale{
    position: relative;
    max-width: 416px;
    margin: 0 auto;
    display: flex;
    gap: 0 2.4rem;
    padding: 0 10px;
    padding-bottom: calc(.8rem + (var(--txt-font-size-sm) * 1.5));
    position: relative;
}
.assessment-scale::before,
.assessment-scale::after{
    content: "";
    display: block;
    position: absolute;
    width: 3.6rem;
    height: 5.6rem;
    top: calc(50% - ((.8rem + (var(--txt-font-size-sm) * 1.5)) / 2));
    background-repeat: no-repeat;
    background-size: cover;
}
.assessment-scale::before{
    background-image: url(../images/etc/scale-arrow-left.svg);
    background-position: right -2px center;
    left: 1rem;
    transform: translate(-100%, -50%);
}
.assessment-scale::after{
    background-image: url(../images/etc/scale-arrow-right.svg);
    background-position: left -2px center;
    right: 1rem;
    transform: translate(100%, -50%);
}
.assessment-scale>li{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    position: relative;
    height: clamp(20px, 2.8rem, 2.8rem);
}
.assessment-scale>li::before{
    content: "";
    display: block;
    position: absolute;
    width: calc(100% + 3rem);
    height: 100%;
    left: -1.5rem;
    top: 0;
    background-color: var(--primary-base);
    z-index: 0;
}
.assessment-scale>li>.assessment-scale-index{
    width: clamp(16px, 2rem, 2rem);
    height: clamp(16px, 2rem, 2rem);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #fff;
    font-size: var(--txt-font-size-sm);
    font-weight: 700;
    line-height: 1;
    padding-top: 2px;
    color: var(--primary-base);
    position: relative;
    z-index: 1;
}
.assessment-scale>li>p{
    white-space: nowrap;
    position: absolute;
    bottom: -.8rem;
    left: 50%;
    transform: translate(-50%, 100%);
    font-size: var(--txt-font-size-sm);
    color: var(--grey-base);
}
@media screen and (min-width: 1241px){
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
    .assessment-step>li{
        font-size: var(--txt-font-size-lg);
    }
}
@media screen and (max-width: 640px){
    .assessment-step{
        border-radius: 3rem;
        padding: 2rem;
        margin-bottom: 2rem;
    }
    .assessment-step>li{
        flex: 1 1 auto;
        font-size: var(--txt-font-size);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 .8rem;
    }
    .assessment-step>li:not(:first-child)::before{
        display: none;
    }
    .assessment-step>li:not(.active) p{
        display: none;
    }
    .assessment-step>li .assessment-step-index{
        display: flex;
        margin: 0;
        width: clamp(22px, 3.2rem, 3.2rem);
        height: clamp(22px, 3.2rem, 3.2rem);;
    }
    .assessment-step>li:not(.active) .assessment-step-index{
        margin: 0 auto;
    }
    .assessment-scale-w{
        border-radius: 3rem;
        padding: 2rem 5rem 1rem;
    }
}
/* E:: 20260522 수정 */

.assessment-state{
    display: flex;
    align-items: center;
    gap: 1.6rem 2rem;
    padding-bottom: 1.6rem;
    margin-bottom: 2.4rem;
    border-bottom: 1px solid var(--border-color);
}
.assessment-state.center{
    justify-content: center;
    padding-bottom: 0;
    margin-bottom: 4rem;
    border-bottom: 0;
}
.assessment-state>.icon{
    flex: 0 0 auto;
    min-width: 8rem;
}
.assessment-state .assessment-state-contents{
    flex-basis: 0;
    flex-grow: 1;
}
.assessment-state .assessment-state-contents>p{
    margin-bottom: .8rem;
}
.assessment-state .assessment-state-step{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
}
.assessment-state .assessment-state-step>li{
    display: block;
    font-size: var(--tit-font-size-sm);
    font-weight: 700;
    color: var(--primary-base);
}
@media screen and (min-width: 1241px){
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
    #post-assessment-modal .info-box{
        text-align: center;
    }
}  
@media screen and (max-width: 640px){
    .assessment-state.center{
        flex-direction: column;
        text-align: center;
    }
}
@media screen and (max-width: 424px){ 
}

.assessment-list{
    display: flex;
    flex-wrap: wrap;
    margin: -1rem;
}
.assessment-list>li{
    flex: 1 1 25%;
    width: 25%;
    max-width: 25%;
    padding: 1rem;
}
.assessment-item{
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .15);
}
.assessment-item-contents{
    padding: 2rem 2rem 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.assessment-item-contents .label-w{
    width: 100%;
    margin-bottom: 1.4rem;
}
.assessment-item-contents .assessment-item-tit{
    display: block;
    font-size: var(--tit-font-size);
    height: calc(var(--tit-font-size) * 3);
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.assessment-item-info{
    width: fit-content;
    display: block;
    margin-top: .8rem;
}
.assessment-item-info>li{
    display: flex;
    align-items: center;
    gap: 0 .4rem;
}
.assessment-item-info>li + li{
    margin-top: .8rem;
}
.assessment-item-info>li .icon{
    width: clamp(16px, 2rem, 2rem);
    height: clamp(16px, 2rem, 2rem);
    min-width: clamp(16px, 2rem, 2rem);
}
.assessment-item-info>li p{
    font-size: var(--txt-font-size-sm);
    color: var(--grey-base);
}
.assessment-item-info>li p.tertiary-darken4-txt{
    font-weight: 600;
    margin-right: .4rem;
}
.assessment-item>.btn{
    border-radius: 0;
}
@media screen and (min-width: 1241px){
}
@media screen and (max-width: 1240px){
    .assessment-list>li{
        flex: 1 1 50%;
        width: 50%;
        max-width: 50%;
    }
}
@media screen and (max-width: 1028px){
}  
@media screen and (max-width: 640px){
    .assessment-list>li{
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
}
@media screen and (max-width: 424px){ 
}

.assessment-result-step-head{
    display: flex;
    padding-left: 7.6rem;
    margin-bottom: 1.4rem;
}
.assessment-result-step-head>li{
    flex: 1 1 0;
    text-align: center;
    font-size: var(--txt-font-size);
}
.assessment-result-step{
    display: flex;
    align-items: center;
}
.assessment-result-step + .assessment-result-step{
    margin-top: 1.6rem;
}
.assessment-result-step>strong{
    flex: 0 0 auto;
    display: block;
    min-width: 7.6rem;
    font-size: var(--txt-font-size-lg);
    color: var(--grey-darken2);
}
.assessment-result-step .progress{
    flex-basis: 0;
    flex-grow: 1;
    max-width: calc(100% - 7.6rem);
    height: clamp(26px, 4rem, 4rem);;
}
.assessment-result-step .progress-inner{
    padding-right: 1.6rem;
    font-size: var(--txt-font-size);
    font-weight: 700;
    text-align: right;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.assessment-result-step.post .progress-inner{
    background-color: var(--tertiary-darken4);
}
.assessment-result-step .progress.assessment-result-1 .progress-inner{
    width: 20%;
}
.assessment-result-step .progress.assessment-result-2 .progress-inner{
    width: 40%;
}
.assessment-result-step .progress.assessment-result-3 .progress-inner{
    width: 60%;
}
.assessment-result-step .progress.assessment-result-4 .progress-inner{
    width: 80%;
}
.assessment-result-step .progress.assessment-result-5 .progress-inner{
    width: 100%;
}
.assessment-result-txt{
    margin-top: 2.4rem;
    text-align: center;
}
.assessment-result-txt>p{
    font-size: var(--txt-font-size);
    color: var(--grey-darken2);
}
.assessment-result-txt>p + p{
    margin-top: .8rem;
}
@media screen and (min-width: 1241px){
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
}  
@media screen and (max-width: 640px){
    .assessment-result-step-head{
        padding-left: 0;
    }
    .assessment-result-step{
        display: block;
    }
    .assessment-result-step>strong{
        min-width: 0;
        margin-bottom: .8rem;
    }
    .assessment-result-step .progress{
        max-width: 100%;
    }
}
@media screen and (max-width: 424px){ 
}

/* 강의실 */
main.classroom-area{
    --container: 1200px;
    background-color: #F9F9FA;
    padding: 8rem 0;
    min-height: var(--view-height);
}
.classroom-head{
    margin-bottom: 4rem;
}
.classroom-head .label-w{
    margin-bottom: .8rem;
}
.classroom-head .classroom-head-tit{
    display: flex;
    align-items: center;
    gap: 0 1.6rem;
}
.classroom-head .classroom-head-tit h1{
    flex-basis: 0;
    flex-grow: 1;
    font-size: var(--tit-font-size);
    font-weight: 700;
}
.classroom-head .classroom-head-tit .btn{
    flex: 0 0 auto;
    min-width: 12rem;
}
.classroom-head .tab-primary{
    margin-bottom: 0;
    margin-top: 2rem;
}
.classroom-state-w{
    padding: 3rem;
    border-radius: 3rem;
    gap: 0 8rem;
    background-color: var(--indigo-lighten5);
    display: flex;
    justify-content: center;
}
.classroom-state{
    flex: 1 1 0;
    display: flex;
    align-items: center;
    max-width: 326px;
    gap: 0 4rem;
}
.classroom-state .classroom-state-contents{
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
}
.classroom-state .classroom-state-contents>p{
    font-size: var(--txt-font-size);
    font-weight: 700;
    color: var(--grey-darken2);
}
.classroom-state .classroom-state-contents>strong{
    margin-top: 4px;
    font-size: var(--tit-font-size);
    font-weight: 700;
    color: var(--indigo-base);
}
.classroom-state .graph{
    flex: 0 0 auto;
}
.classroom-survey{
    display: block;
}
.classroom-survey>li{
    display: block;
}
.classroom-survey>li + li{
    margin-top: 2rem;
}
.classroom-survey-item{
    border-radius: 2rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: .8rem 0;
    padding: 1.2rem 2rem 1.2rem 12.4rem;
    position: relative;
}
.classroom-survey-item .classroom-survey-index{
    position: absolute;
    top: 0;
    left: 0;
    width: 10.4rem;
    min-width: 10.4rem;
    height: 100%;
    border-right: 1px solid var(--border-color);
    background-color: var(--tertiary-lighten4);
    color: var(--tertiary-darken4);
    font-weight: 600;
    font-size: var(--txt-font-size-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.classroom-survey-item .label{
    position: absolute;
    left: 12.4rem;
    top: 1.2rem;
}
.classroom-survey-item .classroom-survey-tit{
    flex-basis: 0;
    flex-grow: 1;
    margin-top: 3rem;
    display: flex;
    align-items: center;
    gap: 0 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    width: fit-content;
    max-width: calc(100% - 25.2rem);
}
.classroom-survey-item .classroom-survey-tit>p{
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
    max-width: calc(100% - clamp(16px, 2.4rem, 2.4rem) - 4px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    transition: var(--transition);
}
.classroom-survey-item .classroom-survey-tit>.icon{
    min-width: clamp(16px, 2.4rem, 2.4rem);
}
.classroom-survey-item .classroom-survey-period{
    flex: 0 0 auto;
    font-size: var(--txt-font-size-sm);
    display: flex;
    justify-content: flex-end;
    gap: 0 .8rem;
    min-width: 25.2rem;
}
.classroom-survey-item .classroom-survey-period>p{
    font-weight: 600;
    color: var(--tertiary-darken4);
}
.classroom-survey-item .classroom-survey-period>span{
    color: var(--grey-base);
    display: block;
}

@media screen and (min-width: 1241px){
    .classroom-survey-item:hover .classroom-survey-tit>p{
        color: var(--primary-base);
    }
}
@media screen and (max-width: 1240px){
    .classroom-state-w{
        gap: 0 4rem;
    }
    .classroom-state{
        gap: 0 2.4rem;
    }
}
@media screen and (max-width: 1028px){
    .classroom-survey-item{
        flex-wrap: wrap;
    } 
    .classroom-survey-item .classroom-survey-tit{
        flex: 1 1 100%;
        max-width: 100%;
    }
    .classroom-survey-item .classroom-survey-period{
        flex: 1 1 100%;
        min-width: 0;
        justify-content: flex-start;
    }
}  
@media screen and (max-width: 640px){
    .classroom-state-w{
        display: block;
    }
    .classroom-state{
        display: flex;
        margin: 0 auto;
    }
    .classroom-state + .classroom-state{
        margin-top: 4rem;
    }
    .classroom-state .classroom-state-contents{
        text-align: left;
    }

    .classroom-survey-item{
        padding: 2rem;
        gap: .8rem;
    }
    .classroom-survey-item .classroom-survey-index{
        order: 3;
        position: static;
        width: calc(var(--txt-font-size-lg) * 2);
        min-width: calc(var(--txt-font-size-lg) * 2);
        text-align: center;
        height: auto;
        border: 0;
        background-color: transparent;
        display: block;
        text-align: center;
    }
    .classroom-survey-item .label{
        position: static;
        order: 1;
        margin-bottom: -.8rem;
    }
    .classroom-survey-item .classroom-survey-tit{
        order: 4;
        flex-basis: 0;
        flex-grow: 1;
        max-width: calc(100% - (var(--txt-font-size-lg) * 2) - .8rem);
        margin-top: 0;
    }
    .classroom-survey-item .classroom-survey-period{
        order: 5;
    }
    .classroom-survey-item::after{
        content: "";
        display: block;
        flex: 1 1 100%;
        order: 2;
    }
}
@media screen and (max-width: 424px){ 
}

.edu-player-area{
    overflow: hidden;
    padding: 2rem;
    margin: -2rem;
    position: relative;
    transition: var(--transition);
}
.edu-player-w{
    width: 100%;
}
.edu-player{
    position: relative;
}
.edu-player video{
    width: 100%;
}
.edu-player-contents{
    margin-top: 2.4rem;
}
.edu-player-contents strong{
    display: block;
    font-size: var(--tit-font-size-sm);
}
.edu-player-contents p{
    font-size: var(--txt-font-size);
    color: var(--grey-base);
    margin-top: .8rem;
}
.edu-player-contents .bottom-btn{
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}
.edu-player-info{
    width: 100%;
    height: 320px;
    margin-top: 4rem;
    transition: var(--transition);
}
.edu-player-info_inner{
    height: 100%;
    position: relative;
}
.edu-player-info .tab-wrap{
    height: 100%;
}
.edu-player-info .tab-contents{
    height: calc(100% - 4.8rem);
    padding-right: 4px;
    margin-right: -4px;
    overflow-x: hidden;
    overflow-y: auto;
}
.edu-player-info .tab-contents::-webkit-scrollbar{
    width: 4px;
}
.edu-player-info .tab-contents::-webkit-scrollbar-track{
    background-color: var(--grey-lighten4);
    border-radius: 999px;
}
.edu-player-info .tab-contents::-webkit-scrollbar-thumb{ 
    background-color: var(--secondary-base);
    border-radius: 999px;
}
.edu-player-info .tab-contents::-webkit-scrollbar-button{
    display: none;
}
.edu-player-curriculum{
    display: block;
    border: 1px solid var(--border-color);
    border-radius: .8rem;
    overflow: hidden;
}
.edu-player-curriculum>li{
    display: block;
    padding: 1.6rem;
}
.edu-player-curriculum>li.active{
    background-color: var(--secondary-lighten5);
}
.edu-player-curriculum>li + li{
    border-top: 1px solid var(--border-color);
}
.edu-player-curriculum>li .label{
    margin-bottom: .8rem;
    font-size: clamp(10px, 1.2rem, 1.2rem);
    height: clamp(18px, 2.4rem, 2.4rem);
    padding: 0 1rem;
}
.edu-player-curriculum>li a{
    display: block;
    font-size: var(--txt-font-size-sm);
    color: var(--grey-darken2);
    transition: var(--transition);
}
.edu-player-curriculum>li a::after{
    content: "";
    display: inline-block;
    width: clamp(12px, 1.6rem, 1.6rem);
    height: clamp(12px, 1.6rem, 1.6rem);
    margin-left: 4px;
    background-image: url(../images/icon/icon-play-circle-grey.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    vertical-align: middle;
}
.edu-player-curriculum>li.active a::after{
    background-image: url(../images/icon/icon-play-circle-tertiary-dark.svg);
}
.edu-player-info-txt{
    padding-bottom: .8rem;
    margin-bottom: 1.2rem;
    font-size: var(--txt-font-size-sm);
    color: var(--grey-darken2);
    border-bottom: 1px solid var(--border-color);
}
.edu-player-info table{
    --btn-height: clamp(18px, 2.4rem, 2.4rem);
    --btn-padding: 0 1rem;
    --btn-font-size: clamp(10px, 1.2rem, 1.2rem);
    --input-height: clamp(26px, 3.4rem, 3.4rem);
    --input-font-size: var(--txt-font-size-sm);
    --input-border-radius: .4rem;
    --input-padding: 1rem;
    width: 100%;
    table-layout: fixed;
    border: 1px solid var(--border-color);
    border-radius: .8rem;
    overflow: hidden;
    background-color: #fff;
    border-collapse: separate;
    border-spacing: 0;
}
.edu-player-info table th,
.edu-player-info table td{
    text-align: center;
    font-size: var(--txt-font-size-sm);
}
.edu-player-info table th{
    padding: 0 1rem;
    height: clamp(28px, 4.2rem, 4.2rem);
}
.edu-player-info table td{
    padding: 1rem .8rem;
    border-top: 1px solid var(--border-color);
    color: var(--grey-darken2);
}
.edu-player-info table td.txt-left{
    text-align: left;
}
.edu-player-info table .btn{
    border-radius: .4rem;
}
.edu-player-bookmark-btn-w{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 .8rem;
}
.edu-player-bookmark-btn{
    display: flex;
    gap: 0 .4rem;
}
.edu-player-bookmark-info{
    position: relative;
}
.edu-player-bookmark-info .edu-player-bookmark-delete{
    width: clamp(10px, 1.6rem, 1.6rem);
    height: clamp(10px, 1.6rem, 1.6rem);
    border-radius: 50%;
    background-image: url(../images/icon/icon-minus-circle-danger.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
}
.edu-player-info-index{
    font-size: var(--txt-font-size-sm);
    color: var(--grey-darken2);
    transition: var(--transition);
}

@media screen and (min-width: 1029px){
    .edu-player .player-info-open{
        position: absolute;
        top: 2rem;
        right: 2rem;
        z-index: 5;
        transition: var(--transition);
    }
    .edu-player-info{
        width: 38rem;
        height: calc(100% - 4rem);
        position: absolute;
        top: 2rem;
        right: 2rem;
        z-index: 5;    
        margin-top: 0;
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
    }
    .edu-player-info_inner .player-info-close{
        position: absolute;
        left: -3rem;
        top: 3rem;
        z-index: 3;
        width: 2.8rem;
        height: auto;
        transform: translateX(-100%);
        writing-mode: vertical-rl;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border: 0;
        padding: 1.6rem 0;
        font-size: var(--txt-font-size-sm);
    }
    .edu-player-area.active{
        padding-right: 44rem;
    }
    .edu-player-area.active .edu-player-info{
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }
    .edu-player-area.active .edu-player .player-info-open{
        opacity: 0;
        visibility: hidden;
    }
}
@media screen and (min-width: 1241px){
    .edu-player-info-index:hover{
        color: var(--primary-base);
    }
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
    .edu-player .player-info-open,
    .edu-player-info_inner .player-info-close{
        display: none;
    }
}  
@media screen and (max-width: 640px){
}
@media screen and (max-width: 424px){ 
}

/* 소통·참여 */
.panel-list.faq .panel-head::after{
    top: unset;
    bottom: 2rem;
    transform: rotate(0);
    height: calc(var(--txt-font-size) * 1.5);
    background-size: contain;
}
.panel-list.faq .faq-category{
    font-size: var(--txt-font-size-sm);
    font-weight: 600;
    color: var(--tertiary-darken4);
    margin-bottom: .8rem;
}
.panel-list.faq .faq-tit-w{
    display: flex;
    align-items: flex-start;
    gap: 0 4px;
}
.panel-list.faq .faq-index{
    min-width: clamp(34px, 4.4rem, 4.4rem);
    display: block;
    font-size: var(--txt-font-size-lg);
    font-width: 700;
    text-align: center;
}
.panel-list.faq .faq-tit{
    padding-top: calc(((var(--txt-font-size-lg) * 1.5) / 2) - ((var(--txt-font-size) * 1.5) / 2));
    font-size: var(--txt-font-size);
    font-weight: 700;
    color: var(--grey-darken2);
    display: block;
}
.panel-list.faq .panel-body-inner{
    padding: 0 2rem 2rem 2rem;
}
.panel-list.faq .faq-contents{
    border-radius: 1.5rem;
    padding: 2rem;
    background-color: var(--tertiary-lighten5);
    font-size: var(--txt-font-size-sm);
    color: var(--grey-darken2);
}
.panel-list.faq>li.active .panel-head::after{
    transform: rotate(-180deg);
}
.panel-list.faq>li.active .panel-head{
    background-color: #fff;
    box-shadow: none;
}
.panel-list.faq>li.active .faq-tit{
    color: var(--primary-base);
    text-decoration: underline;
}

.event-result-tit{
    text-align: center;
    font-size: var(--tit-font-size-sm);
    font-weight: 700;
    margin-bottom: 2.4rem;
    color: var(--grey-darken2);
}
.event-result img{
    display: block;
    margin: 0 auto;
}

/* S:: 20260527 수정 */
.event-img-w{
    width: 33rem;
    margin: 0 auto;
    position: relative;
}
.event-img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
}
.event-img>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* E:: 20260527 수정 */

/* 당첨 팝업: 기본/경품 이미지를 원형 영역 안에 맞춤 */
.event-winning-img-frame{
    position : relative;
    width: clamp(16rem, 40vw, 24rem);
    height: clamp(16rem, 40vw, 24rem);
    max-width: 100%;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
}
.event-winning-img-frame .event-winning-img-base{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}
.event-winning-img-frame .event-winning-prize-img{
    position: absolute;
    left:50%;
    top:40%;
    transform: translate(-50%,-50%);
    width: 56%;
    height: 56%;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    z-index: 2;
    box-shadow: 0 0 0 .4rem rgba(255,255,255, 45);
}
/* 당첨 팝업: 사용자 등록 이미지(custom) — 450×240, 둥근 사각형 */
.event-winning-img-frame.event-winning-img-frame--custom{
    width: min(45rem, 100%);
    height: 24rem;
    border-radius: 1.2rem;
}
.event-winning-img-frame.event-winning-img-frame--custom .event-winning-prize-img{
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: inherit;
    object-fit: cover;
    box-shadow: none;
}
/***************/
.event-result-info{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem 10.5rem;
    padding: 2rem;
    border-radius: 2rem;
    background-color: var(--tertiary-lighten5);
    margin-bottom: 2.4rem;
}
.event-result-info>li{
    display: flex;
    align-items: center;
    gap: 0 .8rem;
}
.event-result-info>li>strong{
    width: clamp(72px, 8.8rem, 8.8rem);
    height: clamp(26px, 3.4rem, 3.4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--tertiary-darken4);
    color: #fff;
    font-size: var(--txt-font-size);
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
}
.event-result-info>li>{
    font-size: var(--txt-font-size);
    color: var(--grey-darken2);
}

.event-agreement-w{
    border-radius: 2rem;
    padding: 2rem;
    border: 1px solid var(--border-color);
}
.event-agreement{
    margin-top: 2.4rem;
}
.event-agreement .event-agreement-head{
    margin-bottom: 1.6rem;
}
.event-agreement-head .event-agreement-tit{
    font-size: var(--txt-font-size-lg);
    font-weight: 500;
}
.event-agreement-foot{
    margin-top: .8rem;
}
.event-agreement-foot .control-w{
    padding: 1.2rem;
    justify-content: flex-end;
}

.survey-done{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
    padding: 3.2rem 0;
}
.survey-done p{
    font-size: var(--tit-font-size-sm);
    font-weight: 700;
    color: var(--tertiary-darken4);
}
@media (min-width: 1241px){
    .panel-list.faq>li .panel-head:hover{
        background-color: #fff;
    }
    .panel-list.faq>li .panel-head:hover .faq-tit{
        color: var(--primary-base);
        text-decoration: underline;
    }
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1240px){
    .event-result-info{
        gap: 2rem 4rem;
    }
}
@media screen and (max-width: 1028px){
    .event-result-info{
        display: block;
    }
    .event-result-info>li{
        width: 100%;
    }
    .event-result-info>li + li{
        margin-top: 2rem;
    }
}  
@media screen and (max-width: 640px){
    .survey-done{
        flex-direction: column;
        text-align: center;
    }
}
@media screen and (max-width: 424px){ 
}

/* my 자산관리 */
.dashboard-area{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
.dashboard-area>*{
    flex: 1 1 100%;
}
.dashboard-area>*.short{
    flex: 0 0 auto;
    width: 30%;
    max-width: 40rem;
}
.dashboard-area>*.long{
    flex-basis: 0;
    flex-grow: 1;
    min-width: calc(70% - 2rem);
}
.dashboard-area .progress{
    height: clamp(26px, 4rem, 4rem);
}
.dashboard-info-head{
    display: flex;
    align-items: center;
    gap: 1.2rem .8rem;
    margin-bottom: 1.6rem;
}
.dashboard-info-head>strong{
    display: block;
    font-size: var(--txt-font-size-lg);
    color: var(--grey-darken2);
    flex-basis: 0;
    flex-grow: 1;
}
.dashboard-info-head .dashboard-info{
    display: flex;
    gap: calc(1.6rem + 1px);
}
.dashboard-info-head .dashboard-info>li{
    flex: 0 0 auto;
    display: block;
    font-size: var(--txt-font-size);
    color: var(--grey-darken2);
    line-height: 1.2;
    position: relative;
}
.dashboard-info-head .dashboard-info>li:not(:first-child)::before{
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 2rem;
    background-color: var(--border-color);
    top: 50%;
    left: calc(-.8rem - 1px);
    transform: translateY(-50%);
}

.savings-status-w{
    display: flex;
    gap: 1.6rem;
}
.savings-status-w>li{
    flex: 1 1 0;
}
.savings-status-w>li .savings-status{
    display: block;
    border-radius: 1.5rem;
    padding: 1.8rem;
    background-color: var(--grey-lighten5);
    width: 100%;
    height: 100%;
    text-align: left;
    border: 2px solid transparent;
    position: relative;
    transition: var(--transition);
}
.savings-status-w>li .savings-status>strong{
    font-size: var(--tit-font-size-sm);
    font-weight: 700;
    display: block;
    color: var(--tertiary-darken4);
    margin-bottom: .8rem;
}
.savings-status-w>li .savings-status>p{
    font-size: var(--txt-font-size);
    font-weight: 500;
    color: var(--grey-darken2);
}
.savings-status-w>li .savings-status>.label{
    position: absolute;
    top: 2.3rem;
    right: 1.8rem;
}
.savings-status-w>li .savings-status.overdue{
    box-shadow: 0 .4rem .4rem rgba(0, 0, 0, .25);
    position: relative;
}
.savings-status-w>li .savings-status.overdue::after{
    content: "";
    display: block;
    position: absolute;
    width: clamp(32px, 4.8rem, 4.8rem);
    height: clamp(32px, 4.8rem, 4.8rem);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 2rem;
    right: 2rem;
}
.savings-status-w>li .savings-status.overdue.danger{
    background-color: var(--danger-lighten4);
}
.savings-status-w>li .savings-status.overdue.danger>strong{
    color: var(--danger-darken1);
}
.savings-status-w>li .savings-status.overdue.danger::after{
    background-image: url(../images/icon/icon-warning-danger.svg);
}
.savings-status-w>li .savings-status.overdue.warning{
    background-color: var(--warning-lighten5);
}
.savings-status-w>li .savings-status.overdue.warning>strong{
    color: var(--warning-darken1);
}
.savings-status-w>li .savings-status.overdue.warning::after{
    background-image: url(../images/icon/icon-warning-warning.svg);
}
.savings-status-w>li .savings-status.overdue.success{
    background-color: var(--success-lighten5);
}
.savings-status-w>li .savings-status.overdue.success>strong{
    color: var(--success-base);
}
.savings-status-w>li .savings-status.overdue.success::after{
    background-image: url(../images/icon/icon-warning-success.svg);
}

.savings-suspended-w{
    display: flex;
    flex-direction: column;
    gap: 2rem 0;
}
.savings-suspended{
    flex: 0 0 auto;
    width: 100%;
}
.savings-suspended-info{
    display: block;
}
.savings-suspended-info>li{
    display: flex;
    align-items: flex-start;
}
.savings-suspended-info>li + li{
    margin-top: 2.4rem;
}
.savings-suspended-info>li>strong{
    display: block;
    min-width: clamp(88px, 10.8rem, 10.8rem);
    font-size: var(--txt-font-size);
    color: var(--grey-darken2);
    font-weight: 600;
}
.savings-suspended-info>li .savings-suspended-info-contents>p{
    font-size: var(--txt-font-size);
    color: var(--grey-base);
    line-height: 1.2;
    font-weight: 600;
}
.savings-suspended-info>li .savings-suspended-info-contents>p .under-yellow{
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
    color: var(--tertiary-darken4);
}
.savings-suspended-info>li .savings-suspended-info-contents>span{
    display: block;
    font-size: var(--txt-font-size-sm);
    color: var(--grey-base);
    margin-top: 4px;
}
.savings-suspended-summary.card{
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding: 2rem 1.2rem;
    gap: 0 calc(3.2rem + 1px);
    text-align: center;
}
.savings-suspended-summary>li{
    flex: 1 1 0;
    display: block;
    position: relative;
}
.savings-suspended-summary>li:not(:first-child)::after{
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: var(--border-color);
    left: calc(-1.6rem - 1px);
    top: 0;
}
.savings-suspended-summary>li>strong{
    font-size: var(--txt-font-size);
    color: var(--grey-darken2);
    font-weight: 500;
}
.savings-suspended-summary>li>p{
    margin-top: .8rem;
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
    color: var(--tertiary-darken4);
}
.dashboard-activity{
    display: flex;
    gap: 0 1.6rem;
}
.dashboard-activity>li{
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 2rem;
}
.dashboard-activity>li>.icon{
    min-width: 10rem;
}
.dashboard-activity>li .dashboard-activity-contents{
    min-width: 7.2rem;
}
.dashboard-activity>li .dashboard-activity-contents>strong{
    font-size: var(--txt-font-size);
    font-weight: 500;
    color: var(--grey-darken2);
}
.dashboard-activity>li .dashboard-activity-contents>p{
    font-size: var(--tit-font-size-sm);
    font-weight: 700;
    color: var(--primary-base);
}
.edu-status{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
    text-align: center;
}
.edu-status .edu-status-contents>strong{
    font-size: var(--txt-font-size);
    font-weight: 500;
    color: var(--grey-darken2);
}
.edu-status .edu-status-contents>p{
    font-size: var(--txt-font-size);
    font-weight: 600;
    color: var(--grey-base);
    line-height: 1.2;
    margin-top: .8rem;
}
.edu-status .edu-status-contents>p>span{
    color: var(--indigo-base);
    font-size: var(--tit-font-size-sm);
    font-weight: 700;
}
.edu-status-graph{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 10rem;
    min-width: 10rem;
    height: 10rem;
    border-radius: 50%;
    border: 2px solid var(--indigo-base);
    overflow: hidden;
    position: relative;
}
.edu-status-graph .edu-status-graph-txt{
    color: var(--indigo-base);
    font-size: var(--tit-font-size-sm);
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.edu-status-graph .edu-status-graph-inner{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom, #fff, #B692E6);
}
.account-list{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
.account-list>li{
    flex: 1 1 calc(50% - 1rem);
    width: calc(50% - 1rem);
    max-width: calc(50% - 1rem);
    display: block;
    padding: 2rem;
    border-radius: 2rem;
    border: 1px solid var(--border-color);
}
.account-info-w{
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.account-info-w .account-info{
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    gap: 0 2rem;
}
.account-info-w .account-info>li{
    display: flex;
    align-items: center;
    gap: 0 .8rem;
}
.account-info-w .account-info>li>strong{
    font-size: var(--txt-font-size);
    font-weight: 500;
    color: var(--grey-darken2);
}
.account-info-w .account-info>li>p{
    font-size: var(--tit-font-size-sm);
    font-weight: 700;
    color: var(--tertiary-darken4);
}
@media (min-width: 1241px){
    .savings-status-w>li button.savings-status:hover{
        background-color: var(--tertiary-lighten4);
        border-color: var(--tertiary-darken4);
    }
    .savings-status-w>li button.savings-status:hover>strong{
        text-decoration: underline;
    }
}
@media screen and (max-width: 1439px){
    .savings-status-w>li .savings-status>.label{
        top: unset;
        bottom: 1.8rem;
        padding: 1rem;
        font-size: 12px;
    }
}
@media screen and (max-width: 1240px){
    .dashboard-area>*.short{
        flex: 1 1 0;
        width: calc(50% - 1rem);
        max-width: 100%;
        order: -1;
    }
    .dashboard-area>*.long{
        flex: 1 1 100%;
        min-width: 0;
        order: -2;
    }
    .dashboard-info-head{
        flex-wrap: wrap;
    }
    .dashboard-info-head .dashboard-info{
        flex: 1 1 100%;
        justify-content: flex-end;
    }
    .savings-status-w>li button.savings-status{
        background-color: var(--tertiary-lighten4);
        border-color: var(--tertiary-darken4);
    }
    .savings-status-w>li button.savings-status>strong{
        text-decoration: underline;
    }
    .savings-status-w>li .savings-status>.label{
        display: none;
    }
    .savings-suspended-w{
        display: block;
    }
    .savings-suspended-summary.card{
        gap: 0;
        margin-top: 2rem;
    }
    .savings-suspended-summary>li:not(:first-child)::after{
        left: 0;
    }
    .edu-status{
        height: calc(100% - 6.1rem);
    }
    .account-info-w{
        display: block;
    }
    .account-info-w>.btn{
        width: 100%;
        margin-top: 1.2rem;
    }
}
@media screen and (max-width: 1028px){
    .edu-status{
        flex-direction: column;
    }
    .account-info-w .account-info{
        display: block;
    }
    .account-info-w .account-info>li + li{
        margin-top: .8rem;
    }
}  
@media screen and (max-width: 640px){
    .dashboard-area>*.short{
        flex: 1 1 100%;
        width: 100%;
        order: unset;
    }
    .dashboard-area>*.long{
        order: unset;
    }
    .savings-status-w{
        flex-wrap: wrap;
    }
    .savings-status-w>li{
        flex: 1 1 100%;
    }
    .savings-status-w>li .savings-status{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0 1.6rem;
    }
    .savings-status-w>li .savings-status>strong{
        margin-bottom: 0;
    }
    .savings-status-w>li .savings-status.overdue{
        padding-left: 6.8rem;
    }
    .savings-status-w>li .savings-status.overdue::after{
        bottom: unset;
        top: 50%;
        right: unset;
        left: 2rem;
        transform: translateY(-50%);
        width: 4rem;
        height: 4rem;
    }
    .savings-suspended-summary.card{
        padding: 2rem;
    }
    .dashboard-activity{
        gap: 0;
    }
    .dashboard-activity>li{
        flex-direction: column;
    }
    .dashboard-activity>li .dashboard-activity-contents{
        min-width: 0;
        text-align: center;
    }
    .edu-status{
        height: auto;
        flex-direction: row;
    }
    .account-list>li{
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
    .account-info-w .account-info{
        display: flex;
        flex-wrap: wrap;
        gap: .8rem 2rem;
    }
    .account-info-w .account-info>li + li{
        margin-top: 0;
    }
}
@media screen and (max-width: 424px){ 
}
@media screen and (max-width: 374px){ 
    .account-info-w .account-info>li{
        flex: 1 1 100%;
    }
}

.savings-status-info{
    display: flex;
    gap: .8rem 2rem;
    padding: 3rem;
    border-radius: 2rem;
    background-color: var(--tertiary-lighten5);
    margin-bottom: 4rem;
}
.savings-status-info>li{
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 .8rem;
}
.savings-status-info>li>strong{
    display: block;
    font-size: var(--txt-font-size);
    font-weight: 500;
    color: var(--grey-base);
}
.savings-status-info>li>p{
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
    color: var(--tertiary-darken4);
}
.savings-status-list{
    display: flex;
    gap: 0 1.6rem;
}
.savings-status-list>li{
    flex: 1 1 0;
    display: block;
    padding: 2rem 0;
    text-align: center;
}
.savings-status-list>li .savings-status-display-w{
    width: 100%;
    max-width: 28.8rem;
    margin: 0 auto .8rem;
}
.savings-status-list>li .savings-status-display{
    width: 100%;
    height: 0;
    padding-top: calc((194 / 288) * 100%);
    background-image: url(../images/etc/savings-status0.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.savings-status-list>li .savings-status-display-1{
    background-image: url(../images/etc/savings-status1.png);
}
.savings-status-list>li .savings-status-display-2{
    background-image: url(../images/etc/savings-status2.png);
}
.savings-status-list>li .savings-status-display-3{
    background-image: url(../images/etc/savings-status3.png);
}
.savings-status-list>li .savings-status-display-4{
    background-image: url(../images/etc/savings-status4.png);
}
.savings-status-list>li .savings-status-display-5{
    background-image: url(../images/etc/savings-status5.png);
}
.savings-status-list>li .savings-status-display-6{
    background-image: url(../images/etc/savings-status6.png);
}
.savings-status-list>li .savings-status-display-7{
    background-image: url(../images/etc/savings-status7.png);
}
.savings-status-list>li .savings-status-display-8{
    background-image: url(../images/etc/savings-status8.png);
}
.savings-status-list>li .savings-status-display-9{
    background-image: url(../images/etc/savings-status9.png);
}
.savings-status-list>li .savings-status-display-10{
    background-image: url(../images/etc/savings-status10.png);
}
.savings-status-list>li>strong{
    display: block;
    font-size: var(--tit-font-size-sm);
    font-weight: 700;
    color: var(--primary-base);
}
.savings-status-list>li>p{
    font-size: var(--txt-font-size-lg);
    font-weight: 600;
    margin-top: .8rem;
}
@media (min-width: 1241px){
}
@media screen and (max-width: 1240px){
    .savings-status-info{
        flex-wrap: wrap;
    }
    .savings-status-info>li{
        flex: 1 1 auto;
    }
}
@media screen and (max-width: 1028px){
    .savings-status-info>li{
        flex: 1 1 calc(50% - 1rem);
        width: calc(50% - 1rem);
        max-width: calc(50% - 1rem);
        justify-content: flex-start;
    }
}  
@media screen and (max-width: 640px){
    .savings-status-info>li{
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
}
@media screen and (max-width: 424px){ 
}

.savings-check-w{
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}
.savings-check-w .savings-check{
    flex: 1 1 calc((100% - 4rem) / 6);
    width: calc((100% - 4rem) / 6);
    max-width: calc((100% - 4rem) / 6);
    position: relative;
    padding: calc(3.8rem + clamp(20px, 2.8rem, 2.8rem)) 1.8rem 1.8rem;
    border-radius: 2rem;
    border: 2px solid transparent;
    background-color: #fff;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .15);
    text-align: center;
    transition: var(--transition);
}
.savings-check::before{
    content: "";
    display: block;
    position: absolute;
    width: clamp(20px, 2.8rem, 2.8rem);
    height: clamp(20px, 2.8rem, 2.8rem);
    top: 1.8rem;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../images/icon/icon-check2.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.savings-check .savings-check-tit{
    display: block;
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
    color: var(--grey-darken2);
    transition: var(--transition);
}
.savings-check .savings-check-index{
    font-size: var(--txt-font-size-sm);
    color: var(--grey-base);
    font-weight: 500;
}
.savings-check .savings-check-data{
    margin-top: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: clamp(26px, 3.4rem, 3.4rem);
    border-radius: 999px;
    background-color: var(--grey-lighten3);
    color: var(--grey-base);
    font-size: var(--txt-font-size);
    font-weight: 700;
    transition: var(--transition);
}
.savings-check .savings-check-info-w{
    margin-top: 2rem;
    text-align: left;
    display: block;
}
.savings-check .savings-check-info-w>li{
    display: block;
    font-size: var(--txt-font-size);
    color: var(--grey-darken2);
}
.savings-check .savings-check-info-w>li + li{
    margin-top: .8rem;
}

.savings-check.active{
    border-color: var(--primary-base);
}
.savings-check.active::before{
    background-image: url(../images/icon/icon-check2-active.svg);
}
.savings-check.active .savings-check-tit{
    color: var(--primary-base);
}
.savings-check.active .savings-check-data{
    background-color: var(--tertiary-darken4);
    color: #fff;
}

#cert-apply-modal .input-primary + .input-primary{
    margin-top: .8rem;
}
@media (min-width: 1241px){
}
@media screen and (max-width: 1240px){    
    .savings-check-w .savings-check{
        flex: 1 1 calc((100% - 2.4rem) / 3);
        width: calc((100% - 2.4rem) / 3);
        max-width: calc((100% - 2.4rem) / 3);
    }
}
@media screen and (max-width: 1028px){
}  
@media screen and (max-width: 640px){  
    .savings-check-w .savings-check{
        flex: 1 1 calc((100% - .8rem) / 2);
        width: calc((100% - .8rem) / 2);
        max-width: calc((100% - .8rem) / 2);
    }
}
@media screen and (max-width: 424px){ 
}

.termination-state{
    border-radius: 1.5rem;
    background-color: var(--grey-lighten5);
    padding: 2rem;
    height: 100%;
}
.termination-state .termination-state-head{
    display: flex;
    align-items: center;
    gap: 0 4px;
}
.termination-state .termination-state-head>strong{
    flex-basis: 0;
    flex-grow: 1;
    display: block;
    font-size: var(--tit-font-size-sm);
    color: var(--tertiary-darken4);
    font-weight: 700;
}
.termination-state .termination-state-head>span{
    flex: 0 0 auto;
    display: block;
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
}
.termination-state p{
    font-size: var(--txt-font-size);
    font-weight: 500;
    color: var(--grey-darken2);
    margin-top: .8rem;
}
@media (min-width: 1241px){
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
    .termination-state .termination-state-head{
        flex-direction: column-reverse;
        align-items: flex-start;
    }
}  
@media screen and (max-width: 640px){
    .termination-state .termination-state-head{
        flex-direction: row;
        align-items: center;
    }
}
@media screen and (max-width: 424px){ 
}

.modal.doc-print .modal-header{
    padding: 0;
}
.modal.doc-print .modal-title{
    padding-left: 3rem;
    padding-right: 3rem;
}
.modal.doc-print .modal-footer{
    padding-top: 2rem;
}
.modal.doc-print .modal-body-inner{
    height: calc(var(--view-height) - 34rem);
}
.modal.doc-print .modal-footer .tab-list-w{
    margin-right: auto;
}
.modal.doc-print .tit-w{
    padding: .8rem;
    margin-bottom: .8rem;
    text-align: center;
}
.modal.doc-print .list-caption{
    margin-bottom: .8rem;
}
.doc-print-step{
    display: flex;
    gap: .8rem;
}
.doc-print-step>li{
    display: flex;
    flex: 0 0 auto;
}
.doc-print-step>li .tab-btn{
    width: var(--btn-height);
    height: var(--btn-height);
    border-radius: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--border-color);
    font-size: var(--txt-font-size);
    font-weight: 700;
    color: var(--grey-base);
    transition: var(--transition);
}
.doc-print-step>li .tab-btn.active{
    background-color: var(--tertiary-lighten4);
    color: var(--tertiary-darken4);
    border-color: var(--tertiary-darken4);
}
.doc-print-info{
    height: calc(var(--view-height) - 34rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.doc-print-info>strong{
    display: block;
}
.modal.doc-print .panel-list .control-primary input[type="checkbox"] + label p,
.modal.doc-print .panel-list .control-primary input[type="radio"] + label p{
    font-size: var(--txt-font-size);
    color: var(--grey-darken2);
    font-weight: 700;
    transition: var(--transition);
}
.modal.doc-print .panel-list .panel-body-inner{
    padding: 0 2rem 2rem 2rem;
}
.modal.doc-print .panel-list .usage-plan-contents{
    border-radius: 1.5rem;
    padding: 2rem;
    background-color: var(--tertiary-lighten5);
    font-size: var(--txt-font-size-sm);
    color: var(--grey-darken2);
}
.modal.doc-print .panel-list>li .panel-head-w{
    padding: 2rem 6.4rem 2rem 2rem;
    position: relative;
}
.modal.doc-print .panel-list>li .panel-head-w .panel-head{
    padding: 0;
    width: clamp(26px, 4rem, 4rem);
    height: clamp(26px, 4rem, 4rem);
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(../images/icon/icon-chevron-down.svg);
    background-position: center;
    background-size: clamp(16px, 2.4rem, 2.4rem) auto;
    background-repeat: no-repeat;
    transition: var(--transition);
}
.modal.doc-print .panel-list>li.active .panel-head-w .panel-head{
    transform: translateY(-50%) rotate(-180deg);
}
.modal.doc-print .panel-list>li .panel-head-w .panel-head::after{
    display: none;
}
.modal.doc-print .panel-list>li.active .panel-head{
    background-color: #fff;
    box-shadow: none;
}
.modal.doc-print .panel-list>li.active .faq-tit{
    color: var(--primary-base);
    text-decoration: underline;
}
.modal.doc-print .control-btn>p{
    padding: 0 1.6rem;
    min-width: 9.6rem;
}
.usage-plan-foot{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .8rem;
    padding-top: 1.6rem;
    margin-top: 1.6rem;
    border-top: 1px solid var(--border-color);
}
.usage-plan-foot>p{
    flex: 0 0 auto;
    font-size: var(--txt-font-size-lg);
    font-weight: 600;
    color: var(--grey-darken2);
}
.usage-plan-foot>.input-primary{
    flex-basis: 0;
    flex-grow: 1;
    max-width: 20rem;
    text-align: right;
}
.doc-print-foot{
    margin-top: 1.2rem;
    text-align: center;
    font-size: var(--txt-font-size);
    color: var(--grey-darken2);
}
.doc-print-foot>*{
    padding: .8rem 0;
}
.doc-print-foot>* + *{
    margin-top: .8rem;
}
.doc-print-foot .input-append{
    justify-content: center;
}
.doc-print-foot .input-append>.input-primary{
    max-width: 34.4rem;
}
.doc-print-foot .doc-print-sign{
    display: inline-block;
    text-align: right;
    min-width: clamp(70px, 11.4rem, 11.4rem);
}
@media (min-width: 1241px){
    .doc-print-step>li .tab-btn:hover{
        background-color: var(--tertiary-lighten4);
        color: var(--tertiary-darken4);
        border-color: var(--tertiary-darken4);
    }
    .modal.doc-print .panel-list>li .panel-head:hover{
        background-color: #fff;
    }
    .modal.doc-print .panel-list>li .panel-head:hover .control-primary input[type="checkbox"] + label p,
    .modal.doc-print .panel-list>li .panel-head:hover .control-primary input[type="radio"] + label p{
        color: var(--primary-base);
    }
    .modal.doc-print .panel-list>li .panel-head-w .panel-head:hover{
        background-color: var(--tertiary-lighten5);
    }
}
@media screen and (max-width: 1240px){
}
@media screen and (max-width: 1028px){
    .modal.doc-print .table-row{
        padding: 2rem;
        border-radius: 2rem;
        border: 1px solid var(--border-color);
    }
}  
@media screen and (max-width: 640px){
    .usage-plan-foot{
        display: block;
    }
    .usage-plan-foot>p{
        margin-bottom: .8rem;
    }
    .usage-plan-foot>.input-primary{
        max-width: 100%;
    }
}
@media screen and (max-width: 424px){ 
}

/* 자산소개 */
.layout-row>[class*="col"]>.card{
    height: 100%;
}
.card.intro-type1{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem 0;
    text-align: center;
    border-radius: 3rem;
}
.card.intro-type1>.card-tit{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 4px;
    font-size: var(--tit-font-size);
    font-weight: 700;
    color: var(--primary-base);
}
.card.intro-type1>.card-tit.sm{
    font-size: var(--txt-font-size-lg);
}
.card.intro-type1>.card-txt{
    font-size: var(--txt-font-size-lg);
    font-weight: 500;
    color: var(--grey-darken2);
}
.card.intro-type1>.card-tit.sm + .card-txt{
    margin-top: -.4rem;
    font-size: var(--txt-font-size);
    font-weight: 400;
}
.card.intro-type2{
    box-shadow: none;
    padding: 2rem;
    border-radius: 1.5rem;
}
.card.intro-type2>.label{
    margin-bottom: .8rem;
}
.card.intro-type2.tertiary{
    background-color: var(--tertiary-lighten5);
}
.card.intro-type2.danger{
    background-color: var(--danger-lighten5);
}
.card.intro-type2.danger .card-tit.danger-txt{
    color: var(--danger-darken1) !important;
}
.card.intro-type2.indigo{
    background-color: var(--indigo-lighten5);
}
.card.intro-type2 .card-tit{
    display: block;
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
}
.card.intro-type2 .card-tit.sm{
    font-size: var(--txt-font-size);
}
.card.intro-type2 .card-txt{
    font-size: var(--txt-font-size-sm);
    color: var(--grey-darken2);
}
.card.intro-type2 .card-txt.lg{
    font-size: var(--txt-font-size);
    font-weight: 500;
}
.card.intro-type2 .card-tit + .card-txt{
    margin-top: .8rem;
}
.card.intro-type2.has-icon{
    display: flex;
    align-items: flex-start;
    gap: 0 .8rem;
}
.card.intro-type2.has-icon>.icon{
    flex: 0 0 auto;
    height: calc(var(--txt-font-size-lg) * 1.5);
    min-width: clamp(16px, 2.4rem, 2.4rem);
    background-size: contain;
}
.card.intro-type2.sm.has-icon>.icon{
    height: calc(var(--txt-font-size) * 1.5);
}
.card.intro-type2.has-icon>.card-contents{
    flex-basis: 0;
    flex-grow: 1;
}
.card.intro-type3{
    padding: 2.4rem;
}
.card.intro-type3>.card-subtit{
    font-size: var(--txt-font-size);
    font-weight: 500;
    display: block;
    color: var(--primary-base);
}
.card.intro-type3>.card-tit{
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
    display: block;
}
.card.intro-type3>.card-txt{
    margin-top: .8rem;
    font-size: var(--txt-font-size);
    color: var(--grey-darken2);
}
.card.intro-type4{
    padding: 0;
    overflow: hidden;
}
.card.intro-type4 .card-contents{
    padding: 3rem;
}
.card.intro-type4 .card-foot{
    padding: 2rem 3rem;
    background-color: var(--tertiary-lighten5);
}
.card.intro-type5{
    padding: 2rem;
    border-radius: 1.5rem;
    background-color: var(--tertiary-lighten5);
    box-shadow: none;
    text-align: center;
    line-height: 1.5;
}
.card.intro-type5>.card-txt{
    font-size: var(--txt-font-size-sm);
    color: var(--grey-darken2);
}
.card.intro-type5>.card-tit{
    display: block;
    font-size: var(--txt-font-size);
    font-weight: 700;
    color: var(--tertiary-darken4);
    margin-top: 4px;
}
.table-row .col-auto>.card.intro-type5{
    min-width: 16rem;
}
.card.intro-type6{
    display: flex;
    gap: 0 1.6rem;
}
.card.intro-type6.center{
    align-items: center;
}
.card.intro-type6.has-head{
    display: block;
}
.card.intro-type6.has-head .card-head{
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.6rem;
}
.card.intro-type6.has-head .card-body{
    display: flex;
    align-items: flex-start;
    gap: 0 .8rem;
}
.card.intro-type6 .icon:not(.btn>.icon){
    min-width: 8rem;
    flex: 0 0 auto;
}
.card.intro-type6 .card-contents{
    flex-basis: 0;
    flex-grow: 1;
}
.card.intro-type6 .card-contents .card-subtit{
    font-size: var(--txt-font-size-sm);
    color: var(--grey-base);
    margin-bottom: 4px;
}
.card.intro-type6 .card-contents .card-tit{
    display: block;
    font-size: var(--txt-font-size-lg);
    color: var(--grey-darken2);
}
.card.intro-type6 .card-contents .card-txt{
    color: var(--grey-darken2);
}
.card.intro-type6 .card-contents .card-tit + .card-txt{
    margin-top: .8rem;
}
.card.intro-type6.has-head .card-contents .card-tit{
    font-size: var(--tit-font-size-sm);
}

.intro-user-savings-w{
    display: flex;
    align-items: center;
}
.intro-user-savings-w>*{
    flex: 1 1 50%;
}
.row-center-area{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--tit-font-size-sm);
    font-weight: 700;
}
.intro-apply-step{
    display: flex;
    justify-content: center;
    border-radius: 2rem;
    background-color: var(--tertiary-lighten5);
    gap: 1.6rem calc(3.2rem + 1px);
}
.intro-apply-step>li{
    flex: 1 1 0;
    display: block;
    text-align: center;
    position: relative;
    padding: 2.4rem 0 2rem;
}
.intro-apply-step>li:not(:last-child)::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: calc(-1.6rem - 1px);
    transform: translateY(-50%);
    width: 1px;
    height: calc(100% - 2.6rem);
    background-color: var(--border-color);
}
.intro-apply-step>li>.intro-apply-step-index{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(24px, 3.2rem, 3.2rem);
    height: clamp(24px, 3.2rem, 3.2rem);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--tertiary-darken4);
    color: #fff;
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
}
.intro-apply-step>li>strong{
    display: block;
    font-size: var(--txt-font-size);
    font-weight: 700;
    color: var(--tertiary-darken4);
    min-height: calc(var(--txt-font-size) * 3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.intro-apply-step>li>p{
    margin-top: 4px;
    font-size: var(--txt-font-size-sm);
    font-weight: 500;
    color: var(--grey-darken2);
    min-height: calc(var(--txt-font-size-sm) * 3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.intro-info{
    display: flex;
    text-align: center;
}
.intro-info>li{
    flex: 1 1 0;
    display: block;
    padding: 0 .8rem;
}
.intro-info>li .intro-info-head{
    margin-bottom: 1.2rem;
}
.intro-info>li .intro-info-head>span{
    font-size: var(--txt-font-size-sm);
    font-weight: 600;
    display: block;
    color: var(--grey-darken2);
    margin-bottom: 4px;
}
.intro-info>li .intro-info-head>strong{
    display: block;
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
    color: var(--primary-base);
}
.intro-info>li .intro-info-body{
    font-size: var(--txt-font-size);
    color: var(--grey-darken2);
    font-weight: 500;
}
.intro-info>li .intro-info-body>.btn{
    width: fit-content;
    margin: 0 auto;
}

.display-table{
    display: flex;
    text-align: center;
    width: 100%;
}
.display-table .display-table-col{
    flex: 1 1 0;
    position: relative;
}
.display-table .display-table-col .th,
.display-table .display-table-col .td{
    display: flex;
    align-items: center;
    justify-content: center;
}
.display-table .display-table-col .th{
    height: 5.6rem;
    background-color: var(--tertiary-lighten4);
    font-size: var(--txt-font-size-sm);
    font-weight: 600;
    color: var(--grey-darken2);
}
.display-table .display-table-col .td{
    padding: 1.4rem;
    min-height: 5.6rem;
    height: calc(100% - 5.6rem);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    color: var(--grey-darken2);
    overflow-wrap: anywhere;
}
.display-table .display-table-col:first-child .th{
    border-top-left-radius: .8rem;
}
.display-table .display-table-col:last-child .th{
    border-top-right-radius: .8rem;
}
.display-table .display-table-col:first-child .td{
    border-bottom-left-radius: .8rem;
    border-left: 1px solid var(--border-color);
}
.display-table .display-table-col:last-child .td{
    border-bottom-right-radius: .8rem;
    border-right: 1px solid var(--border-color);
}
.display-table-w{
    display: flex;
    align-items: flex-end;
    gap: 0 .8rem;
}
.display-table-w>strong{
    min-width: 10rem;
    height: 5.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
    color: var(--primary-base);
}
.display-table-w>.display-table{
    flex-basis: 0;
    flex-grow: 1;
    max-width: calc(100% - 10.8rem);
}
.display-table-area .display-table-w:not(:last-child) .display-table .td{
    border-bottom: 0;
}
.display-table-area .display-table-w:not(:last-child) .display-table .display-table-col:first-child .td{
    border-radius: 0;
}
.display-table-area .display-table-w:not(:last-child) .display-table .display-table-col:last-child .td{
    border-radius: 0;
}

.card-responsive-w{
    align-items: flex-start;
}
.card-responsive-w>[class*="col"]>.card{
    height: auto;
}
.card.card-responsive{
    padding: 0;
    border-radius: 3rem;
    overflow: hidden;
}
.card.card-responsive .card-head{
    padding: 1.6rem 3rem;
    width: 100%;
    text-align: center;
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
}
.card.card-responsive.success .card-head{
    background-color: var(--success-lighten5);
    color: var(--success-base);
}
.card.card-responsive.warning .card-head{
    background-color: var(--warning-lighten5);
    color: var(--warning-darken1);
}
.card.card-responsive.danger .card-head{
    background-color: var(--danger-lighten4);
    color: var(--danger-darken1);
}
.card.card-responsive .card-body{
    padding: 1.6rem 3rem;
}
.card.card-responsive .card-body .dot-list.sm>li{
    font-size: var(--txt-font-size);
}
.card.card-responsive .card-foot{
    padding: 3rem;
    background-color: var(--grey-lighten5);
}
.card.card-responsive .card-foot .card-foot-txt{
    font-size: var(--txt-font-size-sm);
    color: var(--grey-darken2);
    margin-top: .8rem;
}
.card.card-responsive .card-caption{
    padding: 1.6rem 3rem;
}

.card.support-item{
    text-align: center;
}
.card.support-item img{
    display: block;
    margin: 0 auto .8rem;
    width: 10rem;
}
.card.support-item .card-tit{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 4px;
    font-size: var(--txt-font-size-lg);
    font-weight: 700;
    color: var(--tertiary-darken4);
}
.card.support-item .card-txt{
    font-size: var(--txt-font-size);
    color: var(--grey-darken2);
    padding-bottom: .8rem;
    margin-bottom: .8rem;
    border-bottom: 1px solid var(--border-color);
}
.card.support-item .card-tit + .card-txt{
    margin-top: .8rem;
}

@media (min-width: 1029px){
    .display-table .display-table-col .pc-hide{
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        border: 0;
    }
}
@media (min-width: 1241px){
}
@media screen and (max-width: 1240px){
    .table-row .col-auto>.card.intro-type5{
        min-width: 0;
    }
    .intro-apply-step{
        padding: 0 1.6rem;
    }
    .intro-apply-step>li>strong,
    .intro-apply-step>li>p{
        min-height: 0;
        display: block;
    }
}
@media screen and (max-width: 1028px){
    .intro-user-savings-w{
        display: block;
    }
    .intro-user-savings-w>* + *{
        margin-top: 2.4rem;
    }
    .intro-apply-step{
        flex-wrap: wrap;
        gap: 1.6rem;
    }
    .intro-apply-step>li{
        flex: 1 1 calc((100% - 3.2rem) / 3);
        width: calc((100% - 3.2rem) / 3);
        max-width: calc((100% - 3.2rem) / 3);
    }
    .intro-apply-step>li:not(:last-child)::after{
        display: none;
    }
    .intro-info{
        display: block;
        text-align: left;
    }
    .intro-info>li{
        display: flex;
        align-items: center;
        gap: 0 2rem;
    }
    .intro-info>li + li{
        margin-top: 1.6rem;
    }
    .intro-info>li .intro-info-head{
        min-width: 18.4rem;
        margin-bottom: 0;
    }
    .intro-info>li .intro-info-body>.btn{
        width: 100%;
        margin: 0;
    }
    .display-table{
        display: block;
    }
    .display-table .display-table-col{
        display: flex;
    }
    .display-table .display-table-col .th{
        height: auto;
        width: 16rem;
        min-width: 16rem;
        border-bottom: 1px solid #fff;
    }
    .display-table .display-table-col .td{
        flex-basis: 0;
        flex-grow: 1;
        border-right: 1px solid var(--border-color);
        border-bottom: 0;
        padding: 1rem;
        min-height: var(--btn-height);
        height: auto;
    }
    .display-table .display-table-col:first-child .th{
        border-top-left-radius: .8rem;
    }
    .display-table .display-table-col:last-child .th{
        border-top-right-radius: 0;
        border-bottom-left-radius: .8rem;
        border-bottom: 0;
    }
    .display-table .display-table-col:first-child .td{
        border-bottom-left-radius: 0;
        border-top-right-radius: .8rem;
        border-left: 0;
    }
    .display-table .display-table-col:last-child .td{
        border-bottom: 1px solid var(--border-color);
    }

    .display-table-w{
        display: block;
    }
    .display-table-w>strong{
        min-width: 0;
        height: auto;
        display: block;
        text-align: left;
        margin-bottom: .8rem;
    }
    .display-table-w>.display-table{
        max-width: 100%;
    }
    .display-table-w + .display-table-w{
        margin-top: 2.4rem;
    }
    .display-table-area .display-table-w:not(:last-child) .display-table .display-table-col:last-child .td{
        border-bottom: 1px solid var(--border-color);
    }
    .display-table-area .display-table-w:not(:last-child) .display-table .display-table-col:first-child .td{
        border-top-right-radius: .8rem;
    }
    .display-table-area .display-table-w:not(:last-child) .display-table .display-table-col:last-child .td{
        border-bottom-right-radius: .8rem;
    }

    .card.support-item{
        display: flex;
        align-items: center;
        gap: 2rem;
        text-align: left;
    }
    .card.support-item img{
        flex: 0 0 auto;
        min-width: 10rem;
    }
    .card.support-item .card-contents{
        flex-basis: 0;
        flex-grow: 1;
    }
    .card.support-item .card-tit{
        justify-content: flex-start;
    }
}  
@media screen and (max-width: 640px){  
    .intro-info>li{
        display: block;
    }
    .intro-info>li .intro-info-head{
        width: 100%;
        margin-bottom: .8rem;
        min-width: 0;
    }
    .intro-info>li + li{
        margin-top: 2.4rem;
    }

    .card.support-item img{
        width: 8rem;
        min-width: 8rem;
    }
}
@media screen and (max-width: 424px){ 
    .intro-apply-step>li{
        flex: 1 1 calc((100% - 1.6rem) / 2);
        width: calc((100% - 1.6rem) / 2);
        max-width: calc((100% - 1.6rem) / 2);
    }
    
    .card.support-item{
        display: block;
    }
    .card.support-item img{
        margin: 0 auto .8rem;
        width: 10rem;
        min-width: 10rem;
    }
    .card.support-item .card-tit{
        justify-content: center;
    }
}

/* 테이블 반응형 */
@media screen and (max-width: 1028px){
    .classroom-main-table.table-primary.responsive td:nth-child(3):before{
        content: "학습기간 ㅣ";
    }
    .classroom-main-table.table-primary.responsive td:nth-child(4):before{
        content: "학습목표 ㅣ";
    }
    .classroom-main-table.table-primary.responsive td:nth-child(5):before{
        content: "진도율 ㅣ";
    }
    .inquiry-table.table-primary.responsive td:nth-child(3):before{
        content: "문의유형 ㅣ";
    }
    .inquiry-table.table-primary.responsive td:nth-child(5):before{
        content: "등록일 ㅣ";
    }
    .community-survey-table.table-primary.responsive td:nth-child(2):before{
        content: "대상 ㅣ";
    }
    .community-survey-table.table-primary.responsive td:nth-child(3):before{
        content: "설문기간 ㅣ";
    }
    .my-cert-table.table-primary.responsive td:nth-child(2):before{
        content: "구분 ㅣ";
    }
    .my-cert-table.table-primary.responsive td:nth-child(4):before{
        content: "발급일자 ㅣ";
    }
    .my-cert-table.table-primary.responsive td:nth-child(5):before{
        content: "일련변호 ㅣ";
    }
    .intro-business-table td>br{
        display: none;
    }
    .intro-business-table.table-primary.responsive td:nth-child(4):before{
        content: "시행 기관 ㅣ";
    }
    .intro-business-table.table-primary.responsive td:nth-child(5):before{
        content: "지원 대상 ㅣ";
    }
    .intro-business-table.table-primary.responsive td:nth-child(6):before{
        content: "지원 내용 ㅣ";
    }
}

/* 프린트 */
@media print {
    html, body {
        width: 210mm;
        height: 297mm;
    }
    .skip-nav,
    header.header,
    footer.footer,
    .notification-area,
    .quick-area,
    .quick-w,
    .page-navi-w,
    .bottom-btn{
        display: none;
    }
    .wrap{
        padding-top: 0;
    }
    .main{
        padding: 0;
    }
    *{
        max-height: unset !important;
    }
    .agreement-body-inner{
        height: auto;
    }
    .page-global-search-result-area{
        display: block;
    }
    .page-global-search-result-w{
        width: 100%;
        max-width: 100%;
    }
    .page-global-search-keyword-area{
        display: none;
    }
    .panel-list>li{
        border: 1px solid var(--border-color);
        box-shadow: none;
    }
    .panel-list>li .panel-body{
        height: auto !important;
        opacity: 1;
        visibility: visible;
    }
    html:has(.modal-overlay:not(#global-search-modal):not([aria-hidden="true"])){
        overflow: unset !important;
    }
    html:has(.modal-overlay:not(#global-search-modal):not([aria-hidden="true"])) .wrap{
        display: none;
    }
    .modal-overlay:not(#global-search-modal):not([aria-hidden="true"]){
        position: static;
        background-color: transparent;
    }
    .modal-overlay:not(#global-search-modal):not([aria-hidden="true"]) .modal{
        border-radius: 0;
        width: 100% !important;
        max-width: 100%;
        position: static;
        transform: translate(0, 0);
    }
    .modal-overlay:not(#global-search-modal):not([aria-hidden="true"]) .modal-header,
    .modal-overlay:not(#global-search-modal):not([aria-hidden="true"]) .modal-footer{
        display: none;
    }
    .modal-overlay:not(#global-search-modal):not([aria-hidden="true"]) .modal-body{
        padding: 0;
    }
    .modal-overlay:not(#global-search-modal):not([aria-hidden="true"]) .modal-body-inner{
        padding: 0;
        height: auto;
        max-height: unset;
    }
    .modal.doc-print .tab-contents>li:first-child{
        display: none !important;
    }
    .modal.doc-print .tab-contents>li:last-child{
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/*약관동의*/
.term-box .term-tit1{
    margin: 3rem 0 3rem;
    font-size: var(--txt-font-size-lg);
    font-weight: 600;
}
.term-box ol,
.term-box ul,
.term-box li{
    display: block;
}
.term-box .term-tit1:first-child{
    margin-top: 0;
}
.term-box .term-tit2{
    margin: 1.5rem 0 1rem;
    font-size: var(--txt-font-size);
    font-weight: 600;
}
.term-box .term-txt1{
    margin: 1.5rem 0 1rem;
    font-size: var(--txt-font-size-sm);
}
.term-box ol li{
    margin: .8rem 0;
    padding-top: 0;
    padding-left: 1.5rem;
    font-size: var(--txt-font-size-sm);
}
.term-box ol li ol li{
    margin: .5rem 0;
    padding-left: 1.5rem;
}
.term-box ul li{
    position:relative;
    margin: .5rem 0;
    padding: 0 0 0.8rem 1rem;
    font-size: 1.4rem;
}
.term-box ul li ul{
    padding-top: 0.8rem;
}
.term-box ul li ul li{
    font-size: var(--txt-font-size-sm);
}

/*이메일무단수집거부*/
.email-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 2rem;
    padding: 3.5rem 4rem;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .15);
}
.email-box .picto{
    display: flex;
    align-items: center;
    background-image: url(../images/etc/bg_email_01.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 12rem;
    padding-left: 15rem;
    min-height: 12rem;
    font-size: var(--txt-font-size-lg);
    color:#333;
}
@media all and (max-width: 640px) {
    .email-box .picto{
        background-position: center top;
        background-size: 12rem;
        padding-left: 0;
        padding-top: 15rem;
        background-position: center 0;
        min-height: 0;
    }
}

#pre-assessment-modal .modal-body-inner{
    /*height: calc(var(--view-height) - 34rem);*/
    height: auto;
}
#pre-assessment-modal .survey-area.center .survey-w .survey-tit{
    justify-content: center;
}
#pre-assessment-modal .survey-w .survey-tit>strong{
    text-align: center;
    display: flex;
    gap: 0 .6rem;
    justify-content: center;
}
#pre-assessment-modal .survey-w .survey-tit>strong>span{
    display: inline-block;
    min-width: 12px;
    text-align: center;
}
#pre-assessment-modal .survey.control-btn-w{
    justify-content: center;
    padding: 0 calc(12px + .6rem);
}

/* S:: 20260527 수정 - 리뉴얼 안내 페이지 */
main.ready-area{
    padding: 0;
}
.ready-wrap{
    min-height: var(--view-height);
    padding: 10rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.ready-wrap .ready-illust{
    width: 100%;
    max-width: 26.6rem;
    position: relative;
    z-index: 0;
}
.ready-wrap .ready-illust::before{
    content: "";
    display: block;
    position: absolute;
    width: 47.6rem;
    height: 47.6rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, #A1C4F1 0%, transparent 65%);
    opacity: .3;
}
.ready-tit{
    font-size: clamp(22px, 3.4rem, 3.4rem);
    font-weight: 800;
    display: block;
    color: var(--tertiary-darken4);
    line-height: 1.2;
    margin: -.8rem 0 3.4rem;
}
.ready-card{
    padding: 6rem 3rem;
    border-radius: 2.4rem;
    background-color: var(--tertiary-lighten5);
}
.ready-card>p{
    font-size: var(--tit-font-size-sm);
    font-weight: 600;
    line-height: 1.2;
    color: var(--grey-darken2);
}
.ready-card-schedule{
    display: flex;
    justify-content: center;
    gap: 0 1.4rem;
    font-size: var(--tit-font-size-sm);
    line-height: 1.2;
    margin-top: 4.8rem;
    text-align: left;
}
.ready-card-schedule>strong{
    display: block;
    font-weight: 700;
    color: var(--tertiary-darken4);
    white-space: nowrap;
}
.ready-card-schedule>p{
    font-weight: 600;
    color: var(--grey-darken2);
}
.ready-wrap .logo{
    width: 17rem;
    height: 4rem;
    margin-top: 6.4rem;
}
@media all and (max-width: 640px) {
    .ready-card-schedule{
        display: block;
        text-align: center;
    }
    .ready-card-schedule>p{
        margin-top: .8rem;
    }
}
/* E:: 20260527 수정 - 리뉴얼 안내 페이지 */

/* S:: 20260604 수정 - 아이프레임, 이미지 반응형 */
/* 유튜브/임베딩 */
.iframe-area{
    margin-left: auto;
    margin-right: auto;
}
.iframe-w{
    position:relative;
    padding-top:56.25%;
    height:0;
    width:100%;
}
.iframe-w.short{
    padding-top: 177.78%;
}
.iframe-w>iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}