:root {
  --main-color: #4787C7;
  --bg-color: #F9F9F9;
  --black-color: #2A2A2A;
  --sub-txt-color-01: #555555;
  --sub-txt-color-02: #777777;
  --border-color: #D9D9D9;
}

@media screen and (max-width: 1887px) {
    .wrap {
        padding: 0 8px;
    }
    .wrap-sm {
        padding: 0 8px;
    }
    .header-wrap .container {
        padding: 0 8px;
    }
}
@media screen and (max-width: 1299px) {
    /*메인*/
    .business-flex .item .txt p:first-child {
        font-size: 20px;
    }
    .member-banner .content {
        padding: 0 100px;
    }
    .member-banner .content .logo-img {
        width: 100px;
    }

    /*페이지*/
    .sub-banner .box .txt {
        width: 100%;
        align-items: center;
    }
    .sub-menu {
        width: 100%;
        right: unset;
        left: 50%;
        transform: translateX(-50%);
        justify-content: center;
    }
    .lt-banner {
        max-width: calc(100dvw - 16px);
        border-radius: 48px;
        margin: 0 auto 80px;
    }
    .lt-banner .img-box {
        overflow: hidden;
    }
    .lt-banner .txt {
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        padding: 0 24px;
    }
    .lt-banner .txt p:first-child {
        width: 100%;
        text-align: center;
    }
    .lt-banner .txt p:nth-child(2) {
        width: 100%;
        text-align: center;
    }

}
@media screen and (max-width: 1023px) {
    /*header*/
    .header-wrap.hover-on {
        height: 80px;
    }
    .gnb {
        display: none;
    }
    .rt-area .lang-btn {
        z-index: 10;
    }
    #ham_btn + label {
        width: 36px;
        height: 22px;
    }
    .rt-area {
        gap: 16px;
    }
    .rt-area .lang-btn {
        gap: 8px;
    }
    .all-gnb {
        height: calc(100dvh - 80px);
        top: 80px;
        overflow: hidden;
        overflow-y: auto;
        padding-bottom: 100px;
    }
    .all-gnb::-webkit-scrollbar {
       display: none;
    }
    .all-gnb .tp {
        display: none;
    }
    .gnb-grid .item .nm {
        margin-bottom: 0;
    }
    /*footer*/
    .footer-wrap {
        flex-direction: column;
        align-items: center;
        gap: 36px;
        padding: 36px 0;
    }
    .footer-wrap .info-area {
        flex-direction: column;
        align-items: center;
        gap: 48px;
    }
    .footer-wrap .info-area .info .item {
        gap: 8px;
    }
    /*메인*/
    .main-slider .swiper-slide .txt .txt-hidden span {
        font-size: 38px;
    }
    .main-slider .swiper-slide .txt .sm-txt {
        font-size: 16px;
    }
    .main-about .txt .txt-lg {
        font-size: 38px;
    }
    .more-btn {
        width: 38px;
        height: 38px;
    }
    .main-tit {
        gap: 12px;
    }
    .main-tit p:first-child {
        font-size: 16px;
    }
    .main-tit p:nth-child(2) {
        font-size: 28px;
    }
    .business-flex {
        height: 450px;
    }
    .business-flex .item .txt {
        padding: 24px 16px;
    }
    .business-flex .item .txt p:first-child {
        font-size: 18px;
        letter-spacing: -1px;
    }
    .business-flex .item .txt p:nth-child(2) {
        font-size: 14px;
    }
    .member-banner {
        height: 350px;
    }
    .member-banner .content {
        padding: 0 48px;
    }
    .member-banner .content .txt {
        gap: 24px;
    }
    .member-banner .content .txt .txt-lg {
        font-size: 28px;
    }
    .member-banner .content .logo-img {
        width: 80px;
    }

    /*페이지*/
    .sub-banner .box .txt p:first-child {
        font-size: 32px;
    }
    .sub-banner .box .txt p:nth-child(2) {
        font-size: 14px;
    }
    .page-tit {
        font-size: 32px;
        margin: 80px 0 48px;
        gap: 8px;
    }
    .page-tit::after {
        width: 8px;
        height: 8px;
    }
    .lt-banner .txt p:first-child {
        font-size: 24px;
    }
    .lt-banner .txt p:nth-child(2) {
        font-size: 16px;
    }
    .greetings-area {
        flex-direction: column;
        gap: 48px;
    }
    .greetings-area .hd {
        font-size: 24px;
    }
    .greetings-area .content {
        font-size: 16px;
    }
    .greetings-area .content span {
        font-size: 16px;
    }
    .history-area .item {
        gap: 48px;
    }
    .history-area .item .year {
        min-width: 250px;
        font-size: 24px;
    }
    .root_daum_roughmap .wrap_map {
        height: 350px !important;
    }
    .map-area .map-info {
        padding: 24px 16px;
    }

    .business-menu a {
        height: 60px;
    }

    .notice-list li {
        padding: 24px 16px;
    }
    .active-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .view-area .tit-box {
        gap: 16px;
    }
    .view-area .tit-box p {
        font-size: 24px;
    }
    .view-area .file-box {
        padding: 24px 16px;
    }
}
@media screen and (max-width: 767px) {
    .top-btn {
        display: none !important;
    }
    /*header*/
    .header-wrap .h-logo {
        width: 200px;
        height: 40px;
    }
    .all-gnb .box {
        padding: 0 0 24px;
        flex-direction: column-reverse;
    }
    .all-gnb .tp .all-logo {
        width: 200px;
        height: 40px;
    }
    .gnb-grid .item {
        padding: 16px 0;
        gap: 16px;
    }
    .gnb-grid .item .nm {
        font-size: 20px;
    }
    .gnb-grid .item a {
        font-size: 14px;
    }
    .all-gnb .box .wc-txt p:first-child {
        font-size: 20px;
    }
    .all-gnb .box .wc-txt p:first-child br {
        display: none;
    }
    .all-gnb .box .lt {
        gap: 24px;
    }
    .all-gnb .box .wc-txt p:nth-child(2) {
        font-size: 14px;
    }
    .all-gnb .box .lt .info span {
        font-size: 14px;
    }
    /*footer*/
    .footer-wrap .info-area {
        gap: 24px;
    }
    .footer-wrap .info-area .f-logo {
        width: 200px;
    }
    /*메인*/
    .main-slider .swiper-slide .txt .txt-hidden span {
        font-size: 28px;
    }
    .main-slider .swiper-slide .txt .sm-txt {
        font-size: 14px;
    }
    .main-about .txt .txt-lg {
        font-size: 28px;
    }
    .main-about .txt .txt-sm {
        font-size: 14px;
        word-break: keep-all;
    }
    .main-tit p:first-child {
        font-size: 14px;
    }
    .business-flex {
        height: auto;
        flex-direction: column;
    }
    .business-flex .item .txt {
        padding: 60px 16px;
    }
    .business-flex .item .txt p:first-child br {
        display: none;
    }
    .business-flex .item .txt p:nth-child(2) {
        opacity: 1;
    }
    .news-slider .box .txt .tit {
        font-size: 18px;
    }
    .news-slider .box .txt .content {
        font-size: 14px;
    }
    .member-banner {
        height: 300px;
    }
    .member-banner .content {
        padding: 0 16px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .member-banner .content .txt {
        width: 100%;
        align-items: center;
    }
    .member-banner .content .txt .txt-sm {
        font-size: 14px;
        text-align: center;
    }
    .member-banner .content .logo-img {
        display: none;
    }

    /*페이지*/
    .lt-banner {
        height: 200px;
    }
    .lt-banner .txt p:first-child {
        font-size: 20px;
    }
    .lt-banner .txt p:nth-child(2) {
        font-size: 14px;
    }
    .greetings-area .hd {
        font-size: 20px;
    }
    .greetings-area .content {
        gap: 16px;
    }
    .greetings-area .content span {
        font-size: 14px;
    }
    .greetings-area .content span:last-child {
        font-size: 16px;
    }
    .history-area .item {
        gap: 24px;
    }
    .history-area .item .year {
        min-width: 150px;
        padding: 24px 0;
    }
    .history-area .item .content {
        padding: 24px 0;
    }
    .history-area .item .content .box .date {
        font-size: 14px;
    }
    .history-area .item .content .box .txt span {
        font-size: 14px;
    }
    .link-area a {
        padding: 8px 16px;
        font-size: 12px;
    }
    .link-area a img {
        width: 12px;
    }
    .map-area .map-info .item span:first-child {
        width: 36px;
        height: 36px;
    }
    .map-area .map-info .item span:first-child img {
        width: 20px;
    }
    .map-area .map-info .item span:nth-child(2) {
        font-size: 14px;
    }

    .business-menu a {
        font-size: 14px;
    }
    .business-banner {
        height: 250px;
    }
    .business-banner .txt {
        font-size: 20px;
        padding: 0 24px;
    }
    .grid-content .item {
        flex-direction: column;
        gap: 16px;
    }
    .grid-content .item.reverse {
        flex-direction: column;
    }
    .grid-content .item .img-box {
        width: 100%;
        min-width: 100%;
        height: 250px;
    }
    .grid-content .item .txt p {
        font-size: 14px;
    }
    .business-area .sub-txt {
        font-size: 14px;
        margin-bottom: 48px;
    }

    .notice-list li {
        padding: 16px 8px;
    }
    .notice-list li a .date .day {
        font-size: 20px;
    }
    .notice-list li a .date .ym {
        font-size: 12px;
    }
    .notice-list li a .tit {
        font-size: 14px;
    }
    .notice-list li a > img {
        width: 20px;
    }
    .view-area .tit-box {
        padding: 16px 8px;
    }
    .view-area .tit-box p {
        font-size: 20px;
    }
    .view-area .tit-box .info span {
        font-size: 14px;
    }
    .view-area .file-box {
        padding: 16px 8px;
    }
    .view-area .file-box a span {
        font-size: 14px;
    }
    .editor-area {
        font-size: 14px;
    }
    .view-area .np-box .item {
        padding: 16px 8px;
    }
    .view-area .np-box .item span {
        font-size: 14px;
    }
    .view-area .np-box .item span:first-child {
        width: 60px;
        min-width: 60px;
    }

}
@media screen and (max-width: 480px) {
    /*header*/
    .header-wrap .h-logo {
        width: 160px;
        height: 30px;
    }
    .all-gnb .tp .all-logo {
        width: 160px;
        height: 30px;
    }
    /*메인*/
    .main-slider .swiper-slide .txt .txt-hidden span {
        font-size: 24px;
    }
    .control {
        gap: 12px;
    }
    .pager {
        min-width: 48px;
        font-size: 14px;
    }
    .main-about {
        height: 400px;
        margin-bottom: 60px;
    }
    .main-about .txt {
        gap: 24px;
    }
    .main-about .txt .txt-lg {
        font-size: 24px;
        flex-direction: column;
    }
    .main-tit {
        align-items: center;
        margin-bottom: 24px;
    }
    .main-tit p:nth-child(2) {
        font-size: 20px;
        text-align: center;
    }
    .main-business {
        padding-bottom: 60px;
    }
    .business-flex .item .txt {
        align-items: center;
    }
    .business-flex .item .txt p:first-child {
        text-align: center;
    }
    .business-flex .item .txt p:nth-child(2) {
        text-align: center;
    }
    .news-slider .box .txt {
        gap: 8px;
    }
    .news-slider .box .txt .cate {
        font-size: 12px;
    }
    .news-slider .box .txt .tit {
        font-size: 16px;
    }
    .member-banner {
        height: 400px;
    }
    .member-banner .content .txt .txt-lg {
        font-size: 18px;
        text-align: center;
        word-break: keep-all;
    }

    /*페이지*/
    .sub-banner {
        height: 550px;
    }
    .sub-banner .box .txt {
        padding-bottom: 120px;
    }
    .sub-banner .box .txt p:first-child {
        font-size: 24px;
    }
    .sub-banner .box .txt p:nth-child(2) {
        text-align: center;
        word-break: keep-all;
    }
    .sub-menu {
        gap: 8px;
        padding: 0 8px;
    }
    .sub-menu .home-btn {
        width: 45px;
        min-width: 45px;
        height: 45px;
    }
    .sub-menu .home-btn img {
        width: 20px;
        height: 20px;
    }
    .sub-menu > button {
        width: 100%;
        height: 45px;
        padding: 0 16px;
    }
    .sub-menu > button > img {
        width: 16px;
    }
    .sub-menu .sub-list {
        width: 100%;
    }

    .page-tit {
        font-size: 24px;
    }
    .lt-banner {
        border-radius: 24px;
        height: 150px;
        margin-bottom: 48px;
    }
    .lt-banner .txt p:first-child {
        font-size: 16px;
        word-break: keep-all;
    }
    .greetings-area {
        gap: 24px;
    }
    .greetings-area .hd {
        font-size: 18px;
    }
    .history-area .item .year {
        min-width: 90px;
        font-size: 20px;
    }
    .history-area .item .content .box {
        gap: 16px;
    }
    .map-area .map-info {
        padding: 16px 8px;
    }

    .business-menu {
        grid-template-columns: repeat(1, 1fr);
    }
    .business-banner .txt {
        font-size: 16px;
    }
    .notice-list li a {
        gap: 16px;
    }
    .active-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .active-grid .item {
        gap: 16px;
    }
}