.header-container {
    padding: 0 20px 20px 55px;
    color: #000;
    background: #fff;
    justify-content: space-between;
    min-height: 100vh;
    position: fixed;
    top: 38px
}

.header-container .logo {
    margin-bottom: 32px;
    display: flex
}

.header-container .logo img {
    width: 120px
}

.wechat-menu {
    display: flex;
    align-items: center;
    cursor: pointer;
    max-width: 80px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #333;
    font-family: AvenirNext-Medium
}

.wechat-menu:hover {
    color: #5915e1
}

.header-container .logo-text,.m-menu-drawer .logo-text {
    font-family: AvenirNext-Bold;
    font-size: 24px;
    color: #333;
    display: inline-block;
    margin-left: 10px
}

.header-container .ant-menu-item-selected,.header-container .ant-menu-item-selected a,.header-container .slice-lg,.m-menu-drawer .ant-menu-item-selected,.m-menu-drawer .ant-menu-item-selected a,.m-menu-drawer .slice-lg {
    color: #333
}

.header-container .menu-lg,.m-menu-drawer .menu-lg {
    font-size: 16px
}

.header-container .ant-menu-inline .ant-menu-item:after,.m-menu-drawer .ant-menu-inline .ant-menu-item:after {
    border-right: none
}

.header-container .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected,.m-menu-drawer .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background-color: #fff
}

.header-container .ant-menu-item,.m-menu-drawer .ant-menu-item {
    padding-left: 0!important;
    display: flex;
    align-items: center
}

.header-container .ant-menu-item:first-child,.m-menu-drawer .ant-menu-item:first-child {
    margin-top: 20px
}

.header-container .ant-menu-item a,.m-menu-drawer .ant-menu-item a {
    font-family: AvenirNext-Medium;
    color: #333
}

.header-container .ant-menu-item a:hover,.m-menu-drawer .ant-menu-item a:hover {
    color: #5915e1
}

.header-container .ant-menu-item>span,.m-menu-drawer .ant-menu-item>span {
    font-family: AvenirNext-Medium;
    color: #333;
    display: inline-block;
    margin-left: 20px
}

.header-container .ant-menu-item .a-active,.header-container .ant-menu-item .ant-menu-item-active,.header-container .ant-menu-item .lg-active,.m-menu-drawer .ant-menu-item .a-active,.m-menu-drawer .ant-menu-item .ant-menu-item-active,.m-menu-drawer .ant-menu-item .lg-active {
    color: #5915e1
}

.header-container .ant-menu-item .hotImg,.header-container .ant-menu-item .newImg,.m-menu-drawer .ant-menu-item .hotImg,.m-menu-drawer .ant-menu-item .newImg {
    margin-top: 3px;
    position: relative;
    left: 5px;
    top: -12px
}

@keyframes moveAni {
    0% {
        margin-left: 0
    }

    2% {
        margin-left: 5px
    }

    4% {
        margin-left: 0
    }

    5% {
        margin-left: 4px
    }

    8% {
        margin-left: 0
    }

    10% {
        margin-left: 3px
    }

    12% {
        margin-left: 0
    }

    14% {
        margin-left: 2px
    }

    16% {
        margin-left: 0
    }

    to {
        margin-left: 0
    }
}

.header-container .divide-line,.m-menu-drawer .divide-line {
    opacity: .6;
    background: #d8d8d8;
    height: 1px
}

.header-container .connect-wallet .connect-btn,.m-menu-drawer .connect-wallet .connect-btn {
    display: inline-block;
    background: #5915e1;
    box-shadow: 0 10px 40px 0 rgba(21,55,156,.06);
    border-radius: 10px;
    font-family: AvenirNext-Medium;
    color: #fff;
    padding: 15px;
    width: 200px;
    text-align: center;
    cursor: pointer
}

.header-container .account-basic-info,.m-menu-drawer .account-basic-info {
    width: 160px;
    font-size: 12px
}

.header-container .account-basic-info>div,.m-menu-drawer .account-basic-info>div {
    padding: 0 26px;
    line-height: 40px;
    color: #333;
    box-shadow: 0 10px 40px 0 rgba(21,55,156,.06);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px
}

.header-container .account-basic-info .address-text,.m-menu-drawer .account-basic-info .address-text {
    opacity: .8;
    font-family: AvenirNext-Medium;
    display: flex;
    align-items: center;
    background-color: #f7f7f7;
    border-radius: 10px 10px 0 0
}

.header-container .account-basic-info .address-text img,.m-menu-drawer .account-basic-info .address-text img {
    width: 17px;
    height: 17px;
    display: inline-block;
    margin-right: 10px
}

.header-container .account-basic-info .trx-balance,.m-menu-drawer .account-basic-info .trx-balance {
    font-family: AvenirNext-Regular;
    background: rgba(72,80,229,.1);
    padding: 0 10px;
    text-align: center;
    white-space: nowrap
}

.header-container .ant-menu-inline,.header-container .ant-menu-vertical,.header-container .ant-menu-vertical-left,.m-menu-drawer .ant-menu-inline,.m-menu-drawer .ant-menu-vertical,.m-menu-drawer .ant-menu-vertical-left {
    border-right: none
}

.login-modal {
    text-align: center
}

.login-modal .logo img {
    width: 135px
}

.login-modal a {
    color: #5915e1;
    text-decoration: underline
}

.login-modal .ant-modal-content {
    padding: 30px
}

.login-modal .ant-modal-close {
    padding-top: 15px
}

.login-modal .ant-modal-close-x {
    color: #666;
    margin-top: -10px
}

.login-modal .back-icon {
    position: absolute;
    left: 45px;
    top: 40px;
    width: 50px;
    text-align: left
}

.login-modal .login-modal-title {
    font-family: PingFangSC-Semibold;
    font-size: 20px;
    color: #333;
    line-height: 28px
}

.login-modal .logo-text {
    font-family: AvenirNext-Bold;
    font-size: 24px;
    color: #333;
    display: inline-block;
    margin-left: 10px
}

.login-modal .tronlink-logo {
    width: 40px
}

.login-modal .wallet-list {
    text-align: center;
    margin-top: 22px
}

.login-modal .wallet-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 8px 0 rgba(20,44,225,.15);
    border-radius: 10px;
    padding: 20px;
    margin: 0 auto 20px;
    cursor: pointer
}

.login-modal .wallet-item>span:last-child {
    font-family: AvenirNext-Medium;
    font-size: 20px;
    color: #333
}

.login-modal .wallet-item .wallet-item-logo {
    flex: 1 1;
    text-align: left
}

.login-modal .wallet-item .wallet-item-usetip {
    padding: 12px;
    margin-left: 12px
}

.login-modal .tronlink-tips {
    font-size: 15px;
    margin-top: 26px;
    text-align: left;
    font-family: AvenirNext-Medium;
    color: rgba(51,51,51,.7)
}

.login-modal .tronlink-tips .tronlink-tips-item {
    margin-bottom: 8px;
    text-align: center
}

.login-modal .tronlink-tips .tronlink-tips-item:last-child {
    margin-bottom: 0
}

.login-modal .tronlink-tips .tronlink-tips-item>a {
    text-decoration: none
}

.login-modal .tronlink-tips .tronlink-tips-link {
    font-size: 15px;
    color: #5a14e1;
    margin-right: 10px
}

.login-modal .tronlink-tips .tronlink-tips-link:last-child {
    margin-right: 0
}

.login-modal .tronlink-tips .tronlink-tips-btn {
    font-size: 12px;
    background: #5a14e1;
    border-radius: 15px;
    color: #fff;
    padding: 6px 16px;
    margin-left: 10px
}

.login-modal .step2-wallet {
    margin-top: 60px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center
}

.login-modal .step2-wallet>span:last-child {
    font-family: AvenirNext-DemiBold;
    display: inline-block;
    font-size: 20px;
    color: #333;
    margin-left: 10px
}

.login-modal .login-tip-text {
    font-family: AvenirNext-Medium;
    color: #999;
    line-height: 19px
}

.login-modal .init-text {
    font-family: AvenirNext-DemiBold;
    font-size: 20px;
    color: #333;
    margin: 30px 0
}

.mt10 {
    margin-top: 10px!important
}

.no-support-pop .tip {
    margin-top: 20px
}

.no-support-pop .tip a {
    color: #5915e1
}

.no-support-pop .buttonLink {
    margin: 60px 0 0;
    border-radius: 10px;
    padding: 12px 0;
    width: 45%
}

.no-support-pop .buttonLink:first-child {
    background: transparent;
    border: 1px solid #666
}

.no-support-pop .buttonLink:first-child a {
    color: #666;
    display: inline-block
}

.no-support-pop .buttonLink:nth-child(2) {
    border: 1px solid #666;
    background: #5915e1
}

.no-support-pop .buttonLink:nth-child(2) a {
    color: #fff;
    display: inline-block
}

#copySpan {
    position: relative;
    display: inline-block
}

.ant-modal.account-modal {
    text-align: left
}

.account-modal {
    font-size: 14px
}

.account-modal .ant-modal-content {
    padding: 0
}

.account-modal .ant-modal-close {
    top: 20px;
    right: 25px
}

.account-modal .account-header {
    height: 60px;
    padding-left: 25px;
    background: rgba(90,20,225,.1);
    display: flex;
    align-items: center
}

.account-modal .account-header .account-wallet-logo {
    width: 24px;
    height: 24px;
    margin-right: 8px
}

.account-modal .account-header .account-wallet-text {
    font-size: 15px;
    font-weight: 600;
    color: #111
}

.account-modal .account-header-mobile {
    padding: 18px 12px 0;
    display: flex;
    justify-content: space-between
}

.account-modal .account-header-mobile>div {
    display: flex;
    align-items: center
}

.account-modal .account-header-mobile .account-wallet-logo {
    width: 30px;
    height: 30px;
    margin-right: 8px
}

.account-modal .account-header-mobile .account-wallet-address {
    font-size: 16px;
    font-weight: 400;
    color: #111
}

.account-modal .account-body {
    padding: 25px 30px
}

.account-modal .account-body .address-con .address-text {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #111
}

.account-modal .account-body .address-con .address-form {
    margin-top: 15px
}

.account-modal .account-body .address-con .address-form input {
    margin-left: 6px
}

.account-modal .account-body .address-con-mobile {
    background: #f5f5f5;
    border-radius: 4px;
    padding: 10px 12px
}

.account-modal .account-body .address-con-mobile .address-form>div {
    display: flex;
    justify-content: space-between
}

.account-modal .account-body .address-con-mobile .address-form-inline {
    display: flex;
    align-items: center;
    justify-content: start;
    position: relative
}

.account-modal .account-body .address-con-mobile .address-form-inline input {
    margin-left: 6px
}

.account-modal .account-body .address-con-mobile .address-form-inline button {
    position: absolute;
    right: 0
}

.account-modal input {
    padding: 2px 8px;
    width: 40px;
    border-radius: 5px;
    border: 1px solid rgba(17,17,17,.11);
    margin: 0 6px 0 0;
    background-color: transparent
}

.account-modal .pointer {
    display: inline-block;
    width: 12px;
    height: 14px;
    cursor: pointer;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAgCAYAAAABtRhCAAAAAXNSR0IArs4c6QAAAj1JREFUSEvt1j9oE3EUwPHvy5+2GP/QxU7WUR0ctE4lNpEqgg51KA4OzYUiDhVHFymRdnKwizqI2FyCihQcKoKKYnutg4vg5J9BRbSCgy1qsSQxeXKBkyTk5C49RdHb7vLuffLe/e7eT3A5rKzeQdjv9rvP618UpjsijEizG6emNNz1lffARp+JfxoukG0K2nfdv6RdkTZ2BgGK0gOMA0uuYBCQk+PhZd1SDvPcPq+C1qRuEqG/AuuCgAQWojFu9x6WFTtfHTiT1WRIuAXEgsBqcjwtFujdd0w+1YGWqY+h+qyWgI8BoZuBqEImachYI1gCIhVlx560PAkCtHKaQTkN3EgYMtgIqo2Ey2yND8uLIMBZU08KnAFuJgwZ+A8yb2pPRTmLsNZLixVet61hyHkNfLd0Nqdjoox6wZyYEOzabYi94vENzl/VTi2SUo8VorxKpOWag/sG/VTWLPbvAB9d0fXFIu1eql1e5vOBE1JouaVWVo8g5O3vgRcQWAyX2R4fFnuG+l80czk9rso5j5gdVvoG2/oNedkS6IwUDXt7Dwsl3u09Kh9abqmPypqG/vmr9G5eYx3KIOrS0hAPEkPyzK0TviusmWduOd8mDOkODJzJazxU4QI0r1CU631pOeUZzGt3ucIbYEUsU3/5AK5u1HKasTdXvw10uvFvgItAJzCqQnWArvYQZQQ4qGAmDUnX5pM5UycV6i6uFvzxvIRDfSmZrgPvXdQN0XbOCwwQ0FYfWFBhIpmSicY//x1sGuXdO0DYWQAAAABJRU5ErkJggg==) no-repeat 50%/contain;
    vertical-align: middle;
    margin-left: 8px
}

.account-modal .account-wallet-btn {
    background: #5a14e1;
    border-radius: 15px;
    padding: 4px 16px;
    color: #fff;
    margin-left: 24px;
    cursor: pointer
}

.account-modal .account-wallet-default-btn {
    background-color: #fff;
    border-radius: 15px;
    padding: 2px 16px;
    color: #5a14e1;
    margin-left: 10px;
    border: 1px solid #5a14e1;
    cursor: pointer
}

.account-modal #copySpan {
    font-family: AvenirNext-Medium;
    color: #666
}

.account-modal .recent-actions {
    font-size: 14px
}

.account-modal .recent-actions .recent-actions-title {
    font-size: 17px;
    font-weight: 600;
    color: #111
}

.account-modal .recent-actions .recent-actions-empty-title {
    font-size: 12px;
    color: #111;
    line-height: 17px;
    opacity: .5;
    margin-top: 15px
}

