@charset "utf-8";
/* ------------------------------------------ */
/* font system guide */
@import url('https://webfontworld.github.io/onestore/OneMobile.css');
@import url('https://font.elice.io/css?family=Elice+DX+Neolli');
@import url('https://fonts.googleapis.com/css2?family=Grandiflora+One&display=swap');

.h1-t{
    font-family: Elice DX Neolli !important;
    font-size: 5.6rem;
    font-weight: bold;
    line-height: 1.3em;
}

.h2-t{
    font-family: Elice DX Neolli !important;
    font-size: 4rem;
    font-weight: bold;
    line-height: 1.3em;
}

.h3-t{
    font-family: Elice DX Neolli !important;
    font-size: 2.8rem;
    font-weight: bold;
    line-height: 1.3em;
}

*:not(#wrapPopBody):not(#wrapPopBody *){
    box-sizing: border-box;
    word-break: keep-all;
}

.h4-t{
    font-family: Elice DX Neolli !important;
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1.3em;
}

.h5-t{
    font-family: Elice DX Neolli !important;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.3em;
}

.h6-t{
    font-family: Elice DX Neolli !important;
    font-size: 2rem;
    font-weight: normal;
    line-height: 1.3em;
}

.btn-t{
    font-family: Elice DX Neolli !important;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.3em;
}

.tit{
    font-family: OneMobile;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.4em;
}

.body-t{
    font-family: OneMobile;
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 1.5em;
}

.sub-t{
    font-family: OneMobile;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.2em;
}

.big-t{
    font-family: Elice DX Neolli !important;
    font-size: 4rem;
    font-weight: normal;
    line-height: 1.2em;
}
/* font system guide */



/* button */
.btn-primary{
    background: var(--primary-color);
    color: #fff !important;
}

.btn-secondary-1{
    background: var(--secondary-color-01);
    color: #fff !important;
}

.btn-secondary-2{
    background: var(--secondary-color-02);
    color: #fff !important;
}

.btn-secondary-3{
    background: var(--secondary-color-03);
    color: #fff !important;
}


/* -------------------------------- */


/* 색상 변수 */
:root{
    /* 전역에 설정 */
    --primary-color: #e50027;
    --secondary-color-01: #FFBD00;
    --secondary-color-02: #007F58;
    --secondary-color-03: #1666BF;
    --hi-gr-01: #f8f8f8;
    --hi-gr-02: #eeeeee;
    --hi-gr-03: #e3e3e3;
    --hi-gr-04: #cccccc;
    --hi-gr-05: #A0A0A0;
    --hi-gr-06: #777777;
    --hi-gr-07: #606060;
}
/* 색상 변수 */



/* 기본설정 */
html {
    /* 62.5% of 16px browser font size is 10px */
    /* 16px * 0.625 = 10px */
    font-size: 62.5%;
    box-sizing: border-box;
}

body {
    font-size: 1.6rem;
    color: #333;
    box-sizing: border-box;
}

a {
    display: inline-block;
}
/* 기본설정 */



/* layout */
#wrap{
    position: relative;
}

/* 첫번째 섹션 */
#container > section:first-child,
.main-slide{
    /* header 높이만큼 */
    margin-top: 141px;
}

#subNav{
    /* header 높이 + 50px */
    width: 220px;
}

.sec {
    width: 100%;
    height: auto;
    position: relative;
}

.sec-inner {
    width: 100%;
    max-width: 1280px;
    padding: 40px 16px 60px;
    margin: 0 auto;
    position: relative;
}

.teacherLogin .sec-inner{
    padding: 0 16px;
    margin-bottom: 10px;
}

.page-head-inner,
.teacherLogin .page-head-inner{
    padding-top: 50px !important;
    padding-bottom: 20px !important;
}

.page-route{
    position: absolute;
    top: 16px;
    right: 20px;
    display: flex;
    align-items: center;
}

.page-route > a span{
    color: var(--primary-color);
    font-weight: bold;
}

.page-route .page{
    margin-top: 4px;
    margin-left: 16px;
    position: relative;
    padding: 4px 0;
    line-height: 16px;
}

.page-route .page::before{
    content: '>';
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translateY(-50%);
}

/* layout header */
header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    border-bottom: 1px solid #ddd;
    z-index: 1000;
}

.header-inner {
    width: 100%;
    margin: auto;
}

.gnbTop {
    width: 100%;
    background: #F5F5F5;
    border-bottom: 1px solid #ddd;
}

.gnbBtm {
    width: 100%;
}

