/* ==================================================================================
    반응형 스타일 - 공통
================================================================================== */

/* 1400px */
@media screen and (max-width: 1400px) {

    /* ==================================================================================
        메인배너 - main-banner-area
    ================================================================================== */
    /* quick-area */
    .quick-area {
        top: 0;
        width: 100%;
    }
    .quick-area > ul li a {
        height: 100px;
    }
    .quick-area > ul li a span {
        font-size: 20px;
    }

    /* ==================================================================================
        col1 - 행사소개
    ================================================================================== */
    #container .col1 {
        top: 0;
        margin: 0;
        padding: 40px 0 40px;
    }

    /* ==================================================================================
        col2 - 주요일정 / 공지사항
    ================================================================================== */
    #container .col2 .inner-wrap .important-dates-area ul li {
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 4px;
    }
    #container .col2 .inner-wrap .important-dates-area {
        flex: 1 1 52%;
    }
    #container .col2 .inner-wrap .notice-area {
        flex: 1 1 48%;
    }

    /* ==================================================================================
        col3 - 주최/주관
    ================================================================================== */
    #container .col3 .inner-wrap .hosts-area .host h3 {
        font-size: 21px;
    }

}


/* 1300px */
@media screen and (max-width: 1300px) {

    /* ==================================================================================
        메인배너 - main-banner-area
    ================================================================================== */


}


/* 1200px */
@media screen and (max-width: 1200px) {

    /* ==================================================================================
        메인배너 - main-banner-area
    ================================================================================== */

    /* ==================================================================================
        메인배너 - main-banner-area
    ================================================================================== */
    .main-banner-area .swiper-slide .inner-wrap {
        height: 360px;
    }

    /* title-area */
    .main-banner-area .title-area {
        gap: 24px;

        top: 64px;
    }
    .main-banner-area .title-area h1 {
        gap: 5px;
    }
    .main-banner-area .title-area h1 strong {
        font-size: 46px;
    }
    .main-banner-area .title-area h1 small {
        letter-spacing: -0.4px;
        font-size: 14px;
    }
    .main-banner-area .title-area h2 {
        margin-bottom: 16px;
        font-size: 21px;
    }

    .main-banner-area .title-area .info .date {
        font-size: 24px;
    }
    .main-banner-area .title-area .info .place {
        font-size: 24px;
    }

    /* quick-area */
    .quick-area > ul li a {
        height: 90px;
    }
    .quick-area > ul li a span {
        font-size: 18px;
    }

}


/* 1100px */
@media screen and (max-width: 1100px) {

    /* ==================================================================================
        메인배너 - main-banner-area
    ================================================================================== */


}


/* ==================================================================================
    반응형 스타일 - 모바일 메뉴
================================================================================== */
/* 960px - 모바일 메뉴 시작 */
@media screen and (max-width: 960px) {

    /*******************
        hidden
     *******************/
    .visible-xs {
        display: block !important;
    }
    .hidden-xs {
        display: none !important;
    }

    /* ==================================================================================
        메인배너 - main-banner-area
    ================================================================================== */
    .main-banner-area .swiper-slide .inner-wrap {
        height: 340px;
    }

    /* title-area */
    .main-banner-area .title-area {
        top: 64px;
    }
    .main-banner-area .title-area h1 strong {
        font-size: 42px;
    }
    .main-banner-area .title-area h1 small {
        letter-spacing: 0;
        font-size: 12px;
    }
    .main-banner-area .title-area h2 {
        margin-bottom: 12px;
        font-size: 18px;
    }

    .main-banner-area .title-area .info .date {
        font-size: 21px;
    }
    .main-banner-area .title-area .info .place {
        font-size: 21px;
    }

    /* quick-area */
    .quick-area > ul {
        flex-flow: row wrap;
    }
    .quick-area > ul li:nth-child(1) {
        flex: 1 1 100%;
    }
    .quick-area > ul li:nth-child(1) a {
        height: 50px;
    }
    .quick-area > ul li:nth-child(1) a br {
        display: none;
    }
    .quick-area > ul li {
        flex: 1 1 25%;
    }
    .quick-area > ul li a {
        height: 64px;
    }
    .quick-area > ul li a span {
        line-height: 1.3;
        font-size: 16px;
    }

    /* ==================================================================================
        col1 - 행사소개
    ================================================================================== */
    /* introduce-area */
    #container .col1 .inner-wrap .introduce-area h3 {
        font-size: 21px;
    }
    #container .col1 .inner-wrap .introduce-area .introduce-text p {
        text-align: justify;
        line-height: 1.68;
        font-size: 16px;
    }

    /* ==================================================================================
        col2 - 주요일정 / 공지사항
    ================================================================================== */
    #container .col2 .inner-wrap {
        flex-flow: row wrap;
        gap: 64px;

        padding: 44px 16px 64px;
    }

    /* introduce-area */
    #container .col2 .inner-wrap .important-dates-area {
        flex: 1 1 100%;
    }
    #container .col2 .inner-wrap .important-dates-area h3 {
        font-size: 21px;
    }

    /* notice-area */
    #container .col2 .inner-wrap .notice-area {
        flex: 1 1 100%;
    }
    #container .col2 .inner-wrap .notice-area h3 {
        font-size: 21px;
    }

    /* ==================================================================================
        col3 - 주최/주관
    ================================================================================== */

    /* hosts-area */
    #container .col3 .inner-wrap .hosts-area .host {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        gap: 32px;

        padding: 32px 24px;
    }
    #container .col3 .inner-wrap .hosts-area .host h3 {
        flex: unset;

        text-align: center;
        font-size: 21px;
    }
    #container .col3 .inner-wrap .hosts-area .host ul {
        flex: unset;

        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        gap: 24px 44px;
    }

}

