@charset "utf-8";

.work {
    padding: min(26.2rem, 13.65vw) 0 min(15rem, 7.81vw);
}
@media (max-width: 640px) {
    .work {
        padding: max(9.95rem, 26.53vw) 0 max(9.30rem, 24.80vw);
    }
}

.work__header .work__header-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.work__header-title {
    font-family: var(--lang-en);
    font-variation-settings: 'wght' var(--weight-700);
    font-size: var(--font-size-60);
    line-height: var(--lh-120);
}

.work__header .red-dot {
    width: var(--dot-size-22);
    margin-left: var(--dot-margin-6);
}

.work__header-right {
    position: relative;
}
.work__search {
    width: min(44.00rem, 22.92vw);
    background-color: var(--ir-color-light-gray);
    padding: min(2.00rem, 1.04vw) min(8.50rem, 4.43vw) min(2.00rem, 1.04vw) min(3.00rem, 1.56vw);
    border-radius: min(3.80rem, 1.98vw);
    color: var(--ir-color-black);
    font-variation-settings: 'wght' var(--weight-600);
    font-size: var(--font-size-20);
    line-height: var(--lh-120);
    border: 0.1rem solid transparent;
    transition: border .3s;
}
.work__search::placeholder {
    font-family: var(--lang-en);
    color: var(--ir-color-black);
    transition: color .2s;
}
.work__search:focus {
    /* border: 0.1rem solid var(--ir-color-dark-gray); */
}
.work__search:focus::placeholder {
    color: transparent;
}

.work__search-btn {
    position: absolute;
    top: 50%;
    right: min(2.80rem, 1.46vw);
    transform: translateY(-50%);
    /* width: min(3.70rem, 1.93vw); */
    aspect-ratio: 1/1;
    background-image: url('../../image/icon/icon_work_search.svg');
    background-size: min(3.70rem, 1.93vw);
    background-repeat: no-repeat;
    background-position: center center;
    padding: 2rem;
}

.work__no-result {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-variation-settings: 'wght' var(--weight-500);
    font-size: var(--font-size-20);
    line-height: var(--lh-120);
    text-align: center;
    color: var(--ir-color-black);
    width: 100%;
}
.work__no-result .work__search-keyword {
    font-variation-settings: 'wght' var(--weight-700);
    display: inline;
    margin-right: min(0.50rem, 0.26vw);
}

@media (max-width: 640px) {
    .work__header .work__header-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .work__header-title {
        font-size: var(--font-size-32-m);
        font-variation-settings: 'wght' var(--weight-600);
        margin-bottom: max(2.00rem, 5.33vw);
    }
    .work__header .red-dot {
        width: var(--dot-size-10-m);
        margin-left: var(--dot-margin-2-m);
    }

    .work__header-right {
        width: 100%;
    }
    .work__search {
        width: 100%;
        font-size: var(--font-size-10-m);
        padding: max(1.00rem, 2.67vw) max(4.20rem, 11.20vw) max(1.00rem, 2.67vw) max(1.80rem, 4.80vw);
        border-radius: max(3.20rem, 8.53vw);
    }
    
    .work__search-btn {
        right: max(1.20rem, 3.20vw);
        background-size: max(2.30rem, 6.13vw);
    }

    .work__no-result {
        font-size: var(--font-size-10-m);
    }
    .work__no-result .work__search-keyword {
        margin-right: max(0.50rem, 1.33vw);
    }
}

.work__category {
    /* margin-top: 5.5rem;
    margin-bottom: 8rem; */
    margin-top: min(5.5rem, 2.86vw);
    margin-bottom: min(8rem, 4.17vw);
}
@media (max-width: 640px) {
    .work__category {
        margin: max(1.70rem, 4.53vw) 0 max(3.90rem, 10.40vw);
    }
}
.work__category .work__category-list {
    display: inline-flex;
    max-width: 100%;
    flex-wrap: wrap;
}
.work__category .work__category-list .work__category-item {
    display: inline-block;
    background-color: var(--ir-color-white);
    color: var(--ir-color-black);
    margin-right: min(2.50rem, 1.30vw);
}
@media (max-width: 640px) {
    .work__category .work__category-list .work__category-item {
        margin-right: max(0.80rem, 2.13vw);
        margin-bottom: max(0.80rem, 2.13vw);
    }
}
.work__category .work__category-list .work__category-link {
    font-family: var(--lang-en);
    font-variation-settings: 'wght' var(--weight-500);
    font-size: var(--font-size-20);
    line-height: var(--lh-120);
}
@media (max-width: 640px) {
    .work__category .work__category-list .work__category-link {
        font-size: var(--font-size-10-m);
    }
}
.work__category .work__category-list .work__category-link.active {
    background-color: var(--ir-color-black);
    color: var(--ir-color-white);
    border: 0.1rem solid var(--ir-color-black);
}

