@charset "UTF-8";
@import "home-header.css";
@import "home-footer.css";
/* common */
h2.medium {
    margin-bottom: 0;
}

#dim-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    z-index: 99;
    transition: background 0.1s linear;
}

/* hero */
section.landing .hero {
    justify-content: space-between;
    height: 1620px;
    margin-top: 126px;
    padding-bottom: 0 !important;
}

.landing .hero h2.large {
    /*랜딩 메인페이지 SEO 개선을 위해 적용*/
    font-size: 72px;
    margin-bottom: 32px;
}

.landing .hero h1 {
    /*랜딩 메인페이지 SEO 개선을 위해 적용*/
    font-size: 32px;
    font-weight: 600;
    line-height: 140%;
    letter-spacing: -0.3px;
    color: #000;
    margin-bottom: 30px;
}

.landing h2.sub {
    /*랜딩 메인페이지 SEO 개선을 위해 적용*/
    font-size: 22px;
    font-weight: 600;
    line-height: 140%;
    letter-spacing: -0.44px;
    color: #5e51f0;
    margin-bottom: 12px;
}

.landing h3.medium {
    /*랜딩 메인페이지 SEO 개선을 위해 적용*/
    font-size: 40px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -1.2px;
    color: #000;
    margin-bottom: 24px;
    text-align: center;
}

.landing h4.small {
    /*랜딩 메인페이지 SEO 개선을 위해 적용*/
    font-size: 28px;
    font-weight: 700;
    line-height: 130%;
    color: #000;
    margin-bottom: 16px;
}

.landing .page.hero .hero-content-wrapper {
    position: relative;
    padding: 220px 0;
    width: 100%;
    max-width: 1440px;
    z-index: 3;
}

.landing .hero .btn {
    font-size: 18px;
    line-height: 140%;
    letter-spacing: -0.004px;
    padding: 14px 24px;
    border: 0;
}

.hero .floating-image-wrapper {
    opacity: 1;
}

.hero .floating-img {
    position: absolute;
}

.hero picture.floating-img.image img,
.hero .floating-img.image {
    width: 330px;
    top: 70px;
    left: 20px;
}

.hero .floating-img.design {
    width: 216px;
    top: 130px;
    right: 160px;
}

.hero .floating-img.prompt {
    width: 460px;
    left: 212px;
    bottom: 52px;
}

.hero picture.floating-img.product img,
.hero .floating-img.product {
    width: 267px;
    right: 225px;
    bottom: -20px;
}

.hero .floating-img.color {
    width: 267px;
    right: 36px;
    bottom: 244px;
    z-index: 1;
}

.hero .video-container {
    justify-content: flex-end;
    position: relative;
    width: 100%;
    height: 900px;
    background-image: image-set(
            url("/resources/images/home/landing/home-hero-bg.webp") 1x,
            url("/resources/images/home/landing/home-hero-bg.png") 1x
    );
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.hero .video-container .video-bg {
    width: 1600px;
    position: absolute;
    top: -210px;
    z-index: 1;
}

.hero .video-wrapper {
    position: absolute;
    width: 100%;
    bottom: 340px;
}

.hero .video-wrapper .hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1140px;
    width: 100%;
    border-radius: 16px;
    display: block;
    object-fit: cover;
    clip-path: inset(1px 1px 10px 1px);
    z-index: 3;
}

.hero .video-wrapper .video-cover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 20px 20px 73px 0 rgba(86, 30, 160, 0.19), 0 -0.891px 2px 0 rgba(48, 12, 98, 0.20) inset, 0 0.9px 0.9px 0 rgba(255, 255, 255, 0.4) inset;
    clip-path: inset(-100px -100px 20px -100px);
    z-index: 2;
}

/* template */
section.template {
    padding: 200px 0 240px;
}

.template .slide-container {
    position: relative;
    margin-top: 60px;
}

.template .slick-list {
    overflow: unset;
}

.template .fade.white {
    position: absolute;
    width: 220px;
    height: 530px;
    margin-top: 60px;
    z-index: 10;
}

.template .fade.white:nth-of-type(1) {
    left: 0;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 4.3%, #FFF 102.2%);
}

.template .fade.white:nth-of-type(2) {
    right: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 4.3%, #FFF 102.2%);
}

.template .slide-wrapper {
    max-width: 2240px;
}

.template .slide-wrapper .slide {
    text-align: center;
}

.template .slide-wrapper .slide img {
    width: 375px;
    display: inline-block;
    transition: transform 100ms ease-in-out;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 10px 10px 50px 0 rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    box-sizing: border-box;
}

.template .slide-wrapper .slide > * > picture > img,
.template .slide-wrapper .slide > * > img {
    transform: scale(0.86);
}

