@charset "UTF-8";

html {
	font-family: 'Noto Sans Korean', 'Sans-serif';
	-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}

body {
	font-family: 'Noto Sans Korean', 'Sans-serif';
	margin: 0; padding: 0; background-color: #fff;
}

article, aside, footer, header, nav, section, figcaption, figure { display: block; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
img { border-style: none; }
ol, ul {list-style: none; }

a { background-color: transparent; -webkit-text-decoration-skip: objects; }
a:active, a:hover { outline-width: 0; }
a, a:hover { text-decoration: none; }

input, textarea, button, select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; }
input, textarea, button, select{ -webkit-border-radius:0; -moz-border-radius:0; }

div, p, span, button, input, optgroup, select, textarea { font-family: 'Noto Sans Korean', 'Sans-serif'; }
button, input, optgroup, select, textarea { font-size: 100%; line-height: 1.15; margin: 0; }
input, select, textarea { font-family: 'Sans-serif'; }
select::-ms-expand { display: none; }
button { overflow: visible; }

::-webkit-file-upload-button {-webkit-appearance: button; }

[hidden] { display: none; }

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, caption, blockquote, pre,
form, img, a, abbr, address, big, cite, code,
dl, dt, dd, ol, ul, li, b, u, i, label, center,
fieldset, section, del, em, q, s, small, strike, strong,
table, tbody, tfoot, thead, tr, th, td,
footer, header, figure, figcaption, hgroup, legend,
menu, nav, output, ruby, summary, mark {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
blockquote, q {quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }
button {
	padding: 6px 12px; font-family: inherit; font-size: 0.95rem; background-color: transparent;
	border: 1px solid #83C9F4; border-radius: 4px; cursor: pointer; outline: 0; transition: all 0.1s ease-in-out;
}
button:hover { background-color: #83C9F4; }

main { display: block; }

#wrap { width:min(100%, 640px); margin:0 auto; background-color: #1A2235; }

.fakelink { cursor: pointer; }

.container { width:100%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); }

.container .vertical-gap { height:30px; }

.container .grid-table { display: grid; gap: 1px; width: 100%; max-width: 100%; }
.container .grid-table > * { min-width: 0; }
.container .grid-table .header { font-size: 1rem; word-break: break-word; overflow-wrap: break-word; }
.container .grid-table .header.center { text-align:center; }
.container .grid-table .cell {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 12px; font-size: 0.95rem; background-color: transparent;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.container .grid-table .cell.center { justify-content: center; }

/* Customize Parts */
html { font-family: 'Roboto', 'Sans-serif'; }
body { font-family: 'Roboto', 'Sans-serif'; background-color: #162D72; }
button { color: #9BE9D8; }
button:hover { color: #0F1D3C; }
button.cancel { color:#97cbc0; border-color:#979797; }

.container { margin-top:60px; }
.container .container_inner { padding: 20px; }
.container .container_inner .main_tit {
	color: #83C9F4;
	font-size: 1.70rem; font-weight: 700;
	margin-left:10px; margin-top: 10px; margin-bottom: 20px;
}

.container .grid-table .header { background-color: #1B2D4F; color: #9BE9D8; padding: 8px; font-weight: 600; }
.container .grid-table .cell { padding: 8px; }

.container .grid-table.symbol-list { grid-template-columns: 1fr 1fr 1fr 90px; }
.container .grid-table.profit-list { grid-template-columns: 1fr 1fr 1fr 90px; }

/* ===== My Assets ===== */
.page-header{display:flex;flex-direction:column;align-items:center;gap:.25rem;margin:.5rem 0 1rem;}
.page-header .main_tit span{font-weight:800;font-size:1.25rem;}
.total-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:.25rem 0 .75rem;}
.total-label{font-size:.82rem;color:rgba(255,255,255,.65);letter-spacing:.08em;text-transform:uppercase;}
.total-amount{font-size:1.9rem;font-weight:800;color:#ffffff;margin-top:.15rem;line-height:1;}
.btns{display:flex;justify-content:center;gap:.75rem;margin:.35rem 0 1rem;}

.list{padding:0;margin:0;}


@media(max-width:47.99em){
.list{
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	width:100vw;
}
}


.asset-cards{
	display:grid;
	grid-template-columns:1fr;
	gap:.7rem;
	padding:0;
	box-sizing:border-box;
}


@media(max-width:47.99em){
.asset-cards{
	padding-left:max(10px, env(safe-area-inset-left));
	padding-right:max(10px, env(safe-area-inset-right));
}
}


.asset-card{
	background:rgba(0,0,0,.42);
	border:1px solid rgba(255,255,255,.10);
	border-radius:.7rem;
	box-shadow:0 10px 28px rgba(0,0,0,.22);
	padding:.95rem 1rem;
	color:rgba(255,255,255,.95);
	text-decoration:none;
	width:100%;
}
.asset-card:hover{background:rgba(0,0,0,.50);}

.asset-section{
	opacity:.95;font-weight:800;margin:.35rem .1rem .2rem;letter-spacing:.02em;
	color:#ffffff;
}

.asset-top{display:grid;grid-template-columns:1fr;gap:.25rem;}
.asset-head{display:flex;align-items:center;gap:.6rem;}
.asset-head .icon{
	width:30px;height:30px;line-height:30px;text-align:center;
	border-radius:9999px; color:#fff;display:inline-block;font-size:.95rem;
	box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.asset-head .symbol{
	font-weight:800;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;
}

.asset-address{font-size:.88rem;color:rgba(255,255,255,.86);white-space:nowrap; text-overflow:ellipsis;}
.asset-address-top{display:none;}
.asset-address-bottom{display:block; text-align:right;}

.asset-body{display:grid;grid-template-columns:1fr;gap:.25rem;margin-top:.1rem;}
.asset-row{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:.6rem;
}
.asset-field{display:flex;flex-direction:column;align-items:flex-end;padding:.25rem 0;}
.asset-label{font-size:.74rem;color:rgba(255,255,255,.70);margin-bottom:.2rem;letter-spacing:.01em;}
.asset-value{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.98);}

.asset-field[data-type="amount"],
.asset-field[data-type="usd"]{min-width:auto}

.asset-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);margin:.6rem 0 .5rem;}


@media(min-width:48em){
.asset-top{grid-template-columns:1fr minmax(350px,1fr);align-items:center;gap:.85rem;}
.asset-address-top{display:block;text-align:right;}
.asset-address-bottom{display:none;}
.asset-field[data-type="amount"],
.asset-field[data-type="usd"]{min-width:7.6rem}
/* If you want to expand various columns
   .asset-cards{grid-template-columns:repeat(2, minmax(0,1fr));gap:12px;}
*/
}


@media (max-width:495px) {
.container .container_inner { padding:10px; }
}