.work__project-list {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: min(7.10rem, 3.70vw) min(1.95rem, 1.02vw);
    margin-bottom: min(7.10rem, 3.70vw);

    min-height: min(47.50rem, 24.74vw);
}
@media all and (min-width: 751px) and (max-width: 1024px) {
    .work__project-list {
        grid-template-columns: 1fr 1fr;
        min-height: max(37.20rem, 99.20vw);
    }
}
@media (max-width: 640px) {
    .work__project-list {
        grid-template-columns: 1fr;
        grid-gap: 13.33vw;
        margin-bottom: max(5.00rem, 13.33vw);
    }
}

.work__project-link {
    width: 100%;
}
.work__thumbnail {
    position: relative;
    margin-bottom: min(2.50rem, 1.30vw);
    overflow: hidden;
}
@media (max-width: 640px) {
    .work__thumbnail {
        margin-bottom: max(1.00rem, 2.67vw);
    }
}
.work__thumbnail .work__thumbnail-front {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
    transition: opacity .5s;
}
@media (min-width: 641px) {
    .work__project-item:hover .work__thumbnail-front {
        visibility: visible;
        opacity: 1;
    }
}


.work__awards-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: min(1.00rem, 0.52vw);
    padding-top: min(2.00rem, 1.04vw);
    padding-right: min(2.50rem, 1.30vw);
}
.work__awards-list .work__awards-item {
    width: min(3.20rem, 1.67vw);
}
@media (max-width: 640px) {
    .work__awards-list {
        gap: max(0.60rem, 1.60vw);
        padding-top: max(1.00rem, 2.67vw);
        padding-right: max(1.00rem, 2.67vw);
    }
    .work__awards-list .work__awards-item {
        width: max(2.00rem, 5.33vw);
    }
}


.work__project-info .work__project-type {
    color: var(--ir-color-dark-gray);
    margin-bottom: min(0.60rem, 0.31vw);

    font-family: var(--lang-en);
    font-variation-settings: 'wght' var(--weight-500);
    font-size: var(--font-size-16);
    line-height: var(--lh-120);
}
@media (max-width: 640px) {
    .work__project-info .work__project-type {
        font-variation-settings: 'wght' var(--weight-300);
        font-size: var(--font-size-12-m);
        margin-bottom: max(0.40rem, 1.07vw);
    }
}

.work__project-info .work__project-title {
    font-family: var(--lang-ko);
    font-variation-settings: 'wght' var(--weight-400);
    font-size: var(--font-size-20);
    line-height: var(--lh-135);
    letter-spacing: var(--ls-normal);
}
@media (max-width: 640px) {
    .work__project-info .work__project-title {
        font-size: var(--font-size-18-m);
        line-height: var(--lh-135);
    }
}
.work__project-item {
    opacity: 0;
    transform: translateY(5rem); 
    transition: opacity .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1);
}
.work__project-item.show {
    opacity: 1;
    transform: translateY(0);
}
.work__project-item .work__project-category {
    position: relative;
    display: inline-block;
}
.work__project-item .work__project-category + .work__project-category {
    padding-left: 1rem;
}
.work__project-item .work__project-category + .work__project-category::before {
    content: '-';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    color: var(--ir-color-dark-gray);
}




.work__project-more {
    font-family: var(--lang-en);
    font-variation-settings: 'wght' var(--weight-500);
    font-size: var(--font-size-20);
    line-height: var(--lh-120);
    margin: 0 auto;
    padding: min(1.04vw, 2rem) min(2.08vw, 4rem);
}
@media (max-width: 640px) {
    .work__project-more {
        font-size: var(--font-size-14-m);
        padding: 3.20vw 6.40vw;
    }
}














