/* 32px ==> 1rem */

@import url(SpoqaHanSansNeo.css);

* { font-family: 'Spoqa Han Sans Neo', 'sans-serif'; }
body { scrollbar-width: none; -ms-overflow-style: none; }
body ::-webkit-scrollbar { display: none; }

input::placeholder {color: #C9CED1;}
textarea::placeholder {color: #C9CED1;}
img {vertical-align: middle;}
input[type='text'] { -webkit-appearance: none; border: none; cursor:pointer; outline:none; margin:0; padding:0; }
input:focus {outline:none;}

a:link { color:#2B9EE8; text-decoration: none;}  
a:visited { color:#2B9EE8; text-decoration: none;} 
a:hover { color:#2B9EE8; text-decoration: none;}
a:active { color:#2B9EE8; text-decoration: none;}
a:focus { color:#2B9EE8; text-decoration: none;}

@media screen and (max-width: 680px){ 
  body { width: 100%; margin:0;}
}
@media screen and (min-width: 680px){ 
  body { width: 680px; margin: auto; }
}

.wrap { width:92%; margin: auto; }
.wrap .main {}
.wrap .main .logo { text-align: center; margin: 2rem auto; }
.wrap .main .title { text-align: center; margin: 2rem auto; }
.wrap .main .title strong { display: block; font-weight: bold; font-size: 2rem; color: #3A3C3D; }
.wrap .main .title span { display: block; font-weight: normal; font-size: 1rem; color: #3A3C3D; }
.wrap .main .line { width: 100%; height: 1px; background: #EDF2F5; margin: 2rem auto; }
.wrap .main .content { text-align: center; font-size: 0.5rem; color: #828587; margin: 2rem auto; }
.wrap .main .language { text-align: center; margin: 2rem auto; }
.wrap .main .language span { font-weight: bold; color: #2B9EE8; font-size: 0.625rem; padding: 0 0.5rem; }

.wrap .swap {}
.wrap .swap .header { text-align: center; margin-top: 1rem; }
.wrap .swap .header span { display: block; font-weight: normal; font-size: 0.625rem; color: #3A3C3D; }
.wrap .swap .header strong { display: block; font-weight: bold; font-size: 1rem; color: #3A3C3D; }

.wrap .swap .step1 {  }
.wrap .swap .step2 { display: none; }
.wrap .swap .step3 {  }

.wrap .swap .mesg { text-align: center; font-size: 0.55rem; font-weight: bold; color: #ED5858; line-height: 1rem; margin: 1.2rem auto; }
/* .wrap .swap .mesg span { font-weight: normal; color: #ED5858; } */
.wrap .swap .process { color: #2B9EE8; font-weight: bold; font-size: 0.56rem; }
.wrap .swap .process ol { padding-left: 0.6rem; }
.wrap .swap .process li { font-weight: normal;  font-size: 0.5rem; color: #3A3C3D; }

.wrap .swap .input { width:95%; margin: 0.8rem auto; }
.wrap .swap .input .label { font-size: 0.5rem; color: #A0A5A8; }
.wrap .swap .input .text { width: 100%; border: 1px solid #DFE4E8; box-sizing: border-box; border-radius: 4px; }
.wrap .swap .input .text .inputext { display: block; width: 98%; height: 1.3rem; margin: auto; font-size: 0.66rem; }
.wrap .swap .input .error { display: none; font-size: 0.5rem; color: #ED5858; }
.wrap .swap .warning { color: #ED5858; font-weight: bold; font-size: 0.56rem; }
.wrap .swap .warning ul { padding-left: 0.6rem; }
.wrap .swap .warning li { font-weight: normal;  font-size: 0.5rem; color: #3A3C3D; }

.wrap .swap .mesg2 { font-weight: bold; font-size: 0.5rem; color: #4C4E4F; text-align: center; margin: 0.8rem auto; }
.wrap .swap .address { font-weight: bold; font-size: 0.65rem; color: #2B9EE8; text-align: center; margin: 0.8rem auto; }

.wrap .swap .line { width: 100%; height: 1px; background: #EDF2F5; margin: 1rem auto; }
.wrap .swap .check { padding-left: 1rem; line-height: 0.8rem; font-size: 0.5rem; color: #000000; background-image:url("../img/uncheck.svg"); background-size: 0.8rem; background-repeat: no-repeat; background-position: left center; cursor: pointer; }
.wrap .swap .check.hover { background-image:url("../img/check.svg"); }
.wrap .swap .btn { width: 5rem; height: 1.4rem; background: #2B9EE8; border-radius: 0.75rem; text-align:center; line-height: 1.4rem; font-size: 0.5rem; color: #FFFFFF; margin: auto; cursor: pointer; }
.wrap .swap .btn.long { width: 8rem; }