@charset "utf-8";

@import url('reset.css');
@import url('swiper.min.css');
@import url('layout.css');
@import url('content.css');

@media (min-width: 768px) {
    /* grid */
    .gallery_type01 .row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 15px;
        margin-bottom: 18px;
    }
    .gallery_type01 .row:last-child {
        margin-bottom: 0;
    }
    .gallery_type01 .column01 {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
    }
    .gallery_type01 .column02 {
        grid-column: 3 / span 2;
    }
    .gallery_type01 .column03 {
        grid-column: 1 / span 2;
    }
    .gallery_type01 .column04 {
        grid-column: 3 / span 2;
        grid-row: 1 / span 2;
    }
    .gallery_type01 .column05 {
        grid-row: 2 / span 1;
    }
}

@media (min-width: 1024px) {
}

@media (max-width: 1023px) and (min-width: 768px) {
}

@media (max-width: 1530px) {
    .sub_top_intro .subtitle {
        padding-left: 60px;
    }

    .mission_area .inner {
        width: 100%;
        padding-right: 50px;
    }
    .mission_area .right .col:last-child .inner {
        padding-left: 50px;
    }
}

@media (max-width: 1440px) {
    #header .head {
        padding: 0 20px;
    }

    .mission_area p {
        font-size: 25px;
        margin-bottom: 25px;
    }
    .mission_area .btn_more01 {
        margin-top: 50px;
    }
    .title04 {
        font-size: 44px;
    }

}

@media (max-width: 1100px) {
    #lnb,
    .lang {
        display: none;
    }
    .hamberger {
        display: block;
    }

    #footer {
        padding-bottom: 78px;
    }
    #footer .inner {
        display: block;
    }
    #footer .col:first-child {
        top: 0;
    }
    #footer .util_nav {
        text-align: left;
        margin-bottom: 30px;
        margin-top: 25px;
    }
    #footer .util_nav a {
        margin-right: 25px;
        margin-left: 0;
    }

    .title05 {
        margin-bottom: 50px;
    }
    .tab_type01 button {
        height: 75px;
        font-size: 24px;
    }
    .culture_area .col:first-child {
        padding-top: 33px;
    }
}

@media (max-width: 1023px) {
    .gallery_type01 .cont {
        padding: 20px;
        font-size: 14px;
    }
    .gallery_type01 .top > em {
        font-size: 14px;
        margin-bottom: 2px;
    }
    .gallery_type01 .title {
        font-size: 24px;
    }
    .gallery_type01 .bar {
        height: 14px;
        position: relative;
        top: -1px;
    }
    .gallery_type01 .size01 .top > em {
        margin-bottom: 4px;
    }
    .gallery_type01 .info,
    .gallery_type01 .size01 .info {
        bottom: 16px;
        right: 20px;
    }
    .gallery_type01 .size01 .title {
        font-size: 38px;
    }
    .gallery_type01 .size01 .cont,
    .gallery_type01 .size01 .top > em {
        font-size: 18px;
    }

    .culture_area .col:first-child {
        padding-right: 50px;
    }

    .culture_img {
        margin-top: 106px;
    }

    .title04 {
        font-size: 28px;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .mission_area .part {
        display: block;
    }
    .mission_area .col {
        width: 100%;
    }
    .mission_area .left .inner,
    .mission_area .right .inner,
    .mission_area .right .col:last-child .inner {
        padding-left: 0;
        width: 100%;
        max-width: 100%;
        padding: 28px 24px;
        text-align: left;
    }
    .mission_area p {
        margin-bottom: 10px;
        font-weight: 400;
    }
    .mission_area p {
        font-size: 18px;
    }
    .mission_area .btn_more01 {
        margin-top: 17px;
    }

    .btn_more01 {
        font-size: 16px;
        padding-right: 22px;
    }
    .btn_more01:after {
        width: 11px;
        height: 11px;
        background-size: cover;
        margin-top: -5px;
    }

    .mission_area {
        padding: 0 20px;
    }
    .mission_area .part {
        overflow: hidden;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    .mission_area .col:last-child {
        position: relative;
    }
    .mission_area .circle_bg {
        left: auto;
        right: -34px;
        transform: translate3d(0, 0, 0);
        top: -90px;
    }
    .mission_area .right .circle_bg {
        left: -34px;
        right: auto;
    }
    .mission_area .circle_bg,
    .mission_area .circle.no1 {
        width: 220px;
        height: 220px;
    }
    .mission_area .circle.no2 {
        width: 82px;
        height: 82px;
    }
    .mission_area .circle.no3 {
        width: 240px;
        height: 240px;
        margin-top: 0;
        margin-left: 30px;
    }
    .mission_area .circle.no3 i {
        backdrop-filter: blur(15px);
    }
    .mission_area .part2 .circle.no3 {
        margin-left: 25px;
    }
    .mission_area .video {
        padding-bottom: 63.291%;
    }

    @keyframes circleLeft1 {
        0%,
        100% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(0, -60%);
        }
    }
    @keyframes circleLeft2 {
        0%,
        100% {
            transform: translate(0, 0);
        }
        15% {
            transform: translate(2%, -5%);
        }
        50% {
            transform: translate(0, 30%);
        }
        85% {
            transform: translate(-2%, -5%);
        }
    }

    @keyframes circleRight1 {
        0%,
        100% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(0, -60%);
        }
    }
    @keyframes circleRight2 {
        0%,
        100% {
            transform: translate(0, 0);
        }
        15% {
            transform: translate(2%, 5%);
        }
        50% {
            transform: translate(0, -30%);
        }
        85% {
            transform: translate(-2%, 5%);
        }
    }

    .list_type02 {
        margin: 0 -6px;
    }
    .list_type02 > li {
        padding: 0 6px;
        margin-top: 12px;
    }
    .list_type02 a {
        border-radius: 8px;
    }

    .title03 {
        margin-bottom: 20px;
    }
    .contact_area {
        display: block;
        padding-top: 12px;
        padding-bottom: 57px;
        margin-bottom: 40px;
    }
    .contact_area .col {
        width: 100%;
    }
    .contact_area .sns_area {
        position: absolute;
        bottom: 0;
    }

    .map_area {
        height: 450px;
    }
}

