/* header */
.mainNavBtn{position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;}

/* .mainNavBtn svg{width: 16px; height: 16px;} */
.navtop{background-color: var(--disable-color);}
/* main navigation */

/* .subcontain{max-width: 600px;} */
/*
.mainNav .navigation{-ms-overflow-style: none;scrollbar-width: none;}
.mainNav .navigation::-webkit-scrollbar {display: none;}
*/


.mainNav li a svg{height: 19px;}
.headerTop{padding: 0px 10px;}
.pageDirection{
    display: flex;
    list-style: none; padding: 0; margin: 0;
}
.pageDirection svg{width: 20px;}
.pageDirection li{display: flex; align-items: center;}
.pageDirection li:first-child a{background-color: var(--second-color); padding: 1px 4px; border-radius: 4px;}
.pageDirection li:not(:last-child){margin-right: 10px;}
.pageDirection li:not(:last-child)::after{content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-style: solid;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-top-color: var(--content-color);
    border-right-color: var(--content-color);
    border-width: 1px;
    transform: rotate(45deg);
}

@media (min-width: 769px) {
    header{height: 60px;}
    .header{height: 60px; justify-content: center;}
    .pageDirection{position: absolute; left: 10px; top: 10px; justify-content: center; height: 40px;}
}
@media (max-width: 768px) {
    header{height: 90px;}
    .header{height: 90px;}

}



