.page_wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    padding-bottom: 50px;
    box-sizing: border-box;
    overflow-y: auto;
}

a,
.van-list .item {
    cursor: pointer;
}

.justify-center {
    justify-content: center;
}

.line {
    position: relative;
}

.line:before {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0;
    bottom: 1px;
    left: 0px;
    /* border-bottom: 1px solid #000000; */
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

.line:after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0;
    bottom: 0px;
    left: 0px;
    /* border-bottom: 1px solid #464646; */
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

.grap {
    height: 10px;
}

.red {
    color: #ff5257
}

.green {
    color: #42b983
}

.led {
    font-family: led
}

.f12 {
    font-size: 1.2rem;
}

.f08 {
    font-size: 0.8rem;
}

.tl {
    text-align: left;
}

.tr {
    text-align: right;
}

.tc {
    text-align: center;
}

@font-face {
    font-family: "led";
    src: url("/static/font/UnidreamLED.woff") format("woff"), url("/static/font/UnidreamLED.ttf") format("truetype"), url("/static/font/UnidreamLED.eot") format("embedded-opentype"), url("/static/font/UnidreamLED.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

.main_table {
    min-width: 100%;
    text-align: center;
    width: max-content;
}

.main_table thead {
    font-weight: bold;
    background-color: #2b313a;
}

.main_table td {
    padding: 4px 8px;
}

.main_table tr:nth-child(2n) {
    background-color: #2b313a;
}

.account_info {
    display: flex
}

.account_info>div {
    flex: 1;
    text-align: center;
}

.account_info>div>div {
    padding-bottom: 4px;
}

.trade_module_container {
    display: block;
}

.trade_module {
    display: flex
}

.trade_module>div {
    flex: 1;
    padding: 0 10px;
}

.trade_module_row {
    padding: 4px 0;
    position: relative;
}


/* 
.trade_module_row .van-stepper {
    display: flex;
}

.trade_module_row .van-stepper__input {
    flex: 1;
} */

.trade_module_row button {
    position: absolute;
    line-height: 25px;
    width: 36px;
    font-size: 20px;
    height: 30px;
}

.trade_module_row button:first-child {
    left: 0;
}

.trade_module_row button:last-child {
    right: 0;
}

.trade_module_row input {
    padding: 4px;
    text-align: center;
    /* border-radius: 4px; */
    box-sizing: border-box;
}

.trade_module_price_row {
    padding: 4px;
    display: flex;
    line-height: 17px;
}

.trade_module_button {
    display: flex;
    padding: 10px 10px 0 10px;
}

.trade_module_button>div {
    flex: 1;
}

.trade_module_button>div button {
    width: 100%;
    padding: 10px 0;
    border: 0;
    border-radius: 6px;
    font-weight: bold;
    color: white;
    line-height: 17px;
}

.flex {
    display: flex;
}

.flex1 {
    flex: 1;
}


/* rules */

.leafs,
.buds,
#bee-left,
#bee2-left,
#bee-right,
#bee2-right {
    visibility: hidden;
    stroke: none !important;
    fill: var(--logo-color) !important;
}


/* logo */

#typo {
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0 1% !important;
    animation: font-animate 1.15s .5s linear forwards;
    opacity: 0;
    fill: var(--logo-color);
    stroke: var(--logo-color);
    stroke-width: 2;
    filter: drop-shadow(3px 0px 7px var(--logo-glow-color)) drop-shadow(-3px 0px 7px var(--logo-glow-color)) drop-shadow(0px 4px 7px var(--logo-glow-color));
    -webkit-filter: drop-shadow(3px 0px 7px var(--logo-glow-color)) drop-shadow(-3px 0px 7px var(--logo-glow-color)) drop-shadow(0px 4px 7px var(--logo-glow-color));
}

#plant-left,
#plant-right {
    z-index: 1;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--logo-color);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(3px 0px 7px var(--logo-glow-color)) drop-shadow(-3px 0px 7px var(--logo-glow-color)) drop-shadow(0px 4px 7px var(--logo-glow-color));
    -webkit-filter: drop-shadow(3px 0px 7px var(--logo-glow-color)) drop-shadow(-3px 0px 7px var(--logo-glow-color)) drop-shadow(0px 4px 7px var(--logo-glow-color));
}

