* {
    margin: 0;
    padding: 0;
    outline: 0;
    vertical-align: initial;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

body,html {
    width: 100%
}

body p,html p {
    margin-bottom: 0
}

button,input,select {
    font-size: 100%;
    outline: 0;
    vertical-align: middle;
    -webkit-appearance: none
}

button {
    border: 0;
    background-clip: padding-box
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

li,ol,ul {
    list-style: none
}

img {
    border: none
}

a,a:link,a:visited {
    color: #5915e1;
    text-decoration: none
}

a:hover {
    color: #000;
    text-decoration: none
}

input,textarea {
    word-break: break-all
}

div,input,p,span,textarea {
    word-wrap: break-word
}

.fl {
    float: left
}

.fr {
    float: right
}

.clearfix {
    content: "";
    display: block;
    clear: both
}

.flex.between {
    justify-content: space-between
}

.flex.ai-center {
    align-items: center
}

.flexB {
    display: flex;
    justify-content: space-between
}

.inline-flex {
    display: inline-flex
}

.center {
    text-align: center
}

.left {
    text-align: left!important;
    justify-content: flex-start
}

.right {
    text-align: right
}

.ib {
    display: inline-block
}

.relative {
    position: relative
}

.absolute {
    position: absolute
}

.main {
    padding: 0 20px 20px
}

.top10 {
    margin-top: 10px
}

.left10 {
    margin-left: 10px
}

.left15 {
    margin-left: 15px
}

.right15 {
    margin-right: 15px
}

.top12 {
    margin-top: 12px
}

.top16 {
    margin-top: 16px
}

.top20 {
    margin-top: 20px
}

.top32 {
    margin-top: 32px
}

.left20 {
    margin-left: 20px
}

.pl20 {
    padding-left: 20px
}

.mt3 {
    margin-top: 3px
}

.mb20 {
    margin-bottom: 20px
}

.mb25 {
    margin-bottom: 25px
}

.mb30 {
    margin-bottom: 30px
}

.mb40 {
    margin-bottom: 40px
}

.w-80 {
    width: 80%
}

.w-20 {
    width: 20%
}

.typo-text-link {
    color: #5915e1;
    cursor: pointer
}

.pointer {
    cursor: pointer
}

.color-red {
    color: #ff8e18
}

.color-green {
    color: #16c378
}

.token-logo {
    width: 18px;
    border-radius: 50%;
    border: 1px solid #dbdbdb
}

.no-wrap {
    white-space: nowrap
}

a {
    font-family: AvenirNext-Medium;
    font-size: 16px;
    color: #5915e1
}

.ant-modal.confirm-swap-modal,.ant-modal.list-addtoken-modal,.ant-modal.login-modal,.ant-modal.pool-modal,.ant-modal.remove-modal,.ant-modal.select-modal,.ant-modal.setting-modal,.ant-modal.swap-sun,.ant-modal.unfinished-pop,.ant-modal.zoom-appear,.ant-modal.zoom-enter {
    margin-left: 235px!important;
    transform-origin: center!important
}

.ant-modal.add-gai,.ant-modal.confirm-swap-modal,.ant-modal.login-modal,.ant-modal.remove-modal {
    text-align: center!important
}

.price-chart-wrap {
    padding: 14px 20px;
    font-family: AvenirNext-Regular;
    font-size: 14px;
    color: #333
}

.price-chart-wrap .token-pairs>div.view-token-box a:not(:first-child) {
    margin-left: 10px
}

.price-chart-wrap .token-pairs>div a {
    color: #5915e1
}

.price-chart-wrap .token-pairs>div span {
    vertical-align: middle;
    display: inline-block;
    font-size: 14px
}

.price-chart-wrap img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin: 0 5px 0 0
}

.price-chart-popover .ant-popover-arrow {
    display: none
}

.price-chart-popover .chart-content .chart-title {
    display: flex;
    justify-content: space-between;
    font-family: PingFangSC-Regular
}

.price-chart-popover .chart-content .chart-title h4 {
    margin-bottom: 5px;
    font-size: 14px;
    color: #333
}

.price-chart-popover .chart-content .chart-title p {
    font-size: 12px;
    color: #666
}

.align-items-center {
    align-items: center
}

.welfare-modal {
    top: calc(50% - 200px)!important
}

@media screen and (max-width: 1000px) {
    .ant-modal.confirm-swap-modal,.ant-modal.list-addtoken-modal,.ant-modal.login-modal,.ant-modal.pool-modal,.ant-modal.remove-modal,.ant-modal.select-modal,.ant-modal.setting-modal,.ant-modal.swap-sun,.ant-modal.unfinished-pop,.ant-modal.zoom-appear,.ant-modal.zoom-enter {
        margin-left:0!important;
        transform-origin: center!important
    }

    .ant-modal.add-gai,.ant-modal.confirm-swap-modal,.ant-modal.login-modal,.ant-modal.remove-modal {
        text-align: center!important
    }
}

.mr-0 {
    margin-right: 0!important
}

body .ant-modal-content,html .ant-modal-content,html .ant-modal.pool-modal .ant-modal-content {
    padding: 30px 45px;
    border-radius: 20px
}

body,html {
    background: #140736;
    font-family: AvenirNext-Regular;
    font-size: 14px;
    color: #333;
    overscroll-behavior: none
}

body .ib-parent,html .ib-parent {
    display: block
}

body .ib-parent div,body .ib-parent h1,body .ib-parent h2,body .ib-parent h3,body .ib-parent h4,body .ib-parent h5,body .ib-parent h6,body .ib-parent p,html .ib-parent div,html .ib-parent h1,html .ib-parent h2,html .ib-parent h3,html .ib-parent h4,html .ib-parent h5,html .ib-parent h6,html .ib-parent p {
    display: inline-block
}

body .ant-modal-mask,body .ant-modal-wrap,html .ant-modal-mask,html .ant-modal-wrap {
    z-index: 1001
}

body #root,html #root {
    background: #fff;
    min-height: 100vh
}

