.main-wrap {
    margin: -4rem;
}

@media (max-width:800px) {

    .main-wrap {
        margin: -4rem -2rem;
    }
}



/* #region HERO */
.hero {
    height: 100vh;
    background: var(--offwhite);
    overflow: hidden;
}

.hero .intro-x {
    display: flex;
    z-index: 3;
    position: relative;
    gap: .5vh;

    top: 50%;
    transform: translate(0, -50%);
    align-items: center;
    justify-content: center;
}

.hero .intro-x .x-half {
    height: 20vh;
    width: 10vw;

    position: relative;

}

.hero .intro-x .blocker {
    height: 80vh;
    width: 50vw;
    position: absolute;
    z-index: -1;
    background-color: var(--offwhite);
    top: calc(50% - 40vh);
}

.hero .intro-x .x-left .blocker {

    right: 50%;
}

.hero .intro-x .x-right .blocker {

    left: 50%;
}


.hero .intro-x .x-half img {
    position: absolute;
    height: 100%;
    object-fit: contain;
    transition: opacity .3s;
    width: auto;
}

img.x-left-1,
img.x-right-1 {
    opacity: 1;
    z-index: 1;
}


img.x-left-2,
img.x-right-2 {
    opacity: 0;
    z-index: 2;
}

img.x-left-3,
img.x-right-3 {
    opacity: 0;
    z-index: 3;
}


.hero .intro-x .x-left img {
    right: 0
}



.hero .intro-x .x-right img {
    left: 0
}


.hero .center-words {

    max-width: 60vw;
    gap: 3vw;
    display: flex;
    opacity: 0;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
}

.hero .title-wrap {
    display: flex;
    line-height: 1;
    font-size: 6vw;
    justify-content: space-between;
}

.hero .center-words p {
    text-align: center;
}

.hero .title-wrap .right {
    text-align: right;
}

@media (max-width: 800px) {
    .hero .title-wrap {
        text-align: center;
        font-size: 9vw;
    }

    .hero .center-words {
        max-width: 60vw;
        gap: 5vw;
    }
}



/* animation */
.hero .intro-x {
    opacity: 0;
    transition: opacity .5s .2s, gap .7s var(--easing);
}

.x-half {
    transition: all .7s var(--easing)
}

.x-left {
    transform: translate(-20vw, 50vh) scale(1.3);
}

.x-right {
    transform: translate(20vw, -50vh) scale(1.3);
}

.hero .center-words {
    transition: opacity .7s cubic-bezier(0.43, 0, 0.14, 1), transform .7s cubic-bezier(0.43, 0, 0.14, 1);

}

.hero .title-wrap {
    gap: 20vw;
    transition: gap .7s cubic-bezier(0.43, 0, 0.14, 1);
}


/* seq1 */

.seq1 .intro-x {
    opacity: 1;
}


.seq1 .x-left {
    transform: translate(0) scale(1)
}

.seq1 .x-right {
    transform: translate(0) scale(1)
}



/* seq2 */

.seq2 img.x-left-2,
.seq2 img.x-right-2 {
    opacity: 1;
    z-index: 2;
}


/* seq2 */

.seq3 .intro-x {
    gap: calc(60vw - 8rem);
    transition: all .7s cubic-bezier(0.43, 0, 0.14, 1);
}

.seq3 .intro-x .x-half {
    height: 70vh;
    width: 20vw;
    transition: all .7s cubic-bezier(0.43, 0, 0.14, 1);
}

.seq3 img.x-left-3,
.seq3 img.x-right-3 {
    opacity: 1;
    z-index: 3;

}

.seq3 .hero .center-words {
    opacity: 1;

}

.seq3 .hero .title-wrap {
    gap: 2vw;
}

@media (max-width: 800px) {
    .seq3 .intro-x {
        gap: calc(60vw - 4rem);
    }
}


/* #endregion */



/* #region ABOUT */
.about {
    background-color: var(--red);
    padding: 8rem;
    margin: 0 auto;
}

.about-wrap .sml-title {
    color: var(--gray)
}