@media (max-width: 767px) {
    .pc,
    .pc.inline {
        display: none;
    }
    .mo {
        display: block;
    }
    .mo.inline {
        display: inline;
    }

    colgroup.pc,
    col.pc,
    th.pc,
    td.pc {
        display: none;
    }

    colgroup.mo {
        display: table-column-group;
    }

    #header .head {
        height: 60px;
    }
    #header .head .col {
        gap: 18px;
    }
    #header .head .col:first-child {
        gap: 5px;
    }
    #header .logo > a {
        width: 74px;
        height: 18px;
    }
    #header .right_area {
        gap: 15px;
        position: relative;
        right: -6px;
    }
    .hamberger .btn_total {
        margin-left: -11px;
        width: 22px;
    }
    .lang .label {
        padding: 10px 18px 10px 26px;
    }
    .lang .label {
        font-size: 13px;
    }

    #footer {
        padding-top: 2px;
        padding-bottom: 10px;
        font-size: 15px;
    }
    #footer .resp_inner {
        padding-top: 52px;
        padding-bottom:20px;
        position: relative;
    }
    #footer .col:last-child {
        position: static;
        padding-top: 12px;
    }
    #footer h1 {
        margin-bottom: 0;
    }
    #footer h1 img {
        width: 48px;
    }
    #footer .util_nav {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: left;
        margin-top: 0;
        margin-bottom: 17px;
        border-bottom: 1px solid rgba(217, 217, 217, 0.2);
        padding: 14px 20px;
        box-sizing: border-box;
    }
    #footer .util_nav a {
        margin: 0 12px;
        position: relative;
    }
    #footer .util_nav a:first-child {
        margin-left: 0;
    }
    #footer .util_nav a:after {
        background-color: #7b7b7b;
        display: block;
        content: '';
        width: 2px;
        height: 13px;
        position: absolute;
        top: 50%;
        margin-top: -6px;
        right: -16px;
    }
    #footer .util_nav a:last-child:after {
        display: none;
    }
    #footer table th {
        width: 40px;
    }
    #footer table th,
    #footer table td {
        font-size: 12px;
        padding: 3px 0;
    }
    #footer .clock_area {
        justify-content: flex-start;
        gap: 18px;
        text-align:left;
    }
    .clock_title {
        margin-bottom: 5px;
    }

    .container {
        padding-bottom: 80px;
    }

    .subtitle {
        font-size: 40px;
        margin-bottom: 9px;
    }
    .subtext {
        font-size: 22px;
        text-align: left;
        line-height: 1.2;
    }

    .sub_top_intro .subtitle {
        padding-left: 0;
    }

    .sub_visual .cont {
        transform: translateY(0);
        top: auto;
        bottom: 0;
    }
    .sub_visual .subtitle {
        top: auto;
        bottom: 88px;
        text-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
    }
    .sub_visual .subtext {
        right: auto;
        left: 20px;
        bottom: 37px;
        text-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
        font-weight: 300;
    }

    #snb {
        padding: 23px 0 21px;
        text-align: left;
    }
    #snb > li,
    #snb .swiper-slide {
        padding: 0 10px;
    }
    #snb a {
        font-size: 16px;
    }
    #snb span {
        display: inline-block;
        padding-bottom: 3px;
    }
    #snb .on a span {
        border-bottom: 1px solid #ff7f00;
    }
    #snb .swiper-wrapper {
        justify-content: initial;
    }
    .sub_top,
    .board_view01 .top_row {
        padding: 25px 0px;
    }
    .sub_top {
        text-align: left;
        padding-bottom: 32px;
    }

    .gallery_type01 .row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-bottom: 15px;
    }
    .gallery_type01 .row:last-child {
        margin-bottom: 0;
    }
    .gallery_type01 .column01,
    .gallery_type01 .column02,
    .gallery_type01 .column03,
    .gallery_type01 .column04 {
        grid-column: 1 / span 2;
    }

    .module_box {
        top: auto;
        bottom: 10px;
    }

    .board_view01 .top_row .title {
        font-size: 28px;
        padding-bottom: 25px;
    }
    .board_view01 .top_row .info {
        font-size: 16px;
        height: 72px;
    }
    .board_view01 .thumbnail .source {
        font-size: 14px;
    }
    .board_view01 .cont_row {
        font-size: 16px;
        padding-bottom: 40px;
    }
    .board_view01 .other_row th {
        width: 120px;
    }

    .btn_center {
        margin-top: 40px;
    }
    .btns.t1 {
        min-width: 180px;
        height: 52px;
        font-size: 20px;
    }

    .search_form {
        margin-bottom: 40px;
    }
    .list_type01 td {
        height: 90px;
        font-size: 20px;
    }
    .list_type01 .title {
        padding-left: 30px;
    }
    .list_type01 .type {
        width: 12%;
    }
    .list_type01 .date {
        width: 20%;
    }

    .aboutus_bg .circle.n1 {
        width: 24px;
        height: 24px;
        top: 82px;
        left: 162px;
    }
    .aboutus_bg .circle.n2 {
        width: 52px;
        height: 52px;
        top: 475px;
        left: -35px;
    }
    .aboutus_bg .circle.n3 {
        width: 38px;
        height: 38px;
        top: 100px;
        right: 86px;
    }
    .aboutus_bg .circle.n4 {
        width: 62px;
        height: 62px;
        top: 290px;
        right: -35px;
    }
    .aboutus_bg .circle.n5 {
        left: 13px;
    }
    .aboutus_bg .circle.n5 img {
        width: 146px;
    }
    .aboutus_bg .circle.n6 {
        top: 106px;
        right: -8px;
    }
    .aboutus_bg .circle.n7 {
        display: block;
    }
    .aboutus_bg .circle.n6 img {
        width: 123px;
    }

    .about_us {
        text-align: left;
        font-size: 16px;
        padding-top: 140px;
        padding-bottom: 160px;
    }
    .about_us p {
        margin-bottom: 14px;
    }
    .title01 {
        font-size: 24px;
        margin-bottom: 21px;
    }

    .layer_wrap {
        width: 100%;
        margin-left: -50%;
    }
    .layer_cont {
        padding: 86px 20px 76px;
        width: 100%;
        height: 100%;
        border-radius: 0;
        backdrop-filter: blur(10px);
        background: rgba(0, 0, 0, 0.4);
        text-align: left;
        font-size: 16px;
        color: #fff;
        font-weight: 300;
        line-height: 1.35;
    }
    .layer_cont .close {
        top: 8px;
        right: auto;
        left: 8px;
        background-size: 12px 12px;
        background-image: url("data:image/svg+xml,%0A%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.8131 10.4993L20.52 2.79423C20.6721 2.6423 20.7927 2.46192 20.875 2.26338C20.9574 2.06484 20.9998 1.85203 20.9998 1.6371C20.9999 1.42218 20.9576 1.20935 20.8754 1.01076C20.7932 0.812171 20.6727 0.631716 20.5207 0.479697C20.3687 0.327677 20.1883 0.207071 19.9897 0.124765C19.7911 0.0424584 19.5783 6.33771e-05 19.3633 7.10042e-08C19.1483 -6.32351e-05 18.9355 0.0422061 18.7368 0.124396C18.5382 0.206585 18.3577 0.327085 18.2056 0.479015L10.4988 8.18549L2.79053 0.479015C2.48007 0.189103 2.06909 0.0311276 1.64433 0.0384314C1.21957 0.0457351 0.814267 0.217747 0.513962 0.51816C0.213657 0.818574 0.0418454 1.22389 0.0347902 1.64855C0.0277351 2.07322 0.185988 2.48401 0.476149 2.79423L8.18438 10.4993L0.476149 18.2045C0.248337 18.4338 0.0934378 18.7254 0.0309319 19.0425C-0.031574 19.3596 0.00110473 19.6881 0.124857 19.9867C0.24861 20.2853 0.457911 20.5407 0.726439 20.7206C0.994967 20.9006 1.31073 20.9972 1.63402 20.9983C2.05271 20.9983 2.4714 20.8387 2.79053 20.5197L10.4988 12.8132L18.2056 20.5197C18.3574 20.6719 18.5378 20.7927 18.7363 20.8751C18.9349 20.9576 19.1478 21 19.3628 21C19.5778 21 19.7907 20.9576 19.9893 20.8751C20.1879 20.7927 20.3682 20.6719 20.52 20.5197C20.6722 20.3677 20.7929 20.1873 20.8752 19.9886C20.9576 19.79 21 19.5771 21 19.3621C21 19.147 20.9576 18.9341 20.8752 18.7355C20.7929 18.5369 20.6722 18.3564 20.52 18.2045L12.8131 10.4993Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
    }

    .culture_area.pc {
        display: none;
    }
    .culture_area.mo {
        display: block;
    }

    .title05 {
        font-size: 24px;
        margin-bottom: 22px;
    }
    .title06 {
        font-size: 24px;
        color: #fff;
        margin-bottom: 8px;
    }

    .culture_list > li {
        margin-bottom: 20px;
    }
    .culture_list > li:last-child {
        margin-bottom: 0;
    }
    .culture_list button {
        width: 100%;
        overflow: hidden;
        border-radius: 8px;
        box-sizing: border-box;
        position: relative;
    }
    .culture_list .cont {
        width: 100%;
        padding: 23px 20px;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        text-align: left;
        color: #fff;
    }
    .culture_list .no {
        display: block;
        font-size: 16px;
        font-family: 'Inter', 'Pretendard', sans-serif;
        margin-bottom: 6px;
    }
    .culture_list .tit {
        display: block;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 11px;
    }

    .cooperation_area .title02 {
        font-size: 24px;
        margin-bottom: 25px;
    }
    .cooperation_area .title02 .line {
        border-bottom: 0;
    }

    .title03 {
        font-size: 24px;
    }
    .contact_info > li,
    .contact_info > li .label,
    .contact_info > li .text {
        display: block;
        font-size: 16px;
    }
    .contact_info > li {
        margin-bottom: 5px;
    }
    .contact_info > li .label {
        width: 100%;
        padding: 2px 0;
    }
    .contact_info > li .text {
        padding: 4px 0;
    }
}

