@charset "UTF-8";

* {padding:0; margin:0; line-height: normal;}
a {text-decoration:none;}
ul,ol,li {list-style:none;}
img {width:100%; height:100%; object-fit:cover;}

body {background-color:#1C1D21; overflow-x:hidden; color:#Fff;}
.wrap {width:100%; /* padding:0 35px; */}
h1, h2, h3, h4 {font-family:'Roboto_Mono'; line-height: normal;}
p, .button {font-family:'poppins'; line-height: normal;}

/* coin */
.coin-container {position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; transition:opacity 0.3s ease; }
.coin-container img {position:absolute; top:60%; left:50%; transform:translate(-50%, -50%); opacity:0; width:100%; height:100%; transition:width 0.3s ease;}
.coin-container.scrolled img { width:100%; top:50%; height:100%; bottom:0;}
body.scroll-lock { overflow:hidden;}

#mdi-header {border-bottom:1px solid rgba(255,255,255,0.1); color:#fff;}
#mdi-header .inner {position:relative; display:block; width:100%; height:60px;}
#mdi-header .inner .menu {display:flex;}
#mdi-header .inner .menu .logo {width:69px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
#mdi-header .inner .menu > li:last-child {color:#D3FE59; text-align:center; width:75px; position:absolute; right:15px; height:60px; line-height:60px; border-bottom:3px solid transparent; border-image:linear-gradient(to right,#5A98CD, #D3FE59); border-image-slice:1;}

input[id=trigger]{display:none;}
label[for=trigger]{width:21.5px; height:19.5px; display:block; position:absolute; left:15px; top:50%; transform:translateY(-50%); cursor:pointer; transition:0.3s;}
label[for=trigger] span{position:absolute; height:2px; width:100%; left:0; background-color:#fff; transition:0.3s;}
label[for=trigger] span:nth-child(1){top:0;}
label[for=trigger] span:nth-child(2){top:50%;}
label[for=trigger] span:nth-child(3){top:100%;}
/* input[id=trigger]:checked + label[for=trigger] span:nth-child(1){top:50%; transform:rotate(45deg);}
input[id=trigger]:checked + label[for=trigger] span:nth-child(2){opacity:0;}
input[id=trigger]:checked + label[for=trigger] span:nth-child(3){top:50%; transform:rotate(-45deg);}
.sidebar{background-color:lightblue; width:100vw; height:100%; position:fixed; left:-100vw; transition:0.3s; z-index:999;}
input[id=trigger]:checked ~ .menu .sidebar{left:0;} */
.sidebar {display:none;}

.section-mdi {padding-top:45px !important;}

/* con1 */
.wrap .con1 {text-align:center; height: calc(100vh - 60px); padding:0 23px;}
.wrap .con1 .txt h1 {padding-bottom:20px; font-size:32px; font-weight:500; letter-spacing: -1px; color:#D3FE59;}
.wrap .con1 .txt p {font-size:14px; font-weight:300; color:#fff;}

/* con2 */
.wrap .con2 {padding:300px 0 250px;}
.wrap .con2 .txt {display:inline-block; position:relative; top:0; left:0; width:100%; padding:0 35px;}
.wrap .con2 .txt h2 {position:absolute; top:-61px; left:65px; z-index:9; font-size:32px; font-weight:500; letter-spacing: -1px; line-height:1.2; color:#fff;}
.wrap .con2 .txt p {font-size:14px; font-weight:300; line-height:1.7; color:rgba(255,255,255,0.5); padding:35px 30px; border:1px solid rgba(255,255,255,0.2); border-radius:10px; background-color:rgba(36, 37, 41, 0.5);backdrop-filter: blur(10px);}

/* con3 */
.wrap .con3 {padding:250px 0 250px;}
.wrap .con3 .txt {display:inline-block; position:relative; top:0; left:0; width:100%; padding:0 35px;}
.wrap .con3 .txt h2 {position:absolute; top:-61px; left:65px; z-index:9; font-size:32px; font-weight:500; letter-spacing: -1px; line-height:1.2; color:#fff;}
.wrap .con3 .txt p {font-size:14px; font-weight:300; line-height:1.7; color:rgba(255,255,255,0.5); padding:35px 30px; border:1px solid rgba(255,255,255,0.2); border-radius:10px; background-color:rgba(36, 37, 41, 0.5);backdrop-filter: blur(10px);}

/* con4 */
.wrap .con4 {padding:200px 35px 188px;}
.wrap .con4 .txt h3 {padding-bottom:20px; font-size:32px; font-weight:500; letter-spacing: -1px; line-height:1; color:#fff;}
.wrap .con4 .txt .roadmap {display:flex;}
.wrap .con4 .txt .roadmap .map {min-width:285px; height:100%; margin-right:10px; padding:30px; border:1px solid rgba(255,255,255,0.2); border-radius:10px; background-color:rgba(36, 37, 41, 0.5);backdrop-filter: blur(10px); transition:.3s}
.wrap .con4 .txt .roadmap .map:last-child {margin-right:0;}
.wrap .con4 .txt .roadmap .map:hover {background-color:#D3FE59;}
.wrap .con4 .txt .roadmap .map:hover .box .date,
.wrap .con4 .txt .roadmap .map:hover .box .num {color:#000;}
.wrap .con4 .txt .roadmap .map:hover .box .dec {color:rgba(0,0,0,0.5);}
.wrap .con4 .txt .roadmap .map:hover .box .dec li:after {background:url(../img/arrow2-hover.svg) no-repeat;}
.wrap .con4 .txt .roadmap .map .box {font-family:'poppins'; color:#fff;}
.wrap .con4 .txt .roadmap .map .box .date {font-size:32px; font-weight:600; line-height:1; transition:.3s;}
.wrap .con4 .txt .roadmap .map .box .num {font-size:18px; font-weight:600; padding:10px 0; transition:.3s;}
.wrap .con4 .txt .roadmap .map .box .dec {font-size:14px; font-weight:400; color:rgba(255,255,255,0.5); transition:.3s;}
.wrap .con4 .txt .roadmap .map .box .dec li {position:relative; padding-left:9px; margin-bottom:10px;}
.wrap .con4 .txt .roadmap .map .box .dec li:after {content:''; width:4px; height:6px; background:url(../img/arrow2.svg) no-repeat; position:absolute; top:4.5px; left:0; transition:.3s;}
.wrap .con4 .txt .roadmap .map .box .dec li:last-child {margin-bottom:0;}

/* con5 */
.wrap .con5 {padding: 150px 0 58px;}
.wrap .con5 .txt {padding:0 35px;}
.wrap .con5 .txt h3 {padding-bottom:20px; font-size:32px; font-weight:500; letter-spacing: -1px; line-height:1; color:#fff;}
.wrap .con5 .txt div {font-family:'Roboto_Mono'; font-size:18px; font-weight:500; color:#fff; line-height:1.5;}
.wrap .con5 .img {display:flex; flex-direction:column; position:relative;}
.wrap .con5 .img .graph {position:relative; width:100%; height:auto; top:0; left:0; padding-bottom:70%;}
.wrap .con5 .img .graph img{position:absolute;}
.wrap .con5 .img .per {display:flex; flex-direction:column; padding:0 35px;}
.wrap .con5 .img .per img {margin-bottom:15px;}
.wrap .con5 .img .per img:last-child {margin-bottom:0;}
.graph1 {width:6.79%; height:auto; top:19.5%; left:43.88%;}
.graph2 {width:13.7%; height:auto; top:21.2%; left:49%;}
.graph3 {width:34.8%; height:auto; top:27.5%; left:51.1%;}
.graph4 {width:29.7%; height:auto; bottom:16.1%; left:26.2%;}
.graph5 {width:32.3%; height:auto; bottom:32.9%; left:14%;}
.graph6 {width:11%; height:auto; top:18.5%; left:37.8%;}
.per1 {width:176px;}
.per2 {width:311px;}
.per3 {width:227px;}
.per4 {width:261px;}
.per5 {width:177px;}
.per6 {width:277px;}
.shadow1 {width:100%; height:100%; position:absolute; top:-275px; left:50%; transform:translateX(-50%); z-index:-1;}
@media screen and (max-width:500px){
    .per1,.per5 {width:88px;}
    .per2 {width:147px;}
    .per3 {width:111px;}
    .per4 {width:130px;}
    .per6 {width:133px;}
    .shadow1 {top:-160px;}
}

/* con6 */
.wrap .con6 {padding:58px 15px 0 15px;}
.wrap .con6 .box {text-align:center; padding:45px 20px; border:1px solid rgba(255,255,255,0.2); border-radius:10px; background-color:rgba(36, 37, 41, 0.5); backdrop-filter: blur(10px);}
.wrap .con6 .box .txt h4 {font-size:14px; font-weight:400; letter-spacing: -1px; line-height:1; color:#fff;}
.wrap .con6 .box .txt h3 {padding:20px 0 35px; font-size:23px; font-weight:500; letter-spacing: -1px; line-height:1.2; color:#fff;}
.wrap .con6 .box .txt p {padding-bottom:50px; font-size:14px; font-weight:300; color:rgba(255,255,255,0.5); line-height:1.7;}
.wrap .con6 .box .button {padding:11.5px 15px 11.5px 0; border-radius:10px; width:100%; background-color:#D3FE59; color:#000;}
.wrap .con6 .box .button span {position:relative; font-size:16px; font-weight:500; line-height:1;}
.wrap .con6 .box .button span:after {content:''; display:block; position:absolute; top:5px; right:-28px; background:url(../img/arrow.svg) no-repeat center center; background-size:11.5px; width:23px; height:14px;}

/* footer */
.footer {padding:45px 0 55px; display:flex; flex-direction:column; align-items:center;}
.footer img {width:257px; padding-bottom:16px;}
.footer p {font-size:14px; font-weight:300; color:rgba(255,255,255,0.6);}