/* phone ~ 768px */
@media screen and (max-width: 768px) {

    /* ==================================================================================
        메인배너 - main-banner-area
    ================================================================================== */


}

/* phone ~ 640px */
@media screen and (max-width: 640px) {

    /* ==================================================================================
        메인배너 - main-banner-area
    ================================================================================== */
    .main-banner-area .swiper-slide .inner-wrap {
        height: 340px;
    }

    /* title-area */
    .main-banner-area .title-area {
        top: 64px;
    }
    .main-banner-area .title-area h1 strong {
        font-size: 42px;
    }
    .main-banner-area .title-area h1 small {
        letter-spacing: 0;
        font-size: 12px;
    }
    .main-banner-area .title-area h2 {
        margin-bottom: 12px;
        font-size: 18px;
    }

    .main-banner-area .title-area .info .date {
        font-size: 21px;
    }
    .main-banner-area .title-area .info .place {
        font-size: 21px;
    }

    /* quick-area */
    .quick-area > ul li:nth-child(1) a {
        height: 50px;
    }
    .quick-area > ul li {
        flex: 1 1 50%;
    }
    .quick-area > ul li a {
        height: 56px;
    }
    .quick-area > ul li:nth-child(2) a,
    .quick-area > ul li:nth-child(5) a {
        color: #000;
        background-color: #fafafa;
    }
    .quick-area > ul li a span {
        font-size: 15px;
    }
    .quick-area > ul li a:hover {
        color: #fff;
        background-color: #0361cb;
    }

    /* ==================================================================================
        col1 - 행사소개
    ================================================================================== */
    /* introduce-area */
    #container .col1 .inner-wrap .introduce-area .introduce-text p {
        font-size: 15px;
    }

}

/* phone ~ 480px */
@media screen and (max-width: 480px) {

    /* ==================================================================================
        메인배너 - main-banner-area
    ================================================================================== */
    .main-banner-area .swiper-slide .inner-wrap {
        height: 340px;
    }

    /* title-area */
    .main-banner-area .title-area {
        top: 44px;
    }
    .main-banner-area .title-area h1 strong {
        font-size: 28px;
        color: rgba(255,255,255,0.7);
    }
    .main-banner-area .title-area h1 small {
        letter-spacing: 0;
        font-size: 11px;
        color: rgba(255,255,255,0.7);
    }
    .main-banner-area .title-area h2 {
        margin-bottom: 12px;
        font-size: 17px;
    }

    .main-banner-area .title-area .info .date {
        text-align: right;
        font-size: 17px;
    }
    .main-banner-area .title-area .info .place {
        text-align: right;
        font-size: 17px;
    }

    /* quick-area */
    .quick-area > ul li:nth-child(1) a {
        height: 44px;
    }
    .quick-area > ul li a {
        height: 52px;
    }
    .quick-area > ul li a span {
        font-size: 14px;
    }

    /* ==================================================================================
        col1 - 행사소개
    ================================================================================== */
    /* introduce-area */
    #container .col1 .inner-wrap .introduce-area h3 {
        font-size: 19px;
    }
    #container .col1 .inner-wrap .introduce-area .introduce-text p {
        text-align: left;
        font-size: 14px;
    }

    /* ==================================================================================
        col2 - 주요일정 / 공지사항
    ================================================================================== */
    /* introduce-area */
    #container .col2 .inner-wrap .important-dates-area h3 {
        font-size: 19px;
    }
    #container .col2 .inner-wrap .important-dates-area ul li .title {
        font-size: 14px;
    }
    #container .col2 .inner-wrap .important-dates-area ul li .date {
        font-size: 14px;
    }

    /* notice-area */
    #container .col2 .inner-wrap .notice-area h3 strong {
        font-size: 19px;
    }
    #container .col2 .inner-wrap .notice-area h3 a .feather {
        width: 21px;
        height: 21px;
    }
    #container .col2 .inner-wrap .notice-area .notice-list > li {
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 7px;

        padding: 12px 0;
    }
    #container .col2 .inner-wrap .notice-area .notice-list > li > a {
        overflow: unset;
        display: block;        /* Webkit 기반 브라우저용 */
        -webkit-box-orient: unset; /* 박스 방향 설정 */
        -webkit-line-clamp: unset;       /* 줄 수 제한 (3줄) */
        text-overflow: unset;
        padding-right: 0;
        line-height: 1.4;
        font-size: 14px;
        font-weight: 900;
    }
    #container .col2 .inner-wrap .notice-area .notice-list > li > .date {
        flex: unset;
        text-align: left;
        font-size: 12px;
    }

}

/* phone ~ 420px */
@media screen and (max-width: 420px) {

    /* ==================================================================================
        메인배너 - main-banner-area
    ================================================================================== */


}

/* phone ~ 360px */
@media screen and (max-width: 360px) {

    /* ==================================================================================
        메인배너 - main-banner-area
    ================================================================================== */
    .main-banner-area .swiper-slide .inner-wrap {
        height: 300px;
    }

    /* title-area */
    .main-banner-area .title-area {
        top: 44px;
    }
    .main-banner-area .title-area h1 strong {
        font-size: 24px;
    }
    .main-banner-area .title-area h1 small {
        font-size: 10px;
    }
    .main-banner-area .title-area h2 {
        font-size: 15px;
    }

    .main-banner-area .title-area .info .date {
        font-size: 15px;
    }
    .main-banner-area .title-area .info .place {
        font-size: 15px;
    }

}