body {
    margin: 0;
    font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif !important;
    font-size: 14px;
    color: #3a3f4a;
}
.dark {
    background-color: #000000 !important;
    color: #fff !important;
    margin: auto;
    max-width: 1446px;
    padding: 0 3em;
}
h2 {font-size: 2.6em;}
h3 {
    font-size: 1.5em;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer {
    margin-top: 6em;
    background-color: #32313161;
    padding: 6em;
}
.footer h2 {
    font-size: 1.8em;
    font-weight: 300;
}
.footer p {
    font-size: 1em;
    font-weight: 300;
    color: #b1b1b1;
}
.main {
    display: flex;
    justify-content: space-between;
    gap:4em;
}
.v1{
    max-height: 100%;
}
.v21{
    max-height: 100%;
}
.reg-link {
    border: 1px solid #f1f1f1;
    border-radius: 2em;
    padding: 4px 12px !important;
    color: #FFF;
    text-decoration: none;
    display: block;
}

.page-cover.theme1 {
    background: linear-gradient(36deg, #459bca, #F4F5F6, #E1FCFF, #BDE7FF) no-repeat 50% 50%;
    background-size: 400% 400% !important;
    animation: gradient 6s ease infinite;
}
.page-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a3f4a;
    background: 50% 50% no-repeat rgba(241, 242, 241, 0.33);
    transition: 0.5s ease-out 0.1s;
    background-image: url("logo.png");
    padding: 6em 0;
}
.page-cover.min {
    padding: 3em 0;
}
.min .mt-3 {
    margin-top: 1em;
}
.min .mt-6 {
    margin-top: 3em;
}
.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    font-weight: normal;
    text-decoration: none;
}
.brand .name {
    color: #3a3f4a;
    font-weight: normal;
    font-family: monospace;
}
.dark .brand .name {
    color: transparent;
    font-weight: normal;
    font-family: monospace;
    height: 0;
    width: 1px;
}
.logo {
    max-width: 300px;
    max-height: 66px;
}
.dark .logo {
    width: 66px;
    height: 66px;
}
.exp {
    display: flex;
    gap: 2em;
}
.exp a {
    color: #3a3f4a;
    text-decoration: none;
    background-color: #fff;
    display: inline-block;
    padding: 0.8em 3em;
    border-radius: 0.8em;
    font-size: 1.4em;
}
.exp a.download {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.2em;
}
.exp a.download:before {
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    content: "";
    background-position: center center;
    background-image: url("app.svg");
    background-color: #000;
    background-size: 80%;
    border-radius: 3px;
}
.guid {
    text-align: center;
}
.guid h3 {
    font-size: 2.4em;
    font-weight: normal;
}
.study h3 {
    font-size: 1.6em;
    font-weight: normal;
    text-align: center;
}
.study {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}
.study .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3em;
    flex-wrap: wrap;
}
.study .list a {
    color: #ffffff;
    text-decoration: none;
}
.study .list a img {
    max-width: 100%;
}
.study .list a h4 {
    font-weight: 300;
    font-size: 1.3em;
}
.study .list a p {
    font-weight: 300;
    font-size: 1.1em;
    color: #dcdada;
}
.study .list a span {
    color: #8b8b8b;
}

.item h3 {
    font-weight: 400;
    font-size: 1.3em;
    text-align: left;
}
.item img {
    max-width: 100%;
}
.item .time {
    color: #8b8b8b;
}
.r-content {
    font-weight: 300;
    font-size: 1.1em;
    color: #dcdada;
}
.r-content h3 {
    font-weight: 400;
    font-size: 1.1em;
}
.r-content p {
    font-weight: 400;
    color: #dcdada;
    font-weight: 300;
}
.r-content ul li {
   padding: 3px;
}
.r-content blockquote {
   border-left: 2px solid #383636;
    padding: 1em;
}
.text-center {
    text-align: center;
}
.mt-3 {
    margin-top: 3em !important;
}
.mt-6 {
    margin-top: 6em !important;
}
.mt-8 {
    margin-top: 8em !important;
}
.mt-12 {
    margin-top: 12em !important;
}
.lg-text {
    font-size: 4.5em;
    font-weight: 400;
}
.md-text {
    font-size: 2.5em;
    font-weight: 400;
}
.sm-text {
    font-size: 1.2em;
    font-weight: lighter;
}
.nav a {
    padding: 10px;
    color: #d4aa00;
    font-size: 1.1em;
    text-decoration: none;
    position: relative;
    display: inline-block;
}
.dark .nav a {
    color: #fff;
    font-weight: lighter;
}
.nav a:hover::after {
    width: 100%; /* 鼠标经过时扩展到100%宽度 */
}
.nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px; /* 下划线高度 */
    width: 0;
    background-color: #d4aa00; /* 下划线颜色 */
    transition: width 0.3s ease; /* 动画时长及效果 */
}
.dark .nav a::after {
    background-color: #fff; /* 下划线颜色 */
}
.link-box {
    /*position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);*/
    padding: 37px;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 12px;
}
.link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3em;
}
.link a {
    color: #3a3f4a;
    text-decoration: none;
    padding: 10px;
    position: relative;
}
.link a:hover {
    box-shadow: 0px 0px 1px #d4aa00;
    border-radius: 1em;
}
.block {
    display: block;
}

