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

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


}


/* 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;
    }

}

/* 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;
    }

    /* ==================================================================================
        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;
    }

}

/* 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: 7px;

        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: 10px;
        color: rgba(255,255,255,0.85);
    }

    /* ==================================================================================
        article
    ================================================================================== */
    /* article */
    .article > h1.sub-title {
        margin: 24px 0;
    }

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

}

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


}

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

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

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

    /* ==================================================================================
        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;
    }

}