@font-face {
    font-family: "pretendard";
    src: url("../fonts/pretendard/Pretendard-Regular.otf");
    font-weight: 400;
    unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+4E00-9FAF, U+3008, U+3009, U+300A, U+300B, U+300C, U+300D;
}

@font-face {
    font-family: "pretendard";
    src: url("../fonts/pretendard/Pretendard-Medium.otf");
    font-weight: 500;
    unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+4E00-9FAF, U+3008, U+3009, U+300A, U+300B, U+300C, U+300D;
}

@font-face {
    font-family: "pretendard";
    src: url("../fonts/pretendard/Pretendard-Bold.otf");
    font-weight: 700;
    unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+4E00-9FAF, U+3008, U+3009, U+300A, U+300B, U+300C, U+300D;
}

@font-face {
    font-family: "helvetica";
    src: url("../fonts/helvetica/HelveticaNeueLTPro-Roman.otf");
    font-weight: 500;
    unicode-range: U+0041-005A, U+0061-007A, U+0030-0039, U+2018, U+2019, U+002C, U+002E, U+201C, U+201D, U+00B7, U+0023;
}

@font-face {
    font-family: "helvetica";
    src: url("../fonts/helvetica/HelveticaNeueLTPro-It.otf");
    font-weight: 500;
    font-style: italic;
    unicode-range: U+0041-005A, U+0061-007A, U+0030-0039, U+2018, U+2019, U+002C, U+002E, U+201C, U+201D, U+00B7, U+0023;
}

@font-face {
    font-family: "helvetica";
    src: url("../fonts/helvetica/HelveticaNeueLTPro-Md.otf");
    font-weight: 600;
    unicode-range: U+0041-005A, U+0061-007A, U+0030-0039, U+2018, U+2019, U+002C, U+002E, U+201C, U+201D, U+00B7, U+0023;
}

@font-face {
    font-family: "helvetica";
    src: url("../fonts/helvetica/HelveticaNeueLTPro-MdIt.otf");
    font-weight: 600;
    font-style: italic;
    unicode-range: U+0041-005A, U+0061-007A, U+0030-0039, U+2018, U+2019, U+002C, U+002E, U+201C, U+201D, U+00B7, U+0023;
}

@font-face {
    font-family: "helvetica";
    src: url("../fonts/helvetica/HelveticaNeueLTPro-Bd.otf");
    font-weight: 700;
    unicode-range: U+0041-005A, U+0061-007A, U+0030-0039, U+2018, U+2019, U+002C, U+002E, U+201C, U+201D, U+00B7, U+0023;
}

@font-face {
    font-family: "helvetica";
    src: url("../fonts/helvetica/HelveticaNeueLTPro-BdIt.otf");
    font-weight: 700;
    font-style: italic;
    unicode-range: U+0041-005A, U+0061-007A, U+0030-0039, U+2018, U+2019, U+002C, U+002E, U+201C, U+201D, U+00B7, U+0023;
}

:root {
    --maxWidth: 1024px;
    --std: 16px;
}

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

*, html, body {
    -webkit-text-size-adjust: 100%;
       -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    /* background-color: rgb(50, 230, 255); */
}

img {
    width: 100%;
    height: auto;
}

/* typography */
:lang(ko) p,
:lang(ko) li,
:lang(ko) blockquote {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.7;
}

:lang(en) p,
:lang(en) li,
:lang(en) blockquote {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
}

:lang(ko) blockquote,
:lang(en) blockquote {
    font-size: 1.125rem;
}

p *, 
li *,
blockquote * {
    line-height: inherit;
}

.item-app#single .content blockquote ul {
    gap: 0px !important;
    font-size: inherit;
}

.item-app#single .content blockquote ul li::before {
    font-size: inherit;
    background-color: rgb(100, 100, 100);
}

.item-app#single .content blockquote ul li {
    font-size: inherit;
}

strong {
    font-weight: 700;
    color: rgb(0, 150, 250);
}

small {
    font-size: 0.875em;
}

.thumb {
    width: 100%;
}

.thumb.ratio-16-9 {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: calc(100% * (9 / 16));
    background-color: rgb(250, 250, 250);
    border: 1px solid rgba(230, 230, 230, 1);
}

.thumb.ratio-16-9.no-border {
    border: none;
    background-color: transparent;
}

.thumb.ratio-16-9 > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center center;
       object-position: center center;
}

.thumb.ratio-16-9.cover > img {
    -o-object-fit: contain;
       object-fit: contain;
}

.box {
    margin-top: calc(var(--std) * 1.25);
    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) * 1.25);
}

/* app */
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 1.75rem;
    display: none;
}

