@charset "UTF-8";
/* 공통 */
.layout {
    width:90%;
    max-width:1560px;
    margin: 0 auto
}
.layout-wide {
    width:90%;
    max-width:1720px;
    margin: 0 auto
}
.btn-more {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    width: 107px;
    height: 107px;
    margin: 0 auto;
    border: 1px solid var(--color-primary);
    text-align: center;
    color: var(--color-primary);
    font-size: var(--font-15);
    font-weight: var(--fw-extrabold);
}
.btn-more:hover {
    background-color: var(--color-primary);
    color: var(--color-black);
}
    /*  메인 공통 미디어쿼리 */
    @media all and (min-width:1921px) {
  
    }
    @media all and (max-width:1200px) {
        .btn-more {
            width: 90px;
            height: 90px;
            font-size: var(--font-14);
        }
    }
    @media all and (max-width:1000px) {
       
    }
    @media all and (max-width:640px) {
        .btn-more {
            width: 70px;
            height: 70px;
            font-size: var(--font-13);
        }
    }


/* 메인 */
.main-visual {
    position: relative;
    width: 100%;
    height: 100vh;
}
.main-visual .swiper {
    height: 100%;
}
.main-visual .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-visual .txt-area {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    padding: 0 5%;
}
.main-visual .txt-area .mv-txt {
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 49%;
    max-width: 826px;
}
.main-visual .txt-area .btn-more {
    position: absolute;
    right: 5%;
    bottom: 80px;
}
/* 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .main-visual {
            height: 70vh;
        }
        .main-visual .txt-area .mv-txt {
            width: 45%;
        }
        .main-visual .txt-area .btn-more {
            bottom: 60px;
        }
    }
    @media all and (max-width: 640px) {
        .main-visual {
            height: 60vh;
        }
        .main-visual .txt-area .mv-txt {
            width: 50%;
        }
        .main-visual .txt-area .btn-more {
            bottom: 40px;
        }
    }

.main-about {
    position: relative;
    width: 100%;
    padding: var(--space-290) 0;
    background-image: url("/public/images/main-about.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.main-about .txt-area {
    display: flex;
    flex-direction: column;
}
.main-about .txt-area span {
    display: block;
    margin-bottom: var(--space-120);
    padding-left: 8.8%;
    font-family: var(--font-en);
    color: var(--color-primary);
    font-size: var(--font-25);
    font-weight: var(--fw-bold);
}
.main-about .txt-area pre {
    align-self: flex-end;
    margin-bottom: var(--space-150);
    padding-right: 3.5%;
    color: var(--color-white);
    font-size: var(--space-35);
    font-weight: var(--fw-bold);
}
.main-about .txt-area pre strong {
    color: var(--color-primary);
}
.main-about .txt-area .btn-more {
    align-self: flex-start;
    margin: 0;
    margin-left: 32.6%;
}
    /* 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .main-about {
            padding: var(--space-200) 0;
        }
        .main-about .txt-area span {
            margin-bottom: var(--space-100);
            padding-left: 0;
            font-size: var(--font-20);
        }
        .main-about .txt-area pre {
            margin-bottom: var(--space-120);
            padding-right: 0;
            font-size: var(--space-25);
        }
        .main-about .txt-area .btn-more {
            margin-left: 15%;
        }
    }
    @media all and (max-width: 640px) {
        .main-about {
            padding: var(--space-100) 0;
        }
        .main-about .txt-area span {
            margin-bottom: var(--space-40);
            font-size: var(--font-18);
        }
        .main-about .txt-area pre {
            margin-bottom: var(--space-60);
            font-size: var(--space-20);
        }
        .main-about .txt-area .btn-more {
            margin-left: 0;
        }
    }

.main-work {
    position: relative;
}
.main-work .work-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.main-work .work-list .item {
    position: relative;
}
.main-work .work-list .item .img-area {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56%;
}
.main-work .work-list .item .img-area img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-work .work-list .item .tit-area {
    position: absolute;
}
.main-work .work-list .item:nth-of-type(1) .tit-area {
    right: var(--space-65);
    bottom: var(--space-50);
}
.main-work .work-list .item:nth-of-type(2) .tit-area {
    left: var(--space-65);
    bottom: var(--space-50);
}
.main-work .work-list .item:nth-of-type(3) .tit-area {
    top: var(--space-50);
    right: var(--space-65);
}
.main-work .work-list .item:nth-of-type(4) .tit-area {
    top: var(--space-50);
    left: var(--space-65);
}
.main-work .work-list .item .tit-area p {
    font-size: var(--font-25);
    font-weight: var(--fw-bold);
}
.main-work .btn-more {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
    /* 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .main-work .work-list .item:nth-of-type(1) .tit-area {
            right: var(--space-40);
            bottom: var(--space-35);
        }
        .main-work .work-list .item:nth-of-type(2) .tit-area {
            left: var(--space-40);
            bottom: var(--space-35);
        }
        .main-work .work-list .item:nth-of-type(3) .tit-area {
            top: var(--space-35);
            right: var(--space-40);
        }
        .main-work .work-list .item:nth-of-type(4) .tit-area {
            top: var(--space-35);
            left: var(--space-40);
        }
        .main-work .work-list .item .tit-area p {
            font-size: var(--font-20);
        }
    }
    @media all and (max-width: 640px) {
        .main-work .work-list {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
        }
        .main-work .work-list .item:nth-of-type(1) .tit-area {
            right: var(--space-30);
            bottom: var(--space-25);
        }
        .main-work .work-list .item:nth-of-type(2) .tit-area {
            left: var(--space-30);
            bottom: var(--space-25);
        }
        .main-work .work-list .item:nth-of-type(3) .tit-area {
            top: var(--space-25);
            right: var(--space-30);
        }
        .main-work .work-list .item:nth-of-type(4) .tit-area {
            top: var(--space-25);
            left: var(--space-30);
        }
        .main-work .work-list .item .tit-area p {
            font-size: var(--font-18);
        }
        .main-work .btn-more {
            position: static;
            transform: translate(0, 0);
            margin-top: var(--space-60);
        }
    }

.main-support {
    padding: var(--space-250) 0;
}
.main-support .txt-area {
    margin-bottom: var(--space-75);
    text-align: center;
}
.main-support .txt-area pre {
    font-size: var(--font-40);
    font-weight: var(--fw-bold);    
}
.main-support .support-info-area {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 68px;
    margin: 0 auto;
}
.main-support .support-info-area .tit-area {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--space-40);
    background-color: var(--color-primary);
    border-right: 1px solid #000000;
}
.main-support .support-info-area .tit-area strong {
    text-align: center;
    color: var(--color-dark);
    font-size: var(--font-20);
    font-weight: var(--fw-extrabold);
}
.main-support .support-info-area .info-area {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--space-40);
    background-color: var(--color-primary);
    border-right: 1px solid #000000;
}
.main-support .support-info-area .info-area .item {
    display: flex;
    align-items: center;
    margin-right: var(--space-40);
    color: var(--color-dark);
    font-size: var(--font-20);
    font-weight: var(--fw-extrabold);
    text-transform: uppercase;
}
.main-support .support-info-area .info-area .item:last-of-type {
    margin-right: 0;
}
.main-support .support-info-area .info-area .item img {
    width: auto;
    margin-right: var(--space-10);
}
.main-support .support-info-area .btn-more2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 68px;
    flex-shrink: 0;
    height: 100%;
    background-color: var(--color-primary);
}
.main-support .support-info-area .btn-more2 img {
    width: auto;
}
    /* 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .main-support {
            padding: var(--space-150) 0;
        }
        .main-support .txt-area {
            margin-bottom: var(--space-60);
        }
        .main-support .txt-area pre {
            font-size: var(--font-35);  
        }
        .main-support .support-info-area {
            flex-direction: column;
            height: auto;
        }
        .main-support .support-info-area .tit-area {
            height: 65px;
            padding: 0 var(--space-30);
            border-right: 0;
            border-bottom: 1px solid #000000;
        }
        .main-support .support-info-area .tit-area strong {
            font-size: var(--font-18);
        }
        .main-support .support-info-area .info-area {
            height: 65px;
            padding: 0 var(--space-30);
            border-right: 0;
        }
        .main-support .support-info-area .info-area .item {
            margin-right: var(--space-30);
            font-size: var(--font-18);
        }
        .main-support .support-info-area .btn-more2 {
            flex-basis: 65px;
            width: 65px;
            border-top: 1px solid #000000;
        }

    }
    @media all and (max-width: 640px) {
        .main-support {
            padding: var(--space-100) 0;
        }
        .main-support .txt-area {
            margin-bottom: var(--space-40);
        }
        .main-support .txt-area pre {
            font-size: var(--font-30);  
        }
        .main-support .support-info-area .tit-area {
            
            height: 60px;
            padding: 0 var(--space-20);
        }
        .main-support .support-info-area .tit-area strong {
            font-size: var(--font-16);
        }
        .main-support .support-info-area .info-area {
            flex-direction: column;
            justify-content: center;
            height: auto;
            min-height: 60px;
            padding: var(--space-20);
        }
        .main-support .support-info-area .info-area .item {
            margin-right: 0;
            margin-bottom: var(--space-10);
            font-size: var(--font-16);
        }
        .main-support .support-info-area .btn-more2 {
            flex-basis: 60px;
            width: 60px;
        }
    }

.main-news {
    padding-bottom: var(--space-250);
}
.main-news .tit-area {
    margin-bottom: var(--space-45);
    text-align: center;
}
.main-news .tit-area strong {
    font-family: var(--font-en);
    font-size: var(--font-25);
    font-weight: var(--fw-bold);
}
.main-news .swiper {
    margin-bottom: var(--space-95);
}
.main-news .swiper-slide .img-area {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}
.main-news .swiper-slide .img-area .news-category {
    z-index: 2;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    background-color: #000000;
    text-align: center;
    color: var(--color-primary);
    font-size: var(--font-15);
    font-weight: var(--fw-bold);
}
.main-news .swiper-slide .img-area img {
    transition: var(--transition);
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-news .swiper-slide a:hover .img-area img {
    transform: scale(1.1);
}
.main-news .swiper-slide .txt-area {
    margin-top: var(--space-20);
    text-align: center;
}
.main-news .swiper-slide .txt-area p {
    font-size: var(--font-18);
    font-weight: var(--fw-bold);
}
    /* 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .main-news {
            padding-bottom: var(--space-150);
        }
        .main-news .tit-area {
            margin-bottom: var(--space-35);
        }
        .main-news .tit-area strong {
            font-size: var(--font-20);
        }
        .main-news .swiper {
            margin-bottom: var(--space-80);
        }
        .main-news .swiper-slide .img-area .news-category {
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: var(--font-14);
        }
        .main-news .swiper-slide .txt-area {
            margin-top: var(--space-18);
        }
        .main-news .swiper-slide .txt-area p {
            font-size: var(--font-16);
        }
    }
    @media all and (max-width: 640px) {
        .main-news {
            padding-bottom: var(--space-100);
        }
        .main-news .tit-area {
            margin-bottom: var(--space-30);
        }
        .main-news .tit-area strong {
            font-size: var(--font-18);
        }
        .main-news .swiper {
            margin-bottom: var(--space-60);
        }
        .main-news .swiper-slide .img-area .news-category {
            width: 35px;
            height: 35px;
            line-height: 35px;
            font-size: var(--font-13);
        }
        .main-news .swiper-slide .txt-area {
            margin-top: var(--space-15);
        }
        .main-news .swiper-slide .txt-area p {
            font-size: var(--font-15);
        }
    }
    

/* 서브 공통 */
#sub-content {
    position: relative;
    width: 100%;
    margin-bottom: var(--space-300);
}
#sub-content.purpose {
    background: url("/public/images/purpose-bg.png") no-repeat top 80px right 0 / contain;
}
#sub-content.history {
    background: url("/public/images/history-bg.png") no-repeat top 80px right 0 / contain;
}
#sub-content.work {
    background: url("/public/images/work-bg.png") no-repeat top 80px right 0 / contain;
}
#sub-content.artist {
    background: url("/public/images/artist-bg.png") no-repeat top 80px right 0 / contain;
}
#sub-content.support {
    background: url("/public/images/support-bg.png") no-repeat top 80px right 0 / contain;
}
aside {
    position: relative;
    width: 100%;
    padding-top: 12.5%;
    margin-bottom: var(--space-200);
}
aside .layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.aside-tit-kr {
    color: var(--color-primary);
    font-size: var(--font-20);
    font-weight: var(--fw-bold);
}
.aside-tit-en {
    font-family: var(--font-en);
    font-size: var(--font-130);
    font-weight: var(--fw-extrabold);
    text-transform: uppercase;
}
.aside-menu-area {
    position: relative;
    top: -30px
}
.aside-menu-area ul {
    display: flex;
}
.aside-menu-area li:not(:last-of-type) {
    margin-right: var(--space-30);
}
.aside-menu-area li a {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-16);
    font-weight: var(--fw-light);
}
.aside-menu-area li.on a,
.aside-menu-area li a:hover {
    color: var(--color-primary);
    font-weight: var(--fw-extrabold);
}
.category-tab ul {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-90);
}
.category-tab ul li {
    cursor: pointer;
    position: relative;
    font-family: var(--font-en);
    font-size: var(--font-20);
    transition: var(--transition);
}
.category-tab ul li.on,
.category-tab ul li:hover {
    font-weight: var(--fw-extrabold);
}
.category-tab ul > li:not(:last-of-type) {
    margin-right: var(--space-30);
}
.category-tab ul li::before {
    opacity: 0;
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 0;
    height: 1px;
    background-color: var(--color-white);
    transition: var(--transition);
}
.category-tab ul li.on::before,
.category-tab ul li:hover::before {
    opacity: 1;
    display: block;
    width: 100%;
}
.tab-content-area .tab-content {
    display: none;
}
.tab-content-area .tab-tit {
    font-family: var(--font-en);
    text-align: center;
    color: var(--color-primary);
    font-size: var(--font-90);
    font-weight: var(--fw-bold);
}

    /* 서브 공통 미디어쿼리 */
    @media all and (max-width:1200px) {
        #sub-content {
            margin-bottom: var(--space-200);
        }
        aside {
            margin-bottom: var(--space-150);
        }
        aside .layout {
            flex-direction: column;
            align-items: flex-start;
        }
        .aside-tit-kr {
            font-size: var(--font-16);
        }
        .aside-tit-en {
            font-size: var(--font-100);
        }
        .aside-menu-area {
            top: auto;
            margin-top: var(--space-20);
        }
        .aside-menu-area li:not(:last-of-type) {
            margin-right: var(--space-25);
        }
        .aside-menu-area li a {
            font-size: var(--font-15);
        }
        .category-tab ul {
            margin-bottom: var(--space-60);
        }
        .category-tab ul li {
            font-size: var(--font-18);
        }
        .category-tab ul li:not(:last-of-type) {
            margin-right: var(--space-25);
        }
        .tab-content-area .tab-tit {
            font-size: var(--font-70)
        }
    }
    @media all and (max-width:1000px) {
        aside {
            margin-bottom: var(--space-60);
        }
    }
    @media all and (max-width:640px) {
        #sub-content {
            margin-bottom: var(--space-100);
        }
        aside {
            margin-bottom: var(--space-100);
            padding-top: 25%;
        }
        .aside-tit-kr {
            font-size: var(--font-14);
        }
        .aside-tit-en {
            font-size: var(--font-60);
        }
        .aside-menu-area {
            margin-top: var(--space-10);
        }
        .aside-menu-area li:not(:last-of-type) {
            margin-right: var(--space-20);
        }
        .aside-menu-area li a {
            font-size: var(--font-14);
        }
        .category-tab ul {
            margin-bottom: var(--space-30);
        }
        .category-tab ul li {
            font-size: var(--font-16);
        }
        .category-tab ul li:not(:last-of-type) {
            margin-right: var(--space-20);
        }
        .tab-content-area .tab-tit {
            font-size: var(--font-40)
        }
        .page-title strong {
            display: block;
            font-size: var(--font-50);
        }
    }