.navtop{height: 60px; border-bottom: 1px solid var(--second-color);}
.mainNav{
    position: fixed; right: -100%; top: 0; bottom: 0;
    max-width: 320px;
    background-color: var(--disable-color); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: .3s;
}
.mainNav.active{right: 0;}
.mainNav .navigation{display:block; padding: 15px 2px; overflow-y:scroll; height: calc(100% - 60px);}
.mainNav ul li{font-size:16px; border-bottom:1px solid #eee; text-align: left;}
.mainNav li a{padding: 8px 4px;}


@media (min-width: 769px){
    /*
    
    .mainNavBtn{display: none;}
    .navigation{height: 40px;}
    .navigation li{padding: 0 4px;}
    .navigation li:first-child{margin-left: 5px;}
    .navigation li:last-child{margin-right: 5px;}
    .mainNav li a{padding: 4px 8px;}
    */
}
@media (max-width: 768px) {
    
}


.mainNav li a{
    display: flex; align-items: center;
    /*background-color: #eef9ff; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);*/
}
.mainNav li.active a{color: var(--bg-color); background-color: var(--first-color);}

.mainVisual{
    position: relative; width: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.mainVisual .mvbg{
    position: relative;
    width: 100%; max-width: 600px; margin: 10px auto 0;
    background-size: contain; background-position: center; background-repeat: no-repeat;
}
.mainVisual .mvbg>div{width: 100%; height: 0; padding-bottom: 60%;}
.mainVisual .mvwrap{z-index: 2;}
.mainVisual h1{
    font-size: 2em; font-weight: 700; text-align: center;
    color: var(--second-color);
}
.mainVisual .mainSlide .slidePrev,.mainVisual .mainSlide .slideNext{
    position: absolute;bottom: 10px; z-index: 10; width: 1px; height: 1px;
    border-top-width: 10px; border-bottom-width: 10px; border-left-width: 14px; border-right-width: 14px; border-style: solid; border-color: transparent;
    cursor: pointer;
}
.mainVisual .mainSlide .slidePrev{border-right-color: var(--second-color); right: calc(50% + 5px);}
.mainVisual .mainSlide .slideNext{border-left-color: var(--second-color); left: calc(50% + 5px);}
.mainVisual .mainSlide li{
    display: flex; flex-direction: column; justify-content: space-around; align-items: center;
    padding: 10px 20px 40px; background-color: #30343a;
}
.mainVisual .mainSlide li::before{content: '';}
.mainVisual .txtbox{color: var(--bg-color); text-align: center;}
.mainVisual .who{font-size: .9em; color: var(--second-color);}
.mainVisual .who::before,
.mainVisual .who::after{content: '-'; display: inline-block; width: 6px; color: var(--bg-color);}
.mainVisual .txtbox p{margin-bottom: 10px;}
.cardwrap{max-width: 900px; padding-top: 20px; padding-bottom: 40px; margin: 0 auto;}
.cardwrap>.cardSlide .swiper-slide{padding: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); border-radius: 8px;}
.cardwrap>.cardSlide .swiper-slide>div{
    width: 100%; height: 0; padding-bottom: 100%; border-radius: 4px; overflow: hidden;
    background-size: cover; background-position: center; background-color: var(--disable-color);
}
@media (max-width: 990px){
    .cardwrap{padding-top: 10px; padding-bottom: 20px;}
    .cardwrap>.cardSlide .swiper-slide{max-width:90%;}
}
.case{background-color: #eef9ff;}
.case ul{padding: 0; margin: 40px 0;}
.case li{
    position: relative; display: block; max-width: 460px; margin:0 auto -20px;
}
.case li:nth-child(odd){padding-left: 6%;}
.case li:nth-child(even){padding-right: 6%;}
.case li:last-child{margin-bottom: 10px;}
.case li>div{
    width: 100%;
    padding: 40px 20px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    background-color: var(--bg-color);
}
.case li p{margin-bottom: 10px;}
@media (min-width: 769px){}
@media (max-width: 768px){.case li p{font-size: 14px;}}

.tutorList{max-width: 600px; width: 100%; padding: 4px 10px 6px; margin-bottom: 40px;}
.tutorList>li{margin-left: 10px;}
.tutorList>li:first-child{margin-left: 0;}
.tutorList>li>div{border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); width: 160px; overflow: hidden; background-color: var(--bg-color);}
.tutorList img{}
.tutorList h3{padding: 10px 20px; text-align: center; background-color: var(--disable-color);}

.learn{background-color: var(--disable-color);}
.learn ul{padding: 0; margin: 0 auto 40px; list-style: none; max-width: 900px;}
.learn li{
    /* padding: 10px; background-color: var(--bg-color); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); border-radius: 8px; overflow: hidden; */
    padding-top: 20px;
}
.learn li h3{
    display: block; padding: 0; margin-bottom: 10px;
    color: var(--accent-color);
    font-size: 20px; font-weight: 600;
}
.learn li>div{
    /* background-color: var(--disable-color); padding: 10px; border-radius: 8px; */
}
.learn li dl{
    position: relative; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--second-color);
}
/* .learn li dl:last-child{border-bottom: none;} */
/* .learn li dt{position: absolute; width: 60px; left: 0; top: 10px;} */
.learn li dd{margin: 0;}
.learn strong{display: block; text-align: center; margin-top: 20px; color: var(--strong-color); margin-bottom: 40px;}

.engTestSchedule .mTable td::before{float: none; display: block;}
.engTestDescription p{
    border-bottom:1px solid #eee; padding:10px 0; font-size: 14px;
}
.engTestDescription p:last-child{border-bottom: none;}
.tableBtm{text-align: center; border-radius: 0 0 8px 8px;}
.tableBtm .btn-link{width: 100%; max-width: 360px; height: 40px; justify-content: center;}

@media (min-width: 769px){
    /* .learn li dl{font-size: 14px;} */
    /* .learn li dd{margin-left: 70px;} */
}
@media (max-width: 768px){
    /* .learn li dl{font-size: 14px;} */
    /* .learn li dd{margin-left: 60px;}     */
}


.lecture ul{list-style: none;}
.lecList{padding: 0; margin: 0 auto; max-width: 900px; margin-bottom: 10px;}
.lecList>li{
    position: relative;
    padding: 10px; margin-bottom: 10px; border-radius: 8px; border: 1px solid var(--second-color);
    background-color: var(--disable-color);
}

.lecList>li::after{display: block; content: ''; clear: both;}

