/* ==================================================================================
    Media query
================================================================================== */
@media only screen
and (max-width: 768px) {

    /* *******************************************************************
        .main-banner-area
    ******************************************************************* */
    .main-banner-area {
        padding: 60px 0 0;
    }
    #wrap .main-banner-area .inner-wrap {
        display: flex;
        flex-flow: column nowrap;
        gap: 60px;

        padding: 60px 16px 40px;
    }
    .main-banner-area h1 {
        position: static;
        line-height: 1.3;
        font-size: 32px;
        z-index: 3;
    }

    /* 퀵버튼 */
    #quick {
        height: auto;
    }
    #quick .quick-buttons {
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px 2%;

        padding: 0;
    }
    #quick .quick-buttons li {
        flex: 0 0 49%;

        width: 100%;
        min-width: 220px;
        margin: 0;
    }
    #quick .quick-buttons li a {
        height: 100px;
        padding: 16px 0 0 16px;
    }
    #quick .quick-buttons li a span.title {
        display: block;
        margin: 0 0 5px;
        font-size: 19px;
    }
    #quick .quick-buttons li a span.info {
        display: none;
    }
    #quick .quick-buttons li:first-child a {
        background: rgba(255,255,255,0.96) url(/images/main/bg_quick_01.png) calc(100% + 30px) -220px no-repeat;
    }
    #quick .quick-buttons li:first-child a:hover {
        background: #d3effe url(/images/main/bg_quick_01.png) calc(100% + 30px) -220px no-repeat;
    }
    #quick .quick-buttons li:nth-child(2) a {
        background: rgba(255,255,255,0.96) url(/images/main/bg_quick_02.png) calc(100% + 30px) -220px no-repeat;
    }
    #quick .quick-buttons li:nth-child(2) a:hover {
        background: #fff9df url(/images/main/bg_quick_02.png) calc(100% + 30px) -220px no-repeat;
    }
    #quick .quick-buttons li:nth-child(3) a {
        background: rgba(255,255,255,0.96) url(/images/main/bg_quick_03.png) calc(100% + 30px) -220px no-repeat;
    }
    #quick .quick-buttons li:nth-child(3) a:hover {
        background: #ffe4e4 url(/images/main/bg_quick_03.png) calc(100% + 30px) -220px no-repeat;
    }
    #quick .quick-buttons li:last-child a {
        background: rgba(255,255,255,0.96) url(/images/main/bg_quick_04.png) calc(100% + 30px) -220px no-repeat;
    }
    #quick .quick-buttons li:last-child a:hover {
        background: #f0f0f0 url(/images/main/bg_quick_04.png) calc(100% + 30px) -220px no-repeat;
    }

    /* *******************************************************************
        .col1 : 갤러리
    ******************************************************************* */
    .col1 {
        padding: 40px 0;
    }
    .col1 .inner-wrap {
        width: 100%;
    }
    .col1 .inner-wrap .gallery-area {
        gap: 20px;
    }
    .col1 .inner-wrap .gallery-area h3 {

    }
    .col1 .inner-wrap .gallery-area h3 a.title {
        font-size: 24px;
    }
    .col1 .inner-wrap .gallery-area h3 a.btn-go {
        display: none;
    }
    .col1 .inner-wrap .gallery-area ul {
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 20px 2%;
    }
    .col1 .inner-wrap .gallery-area li {
        flex: 1 1 49%;
        justify-content: flex-start;
        align-items: flex-start;

        min-width: 240px;
    }
    .col1 .inner-wrap .gallery-area li a {
        justify-content: space-between;
        align-items: flex-start;
    }
    .col1 .inner-wrap .gallery-area li a .thm-area {
        height: 180px;
    }
    .col1 .inner-wrap .gallery-area li a .thm-area img {
        min-height: 180px;
    }
    .col1 .inner-wrap .gallery-area li a .info-area .title {
        font-size: 17px;
        word-break: keep-all;
    }

    /* *******************************************************************
        .col2 : 홍보영상
    ******************************************************************* */
    .col2 {
        padding: 40px 0;
    }
    .col2 .inner-wrap {
        width: 100%;
    }
    .col2 .inner-wrap .video-area {
        gap: 20px;
    }
    .col2 .inner-wrap .video-area h3 {

    }
    .col2 .inner-wrap .video-area h3 a.title {
        font-size: 24px;
    }
    .col2 .inner-wrap .video-area h3 a.btn-go {
        display: none;
    }
    .col2 .inner-wrap .video-area ul {
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 20px 2%;

        width: 100%;
    }
    .col2 .inner-wrap .video-area li {
        flex: 1 1 49%;
        justify-content: flex-start;
        align-items: flex-start;

        min-width: 240px;
    }
    .col2 .inner-wrap .video-area li a {
        justify-content: space-between;
        align-items: flex-start;
    }
    .col2 .inner-wrap .video-area li a .thm-area {
        height: 180px;
    }
    .col2 .inner-wrap .video-area li a .thm-area img {
        min-height: 180px;
    }
    .col2 .inner-wrap .video-area li a .info-area .title {
        font-size: 17px;
        word-break: keep-all;
    }

    /* *******************************************************************
        .col3 : 공지사항, 대상지신청 + 홍보자료
    ******************************************************************* */
    .col3 {
        padding: 40px 0;
    }
    .col3 .inner-wrap {
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .conts-box {
        height: 240px;
        padding: 24px;
    }
    .conts-box h3 {
        margin: 0 0 20px;
        font-size: 24px;
    }

    /* notice */
    .notice.conts-box {
        flex: 1 1 100%;
        flex-flow: column nowrap;

        width: 100%;
        margin: 0 0 60px;
    }

    .conts-box.notice ul {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 5px;

        width: 100%;
    }
    .conts-box.notice ul li {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;

        width: 100%;
        padding: 0 0 5px 12px;
        background: url("/images/main/dot.jpg") left 10px no-repeat;
    }
    .conts-box.notice ul li .title {
        flex: 1 1 480px;
        font-size: 15px;
    }
    .conts-box.notice ul li .date {
        flex: 1 1 120px;

        font-size: 14px;
    }

    /* .quick-area */
    .quick-area {
        flex: 1 1 100%;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 2%;

        width: 100%;
    }

    .quick-area .conts-box.site {
        flex: 1 1 49%;
        width: 100%;
    }

    /* 컨텐츠 - 홍보책자 */
    .quick-area .conts-box.guide-book {
        flex: 1 1 49%;
        width: 100%;
    }

    /* ==================================================================================
        layer popup
    ================================================================================== */
    /* popup1 */
    .layer-popup-area.pop1 {
        top: 0px;
        left: 2%;
        width: 96%;
        margin: 0;
        z-index: 9999;
    }
    .layer-popup-area .cont h1 br {
        display: block;
    }
    .layer-popup-area.pop1 .close {
        width: 100%;
    }
    .layer-popup-area .cont {
        padding: 30px 20px;
    }

}

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

    /* *******************************************************************
        .main-banner-area
    ******************************************************************* */
    /* 퀵버튼 */
    #quick .quick-buttons li:first-child a {
        background: rgba(255,255,255,0.96) url(/images/main/bg_quick_01.png) calc(100% + 30px) -160px no-repeat;
        background-size: cover;
    }
    #quick .quick-buttons li:first-child a:hover {
        background: #d3effe url(/images/main/bg_quick_01.png) calc(100% + 30px) -160px no-repeat;
        background-size: cover;
    }
    #quick .quick-buttons li:nth-child(2) a {
        background: rgba(255,255,255,0.96) url(/images/main/bg_quick_02.png) calc(100% + 30px) -160px no-repeat;
        background-size: cover;
    }
    #quick .quick-buttons li:nth-child(2) a:hover {
        background: #fff9df url(/images/main/bg_quick_02.png) calc(100% + 30px) -160px no-repeat;
        background-size: cover;
    }
    #quick .quick-buttons li:nth-child(3) a {
        background: rgba(255,255,255,0.96) url(/images/main/bg_quick_03.png) calc(100% + 30px) -160px no-repeat;
        background-size: cover;
    }
    #quick .quick-buttons li:nth-child(3) a:hover {
        background: #ffe4e4 url(/images/main/bg_quick_03.png) calc(100% + 30px) -160px no-repeat;
        background-size: cover;
    }
    #quick .quick-buttons li:last-child a {
        background: rgba(255,255,255,0.96) url(/images/main/bg_quick_04.png) calc(100% + 30px) -160px no-repeat;
        background-size: cover;
    }
    #quick .quick-buttons li:last-child a:hover {
        background: #f0f0f0 url(/images/main/bg_quick_04.png) calc(100% + 30px) -160px no-repeat;
        background-size: cover;
    }

    /* *******************************************************************
        .col3 : 공지사항, 대상지신청 + 홍보자료
    ******************************************************************* */
    .conts-box.notice ul li .title {
        font-size: 15px;
    }
    .conts-box.notice ul li .date {
        display: none;
    }

    .conts-box .info,
    .quick-area .conts-box.site .info {
        line-height: 1.3;
        font-size: 13px;
    }
    .quick-area {
        flex-flow: column nowrap;
        gap: 10px;
    }

}

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

    /* *******************************************************************
        .main-banner-area
    ******************************************************************* */
    /* 퀵버튼 */
    #quick .quick-buttons {
        gap: 10px;
    }
    #quick .quick-buttons li {
        min-width: 100%;
    }
    #quick .quick-buttons li a {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 80px;
        padding: 0 24px;
    }
    #quick .quick-buttons li:first-child a {
        background: rgba(255,255,255,0.96) url(/images/main/bg_quick_01.png) calc(100% + 30px) -220px no-repeat;
    }
    #quick .quick-buttons li:first-child a:hover {
        background: #d3effe url(/images/main/bg_quick_01.png) calc(100% + 30px) -220px no-repeat;
    }
    #quick .quick-buttons li:nth-child(2) a {
        background: rgba(255,255,255,0.96) url(/images/main/bg_quick_02.png) calc(100% + 30px) -220px no-repeat;
    }
    #quick .quick-buttons li:nth-child(2) a:hover {
        background: #fff9df url(/images/main/bg_quick_02.png) calc(100% + 30px) -220px no-repeat;
    }
    #quick .quick-buttons li:nth-child(3) a {
        background: rgba(255,255,255,0.96) url(/images/main/bg_quick_03.png) calc(100% + 30px) -220px no-repeat;
    }
    #quick .quick-buttons li:nth-child(3) a:hover {
        background: #ffe4e4 url(/images/main/bg_quick_03.png) calc(100% + 30px) -220px no-repeat;
    }
    #quick .quick-buttons li:last-child a {
        background: rgba(255,255,255,0.96) url(/images/main/bg_quick_04.png) calc(100% + 30px) -220px no-repeat;
    }
    #quick .quick-buttons li:last-child a:hover {
        background: #f0f0f0 url(/images/main/bg_quick_04.png) calc(100% + 30px) -220px no-repeat;
    }

    #quick .quick-buttons li a span.title {
        margin: 0;
    }

    /* *******************************************************************
        .col2 : 홍보영상
    ******************************************************************* */
    .col2 {
        background: #05112A url(/images/main/bg_video_area.png) center bottom no-repeat;
        background-size: unset;
    }

}

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

}