/* 소개 */
/* 설립취지 및 조직도 */
.purpose1 .slogan-area {
    display: flex;
    justify-content: flex-end;
}
.purpose1 .slogan-area strong {
    text-align: center;
    font-family: var(--font-en);
    color: var(--color-primary);
    font-size: var(--font-90);
    font-weight: var(--fw-bold);
}
.purpose1 .description-area {
    margin-top: var(--space-230);
}
.purpose1 .description-area pre {
    font-size: var(--font-22);
    font-weight: var(--fw-semibold);
}
.purpose1 .description-area pre span {
    color: var(--color-primary);
}

.purpose3 .display-flex-content {
    display: flex;
    justify-content: space-between;
}
.purpose3 .display-flex-content strong {
    margin-top: var(--space-130);
    font-family: var(--font-en);
    font-size: var(--font-25);
    font-weight: var(--fw-bold);
}
.purpose3 .display-flex-content .img-area {
    max-width: 1148px;
    margin-left: var(--space-80);
}
    @media all and (max-width: 1200px) {
        .purpose1 .slogan-area strong {
            font-size: var(--font-60);
        }
        .purpose1 .description-area {
            margin-top: var(--space-150);
        }
        .purpose1 .description-area pre {
            font-size: var(--font-20);
        }
        .purpose3 .display-flex-content {
            flex-direction: column;
            margin-top: var(--space-100);
        }
        .purpose3 .display-flex-content strong {
            margin-top: 0;
            font-size: var(--font-22);
        }
        .purpose3 .display-flex-content .img-area {
            max-width: 100%;
            width: 100%;
            margin-top: var(--space-60);
            margin-left: 0;
        }
    }
    @media all and (max-width: 640px) {
        .purpose1 .slogan-area strong {
            font-size: var(--font-40);
        }
        .purpose1 .description-area {
            margin-top: var(--space-100);
        }
        .purpose1 .description-area pre {
            font-size: var(--font-18);
        }
        .purpose3 .display-flex-content {
            margin-top: var(--space-60);
        }
        .purpose3 .display-flex-content strong {
            font-size: var(--font-20);
        }
        .purpose3 .display-flex-content .img-area {
            margin-top: var(--space-40);
        }
    }


