:root {
    --std: 16px;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    text-transform: none;
    font-family: "spoqa";
    list-style-type: none;
    color: inherit;
    word-break: keep-all;
}

.helv {
    font-family: "tex";
}

#app {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 1.7rem;
    font-weight: 700;
}

#app {
    opacity: 0;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
}

#app.active {
    opacity: 1;
}

#header {
    padding: calc(var(--std) * 2.0);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 200;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    z-index: 100;
}

#home {
    position: relative;
    z-index: 50;
}

#home svg {
    fill: rgb(255, 255, 255);
    width: calc(var(--std) * 11.25);
    height: calc((var(--std) * 11.25) * (5.675 / 40));
}

#app.left #home svg {
    fill: rgb(0, 0, 0);
}

#toggle-menu {
    display: none;
}

#content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.item-content {
    position: relative;
    padding: calc(var(--std) * 2.0);
    width: calc(100% / 2);
    height: 100%;
}

.item-content > .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.item-content:nth-child(1) > .bg {
    z-index: -100;
    opacity: 0;
    -webkit-transition: opacity 0.25s ease-out;
    transition: opacity 0.25s ease-out;
}

.item-content:nth-child(2) > .bg {
    z-index: -100;
    opacity: 0;
    -webkit-transition: opacity 0.25s ease-out;
    transition: opacity 0.25s ease-out;
}

#app.left .item-content:nth-child(2) > .bg, 
.item-content:nth-child(1) > .bg {
    opacity: 1;
}

#app.left .item-content:nth-child(1) > .bg {
    opacity: 0;
}

.item-content:nth-child(2) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.item-content:nth-child(2).active {
    color: rgb(255, 255, 255);
}

.item-content > svg {
    position: absolute;
    bottom: calc(var(--std) * 2);
    pointer-events: none;
}

.item-content:nth-child(1) > svg {
    right: 0;
    height: calc((100vh - var(--std) * 4.0) / 2);
    width: calc((100vh - var(--std) * 4.0) / 2 * (42.81 / 116.265));
}

.item-content:nth-child(2) > svg {
    left: -1px;
    width: auto;
    height: calc((100vh - var(--std) * 4.0) / 2);
}

#main-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(var(--std) * 0.75);
}

#app.left #main-menu > .item-menu {
    color: rgb(255, 255, 255);
}

.item-menu a:hover {
    opacity: 0.5;
}

#footer {
    padding-left: calc(var(--std) * 2.0);
    padding-bottom: calc(var(--std) * 2.0);
    position: fixed;
    bottom: 0;
    left: 0;
    width: calc((100% - var(--std) * 7.0) / 6 + var(--std) * 3.0);
    pointer-events: none;
}

#info > .item-info {
    font-size: 1.5rem;
    color: rgb(255, 255, 255);
    line-height: 1.5;
}

#app.left #info > .item-info {
    color: rgb(0, 0, 0);
}

/* common */
a:hover, button:hover {
    cursor: pointer;
}

#mobile-bg {
    display: none;
}

/* responsive */
@media screen and (max-width: 1000px) {
    #mobile-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        z-index: -10;
        display: block;
    }

    #content {
        display: none;
    }

    #toggle-menu {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        border: none;
        border: 0px;
        background-color: transparent;
        color: rgb(255, 255, 255);
        z-index: 50;
        width: calc(var(--std) * 1.25);
        height: calc(var(--std) * 1.25);
    }

    #toggle-menu > .icon {
        width: calc(var(--std) * 1.25);
        height: 3px;
        background-color: rgb(255, 255, 255);
        -webkit-transition: -webkit-transform 0.25s ease-out;
        transition: -webkit-transform 0.25s ease-out;
        transition: transform 0.25s ease-out;
        transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
    }

    #header.active #toggle-menu {
        color: rgb(0, 0, 0);
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    #header.active #toggle-menu > .icon {
        position: absolute;
        background-color: rgb(0, 0, 0);
        width: calc(var(--std) * 1.5);
    }

    #header.active #toggle-menu > .icon:first-child {
        -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);
    }

    #header.active #toggle-menu > .icon:nth-child(2) {
        display: none;
    }

    #header.active #toggle-menu > .icon:last-child {
        -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }

    #home svg {
        fill: rgb(255, 255, 255) !important;
    }

    #header.active #home svg {
        fill: rgb(0, 0, 0) !important;
    }

    #main-menu {
        padding: calc(var(--std) * 2.0);
        padding-top: calc(var(--std) * (2.0 + 1.75 + 0.75 + 2.0));
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgb(255, 255, 255);
        width: 100%;
        height: 100%;
        display: none;
    }

    #header.active > #main-menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    #main-menu::after {
        margin: calc(var(--std) * 2.0);
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: calc(var(--std) * 7.5);
        height: calc((var(--std) * 7.5) * (77.5 / 50));
        background-image: url("../svg/symbol.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }

    #main-menu > .item-menu {
        color: rgb(0, 0, 0) !important;
    }

    #info {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: calc(var(--std) * 1.0);
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    #info > .item-info {
        color: rgb(255, 255, 255) !important;
        font-size: 0.9rem;
    }

    #footer {
        padding: calc(var(--std) * 2.0);
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --std: 14px;
    }

    html {
        font-size: 14px;
    }
}

