:root {
    --main-color: #74AE67;
    --bg-color: #F9F9F9;
    --black-color: #2A2A2A;
    --sub-txt-color-01: #555555;
    --sub-txt-color-02: #777777;
    --sub-txt-color-03: #999999;
    --border-color: #D9D9D9;
    --naver-color: #03C75A;
    --kakao-color: #FFCD00;
    --red-color: #EA4335;
}
@media screen and (max-width: 1520px) {
    .wrap {
        padding: 0 16px;
    }
    .sm-wrap {
        padding: 0 16px;
    }
    .header-wrap .gnb-area {
        padding: 0 16px;
    }
}
@media screen and (max-width: 1280px) {
    .modal .modal-box {
        max-width: calc(100% - 32px);
    }
    /*header*/
    .header-wrap .gnb-area {
        gap: 24px;
    }
    .gnb {
        gap: 48px;
    }
    /*메인*/
    .main-banner .txt .copy-main {
        font-size: 36px;
    }
    .main-01 {
        gap: 24px;
    }
    .main-01 .lt {
        padding-right: 24px;
    }
    .main-01 .lt .bt {
        padding: 24px 0;
    }
    .main-tit p:first-child {
        font-size: 36px;
    }
    .main-tit p:nth-child(2) {
        margin-top: 16px;
    }
    .main-link a {
        font-size: 16px;
    }
    .main-link a img {
        width: 12px;
    }
    /*pages*/
    .page-intro .location a {
        display: inline-block;
    }
    .page-intro {
        margin-bottom: 100px;
    }
    .page-intro .intro-copy {
        font-size: 36px;
    }
    .page-tab {
        gap: 24px;
        margin-bottom: 60px;
    }
    .page-tab a {
        font-size: 16px;
    }
    .about-01-01 .item {
        gap: 48px;
    }
    .about-01-01 .tit {
        padding: 24px;
    }
    .about-01-01 .tit .tit-main {
        font-size: 24px;
    }
    .about-01-01 .item .img-box p {
        font-size: 20px;
    }
    .about-01-02 .banner .txt {
        padding: 0 16px;
    }
    .about-01-02 .banner .txt p:nth-child(2) {
        font-size: 24px;
    }
    .about-01-03 .hd p {
        font-size: 24px;
    }
    .about-01-03-grid .item {
        font-size: 16px;
        padding: 36px 16px;
    }
    .about-01-03 > p {
        font-size: 16px;
    }
    .about-02-01 {
        flex-direction: column;
        gap: 24px;
    }
    .about-02-01 .lt {
        position: relative;
        top: unset;
        left: unset;
    }
    .about-02-01 .lt > img {
        width: 24px;
    }
    .about-02-01 .lt p {
        font-size: 24px;
    }
    .about-02-01 .rt {
        max-width: 100%;
        min-width: 100%;
    }
    .about-02-01 .rt .img-box {
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .about-02-01 .rt .content .hd {
        gap: 12px;
        margin-bottom: 24px;
    }
    .about-02-01 .rt .content .hd p:first-child {
        font-size: 20px;
    }
    .about-02-01 .rt .content .hd p:last-child {
        font-size: 20px;
    }
    .about-02-01 .rt .content .txt {
        gap: 16px;
    }
    .about-02-01 .rt .content .txt p:last-child b {
        font-size: 20px;
    }
    .about-03-01 .banner {
        height: 450px;
    }
    .about-03-01 .banner .txt {
        padding: 36px;
        gap: 16px;
    }
    .about-03-01 .banner .txt p:first-child {
        font-size: 36px;
    }
    .about-03-01 .banner .txt p:last-child {
        font-size: 16px;
    }
    .history-list .item {
        gap: 24px;
    }
    .history-list .item .content .year {
        font-size: 24px;
    }
    .history-list .item .content .list .list-item p:first-child {
        font-size: 20px;
    }
    .dir-wrap .box .tit span {
        font-size: 20px;
    }
    .dir-wrap .dir-grid .item .img-box {
        width: 130px;
        min-width: 130px;
    }
    .dir-wrap .dir-grid .item .txt > p {
        font-size: 16px;
    }
    .dir-wrap .dir-grid .item .txt .career p {
        font-size: 14px;
    }
    .about-06-01 .map-info {
        gap: 48px;
    }
    .about-06-01 .map-info .tit span {
        font-size: 20px;
    }
    .about-06-01 .map-info .list .item p:nth-child(2) {
        font-size: 14px;
    }
    .about-06-01 .rt {
        padding: 24px;
        gap: 24px;
    }
    .about-06-01 .rt .item .subway .badge {
        font-size: 14px;
    }
    .about-06-01 .rt .item .bus .bus-item {
        font-size: 14px;
    }
    .data-01-01 .box .txt p:first-child {
        font-size: 36px;
    }
    .trace-list .item .year {
        font-size: 20px;
    }
    .view-tit-box .tit {
        font-size: 20px;
    }
    .view-tit-box .info span {
        font-size: 14px;
    }
    .other-area a {
        font-size: 14px;
        gap: 24px;
    }
    .archive-grid .item .txt {
        padding: 24px;
    }
    .modal .archive-box {
        padding: 24px;
    }
    .modal .archive-box .hd .info p:first-child {
        font-size: 16px;
    }
    .modal .archive-box .hd .info p:nth-child(2) {
        font-size: 20px;
    }
    .faq-list > li .tit-box {
        padding: 24px 0;
    }
    .txt-list li a {
        padding: 24px 0;
    }
    .user-expl span:first-child.lg {
        font-size: 20px;
    }
    .mypage-tit {
        font-size: 24px;
    }
    .mypage-tab button, .mypage-tab a {
        font-size: 14px;
        height: 50px;
        line-height: 50px;
    }
    .user-box .hd p:first-child {
        font-size: 24px;
    }
}
@media screen and (max-width: 1024px) {
    .btn {
        height: 45px;
    }
    .btn.short {
        max-width: 150px;
    }
    /*header*/
    .ham {
        display: block;
    }
    .header-wrap.hover-on, .header-wrap.on:hover {
        height: auto;
        background-color: #fff;
        box-shadow: none;
    }
    .header-wrap:hover {
        background-color: #fff;
    }
    .logo {
        width: 150px;
    }
    .header-wrap:hover .logo {
        background-image: url('../images/logo/logo_mc.png');
    }
    .header-wrap .gnb-area {
        height: 70px;
    }
    .header-wrap:hover #ham_btn + label > span {
        background-color: var(--black-color);
    }
    .header-wrap:hover .rt-area .user-btn a {
        color: var(--sub-txt-color-02);
    }
    .header-wrap:hover .rt-area .user-btn a:not(:last-child)::after {
        background-color: var(--border-color);
    }
    .rt-area {
        gap: 24px;
    }
    .gnb {
        position: fixed;
        top: 70px;
        left: 0;
        z-index: 10;
        background-color: #fff;
        width: 100%;
        height: calc(100vh - 70px);
        overflow: hidden;
        overflow-y: auto;
        padding: 12px 16px 150px;
        display: block;
        border-top: 1px solid var(--border-color);
        display: none;
    }
    .gnb > li {
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 16px;
    }
    .gnb > li::after {
        display: none;
    }
    .gnb > li > a {
        padding: 16px 0;
        color: var(--main-color) !important;
    }
    .gnb-sub {
        display: flex;
        position: relative;
        top: unset;
        left: unset;
        transform: unset;
        align-items: flex-start;
        padding-top: 0;
    }
    .gnb-sub > li > a {
        font-size: 14px;
        color: var(--sub-txt-color-02);
    }
    /*footer*/
    .footer-wrap .hd {
        flex-direction: column;
        align-items: center;
        padding: 24px 0;
    }
    .footer-wrap .hd .f-logo {
        width: 150px;
    }
    .footer-wrap .hd .fnb li a {
        font-size: 14px;
    }
    .footer-wrap .bt {
        flex-direction: column;
        padding: 24px 0;
    }
    .footer-wrap .bt .lt {
        align-items: center;
    }
    .footer-wrap .bt .lt p {
        font-size: 12px;
        text-align: center;
        line-height: 1.3;
    }
    .footer-wrap .bt .rt {
        flex-direction: column-reverse;
        align-items: center;
        gap: 24px;
    }
    .footer-wrap .bt .rt .copy {
        width: 100%;
        font-size: 12px;
        text-align: center;
    }
    /*메인*/
    .main-banner .txt {
        gap: 12px;
    }
    .main-banner .txt .tit {
        font-size: 14px;
    }
    .main-banner .txt .copy-main {
        font-size: 28px;
    }
    .main-banner .txt .copy-sub {
        font-size: 14px;
    }
    .swiper-pagination-current {
        font-size: 14px;
    }
    .swiper-pagination-total {
        font-size: 14px;
    }
    .main-tit p:first-child {
        font-size: 28px;
    }
    .main-tit p:nth-child(2) {
        font-size: 14px;
    }
    .main-01 .rt .txt {
        font-size: 20px;
    }
    .main-01 .lt .bt > p {
        font-size: 14px;
    }
    .category a {
        font-size: 14px;
    }
    .board-grid {
        gap: 16px;
    }
    .board-grid .item .tit {
        font-size: 16px;
    }
    .main-tit.wc p.xs {
        font-size: 28px;
    }
    .main-04 .item {
        padding: 24px;
    }
    .main-tit.wc p:nth-child(2) br {
        display: none;
    }
    .main-04 .item .main-link {
        margin-top: 24px;
    }

    /*pages*/
    .basic-page {
        padding: 150px 0 100px;
    }
    .page-intro .intro-copy {
        font-size: 28px;
    }
    .page-intro .location {
        gap: 12px;
        font-size: 14px;
    }
    .about-01-01 .tit {
        gap: 12px;
    }
    .about-01-01 .tit .tit-sub {
        font-size: 14px;
    }
    .about-01-01 .tit .tit-main {
        font-size: 20px;
    }
    .about-01-01 .tit .content p {
        font-size: 14px;
    }
    .about-01-01 .item .img-box p {
        font-size: 16px;
    }
    .about-01-02 {
        height: 450px;
    }
    .about-01-02 .banner .txt {
        gap: 12px;
    }
    .about-01-02 .banner .txt p:first-child {
        font-size: 14px;
    }
    .about-01-02 .banner .txt p:nth-child(2) {
        font-size: 20px;
    }
    .about-01-02 .banner .txt p:last-child {
        font-size: 14px;
    }
    .about-01-03 .hd {
        gap: 12px;
    }
    .about-01-03 .hd img {
        width: 16px;
    }
    .about-01-03 .hd p {
        font-size: 20px;
    }
    .about-01-03-grid .item {
        font-size: 14px;
    }
    .about-02-01 .lt {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .about-02-01 .lt p {
        font-size: 20px;
        text-align: center;
    }
    .about-02-01 .rt .content .hd p:first-child {
        font-size: 16px;
    }
    .about-02-01 .rt .content .hd p:last-child {
        font-size: 16px;
    }
    .about-02-01 .rt .content .txt p {
        font-size: 14px;
    }
    .about-02-01 .rt .content .txt p:last-child b {
        font-size: 16px;
    }
    .about-03-01 .banner .txt p:first-child {
        font-size: 24px;
    }
    .about-03-01 .banner .txt p:last-child {
        font-size: 14px;
    }
    .history-list .item .content .year {
        font-size: 20px;
    }
    .history-list .item .content .list .list-item p:nth-child(2) {
        font-size: 14px;
    }
    .root_daum_roughmap .wrap_map {
        height: 450px !important;
    }
    .data-01-01 .box .txt p:first-child {
        font-size: 24px;
    }
    .data-01-01 .box .txt p:last-child {
        font-size: 14px;
    }
    .trace-list .item {
        width: calc(50% - 24px);
    }
    .trace-list .item .tit {
        font-size: 20px;
    }
    .trace-list .item .year::before {
        left: -29px;
    }
    .trace-list .item.left .year::after {
        right: -29px;
    }
    .archive-grid .item .txt p:first-child {
        font-size: 14px;
    }
    .archive-grid .item .txt p:nth-child(2) {
        font-size: 16px;
    }
    .category {
        gap: 24px;
    }
    .faq-list > li .tit-box .que {
        font-size: 14px;
    }
    .faq-list > li .tit-box .tit {
        font-size: 14px;
    }
    .faq-list > li .toggle-content {
        font-size: 14px;
        padding: 16px;
    }
    .txt-list li a {
        gap: 16px;
    }
    .txt-list li a span.num {
        font-size: 14px;
    }
    .txt-list li a span.tit {
        font-size: 14px;
    }
    .txt-list li a span {
        font-size: 14px;
    }
    .view-tit-box {
        gap: 12px;
    }
    .view-tit-box .tit {
        font-size: 16px;
    }
    .file-box a {
        gap: 8px;
    }
    .file-box a img {
        height: 14px;
    }
    .user-expl span:first-child.lg {
        font-size: 16px;
    }
    .contact-form .input-box > p {
        font-size: 14px;
    }
    .input-box input[type="text"], .input-box input[type="password"], .input-box input[type="email"], .input-box input[type="number"] {
        height: 45px;
        line-height: 45px;
        font-size: 14px;
    }
    .contact-form .input-box textarea {
        font-size: 14px;
    }
    .contact-terms .terms-chk label span {
        font-size: 14px;
    }
    .table-box {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: auto;
    }
    .user-box .hd {
        gap: 16px;
    }
    .user-box .hd p:first-child {
        font-size: 20px;
    }
    .user-box .hd p:nth-child(2) {
        font-size: 14px;
    }
    .user-tab-menu a {
        font-size: 14px;
    }
}
@media screen and (max-width: 840px) {
    /*메인*/
    .main-area {
        padding-top: 100px;
        gap: 100px;
    }
    .main-banner .txt .copy-main {
        font-size: 24px;
    }
    .main-tit p:first-child {
        font-size: 24px;
    }
    .main-tit.wc p.xs {
        font-size: 24px;
    }
    .main-01 .rt .txt {
        font-size: 16px;
    }
    .main-link a {
        font-size: 14px;
    }
    .main-link a img {
        width: 8px;
    }
    .main-02 {
        height: 450px;
    }
    .main-03 {
        padding-top: 48px;
    }
    .main-04 {
        height: 450px;
    }
    .main-04 .item .main-link {
        margin-top: 12px;
    }
    .category {
        margin-bottom: 24px;
    }
    .board-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 48px 16px;
    }
    .board-grid .item .tp {
        gap: 12px;
    }
    .board-grid .item .img-box {
        aspect-ratio: 16 / 9;
    }
    /*pages*/
    .page-gap {
        gap: 100px;
    }
    .page-intro .intro-copy {
        font-size: 20px;
    }
    .about-01-01 {
        gap: 60px;
    }
    .about-01-01::after {
        display: none;
    }
    .about-01-01 .item {
        flex-direction: column;
        gap: 24px;
    }
    .about-01-01 .item:nth-child(2) {
        flex-direction: column-reverse;
    }
    .about-01-01 .item .img-box {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    .about-01-01 .tit {
        width: 100%;
    }
    .about-01-02 .banner .txt {
        align-items: center;
    }
    .about-01-02 .banner .txt p:nth-child(2) {
        text-align: center;
    }
    .about-01-02 .banner .txt p:nth-child(2) br {
        display: none;
        word-break: keep-all;
    }
    .about-01-02 .banner .txt p:last-child {
        text-align: center;
    }
    .about-01-03-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
    }
    .about-03-01 .banner {
        height: 350px;
    }
    .about-03-01 .banner .txt {
        padding: 24px;
    }
    .dir-wrap .dir-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dir-wrap .dir-grid .item {
        gap: 16px;
    }
    .about-06-01 .map-info {
        flex-direction: column;
    }
    .about-06-01 .map-info .lt {
        width: 100%;
    }
    .about-06-01 .rt {
        width: 100%;
    }
    .data-01-01 .box .txt {
        gap: 16px;
    }
    .modal .archive-box .hd .info p:first-child {
        font-size: 14px;
    }
    .modal .archive-box .hd .info p:nth-child(2) {
        font-size: 16px;
    }
    .faq-list > li .tit-box {
        padding: 16px 0;
    }
    .txt-list li a {
        padding: 16px 0;
    }
    .mypage-tab {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: auto;
    }
    .mypage-tab button, .mypage-tab a {
        padding: 0 8px;
    }
}
@media screen and (max-width: 480px) {
    .popup-layer {
        width: calc(100% - 32px) !important;
        height: auto !important;
        top: 86px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    .popup-layer .img-box img {
        object-fit: contain !important;
    }
    .modal .modal-box .modal-tit-box {
        padding: 16px;
    }
    .modal .modal-box .modal-tit-box span {
        font-size: 16px;
    }
    .modal .modal-box .modal-tit-box img {
        width: 16px;
        height: 16px;
    }
    .modal .modal-box .content {
        padding: 16px;
    }
    .sm-wrap {
        max-width: 100%;
        padding: 0;
    }
    .search {
        padding: 12px;
    }
    /*header*/
    .rt-area {
        gap: 16px;
    }
    .rt-area .user-btn a {
        font-size: 12px;
    }
    .rt-area .user-btn a:not(:last-child)::after {
        margin: 0 8px;
    }
    /*메인*/
    .main-01 {
        flex-direction: column-reverse;
    }
    .main-01 .rt {
        width: 100%;
    }
    .main-01 .lt {
        width: 100%;
        padding-right: 0;
        border-right: none;
    }
    .main-01 .lt .bt {
        flex-direction: column-reverse;
        align-items: center;
    }
    .main-01 .lt .bt > p {
        width: 100%;
        text-align: center;
    }
    .main-02 .txt .main-link {
        margin-top: 24px;
    }
    .main-03 {
        border-top: none;
        padding-top: 24px;
    }
    .main-04 .item .main-link {
        margin-top: 0;
    }
    .main-link a {
        width: 150px;
    }
    .tit-area {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        margin-bottom: 24px;
    }
    .main-tit p:first-child {
        text-align: center;
    }
    .main-tit p:nth-child(2) {
        text-align: center;
        margin-top: 12px;
    }
    .board-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .main-04 {
        height: 500px;
    }
    .main-04 .wrap {
        flex-direction: column;
    }
    .main-04 .item:first-child {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .main-tit.wc p.xs {
        font-size: 20px;
    }
    /*pages*/
    .page-intro {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        margin-bottom: 60px;
    }
    .page-intro .intro-copy {
        text-align: center;
    }
    .page-tab {
        white-space: nowrap;
        gap: 16px;
        overflow: hidden;
        overflow-x: auto;
    }
    .page-tab a {
        font-size: 14px;
    }
    .about-01-01 .tit .tit-main {
        font-size: 18px;
    }
    .about-01-02 .banner .txt p:nth-child(2) {
        font-size: 18px;
    }
    .about-01-02 .banner .txt p:last-child br {
        display: none;
    }
    .about-01-03 .hd p {
        font-size: 18px;
    }
    .about-01-03-grid .item {
        padding: 24px 16px;
    }
    .about-01-03 > p {
        font-size: 14px;
        font-weight: 400;
    }
    .about-02-01 .lt > img {
        width: 16px;
    }
    .about-02-01 .lt p {
        font-size: 18px;
    }
    .about-03-01 .banner .txt p:first-child {
        font-size: 18px;
    }
    .about-03-01 .banner {
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .history-list .item {
        flex-direction: column;
    }
    .history-list .item .content {
        width: 100%;
    }
    .history-list .item .content .year {
        margin-bottom: 12px;
    }
    .history-list .item .content .list .list-item {
        gap: 12px;
    }
    .history-list .item .content .list .list-item p:first-child {
        font-size: 18px;
    }
    .history-list .item .img-box {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    .history-list .item.reverse {
        flex-direction: column;
    }
    .dir-wrap .box .tit span {
        font-size: 18px;
        padding-left: 12px;
    }
    .dir-wrap .dir-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .dir-wrap .dir-grid .item .img-box {
        width: 100px;
        min-width: 100px;
        aspect-ratio: 3 / 4;
    }
    .dir-wrap .dir-grid .item .txt {
        gap: 12px;
    }
    .dir-wrap .dir-grid .item .txt > p {
        padding-bottom: 12px;
    }
    .root_daum_roughmap .wrap_map {
        height: 350px !important;
    }
    .about-06-01 .map-info .tit span {
        font-size: 18px;
        padding-left: 12px;
    }
    .about-06-01 .map-btn-wrap a {
        width: 100%;
    }
    .about-06-01 .rt {
        padding: 16px;
    }
    .data-01-01-grid {
        gap: 36px;
    }
    .grid-track {
        gap: 36px;
    }
    .data-01-01 .box {
        height: 450px;
    }
    .data-01-01 .control {
        display: none;
    }
    .data-01-01 .box .txt p:first-child {
        font-size: 20px;
    }
    .trace-list {
        padding-top: 100px;
        gap: 60px;
    }
    .trace-list .line {
        left: 0px;
    }
    .trace-list .item {
        width: 100%;
        padding-left: 16px;
        margin: 0;
    }
    .trace-list .item:not(:first-child) {
        margin: 0;
    }
    .trace-list .item:not(:first-child).left {
        margin: 0;
    }
    .trace-list .item .year::before {
        left: -21px;
    }
    .trace-list .item.left .year::after {
        right: unset;
        left: -21px;
    }
    .trace-list .item .tit {
        font-size: 18px;
        margin-bottom: 16px;
    }
    .archive-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .search {
        width: 100%;
    }
    .pagination li {
        width: 28px;
        height: 28px;
    }
    .archive-grid .item .txt {
        padding: 24px 16px;
    }
    .modal .archive-box {
        width: calc(100% - 32px);
        height: auto;
        max-height: calc(100vh - 96px);
        padding: 24px 16px;
    }
    .modal .archive-box .hd {
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
    .modal .archive-box .hd button {
        width: 36px;
        height: 36px;
    }
    .modal .archive-box .hd button img {
        width: 16px;
        height: 16px;
    }
    .view-tit-box {
        padding-bottom: 16px;
    }
    .view-tit-box .info span {
        font-size: 12px;
    }
    .file-box {
        padding: 16px 0;
    }
    .file-box a span {
        font-size: 12px;
    }
    .file-box a img {
        height: 12px;
    }
    .other-area a {
        padding: 16px 0;
    }
    .editor-area {
        font-size: 14px;
    }
    .faq-list > li .tit-box .box {
        gap: 16px;
    }
    .faq-list > li .tit-box .que {
        min-width: 50px;
    }
    .faq-list > li .faq-arrow {
        width: 16px;
    }
    .contact-form .input-box textarea {
        height: 150px;
    }
    .contact-terms .content {
        margin-bottom: 24px;
    }
    .contact-terms .terms-chk {
        flex-direction: column;
        gap: 16px;
    }
    .user-expl {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .sign-btn .divider {
        margin: 0 12px;
    }
    .mypage-tab {
        margin-bottom: 48px;
    }
}