section {
    position: relative;
    overflow: hidden;
}

.scroll-down {
    width: 40px;
    height: 40px;
    position: relative;
    top: 20px;
    left: 50%;
    transform: translate(-50%, 0);
}

#intro video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    object-fit: cover;
    animation: scale-up-fade-out 8s linear infinite;
    filter: brightness(0.25) blur(4px);
}

#intro video:first-child {
    animation: scale-up-fade-out-reverse 8s linear infinite;
}

@media (min-width: 879px) {
    #intro {
        position: relative;
        height: calc(100vh + 75px);
        justify-content: center;
        align-items: center;
        margin: 0 0 120px 0;
    }

    #intro .background {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: var(--dark);
    }

    #intro .content {
        z-index: 9998;
        position: absolute;
        color: white;
        top: 50%;
        transform: translate(0, -50%);
        left: 60px;
    }

    #intro .content .title {
        font-size: 120px;
        letter-spacing: -8px;
        font-weight: 900;
        animation: start-title 1s ease-in;
    }

    #intro .content .slogan {
        font-size: 30px;
        text-indent: 8px;
        margin-bottom: 20px;
        animation: start-slogan 1.5s ease-in;
    }

    /* 다운로드, 문의하기 아이콘 css */
    .eva--arrow-circle-down-outline {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.31 12.41L13 13.66V8a1 1 0 0 0-2 0v5.59l-1.29-1.3a1 1 0 0 0-1.42 1.42l3 3a1 1 0 0 0 .33.21a.94.94 0 0 0 .76 0a.54.54 0 0 0 .16-.1a.49.49 0 0 0 .15-.1l3-2.86a1 1 0 0 0-1.38-1.45'/%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2m0 18a8 8 0 1 1 8-8a8 8 0 0 1-8 8'/%3E%3C/svg%3E");
        background-color: currentColor;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        color: #ffffff;
        text-decoration: none
    }
    .eva--message-circle-outline {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1' fill='%23000'/%3E%3Ccircle cx='16' cy='12' r='1' fill='%23000'/%3E%3Ccircle cx='8' cy='12' r='1' fill='%23000'/%3E%3Cpath fill='%23000' d='M19.07 4.93a10 10 0 0 0-16.28 11a1.06 1.06 0 0 1 .09.64L2 20.8a1 1 0 0 0 .27.91A1 1 0 0 0 3 22h.2l4.28-.86a1.26 1.26 0 0 1 .64.09a10 10 0 0 0 11-16.28Zm.83 8.36a8 8 0 0 1-11 6.08a3.26 3.26 0 0 0-1.25-.26a3.43 3.43 0 0 0-.56.05l-2.82.57l.57-2.82a3.09 3.09 0 0 0-.21-1.81a8 8 0 0 1 6.08-11a8 8 0 0 1 9.19 9.19'/%3E%3C/svg%3E");
        background-color: currentColor;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        color: #ffffff;
        text-decoration: none
    }
}

@media (max-width: 878px) {
    #intro {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        margin: 0 0 120px 0;
        transition: all 0.3s ease-out;
    }

    #intro .background {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: var(--dark);
        transition: height 0.3s ease-out, width 0.3s ease-out, top 0.2s ease-out;
    }

    #intro .content {
        z-index: 9998;
        position: absolute;
        color: white;
        top: 75%;
        transform: translate(0, -50%);
        left: 30px;
        transition: all 0.2s ease-out;
    }

    #intro .content .title {
        font-size: 40px;
        letter-spacing: -2px;
        font-weight: 900;
        animation: start-title 1s ease-in;
    }

    #intro .content .slogan {
        font-size: 12px;
        text-indent: 2px;
        margin-bottom: 20px;
        animation: start-slogan 1.5s ease-in;
        transition: all 0.3s ease-out;
    }

    /* 다운로드, 문의하기 아이콘 css */
    .eva--arrow-circle-down-outline {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.31 12.41L13 13.66V8a1 1 0 0 0-2 0v5.59l-1.29-1.3a1 1 0 0 0-1.42 1.42l3 3a1 1 0 0 0 .33.21a.94.94 0 0 0 .76 0a.54.54 0 0 0 .16-.1a.49.49 0 0 0 .15-.1l3-2.86a1 1 0 0 0-1.38-1.45'/%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2m0 18a8 8 0 1 1 8-8a8 8 0 0 1-8 8'/%3E%3C/svg%3E");
        background-color: currentColor;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        color: #000000;
    }
    .eva--message-circle-outline {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1' fill='%23000'/%3E%3Ccircle cx='16' cy='12' r='1' fill='%23000'/%3E%3Ccircle cx='8' cy='12' r='1' fill='%23000'/%3E%3Cpath fill='%23000' d='M19.07 4.93a10 10 0 0 0-16.28 11a1.06 1.06 0 0 1 .09.64L2 20.8a1 1 0 0 0 .27.91A1 1 0 0 0 3 22h.2l4.28-.86a1.26 1.26 0 0 1 .64.09a10 10 0 0 0 11-16.28Zm.83 8.36a8 8 0 0 1-11 6.08a3.26 3.26 0 0 0-1.25-.26a3.43 3.43 0 0 0-.56.05l-2.82.57l.57-2.82a3.09 3.09 0 0 0-.21-1.81a8 8 0 0 1 6.08-11a8 8 0 0 1 9.19 9.19'/%3E%3C/svg%3E");
        background-color: currentColor;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        color: #000000;
    }
}