#plant-left {
    margin-left: 5% !important;
    -webkit-transform: rotate(-35deg) scaleX(-1);
    /* 鉁� mirror rotation */
    -moz-transform: rotate(-35deg) scaleX(-1);
    -ms-transform: rotate(-35deg) scaleX(-1);
    -o-transform: rotate(-35deg) scaleX(-1);
    transform: rotate(-35deg) scaleX(-1);
}

#plant-right {
    margin-right: 5% !important;
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
}


/* bees */

#bee-left {
    z-index: 3;
    -webkit-animation: fly-left 9s 4.7s ease-in-out infinite;
    -moz-animation: fly-left 9s 4.7s ease-in-out infinite;
    -ms-animation: fly-left 9s 4.7s ease-in-out infinite;
    -o-animation: fly-left 9s 4.7s ease-in-out infinite;
    animation: fly-left 9s 4.7s ease-in-out infinite;
    filter: drop-shadow(3px 0px 7px var(--logo-glow-color)) drop-shadow(0px 4px 7px var(--logo-glow-color));
    -webkit-filter: drop-shadow(3px 0px 7px var(--logo-glow-color)) drop-shadow(0px 4px 7px var(--logo-glow-color));
}

#bee2-left {
    z-index: 3;
    -webkit-animation: fly2-left 9s 4.8s ease-in-out infinite;
    -moz-animation: fly2-left 9s 4.8s ease-in-out infinite;
    -ms-animation: fly2-left 9s 4.8s ease-in-out infinite;
    -o-animation: fly2-left 9s 4.8s ease-in-out infinite;
    animation: fly2-left 9s 4.8s ease-in-out infinite;
    filter: drop-shadow(3px 0px 7px var(--logo-glow-color)) drop-shadow(0px 4px 7px var(--logo-glow-color));
    -webkit-filter: drop-shadow(3px 0px 7px var(--logo-glow-color)) drop-shadow(0px 4px 7px var(--logo-glow-color));
}

#bee-right {
    z-index: 3;
    -webkit-animation: fly-right 9s 5s linear infinite;
    -moz-animation: fly-right 9s 5s linear infinite;
    -ms-animation: fly-right 9s 5s linear infinite;
    -o-animation: fly-right 9s 5s linear infinite;
    animation: fly-right 9s 5s linear infinite;
    filter: drop-shadow(3px 0px 7px var(--logo-glow-color)) drop-shadow(0px 4px 7px var(--logo-glow-color));
    -webkit-filter: drop-shadow(3px 0px 7px var(--logo-glow-color)) drop-shadow(0px 4px 7px var(--logo-glow-color));
}

#bee2-right {
    z-index: 3;
    -webkit-animation: fly2-right 9s 4.5s ease-in-out infinite;
    -moz-animation: fly2-right 9s 4.5s ease-in-out infinite;
    -ms-animation: fly2-right 9s 4.5s ease-in-out infinite;
    -o-animation: fly2-right 9s 4.5s ease-in-out infinite;
    animation: fly2-right 9s 4.5s ease-in-out infinite;
    filter: drop-shadow(3px 0px 7px var(--logo-glow-color)) drop-shadow(0px 4px 7px var(--logo-glow-color));
    -webkit-filter: drop-shadow(3px 0px 7px var(--logo-glow-color)) drop-shadow(0px 4px 7px var(--logo-glow-color));
}


/* wings */

.right-wing,
.right-wing2 {
    -webkit-transform-origin: 0 90%;
    transform-origin: 0 90%;
    -webkit-animation: flapping-right .1s linear infinite;
    -moz-animation: flapping-right .1s linear infinite;
    -ms-animation: flapping-right .1s linear infinite;
    -o-animation: flapping-right .1s linear infinite;
    animation: flapping-right .1s linear infinite;
    transform-box: fill-box;
}

.left-wing,
.left-wing2 {
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-animation: flapping-left .1s linear infinite;
    -moz-animation: flapping-left .1s linear infinite;
    -ms-animation: flapping-left .1s linear infinite;
    -o-animation: flapping-left .1s linear infinite;
    animation: flapping-left .1s linear infinite;
    transform-box: fill-box;
}


/* stems */

.stem1 {
    visibility: hidden;
    animation: stretch 4s 1s ease-in-out forwards;
    stroke-dasharray: 200%;
}