.link-app {
    text-align: center;
    display: inline-block;
}

.token {
    display: inline-block;
    width: 5em;
    height: 5em;
    background-repeat: no-repeat;
    background-size: 90% 90%;
    border-radius: 1em;
    background-position: center;
    box-shadow: 0px 0px 1px #33333336;
}

.token.okx {
    background-color: #3a3f4a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 3h6v6H3zm12 6H9v6H3v6h6v-6h6v6h6v-6h-6zm0 0V3h6v6z'/%3E%3C/svg%3E");
}

.token.binance {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f0b90b' d='m7.068 12l-2.03 2.03L3.003 12l2.03-2.03zm4.935-4.935l3.482 3.483l2.03-2.03L12.003 3L6.485 8.518l2.03 2.03zm6.964 2.905L16.937 12l2.03 2.03l2.03-2.03zm-6.964 6.965L8.52 13.452l-2.03 2.03L12.003 21l5.512-5.518l-2.03-2.03zm0-2.905l2.03-2.03l-2.03-2.03L9.967 12z'/%3E%3C/svg%3E");
}
.text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.text:before {
    background-repeat: no-repeat;
    width: 26px;
    height: 18px;
    content: "";
    background-position: center center;
}
.text.okx:before {
    background-image: url("ouy.svg");
}
.text.okx.dark:before {
    background-image: url("ouy-white.svg");
}
.text.binance:before{
    background-image: url("bia.svg");
}
.gold {
    background: linear-gradient(45deg, #FFD700, #FFC125, #DAA520, #B8860B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.market-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:3em;
    padding: 3em 0;
    background: #000000;
    color: #FFF;
    max-width: 100%;
    overflow-x: auto;
}
.market {
    text-decoration: none;
    padding: 10px;
    color: #ffffff;
    text-align: center;
    min-width: 0;
}
.market > * {
    display: block;
}
.market .name {
    font-weight: normal;
    padding: 1em;
    font-size: 1.2em;
}
.market .price {
    font-weight: normal;
    padding: 1em;
    font-size: 1.6em;
    font-family: "STIX Two Math";
    display: flex;
}
.market .price:before {
    content: "$";
    margin-right: 2px;
    font-size: 0.8em !important;
    color: #DAA520;
}

.chart-list {
    padding: 2em;
    background-color: #000;
}
.chart-list canvas {
    margin: 3em auto;
    max-width: 800px;
    width: 100%;
    height: 400px;
}

.article {
    max-width: 780px;
    padding: 3em 1em;
    margin: auto;
}
.article > h2 {
    font-size: 1.8em;
}
.h-content {
    margin-top: 2em;
    font-size: 1.2em;
    color: #3a3f4adb;
}
.h-content p {
    padding: 1em 0;
    line-height: 1.8em;
}
.h-content ul li {
    padding: 0.8em 0;
    line-height: 1.8em;
}
.h-content ul li p {
    margin: 0;
    padding: 0;
}
.h-content ol li {
    padding: 0.8em 0;
    line-height: 1.8em;
}
.h-content ol li p {
    margin: 0;
    padding: 0;
}
.h-content table {
    border: 1px double #b3b3b3;
    border-collapse: collapse;
    border-spacing: 0;
    height: 100%;
    width: 100%;
}
.h-content table th {
    border: 1px solid #bfbfbf;
    min-width: 2em;
    padding: .4em;
}
.h-content table td, .h-content table th {
    border: 1px solid #bfbfbf;
    min-width: 2em;
    padding: .4em;
}

.underline-hover {
    position: relative;
    display: inline-block;
}
.underline-hover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px; /* 下划线高度 */
    width: 0;
    background-color: #3a3f4a; /* 下划线颜色 */
    transition: width 0.3s ease; /* 动画时长及效果 */
}

