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

a { text-decoration: none; }

.header { position: absolute; top: 22px; left: 44px; width: 722px; font-family: 'Noto Sans CJK KR';} 
.header > ol { display: flex; flex-direction: row; justify-content: space-between; }
.header > ol > li { font-size: 15px; line-height: 21px; }
.black-div1 { position: absolute; width: 100%; height: 100%; z-index: 5; pointer-events: none;}
/* 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 */
.content-area { width: 100%; height: 90%; position: absolute; top: 10%; border-top: 2px solid #000;}
.overview-title { width: 4.9%; height: 100%; border-right: 2px solid #000; position: fixed; z-index: 3;}

.check-box1 { width: 30px; height: 30px; border: 2px solid #000; position: absolute; top: 41%; left: 33%; background-color: #000; }
.check-box2 { width: 30px; height: 30px; border: 2px solid #000; margin-top: 27px; margin-left: 30px; }
.meun-title1 {font-family: 'NONNaturalGrotesk_TrialVersion-Regular'; font-size: 50px; line-height: 180%; text-transform: uppercase; writing-mode:vertical-lr; transform: rotate(180deg); margin-top: 99px;}
.meun-title2 {font-family: 'NONNaturalGrotesk_TrialVersion-Regular'; font-size: 50px; line-height: 180%; text-transform: uppercase; writing-mode:vertical-lr; transform: rotate(180deg); margin-top: 38px;}



.overview-area {width: 95%; height: 100%; position: absolute; top: 0; left: 4.9%; overflow: scroll;}
.overview-content {width: 140vw; height: 100%; display: flex; flex-direction: row; position: absolute; left: 0;}

/* overview */
.box-wrap1 { flex: 3; display: flex; align-items: center; flex-direction: row; justify-content: center;}
.content-area1 { width: 90%; height: 78%;  display: flex; flex-direction: column; justify-content: space-between;}
.line {width: 96%; height: 26.2%; display: flex; flex-direction: row; justify-content: space-between;}
.box {flex: 1; background-color: #fff; border: 2px solid #000;}
.box:nth-child(2) {margin: 0 28px;}

.box-wrap2 { flex: 1.5; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.content-area2 { width: 90%; height: 78%;  display: flex; flex-direction: column; justify-content: space-between;}
.pic-box {width: 100%; height: 90%; }
.text-box {width: 100%; height: 10%; }

/* font */
.title { font-family: 'NONNaturalGrotesk_TrialVersion-Regular'; font-size: 50px; margin: 20px; line-height: 70px;}
.ko {font-family: 'Noto Sans KR', sans-serif; font-size: 17px; margin: 20px; line-height: 22px; font-weight: 500; }
.one { font-size: 20px; font-weight: 800; margin-bottom: 5px; line-height: 29px; }
.ko2 {font-family: 'Noto Sans KR', sans-serif; font-size: 17px; line-height: 22px; font-weight: 500; margin-top: 7px; }
.one2 { font-size: 20px; font-weight: 800; margin-bottom: 5px; line-height: 29px; }

/*  */
.border {
    position: absolute;
    top: 35.5%;
    left: 12%;
    width: 40%;
    height: 29%;
    border: 2px solid #000;
    z-index: -10;
}
.border-line {     
    width: 2px;
    height: 40%;
    position: absolute;
    top: 30%;
    left: 33.2%;
    background-color: #000;
    z-index: -10;
}
.border2 {
    position: absolute;
    top: 49%;
    left: 51%;
    width: 14%;
    height: 30%;
    border: 2px solid #000;
    border-left: none;
    z-index: -10;
}
.border-line2 {
    width: 6%;
    height: 2px;
    position: absolute;
    top: 64.3%;
    left: 65%;
    background-color: #000;
    z-index: -10;
}

/* content2 */
.roadmap-area { width: 100%; height: 100%; position: absolute; top: 0; left: 95.1%; z-index: 2; }
.roadmap-title { width: 4.9%; height: 100%; border-right: 2px solid #000;  
    border-left: 2px solid #000; background-color: #fff; float: left;}
.roadmap-wrap {overflow: scroll;}
.roadmap-content { background-color: #fff; width: 195%; height: 100%;/*  position: absolute; */ left: 4.5%; z-index: -1; }
.roadmap-content > img {padding: 2.4%;}