body #root .swap-and-pool,html #root .swap-and-pool {
    width: 100%;
    min-height: 100vh;
    background: #140736 url(https://sunswap.com/static/media/bg.caf34924.jpg) no-repeat;
    background-size: 100% 100%;
    justify-content: center;
    margin-left: 235px
}

body #root .swap-and-pool .sunswap-toast,html #root .swap-and-pool .sunswap-toast {
    background: rgba(215,215,224,.15);
    color: #fff;
    text-align: center;
    height: 40px;
    line-height: 40px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
}

body #root .swap-and-pool .sunswap-toast a,html #root .swap-and-pool .sunswap-toast a {
    color: #fff;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    background: url(https://sunswap.com/static/media/laba.c4cc8391.svg) 0 no-repeat;
    background-size: 20px;
    padding-left: 35px;
    display: inline-flex;
    align-items: center
}

body #root .swap-and-pool .sunswap-toast a button,html #root .swap-and-pool .sunswap-toast a button {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #333;
    background: #fff;
    border-radius: 23px;
    height: 21px;
    padding: 2px 10px;
    margin-left: 14px;
    cursor: pointer
}

body #root .swap-and-pool .sunswap-toast img,html #root .swap-and-pool .sunswap-toast img {
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 19px;
    height: 19px;
    cursor: pointer
}

body #root .swap-and-pool .main-content,html #root .swap-and-pool .main-content {
    max-width: 630px;
    margin: -3% auto 0;
    width: 100%;
    transform: scale(.8)
}

body #root .swap-and-pool .main-content #swap-tab .ant-tabs-content-holder,html #root .swap-and-pool .main-content #swap-tab .ant-tabs-content-holder {
    padding: 88px 45px 50px;
    background: #fff;
    border-radius: 50px
}

body #root .swap-and-pool .main-content #swap-tab .ant-tabs-nav:before,html #root .swap-and-pool .main-content #swap-tab .ant-tabs-nav:before {
    border-bottom: none
}

body #root .swap-and-pool .main-content #swap-tab .ant-tabs-nav-list,html #root .swap-and-pool .main-content #swap-tab .ant-tabs-nav-list {
    width: 100%
}

body #root .swap-and-pool .main-content #swap-tab .ant-tabs-nav-list .ant-tabs-tab,html #root .swap-and-pool .main-content #swap-tab .ant-tabs-nav-list .ant-tabs-tab {
    width: 50%;
    margin: 0;
    justify-content: center;
    opacity: .5;
    font-family: AvenirNext-DemiBold;
    font-size: 22px;
    color: #fff
}

body #root .swap-and-pool .main-content #swap-tab .ant-tabs-nav-list .ant-tabs-tab.ant-tabs-tab-active,html #root .swap-and-pool .main-content #swap-tab .ant-tabs-nav-list .ant-tabs-tab.ant-tabs-tab-active {
    opacity: 1
}

body #root .swap-and-pool .main-content #swap-tab .ant-tabs-nav-list .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn,html #root .swap-and-pool .main-content #swap-tab .ant-tabs-nav-list .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #fff;
    font-weight: 600
}

body #root .swap-and-pool .main-content #swap-tab .ant-tabs-nav-list .ant-tabs-tab:hover,html #root .swap-and-pool .main-content #swap-tab .ant-tabs-nav-list .ant-tabs-tab:hover {
    opacity: 1
}

body #root .swap-and-pool .main-content #swap-tab .ant-tabs-ink-bar,html #root .swap-and-pool .main-content #swap-tab .ant-tabs-ink-bar {
    display: none
}

body #root .swap-and-pool .main-content #swap-tab .ant-pagination,html #root .swap-and-pool .main-content #swap-tab .ant-pagination {
    text-align: center
}

body #root .swap-and-pool .main-content #swap-tab button,html #root .swap-and-pool .main-content #swap-tab button {
    border-radius: 20px;
    cursor: pointer;
    width: 100%;
    height: 70px;
    line-height: 70px;
    padding: 0;
    font-family: AvenirNext-Medium;
    font-size: 16px
}

body #root .swap-and-pool .main-content #swap-tab button.schedule-btn,html #root .swap-and-pool .main-content #swap-tab button.schedule-btn {
    margin-right: 33px;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    background: rgba(72,80,230,.2);
    color: #4850e6;
    font-size: 16px;
    font-family: AvenirNext-Medium
}

body #root .swap-and-pool .main-content #swap-tab button.schedule-btn:last-child,html #root .swap-and-pool .main-content #swap-tab button.schedule-btn:last-child {
    margin-right: 0
}

body #root .swap-and-pool .main-content #swap-tab button.schedule-btn:hover,html #root .swap-and-pool .main-content #swap-tab button.schedule-btn:hover {
    background-color: #bdc0f5
}