.stem2 {
    visibility: hidden;
    animation: stretch-secondary 4s 2.35s ease-in-out forwards;
    stroke-dasharray: 200%;
}

.stem3 {
    visibility: hidden;
    animation: stretch-secondary 4s 2.8s ease-in-out forwards;
    stroke-dasharray: 200%;
}

.stem4 {
    visibility: hidden;
    animation: stretch-secondary 4s 1.8s ease-in-out forwards;
    stroke-dasharray: 200%;
}


/* leafs */

.leaf1,
.leaf2 {
    animation: bloom 1s 1.8s linear forwards;
}

.leaf3,
.leaf4 {
    animation: bloom 1s 2.35s linear forwards;
}

.leaf5,
.leaf6 {
    animation: bloom 1s 2.8s linear forwards;
}


/* buds */

.bud1 {
    -webkit-transform-origin: 40% 20%;
    transform-origin: 40% 20%;
    animation: popping .5s 3.2s cubic-bezier(1, 0, 0, 1) forwards;
    transform-box: fill-box;
}

.bud2 {
    -webkit-transform-origin: 80% 80%;
    transform-origin: 80% 80%;
    animation: popping .5s 3.9s cubic-bezier(1, 0, 0, 1) forwards;
    transform-box: fill-box;
}

.bud3 {
    -webkit-transform-origin: 60% 20%;
    transform-origin: 60% 20%;
    animation: popping .5s 4.2s cubic-bezier(1, 0, 0, 1) forwards;
    transform-box: fill-box;
}

.bud4 {
    -webkit-transform-origin: 15% 35%;
    transform-origin: 15% 35%;
    animation: popping .5s 3.5s cubic-bezier(1, 0, 0, 1) forwards;
    transform-box: fill-box;
}


/* flowers */

.flower1 {
    visibility: hidden;
    animation: bloom 1s 4s linear forwards;
    stroke-width: 5 !important;
    stroke-dasharray: 200%;
}

.flower2 {
    visibility: hidden;
    animation: bloom 1s 4.4s linear forwards;
    stroke-dasharray: 200%;
    stroke-width: 5 !important;
}

.flower3 {
    visibility: hidden;
    animation: bloom 1s 4.7s linear forwards;
    stroke-dasharray: 200%;
    stroke-width: 5 !important;
}

.flower4 {
    visibility: hidden;
    animation: bloom 1s 3.7s linear forwards;
    stroke-dasharray: 200%;
    stroke-width: 5 !important;
}


/* dust */

article#dust-wrap {
    z-index: -1;
    animation: dust-on 3s 4.5s linear forwards;
    opacity: 0;
}

:root {
    --dust-color: rgb(255, 165, 0);
    --dust-glow-color: rgb(255, 192, 203);
    --logo-color: rgb(255, 255, 255);
    --logo-glow-color: rgba(255, 165, 0, .4);
    --bg-color1: rgb(0, 0, 0);
    --bg-color2: rgb(40, 10, 10);
}

section {
    position: fixed;
    z-index: 0;
    width: 100%;
    height: 100%;
}

section div {
    position: absolute;
    display: block;
    visibility: hidden;
    border-radius: 50%;
    background: var(--dust-color);
    filter: contrast(150%) saturate(200%)/* brightness(150%) */
    drop-shadow(0 0 5px var(--dust-glow-color)) drop-shadow(0 0 10px var(--dust-glow-color));
    -webkit-filter: contrast(150%) saturate(200%)/* brightness(150%) */
    drop-shadow(0 0 5px var(--dust-glow-color)) drop-shadow(0 0 10px var(--dust-glow-color));
    flex: none !important;
}