.about-wrap .h1 {
    display: inline-block;
    color: rgba(0, 0, 0, .2);
    -webkit-text-fill-color: rgba(0, 0, 0, .2);
    padding-bottom: 2rem;
    background-image: url("../assets/img/source1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-background-clip: text;
    background-clip: text;
}


.about-wrap .desc {
    width: 100%;
    border-top: 2px solid var(--lightgray);
    padding: 2rem 0;
    max-width: 50rem;
}

@media (max-width: 800px) {

    .about {
        padding: 6rem 3rem;
    }

    .about-wrap.gap20 {
        gap: 8rem;
    }
}

/* #endregion */


/* #region WORKS */
section.works {

    padding: 8rem;
    background-color: var(--black);
    color: var(--white);

}

section.works .dimmer-top {
    position: sticky;
    top: 0;
    height: 10rem;
    margin: -6rem -4rem;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

section.works .dimmer-bottom {
    position: sticky;
    bottom: 0;
    height: 10rem;
    margin: -6rem -4rem;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}


section.works .section-title {
    z-index: 3;
    position: relative;
}

section.works .list-wrap {
    padding-top: 8rem;
}

section.works .list {
    max-width: 50rem;
    margin: 0 auto;
    width: calc(100% - 66rem);
    position: relative;
}

section.works .list:nth-child(even) {
    flex-direction: row-reverse;
}

section.works .list .info {
    position: sticky;
    margin-left: 4rem;
    gap: .5rem;
    top: 40%;
    flex-shrink: 0;
    width: 30rem;

}

section.works .list:nth-child(even) .info {
    margin-left: 0;
    margin-right: 4rem;
}

section.works .list .info .sub-title {
    color: var(--gray)
}

section.works .list .info .tags {
    display: flex;
    gap: .5rem;
}

section.works .list .info .tags span {
    padding: .1rem .6rem;
    border-radius: .2rem;
    color: var(--darkgray);
    background-color: var(--lightgray);
    font-size: 1.2rem;
}

section.works .list .info .desc {
    padding: 2rem 0;
    line-height: 1.6;
}

section.works .list .info .links {
    width: 100%;
    border-top: 1px solid var(--lightgray);
    display: flex;
    gap: 1rem;
    padding-top: 2rem;
}

section.works .list .info .links a {
    height: 4rem;
    width: auto;
    display: block;

}

section.works .list .info .links a img {
    height: 100%;
    width: auto;
    border-radius: .3rem;
}

section.works .list .webtoon-img {
    width: 100%;
    position: relative;
    flex-shrink: 0;
}

section.works .list .webtoon-img img {
    width: 100%;
    height: auto;
}

.webtoon-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20rem;
    /* 필요에 따라 조절 */
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 1),
            rgba(0, 0, 0, 0));
}

.webtoon-img::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20rem;
    /* 필요에 따라 조절 */
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 1),
            rgba(0, 0, 0, 0));
}


@media (max-width: 1200px) {
    section.works {
        padding: 6rem;
    }

    section.works .list,
    section.works .list:nth-child(even) {
        width: 100%;
        max-width: none;
        gap: 4rem;
        margin: 0;
        align-items: flex-start;
        flex-direction: row-reverse;
    }

    section.works .list .webtoon-img {
        width: calc(100% - 44rem);
    }

    section.works .list .info {
        margin-left: 0;
        top: 10rem !important;
        width: 100%;
        max-width: 40rem;
    }

    section.works .list:nth-child(even) .info {
        margin: 0;
    }

}


@media (max-width: 800px) {
    section.works {
        padding: 6rem 3rem;
    }

    section.works .dimmer-top,
    section.works .dimmer-bottom {
        margin: -6rem -3rem;
        height: 8rem;
    }

    section.works .list,
    section.works .list:nth-child(even) {
        flex-direction: column-reverse;
    }

    section.works .list .webtoon-img {
        width: calc(100% + 6rem);
        margin: 0 -3rem;
    }

    section.works .list .info {
        position: relative;
        top: 0 !important;
    }


}

/* #endregion */

/* #region CTA */

section.cta {
    align-items: center;
    padding: 20rem;
    background: linear-gradient(to bottom, #000 0%, var(--red) 100%);
    color: var(--white);
    text-align: center;
    position: relative;


}

section.cta .bg-recruit {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    inset: 0;
    transition: opacity .3s;
    z-index: 0;
    background-image: url("../assets/img/bg-recruit.jpg");
    background-size: cover;
    mix-blend-mode: multiply;
    -webkit-mix-blend-mode: multiply;

}

section.cta .bg-works {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    inset: 0;
    transition: opacity .3s;
    z-index: 0;
    background-image: url("../assets/img/bg-works.jpg");
    background-size: cover;
    mix-blend-mode: multiply;
    -webkit-mix-blend-mode: multiply;

}

section.cta>.flex {
    padding-top: 30rem;
    z-index: 1;
    position: relative;
}

section.cta .flex {
    align-items: center;
}

section.cta .btn-wrap {
    width: 100%;
}

section.cta .btn-wrap>* {
    width: 50%;
    padding: 5rem 2rem;
}

section.cta .btn-wrap>*:first-child {
    border-right: 1px solid var(--white)
}


@media (max-width: 1200px) {

    section.cta {
        align-items: center;
        padding: 8rem;
    }
}

@media (max-width: 800px) {
    section.cta {
        padding: 6rem 3rem;
    }

    section.cta>.flex {
        padding-top: 10rem;
        padding-bottom: 0rem;
    }

    section.cta .btn-wrap>* {
        width: 100%;
        padding: 6rem 0;
    }


    section.cta .btn-wrap {
        width: 100%;
        flex-direction: column;
    }

    section.cta .btn-wrap>*:first-child {
        border-right: 0;
        border-bottom: 1px solid var(--white);
    }
}

/* #endregion */