body #root .swap-and-pool .main-content #swap-tab button.schedule-btn-active,html #root .swap-and-pool .main-content #swap-tab button.schedule-btn-active {
    background: #5915e1;
    height: 40px;
    line-height: 40px;
    color: #fff
}

body #root .swap-and-pool .main-content #swap-tab button.half,html #root .swap-and-pool .main-content #swap-tab button.half {
    width: 49%;
    max-width: 260px;
    margin-left: 2%
}

body #root .swap-and-pool .main-content #swap-tab button.half:first-child,html #root .swap-and-pool .main-content #swap-tab button.half:first-child {
    margin-left: 0
}

body #root .swap-and-pool .main-content #swap-tab button.trisection,html #root .swap-and-pool .main-content #swap-tab button.trisection {
    width: 32%;
    max-width: 160px;
    margin-left: 25px
}

body #root .swap-and-pool .main-content #swap-tab button.trisection:first-child,html #root .swap-and-pool .main-content #swap-tab button.trisection:first-child {
    margin-left: 0
}

body #root .swap-and-pool .main-content #swap-tab button.gray,html #root .swap-and-pool .main-content #swap-tab button.gray {
    cursor: auto;
    color: #fff;
    background: #dbdbdb
}

body #root .swap-and-pool .main-content #swap-tab button.blue,html #root .swap-and-pool .main-content #swap-tab button.blue {
    background: #5915e1;
    color: #fff;
    position: relative
}

body #root .swap-and-pool .main-content #swap-tab button.blue:hover,html #root .swap-and-pool .main-content #swap-tab button.blue:hover {
    background: #4711b4
}

body #root .swap-and-pool .main-content #swap-tab button.blue .ques,html #root .swap-and-pool .main-content #swap-tab button.blue .ques {
    position: absolute;
    top: 26px;
    right: 26px
}

body #root .swap-and-pool .main-content #swap-tab button.purple,html #root .swap-and-pool .main-content #swap-tab button.purple {
    background: rgba(89,21,225,.2);
    color: #5915e1
}

body #root .swap-and-pool .main-content #swap-tab button.green,html #root .swap-and-pool .main-content #swap-tab button.green {
    background: rgba(22,195,120,.2);
    color: #16c378
}

body #root .swap-and-pool .main-content #swap-tab button.ant-pagination-item-link,html #root .swap-and-pool .main-content #swap-tab button.ant-pagination-item-link {
    height: 32px;
    line-height: 32px
}

body #root .swap-and-pool .main-content #swap-tab ::placeholder,html #root .swap-and-pool .main-content #swap-tab ::placeholder {
    font-family: AvenirNext-DemiBold;
    font-size: 20px;
    color: #999
}

body .toast-text,html .toast-text {
    display: inline-block;
    height: 40px;
    overflow: hidden
}

body .toast-text ul,html .toast-text ul {
    display: block;
    height: 40px;
    line-height: 22px;
    margin: 0;
    position: relative
}

body .toast-text ul.animate,html .toast-text ul.animate {
    animation: rowup 7.5s linear infinite normal
}

@keyframes rowup {
    0% {
        transform: translateZ(0)
    }

    5% {
        transform: translate3d(0,-40px,0)
    }

    33% {
        transform: translate3d(0,-40px,0)
    }

    38% {
        transform: translate3d(0,-80px,0)
    }

    66% {
        transform: translate3d(0,-80px,0)
    }

    71% {
        transform: translate3d(0,-120px,0)
    }

    to {
        transform: translate3d(0,-120px,0)
    }
}

body .toast-text a,html .toast-text a {
    color: #fff;
    line-height: 22px;
    padding: 9px 0;
    height: 40px;
    display: block;
    text-align: center
}

body .toast-text a .link,html .toast-text a .link {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #30084c;
    background: #fff;
    border-radius: 23px;
    padding: 2px 10px;
    margin-left: 15px;
    display: inline-block;
    height: 19px;
    vertical-align: top;
    margin-top: 2px
}

body .ques,html .ques {
    color: #999;
    display: inline-block;
    background: #fff;
    min-width: 18px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 100%;
    margin-right: 10px;
    border: 1px solid #999;
    font-size: 16px
}

body .link,body .ques,html .link,html .ques {
    font-family: AvenirNext-Medium;
    cursor: pointer
}

body .link,html .link {
    color: #5915e1;
    font-size: 14px
}

body .link:hover,html .link:hover {
    color: #4711b4
}

body .ant-modal,html .ant-modal {
    max-width: 630px;
    transform: scale(.8);
    text-align: center;
    width: 100%
}

body .ant-modal .modal-success img,html .ant-modal .modal-success img {
    width: 100px;
    margin-top: 25px
}

body .ant-modal .title,html .ant-modal .title {
    margin: 40px 0;
    font-weight: 500;
    color: #333;
    font-family: PingFangSC-Regular
}

body .ant-modal .title span,html .ant-modal .title span {
    margin-right: 3px
}

body .ant-modal .title span:last-child,html .ant-modal .title span:last-child {
    margin-right: 0
}

body .ant-modal .title.big,html .ant-modal .title.big {
    margin: 0 0 5px;
    font-size: 20px
}

body .ant-modal .title.normal,html .ant-modal .title.normal {
    font-size: 15px;
    margin: 0 0 12.5px
}

body .ant-modal .title.green,html .ant-modal .title.green {
    font-family: PingFangSC-Medium;
    font-size: 25px;
    color: #16c378;
    margin: 30px 0 15px
}

body .ant-modal.add-gai .amount .amount-num,html .ant-modal.add-gai .amount .amount-num {
    font-family: AvenirNext-DemiBold;
    font-size: 30px;
    color: #5915e1
}

body .ant-modal.add-gai .price-value,html .ant-modal.add-gai .price-value {
    text-align: right
}

body .ant-modal.add-gai .price .param img,html .ant-modal.add-gai .price .param img {
    width: 20px;
    height: 20px;
    margin-right: 10px
}

body .ant-modal.add-gai .amount-tip,html .ant-modal.add-gai .amount-tip {
    font-family: AvenirNext-Medium;
    font-size: 14px;
    color: #999;
    margin-top: 15px
}

body .ant-modal .add-value,body .ant-modal .from-value,body .ant-modal .remove-value,body .ant-modal .to-value,html .ant-modal .add-value,html .ant-modal .from-value,html .ant-modal .remove-value,html .ant-modal .to-value {
    font-family: AvenirNext-Medium;
    font-size: 25px;
    color: #333;
    letter-spacing: 0;
    text-align: right;
    display: inline-block;
    word-break: break-all
}

body .ant-modal .plus,html .ant-modal .plus {
    font-family: AvenirNext-Medium;
    font-size: 17.5px;
    color: #5915e1;
    margin: 0 4px;
    top: -2px
}

body .ant-modal .plus.w10,html .ant-modal .plus.w10 {
    width: 12.5px;
    margin: -7px 12.5px 0
}

body .ant-modal .add-ver,html .ant-modal .add-ver {
    font-family: Helvetica Neue;
    width: 42px;
    height: 20px;
    line-height: 20px;
    background: #f7f7f7;
    border-radius: 9px;
    font-size: 12px;
    color: rgba(26,26,26,.6);
    margin-left: 8px
}

body .ant-modal .add-token,body .ant-modal .from-token,body .ant-modal .remove-token,body .ant-modal .to-token,html .ant-modal .add-token,html .ant-modal .from-token,html .ant-modal .remove-token,html .ant-modal .to-token {
    font-family: AvenirNext-Medium;
    font-size: 14px;
    color: #999;
    margin-top: 11px;
    margin-left: 4px
}

body .ant-modal .add-token img,body .ant-modal .from-token img,body .ant-modal .remove-token img,body .ant-modal .to-token img,html .ant-modal .add-token img,html .ant-modal .from-token img,html .ant-modal .remove-token img,html .ant-modal .to-token img {
    width: 20px;
    vertical-align: middle;
    display: none
}

body .ant-modal .add-token span,body .ant-modal .from-token span,body .ant-modal .remove-token span,body .ant-modal .to-token span,html .ant-modal .add-token span,html .ant-modal .from-token span,html .ant-modal .remove-token span,html .ant-modal .to-token span {
    vertical-align: middle;
    line-height: 20px
}

body .ant-modal .middleTip,body .ant-modal .supplyLineTitle,html .ant-modal .middleTip,html .ant-modal .supplyLineTitle {
    margin-top: 24px;
    font-size: 14px;
    color: #666;
    margin-bottom: -10px
}

body .ant-modal .detail-item,html .ant-modal .detail-item {
    padding: 10px 0;
    font-family: AvenirNext-Regular;
    font-size: 14px;
    color: #333
}

body .ant-modal .detail-item .green,html .ant-modal .detail-item .green {
    color: #16c378
}

body .ant-modal .detail-item .orange,html .ant-modal .detail-item .orange {
    color: #ff8e18
}

body .ant-modal .detail-item span:last-child,html .ant-modal .detail-item span:last-child {
    max-width: 230px;
    text-align: right
}

body .ant-modal .recipient-addr,html .ant-modal .recipient-addr {
    background: #fff;
    box-shadow: 0 10px 40px 0 rgba(21,55,156,.06);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    font-family: AvenirNext-Medium;
    font-size: 14px;
    color: #999
}

body .ant-modal .recipient-addr .address,html .ant-modal .recipient-addr .address {
    font-family: AvenirNext-DemiBold;
    font-size: 16px;
    color: #333;
    margin-top: 10px
}

body .ant-modal .detail-slippage,body .ant-modal .price,html .ant-modal .detail-slippage,html .ant-modal .price {
    padding: 10px 0;
    font-family: AvenirNext-Medium;
    font-size: 16px;
    color: #333
}

body .ant-modal .warning,html .ant-modal .warning {
    font-family: AvenirNext-Regular;
    font-size: 14px;
    color: #999;
    padding: 20px 0;
    text-align: left
}

body .ant-modal .img,html .ant-modal .img {
    height: 50px;
    line-height: 50px
}

body .ant-modal .bold,html .ant-modal .bold {
    font-size: 18px;
    font-weight: 600;
    color: #111;
    margin: 40px 0 20px
}

body .ant-modal .red,html .ant-modal .red {
    color: red
}

body .ant-modal .lastBtn,html .ant-modal .lastBtn {
    width: 70%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-top: 30px;
    background: #fff;
    border: 1px solid #666;
    border-radius: 5px;
    color: #555;
    cursor: pointer
}