#app {
    /* position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; */
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

#app.index {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#app.active {
    opacity: 1;
}

/* main-header */
#main-header {
    padding: calc(var(--std) * 1.25);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--std) * (1.25 + 2.0 + 1.25));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    z-index: 750;
}

#main-header button, #main-header a {
    cursor: pointer;
}

#set-en > .icon {
    position: relative;
    top: -0.025em;
}

#main-header > .item-main-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: calc(var(--std) * (1.25 * 0.275));
}

#main-header button {
    width: calc(var(--std) * 2.0);
    height: calc(var(--std) * 2.0);
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    -webkit-box-shadow: inset 0 -0.125em 0.125em rgba(0, 0, 0, 0.375);
            box-shadow: inset 0 -0.125em 0.125em rgba(0, 0, 0, 0.375);
    font-size: 1.25rem;
    border-radius: 100%;
    border: none;
}

#main-header button.active {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    -webkit-box-shadow: inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.375);
            box-shadow: inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.375);
}

#toggle-menu > .icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: calc(var(--std) * 0.2);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

#toggle-menu > .icon > span {
    width: calc(var(--std) * 1.0);
    height: 2px;
    background-color: rgb(0, 0, 0);
}

#toggle-menu.active > .icon > span {
    width: calc(var(--std) * 1.0);
    height: 2px;
    background-color: rgb(255, 255, 255);
}

#go-home {
    padding: 0 calc(var(--std) * (1.25 * 0.375));
    display: inline-block;
    background-color: rgb(255, 255, 255);
    height: calc(var(--std) * 2.0);
    border-radius: calc(var(--std) * 10.0);
    border: 2px solid rgb(0, 0, 0);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

/* world */
#world {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#spot-light {
    position: fixed;
    width: calc(var(--std) * 20.0); 
    height: calc(var(--std) * 20.0);
    border-radius: 50%;
    pointer-events: none;
    z-index: 600;
    -webkit-box-shadow: 0 0 0 9999px rgb(0,0,255);
            box-shadow: 0 0 0 9999px rgb(0,0,255);
    mix-blend-mode: multiply;
    display: none;
}

#spot-light + svg {
    display: none;
}

#spot-light.active {
    display: block;
}

#world::after {
    left: 0;
    bottom: 0;
    position: absolute;
    content: "";
    width: 100%;
    height: calc(var(--std) * (1.25 + 2.0 + 1.25) * 2.0);
    background: rgb(255, 255, 255);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(90%, rgba(255, 255, 255, 0.95)));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
    z-index: 250;
    pointer-events: none;
}

#window-frame {
    position: fixed;
    bottom: calc(var(--std) * (1.25 + 2.0 + 1.25) * 2);
    left: calc((100% - 334px) / 2);
    width: 334px;
    height: 262px;
    z-index: 500;
    cursor: pointer;
    display: inline-block;
}

#window-frame > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
    z-index: 100;
}

#window-frame > #preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

#window-frame > #preview > canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
}

#dom-labels {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 250;
}

.dom-label {
    padding: 0.25em 1.25em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.7;
    background-color: rgb(255, 255, 255);
    border-radius: calc(var(--std) * 100);
    -webkit-box-shadow: inset 0 -3px 3px rgba(0, 0, 0, 0.375);
            box-shadow: inset 0 -3px 3px rgba(0, 0, 0, 0.375);
}

.level-2 .dom-label, .level-3 .dom-label {
    padding: 0 calc(var(--std) * (1.25 * 2.0) / 2);
    font-size: 0.9rem;
    height: calc(var(--std) * (2.75 * 0.75));
    -webkit-box-shadow: inset 0 -1.5px 1.5px rgba(0, 0, 0, 0.375);
            box-shadow: inset 0 -1.5px 1.5px rgba(0, 0, 0, 0.375);
}

.item-level {
    position: fixed;
    opacity: 0;
    -webkit-transition: opacity 0.25s ease-out;
    -o-transition: opacity 0.25s ease-out;
    transition: opacity 0.25s ease-out;
    white-space: nowrap;
    z-index: 100;
}

.item-level.active {
    opacity: 1;
    z-index: 100;
}

.item-level-1 {
    position: absolute;
}

.level-3 {
    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) * 1.25);
}

