@font-face {
    font-family: "DXHmchL";
    src: url("../fonts/dxhmchl-kscpc-euc-h.ttf") format("truetype"),
    url("../fonts/dxhmchl-kscpc-euc-h-webfont.woff2") format("woff2"),
    url("../fonts/dxhmchl-kscpc-euc-h-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

:root {
    /* font-family */
    --font-DXHmchL: "DXHmchL", sans-serif;
    --font-Pretendard: "Pretendard Variable", sans-serif;

    /* color */
    --color-black: #212121;
    --color-gray-3: #495057;
    --color-gray-2: #606060;
    --color-gray-1: #e9ecef;
    --color-white: #f8f9fa;
    --color-red: #FF0000;
    --color-background: #070708;

    /* font-size */
    --font-size-title: min(2.4vw , min(4.8rem));
    --font-size-xx-large: min(1.8vw , min(3.6rem));
    --font-size-x-large: min(1.4vw , min(2.8rem));
    --font-size-large: min(1.2vw, max(2.4rem));
    --font-size-medium: min(0.9vw, max(1.8rem));
    --font-size-normal: min(0.8vw , min(1.6rem));
    --font-size-small: min(0.7vw , min(1.4rem));
    --font-size-micro: min(0.6vw , min(1.2rem));
}
/*====================================================================
    COMMON
==================================================================*/
html { font-size: 62.5%; font-weight: 400; line-height: 1.5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; scroll-behavior: smooth; }
html, body { width: 100%; height: 100%; }
body { overflow-x: hidden; margin: 0; padding: 0; box-sizing: border-box; font-family: "DXHmchL", "Pretendard Variable", sans-serif; background-color: var(--color-background); }
body::-webkit-scrollbar { display: none; }
img, canvas { pointer-events: none; }
section { width: 100%; }
/*====================================================================
    INDEX.HTML
=======================================================================*/
section.loading { width: 100vw; height: 100vh; overflow: hidden; position: relative; background-color: var(--color-black); display: flex; flex-direction: column; justify-content: center; align-items: center; }
section.loading svg#loading_svg { position: relative; z-index: 1; }
section.loading path.loading_title { animation: svg 3s cubic-bezier(0.39, 0.575, 0.565, 1) 0s forwards; fill: none; stroke: var(--color-white); stroke-width: 6px;stroke-dasharray: 4690; stroke-dashoffset: 0; }
@keyframes svg { from { stroke-dashoffset: 4690; } to { stroke-dashoffset: 0; } }
section.loading .load_text { padding-bottom: 10%; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 1em; font-family: "Pretendard Variable"; font-size: max(1vw, min(1.6rem)); line-height: 1.2; }
section.loading .load_text time { opacity: 0; overflow: hidden; animation: dateName 1.2s linear 1s forwards; color: var(--color-gray-2); font-weight: 100; }
section.loading .load_text span.name { opacity: 0; overflow: hidden; animation: dateName 1.8s linear 2.2s forwards; color: var(--color-white); font-weight: 200; }
@keyframes dateName { from { opacity: 0; overflow: hidden; } to { opacity: 1; overflow: visible; } }
section.loading canvas#stars { position: absolute; top: 0; left: 0; z-index: 0; }
/*====================================================================
    TRAUMA.HTML
=======================================================================*/
main { position: relative; width: 100%; max-width: 1920px; height: 100%; margin: auto; background-color: var(--color-background); box-sizing: border-box; }
header { width: 100%; max-width: 1920px; min-height: 80px; position: fixed; z-index: 1996; display: flex; align-items: center; transition: all 0.35s; background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25)); }
header .scrollDown { transform: translateY(-93%); }
header h1 { margin-right: auto; margin-left: 2em; font-size: 4.0rem; color: var(--color-white); letter-spacing: -0.3em; cursor: pointer; }
header button { padding: 0; background-color: transparent; outline: none; border: none; cursor: pointer; }
header button img { display: block; width: 38px; height: 32px; margin-left: auto; margin-right: 8rem; pointer-events: auto; }
#progress-bar { position: absolute; z-index: 1997; bottom: 0; left: 0; width: 0; height: 6px; background-color: rgba(250, 210, 4, 0.5); border-radius: 10px; }
/*====================================================================
    SECTION. visual
=======================================================================*/
.visual { position: relative; height: 100vh; max-height: 1080px; background: linear-gradient(to bottom, #FBD204, #29CCCA); }
.visual .eye-wrap { width: 100%; height: 100%; display: flex; justify-content: center; align-self: center; }
.visual .eye-wrap img { width: 50%; position: absolute; }
.visual .eye-wrap .eye-box { top: 20%; transform: translateY(-20%); border-radius: 50%; overflow: hidden; }
.visual .eye-wrap .eye { top: 20%; transform: translateY(-20%); }
.visual .eye-wrap01 .eye-mini { width: 10%; position: absolute; }
.visual .eye-wrap01 .eye-mini:first-child { top: 18%; left: 23%; }
.visual .eye-wrap01 .eye-mini:nth-child(2) { top: 12%; right: 30%; }
.visual .eye-wrap01 .eye-mini:nth-child(3) { top: 28%; right: 12%; }
.visual .eye-wrap01 .eye-mini:nth-child(4) { top: 40%; left: 5%; }
.visual .eye-wrap01 .eye-mini:nth-child(5) { bottom: 34%; left: 14%; }
.visual .eye-wrap01 .eye-mini:nth-child(6) { bottom: 30%; right: 5%; }
.visual .eye-wrap01 .eye-mini:nth-child(7) { bottom: 15%; left: 28%; }
.visual .eye-wrap01 .eye-mini:nth-child(8) { bottom: 12%; right: 20%; }
.visual .eye-wrap01 .eye-mini:nth-child(9) { bottom: 5%; left: 8%; }
.visual .scroll-down { position: relative; bottom: 20%; left: 50%; transform: translate(20%, -50%); width: 24px; height: 24px; }
.visual .scroll-down .chevron { animation: move 3s ease-out infinite; position: absolute; width: 28px; height: 8px; opacity: 0; transform: scale3d(0.5, 0.5, 0.5); }
.visual .scroll-down .chevron:first-child { animation-delay: 1s; }
.visual .scroll-down .chevron:nth-child(2) { animation-delay: 2s; }
@keyframes move { 25%{opacity: 1;} 33%{opacity: 1; transform: translateY(30px);} 67%{opacity: 1; transform: translateY(40px);} 100%{opacity: 0; transform: translateY(55px) scale3d(0.5, 0.5, 0.5);} }
.visual .scroll-down .chevron::before,
.visual .scroll-down .chevron::after { content: ''; position: absolute; top: 0; width: 51%; height: 100%; background-color: var(--color-white); }
.visual .scroll-down .chevron::before { left: 0; transform: skew(0deg, 30deg); }
.visual .scroll-down .chevron::after { right: 0; width: 50%; transform: skew(0deg, -30deg); }
.visual .scroll-down .scroll-text { display: block; margin-top: 5em; margin-left: -2.3em; font-size: var(--font-size-normal); color: var(--color-white); text-transform: uppercase; white-space: nowrap; opacity: .25; animation: pulse 2s linear alternate infinite; }
@keyframes pulse { to{opacity: 1;} }
/* svgPart */
.svgPart { height: 300vh; max-height: 3240px; box-sizing: border-box; position: relative; }
.svgPart .svg-img-wrap { position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden; }
.svgPart .svg-img-wrap svg { fill: none; width: 110%; height: 100%; transform: translateX(-6.5%); }
.svgPart .svg-img-wrap svg path { stroke: #fff; stroke-width: 3; stroke-opacity: .2; stroke-linecap: round; transition: ease-out 1s; }
.svgPart .svg-img-wrap svg rect,
.svgPart .svg-img-wrap svg .rects, .svgPart .svg-img-wrap svg .rectas { transition: ease-in-out .75s; opacity: 0; }
.svgPart .bgImg { width: 100%; height: 600px; background: linear-gradient(to top, rgba(33, 33, 33, 0), #29CCCA); position: absolute; top: 0; z-index: 2; }
.svgPart > img { width: 75%; position: absolute; left: -30%; bottom: -45%; filter: contrast(100%) brightness(25%); }
/* JS ==================================== */
.svgPart p { transition: all 1s; filter: blur(12px); z-index: 0; display: inline-block; font-size: 8rem; color: transparent; -webkit-text-stroke: 1px var(--color-white); position: absolute; text-align: center; }
.svgPart p:first-of-type, .svgPart p:nth-of-type(2) { z-index: 1; background-color: #000; filter: blur(0); }
.svgPart p:first-of-type { left: 50%; top: 55%; transform: translate(-50%, -55%); }
.svgPart p:nth-of-type(2) { left: 50%; top: 60%; transform: translate(-50%, -60%); }
.svgPart p:nth-of-type(3) { left: 25%; top: 50%; transform: translate(-50%, -50%); filter: blur(5px); }
.svgPart p:nth-of-type(4) { right: 10%; bottom: 30%; transform: translateY(-30%); filter: blur(3px); }
.svgPart p:nth-of-type(5) { left: 50%; bottom: -15%; transform: translateX(-50%); font-size: 12rem; filter: blur(0); white-space: nowrap; -webkit-text-stroke: 1px var(--color-red); }
/* storyPart */
.storyPart { position: relative; z-index: 1; height: 900vh; max-height: 9720px; bottom: -60%; }
.storyPart > .eye-move { z-index: 1; margin-top: -5%; width: 5%; position: sticky; top: 50%; left: 50%; transform: translateX(-50%); }
.storyPart .story { position: absolute; top: 0; width: 100%; height: 100%; }
.storyPart .text-wrap { color: var(--color-red); }
.storyPart .text-wrap p { display: inline-block; font-size: 60rem; }
.storyPart .text-wrap > p:first-child { margin-left: 1.2em; margin-top: -0.45em; transform: rotate(28deg); text-shadow: -20px -20px 25px rgba(0, 0, 0, 1); transition: all .25s; }
.storyPart .text-wrap > p:nth-of-type(2) { margin-left: 0.5em; margin-top: -0.25em; transform: rotate(-28deg); }
.storyPart .text-wrap > p:nth-of-type(3), .storyPart .text-wrap p:nth-of-type(4) { position: absolute; top: 1%; font-size: 10rem; filter: blur(1px); opacity: 0; }
.storyPart .text-wrap > p:nth-of-type(3) { z-index: -1; left: 5%; transform: rotate(-20deg); transition: all 1s; }
.storyPart .text-wrap > p:nth-of-type(4) { z-index: -2; left: 10%; transform: rotate(-20deg); filter: blur(3px); transition: all 1s; -webkit-text-stroke: 1px var(--color-white); color: transparent; }
.storyPart .text-wrap > p:nth-of-type(5) { position: absolute; font-size: 10rem; top: 26%; right: 10%; transform: translateY(-50%) rotate(26deg); }
.storyPart .text-wrap > p:nth-of-type(6) { position: absolute; font-size: 8rem; top: 30%; left: 10%; transform: translateY(-57%) rotate(-8deg); -webkit-text-stroke: .25px var(--color-white); color: transparent; filter: blur(3px);}
.storyPart .text-wrap > p:nth-of-type(7) { position: absolute; font-size: 8rem; top: 40%; left: 30%; transform: rotate(-8deg); -webkit-text-stroke: .25px var(--color-white); color: transparent; filter: blur(1.5px);}
.storyPart .text-wrap > p:nth-of-type(8) { position: absolute; font-size: 10rem; top: 41.5%; left: 15%; transform: rotate(-12deg); }
.storyPart .text-wrap > p:nth-of-type(9) { position: absolute; font-size: 8rem; top: 47%; right: 5%; transform: rotate(19deg); -webkit-text-stroke: 2px var(--color-red); color: transparent; filter: blur(3px); }
.storyPart .text-wrap > p:nth-of-type(10) { position: absolute; font-size: 8rem; top: 48%; right: 5%; transform: rotate(9deg); }
.storyPart .text-wrap > p:nth-of-type(11) { position: absolute; z-index: 5; background-color: var(--color-background); font-size: 40rem; top: 55%; left: 50%; transform: translateX(-50%); }

.storyPart .text-wrap .story-text { width: 100%; height: 100%; position: absolute; top: 0; right: 0; }
.storyPart .text-wrap .story-text p { position: absolute; right: 15%; transform: rotate(12deg); font-size: 10.5rem; filter: blur(6px); opacity: 0.2; }
.storyPart .text-wrap .story-text > p:first-child { position: absolute; top: 10%; right: 10%; transform: rotate(6deg); filter: blur(0); -webkit-text-stroke: 2px var(--color-red); color: transparent; opacity: 1; }
.storyPart .text-wrap .story-text p:nth-of-type(2) { top: 8%; }
.storyPart .text-wrap .story-text p:nth-of-type(3) { top: 10%; right: 10%; }
.storyPart .text-wrap .story-text p:nth-of-type(4) { top: 12%; right: 5%; }

.storyPart .img-wrap { filter: contrast(100%) brightness(75%); font-size: 60rem; }
.storyPart .img-wrap img { display: block; width: 40%; }
.storyPart .img-wrap .right { margin-left: 1.825em; margin-top: -0.75em; }
.storyPart .img-wrap .left { width: 30%; margin-top: 0.5em; margin-left: 0.075em; transition: ease-out .5s; }
.storyPart .img-wrap .eye01 { width: 15%; margin-left: 0.5em; transition: all 1s; }
.storyPart .img-wrap .eye02 { width: 40%; margin-left: 1.6em; margin-top: -0.5em; transition: all 1s; }
.storyPart .img-wrap .eye03 { width: 30%; margin-left: 0.35em; margin-top: -0.1em; transition: all 1s; }
.storyPart .img-wrap .eye04 { width: 40%; margin-left: 1.6em; transition: all 1s; }
.storyPart .img-wrap .eye05 { width: 45%; margin-left: 0; margin-top: -0.25em; transition: all 1s; }
.storyPart .img-wrap .eye06 { width: 15%; margin-left: 1.6em; transition: all 1s; }
.storyPart .img-wrap .eye07 { z-index: 5; width: 40%; margin-left: 0.25em; margin-top: 0.15em; transition: all 1s; }
.storyPart .img-wrap .eye08 { width: 25%; margin-left: 1.7em; margin-top: -0.75em; transition: all 1s; }

.endding-story { position: relative; bottom: -50%; z-index: 0; width: 100%; height: 200vh; max-height: 2160px; background-color: var(--color-background); }
.endding-story p:first-child { position: relative; z-index: 3; top: -20%; left: 50%; transform: translateX(-50%); font-size: 13rem; white-space: nowrap; -webkit-text-stroke: .25px var(--color-white); color: transparent; }
.endding-story p:first-child::before { position: absolute; content: attr(data-text); width: 0; color: #490505; transition: 1s; overflow: hidden; }
.endding-story p:first-child:hover::before { width: 100%; }
.endding-story p:nth-of-type(2) { position: relative; z-index: 3; top: 55%; left: 5%; font-size: 14rem; white-space: nowrap; -webkit-text-stroke: 3px var(--color-red); color: transparent; }
.endding-story p:nth-of-type(2)::before { position: absolute; content: attr(data-text); width: 0; color: #490505; transition: 1s; overflow: hidden; }
.endding-story p:nth-of-type(2):hover::before { width: 100%; }
.endding-story > img { position: absolute; top: 20%; right: 10%; }
.endding-story > img:nth-of-type(1) { filter: drop-shadow( 16px 16px 20px #490505); }
.endding-story > img:nth-of-type(2) { top: 21%; right: 0; width: 90%; z-index: 2; }
.endding-story > img:nth-of-type(3) { top: -20%; left: 0; width: 45%; z-index: 2; }
.endding-story > img:nth-of-type(4) { top: -30%; right: 0; width: 35%; z-index: 2; }
.endding-story .endding-wrap { position: relative; z-index: 1; width: 100%; height: 100%; }
.endding-story .endding-wrap > img { position: absolute; z-index: 0; width: 60%; bottom: -15%; left: 20%; }


/* whitePart */
.whitePart { position: relative; z-index: 3; height: 300vh; max-height: 2160px; background-color: var(--color-white); clip-path: polygon(50% 15%, 100% 0, 100% 70%, 50% 85%, 0 70%, 0 0); }
.whitePart .change { width: 5%; position: sticky; top: 50%; left: 50%; transform: translateX(-50%); filter: brightness(0); }
.whitePart p { position: absolute; font-size: 12rem; color: var(--color-background); left: 10%; top: 15%; }
.whitePart p:nth-of-type(2) { position: relative; top: 15%; left: 25%; text-align: left; font-size: 10rem; background: linear-gradient(to right, red, #fff 40%); -webkit-text-stroke: 1px var(--color-background); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.whitePart p:nth-of-type(3) { top: 60%; right: 10%; text-align: right; }
.whitePart p:nth-of-type(4) { position: relative; top: 53%; left: 30%; text-align: left; font-size: 10rem; background: linear-gradient(to left, red 50%, #fff 90%); -webkit-text-stroke: 1px var(--color-background); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.whitePart img { position: absolute; }
.whitePart img:nth-of-type(2) { width: 150%; top: 28.5%; left: 0; transform: translateX(0%); animation: slides 15s linear infinite;  }
.whitePart img:nth-of-type(3) { width: 220%; top: 43%; left: 0; transform: translate(0, -40%); animation: slide 10s linear infinite; }
.whitePart img:nth-of-type(4) { width: 150%; top: 53.1%; left: 0; transform: translateX(0); animation: slides 15s linear 1s infinite;  }
@keyframes slides { from { transform: translateX(-30%); } to { transform: translateX(0); } }
@keyframes slide { from { transform: translate(0, -40%); } to { transform: translate(-50%, -40%); } }
.whitePart img:nth-of-type(5) { width: 35%; top: 5%; right: -5%; transform: rotate(90deg); }
.whitePart img:nth-of-type(6) { width: 25%; top: 55%; left: 5%; transform: rotate(-90deg); }

/* eyeEndding */
.eyeEndding { position: relative; margin-top: -35%; height: 200vh; max-height: 2160px; background-color: var(--color-background); }
.eyeEndding .eye-moves { transition: all .25s; width: 5%; position: sticky; z-index: 2; top: 50%; left: 50%; transform: translateX(-50%); }
.eyeEndding img:nth-of-type(2), .eyeEndding img:nth-of-type(3) { width: 100%; position: absolute; left: 0; transition: all 1s; }
.eyeEndding img:nth-of-type(2) { z-index: 1; top: -10%; }
.eyeEndding img:nth-of-type(3) { z-index: 0; top: -5%; }

/* FOOTER */
footer { position: relative; width: 100%; height: 100vh; max-height: 1080px; display: flex; justify-content: center; align-items: center; background: linear-gradient(to bottom, rgba(33, 33, 33, 0), #29CCCA); }
footer img { position: absolute; width: 20%; top: 5%; }
footer img:nth-of-type(1) { left: -5%; animation: show 5s ease-in infinite alternate; }
@keyframes show { to { left: 0; } }
footer img:nth-of-type(2) { right: -5%; width: 18%; animation: shows 5s ease-in infinite alternate; }
@keyframes shows { to { right: 0; } }
footer img:nth-of-type(3) { width: 5%; top: 35%; left: 50%; transform: translateX(-50%); }
footer span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; font-size: 6.4rem; color: var(--color-white); }
footer p { margin-top: 35em; font-size: var(--font-size-large); font-family: var(--font-Pretendard); font-weight: 300; color: rgba(255, 255, 255, 0.5); }