@charset "UTF-8";
@media screen and (max-width: 1440px) {
    /* S: 시설안내 */
    /* 이용안내 (s) */
    .bd_graybox.step.step6 {
        flex-wrap: wrap;
    }
    .bd_graybox.step.step6 li {
        width: calc(100% / 3 - 20px);
        flex-shrink: 0;
    }
    .bd_graybox.step.step6 li:nth-child(3n):after {
        display: none;
    }
    .info_rf_table {
        width: 100%;
    }
    .info_rf_table .tf_01 {
        width: 100%;
    }
    .info_rf_table .tf_02 {
        width: 100%;
    }
    .info_rf_table .tf_03 {
        width: 100%;
    }
    .info_rf_table .tf_04 {
        width: 100%;
    }
    .info_rf_table .tf_05 {
        width: 100%;
    }
    /* 이용안내 (e) */
    /* E: 시설안내 */
}

@media screen and (max-width: 1280px) {
    /* S: 시설안내 */
    /* 시설안내 (s) */
    .facility03 .imgbox {
        width: 80%;
    }
    /* 시설안내 (e) */
    /* E: 시설안내 */

    /* S: 포토갤러리 */
    /* 게시판 상세(s) */
    .cardBoardList {
        gap: 20px;
    }
    .cardBoardList li {
        max-width: calc(100% / 3 - 14px);
    }
    .cardBoardTit {
        font-size: 20px;
    }
    .cardBoard .imgbox {
        height: 240px;
    }
    .cardBoard .txtbox {
        padding: 16px;
    }
    .cardBoardTxt {
        margin-top: 10px;
        font-size: 16px;
    }
    .cardBoardDate {
        margin-top: 10px;
        font-size: 15px;
    }
    /* 게시판 상세(e) */
    /* E: 포토갤러리 */

    /* S: 사이트맵 */
    .sitemapWrap {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .sitemapWrap .sitebox {
        width: calc((100% - 100px) / 4);
    }
    /* E: 사이트맵 */

    /* S: 공지사항 */
    /* 목록(s) */
    .notice_table > thead > tr > th:nth-child(1) {
        width: 60px;
    }
    .notice_table > thead > tr > th:nth-child(3) {
        width: 100px;
    }
    .notice_table > thead > tr > th:nth-child(4) {
        width: 150px;
    }
    .notice_table > thead > tr > th:nth-child(5) {
        width: 80px;
    }
    /* 목록(e) */
    /* E: 공지사항 */
}
@media screen and (max-width: 1024px) {
    /* S: 협력업체 */
    .card_popList li {
        flex: 1 0 calc(100% / 2 - 15px);
        max-width: calc(100% / 2 - 15px);
    }
    .card_dt_pop .card_dt_name {
        font-size: 20px;
    }
    .card_dt_pop .card_details {
        margin-top: 16px;
        font-size: 18px;
    }
    /* E: 협력업체 */

    /* S: 예약안내 */
    .reservation02 .table_list .txt_flex {
        font-size: 18px;
    }
    /* E: 예약안내 */

    /* S: 시설안내 */
    /* 워케이션이란? (s) */
    .cardGridList li {
        padding: 30px;
    }
    .cardGridList .subTit {
        font-size: 20px;
    }
    .cardGridList .text {
        margin-top: 16px;
        font-size: 16px;
    }
    /* 워케이션이란? (e) */
    /* 이용안내 (s) */
    .bd_graybox.step li .imgbox {
        width: 100px;
        height: 100px;
    }
    .bd_graybox.step .step_tit {
        font-size: 18px;
    }
    .bd_graybox.step .small_txt {
        font-size: 15px;
    }
    /* 이용안내 (e) */
    /* 시설안내 (s) */
    .facility03 .imgbox {
        width: 100%;
    }
    /* 시설안내 (e) */
    /* E: 시설안내 */

    /* S: 찾아오시는길 */
    .descr_txt.lb {
        margin-top: 16px;
    }
    .location02 {
        margin-top: 60px;
    }
    /* E: 찾아오시는길 */

    /* S: 공지사항 */
    /* 목록(s) */
    .notice_table > thead > tr > th:nth-child(4) {
        width: 120px;
    }
    /* 목록(e) */
    /* E: 공지사항 */
}
@media screen and (max-width: 768px) {
    /* S: 협력업체 */
    .partner02 {
        margin-top: 30px;
    }
    .title_wrap {
        margin-bottom: 10px;
    }
    .card_popList {
        gap: 10px;
    }
    .card_popList li {
        flex: 1 0 calc(100% / 2 - 5px);
        max-width: calc(100% / 2 - 5px);
    }
    .card_popList .btns .btn_style {
        height: 48px;
    }
    .card_popList .cardNm {
        margin-top: 10px;
        font-size: 16px;
    }
    .card_popList .btns {
        margin-top: 16px;
        padding-top: 16px;
    }
    /* E: 협력업체 */

    /* S: 시설안내 */
    /* 워케이션이란? (s) */
    .about02 .container {
        padding-inline: 0;
    }
    .about02 .title {
        padding-left: 16px;
        font-size: 20px;
    }
    .cardGridList {
        margin-top: 16px;
        padding: 20px;
        gap: 20px;
    }
    .cardGridList li {
        padding: 20px;
        flex: 1 0 100%;
    }
    .cardGridList .left .imgbox {
        width: 60px;
    }
    .cardGridList .subDescr {
        display: none;
    }
    /* 워케이션이란? (e) */

    /* 이용안내 (s) */
    .circle_title {
        font-size: 17px;
    }
    .stepWrap + .stepWrap {
        margin-top: 30px;
    }
    .lineList > li {
        padding: 20px;
    }
    .lineList .txt.large,
    .lineList .txt.large * {
        font-size: 18px;
    }
    .lineList .txt.small,
    .lineList .txt.small * {
        font-size: 15px;
    }
    .txt_space {
        width: 75px;
    }
    .bd_graybox.step.step4 {
        flex-wrap: wrap;
        gap: 20px;
    }
    .bd_graybox.step.step4 li {
        width: calc(50% - 20px);
        flex-shrink: 0;
    }
    .bd_graybox.step.step4 li:nth-child(2n):after {
        display: none;
    }
    .table_flex .tf_th {
        font-size: 15px;
        height: 40px;
    }
    .table_flex .tf_td {
        padding: 8px;
        font-size: 15px;
    }
    .info_rf_table {
        flex-wrap: wrap;
    }
    .info_rf_table .tf_01,
    .info_rf_table .tf_02,
    .info_rf_table .tf_03,
    .info_rf_table .tf_04,
    .info_rf_table .tf_05 {
        width: 100%;
    }
    .info_rf_table.table_flex .tf_tr + .tf_tr {
        border-left: none;
        border-top: 1px solid var(--black);
    }
    /* 이용안내 (e) */
    /* E: 시설안내 */

    /* S: 찾아오시는길 */
    .descr_txt.lb .txt_l {
        margin-bottom: 10px;
        margin-right: 0;
    }
    .descr_txt.lb .subTit {
        font-size: 16px;
    }
    .descr_txt.lb {
        margin-top: 10px;
        font-size: 16px;
    }
    .line_title {
        margin-bottom: 16px;
        font-size: 18px;
    }
    /* E: 찾아오시는길 */

    /* S: 포토갤러리 */
    /* 목록(s) */
    .cardBoard .videobox::after {
        width: 40px;
        height: 40px;
    }
    .cardBoard .imgbox {
        height: 180px;
    }
    .cardBoardTit {
        font-size: 18px;
    }
    .cardBoardTxt {
        font-size: 15px;
    }
    .cardBoardDate {
        font-size: 14px;
    }
    /* 목록(e) */
    /* 게시판 상세(s) */
    .cardBoardList {
        margin-top: 0;
        padding-top: 16px;
        gap: 16px 10px;
    }
    .cardBoardList li {
        max-width: calc(50% - 5px);
    }
    /* 게시판 상세(e) */
    /* E: 포토갤러리 */

    /* S: 공지사항 */
    /* 목록(s) */
    .boardTop {
        align-items: flex-start;
        flex-direction: column-reverse;
        gap: 30px 0;
    }
    .boardTop .searchBox {
        width: 100%;
    }
    .notice_table > thead > tr > th:nth-child(1) {
        width: 60px;
    }

    .notice_table > thead > tr > th:nth-child(4) {
        width: 120px;
        letter-spacing: -0.5px;
    }
    .notice_table > thead > tr > th:nth-child(2) {
        width: 100%;
    }
    /* 목록(e) */
    /* E: 공지사항 */

    /* S: 사이트맵 */
    .sitemapWrap {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }
    .sitemapWrap .sitebox {
        padding: 12px 10px;
        border-radius: 20px;
        width: calc((100% - 16px) / 2);
    }
    .sitemapWrap .sitebox .title {
        height: 36px;
        font-size: 16px;
        line-height: 36px;
    }
    .sitemapWrap .sitebox ul {
        margin-top: 10px;
    }
    .sitemapWrap .sitebox ul li + li {
        margin-top: 4px;
    }
    .sitemapWrap .sitebox ul li a {
        font-size: 16px;
    }
    /* E: 사이트맵 */

    /* S: page 공통영역 */
    .pageTitleWrap .subEng {
        margin-bottom: 16px;
        font-size: 16px;
    }
    .pageTitleWrap {
        margin-top: 30px;
    }
    .pageTit {
        font-size: 30px;
    }
    .pageDscr {
        margin-top: 16px;
        font-size: 15px;
        word-break: keep-all;
    }
    .pageTitleWrap + * {
        margin-top: 30px;
    }
    .pageConts {
        margin-top: 30px;
    }
    /* E:  page 공통영역 */
}

@media screen and (max-width: 600px) {
    /* S: 협력업체 */
    .descr_txt.lb .txt_flex {
        display: block;
    }
    .title_wrap {
        display: block;
    }
    .title_wrap .subTxt {
        margin-top: 4px;
        font-size: 14px;
    }
    .card_popList li {
        flex: 1 0 100%;
        max-width: 100%;
    }
    .card_popList .cardNm {
        font-size: 15px;
    }
    .card_popList .no_data {
        height: 140px;
    }
    .btn_zoom {
        display: inline-flex;
        padding: 0 12px;
        height: 36px;
        font-size: 14px;
    }
    .ico_zoom {
        width: 14px;
        height: 14px;
    }
    /* E: 협력업체 */

    /* S: 예약안내 */
    .reservation02 {
        margin-top: 30px;
    }
    .reservation02 .table_list.basic > tbody > tr > td {
        padding: 10px;
    }
    .reservation02 .table_list .txt_flex {
        font-size: 15px;
    }
    /* E: 예약안내 */

    /* S: 시설안내 */
    /* 워케이션이란? (s) */
    .about01 .bg_box {
        height: 235px;
        background: url(../img/sub/about_bg01_mo.jpg) no-repeat center/cover;
    }
    .about01 .bg_box .subTit {
        margin-bottom: 10px;
        font-size: 14px;
    }
    .about01 .bg_box .title {
        font-size: 24px;
    }
    .about01 .descr_txt {
        font-size: 16px;
    }
    .cardGridList li {
        gap: 20px;
    }
    .cardGridList .subTit {
        font-size: 18px;
    }
    .cardGridList .text {
        margin-top: 10px;
        font-size: 15px;
    }
    /* 워케이션이란? (e) */

    /* 이용안내 (s) */
    .lineList > li {
        padding: 16px;
        display: block;
    }
    .lineList > li .nameLb {
        height: 44px;
        font-size: 16px;
        width: 100%;
    }
    .lineList > li .right {
        padding-left: 10px;
    }
    .lineList .txt.large,
    .lineList .txt.large * {
        font-size: 17px;
    }
    .bd_graybox.step.step6 {
        gap: 20px;
    }
    .bd_graybox.step.step4 li,
    .bd_graybox.step.step6 li {
        width: calc(50% - 10px);
    }
    .bd_graybox.step.step6 li:nth-child(2n):after {
        display: none;
    }
    .bd_graybox.step.step6 li:nth-child(3n):after {
        display: block;
    }
    .bd_graybox.step .step_tit {
        font-size: 17px;
    }
    .bd_graybox.step li:not(:last-child):after {
        top: 50%;
        right: -17px;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        content: "";
        background: url(../img/icon/ico_triangle.svg) no-repeat center / contain;
    }
    /* 이용안내 (e) */
    /* 시설현황 (s) */
    .facility02,
    .facility03 {
        margin-top: 30px;
    }
    .table_list.basic > * > tr > th,
    .table_list.basic > tbody > tr > td {
        font-size: 14px;
    }
    .table_list.basic > * > tr > th,
    .table_list.basic > tbody > tr > td {
        padding: 8px;
    }
    .facility02 .table_list.basic .th01 {
        width: 12%;
    }
    .facility02 .table_list.basic .th02 {
        width: 25%;
    }
    .facility02 .table_list.basic .th03 {
        width: 28%;
    }
    .facility02 .table_list.basic .th04 {
        width: 35%;
    }
    .facility_img {
        padding: 20px;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
    }
    /* 시설현황 (e) */
    /* E: 시설안내 */

    /* S: 찾아오시는길 */
    .bd_box {
        padding: 20px;
    }
    .location02 .bd_box li {
        display: block;
    }
    .location02 .bd_box li + li {
        margin-top: 20px;
        padding-top: 20px;
    }
    .location02 .bd_box .left {
        display: none;
    }
    .location02 .bd_box .right .subTit i {
        margin-left: 10px;
        display: inline-block;
    }
    .ico_lc_subway {
        width: 20px;
        height: 30px;
        background: url(../img/icon/ico_lc_subway.svg) no-repeat center/contain;
    }
    .ico_lc_bus {
        width: 28px;
        height: 27px;
        background: url(../img/icon/ico_lc_bus.svg) no-repeat center/contain;
    }
    .ico_lc_car {
        width: 33px;
        height: 16px;
        background: url(../img/icon/ico_lc_car.svg) no-repeat center/contain;
    }
    .location02 .bd_box .right .subTit {
        margin-bottom: 10px;
        font-size: 18px;
        display: flex;
        align-items: center;
    }
    .location02 .bd_box .right .txt_box {
        font-size: 16px;
        word-break: keep-all;
    }
    /* E: 찾아오시는길 */

    /* S: 브래드크럼스 */
    .breadCrumbs a {
        padding: 12px;
    }
    .breadCrumbs select {
        padding: 10px 30px 10px 12px;
        font-size: 14px;
        width: 130px;
    }
    /* E: 브래드크럼스 */

    /* S: 포토갤러리 */
    /* 게시판 상세(s) */
    .galleryWrap li {
        width: calc(100% / 2 - 10px);
    }
    .galleryWrap li {
        width: 100%;
    }
    .cardBoardList li {
        flex: 1 0 100%;
        max-width: 100%;
    }
    /* 게시판 상세(e) */
    /* E: 포토갤러리 */
}

@media screen and (max-width: 480px) {
    /* S: 협력업체 */
    .card_popList .thumnail {
        height: 140px;
    }
    .card_dt_pop .card_details {
        font-size: 16px;
    }
    .card_popList .btns .btn_style {
        height: 44px;
    }
    /* E: 협력업체 */

    /* S: 시설안내 */
    /* 워케이션이란? (s) */
    .cardGridList li {
        display: block;
        text-align: center;
    }
    .cardGridList .left .imgbox {
        width: 80px;
        margin: 0 auto;
    }
    .cardGridList .right {
        margin-top: 20px;
    }
    /* 워케이션이란? (e) */

    /* 이용안내 (s) */
    .bd_graybox {
        padding: 20px;
    }
    .bd_graybox.step {
        justify-content: space-between;
    }
    .bd_graybox.step li .imgbox {
        width: 74px;
        height: 74px;
    }
    /* 이용안내 (e) */
    /* E: 시설안내 */

    /* S: 포토갤러리 */
    /* 목록(s) */
    .cardBoardList.video li {
        flex: 1 0 100%;
        max-width: 100%;
    }
    .cardBoard .imgbox {
        height: 52vw;
    }
    .cardBoardTit {
        font-size: 16px;
    }
    .cardBoardTxt {
        font-size: 14px;
    }
    /* 목록(e) */
    /* E: 포토갤러리 */
}
@media screen and (max-width: 359px) {
    /* S: 시설안내 */
    /* 워케이션이란? (s) */
    .cardGridList .subTit {
        font-size: 16px;
    }
    /* 워케이션이란? (e) */
    /* 시설안내 (s) */
    .bd_graybox.step .step_tit {
        font-size: 16px;
    }
    .bd_graybox.step .small_txt {
        font-size: 14px;
    }
    /* 시설안내 (e) */
    /* 시설현황 (s) */
    .table_list.basic > * > tr > th,
    .table_list.basic > tbody > tr > td {
        font-size: 13px;
    }
    /* 시설현황 (e) */
    /* E: 시설안내 */
    .pageConts.greeting_sec04 .tit {
        font-size: 24px;
    }
}
@media screen and (max-width: 320px) {
}