.gnbTop-inner,
.gnbBtm-inner {
    width: 100%;
    max-width: 1280px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.gnbTop-inner {
    padding: 16px 20px;
}

.gnbTop-inner > ul,
.gnbBtm-inner > ul{
    display: flex;
}

.family-site-selectBox {
    display: none;
}

.family-site-btn > li {
    width: 120px;
}

.family-site-btn > li a {
    display: block;
    height: 30px;
    line-height: 30px;
    color: var(--primary-color);
    border: 1px solid #DA2027;
    border-radius: 30px;
    position: relative;
    font-size: 11px;
    text-align: left;
    margin-right: 10px;
    background: #fff;
    letter-spacing: -.3px;
    padding-left: 10px;
}

.family-site-btn > li a:hover img {
    filter: invert(100%) sepia(12%) saturate(7454%) hue-rotate(174deg) brightness(112%) contrast(112%);
}

.family-site-btn > li a:hover {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 3px 3px rgba(218, 32, 39, 0.5);
    transition: all 0.3s;
}

.family-site-btn > li a span {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.gnb-user{
    display: flex;
    justify-content: center;
    align-items: center;
}

.gnb-user.gnb-user-mo{
    display: none;
}

.gnb-user > li > a {
    font-size: 1.4rem;
    margin-left: 10px;
    line-height: 1.5em;
}

.gnb-user-ico {
    display: none;
}

.gnbBtm-inner {
    width: 100%;
    max-width: 1280px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
}

.mainGnb {
    width: 100%;
    max-width: 1280px;
}

.h_logo {
    padding: 24px 0;
    width: 123px;
    height: auto;
    display: flex;
    align-items: start;
}

.h_logo a{
    display: flex;
    align-items: center;
}

.h_logo img{
    width: 100% !important;
}

.gnb a {
    text-transform: uppercase;
}

.main-menu {
    overflow: hidden;
    text-align: center;
}

.main-menu > li {
    width: 200px;
    float: left;
    padding: 24px 0;
}

.main-menu > li:hover > a {
    color: var(--primary-color);
    transition: all 0.3s;
}

.main-menu > li > a {
    font-size: 2rem;
    line-height: 1.5em;
    font-weight: 600;
}

.main-menu-arrow {
    display: none;
}

.sub-menu {
    font-size: 1.6rem;
    padding: 28px 0 4px;
    display: none;
    background: #fff;
}

.sub-menu > li > a {
    font-size: 1.6rem;
    line-height: 2.5em;
}

.sub-menu > li:hover > a {
    color: var(--primary-color);
    transition: all 0.3s;
}



/* app gnb */
.app-gnb{
    z-index: 9999;
    width: 100%;
    height: auto;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.16);
}

.app-main-menu{
    height: 100%;
    display: flex;
    flex: 1;
    background: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 14px 0;
}

.app-main-menu > li{
    width: 100%;
    display: flex;
    justify-content: center;
}

.app-main-menu > li a{
    display: block;
    padding: 10px;
    margin: auto;
    position: relative;
}

.app-main-menu > li.on > a{
    background: var(--primary-color);
    border-radius: 50%;
}

.app-main-menu > li.depth.on > a::after{
    content: '';
    display: block;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 0;
    height: 0;
    border-top: 10px solid var(--primary-color);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.app-main-menu > li.on > a > img{
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(279deg) brightness(105%) contrast(102%);
}

.app-sub-menu{
    width: 100%;
    height: 50px;
    position: absolute;
    top: -34px;
    left: 0;
    z-index: -1;
    background: var(--primary-color);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding-bottom: 16px;
    display: none;
}

.app-sub-menu-inner.sub-flex{
    display: flex;
    flex: 1;
    justify-content: space-around;
    align-items: center;
}

.app-sub-menu-inner > li{
    display: block;
    text-align: center;
}

.app-sub-menu-inner > li > a{
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

/* 앱용 gnb 하위버튼 눌림 효과 */
.app-sub-menu-inner > li:active{
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    transform: translateY(-5px) scale(1.05);
    transition: all 0.2s ease;
}

/* app gnb */



/* trigger */
.trigger {
    display: none;
}



/* 통합회원 전환 퀵 버튼 */
.quick-menu{
    width: fit-content;
    height: fit-content;
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 100;
}


/* main */
/* main - slide section */
.sec-inner.main-slide-inner{
    padding: 0;
}

.main-slide{
    padding: 40px;
}

.main-slide-inner{
    max-width: 100%;
    border-radius: 80px;
}

.main-slide-inner.swiper-container{
    height: auto;
    position: relative;
}

.swiper-slide{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 80px;
    position: relative;
}

.swiper-slide > a{
    width: 100%;
    height: 550px;
    padding: 20px;
}

.mainBanner-inner{
    width: 100%;
    height: auto;
    max-width:1280px;
    margin: auto;
    display: flex;
    align-items: center;
}

.mainBanner-txt{
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: right;
    padding-right: 40px;
    text-align: right;
}

.mainBanner-image{
    width: 60%;
    padding-right: 60px;
}

.mainBanner-image img{
    width: 85%;
}

.mainBanner-txt .h1-t,
.mainBanner-txt .h5-t{
    color: #fff;
}

.mainBanner-txt .h1-t{
    text-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.mainBanner-txt .h5-t{
    line-height: 1.6em;
    margin-top: 40px;
    margin-bottom: 30px;
}

.mainBanner-txt .btn-t{
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    border-radius: 30px;
    border: 1px solid #fff;
    background: transparent;
    text-align: center;
    color: #fff;
    margin-left: auto;
    transition: all 0.3s;
    padding: 10px 40px;
}

.mainBanner-txt .btn-txt{
    transition: transform 0.2s ease-in-out;
}

.mainBanner-txt .btn-arrow{
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    border-width: 0 2px 2px 0;
    margin-left: 4px;
    margin-top: 1px;
    transform: translateY(-2px) rotate(-45deg);
    transition: all 0.2s ease-in-out;
    position: relative;
    transition: all 0.2s ease-in-out;
    border-radius: 1px;
}

.mainBanner-txt .btn-t:hover{
    cursor: pointer;
    background: #fff;
    color: var(--primary-color);
}

.mainBanner-txt .btn-t:hover .btn-arrow{
    border-color: var(--primary-color);
}

.mainBanner-txt .btn-t:hover .btn-txt{
    transform: translateX(-20px);
}

.mainBanner-txt .btn-t:hover .btn-arrow{
    transform: translate(20px,-2px) rotate(-45deg);
}

.swiper-slide a:hover{
    cursor: pointer;
}

.swiper-pagination-pc{
    display: flex;
    justify-content: center;
    gap: 5%;
    width: fit-content;
    min-width: 55%;
    height: 90px;
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    text-transform: uppercase;
    color: var(--hi-gr-07);
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.16);
    padding: 0 30px;
    z-index: 100;
    opacity: 1 !important
}

.swiper-pagination-bullet{
    width: fit-content;
    height: 100%;
    color: red;
    padding: 0 10px;
    border-radius: 0;
    background: transparent;
}

.swiper-pagination-bullet-active li{
    color: var(--primary-color) !important;
}

.swiper-pagination-pc li{
    font-family: ‘Elice DX Neolli’, sans-serif;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 90px;
}

.swiper-arrow {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding: 0 56px;
    z-index: 10;
}

.swiper-btn {
    width: 20px;
    height: auto;
    cursor: pointer;
}

.swiper-btn-prev {
    transform: rotate(180deg);
}

.swiper-btn-next {
}

/* main - banner section */
.sec-inner.bannerSec-inner {
    display: flex;
    gap: 1%;
    padding-top: 60px;
}

.banner {
    width: 33.3333%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    background: #F8F8F8;
    border-radius: 30px;
}

.banner:hover{
    transform: translateY(-15px);
    transition: all 0.3s;
    box-shadow: 0 6px 6px rgba(0,0,0,0.08);
}

.banner a {
    width: 100%;
    height: auto;
    border: 1px solid;
}

.banner-t {
    height: fit-content;
}

.banner-t{
    text-transform: uppercase;
}

.banner-t p{
    margin-top: 10px;
}

.banner-t span{
    color: var(--primary-color);
}
/* main - banner section */



/* footer layout */
.footer{
    width: 100%;
    height: auto;
}

.footer-inner{
    width: 100%;
    max-width: 1280px;
    padding: 20px;
    margin: 0 auto;
    border-top: 1px solid var(--hi-gr-04);
}
/* footer layout */



/* banner-faq */
.faqTable{
    width: 100%;
    border-top: 8px solid var(--primary-color);
    border-bottom: 8px solid var(--primary-color);
    text-align: left;
}

.faqSec td{
    padding-top: 20px;
    padding-bottom: 20px;
}

.faqSec .faqTit{
    position: relative;
    padding-left: 60px;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: left;
    border-right: 0;
}

.faqSec .faqTit::before{
    content: '';
    position: absolute;
    top: 31px;
    left: 20px;
    width: 16px;
    height: 2px;
    background: var(--primary-color);
}

.faqSec .faqTit::after{
    content: '';
    position: absolute;
    top: 24px;
    left: 27px;
    width: 2px;
    height: 16px;
    background: var(--primary-color);
    transition: all 0.3s;
}

.faqSec .faqTitBox.active{
    padding-top: 10px;
    padding-bottom: 10px;
}

.faqSec .faqTitBox.active .faqTit::after{
    transform: rotate(-90deg);
}

.faqSec td{
    height: 60px;
    border-top: 1px solid var(--hi-gr-02);
}

.faqSec td p{
    text-align: left;
    font-size: 1.4rem;
    line-height: 1.5em;
}

.ansFaq{
    padding-left: 60px;
    /*border-left: 1px solid var(--primary-color);*/
    position: relative;
    border-top: 0;
    margin-bottom: 120px;
    border-right: 0;
}

/*.ansFaq::after{*/
/*    content: '';*/
/*    width: 1px;*/
/*    height: calc(100% - 32px);*/
/*    position: absolute;*/
/*    top: 16px;*/
/*    left: 80px;*/
/*    background: var(--primary-color);*/
/*    opacity: 0.5;*/
/*}*/

/*.ansFaq p:last-child{*/
/*    display: none;*/
/*}*/






/* sub page - My Class & My Report */
.myClassSec .tit,
.myReportSec .tit{
    text-align: center;
}

.result-box:first-child{
    margin-bottom: 80px;
}

.result-box .tit{
    font-size: 2.6rem;
    line-height: 3.2rem;
    margin-bottom: 24px;
}

.test,
.list{
    display: table;
    width: 100%;
    height: auto;
    border-top: 8px solid var(--primary-color);
    position: relative;
}

.test .mo-bg{
    display: none;
}

.test thead,
.list thead{
    background: var(--hi-gr-01);
    line-height: 20px;
}

.test-cate th,
.list-cate th{
    height: 44px;
    font-size: 1.6rem;
}

tr{
    display: table-row;
    text-align: center;
}

td{
    display: table-cell;
    height: 44px;
    text-align: center;
    line-height: 2em;
    font-size: 1.4rem;
    border-right: 1px solid var(--hi-gr-02);
    border-bottom: 1px solid var(--hi-gr-02);
}

.testList .test-btn a{
    padding: 6px;
    line-height: 0;
}

.achieveTest .test-caption{
    display: none;
}

.report-cell{
    /*display: table-row;*/
    /*margin: 5px 0;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.report-btn{
    width: 80px;
    line-height: 26px;
    display: table-cell;
    padding: 2px;
    border-radius: 30px;
    margin: 0 2px;
    cursor: pointer;
}

.report-btn:hover{
    cursor: pointer;
    font-weight: bold;
}

.classCheckBox .testList.on::before{
    display: none;
    content: '';
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--hi-gr-01);
}


/* sub page - 회원정보수정 */
.memberModifyForm{
    width: 100%;
    max-width: 700px;
    margin: auto;
}
.memberModifyForm-inner{
    border-top: 10px solid var(--primary-color);
    border-bottom: 10px solid var(--primary-color);
}

.memberModifyForm li{
    display: flex;
    justify-content: start;
    align-items: center;
}

.memberModifyForm label{
    display: flex;
    align-items: center;
    justify-content: start;
    width: 165px;
    height: 65px;
    padding: 12px 16px;
    text-align: left;
    background: var(--hi-gr-01);
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.5em;
}

.memberModifyForm label span{
    color: var(--primary-color);
    margin-left: 4px;
}

.memberModifyForm li > span{
    display: block;
    width: calc(100% - 165px);
    height: auto;
    text-align: left;
    padding: 6px 0 6px 14px;
    color: var(--hi-gr-06);
}

.memberModifyForm input{
    width:100%;
    height: 40px;
    border: none;
    border-radius: 10px;
    box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.08);
    text-indent: 10px;
}

.memberModifyForm input:focus{
    outline: none;
    box-shadow: 0px 0px 4px 2px rgba(218,32,39,0.16);
}

.teacherLogin .memberModifyForm input:focus{
    box-shadow: 0 0 4px 2px rgba(22,102,191,0.18);
}

.memberModifyForm .myInfoEmailInput,
.memberModifyForm .myInfoCheckInput,
.memberModifyForm .myInfoPhoneInput,
.memberModifyForm .myInfoRadioInput,
.memberModifyForm .myInfoAddressInput{
    display: flex;
    flex: 1;
}

.memberModifyForm .emailInputBox,
.memberModifyForm .infoPhoneInputBox{
    display: flex;
    width: 100%;
    align-items: center;
}

.memberModifyForm select{
    width: 160px;
    height: 40px;
    border: 1px solid var(--hi-gr-03);
    text-indent: 4px;
    /*box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.08);*/
    border-radius: 10px;
}

.memberModifyForm .myInfoEmailInput select{
    margin-left: 8px;
}

.memberModifyForm select:focus{
    outline: none;
}

.memberModifyForm input[type="checkbox"]{
    width: 30px;
    height: 30px;
}

.memberModifyForm .myInfoEmailInput input{
    width: calc(50% - 18px);
}

.memberModifyForm .symbol{
    display: inline-block;
    margin: 0 8px;
    line-height: 40px;
}

.memberModifyForm .lastLi label{
    padding: 100px 16px;
}

.memberModifyForm .inputTypeB{
    width: 90%;
}

.memberModifyForm .inputTypeB,
.memberModifyForm .inputTypeC{
    margin-bottom: 10px;
}

.memberModifyForm .btnZip{
    width: 160px !important;
    height: 40px;
    padding: 0 4px;
    margin-left: 8px;
    background: var(--hi-gr-03);
    border:none;
    border-radius: 10px;
    cursor: pointer;
}

.memberModifyForm .btnZip:hover{
    background: var(--primary-color);
    color: #fff;
}

.centerBlock{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 10px;
}

.btn_confirm{
    width: 100px;
    height: 30px;
    line-height: 30px;
    color: #fff !important;
    border-radius: 15px;
    text-align: center;
    font-size: 14px !important;
    font-weight: normal !important;
    cursor: pointer;
}

.btn_confirm:hover{
    cursor: pointer;
}

.btn_confirm:nth-child(1){
    background: var(--hi-gr-07);
}

.btn_confirm:nth-child(2){
    margin: 0 8px;
    background: var(--hi-gr-04);
}

.btn_confirm:nth-child(3){
    background: var(--primary-color);
}



/* sub page - 자기주도 어휘 학습관 Phonics */
.book-tit{
    display: flex;
    gap: 10px;
    position: relative;
    margin-bottom: 30px;
}

.book-cate{
    width: calc(100% - 190px);
    height: 50px;
    line-height: 50px;
    text-transform: capitalize;
    color: #fff;
    background: var(--primary-color);
    border-radius: 30px;
    padding: 0 20px;
}

.level-select select{
    width: 100%;
    height: 100%;
    padding: 10px;
    /* 기존 화살표 제거 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
}

.level-select select::-ms-expand{
    display: none;
}

.level-select{
    width: 180px;
    height: 50px;
    border-radius: 25px;
    border: 1px solid var(--hi-gr-04);
    background: #fff;
    background: url("/images/select-arrow-69a1c0bd0371120edd48dc8f3712dc71.svg") no-repeat center right 10px;
    position: relative;
}

.level-select .selected{
    display: flex;
    justify-content: space-between;
    background: #fff;
    border-radius: 25px;
    border: 1px solid var(--hi-gr-04);
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 2;
    width: 180px;
    height: 50px;
}

.level-select .selected span{
    display: flex;
    align-items: center;
    margin-right: 12px;
    transform: rotate(0deg);
    transition: all 0.3s;
}

.level-select .selected-value{
    max-width: 150px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0 12px;
}

.level-select ul{
    width: 180px;
    height: auto;
    position: absolute;
    top: -1px;
    left: -1px;
    border: 1px solid var(--hi-gr-04);
    border-radius: 25px;
    padding-top: 50px;
    background: var(--hi-gr-01);
    display: none;
    z-index: 1;
}

.level-select.active ul{
    display: block;
}

.level-select.active .selected span{
    transition: all 0.3s;
    transform: rotate(180deg);
}

.level-select li{
    width: 100%;
    padding: 12px;
}

.level-select.active li:hover{
    color: var(--primary-color);
    cursor: pointer;
}

.bookList{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 5%;
    background: #fff;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.16);
    border-radius: 50px;
    padding: 30px;
    margin-bottom: 30px;
}

.bookList li{
    width: 16%;
    text-align: center;
}

.bookList li a{
    text-align: center;
    height: auto;
}

.bookList li a img{
    width: 140px;
    height: 190px;
    border-radius: 10px;
    border: 1px solid #ccc;
}

.bookList li p{
    text-align: center;
    font-weight: bold;
    padding: 8px 0 30px;
}



/* sub page - 자기주도 어휘학습관 unit */
.sec-inner.bookInfoSec-inner{
    padding-top: 50px;
    padding-bottom: 20px;
}

.book-box{
    display: flex;
    background: var(--hi-gr-01);
    position: relative;
    padding-bottom: 24px;
    border-radius: 30px;
}

.book-box > div{
    width: 50%;
    margin-top: 60px;
}

.book-name{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary-color);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.book-name .h4-t{
    color: #fff;
    line-height: 60px;
    text-align: center;
}

.book-img-inner{
    width: 220px;
    height: 280px;
    background: url(/images/ELT/unit-book-bg-cc86387b3a6126030cb2f4390efc0be1.png) no-repeat center bottom;
    background-size: 100%;
    margin: auto;
    position: relative;
}

.book-img img{
    width: 130px;
    height: auto;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translate(-50%, -8px);
    border-radius: 10px;
    animation: upDown 2s linear infinite;
}

@keyframes upDown {
    0%{
        transform: translate(-50%, -8px);
    }

    50%{
        transform: translate(-50%, 8px);
    }

    100%{
        transform: translate(-50%, -8px);
    }
}

.book-desc{
    display: flex;
    align-items: center;
    padding-right: 20px;
}

.book-desc dd{
    font-size: 1.8rem;
    line-height: 36px;
    position: relative;
    padding-left: 36px;
}

.book-desc dd::before{
    content: '';
    width: 28px;
    height: 28px;
    position: absolute;
    background: #fff;
    border-radius: 50%;
    left: 0;
    top: 2px;
    border: 1px solid var(--hi-gr-03);
}

.book-desc dd::after{
    content: '';
    position:absolute;
    top:13px;
    left:12px;
    width:10px;
    height:6px;
    border: 2px solid var(--primary-color);
    border-top: 0;
    border-right: 0;
    transform:rotate(-45deg) translateY(-50%);
    cursor:pointer;
}

.studyUnitSec-inner{
    max-width: 900px;
}

.unit-txt{
    display: flex;
    align-items: center;
}

.unit-txt span{
    margin-right: 2px;
}

.unitList{
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    padding: 38px 0 0;
}

.unitList li{
    width: 20%;
    display: flex;
    justify-content: center;
}

.unitList li a{
    position: relative;
    margin-bottom: 40px;
}

.unitList li a {
    display:block;
    position:relative;
    top:0;
    width:56px;
    height:62px;
    text-align:center;
    color:#fff;
    font-weight:bold;
    font-size:22px;
    background:url(/images/ELT/circle_bg1-d037de1b424ad317c3a3670c81888c66.gif) no-repeat center top;
}

.unitList li a span, .unitList li.gray a span {
    display:block;
    position:absolute;
    top:25px;
    width:99%;
    padding-left:1%;
    text-align:center;
    font-weight:bold;
    font-size:22px;
    color:#fff;
}

.unitList li a:hover, .unitList li.gray a:hover, .unitList li.actU a {
    background:url(/images/ELT/circle_bg2-0bff80297a6173dd0c66b9ab61c35c33.png) no-repeat center top;
}

.unitList li.gray a {
    background:url(/images/ELT/circle_bg4-8768df905fc918fdeeca2d0d179b6e41.png) no-repeat center top;
}

.unitList li a:hover,
.unitList li.gray a:hover,
.unitList li.actU a {
    background:url(/images/ELT/circle_bg2-0bff80297a6173dd0c66b9ab61c35c33.png) no-repeat center top;
}

.unitList li.uTest a {
    background:url(/images/ELT/circle_bg3-fad9a37dac838a3d492ba0ac9c1c34b8.gif) center bottom no-repeat;
}

.unitList li.uTest a:hover {
    color:#000;
}

.unitList li.uTest a span {
    top:3px;
    left:1px;
    font-size:12px;
    color:#edaa40;
    letter-spacing:-1px;
}
/* sub page - 자기주도 어휘학습관 unit */



/* sub page - 학습로드맵 */
.pageHeadSec .h1-t{
    /*font-family: Elice DX Neolli !important;*/
    width: fit-content;
    /*background: var(--primary-color);*/
    /*color: #fff;*/
    border-radius: 50px;
    padding: 16px 36px;
    margin: 0 auto;
}

.pageHeadSec p{
    text-align: center;
}

.step-box{
    margin-top: 65px;
}

.step-box-inner{
    display: flex;
    gap: 20px;
    justify-content: center;
}

.step{
    width: 160px;
    height: 160px;
    text-align: center;
    border-radius: 80px;
    background: var(--hi-gr-01);
    box-shadow: inset rgba(0,0,0,0.25) 0 3px 8px;
    padding: 50px 0 0;
}

.step b{
    font-size: 1.3rem;
    color: var(--primary-color);
    font-family: Elice DX Neolli !important;
    text-transform: uppercase;
    line-height: 20px;
}

.step .h6-t{
    letter-spacing: -.5px;
}

.step span{
    display: inline-block;
    width: 110px;
    height: 24px;
    line-height: 24px;
    color: #fff;
    font-family: Elice DX Neolli !important;
    border-radius: 20px;
    background: var(--primary-color);
    margin-top: 10px;
}

.course-tabmenu{
    width: 720px;
    height: auto;
    overflow: hidden;
    padding: 20px 20px 0;
    margin: 0 auto;
}

.course-tab-btn{
    width: 175px;
    height: 90px;
    text-align: center;
    color: var(--hi-gr-05);
    padding: 16px 8px;
    background: #fff;
    float: left;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin-left: -5px;
    box-shadow: 0 0 16px 4px rgba(0,0,0,0.16);
    position: relative;
    cursor: pointer;
}

.course-tab-btn:nth-child(1){
    z-index: 8;
}

.course-tab-btn:nth-child(2){
    z-index: 6;
}

.course-tab-btn:nth-child(3){
    z-index: 4;
}

.course-tab-btn:nth-child(4){
    z-index: 2;
}

.course-tab-btn.on{
    color: #fff;
    background: var(--primary-color);
    z-index: 10;
}

.course-tab-btn:nth-child(1){
    display: flex;
    justify-content: center;
    align-items: center;
}

.course-tab-btn span{
    display: block;
    text-transform: uppercase;
}

.course-tabcon{
    width: 100%;
    height: auto;
    border: 10px solid var(--primary-color);
    border-radius: 20px;
    padding: 96px 100px;
}

.level{
    margin-bottom: 80px;
}

.level:last-child{
    margin-bottom: 0;
}

.level .tit{
    width: 350px;
    height: auto;
    text-align: center;
    color: #fff;
    background: var(--primary-color);
    padding: 16px 10px;
    margin: auto;
    margin-bottom: 40px;
    border-radius: 50px;
}

.course-tabcon-box{
    width: 100%;
    height: auto;
    display: flex;
}

.course-tabcon-box > div{
    width: 33.3333%;
    text-align: center;
}

.course-tabcon-box > div:nth-child(2){
    border-left: 1px solid var(--hi-gr-01);
    border-right: 1px solid var(--hi-gr-01);
}

.course-tabcon-box > div strong{
    display: block;
    font-family: Elice DX Neolli !important;
    font-size: 1.8rem;
    line-height: 2.5em;
    color: var(--primary-color);
    text-transform: uppercase;
    background: var(--hi-gr-01);
    margin-bottom: 12px;
}

.book > ul{
    margin-bottom: 16px;
}

.book > ul:last-child{
    margin-bottom: 0px;
}

.book a{
    font-size: 1.6rem;
    line-height: 1.5em;
}

.book a:hover{
    color: var(--primary-color);
}
/* sub page - 학습로드맵 */



/* sub page - My Dictionary */
.dicConBox{
    width: 100%;
    display: flex;
}

.dicBtnBox{
    width: 100%;
}

.dicBox{
    width: 100%;
    height: auto;
    min-height: 580px;
    border: 8px solid var(--primary-color);
    border-radius: 20px;
    padding: 50px 74px 50px 50px;
    position: relative;
}

.tabM2{
    width: 30px;
    padding: 20px 0;
}

.tabM2 li{
    width: 100%;
    background: var(--hi-gr-01);
    text-align: center;
    padding: 10px 2px;
    border: 1px solid var(--hi-gr-04);
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
}

.tabM2 li a{
    color: var(--hi-gr-05);
    font-family: Elice DX Neolli !important;
    font-weight: bold;
}

.tabM2 li.on{
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #fff;
}

.tabM2 li.on > a {
    color: #fff;
}

.allCheckBtn{
    background: radial-gradient(#FF6F74,var(--primary-color));
    color: #fff;
    border-radius: 8px;
    padding: 8px;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 40px;
    box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.16);
    position: relative;
    bottom: 2px;
    transition: all .2s;
}

.allCheckBtn:hover{
    cursor: pointer;
}

.allCheckBtn:active{
    background: var(--primary-color);
    box-shadow: inset 0px 3px 3px 0px rgba(0,0,0,0.2);
    bottom: -1px;
}

.wordSec input[id="allCheck"]:checked + label{
    background: var(--primary-color);
    box-shadow: inset 0px 3px 3px 0px rgba(0,0,0,0.2);
    bottom: -1px;
}

.wordSec label{
    display: inline-block;
}

.wordSec input[type="checkbox"]{
    display: none;
}

.wordBox input[type="checkbox"] + label{
    height: auto;
    position: relative;
    padding-left: 24px;
    line-height: 1.5em;
}

.wordBox input[type="checkbox"] + label::before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 14px;
    height: 14px;
    border: 2px solid var(--hi-gr-07);
    border-radius: 4px;
    transform: translateY(-50%);
}

.wordBox input[type="checkbox"]:checked + label::before{
    background: var(--hi-gr-07);
}

.wordBox input[type="checkbox"]:checked + label::after{
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    width: 6px;
    height: 6px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: translateY(-65%) rotate(-45deg);
}

.wordBox input[type="checkbox"]{
    border: 2px solid var(--hi-gr-07);
}

.wordBox{
    display: flex;
    align-items: center;
}

.wordBox .wordH{
    color: var(--primary-color);
    margin-right: 10px;
}

.wordSec .desc{
    font-size: 1.6rem;
    font-weight: bold;
    margin: 4px 0 10px 24px;
}

.ex-txt-box{
    background: var(--hi-gr-01);
    padding: 6px;
    margin-left: 24px;
    border-radius: 8px;
}

.ex-txt{
    display: flex;
    padding: 3px 0;
}

.ex-txt a{
    line-height: 20px;
    margin-left: 4px;
}

.markIcon{
    margin-top: 16px;
    margin-bottom: 30px;
    padding-left: 24px;
}

.dicBtnCon{
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
}

.dic-btn{
    width: 110px;
    height: 40px;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-family: Elice DX Neolli !important;
    font-size: 1.4rem;
    font-weight: bold;
}

.dic-btn.btn-delete{
    background: var(--hi-gr-04);
}

.dic-btn.btn-print{
    background: var(--primary-color);
    color: #fff;
}
/* sub page - My Dictionary */



/* 로그인 페이지 */
#wrap.origin-login-page,
#wrap.find-id-page{
    padding-top: 90px !important;
}

.login-header{
    width: 100%;
}

.login-header .logo{
    width: 100%;
    display: flex;
    justify-content: center;
}

.login-header .logo a{
    padding: 10px;
}

.loginBox #frmLogin,
.findBox .frmFind,
.pwCheckBox #frm,
.leaveBox #frm{
    width: 100%;
    max-width: 550px;
    height: auto;
    margin: auto;
    border: 1px solid var(--hi-gr-01);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 0 30px 30px rgba(0,0,0,0.05);
    background: #fff;
}

.inputBox{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.inputCon{
    position: relative;
}

.loginInput::placeholder,
.findInput::placeholder{
    font-weight: normal;
}

.loginInput,
.findInput{
    font-size: 1.6rem;
    font-weight: bold;
}

.inputCon img{
    position: absolute;
    top: 13px;
    left: 18px;
    width: 24px;
    height: 24px;
}

.inputCon input{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    border: none;
    box-shadow: 0 0 8px 4px rgba(0,0,0,0.05);
    border-radius: 30px;
    padding-left: 56px;
    position: relative;
}

.inputCon .input-ico{
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
}

.inputCon.idCon .input-ico{
    background: url("/images/ELT/ico_id_gr-598b0a8df2348d0cee9785a1834e2bc6.svg") no-repeat center center;
}

.inputCon.pwCon .input-ico{
    background: url("/images/ELT/ico_pw_gr-4339f9be61ff954c12feaae4bef16528.svg") no-repeat center center;
}

.inputCon.idCon input:focus ~ .input-ico{
    background: url("/images/ELT/ico_id-02ef9bdb5f9a9bed662091d400b59499.svg") no-repeat center center;
}

.inputCon.pwCon input:focus ~ .input-ico{
    background: url("/images/ELT/ico_pw-df322fe3a5dbf3d8de272e675b9ba8b1.svg") no-repeat center center;
}

.inputCon input:focus{
    outline: none;
    box-shadow: 0 0 8px 4px rgba(218,32,39,0.12);
}

.rememId_findId ul{
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.loginBtn,
.okBtn{
    width: 100%;
    margin-bottom: 50px;
}

.loginBtn a,
.okBtn a{
    height: 60px;
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    align-items: center;
    border-radius: 40px;
    border: none;
    background: var(--primary-color);
    box-shadow: 0 0 8px 4px rgba(0,0,0,0.08);
    margin-top: 18px;
}

.joinusBtn{
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--hi-gr-03);
    padding-top: 20px;
    font-size: 1.4rem;
}

.joinusBtn > a{
    color: var(--primary-color);
    font-weight: bold;
    margin-left: 4px;
}

/* checkbox custom */
.loginBox input[type="checkbox"]{
    display: none;
}

.loginBox input[type="checkbox"] ~ label{
    position: relative;
    padding-left: 20px;
    color: var(--hi-gr-07);
    cursor: pointer;
}

.loginBox input[type="checkbox"] ~ label::before{
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    left: 0;
    top: -2px;
    border: 1px solid var(--hi-gr-07);
    border-radius: 4px;
}

.loginBox input[type="checkbox"] ~ label::after{
    content: '';
    width: 6px;
    height: 6px;
    position: absolute;
    left: 4px;
    top: 1px;
    border: 2px solid #fff;
    transform: rotate(-45deg);
    border-top: transparent;
    border-right: transparent;
    display: none;
}

.loginBox input[type="checkbox"]:checked ~ label::before{
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.loginBox input[type="checkbox"]:checked ~ label::after{
    display: block;
}

.loginBox .findIdPw{
    text-decoration-line: underline;
}

.loginBox .findIdPw:hover{
    font-weight: bold;
}

/* 아이디 비밀번호 찾기 */
.findTab{
    display: flex;
    justify-content: space-around;
    margin-bottom: 16px;
}

.findTab li{
    width: 50%;
}

.findTab li a{
    display: block;
    color: var(--hi-gr-05);
    padding: 10px;
    font-size: 1.6rem;
    text-align: center;
}

.findTab li.on a{
    border-bottom: 6px solid var(--primary-color);
    color: #333;
    font-weight: bold;
}

.findTabCon{
    position: relative;
}

.findTabCon ul{
    display: none;
}

.findTabCon .inputBox.active{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.inputCon input.findInput{
    padding: 0;
    text-indent: 20px;
}
/* 로그인 페이지 */



/* 탈퇴 페이지 */
.leaveBtn{
    display: block;
    width: 100px;
    height: 35px;
    line-height: 35px;
    color: #fff !important;
    background: var(--primary-color);
    border-radius: 20px;
    text-align: center;
    font-weight: bold;
}



/* footer */
.company{
    display: flex;
    justify-content: start;
    gap: 20px;
}

.company a{
    font-size: 14px;
    color: var(--hi-gr-07);
    font-weight: bold;
    line-height: 1.4;
}

.company a.privacy-link {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.0;
}

.company a.privacy-link:hover {
    color: #1666BF;
    background-color: #E8F0FB;
    text-decoration: underline;
}

.footer-txt{
    margin-top: 16px;
}

.footer p{
    font-size: 14px;
    line-height: 1.5em;
    color: var(--hi-gr-04);
}
/* footer */



/* 웹 접근성 고려한 속성 */
.hidden{
    overflow: hidden;
    position: absolute;
    clip: rect(0,0,0,0);
    clip-path: polygon(0 0, 0 0, 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
}

/* 말줄임표 */
.ellipsis{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}



/* 알림장 */
.notice-view h1{
    font-size: 2.2rem;
}

.notice-view h2{
    font-size: 2rem;
}

.notice-view h3{
    font-size: 1.8rem;
}

.notice-view h4{
    font-size: 1.6rem;
}

.notice-view h5{
    font-size: 1.4rem;
}

.notice-view h6{
    font-size: 1.3rem;
}

.teacherLogin.notice .sec-inner table,
.notice.student .sec-inner table
.teacherLogin.notice-view .sec-inner table{
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    overflow: hidden;
}

.teacherLogin.notice .dataTable1 tbody tr td,
.notice.student .dataTable1 tbody tr td{
    border-left: 0;
    border-right: 0;
    border-bottom:1px solid #efefef;
    white-space: normal;
    line-height: 1.5em;
}

.teacherLogin.notice-view .dataTable1 tbody tr th,
.notice-view.student .dataTable1 tbody tr th{
    background: var(--hi-gr-01);
    border: 1px solid #efefef;
}

.teacherLogin.notice-view .dataTable1 tbody tr td,
.notice-view.student .dataTable1 tbody tr td{
    text-align: left;
    padding: 10px;
    line-height: 1.5em;
}

.teacherLogin.notice-view .dataTable1 tbody tr td{
    border-top: 1px solid #efefef;
    border-left: 0;
    border-bottom: 0;
    border-right: 0;
}

/*.notice tr{*/
/*    height: 60px;*/
/*    position: relative;*/
/*}*/

.notice td.nTitle{
    text-align: left;
}





.notice-view .detail{
    display: block;
    min-height: 80px;
    height: auto;
}

.notice-write .tit{
    display: flex;
    height: 40px;
    line-height: 40px;
    border: 1px solid #dadde6;
    margin: 4px 0;
}

.notice-write .tit input{
    width: calc(100% - 80px);
    border: 0;
    line-height: 40px;
    background: transparent;
    text-indent: 10px;
    margin-bottom: 0;
    font-size: 1.6rem;
    font-weight: 500;
}

.notice-write .tit label{
    display: inline-block;
    background: #f7f9fc;
    height: 38px;
    line-height: 38px;
    padding: 0 20px;
    border-right: 1px solid #dadde6;
    font-size: 1.6rem;
    font-weight: 600;
}

.notice-write .tit input:focus{
    outline: none;
}

.selectClass{
    width: 350px;
    font-size: 1.4rem;
}

.selectClass select{
    min-width: 200px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #dadde6;
    padding: 10px 14px;
    margin-bottom: 0;
}

.selectClass select:focus{
    border: 2px solid var(--secondary-color-03);
}

.notice-write #saveBtn{
    display: block;
    width: 100px;
    height: 35px;
    line-height: 35px;
    background: #fff;
    border: 1px solid var(--secondary-color-03);
    color: var(--secondary-color-03);
    margin: auto;
}

.notice-write #saveBtn:hover{
    cursor: pointer;
    background: var(--secondary-color-03);
    color: #fff;
    transition: all 0.2s;
}

::-webkit-scrollbar{-webkit-appearance: none;}
::-webkit-scrollbar:vertical{width: 12px;}
::-webkit-scrollbar:horizontal{height: 8px;}
::-webkit-scrollbar-thumb{background-color: rgba(0,0,0,0.5); border-radius: 10px; border: 2px solid #fff}
::-webkit-scrollbar-track{border-radius: 10px; background-color: #fff}

/* bricksEduBtn 버튼 삽입 CSS */
.bricksEduBtn{
    display: none;
}

header.app .gnbTop-inner{
    display: none;
}

.header.app .bricksEduBtn{
    display: block;
}

.header.app .gnb-user.gnb-user-mo {
    display: block;
}




/* 굿티쳐 홈페이지 이동 플로팅 배너 */
.float-banner{
    display:block;
    width: 250px;
    height: auto;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 10px rgba(0,0,0,0.25)
}
.float-banner img{
    width: 100%;
    transform: scale(1.01);
    display: block;
}





/*화면을 길게 누를 때 뜨는 팝업, 액션시트 제어*/

* {

    -webkit-touch-callout: none; /* iOS Safari */

    -webkit-user-select: none; /* Chrome, Safari, Opera */

    -moz-user-select: none; /* Firefox */

    -ms-user-select: none; /* Internet Explorer/Edge */

    user-select: none; /* 표준 구문 */

}



/*링크를 터치했을 때 나오는 기본 영역의 색상 제어*/

html, body { -webkit-tap-highlight-color: rgba(0,0,0,0); /* Chrome, Safari, Opera */

    -moz-tap-highlight-color: rgba(0,0,0,0); /* Firefox */

    -ms-tap-highlight-color: rgba(0,0,0,0); /* Internet Explorer */

    tap-highlight-color: rgba(0,0,0,0); /* 다른 브라우저 */

}



/*텍스트, 이미지 선택할 수 있게 하는 여부 제어*/

* {

    -webkit-user-select: none; /* Chrome, Safari, Opera */

    -moz-user-select: none; /* Firefox */

    -ms-user-select: none; /* Internet Explorer/Edge */

    user-select: none; /* 표준 구문 */

}