/* ///////////////////////////////////// */
.project__header {
    position: relative;
    width: 100%;
    aspect-ratio: auto 1920/940;
    max-height: 88rem;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: var(--lang-ko);
    font-variation-settings: 'wght' var(--weight-600);
    font-size: var(--font-size-100);
    line-height: var(--lh-110);
}
@media (max-width: 640px) {
    .project__header {
        aspect-ratio: auto 375/265;
        font-size: var(--font-size-32-m);
    }
}

.project__header-title {
    position: relative;
    text-align: center;
    color: var(--ir-color-white);
    z-index: 1;

    display: flex;
    flex-direction: row;
    /* align-items: flex-end; */
    align-items: baseline;
}
.project__header-title .red-dot {
    width: var(--dot-size-28);
    margin-left: var(--dot-margin-10);
    vertical-align: unset;
}

.project__header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.project__header-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--ir-color-black);
    opacity: 0.3;
}
.project__header-bg img {
    width: 100%;
    height: 100%;
    object-position: center center;
}



.project__content {
    padding: min(11.90rem, 6.20vw) 0 min(22.00rem, 11.46vw);
}
@media (max-width: 640px) {
    .project__content {
        padding: max(3.00rem, 8.00vw) 0 max(8.64rem, 23.04vw);
    }
}

.project__overview-title {
    /* padding-bottom: 5rem;
    margin-bottom: 5rem; */
    /* border-bottom: 0.1rem solid var(--ir-color-dark-gray); */
}
@media (max-width: 640px) {
    .project__overview-title {
        /* padding-bottom: 8vw;
        margin-bottom: 9.33vw; */
    }
    .project__header-title .red-dot {
        width: var(--dot-size-10-m);
        margin-left: var(--dot-margin-2-m);
    }
}
.project__sortation-name  {
    color: var(--ir-color-dark-gray);
    margin-bottom: min(1.00rem, 0.52vw);

    font-family: var(--lang-en);
    font-variation-settings: 'wght' var(--weight-500);
    font-size: var(--font-size-14);
    line-height: var(--lh-120);
}
@media (max-width: 640px) {
    .project__sortation-name {
        margin-bottom: max(0.20rem, 0.53vw);
        font-size: var(--font-size-10-m);
    }
}
.project__overview-name {
    font-family: var(--lang-ko);
    font-variation-settings: 'wght' var(--weight-600);
    font-size: var(--font-size-48);
    line-height: var(--lh-120);
}
@media (max-width: 640px) {
    .project__overview-name {
        font-variation-settings: 'wght' var(--weight-700);
        font-size: var(--font-size-32-m);
    }
}
.project__desc-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
@media (max-width: 640px) {
    .project__desc-wrap {
        flex-direction: column-reverse;
    }
}
.project__sortation-group {
    display: inline-block;
}
.project__sortation-group + .project__sortation-group {
    padding-left: min(4.00rem, 2.08vw);
}
@media (max-width: 640px) {
    .project__sortation-group:nth-child(4) {
        padding-left: 0;
    }
}

.project__overview-desc {
    margin-top: min(5.50rem, 2.86vw);
}
.project__desc-bottom {
    padding: min(3.00rem, 1.56vw) 0 min(5.50rem, 2.86vw);
    border-bottom: 0.1rem solid var(--ir-color-medium-gray);
    /* margin-top: 5rem; */
    display: flex;
}