@media (max-width: 620px) {
    .base_paging a.page,
    .base_paging .number a,
    .base_paging .number .on {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }
    .base_paging .number a,
    .base_paging .number .on {
        font-size: 13px;
    }

    .board_view01 .top_row {
        padding: 7px 0 15px;
    }
    .sub_top {
        padding-top: 0;
    }

    .board_view01 .top_row .title {
        font-size: 24px;
        padding-bottom: 12px;
    }
    .board_view01 .top_row .info {
        display: block;
        text-align: left;
        font-size: 14px;
        padding-top: 14px;
        height: auto;
    }
    .board_view01 .top_row .info .item {
        margin-left: 10px;
    }
    .board_view01 .top_row .info .module_box {
        margin: 17px 0 6px;
    }
    .board_view01 .cont_row {
        padding-bottom: 20px;
        line-height: 1.37;
    }
    .board_view01 .other_row th {
        width: 90px;
    }
    .board_view01 .other_row td {
        padding-right: 30px;
    }
    .board_view01 .other_row td:after {
        right: 15px;
    }
    .board_view01 .board_title {
        font-size: 24px;
        line-height: 1.32;
        margin-bottom: 21px;
    }
    .board_view01 .thumbnail {
        margin: 0 -20px 28px;
    }
    .board_view01 .thumbnail .source {
        font-size: 12px;
        padding: 0 20px;
    }

    .list_type01 td {
        height: 70px;
        font-size: 14px;
    }
    .list_type01 .title {
        padding-left: 0;
        font-size: 18px;
    }
    .list_type01 .notice {
        height: 32px;
    }
    .list_type01 .date {
        width: 22%;
        white-space: nowrap;
    }

    .list_type01 {
        border-top: 0;
    }
    .list_type01,
    .list_type01 tbody,
    .list_type01 tr,
    .list_type01 td,
    .list_type01 th,
    .list_type01 .type,
    .list_type01 .title,
    .list_type01 .date {
        display: block;
        width: 100%;
        height: auto;
        border-bottom: 0;
        text-align: left;
    }
    .list_type01 tr {
        padding: 11px 0 20px;
        border-bottom: 1px solid #ddd;
        position: relative;
    }
    .list_type01 tr:last-child {
        border-bottom: 0;
    }
    .list_type01 .date {
        position: absolute;
        top: 18px;
        right: 0;
        width: auto;
    }
    .list_type01 .title {
        padding-left: 0;
        margin-top: 13px;
    }
    .list_type01 .type {
        display: flex;
        height: 33px;
        align-items: center;
    }

    .search_form {
        margin-bottom: 25px;
    }

    .board_view01 .other_row {
        border-bottom: 0;
    }
    .board_view01 .other_row,
    .board_view01 .other_row tbody,
    .board_view01 .other_row tr,
    .board_view01 .other_row th,
    .board_view01 .other_row td {
        display: block;
        width: 100%;
        height: auto;
        text-align: left;
        box-sizing: border-box;
        background-color: #fff;
        font-size: 16px;
    }
    .board_view01 .other_row tr {
        position: relative;
        padding-bottom: 16px;
    }
    .board_view01 .other_row th {
        padding-top: 16px;
        padding-bottom: 7px;
    }
    .board_view01 .other_row td {
        position: static;
    }
    .board_view01 .other_row td:after {
        margin-top: -7px;
    }

    .gallery_type01 {
        gap: 10px;
    }
    .gallery_type01 .row {
        gap: 12px;
    }
    .gallery_type01 .cont {
        padding: 23px 20px;
    }
    .gallery_type01 .top > em {
        font-size: 16px;
    }
    .gallery_type01 .title {
        font-size: 24px;
        line-height: 1.2;
        height: 2.4em;
        display: -webkit-box;
        overflow: hidden;
        white-space: normal;
        word-wrap: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }
    .gallery_type01 .bar {
        height: 14px;
        position: relative;
        top: -1px;
    }
    .gallery_type01 .top > em,
    .gallery_type01 .size01 .top > em {
        margin-bottom: 6px;
    }
    .gallery_type01 .size01 .title {
        font-size: 24px;
    }
    .gallery_type01 .info,
    .gallery_type01 .size01 .info {
        bottom: 24px;
        right: auto;
        left: 20px;
        letter-spacing: -0.05em;
    }
    .gallery_type01 .cont,
    .gallery_type01 .size01 .cont,
    .gallery_type01 .size01 .top > em {
        font-size: 16px;
        font-weight: 300;
    }
    .gallery_type01 .item {
        border-radius: 8px;
    }
    .gallery_type01 .col:not(.size01, .size02, ) .thumb {
        padding-bottom: 130%;
    }

    .list_type02 > li,
    .list_type02 > li:nth-child(3),
    .list_type02 > li:nth-child(4) {
        width: 50%;
        margin-top: 12px;
    }
    .cooperation_area .part {
        margin-bottom: 30px;
    }

    .title04 {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 10px;
    }
    .mission_area p {
        font-size: 15px;
        margin-bottom: 18px;
    }
}

@media (max-width: 350px) {
    .sub_visual .subtitle{bottom:110px;}
    
}