/**/
#content .introduce .content .thumbnail img {
    width: 100%;
    object-fit: cover;
}


@media (min-width: 879px) {
    #function{
        margin-top: 45%;
    }
    #content .introduce .content .thumbnail.left img:first-child {
        width: 90%;
        object-fit: cover;
        float: right;
        aspect-ratio: 1.5;
    }

    #content .introduce .content .thumbnail.left img:nth-child(2) {
        width: 50%;
        object-fit: cover;
        float: left;
        position: absolute;
        bottom: 0px
    }

    #content .introduce .content .thumbnail.right img:first-child {
        width: 90%;
        object-fit: cover;
        float: left;
        aspect-ratio: 1.5;
    }

    #content .introduce .content .thumbnail.right img:nth-child(2) {
        width: 50%;
        object-fit: cover;
        float: left;
        position: absolute;
        right: 0px;
        bottom: 0px
    }

    #content .introduce {
        height: fit-content;
        margin: 0 60px;
    }

    #content .introduce .content {
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 60px;
        transition: transform 0.3s ease-out;
    }

    #content .introduce .content.reverse {
        flex-direction: row-reverse;
    }

    #content .introduce .content .thumbnail {
        position: relative;
        width: 55%;
        aspect-ratio: 6/4;
    }

    #content .introduce .content .introduce-content {
        width: 45%;
        display: flex;
        flex-direction: column;
    }

    #content .introduce .content-etc .introduce-content {
        margin-top: 95px;
    }

    #content .introduce .content-etc .introduce-content .title,
    #content .introduce .content .introduce-content .title {
        font-size: 40px;
        margin-bottom: 10px;
    }

    #content .introduce .content-etc .introduce-content .summary,
    #content .introduce .content .introduce-content .summary {
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 15px;
        color: var(--maincolor4);
    }

    #content .introduce .content-etc .introduce-content .description,
    #content .introduce .content .introduce-content .description {
        margin-bottom: 60px;
        font-size: 18px;
    }

    #content .introduce .content-etc .introduce-content .icon,
    #content .introduce .content .introduce-content .icon {
        background: white;
        width: 32px;
        border-bottom: 4px solid var(--main);
        margin-top: 50px;
        margin-bottom: 20px;
    }

    .icon .function-logo {
        width:120px;
        margin-top: 70px;
    }

    /* 메인 이미지(여기에 손사진) */
    #content .introduce .content .thumbnail-left img:first-child {
        width: 90%;
        object-fit: cover;
        float: right;
    }
    /* 서브 이미지(여기에 pc, 모바일 이미지 */
    #content .introduce .content .thumbnail-left img:last-child {
        width: 40%;
        position: absolute;
        object-fit: cover;
        bottom: 300px;
    }

    /* 메인 이미지(여기에 손사진) */
    #content .introduce .content .thumbnail-right img:first-child {
        width: 90%;
        object-fit: cover;
        left: 0;
    }
    /* 서브 이미지(여기에 pc, 모바일 이미지 */
    #content .introduce .content .thumbnail-right img:last-child {
        width: 40%;
        position: absolute;
        object-fit: cover;
        bottom: 300px;
        right: 0;
    }

}

