@charset "UTF-8";

/*------------------------------index.css------------------------------*/
html{
    display: flex;
    /*border: 0px solid #0035b8;*/
    box-sizing: border-box;
    height: 100%;
}
body{
    flex: auto;
    /*border: 0px solid #cf00d2;*/
    margin: 0;
    display: flex;
    flex-direction: column;
}
#RouterContainer{
    flex: auto;
    /*border: 0px solid #8cc2f8;*/
    display: flex;
    flex-direction: column;
}

/*------------------------------loader.css------------------------------*/

.loader{
    position:absolute;
    left:45%;
    top: 300px;
    z-index:1;}

.loader section{
    width: 250px;}

.loader section div{
    width:12px;
    height:12px;
}


.gridiron {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    animation: loadAll 0.5s linear 0s; }

/** 加载动画的静态样式 **/
.gridiron div {
    width: 8px;
    height: 8px; }

/** 加载动画 **/
@keyframes loadAll {
    0% {
        opacity: 0; }
    100% {
        opacity: 1; } }
@keyframes load1 {
    0% {
        opacity: 1;
        background: #02c908; }
    100% {
        opacity: 0;
        background: #02c908; } }
@keyframes load2 {
    0% {
        opacity: 1;
        background: #02c908; }
    89% {
        opacity: 0.1;
        background: #02c908; }
    90% {
        opacity: 1;
        background: #02c908; }
    95% {
        opacity: 0.95;
        background: #02c908; }
    99% {
        opacity: 0.9;
        background: #02c908; } }
@keyframes load3 {
    0% {
        opacity: 1;
        background: #02c908; }
    79% {
        opacity: 0.2;
        background: #02c908; }
    80% {
        opacity: 1;
        background: #02c908; }
    90% {
        opacity: 0.9;
        background: #02c908; }
    99% {
        opacity: 0.8;
        background: #02c908; } }
@keyframes load4 {
    0% {
        opacity: 1;
        background: #02c908; }
    69% {
        opacity: 0.3;
        background: #02c908; }
    70% {
        opacity: 1;
        background: #02c908; }
    85% {
        opacity: 0.85;
        background: #02c908; }
    99% {
        opacity: 0.7;
        background: #02c908; } }
@keyframes load5 {
    0% {
        opacity: 1;
        background: #02c908; }
    59% {
        opacity: 0.4;
        background: #02c908; }
    60% {
        opacity: 1;
        background: #02c908; }
    80% {
        opacity: 0.8;
        background: #02c908; }
    99% {
        opacity: 0.6;
        background: #02c908; } }
@keyframes load6 {
    0% {
        opacity: 1;
        background: #02c908; }
    49% {
        opacity: 0.5;
        background: #02c908; }
    50% {
        opacity: 1;
        background: #02c908; }
    75% {
        opacity: 0.75;
        background: #02c908; }
    99% {
        opacity: 0.5;
        background: #02c908; } }
@keyframes load7 {
    0% {
        opacity: 1;
        background: #02c908; }
    39% {
        opacity: 0.6;
        background: #02c908; }
    40% {
        opacity: 1;
        background: #02c908; }
    70% {
        opacity: 0.7;
        background: #02c908; }
    99% {
        opacity: 0.4;
        background: #02c908; } }
@keyframes load8 {
    0% {
        opacity: 1;
        background: #02c908; }
    29% {
        opacity: 0.7;
        background: #02c908; }
    30% {
        opacity: 1;
        background: #02c908; }
    65% {
        opacity: 0.65;
        background: #02c908; }
    99% {
        opacity: 0.3;
        background: #02c908; } }
@keyframes load9 {
    0% {
        opacity: 1;
        background: #02c908; }
    19% {
        opacity: 0.8;
        background: #02c908; }
    20% {
        opacity: 1;
        background: #02c908; }
    60% {
        opacity: 0.6;
        background: #02c908; }
    99% {
        opacity: 0.2;
        background: #02c908; } }
@keyframes load10 {
    0% {
        opacity: 1;
        background: #02c908; }
    9% {
        opacity: 0.9;
        background: #02c908; }
    10% {
        opacity: 1;
        background: #02c908; }
    55% {
        opacity: 0.55;
        background: #02c908; }
    99% {
        opacity: 0.1;
        background: #02c908; } }
@keyframes load11 {
    0% {
        opacity: 1;
        background: #02c908; }
    50% {
        opacity: 0.5;
        background: #02c908; }
    99% {
        opacity: 0;
        background: #02c908; } }
.gridiron div:nth-child(1) {
    animation: load1 1.3s linear 0s infinite; }

.gridiron div:nth-child(2) {
    animation: load2 1.3s linear 0.065s infinite; }

.gridiron div:nth-child(3) {
    animation: load3 1.3s linear 0.13s infinite; }

.gridiron div:nth-child(4) {
    animation: load4 1.3s linear 0.195s infinite; }

.gridiron div:nth-child(5) {
    animation: load5 1.3s linear 0.26s infinite; }

.gridiron div:nth-child(6) {
    animation: load6 1.3s linear 0.325s infinite; }

.gridiron div:nth-child(7) {
    animation: load7 1.3s linear 0.39s infinite; }

.gridiron div:nth-child(8) {
    animation: load8 1.3s linear 0.455s infinite; }

.gridiron div:nth-child(9) {
    animation: load9 1.3s linear 0.52s infinite; }

.gridiron div:nth-child(10) {
    animation: load10 1.3s linear 0.585s infinite; }

.gridiron div:nth-child(11) {
    animation: load11 1.3s linear 0.65s infinite; }





/*------------------------------loader.css------------------------------*/