/* grid */
#grids {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    display: none;
}

#grids.active {
    display: block;
}

.grid {
    position: fixed;
    background-color: rgb(255, 0, 255);
}

.grid:nth-child(1) {
    top: calc(var(--std) * 2.0);
    left: 0;
    width: 100%;
    height: 1px;
}

.grid:nth-child(2) {
    top: 0;
    right: calc(var(--std) * 2.0);
    width: 1px;
    height: 100%;
}

.grid:nth-child(3) {
    bottom: calc(var(--std) * 2.0);
    left: 0;
    width: 100%;
    height: 1px;
}

.grid:nth-child(4) {
    top: 0;
    left: calc(var(--std) * 2.0);
    width: 1px;
    height: 100%;
}

.grid:nth-child(5) {
    top: 0;
    left: calc((var(--std) * 2.0) * 1 + (100% - var(--std) * (2.0 * 7)) / 6 * 1);
    width: 1px;
    height: 100%;
}

.grid:nth-child(6) {
    top: 0;
    left: calc((var(--std) * 2.0) * 2 + (100% - var(--std) * (2.0 * 7)) / 6 * 1);
    width: 1px;
    height: 100%;
}

.grid:nth-child(7) {
    top: 0;
    left: calc((var(--std) * 2.0) * 2 + (100% - var(--std) * (2.0 * 7)) / 6 * 2);
    width: 1px;
    height: 100%;
}

.grid:nth-child(8) {
    top: 0;
    left: calc((var(--std) * 2.0) * 3 + (100% - var(--std) * (2.0 * 7)) / 6 * 2);
    width: 1px;
    height: 100%;
}

.grid:nth-child(9) {
    top: 0;
    left: calc((var(--std) * 2.0) * 3 + (100% - var(--std) * (2.0 * 7)) / 6 * 3);
    width: 1px;
    height: 100%;
}

.grid:nth-child(10) {
    top: 0;
    left: calc((var(--std) * 2.0) * 4 + (100% - var(--std) * (2.0 * 7)) / 6 * 3);
    width: 1px;
    height: 100%;
}

.grid:nth-child(11) {
    top: 0;
    left: calc((var(--std) * 2.0) * 4 + (100% - var(--std) * (2.0 * 7)) / 6 * 4);
    width: 1px;
    height: 100%;
}

.grid:nth-child(12) {
    top: 0;
    left: calc((var(--std) * 2.0) * 5 + (100% - var(--std) * (2.0 * 7)) / 6 * 4);
    width: 1px;
    height: 100%;
}

.grid:nth-child(13) {
    top: 0;
    left: calc((var(--std) * 2.0) * 5 + (100% - var(--std) * (2.0 * 7)) / 6 * 5);
    width: 1px;
    height: 100%;
}

.grid:nth-child(14) {
    top: 0;
    left: calc((var(--std) * 2.0) * 6 + (100% - var(--std) * (2.0 * 7)) / 6 * 5);
    width: 1px;
    height: 100%;
}

.grid:nth-child(15) {
    top: calc(100% / 2);
    left: 0;
    width: 100%;
    height: 1px;
    background-color: blue;
}