.lecthumb{min-width: 120px; position: relative; margin-bottom: 6px;}
.lecthumb .aspectRatio{padding-bottom: 65%; background-size: cover; background-position: center; overflow: hidden; border-radius: 8px;}
.lecthumb img{width: 100%; height: 100%; object-fit: cover;overflow: hidden; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);}
.lecInfo{font-size: 14px;}
.lecTit{display: flex; align-items: center; font-weight: 600; margin-bottom: 6px;}
.shareBtn{box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);}
.shareBtn svg{width: 16px;}
.lecBadge{margin: 0; padding: 0;}
.lecBadge li{position: relative; padding-left: 90px; margin-bottom: 4px; font-weight: 500;}
.lecBadge li p{padding: 4px 0; line-height: 16px; font-size: 14px;}
.lecBadge .badge{position: absolute; left: 0; top: 0px;}
.lecBadge .badge svg{width: 16px; margin-right: 4px;}
.lecScript{margin-top: 6px;}
.lecBtn{display: flex; gap:4px;}
.lecBtn>*{flex: 1; justify-content: center; height: 40px; padding: 0;}
@media (max-width: 560px) {
    .lecList>li{max-width: 360px; margin-left: auto; margin-right: auto;}
    .lecBtn{margin-top: 6px;}
}
@media (max-width: 768px) {
    .lecTit{font-size: 16px;}
    @media (min-width: 561px){
        .lecList{display: flex; flex-wrap: wrap;}
        .lecList>li{width: 49%; padding-bottom: 60px;}
        .lecList>li:nth-child(odd){margin-right: 2%;}
        .lecBtn{position: absolute; left: 10px; right: 10px; bottom: 10px;}
    }
}
@media (min-width: 769px){
    .lecList>li{display: grid; grid-template-columns: 25% 75%;}
    
    .lecInfo{grid-column: 2; grid-row: 1 / span 2; padding-left: 8px;}
    .lecTit{font-size: 20px;}
}


.mTable {
    margin-top:0.5em;
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
}

.mTable th, .mTable td {
    padding: 10px;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px solid var(--second-color);
}

.mTable thead {
    background-color: var(--disable-color);
    
}


@media (min-width: 769px){
    .mTable {
        /* box-shadow: 0 0 10px rgba(0,0,0,.2); */
        border-radius: 8px 8px 0 0;
    }
    .mTable tbody tr {
        border-left: 1px solid var(--second-color);
        border-right: 1px solid var(--second-color);
    }
}

@media all and (max-width: 768px) {
    .mTable caption {font-size: 1em;}
    .mTable {border: 0;}
    .mTable thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .mTable th {display: block;}
    .mTable tr {
        border-radius: 8px;
        display: block;
        margin-bottom: .625em;
        background-color: var(--disable-color);
        padding: 6px;
    }

    .mTable td {
        border-bottom: 1px solid var(--second-color);
        display: block;
        text-align: left;
        padding-left: 0; padding-right: 0;
    }

    .mTable td::before {
        content: attr(data-label); /*data-label을 가상요소 표출*/
        float: left;
        min-width: 50px;
        margin-right: 10px;
        font-weight: bold;
        text-transform: uppercase;
    }

    .mTable td:last-child {
        border-bottom: 0;
    }
}


aside{ min-height: 80px;}
aside .consulSwitch{height: 1px;}
aside .consulPanel{ width: 100%;
}
aside .consulPanel .btn{width: 100%; justify-content: center; height: 50px; font-size: 16px; font-family: 'Pretentard';}
aside .consulPanel.fixed{position: fixed; bottom: 0; z-index: 100;}
aside .consulPanel.relative{position: relative; margin-bottom: 20px;}
aside .consulPanel>div{
    display: flex; align-items: center; gap: 6px;
    width: 100%; max-width: 920px; height: 80px;
    background-color: var(--bg-color);
    padding: 0px 19px; margin: 0 auto; border-radius: 12px 12px 0 0; transition: .3s;
}
aside .consulPanel.fixed>div{box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }