@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; 
    overflow: hidden;
} 
    
::-webkit-scrollbar { 
    display: none;
}

a { text-decoration: none; }

.paragraph-1 { width: 100%; height: 100vh; position: relative; }
.header { position: absolute; top: 22px; left: 44px; width: 722px; } 
.header > ol { display: flex; flex-direction: row; justify-content: space-between; }
.header > ol > li { font-family: 'Noto Sans CJK KR'; font-size: 15px; line-height: 21px; }

/* hamburger-btn */
.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; }
.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; }

/* content-box */
.content-box {position: absolute; top: 170px; left: 455px; width: 1020px; display: flex; flex-direction: column; justify-content: space-between;}

/* hover content - come*/
.come { width: 100%; height: 100%; position: absolute; top: 175px; opacity: 0; overflow: hidden;}
.come > span {font-family: 'NeuePixelGrotesk'; color: #fff; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; font-size: 180px; line-height: 170px;}
.come > span:nth-child(1) { margin-left: -65px;}
.come > span:nth-child(2) { padding-left: 440px;}
.come > img { margin-left: 461px; width: 1013px; height: 560px; z-index: 800;}

/*  hover content - pixelation */
.pixelation { width: 1153px; height: 744px; position: absolute; top: 160px; left: 383px; display: flex; justify-content: space-between; flex-direction: column; opacity: 0;}
.pixelation > div { display: flex; flex-direction: column; justify-content: center; }
.pixelation > .black { width: 1153px; height: 168px; background-color: #000;}
.pixelation > .white { width: 1150px; height: 205px; background-color: #fff; border: 2px solid #000; margin-top: 290px;}
.pixelation-text {font-family: 'NeuePixelGrotesk'; font-size: 98px; line-height: 98px; color: #fff; text-transform: uppercase; line-height: 168px; padding-left: 78px; }
.pixelation-ko {font-family: 'Noto Sans KR', sans-serif; font-size: 21px; line-height: 33px; color: #000; padding-left: 78px; }

/* number */
.number { width: 445px; height: 160px;}
.delight {width: 750px; height: 160px;}
.insight {width: 720px; margin-left: 300px; height: 160px;}
.re { height: 160px;}
.re > img { margin-left: 25px;}
.re:hover span { font-family:'NeuePixelGrotesk'; }

/* icon */
.icon { position: fixed; top: 192px; right: 445px; z-index: 5; opacity: 1;}
.icon > img {width: 127px; height: 127px;}

/* background */
div.background { position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: flex;  z-index: -1; }
div.background > div.rec { border-right: 1px solid #838383; height: 100%; width: 100%;  flex: 1; }
div.background > div.rec:last-child { border-right:none; }
div.background-2 { position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: flex; z-index: -1;}
div.background-2 > div.rec-2 { border-right: 1px solid #575757; height: 100%; width: 100%;  flex: 1; }
div.background-2 > div.rec-2:last-child { border-right:none; } 

div.background-3 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; display: flex; flex-direction: column; justify-content: flex-start;}
div.background-3 div.rec { border-right: 1px solid #838383; border-bottom:1px solid #838383; height: 100%; width: 100%; }
div.background-3 > div {display: flex; flex-direction: row; justify-content: space-between; }

div.background-3 > .line-1 { flex: 1;}
div.background-3 > .line-2 { flex: 1;}
div.background-3 > .line-3 { flex: 0.5;}

div.background-3 > .line-1 > div.rec:nth-child(1) { flex: 1; }
div.background-3 > .line-1 > div.rec:nth-child(2) { flex: 3; }
div.background-3 > .line-1 > div.rec:nth-child(3) { flex: 1; }

div.background-3 > .line-2 > div.rec:nth-child(1) { flex: 1; }
div.background-3 > .line-2 > div.rec:nth-child(2) { flex: 3; }
div.background-3 > .line-2 > div.rec:nth-child(3) { flex: 1; }

div.background-3 > .line-3 > div.rec:nth-child(1) { flex: 1; }
div.background-3 > .line-3 > div.rec:nth-child(2) { flex: 3; }
div.background-3 > .line-3 > div.rec:nth-child(3) { flex: 1; }




/* font */
.normal { font-family: 'NONNaturalGrotesk_TrialVersion-Regular'; font-size: 180px; line-height: 170px; margin: 0px; color: black; } 
.normal:nth-child(1) { letter-spacing: -8px;}
.normal:nth-child(3) {margin-left: -10px;}
.pixel { font-family: 'NeuePixelGrotesk'; font-size: 180px; line-height: 180px; margin: 0px; color: black; padding-top: 8px; }
.pixel:nth-child(1) {letter-spacing: -12px;}
.outline > span{ text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.pixel-font { font-family: 'NeuePixelGrotesk';}




/* paragraph-2 */
.paragraph-2 { width: 100%; height: 600vh; background-color: black; z-index: -3; position: relative;}
.black-div { position: absolute; width: 100%; z-index: 20;}


.text-box { position: relative; width: 100%; height: 100%; margin-top: -200px;}

.re-box { font-family: 'NONNaturalGrotesk_TrialVersion-Regular'; font-size: 170px; color: #fff; position: sticky; top: 370px; left: 460px; margin-bottom: 313px;} 


.text-area { width: 60%; height: 100vh; float: right; }
.title { font-family: 'NeuePixelGrotesk'; font-size: 170px; color: #fff; text-transform: uppercase;}
.ko { font-family: 'Noto Sans KR', sans-serif; font-size: 21px; line-height: 40px; color: #fff; padding-left: 20px;}


.text-area:nth-child(1) {margin-top: 427px;}




/*paragraph-3*/
.paragraph-3 { width: 100vw; height: 100vh; position: relative;}

.overview-box {width: 988px; height: 493px; position: absolute; top: 208px; left: 450px; }
.ko-text { font-family: 'Noto Sans KR', sans-serif; font-size: 21px; line-height: 40px;  color: #000; padding-top: 75px;}

.top-btn { width: 20%; height: 20%; background-color: #000; position: absolute; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; }

/* animation */
.animate__animated.animate__fadeInRight {
    --animate-duration: 0.5s; }

.animate__animated.animate__rotateIn {--animate-duration: 0.5s;}
.animate__animated.animate__shakeY {--animate-duration: 2s; --animate-delay: 0.2s;}
.re img:nth-child(2){animation-delay:0.2s; margin-left: 70px;}
.re img:nth-child(3){animation-delay:0.25s;}
.re img:nth-child(4){animation-delay:0.3s;}
.re img:nth-child(5){animation-delay:0.35s;}
.re img:nth-child(6){animation-delay:0.35s;}
.animate__animated.animate__fadeIn  {--animate-duration: 0.5s;}
.animate__animated .animate__fadeInDown:nth-child(1) {animation-delay:0.2s;}
.animate__animated .animate__fadeInDown:nth-child(2) {animation-delay:0.25s;}

.animate__animated.animate__fadeInUp:nth-child(1)  {animation-delay:0.1s;}
.animate__animated.animate__fadeInUp:nth-child(2)  {animation-delay:0.2s;}
.animate__animated.animate__fadeInUp:nth-child(3)  {animation-delay:0.3s;}
.animate__animated.animate__fadeInUp:nth-child(4)  {animation-delay:0.4s;}

.animate__animated.animate__rotateIn {animation-delay:0.6s;}
.animate__animated.animate__backInDown,.animate__animated.animate__backInLeft {animation-delay:1.4s;}