/* 연혁 */
.history1 {
    position: relative;
}
.history1::before {
    opacity: 0.07;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    max-width: 1720px;
    height: 100%;
    background: url("/public/images/history-altimeets.svg") no-repeat 50% 85% / contain;
}

.history1 .tab-content-area {
    max-width: 464px;
    margin: 0 auto;
}
.history1 .tab-content-area .history-list {
    margin-top: var(--space-70);
}
.history1 .tab-content-area .history-list .list:not(:last-of-type) {
    margin-bottom: var(--space-160);
}
.history1 .tab-content-area .history-list .list .txt-area {
    text-align: center;
}
.history1 .tab-content-area .history-list .list .txt-area .month {
    color: var(--color-primary);
    font-size: var(--font-25);
    font-weight: var(--fw-medium);
}
.history1 .tab-content-area .history-list .list .txt-area .subject {
    margin-top: var(--space-15);
    font-size: var(--font-25);
    font-weight: var(--fw-extrabold);
}
.history1 .tab-content-area .history-list .list .img-area {
    margin-top: var(--space-40);
}
    @media all and (max-width: 1200px) {
        .history1 .tab-content-area .history-list {
            margin-top: var(--space-50);
        }
        .history1 .tab-content-area .history-list .list:not(:last-of-type) {
            margin-bottom: var(--space-100);
        }
        .history1 .tab-content-area .history-list .list .txt-area .month {
            font-size: var(--font-22);
        }
        .history1 .tab-content-area .history-list .list .txt-area .subject {
            font-size: var(--font-22);
        }
        .history1 .tab-content-area .history-list .list .img-area {
            margin-top: var(--space-30);
        }
    }
    @media all and (max-width: 640px) {
        .history1 .tab-content-area .history-list {
            margin-top: var(--space-30);
        }
        .history1 .tab-content-area .history-list .list:not(:last-of-type) {
            margin-bottom: var(--space-60);
        }
        .history1 .tab-content-area .history-list .list .txt-area .month {
            font-size: var(--font-20);
        }
        .history1 .tab-content-area .history-list .list .txt-area .subject {
            margin-top: var(--space-10);
            font-size: var(--font-20);
        }
        .history1 .tab-content-area .history-list .list .img-area {
            margin-top: var(--space-20);
        }
    }


