@charset "utf-8";

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

    /* *******************************************************************
        공통
    ******************************************************************* */
    #container {
        flex-direction: column;
        gap: 0;
    }

    /* *******************************************************************
        main-col1 : 메인 배너, 공지사항 게시판
    ******************************************************************* */
    .main-col1 {
        padding: 0 0 44px;
    }
    .main-col1 .inner-wrap {
        padding: 0;
    }
    .main-col1 .main-col1-bg {
        display: none;
    }

    /*메인 강의 2개 썸네일*/
    .main-lecture-area {
        flex-flow: column nowrap;
        align-items: center;
        gap: 16px;
        width: 100%;
        padding: 24px 16px;
        background-color: #fafafa;
    }
    .main-lecture-area li {
        width: 100%;
        box-shadow: 0px 2px 4px rgba(0,0,0,0.25);
    }
    .main-lecture-area li:hover {
        box-shadow: 0px 2px 12px rgba(0,0,0,0.45);
    }

    /* 공지사항 - bxslider */
    .main-notice-area {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 32px 16px 44px;
        border-bottom: 1px solid #eee;
        background-color: #fafafa;
    }
    .main-notice-area h2 {
        display: block;
        width: 100%;
        margin: 0 0 24px;
        padding-top: 5px;
        text-align: center;
    }

    /*공지사항 타이틀 + 날짜*/
    .main-notice-area .notice-bd-area {
        flex-basis: 86%;
    }
    .main-notice-area .notice-bd-area li {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        height: 30px;
    }
    .main-notice-area .notice-bd-area li a {
        display: inline-block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 16px;
    }
    .main-notice-area .notice-bd-area li a::before {
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;

    }
    .main-notice-area .notice-bd-area li .date {
        font-size: 13px;
    }
    /* bx 슬라이더 버튼*/
    .main-notice-area .bx-btn-area {
        flex-basis: 14%;
        max-width: 80px;
        justify-content: flex-end;
        gap: 12px;
    }


    .inner-wrap .section-title {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        gap: 12px;
    }

    /*키워드 리스트*/
    .inner-wrap .keyword-area ul {
        flex-flow: row wrap;
        justify-content: center;
    }
    .inner-wrap .keyword-area ul li a {
        padding: 8px 16px 6px;
        line-height: 1.3;
        font-size: 14px;
    }

    /*강의 리스트*/
    .lecture-list-area {
        display: flex;
        flex-flow: row wrap;
        gap: 24px 4%;
        padding: 0 0 44px;
    }
    .lecture-list-area li {
        width: 48%;
    }
    /* *******************************************************************
            main-col2 : 인기강의  lecture-list-area
        ******************************************************************* */
    .main-col2 .inner-wrap {
        flex-direction: column;
        gap: 36px;
    }
    /* *******************************************************************
        main-col3 : 신규강의
    ******************************************************************* */
    .main-col3 {
        padding: 44px 0 60px;
    }
    .main-col3 .inner-wrap {
        gap: 36px;
    }
    /* *******************************************************************
        main-col4 : 추천강의
    ******************************************************************* */
    .main-col4 {

    }
    .main-col4 .inner-wrap {

    }

}


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

    /* bx 슬라이더 버튼*/
    .main-notice-area .notice-bd-area {
        flex-basis: 80%;
    }
    .main-notice-area .bx-btn-area {
        flex-basis: 20%;
    }
    .main-notice-area .notice-bd-area li .date {
        display: none;
    }

    /*강의 리스트*/
    .lecture-list-area {
        display: flex;
        flex-flow: column nowrap;
        gap: 16px 0%;

    }
    .lecture-list-area li {
        width: 100%;
    }

}