@charset "utf-8";

html, body { height: 100%; width: 100%; }
body {font-family:'NanumSquare', '맑은고딕', 'Malgun Gothic', sans-serif; -webkit-text-size-adjust:100%; font-size:16px; font-weight:400; letter-spacing:-0.025em; }
h1, h2, h3, h4, h5, h6 {font-family:'NanumSquare', '맑은고딕', 'Malgun Gothic', sans-serif; font-weight:800;}
.clearfix:after {content:''; clear:both; display:table}
.hide {overflow: hidden; display: inline-block; border: 0; margin: -1px; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);}
h3 {padding-bottom:10px; font-size:65px; line-height:1.4; color:#fff; word-break:keep-all; text-align:center}
h4 {padding-bottom:6px; font-size:20px; line-height:1.5; color:#ddd} 
h5 {font-size:18px; font-weight:400; line-height:1.6; word-break:keep-all; color:#ddd; text-align:center}
p {padding-top:8px; line-height:1.9; color:#ddd; word-break:keep-all;}
img {max-width:100%; height:auto}
section > div, footer > div {position:relative; max-width:1200px; margin:auto; padding:120px 0;}
.colorY {color:#feef99!important}
table {margin-top:10px; border-top:2px solid #555}
table tr {height:48px; border-bottom:1px solid #555}
table th {background:rgba(85,85,85,.3); font-weight:400; color:#fff; text-align:center}
table td {text-align:center; line-height:1.5}
@media (max-width:1420px) {
  h3 {padding-bottom:8px; font-size:45px; line-height:1.4}
  h4 {padding-bottom:4px; font-size:20px; line-height:1.5} 
  h5 {font-size:18px; line-height:1.6;}
  section > div, footer > div {margin:0 5%; padding:100px 0}  
}
@media (max-width:768px) {
  body {font-size:14px;}
  h3 {padding-bottom:6px; font-size:35px; line-height:1.3}
  h4 {padding-bottom:2px; font-size:18px; line-height:1.4} 
  h5 {font-size:16px; line-height:1.5;}  
  p {font-size:15px; padding-top:5px; line-height:1.8;}
  section > div, footer > div {margin:0 4%; padding:60px 0;}
  table th, table td {height:auto; padding:5% 0}
}


/* header : logo, menu */
header {position:fixed; left:0; top:0; width:100%; height:85px; z-index: 10; background:#101012; box-shadow:0px 1px 10px rgba(0,0,0,0.1);}
header .logo {display:inline-block; margin-left:5%; margin-right:2%; line-height:80px; z-index:10; transform:scale(.9) }
header .logo span {display:inline-block; margin-left:.5em; font-size:16px; font-weight:300; color:#d7d7d7; letter-spacing:0;}
header nav {display:inline-block; position:absolute; right:15%; top:17px; }
header nav > ul > li {display:inline-block;}
header nav > ul > li > a {display:block; padding:16px .6em; color:#fff}
header .lang {position:absolute; right:5%; top:25px; }
header #lang {width:110px; height:40px; padding:0 1.2em; box-sizing: border-box; background:#1f2026 url(../img/arrow_select.png) no-repeat 80% 50%; border-radius:20px; border-color:#888; font-size:14px; color:#ccc; -webkit-appearance:none; -moz-appearance: none; appearance: none;}
header .lang select::-ms-expand {display: none;}
header .hamburgermenu {display:none}
@media (max-width:1600px) {
  header .logo {margin-left:1%}
  header nav {right:10%}
  header .lang {right:1%}
}
@media (max-width:1200px) {
  header .hamburgermenu {display:block; position:absolute; right:0; top:0; z-index:300; padding:2.3em 2.3em; cursor:pointer;}
  header .hamburgermenu span {display:block; width:25px; height:2px; margin-top:5px; background:#fff; transition:all 0.4s}
  header .hamburgermenu span:first-child {margin-top:0}
  header .hamburgermenu span:last-child {opacity:1; width:18px}  
  header .lang {right:8%}
  header nav {right:0; top:85px; width:100vw; height:100vh; padding:5%; box-sizing:border-box; background:#1f2026; transition:all .2s; transform:translate3d(-100vw,0,0);}
  header nav.open {transform:translate3d(0,0,0);}
  header nav ul {transform:translate(0,50%)}
  header nav > ul > li {width:30%}

  header nav.open ~ .hamburgermenu span {background:#fff}
  header nav.open ~ .hamburgermenu span:first-child {transform:translateY(7px) rotate(315deg)}
  header nav.open ~ .hamburgermenu span:nth-child(2) {transform:rotate(-315deg)}
  header nav.open ~ .hamburgermenu span:nth-child(3) {opacity:0}  
}
@media (max-width:1024px) {
  header {height:60px;}  
  header .logo {line-height:60px;}
  header .hamburgermenu {padding:1.4em}
  header .lang {top:13px}
  header #lang {width:90px; height:35px;}
  header nav {top:60px}
} 
@media (max-width:768px) {
  header .logo span {display:block; margin-top:5px; font-size:12px}
  header .lang {right:20%}
}

/* top visual */
.top_visual {width:100%; height:100vh; background:url(../img/main_visual.jpg) no-repeat 100% 100%; background-size:cover}
.top_visual > div {position:relative; display:flex; align-items:center; height:100vh; padding:0;}
.top_visual h2 {position:relative; margin-top:-150px; line-height:1.9; font-size:36px; font-weight:300; letter-spacing:0; color:#fff}
.top_visual h2 em {display:block; line-height:1.3; font-size:75px; font-weight:800}
.top_visual a.down {display:block; position:absolute; bottom:100px; left:-75px; padding-left:83px; background:url(../img/arrow_b.png) no-repeat; color:#eee; font-size:14px; font-weight:300; letter-spacing:0; transform:rotate(-90deg)}
@media (max-width:1240px) {
  .top_visual h2 {font-size:30px;}
  .top_visual h2 em {font-size:65px}
  .top_visual a.down {left:5px}
}
@media (max-width:768px) {
  .top_visual h2 {top:-80px;  margin-top:0px; font-size:25px;}
  .top_visual h2 em {font-size:45px}  
  .top_visual a.down {left:-80px}
}

/* about, bank */
#about {position:relative; z-index:3; background:url(../img/about_bg.jpg) no-repeat; background-size:cover; text-align:right;}
#about article, #bank article {margin:14px 0 50px 0}
#about article div, #bank article div {display:inline-block; width:48%; margin-right:3.5%; vertical-align:top;}
#about article div:last-child, #bank article div:last-child {margin-right:0}
#about article div p, #bank article div p {text-align:justify; word-break: normal;}
#about table {width:70%; margin:auto}
#about table th img {display:inline-block; padding-left:8px}
#about table th:first-child {background:#412d2f}
#about table th:last-child {background:#2b3546}
#about table td:first-child, #bank article + div table th {background:rgba(237,28,36,.15)}
#about table td:last-child, #bank article + div + div table th {background:rgba(0, 87, 232, 0.15)}
#bank {background:#262626}
#bank article ~ div {position: relative; display:inline-block; width:49%; vertical-align: top;}
#bank article + div:after {content:''; position:absolute; right:-20px; top:50%; width:36px; height:14px; background:url(../img/equal.png) no-repeat;}
#bank table {width:70%; margin:auto}
#bank table td {padding-left:5%; padding-right:5%; text-align:left}
#bank table td span {font-size:12px}
#bank table td em {float:right}
#bank table tr:nth-child(5), #bank table tr:nth-child(6), #bank table tr:nth-child(9) {color:#ff6d73}
#bank article ~ p {text-align:center}
@media (max-width:1240px) {
  #about {background-position:40% 100%}
}  
@media (max-width:768px) {
  #about {background-position:35% 100%}
  #about article div, #bank article div {width:100%; margin-right:0}
  #bank article + div:after {transform:scale(.7)}
  #about table {width:100%;}
  #bank table {width:90%}
  #bank table td em {padding-top:2%}
}  

/* coin */
#coin {overflow:hidden; background:url(../img/coin_bg.gif) no-repeat; background-size:cover}
#coin ul {margin-top:12%; }
#coin li {position:relative; display:inline-block; width:45%; height:228px; margin-right:8%; padding:5% 3% 3%; box-sizing:border-box; background:#1a1c1f; border:1px solid #555; vertical-align:top;}
#coin li:last-child {margin-right:0}
#coin li dt {position:absolute; top:0; right:50%; width:298px; height:75px; line-height:75px; border-radius:37.5px; background:#fff; text-align:center; transform:translate(50%, -50%)}
#coin li dd {display:list-item; list-style-type:disc; list-style-position:outside; padding-top:10px; text-align:left; line-height:1.6}
@media (max-width:1024px) {
  #coin ul {margin-top:18%}
  #coin li {height:255px}
}
@media (max-width:768px) {
  #coin ul {margin-top:3%}
  #coin li {margin-top:66px; padding:70px 10% 10%; width:100%; height:auto}
  #coin li:last-child {padding-bottom:10%}
}

/* use */
#use {background:#3a3d41}
#use h5 br {display:none}
.user, .sell {position:relative; display:inline-block; width:calc(50% - 20px); margin-top:60px; padding:30px; background:#343638; border:1px solid #555; box-sizing:border-box;}
.user {margin-right:35px}
.user li, .sell li {position:relative; display:inline-block; width:25%; padding-right:11.8%; vertical-align:top;}
.user li:last-child, .sell li:last-child {padding-right:0}
.user li:before, .sell li:before {content:''; position:absolute; top:30%; left:70%; width:46px; height:46px; background:url(../img/arrow.png) no-repeat;}
.user li:last-child:before, .sell li:last-child:before {background:none}
.user li img, .sell li img {display:block}
.user em, .sell em, .user em + span, .sell em + span {display:inline-block; margin-top:6px; }
.user em, .sell em {font-weight:800; vertical-align:top;}
.user em + span, .sell em + span {width:77%; padding-left:5px; line-height:1.4} 
@media (max-width:1340px) {
  .user li, .sell li {width:24%}
}
@media (max-width:768px) {
  #use h5 br {display:block}
  .user, .sell {width:100%; margin-right:0}
  .sell {margin-top:20px}
  .user em + span, .sell em + span {width:77%;}
}

/* payment, point */
#payment {overflow:hidden; background:#2d2e31}
#payment > div, #point > div {z-index:5}
#payment > div:after{content:url(../img/payment_phone.jpg); position:absolute; bottom:60px; right:-254px; display:block; z-index:-1}
#payment .txt, #point .txt {width:70%}
#payment .txt figure, #point .txt figure {margin-top:60px; padding:4%; background:#2a2a2a; border:1px solid #555; box-sizing: border-box;}
#point {overflow:hidden; background:#141414}
#point > div:after {content:url(../img/point_phone.jpg); position:absolute; bottom:50px; right:-294px; display:block; z-index:-1}
#point .txt figure {background:#000}
@media (max-width:940px) {
  #payment > div:after, #point > div:after {position:relative; bottom:0; right:0; margin-top:-100px; transform:scale(.7)}
  #payment .txt, #point .txt {width:100%}
  #payment .txt figure, #point .txt figure {margin-top:30px;}  
}
@media (max-width:768px) {
  #payment br {display:none}
}

/* service */
#service {background:#28282a}
#service figure {width:100%; margin-top:60px; padding:4%; background:#2b2b2b; border:1px solid #555; box-sizing:border-box}
#service figure img:last-child {display:none}
#service ul {margin-top:4%}
#service li {position:relative; display:inline-block; width:57%; height:180px; padding:30px 0; border-radius:90px; border:1px solid #555; text-align: center; box-sizing:border-box}
#service li:first-child {background:rgba(237,51,52,.2)}
#service li:last-child {margin-left:-15%; background:rgba(15,117,237,.2)}
#service li:after {content:url(../img/graph.png); position:absolute; display:block; top:40px; left:85px;}
#service li:last-child:after {left:auto; right:85px;}
#service ul + p {text-align:center}
@media (max-width:1240px) {
  #service li:after {left:10%}
  #service li:last-child:after {right:10%;}
}
@media (max-width:768px) {
  #service figure {margin-top:30px;}
  #service figure img:first-child {display:none}
  #service figure img:last-child {display:block}
  #service li {height:280px; padding:30px 30px 30px 10px}
  #service li:last-child {padding:30px 10px 30px 60px}
  #service li:after {top:auto; left:20%; bottom:20px; transform:scale(.8)}
  #service li:last-child:after {right:20%}
  #service li p img {display:block}
}

/* loan */
#loan {overflow:hidden; background:url(../img/loan_bg.jpg) no-repeat 50% 50%; }
#loan h5 + div {margin-top:60px}
#loan h4 {margin-left:15%}
#loan ul {width:70%; margin:auto}
#loan li {position:relative; display:inline-block; width:144px; text-align:center; margin-right:20%}
#loan li:last-child {margin-right:0}
#loan li:after {content:url(../img/arrow.png); display:block; position:absolute; left:200px; top:35%}
#loan li:last-child:after {content:''}
#loan li figure {width:144px; height:144px; margin-bottom:20px; line-height:144px; border-radius:100%; background:rgba(255,255,255,.1); text-align:center}
#loan ul + p {margin-top:50px; }
#loan ul ~ p {text-align:center}
@media (max-width:1180px) {
  #loan h4 {margin-left:0}
  #loan ul {width:100%}
}
@media (max-width:768px) {
  #loan {background-position:100% 100%}
  #loan h5 + div {margin-top:30px}
  #loan li {width:100%; margin-right:0; margin-bottom:60px}
  #loan li:after {left:calc(50% - 20px); top:190px; transform:rotate(90deg)}
  #loan li figure {margin:0 auto 10px auto}
  #loan ul + p {margin-top:-10px}
}

/* policy */
#policy h5 {padding-bottom:40px;}
#policy table th:nth-child(1), #policy table th:nth-child(2), #policy table th:nth-child(3), #policy table th:nth-child(4) {width:15%}
#policy table th:nth-child(5), #policy table td:nth-child(5) {width:40%; text-align:left}

/* protocol */
#protocol {background:url(../img/protocol_bg.jpg) no-repeat ; text-align:center}
#protocol ul {margin-top:80px}
#protocol li {display:inline-block; width:24%; padding:10px 30px 0 30px; box-sizing:border-box; vertical-align: top;}
#protocol li h4 {margin-top:20px; color:#fff}
#protocol li p {line-height:1.7; color:#ccc; word-break:keep-all;}
@media (max-width:1024px) {
  #protocol ul {margin-top:30px}
  #protocol li {width:49%; padding:30px 5px 0px 5px}  
  #protocol li figure {transform:scale(.9)}
}

/* guide, whitepaper */
#guide {overflow:hidden; background:#202226}
#whitepaper {overflow:hidden; background:#323336}
#guide ul {margin-top:40px}
#whitepaper ul {margin-top:50px}
#guide li, #whitepaper li {position:relative; display:inline-block; width:31%; height:256px; margin-top:2%; padding:30px; margin-right:3%; background:#1e2023; box-sizing:border-box; border:1px solid #555; vertical-align:top;}
#guide li:nth-child(3), #guide li:last-child, #whitepaper li:last-child {margin-right:0}
#guide li .btnMore, #whitepaper li .btnDown {display:block; position:absolute; bottom:30px; right:30px; width:146px; height:45px; margin-top:20px; padding-left:40px; background:url(../img/arrow.png) no-repeat 68% 40% / 25px auto; box-sizing:border-box; line-height:45px; font-size:12px; border-radius:22.5px; border:1px solid #777; color:#ddd;}
#guide li .btnMore:hover {color:#f2d649; background:url(../img/arrow_on.png) no-repeat 68% 40% / 25px auto; border-color:#f2d649}
#whitepaper li {height:auto; width:22%; padding:30px; background:#292a2e; text-align:center }
#whitepaper li h4 {padding-top:15px; text-align:center}
#whitepaper li .btnDown {position:relative; right:0; bottom:0; margin:20px auto 0 auto; background:url(../img/down.png) no-repeat 72%; text-align:left}
#whitepaper li .btnDown:hover {border-color:#f2d649; color:#f2d649; background-image:url(../img/downOn.png)}
@media (max-width:1024px) {
  #guide li, #whitepaper li {width:47%; margin-right:0}
  #guide li:nth-child(odd), #whitepaper li:nth-child(odd) {margin-right:5%}  
}
@media (max-width:768px) {
  #guide ul, #whitepaper ul {margin-top:20px}
  #guide li {width:100%; padding:30px; height:auto; margin-right:0}
  #guide li .btnMore {position:relative; bottom:0; right:0}
  #whitepaper li {width:100%; padding:30px 20px; }
}

.btnTop {position:fixed; top:auto; bottom:30px; right:30px; z-index:10; display:block; width:80px; height:80px; border-radius:50%; border-color:#555; background:#404147; box-shadow:20px 20px 30px rgba(0,0,0,.10);  opacity:.5}
.btnTop a {display:block; line-height:88px; text-align:center; color:#fff; font-size:15px}
.btnTop:hover {opacity:1}
@media (max-width:768px) {
  .btnTop {right:0px; bottom:0px; transform:scale(.4)}
  .btnTop a {font-size:20px}
}

/* footer */
footer {background:#1e1e21}
footer div {padding:60px 0}
footer p {color:#888; font-size:.875em}