body .ant-modal .amount,html .ant-modal .amount {
    padding: 15px 0 10px;
    align-items: center;
    border-bottom: 1px solid hsla(0,0%,84.7%,.5)
}

body .ant-modal .amount.pb25,html .ant-modal .amount.pb25 {
    padding-bottom: 25px
}

body .ant-modal .amount.trans-modal,html .ant-modal .amount.trans-modal {
    border-bottom: none
}

body .ant-modal .amount .amount-num,html .ant-modal .amount .amount-num {
    font-family: AvenirNext-DemiBold;
    font-size: 30px;
    color: #333;
    min-height: 27px;
    line-height: 27px
}

body .ant-modal .amount .amount-name,html .ant-modal .amount .amount-name {
    margin-top: 9px;
    font-family: AvenirNext-Medium;
    font-size: 14px;
    color: #333
}

body .ant-modal .amount .amount-name img,html .ant-modal .amount .amount-name img {
    width: 20px;
    height: 20px;
    vertical-align: top
}

body .ant-modal .amount .amount-name span,html .ant-modal .amount .amount-name span {
    margin-left: 10px
}

body .ant-modal .amount .symbol,html .ant-modal .amount .symbol {
    margin: 0 30px;
    font-size: 30px
}

body .ant-modal .tokens,html .ant-modal .tokens {
    padding-bottom: 0;
    border-bottom: none
}

body .ant-modal .recipient,html .ant-modal .recipient {
    margin-top: 5px;
    display: block
}

body .ant-modal .endTip,html .ant-modal .endTip {
    opacity: .8;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #999;
    margin-top: 17.5px;
    display: block
}

body .ant-modal.confirm-swap-modal .price,html .ant-modal.confirm-swap-modal .price {
    border-top: 1px solid hsla(0,0%,84.7%,.5);
    margin-top: 25px
}

body .ant-modal .ant-modal-body .price,html .ant-modal .ant-modal-body .price {
    font-size: 16px;
    padding-bottom: 0
}

body .ant-modal .ant-modal-body .price .right,html .ant-modal .ant-modal-body .price .right {
    font-size: 16px;
    color: #666
}

body .ant-modal .ant-modal-body .detail-list,html .ant-modal .ant-modal-body .detail-list {
    font-size: 16px;
    margin-top: -2.1px
}

body .ant-modal .ant-modal-body .detail-list span,html .ant-modal .ant-modal-body .detail-list span {
    font-size: 16px
}

body .ant-modal .ant-modal-body .detail-list .detail-item>div>span:last-child,html .ant-modal .ant-modal-body .detail-list .detail-item>div>span:last-child {
    line-height: 1
}

body .ant-modal .action-btns,html .ant-modal .action-btns {
    margin-top: 30px
}

body .ant-modal .supplyDescTitle,html .ant-modal .supplyDescTitle {
    margin-top: 17.5px;
    opacity: .8;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #999
}

body .ant-modal button.single,html .ant-modal button.single {
    background: #5915e1;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    width: 280px;
    height: 50px;
    line-height: 50px;
    display: block;
    margin: 0 auto;
    font-size: 14px;
    font-family: PingFangSC-Regular
}

body .ant-modal button.single:hover,html .ant-modal button.single:hover {
    background: #4711b4
}

body .ant-modal button.single.gray,body .ant-modal button.single.gray:hover,html .ant-modal button.single.gray,html .ant-modal button.single.gray:hover {
    background: #dbdbdb
}

body .ant-modal button.single.half,html .ant-modal button.single.half {
    width: 49%;
    max-width: 260px;
    margin-left: 2%
}

body .ant-modal button.single.half:first-child,html .ant-modal button.single.half:first-child {
    margin-left: 0
}

body .ant-modal button.single.trisection,html .ant-modal button.single.trisection {
    width: 32%;
    max-width: 160px;
    margin-left: 25px
}

body .ant-modal button.single.trisection:first-child,html .ant-modal button.single.trisection:first-child {
    margin-left: 0
}

body .ant-modal button.single.blue,html .ant-modal button.single.blue {
    background: #5816e0;
    color: #fff
}

body .ant-modal button.single.orange,html .ant-modal button.single.orange {
    background: #ff8e18;
    color: #fff
}

body .ant-modal-body,html .ant-modal-body {
    border-radius: 5px;
    padding: 0
}

body .ant-modal-body .price,html .ant-modal-body .price {
    padding: 25px 0 30px
}

body .ant-modal-body .price .param,html .ant-modal-body .price .param {
    justify-content: space-between
}

body .ant-modal-body .price .param.flex,html .ant-modal-body .price .param.flex {
    margin-bottom: 12.5px
}

body .ant-modal-body .price .param img,html .ant-modal-body .price .param img {
    width: 25px;
    height: 25px;
    margin-right: 2px
}

body .ant-modal-body .price .param img:nth-child(2),html .ant-modal-body .price .param img:nth-child(2) {
    margin: 0 15px 0 -8px
}

body .ant-modal-body .price .param span,html .ant-modal-body .price .param span {
    vertical-align: middle;
    font-family: AvenirNext-Medium;
    font-size: 16px
}

body .ant-modal-body .price .param span.price-key,html .ant-modal-body .price .param span.price-key {
    color: #333;
    text-align: left
}

body .ant-modal-body .price .param .price-value,html .ant-modal-body .price .param .price-value {
    text-align: right
}