.template .slide-wrapper .slick-center > * > picture > img,
.template .slide-wrapper .slick-center > * > img {
    transform: scale(1);
}

.template .slide-wrapper .slick-arrows-wrapper {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 60px;
}

.template .slide-wrapper .slick-arrow {
    position: static;
    top: 120%;
    width: 48px;
    height: 48px;
    padding: 0 8px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #e3e4e9;
    background-color: #fff;
}

.template .slide-wrapper .slick-arrow:before {
    font-size: 18px;
    color: #333;
    content: "\e966";
    font-family: 'sixshop' !important;
    speak: never;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    opacity: 1;
}

.template .slide-wrapper .slick-prev {
    transform: rotate(90deg);
}

.template .slide-wrapper .slick-next {
    transform: rotate(270deg);
}

/* advanced */
section.advanced {
    position: relative;
    overflow: unset;
    padding: 230px 40px;
    border-radius: 60px;
    margin: 0 80px;
    z-index: 100;
    background-color: #000;
    background-image: image-set(
            url("/resources/images/home/landing/home-advanced-bg.webp") 1x,
            url("/resources/images/home/landing/home-advanced-bg.jpg") 1x
    );
    background-size: auto;
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

section.advanced.active {
    margin: 0 !important;
    border-radius: 0 !important;
}

/*.advanced .bg-wrapper {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    border-radius: 60px;*/
/*    z-index: -1;*/
/*    pointer-events: none;*/
/*    overflow: visible;*/
/*    background-color: #000;*/
/*    mask-image: linear-gradient(black, black);*/
/*    -webkit-mask-image: linear-gradient(black, black);*/
/*    will-change: border-radius;*/
/*}*/

.advanced .bg-wrapper .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: none;
    z-index: -1;
}

.advanced h3.medium,
.advanced h4.small,
.advanced .card {
    color: #fff;
}

.advanced .card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 100px;
    position: relative;
    z-index: 120;
}

.advanced .card:first-child {
    top: calc(160px + 34px * 1);
    z-index: calc(10 + 10 * 1);
}

.advanced .card:nth-child(2) {
    top: calc(160px + 34px * 2);
    z-index: calc(10 + 10 * 2);
}

.advanced .card:nth-child(3) {
    top: calc(160px + 34px * 3);
    z-index: calc(10 + 10 * 3);
}

.advanced .card:nth-child(4) {
    top: calc(160px + 34px * 4);
    z-index: calc(10 + 10 * 4);
}

.advanced .card:nth-child(5) {
    top: calc(160px + 34px * 5);
    z-index: calc(10 + 10 * 5);
}

.advanced .card {
    will-change: transform;
    position: sticky;
    display: flex;
    width: 100%;
    max-width: 1360px;
    height: 480px;
    padding: 0 60px 0 80px;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%), linear-gradient(0deg, rgba(24, 24, 24, 0.80) 0%, rgba(24, 24, 24, 0.80) 100%), rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(30px);
}

.advanced .card .text-wrapper {
    padding: 80px 0;
}

.advanced .card .text-wrapper .badge {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0.2px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.10);
}

.advanced .card .text-wrapper h2 {
    text-align: left;
    margin-bottom: 20px;
}

.advanced .card .text-wrapper .desc {
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
}

.advanced .card .text-wrapper .text-btn-wrapper {
    margin-top: 40px;
}

.advanced .card img {
    width: 680px;
}

/* feature */
section.feature {
    background-color: #fff;
}