@media (max-width: 878px) {
    #content .introduce {
        height: fit-content;
        margin: 0 24px;
    }

    #content .introduce .content {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        /*gap: 60px;*/
        transition: transform 0.3s ease-out;
    }

    #content .introduce .content .thumbnail {
        position: relative;
        width: 100%;
        aspect-ratio: 6/4;
    }

    #content .introduce .content .introduce-content {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    #content .introduce .content-etc .introduce-content .title,
    #content .introduce .content .introduce-content .title {
        font-size: 22px;
        margin-bottom: 10px;
    }

    #content .introduce .content .introduce-content .title {
        margin-left: 45px;
    }

    #content .introduce .content-etc .introduce-content .summary,
    #content .introduce .content .introduce-content .summary {
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 15px;
        color: var(--maincolor4);
    }

    #content .introduce .content .introduce-content .summary {
        margin-left: 45px;
    }

    #content .introduce .content-etc .introduce-content .description,
    #content .introduce .content .introduce-content .description {
        margin-bottom: 60px;
        font-size: 13px;
    }

    #content .introduce .content:last-child .introduce-content .description {
        margin-left: 45px;
    }

    #content .introduce .content-etc .introduce-content .icon,
    #content .introduce .content .introduce-content .icon {
        position: relative;
        background: white;
        width: 32px;
        border-bottom: 4px solid var(--main);
        margin-top: 50px;
        margin-bottom: 20px;
    }

    #content .introduce .content .introduce-content .icon:before {
        content: ' ';
        width: 1px;
        height: 990%;
        position: absolute;
        top: -188%;
        left: calc(50% - 1px);
        border: 1px dashed rgba(0, 0, 0, 0.1);
    }

    .icon .function-logo {
        width:120px;
        margin-left: 45px;
    }
}

#content .introduce .content-etc {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    transition: transform 0.3s ease-out;
}

#content .introduce .content-etc .introduce-content svg,
#content .introduce .content .introduce-content .icon svg {
    padding-bottom: 5px;
}

@media (min-width: 879px) {
    #content .introduce .content-etc .etc {
        display: flex;
        height: 100%;
        flex-direction: column;
        gap: 20px;
        position: relative;
    }

    #content .introduce .content-etc .etc .etc-row {
        display: flex;
        gap: 20px;
        flex-direction: row;
    }

    #content .introduce .content-etc .etc .etc-row.left {
        padding-left: 60px;
    }

    #content .introduce .content-etc .etc .etc-row.right {
        padding-left: 0;
    }

    #content .introduce .content-etc .etc .etc-row .item {
        width: 100px;
        height: 100px;
        border-radius: 12px;
        box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
        transition: filter 0.2s ease-out, transform 0.2s ease-out;
        gap: 12px;
        justify-content: center;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    #content .introduce .content-etc .etc .etc-row .item.valid .etc-ico {
        transform: scale(2);
    }

    #content .introduce .content-etc .etc .etc-row .item.invalid .etc-ico {
        aspect-ratio: 1/1;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.2);
    }

    #content .introduce .content-etc .etc .etc-row .item.invalid .etc-title,
    #content .introduce .content-etc .etc .etc-row .item.valid .etc-title {
        font-size: 12px;
        font-weight: 600;
        position: absolute;
        bottom: 7px;
        display: inline-block;
        white-space: nowrap;
    }

    #content .introduce .content-etc .etc .etc-row .item.valid .etc-title {
        filter: brightness(0.8);
    }

    #content .introduce .content-etc .etc .etc-row .item.invalid .etc-title {
        filter: brightness(0.9);
    }

    #content .introduce .content-etc .etc .etc-row .item.invalid .etc-title {
        height: 12px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 6px;
        margin-bottom: 4px;
    }

    #content .introduce .content-etc .etc .etc-row .item.valid .etc-title:after {
        content: ' ';
        width: 0;
        position: absolute;
        bottom: -2px;
        background: rgba(0, 0, 0, 0.2);
        left: 0;
        height: 4px;
        transition: all .2s linear;
    }

    #content .introduce .content-etc .etc .blinder {
        z-index: 2;
        pointer-events: none;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: calc(100% + 30px);
        background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 13%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(255,255,255,1) 87%, rgba(255,255,255,1) 100%);
    }
}

