@charset "utf-8";

/*
    서브페이지
    :: 일단 font-size 기존 그대로 가져옴 (root.css 를 사용할지는 디자인 확인 후 수정 예정)
    :: 기존 css pc first 그대로 사용
*/

/**********************************************
    서브 공통
**********************************************/
.contentPage{font-size: 15px; padding-bottom: 48px;}
.contentPage [class^='mo-sub-'] {display: none !important;}
.contentPage .container { padding-top: 124px; padding-bottom: 48px; }
.contentPage .text-left { text-align: left; }
.contentPage .text-center { text-align: center; }
.contentPage .weight-normal { font-weight: normal !important; }
.contentPage .blind { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; }
.contentPage .hide { display: none !important; }
.contentPage .point-color { color: #30b2f3; }
.contentPage i.ico-check-red { display: inline-block; width: 12px; height: 12px; background-image: url('https://static.edmclass.com/common/contents/ico-check-red.svg'); background-size: 12px 12px; background-position: center center; background-repeat: no-repeat; text-indent: -99999px; overflow: hidden; margin-right: 6px; }
.contentPage em { color: #D53236; font-style: normal;}
/* .beginner_guide .info-ielts .ielts-module span em { color: #e61b39; ; } */
.contentPage h3{font-size: 18px; font-weight: bold;}
.contentPage table th{font-weight: bold;}

/* 배경 색상 */
.contentPage .bg-skyblue { background-color: #E3F3FF; }
.contentPage .bg-darkblue { background-color: #4C5375; }
.contentPage .bg-gray { background-color: #F6F6F6; }

@keyframes flipTop {
    0% { transform: rotateX(0deg); z-index: 2; }
    0%, 99% { opacity: 0.99; }
    100% { transform: rotateX(-90deg); opacity: 0; }
}
@keyframes flipBottom {
    0%, 50% { z-index: -1; transform: rotateX(90deg); opacity: 0; }
    51% { opacity: 0.99; }
    100% { opacity: 0.99; transform: rotateX(0deg); z-index: 5; }
}

/* 서브 페이지 > 최상단 탭 메뉴 */
.contentPage .sub-tab-menu .tab-menu { display: flex; align-items: center; justify-content: center; background-color: #EDEDED; position: relative; }
.contentPage .sub-tab-menu .tab-menu::after { content: ''; display: block; width: 100%; height: 1px; background-color: #333333; position: absolute; bottom: 0; left: 0; }
.contentPage .sub-tab-menu .tab-menu li { flex: 1 1 auto; border-left: 1px solid #C5C5C5; border-right: 1px solid #ededed; border-top: 1px solid #ededed; background-color: #EDEDED; position: relative; width: 25%; font-size: 14px; letter-spacing: 0px; color: #666666; }
.contentPage .sub-tab-menu .tab-menu li:first-child { border-left: 1px solid #ededed; }
.contentPage .sub-tab-menu .tab-menu li.active { background-color: #ffffff; border: 1px solid #333333; border-bottom: 1px solid #ffffff; margin-bottom: -1px; z-index: 1; font-weight: bold; letter-spacing: 0px; color: #333333; }
.contentPage .sub-tab-menu .tab-menu li a { display: flex; align-items: center; justify-content: center; height: 43px; }

/* 서브 페이지 > 콘텐츠 > 탭 메뉴 */
.contentPage .sub-tab-menu-small{ position: -webkit-sticky; position: sticky; top: 40px; z-index: 99; display: none; margin: 16px 0;}
.contentPage .sub-tab-menu-small .tab-menu {background-color: #ffffff; display: flex; }
.contentPage .sub-tab-menu-small .tab-menu li + li{margin-left: 8px;}
.contentPage .sub-tab-menu-small .tab-menu li button { display: flex; align-items: center; justify-content: center; height: 38px; border: 1px solid #C5C5C5; border-radius: 60px; padding: 0 15px; color: #666666; white-space: nowrap; }
.contentPage .sub-tab-menu-small .tab-menu li.active button { border: 1px solid #30B2F3; color: #30b2f3}




/************************************************
    무료학습 > 초보자 가이드
************************************************/
.beginner_guide {line-height: 26px; letter-spacing: -0.3px; color: #222222; padding-top: 60px !important;}
.beginner_guide .tab-content { padding-top: 50px;}
.beginner_guide .info-ielts h2 { position: relative; font-size: 20px; line-height: 28px; font-weight: bold;}
.beginner_guide .info-ielts h2 span { font-weight: normal; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: #333333; }
.beginner_guide .info-ielts h2 + p { margin-top: 12px; }
.beginner_guide .info-ielts .ielts-module { margin-top: 40px; }
.beginner_guide .info-ielts .ielts-module strong { display: block; font-weight: 400; font-size: 20px; line-height: 28px; }
.beginner_guide .info-ielts .ielts-module span { display: block; margin-top: 10px; }
.beginner_guide .info-ielts .ielts-module span+span { margin-top: 10px; }
.beginner_guide .info-ielts .ielts-module .is { width: 10px; height: 10px; margin-right: 10px; }
.beginner_guide .about-div { padding: 50px 0; border-bottom: 1px solid #C5C5C5; }
.beginner_guide .about-div p { margin-top: 10px; }
.beginner_guide .about-div .tip { display: block; margin-top: 30px; }
.beginner_guide .about-div .wrap-example { width: 100%; background-color: #f6f6f6; }
.beginner_guide .about-div .example { max-width: 768px; padding: 28px 0; background-color: #f6f6f6; margin: 16px auto 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; position: relative; }
.beginner_guide .about-div .example::before { content: 'ex)'; display: block; font-size: 15px; line-height: 23px; letter-spacing: -0.3px; color: #222222; position: absolute; top: 20px; left: 20px; }
.beginner_guide .about-div .example div { background-color: #ffffff; width: 100%; max-width: 600px; height: 45px; display: flex; align-items: center; justify-content: center; }
.beginner_guide .about-div .example+p { margin-top: 16px; }
.beginner_guide table.bandScore-table { border: 1px solid #C5C5C5; border-collapse: collapse; }
.beginner_guide table.bandScore-table thead th { background: #f6f6f6; border-bottom: 1px solid #C5C5C5; font-weight: normal; font-size: 18px; line-height: 26px;; letter-spacing: -0.02px; color: #333333; }
.beginner_guide table.bandScore-table th,
.beginner_guide table.bandScore-table td { padding: 16px; text-align: left; border-left: 1px solid #C5C5C5; line-height: 180%; border-bottom: 1px solid #C5C5C5; vertical-align: top; font-size: 15px; line-height: 24px; letter-spacing: 0px; color: #222222CC; }
.beginner_guide table.bandScore-table tbody th { font-weight: normal; font-size: 16px; line-height: 24px; letter-spacing: -0.02px; color: #333333; }

.beginner_guide table.bandScore-table th:first-child,
.beginner_guide table.bandScore-table td:first-child { border-left: 0; }
.beginner_guide table.bandScore-table td em.title { font-style: normal; color: inherit;}
.beginner_guide table.bandScore-table .kor { display: block; }
.beginner_guide table.bandScore-table .left .kor { color: #30b2f3; }
.beginner_guide .table-title { font-size: 20px; line-height: 28px; letter-spacing: -0.4px; color: #222222; padding-bottom: 10px; border-bottom: 2px solid #666666;  margin-top: 70px;}
.beginner_guide .table-title.first{margin-top: 0;}
.beginner_guide .about-div+.about-div { margin-top: 0; border-top: 0; }
.beginner_guide table.examType-table { width: 100%; }

.beginner_guide table.examType-table th,
.beginner_guide table.examType-table td { border-bottom: 1px solid #C5C5C5; padding: 30px 0; vertical-align: top; }
.beginner_guide table.examType-table th { width: 290px; text-align: left; }
.beginner_guide table.howtoApp-table { width: 100%; }

.beginner_guide table.howtoApp-table th,
.beginner_guide table.howtoApp-table td { border-bottom: 1px solid #C5C5C5; padding: 30px 0; vertical-align: top; }
.beginner_guide table.howtoApp-table th { width: 290px; text-align: left; }
.beginner_guide table.howtoApp-table a { color: #30b2f3; text-decoration: underline; }



@media screen and (max-width: 744px){

    /**********************************************
        서브 공통
    **********************************************/
    .contentPage{font-size: 14px;}
    .contentPage [class^='mo-sub-'] {display: block !important;}
    .contentPage .container { padding-top: 66px; border-bottom: 1px solid #C5C5C5; }
    .contentPage h3{font-size: 17px;}
    /* .contentPage .sub-banner { padding: 0 15px; } */


    /* 서브 페이지 > 최상단 탭 메뉴 */
    .contentPage .sub-tab-menu .tab-menu { background-color: #F6F6F6; justify-content: flex-start; overflow-x: auto; }
    .contentPage .sub-tab-menu .tab-menu::after { display: none; }
    .contentPage .sub-tab-menu .tab-menu li { flex: auto; border-left: 0; border-right: 0; border-top: 0; width: auto; background-color: #F6F6F6; font-size: 16px; letter-spacing: -0.48px; margin-bottom: 0; }
    .contentPage .sub-tab-menu .tab-menu li + li{margin-left: 5px;}
    .contentPage .sub-tab-menu .tab-menu li.active { background-color: #f6f6f6; border: 0; border-bottom: 0; margin-bottom: -1px; z-index: 1; font-weight: bold; letter-spacing: 0px; color: #333333; margin-bottom: 0; }
    .contentPage .sub-tab-menu .tab-menu li.active::after { content: ''; display: block; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #222222; }
    .contentPage .sub-tab-menu .tab-menu li:first-child { border-left: 0; }
    .contentPage .sub-tab-menu .tab-menu li a { white-space: nowrap; height: auto; padding: 10px 15px; }

    /* 서브 페이지 > 콘텐츠 > 탭 메뉴 */
    .contentPage .sub-tab-menu-small{display: block; margin: 0 0 30px;}
    .contentPage .sub-tab-menu-small .tab-menu{overflow-x: auto; }




    /************************************************
        무료학습 > 초보자 가이드
    ************************************************/
    .beginner_guide { padding-top: 0 !important; }
    .beginner_guide .tab-content { padding-top: 16px;}
    .beginner_guide .tab-content#abutIELTS{padding-top: 40px;}
    .beginner_guide .tab-content#abutIELTS .sub-tab-menu-small{margin: 16px 0;}
    .beginner_guide .table-title { font-size: 18px; line-height: 26px; letter-spacing: -0.36px; margin-top: 50px;}
    .beginner_guide .info-ielts .ielts-module { padding: 20px; border: 1px solid #C5C5C5; margin-top: 16px; }
    .beginner_guide .info-ielts .ielts-module strong { font-size: 15px; line-height: 28px; letter-spacing: -0.3px; }
    .beginner_guide .info-ielts .ielts-module span em { font-weight: bold; }
    .beginner_guide .info-ielts .ielts-module span em::after { content: ''; display: block; }
    .beginner_guide .about-div .example { padding: 55px 20px 25px; }
    .beginner_guide .about-div .example div { height: auto; flex-direction: column; padding: 20px 0; }
    .beginner_guide .about-div .example div span.arrow { transform: rotate(90deg); }
    .beginner_guide .about-div+.about-div:last-child { border-bottom: 0; padding-bottom: 0; }
    .beginner_guide table.bandScore-table { border-left: 0; border-bottom: 0; }
    .beginner_guide table.bandScore-table thead,
    .beginner_guide table.bandScore-table tbody th { display: none; }
    .beginner_guide table.bandScore-table thead th { background: #f6f6f6; border-bottom: 1px solid #C5C5C5; font-weight: normal; font-size: 16px; line-height: 24px; letter-spacing: 0px; color: #333333; }
    .beginner_guide table.bandScore-table,
    .beginner_guide table.bandScore-table tbody,
    .beginner_guide table.bandScore-table tbody td { display: block; }
    .beginner_guide table.bandScore-table tbody td { padding: 12px 8px; }
    .beginner_guide table.bandScore-table td:nth-child(2) { background-color: #f6f6f6; }
    .beginner_guide table.bandScore-table td em.title { font-style: normal; font-weight: bold; display: block; }
    .beginner_guide table.bandScore-table td:nth-child(2) .kor { display: inline; }
    .beginner_guide table.bandScore-table td:nth-child(3) .kor { margin-top: 10px; }
    .beginner_guide table.examType-table,
    .beginner_guide table.examType-table tr,
    .beginner_guide table.examType-table tr td,
    .beginner_guide table.examType-table tr th,
    .beginner_guide table.howtoApp-table,
    .beginner_guide table.howtoApp-table tr,
    .beginner_guide table.howtoApp-table tr td,
    .beginner_guide table.howtoApp-table tr th { display: block; }
    .beginner_guide table.examType-table th,
    .beginner_guide table.howtoApp-table th { border-bottom: 0; padding-bottom: 8px; }
    .beginner_guide table.examType-table td,
    .beginner_guide table.howtoApp-table td { padding-top: 0; }
}