@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

body {
    width: 100vw;
    height: 100vh;
    position: relative;    
    -ms-overflow-style: none; 
} 
    
::-webkit-scrollbar { 
    display: none;
}

a { text-decoration: none; }

/* cursor:url(customcursor.cur),auto; */

.paragraph-1 { width: 100%; height: 100vh; position: relative; display: flex; flex-direction: row;}
.black-div1 { position: absolute; height: 100%; width: 100%; z-index: 5; pointer-events: none;}

/* hambuerger */
.hamburger { transition: .3s ease-in-out; width: 22px; height: 12px;
    z-index: 100; position: fixed; right: 50px; top: 35px; padding: 20px; }
.hamburger span { position: absolute; top: 0; width: 100%; height: 2px; background-color: #000; transition: transform .2s ease-in-out, opacity .2s ease-in-out; text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;}
.hamburger span:nth-child(1) { top: 0px; width: 25px;}
.hamburger span:nth-child(2) { top: 8px; width: 25px;}
.hamburger.active span { background-color: #000; }
.hamburger.active span:nth-child(1) { transform: rotate(-45deg); top: 8px; }
.hamburger.active span:nth-child(2) { transform: rotate(45deg); top: 8px; }

/* menu */
.menu { position: fixed; top: 0px; left: 0; width: 0%; height: 0%; background-color: #fff; overflow: hidden; text-decoration: none; opacity: 0; z-index: 5; }
.menu-list { width: 100%; height: 100vh; display: flex; flex-direction:column; }
.menu-list li { height: 100%; flex: 1; font-family: 'NONNaturalGrotesk_TrialVersion-Regular'; font-size: 128px; line-height: 190px; border: 2px solid #000; padding-left: 53px; color: #000000;}
.menu-list > a { flex: 1;}
.menu-list li:hover { font-family: 'NeuePixelGrotesk'; background-color: #000000; font-style: italic;  color: #fff; }
/* overlay */
.menu.visible { opacity: 1; height: 100vh; width: 100vw; }


/* background */
.background { width: 100%; height: 100%; }
.line-1 { width: 1px; height: 100%; position: absolute; top: 0; left: 50%; background-color: #747474; }
.line-2 { width: 100%; height: 1px; position: absolute; top: 50%; left: 0; background-color: #747474;}


/* icon-area */
.icon-area { flex: 1; background: #000; position: relative;}
.re-content { width: 100%; height: 100%;  position: relative; display: flex; align-items: center;}
.re-box {display: flex; flex-direction: column;  justify-content: space-between; align-items: center; width: 100%; height: 85%; z-index: 2;}
.re-icon { flex: 3; display: flex; align-items: center;}
.re-box > span { font-family: 'NeuePixelGrotesk'; font-size: 145px; flex: 1; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; color: #000; text-transform: uppercase; }
.re-box > span > sup {vertical-align: top; font-size: 35px; font-weight: 600; line-height: 1; padding-left: 10px;}
.list-area  {flex: 1; position: relative; }

/* sup */
.title > sup {vertical-align: top; font-size: 35px; font-weight: 600; line-height: 1; padding-left: 10px;}

/* explain */
.explain-area { width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; opacity: 0; }
.explain-box { width: 100%; height: 100%; display: flex;
 flex-direction: column; justify-content: center; background-color: #fff; position: relative;}
.explain-area.visible {opacity: 1; pointer-events: auto; }


.title {font-family: 'NeuePixelGrotesk'; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; color: #fff; font-size: 111px; text-transform: uppercase; margin-left: 73px;}
.text { font-family: 'Noto Sans KR', sans-serif; font-size: 17px; line-height: 32px; margin-top: 100px; width: 90%; margin-left: 73px;}
/* icon */
.icon-box { position: absolute; right: 47px; bottom: 43px;}

/* list-box*/
.list-box{ opacity: 1; width: 100%; height: 100%; overflow: scroll;}

.list { display: flex; flex-direction: column; margin-left: 75px; opacity: 1; }
.list > span { padding-top: 50px; font-family:'NONNaturalGrotesk_TrialVersion-Regular'; font-size: 111px; color: black; text-transform: uppercase; }
.list > span > sup { vertical-align: top; font-size: 24px; font-weight: 600; line-height: 0;}
.list > span:nth-child(1) {padding-top: 84px;}
.list > span:last-child {padding-bottom: 114px;}
/* ko */

.list-ko { font-size: 21px; font-family: 'Noto Sans CJK KR'; position: absolute; top: 46%; left: 73px;}

.list > span:hover { font-family: 'NeuePixelGrotesk'; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; color: #fff;}


/* how-area */
.how-area { width: 356px; height: 356px; position: absolute; top: 24%; left: 25%;     z-index: 3; }

/* re bg  */
.top-bg { opacity: 0; background-color: crimson; width: 100%; height: 50%; position: absolute; top: 0; left: 0; }
.top-bg > img { width: 100%; height: 100%;}
.bottom-bg {opacity: 0; background-color: crimson; width: 100%; height: 50%; position: absolute; top: 50%; left: 0;}
.bottom-bg > img { width: 100%; height: 100%;}


/* cursor */

/* animation */
.animate__animated.animate__flipInX {animation-delay:0.4s;}
.animate__animated.animate__fadeInUp:nth-child(4) {animation-delay:0.6s;}
.animate__animated.animate__bounce {animation-delay:0.6s;}
.animate__animated.animate__animate__fadeInUpBig {animation-delay:0.6s;}