/* 작품소개 */
.work .work-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: var(--space-70);
}
.work .work-list .list {
    position: relative;
}
.work .work-list .list .img-area {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 80%;
}
.work .work-list .list .img-area img {
    opacity: 0.65;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.work .work-list .list .txt-area {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-50) var(--space-60);
}
.work .work-list .list .txt-area .subject-area {
    display: flex;
    flex-direction: column;
}
.work .work-list .list .txt-area .subject-area strong {
    color: var(--color-primary);
    font-size: var(--font-30);
    font-weight: var(--fw-bold);
}
.work .work-list .list .txt-area .subject-area span {
    margin-top: var(--space-10);
    font-size: var(--font-16);
}
.work .work-list .list .txt-area .description-area p {
    font-size: var(--font-20);
}
    @media all and (max-width: 1200px) {
        .work .work-list {
            margin-top: var(--space-50);
        }
        .work .work-list .list .txt-area {
            padding: var(--space-40) var(--space-50);
        }
        .work .work-list .list .txt-area .subject-area strong {
            font-size: var(--font-25);
        }
        .work .work-list .list .txt-area .subject-area span {
            font-size: var(--font-15);
        }
        .work .work-list .list .txt-area .description-area p {
            font-size: var(--font-18);
        }
    }
    @media all and (max-width: 640px) {
        .work .work-list {
            grid-template-columns: repeat(1, 1fr);
            margin-top: var(--space-30);
        }
        .work .work-list .list .txt-area {
            padding: var(--space-30);
        }
        .work .work-list .list .txt-area .subject-area strong {
            font-size: var(--font-20);
        }
        .work .work-list .list .txt-area .subject-area span {
            font-size: var(--font-14);
        }
        .work .work-list .list .txt-area .description-area p {
            font-size: var(--font-16);
        }
    }


/* 단원소개 */
.artist1 .ceo-area {
    max-width: 440px;
    margin: 0 auto;
}
.artist1 .ceo-area .txt-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--space-30);
}
.artist1 .ceo-area .txt-area strong {
    color: var(--color-primary);
    font-size: var(--font-30);
    font-weight: var(--fw-bold);
}
.artist1 .ceo-area .txt-area span {
    margin-top: var(--space-10);
    font-size: var(--font-20);
}
.artist1 .adviser-area {
    margin-top: var(--space-200);
}
.artist1 .adviser-area-tit {
    display: block;
    margin-bottom: var(--space-40);
    font-size: var(--font-25);
    font-weight: var(--fw-bold);
}
.artist1 .adviser-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-110) var(--space-80);
}
.artist1 .adviser-list .txt-area {
    margin-top: var(--space-20);
    text-align: center;
}
.artist1 .adviser-list .txt-area strong {
    font-size: var(--font-20);
    font-weight: var(--fw-bold);
}
.artist2 .slogan-area {
    max-width: 1250px;
    margin: var(--space-250) auto;
}
.artist3 .artist-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-100) var(--space-50);
}
.artist3 .artist-list .list .txt-area {
    margin-top: var(--space-20);
    text-align: center;
}
.artist3 .artist-list .list .txt-area strong {
    font-size: var(--font-18);
    font-weight: var(--fw-bold);
}
    @media all and (max-width: 1200px) {
        .artist1 .ceo-area .txt-area {
            margin-top: var(--space-25);
        }
        .artist1 .ceo-area .txt-area strong {
            font-size: var(--font-25);
        }
        .artist1 .ceo-area .txt-area span {
            margin-top: var(--space-5);
            font-size: var(--font-18);
        }
        .artist1 .adviser-area {
            margin-top: var(--space-100);
        }
        .artist1 .adviser-area-tit {
            margin-bottom: var(--space-30);
            font-size: var(--font-20);
        }
        .artist1 .adviser-list {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-80) var(--space-40);
        }
        .artist1 .adviser-list .txt-area {
            margin-top: var(--space-15);
        }
        .artist1 .adviser-list .txt-area strong {
            font-size: var(--font-18);
        }
        .artist2 .slogan-area {
            margin: var(--space-150) auto;
        }
        .artist3 .artist-list {
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-60) var(--space-30);
        }
        .artist3 .artist-list .list .txt-area {
            margin-top: var(--space-15);
        }
        .artist3 .artist-list .list .txt-area strong {
            font-size: var(--font-16);
        }
    }
    @media all and (max-width: 640px) {
        .artist1 .ceo-area .txt-area {
            margin-top: var(--space-20);
        }
        .artist1 .ceo-area .txt-area strong {
            font-size: var(--font-20);
        }
        .artist1 .ceo-area .txt-area span {
            font-size: var(--font-16);
        }
        .artist1 .adviser-area {
            margin-top: var(--space-60);
        }
        .artist1 .adviser-area-tit {
            margin-bottom: var(--space-20);
            font-size: var(--font-18);
        }
        .artist1 .adviser-list {
            gap: var(--space-40) var(--space-20);
        }
        .artist1 .adviser-list .txt-area {
            margin-top: var(--space-10);
        }
        .artist1 .adviser-list .txt-area strong {
            font-size: var(--font-15);
        }
        .artist2 .slogan-area {
            margin: var(--space-100) auto;
        }
        .artist3 .artist-list {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-40) var(--space-20);
        }
        .artist3 .artist-list .list .txt-area strong {
            font-size: var(--font-15);
        }
    }