@media (max-width: 878px) {
    #content .introduce .content .thumbnail.left img:first-child {
        width: 90%;
        object-fit: cover;
        float: right;
        aspect-ratio: 1.5;
    }

    #content .introduce .content .thumbnail.left img:nth-child(2) {
        width: 50%;
        object-fit: cover;
        float: left;
        position: absolute;
        bottom: 0px
    }

    #content .introduce .content .thumbnail.right img:first-child {
        width: 90%;
        object-fit: cover;
        float: left;
        aspect-ratio: 1.5;
    }

    #content .introduce .content .thumbnail.right img:nth-child(2) {
        width: 50%;
        object-fit: cover;
        float: left;
        position: absolute;
        right: 0px;
        bottom: 0px
    }


    #content .introduce .content-etc .etc {
        display: flex;
        height: 100%;
        flex-direction: column;
        gap: 20px;
        position: relative;
        margin-bottom: 95px;
    }

    #content .introduce .content-etc .etc .etc-row {
        display: flex;
        gap: 10px;
        flex-direction: row;
    }

    #content .introduce .content-etc .etc .etc-row.left {
        padding-left: 30px;
    }

    #content .introduce .content-etc .etc .etc-row.right {
        padding-left: 0;
    }

    #content .introduce .content-etc .etc .etc-row .item {
        width: 50px;
        height: 50px;
        border-radius: 6px;
        box-shadow: rgba(0, 0, 0, 0.35) 0 2px 7px;
        transition: filter 0.2s ease-out, transform 0.2s ease-out;
        gap: 6px;
        justify-content: center;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    #content .introduce .content-etc .etc .etc-row .item.valid .etc-ico {
        transform: scale(0.9);
    }

    #content .introduce .content-etc .etc .etc-row .item.invalid .etc-ico {
        aspect-ratio: 1/1;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.2);
    }

    #content .introduce .content-etc .etc .etc-row .item.invalid .etc-title,
    #content .introduce .content-etc .etc .etc-row .item.valid .etc-title {
        font-size: 7px;
        font-weight: 600;
        position: absolute;
        bottom: 2px;
        display: inline-block;
        white-space: nowrap;
    }

    #content .introduce .content-etc .etc .etc-row .item.valid .etc-title {
        filter: brightness(0.8);
    }

    #content .introduce .content-etc .etc .etc-row .item.invalid .etc-title {
        filter: brightness(0.9);
    }

    #content .introduce .content-etc .etc .etc-row .item.invalid .etc-title {
        height: 8px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 6px;
        margin-bottom: 2px;
    }

    #content .introduce .content-etc .etc .etc-row .item.valid .etc-title:after {
        content: ' ';
        width: 0;
        position: absolute;
        bottom: -1px;
        background: rgba(0, 0, 0, 0.2);
        left: 0;
        height: 2px;
        transition: all .2s linear;
    }

    #content .introduce .content-etc .etc .blinder {
        z-index: 2;
        pointer-events: none;
        position: absolute;
        bottom: -15px;
        left: 0;
        width: 100%;
        height: calc(100% + 30px);
        background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 13%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(255,255,255,1) 87%, rgba(255,255,255,1) 100%);
    }
}

#content .introduce .content-etc .etc .etc-row .item.valid:hover .etc-title:after {
    width: 100%;
}

#content .introduce .content-etc .etc .etc-row .item.valid:hover {
    transform: scale(1.1);
}

#content .introduce .content-etc .etc:has(.etc-row .item.valid:hover) .etc-row .item:not(:hover) {
    transform: scale(0.9);
    filter: brightness(0.8) blur(3px);
}