/* main-nav */
#main-nav {
    padding: calc(var(--std) * 1.25);
    padding-bottom: calc(var(--std) * (1.25 * 4.0));
    position: fixed;
    top: calc(var(--std) * (1.25 + 2.0 + 1.25));
    left: calc(var(--std) * 1.25);
    width: auto;
    height: auto;
    max-width: calc(100% - var(--std) * (1.25 * 2.0));
    height: calc(100% - var(--std) * (1.25 + 2.0 + 1.25 + 1.25));
    overflow-y: auto;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    z-index: 850;
    display: none;
    -webkit-box-shadow: 0px 0px calc(var(--std) * (1.25 * 0.5)) rgba(0, 0, 0, 0.5);
            box-shadow: 0px 0px calc(var(--std) * (1.25 * 0.5)) rgba(0, 0, 0, 0.5);
}

#main-nav::-webkit-scrollbar {
    /* display: none; */
}

#main-nav.active {
    display: block;
}

.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) * (1.25 * 0.5));
}

.menu > .item-menu {
    padding-top: calc(var(--std) * (1.25 * 0.5));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* gap: calc(var(--std) * (1.25 * 2.0)); */
    border-top: 1px solid rgba(230, 230, 230, 0.25);
}

.menu > .item-menu:nth-child(1) {
    padding-top: 0;
    border-top: none;
}

#main-menu.menu .item-menu > .heading {
    /* width: calc((100% - var(--std) * (1.25 * 1.0)) / 3); */
}

#main-menu.menu > .item-menu:nth-child(1) > .heading,
#main-menu.menu > .item-menu:nth-child(4) > .heading,
#main-menu.menu > .item-menu:nth-child(5) > .heading,
#main-menu.menu > .item-menu:nth-child(6) > .heading,
#main-menu.menu .item-menu:nth-child(2) > .heading + .menu.sub > .item-menu > .heading {
    /* width: 100%; */
}

#main-menu.menu .item-menu > .heading + .menu.sub {
    /* width: calc((100% - var(--std) * (1.25 * 1.0)) / 3 * 2); */
    width: 100%;
    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) * (1.25 * 0.5));
    color: rgb(150, 150, 150);
}

#main-menu.menu .item-menu > .heading + .menu.sub > .item-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* gap: calc(var(--std) * (1.25 * 2.0)); */
}

#main-menu.menu .item-menu > .heading + .menu.sub > .item-menu:nth-child(1) {
    padding-top: 0;
    border-top: none;
}

#main-menu.menu .item-menu > .heading + .menu.sub > .item-menu > .heading {
    /* width: calc((100% - var(--std) * (1.25 * 1.0)) / 2); */
}

#main-menu.menu .item-menu > .heading + .menu.sub > .item-menu > .heading + .menu.sub {
    /* width: calc((100% - var(--std) * (1.25 * 1.0)) / 2); */
    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) * (1.25 * 0.5));
}

.item-sub {
    padding-top: calc(var(--std) * (1.25 * 0.5));
    border-top: 1px solid rgba(230, 230, 230, 0.25);
}

.item-sub:nth-child(1) {
    border-top: none;
    padding-top: 0;
}

#main-menu.menu .item-menu a {
    font-size: 1.175rem;
    font-weight: 600;
}

#main-menu.menu .item-menu a .ko {
    line-height: 1.35;
}

#main-menu.menu .item-menu a .en {
    line-height: 1.25;
}

#main-menu.menu .item-menu.active > .heading > a {
    color: rgb(40, 200, 100);
}

#main-menu.menu .item-menu a:hover {
    opacity: 0.375;
}

.menu.sub {
    display: block;
}

#main-menu.menu .item-menu > .heading,
.item-sub {
    padding-right: calc(var(--std) * (1.25 * 2.0));
    white-space: nowrap;
}

/* cont-keywords */
#cont-keywords {
    padding: calc(var(--std) * 1.25);
    position: fixed;
    top: calc(var(--std) * (1.25 + 2.0 + 1.25));
    right: calc(var(--std) * 1.25);
    width: auto;
    height: auto;
    width: calc(100% - var(--std) * (1.25 * 2.0));
    min-height: calc(100% - var(--std) * (1.25 + 2.0 + 1.25) * 2.0);
    max-height: calc(100% - var(--std) * (1.25 + 2.0 + 1.25) * 2.0);
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    -webkit-box-shadow: 0 calc(var(--std) * 0.5) calc(var(--std) * 0.1) rgba(0, 0, 0, 0.05);
            box-shadow: 0 calc(var(--std) * 0.5) calc(var(--std) * 0.1) rgba(0, 0, 0, 0.05);
    border-radius: calc(var(--std) * 1.25);
    border: 1px solid rgba(0, 0, 0, 0.375);
    z-index: 850;
    display: none;
}

#cont-keywords.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: calc(var(--std) * 1.25);
}

.item-cont-keywords:nth-child(1) {
    width: 280px;
}

