@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

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

    /* 공통 css 시작 */
    .serveTopArea,
    .serveContentArea,
    .lectureSearch {
        margin: 0 auto;
        padding: 0px 3%;
        box-sizing: border-box;
    }

    .click-j {
        background: #0a5ca5;
        color: #fff;
    }

    /* 배너시작 */

    .introduceBanner {
        position: relative;
        background: url(../../_images/introduceBg.png);
        background-size: cover;
        width: 100%;
        height: 200px;
    }

    /* 배너끝 */



    /*탭메뉴 시작*/
    #tab_wrap .nav {
        display: flex;
        justify-content: space-between;
    }

    #tab_wrap .nav li {
        width: 100%;
        line-height: 50px;
    }

    #tab_wrap .nav li a {
        display: block;
        text-align: center;
        background-color: #ddd;
        font-weight: 500;
        border-left: 1px solid #bbb;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    }

    #tab_wrap .nav li a:first-child {
        border-left: none;
    }

    /*탭메뉴 끝*/

    /* Notice 탭메뉴 시작*/
    #noticeTab_wrap .noticeNav {
        display: flex;
        justify-content: space-between;
    }

    #noticeTab_wrap .noticeNav li {
        width: 100%;
        line-height: 50px;
    }

    #noticeTab_wrap .noticeNav li a {
        display: block;
        text-align: center;
        background-color: #ddd;
        font-weight: 500;
        border-left: 1px solid #bbb;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    }

    #noticeTab_wrap .noticeNav li a:first-child {
        border-left: none;
    }

    /*탭메뉴 끝*/

    /* Edu-Tab 탭메뉴 시작*/
    #Edu-tab_wrap .Edu-nav {
        display: flex;
        justify-content: space-between;
		flex-wrap: wrap;
    }

    #Edu-tab_wrap .Edu-nav li {
        width: 25%;
        line-height: 50px;
    }

    #Edu-tab_wrap .Edu-nav li a {
        display: block;
        text-align: center;
        background-color: #ddd;
        font-weight: 500;
        border: 1px solid #bbb;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    }

    #Edu-tab_wrap .Edu-nav li a:first-child {
        border-left: none;
    }

    /* Edu-Tab 탭메뉴 끝*/

    /* mypage-Tab 탭메뉴 시작*/
    #mypage-tab_wrap .mypage-nav {
        display: flex;
        justify-content: space-between;
    }

    #mypage-tab_wrap .mypage-nav li {
        width: 100%;
        line-height: 50px;
    }

    #mypage-tab_wrap .mypage-nav li a {
        display: block;
        text-align: center;
        background-color: #ddd;
        font-weight: 500;
        border-left: 1px solid #bbb;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    }

    #mypage-tab_wrap .mypage-nav li a:first-child {
        border-left: none;
    }

    /* mypage-Tab 탭메뉴 끝*/


    /* 탭 영역 공통부분 시작*/



    .serveContentArea h3 {
        font-weight: 300;
        font-size: 18px;
    }

    /* 탭 영역 공통부분 끝*/


    /*탭1 영역 시작*/
    .serveContentArea h1 {
        margin: 0 4%;
        display: flex;
        justify-content: space-between;
        margin-top: 40px;
        margin-bottom: 15px;
        color: #171717
    }

    .tab1ServeContentArea div:first-child {
        background: #fff6fb;
        padding: 4% 5%;
        margin-top: 30px;
        border-radius: 20px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    }

    .tab1ServeContentArea div:last-child {
        background: #f4f9fb;
        padding: 4% 5%;
        margin-top: 30px;
        border-radius: 20px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    }

    .tab1ServeContentArea h3 {
        margin: 20px 0;
    }

    .introduceIcon {
        display: flex;
        justify-content: space-between;
    }

    .introduceIcon li {
        margin-top: 20px;
        border-radius: 50%;
        overflow: hidden;
        border: 5px solid #fff;
        box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    }

    /*탭1 영역 끝*/

    /*탭2 영역 시작*/
    .tab2ServeContentArea div {
        background: #f4f9f6;
        padding: 4% 5%;
        margin-top: 30px;
        border-radius: 20px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    }

    .tab2ServeContentArea li {
        padding: 1.5%;
        border-bottom: 1px solid #ccc;
    }

    .tab2ServeContentArea li:first-child {
        margin-top: 20px;
    }

    .tab2ServeContentArea h2 {
        margin: 20px 0;
        font-weight: 500;
        line-height: 30px;
        font-size: 20px;
    }

    .tab2ServeContentArea h2 span {
        margin-left: 10px;
        font-weight: 500;
        color: #585858
    }

    .tab2ServeContentArea li:last-child {
        margin-bottom: 20px;
    }

    /*탭2 영역 끝*/

    /*탭3 영역 시작*/
    .tab3ServeContentArea div {
        background: #fff8ec;
        padding: 4% 5%;
        margin-top: 30px;
        border-radius: 20px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    }

    .tab3ServeContentArea h1 {
        font-size: 25px;
        margin: 20px 0;
        margin-top: 30px;
    }

    .tab3ServeContentArea h1:first-child {
        font-size: 33px;
        margin: 0;
        margin-bottom: 50px;
    }

    .tab3ServeContentArea h2 {
        font-size: 23px;
        margin-top: 5px;
        margin-bottom: 10px;

        color: #004ea2;
    }

    .tab3ServeContentArea h3 {
        color: #000;
        font-size: 20px;
        line-height: 38px;
        margin-bottom: 10px;
    }

    .tab3ServeContentArea ul {
        padding: 10px 3% 30px 3%;
        border-bottom: 1px solid #ccc;
    }

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

    .tab3ServeContentArea h3 span {
        color: #19aaa3;
        font-weight: 500;
    }

    .tab3ServeContentArea p {
        float: left;
        margin-right: 10px;
        font-size: 20px;
        background: #63c5c2;
        border-radius: 50%;
        color: #fff;
        font-weight: 400;
        width: 38px;
        height: 36px;
        padding-top: 2px;
        text-align: center;
    }

    /*탭3 영역 끝*/


    /*탭4 영역 시작*/
    .tab4ServeContentArea div {
        background: #f4f9fb;
        padding: 4% 5%;
        margin-top: 30px;
        border-radius: 20px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    }

    .tab4ServeContentArea h1 {
        font-size: 25px;
        margin: 20px 0;
        margin-top: 50px;
        padding-top: 50px;
        border-top: 1px dashed #ccc;
    }

    .tab4ServeContentArea h1:first-child {
        font-size: 33px;
        margin: 0;
        margin-bottom: 50px;
        padding-top: 0;
        border-top: none;
    }

    .tab4ServeContentArea h1:nth-child(2) {
        padding-top: 0;
        border-top: none;
    }

    .tab4ServeContentArea h2 {
        font-size: 20px;
        margin-top: 5px;
        margin-bottom: 10px;

        color: #6292e1;
    }

    .tab4ServeContentArea h3 {
        color: #2b2b2b;
        font-size: 18px;
        line-height: 35px;
    }

    .tab4ServeContentArea ul {
        margin-bottom: 40px;
    }

    .tab4ServeContentArea h3 span {
        color: #65b0ac;
        font-weight: 500;
    }

    /*탭4 영역 끝*/



    .tab1ServeContentArea li {
        width: calc(90%/3);
    }

    .tab1ServeContentArea li img {
        width: 100%;
    }

    .serveContentArea h1 img {
        max-width: 27px;
        margin-right: 10px;
        margin-top: -10px;
        background: #fff;
        padding: 7px;
        border-radius: 50%;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    }

    .introduceEx {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
    }

    .introduceEx li {
        width: calc(90%/3);
        font-size: 18px;
    }


    .serveTopArea {
        padding: 10px 3%;
        display: flex;
        justify-content: space-between;
    }

    .tab4ServeContentArea img {
        width: auto;
        height: auto;
        max-width: 100%;
    }

    .backBtnArea {
        padding-top: 5px;
        line-height: 28px;
        min-width: 32px;
    }

    .backBtnArea a img {
        width: auto;
        height: auto;
        max-width: 22px;
    }


    .serveContentArea {
        margin-bottom: 80px;
    }

    .middleContentArea {
        background: #fff9f0;
        padding: 4% 5%;
        margin-top: 30px;
        border-radius: 20px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    }

    .middleContentArea h1 {
        text-align: left;
    }

    .middleContentArea h2 {
        margin: 20px 0;
    }

    .middleContentArea ul {
        display: flex;
    }

    .middleContentArea ul li {
        width: calc(100%/2);
    }


    .middleContentArea h3 {
        font-size: 18px;
    }

    p.secondTitle {
        font-weight: 500;
        font-size: 28px;
        text-align: center;
        margin-bottom: 50px;
    }

    h3.smallTitle {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 25px;
    }

    .greenFont {
        color: #87c3c1;
    }

    .pinkFont {
        color: #dc8983;
    }

    .redFont {
        color: #e20000;
        font-weight: 500;
    }

    .skyFont {
        color: #004ea2;
        font-weight: 500;
    }

    h3.smallTitle span {
        font-weight: 600;
        color: #004ea2;
    }

    p.secondTitle02 {
        font-weight: 500;
        font-size: 32px;
        text-align: center;
        margin-bottom: 30px;
    }

    .secondInfoP {
        font-size: 18px;
        text-align: center;
        margin-bottom: 70px;
    }

    .secondArea {
        margin-bottom: 50px;
    }

    .secondArea > p {
        line-height: 35px;
        font-size: 18px;
    }

    .secondArea table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        line-height: 28px;
    }

    .secondArea th,
    .secondArea td {
        padding: 20px;
        box-sizing: border-box;
        border: 1px solid #444444;
    }

    .secondArea th {
        background-color: #004ea2;
        color: #ffffff;
        border-right: 1px solid #fff;
    }

    .thirdArea {
        margin-bottom: 30px;
        padding-left: 20px;
    }

    .secondArea p {
        line-height: 26px;
    }

    .secondArea p:not(:last-of-type) {
        margin-bottom: 10px;
    }

    /* 공통 css 끝 */


    /* 로그인 시작 */
    .loginArea .user-box {
        position: relative;
    }

    .loginTop {
        margin-top: 60px;
        margin-bottom: 40px;
    }

    .loginTop li img {
        width: auto;
        height: auto;
        max-width: 250px;
        margin-bottom: 20px;
    }

    .loginTop li p {
        font-size: 20px;
        line-height: 30px;
        font-weight: 400;
    }

    .loginArea .user-box {
        border-bottom: 1px solid #979797;
    }

    .loginArea .user-box:first-of-type {
        margin-bottom: 30px;
    }

    .loginArea .user-box:nth-of-type(2) {
        margin-bottom: 50px;
    }

    .loginArea .user-box input {
        width: 100%;
        padding: 20px 0 10px 0;
        font-size: 20px;
        border: none;
        outline: none;
        background: transparent;
    }

    .loginArea .user-box label {
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px 0 20px 0;
        font-size: 1.3rem;
        color: #979797;
        transition: .25s;
    }

    .loginArea .user-box input:focus ~ label,
    .loginArea .user-box input:valid ~ label {
        top: -20px;
        left: 0;
        color: #004ea2;
        font-size: 1.05rem;
    }

    .loginArea form a {
        color: #fff;
    }

    .loginBottom ul {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        align-items: center;
        margin-left: 12px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 3%;
        padding-bottom: 4%;
    }

    .loginBottom ul li {
        font-size: 22px;
        line-height: 20px;
        display: inline-block;
        padding: 0 50px;
        box-sizing: border-box;
    }

    .loginBottom ul li {
        border-right: 1px solid #000;
    }

    .loginBottom ul li:last-of-type {
        border-right: none
    }

    .blueBtn {
        background: #585858;
        text-align: center;
        line-height: 50px;
        border-radius: 5px;
        width: 100%;
        margin: 4% auto;
    }

    .blueBtn a {
        color: #fff;
    }

    /* 로그인 끝 */

    /* 아이디찾기, 비밀번호찾기 시작*/
    .searchBox {
        margin-bottom: 25px;
        padding: 5% 3%;
        /* background: #f8f8f8;*/
    }

    .searchBox ul li {
        display: flex;
    }

    .searchBox ul li div {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: center;
    }

    .searchBox ul li:not(:last-of-type) {
        margin-bottom: 2%;
    }

    .searchBox ul li label {
        display: block;
        font-size: 18px;
        width: 140px;
        margin-right: 10px;
        line-height: 35px;
    }

    .searchBox ul li input {
        font-size: 18px;
        padding: 0px 10px;
        box-sizing: border-box;
        border-radius: 5px;
        line-height: 35px;
        border: 1px solid #ccc;
    }

    .searchBox ul li input:focus {
        border-color: #004ea2;
        outline: none;
        box-shadow: 0px 8px 20px -13px rgba(0, 78, 162, 0.35);
    }

    .searchBox ul li input#searchName,
    .searchBox ul li input#searchID {
        width: 70%;
    }

    .searchBox ul li div {
        width: 70%;
    }

    .searchBox ul li input#searchYear {
        width: 33%;
    }

    .searchBox ul li input#searchMonth {
        width: 30%;
    }

    .searchBox ul li input#searchDay {
        width: 30%;
    }

    .searchBox ul li input#searchPhone1,
    .searchBox ul li input#searchPhone2,
    .searchBox ul li input#searchPhone3 {
        width: 33%;
    }

    .searchBox ul li span {
        font-size: 20px;
        color: #979797;
    }

    .yearBox span {
        margin-left: 10px;
    }

    .yearBox span:not(:last-of-type) {
        margin-right: 10px;
    }

    .phoneBox span {
        margin: 0 10px;
    }

    /* 아이디찾기, 비밀번호찾기 끝 */

    /* 내정보 시작 */
    .none {
        margin: 3%;
        font-weight: 300;
        font-size: 18px;
        text-align: center;
        color: #585858;
        padding: 10% 0;
        width: 94%;
        background: #fff;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    }

    .mypageTop {
        margin-top: 30px;
    }

    .mypageInner {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: center;
        background-color: #fff;
        padding: 30px 20px;
        box-sizing: border-box;
        border-radius: 5px;
        box-shadow: 0px 3px 10px 6px #eeeeee;
    }

    .mypageInner li {
        font-size: 22px;
    }

    .mypageInner li a span {
        font-weight: 500;
        color: #004ea2;
    }


    .mypageInner li:last-of-type {
        border: 1px solid #979797;
        padding: 0px 15px;
        border-radius: 5px;
        text-align: center;
        line-height: 30px;
        min-height: 32px;
        font-size: 20px;
    }

    .mypageInner li.loginOff {
        /* display: none; */
        display: block;
    }

    .mypageInner li.loginOn {
        /* display: block; */
        display: none;
    }

    .mypageMenuInner ul {
        padding: 30px 0;
    }

    .mypageMenuInner ul {
        border-bottom: 1px solid #ddd;
    }

    .mypageMenuInner ul li p {
        color: #909090;
        font-size: 20px;
        margin-bottom: 20px;
    }

    .mypageMenuInner ul li a {
        font-weight: 500;
        font-size: 22px;
        line-height: 36px;
    }

    .mypageMenuInner ul li:not(:last-of-type) {
        margin-bottom: 20px;
    }

    .logoutArea {
        margin-top: 30px;
        text-align: center;
    }

    .logoutArea a {
        font-size: 20px;
        color: #909090;
    }

    /* 내정보 끝 */

    /* 개인정보변경 시작 */
    .formArea {
        margin-top: 50px;
    }

    .questionForm h4 {
        margin-bottom: 30px;
        font-size: 18px;
    }

    .formArea ul {
        margin: 5% 0;
        padding: 5% 3%;
        margin-bottom: 50px;
        background: #f8f8f8;
    }

    .formArea ul li {
        font-size: 20px;

        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
    }

    .formArea ul li div {
        width: 100%;

        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
    }

    .formArea ul li:not(:last-of-type) {
        margin-bottom: 10px;
    }


    .formArea ul li p {
        min-width: 140px;
        font-weight: 300;
        font-size: 18px;
    }

    .formArea ul li p:first-child {
        font-size: 15px;
        font-weight: 300;
    }

    .formArea ul li input,
    .formArea ul li select {
        height: 35px;
        margin: 2px 0;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding-left: 10px;
    }

    .formArea ul li input[type="text"],
    .formArea ul li input[type="password"],
    .formArea ul li select.consultSelect {
        width: 100%;
        height: 45px;
    }

    .formArea .formTel {
        width: 45%;
    }

    .formArea ul li span {
        margin: 0 10px;
    }

    .formArea ul li input:focus,
    .formArea ul li select:focus,
    .formArea ul li textarea:focus {
        border-color: #004ea2;
        outline: none;
        box-shadow: 0px 8px 20px -13px rgba(0, 78, 162, 0.35);
    }

    .formArea ul li select#mobile01,
    .formArea ul li select#phone01 {
        width: 100%;
        height: 45px;
    }

    .formArea ul li input#zipCode {
        width: 100%;
    }

    .formArea ul li select#email01,
    .formArea ul li select#email02 {
        width: 100%;
    }

    .formArea ul li select#selectEmail {
        width: 100%;
        height: 45px;
    }

    .formArea ul li button#zipCodebtn {
        background-color: #999999;
        height: 45px;
        width: 25%;
        border: none;
        font-size: 14px;
        padding: 0px 10px;
        box-sizing: border-box;
        border-radius: 5px;
        color: #ffffff;
        margin-left: 5px;
    }

    .formArea label {
        font-size: 18px;
        margin-right: 30px;
        vertical-align: middle;
    }

    .formArea a {
        color: #fff;
    }

    #sendEmail,
    #sendSMS,
    #marketingYN {
        accent-color: #004ea2;
        width: 18px;
        height: 18px;
        margin-right: 5px;
    }

    p.redpoint {
        position: relative;
    }

    p.redpoint::after {
        content: "*";
        color: #ee0000;
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50px;
        top: -2px;
        margin-left: 2px;
    }

    /*
    p.mobileP {
        text-indent: -9999px;
    }*/
    /* 개인정보변경 끝 */

    /* 1:1 상담문의 시작 */
    .formArea textarea {
        width: 100%;
        min-height: 150px;
        overflow-y: scroll;
        padding: 10px;
        box-sizing: border-box;
        font-size: 18px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }

    /* 1:1 상담문의  끝 */

    /* 서비스 이용약관 , 개인정보처리방침 시작 */
    .serveContentArea .agreeArea {
        width: 100%;
        background: #f8f8f8;
    }

    .serveContentArea .agreeArea h1 {
        padding: 3%;
    }

    .agreeArea div.agreeBox {
        padding: 0 3% 5% 3%;
    }

    .agreeArea h2 {
        text-align: center;
        font-size: 22px;
        margin-bottom: 10px;
        color: #004ea2;
    }

    .agreeArea h3 {
        font-size: 22px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 10px;
    }

    .agreeArea h4 {
        font-size: 15px;
        font-weight: 300;
    }

    .agreeArea h5 {
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #666;
        padding: 20PX 0;
    }

    .agreeArea h5:nth-child(3) {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #000;
        margin-bottom: 30px;
    }

    .agreeArea ul {
        margin-bottom: 40px;
    }

    .agreeArea ul li {
        display: flex;
        justify-content: space-between;
    }

    .agreeArea ul li:last-child {
        background: #fff;
        padding: 2% 3%;
        font-size: 14px;
        color: #666;
        font-weight: 100;
        border: 1px solid #ddd;
        height: 100px;
        overflow-y: auto;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    }

    .agreeArea ul li:last-child::-webkit-scrollbar {
        width: 20px;
        background: #ddd;
    }

    .agreeArea ul li:last-child::-webkit-scrollbar-thumb {
        background: #5594c1;
        border-radius: 7px;
        height: 30px;
        background-clip: padding-box;
        border: 2px solid transparent;
    }

    .agreeBox button {
        width: calc(98%/2);
        height: 45px;
        margin: 0 3px;
        border: 1px solid #5594c1;
        font-size: 16px;
        background: #fff;
        font-weight: 300;
        border-radius: 5px;
    }

    .agreeBox .agreeBtn {
        background: #5594c1;
        color: #fff;
    }

    .agree-Btn {
        display: flex;
    }



    /* 서비스 이용약관 ,  개인정보처리방침 끝 */

    /* 가입여부확인 및 본인인증 시작 */
    .agreeSelfArea div.agreeSelfBox {
        margin: 5% 0;
        ;
        padding: 5% 3%;
        margin-bottom: 50px;
        background: #f8f8f8;
    }

    .agreeSelfArea h2 {
        text-align: center;
        text-align: left;
        font-size: 22px;
        margin-top: 40px;
        margin-bottom: 20px;
        color: #004ea2;
    }

    .agreeSelfArea img {
        padding-right: 10px;
    }

    .agreeSelfArea h3 {
        font-size: 22px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 10px;
    }

    .agreeSelfArea h4 {
        font-size: 18px;
        font-weight: 600;
        line-height: 40px;
    }

    .agreeSelfArea h5 {
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #666;
        padding: 20PX 0;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #000;
        margin-bottom: 50px;
        margin-top: 30px;
    }

    .agreeSelfBox ul {
        display: flex;
        margin-bottom: 10px;
    }

    .agreeSelfBox-info:last-child li button {
        border: none;
        width: 300%;
        height: 40px;
        margin-top: 2px;
        border-radius: 5px;
        background: #19aaa3;
        color: #fff;

    }

    .agreeSelfBox .agreeSelfBox-info li:first-child {
        width: 100px;
    }

    .agreeSelfBox input {
        height: 40px;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding-left: 10px;
    }

    .agreeSelfBox .agreeSelfBox-info #birth {
        width: 45.5%;
    }

    .agreeSelfBox .agreeSelfBox-info #phone {
        width: 30%;
    }

    .agreeSelfBox .agreeSelfBox-info #phone:first-child {
        width: 24.4%;
        border: 1px solid #ccc;
        height: 40px;
        border-radius: 5px;
        text-align: center;
        font-size: 18px;
    }


    .agreeSelfBox > ul > li > button {
        width: 100px;
        height: 40px;
        background: #585858;
        border: none;
        color: #fff;
        font-weight: 300;
        border-radius: 5px;
    }

    .agreeSelfBox .btnArea {
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    .agreeSelfBox .btnArea button {
        width: 300px;
        height: 40px;
        border-radius: 5px;
        border: none;
        background: #19aaa3;
        color: #fff;
    }

    .agreeSelfBox .cert > li {
        width: 100%;
    }

    .agreeSelfBox .cert > li button {
        background: #585858;
        margin: 0px 10px;
        width: 96%;
        height: 50px;
        text-align: center;
        color: #fff;
    }

    .agreeSelfArea p {
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #666;
        padding-bottom: 20px;
    }

    /* 가입여부확인 및 본인인증 끝 */


    /* 정보입력 시작 */
    .joinInfoArea div.joinInfoBox {
        margin: 5% 0;
        ;
        padding: 5% 3%;
        margin-bottom: 50px;
        background: #f8f8f8;
    }

    .joinInfoArea h2 {
        font-size: 20px;
        margin-bottom: 25px;
        color: #004ea2;
    }

    .joinInfoArea h3 {
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        color: #000;
        margin-bottom: 10px;
    }

    .joinInfoArea h4 {
        font-size: 15px;
        font-weight: 500;
    }


    .joinInfoBox ul {
        /* display: flex; */
        margin: 20px 0;
    }

    .joinInfoBox ul li:first-child {
        width: 150px;
    }

    .joinInfoBox li input {
        height: 35px;
        margin: 2px 0;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding-left: 10px;
        width: 100%;
    }

    .joinInfoBox .j-checkBox {
        width: 25px;
        height: 15px;
    }

    .joinInfoBox .postBtn {
        height: 35px;
        width: 100px;
        margin-left: 10px;
        background: #585858;
        color: #fff;
        border: none;
        border-radius: 5px;
    }

    .joinInfoBox .btnArea {
        width: 100%;
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid #ccc;
        text-align: center;
    }

    .joinInfoBox .btnArea button {
        width: 300px;
        height: 40px;
        border-radius: 5px;
        border: none;
        background: #19aaa3;
        color: #fff;
    }

    .joinInfoBox .btnArea button a {
        color: #fff;
    }

    .join01 {
        display: flex;
    }

    .join01 button {
        width: 30%;
        margin-top: 3px;
        height: 35px;
        margin-left: 5px;
        background: #004ea2;
        color: #fff;
        border: none;
        border-radius: 5px;
        font-weight: 300;
    }

    .join02 input {
        background: #d7d7d7
    }



    .join06 input {
        background: #d7d7d7
    }

    .join06 li:last-child {
        display: flex;
        line-height: 40px;
    }

    .join07 li:last-child {
        display: flex;
        line-height: 40px;
    }

    .join08 {
        display: flex;
    }

    .join08 {
        display: flex;
    }

    .join08 button {
        width: 30%;
        margin-top: 3px;
        height: 35px;
        margin-left: 5px;
        background: #004ea2;
        color: #fff;
        border: none;
        border-radius: 5px;
        font-weight: 300;
    }

    /* 정보입력 끝 */

    /* 이상에듀 소개 시작 */
    .nayaInform {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;

        padding: 20px 0;
        border: 1px solid #999999;
        text-align: center;
    }

    .nayaInform li {
        flex-basis: 33%;
    }

    .nayaInform li img {
        display: block;
        text-align: center;
        margin: 0 auto 5px auto;
    }

    .nayaInform li:not(:last-of-type) {
        border-right: 1px solid #999999;
    }

    .nayaInform li strong {
        font-size: 20px;
        font-weight: bold;
    }

    .nayaInform li p {
        color: #999999;
        font-size: 15px;
    }

    .nayaImg {
        width: 340px;
        height: 340px;
        border-radius: 50%;
        margin-left: 200px;
    }

    /* 이상에듀 소개 끝 */


    /* 인증현황 시작 */
    .certify02 {
        text-align: center;
    }

    .certify02 > li {
        width: 46%;
        margin-bottom: 50px;
    }

    .certify02 > li:nth-of-type(odd) {
        margin-right: 7%;
    }

    .certify02 li {
        text-align: center;
        display: inline-block;
        vertical-align: top;
    }

    .info02 {
        vertical-align: top;
    }

    .info02 h1 {
        font-weight: 600;
        margin-bottom: 15px;
        font-size: 24px;
    }

    .certify02 img {
        overflow: hidden;
    }

    .certifyList02 li {
        display: block;
        line-height: 24px;
    }

    /* 인증현황 끝 */

    /* 찾아오시는길 시작 */
    .location {
        box-shadow: 0px 4px 10px #999999;
    }

    .locationInner {
        margin-top: 50px;
    }

    .locationInner ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: center;
    }

    .locationInner strong {
        font-weight: 600;
        font-size: 24px;
        line-height: 35px;
    }

    .locationInner p {
        font-size: 18px;
        height: 75px;
        margin-top: 10px;
    }

    .locationInner li {
        vertical-align: top;
        display: inline-block;
    }

    .locationInner li:last-of-type {
        width: 50%;
        border-left: 1px solid #919191;
        box-sizing: border-box;
        padding-left: 30px;
    }

    /* 찾아오시는길 끝 */

    /* 법정의무교육 시작 */
    .courtDutyInner {
        margin: 0 auto;
        text-align: center;

        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 30px;
    }

    .courtDutyInner > div {
        width: 47%;
        height: 100%;
        padding: 30px 20px;
        box-sizing: border-box;
        background-color: #b1b1b1;
    }

    .courtDutyInner div div {
        min-height: 230px;
        margin-top: 50px;
        padding: 25px 0;
        background-color: rgba(255, 255, 255, 0.83);
    }

    .courtDutyInner h3 {
        font-size: 28px;
        min-height: 80px;
        color: #fff;
        text-shadow: 2px 3px 3px #505050;
    }

    .dataTitle {
        font-size: 20px;
        color: #e20000;
        margin-bottom: 30px;
        line-height: 24px;
    }

    .dataTitle span {
        font-weight: 600;
        font-size: 24px;
    }

    .dataContent {
        font-size: 18px;
        margin-bottom: 20px;
        line-height: 24px;
    }

    .dataContent span {
        font-weight: 600;
    }

    .courtDutyInner > div:first-of-type {
        background: url('../../_images/courtDuty01.png')no-repeat left top;
        background-size: cover;
    }

    .courtDutyInner > div:nth-of-type(2) {
        background: url('../../_images/courtDuty02.png')no-repeat left top;
        background-size: cover;
    }

    .courtDutyInner > div:nth-of-type(3) {
        background: url('../../_images/courtDuty03.png')no-repeat left top;
        background-size: cover;
    }

    .courtDutyInner > div:nth-of-type(4) {
        background: url('../../_images/courtDuty04.png')no-repeat left top;
        background-size: cover;
    }

    .courtDutyInner > div:nth-of-type(5) {
        background: url('../../_images/courtDuty05.png')no-repeat left top;
        background-size: cover;
    }

    .courtDutyInner > div:nth-of-type(6) {
        background: url('../../_images/courtDuty06.png')no-repeat left top;
        background-size: cover;
    }

    /* 법정의무교육 끝 */


    /* 과정개발절차 시작  */
    .developmentContent {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 3%;
    }

    .developmentContent > div {
        border: 1px solid #999999;
        border-radius: 10px;
        flex-basis: 31.2%;
        padding: 30px 15px;
        box-sizing: border-box;
        margin-bottom: 30px;
    }

    .developmentContent div h3 {
        text-align: center;
        font-size: 20px;
        margin-bottom: 5px;
    }

    .developmentContent div.underLine {
        width: 40px;
        height: 4px;
        text-align: center;
        margin: 0 auto;
        background-color: #004ea2;
        margin-bottom: 20px;
    }

    /* 과정개발절차 끝  */



    /* visual Bg 시작*/
    .visual img {
        width: 100%;
    }

    /* visual 끝*/


    /* benefit 혜택 시작 */
    .benefitAreaWrap {
        background: #f4f4f4;
        padding: 8% 3%;
        text-align: center;
    }

    .benefitAreaWrap ul {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }

    .benefitAreaWrap .benefitCard {
        width: 70%;
        margin: 0 auto;
        margin-top: 20px;
    }

    .benefitAreaWrap ul li h4 {
        font-weight: 300;
        height: 25px;
    }

    .benefitAreaWrap ul li h3 {
        font-size: 20px;
        height: 50px;
        color: #0b0e38;
        font-weight: 700;
    }

    .benefitAreaWrap ul li {
        padding: 2% 1%;
        width: 220px;
        text-align: center;
        background: #fff;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
    }

    /* benefit 혜택 끝 */

    /* professorArea 시작 */

    .professorArea img {
        width: 100%;
        object-fit: cover;
    }

    .professorArea h1 {
        text-align: center;
        color: #fff;
        font-weight: 600;
    }

    .professorArea .prefessorAreaWrap ul {
        display: flex;
        justify-content: space-between;
    }

    .professorArea .prefessorAreaWrap ul li {
        width: calc(90%/2);
    }

    .professorArea .prefessorAreaWrap ul li:first-child {
        display: none;
    }

    .professorArea .prefessorAreaWrap ul li:nth-child(2) {
        padding: 3% 1%;
    }

    .professorArea .prefessorAreaWrap ul li img {
        width: 100%;
    }

    .lectureComplete ul > li {
        text-align: center;
    }


    .professorArea h4 {
        font-weight: 200;
        font-size: 18px;
        color: #fff;
        line-height: 30px;
        padding-left: 20px;
    }

    .socialmain img {
        width: 100%;
    }

    /* professorArea 끝 */

    /* ExamGuide 시작*/
    .examGuideWrap {
        padding: 5% 3%;
        padding-bottom: 10%;
    }

    .examGuideWrap h2 {
        background: #000;
        color: #fff;
        padding: 1% 3%;
        letter-spacing: 1px;
        text-align: center;
        width: 25%;
        margin: 0 auto;
        border-radius: 10px;
        font-size: 20px;
    }

    .examGuideWrap h1 {
        text-align: center;
        padding: 2% 0;
    }

    .examGuideWrap h3 {
        color: #000;
        text-align: left;
        font-weight: 600;
    }

    .examGuideWrap h4 {
        font-weight: 400;
    }

    .examGuideWrap .examTable {
        margin: 0 auto;
        margin-top: 2%;
        width: 100%;
    }

    .examGuideWrap .examTable th,
    td {
        line-height: 27px;
        border: 1px solid #d0dec3;
        border-top: none;
        text-align: center;
        padding: 1%;
    }

    .examGuideWrap .examTable thead {
        background: #e2f2d5;
        border: 1px solid #e2f2d5;
        color: #000;
    }

    .examGuideWrap .examTable thead th {
        font-weight: 400;
        border: 1px solid #ccc;
    }

    .examGuideWrap .examTable caption {
        line-height: 50px;
        font-weight: 500;
        font-size: 20px;
        color: #68844e
    }

    .landingArea img {
        width: 100%;
        margin-bottom: 50px;
    }

    /* ExamGuide 끝*/

    /* lectureAll 시작 */

    .lectureAll-h1 {
        padding: 0 3%;
        margin-top: 30px;
    }

    .lectureAll-div {
        margin: 50px 0;
    }

    .lectureAll {
        display: flex;
        padding: 0 3%;
        margin-bottom: 12px;
    }

    .lectureAll h1 {
        border-radius: 5px;
        padding: 1% 0;
        text-align: center;
        margin-top: 30px;
        margin-bottom: 15px;
    }

    .lectureAll li {
        position: relative;
        width: calc(98%/2);
        margin: 0 3px;
        box-sizing: border-box;
    }

    .lectureAll li img {
        width: 100%;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
        border-radius: 5px;
    }

    .lectureAll p {
        z-index: 100;
        position: absolute;
        top: 40%;
        padding: 2% 0;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        width: 100%;
        font-weight: 600;
        color: #fff;
        text-align: center;
        font-size: 25px;
    }

    .lectureAll li:first-child {
        margin-right: 1%;
    }

    /* lectureAll 끝 */


    /* mypage 시작 */
    .mypage-tab h1 {
        text-align: center;
        margin: 30px 0;
    }

    .mypage-tab span {
        color: #19aaa3;
        font-weight: 500;
    }



    /* tab1 영역시작 */

    .tab1-lectureTable {
        padding: 3%;
        margin: 0 3%;
        margin-top: 50px;
        margin-bottom: 50px;
        border: 1px solid #ccc;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    }

    .tab1-lectureTable h2 {
        margin-bottom: 20px;
        font-size: 25px;
    }



    .tab1-lecture {
        display: flex;
        margin-bottom: 10px;
    }

    .tab1-mypage-cert {
        display: flex;
        justify-content: space-between;
    }

    .tab1-mypage-cert li {
        padding: 7px 0;
        width: 100%;
        border: 1px solid #ccc;
        text-align: center;
        font-size: 18px;
    }

    .tab1-lecture h3 {
        font-weight: 400;
    }

    .tab1-lecture button {
        padding: 7px 40px;
        margin-right: 7px;
        margin-top: 5px;
        font-size: 18px;
        color: #fff;
        border: none;
        border-radius: 5px;
        background: #19aaa3;
    }

    .tab1-lecture button:last-child {
        background: #e64a4a;
    }

    .tab1-lecture li:first-child img {
        margin-right: 3%;
        width: 97%;
    }

    .tab1-lecture li:last-child {
        padding-top: 15px;
        width: 100%;
    }

    .tab1-lecture li h1 {
        text-align: left;
        font-size: 18px;
        font-weight: 400;
        margin: 0;
    }

    .tab1-mypage-cert span {
        background: #585858;
        color: #fff;
        font-weight: 300;
        padding: 1px 8px;
        border-radius: 5px;
    }

    /* mypage slide 영역 */
    .slideDown {
        width: 100%;
        text-align: center;
        padding: 5px 0;
        margin: 20px 0;
        background: #585858;
    }

    .slideUp {
        width: 100%;
        text-align: center;
        padding: 5px 0;
        margin: 20px 0;
        background: #585858;
    }

    .slideDown a {
        color: #fff;
    }

    .slideUp a {
        color: #fff;
    }

    .tab1-test {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    .tab1-test li {
        width: 32%;
        border-radius: 20px;
        padding: 10px 0;
        text-align: center;
        background: #83c0eb;
        color: #fff;
        font-size: 20px;
        font-weight: 400;
    }

    .tab1-test li > span {
        color: #fff;
    }

    .tab1-test li > img {
        margin-top: -5px;
    }

    .tab1-test li h4 {
        font-size: 17px;
        color: #fff;
        font-weight: 300;
        padding-top: 3px;
    }

    .tab1-table thead th {
        text-align: center;
        line-height: 40px;
    }

    .tab1-table thead th:nth-child(2) {
        border: 1px dashed #ccc;
    }

    .tab1-table tr > td:nth-child(2) {
        text-align: left;
        line-height: 23px;
    }

    .tab1-table button {
        width: 100%;
        height: 40px;
        margin: 3px 0;
        background: #ccc;
        border-radius: 5px;
        border: none;
    }

    .tab1-table button:last-child {
        background: #585858;
        color: #fff;
        border: none;
    }

    /* tab2 영역시작 */
    .mypage-tab #tab2 .tab2-title {
        padding: 10px 0;
        height: auto;
        text-align: center;
        font-weight: 500;
        background: #ffefcc;
        margin: 0 3%;

    }

    .tab2-lectureTable {
        padding: 3%;
        margin: 0 3%;
        margin-top: 50px;
        border: 1px solid #ccc;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    }

    .lectureTable h2 {
        margin-bottom: 20px;
        font-size: 25px;
    }

    .tab2-lecture {
        display: flex;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .tab2-mypage-cert {
        display: flex;
        justify-content: space-between;
    }

    .tab2-mypage-cert li {
        padding: 7px 0;
        width: 100%;
        border: 1px solid #ccc;
        text-align: center;
        font-size: 18px;
    }

    .tab2-lecture h3 {
        font-weight: 400;
    }

    .tab2-lecture button {
        padding: 7px 40px;
        margin-right: 7px;
        margin-top: 5px;
        font-size: 18px;
        color: #fff;
        border: none;
        border-radius: 5px;
        background: #19aaa3;
    }

    .tab2-lecture button:last-child {
        background: #e64a4a;
        margin-top: 30px;
    }

    .tab2-lecture li:first-child img {
        margin-right: 3%;
        width: 97%;
    }

    .tab2-lecture li:last-child {
        padding-top: 15px;
        width: 100%;
    }

    .tab2-lecture li h1 {
        text-align: left;
        font-size: 18px;
        font-weight: 400;
        margin: 0;
    }

    .mypage-cert span {
        background: #585858;
        color: #fff;
        font-weight: 300;
        padding: 1px 8px;
        border-radius: 5px;
    }

    /* mypage slide 영역 */
    .slideDown {
        width: 100%;
        text-align: center;
        padding: 5px 0;
        margin: 20px 0;
        background: #585858;
    }

    .slideUp {
        width: 100%;
        text-align: center;
        padding: 5px 0;
        margin: 20px 0;
        background: #585858;
    }

    .slideDown a {
        color: #fff;
    }

    .slideUp a {
        color: #fff;
    }

    .tab2-test {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    .tab2-test li {
        width: 32%;
        border-radius: 20px;
        padding: 10px 0;
        text-align: center;
        background: #83c0eb;
        color: #fff;
        font-size: 16px;
        font-weight: 400;
    }

    .tab2-test li > img {
        margin-top: -5px;
    }

    .tab2-test li h4 {
        font-size: 14px;
        color: #fff;
        font-weight: 300;
        padding-top: 3px;
    }

    .tab2-table thead th {
        text-align: center;
        line-height: 40px;
        border: 1px solid #ccc;
    }

    .tab2-table tr > td:nth-child(2) {
        text-align: left;
        line-height: 23px;
    }

    .tab2-table button {
        padding: 4px 10px;
        margin: 3px 0;
        background: #ccc;
        border-radius: 5px;
        border: none;
    }

    .tab2-table button:last-child {
        background: #585858;
        color: #fff;
        border: none;
    }

    /* tab2 수강후기 팝업 시작*/

    .mypageReview {
        position: fixed;
        top: 10%;
        width: 80%;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        padding: 20px 3% 50px 3%;
    }

    .mypageReview div h1 {
        border-bottom: 1px dashed #ccc;
        padding-bottom: 20px;
        font-size: 23px;
        margin: 5px 0 20px 0;
    }

    .mypageReview div ul {
        width: 100%;
        margin-bottom: 80px;
    }

    .mypageReview div ul li:first-child {
        margin-bottom: 10px;
        font-size: 18px;
    }

    .rating {
        position: absolute;

    }

    .rating label {
        float: right;
        position: relative;
        width: 40px;
        height: 40px;
        cursor: pointer;
    }

    .rating label:not(:first-of-type) {
        padding-right: 2px;
    }

    .rating label:before {
        content: "\2605";
        font-size: 42px;
        color: #ccc;
        line-height: 1;
    }

    .rating input {
        display: none;
    }

    .rating input:checked ~ label:before,
    .rating:not(:checked) > label:hover:before,
    .rating:not(:checked) > label:hover ~ label:before {
        color: #f9df4a;
    }

    .mypageReview div ul li textarea {
        border: 1px solid #ccc;
        padding: 1% 2%;
        border-radius: 5px;
        font-size: 16px;
        letter-spacing: .3px;
        font-weight: 300;
        width: 96%;
        height: 200px;
    }

    .mypageReview .reviewBtn {
        display: flex;
        width: 100%;
        margin-top: 30px;
    }

    .mypageReview .reviewBtn button {
        width: 100%;
        height: 45px;
        border: 1px solid #585858;
        background: #fff;
        font-size: 16px;
    }

    .mypageReview p {
        font-size: 14px;
        color: #777;
        font-weight: 300;
    }

    .mypageReview .reviewBtn button:first-child {
        background: #585858;
        color: #fff;
        border: 1px solid #585858;
    }

    .reviewBg {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .7);
        width: 100%;
        height: 100%;
    }

    /* tab2 수강후기 팝업 끝 */

    /* mypage table 공통 시작*/
    .mypageContentArea table {
        width: 94%;
        padding: 0 3%;
        margin: 0 auto;
        margin-bottom: 80px;
        text-align: center;
        border-top: 2px solid #585858;
        border-bottom: 2px solid #585858;
    }

    .mypageContentArea tr {
        border-top: 1px solid #ccc;
    }

    .mypageContentArea thead {
        line-height: 50px;
        font-size: 18px;
    }

    .mypageContentArea td {
        border: none;
        font-size: 18px;
        margin: 15px 1%;
    }

    .mypageContentArea td:nth-child(2) {
        text-align: left;
        font-weight: 300;
        font-size: 17px;
    }

    /* mypage tab3 시작*/
    .tab3-mypage ul li.lectureList a {
        display: block;
        padding: 30px 3% 35px 3%;
        box-sizing: border-box;
    }

    .lectureTitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .tab3-mypage {
        margin-bottom: 30px;
    }

    .tab3-mypageList {
        margin: 0 3%;
        border: 1px solid #ccc;
        padding-bottom: 20px;
        padding-top: 20px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    }

    .tab3-mypageList div {
        padding: 0 3%;
        display: flex;
        /*justify-content: space-between; */
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 25px;
        position: relative;
    }

    .tab3-mypageList div img {
        height: auto;
        width: auto;
        max-width: 35%;
        padding-top: 5px;
    }

    .tab3-mypageList div ul li span {
        background: #a3a3a3;
        color: #fff;
        font-weight: 300;
        padding: 3px 10px;
        font-size: 16px;
        border-radius: 5px;
    }

    .tab3-mypageList div ul li:first-of-type {
        margin-bottom: 5px;
    }

    .tab3-mypageList div ul li h3 {
        font-size: 22px;
        color: #000;
        text-align: left;
        padding: 1% 0;
        font-weight: 700;
    }

    .tab3-mypageList .infoList {
        display: flex;
    }

    .tab3-mypageList .infoList li:first-child h4 {
        font-weight: 500;
    }

    .tab3-mypageList .infoList h4 {
        font-weight: 300;
        line-height: 28px;
        font-size: 18px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .tab3-mypageList .infoList li:first-child {
        width: 130px;
    }

    .tab3-mypageList .infoList li:last-child {
        width: 290px;
    }

    .infoList .blueBg {
        background: #36c8b9;
        padding: 1px 10px;
    }

    .infoList .yellowBg {
        background: #f6af16;
        padding: 1px 10px;
    }

    .tab3-mypageList div ul li p {
        font-size: 18px;
        line-height: 28px;
    }

    .tab3-mypageList .applyBox {
        padding: 0 3%;
        display: flex;
        width: 100%;
        margin-top: 20px;
    }

    .tab3-mypageList .applyBox li {
        width: calc(95%/2);
    }


    .tab3-mypageList .applyBox li button {
        width: 98%;
        height: 50px;
        border-radius: 5px;
        background: #fff;
        border: 1px solid #ccc;
    }

    .tab3-mypageList .applyBox li:first-child button {
        background: #0ac6c8;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        border: none;
    }

    /* mypage tab4 시작*/
    #tab4 .tab4-table td:nth-child(3) {
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    /* mypage tab5 시작 */
    .tab5-mypage ul li.lectureList a {
        display: block;
        padding: 30px 3% 35px 3%;
        box-sizing: border-box;
    }

    .lectureTitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .tab5-mypage {
        margin-bottom: 30px;
    }

    .tab5-mypageList {
        margin: 0 3%;
        border: 1px solid #ccc;
        padding-bottom: 20px;
        padding-top: 20px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    }

    .tab5-mypageList div {
        padding: 0 3%;
        display: flex;
        /*justify-content: space-between; */
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 25px;
        position: relative;
    }

    .tab5-mypageList div img {
        height: auto;
        width: auto;
        max-width: 35%;
        padding-top: 5px;
    }

    .tab5-mypageList div ul li span {
        background: #a3a3a3;
        color: #fff;
        font-weight: 300;
        padding: 3px 10px;
        font-size: 16px;
        border-radius: 5px;
    }

    .tab5-mypageList div ul li:first-of-type {
        margin-bottom: 5px;
    }

    .tab5-mypageList div ul li h3 {
        font-size: 22px;
        color: #000;
        text-align: left;
        padding: 1% 0;
        font-weight: 700;
    }

    .tab5-mypageList .infoList {
        display: flex;
    }

    .tab5-mypageList .infoList li:first-child h4 {
        font-weight: 500;
    }

    .tab5-mypageList .infoList h4 {
        font-weight: 300;
        line-height: 28px;
        font-size: 18px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .tab5-mypageList .infoList li:first-child {
        width: 130px;
    }

    .tab5-mypageList .infoList li:last-child {
        width: 290px;
    }

    .infoList .blueBg {
        background: #36c8b9;
        padding: 1px 10px;
    }

    .infoList .yellowBg {
        background: #f6af16;
        padding: 1px 10px;
    }

    .infoList .redBg {
        background: #ff0066;
        padding: 1px 10px;
    }

    .infoList .greenBg {
        background: #009900;
        padding: 1px 10px;
    }

    .tab5-mypageList div ul li p {
        font-size: 18px;
        line-height: 28px;
    }

    .tab5-mypageList .applyBox {
        padding: 0 3%;
        display: flex;
        width: 100%;
        margin-top: 20px;
    }

    .tab5-mypageList .applyBox li {
        width: 94%;
    }


    .tab5-mypageList .applyBox li button {
        width: 100%;
        height: 50px;
        border-radius: 5px;
        background: #fff;
        border: 1px solid #ccc;
    }

    .tab5-mypageList .applyBox li:first-child button {
        background: #0ac6c8;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        border: none;
    }

    .tab7mypageContentArea > div {
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
        margin: 0 3%;
        padding: 10% 7%;
        display: flex;
        margin-bottom: 80px;
    }

    .tab7mypageContentArea h3 {
        margin-left: 40px;
        color: #000;
        font-size: 20px;
        font-weight: 300;
    }

    .tab7mypageContentArea span {
        font-size: 20px;
        color: #0ac6c8;
    }

    /* mypage 끝 */


    /*  lecture 시작 */
    .lectureBannerWrap {
        padding: 0 3%;
    }

    /*
    .lectureBanner {
        background: linear-gradient(45deg, #58a8f9, #5176ee);
        padding: 20px 3%;
        color: #fff;
        font-size: 28px;
        font-weight: 500;
        margin-bottom: 30px;
        border-radius: 5px;

        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: center;
    } 

    .lectureBanner ul li span {
        animation: blink-effect 1.5s step-end infinite;
    }

    .lectureBanner ul li:first-of-type {
        margin-bottom: 10px;
    }

    @keyframes blink-effect {
        50% {
            opacity: 0;
        }
    }*/

    .lectureSearch {
        margin-bottom: 30px;
    }

    .lectureSearch h3 {
        text-align: center;
        padding: 10px 0;
        background: #575757;
        color: #fff;
    }

    .lectureSearch h3:last-child {
        background: #fff;
        color: #575757;
        box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    }

    .lectureSearch-wrapper {
        margin-top: 30px;
    }

    .search-wrapper {
        border: 2px solid #004ea2;
        background-color: #fff;
        border-radius: 50px;
        padding: 0 10px;
        box-sizing: border-box;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        overflow: hidden;
        margin: 20px 0;
    }

    .search-wrapper .search-input {
        border: none;
        flex: 1;
        outline: none;
        height: 40px;
        padding-left: 30px;
        margin-right: 2%;
        /* padding: 0 40px; */
        box-sizing: border-box;
        font-size: 18px;
        border-radius: 10px;
    }

    .lectureSearch .searchCategory {
        margin-right: 2%;
        font-size: 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
        text-align: center;
        height: 40px;
    }

    .lectureSearch .searchCategory option {
        font-size: 15px;
    }

    .search-wrapper button {
        background-color: transparent;
        border: none;
    }

    .search-wrapper img {
        max-width: 40px;
    }
    
	.searchStyle{
		background-color: #004ea2;
		padding: 15px;
        margin-right: -10px;
	}

    .scrollMenuArea {
        border-bottom: 1px solid #a3a3a3;
    }

    .scrollMenuArea .slide-box .slide-item {
        display: flex;
        align-items: center;
        min-width: 130px;
        padding: 10px;
        box-sizing: border-box;
        font-size: 20px;
        text-align: center;
        border-radius: 0px;
    }

    .scrollMenuArea .slide-box .slide-item a {
        color: #a3a3a3;
        font-weight: 400;
    }

    .scrollMenuArea .slide-box .active {
        border-bottom: 2px solid #004ea2;
    }

    .scrollMenuArea .slide-box .active a {
        color: #004ea2;
        font-weight: 500;
    }

    /* paypopup 영역 시작 */
    .payPopup {
        z-index: 100000;
        position: fixed;
        left: 5%;
        top: 15%;
        padding: 6% 4%;
        background: #fff;
        width: 80%;
        border-radius: 20px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    }

    .payPopup h3 {
        background: #585858;
        color: #fff;
        text-align: center;
        padding: 1% 0;
        font-weight: 400;
        font-size: 16px;
        margin-top: 20px;
    }

    .payPopup h4 {
        font-size: 16px;
        color: #000;
        line-height: 25px;
    }

    .payPopup ul {
        display: flex;
        margin: 8px 0;
    }

    .payPopup h5 {
        padding: 1% 2%;
        font-weight: 300;
        border: 1px solid #ccc;
        border-top: none;
        margin-bottom: 20px;

    }

    .payPopup ul li:first-child {
        width: 270px;
    }

    .payPopup button {
        width: calc(98%/2);
        height: 40px;
        border-radius: 5px;
        border: none;
        margin-top: 20px;
        margin: 20px 3px;
    }

    .payPopup .payPopup-input input {
        width: 130px;
        height: 30px;
        border: 1px solid #585858;
        border-radius: 5px;
        padding-left: 10px;
        background: #edf6f9
    }

    .bgcolor {
        z-index: 1000;
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: .7
    }

    /* paypopup 영역 끝 */

    .lectureWrap ul li.lectureList {
        display: block;
        padding: 30px 3% 35px 3%;
        box-sizing: border-box;
    }

    .lectureTitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .mobilePossible {
        position: absolute;
        left: 10px;
        top: 15px;
        background-color: #33cccc;
        width: 130px;
        color: #fff;
        padding: 8px 10px;
        box-sizing: border-box;
        border-radius: 5px;
        text-align: center;
        margin-bottom: 10px;
        line-height: 16px;
    }

    /*.lectureList:not(:last-of-type) {*/
    .lectureList{
		border-bottom: 10px solid #f4f4f4;
        padding: 30px 3% 35px 3%;
    }

    .lectureList div {
        display: flex;
        /*justify-content: space-between; */
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 25px;
        position: relative;
    }

    .lectureList div img {
        height: auto;
        width: auto;
        max-width: 35%;
        padding-top: 5px;
    }

    .lectureList div ul li span {
        background: #a3a3a3;
        color: #fff;
        font-weight: 300;
        padding: 3px 10px;
        font-size: 16px;
        border-radius: 5px;
    }

    .lectureList div ul li:first-of-type {
        margin-bottom: 5px;
    }

    .lectureList div ul li h3 {
        font-size: 22px;
        color: #000;
        text-align: left;
        padding: 1% 0;
        font-weight: 700;
    }

    .lectureList .infoList {
        display: flex;
    }

    .lectureList .infoList li:first-child h4 {
        font-weight: 500;
    }

    .lectureList .infoList h4 {
        font-weight: 300;
        line-height: 28px;
        font-size: 18px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .lectureList .infoList li:nth-child(2) h4:nth-child(2) {
        text-decoration: line-through;
        color: #e20000;
    }

    .lectureList .infoList h4:first-child {}

    .lectureList .infoList li:first-child {
        width: 130px;
    }

    .lectureList .infoList li:last-child {
        width: 290px;
    }

    .infoList .blueBg {
        background: #36c8b9;
        padding: 1px 10px;
    }

    .infoList .yellowBg {
        background: #f6af16;
        padding: 1px 10px;
    }

    .lectureList div ul li p {
        font-size: 18px;
        line-height: 28px;
    }

    .lectureList .applyBox {
        width: 100%;
        margin-top: 20px;
    }

    .lectureList .applyBox li button {
        width: 100%;
        height: 45px;
        background: #fff;
        border: 1px solid #ccc;
    }

    .lectureList .applyBox li:first-child button {
        background: #0ac6c8;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        border: none;
    }



    /*  lecture 끝 */

    /* lectureView 시작 */
    .lectureViewArea {
        margin-bottom: 50px;
    }

    .lectureViewArea div.lectureImgWrap {
        text-align: center;
        padding-bottom: 30px;
    }

    .lectureImgWrap ul {
        display: flex;
    }

    .lectureImgWrap ul li {
        text-align: left;
        

    }

    .lectureImgWrap ul:first-child li:first-child {
        width: 40%;
        margin-right: 3%;
    }

    .lectureImgWrap ul:first-child li:last-child{
        width: 54%;
    }

    .lectureImgWrap ul:first-child li:first-child img {
        width: 100%;
    }

    .lectureImgWrap ul:first-child li:first-child h4 {
        display: flex;
        justify-content: space-between;
    }

    .lectureImgWrap ul:first-child li:first-child h4 span {
        width: 33%;
        text-align: center;
        margin-top: 7px;
    }

    .lectureImgWrap span {
        background: #ccc;
        padding: 1px 8%;
        font-weight: 700;
    }

    .lectureImgWrap .span_bg1 {
        background: #36c8b9;
        padding: 1px 3%;
        color: #fff;
        font-weight: 300;
        margin-right: 5%;
    }

    .lectureImgWrap .span_bg2 {
        background: #f6af16;
        padding: 1px 3%;
        color: #fff;
        font-weight: 300;
        margin-right: 5%;
    }

    .lectureImgWrap .span_bg3 {
        background: #e767f5;
        padding: 1px 3%;
        color: #fff;
        font-weight: 300;
    }

    .lectureImgWrap ul h3 {
        color: #000;
        font-size: 25px;
        font-weight: 700;
        text-align: left;
        margin: 3% 0;
    }

    .lectureImgWrap ul h4 {
        font-weight: 300;
        margin-bottom: 1%;
    }

    .lectureImgWrap table {
        width: 100%;
        margin-top: 10px;
        border: 1px solid #ccc;
    }

    .lectureButton li {
        width: calc(100%/2);
    }

    .lectureButton li button {
        width: 100%;
        background: #fff;
        border: none;
        margin-top: 20px;
        height: 50px;
        border: 1px solid #ccc;
    }

    .lectureButton li:first-child button {
        background: #c0d5ff;
        border: none;
    }

    .lectureComplete ul {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }


    .lectureComplete ul li {
        position: relative;
        width: 220px;
        height: 220px;
        padding-top: 10px;
        background: #d8e37f;
        border-radius: 50%;
        text-align: center;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    }

    .lectureComplete ul li h2 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%)translateY(-50%);
        font-size: 23px;
        width: 220px;
    }

    .lectureComplete ul li h2 > span {
        font-weight: 300;
        font-size: 18px;
    }

    .lectureComplete h4 {
        font-size: 20px;
        margin-top: 5%;
        text-align: center;
        background: #ffd885;
        padding: 2% 0;
    }

    .lectureComplete h4 span {
        background: #f8f4d5;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        border-radius: 5px;
        padding: 2px 4%;
        font-weight: 300;
        margin-left: 3%;
    }

    .lectureBox {
        border: 2px solid #a9cef5;
        outline: 3px solid #daf1ef;
        outline-offset: -11px;
        padding: 6% 4%;
        margin-bottom: 4%;
        border-radius: 10px;
    }

    .lectureBox h3 {
        font-size: 23px;
        color: #2784e7;
        font-weight: 700;
        text-align: left;
        padding-bottom: 10px;
    }

    .lectureBox p {
        font-size: 18px;
        line-height: 35px;
        color: #262626;
    }

    .lectureBox p img {
        margin: 20px 0;
    }

    .lectureBox table {
        width: 100%;
        table-layout: fixed;
        word-break: break-all;
        border-collapse: collapse;
        line-height: 28px;
        text-align: center;
    }

    .lectureBox th,
    .lectureBox td {
        padding: 12px;
        box-sizing: border-box;
        border: 1px solid #444444;
    }

    .lectureBox th {
        background-color: #004ea2;
        color: #ffffff;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
    }

    .lectureSnsArea li {
        display: inline-block;
    }

    .lectureSnsArea li:not(:last-of-type) {
        margin-right: 25px;
    }

    /* lectureView 끝 */

    /* lectureReview 수강후기 시작*/
    .lectureReview {
        padding: 0 3%;
        margin-bottom: 100px;
    }

    .lectureReview .lectureReviewTitle {
        display: flex;
        justify-content: space-between;
        line-height: 50px;
    }

    .lectureReviewTable {
        border-top: 1px solid #ccc;
    }


    .lectureReview .lectureReviewTitle h4 {
        padding-top: 5px;
    }

    .lectureReviewTable .reviewContent a ul {
        display: flex;
        justify-content: space-between;
        font-weight: 600;
    }

    .reviewContent {
        padding: 2% 1%;
        border-bottom: 1px solid #ccc;
    }

    .reviewContent a ul li h4 {
        font-weight: 300;
        font-size: 17px;
        letter-spacing: -0.4px;
        flex-basis: 70%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        margin-top: 4px;
    }

    .reviewContent a:hover ul > li > h4 {
        overflow: visible;
        display: block
    }



    /* lectureReview 수강후기 끝*/


    /* board 시작 */
    .boardBg {
        background: url(../../_images/noticeBg.png) no-repeat 100%;
        background-size: cover;
        width: 100%;
        height: 300px;
    }

    .boardBg img {
        display: none;
    }

    .lectureBg {
        background: url(../../_images/lectureBg.png) no-repeat 100%;
        background-size: cover;
        width: 100%;
        height: 300px;
    }

    .lectureBg img {
        display: none;
    }

    .mypageBg {
        background: url(../../_images/mypageBg.png) no-repeat 100%;
        background-size: cover;
        width: 100%;
        height: 300px;
    }

    .mypageBg img {
        display: none;
    }

    .introBg {
        background: url(../../_images/introBg.png) no-repeat 100%;
        background-size: cover;
        width: 100%;
        height: 300px;
    }

    .introBg img {
        display: none;
    }

    .boardArea {
        margin: 0 3%;
        margin-bottom: 70px;
        border-top: 1px solid #a3a3a3;
        border-bottom: 1px solid #a3a3a3;
    }

    .boardArea .boardList {
        border-bottom: 1px solid #ddd;
    }

    .boardArea .boardList:last-child {
        border-bottom: none;
    }

    .boardArea ul {
        padding: 0 3%;
        box-sizing: border-box;
    }


    .boardArea ul li a {
        display: block;
        padding: 10px 0px;
    }

    .tab2noticeContentArea .boardArea {
        margin-bottom: 30px;
    }

    .tab6noticeContentArea .boardArea {
        margin-bottom: 30px;
    }

    .tab6noticeContentArea ul li a:hover h3 {
        overflow: visible;
        display: block
    }

    .boardArea ul li a div {
        line-height: 45px;
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        line-height: 27px;
    }

    .boardArea ul li a h4 {
        text-align: right;
        width: 150px;
        font-weight: 300;
        color: #585858
    }

    .boardArea ul li a div p {
        font-weight: 300;
        width: 150px;
        text-align: right;
        color: #585858
    }

    .boardArea .boardListReview a ul {
        display: flex;
        justify-content: space-between;
        padding: 0;
    }

    .boardArea .boardListReview a ul > li:first-child {
        width: 70%;
    }

    .boardArea .boardListReview a ul > li:first-child h2 {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding-top: 5px;
        font-size: 20px;
    }

    .boardArea .boardListReview a ul > li:first-child span {
        background: #004ea2;
        color: #fff;
        font-weight: 300;
        padding: 0 10px;
        padding-bottom: 1px;
        border-radius: 30px;
        font-size: 16px;
        margin-right: 10px;
    }

    .boardArea ul li a div img {
        width: 100%;
        height: 100%;
        max-width: 36px;
    }

    .boardArea ul li a div h2 {
        margin-right: 25px;
        width: 13%;
        text-align: center;
        font-size: 22px;
        font-weight: 500;
    }

    .boardArea ul li a h3 {
        font-weight: 300;
        font-size: 17px;
        letter-spacing: -0.4px;
        flex-basis: 70%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        margin-bottom: 10px;
    }


    .runningTime {
        border: 4px solid #96d7d4;
        outline: 2px solid #b9dedc;
        outline-offset: -11px;
        margin: 3%;
        margin-bottom: 7%;
        padding: 4% 13%;
        background: #fdfdfa;
        display: flex;
        justify-content: space-between;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        border-radius: 10px;
    }

    .runningTime h1 {
        padding-top: 12px;
        color: #19aaa3;
        font-size: 40px;
    }

    .runningTime h4 {
        font-size: 20px;
        font-weight: 400;
        color: #3e3e3e
    }

    /* board 끝 */

    /* noticeContentArea 시작 */

    .noticeContentArea .title {
        margin: 0 4%;
        display: flex;
        justify-content: space-between;
        margin-top: 40px;
        margin-bottom: 15px;
    }

    .noticeContentArea .title h1 {
        color: #0a5ca5;
    }

    .noticeContentArea .title h2 a {
        font-size: 18px;
        background: #004ea2;
        color: #fff;
        font-weight: 300;
        padding: 2px 15px;
        margin-top: 10px;
        border-radius: 20px;
        line-height: 30px;
    }

    /* noticeTab2 pagination 시작*/
    #noticeTab2 .pagination {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        margin-bottom: 70px;
        width: 180px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    #noticeTab2 .pagination li {
        width: 36px;
        line-height: 35px;
    }

    #noticeTab2 .pagination h4 {
        font-weight: 300;
        text-align: center;
        font-size: 25px;
        border-right: 1px solid #ccc;
    }

    #noticeTab2 .pagination li:nth-child(2) h4 {
        border-left: 1px solid #ccc;
    }

    #noticeTab2 .pagination h5 {
        line-height: 28px;
        font-weight: 300;
        text-align: center;
        font-size: 25px;
    }

    /* noticeTab2 pagination 끝*/

    /* noticeTab6 pagination 시작*/
    #noticeTab6 .pagination {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        margin-bottom: 70px;
        width: 180px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    #noticeTab6 .pagination li {
        width: 36px;
        line-height: 35px;
    }

    #noticeTab6 .pagination h4 {
        font-weight: 300;
        text-align: center;
        font-size: 25px;
        border-right: 1px solid #ccc;
    }

    #noticeTab6 .pagination li:nth-child(2) h4 {
        border-left: 1px solid #ccc;
    }

    #noticeTab6 .pagination h5 {
        line-height: 27px;
        font-weight: 300;
        text-align: center;
        font-size: 25px;
    }

    /* noticeTab6 pagination 끝*/

    #noticeTab5 .inquiry {
        padding: 0 3%;
    }

    #noticeTab5 .inquiry h3 {
        margin: 3% 0;
    }

    #noticeTab5 .qna p {
        display: flex;
        font-size: 20px;
        margin-bottom: 1%;
    }

    #noticeTab5 .la {
        line-height: 35px;
        width: 15%;
        font-weight: 500;
        display: inline-block;
        font-size: 20px;
        margin-right: 2%;
    }

    #noticeTab5 input {
        width: 100%;
        font-size: 20px;
        padding-left: 10px;
        height: 45px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }

    #noticeTab5 #f2 {
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 40%;
        text-align: center;
        height: 45px;
        font-size: 20px;
    }

    #noticeTab5 #f4 {
        width: calc(75%/2)
    }

    #noticeTab5 textarea {
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 5px;
    }


    #noticeTab5 .btnArea {
        width: 100%;
        text-align: center;
        margin-top: 3%;
    }

    #noticeTab5 button {
        width: 50%;
        height: 45px;
        font-size: 120%;
        border: none;
        background: #004ea2;
        color: #fff;
        border-radius: 5px;
        margin-bottom: 30px;
    }

    /* noticeTab5 끝*/

    /* noticeTab6 시작*/
    #noticeTab6 .boardListReview {
        margin-bottom: 10px;
        padding: 1% 2%;
    }

    #noticeTab6 .boardListReview h2 {
        font-size: 20px;
        margin-bottom: 5px;
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #000;
    }

    #noticeTab6 .boardListReview h3 {
        font-size: 20px;
        margin-bottom: 10px;
        font-weight: 400;
        letter-spacing: -0.4px;
        text-align: left;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    #noticeTab6 .boardListReview h4 {
        font-size: 16px;
        font-weight: 400;
    }

    #noticeTab6 #list07 ul {
        width: 100%;
    }


    /* noticeTab6 끝*/
    /* noticeContentArea 끝 */



    /* boardView 시작 */
    .boardViewTop {
        border-bottom: 1px solid #909090;
    }

    .boardViewTitle {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .boardViewTop ul {
        display: flex;
        justify-content: space-between;
        padding: 0 3%;
    }

    .boardViewTop ul li {
        text-align: center;
        
    }

    .boardViewTop ul li:nth-child(2) {
        border-left: 1px solid #f8f8f8;
        border-right: 1px solid #f8f8f8;
    }

    .boardViewTop h3 {
        color: #000;
        text-align: left;
        background: #f8f8f8;
        padding: 2%;
    }

    .boardViewTop p {
        font-size: 18px;
        color: #818181;
        line-height: 50px;
        font-weight: 300;
        font-size: 16px;
    }

    .boardViewTop span {
        padding: 1px 1%;
        background: #83c0eb;
        border-radius: 5px;
        margin-right: 2%;
        font-weight: 400;
        font-size: 16px;
        color: #fff;
    }

    .addfileArea {
        margin-top: 10px;
        padding: 8px 0 6px 0;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
        background-color: #777;
        border-radius: 5px;
    }

    .addfileArea a {
        color: #fff;
        padding: 10px 20px;
        box-sizing: border-box;
    }

    .addfileArea a img {
        width: 100%;
        height: 100%;
        max-width: 32px;
        margin-right: 5px;
    }

    .infoContent {
        /* border-bottom: 1px solid #ddd; */
        padding: 30px;
        margin-bottom: 50px;
    }

    /* boardView 끝 */

    /* nextBtn 시작 */
    .nextBtn ul {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
    }

    .nextBtn ul:first-child {
        border-top: 1px solid #ccc;
    }

    .nextBtn ul a {
        padding: 2% 3%;
    }

    .nextBtn ul a h4{
        font-weight: 400;
    }

    .nextBtn .listbtn {
        margin-top: 3%;
        background: #83c0eb;
        text-align: center;
        line-height: 50px;
        border-radius: 5px;
        color: #fff;
    }

    /* nextBtn 끝 */

    /* 자주묻는질문 시작 */
    .faqTop10 {
        margin-bottom: 50px;
    }

    .faqTop10 .faqTopItem {
        width: 180px;
        padding: 15px;
        background-color: #f3faff;
        border: 1px solid #dfebf3;
        border-radius: 10px;
        min-height: 120px;
        font-size: 18px;
    }

    .faqTop10 .faqTopItem li:first-of-type p {
        margin-bottom: 5px;
        color: #004ea2;
        font-size: 20px;
        font-weight: 500;
    }

    .faqTop10 .faqTopItem li:nth-of-type(2) p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .faqArea ul li {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;

        padding: 30px 0px;
    }

    .faqArea ul {
        padding: 0 3%;
    }

    .faqArea ul li:not(:last-of-type) {
        border-bottom: 1px solid #ddd;
    }

    .faqArea ul li a {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .faqArea ul li p {
        font-size: 22px;
    }

    .faqArea ul li img {
        max-width: 36px;
        margin-right: 5px;
    }

    /* 자주묻는질문 끝 */

    /* 자주묻는질문 자세히보기 시작 */
    .faqViewTop {
        border-top: 1px solid #909090;
        border-bottom: 1px solid #909090;
        padding: 30px 0;
        margin-bottom: 35px;
    }

    .faqViewTop img {
        margin-bottom: 15px;
    }

    .faqViewTitle {
        font-size: 22px;
    }

    /* 자주묻는질문 자세히보기 끝 */

    /* 중간평가 시작 */
    .testTop {
        position: relative;
        margin-top: -30px;
        margin-bottom: 30px;
        background: #f2f6f7;
        padding: 2% 3%;
    }

    .testTop ul div {
        padding: 0 10px;
        position: absolute;
        right: 30px;
        display: flex;
        justify-content: space-between;
        width: 65px;
        text-align: center;
        border: 1px solid #ccc;
        background: #fff;
    }

    .testTop ul div h4 {
        font-size: 14px;
    }

    .testTop ul div p {
        padding-top: 5px;
    }

    .testTop ul {
        border-bottom: 1px dashed #ccc;
        padding-bottom: 10px;
        display: flex;
        line-height: 30px;
        font-size: 20px;
    }

    .testTop ul:first-child {
        margin-bottom: 10px;
    }

    .testTop ul:first-child li:first-child {
        background: #fff;
        font-size: 16px;
        padding: 0 8px;
        border-radius: 20px;
        font-weight: 300;
        box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
    }

    .testTop h2 {
        margin-left: 2%;
        width: 100%;
        font-size: 19px;
    }

    .testTop p {
        margin-left: 10px;
        margin-top: -5px;
        font-weight: 300;
        font-size: 14px;
        color: #585858
    }

    .testResultNotice {
        display: flex;
        padding: 1% 3%;
        background: #4e88e9;
        margin-top: -30px;
        margin-bottom: 30px;
    }

    .testResultNotice img {
        max-width: 60px;
        margin-top: 10px;
        margin-right: 20px;
    }

    .testTop img {
        max-width: 20px;
        margin-right: 10px;
    }

    .testResultNotice h3 {
        font-size: 16px;
        color: #fff;
    }

    .testResultNotice h4 {
        font-size: 13px;
        font-weight: 300;
        color: #fff;
    }

    .testResultNotice h4 span {
        font-weight: 600;
        color: #ccc;
        padding: 0 1%;
    }

    /* 중간평가 끝 */

    /* 학습강의 시작 */


    .studyPlayer .contentPlayer {
        width: 100%;
        overflow: hidden;
        background: #ccc;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    }

    .playerNotice {
        display: flex;
        justify-content: space-between;
        background: #4e88e9;
        padding: 7px 3%;
    }

    .playerNotice img {
        margin-top: -3px;
        max-width: 22px;
        margin-right: 7px;
    }

    .playerNotice p {
        border-radius: 10px;
        font-size: 14px;
        color: #fff;
        font-weight: 300;
    }


    .playertitle {
        padding: 5px 3%;
        background: #f8f8f8;
    }

    .playertitle2 {
        padding: 0 3%;
        background: #f8f8f8
    }

    .playertitle2 span {
        width: 150px;
        color: #585858;
        text-align: right;
        font-size: 16px;
        letter-spacing: 1px;
    }

    .playertitle2 button {
        width: 20%;
        height: 25px;
        margin: 0 2%;
        background: #ccc;
        border: none;
        border-radius: 10px;
    }

    .studyPlayer h1 {
        display: flex;
        justify-content: space-between;
        font-weight: 400;
        font-size: 23px;
        color: #3e3e3e;
    }

    .studyPlayer h1 button {
        background: #fff;
        border: 1px solid #ccc;
        width: 163px;
        border-radius: 4px;
    }

    .studyPlayer h4 {
        display: flex;
        justify-content: space-between;
        line-height: 50px;
        margin-top: -10px;
    }

    .studyPlayer h4 p {
        font-size: 14px;
        font-weight: 400;
        color: #585858;
    }

    .playerList li {
        margin: 3%;
        padding: 1% 1%;
    }

    .playerList li h3 {
        margin-bottom: 5px;
        font-weight: 400;
        margin-right: 3%;
    }

    .playerList li textarea {
        width: 100%;
        height: 100px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .playerList li h3 img {
        max-width: 16px;
        margin-top: -6px;
        margin-right: 7px;
    }

    .playerList li p {
        display: flex;
        justify-content: space-between;
        font-weight: 400;
        color: #585858;
        line-height: 25px;
    }

    .playerList li p button {
        background: #4e88e9;
        border: none;
        color: #fff;
        font-weight: 300;
        height: 30px;
        border-radius: 5px;
        width: 150px;
    }

    .playerBack {
        border-top: 1px dashed #ccc;
        padding: 4% 3%;
    }

    .playerBack button {
        width: 100%;
        height: 45px;
        background: #777;
        border: none;
        color: #fff;
        font-size: 18px;
        border-radius: 5px;
    }

    /* 학습강의 끝 */

    /* 학습강의 HTML 시작 */

    .playerNoticeHtml {
        display: flex;
        justify-content: space-between;
        background: #4e88e9;
        padding: 7px 3%;
    }

    .playerNoticeHtml img {
        margin-top: -3px;
        max-width: 22px;
        margin-right: 7px;
    }

    .playerNoticeHtml p {
        border-radius: 10px;
        font-size: 14px;
        color: #fff;
        font-weight: 300;
    }
    
    .playertitleHtml {
        /* padding: 10px 3%; */
        background: #242424;
    }

    .studyPlayerHtml h1 {
        display: flex;
        justify-content: space-between;
        font-weight: 400;
        font-size: 23px;
        color: #fff;
    }

    .studyPlayerHtml h1 button {
        background: #fff;
        border: 1px solid #ccc;
        width: 163px;
        border-radius: 4px;
    }

    .studyPlayerHtml h4 {
        display: flex;
        justify-content: space-between;
        line-height: 40px;
    }

    .playerBackHtml {
        padding: 3% 3%;
    }

    .playerBackHtml button {
        width: 100%;
        height: 45px;
        background: #777;
        border: none;
        color: #fff;
        font-size: 18px;
        border-radius: 5px;
    }

    /* 학습강의 HTML 끝 */

    /* 나의강의실 공통 시작 */
    .progressBannerWrap {
        padding: 0 3%;
    }

    .progressBanner ul {
        display: flex;

        line-height: 50px;
    }

    .testTop ul li img {
        max-width: 30px;
        margin-right: 10px;
        margin-left: 5px;
    }

    .testTop ul li:nth-of-type(2) p {
        color: #e70000;
        font-size: 18px;
        margin-bottom: 8px;
    }

    .progressBanner ul li:nth-of-type(3) {
        font-size: 22px;
    }

    .progressBanner ul li span {
        position: relative;
        color: #e70000;
    }

    .progressBanner ul li span::before {
        content: "";
        background-color: #f82525;
        position: absolute;
        left: 0px;
        bottom: -2px;
        z-index: -1;

        width: 100%;
        height: 2px;

    }

    .progressMenu {
        border-bottom: 1px solid #a3a3a3;
    }

    .progressMenu ul {
        padding: 0 3%;
    }

    .progressMenu ul li {
        text-align: center;
        display: inline-block;
        width: 48%;

        padding: 10px;
        box-sizing: border-box;
        font-size: 20px;
        text-align: center;
        border-radius: 0px;
    }

    .progressMenu ul li a {
        color: #a3a3a3;
        font-weight: 400;
    }

    .progressMenu ul li.active {
        border-bottom: 2px solid #004ea2;
    }

    .progressMenu ul li.active a {
        color: #004ea2;
        font-weight: 500;
    }

    ul.progressTop li:first-of-type {
        margin-bottom: 5px;
    }

    .progressList:not(:last-of-type) {
        border-bottom: 10px solid #f4f4f4;
    }

    .progressList div ul li span.listSubTitle {
        color: #a3a3a3;
        font-size: 20px;
    }

    .progressList a {
        display: block;
        padding: 30px 3% 50px 3%;
        box-sizing: border-box;
    }

    .progressList div ul.progressTop {
        margin-bottom: 20px;
    }

    .progressList div ul li p {
        font-size: 18px;
        line-height: 28px;
    }

    .progressListTitle {
        font-size: 22px;
        margin-bottom: 25px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .progressViewInfo .magnitude {
        margin-bottom: 30px;
    }

    .magnitude {
        border: 1px solid #ddd;
    }

    .magnitude .magnitudeTitle {
        font-weight: 500;
        font-size: 18px;
        padding: 15px 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
        background-color: #f3faff;
    }

    .magnitudeInfo {
        padding: 20px;
        box-sizing: border-box;
    }

    .magnitudeInfo ul {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
    }

    .magnitudeInfo ul li {
        font-size: 18px;

        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
    }

    .magnitudeInfo ul li:first-of-type {
        margin-right: 30px;
    }

    .magnitudeInfo ul li h3 {
        font-size: 20px;
    }

    .magnitudeInfo ul li h4 {
        font-weight: 500;
        margin-right: 15px;
    }

    .magnitudeInfo ul li span {
        font-weight: 500;
        font-size: 22px;
    }

    .span01 {
        color: #0361cb;
    }

    .span02 {
        color: #00c1de;
    }

    .circle01 {
        position: relative;
        padding-left: 15px;
    }

    .circle01::before {
        position: absolute;
        content: "";
        background-color: #0361cb;
        width: 8px;
        height: 8px;
        border-radius: 10px;
        left: 0;
        top: 12px;
    }

    .magnitudeBar {
        margin-top: 30px;
    }

    .magnitudeBar ul li:first-of-type {
        min-width: 90px;
    }

    .magnitudeBar .grayBar {
        width: 100%;
        background-color: #ddd;
        height: 30px;
        border-radius: 5px;
        position: relative;
    }

    .magnitudeBar .gradientBar {
        position: absolute;
        width: 80%;
        height: 30px;
        background: repeating-linear-gradient(45deg, #007bff, #007bff 10px, #268fff 0, #268fff 20px);
        border-radius: 5px 0px 0px 5px;
    }

    .magnitudeBar .gradientBar p,
    .magnitudeBar .colorBar p {
        text-align: right;
        padding-right: 10px;
        color: #fff;
    }

    .magnitudeBar .colorBar {
        position: absolute;
        width: 80%;
        height: 30px;
        background-color: #a3a3a3;
        border-radius: 5px 0px 0px 5px;
    }

    .quizAnswer {
        display: flex;
    }

    .quizAnswer ul {
        display: flex;
        width: calc(100%/5);
        border: 1px solid #ccc;
        border-left: none;
        margin-bottom: 3px;
    }

    .quizAnswer ul:first-child {
        border-left: 1px solid #ccc;
    }

    .quizAnswer ul li {
        line-height: 40px;
        width: 50%;
        text-align: center;
    }

    .myTestArea {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: center;


        text-align: center;

    }

    .myTestArea div {
        border: 1px solid #ddd;
        flex-basis: 31%;
    }

    .myTestArea .myTestTitle {
        font-size: 18px;
        font-weight: 500;
        padding: 10px 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
        background-color: #f3faff;

        margin-bottom: 10px;
    }

    .myTestArea ul li:nth-of-type(2) {
        padding-bottom: 10px;
    }


    .progressViewArea {
        margin-bottom: 50px;
    }

    .progressBox {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;

        padding: 30px 0px;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
    }

    .blueFont,
    .magnitudePercent {
        color: #004ea2;
        font-size: 18px;
        font-weight: 500;
    }

    .nogazeFont {
        color: #e70000;
        font-size: 18px;
        font-weight: 500;
    }

    .testFont {
        color: #91bd09;
        font-size: 18px;
        font-weight: 500;
    }

    .testbg {
        background-color: rgba(145, 189, 9, 0.1);
    }

    .assignmentbg {
        background-color: rgba(255, 165, 81, 0.15);
    }

    .progressViewInfo {
        border-top: 1px solid #909090;
        border-bottom: 1px solid #909090;
        padding: 30px 0px;
        box-sizing: border-box;
    }

    .progressViewInfo > ul {
        margin-bottom: 20px;
    }

    .progressViewInfo > ul li:first-of-type {
        margin-bottom: 5px;
    }

    .progressViewInfo > ul li span {
        color: #a3a3a3;
        font-size: 20px;
    }

    .progressViewInfo > ul li p {
        font-size: 18px;
    }

    .progressViewInfo > ul li h3 {
        font-size: 22px;
        margin-bottom: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .progressBox div:first-of-type {
        width: 20%;
        text-align: center;
    }

    .progressBox div:nth-of-type(2) {
        width: 60%;
        line-height: 28px;
    }

    .progressBox div:nth-of-type(3) {
        width: 20%;
        padding-right: 3%;
    }

    .progressBoxTitle {
        padding-right: 5px;
        box-sizing: border-box;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .progressBoxBtn ul li {
        width: 100%;
        height: 38px;
        line-height: 38px;
        text-align: center;
        border-radius: 5px;
    }

    .continueBtn {
        border: 1px solid #ddd;
        margin-bottom: 10px;
        margin-right: 10px;
    }

    .signupBtn {
        background-color: #004ea2;
    }

    .signupBtn a {
        color: #fff;
    }

    .testBtn {
        background-color: #91bd09;
        margin-bottom: 10px;
    }

    .testBtn a {
        color: #fff;
    }

    /* 나의강의실 공통 끝 */

    /* 학습 유의사항 시작 */
    .certNotice {
        background: #f8f8f8;
        padding: 3% 5%;
        margin-bottom: 20px;
    }

    .certNoticeTop {
        margin: 0 auto;
        width: 255px;
        margin-bottom: 40px;

        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
    }

    .certNoticeTop li:first-of-type {
        margin-right: 15px;
    }

    .certNoticeTop li {
        display: inline-block;
    }

    .certNoticeTop img {
        max-width: 40px;
    }

    .certNoticeTop li p {
        color: #e70000;
        font-size: 25px;
        font-weight: 600;
    }

    .certNoticeContent {
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc;
    }

    .certNoticeContent li {
        font-size: 58px;
        font-weight: 300;
        margin-bottom: 15px;
    }

    /* 학습 유의사항 끝 */




    /* 나의강의실 평가 유의사항 시작 */
    .testNotice {
        background: #f8f8f8;
        padding: 3% 5%;
        margin-bottom: 20px;
    }

    .testNoticeTop {
        margin: 0 auto;
        width: 255px;
        margin-bottom: 40px;

        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
    }

    .testNoticeTop li:first-of-type {
        margin-right: 15px;
    }

    .testNoticeTop li {
        display: inline-block;
    }

    .testNoticeTop img {
        max-width: 40px;
    }

    .testNoticeTop li p {
        color: #e70000;
        font-size: 25px;
        font-weight: 600;
    }

    .testNoticeContent {
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc;
    }

    .testNoticeContent li {
        font-size: 18px;
        font-weight: 300;
        margin-bottom: 15px;
    }

    .agreeArea {
        width: 500px;
        margin: 0 auto;
        padding-bottom: 10px;
    }

    .agreeArea input[type="checkbox"] {
        margin-right: 8px;
        accent-color: #004ea2;
    }

    .agreeArea label {
        font-size: 18px;
        line-height: 25px;
    }

    /* 나의강의실 평가 유의사항 끝 */

    /* 평가 페이지 시작 */
    .testListArea {
        padding: 0 3%;
        margin-top: 50px;
    }

    .testListArea ul li img {
        width: auto;
        position: absolute;
        left: -20px;
        top: -30px;
        z-index: 10;
    }

    .testListArea span {
        background: #f8f8f8;
        padding: 0 10px;
        line-height: 20px;
        font-size: 16px;
        margin-right: 10px;
        font-weight: 500;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
        border-radius: 15px;
    }

    .testListArea p {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 20px;
    }

    .testListArea > ul > li {
        position: relative;
        padding-bottom: 60px;
        margin-bottom: 60px;
        border-bottom: 1px dashed #ccc;
    }

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

    .testListArea > ul > li ul li input[type="radio"] {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        accent-color: #004ea2;
        vertical-align: middle;
        margin-top: 5px;
    }

    .testListArea > ul > li ul li:not(:last-of-type) {
        margin-bottom: 10px;
    }

    .testListArea > ul > li ul li label {
        vertical-align: middle;
        font-size: 17px;
        line-height: 18px;
        font-weight: 300;
    }

    /* 평가 페이지 끝 */

    /* 채점 페이지 시작 */
    .testListArea > ul > li > div {
        margin-top: 35px;
        border: 1px solid #ccc;
        padding: 10px 3%;
        background: #f8f8f8;
        border-radius: 3px;
    }

    .testListArea > ul > li > div h4 {
        color: #004ea2;
        font-weight: 600;
        font-size: 14px;
        padding-bottom: 10px;
        border-bottom: 1px dashed #ccc;
    }

    .testListArea > ul > li > div h4 span {
        color: #585858;
        font-size: 13px;
        font-weight: 300;
        margin-left: 10px;
        padding: 2px 15px;
        background: #fff;
    }

    .testListArea > ul > li > div p {
        margin-top: 5px;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 1px;
        color: #404040;
    }

    #finalSave.blueBtn{
        margin: 0 3%;
        margin-bottom: 50px;
        width: 94%;
        color: #fff;
    }

    .studyModal{
        position: fixed;
        top:0;
        background: rgba(0,0,0,.6);
        width: 100%;
        height: 100%;
    }
    .modalBg{
        position: fixed;
        top: 36%;
        width: 88%;
        background:#fff;
        padding: 4% 3%;
        margin: 3%;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .studyModal h1{
         font-size: 20px;
        font-weight: 300;
    }

    .studyModal h1 img{
        margin-top: -3px;
        max-width: 25px;
        margin-right: 10px;
    }

    .studyModal button{
        width: calc(100%/2);
        height: 40px;
        margin-top: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }


    /* 채점 페이지 끝 */

    /* 설문조사 시작 */
    .surveyBannerWrap {
        padding: 0 3%;
    }

    .surveyBanner {
        border: 2.5px solid #876ec2;
        padding: 20px 3%;
        font-weight: 500;
        margin-bottom: 30px;
        border-radius: 5px;
        text-align: center;

        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        align-items: center;
    }

    .surveyBanner ul li p {
        font-size: 22px;
        margin-bottom: 8px;
    }

    .surveyBanner ul li span {
        position: relative;
        color: #876ec2;
    }

    .surveyBanner ul li span::before {
        content: "";
        background-color: #876ec2;
        position: absolute;
        left: 0px;
        bottom: -2px;
        z-index: -1;

        width: 100%;
        height: 2px;

    }

    .surveyListArea p {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .surveyListArea > ul > li {
        margin-bottom: 50px;
    }

    .surveyListArea > ul > li ul li input[type="radio"] {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        accent-color: #004ea2;
        vertical-align: middle;
        margin-top: 5px;
    }

    .surveyListArea > ul > li ul li:not(:last-of-type) {
        margin-bottom: 10px;
    }

    .surveyListArea > ul > li ul li label {
        vertical-align: middle;
        font-size: 18px;
        line-height: 18px;
    }

    #surveyTextarea {
        padding: 10px;
        box-sizing: border-box;
        margin-top: 10px;
        width: 100%;
        border-radius: 5px;
    }

    #surveyTextarea:focus {
        border-color: #004ea2;
        outline: none;
        /* box-shadow: 0px 8px 20px -13px rgba(0, 78, 162, 0.35); */
    }

    /* 설문조사 끝 */

    /* 수료기준 테이블 시작*/
    .completionArea {
        margin-bottom: 30px;
    }

    .completionArea table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        line-height: 28px;
        text-align: center;
    }

    .completionArea th,
    .completionArea td {
        padding: 20px;
        box-sizing: border-box;
        border: 1px solid #444444;
    }

    .completionArea th {
        background-color: #f3faff;
    }

    /* 수료기준 테이블 끝 */

    /* 강의 유의사항 시작 */
    .certNotice {
        margin-bottom: 30px;
    }

    .certNoticeTop {
        width: 100%;
        margin-left: 15px;
        margin-bottom: 20px;

        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
    }

    .certNoticeTop li {
        display: inline-block;
    }

    .certNoticeTop li p {
        font-weight: 600;
        color: #ee3d4e;
        font-size: 30px;
        margin-top: -5px;
        letter-spacing: -.6px;
    }

    .certNoticeContent {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding-bottom: 30px;
        margin-bottom: 30px;
        padding-top: 30px;
    }

    .certNoticeContent li {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 30px;
    }

    .certNoticeContent li p {
        color: #585858
    }

    .certNoticeContent li p .certName {
        font-weight: 600;
        color: #3b3b3b;
    }

    .certNoticeContent li p span {
        font-weight: 500;
        color: #83c0eb;
        font-size: 18px;
    }


    .certArea {
        text-align: center;
        margin-bottom: 50px;
    }

    .certArea h3 {
        font-weight: 500;
        font-size: 20px;
        margin-bottom: 20px;
    }

    .certArea ul li {
        display: inline-block;
        padding: 25px 30px;
        box-sizing: border-box;
        border-radius: 5px;
        border: 1px solid #ddd;
    }

    .certArea ul li:not(:last-of-type) {
        margin-right: 20px;
    }

    .certArea ul li img {
        display: block;
        margin: 0 auto 5px auto;
    }

    .certNoticeBtn {
        margin-top: 30px;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .certNoticeBtn .button1 {
        width: 33%;
        border: none;
        margin: 0;
        height: 45px;
        background: #83c0eb;
        color: #fff;
        border-radius: 2px;
    }

    .cert-Btn {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: 30px;
    }

    .cert-Btn button {
        width: 200px;
        border: 2px solid #83c0eb;
        background: #fff;
        color: #217cbd;
        border-radius: 5px;
        height: 45px;
        font-size: 16px;

    }


    .certIpin a {
        margin-right: 10px;
        text-decoration: underline;
    }

    /* 강의 유의사항 끝 */
    
    
    
    /**		하단 컨트롤		**/
	#fs-footer{	width:100%;height:50px;position:absolute;bottom:0px;}
	.footer_inner{width:100%;height:50px;position:relative;background:url("./img/footer/control_bg.png") no-repeat;z-index:20;}
	.footer_inner .control{	width:100%;height:35px; box-sizing:border-box; }
	.footer_inner p{position:absolute; width:35px; height:50px; cursor:pointer; }
    
    
}


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

    /* 공통 css 시작 */
    .serveTopArea,
    .serveContentArea,
    .lectureSearch {
        margin: 0 auto;
        padding: 0px 3%;
        box-sizing: border-box;
    }

    .serveContentArea {
        margin-bottom: 40px;
    }

    .serveTopArea {
        padding: 10px 3%;
        display: flex;
        justify-content: space-between;
    }

    .serveTopArea h3 {
        color: #000;
    }


    .serveContentArea img {
        width: auto;
        height: auto;
        max-width: 100%;
    }

    .backBtnArea {
        padding-top: 5px;
        line-height: 28px;
        min-width: 32px;
    }

    .backBtnArea a img {
        width: auto;
        height: auto;
        max-width: 22px;
    }

    .serveContentArea {
        margin-bottom: 80px;
    }


    .serveContentArea h1 img {
        max-width: 23px;
        margin-right: 5px;
        margin-top: -3px;
        background: #fff;
        padding: 7px;
        border-radius: 50%;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    }


    .serveContentArea img {
        width: auto;
        height: auto;
        max-width: 100%;
    }

    h1 {
        font-size: 23px;
        margin-top: 10px;
    }


    .backBtnArea {
        line-height: 28px;
        min-width: 24px;
    }

    p.secondTitle {
        font-weight: 500;
        font-size: 20px;
        text-align: center;
        margin-bottom: 30px;
    }

    h3.smallTitle {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .greenFont {
        color: #87c3c1;
    }

    .pinkFont {
        color: #dc8983;
    }

    .redFont {
        color: #e20000;
        font-weight: 500;
    }

    .blueFont {
        color: #004ea2;
        font-weight: 500;
    }

    .skyFont {
        color: #004ea2;
        font-weight: 500;
    }

    h3.smallTitle span {
        font-weight: 600;
        color: #004ea2;
    }

    .secondInfoP {
        font-size: 14px;
        text-align: center;
        line-height: 22px;
        margin-bottom: 50px;
    }

    p.secondTitle02 {
        font-weight: 500;
        font-size: 24px;
        text-align: center;
        margin-bottom: 15px;
    }

    .secondArea p {
        font-size: 14px;
        line-height: 30px;
    }

    .secondArea {
        margin-bottom: 30px;
    }

    .secondArea table {
        width: 100%;
        border-collapse: collapse;
        line-height: 28px;
    }

    .secondArea th,
    .secondArea td {
        font-size: 14px;
        padding: 15px;
        box-sizing: border-box;
        border: 1px solid #444444;
    }

    .secondArea th {
        background-color: #004ea2;
        color: #ffffff;
        border-right: 1px solid #fff;
    }

    .thirdArea {
        margin-bottom: 30px;
        padding-left: 15px;
    }

    .secondArea p {
        line-height: 26px;
    }

    .secondArea p:not(:last-of-type) {
        margin-bottom: 6px;
    }

    /* 공통 css 끝 */


    /* 로그인 시작 */
    .loginArea {
        margin-top: 30px;
    }

    .loginArea .user-box {
        position: relative;
    }

    .loginTop {
        margin-bottom: 30px;
    }

    .loginTop li img {
        width: auto;
        height: auto;
        max-width: 150px;
        margin-bottom: 20px;
    }

    .loginTop li h1 {
        font-size: 20px;
    }

    .loginTop li p {
        margin-top: 10px;
        color: #585858;
        font-size: 12px;
        font-weight: 300;
    }

    .loginArea .user-box {
        border-bottom: 1px solid #979797;
    }

    .loginArea .user-box:first-of-type {
        margin-bottom: 15px;
    }

    .loginArea .user-box:nth-of-type(2) {
        margin-bottom: 30px;
    }

    .loginArea .user-box input {
        width: 100%;
        padding: 10px 0 5px 0;
        font-size: 16px;
        border: none;
        outline: none;
        background: transparent;
    }

    .loginArea .user-box label {
        position: absolute;
        top: 0;
        left: 0;
        padding: 5px 0 10px 0;
        font-size: 1rem;
        color: #979797;
        transition: .25s;
    }

    .loginArea .user-box input:focus ~ label,
    .loginArea .user-box input:valid ~ label {
        top: -20px;
        left: 0;
        color: #004ea2;
        font-size: 0.8rem;
    }


    .loginArea form a {
        color: #fff;
    }

    .loginBottom ul {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        align-items: center;
        padding-bottom: 20px;
        margin-bottom: 0px;
        border-bottom: 1px solid #ccc;
    }

    .loginBottom ul li {
        font-size: 14px;
        line-height: 24px;
        display: inline-block;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .loginBottom ul li {
        border-right: 1px solid #ccc;
    }

    .loginBottom ul li:last-child {
        border-right: none;
    }

    .blueBtn {
        margin-top: 7%;
        margin-bottom: 5%;
        background: #474747;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
        color: #fff;
    }

    .blueBtn a {
        color: #fff;
    }

    .blueBtn .listbtn a {
        color: #fff;
    }

    /* 로그인 끝 */

    /* 아이디찾기, 비밀번호찾기 시작 */
    .searchBox {
        margin-bottom: 30px;
        margin: 5% 0;
        padding: 5% 3%;
        margin-bottom: 20px;
        background: #f8f8f8;
    }

    .searchBox ul li div {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: center;
    }

    .searchBox ul li:not(:last-of-type) {
        margin-bottom: 15px;
    }


    .searchBox ul li label {
        display: block;
        font-size: 16px;
        margin-bottom: 10px;
        C
    }

    .searchBox ul li input {
        font-size: 16px;
        padding: 0px 10px;
        box-sizing: border-box;
        border-radius: 5px;
        line-height: 30px;
        border: 1px solid #979797;
    }

    .searchBox ul li input:focus {
        border-color: #004ea2;
        outline: none;
        box-shadow: 0px 8px 20px -13px rgba(0, 78, 162, 0.35);
    }

    .searchBox ul li input#searchName,
    .searchBox ul li input#searchID {
        width: 100%;
    }

    .searchBox ul li div {
        width: 100%;
    }

    .searchBox ul li input#searchYear {
        width: 35%;
    }

    .searchBox ul li input#searchMonth {
        width: 28%;
    }

    .searchBox ul li input#searchDay {
        width: 28%;
    }

    .searchBox ul li input#searchPhone1,
    .searchBox ul li input#searchPhone2,
    .searchBox ul li input#searchPhone3 {
        width: 33%;
    }

    .searchBox ul li span {
        font-size: 15px;
    }

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

    .yearBox span:not(:last-of-type) {
        margin-right: 5px;
    }

    .phoneBox span {
        margin: 0 5px;
    }

    /* 아이디찾기, 비밀번호찾기 끝 */

    /* 내정보 시작 */
    .none {
        margin: 10% 3%;
        font-weight: 300;
        text-align: center;
        color: #585858;
        padding: 10% 0;
        width: 94%;
        background: #fff;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    }

    .mypageTop {
        margin-top: 20px;
    }

    .mypageInner {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: center;
        background-color: #fff;
        padding: 25px 10px;
        box-sizing: border-box;
        border-radius: 5px;
        box-shadow: 0px 3px 10px 6px #eeeeee;
    }

    .mypageInner li {
        font-size: 15px;
    }

    .mypageInner li a span {
        font-size: 15px;
        font-weight: 500;
        color: #004ea2;
    }

    .mypageInner li.loginOff {
        /* display: none; */
        display: block;
    }

    .mypageInner li.loginOn {
        /* display: block; */
        display: none;
    }

    .mypageInner li:last-of-type {
        border: 1px solid #979797;
        padding: 0px 12px;
        border-radius: 5px;
        text-align: center;
        line-height: 24px;
        min-height: 26px;
        font-size: 14px;
    }

    .mypageMenuInner ul {
        padding: 20px 0;
    }

    .mypageMenuInner ul {
        border-bottom: 1px solid #ddd;
    }

    .mypageMenuInner ul li p {
        color: #909090;
        font-size: 14px;
    }

    .mypageMenuInner ul li a {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
    }

    .mypageMenuInner ul li:not(:last-of-type) {
        margin-bottom: 15px;
    }

    .logoutArea {
        margin-top: 20px;
        text-align: center;
    }

    .logoutArea a {
        font-size: 14px;
        color: #909090;
    }

    /* 내정보 끝 */

    /* 개인정보변경 시작 */
    .formArea h1 {
        margin-bottom: 10px;
    }

    .formArea h4 {
        margin-bottom: 20px;
        font-weight: 400;
    }

    .formArea ul {
        margin: 5% 0;
        padding: 5% 3%;
        margin-bottom: 50px;
        background: #f8f8f8;
    }

    .formArea ul li {
        font-size: 14px;
        font-weight: 300;
    }

    .formArea ul li div {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
    }

    .formArea ul li:not(:last-of-type) {
        margin-bottom: 15px;
    }

    .formArea ul li p {
        /* min-width: 105px; */
        margin-bottom: 5px;
    }

    .formArea ul li p:first-of-type {
        font-size: 14px;
        font-weight: 500;
    }



    .formArea ul li input,
    .formArea ul li select {
        width: 100%;
        height: 40px;
        padding: 0 10px;
        box-sizing: border-box;
        font-size: 14px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }

    .formArea ul li input:focus,
    .formArea ul li select:focus,
    .formArea ul li textarea:focus {
        border-color: #004ea2;
        outline: none;
        box-shadow: 0px 8px 20px -13px rgba(0, 78, 162, 0.35);
    }

    .formArea ul li input[type="text"],
    .formArea ul li input[type="password"],
    .formArea ul li select.consultSelect {
        width: 100%;
        font-weight: 300;
    }

    .formArea ul li select#mobile01 {
        width: 10%;
    }

    .formArea .formTel {
        width: 30%;
        font-weight: 300;
    }

    .formArea ul li span {
        margin: 0 5px;
    }

    .formArea ul li select#mobile01,
    .formArea ul li select#phone01 {
        width: 100%;
        font-weight: 300;

    }

    .formArea ul li button#zipCodebtn {
        background-color: #909090;
        height: 40px;
        width: 50%;
        border: none;
        font-size: 12px;
        padding: 0 5px;
        box-sizing: border-box;
        border-radius: 5px;
        color: #ffffff;
        margin-left: 5px;
    }

    .formArea label {
        font-weight: 300;
        font-size: 14px;
        margin-right: 30px;
        vertical-align: middle;
    }

    .formArea ul li input.pwd {
        font-size: 11px;
    }

    .infoChangeBtn button {
        width: 100%;
        height: 40px;
        border-radius: 5px;
        border: none;
        background: #19aaa3;
        margin-top: 30px;
    }

    .infoChangeBtn button a {
        color: #fff;
    }

    #sendEmail,
    #sendSMS,
    #marketingYN {
        width: 15px;
        height: 15px;
        margin-right: 5px;
    }

    p.redpoint {
        position: relative;
    }

    p.redpoint::after {
        content: "*";
        color: #ee0000;
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50px;
        top: -2px;
        margin-left: 2px;
    }

    p.tabletP {
        display: none;
    }

    .pwd {
        font-size: 11px;
    }

    /* 개인정보변경 끝 */

    /* 1:1 상담문의 시작 */
    .formArea textarea {
        width: 100%;
        min-height: 150px;
        overflow-y: scroll;
        padding: 10px;
        box-sizing: border-box;
        font-size: 18px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }

    /* 1:1 상담문의  끝 */

    /* 서비스 이용약관 , 개인정보처리방침 시작 */
    .agreeArea div.agreeBox {
        margin: 5% 0;
        padding: 5% 3%;
        margin-bottom: 50px;
        background: #f8f8f8;
    }

    .agreeArea h2 {
        font-size: 16px;
        margin-bottom: 5px;
        color: #004ea2;
    }

    .agreeArea h3 {
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        color: #000;
        margin-bottom: 10px;
    }

    .agreeArea h4 {
        font-size: 15px;
        font-weight: 300;
        margin-bottom: 10px;
    }

    .agreeArea h5 {
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #666;
        padding: 20PX 0;
    }

    .agreeArea h5:nth-child(3) {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #000;
        margin-bottom: 30px;
    }

    .agreeArea ul {
        margin-bottom: 40px;
    }


    .agreeArea ul li:last-child {
        padding: 2% 3%;
        font-size: 12px;
        color: #666;
        font-weight: 100;
        border: 1px solid #ddd;
        height: 100px;
        overflow-y: auto;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    }

    .agreeArea ul li:last-child::-webkit-scrollbar {
        width: 20px;
        background: #ddd;
    }

    .agreeArea ul li:last-child::-webkit-scrollbar-thumb {
        background: #5594c1;
        border-radius: 7px;
        height: 30px;
        background-clip: padding-box;
        border: 2px solid transparent;
    }

    .agreeBox button {
        width: 100%;
        margin-bottom: 5px;
        height: 40px;
        border: 1px solid #5594c1;
        background: #fff;
        font-weight: 300;
        border-radius: 5px;
    }

    .agreeBox .agreeBtn {
        background: #5594c1;
        color: #fff;
    }

    .agreeBox .agreeBtn a {
        color: #fff;
    }

    /* 서비스 이용약관 ,  개인정보처리방침 끝 */

    /* 가입여부확인 및 본인인증 시작 */
    .agreeSelfArea div.agreeSelfBox {
        margin: 5% 0;
        ;
        padding: 5% 3%;
        margin-bottom: 50px;
        background: #f8f8f8;
    }

    .agreeSelfArea h2 {
        font-size: 16px;
        margin-bottom: 5px;
        color: #004ea2;
    }

    .agreeSelfArea h3 {
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        color: #000;
        margin-bottom: 10px;
    }

    .agreeSelfArea h4 {
        font-size: 15px;
        font-weight: 300;
    }

    .agreeSelfArea h5 {
        text-align: center;
        font-weight: 400;
        font-size: 12px;
        color: #666;
        padding: 20PX 0;
    }

    .agreeSelfBox ul {
        margin-bottom: 10px;
    }

    .agreeSelfBox .agreeSelfBox-info li {
        width: 100%;
        color: #585858;
        font-size: 12px;
    }

    .agreeSelfBox .agreeSelfBox-info li input {
        height: 30px;
        margin: 2px 0;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding-left: 10px;
    }

    .agreeSelfBox .agreeSelfBox-info #birth {
        width: calc(86%/2);
    }

    .agreeSelfBox .agreeSelfBox-info #phone {
        width: calc(52%/2);
    }

    .agreeSelfBox .agreeSelfBox-info #phone:first-child {
        width: 28%;
        border: 1px solid #ccc;
        height: 33px;
        border-radius: 5px;
        text-align: center;
    }

    .agreeSelfBox .agreeSelfBox-info .confirmBtn {
        width: 100%;
        margin-top: 10px;
        height: 35px;
        border: none;
        background: #19aaa3;
        border-radius: 5px;
        color: #fff;
        margin-bottom: 40px;
    }

    .agreeSelfBox .btnArea button {
        width: 100%;
        height: 40px;
        border-radius: 5px;
        border: none;
        color: #fff;
        background: #19aaa3;
    }


    .agreeSelfBox .cert > li button {
        background: #585858;
        margin-bottom: 5px;
        width: 100%;
        border: none;
        height: 40px;
        text-align: center;
        color: #fff;
    }

    .agreeSelfArea p {
        text-align: center;
        font-weight: 400;
        font-size: 12px;
        color: #666;
        padding: 20PX 0;
    }

    /* 가입여부확인 및 본인인증 끝 */

    /* 정보입력 시작 */
    .joinInfoArea div.joinInfoBox {
        margin: 5% 0;
        ;
        padding: 5% 3%;
        margin-bottom: 50px;
        background: #f8f8f8;
    }

    .joinInfoArea h2 {
        font-size: 16px;
        margin-bottom: 5px;
        color: #004ea2;
    }

    .joinInfoArea h4 {
        font-size: 14px;
        font-weight: 500;
    }

    .joinInfoBox ul {
        margin: 10px 0;
    }

    .joinInfoBox li input {
        height: 35px;
        margin: 2px 0;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding-left: 3%;
        width: 97%;
        font-size: 14px;
    }

    .joinInfoBox .j-checkBox {
        width: 25px;
        height: 15px;
    }

    .joinInfoBox .postBtn {
        height: 25px;
        width: 100%;
        background: #585858;
        color: #fff;
        border: none;
        border-radius: 5px;
    }

    .joinInfoBox .btnArea {
        width: 100%;
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid #ccc;
        text-align: center;
    }

    .joinInfoBox .btnArea button {
        width: 100%;
        height: 40px;
        border-radius: 5px;
        border: none;
        background: #19aaa3;
        color: #fff;
    }


    .joinInfoBox p {
        font-size: 14px;
        color: #585858;
    }

    .join01 {
        display: flex;
    }

    .join01 button {
        width: 30%;
        margin-top: 3px;
        height: 35px;
        margin-left: 5px;
        background: #004ea2;
        color: #fff;
        border: none;
        border-radius: 5px;
        font-weight: 300;
    }

    .join02 input {
        background: #d7d7d7
    }

    .join03 input {
        background: #d7d7d7
    }



    .join06 li:last-child {
        display: flex;
        line-height: 40px;
    }

    .join07 li:last-child {
        display: flex;
        line-height: 40px;
    }

    .join08 {
        display: flex;
    }

    .join08 button {
        width: 30%;
        margin-top: 3px;
        height: 35px;
        margin-left: 5px;
        background: #004ea2;
        color: #fff;
        border: none;
        border-radius: 5px;
        font-weight: 300;
    }

    /* 정보입력 끝 */


    /* 이상에듀 소개 시작 */
    .nayaInform {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;

        padding: 15px 0;
        border: 1px solid #999999;
        text-align: center;
    }

    .nayaInform li {
        flex-basis: 33%;
    }

    .nayaInform li img {
        display: block;
        text-align: center;
        margin: 0 auto 5px auto;
        max-width: 30px;
    }

    .nayaInform li:not(:last-of-type) {
        border-right: 1px solid #999999;
    }

    .nayaInform li strong {
        font-size: 15px;
        font-weight: bold;
    }

    .nayaInform li p {
        color: #999999;
        font-size: 14px;
    }

    .nayaImg {
        width: 340px;
        height: 340px;
        border-radius: 50%;
        margin-left: 200px;
    }

    /* 이상에듀 소개 끝 */

    /* 인증현황 시작 */
    .certify02 {
        text-align: center;
    }

    .certify02 > li {
        min-width: 46%;
        margin-bottom: 50px;
    }

    .certify02 li {
        text-align: center;
        display: inline-block;
        vertical-align: top;
    }

    .info02 {
        vertical-align: top;
    }

    .info02 h1 {
        font-weight: 600;
        margin-bottom: 5px;
        font-size: 18px;
    }

    .certify02 img {
        overflow: hidden;
    }

    .certifyList02 li {
        display: block;
        line-height: 24px;
    }

    /* 인증현황 끝 */

    /* 찾아오시는길 시작 */

    .location {
        box-shadow: 0px 4px 10px #999999;
    }

    .locationInner {
        margin-top: 30px;
    }

    .locationInner strong {
        font-weight: 600;
        font-size: 18px;
        line-height: 26px;
    }

    .locationInner p {
        font-size: 16px;
        margin: 5px 0px 30px 0px;
        min-height: 50px;
    }

    .locationInner li {
        margin-right: 20px;
        vertical-align: top;
        display: inline-block;

    }

    /* 찾아오시는길 끝 */

    /* 법정의무교육 시작 */
    .courtDutyInner {
        margin: 0 auto;
        text-align: center;
    }

    .courtDutyInner > div {
        width: 100%;
        height: 100%;
        padding: 20px 10px;
        box-sizing: border-box;
        background-color: #b1b1b1;
        margin-bottom: 30px;
    }

    .courtDutyInner div div {
        min-height: 180px;
        margin-top: 30px;
        padding: 25px 0;
        background-color: rgba(255, 255, 255, 0.83);
    }

    .courtDutyInner h3 {
        font-size: 20px;
        color: #fff;
        text-shadow: 2px 3px 3px #505050;
    }

    .dataTitle {
        font-size: 15px;
        color: #e20000;
        margin-bottom: 20px;
        line-height: 22px;
    }

    .dataTitle span {
        font-size: 18px;
        font-weight: 600;
    }

    .dataContent {
        font-size: 16px;
        margin-bottom: 20px;
        line-height: 24px;
    }

    .dataContent span {
        font-weight: 600;
    }

    .courtDutyInner > div:first-of-type {
        background: url('../../_images/courtDuty01.png')no-repeat left top;
        background-size: cover;
    }

    .courtDutyInner > div:nth-of-type(2) {
        background: url('../../_images/courtDuty02.png')no-repeat left top;
        background-size: cover;
    }

    .courtDutyInner > div:nth-of-type(3) {
        background: url('../../_images/courtDuty03.png')no-repeat left top;
        background-size: cover;
    }

    .courtDutyInner > div:nth-of-type(4) {
        background: url('../../_images/courtDuty04.png')no-repeat left top;
        background-size: cover;
    }

    .courtDutyInner > div:nth-of-type(5) {
        background: url('../../_images/courtDuty05.png')no-repeat left top;
        background-size: cover;
    }

    .courtDutyInner > div:nth-of-type(6) {
        background: url('../../_images/courtDuty06.png')no-repeat left top;
        background-size: cover;
    }

    /* 법정의무교육 끝 */

    /* 과정개발절차 시작  */

    .developmentContent > div {
        border: 1px solid #999999;
        border-radius: 10px;
        padding: 20px 10px;
        box-sizing: border-box;
        margin-bottom: 30px;
    }

    .developmentContent div h3 {
        text-align: center;
        font-size: 20px;
        margin-bottom: 5px;
    }

    .developmentContent div.underLine {
        width: 40px;
        height: 4px;
        text-align: center;
        margin: 0 auto;
        background-color: #004ea2;
        margin-bottom: 20px;
    }

    /* 과정개발절차 끝  */


    /* benefit 혜택 시작 */
    .benefitAreaWrap {
        background: #f4f4f4;
        padding: 8% 3%;
        text-align: center;
    }

    .benefitAreaWrap h1 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .benefitAreaWrap ul li h4 {
        font-weight: 300;
        font-size: 14px;
    }

    .benefitAreaWrap ul li img {
        display: none;
    }

    .benefitAreaWrap ul li h3 {
        font-size: 16px;
        color: #516596;
        font-weight: 500;
    }

    .benefitAreaWrap ul li {
        padding: 2% 1%;
        margin: 2% 0;
        width: 100%;
        ;
        text-align: center;
        background: #fff;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        border-radius: 10px;
    }

    /* benefit 혜택 끝 */

    /* lectureAll 시작 */
    .lectureAll {
        padding: 0 3%;
    }

    .lectureAll-div {
        margin-bottom: 40px;
    }

    .lectureAll-h1 {
        padding: 1% 0;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .lectureAll li {
        position: relative;
    }

    .lectureAll li img {
        width: 100%;
        margin-bottom: 2%;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
        border-radius: 5px;
        filter: brightness(.8);
    }

    .lectureAll p {
        position: absolute;
        left: 0;
        top: 40%;
        width: 100%;
        text-align: center;
        font-size: 20px;
        color: #fff;
        font-weight: 600;
    }

    .lectureAll li img:first-child {
        margin-right: 1%;
    }

    /* lectureAll 끝 */

    /*  lecture 시작 */

    .lectureBanner {
        background: linear-gradient(45deg, #58a8f9, #5176ee);
        padding: 20px 3%;
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 20px;

        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: center;
    }

    .lectureSearch {
        margin: 15px 0;
    }

    /*
    .lectureBanner ul li span {
        animation: blink-effect 1.5s step-end infinite;
    }

    @keyframes blink-effect {
        50% {
            opacity: 0;
        }
    }*/

    .lectureSearch-wrapper {
        margin-top: 10px;
    }

    .lectureBanner img {
        max-width: 105px;
    }

    .lectureBanner ul li:first-of-type {
        margin-bottom: 5px;
    }

    .search-wrapper {
        overflow:hidden;
        border: 2px solid #004ea2;
        background-color: #fff;
        border-radius: 30px;
        padding: 0 10px;
        box-sizing: border-box;
        height: 38px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .lectureSearch .searchCategory {
        margin-right: 2%;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 3px;
        text-align: center;
        height: 25px;
        width: 60px;
    }

    .lectureSearch .searchCategory option {
        font-size: 14px;
    }

    .lectureSearch h3 {
        text-align: center;
        font-size: 14px;
        background: #575757;
        color: #fff;
        font-weight: 300;
        padding: 2% 2%;
    }

    .lectureSearch h3:last-child {
        background: #fff;
        color: #000;
        box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    }

    .search-input {
        width: 80%;
        border: none;
        outline: none;
        padding-left: 5px;
        box-sizing: border-box;
        font-size: 14px;
    }

    .search-wrapper .searchClose {
        margin-right: 0px;
        display: none;
    }

    .search-wrapper button {
        background-color: transparent;
        border: none;
    }

    .search-wrapper img {
        max-width: 25px;
    }

    .searchStyle{
		background-color: #004ea2;
		padding: 5px;
        margin-right: -10px;
	}

    .scrollMenuArea {
        border-bottom: 1px solid #a3a3a3;
    }

    .scrollMenuArea .slide-box .slide-item:not(:last-of-type) {
        margin-right: 15px;
        display: flex;
        align-items: center;
    }

    .scrollMenuArea .slide-box .slide-item {
        min-width: 80px;
        padding: 7px 10px;
        box-sizing: border-box;
        font-size: 15px;
        text-align: center;
        border-radius: 0px;
    }

    .scrollMenuArea .slide-box .slide-item a {
        color: #a3a3a3;
        font-weight: 400;
    }

    .scrollMenuArea .slide-box .active {
        border-bottom: 2px solid #004ea2;
    }

    .scrollMenuArea .slide-box .active a {
        color: #004ea2;
        font-weight: 500;
    }

    .lectureWrap ul li.lectureList {
        display: block;
        padding: 15px 3%;
        box-sizing: border-box;
    }


    /*.lectureList:not(:last-of-type) {*/
	.lectureList{
        padding: 15px 3%;
        border-bottom: 10px solid #f4f4f4;
    }

    .lectureList div img {
        margin-bottom: 10px;
        width: 100%;
    }

    .lectureList div .smallMenu {
        background: #ccc;
        padding: 2px 3%;
        font-size: 12px;
        border-radius: 5px;
    }

    .lectureList div ul li:first-of-type {
        margin-bottom: 5px;
    }

    .lectureList div ul li h3 {
        font-size: 17px;
        color: #000;
        text-align: left;
        padding: 2% 0;
        font-weight: 700;
    }

    .lectureList .infoList {
        display: flex;
    }

    .lectureList .infoList li:first-child h4 {
        font-weight: 400;
    }

    .lectureList .infoList h4 {
        font-weight: 300;
        line-height: 28px;
        font-size: 15px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .lectureList .infoList li:nth-child(2) h4:nth-child(2) {
        text-decoration: line-through;
        color: #e20000;
    }

    .lectureList .infoList li:first-child {
        width: 120px;
    }

    .lectureList .infoList li:last-child {
        width: 60%;
    }

    .infoList .blueBg {
        background: #36c8b9;
        padding: 1px 10px;
        border-radius: 5px;
    }

    .infoList .yellowBg {
        background: #f6af16;
        padding: 1px 10px;
        border-radius: 5px;
    }

    .lectureList div ul li p {
        font-size: 18px;
        line-height: 28px;
    }

    .lectureList .applyBox button {
        width: 100%;
        margin-top: 20px;
    }
    
    /*  lecture 끝 */
    /* paypopup 영역 시작 */
    .payPopup {
        z-index: 10000;
        position: fixed;
        left: 6%;
        top: 2.5%;
        padding: 5% 4%;
        background: #fff;
        width: 80%;
        border-radius: 20px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    }

    .payPopup h1 {
        text-align: center;
        margin-bottom: -10px;
    }

    .payPopup > div > ul {
        display: flex;
    }

    .payPopup > div > ul > li:first-child {
        width: 100px;
    }

    .payPopup h3 {
        background: #585858;
        color: #fff;
        text-align: center;
        padding: 2% 0;
        font-weight: 400;
        font-size: 13px;
        margin-top: 20px;
    }

    .payPopup ul {
        margin: 7px 0;
    }

    .payPopup h4 {
        font-size: 13px;
    }

    .payPopup h5 {
        padding: 1% 5%;
        height: 60px;
        overflow-y: auto;
        font-weight: 300;
        border: 1px solid #ccc;
        font-size: 12px;
        border-top: none;
        margin-bottom: 10px;

    }

    .payPopup ul li {
        font-size: 14px;
    }

    .payPopup button {
        width: 100%;
        height: 35px;
        border-radius: 5px;
        border: none;
        margin: 3px 3px;
    }

    .payPopup .payPopup-input input {
        margin-top: 5px;
        width: calc(84%/2);
        height: 28px;
        border: 1px solid #585858;
        border-radius: 5px;
        padding-left: 10px;
        background: #edf6f9
    }

    .bgcolor {
        z-index: 1000;
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: .7
    }

    /* paypopup 영역 끝 */

    /* lectureView 시작 */
    .lectureViewArea {
        margin-bottom: 50px;
    }

    .lectureViewArea h1 {
        margin: 5% 0;
    }

    .lectureViewArea {
        margin-bottom: 50px;
    }

    .lectureViewArea div.lectureImgWrap {
        text-align: center;
        padding-bottom: 30px;
    }

    .lectureImgWrap ul li {
        text-align: left;
    }

    .lectureImgWrap ul:first-child li:first-child img {
        width: 100%;
    }

    .lectureImgWrap ul:first-child li:first-child h4 {
        display: flex;
        justify-content: space-between;
    }

    .lectureImgWrap ul:first-child li:first-child h4 span {
        width: 33%;
        text-align: center;
        margin-top: 7px;
    }

    .lectureImgWrap span {
        background: #ccc;
        border-radius: 5px;
        padding: 0 4%;
        text-align: center;
        font-weight: 300;
        font-size: 12px;
    }

    .lectureImgWrap .span_bg1 {
        background: #36c8b9;
        padding: 2px 3%;
        color: #fff;
        font-weight: 300;
        margin-right: 2%;
    }

    .lectureImgWrap .span_bg2 {
        background: #f6af16;
        padding: 2px 3%;
        color: #fff;
        font-weight: 300;
        margin-right: 2%;
    }

    .lectureImgWrap .span_bg3 {
        background: #e767f5;
        padding: 2px 3%;
        color: #fff;
        font-weight: 300;
    }

    .lectureImgWrap ul h3 {
        color: #000;
        font-size: 18px;
        font-weight: 700;
        text-align: left;
        margin-bottom: 3%;
    }

    .lectureImgWrap ul h4 {
        font-size: 13px;
        font-weight: 300;
        margin-bottom: 1%;
    }

    .lectureImgWrap table {
        width: 100%;
        margin-top: 10px;
        border: 1px solid #ccc;
    }

    .lectureButton {
        display: flex;
        justify-content: space-between;
    }

    .lectureButton li {
        width: calc(100%/2);
    }

    .lectureButton li button {
        width: 100%;
        background: #fff;
        border: none;
        margin-top: 10px;
        height: 40px;
        border: 1px solid #ccc;
    }

    .lectureButton li:first-child button {
        background: #c0d5ff;
        border: none;
    }

    .lectureComplete ul {
        display: flex;
        margin-top: 20px;
        margin-bottom: 20px;
        justify-content: space-between;
    }

    .lectureComplete ul li {
        position: relative;
        width: 86px;
        height: 74px;
        padding-top: 10px;
        margin-bottom: 2%;
        background: #d8e37f;
        border-radius: 50%;
        text-align: center;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    }

    .lectureComplete ul li h2 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%)translateY(-50%);
        font-size: 12px;
        width: 80px;
    }


    .lectureComplete ul li h2 > span {
        font-size: 12px;
        font-weight: 300;
        color: #000;
        letter-spacing: -.4px;
    }

    .lectureComplete ul li:last-child h3 {
        font-size: 10px;
    }

    .lectureComplete h4 {
        font-size: 15px;
        text-align: center;
        background: #ffd885;
        padding: 3% 0;
        font-weight: 500;
    }

    .lectureComplete h4 span {
        background: #f8f4d5;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        border-radius: 5px;
        padding: 2px 4%;
        font-weight: 300;
        font-size: 14px;
    }

    .lectureBox {
        padding: 3% 3%;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
        border: 1px solid #ccc;
        border-bottom: 1px solid #ddd;
        margin-bottom: 2%;
        border-radius: 5px;
    }

    .lectureBox h3 {
        font-size: 20px;
        color: #2784e7;
        font-weight: 500;
        text-align: left;
        padding-bottom: 10px;
    }

    .lectureBox th,
    .lectureBox td {
        padding: 12px;
        box-sizing: border-box;
        border: 1px solid #444444;
    }

    .lectureBox th {
        background-color: #004ea2;
        color: #ffffff;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
    }

    .lectureSnsArea li {
        display: inline-block;
    }

    .lectureSnsArea li:not(:last-of-type) {
        margin-right: 25px;
    }

    /* lectureView 끝 */

    /* lectureReview 수강후기 시작*/
    .lectureReview {
        padding: 0 3%;
        margin-bottom: 100px;
    }

    .lectureReview .lectureReviewTitle {
        display: flex;
        justify-content: space-between;
        line-height: 50px;
    }

    .lectureReviewTable {
        border-top: 1px solid #ccc;
    }


    .lectureReview .lectureReviewTitle h4 {
        padding-top: 5px;
    }

    .lectureReviewTable .reviewContent a ul {
        justify-content: space-between;
        font-weight: 600;
    }

    .reviewContent {
        padding: 2% 1%;
        border-bottom: 1px solid #ccc;
    }

    .reviewContent a ul li h4 {
        font-weight: 300;
        font-size: 17px;
        letter-spacing: -0.4px;
        flex-basis: 70%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        margin-top: 4px;
    }

    .reviewContent a:hover ul > li > h4 {
        overflow: visible;
        display: block
    }



    /* professorArea 시작 */
    .professorArea img {
        width: 100%;
    }

    .professorArea h1 {
        color: #fff;
        text-align: center;
    }




    .professorArea .prefessorAreaWrap h1,
    h3 {
        font-weight: 400;
        font-size: 210;
        text-align: center;
    }

    .professorArea h4 {
        font-weight: 300;
        font-size: 14px;
        padding-left: 20px;
        color: #fff;
        line-height: 250x;
    }

    /* 상단배너 시작 */
    .smallBanner {
        padding: 0 3%;
        margin-bottom: 30px;
    }

    .smallBanner ul {
        display: flex;
        justify-content: space-between;
        position: relative;
        width: 100%;
    }

    .smallBanner ul {
        display: flex;
        margin-bottom: 10px;
    }

    .smallBanner ul li {
        width: calc(100%/2)
    }

    .smallBanner ul li img {
        width: 98%;
    }

    /* 상단배너 끝 */



    .socialmain img {
        width: 100%;
    }

    /* professorArea 끝 */

    /* lectureView 시작 */
    .lectureViewArea {
        margin-bottom: 50px;
    }

    .lectureViewArea div.lectureImgWrap {
        text-align: center;
        border-bottom: 1px solid #909090;
        padding-bottom: 30px;
    }

    .lectureInfo {
        border-bottom: 1px solid #909090;
    }

    .lectureInfo > ul {
        padding-top: 30px;
        margin-bottom: 50px;
    }

    .lectureInfo > ul li .mobilePossible02 {
        background-color: #33cccc;
        width: 95px;
        color: #fff;
        padding: 6px;
        box-sizing: border-box;
        border-radius: 5px;
        text-align: center;
        font-size: 12px;
        line-height: 12px;
        margin-bottom: 10px;
    }

    .lectureInfo > ul li:first-of-type {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .lectureInfo > ul li span {
        color: #a3a3a3;
        font-size: 14px;
    }

    .lectureInfo > ul li:first-of-type {
        margin-bottom: 5px;
    }

    .lectureInfo > ul li h3 {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .lectureInfo > ul li p {
        font-size: 15px;
    }

    .lectureBtnArea {
        margin-bottom: 30px;
    }

    .lectureBtnArea ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: flex-start;

    }

    .lectureBtnArea ul li {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;

        font-size: 15px;
        width: 48%;
        min-height: 35px;
        border: 1px solid #c5c5c5;
        padding: 0px 10px;
        box-sizing: border-box;
        border-radius: 5px;
    }

    .lectureBtnArea ul li img {
        max-width: 22px;
        margin-right: 5px;
        vertical-align: middle;
    }

    .lectureBox {
        border: 1px solid #a9cef5;
        outline: 2px solid #daf1ef;
        outline-offset: -8px;
        margin-bottom: 30px;
        padding: 8% 5%;
    }

    .lectureBox h3 {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .lectureBox p {
        font-size: 14px;
        line-height: 30px;
        color: #262626;
    }

    .lectureBox table {
        width: 100%;
        table-layout: fixed;
        word-break: break-all;
        border-collapse: collapse;
        line-height: 20px;
        text-align: center;
        font-size: 14px;
    }

    .lectureBox th,
    .lectureBox td {
        padding: 10px 2px;
        box-sizing: border-box;
        border: 1px solid #444444;
    }

    .lectureBox th {
        font-weight: 400;
        background-color: #004ea2;
        color: #ffffff;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
    }

    .lectureSnsArea li {
        display: inline-block;
    }

    .lectureSnsArea li:not(:last-of-type) {
        margin-right: 25px;
    }

    .lectureSnsArea li img {
        max-width: 36px;
    }

    .lectureWrap .applyBox li:last-child button{
        background: #fff;
        color: #000;
        border: 1px solid #ccc;
    }
    
    .applyBox {
        display: flex;
        justify-content: space-between;
    }

    .applyBox li {
        width: 100%;
    }


    .lectureList .applyBox li button {
        width: 100%;
        height: 40px;
        background: #0ac6c8;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        border: none;
    }

    /* lectureView 끝 */

    /* visual 시작*/
    .visual img {
      width: 100%;
    /*height: 130px;
    object-fit: cover;*/
    }

    /* visual 끝*/


    /* ExamGuide 시작*/
    .examGuideWrap {
        padding: 5% 3%;
        padding-bottom: 10%;
    }

    .examGuideWrap h2 {
        background: #000;
        color: #fff;
        padding: 1% 3%;
        letter-spacing: 1px;
        text-align: center;
        width: 60%;
        margin: 0 auto;
        border-radius: 10px;
        font-size: 16px;
    }

    .examGuideWrap h1 {
        text-align: center;
        font-size: 20px;
        padding: 5% 0;
    }

    .examGuideWrap h3 {
        color: #000;
        text-align: left;
        font-weight: 600;
        font-size: 16px;
    }

    .examGuideWrap h4 {
        font-weight: 400;
        font-size: 14px;
    }

    .examGuideWrap .examTable {
        margin: 0 auto;
        margin-top: 2%;
        width: 100%;
    }

    .examGuideWrap .examTable th,
    td {
        line-height: 20px;
        border: 1px solid #d0dec3;
        border-top: none;
        text-align: center;
        padding: 1%;
        font-size: 12px;
    }

    .examGuideWrap .examTable thead {
        background: #e2f2d5;
        border: 1px solid #e2f2d5;
        color: #000;
    }

    .examGuideWrap .examTable thead th {
        font-weight: 400;
        border: none;
    }


    .landingArea img {
        width: 100%;
        margin-bottom: 50px;
    }

    /* ExamGuide 끝*/


    /* board 시작 */
    .boardArea {
        margin: 0 3%;
        border-top: 1px solid #a3a3a3;
        margin-bottom: 50px;
    }

    .boardArea ul {
        padding: 0 3%;
        box-sizing: border-box;
    }

    .boardArea ul li a {
        display: block;
        padding: 15px 0px;
    }

    .boardArea ul li a div {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }

    .boardArea ul li a div img {
        width: 100%;
        height: 100%;
        max-width: 25px;
    }

    .boardArea ul li a div h3 {
        font-size: 14px;
        font-weight: 400;
        margin-right: 15px;
        letter-spacing: -0.4px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .boardArea ul li a p {
        font-size: 11px;
        color: #000;
    }

    /* noticeTab2 pagination 시작*/
    #noticeTab2 .pagination {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        margin-bottom: 70px;
        width: 180px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    #noticeTab2 .pagination li {
        width: 36px;
        line-height: 35px;
    }

    #noticeTab2 .pagination h4 {
        font-weight: 300;
        text-align: center;
        font-size: 25px;
        border-right: 1px solid #ccc;
    }

    #noticeTab2 .pagination li:nth-child(2) h4 {
        border-left: 1px solid #ccc;
    }

    #noticeTab2 .pagination h5 {
        line-height: 27px;
        font-weight: 300;
        text-align: center;
        font-size: 25px;
    }

    /* noticeTab2 pagination 끝*/

    /* noticeTab6 pagination 시작*/
    #noticeTab6 .pagination {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        margin-bottom: 70px;
        width: 180px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    #noticeTab6 .pagination li {
        width: 36px;
        line-height: 35px;
    }

    #noticeTab6 .pagination h4 {
        font-weight: 300;
        text-align: center;
        font-size: 25px;
        border-right: 1px solid #ccc;
    }

    #noticeTab6 .pagination li:nth-child(2) h4 {
        border-left: 1px solid #ccc;
    }

    #noticeTab6 .pagination h5 {
        line-height: 27px;
        font-weight: 300;
        text-align: center;
        font-size: 25px;
    }

    /* noticeTab6 pagination 끝*/



    .runningTime {
        border: 4px solid #96d7d4;
        outline: 2px solid #b9dedc;
        outline-offset: -11px;
        margin: 3%;
        margin-bottom: 10%;
        text-align: center;
        padding: 4% 5% 8% 5%;
        background: #fdfdfa;
        justify-content: space-between;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        border-radius: 10px;
    }

    .runningTime h1 {
        color: #19aaa3;
        font-size: 20px;
    }

    .runningTime h4 {
        font-size: 14px;
        font-weight: 400;
        color: #3e3e3e
    }

    /* board 끝 */

    /* boardView 시작 */
    .boardViewTop {
        border-bottom: 1px solid #909090;
        padding: 10px 0;
        margin-bottom: 10px;
    }

    .boardViewTitle {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .boardViewTop span {
        padding: 1px 1%;
        background: #83c0eb;
        border-radius: 5px;
        margin-right: 2%;
        font-weight: 400;
        font-size: 12px;
        color: #fff;
    }

    .boardViewTop h3 {
        font-size: 13px;
        color: #000;
        text-align: left;
        margin: 2% 0;
        background: #f8f8f8;
        padding: 2%;
    }

    .boardViewTop p {
        font-size: 15px;
        color: #a3a3a3;
    }

    .addfileArea {
        margin-top: 10px;
        padding: 8px 0 6px 0;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
        background-color: #777;
        border-radius: 5px;
    }

    .addfileArea a {
        padding: 0 5px;
        font-weight: 300;
        font-size: 16px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #fff;
    }

    .addfileArea a img {
        max-width: 28px;
        margin-right: 5px;
    }

    .infoContent {
        /* border-bottom: 1px solid #ddd; */
        padding-bottom: 20px;
        margin-bottom: 30px;
        font-size: 15px;
        line-height: 28px;
    }

    /* boardView 끝 */

    /*nexteBtn 시작 */
    .nextBtn ul {
        border-bottom: 1px solid #ccc;
    }

    .nextBtn ul:first-child {
        border-top: 1px solid #ccc;
        border-bottom: 1px dashed #ccc;
    }

    .nextBtn li:last-child h4 {
        font-weight: 300;
        font-size: 13px;
    }

    .nextBtn ul li {
        padding: 1% 3%;
    }

    .nextBtn .listbtn {
        color: #fff;
        margin-top: 3%;
        background: #83c0eb;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
    }

    .nextBtn .listbtn a {
        color: #fff;
    }

    /* blueBtn 끝 */

    /* 자주묻는질문 시작 */
    .faqTop10 {
        margin-bottom: 30px;
    }

    .faqTop10 .faqTopItem {
        width: 160px;
        padding: 10px;
        background-color: #f3faff;
        border: 1px solid #dfebf3;
        border-radius: 10px;
        min-height: 100px;
        font-size: 15px;
    }

    .faqTop10 .faqTopItem li:first-of-type p {
        margin-bottom: 5px;
        color: #004ea2;
        font-size: 16px;
        font-weight: 500;
    }

    .faqTop10 .faqTopItem li:nth-of-type(2) p {
        font-size: 15px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .faqArea ul li {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;

        padding: 20px 0px;
    }

    .faqArea ul {
        padding: 0 3%;
    }

    .faqArea ul li:not(:last-of-type) {
        border-bottom: 1px solid #ddd;
    }

    .faqArea ul li a {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .faqArea ul li p {
        font-size: 15px;
    }

    .faqArea ul li img {
        max-width: 28px;
        margin-right: 5px;
    }

    /* 자주묻는질문 끝 */

    /* 자주묻는질문 자세히보기 시작 */
    .faqViewTop {
        border-top: 1px solid #909090;
        border-bottom: 1px solid #909090;
        padding: 20px 0;
        margin-bottom: 30px;
    }

    .faqViewTop img {
        max-width: 32px;
        margin-bottom: 10px;
    }

    .faqViewTitle {
        font-size: 16px;
    }

    /* 자주묻는질문 자세히보기 끝 */

    /* 학습강의 시작 */


    .studyPlayer .contentPlayer {
        width: 100%;
        overflow: hidden;
        background: #ccc;

    }

    .playerNotice {
        background: #4e88e9;
        padding: 7px 3%;
    }

    .playerNotice img {
        margin-top: -3px;
        max-width: 22px;
        margin-right: 7px;
    }

    .playerNotice p {
        border-radius: 10px;
        font-size: 14px;
        color: #fff;
        font-weight: 300;
    }


    .playertitle {
        padding: 10px 3%;
        background: #f8f8f8;
    }

    .playertitle2 {
        padding: 1% 3%;
        background: #f8f8f8;
        margin-top: -15px;
    }

    .playertitle2 span {
        width: 150px;
        text-align: right;
        font-size: 12px;
        letter-spacing: 1px;
        padding: 0 1px;
        color: #585858
    }

    .playertitle2 button {
        height: 22px;
        width: 20px;
        background: #ccc;
        color: #fff;
        border: none;
        font-size: 10px;
        border-radius: 5px;
    }

    .studyPlayer h1 {
        font-weight: 400;
        font-size: 18px;
        color: #3e3e3e;
        margin: 0;
        
    }

    .studyPlayer h1 button {
        width: 100%;
        height:30px;
        margin-top: 15px;
        background: #777;
        border: none;
        color: #fff;
        border-radius: 3px;
    }


    .studyPlayer h4 {
        padding: 10px 0;
        letter-spacing: -.6px;
        display: flex;
        justify-content: space-between;
    }

    .studyPlayer h4 p {
        font-size: 14px;
        color: #3e3e3e;
        font-weight: 300;
    }

    .playerList li {
        margin: 30px 3%;
        padding: 1% 1%;
    }

    .playerList li h3 {
        text-align: left;
        margin-bottom: 5px;
        font-weight: 500;
        font-size: 16px;
    }

    .playerList li textarea {
        width: 100%;
        height: 100px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .playerList li h3 img {
        max-width: 15px;
        margin-top: -5px;
        margin-right: 5px;
    }

    .playerList li p {
        font-weight: 400;
        color: #585858;
        line-height: 25px;
    }

    .playerList li p button {
        margin-top: 10px;
        background: #89b1f3;
        border: none;
        height: 40px;
        color: #fff;
        font-weight: 300;
        border-radius: 3px;
        width: 100%;
    }

    .playerBack {
        border-top: 1px dashed #ccc;
        padding: 4%;
        margin-bottom: 30px;
    }

    .playerBack button {
        width: 100%;
        height: 40px;
        background: #777;
        border: none;
        color: #fff;
        border-radius: 3px;
    }

    /* 학습강의 끝 */

    /* 학습강의 Html 시작 */
    .studyPlayerHtml .contentPlayerHtml {
        width: 100%;
        height: 400px;
        overflow: hidden;
        background: #ccc;

    }

    .playerNoticeHtml {
        background: #4e88e9;
        padding: 7px 3%;
    }

    .playerNoticeHtml img {
        margin-top: -3px;
        max-width: 22px;
        margin-right: 7px;
    }

    .playerNoticeHtml p {
        border-radius: 10px;
        font-size: 14px;
        color: #fff;
        font-weight: 300;
    }

    .playerBackHtml {
        padding: 4%;
        margin-bottom: 30px;
    }

    .playerBackHtml button {
        width: 100%;
        height: 40px;
        background: #777;
        border: none;
        color: #fff;
        border-radius: 3px;
    }

    .playertitleHtml {
        padding: 10px 3%;
        background: #242424;
    }
    
    .studyPlayerHtml h1 {
        font-weight: 400;
        color: #fff;
        font-size: 18px;
        margin: 0;
    }
    
    .studyPlayerHtml h1 button {
        width: 100%;
        height:30px;
        margin-top: 15px;
        background: #777;
        border: none;
        color: #fff;
        border-radius: 3px;
    }


    /* 학습강의 Html 끝 */


    /* 나의강의실 공통 시작 */
    .mypage-tab h1 {
        text-align: center;
        margin: 20px 0;
    }

    /* mypage table 공통 시작*/
    .mypageContentArea table {
        width: 100%;
        text-align: center;
        border-top: 2px solid #585858;
        border-bottom: 2px solid #585858;
        margin-bottom: 50px;
    }

    .mypageContentArea thead {
        text-align: center;
        line-height: 50px;
        font-size: 14px;
    }

    .mypageContentArea tr {
        border-top: 1px solid #ccc;
    }

    .mypageContentArea td {
        border: none;
        font-size: 14px;
        margin: 15px 2%;
    }


    .mypageContentArea td:nth-child(2) {
        text-align: left;
        font-weight: 300;
        font-size: 15px;
    }


    /* mypage slide 영역 */
    .slideDown {
        width: 100%;
        text-align: center;
        padding: 5px 0;
        margin: 20px 0;
        background: #585858;
    }

    .slideUp {
        width: 100%;
        text-align: center;
        padding: 5px 0;
        margin: 20px 0;
        background: #585858;
    }

    .slideDown a {
        color: #fff;
    }

    .slideUp a {
        color: #fff;
    }

    /* tab1 영역시작 */
    .tab1-test {
        margin-bottom: 30px;
    }

    .tab1-test li {
        width: 100%;
        border-radius: 20px;
        padding: 5px 0;
        text-align: center;
        background: #83c0eb;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 5px;
    }

    .tab1-test li > img {
        max-width: 30px;
    }

    .tab1-test li > span > img {
        max-width: 30px;
    }


    .tab1-test li h4 {
        font-size: 14px;
        color: #fff;
        font-weight: 300;
        padding-top: 3px;
    }

    .tab1-table td {
        border: 1px solid #ccc;
        font-size: 13px;
    }

    .tab1-table thead th {
        text-align: center;
        line-height: 20px;
        border: 1px solid #ccc;
        font-size: 14px;
    }

    .tab1-table tr > td:nth-child(2) {
        text-align: left;
        line-height: 20px;
    }

    .tab1-table button {
        padding: 2px px;
        margin: 3px 0;
        background: #ccc;
        border-radius: 5px;
        border: none;
    }

    .tab1-table button:last-child {
        background: #585858;
        color: #fff;
        border: none;
    }

    .tab1-lectureTable {
        padding: 3%;
        margin: 0 3%;
        border: 1px solid #ccc;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        margin-bottom: 70px;
    }

    .tab1-lectureTable h2 {
        margin-bottom: 20px;
        font-size: 20px;
    }



    .tab1-lecture span {
        color: #19aaa3;
    }

    .tab1-lecture {
        margin-bottom: 10px;
    }

    .tab1-mypage-cert {
        display: flex;
        justify-content: space-between;
    }

    .tab1-mypage-cert li {
        padding: 7px 0;
        width: 100%;
        border: 1px solid #ccc;
        text-align: center;
        font-size: 14px;
    }

    .mypageContentArea img {
        margin-bottom: 10px;
    }

    .tab1-lecture img {
        width: 100%
    }

    .mypageContentArea li {
        margin-bottom: 10px;
    }

    .mypageContentArea li button{
        width: 100%;
    }

    .tab1-lecture h3 {
        color: #000;
        font-size: 14px;
        text-align: left;
        font-weight: 400;
    }

    .tab1-lecture button {
        width: 100%;
        padding: 7px 40px;
        margin-right: 7px;
        margin-top: 10px;
        font-size: 14px;
        color: #fff;
        border: none;
        border-radius: 5px;
        background: #e64a4a;
    }

    .tab1-mypage-cert span {
        background: #585858;
        color: #fff;
        font-weight: 300;
        padding: 1px 8px;
        border-radius: 5px;
    }

    /* tab2 영역시작 */
    .mypage-tab #tab2 .tab2-title {
        padding: 10px 2px;
        text-align: center;
        font-weight: 300;
        background: #ffefcc;
        margin: 0 3%;
        font-size: 12px;
    }

    .mypage-tab #tab2 .tab2-title span {
        font-size: 13px;
        font-weight: 600;
        color: #19aaa3;
    }

    .tab2-lectureTable {
        padding: 3%;
        margin: 0 3%;
        margin-top: 50px;
        border: 1px solid #ccc;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    }

    .tab2-lectureTable h2 {
        margin-bottom: 20px;
        font-size: 20px;
    }

    .tab2-lecture {
        margin-bottom: 10px;
    }

    .tab2-lecture img {
        width: 100%;
    }

    .tab2-mypage-cert {
        display: flex;
        justify-content: space-between;
    }

    .tab2-mypage-cert li {
        padding: 7px 0;
        width: 100%;
        border: 1px solid #ccc;
        text-align: center;
        font-size: 14px;
    }

    .tab2-test {
        margin-bottom: 30px;
    }

    .tab2-test li {
        width: 100%;
        border-radius: 20px;
        padding: 5px 0;
        text-align: center;
        background: #83c0eb;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 5px;
    }

    .tab2-test li > img {
        max-width: 30px;
    }

    .tab2-test li h4 {
        font-size: 14px;
        color: #fff;
        font-weight: 300;
        padding-bottom: 3px;
    }

    .tab2-lecture h3 {
        font-weight: 400;
        color: #000;
        text-align: left;
        font-size: 14px;
    }

    .tab2-lecture h1 {
        font-size: 14px;
        text-align: left;
        margin: 0;
        font-weight: 400
    }

    .tab2-lecture button {
        width: 100%;
        padding: 7px 0;
        margin-right: 7px;
        margin-top: 5px;
        font-size: 16px;
        color: #fff;
        border: none;
        border-radius: 5px;
        background: #19aaa3;
    }

    .tab2-lecture button:last-child {
        background: #e64a4a;
    }

    .tab2-lecture li:first-child {
        margin-right: 20px;
    }

    .mypage-cert span {
        background: #585858;
        color: #fff;
        font-size: 14px;
        font-weight: 300;
        padding: 1px 8px;
        border-radius: 5px;
    }

    .tab2-table td {
        border: 1px solid #ccc;
        font-size: 13px;
    }

    .tab2-table thead th {
        text-align: center;
        line-height: 20px;
        border: 1px solid #ccc;
        font-size: 14px;
    }

    .tab2-table tr > td:nth-child(2) {
        text-align: left;
        line-height: 20px;
    }

    .tab2-table button {
        padding: 2px px;
        margin: 3px 0;
        background: #ccc;
        border-radius: 5px;
        border: none;
    }

    .tab2-table button:last-child {
        background: #585858;
        color: #fff;
        border: none;
    }

    /* tab2 수강후기 팝업 시작*/

    .mypageReview {
        display: none;
        position: fixed;
        top: 7%;
        width: 80%;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        padding: 20px 3% 40px 3%;
    }

    .mypageReview div h1 {
        border-bottom: 1px dashed #ccc;
        padding-bottom: 20px;
        font-size: 18px;
        margin: 5px 0 20px 0;
    }

    .mypageReview div ul {
        width: 100%;
        margin-bottom: 50px;
    }

    .mypageReview div ul li:first-child {
        margin-bottom: 5px;
        font-size: 14px;
    }

    .mypageReview div ul li:first-child img {
        margin-right: 5px;
        margin-top: 5px;
        max-width: 20px;
    }

    .mypageReview div ul li img {
        max-width: 30px;
    }

    .mypageReview div ul li textarea {
        border: 1px solid #ccc;
        padding: 1% 2%;
        border-radius: 5px;
        font-size: 13px;
        letter-spacing: .3px;
        font-weight: 300;
        width: 96%;
        height: 100px;
    }

    .mypageReview .reviewBtn {
        display: flex;
        width: 100%;
        margin-top: 20px;
    }

    .mypageReview .reviewBtn button {
        width: 100%;
        height: 40px;
        border: 1px solid #585858;
        background: #fff;
        font-size: 14px;
    }

    .mypageReview p {
        font-size: 12px;
        color: #777;
        font-weight: 300;
    }

    .mypageReview .reviewBtn button:first-child {
        background: #585858;
        color: #fff;
        border: 1px solid #585858;
    }

    .reviewBg {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .7);
        width: 100%;
        height: 100%;
    }


    .rating {
        position: absolute;
        top: 150px;

    }

    .rating label {
        float: right;
        position: relative;
        width: 30px;
        height: 40px;
        cursor: pointer;
    }

    .rating label:not(:first-of-type) {
        padding-right: 2px;
    }

    .rating label:before {
        content: "\2605";
        font-size: 30px;
        color: #ccc;
        line-height: 1;
    }

    .rating input {
        display: none;
    }

    .rating input:checked ~ label:before,
    .rating:not(:checked) > label:hover:before,
    .rating:not(:checked) > label:hover ~ label:before {
        color: #f9df4a;
    }

    /* tab2 수강후기 팝업 끝 */

    /* mypage tab3 시작*/
    .tab3-mypage ul li.lectureList a {
        display: block;
        padding: 30px 3% 35px 3%;
        box-sizing: border-box;
    }

    .lectureTitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .tab3-mypageList .lectureTitle {
        font-size: 18px;
        margin: 5px 0;
    }

    .tab3-mypage {
        margin-bottom: 30px;
    }

    .tab3-mypageList {
        margin: 0 3%;
        border: 1px solid #ccc;
        padding-bottom: 20px;
        padding-top: 20px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    }

    .tab3-mypageList div {
        padding: 0 3%;
        /*justify-content: space-between; */
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 25px;
        position: relative;
    }

    .tab3-mypageList div img {
        height: auto;
        width: 100%;
        padding-top: 5px;
    }

    .tab3-mypageList div ul li span {
        background: #a3a3a3;
        color: #fff;
        font-weight: 300;
        padding: 1px 6px;
        font-size: 12px;
        border-radius: 5px;
    }


    .tab3-mypageList div ul li h3 {
        font-size: 22px;
        color: #000;
        text-align: left;
        padding: 1% 0;
        font-weight: 700;
    }

    .tab3-mypageList .infoList {
        display: flex;
    }

    .tab3-mypageList .infoList li:first-child h4 {
        font-weight: 500;
    }

    .tab3-mypageList .infoList h4 {
        font-weight: 300;
        line-height: 23px;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .tab3-mypageList .infoList li:first-child {
        width: 80px;
    }

    .infoList .blueBg {
        background: #36c8b9;
        padding: 1px 10px;
    }

    .infoList .yellowBg {
        background: #f6af16;
        padding: 1px 10px;
    }

    .tab3-mypageList div ul li p {
        font-size: 18px;
        line-height: 28px;
    }

    .tab3-mypageList .applyBox {
        padding: 0 3%;
        margin-top: 20px;
    }

    .tab3-mypageList .applyBox li {
        width: 100%;
    }

    .tab3-mypageList .applyBox li button {
        height: 45px;
        background: #fff;
        border: 1px solid #ccc;
    }

    .tab3-mypageList .applyBox li:first-child button {
        background: #0ac6c8;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        border: none;
    }

    /* tab4 영역 시작 */
    .tab4-table table {
        text-align: center;
        border-top: 2px solid #585858;
        border-bottom: 2px solid #585858;
    }

    .tab4-table thead {
        text-align: center;
        font-size: 14px;
    }

    .tab4-table td {
        border: none;
        border-top: 1px solid #ccc;
        font-size: 14px;
        padding: 15px 1%;
    }

    .tab4-table td:nth-child(2) {
        border-top: none;
        font-size: 14px;
    }

    .tab4-table td:nth-child(3) {
        /* background: red; */
    }


    /* mypage tab5 시작 */

    .tab5-mypage {
        margin-bottom: 30px;
    }

    .tab5-mypageList {
        margin: 0 3%;
        border: 1px solid #ccc;
        padding-bottom: 20px;
        padding-top: 20px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    }

    .tab5-mypageList div {
        padding: 0 3%;
        /*justify-content: space-between; */
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 25px;
        position: relative;
    }

    .tab5-mypageList div img {
        height: auto;
        width: 100%;
    }

    .tab5-mypageList div ul li span {
        background: #a3a3a3;
        color: #fff;
        font-weight: 300;
        padding: 1px 7px;
        font-size: 12px;
        border-radius: 5px;
    }

    .tab5-mypageList div ul li h3 {
        font-size: 18px;
        color: #000;
        text-align: left;
        padding: 1% 0;
        font-weight: 700;
    }

    .tab5-mypageList .infoList {
        display: flex;
    }

    .tab5-mypageList .infoList li:first-child h4 {
        font-weight: 500;
    }

    .tab5-mypageList .infoList h4 {
        font-weight: 300;
        line-height: 23px;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .tab5-mypageList .infoList li:first-child {
        width: 130px;
    }

    .tab5-mypageList .infoList li:last-child {
        width: 290px;
    }

    .infoList .blueBg {
        background: #36c8b9;
        padding: 1px 10px;
    }

    .infoList .yellowBg {
        background: #f6af16;
        padding: 1px 10px;
    }

    .infoList .redBg {
        background: #ff0066;
        padding: 1px 10px;
    }

    .infoList .greenBg {
        background: #009900;
        padding: 1px 10px;
    }

    .tab5-mypageList div ul li p {
        font-size: 18px;
        line-height: 28px;
    }

    .tab5-mypageList .applyBox {
        padding: 0 3%;
        margin-top: 20px;
    }

    .tab5-mypageList .applyBox li {
        width: 100%;
    }


    .tab5-mypageList .applyBox li button {
        width: 100%;
        height: 40px;
        border-radius: 5px;
        color: #fff;
        border: none;
        background: #0ac6c8;
    }

    .tab7mypageContentArea > div {
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
        margin: 0 3%;
        padding: 5% 3%;
        display: flex;
        margin-bottom: 50px;
    }

    .tab7mypageContentArea h3 {
        margin-left: 10px;
        color: #000;
        font-size: 15px;
    }

    .tab7mypageContentArea span {
        font-size: 15px;
        color: #0ac6c8;
    }

    /* 나의강의실 공통 끝 */

    /* 수료기준 테이블 시작*/
    .completionArea {
        margin-bottom: 30px;
    }

    .completionArea table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
        line-height: 28px;
        text-align: center;
    }

    .completionArea th,
    .completionArea td {
        padding: 5px;
        box-sizing: border-box;
        border: 1px solid #444444;
    }

    .completionArea th {
        background-color: #f3faff;
    }

    /* 수료기준 테이블 끝 */


    /* 나의강의실 평가 유의사항 시작 */
    .testNotice {
        background: #f8f8f8;
        padding: 3% 5%;
        margin-bottom: 20px;
    }

    .testNoticeTop {
        margin: 0 auto;
        width: 222px;
        margin-bottom: 40px;

        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
    }

    .testNoticeTop li:first-of-type {
        margin-right: 15px;
    }

    .testNoticeTop li {
        display: inline-block;
    }

    .testNoticeTop img {
        max-width: 30px;
    }

    .testNoticeTop li p {
        color: #e70000;
        font-size: 23px;
        font-weight: 600;
    }

    .testNoticeContent {
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc;
    }

    .testNoticeContent li {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 15px;
    }

    .agreeArea {
        padding-bottom: 12px;
    }



    /* 나의강의실 평가 유의사항 끝 */


    /* 강의 유의사항 시작 */
    .certNotice {
        background: #f8f8f8;
        margin-bottom: 30px;
        padding: 3% 5%;
    }

    .certNoticeTop {
        margin: 0 auto;
        margin-bottom: 20px;
        margin-top: 10px;

        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
    }

    .certNoticeTop li {
        display: inline-block;
    }

    .certNoticeTop li p {
        font-weight: 700;
        color: #e70000;
        font-size: 18px;
    }

    .certNoticeContent {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding-bottom: 20px;
        margin-bottom: 20px;
        padding-top: 20px;
    }

    .certNoticeContent li {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 20px;
    }

    .certNoticeContent li p {
        color: #585858;
        font-weight: 300;
        letter-spacing: -.4px
    }

    .certNoticeContent li p span {
        font-weight: 500;
        color: #6b6b6b;
        font-size: 14px;
    }

    .certNoticeContent li h4 {
        font-size: 12px;
        color: #585858;
    }

    .certNoticeTop li img {
        max-width: 30px;
        margin-right: 7px;
    }

    .certArea h3 {
        font-weight: 500;
        font-size: 20px;
        margin-bottom: 20px;
    }

    .certArea ul li {
        display: inline-block;
        padding: 25px 30px;
        box-sizing: border-box;
        border-radius: 5px;
        border: 1px solid #ddd;
    }

    .certArea ul li:not(:last-of-type) {
        margin-right: 20px;
    }

    .certArea ul li img {
        display: block;
        margin: 0 auto 5px auto;
    }

    .certNoticeBtn {
        margin-top: 30px;
    }

    .certNoticeBtn .button1 {
        margin-bottom: 5px;
        width: 100%;
        border: none;
        height: 35px;
        background: #83c0eb;
        color: #fff;
        border-radius: 5px;

    }

    .cert-Btn button {
        width: 100%;
        border: 2px solid #83c0eb;
        background: #fff;
        height: 35px;
        border-radius: 5px;
        margin: 5px 0;
        color: #217cbd;
    }



    .certIpin {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
    }

    .certIpin a {

        font-size: 12px;
        margin-bottom: 10px;
        text-decoration: underline;

    }

    /* 강의 유의사항 끝 */

    /* 중간평가 시작 */
    .testTop {
        position: relative;
        margin-top: -30px;
        margin-bottom: 30px;
        background: #f2f6f7;
        padding: 2% 3%;
    }

    .testTop ul div {
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        position: absolute;
        right: 8px;
        top: 5px;
        width: 50px;
        text-align: center;
        border: 1px solid #ccc;
        background: #fff;
    }

    .testTop ul div h4 {
        font-size: 12px;
    }

    .testTop ul div p {
        padding-top: 5px;
    }

    .testTop ul {
        border-bottom: 1px dashed #ccc;
        padding-bottom: 10px;
        line-height: 20px;
        font-size: 20px;
    }

    .testTop ul:first-child {
        margin-bottom: 10px;
    }

    .testTop ul:first-child li:first-child {
        background: #fff;
        font-size: 12px;
        padding: 0 5px;
        border-radius: 20px;
        width: 50px;
        text-align: center;
        font-weight: 300;
        box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
        margin-bottom: 10px;
    }

    .testTop h2 {
        margin-left: 2%;
        width: 100%;
        font-size: 16px;
    }

    .testTop p {
        margin-left: 10px;
        margin-top: -5px;
        font-weight: 300;
        font-size: 12px;
        color: #585858
    }

    .testResultNotice {
        padding: 5% 3%;
        letter-spacing: -.4px;
        background: #4e88e9;
        margin-top: -30px;
        margin-bottom: 30px;
    }

    .testResultNotice img {
        display: none
    }

    .testTop img {
        max-width: 20px;
        margin-right: 10px;
    }

    .testResultNotice h3 {
        text-align: left;
        font-weight: 500;
        font-size: 16px;
        color: #fff;
    }

    .testResultNotice h4 {
        font-size: 12px;
        font-weight: 300;
        color: #fff;
    }

    .testResultNotice h4 span {
        font-weight: 600;
        color: #ccc;
        padding: 0 1%;
    }

    .testListArea{
        padding: 0 3%;
    }
    
    .testListArea > ul > li {
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 40px;
        padding-bottom: 40px;
        border-bottom: 1px dashed #ccc;
    }

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

    .testListArea ul li p {
        margin-bottom: 15px;
    }

    .testListArea ul:first-child {
        margin-top: 30px;
    }

    .testListArea ul li img {
        position: absolute;
        left: -5px;
        top: -25px;
        max-width: 100px;
        z-index: 10;
    }

    #finalSave.blueBtn{
        margin: 0 3%;
        margin-bottom: 50px;
        width: 94%;
        color: #fff;  
    }

    .studyModal{
        position: fixed;
        top:0;
        background: rgba(0,0,0,.6);
        width: 100%;
        height: 100%;
    }
    
    .modalBg{
        position: fixed;
        top: 40%;
        width: 88%;
        background:#fff;
        padding: 2% 3%;
        padding-bottom: 5%;
        margin: 3%;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .studyModal h1{
         font-size: 16px;
        font-weight: 300;
    }

    .studyModal h1 img{
        margin-top: -3px;
        max-width: 20px;
        margin-right: 5px;
    }

    .studyModal button{
        width: calc(100%/2);
        height: 30px;
        margin-top: 15px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }


    
    /* 중간평가 끝 */

    /* 채점 페이지 시작 */
    .testListArea > ul > li > div {
        margin-top: 35px;
        border: 1px solid #ccc;
        padding: 10px 3%;
        background: #f8f8f8;
        border-radius: 3px;

    }

    .testListArea > ul > li > div h4 {
        color: #004ea2;
        font-weight: 500;
        font-size: 12px;
        padding-bottom: 10px;
        border-bottom: 1px dashed #ccc;
    }

    .testListArea > ul > li > div h4 span {
        color: #585858;
        font-size: 12px;
        font-weight: 300;
        margin-left: 10px;
        padding: 2px 10px;
        background: #fff;
    }

    .testListArea > ul > li > div p {
        margin-top: 5px;
        font-size: 13px;
        font-weight: 400;
        margin-bottom: 1px;
        color: #404040;
    }

    /* 채점 페이지 끝 */

    /* 평가 페이지 시작 */
    .testListArea > ul > li ul li input[type="radio"] {
        width: 15px;
        height: 15px;
        margin-right: 5px;
        accent-color: #004ea2;
        vertical-align: middle;
        margin-left: 5px;
        margin-top: -3px;
    }

    .testListArea > ul > li ul li:not(:last-of-type) {
        padding-top: 5px;
    }

    .testListArea > ul > li ul li label {
        vertical-align: middle;
        font-size: 15px;
        line-height: 15px;
        font-weight: 300
    }

    .testListArea span {
        background: #f8f8f8;
        padding: 0 10px;
        line-height: 20px;
        font-size: 16px;
        margin-right: 10px;
        font-weight: 500;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
        border-radius: 15px;
    }

    .quizAnswer {
        display: flex;
    }

    .quizAnswer ul {
        width: calc(100%/5);
        border: 1px solid #ccc;
        margin-bottom: 5px;
    }


    .quizAnswer ul li {
        text-align: center;
        line-height: 20px;
        padding: 0 2%;
    }

    .quizAnswer ul li h4 {
        font-size: 12px;
    }

    .quizAnswer ul li span {
        font-size: 13px;
        font-weight: 300;
    }

    .quizAnswer ul li:first-child {
        border-bottom: 1px dashed #ccc
    }

    /* 평가 페이지 끝 */

    /* 설문조사 시작 */
    .surveyBannerWrap {
        padding: 0 3%;
    }

    .surveyBanner {
        border: 2.5px solid #876ec2;
        padding: 20px 3% 10px 3%;
        font-weight: 500;
        margin-bottom: 30px;
        border-radius: 5px;
        text-align: center;

        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        align-items: center;
    }

    .surveyBanner ul li p {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .surveyBanner ul li span {
        position: relative;
        color: #876ec2;
    }

    .surveyBanner ul li span::before {
        content: "";
        background-color: #876ec2;
        position: absolute;
        left: 0px;
        bottom: -2px;
        z-index: -1;

        width: 100%;
        height: 2px;

    }

    .surveyListArea p {
        font-size: 16px;
        @charset "utf-8";
    }

	
}