/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 2018. 2. 20, 오후 3:34:21
    Author     : coinvest
*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900');

@font-face {
    font-style :normal;
    font-weight: 100;
    font-family: 'NanumSquare'; src:url(../fonts/NanumSquareL.woff) format('woff'), url(../fonts/NanumSquareL.eot) format('eot'), url(../fonts/NanumSquareL.ttf) format('truetype');}

@font-face {
    font-style :normal;
    font-weight: 300;
    font-family: 'NanumSquare'; src:url(../fonts/NanumSquareR.woff) format('woff'), url(../fonts/NanumSquareR.eot) format('eot'), url(../fonts/NanumSquareR.ttf) format('truetype');}

@font-face {
    font-style :normal;
    font-weight: 500;
    font-family: 'NanumSquareB'; src:url(../fonts/NanumSquareB.woff) format('woff'), url(../fonts/NanumSquareB.eot) format('eot'), url(../fonts/NanumSquareB.ttf) format('truetype');}

@font-face {
    font-style :normal;
    font-weight: 600;
    font-family: 'NanumSquareEB'; src:url(../fonts/NanumSquareEB.woff) format('woff'), url(../fonts/NanumSquareEB.eot) format('eot'), url(../fonts/NanumSquareEB.ttf) format('truetype');}


body, html {width:100%; height:100%;}
body {position:relative; font-family:'Montserrat','NanumSquare', Dotum, sans-serif;}
* { outline: none;}
ul,ol,li {margin:0;padding:0}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none; }
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {font-size:100%;vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
table {border-collapse:collapse;border-spacing:0}
body {-webkit-text-size-adjust:none; background: #fff;}
input[type='text'],input[type='password'],input[type='submit'],input[type='search'] {-webkit-appearance:none; }
input:checked[type='checkbox'] {background-color:#666; -webkit-appearance:checkbox}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {-webkit-appearance:button; }
input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none}
button a:focus, button a:hover {color: #fff; text-decoration: none;}
body,th,td,input,select,textarea,button {color:#525252}
a {color:#525252;text-decoration:none}
a:active, a:hover, a:focus {text-decoration:none}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
.row {margin: 0;}
button > a {color: #fff;}
button i {margin-right: 5px;}

.t-c {text-align: center;}
.t-l {text-align: left;}
.t-r {text-align: right;}
.m-a { margin: 0 auto; }
.mt0  {margin-top:0px;}
.mt5  {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}
.mb0  {margin-bottom:0px;}
.mb5  {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb15 {margin-bottom:15px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}
.mb50 {margin-bottom:50px;}
.mr0  {margin-right:0px;}
.mr5  {margin-right:5px;}
.mr10 {margin-right:10px;}
.mr15 {margin-right:15px;}
.mr20 {margin-right:20px;}
.mr30 {margin-right:30px;}
.mr40 {margin-right:40px;}
.mr50 {margin-right:50px;}
.ml0  {margin-left:0px;}
.ml5  {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml15 {margin-left:15px;}
.ml20 {margin-left:20px;}
.ml30 {margin-left:30px;}
.ml40 {margin-left:40px;}
.ml50 {margin-left:50px;}

.pt0  {padding-top:0px;}
.pt5  {padding-top:5px;}
.pt10 {padding-top:10px;}
.pt15 {padding-top:15px;}
.pt20 {padding-top:20px;}
.pt30 {padding-top:30px;}
.pt40 {padding-top:40px;}
.pt50 {padding-top:50px;}
.pb0  {padding-bottom:0px;}
.pb5  {padding-bottom:5px;}
.pb10 {padding-bottom:10px;}
.pb15 {padding-bottom:15px;}
.pb20 {padding-bottom:20px;}
.pb30 {padding-bottom:30px;}
.pb40 {padding-bottom:40px;}
.pb50 {padding-bottom:50px;}
.pr0  {padding-right:0px;}
.pr5  {padding-right:5px;}
.pr10 {padding-right:10px;}
.pr15 {padding-right:15px;}
.pr20 {padding-right:20px;}
.pr30 {padding-right:30px;}
.pr40 {padding-right:40px;}
.pr50 {padding-right:50px;}
.pl0  {padding-left:0px;}
.pl5  {padding-left:5px;}
.pl10 {padding-left:10px;}
.pl15 {padding-left:15px;}
.pl20 {padding-left:20px;}
.pl30 {padding-left:30px;}
.pl40 {padding-left:40px;}
.pl50 {padding-left:50px;}


/**************************Navigation**************************/

h1 {margin-top: 0; margin-bottom: 0;}
.navbar-default .navbar-brand {font-size: 25px; font-weight: lighter; color: #fff; text-transform: uppercase; margin: 14.5px 0;}

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {color: #fff;}
.navbar-right {margin-right: 0;}
.navbar-default {position: absolute; width:100%; background: transparent; border: transparent; z-index: 999;}
.navbar .nav a {border-radius: 50px; border: 1px solid #fff; font-size: 14px; background: transparent; color: #fff; padding: 5px 18px; margin: 27.5px 5px; transition: 0.3s;}
.navbar-default .navbar-nav>li>a {color: #fff;}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {background: #fff; border: 1px solid #fff; color:#feab27; font-weight: bold;}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {background-color: transparent;}
.navbar-default .navbar-toggle {border: 0; margin-top: 20px;}
.navbar-default .navbar-toggle .icon-bar {background-color: #fff;}
.navbar-default.bg-gradient {background: linear-gradient(-45deg, rgba(224, 74, 108, 1), rgba(254, 171, 39, 1));}
.navbar-default .navbar-nav li.menu-hidden {display: none;}

/**************************MainVisual**************************/
.visual_wrap {position: relative; width: 100%; min-height: 700px; height: 700px; background: linear-gradient(-45deg, rgba(224, 74, 108, 0.8), rgba(254, 171, 39, 0.8)) fixed, url(../img/main_bg.jpg) no-repeat center; background-size: cover;}
.m_visual {position: relative; top: 270px; text-align: center;}
.m_visual h1 {padding: 0; color: #fff; font-weight: lighter; font-size: 48px;}
.m_visual p {color: #fff; font-size: 16px; padding: 0; text-transform: uppercase;}
.m_visual .slogan input[type="password"] {font-family: 'Noto Sans KR',  Dotum, sans-serif;}
.m_visual button {background: #ffe400; border: 1px solid #ffe400; color:#000;}

.chart_price {position: absolute; bottom: -1px; width: 100%;}
.chart_price li dl {background: rgba(255,255,255,0.7); color: #000; font-size: 16px; position: relative; bottom: 0; height: 50px; margin: 0;}
.chart_price li dt img {height: 23px;}
.chart_price li dt {float: left; padding: 12px 20px; font-size: 18px;}
.chart_price li:nth-of-type(1) dt img { height: 25px; }
.chart_price li dd {float: right; padding: 12px 20px;}

@media (max-width: 1200px) {
    .chart_price li {padding: 0;}
    .chart_price li:nth-child(odd):before {content: ""; position: absolute; width: 1px; height: 36px; background: #6f6f6f; top: 7px; right: 0; z-index: 999;}
}
@media (max-width: 991px) {
    .chart_price li:nth-child(odd):before {content: ""; position: absolute; width: 1px; height: 36px; background: transparent; top: 7px; right: 0; z-index: 999;}
}
.characteristic {text-align: center; background: url(../img/section1_bg.jpg) no-repeat; padding: 137px 0;background-size: cover}
.characteristic-text p:first-child {font-size: 24px; margin-bottom: 15px; text-transform: uppercase}
.characteristic-text p:last-child {font-size: 18px; margin-bottom: 87px}
.characteristic-icon li dl {margin-bottom: 0px;}
.characteristic-icon li dt {font-size: 24px; font-weight: normal;}
.characteristic-icon li dd {padding: 6px 35px; color: #aaa; line-height: 25px; text-transform: uppercase;}
.characteristic-icon .svg {width: 145px; height: 145px; padding: 17px 0; margin-top: 30px;}

.process {text-align: center; padding: 100px 0;}
.process-text p:first-child {font-size: 24px; margin-bottom: 15px; text-transform: uppercase;}
.process-text p:last-child {font-size: 18px; margin-bottom: 80px;}
.process-icon li dl{margin: 15px 0; padding:15px; border: 1px solid #e04a6d; box-sizing: border-box; border-radius: 5px;}
.process-icon dt img {float: left; margin: 50px 40px 50px 25px;}
.process-icon dd {color: #e04a6d; font-size: 24px; text-align: left; padding: 75px 0;}
.process-icon dd span {color: #525252; font-size: 20px;}
.process-icon .svg {width: 115px;}

.coin-system {background: #005fb2; height: 470px;}
.coin-system strong {font-size: 48px; font-weight: 400; color: #fff; text-transform: uppercase; text-shadow: 2px 2px 5px gray;}
.coin-system p {font-size: 20px; color: #fff; margin-top: 15px; text-shadow: 2px 2px 2px gray;}
.coin-system .carousel-inner item {padding: 0;}
.coin-system .carousel-indicators {text-align: center;}
.coin-system .carousel-indicators .active {width: 18px; height: 18px;}
.coin-system .carousel-indicators li {width: 15px; height: 15px; margin: 0 5px;}
.coin-system .carousel-inner .container .text {margin-top: 120px;}
.coin-system .carousel-inner div img {width: 712px;}
.coin-system .carousel-inner .carousel-caption {text-align: left;}

.vision {text-align: center; padding: 75px 0;}
.vision p:first-child {font-size: 24px; margin-bottom: 15px; text-transform: uppercase;}
.vision p:last-child {font-size: 18px; margin-bottom: 55px;}
.vision dd {font-size: 15px;}
.vision img {margin-bottom: 15px;}
.vision-icon img {width:100%;}
footer {text-align: center; background-color: #cfcfcf; font-size: 14px;}
footer p {margin: 0; padding: 50px 0; color:#fff}

@media(max-width:1199px){
    .slogan .form-inline {margin: 10px 0;}
    .coin-system .carousel-caption {top: 0px;}
}
@media(max-width:991px){
    .visual_wrap {min-height: 600px; height: 600px;}
    .process-icon dt img {float: none; margin: 20px 45px 0 45px; text-align: center;}
    .process-icon dd {padding: 40px 0; text-align: center;}
    .slogan .form-inline {margin: 10px 0;}
    .slogan .form-inline button {width: 20%;}
    .coin-system .carousel-indicators .active {width: 15px; height: 15px;}
    .coin-system .carousel-indicators li {width: 12px; height: 12px; margin: 0 5px;}
    .coin-system .carousel-inner .container .text {margin-top: -200px; text-align: center;}
    .coin-system strong {font-size: 36px; font-weight: 400;}
    .coin-system p {font-size: 18px;}
}
@media(max-width:767px){
    .m_visual {position: relative; top: 150px;}
    .visual_wrap {min-height: 500px; height: 500px;}

    .chart_price li dt {padding: 12px 14px;}

    .slogan .form-inline {margin: 15px 0;}
    .slogan .form-group input {width: 100%;}
    .slogan .form-inline button {width: 100%;}
    .slogan h1 {font-size: 25px; padding: 20px 0; margin-bottom: 0;}

    .characteristic {padding: 50px 0;}
    .characteristic-text p:first-child {font-size: 20px; margin-bottom: 5px; font-weight: bold;}
    .characteristic-text p:last-child {font-size: 14px; margin-bottom: 25px;}
    .characteristic-icon .svg {width: 120px; height: 120px; padding: 10px 0; margin-top: 10px;}
    .characteristic-icon p {font-size: 18px; margin-bottom: 0; margin-top: 5px;}
    .characteristic-icon li dd {padding: 6px 0;}

    .process {padding: 50px 0;}
    .process-text p:first-child {font-size: 20px; margin-bottom: 5px; font-weight: bold;}
    .process-text p:last-child {font-size: 14px; margin-bottom: 25px;}
    .process-icon dd {text-align: center; font-size: 16px; padding: 15px 0 0;}
    .process-icon dd span {font-size: 14px;}
    .process-icon .svg {width: 85px; padding-top: 0; margin: 0;}

    .coin-system .carousel-inner .container .text {margin-top: -120px;}
    .carousel-indicators {bottom: 20px;}
    .coin-system strong {font-size: 20px;}
    .coin-system p {font-size: 13px; margin-top: 0px;}
    .coin-system .carousel-inner div img {width: 100%; align-content: center;}


    .vision {text-align: center; padding: 30px 0;}
    .vision p:first-child {font-size: 20px; margin-bottom: 5px; font-weight: bold;}
    .vision p:last-child {font-size: 14px; margin-bottom: 25px;}
    .vision dd {font-size: 14px;}
    footer p {padding: 15px 0; font-size: 12px;}
}
@media(max-width:700px){
    .coin-system .carousel-inner .container .text {margin-top: -80px;}
    .carousel-indicators {bottom: -20px;}
}
@media(max-width:650px){
    .coin-system .carousel-inner .container .text {margin-top: -60px;}
    .carousel-indicators {bottom: -40px;}
}
@media(max-width:600px){
    .coin-system .carousel-inner .container .text {margin-top: -20px;}
    .carousel-indicators {bottom: -40px;}
}
@media(max-width:550px){
    .coin-system .carousel-inner .container .text {margin-top: 0px;}
    .carousel-indicators {bottom: -40px;}
}
@media(max-width:500px){
    .coin-system .carousel-inner .container .text {margin-top: 20px;}
    .carousel-indicators {bottom: -60px;}
}
@media(max-width:450px){
    .coin-system .carousel-inner .container .text {margin-top: 40px;}
    .carousel-indicators {bottom: -60px;}
}
@media(max-width:400px){
    .coin-system .carousel-inner .container .text {margin-top: 60px;}
    .carousel-indicators {bottom: -70px;}
}

/**************************Login**************************/
.full-bg{
    background: linear-gradient(-45deg, rgba(224, 74, 108, 0.8), rgba(254, 171, 39, 1)) fixed, url('../img/full-bg-img.png'); background-size: cover;position: relative; height:90%;}
.account_wrap {text-align: center; width:100%;position: absolute; top: 200px; }
.account_inner {width: 400px; height: 450px; margin: 0 auto;box-shadow:0px 100px 300px -90px #525252; background-color: #fff; padding: 30px;}
.account_wrap h2{color: #1a1a1a; padding-top: 15px; font-size: 24px; color:rgb(254,171,39)}
.account_inner form {margin-top: 40px;}
.account_inner form fieldset input.form-control {background-color: transparent; border:0; border-bottom: 1px solid #eee; box-shadow: none;-webkit-box-shadow: 0; margin-top: 10px;}
.account_inner form button {font-size: 16px; border-radius: 30px; font-weight: bold; width: 100%; height:40px;}
.btn-login {background-color: #eee; margin-top: 30px;}
.btn-login a {color: #525252;}
.btn-signup {background-color: #02abe4;}
.id-pw-find {padding-top: 30px; padding-right: 30px;}
.id-pw-find a:hover {color: rgb(224,74,108);}
.id-pw-find a:first-of-type {margin-right: 20px;}

/**************************Signup**************************/
#signUp {height: 480px;}
#signUp h2 {margin:0;}
#signUp form {margin-top: 15px; }
#signUp .btn-signup {margin-top: 25px;}
#signUp form fieldset p:last-of-type { font-size: 13px;text-align: left; margin: 0; margin-top: 240px;}
.account_inner form fieldset input.agreement {width: 15px; height: 15px;}

/**************************FindId**************************/
#findId, #findPw {height: 400px;}
#findId .btn-findid, #findPw .btn-findpw {background-color: #02abe4; margin-top: 30px;}


@media(max-width:416px){
    .account_inner {width: 300px;}
    .account_inner form fieldset input {width: 200px;}
}
@media(max-width:320px){
    .coin-system .carousel-inner .container .text {margin-top: 60px;}
    .carousel-indicators {bottom: -70px;}
}

.user-email {color: #fff; margin: 30px 10px; font-size: 17px;}
.user-email img {width: 25px; border-radius: 50%;}

/***********************tab***********************/
.tab-wrapper {padding-top: 87px;border-bottom: 1px solid rgb(221,221,221)}

.nav-tabs {margin-top: 0px;}
.nav-tabs > li {width: 25%; text-align: center;border-bottom:4px solid #fff;}
.nav-tabs > li > a {display: block; height: 50px; line-height: 30px; font-size: 18px;color: #555; background-color: #fff; }
.tab-wrapper {background-color:#fff;}
.nav-tabs {width: 100%;}
#myTab li a {display: block; margin: 0; text-align: center; border: 0;}
.nav-tabs > li.active {border-bottom:4px solid #e55b60;}
/*
.nav-tabs > li:hover {border-bottom:4px solid #f5f5f5;}
.nav-tabs > li.active:hover {border-bottom:4px solid #e55b60;}
*/
.nav-tabs > li > a:hover{ color:#000; background-color: #fff; font-weight: bold; transition: 0.3s;}
.nav-tabs > li.active > a {color: #e55b60;  font-weight: bold; transition: 0.3s; }
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {color: #e55b60; background-color: #fff; font-weight: bold; transition: 0.3s; }
.trading-wrap {min-height: 700px;}
.trading table {margin:60px 0 70px; width: 100%;}
.trading table thead { border: 0; background-color: #feab27; }
.trading table thead tr th {width: 20%; font-size: 14px; color:#fff; border-right: 1px solid #fff; font-weight: 700;}
.trading table tr {height: 30px; line-height: 40px;}
.trading table tbody tr {border-bottom: 1px solid rgb(221,221,221);}
.trading table tbody tr td {font-size: 12px; vertical-align: middle;}

.table-custom table{ width: 100%;}
.table-custom table thead { border: 0; background-color: #feab27; }
.table-custom table thead tr th {font-size: 14px; color:#fff; border-right: 1px solid #fff; font-weight: 700; text-align: center;}
.table-custom table tr {height: 30px; line-height: 40px;}
.table-custom table tbody tr {border-bottom: 1px solid rgb(221,221,221);}
.table-custom table tbody tr td {font-size: 12px; vertical-align: middle;font-weight: 500;}
.table-custom table tbody tr td:first-of-type {width: auto;}
.table-custom table tbody tr td:last-of-type {width: auto;}
.page-number {width:auto;margin: 40px auto; text-align: center;}
.page-number a {width: 33px; display: inline-block; padding: 5px 10px; border: 1px solid rgb(221,221,221); border-radius: 100%; color: #555; margin: 0 5px;}
.page-number a:hover {text-decoration: none; background-color:#feab27; color: #fff; cursor: pointer; transition: 0.3s;}
a.active {text-decoration: none; background-color: #feab27; color: #fff; cursor: pointer; transition: 0.3s;}


/**************************Exchange**************************/
.exchange-wrap {min-height: 700px;}
.exchange-inner {width: auto; margin: 50px auto 150px; font-size: 17px; border: 1px solid #ccc}
.second-tab ul {width: 100%; }
.second-tab ul li {font-family: 'roboto'; float: left; width: 33.33333%;border-bottom: 1px solid rgb(221,221,221)}
/*.second-tab ul li.active {border-bottom: 3px solid #feab27;}*/

.second-tab ul li a {display: block; height: 50px; line-height: 50px; text-align: center; color: #aaa; }
.second-tab ul li.active a {color: #fff; background-color: #feab27; font-weight: bold;}
.tab_item {padding: 50px 25px 25px 25px}
.tab_item .col-md-6 {min-height: 430px;}
.tab_item .col-md-6:first-of-type{border-right: 1px solid #ccc;}
.tab_item .table {margin-bottom: 0; margin-top: 20px; border:0;}
.tab_item h2 {font-size: 24px; text-align: center;}
.exchange-inner label { font-size: 14px; width: 30%; margin-bottom: 0;}
.balance-wrap .second-tab ul li {width:25%}
.balance label {width: 12%}
.exchange-inner input {border: 0; height: 30px; padding: 0 10px; font-size: 14px; width:66.5%; border-bottom: 1px solid #ddd;}
.table tbody tr td:first-of-type { width: 30%; font-size: 14px; font-weight: 700; padding: 8px 12px; vertical-align: middle; background-color: #eee}
.table tbody tr td:last-of-type {font-family: 'roboto'; width: 70%; font-weight: normal; padding: 8px 9px;}
.balance input {width: 87%;}

.exchange-inner form { box-sizing: border-box;}
.exchange-inner h2 { margin-top:50px; }
.exchange-inner h4 { padding: 20px 0; margin: 20px 0 45px; border-radius: 10px; background: rgba(254,171,39,0.15); text-align: center;}
.exchange-inner form p { margin: 0; margin-bottom: 17px;}

.exchange-inner form p:last-child { font-size: 12px; font-family: 'Roboto'; text-align: right; margin: 5px 3px;}
.exchange-inner .tabs .fa-arrows-h { margin: 0 10px; }
.exchange-inner .tab_container .tab_item .fa-arrow-right { margin: 0 9px 0 3px; }
.exchange-inner .tab_container .tab_item div:nth-of-type(1) { padding-right: 40px; }
.exchange-inner .tab_container .tab_item div:nth-of-type(2) { padding-left: 40px; }

.btn-exchange {width: 100%; padding: 10px 0; background-color: #02abe4; border-radius: 20px; margin: 20px 0; font-size: 14px;}
.btn-code a {color: #fff; font-size: 14px;}
.bg-pink {background-color: #e55b60}
.bg-blue {background-color: #02abe4}
.bg-yellow {background-color: #feab27}
.color-blue {color: #02abe4}
.color-pink {color: #e55b60}
.btn-exchange a {color: #fff; font-size: 17px;}
.tab_drawer_heading {display: none;}
/*
.bg-gray {background-color: #f6f6f6;}
.exchange-inner {background-color: #fff}
*/
.balance-wrap .balance .exchange-inner.balance-inner {width:700px; margin: 40px auto 80px auto;}
.balance .btn-exchange {margin: 0;}

/**************************balance************************/

.balance_wrap h2 { font-size: 24px; font-weight: bold; margin: 40px 0 0; border: 1px solid #f6f6f6; border-radius: 10px; padding: 20px 0; background: rgba(254,171,39,0.15); }
.balance_wrap h2 span:nth-of-type(2) { font-family: 'Roboto'; }
.balance_wrap form { padding: 50px 20px 40px; border-radius: 10px; }
.balance_wrap form fieldset p { margin-bottom: 25px; }
.balance_wrap form fieldset p:nth-of-type(2) input { position: relative; left: -4px; }
.balance_wrap form fieldset p:nth-of-type(2) input, .balance_wrap form fieldset p:nth-of-type(3) input { width: 82%; color: #525252; }
.balance_wrap form fieldset .btn-code { width: 20%; height: 30px; line-height: 25px; background-color: #feab27; border-radius: 14px; vertical-align: middle;}
.balance_wrap form fieldset .btn-exchange { margin-top: 30px; }
.balance_wrap form fieldset p input::placeholder { font-size: 14px; opacity: 0.5;}
.balance_wrap form fieldset p .scr_box { width: 28%; padding-left: 7px; }
.balance_wrap form fieldset .btn-exchange b { font-family: 'Roboto'; font-weight: normal; }
.balance_wrap form .widthrawal_box { position: relative; }
.balance_wrap form .widthrawal_box .check_btn { position: absolute; background: #feab27; font-size: 12px; border-radius: 4px; padding: 5px 10px; color: #FFF; right: 10px; top: -3px; }
.exchange-inner.balance-inner .tab_item form p .withdrawal_account_input { padding-right: 77px; }


/**************************My page************************/
.mypage-wrap {min-height: 650px;}
.mypage .profile-wrap img {border-radius: 50%; width: 120px; margin: 30px auto 15px;}
.mypage .profile-wrap { margin: 20px 0; }

.profile-pic-wrap { margin-left: 7%;}
.profile-wrap .col-md-8 li .bg-yellow { margin-top: 2px; color: #fff; }
.fileBox .fileName {display:inline-block;width:110px;height:20px;padding-left:10px;line-height:20px;border:0;border-bottom:1px solid #aaa;background-color:#fff;vertical-align:middle}
.fileBox .btn_file {display:inline-block; background-color: #eee;width:100px;height:25px;font-size:11px;line-height:25px;letter-spacing: 1px; text-align:center;vertical-align:middle; margin-top: 5px; cursor: pointer;}
.fileBox input[type="file"] {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.mypage .profile-wrap ul {padding: 35px 0; margin-top: 25px;}
.mypage .profile-wrap ul li {font-size: 16px; margin-top: 5px;}
/* .mypage .profile-wrap ul li:nth-of-type(2) { padding-right: 121px; }
.mypage .profile-wrap ul li:nth-of-type(3) { padding-right: 5px; } */
.mypage .col-lg-6, .mypage .col-md-11, .mypage .col-md-5 {border: 1px solid rgb(221,221,221); padding: 30px 35px; border-radius: 10px; margin-bottom: 40px;}
.mypage .btn-api-wrap { margin-bottom: 40px; }
.mypage .btn-api-wrap button b { font-family: 'Roboto'; }
.mypage .col-lg-6:last-of-type {height: 150px; padding-top: 40px;}
.mypage .col-lg-6 label {width: 30%;}
.mypage .col-lg-6 p input {width: 68%; border: none; border-bottom: 1px solid #ddd; height: 30px; padding: 0 5px; font-size: 14px}
.mypage .col-lg-6:nth-of-type(2) > label {width: 115px; margin-right: 6px;}

.mypage .col-lg-5:last-of-type {height: 150px; padding-top: 40px;}
.mypage .col-lg-5 label {width: 30%;}
.mypage .col-lg-5 p input {width: 68%; border: none; border-bottom: 1px solid #ddd; height: 30px; padding: 0 5px; font-size: 14px}
.mypage .col-lg-5:nth-of-type(2) > label {width: 115px; margin-right: 6px;}
.mypage .pw1 { margin-left: 6.93333333% !important; }
.mypage .pw2 { margin-left: 3.33333333% !important; }
#security {width: 275px; border: 1px solid rgb(221,221,221); border-radius: 5px; height: 30px; padding: 0 10px; font-size: 14px}
.pw2 .text-center .mp_otp_btn b { font-family: 'Roboto' !important;  }


.btn-mypage {position: relative; width: 100%; height: 40px; background-color: #02abe4; border-radius: 50px; margin: 10px 0;}
.btn-mypage a { color: #fff; font-size: 14px; font-weight: bold;}
.btn-mypage a b { font-family: 'Roboto'; font-size: 15px; }
.btn-api {background-color: #feab27; width: 30%; }
.pgi h3 {margin: 20px;}
.btn.plus, .btn.minus {width: 60px; border-radius: 45px; margin-top: 25px; display: inline; font-size: 13px;}
.pgi-wrap {margin-bottom: 20px;}
.pgi-inner p input {border: 0; border: 1px solid rgb(221,221,221); border-radius: 30px;}

#myModal .modal-dialog .modal-content .modal-footer .btn-success { background: #02abe4; border: none; }
.modal-content { position: absolute; left: 0; right: 0; margin: auto; width: 15%; min-width: 310px; max-width: 500px; transform: translateY(50%); }
.modal-content .modal-body { padding: 30px 20px 40px !important; }

@media (max-width:1199px) {
    .balance_wrap form fieldset p label { font-size :14px; width: 12% !important; }
    .balance_wrap form fieldset p input { width: 86% !important; }
    /* .balance_wrap form fieldset p:nth-of-type(2) input, .balance_wrap form fieldset p:nth-of-type(3) input { width: 85% !important; color: #525252; } */
    .balance_wrap form fieldset p:nth-of-type(2) input, .balance_wrap form fieldset p:nth-of-type(3) input { width: 82% !important; }
    .balance_wrap form fieldset p:nth-of-type(2) { margin-bottom: 25px; }
    .balance_wrap form fieldset p .scr_box { width: 28% !important; }


    .exchange-inner label { width: 100%; }
    .exchange-inner input { width: 95%; }
    .exchange-inner.balance-inner form fieldset p:last-of-type input {width: 50%;}

    .mypage .col-md-5 label {width: 35%; font-size: 13px;}
    .mypage .col-md-5 p input {width: 65%; font-size: 13px;}
    .mypage .col-md-5:nth-of-type(2) > label {width: 35%;}
    #security {width: 63%;}
    .mypage button b { font-size: 14px; }


}
@media (max-width:991px) {
    .exchange-inner {margin: 10px auto;}
    .exchange-wrap {min-height:450px;}
    .exchange-inner label { width: 100%; }
    .exchange-inner input { width: 92%; }
    .exchange-inner h4 { font-size: 15px; }
    .exchange-inner form p { margin-bottom: 15px; }
    .exchange-inner form p:nth-of-type(2) { margin-bottom: 0; }

    .exchange-inner.balance-inner form fieldset p label {width: 15%}
    .exchange-inner.balance-inner form fieldset p input {width: 80%}
    .exchange-inner.balance-inner form fieldset p:last-of-type input {width: 40%;}
    .trading-wrap {min-height: 300px;}
    .table.table-bordered tbody tr td:first-of-type {font-size: 14px; width: 41%}
    .btn-mypage { width: 100%; height: 40px; }
    .profile-pic-wrap { margin: 0; }
    /* .balance_wrap form fieldset p:nth-of-type(2) input, .balance_wrap form fieldset p:nth-of-type(3) input { width: 84% !important; color: #525252; } */
    #security {width: 76%;}
    .chart_price li dt {float: left; padding: 12px 12px; font-size: 18px;}
    .chart_price li:nth-of-type(1) dt img { height: 25px; }
    .chart_price li dd {float: right; padding: 12px 17px;}

    .mypage .profile-wrap ul { width: 230px; max-width: 230px; margin: 30px auto; padding: 0; text-align: left;}
    .mypage .row .pw2 .text-center { margin-top: 30px; }
    .mypage .pw1 { margin-left: 0 !important; }
    .mypage .pw1 p label { font-size: 14px; }
    .mypage .pw2 { margin-left: 0 !important; }
    .mypage .pw2 p label, .mypage .pw2 div label { width: 23%; font-size: 14px; }
    .mypage .pw2 p input { width: 77% !important; }
    .mypage .btn-api-wrap { height: 100%; }
    .mypage .col-md-5 label {width: 23%; }
    .mypage .col-md-5 p input {width: 77%; font-size: 13px;}
    .mypage .col-md-5:nth-of-type(2) > label {width: 170px;}
    .btn-api { width: 50% !important; }
    .pw2 .text-center .mp_otp_btn { margin-left: 0px; }

    /* .mypage button {margin-left: 180px; width: 410px; height: 30px;} */
    /* .mypage .col-md-5 {padding: 15px; margin-bottom: 15px; height: 180px;} */
    /* .mypage button a {font-size: 16px;} */
    /* .mypage button.btn-api {margin-left: 0; width: 400px;} */

}
@media (max-width:767px) {
    .navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus {color: #fff}
    .navbar-default .navbar-nav>li>a {border: 0; border-radius: 0; color: #fff; font-size: 18px}
    .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
        background-color: transparent; border:0; color: #fff;
        font-weight: bold;}
    .nav-tabs > li > a {font-size: 14px; padding: 0; line-height: 50px;}
    .navbar-default .navbar-nav li.menu-hidden {display:block;}
    .navbar-default .navbar-nav li.menu-hidden:first-of-type {border-top: 1px solid rgb(221,221,221)}
    .navbar-collapse.bg-white {background-color: #fff; border-bottom: 1px solid #e96659; box-shadow: 2px 1px 7px #ffb691;}
    .navbar-collapse.bg-white .navbar-nav li a {color: #f87440}
    .navbar-default .navbar-collapse.bg-white .navbar-nav>li>a:focus, .navbar-default .navbar-collapse.bg-white .navbar-nav>li>a:hover {
        background-color: transparent; border:0; color: #f87440;
        font-weight: bold;}
    .navbar-default .navbar-nav>li.user-email {float: left}
    .navbar-default .navbar-nav>li>a.logout {margin:0; margin-left: 210px; margin-top: 28px;}
    .navbar-default .navbar-nav>li>a.logout::before {display: inline-block; content: ""; clear: both; width: 1px; height: 17px; background-color: #fff; margin-right: 20px; position: relative; top: 2px;}
    .trading-wrap, .exchange-wrap {min-height: 170px;}
    .mypage-wrap {min-height: 380px;}
    .table-responsive {margin-top: 10px; border: none;}
    .trading table {margin-top: 0px;}
    .trading table thead tr th, .trading table tbody tr td {font-size: 13px}
     .page-number {width:auto; margin: 10px auto; text-align: center;}
     .page-number a {/* font-size: 11px; padding: 0 5px; */ margin: 15px 3px;}
    .exchange-inner {margin:10px 0;}
    /* .exchange-inner form { padding: 25px; } */
    .exchange-inner .tab_item h2 {font-size: 17px;}
    .exchange-inner .tab_item label {width: 22%; font-size: 14px;}
    .exchange-inner .col-md-6:first-of-type {border:0;border-bottom: 1px solid #ccc; padding-top: 20px;}
    .exchange-inner table {font-size: 13px;}
    .exchange-inner .col-md-6:last-of-type {border: 0; min-height: 390px;}
    .exchange-inner .tab_item p input {width: 74%; font-size: 14px;}
    .exchange-inner form p:last-child { margin: 10px; }
    .exchange-inner .tab_container .tab_item div:nth-of-type(1) { padding-right: 10px; padding-left: 10px; }
    .exchange-inner .tab_container .tab_item div:nth-of-type(2) { padding-right: 10px; padding-left: 10px; }


	.balance_wrap form fieldset p label { width: 15% !important; }
    .balance-wrap .balance .exchange-inner.balance-inner {width: 560px; margin: 20px auto;}
    .balance_wrap form fieldset p:nth-of-type(2) input, .balance_wrap form fieldset p:nth-of-type(3) input { width: 76% !important; }
    .exchange .exchange-inner .tab_item {padding: 40px 10px 10px 10px;}
    .exchange-inner.balance-inner label {width: 18%; font-size: 11px;}
    .exchange-inner.balance-inner .tab_item form p input {width: 70%}

    .exchange-inner.balance-inner .tab_item form p:last-of-type input {width: 70%}
    .exchange-inner.balance-inner form fieldset p input { width: 80%; }
    .exchange-inner.balance-inner form fieldset p:last-of-type input {width: 40%;}
    .balance_wrap form fieldset .btn-code { width: 85px; padding: 0 15px; line-height: 26px;}
    .balance_wrap form fieldset p input { width: 83% !important; }
    .balance_wrap form fieldset p label { width: 15%; font-size :14px !important; }
    .balance_wrap form fieldset p .scr_box { width: 40% !important; }
    .btn-exchange a {font-size: 13px; }
    .btn-api { width: 50% !important; }
    .account_wrap {top:90px;}
    .full-bg {height: 100%;}
}
@media (max-width: 575px) {
    .exchange-inner .second-tab .tabs li a {font-size: 15px;}
    .exchange .tab_item form fieldset p label {font-size: 14px; width: 100%;}
    .exchange .tab_item form fieldset p input {font-size: 12px; width: 94%;}
    .exchange-inner h2 { margin-top: 30px; }
    .exchange-inner form p:last-child { margin: 0px; margin-right: 7px; margin-bottom: 20px;}

    .balance-wrap .balance .exchange-inner.balance-inner {width: 100%; margin: 10px auto;}
    .balance .exchange-inner.balance-inner .tab_item {padding: 50px 10px 15px 10px;}

    .balance_wrap form { padding: 20px 17px; }
    .balance_wrap form fieldset p:last-child { margin-bottom: 20px !important; }
    .balance_wrap form fieldset p:nth-of-type(2) input, .balance_wrap form fieldset p:nth-of-type(3) input { width: 73% !important; }
    .balance_wrap form fieldset p label { font-size :14px !important; width: 18% !important;}
    .balance_wrap form fieldset p input { width: 80% !important; }
    /* .balance_wrap form fieldset p:nth-of-type(2) input, .balance_wrap form fieldset p:nth-of-type(3) input { width:77% !important; color: #525252; } */
    .balance_wrap form fieldset p input::placeholder { font-size: 13px; opacity: 0.7;}
    .balance_wrap form fieldset p .scr_box { width: 51% !important; }
    .balance_wrap form fieldset .btn-exchange { margin-top: 15px; }


    #security {width: 100%; padding: 0;}
    .mypage .col-md-5 label {width: 100%; }
    .mypage .col-md-5 p input {width: 100%; font-size: 13px;}
    .mypage .col-md-5:nth-of-type(2) > label {width: 170px;}
    .mypage button.btn-api {margin-left: 0;}
    .mypage .col-lg-6, .mypage .col-md-11, .mypage .col-md-5 { padding: 35px 25px 15px; }
    .mypage .pw2 p label, .mypage .pw2 div label { width: 100%; font-size: 14px; }
    .mypage .pw2 p input { width: 100% !important; }
    .mypage .pw2 .text-center .mp_otp_btn b { font-size: 12px; }
    .btn-mypage { min-width: 135px; }


}

@media (max-width:397px) {
    /* .exchange-inner form h4 { text-align: center; }
    .exchange-inner form p:last-child { font-size: 10px; margin: 3px 0 0 0; }
    .mypage .col-md-5 {height:180px;} */
    .exchange-inner .tabs .fa-arrows-h { margin: 5px; }
    .mypage button { font-size: 13px !important; }
    .mypage button b { font-size: 12px !important; }

    .balance_wrap form { padding: 15px !important; }
    .balance_wrap form fieldset .btn-code { padding: 0 14px; width: 55px;}
    .balance_wrap form fieldset p input { width: 100% !important; padding: 0; padding-left: 3px; }
    .balance_wrap form fieldset p:nth-of-type(2) input, .balance_wrap form fieldset p:nth-of-type(3) input { width: 93% !important; left: 0; }
    .balance_wrap form fieldset p input::placeholder { font-size: 11px; opacity: 0.7;}
    .balance_wrap form fieldset p label { font-size :14px !important; width: 100% !important;}
    .balance_wrap form fieldset p .scr_box { width: 70% !important; }
    .balance_wrap form fieldset p:last-of-type .btn-code { margin: 0; }
    .balance_wrap form fieldset .btn-exchange { margin-top: 15px; }
    .exchange-inner.balance-inner .tab_item form p .withdrawal_account_input { padding-right: 0; }
    .pw2 .text-center .mp_otp_btn { margin-left: 0; }
}
@media (max-width:375px) {
    .exchange-inner .second-tab .tabs li a {font-size: 12px;}
    .navbar-default .navbar-nav>li.user-email {font-size: 14px;}
    .navbar-default .navbar-nav>li>a {font-size: 14px;}
    .navbar-default .navbar-nav>li>a.logout {margin-left: 175px;margin-top: 26px;}
    .navbar-default .navbar-nav>li>a.logout::before {margin-right: 10px;top: 3px }
    .exchange .tab_item form fieldset p:last-of-type input {width: 75%;}
    /* .exchange-inner form { padding : 25px;} */
    .exchange-inner form h4 { font-size: 14px; margin: 0px 0 23px 0;}
    .exchange-inner form p { font-size: 12px; }
    .exchange .tab_item form fieldset p label, .balance .tab_item form fieldset p label { width: 100%; font-size: 12px; }

    .btn-code {width: 70%; margin-left: 21%; margin-top: 10px;}

    .balance-wrap .balance .exchange-inner.balance-inner input {width:75%}
    .exchange-inner.balance-inner .tab_item form p:last-of-type input {width: 75%}
    .balance-wrap .balance .exchange-inner.balance-inner {margin: 10px auto;}
    .balance-wrap .balance .exchange-inner.balance-inner h2 {font-size: 14px;}
    .btn-code a {font-size: 11px;}
    .balance_wrap form .widthrawal_box .check_btn { font-size: 11px; padding: 4px 7px; right: 0; }
    /* .mypage .profile-wrap {height: 150px;}
    .mypage .profile-wrap ul li {font-size: 11px; margin-top: 10px;}
    .mypage .col-md-5 {padding: 5px;}
    .mypage .col-md-5 label {width: 35%; margin-right: 3px;}
    .mypage .col-md-5:nth-of-type(2) > label {width: 33%}
    .mypage .col-md-5 p input {width: 60%}
    .mypage .col-md-5:nth-of-type(2) > input {width: 60%}
    .mypage button {width: 60%; margin-left: 35%;}
    .exchange .tab_item form fieldset p input, .balance .tab_item form fieldset p input {width: 95%} */
}
@media (max-width:320px) {
    .trading table {margin-bottom: 20px;}
    .trading table thead tr th, .trading table tbody tr td {font-size: 11px}
    .page-number a {margin: 15px 2px;}
    .exchange .tab_item {padding: 5px;}
    .exchange .tab_item .col-md-4:first-of-type h2 {margin-top: 60px;}
    .exchange .exchange-inner .tab_item {padding: 20px 0 0 0;}
    .balance .exchange-inner.balance-inner .tab_item {padding: 50px 10px 15px 10px;}
    .account_inner {height: auto; padding: 15px;}
    .exchange .tab_item form fieldset p label, .balance .tab_item form fieldset p label {width: 44%;}
    .account_inner h2 {margin: 0;}
    .account_inner form {margin-top: 20px;}
    #findId, #findPw {height: 300px;}
    #signUp {height: 430px;}
}