.project__sortation-group .project__category-item {
    position: relative;
}
.project__sortation-group .project__category-item + .project__category-item {
    padding-left: 1rem;
}
.project__sortation-group .project__category-item + .project__category-item::before {
    content: '-';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
@media (max-width: 640px) {
    .project__desc-bottom {
        margin-top: max(2.50rem, 6.67vw);
        display: flex;
        flex-wrap: wrap;
        gap: max(0.70rem, 1.87vw) max(2.50rem, 6.67vw);
        border: none;
        padding: 0;
        /* justify-content: space-between; */
    }
    .project__overview-desc {
        margin-top: 0;
    }
    .project__sortation-group + .project__sortation-group {
        padding-left: 0;
    }
    .project__sortation-group:last-child {
        width: 100%;
        margin-top: 1.87vw;
    }
}


.project__overview-info {
    width: min(86.80rem, 45.21vw);
}
@media (max-width: 640px) {
    .project__overview-info {
        width: 100%;
    }
}

.project__overview-brief .project__brief-desc {
    word-break: keep-all;
    font-family: var(--lang-ko);
}
@media (max-width: 640px) {
    .project__overview-brief {
        border-top: 0.1rem solid var(--ir-color-medium-gray);
        margin-top: max(3.00rem, 8.00vw);
        padding-top: max(3.00rem, 8.00vw);
    }
}
.project__brief-desc {
    font-family: var(--lang-en);
    font-variation-settings: 'wght' var(--weight-400);
    font-size: var(--font-size-20);
    line-height: var(--lh-135);
    letter-spacing: var(--ls-normal);
}
@media (max-width: 640px) {
    .project__brief-desc {
        font-variation-settings: 'wght' var(--weight-500);
        font-size: var(--font-size-12-m);
        line-height: var(--lh-135);
    }
}
.project__overview-service {
    width: min(42.50rem, 22.14vw);
}
@media (max-width: 640px) {
    .project__overview-service {
        width: 100%;
        margin-top: max(2.50rem, 6.67vw);
    }
}
.project__overview-service .project__keyword {
    display: inline-flex;
    flex-wrap: wrap;
    gap: min(1.10rem, 0.57vw) min(1.00rem, 0.52vw);

    font-family: var(--lang-en);
    font-variation-settings: 'wght' var(--weight-500);
    font-size: var(--font-size-16);
    line-height: var(--lh-120);
}
@media (max-width: 640px) {
    .project__overview-service  .project__keyword {
        padding: max(0.70rem, 1.87vw) 0 0 0;
        gap: max(0.80rem, 2.13vw) max(0.60rem, 1.60vw);
        font-size: var(--font-size-10-m);
    }
}

.project__result-group {
    margin-top: 2.08vw;
}
.project__result-group .project__result-view {
    width: 33.91vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1.04vw;
}
.project__result-group .project__result-num {
    font-family: var(--lang-en);
    font-variation-settings: 'wght' var(--weight-600);
    font-size: var(--font-size-100);
    line-height: var(--lh-120);
}
.project__result-group .project__result-desc {
    font-family: var(--lang-en);
    font-variation-settings: 'wght' var(--weight-500);
    font-size: var(--font-size-16);
    line-height: var(--lh-120);
    color: var(--ir-color-dark-gray);
}

@media (max-width: 640px) {
    .project__result-group .project__result-view {
        width: 100%;
        display: grid;
        justify-content: space-between;
        gap: 8vw 10.67vw;
        grid-template-columns: 1fr 1fr;
    }

    .project__result-group .project__result-num {
        font-size: var(--font-size-60-m);
    }
    .project__result-group .project__result-desc {
        font-size: var(--font-size-10-m);
    }
}

.project__result-list {
    display: flex;
    flex-direction: row;
    gap: min(0.90rem, 0.47vw);
    margin-top: min(4.00rem, 2.08vw);
}
.project__result-list .project__awards {
    width: min(3.60rem, 1.88vw);
}
@media (max-width: 640px) {
    .project__result-list {
        gap: max(0.50rem, 1.33vw);
        margin-top: max(3.00rem, 8.00vw);
    }
    .project__result-list .project__awards {
        width: max(3.00rem, 8.00vw) ;
    }
}

.project__showcase {
    padding: min(20.00rem, 10.42vw) 0 min(25.00rem, 13.02vw);
}
@media (max-width: 640px) {
    .project__showcase {
        padding: max(11.10rem, 29.60vw) 0 max(11.20rem, 29.87vw);
    }
}
.project__showcase.content-standard {
    /* width: 100%; */
}
.project__showcase .project__showcase-item {
    display: block;
    width: 100%;
    height: fit-content;
    text-align: right;
}
.project__showcase .project__showcase-item iframe,
.project__showcase .project__showcase-item video {
    width: 100%;
    max-width: 100%;
    aspect-ratio: auto 1460/820;
}

.project__showcase .project__showcase-item + .project__showcase-item {
    margin-top: min(13.00rem, 6.77vw);
}

@media (max-width: 640px) {
    .project__showcase .project__showcase-item {
        border-radius: 0;
    }
    .project__showcase .project__showcase-item + .project__showcase-item {
        margin-top: max(10.00rem, 26.67vw);
    }
}

.project__showcase .project__showcase-play {
    width: 100%;
    height: 100%;
    position: relative;
}
.project__showcase .project__showcase-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    cursor: pointer;
    z-index: 1;
}