.account-modal .recent-actions .trans-item {
    display: flex;
    justify-content: space-between;
    margin-top: 10px
}

.account-modal .recent-actions .trans-item .trans-title {
    text-align: left
}

.account-modal .recent-actions .trans-item .trans-icon {
    font-size: 15px
}

.account-modal .recent-actions .trans-item a {
    color: #5a14e1;
    word-break: break-all;
    font-size: 12px;
    font-weight: 400
}

.account-modal-mobile .ant-modal-close {
    display: none
}

.account-modal-mobile .account-body {
    padding: 16px 12px
}

.account-modal-mobile .recent-actions .recent-actions-empty-title {
    margin-top: 10px
}

.ant-modal.setting-modal {
    margin-top: 50px
}

.trans-modal .ant-modal-close {
    padding-top: 15px;
    display: inline-block!important
}

.trans-modal .ant-modal-confirm-btns {
    display: none!important
}

.trans-modal .trans-modal-body {
    font-family: AvenirNext-DemiBold;
    color: #333;
    font-size: 18px;
    text-align: center;
    padding: 10px
}

.trans-modal .trans-modal-body .trans-modal-title {
    margin-bottom: 50px
}

.trans-modal .trans-modal-body .trans-modal-status {
    font-family: AvenirNext-DemiBold;
    font-size: 20px;
    margin-top: 30px
}

.trans-modal .trans-modal-body .trans-modal-tips {
    font-family: AvenirNext-Medium;
    margin-top: 10px
}

.trans-modal .trans-modal-body .trans-modal-wait-confirm-tips {
    color: #ff8e18
}

.trans-modal .trans-modal-body .trans-modal-submit {
    color: #16c378
}

.trans-modal .trans-modal-body .trans-modal-submit-tips {
    color: #333
}

.trans-modal .trans-modal-body .trans-modal-submit-tips a {
    color: #5915e1
}

.trans-modal .trans-modal-body .trans-modal-cancel {
    color: #330300
}