.item-cont-keywords:nth-child(2) {
    width: calc((100% - 280px - var(--std) * (1.25 * 1.0)));
}

#cont-keywords > .input {
    height: 100%;
    overflow-y: auto;
}

#cont-keywords > .input::-webkit-scrollbar {
    display: none;
}

.input > .keywords {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: calc(var(--std) * (1.25 * 0.5)) calc(var(--std) * (1.25 * 0.45));
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.item-keywords > button.key {
    padding: calc(var(--std) * 0.375) calc(var(--std) * 0.75);
    border: 1px solid rgba(0, 0, 0, 0.375);
    border-radius: calc(var(--std) * 1.25);
    background-color: transparent;
    font-size: 1rem;
}

.keywords-result {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: calc(var(--std) * 1.25);
}

.keywords-result::-webkit-scrollbar {
    display: none;
}

.item-keywords-result {
    width: calc((100% - (var(--std) * 1.25) * 3) / 4);
}

.item-keywords-result .thumbnail {
    width: 100%;
    height: 0;
    padding-top: calc(100% * (9 / 16));
    background-color: rgb(230, 230, 230);
}

.item-keywords-result:nth-child(2n) .thumbnail {
    padding-top: calc(100% * (4 / 3));
}

.item-keywords-result:nth-child(3n) .thumbnail {
    padding-top: calc(100% * (1 / 1));
}

/* main-footer */
#main-footer {
    padding: calc(var(--std) * 1.25);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(var(--std) * (1.25 + 2.0 + 1.25));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    z-index: 650;
}

#clock {
    position: absolute;
    left: calc(var(--std) * 1.25);
    bottom: calc(var(--std) * 1.25);
    width: calc(var(--std) * (2.0 + (1.25 * 0.275) + 2.0) * 1.5);
    height: calc(var(--std) * (2.0 + (1.25 * 0.275) + 2.0) * 1.5);
    background-color: rgb(0, 0, 0);
    border-radius: 100%;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    overflow: hidden;
}

#clock > canvas {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center center;
       object-position: center center;
    -webkit-transform: scale(1.0);
        -ms-transform: scale(1.0);
            transform: scale(1.0);
}

#tracker {
    position: absolute;
    right: calc(var(--std) * 1.25);
    bottom: calc(var(--std) * 1.25);
    width: calc(var(--std) * (2.0 + (1.25 * 0.275) + 2.0) * 1.5);
    height: calc(var(--std) * (2.0 + (1.25 * 0.275) + 2.0) * 1.5);
}

#weather {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: calc(var(--std) * (1.25 * 0.5));
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 1.25rem;
    font-weight: 700;
}

.item-weather.icon > .item-icon > img {
    width: 32px;
    height: auto;
}

.item-weather.icon > .item-icon {
    display: none;
}

.item-weather.icon > .item-icon.active {
    display: block;
}

.item-weather.temperature {
    font-size: 2.0rem;
}

/* single */
.item-app#single {
    position: relative;
    padding: calc(var(--std) * (1.25 + 2.0 + 1.25) * 2.0) calc((100% - var(--maxWidth)) / 2);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(var(--std) * (1.25 + 2.0 + 1.25));
    width: 100%;
    min-height: 100vh;
    overflow-y: auto;
    z-index: 650;
    background-color: rgba(255, 255, 255, 0.95);
    pointer-events: auto;
}

.item-app#single::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: calc(var(--std) * 1.25 * 20.0);
    background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(50, 230, 255, 0.9) 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), to(rgba(50, 230, 255, 0.9)));
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(50, 230, 255, 0.9) 100%);
    z-index: -10;
}

.gradient-block {
    margin-bottom: 100vh;
    position: relative;
    width: 100%;
    height: 160px;
    background: rgba(255, 255, 255, 0.95);
    background: -o-linear-gradient(bottom,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 100%);
    background: -webkit-gradient(linear,left bottom, left top,from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.95)));
    background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 100%);
    z-index: 650;
}

#single-page-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

#single-page-title p {
    padding: 0.25em 1.25em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    background-color: rgb(255, 255, 255);
    border-radius: calc(var(--std) * 100);
    -webkit-box-shadow: inset 0 -0.125em 0.125em rgba(0, 0, 0, 0.375);
            box-shadow: inset 0 -0.125em 0.125em rgba(0, 0, 0, 0.375);
}

#single-page-title .ko p {
    line-height: 1.7;
}

#single-page-title .en p {
    line-height: 1.7;
}

#single-page-title.active p,
#single-page-title:hover p {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    -webkit-box-shadow: inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.375);
            box-shadow: inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.375);
}