@media (min-width: 879px) {
    #content .portfolio {
        background: var(--dark);
        height: 100vh;
        position: relative;
        overflow: hidden;
        z-index: -1;
    }

    #content .portfolio .flat-slider-blinder {
        background: linear-gradient(to bottom, var(--dark) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, var(--dark) 100%);
        width: 100%;
        height: 100%;
        position: absolute;
    }

    #content .portfolio .flat-slider-container {
        position: absolute;
        z-index: -1;
        display: flex;
        transform: translate(50%, -50%) rotateZ(-30deg) rotateX(8deg) rotateY(8deg);
        transform-origin: center center;
        top: 50%;
        right: 20%;
        width: 45%;
        height: 150%;
        gap: 64px;
        overflow: hidden;
        transition: all .5s linear;
        filter: brightness(0.5);
    }

    #content .portfolio .portfolio-company {
        position: absolute;
        color: var(--light);
        width: 70%;
        padding: 30px 0 30px 30px;
        background: linear-gradient(to right, var(--dark) 0%, var(--dark) 60%, rgba(0, 0, 0, 0) 100%);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 32px;
    }

    #content .portfolio .portfolio-company .description {
        width: 60%;
        font-size: 16px;
        font-weight: 700;
    }

    #content .portfolio .images {
        display: flex;
        flex-direction: row;
        gap: 16px;
    }

    #content .portfolio .images img {
        height: 32px;
        margin-right: 16px;
    }

    #content .portfolio .portfolio-company .description {
        width: 60%;
        font-size: 15px;
        font-weight: 500;
    }

    #content .portfolio .images {
        display: flex;
        flex-direction: row;
        gap: 16px;
    }

    #content .portfolio .images img {
        height: 32px;
        margin-right: 16px;
    }
}

@media (max-width: 878px) {
    #content .portfolio {
        background: var(--dark);
        height: 80vh;
        position: relative;
        overflow: hidden;
        z-index: -1;
    }

    #content .portfolio .flat-slider-blinder {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, var(--dark) 100%);
        width: 100%;
        height: 100%;
        position: absolute;
    }

    #content .portfolio .flat-slider-container {
        position: absolute;
        z-index: -1;
        display: flex;
        transform: translate(50%, -50%) rotateZ(-30deg) rotateX(8deg) rotateY(8deg);
        transform-origin: center center;
        top: 50%;
        right: 70%;
        width: 150%;
        height: 200%;
        gap: 64px;
        overflow: hidden;
        transition: opacity 1s linear;
        filter: brightness(0.5);
    }

    #content .portfolio .portfolio-company {
        width: 100%;
        color: var(--light);
        position: absolute;
        background: linear-gradient(to bottom, var(--dark) 0%, var(--dark) 70%, rgba(0, 0, 0, 0) 100%);
        padding: 120px 32px 220px 32px;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    #content .portfolio .portfolio-company .description {
        text-align: center;
        width: 100%;
        font-size: 15px;
        font-weight: 500;
    }

    #content .portfolio .images {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        height: 32px;
    }

    #content .portfolio .images img {
        height: 32px;
    }
}

#content .portfolio .flat-slider-row {
    display: grid;
    grid-template-rows: min-content;
    gap: 64px;
    width: 50%;
    height: 100%;
}

#content .portfolio .flat-slider-row div {
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.6) 0 4px 20px;
}

#content .portfolio .flat-slider-row div img {
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
}

#content .faq {
    background: var(--bright);
    height: 100vh;
}

