.tab-icon {
    width: 20px;
    display: inline-block;
    margin: 10px auto 0
}

.red {
    position: absolute;
    top: 8px;
    right: 4px;
    background: red;
    width: 18px;
    height: 18px;
    font-size: 12px;
    line-height: 18px;
    border-radius: 10px;
    color: #f0f8ff;
    text-align: center
}

.modal-header {
    text-align: center;
    border-bottom: 1px solid rgba(82, 82, 82, .418);
    position: relative
}

.modal-header h5 {
    font-size: 16px
}

.modal-header .close {
    position: absolute;
    top: 0;
    left: 0;
    line-height: 20px;
    width: 40px;
    height: 60px
}

.product-icon {
    width: 100%;
    height: 100%;
    text-align: center
}

.main, .wave {
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.main, .wave {
    width: 100px;
    height: 100px
}

.main {
    padding: 10px;
    margin: auto
}

.wave {
    border: 3px solid #fff;
    background: #3880ff;
    overflow: hidden;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.wave p {
    line-height: 60px;
    font-size: 18px;
    z-index: 100
}

.ww {
    width: 150px;
    height: 150px;
    background: rgba(71, 71, 71, .418);
    position: absolute;
    left: 50%;
    top: 36%;
    -webkit-transform: translate(-50%, -55%);
    transform: translate(-50%, -55%);
    border-radius: 40%
}

@-webkit-keyframes wave {
    0% {
        -webkit-transform: translate(-50%, -65%) rotate(0deg);
        transform: translate(-50%, -65%) rotate(0deg)
    }
    10% {
        -webkit-transform: translate(-50%, -71%) rotate(180deg);
        transform: translate(-50%, -71%) rotate(180deg)
    }
    20% {
        -webkit-transform: translate(-50%, -77%) rotate(1turn);
        transform: translate(-50%, -77%) rotate(1turn)
    }
    30% {
        -webkit-transform: translate(-50%, -83%) rotate(480deg);
        transform: translate(-50%, -83%) rotate(480deg)
    }
    40% {
        -webkit-transform: translate(-50%, -89%) rotate(600deg);
        transform: translate(-50%, -89%) rotate(600deg)
    }
    50% {
        -webkit-transform: translate(-50%, -95%) rotate(2turn);
        transform: translate(-50%, -95%) rotate(2turn)
    }
    60% {
        -webkit-transform: translate(-50%, -101%) rotate(840deg);
        transform: translate(-50%, -101%) rotate(840deg)
    }
    80% {
        -webkit-transform: translate(-50%, -107%) rotate(960deg);
        transform: translate(-50%, -107%) rotate(960deg)
    }
    90% {
        -webkit-transform: translate(-50%, -113%) rotate(3turn);
        transform: translate(-50%, -113%) rotate(3turn)
    }
    to {
        -webkit-transform: translate(-50%, -135%) rotate(1140deg);
        transform: translate(-50%, -135%) rotate(1140deg)
    }
}

@keyframes wave {
    0% {
        -webkit-transform: translate(-50%, -65%) rotate(0deg);
        transform: translate(-50%, -65%) rotate(0deg)
    }
    10% {
        -webkit-transform: translate(-50%, -71%) rotate(180deg);
        transform: translate(-50%, -71%) rotate(180deg)
    }
    20% {
        -webkit-transform: translate(-50%, -77%) rotate(1turn);
        transform: translate(-50%, -77%) rotate(1turn)
    }
    30% {
        -webkit-transform: translate(-50%, -83%) rotate(480deg);
        transform: translate(-50%, -83%) rotate(480deg)
    }
    40% {
        -webkit-transform: translate(-50%, -89%) rotate(600deg);
        transform: translate(-50%, -89%) rotate(600deg)
    }
    50% {
        -webkit-transform: translate(-50%, -95%) rotate(2turn);
        transform: translate(-50%, -95%) rotate(2turn)
    }
    60% {
        -webkit-transform: translate(-50%, -101%) rotate(840deg);
        transform: translate(-50%, -101%) rotate(840deg)
    }
    80% {
        -webkit-transform: translate(-50%, -107%) rotate(960deg);
        transform: translate(-50%, -107%) rotate(960deg)
    }
    90% {
        -webkit-transform: translate(-50%, -113%) rotate(3turn);
        transform: translate(-50%, -113%) rotate(3turn)
    }
    to {
        -webkit-transform: translate(-50%, -135%) rotate(1140deg);
        transform: translate(-50%, -135%) rotate(1140deg)
    }
}

@-webkit-keyframes top {
    0% {
        -webkit-transform: translateY(36%);
        transform: translateY(36%)
    }
    to {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

@keyframes top {
    0% {
        -webkit-transform: translateY(36%);
        transform: translateY(36%)
    }
    to {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

.k-header {
    width: 90%;
    height: auto;
    background: -webkit-gradient(linear, left top, right top, from(#d0ccc7), to(#e9e8e6));
    background: -webkit-linear-gradient(left, #d0ccc7, #e9e8e6);
    background: linear-gradient(90deg, #d0ccc7, #e9e8e6);
    border-radius: 10px;
    -webkit-box-shadow: -1px -1px 21px rgba(36, 36, 36, .4117647058823529);
    box-shadow: -1px -1px 21px rgba(36, 36, 36, .4117647058823529);
    padding: 10px;
    margin: 15px auto;
    color: #000302;
    -webkit-animation-name: shua;
    animation-name: shua;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}

.k-header .label {
    font-size: 12px;
    color: #5e605d;
    margin-bottom: 5px
}

.k-header .ba-r {
    background: red
}

.k-header .ba-g, .k-header .ba-r {
    color: #fff;
    padding: 0;
    border-radius: 3px;
    text-align: center
}

.k-header .ba-g {
    background: green
}

.k-header .c-r {
    color: red
}

.k-header .c-g {
    color: green
}

.k-header .title {
    font-size: 18px;
    font-weight: 600;
    vertical-align: center
}

.k-header .title .back {
    padding-top: 5px;
    line-height: 18px;
    margin-right: 20px;
    color: #000302
}

.k-header .icon {
    width: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
    font-size: 12px;
    padding: 0;
    border-radius: 3px;
    margin-top: -3px
}

.k-header .price {
    font-size: 24px;
    font-weight: 600
}

.marquee {
    width: 100%;
    overflow: hidden;
    padding: 4px 0;
    font-size: 12px;
    background: rgba(0, 0, 0, .233)
}

.kdata {
    width: 100%;
    height: auto;
    padding-bottom: 60px
}

.footer {
    width: 100%;
    position: relative;
    -webkit-animation-name: sou;
    animation-name: sou;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}

.footer span {
    width: 50%;
    display: inline-block;
    margin: 0
}

.modal-wrapper, .my-custom-class .modal-wrapper {
    background: rgba(34, 34, 34, .164)
}

.my-custom-class .modal-wrapper .ion-page {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.modal-box {
    width: 80%;
    background: #272727;
    height: auto;
    margin: 0 auto;
    color: #fff;
    border-radius: 10px;
    position: relative;
    padding: 0 15px
}

.modal-box .modal-header {
    text-align: center;
    border-bottom: 1px solid rgba(82, 82, 82, .418)
}

.modal-box .modal-header h5 {
    font-size: 16px
}

.modal-box .modal-header .close {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 0;
    width: 40px;
    height: 40px
}

.modal-box .modal-from {
    width: 100%;
    height: auto;
    border-bottom: 1px solid rgba(82, 82, 82, .418)
}

.modal-box .modal-from .label {
    color: #474747;
    line-height: 24px;
    font-size: 12px
}

.modal-box .modal-from .plan-box {
    width: 100%;
    height: 100px;
    position: relative;
    overflow-x: auto
}

.modal-box .modal-from .plan-box .scroll {
    width: auto;
    white-space: nowrap
}

.modal-box .modal-from .plan-box .scroll .box {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 80px;
    margin-right: 10px;
    background: #3b3b3b;
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
    overflow: hidden;
    width: 80px
}

.modal-box .modal-from .plan-box .scroll .box .top {
    height: 24px;
    line-height: 24px;
    color: hsla(0, 0%, 76.5%, .719);
    font-size: .8em
}

.modal-box .modal-from .plan-box .scroll .box .center {
    width: 100%;
    height: 32px;
    line-height: 32px;
    font-size: 1.5em
}

.modal-box .modal-from .plan-box .scroll .box .bottom {
    height: 24px;
    line-height: 24px;
    background: rgba(14, 54, 184, .548);
    color: #ffe600;
    font-size: .8em
}

.modal-box .modal-from .plan-box .scroll .box .se {
    position: absolute;
    background: rgba(14, 54, 184, .548);
    color: #ffe600;
    width: 45px;
    height: 25px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    padding-right: 2px;
    padding-top: 8px;
    right: -15px;
    top: -5px
}

.modal-box .modal-from .plan-box .scroll .box .se .yes {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.modal-box .modal-from .plan-box .scroll .select {
    border: 1px solid rgba(14, 54, 184, .548)
}

.modal-box .modal-from .money-box {
    width: 100%;
    height: 60px;
    padding: 10px 0;
    overflow-x: scroll;
    position: relative
}

.modal-box .modal-from .money-box .scroll {
    width: 450px;
    overflow-x: scroll
}

.modal-box .modal-from .money-box .scroll .money-left {
    display: inline-block;
    width: 65px;
    height: 30px;
    font-size: 12px;
    line-height: 30px;
    border-radius: 5px;
    text-align: center;
    background: #3b3b3b
}

.modal-box .modal-from .money-box .scroll .select {
    border: 1px solid rgba(14, 54, 184, .548)
}

.modal-box .modal-from .money-box .money-right {
    position: absolute;
    right: 0;
    top: 10px;
    width: 65px;
    height: 30px;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    background: #3b3b3b
}

.modal-box .modal-accounts {
    text-align: center
}

.modal-box .modal-accounts .label {
    color: #616161;
    line-height: 24px;
    font-size: 12px
}

.modal-box .modal-accounts .info {
    white-space: nowrap;
    font-size: 12px
}

.modal-box .modal-accounts .c-r {
    color: red
}

.modal-box .modal-accounts .c-g {
    color: green
}

.modal-box .modal-time {
    text-align: center
}

.modal-box .modal-time .label {
    color: #616161;
    line-height: 24px;
    font-size: 12px
}

.modal-box .modal-time .info {
    white-space: nowrap;
    font-size: 12px
}

.modal-box .modal-time .c-r {
    color: red
}

.modal-box .modal-time .c-g {
    color: green
}

.vessel {
    width: 100px;
    height: 100px;
    position: relative;
    text-align: center;
    margin: 20px auto
}

.input {
    background: rgba(0, 0, 0, .3);
    border-radius: 5px;
    font-size: 12px
}

.input .sc-ion-input-md-h {
    --padding-top: 7px;
    --padding-end: 0;
    --padding-bottom: 7px
}

@-webkit-keyframes shua {
    0% {
        opacity: 0;
        -webkit-transform: translate(-100%);
        transform: translate(-100%)
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes shua {
    0% {
        opacity: 0;
        -webkit-transform: translate(-100%);
        transform: translate(-100%)
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@-webkit-keyframes sou {
    0% {
        opacity: 0;
        -webkit-transform: translate(200%);
        transform: translate(200%)
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes sou {
    0% {
        opacity: 0;
        -webkit-transform: translate(200%);
        transform: translate(200%)
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

.btc-card {
    width: 100%;
    min-height: 100px;
    height: auto;
    background: -webkit-gradient(linear, left top, right bottom, from(#e4e4e4), color-stop(#f0f0f0), color-stop(#f6f6f6), color-stop(#ddd), color-stop(#f0f0f0), color-stop(#dfdfdf), to(#dbdbdb));
    background: -webkit-linear-gradient(left top, #e4e4e4, #f0f0f0, #f6f6f6, #ddd, #f0f0f0, #dfdfdf, #dbdbdb);
    background: linear-gradient(to right bottom, #e4e4e4, #f0f0f0, #f6f6f6, #ddd, #f0f0f0, #dfdfdf, #dbdbdb);
    border-radius: 10px;
    margin: 10px auto;
    padding: 20px;
    color: #141414;
    position: relative
}

.btc-card .bank-box {
    width: 100%;
    vertical-align: middle;
    margin: 8px 0
}

.btc-card .bank-box .left {
    display: inline-block;
    width: 50%;
    text-align: left
}

.btc-card .bank-box .b-right {
    display: inline-block;
    width: 50%;
    text-align: right
}

.btc-card .bank-box .number {
    letter-spacing: 5px
}

.btc-card .bank-box .number, .btc-card .bank-box .showNumber {
    display: inline-block;
    width: 25%;
    text-align: center;
    font-weight: 600
}

.btc-card .bank-box .showNumber {
    letter-spacing: 1px
}

.btc-card .bank-box .yinlian {
    position: absolute;
    right: 20px;
    top: 25px
}

.btc-card .bank-box p {
    margin: 0
}

.btc-card .bank-box .label {
    line-height: 26px;
    font-size: 12px;
    color: #141414
}

.btc-card .bank-box .text {
    font-size: 12px;
    font-weight: 600;
    color: #000
}

.bank-card {
    width: 90%;
    min-height: 100px;
    height: auto;
    background: -webkit-gradient(linear, left top, right bottom, from(#f6e190), color-stop(#fdeda7), color-stop(#edd075), to(#f8de83));
    background: -webkit-linear-gradient(left top, #f6e190, #fdeda7, #edd075, #f8de83);
    background: linear-gradient(to right bottom, #f6e190, #fdeda7, #edd075, #f8de83);
    border-radius: 10px;
    margin: 10px auto;
    padding: 20px;
    color: #141414;
    position: relative
}

.bank-card img {
    width: 50px
}

.bank-card .bank-box {
    width: 100%;
    vertical-align: middle;
    margin: 5px 0
}

.bank-card .bank-box .left {
    display: inline-block;
    width: 50%;
    text-align: left
}

.bank-card .bank-box .b-right {
    display: inline-block;
    width: 50%;
    text-align: right
}

.bank-card .bank-box .number {
    letter-spacing: 5px
}

.bank-card .bank-box .number, .bank-card .bank-box .showNumber {
    display: inline-block;
    width: 25%;
    text-align: center;
    font-weight: 600
}

.bank-card .bank-box .showNumber {
    letter-spacing: 1px
}

.bank-card .bank-box .yinlian {
    position: absolute;
    right: 20px;
    top: 25px
}

.bank-card .bank-box .xinpian {
    width: 40px;
    margin: 15px 2px
}

.bank-card .bank-box p {
    margin: 0
}

.bank-card .bank-box .label {
    line-height: 26px;
    font-size: 12px;
    color: #141414
}

.bank-card .bank-box .text {
    font-size: 12px;
    font-weight: 600;
    color: #000
}

.order-box {
    height: 75%
}

.card-wheader {
    width: 100%;
    height: auto;
    padding: 0;
    overflow: scroll
}

.card-wheader .car {
    width: 100%;
    min-height: 185px;
    height: auto;
    background: -webkit-gradient(linear, left top, right bottom, from(#ff533c), to(#ff9142));
    background: -webkit-linear-gradient(top left, #ff533c, #ff9142);
    background: linear-gradient(to bottom right, #ff533c, #ff9142);
    position: relative;
    border-radius: 10px;
    -webkit-box-shadow: -1px -1px 21px hsla(0, 0%, 43.9%, .4117647058823529);
    box-shadow: -1px -1px 21px hsla(0, 0%, 43.9%, .4117647058823529);
    padding: 10px
}

.card-wheader .car .car-number {
    font-size: 22px;
    text-align: left
}

.card-wheader .car .car-name {
    font-size: 14px;
    line-height: 30px;
    text-align: left;
    padding: 0;
    position: relative;
    height: 40px
}

.card-wheader .car .car-user {
    color: #fff;
    font-size: 12px;
    line-height: 30px;
    text-align: left
}

.card-wheader .car .car-mobile {
    color: #fff;
    font-size: 12px;
    line-height: 30px;
    text-align: right
}

.finish .finish-box, .pending .finish-box {
    width: 95%;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin: 5px 10px;
    border-radius: 10px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    background: -webkit-gradient(linear, left top, right top, from(#3f3f3f), to(#292929));
    background: -webkit-linear-gradient(left, #3f3f3f, #292929);
    background: linear-gradient(90deg, #3f3f3f, #292929);
    -webkit-box-shadow: 2px 3px 5px #292929;
    box-shadow: 2px 3px 5px #292929;
    overflow: hidden
}

.finish .finish-box .avatar, .pending .finish-box .avatar {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #0084ff;
    border-radius: 50%;
    font-size: 12px
}

.finish .finish-box .name, .pending .finish-box .name {
    font-size: 14px
}

.finish .finish-box .buy-p, .pending .finish-box .buy-p {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .637)
}

.finish .finish-box .buy-t, .finish .finish-box .profit, .pending .finish-box .buy-t, .pending .finish-box .profit {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .308);
    text-align: right
}

.finish .finish-box .sell-p, .pending .finish-box .sell-p {
    font-size: 14px;
    color: hsla(0, 0%, 100%, .637)
}

.finish .finish-box .max, .pending .finish-box .max {
    font-size: 18px
}

.finish .finish-box .bg-p, .pending .finish-box .bg-p {
    color: #9e9e9e
}

.finish .finish-box .bg-a, .pending .finish-box .bg-a {
    color: #1890ff
}

.finish .finish-box .bg-r, .pending .finish-box .bg-r {
    color: #e91ed8
}

.finish .finish-box .bg-t, .pending .finish-box .bg-t {
    color: #ff9800
}

.finish .finish-box .bg-e, .pending .finish-box .bg-e {
    color: #4caf50
}

.finish .finish-box .bg-f, .pending .finish-box .bg-f {
    color: #fa0c0c
}

.finish .finish-box .bp, .pending .finish-box .bp {
    display: inline-block;
    margin-right: 10px
}

.list {
    width: 100%;
    position: relative;
    color: #fff;
    border-bottom: 1px solid #4e4e4e
}

.list, .list .card-left {
    height: 50px;
    line-height: 50px
}

.list .card-left {
    width: 45%;
    float: left;
    padding: 10px 0
}

.list .card-right {
    line-height: 70px;
    width: 55%;
    height: 50px;
    text-align: right;
    float: left;
    overflow: hidden
}

.list .card-right .md {
    position: absolute;
    top: -10px;
    right: 0;
    overflow: hidden;
    height: 90px;
    width: 100%
}

.list .card-center {
    width: 50%;
    padding-right: 5px
}

.list .card-center, .list .card-right-min {
    line-height: 50px;
    height: 50px;
    text-align: right;
    float: left
}

.list .card-right-min {
    position: relative;
    width: 5%;
    overflow: hidden
}

.list .card-right-min .min-select {
    position: absolute;
    top: -10px;
    right: 0;
    overflow: hidden;
    height: 90px
}

.no-box[data-v-419b8d62] {
    width: 100%;
    height: 24px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center
}

.no-box .text[data-v-419b8d62] {
    width: 100%;
    overflow: hidden;
    font-size: 12px;
    line-height: 24px;
    white-space: nowrap;
    -webkit-animation: move-419b8d62 10s linear infinite;
    animation: move-419b8d62 10s linear infinite;
    margin: 0
}

@-webkit-keyframes move-419b8d62 {
    0% {
        -webkit-transform: translateX(500px);
        transform: translateX(500px)
    }
    to {
        -webkit-transform: translateX(-500px);
        transform: translateX(-500px)
    }
}

@keyframes move-419b8d62 {
    0% {
        -webkit-transform: translateX(500px);
        transform: translateX(500px)
    }
    to {
        -webkit-transform: translateX(-500px);
        transform: translateX(-500px)
    }
}

.a-header[data-v-8aae1df6] {
    width: 90%;
    height: auto;
    padding: 15px;
    margin: 15px auto;
    border-radius: 10px;
    background: -webkit-gradient(linear, left top, right top, from(#d0ccc7), to(#e9e8e6));
    background: -webkit-linear-gradient(left, #d0ccc7, #e9e8e6);
    background: linear-gradient(90deg, #d0ccc7, #e9e8e6);
    overflow-y: scroll;
    background-size: 100%;
    -webkit-box-shadow: 2px 2px 15px rgba(0, 0, 0, .849);
    box-shadow: 2px 2px 15px rgba(0, 0, 0, .849);
    position: relative
}

.a-header .chart-box[data-v-8aae1df6] {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%
}

.a-header .chart-box #asset-chart[data-v-8aae1df6] {
    width: 100%;
    height: 100%;
    min-height: 250px
}

.asset-data[data-v-8aae1df6] {
    width: 100%;
    height: auto;
    padding: 15px;
    background-size: 100% 100%
}

.asset-data .label[data-v-8aae1df6] {
    font-size: 14px;
    color: grey;
    margin-bottom: 5px
}

.asset-data .ba-r[data-v-8aae1df6] {
    background: red;
    color: #fff;
    padding: 0;
    border-radius: 3px;
    text-align: center
}

.asset-data .ba-g[data-v-8aae1df6] {
    background: green;
    color: #fff;
    padding: 0;
    border-radius: 3px;
    text-align: center
}

.asset-data .c-r[data-v-8aae1df6] {
    color: red
}

.asset-data .c-g[data-v-8aae1df6] {
    color: green
}

.asset-data .title[data-v-8aae1df6] {
    font-size: 28px;
    font-weight: 600
}

.asset-data .icon[data-v-8aae1df6] {
    width: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
    padding: 3px 5px;
    border-radius: 3px;
    background: #ff7b2f;
    margin-top: 38px
}

.asset-data .price[data-v-8aae1df6] {
    font-size: 34px;
    font-weight: 600
}

.asset-data .money[data-v-8aae1df6] {
    font-size: 34px
}

.asset-data .centertext[data-v-8aae1df6] {
    font-size: 20px
}

.marquee[data-v-8aae1df6] {
    width: 100%;
    overflow: hidden;
    padding: 4px 0;
    font-size: 12px;
    background: rgba(0, 0, 0, .233)
}

.kdata[data-v-8aae1df6] {
    width: 100%;
    height: auto;
    padding-bottom: 60px
}

.footer[data-v-8aae1df6] {
    width: 100%;
    position: relative
}

.footer span[data-v-8aae1df6] {
    width: 50%;
    display: inline-block;
    margin: 0
}

.i18n-dialog .modal-wrapper {
    height: 100vh !important
}

.login[data-v-ebea41ae] {
    width: 100vw;
    height: auto;
    padding-bottom: 50px
}

.login .login-box[data-v-ebea41ae] {
    width: 80%;
    text-align: center;
    margin: 60px auto 0;
    color: #fff;
    position: relative
}

.login .login-box .top[data-v-ebea41ae] {
    width: 100%
}

.login .login-box .top .left[data-v-ebea41ae] {
    display: inline-block;
    width: 50%;
    text-align: left
}

.login .login-box .top .left img[data-v-ebea41ae] {
    border-radius: 100px;
    width: 100%
}

.login .login-box .top .right[data-v-ebea41ae] {
    display: inline-block;
    width: 50%;
    text-align: right
}

.login .login-box .top .right .qut[data-v-ebea41ae] {
    position: absolute;
    top: 0;
    right: 0;
    text-align: right
}

.login .login-box .top .right .title[data-v-ebea41ae] {
    font-size: 18px;
    font-weight: 600
}

.login .login-box .top .right .description[data-v-ebea41ae] {
    font-size: 8px;
    opacity: .4
}

.login .login-box .top .right span[data-v-ebea41ae] {
    font-size: 12px;
    line-height: 18px
}

.login .login-box .top .right .a[data-v-ebea41ae] {
    color: #00c3ff
}

.login .login-box .from[data-v-ebea41ae] {
    margin-top: 50px;
    text-align: left
}

.login .login-box .from .lable[data-v-ebea41ae] {
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    color: #666
}

.login .login-box .from .input[data-v-ebea41ae] {
    background: rgba(81, 81, 81, .30196078431372547);
    border-radius: 5px;
    padding: 3px 0
}

.login .login-box .to-button[data-v-ebea41ae] {
    width: 100%;
    height: 50px;
    line-height: 50px;
    position: relative
}

.login .login-box .to-button .right[data-v-ebea41ae] {
    display: inline-block;
    width: 100%;
    text-align: right;
    color: #7495f8;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none
}

.login .login-box .to-button .left[data-v-ebea41ae] {
    display: inline-block;
    font-size: 14px;
    width: 100%;
    text-align: left;
    color: #7495f8;
    cursor: pointer
}

.register[data-v-910e48c4] {
    width: 100vw;
    height: auto;
    padding-bottom: 50px
}

.register .register-box[data-v-910e48c4] {
    width: 80%;
    text-align: center;
    margin: 80px auto 0;
    color: #fff;
    position: relative
}

.register .register-box .top[data-v-910e48c4] {
    width: 100%
}

.register .register-box .top .left[data-v-910e48c4] {
    display: inline-block;
    width: 50%;
    text-align: left
}

.register .register-box .top .left img[data-v-910e48c4] {
    border-radius: 5px;
    width: 100%
}

.register .register-box .top .right[data-v-910e48c4] {
    display: inline-block;
    width: 50%;
    text-align: right
}

.register .register-box .top .right .qut[data-v-910e48c4] {
    position: absolute;
    top: 0;
    right: 0;
    text-align: right
}

.register .register-box .top .right .title[data-v-910e48c4] {
    font-size: 18px;
    font-weight: 600
}

.register .register-box .top .right .description[data-v-910e48c4] {
    font-size: 8px;
    opacity: .4
}

.register .register-box .top .right span[data-v-910e48c4] {
    font-size: 12px;
    line-height: 18px
}

.register .register-box .top .right .a[data-v-910e48c4] {
    color: #00c3ff
}

.register .register-box .from[data-v-910e48c4] {
    margin-top: 50px;
    text-align: left
}

.register .register-box .from .lable[data-v-910e48c4] {
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    color: #666
}

.register .register-box .from .input[data-v-910e48c4] {
    background: rgba(81, 81, 81, .30196078431372547);
    border-radius: 5px;
    padding: 3px 0
}

.register .register-box .to-button[data-v-910e48c4] {
    width: 100%;
    height: 50px;
    line-height: 50px;
    position: relative
}

.register .register-box .to-button .right[data-v-910e48c4] {
    display: inline-block;
    width: 100%;
    text-align: right;
    color: #7495f8;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none
}

.register .register-box .to-button .left[data-v-910e48c4] {
    display: inline-block;
    font-size: 14px;
    width: 100%;
    text-align: left;
    color: #7495f8;
    cursor: pointer
}

.register .logo[data-v-910e48c4] {
    width: 100px;
    margin-bottom: 50px
}

.finish-box[data-v-da2a1188] {
    width: 95%;
    height: auto;
    margin: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    border-radius: 10px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    background: #292929;
    -webkit-box-shadow: 2px 3px 8px #000;
    box-shadow: 2px 3px 8px #000;
    overflow: hidden
}

.finish-box[data-v-da2a1188]:active {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#3f3f3f));
    background: -webkit-linear-gradient(top, #242424, #3f3f3f);
    background: linear-gradient(180deg, #242424, #3f3f3f)
}

.finish-box .r-price[data-v-da2a1188] {
    float: right;
    width: 50%;
    font-size: 12px;
    border-bottom: 1px solid #efefef;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    overflow: hidden
}

.finish-box .price[data-v-da2a1188] {
    float: right;
    width: 55%;
    overflow: hidden;
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px)
}

.finish-box .p-box[data-v-da2a1188] {
    height: 21px;
    border-bottom: 1px solid #e9c175
}

.finish-box .price-p[data-v-da2a1188] {
    margin: 0;
    display: inline-block;
    white-space: nowrap;
    -webkit-animation-name: sou-da2a1188;
    animation-name: sou-da2a1188;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-duration: 5s;
    animation-duration: 5s
}

.finish-box .icon[data-v-da2a1188] {
    width: 45%;
    height: 40px;
    display: inline-block;
    margin-right: 3px
}

.finish-box .name[data-v-da2a1188] {
    margin-top: 5px;
    font-size: 14px;
    text-align: left
}

.finish-box .name .name-b[data-v-da2a1188] {
    position: relative;
    display: inline-block;
    background: #efefef;
    color: #000;
    margin-right: 10px;
    padding: 0 5px;
    line-height: 19px;
    font-size: 12px
}

.finish-box .name .name-b[data-v-da2a1188]:after {
    content: "";
    width: 1px;
    height: 1px;
    border-bottom: 19px solid transparent;
    border-left: 14px solid #efefef;
    position: absolute;
    top: 0;
    right: -14px
}

.finish-box .name .name-x[data-v-da2a1188] {
    display: inline-block
}

.finish-box .name .name-g[data-v-da2a1188] {
    position: relative;
    display: inline-block;
    background: #e9c175;
    color: #000;
    font-size: 12px;
    margin-left: 10px;
    padding: 0 5px;
    line-height: 19px
}

.finish-box .name .name-g[data-v-da2a1188]:after {
    content: "";
    width: 1px;
    height: 1px;
    border-top: 19px solid transparent;
    border-right: 14px solid #e9c175;
    position: absolute;
    top: -1px;
    left: -14px
}

.finish-box .label[data-v-da2a1188] {
    float: left;
    width: 30%;
    position: relative;
    padding-right: 3px;
    font-size: 12px;
    line-height: 20px;
    color: #000;
    background: #e9c175;
    margin-right: 10px;
    margin-left: 3px;
    border-bottom: 1px solid #e9c175;
    border-radius: 3px;
    text-align: center
}

.finish-box .label[data-v-da2a1188]:after {
    border-right: 10px solid #e9c175;
    left: -10px
}

.finish-box .label[data-v-da2a1188]:after, .finish-box .label[data-v-da2a1188]:before {
    content: "";
    width: 1px;
    height: 1px;
    border-top: 21px solid transparent;
    position: absolute;
    top: -1px
}

.finish-box .label[data-v-da2a1188]:before {
    border-left: 11px solid #e9c175;
    right: -11px
}

.finish-box .label-b[data-v-da2a1188] {
    float: left;
    width: 30%;
    position: relative;
    padding-right: 3px;
    font-size: 12px;
    line-height: 20px;
    color: #000;
    background: #e9c175;
    margin-right: 10px;
    margin-left: 3px;
    border-bottom: 1px solid #e9c175;
    border-radius: 1px;
    text-align: center
}

.finish-box .label-b[data-v-da2a1188]:after {
    border-right: 11px solid #efefef;
    left: -11px
}

.finish-box .label-b[data-v-da2a1188]:after, .finish-box .label-b[data-v-da2a1188]:before {
    content: "";
    width: 1px;
    height: 1px;
    border-top: 21px solid transparent;
    position: absolute;
    top: -1px
}

.finish-box .label-b[data-v-da2a1188]:before {
    border-left: 11px solid #efefef;
    right: -11px
}

.finish-box .title-b[data-v-da2a1188] {
    line-height: 24px;
    text-align: left;
    font-size: 12px;
    color: hsla(0, 0%, 100%, .322)
}

.finish-box .linedata[data-v-da2a1188] {
    max-height: 40px;
    height: auto;
    width: 100%
}

.finish-box .linedata div[data-v-da2a1188] {
    width: 100%;
    height: 100%
}

.finish-box .bp[data-v-da2a1188] {
    display: inline-block;
    margin-right: 10px
}

.bg-r[data-v-da2a1188] {
    color: red
}

.bg-g[data-v-da2a1188] {
    color: #00fa00
}

.bap-r[data-v-da2a1188] {
    background: #8e0e00;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(192, 254, 205, .26666666666666666)), to(rgba(255, 0, 0, .7176470588235294)));
    background: -webkit-linear-gradient(bottom, rgba(192, 254, 205, .26666666666666666), rgba(255, 0, 0, .7176470588235294));
    background: linear-gradient(0deg, rgba(192, 254, 205, .26666666666666666), rgba(255, 0, 0, .7176470588235294))
}

.bap-g[data-v-da2a1188], .bap-r[data-v-da2a1188] {
    color: #fff;
    padding: 0;
    border-radius: 10px;
    text-align: center
}

.bap-g[data-v-da2a1188] {
    background: #8e0e00;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(192, 254, 205, .26666666666666666)), to(rgba(0, 255, 128, .7725490196078432)));
    background: -webkit-linear-gradient(bottom, rgba(192, 254, 205, .26666666666666666), rgba(0, 255, 128, .7725490196078432));
    background: linear-gradient(0deg, rgba(192, 254, 205, .26666666666666666), rgba(0, 255, 128, .7725490196078432))
}

.line[data-v-da2a1188] {
    min-width: 100px;
    min-height: 40px;
    width: 100%;
    height: 100%
}

@-webkit-keyframes sou-da2a1188 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
    to {
        -webkit-transform: translate(-100%);
        transform: translate(-100%)
    }
}

@keyframes sou-da2a1188 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
    to {
        -webkit-transform: translate(-100%);
        transform: translate(-100%)
    }
}

.finish-box[data-v-69fe8110] {
    width: 100%;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin: 5px 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-box-shadow: 0 2px 0 rgba(241, 203, 33, .027450980392156862);
    box-shadow: 0 2px 0 rgba(241, 203, 33, .027450980392156862);
    overflow: hidden
}

.finish-box[data-v-69fe8110]:active {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#3f3f3f));
    background: -webkit-linear-gradient(top, #242424, #3f3f3f);
    background: linear-gradient(180deg, #242424, #3f3f3f)
}

.finish-box .r-price[data-v-69fe8110] {
    font-size: 12px
}

.finish-box .icon[data-v-69fe8110] {
    width: 45%;
    height: 40px;
    display: inline-block;
    margin-right: 3px
}

.finish-box .name[data-v-69fe8110] {
    font-size: 14px
}

.finish-box .label[data-v-69fe8110] {
    padding-right: 3px;
    font-size: 12px;
    line-height: 20px;
    color: hsla(0, 0%, 100%, .322)
}

.finish-box .linedata[data-v-69fe8110] {
    max-height: 40px;
    height: auto;
    width: 100%
}

.finish-box .linedata div[data-v-69fe8110] {
    width: 100%;
    height: 100%
}

.finish-box .bp[data-v-69fe8110] {
    display: inline-block;
    margin-right: 10px
}

.bg-r[data-v-69fe8110] {
    color: red
}

.bg-g[data-v-69fe8110] {
    color: #00fa00
}

.bap-r[data-v-69fe8110] {
    background: #8e0e00;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(192, 254, 205, .26666666666666666)), to(rgba(255, 0, 0, .7176470588235294)));
    background: -webkit-linear-gradient(bottom, rgba(192, 254, 205, .26666666666666666), rgba(255, 0, 0, .7176470588235294));
    background: linear-gradient(0deg, rgba(192, 254, 205, .26666666666666666), rgba(255, 0, 0, .7176470588235294))
}

.bap-g[data-v-69fe8110], .bap-r[data-v-69fe8110] {
    color: #fff;
    padding: 0;
    border-radius: 10px;
    text-align: center
}

.bap-g[data-v-69fe8110] {
    background: #8e0e00;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(192, 254, 205, .26666666666666666)), to(rgba(0, 255, 128, .7725490196078432)));
    background: -webkit-linear-gradient(bottom, rgba(192, 254, 205, .26666666666666666), rgba(0, 255, 128, .7725490196078432));
    background: linear-gradient(0deg, rgba(192, 254, 205, .26666666666666666), rgba(0, 255, 128, .7725490196078432))
}

.col-th[data-v-19622b17] {
    width: 100%;
    height: 100%;
    margin: 5px auto
}

.nav-box[data-v-19622b17] {
    margin-top: 10px;
    line-height: 14px;
    font-size: 12px;
    text-align: center
}

.min-box[data-v-19622b17] {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    color: #fff;
    background: #141414
}

.min-box .icon[data-v-19622b17] {
    display: inline-block;
    height: 100%;
    width: 20%;
    padding-left: 3px
}

.min-box .icon img[data-v-19622b17] {
    width: 20px;
    margin-bottom: -3px
}

.min-box .min-nav-box[data-v-19622b17] {
    text-align: center;
    padding-left: 5px;
    display: inline-block;
    font-size: 12px;
    line-height: 16px
}

.modal-header[data-v-19622b17] {
    text-align: center;
    border-bottom: 1px solid rgba(82, 82, 82, .418);
    position: relative
}

.modal-header h5[data-v-19622b17] {
    font-size: 16px
}

.modal-header .close[data-v-19622b17] {
    position: absolute;
    right: 0;
    left: 0;
    line-height: 20px;
    width: 40px;
    height: 60px
}

.col-th[data-v-4d5fa6e4] {
    width: 100%;
    height: 100%;
    margin: 5px auto
}

.nav-box[data-v-4d5fa6e4] {
    margin-top: 10px;
    line-height: 14px;
    font-size: 12px;
    text-align: center
}

.modal-box[data-v-4d5fa6e4] {
    background: #141414
}

.min-box[data-v-4d5fa6e4] {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    color: #fff;
    background: #141414;
    border-radius: 0 10px 10px 0
}

.min-box .icon[data-v-4d5fa6e4] {
    display: inline-block;
    height: 100%;
    text-align: right;
    padding-left: 3px
}

.min-box .icon img[data-v-4d5fa6e4] {
    width: 20px;
    margin-bottom: -3px
}

.min-box .min-nav-box[data-v-4d5fa6e4] {
    text-align: center;
    padding-left: 5px;
    display: inline-block;
    font-size: 12px;
    line-height: 16px
}

.modal-header[data-v-4d5fa6e4] {
    text-align: center;
    border-bottom: 1px solid rgba(82, 82, 82, .418);
    position: relative
}

.modal-header h5[data-v-4d5fa6e4] {
    font-size: 16px
}

.modal-header .close[data-v-4d5fa6e4] {
    position: absolute;
    right: 0;
    left: 0;
    line-height: 20px;
    width: 40px;
    height: 60px
}

.news[data-v-42757218] {
    width: 100%;
    height: 250px;
    background: -webkit-gradient(linear, left top, right top, from(#242424), to(#414040));
    background: -webkit-linear-gradient(left, #242424, #414040);
    background: linear-gradient(90deg, #242424, #414040);
    padding: 10px 3%
}

.slides[data-v-42757218] {
    width: 94%;
    min-height: 100px;
    height: 230px;
    border-radius: 10px;
    overflow: hidden;
    background: -webkit-gradient(linear, left top, right top, from(#363636), to(#303030));
    background: -webkit-linear-gradient(left, #363636, #303030);
    background: linear-gradient(90deg, #363636, #303030)
}

.slides .jin-timeline_title a[data-v-42757218] {
    display: none
}

.marquee[data-v-42757218] {
    width: 100%;
    overflow: hidden;
    padding: 4px 0;
    font-size: 12px;
    background: rgba(0, 89, 255, .795)
}

.q-header[data-v-42757218] {
    width: 100%;
    min-height: 100px;
    height: auto;
    padding-top: 100px;
    background: #141414 url(../img/banner.5826a16f.jpg) no-repeat top;
    background-size: contain
}

.q-header .q-buttons[data-v-42757218] {
    width: 95%;
    height: auto;
    margin: 15px auto;
    padding: 0;
    background: #292929;
    border-radius: 10px;
    padding: 10px 0;
    line-height: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.q-header .q-buttons .col[data-v-42757218] {
    display: inline-block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 25%
}

.products[data-v-42757218] {
    width: 100%;
    height: 100%;
    position: relative;
    overflow-y: scroll
}

.products .product[data-v-42757218] {
    width: 100%
}

.products .product .col-th[data-v-42757218]:after {
    content: "";
    position: absolute;
    left: 0;
    top: -100px;
    background: #2d354e;
    width: 3px;
    height: 200px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.products .product .col[data-v-42757218] {
    display: inline-block;
    font-size: 10px;
    width: 100%;
    text-align: center;
    position: relative
}

.products .product .icon[data-v-42757218] {
    background: #ff3434;
    border-radius: 3px;
    font-size: 12px;
    line-height: 24px;
    height: 24px
}

.products .product .c-r[data-v-42757218] {
    color: red
}

.products .product .c-g[data-v-42757218] {
    color: green
}

.down-box {
    width: 24px;
    height: 16px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    display: inline-block
}

.down-box .scerll {
    width: 100%;
    height: auto;
    color: #fff
}

.scerll .time {
    width: 100%;
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    margin: 0
}

@-webkit-keyframes move {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes move {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.no-box[data-v-123fe521] {
    margin-top: 100px;
    width: 100%;
    height: 200px;
    text-align: center
}

.no-box img[data-v-123fe521] {
    width: 50%
}

.no-box p[data-v-123fe521] {
    margin-top: 0;
    font-size: 18px;
    font-weight: 700;
    color: hsla(0, 0%, 81.2%, .7215686274509804)
}

.nodata[data-v-123fe521] {
    display: none
}

.command[data-v-40245696] {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    vertical-align: -40%;
    margin-right: 4px
}

.icon-bottom[data-v-40245696], .icon-top[data-v-40245696] {
    background: #fff;
    background-size: 100%
}

.yo-scroll[data-v-40245696] {
    position: absolute;
    top: 1rem;
    right: 0;
    bottom: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    position: relative;
    left: 0;
    top: -1.5rem
}

.yo-scroll.touch .inner[data-v-40245696] {
    -webkit-transition-duration: 0ms;
    transition-duration: 0ms
}

.yo-scroll.down .down-tip[data-v-40245696] {
    font-size: 12px;
    color: #9e9e9e;
    display: block;
    text-align: center
}

.yo-scroll.up .up-tip[data-v-40245696] {
    display: block;
    color: #cecece;
    text-align: center
}

.yo-scroll.refresh .refresh-tip[data-v-40245696] {
    display: block;
    margin-top: .1rem;
    text-align: center;
    font-size: 12px
}

.yo-scroll .down-tip[data-v-40245696], .yo-scroll .refresh-tip[data-v-40245696], .yo-scroll .up-tip[data-v-40245696] {
    display: none
}

.yo-scroll .load-more[data-v-40245696] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 12px;
    line-height: 24px;
    color: #757575;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.label[data-v-db0b1d88] {
    color: #545451;
    line-height: 24px;
    font-size: 14px
}

.list-box[data-v-db0b1d88] {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: scroll
}

.o-header[data-v-db0b1d88] {
    width: 90%;
    height: auto;
    padding: 15px;
    margin: 15px auto;
    border-radius: 10px;
    background: -webkit-gradient(linear, left top, right bottom, from(#f6e190), color-stop(#fdeda7), color-stop(#edd075), to(#f8de83));
    background: -webkit-linear-gradient(left top, #f6e190, #fdeda7, #edd075, #f8de83);
    background: linear-gradient(to right bottom, #f6e190, #fdeda7, #edd075, #f8de83);
    overflow-y: scroll;
    position: relative;
    background-size: 100%;
    -webkit-box-shadow: 2px 2px 15px rgba(0, 0, 0, .849);
    box-shadow: 2px 2px 15px rgba(0, 0, 0, .849);
    color: #000302
}

.o-header .header-box[data-v-db0b1d88] {
    width: 100%;
    height: 100%;
    z-index: 10
}

.o-header .name[data-v-db0b1d88] {
    width: 100%;
    font-size: 20px;
    z-index: 10
}

.o-header .money-box .money[data-v-db0b1d88] {
    font-size: 26px;
    z-index: 10
}

.o-header .money-box .money-min[data-v-db0b1d88] {
    font-size: 14px;
    color: #000302;
    z-index: 10
}

.bg-r[data-v-db0b1d88] {
    color: red
}

.bg-g[data-v-db0b1d88] {
    color: green
}

.order-box[data-v-db0b1d88] {
    width: 100%;
    height: 100%;
    position: relative
}

.scroll-box[data-v-db0b1d88] {
    height: 90%;
    overflow-y: scroll
}

.finish[data-v-db0b1d88], .pending[data-v-db0b1d88] {
    width: 100%;
    height: auto;
    position: relative;
    overflow-y: scroll
}

.finish .finish-box[data-v-db0b1d88], .pending .finish-box[data-v-db0b1d88] {
    width: 90%;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin: 8px auto;
    border-radius: 10px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    background: -webkit-gradient(linear, left top, right top, from(#141414), to(#161616));
    background: -webkit-linear-gradient(left, #141414, #161616);
    background: linear-gradient(90deg, #141414, #161616);
    -webkit-box-shadow: 2px 3px 5px #000;
    box-shadow: 2px 3px 5px #000;
    overflow: hidden;
    padding: 5px
}

.finish .finish-box .avatar[data-v-db0b1d88], .pending .finish-box .avatar[data-v-db0b1d88] {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #0084ff;
    border-radius: 50%;
    font-size: 12px
}

.finish .finish-box .name[data-v-db0b1d88], .pending .finish-box .name[data-v-db0b1d88] {
    font-size: 18px
}

.finish .finish-box .buy-p[data-v-db0b1d88], .pending .finish-box .buy-p[data-v-db0b1d88] {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .637)
}

.finish .finish-box .buy-t[data-v-db0b1d88], .pending .finish-box .buy-t[data-v-db0b1d88] {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .308);
    text-align: right
}

.finish .finish-box .buy-time[data-v-db0b1d88], .pending .finish-box .buy-time[data-v-db0b1d88] {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .925);
    text-align: right;
    background: -webkit-gradient(linear, left top, right top, from(rgba(20, 20, 20, 0)), color-stop(rgba(233, 192, 116, .24705882352941178)), to(rgba(20, 20, 20, 0)));
    background: -webkit-linear-gradient(left, rgba(20, 20, 20, 0), rgba(233, 192, 116, .24705882352941178), rgba(20, 20, 20, 0));
    background: linear-gradient(90deg, rgba(20, 20, 20, 0), rgba(233, 192, 116, .24705882352941178), rgba(20, 20, 20, 0));
    margin-top: 5px;
    border-radius: 5px
}

.finish .finish-box .profit[data-v-db0b1d88], .pending .finish-box .profit[data-v-db0b1d88] {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .308);
    float: right
}

.finish .finish-box .sell-p[data-v-db0b1d88], .pending .finish-box .sell-p[data-v-db0b1d88] {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .637);
    text-align: right;
    float: right
}

.finish .finish-box .max[data-v-db0b1d88], .pending .finish-box .max[data-v-db0b1d88] {
    font-size: 18px
}

.finish .finish-box .bg-r[data-v-db0b1d88], .pending .finish-box .bg-r[data-v-db0b1d88] {
    color: red
}

.finish .finish-box .bg-g[data-v-db0b1d88], .pending .finish-box .bg-g[data-v-db0b1d88] {
    color: green
}

.finish .finish-box .bp[data-v-db0b1d88], .pending .finish-box .bp[data-v-db0b1d88] {
    display: inline-block;
    margin-right: 10px
}

.low[data-v-db0b1d88], .up[data-v-db0b1d88] {
    font-size: 12px
}

.emoji-picker[data-v-1cf20b20] {
    max-width: 600px;
    max-height: 200px;
    overflow-y: scroll;
    text-align: left
}

.emoji[data-v-1cf20b20] {
    color: #fff;
    font-size: 30px;
    cursor: pointer
}

.emoji[data-v-1cf20b20]:hover {
    background: rgba(24, 143, 255, .3)
}

.send-message[data-v-b27e5320] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #000;
    padding: 6px
}

.send-message .send-text[data-v-b27e5320] {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: hsla(0, 0%, 55.3%, .3);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px;
    font-size: 14px;
    text-align: left;
    max-height: 96px;
    margin-right: 5px;
    resize: none
}

.send-message .send-icon[data-v-b27e5320] {
    color: #fff;
    font-size: 28px
}

.send-message .image-upload[data-v-b27e5320] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0
}

.reSend {
    text-align: center;
    padding: 15px;
    vertical-align: middle
}

.message-item {
    position: relative;
    padding: 0 40px
}

.message-item .name {
    padding: 0 20px;
    font-size: 12px;
    color: #aaa
}

.message-item .datetime {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 12px;
    color: #5c5c5c;
    margin-left: 10px;
    white-space: nowrap
}

.message-item .status {
    margin-left: 8px;
    color: #b1b1b1
}

.message-item .text-message {
    margin: 8px 20px;
    padding: 8px 15px;
    background: #f7f8fa;
    color: #000;
    -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, .1);
    box-shadow: 1px 2px 1px rgba(0, 0, 0, .1);
    border-radius: 8px;
    display: inline-block;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    max-width: calc(100% - 100px);
    line-height: 1.5
}

.message-item .text-message .text {
    font-size: 15px;
    vertical-align: middle;
    text-align: left
}

.message-item .image-message {
    min-width: 150px;
    min-height: 100px;
    margin: 8px 20px;
    position: relative;
    background: -webkit-gradient(linear, left top, right top, from(#313131), to(#292929));
    background: -webkit-linear-gradient(left, #313131, #292929);
    background: linear-gradient(90deg, #313131, #292929);
    border-radius: 2px;
    max-width: calc(100% - 60px);
    display: inline-block;
    overflow: hidden;
    text-align: center;
    font-size: 0
}

.message-item .image-message .image {
    cursor: pointer;
    max-width: 200px;
    max-height: 400px
}

.message-item .image-message .image-info {
    position: absolute;
    font-size: 12px;
    color: #fff;
    bottom: 10px;
    right: 5px;
    background: rgba(0, 0, 0, .445);
    padding: 2px 8px;
    border-radius: 12px
}

.message-item .image-message .datetime {
    margin-left: 0;
    color: #fff
}

.message-item .avatar-r {
    position: absolute;
    right: 10px;
    top: 0
}

.message-item .avatar-l {
    position: absolute;
    left: 10px;
    top: 0
}

.message-item.right {
    text-align: right
}

.message-item.right .text-message {
    background: #a0deff;
    -webkit-box-shadow: 1px 1px 10px #313131;
    box-shadow: 1px 1px 10px #313131
}

.message-item.right .image-message {
    background: -webkit-gradient(linear, left top, right top, from(#313131), to(#292929));
    background: -webkit-linear-gradient(left, #313131, #292929);
    background: linear-gradient(90deg, #313131, #292929);
    -webkit-box-shadow: 1px 1px 1px #313131;
    box-shadow: 1px 1px 1px #313131
}

.message-item.right .datetime {
    color: grey
}

.message-menu {
    padding: 10px
}

.message-menu:hover {
    background: rgba(0, 162, 255, .2)
}

.img-class {
    background: #000
}

.img-box {
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.chats, .img-box, .img-box img {
    width: 100%
}

.chats {
    height: 100%;
    background: #242424;
    overflow-y: scroll;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.chats .messages {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow-x: hidden;
    overflow-y: scroll
}

.message-date {
    text-align: center;
    margin: 10px auto
}

.message-date span {
    background: rgba(61, 61, 61, .596078431372549);
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 12px
}

.header {
    text-align: center;
    width: 90%;
    min-height: 150px;
    height: 20%;
    margin: 15px auto;
    border-radius: 10px;
    overflow: hidden;
    position: relative
}

.header .header-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 150px;
    height: 100%;
    z-index: 10
}

.header .header-box .my-h-top {
    color: #000;
    height: 110px;
    padding: 15px;
    font-size: 12px;
    background: -webkit-gradient(linear, left top, right bottom, from(#e4e4e4), color-stop(#f0f0f0), color-stop(#f6f6f6), color-stop(#ddd), color-stop(#f0f0f0), color-stop(#dfdfdf), to(#dbdbdb));
    background: -webkit-linear-gradient(left top, #e4e4e4, #f0f0f0, #f6f6f6, #ddd, #f0f0f0, #dfdfdf, #dbdbdb);
    background: linear-gradient(to right bottom, #e4e4e4, #f0f0f0, #f6f6f6, #ddd, #f0f0f0, #dfdfdf, #dbdbdb)
}

.header .header-box .my-h-top .t-center {
    text-align: left;
    padding-left: 15px
}

.header .header-box .my-h-top .t-center .name {
    margin-bottom: 20px
}

.header .header-box .my-h-top .t-right .out-button {
    background: -webkit-gradient(linear, left top, right top, from(#141414), to(#353535));
    background: -webkit-linear-gradient(left, #141414, #353535);
    background: linear-gradient(90deg, #141414, #353535);
    color: #fff;
    padding: 3px 5px;
    border-radius: 10px;
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .7803921568627451);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .7803921568627451)
}

.header .header-box .my-h-bottom {
    height: auto;
    color: #fff;
    background: -webkit-gradient(linear, left top, right bottom, from(#1d1d1d), color-stop(#2f2f2f), color-stop(#1e1e1e), to(#434341));
    background: -webkit-linear-gradient(left top, #1d1d1d, #2f2f2f, #1e1e1e, #434341);
    background: linear-gradient(to right bottom, #1d1d1d, #2f2f2f, #1e1e1e, #434341);
    font-size: 12px;
    border-radius: 0 0 10px 10px
}

.header .header-box .my-h-bottom .b-left {
    text-align: left;
    padding: 10px
}

.header .header-box .my-h-bottom .b-left p {
    margin: 5px
}

.header .header-box .my-h-bottom .b-left .to {
    vertical-align: middle;
    line-height: 12px
}

.header .header-box .my-h-bottom .b-right {
    text-align: right;
    padding: 10px
}

.header .header-box .my-h-bottom .b-right .to {
    vertical-align: middle;
    line-height: 12px
}

.nav {
    height: 70%;
    width: 100%;
    margin: auto;
    margin-bottom: 15px;
    border-radius: 10px;
    overflow-y: scroll;
    position: relative
}

.nav .nav-box {
    margin-top: 10px;
    line-height: 14px;
    font-size: 12px;
    text-align: center
}

.nav .icon {
    font-size: 30px;
    text-align: center;
    line-height: 30px
}

.nav .icon img {
    width: 30px
}

.nav .label {
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    color: rgba(255, 248, 220, .616)
}

.col-th {
    width: 100%;
    height: 100%;
    margin: 5px auto
}

.col-th-max {
    width: 90%;
    height: 40px;
    margin: 5px auto;
    background: -webkit-gradient(linear, left top, right bottom, from(#f6e190), color-stop(#fdeda7), color-stop(#edd075), to(#f8de83));
    background: -webkit-linear-gradient(left top, #f6e190, #fdeda7, #edd075, #f8de83);
    background: linear-gradient(to right bottom, #f6e190, #fdeda7, #edd075, #f8de83);
    border-radius: 5px;
    color: #000;
    margin-bottom: 20px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.col-th-max p {
    text-align: left;
    font-size: 12px;
    line-height: 34px;
    padding-left: 20px;
    margin: 0;
    width: 100%
}

.col-th-max:active {
    background: -webkit-gradient(linear, left top, right bottom, from(#f5d865), color-stop(#f1da74), color-stop(#eec447), to(#f3ce4a));
    background: -webkit-linear-gradient(left top, #f5d865, #f1da74, #eec447, #f3ce4a);
    background: linear-gradient(to right bottom, #f5d865, #f1da74, #eec447, #f3ce4a)
}

.col-th-line {
    width: 90%;
    height: 28px;
    line-height: 28px;
    margin: 10px auto;
    position: relative
}

.col-th-line .col-left {
    display: inline-block;
    width: 80%;
    height: 100%;
    border-bottom: 1px solid #ffdea1;
    font-size: 12px
}

.col-th-line .col-right {
    display: inline-block;
    width: 20%;
    height: 100%;
    text-align: center;
    font-size: 12px;
    height: 14px;
    line-height: 14px;
    position: absolute;
    bottom: -1px;
    right: 0;
    color: #000;
    background: -webkit-gradient(linear, left top, right top, from(#ffdea1), to(#ffdea1));
    background: -webkit-linear-gradient(left, #ffdea1, #ffdea1);
    background: linear-gradient(90deg, #ffdea1, #ffdea1);
    border-radius: 20px 20px 20px 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.col-th-line:active .col-right {
    right: 20px
}

.repwd-box {
    width: 80%;
    text-align: center;
    margin: 20px auto 0;
    color: #fff;
    position: relative
}

.repwd-box .text-header {
    font-size: 14px;
    color: hsla(0, 0%, 82%, .959);
    margin-bottom: 15px
}

.repwd-box .text-header-f {
    font-size: 12px;
    color: hsla(0, 0%, 82%, .555)
}

.repwd-box .from {
    margin-top: 30px;
    text-align: left
}

.repwd-box .from .lable {
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    color: #666
}

.repwd-box .from .input {
    background: rgba(0, 0, 0, .3);
    border-radius: 5px;
    padding: 3px 0
}

.my-list-box {
    background: -webkit-gradient(linear, left top, right top, from(#383838), to(#292929));
    background: -webkit-linear-gradient(left, #383838, #292929);
    background: linear-gradient(90deg, #383838, #292929);
    width: 95%;
    margin: 10px auto;
    -webkit-box-shadow: 0 5px 10px #292929;
    box-shadow: 0 5px 10px #292929;
    border-radius: 5px;
    padding: 0 0 0 10px;
    position: relative;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.my-list-box:active {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: -webkit-gradient(linear, left top, right top, from(#313131), to(#292929));
    background: -webkit-linear-gradient(left, #313131, #292929);
    background: linear-gradient(90deg, #313131, #292929)
}

.my-list-box .list-icon {
    line-height: 45px;
    width: 35px
}

.my-list-box .list-icon img {
    margin-top: 3px
}

.my-list-box .list-text {
    font-size: 12px;
    line-height: 40px;
    margin: 0;
    padding-left: 10px
}

.out-text {
    padding: 10px;
    text-align: center;
    font-size: 14px
}

.rechargeInput {
    background: rgba(0, 0, 0, .3);
    border-radius: 5px;
    padding: 3px 0
}

.col-th:active {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px)
}

.animation5 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1
}

.animation5:after, .animation5:before {
    content: "";
    position: absolute;
    min-width: 100vw;
    min-height: 100vw
}

.animation5:before {
    background-image: -webkit-radial-gradient(rgba(236, 205, 128, 0), rgba(236, 205, 128, 0), rgba(236, 205, 128, .06666666666666667), rgba(236, 205, 128, .5058823529411764));
    background-image: radial-gradient(rgba(236, 205, 128, 0), rgba(236, 205, 128, 0), rgba(236, 205, 128, .06666666666666667), rgba(236, 205, 128, .5058823529411764));
    left: 60%;
    bottom: 60%;
    border-radius: 50%;
    -webkit-animation-duration: 41s;
    animation-duration: 41s
}

.animation5:after {
    background-image: -webkit-radial-gradient(rgba(236, 205, 128, 0), rgba(236, 205, 128, 0), rgba(236, 205, 128, .06666666666666667), rgba(236, 205, 128, .4117647058823529));
    background-image: radial-gradient(rgba(236, 205, 128, 0), rgba(236, 205, 128, 0), rgba(236, 205, 128, .06666666666666667), rgba(236, 205, 128, .4117647058823529));
    left: 10%;
    bottom: -45%;
    opacity: 1;
    border-radius: 50%;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.animation6 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1
}

.animation6:after, .animation6:before {
    content: "";
    position: absolute;
    min-width: 100vw;
    min-height: 100vw
}

.animation6:before {
    background-image: -webkit-radial-gradient(rgba(236, 205, 128, 0), rgba(236, 205, 128, 0), rgba(236, 205, 128, .06666666666666667), rgba(236, 205, 128, .44313725490196076));
    background-image: radial-gradient(rgba(236, 205, 128, 0), rgba(236, 205, 128, 0), rgba(236, 205, 128, .06666666666666667), rgba(236, 205, 128, .44313725490196076));
    left: 85%;
    bottom: -10%;
    border-radius: 50%;
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg)
}

.animation6:after {
    background-image: -webkit-radial-gradient(rgba(236, 205, 128, 0), rgba(236, 205, 128, 0), rgba(236, 205, 128, 0), rgba(236, 205, 128, .34901960784313724));
    background-image: radial-gradient(rgba(236, 205, 128, 0), rgba(236, 205, 128, 0), rgba(236, 205, 128, 0), rgba(236, 205, 128, .34901960784313724));
    left: 30%;
    bottom: 30%;
    opacity: 1;
    border-radius: 50%;
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg)
}

.animation7 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1
}

.animation7:after, .animation7:before {
    content: "";
    position: absolute;
    min-width: 50vw;
    min-height: 50vw
}

.animation7:before {
    background-image: -webkit-radial-gradient(rgba(236, 205, 128, 0), rgba(236, 205, 128, 0), rgba(236, 205, 128, .06666666666666667), rgba(236, 205, 128, .3215686274509804));
    background-image: radial-gradient(rgba(236, 205, 128, 0), rgba(236, 205, 128, 0), rgba(236, 205, 128, .06666666666666667), rgba(236, 205, 128, .3215686274509804));
    left: -5%;
    bottom: 20%;
    border-radius: 50%;
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.animation7:after {
    background-image: -webkit-radial-gradient(rgba(236, 205, 128, 0), rgba(236, 205, 128, 0), rgba(236, 205, 128, .06666666666666667), rgba(236, 205, 128, .5137254901960784));
    background-image: radial-gradient(rgba(236, 205, 128, 0), rgba(236, 205, 128, 0), rgba(236, 205, 128, .06666666666666667), rgba(236, 205, 128, .5137254901960784));
    left: -20%;
    bottom: 80%;
    opacity: 1;
    border-radius: 50%;
    -webkit-animation-duration: 18s;
    animation-duration: 18s;
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg)
}

.top {
    color: #e6e6e6
}

.cbottom, .top {
    font-size: 12px
}

.cbottom {
    min-height: 30px;
    margin-top: 10px
}

.b {
    background: #202020;
    border-radius: 10px
}

.b, .cbox {
    padding: 10px
}

.cbox {
    margin-top: 15px;
    overflow: hidden
}

.cright {
    border-left: 2px solid #5f5f5f
}

.finish .w-box, .pending .w-box {
    width: 95%;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin: 5px 10px;
    border-radius: 10px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    background: -webkit-gradient(linear, left top, right top, from(#141414), to(#161616));
    background: -webkit-linear-gradient(left, #141414, #161616);
    background: linear-gradient(90deg, #141414, #161616);
    -webkit-box-shadow: 2px 3px 10px #000;
    box-shadow: 2px 3px 10px #000;
    overflow: hidden;
    padding: 5px
}

.finish .w-box .avatar, .pending .w-box .avatar {
    width: 100%;
    height: 30px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    font-size: 12px
}

.finish .w-box .name, .pending .w-box .name {
    font-size: 14px
}

.finish .w-box .buy-p, .pending .w-box .buy-p {
    font-size: 12px;
    color: #fff
}

.finish .w-box .buy-t, .finish .w-box .profit, .pending .w-box .buy-t, .pending .w-box .profit {
    font-size: 12px;
    color: #fff;
    text-align: right
}

.finish .w-box .sell-p, .pending .w-box .sell-p {
    font-size: 14px;
    color: #fff
}

.finish .w-box .max, .pending .w-box .max {
    font-size: 18px
}

.finish .w-box .bg-p, .pending .w-box .bg-p {
    color: #9e9e9e
}

.finish .w-box .bg-a, .pending .w-box .bg-a {
    color: #1890ff
}

.finish .w-box .bg-r, .pending .w-box .bg-r {
    color: #e91ed8
}

.finish .w-box .bg-t, .pending .w-box .bg-t {
    color: #ff9800
}

.finish .w-box .bg-e, .pending .w-box .bg-e {
    color: #4caf50
}

.finish .w-box .bg-f, .pending .w-box .bg-f {
    color: #fa0c0c
}

.finish .w-box .bp, .pending .w-box .bp {
    display: inline-block;
    margin-right: 10px
}

.label[data-v-e02d9ee0] {
    color: #616161;
    line-height: 24px;
    font-size: 14px
}

.order-box[data-v-e02d9ee0] {
    width: 100%;
    height: 100%;
    position: relative
}

.scroll-box[data-v-e02d9ee0] {
    height: 90%;
    overflow-y: scroll
}

.wheader[data-v-e02d9ee0] {
    width: 100%;
    height: auto;
    padding: 15px
}

.wheader .car[data-v-e02d9ee0] {
    width: 100%;
    min-height: 185px;
    height: auto;
    background: -webkit-gradient(linear, left top, right bottom, from(#ff533c), to(#ff9142));
    background: -webkit-linear-gradient(top left, #ff533c, #ff9142);
    background: linear-gradient(to bottom right, #ff533c, #ff9142);
    position: relative;
    border-radius: 10px;
    -webkit-box-shadow: -1px -1px 21px hsla(0, 0%, 43.9%, .4117647058823529);
    box-shadow: -1px -1px 21px hsla(0, 0%, 43.9%, .4117647058823529);
    padding: 10px
}

.wheader .car .car-number[data-v-e02d9ee0] {
    font-size: 22px;
    text-align: left
}

.wheader .car .car-name[data-v-e02d9ee0] {
    font-size: 14px;
    line-height: 30px;
    text-align: left;
    padding: 0;
    position: relative;
    height: 40px
}

.wheader .car .car-user[data-v-e02d9ee0] {
    color: #fff;
    font-size: 12px;
    line-height: 30px;
    text-align: left
}

.wheader .car .car-mobile[data-v-e02d9ee0] {
    color: #fff;
    font-size: 12px;
    line-height: 30px;
    text-align: right
}

.finish[data-v-e02d9ee0], .pending[data-v-e02d9ee0] {
    width: 100%;
    height: auto;
    overflow: hidden
}

.finish .r-box[data-v-e02d9ee0], .pending .r-box[data-v-e02d9ee0] {
    width: 95%;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin: 5px 10px;
    border-radius: 10px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    background: -webkit-gradient(linear, left top, right top, from(#141414), to(#161616));
    background: -webkit-linear-gradient(left, #141414, #161616);
    background: linear-gradient(90deg, #141414, #161616);
    -webkit-box-shadow: 2px 3px 10px #000;
    box-shadow: 2px 3px 10px #000;
    overflow: hidden;
    padding: 5px
}

.finish .r-box .avatar[data-v-e02d9ee0], .pending .r-box .avatar[data-v-e02d9ee0] {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #0084ff;
    border-radius: 50%;
    font-size: 12px
}

.finish .r-box .w-l-name[data-v-e02d9ee0], .pending .r-box .w-l-name[data-v-e02d9ee0] {
    font-size: 14px
}

.finish .r-box .buy-p[data-v-e02d9ee0], .pending .r-box .buy-p[data-v-e02d9ee0] {
    font-size: 12px;
    color: #fff
}

.finish .r-box .buy-t[data-v-e02d9ee0], .finish .r-box .profit[data-v-e02d9ee0], .pending .r-box .buy-t[data-v-e02d9ee0], .pending .r-box .profit[data-v-e02d9ee0] {
    font-size: 12px;
    color: #fff;
    text-align: right
}

.finish .r-box .sell-p[data-v-e02d9ee0], .pending .r-box .sell-p[data-v-e02d9ee0] {
    font-size: 14px;
    color: #fff
}

.finish .r-box .max[data-v-e02d9ee0], .pending .r-box .max[data-v-e02d9ee0] {
    font-size: 18px
}

.finish .r-box .bg-p[data-v-e02d9ee0], .pending .r-box .bg-p[data-v-e02d9ee0] {
    color: #fff
}

.finish .r-box .bg-a[data-v-e02d9ee0], .pending .r-box .bg-a[data-v-e02d9ee0] {
    color: #1890ff
}

.finish .r-box .bg-r[data-v-e02d9ee0], .pending .r-box .bg-r[data-v-e02d9ee0] {
    color: #e91ed8
}

.finish .r-box .bg-t[data-v-e02d9ee0], .pending .r-box .bg-t[data-v-e02d9ee0] {
    color: #ff9800
}

.finish .r-box .bg-e[data-v-e02d9ee0], .pending .r-box .bg-e[data-v-e02d9ee0] {
    color: #4caf50
}

.finish .r-box .bg-f[data-v-e02d9ee0], .pending .r-box .bg-f[data-v-e02d9ee0] {
    color: #fa0c0c
}

.finish .r-box .bp[data-v-e02d9ee0], .pending .r-box .bp[data-v-e02d9ee0] {
    display: inline-block;
    margin-right: 10px
}

.up[data-v-e02d9ee0] {
    color: red;
    font-size: 12px
}

.low[data-v-e02d9ee0] {
    color: green;
    font-size: 12px
}

.withdraw-box[data-v-e02d9ee0] {
    width: 80%;
    margin: 100px auto;
    position: relative;
    text-align: center
}

.modal-shadow.sc-ion-modal-md[data-v-e02d9ee0], .modal-wrapper.sc-ion-modal-md[data-v-e02d9ee0], .my-custom-class[data-v-e02d9ee0] {
    background: hsla(0, 0%, 100%, .13)
}

.animation[data-v-e02d9ee0] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41, 41, 41, .09411764705882353);
    overflow: hidden;
    z-index: 1
}

.animation[data-v-e02d9ee0]:after, .animation[data-v-e02d9ee0]:before {
    content: "";
    position: absolute;
    min-width: 100vw;
    min-height: 100vw;
    background-color: rgba(7, 253, 233, .027450980392156862)
}

.animation[data-v-e02d9ee0]:before {
    left: 70%;
    bottom: -560%;
    border-radius: 37%;
    -webkit-animation-duration: 18s;
    animation-duration: 18s
}

.animation[data-v-e02d9ee0]:after {
    left: 20%;
    bottom: -570%;
    opacity: 1;
    border-radius: 37%;
    -webkit-animation-duration: 8s;
    animation-duration: 8s
}

@-webkit-keyframes rotate-e02d9ee0 {
    0% {
        -webkit-transform: translate(-30%) rotate(0deg);
        transform: translate(-30%) rotate(0deg)
    }
    50% {
        -webkit-transform: translate(-80%, -2%) rotate(180deg);
        transform: translate(-80%, -2%) rotate(180deg)
    }
    to {
        -webkit-transform: translate(-30%) rotate(1turn);
        transform: translate(-30%) rotate(1turn)
    }
}

@keyframes rotate-e02d9ee0 {
    0% {
        -webkit-transform: translate(-30%) rotate(0deg);
        transform: translate(-30%) rotate(0deg)
    }
    50% {
        -webkit-transform: translate(-80%, -2%) rotate(180deg);
        transform: translate(-80%, -2%) rotate(180deg)
    }
    to {
        -webkit-transform: translate(-30%) rotate(1turn);
        transform: translate(-30%) rotate(1turn)
    }
}

.span[data-v-e02d9ee0] {
    display: inline;
    width: 30px
}

.animationw1[data-v-e02d9ee0] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden
}

.animationw1[data-v-e02d9ee0]:after, .animationw1[data-v-e02d9ee0]:before {
    content: "";
    position: absolute;
    min-width: 100vw;
    min-height: 100vw
}

.animationw1[data-v-e02d9ee0]:before {
    background-color: rgba(235, 252, 0, .23921568627450981);
    left: 30%;
    bottom: -32vh;
    border-radius: 37%;
    -webkit-animation-duration: 18s;
    animation-duration: 18s;
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg)
}

.animationw1[data-v-e02d9ee0]:after {
    background-color: rgba(255, 0, 0, .1843137254901961);
    left: -28%;
    bottom: -40vh;
    opacity: 1;
    border-radius: 37%;
    -webkit-animation-duration: 28s;
    animation-duration: 28s;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.animationw2[data-v-e02d9ee0] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1
}

.animationw2[data-v-e02d9ee0]:after, .animationw2[data-v-e02d9ee0]:before {
    content: "";
    position: absolute;
    min-width: 100vw;
    min-height: 100vw
}

.animationw2[data-v-e02d9ee0]:before {
    background-color: rgba(28, 224, 214, .1568627450980392);
    left: 39%;
    bottom: -38vh;
    border-radius: 37%;
    -webkit-animation-duration: 18s;
    animation-duration: 18s
}

.animationw2[data-v-e02d9ee0]:after {
    background-color: rgba(7, 255, 172, .1568627450980392);
    left: 69%;
    bottom: -35vh;
    border-radius: 37%;
    -webkit-animation-duration: 28s;
    animation-duration: 28s
}

.animationw3[data-v-e02d9ee0] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1
}

.animationw3[data-v-e02d9ee0]:after, .animationw3[data-v-e02d9ee0]:before {
    content: "";
    position: absolute;
    min-width: 100vw;
    min-height: 100vw
}

.animationw3[data-v-e02d9ee0]:before {
    background-color: rgba(255, 145, 0, .17647058823529413);
    left: -40%;
    bottom: 60%;
    border-radius: 37%;
    -webkit-animation-duration: 28s;
    animation-duration: 28s
}

.animationw3[data-v-e02d9ee0]:after {
    background-color: rgba(245, 41, 14, .17254901960784313);
    left: -60%;
    bottom: 50%;
    border-radius: 37%;
    -webkit-animation-duration: 18s;
    animation-duration: 18s
}

.card-box[data-v-e02d9ee0] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 170px;
    height: auto;
    padding: 15px;
    z-index: 10
}

.back[data-v-e02d9ee0] {
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.back[data-v-e02d9ee0]:active {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px)
}

.header-end {
    font-size: 12px;
    padding-right: 20px
}

.credit-box {
    width: 100%;
    height: auto
}

.credit-box .credit-top {
    width: 100%;
    height: 100%;
    position: relative;
    background: #131313
}

.credit-box .credit-top .lv-box {
    text-align: center
}

.credit-box .credit-top .b-top {
    width: 90%;
    height: auto;
    border-radius: 10px;
    background: -webkit-gradient(linear, left top, right bottom, from(#f6e190), color-stop(#fdeda7), color-stop(#edd075), to(#f8de83));
    background: -webkit-linear-gradient(left top, #f6e190, #fdeda7, #edd075, #f8de83);
    background: linear-gradient(to right bottom, #f6e190, #fdeda7, #edd075, #f8de83);
    -webkit-box-shadow: 1px 1px 10px #333;
    box-shadow: 1px 1px 10px #333;
    color: #000;
    position: relative;
    margin: 50px auto
}

.credit-box .credit-top .b-top .b-top-title {
    width: 70%;
    line-height: 30px;
    font-size: 12px;
    background: -webkit-gradient(linear, left top, right bottom, from(#e4e4e4), color-stop(#f0f0f0), color-stop(#f6f6f6), color-stop(#ddd), color-stop(#f0f0f0), color-stop(#dfdfdf), to(#dbdbdb));
    background: -webkit-linear-gradient(left top, #e4e4e4, #f0f0f0, #f6f6f6, #ddd, #f0f0f0, #dfdfdf, #dbdbdb);
    background: linear-gradient(to right bottom, #e4e4e4, #f0f0f0, #f6f6f6, #ddd, #f0f0f0, #dfdfdf, #dbdbdb);
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -35%;
    top: -15px;
    border-radius: 0 0 15px 15px;
    -webkit-box-shadow: 1px 1px 5px #333;
    box-shadow: 1px 1px 5px #333
}

.credit-box .credit-top .b-top .b-top-title:after {
    content: "";
    width: 1px;
    height: 1px;
    border-top: 15px solid transparent;
    border-left: 10px solid #8d6545;
    position: absolute;
    top: -1px;
    right: -10px
}

.credit-box .credit-top .b-top .b-top-title:before {
    content: "";
    width: 1px;
    height: 1px;
    border-top: 15px solid transparent;
    border-right: 10px solid #8d6545;
    position: absolute;
    top: -1px;
    left: -10px
}

.credit-box .credit-top .b-top .b-top-centent {
    padding: 15px;
    padding-top: 25px;
    font-size: 12px;
    text-align: center
}

.credit-box .credit-top .b-top .b-top-centent .c-list {
    width: 90%;
    line-height: 16px;
    margin: 10px auto;
    min-height: 100%;
    background: -webkit-gradient(linear, left top, right bottom, from(#f6e190), color-stop(#fdeda7), color-stop(#edd075), to(#f8de83));
    background: -webkit-linear-gradient(left top, #f6e190, #fdeda7, #edd075, #f8de83);
    background: linear-gradient(to right bottom, #f6e190, #fdeda7, #edd075, #f8de83);
    border-radius: 10px;
    -webkit-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 3px #333;
    position: relative;
    padding: 0 20px
}

.credit-box .credit-top .b-top .b-top-centent .list-red {
    background: -webkit-gradient(linear, left top, right bottom, from(#5e5637), color-stop(#665f42), color-stop(#5f5330), to(#72663c));
    background: -webkit-linear-gradient(left top, #5e5637, #665f42, #5f5330, #72663c);
    background: linear-gradient(to right bottom, #5e5637, #665f42, #5f5330, #72663c);
    color: #fff
}

.credit-box .credit-top .b-top .b-top-centent .list-red:after {
    right: 10px
}

.credit-box .credit-top .b-top .b-top-centent .list-red:after, .credit-box .credit-top .b-top .b-top-centent .list-red:before {
    content: "";
    width: 10px;
    height: 10px;
    background: -webkit-gradient(linear, left top, right bottom, from(#e4e4e4), color-stop(#f0f0f0), color-stop(#f6f6f6), color-stop(#ddd), color-stop(#f0f0f0), color-stop(#dfdfdf), to(#dbdbdb));
    background: -webkit-linear-gradient(left top, #e4e4e4, #f0f0f0, #f6f6f6, #ddd, #f0f0f0, #dfdfdf, #dbdbdb);
    background: linear-gradient(to right bottom, #e4e4e4, #f0f0f0, #f6f6f6, #ddd, #f0f0f0, #dfdfdf, #dbdbdb);
    position: absolute;
    top: 7px;
    border-radius: 5px
}

.credit-box .credit-top .b-top .b-top-centent .list-red:before {
    left: 10px
}

.credit-box .credit-top .red {
    background: -webkit-gradient(linear, left top, right bottom, from(#1e1e1e), color-stop(#313131), color-stop(#2f2f2f), color-stop(#454541), color-stop(#323232), color-stop(#222), to(#1e1e1e));
    background: -webkit-linear-gradient(left top, #1e1e1e, #313131, #2f2f2f, #454541, #323232, #222, #1e1e1e);
    background: linear-gradient(to right bottom, #1e1e1e, #313131, #2f2f2f, #454541, #323232, #222, #1e1e1e)
}

.credit-box .credit-top .text-red {
    color: red
}

.credit-box .credit-top .b-bottom {
    width: 90%;
    height: auto;
    text-align: center;
    font-size: 12px;
    margin: auto;
    padding-bottom: 100px
}

.credit-box .credit-top .b-bottom h5 {
    width: 200px;
    line-height: 30px;
    margin: 10px auto;
    background: -webkit-gradient(linear, left top, right bottom, from(#1e1e1e), color-stop(#313131), color-stop(#2f2f2f), color-stop(#454541), color-stop(#323232), color-stop(#222), to(#1e1e1e));
    background: -webkit-linear-gradient(left top, #1e1e1e, #313131, #2f2f2f, #454541, #323232, #222, #1e1e1e);
    background: linear-gradient(to right bottom, #1e1e1e, #313131, #2f2f2f, #454541, #323232, #222, #1e1e1e);
    border-radius: 20px;
    -webkit-box-shadow: 1px 1px 4px #333;
    box-shadow: 1px 1px 4px #333;
    position: relative
}

.credit-box .credit-top .b-bottom h5:after {
    right: 10px
}

.credit-box .credit-top .b-bottom h5:after, .credit-box .credit-top .b-bottom h5:before {
    content: "";
    width: 10px;
    height: 10px;
    background: -webkit-gradient(linear, left top, right bottom, from(#978b5b), color-stop(#8a815a), color-stop(#867541), to(#6b603a));
    background: -webkit-linear-gradient(left top, #978b5b, #8a815a, #867541, #6b603a);
    background: linear-gradient(to right bottom, #978b5b, #8a815a, #867541, #6b603a);
    position: absolute;
    top: 10px;
    border-radius: 5px
}

.credit-box .credit-top .b-bottom h5:before {
    left: 10px
}

.credit-box .credit-top .b-bottom ul {
    padding-left: 0
}

.credit-box .credit-top .b-bottom ul li {
    margin: 20px auto;
    overflow: hidden;
    position: relative
}

.credit-box .credit-top .b-bottom ul li .c-label {
    display: inline-block;
    width: 45%;
    padding: 0 15px 0 5px;
    background: -webkit-gradient(linear, left top, right bottom, from(#f6e190), color-stop(#fdeda7), color-stop(#edd075), to(#f8de83));
    background: -webkit-linear-gradient(left top, #f6e190, #fdeda7, #edd075, #f8de83);
    background: linear-gradient(to right bottom, #f6e190, #fdeda7, #edd075, #f8de83);
    border-bottom: 2px solid #f6e190;
    color: #000;
    border-radius: 5px 5px 0 0;
    text-align: left
}

.credit-box .credit-top .b-bottom ul li .c-text {
    display: inline-block;
    width: 55%;
    border-bottom: 2px solid #f6e190;
    padding-left: 15px;
    text-align: left
}

.r-input {
    background: rgba(81, 81, 81, .30196078431372547);
    border-radius: 5px;
    padding: 3px 0
}

.detils-box {
    width: 100%;
    height: 100%;
    color: #f0f8ff;
    overflow-y: scroll;
    padding: 25px
}

.detils-box .modal-header {
    text-align: center;
    border-bottom: 1px solid rgba(82, 82, 82, .418);
    position: relative
}

.detils-box .modal-header h5 {
    font-size: 16px
}

.detils-box .modal-header .close {
    position: absolute;
    right: 0;
    left: 0;
    line-height: 20px;
    width: 40px;
    height: 60px
}

.label {
    color: #616161;
    line-height: 24px;
    font-size: 14px
}

.order-box {
    width: 100%;
    height: 100%;
    position: relative
}

.scroll-box {
    height: 90%;
    overflow-y: scroll
}

.wheader {
    width: 100%;
    height: auto;
    padding: 15px
}

.wheader .car {
    width: 100%;
    min-height: 185px;
    height: auto;
    background: -webkit-gradient(linear, left top, right bottom, from(#ff533c), to(#ff9142));
    background: -webkit-linear-gradient(top left, #ff533c, #ff9142);
    background: linear-gradient(to bottom right, #ff533c, #ff9142);
    position: relative;
    border-radius: 10px;
    -webkit-box-shadow: -1px -1px 21px hsla(0, 0%, 43.9%, .4117647058823529);
    box-shadow: -1px -1px 21px hsla(0, 0%, 43.9%, .4117647058823529);
    padding: 10px
}

.wheader .car .car-number {
    font-size: 22px;
    text-align: left
}

.wheader .car .car-name {
    font-size: 14px;
    line-height: 30px;
    text-align: left;
    padding: 0;
    position: relative;
    height: 40px
}

.wheader .car .car-user {
    color: #fff;
    font-size: 12px;
    line-height: 30px;
    text-align: left
}

.wheader .car .car-mobile {
    color: #fff;
    font-size: 12px;
    line-height: 30px;
    text-align: right
}

.finish, .pending {
    width: 100%;
    height: auto;
    overflow: hidden
}

.finish .r-box, .pending .r-box {
    width: 95%;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin: 5px 10px;
    border-radius: 10px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    background: -webkit-gradient(linear, left top, right top, from(#141414), to(#161616));
    background: -webkit-linear-gradient(left, #141414, #161616);
    background: linear-gradient(90deg, #141414, #161616);
    -webkit-box-shadow: 2px 3px 10px #000;
    box-shadow: 2px 3px 10px #000;
    overflow: hidden;
    padding: 5px
}

.finish .r-box .avatar, .pending .r-box .avatar {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #0084ff;
    border-radius: 50%;
    font-size: 12px
}

.finish .r-box .name, .pending .r-box .name {
    font-size: 14px;
    line-height: 40px
}

.finish .r-box .buy-p, .pending .r-box .buy-p {
    font-size: 12px;
    color: #fff
}

.finish .r-box .buy-t, .finish .r-box .profit, .pending .r-box .buy-t, .pending .r-box .profit {
    font-size: 12px;
    color: #fff;
    text-align: right;
    line-height: 20px
}

.finish .r-box .sell-p, .pending .r-box .sell-p {
    font-size: 14px;
    color: #fff
}

.finish .r-box .max, .pending .r-box .max {
    font-size: 18px
}

.finish .r-box .bg-p, .pending .r-box .bg-p {
    color: #fff
}

.finish .r-box .bg-a, .pending .r-box .bg-a {
    color: #1890ff
}

.finish .r-box .bg-r, .pending .r-box .bg-r {
    color: #e91ed8
}

.finish .r-box .bg-t, .pending .r-box .bg-t {
    color: #ff9800
}

.finish .r-box .bg-e, .pending .r-box .bg-e {
    color: #4caf50
}

.finish .r-box .bg-f, .pending .r-box .bg-f {
    color: #fa0c0c
}

.finish .r-box .bp, .pending .r-box .bp {
    display: inline-block;
    margin-right: 10px
}

.up {
    color: red
}

.low, .up {
    font-size: 12px
}

.low {
    color: green
}

.withdraw-box {
    width: 80%;
    margin: 100px auto;
    position: relative;
    text-align: center
}

.modal-shadow.sc-ion-modal-md, .modal-wrapper.sc-ion-modal-md, .my-custom-class {
    background: hsla(0, 0%, 100%, .13)
}

.animation {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41, 41, 41, .09411764705882353);
    overflow: hidden;
    z-index: 1
}

.animation:after, .animation:before {
    content: "";
    position: absolute;
    min-width: 100vw;
    min-height: 100vw;
    background-color: rgba(7, 253, 233, .027450980392156862)
}

.animation:before {
    left: 70%;
    bottom: -560%;
    border-radius: 37%;
    -webkit-animation-duration: 18s;
    animation-duration: 18s
}

.animation:after {
    left: 20%;
    bottom: -570%;
    opacity: 1;
    border-radius: 37%;
    -webkit-animation-duration: 8s;
    animation-duration: 8s
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: translate(-30%) rotate(0deg);
        transform: translate(-30%) rotate(0deg)
    }
    50% {
        -webkit-transform: translate(-80%, -2%) rotate(180deg);
        transform: translate(-80%, -2%) rotate(180deg)
    }
    to {
        -webkit-transform: translate(-30%) rotate(1turn);
        transform: translate(-30%) rotate(1turn)
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: translate(-30%) rotate(0deg);
        transform: translate(-30%) rotate(0deg)
    }
    50% {
        -webkit-transform: translate(-80%, -2%) rotate(180deg);
        transform: translate(-80%, -2%) rotate(180deg)
    }
    to {
        -webkit-transform: translate(-30%) rotate(1turn);
        transform: translate(-30%) rotate(1turn)
    }
}

.span {
    display: inline;
    width: 30px
}

.animationw1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden
}

.animationw1:after, .animationw1:before {
    content: "";
    position: absolute;
    min-width: 100vw;
    min-height: 100vw
}

.animationw1:before {
    background-color: rgba(235, 252, 0, .23921568627450981);
    left: 30%;
    bottom: -32vh;
    border-radius: 37%;
    -webkit-animation-duration: 18s;
    animation-duration: 18s;
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg)
}

.animationw1:after {
    background-color: rgba(255, 0, 0, .1843137254901961);
    left: -28%;
    bottom: -40vh;
    opacity: 1;
    border-radius: 37%;
    -webkit-animation-duration: 28s;
    animation-duration: 28s;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.animationw2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1
}

.animationw2:after, .animationw2:before {
    content: "";
    position: absolute;
    min-width: 100vw;
    min-height: 100vw
}

.animationw2:before {
    background-color: rgba(28, 224, 214, .1568627450980392);
    left: 39%;
    bottom: -38vh;
    border-radius: 37%;
    -webkit-animation-duration: 18s;
    animation-duration: 18s
}

.animationw2:after {
    background-color: rgba(7, 255, 172, .1568627450980392);
    left: 69%;
    bottom: -35vh;
    border-radius: 37%;
    -webkit-animation-duration: 28s;
    animation-duration: 28s
}

.animationw3 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1
}

.animationw3:after, .animationw3:before {
    content: "";
    position: absolute;
    min-width: 100vw;
    min-height: 100vw
}

.animationw3:before {
    background-color: rgba(255, 145, 0, .17647058823529413);
    left: -40%;
    bottom: 60%;
    border-radius: 37%;
    -webkit-animation-duration: 28s;
    animation-duration: 28s
}

.animationw3:after {
    background-color: rgba(245, 41, 14, .17254901960784313);
    left: -60%;
    bottom: 50%;
    border-radius: 37%;
    -webkit-animation-duration: 18s;
    animation-duration: 18s
}

.card-box {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 170px;
    z-index: 10
}

.back {
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.back:active {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px)
}

.notice-list-box {
    background: -webkit-gradient(linear, left top, right top, from(#202020), to(#202020));
    background: -webkit-linear-gradient(left, #202020, #202020);
    background: linear-gradient(90deg, #202020, #202020);
    width: 95%;
    margin: 10px auto;
    border-radius: 5px;
    padding: 0 0 0 10px;
    position: relative;
    -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, .575);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, .575)
}

.notice-list-box .list-icon {
    line-height: 45px;
    width: 35px
}

.notice-list-box .list-icon img {
    margin-top: 3px
}

.notice-list-box .list-img {
    text-align: center;
    margin: 0;
    padding: 5px;
    width: 35px;
    margin-top: 5px
}

.notice-list-box .list-text {
    font-size: 12px;
    line-height: 40px;
    margin: 0;
    padding-left: 10px
}

.notice-box {
    width: 100%;
    height: 100%;
    color: #f0f8ff;
    overflow-y: scroll
}

.notice-box .modal-header {
    text-align: center;
    border-bottom: 1px solid rgba(82, 82, 82, .418);
    position: relative
}

.notice-box .modal-header h5 {
    font-size: 16px
}

.notice-box .modal-header .close {
    position: absolute;
    right: 0;
    left: 0;
    line-height: 20px;
    width: 40px;
    height: 60px
}

.my-notice-class {
    background: #000
}

.card-tab {
    text-align: center
}

.card-box {
    width: 100%;
    height: auto;
    padding: 15px
}

.card-box .select-buttons {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 5 0
}

.card-box .card-upload {
    position: relative;
    width: 100%;
    min-height: 200px;
    height: auto;
    margin-top: 30px;
    text-align: center
}

.card-box .card-upload img {
    width: 70%;
    margin: auto
}

.card-box .card-upload .id-text {
    color: #ffebcd;
    font-size: 12px
}

.card-box .card-upload .image-input {
    width: 70%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 15%;
    opacity: 0;
    cursor: pointer
}

.card-box .real-name {
    text-align: center;
    padding: 0 50px
}

.card-box .real-name p {
    font-size: 12px
}

:root {
    --ion-background-color: #141414;
    --ion-background-color-rgb: 20, 20, 20;
    --ion-text-color: #fff;
    --ion-text-color-rgb: 255, 255, 255;
    --ion-color-step-50: #0d0d0d;
    --ion-color-step-100: #1a1a1a;
    --ion-color-step-150: #262626;
    --ion-color-step-200: #333;
    --ion-color-step-250: #404040;
    --ion-color-step-300: #4d4d4d;
    --ion-color-step-350: #595959;
    --ion-color-step-400: #666;
    --ion-color-step-450: #737373;
    --ion-color-step-500: grey;
    --ion-color-step-550: #8c8c8c;
    --ion-color-step-600: #999;
    --ion-color-step-650: #a6a6a6;
    --ion-color-step-700: #b3b3b3;
    --ion-color-step-750: #bfbfbf;
    --ion-color-step-800: #ccc;
    --ion-color-step-850: #d9d9d9;
    --ion-color-step-900: #e6e6e6;
    --ion-color-step-950: #f2f2f2;
    --ion-color-primary: #ebcc7f;
    --ion-color-primary-rgb: 235, 204, 127;
    --ion-color-primary-contrast: #000;
    --ion-color-primary-contrast-rgb: 0, 0, 0;
    --ion-color-primary-shade: #cfb470;
    --ion-color-primary-tint: #edd18c;
    --ion-color-secondary: #3dc2ff;
    --ion-color-secondary-rgb: 61, 194, 255;
    --ion-color-secondary-contrast: #fff;
    --ion-color-secondary-contrast-rgb: 255, 255, 255;
    --ion-color-secondary-shade: #36abe0;
    --ion-color-secondary-tint: #50c8ff;
    --ion-color-tertiary: #5260ff;
    --ion-color-tertiary-rgb: 82, 96, 255;
    --ion-color-tertiary-contrast: #fff;
    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
    --ion-color-tertiary-shade: #4854e0;
    --ion-color-tertiary-tint: #6370ff;
    --ion-color-success: #2dd36f;
    --ion-color-success-rgb: 45, 211, 111;
    --ion-color-success-contrast: #fff;
    --ion-color-success-contrast-rgb: 255, 255, 255;
    --ion-color-success-shade: #28ba62;
    --ion-color-success-tint: #42d77d;
    --ion-color-warning: #ffc409;
    --ion-color-warning-rgb: 255, 196, 9;
    --ion-color-warning-contrast: #000;
    --ion-color-warning-contrast-rgb: 0, 0, 0;
    --ion-color-warning-shade: #e0ac08;
    --ion-color-warning-tint: #ffca22;
    --ion-color-danger: #eb445a;
    --ion-color-danger-rgb: 235, 68, 90;
    --ion-color-danger-contrast: #fff;
    --ion-color-danger-contrast-rgb: 255, 255, 255;
    --ion-color-danger-shade: #cf3c4f;
    --ion-color-danger-tint: #ed576b;
    --ion-color-dark: #222428;
    --ion-color-dark-rgb: 34, 36, 40;
    --ion-color-dark-contrast: #fff;
    --ion-color-dark-contrast-rgb: 255, 255, 255;
    --ion-color-dark-shade: #1e2023;
    --ion-color-dark-tint: #383a3e;
    --ion-color-medium: #92949c;
    --ion-color-medium-rgb: 146, 148, 156;
    --ion-color-medium-contrast: #fff;
    --ion-color-medium-contrast-rgb: 255, 255, 255;
    --ion-color-medium-shade: #808289;
    --ion-color-medium-tint: #9d9fa6;
    --ion-color-light: #f4f5f8;
    --ion-color-light-rgb: 244, 245, 248;
    --ion-color-light-contrast: #000;
    --ion-color-light-contrast-rgb: 0, 0, 0;
    --ion-color-light-shade: #d7d8da;
    --ion-color-light-tint: #f5f6f9;
    --ion-toolbar-background: #1a1a1a;
    --ion-backdrop-color: #000
}

@media (prefers-color-scheme: dark) {
    body {
        --ion-color-primary: #ebcc7f;
        --ion-color-primary-rgb: 235, 204, 127;
        --ion-color-primary-contrast: #000;
        --ion-color-primary-contrast-rgb: 0, 0, 0;
        --ion-color-primary-shade: #cfb470;
        --ion-color-primary-tint: #edd18c;
        --ion-color-secondary: #50c8ff;
        --ion-color-secondary-rgb: 80, 200, 255;
        --ion-color-secondary-contrast: #fff;
        --ion-color-secondary-contrast-rgb: 255, 255, 255;
        --ion-color-secondary-shade: #46b0e0;
        --ion-color-secondary-tint: #62ceff;
        --ion-color-tertiary: #fffc64;
        --ion-color-tertiary-rgb: 106, 100, 255;
        --ion-color-tertiary-contrast: #fff;
        --ion-color-tertiary-contrast-rgb: 255, 255, 255;
        --ion-color-tertiary-shade: #5d58e0;
        --ion-color-tertiary-tint: #7974ff;
        --ion-color-success: #2fdf75;
        --ion-color-success-rgb: 47, 223, 117;
        --ion-color-success-contrast: #000;
        --ion-color-success-contrast-rgb: 0, 0, 0;
        --ion-color-success-shade: #29c467;
        --ion-color-success-tint: #44e283;
        --ion-color-warning: #ffd534;
        --ion-color-warning-rgb: 255, 213, 52;
        --ion-color-warning-contrast: #000;
        --ion-color-warning-contrast-rgb: 0, 0, 0;
        --ion-color-warning-shade: #e0bb2e;
        --ion-color-warning-tint: #ffd948;
        --ion-color-danger: #ff4961;
        --ion-color-danger-rgb: 255, 73, 97;
        --ion-color-danger-contrast: #fff;
        --ion-color-danger-contrast-rgb: 255, 255, 255;
        --ion-color-danger-shade: #e04055;
        --ion-color-danger-tint: #ff5b71;
        --ion-color-dark: #f4f5f8;
        --ion-color-dark-rgb: 244, 245, 248;
        --ion-color-dark-contrast: #000;
        --ion-color-dark-contrast-rgb: 0, 0, 0;
        --ion-color-dark-shade: #d7d8da;
        --ion-color-dark-tint: #f5f6f9;
        --ion-color-medium: #989aa2;
        --ion-color-medium-rgb: 152, 154, 162;
        --ion-color-medium-contrast: #000;
        --ion-color-medium-contrast-rgb: 0, 0, 0;
        --ion-color-medium-shade: #86888f;
        --ion-color-medium-tint: #a2a4ab;
        --ion-color-light: #222428;
        --ion-color-light-rgb: 34, 36, 40;
        --ion-color-light-contrast: #fff;
        --ion-color-light-contrast-rgb: 255, 255, 255;
        --ion-color-light-shade: #1e2023;
        --ion-color-light-tint: #383a3e
    }

    .ios body {
        --ion-card-background: #000
    }

    .ios body, .md body {
        --ion-background-color: #141414;
        --ion-background-color-rgb: 20, 20, 20;
        --ion-text-color: #fff;
        --ion-text-color-rgb: 255, 255, 255;
        --ion-color-step-50: #0d0d0d;
        --ion-color-step-100: #1a1a1a;
        --ion-color-step-150: #262626;
        --ion-color-step-200: #333;
        --ion-color-step-250: #404040;
        --ion-color-step-300: #4d4d4d;
        --ion-color-step-350: #595959;
        --ion-color-step-400: #666;
        --ion-color-step-450: #737373;
        --ion-color-step-500: grey;
        --ion-color-step-550: #8c8c8c;
        --ion-color-step-600: #999;
        --ion-color-step-650: #a6a6a6;
        --ion-color-step-700: #b3b3b3;
        --ion-color-step-750: #bfbfbf;
        --ion-color-step-800: #ccc;
        --ion-color-step-850: #d9d9d9;
        --ion-color-step-900: #e6e6e6;
        --ion-color-step-950: #f2f2f2;
        --ion-toolbar-background: #2c2c2c;
        --ion-item-background: #000
    }

    .md body {
        --ion-tab-bar-background: #000;
        --ion-card-background: #000
    }
}

#app, body, html, ion-page {
    width: 100%;
    height: 100%
}

html body #app .ion-page ion-toolbar:first-of-type {
    padding-top: 0
}