.project__showcase .project__showcase-item .project__showcase-caption {
    margin-top: min(2.00rem, 1.04vw);
    color: var(--ir-color-dark-gray);

    font-family: var(--lang-ko);
    font-variation-settings: 'wght' var(--weight-500);
    font-size: var(--font-size-16);
    line-height: var(--lh-140);
    letter-spacing: var(--ls-normal);
}




.project-motion-line {
    overflow: hidden;
}
.project-motion-line * {
    opacity: 0;
    transform: translateY(100px);
}








.project__next {
    /* padding: 5.5rem 0 7rem; */
    /* border-top: 0.1rem solid var(--ir-color-dark-gray); */
}
.project__next .red-dot {
    width: var(--dot-size-22);
    margin-left: var(--dot-margin-6);
}
@media (max-width: 640px) {
    .project__next {
        /* width: 87.20%; */
    }
    .project__next .red-dot {
        width: var(--dot-size-8-m);
        margin-left: var(--dot-margin-2-m);
    }
}
.project__next .project__next-title {
    margin-bottom: min(8.00rem, 4.17vw);

    font-family: var(--lang-en);
    font-variation-settings: 'wght' var(--weight-700);
    font-size: var(--font-size-60);
    line-height: var(--lh-120);
}

.project__next .project__next-link {
    width: 100%;
}
@media (max-width: 640px) {
    .project__next .project__next-title {
        margin-bottom: max(2.00rem, 5.33vw);
        font-size: var(--font-size-32-m);
        font-variation-settings: 'wght' var(--weight-600);
    }
}
.project__next .project__next-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: min(1.95rem, 1.02vw);
}
@media (max-width: 640px) {
    .project__next .project__next-list {
        grid-template-columns: 1fr 1fr;
        gap: max(0.70rem, 1.87vw);
    }
    .project__next .project__next-list .project__next-item:last-child {
        display: none;
    }
}
.project__next .project__next-thumbnail {
    position: relative;
}
.project__next .project__thumbnail-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
    transition: opacity .5s;
}
.project__next-link:hover .project__thumbnail-front {
    visibility: visible;
    opacity: 1;
}
.project__next .project__next-info {
    margin-top: min(2.50rem, 1.30vw);
}
@media (max-width: 640px) {
    .project__next .project__next-info {
        margin-top: max(1.00rem, 2.67vw);
    }
}
.project__next .project__next-category {
    margin-bottom: min(0.50rem, 0.26vw);
    color: var(--ir-color-dark-gray);

    font-family: var(--lang-en);
    font-variation-settings: 'wght' var(--weight-500);
    font-size: var(--font-size-16);
    line-height: var(--lh-120);
}
@media (max-width: 640px) {
    .project__next .project__next-category {
        margin-bottom: max(0.30rem, 0.80vw);
        font-variation-settings: 'wght' var(--weight-300);
        font-size: var(--font-size-12-m);
    }
}
.project__awards-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.52vw;
    padding-top: 1.3vw;
    padding-right: 1.04vw;
}
.project__awards-item {
    width: min(3.20rem, 1.67vw);
}


.project__next .project__category-item {
    position: relative;
}
.project__next .project__category-item + .project__category-item {
    padding-left: 1rem;
}
.project__next .project__category-item + .project__category-item::before {
    content: '-';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.project__next .project__info-title {
    font-family: var(--lang-ko);
    font-variation-settings: 'wght' var(--weight-400);
    font-size: var(--font-size-20);
    line-height: var(--lh-135);
    letter-spacing: var(--ls-normal);
    word-break: keep-all;
}
@media (max-width: 640px) {
    .project__awards-item {
        width: max(2.00rem, 5.33vw);
    }
    .project__next .project__info-title {
        font-size: var(--font-size-14-m);
        line-height: var(--lh-130);
    }
}