.trans-notify {
    font-family: AvenirNext-Medium;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.trans-notify .typo-text-link {
    font-size: 14px;
    color: #5915e1
}

.trans-notify .trans-btn-tip {
    display: inline-block;
    font-size: 12px;
    border-radius: 10px;
    padding: 10px
}

.trans-notify .trans-pending {
    background: rgba(22,195,120,.2);
    color: #16c378
}

.trans-notify .trans-confirmed {
    background: rgba(72,80,229,.2);
    color: #4850e5
}

.trans-notify .trans-failed {
    background: rgba(255,142,24,.2);
    color: #ff8e18
}

.return-home {
    position: absolute;
    top: 5px;
    left: 10px;
    color: #5915e1;
    display: none
}

.mobile-header {
    padding: 10px 20px;
    min-height: 40px;
    margin-top: 0
}

.mobile-header .mobile {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.mobile-header .header-mobile-icon {
    display: flex
}

.mobile-header .header-mobile-icon .avtivity-icon {
    display: inline-block;
    width: 85px;
    height: 30px;
    background: url(https://sunswap.com/static/media/m_gift_logo_ch.d53ce93a.svg) 0 0 no-repeat;
    background-size: 100%;
    margin-right: 8px
}

.mobile-header .header-mobile-icon .avtivity-icon.en-icon {
    width: 159px;
    background-image: url(https://sunswap.com/static/media/m_gift_logo_en.d8d31471.svg)
}

.m-menu-drawer .ant-drawer-content-wrapper {
    z-index: 99999999;
    width: 60%!important
}

.m-menu-drawer .connect-wallet .connect-btn {
    display: inline-block;
    background: #5915e1;
    box-shadow: 0 10px 40px 0 rgba(21,55,156,.06);
    border-radius: 10px;
    font-family: AvenirNext-Medium;
    color: #fff;
    padding: 15px;
    width: 95%;
    text-align: center
}

.m-menu-drawer .account-basic-info {
    width: 95%;
    font-size: 14px
}

.m-menu-drawer .account-basic-info>div {
    padding: 15px 26px;
    color: #333;
    box-shadow: 0 10px 40px 0 rgba(21,55,156,.06);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px
}

.m-menu-drawer .logo {
    margin-bottom: 20px
}

.m-menu-drawer .logo img {
    height: 40px;
    width: auto
}

.ant-menu-inline .ant-menu-item:not(:last-child) {
    margin-bottom: 16px
}

.ant-menu-inline .ant-menu-item {
    margin-top: 16px
}

.ant-modal.account-modal,.ant-modal.confirm-swap-modal,.ant-modal.login-modal,.ant-modal.pool-modal,.ant-modal.select-modal,.ant-modal.setting-modal,.ant-modal.trans-modal {
    transform-origin: center!important
}

.qrCodeImg {
    width: 100px
}

.qrCodeImg img {
    width: 100%
}

.total-ele {
    width: 150%;
    text-align: center;
    margin-left: -25%;
    padding: 30px 0 40px;
    margin-bottom: 35px;
    font-family: Avenir Next
}

.total-ele>p {
    color: #fff;
    text-align: center
}

.total-ele .total-title {
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 20px
}

.total-ele .total-value {
    font-weight: 700;
    font-size: 50px;
    line-height: 50px
}

.total-ele .custom-count {
    white-space: nowrap
}

.new-menu .ant-select {
    margin-left: -10px
}

.new-menu .ant-select-selector {
    border: none!important
}

.new-menu .ant-select-selection-item {
    font-size: 16px;
    color: #333!important
}

.new-menu .ant-select-arrow {
    color: #333;
    top: 55%
}

.new-menu .ant-select-arrow .anticon>svg {
    width: 16px;
    height: 10px
}

.new-menu .ant-select-focused.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
    border: none;
    box-shadow: none
}

.new-menu .ant-select-single.ant-select-open .ant-select-selection-item {
    opacity: 1
}

.new-menu .ant-select-arrow {
    width: 8px;
    height: 5px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAKCAYAAAC9vt6cAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADcSURBVHgBjY4xEoIwEEVDcgFaqPAGGbiAdJbeQEtLb6A3UG+gN7C0QzsbxngDOlqsGcC/TDITHDKyTTZ/815WxHF8CMPwFgQBK8vywSYUmB2YOzGCYAo9z5tPkRCMt3vDkGCGXlqSDyTPf7Cuk8Dj649kgXuB/G3DSZKsMDta0SXP8w2nrmmaLQ5lDc8AljZMmTVXgNf9hyaRUvpCiMxsgqo452ld10znvoHxYaqUqgYCIwH0wqqRkeizh7uuK9q2JbgwzECgJREkmSVhLnhUMCZxwU6BLaHeBVN9AZmFawQ9Qtf1AAAAAElFTkSuQmCC) 0 0 no-repeat;
    background-size: 100%;
    right: 24px
}

.new-menu .ant-select-arrow svg {
    display: none
}

.new-menu .ant-menu-item {
    height: 32px!important;
    line-height: 32px!important
}

.new-menu .ant-menu-item>img {
    width: 19.2px;
    height: 19.2px
}

.new-menu .ant-menu-item>span {
    margin-left: 16px
}

.new-menu .ant-menu-item a {
    font-size: 13px!important
}

.lang-select {
    width: 80px!important;
    min-width: 80px!important;
    background: #f9f9f9;
    box-shadow: 0 7px 9px rgba(0,0,0,.06);
    border-radius: 10px
}

.lang-select.ant-select-dropdown {
    padding: 0
}

.lang-select .ant-select-item-option-content {
    color: #333;
    font-size: 12px;
    text-align: center
}

.lang-select .ant-select-item-option-active:not(.ant-select-item-option-disabled),.lang-select .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background: rgba(239,232,252,.3)
}

.lang-select .ant-select-item-option-active:not(.ant-select-item-option-disabled) .ant-select-item-option-content,.lang-select .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-content {
    color: #5915e1;
    font-weight: 400
}

.m-menu-drawer .new-menu .ant-select-selection-item {
    font-size: 13px
}

.ant-menu-inline .ant-menu-item {
    margin-top: 3px
}

.ant-menu-inline .ant-menu-item .ant-menu-title-content a {
    position: relative
}

.ant-menu-inline .ant-menu-item .ant-menu-title-content a .menu_ico_new {
    position: absolute;
    right: -26px;
    top: -7px;
    width: 30px;
    height: 13px
}

.ant-menu-inline .ant-menu-item:not(:last-child) {
    margin-bottom: 6px
}

.new-submenu .ant-menu-submenu-title {
    height: 32px!important;
    line-height: 32px!important
}

.new-submenu.ant-menu-submenu-inline>.ant-menu-submenu-title .ant-menu-submenu-arrow,.new-submenu.ant-menu-submenu-inline>.ant-menu-submenu-title .ant-menu-submenu-arrow:after,.new-submenu.ant-menu-submenu-inline>.ant-menu-submenu-title .ant-menu-submenu-arrow:before {
    transition: none!important
}

.new-submenu.ant-menu-submenu-inline>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,.new-submenu.ant-menu-submenu-inline>.ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before {
    background: #333;
    transition: none!important
}

.new-submenu.ant-menu-submenu-open .ant-menu-submenu-title>i,.new-submenu.ant-menu-submenu-open .ant-menu-submenu-title>span {
    color: #5915e1
}

.new-submenu.ant-menu-submenu-open .ant-menu-submenu-title .ant-menu-submenu-arrow:after,.new-submenu.ant-menu-submenu-open .ant-menu-submenu-title .ant-menu-submenu-arrow:before {
    background: #5915e1!important
}

.new-submenu.ant-menu-submenu-open .lang-bg {
    background-image: url(https://sunswap.com/static/media/language_n.788e1b0a.svg)
}

.new-submenu.ant-menu-submenu-open .more-bg {
    background-image: url(https://sunswap.com/static/media/new-more-hover.dcbeb9d6.svg)
}

.new-submenu .lang-bg {
    background: url(https://sunswap.com/static/media/language.ab2e5562.svg) 0 0 no-repeat;
    background-size: 100%
}

.new-submenu .lang-bg,.new-submenu .more-bg {
    display: inline-block;
    width: 19.19px;
    height: 19.19px
}

.new-submenu .more-bg {
    background: url(https://sunswap.com/static/media/new-more.5e794fa8.svg) 0 0 no-repeat;
    background-size: 100%
}

.new-submenu .ant-menu-submenu-title {
    display: flex;
    align-items: center;
    padding-left: 0!important
}

.new-submenu .ant-menu-submenu-title>span {
    font-family: AvenirNext-Medium;
    color: #333;
    display: inline-block;
    margin-left: 16px;
    font-size: 13px
}

.new-submenu .ant-menu {
    padding-left: 24px!important
}

.new-submenu .ant-menu-item:first-child {
    margin-top: 0!important
}

.new-submenu .ant-menu-item>span {
    font-size: 13px
}

.new-submenu .ant-menu-item>span:hover {
    color: #5915e1
}

.collapse-menu .ant-menu {
    padding-left: 20px!important
}

.collapse-menu .ant-menu-item {
    display: block!important;
    width: 112px;
    height: 35px!important;
    line-height: 35px!important;
    padding: 0 16px!important;
    text-align: left
}

.collapse-menu .ant-menu-item:hover {
    background: rgba(89,21,225,.08);
    border-radius: 10px
}

.collapse-menu .ant-menu-item>a {
    display: block;
    height: 35px!important;
    line-height: 37px!important;
    font-size: 12px!important
}

.collapse-menu.language .ant-menu-item>span {
    margin-left: 0!important
}

.collapse-menu.language .ant-menu {
    padding-left: 18px!important
}

.content-menu {
    margin-bottom: 154px
}

.footer-menu {
    position: absolute;
    bottom: 38px;
    left: 55px;
    width: 160px;
    min-height: 154px
}

.m-menu-drawer .footer-menu {
    left: 24px;
    width: calc(100% - 48px);
    min-height: none;
    height: 154px
}

.m-menu-drawer .header-footer-tt {
    padding-bottom: 10px
}

.header-footer-tt {
    height: 20px;
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.header-footer-tt>span {
    font-family: "Avenir Next";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    color: #9f9f9f
}

.header-footer-links>a {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(https://sunswap.com/static/media/Telegram.674ab2a2.svg) 0 0 no-repeat;
    background-size: 100%
}

.header-footer-links>a:first-child {
    margin-right: 24px
}

.header-footer-links>a:hover {
    background-image: url(https://sunswap.com/static/media/Telegram_n.62e6b10a.svg)
}

.header-footer-links>a.twitter {
    background-image: url(https://sunswap.com/static/media/Twitter.3c549837.svg)
}

.header-footer-links>a.twitter:hover {
    background-image: url(https://sunswap.com/static/media/Twitter_n.50d11dec.svg)
}

.scroll {
    overflow: hidden;
    overflow-y: scroll
}

.mt-20 {
    margin-top: 20px
}

@keyframes antZoomIn {
    0% {
        transform: scale(.2);
        opacity: 0
    }

    to {
        transform: scale(.8);
        opacity: 1
    }
}

@keyframes antZoomOut {
    0% {
        transform: scale(.8)
    }

    to {
        transform: scale(.2);
        opacity: 0
    }
}

.sort-icon {
    width: 20px;
    height: 100%
}

.connect-btn-new {
    display: inline-block;
    background: #5915e1;
    box-shadow: 0 10px 40px 0 rgba(21,55,156,.06);
    border-radius: 10px;
    font-family: AvenirNext-Medium;
    color: #fff;
    padding: 0 15px;
    width: 160px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
    font-size: 12px
}

.connect-btn-new.disabled {
    color: #fff;
    background: #cdcdcd
}

.swap-footer {
    text-align: center;
    padding-bottom: 50px
}

.swap-footer .version {
    margin-top: 30px;
    color: #fff;
    font-family: "PingFang SC";
    align-items: center;
    font-size: 16px
}

.swap-footer .version.sun-v {
    margin-top: 20px;
    color: hsla(0,0%,100%,.5)
}

.swap-footer .version .v-text {
    height: 40px;
    line-height: 40px
}

.swap-footer .version .v-line {
    margin: 0 10px
}

.swap-footer .version a.v-link {
    font-size: 16px;
    color: #fff;
    white-space: nowrap
}

.swap-footer .version a.v-link:hover {
    color: #fff
}

.activity {
    display: inline-block
}

.activity.gift-activity img {
    width: 255px;
    height: 151px
}

.activity.deal-activity img {
    width: 229px;
    height: 90px;
    transform: translateX(10px)
}

@media screen and (max-width: 1000px) {
    .header-container {
        margin-top:0;
        position: static
    }

    .mobile-header .mobile-logo img {
        width: 100px
    }

    .mobile-header .mobile-icon img {
        width: 16px;
        height: auto
    }

    .m-menu-drawer .ant-menu-item>span,.m-menu-drawer .ant-menu-item a,.new-submenu .ant-menu-submenu-title span,.wechat-menu {
        font-size: 13px
    }

    .wechat-menu {
        margin-top: 4px
    }
}

@media screen and (max-width: 500px) {
    .total-ele {
        margin-bottom:0;
        padding-bottom: 30px
    }

    .total-ele .total-title {
        font-size: 16px
    }

    .total-ele .total-value {
        font-size: 35px
    }

    .swap-footer .version,.swap-footer .version a.v-link {
        font-family: Avenir Next;
        font-weight: 500;
        font-size: 12px
    }

    .swap-footer .version {
        white-space: normal
    }

    .swap-footer .version a.v-link {
        color: #fcfcff;
        white-space: nowrap
    }

    .swap-footer .version .v-line {
        margin: 0 4px;
        color: #4e4c5f
    }
}

.action-btns {
    margin-top: 25px
}

.action-btns button {
    margin-top: 15px
}

.ip-modal .ant-modal-content {
    padding: 0 30px 40px;
    text-align: left
}

.ip-modal .ant-modal-close {
    position: absolute;
    right: 16px;
    top: 16px
}

.ip-modal img {
    position: relative;
    margin: -40px auto 0;
    display: block;
    width: 109px;
    height: 100px
}

.ip-modal .access-img-wrap:before {
    content: "";
    display: table
}

.ip-modal .access-modal-list p {
    font-size: 16px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: #333;
    line-height: 25px;
    margin: 30px 0 0;
    text-align: left
}

@media screen and (max-width: 1080px) {
    .ip-modal .ant-modal-content {
        padding:0 20px 40px
    }

    .ip-modal .access-modal-list p {
        font-size: 14px;
        line-height: 20px
    }
}

.style_wallet_access_modal__36GQ0.ant-modal .ant-modal-content {
    padding: 0 30px 40px;
    text-align: left
}

.style_wallet_access_modal__36GQ0.ant-modal .ant-modal-close {
    position: absolute;
    right: 16px;
    top: 16px
}

.style_wallet_access_modal__36GQ0.ant-modal img {
    position: relative;
    margin: -40px auto 0;
    display: block;
    width: 109px;
    height: 100px
}

.style_wallet_access_modal__36GQ0.ant-modal .access-img-wrap:before {
    content: "";
    display: table
}

.style_wallet_access_modal__36GQ0.ant-modal .access-modal-list p {
    font-size: 16px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: #333;
    line-height: 25px;
    margin: 30px 0 0;
    text-align: left
}

@media screen and (max-width: 1080px) {
    .style_wallet_access_modal__36GQ0.ant-modal .ant-modal-content {
        padding:0 20px 40px
    }

    .style_wallet_access_modal__36GQ0.ant-modal .access-modal-list p {
        font-size: 14px;
        line-height: 20px
    }
}

.dragDown {
    display: inline-block;
    width: auto;
    padding-right: 25px;
    margin: 10px auto 0;
    background: url(https://sunswap.com/static/media/arr.de7575e8.svg) 100% no-repeat;
    cursor: pointer
}

.dragDown.no-bg {
    background: none;
    cursor: auto
}

.dragDown.default span {
    margin: 0
}

.dragDown img {
    width: 26px;
    height: 26px;
    vertical-align: middle
}

.dragDown span {
    vertical-align: middle;
    display: inline-block;
    margin: 0 0 0 5px
}

.ant-modal {
    max-width: 425px;
    width: 100%
}

.ant-modal.select-modal {
    width: 100%;
    max-width: 630px;
    box-shadow: 0 30px 300px 0 rgba(38,67,154,.5);
    border-radius: 50px;
    padding: 0
}

.ant-modal.select-modal.adjust {
    top: -25%
}

.ant-modal.select-modal .ant-modal-body {
    padding: 0;
    margin-top: 30px
}

.ant-modal.select-modal .ant-modal-body .itemList {
    height: 290px;
    overflow-y: auto;
    width: calc(100% + 20px);
    padding-right: 20px
}

.ant-modal.select-modal .ant-modal-body .itemList .a-center {
    display: flex;
    align-items: center
}

.ant-modal.select-modal .ant-modal-body .itemList .searchRes {
    flex-direction: column;
    display: flex
}

.ant-modal.select-modal .ant-modal-body .itemList .searchRes .item-content {
    line-height: 24px;
    display: block
}

.ant-modal.select-modal .ant-modal-body .itemList .balanceAndAddr {
    flex-direction: column;
    display: flex
}

.ant-modal.select-modal .ant-modal-body .itemList .balanceAndAddr p {
    display: inline;
    height: 15px
}

.ant-modal.select-modal .ant-modal-body .itemList .balanceAndAddr p:first-child {
    margin-top: -7px;
    font-family: AvenirNext-DemiBold;
    font-size: 14px;
    color: #333
}

.ant-modal.select-modal .ant-modal-body .itemList .balanceAndAddr p:nth-child(2) {
    font-family: AvenirNext-Medium;
    font-size: 12px;
    color: #999
}

.ant-modal.select-modal .select-ib {
    display: block
}

.ant-modal.select-modal .select-search {
    width: 100%;
    background: #fff;
    box-shadow: 0 10px 40px 0 rgba(21,55,156,.06);
    border-radius: 20px;
    height: 19px;
    line-height: 19px;
    padding: 25px 20px;
    font-family: AvenirNext-Regular;
    font-size: 14px;
    color: #333;
    border: none;
    background: url(https://sunswap.com/static/media/Search.9865425a.svg) 450px -20px no-repeat
}

.ant-modal.select-modal input.select-search::placeholder {
    font-family: AvenirNext-Regular;
    font-size: 14px;
    color: #999
}

.ant-modal.select-modal .title {
    margin: 20px 0 16px;
    padding: 0 20px;
    align-items: center
}

.ant-modal.select-modal .title .text {
    font-family: Avenir Next;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 19px;
    color: #333
}

.ant-modal.select-modal .title .sort {
    width: 17px;
    height: 15px;
    background: url(https://sunswap.com/static/media/sort_gray.81b901cc.svg) no-repeat;
    background-size: 100%;
    cursor: pointer
}

.ant-modal.select-modal .title .sort.active {
    background: url(https://sunswap.com/static/media/sort_active.d0a40b5b.svg) no-repeat;
    background-size: 100%
}

.ant-modal.select-modal .item {
    justify-content: space-between;
    height: 44px;
    line-height: 44px;
    padding: 0 20px;
    cursor: pointer
}

.ant-modal.select-modal .item.disabled {
    cursor: not-allowed
}

.ant-modal.select-modal .item>div:first-child {
    display: flex;
    align-items: center;
    min-width: 40%;
    white-space: nowrap
}

.ant-modal.select-modal .item>div:first-child p {
    line-height: 25px;
    text-align: left
}

.ant-modal.select-modal .item>div:first-child .solor-detail {
    margin-top: -10px
}

.ant-modal.select-modal .item>div:first-child .solor-detail span {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #999
}

.ant-modal.select-modal .item>div:first-child .solor-detail span:last-child {
    color: #5915e1;
    margin-left: 0
}

.ant-modal.select-modal .item>div:nth-child(2),.ant-modal.select-modal .item>div:nth-child(3) {
    width: 50%;
    text-align: right
}

.ant-modal.select-modal .item>div:nth-child(3) a {
    color: #5915e1
}

.ant-modal.select-modal .item:hover {
    background: #efefef;
    border-radius: 10px
}

.ant-modal.select-modal .item.gray {
    background: #cdcdcd
}

.ant-modal.select-modal .item.opac {
    background: rgba(0,0,0,.07);
    border-radius: 10px;
    opacity: .5
}

.ant-modal.select-modal .item img {
    width: 24px;
    height: 24px
}

.ant-modal.select-modal .item span {
    margin-left: 20px;
    font-family: AvenirNext-Medium;
    font-size: 14px;
    color: #333;
    vertical-align: middle;
    line-height: 20px
}

.ant-modal.select-modal .ant-modal-close-x {
    width: 16px;
    height: 16px;
    line-height: 16px;
    cursor: pointer
}

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

.ant-modal.select-modal .ant-modal-close-x .anticon svg {
    display: none
}

.ant-modal.select-modal .add-title {
    font-family: AvenirNext-DemiBold;
    font-size: 20px;
    color: #333
}

.ant-modal.select-modal .ques {
    margin-left: 10px;
    vertical-align: top
}

.no-token-fund {
    text-align: center;
    padding: 88px 0 50px;
    background: url(https://sunswap.com/static/media/no_token_found.e576bdac.svg) center 50px no-repeat;
    background-size: 34px 26px
}

.no-token-fund a {
    color: #5915e1;
    font-size: 14px
}

.list-switch {
    margin-top: 30px;
    background: #efefef;
    border-radius: 15px;
    height: 70px;
    align-items: center;
    padding: 0 24px
}

.list-switch .list-switch-name {
    display: flex;
    align-items: center
}

.list-switch .list-switch-name img {
    width: 24px;
    height: 24px;
    border-radius: 24px
}

.list-switch .list-switch-name span {
    font-family: Avenir Next;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 19px;
    margin-left: 10px;
    color: #333
}

.list-switch button.list-switch-btn {
    background: #5915e1;
    box-shadow: 0 10px 40px rgba(51,101,249,.2);
    border-radius: 10px;
    width: 97px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    padding: 9px 0;
    color: #fff;
    cursor: pointer
}

body .ant-modal.list-modal .ant-modal-content {
    padding: 30px 45px
}

body .ant-modal.list-modal .ant-modal-close {
    right: 45px
}

body .ant-modal.list-modal .ant-modal-body {
    margin-top: 0
}

body .ant-modal.list-modal .list-modal-header {
    display: flex;
    align-items: center
}

body .ant-modal.list-modal .list-modal-header img {
    width: 16.6px;
    cursor: pointer
}

body .ant-modal.list-modal .list-modal-header .add-title {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #333;
    margin-left: 10px
}

body .ant-modal.list-modal .list-add {
    margin-top: 20px;
    background: #efefef;
    border-radius: 10px;
    padding: 9px 18px
}

body .ant-modal.list-modal .list-add .list-input-line input {
    background: #efefef;
    border: none;
    padding: 5px;
    border-radius: 5px;
    font-family: Avenir Next;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    color: #666;
    box-shadow: none
}

body .ant-modal.list-modal .list-add .list-input-line .right button {
    background: #5915e1;
    box-shadow: 0 10px 40px rgba(51,101,249,.2);
    border-radius: 10px;
    min-width: 97px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    padding: 9px 0;
    color: #fff;
    cursor: pointer
}

body .ant-modal.list-modal .list-add-errTip {
    margin-top: 2px;
    text-align: left;
    padding-left: 20px;
    display: flex;
    align-items: center
}

body .ant-modal.list-modal .list-add-errTip .icon {
    color: #fff;
    background: #ff8e18;
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 14px;
    vertical-align: top;
    margin-right: 3px;
    text-align: center;
    line-height: 14px;
    font-size: 12px
}

body .ant-modal.list-modal .list-add-errTip .text {
    color: #ff8e18;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px
}

body .ant-modal.list-modal .list-list {
    margin-top: 10px;
    padding: 0 20px;
    height: 390px;
    overflow-y: scroll
}

body .ant-modal.list-modal .list-list li {
    padding: 10px 0;
    align-items: center
}

body .ant-modal.list-modal .list-list li:last-child {
    padding-bottom: 0
}

body .ant-modal.list-modal .list-list li .logo {
    margin-right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 24px
}

body .ant-modal.list-modal .list-list li .drop-parent {
    position: relative;
    align-items: center;
    margin-right: 14px
}

body .ant-modal.list-modal .list-list li .drop-parent .left {
    align-items: center;
    max-width: calc(100% - 15px)
}

body .ant-modal.list-modal .list-list li .drop-parent .drop-content {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #000;
    text-align: left;
    padding: 0 20px;
    z-index: 9;
    display: none
}

body .ant-modal.list-modal .list-list li .drop-parent .drop-content.active {
    display: block
}

body .ant-modal.list-modal .list-list li .drop-parent .drop-content .value {
    margin-left: 20px
}

body .ant-modal.list-modal .list-list li .drop-parent .ant-dropdown-link {
    width: 15px;
    height: 12px;
    background: url(https://sunswap.com/static/media/Triangle.d01de9f1.svg) no-repeat;
    background-size: 100%;
    min-width: 15px
}

body .ant-modal.list-modal .list-list li .right button {
    cursor: pointer;
    background: #5915e1;
    border-radius: 10px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    padding: 8px 0;
    width: 97px
}

body .ant-modal.list-modal .list-list li .right button.selected {
    background: #dbdbdb;
    color: #fff
}

body .ant-modal.list-modal .list-list .dropDown {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

body .ant-modal.list-modal .list-list .list-more {
    margin-top: 40px
}

body .ant-modal.list-modal .list-list .list-more a {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    color: #5915e1
}

body .ant-modal.list-modal .list-footer {
    margin-top: 12px
}

body .ant-modal.list-modal .list-footer a {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    color: #5915e1
}

body .ant-dropdown-menu {
    width: 142px;
    margin-top: 10px;
    padding: 7px 0 12px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 30px rgba(1,27,140,.159282)
}

body .ant-dropdown-menu .ant-dropdown-menu-item-group-title {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #666
}

body .ant-dropdown-menu .ant-dropdown-menu-item-group-title .value {
    margin-left: 10px
}

.ant-modal.list-remove-modal .ant-modal-content {
    padding: 20px
}

.ant-modal.list-remove-modal .ant-modal-body {
    margin-top: 0
}

.ant-modal.list-remove-modal .ant-modal-close {
    top: 20px;
    right: 20px
}

.ant-modal.list-remove-modal .title {
    margin: 0;
    font-weight: 600;
    color: #333
}

.ant-modal.list-remove-modal .tips,.ant-modal.list-remove-modal .title {
    font-family: PingFang SC;
    font-style: normal;
    font-size: 14px;
    line-height: 20px
}

.ant-modal.list-remove-modal .tips {
    margin-top: 4px;
    font-weight: 400;
    text-align: center;
    color: #999
}

.ant-modal.list-remove-modal .list-input {
    background: #efefef;
    border-radius: 10px;
    border: none;
    height: 32px;
    line-height: 32px;
    margin: 20px 0;
    padding: 0 10px;
    width: 100%
}

.ant-modal.list-remove-modal .btns {
    text-align: center
}

.ant-modal.list-remove-modal .btns button {
    width: 78px;
    height: 28px;
    border-radius: 10px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: #fff;
    padding: 5px 0;
    cursor: pointer
}

.ant-modal.list-remove-modal .btns button:first-child {
    background: #5915e1;
    mix-blend-mode: normal;
    margin-right: 20px
}

.ant-modal.list-remove-modal .btns button:first-child:disabled {
    background: rgba(89,21,225,.2);
    color: #5915e1
}

.ant-modal.list-remove-modal .btns button:nth-child(2) {
    background: #dbdbdb;
    mix-blend-mode: normal;
    border-radius: 10px
}

body .ant-modal.list-addtoken-modal .ant-modal-content {
    padding: 25px 37.5px
}

body .ant-modal.list-addtoken-modal .ant-modal-title {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    color: #333
}

body .ant-modal.list-addtoken-modal .tips {
    margin-top: 10px
}

body .ant-modal.list-addtoken-modal .tips .tips1 {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 17.5px;
    line-height: 30px;
    letter-spacing: .4px;
    color: #666;
    text-align: left
}

body .ant-modal.list-addtoken-modal .tips .tips1.yellow {
    color: #f5820d
}

body .ant-modal.list-addtoken-modal .tips b {
    font-weight: 600
}

body .ant-modal.list-addtoken-modal .token-info {
    margin-top: 25px;
    background: #fafafa;
    border-radius: 10px;
    align-items: center;
    padding: 15px
}

body .ant-modal.list-addtoken-modal .token-info .logo img {
    width: 30px;
    height: 30px
}

body .ant-modal.list-addtoken-modal .token-info .info {
    text-align: left;
    margin-left: 8px;
    word-break: break-all
}

body .ant-modal.list-addtoken-modal .token-info .info .symbol {
    font-family: Avenir Next;
    font-style: normal;
    font-weight: 500;
    font-size: 17.5px;
    line-height: 19px;
    color: #333
}

body .ant-modal.list-addtoken-modal .token-info .info .addr {
    font-family: Avenir Next;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 19px;
    color: #5915e1
}

body .ant-modal.list-addtoken-modal .token-info .info .addr .pointer {
    margin-left: 6px
}

body .ant-modal.list-addtoken-modal .check-box {
    text-align: left;
    margin-top: 25px
}

body .ant-modal.list-addtoken-modal .check-box .ant-checkbox-checked .ant-checkbox-inner {
    background-color: #09c44b;
    border-color: #09c44b
}

body .ant-modal.list-addtoken-modal .check-box span {
    color: #999;
    font-size: 17.5px;
    transform: translateY(-1px)
}

body .ant-modal.list-addtoken-modal .check-box.checked span {
    color: #333
}

body .ant-modal.list-addtoken-modal .btns {
    margin-top: 25px
}

body .ant-modal.list-addtoken-modal .btns button {
    margin: 0 auto;
    display: block;
    background: #dadada;
    mix-blend-mode: normal;
    border-radius: 10px;
    padding: 10px;
    width: 60%;
    color: #fff;
    font-size: 15px;
    cursor: pointer
}

body .ant-modal.list-addtoken-modal .btns .button-active {
    background: #5915e1
}

.deal-warning-modal .check-box span {
    transform: translateY(0)!important
}

.ant-notification-notice.swap-noti {
    position: absolute;
    right: 0;
    width: 420px
}

.ant-notification-notice.swap-noti .ant-notification-notice-message {
    display: none
}

.ant-notification-notice.swap-noti .list-update-modal .ant-modal-content {
    padding: 20px
}

.ant-notification-notice.swap-noti .list-update-modal .ant-modal-body {
    margin-top: 0
}

.ant-notification-notice.swap-noti .list-update-modal .ant-modal-close {
    top: 20px;
    right: 20px
}

.ant-notification-notice.swap-noti .list-update-modal .title {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    text-align: left;
    max-width: calc(100% - 20px);
    margin: 0 0 40px
}

.ant-notification-notice.swap-noti .list-update-modal .btns {
    text-align: center
}

.ant-notification-notice.swap-noti .list-update-modal .btns button {
    width: 78px;
    height: 28px;
    border-radius: 10px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: #fff;
    padding: 5px 0;
    cursor: pointer
}

.ant-notification-notice.swap-noti .list-update-modal .btns button:first-child {
    background: #5915e1;
    mix-blend-mode: normal;
    margin-right: 20px
}

.ant-notification-notice.swap-noti .list-update-modal .btns button:first-child:disabled {
    background: rgba(89,21,225,.2);
    color: #5915e1
}

.ant-notification-notice.swap-noti .list-update-modal .btns button:nth-child(2) {
    background: #dbdbdb;
    mix-blend-mode: normal;
    border-radius: 10px
}

.ant-notification-notice.swap-noti .list-update-modal .force-btns button {
    width: 100%;
    margin: 0!important
}

.ant-notification-notice.swap-noti .list-update-modal .detail {
    margin-bottom: 40px;
    max-height: 220px;
    overflow-y: auto;
    display: none
}

.ant-notification-notice.swap-noti .list-update-modal .detail li {
    margin-top: 10px;
    text-align: left;
    align-items: center
}

.ant-notification-notice.swap-noti .list-update-modal .detail li span {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    word-break: break-all
}

.ant-notification-notice.swap-noti .list-update-modal .detail li span.content {
    color: #333
}

.ant-notification-notice.swap-noti .list-update-modal .detail li span.content:before {
    content: ".";
    color: #5915e1;
    font-size: 24px;
    margin-right: 4px;
    vertical-align: top;
    height: 8px;
    line-height: 8px
}

.ant-notification-notice.swap-noti .list-update-modal .detail li span.value {
    color: #5915e1
}

.ant-notification-notice.swap-noti .list-update-modal .detail li span.value a {
    color: #5915e1;
    font-size: 14px;
    font-family: PingFang SC;
    word-break: break-word;
    white-space: normal
}

.ant-notification-notice.swap-noti .list-update-modal .detail li .icon {
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background: #5915e1;
    margin-right: 8px
}

@media screen and (max-width: 1000px) {
    body .ant-modal.list-modal .list-list li .drop-parent {
        max-width:65%
    }

    body .ant-modal.list-modal .list-list li .drop-parent .source {
        max-width: 80%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    body .ant-modal.list-modal .list-list,body .ant-modal.select-modal .ant-modal-body .itemList {
        min-height: unset
    }
}

@media screen and (max-width: 750px) {
    body .ant-modal.list-addtoken-modal .btns button {
        width:100%
    }
}

html body .ant-modal-body .action-line {
    margin-top: 25px;
    background: rgba(0,0,0,.03);
    border-radius: 5px;
    padding: 25px;
    margin-bottom: 30px
}

html body .ant-modal-body .action-line .al_item {
    display: flex;
    font-size: 0;
    justify-content: space-between
}

html body .ant-modal-body .action-line .al_item.error,html body .ant-modal-body .action-line .al_item .error {
    margin-bottom: 0
}

html body .ant-modal-body .action-line .al_item .al_number {
    color: #fff;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 25px;
    background: #c8c8c8;
    margin-top: 32px;
    margin-right: 15px;
    font-family: PingFangSC-Regular;
    font-size: 14px
}

html body .ant-modal-body .action-line .al_item .ant-spin-spinning.spiny {
    margin-top: 32px
}

html body .ant-modal-body .action-line .al_item .ant-spin-spinning.spiny .anticon {
    background: url(https://sunswap.com/static/media/loading.e1921e5f.svg) no-repeat;
    background-size: 25px 25px;
    width: 25px;
    height: 25px;
    display: inline-block;
    animation: loadingCircle 1s linear infinite
}

html body .ant-modal-body .action-line .al_item .ant-spin-spinning.spiny .anticon svg {
    display: none
}

html body .ant-modal-body .action-line .al_item .al_title {
    width: calc(100% - 40px);
    font-family: PingFangSC-Regular;
    font-size: 16.5px;
    color: #999;
    letter-spacing: 0;
    line-height: 25px;
    text-align: left
}

html body .ant-modal-body .action-line .al_item .al_number:after {
    display: block;
    content: ".";
    color: transparent;
    background: #d8d8d8;
    width: 1px;
    height: 54px;
    margin-left: 12px
}

html body .ant-modal-body .action-line .al_item .al_number:before {
    display: block;
    content: ".";
    color: transparent;
    background: #d8d8d8;
    width: 1px;
    height: 17px;
    margin-left: 12px;
    margin-top: -17px
}

html body .ant-modal-body .action-line .al_item .al_title {
    margin-top: 31px
}

html body .ant-modal-body .action-line .al_item:first-child .al_number {
    margin-top: 0
}

html body .ant-modal-body .action-line .al_item:first-child .al_number:before {
    display: none
}

html body .ant-modal-body .action-line .al_item:first-child .al_title,html body .ant-modal-body .action-line .al_item:first-child .ant-spin-spinning.spiny {
    margin-top: 0
}

html body .ant-modal-body .action-line .al_item:last-child .al_number:after {
    display: none
}

html body .ant-modal-body .action-line .al_item.pending .al_number,html body .ant-modal-body .action-line .al_item.pending .al_number:after,html body .ant-modal-body .action-line .al_item.start .al_number,html body .ant-modal-body .action-line .al_item.start .al_number:after {
    background: #5915e1
}

html body .ant-modal-body .action-line .al_item.pending .al_title,html body .ant-modal-body .action-line .al_item.start .al_title {
    color: #5915e1
}

html body .ant-modal-body .action-line .al_item.success .al_number {
    background: #16c378;
    color: transparent;
    background: url(https://sunswap.com/static/media/success.af41e847.svg) no-repeat;
    background-size: 25px 25px
}

html body .ant-modal-body .action-line .al_item.success .al_number:after {
    background: #16c378
}

html body .ant-modal-body .action-line .al_item.success .al_title {
    color: #16c378
}

html body .ant-modal-body .action-line .al_item.success+.al_item .al_number:before {
    background: #16c378
}

html body .ant-modal-body .action-line .al_item.error .al_number,html body .ant-modal-body .action-line .al_item.failed .al_number {
    background: #ff8e18;
    color: transparent;
    background: url(https://sunswap.com/static/media/failed.635fcb16.svg) no-repeat;
    background-size: 25px 25px
}

html body .ant-modal-body .action-line .al_item.error .al_title,html body .ant-modal-body .action-line .al_item.failed .al_title {
    color: #ff8e18
}

.unfinished-pop .ant-modal-content {
    padding: 50px 0 40px;
    border-radius: 20px
}

.unfinished-pop .ant-modal-content .title {
    margin: 0;
    padding-left: 0;
    text-align: center;
    font-size: 20px
}

.unfinished-pop .ant-modal-content .title p {
    font-size: 14px;
    margin-top: 20px
}

.unfinished-pop .ant-modal-content .btns {
    margin-top: 30px;
    text-align: center
}

.unfinished-pop .ant-modal-content .btns button {
    height: 40px;
    line-height: 40px;
    border: none;
    border-radius: 10px;
    width: 120px;
    margin: 0 10px;
    cursor: pointer
}

.unfinished-pop .ant-modal-content .btns button:first-child {
    background: rgba(89,21,225,.1);
    color: #b79cef
}

.unfinished-pop .ant-modal-content .btns button:nth-child(2) {
    background: #5915e1;
    color: #fff
}

@media screen and (max-width: 1000px) {
    .ant-modal.unfinished-pop {
        transform-origin:center!important
    }

    .unfinished-pop .ant-modal-content .btns button {
        margin-right: 20px
    }
}

.price-text.mini-red,.red {
    color: red
}

.pool-content {
    background: transparent
}

.pool-content .base-list {
    padding: 0
}

.pool-content .base-list .item {
    padding: 0;
    background: #fafafa;
    margin-top: 20px;
    border-radius: 20px
}

.pool-content .base-list .item:first-child {
    margin-top: 0
}

.pool-content .base-list .item .flex,.pool-content .base-list .item .flex .inline-flex {
    align-items: center
}

.pool-content .base-list .item .flex .logo {
    width: 25px;
    height: 25px;
    border: 1px solid #dbdbdb;
    border-radius: 25px
}

.pool-content .base-list .item .flex .logo:nth-child(2) {
    margin-left: -5px
}

.pool-content .base-list .item .flex .name {
    margin-left: 10px
}

.pool-content .base-list .item .flex .symbol {
    margin: 0
}

.pool-content .base-list .item .flex.line-name {
    height: 80px;
    background: #fff;
    padding: 20px;
    box-shadow: 0 10px 40px 0 rgba(21,55,156,.06);
    border-radius: 20px
}

.pool-content .base-list .item .flex.line-name .name {
    font-family: AvenirNext-Medium;
    font-size: 20px;
    color: #333
}

.pool-content .base-list .item .flex.line-name .link {
    margin-left: 10px;
    font-family: AvenirNext-Medium;
    font-size: 12px;
    display: block
}

.pool-content .base-list .item .flex.line-name .actions .link {
    font-size: 14px;
    margin: 0;
    padding: 0 20px;
    height: 27px;
    line-height: 27px
}

.pool-content .base-list .item .flex.line-name .actions .link:first-child {
    border-right: 1px solid #d8d8d8
}

.pool-content .base-list .item .flex.line-name .actions .link:last-child {
    padding-right: 0
}

.pool-content .base-list .item .flex.line-name .actions .link.disabled {
    color: #ccc;
    cursor: not-allowed
}

.pool-content .base-list .item .flex.line-name .actions .gray {
    border-right: 1px solid #d8d8d8;
    color: #dbdbdb;
    cursor: default
}

.pool-content .base-list .item .flex.line-name .actions .migrate {
    background: rgba(88,22,224,.1);
    border-radius: 13px;
    text-align: center;
    border-right: none!important
}

.pool-content .base-list .item .flex.line-name .actions .migrate:hover {
    background: #5915e1;
    color: #fff
}

.pool-content .base-list .item .line-value {
    padding: 20px
}

.pool-content .base-list .item .line-value .flex p {
    margin-bottom: 6px
}

.pool-content .base-list .item .line-value .flex p:first-of-type {
    font-family: AvenirNext-Regular;
    font-size: 14px;
    color: #333;
    height: 19px;
    line-height: 19px;
    word-break: break-word;
    margin-right: 10px
}

.pool-content .base-list .item .line-value .flex p:nth-of-type(2) {
    flex: 1 1;
    text-align: right
}

.pool-content .base-list .ant-pagination {
    margin-top: 0;
    background: #fff;
    border-top: none;
    padding: 16px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px
}

.pool-content .base-list a {
    font-size: 14px;
    color: #5915e1
}

.pool-content .base-list .ant-pagination>.ant-pagination-item {
    margin-left: 10px
}

.pool-content .base-list .ant-pagination .ant-pagination-item-1 {
    margin-left: 0
}

.pool-content .base-list .ant-pagination.mini .ant-pagination-item {
    border-radius: 5px;
    border: 1px solid #d8d8d8;
    color: #999
}

.pool-content .base-list .ant-pagination-item a {
    color: #999
}

.pool-content .base-list .ant-pagination-item-active a {
    background: rgba(72,80,229,.1);
    color: #5915e1
}

.pool-content .base-list .ant-pagination.mini .ant-pagination-next,.pool-content .base-list .ant-pagination.mini .ant-pagination-prev {
    min-width: 24px;
    height: 32px;
    margin: 0;
    line-height: 32px
}

.pool-content .err-list {
    color: #bbb;
    padding: 50px 0;
    text-align: center
}

.wallet-link {
    display: inline-flex;
    align-items: center;
    padding: 12px 30px;
    color: #5915e1!important;
    background: #c3a6fa;
    cursor: pointer;
    border-radius: 10px
}

.wallet-link>span {
    line-height: 16px;
    margin-left: 8px;
    margin-right: 38px;
    text-align: left
}

.wallet-link>img:first-child {
    width: 17px;
    height: 17px
}

.wallet-link>img:last-child {
    width: 14px;
    height: 8px
}

@media only screen and (min-device-width: 375px)and (max-device-height:667px)and (-webkit-device-pixel-ratio:2) {
    .pool-content .base-list .item .flex.line-name .name {
        white-space:nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        width: 130px;
        margin-right: -20px;
        margin-bottom: -6px;
        display: inline-block
    }
}

@media only screen and (min-device-width: 375px)and (max-device-height:812px)and (-webkit-device-pixel-ratio:3) {
    .pool-content .base-list .item .flex.line-name .name {
        white-space:nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        width: 130px;
        margin-right: -20px;
        margin-bottom: -6px;
        display: inline-block
    }
}

@media only screen and (min-device-width: 414px)and (max-device-height:736px)and (-webkit-device-pixel-ratio:3) {
    .pool-content .base-list .item .flex.line-name .name {
        white-space:nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        width: 160px;
        margin-right: -20px;
        margin-bottom: -6px;
        display: inline-block
    }
}

.action-content header {
    margin-bottom: 20px
}

.action-content header .pool-add-tool {
    width: 100%
}

.action-content header .pool-add-tool .ques {
    margin-right: 0
}

.action-content header .add-title {
    display: inline-block;
    vertical-align: middle;
    margin-left: 15px;
    font-family: AvenirNext-Medium;
    font-size: 16px;
    color: #333
}

.action-content header .return {
    width: 15px;
    cursor: pointer
}

.action-content header .return img {
    width: 100%
}

.action-content .first-pool-copy {
    margin: 30px 0
}

.action-content .token-sec {
    box-shadow: 0 10px 40px 0 rgba(21,55,156,.06);
    border-radius: 20px;
    justify-content: space-between;
    padding: 20px;
    font-family: AvenirNext-Regular;
    font-size: 14px;
    color: #666;
    background: #fff
}

.action-content .token-sec .input {
    width: 60%
}

.action-content .token-sec .input input {
    border: none;
    width: 86%;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    margin-left: -10px;
    font-family: AvenirNext-DemiBold;
    font-size: 20px;
    color: #333
}

.action-content .token-sec .input input:hover {
    border: none;
    box-shadow: none
}

.action-content .token-sec .input .link {
    background: #ff8e18;
    border-radius: 9px;
    height: 20px;
    padding: 0 13px;
    line-height: 20px;
    color: #fff;
    font-family: AvenirNext-Medium;
    margin-top: 5px;
    font-size: 12px;
    display: inline-block
}

.action-content .token-sec .select {
    text-align: right
}

.action-content .token-sec .dragDown {
    display: inline-flex;
    width: auto;
    padding-right: 25px;
    margin: 10px auto 0;
    background: url(https://sunswap.com/static/media/arr.de7575e8.svg) 100% no-repeat;
    cursor: pointer
}

.action-content .token-sec .dragDown.no-bg {
    background: none;
    cursor: auto
}

.action-content .token-sec .dragDown.default span {
    margin: 0
}

.action-content .token-sec .dragDown img {
    width: 26px;
    height: 26px
}

.action-content .token-sec .dragDown span {
    vertical-align: middle;
    display: inline-block;
    margin: 0 0 0 5px
}

.action-content .plusBtn {
    text-align: left;
    margin: 14.5px 0;
    padding: 0 20px
}

.action-content .plusBtn img {
    width: 18px;
    height: 18px
}

.action-content .action-ui-box {
    margin: 0 0 30px;
    background: #fff;
    box-shadow: 0 10px 40px 0 rgba(21,55,156,.06);
    border-radius: 20px;
    padding: 20px
}

.action-content .info-view {
    justify-content: flex-end;
    margin-top: 15px
}

.action-content .info-view a {
    color: #5915e1;
    font-size: 14px
}

.action-content .action-info .info-title {
    margin-top: 20px;
    padding: 0 20px;
    font-family: AvenirNext-Medium;
    font-size: 14px;
    color: #333
}

.action-content .action-info .info-title.pd0 {
    padding: 0;
    margin-top: 0
}

.action-content .action-info .info-title .yourPosi img {
    width: 20px;
    height: 20px
}

.action-content .action-info .info-title .yourPosi img:nth-child(2) {
    margin-left: -3px
}

.action-content .action-info .info-title .yourPosi span {
    vertical-align: middle
}

.action-content .action-info .info-title .yourPosi span:nth-child(3) {
    margin-left: 7px
}

.action-content .action-info .info-detail {
    margin-top: 14px;
    padding: 20px;
    background: #fafafa;
    border-radius: 20px;
    justify-content: space-between;
    font-family: AvenirNext-Regular;
    font-size: 14px;
    color: #666
}

.action-content .action-info .info-detail div {
    width: 33%;
    display: inline-block
}

.action-content .action-info .info-detail div.d8line {
    width: 1px;
    height: 27px;
    background: #d8d8d8
}

.action-content .action-info .info-detail div:nth-child(3) {
    text-align: center
}

.action-content .action-info .info-detail div:nth-child(5) {
    text-align: right
}

.action-content .action-info .info-detail div:last-child {
    border-right: none
}

.action-content .action-info .info-detail div p {
    font-family: AvenirNext-Regular;
    font-size: 14px;
    color: #666
}

.action-content .action-info .info-detail div p .unit {
    margin: 0 5px
}

.action-content .action-info .info-detail div p:nth-child(2),.action-content .action-info .schedule {
    margin-top: 5px
}

.action-content .action-info .schedule .num {
    font-family: AvenirNext-DemiBold;
    font-size: 40px;
    color: #333
}

.action-content .action-info .schedule-key {
    margin-top: 30px
}

.action-content .action-btns {
    margin-top: 25px
}

.action-content .action-btns button {
    margin-top: 15px
}

.action-content .convert {
    margin: 40px 0 0;
    justify-content: space-between
}

.action-content .convert img {
    width: 16px;
    height: 16px
}

.action-content .convert span {
    vertical-align: middle;
    margin-left: 5px
}

.action-content .convert p {
    text-align: center
}

.action-content .convert .token1 p:first-child {
    text-align: left
}

.action-content .convert .token2 p:first-child {
    text-align: right
}

.action-content .convert .convert-info {
    width: 50%
}

.action-content .convert .convert-info p span {
    margin-left: 0
}

.action-content .convert .convert-info p:first-child {
    border-bottom: 1px solid rgba(0,0,0,.1)
}

.action-content .convert .convert-info p:first-child .hook {
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-right: 1px solid rgba(0,0,0,.1);
    transform: rotate(-45deg);
    -webkit-transform-origin: right bottom;
    -moz-transform-origin: right bottom;
    -o-transform-origin: right bottom
}

.action-content .convert .convert-info p:nth-child(2) {
    border-top: 1px solid rgba(0,0,0,.1);
    margin-top: 7px
}

.action-content .convert .convert-info p:nth-child(2) .hook {
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    border-left: 1px solid rgba(0,0,0,.1);
    transform: rotate(-45deg);
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -o-transform-origin: left top
}

.ant-slider.super-slider .ant-slider-rail {
    background: rgba(0,0,0,.05);
    height: 10px;
    border-radius: 10px
}

.ant-slider.super-slider .ant-slider-track {
    background: #5915e1;
    height: 10px;
    border-radius: 10px 0 0 10px
}

.ant-slider.super-slider .ant-slider-handle {
    width: 14px;
    height: 20px;
    border: 6px solid #5915e1;
    box-shadow: 0 2px 20px 0 rgba(51,44,192,.2);
    cursor: pointer;
    border-radius: 5px;
    background: #fff
}

.ant-slider.super-slider .ant-slider-step {
    height: 10px
}

.ant-slider.super-slider:hover .ant-slider-rail {
    background: rgba(0,0,0,.05);
    height: 10px;
    border-radius: 10px
}

.ant-slider.super-slider:hover .ant-slider-track {
    background: #5915e1;
    height: 10px;
    border-radius: 10px 0 0 10px
}

.ant-slider.super-slider:hover .ant-slider-handle {
    width: 14px;
    height: 20px;
    border: 6px solid #5915e1;
    box-shadow: 0 2px 20px 0 rgba(51,44,192,.2);
    cursor: pointer;
    border-radius: 5px;
    background: #fff
}

.ant-slider.super-slider:hover .ant-slider-step {
    height: 10px
}

.input-max {
    align-items: center;
    margin-top: 4px;
    display: flex
}

.input-max .link {
    background: #ff8e18;
    border-radius: 9px;
    height: 20px;
    width: 42px;
    text-align: center;
    line-height: 20px;
    color: #fff;
    font-family: AvenirNext-Medium;
    margin-top: 8px;
    font-size: 12px;
    margin-right: 20px
}

.input-max .link:hover {
    background: #cc7113!important;
    color: #fff
}

.dragDown span {
    font-family: AvenirNext-Medium;
    font-size: 20px;
    color: #333
}

.rate-title {
    float: none!important
}

@media screen and (max-width: 1000px) {
    .input-max {
        justify-content:flex-end
    }

    .input-max .link {
        width: 42px;
        text-align: center;
        padding: 0;
        margin-right: 10px
    }

    .action-content .token-sec .dragDown {
        padding-right: 12px
    }

    .action-content .token-sec .dragDown span {
        font-size: 18px
    }

    .token-sec-input {
        margin-top: 10px
    }

    body #root .swap-and-pool .main-content #swap-tab ::placeholder,html #root .swap-and-pool .main-content #swap-tab ::placeholder {
        font-size: 14px
    }

    .action-content .token-sec {
        padding: 10px 20px 8px
    }

    .action-content .token-sec .input input {
        font-size: 14px
    }

    .ant-modal.select-modal .item>div:nth-child(2),.ant-modal.select-modal .item>div:nth-child(3) {
        width: auto
    }
}

@media screen and (max-width: 750px) {
    .action-content .plusBtn img {
        width:20px;
        height: 20px
    }

    .action-content .first-pool-copy {
        padding: 10px 20px;
        background: hsla(0,0%,98%,.9);
        border-radius: 8px
    }
}

@media screen and (max-width: 500px) {
    .actions-new {
        display:block!important
    }

    .actions-new .link {
        height: 16px!important;
        line-height: 16px!important;
        padding: 0 5px!important;
        font-size: 12px!important
    }

    .actions-new>.link {
        height: 27px!important;
        line-height: 27px!important
    }

    .actions-new>.link:first-child {
        border: none!important
    }

    .pool-content .base-list .item .flex.line-name {
        padding: 10px
    }

    html .ant-modal.pool-modal .ant-modal-content {
        padding: 30px!important
    }

    .rate-title {
        display: block
    }
}

html .ant-modal.pool-modal.migrateModal {
    margin-top: -100px
}

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

html .ant-modal.pool-modal .ant-modal-content .common-tool {
    margin: 0;
    align-items: center
}

html .ant-modal.pool-modal .ant-modal-content .common-tool-title {
    color: #999;
    margin-right: 10px;
    width: calc(100% - 30px)
}

html .ant-modal.pool-modal .ant-modal-content .title {
    font-family: Helvetica Neue;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    color: #1a1a1a;
    height: 22px;
    margin-bottom: 25px;
    margin-top: 0!important;
    position: relative;
    text-align: center
}

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

html .ant-modal.pool-modal .ant-modal-content .desc {
    font-family: Avenir Next;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #666;
    height: 32px;
    margin-bottom: 27px;
    text-align: left
}

html .ant-modal.pool-modal .ant-modal-content .info {
    background: #fff;
    box-shadow: 0 3px 24px rgba(51,1,138,.0808293);
    border-radius: 20px;
    padding: 20px 25px;
    margin: 0 auto;
    text-align: left
}

html .ant-modal.pool-modal .ant-modal-content .info .lptokens {
    width: 100%;
    height: 24px;
    margin-bottom: 20px
}

html .ant-modal.pool-modal .ant-modal-content .info .lptokens .logo {
    width: 24px;
    height: 24px;
    border-radius: 50%
}

html .ant-modal.pool-modal .ant-modal-content .info .lptokens .logo:nth-child(2) {
    margin-left: -5px;
    margin-right: 8px
}

html .ant-modal.pool-modal .ant-modal-content .info .lptokens .name {
    font-family: Avenir Next;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #333;
    margin-right: 8px
}

html .ant-modal.pool-modal .ant-modal-content .info .box {
    width: 100%;
    height: 121px;
    background: #f7f7f7;
    mix-blend-mode: normal;
    border-radius: 16px;
    margin: 0 auto;
    position: relative;
    padding: 16px
}

html .ant-modal.pool-modal .ant-modal-content .info .box .line-box {
    position: absolute;
    top: 34px;
    left: 27px;
    opacity: .3;
    border: 1px dashed #727272;
    border-width: 0 0 1px 1px;
    width: 11px;
    height: 65px
}

html .ant-modal.pool-modal .ant-modal-content .info .box .line-box span {
    height: 32px;
    width: 11px;
    border-bottom: 1px dashed #727272;
    display: block
}

html .ant-modal.pool-modal .ant-modal-content .info .box .lp {
    width: 100%;
    height: 16px;
    margin-bottom: 22px
}

html .ant-modal.pool-modal .ant-modal-content .info .box .lp .logo {
    width: 16px;
    height: 16px;
    border-radius: 50%
}

html .ant-modal.pool-modal .ant-modal-content .info .box .lp .logo:nth-child(2) {
    margin-left: -3px;
    margin-right: 8px
}

html .ant-modal.pool-modal .ant-modal-content .info .box .lp .text {
    font-size: 14px;
    line-height: 16px;
    color: rgba(26,26,26,.6)
}

html .ant-modal.pool-modal .ant-modal-content .info .box .lp .amount {
    font-size: 14px;
    line-height: 16px;
    color: rgba(26,26,26,.6);
    float: right;
    padding: 0;
    border: 0
}

html .ant-modal.pool-modal .ant-modal-content .info .box .token {
    width: 100%;
    height: 14px;
    padding-left: 21px;
    margin-bottom: 18px
}

html .ant-modal.pool-modal .ant-modal-content .info .box .token .logo {
    width: 14px;
    height: 14px;
    margin-right: 6px
}

html .ant-modal.pool-modal .ant-modal-content .info .box .token .text {
    font-size: 14px;
    line-height: 14px;
    color: rgba(26,26,26,.6)
}

html .ant-modal.pool-modal .ant-modal-content .info .box .token .amount {
    font-size: 14px;
    line-height: 14px;
    color: rgba(26,26,26,.6);
    float: right;
    padding: 0;
    border: 0
}

html .ant-modal.pool-modal .ant-modal-content .advanced {
    width: 100%;
    height: 57px;
    background: url(https://sunswap.com/static/media/migrate-arrow.eba46030.svg) no-repeat 50%;
    padding: 20px 0
}

html .ant-modal.pool-modal .ant-modal-content .advanced span {
    float: right;
    color: #5915e1;
    font-size: 14px;
    cursor: pointer
}

html .ant-modal.pool-modal .ant-modal-content .version {
    width: 42px;
    height: 20px;
    background: #f7f7f7;
    border-radius: 9px;
    font-size: 14px;
    line-height: 22px;
    color: rgba(26,26,26,.6);
    display: inline-block;
    text-align: center
}

html .ant-modal.pool-modal .ant-modal-content .rate {
    line-height: 20px;
    color: #5915e1;
    font-family: PingFang SC;
    font-size: 14px;
    margin-top: 10px;
    width: 100%
}

html .ant-modal.pool-modal .ant-modal-content .rate em {
    width: 20px;
    height: 20px;
    background: url(https://sunswap.com/static/media/exchange-rate.ac67a06f.svg) no-repeat 100%;
    margin-left: 9px;
    display: inline-block;
    vertical-align: top
}

html .ant-modal.pool-modal .ant-modal-content .rate span {
    float: right;
    margin-right: 8px
}

html .ant-modal.pool-modal .ant-modal-content .rate .value {
    margin-right: 15px
}

html .ant-modal.pool-modal .ant-modal-content .refunded {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    width: 100%;
    line-height: 17px;
    color: #999;
    margin-top: 9px;
    overflow: hidden
}

html .ant-modal.pool-modal .ant-modal-content .btn {
    width: 100%;
    height: 50px;
    background: #5915e1;
    border-radius: 10px;
    font-family: PingFang SC;
    font-size: 16px;
    line-height: 50px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    margin-top: 20px
}

html .ant-modal.pool-modal .ant-modal-content .btn:hover {
    background: #4711b4
}

html .ant-modal.pool-modal .ant-modal-content .step2 {
    position: relative
}

html .ant-modal.pool-modal .ant-modal-content .step2 .version {
    background: rgba(89,21,225,.1);
    font-family: Avenir Next;
    color: #5915e1;
    position: absolute;
    top: 47px;
    left: 50%;
    margin-left: -79px
}

html .ant-modal.pool-modal .ant-modal-content .step2 .version:nth-child(2) {
    margin-left: 38px
}

html .ant-modal.pool-modal .ant-modal-content .step2 .line {
    width: 100%;
    height: 20px;
    background: url(https://sunswap.com/static/media/migrate-line.33552ec6.svg) no-repeat 50%;
    margin-bottom: 20px
}

.setting-modal .modal-content {
    margin-bottom: 30px
}

.setting-modal .modal-content .ques {
    margin-left: 10px
}

.setting-modal .modal-content>div:first-child {
    padding: 10px 0;
    font-family: AvenirNext-Medium;
    font-size: 14px;
    color: #333;
    justify-content: space-between
}

.setting-modal .modal-content .btns {
    padding: 20px 0
}

.setting-modal .modal-content .btns>div,.setting-modal .modal-content .btns button {
    width: 100px;
    margin-right: 30px;
    background: rgba(0,0,0,.15);
    border-radius: 10px;
    font-family: AvenirNext-Medium;
    font-size: 16px;
    color: #333
}

.setting-modal .modal-content .btns>div:last-child,.setting-modal .modal-content .btns button:last-child {
    margin-right: 0
}

.setting-modal .modal-content .btns>div.active,.setting-modal .modal-content .btns button.active {
    background: #5915e1;
    color: #fff
}

.setting-modal .modal-content .info {
    margin-bottom: 10px;
    color: #ff8e18
}

.setting-modal .modal-content .dead-line>div:first-child {
    padding: 10px 0;
    font-family: AvenirNext-Medium;
    font-size: 14px;
    color: #333;
    justify-content: space-between
}

.setting-modal .modal-content .dead-line .ant-input {
    width: 100px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 10px;
    margin-right: 10px;
    height: 40px;
    font-family: AvenirNext-Medium;
    font-size: 16px;
    color: #333;
    text-align: center
}

.setting-modal .modal-content .dead-line .minutes {
    line-height: 40px;
    font-family: AvenirNext-Medium;
    font-size: 14px;
    color: #333
}

.setting-modal .single.blue {
    width: 100%;
    height: 70px;
    line-height: 70px;
    background: #5915e1;
    box-shadow: 0 2px 20px 0 hsla(0,0%,80.8%,.2);
    border-radius: 20px;
    font-family: AvenirNext-Medium;
    font-size: 16px;
    color: #fff
}

.setting-modal .slippage-input .ant-input-affix-wrapper {
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 10px
}

.setting-modal .slippage-input .ant-input-affix-wrapper input {
    font-family: AvenirNext-Medium;
    font-size: 16px;
    color: #333;
    text-align: right
}

@media screen and (max-width: 1000px) {
    .modal-content .btns button {
        margin-right:20px
    }
}

.swap-content {
    background: transparent
}

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

.swap-content .swap-block {
    background: #fff;
    box-shadow: 0 10px 40px 0 rgba(21,55,156,.06);
    border-radius: 20px;
    padding: 20px;
    position: relative;
    z-index: 2
}

.swap-content .swap-block .left-block {
    font-family: AvenirNext-Regular;
    font-size: 14px;
    color: #666;
    width: 268px
}

.swap-content .swap-block .left-block .input-number {
    margin-top: 8px
}

.swap-content .swap-block .left-block .input-number input {
    width: 100%;
    border: none;
    font-family: AvenirNext-DemiBold;
    font-size: 20px;
    color: #333
}

.swap-content .swap-block .right-block {
    text-align: right
}

.swap-content .swap-block .right-block .link {
    background: #ff8e18;
    border-radius: 9px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-family: AvenirNext-Medium;
    margin-top: 13px;
    font-size: 12px;
    margin-right: 20px;
    min-width: 40px;
    text-align: center;
    width: 45px;
    display: inline-block
}

.swap-content .swap-block .right-block .link:hover {
    background: #cc7113
}

.swap-content .swap-block .right-block .dragDown {
    background-position: 100% 50%
}

.swap-content .swap-block .right-block .dragDown span {
    position: relative;
    top: 1px;
    line-height: 21px;
    font-family: AvenirNext-Medium;
    font-size: 20px;
    color: #333
}

.swap-content .rates {
    padding: 50px 20px 20px;
    background: #fafafa;
    border-radius: 20px;
    position: relative;
    margin-top: -30px;
    z-index: 1;
    align-items: center
}

.swap-content .rates .better-price {
    background: #5219de;
    color: #fff;
    padding: 4px 8px;
    font-family: Avenir Next;
    font-size: 15px;
    cursor: pointer;
    border-radius: 16px;
    display: inline-block;
    text-align: center;
    margin-right: 15px;
    min-width: 160px
}

.swap-content .rates .word-break {
    word-break: break-all
}

.swap-content .rates .swap-token {
    line-height: 1;
    margin-right: 4px
}

.swap-content .token-info img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin: 0 5px 0 0
}

.swap-content .token-info span {
    vertical-align: middle;
    display: inline-block;
    font-size: 14px
}

.swap-content .token-info .trx {
    color: #b7b7b7;
    position: relative;
    top: 1px
}

.swap-content .token-info a {
    color: #5915e1
}

.swap-content .token-info .token-pairs>div,.swap-content .token-info .token-pairs>div .typo-text-link {
    display: flex;
    align-items: center
}

.swap-content .token-info .token-pairs>div .typo-text-link>span {
    position: relative;
    top: 1px
}

.swap-content .slippage {
    color: #333
}

.swap-content .setting {
    padding: 20px 20px 14px
}

.swap-content .setting .link {
    font-size: 13px
}

.swap-content .setting .arrDown {
    width: 15px
}

.swap-content .add-recipient-btn {
    text-align: right;
    padding: 20px
}

.swap-content .add-recipient {
    padding: 20px
}

.swap-content .add-recipient>img {
    width: 15px
}

.swap-content .add-recipient .link {
    font-family: AvenirNext-Medium;
    font-size: 14px;
    color: #ff8e18
}

.swap-content .recipient-list {
    background: #fff;
    box-shadow: 0 10px 40px 0 rgba(21,55,156,.06);
    border-radius: 20px;
    padding: 20px;
    font-family: AvenirNext-Regular;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px
}

.swap-content .recipient-list>div:first-child {
    display: flex;
    justify-content: space-between;
    font-family: AvenirNext-Regular;
    font-size: 14px;
    color: #666
}

.swap-content .recipient-list input {
    border: none;
    width: 100%;
    font-family: AvenirNext-DemiBold;
    font-size: 14px;
    color: #333;
    margin-top: 10px
}

.swap-content .recipient-list input::placeholder {
    font-family: AvenirNext-DemiBold;
    font-size: 14px!important;
    color: #999
}

.detail-item {
    padding: 10px 20px;
    font-family: AvenirNext-Regular;
    font-size: 14px;
    color: #333
}

.detail-item .green {
    color: #16c378
}

.detail-item .orange {
    color: #ff8e18
}

.detail-item .gray {
    color: #dbdbdb
}

.detail-item .normal {
    color: #333
}

.detail-item span:last-child {
    max-width: 230px;
    text-align: right;
    position: relative;
    top: 1px
}

.sparkline-content {
    display: flex
}

.sparkline-content .sparkline-wrap {
    flex: 1 1
}

.sparkline-content .sparkline-wrap svg {
    display: block
}

.welfare-modal {
    position: relative;
    width: 505px;
    height: 295px;
    padding-bottom: 0!important;
    border-radius: 15px;
    background: url(https://sunswap.com/static/media/modal_bg.803f2d25.svg) 0 0 no-repeat;
    background-size: 100%;
    transform: scale(1)!important
}

.welfare-modal .ant-modal-content {
    background: transparent;
    box-shadow: none;
    height: 100%
}

.welfare-modal .welfare-close {
    display: inline-block;
    width: 19px;
    height: 19px;
    background: url(https://sunswap.com/static/media/close_white.fbf09f70.svg) 0 0 no-repeat;
    background-size: 100%
}

.welfare-modal .ant-modal-close {
    top: 14px;
    right: 14px
}

.welfare-modal .welfare-tip {
    position: absolute;
    top: -26px;
    right: 0
}

.welfare-modal .welfare-tip .ant-checkbox-wrapper:hover .ant-checkbox:after {
    visibility: hidden
}

.welfare-modal .welfare-tip .ant-checkbox-wrapper>span {
    font-family: PingFang SC;
    font-size: 12px;
    line-height: 17px;
    color: #fff
}

.welfare-modal .welfare-tip .ant-checkbox-input {
    width: 8px;
    height: 8px;
    top: 1px
}

.welfare-modal .welfare-tip .ant-checkbox-inner {
    width: 8px;
    height: 8px;
    border-radius: 1px;
    border: none;
    top: 1px
}

.welfare-modal .welfare-tip .ant-checkbox-checked .ant-checkbox-inner {
    background-color: #fff
}

.welfare-modal .welfare-tip .ant-checkbox-checked .ant-checkbox-inner:after {
    border-color: #1d205b;
    border-width: 1px;
    width: 3.714286px;
    height: 6.142857px;
    left: 18%
}

.welfare-modal .welfare-tip .ant-checkbox-checked+span {
    color: #fff
}

.welfare-modal .welfare-title {
    min-width: 120px;
    max-width: 166px;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    margin: 40px auto 10px;
    background: linear-gradient(77.69deg,#d142a0 20.06%,#ff8e87 75.18%);
    border-radius: 57.2559px;
    font-family: Avenir;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    text-align: center
}

.welfare-modal .welfare-title.title-ch {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 500;
    font-size: 19.6817px;
    letter-spacing: 4.47312px
}

.welfare-modal .welfare-img {
    margin: 10px auto
}

.welfare-modal .welfare-subtitle {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 14.314px;
    line-height: 20px;
    color: #fff;
    text-shadow: 0 .894624px 1.78925px #4f0694;
    margin-bottom: 14px
}

.welfare-modal .welfare-link {
    display: inline-block;
    width: 135px;
    height: 28px;
    line-height: 28px;
    margin-top: 10px;
    font-family: Avenir Next;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    color: #7a2ba8;
    background: #fff;
    mix-blend-mode: normal;
    border-radius: 36px
}

.welfare-modal .welfare-link.link-ch {
    font-family: PingFang SC;
    font-size: 14px
}

.welfare-modal .welfare-link:hover {
    color: #b345f3
}

.welfare-modal .welfare-later {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    color: hsla(0,0%,100%,.6);
    cursor: pointer;
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%)
}

.welfare-modal .welfare-later:hover {
    color: #fff
}

.deal-activity-modal {
    background: url(https://sunswap.com/static/media/deal-modal-bg.44690bda.png) 0 0 no-repeat;
    background-size: 100% 100%;
    transform: scale(1)!important
}

.deal-activity-modal .ant-modal-content {
    height: 100%;
    background: transparent;
    position: relative
}

.deal-activity-modal .deal-close {
    display: inline-block;
    width: 24px;
    height: 25px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAyCAYAAAAayliMAAADCklEQVRogdWaPW/aQBjHHypV3ShL93RHkdqPkI+AFPsbdKpQhrDyPejKaGyWgqVGZCMKtE2khqkkQSpRg5KwWEGysdR/B0JCeLHv8Z3BOekWhM3v99xzx72lABAR0UGhk32/827nzdvXmduO0/n4acuil1AA0O/adR6Ajadij27cckVvZQBQkit92z/LzsE/FtfxjYreToTESamX6zeHxfP6IN+YME8EuvVBfhl8UiQsvZ0Z3bjluSDb3a/XnwEQ/WkOi0ECm5QwtXbadXxjBZbd2D/L0s9SL4cVKbRJiRB4AMB5fZAnAPTQRKFlXRIi8ADQbw6LBIAqejsj8sBUwoxRQhQegH1S6uUeH0yCBAMeD1lDz16wSQkOvOf4hqW10wsCm5KICr9UYN0SMvArBdYlIQsfKBC3hAr4UIGJRIspET4BNLWWMLzr+IaltZbCCwlAcUtwIu86vmGuiDxLAIpaght5MyDybAFZiTjg2QKImE6q00ZKgCvh3fsYj3yRr7LhIwtwJeKClxJQKREVXloAAJmSEjLwSgRkJGThlQlMJbx7sc4KAOORD1l4APRK3QYT/UulOPtRRKmUgt9XEv1d8T+p2RI2zxGpG4NXJSEFX5GEVyGxscjPF8/xjWoEiWjwjLnNeORDdHTyHN+oMld2bHiLO5nT2mnOM1wJXuS50+mZlLAYz04kxLb2xTusBHwUCdfxDUtAIvbIy0iItIRAh2WupHbDRxJLa6U9jkTURX2UDhsGP/tulsSKjh2QNvFvbKkYnZZ32BjXsAsSzA2uatjWIrfDiowUYbWqt5jp9PSbUmljKdxer0bsE4mAjyLx7IAjCfARJOzT6RHT6Fb8kC9OeK7E1dGwSD9Kl4LHrGPD1I/Xdsxa1Y7TnjMOlLiwr/eo37wTOugW2TZXLhE8OtmHhV/b1LUHe8Hw6438osTx0qsG57W/eQBEByGXPdaR8yL19Mtl7urornhhD/YOC2fb088JAHVrg8XrNrde2dK/JwI+qKaAyYWnRqGT3Zq58PThhVx4+g/wifxwG8xizAAAAABJRU5ErkJggg==) 0 0 no-repeat;
    background-size: 100%
}

.deal-activity-modal .deal-title {
    font-size: 48px;
    font-family: PingFang-SC-Heavy,PingFang-SC;
    font-weight: 800;
    color: #fff;
    line-height: 48px;
    text-align: center;
    margin-top: 10px
}

.deal-activity-modal .deal-block {
    margin-top: 30px;
    text-align: left
}

.deal-activity-modal .deal-block.bottom-right {
    position: absolute;
    text-align: right;
    right: 20px;
    bottom: 0
}

.deal-activity-modal .deal-block.bottom-right>a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #30218a
}

.deal-activity-modal .deal-block.bottom-right>a>img {
    width: 15px;
    margin-left: 8px
}

.deal-activity-modal .deal-block>div:first-child {
    font-size: 28px;
    font-family: PingFang-SC-Heavy,PingFang-SC;
    font-weight: 800;
    color: #fff;
    line-height: 30px
}

.deal-activity-modal .deal-block>div:nth-child(2) {
    font-size: 22px;
    font-family: PingFang-SC-Regular,PingFang-SC;
    font-weight: 400;
    color: #fff;
    line-height: 22px;
    margin: 11px 0 22px
}

.deal-activity-modal .deal-block>a {
    display: inline-block;
    width: 148px;
    height: 40px;
    line-height: 40px;
    font-size: 22px;
    font-family: PingFang-SC-Bold,PingFang-SC;
    font-weight: 700;
    color: #8127be;
    background-color: #fff;
    border-radius: 20px;
    text-align: center
}

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

.new-recipient .trans-route {
    align-items: center;
    white-space: nowrap
}

.new-recipient .trans-route>span {
    display: flex;
    align-items: center
}

.new-recipient .trans-route img {
    margin-right: 4px;
    width: 20px;
    height: 20px;
    padding-top: 1px;
    position: relative;
    top: -1px
}

.tr-tooltip {
    max-width: none!important
}

.tr-tooltip .ant-tooltip-inner {
    background-color: rgba(0,0,0,.8)!important;
    padding: 20px;
    box-shadow: 0 20px 30px rgba(16,16,16,.06);
    border-radius: 10px
}

.tr-content .token {
    margin-right: 4px
}

.tr-content>p {
    display: flex;
    align-items: center;
    font-family: Avenir Next;
    font-size: 14px;
    line-height: 19px;
    color: #fff;
    margin-bottom: 16px
}

.tr-content>p>img {
    width: 16px;
    height: 16px;
    margin-right: 4px
}

.tr-content>div {
    min-width: 160px
}

.tr-content ul {
    margin-bottom: 0
}

.tr-content li,.tr-content ul {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.tr-content li {
    margin-right: 6px
}

.tr-content li:last-child {
    margin-right: 0
}

.tr-content li:last-child .tr-arrow {
    display: none
}

.tr-content li>img {
    width: 24px;
    height: 24px
}

.tr-content li>div {
    display: inline-flex;
    align-items: center;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    background-color: #fff;
    border-radius: 15px
}

.tr-content li>div>span {
    font-family: Avenir Next;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #333;
    white-space: nowrap
}

.tr-content li>div>img {
    width: 16px;
    height: 16px;
    margin-right: 5px
}

.tr-content .tr-arrow {
    display: inline-block;
    width: 6px;
    height: 10px;
    background: url(https://sunswap.com/static/media/arrow-right-white.a0305d9b.svg) 0 0 no-repeat;
    background-size: 100%;
    margin-left: 6px
}

.loading-section {
    display: flex;
    flex-direction: column
}

.loading-section .loading-spiny {
    margin-bottom: 12px
}

.loading-section .loading-text {
    font-family: Avenir Next;
    font-size: 16px;
    line-height: 22px;
    color: #999
}

.loading-spiny>span {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABoCAYAAAAHIFUvAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAmuSURBVHgB7Z1LbyPHEYBrXhwOxRFJiSINW7Y3WDswrDiHOJfEh+Tmaw7RArG9xiYBHOSYf7D/ILcANpAgyAMBpEPOOeVxCRLECeJkDRvetb1eeb18rERySM57xqyhuZBWFDnd06Kntf2d7MWI5HR1V1dVV1VLwDExxNLLzXdKdadaUEJfi4uqgv8uOUEoSX5oV8pjOPi7tw9XQuAECTgEBfHj+vtlW66VlMiWFz0rKUGohYH9q+5zFnAAdwLZhT2l2PzGZhxOV0NaUDBO69/3875auBIIrTBm8CAUGTgB1VQWYSSfMfnbmvlSDXIMNwJ5beOmmUUYM8a6r+1utcuQU7gQCKoqSdbWgBGqFK/hioMcwscK2f5WARiCltnrzVYJcggXAjH6Q+aDZ3gFFXIIFwLxjQ3mg2cXDnXIIVwIZJnzR0MQm7ncQ5jPPNwsr8B+MoB7sBtJIMUgSA2TWYJWkFn/ekl1TR3NyhNfMHHGFNfyRj1tvA9f84CCHzRaTdarJHQ1/w/WE13IGZlWCK4G9A/QJMWR9nT/9DMT3yFQa4ZeB+MV/7bj9/8xIPWUNfswiHSDqaUlyUEuvXXqWYer4vXmrS0S/0DGeGzjO/Vr8FERCLhX8hxgjN+XmX8mC6gEkiWmhKonqEu1n8EdI+3ffLv1RzuUjQgYgeH5Pdi+OALJGlNC7jUK6yjYNM9eh+tREEsjYIRjrI/zamwQ7yE/qr9negxiSrhSNPOFKlhwP83zO51fjG+VXyvNDqFowdWxP2wMISOzMxnfUY2gZEqmHYSe0g5GvQ+sLNFkYivravNmg0WQb4bbHd5Pa33tQqwUy7c2aYWCwnCGlyffJ2Xa0F+Ef2lfbTy5cZblt9VVej+HJ22ggEhl7W7fMVgKAyls6Kk3eBxIHFAcWCCkNDFzWQgD1ezzzWptkRneqYfV70JMZcES/ZE/7Oq6yvY4QdYkFMgg7fPJgA6hvWu0y3o8Npc9H9pGFJSk0e+s7GoK8avPmnqKSfmU+V4lrTo+DpFA1sOiEjH27XHFoT4m3WT3O43hRIVN1MJBYVyJiqWwoOpFN/l1rqMHY8UL/H7P+xM8PZZG7DZww2io4PtLn8P4W2yRvxfR8FolTVk7B3fqylR1En/yF+rHhj5M9fWcNcA6YKX4JyMRZz43UWk078XNiWFeGCnp9689AGLfiUgghqMtX6sUZN1oV0nJj1M5lK6nuDS+DpFAJMVjPnD4w4EjvMNnRqmiBgM4f7PXO3SZhxuKhsaVQHA1B21voVXoSqWJc7gCPwQdONm1qULoZ+G0mrmMKS0CB9vtPt1+eHXj/yeObofexCY2Ym0rtHQdNoEB05nEz/5xnOR3D+AQ/xudRVaHcVRW4asbH6xnTctBb/s3w8sdcaJ4Eiqz9/eHzw7wxA0omcWUhDBOk8lvolkpid4dbPd5VVXnTWZHdndy0FQsu+ayCCzGlNRyPPxt6zFm5xoXEWaRhV34fwEjt15QVNVYloNYlmBybl1QnQDNZdoEB4FAIBAIBAKBQHDhWOqHTJPZnn/g9O3Bji9CHufHXIEcTwKb54FLyTFmeeS0/ubw1CWBB04J5Grzv2tB/Fg5Tfp/Uvet6db+Ad1hjOA0JwRyrfpRNVCl1EnQMwrgDHlpXZF3Hggk6xmHEMpycCv4IXyc1DZ+DJeCv4AUPPxMIhBMEdWdsAoZIcnTfZTAwKthKubDRUfzVH6yTxR9d2lKZhrwS0FwAqwW0OvlzXkVYJi1iQvhDfPT+qyRgcwygRq/FGcDCBJwbD0oLm3jgXWZr1Y+STSUrFkRUXnZMkiy2S86JJoHy/1wMstxiW15QeSXxAoButINVPly2uThtKglW+QLTyiMHeJxxYz5R6ZDwqrx4k3icUBnXGZZ3Zpg57P+mwdQFjIW5QND8lqQv3LWRsT+WOB4vsy6KD+vBfmrZufgly6x9hmALbMsyp8WY24LTx2mtfVq+17qpOtSuD7GJO5p6GQrXQHlMpLk6Q6b4sqLQpqxxQrhN63Hk9TaxMrConyaUuPjJAX5QhinwDFxu0pv3vhiNidO4resJ7qzQ78HplmWonxWBfkXHWw48AJYygiekT6EVvA2fPNUwvoJWxmFopp3a4qe3lnE5Om9wfaRONZlw1znJU0CNZYjBFY0oi3dEsxnoTeJwa4+hFqlVn5QadU/GgYVUHxx7iEQCAQCgUAgEAgEFwPmx63Hs+U7sBPNy84TnA2j3u/TkuhIXTceTtLGsxbJdbxCP7J/DV8Rh1dLyCSQ473f0zyPnYRs6389UcJwNtQCyXKf4J3W5cOLoMqmV3McFPvNw0QrVFrZY3xUAsEfgo34aVNQUY0F7b92eV0peK6xY66tz8vXxXfTvbsubYfrL609Ex5bvpXD+zuWgQVNcVhZX/Yc7SWWxIlyrK6wy/t9gvNIKwwEtQeq9LQXDswgFgh2dgZGqKrPTWI2DiyW+pH8DQrFwAsHCCAWiKmbzJKpMa+Ytkf6qsGJSHPtEmmJBtEXvAFvaqyb8W9tHzBN9j4vskxEkhINIoEcwUvsE6ldnamAzwNM/sgyEUlKNETpQCpuZJo0JCUahALZYe43FOWIg/ShbO8djNOn6hI2UpZC1uULTqt7Lv3kWZL1vUkqAogtHJZ3CibppxlDDRg1eLn5TulxN9K8eCPZ47BHPes+j1nem6Qi4EvtbG1oG9R939EvQFP0qnrbaIQVCFRc7jPtp4Fe19auKjeZtf6gfe/ppLuU+vuJN3VW/d/xhx4d1aiSs9Guxwsqy2ptYRuQWR34K5XbtawX2uN7Y2I0EPLusHdE8jyVlWVbz/Wy7iXOUKfq+46BPSzEJ3HSsOT4J+bdzcxC6TSGceSn6jucZLYXld68hOpFUP/AZVfHLYK2jiTLDaMIDia2SYeMLMt9xgT0Dwcti1QYSKYZQ1rCgLNGH437tCeH36v+p7pMTS3D7f6zzSrsfw3+XPQ3tgseNo0GNnnPjI5wF8+Y2dV1e52tEW3ZwnW4Lr/f+OlW1mu8Wa2S84JJYC8pSRiC/eLwi4KUrZ3kc/udz+LpjLnkwSib9G/A91WdwZ3qpPcmrhqmkVbUmW9PzG7oAHu2GgWIx5AV2nsTV8UjGcu6kuP3fiQFQnO/4KrgRyC6y8QySvLEclwPyY1AsDMCMMD0tVwn63EjEOyMwCJkc3R0N9dFqlztITesUSZzNfKl3N/0w5VA0KyWun0qoWAw0+8/lVv/YwaXzcZIe7Pw1GmC2+5vaW+HQzWFK4OXth/ct+NDwYwrUXE9UhVsCYJxM7wdTtbGHo+3w30OEoa3Gz2+4tUAAAAASUVORK5CYII=) 0 0 no-repeat;
    background-size: 100%;
    animation: rotate 1s linear infinite
}

.loading-spiny>span>svg {
    display: none
}

.safe-amount-tip {
    font-family: Avenir Next;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    margin-top: 12.5px
}

.safe-amount-tip>em {
    font-style: normal;
    color: #5915e1;
    cursor: pointer
}

.safe-amount-tip b {
    font-weight: 600
}

.mobile-content .safe-amount-tip {
    padding: 10px 20px;
    background: hsla(0,0%,98%,.9);
    border-radius: 8px;
    font-size: 14px;
    line-height: 18px
}

.mobile-content .swap-content .setting .arrDown {
    width: 20px
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.jcc {
    justify-content: center!important
}

.tac {
    text-align: center!important
}

@media screen and (max-width: 1000px) {
    .swap-content .swap-block .right-block .dragDown span {
        top:0
    }

    .swap-content .swap-block .right-block .link {
        margin-top: 15px
    }

    .dragDown {
        margin: 10px 0
    }

    .flex-end {
        justify-content: flex-end
    }

    html .swap-content .swap-block .left-block .input-number {
        margin-top: 14px
    }

    html .swap-content .swap-block .left-block .input-number input {
        font-size: 14px
    }

    html .swap-content .swap-block .left-block .input-number input::placeholder {
        font-size: 14px!important
    }

    html .swap-content .swap-block {
        padding-bottom: 0
    }

    html .confirm-swap-modal .price,html .swap-content .rates {
        font-size: 12px
    }

    html .confirm-swap-modal .tokens .from-value,html .confirm-swap-modal .tokens .to-value {
        font-size: 14px
    }

    .detail-item div span:last-child {
        text-align: left
    }

    .ant-modal.welfare-modal {
        width: 90%!important;
        background-size: cover;
        background-position: 50%
    }

    .ant-modal.welfare-modal .welfare-img {
        width: 90%
    }
}

@media screen and (max-width: 800px) {
    .ant-modal.deal-activity-modal {
        position:relative;
        width: 85%!important;
        height: 500px!important;
        top: calc(50vh - 200px)
    }

    .ant-modal.deal-activity-modal .deal-title {
        font-size: 40px
    }

    .ant-modal.deal-activity-modal .deal-block>div:first-child {
        font-size: 20px
    }

    .ant-modal.deal-activity-modal .deal-block>div:nth-child(2) {
        font-size: 16px
    }

    .ant-modal.deal-activity-modal .deal-block>a {
        font-size: 14px
    }
}

@media screen and (max-width: 750px) {
    .new-recipient .trans-route img {
        width:22px;
        height: 22px
    }

    .sunswap-toast {
        padding: 0 40px;
        margin: 0 auto
    }

    .sunswap-toast .link {
        display: none!important
    }

    .sunswap-toast li span {
        line-height: 16px
    }
}

@media screen and (max-width: 500px) {
    .ant-modal.welfare-modal .welfare-subtitle {
        font-size:12px
    }

    .ant-modal.deal-activity-modal {
        height: 400px!important
    }

    .ant-modal.deal-activity-modal .deal-title {
        font-size: 30px
    }

    .ant-modal.deal-activity-modal .deal-block>div:first-child {
        font-size: 18px
    }

    .ant-modal.deal-activity-modal .deal-block>div:nth-child(2) {
        font-size: 14px
    }

    .ant-modal.deal-activity-modal .deal-block>a {
        font-size: 12px
    }

    .ant-modal.deal-activity-modal .deal-close {
        width: 13px;
        height: 14px;
        margin-left: 15px
    }

    .tr-content .token {
        display: none
    }

    .tr-content li:last-child>div>img {
        margin-right: 0
    }
}

.sunswap-version-switch {
    background: #fff;
    border-radius: 10px;
    padding: 4px;
    position: absolute;
    top: 80px;
    right: 90px;
    -webkit-user-select: none;
    user-select: none;
    width: 88px;
    height: 44px
}

.sunswap-version-switch.switch-top {
    top: 40px
}

.sunswap-version-switch .ant-dropdown-trigger {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: Avenir Next;
    font-size: 15px;
    line-height: 16px;
    color: #333;
    cursor: pointer;
    padding: 14px;
    white-space: nowrap
}

.sunswap-version-switch .ant-dropdown-trigger>span {
    display: inline-block;
    width: 11px;
    height: 7px;
    background: url(https://sunswap.com/static/media/select-arrow-down.10af4890.svg) 0 0 no-repeat;
    background-size: 100%;
    position: relative;
    top: -1px
}

.sunswap-version-switch .ant-dropdown-trigger>span>svg {
    display: none
}

.sunswap-version-switch .ant-dropdown {
    left: 0!important;
    top: 45px!important
}

.sunswap-version-switch .anticon-down {
    margin-left: 10px
}

.sunswap-version-switch .ant-dropdown-open .anticon-down {
    transform: rotate(180deg)!important
}

.sunswap-version-switch .ant-dropdown-menu {
    padding: 10px 0;
    width: 90px;
    border-radius: 10px
}

.sunswap-version-switch .ant-dropdown-menu .swapVersion {
    display: block;
    margin: 0 10px;
    line-height: 20px;
    padding: 10px;
    text-align: left
}

.sunswap-version-switch .ant-dropdown-menu .active {
    color: #dadada!important;
    background: none!important
}

.sunswap-version-switch .ant-dropdown-menu-item {
    padding: 0;
    line-height: 36px!important;
    font-family: Avenir Next;
    font-weight: 500;
    color: #333;
    text-align: center
}

.sunswap-version-switch .ant-dropdown-menu-item:hover {
    background: none
}

.sunswap-version-switch .ant-dropdown-menu-item:hover .swapVersion {
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-family: Avenir Next;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    background: linear-gradient(0deg,#5915e1,#5915e1),#c2c9d1;
    border-radius: 8px
}

.sunswap-version-switch .ant-dropdown-menu-title-content {
    margin: 0
}

.sunswap-version-switch .ant-select-dropdown {
    background-color: transparent;
    padding-top: 10px;
    padding-bottom: 0
}

.sunswap-version-switch .ant-select-dropdown>div {
    background: #fff;
    box-shadow: 0 20px 30px rgba(16,16,16,.06);
    border-radius: 10px;
    overflow: hidden
}

.sunswap-version-switch .ant-select-single.ant-select-open .ant-select-selection-item {
    opacity: 1
}

.ant-modal.modal-confirm-pop {
    transform-origin: 0!important;
    margin-left: calc(50% - 92.5px);
    top: calc(50vh - 220px)
}

.ant-modal.modal-confirm-pop .ant-modal-content {
    padding: 25px 25px 37.5px
}

.ant-modal.modal-confirm-pop .ant-modal-content .ant-modal-header {
    padding-bottom: 25px
}

.ant-modal.modal-confirm-pop .ant-modal-content .ant-modal-header .ant-modal-title {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 600;
    font-size: 17.5px;
    line-height: 25px;
    color: #333
}

.ant-modal.modal-confirm-pop .ant-modal-content section p {
    text-align: left;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 17.5px;
    line-height: 25px;
    letter-spacing: .3px;
    color: #666
}

.ant-modal.modal-confirm-pop .ant-modal-content section div {
    text-align: center
}

.ant-modal.modal-confirm-pop .ant-modal-content section div button {
    width: 280px;
    margin-top: 18.75px;
    background: linear-gradient(91.04deg,#5915e1 2.1%,#dd15e1 200.09%);
    border-radius: 10px;
    padding: 10px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 21.25px;
    color: #fff;
    cursor: pointer
}

.ant-modal.modal-confirm-pop .ant-modal-content section.continue-old {
    margin-top: 37.5px;
    border-top: 1px solid #f2f2f2;
    padding-top: 37.5px;
    text-align: left
}

.ant-modal.modal-confirm-pop .ant-modal-content section.continue-old p {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 17.5px;
    line-height: 25px;
    color: #999;
    display: inline-flex;
    justify-content: flex-start;
    margin-top: -3px
}

.ant-modal.modal-confirm-pop .ant-modal-content section.continue-old p:nth-child(2) {
    margin-top: 15px
}

.ant-modal.modal-confirm-pop .ant-modal-content section.continue-old p .checkbox {
    min-width: 15px;
    height: 15px;
    position: inline-block;
    margin-right: 10px;
    border: 1px solid #666;
    margin-top: 5px;
    border-radius: 2.5px;
    cursor: pointer
}

.ant-modal.modal-confirm-pop .ant-modal-content section.continue-old div button {
    background: #dadada;
    cursor: not-allowed
}

.ant-modal.modal-confirm-pop .ant-modal-content section.continue-old.active p {
    color: #333
}

.ant-modal.modal-confirm-pop .ant-modal-content section.continue-old.active .checkbox {
    background: url(https://sunswap.com/static/media/checkbox.c82eb42c.svg) no-repeat;
    background-size: 100%;
    border: none;
    margin-top: 6px
}

.ant-modal.modal-confirm-pop .ant-modal-content section.continue-old.active div button {
    background: #ded0f9;
    cursor: pointer;
    color: #5915e1
}

@media screen and (max-width: 1000px) {
    .sunswap-version-switch {
        top:190px;
        right: 10px;
        z-index: 1
    }

    .sunswap-version-switch.switch-top {
        top: 160px
    }

    .ant-modal.modal-confirm-pop {
        transform-origin: 0!important;
        top: calc(50vh - 190px);
        margin-left: calc(50% - 210px)
    }
}

@media screen and (max-width: 600px) {
    .sunswap-version-switch {
        right:20px
    }
}

@media screen and (max-width: 450px) {
    .ant-modal.modal-confirm-pop {
        max-width:none!important;
        width: 100%!important;
        margin-left: 10%!important
    }
}

.style_sun_guide__2cSHT {
    display: flex;
    margin: 40px auto 0;
    align-items: center;
    justify-content: center
}

@media(max-width: 1079px) {
    .style_sun_guide__2cSHT {
        margin:10px 15px 93px;
        align-items: flex-start
    }
}

.style_sun_guide_img__laoEN {
    width: 36px;
    transform: translateY(4px);
    margin-right: 10px
}

.style_sun_guide_text__1CBwR {
    height: 36px;
    background-color: #5915e1;
    border-radius: 10px;
    font-weight: 500;
    font-size: 14px;
    line-height: 36px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    color: #fff
}

@media(max-width: 1079px) {
    .style_sun_guide_text__1CBwR {
        font-size:12px;
        line-height: 20px;
        height: auto;
        padding: 10px;
        display: block
    }
}

.style_sun_guide__2cSHT a {
    color: #b482ff;
    text-decoration: underline;
    text-underline-offset: 3px;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none
}

.style_sun_guide__2cSHT a:hover {
    text-decoration: underline;
    color: #d9bfff
}

.style_sun_guide__2cSHT svg {
    cursor: pointer
}

/*# sourceMappingURL=12.8a82580f.chunk.css.map */