@charset "utf-8";


/*------------------------------- 
김기호영어학원 학원소개 
-------------------------------*/

.ky--about--intro {
    position: relative;
}

    .ky--about--intro .row.r1 {
        flex-direction: column;
        font-size: 17px;
        height: 100%;
        margin: 0;
    }

    .ky--about--intro .contents {
        padding: 0 0 0 30%;
        line-height: 150%;
    }

    .ky--about--intro .t1 {
        display: flex;
        color: #222;
        padding-top: 60px;
        padding-bottom: 20px;
        align-items: center;
    }

        .ky--about--intro .t1 h3 {
            font-size: 18px;
            font-weight: 700;
            color: #222;
            line-height: 150%;
        }

    .ky--about--intro .t2 {
        position: relative;
        background: #6e1a2b;
        color: #fff !important;
        padding-top: 30px;
        padding-bottom: 30px;
    }

        .ky--about--intro .t2 em {
            margin-right: 10px;
        }

        .ky--about--intro .t2 li {
            font-size: 22px;
            font-weight: 300;
            line-height: 150%;
        }

        .ky--about--intro .t2 .ceo-img01 {
            position: absolute;
            bottom: 0;
            margin-left: 5%;
            width: 20%;
            _border: 1px solid red;
        }

    .ky--about--intro .t3 {
        display: flex;
        color: #222;
        padding-top: 20px;
        padding-bottom: 50px;
        background: #eee;
    }

        .ky--about--intro .t3 strong {
            color: #6e1a2b;
        }


@media (max-width: 1250px) {
}
/* [END] max-width: 1250px */

@media (max-width: 1023px) {
}
/* [END] max-width: 1023px */

@media (max-width: 767px) {
    .ky--about--intro {
        padding-top: 11px;
    }

        .ky--about--intro .t1 {
            padding: 20px 0px 0 0;
        }

            .ky--about--intro .t1 .contents {
                padding: 0 0px 25px 130px;
                font-size: 14px;
            }

        .ky--about--intro .t2 {
            padding-top: 25px;
            padding-bottom: 14px;
        }

            .ky--about--intro .t2 .contents {
                padding: 0 0px;
            }

            .ky--about--intro .t2 li {
                font-size: 15px;
                line-height: 150%;
                margin-bottom: 10px;
            }

            .ky--about--intro .t2 .ceo-img01 {
                top: -99px;
                bottom: inherit;
                margin-left: 0;
                width: 100px;
            }

        .ky--about--intro .t3 .contents {
            padding: 0;
            font-size: 14px;
        }
}
/* [END] max-width: 767px */

@media (max-width: 420px) {
}
/* [END] max-width: 420px */

/* // -------------------------------김기호영어학원 학원소개------------------------------- */



/* -------------------------------
김기호영어학원 교육과정 
----------------------------------*/
.ky--eduCourse--eduCourse1 {
    position: relative;
    display: flex;
    width: 100%;
}

    .ky--eduCourse--eduCourse1 .row {
        width: 100%;
        height: 100%;
        font-size: 17px;
        height: 100%;
        margin: 0;
    }

        .ky--eduCourse--eduCourse1 .row > .left {
            position: relative;
            width: 268px;
            min-height: 500px;
            background: url(/UPF/Board_Img/bgkkheducs01.jpg) no-repeat;
            background-position: center bottom;
            background-size: cover;
            padding: 20px;
            color: #000;
            font-size: 20px;
        }

            .ky--eduCourse--eduCourse1 .row > .left span {
                color: #6d1828;
            }

.ky-img01 {
    position: absolute;
    bottom: 0;
}

    .ky-img01 .img-text01 {
        text-align: center;
        margin-bottom: 20px;
        display: block;
    }

.ky--eduCourse--eduCourse1 .row .right {
    display: flex;
    padding: 0;
}

    .ky--eduCourse--eduCourse1 .row .right .col-lg {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 0;
        color: #fff;
    }

        .ky--eduCourse--eduCourse1 .row .right .col-lg span {
            display: block;
            background: #eee;
            width: 100%;
            text-align: center;
            padding: 30px 10px;
            font-size: 28px;
            color: #fff;
            background: rgba(0,0,0, .15);
        }

.cos1 {
    background: #00b2b0;
}

.cos2 {
    background: #1197be;
}

.cos3 {
    background: #1b7eca;
}

.cos4 {
    background: #1b5da6;
}

.ky--eduCourse--eduCourse1 .row .right .col-lg ul {
    padding: 30px 20px 0 30px;
}

    .ky--eduCourse--eduCourse1 .row .right .col-lg ul li {
        font-size: 18px;
        margin-bottom: 10px;
        list-style: disc;
        margin-left: 10px;
        border-bottom: 1px dotted rgba(255,255,255, .4);
        padding-bottom: 8px;
        line-height: 150%;
    }

        .ky--eduCourse--eduCourse1 .row .right .col-lg ul li:last-child {
            list-style: none;
            border-bottom: none;
        }

.deco-no {
    position: absolute;
    right: -10px;
    bottom: -30px;
    font-size: 150px;
    opacity: .1;
}

@media (max-width: 1250px) {
}
/* [END] max-width: 1250px */

@media (max-width: 1023px) {
    .ky--eduCourse--eduCourse1 .row > .left {
        min-height: 422px;
        width: 220px;
        font-size: 18px;
    }

    .ky--eduCourse--eduCourse1 .row .right .col-lg ul li {
        font-size: 14px;
    }

    .ky--eduCourse--eduCourse1 .row .right .col-lg ul {
        padding: 30px 20px 0 13px;
    }
}
/* [END] max-width: 1023px */

@media (max-width:991px) {
    .ky--eduCourse--eduCourse1 .row > .left {
        width: 190px;
    }

    .ky--eduCourse--eduCourse1 .row .right .col-lg {
        flex-direction: row;
    }

        .ky--eduCourse--eduCourse1 .row .right .col-lg span {
            width: 100px;
            padding: 21px 0px;
            font-size: 22px;
        }

        .ky--eduCourse--eduCourse1 .row .right .col-lg ul {
            padding: 17px 4px 8px 22px;
            width: 100%;
        }

            .ky--eduCourse--eduCourse1 .row .right .col-lg ul li br {
                display: none;
            }
}
/* [END] max-width: 991px */

@media (max-width: 767px) {
    .ky--eduCourse--eduCourse1 .row {
        width: 100%;
        font-size: 17px;
        height: 100%;
        margin: 0;
        flex-direction: column;
    }

        .ky--eduCourse--eduCourse1 .row > .left {
            display: flex;
            flex-direction: row;
            flex: 1 0 0%;
            width: 100% !important;
            min-height: 180px;
        }

    .ky-img01 {
        position: absolute;
        bottom: 0;
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding-right: 40px;
        align-items: center;
    }

        .ky-img01 .text {
            display: flex;
            width: 100%;
            justify-content: center;
        }

        .ky-img01 .img-text01 {
            text-align: left;
            margin-bottom: 20px;
            display: block;
        }

            .ky-img01 .img-text01 .pc {
                display: none;
            }

    .subBox .ky-img01 img {
        max-width: 100px !important;
    }

    .deco-no {
        right: -10px;
        top: 0;
        bottom: inherit;
        font-size: 80px;
        opacity: .05;
    }
}
/* [END] max-width: 767px */

@media (max-width: 420px) {
}
/* [END] max-width: 420px */


/* //-------------------------------김기호영어학원 교육과정------------------------------- */


/* boonsoo 230809 */
/*-------------------------------*/
/*            Loading            */
/*-------------------------------*/
.loadingBg {
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .6);
}

.loadingBox {
    position: fixed;
    z-index: 20;
    top: 50%;
    left: 50%;
    width: 50px;
    min-height: 50px;
    margin-top: -25px;
    margin-left: -25px;
    border-top: 5px solid transparent;
    border-right: 5px solid #fff;
    border-bottom: 5px solid #fff;
    border-left: 5px solid #fff;
    border-radius: 50%;
    -webkit-animation: linear 0.8s infinite 0s loadingBox;
    -moz-animation: linear 0.8s infinite 0s loadingBox;
    animation: linear 0.8s infinite 0s loadingBox;
}

@-webkit-keyframes loadingBox {
    0% {
        transform: rotate(0deg);
    }

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

@-moz-keyframes loadingBox {
    0% {
        transform: rotate(0deg);
    }

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

@-o-keyframes loadingBox {
    0% {
        transform: rotate(0deg);
    }

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

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

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

.loadingBox span {
    display: block;
    text-indent: -9999px;
}

.loadingTextBox {
    position: absolute;
    z-index: 30;
    top: 50%;
    left: 50%;
    width: 100px;
    /*
    margin-top: 75px;
    margin-left: -50px;
    */
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    transform: translate(-50%, 50px);
}

/*-------------------------------*/
/*         Tab Content           */
/*-------------------------------*/
.tab_container {
    position: relative;
    z-index: 20;
    background-color: #fff;
    margin-top: -1px;
}

.tab_content {
    margin: 0;
    border: 3px solid #6e747a;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-sizing: border-box;
}

.tabTopBox {
    position: relative;
    display: block;
    padding: 10px;
    box-sizing: border-box;
}

.contentTabBox {
    position: relative;
    display: block;
}

.contentTabInBox {
    position: relative;
    height: 41px;
    line-height: 41px;
    margin: 0;
    border-bottom: 1px solid #dedede;
}

    .contentTabInBox:after {
        display: block;
        visibility: hidden;
        clear: both;
        content: ""
    }

.contentTabBtnBox {
    position: absolute;
    z-index: 5;
    top: -5px;
    right: 0px;
    width: auto;
}

.contentTabInBox ul {
    position: relative;
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    height: 42px;
    text-align: left;
}

.faq .contentTabInBox ul {
    grid-template-columns: repeat(auto-fill, minmax(110px, auto));
}

.scoreViewPopup .contentTabInBox ul {
    grid-template-columns: 150px 150px;
}

.contentTabInBox li {
    display: flex;
    width: 100%;
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #2d2d2d;
    margin: 0px;
}

.contentTabInBox a.tabBtn:link,
a.tabBtn:visited,
a.tabBtn:active {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% + 2px);
    height: 42px;
    padding: 0 10px;
    text-align: center;
    font-size: 14px;
    color: #acacac;
    text-decoration: none;
    margin: 0;
    background-color: #f9f9f9;
    border: 1px solid #dedede;
    box-sizing: border-box;
}

.contentTabInBox a.tabBtn:hover {
    color: #2f84d9;
    background-color: #eff8ff;
    border: 1px solid #85b8e2;
}

.contentTabInBox a.tabSelected:link,
.contentTabInBox a.tabSelected:visited,
.contentTabInBox a.tabSelected:hover,
.contentTabInBox a.tabSelected:active {
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 42px;
    padding: 0 15px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    /* margin: -1px 0 0 0; */
    background-color: #6e747a;
    border: 1px solid #6e747a;
    /* border-bottom: 1px solid #fff; */
    box-sizing: border-box;
}

    .contentTabInBox a.tabSelected:link .tabLine,
    a.tabSelected:visited .tabLine,
    a.tabSelected:hover .tabLine,
    a.tabSelected:active .tabLine {
        position: relative;
        display: block;
        margin-top: -3px;
        border-top: 1px solid #317ac5;
    }

        .contentTabInBox a.tabSelected:link .tabLine .bottomArrow,
        a.tabSelected:visited .tabLine .bottomArrow,
        a.tabSelected:hover .tabLine .bottomArrow,
        a.tabSelected:active .tabLine .bottomArrow {
            position: absolute;
            z-index: 5;
            top: 0;
            left: 50%;
            margin-left: -7%;
            width: 0;
            height: 0;
            text-align: center;
            border-top: 5px solid #317ac5;
            border-right: 5px solid transparent;
            border-bottom: 0 solid transparent;
            border-left: 5px solid transparent;
        }

/* ----------------------------- */
/*             Layer             */
/* ----------------------------- */
.bgLayer {
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
}

.sideNavBox {
    position: fixed;
    z-index: 999;
    top: 0;
    bottom: 0;
    width: 80%;
    margin-left: -100%;
    background-color: #fff;
    box-shadow: 3px 0 3px 0 rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
}

    .sideNavBox.on {
        margin-left: 0;
        transition: all 0.3s;
    }

.navTopBox {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    background-color: #2f2f30;
}

.navLogoBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 30px 0 10px;
    background-color: #fff;
    border-radius: 0 52px 52px 0;
    box-sizing: border-box;
}

    .navLogoBox img {
        max-width: 110px;
        max-height: 32px;
    }

.layerCloseBtn {
    position: absolute;
    right: 0;
    display: flex;
    width: 52px;
    height: 52px;
    background-color: transparent;
    border: none;
}

.tuitionCheckLayer .layerCloseBtn,
.tuitionGuideLayer .layerCloseBtn {
    top: 0;
}

/*
.selfStudyLayer .layerCloseBtn {
    width: 42px;
    height: 42px;    
}
*/
.layerCloseBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    font-size: 24px;
    color: #fff;
    content: "\e915";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.layerCloseBtn span {
    display: block;
    text-indent: -99999px;
}

.loginTopBox .layerCloseBtn:before,
.studentAccountLayer .layerCloseBtn:before,
.selfStudyLayer .layerCloseBtn:before,
.tuitionNoticeLayer .layerCloseBtn:before {
    font-size: 16px;
}

.tuitionGuideLayer .layerCloseBtn:before {
    color: #000;
}

/*
.selfStudyLayer .layerCloseBtn:before {
     width: 42px;
     height: 42px;
     font-size: 16px;   
}
*/

.navLoginBox {
    position: relative;
    display: block;
    padding: 20px 10px;
    background-color: #e7e7e7;
    border-top: 1px solid #acacac;
    border-bottom: 1px solid #acacac;
}

.navLoginTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 10px;
    font-size: 16px;
    color: #2d2d2d;
}

.navLoginBtnBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 62px;
}

    .navLoginBtnBox button {
        margin: 0 5px;
    }

.navLoginBtn,
.navJoinBtn {
    position: relative;
    display: flex;
    flex-shrink: 0;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    height: 42px;
    padding: 0 25px;
    font-size: 13px;
    color: #5d5d5d;
    background-color: #fff;
    border: 1px solid #acacac;
    border-radius: 42px;
    box-sizing: border-box;
}

    .navLoginBtn:hover,
    .navJoinBtn:hover {
        color: #fff;
        font-weight: bold;
        background-color: #5eccff;
        border: none;
    }

.sideNavInBox {
    height: calc(100vh - 198px);
    overflow: auto;
    overflow-x: hidden;
}

ul.sideNavList {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 20px 0;
}

    ul.sideNavList li {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        min-height: 38px;
        transition: all 0.3s;
    }

    /*
ul.sideNavList li.on {
    background-color: #636d75;
}
*/
    ul.sideNavList a {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        width: 100%;
        height: 42px;
        padding-left: 10px;
        font-size: 16px;
        font-weight: bold;
        color: #5d5d5d;
    }

    ul.sideNavList li.on a {
        color: #f0f0f0;
    }

.depth01:after {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    font-size: 14px;
    color: #2d2d2d;
    content: "\e90c";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    transition: all 0.3s;
}

.depth01.on:after {
    color: #fff;
    transform: rotate(180deg);
    transition: all 0.3s;
}

ul.subSideNavList {
    position: relative;
    width: 100%;
    padding: 0;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    background-color: #f9f9f9;
    display: none;
}

    ul.subSideNavList a.depth02 {
        padding-left: 20px;
        font-size: 14px;
        font-weight: normal;
    }

        ul.subSideNavList a.depth02.on {
            color: #fff;
            background-color: #393c41;
        }

@media all and (min-width:1024px) {
    .navTopBox {
        height: 72px;
    }

    ul.subSideNavList li a.depth02.on {
        color: #fff !important;
    }

    ul.sideNavList li:hover {
        background-color: #e7f1ff;
    }

    ul.subSideNavList li:hover {
        background-color: #f0f0f0;
    }

        ul.subSideNavList li:hover a.depth02 {
            color: #000;
        }

    ul.sideNavList li.on {
        background-color: #636d75;
    }

        ul.sideNavList li.on:hover {
            background-color: #757b80;
        }

            ul.sideNavList li.on:hover a {
                color: #fff;
            }
}

.studentAccountLayer {
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    width: 500px;
    min-height: 150px;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, -50%);
}

.layerTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 10px;
    font-size: 16px;
    color: #fff;
    background-color: #353946;
}

/* ----------------------------- */
/*       main notice Layer       */
/* ----------------------------- */
ul.popupLayerList {
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    display: flex;
    width: 100%;
    transform: translate(-50%, -50%);
}

@media (min-width: 460px) {
    ul.popupLayerList {
        flex-wrap: wrap;
        width: 400px;
        margin: 0;
    }
}

@media (min-width: 768px) {
    ul.popupLayerList {
        width: 740px;
        margin: 0;
    }
}

@media (min-width: 1180px) {
    ul.popupLayerList {
        width: 1080px;
    }
}

ul.popupLayerList li {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-shrink: 0;
    width: 100%;
    padding: 2px 10px;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}

@media (min-width: 460px) {
    ul.popupLayerList li {
        width: 380px;
    }
}

@media (min-width: 768px) {
    ul.popupLayerList li {
        position: relative;
        top: 0;
        left: 0;
        width: 360px;
        padding: 2px;
        transform: translate(0, 0);
    }
}

.onlinePopupLayer {
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: 100%;
    min-height: 350px;
    background-color: #fff;
    border: 1px solid #364043;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.onlineContentBox {
    position: relative;
    display: block;
    width: 100%;
    height: 308px;
    color: #2d2d2d;
    background-color: #fff;
}

/*
.blueBox .onlineContentBox {
	background-color: #20bbc5;
	color: #fff;
}
.darkBox .onlineContentBox {
	background-color: #363c3e;
	color: #fff;
}
.greenBox .onlineContentBox {
	background-color: #3c9060;
	color: #fff;
}
*/
.onlineContentInBox {
    line-height: 1.5;
    padding: 10px;
    text-align: left;
}

    .onlineContentInBox img {
        max-width: 100%;
        border: 3px solid #fff;
    }

/*
.popupImgBox .onlineContentInBox {
	padding: 0;
} 
*/
.onlineBottomBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    background-color: #f0f0f0;
    border-top: 1px solid #dedede;
}

.onlineChecks {
    margin-left: 10px;
}

.onlineCloseBtn {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 30px;
    height: 32px;
    margin: 0 5px;
    margin-left: auto;
    font-size: 12px;
    color: #fff;
    background-color: #5f6271;
    border: none;
    border-radius: 42px;
}

.studentPopupLayer {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100px;
    padding: 10px 0 0;
    background-color: #fff;
    border: 1px solid #000;
    box-shadow: 3px 3px 5px rgb(0 0 0 / 10%);
    box-sizing: border-box;
}

.studentLayerCloseBtn {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
}

.studentPopupTitle {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 28px;
    padding-left: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #000;
    background-color: #f9f9f9;
    border-bottom: 1px solid #acacac;
    box-sizing: border-box;
}

.studentLayerCloseBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 28px;
    font-size: 18px;
    color: #000;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.studentLayerCloseBtn span {
    display: block;
    text-indent: -9999px;
}

ul.studentMenuList {
    position: relative;
    display: block;
    margin-top: 18px;
}

    ul.studentMenuList li {
        position: relative;
        border-bottom: 1px solid #dedede;
    }

        ul.studentMenuList li:hover {
            background-color: #e8f7ff;
        }

        ul.studentMenuList li:last-child {
            border-bottom: none;
        }

        ul.studentMenuList li a {
            display: block;
            padding: 5px 10px;
            text-align: left;
        }

/* ----------------------------- */
/*          Login Layer          */
/* ----------------------------- */
.loginLayer {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    content: "";
}

.loginBox {
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    width: 400px;
    min-height: 300px;
    padding: 70px 55px 30px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%);
}

@media (max-width: 410px) {
    .loginBox {
        width: calc(100% - 20px);
        padding: 70px 20px 30px;
    }
}

.loginTopBox {
    position: absolute;
    z-index: 20;
    top: -1px;
    right: -1px;
    left: -1px;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 15px;
    background-color: #3a3e51;
    border-radius: 13px 13px 0 0;
    box-sizing: border-box;
}

    .loginTopBox span:first-child {
        padding: 0;
        font-size: 24px;
        color: #fff;
        font-family: 'Lato thin', sans-serif;
    }

.loginLogoBox {
    position: relative;
    margin: 10px auto;
    padding: 20px 50px;
    border-radius: 100px;
    /* background-color: #464747; */
}

    .loginLogoBox img {
        width: 100%;
        max-width: 150px;
    }

ul.loginInputBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 0;
}

@media screen and (max-width: 767px) {
    ul.loginInputBox {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

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

@media screen and (max-width: 479px) {
    ul.loginInputBox {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
}

ul.loginInputBox li {
    position: relative;
    margin: 5px 0;
}

    ul.loginInputBox li:first-child:before {
        position: absolute;
        z-index: 10;
        top: 10px;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 22px;
        /* border-right: 1px solid #5d5d5d; */
        font-size: 16px;
        color: #5d5d5d;
        content: "\ea26";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

    ul.loginInputBox li:last-child:before {
        position: absolute;
        z-index: 10;
        top: 10px;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 22px;
        /* border-right: 1px solid #5d5d5d; */
        font-size: 16px;
        color: #5d5d5d;
        content: "\ea27";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

    ul.loginInputBox li input {
        position: relative;
        display: flex;
        width: 100%;
        height: 42px;
        padding: 0 10px;
        border-radius: 42px;
    }

        ul.loginInputBox li input:focus {
            border-radius: 42px;
        }

.loginInput {
    position: relative;
    display: flex;
    width: 100%;
    height: 52px;
    font-size: 14px;
    border-radius: 5px;
    text-indent: 5px;
    box-sizing: border-box;
}

    .loginInput:focus {
        border-radius: 5px;
        box-shadow: 0 0 15px rgba(25, 74, 163, 0.7);
    }

.loginMiddleBox {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
}

a.idPassFindBtn {
    position: relative;
    display: flex;
    flex-shrink: 0;
    margin-left: auto;
    text-decoration: underline !important;
}

.loginBtnBox {
    padding: 20px 0 0;
}

.loginBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 52px;
    margin: 0;
    font-size: 16px;
    color: #fff;
    background-color: #3a3e51;
    border: none;
    border-radius: 52px;
}

.loginInput,
.joinInput,
.joinInput2 {
    position: relative;
    display: flex;
    width: 100%;
    height: 52px;
    font-size: 14px;
    border-radius: 5px;
    box-sizing: border-box;
}

.joinInput2 {
    padding-right: 90px !important;
}

.loginInput:focus {
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(25, 74, 163, 0.7);
}

.loginInputBox input[type="text"],
.loginInputBox input[type="password"] {
    text-indent: 42px;
}

    .loginInputBox input[type="text"]:before {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        color: #5d5d5d;
        content: "\e90b";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

/* ----------------------------- */
/*        tuition layer          */
/* ----------------------------- */
.tuitionCheckLayer {
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 70px;
    width: 550px;
    min-height: 300px;
    line-height: 1.7;
    padding: 20px;
    font-size: 15px;
    color: #f9f9f9;
    background-color: #282d34;
    border: 5px solid #ff2626;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.tuitionBtnBox {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin: 10px 0;
}

    .tuitionBtnBox button {
        margin: 0 5px;
    }

@media all and (max-width: 399px) {
    .tuitionBtnBox {
        flex-direction: column;
    }

        .tuitionBtnBox button {
            margin: 5px;
        }
}

.tutionPaymentBtn,
.tutionExpandedBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    margin: 0;
    padding: 0 30px;
    font-size: 16px;
    color: #fff;
    background-color: #5a72e4;
    border: none;
    border-radius: 52px;
}

.tutionExpandedBtn {
    background-color: #1ea388;
}

.tuitionGuideLayer {
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 70px;
    width: 550px;
    min-height: 300px;
    line-height: 1.7;
    padding: 20px;
    font-size: 15px;
    color: #2d2d2d;
    background-color: #fff;
    border: 5px solid #1a9fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.tuitionNoticeLayer {
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 70px;
    width: 290px;
    min-height: 100px;
    line-height: 1.7;
    padding: 0;
    font-size: 15px;
    color: #2d2d2d;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.tuitionNoticeTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 10px 0 42px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #3290ff;
}

    .tuitionNoticeTitle:before {
        position: absolute;
        z-index: 20;
        top: 0;
        left: 0;
        width: 42px;
        height: 42px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #fff;
        content: "\e91f";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.tuitionNoticeLayer p {
    padding: 0 20px;
}

@media all and (max-width: 590px) {

    .tuitionCheckLayer,
    .tuitionGuideLayer {
        top: 50px;
        width: calc(100% - 40px);
        overflow: auto;
    }
}

/* ----------------------------- */
/*            popup              */
/* ----------------------------- */
.popupBox {
    position: relative;
    display: block;
    min-width: 768px;
    height: 100vh;
    box-sizing: border-box;
}

    .popupBox.tuitionExtentionPopup {
        min-width: 300px;
    }

.popupInBox {
    position: relative;
    display: block;
    padding: 10px;
    box-sizing: border-box;
}

.popupBox.idPwSearchBox {
    min-width: 600px;
}

.classEvaluationPopup .popupInBox {
    height: calc(100vh - 52px);
}

.popupBoxTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 52px;
    padding-left: 38px;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #4d5053;
    box-sizing: border-box;
    font-family: 'Noto Sans KR', sans-serif;
}

    .popupBoxTitle:before {
        position: absolute;
        z-index: 10;
        top: 50%;
        left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 18px;
        height: 18px;
        border: 3px solid #fff;
        border-radius: 50%;
        transform: translate(0, -60%);
        content: "";
    }

.homeworkManageBox .popupBoxTitle {
    height: 62px;
}

.popupContentBox {
    position: relative;
    display: block;
    min-height: 50px;
    line-height: 1.7;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #acacac;
    border-radius: 10px;
    box-sizing: border-box;
}

.homeworkManageBox .popupContentBox {
    min-height: auto;
    /* height: calc(100vh - 82px); */
}

.homeworkManagePreBox .popupContentBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: auto;
    height: calc(100vh - 72px);
}

.homeworkAskListPopup .popupContentBox,
.homeworkAskViewPopup .popupContentBox,
.homeworkAskInputPopup .popupContentBox {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 214px);
}

.homeworkManagePreBox .popupContentBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: auto;
    height: calc(100vh - 72px);
}

.scoreManageViewPopup .popupContentBox {
    display: flex;
    max-height: calc(100vh - 72px);
}

.tuitionExtentionPopup .popupContentBox {
    min-height: calc(100vh - 73px);
}

.popupContentInBox {
    position: relative;
    display: block;
}

.popupContentBottomBox {
    position: relative;
    display: block;
}

.popupBoxHideContentBox {
    position: absolute;
    z-index: 30;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border: 1px solid #acacac;
}

    .popupBoxHideContentBox span {
        display: block;
        line-height: 1.5;
        padding: 20px 0;
        font-size: 18px;
        color: #5d5d5d;
        margin: 0 auto;
    }

.taskCheckBtn,
.mstManagementBtn,
.vocabReviewTestBtn {
    position: relative;
    display: flex;
    align-items: center;
    width: 140px;
    height: 42px;
    padding: 0 20px;
    border-radius: 42px;
    font-size: 14px !important;
    color: #fff !important;
    background-color: #252d40;
    border: none;
    box-sizing: border-box;
}

.mstManagementBtn,
.vocabReviewTestBtn {
    width: auto;
    padding: 0 30px;
}

.popupBoxContentTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    font-size: 18px;
    color: #000;
}

.popupContentFlexBox {
    position: relative;
    display: flex;
}

.popupContentLeftBox {
    position: relative;
    display: flex;
    width: calc(50% - 5px);
}

.popupContentRightBox {
    display: flex;
    width: calc(50% - 5px);
    margin-left: auto;
}

.popupContentLeftLeftBox,
.popupContentRightLeftBox {
    flex-grow: 1;
    width: calc(50% - 5px);
    padding-right: 5px;
}

.popupContentRightLeftBox {
    flex-grow: 1;
    width: calc(100% - 305px);
}

.popupContentLeftRightBox,
.popupContentRightRightBox {
    flex-grow: 1;
    width: calc(50% - 5px);
    margin-left: auto;
}

.popupContentRightRightBox {
    width: calc(300px - 5px);
}

.homeworkManageBox .popupBoxContentTitle {
    height: 32px;
    font-size: 13px;
}

.selfStudyAllocationBox .popupBoxContentTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    /* padding: 0 10px 0 20px; */
    padding: 0 10px;
    font-size: 16px;
    font-weight: bold;
    color: #19546c;
    background-color: #9fe3ff;
    border: 2px solid #329cc6;
    border-bottom: none;
    border-radius: 15px 15px 0 0;
    box-sizing: border-box;
}

/*
.selfStudyAllocationBox .popupBoxContentTitle:before {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 10px;
    width: 5px;
    height: 5px;
    background-color: #19546c;
    border-radius: 50%;
    transform: translate(0, -50%);
    content: "";
}
*/
.newPopupBtnExBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 28px;
    font-size: 14px;
    background-color: #f1feff;
    border-bottom: 1px solid #acacac;
}

/* id password search popup */
.idpwSearchBox .tab_content {
    margin: 0;
    border: 7px solid #317ac5;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-sizing: border-box;
}

.idpwSearchBox .contentTabInBox {
    position: relative;
    height: 44px;
    line-height: 44px;
    margin: 30px 0 0;
    border-bottom: none;
}

    .idpwSearchBox .contentTabInBox ul {
        position: relative;
        width: auto;
        height: 46px;
        text-align: left;
    }

    .idpwSearchBox .contentTabInBox li {
        display: inline-block;
        float: left;
        width: 50%;
        height: 46px;
        line-height: 46px;
        text-align: center;
        color: #2d2d2d;
        margin: 0px;
    }

        .idpwSearchBox .contentTabInBox li:first-child {
            margin-left: 0;
        }

        .idpwSearchBox .contentTabInBox li:last-child {
            margin-right: -2px;
        }

    .idpwSearchBox .contentTabInBox a.tabBtn:link,
    a.tabBtn:visited,
    a.tabBtn:active {
        float: left;
        display: inline-block;
        min-width: 100%;
        height: 46px;
        padding: 0 10px;
        line-height: 42px;
        text-align: center;
        font-size: 1.8rem;
        color: #acacac;
        text-decoration: none;
        /* margin:-1px 0px 0px -2px; */
        margin: 0;
        background-color: #f0f0f0;
        border: 1px solid #dedede;
        /*
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	behavior: url(/pie/PIE.htc);
	*/
    }

    .idpwSearchBox .contentTabInBox a.tabBtn:hover {
        color: #acacac;
        background-color: #f0f0f0;
        border: 1px solid #dedede;
    }

    .idpwSearchBox .contentTabInBox li:last-child a.tabBtn {
        margin-right: -3px;
    }

    .idpwSearchBox .contentTabInBox a.tabSelected:link,
    .idpwSearchBox .contentTabInBox a.tabSelected:visited,
    .idpwSearchBox .contentTabInBox a.tabSelected:hover,
    .idpwSearchBox .contentTabInBox a.tabSelected:active {
        float: left;
        display: inline-block;
        min-width: 100%;
        height: 46px;
        line-height: 46px;
        padding: 0 15px;
        text-align: center;
        font-size: 1.8rem;
        color: #fff;
        text-decoration: none;
        margin: -1px 0px 0px 0px;
        background-color: #317ac5;
        border: 1px solid #317ac5;
        border-bottom: 1px solid #fff;
        /*
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	behavior: url(/pie/PIE.htc);
	*/
    }

    .idpwSearchBox .contentTabInBox li:fisrt-child a.tabSelected {
        margin-left: 1px;
    }

    .idpwSearchBox .contentTabInBox a.tabSelected:link .tabLine,
    a.tabSelected:visited .tabLine,
    a.tabSelected:hover .tabLine,
    a.tabSelected:active .tabLine {
        position: relative;
        display: block;
        margin-top: -3px;
        border-top: 1px solid #317ac5;
    }

        .idpwSearchBox .contentTabInBox a.tabSelected:link .tabLine .bottomArrow,
        a.tabSelected:visited .tabLine .bottomArrow,
        a.tabSelected:hover .tabLine .bottomArrow,
        a.tabSelected:active .tabLine .bottomArrow {
            position: absolute;
            z-index: 5;
            top: 0;
            left: 50%;
            margin-left: -7%;
            width: 0;
            height: 0;
            text-align: center;
            border-top: 5px solid #317ac5;
            border-right: 5px solid transparent;
            border-bottom: 0 solid transparent;
            border-left: 5px solid transparent;
        }

.idpwSearchBox .testTopBox {
    position: relative;
    margin: 20px;
}

ul.popupList {
    position: relative;
    display: block;
    padding: 10px;
    font-size: 13px;
    background-color: #f9f9f9;
    box-sizing: border-box;
}

    ul.popupList li {
        position: relative;
        padding: 3px 0;
        padding-left: 10px;
        text-align: left;
    }

        ul.popupList li:before {
            position: absolute;
            z-index: 10;
            top: 50%;
            left: 0;
            width: 3px;
            height: 3px;
            background-color: #2d2d2d;
            transform: translate(0, -50%);
            border-radius: 50%;
            content: "";
        }

.popupListLineTable {
    position: relative;
    display: block;
    /* margin: 10px; */
    padding: 0 15px 15px;
    box-sizing: border-box;
}

    .popupListLineTable th {
        padding: 10px;
    }

    .popupListLineTable td {
        padding: 10px;
        text-align: left;
    }

    .popupListLineTable select {
        height: 40px;
    }

.popupBottomBtnBox,
.boardBottomBtnBox {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 20px 0;
}

.homeworkAskInputPopup .boardBottomBtnBox {
    margin: 0;
    margin-top: auto;
    padding: 20px 0;
}

.popupBottomBtnBox button,
.boardBottomBtnBox button {
    margin: 0 2px;
}

.joinCheckBtn {
    position: relative;
    width: 100px;
    height: 32px;
    margin: 0 10px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #252d40;
    border: none;
    border-radius: 42px;
    cursor: pointer;
}

.newPopupBox .communityViewTable {
    margin-top: 10px;
}

.newPopupBox .communityBottomBtnBox {
    justify-content: center;
}

.newPopupListLineTable {
    margin: 10px 0;
    font-size: 1.7rem;
    background-color: #fff;
    border-top: 2px solid #2d2d2d;
}

    .newPopupListLineTable th {
        padding: 20px 10px;
        text-align: center;
        font-size: 1.7rem;
        font-weight: bold;
        color: #000;
        background-color: #f0f0f0;
        border-bottom: 1px solid #dedede;
    }

    .newPopupListLineTable td {
        line-height: 1.5;
        padding: 10px;
        text-align: left;
        font-size: 1.6rem;
        border-bottom: 1px solid #dedede;
    }

.newPopupTitle {
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 65px;
    padding-left: 65px;
    text-align: left;
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;
    background-color: #53b1e6;
    box-sizing: border-box;
}

    .newPopupTitle:before {
        position: absolute;
        top: 10px;
        left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 45px;
        height: 45px;
        font-size: 2.3rem;
        color: #53b1e6;
        background-color: #fff;
        border-radius: 50%;
        content: "\e936";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.newPopupContent {
    position: relative;
    padding: 10px;
    box-sizing: border-box;
}

.popupTopBox {
    position: relative;
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 42px;
    margin: 10px 0;
    padding-left: 42px;
    text-align: left;
    font-size: 1.8rem;
    color: #fff;
    background-color: #b56a6a;
    border-radius: 65px;
    box-sizing: border-box;
    font-family: 'Roboto', 'noto', sans-serif;
}

    .popupTopBox:before {
        position: absolute;
        top: 2px;
        left: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 38px;
        font-size: 2.5rem;
        color: #fff;
        border-radius: 50%;
        content: "\e900";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.newPopupUploadTitle {
    position: relative;
    display: flex;
    flex-shrink: 0;
    width: 140px;
    font-size: 15px;
    font-weight: bold;
    color: #004c99;
}

.newPopupTopBox {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 50px;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #acacac;
    box-sizing: border-box;
}

ul.newPopupUploadList {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

    ul.newPopupUploadList li {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 5px;
    }

.newPopupUploadBox {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

    .newPopupUploadBox input,
    .newPopupUploadBox button {
        margin: 3px;
    }

.boardListTopBox {
    position: relative;
    display: flex;
    align-items: center;
    padding: 5px;
    background-color: #f0f7ff;
    border: 2px solid #5d5d5d;
    border-bottom: none;
}

.refreshBtn {
    padding: 0 20px;
    color: #ff3000;
    border: 1px solid #ff3000;
}

.popupBottomBtnBox {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 20px 0;
}

.newPaymentBtn {
    position: relative;
    width: 120px;
    height: 42px;
    margin: 0 10px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #252d40;
    border: none;
    border-radius: 42px;
    cursor: pointer;
}

ul.popupBottomList {
    position: relative;
    display: block;
    font-size: 1.7rem;
    font-weight: normal;
}

    ul.popupBottomList li {
        position: relative;
        margin: 3px 0;
        padding-left: 10px;
        text-align: left;
    }

        ul.popupBottomList li:before {
            position: absolute;
            z-index: 10;
            top: 0;
            left: 0;
            width: 5px;
            height: 5px;
            font-size: 2rem;
            color: #000;
            content: "·";
        }

/* homework manage popup */
.newPopupHomeworkInfo {
    position: relative;
    display: flex;
    flex-grow: 1;
    width: 100%;
    height: 80px;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 100px;
}

.newPopupHomeworkInfoBox {
    position: relative;
    display: flex;
    align-items: center;
}

.newPopupHomeworkInfoNoIcon {
    position: relative;
    display: flex;
    width: 72px;
    height: 72px;
    margin-left: 4px;
    background-color: #f0f0f0;
    border: 2px solid #dedede;
    border-radius: 50%;
}

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

    .newPopupHomeworkInfoNoIcon:before {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 67px;
        height: 67px;
        font-size: 42px;
        color: #969696;
        content: "\ea26";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.newPopupHomeworkInfoImg {
    position: relative;
    width: 72px;
    height: 72px;
    margin-left: 4px;
    background-color: #f0f0f0;
    border: 2px solid #dedede;
    border-radius: 50%;
    overflow: hidden;
}

    .newPopupHomeworkInfoImg img {
        width: 100%;
        border-radius: 50%;
    }

.newPopupHomeworkMyInfoBox {
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    margin-left: 15px;
    padding: 10px 15px;
    background-color: #484848;
    border-left: 1px solid #777;
    border-right: 1px solid #777;
}

.newPopupHomeworkInfo .newPopupHomeworkMyInfoBox {
    padding: 0;
    background-color: transparent;
    border: none;
}

.newPopupHomeworkTaskInfoBox {
    margin: 0 auto;
}

.newPopupHomeworkMyNameBox {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 5px;
    font-size: 16px;
    color: #fff;
    font-family: 'Noto Sans KR', sans-serif;
}

.newPopupHomeworkInfo .newPopupHomeworkMyNameBox {
    font-size: 18px;
    font-weight: bold;
    color: #000;
}

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

.uncheckedPortfolioBox {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 32px;
    margin-left: 10px;
    padding: 0 5px 0 15px;
    font-size: 1.4rem;
    color: #fff;
    background-color: #ff4a4a;
    border-radius: 48px;
}

.studyDownloadBtn {
    padding: 0 42px 0 15px;
    color: #fff;
    background-color: #ff4a4a;
    border: none;
}

    .studyDownloadBtn:before {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        width: 52px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        color: #fff;
        content: "\e939";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.newPopupHomeworkMyInfoList {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: auto;
    padding-right: 5px;
}

.newPopupMyClassInfoBox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 172px;
    height: 68px;
    margin-right: -50px;
    padding: 8px 50px 8px 20px;
    font-weight: bold;
    background-color: #f9f9f9;
    border: 1px solid #acacac;
    border-radius: 72px 0 0 72px;
    box-sizing: border-box;
}

.popupBoxTitle .newPopupMyClassInfoBox {
    height: 48px;
    background-color: #464e5d;
    border: 1px solid #364252;
}

.newPopupMyClassInfoBox span {
    font-size: 16px;
}

.popupBoxTitle .newPopupMyClassInfoBox span {
    font-size: 14px;
}

a.newPopupMyClassInfoLink:link,
a.newPopupMyClassInfoLink:visited,
a.newPopupMyClassInfoLink:hover,
a.newPopupMyClassInfoLink:active {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 160px;
    height: 68px;
    line-height: 1.3;
    padding: 13px 48px 8px 0;
    font-weight: bold;
    color: #fff;
    background: url("../images/bg/bg_line.png") repeat left top #252d40;
    border: none;
    border-radius: 72px;
    box-sizing: border-box;
}

.popupBoxTitle a.newPopupMyClassInfoLink {
    height: 48px;
    padding: 7px 36px 7px 0;
}

a.newPopupMyClassInfoLink:before {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 68px;
    height: 68px;
    font-size: 32px;
    color: #fff;
    content: "\e931";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.popupBoxTitle a.newPopupMyClassInfoLink:before {
    width: 60px;
    height: 48px;
    font-size: 24px;
}

a.newPopupMyClassInfoLink span {
    text-align: center;
    font-size: 16px;
}

.popupBoxTitle a.newPopupMyClassInfoLink span {
    font-size: 14px;
}

.newPopupBtnBox {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 52px;
    padding: 0 5px;
    background-color: #f9f9f9;
    border: 1px solid #acacac;
}

.popupContentLeftLeftBox .newPopupBtnBox {
    flex-direction: column;
    align-items: flex-start;
    width: 100% !important;
    height: 208px;
    /* min-height: 52px; */
    /* padding: 10px; */
    background-color: #f9f9f9;
    border: 2px dashed #5d5d5d;
}

    .popupContentLeftLeftBox .newPopupBtnBox button {
        margin: 3px 0;
    }

ul.popupBtnList {
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: 100%;
    border-top: 1px solid #dedede;
}

    ul.popupBtnList li {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 2px 5px;
        border-bottom: 1px solid #dedede;
    }

        ul.popupBtnList li:nth-child(even) {
            background-color: #f0f0f0;
        }

        ul.popupBtnList li strong {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            margin-left: auto;
        }

.Byellow.FS12.P5 {
    position: relative;
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    min-height: 24px;
    padding: 3px 5px;
    background-color: #fff !important;
    border: 1px solid #acacac;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

    .Byellow.FS12.P5:before {
        position: absolute;
        z-index: 5;
        top: -12.5px;
        left: 4px;
        border-top: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #acacac;
        border-left: 6px solid transparent;
        content: "";
    }

    .Byellow.FS12.P5:after {
        position: absolute;
        z-index: 10;
        top: -10px;
        left: 5px;
        border-top: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #fff;
        border-left: 5px solid transparent;
        content: "";
    }

.newPopupBtnRightBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 49px;
    margin: -10px -5px -10px 0;
    margin-left: auto;
    padding: 0 10px;
    background-color: #f6ffff;
    border-left: 1px solid #dedede;
}

.newPopupBlueBtn {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    height: 32px;
    margin: 0 5px;
    padding: 0 20px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #2a3785;
    border: none;
    border-radius: 42px;
}

.newPopupRedBtn {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    height: 32px;
    margin: 0 5px;
    padding: 0 20px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #df373d;
    border: none;
    border-radius: 42px;
}

.newPopupBlackBtn {
    position: relative;
    display: inline-block;
    max-width: calc(100% - 125px);
    height: 32px;
    margin: 0 5px;
    padding: 0 20px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #252d40;
    border: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 42px;
}

.newPopupBlueBtn,
.newPopupRedBtn,
.newPopupBlackBtn {
    height: 28px;
    font-size: 12px;
}

.popupBoxContentTitle .newPopupRedBtn {
    height: 24px;
}

.assignmentEvaluationBox {
    position: relative;
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 10px;
    width: calc(100% - 10px);
    height: 154px;
}

.assignmentContentBox {
    position: relative;
    display: block;
    height: 64px;
    padding: 5px;
    text-align: left;
    background-color: #f7feff;
    border: 1px solid #acacac;
    box-sizing: border-box;
}

.assignmentContentInBox {
    height: 50px;
}

.assignmentTitle {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 28px;
    font-size: 16px;
}

ul.assignmentList {
    position: relative;
    font-size: 14px;
}

    ul.assignmentList li {
        padding: 2px 2px 2px 0;
    }

.onlineTaskListBox {
    display: block;
    height: 184px;
    background-color: #f1fdff;
    border: 1px solid #acacac;
}

.newPopupMyClassContentBox {
    position: relative;
    display: block;
    min-height: 50px;
    margin-top: 15px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 20px;
}

.newPopupMyClassContentTitle {
    position: relative;
    display: block;
    height: 32px;
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: left;
    font-size: 2rem;
    font-weight: bold;
}

.newPopupHomeworkListTable {
    position: relative;
    display: block;
    min-width: 750px;
    margin: 0;
    background-color: #fff;
    border-top: 2px solid #252d40;
}

    .newPopupHomeworkListTable th {
        height: 48px;
        line-height: 1.5;
        padding: 7px;
        text-align: center;
        font-size: 14px;
        color: #5d5d5d;
        background-color: #f0f0f0;
        border-bottom: 1px solid #dedede;
    }

    .newPopupHomeworkListTable td {
        padding: 7px;
        text-align: center;
        font-size: 14px;
        border-bottom: 1px solid #dedede;
    }

        .newPopupHomeworkListTable td .adressBox {
            display: block;
            margin: 3px 0;
        }

    .newPopupHomeworkListTable tbody > tr:first-child > td {
        border-top: none;
    }

    .newPopupHomeworkListTable .textInput {
        position: relative;
        display: inline-block;
        height: 40px;
        line-height: 40px;
        text-align: left;
        text-indent: 10px;
        font-size: 1.6rem;
        background-color: #fff;
        border: 1px solid #acacac;
        box-sizing: border-box;
    }

    .newPopupHomeworkListTable select {
        height: 36px;
    }

.newHomeworkUploadBtn {
    position: relative;
    display: inline-block;
    height: 24px;
    margin: 0;
    padding: 0 25px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #ec6717;
    border: none;
    border-radius: 42px;
    cursor: pointer;
    animation-name: HomeworkUpload;
    animation-timing-function: linear;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes HomeworkUpload {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }
}

.mypageSubContentBox {
    position: relative;
    display: flex;
    margin: 20px auto 20px;
}

.newHomeworkPrintBtn {
    height: 24px;
    font-size: 12px;
    color: #fff;
    padding: 0 20px;
    background-color: #56ad41;
    border: 1px solid #56ad41;
}

.newLeftNavBox {
    position: relative;
    display: flex;
    width: 200px;
    align-items: stretch;
    background-color: #fff;
    background-size: 70% auto;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
}

.newPopupMyClassRightBox {
    position: relative;
    top: -20px;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    padding: 5px 10px;
    background-color: #f9f9f9;
    border: 1px solid #acacac;
    border-radius: 10px;
}

.selfCheckBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    margin: -5px -11px 5px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #343c4d;
    border-bottom: 1px solid #acacac;
    border-radius: 9px 9px 0 0;
}

.selfCheckTopBox,
.taskFileBottomBox,
.taskManagementTopBox,
.classManagementTopBox,
.onlineTaskBox {
    padding: 10px;
    background-color: #f9f9f9;
    border: 2px dashed #5d5d5d;
}

.selfCheckListBox {
    position: relative;
    display: flex;
    /* justify-content: space-between; */
    justify-content: center;
    align-items: center;
}

.newCheckSaveBtn {
    padding: 0 20px;
    font-size: 14px;
    color: #fff;
    background-color: #252d40;
    border: 1px solid #252d40;
}

.myHomeworkListTitle {
    position: relative;
    display: inline-flex;
    margin-left: 10px;
    font-size: 16px;
    font-weight: bold;
}

.myHomeworkListBox,
.taskManagementBox,
.classManagementBox {
    display: block;
    height: 86px;
    background-color: #f7feff;
    border: 1px solid #acacac;
    overflow: auto;
}

ul.myHomeworkList {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 84px;
}

    ul.myHomeworkList li {
        display: flex;
        align-items: center;
        height: 18px;
        line-height: 1.2;
        margin: 0;
        padding: 0 5px;
        text-align: left;
    }

a.homeworkLink:link,
a.homeworkLink:visited,
a.homeworkLink:hover,
a.homeworkLink:active {
    font-size: 14px;
}

.myHomeworkContentBox {
    position: relative;
    display: block;
    height: calc(50vh - 30px);
    padding: 10px 5px;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
    box-sizing: border-box;
}

.myHomeworkContentInBox {
    height: calc(50vh - 55px);
}

.myHomeworkContent {
    padding: 0 5px;
    box-sizing: border-box;
}

.newPopupBottomBtnBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    padding: 20px 0;
}

    .newPopupBottomBtnBox button {
        margin: 0 5px;
    }

.newPopupSaveBtn,
.newPopupReplyBtn {
    width: 120px;
    height: 42px;
    font-weight: bold;
    color: #fff;
    background-color: #252d40;
    border: 1px solid #252d40;
}

ul.newPopupUploadList .newPopupSaveBtn {
    width: auto;
    min-width: 120px;
    padding: 0 20px;
}

.newPopupUploadExBox {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    .newPopupUploadExBox span {
        margin: 0 5px;
    }

.onlineTaskTable {
    position: relative;
    display: block;
}

    .onlineTaskTable table {
        table-layout: fixed;
        border-collapse: separate;
    }

    .onlineTaskTable td {
        padding: 2px 5px;
        text-align: center;
        border-bottom: 1px solid #dedede;
    }

    .onlineTaskTable table > tbody > tr:nth-child(even) > td {
        background-color: #e4fbff;
    }

/* attendance alarm popup */
.newPopupMiddleBoxInTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
    background-color: #f9f9f9;
    border: 1px solid #acacac;
    border-radius: 52px;
}

.infoModify .newPopupMiddleBoxInTitle {
    padding: 0 10px;
}

.scoreManagePopup .newPopupMiddleBoxInTitle {
    justify-content: center;
}

.newPopupMiddleBoxInTitle .classSearchBtn {
    font-size: 14px;
    height: 32px;
    margin-right: -18px;
    padding: 0 20px;
    border: none;
}

.popupTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    margin-left: -10px;
    padding: 0 30px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #000;
    border-radius: 48px 0 0 48px;
}

.scoreViewTitle {
    position: relative;
    display: flex;
    font-size: 24px;
    font-weight: bold;
    color: #1e84e1;
}

.classEvaluationPopup .newPopupMiddleBoxInTitle {
    justify-content: center;
}

.newPopupMiddleBoxInTitle ul.checkList {
    margin-left: auto;
}

.inputDateBox {
    position: relative;
    display: flex;
    height: 32px;
}

    .inputDateBox:before {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        font-size: 20px;
        color: #9d9d9d;
        content: "\e933";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.newPopupStudentName {
    display: flex;
    align-items: center;
    height: 52px;
    margin-left: 10px;
}

.myClassSelectBox {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border-top: 1px solid #acacac;
    border-bottom: 1px solid #acacac;
}

.myClassSelectInBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0;
    background-color: #f9f9f9;
    border-bottom: 1px solid #acacac;
}

    .myClassSelectInBox ul.checkboxList {
        margin-left: 10px;
    }

.myClassTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #252d40;
}

ul.newPopupTopList {
    position: relative;
    display: block;
}

    ul.newPopupTopList li {
        position: relative;
        display: block;
        padding: 5px;
        background-color: #f9f9f9;
        border-top: 1px solid #acacac;
        border-bottom: 1px solid #acacac;
        box-sizing: border-box;
    }

.newPopupCancelBtn {
    width: 120px;
    height: 42px;
    font-weight: bold;
    color: #5d5d5d;
    background-color: #fff;
    border: 1px solid #acacac;
}

/* class evaluation popup */
ul.newPopupClassList {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(45%, auto));
    gap: 10px;
    width: 100%;
    height: calc(100vh - 152px);
}

    ul.newPopupClassList li {
        height: calc(50vh - 82px);
        box-sizing: border-box;
    }

.classListBox {
    position: relative;
    display: block;
    height: 100%;
    padding: 10px;
    border: 1px solid #acacac;
    box-sizing: border-box;
}

.classListInBox {
    position: relative;
    display: block;
    padding: 5px 10px;
    box-sizing: border-box;
}

.totalPointBox input {
    text-align: right;
    color: #1B92C4;
    font-weight: bold;
}

.testSelectBox {
    margin-left: auto;
}

.totalPointBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    margin-left: auto;
}

/* score view popup */
.mypageScoreViewLeftBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(30% - 5px);
    background: #fff;
}

.mypageScoreViewRightBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(70% - 5px);
    margin-left: auto;
    padding: 15px;
    background: #fff;
    border: 1px solid #acacac;
}

.scoreViewInBox {
    max-height: calc(100vh - 400px);
}

.scoreViewTable {
    position: relative;
    display: block;
    background-color: #fff;
    border: 1px solid #acacac;
}

    .scoreViewTable th {
        text-align: center;
        height: 32px;
        color: #000;
        background-color: #f0f0f0;
        border-right: 1px solid #acacac;
        border-bottom: 1px solid #acacac;
    }

    .scoreViewTable thead > tr > th:last-child {
        border-right: none;
    }

    .scoreViewTable tbody > tr:last-child > th {
        border-bottom: none;
    }

    .scoreViewTable td {
        text-align: center;
        height: 32px;
        padding: 5px;
        color: #5d5d5d;
        background-color: #fff;
        border-right: 1px solid #acacac;
        border-bottom: 1px solid #acacac;
    }

    .scoreViewTable tbody > tr > td:last-child {
        border-right: none;
    }

    .scoreViewTable tbody > tr:last-child > td {
        border-bottom: none;
    }

/* class community popup */
.mypageReplyTable {
    position: relative;
    display: block;
    padding: 0;
    background-color: #fff;
    border: 1px solid #acacac;
    border-radius: 5px 5px 10px 10px;
    box-sizing: border-box;
}

    .mypageReplyTable th {
        height: 32px;
        padding: 5px 10px;
        color: #2d2d2d;
        background-color: #fff;
        border-bottom: 1px dashed #acacac;
        box-sizing: border-box;
    }

.infoModify .mypageReplyTable th {
    padding: 10px;
}

.mypageReplyTable th:first-child {
    border-top-left-radius: 5px;
}

.mypageReplyTable th:last-child {
    border-top-right-radius: 5px;
}

.mypageReplyTable td {
    padding: 10px 10px 5px;
    background-color: #f0f0f0;
    box-sizing: border-box;
}

.infoModify .mypageReplyTable td {
    padding: 10px;
    background-color: #f0f0f0;
    box-sizing: border-box;
}

.mypageReplyTable td:first-child {
    border-bottom-left-radius: 12px;
}

.mypageReplyTable td:last-child {
    border-bottom-right-radius: 12px;
}

.mypageReplyInputBox {
    position: relative;
    width: calc(100% - 90px);
}

.btnReply {
    width: 84px;
    height: 64px;
    border-radius: 5px;
    border: none;
}

.mypageReplyListTable {
    position: relative;
    display: block;
    padding: 0 10px;
    background-color: #fff;
    border: 1px solid #acacac;
    border-radius: 5px 5px 10px 10px;
    box-sizing: border-box;
}

    .mypageReplyListTable td {
        height: 32px;
        padding: 10px;
        color: #2d2d2d;
        background-color: #fff;
        border-bottom: 1px dashed #acacac;
        box-sizing: border-box;
    }

    .mypageReplyListTable tr:first-child td:first-child {
        border-top-left-radius: 5px;
    }

    .mypageReplyListTable tr:first-child td:last-child {
        border-top-right-radius: 5px;
    }

    .mypageReplyListTable tr:last-child td:first-child {
        border-top-left-radius: 10px;
    }

    .mypageReplyListTable tr:last-child td:last-child {
        border-top-right-radius: 10px;
    }

    .mypageReplyListTable tr:last-child td {
        border-bottom: none;
    }

    .mypageReplyListTable tbody > tr:nth-child(even) > td {
        background-color: #f9f9f9;
    }

.replyDeleteBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    background-color: #ffe9e9;
    border: 1px solid #cd581c;
    border-radius: 5px;
}

    .replyDeleteBtn span {
        display: block;
        text-indent: -9999px;
    }

    .replyDeleteBtn:before {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 22px;
        font-size: 10px;
        color: #cd581c;
        content: "\e914";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.deleteBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 20px;
    font-size: 12px;
    color: #cd581c;
    background-color: #fff;
    border: 1px solid #cd581c;
    border-radius: 32px;
}

/* self study popup */
.selfStudyLayer {
    position: absolute;
    z-index: 11;
    top: 50%;
    left: 50%;
    display: block;
    width: 400px;
    min-height: 200px;
    background-color: #f9f9f9;
    border: 1px solid #009;
    /* background: linear-gradient(270deg, #24d2a5, #2456d2, #6384d7, #541a98);
    background-size: 800% 800%;
    animation: selfStudy 5s ease infinite; */
    box-shadow: 0 20px 10px -15px rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    transform: translate(-50%, -50%);
}

@keyframes selfStudy {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.selfStudyLayerTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 52px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid #acacac;
    border-radius: 9px 9px 0 0;
}

    .selfStudyLayerTitle span {
        display: flex;
        align-items: center;
        height: 52px;
        padding-left: 62px;
        font-size: 16px;
        font-weight: bold;
        box-sizing: border-box;
    }

    .selfStudyLayerTitle:before {
        position: absolute;
        z-index: 10;
        top: 50%;
        left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        font-size: 20px;
        color: #0f98ff;
        background-color: #fff;
        /* border: 1px solid #fff; */
        border-radius: 50%;
        /* background: url("../images/common/burn.png") no-repeat center center #fff; */
        /* background-size: cover; */
        transform: translate(0, -50%);
        content: "\e939";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.selfStudyContentBox {
    position: relative;
    display: block;
    width: calc(100% - 20px);
    line-height: 1.5;
    margin: 10px auto 0;
    padding: 10px 15px;
    font-size: 15px;
    color: #fff;
    /* color: #2d2d2d; */
    background-color: rgba(65, 151, 221, 0.8);
    /* background-color: rgba(255,255,255,1); */
    border-radius: 10px;
    box-sizing: border-box;
}

    .selfStudyContentBox span {
        position: relative;
        display: block;
        margin: 3px 0;
        padding: 3px 7px;
        background-color: #3f83ba;
        border-radius: 5px;
    }

.selfStudyJoinBtn {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 30px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #657295;
    border: none;
}

/* ----------------------------- */
/*             join              */
/* ----------------------------- */
.joinTitleBox {
    position: relative;
    display: block;
    width: 100%;
    height: 62px;
    /* margin-top: 52px; */
    background-color: #f9f9f9;
    border-bottom: 1px solid #acacac;
}

.joinTitleInBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1440px;
    height: 62px;
    margin: 0 auto;
}

.joinTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    height: 62px;
    margin-left: 20px;
    font-size: 26px;
    font-weight: bold;
    font-family: 'Noto Sans KR', sans-serif;
}

ul.breadCrumbsList {
    position: relative;
    flex-shrink: 0;
    align-items: center;
    height: 62px;
    margin-left: auto;
    display: none;
}

    ul.breadCrumbsList li {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 10px;
    }

        ul.breadCrumbsList li:after {
            position: absolute;
            z-index: 10;
            top: 7px;
            right: -2px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 6px;
            height: 6px;
            border-top: 1px solid #7d7d7d;
            border-right: 1px solid #7d7d7d;
            transform: rotate(45deg);
            content: "";
        }

        ul.breadCrumbsList li:last-child:after {
            border: none;
        }

.crumbsInBox {
    position: relative;
    display: flex;
    align-items: center;
}

a.crumbsLink:link,
a.crumbsLink:visited,
a.crumbsLink:active {
    position: relative;
    min-width: 20px;
    height: 20px;
    font-size: 16px;
}

a.crumbsLink:hover {
    color: #000;
}

.crumbsInBox:hover a.crumbsLink {
    color: #000;
}

a.crumbs01 span {
    display: block;
    height: 20px;
    text-indent: -9999px;
}

a.crumbs01:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 20px;
    height: 20px;
    font-size: 18px;
    color: #7d7d7d;
    content: "\e90a";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

a.crumbs02,
a.crumbs03,
a.crumbs04 {
    padding-right: 25px;
}

    a.crumbs02:before,
    a.crumbs03:before,
    a.crumbs04:before {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20px;
        height: 20px;
        font-size: 10px;
        color: #575757;
        background-color: #fff;
        border: 1px solid #bcbcbc;
        border-radius: 3px;
        content: "\e90c";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        transition: all 0.3s;
    }

.crumbsInBox:hover a.crumbs02:before,
.crumbsInBox:hover a.crumbs03:before,
.crumbsInBox:hover a.crumbs04:before {
    background-color: #f9f9f9;
    transform: rotate(180deg);
    transition: all 0.3s;
}

.crumbsLink.on:before {
    color: #fff;
    background-color: #3c93ef;
    border: none;
}

.crumbsInBox:hover .crumbsLink.on:before {
    color: #fff;
    background-color: #3c93ef;
    transform: rotate(180deg);
    transition: all 0.3s;
}

.crumbsSubLinkBox {
    position: absolute;
    z-index: 30;
    top: 20px;
    left: 50%;
    width: 190px;
    min-height: 50px;
    padding: 10px 0;
    background-color: #fff;
    border: 1px solid #7d7d7d;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    transform: translate(-50%, 0);
    display: none;
}

.crumbsInBox:hover > .crumbsSubLinkBox {
    display: block;
}

a.crumbsSubLink:link,
a.crumbsSubLink:visited,
a.crumbsSubLink:active {
    position: relative;
    display: block;
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: normal;
    color: #7d7d7d;
    box-sizing: border-box;
}

a.crumbsSubLink:hover {
    color: #3c93ef;
    text-decoration: underline;
}

a.crumbsSubLink.on {
    padding-left: 24px;
    color: #fff;
    font-weight: bold;
    background-color: #3c93ef;
}

    a.crumbsSubLink.on:before {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        width: 24px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #fff;
        content: "\ea28";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.joinBox {
    position: relative;
    display: block;
    min-height: 100px;
    margin: 10px;
    background-color: #fff;
    border: 1px solid #acacac;
}

.joinStepBox {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 82px;
    padding: 0 20px;
    box-sizing: border-box;
}

ul.joinStepList {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(20%, auto));
    align-items: flex-start;
    width: 100%;
    height: 62px;
}

    ul.joinStepList:before {
        position: absolute;
        top: 16px;
        left: 50%;
        width: calc(100% - 50px);
        height: 1px;
        border-top: 1px solid #dedede;
        transform: translate(-50%, 0);
        content: "";
    }

    ul.joinStepList li {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

.stepNumBox {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font-size: 18px;
    font-weight: bold;
    color: #9d9d9d;
    background-color: #dedede;
    border-radius: 50%;
}

    .stepNumBox.on {
        z-index: 10;
        color: #fff;
        background-color: #3c93ef;
    }

        .stepNumBox.on:before {
            position: absolute;
            z-index: -1;
            top: 50%;
            left: 50%;
            width: 45px;
            height: 45px;
            /* border: 1px solid #3c93ef; */
            background-color: rgba(60, 147, 239, 0.4);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            content: "";
            animation: linear 1.2s infinite 0s stepBox;
        }

@keyframes stepBox {
    0% {
        background-color: rgba(60, 147, 239, 0.4);
        opacity: 0;
    }

    50% {
        background-color: rgba(60, 147, 239, 0.4);
        opacity: 1;
    }

    100% {
        background-color: rgba(255, 255, 255, 1);
        opacity: 0;
    }
}

ul.joinStepList li span {
    margin-top: 10px;
    text-align: center;
}

.joinCertificateLogoBox {
    position: absolute;
    z-index: 10;
    top: -42px;
    right: 10px;
    height: 32px;
    display: none;
}

    .joinCertificateLogoBox img {
        width: 150px;
    }

.joinSelectBox,
.joinCertificateBox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(100% - 20px);
    min-height: 100px;
    margin: 50px 10px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #acacac;
    border-radius: 10px;
    box-sizing: border-box;
}

.joinCertificateBox {
    flex-direction: column;
    margin: 30px 10px;
    padding: 20px 10px;
}

.joinSelectTitle,
.joinCertificateTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    font-size: 15px;
}

.joinCertificateTitle {
    justify-content: flex-start;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
}

.joinCertificateEx {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 24px;
    font-size: 14px;
    color: #9d9d9d;
}

ul.joinSelectList {
    position: relative;
    display: block;
    width: 100%;
}

    ul.joinSelectList li {
        display: flex;
        align-items: center;
        margin: 5px 0;
    }

        ul.joinSelectList li input {
            width: calc(100% - 85px);
        }

        ul.joinSelectList li .selectBox {
            width: calc(100% - 85px);
        }

            ul.joinSelectList li .selectBox .select {
                width: 100%;
            }

dl.joinCertificateList {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
}

    dl.joinCertificateList dt {
        position: relative;
        display: flex;
        align-items: flex-end;
        width: 100%;
        min-height: 32px;
        padding-right: 10px;
        font-size: 14px;
        font-weight: bold;
        color: #000;
        box-sizing: border-box;
    }

    dl.joinCertificateList dd {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 42px;
    }

        dl.joinCertificateList dd .selectBox {
            min-width: 60px;
            margin-right: 2px;
        }

        dl.joinCertificateList dd input {
            width: 100%;
            margin: 0 2px;
        }

/*
.joinCheckBtn,
.certificateReceiveBtn,
.certificateCheckBtn,
.doubleCheckBtn {
    padding: 0 10px;
    color: #fff;
    background-color: #3a3e51;
    border: none;
    border-radius: 5px;
}
*/

.joinSelctBtnBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 42px;
    margin: 20px 0;
}

.joinNextBtn,
.joinSaveBtn,
.joinMainBtn,
.joinLoginBtn {
    height: 42px;
    padding: 0 30px;
    font-size: 14px;
    color: #fff;
    background-color: #3c93ef;
    border: none;
    border-radius: 42px;
}

.joinCancelBtn {
    height: 42px;
    padding: 0 30px;
    font-size: 14px;
    color: #2d2d2d;
    border-radius: 42px;
}

.joinMainBtn {
    background-color: #3a3e51;
}

.joinContentBox {
    position: relative;
    display: block;
    min-height: 300px;
    padding: 10px;
    box-sizing: border-box;
}

.joinContentTitle {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    font-size: 16px;
    font-weight: bold;
}

.joinCheckBottomBox {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 42px;
}

.joinContentBottomBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 42px;
    margin: 20px 0 40px;
}

dl.joinMemberList {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 5px;
    border-top: 2px solid #acacac;
}

    dl.joinMemberList dt {
        position: relative;
        display: flex;
        align-items: flex-end;
        width: 100%;
        height: 32px;
        box-sizing: border-box;
    }

    dl.joinMemberList dd {
        position: relative;
        display: flex;
        width: 100%;
        min-height: 32px;
        box-sizing: border-box;
    }

        dl.joinMemberList dd span {
            display: flex;
            width: 50%;
            margin: 3px 0;
        }

        dl.joinMemberList dd .selectBox,
        dl.joinMemberList dd button,
        dl.joinMemberList dd input {
            margin-right: 3px;
        }

        dl.joinMemberList dd .selectBox {
            width: 100%;
        }

        dl.joinMemberList dd input {
            width: 100%;
        }

    dl.joinMemberList .FDC span {
        width: 100%;
    }

    dl.joinMemberList .FDC .W100P,
    dl.joinMemberList .FDC .W60P {
        width: calc(100% - 80px) !important;
    }

.essential {
    background-color: #30344a !important;
}

.essential {
    padding: 0 5px;
    color: #e8f7ff !important;
}

dl.joinMemberList dt.essential {
    position: relative;
    align-items: center;
    padding: 0 10px;
    color: #e8f7ff;
    background-color: #30344a;
}

/*
dl.joinMemberList dd.essential {
	background-color: #f7fdff;	
}
*/

.join05 .joinContentTitle {
    justify-content: center;
    font-size: 18px;
}

.joinEndImgBox {
    position: relative;
    display: flex;
    width: 100%;
}

    .joinEndImgBox img {
        width: 100%;
    }

.joinEndExBox {
    position: relative;
    display: block;
    line-height: 1.5;
    margin-top: 20px;
    padding: 20px 10px;
    text-align: left;
    font-size: 14px;
    color: #5d5d5d;
    border-top: 1px dashed #dedede;
}

@media all and (min-width:460px) {
    ul.joinStepList {
        position: relative;
        display: grid;
        grid-template-columns: repeat(5, minmax(20%, auto));
        align-items: center;
        width: 400px;
        height: 62px;
        margin: 0 auto;
    }

        ul.joinStepList:before {
            width: 300px;
            top: 18px;
        }

    .joinSelectBox {
        width: 420px;
        margin: 50px auto;
        padding: 20px 50px;
    }

    .joinCertificateBox {
        width: calc(100% - 100px);
        margin: 30px auto;
        padding: 20px 30px;
    }

    .joinNextBtn,
    .joinSaveBtn,
    .joinCancelBtn {
        padding: 0 50px;
    }

    .joinContentBox {
        padding: 20px;
    }
}

@media all and (min-width:560px) {
    .joinCertificateBox {
        width: 500px;
        margin: 70px auto 50px;
        padding: 20px 50px;
    }

    dl.joinCertificateList {
        flex-direction: row;
        width: 100%;
        margin-top: 20px;
    }

        dl.joinCertificateList dt {
            justify-content: flex-end;
            align-items: center;
            width: 110px;
            min-height: 42px;
        }

        dl.joinCertificateList dd {
            width: calc(100% - 110px);
        }

    .join05 .joinContentTitle {
        padding: 20px 0;
        font-size: 22px;
        background-color: #f9f9f9;
    }

    .joinEndImgBox img {
        max-width: 420px;
        margin: 0 auto;
    }

    .joinEndExBox {
        width: 560px;
        margin: 20px auto;
        padding: 30px;
        font-size: 16px;
        background: rgb(240, 240, 240);
        background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 100%);
        border: 1px solid #dedede;
        border-radius: 10px;
        box-sizing: border-box;
    }

        .joinEndExBox span {
            display: block;
        }
}

@media all and (min-width:768px) {
    .joinTitleInBox {
        justify-content: flex-start;
    }

    .joinTitle {
        justify-content: flex-start;
    }

    ul.breadCrumbsList {
        display: flex;
    }

    ul.joinStepList {
        margin: 0;
        margin-left: auto;
    }

        ul.joinStepList:before {
            width: 300px;
            top: 18px;
        }

    .joinContentBox {
        min-height: 500px;
        padding: 20px 50px;
    }

    .joinCertificateLogoBox {
        display: block;
    }
}

@media all and (min-width:1024px) {

    /* 
    .joinTitleBox {
        margin-top: 72px;  
    }
    */
    .joinBox {
        max-width: 1440px;
        min-height: 500px;
        margin: 20px 10px;
    }

    .join04 .joinContentBox {
        min-height: 500px;
        padding: 20px;
    }

    dl.joinMemberList dd {
        width: calc(100% - 130px);
    }

    dl.joinMemberList {
        margin-top: 10px;
    }

        dl.joinMemberList dt {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 130px;
            min-height: 52px;
            background-color: #f9f9f9;
            border-bottom: 1px solid #dedede;
        }

        dl.joinMemberList dd {
            align-items: center;
            width: calc(50% - 130px);
            min-height: 52px;
            padding: 0 5px;
            border-bottom: 1px solid #dedede;
        }

            dl.joinMemberList dd span {
                display: flex;
                width: auto;
                margin: 3px 0;
            }

            dl.joinMemberList dd .selectBox {
                width: auto;
            }

            dl.joinMemberList dd input {
                width: auto;
            }

        dl.joinMemberList .FDC {
            flex-direction: row;
        }

            dl.joinMemberList .FDC span {
                width: auto;
            }

            dl.joinMemberList .FDC .W100P {
                width: 100px !important;
            }

            dl.joinMemberList .FDC .W60P {
                width: 60px !important;
            }

        dl.joinMemberList dt.essential {
            position: relative;
            align-items: center !important;
            padding: 0;
            color: #e8f7ff;
            background-color: #30344a;
        }

            dl.joinMemberList dt.essential:before {
                position: absolute;
                z-index: 30;
                top: 20px;
                left: 50%;
                min-width: 80px;
                height: 32px;
                line-height: 32px;
                margin-left: -40px;
                padding: 0 5px;
                text-align: center;
                font-size: 14px;
                color: #0095ff;
                background-color: rgba(255, 255, 255, 0.8);
                border: 1px solid #b9b9b9;
                border-radius: 3px;
                box-sizing: border-box;
                box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
                content: "essential";
                display: none;
            }

            dl.joinMemberList dt.essential:hover:before {
                display: block;
            }
}

@media all and (min-width:1440px) {
    .joinBox {
        max-width: 1440px;
        min-height: 500px;
        margin: 20px auto;
    }

    dl.joinMemberList {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 5px;
        border-top: 2px solid #acacac;
    }

        dl.joinMemberList dt {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 130px;
            height: 52px;
            background-color: #f9f9f9;
            border-bottom: 1px solid #dedede;
            box-sizing: border-box;
        }

        dl.joinMemberList dd {
            position: relative;
            display: flex;
            align-items: center;
            width: calc(50% - 130px);
            height: 52px;
            padding: 0 5px;
            border-bottom: 1px solid #dedede;
            box-sizing: border-box;
        }
}

/* ----------------------------- */
/*            common             */
/* ----------------------------- */
.wrapper {
    position: relative;
    z-index: 777;
    display: block;
    width: 100%;
    overflow: hidden;
}

.headerBox {
    position: sticky;
    z-index: 888;
    top: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 82px;
    background-color: #2f2f30;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.fp-viewing-firstPage .headerBox {
    position: fixed;
}

@media all and (max-width: 1023px) {
    .headerBox {
        height: 52px;
    }

    .topWrapper {
        height: 52px;
    }

    .fp-viewing-firstPage .headerBox {
        position: sticky;
    }
}

.topWrapper {
    position: relative;
    display: flex;
    width: 100%;
    height: 82px;
}

.headerTopBox {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 82px;
}

@media all and (max-width: 1250px) {
    .headerTopBox {
        height: 52px;
    }
}

.hambergerBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    margin-left: auto;
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: none;
}

.totalNavBtn {
    position: absolute;
    z-index: 10;
    top: 85px;
    right: 5px;
    width: 42px;
    height: 42px;
    background-color: #f0f0f0;
    border: 1px solid #acacac;
    border-radius: 50%;
}

    .hambergerBtn span,
    .totalNavBtn span {
        position: absolute;
        display: block;
        left: 10px;
        top: 45%;
        width: 28px;
        height: 3px;
        background: #fff;
        border-radius: 2px;
        visibility: visible;
        overflow: visible;
        text-indent: -9999px;
    }

    .totalNavBtn span {
        left: 9px;
        width: 20px;
        background-color: #4d5053;
    }

    .hambergerBtn.on span,
    .totalNavBtn.on span {
        background: transparent;
    }

    .hambergerBtn span:before,
    .hambergerBtn span:after,
    .totalNavBtn span:before,
    .totalNavBtn span:after {
        display: block;
        content: '';
        width: 100%;
        height: 3px;
        position: absolute;
        background: #fff;
        border-radius: 2px;
        -webkit-transition: .2s ease;
        -moz-transition: .2s ease;
        -o-transition: .2s ease;
        transition: .2s ease;
    }

    .totalNavBtn span:before,
    .totalNavBtn span:after {
        background: #4d5053;
    }

    .hambergerBtn span:before,
    .totalNavBtn span:before {
        left: 0;
        top: 0;
        margin-top: -10px;
    }

    .totalNavBtn span:before {
        margin-top: -8px;
    }

    .hambergerBtn.on span:before,
    .totalNavBtn.on span:before {
        top: 12px;
        transform: rotate(45deg);
    }

    .totalNavBtn.on span:before {
        top: 9px;
    }

    .hambergerBtn span:after,
    .totalNavBtn span:after {
        left: 0;
        bottom: 0;
        margin-bottom: -10px;
    }

    .totalNavBtn span:after {
        margin-bottom: -8px;
    }

    .hambergerBtn.on span:after,
    .totalNavBtn.on span:after {
        top: 0;
        transform: rotate(-45deg);
    }

    .totalNavBtn.on span:after {
        top: 1px;
    }

.myChildBox {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    min-width: 115px;
    /* height: 82px; */
    /* margin-left: 30px; */
    margin-right: 10px;
}

    .myChildBox .selectBox {
        background-color: #fff;
    }

    .myChildBox span {
        margin-left: 5px;
    }

.searchBtnBox {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    /* height: 82px; */
    /* margin-left: 10px; */
    /* margin-right: 10px; */
}

.searchBtnMobileBox,
.searchBtnMobileBox.on {
    display: none;
}

.searchInputMobileBox,
.searchInputMobileBox.on {
    display: none;
}

.searchTopInput {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 150px;
    height: 32px;
    padding: 0 42px 0 20px;
    border: 1px solid #fff;
    border-radius: 42px;
    box-sizing: border-box;
}

.searchTopBtn {
    position: absolute;
    z-index: 10;
    right: 5px;
    width: 42px;
    height: 42px;
}

    .searchTopBtn:before,
    .searchMobileBtn:before {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        font-size: 18px;
        color: #2692c4;
        background-color: transparent;
        content: "\e90f";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

    .searchTopBtn span,
    .searchMobileBtn span {
        display: block;
        text-indent: -99999px;
    }

@media all and (max-width: 1400px) {

    /*
	.myChildBox {
		margin-right: 50px;
	}
	*/
    .searchBtnBox {
        height: 52px;
    }

    .searchBtnBox {
        display: none;
    }

    .searchBtnMobileBox.on {
        position: relative;
        z-index: 10;
        top: 0;
        /* right: 10px; */
        display: block;
    }

    .searchBtnMobileBox .searchMobileBtn {
        position: relative;
        /* top: 50%; */
        width: 32px;
        height: 32px;
        /* transform: translate(0, -50%); */
    }

        .searchBtnMobileBox .searchMobileBtn:before {
            width: 32px;
            height: 32px;
            font-size: 14px;
            color: #fff;
            background-color: #2692c4;
            border-radius: 50%;
        }

    .searchInputMobileBox {
        position: fixed;
        z-index: 10;
        top: 81px;
        right: 0;
        left: 0;
        width: 100%;
        height: 52px;
        padding: 5px 0;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.6);
        display: none;
    }

        .searchInputMobileBox.on {
            display: block;
        }

        .searchInputMobileBox .searchTopInput {
            display: inline-block;
            width: calc(100% - 80px);
            height: 42px;
            margin: 0 auto;
        }

        .searchInputMobileBox .searchTopBtn {
            right: 40px;
        }

    .searchCloseBtn {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        width: 42px;
        height: 52px;
    }

        .searchCloseBtn:before {
            position: absolute;
            z-index: 10;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 42px;
            height: 52px;
            border-radius: 50%;
            font-size: 18px;
            color: #fff;
            background-color: transparent;
            content: "\e915";
            font-family: 'icomoon' !important;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
        }

        .searchCloseBtn span {
            display: block;
            text-indent: -9999px;
        }
}

@media all and (max-width: 1120px) {
    .myChildBox {
        /*
        position: absolute;
        top: 5px;
        right: auto;
		left: 148px;
        height: 32px;
		*/
    }
}

@media all and (max-width: 1023px) {
    /*
	.fp-viewing-firstPage .headerBox {
        position: sticky;	
    }
    .searchBtnBox {
        height: 52px;
    }
	*/
    /*
    .searchTopInput {
        height: 32px;
    }
	*/
    /*
	.searchBtnMobileBox.on {
        top: 50px;
    }
	*/
}

@media all and (max-width: 767px) {
    .searchBtnBox {
        height: 52px;
    }

    .searchBtnBox {
        display: none;
    }

    .searchBtnMobileBox.on {
        /*
        position: absolute;
        z-index: 10;
        top: 80px;
        left: 5px;
        display: block;
		*/
    }

    .searchBtnMobileBox .searchMobileBtn {
        position: relative;
        top: 50%;
        width: 42px;
        height: 42px;
        transform: translate(0, -50%);
    }

        .searchBtnMobileBox .searchMobileBtn:before {
            width: 42px;
            height: 42px;
            font-size: 16px;
            color: #fff;
            background-color: #2692c4;
            border-radius: 50%;
        }

    .searchInputMobileBox {
        /*
        position: absolute;
        z-index: 10;
        top: 52px;
        right: 0;
        left: 0;
        width: 100%;
        /* height: 42px; */
        /*
        padding: 5px 0;
        text-align: center;
        background-color: rgba(0,0,0, 0.2);
        display: none;
		*/
    }

        .searchInputMobileBox.on {
            display: block;
        }

        .searchInputMobileBox .searchTopInput {
            display: inline-block;
            width: calc(100% - 80px);
            margin: 0 auto;
        }

        .searchInputMobileBox .searchTopBtn {
            right: 40px;
        }

    .searchCloseBtn {
        /*
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        width: 42px;
        height: 42px;
		*/
    }

        .searchCloseBtn:before {
            /*
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        font-size: 18px;
        color: #fff;
        background-color: transparent;
        content: "\e915";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
		*/
        }

        .searchCloseBtn span {
            /*
        display: block;
        text-indent: -9999px;
		*/
        }
}

.logoBox {
    /* position: absolute; */
    position: relative;
    z-index: 10;
    /* top: 50%; */
    /* left: 50%; */
    left: 20px;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    min-width: 120px;
    height: 52px;
    padding: 0 20px;
    background-color: #fff;
    /* transform: translate(0, -50%); */
    border-radius: 52px;
    box-sizing: border-box;
}

a.logoLink:link,
a.logoLink:visited,
a.logoLink:hover,
a.logoLink:active {
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    height: 42px;
}

a.logoLink img {
    max-width: 100px;
    max-height: 32px;
}

ul.topNavTopList {
    position: relative;
    display: flex;
    height: 32px;
    margin-left: auto;
    padding: 0 15px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 0 0 0 32px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
}

ul.topNavTopList {
    /*
    position: fixed;
    z-index: 999;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20%, auto));
    height: 42px;
    padding: 0;
    background-color: rgba(23,24,25,1);
    box-shadow: 0 -5px 5px rgba(0,0,0,0.15);
    border-radius: 0 0 0 15px;
	*/
}

/*
ul.topNavTopList li {
    display: flex;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-right: 1px;
    background-color: #fff;
    border: 1px solid #dedede;
    box-shadow: 0 -3px 3px rgba(0,0,0,0.3);
}
ul.topNavTopList li:first-child {
    margin-left: 1px;
}
*/

a.topNavTopLink:link,
a.topNavTopLink:visited,
a.topNavTopLink:hover,
a.topNavTopLink:active {
    position: relative;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    height: 42px;
    padding: 5px 10px;
    font-size: 15px;
    color: #fff;
}

ul.topNavTopList li:hover a.topNavTopLink {
    background-color: #18729b;
}

ul.topNavTopList li:first-child:hover a.topNavTopLink {
    border-top-left-radius: 15px;
}

ul.topNavTopList li:last-child:hover a.topNavTopLink {
    border-top-right-radius: 15px;
}

.topInfoBox {
    position: relative;
    display: flex;
    height: 32px;
    margin-top: 32px;
    margin-left: auto;
    margin-right: 10px;
}

@media all and (max-width: 1250px) {
    .fp-viewing-firstPage .headerBox {
        position: sticky;
    }

    .topWrapper {
        height: 52px;
    }

    .headerBox {
        height: 52px;
    }

    .logoBox {
        left: 10px;
        height: 42px;
    }

    .searchBtnBox {
        height: 52px;
    }

    .topInfoBox {
        margin-top: 0;
        margin-left: 30px;
    }

    .searchInputMobileBox {
        top: 51px;
    }

    ul.topNavTopList {
        position: fixed;
        z-index: 999;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(20%, auto));
        height: 42px;
        padding: 0;
        background-color: rgba(23, 24, 25, 1);
        box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.15);
        border-radius: 15px 15px 0 0;
    }

    a.topNavTopLink:link,
    a.topNavTopLink:visited,
    a.topNavTopLink:hover,
    a.topNavTopLink:active {
        position: relative;
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        height: 42px;
        padding: 5px 10px;
        font-size: 15px;
        color: #fff;
    }

    ul.topNavTopList li:hover a.topNavTopLink {
        background-color: #18729b;
    }

    .subTitleBox {
        position: sticky;
        z-index: 30;
        top: 72px;
    }

    .hambergerBtn {
        width: 52px;
        height: 52px;
        display: block;
    }
}

@media all and (min-width: 460) {
    .logoBox {
        transform: translate(-50%, 0);
    }
}

/* @media all and (max-width: 1023) {
    @keyframes fadeInRightBig {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }

      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
  }
}
    ul.topNavTopList.animate__fadeInRightBig {
        overflow: hidden;
    }
}
.mainBannerBox {
    margin-top: 0;
}
*/

@media all and (min-width:1024px) {
    .wrapper {
        position: relative;
        z-index: 777;
        display: block;
        /* min-width: 1180px; */
        overflow: visible;
    }

    .headerBox {
        /* min-width: 1180px; */
        /* height: 82px;
        background-color: rgba(0,0,0, 0.7); */
    }

        .headerBox.on {
            background-color: #3d3d3d;
            border-bottom: 1px solid #dedede;
        }

    .topWrapper {
        /* min-width: 1180px; */
        /* height: 82px; */
    }

    .headerTopBox {
        /* min-width: 1180px; */
        /* height: 82px;
	    margin: 0 auto; */
    }

    .hambergerBtn {
        /* 
        width: 72px;
        height: 72px;
		*/
    }

    /*
    .myChildBox {
        position: relative;
        height: 82px;
        margin-left: 40px;
    }
	*/

    .logoBox {
        /* height: 52px; */
    }

    a.logoLink:link,
    a.logoLink:visited,
    a.logoLink:hover,
    a.logoLink:active {
        width: auto;
        height: 72px;
    }

    a.logoLink img {
        max-width: 110px;
        max-height: 42px;
    }

    .mainBannerBox {
        width: 100%;
        /* min-width: 1180px; */
        margin-top: 0;
    }

    .topNavBox {
        position: absolute;
        top: -4px;
        right: 0;
        display: flex;
        align-items: center;
        /* width: calc(100% - 72px); */
        height: 32px;
        /* margin-top: 5px; */
    }

    ul.topNavTopList {
        /*
	    position: relative;
	    display: flex;
        height: 32px;
        margin-left: auto;
	    padding: 0 15px;
        background-color: rgba(0,0,0,0.3);
        border-radius: 0 0 0 32px;
        box-shadow: 0 0 0 rgba(0,0,0,0.1);
		*/
    }

        ul.topNavTopList li {
            display: flex;
            align-items: center;
            margin-right: 0;
            background-color: transparent;
            box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
            border: none;
        }

            ul.topNavTopList li:first-child {
                margin-left: 0;
            }

    a.topNavTopLink:link,
    a.topNavTopLink:visited,
    a.topNavTopLink:hover,
    a.topNavTopLink:active {
        position: relative;
        display: flex;
        flex: 1;
        align-items: center;
        height: 24px;
        padding: 5px 15px;
        font-size: 13px;
        color: #fff;
    }

    ul.topNavTopList li:hover a.topNavTopLink {
        background-color: rgba(134, 140, 144, 0.3);
        border-radius: 32px !important;
    }

    ul.topNavTopList li:first-child:hover a.topNavTopLink {
        border-top-left-radius: 0;
    }

    ul.topNavTopList li:last-child:hover a.topNavTopLink {
        border-top-right-radius: 0;
    }

    /*
    .learnpiaIconBox {
        width: 100%;
    }
	*/
}

@media all and (max-width:1023px) {
    .logoBox {
        height: 42px;
    }

    .myChildBox {
        /*
		position: absolute;
        top: 0;
        right: 65px;
		left: auto;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        min-width: 115px;
        height: 52px;
		*/
    }

    .hambergerBtn {
        /*
        display: block;
		*/
    }

    .searchBtnMobileBox.on {
        /*
        position: absolute;
        z-index: 10;
        top: 80px;
        left: 10px;
        display: block;
		*/
    }

    .searchInputMobileBox.on {
        /*
		top: 52px;
		*/
    }
}


/* top nav */
ul.depth1 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 82px;
    margin-left: 30px;
}

    ul.depth1 li {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 140px;
        height: 81px;
        /* margin: 0 10px; */
        /* padding: 0 15px; */
        padding: 0;
    }

@media all and (max-width: 1250px) {
    ul.depth1 {
        display: none;
    }
}

@media all and (max-width: 768px) {
    ul.depth1 {
        display: none;
    }
}

ul.depth1 li ul.depth2 {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

ul.depth1 li:hover ul.depth2 {
    background-color: rgba(0, 0, 0, 0.5);
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

ul.depth1 li a.navListLink:link,
ul.depth1 li a.navListLink:visited,
ul.depth1 li a.navListLink:active {
    position: relative;
    z-index: 15;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 78px;
    text-decoration: none;
}

/*
ul.depth1 li a.navListLink:hover {
	border-bottom: 3px solid #3e92da;
}
*/

ul.depth1 li a.navListLink.selected {
    border-bottom: 3px solid #3e92da;
}

ul.depth1 li a.navListLink:after {
    position: absolute;
    /*
    left: -10px;
    right: -10px;
	*/
    right: 0;
    left: 0;
    bottom: -3px;
    z-index: -1;
    height: 5px;
    content: "";
    background-color: #2180c2;
    transform: scaleX(0);
    transition: transform 0.3s;
    box-sizing: border-box;
}

ul.depth1 li:hover a.navListLink:after {
    height: 5px;
    background-color: #3e92da;
    transform: scaleX(1);
}

/*
@media (min-width: 768px) {
ul.depth1 li {
	padding: 0 16px;
	box-sizing: border-box;
	}
}

@media (min-width: 992px) {
ul.depth1 li {
	padding: 0 30px;
	box-sizing: border-box;
	}
}

@media (min-width: 1200px) {
ul.depth1 li {
	width: 150px;
	padding: 0;
	box-sizing: border-box;
		}

ul.depth1 li:last-child {
	padding: 0;
	box-sizing: border-box;
		}
  }
 */

ul.depth1 li a.navListLink:link,
ul.depth1 li a.navListLink:visited,
ul.depth1 li a.navListLink:hover,
ul.depth1 li a.navListLink:active {
    padding: 0 20px;
    text-align: left;
    font-size: 16px;
    color: #fff;
}

/*
ul.depth1 li a.navListLink span {
	display: inline-block;
    height: 32px;
    line-height: 32px;
    padding: 0 15px;
	color: #fff;
	background-color: #252d40;
	border-radius: 42px;
}
*/

ul.depth2 {
    position: absolute;
    z-index: 50;
    top: 82px;
    right: 0;
    left: 0;
    /*
	left:  -10px;
    right: -10px;
	*/
    /* width: 100%; */
    height: 0;
    padding-top: 5px;
    /* display: none; */
    overflow: hidden;
    transition: all .3s;
}

    ul.depth2.on {
        height: 255px;
        display: visible;
        transition: all .3s;
    }

@media all and (max-width: 1024px) {
    ul.depth2 {
        top: 45px;
    }
}

ul.depth2:hover {
    background-color: #f9f9f9;
    border-left: 1px solid #dedede;
    border-right: 1px solid #dedede;
}



ul.depth2 li {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    margin: 0;
    /* padding: 0 10px; */
    text-align: left;
}

    ul.depth2 li a.navSubLink:link,
    ul.depth2 li a.navSubLink:visited,
    ul.depth2 li a.navSubLink:hover,
    ul.depth2 li a.navSubLink:active {
        position: relative;
        z-index: 90;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        width: 100%;
        height: 40px;
        /* padding-left: 10px; */
        padding: 0 10px;
        font-size: 14px;
        color: #f0f0f0;
        letter-spacing: -0.5px;
        box-sizing: border-box;
    }

    /*
ul.depth2 li a.navSubLink:link:before, 
ul.depth2 li a.navSubLink:visited:before, 
ul.depth2 li a.navSubLink:hover:before, 
ul.depth2 li a.navSubLink:active:before {
	position: absolute;
	z-index: 70;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 15px;
	height: 40px;
	font-size: 2rem;
	color : #5d5d5d;
	content: "·";	
}
*/
    /*
ul.depth2 li a {
	z-index: 90;
	padding-left: 10px;
	text-align: left;
	font-weight: 300;
	font-size:  15px;
	color: #000;
	box-sizing: border-box;
}
*/

    ul.depth2 li:hover a.navSubLink {
        color: #3e92da;
        /* background-color: #1b64b5; */
        text-decoration: none;
    }

    /*
ul.depth1 li:hover ul.depth2 li a.navSubLink:before {
	position: absolute;
    z-index: 70;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10px;
    height: 40px;
    font-size: 2rem;
    color: #5d5d5d;
    content: "·";
}
*/

    /* 
ul.depth2 li a:before {
	position: absolute;
	z-index: 70 !important;
	top: 1px;
	left: 5px;
	width: 5px;
	height: 5px;
	font-size: 2rem;
	color : #000;
	content: "·";
}
*/

    ul.depth2 li:hover a.selected:before {
        color: #fff !important;
    }

/* 
@media (min-width: 768px) {
ul.depth2 li {
	margin: 0 !important;
	padding: 0 !important;
	}
ul.depth2 li a {
	text-align: left;
	font-size:  15px;
	}
}

@media (min-width: 1200px) {
ul.depth2 li a {
	text-align: left;
	font-size:  15px;
	}
}
*/

.topSubBox {
    position: absolute;
    z-index: 40;
    top: 81px;
    left: 0;
    right: 0;
    height: 0;
    /* min-height:10px; */
    background-color: rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid #000;
    /*box-shadow:  #dedede 0px 3px 3px; */
    transition: all .3s;
    /* display: none; */
}

    .topSubBox.on {
        height: 257px;
        transition: all .3s;
    }

@media all and (max-width: 1249px) {
    .topSubBox {
        top: 52px;
    }
}

.topSubBox:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

/*
@media all and (min-width: 768px) {
    .sideNavBox {
        display: none;
    }    
}
*/

@media all and (min-width:1024px) {
    .depth01 {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        width: 100%;
        height: 52px;
        /* padding: 0 20px; */
        color: #fff;
    }

        .depth01 span {
            position: relative;
            font-size: 16px;
        }

    .topWrapper.on .depth01 span {
        color: #2d2d2d;
    }

    .depth01 span:after {
        position: absolute;
        display: flex;
        display: block;
        content: "";
        width: 100%;
        height: 2px;
        background-color: #166ce3;
        transform: scale(0, 1);
        transition: all 0.3s ease;
        left: 0;
        bottom: -5px;
    }

    .depth01.selected span:after {
        transform: scale(1, 1);
    }

    /*
    .depth01:before {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 52px;
        height: 52px;
        font-size: 18px;
        color: #9d9d9d;
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        transition: all 0.3s;
    }
    */

    /*
    @media screen and (max-width: 1440px) {
        .depth01:before {
            font-size: 24px;
            transition: all 0.3s;
        }
    }
    @media screen and (max-width: 1270px) {
        .depth01:before {
            font-size: 18px;
            transition: all 0.3s;
        }
    }
    @media screen and (max-width: 980px) {
        .depth01:before {
            font-size: 24px;
            transition: all 0.3s;
        }
    }
    */

    .sideNavBox.on .depth01:before {
        font-size: 24px;
        transition: all 0.3s;
    }

    .sideNavBox.on:hover .depth01:before {
        font-size: 18px;
        transition: all 0.3s;
    }

    /*
    @media screen and (max-width: 767px) {
        .sideNavBox.active .depth01:before {
            font-size: 18px;
            transition: all 0.3s;
        }
    }


    @media screen and (max-width: 1440px) {
        .sideNavBox:hover .depth01:before {
            font-size: 18px;
            transition: all 0.3s;
        }
    }
    */

    /*
    .depth01:after {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 52px;
        height: 52px;
        font-size: 14px;
        color: #9d9d9d;
        content: "\e90c";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        transition: all 0.3s;
    }
    .depth01.on:after {
        transform: rotate(180deg);
        transition: all 0.3s;
    }

    */

    /*
    .sideNavBox.on .depth02 span {
        display: none;	
    }
    */
    .sideNavBox.on:hover .depth02 span {
        display: block;
    }

    .sideNavBox.on:hover .depth02:hover span {
        margin-left: 0;
    }

    .navLogoBox {
        height: 52px;
    }

        .navLogoBox img {
            max-width: 120px;
            max-height: 42px;
        }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    /*
    .learnpiaStudyBox img {
        width: 100%;
    }
	*/
}

/*
@media screen and (max-width: 767px) {
    #section1 {
        display: none;
    }        
}
/* ------------------------- */
/*       main content        */
/* ------------------------- */
.mainContent {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
}

.contentStudyMainBox {
    position: relative;
    display: block;
    width: 1180px;
    margin: 0 auto;
    /* padding: 20px; */
    /* background-color: #575f63;
    border: 10px solid #fff;
	*/
    box-sizing: border-box;
}

.eniEnglish .contentStudyMainBox {
    background-color: #ffecec;
    border: 10px solid #aa2151;
}

.sallbarun .contentStudyMainBox {
    width: 100%;
    background-color: transparent;
    border: none;
}

.clssam .contentStudyMainBox {
    max-width: 1180px;
    padding: 0;
    background-color: #c9eeff;
    border: 10px solid #3e65c1;
}

.paxEnglish .contentStudyMainBox {
    top: -35px !important;
    background-color: #f1faff;
    border: 10px solid #3e65c1;
}

.pamus .contentStudyMainBox {
    max-width: 1180px;
    padding: 0;
    background-color: #fff;
}

.learnpiaStudyBox {
    position: relative;
    display: block;
    height: 100vh;
}

.eniEnglish .learnpiaStudyBox,
.clssam .learnpiaStudyBox,
.sallbarun .learnpiaStudyBox,
.paxEnglish .learnpiaStudyBox,
.pamus .learnpiaStudyBox {
    height: auto;
}

.learnpiaStudyBox img {
    max-width: 1180px;
    margin: 0 auto;
}

.learnpiaStudyInBox {
    position: relative;
    display: block;
}

.learnpiaStudyTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    font-size: 20px;
    color: #fff;
}

.learnpiaStudyListBox {
    position: relative;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
}

ul.learnpiaStudyList,
ul.sallbarunStudyList,
ul.clssamStudyList {
    position: relative;
    display: grid;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.sallbarun ul.learnpiaStudyList,
.sallbarun ul.sallbarunStudyList,
.clssam ul.clssamStudyList {
    gap: 0;
}

ul.learnpiaStudyList li,
ul.sallbarunStudyList li {
    position: relative;
    display: flex;
    flex-direction: column;
    /*padding: 10px; */
    box-sizing: border-box;
}

    ul.learnpiaStudyList li .learnpiaStudyListBox {
        position: relative;
        display: block;
        padding: 10px;
        box-sizing: border-box;
    }

.sallbarunIconBox {
    position: absolute;
    top: -100px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

/*
.sallbarunIconBox.icon01 {
	top: -185px;
}
.sallbarunIconBox.icon02 {
	top: -230px;
}
.sallbarunIconBox.icon03 {
	top: -300px;
}
*/
/*
.sallbarunIconTextBox {
	position: relative;
	display: flex;
    flex-direction: column;
	align-items: center;
    margin-top: auto;
	padding: 100px 0 20px;
	background-color: #fffef1;
	background: rgb(255,255,255);
    background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(240,240,240,1) 100%);
    background: -o-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(240,240,240,1) 100%);
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(240,240,240,1) 100%);
}
*/
.sallbarunIconTextBox:before {
    position: absolute;
    z-index: 20;
    top: -100px;
    width: 50%;
    height: 50px;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 0 110px 30px 20px rgba(0, 0, 0, 0.1);
    content: "";
}

/*
.sallbarun .sallbarunStudyList li:nth-child(1) .sallbarunIconTextBox {
	border-top: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
	border-left: 1px solid #dedede;
}
.sallbarun .sallbarunStudyList li:nth-child(2) .sallbarunIconTextBox {
	border-top: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
} 
.sallbarun .sallbarunStudyList li:nth-child(3) .sallbarunIconTextBox {
	border-top: 1px solid #dedede;
	border-right: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
}
*/

.sallbarun ul.learnpiaStudyList {
    position: absolute;
    z-index: 20;
    top: 50%;
    left: 50%;
    display: flex;
    width: 100%;
    padding: 30px 0;
    background: rgb(255, 255, 255);
    background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 65%, rgba(240, 240, 240, 1) 100%);
    background: -o-linear-gradient(bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 65%, rgba(240, 240, 240, 1) 100%);
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 65%, rgba(240, 240, 240, 1) 100%);
    border: 1px solid #dedede;
    transform: translate(-50%, 0);
    box-sizing: border-box;
}

    .sallbarun ul.learnpiaStudyList li {
        flex-grow: 1;
    }

.learnpiaIconBox {
    margin: 0 auto;
}

.learnpiaStudyTextBox {
    width: calc(100% - 320px);
    margin-left: auto;
}

/*
.learnpiaStudyBox img {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 270px;
    max-width: 200px;
    height: 270px;
    max-height: 200px;
    margin: 0 auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 50%;
    box-sizing: border-box;
}
*/
.learnpiaImgInBox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    overflow: hidden;
}

.paxEnglish .learnpiaImgInBox {
    width: 220px;
    height: 220px;
}

ul.learnpiaStudyList li:nth-child(2) .learnpiaImgInBox {
    justify-content: flex-start;
}

.learnpiaImgInBox img {
    max-width: 150%;
}

ul.learnpiaStudyList li:nth-child(2) .learnpiaImgInBox img {
    max-width: 200%;
    margin-left: -50px;
}

ul.learnpiaStudyList li:nth-child(3) .learnpiaImgInBox img {
    max-width: 120%;
}

.learnpiaIconTitle {
    position: relative;
    display: block;
    line-height: 1.5;
    /* margin-top: 30px;
    text-align: center; */
    font-size: 30px;
    color: #686868;
}

.sallbarun .learnpiaIconTitle {
    position: relative;
    display: block;
    line-height: 1.5;
    margin-top: 0;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #807569;
}

.sallbarunIconEx {
    position: relative;
    display: block;
    line-height: 1.5;
    margin-top: 50px;
    text-align: center;
}

.learnpiaCopyTitle {
    position: relative;
    display: flex;
    /* justify-content: center; */
    line-height: 1.2;
    margin-top: 20px;
    font-size: 50px;
    font-weight: bold;
    color: #000;
    font-family: 'Roboto', sans-serif;
}

    .learnpiaCopyTitle div {
        margin: 0 3px;
    }

.learnpiaCopyExBox {
    margin-top: 15px;
    font-size: 22px;
    font-family: 'Noto Sans KR', sans-serif;
}

ul.learnpiaStudyInList {
    position: relative;
    display: block;
    margin-top: 10px;
}

    ul.learnpiaStudyInList li {
        position: relative;
        margin: 0;
        padding: 3px 0 3px 10px;
        font-size: 18px;
        color: #5d5d5d;
        font-family: 'Noto Sans KR', sans-serif;
    }

        ul.learnpiaStudyInList li:before {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 10px;
            height: 30px;
            content: "-";
        }

@media screen and (max-width: 1023px) {
    .learnpiaIconBox {
        width: 210px;
        height: 210px;
    }

    .learnpiaImgInBox {
        width: 210px;
        height: 210px;
    }

    .learnpiaIconTitle {
        font-size: 24px;
    }

    .learnpiaCopyTitle {
        /* flex-direction: column; */
        align-items: center;
        font-size: 20px;
    }

    ul.learnpiaStudyInList {
        position: relative;
        display: block;
        margin-top: 10px;
    }

        ul.learnpiaStudyInList li {
            margin: 0;
            padding: 3px 0 3px 10px;
            font-size: 17px;
            /* color: #f0f0f0; */
        }

            ul.learnpiaStudyInList li:before {
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 10px;
                height: 20px;
                content: "-";
            }
}

@media screen and (max-width: 767px) {
    ul.learnpiaStudyList li .learnpiaStudyListBox {
        max-width: 500px;
        margin: 0 auto;
    }

    .learnpiaIconBox {
        width: 240px;
        height: 240px;
    }

    .learnpiaImgInBox {
        width: 240px;
        height: 240px;
    }

    .learnpiaCopyTitle {
        flex-direction: row;
        justify-content: center;
        font-size: 24px;
    }

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

@media screen and (max-width: 450px) {
    ul.learnpiaStudyInList {
        align-items: flex-start;
    }
}

.learnpiaIconEx {
    position: relative;
    display: block;
    line-height: 1.5;
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
    color: #fff;
}

.studySectionBox {
    position: relative;
    display: block;
    width: 100%;
    padding: 10px;
    min-height: 50px;
    box-sizing: border-box;
}

    .studySectionBox.eniEnglish,
    .studySectionBox.paxEnglish,
    .studySectionBox.pamus {
        background-color: #fff;
    }

    .studySectionBox.sallbarun {
        background-color: #fffef1;
    }

    .studySectionBox.clssam {
        background-color: #f3fbff;
    }

.contentListBox {
    position: relative;
    display: grid;
    gap: 10px;
    width: 100%;
    padding: 10px;
    min-height: 50px;
    box-sizing: border-box;
}

.studySectionBox {
    position: relative;
    display: grid;
    gap: 10px;
    width: 100%;
    padding: 10px;
    min-height: 50px;
    box-sizing: border-box;
}

.noticeListBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #d0d0d0;
    box-sizing: border-box;
}

.contentListTitle {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    font-size: 24px;
    font-weight: bold;
    color: #2d2d2d;
    font-family: 'Noto Sans Kr', sans-serif;
}

.moreBtn {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
    width: 52px;
    height: 42px;
    margin-left: auto;
    font-size: 16px;
    color: #2d2d2d;
    background-color: transparent;
    border: none;
}

    .moreBtn span {
        display: block;
        text-indent: -9999px;
    }

    .moreBtn:before {
        position: absolute;
        z-index: 5;
        top: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        font-size: 32px;
        box-sizing: border-box;
        content: "+";
    }

ul.contentList {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 10px;
}

    ul.contentList li {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 42px;
    }

.mainLinkBox {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

a.mainLink:link,
a.mainLink:active {
    display: inline-block;
    max-width: calc(100vw - 190px);
    text-align: left;
    font-size: 14px;
    color: #2d2d2d;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

a.mainLink:hover {
    color: #2d2d2d;
    text-decoration: underline;
}

a.mainLink:visited {
    color: #9d9d9d;
}

.boardLinkBox {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.newIcon {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 15px;
    padding: 0 10px;
    margin-left: 5px;
    font-size: 10px;
    color: #fff;
    background-color: #27b1f1;
    border-radius: 32px;
    font-family: 'Roboto', sans-serif;
}

.dateBox {
    position: relative;
    display: flex;
    margin-left: auto;
}

.learnpiaSNS {
    position: relative;
    display: block;
    padding: 10px;
    /*
    background-color: #fff;
    border-top: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    */
    box-sizing: border-box;
}

.learnpiaSNSBox {
    position: relative;
    display: block;
}

.learnpaiSNSTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 42px;
    font-size: 24px;
    font-weight: bold;
    color: #27b1f1;
    font-family: 'Roboto', sans-serif;
}

.learnpaiSNSEx {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 32px;
    font-size: 16px;
    font-weight: bold;
    color: #2d2d2d;
    font-family: 'Noto Sans KR', sans-serif;
}

ul.learnpiaSNSList {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(40%, 50%));
    gap: 10px;
}

a.SNSLink:link,
a.SNSLink:visited,
a.SNSLink:active {
    position: relative;
    display: block;
    padding: 10px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 10px;
    box-shadow: 3px 3px 5px 2px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    transition: all 0.3s;
}

.SNSImgBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 117px;
    /* max-height: 40vw; */
    overflow: hidden;
}

    .SNSImgBox img {
        display: flex;
        align-items: center;
        max-width: 100%;
    }

.SNSTypeBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 42px;
    font-size: 14px;
}

    .SNSTypeBox strong {
        margin-right: 5px;
        color: #166ce3;
    }

a.SNSLink .snsIcon {
    position: relative;
    width: 35px;
    max-width: 80px;
    margin: 10px auto;
    opacity: 0.15;
}

.learnpiaMedia {
    position: relative;
    display: block;
    padding: 10px;
    box-sizing: border-box;
}

.learnpiaMediaBox {
    position: relative;
    display: block;
    box-sizing: border-box;
}

.learnpiaMediaTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 42px;
    font-size: 24px;
    font-weight: bold;
    color: #4f5d64;
    font-family: 'Roboto', sans-serif;
}

    .learnpiaMediaTitle div {
        margin: 0 3px;
    }

ul.learnpiaMediaList {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(40%, 50%));
    gap: 10px;
}

a.mediaLink:link,
a.mediaLink:visited,
a.mediaLink:active {
    position: relative;
    display: block;
    padding: 10px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 0;
    box-sizing: border-box;
}

.mediaImgBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 178px;
    /* max-height: 40vw; */
    overflow: hidden;
}

    .mediaImgBox img {
        display: flex;
        align-items: center;
        max-height: 150%;
    }

.mediaImgTitle {
    display: inline-block;
    max-width: 100%;
    height: 32px;
    line-height: 46px;
    text-align: left;
    font-size: 14px;
    color: #2d2d2d;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.learnpiaIconBox {
    width: 270px;
    height: 270px;
}

.paxEnglish .learnpiaIconBox {
    width: 220px;
    height: 220px;
    margin: 0 auto 10px;
}

@media all and (min-width:768px) {

    /*
    .learnpiaIconTitle {
        height: 72px;
    }
	*/
    .contentListBox {
        grid-template-columns: repeat(2, minmax(40%, 50%));
        padding: 20px;
    }
}

@media all and (min-width:768px) and (max-width:1023px) {
    ul.learnpiaStudyList {
        grid-template-columns: repeat(3, minmax(30%, 335px));
    }

    ul.learnpiaSNSList {
        grid-template-columns: repeat(3, minmax(30%, 335px));
    }

    ul.learnpiaMediaList {
        grid-template-columns: repeat(3, minmax(20%, 335px));
    }
}

@media all and (min-width:1024px) {

    .mainContainer,
    .subContainer {
        position: relative !important;
        display: block;
        /* left: 220px; */
        /* width: calc(100% - 220px); */
        /* min-width: 1180px; */
        min-height: calc(100vh - 70px);
        background-color: #eaedef;
        transition: all 0.3s;
    }

        .mainContainer.on,
        .subContainer.on {
            left: 50px;
            width: calc(100% - 50px);
            /* min-width: 804px; */
            box-sizing: border-box;
            transition: all 0.3s;
        }

    ul.learnpiaStudyList,
    ul.sallbarunStudyList {
        grid-template-columns: repeat(3, minmax(30%, auto));
    }

    ul.clssamStudyList {
        grid-template-columns: repeat(2, minmax(45%, auto));
    }

    .noticeListBox {
        padding: 50px;
    }

        .noticeListBox:before {
            position: absolute;
            z-index: 10;
            top: 0px;
            left: 0px;
            width: 0;
            height: 0;
            border-top: 30px solid #27b1f1;
            border-right: 30px solid transparent;
            border-bottom: 30px solid transparent;
            border-left: 30px solid #27b1f1;
            content: "";
        }

    /*
    .learnpiaIconBox {
        width: 100%;
        max-width: 150px;
        height: 100%;
        max-height: 150px;
    }
	*/
    /*
	.learnpiaIconBox {
        width: 270px;
        height: 270px;
    }
	*/
    .mainContent {
        /* min-width: 1180px; */
        margin: 0 auto;
    }

    /*
    .learnpiaSNS {
        padding: 40px 20px;
        background: url("../images/bg/bg_sns.png") no-repeat center top #fff;
        box-sizing: border-box;
    }
    .learnpiaSNS:before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 50%;
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 49%, rgba(255,255,255,1) 100%);
        content: "";
    }
    */
    .learnpaiSNSTitle {
        font-size: 48px;
    }

    .learnpaiSNSEx {
        height: 52px;
        font-size: 30px;
    }

    ul.learnpiaSNSList {
        grid-template-columns: repeat(6, minmax(15%, 200px));
    }

        ul.learnpiaSNSList li {
            transition: all 0.3s;
        }

            ul.learnpiaSNSList li:hover a.SNSLink {
                top: -3px;
                left: -3px;
                border: 1px solid #27b1f1;
                box-shadow: 5px 5px 7px 2px rgba(0, 0, 0, 0.1);
                transition: all 0.3s;
            }

    .learnpiaMediaTitle {
        margin-top: 50px;
        font-size: 48px;
    }

    ul.learnpiaMediaList {
        grid-template-columns: repeat(4, minmax(20%, 275px));
        gap: 20px;
    }

        ul.learnpiaMediaList li {
            box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.1);
        }

    .mediaLink:hover .mediaImgBox:before {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(72, 82, 82, 0.8);
        content: "";
    }

    .mediaLink:hover .mediaImgBox:after {
        position: absolute;
        z-index: 20;
        top: 50%;
        left: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        font-size: 32px;
        color: #fff;
        content: "\e90f";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        transform: translate(-50%, -50%);
    }

    .mediaImgTitle {
        position: absolute;
        z-index: 99;
        right: 10px;
        bottom: 40px;
        left: 10px;
        padding: 0 10px;
        color: #fff;
        display: none;
    }

    .mediaLink:hover .mediaImgTitle {
        display: block;
    }

    .systemListBox {
        position: relative;
        display: flex;
        flex-direction: column;
        width: calc(50% - 25px);
        margin-left: auto;
        padding: 25px;
        background-color: #fff;
        border: 1px solid #d0d0d0;
        box-sizing: border-box;
    }

    .contentListTitle {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 42px;
        font-size: 24px;
        font-weight: bold;
        color: #2d2d2d;
        font-family: 'Noto Sans Kr', sans-serif;
    }

    .moreBtn {
        position: relative;
        display: flex;
        flex-shrink: 0;
        justify-content: flex-end;
        align-items: center;
        width: 42px;
        height: 42px;
        margin-left: auto;
        font-size: 16px;
        color: #2d2d2d;
        background-color: transparent;
        border: none;
    }

    ul.contentList {
        position: relative;
        display: block;
        width: 100%;
        margin-top: 20px;
    }

    /*
ul.contentList li {
	margin-top: 15px;	
}
*/
    .mainLinkBox {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }

    a.mainLink:link,
    a.mainLink:active {
        display: inline-block;
        max-width: calc(100% - 117px);
        text-align: left;
        font-size: 16px;
        color: #2d2d2d;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }

    a.mainLink:hover {
        color: #2d2d2d;
        text-decoration: underline;
    }

    a.mainLink:visited {
        color: #9d9d9d;
    }

    .dateBox {
        position: relative;
        display: flex;
        margin-left: auto;
    }
}

/* ------------------------- */
/*     swiper modified       */
/* ------------------------- */
:root {
    --swiper-theme-color: #fff;
}

@media all and (min-width:1024px) {
    .swiper-slide {
        height: 100vh;
    }
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    top: auto;
    bottom: 0;
}

/* swiper-autoplay-progress added */
.autoplay-progress {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--swiper-theme-color);
}

    .autoplay-progress svg {
        --progress: 0;
        position: absolute;
        left: 0;
        top: 0px;
        z-index: 10;
        width: 100%;
        height: 100%;
        stroke-width: 4px;
        stroke: var(--swiper-theme-color);
        fill: none;
        stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
        stroke-dasharray: 125.6;
        transform: rotate(-90deg);
    }

/*-------------------------------*/
/*             Footer            */
/*-------------------------------*/
.footerBox {
    position: relative;
    display: block;
    height: auto;
    min-height: 210px;
    background-color: #444c5a;
}

.footerSection .footerBox {
    display: none;
}

.footerTopBox {
    position: relative;
    display: block;
    min-height: 42px;
    border-bottom: 1px solid #6a6e74;
}

.footerTopInBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 42px;
}

.footerTopInRightBox {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: 42px;
    padding: 0 10px;
}

    .footerTopInRightBox .selectBox {
        width: 50%;
        margin: 0 5px;
    }

        .footerTopInRightBox .selectBox .select {
            width: 100%;
            color: #acacac;
        }

        .footerTopInRightBox .selectBox .icoArrow:before {
            color: #acacac;
        }

ul.footerTopList {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30%, auto));
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
}

    ul.footerTopList li {
        position: relative;
        display: flex;
        justify-content: center;
        padding: 3px 10px;
    }

        ul.footerTopList li a.footerLink:link,
        ul.footerTopList a.footerLink:visited,
        ul.footerTopList a.footerLink:hover,
        ul.footerTopList a.footerLink:active {
            font-size: 14px;
            color: #d1d5dd;
            text-decoration: none;
        }

        ul.footerTopList li.mobile {
            display: none;
        }

.footerInBox {
    position: relative;
    display: block;
    padding: 0 10px 60px;
    box-sizing: border-box;
}

.footerMobileBox {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
}

.callBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    margin-top: 10px;
    padding: 0 15px;
    font-size: 14px;
    color: #fff;
    border: 2px solid #fff;
    padding-left: 42px;
    border-radius: 42px;
}

    .callBtn:before {
        position: absolute;
        top: 0;
        left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 28px;
        height: 28px;
        color: #fff;
        content: "\e922";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

ul.bottomFooterList {
    position: relative;
    display: flex;
    margin: 0;
}

    ul.bottomFooterList li {
        display: inline-flex;
        padding: 5px 10px;
    }

.bottomFooterBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 32px;
    color: #d1d5dd;
    background-color: transparent;
    border: none;
}

.bottomFooterInfoBtn,
.bottomFooterInfoBtn2 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    margin: 0 auto;
    padding-right: 22px;
    color: #d1d5dd;
    background-color: transparent;
    border: none;
}

    .bottomFooterInfoBtn:after,
    .bottomFooterInfoBtn2:after {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 32px;
        font-size: 0.75rem;
        color: #d1d5dd;
        content: "\e90c";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        -webkit-transition: .2s ease;
        -moz-transition: .2s ease;
        -o-transition: .2s ease;
        transition: .2s ease;
        transform: rotate(0deg);
    }

    .bottomFooterInfoBtn.on:after,
    .bottomFooterInfoBtn2.on:after {
        -webkit-transition: .2s ease;
        -moz-transition: .2s ease;
        -o-transition: .2s ease;
        transition: .2s ease;
        transform: rotate(180deg);
    }

.footerInfoBox {
    position: relative;
    bottom: 0;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 5px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-sizing: border-box;
    display: none;
}

    .footerInfoBox span {
        position: relative;
        display: flex;
        justify-content: center;
        margin: 5px 0;
    }

        .footerInfoBox span p {
            position: relative;
            display: inline-flex;
            align-items: stretch;
        }

            .footerInfoBox span p:first-child {
                align-items: center;
            }

            .footerInfoBox span p:last-child {
                margin-left: 3px;
                text-align: left;
            }

.footerLogoBox {
    position: relative;
    text-align: center;
    display: none;
}

    .footerLogoBox img {
        width: 200px;
    }

.copyright {
    position: relative;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 105px;
    line-height: 1.5;
    padding: 10px 0;
    text-align: left;
    color: #a5a9b0;
    font-size: 14px;
    background-color: #343538;
    border-radius: 10px;
    display: none;
}

    .copyright span {
        display: flex;
        justify-content: center;
    }

ul.footerSNSList {
    display: none;
}

.customerBox {
    position: relative;
    float: right;
    width: auto;
    height: auto;
    margin-top: 15px;
}

    .customerBox img {
        position: relative;
        float: right;
        width: auto;
        height: 120px;
    }

@media all and (min-width:768px) {
    .footerTopBox {
        display: flex;
    }

    ul.footerTopList {
        position: relative;
        display: flex;
        justify-content: flex-start;
    }

        ul.footerTopList li {
            position: relative;
            display: flex;
            line-height: 50px;
            margin: 0 5px;
        }

            ul.footerTopList li.mobile {
                display: block;
            }

            ul.footerTopList li a.footerLink:link,
            ul.footerTopList a.footerLink:visited,
            ul.footerTopList a.footerLink:hover,
            ul.footerTopList a.footerLink:active {
                display: flex;
                font-size: 14px;
                color: #d1d5dd;
                text-decoration: none;
            }

    .footerTopInRightBox {
        align-items: center;
        width: auto;
        margin-left: auto;
    }

        .footerTopInRightBox .selectBox {
            width: auto;
        }

            .footerTopInRightBox .selectBox .select {
                width: auto;
            }

    .footerMobileBox {
        display: none;
    }

    .bottomFooterInfoBtn,
    .bottomFooterInfoBtn2 {
        display: none;
    }

    .footerInBox {
        display: flex;
        padding: 10px;
    }

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

        .footerLogoBox img {
            width: 150px;
            opacity: 0.3;
        }

    .copyright {
        display: block;
        width: auto;
        font-size: 14px;
        background-color: transparent;
    }

    .footersection .copyright {
        display: block !important;
    }

    .copyright span {
        justify-content: flex-start;
        margin-left: 20px;
    }

    ul.footerSNSList {
        position: relative;
        display: flex;
        margin-left: auto;
    }

        ul.footerSNSList li {
            display: flex;
            margin: 0 3px;
        }

            ul.footerSNSList li img {
                width: 32px;
                opacity: 0.2;
            }
}

@media all and (min-width:480px) {
    .sideNavBox {
        width: 300px;
    }

    .copyright {
        font-size: 14px;
    }
}

@media all and (min-width:1024px) {
    .fullpage .footerBox {
        position: relative;
        display: block;
        min-height: 280px !important;
        background-color: #444c5a;
        border-top: none;
    }

    .footerSection .footerBox {
        display: block;
    }

    .footerBox .fp-tableCell {
        height: auto !important;
    }

    .footerTopBox {
        position: relative;
        min-height: 42px;
        border-bottom: none;
    }

    .footerTopInBox {
        position: relative;
        /* width: 1180px; */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 42px;
        margin: 0 auto;
    }

    .copyright {
        position: relative;
        /* width: 1180px; */
        min-height: 105px;
        line-height: 24px;
        padding: 0;
        text-align: left;
        color: #a5a9b0;
        font-size: 14px;
        background-size: 152px auto;
    }

    .customerBox {
        position: relative;
        float: right;
        width: auto;
        height: auto;
        margin-top: 15px;
    }

        .customerBox img {
            position: relative;
            float: right;
            width: auto;
            height: 120px;
        }
}

/*-------------------------------*/
/*       Background Video        */
/*-------------------------------*/
#tubular {
    z-index: 10 !important;
}

.tubularBox {
    position: relative;
    display: block;
    height: 501px;
    background-color: #2d2d2d;
    border-bottom: 1px solid #acacac;
}

#tubular-container {
    position: absolute !important;
    z-index: 3 !important;
    top: 0 !important;
    height: 500px !important;
    padding: 0 10px !important;
    background-color: #000;
}

#tubular-player {
    min-height: 644px !important;
    background-color: #000;
}

#tubular-shield {
    background-color: transparent !important;
}

.tubularTitle {
    position: absolute;
    z-index: 20;
    top: 200px;
    left: 50%;
    width: auto;
    height: auto;
    margin-left: -30%;
    font-size: 60px;
    font-weight: bold;
    color: #fff;
    text-shadow: #666 0 0 10px;
    font-family: 'Lato', sans-serif;
}

.tubularTitle2 {
    position: absolute;
    z-index: 20;
    top: 270px;
    left: 50%;
    width: auto;
    height: auto;
    margin-left: -30%;
    font-size: 98px;
    font-weight: bold;
    color: #fff;
    text-shadow: #666 0 0 10px;
    font-family: 'Lato', sans-serif;
}

ul.tubularList {
    position: absolute;
    z-index: 20;
    top: 450px;
    left: 50%;
    margin-left: -30%;
}

    ul.tubularList li {
        position: relative;
        display: inline-block;
        margin: 0 20px;
    }

        ul.tubularList li a.tubularLink:link,
        a.tubularLink:visited,
        a.tubularLink:active {
            position: relative;
            display: block;
            width: 216px;
            padding: 20px 0;
            text-align: center;
            font-size: 24px;
            color: #acacac;
            background: rgba(0, 0, 0, 0.6);
            border: 3px solid #fff;
            text-decoration: none;
        }

        ul.tubularList li a.tubularLink:hover {
            color: #fff;
            background: rgba(0, 0, 0, 1.0);
            box-shadow: #000 0 0 15px;
        }

/* one page modify */
.indicator {
    display: none;
}

.studySection {
    display: block;
    margin: 0 auto;
    /* background-color: #5d77b5; */
    background-color: #fff;
}

@media all and (max-width:1023px) {
    .fullpage-wrapper {
        height: auto !important;
        transform: none !important;
    }

    .section {
        height: auto !important;
    }

    .fp-tableCell {
        height: auto !important;
    }
}

@media all and (min-width:1024px) {
    .indicator {
        position: fixed;
        z-index: 888;
        top: 0;
        right: 15px;
        width: 1px;
        height: 100vh;
        background-color: transparent;
        display: block;
    }

        .indicator:before {
            position: absolute;
            z-index: 10;
            top: 50%;
            right: -20px;
            bottom: 0;
            width: 125px;
            height: 220px;
            background-color: rgba(0, 0, 0, 0.5);
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            transform: translate(0, -110%);
            content: "";
        }

    .collapse:not(.show) {
        display: block;
    }

    ul.rightNavList {
        position: absolute;
        z-index: 30;
        top: 50%;
        right: 15px;
        display: flex;
        min-width: 80px;
        height: 500px;
        flex-direction: column;
        transform: translate(0, -45%);
    }

        ul.rightNavList li {
            display: flex;
            flex-direction: column;
        }

    .nav-link {
        position: relative;
        padding: 0;
    }

        .nav-link span {
            display: flex;
            flex-shrink: 0;
            justify-content: flex-end;
            width: 120px;
            margin-left: auto;
            font-size: 14px;
        }

        .nav-link:before {
            position: absolute;
            z-index: 10;
            top: 50%;
            right: -19px;
            width: 5px;
            height: 5px;
            background-color: #fff;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            content: "";
            transition: all 0.3s;
        }

    .nav-item .nav-link {
        color: #fff;
    }

    .nav-item .nav-link {
        display: flex;
        margin: 10px 0;
        color: #fff;
        transition: all 0.3s;
    }

    .nav-item.active .nav-link {
        display: flex;
        align-items: center;
        min-width: 120px;
        height: 24px;
        margin: 10px 0;
        transition: all 0.3s;
    }

        .nav-item.active .nav-link:before {
            position: absolute;
            z-index: 10;
            top: 50%;
            right: -32px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 20px;
            height: 20px;
            color: #fff;
            font-size: 48px;
            background-color: transparent;
            border: 5px solid #5eccff;
            border-radius: 50%;
            transform: translate(-50%, -55%);
            transition: all 0.3s;
            content: "";
            font-family: bootstrap-icons !important;
            font-style: normal;
            font-weight: normal !important;
            font-variant: normal;
            text-transform: none;
        }

        /*
    .nav-item.active:nth-child(1) .nav-link:before {
	    content: "\F70C";
    }
    .nav-item.active:nth-child(2) .nav-link:before {
	    content: "\F102";
    }
    .nav-item.active:nth-child(3) .nav-link:before {
	    content: "\F708";
    }
    .nav-item.active:nth-child(4) .nav-link:before {
	    content: "\F18A";
    }
    .nav-item.active:nth-child(5) .nav-link:before {
	    content: "\F5FD";
    }
    */
        .nav-item.active .nav-link:after {
            position: absolute;
            z-index: 10;
            top: 49%;
            right: -10px;
            width: 10px;
            height: 1px;
            color: #fff;
            background-color: #5eccff;
            transform: translate(-50%, -55%);
            transition: all 0.3s;
            content: "";
        }

        .nav-item.active .nav-link span {
            width: 120px;
            margin-right: 10px;
            font-size: 17px;
            font-weight: bold;
            color: #5eccff;
            transition: all 0.3s;
        }

    .fp-tableCell {
        display: flex;
        align-items: center;
    }

    /* .studySection {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #27b1f1;
    } */

    .studySectionBox {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        background-color: #27b1f1;
    }

        .studySectionBox.sallbarun {
            background-color: #fffef1;
        }

    .snsSection {
        position: relative;
        display: flex;
        justify-content: center;
        padding: 40px 20px;
        background: url(../images/bg/bg_sns.png) no-repeat center center #fff;
        border-top: 1px solid #d0d0d0;
        border-bottom: 1px solid #d0d0d0;
        box-sizing: border-box;
    }

        .snsSection:before {
            position: absolute;
            z-index: 0;
            right: 0;
            bottom: 0;
            left: 0;
            height: 100%;
            background: linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 49%, rgba(255, 255, 255, 0.2) 100%);
            content: "";
        }

    .footerSection {
        display: flex;
        justify-content: center;
        height: 280px !important;
        background-color: #444c5a;
    }

        .footerSection .fp-tableCell {
            align-items: flex-start;
            height: 280px !important;
        }
}

@media all and (min-width:1200px) {
    .wrapper {
        min-width: 1180px;
    }

    .headerBox {
        min-width: 1180px;
    }

    .topWrapper {
        min-width: 1180px;
    }

    .headerTopBox {
        min-width: 1180px;
    }

    ul.learnpiaStudyList {
        width: 1120px;
        margin: 0 auto;
    }

    .sallbarun ul.learnpiaStudyList {
        width: 100%;
        margin: 0;
    }

    .sallbarun .contentStudyMainBox {
        width: 1180px;
        margin: 30px auto;
    }

    .contentListBox {
        width: 1180px;
        margin: 30px auto;
    }

    .learnpiaSNSBox {
        width: 1180px;
        margin: 0 auto;
    }

    .learnpiaMedia {
        width: 1180px;
        margin: 0 auto;
    }

    .footerTopBox {
        width: 1180px;
        margin: 0 auto;
        border-bottom: none;
    }

    .footerInBox {
        width: 1180px;
        margin: 0 auto;
    }
}

@media all and (max-width:460px) {
    .sallbarun .contentStudyMainBox {
        padding: 0;
    }

    .sallbarun .learnpiaStudyBox img {
        max-width: 100%;
    }
}

/* ----------------------------- */
/*           Sub Content         */
/* ----------------------------- */
.subTitleBox {
    position: sticky;
    z-index: 20;
    top: 20px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 62px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #acacac;
}

.subTitleInBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1440px;
    height: 62px;
    margin: 0 auto;
}

.subTitle {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-shrink: 0;
    height: 62px;
    margin-left: 20px;
    font-size: 26px;
    font-weight: bold;
    font-family: 'Noto Sans KR', sans-serif;
}

.subMainTitle {
    display: flex;
    align-items: center;
    height: 62px;
}

.subExBox {
    position: relative;
    margin-left: 5px;
    font-size: 16px;
    display: none;
}

.subSubExBox {
    margin-left: 10px;
    font-size: 12px;
}

.subBox {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100px;
    margin: 10px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #acacac;
    box-sizing: border-box;
}

    .subBox img {
        max-width: 100% !important;
    }

.subContent {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1440px;
    margin: 72px auto 0;
}

.subContentBox {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100px;
}

.counselingList .subContentBox {
    height: calc(100vh - 582px);
}

.subContentLeftBox {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 10px;
    /* padding: 15px;
    background: #fff;
    border: 1px solid #acacac; */
}

.subContentRightBox {
    position: relative;
    display: block;
    width: 100%;
    /* padding: 15px;
    background: #fff;
    border: 1px solid #acacac; */
    margin-left: auto;
}

.subCheckGuideBox {
    position: relative;
    display: block;
    width: 100%;
    height: calc(50vh - 39px);
    border: 1px solid #acacac;
    border-radius: 5px;
}

@media only screen and (max-width: 767px) {
    .subCheckGuideBox {
        height: auto !important;
    }
}

.subCheckGuideTitle,
.subCheckGuideTopBox {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 10px 5px 32px;
    font-size: 15px;
    color: #2d2d2d;
    background-color: #f9f9f9;
    border-bottom: 1px solid #acacac;
    border-radius: 5px 5px 0 0;
    box-sizing: border-box;
}

.subCheckGuideTopBox {
    flex-wrap: wrap;
    padding: 5px 10px;
}

.subCheckGuideTitle:before {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 30px;
    font-size: 18px;
    color: #2d2d2d;
    content: "\e92e";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.subContentScrollBox {
    position: relative;
    display: block;
    width: 100%;
    /* max-height: calc(50vh - 257px);
    overflow: hidden; */
}

@media only screen and (max-width: 767px) {
    .subContentScrollBox {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .subCheckGuideTopBox span:first-child {
        display: none;
    }
}

.registrationTestAsk .subContentRightBox .subContentScrollBox {
    height: calc(50vh - 154px);
}

ul.subCheckGuideList {
    position: relative;
    display: block;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
}

    ul.subCheckGuideList li {
        position: relative;
        display: flex;
        align-items: center;
        padding: 5px 10px 5px 15px;
        box-sizing: border-box;
    }

        ul.subCheckGuideList li:before {
            position: absolute;
            z-index: 10;
            top: 50%;
            left: 5px;
            font-size: 18px;
            color: #000;
            transform: translate(0, -50%);
            content: "·";
        }

.subCheckGuideInBox {
    position: relative;
    display: block;
    padding: 10px;
    /* background-color: #fff; */
    border-radius: 5px;
    box-sizing: border-box;
}

.subTableScrollBox {
    position: relative;
    display: block;
    width: 100%;
    min-height: 113px;
}

.counselingList .subTableScrollBox,
.academyNoticeList .subTableScrollBox,
.educationNewsList .subTableScrollBox {
    height: auto;
    min-height: calc(100vh - 582px);
}

.counselingView .subTableScrollBox,
.academyNoticeView .subTableScrollBox,
.educationNewsView .subTableScrollBox {
    height: auto;
    min-height: calc(100vh - 489px);
}

/*
.counselingInput .subTableScrollBox {
    max-height: calc(100vh - 489px); 
}
*/
@media only screen and (max-width: 767px) {
    .subTableScrollBox {
        height: auto;
    }

    .counselingList .subTableScrollBox {
        height: auto;
        max-height: none;
    }

    .counselingView .subTableScrollBox {
        height: auto;
        max-height: none;
    }

    .counselingInput .subTableScrollBox {
        max-height: none;
    }
}

.counselingList .subTableScrollBox {
    border-top: 2px solid #5d5d5d;
}

.registrationTestAsk .subTableScrollBox {
    padding: 5px;
    border: 2px solid #3c93ef;
    box-sizing: border-box;
}

    .registrationTestAsk .subTableScrollBox th {
        border-top: 2px solid #5d5d5d;
    }

@media all and (max-width:767px) {
    .registrationTestAsk .subTableScrollBox {
        padding: 0;
        border: none;
        border-top: 2px solid #5d5d5d;
        box-sizing: border-box;
    }

        .registrationTestAsk .subTableScrollBox th {
            border-top: none;
        }
}

@media all and (min-width:768px) {
    .subBox {
        min-height: calc(100vh - 394px);
    }

    .subTitle {
        align-items: center;
    }

    .subExBox {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: baseline;
        margin-top: 10px;
    }

    .subSubExBox {
        margin-left: 0;
    }

    .subContentBox {
        flex-direction: row;
    }

    .subContentLeftBox {
        width: calc(50% - 5px);
        max-height: 1228px;
        margin-bottom: 0;
    }

    .registrationEtcAsk .subContentLeftBox {
        width: 100%;
        max-height: 1228px;
        margin-bottom: 10px;
    }

    .subContentRightBox {
        width: calc(50% - 5px);
    }

    .registrationEtcAsk .subContentRightBox {
        width: 100%;
    }

    .subContentScrollBox {
        height: calc(50vh - 74px);
        overflow: hidden;
    }
}

@media all and (min-width:1024px) {
    .subTitleBox {
        /*
        position: sticky;
        z-index: 30;
        top: 72px;
		*/
    }

    .subTitleInBox {
        justify-content: flex-start;
    }

    .subTitle {
        align-items: baseline;
    }

    .subBox {
        max-width: 1440px;
        min-height: calc(100vh - 394px);
        margin: 20px 10px;
    }

    .subExBox {
        flex-direction: row;
        align-items: baseline;
        margin-top: 0;
    }

    .subSubExBox {
        margin-left: 10px;
        padding-left: 0;
    }
}

@media all and (min-width:1180px) {
    .registrationEtcAsk .subContentLeftBox {
        width: calc(60% - 5px);
    }

    .registrationEtcAsk .subContentRightBox {
        width: calc(40% - 5px);
    }
}

@media all and (min-width:1440px) {
    .subBox {
        max-width: 1440px;
        margin: 20px auto;
    }
}

/* ------------------------------ */
/*         academy notice         */
/* ------------------------------ */
.searchTopBox {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 32px;
}

@media screen and (max-width: 767px) {
    .searchTopBox {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 32px;
    }
}

.boardListTable {
    position: relative;
    display: block;
    border-top: 2px solid #5d5d5d;
}

    .boardListTable table {
        table-layout: fixed;
        border-collapse: separate;
    }

    .boardListTable th {
        position: sticky;
        z-index: 20;
        top: 0;
        padding: 10px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #000;
        background-color: #f9f9f9;
        /* border-top: 2px solid #5d5d5d; */
        border-bottom: 1px solid #acacac;
        box-sizing: border-box;
    }

    .boardListTable td {
        min-height: 36px;
        line-height: 1.5;
        padding: 5px;
        text-align: center;
        background-color: #fff;
        border-bottom: 1px solid #dedede;
    }

    .boardListTable tbody > tr:nth-child(even) > td {
        background-color: #f9f9f9;
    }

    .boardListTable tbody > tr:hover > td {
        background-color: #f0f0f0;
    }

.noticeIcon {
    position: relative;
    display: flex;
    width: 100%;
    height: 36px;
}

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

.noticeIcon:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 36px;
    font-size: 18px;
    color: #ff4a00;
    content: "\e91b";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.noticeIcon span {
    display: block;
    text-indent: -9999px;
}

.titleInBox {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 32px;
}

a.boardLink:link,
a.boardLink:visited,
a.boardLink:hover,
a.boardLink:active {
    display: inline-block;
    max-width: calc(100% - 45px);
    text-align: left;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.boardInTitle {
    /* display: inline-block; */
    display: block;
    /* max-width: calc(100% - 45px); */
    width: 100%;
    text-align: left;
    font-size: 14px;
    text-decoration: none;
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */
    box-sizing: border-box;
}

.counselModifyBtn {
    width: 80px;
    height: 26px;
    margin-left: auto;
    color: #fff;
    background-color: #f05454;
    border: none;
}

/* ----------------------------- */
/*             Media             */
/* ----------------------------- */
ul.photoList {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

    ul.photoList li {
        position: relative;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

@media screen and (min-width: 460px) {
    ul.photoList li {
        width: 50%;
    }
}

@media screen and (min-width: 768px) {
    ul.photoList li {
        width: 33.33333%;
    }
}

@media screen and (min-width: 1024px) {
    ul.photoList li {
        width: 25%;
    }
}

@media screen and (min-width: 1440px) {
    ul.photoList li {
        width: 20%;
    }
}

a.photoLink {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100px;
    background-color: #f0f0f0;
    border: 1px solid #fff;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.15);
}

    a.photoLink:before {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        width: 100%;
        height: 130px;
        background: url("../images/common/btn_vod-start.png") no-repeat center center;
        content: "";
    }

.photoImgBox {
    width: 100%;
    height: 150px;
    overflow: hidden;
}

    .photoImgBox img {
        width: 100%;
        object-fit: cover;
    }

.photoImgTitleBox {
    position: relative;
    display: block;
    height: 20px;
    margin-top: 10px;
    font-size: 14px;
    color: #5d5d5d;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.photoImgDateBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    color: #9d9d9d;
}

.subPhotoContentBox {
    position: relative;
    display: block;
    /* height: calc(100vh - 457px); */
}

.photoContentTitle {
    position: sticky;
    z-index: 10;
    top: 113px;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    min-height: 42px;
    /* padding: 5px; */
    background-color: #f9f9f9;
    border: 1px solid #acacac;
}

@media screen and (min-width: 460px) {
    .photoContentTitle {
        flex-direction: row;
    }
}

@media screen and (min-width: 1024px) {
    .photoContentTitle {
        top: 133px;
    }
}

.photoContentInTitle {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    min-height: 42px;
    padding: 0 30px;
    line-height: 1.5;
    /* margin-right: 10px; */
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #536c98;
}

.photoContentTitle span {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    box-sizing: border-box;
}

.photoContentInBox {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 10px;
    min-height: 100px;
}

    .photoContentInBox img,
    .photoContentInBox iframe {
        max-width: 100%;
    }

/* ----------------------------- */
/*     Registration Test Ask     */
/* ----------------------------- */
.applyBoardTable {
    position: relative;
    width: 100%;
    font-size: 14px;
    background-color: #fff;
    border-top: 2px solid #5d5d5d;
}

    .applyBoardTable table,
    .counselBoardTable table {
        table-layout: fixed;
    }

.registrationTestAsk .applyBoardTable {
    border-top: none;
}

.applyBoardTable th {
    position: sticky;
    z-index: 10;
    top: -5px;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    background-color: #f9f9f9;
    border-bottom: 1px solid #acacac;
    box-sizing: border-box;
}

.applyBoardTable td {
    line-height: 1.5;
    padding: 0 5px;
    text-align: center;
    border-bottom: 1px solid #dedede;
}

    .applyBoardTable td.ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
    }

.applyBoardTable table > tbody > tr:nth-child(even) > td {
    background-color: #f9f9f9;
}

.applyBoardTable tbody > tr:hover > td {
    background-color: #f0f0f0 !important;
}

@media only screen and (max-width: 767px) {
    .applyBoardTable tbody > tr:hover > td {
        background-color: #fff !important;
    }
}

.registrationBtnBox {
    position: relative;
    display: inline-block;
    padding: 2px 0;
}

.applyCancelBtn {
    position: relative;
    display: flex;
    align-items: center;
    width: 60px;
    height: 26px;
    font-size: 14px;
    font-weight: bold;
    color: #f3612f;
    background-color: #fff;
    border: 1px solid #f3612f;
    border-radius: 42px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
}

.newReservationTitle {
    position: relative;
    display: flex;
    /* flex-grow: 1; */
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 48px;
    margin-top: 15px;
    padding-left: 65px;
    text-align: left;
    font-size: 2rem;
    color: #fff;
    background-color: #9c75d2;
    border-radius: 65px;
    box-sizing: border-box;
    font-family: 'Roboto', 'noto', sans-serif;
}

    .newReservationTitle:before {
        position: absolute;
        top: 5px;
        left: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 38px;
        font-size: 2rem;
        color: #9c75d2;
        background-color: #fff;
        border-radius: 50%;
        content: "\e936";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.testAskTitleBox,
.etcAskTitleBox {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.testAskTitleInBox,
.etcAskTitleInBox {
    display: inline-block;
    /* max-width: calc(100vw - 650px); */
    max-width: calc(100vw - 30px);
    padding: 0;
    text-align: left;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.etcAskTitleInBox {
    max-width: calc(100vw - 205px);
}

.selectedStudentBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    margin-left: auto;
}

.testCheckBtn {
    width: calc(100% - 20px);
    margin: 10px;
    font-size: 14px;
    animation: linear 1s infinite 0s testAskBox;
}

@keyframes testAskBox {
    0% {
        color: #fff;
    }

    75% {
        color: #353946;
    }

    100% {
        color: #fff;
    }
}

.newApplyTable {
    margin: 0 10px 10px;
    font-size: 14px;
    background-color: #fff;
    border-top: 2px solid #2d2d2d;
    box-sizing: border-box;
}

@media only screen and (max-width: 767px) {
    .newApplyTable {
        margin: 0 10px 10px;
    }

        .newApplyTable tr {
            display: flex;
            flex-direction: column;
        }
}

.newApplyTable th {
    padding: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    background-color: #f0f0f0;
    border-bottom: 1px solid #dedede;
}

.newApplyTable td {
    line-height: 1.5;
    padding: 3px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid #dedede;
}

ul.newApplyReservationList {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100px;
}

    ul.newApplyReservationList li {
        position: relative;
        display: flex;
        align-items: center;
        /* margin: 2px 0; */
        padding: 2px 0 2px 15px;
        text-align: left;
        border-bottom: 1px solid #dedede;
    }

        ul.newApplyReservationList li:before {
            position: absolute;
            z-index: 10;
            top: 0;
            bottom: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 20px;
            /* height: 20px; */
            text-align: center;
            font-size: 12px;
            color: #2d2d2d;
            content: "∙";
        }

        ul.newApplyReservationList li:nth-child(even) {
            background-color: #f9f9f9;
        }

.newApplyBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 28px;
    /* margin-left: auto; */
    /* margin-right: 5px; */
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #b498db;
    border: none;
    border-radius: 42px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
}

ul.newApplyReservationList li .newApplyBtn {
    margin-left: 5px;
}

@media only screen and (max-width: 767px) {
    ul.newApplyReservationList li {
        padding: 5px 0 5px 15px;
    }

    .newApplyBtn {
        width: 100px;
        height: 32px;
    }
}

@media only screen and (min-width: 768px) {
    .testAskTitleInBox {
        max-width: calc(100vw - 570px);
    }

    .applyBoardTable td {
        padding: 2px 5px;
    }

    .registrationBtnBox {
        padding: 0;
    }

    .applyCancelBtn {
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }
}

/* ----------------------------- */
/*     Registration etc ask      */
/* ----------------------------- */
.newReservationTable {
    /* margin: 5px; */
    font-size: 14px;
    background-color: #fff;
    border-top: 2px solid #2d2d2d;
}

    .newReservationTable table {
        table-layout: fixed;
        border-collapse: separate;
    }

.table.newReservationTable {
    margin-bottom: 0;
}

.newReservationTable th {
    position: sticky;
    z-index: 10;
    top: 0;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    background-color: #f9f9f9;
    border-bottom: 1px solid #acacac;
}

.newReservationTable td {
    line-height: 1.5;
    padding: 5px;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px solid #dedede;
}

    .newReservationTable td.ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*
.newReservationTable td:nth-child(2) {
	text-align: left;
}
*/
    .newReservationTable td:nth-child(3) {
        text-align: left;
    }

.newReservationTable > table > tbody > tr:nth-child(even) > td {
    background-color: #f9f9f9;
}

/*
.reservation2 {
	background-color: #fffff2;
}
*/

.reservation2 .newReservationTableTitle {
    background-color: #effeff;
}

.reservation2 .newReservationTable {
    background-color: #fffff2;
}

    .reservation2 .newReservationTable td:nth-child(3) {
        text-align: center;
    }

.newReservationTable .newApplyBtn {
    width: 100px;
    height: 26px;
}

.newReservationTable .applyCancelBtn {
    height: 26px;
}

@media only screen and (min-width: 768px) {
    .registrationEtcAsk .subContentBox {
        flex-direction: column;
    }

    .etcAskTitleInBox {
        max-width: calc(100vw - 72vw);
    }

    .registrationEtcAsk .popupAlarmTitle {
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
}

@media only screen and (min-width: 1180px) {
    .registrationEtcAsk .subContentBox {
        flex-direction: row;
    }

    .etcAskTitleInBox {
        max-width: calc(50vw - 35vw);
    }
}

/* ----------------------------- */
/*   administrative counseling   */
/* ----------------------------- */
.counselBoardTable {
    position: relative;
    display: block;
    width: 100%;
    background-color: #fff;
}

    .counselBoardTable th {
        position: sticky;
        z-index: 20;
        top: 0;
        padding: 10px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #000;
        background-color: #f9f9f9;
        /* border-top: 2px solid #5d5d5d; */
        border-bottom: 1px solid #acacac;
        box-sizing: border-box;
    }

    .counselBoardTable td {
        line-height: 1.5;
        padding: 0 5px;
        text-align: center;
        background-color: #fff;
        border-bottom: 1px solid #dedede;
    }

    .counselBoardTable tbody > tr:nth-child(even) > td {
        background-color: #f9f9f9;
    }

    .counselBoardTable tbody > tr:hover > td {
        background-color: #f0f0f0;
    }

/* ----------------------------- */
/*       graduate schedule       */
/* ----------------------------- */
.scheduleListBox {
    position: relative;
    max-height: 75px;
    border-radius: 0 0 20px 20px;
}

.scheduleContent {
    position: absolute;
    left: 150px;
}

.calendarSearchBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 42px;
    background-color: #fff;
    border: 1px solid #acacac;
    border-radius: 52px;
}

.schedulePrevBtn,
.scheduleNextBtn {
    position: relative;
    display: flex;
    width: 32px;
    height: 32px;
    background-color: #464747;
    border: none;
    border-radius: 32px;
}

    .schedulePrevBtn:before,
    .scheduleNextBtn:before {
        position: absolute;
        z-index: 10;
        top: 50%;
        left: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        font-size: 12px;
        color: #fff;
        transform: translate(-50%, -50%);
        content: "\e910";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

    .scheduleNextBtn:before {
        content: "\e912";
    }

    .schedulePrevBtn span,
    .scheduleNextBtn span {
        display: block;
        text-indent: -9999px;
    }

/* ----------------------------- */
/*         study archive         */
/* ----------------------------- */
.popupBox.studyArchiveView {
    min-width: 320px;
    padding: 10px;
    box-sizing: border-box;
}

/* ----------------------------- */
/*             Mypage            */
/* ----------------------------- */
/* mypage quick */
.mypageRightQuickBox {
    position: fixed;
    z-index: 0;
    top: 90px;
    right: 11px;
    width: 180px;
    min-height: 100px;
}

.mypageQuickListBox {
    position: relative;
    width: 100%;
    min-height: 100px;
    /* 
    background-color: #fff;
    border: 1px solid #acacac;
    */
    border-radius: 10px;
}

.mypageQuickTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 42px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #353946;
    border-radius: 9px 9px 0 0;
}

ul.mypageQuickList {
    position: relative;
    display: grid;
    gap: 5px;
    /* padding: 5px; */
    box-sizing: border-box;
}

    ul.mypageQuickList li {
        position: relative;
        min-height: 50px;
        margin-top: -6px;
    }

        ul.mypageQuickList li:first-child {
            margin-top: 0;
        }

        ul.mypageQuickList li.on {
            z-index: 10;
            margin-left: -1px;
        }

a.newQuickLink:link,
a.newQuickLink:visited,
a.newQuickLink:hover,
a.newQuickLink:active {
    text-decoration: none;
}

.newMyclassLinkBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100px;
    background-color: #fff;
    border: 1px solid #acacac;
    border-radius: 0 10px 10px 0;
}

ul.mypageQuickList li.on .newMyclassLinkBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100px;
    background-color: #fff;
    border: 1px solid #acacac;
    border-left: 1px solid #fff;
    border-radius: 0 10px 10px 0;
}

.newMyclassLinkTitle {
    position: relative;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    min-height: 34px;
    padding: 5px;
    background-color: #d3d3d3;
    border-radius: 0 10px 0 0;
    /*
	border-top-right-radius: 9px;
	border-top-left-radius: 9px;
    */
}

.on .newMyclassLinkTitle {
    position: relative;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    min-height: 34px;
    padding: 5px;
    background-color: #4d5053;
    border-radius: 0 8px 0 0;
    /*
	border-top-right-radius: 9px;
	border-top-left-radius: 9px;
    */
}

.newMyclassLinkBox.noMyClass .newMyclassLinkTitle,
.newMyclassLinkBox.noMyClass .newMypageInfoBox {
    opacity: 0.2;
}

.newMyclassLinkInTitle {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    font-family: 'Roboto', sans-serif;
}

.newMyclassLinkInSubTitle {
    font-size: 14px;
    color: #fff;
}

ul.mypageQuickList li .newMypageInfoBox {
    position: relative;
    display: flex;
    align-items: center;
    padding: 5px;
}

ul.mypageQuickList li.on .newMypageInfoBox:before {
    position: absolute;
    top: 27px;
    right: 6px;
    width: 175px;
    height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #acacac;
    transform: rotate(-4deg);
    content: "";
}

ul.mypageQuickList li .newMypageInfoNoIcon {
    position: relative;
    display: flex;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background-color: #f9f9f9;
    border: 1px solid #7b7b7b;
    border-radius: 50%;
    opacity: 0.3;
}

ul.mypageQuickList li.on .newMypageInfoNoIcon {
    opacity: 1;
}

ul.mypageQuickList li .newMypageInfoNoIcon span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

ul.mypageQuickList li .newMypageInfoNoIcon:before {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 58px;
    font-size: 38px;
    color: #5d5d5d;
    content: "\ea26";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

ul.mypageQuickList li .newMypageInfoImg {
    position: relative;
    display: flex;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    margin-left: 0;
    background-color: #f0f0f0;
    border: none;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0.3;
}

ul.mypageQuickList li.on .newMypageInfoImg {
    opacity: 1;
}

ul.mypageQuickList li .newMypageInfoImg img {
    width: 100%;
    border-radius: 50%;
}

ul.mypageQuickList li .myInfoBox {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    opacity: 0.3;
}

ul.mypageQuickList li.on .myInfoBox {
    opacity: 1;
}

ul.mypageQuickList li .myClassInfo {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    color: #5d5d5d;
    background-color: #fff;
    border: none;
    letter-spacing: -0.02rem;
}

    ul.mypageQuickList li .myClassInfo span {
        display: flex;
        flex-shrink: 0;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 18px;
        font-size: 14px;
        font-weight: normal;
    }

ul.mypageRightBottomQuickList {
    position: fixed;
    right: 10px;
    bottom: 30px;
    width: 170px;
    min-height: 20px;
    padding: 5px 7px;
    background-color: #fff;
    border: 1px solid #acacac;
    border-radius: 24px;
    box-sizing: border-box;
}

    ul.mypageRightBottomQuickList:before {
        position: absolute;
        z-index: 0;
        top: -49px;
        right: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 170px;
        height: 42px;
        font-size: 16px;
        color: #fff;
        background-color: #353946;
        content: "QUICK MENU";
        border-radius: 42px;
    }

    ul.mypageRightBottomQuickList li {
        margin: 5px 0;
    }

        ul.mypageRightBottomQuickList li:first-child:before {
            position: absolute;
            z-index: 10;
            top: -16px;
            left: 50px;
            width: 7px;
            height: 22px;
            background-color: #f0f0f0;
            border: 1px solid #acacac;
            box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            content: "";
        }

        ul.mypageRightBottomQuickList li:first-child:after {
            position: absolute;
            z-index: 10;
            top: -16px;
            right: 50px;
            width: 7px;
            height: 22px;
            background-color: #f0f0f0;
            border: 1px solid #acacac;
            box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            content: "";
        }

.btnQuick {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: 32px;
    line-height: 1.3;
    padding: 5px 20px 5px 36px;
    text-align: left;
    font-size: 13px;
    font-weight: normal !important;
    color: #fff;
    background-color: #7c6a7c;
    border-radius: 82px;
    box-shadow: 3px 3px 5px rgb(0, 0, 0, 0.2);
    box-sizing: border-box;
}

    .btnQuick:before {
        position: absolute;
        z-index: 10;
        top: 50%;
        left: 2px;
        bottom: 2px;
        width: 28px;
        height: 28px;
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: #7c6a7c;
        background-color: #fff;
        border-radius: 50%;
        transform: translate(0, -50%);
        content: "\f060";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        background-image: none;
    }

ul.mypageRightBottomQuickList li:nth-child(odd) .btnQuick {
    background-color: #657295;
}

    ul.mypageRightBottomQuickList li:nth-child(odd) .btnQuick:before {
        color: #657295;
    }

/* mypage main */
.mypageFrame {
    width: calc(100% - 410px);
    height: calc(100% - 10px);
}

.mypagePopupBox {
    position: relative;
    display: block;
    min-width: 1080px;
    /* height: calc(100vh - 20px); */
    height: 100vh;
    padding: 10px;
    box-sizing: border-box;
}

    .mypagePopupBox.counselView,
    .mypagePopupBox.customNoticeView,
    .mypagePopupBox.classCommunityView,
    .mypagePopupBox.classCommunityWrite {
        height: auto;
    }

.mypagePopupTopBox {
    position: relative;
    display: flex;
    width: 100%;
    height: 70px;
}

.mypagePopupLogoBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 210px;
    height: 70px;
    padding: 10px;
    box-sizing: border-box;
}

    .mypagePopupLogoBox img {
        max-width: 100%;
        max-height: 52px;
    }

.mypagePopupTopInfoBox {
    position: relative;
    display: flex;
    align-items: center;
    width: calc(100% - 220px);
    height: 70px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #acacac;
    border-radius: 100px;
    box-sizing: border-box;
}

.studentSelectTitle {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 54px;
    height: 70px;
    margin-left: -10px;
    padding: 0 10px 0 15px;
    font-size: 16px;
    color: #fff;
    background-color: #353946;
    border-radius: 80px 0 0 80px;
}

ul.mypageInfoList {
    position: relative;
    display: flex;
}

    ul.mypageInfoList li {
        display: flex;
        align-items: center;
        margin: 0 5px;
    }

    ul.mypageInfoList.checks input[type="radio"] + label {
        display: flex;
        align-items: center;
        padding-left: 40px;
    }

        ul.mypageInfoList.checks input[type="radio"] + label:before {
            top: 50%;
            width: 32px;
            height: 32px;
            transform: translate(0, -50%);
        }

    ul.mypageInfoList.checks input[type="radio"]:checked + label .mypageInfoBox {
        border: 1px solid #fff;
    }

    ul.mypageInfoList.checks input[type="radio"]:checked + label .mypageInfoTextBox {
        background-color: #7c8a9a;
        border: 1px solid #7c8a9a;
    }

        ul.mypageInfoList.checks input[type="radio"]:checked + label .mypageInfoTextBox span {
            color: #fff;
        }

    ul.mypageInfoList.checks input[type="radio"]:checked + label:after {
        top: 50%;
        left: 0;
        width: 23.5px;
        height: 23.5px;
        background-color: #4195d5;
        transform: translate(4px, -50%);
    }

.mypageInfoBox {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    width: 52px;
    height: 52px;
    background-color: #f9f9f9;
    border: 1px solid #d0d0d0;
    border-radius: 50%;
    overflow: hidden;
}

    .mypageInfoBox img {
        width: 100%;
    }

.mypageInfoTextBox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 100px;
    height: 62px;
    margin-left: -58px;
    padding: 0 40px 0 68px;
    background-color: #f0f0f0;
    border: 1px solid #d0d0d0;
    border-radius: 62px;
    box-sizing: border-box;
}

    .mypageInfoTextBox span {
        display: flex;
        align-items: center;
        height: 32px;
        padding-right: 10px;
        font-size: 18px;
        font-weight: bold;
        color: #000;
        font-family: 'Noto Sans KR', sans-serif;
    }

a.alarmLink {
    position: relative;
    display: flex;
}

    a.alarmLink span {
        display: block;
        text-indent: -9999px;
    }

    a.alarmLink:before {
        position: absolute;
        top: 50%;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 28px;
        height: 28px;
        font-size: 18px;
        color: #ffcc00;
        background-color: #272f37;
        border-radius: 50%;
        transform: translate(0, -50%);
        content: "\e923";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.mypageNameBox {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 32px;
    /* margin-bottom: 10px; */
}

.mypagePopupContentBox {
    position: relative;
    display: flex;
    width: 100%;
    height: calc(100% - 80px);
    margin-top: 10px;
}

.mypagePopupNavBox {
    position: relative;
    display: block;
    width: 220px;
    height: calc(100% - 10px);
    margin-right: 10px;
    padding: 5px;
    background-color: #fff;
    border: 1px solid #acacac;
    border-radius: 10px;
    box-sizing: border-box;
}

.sideNavInBox {
    height: calc(100vh - 153px);
    overflow: auto;
    overflow-x: hidden;
}

.navListTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 130px;
    margin: 5px 10px;
    padding-bottom: 15px;
    font-size: 24px;
    border-bottom: 1px solid #dedede;
    box-sizing: border-box;
    letter-spacing: -0.05rem;
}

    .navListTitle:before {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 50%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        height: 80px;
        font-size: 66px;
        color: #666;
        transform: translate(-50%, 0);
        content: "\e908";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

ul.navList {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* margin-top: 15px; */
    padding: 0 10px;
    box-sizing: border-box;
}

    ul.navList li {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        min-height: 38px;
        transition: all 0.3s;
    }

    ul.navList .depth01 {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        width: 100%;
        height: 38px;
        padding-left: 10px;
        /* padding-left:34px; */
        font-weight: bold;
        color: #5d5d5d;
        border-bottom: 1px solid #dedede;
    }

        ul.navList .depth01:hover {
            color: #000;
        }

        ul.navList .depth01.on:hover {
            color: #fff;
        }

.sideNavBox.on ul.navList a span {
    display: none;
}

ul.navList a:hover {
    display: flex;
    align-items: center;
    width: 100%;
    height: 38px;
    color: #000;
    background-color: #f9f9f9;
    text-decoration: none;
}

.sideNavBox.on ul.navList a:hover {
    color: #000;
}

    .sideNavBox.on ul.navList a:hover span {
        display: block;
        margin-left: 10px;
    }

.sideNavBox.on:hover ul.navList a:hover span {
    margin-left: 0;
}

.sideNavBox.on:hover ul.navList a span {
    display: block;
}

ul.navList a.on {
    color: #fff;
}

.depth01 span {
    font-size: 15px;
}

.depth01.on {
    color: #fff;
    background-color: #4d5053 !important;
}

    /*
.depth01:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 38px;
	font-size: 18px;
	color: #e2e2e2;
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
	transition: all 0.3s;
}
*/
    .depth01.on:before {
        color: #fff !important;
    }

ul.navList li .depth01.noSubNav:after {
    content: "";
}

/*
.nav01:before {
	content: "\e91a";
}
.nav02:before {
	content: "\e918";
}
.nav04:before {
	content: "\e903";
}
.nav05:before {
	content: "\e91b";
}
.nav06:before {
	content: "\e919";
}
.nav07:before {
	content: "\e900";
}
*/

/* ul.navList a:hover:before, */
ul.navList a:hover:after {
    color: #000;
}

ul.navList a.on:hover:after {
    color: #fff;
}

ul.subNavList {
    position: relative;
    width: 100%;
    padding: 0;
    background-color: #f0f0f0;
    /*
	border-top:1px solid #dedede;
	border-bottom:1px solid #dedede;
	transition: all 0.3s; */
    border-radius: 0 0 20px 20px;
    box-sizing: border-box;
    display: none;
}

.sideMenu.on ul.subNavList {
    display: block;
}

ul.subNavList li {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 32px;
    box-sizing: border-box;
}

    ul.subNavList li.on {
        background-color: #d9d9d9;
    }

ul.subNavList a {
    display: flex;
    align-items: center;
    width: 100%;
    /* width: calc(100% - 5px); */
    height: 32px;
    /* margin-left: 10px; */
    padding-left: 18px;
    color: #5d5d5d;
    font-size: 13px;
    font-weight: bold;
    /* border-radius: 32px 0 0 32px; */
}

ul.subNavList li.on a {
    color: #0d6993;
}

ul.subNavList a:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 32px;
    margin-left: 0;
    font-size: 13px;
    content: "·";
    transition: all 0.3s;
}

ul.subNavList li.on a:before {
    color: #0d6993;
}

ul.subNavList a:hover {
    height: 32px;
    color: #328db6;
    font-size: 13px;
    background-color: transparent;
    text-decoration: none;
}

    ul.subNavList a:hover:before {
        color: #328db6;
    }

ul.subNavList a.on {
    font-weight: bold;
    color: #fff;
    background-color: #71777b;
}

ul.subNavList li:last-child a.on {
    border-radius: 0 0 10px 10px;
}

ul.subNavList a.on:hover:before {
    color: #fff;
}

.mypagePopupContentInBox {
    position: relative;
    display: block;
    width: 100%;
    /* width: calc(100% - 440px); */
    /* width: calc(100% - 210px); */
    height: 100vh;
    /* height: calc(100% - 10px); */
    padding: 10px;
    background-color: #fff;
    border: 1px solid #acacac;
    border-radius: 10px;
    border-top-right-radius: 0;
    box-sizing: border-box;
}

.mypagePopupRightContentBox {
    height: calc(100vh - 20px);
    /* height: calc(100vh - 153px); */
    overflow: auto;
    overflow-x: hidden;
}

.mypagePopupMainBox {
    position: relative;
    display: block;
    width: 100%;
    /* width: calc(100% - 190px); */
    min-height: 500px;
}

.mypagePopupMainTopBox,
.mypagePopupMainMiddleBox,
.mypagePopupMainBottomBox {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 105px;
}

.mypagePopupMainMiddleBox,
.mypagePopupMainBottomBox {
    display: block;
    min-height: 100px;
    padding: 0 10px;
    box-sizing: border-box;
}

.mypagePopupMainTopBox.important {
    background-color: #fdf7ff;
    border: 3px solid #905590;
    box-sizing: border-box;
}

.mypagePopupMainBox .mypagePopupMainMiddleBox,
.mypagePopupMainBox .mypagePopupMainBottomBox {
    padding: 0;
}

.mypagePopupBoardBox {
    position: relative;
    display: block;
    width: 50%;
    height: 115px;
    padding: 0 10px 10px;
    border: 1px solid #dedede;
    box-sizing: border-box;
}

.mypagePopupMainTopBox.important .mypagePopupBoardBox {
    height: 125px;
    padding: 5px;
    border: none;
}

.mypageBoardTitle {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    width: 100%;
    height: 38px;
    font-size: 16px;
}

.myPointBox {
    position: relative;
    display: block;
    padding: 5px 15px;
    font-size: 14px;
    color: #fff;
    background-color: #353946;
    border-radius: 42px;
}

.btnMore {
    position: relative;
    display: flex;
    width: 42px;
    height: 42px;
    margin-left: auto;
}

    .btnMore span {
        display: block;
        text-indent: -9999px;
    }

    .btnMore:before {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        font-size: 14px;
        color: #5d5d5d;
        content: "\e90d";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.mypageTableInBox {
    position: relative;
    display: block;
    height: 193px;
    overflow: auto;
}

.mypageListTable {
    position: relative;
    display: block;
    width: 100%;
    background-color: #fff;
}

.survey .mypageListTable table,
.homeworkAskListPopup .mypageListTable table,
.studyReview .mypageListTable table,
.scoreManagePopup .mypageListTable table {
    table-layout: fixed;
}

.classTest .mypageListTable thead,
.customNotice .mypageListTable thead,
.mypageCounsel .mypageListTable thead,
.classCommunity .mypageListTable thead,
.wrongNote .mypageListTable thead,
.studyArchive .mypageListTable thead,
.taskManagement .mypageListTable thead,
.survey .mypageListTable thead,
.scoreManagePopup .mypageListTable thead {
    position: sticky;
    z-index: 5;
    top: 0;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
}

.mypageListTable th {
    height: 42px;
    padding: 5px 0;
    text-align: center;
    background-color: #f5f9ff;
    border-top: 2px solid #5d5d5d;
    border-bottom: 1px solid #dedede;
    box-sizing: border-box;
}

.mypageCounsel .mypageListTable th,
.customNotice .mypageListTable th,
.classCommunity .mypageListTable th,
.wrongNote .mypageListTable th,
.studyArchive .mypageListTable th,
.taskManagement .mypageListTable th {
    border-top: none;
}

.mypageListTable td {
    text-align: center;
    height: 32px;
    padding: 2px 5px;
    border-bottom: 1px solid #dedede;
}

.mypagePopupMainBox .mypageListTable tr:first-child td {
    border-top: 1px solid #dedede;
}

.mypageListTable table > tbody > tr:nth-child(even) > td,
.mypageStudyTable table > tbody > tr:nth-child(even) > td,
.mypagePointTable table > tbody > tr:nth-child(even) > td,
.selfStudyTable table > tbody > tr:nth-child(even) > td {
    background-color: #f9f9f9;
}

.mypageListTable tbody > tr:hover > td,
.mypageStudyTable tbody > tr:hover > td,
.mypagePointTable tbody > tr:hover > td,
.selfStudyTable tbody > tr:hover > td {
    background-color: #f0f0f0 !important;
}

.survey .mypageListTable td.ellipsis,
.scoreManagePopup .mypageListTable td.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.scoreListTable {
    position: relative;
    display: block;
    width: 100%;
    background-color: #fff;
    border-top: 2px solid #5d5d5d;
    border-right: 1px solid #dedede;
}

    .scoreListTable th {
        height: 42px;
        padding: 5px 0;
        text-align: center;
        background-color: #f5f9ff;
        border-bottom: 1px solid #dedede;
        border-left: 1px solid #dedede;
        box-sizing: border-box;
    }

    .scoreListTable td {
        text-align: center;
        height: 32px;
        padding: 2px 5px;
        border-bottom: 1px solid #dedede;
        border-left: 1px solid #dedede;
    }

ul.onlineTaskList {
    position: relative;
    display: block;
    width: 100%;
}

    ul.onlineTaskList li {
        position: relative;
        display: flex;
        /* justify-content: center; */
        margin: 2px 0;
    }

.mypageTaskBtn {
    color: #fff;
    background-color: #789960;
    border: none;
}

    .mypageTaskBtn.end {
        background-color: #525e66;
    }

/*
ul.onlineTaskList li:nth-child(2n) .mypageTaskBtn {
    color: #fff;
    background-color: #789960;
    border: none;
}
*/

.btnAssessment,
.btnAllView,
.btnAttendance {
    position: relative;
    display: flex;
    padding: 7px 45px 9px 15px;
    font-size: 14px;
    color: #fff;
    background-color: #353946;
    border-radius: 42px;
}

.btnAttendance {
    width: 120px;
    height: 32px;
}

    .btnAttendance span {
        position: absolute;
        left: 10px;
        animation: linear 0.8s infinite 0s attendanceBox;
    }

@keyframes attendanceBox {
    0% {
        left: 15px;
    }

    25% {
        left: 10px;
    }

    50% {
        left: 15px;
    }

    75% {
        left: 20px;
    }

    100% {
        left: 15px;
    }
}

.btnAssessment:before,
.btnAllView:before,
.btnAttendance:before {
    position: absolute;
    z-index: 10;
    top: 2px;
    right: 2px;
    bottom: 2px;
    width: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #2d2d2d;
    background-color: #fff;
    border-radius: 50%;
    content: "\f061";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    background-image: none;
}

.btnAttendance:before {
    width: 28px;
    color: #da4343;
    content: "\f0f3";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    background-image: none;
    animation: linear 0.8s infinite 0s alarmBox;
}

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

    25% {
        transform: rotate(45deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-45deg);
    }

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

.payementBox {
    position: relative;
    display: flex;
    align-items: baseline;
    font-family: 'Roboto', sans-serif;
}

.btnPayment {
    display: flex;
    margin-left: auto;
    color: #11a8c1;
    border: 1px solid #11a8c1;
}

.mypageStudyTable,
.mypagePointTable,
.selfStudyTable {
    position: relative;
    display: block;
    width: 100%;
    background-color: #fff;
    border-top: 2px solid #5d5d5d;
}

.selfStudyTable {
    border-top: none;
}

    .selfStudyTable table {
        table-layout: fixed;
    }

    .selfStudyTable tr:first-child {
        position: relative;
        z-index: 8;
        background-color: #f2fbff;
    }

    .mypageStudyTable th,
    .mypagePointTable th,
    .selfStudyTable th {
        height: 34px;
        text-align: center;
        background-color: #f5f9ff;
        border-bottom: 1px solid #dedede;
    }

    .selfStudyTable th {
        position: sticky;
        z-index: 10;
        top: 0;
        color: #167196;
        background-color: #c9f0ff;
        border-top: 1px solid #36a6d2;
        border-bottom: 1px solid #36a6d2;
    }

        .selfStudyTable th:first-child {
            border-left: 1px solid #36a6d2;
            border-radius: 32px 0 0 32px;
        }

        .selfStudyTable th:last-child {
            border-right: 1px solid #36a6d2;
            border-radius: 0 32px 32px 0;
        }

    .mypageStudyTable td,
    .mypagePointTable td,
    .selfStudyTable td {
        text-align: center;
        min-height: 24px;
        padding: 3px 10px;
        line-height: 1.3;
        border-bottom: 1px solid #dedede;
    }

.mypageStudyDateBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 30px;
    margin-left: 10px;
    padding: 0 25px;
    font-size: 13px;
    color: #639bd5;
    border: 1px solid #639bd5;
    border-radius: 38px;
}

.btnAnswerView {
    color: #fff;
    background-color: #0b7bed;
    border: none;
}

/* ----------------------------- */
/*       Mypage Study Point      */
/* ----------------------------- */
.pointRankingInfoBox {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 50px;
    padding: 10px;
    background-color: #f4f4f4;
    border: 1px solid #acacac;
    box-sizing: border-box;
}

.infoModifyPopup .pointRankingInfoBox {
    flex-wrap: wrap;
}

.pointRankingInfoBox:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    content: "";
    border-top: 43px solid #4d5053;
    border-right: 43px solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 0 solid transparent;
}

.mypagePointImgBox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
}

.infoModifyPopup .mypagePointImgBox {
    width: 100%;
}

.pointImgBox {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 50%;
    overflow: hidden;
}

    .pointImgBox img {
        width: 100%;
    }

.pointImgName {
    margin-top: 5px;
    font-size: 16px;
}

.mypagePointTopInBox {
    position: relative;
    display: flex;
    flex-grow: 1;
    width: 100%;
    margin: 0;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #acacac;
    /* border-radius: 5px; */
}

.todayInfoBox {
    position: relative;
    display: block;
    width: 100%;
}

.infoModify .todayInfoBox,
.infoModifyPopup .todayInfoBox {
    display: flex;
}

.infoModifyPopup .todayInfoBox {
    flex-wrap: wrap;
}

.infoTitle {
    position: relative;
    display: flex;
    padding: 5px 10px;
    font-size: 20px;
    color: #2d2d2d;
    background-color: #f9f9f9;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
}

.mypageStudentInfoBox {
    position: relative;
    display: inline-flex;
    width: calc(100% - 62px);
}

.infoModifyPopup .mypageStudentInfoBox {
    width: 100%;
}

.studentInfoChangeBtnBox {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
}

.infoModifyPopup .studentInfoChangeBtnBox {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    margin-left: 0;
}

.infoListTable {
    position: relative;
    margin: 10px 0 0;
    /* border-top: 1px solid #b498db;
    border-right: 1px solid #b498db; */
}

.mypageStudentInfoBox .infoListTable {
    margin-top: 0;
    border-top: 1px solid #dedede;
}

.infoModifyPopup .mypageStudentInfoBox .infoListTable {
    width: 100%;
}

.infoListTable th {
    height: 32px;
    font-size: 15px;
    text-align: left;
    font-weight: normal;
    padding: 0 10px;
    /*
    background-color: #f5edff;
    border-bottom: 1px solid #b498db;
    border-left: 1px solid #b498db;
    */
}

.mypageStudentInfoBox .infoListTable th {
    background-color: #f0f0f0;
    border-bottom: 1px solid #dedede;
}

.infoListTable td {
    height: 32px;
    padding: 3px 7px;
    font-size: 15px;
    text-align: left;
    /*
    border-bottom: 1px solid #b498db;
    border-left: 1px solid #b498db;
    */
}

.mypageStudentInfoBox .infoListTable td {
    padding: 5px 10px;
    border-bottom: 1px solid #dedede;
}

.infoListTable td strong {
    font-size: 22px;
    color: #000;
}

.mypageStudentInfoBox .infoListTable td strong {
    font-size: 14px;
    color: #000;
}

@media screen and (min-width: 768px) {
    .infoModifyPopup .pointRankingInfoBox {
        flex-wrap: nowrap;
    }

    .infoModifyPopup .todayInfoBox {
        flex-wrap: nowrap;
    }

    .infoModifyPopup .mypagePointImgBox {
        width: 150px;
    }

    .infoModifyPopup .mypageStudentInfoBox {
        width: calc(100% - 62px);
    }

    .infoModifyPopup .studentInfoChangeBtnBox {
        display: inline-flex;
        width: auto;
        margin-left: 10px;
    }
}

.mypageContentBox {
    position: relative;
    /* display: flex; */
    width: 100%;
}

.studyPoint .mypageContentBox {
    display: flex;
}

.studyArchive .mypageContentBox {
    width: 100% !important;
    height: calc(100vh - 245px);
    border-top: 2px solid #5d5d5d;
}

.mypageCounsel .mypageContentBox,
.mySMS .mypageContentBox {
    width: 100% !important;
    height: calc(100vh - 200px);
    border-top: 2px solid #5d5d5d;
}

.classTest .mypageContentBox {
    height: calc(100vh - 100px);
}

.customNotice .mypageContentBox {
    width: 100% !important;
    height: calc(100vh - 310px);
    border-top: 2px solid #5d5d5d;
}

.classCommunity .mypageContentBox {
    height: calc(100vh - 255px);
    border-top: 2px solid #5d5d5d;
}

.wrongNote .mypageContentBox {
    width: 100% !important;
    height: calc(100vh - 480px);
    border-top: 2px solid #5d5d5d;
}

.taskManagement .mypageContentBox {
    width: 100% !important;
    height: calc(100vh - 165px);
    border-top: 2px solid #5d5d5d;
}

.tuitionTextbook .mypageContentBox {
    width: 100% !important;
    max-height: 275px;
}

.tuitionTextbook2 .mypageContentBox {
    width: 100% !important;
    height: calc(100vh - 325px);
    border-top: 2px solid #5d5d5d;
}

.survey .mypageContentBox {
    width: 100% !important;
    height: calc(100vh - 245px);
}

.onlineTestList .mypageContentBox,
.scoreManageViewPopup .mypageContentBox {
    display: block;
}

.scoreManagePopup .mypageContentBox {
    display: block;
    max-height: calc(100vh - 225px);
}

.homeworkManageBox .selfStudyTableInBox {
    width: 100% !important;
    max-height: 152px;
}

.mypagePointTableBox,
.mypageClassTestTableBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(60% - 5px);
    max-height: 1228px;
    padding: 15px;
    background: #fff;
    border: 1px solid #acacac;
    overflow: auto;
}

.classTest .mypageClassTestTableBox {
    width: calc(60% - 5px);
}

.scoreManageViewInBox {
    position: relative;
    display: flex;
    width: 100%;
}

.mypageScoreViewBox {
    position: relative;
    width: 20%;
}

.mypageScoreChartBox {
    position: relative;
    width: calc(80% - 10px);
    margin-left: auto;
    padding: 20px;
    text-align: center;
    border: 1px solid #dedede;
    box-sizing: border-box;
}

    .mypageScoreChartBox canvas {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1/0.55 !important;
    }

.scoreManageViewContentBox {
    position: relative;
    display: block;
    width: 100%;
    min-height: 32px;
    line-height: 1.3;
    margin: 10px 0 15px;
    padding: 10px;
    background-color: #fbffff;
    border: 5px solid #4fbcdd;
    box-shadow: 0 20px 10px -15px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    box-sizing: border-box;
}

dl.mypageClassTestTopList {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    background-color: #f9f9f9;
}

    dl.mypageClassTestTopList dt {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 120px;
        height: 40px;
        color: #fff;
        background-color: #353946;
        border-bottom: 1px solid #acacac;
    }

    dl.mypageClassTestTopList dd {
        position: relative;
        display: flex;
        align-items: center;
        width: calc(100% - 120px);
        height: 40px;
        border-bottom: 1px solid #acacac;
    }

.test .mypageClassTestTableBox {
    width: calc(65% - 5px);
}

.mypageClassTestInBox {
    position: relative;
    display: block;
    padding: 10px;
    box-sizing: border-box;
}

.mypageClassTestChartBox .mypageClassTestInBox {
    padding: 0;
}

.mypageTestSearchTopBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #acacac;
}

.mypagePointTilte {
    position: relative;
    display: flex;
    height: 32px;
    font-size: 18px;
    color: #000;
}

.mypagePointRankingBox,
.mypageClassTestChartBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(40% - 5px);
    height: 648px;
    min-height: 200px;
    margin-left: auto;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #acacac;
}

.classTest .mypageClassTestChartBox {
    width: calc(40% - 5px);
    border: none;
}

.test .mypageClassTestChartBox {
    width: calc(35% - 5px);
    border: none;
}

.classTest .mypageClassTestTableBox,
.classTest .mypageClassTestChartBox {
    height: calc(100vh - 100px);
}

.test .mypageClassTestTableBox,
.test .mypageClassTestChartBox {
    height: calc(100vh - 100px);
}

.classTestChartBox {
    position: relative;
    display: block;
    min-height: 150px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #acacac;
    box-sizing: border-box;
}

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

.rankingOrderBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    margin-left: auto;
    font-size: 14px;
    font-weight: bold;
    color: #63a2d8;
}

.mypagePointRankingInBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 200px;
    padding: 0;
    background: #fff;
    border-top: 2px solid #5d5d5d;
}

.searchBtn,
.pointSearchBtn,
.archiveSearchBtn,
.classSearchBtn,
.testSearchBtn,
.recommandBtn {
    min-width: 80px;
    height: 32px;
    font-weight: bold;
    color: #fff;
    background-color: #252d40;
    border: none;
}

.recommandBtn {
    padding: 0 30px;
    background-color: #2a95f0;
}

.rankingInBox {
    position: relative;
    display: flex;
}

.rankingInfo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
    font-size: 14px;
}

    .rankingInfo span {
        height: 22px;
    }

/* ----------------------------- */
/*      Mypage Study Archive     */
/* ----------------------------- */
.mypageCheckTopBox,
.mypageGuideTopBox,
.scheduleTopBox {
    position: relative;
    display: block;
    min-height: 50px;
    border: 3px solid #4d5053;
    border-top: none;
    border-radius: 5px 5px 20px 20px;
}

.mypageGuideTopBox {
    border: 3px solid #3f91cf;
}

.checkListTitle,
.guideListTitle,
.scheduleListTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 28px;
    padding-left: 32px;
    font-size: 15px;
    color: #fff;
    background-color: #4d5053;
    border-radius: 2px 2px 0 0;
    box-sizing: border-box;
}

.guideListTitle {
    background-color: #3f91cf;
}

    .checkListTitle:before,
    .guideListTitle:before,
    .scheduleListTitle:before {
        position: absolute;
        z-index: 5;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 30px;
        font-size: 18px;
        color: #fff;
        /* background-color: #fff;
    border-radius: 50%; */
        content: "\e92e";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.scheduleListTitle:before {
    content: "\e933";
}

ul.mypageCheckList,
ul.mypageGuideList,
ul.scheduleList {
    position: relative;
    display: block;
    padding: 5px;
    background-color: #fff;
    border-radius: 0 0 20px 20px;
    box-sizing: border-box;
}

    ul.mypageCheckList li,
    ul.mypageGuideList li,
    ul.scheduleList li {
        position: relative;
        display: flex;
        align-items: center;
        padding: 3px 10px 3px 15px;
        box-sizing: border-box;
    }

    ul.mypageGuideList li {
        padding: 3px 10px;
    }

    ul.mypageCheckList li:before,
    ul.scheduleList li:before {
        position: absolute;
        z-index: 10;
        top: 50%;
        left: 5px;
        font-size: 18px;
        color: #000;
        transform: translate(0, -50%);
        content: "·";
    }

.mypageSearchTopBox {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 52px;
}

.taskManagement .mypageSearchTopBox,
.classCommunity .mypageSearchTopBox {
    justify-content: flex-start;
}

.classTest .mypageSearchTopBox {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 68px;
    padding: 0 5px;
    background-color: #f9f9f9;
    border: 1px solid #acacac;
}

.searchStudentNameBox {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 32px;
    margin-bottom: -20px;
    padding: 10px 30px 5px 20px;
    font-size: 14px;
    color: #fff;
    background-color: #5d5d5d;
    border-radius: 10px 52px 0 0;
    box-sizing: border-box;
}

.searchTopTitle {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    height: 68px;
    margin: -10px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    background-color: #252d40;
}

.searchTopInBox {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.searchStudentBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 24px;
}

.searchTopDateBox {
    position: relative;
    display: flex;
}

.mypageTopInfoBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 52px;
    font-size: 16px;
}

.mypageInfoTitle {
    margin-left: 10px;
}

    .mypageInfoTitle strong {
        color: #000;
    }

.mypageTopRightBox {
    margin-left: auto;
}

a.archiveLink:link,
a.archiveLink:visited,
a.archiveLink:active,
a.noticeLink:link,
a.noticeLink:visited,
a.noticeLink:active {
    display: inline-block;
    max-width: calc(100% - 45px);
    padding: 5px 0;
    text-align: left;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

a.archiveLink:hover,
a.noticeLink:hover {
    text-decoration: underline;
}

.mypageViewTable {
    position: relative;
    font-size: 14px;
    background-color: #fff;
    border-top: 2px solid #5d5d5d;
    border-right: 1px solid #acacac;
    border-left: 1px solid #acacac;
}

    .mypageViewTable th {
        height: 32px;
        padding: 10px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        background-color: #f5f9ff;
        border-bottom: 1px solid #acacac;
        box-sizing: border-box;
    }

    .mypageViewTable td {
        height: 28px;
        line-height: 1.5;
        padding: 5px 10px;
        text-align: center;
        font-size: 14px;
        border-bottom: 1px solid #acacac;
    }

    .mypageViewTable > table > tbody > tr:nth-child(1) > td {
        background-color: #fffff5;
    }

.mypageBottomBtnBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    margin: 20px;
}

    .mypageBottomBtnBox button {
        margin: 0 2px;
    }

.mypageCloseBtn,
.boardListBtn,
.newBoardListBtn {
    height: 32px;
    padding: 0 30px;
    color: #fff;
    background-color: #353946;
    border: none;
    border-radius: 42px;
}

.counselingView .boardListBtn {
    position: sticky;
    z-index: 50;
    right: 20px;
    bottom: 20px;
    align-self: flex-end;
    min-width: 62px;
    height: 62px;
    padding: 0;
    font-size: 14px;
    border-radius: 50%;
    background-color: #2180f6;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.15);
    transform: translate(0, 0);
}

@media screen and (max-width: 1024px) {
    .counselingView .boardListBtn {
        bottom: 50px;
    }
}

.newBoardWriteBtn {
    height: 32px;
    padding: 0 30px;
    color: #fff;
    background-color: #657295;
    border: none;
    border-radius: 42px;
}

/* 
.homeworkAskViewPopup .newBoardWriteBtn {
    margin-left: auto;
}
*/
/* ----------------------------- */
/*    Mypage Wrong Answer Note   */
/* ----------------------------- */
.mypageWrongAnswerRateBox {
    position: relative;
    /* display: grid;
    grid-template-columns: repeat(3, minmax(30%, auto)); */
    display: flex;
    gap: 10px;
    height: 180px;
}

.wrongAnswerRateBox {
    position: relative;
    display: block;
    width: 100%;
    min-height: 180px;
    background-color: #fff;
    border: 1px solid #acacac;
    box-sizing: border-box;
    overflow: auto;
    transition: all 0.3s;
}

    /*
.wrongAnswerRateBox:hover {
    position: absolute;
    z-index: 10;
    min-height: 280px;
}
*/
    .wrongAnswerRateBox.on {
        position: absolute;
        z-index: 10;
        min-height: 320px;
        transition: all 0.3s;
    }

.wrongAnswerRateInBox {
    position: relative;
    display: block;
    padding: 5px;
    box-sizing: border-box;
}

    .wrongAnswerRateInBox .contentTitle,
    .wrongAnswerRateInBox .contentTopTitle {
        position: sticky;
        z-index: 10;
        top: 5px;
        height: 32px;
        background-color: #fff;
        border-bottom: 2px solid #2d2d2d;
    }

    .wrongAnswerRateInBox .contentTable thead {
        position: sticky;
        z-index: 10;
        top: 37px;
    }

    .wrongAnswerRateInBox .contentTable td {
        padding: 2px 3px;
    }

/*
.wrongAnswerRateInBox .btnDetailView {
    padding: 2px 10px;
}
*/
.classifiedBox {
    position: relative;
    display: flex;
    /* flex-direction: column;
    justify-content: center;*/
    align-items: center;
    width: 100%;
}

.classifiedTitle {
    display: inline-block;
    max-width: 105px;
    margin-top: 3px;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.wrongAnswerRateInBox .viewBtn {
    width: 50px;
}

ul.mypageCheckTopList {
    position: relative;
    display: flex;
    padding: 0 10px;
    /* background-color: #f0f0f0;
    border: 1px solid #dedede; */
}

    ul.mypageCheckTopList li {
        display: flex;
        align-items: center;
        height: 32px;
        /* margin: 0 2px; */
    }

    ul.mypageCheckTopList.checks input[type="radio"] + label {
        padding-left: 24px;
    }

    ul.mypageCheckTopList.checks input[type="radio"]:checked + label:after {
        top: 2px;
        left: 4px;
    }

.goodBox,
.bestBox {
    position: relative;
    display: block;
    width: 100%;
    height: 28px;
    margin: 0 auto;
    background-color: #3c72fc;
    border-radius: 42px;
}

.bestBox {
    background-color: #9272bc;
}

    .goodBox:before,
    .bestBox:before {
        position: absolute;
        z-index: 2;
        top: 3px;
        left: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 22px;
        height: 22px;
        font-size: 14px;
        background-color: #fff;
        border-radius: 50%;
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

    .goodBox span,
    .bestBox span {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 42px;
        height: 28px;
        padding-left: 21px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
    }

.goodBox:before {
    color: #72a5e7;
    content: "\e938";
}

.bestBox:before {
    color: #9272bc;
    content: "\e92d";
}

.wrongNote .answerViewBtn {
    width: 90px;
    font-weight: normal;
    background-color: #3f91cf;
}

.unWrittenBtn {
    color: #f16000;
    border: 1px solid #f16000;
}

.writtenBtn {
    color: #00b0f1;
    border: 1px solid #00b0f1;
}

/* ------------------------- */
/*  mypage attendance alarm  */
/* ------------------------- */
.newScheduleBox {
    position: relative;
    display: block;
}

.newScheduleInLine {
    position: relative;
    display: block;
    padding: 0;
    border: 2px dotted #252d40;
    -webkit-border-radius: 19px;
    -moz-border-radius: 19px;
    border-radius: 19px;
}

.newScheduleInBox {
    position: relative;
    display: block;
    background-color: #fff;
    box-sizing: border-box;
}

.newScheduleTopBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.newSearchTopBox {
    position: relative;
    left: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    padding: 0 5px;
    height: 48px;
    background-color: #f0f0f0;
    border: 1px solid #acacac;
    border-radius: 72px;
    transform: translate(-50%, 0);
}

    /*
.selfStudySchedule .newSearchTopBox {
    left: auto;
    transform: translate(0, 0);
}
*/
    .newSearchTopBox select {
        margin: 0 5px;
    }

    .newSearchTopBox a.btnBlue30:link,
    a.btnBlue30:visited,
    a.btnBlue30:active {
        position: relative;
        height: 30px;
        line-height: 30px;
        padding: 6px 20px;
        color: #fff;
        background-color: #2a3785;
        border: none;
        text-decoration: none;
        border-radius: 20px;
        cursor: pointer;
    }

.newSearchTopInBox {
    position: relative;
    display: flex;
    align-items: center;
}

.newSearchLegendaryBox {
    display: flex;
    margin-left: auto;
}

.newHistoryPrevBtn {
    position: relative;
    display: flex;
    width: 36px;
    height: 36px;
    margin: 0;
    background-color: #5f6271;
    border: none;
    border-radius: 50%;
}

    .newHistoryPrevBtn:before {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;
        font-size: 14px;
        color: #fff;
        content: "\e910";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.newHistoryNextBtn {
    position: relative;
    display: flex;
    width: 36px;
    height: 36px;
    margin: 0;
    background-color: #5f6271;
    border: none;
    border-radius: 50%;
}

    .newHistoryNextBtn:before {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;
        font-size: 14px;
        color: #fff;
        content: "\e912";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

    .newHistoryPrevBtn span,
    .newHistoryNextBtn span {
        position: absolute;
        clip: rect(0 0 0 0);
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
    }

.calendarNumBox {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 0 20px;
    font-size: 42px;
    font-weight: bold;
    color: #000;
    font-family: 'Roboto', sans-serif;
}

.taskSearchBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 38px;
    margin-left: auto;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #657295;
    border: none;
    border-radius: 42px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
}

/*
.taskSearchBtn:before {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 54px;
    height: 38px;
    font-size: 16px;
    color: #fff;
    content: "\e92b";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
*/
.scheduleModifyBtn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    margin: 0 3px;
    padding: 3px 10px;
    color: #fff;
    background-color: #3786b0;
    border: none;
    border-radius: 42px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
}

    .scheduleModifyBtn span {
        font-size: 12px;
    }

.calendarInBox {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    width: calc(100% - 30px);
    margin-left: 5px;
}

.selfScheduleBox {
    position: relative;
    max-width: 154px;
    height: 90px;
    overflow: hidden;
}

.selfStudyScheduleInfoBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    margin-left: auto;
    box-sizing: border-box;
}

ul.selfStudyScheduleInfoList {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    border: 1px solid #657295;
    border-radius: 52px;
}

    ul.selfStudyScheduleInfoList li {
        display: flex;
        align-items: center;
        margin-right: 10px;
    }

        ul.selfStudyScheduleInfoList li:last-child {
            border-left: 1px solid #657295;
        }

        ul.selfStudyScheduleInfoList li span {
            position: relative;
            display: inline-flex;
            align-items: center;
            height: 32px;
            padding: 0 15px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
            background-color: #657295;
            border-radius: 42px 0 0 42px;
            box-sizing: border-box;
        }

        ul.selfStudyScheduleInfoList li:last-child span {
            border-radius: 0;
        }

        ul.selfStudyScheduleInfoList li strong {
            padding: 0 5px;
            font-size: 20px;
            font-family: 'Roboto', sans-serif;
            ;
        }

ul.selfScheduleList {
    position: relative;
    display: block;
    border-top: 1px solid #dedede;
}

    ul.selfScheduleList li {
        display: flex;
        flex-wrap: nowrap;
        padding: 3px 2px;
        border-bottom: 1px solid #dedede;
        border-radius: 2px;
    }

        ul.selfScheduleList li:nth-child(even) {
            background-color: #f9f9f9;
        }

        ul.selfScheduleList li .selfTitle {
            position: relative;
            display: -webkit-box;
            width: calc(100% - 62px);
            padding: 2px 5px;
            font-size: 12px;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            /* 라인수 */
            -webkit-box-orient: vertical;
            word-wrap: break-word;
            line-height: 1.3em;
            height: 3em;
            /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */
            font-weight: bold;
            color: #000;
            background-color: #fdf7ff;
            border: 1px solid #877089;
            border-radius: 5px;
            box-sizing: border-box;
        }

    ul.selfScheduleList div {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: auto;
    }

        ul.selfScheduleList div span {
            font-size: 11px;
        }

.onBox {
    position: absolute;
    z-index: 10;
    top: -3px;
    right: 0;
    padding: 2px;
    font-size: 9px;
    color: #fff;
    background-color: #4194d4;
    border-radius: 50%;
}

.selfStudyBtn {
    font-size: 12px;
    display: inline-flex;
    height: 24px;
    padding: 0 15px;
    color: #666;
    background-color: #fff;
    border: 1px solid #acacac;
    border-radius: 32px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.alarmBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 26px;
    min-height: 26px;
    margin: 2px 0;
    padding: 3px 3px 3px 20px;
    font-size: 12px !important;
    color: #d34e4e;
    background-color: #fff;
    border: 1px solid #d34e4e;
    border-radius: 42px;
    box-sizing: border-box;
    animation: linear 3s infinite 0s colorBox;
}

@keyframes colorBox {
    0% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.alarmBtn span {
    font-size: 12px !important;
    font-weight: bold;
}

.alarmBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 24px;
    font-size: 14px;
    color: #d34e4e;
    content: "\e923";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.greenBox,
.redBox,
.blueBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 26px;
    min-height: 26px;
    margin: 2px 0;
    padding: 3px 7px;
    font-size: 12px !important;
    border-radius: 42px;
}

.greenBox {
    color: #2caa28;
    background-color: #c0f1c4;
}

.redBox {
    color: #d34e4e;
    background-color: #ffcccc;
}

.blueBox {
    color: #22919d;
    background-color: #cbe7ea;
}

.popupCheckTopBox {
    position: relative;
    display: block;
    min-height: 50px;
    margin: 10px;
    border: 3px solid #4d5053;
    border-top: none;
    border-radius: 5px 5px 20px 20px;
}

/*
ul.mypageCheckList  {
    position: relative;
    display: block;
    padding: 10px;
    background-color: #fff;
    border-radius: 0 0 20px 20px;
    box-sizing: border-box;
}
ul.mypageCheckList li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 3px 10px 3px 15px;
    box-sizing: border-box;
}
ul.mypageCheckList li:before {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 5px;
    font-size: 18px;
    color: #000;
    transform: translate(0, -50%);
    content: "·";
}
*/
.scheduleListTable {
    position: relative;
    max-width: 100%;
    padding: 0;
    border: 1px solid #acacac;
    border-top: none;
    box-sizing: border-box;
}

    .scheduleListTable table {
        table-layout: fixed;
        border-collapse: collapse;
    }

    .scheduleListTable th {
        position: relative;
        height: 24px;
        line-height: 24px;
        margin: 0;
        padding: 10px 5px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: #2d2d2d;
        background: #f0f0f0;
        border-top: 1px solid #acacac;
        border-bottom: 1px solid #acacac;
        font-family: 'Roboto', sans-serif;
    }

        .scheduleListTable th:first-child {
            color: #ff3000;
        }

        .scheduleListTable th:last-child {
            color: #004c99;
        }

    .scheduleListTable td {
        position: relative;
        margin: 0;
        padding: 10px 5px;
        height: 110px;
        text-align: left;
        vertical-align: top;
        color: #000 !important;
        font-weight: bold;
        white-space: normal;
        background-color: #fff;
        border-bottom: 1px solid #dedede;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }

.selfStudySchedule .scheduleListTable td {
    padding: 10px 2px;
}

.scheduleListTable td:last-child {
    border-right: none;
}

.scheduleListTable tr:last-child td {
    border-bottom: none;
}

.scheduleListTable p {
    text-align: center;
}

.scheduleListTable span {
    font-size: 15px;
}

.calendarNum {
    position: relative;
    z-index: 4;
    top: 0;
    left: 5px;
    /* display: inline-flex; */
    display: flex;
    margin-right: 5px;
    color: #000;
    font-family: 'Roboto', sans-serif;
}

.scheduleListTable td:first-child .calendarNum {
    color: #ff3000 !important;
}

.scheduleListTable td:last-child .calendarNum {
    color: #004c99 !important;
}

.scheduleListTable .dayBefore .calendarNum {
    position: relative;
    /* display: inline-block; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    margin-top: -3px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background-color: #1b64b5;
    border-radius: 50%;
}

.scheduleListTable .myClassDay {
    background-color: #fff9d0;
}

.scheduleListTable .myWarningDay {
    background-color: #ffe0e0;
}

.scheduleListTable .myOnDay {
    background-color: #e2f6ff;
}

.scheduleListTable .calendarMemoBox {
    position: relative;
}

.scheduleListTable .calendarMemo {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 1.3;
    margin: 3px 0;
    font-size: 13px;
    color: #5d5d5d;
    text-decoration: underline;
    text-underline-position: under;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
}

@media screen and (max-width: 460px) {
    .scheduleListTable th {
        font-size: 12px;
    }

    .scheduleListTable td {
        height: 80px;
        padding: 10px 2px;
        border-right: 1px solid #dedede;
    }

    .scheduleListTable span {
        font-size: 12px;
    }

    .scheduleListTable .calendarMemo {
        margin: 2px 0;
        font-size: 12px;
    }

    .scheduleListTable .dayBefore .calendarNum {
        margin-top: -3px;
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 11px;
    }
}

.calendarMemoPopup {
    position: absolute;
    z-index: 10;
    top: 15px;
    left: 50%;
    width: 250px;
    min-height: 50px;
    padding: 0;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    transform: translate(-50%, 0);
    display: none;
}

.btnLayerPopup {
    position: absolute;
    z-index: 20;
    top: 150px;
    left: 160px;
    min-width: 420px;
    min-height: 50px;
    padding: 0;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    /* display: none; */
}

.calendarMemoPopup.on {
    display: block;
}

.calendarMemoTitle,
.btnLayerTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 10px;
    color: #fff;
    background-color: #2d4679;
    border-bottom: 1px solid #373b42;
    box-sizing: border-box;
}

.btnLayerTitle {
    background-color: #7c59aa;
    border-bottom: 1px solid #5f3d8c;
}

.calendarCloseBtn,
.btnCloseBtn {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
    margin: 0 !important;
}

    .calendarCloseBtn:before,
    .btnCloseBtn:before {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        font-size: 24px;
        color: #fff;
        content: "\e916";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

    .calendarCloseBtn span,
    .btnCloseBtn span {
        display: block;
        text-indent: -9999px;
    }

.memoPopupContent {
    position: relative;
    display: block;
    line-height: 1.5;
    padding: 10px;
    text-align: left;
    font-size: 14px;
    box-sizing: border-box;
}

.btnPopupContent {
    position: relative;
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
    min-height: 42px;
    padding: 5px 0;
}

    .btnPopupContent button {
        /* width: 200px; */
        margin: 0 2px;
    }

dl.memoPopupList {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-top: 1px solid #dedede;
}

    dl.memoPopupList dt {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        min-height: 32px;
        font-weight: bold;
        color: #000;
        background-color: #f5faff;
        border-bottom: 1px solid #dedede;
    }

    dl.memoPopupList dd {
        width: calc(100% - 50px);
        min-height: 32px;
        padding: 5px;
        font-size: 14px;
        font-weight: normal;
        background-color: #fff;
        border-bottom: 1px solid #dedede;
    }

.calendarContentBox {
    display: block;
    width: 100%;
    height: 70px;
    margin: 0;
    background-color: #fff9cd;
    border: 1px solid #dedede;
    overflow: hidden;
}

ul.calendarReservationList {
    position: relative;
    padding: 5px;
    box-sizing: border-box;
}

    ul.calendarReservationList li {
        margin: 3px 0;
        color: #5d5d5d;
        font-weight: normal;
    }

.noticeRollingListBox {
    position: sticky;
    top: 63px;
    left: 190px;
    width: calc(100% - 190px);
    height: 32px;
    background-color: #2b2e3f;
    border-bottom: 1px solid #dedede;
    transition: all 0.3s;
}

@media screen and (max-width: 1440px) {
    .noticeRollingListBox {
        left: 82px;
        width: calc(100% - 82px);
        transition: all 0.3s;
    }
}

/* ----------------------------- */
/*       Mypage 1:1 Counsel      */
/* ----------------------------- */
.counselLinkBox {
    position: relative;
    display: flex;
    align-items: center;
}

a.counselLink:link,
a.counselLink:visited,
a.counselLink:active {
    display: inline-block;
    max-width: calc(100% - 100px);
    padding: 5px 0;
    text-align: left;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    transform: translate(5px, 5px);
}

.replyYetIcon {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 80px;
    padding: 3px 15px;
    text-align: center;
    font-size: 12px;
    color: #ca4242;
    background-color: #fff;
    border: 2px solid #ca4242;
    border-radius: 42px;
    transform: translate(0, -5px);
}

.replyEndIcon {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 80px;
    padding: 3px 15px;
    text-align: center;
    font-size: 12px;
    color: #428bca;
    background-color: #fff;
    border: 2px solid #428bca;
    border-radius: 42px;
    transform: translate(0, -5px);
}

.counselReservationList .replyEndIcon,
.counselReservationList .replyYetIcon {
    margin-right: 5px;
    transform: translate(0, 0);
}

.onlineTestList .replyEndIcon,
.onlineTestList .replyYetIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(0, 0);
}

.studentDownloadBtn,
.teacherDownloadBtn {
    position: relative;
    display: flex;
    width: 28px;
    height: 28px;
}

    .studentDownloadBtn:before,
    .teacherDownloadBtn:before {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 28px;
        height: 28px;
        font-size: 22px;
        color: #5d5d5d;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        content: "\e93a";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

    .studentDownloadBtn span,
    .teacherDownloadBtn span {
        display: block;
        text-indent: -99999px;
    }

.fixedWriteBtn {
    position: sticky;
    z-index: 10;
    right: 20px;
    bottom: 30px;
    align-self: flex-end;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.15);
    /* transform: translate(700px, 0); */
}

.homeworkAskListPopup .fixedWriteBtn {
    right: 20px;
    /* transform: translate(0, 0); */
}

.mypagePopupContentInBox .fixedWriteBtn {
    position: fixed;
}

/*
.mypagePopupRightContentBox .fixedWriteBtn {
    position: fixed;
}
*/
@media screen and (max-width: 1440px) {
    .fixedWriteBtn {
        right: 20px;
        /* transform: translate(0, 0); */
    }
}

@media screen and (max-width: 1024px) {
    .fixedWriteBtn {
        bottom: 50px;
    }
}

.counselingList .fixedWriteBtn {
    bottom: 20px;
    right: 20px;
}

@media screen and (min-width: 768px) {

    .studentDownloadBtn,
    .teacherDownloadBtn {
        margin: 0 auto;
    }
}

@media screen and (max-width: 1024px) {
    .counselingList .fixedWriteBtn {
        bottom: 50px;
    }
}

.fixedWriteBtn:before {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 62px;
    height: 62px;
    font-size: 24px;
    color: #fff;
    background-color: #353946;
    border-radius: 50%;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    content: "\e91d";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.boardViewTable,
.newMypageViewTable,
.counselViewTable {
    font-size: 14px;
    background-color: #fff;
    border-top: 2px solid #2d2d2d;
    border-right: 1px solid #acacac;
    border-left: 1px solid #acacac;
}

    .boardViewTable th,
    .newMypageViewTable th,
    .counselViewTable th {
        height: 32px;
        padding: 10px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        background-color: #f9f9f9;
        border-bottom: 1px solid #acacac;
        box-sizing: border-box;
    }

    .boardViewTable th,
    .counselViewTable th {
        width: 100%;
        padding: 0;
    }

.viewTitleBox,
.viewFileBox {
    display: flex;
    align-items: center;
    width: 100%;
}

.boardViewTable th span:first-child,
.counselViewTable th span:first-child,
.counselReplyTable th span:first-child {
    display: flex;
    align-items: center;
    width: calc(100% - 190px);
    padding: 5px 10px;
    text-align: left;
    box-sizing: border-box;
}

.boardViewTable th span:last-child,
.counselViewTable th span:last-child,
.counselReplyTable th span:last-child {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
    width: 190px;
    padding: 5px 10px;
    box-sizing: border-box;
}

.newMypageViewTable th:first-child {
    text-align: left;
}

.newMypageViewTable th:last-child {
    text-align: right;
}

.boardViewTable td,
.newMypageViewTable td,
.counselViewTable td {
    height: 28px;
    line-height: 1.5;
    padding: 5px 10px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid #acacac;
}

.boardViewTable td,
.counselViewTable td {
    padding: 0;
}

    .boardViewTable td .viewFileBox span,
    .counselViewTable td .viewFileBox span {
        display: flex;
        align-items: center;
        width: 50%;
        height: 32px;
        padding: 5px 10px;
        box-sizing: border-box;
    }

        .boardViewTable td .viewFileBox span:last-child {
            margin-left: auto;
            justify-content: flex-end;
        }

            .boardViewTable td .viewFileBox span:last-child strong {
                margin-left: 5px;
            }

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

    .viewTitleBox,
    .viewFileBox {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
    }

        .viewTitleBox strong,
        .viewFileBox strong {
            padding: 0 5px;
        }

        .viewTitleBox span,
        .viewFileBox span {
            min-height: 32px;
        }

    .boardViewTable th .viewTitleBox span:first-child,
    .boardViewTable th .viewTitleBox span:last-child,
    .boardViewTable th .viewFileBox span:first-child,
    .boardViewTable th .viewFileBox span:last-child,
    .counselViewTable th .viewTitleBox span:first-child,
    .counselViewTable th .viewTitleBox span:last-child,
    .counselViewTable td .viewFileBox span:first-child,
    .counselViewTable td.viewFileBox span:last-child {
        width: 100%;
    }

    .boardViewTable th .viewTitleBox span:first-child,
    .counselViewTable th .viewTitleBox span:first-child {
        border-bottom: 1px solid #dedede;
    }

    .boardViewTable th .viewTitleBox span:last-child,
    .counselViewTable th .viewTitleBox span:last-child {
        justify-content: flex-start;
    }

    .boardViewTable td .viewFileBox span,
    .counselViewTable td .viewFileBox span {
        width: 100%;
        display: flex;
        height: 32px;
        padding: 0 10px;
    }

        .boardViewTable td .viewFileBox span:first-child,
        .counselViewTable td .viewFileBox span:first-child {
            border-bottom: 1px solid #dedede;
        }

        .boardViewTable td .viewFileBox span:last-child {
            justify-content: flex-start;
        }
}

.newMypageViewTable,
.newMypageReplyTable,
.counselViewTable,
.counselReplyTable {
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #acacac;
    border-top: 2px solid #5d5d5d;
}

.counselReplyTable {
    margin-top: -2px;
}

.newMypageReplyTable table {
    table-layout: fixed;
}

.newMypageReplyTable th,
.counselReplyTable th {
    height: 32px;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    background-color: #f9f9f9;
    border-bottom: 1px solid #acacac;
}

.homeworkAskViewPopup .newMypageReplyTable th {
    border-bottom: 1px solid #dedede;
}

.counselReplyTable th {
    padding: 0;
}

.newMypageReplyTable th:first-child {
    text-align: left;
}

.homeworkAskViewPopup .newMypageReplyTable th:first-child {
    text-align: center;
}

.newMypageReplyTable th:last-child {
    text-align: right;
}

.newMypageReplyTable td,
.counselReplyTable td {
    height: 28px;
    line-height: 1.5;
    padding: 5px 10px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid #dedede;
}

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

    .counselReplyTable th .viewTitleBox span:first-child,
    .counselReplyTable th .viewTitleBox span:last-child {
        width: 100%;
    }

    .counselReplyTable th .viewTitleBox span:first-child {
        border-bottom: 1px solid #dedede;
    }

    .counselReplyTable th .viewTitleBox span:last-child {
        justify-content: flex-start;
    }
}

.answerStart {
    position: relative;
    display: inline-block;
    padding: 5px 20px;
    font-size: 12px;
    color: #ff3000;
    background-color: #fff;
    border: 2px solid #ff3000;
    border-radius: 42px;
}

.answerEnd {
    position: relative;
    display: inline-block;
    padding: 5px 20px;
    font-size: 12px;
    color: #004c99;
    background-color: #fff;
    border: 2px solid #004c99;
    border-radius: 42px;
}

.newMypageWriteTable,
.boardInputTable {
    width: 100%;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #acacac;
    border-top: 2px solid #2d2d2d;
}

    .boardInputTable table {
        table-layout: fixed;
    }

    .newMypageWriteTable th,
    .boardInputTable th {
        padding: 10px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #000;
        background-color: #f9f9f9;
        border-bottom: 1px solid #dedede;
    }

    .newMypageWriteTable td,
    .boardInputTable td {
        line-height: 1.5;
        padding: 10px;
        text-align: left;
        font-size: 13px;
        border-bottom: 1px solid #dedede;
    }

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

    .counselingInput .boardInputTable td .W70,
    .counselReservationInput .boardInputTable td .W70 {
        width: 100% !important;
    }
}

dl.newMypageInfoList {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-top: 2px solid #2d2d2d;
    border-right: 1px solid #dedede;
    border-left: 1px solid #dedede;
}

    dl.newMypageInfoList dt {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 32px;
        padding: 5px 10px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #000;
        background-color: #f9f9f9;
        border-bottom: 1px solid #dedede;
        box-sizing: border-box;
    }

        dl.newMypageInfoList dt.essential {
            color: #e8f7ff;
            background-color: #30344a;
        }

    dl.newMypageInfoList dd {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        line-height: 1.5;
        padding: 5px;
        text-align: left;
        font-size: 13px;
        border-bottom: 1px solid #dedede;
    }

        dl.newMypageInfoList dd .ML10.red {
            width: 100%;
        }

        dl.newMypageInfoList dd input,
        dl.newMypageInfoList dd button {
            max-width: 50%;
            margin: 0 2px;
        }

dl.newMypageReplyList {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #acacac;
    border-radius: 5px 5px 10px 10px;
    box-sizing: border-box;
}

    dl.newMypageReplyList dt {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
    }

    dl.newMypageReplyList dd {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 5px;
        background-color: #f0f0f0;
        border-top: 1px dashed #acacac;
        border-radius: 0 0 9px 9px;
        box-sizing: border-box;
    }

        dl.newMypageReplyList dd ul.checkboxList input[type="checkbox"] + label {
            height: auto;
            min-height: 32px;
            padding: 3px 15px 3px 37px;
            text-align: left;
        }

            dl.newMypageReplyList dd ul.checkboxList input[type="checkbox"] + label:before {
                bottom: 0;
                height: auto;
            }

    dl.newMypageReplyList ul.checkboxList input[type="checkbox"]:checked + label:before {
    }

dl.newInfoList {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-top: 1px solid #dedede;
    border-right: 1px solid #dedede;
    border-left: 1px solid #dedede;
}

    dl.newInfoList dt {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        padding: 5px 10px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #5d5d5d;
        background-color: #f9f9f9;
        border-bottom: 1px solid #dedede;
        box-sizing: border-box;
    }

    dl.newInfoList dd {
        position: relative;
        display: flex;
        align-items: center;
        width: calc(100% - 80px);
        line-height: 1.5;
        padding: 5px 10px;
        text-align: left;
        font-size: 13px;
        border-bottom: 1px solid #dedede;
    }

        dl.newInfoList dd input {
            width: 100%;
        }

@media only screen and (min-width: 520px) {
    dl.newMypageInfoList {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        border-top: 2px solid #2d2d2d;
        border-right: 1px solid #dedede;
        border-left: 1px solid #dedede;
    }

        dl.newMypageInfoList dt {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 150px;
            height: auto;
            padding: 5px 10px;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            color: #000;
            background-color: #f9f9f9;
            border-bottom: 1px solid #dedede;
            box-sizing: border-box;
        }

        dl.newMypageInfoList dd {
            position: relative;
            display: flex;
            align-items: center;
            width: calc(100% - 150px);
            line-height: 1.5;
            padding: 5px 10px;
            text-align: left;
            font-size: 13px;
            border-bottom: 1px solid #dedede;
        }

            dl.newMypageInfoList dd:last-child {
                grid-column: 2 / 5;
            }

    dl.newMypageReplyList {
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border: 1px solid #acacac;
        border-radius: 5px 5px 10px 10px;
        box-sizing: border-box;
    }

        dl.newMypageReplyList dt {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
        }

        dl.newMypageReplyList dd {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 5px;
            background-color: #f0f0f0;
            border-top: 1px dashed #acacac;
            border-radius: 0 0 9px 9px;
            box-sizing: border-box;
        }

    dl.newInfoList {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        border-top: 1px solid #dedede;
        border-right: 1px solid #dedede;
        border-left: 1px solid #dedede;
    }

        dl.newInfoList dt {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 150px;
            padding: 5px 10px;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            color: #5d5d5d;
            background-color: #f9f9f9;
            border-bottom: 1px solid #dedede;
            box-sizing: border-box;
        }

        dl.newInfoList dd {
            position: relative;
            display: flex;
            align-items: center;
            width: calc(100% - 150px);
            line-height: 1.5;
            padding: 5px 10px;
            text-align: left;
            font-size: 13px;
            border-bottom: 1px solid #dedede;
        }
}

@media only screen and (min-width: 768px) {
    dl.newMypageInfoList {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        border-top: 2px solid #2d2d2d;
        border-right: 1px solid #dedede;
        border-left: 1px solid #dedede;
    }

        dl.newMypageInfoList dt {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 150px;
            padding: 5px 10px;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            color: #000;
            background-color: #f9f9f9;
            border-bottom: 1px solid #dedede;
            box-sizing: border-box;
        }

        dl.newMypageInfoList dd {
            position: relative;
            display: flex;
            align-items: center;
            width: calc(100% - 150px);
            line-height: 1.5;
            padding: 5px 10px;
            text-align: left;
            font-size: 13px;
            border-bottom: 1px solid #dedede;
        }

            dl.newMypageInfoList dd input,
            dl.newMypageInfoList dd button {
                margin: 0 2px;
            }

                dl.newMypageInfoList dd input.W30 {
                    width: auto !important;
                }

            dl.newMypageInfoList dd .ML10.red {
                width: auto;
            }

    dl.newMypageReplyList {
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border: 1px solid #acacac;
        border-radius: 5px 5px 10px 10px;
        box-sizing: border-box;
    }

        dl.newMypageReplyList dt {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
        }

        dl.newMypageReplyList dd {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 5px;
            background-color: #f0f0f0;
            border-top: 1px dashed #acacac;
            border-radius: 0 0 9px 9px;
            box-sizing: border-box;
        }

    dl.newInfoList {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        border-top: 1px solid #dedede;
        border-right: 1px solid #dedede;
        border-left: 1px solid #dedede;
    }

        dl.newInfoList dt {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 150px;
            padding: 5px 10px;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            color: #5d5d5d;
            background-color: #f9f9f9;
            border-bottom: 1px solid #dedede;
            box-sizing: border-box;
        }

        dl.newInfoList dd {
            position: relative;
            display: flex;
            align-items: center;
            width: calc(100% - 150px);
            line-height: 1.5;
            padding: 5px 10px;
            text-align: left;
            font-size: 13px;
            border-bottom: 1px solid #dedede;
        }
}

@media only screen and (min-width: 1180px) {
    dl.newMypageInfoList {
        display: grid;
        grid-template-columns: 150px calc(50% - 150px) 150px calc(50% - 150px);
    }

        dl.newMypageInfoList dt {
            width: auto;
        }

        dl.newMypageInfoList dd {
            width: auto;
        }

            dl.newMypageInfoList dd input,
            dl.newMypageInfoList dd button {
                margin: 0 2px;
            }

                dl.newMypageInfoList dd input.W30 {
                    width: 100px !important;
                }

            dl.newMypageInfoList dd:last-child {
                grid-column: 2 / 5;
            }

    dl.newInfoList {
        display: grid;
        grid-template-columns: 150px calc(45% - 150px) 150px calc(55% - 150px);
    }

        dl.newInfoList dt {
            width: auto;
        }

        dl.newInfoList dd {
            width: auto;
        }
}

@media only screen and (min-width: 1320px) {

    dl.newMypageReplyList {
        flex-direction: row;
    }

        dl.newMypageReplyList dt {
            width: 50%;
        }

        dl.newMypageReplyList dd {
            width: 50%;
            border-top: none;
            border-left: 1px dashed #acacac;
        }
}

ul.newTeacherList {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

    ul.newTeacherList li {
        position: relative;
        /* float: left; */
        /* display: inline-block; */
        /* width: 195px; */
        /* height: 208px; */
        display: flex;
        align-items: flex-start;
        margin: 10px 0;
        padding: 0 10px;
        text-align: center;
        box-sizing: border-box;
    }

        ul.newTeacherList li span.newImgBox {
            position: relative;
            display: flex;
            width: 120px;
            height: 120px;
            margin: 0 auto 5px;
            border: 1px solid #acacac;
            border-radius: 50%;
            overflow: hidden;
        }

            ul.newTeacherList li span.newImgBox img {
                width: 100%;
                border-radius: 50%;
            }

@media screen and (max-width: 767px) {
    ul.newTeacherList li {
        max-width: 110px;
        margin: 5px 0;
        padding: 0 5px;
    }

        ul.newTeacherList li span.newImgBox {
            width: 80px;
            height: 80px;
        }
}

@media screen and (max-width: 460px) {
    ul.newTeacherList li {
        max-width: 75px;
        margin: 5px 0;
        padding: 0 5px;
    }

        ul.newTeacherList li span.newImgBox {
            width: 50px;
            height: 50px;
        }
}

/*
.newTeacherCheckBox {
	text-align: left;
}
*/
ul.newTeacherList.checks input[type="radio"] + label {
    flex-direction: column;
    padding-top: 40px;
    padding-left: 0;
}

    ul.newTeacherList.checks input[type="radio"] + label:before {
        top: 0;
        left: 50%;
        width: 32px;
        height: 32px;
        transform: translate(-50%, 0);
    }

ul.newTeacherList.checks input[type="radio"]:checked + label:after {
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    background-color: #4195d5;
    transform: translate(-50%, 4px);
}

ul.newTeacherList.checks input[type="radio"]:checked + label .newImgBox {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 767px) {
    ul.newTeacherList.checks input[type="radio"] + label {
        word-break: break-all;
    }

        ul.newTeacherList.checks input[type="radio"] + label:before {
            width: 24px;
            height: 24px;
        }

    ul.newTeacherList.checks input[type="radio"]:checked + label:after {
        width: 16px;
        height: 16px;
    }

    ul.newTeacherList.checks input[type="radio"]:checked + label .newImgBox {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
}

.fileUploadBox {
    position: relative;
    display: flex;
    align-items: center;
    flex-grow: 1;
    width: 100%;
    margin: 0 10px 5px 0;
}

@media screen and (max-width: 767px) {
    .counselingInput .fileUploadBox {
        flex-direction: column;
        align-items: flex-start;
    }
}

.fileUploadBtn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 120px;
    height: 32px;
    margin: 0 10px 0 0;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #252d40;
    border: none;
    border-radius: 42px;
    cursor: pointer;
}

.addedFileName {
    margin: 0 10px 5px 0;
}

a.fileLink:link,
a.fileLink:visited,
a.fileLink:active {
    font-size: 14px;
    color: #2d2d2d;
}

a.fileLink:hover {
    text-decoration: underline;
}

.mypageCheckBtn,
.mypageSaveBtn,
.mypageOnlineBtn,
.boardCheckBtn,
.studyBtn {
    height: 32px;
    padding: 0 30px;
    color: #fff;
    background-color: #657295;
    border: none;
    border-radius: 42px;
    box-sizing: border-box;
}

.studyBtn {
    min-width: 100px;
    padding: 0 20px;
}

.mypageCancelBtn,
.boardCancelBtn {
    height: 32px;
    padding: 0 30px;
    color: #fff;
    background-color: #a4a7af;
    border: none;
    border-radius: 42px;
}

/* ----------------------------- */
/*  Mypage attendance/class info */
/* ----------------------------- */
.retestPassBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 26px;
    min-height: 26px;
    margin: 2px 0;
    padding: 3px 7px;
    font-size: 12px !important;
    color: #329f41;
    background-color: #c3ffa4;
    border-radius: 42px;
}

.lateInfo {
    position: relative;
    display: flex;
    align-items: center;
    height: 24px;
    margin: 5px 3px;
    padding-left: 22px;
    font-size: 1.2rem;
    color: #5d5d5d;
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 32px;
    font-family: 'Roboto', sans-serif;
}

    .lateInfo:before {
        position: absolute;
        left: 0;
        width: 20px;
        height: 20px;
        background-color: #c487f3;
        border-radius: 50%;
        content: "";
    }

.holidayInfo {
    position: relative;
    display: flex;
    align-items: center;
    height: 24px;
    margin: 5px 3px;
    padding-left: 22px;
    font-size: 1.2rem;
    color: #5d5d5d;
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 32px;
    font-family: 'Roboto', sans-serif;
}

    .holidayInfo:before {
        position: absolute;
        left: 0;
        width: 20px;
        height: 20px;
        background-color: #e6d93b;
        border-radius: 50%;
        content: "";
    }

.addClassInfo {
    position: relative;
    display: flex;
    align-items: center;
    height: 24px;
    margin: 5px 3px;
    padding-left: 22px;
    font-size: 1.2rem;
    color: #5d5d5d;
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 32px;
    font-family: 'Roboto', sans-serif;
}

    .addClassInfo:before {
        position: absolute;
        left: 0;
        width: 20px;
        height: 20px;
        background-color: #ffac8c;
        border-radius: 50%;
        content: "";
    }

.myClassTimeInfo {
    position: relative;
    display: flex;
    align-items: center;
    height: 24px;
    margin: 5px 3px;
    padding-left: 22px;
    font-size: 1.2rem;
    color: #5d5d5d;
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 32px;
    font-family: 'Roboto', sans-serif;
}

    .myClassTimeInfo:before {
        position: absolute;
        left: 0;
        width: 20px;
        height: 20px;
        background-color: #f0f0f0;
        border-radius: 50%;
        content: "";
    }

.attendanceBox {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin: 2px;
    padding: 0 5px;
    font-size: 12px !important;
    font-weight: normal !important;
    color: #fff;
    background-color: #4ebfd2;
    border: 1px solid #4ebfd2;
    border-radius: 5px;
    font-family: 'Roboto', sans-serif;
}

.attendanceInfo {
    position: relative;
    display: flex;
    align-items: center;
    height: 24px;
    margin: 5px 3px;
    padding-left: 22px;
    font-size: 12px !important;
    font-weight: normal !important;
    color: #5d5d5d;
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 32px;
    font-family: 'Roboto', sans-serif;
}

    .attendanceInfo:before {
        position: absolute;
        left: 0;
        width: 20px;
        height: 20px;
        background-color: #4ebfd2;
        border-radius: 50%;
        content: "";
    }

.absenteeBox {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin: 2px;
    padding: 0 5px;
    font-size: 12px !important;
    font-weight: normal !important;
    color: #fff;
    background-color: #e21b1b;
    border: 1px solid #e21b1b;
    border-radius: 5px;
    font-family: 'Roboto', sans-serif;
}

.absenteeInfo {
    position: relative;
    display: flex;
    align-items: center;
    height: 24px;
    margin: 5px 3px;
    padding-left: 22px;
    font-size: 12px !important;
    font-weight: normal !important;
    color: #5d5d5d;
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 32px;
    font-family: 'Roboto', sans-serif;
}

    .absenteeInfo:before {
        position: absolute;
        left: 0;
        width: 20px;
        height: 20px;
        background-color: #ec6717;
        border-radius: 50%;
        content: "";
    }

.lateBox {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin: 2px;
    padding: 0 5px;
    font-size: 12px !important;
    font-weight: normal !important;
    color: #fff;
    background-color: #858a98;
    border: 1px solid #858a98;
    border-radius: 5px;
    font-family: 'Roboto', sans-serif;
}

.lateInfo {
    position: relative;
    display: flex;
    align-items: center;
    height: 24px;
    margin: 5px 3px;
    padding-left: 22px;
    font-size: 12px !important;
    font-weight: normal !important;
    color: #5d5d5d;
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 32px;
    font-family: 'Roboto', sans-serif;
}

    .lateInfo:before {
        position: absolute;
        left: 0;
        width: 20px;
        height: 20px;
        background-color: #ec6717;
        border-radius: 50%;
        content: "";
    }

/* ----------------------------- */
/*      Mypage custom notice     */
/* ----------------------------- */
.popupAlarmTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    margin-bottom: 10px;
    padding: 0 20px 0 52px;
    font-size: 16px;
    /* font-weight: bold; */
    color: #fff;
    background-color: #696f81;
    border: 1px solid #696f81;
    border-radius: 52px;
}

/*
.tuitionTextbook .popupAlarmTitle {
    margin-bottom: 0;
}
*/
.registrationEtcAsk .popupAlarmTitle {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.popupAlarmTitle:before {
    position: absolute;
    z-index: 20;
    top: 3px;
    left: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 24px;
    color: #ffeb00;
    border-radius: 50%;
    content: "\e90e";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    animation: linear 1s infinite 0s alarmPopupBox;
}

@keyframes alarmPopupBox {
    0% {
        opacity: 1
    }

    70% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.popupAlarmTitle:after {
    position: absolute;
    z-index: 10;
    top: 3px;
    left: 3px;
    width: 40px;
    height: 40px;
    background-color: #353946;
    border-radius: 50%;
    content: "";
}

a.noticeLink:link,
a.noticeLink:visited,
a.noticeLink:active {
    display: inline-block;
    max-width: calc(100% - 45px);
    padding: 5px 0;
    text-align: left;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* ----------------------------- */
/*          Mypage Survey        */
/* ----------------------------- */
.surveyTitleBox {
    display: inline-block;
    max-width: calc(100% - 5px);
    padding: 5px 0;
    text-align: left;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.participateBtn {
    position: relative;
    height: 26px;
    color: #3c93ef;
    border: 1px solid #3c93ef;
}

.reEngagementBtn {
    position: relative;
    height: 26px;
    color: #ff8a00;
    border: 1px solid #ff8a00;
}

.engagementEndBtn {
    height: 26px;
}

/* ----------------------------- */
/*       Mypage info modify      */
/* ----------------------------- */
.mypageInfoListTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    padding-left: 32px;
    font-size: 16px;
    color: #5d5d5d;
    font-weight: bold;
}

    .mypageInfoListTitle:before {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        font-size: 20px;
        color: #5d5d5d;
        transform: translate(-5px, -5px);
        content: "\e934";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

/* ----------------------------- */
/*           Mypage SMS          */
/* ----------------------------- */
ul.mySMSList {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* border-top: 1px solid #acacac; */
}

    ul.mySMSList li {
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }

        /*
ul.mySMSList li:hover {
    max-height: 100%;
    overflow: auto;
    transition: all 0.3s;    
}
*/
        ul.mySMSList li:nth-child(even) {
            background-color: #f9f9f9;
        }

.mySMSListBox {
    position: relative;
    display: flex;
    flex-shrink: 0;
    width: 100%;
    max-height: 100px;
    /* padding: 10px 20px; */
    border-bottom: 1px solid #acacac;
    overflow: hidden;
    transition: all 0.3s;
    box-sizing: border-box;
}

    .mySMSListBox:hover {
        max-height: 100%;
        overflow: auto;
        transition: all 0.3s;
    }

.mySMSListInBox {
    position: relative;
    display: flex;
    flex-shrink: 0;
    width: 100%;
    min-height: 90px;
    box-sizing: border-box;
}

.mySMSDateInfoBox {
    position: relative;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150px;
    padding: 0 20px 0 0;
    color: #000;
    box-sizing: border-box;
}

    .mySMSDateInfoBox strong {
        height: 24px;
        font-size: 16px;
        font-family: 'Roboto', sans-serif;
    }

    .mySMSDateInfoBox span {
        font-size: 15px;
        font-weight: bold;
        color: #2a64ff;
    }

.mySMSContentBox {
    display: flex;
    width: calc(100% - 150px);
    padding: 10px;
    box-sizing: border-box;
}

/* ----------------------------- */
/*    Mypage tuition & textbook   */
/* ----------------------------- */
.bankAccountBtn {
    display: flex;
    padding: 0 20px;
    padding-right: 38px;
    margin-left: auto;
    margin-right: -12px;
}

    .bankAccountBtn:before {
        position: absolute;
        top: 2px;
        right: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 28px;
        height: 28px;
        font-size: 16px;
        color: #353946;
        background-color: #fff;
        border-radius: 50%;
        content: "\f061";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        background-image: none;
        animation: linear 1.5s infinite 0s bankAccountBox;
    }

@keyframes bankAccountBox {
    0% {
        right: 2px;
    }

    25% {
        right: 7px;
    }

    50% {
        right: 2px;
    }

    75% {
        right: 7px;
    }

    100% {
        right: 2px;
    }
}

.tuitionContentBox {
    position: relative;
    display: flex;
    /* display: grid;
    grid-template-columns: 40% 30% 28%;
    gap: 10px; */
    width: 100%;
    /* min-height: 100px; */
    margin-bottom: 10px;
}

.tuitionContentLeftBox,
.tuitionContentRightBox {
    position: relative;
    display: block;
    width: calc(40% - 5px);
    padding: 0 10px;
    /* border-top: 2px solid #5d5d5d; */
    background-color: #fffffe;
    border: 1px solid #acacac;
    box-sizing: border-box;
}

.tuitionContentRightBox {
    width: calc(60% - 5px);
    margin-left: auto;
}

/* 
.tuitionContentInBox:last-child .hideLayer {
    right: 0;    
    left: auto;
}
*/
.tuitionContentBottomBox {
    position: relative;
    padding: 0 10px 10px;
    background-color: #f7fdff;
    border: 2px solid #307f9d;
    box-sizing: border-box;
}

    .tuitionContentBottomBox.MT10 {
        margin-top: 0 !important;
    }

.tuitionExBox {
    position: relative;
    display: flex;
    /* flex-direction: column; 
    padding: 5px; */
    font-size: 14px;
    /* background-color: #fffef7;
    border: 1px solid #dedede; 
    border-radius:  10px; */
    box-sizing: border-box;
}

.tuitionExTitle {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 32px;
    /* width: 100%; */
    padding-left: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

    .tuitionExTitle .hideLayer {
        right: auto;
        left: 0;
        width: 500px;
    }

    .tuitionExTitle .layerCheckIcon:before {
        font-size: 18px;
        color: #328bc5;
    }

/*
.tuitionContentRightBox .tuitionExTitle {
    height: 24px;
    font-size: 16px;
}
*/
/*
.tuitionExTitle:after {
    position: absolute;
	z-index: 10;
	top: 0;
	left: 170px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	font-size: 18px;
	color: #000;
	content:"\e92c";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;    
}
*/
/*
.tuitionContentRightBox .tuitionExTitle:before {
    height: 24px;
    font-size: 16px;
} 
*/
.tuitionExContentBox {
    line-height: 1.5;
    padding: 5px 5px 10px;
}

.newMypageTuitionBottmBox {
    position: relative;
    display: block;
}

.newPointListTop {
    position: relative;
    display: flex;
    align-items: baseline;
    margin: 10px 0 0;
    padding: 5px 10px 5px 42px;
    font-size: 16px;
    color: #5d5d5d;
    background-color: #f6fcff;
    border: 2px solid #5d5d5d;
}

    .newPointListTop:before {
        position: absolute;
        z-index: 10;
        top: 50%;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
        font-size: 20px;
        color: #4fb3ff;
        transform: translate(15px, -45%);
        content: "\e92b";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

    .newPointListTop strong {
        font-size: 20px;
        color: #000;
    }

.newPointListBox {
    height: 133px;
}

.newPointListTable {
    position: relative;
    font-size: 14px;
    background-color: #fff;
}

    .newPointListTable th {
        position: sticky;
        top: 0;
        padding: 10px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #000;
        background-color: #f9f9f9;
        border-bottom: 1px solid #acacac;
    }

    .newPointListTable td {
        line-height: 1.5;
        padding: 5px;
        text-align: center;
        border-bottom: 1px solid #dedede;
    }

    .newPointListTable > table > tbody > tr:nth-child(even) > td {
        background-color: #f9f9f9;
    }

.accountListTable {
    margin-top: 10px;
    font-size: 14px;
    background-color: #fff;
    border-top: 2px solid #5d5d5d;
}

.studentAccountLayer .accountListTable {
    margin: 10px;
}

.accountListTable th {
    padding: 2px 5px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    background-color: #f9f9f9;
    border-bottom: 1px solid #dedede;
}

.accountListTable td {
    line-height: 1.5;
    padding: 2px 5px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid #dedede;
}

.accountNum {
    font-size: 14px;
    font-weight: bold;
    color: #3f9eb3;
    font-family: 'Roboto', sans-serif;
}

.newMypageApplyBtn {
    position: relative;
    height: 26px;
    margin: 2px 3px;
    padding: 0 20px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #9979c5;
    border: none;
    border-radius: 42px;
    cursor: pointer;
}

.newMypageAccountBtn {
    position: relative;
    min-width: 120px;
    height: 26px;
    margin: 2px 3px;
    padding: 0 20px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #b98757;
    border: none;
    border-radius: 42px;
    cursor: pointer;
}

.newMypagePromiseBtn {
    position: relative;
    min-width: 120px;
    height: 26px;
    margin: 0 3px;
    padding: 0 20px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #da4a6f;
    border: none;
    border-radius: 42px;
    cursor: pointer;
}

.accountBottomBox {
    position: relative;
    display: block;
    line-height: 1.5;
    margin-top: 5px;
    padding: 0 10px;
    font-size: 14px;
    text-align: left;
}

.newMypageReceiptBtn {
    position: relative;
    min-width: 120px;
    height: 26px;
    margin: 2px 3px;
    padding: 0 20px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #5fb589;
    border: none;
    border-radius: 42px;
    cursor: pointer;
}

.tuitionTitleBox {
    position: relative;
    display: flex;
    padding: 5px 0;
    font-size: 14px;
    /* background-color: #fffef7; */
    /* border-top: 1px solid #5d5d5d; */
    box-sizing: border-box;
}

.tuitionTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    width: 100%;
    padding-left: 42px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

    .tuitionTitle:before {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 32px;
        font-size: 20px;
        text-indent: 0;
        color: #000;
        content: "\e93b";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.zeropayBtn {
    z-index: 10;
    display: inline-flex;
    padding: 0 20px;
    font-size: 13px;
}

.zeropayExBox {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    height: 32px;
    margin-left: -25px;
    padding: 0 20px 0 30px;
    color: #0b95c8;
    background-color: #ebfbff;
    border: 1px solid #249fbc;
    border-radius: 42px;
}

ul.newPaymentBox {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    /* padding-left: 10px; */
    font-size: 14px;
    color: #5d5d5d;
    background-color: #f6fcff;
    border: 2px solid #5d5d5d;
    box-sizing: border-box;
}

    ul.newPaymentBox li {
        position: relative;
        margin: 0 5px;
    }

        ul.newPaymentBox li:last-child {
            position: relative;
            margin-left: auto;
            padding: 5px 10px;
            background-color: #fef4ff;
            border-left: 1px solid #acacac;
        }

        ul.newPaymentBox li strong {
            margin-left: 5px;
        }

.newPaymentTopTitle {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
}

.newPaymentBottomNum01 {
    position: relative;
    display: inline-flex;
    font-size: 20px;
    color: #298417;
    font-family: 'Roboto', sans-serif;
    letter-spacing: -0.1rem;
}

.calcuationSymbolPlus {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    background-color: #3ba097;
    border-radius: 50%;
    text-indent: -9999px;
}

    .calcuationSymbolPlus:before {
        position: absolute;
        top: 7px;
        left: 14px;
        width: 5px;
        height: 19px;
        background-color: #fff;
        content: "";
    }

    .calcuationSymbolPlus:after {
        position: absolute;
        top: 14px;
        left: 7px;
        width: 19px;
        height: 5px;
        background-color: #fff;
        content: "";
    }

.newPaymentBottomNum02 {
    position: relative;
    display: inline-flex;
    font-size: 20px;
    color: #2177AD;
    font-family: 'Roboto', sans-serif;
    letter-spacing: -0.1rem;
}

.calcuationSymbolEqual {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    background-color: #a06113;
    border-radius: 50%;
    text-indent: -9999px;
}

    .calcuationSymbolEqual:before {
        position: absolute;
        top: 10px;
        left: 7px;
        width: 18px;
        height: 5px;
        background-color: #fff;
        content: "";
    }

    .calcuationSymbolEqual:after {
        position: absolute;
        top: 18px;
        left: 7px;
        width: 18px;
        height: 5px;
        background-color: #fff;
        content: "";
    }

.newPaymentBottomNum03 {
    position: relative;
    display: inline-flex;
    font-size: 20px;
    color: #A73414;
    font-family: 'Roboto', sans-serif;
    letter-spacing: -0.1rem;
}

.newOnlinePaymentBtn {
    position: relative;
    display: flex;
    flex-shrink: 0;
    padding: 5px 20px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background-color: #252d40;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
}

.newStudentAccountBtn {
    position: relative;
    display: flex;
    flex-shrink: 0;
    padding: 5px 15px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background-color: #8f76b3;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
}

.paymentInBox {
    display: flex;
    flex-wrap: wrap;
    /* flex-direction: column; */
    justify-content: center;
    align-items: baseline;
    /* height: 76px; */
}

.newPaymentBottomBox {
    position: relative;
    display: flex;
    align-items: center;
}

.newNumBox {
    position: relative;
    display: inline-flex;
    justify-content: flex-end;
    min-width: 90px;
    height: 28px;
    padding: 0 5px;
    font-size: 20px;
    color: #85278B;
    background-color: #fff;
    border: 1px solid #85278B;
    font-family: 'Roboto', sans-serif;
}

.newCyberMoneyBtn {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    height: 28px;
    margin-left: 5px;
    padding: 3px 20px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background-color: #85278B;
    border: none;
    border-radius: 32px;
    box-sizing: border-box;
    cursor: pointer;
}

.accountListTable2,
.newFeeListTable {
    position: relative;
    width: 100%;
    font-size: 14px;
    background-color: #fff;
}

    /*
.newFeeListTable {
    border-top: 2px solid #5d5d5d;
}
*/
    .accountListTable2 th,
    .newFeeListTable th {
        position: sticky;
        z-index: 10;
        top: 0;
        padding: 10px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #000;
        background-color: #f9f9f9;
        border-bottom: 1px solid #acacac;
    }

    .accountListTable2 td,
    .newFeeListTable td {
        line-height: 1.5;
        padding: 2px 5px;
        text-align: center;
        border-bottom: 1px solid #dedede;
    }

    .accountListTable2 > table > tbody > tr:nth-child(even) > td,
    .newFeeListTable > table > tbody > tr:nth-child(even) > td {
        background-color: #f9f9f9;
    }

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

.newCashBox {
    position: relative;
    font-size: 18px;
    color: #000;
    font-family: 'Roboto', sans-serif;
}

.newCashPaymentBox {
    position: relative;
    font-size: 18px;
    color: #f00;
    font-family: 'Roboto', sans-serif;
}

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

.accountTitleBox {
    padding: 3px 0;
    font-size: 14px;
    color: #2d94cd;
    box-sizing: border-box;
}

.newRefundAskBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 3px 20px;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    background-color: #d26aa1;
    border: none;
    border-radius: 32px;
}

.newMypageTuitionTitle2 {
    position: relative;
    display: flex;
    justify-content: flex-start;
    height: 56px;
    margin: 0;
    padding: 12px 25px 5px 45px;
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(to left, #b781a7, #db98c7);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

    .newMypageTuitionTitle2:before {
        position: absolute;
        top: 12px;
        left: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
        font-size: 2.2rem;
        color: #fff;
        border-radius: 50%;
        content: "\ea27";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.newFeeListTable tfoot td {
    padding: 10px;
    border-bottom: none;
}

.newFeeBottomBox {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 42px;
    padding-right: 20px;
    background-color: #f0f0f0;
}

.tuitionBox .newMypageBottomBox {
    position: relative;
    display: flex;
    justify-content: center;
    flex-grow: 1;
    width: 100%;
    margin: 15px 0;
}

.newMypageOnlinePaymentBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 140px;
    height: 42px;
    margin: 0 5px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    background-color: #252d40;
    border: none;
    border-radius: 42px;
    cursor: pointer;
}

.newMypagePaymentCancelBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 140px;
    height: 42px;
    margin: 0 5px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    background-color: #a4a7af;
    border: none;
    border-radius: 42px;
    cursor: pointer;
}

.accountAskBtn,
.cashReceiptAskBtn {
    z-index: 999;
    height: 24px;
}

/* ----------------------------- */
/*               faq             */
/* ----------------------------- */
dl.faqList {
    position: relative;
    display: block;
    padding: 10px;
    box-sizing: border-box;
}

    dl.faqList dt {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 42px;
        margin-top: -1px;
        padding: 5px 5px 5px 30px;
        border: 1px solid #acacac;
        box-sizing: border-box;
    }

        dl.faqList dt a {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 26px;
            padding: 5px 40px 5px 5px;
        }

        dl.faqList dt:before {
            position: absolute;
            z-index: 10;
            top: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 42px;
            font-size: 18px;
            color: #acacac;
            content: "\e90c";
            font-family: 'icomoon' !important;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            transition: all 0.3s;
        }

        dl.faqList dt:after {
            position: absolute;
            z-index: 10;
            top: 7px;
            left: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 24px;
            height: 24px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
            background-color: #679dff;
            /* border: 1px solid #246cf1; */
            border-radius: 5px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.03);
            content: "Q";
        }

        dl.faqList dt.on:before {
            color: #2d2d2d;
            transform: rotate(-180deg);
            transition: all 0.3s;
        }

        dl.faqList dt.on + dd {
            display: block;
            max-height: 2000px;
        }

    dl.faqList dd {
        position: relative;
        margin-top: -1px;
        padding: 10px 10px 10px 35px;
        background-color: #f5feff;
        border: 1px solid #acacac;
        box-sizing: border-box;
        display: none;
    }

        dl.faqList dd:before {
            position: absolute;
            z-index: 10;
            top: 5px;
            left: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 24px;
            height: 24px;
            font-size: 14px;
            font-weight: bold;
            color: #3a80ff;
            background-color: #fff;
            border: 1px solid #dedede;
            border-radius: 5px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.03);
            content: "A";
        }

.moreFaqBtn {
    position: fixed;
    z-index: 20;
    right: 20px;
    bottom: 60px;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #2180f6;
    border-radius: 150px;
    box-shadow: 0 20px 10px -12px rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
}

@media screen and (min-width: 768px) {
    .moreFaqBtn {
        bottom: 280px;
        width: 250px;
        padding: 20px;
        /* background-color: #3b3f44; */
    }
}

@media screen and (min-width: 1024px) {
    .moreFaqBtn {
        bottom: 250px;
        width: 250px;
        padding: 20px;
        /* background-color: #3b3f44; */
    }
}

@media screen and (min-width: 1440px) {
    .moreFaqBtn {
        right: auto;
        left: 50%;
        margin-left: 450px;
    }
}

.pcFaqBtn {
    display: none;
}

.mobileFaqBtn {
    display: block;
}

@media screen and (min-width: 768px) {
    .pcFaqBtn {
        line-height: 1.5;
        display: block;
    }

    .mobileFaqBtn {
        display: none;
    }
}

/* ----------------------------- */
/*     Mypage Task Management    */
/* ----------------------------- */
.managePreTitle {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 42px;
    padding: 10px 40px 10px 90px;
    font-size: 18px;
    background-color: #f9f9f9;
    border: 1px solid #dedede;
    border-radius: 72px;
    box-sizing: border-box;
}

    .managePreTitle:before {
        position: absolute;
        z-index: 10;
        top: 50%;
        left: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 72px;
        height: 72px;
        font-size: 42px;
        color: #fff;
        background-color: #36afc9;
        border-radius: 100px;
        transform: translate(0, -50%);
        content: "\e92c";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

    .managePreTitle span {
        color: #5d5d5d;
    }

        .managePreTitle span:first-child {
            display: flex;
            align-items: center;
            height: 42px;
            font-size: 20px;
            font-weight: bold;
            color: #1587a0;
            font-family: 'Noto Sans KR', sans-serif;
        }

ul.managePreList {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 20px 80px;
    box-sizing: border-box;
}

    ul.managePreList li {
        position: relative;
        display: block;
        min-height: 32px;
        padding: 3px 0 3px 10px;
        font-size: 16px;
        font-weight: bold;
        list-style: decimal;
        list-style-position: outside;
        box-sizing: border-box;
    }

        ul.managePreList li:before {
            position: absolute;
            z-index: 10;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 10px;
            height: 20px;
            font-size: 18px;
            content: ".";
        }

        ul.managePreList li span:first-child {
            font-size: 17px;
            color: #000;
        }

.selfStudyTableBox {
    position: relative;
    display: block;
    min-height: 50px;
    /* height: 176px; */
    padding: 10px;
    border: 2px dashed #329cc6;
    border-top: 2px solid #329cc6;
    background-color: #f2fbff;
    box-sizing: border-box;
}

.selfStudyReferenceBox {
    position: relative;
    float: right;
    display: inline-block;
    max-width: calc(100% - 40px);
    /* margin-right: -10px; */
    padding: 5px 20px 5px 10px;
    text-align: right;
    font-size: 12px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
}

    .selfStudyReferenceBox span {
        display: block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .selfStudyReferenceBox:before {
        position: absolute;
        z-index: 5;
        top: -5px;
        left: -34px;
        width: 0;
        height: 0;
        border-top: 18px solid transparent;
        border-right: 18px solid rgba(0, 0, 0, 0.8);
        border-bottom: 18px solid transparent;
        border-left: 18px solid transparent;
        content: "";
    }

/* ----------------------------- */
/*       Mypage Achievement      */
/* ----------------------------- */

.popupBox.homeworkManageBox {
    position: relative;
    display: block;
    min-width: 768px;
    background-color: #eaedef;
}

.popupBox.attendanceAlarmPopup {
    min-width: 768px;
}

.popupBox.classEvaluationPopup,
.popupBox.scoreViewPopup {
    min-width: 1080px;
}

.popupBox.childrenInfoPopup {
    min-width: 768px;
}

.popupBox.tuitionPaymentPopup {
    min-width: 460px;
}

.popupBox.infoModifyPopup {
    min-width: 320px;
}

/* header */
.popupTop {
    position: relative;
    display: block;
    width: 100%;
    height: 150px;
    background: url(../images/bg/bg_line.png)repeat #353946;
}

.topTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 52px;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
}

.monthBox {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 10px;
    bottom: 0;
    display: flex;
    flex-shrink: 0;
    align-items: center;
}

    .monthBox .selectBox {
        background-color: #fff;
    }

    .monthBox span {
        margin-right: 5px;
        font-size: 16px;
    }

.monthBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    margin-left: 5px;
    padding: 0 30px;
    font-size: 14px;
    color: #fff;
    background-color: #00b2ff;
    border: none;
    border-radius: 32px;
}

.testLevelBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 98px;
    border-top: 1px solid #4e4e4e;
}

.testLevelinBox {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 97px;
}

.achievementRateBox {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    height: 30px;
    margin-left: 10px;
    padding: 0 20px 0 5px;
    color: #fff;
    /* background-color: #676c76; */
    border-radius: 68px;
}

.rateTitle {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    height: 38px;
    margin-right: 10px;
    padding: 0 40px 0 15px;
    color: #fff;
    background-color: #1e222a;
    border-radius: 48px;
}

    .rateTitle:before {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 38px;
        font-size: 20px;
        color: #fff;
        content: "\e92c";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.testLevelLeftBox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 97px;
    line-height: 1.5;
    margin-left: auto;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

.testLevelRightBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 97px;
    color: #fff;
}

ul.testLevelBadgeList {
    position: relative;
    display: flex;
}

    ul.testLevelBadgeList li {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 75px;
        height: 97px;
        font-size: 14px;
        font-weight: normal;
        font-family: 'Roboto', sans-serif;
    }

        ul.testLevelBadgeList li span {
            display: flex;
            align-items: center;
            height: 20px;
        }

.badgeLevel {
    position: relative;
    display: flex;
    justify-content: center;
    width: 68px;
    height: 68px;
    padding-top: 54px;
    font-size: 13px;
    box-sizing: border-box;
}

    .badgeLevel:before {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        margin-left: -25px;
        font-size: 28px;
        color: #8d8d8d;
        background-color: #464a50;
        border-radius: 50%;
        content: "";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.level01:before {
    content: "\e928";
}

.level02:before {
    content: "\e92a";
}

.level03:before {
    content: "\e926";
}

.level04:before {
    content: "\e92d";
}

.level05:before {
    content: "\e929";
}

.level06:before {
    content: "\e904";
}

.badgeLevel.on {
    color: #ffcc00;
}

    .badgeLevel.on:before {
        color: #000;
        background-color: #ffcc00;
    }

.testLevelAddedBox {
    position: relative;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    height: 80px;
    margin-right: 10px;
    padding: 6px;
    padding-bottom: 0;
    color: #fff;
    background-color: #676c76;
    border-radius: 20px;
    box-sizing: border-box;
}

.studentNameBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 24px;
    font-size: 14px;
    font-weight: bold;
    color: #76c0ff;
    background-color: #1e222a;
    border-radius: 32px;
}

.currentachievementBox {
    position: relative;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    min-height: 32px;
    margin-top: 5px;
    padding: 5px 15px;
    font-size: 14px;
    box-sizing: border-box;
}

    .currentachievementBox span:last-child {
        margin-left: 5px;
        color: #ffcc00;
    }

.currentachievementInBox {
    display: flex;
    align-items: center;
    height: 20px;
}

/* content */
content {
    display: block;
    padding: 10px;
    box-sizing: border-box;
}

/* 
section {
	display: flex;
	width: 100%;
}
*/
.contentBox {
    display: flex;
    width: 100%;
}

.contentLeftBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(45% - 5px);
    height: 330px;
    padding: 15px;
    background: #fff;
    border: 1px solid #acacac;
    overflow: auto;
}

.contentRightBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(55% - 5px);
    height: 330px;
    margin-left: auto;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #acacac;
    overflow: auto;
}

.contentTableBox {
    position: relative;
    display: block;
    width: 100%;
}

.contentTitle,
.contentTopTitle {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 0 5px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

.classListInBox .contentTitle {
    height: 42px;
}

.contentTable {
    position: relative;
    display: block;
    width: 100%;
    border-top: 2px solid #2d2d2d;
}

.wrongAnswerRateInBox .contentTable {
    border-top: none;
}

.contentTable th {
    height: 36px;
    text-align: center;
    font-size: 14px;
    background-color: #f5f9ff;
    border-bottom: 1px solid #acacac;
}

.contentTable td {
    height: 34px;
    padding: 2px 10px;
    text-align: center;
    font-size: 13px;
    border-bottom: 1px solid #acacac;
}

.wrongAnswerRateInBox .contentTable td:first-child {
    text-align: left;
}

.contentTable tbody > tr:nth-child(even) > td {
    background-color: #f9f9f9;
}

.incompleteStatus,
.completeStatus {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 24px;
    margin: 0 auto;
    font-size: 12px;
    font-weight: bold;
    /* border-radius: 42px; */
    font-family: 'Roboto', sans-serif;
}

.incompleteStatus {
    color: #f16000;
    background-color: #fff;
    border: 1px solid #f16000;
}

.completeStatus {
    color: #00b0f1;
    background-color: #fff;
    border: 1px solid #00b0f1;
}

.viewBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 24px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #252d40;
    border: none;
    border-radius: 42px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
}

.scoreManagePopup .viewBtn {
    display: inline-flex;
}

.taskBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85px;
    height: 28px;
    margin: 0 auto;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #323b49;
    border: none;
    border-radius: 42px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
}

.answerViewBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85px;
    height: 28px;
    margin: 0 auto;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #1e7ac8;
    border: none;
    border-radius: 42px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
}

    .answerViewBtn span {
        flex-shrink: 0;
    }

/* bar chart 수정 */
.hGraph {
    position: relative;
    display: block;
    width: 100%;
}

    .hGraph ul {
        margin: 0;
        padding: 0;
        font-size: 11px;
        font-family: Tahoma, Geneva, sans-serif;
        list-style: none;
    }

    .hGraph li {
        position: relative;
        display: flex;
        align-items: center;
        margin: 0;
        white-space: nowrap;
    }

        .hGraph li:before {
            position: absolute;
            z-index: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: #f0f0f0;
            border: 1px solid #acacac;
            content: "";
        }

    .hGraph .gTerm {
        position: absolute;
        width: 45px;
        top: 0;
        left: -80px;
        line-height: 20px;
        text-align: right;
        font-size: 14px;
        color: #5d5d5d;
        font-weight: bold;
    }

    .hGraph .gBar {
        position: relative;
        display: inline-block;
        height: 22px;
        border: 1px solid #3a92a8;
        background: #57b6cd;
    }

    .hGraph .gBarTotal {
        border: 1px solid #b81e1e;
        background: #e13030;
    }

    .hGraph .gBar span {
        position: absolute;
        min-width: 30px;
        line-height: 22px;
        top: 0;
        right: 0;
        font-size: 11px;
        color: #fff;
        font-weight: bold;
    }

.contentRankingTitle {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 42px;
    margin: 20px 0 10px;
    padding: 0 20px;
    color: #fff;
    background: url(../images/bg/bg_line.png)repeat #252d40;
    border-radius: 42px;
    box-sizing: border-box;
}

.bottomContentBox {
    position: relative;
    display: flex;
    width: 100%;
}

.bottomContentLeftBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(75% - 5px);
    max-height: 1228px;
    padding: 15px;
    background: #fff;
    border: 1px solid #acacac;
    overflow: auto;
}

.bottomContentRightBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(25% - 5px);
    min-height: 300px;
    margin-left: auto;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #acacac;
}

.bottomContentInBox {
    position: relative;
    display: flex;
}

.bottomContentTitle {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    font-size: 16px;
}

.rankingPointBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(50% - 5px);
    min-height: 200px;
    padding: 15px;
    background: #fffff7;
    border: 2px solid #ff6600;
    border-radius: 10px;
}

.rankingAchievementBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 200px;
    padding: 0;
    background: #fff;
    border-top: 2px solid #5d5d5d;
}

.rankingTitle,
.mypageRankingTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 10px;
    background-color: #f5f9ff;
    border-bottom: 1px solid #dedede;
}

.mypageRankingTitle {
    justify-content: center;
}

    .mypageRankingTitle .selectBox {
        margin: 0 2px;
    }

ul.rankingList {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.mypagePointRankingInBox ul.rankingList {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 10px;
}

ul.rankingList li {
    position: relative;
    display: flex;
    margin: 5px;
}

.photoBox,
.rankingImgBox {
    position: relative;
    display: flex;
    width: 100px;
    height: 100px;
    background-color: #f0f0f0;
    border: 5px solid #fff;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.rankingImgBox {
    width: 80px;
    height: 80px;
}

.photoBox img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
}

.infoBox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 10px;
    font-size: 14px;
}

.rankBox,
.gradeBox,
.studentBox,
.pointBox {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 20px;
}

.btnDetailView {
    position: relative;
    display: flex;
    align-items: center;
    width: 24px;
    height: 24px;
    margin-right: 5px;
    padding: 0;
    font-size: 12px;
    color: #fff;
    background-color: #353946;
    border-radius: 32px;
}

    .btnDetailView span {
        display: block;
        text-indent: -9999px;
    }

    .btnDetailView:before {
        position: absolute;
        z-index: 5;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
        font-size: 12px;
        color: #fff;
        content: "\e90f";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

/* bootstrap paging 수정 */
.pageBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
}

/*
.pageBox select {
	margin-left: 10px;
	height: 47px !important;
	border: 1px solid #ddd !important;
}
*/
.pagination {
    display: inline-flex;
    padding-left: 0;
    margin: 30px 0;
    border-radius: 4px;
}

    .pagination > li > a,
    .pagination > li > span {
        text-align: center;
    }

    .pagination a {
        position: relative;
        float: left;
        min-width: 33px;
        height: 32px;
        /* padding: 13px 18px 0 !important; */
        margin-left: -1px;
        line-height: 1.428571429;
        text-decoration: none;
        color: #2d2d2d;
        background-color: #ffffff;
        border: 1px solid #dedede;
        font-family: 'Roboto', sans-serif;
    }

    .pagination li:first-child a {
        margin-left: 0;
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;
    }

    .pagination li:last-child a {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .pagination a:hover,
    .pagination span:hover,
    .pagination a:focus {
        background-color: #eeeeee;
    }

.page-link:hover {
    z-index: 2;
    color: #000;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #252d40;
    border-color: #252d40;
}

/* bootstrap responsive table */
@media only screen and (max-width: 767px) {

    /* Force table to not be like tables anymore */
    #no-more-tables table,
    #no-more-tables thead,
    #no-more-tables tbody,
    #no-more-tables th,
    #no-more-tables td,
    #no-more-tables tr,
    #no-more-tables2 table,
    #no-more-tables2 thead,
    #no-more-tables2 tbody,
    #no-more-tables2 th,
    #no-more-tables2 td,
    #no-more-tables2 tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        #no-more-tables thead tr,
        #no-more-tables2 thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    #no-more-tables tr,
    #no-more-tables2 tr {
        margin-bottom: 10px;
        border: 1px solid #acacac;
    }

        #no-more-tables tr:nth-child(even),
        #no-more-tables2 tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        #no-more-tables tr:first-child,
        #no-more-tables2 tr:first-child {
            border-top: none;
        }

    #no-more-tables td,
    #no-more-tables2 td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #dedede;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: left;
    }

        #no-more-tables td.boardList,
        #no-more-tables td.applyList,
        #no-more-tables td.etcList,
        #no-more-tables2 td.etcList {
            position: relative;
            display: flex;
            align-items: center;
            min-height: 42px;
            /* line-height: 32px; */
            padding-left: 115px;
            text-align: left;
            border: none;
            border-bottom: 1px solid #dedede;
            white-space: normal;
        }

        #no-more-tables td.ellipsis,
        #no-more-tables td.ellipsis,
        #no-more-tables2 td.ellipsis {
            display: block;
            padding-top: 2px;
            /*white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; */
        }

        #no-more-tables td:first-child.boardList,
        #no-more-tables td:first-child.applyList,
        #no-more-tables td:first-child.etcList,
        #no-more-tables2 td:first-child.etcList {
            border-top: 1px solid #dedede;
        }

        #no-more-tables td:before,
        #no-more-tables2 td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 0;
            bottom: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 105px;
            padding-right: 10px;
            white-space: nowrap;
            text-align: center;
            font-weight: bold;
            background-color: #f0f0f0;
            box-sizing: border-box;
        }

        /*
	Label the data
	*/
        #no-more-tables td:before,
        #no-more-tables2 td:before {
            content: attr(data-title);
        }
}

/* ---------------- */
/*    study popup   */
/* ---------------- */

/* online study */
/*
.examPopupBox {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    --display: flex;
    --flex-direction: column;
    background: url("../images/bg/bg_logo.png") repeat center top;
    background-size: 200px;
}
*/
.examPopupBox {
    position: relative;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    width: 100%;
    min-height: 100vh;
    background: url("../images/bg/bg_logo.png") repeat center top;
    background-size: 200px;
}

.examPopupTitle {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    width: 800px;
    height: 55px;
    margin: 20px auto;
    padding: 10px 0 10px 60px;
    font-size: 26px;
    text-align: left;
    font-weight: bold;
    color: #fff;
    /* background: url(../images/bg/bg_line.png)repeat #252d40; */
    background-color: #7fbccc;
    border-radius: 65px;
    box-sizing: border-box;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}

@media screen and (max-width:767px) {
    .examPopupTitle {
        width: calc(100% - 20px);
        height: 42px;
        margin: 10px auto;
        padding: 10px 0 10px 45px;
        font-size: 20px;
    }
}

.examPopupTitle:before {
    position: absolute;
    top: 5px;
    left: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    font-size: 32px;
    color: #7fbccc;
    background-color: #fff;
    border-radius: 50%;
    content: "\e922";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

@media all and (max-width:767px) {
    .examPopupTitle:before {
        width: 32px;
        height: 32px;
        font-size: 24px;
    }
}

.examPopupTitle span {
    font-size: 16px;
    color: #cdf5ff;
    font-weight: normal;
}

.selfTestEndBox .examPopupTitle {
    width: calc(100% - 20px);
}

.examPopupTitleExBox {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 42px;
    font-size: 24px;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}

.examPopupExBox {
    position: relative;
    display: flex;
    align-items: center;
    width: 600px;
    height: 32px;
    margin: 10px auto;
    font-size: 15px;
    color: #fff;
    background-color: #5695af;
}

    .examPopupExBox span {
        padding: 0 20px;
    }

        .examPopupExBox span:first-child {
            position: relative;
            display: flex;
            align-items: center;
            height: 32px;
            font-weight: bold;
            color: #fff;
            background-color: #195168;
        }

.examPopupTitleSmallExBox {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 32px;
    font-size: 16px;
    font-weight: bold;
    color: #1e98ca;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}

.examPopupFailedBox {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 42px;
    font-size: 32px;
    font-weight: bold;
    color: #b64624;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}

.examPopupPassedBox {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 42px;
    font-size: 32px;
    font-weight: bold;
    color: #0e5f81;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}

.examStudyInfoBox {
    position: relative;
    display: block;
    width: 800px;
    min-height: 100px;
    margin: 20px auto 0;
    padding: 0;
    background-color: #f9f9f9;
    border: 1px solid #acacac;
    border-radius: 10px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.examStudyInfoTitle {
    position: relative;
    display: flex;
    flex-grow: 0;
    justify-content: center;
    align-items: center;
    height: 32px;
    font-size: 16px;
    color: #fff;
    background-color: #50bbd1;
    border-bottom: 1px solid #acacac;
    border-radius: 9px 9px 0 0;
}

ul.examStudyInfoList {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 32px;
    padding: 15px;
    box-sizing: border-box;
}

    ul.examStudyInfoList li {
        display: flex;
        width: 50%;
        margin-left: -1px;
        padding: 10px;
        border: 1px solid #acacac;
    }

        ul.examStudyInfoList li span {
            font-size: 18px;
            color: #000;
        }

        ul.examStudyInfoList li strong {
            margin-left: auto;
        }

ul.examStepList {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(25%, auto));
    gap: 50px;
    width: 800px;
    min-height: 100px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #acacac;
    border-radius: 10px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

    ul.examStepList li {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 80px;
        padding: 0 20px;
        box-sizing: border-box;
    }

        ul.examStepList li:before {
            position: absolute;
            z-index: 10;
            top: 50%;
            right: -45px;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 42px;
            color: #c2c2c2;
            content: "\e912";
            font-family: 'icomoon' !important;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            transform: translate(0, -50%);
        }

        ul.examStepList li:last-child:before {
            content: "";
        }

.stepListTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 52px;
    padding: 10px 50px;
    font-size: 28px;
    font-weight: bold;
    color: #4c6ea9;
    background-color: #f2fcff;
    border: 1px solid #acacac;
    border-radius: 72px;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}

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

.stepListEx {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    font-weight: bold;
    color: #000;
}

.stepListMainEx {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 32px;
    padding: 5px 0;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #313977;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}

.stepListBottomEx {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 32px;
    padding: 5px 0;
    text-align: center;
    font-size: 14px;
    color: #5d5d5d;
}

.examPopupBottomBox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 800px;
    min-height: 32px;
    margin: 30px auto;
}

.examPopupTopEx {
    position: relative;
    display: flex;
    align-items: center;
    height: 24px;
    font-size: 16px;
    font-weight: bold;
    color: #308bb0;
}

.examPopupBottomEx {
    position: relative;
    display: flex;
    align-items: center;
    height: 24px;
    font-size: 14px;
    font-weight: bold;
    color: #d1501f;
}

.examPopupBottomBtnBox {
    position: relative;
    display: flex;
    justify-content: center;
    /* flex-grow: 1; */
    width: 100%;
    margin: 30px 0;
}

@media screen and (max-width: 767px) {
    .examPopupBottomBtnBox {
        margin: 15px 0;
    }
}

.examStartBtn,
.exam1stBtn,
.exam2ndBtn,
.exam3rdBtn,
.examCloseBtn,
.errorNoticeBtn {
    position: relative;
    min-width: 140px;
    height: 42px;
    margin: 0 5px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #252d40;
    border: none;
    border-radius: 42px;
    cursor: pointer;
}

.examStartBtn,
.exam1stBtn {
    background-color: #657295;
}

.exam2ndBtn {
    background-color: #8591af;
}

.exam3rdBtn {
    background-color: #9ba6c2;
}

.examCloseBtn {
    background-color: #40434a;
}

.errorNoticeBtn {
    color: #dc4212;
    background-color: #fff;
    border: 1px solid #dc4212;
}

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

    .examStartBtn,
    .exam1stBtn,
    .exam2ndBtn,
    .exam3rdBtn,
    .examCloseBtn,
    .errorNoticeBtn {
        min-width: 120px;
        font-size: 12px;
    }
}

.wordStudyBox {
    position: relative;
    display: flex;
    min-width: 768px;
    height: calc(100vh - 10px);
    /* height: 100vh; */
    padding: 10px;
    box-sizing: border-box;
}

.studyStepTitle {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 38px;
    padding: 5px 0 5px 40px;
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    /* background: url(../images/bg/bg_line.png)repeat #252d40; */
    background-color: #7fbccc;
    border-radius: 65px;
    box-sizing: border-box;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}

    .studyStepTitle:before {
        position: absolute;
        top: 5px;
        left: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 28px;
        height: 28px;
        font-size: 20px;
        color: #7fbccc;
        background-color: #fff;
        border-radius: 50%;
        content: "\e922";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.wordStudyLeftBox {
    position: relative;
    display: flex;
}

.wordStudy1st .wordStudyLeftBox,
.wordStudy2nd .wordStudyLeftBox,
.wordStudy3rd .wordStudyLeftBox {
    flex-grow: 1;
    flex-direction: column;
}

.wordStudyCenterBox {
    position: relative;
    display: flex;
    flex-grow: 1;
    justify-content: center;
}

.wordStudyRightBox {
    position: relative;
    display: flex;
    margin-left: auto;
}

.studyStepBox {
    position: relative;
    display: flex;
    flex-grow: 1;
    align-items: center;
    width: 100%;
    height: 52px;
    border-bottom: 1px solid #acacac;
}

ul.studyStepList {
    position: relative;
    display: flex;
}

    ul.studyStepList li {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 52px;
        margin-left: -1px;
        padding: 0;
        border: 1px solid #dedede;
        border-bottom: 1px solid #acacac;
    }

        ul.studyStepList li:first-child {
            margin-left: 0;
        }

        ul.studyStepList li.on {
            z-index: 20;
            border: 1px solid #acacac;
            border-bottom: 1px solid #fff;
        }

.stepTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 20px;
    font-size: 12px;
    color: #fff;
    background-color: #b7c8d9;
}

ul.studyStepList li.on .stepTitle {
    background-color: #5380ac;
}

.stepExplain {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30px;
    padding: 0 20px;
    font-size: 18px;
    font-weight: bold;
    color: #acacac;
    background-color: #f9f9f9;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}

ul.studyStepList li.on .stepExplain {
    color: #2672bc;
    background-color: #fff;
}

.studyStepContentBox {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
    padding: 10px;
    background-color: #fff;
    border: 1px solid #acacac;
    border-top: none;
    box-sizing: border-box;
}

.howtoStudyBox {
    position: relative;
    display: block;
    min-height: 50px;
    border: 3px solid #4d5053;
    border-top: none;
    border-radius: 5px 5px 20px 20px;
    box-shadow: 0px 15px 15px -15px rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
}

.howtoStudyTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    padding-left: 5px;
    font-size: 15px;
    color: #fff;
    background-color: #4d5053;
    border-radius: 2px 2px 0 0;
    box-sizing: border-box;
}

.howtoStepBox {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    height: 24px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: bold;
    color: #1b70c2;
    background-color: #fff;
    border-radius: 32px;
}

ul.howatoStepList {
    position: relative;
    display: block;
    padding: 5px;
    background-color: #fff;
    border-radius: 0 0 20px 20px;
    box-sizing: border-box;
}

    ul.howatoStepList li {
        position: relative;
        display: flex;
        align-items: center;
        padding: 3px 10px;
        box-sizing: border-box;
    }

/*
ul.howatoStepList li:before {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 5px;
    font-size: 18px;
    color: #000;
    transform: translate(0, -50%);
    content: "·";
}
*/

.studyOnContentBox {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    min-height: 100px;
    padding: 10px;
    background-color: #f4fcff;
    border: 1px solid #dedede;
    border-radius: 10px;
    box-sizing: border-box;
}

.studyOnContentInBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 348px);
}

.onStudyingBox {
    position: relative;
    display: block;
    padding: 10px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #5d5d5d;
    box-sizing: border-box;
}

.onStudyingWordBox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 10px;
    box-sizing: border-box;
}

.onVocabularyBox {
    position: relative;
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: 42px;
    font-weight: bold;
    color: #2f6da1;
    font-family: 'roboto', sans-serif;
}

@media screen and (max-width: 767px) {
    .onVocabularyBox {
        font-size: 32px;
    }
}

.wordStudy2nd .onVocabularyBox,
.wordStudy3rd .onVocabularyBox {
    margin-top: 0;
    font-size: 28px;
}

ul.onVocabulalryList {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
}

    ul.onVocabulalryList li {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        margin: 5px 0;
        font-size: 24px;
        font-weight: bold;
        color: #2f6da1;
    }

@media screen and (max-width: 767px) {
    ul.onVocabulalryList li {
        font-size: 18px;
    }
}

.onVocabularyExBox {
    position: relative;
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #e15500;
}

.onVocabularySubBox {
    position: relative;
    display: block;
    margin-top: 5px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #3a9a27;
}

.onVacabularySampleBox {
    position: relative;
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #3a9a27;
}

.englishSentenceBox {
    position: relative;
    display: block;
    line-height: 1.5;
    margin: 10px 20px;
    text-align: left;
    font-size: 3rem;
    font-weight: bold;
    color: #000;
    font-family: 'roboto', sans-serif;
}

.onStudyingInputBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 42px;
}

.onStudyingInputInBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    padding-right: 10px;
    background-color: #f9f9f9;
    border: 1px solid #acacac;
    border-radius: 42px 0 0 42px;
    box-sizing: border-box;
}

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

        .onStudyingInputInBox .W300P {
            width: 100% !important;
        }
}

@media screen and (max-width: 420px) {
    .onStudyingInputInBox {
        min-width: 200px;
        padding: 0 20px;
        border-radius: 42px;
    }

        .onStudyingInputInBox .W300P {
            width: 100% !important;
        }

    .searchBtnMobileBox.on {
        top: 50px;
        left: -260px;
    }

    .logoBox {
        width: 100px;
        /*
        transform: translate(-50%, -50%);
		*/
    }

    a.logoLink img {
        max-width: 90px;
        max-height: 32px;
    }

    .searchBtnMobileBox .searchMobileBtn {
        top: 0;
        transform: translate(0, 0);
    }

    .topInfoBox {
        width: 125px;
        margin-left: 20px;
    }
}

.onStudyingInputInBox span {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    height: 42px;
    margin-right: 5px;
    padding: 0 20px;
    color: #fff;
    background-color: #7fbccc;
    border-right: 1px solid #acacac;
    border-radius: 32px 0 0 32px;
}

@media screen and (max-width: 767px) {
    .onStudyingInputInBox span {
        display: none;
    }
}

.selfTestInputBtnBox {
    position: relative;
    display: flex;
}

@media screen and (max-width: 420px) {
    .selfTestInputBtnBox {
        justify-content: center;
        margin-top: 10px;
    }
}

.wordInputBtn {
    position: relative;
    display: flex;
    height: 42px;
    margin-left: -1px;
    padding: 0 30px;
    color: #fff;
    background-color: #314052;
    border: none;
    border-radius: 0 32px 32px 0;
}

@media screen and (max-width: 420px) {
    .wordInputBtn {
        justify-content: center;
        border-radius: 32px;
    }
}

.voicePlaybackBtn,
.selfTestStopBtn {
    position: relative;
    display: flex;
    height: 42px;
    padding: 0 20px;
    color: #fff;
    background-color: #7f5999;
    border: none;
}

.selfTestStopBtn {
    background-color: #c23423;
}

.onStudyingBottomList {
    position: relative;
    display: block;
    margin-top: -10px;
    padding: 20px 10px 10px;
    background-color: #21272b;
    border: 1px solid #dedede;
    border-radius: 0 0 5px 5px;
}

    .onStudyingBottomList li {
        position: relative;
        display: flex;
        align-items: center;
        padding: 3px 10px 3px 15px;
        font-size: 14px;
        color: #acacac;
        box-sizing: border-box;
    }

        .onStudyingBottomList li:before {
            position: absolute;
            z-index: 10;
            top: 50%;
            left: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 25px;
            font-size: 18px;
            color: #acacac;
            transform: translate(0, -50%);
            content: "·";
        }

.wordStudyTestBox {
    position: relative;
    padding: 10px;
    background-color: #394146;
    box-sizing: border-box;
}

.wordStudyRightInBox {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 10px 5px;
    box-sizing: border-box;
    overflow-y: auto;
}

.wordListTitle {
    position: sticky;
    z-index: 20;
    top: 5px;
    display: block;
    margin: 5px;
    padding: 10px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    color: #000;
    background-color: #fff;
    border-radius: 5px;
    font-family: 'roboto', sans-serif;
}

ul.wordRightList {
    position: relative;
    display: block;
    padding: 0 5px 5px;
    box-sizing: border-box;
}

    ul.wordRightList li {
        margin: 0;
        padding: 2px 0;
    }

.wordListBtn {
    position: relative;
    display: block;
    width: 100%;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #e1e1e1;
    background-color: #4ca0f2;
    border: none;
    border-radius: 32px;
}

    .wordListBtn.on {
        color: #e1e1e1;
        background-color: #787d89;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2) inset;
    }

        .wordListBtn.on:before {
            position: absolute;
            z-index: 10;
            top: 15px;
            left: 15px;
            width: 4px;
            height: 4px;
            text-align: center;
            background-color: #e1e1e1;
            border-radius: 50%;
            content: "";
        }

.onStudyingWordTopBox {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    min-height: 32px;
    margin: 0 0 10px;
    padding: 0 15px;
}

.onStudyingWordLeftBox {
    display: flex;
    flex-direction: column;
}

    .onStudyingWordLeftBox span {
        position: relative;
        margin: 2px 0;
        font-size: 16px;
        font-weight: bold;
        color: #2d2d2d;
    }

.onStudyingTestNumBox {
    position: relative;
    display: flex;
    align-items: baseline;
    padding: 5px 30px;
    font-size: 16px;
    color: #d32828;
    background-color: #fff;
    border: 3px solid #d32828;
    border-radius: 52px;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}

.selectedBox {
    position: relative;
    display: block;
    z-index: 10;
}

ul.answerList {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 10px 0;
}

.selfTestBox ul.answerList {
    width: 100%;
}

ul.answerList li {
    position: relative;
    margin: 5px;
    text-align: left;
    font-size: 14px;
}

    ul.answerList li .numberInBox {
        display: flex;
        align-items: center;
        padding: 0;
        font-size: 14px;
    }

.selfTestBox ul.answerList .numberInBox {
    font-size: 16px;
}

ul.answerList li .numberInBox label span {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 29px;
    height: 33px;
}

.numberInBox span:nth-child(1) {
    display: inline-block;
    min-width: 42px;
}

.numberInBox span:nth-child(2) {
    display: inline-block;
    line-height: 1.3;
}

.numberInBox span:nth-child(3) {
    display: inline-block;
    min-width: 100px;
}

.answerExBox {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    padding: 3px 15px;
    font-size: 1.5rem;
    color: #fff;
    background-color: #252d40;
    border-radius: 32px;
}

ul.answerList.checks input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

    ul.answerList.checks input[type="checkbox"] + label {
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
        width: 32px;
        height: 30px;
        margin: 0 5px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #252d40;
        cursor: pointer;
        font-family: 'Roboto', 'noto', sans-serif;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

        ul.answerList.checks input[type="checkbox"] + label:before {
            content: '';
            position: absolute;
            z-index: -1;
            left: 0;
            top: 0;
            width: 30px;
            height: 30px;
            text-align: center;
            background: #fff;
            border: 1px solid #acacac;
            border-radius: 5px;
            box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), inset 0px -15px 10px -12px rgb(0 0 0 / 5%);
        }

    ul.answerList.checks input[type="checkbox"]:checked + label {
        color: #fff;
    }

        ul.answerList.checks input[type="checkbox"]:checked + label:before {
            background: #252d40;
            border-color: #252d40;
            content: "";
        }

ul.answerList.checks input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

    ul.answerList.checks input[type="radio"] + label {
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
        width: 32px;
        height: 32px;
        margin: 0 5px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #252d40;
        cursor: pointer;
        font-family: 'Roboto', 'noto', sans-serif;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

        ul.answerList.checks input[type="radio"] + label:before {
            content: '';
            position: absolute;
            z-index: -1;
            left: -1px;
            top: 0;
            width: 32px;
            height: 32px;
            text-align: center;
            /* background: #fafafa; */
            border: 1px solid #acacac;
            border-radius: 100%;
            box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
        }

        ul.answerList.checks input[type="radio"] + label:active:before,
        ul.answerList.checks input[type="radio"]:checked + label:active:before {
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
        }

    ul.answerList.checks input[type="radio"]:checked + label {
        color: #fff;
    }

        ul.answerList.checks input[type="radio"]:checked + label:before {
            background: #2c85dc;
            border-color: #2c85dc;
            content: "";
        }

        ul.answerList.checks input[type="radio"]:checked + label:after {
            content: '';
            position: absolute;
            top: 5px;
            left: 4px;
            width: 14px;
            height: 14px;
            background: transparent;
            border-radius: 100%;
            box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3);
            display: none;
        }

.correctPopupLayer,
.wrongPopupLayer {
    position: absolute;
    z-index: 20;
    top: 50%;
    left: 50%;
    display: block;
    width: 400px;
    min-height: 150px;
    padding: 0;
    background-color: #fff;
    border: 3px solid #258ca7;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}

.correctPopupTitle,
.wrongPopupTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #5d5d5d;
    background-color: #f9f9f9;
    border-bottom: 1px solid #258ca7;
    border-radius: 9px 9px 0 0;
}

.correctPopupEx,
.wrongPopupEx {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    font-size: 14px;
}

.correctPopupBottomBox,
.wrongPopupBottomBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(100% - 40px);
    min-height: 42px;
    line-height: 1.5;
    margin: 0 auto 20px;
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 10px;
    box-sizing: border-box;
}

.bottomWordBox {
    position: relative;
    display: block;
    text-align: left;
    font-size: 22px;
    font-weight: bold;
    color: #2f6da1;
    font-family: 'roboto', sans-serif;
}

ul.wrongBottomTypingList {
    position: relative;
    display: block;
    padding: 0 30px;
    box-sizing: border-box;
}

    ul.wrongBottomTypingList li {
        margin: 3px 0;
    }

        ul.wrongBottomTypingList li strong {
            margin-right: 10px;
        }

        ul.wrongBottomTypingList li input {
            width: calc(100% - 60px);
        }

.popupCloseBtn {
    position: relative;
    min-width: 100px;
    height: 32px;
    margin: 0 5px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #252d40;
    border: none;
    border-radius: 42px;
    cursor: pointer;
}

.examWrongNumBox {
    position: relative;
    display: flex;
    height: 32px;
    justify-content: flex-end;
    align-items: flex-end;
    width: 800px;
    margin: 0 auto 10px;
}

.examWrongListBox {
    position: relative;
    display: flex;
    width: 800px;
    /* height: calc(50% - 150px); */
    margin: 0 auto;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #acacac;
    border-radius: 10px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.examWrongListInBox {
    position: relative;
    display: block;
    height: calc(50vh - 140px);
    box-sizing: border-box;
}

.examWrongListTable {
    position: relative;
    display: block;
    background-color: #fff;
    border-top: 1px solid #acacac;
    border-left: 1px solid #acacac;
    box-sizing: border-box;
}

    .examWrongListTable table {
        table-layout: fixed;
    }

    .examWrongListTable th {
        padding: 5px;
        text-align: center;
        background-color: #f9f9f9;
        border-right: 1px solid #acacac;
        border-bottom: 1px solid #acacac;
    }

    .examWrongListTable td {
        padding: 5px;
        border-right: 1px solid #acacac;
        border-bottom: 1px solid #acacac;
    }


/* vocabulary typing */
.vocabularyPopupBox {
    position: relative;
    z-index: 10;
    display: block;
    min-width: 768px;
    height: calc(100vh - 10px);
    padding: 0;
    background-color: #3d8de0;
    box-sizing: border-box;
}

.succeeded,
.failed {
    position: relative;
    width: 100%;
    height: 100vh;
    background: url("../images/bg/bg_rainbow.png") no-repeat center top;
    background-size: cover;
}

.failed {
    background: url("../images/bg/bg_raindrop.png") no-repeat center top;
}

    .succeeded:before,
    .failed:before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0.6);
        content: "";
    }

.vocabularyPopupTopBox {
    position: relative;
    display: flex;
    width: 100%;
    height: 62px;
    background-color: #3b4149;
}

    .vocabularyPopupTopBox:before {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        width: 150px;
        height: 62px;
        background: url("../images/bg/bg_logo.png") no-repeat right center;
        background-size: cover;
        content: "";
    }

ul.centerList {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 62px;
    margin: 0 auto;
}

    ul.centerList li {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 26px;
        font-size: 14px;
        color: #fff;
    }

.vocabularyInputBox2 {
    position: fixed;
    z-index: 20;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 90px;
    background-color: #fff;
    border-top: 1px solid #acacac;
}

.umbrellaBox {
    position: absolute;
    z-index: 35;
    left: 50%;
    bottom: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    font-size: 84px;
    color: #000;
    background-color: yellow;
    border-radius: 50%;
    -webkit-box-shadow: #888 0px 0px 10px;
    -moz-box-shadow: #888 0px 0px 10px;
    box-shadow: #888 0px 0px 10px;
    transform: translate(-50%, 0);
}

.vocabularyBtBox2 {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    height: 42px;
    padding: 0 10px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #acacac;
    box-sizing: border-box;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}

    .vocabularyBtBox2 .wordStudyLeftBox strong {
        display: flex;
        align-items: center;
        height: 42px;
    }

    .vocabularyBtBox2 .wordStudyRightBox {
        align-items: center;
    }

.vocabularyBtLeft,
.vocabularyBtLeft2 {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    margin: 0 10px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

.vocabularyBtLeft2 {
    color: #963a0f;
}

.vocabularyNumBox,
.vocabularyNumBox2 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 32px;
    height: 28px;
    margin: 0 5px;
    color: #155584;
    background-color: #dcfaff;
    border: 2px solid #3586c2;
    border-radius: 5px;
}

.vocabularyNumBox2 {
    color: #5a2b15;
    background-color: #ffeacc;
    border: 2px solid #9c461e;
}

.vocabularyBtRight {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    height: 42px;
    padding: 0 10px;
}

.vocabularyGameStopGuideBox {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    height: 32px;
    margin-right: -10px;
    padding: 0 10px 0 4px;
    color: #fff;
    background-color: #785c88;
    border-radius: 32px 0 0 32px;
}

    .vocabularyGameStopGuideBox strong {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
        background-color: #fff;
        border-radius: 32px;
    }

.gameStopBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    margin-left: 10px;
    padding: 0 20px;
    background-color: #59156e;
    border-radius: 32px;
}

.vocabularyBtBox22 {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    padding: 0 10px;
    box-sizing: border-box;
}

.btnStart {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 38px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: bold;
    color: #2b3887;
    background-color: #fff;
    border: 2px solid #2b3887;
    border-radius: 32px;
    cursor: pointer;
}

    .btnStart:hover {
        color: #fff;
        background-color: #2b3887;
    }

.btnClose {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 38px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: bold;
    color: #de521b;
    background-color: #fff;
    border: 2px solid #de521b;
    border-radius: 32px;
    cursor: pointer;
}

    .btnClose:hover {
        color: #fff;
        background-color: #de521b;
    }

    .btnStart span,
    .btnClose span {
        padding-left: 5px;
    }

.speedCheckBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 36px;
    margin-left: 10px;
    padding: 0 20px;
    color: #fff;
    background-color: #36859a;
    border-radius: 32px;
}

.vocabularyBtBox22 .textInput {
    height: 38px;
    border: 5px solid #1f81bd;
    border-radius: 0;
    box-sizing: border-box;
}

    .vocabularyBtBox22 .textInput::placeholder {
        display: flex;
        justify-content: center;
        font-size: 20px;
        font-family: 'Noto Sans KR', 'Roboto', sans-serif;
    }

.failNumBox2 {
    position: relative;
    display: flex;
    align-items: baseline;
    margin-right: -10px;
    padding: 5px 10px 5px 20px;
    font-size: 14px;
    color: #fff;
    background-color: #e06827;
    border-radius: 32px 0 0 32px;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
    box-sizing: border-box;
}

.vocabularyContent2 {
    position: relative;
    display: block;
    width: 100%;
    height: calc(100vh - 152px);
}

.typingVoca01_new {
    position: absolute;
    z-index: 40;
    top: 0;
    left: 50%;
    max-width: 200px;
    min-height: 24px;
    margin-left: -49%;
    padding: 7px 15px;
    text-align: center;
    color: #fff;
    background-color: rgba(64, 78, 92, .8);
    border-radius: 5px;
}

.typingVoca02_new {
    position: absolute;
    z-index: 40;
    top: 0;
    left: 50%;
    max-width: 200px;
    min-height: 24px;
    margin-left: -29%;
    padding: 7px 15px;
    text-align: center;
    color: #fff;
    background-color: rgba(64, 78, 92, .8);
    border-radius: 5px;
}

.typingVoca03_new {
    position: absolute;
    z-index: 40;
    top: 0;
    left: 50%;
    max-width: 200px;
    min-height: 24px;
    margin-left: -9%;
    padding: 7px 15px;
    text-align: center;
    color: #fff;
    background-color: rgba(64, 78, 92, .8);
    border-radius: 5px;
}

.typingVoca04_new {
    position: absolute;
    z-index: 40;
    top: 0;
    left: 50%;
    max-width: 200px;
    min-height: 24px;
    margin-left: 11%;
    padding: 7px 15px;
    text-align: center;
    color: #fff;
    background-color: rgba(64, 78, 92, .8);
    border-radius: 5px;
}

.typingVoca05_new {
    position: absolute;
    z-index: 40;
    top: 0;
    left: 50%;
    max-width: 200px;
    min-height: 24px;
    margin-left: 31%;
    padding: 7px 15px;
    text-align: center;
    color: #fff;
    background-color: rgba(64, 78, 92, .8);
    border-radius: 5px;
    white-space: normal;
}

.typingVocaOutbreak {
    position: absolute;
    z-index: 60;
    top: 150px;
    left: 22px;
    width: 300px;
    min-height: 48px;
    line-height: 1.5;
    padding: 7px 15px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    background-color: rgba(64, 78, 92, .8);
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    white-space: normal;
    -webkit-animation-name: outbreak;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: outbreak;
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    animation-name: outbreak;
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes outbreak {
    0% {
        background-color: red;
    }

    25% {
        background-color: yellow;
    }

    50% {
        background-color: blue;
    }

    100% {
        background-color: green;
    }
}

@-moz-keyframes outbreak {
    0% {
        background-color: red;
    }

    25% {
        background-color: yellow;
    }

    50% {
        background-color: blue;
    }

    100% {
        background-color: green;
    }
}

@keyframes outbreak {
    0% {
        background-color: red;
    }

    25% {
        background-color: yellow;
    }

    50% {
        background-color: blue;
    }

    100% {
        background-color: green;
    }
}

.beforeEx {
    position: absolute;
    z-index: 20;
    top: 50%;
    right: 10%;
    bottom: auto;
    left: 10%;
    line-height: 1.5;
    margin-top: -15%;
    padding: 20px;
    text-align: center;
    font-size: 24px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border: 3px solid #9d9d9d;
    border-radius: 10px;
    text-shadow: #000 1px 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    /* opacity: 0.8; */
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
    box-sizing: border-box;
}

    .beforeEx .Dyellow,
    .beforeEx strong {
        color: #ffec00 !important;
    }

    .beforeEx .green {
        color: #26ff4f !important;
    }

.failedResult {
    position: absolute;
    z-index: 20;
    top: 50%;
    right: 10%;
    bottom: auto;
    left: 10%;
    line-height: 1.5;
    margin-top: -5%;
    padding: 20px;
    text-align: center;
    font-size: 48px;
    color: #ff3d1e;
    text-shadow: #000 1px 1px 1px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    border: 3px solid #9d9d9d;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}

.successResult {
    position: absolute;
    z-index: 20;
    top: 50%;
    right: 10%;
    bottom: auto;
    left: 10%;
    line-height: 1.5;
    margin-top: -5%;
    padding: 20px;
    text-align: center;
    font-size: 48px;
    color: #6bccff;
    text-shadow: #000 1px 1px 1px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    border: 3px solid #9d9d9d;
    border-radius: 10px;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}

.btnVocaCheck2 {
    position: relative;
    width: 80px;
    height: 31px;
    background: url(../images/btn/btn_check.png) no-repeat center center;
    cursor: pointer;
}

    .btnVocaCheck2 span {
        visibility: hidden;
    }

.rainBox {
    position: absolute;
    z-index: 40;
    display: block;
    bottom: -20px;
    left: 50%;
    margin: -16px;
    font-size: 32px;
    -webkit-animation-name: rain;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: rain;
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    animation-name: rain;
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes rain {
    0% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }

    25% {
        color: grey;
        text-shadow: #000 1px 1px 2px
    }

    50% {
        color: red;
        text-shadow: #000 1px 1px 2px
    }

    100% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }
}

@-moz-keyframes rain {
    0% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }

    25% {
        color: grey;
        text-shadow: #000 1px 1px 2px
    }

    50% {
        color: red;
        text-shadow: #000 1px 1px 2px
    }

    100% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }
}

@keyframes rain {
    0% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }

    25% {
        color: grey;
        text-shadow: #000 1px 1px 2px
    }

    50% {
        color: red;
        text-shadow: #000 1px 1px 2px
    }

    100% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }
}

.waterBox {
    position: absolute;
    z-index: 40;
    display: block;
    bottom: -35px;
    left: 50%;
    margin-left: -36px;
    font-size: 24px;
    -webkit-animation-name: water;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: water;
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    animation-name: water;
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes water {
    0% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }

    25% {
        color: grey;
        text-shadow: #000 1px 1px 2px
    }

    50% {
        color: red;
        text-shadow: #000 1px 1px 2px
    }

    100% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }
}

@-moz-keyframes water {
    0% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }

    25% {
        color: grey;
        text-shadow: #000 1px 1px 2px
    }

    50% {
        color: red;
        text-shadow: #000 1px 1px 2px
    }

    100% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }
}

@keyframes water {
    0% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }

    25% {
        color: grey;
        text-shadow: #000 1px 1px 2px
    }

    50% {
        color: red;
        text-shadow: #000 1px 1px 2px
    }

    100% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }
}

.rainBigBox {
    position: absolute;
    z-index: 50;
    display: block;
    bottom: -150px;
    left: 50%;
    margin-left: -80px;
    font-size: 120px;
    -webkit-animation-name: rain;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: rain;
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    animation-name: rain;
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.rainBigBoxText {
    position: absolute;
    z-index: 50;
    display: block;
    bottom: -135px;
    left: 50%;
    margin-left: -85px;
    font-size: 16px;
    -webkit-animation-name: rainText;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: rainText;
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    animation-name: rainText;
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes rainText {
    0% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }

    25% {
        color: grey;
        text-shadow: #000 1px 1px 2px
    }

    50% {
        color: red;
        text-shadow: #000 1px 1px 2px
    }

    100% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }
}

@-moz-keyframes rainText {
    0% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }

    25% {
        color: grey;
        text-shadow: #000 1px 1px 2px
    }

    50% {
        color: red;
        text-shadow: #000 1px 1px 2px
    }

    100% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }
}

@keyframes rainText {
    0% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }

    25% {
        color: grey;
        text-shadow: #000 1px 1px 2px
    }

    50% {
        color: red;
        text-shadow: #000 1px 1px 2px
    }

    100% {
        color: white;
        text-shadow: #000 1px 1px 2px
    }
}

.leftTopText {
    position: absolute;
    z-index: 50;
    display: block;
    top: -40px;
    left: 0px;
    width: 25px;
    line-height: 1.2;
    padding: 10px 5px;
    font-size: 14px;
    word-wrap: break-word;
    text-align: center;
    background-color: #344252;
    transform: rotate(45deg);
    border-radius: 15px 0 0 15px;
}

.rightTopText {
    position: absolute;
    z-index: 50;
    display: block;
    top: -40px;
    right: 0px;
    width: 25px;
    line-height: 1.2;
    padding: 10px 5px;
    font-size: 14px;
    word-wrap: break-word;
    text-align: center;
    background-color: #344252;
    transform: rotate(-45deg);
    border-radius: 0 15px 15px 0;
}

/* E-Voca Self Test */
.selfTestGuideBox {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: calc(100% - 20px);
    min-height: 100px;
    margin: 10px auto 0;
    padding: 0;
    background-color: #f9f9f9;
    border: 1px solid #acacac;
    border-radius: 10px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

@media screen and (min-width: 768px) {
    .selfTestGuideBox {
        width: 800px;
        margin: 20px auto 0;
    }
}

.selfTestGuideTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    padding-left: 32px;
    font-size: 15px;
    font-weight: bold;
    color: #2d2d2d;
    background-color: #f3fcff;
    border-bottom: 1px solid #acacac;
    border-radius: 10px 10px 0 0;
    box-sizing: border-box;
}

    .selfTestGuideTitle:before {
        position: absolute;
        z-index: 5;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 34px;
        font-size: 16px;
        color: #2d2d2d;
        content: "\e92e";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

ol.selfTestGuideList {
    position: relative;
    display: block;
    padding: 10px;
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
}

    ol.selfTestGuideList li {
        position: relative;
        display: block;
        /* flex-wrap: wrap;
    align-items: center; */
        line-height: 1.5;
        padding: 5px;
        font-size: 15px;
        color: #2d2d2d;
        box-sizing: border-box;
    }

.selfTestResultListTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% - 20px);
    height: 42px;
    margin: 20px 10px 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #2d2d2d;
    background-color: #fff;
    border: 1px solid #acacac;
    border-radius: 65px;
    box-sizing: border-box;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}

    .selfTestResultListTitle span {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 42px;
        padding-left: 36px;
        font-size: 16px;
        font-weight: bold;
        color: #549caf;
    }

        .selfTestResultListTitle span:before {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 42px;
            height: 42px;
            font-size: 16px;
            color: #549caf;
            border-radius: 50%;
            content: "\e903";
            font-family: 'icomoon' !important;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
        }

.selfTestGuideBottomBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% - 20px);
    margin: -10px auto 10px;
    padding: 20px 10px 10px;
    color: #fff;
    background-color: #515a5e;
    border: 1px solid #acacac;
    border-radius: 0 0 5px 5px;
}

@media screen and (min-width: 768px) {
    .selfTestGuideBottomBox {
        width: 800px;
    }
}

.selfTestGuideBottomBox .selectBox .select {
    background-color: #fff;
}

.selfTestGuideBottomBox .selectBox .icoArrow {
    z-index: 3;
}

.selfTestTopBox,
.selfTestMiddleBox {
    position: relative;
    display: flex;
    width: 800px;
    margin: 20px auto 0;
}

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

    .selfTestTopBox,
    .selfTestMiddleBox {
        width: calc(100% - 20px);
        margin: 10px auto 0;
    }

        .selfTestTopBox .FS24 {
            font-size: 20px !important;
        }
}

.selfTestInputTopBox {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 42px;
    padding: 0 0 10px 32px;
    font-size: 16px;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
    box-sizing: border-box;
}

    .selfTestInputTopBox:before {
        position: absolute;
        z-index: 5;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 45px;
        font-size: 16px;
        color: #5d5d5d;
        content: "\e92e";
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

.selfTestInputBottomBox {
    display: flex;
    justify-content: center;
}

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

.selfTestMiddleBox .onStudyingInputBox {
    flex-direction: column;
}

.selfTestResultTopBox {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    width: 800px;
    height: 42px;
    margin: 20px auto;
    font-size: 24px;
    font-weight: bold;
    color: #000;
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}

@media screen and (max-width: 767px) {
    .selfTestResultTopBox {
        width: 100%;
        height: 32px;
        margin: 5px auto;
        font-size: 20px;
    }
}

@media screen and (max-width: 420px) {
    .selfTestResultTopBox {
        font-size: 16px;
    }

        .selfTestResultTopBox .FS32 {
            font-size: 24px !important;
        }
}

.selfTestResultFailedBox {
    color: #c23423;
}

.selfTestResultPassedBox {
    color: #2f6da1;
}

.selfTestBoardBox {
    position: relative;
    width: calc(100% - 20px);
    min-height: 200px;
    margin: 0 auto;
    border-top: 2px solid #5d5d5d;
}

.selfTestContentBox {
    position: relative;
    width: 100%;
    height: calc(100vh - 270px);
}

@media screen and (max-width: 767px) {
    .selfTestContentBox {
        height: auto;
    }
}

.selfTestListTable {
    position: relative;
    display: block;
    width: 100%;
    background-color: #fff;
    border-left: 1px solid #dedede;
}

    .selfTestListTable table {
        table-layout: fixed;
    }

    .selfTestListTable thead {
        position: sticky;
        z-index: 5;
        top: 0;
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
    }

    .selfTestListTable th {
        height: 42px;
        padding: 5px 0;
        text-align: center;
        background-color: #f5f9ff;
        border-top: 2px solid #5d5d5d;
        border-right: 1px solid #dedede;
        border-bottom: 1px solid #dedede;
        box-sizing: border-box;
    }

    .selfTestListTable th {
        border-top: none;
    }

    .selfTestListTable td {
        text-align: center;
        height: 32px;
        padding: 2px 10px;
        border-right: 1px solid #dedede;
        border-bottom: 1px solid #dedede;
    }

    .selfTestListTable tr:first-child td {
        border-top: 1px solid #dedede;
    }

    .selfTestListTable table > tbody > tr:nth-child(even) > td {
        background-color: #f9f9f9;
    }

    .selfTestListTable tbody > tr:hover > td {
        background-color: #f0f0f0;
    }

    .selfTestListTable td.ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
    }

/* 240319 추가 */
.testGuide .subContentBox {
    flex-direction: column;
}

.testGuideContentBox {
    position: relative;
    display: block;
    width: 100%;
    min-height: 10px;
    padding: 0 10px;
    /* border: 1px solid #dedede; */
    box-sizing: border-box;
}

.testApplyBtnBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 20px;
}

.testApplyBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    padding: 0 30px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #3c93ef;
    border: none;
    border-radius: 42px;
    -webkit-animation: linear 1.5s infinite 0s applyBtn;
    -moz-animation: linear 1.5s infinite 0s applyBtn;
    animation: linear 1.5s infinite 0s applyBtn;
}

@-webkit-keyframes applyBtn {
    0% {
        background-color: #3c93ef;
    }

    80% {
        background-color: #3c93ef;
    }

    100% {
        background-color: transparent;
    }
}

@-moz-keyframes applyBtn {
    0% {
        background-color: #3c93ef;
    }

    80% {
        background-color: #3c93ef;
    }

    100% {
        background-color: transparent;
    }
}

@-o-keyframes applyBtn {
    0% {
        background-color: #3c93ef;
    }

    80% {
        background-color: #3c93ef;
    }

    100% {
        background-color: transparent;
    }
}

@keyframes applyBtn {
    0% {
        background-color: #3c93ef;
    }

    80% {
        background-color: #3c93ef;
    }

    100% {
        background-color: transparent;
    }
}



.testApplyBtnBox .testApplyExBox {
    margin-left: 10px;
    line-height: 1.3;
    font-size: 14px;
    font-weight: bold;
    color: #2892bd;
}


/* word print */
@media print {
    .wordListTopBox {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 688px;
        height: 42px;
        margin: 0 auto 10px;
        font-size: 14px;
        font-weight: bold;
        color: #000;
        background-color: #f3f9ff;
        border: 2px solid #2d79c7;
        border-radius: 42px;
    }

    .wordListBtnBox {
        display: none;
    }

    .FSBK216B {
        line-height: 24px;
        font-size: 12px;
        color: #2d2d2d;
        font-weight: bold;
    }

    .FSBK214 {
        line-height: 30px !important;
        padding-top: 10px;
        font-size: 12px;
    }

    .btnBlueS {
        position: relative;
        padding: 1px 10px 2px;
        font-size: 12px;
        color: #fff !important;
        background-color: #2b3887 !important;
        border: 1px solid #151f5c !important;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        behavior: url(../pie/PIE.htc);
        cursor: pointer;
    }

    .printBox2 {
        max-width: 100%;
        min-height: 10px;
        margin: 0;
    }

        .printBox2 table {
            position: relative;
            table-layout: fixed;
            border-collapse: collapse;
            min-height: 10px;
            top: 0;
            bottom: 0;
            /* border-top:1px solid #acacac; 
        border-right:1px solid #acacac; */
        }

        .printBox2 td {
            line-height: 18px;
            padding: 0px 10px;
            font-size: 12px;
            text-align: left;
            /* border-left:1px solid #acacac; 
        border-bottom:1px solid #acacac; */
            border: 1px solid #acacac;
            word-break: break-word;
        }

            .printBox2 td:nth-child(2n-1) {
                background-color: #f9f9f9;
            }

                .printBox2 td:nth-child(2n-1) a {
                    color: #208cdb;
                    font-weight: bold;
                }
}

/*
.boardlisttable15 {
    clear:both; 
    border-collapse:collapse; 
    max-width:100%; 
    margin:0px auto; 
    background:#dfdfdf; 
    border-top:0px solid #555555; 
    border-right:0px solid #555555; 
    border-bottom:0px solid #555555; 
    border-left:0px solid #555555;
}
.boardlisttable15 caption { 
    height:32px; 
    line-height:32px; 
    text-align:center;  
    font-size:14px; 
    font-weight:bold; 
    background:#f9f9f9; 
    border-bottom:1px solid #acacac; 
} 
.boardlisttable15 th {
    height:32px; 
    font-weight:bold; 
    white-space: nowrap; 
    text-align:center; 
    padding:0 5px;
    font-size: 12px;
    background:#fcfcfc;  
    border-top:0px solid #acacac; 
    border-right: 0px solid #acacac; 
    border-bottom:1px solid #acacac; 
    border-left:1px solid #acacac; 
}
.boardlisttable15 th:first-child { 
    border-left:none; 
}
.boardlisttable15 td {
    height:24px; 
    margin:0; 
    padding:0 5px;
    white-space:normal; 
    text-align:center; 
    background:#FFF; 
    border-top:0px solid #acacac; 
    border-right: 0px solid #acacac; 
    border-bottom:1px solid #acacac; 
    border-left:1px solid #acacac; 
}
.boardlisttable15 td:first-child { 
    border-left:none; 
}
.boardlisttable15 p {
    text-align:left; 
}
.boardlisttable15 .address { 
    border-left:1px solid #acacac !important; 
}
.boardlisttable15 .money {
    text-align:right; 
    padding-right:20px; 
    font-style:italic;  
    font-family:'Open Sans', sans-serif;
}
.boardlisttable15 .total { 
    float:left; 
    width:250px; 
    min-height:32px; 
    line-height:32px; 
    margin-left:10px; 
    text-align:left; 
    font-weight:bold; 
}
.boardlisttable15 .Tprice { 
    float:right; 
    width:250px; 
    min-height:32px; 
    line-height:32px; 
    margin-right:10px; 
    text-align:right; 
    font-weight:bold; 
}
.boardlisttable15 .CP { 
    padding:10px; 
}
.boardlisttable15 .Sign { 
    position:absolute; 
    z-index:1; 
    width: 100px; 
    min-height:50px; 
    left:430px; 
    top:715px; 
}
.boardlisttable15 .Sign img { 
    width:100px; 
    height:106px; 
} 
*/
@media screen {
    .cetificate_box2 {
        position: relative;
        width: 718px;
        height: 908px;
        margin: 0 auto;
    }

    .wordListTopBox {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 52px;
        margin: 5px;
        font-size: 12px;
        font-weight: bold;
        border: 2px solid #2d79c7;
        border-radius: 42px;
    }

    .wordPrintBox {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 42px;
        background-color: #f9f9f9;
        border-bottom: 1px dotted #acacac;
        border-radius: 36px 36px 0 0;
    }

    .wordListBtnBox .btnBlueS {
        background-color: #3b98f2 !important;
        border: none !important;
    }

    .wordLineBox {
        position: relative;
        display: inline-flex;
        align-items: center;
        height: 32px;
        margin-left: 10px;
        padding: 0 20px;
        font-size: 14px;
        color: #1757a9;
        background-color: #e5fbff;
        border-radius: 32px;
    }

    .wordListTopTitle {
        display: flex;
        align-items: center;
        height: 32px;
        font-size: 16px;
        font-weight: bold;
    }

    .FSBK216B {
        line-height: 24px;
        font-size: 12px;
        color: #2d2d2d;
        font-weight: bold;
    }

    .FSBK214 {
        line-height: 30px !important;
        padding-top: 10px;
        font-size: 12px;
    }

    .btnBlueS {
        position: relative;
        padding: 1px 10px 2px;
        font-size: 12px;
        color: #fff !important;
        background-color: #2b3887 !important;
        border: 1px solid #151f5c !important;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        behavior: url(../pie/PIE.htc);
        cursor: pointer;
    }

    .printBox2 {
        max-width: 100%;
        min-height: 10px;
        margin: 0;
    }

        .printBox2 table {
            position: relative;
            table-layout: fixed;
            border-collapse: collapse;
            min-height: 10px;
            top: 0;
            bottom: 0;
            border-top: 1px solid #acacac;
            border-right: 1px solid #acacac;
        }

        .printBox2 td {
            line-height: 18px;
            padding: 0px 10px;
            font-size: 12px;
            text-align: left;
            border-left: 1px solid #acacac;
            border-bottom: 1px solid #acacac;
            border: 1px solid #acacac;
            word-break: break-word;
        }

            .printBox2 td:nth-child(2n-1) {
                background-color: #f9f9f9;
            }

                .printBox2 td:nth-child(2n-1) a {
                    color: #208cdb;
                    font-weight: bold;
                }
}

/* homework print */
.printBox {
    max-width: 100%;
    min-height: 10px;
    margin: 0 10px 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #acacac
}

    .printBox table.outside {
        position: relative;
        min-height: 10px;
        top: 0;
        bottom: 0;
        border: 1px solid #dedede;
    }

    .printBox th {
        line-height: 28px;
        padding: 0px 10px;
        font-size: 12px;
        background-color: #f0f0f0;
        border-bottom: 1px solid #dedede;
        border-left: 1px solid #dedede;
    }

        .printBox th:first-child {
            border-left: none;
        }

    .printBox td {
        line-height: 18px;
        border-left: 1px solid #dedede;
        padding: 0px 10px;
        font-size: 12px;
        word-break: break-all;
    }

        .printBox td:first-child {
            border-left: none;
        }

    .printBox p {
        text-align: left;
    }

.homeworkListTopBox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    padding: 0 10px;
    background-color: #f9f9f9;
    border: 2px solid #2d2d2d;
    box-sizing: border-box;
}

.cetificate_box {
    position: relative;
    width: 700px;
    min-height: 908px;
    margin: 0 auto;
    /* border: 2px solid #2d2d2d; */
}

.printInBox {
    position: relative;
    display: block;
    min-height: auto;
    padding-bottom: 10px;
    border-bottom: 1px solid #acacac;
    box-sizing: border-box;
}

@media print {
    .printTopBtnBox {
        display: none;
    }
}

@media screen {
    .printTopBtnBox {
        position: relative;
        display: flex;
        justify-content: center;
        width: 100%;
        height: 42px;
        margin-top: 10px;
    }

    .printBtn {
        position: relative;
        display: flex;
        align-items: center;
        height: 32px;
        padding: 0 30px;
        color: #fff;
        background-color: #3b98f2;
        border: none;
    }
}

/* 검색결과 */
.searchResultTitle {
    position: relative;
    display: block;
    height: 32px;
    margin: 20px 0;
    text-align: center;
    font-size: 24px;
    color: #2d2d2d;
}

.searchResultInTitle {
    position: relative;
    display: block;
    height: 24px;
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #639bd5;
}

ul.searchResultList {
    position: relative;
    display: block;
    padding: 20px 30px;
    box-sizing: border-box;
}

    ul.searchResultList li {
        position: relative;
        margin: 20px 0;
    }

/* 회사위치 */
.locationTable {
    positon: relative;
    display: block;
    margin-top: 20px;
    font-size: 16px;
    border-top: 2px solid #000;
    box-sizing: border-box;
}

    .locationTable table {
        border-collapse: collapse;
        width: 100%;
    }

    .locationTable th {
        height: 32px;
        text-align: center;
        padding: 5px;
        background-color: #f9f9f9;
        border-bottom: 1px solid #dedede;
    }

    .locationTable td {
        position: relative;
        ;
        line-height: 1.5;
        text-align: left;
        padding: 5px;
        background-color: #fff;
        border-bottom: 1px solid #dedede;
    }

@media (max-width: 767px) {
    .locationTable {
        font-size: 14px;
    }
}

/* 선생님소개 */
ul.teachersList {
    position: relative;
    display: block;
    padding: 20px;
    box-sizing: border-box;
}

    ul.teachersList li {
        position: relative;
        display: flex;
        padding: 15px;
        border-bottom: 1px solid #dedede;
    }

        ul.teachersList li:first-child {
            border-top: 1px solid #dedede;
        }

        ul.teachersList li:nth-child(even) {
            background-color: #f9f9f9;
        }

.teachersLeftBox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.teachersRightBox {
    position: relative;
    display: block;
    margin-left: 10px;
    padding: 10px;
    line-height: 1.7;
}

.teachersImgBox {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 170px;
    border: 1px solid #5d5d5d;
    overflow: hidden;
    box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.1);
}

    .teachersImgBox img {
        max-width: 150% !important;
        max-height: 150% !important;
    }

.teachersName {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
}

@media all and (max-width: 767px) {
    ul.teachersList li {
        flex-direction: column;
    }

    .teachersLeftBox {
        align-items: center;
    }

    .teachersRightBox {
        margin-left: 0;
    }
}

@media all and (max-width: 419px) {
    .teachersRightBox {
        margin-left: 0;
        pdding: 10px 0;
    }

    .teachersRightBox {
        padding: 10px 0;
    }
}

/*-------------------------------*/
/*             Atype             */
/*-------------------------------*/
.learnpiaStudyBottomBox {
    position: relative;
    display: block;
    padding: 20px;
    box-sizing: border-box;
}

    .learnpiaStudyBottomBox span {
        line-height: 1.8;
        font-size: 16px;
        color: #fff;
    }

.eniEnglish .learnpiaStudyBottomBox span {
    color: #2d2d2d;
}

.companyInBox,
.courseInBox,
.refundInBox {
    position: relative;
    padding: 20px;
    box-sizing: border-box;
}

.sectionTitle {
    position: relative;
    display: flex;
    width: 100%;
    font-size: 36px;
    font-weight: bold;
    padding: 20px;
    box-sizing: border-box;
    font-family: 'Noto Sans KR', sans-serif;
}

.companySectionBox,
.courseSectionBox,
.registrationSectionBox,
.refundSectionBox {
    position: relative;
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

    .companySectionBox:first-child,
    .refundSectionBox:first-child {
        margin-bottom: 80px;
    }

    .registrationSectionBox:first-child {
        margin-bottom: 40px;
    }

.companySectionInBox,
.courseSectionInBox,
.registrationSectionInBox,
.refundSectionInBox {
    position: relative;
    display: flex;
    width: 100%;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #dedede;
    box-sizing: border-box;
}

.registrationSectionInBox {
    flex-direction: column;
}

.companyDirectorBox {
    position: relative;
    display: flex;
    align-items: baseline;
    padding: 20px;
    box-sizing: border-box;
}

    .companyDirectorBox span:first-child {
        font-size: 32px;
        font-family: 'Noto Sans KR', sans-serif;
    }

    .companyDirectorBox span:last-child {
        margin-left: 20px;
        font-size: 48px;
        font-weight: bold;
        font-family: 'Noto Sans KR', sans-serif;
    }

ul.companyTextExList {
    position: relative;
    display: flex;
    flex-direction: column;
}

    ul.companyTextExList li {
        padding: 3px 0;
    }

ul.threeSectionList {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(30%, auto));
    justify-content: center;
    gap: 10px;
    width: 100%;
}

    ul.threeSectionList li {
        position: relative;
        padding: 10px;
        box-sizing: border-box;
    }

        ul.threeSectionList li .threeSectionListBox {
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            background-color: #f9f9f9;
            box-sizing: border-box;
        }

.threeSectionIconBox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* height: 280px; */
    overflow: hidden;
}

.threeSectionIconTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 10px;
    font-size: 26px;
    font-weight: bold;
    color: #000;
    box-sizing: border-box;
}

.threeSectionIconEx {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.7;
    padding: 0 15px 30px;
    font-size: 15px;
    box-sizing: border-box;
}

.registrationBox {
    position: relative;
    padding: 20px;
    box-sizing: border-box;
}

ul.registrationGuideList {
    position: relative;
    /* 
	display: flex;
	flex-direction: column;
	*/
    display: grid;
    grid-template-columns: repeat(5, minmax(17%, auto));
    width: 100%;
    border: 1px solid #dedede;
}

    ul.registrationGuideList li {
        position: relative;
        display: flex;
        align-items: center;
        padding: 20px;
        /* border-bottom: 1px solid #dedede; */
        box-sizing: border-box;
    }

        ul.registrationGuideList li:before {
            position: absolute;
            z-index: 0;
            top: 50%;
            right: 0;
            width: 24px;
            height: 24px;
            background-color: #fff;
            border-top: 3px solid #596275;
            border-right: 3px solid #596275;
            content: "";
            transform: translate(-50%, -50%) rotate(45deg);
        }

        ul.registrationGuideList li:last-child:before {
            background-color: transparent;
            border-top: none;
            border-right: none;
        }

.newGuideNumBox01 {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background-color: #d8a677;
    border-radius: 50%;
    font-family: 'Roboto', sans-serif;
}

/*
.newGuideNumBox01:before {
	position: absolute;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    top: 15px;
    left: 50%;
    width: 20px;
    height: 30px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    background-color: #a57445;
    transform: translateX(-50%);
    content: "1";
    font-family: 'Roboto', sans-serif;
}
.newGuideNumBox01:after {
	position: absolute;
    top: 45px;
    left: 50%;
    width: 33px;
    height: 42px;
    border-top: 20px solid #a57445;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    transform: translateX(-50%);
    content: "";
}
*/

.newGuideNumBox02 {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background-color: #aac883;
    border-radius: 50%;
    font-family: 'Roboto', sans-serif;
}

/*
.newGuideNumBox02:before {
	position: absolute;
	display:flex;
	justify-content:center;
	align-items:flex-end;
	top: 15px;
    left: 50%;
    width: 20px;
    height: 30px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    background-color: #70963d;
    transform: translateX(-50%);
	content: "2";
	font-family: 'Roboto', sans-serif;
}
.newGuideNumBox02:after {
	position: absolute;
    top: 45px;
    left: 50%;
    width: 33px;
    height: 42px;
    border-top: 20px solid #70963d;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    transform: translateX(-50%);
    content: "";
}
*/

.newGuideNumBox03 {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background-color: #98b9db;
    border-radius: 50%;
    font-family: 'Roboto', sans-serif;
}

/*
.newGuideNumBox03:before {
	position: absolute;
	display:flex;
	justify-content:center;
	align-items:flex-end;
	top: 15px;
    left: 50%;
    width: 20px;
    height: 30px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
	background-color: #507ead;
	transform: translateX(-50%);
	content: "3";
	font-family: 'Roboto', sans-serif;
}
.newGuideNumBox03:after {
	position: absolute;
    top: 45px;
    left: 50%;
    width: 33px;
    height: 42px;
    border-top: 20px solid #507ead;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    transform: translateX(-50%);
    content: "";
}
*/

.newGuideNumBox04 {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background-color: #b498db;
    border-radius: 50%;
    font-family: 'Roboto', sans-serif;
}

/*
.newGuideNumBox04:before {
	position: absolute;
	display:flex;
	justify-content:center;
	align-items:flex-end;
	top: 15px;
    left: 50%;
    width: 20px;
    height: 30px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
	background-color: #6a4b96;
	transform: translateX(-50%);
	content: "4";
	font-family: 'Roboto', sans-serif;
}
.newGuideNumBox04:after {
	position: absolute;
    top: 45px;
    left: 50%;
    width: 33px;
    height: 42px;
    border-top: 20px solid #6a4b96;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    transform: translateX(-50%);
    content: "";
}
*/

.newGuideNumBox05 {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background-color: #db98c7;
    border-radius: 50%;
    font-family: 'Roboto', sans-serif;
}

/*
.newGuideNumBox05:before {
	position: absolute;
	display:flex;
	justify-content:center;
	align-items: center;
    top: 15px;
    left: 50%;
    width: 20px;
    height: 42px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
	background-color: #7f426d;
	transform: translateX(-50%);
	content: "5";
	font-family: 'Roboto', sans-serif;
}
.newGuideNumBox05:after {
    position: absolute;
    top: 15px;
    left: 50%;
    width: 40px;
    height: 42px;
    border-bottom: 2px solid #7f426d;
	transform: translateX(-50%);
    content: "";
}
*/

/*
.newGuideNumBox06 {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 82px;
	height: 82px;
	font-size: 3rem;
	font-weight: bold;
	color: #fff;
	background-color: #c99797; 
	border-radius: 50%;
	font-family: 'Roboto', sans-serif;
}
.newGuideNumBox06:before {
	position: absolute;
	display:flex;
	justify-content:center;
	align-items:flex-end;
	top: 15px;
	left: 15px;
	width: 52px;
	height: 52px;
	font-size: 3rem;
	color: #fff;
	background-color: #884d4d;
	border-radius: 50%;
	content: "6";
	font-family: 'Roboto', sans-serif;
}
.newGuideNumBox06:after {
	position: absolute;
    top: 52px;
    left: 14px;
    width: 48px;
    height: 42px;
    border-top: 14px solid #884d4d;
    content: "";
}
*/
.registrationInBox {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: calc(100% - 100px);
    margin-left: 15px;
    font-size: 14px;
}

    .registrationInBox span {
        line-height: 1.5;
        padding: 10px 0;
    }

.guideLoginBtn,
.guideRegistrationBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 120px;
    height: 42px;
    margin-left: auto;
    padding: 0 25px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #596275;
    border: none;
    border-radius: 42px;
    font-family: 'Noto Sans KR', sans-serif;
}

.guideLoginBtn,
.guideRegistrationBtn {
    margin-left: 0;
}

@media (max-width: 1320px) {
    ul.registrationGuideList li {
        flex-direction: column;
        align-items: center;
    }

    .registrationInBox {
        align-items: center;
        width: 100%;
        margin-left: 0;
        padding: 0 10px;
        box-sizing: border-box;
    }

    ul.registrationGuideList li:before {
        right: -15px;
    }
}

@media (max-width: 1023px) {

    .companySectionBox:first-child,
    .registrationSectionBox:first-child {
        margin-bottom: 50px;
    }
}

@media (max-width: 960px) {
    ul.registrationGuideList {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        border: none;
        border-top: 1px solid #dedede;
    }

        ul.registrationGuideList li {
            flex-direction: row;
            padding: 10px;
            border-bottom: 1px solid #dedede;
        }

            ul.registrationGuideList li:before {
                background-color: transparent;
                border: none;
            }

    .registrationInBox {
        flex-direction: row;
        justify-content: flex-start;
    }

    .guideLoginBtn,
    .guideRegistrationBtn {
        margin-left: auto;
    }
}

@media (max-width: 620px) {
    ul.registrationGuideList li {
        padding: 10px 0;
    }

    .registrationInBox {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-left: 10px;
        font-size: 14px;
    }

    .guideLoginBtn,
    .guideRegistrationBtn {
        margin-left: 0;
        margin-top: 10px;
    }
}

.refundTextBox {
    width: 100%;
}

ul.refundList {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(33%, auto));
    width: 100%;
}

    ul.refundList li {
        margin-left: -1px;
        border: 1px solid #dedede;
        border-top: none;
    }

.refundListTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 58px;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #2d2d2d;
    background-color: #f9f9f9;
    border-bottom: 1px solid #dedede;
    border-top: 2px solid #2d2d2d;
    box-sizing: border-box;
}

.refundListEx {
    padding: 10px;
    line-height: 1.5;
}

@media (max-width: 1023px) {
    ul.refundList {
        grid-template-columns: 100%;
    }

        ul.refundList li {
            margin-bottom: 10px;
        }
}


/* ----- enienglish ----- */
.eniEnglish .learnpiaImgInBox img {
    max-width: 150% !important;
}

.eniEnglish .learnpiaStudyBottomBox {
    padding: 20px 100px;
}

.eniEnglish.companyInBox {
    padding: 50px;
}

.eniEnglish .companyImgBox,
.eniEnglish .courseImgBox {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 400px;
    overflow: hidden;
}

.eniEnglish .courseImgBox {
    width: 380px;
    height: 265px;
    margin-left: auto;
}

.eniEnglish .threeSectionImgInBox {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 5/4;
    overflow: hidden;
}

    .eniEnglish .companyImgBox img,
    .eniEnglish .courseImgBox img,
    .eniEnglish .threeSectionImgInBox img {
        max-width: 150% !important;
        max-height: 150% !important;
    }

    .eniEnglish .threeSectionImgInBox img {
        max-width: 120% !important;
    }

.eniEnglish .companyTextBox,
.eniEnglish .courseTextBox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 50px;
    box-sizing: border-box;
}

.eniEnglish .courseTextBox {
    padding: 0 50px 0 20px;
}

.eniEnglish .companySectionInBox,
.eniEnglish .courseSectionInBox {
    padding: 50px;
}

    .eniEnglish .companySectionInBox .companyTextBox,
    .eniEnglish .courseSectionInBox .courseTextBox {
        padding: 0 50px 0 0;
    }

.eniEnglish .companyTextTitle,
.eniEnglish .registrationTextTitle,
.eniEnglish .courseTextTitle,
.eniEnglish .refundTextTitle {
    margin-bottom: 50px;
    font-size: 36px;
    font-weight: bold;
    font-family: 'Noto Sans KR', sans-serif;
}

.eniEnglish .registrationTextTitle {
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Noto Sans KR', sans-serif;
}

.eniEnglish .courseTextTitle {
    margin-bottom: 20px;
    font-size: 30px;
}

.eniEnglish .refundTextTitle {
    margin-bottom: 40px;
    font-size: 30px;
}

.eniEnglish .companyTextEx,
.eniEnglish .courseTextEx,
.eniEnglish .refundTextEx {
    line-height: 1.7;
}

.eniEnglish .companyTextEx2 {
    position: relative;
    line-height: 1.7;
    padding: 50px 20px;
    font-size: 15px;
    box-sizing: border-box;
}

@media (max-width: 1023px) {

    .eniEnglish.companyInBox,
    .eniEnglish.courseInBox {
        padding: 20px;
    }

    .eniEnglish .companyImgBox,
    .eniEnglish .cousreImgBox {
        width: 400px;
        height: 320px;
    }

    .eniEnglish .companyTextBox,
    .eniEnglish .cousreTextBox {
        margin-top: 50px;
        padding: 0 30px;
    }

    .eniEnglish .companySectionInBox,
    .eniEnglish .courseSectionInBox {
        padding: 20px;
    }

    .eniEnglish .companySectionBox,
    .eniEnglish .companySectionInBox {
        flex-direction: column;
        align-items: center;
    }

        .eniEnglish .companySectionInBox .companyTextEx {
            margin-bottom: 50px;
        }

    .eniEnglish .threeSectionIconTitle {
        font-size: 20px;
    }

    .eniEnglish .threeSectionIconEx {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .eniEnglish ul.learnpiaStudyList {
        grid-template-columns: repeat(3, minmax(30%, 200px));
    }

        .eniEnglish ul.learnpiaStudyList li {
            padding: 0;
        }

            .eniEnglish ul.learnpiaStudyList li .learnpiaStudyListBox {
                max-width: 200px;
                padding: 0;
            }

    .eniEnglish .learnpiaIconBox {
        width: 190px;
        height: 190px;
    }

    .eniEnglish .learnpiaImgInBox {
        width: 190px;
        height: 190px;
    }

    .eniEnglish .learnpiaStudyBottomBox {
        padding: 20px 40px;
    }

    .eniEnglish .companySectionInBox {
        flex-direction: column;
        align-items: center;
    }

        .eniEnglish .companySectionInBox .companyTextBox {
            margin-top: 30px;
        }

        .eniEnglish .companySectionInBox .companyImgBox {
            margin-top: 50px;
        }

    .eniEnglish .courseSectionBox {
        flex-direction: column;
    }

    .eniEnglish .courseImgBox {
        margin: 0 auto;
    }

    .eniEnglish .courseTextEx {
        margin-bottom: 50px;
    }

    .eniEnglish ul.threeSectionList {
        grid-template-columns: repeat(1, minmax(90%, auto));
    }

        .eniEnglish ul.threeSectionList li .threeSectionListBox {
            flex-direction: row;
        }

    .eniEnglish .threeSectionIconBox {
        max-width: 50%;
    }

    .eniEnglish .threeSectionTextBox {
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 50%;
        height: 100%;
    }
}

@media (max-width: 620px) {
    .eniEnglish ul.learnpiaStudyList {
        grid-template-columns: repeat(3, minmax(30%, 150px));
    }

        .eniEnglish ul.learnpiaStudyList li {
            height: 150px;
            padding: 0;
        }

            .eniEnglish ul.learnpiaStudyList li .learnpiaStudyListBox {
                position: absolute;
                max-width: 150px;
            }

            .eniEnglish ul.learnpiaStudyList li:nth-child(1) .learnpiaStudyListBox {
                left: 0;
            }

            .eniEnglish ul.learnpiaStudyList li:nth-child(3) .learnpiaStudyListBox {
                right: 0;
            }

    .eniEnglish .learnpiaIconBox {
        max-width: 150px;
        max-height: 150px;
    }

    .eniEnglish .learnpiaImgInBox {
        max-width: 150px;
        max-height: 150px;
    }

    .eniEnglish .learnpiaStudyBottomBox {
        padding: 20px;
    }

    .eniEnglish .companyTextTitle {
        font-size: 26px;
    }

    .eniEnglish .companyImgBox,
    .eniEnglish .courseImgBox,
    .eniEnglish .threeSectionIconBox {
        aspect-ratio: 5 / 4;
        width: 100%;
        height: auto;
    }

    .eniEnglish .companySectionInBox .companyImgBox {
        margin-top: 0;
    }

    .eniEnglish .companySectionInBox .companyTextBox {
        padding: 0;
    }

    .eniEnglish .courseTextBox {
        padding: 0 20px;
    }

    .eniEnglish ul.threeSectionList li .threeSectionListBox {
        flex-direction: column;
    }

    .eniEnglish .threeSectionIconBox {
        max-width: 100%;
    }

    .eniEnglish .threeSectionTextBox {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 460px) {
    .companyDirectorBox {
        flex-direction: column;
        line-height: 1.5;
        padding: 20px 0;
    }

        .companyDirectorBox span:first-child {
            font-size: 20px;
        }

        .companyDirectorBox span:last-child {
            font-size: 28px;
        }
}

@media (max-width: 420px) {
    .eniEnglish ul.learnpiaStudyList {
    }

        .eniEnglish ul.learnpiaStudyList li {
            padding: 0;
        }

            .eniEnglish ul.learnpiaStudyList li .learnpiaStudyListBox {
                max-width: 120px;
            }

    .eniEnglish .learnpiaIconBox {
        max-width: 120px;
        max-height: 120px;
    }

    .eniEnglish .learnpiaImgInBox {
        max-width: 120px;
        max-height: 120px;
    }

    .eniEnglish .learnpiaStudyBottomBox {
        padding: 20px;
    }

    .eniEnglish .sectionTitle {
        padding: 10px 0;
    }

    .eniEnglish .companyTextBox,
    .eniEnglish .cousreTextBox,
    .eniEnglish .refundTextBox {
        padding: 0;
    }

    .eniEnglish .companyTextEx2 {
        padding: 20px 0;
    }

    .companyDirectorBox span:last-child {
        margin-left: 0;
    }
}


/* ----- sallbarun ----- */
.active .sallbarunIconBox.icon01 {
    top: -100px;
    -webkit-animation: ease .5s forwards .5s icon01;
    -moz-animation: ease .5s forwards .5s icon01;
    animation: ease .5s forwards .5s icon01;
}

@-webkit-keyframes icon01 {
    0% {
        opacity: 0;
        top: -100px;
    }

    100% {
        opacity: 1;
        top: -180px;
    }
}

@-moz-keyframes icon01 {
    0% {
        opacity: 0;
        top: -100px;
    }

    100% {
        opacity: 1;
        top: -180px;
    }
}

@-o-keyframes icon01 {
    0% {
        opacity: 0;
        top: -100px;
    }

    100% {
        opacity: 1;
        top: -180px;
    }
}

@keyframes icon01 {
    0% {
        opacity: 0;
        top: -100px;
    }

    100% {
        opacity: 1;
        top: -180px;
    }
}

@media all and (max-width: 1023px) {
    .active .sallbarunIconBox.icon01 {
        top: 50%;
        -webkit-animation: ease .5s forwards .5s none;
        -moz-animation: ease .5s forwards .5s none;
        animation: ease .5s forwards .5s none;
        transform: translateY(-30%);
        visibility: visible;
    }
}

@media all and (max-width: 460px) {
    .active .sallbarunIconBox.icon01 {
        top: 50%;
        transform: translateY(-32%);
    }
}

.active .sallbarunIconBox.icon02 {
    top: -100px;
    -webkit-animation: ease 1s forwards 1s icon02;
    -moz-animation: ease 1s forwards 1s icon02;
    animation: ease 1s forwards 1s icon02;
}

@-webkit-keyframes icon02 {
    0% {
        opacity: 0;
        top: -100px;
    }

    100% {
        opacity: 1;
        top: -230px;
    }
}

@-moz-keyframes icon02 {
    0% {
        opacity: 0;
        top: -100px;
    }

    100% {
        opacity: 1;
        top: -230px;
    }
}

@-o-keyframes icon02 {
    0% {
        opacity: 0;
        top: -100px;
    }

    100% {
        opacity: 1;
        top: -230px;
    }
}

@keyframes icon02 {
    0% {
        opacity: 0;
        top: -100px;
    }

    100% {
        opacity: 1;
        top: -230px;
    }
}

@media all and (max-width: 1023px) {
    .active .sallbarunIconBox.icon02 {
        top: 50%;
        -webkit-animation: ease 1s forwards 1s none;
        -moz-animation: ease 1s forwards 1s none;
        animation: ease 1s forwards 1s none;
        transform: translateY(-38%);
        visibility: visible;
    }
}

@media all and (max-width: 460px) {
    .active .sallbarunIconBox.icon02 {
        top: 50%;
        transform: translateY(-44%)
    }
}

.active .sallbarunIconBox.icon03 {
    top: -100px;
    -webkit-animation: ease 1.5s forwards 1.5s icon03;
    -moz-animation: ease 1.5s forwards 1.5s icon03;
    animation: ease 1.5s forwards 1.5s icon03;
}

@-webkit-keyframes icon03 {
    0% {
        opacity: 0;
        top: -100px;
    }

    100% {
        opacity: 1;
        top: -320px;
    }
}

@-moz-keyframes icon03 {
    0% {
        opacity: 0;
        top: -100px;
    }

    100% {
        opacity: 1;
        top: -320px;
    }
}

@-o-keyframes icon03 {
    0% {
        opacity: 0;
        top: -100px;
    }

    100% {
        opacity: 1;
        top: -320px;
    }
}

@keyframes icon03 {
    0% {
        opacity: 0;
        top: -100px;
    }

    100% {
        opacity: 1;
        top: -320px;
    }
}

@media all and (max-width: 1023px) {
    .active .sallbarunIconBox.icon03 {
        top: 20px;
        -webkit-animation: ease 1s forwards 1s none;
        -moz-animation: ease 1s forwards 1s none;
        animation: ease 1s forwards 1s none;
        visibility: visible;
    }
}

@media all and (max-width: 450px) {
    .active .sallbarunIconBox.icon03 {
        top: 20px;
    }
}

.sallbarunIconTextBox {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    padding: 100px 0 20px;
    background-color: #fffef1;
    /* background: rgb(255,255,255);
    background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(240,240,240,1) 100%);
    background: -o-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(240,240,240,1) 100%);
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(240,240,240,1) 100%); */
}

/*
.active ul.sallbarunStudyList li:first-child .sallbarunIconTextBox:before {
	position: absolute;
    z-index: 20;
    top: -180px;
    width: 10%;
    height: 10px;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 0 110px 30px 20px rgba(0, 0, 0, 0.1);
    content: "";
	-webkit-animation: ease .5s forwards .5s Text01;
	-moz-animation: ease .5s forwards .5s Text01;
	animation: ease .5s forwards .5s Text01;
}
@-webkit-keyframes Text01 {
   0%   { opacity: 0; top: -180px; }
   100% { opacity: 1; top: -100px; }
}
@-moz-keyframes Text01 {
   0%   { opacity: 0; top: -180px; }
   100% { opacity: 1; top: -100px; }
}
@-o-keyframes Text01 {
   0%   { opacity: 0; top: -180px; }
   100% { opacity: 1; top: -100px; }
}
@keyframes Text01 {
   0%   { opacity: 0; top: -180px; }
   100% { opacity: 1; top: -100px; }
}
*/

.sallbarun .companyTextTitle,
.sallbarun .registrationTextTitle,
.sallbarun .refundTextTitle {
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Noto Sans KR', sans-serif;
}

.sallbarun .companyImgBox {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 200px;
    overflow: hidden;
}

.sallbarun .companySectionBox:first-child .companyImgBox {
    width: 350px;
    height: 220px;
    background-color: #df0011;
}

    .sallbarun .companySectionBox:first-child .companyImgBox img {
        max-width: 80% !important;
    }

.sallbarun .companyTextBox {
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    padding: 0 50px;
    box-sizing: border-box;
}

.sallbarun .companyTextEx {
    line-height: 1.5;
}

.sallbarun .companySectionBox {
    position: relative;
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

.sallbarun .companySectionInBox {
    width: 100%;
}


.sallbarun .registrationSectionInBox {
    flex-direction: column;
    padding: 30px;
}

dl.registrationTestList {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

    dl.registrationTestList dt {
        position: relative;
        line-height: 1.5;
        padding: 5px 5px 5px 15px;
        font-size: 16px;
        font-family: 'Noto Sans KR', sans-serif;
    }

        dl.registrationTestList dt:before {
            position: absolute;
            z-index: 10;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 15px;
            height: 34px;
            font-size: 12px;
            color: #ff3000;
            content: "\ea28";
            font-family: 'icomoon' !important;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
        }

    dl.registrationTestList dd {
        display: flex;
        flex-direction: column;
        line-height: 1.7;
    }

@media all and (max-width: 1023px) {
    .sallbarun ul.sallbarunStudyList {
        top: -150px;
    }

    .sallbarun .sallbarunIconBox {
        position: relative;
        width: 100%;
        margin: 0 auto;
        aspect-ratio: 1;
        visibility: hidden;
    }

    /*
	.sallbarun .sallbarunIconBox.icon01 {
		top: 170px;
	}
	.sallbarun .sallbarunIconBox.icon02 {
		top: 130px;
	}
	.sallbarun .sallbarunIconBox.icon03 {
		top: 65px;
	}
	*/
    /*
	.sallbarun .sallbarunStudyList li .sallbarunIconTextBox {
		border: 1px solid #dedede;
	}
	*/

    .sallbarun.companyInBox,
    .sallbarun.courseInBox {
        padding: 20px;
    }

    .sallbarun .companyImgBox,
    .sallbarun .cousreImgBox {
        width: 400px;
        height: 320px;
    }

    .sallbarun .companyTextBox,
    .sallbarun .cousreTextBox {
        margin-top: 50px;
        padding: 0 30px;
    }

    .sallbarun .companySectionInBox,
    .sallbarun .courseSectionInBox {
        padding: 20px;
    }

    .sallbarun .companySectionBox,
    .sallbarun .companySectionInBox {
        flex-direction: column;
        align-items: center;
    }

        .sallbarun .companySectionInBox .companyTextEx {
            margin-bottom: 50px;
        }

    .sallbarun .threeSectionIconTitle {
        font-size: 20px;
    }

    .sallbarun .threeSectionIconEx {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .sallbarun ul.learnpiaStudyList {
        grid-template-columns: repeat(3, minmax(30%, 200px));
    }

        .sallbarun ul.learnpiaStudyList li {
            padding: 0;
        }

            .sallbarun ul.learnpiaStudyList li .learnpiaStudyListBox {
                max-width: 200px;
                padding: 0;
            }

    .sallbarun .learnpiaIconBox {
        width: 190px;
        height: 190px;
    }

    .sallbarun .learnpiaImgInBox {
        width: 190px;
        height: 190px;
    }

    .sallbarun .learnpiaStudyBottomBox {
        padding: 20px 40px;
    }

    .sallbarun .companySectionInBox {
        flex-direction: column;
        align-items: center;
    }

        .sallbarun .companySectionInBox .companyTextBox {
            margin-top: 30px;
        }

        .sallbarun .companySectionInBox .companyImgBox {
            margin-top: 50px;
        }
}

@media (max-width: 620px) {
    .sallbarun ul.learnpiaStudyList {
        grid-template-columns: repeat(3, minmax(30%, 150px));
    }

        .sallbarun ul.learnpiaStudyList li {
            height: 150px;
            padding: 0;
        }

            .sallbarun ul.learnpiaStudyList li .learnpiaStudyListBox {
                position: absolute;
                max-width: 150px;
            }

            .sallbarun ul.learnpiaStudyList li:nth-child(1) .learnpiaStudyListBox {
                left: 0;
            }

            .sallbarun ul.learnpiaStudyList li:nth-child(3) .learnpiaStudyListBox {
                right: 0;
            }

    .sallbarun .learnpiaIconBox {
        max-width: 150px;
        max-height: 150px;
    }

    .sallbarun .learnpiaImgInBox {
        max-width: 150px;
        max-height: 150px;
    }

    .sallbarun .learnpiaStudyBottomBox {
        padding: 20px;
    }

    .sallbarun .companyTextTitle {
        font-size: 26px;
    }

    .sallbarun .companyImgBox {
        aspect-ratio: 5 / 4;
        width: 100%;
        height: auto;
    }

    .sallbarun .companySectionBox:first-child .companyImgBox {
        aspect-ratio: 5 / 4;
        width: 100%;
        height: auto;
    }

    .sallbarun .companySectionInBox .companyImgBox {
        margin-top: 0;
    }

    .sallbarun .companySectionInBox .companyTextBox {
        padding: 0;
    }

    .sallbarun .courseTextBox {
        padding: 0 20px;
    }
}

@media (max-width: 460px) {
    .companyDirectorBox {
        flex-direction: column;
        line-height: 1.5;
        padding: 20px 0;
    }

        .companyDirectorBox span:first-child {
            font-size: 20px;
        }

        .companyDirectorBox span:last-child {
            font-size: 28px;
        }

    .sallbarun .registrationTextTitle {
        margin-bottom: 10px;
    }

    .sallbarun .registrationSectionInBox {
        padding: 20px 10px;
    }
}

@media (max-width: 420px) {
    .sallbarun ul.learnpiaStudyList {
    }

        .sallbarun ul.learnpiaStudyList li {
            padding: 0;
        }

            .sallbarun ul.learnpiaStudyList li .learnpiaStudyListBox {
                max-width: 120px;
            }

    .sallbarun .learnpiaIconBox {
        max-width: 120px;
        max-height: 120px;
    }

    .sallbarun .learnpiaImgInBox {
        max-width: 120px;
        max-height: 120px;
    }

    .sallbarun .learnpiaStudyBottomBox {
        padding: 20px;
    }

    .sallbarun .sectionTitle {
        padding: 10px 0;
    }

    .sallbarun .companyTextBox {
        padding: 0;
    }

    .sallbarun .companyTextEx2 {
        padding: 20px 0;
    }

    .companyDirectorBox span:last-child {
        margin-left: 0;
    }
}


/* ----- clssam ----- */
.clssam .clssamImgInBox img {
    max-width: 100% !important;
}

.clssam .learnpiaStudyBottomBox {
    display: flex;
    justify-content: center;
}

    .clssam .learnpiaStudyBottomBox span {
        display: flex;
        justify-content: center;
        text-align: center;
        font-size: 20px;
        color: #2d2d2d;
    }

.clssam .companyTextTitle,
.clssam .registrationTextTitle,
.clssam .courseTextTitle,
.clssam .refundTextTitle {
    margin-bottom: 50px;
    font-size: 36px;
    font-weight: bold;
    font-family: 'Noto Sans KR', sans-serif;
}

.clssam .registrationTextTitle,
.clssam .refundTextTitle {
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Noto Sans KR', sans-serif;
}

.clssam .companyImgBox {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 200px;
    overflow: hidden;
}

.clssam .companySectionBox:first-child .companyImgBox {
    width: 350px;
    height: 300px;
    background-color: #1552a1;
}

    .clssam .companySectionBox:first-child .companyImgBox img {
        max-width: 80%;
    }

.clssam .companyTextBox {
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    padding: 0 50px;
    box-sizing: border-box;
}

.clssam .companyTextEx {
    line-height: 1.7;
}

.clssam .companySectionBox.FDC .companyImgBox {
    position: relative;
    width: 100%;
    height: auto;
}

.clssam .companySectionBox.FDC .companyTextBox {
    margin-bottom: 50px;
    padding: 0 30px;
}

@media (max-width: 1023px) {

    .clssam .companySectionBox {
        flex-direction: column;
        align-items: center;
    }

    .clssam .companyTextBox,
    .clssam .cousreTextBox {
        margin-top: 50px;
        padding: 0 30px;
    }
}

@media (max-width: 620px) {
    .clssam .companySectionBox:first-child .companyImgBox {
        aspect-ratio: 5 / 4;
        width: 100%;
        height: auto;
    }

    .clssam .companyTextTitle {
        font-size: 26px;
    }

    .clssam .companyTextBox,
    .clssam .cousreTextBox {
        margin-top: 50px;
        padding: 0 10px;
    }

    .clssam .companySectionBox.FDC .companyTextBox {
        margin-top: 20px;
        margin-bottom: 30px;
        padding: 0 10px;
    }
}

@media (max-width: 560px) {
    .clssam .learnpiaStudyBottomBox span {
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    .clssam .learnpiaStudyBottomBox span {
        font-size: 14px;
    }

    .clssam .companyTextTitle {
        font-size: 20px;
    }

    .clssam .companySectionBox.FDC .companyTextBox {
        margin-top: 20px;
        padding: 0 10px;
    }
}

/* ----- paxEnglish ----- */
.paxEnglish .learnpiaImgInBox img {
    max-width: 150% !important;
}

.paxEnglish .learnpiaStudyTitle {
    height: 90px;
    margin-bottom: 10px;
    font-size: 36px;
    font-weight: bold;
    color: #000;
}

.paxEnglish .learnpiaIconTitle {
    position: relative;
    display: block;
    line-height: 1.5;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #3394da;
    border: 3px solid #3394da;
    border-radius: 10px;
}

.paxEnglish ul.learnpiaStudyInList li {
    line-height: 1.5;
    font-size: 14px;
    color: #000;
}

    .paxEnglish ul.learnpiaStudyInList li:before {
        content: "";
    }

@media all and (max-width: 1023px) {
    .paxEnglish .learnpiaStudyTitle {
        height: 90px;
        margin-bottom: 10px;
        font-size: 32px;
    }

    .paxEnglish .contentStudyMainBox {
        width: 100%;
    }

    .paxEnglish .contentStudyMainBox {
        top: 0 !important;
        padding: 20px;
    }
}

@media screen and (max-width: 767px) {
    .paxEnglish ul.learnpiaStudyInList {
        align-items: flex-start;
    }

    .paxEnglish .learnpiaStudyTitle {
        font-size: 28px;
    }
}

@media screen and (max-width: 420px) {
    .paxEnglish .learnpiaStudyTitle {
        height: 52px;
        font-size: 24px;
    }
}

.paxEnglish .learnpiaImgInBox img {
    max-width: 150% !important;
}

.paxEnglish .learnpiaStudyBottomBox {
    padding: 20px 100px;
}

.paxEnglish.companyInBox {
    padding: 50px;
}

.paxEnglish .companyImgBox,
.paxEnglish .courseImgBox {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 400px;
    overflow: hidden;
}

.paxEnglish .companyImgBox {
    border: 1px solid #dedede;
}

.paxEnglish .companySectionInBox .companyImgBox {
    height: 100%;
    border: none;
}

.paxEnglish .courseImgBox {
    width: 380px;
    height: 100%;
    margin-left: auto;
}

.paxEnglish .threeSectionImgInBox {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 5/4;
    overflow: hidden;
}

    .paxEnglish .companyImgBox img,
    .paxEnglish .courseImgBox img,
    .paxEnglish .threeSectionImgInBox img {
        max-width: 150% !important;
        max-height: 150% !important;
    }

    .paxEnglish .threeSectionImgInBox img {
        max-width: 120% !important;
    }

.paxEnglish .companyTextBox,
.paxEnglish .courseTextBox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 50px;
    box-sizing: border-box;
}

.paxEnglish .courseTextBox {
    justify-content: flex-start;
    padding: 0 50px 0 20px;
}

.paxEnglish .companySectionInBox,
.paxEnglish .courseSectionInBox {
    padding: 50px;
}

    .paxEnglish .companySectionInBox .companyTextBox,
    .paxEnglish .courseSectionInBox .courseTextBox {
        padding: 0 50px 0 0;
    }

.paxEnglish .companyTextTitle,
.paxEnglish .registrationTextTitle,
.paxEnglish .courseTextTitle,
.paxEnglish .refundTextTitle {
    margin-bottom: 50px;
    font-size: 36px;
    font-weight: bold;
    font-family: 'Noto Sans KR', sans-serif;
}

.paxEnglish .companySectionInBox .companyTextTitle {
    margin-bottom: 20px;
    font-size: 30px;
}

.paxEnglish .registrationTextTitle {
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Noto Sans KR', sans-serif;
}

.paxEnglish .courseTextTitle {
    margin-bottom: 0;
    padding: 10px 20px;
    font-size: 24px;
}

.paxEnglish .refundTextTitle {
    margin-bottom: 40px;
    font-size: 30px;
}

.paxEnglish .companyTextEx,
.paxEnglish .courseTextEx,
.paxEnglish .refundTextEx {
    line-height: 1.7;
    font-size: 16px;
}

.paxEnglish .companyTextEx2 {
    position: relative;
    line-height: 1.7;
    padding: 50px 20px;
    font-size: 15px;
    box-sizing: border-box;
}

.paxEnglish .courseTextSubTitle {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
}

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

    .paxEnglish.companyInBox,
    .paxEnglish.courseInBox {
        padding: 20px;
    }

    .paxEnglish .companyImgBox,
    .paxEnglish .cousreImgBox {
        width: 400px;
        height: 320px;
    }

    .paxEnglish .courseSectionBox {
        flex-direction: column;
    }

    .paxEnglish .courseImgBox {
        margin: 0 auto;
    }

    .paxEnglish .courseTextEx {
        margin-bottom: 50px;
    }

    .paxEnglish .companyTextBox,
    .paxEnglish .cousreTextBox {
        margin-top: 20px;
        padding: 0 30px;
    }

    .paxEnglish .companySectionInBox,
    .paxEnglish .courseSectionInBox {
        padding: 20px;
    }

    .paxEnglish .companySectionBox,
    .paxEnglish .companySectionInBox {
        flex-direction: column;
        align-items: center;
    }

        .paxEnglish .companySectionInBox .companyTextEx {
            margin-bottom: 20px;
        }

    .paxEnglish .threeSectionIconTitle {
        font-size: 20px;
    }

    .paxEnglish .threeSectionIconEx {
        font-size: 14px;
    }
}

@media screen and (max-width: 767px) {
    .paxEnglish ul.learnpiaStudyList {
        grid-template-columns: repeat(3, minmax(30%, 200px));
        gap: 20px;
    }

        .paxEnglish ul.learnpiaStudyList li {
            padding: 0;
        }

            .paxEnglish ul.learnpiaStudyList li .learnpiaStudyListBox {
                max-width: 200px;
                padding: 0;
            }

    .paxEnglish .learnpiaIconBox {
        width: 190px;
        height: 190px;
    }

    .paxEnglish .learnpiaIconInBox {
        margin-bottom: 20px;
    }

    .paxEnglish .learnpiaImgInBox {
        width: 190px;
        height: 190px;
    }

    .paxEnglish .learnpiaStudyBottomBox {
        padding: 20px 40px;
    }

    .paxEnglish .companySectionInBox {
        flex-direction: column;
        align-items: center;
    }

        .paxEnglish .companySectionInBox .companyTextBox {
            margin-top: 30px;
        }

        .paxEnglish .companySectionInBox .companyImgBox {
            margin-top: 50px;
        }

    .paxEnglish ul.threeSectionList {
        grid-template-columns: repeat(1, minmax(90%, auto));
    }

        .paxEnglish ul.threeSectionList li .threeSectionListBox {
            flex-direction: row;
        }

    .paxEnglish .threeSectionIconBox {
        max-width: 50%;
    }

    .paxEnglish .threeSectionTextBox {
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 50%;
        height: 100%;
    }
}

@media screen and (max-width: 680px) {
    .paxEnglish .contentStudyMainBox {
        padding: 10px;
    }

    .paxEnglish .learnpiaStudyBox {
        padding: 0;
    }

    .paxEnglish ul.learnpiaStudyList {
        grid-template-columns: repeat(1, minmax(90%, auto));
    }

        .paxEnglish ul.learnpiaStudyList li .learnpiaStudyListBox {
            max-width: 500px;
        }
}

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

    /*
    .paxEnglish ul.learnpiaStudyList {
        grid-template-columns: repeat(3, minmax(30%, 150px));
    }
	.paxEnglish ul.learnpiaStudyList li {
		height: 150px;
		padding: 0;
	}
	.paxEnglish ul.learnpiaStudyList li .learnpiaStudyListBox {
		position: absolute;
		max-width: 150px;
	}
	.paxEnglish ul.learnpiaStudyList li:nth-child(1) .learnpiaStudyListBox {
		left: 0;
	}
	.paxEnglish ul.learnpiaStudyList li:nth-child(3) .learnpiaStudyListBox {
		right: 0;
	}
	*/
    .paxEnglish .learnpiaIconBox {
        max-width: 150px;
        max-height: 150px;
    }

    .paxEnglish .learnpiaImgInBox {
        max-width: 150px;
        max-height: 150px;
    }

    .paxEnglish .learnpiaStudyBottomBox {
        padding: 20px;
    }

    .paxEnglish .companyTextTitle {
        font-size: 26px;
    }

    .paxEnglish .companyImgBox,
    .paxEnglish .courseImgBox,
    .paxEnglish .threeSectionIconBox {
        aspect-ratio: 5 / 4;
        width: 100%;
        height: auto;
    }

    .paxEnglish .companySectionInBox .companyImgBox {
        margin-top: 0;
    }

    .paxEnglish .companySectionInBox .companyTextBox {
        padding: 0;
    }

    .paxEnglish .courseTextBox {
        padding: 0 20px;
    }

    .paxEnglish ul.threeSectionList li .threeSectionListBox {
        flex-direction: column;
    }

    .paxEnglish .threeSectionIconBox {
        max-width: 100%;
    }

    .paxEnglish .threeSectionTextBox {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 460px) {
    .companyDirectorBox {
        flex-direction: column;
        line-height: 1.5;
        padding: 20px 0;
    }

        .companyDirectorBox span:first-child {
            font-size: 20px;
        }

        .companyDirectorBox span:last-child {
            font-size: 28px;
        }
}

@media (max-width: 420px) {
    .paxEnglish ul.learnpiaStudyList li {
        padding: 0;
    }

    /*
	.paxEnglish ul.learnpiaStudyList li .learnpiaStudyListBox {
		max-width: 120px;	
	}
	*/
    .paxEnglish .learnpiaIconBox {
        max-width: 120px;
        max-height: 120px;
    }

    .paxEnglish .learnpiaImgInBox {
        max-width: 120px;
        max-height: 120px;
    }

    .paxEnglish .learnpiaStudyBottomBox {
        padding: 20px;
    }

    .paxEnglish .sectionTitle {
        padding: 10px 0;
    }

    .paxEnglish .companyTextBox,
    .paxEnglish .cousreTextBox,
    .paxEnglish .refundTextBox {
        padding: 0;
    }

    .paxEnglish .companyTextEx2 {
        padding: 20px 0;
    }

    .companyDirectorBox span:last-child {
        margin-left: 0;
    }
}

/* ----- pamus ----- */
.pamus .learnpiaImgInBox img,
.pamus ul.learnpiaStudyList li:nth-child(2) .learnpiaImgInBox img,
.pamus ul.learnpiaStudyList li:nth-child(3) .learnpiaImgInBox img {
    max-width: 100%;
    margin: auto;
}

.pamus .learnpiaStudyTitle {
    height: 72px;
    margin-bottom: 50px;
    font-size: 38px;
    font-weight: bold;
    color: #000;
    font-family: 'Noto Sans KR', sans-serif;
}

.pamus .learnpiaStudyBottomBox {
    margin-top: 50px;
    text-align: center;
}

    .pamus .learnpiaStudyBottomBox span {
        display: block;
        line-height: 1.8;
        font-size: 18px;
        color: #2d2d2d;
    }

.pamus .companyImgBox,
.pamus .courseImgBox {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 400px;
    overflow: hidden;
}

.pamus .courseImgBox {
    align-items: flex-start;
    margin-left: auto;
}

.pamus .companyImgBox {
    background-color: #f9f9f9;
}

.pamus .companyTextBox,
.pamus .courseTextBox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 50px;
    box-sizing: border-box;
}

.pamus .companyTextEx,
.pamus .courseTextEx,
.pamus .refundTextEx {
    line-height: 1.7;
    font-size: 16px;
}

.pamus .companyTextTitle,
.pamus .registrationTextTitle,
.pamus .courseTextTitle,
.pamus .refundTextTitle {
    margin-bottom: 50px;
    font-size: 36px;
    font-weight: bold;
    font-family: 'Noto Sans KR', sans-serif;
}

.pamus .companySectionInBox,
.pamus .courseSectionInBox {
    padding: 50px;
}

.pamus .courseTextTitle {
    margin-bottom: 20px;
    font-size: 30px;
}

.pamus .courseTextBox {
    padding: 0 50px 0 20px;
}

.pamus .courseSectionBox {
    align-items: flex-start;
}

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

    .pamus.companyInBox,
    .pamus.courseInBox {
        padding: 20px;
    }

    .pamus .companyImgBox,
    .pamus .cousreImgBox {
        width: 400px;
        height: 320px;
    }

    .pamus .courseSectionBox {
        flex-direction: column;
    }

    .pamus .courseImgBox {
        margin: 0 auto;
    }

    .pamus .courseTextEx {
        margin-bottom: 50px;
    }

    .pamus .companyTextBox,
    .pamus .cousreTextBox {
        margin-top: 20px;
        padding: 0 30px;
    }

    .pamus .companySectionInBox,
    .pamus .courseSectionInBox {
        padding: 20px;
    }

    .pamus .companySectionBox,
    .pamus .companySectionInBox {
        flex-direction: column;
        align-items: center;
    }

        .pamus .companySectionInBox .companyTextEx {
            margin-bottom: 20px;
        }

    .pamus .threeSectionIconTitle {
        font-size: 20px;
    }

    .pamus .threeSectionIconEx {
        font-size: 14px;
    }
}

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

    .pamus.companyInBox,
    .pamus.courseInBox {
        padding: 20px;
    }

    .pamus .companyImgBox,
    .pamus .cousreImgBox {
        width: 400px;
        height: 320px;
    }

    .pamus .courseSectionBox {
        flex-direction: column;
    }

    .pamus .courseImgBox {
        margin: 0 auto;
    }

    .pamus .courseTextEx {
        margin-bottom: 50px;
    }

    .pamus .companyTextBox,
    .pamus .cousreTextBox {
        margin-top: 20px;
        padding: 0 30px;
    }

    .pamus .companySectionInBox,
    .pamus .courseSectionInBox {
        padding: 20px;
    }

    .pamus .companySectionBox,
    .pamus .companySectionInBox {
        flex-direction: column;
        align-items: center;
    }

        .pamus .companySectionInBox .companyTextEx {
            margin-bottom: 20px;
        }

    .pamus .threeSectionIconTitle {
        font-size: 20px;
    }

    .pamus .threeSectionIconEx {
        font-size: 14px;
    }
}

@media screen and (max-width: 767px) {
    .pamus ul.learnpiaStudyList {
        grid-template-columns: repeat(3, minmax(30%, 200px));
        gap: 20px;
    }

        .pamus ul.learnpiaStudyList li {
            padding: 0;
        }

            .pamus ul.learnpiaStudyList li .learnpiaStudyListBox {
                max-width: 200px;
                padding: 0;
            }

    .pamus .learnpiaIconBox {
        width: 190px;
        height: 190px;
    }

    .pamus .learnpiaIconInBox {
        margin-bottom: 20px;
    }

    .pamus .learnpiaImgInBox {
        width: 190px;
        height: 190px;
    }

    .pamus .learnpiaStudyBottomBox {
        padding: 20px 40px;
    }

    .pamus .companySectionInBox {
        flex-direction: column;
        align-items: center;
    }

        .pamus .companySectionInBox .companyTextBox {
            margin-top: 30px;
        }

        .pamus .companySectionInBox .companyImgBox {
            margin-top: 50px;
        }

    .pamus ul.threeSectionList {
        grid-template-columns: repeat(1, minmax(90%, auto));
    }

        .pamus ul.threeSectionList li .threeSectionListBox {
            flex-direction: row;
        }

    .pamus .threeSectionIconBox {
        max-width: 50%;
    }

    .pamus .threeSectionTextBox {
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 50%;
        height: 100%;
    }
}

@media screen and (max-width: 680px) {
    .pamus .contentStudyMainBox {
        padding: 10px;
    }

    .pamus .learnpiaStudyBox {
        padding: 0;
    }

    .pamus ul.learnpiaStudyList {
        grid-template-columns: repeat(1, minmax(90%, auto));
    }

        .pamus ul.learnpiaStudyList li .learnpiaStudyListBox {
            max-width: 500px;
        }
}

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

    /*
    .paxEnglish ul.learnpiaStudyList {
        grid-template-columns: repeat(3, minmax(30%, 150px));
    }
	.paxEnglish ul.learnpiaStudyList li {
		height: 150px;
		padding: 0;
	}
	.paxEnglish ul.learnpiaStudyList li .learnpiaStudyListBox {
		position: absolute;
		max-width: 150px;
	}
	.paxEnglish ul.learnpiaStudyList li:nth-child(1) .learnpiaStudyListBox {
		left: 0;
	}
	.paxEnglish ul.learnpiaStudyList li:nth-child(3) .learnpiaStudyListBox {
		right: 0;
	}
	*/
    .pamus .learnpiaIconBox {
        max-width: 150px;
        max-height: 150px;
    }

    .pamus .learnpiaImgInBox {
        max-width: 150px;
        max-height: 150px;
    }

    .pamus .learnpiaStudyBottomBox {
        padding: 20px;
    }

    .pamus .companyTextTitle {
        font-size: 26px;
    }

    .pamus .companyImgBox,
    .pamus .courseImgBox,
    .pamus .threeSectionIconBox {
        aspect-ratio: 5 / 4;
        width: 100%;
        height: auto;
    }

    .pamus .companySectionInBox .companyImgBox {
        margin-top: 0;
    }

    .pamus .companySectionInBox .companyTextBox {
        padding: 0;
    }

    .pamus .courseTextBox {
        padding: 0 20px;
    }

    .pamus ul.threeSectionList li .threeSectionListBox {
        flex-direction: column;
    }

    .pamus .threeSectionIconBox {
        max-width: 100%;
    }

    .pamus .threeSectionTextBox {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 420px) {
    .pamus ul.learnpiaStudyList li {
        padding: 0;
    }

    /*
	.paxEnglish ul.learnpiaStudyList li .learnpiaStudyListBox {
		max-width: 120px;	
	}
	*/
    .pamus .learnpiaIconBox {
        max-width: 120px;
        max-height: 120px;
    }

    .pamus .learnpiaImgInBox {
        max-width: 120px;
        max-height: 120px;
    }

    .pamus .learnpiaStudyBottomBox {
        padding: 20px;
    }

    .pamus .sectionTitle {
        padding: 10px 0;
    }

    .pamus .companyTextBox,
    .pamus .cousreTextBox,
    .pamus .refundTextBox {
        padding: 0;
    }

    .pamus .companyTextEx2 {
        padding: 20px 0;
    }

    .companyDirectorBox span:last-child {
        margin-left: 0;
    }
}


/* 메인 롤링 */
.pc {
    display: block;
}

.mobile {
    display: none;
}

@media all and (max-width: 479px) {
    .pc {
        display: none;
    }

    .mobile {
        display: block;
    }
}

/* slick slider 수정 */
.slick_wrap {
    width: 100%;
    height: 100%;
    /* background-color: #ccc; */
}

    .slick_wrap .slick_slider_div {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .slick_wrap .slick-next,
    .slick_wrap .slick-prev {
        display: none !important;
    }

    .slick_wrap .slick_slider_div .slick-dots {
        left: 50%;
        bottom: 120px;
        display: flex;
        width: 550px;
        background-color: rgba(255, 255, 255, .5);
        transform: translate(-50%, 0);
    }

        .slick_wrap .slick_slider_div .slick-dots li {
            width: calc(100% / 3);
            margin: 0 3px;
            line-height: 52px;
            height: 52px;
        }

            .slick_wrap .slick_slider_div .slick-dots li a {
                display: block;
                /* color: #fff; */
                background-color: #f9f9f9;
                border: 1px solid #dedede;
                border-radius: 100px;
                transition: all .3s;
                text-decoration: none;
                color: #2d2d2d;
                font-weight: bold;
                cursor: pointer;
            }

            .slick_wrap .slick_slider_div .slick-dots li.slick-active a {
                background-color: #208fe4;
                color: #fff;
                border-radius: 100px;
            }

    .slick_wrap .slick_card {
        height: calc(100% - 350px);
        /* text-align: center; */
        /* line-height: 300px; */
        background-color: #fff;
    }

.dotCustomBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 52px;
    font-size: 18px;
    border-radius: 100px;
}

/* 메인 동영상 백그라운드 재생 */
.backgroundBox {
    position: relative !important;
}

@media all and (max-width: 1024px) {
    .slick_wrap {
        width: 100%;
        height: auto;
    }

        .slick_wrap .slick_slider_div .slick-dots {
            bottom: none;
            transform: translate(-50%, 0);
        }

    .contentStudyMainBox {
        width: 100%;
    }

    .learnpiaStudyBox {
        width: 100%;
        height: auto;
        /* padding-bottom: 100px; */
        padding: 20px 0;
        background-color: #fff;
    }

    .learnpiaStudyListBox {
        padding: 20px;
    }

    .learnpiaStudyTextBox {
        width: calc(100% - 250px);
        margin-left: auto;
    }

    .learnpiaCopyTitle {
        margin-top: 10px;
        font-size: 42px;
    }

    .learnpiaCopyExBox {
        margin-top: 15px;
        font-size: 22px;
    }

    .slick_wrap .slick_slider_div .slick-dots {
        bottom: -62px;
    }
}

@media all and (max-width: 768px) {
    .learnpiaStudyListBox {
        flex-direction: column;
        align-items: center;
    }

    .learnpiaStudyTextBox {
        width: 100%;
        margin-top: 20px;
        margin-left: 0;
    }

    .learnpiaIconTitle {
        text-align: center;
    }

    .learnpiaCopyTitle {
        font-size: 36px;
    }

    .learnpiaCopyExBox {
        font-size: 18px;
    }

    ul.learnpiaStudyInList li {
        font-size: 14px;
    }

    .slick_wrap .slick_slider_div .slick-dots {
        width: auto;
        bottom: -15px;
    }

        .slick_wrap .slick_slider_div .slick-dots li {
            width: auto;
        }

    .dotCustomBox {
        text-indent: -9999px;
        width: 10px;
        height: 10px;
    }

    .slick_wrap .slick_slider_div .slick-dots li {
        height: 10px;
        line-height: 10px;
    }

        .slick_wrap .slick_slider_div .slick-dots li a {
            background-color: #f0f0f0;
            border: none;
        }
}

@media all and (max-width: 420px) {
    .learnpiaIconBox {
        width: 200px;
        height: 200px;
    }

    .learnpiaImgInBox {
        width: 200px;
        height: 200px;
    }

    .learnpiaIconTitle {
        font-size: 16px;
    }

    .learnpiaCopyTitle {
        font-size: 24px;
    }

    .learnpiaCopyExBox {
        font-size: 14px;
    }

    ul.learnpiaStudyInList li {
        font-size: 12px;
    }

    /*
	.learnpiaStudyBox {
		padding-bottom: 50px;
	}
	*/
}

.ui-datepicker {
    z-index: 99 !important;
}






/* //////////////////////////////////////////////////
  noh design (202408 ~  ) 
  ///////////////////////////////////////////////////////*/
.bottomFooterInfoBtnpc {
    display: none;
}


/* E&I 메인 페이지 두번째 section  (240807) */
.eni-page02-slide {
    width: 100%;
    height: 100%;
    position: relative;
}

    .eni-page02-slide .slide01,
    .eni-page02-slide .slide02,
    .eni-page02-slide .slide03 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .eni-page02-slide .swiper-slide img {
        margin-top: -113px;
        height: auto;
        width: fit-content;
    }

    .eni-page02-slide .slide01 {
        background: url(/Contents/images/design/main-p2-slide-bg01.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .eni-page02-slide .slide02 {
        background: url(/Contents/images/design/main-p2-slide-bg01.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .eni-page02-slide .slide03 {
        background: url(/Contents/images/design/main-p2-slide-bg02.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

.sld-ft {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

    .sld-ft img {
    }

        .sld-ft img span {
            display: block;
            width: 100%;
            font-size: 1rem;
        }

.logo-text {
    position: absolute;
    bottom: 89px;
    width: 100%;
    text-align: center;
    z-index: 12;
}

.mobile-xlg,
.mobile-lg,
.mobile-md {
    display: none !important;
}

.pc-xlg,
.pc-lg,
.pc-md {
    display: block !important;
}


@media (max-width: 1250px) {
    .mobile-xlg {
        display: block !important;
    }

    .pc-xlg {
        display: none !important;
    }

    .eni-page02-slide .slide01,
    .eni-page02-slide .slide02,
    .eni-page02-slide .slide03 {
        padding: 80px;
    }
}

@media (max-width: 1023px) {
    .pc-only {
        display: none !important;
    }

    .mobile-lg {
        display: block !important;
    }

    .pc-lg {
        display: none !important;
    }

    .eni-page02-slide {
        width: 100%;
        height: 600px;
        position: relative;
    }

    /* .eni-page02-slide .swiper-slide img {margin-top: -113px;} */
    .logo-text {
        bottom: 25px;
    }
}

@media (max-width: 767px) {
    .mobile-md {
        display: block !important;
    }

    .pc-md {
        display: none !important;
    }

    .logo-text {
        bottom: 36px;
    }

        .logo-text img {
            height: 59px;
        }

    .eni-page02-slide .slide01,
    .eni-page02-slide .slide02,
    .eni-page02-slide .slide03 {
        padding: 50px;
    }

    .eni-page02-slide {
        height: 650px;
    }

        .eni-page02-slide .swiper-button-prev,
        .eni-page02-slide .swiper-button-next {
            display: none;
        }

        .eni-page02-slide .swiper-slide img {
            margin-top: -1px;
        }
}

@media (max-width: 420px) {
    .eni-page02-slide {
        height: 430px;
    }

        .eni-page02-slide .slide01,
        .eni-page02-slide .slide02,
        .eni-page02-slide .slide03 {
            padding: 26px;
        }
}



/* // E&I 메인 페이지 두번째 section */



/*------------------------------- 
김기호영어학원 학원소개 
-------------------------------*/

.ky--about--intro {
    position: relative;
}

    .ky--about--intro .row.r1 {
        flex-direction: column;
        font-size: 17px;
        height: 100%;
        margin: 0;
    }

    .ky--about--intro .contents {
        padding: 0 0 0 30%;
        line-height: 150%;
    }

    .ky--about--intro .t1 {
        display: flex;
        color: #222;
        padding-top: 60px;
        padding-bottom: 20px;
        align-items: center;
    }

        .ky--about--intro .t1 h3 {
            font-size: 18px;
            font-weight: 700;
            color: #222;
            line-height: 150%;
        }

    .ky--about--intro .t2 {
        position: relative;
        background: #6e1a2b;
        color: #fff !important;
        padding-top: 30px;
        padding-bottom: 30px;
    }

        .ky--about--intro .t2 em {
            margin-right: 10px;
        }

        .ky--about--intro .t2 li {
            font-size: 22px;
            font-weight: 300;
            line-height: 150%;
        }

        .ky--about--intro .t2 .ceo-img01 {
            position: absolute;
            bottom: 0;
            margin-left: 5%;
            width: 20%;
            _border: 1px solid red;
        }

    .ky--about--intro .t3 {
        display: flex;
        color: #222;
        padding-top: 20px;
        padding-bottom: 50px;
        background: #eee;
    }

        .ky--about--intro .t3 strong {
            color: #6e1a2b;
        }


@media (max-width: 1250px) {
}
/* [END] max-width: 1250px */

@media (max-width: 1023px) {
}
/* [END] max-width: 1023px */

@media (max-width: 767px) {
    .ky--about--intro {
        padding-top: 11px;
    }

        .ky--about--intro .t1 {
            padding: 20px 0px 0 0;
        }

            .ky--about--intro .t1 .contents {
                padding: 0 0px 25px 130px;
                font-size: 14px;
            }

        .ky--about--intro .t2 {
            padding-top: 25px;
            padding-bottom: 14px;
        }

            .ky--about--intro .t2 .contents {
                padding: 0 0px;
            }

            .ky--about--intro .t2 li {
                font-size: 15px;
                line-height: 150%;
                margin-bottom: 10px;
            }

            .ky--about--intro .t2 .ceo-img01 {
                top: -99px;
                bottom: inherit;
                margin-left: 0;
                width: 100px;
            }

        .ky--about--intro .t3 .contents {
            padding: 0;
            font-size: 14px;
        }
}
/* [END] max-width: 767px */

@media (max-width: 420px) {
}
/* [END] max-width: 420px */

/* // -------------------------------김기호영어학원 학원소개------------------------------- */



/* -------------------------------
김기호영어학원 교육과정 
----------------------------------*/
.ky--eduCourse--eduCourse1 {
    position: relative;
    display: flex;
    width: 100%;
}

    .ky--eduCourse--eduCourse1 .row {
        width: 100%;
        height: 100%;
        font-size: 17px;
        height: 100%;
        margin: 0;
    }

        .ky--eduCourse--eduCourse1 .row > .left {
            position: relative;
            width: 268px;
            min-height: 500px;
            background: url(/UPF/Board_Img/bgkkheducs01.jpg) no-repeat;
            background-position: center bottom;
            background-size: cover;
            padding: 20px;
            color: #000;
            font-size: 20px;
        }

            .ky--eduCourse--eduCourse1 .row > .left span {
                color: #6d1828;
            }

.ky-img01 {
    position: absolute;
    bottom: 0;
}

    .ky-img01 .img-text01 {
        text-align: center;
        margin-bottom: 20px;
        display: block;
    }

.ky--eduCourse--eduCourse1 .row .right {
    display: flex;
    padding: 0;
}

    .ky--eduCourse--eduCourse1 .row .right .col-lg {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 0;
        color: #fff;
    }

        .ky--eduCourse--eduCourse1 .row .right .col-lg span {
            display: block;
            background: #eee;
            width: 100%;
            text-align: center;
            padding: 30px 10px;
            font-size: 28px;
            color: #fff;
            background: rgba(0,0,0, .15);
        }

.cos1 {
    background: #00b2b0;
}

.cos2 {
    background: #1197be;
}

.cos3 {
    background: #1b7eca;
}

.cos4 {
    background: #1b5da6;
}

.ky--eduCourse--eduCourse1 .row .right .col-lg ul {
    padding: 30px 20px 0 30px;
}

    .ky--eduCourse--eduCourse1 .row .right .col-lg ul li {
        font-size: 18px;
        margin-bottom: 10px;
        list-style: disc;
        margin-left: 10px;
        border-bottom: 1px dotted rgba(255,255,255, .4);
        padding-bottom: 8px;
        line-height: 150%;
    }

        .ky--eduCourse--eduCourse1 .row .right .col-lg ul li:last-child {
            list-style: none;
            border-bottom: none;
        }

.deco-no {
    position: absolute;
    right: -10px;
    bottom: -30px;
    font-size: 150px;
    opacity: .1;
}

@media (max-width: 1250px) {
}
/* [END] max-width: 1250px */

@media (max-width: 1023px) {
    .ky--eduCourse--eduCourse1 .row > .left {
        min-height: 422px;
        width: 220px;
        font-size: 18px;
    }

    .ky--eduCourse--eduCourse1 .row .right .col-lg ul li {
        font-size: 14px;
    }

    .ky--eduCourse--eduCourse1 .row .right .col-lg ul {
        padding: 30px 20px 0 13px;
    }
}
/* [END] max-width: 1023px */

@media (max-width:991px) {
    .ky--eduCourse--eduCourse1 .row > .left {
        width: 190px;
    }

    .ky--eduCourse--eduCourse1 .row .right .col-lg {
        flex-direction: row;
    }

        .ky--eduCourse--eduCourse1 .row .right .col-lg span {
            width: 100px;
            padding: 21px 0px;
            font-size: 22px;
        }

        .ky--eduCourse--eduCourse1 .row .right .col-lg ul {
            padding: 17px 4px 8px 22px;
            width: 100%;
        }

            .ky--eduCourse--eduCourse1 .row .right .col-lg ul li br {
                display: none;
            }
}
/* [END] max-width: 991px */

@media (max-width: 767px) {
    .ky--eduCourse--eduCourse1 .row {
        width: 100%;
        font-size: 17px;
        height: 100%;
        margin: 0;
        flex-direction: column;
    }

        .ky--eduCourse--eduCourse1 .row > .left {
            display: flex;
            flex-direction: row;
            flex: 1 0 0%;
            width: 100% !important;
            min-height: 180px;
        }

    .ky-img01 {
        position: absolute;
        bottom: 0;
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding-right: 40px;
        align-items: center;
    }

        .ky-img01 .text {
            display: flex;
            width: 100%;
            justify-content: center;
        }

        .ky-img01 .img-text01 {
            text-align: left;
            margin-bottom: 20px;
            display: block;
        }

            .ky-img01 .img-text01 .pc {
                display: none;
            }

        .ky-img01 img {
            width: 100px !important;
        }

    .deco-no {
        right: -10px;
        top: 0;
        bottom: inherit;
        font-size: 80px;
        opacity: .05;
    }
}
/* [END] max-width: 767px */

@media (max-width: 420px) {
}
/* [END] max-width: 420px */


/* //-------------------------------김기호영어학원 교육과정------------------------------- */


/* -------------------------------
김기호영어학원 메인 2페이지
----------------------------------*/
.kkh-main-page02 {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background: url(/UPF/Board_Img/kkh_main02_bg.jpg) no-repeat;
    background-position: center bottom;
    background-size: cover;
    padding: 30px;
}

    .kkh-main-page02 > .row {
        gap: 30px;
    }


@media (max-width: 1250px) {
}
/* [END] max-width: 1250px */

@media (max-width: 1023px) {
}
/* [END] max-width: 1023px */

@media (max-width:991px) {
}
/* [END] max-width: 991px */

@media (max-width: 767px) {
}
/* [END] max-width: 767px */

@media (max-width: 420px) {
}
/* [END] max-width: 420px */

/* //-------------------------------김기호영어학원 메인 2페이지------------------------------- */


/* -------------------------------
김기호영어학원 메인 1페이지
----------------------------------*/






@media (max-width: 1250px) {
}
/* [END] max-width: 1250px */

@media (max-width: 1023px) {
}
/* [END] max-width: 1023px */

@media (max-width:991px) {
}
/* [END] max-width: 991px */

@media (max-width: 767px) {
}
/* [END] max-width: 767px */

@media (max-width: 420px) {
}
/* [END] max-width: 420px */

/* //-------------------------------김기호영어학원 메인 1페이지------------------------------- */



/* footer 수정 [20250213] */
.footer-ad-phone {
  display: flex;
  flex-direction: row;
  padding: 9px 0 19px 0;
}
.footer-ad-phone i {
  font-size: 20px;
  margin-right: 7px;
}
.footer-c-info {

}
.footer-c-info span {
  width: auto;
}
.ft-addr {color: #eee;}
.ft-callnum {color: #eee;}

.footerLogoBox {
  padding: 0 20px;
}

@media (min-width: 768px) {
  .copyright span {margin-left: 0px;}

}

/* //footer 수정 [20250213] */


/* 특강신청 */
.spl-Title {
  position: relative;
  display: flex;
  align-items: center;
  height: 35px;
  padding-left: 18px;
  font-size: 15px;
  color: #fff;
  background-color: #4d5053;
  border-radius: 2px 2px 0 0;
  box-sizing: border-box;
}
.btn-defult {
  background: #606979;
  color: #fff;
  font-size: 14px;
  padding: 3px 15px;
  border: 0;
}
.btn-defult-cancel {
  background: #c13434;
  color: #fff;
  font-size: 14px;
  padding: 3px 15px;
  border: 0;
}
.btn-order {
  background: #444c5a;
  color: #fff;
  font-size: 14px;
  padding: 3px 15px;
  border: 0;

}

.btn-defult:hover {color: #fff;}
.btn-defult-cancel:hover {color: #fff;}
.btn-order:hover {color: #fff;}

.class-info {
  margin: 13px 0 0 23px;
  color: #222;
}
.class-info ul {}
.class-info li {
  line-height: 1.5;
  list-style: disc;
  font-size: 16px;
  margin-bottom: 6px;
}
.class-info li span {
  display: inline-block;
  margin-right: 8px;
  min-width: 66px;
}
.view-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #eee;
  height: 100%;
  min-width: 400px;
  min-height: 300px;
}

.view-box-modal .modal-header {
  padding: 9px 17px;
  border-bottom: 1px solid #3d4757;
  background: #556073;
}

.view-box-modal .modal-header .modal-title {
  color: #fff;
  font-weight: 600;
}
.view-box-modal .modal-header .btn-close {
  filter: brightness(100%) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(213deg) brightness(109%) contrast(100%);
  opacity: 1;
}


/* //특강신청 */