.container[data-v-297cd666] {
    max-width:650px;
    color:#43464e
}
.logo[data-v-297cd666] {
    height:24px;
    margin:6px 0 0 4px
}
.swap-content[data-v-297cd666] {
    position:relative;
    border-radius:20px;
    box-shadow:0 12px 14px #edeff0;
    padding:12px 16px 24px;
    border:1px solid #f1f3f5;
    margin-bottom:24px;
    background-color:#fff;
    margin-top:10px
}
.swap-content p[data-v-297cd666] {
    font-size:14px
}
.swap-content .swap-panel[data-v-297cd666] {
    position:relative;
    border-radius:12px;
    border:1px solid #eceef0;
    padding:26px 12px;
    margin:4px 0;
    background-color:#f7f8fa
}
.swap-content .balance-wrap[data-v-297cd666] {
    text-align:right;
    display:block
}
.swap-content .select-wrap[data-v-297cd666] {
    position:relative;
    display:inline-block;
    min-width:50%;
    max-width:50%;
    box-sizing:border-box;
    overflow:hidden;
    white-space:nowrap;
    border-radius:16px;
    font-size:16px;
    line-height:1;
    background-color:#fff;
    box-shadow:0 8px 14px #0000000d;
    display:flex;
    padding:12px 15px;
    align-items:center
}
.swap-content .select-wrap .selected-logo[data-v-297cd666] {
    width:36px;
    height:36px;
    margin-right:12px
}
.swap-content .select-wrap .symbol[data-v-297cd666] {
    font-weight:700;
    font-weight:500
}
.swap-content .select-wrap .network[data-v-297cd666] {
    font-size:12px;
    color:#999
}
.swap-content .min-amount-tip[data-v-297cd666] {
    color:#999;
    text-align:right;
    font-size:12px;
    white-space:nowrap
}
.swap-content .exchange-arrow[data-v-297cd666] {
    position:relative;
    height:2px;
    text-align:center
}
.swap-content .exchange-arrow img[data-v-297cd666] {
    position:relative;
    width:46px;
    height:46px;
    margin-top:-23px;
    z-index:3
}
.swap-info[data-v-297cd666] {
    margin:12px 0;
    font-size:13px;
    color:#3a3b3d;
    padding:6px 12px;
    background-color:#fbfbfb;
    border-radius:8px;
    border:1px solid #eceef0
}
.swap-info>div[data-v-297cd666] {
    margin:8px 0;
    display:flex;
    justify-content:space-between
}
.swap-info .label[data-v-297cd666] {
    color:#9ea0a5
}
.top-banner-container[data-v-297cd666] {
    background-color:#18316b;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    min-height:200px
}
.top-banner-container .title[data-v-297cd666] {
    font-size:24px;
    color:#fff;
    font-weight:700
}
.top-banner-container .list[data-v-297cd666] {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    padding:20px 40px
}
.top-banner-container .list .list-item[data-v-297cd666] {
    background-color:#468ff7;
    padding:5px;
    margin-right:10px;
    color:#fff;
    text-align:center;
    border-radius:10px
}
.footer[data-v-297cd666] {
    border-top:1px solid #f1f1f1;
    padding-top:12px;
    margin:24px 0;
    text-align:center
}
@media screen and (max-width:420px) {
    .header[data-v-297cd666] {
        margin-bottom:12px
    }
    .exchange-arrow img[data-v-297cd666] {
        position:relative;
        width:40px;
        height:40px;
        margin-top:-20px
    }
    .swap-panel[data-v-297cd666] {
        padding:15px 12px!important
    }
    .swap-info[data-v-297cd666] {
        margin:14px 5px;
        font-size:14px
    }
    .swap-button[data-v-297cd666] {
        margin:14px 5px;
        font-size:14px
    }
    .swap-content[data-v-297cd666] {
        font-size:12px
    }
    .swap-content .select-wrap[data-v-297cd666] {
        max-width:45%;
        min-width:45%;
        padding:8px
    }
    .swap-content .select-wrap .selected-logo[data-v-297cd666] {
        width:28px!important;
        height:28px;
        border-radius:100%;
        margin:2px 8px 2px 12px
    }
    .input-qty[data-v-297cd666] {
        font-size:18px!important
    }
    .footer[data-v-297cd666] {
        font-size:12px
    }
    .container[data-v-297cd666] {
        padding:0!important
    }
}