/* 메인 팝업 */
.modal-event .event-content .event-img img {
    max-width: 100%;
    height: auto !important;
}


.avatar[data-user^=teacher] {
    background: url(../img/common/avatar-teacher-ani.png) no-repeat 0 0/cover;
}

.avatar[data-user^=parents] {
    background: url(../img/common/avatar-parents-ani.png) no-repeat 0 0/cover;
}

.avatar[data-user^=student] {
    background: url(../img/common/avatar-student-ani.png) no-repeat 0 0/cover;
}

.avatar[data-user^=normal] {
    background: url(../img/common/avatar-normal-ani.png) no-repeat 0 0/cover;
}


/*@media (min-width: 768px) {*/
/*    .pagination .page-item:first-child {*/
/*        margin-right: 4rem;*/
/*    }*/

/*    .pagination .page-item:last-child {*/
/*        margin-left: 4rem;*/
/*    }*/
/*}*/


/* 모달 출력 애니메이션 */
html {
    scrollbar-gutter: stable;
}

/* Alert 전용 (Bootstrap modal 복제) */
/* ===== Alert Modal ===== */
.vs-alert {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: block;
}

.vs-alert.fade {
    opacity: 0;
    transition: opacity .3s linear;
}

.vs-alert.fade.show {
    opacity: 1;
}

.vs-alert .modal-dialog {
    transform: translateY(30px);
    transition: transform .3s ease-out;
}

.vs-alert.show .modal-dialog {
    transform: translateY(0);
}

/* ===== Alert Backdrop ===== */
.vs-alert-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background-color: rgba(0,0,0,.3);
}

.vs-alert-backdrop.fade {
    opacity: 0;
    transition: opacity .3s linear;
}

.vs-alert-backdrop.fade.show {
    opacity: 1;
}

/* ===== 5837 교재 플로팅 배너 노출 ===== */
.floating-area.pc {
    display: none;
}

.floating-area.pc.view {
    display: none;
}

.floating-area.mo.view {
    display: block;
}

.floating-area.mo {
    display: none;
    position: relative;
    margin-top: 10px;
    z-index: 9999;
}

.floating-area.mo .img{
    position: absolute;
    width: 100px;
    right: 0;
}

.floating-area.mo .close-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
}

@media (min-width: 768px) {
    .floating-area.pc.view {
        display: none;
    }

    .floating-area.mo.view {
        display: block;
    }

    .floating-area.mo {
        display: none;
        position: relative;
        margin-top: 10px;
        z-index: 9999;
    }

    .floating-area.mo .img{
        position: absolute;
        top: 4px;
        right: 4px;
        width: 120px;
    }

    .floating-area.mo .close-btn {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 24px;
    }
}

@media (min-width: 1280px) {
    .product-view-header {
        position: relative;
    }

    .floating-area.pc.view {
        display: block;
    }

    .floating-area.mo.view {
        display: none;
    }

    .floating-area.pc {
        display: none;
        position: absolute;
        top: -40px;
        right: 100px;
        z-index: 9999;
    }

    .floating-area.pc .img{
        width: 160px;
    }

    .floating-area.pc .close-btn {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 28px;
    }
}








#ly-footer .mid-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    column-gap:2rem;
}

#ly-footer .mid-area .footer-logo {
    max-width: 134px;
}

#ly-footer .mid-area .footer-logo img {
    max-width: 100%;
    height: auto;
}

#ly-footer .footer-swiper {
    max-width: 331px;
    width: 100%;
    flex: 1;
}

.footer-swiper .swiper-slide img{
    width: 100%;
    height: auto;
}

@media (min-width: 568px) {
    #ly-footer .mid-area {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    #ly-footer .footer-swiper {
        flex: auto;
        margin: 0;
        max-width: 256px;
    }
}