.item-app#single .single-nav {
    width: 100%;
}

.item-app#single .single-nav .single-menu {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 0;
}

.item-app#single .single-nav .item-menu {
    padding-top: 0;
    border-top: none;
}

.item-app#single .single-nav .item-menu a {
    padding: 0.25em 1.25em;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
        -webkit-box-shadow: inset 0 -0.125em 0.125em rgba(0, 0, 0, 0.375);
    box-shadow: inset 0 -0.125em 0.125em rgba(0, 0, 0, 0.375);
    display: inline-block;
    border-radius: calc(var(--std) * 100);
    font-size: 1.375rem;
    font-weight: 700;
}

.item-app#single .single-nav .item-menu a:hover,
.item-app#single .single-nav .item-menu.active a {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    -webkit-box-shadow: inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.375);
            box-shadow: inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.375);
}

.item-app#single .single-nav .item-menu a {
    line-height: 1.7;
}

.item-app#single .content .heading p > strong {
    color: rgb(40, 200, 100);
    font-size: 1.275rem;
}

.item-app#single .content ul {
    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(1.25rem * 1.7);
}

.item-app#single .content ul.no-gap {
    gap: 0;
}

:lang(en) .item-app#single .content ul {
    gap: calc(1.25rem * 1.5);
}

.item-app#single .content ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.4875em;
}

.item-app#single .content ul li::before {
    position: relative;
    top: 0.4875em;
    content: "";
    width: 0.75em;
    height: 0.75em;
    background-color: rgb(0, 150, 250);
    border-radius: 100%;
    display: inline-block;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    line-height: inherit;
}

html:lang(en) .item-app#single .content ul li::before {
    top: 0.375em;
}

/* .item-app#single .content ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: calc((var(--std) * 1.25) * 1.5) calc((var(--std) * 1.25) * 1.75);
}

.item-app#single .content ul > li {
    width: calc((100% - (var(--std) * 1.25) * 1.75) / 2);
} */

.item-app#single .content blockquote {
    margin: calc((var(--std) * 1.25) * 0.75) 0;
    padding-left: calc(var(--std) * 1.25);
    border-left: 1px solid rgba(230, 230, 230, 1);
}

.item-app#single > .sections {
    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-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: 100%;
    gap: calc(var(--std) * (1.25 + 2.0 + 1.25) * 2.0);
    /* overflow: hidden; */
}

.item-app#single > .sections > .section {
    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-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: 100%;
    gap: calc(var(--std) * (1.25 + 2.0 + 1.25));
}

.section > .gallery-banner {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: calc((100% - var(--std) * (1.25 * 2.0) * 3.0) * (9 / 16));
}

.section > .gallery-banner.only-one {
    padding-top: calc(100% * (9 / 16));
}

.gallery-banner > .navi {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    z-index: 100;
}

.gallery-banner.only-one > .navi {
    display: none;
}

.gallery-banner > .gallery {
    position: absolute;
    top: 0;
    left: calc(var(--std) * (1.25 * 2.0) * 1.5);
    width: calc(100% - var(--std) * (1.25 * 2.0) * 3.0);
    height: 0;
    padding-top: calc((100% - var(--std) * (1.25 * 2.0) * 3.0) * (9 / 16));
    z-index: 20;
}

.gallery-banner.only-one > .gallery {
    left: 0;
    width: 100%;
    padding-top: calc(100% * (9 / 16));
}

.gallery > .item-gallery {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(250, 250, 250);
    border: 1px solid rgba(230, 230, 230, 1);
    border-radius: 0.75em;
    overflow: hidden;
    display: none;
}

.gallery > .item-gallery.active {
    display: block;
    opacity: 0;
    -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.gallery > .item-gallery > img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center center;
       object-position: center center;
}

.navi > .item-navi {
    width: calc(var(--std) * (1.25 * 2.0));
    height: calc(var(--std) * (1.25 * 2.0));
    border: none;
    border-radius: 100%;
    background-color: rgb(50, 230, 255);
    -webkit-box-shadow: inset 0 -0.125em 0.125em rgba(75, 75, 75, 0.375);
            box-shadow: inset 0 -0.125em 0.125em rgba(75, 75, 75, 0.375);
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.navi > .item-navi.left > .icon {
    position: relative;
    left: -0.125em;
    width: 0; 
    height: 0; 
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
    border-right: 0.75em solid rgb(220, 255, 255);
}

.navi > .item-navi.right > .icon {
    position: relative;
    right: -0.125em;
    width: 0; 
    height: 0; 
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
    border-left: 0.75em solid rgb(220, 255, 255);
}

.navi > .item-navi.hide {
    opacity: 0;
    pointer-events: none;
}

.section > .heading {
    padding: 0.25em 1.25em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 1.375rem;
    line-height: 1.7;
    font-weight: 700;
    text-align: center;
    background-color: rgb(75, 235, 155);
    color: rgb(0, 0, 0);
    -webkit-box-shadow: inset 0 -0.125em 0.125em rgba(75, 75, 75, 0.375);
            box-shadow: inset 0 -0.125em 0.125em rgba(75, 75, 75, 0.375);
    border-radius: calc(var(--std) * 100);
}

.section > .cont-heading > .heading .en,
.section > .heading .en {
    line-height: 1.5;
}

.section > .content {
    width: 100%;
}

.section > .content .columns {
    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) * 1.25) * 1.5);
}