body .ant-modal-body .price .param .price-value p,body .ant-modal-body .price .param .price-value span,html .ant-modal-body .price .param .price-value p,html .ant-modal-body .price .param .price-value span {
    font-family: AvenirNext-Medium;
    font-size: 16px;
    color: #666
}

body .ant-modal-body .price .param .price-value .ml20,html .ant-modal-body .price .param .price-value .ml20 {
    margin-left: 20px
}

body .ant-modal-body .price .v-right,html .ant-modal-body .price .v-right {
    font-size: 16px;
    color: #666
}

body .ant-modal-body .errorMsg,html .ant-modal-body .errorMsg {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #ff8e18;
    background: url(https://sunswap.com/static/media/failed.635fcb16.svg) 0 no-repeat;
    background-size: 13px;
    padding-left: 18px;
    display: inline-block;
    margin: 0 auto 10px
}

body .ant-modal-body .share-title,html .ant-modal-body .share-title {
    color: #333;
    font-size: 16px
}

body .ant-modal-header,html .ant-modal-header {
    border: none;
    border-radius: 50px 50px 0 0;
    padding: 0 0 10px
}

body .ant-modal-header .ant-modal-title,html .ant-modal-header .ant-modal-title {
    font-family: PingFangSC-Regular;
    font-size: 20px;
    color: #333;
    text-align: center
}

body .ant-modal-close,html .ant-modal-close {
    top: 30px;
    right: 45px
}

body .ant-modal-close .ant-modal-close-x,html .ant-modal-close .ant-modal-close-x {
    width: 19px;
    height: auto;
    line-height: 0;
    font-size: 19px;
    font-weight: 800;
    color: #666
}

body .ant-modal-close .ant-modal-close-x .anticon,html .ant-modal-close .ant-modal-close-x .anticon {
    background: url(https://sunswap.com/static/media/Close.b905e6e3.svg) no-repeat;
    background-size: 19px 19px;
    width: 19px;
    height: 19px
}

body .ant-modal-close .ant-modal-close-x .anticon svg,html .ant-modal-close .ant-modal-close-x .anticon svg {
    display: none
}

body .bold,html .bold {
    font-weight: 600
}

body .fz12,html .fz12 {
    font-size: 12px
}

body .fz13,html .fz13 {
    font-size: 13px
}

body .fz14,html .fz14 {
    font-size: 14px
}

body .fz16,html .fz16 {
    font-size: 16px
}

body .black,html .black {
    color: #333
}

body .firstTitle,html .firstTitle {
    font-family: AvenirNext-DemiBold;
    font-size: 28px;
    color: #333
}

body .secondTitle,html .secondTitle {
    font-family: AvenirNext-Medium;
    font-size: 20px;
    color: #333
}

body .common-tool,html .common-tool {
    margin: 20px 0
}

body .common-tool .ques,html .common-tool .ques {
    margin-right: 0!important
}

body .common-tool-title,html .common-tool-title {
    font-family: AvenirNext-Medium;
    font-size: 14px;
    color: #333
}

body .switch-version .ant-tabs-content,html .switch-version .ant-tabs-content {
    position: relative;
    z-index: 2
}

body .switch-version .ant-tabs-content-holder,html .switch-version .ant-tabs-content-holder {
    position: relative
}

body .switch-version .ant-tabs-content-holder:before,html .switch-version .ant-tabs-content-holder:before {
    content: "";
    display: block;
    width: 98px;
    height: 68px;
    line-height: 68px;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    border-radius: 0 50px 0 50px;
    font-family: Avenir Next;
    font-weight: 600;
    font-size: 16px
}

body .switch-version .ant-tabs-content-holder:after,html .switch-version .ant-tabs-content-holder:after {
    content: "";
    display: block;
    width: 100%;
    height: 240px;
    position: absolute;
    bottom: 0;
    right: 5px;
    z-index: 1;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 0 0 50px 0
}

body .switch-version.v1 .ant-tabs-content-holder:before,html .switch-version.v1 .ant-tabs-content-holder:before {
    content: "V1";
    font-size: 18px;
    color: #715fdf;
    background: rgba(113,95,223,.1)
}

body .switch-version.v1 .ant-tabs-content-holder:after,html .switch-version.v1 .ant-tabs-content-holder:after {
    border-radius: 0;
    right: 15px;
    background: url(https://sunswap.com/static/media/v1-bg.2358ca50.svg) 100% no-repeat;
    background-size: auto 240px
}

body .switch-version.v15 .ant-tabs-content-holder:before,html .switch-version.v15 .ant-tabs-content-holder:before {
    content: "V1.5";
    color: #dc4bdf;
    font-size: 18px;
    background: rgba(220,75,223,.1)
}

body .switch-version.v15 .ant-tabs-content-holder:after,html .switch-version.v15 .ant-tabs-content-holder:after {
    background: url(https://sunswap.com/static/media/v15-bg.e8fee447.svg) 100% no-repeat;
    background-size: auto 240px
}

body .switch-version.v2 .ant-tabs-content-holder:before,html .switch-version.v2 .ant-tabs-content-holder:before {
    font-size: 18px;
    content: "V2";
    color: #e44646;
    background: rgba(229,135,135,.1)
}

body .switch-version.v2 .ant-tabs-content-holder:after,html .switch-version.v2 .ant-tabs-content-holder:after {
    right: -1px;
    background: url(https://sunswap.com/static/media/v2-bg.a50c81b0.svg) 100% no-repeat;
    background-size: auto 240px
}

.typo-text-link {
    font-family: AvenirNext-Medium
}

.ant-notification-notice {
    border-radius: 30px
}

.mobile-menu {
    display: none
}

.justify-content {
    justify-content: space-between
}

button.schedule-btn {
    margin-right: 33px;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    background: rgba(72,80,230,.2);
    color: #4850e6;
    font-size: 16px;
    font-family: AvenirNext-Medium
}

button.schedule-btn:last-child {
    margin-right: 0
}

button.schedule-btn:hover {
    background-color: #bdc0f5
}

button.schedule-btn-active {
    background: #5915e1;
    height: 40px;
    line-height: 40px;
    color: #fff
}

button.half {
    width: 49%;
    max-width: 260px;
    margin-left: 2%
}

button.half:first-child {
    margin-left: 0
}

button.trisection {
    width: 32%;
    max-width: 160px;
    margin-left: 25px
}

button.trisection:first-child {
    margin-left: 0
}

button.gray {
    cursor: auto;
    color: #fff;
    background: #dbdbdb
}

button.blue {
    background: #5915e1;
    color: #fff;
    position: relative
}

button.blue:hover {
    background: #4711b4
}

button.blue .ques {
    position: absolute;
    top: 26px;
    right: 26px
}

button.purple {
    background: rgba(89,21,225,.2);
    color: #5915e1
}

button.green {
    background: rgba(22,195,120,.2);
    color: #16c378
}

button.ant-pagination-item-link {
    height: 32px;
    line-height: 32px
}

button.orange {
    background: #ff8e18;
    color: #fff
}

button.red {
    background: #e85d54!important;
    color: #fff
}

@media screen and (max-width: 1000px) {
    .mobile-menu {
        display:block;
        width: 60px;
        height: 22px;
        color: #fff;
        position: absolute;
        top: 5px;
        left: 10px;
        cursor: pointer
    }

    body #root .swap-and-pool,html #root .swap-and-pool {
        border-radius: 0;
        padding: 0;
        min-height: 100vh;
        margin-left: 0;
        overflow-x: hidden
    }

    body #root .swap-and-pool .sunswap-toast,html #root .swap-and-pool .sunswap-toast {
        margin-top: 0;
        padding-left: 10px;
        justify-content: center
    }

    body #root .swap-and-pool .sunswap-toast a,html #root .swap-and-pool .sunswap-toast a {
        font-size: 12px
    }

    body #root .swap-and-pool .sunswap-toast button,html #root .swap-and-pool .sunswap-toast button {
        display: none
    }

    body #root .swap-and-pool .main-content,html #root .swap-and-pool .main-content {
        margin-top: 40px;
        transform: scale(.9) translateY(-6%);
        margin-bottom: -90px
    }

    body #root .swap-and-pool .main-content #swap-tab .ant-tabs-content-holder,html #root .swap-and-pool .main-content #swap-tab .ant-tabs-content-holder {
        padding: 88px 20px 20px;
        border-radius: 30px
    }

    #swap-tab .action-content .token-sec .input,.swap-content .swap-block .left-block {
        flex: 1 1
    }

    #swap-tab .action-content .token-sec .input input,.swap-content .swap-block .left-block input {
        width: 100%
    }

    #swap-tab .action-content .token-sec .select,.swap-content .swap-block .right-block {
        width: 55%
    }

    #swap-tab .action-content .token-sec .select .input-max,.swap-content .swap-block .right-block .input-max {
        display: inline-block
    }

    #swap-tab .action-content .token-sec .select .input-max .link,.swap-content .swap-block .right-block .input-max .link {
        vertical-align: top;
        margin-top: 4px;
        display: inline-block;
        margin-right: 5px
    }

    #swap-tab .action-content .token-sec .select p:first-child,.swap-content .swap-block .right-block p:first-child {
        width: 100%
    }

    #swap-tab .action-content .token-sec .select .dragDown,#swap-tab .action-content .token-sec .select p:first-child,.swap-content .swap-block .right-block .dragDown,.swap-content .swap-block .right-block p:first-child {
        display: inline-block;
        line-height: 30px;
        margin-top: 0
    }

    #swap-tab .action-content .token-sec .select .dragDown .balance,#swap-tab .action-content .token-sec .select p:first-child .balance,.swap-content .swap-block .right-block .dragDown .balance,.swap-content .swap-block .right-block p:first-child .balance {
        max-width: 150px;
        display: inline-block;
        vertical-align: middle
    }

    .ant-modal.pool-modal.add-gai .amount .amount-num {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 100%
    }

    .swap-content .swap-block .right-block .link {
        margin-right: 10px!important;
        padding: 0 7px!important
    }

    .swap-content .swap-block .right-block .dragDown {
        padding-right: 10px;
        margin-top: 10px!important
    }

    body #root .action-content .action-info .schedule-key button,body #root .swap-and-pool .main-content #swap-tab button.schedule-btn,html #root .swap-and-pool .main-content #swap-tab button.schedule-btn {
        width: 20%;
        margin-right: 5%;
        border-radius: 10px
    }

    body #root .action-content .action-info .schedule-key button:last-child,body #root .swap-and-pool .main-content #swap-tab button.schedule-btn:last-child,html #root .swap-and-pool .main-content #swap-tab button.schedule-btn:last-child {
        margin-right: 0
    }

    body #root .action-content .action-info .schedule-key {
        display: flex;
        justify-content: space-between
    }

    body #root .swap-and-pool .main-content #swap-tab button.trisection,html #root .swap-and-pool .main-content #swap-tab button.trisection {
        width: 30%;
        margin-left: 3%
    }

    body .ant-modal-close,html .ant-modal-close {
        top: 30px;
        right: 30px
    }

    .account-modal .address-con .address-tex span:first-child {
        word-break: break-all;
        max-width: 80%
    }

    .ant-modal.pool-modal .price .param.flex:first-child .price-value {
        width: 70%;
        text-align: right
    }

    .ant-modal.pool-modal .price .param.flex:nth-child(2) {
        display: flex
    }

    .ant-modal.pool-modal .price .param.flex:nth-child(2) .price-value {
        width: 70%;
        text-align: right
    }

    .ant-modal.pool-modal .amount .symbol {
        margin: 0
    }

    .ant-modal.pool-modal .amount .amount-num {
        max-width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden
    }

    .action-content .convert {
        align-items: center
    }

    body #root .swap-and-pool .main-content #swap-tab .ant-tabs-nav-list .ant-tabs-tab,html #root .swap-and-pool .main-content #swap-tab .ant-tabs-nav-list .ant-tabs-tab {
        font-size: 20px
    }

    .ant-modal.login-modal .logo,.ant-modal.login-modal .wallet-list {
        margin-top: 20px
    }

    .ant-drawer-header-no-title .ant-drawer-close {
        padding: 0;
        top: 35px;
        right: 30px
    }

    .m-menu-drawer .ant-drawer-header-no-title .ant-drawer-close {
        padding: 0
    }

    .ant-modal-wrap .ant-modal.select-modal .select-search {
        background-position: 105% 30%!important;
        background-size: 80px
    }

    .ant-modal-wrap .ant-modal.select-modal .ant-modal-close {
        top: 30px
    }

    .ant-notification-notice {
        width: 300px
    }

    .trans-modal .ant-modal-confirm-content .trans-modal-body {
        padding: 30px 20px
    }

    .ant-notification.ant-notification-topRight {
        margin-right: 0;
        margin-left: 50%;
        transform: translateX(-50%);
        right: auto!important;
        width: 100%
    }

    .ant-notification.ant-notification-topRight .ant-notification-notice {
        width: 100%
    }
}