/* 후원 */
.support .display-flex-content {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.support .display-flex-content .txt-area pre {
    font-size: var(--font-22);
    font-weight: var(--fw-semibold);
}
.support1 .img-area {
    max-width: 423px;
    margin: 0 var(--space-80);
}
.support1 .txt-img-area {
    z-index: -1;
    position: absolute;
    bottom: var(--space-120);
    left: -80px;
}
.support2 {
    padding: var(--space-150) 0 var(--space-250) 0;
}
.support2 .img-area {
    max-width: 531px;
    margin: 0 var(--space-80);
}
.support2 .txt-img-area {
    z-index: -1;
    position: absolute;
    bottom: 0;
    left: 450px;
}
.support3 .txt-area {
    padding-left: var(--space-80);
}
.support3 .txt-area pre span {
    color: var(--color-primary);
}
.support3 .img-area {
    z-index: -1;
    max-width: 492px;
    margin: 0 var(--space-100);
}
.support3 .txt-img-area {
    position: absolute;
    bottom: var(--space-30);
    left: 160px;
}
.support4 {
    margin-top: var(--space-250);
    padding: var(--space-80) 0;
    background: var(--color-primary);
}
.support4 .display-flex-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.support4 .left-area {
    width: 40%;
    max-width: 630px;
}
.support4 .left-area span {
    display: block;
    margin-bottom: var(--space-15);
    color: var(--color-dark);
    font-size: var(--font-20);
    font-weight: var(--fw-bold);
}
.support4 .left-area pre {
    color: var(--color-dark);
    font-size: var(--font-35);
    font-weight: var(--fw-bold);
}
.support4 .right-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.support4 .right-area .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 0 auto;
    height: 72px;
    padding: 0 var(--space-40);
}
.support4 .right-area .btn .svg {
    height: 23px;
    margin-right: var(--space-10);
}
.support4 .right-area .btn .svg path {
    transition: var(--transition);
}
.support4 .right-area .btn span {
    font-size: var(--font-22);
    font-weight: var(--fw-bold);
}
.support4 .right-area .btn:first-of-type {
    margin-right: var(--space-30);
    border: 2px solid #000000;
}
.support4 .right-area .btn:first-of-type:hover {
    background: #000000;
}
.support4 .right-area .btn:first-of-type:hover .svg path {
    fill: var(--color-primary);
}
.support4 .right-area .btn:first-of-type span {
    color: #000000;
}
.support4 .right-area .btn:first-of-type:hover span {
    color: var(--color-primary)
}
.support4 .right-area .btn:last-of-type {
    background: #000000;
    border: 2px solid #000000;
}
.support4 .right-area .btn:last-of-type:hover {
    background: transparent;
    border: 2px solid #000000;
}
.support4 .right-area .btn:last-of-type span {
    color: var(--color-primary);
}
.support4 .right-area .btn:last-of-type:hover span {
    color: #000000;
}
.support4 .right-area .btn:last-of-type:hover .svg path {
    fill: #000000
}
    @media all and (max-width: 1400px) {

    }
    @media all and (max-width: 1200px) {
        .support .display-flex-content .txt-area pre {
            font-size: var(--font-20);
        }
        .support1 .img-area {
            margin: 0 0 0 var(--space-60);
        }
        .support2 {
            padding: var(--space-100) 0 var(--space-150) 0;
        }
        .support2 .img-area {
            margin: 0 var(--space-60) 0 0;
        }
        .support3 .txt-area {
            padding-left: 0;
        }
        .support3 .img-area {
            margin: 0 0 0 var(--space-80);
        }
        .support4 {
            margin-top: var(--space-100);
            padding: var(--space-60) 0;
        }
        .support4 .display-flex-content {
            flex-direction: column;
            justify-content: center;
        }
        .support4 .left-area {
            max-width: 100%;
            width: 100%;
            margin-bottom: var(--space-40);
            margin-right: 0;
            text-align: center;
        }
        .support4 .left-area span {
            margin-bottom: var(--space-10);;
            font-size: var(--font-18);
        }
        .support4 .left-area pre {
            font-size: var(--font-30);
        }
        .support4 .right-area .btn {
            height: 65px;
            padding: 0 var(--space-30);
        }
        .support4 .right-area .btn span {
            font-size: var(--font-20);
        }
        .support4 .right-area .btn:first-of-type {
            margin-right: var(--space-25);
        }
    }
    @media all and (max-width: 640px) {
        .support .display-flex-content .txt-area {
            width: 100%;
        }
        .support .display-flex-content .txt-area pre {
            font-size: var(--font-18);
        }
        .support1 .display-flex-content {
            flex-direction: column-reverse;
        }
        .support1 .img-area {
            max-width: 100%;
            margin: 0 0 var(--space-40) 0;
        }
        .support2 {
            padding: var(--space-60) 0;
        }
        .support2 .display-flex-content {
            flex-direction: column;
        }
        .support2 .img-area {
            margin: 0 0 var(--space-40);
        }
        .support3 .display-flex-content {
            flex-direction: column-reverse;
        }
        .support3 .txt-area {
            padding-left: 0;
        }
        .support3 .img-area {
            margin: 0 0 var(--space-40) 0;
        }
        .support4 {
            margin-top: var(--space-60);
            padding: var(--space-40) 0;
        }
        .support4 .left-area {
            margin-bottom: var(--space-20);
        }
        .support4 .left-area span {
            margin-bottom: var(--space-5);
            font-size: var(--font-16);
        }
        .support4 .left-area pre {
            font-size: var(--font-25);
        }
        .support4 .right-area {
            flex-direction: column;
        }
        .support4 .right-area .btn {
            width: 300px;
            height: 60px;
            padding: 0 var(--space-20);
        }
        .support4 .right-area .btn span {
            font-size: var(--font-18);
        }
        .support4 .right-area .btn .svg {
            height: 20px;
        }
        .support4 .right-area .btn:first-of-type {
            margin-right: 0;
            margin-bottom: var(--space-10);
        }
    }
    