.cont-columns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: calc((var(--std) * 1.25) * 1.5);
}

.cont-columns > .columns {
    width: calc((100% - (var(--std) * 1.25) * 1.5) / 2);
}

.cont-columns > .columns .two-column > .column:nth-child(1) {
    width: calc((100% - var(--std) * 1.25) / 3);
}

.cont-columns > .columns .two-column > .column:nth-child(2) {
    width: calc((100% - var(--std) * 1.25) / 3 * 2);
}

.columns .two-column {
    padding: calc(var(--std) * (1.25 / 2)) 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: calc(var(--std) * 1.25);
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    border-top: 1px solid rgba(230, 230, 230, 1);
}

.columns .two-column > .column:nth-child(1) {
    width: calc((100% - var(--std) * 1.25) / 4);
    color: rgb(40, 200, 100);
}

.columns .two-column > .column:nth-child(2) {
    width: calc((100% - var(--std) * 1.25) / 4 * 3);
}

.multiple-paragraph > p {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: calc((var(--std) * 1.25) * 1.5);
       -moz-column-gap: calc((var(--std) * 1.25) * 1.5);
            column-gap: calc((var(--std) * 1.25) * 1.5);
}

.section > .pages {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: calc((var(--std) * 1.25) * 0.0);
}

.pages > .page {
    position: relative;
    width: calc((100% - ((var(--std) * 1.25) * 0.0) * 3.0) / 4);
    height: 0;
    padding-top: calc(((100% - ((var(--std) * 1.25) * 0.0) * 3.0) / 4) * (1 / 1));
}

.pages.narrow > .page {
    width: calc((100% - ((var(--std) * 1.25) * 0.0) * 4.0) / 5);
    padding-top: calc(((100% - ((var(--std) * 1.25) * 0.0) * 4.0) / 5) * (1 / 1));
}

.page > a {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.25em;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    font-size: 1.75rem;
    line-height: 1.125;
    font-weight: 700;
    background-color: rgb(50, 230, 255);
    color: rgb(0, 0, 0);
    -webkit-box-shadow: inset 0 -0.25em 0.25em rgba(75, 75, 75, 0.375);
            box-shadow: inset 0 -0.25em 0.25em rgba(75, 75, 75, 0.375);
    border-radius: 100%;
}

.page > a:hover, .page.active > a {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    -webkit-box-shadow: inset 0 -0.25em 0.25em rgba(255, 255, 255, 0.375);
            box-shadow: inset 0 -0.25em 0.25em rgba(255, 255, 255, 0.375);
}

.participants {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: calc(var(--std) * (1.25 * 1.5));
}

.participants > .participant {
    padding: calc(var(--std) * (1.25 * 1.5));
    background-color: rgb(255, 255, 255);
    border-radius: 1em;
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.375);
            box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.375);
    width: calc((100% - (var(--std) * (1.25 * 1.5)) * 1.0) / 2);
    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) * 1.25);
}

.participant .thumb {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: calc(100% * (3 / 4));
    border: 1px solid rgba(230, 230, 230, 1);
}

.participant .thumb > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center center;
       object-position: center center;
}

.participant p, .participant a {
    font-size: 1.125rem;
}

.participant p > a {
    font-size: inherit;
    line-height: inherit;
    border-bottom: 1px solid rgb(50, 50, 50);
}

.participant p > a:hover {
    opacity: 0.5;
}

.participant .name p, .participant .name a {
    font-size: 1.375rem;
}

.participant .download a {
    width: 100%;
    text-align: center;
}

.participant .position {
    padding-left: 1em;
    border-left: 1px solid rgb(200, 200, 200);
    min-height: 52px;
}

.participant .position p, .participant .position a {
    font-size: 1rem;
}

.participant .ko p, .participant .ko a {
    line-height: 1.5;
}

.participant .en p, .participant .en a {
    line-height: 1.4;
}

