@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

:root{
    --black:#000;
    --white:#fff;
    --font-size:12px;
    --round:20px;
    --padding5:5px;
    --border-radius:10px
  }

  *{margin:0;padding:0;font:inherit;color:inherit;}
  *, :after, :before {box-sizing:border-box;flex-shrink:0;}
  ::placeholder { color:#bebebe;  font-size: 12px;  }
  :root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;-moz-tab-size:4;tab-size:4}
  html, body {height:100%;}
  img, picture, video, canvas, svg {display: block;max-width:100%;}
  button {background:none;border:0;}
  a {text-decoration:none}
  table {border-collapse:collapse;border-spacing:0}
  
  ul { list-style: none; padding: 0; margin: 0; width: 100%;}
  img {width: auto; display: block; } 

body{ padding: 0; margin: 0; background-color: #eeeeee; font-size: var(--font-size); font-family: 'Noto Sans KR', sans-serif;}  

header{ position: fixed; top: 0; left: 0; height: 60px;  font-size: var(--font-size); display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%;  background-color: #eee;     box-sizing: border-box;
  padding: 10px;     align-items: center; z-index: 2;}
header div{ display: flex;}
.btn-alert{ width: 30px;  height: 30px;  position: relative;  background: url(../images/ico_alert.png) no-repeat;  border: 0;  margin: 0;  padding: 0;  background-size: 30px 30px; margin-right: 20px;}
.btn-alert.active::before{ content:'';  border-radius: 50%;  width: 8px; height: 8px; background-color: #e7141b; position: absolute; top: 2px; right: 5px;}
.btn-config{ width: 30px; height: 30px;    position: relative;    background: url(../images/ico_config.png) no-repeat;    border: 0;    margin: 0;    padding: 0;    background-size: 30px 30px; margin-right: 10px;}
.btn-copy{ width: 32px; height: 32px;    position: relative;    background: url(../images/btn_copy.gif) no-repeat; font-weight: bold;    border: 0;    margin: 0;    padding: 33px 0 0 0;    background-size: 32px 32px; }
.btn-share{ width: 32px; height: 32px;    position: relative;    background: url(../images/btn_share.gif) no-repeat;   font-weight: bold;  border: 0;    margin: 0;    padding: 33px 0 0 0;    background-size: 32px 32px; }
.wrap{ margin: 50px 5px;     box-sizing: border-box; padding: 10px;  }
.nowrap{ white-space: nowrap;}
.dim{ background:#000; opacity: 0.7; width: 100%; height: 100%; box-sizing: border-box;     position: fixed;  top: 0;  left: 0;  z-index: 10;}
.modal{ position: fixed !important;
  top: 10%;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  overflow: hidden;
  outline: 0;
  width: auto;
  margin: 20px !important;
  padding: 20px !important;
  max-height: 300px !important;
}
nav{ position: fixed; bottom: 0; left: 0;  width:calc(100% - 20px); height:65px; box-sizing: border-box;  padding:  10px; margin: 0 10px; background-color: #fff; border-radius: 20px 20px 0 0;  display: flex; justify-content: space-around; box-shadow: 0 3px 10px 0 rgb(66 66 66 / 15%);}
nav ul{ display: flex; }
nav li{ width: 25%;   text-align: center;  display: flex;  flex-direction: column; color: #8b8b8b; position: relative;}
nav li a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
nav li.active{ color: #cc0034;}
nav li span{    width: 30px;  height: 30px;}
nav li.active span{  width: 34px;  height: 34px; background-position: center center !important;}
nav li:nth-child(1) span{ background: url(../images/ico_wallet.png) no-repeat; background-size: 30px 27px; display: block; margin: 0 auto;}
nav li:nth-child(2) span{ background: url(../images/ico_cashout.png) no-repeat; background-size: 30px 27px; display: block; margin: 0 auto;}
nav li:nth-child(3) span{ background: url(../images/ico_notice.png) no-repeat; background-size: 30px 27px; display: block; margin: 0 auto;}
nav li:nth-child(4) span{ background: url(../images/ico_cs.png) no-repeat; background-size: 30px 27px; display: block; margin: 0 auto;}
nav li.active:nth-child(1) span{ background: url(../images/ico_wallet_active.png)  #cc0034 no-repeat; background-size:  25px 23px; border-radius: 50%;}
nav li.active:nth-child(2) span{ background: url(../images/ico_cashout_active.png) #cc0034 no-repeat; background-size: 25px 23px; border-radius: 50%;}
nav li.active:nth-child(3) span{ background: url(../images/ico_notice_active.png) #cc0034 no-repeat; background-size:  25px 23px; border-radius: 50%;}
nav li.active:nth-child(4) span{ background: url(../images/ico_cs_active.png) #cc0034 no-repeat; background-size:  25px 23px; border-radius: 50%;}


h1{ font-size:12px; color: #8b8b8b; display: flex;   align-items: center; margin-left: 15px;}
.sub-h1{display: block;  font-weight: bold;  text-align: center;  font-size: 22px;  color: #000;  margin: 0;}
.sub-h2{font-size: 18px;  text-align: center;}
h1 img{ width: 30px; height: 30px;  margin-right: 10px;}
.profile{ width: 30px; height: 30px; border-radius: 50%;  display: inline-block;     background: rgb(165,65,255);
  background: linear-gradient(138deg, rgba(165,65,255,1) 0%, rgba(63,187,254,1) 100%); margin-right: 10px;}

.asset{ background: rgb(165,65,255);  background: linear-gradient(138deg, rgba(165,65,255,1) 0%, rgba(63,187,254,1) 100%);border-radius: 20px; min-height: 200px; padding:20px; color: #fff; box-shadow: 0 3px 10px 0 rgb(66 66 66 / 15%);}
.asset h2{ font-size: 33px;     font-weight: bold; margin-bottom: 20px;}
.asset ul{ display: flex;  justify-content: space-between;}
.asset li img{ width: 40px; margin-bottom: 5px;}
.asset li{ font-size: 12px;     text-align: center; }

.content{ background-color: #fff; border-radius: 20px; margin: 20px 0;   padding: 10px; box-shadow: 0 3px 10px 0 rgb(66 66 66 / 15%);}
.content li{ width: calc(100% - 20px); padding: 20px 0; border-bottom: 1px solid #ccc; box-sizing: border-box;}
.scroll-y{ overflow-y: scroll; max-width: 99%;}
.scroll-x{ overflow-x: scroll; max-width: 99%;}

/*common class*/
.center{ text-align: center !important;}

h3{font-weight: bold; border-bottom: 1px solid #cccc;  padding: 10px;}
h4{font-weight: bold;  font-size: 15px;  padding: 10px; width: 100%; box-sizing: border-box; position: relative;}
h5{font-weight: bold;   padding: 10px;}
h4 .ico{ border-radius: 50%; width:25px; height: 25px;  display: inline-block; vertical-align: middle; margin-right: 10px;}
h4 .ico-notice{  background:url(../images/ico_cs1.png) center center #cc0034 no-repeat; background-size:20px 20px; }
h4 .ico-faq{  background:url(../images/ico_cs2.png) center center #cc0034 no-repeat; background-size:20px 20px; }
h4 .ico-service{  background:url(../images/ico_cs3.png) center center #cc0034 no-repeat; background-size:20px 20px; }
h4 .ico-11{  background:url(../images/ico_cs4.png) center center #cc0034 no-repeat; background-size:20px 20px; }

.ctype{ width: 100%; }
.ctype th{ padding: 10px; border-bottom: 1px solid #d6d6d6; vertical-align: middle;  }
.ctype td{ padding: 20px 10px; border-bottom: 1px solid #d6d6d6; vertical-align: middle;}
.ctype tr:last-child td{ border: 0;}
.ctype td img{ width: 30px; height: 30px;}
.ctype td strong{ display: block; font-weight: bold;}
.ctype td em{ opacity: 0.5; display: block;}
.addr{ max-width: 150px; overflow: hidden; text-overflow: ellipsis;     white-space: nowrap;}
.btn-token{ width: 100%; text-align: center; margin:10px 0;}
.btn-token button { padding: 5px;}
.btn-token button span{ background:#cc0034; border-radius: 50%; color: #fff; width:18px; height:18px; display: inline-block;  font-weight: bold; }
.opacity{ opacity: 0.5;}
.form-bg{ background:#fff !important}
.form-wrap{ padding: 10px; }
.form-wrap h1{display: block;  font-weight: bold;  text-align: center;  font-size: 22px;  color: #000;  margin: 0;}
.form-wrap h2{ font-size: 18px; text-align: center;}
.pw-form{ display: flex; flex-direction: row; margin: 30px 0; }
.pw-form input{ width: 16.66666666666667%; border: 1px solid #ccc; display: flex;     min-height: 40px;     text-align: center;border-right: 0;
  font-size: 20px;}
  .pw-form input:last-child{border-right: 1px solid #ccc;}

.input-wrap{ padding: 20px; margin: 30px 0;}
.login-title{ font-weight: bold; text-align: center; display: block; font-weight: bold; text-align: center;  font-size: 28px; color: #cc0034 !important; margin: 0;}

.btn{ padding: 9px; background: #cc0034; color: #fff; font-weight: bold; font-size: 14px; border-radius: 10px;  width: 100%;     white-space: nowrap;}
.btnsm{  width: auto;  margin: 0 auto !important;  display: block;  min-width: 80px;}
.btn-grey{ background: #8b8b8b !important;  }
.btn-load{ background: #fff !important; border:1px solid #ccc !important; margin: 10px auto 10px auto; max-width: 30%; padding: 5px !important; color:#000; font-size: 12px; vertical-align: middle; position: relative;}
.btn-load::after{ content: '🢓'; display: inline-block; font-size: 28px;     position: absolute;  color: #ccc;  right: 10px;  top: 0;}
.btn-close{   background: #fff;  color: #000;  font-weight: bold; width: 30px;  height: 30px;  text-align: center;  border: 1px solid #ccc;
  border-radius: 50%;    align-items: center;  display: block;  font-size: 12px;  text-align: center;  position: absolute;  right: 0;  top: 0;}
  .relative{ position: relative;}
label { display: inline-block; margin-bottom: 0.5rem; opacity: 0.7;} 
.row{display: flex;  flex-wrap: wrap;  flex-shrink: 0;  width: 100%;  max-width: 100%;}
.row.backup button{     border: 1px solid #ccc;  color: #000;  padding: 5px;  border-radius: 10px;}
.col-auto {  flex: 1 1 auto;  width: auto; }
.text-center{ text-align: center;}
.mx30{ max-width: 30%;}
.news-row{ display: flex;  flex-wrap: wrap;  flex-shrink: 0;  width: 100%;  max-width: 100%; flex-direction: row; padding: 10px; border-bottom: 1px solid #eaeaea;}
.news-row .col img{ width: 100%; border-radius: 10px;  height: 100%;}
.news-row .col:first-child{ width: 30%;} 
.news-row .col:last-child{ width: 70%;}
.news-row .col h3{font-size: 15px;  height: 59px;  overflow: hidden;  text-overflow: ellipsis;  border: 0;}
.news-row .col em{ padding-left: 10px; opacity: 0.5;}
.news-content{ padding: 10px; margin: 10px 0; line-height: 180%; font-size: 14px;}
.news-content img{ max-width: 100%; padding: 10px; box-sizing: border-box;}
.news-content h3{ font-size: 18px;}
.news-content em{ opacity: 0.5; padding-left: 10px;}
.notice .col-auto h3{ border: 0 !important;}
.mr-1{ margin-right: 1rem;}
.mb-1{ margin-bottom: 1rem;}
.mb-2{ margin-bottom: 1.5rem;}
.mb-nav{ margin-bottom:80px;}
.select{ display: block; width: 100%;  padding: 0.375rem 0.375rem 0.375rem 0.75rem;  font-size: 1rem;  font-weight: 400;  line-height: 1.5;  border: 1px solid #dee2e6;  border-radius: 0.375rem;   margin-bottom: 20px;}
.inquiry { box-sizing: border-box;  display: block;  border: 1px solid #dee2e6;   border-radius: 0.375rem;
  margin-bottom: 20px;  width: 100%;  padding: 0.375rem 0.75rem;  font-size: 1rem;  font-weight: 400;}
  .badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    background-color: #8b8b8b;
    color: #fff; 
}
.badge-end {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  background-color: #28a745;
  color: #fff; 
}
.form-input {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color:#000;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #dee2e6;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.375rem;
  margin-bottom: 20px;
 
}
.agree-wrap{     border: 1px solid #ccc;
  background: #fbfbfb;
  color: #000;
  padding: 10px;
  border-radius: 20px;
  margin: 20px 0;
  min-height: 100px;
  position: relative;
  overflow-y: scroll;
  max-height: 150px;}
  .round-wrap{     border: 1px solid #ccc;
    background: #fff;
    color: #000;
    padding: 10px;
    border-radius: 20px;
    margin: 20px 0;
    min-height: 100px;
    position: relative;
 }
 .col-3 {width: 33.3%; font-weight: bold; }
 .ico-pending{ display: inline-block;    vertical-align: middle; width: 15px; height: 15px; background: url(../images/ico_pending.gif) no-repeat; background-size:15px 15px;  background-position: 0 0;}
 .ico-receipt{ display: inline-block;     vertical-align: middle; width: 15px; height: 15px; background: url(../images/ico_cashout.gif) no-repeat; background-size:15px 15px;  background-position: 0 0;}
 .dinline{ display: inline-block !important; }
.red{ color:#e7141b !important}


/*faq */
.faq-wrap{ position: relative;  width: 90%}
.faq-wrap h3{ height: 40px; color: #fff; font-size: 27px; line-height: 40px;}
.faq-wrap .subtitle{ margin: 25px 0 0; color: #000; font-size: 18px; font-weight: 700;}
.faq-wrap ul{ width: 100%; margin: 20px 0 0;  padding: 0;    }
.faq-wrap li {width: 100%; background: right 30px no-repeat; /* border-top: 1px solid #d9d9d9;*/ overflow: hidden; display: flex; flex-direction: column; padding: 0;}
.faq-wrap li:last-child{ border: 0;}
.faq-wrap li a { display: block; width: 100%; padding: 15px 0; background: url(../images/icon_faq_arrow.png)no-repeat;    background-position: right 30px; color: #000; 
  font-size: 14px; overflow: hidden;}
 .faq-wrap li a strong {display: block;  padding: 0 50px; background: url(../images/icon_faq_q.png) 13px 8px no-repeat; font-weight: 500; }
.faq-wrap .answer { display: none; padding: 10px 30px; background-color: #eeeeee;}
.faq-wrap li.active a{background-position: right -80px;}
.faq-wrap li.active span{display: block;}
.faq-wrap li .answer p { display: block; color: #000; font-size: 14px; font-weight: 400;line-height: 1.8em;}
  footer{ padding: 50px 0 0 0;  background: var(--bg-panel);}

  @keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
  }

  h4 .ico-profile{  background:url(../images/ico_profile.png) center center #cc0034 no-repeat; background-size:20px 20px; }
h4 .ico-alarm{  background:url(../images/ico_alarm.png) center center #cc0034 no-repeat; background-size:20px 20px; }
h4 .ico-twitter{  background:url(../images/ico_twitter.png) center center #cc0034 no-repeat; background-size:20px 20px; }
h4 .ico-youtube{  background:url(../images/ico_youtube.png) center center #cc0034 no-repeat; background-size:20px 20px; }
h4 .ico-logout{  background:url(../images/ico_logout.png) center center #cc0034 no-repeat; background-size:20px 20px; }