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

/* 1400px */
@media screen and (max-width: 1400px) {
    .transportation .transport-card {
        flex: 0 1 100% !important;
    }
}


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


}


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


}


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

}


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

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

    /*******************
        layout
    *******************/
    #container {
        min-height: auto;
    }

    /* ==================================================================================
        sub-spot-area
    ================================================================================== */
    .sub-spot-area,
    .sub-spot-area.sub-banner-default {
        height: 160px;
    }
    .sub-spot-area .bg {
        height: 160px;
    }
    .sub-spot-area .inner-wrap {
        gap: 16px;

        height: 160px;
    }
    .sub-spot-area .inner-wrap h1 {
        gap: 7px;
    }
    .sub-spot-area .inner-wrap h1 small {
        font-size: 15px;
    }
    .sub-spot-area .inner-wrap h1 strong {
        font-size: 28px;
    }
    .sub-spot-area .inner-wrap .info {
        gap: 5px;
    }
    .sub-spot-area .inner-wrap .info span {
        font-size: 15px;
    }

    /* ==================================================================================
        breadcrumb
    ================================================================================== */
    .breadcrumb {
        border-bottom: 1px solid #eee;
    }

    /* ==================================================================================
        article
    ================================================================================== */
    /* article */
    .article {
        line-height: 1.6;
        font-size: 15px;
    }
    .article > h1.sub-title {
        margin: 24px 0 32px;
        font-size: 36px;
    }
    .article .section h2.section-title {
        margin: 40px 0 12px;
        font-size: 24px;
    }

    .article .section .info-box {
        padding: 16px;
    }
    .article .section .info-box p.title {
        font-size: 19px;
    }
    .article .section .info-box ul {
        margin-left: 12px;
    }
    .info-box ul li {
        font-size: 15px;
    }

    /* ==================================================================================
        article - snb
    ================================================================================== */
    .snb-area {
        margin: 0 0 44px;
    }
    .snb-area ul.snb {
        gap: 10px 10px;
    }
    .snb-area ul.snb > li > a {
        flex: 1 1 20%;
        padding: 8px 24px;
        font-size: 17px;
    }

    /* ==================================================================================
        article - common
    ================================================================================== */
    .article .section .table-responsive .table th,
    .article .section .table-responsive .table td {
        font-size: 15px;
    }

    /* ==================================================================================
   INFORMATION - Venue
    ================================================================================== */
    .venue .venue-top {
        flex-direction: column;
    }
    .venue .venue-glance {
        flex-direction: column;
    }

    /* ==================================================================================
   INFORMATION - transportation
    ================================================================================== */
    .transportation .official-guide-banner {
        flex-direction: column;
        text-align: center;
    }
    .transportation .map-wrap {
        height: 350px;
    }
}

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

    /* ==================================================================================
        sub-spot-area
    ================================================================================== */
    .sub-spot-area,
    .sub-spot-area.sub-banner-default {
        height: 120px;
    }
    .sub-spot-area .bg {
        height: 120px;
    }
    .sub-spot-area .inner-wrap {
        gap: 12px;

        height: 120px;
    }
    .sub-spot-area .inner-wrap h1 small {
        font-size: 13px;
    }
    .sub-spot-area .inner-wrap h1 strong {
        font-size: 24px;
    }
    .sub-spot-area .inner-wrap .info span {
        font-size: 13px;
    }
    .sub-spot-area .inner-wrap h1 img {
        width: 180px;
    }

    /* ==================================================================================
        article
    ================================================================================== */
    /* article */
    .article > h1.sub-title {
        font-size: 32px;
    }

    /* ==================================================================================
        article - snb
    ================================================================================== */
    .snb-area ul.snb {
        gap: 7px 7px;
    }
    .snb-area ul.snb > li > a {
        flex: 1 1 20%;
        padding: 8px 24px;
        font-size: 16px;
    }

    /* ==================================================================================
        sub-spot-area
    ================================================================================== */
    .committee .section {
        justify-content: center;
    }
    .committee .committee-list-inner {
        width: 100%;
        align-items: center;
    }
    .committee .committee-list-inner h3 {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* ==================================================================================
         INFORMATION - transportation
       ================================================================================== */
    .transportation .transport-card {
        flex: 0 1 100% !important;
    }
    .transportation .transport-card .section-list {
        flex-direction: column
    }
}

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

    /* ==================================================================================
        sub-spot-area
    ================================================================================== */
    .sub-spot-area,
    .sub-spot-area.sub-banner-default {
        height: 100px;
    }
    .sub-spot-area .bg {
        height: 100px;
    }
    .sub-spot-area .inner-wrap {
        gap: 7px;

        height: 100px;
    }
    .sub-spot-area .inner-wrap h1 small {
        font-size: 12px;
    }
    .sub-spot-area .inner-wrap h1 strong {
        font-size: 21px;
    }
    .sub-spot-area .inner-wrap .info span {
        font-size: 12px;
    }

    /* ==================================================================================
        article - snb
    ================================================================================== */
    .snb-area ul.snb {
        gap: 5px 5px;
    }
    .snb-area ul.snb > li > a {
        padding: 6px 16px;
        font-size: 14px;
    }

}

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

    /* ==================================================================================
        sub-spot-area
    ================================================================================== */
    .sub-spot-area,
    .sub-spot-area.sub-banner-default {
        height: 80px;
    }
    .sub-spot-area .bg {
        height: 80px;
    }
    .sub-spot-area .inner-wrap {
        gap: 2px;

        height: 80px;
    }
    .sub-spot-area .inner-wrap h1 small {
        font-size: 10px;
        color: rgba(255,255,255,0.85);
    }
    .sub-spot-area .inner-wrap h1 strong {
        font-size: 17px;
        color: rgba(255,255,255,0.85);
    }
    .sub-spot-area .inner-wrap .info span {
        font-size: 9px;
        color: rgba(255,255,255,0.85);
    }

    /* ==================================================================================
        breadcrumb
    ================================================================================== */
    .breadcrumb {
        height: unset;
        line-height: 1.3;
    }
    .breadcrumb ul {
        justify-content: flex-start;
        gap: 8px;

        padding: 7px 0;
    }
    .breadcrumb ul li {
        font-size: 11px;
    }

    /* ==================================================================================
        article
    ================================================================================== */
    /* article */
    .article > h1.sub-title {
        margin: 24px 0;
        font-size: 28px;
    }
    .article .section p.section-paragraph {
        text-align: left;
    }

    /* ==================================================================================
        article - snb
    ================================================================================== */
    .snb-area {
        margin: 0 0 32px;
    }
    .snb-area ul.snb {
        gap: 5px 5px;
    }
    .snb-area ul.snb > li > a {
        padding: 4px 12px;
        font-size: 13px;
    }

}

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


}

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

    /* ==================================================================================
        breadcrumb
    ================================================================================== */
    .breadcrumb ul li {
        font-size: 10px;
    }

    /* ==================================================================================
        article
    ================================================================================== */
    /* article */
    .article {
        font-size: 14px;
    }
    .article > h1.sub-title {
        font-size: 24px;
    }
    .article .section h2.section-title {
        font-size: 19px;
    }

    /* ==================================================================================
        article - snb
    ================================================================================== */
    .snb-area {
        margin: 0 0 32px;
    }
    .snb-area ul.snb {
        gap: 5px 5px;
    }
    .snb-area ul.snb > li > a {
        padding: 4px 16px;
        font-size: 13px;
    }

}