/* 후원명단 */
.sponsorship .tab-content-area .tab-tit {
    font-size: var(--font-25);
    margin-bottom: var(--space-50)
}
.sponsorship .sponsorship-list ol {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: var(--space-20) var(--space-10);
}
.sponsorship .sponsorship-list ol li {
    text-align: center;
}
    /* 후원명단 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .sponsorship .sponsorship-list ol {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    @media all and (max-width: 1000px) {
        .sponsorship .sponsorship-list ol {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media all and (max-width: 640px) {
        .sponsorship .tab-content-area .tab-tit {
            font-size: var(--font-22);
            margin-bottom: var(--space-30)
        }
        .sponsorship .sponsorship-list ol {
            grid-template-columns: repeat(1, 1fr);
        }
        .sponsorship .sponsorship-list ol li {
            font-size: var(--font-18);
        }
    }

/* mainCategory */
.mainCategory h3 {
    margin-top: var(--space-20)
}
.galleryHover {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--space-60) var(--space-30);
}
.galleryHover .post .postLink {
    position: absolute;
    top: 0;
    left:0;
    z-index: 3;
    display: block;
    width:100%;
    height:100%
}
.galleryHover .post .postImg {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 84%;
    overflow: hidden;
}
.galleryHover .post .postImg img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}
.galleryHover .post figure {
    position: relative;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    transition: .3s ease-out;
}
.galleryHover .post figure::before {
    content:"";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top: 0;
    display: block;
    z-index: 1;
    transition: .3s ease-out;
}
.galleryHover .post figure:hover::before {
    background: rgba(0, 0, 0, 0.85);
}
.galleryHover .post figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
}
.galleryHover .post figure figcaption {
    padding: var(--space-40) var(--space-35);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    top: auto;
    bottom: 0;
    height: 100%;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
    color: var(--color-white);
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}
.galleryHover .post figure figcaption::before,
.galleryHover .post figure figcaption::after {
    pointer-events: none;
}
.galleryHover .post figure figcaption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.galleryHover figure .postMenu {
    font-size: var(--font-25);
    font-weight: var(--fw-bold);
    display: block;
    margin-bottom: var(--space-20);
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
    opacity: 0;
}
.galleryHover figure .postTitle {
    font-size: var(--font-20);
    font-weight: var(--fw-bold);
    display: block;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,200%,0);
    transform: translate3d(0,200%,0);
    opacity: 0;
}
.galleryHover figure .btnMore {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-17);
    font-weight: var(--fw-bold);
}
.galleryHover figure .btnMore img {
    width: 18px;
}
.galleryHover figure:hover figcaption,
.galleryHover figure:hover .postTitle,
.galleryHover figure:hover .postMenu,
.galleryHover figure:hover .btnMore {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
}
.galleryHover figure:hover .postMenu {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.galleryHover figure:hover .postTitle {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}
.galleryHover figure:hover .btnMore {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.galleryHover figure:hover .btnMore img {
    margin-left: var(--space-10)
}
.post-works {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}
.post-works iframe {
    width: 100%;
}
.mainCategory .galleryHover .post-works .postImg {
    padding-bottom: 56.25%;
}
.mainNewsletter {
    position: relative;
    overflow: hidden;
    width:100%;
    height: 0%;
    padding-bottom: 84%;
    background-color: var(--color-primary)
}
.post-zest .mainNewsletter {
    background-color: var(--color-orange)
}
.post-zest .mainNewsletter .month {
    color: var(--color-orange);
}
.mainNewsletter .flex {
    position: absolute;
    height: 100%;
    width: 88%;
    top: 33px;
    left:0;
    right: 0;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: var(--space-20);
    background-color: var(--color-dark)
}
.mainNewsletter .date {
    display: flex;
    align-items: flex-start;
    width:25%
}
.mainNewsletter .date .inner {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.mainNewsletter .month {
    font-size: var(--font-60);
    color: var(--color-primary);
    font-weight: var(--fw-black);
}
.mainNewsletter .year {
    font-size:var(--font-15);
    color: var(--color-white);
    font-weight: var(--fw-bold);
}
.mainNewsletter .cover {
    width:72%;
    text-align: right;
    overflow: hidden;
}
.mainNewsletter .cover img {
    width:100%;
    max-width: 100% !important;
    min-height: unset !important;
}
    /* mainCategory 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .galleryHover {
            grid-gap: var(--space-50) var(--space-20);
        }
        .galleryHover .post figure figcaption {
            padding: var(--space-25) var(--space-20);
        }
        .galleryHover figure .postMenu {
            font-size: var(--font-18);
            margin-bottom: var(--space-15);
        }
        .galleryHover figure .postTitle {
            font-size: var(--font-16);
        }
        .mainNewsletter .flex {
            top: 40px;
        }
        .mainNewsletter .month {
            font-size: var(--font-50);
        }
    }
    @media all and (max-width: 1000px) {
        .mainCategory h3 {
            margin-top: var(--space-10)
        }
        .galleryHover {
            grid-template-columns: repeat(2, 1fr);
            grid-gap: var(--space-40) var(--space-20);
        }
        .galleryHover .post figure figcaption {
            padding: var(--space-30) var(--space-25);
        }
        .galleryHover figure .postTitle {
            font-size: var(--font-16);
        }
        .galleryHover figure .btnMore {
            font-size: var(--font-15);
        }
    }
    @media all and (max-width: 640px) {
        .mainCategory h3 {
            margin-top: var(--space-10);
        }
        .galleryHover {
            grid-template-columns: repeat(1, 1fr);
            grid-gap: var(--space-30) 0;
        }
        .galleryHover .post figure figcaption {
            padding: var(--space-25) var(--space-20);
        }
        .galleryHover figure .postMenu {
            font-size: var(--font-18);
            margin-bottom: var(--space-15);
        }
        .galleryHover figure .postTitle {
            font-size: var(--font-16);
        }
        .galleryHover figure .btnMore {
            font-size: var(--font-15);
        }
        .galleryHover figure:hover .btnMore img {
            width: 15px;
            margin-left: var(--space-5)
        }
        .mainNewsletter .month {
            font-size: var(--font-50);
        }
    }


/* mainValue */
.mainValue .mainContent .itemRow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0;
}
.mainValue .mainContent .item:nth-of-type(-n+3) {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.15)
}
.mainValue .mainContent .item {
    border-right: 1px dashed rgba(0, 0, 0, 0.15)
}
.mainValue .mainContent .item:nth-of-type(3),
.mainValue .mainContent .item:nth-of-type(6) {
    border-right: 0
}
.mainValue .mainContent .item .inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: var(--space-60) 0
}
.mainValue .mainContent .item:nth-of-type(-n+3) .inner {
    padding-top: 0
}
.mainValue .mainContent .item:nth-of-type(n+4) .inner {
    padding-bottom: 0
}
.mainValue .mainContent .item .icon {
    display: flex;
    justify-content: center;
}
.mainValue .mainContent .item .textArea {
    text-align: center;
    margin-top: var(--space-30);
}
.mainValue .mainContent .item .title {
    font-size: var(--font-25);
    margin-bottom: var(--space-20);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    display: block;
}
.mainValue .mainContent .item .txt18 {
    line-height: 1.4
}
    /*  mainValue 미디어쿼리 */
    @media all and (max-width:1200px) {
        .mainValue .mainContent .item .inner {
            padding: var(--space-40) var(--space-20)
        }
        .mainValue .mainContent .item .icon img {
            width: 90px;
        }
        .mainValue .mainContent .item .title {
            font-size: var(--font-22);
            margin-bottom: var(--space-20);
        }
        .mainValue .mainContent .item .txt18 {
            white-space: normal;
        }
    }
    @media all and (max-width:1000px) {
        .mainValue .mainContent .item .inner {
            padding: var(--space-40) var(--space-15)
        }
        .mainValue .mainContent .item .icon img {
            width: 90px;
        }
        .mainValue .mainContent .item .textArea {
            margin-top: var(--space-20)
        }
        .mainValue .mainContent .item .title {
            font-size: var(--font-20);
            margin-bottom: var(--space-15);
        }
    }
    @media all and (max-width:640px) {
        .mainValue .mainContent .itemRow {
            grid-template-columns: repeat(1, 1fr);
        }
        .mainValue .mainContent .item {
            border-right: 0;
        }
        .mainValue .mainContent .item .inner,
        .mainValue .mainContent .item:nth-of-type(-n+3) .inner,
        .mainValue .mainContent .item:nth-of-type(n+4) .inner {
            padding: var(--space-30) var(--space-10)
        }
        .mainValue .mainContent .item:not(:last-of-type) {
            border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
        }
        .mainValue .mainContent .item .icon img {
            width:70px;
        }
        .mainValue .mainContent .item .title {
            font-size: var(--font-18);
            margin-bottom: var(--space-10);
        }
        .mainValue .mainContent .item .txt18 {
            white-space: pre-line;
        }
    }

