html, body, div, header, nav, section, footer, ul, li, h1, h2, h3, h4, p, i, label, input, select, button{display:block;margin:0;padding:0;box-sizing:border-box}
input,select,button{resize:none;outline:0;transition:all .2s;font-family:"Microsoft YaHei","Helvetica Neue",Arial,"Noto Sans",sans-serif}
img{display:block;width:auto\9;-ms-interpolation-mode:bicubic;border:0}
button{cursor:pointer;transition:all ease-in-out .2s}
select{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;cursor:pointer}
select::-ms-expand{display:none}
select{border:none;outline:none;background:transparent url('data:image/svg+xml;base64,77u/PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZmlsbD0iIzc1NzY3OSIgZD0iTTIsNkwxMi4wMTYsMTYuMDE2LDIyLDZsMiwyTDEyLDIwLDAsOFoiLz4KPC9zdmc+Cg==') no-repeat right 1.6rem center/.8em}
option:disabled{color:#0072eb;cursor:no-drop;background:#f2f5fa}
ul,li{list-style-type:none}
h1,h2{font-weight:700}
a{color:#152647;text-decoration:none;transition:all ease-in-out .25s}
a:hover{color:#34f}
html{font-size:62.5%;background:#fff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-overflow-scrolling:touch}
body{width:100%;color:#152647;font:1.4rem/1.6em HarmonyOS Sans,PingFang SC,Microsoft Yahei,Heiti SC,WenQuanYi Micro Hei,Helvetica Neue,Helvetica,Arial,sans-serif}
.container{width:970px;margin:0 auto;padding:1rem 0 1.2rem}
.dark{padding:2rem 0;background:#f4f6fd}
.clear:after,ul:after{content:'';display:block;width:100%;height:0;clear:both;visibility:hidden}
.red{color:#f44}
.green{color:#0a6}

h1{font-size:2rem}
h2{padding:0 0 2rem;font-size:1.8rem}
h3{padding:3rem 0 2rem;font-size:1.8rem}

@media(max-width:760px){
.container{width:100%;margin:none;padding:1rem 1.8rem}
.dark{padding:.8rem 0}
h1{font-size:1.8rem}
h2{padding:0 0 1.4rem;font-size:1.7rem}
h3{padding:2rem 0 1rem;font-size:1.7rem}
.m-hide{display:none}
}

header{position:relative;height:5.6rem;background:#153092;line-height:5.4rem}
header .container{display:flex;padding:0;}
.logo{width:14rem;font-size:1.7rem;font-weight:400;}
.logo a{display:block;height:5.6rem;color:#e2e8ff}
.logo img{display:block;float:left;width:10rem;height:2.6rem;margin-top:1.4rem;opacity:.88;transition:all ease-in-out .2s}
.logo a:hover img{opacity:1}


.nav{display:flex}
.nav li a{display:block;height:5.6rem;padding:0 2rem;color:rgba(232,236,255,.9);white-space:nowrap}
.nav li a:hover{color:#fff;background:#34f}

time{display:flex;margin-left:auto;font-size:1.2rem;color:#f2f6ff;}
time svg{display:block;width:1.4rem;height:1.4rem;margin:2rem .8rem;fill-rule:evenodd;fill:#f2f6ff;}
.nav-btn{display:none}
@media(max-width:760px){
 header .container{position:relative;display:block;padding:0}
 header{height:5rem;line-height:5rem}
 .logo a{height:5rem;padding:0 1.8rem}
.logo img{margin-top:1.2rem}
.nav,time{display:none}
.nav{display:block;height:0;width:100%;overflow:hidden;padding:0 1.6rem;transition:all .2s ease-in-out;font-size:1.5rem;background:#fff}
.nav-btn{position:absolute;display:block;top:0;right:0;width:2.2rem;height:1.6rem;padding:1.7rem 1.8rem;transition:all .25s ease-in-out}
.nav-btn:before,.nav-btn:after{content:' ';-webkit-transition:-webkit-transform .1s .5s;-moz-transition:-moz-transform .2s .5s;transition:transform .5s}
.nav-btn span,.nav-btn:before,.nav-btn:after{display:block;width:2.2rem;height:.2rem;overflow:hidden;margin-bottom:.5rem;background:#eefef3;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.nav-open .nav-btn:before{display:none}
.nav-open .nav-btn span,.nav-open .nav-btn:after{position:absolute;top:2.3rem;width:2.4rem;right:1.8rem;z-index:999}
.nav-open .nav-btn span{-webkit-animation:fRR .2s ease both;animation:fRR .2s ease both}
.nav-open .nav-btn:after{-webkit-animation:fRL .2s ease both;animation:fRL .2s ease both}
.nav-open{height:auto}
.nav-open .nav{height:auto;display:block;width:100%;position:relative;left:0;right:0;top:0;z-index:99999999;padding:.6rem 1.8rem 1rem}
.nav-open .nav li{position:relative;border-bottom:1px solid #edeef1}
.nav-open .nav li:last-child{border-bottom:0}
.nav-open .nav li:after{position:absolute;content:"";height:.6rem;width:.6rem;right:0;top:50%;margin:-.3rem .6rem 0 0;border:solid #70747d;border-width:.1rem 0 0 .1rem;-ms-transform:rotate(135deg);transform:rotate(135deg);background:#fff}
.nav-open .nav li a{display:block;color:#70747d;padding:0 .2rem}
}
@keyframes fRR{0%{transform:rotate(0)}100%{transform:rotate(45deg)}}
@-webkit-keyframes fRR{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(45deg)}}
@keyframes fRL{0%{transform:rotate(0)}100%{transform:rotate(-45deg)}}
@-webkit-keyframes fRL{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(-45deg)}}

.index-card{display:flex;justify-content:space-between}
.index-card .card{width:49%;padding:2.4rem;background:#fff;border-radius:.4rem;box-shadow:0 .2rem 1rem rgba(157, 172, 224, .1)}
.card .rate{padding:1rem 0 1.4rem;font-size:1.5rem}
.card .big{margin-right:.8rem;font-size:3.6rem;font-weight:700}
.card h2 span{font-size:1.5rem;font-weight:400;color:#707480}
.card .update{color:#888992}

.hero{position:relative;padding:3rem 0}
.hero .price{padding:3.4rem 0 1.4rem;margin:0 -.2rem;font-size:1.8rem;font-weight:600}
.hero .big{font-size:4rem;font-weight:600}
.hero .big+span{padding-left:1.6rem}
.hero .price +p{padding:.8rem 1.5rem;margin-bottom:1.2rem;color:#7f8aa0;background:#f0f5fd}

.hero .change{position:absolute;top:2.8rem;right:0;padding:.5rem 1.4rem;background:#34f;color:#fff;border-radius:.3rem}
.hero .change svg{display:block;width:1.4rem;height:1.4rem;float:left;margin:.3rem .8rem 0 0;fill:#fff}

.convert{padding:2rem 0}
.convert .q{padding:1.6rem 0;color:#666d82}
.convert .a{display:flex;align-items:flex-start;padding:2.4rem 0 4rem;font-size:3rem}
.convert .a b{margin-bottom:-.1rem;padding:0 1rem;font-size:3.8rem}
.convert .current{color:#666d82}

@media (max-width:768px){
.index-card{display:block;padding:1rem 1.4rem}
.index-card .card{width:100%;padding:1.8rem;border-radius:.6rem}
.index-card .card+.card{margin-top:1rem}
.card .big{font-size:3rem}
.card .update{font-size:1.2rem}

.hero{padding:2rem 0}
.hero .price{padding:3rem 0 1.4rem;font-size:1.7rem}
.hero .big{font-size:3.4rem}
.hero .big+span{display:block;padding:1rem 0}
.hero .price +p{font-size:1.2rem}
.hero .change{top:1.4rem;padding:1rem 1.4rem;background:#fff}
.hero .change span{display:none}
.hero .change svg{width:1.6rem;height:1.6rem;margin:0;fill:#34f}

.convert{padding:2rem 1.8rem;font-size:1.2rem;line-height:1.4em}
.convert .a{display:block;padding:.4rem 0 3rem;line-height:4rem;font-size:2.6rem;font-weight:700}
.convert .a span{display:block;padding:0 0 .8rem}
.convert .a b{float:left;padding:0;margin-bottom:0;font-size:4rem;word-wrap:break-word}
}

#converter{display:flex;padding:4rem 0 4.4rem;line-height:5.8rem}
#converter select,#converter input{height:5.8rem;background-color:transparent;border:0}
input:-ms-input-placeholder{color:#bbc2cc;font-size:1.4rem}
input::-moz-placeholder{color:#bbc2cc;font-size:1.4rem}
input::-webkit-input-placeholder{color:#bbc2cc;font-size:1.4rem}
input::placeholder{color:#bbc2cc;font-size:1.4rem}
#converter .grou{position:relative;display:flex;width:36%;border:1px solid #7f8aa0;border-radius:.4rem}
#converter .grou label{position:absolute;top:-.8rem;left:1.2rem;padding:0 .7rem;font-size:1rem;line-height:1.6rem;color:#5a5e69;background:#fff;transition:all ease-in-out .15s}
#converter .grou:after{position:absolute;right:48%;top:30%;content:'';display:block;width:1px;height:40%;background:#ddd}
#converter .grou:focus-within{border-color:#34f}
#converter .grou:focus-within:not(input) label{top:-2.2rem;left:0;padding:0;color:#34f}
#converter .currency{width: 48%;}
#converter .currency span{padding:0 1.6rem}
#converter input{width: 52%;padding:1rem 2rem;font-size:1.6rem;line-height:3.8rem;}
#converter select{width:100%;padding:0 1.6rem;line-height:5.8rem}
#converter select:hover{background-color:#f0f5fd;border-radius:0 .4rem .4rem 0}
#converter .swap{width:7%;cursor:pointer}
#converter .swap svg{display:block;width:2rem;height:2rem;margin:2rem auto;fill:#5a5e69;transition:all ease-in-out .2s}
#converter .swap:hover svg{fill:#34f}
#converter button{width:19%;margin-left:2rem;border:0;border-radius:.4rem;color:#fff;background:#34f;font-size:1.8rem;font-weight:700}
#converter button:hover{background:#4f74ff}
#converter #toAmount{cursor:copy}

@media (max-width:768px){
#converter{position:relative;display:block;padding:2rem 0;margin-bottom:3rem}
#converter .grou{width:100%;margin:0 0 2.2rem}
#converter .swap{position:absolute;left:0;bottom:2rem;width:20%;height:5.6rem;background:#ebeff5;border-radius:.4rem}
#converter .swap svg{transform:rotate(90deg);margin:1.8rem auto}
#converter button{width:77%;height:5.6rem;margin:0 0 0 auto}
}

#chart{width:100%;height:32rem;margin:0 0 1rem}
.info{padding:2rem 0 2.6rem;line-height:175%}
.info p{padding:.8rem 0}

.recent{line-height:3.6rem}
.recent li{float:left;width:25%}
.recent li a:hover{text-decoration:underline}

table{width:100%;padding:0;margin:.4rem 0 1.4rem;border-collapse:collapse;border-top:1px solid #7f8aa0}
table th,table td{padding:1.4rem 0;border-bottom:1px solid #edeef1}
table th{padding:1.6rem 0;color:#7f8aa0;text-align:left;font-size:1.6rem}
table tbody tr:hover{background:#f6f7f8}
.tab-row{display:flex;justify-content:space-between}
.tab-row table{width:48.5%}
@media(max-width:760px){
#chart{height:24rem;margin:0 0 2rem}
.recent li{float:none;width:100%}
table{font-size:1.3rem}
.tab-row{display:block}
.tab-row table{width:100%}
}
footer{padding:3rem 0;margin:4rem 0 0;font-size:1.2rem;line-height:2.4rem;text-align:center;color:#98999e;background:#F9F9F9}
footer a{margin:0 .6rem;color:#87888e}
footer p{padding:.6rem 0}
footer .links{padding:0 0 3rem;margin-bottom:2.4rem;text-align:left;border-bottom:1px dashed #e1e3e6;color:#98999e}
@media(max-width:760px){
footer{padding:3rem 0 4rem}
footer .links{display:none}
}