.ant-table-content {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}

.ant-notification .ant-notification-notice {
    border-radius: 20px!important
}

.flex {
    display: flex
}

.ant-drawer .activity.gift-activity img {
    width: 220px;
    height: auto
}

.ledger-modal-mask,.ledger-modal-wrap {
    z-index: 1003!important
}

.ledger-modal-mask input,.ledger-modal-wrap input {
    -webkit-appearance: auto;
    appearance: auto
}

@media screen and (max-width: 1000px) {
    .scan-home .toast {
        margin-top:-20px
    }

    .scan-home .chart-area .chart-liquidity .chart-stats-data {
        margin-top: -3px!important
    }

    .scan-home .chart-area .chart-liquidity .chart-stats-data.mobile-mt {
        margin-top: 7px!important
    }

    body .ant-modal,html .ant-modal {
        width: 100%!important;
        top: calc(50vh - 270px)
    }

    body .ant-modal.list-remove-modal,html .ant-modal.list-remove-modal {
        margin-left: 0!important;
        transform-origin: center!important
    }

    body .ant-modal.list-addtoken-modal,html .ant-modal.list-addtoken-modal {
        margin-left: 0!important
    }

    body .ant-modal-content,html .ant-modal-content,html .ant-modal.pool-modal .ant-modal-content,html body .ant-modal.list-modal .ant-modal-content {
        padding: 20px;
        border-radius: 20px
    }

    body .ant-notification-notice.swap-noti {
        top: 30px
    }
}