div.dust1:nth-of-type(1) {
    top: 10%;
    left: 30%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity3 10s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(2) {
    top: 43%;
    left: 40%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity2 8s 1s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(3) {
    top: 15%;
    left: 35%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity1 10s 1.5s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(4) {
    top: 13%;
    left: 40%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity3 8s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(5) {
    top: 32%;
    left: 32%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity1 8s 1s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(6) {
    top: 22%;
    left: 70%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity2 10s .5s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(7) {
    top: 28%;
    left: 74%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity3 8s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(8) {
    top: 24%;
    left: 75%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity2 10s 1s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(9) {
    top: 15%;
    left: 115%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity2 8s 1.5s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(10) {
    top: 10%;
    left: 110%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity3 8s 1s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(11) {
    top: 15%;
    left: 105%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity1 10s 1.5s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(12) {
    top: 5%;
    left: 5%;
    width: 1vmin;
    height: 1vmin;
    animation: dust-opacity3 10s 1s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(13) {
    top: 8%;
    left: 10%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity3 8s 1.5s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(14) {
    top: 35%;
    left: 110%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity1 8s 1.5s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(15) {
    top: 30%;
    left: 107%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity3 10s 1s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(16) {
    top: 22%;
    left: 137%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity3 10s 1s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(17) {
    top: 32%;
    left: 87%;
    width: 1vmin;
    height: 1vmin;
    animation: dust-opacity2 8s 1s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(18) {
    top: 42%;
    left: 127%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity2 10s 1s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(19) {
    top: 37%;
    left: 4%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity1 8s 1s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(20) {
    top: 22%;
    left: 190%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity3 10s .5s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(21) {
    top: 28%;
    left: 179%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity3 8s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(22) {
    top: 42%;
    left: 177%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity2 10s 1s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(23) {
    top: 60%;
    left: 30%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity2 10s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(24) {
    top: 93%;
    left: 40%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity3 8s 1s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(25) {
    top: 65%;
    left: 15%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity1 10s 1.5s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(26) {
    top: 63%;
    left: 50%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity1 8s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(27) {
    top: 82%;
    left: 32%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity2 8s 1s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(28) {
    top: 70%;
    left: 60%;
    width: 1vmin;
    height: 1vmin;
    animation: dust-opacity1 10s .5s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(29) {
    top: 78%;
    left: 74%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity3 8s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(30) {
    top: 74%;
    left: 75%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity1 10s 1s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(31) {
    top: 65%;
    left: 115%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity2 8s 1.5s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(32) {
    top: 60%;
    left: 100%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity1 8s 1s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(33) {
    top: 75%;
    left: 105%;
    width: 1vmin;
    height: 1vmin;
    animation: dust-opacity3 10s 1.5s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(34) {
    top: 55%;
    left: 5%;
    width: 1vmin;
    height: 1vmin;
    animation: dust-opacity2 10s 1s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(35) {
    top: 68%;
    left: 10%;
    width: 1vmin;
    height: 1vmin;
    animation: dust-opacity1 8s 1.5s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(36) {
    top: 95%;
    left: 110%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity3 8s 1.5s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(37) {
    top: 80%;
    left: 107%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity2 10s 1s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(38) {
    top: 72%;
    left: 147%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity2 10s 1s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(39) {
    top: 82%;
    left: 87%;
    width: 1vmin;
    height: 1vmin;
    animation: dust-opacity3 8s 1s infinite, dust-move 50s linear infinite;
}

div.dust1:nth-of-type(40) {
    top: 92%;
    left: 127%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity2 10s 1s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(41) {
    top: 87%;
    left: 11%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity3 8s 1s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(42) {
    top: 72%;
    left: 180%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity1 10s .5S infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(43) {
    top: 78%;
    left: 179%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity3 8s infinite, dust-move 40s linear infinite;
}

div.dust1:nth-of-type(44) {
    top: 82%;
    left: 167%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity2 10s 1s infinite, dust-move 50s linear infinite;
}

div.dust2:nth-of-type(45) {
    top: 10%;
    left: 30%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity3 10s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(46) {
    top: 43%;
    left: 40%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity1 8s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(47) {
    top: 15%;
    left: 35%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity3 10s 1.5s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(48) {
    top: 13%;
    left: 40%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity2 8s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(49) {
    top: 32%;
    left: 32%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity2 8s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(50) {
    top: 22%;
    left: 70%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity3 10s .5s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(51) {
    top: 28%;
    left: 74%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity2 8s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(52) {
    top: 24%;
    left: 75%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity2 10s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(53) {
    top: 15%;
    left: 115%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity3 8s 1.5s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(54) {
    top: 10%;
    left: 110%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity1 8s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(55) {
    top: 15%;
    left: 105%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity3 10s 1.5s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(56) {
    top: 5%;
    left: 5%;
    width: 1vmin;
    height: 1vmin;
    animation: dust-opacity2 10s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(57) {
    top: 8%;
    left: 10%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity1 8s 1.5s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(58) {
    top: 35%;
    left: 110%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity3 8s 1.5s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(59) {
    top: 30%;
    left: 107%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity2 10s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(60) {
    top: 22%;
    left: 137%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity3 10s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(61) {
    top: 32%;
    left: 87%;
    width: 1vmin;
    height: 1vmin;
    animation: dust-opacity2 8s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(62) {
    top: 42%;
    left: 127%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity3 10s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(63) {
    top: 37%;
    left: 4%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity1 8s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(64) {
    top: 22%;
    left: 190%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity3 10s .5s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(65) {
    top: 28%;
    left: 179%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity3 8s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(66) {
    top: 42%;
    left: 177%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity2 10s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(67) {
    top: 60%;
    left: 30%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity3 10s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(68) {
    top: 93%;
    left: 40%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity1 8s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(69) {
    top: 65%;
    left: 15%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity2 10s 1.5s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(70) {
    top: 63%;
    left: 50%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity1 8s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(71) {
    top: 82%;
    left: 32%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity2 8s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(72) {
    top: 70%;
    left: 60%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity3 10s .5s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(73) {
    top: 18%;
    left: 74%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity2 8s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(74) {
    top: 74%;
    left: 75%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity3 10s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(75) {
    top: 65%;
    left: 115%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity2 8s 1.5s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(76) {
    top: 60%;
    left: 100%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity3 8s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(77) {
    top: 75%;
    left: 105%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity1 10s 1.5s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(78) {
    top: 55%;
    left: 5%;
    width: 1vmin;
    height: 1vmin;
    animation: dust-opacity2 10s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(79) {
    top: 68%;
    left: 10%;
    width: 1vmin;
    height: 1vmin;
    animation: dust-opacity2 8s 1.5s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(80) {
    top: 95%;
    left: 110%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity3 8s 1.5s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(81) {
    top: 80%;
    left: 107%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity3 10s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(82) {
    top: 72%;
    left: 147%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity2 10s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(83) {
    top: 82%;
    left: 87%;
    width: 1vmin;
    height: 1vmin;
    animation: dust-opacity1 8s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(84) {
    top: 92%;
    left: 127%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity3 10s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(85) {
    top: 87%;
    left: 11%;
    width: 1.2vmin;
    height: 1.2vmin;
    animation: dust-opacity2 8s 1s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(86) {
    top: 72%;
    left: 180%;
    width: 1vmin;
    height: 1vmin;
    animation: dust-opacity3 10s .5s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(87) {
    top: 78%;
    left: 179%;
    width: .8vmin;
    height: .8vmin;
    animation: dust-opacity1 8s infinite, dust-move2 50s 16s linear infinite;
}

div.dust2:nth-of-type(88) {
    top: 82%;
    left: 167%;
    width: 1.1vmin;
    height: 1.1vmin;
    animation: dust-opacity2 10s 1s infinite, dust-move2 50s 16s linear infinite;
}


/*
鈻€鈻勨杸鈻勨杸鈻勨杸鈻勨杸鈻勨杸鈻� ANIMATIONS 鈻€鈻勨杸鈻勨杸鈻勨杸鈻勨杸鈻勨杸鈻�
*/

@keyframes bloom {
    to {
        visibility: visible;
    }
}

@keyframes dust-on {
    to {
        opacity: 1;
    }
}

@keyframes dust-move {
    from {
        transform: translate3d(0, -100vh, 0);
    }
    50% {
        transform: translate3d(-8rem, 0, 0);
    }
    to {
        visibility: visible;
        transform: translate3d(0, 100vh, 0);
    }
}

@keyframes dust-move2 {
    from {
        transform: translate3d(0, -100vh, 0);
    }
    50% {
        transform: translate3d(-4rem, 0, 0);
    }
    to {
        visibility: visible;
        transform: translate3d(0, 100vh, 0);
    }
}

@keyframes dust-opacity1 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: .5;
    }
    20% {
        opacity: 1;
    }
    30% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    90% {
        opacity: .5;
    }
    100% {
        opacity: 0;
    }
}

@keyframes dust-opacity2 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: .3;
    }
    20% {
        opacity: .6;
    }
    30% {
        opacity: .6;
    }
    40% {
        opacity: .6;
    }
    50% {
        opacity: .6;
    }
    60% {
        opacity: .6;
    }
    70% {
        opacity: .6;
    }
    80% {
        opacity: .6;
    }
    90% {
        opacity: .3;
    }
    100% {
        opacity: 0;
    }
}

@keyframes dust-opacity3 {
    0% {
        opacity: 0;
    }
    10% {
        opacity: .15;
    }
    20% {
        opacity: .3;
    }
    30% {
        opacity: .3;
    }
    40% {
        opacity: .3;
    }
    50% {
        opacity: .3;
    }
    60% {
        opacity: .3;
    }
    70% {
        opacity: .3;
    }
    80% {
        opacity: .3;
    }
    90% {
        opacity: .15;
    }
    100% {
        opacity: 0;
    }
}

@keyframes flapping-left {
    to {
        transform: rotate(-55deg);
    }
}

@keyframes flapping-right {
    to {
        transform: rotate(55deg);
    }
}

@keyframes fly-left {
    from {
        transform: rotate(-25deg) translate3d(10rem, 0rem, 0);
    }
    50% {
        transform: rotate(0deg) translate3d(10rem, 3rem, 0);
    }
    to {
        visibility: visible;
        transform: rotate(-25deg) translate3d(10rem, 0rem, 0);
    }
}

@keyframes fly-right {
    0% {
        transform: translate3d(44rem, 13.5rem, 0);
    }
    10% {
        transform: translate3d(44rem, 13.5rem, 0);
    }
    20% {
        transform: translate3d(44rem, 13.5rem, 0);
    }
    30% {
        transform: translate3d(41.5rem, 16rem, 0);
    }
    40% {
        transform: translate3d(39rem, 18.5rem, 0);
    }
    50% {
        transform: translate3d(41.5rem, 21rem, 0);
    }
    60% {
        transform: translate3d(44rem, 23.5rem, 0);
    }
    70% {
        transform: translate3d(46.5rem, 21rem, 0);
    }
    80% {
        transform: translate3d(49rem, 18.5rem, 0);
    }
    90% {
        transform: translate3d(46.5rem, 16rem, 0);
    }
    100% {
        visibility: visible;
        transform: translate3d(44rem, 13.5rem, 0);
    }
}

@keyframes fly2-left {
    0% {
        transform: translate3d(30rem, 15rem, 0);
    }
    25% {
        transform: translate3d(25rem, 15rem, 0);
    }
    50% {
        transform: translate3d(30rem, 15rem, 0);
    }
    75% {
        transform: translate3d(35rem, 15rem, 0);
    }
    100% {
        visibility: visible;
        transform: translate3d(30rem, 15rem, 0);
    }
}

@keyframes fly2-right {
    from {
        transform: rotate(-25deg) translate3d(12rem, 3rem, 0);
    }
    50% {
        transform: rotate(0);
    }
    to {
        visibility: visible;
        transform: rotate(-25deg) translate3d(12rem, 3rem, 0);
    }
}

@keyframes font-animate {
    to {
        opacity: 1;
    }
}

@keyframes popping {
    from {
        visibility: visible;
        transform: scale(.7);
    }
    50% {
        transform: scale(1);
    }
    to {
        visibility: hidden;
        transform: scale(.7);
    }
}

@keyframes stretch {
    from {
        stroke-dashoffset: 200%;
    }
    to {
        visibility: visible;
        stroke-dashoffset: 0;
    }
}

@keyframes stretch-secondary {
    from {
        stroke-dashoffset: 200%;
    }
    to {
        visibility: visible;
        stroke-dashoffset: 0;
    }
}

.color_white{
    color: #fff;
}
.row_class{
    display: flex;
    flex-direction: row;
}
.column_class{
    display: flex;
    flex-direction: column;
}
.span_one_line {
    white-space: nowrap;
    /*强制span不换行*/
    display: inline-block;
    /*将span当做块级元素对待*/
    /*限制宽度*/
    overflow: hidden;
    /*超出宽度部分隐藏*/
    text-overflow: ellipsis;
    /*超出部分以点号代替*/
}