/* 서브 상단 */
.sub-container {
    margin: 6.8% 0 15.62%
}
article {
    width:100%;
}

.board {
    background: url("/public/images/board.png") no-repeat top right 10%;
}


.people aside.sub-top {
    background: url("/public/images/people.png") no-repeat center / cover;
}

.works aside.sub-top {
    background: url("/public/images/works.png") no-repeat center / cover;
}
.contactus aside.sub-top {
    background: url("/public/images/contactus.png") no-repeat center / cover;
}

.page-title {
    text-align: left;
}
.page-title h2 {
    margin-bottom: var(--space-9);
    color: var(--color-primary);
}
.page-title strong {
    display: block;
    font-size: var(--font-130);
    font-weight: var(--fw-extrabold);
    font-family: var(--font-en);
}

.category {
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: var(--space-28)
}
.category li {
    font-weight: var(--fw-light);
    font-size: var(--font-16);
    position: relative;
    margin: 0 var(--space-15);
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    white-space: nowrap;
}
.category li.current button,
.category li button:hover {
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}
.category li:last-child {
    margin-right: 0
}

    

/* ABOUT */
.about .aside-txt {
    font-size:26px;
    font-weight: bold;
    margin:0 0 3.1250vw 0;
    text-align: center;
}
.about1 .video {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}
.about1 .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.about2 .about2-text {
    text-align: center;
    font-size: var(--font-55);
    line-height: 1.3;
    font-weight: var(--fw-bold);
}

.about2 .profile-download {
    width:285px;
    height: 83px;
    background-color: var(--color-basic);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    color:var(--color-white);
    font-size: var(--font-20);
    margin: 0 auto;
    margin-top: var(--space-80)
}
.about2 .profile-download img {
    margin-right: var(--space-20);
    transform: translate3d(0, 0, 0);
    transition: all 0.3s;
}
.about2 .profile-download:hover img {
    transform: translate3d(4px, -4px, 0);
}
.about2 .profile-download:hover {
    color:var(--color-primary)
}

.about2 .download-area {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-80)
}
.about2 .download-area .btn-download {
    width:285px;
    height: 83px;
    background-color: var(--color-basic);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    color:var(--color-white);
    font-size: var(--font-20);
    margin: 0 var(--space-8)
}
.about2 .download-area .btn-download img {
    margin-right: var(--space-15);
    transform: translate3d(0, 0, 0);
    transition: all 0.3s;
}
.about2 .download-area .btn-download:hover img {
    transform: translate3d(4px, -4px, 0);
}
.about2 .download-area .btn-download:hover {
    color:var(--color-primary)
}

