@import url('../font/Archivo/Archivo.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,100;1,300;1,400&display=swap');

/*-----------------------------------------
            reset
-------------------------------------------*/
* { margin:0; padding:0; font-family: 'Archivo', sans-serif;  -webkit-text-size-adjust:none; }
ul, li { list-style:none; }
img { border:0; vertical-align:top; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
textarea { resize:none; }
button { cursor:pointer; }
body { line-height:1.4; min-width:1264px;  }
.hide_obj { display:block; width:1px; height:1px; overflow:hidden; text-indent:10px; }
.no-scroll { overflow:hidden; }


/*-----------------------------------------
            common
-------------------------------------------*/
.header { position:fixed; left:0; top:0; width:100%; height:100px; min-width:1264px;  z-index:9; }
.header .inner { min-width:1264px; max-width:1920px; margin:0 auto; }
.header .logo-wrap { position:relative; width:1264px; margin:0 auto;}
.header .logo {  float:left; margin:35px 0 0 0; line-height:1; }
.header .logo a { display:block; width:229px; height:36px; font-size:1px; text-indent:-100px; overflow:hidden; background: url('../img/common/logo_white.svg') no-repeat; }
.header .gnb { float:right; padding-top:34px; }
.header .gnb .btn-layer-open { display:none; }
.header .gnb .btn-layer-close { display:none; }
.header .gnb .menu { float:left; padding-right:100px; }
.header .gnb .menu li { float:left; line-height:24px; margin-left:46px; }
.header .gnb .menu a { position:relative; display:inline-block; font-size:16px; line-height:32px; color:#fff; font-weight:bold;  }
.header .gnb .menu a span { font-family: 'Roboto';}
.header .gnb .menu a:hover { color:#ffff8a;text-decoration: none;}
.header .gnb .menu a:hover:before { position:absolute; left:0; bottom:0; display:block; content:'';  width:100%; height:2px; background:#ffff8a; }
.header .gnb .menu a.btn-whitepaper { padding:0 16px; line-height:28px; border:2px solid #fff; border-radius:30px;}
.header .gnb .menu a.btn-whitepaper:hover { border-color: #ffff8a;}
.header .gnb .menu a.btn-whitepaper:hover:before { display: none; }
.header.fixed { background:#fff;  box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.04); }
.header.fixed .logo a { background-image: url('../img/common/logo_black.svg') }
.header.fixed .gnb .menu a,
.header.fixed .gnb .menu a:hover {color:#9d00ff;}
.header.fixed .gnb .menu a:hover:before  { background:#9d00ff}
.header.fixed .gnb .menu a.btn-whitepaper { border-color: #9d00ff;}
.header.fixed .gnb .menu a.btn-whitepaper:hover { background:#9d00ff; color: #fff;}

.footer {  min-width:1264px; max-width:100%; margin:0 auto; background-color: #fff;}
.footer .inner {  position:relative; width:1264px;   padding:80px 0 150px 0; margin:0 auto; overflow:hidden; background-color: #fff;}
.footer .logo { float:left; padding:0; line-height:1;  margin-right:12px; margin-bottom:15px; }
.footer .logo a { display: block; width:166px; height: 26px; overflow:hidden; text-indent:-100px; font-size:1px; background:url('../img/common/logo_mono.svg') no-repeat;}
.footer .copyright {clear:both; float:left; font-size: 12px; line-height:26px; font-weight: 300; text-align: right; color: #888;}
.footer .link { position:absolute; right:0; top:80px; }
.footer .link li { float:left; margin-left:10px; }
.footer .link li a { display:block; width:30px; height:30px; overflow:hidden; text-indent:-100px; font-size:1px; background-repeat: no-repeat; background-size: 30px 30px; }
.footer .link .medium { background-image:url('../img/common/medium@2x.png'); }
.footer .link .twitter { background-image:url('../img/common/twitter@2x.png'); }
.footer .link .discord { background-image:url('../img/common/discord@2x.png'); }
.footer .link .telegram { background-image:url('../img/common/telegram@2x.png'); }
.footer .link .facebook { background-image:url('../img/common/facebook@2x.png'); }
.footer .link .youtube { background-image:url('../img/common/youtube@2x.png'); }


@media (min-width:1023px) and (max-width:1264px){
    .header .gnb .menu {  padding-right:0; }
    .header .logo {  margin-left:0; }
}

/*-----------------------------------------
            mobile
-------------------------------------------*/
@media all and (max-width:1023px){
    body { min-width:360px;  }

    .header { width:100%; min-width:auto; height:53px; padding:0; }
    .header .inner { min-width:auto; max-width: auto; }
    .header .logo { margin:15px 0 0 20px;}
    .header .logo a { width:229px; height:36px; background: url('../img/common/logo_white.svg') no-repeat; background-size:140px auto; }
    .header .gnb .btn-layer-open { position:absolute; right:16px; top:11px; display:block; width:32px; height:32px; border:0; background:url('../img/common/btn_gnb_open_m@2x.png') no-repeat; background-size: 32px auto;}
    .header.fixed .gnb .btn-layer-open {  background-image:url('../img/common/btn_gnb_open_m_over@2x.png');}
    .header .gnb .btn-layer-close span,
    .header .gnb .btn-layer-open span { display:none; }
    .header .gnb .layer { position:fixed; left:0; top:0; width:100%; height:100%; display:none; overflow:hidden; overflow-y:auto; background:#9d00ff; z-index:999; }
    .header .gnb .layer .btn-layer-close { position:absolute; right:15px; top:11px; display:block;  width:32px; height:32px; border:0; background: url('../img/common/btn_menu_close@2x.png') center no-repeat; background-size:23px auto; }
    .header .gnb .layer .menu { float:none; padding:129px 20px 14px 20px; }
    .header .gnb .layer .menu li { float:none; margin:0 0 28px 0; text-align:center; }
    .header .gnb .layer .menu li a.active,
    .header .gnb .layer .menu li a { font-size: 24px; font-weight: bold; line-height: 1; color: #fff !important; }
    .header .gnb .layer .menu a.btn-whitepaper { padding:0 20px; font-size:20px; line-height:38px;  border-color: #fff !important; }


    .footer { position:relative; width:auto; min-width:auto; max-width: auto; background-color: #fff;}
    .footer .inner { position:relative; float:left; padding:0 20px 52px 20px;  width:100%; box-sizing :border-box; overflow: inherit;background-color: #fff;}
    .footer .inner:before { margin-bottom:22px;}
    .footer .logo { float:left; margin:0 0 20px 0; vertical-align: middle; }
    .footer .logo a { width:147px; background:url('../img/common/logo_mono.svg') no-repeat; background-size: 147px auto; margin-top: -3px;}
    .footer .copyright {clear:both; display:block; display: inline-block; text-align: left; line-height:1;  font-size:11px;}
    .footer .link { position:absolute; right:20px; top:-3px; z-index:2;}
    .footer .link li {  width:24px; height:24px;  margin-left:3px; }
    .footer .link a { width:24px; height:24px; background-size:24px 24px !important; }
}