@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@100;300;400;500&display=swap');

html, body {min-width: 1280px; font-size: 1px;}

body * {
    font-size: 15rem;
    font-weight: 400;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: -1px;
    box-sizing: border-box;
}

body .wrap {position:relative; margin-left: auto; margin-right: auto; padding: 25rem 30rem; width: 1280rem; height: 100%;}
header {position:relative; height: 110rem; background-color: #fff; box-shadow: 1rem 1rem 10rem rgba(117, 116, 116, 0.2); z-index: 2;}
header .logo {position: absolute; top: 25rem; left: 30rem; width: 120rem; height: 60rem;}
header .logo a,
header .logo a img {width:100%; display: block;}

header .gnb {position: relative; margin-left:120rem; padding: 15rem 130rem 15rem 0; text-align: right; z-index: 1;}
header .gnb-list {display: inline-block;}
header .gnb-list li {padding: 0 15rem; display: inline-block; }
header .gnb-list li a {padding: 15rem; font-family: 'Montserrat', sans-serif; font-size: 20rem; color:#000; font-weight: 500; line-height: 30rem; text-decoration: none; }
header .gnb-list li:hover a,
header .gnb-list li.on a {color:#e84417; }

header .language {position: absolute; top: 50%; right: 0; width: 124rem; height:38rem; transform:translateY(-50%); background-color: #fff; text-align: left;}
header .language dt {padding: 10rem 15rem; height:inherit; font-size:15rem; color: #0a0a0a; line-height: 18rem; background: url(../images/header_select_bg.png) top right no-repeat; border: 1rem solid #e84417; cursor: pointer;}
header .language dd {position:absolute; top:37rem; left:0; right:0; height:0px; background-color: #fff; border: 1rem solid #e84417; overflow:hidden; display: none; }
header .language dd li a {padding: 10rem 15rem; font-size: 15rem; color: #0a0a0a; text-decoration: none; display: block;}
header .language.open dt {background-position: bottom right;}
header .language.open dd {height: 72rem; display: block; transition: height 0.7 ease-in;}

header.fixed {position: fixed; top:0; left:0; right:0; height: 80rem; transition: height 0.5s ease-in;}
header.fixed .logo {top:10rem; transition: top 0.5s ease-in; }
header.fixed .gnb {padding: 0 130rem 0 0; transition: padding 0.5s ease-in; }

main .btn-twitter,
main .btn-telegram {position: fixed;  right: 30rem; padding: 0; width:50rem; height: 50rem; text-align: center; border: none; outline: none; cursor: pointer; font-size: 0;}
main .btn-twitter {bottom: 210rem; background:url(../images/btn_twitter.png) center center no-repeat; background-size: 100% auto;}
main .btn-telegram {bottom: 155rem; background:url(../images/btn_telegram.png) center center no-repeat; background-size: 100% auto;}
main .btn-twitter:hover,
main .btn-telegram:hover {transform: scale(1.1); }

main .btn-wallet{position: fixed;  right: 30rem; padding: 0; width:50rem; height: 88rem; text-align: center; border: none; outline: none; cursor: pointer; font-size: 0;}
main .btn-wallet {bottom: 265rem; background:url(../images/btn_wallet2.png) center center no-repeat; background-size: 100% auto;}
main .btn-wallet:hover {transform: scale(1.1); }

main .btn-top {position: fixed; bottom: 90rem; right: 30rem; padding: 10rem 5rem; width:50rem; height: 50rem; background: rgba(0, 0, 0, .8); text-align: center; border: none; box-shadow: 1rem 1rem 5rem rgba(255, 255, 255, .2); outline: none; cursor: pointer;}
main .btn-top span {position:relative; padding-top: 5rem; font-family: 'Montserrat', sans-serif; font-size:14rem; color: #fff; line-height:30rem; display: block;}
main .btn-top span::before, 
main .btn-top span::after { position: absolute; top: 3rem; width: 10rem; height: 1rem; background-color: #fff; content: ""; }
main .btn-top span::before {right: 50%; transform: rotate(-45deg) translateX(2rem); }
main .btn-top span::after {left: 50%; transform: rotate(45deg) translateX(-2rem); }

.visual {height:669rem; background: url(../images/top_bg.jpg) top center no-repeat; background-attachment: fixed;  overflow: hidden;}
.visual .wrap {display: flex; align-items: center;}
.visual .text h1{font-family: 'Montserrat', sans-serif; font-size: 48rem; color: #fff; font-weight: 600; animation-name: visualTxt01; animation-duration: 1s;}
@keyframes visualTxt01 {
  0%   {margin-left:-100rem; opacity:0;}
  100% {margin-left:0; opacity:1;}
}
.visual .text p {padding: 25rem 0; font-size: 24rem; color: #fff; font-weight: 500;animation-name: visualTxt02; animation-duration: 1.5s;}
@keyframes visualTxt02 {
  0%   {margin-left:100rem; opacity:0;}
  100% {margin-left:0; opacity:1;}
}

.visual .text .btn {margin-top: 40rem;}
.visual .text .btn span {padding-right: 47rem; display: inline-block; animation-name: visualBtn01; animation-duration: 3s; animation-iteration-count: 1;}
@keyframes visualBtn01 {
  0%   {opacity:0;}
  100% {opacity:1;}
}
.visual .text .btn span + span {margin-left: 40rem; animation-name: visualBtn02; animation-duration: 3s; animation-iteration-count: 1;}
@keyframes visualBtn02 {
  0%   {opacity:0;}
  20%   {opacity:0;}
  100% {opacity:1;}
}
.visual .text .btn span a {position: relative; width: 167rem; height: 45rem; font-family: 'Montserrat', sans-serif; font-size: 12rem; color:#000; font-weight: 700; line-height: 45rem; text-align:center;  text-decoration: none; text-shadow: none; background: #fff; display: block;}
.visual .text .btn span a::after {position:absolute; top: 0; right: -47rem; width:45rem; height:45rem; background:url(../images/top_btn_download.png) center center no-repeat #fff; background-size: 45rem auto; content: "";}
.visual .text .btn span a img {width: 100%; display: block;}
.visual .img{position: absolute; bottom:-1rem; right: 40rem; width: 415rem; height: 578rem; animation-name: visualImg; animation-duration: 1.5s;}
@keyframes visualImg {
  0%   {bottom: -580rem; opacity:0;}
  100% {bottom: 0; opacity:1;}
}
.visual .img img {width:100%; display: block;}

section {padding: 20rem 0;}
section .wrap {transform: translateY(200rem); opacity:0;}
section:first-of-type .wrap {transform: translateY(0); opacity:1;}
section .title {padding: 20rem 0;}
section .title span {padding:20rem 0;font-family: 'Montserrat', sans-serif; font-size:21rem; color: #e84417; font-weight: 700; display: block;}
section .title h3 {font-size:52rem; color: #000; font-weight: 300; line-height: 72rem;}
section.fadeIn .wrap {transform: translateY(0); opacity:1; animation-name: fadeIn; animation-duration: 1.5s;}
@keyframes fadeIn {
  0%   {transform: translateY(200rem); opacity:0;}
  100% {transform: translateY(0); opacity:1;}
}

section .wrap2 {transform: translateY(0); opacity:1;position: relative;margin-left: auto;margin-right: auto;padding: 25rem 30rem;width: 1280rem;}
section .wrap2 .title2 {padding: 20rem 0;}
section .wrap2 .title2 span {padding:20rem 0;font-family: 'Montserrat', sans-serif; font-size:21rem; color: #e84417; font-weight: 700; display: block;}
section .wrap2 .title2 h3 {font-size:52rem; color: #000; font-weight: 300; line-height: 72rem;}

section.about {position:relative;}
section.about::after {position: absolute; left: 0; right:0; bottom:0; height: 960rem; background: #f6f6f6; z-index: -1; content: ""; }
section.about .txt strong {padding: 1rem 3rem 3rem 3rem; font-size: 24rem; color:#fff; font-weight: 400; line-height: 46rem; background-color: #000;;}
section.about .txt p {font-size: 24rem; color:#000; font-weight: 300; line-height: 46rem;}

section.about .count {position:relative; margin:0 auto; padding: 60rem 0; width:1100rem; }
section.about .count img{width: 100%; display: block;}
section.about .count .count-list {position:absolute; width:10%; height:15.4%;}
section.about .count .count-list span {position:absolute; top:-7%; padding:2rem 5rem; width: 120rem; height: 34rem; background: #e84417; font-size: 16rem; color:#fff; line-height: 30rem; text-align: center; border-radius: 17rem; overflow: hidden; display: inline-block;}
section.about .count .count-list strong {position:relative; width: 100%; height: 100%; border-radius: 50%; font-family: 'Montserrat', sans-serif;  font-size: 28rem; color: #e84417; font-weight: 700; text-align: center; line-height: 4; display: inline-block; overflow: hidden; }
section.about .count .count-list.list01 {top:12.2%; left:14.5%; }
section.about .count .count-list.list02 {top:40%; left:8.9%;}
section.about .count .count-list.list03 {top:68.5%; left:14.4%; }
section.about .count .count-list.list04 {top:12.5%; right:14.1%; }
section.about .count .count-list.list05 {top:40%; right:8.5%; }
section.about .count .count-list.list06 {top:69%; right:14.2%;}
section.about .count .count-list.list01 span {left: -65%;}
section.about .count .count-list.list02 span {left: -70%;}
section.about .count .count-list.list03 span {left: -65%;}
section.about .count .count-list.list04 span {right: -70%;}
section.about .count .count-list.list05 span {right: -70%;}
section.about .count .count-list.list06 span {right: -65%;}
section.about .count .count-list.list02 strong,
section.about .count .count-list.list03 strong,
section.about .count .count-list.list06 strong {padding-right: 20rem; }
section.about .count .count-list.list02 strong::after,
section.about .count .count-list.list03 strong::after,
section.about .count .count-list.list06 strong::after {position:absolute; top:50%; right:15rem; margin-top: -2rem; transform: translateY(-50%); font-family: 'Noto Sans KR', sans-serif; font-size: 26rem; color: #e84417; font-weight: 300; content: "만";}
section.about .count .count-list.list06 strong::after {right: 25rem; }

section.about .card-list {padding: 40rem 0; }
section.about .card-list ul {margin:0 auto; padding:0 68rem; text-align: center;}
section.about .card-list ul::after {display: block; clear: both; content: ""; }
section.about .card-list li {float:left; padding: 0 10rem; width: 33.3%; display: inline-block; }
section.about .card-list li .card {padding:20rem; width: 100%; height: 415rem; background: #fff; border-radius: 30rem; box-shadow: 1rem 1rem 10rem rgba(117, 116, 116, 0.2); overflow: hidden;}
section.about .card-list li .card .img {margin:0 auto; padding:15rem 0; width: 160rem; display: block; text-align: center;}
section.about .card-list li .card .img img {width: 100%; display: block;}
section.about .card-list li .card dt {font-size:32rem; color:#000; font-weight: 500; display: block;}
section.about .card-list li .card dd {margin-top: 25rem; text-align: center;}
section.about .card-list li .card dd span {font-size:18rem; color:#000; line-height:30rem; display: block;}

section.about .data-list {padding: 35rem 80rem;}
section.about .data-list dl {position: relative;}
section.about .data-list dl::after {display: block; clear: both; content: "";}
section.about .data-list dt {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 340rem; height: 200rem; }
section.about .data-list dt span {position: absolute; top: 50%; transform: translateY(-50%); padding: 58rem 10rem; width: 170rem; height: 170rem; font-size:24rem; line-height: 54rem; font-weight: 600; background: #fff; border-radius: 50%; box-shadow: 1rem 1rem 10rem rgba(117, 116, 116, 0.2); display:block; overflow: hidden; text-align: center;}
section.about .data-list dt span:first-of-type {left: 15rem;}
section.about .data-list dt span:last-of-type {right: 15rem;}
section.about .data-list dd {float:left; padding: 40rem 0;width:50%; }
section.about .data-list dd span {width: 350rem; height: 64rem; font-size:24rem; line-height: 54rem; text-align: center; border-radius: 32rem; overflow: hidden; display: inline-block;}
section.about .data-list dd:nth-of-type(1),
section.about .data-list dd:nth-of-type(3) {text-align: left;}
section.about .data-list dd:nth-of-type(2),
section.about .data-list dd:nth-of-type(4) {text-align: right;}
section.about .data-list dd:nth-of-type(1) span {border: 5rem solid #faa000; color:#faa000; }
section.about .data-list dd:nth-of-type(2) span {border: 5rem solid #adb525; color:#adb525; }
section.about .data-list dd:nth-of-type(3) span {border: 5rem solid #f1510f; color:#f1510f; }
section.about .data-list dd:nth-of-type(4) span {border: 5rem solid #007a6c; color:#007a6c; }

section.token {position:relative;height:1090rem; background: url(../images/token_bg.jpg) top center no-repeat; }
section.token .title h3 {color: #fff;}
section.token .img {position:relative;margin: 20rem auto 0 auto; width:1100rem;}
section.token .img img {width:100%; display: block;}
section.token .img .text-list{position:absolute;top:65px;left:10px;;width:150px;}
section.token .img .text-list li{margin-top:84px;padding:5px 0 15px 0; line-height:20px;font-size:16px;color:#fff;display:block;text-align:center;}
section.token .text-box{position:absolute;top:50%;left:845px;transform: translateY(-50%);margin-top:120px;}
section.token .text-box dl{padding:20px 0;}
section.token .text-box dt{position:relative;padding:0 20px;font-size:30px;font-weight:normal;color:#ff9eb5;}
section.token .text-box dt::after{position:absolute;top:10px;left:0;width:8px;height:8px;border-radius:50%;overflow:hidden;background:#ff9eb5;content:"";}
section.token .text-box dd{padding: 20px;}
section.token .text-box dd p{font-size:20px;color:#fff;line-height:25px;}


section.block {position:relative;margin:0 auto;height: 780rem; }
section.block .img_box1{display:flex;margin:0 auto;width:1100rem;}
section.block .img_box2{display:flex;margin:0 auto;width:1100rem;height: 850rem;}


section.block2 {position:relative;margin:0 auto;height: 980rem; }
section.block2 .img_box1{display:flex;margin:0 auto;width:1100rem;}
section.block2 .img_box2{display:flex;margin:0 auto;width:1100rem;height: 850rem;}
section.block2 .txt3 {width: 1280rem;position: relative;margin: 0 auto;}
section.block2 .txt3 p {font-size: 24rem; color:#000; font-weight: 300; line-height: 46rem;padding-left: 26rem;padding-bottom: 60rem;}
section.block2 .txt3 p span {font-size: 24rem;  color:#E84417; font-weight: 400;}

section.luniverse {position:relative;margin:0 auto;}
section.luniverse::after {position: absolute; left: 0; right:0; bottom:0; height: 950rem; background: #f6f6f6; z-index: -1; content: ""; }
section.luniverse .img_box2{margin:0 auto;width:1100rem;height: 850rem;}

section.luniverse2 {position:relative;margin:0 auto;}
section.luniverse2::after {position: absolute; left: 0; right:0; bottom:0; height: 900rem; background: #f6f6f6; z-index: -1; content: ""; }
section.luniverse2 .img_box2{margin:0 auto;width:1100rem;height: 645rem;}
section.luniverse2 .txt2 {width: 1280rem;position: relative;margin: 0 auto;}
section.luniverse2 .txt2 strong {font-size: 24rem; padding: 1rem 3rem 3rem 26rem; font-size: 24rem; color:#E84417; font-weight: 400; line-height: 46rem;}
section.luniverse2 .txt2 p {font-size: 24rem; color:#000; font-weight: 300; line-height: 46rem;padding-left: 26rem;padding-bottom: 60rem;}


section.distribution .chart-box {padding: 50rem; height: 655rem; display: flex;}
section.distribution .chart-box .text {padding: 0 70rem; background: #f6f6f6; display: flex; align-items: center; flex: 1 0 40%;}
section.distribution .chart-box .text li {padding:28rem 0;}
section.distribution .chart-box .text li span {font-size: 18rem; font-weight: 700; line-height: 24rem; border-top: 1px solid #000;}
section.distribution .chart-box .text li p {font-size: 24rem; font-weight: 700; line-height: 50rem;}

section.distribution .chart-box .chart-area {padding: 0 20rem; flex: 1 0 60%;}
section.distribution .chart-box .chart {text-align: center; }
section.distribution .chart-box .chart .donut-chart {margin: 0 auto; position: relative; width: 456rem; height: 456rem; }
section.distribution .chart-box .chart .donut-chart .portion { position: absolute; width: 100%; height: 100%; border-radius: 50%; clip: rect(0, 456rem, 456rem, 228rem);}
section.distribution .chart-box .chart .donut-chart .portion .circle {position: absolute; width: 100%; height: 100%; font-size: 1.5rem; border-radius: 50%; clip: rect(0, 228rem, 456rem, 0); }
section.distribution .chart-box .chart .donut-chart .center {position: absolute; margin: auto; top:0;left:0;bottom:0;right:0; width: 226rem; height: 226rem; background: url(../images/distribution_icon.png) center center #fff; border-radius: 50%; }
section.distribution .chart-box .chart .donut-chart .center span {position: absolute; font-size: 24rem; color: #fff; font-weight: 600;}
section.distribution .chart-box .chart .donut-chart .center span.circle01 {top: -60rem; right:30rem;}
section.distribution .chart-box .chart .donut-chart .center span.circle02 {top: 75rem; right: -75rem;}
section.distribution .chart-box .chart .donut-chart .center span.circle03 {bottom: -50rem; right:15rem;}
section.distribution .chart-box .chart .donut-chart .center span.circle04 {bottom: -60rem; left:35rem;}
section.distribution .chart-box .chart .donut-chart .center span.circle05 {top: 145rem; left:-70rem;}
section.distribution .chart-box .chart .donut-chart .center span.circle06 {top: -30rem; left:-5rem;}

section.distribution.fadeIn #part1 {transform: rotate(0deg);}
section.distribution.fadeIn #part1 .circle {background-color: #5a9cd5; animation: graph01 0.5s 1 forwards; }
@keyframes graph01 {
    from {transform: rotate(0deg);}
    to {transform: rotate(36deg);}
}
section.distribution.fadeIn #part2 {transform: rotate(36deg);}
section.distribution.fadeIn #part2 .circle {background-color: #ed7d31; animation: graph02 1s 1 forwards 0.5s; }
@keyframes graph02 {
    from {transform: rotate(0deg);}
    to {transform: rotate(90deg);}
}
section.distribution.fadeIn #part3 {transform: rotate(126deg); }
section.distribution.fadeIn #part3 .circle {background-color: #a5a5a5; animation: graph03 0.5s 1 forwards 1.5s; }
@keyframes graph03 {
    from {transform: rotate(0deg);}
    to {transform: rotate(54deg);}
}
section.distribution.fadeIn #part4 {transform: rotate(180deg); }
section.distribution.fadeIn #part4 .circle {background-color: #ffc003; animation: graph04 0.5s 1 forwards 2s; }
@keyframes graph04 {
    from {transform: rotate(0deg);}
    to {transform: rotate(36deg);}
}
section.distribution.fadeIn #part5 {transform: rotate(216deg); }
section.distribution.fadeIn #part5 .circle {background-color: #4471c4; animation: graph05 0.5s 1 forwards 2.5s;}
@keyframes graph05 {
    from {transform: rotate(0deg);}
    to {transform: rotate(72deg);}
}
section.distribution.fadeIn #part6 {transform: rotate(288deg); }
section.distribution.fadeIn #part6 .circle {background-color: #5cba24; animation: graph06 1s 1 forwards 3.0s;}
@keyframes graph06 {
    from {transform: rotate(0deg);}
    to {transform: rotate(72deg);}
}

section.distribution .chart-box .chart-area .data {margin-top: 30rem;}
section.distribution .chart-box .chart-area .data ul::after {display: block; clear: both; content: "";}
section.distribution .chart-box .chart-area .data li {float: left; padding: 5rem 0; width: 33.3%;}
section.distribution .chart-box .chart-area .data li span {position:relative; padding-left: 30rem; font-family: 'Montserrat', sans-serif; font-size: 24rem; }
section.distribution .chart-box .chart-area .data li span::after {position: absolute; top: 8rem; left: 0; width:15rem; height:15rem; border-radius: 50%; content: ""; }
section.distribution .chart-box .chart-area .data li:nth-of-type(1) span::after{background: #5a9cd5; }
section.distribution .chart-box .chart-area .data li:nth-of-type(2) span::after{background: #ed7d31; }
section.distribution .chart-box .chart-area .data li:nth-of-type(3) span::after{background: #a5a5a5; }
section.distribution .chart-box .chart-area .data li:nth-of-type(4) span::after{background: #ffc003; }
section.distribution .chart-box .chart-area .data li:nth-of-type(5) span::after{background: #4471c4; }
section.distribution .chart-box .chart-area .data li:nth-of-type(6) span::after{background: #5cba24; }

section.roadmap .list-box {padding: 0 40rem; text-align: center;}
section.roadmap .list-box > ul {display: inline-block;}
section.roadmap .list-box > ul::after {display: block; clear: both; content: "";}
section.roadmap .list-box > ul > li {margin: 30rem; padding: 25rem 30rem; width: 510rem; height: 270rem; background: #fff5ed; display: inline-block; text-align: left;}
section.roadmap .list-box > ul > li strong {padding: 10rem 15rem; font-family: 'Montserrat', sans-serif; font-size: 24rem; color:#000; font-weight: 700; display: block;}
section.roadmap .list-box > ul > li ul {margin-top:5rem;}
section.roadmap .list-box > ul > li ul li {position: relative; padding-left: 12rem; font-size: 18rem; color: #000; line-height: 30rem; }
section.roadmap .list-box > ul > li ul li::after {position: absolute; top: 13rem; left: 0; width: 5rem; height: 5rem; background: #e84417; border-radius: 50%; overflow: hidden; content: "";}
section.roadmap .list-box > ul > li:nth-of-type(1),
section.roadmap .list-box > ul > li:nth-of-type(3) {float: left;}
section.roadmap .list-box > ul > li:nth-of-type(2),
section.roadmap .list-box > ul > li:nth-of-type(4) {float: right;}

section.team {position:relative;}
section.team::after {position: absolute; left: 0; right:0; bottom:0; height: calc(100% - 230rem); background: #f6f6f6; z-index: -1; content: ""; }
section.team .card-list {padding: 40rem 100rem; }
section.team .card-list ul {margin: 0 -10rem; text-align: center;}
section.team .card-list ul::after {display: block; clear: both; content: "";}
section.team .card-list li {float: left; padding: 10rem; width:25%; display: inline-block; }
section.team .card-list li .card {padding:25rem 18rem; width: 100%; height: 445rem; background: #fff; border-radius: 30rem; box-shadow: 1rem 1rem 10rem rgba(117, 116, 116, 0.2); overflow: hidden;}
section.team .card-list li .card .img {position:relative; margin:0 auto; width: 175rem; height: 180rem; border:1rem solid rgba(232, 68, 23, 0.4); display: block; overflow: hidden;}
section.team .card-list li .card .img img {width:100%; display: block;}
section.team .card-list li .card .img .btn-linkedin {position: absolute; right: 0; bottom: 0; width: 26rem; height: 26rem; background: url(../images/btn_linkedin.png) center center no-repeat; background-size: 100% auto;}
section.team .card-list li .card .img:hover img {transform: scale(1.1); }
section.team .card-list li .card .img:hover .btn-linkedin {transform: scale(1.1); }
section.team .card-list li .card dt {font-size:28rem; color:#000; font-weight: 500; display: block;}
section.team .card-list li .card dt span {padding: 15rem 0; font-family: 'Montserrat', sans-serif; font-size: 14rem; color: #e84417; font-weight: 600; line-height: 20rem; display: block;}
section.team .card-list li .card dt span em {font-family: 'Noto Sans KR', sans-serif; font-size: 13rem; font-weight: 400;}
section.team .card-list li .card dd {margin-top: 20rem; text-align: center;}
section.team .card-list li .card dd span {font-size:15rem; color:#000; line-height:23rem; display: block;}

footer {height: 80rem; background-color: #000;}
footer p {font-size:15rem; color: #fff; line-height: 20rem; text-align: center;}
footer .footer_wrap {position:relative; margin-left: auto; margin-right: auto; padding: 10rem 30rem; width: 1280rem; height: 100%;}
footer .footer_wrap a{text-decoration: none;color: #fff;}
.wrap_area{position:relative;width:100%;height:100%;}

.popup_front{position:fixed;left:0px;top:0px;min-width:320px;width:100%;height:2808px;background:rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);zoom:1;z-index:999;}
.popup_front .front_inner{width:405px;position:absolute;top:100px;left:50%;margin-left:-202.5px}
.popup_front .front_inner .banner_box{height:541px;}
.popup_front .fornt_btn{font-size:0;}
.popup_front .fornt_btn a{width:50%;display:inline-block;padding:18px 0;font-size:18px;color:#fff;letter-spacing:-0.9px;text-align:center;position:relative;}
.popup_front .fornt_btn a:first-child:after{width:2px;height:20px;background:#fff;display:block;content:'';position:absolute;top:18px;right:0}
.popup_front .front_inner .banner_box img{vertical-align: middle;max-width: 100%;}

@media screen and (max-width: 768px) {
  html, body {min-width: auto; font-size: 0.5px;}
  body .wrap {width:100%;}
  body .wrap2 {width:100%;}
  footer .footer_wrap {width:100%;}

  header {height: auto; }
  header .gnb {margin-left:0; padding: 70rem 0 0 0;}
  header .gnb-list li,
  header .gnb-list li a {padding: 0 5rem; }

  header .language {top: 15rem; transform:none;}
  header .language dt {background-size: 36rem auto; }

  header.fixed {height: auto; transition: none;}
  header.fixed .logo {top:auto; transition: none; }
  header.fixed .gnb {padding: 70rem 0 0 0; transition: none; }

  .visual .text {position: relative; z-index: 1; text-shadow: 1px 1px 10px #000;}
  .visual .text .btn span { display: block;}
  .visual .text .btn span + span {margin-left: 0; margin-top: 20rem;}
  .visual .text .btn span a {position: relative; width: 167rem; }

  .popup_front .front_inner{width:270px;margin-left:-135px;top:50px}
	.popup_front .front_inner .banner_box{width:270px;height:361px;}
	.popup_front .fornt_btn a{font-size:13px;padding-top:15px;}
	.popup_front .fornt_btn a:first-child:after{top:14px}

  section.about .count {max-width: 100%;}
  section.about .count .count-list span {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
  section.about .count .count-list strong {font-size: 26rem; line-height: 3.5; border-radius:0; overflow: inherit;}
  section.about .count .count-list.list01 {top:14.2%; left:14.5%; }
  section.about .count .count-list.list02 {top:40%; left:8.9%;}
  section.about .count .count-list.list03 {top:65.5%; left:14.4%; }
  section.about .count .count-list.list04 {top:14.5%; right:14.1%; }
  section.about .count .count-list.list05 {top:40%; right:8.5%; }
  section.about .count .count-list.list06 {top:66%; right:14.2%;}
  section.about .count .count-list.list02 strong::after,
  section.about .count .count-list.list03 strong::after,
  section.about .count .count-list.list06 strong::after {right:5rem;margin-top: 3rem; font-size: 20rem; }
  section.about .count .count-list.list06 strong::after {right: 10rem; }
  
  section.about .card-list ul {margin:0 -10rem; padding:0; }
  section.about .data-list {padding: 0;}
  section.about .data-list dd:nth-of-type(1),
  section.about .data-list dd:nth-of-type(2) {padding-bottom:100rem;}
  section.about .data-list dd:nth-of-type(3),
  section.about .data-list dd:nth-of-type(4) {padding-top:100rem;}
  section.about .data-list dd span {width: 95%;}

  section.token {height: auto; background-position-x: right; background-attachment: fixed;}
  section.token .img {max-width:100%; }

  section.distribution .chart-box {padding: 50rem 0 0 0; height: auto; display: block;}
  section.distribution .chart-box .text {padding: 20rem 50rem; display: block; flex:none;}
  section.distribution .chart-box .chart-area {padding: 50rem 20rem; flex: none;}
  section.distribution .chart-box .chart .donut-chart .center {background-size: 200rem auto; }

  section.roadmap .list-box {padding: 0;}
  section.roadmap .list-box > ul > li {margin: 15rem 0; width: 100%; height: auto;}
  section.team .card-list {padding: 40rem 0; }
  section.team .card-list li {width:50%; }

  section.block {height:610rem;}
  section.block .img_box1{display:flex;max-width: 100%;}
  section.block .img_box1 img{max-width:90%;padding-left:50rem}

  section.luniverse {height: auto;}
  section.luniverse::after {position: absolute; left: 0; right:0; bottom:0; height: 630rem; background: #f6f6f6; z-index: -1; content: ""; }
  section.luniverse .img_box2{display: block;height: 580rem;}
  section.luniverse .img_box2 img{max-width:80%;padding-left:50rem}

  section.luniverse2 {height: auto;}
  section.luniverse2::after {position: absolute; left: 0; right:0; bottom:0; height: 780rem; background: #f6f6f6; z-index: -1; content: ""; }
  section.luniverse2 .img_box2{display: block;height: 525rem;}
  section.luniverse2 .img_box2 img{max-width:65%;padding-left:50rem}
  section.luniverse2 .txt2 {position: relative;margin: 0 auto;}
  section.luniverse2 .txt2 strong {padding: 1rem 3rem 3rem 26rem; font-size: 15rem; color:#E84417; font-weight: 400; line-height: 46rem;}
  section.luniverse2 .txt2 p {font-size: 15rem; color:#000; font-weight: 300; line-height: 26rem;padding-left: 26rem;padding-bottom: 60rem;}

  section.block2 {height:810rem;}
  section.block2 .img_box2{display:flex;max-width: 100%;}
  section.block2 .img_box2 img{max-width:90%;padding-left:50rem}
}