body {
    width: 100%;
    height: 100%;
    margin: 0px;
    /* overflow: hidden; */
    position: absolute;
    /*touch-action: none;*/
    font-family: 'OneUiSans', sans-serif;
}

img {
    /* width: 100%; */
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.canvas-wrapper {
    width: 100%;
    /* height: 100%; */
    min-height: 100vh;
    -webkit-touch-callout: none;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.canvas {
    width: 100%;
    /*height: 100%; */
    /* position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center; */
}

.home__bg {
    width: 100%;
    height: 100%;
    background-color: #000;
}

.page__main {
    width: 87%;
    /*height: 100%;*/
    min-height: 100vh; 
    padding-top: calc(100% * (386 / 1440));
    padding-left: calc((100% - 87%) / 2);
    padding-right: calc((100% - 87%) / 2);
    padding-bottom: calc(100% * (85 / 1440));
    ;
    /* display: none; */
}

    .page__main .video__area {
        width: 100%;
        aspect-ratio: 9/16;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

        .page__main .video__area .video-overlay {
            width: 100%;
            height: 97%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 5;
        }

        .page__main .video__area video,
        .page__main .video__area #videoPlayer  {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .page__main .video__area .button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(100vw * (578 / 1440));
            height: calc(100vw * (578 / 1440));
            display: flex;
            align-items: center;
            justify-content: center;
            display: none;
        }

            .page__main .video__area .button > img {
                width: 100%;
            }

            .page__main .video__area .button.show {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                display: flex;
                align-items: center;
                justify-content: center;
                display: none;
            }



    .page__main > .button {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-top: 40px;
        width: 100%;
    }

        .page__main > .button > img {
            width: 100%;
        }

    .page__main .limit {
        width: 100%; /* È­¸é °¡·Î Å©±â¿Í ¸ÂÃß±â */
        height: calc(100vw * (136 / 1440)); /* ºñÀ²·Î ³ôÀÌ ¼³Á¤ */
        line-height: calc(100vw * (136 / 1440)); /* ÅؽºÆ® ¼¼·Î Á¤·Ä À¯Áö */
        font-size: calc(100vw * (50 / 1440)); /* ÅؽºÆ® Å©±â ºñÀ² À¯Áö */
        color: #9d9d9d;
        text-align: center;
    }


.page__error {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .page__error > img {
        width: 100%;
        height: 100%;
    }

@font-face {
    font-family: 'OneUiSans';
    src: url(../assets/font/oneUIsans/OneUISansGUI-300Light.ttf) format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'OneUiSans';
    src: url(../assets/font/oneUIsans/OneUISansGUI-400Regular.ttf) format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'OneUiSans';
    src: url(../assets/font/oneUIsans/OneUISansGUI-600SemiBold.ttf) format('truetype');
    font-weight: 600;
}

@font-face {
    font-family: 'OneUiSans';
    src: url(../assets/font/oneUIsans/OneUISansGUI-700Bold.ttf) format('truetype');
    font-weight: 700;
}