.about4 .flex-box {
    justify-content: space-between;
    align-items: center;
}
.about4 .flex-box .flex-col {
    display: flex;
    align-items: center;
}
.about4 .flex-box .flex-col span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 19px;
}
.about4 .flex-box .flex-col span img {
    width: auto;
    height: 100%;
}
.about4 .flex-box .flex-col strong {
    font-weight: var(--fw-bold);
    font-size: var(--font-22);
    margin-left: var(--space-10)
}
.about4 .flex-box .flex-col a:hover {
    color:var(--color-primary)
}
.about4 .maparea {
    height:473px;
    overflow: hidden;
    margin-top: var(--space-40)
}
    /* ABOUT 미디어쿼리 */
    @media all and (max-width:1200px) {
        .about2 .about2-text {
            font-size: var(--font-50)
        }
        .about4 .flex-box .flex-col strong {
            font-size: var(--font-18)
        }

        .about2 .profile-download {
            width:230px;
            height: 70px;
            font-size: var(--font-18);
            margin-top: var(--space-50)
        }
        .about2 .profile-download img {
            width: 21px;
            margin-right: var(--space-10);
        }

        .about2 .download-area {
            margin-top: var(--space-50)
        }
        .about2 .download-area .btn-download {
            width:230px;
            height: 70px;
            font-size: var(--font-18);
        }
        .about2 .download-area .btn-download img {
            width: 21px;
            margin-right: var(--space-10);
        }

    }
    @media all and (max-width:1000px) {
        .about2 .about2-text {
            font-size: var(--font-30)
        }
        .about2 .profile-download {
            width:210px;
            height: 60px;
            font-size: var(--font-16);
            margin-top: var(--space-40)
        }
        .about2 .profile-download img {
            width: 18px;
        }
        .about2 .download-area {
            margin-top: var(--space-40)
        }
        .about2 .download-area .btn-download {
            width:210px;
            height: 60px;
            font-size: var(--font-16);
            margin: 0 var(--space-5)
        }
        /* .about2 .download-area {
            flex-wrap: wrap;
            margin-top: var(--space-40)
        }
        .about2 .download-area .btn-download {
            width:280px;
            height: 60px;
            font-size: var(--font-16);
            margin: var(--space-5) var(--space-5);
        } */
        .about2 .download-area .btn-download img {
            width: 18px;
        }

        .about4 .flex-box {
            flex-direction: column;
            align-items: flex-start;
        }
        .about4 .flex-box .flex-col:not(:last-of-type) {
            margin-bottom: var(--space-15)
        }
        .about4 .flex-box .flex-col span {
            height: 15px;
        }
        .about4 .flex-box .flex-col strong  {
            font-size: var(--font-16);
        }
        .about4 .maparea {
            height:250px;
            margin-top: var(--space-20)
        }
    }
    @media all and (max-width:640px) {
        .about2 .about2-text {
            font-size: var(--font-25)
        }
        
        .about2 .profile-download {
            width:180px;
            height: 50px;
            font-size: var(--font-15);
            margin-top: var(--space-30)
        }
        .about2 .profile-download img {
            width: 16px;
        }

        .about2 .download-area {
            flex-direction: column;
            margin-top: var(--space-30)
        }
        .about2 .download-area .btn-download {
            margin: 0 0 var(--space-8) 0
        }
        .about2 .download-area .btn-download img {
            width: 16px;
        }

        .about4 .flex-box .flex-col {
            width:100%;
            flex-direction: row;
            align-items: center;
        }
        .about4 .flex-box .flex-col:not(:last-of-type) {
            margin-bottom: var(--space-10)
        }
        .about4 .flex-box .flex-col strong {
            margin-left:var(--space-10)
        }
        .about4 .maparea {
            height:200px;
            margin-top: var(--space-30)
        }
    }

/* PEOPLE */
.people h3 {
    font-size: var(--font-25);
    color: var(--color-primary);
    margin-bottom: var(--space-20);
    font-weight: var(--fw-bold);
}
.people ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: var(--space-30) var(--space-45);
}
.people ul > li {
    text-align: center;
}
.people ul > li > span,
.people ul > li > strong {
    display: block;
}
.people ul > li .image {
    overflow: hidden;
}
.people ul > li .image img {
    width:100%;
    transform: scale(1);
    transition: all 0.3s;
}
.people ul > li:hover .image img {
    transform: scale(1.02);
}
.people ul > li .position {
    font-size: var(--font-16);
    margin:var(--space-15) 0 var(--space-10);
}
.people ul > li .name {
    font-size: var(--font-20);
    font-weight: bold;
}
    /* PEOPLE 미디어쿼리 */
    @media all and (max-width:1000px) {
        .people ul {
            grid-template-columns: repeat(3, 1fr);
            grid-gap: var(--space-40) var(--space-20);
        }
    }
    @media all and (max-width:640px) {
        .people h3 {
            font-size: var(--font-18);
            margin-bottom: var(--space-10);
        }
        .people ul {
            grid-template-columns: repeat(2, 1fr);
            grid-gap: var(--space-30) var(--space-10);
        }
        .people ul > li .position {
            font-size: var(--font-13);
            margin:var(--space-10) 0 var(--space-5);
        }
        .people ul > li .name {
            font-size: var(--font-17)
        }
    }


/* WORKS */
.works-category {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-70)
}
.works-category li {
    margin:0 var(--space-20);
    position: relative;
}
.works-category li a {
    font-size: var(--font-18);
    color: var(--color-gray4e);
}
.works-category li:hover a {
    color: var(--color-primary);
}
.works-category li.current a,
.works-category li:hover a {
    color:var(--color-primary);
    font-weight: var(--fw-bold);
}
.works-list {
    width:100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--space-70) var(--space-65);
}
.works-list li {
    overflow: hidden;
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}
.works-list li a {
    width:100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    margin: auto;
}
.works-list li a::before {
    content:"";
    width:100%;
    height: 100%;
    display: block;
    position: absolute;
    background-color:rgba(0,0,0,0.3);
    border: 5px solid var(--color-dark);
    z-index: 2;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.works-list li a:hover::before {
    background-color:rgba(0,0,0,0);
    border: 5px solid transparent;
}
.works-list li iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.works-list .list-img {
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
}
.works-list .list-img img {
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
.works-list .list-img {
    padding-top: 56.25%;
}
.works-list .list-img img {
    width:100%;
    position: absolute;
    left: 50%;
    top: 50%;
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
    /* WORKS 미디어쿼리 */
    @media all and (max-width:1200px) {
        .works-category {
            margin-bottom: var(--space-50)
        }
        .works-list {
            grid-gap: var(--space-40) var(--space-30);
        }
    }
    @media all and (max-width:1000px) {
        .works-category {
            margin-bottom: var(--space-30);
        }
        .works-category li {
            margin: 0 var(--space-15);
        }
        .works-category li a {
            font-size: var(--font-16)
        }
        .works-list {
            grid-template-columns: repeat(2, 1fr);
            grid-gap: var(--space-20);
        }
    }
    @media all and (max-width:640px) {
        .works-category {
            margin-bottom: var(--space-20);
            flex-wrap: wrap;
            justify-content: center;
        }
        .works-category li {
            margin: 0 var(--space-10) var(--space-5);
        }
        .works-category li a {
            font-size: var(--font-15);
        }
        .works-list {
            grid-template-columns: repeat(1, 1fr);
            grid-gap: var(--space-15) 0;
        }
    }