a.file {
    font-size: 1rem;
    display: inline-block;
    padding: 0.5em 1em;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    border-radius: 10em;
}

/* other */
.section.credit p, 
.item-app#single .section.credit .content .heading p > strong {
    font-size: 1.125rem;
}

.ko, .en {
    font-size: inherit;
    line-height: inherit;
    display: none;
}

:lang(ko) .ko, :lang(en) .en {
    display: block;
    opacity: 0;
    -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

strong {
    font-weight: 700;
}

p > a:hover {
    opacity: 0.5;
}

u {
    padding-bottom: 0.125em;
    border-bottom: 2px dotted rgb(0, 0, 0);
}

.yet {
    pointer-events: none;
    opacity: 0.375 !important;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: rgb(100, 100, 100);
}

::-webkit-scrollbar-track {
    background: rgb(200, 200, 200);
}

/* grid */
#cont-grid {
    position: fixed;
    z-index: 1000;
    display: none;
}

#cont-grid.active {
    display: block;
}

.grid {
    position: fixed;
    pointer-events: none;
}

.grid:nth-child(1) {
    top: calc(var(--std) * 1.25);
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgb(255, 0, 255);
}

.grid:nth-child(2) {
    bottom: calc(var(--std) * 1.25);
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgb(255, 0, 255);
}

.grid:nth-child(3) {
    left: calc(var(--std) * 1.25);
    top: 0;
    width: 1px;
    height: 100%;
    border-right: 1px solid rgb(255, 0, 255);
}

.grid:nth-child(4) {
    right: calc(var(--std) * 1.25);
    top: 0;
    width: 1px;
    height: 100%;
    border-right: 1px solid rgb(255, 0, 255);
}

.grid:nth-child(5) {
    top: calc(var(--std) * (1.25 + 2.0));
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgb(255, 0, 255);
}

.grid:nth-child(6) {
    top: calc(var(--std) * (1.25 + 2.0 + 1.25));
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgb(255, 0, 255);
}

.grid:nth-child(7) {
    bottom: calc(var(--std) * (1.25 + 2.0));
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgb(255, 0, 255);
}

.grid:nth-child(8) {
    bottom: calc(var(--std) * (1.25 + 2.0 + 1.25));
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgb(255, 0, 255);
}

.grid:nth-child(9) {
    top: calc(100% / 3);
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgb(0, 0, 255);
}

.grid:nth-child(10) {
    bottom: calc(var(--std) * (1.25 + 2.0 + 1.25) * 2);
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgb(0, 0, 255);
}

.grid:nth-child(11) {
    top: 0;
    left: calc(100% / 2);
    width: 1px;
    height: 100%;
    border-right: 1px solid rgb(0, 0, 255);
}

.grid:nth-child(11) {
    top: 0;
    left: calc(var(--std) * (1.25 + 2.0 + (1.25 * 0.275) + 2.0));
    width: 1px;
    height: 100%;
    border-right: 1px solid rgb(0, 0, 255);
}

.grid:nth-child(12) {
    top: 0;
    right: calc(var(--std) * (1.25 + 2.0 + (1.25 * 0.275) + 2.0));
    width: 1px;
    height: 100%;
    border-right: 1px solid rgb(0, 0, 255);
}

/* responsive */
@media screen and (max-width: 1064px) {
    :root {
        --maxWidth: 100%;
    }

    .item-app#single {
        padding: calc(var(--std) * (1.25 + 2.0 + 1.25) * 2.0) calc(var(--std) * (1.25));
    }
}

@media screen and (max-width: 1000px) {
    .pages.narrow > .page {
        width: calc((100% - ((var(--std) * 1.25) * 0.0) * 3.0) / 4);
        padding-top: calc(((100% - ((var(--std) * 1.25) * 0.0) * 3.0) / 4) * (1 / 1));
    }

    #app:not(.index) #world,
    #app:not(.index) .gradient-block,
    #app:not(.index) #spot-light,
    #app:not(.index) #main-footer {
        display: none;
    }

    #spot-light {
        position: fixed;
        width: 75vw; 
        height: 75vw;
        top: calc((100% - 75vw) / 2) !important;
        left: calc((100% - 75vw) / 2) !important;
        border-radius: 50%;
        pointer-events: none;
        z-index: 600;
        -webkit-box-shadow: 0 0 0 9999px rgb(0,0,255);
                box-shadow: 0 0 0 9999px rgb(0,0,255);
        mix-blend-mode: multiply;
        display: none;
    }

    .item-app#single,
    .item-app#single > .sections > .section {
        gap: calc(var(--std) * (1.25 + (2.0 / 4) + 1.25));
    }
}