@media screen and (max-width: 750px) {
    .switch-version .ant-tabs-content-holder {
        padding-top:56px!important
    }

    .switch-version .ant-tabs-content-holder:before {
        width: 78px!important;
        height: 45px!important;
        line-height: 45px!important;
        font-size: 18px!important;
        border-radius: 0 30px 0 30px!important
    }

    .switch-version .ant-tabs-content-holder:after {
        background: url(https://sunswap.com/static/media/v1-bg.2358ca50.svg) 100% no-repeat;
        background-size: auto 128px!important;
        height: 128px!important;
        border-radius: 0 0 30px 0
    }

    .switch-version.v1 .ant-tabs-content-holder:after {
        border-radius: 0!important
    }

    .switch-version.v15 .ant-tabs-content-holder:after {
        background: url(https://sunswap.com/static/media/v15-bg.e8fee447.svg) 100% no-repeat;
        background-size: auto 128px!important;
        height: 128px!important
    }

    .switch-version.v2 .ant-tabs-content-holder:after {
        right: -10px!important;
        background: url(https://sunswap.com/static/media/v2-bg.a50c81b0.svg) 100% no-repeat;
        background-size: auto 128px!important;
        height: 128px!important
    }

    html body #root .toast-text li {
        display: flex;
        align-items: center;
        height: 40px;
        text-align: center
    }

    html body #root .toast-text li a span {
        color: #fff;
        font-size: 12px;
        line-height: 16px;
        padding: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis
    }
}

/*# sourceMappingURL=main.a88182d2.chunk.css.map */