.underline-hover:hover::after {
    width: 100%; /* 鼠标经过时扩展到100%宽度 */
}

.faq {
    max-width: 1024px;
    margin: auto;
}
.faq h2{
    font-size: 2em;
}
.faq h3 {
    font-size: 1.5em;
    font-weight: normal;
    display: flex;
    justify-content: space-between;
}
.faq h3::after {
    content: "+";
}
.faq .anser {
    font-size: 1.2em;
    font-weight: 300;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 0.3s ease, opacity 0.3s ease;
}
.faq>div:hover {
    background: #333333b3;
    margin: -1em;
    padding: 1em;
    border-radius: 1em;
}
.faq > div:hover .anser {
    height: 100px;
        /* 设置展开后的高度 */
        opacity: 1;
}
.faq>div:hover h3::after {
    content: "-";
}

.block-a a {
    display: block;
}

.cols {
    display: flex;
    justify-content: space-between;
    gap: 1em;
}
.col > * {
    text-align: left;
    padding: 10px 0 !important;
}
.trade-coin {
    max-width: 1024px;
    margin: auto;
}
.coins {
    gap: 2em;
    align-items: center;
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    /* 每列最小200px，最大占满剩余空间 */
    /* 行/列间距 */
}
.coin {
    text-align: center;
    background: #3d3b3b87;
    /* opacity: 0.6; */
    padding: 1em;
    border-radius: 1em;
}
.coin > * {
    display: block;
}
.coin img {
    width: 64px;
    height: 64px;
    display: block;
    margin: auto;
    margin-bottom: 1em;
}

.media {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 1024px;
    margin: auto;
    gap: 3em;
}
.media p {
    font-size: 1.2em;
    font-weight: 300;
}
.intro {
    max-width: 1024px;
    margin: auto;
}
.intro .box {
    gap: 3em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    /* background: #f0f0f0; */
    min-height: 300px;
}
.box h3 {
    font-size: 2em;
    font-weight: 300;
}
.box p {
    font-size: 1.1em;
    font-weight: 300;
}
.box .media {
    background: #f1f1f11a;
    padding: 1em;
    border-radius: 1em;
}
.box .media img {
    border-radius: 1em;
}
.full-width {
    grid-column: 1 / -1;
    /* 第三行子项跨所有列，占满整行 */
    background: #e74c3c;
    /* 不同颜色以区分 */
}
.cover-30 {
    width: 30%;
}
.cover-50 {
    width: 50%;
}
.cover-60 {
    width: 50%;
}

.flex {
    display: flex;
}

.gap-1 {
    gap: 1em;
}

.gap-2 {
    gap: 2em;
}

.gap-3 {
    gap: 3em;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@media (max-width: 768px) {
    .market-list {
        gap: 3em;
    }
    .market {
        padding: 1em;
    }
    .market .name {
        padding: 0.5em;
    }
    .market .price {
        padding: 0.5em;
    }
    .chart-list {
        padding: 2em 0;
    }
    .dark {
        margin: 0 1em;
        padding: 0;
    }
    .main {
        display: block;
        height: auto;
        text-align: center;
    }
    .footer {
        padding: 1em;
        margin: -1em;
    }
    .exp {
        justify-content: center;
    }
    .lg-text {
        font-size: 2em;
    }
    .v2 {
        max-width: 100%;
        height: auto;
    }
    .v1 {
        max-width: 100%;
        width: 100%;
        margin: 3em auto auto auto;
    }
    .exp a {
        padding: 0.3em 1em;
    }
    .study .list {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 3em;
        flex-wrap: wrap;
    }
    .mt-6 {
        margin-top: 3em;
    }
    .mb-download {
        justify-content: center;
    }
    .intro .box {
        grid-template-columns: 1fr;
    }
    .cols {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        display: grid;
    }
    .media {
        display: block;
    }
    .cover-30,.cover-50,.cover-60 {
        width: 100%;
    }
}