@media screen and (max-width: 1000px) and (orientation: landscape) {
    #window-frame {
        bottom: calc(var(--std) * (1.25 + 2.0 + 1.25));
    }
}

@media screen and (max-width: 1000px) and (min-aspect-ratio: 1.125 / 1) {
    #window-frame {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .pages > .page {
        width: calc((100% - ((var(--std) * 1.25) * 0.0) * 3.0) / 3);
        padding-top: calc(((100% - ((var(--std) * 1.25) * 0.0) * 3.0) / 3) * (1 / 1));
    }
}

@media screen and (max-width: 720px) {
    .pages.narrow > .page {
        width: calc((100% - ((var(--std) * 1.25) * 0.0) * 2.0) / 3);
        padding-top: calc(((100% - ((var(--std) * 1.25) * 0.0) * 2.0) / 3) * (1 / 1));
    }

    #window-frame {
        left: calc((100% - (334px * 0.75)) / 2);
        width: calc(334px * 0.75);
        height: calc(262px * 0.75);
    }

    .participants > .participant {
        width: 100%;
    }

    .pages > .page {
        width: calc((100% - ((var(--std) * 1.25) * 0.0) * 3.0) / 2);
        padding-top: calc(((100% - ((var(--std) * 1.25) * 0.0) * 3.0) / 2) * (1 / 1));
    }
}

@media screen and (max-width: 720px) and (orientation: landscape) {
    #window-frame {
        display: none;
    }
}

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

    html {
        font-size: 14px;
    }

    #main-nav {
        max-width: calc(100% - var(--std) * (1.25 * 2.0));
        width: calc(100% - var(--std) * (1.25 * 2.0));
    }

    .item-app#single .single-nav .single-menu {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        gap: calc(var(--std) * (1.25 * 0.5)) 0;
    }

    .columns .two-column {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .columns .two-column > .column:nth-child(1),
    .columns .two-column > .column:nth-child(2) {
        width: 100%;
    }
}

@media screen and (max-width: 520px) {
    #single-page-title p {
        font-size: 1.5rem;
    }

    .item-app#single .single-nav .item-menu a {
        font-size: 1.25rem;
    }

    #main-menu.menu .item-menu a {
        font-size: 1.125rem;
    }

    .section > .cont-heading > .heading, .section > .heading {
        font-size: 1.25rem;
    }

    .page > a {
        font-size: 1.25rem;
    }

    .item-app#single .content ul {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .item-app#single .content ul > li {
        width: 100%;
    }

    #window-frame {
        left: calc((100% - (334px * 0.5)) / 2);
        width: calc(334px * 0.5);
        height: calc(262px * 0.5);
    }

    #clock > canvas {
        -webkit-transform: scale(0.9);
            -ms-transform: scale(0.9);
                transform: scale(0.9);
    }
}

@media screen and (max-width: 450px) {
    #main-menu.menu .item-menu > .heading,
    .item-sub {
        padding-right: calc(var(--std) * 1.25);
        white-space: inherit;
    }

    .section > .gallery-banner {
        padding-top: calc((100% - var(--std) * ((1.25 * 2.0) * 0.65) * 3.0) * (9 / 16));
    }

    .gallery-banner > .gallery {
        left: calc(var(--std) * ((1.25 * 2.0) * 0.65) * 1.5);
        width: calc(100% - var(--std) * ((1.25 * 2.0) * 0.65) * 3.0);
        padding-top: calc((100% - var(--std) * ((1.25 * 2.0) * 0.65) * 3.0) * (9 / 16));
    }

    .gallery > .item-gallery {
        border-radius: 0.375em;
    }

    .navi > .item-navi {
        width: calc(var(--std) * (1.25 * 2.0) * 0.65);
        height: calc(var(--std) * (1.25 * 2.0) * 0.65);
    }

    .navi > .item-navi.right > .icon {
        position: relative;
        right: calc(0.125em * (-1) * 0.65);
        width: 0; 
        height: 0; 
        border-top: calc(0.5em * 0.65) solid transparent;
        border-bottom: calc(0.5em * 0.65) solid transparent;
        border-left: calc(0.75em * 0.65) solid rgb(220, 255, 255);
    }

    #weather {
        gap: calc(var(--std) * (1.5 * 0.25));
    }

    .item-weather.icon > .item-icon > img {
        width: 24px;
    }

    .item-weather {
        font-size: 0.875rem;
    }

    .item-weather.temperature {
        font-size: 1.125rem;
    }
}

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

    html {
        font-size: 12px;
    }

    #window-frame {
        display: none;
    }
}