.feature .card-wrapper {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.feature .card {
    display: flex;
    height: 450px;
}

.feature .card .text-wrapper {
    width: 460px;
    height: 330px;
    padding: 60px 80px;
    box-sizing: content-box;
}

.feature .card .text-wrapper .badge {
    display: inline-block;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0.2px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(0, 0, 0, 0.05);
}

.feature .card .text-wrapper h2 {
    text-align: left;
    margin-bottom: 24px;
}

.feature .card .text-wrapper .desc {
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    color: #45474c;
    margin-bottom: 40px;
}

.feature .card img {
    width: 760px;
}

.feature .card:nth-child(odd) .text-wrapper {
    order: 2;
}

.feature .card:nth-child(odd) img {
    order: 1;
}

/* brand */
section.brand {
    background-color: #fbfbfb;
}

.brand .desc {
    margin: 24px 0 80px;
}

.brand .brand-sites-wrapper.screen-desktop {
    display: flex;
}

.brand .brand-sites-wrapper {
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.brand .brand-sites-wrapper .scroll-row {
    display: flex;
    will-change: transform;
    gap: 18px;
    white-space: nowrap;
}

.brand .brand-sites-wrapper .brand-sites {
    height: 190px;
    flex-shrink: 0;
}

.brand .brand-sites-wrapper .fade {
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.brand .brand-sites-wrapper .fade-left {
    left: 0;
    background: linear-gradient(to right, #fff, transparent);
}

.brand .brand-sites-wrapper .fade-right {
    right: 0;
    background: linear-gradient(to left, #fff, transparent);
}


/* support */
section.support {
    background-image: url('/resources/images/home/landing/home-support-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.support .card-wrapper {
    flex-direction: unset;
    gap: 24px;
}

.support .card {
    gap: 16px;
    width: 480px;
    padding: 60px 24px;
    margin-top: 80px;
    background-color: #fff;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.support .card img {
    width: 64px;
}

.support .card .title {
    font-size: 22px;
    font-weight: 600;
    line-height: 140%;
    letter-spacing: -0.44px;
}

.support .card .desc {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    color: #85878e;
}

.support .card .btn {
    padding: 10px 20px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
    color: #000;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.10);
}

@media screen and (max-width: 1250px) {
    /* hero */
    .landing section.hero {
        justify-content: unset;
        margin-top: 107px;
    }

    .landing .hero h2.large {
        /*랜딩 메인페이지 SEO 개선을 위해 적용*/
        font-size: 36px;
        margin-bottom: 24px;
    }

    .landing .hero h1 {
        /*랜딩 메인페이지 SEO 개선을 위해 적용*/
        font-size: 22px;
        letter-spacing: -0.3px;
        margin-bottom: 20px;
    }

    .landing h2.sub {
        /*랜딩 메인페이지 SEO 개선을 위해 적용*/
        font-size: 18px;
        letter-spacing: -0.36px;
        margin-bottom: 8px;
    }

    .landing h3.medium {
        /*랜딩 메인페이지 SEO 개선을 위해 적용*/
        font-size: 28px;
        letter-spacing: -0.84px;
        margin-bottom: 16px;
    }

    .landing h4.small {
        /*랜딩 메인페이지 SEO 개선을 위해 적용*/
        font-size: 22px;
        margin-bottom: 16px;
    }

    .landing .page.hero .hero-content-wrapper {
        padding: 80px 0 0;
    }

    .landing .hero .btn {
        font-size: 16px;
        line-height: 160%;
        padding: 10px 20px;
    }

    .hero .video-container {
        height: 100%;
        justify-content: flex-start;
    }

    .hero .video-container .video-bg {
        width: 100%;
        max-width: 788px;
        min-width: 440px;
        top: 0;
    }

    .hero .video-wrapper {
        position: relative;
        width: 100%;
        bottom: unset;
    }

    .hero .video-wrapper .hero-video {
        width: calc(100% - 40px);
        border-radius: 8px;
        clip-path: inset(1px);
    }

    .hero .video-wrapper .video-cover {
        width: calc(100% + 5px);
        height: calc(100% + 5px);
        border-radius: 8px;
        clip-path: unset;
    }

    /* template */
    section.template {
        padding: 100px 20px 40px;
    }

    .template .slide-container {
        margin-top: 40px;
    }

    .template .slide-wrapper {
        max-width: 760px;
        margin-bottom: 140px;
    }

    .template .slide-wrapper .slide img {
        width: 335px;
    }

    .template .slide-wrapper .slick-dots {
        display: none !important;
    }

    .template .slide-wrapper .slick-progress-wrapper {
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background-color: rgba(23, 23, 25, 0.07);
        border-radius: 70px;
        overflow: hidden;
    }

    .template .slide-wrapper .slick-progress-bar {
        height: 100%;
        width: 12px;
        background-color: #000;
        border-radius: 50px;
        position: relative;
        left: 0;
    }

    .template .slide-wrapper .slick-arrow:before {
        font-size: 18px;
        color: #333;
        content: "\e966";
        font-family: 'sixshop' !important;
        speak: never;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        opacity: 1;
    }

    .template .slide-wrapper .slick-prev {
        transform: rotate(90deg);
    }

    .template .slide-wrapper .slick-next {
        transform: rotate(270deg);
    }

    /* advanced */
    section.advanced {
        overflow: unset;
        padding: 100px 10px;
        background-image: unset;
        margin: 0;
        border-radius: 0;
        background: linear-gradient(175deg, rgba(0, 0, 0, 1) 0%, rgba(71, 47, 161, 1) 77%, rgba(70, 83, 249, 1) 100%);
    }

    .advanced .bg-wrapper .bg {
        object-fit: cover;
    }

    .advanced .card-wrapper {
        margin: 40px 20px 0;
    }

    .advanced .card:first-child {
        top: calc(120px + 20px * 1);
    }

    .advanced .card:nth-child(2) {
        top: calc(120px + 20px * 2);
    }

    .advanced .card:nth-child(3) {
        top: calc(120px + 20px * 3);
    }

    .advanced .card:nth-child(4) {
        top: calc(120px + 20px * 4);
    }

    .advanced .card:nth-child(5) {
        top: calc(120px + 20px * 5);
    }

    .advanced .card {
        flex-direction: column;
        width: 100%;
        max-width: 420px;
        height: 100%;
        padding: 0;
    }

    .advanced .card .text-wrapper {
        padding: 32px 32px 0;
    }

    .advanced .card .text-wrapper .badge {
        margin-bottom: 16px;
        font-size: 12px;
        line-height: 140%;
        padding: 4px 6px;
        border-radius: 6px;
    }

    .advanced .card .text-wrapper h2 {
        margin-bottom: 16px;
    }

    .advanced .card .text-wrapper .desc {
        font-size: 14px;
    }

    .advanced .card .text-wrapper .text-btn-wrapper {
        margin-top: 16px;
    }

    .advanced .card img {
        width: 100%;
    }


    /* feature */
    section.feature {
        overflow: unset;
    }

    .feature .card-wrapper {
        align-items: center;
        gap: 32px;
        width: 100%;
        margin-top: 40px;
    }

    .feature .card {
        flex-direction: column;
        width: 100%;
        max-width: 360px;
        height: 524px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 24px;
        will-change: transform;
        position: sticky;
    }

    .feature .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, var(--bg-opacity, 0));
        pointer-events: none;
    }

    .feature .card:nth-child(1) {
        background-image: image-set(
                url('/resources/images/home/landing/home-feature-card-commerce-mobile-bg.webp') 1x,
                url('/resources/images/home/landing/home-feature-card-commerce-mobile-bg.jpg') 1x
        );
        top: calc(80px + 20px * 1);
        z-index: calc(10 + 10 * 1);
    }

    .feature .card:nth-child(2) {
        background-image: image-set(
                url('/resources/images/home/landing/home-feature-card-market-mobile-bg.webp') 1x,
                url('/resources/images/home/landing/home-feature-card-market-mobile-bg.jpg') 1x
        );
        top: calc(80px + 20px * 2);
        z-index: calc(10 + 10 * 2);
    }

    .feature .card:nth-child(3) {
        background-image: url('/resources/images/home/landing/home-feature-card-marketing-mobile-bg.jpg');
        top: calc(80px + 20px * 3);
        z-index: calc(10 + 10 * 3);
    }

    .feature .card:nth-child(4) {
        background-image: url('/resources/images/home/landing/home-feature-card-extension-mobile-bg.jpg');
        top: calc(80px + 20px * 4);
        z-index: calc(10 + 10 * 4);
    }

    .feature .card .text-wrapper {
        width: unset;
        height: 100%;
        padding: 24px;
    }

    .feature .card .text-wrapper .badge {
        margin-bottom: 16px;
        font-size: 12px;
        line-height: 140%;
        padding: 4px 6px;
        border-radius: 8px;
    }

    .feature .card .text-wrapper h2 {
        margin-bottom: 16px;
    }

    .feature .card .text-wrapper .desc {
        font-size: 14px;
        color: #85878e;
        margin-bottom: 16px;
    }

    .feature .card .text-wrapper .text-btn-wrapper p,
    .feature .card .text-wrapper .text-btn-wrapper i {
        color: #7e7aff;
    }

    .feature .card:nth-child(odd) .text-wrapper {
        order: 1;
    }

    .feature .card:nth-child(odd) img {
        order: 2;
    }

    /* brand */
    section.brand {
        background: #fbfbfb;
        padding: 100px 0 !important;
    }

    .brand .desc {
        margin: 16px 0 40px;
    }

    .brand .brand-sites-wrapper.screen-desktop {
        display: none;
    }

    .brand .brand-sites-wrapper.screen-mobile {
        display: flex;
    }

    .brand .brand-sites-wrapper {
        gap: 16px;
    }

    .brand .brand-sites-wrapper .scroll-row {
        gap: 16px;
    }

    .brand .brand-sites-wrapper .brand-sites {
        height: 100px;
    }

    /* support */
    .support .card-wrapper {
        flex-direction: column;
        gap: 24px;
        width: 100%;
        margin-top: 40px;
    }

    .support .card {
        width: 100%;
        max-width: 360px;
        padding: 32px 24px;
        margin-top: 0;
    }

    .support .card .title {
        font-size: 18px;
    }
}