@keyframes start-header {
    0% {
        transform: translateY(-105%);
    }
    82% {
        transform: translateY(-105%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes start-title {
    0% {
        opacity: 0;
        transform: translateY(-5%);
    }
    28% {
        opacity: 0;
        transform: translateY(-5%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes start-slogan {
    0% {
        opacity: 0;
        transform: translateY(-10%);
    }
    52% {
        opacity: 0;
        transform: translateY(-10%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scale-up-fade-out {
    0% {
        opacity: 1;
    }
    12.5% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    37.5% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    62.5% {
        opacity: 0;
    }
    75% {
        opacity: 0;
    }
    87.5% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes scale-up-fade-out-reverse {
    0% {
        opacity: 0;
    }
    12.5% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    37.5% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    62.5% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    87.5% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@media (min-width: 879px) {
    .fullwindow {
        position: relative;
        display: block;
        width: 100%;
        height: calc(var(--vh, 1vh) * 100);
    }
}

.overflow {
    overflow: hidden;
}
.absolute {
    position: absolute !important;
}
.perspective {
    -webkit-perspective: 150vh;
    perspective: 150vh;
}

/*init css*/
html {
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap");
/**,*/
/*::before,*/
/*::after {*/
/*    box-sizing: border-box;*/
/*}*/

/*body,*/
/*button,*/
/*dd,*/
/*dl,*/
/*dt,*/
/*fieldset,*/
/*form,*/
/*h1,*/
/*h2,*/
/*h3,*/
/*h4,*/
/*h5,*/
/*h6,*/
/*input,*/
/*legend,*/
/*li,*/
/*ol,*/
/*p,*/
/*select,*/
/*table,*/
/*td,*/
/*textarea,*/
/*th,*/
/*ul {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*}*/
/*body {*/
/*    font-family: 'Work Sans', system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";*/
/*    line-height: 1.7;*/
/*    word-break: keep-all;*/
/*    -webkit-user-select:none;*/
/*    -moz-user-select:none;*/
/*    -ms-user-select:none;*/
/*    user-select:none;*/
/*}*/
/*@media (min-width: 879px) {*/
/*    body {*/
/*        letter-spacing: -1.5px;*/
/*    }*/
/*}*/
/*@media (max-width: 878px) {*/
/*    body {*/
/*        letter-spacing: -0.8px;*/
/*    }*/
/*}*/
/*main {*/
/*    display: block;*/
/*}*/
/*hr {*/
/*    box-sizing: content-box;*/
/*    height: 0;*/
/*    overflow: visible;*/
/*}*/
/*ol,*/
/*ul {*/
/*    list-style: none;*/
/*}*/
/*a {*/
/*    background-color: transparent;*/
/*    text-decoration: none;*/
/*    color: inherit;*/
/*}*/
/*a:hover {*/
/*    text-decoration: none;*/
/*    color: inherit;*/
/*}*/
/*b,*/
/*strong {*/
/*    font-weight: bolder;*/
/*}*/
/*address,*/
/*em {*/
/*    font-style: inherit;*/
/*}*/
/*img {*/
/*    border-style: none;*/
/*}*/
/*audio,*/
/*iframe,*/
/*img,*/
/*svg,*/
/*video {*/
/*    vertical-align: middle;*/
/*}*/
/*figure {*/
/*    margin: 0*/
/*}*/
/*table {*/
/*    border-collapse: collapse;*/
/*    border-spacing: 0;*/
/*}*/
/*th {*/
/*    text-align: left;*/
/*}*/
/*caption {*/
/*    overflow: hidden;*/
/*    position: absolute;*/
/*    clip: rect(0, 0, 0, 0);*/
/*    width: 1px;*/
/*    height: 1px;*/
/*    margin: -1px;*/
/*}*/
/*button,*/
/*input,*/
/*optgroup,*/
/*select,*/
/*textarea {*/
/*    font-family: inherit;*/
/*    font-size: 100%;*/
/*    line-height: 1;*/
/*    text-transform: none;*/
/*    outline: none;*/
/*}*/
/*input:focus,*/
/*button:focus,*/
/*textarea:focus {*/
/*    outline: none;*/
/*}*/
/*button,*/
/*input {*/
/*    overflow: visible;*/
/*    border-style: none;*/
/*    background: transparent;*/
/*}*/
/*button,*/
/*select {*/
/*    text-transform: none;*/
/*}*/
/*button,*/
/*[type="button"],*/
/*[type="reset"],*/
/*[type="submit"] {*/
/*    -webkit-appearance: button;*/
/*    cursor: pointer;*/
/*}*/
/*label {*/
/*    margin: 0;*/
/*}*/
/*fieldset {*/
/*    border-style: none;*/
/*}*/
/*textarea {*/
/*    overflow: auto;*/
/*    resize: vertical;*/
/*}*/
/*[type="number"]::-webkit-inner-spin-button,*/
/*[type="number"]::-webkit-outer-spin-button {*/
/*    height: auto;*/
/*}*/
/*[type="search"] {*/
/*    -webkit-appearance: textfield;*/
/*    outline-offset: -2px;*/
/*}*/
/*[type="search"]::-webkit-search-decoration {*/
/*    -webkit-appearance: none;*/
/*}*/
/*::-webkit-file-upload-button {*/
/*    -webkit-appearance: button;*/
/*    font: inherit;*/
/*    cursor: pointer;*/
/*}*/
/*.blind {*/
/*    overflow: hidden;*/
/*    position: absolute;*/
/*    clip: rect(0, 0, 0, 0);*/
/*    width: 1px;*/
/*    height: 1px;*/
/*    margin: -1px;*/
/*}*/