html, body, #app {
    height: 100%;
}

body {
    margin: 0;
}

.init-loading{
    width: 40px;
    height: 40px;
    position: relative;
    margin: 0 auto;
}
.init-loading span{
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
    position: absolute;
    animation: load 1.04s ease infinite;
    -webkit-animation: load 1.04s ease infinite;
}
@keyframes load {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.init-loading span:nth-child(1){
    left: 0;
    top: 50%;
    margin-top:-2px;
    animation-delay: 0.13s;
    -webkit-animation-delay:0.13s;
}
.init-loading span:nth-child(2){
    left: 5px;
    top: 5px;
    animation-delay: 0.26s;
    -webkit-animation-delay:0.26s;
}
.init-loading span:nth-child(3){
    left: 50%;
    top: 0;
    margin-left: -2px;
    animation-delay: 0.39s;
    -webkit-animation-delay:0.39s;
}
.init-loading span:nth-child(4){
    top: 5px;
    right:4px;
    animation-delay: 0.25s;
    -webkit-animation-delay:0.52s;
}
.init-loading span:nth-child(5){
    right: 0;
    top: 50%;
    margin-top:-2px;
    animation-delay: 0.65s;
    -webkit-animation-delay:0.65s;
}
.init-loading span:nth-child(6){
    right: 4px;
    bottom:4px;
    animation-delay: 0.78s;
    -webkit-animation-delay:0.78s;
}
.init-loading span:nth-child(7){
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    animation-delay: 0.91s;
    -webkit-animation-delay:0.91s;
}
.init-loading span:nth-child(8){
    bottom: 4px;
    left: 6px;
    animation-delay: 1.04s;
    -webkit-animation-delay:1.04s;
}

.explorer-icon-1, .explorer-icon-10, .explorer-icon-11, .explorer-icon-12, .explorer-icon-13, 
.explorer-icon-14, .explorer-icon-15, .explorer-icon-2, .explorer-icon-3, .explorer-icon-4, 
.explorer-icon-5, .explorer-icon-6, .explorer-icon-7, .explorer-icon-8, .explorer-icon-9
{ display: inline-block; background: url('../img/explorer/icons.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
 
.explorer-icon-1 { background-position: -1px -0px; width: 20px; height: 20px; }
.explorer-icon-10 { background-position: -22px -0px; width: 20px; height: 20px; }
.explorer-icon-11 { background-position: -43px -0px; width: 20px; height: 20px; }
.explorer-icon-12 { background-position: -1px -21px; width: 20px; height: 20px; }
.explorer-icon-13 { background-position: -22px -21px; width: 20px; height: 20px; }
.explorer-icon-14 { background-position: -43px -21px; width: 20px; height: 20px; }
.explorer-icon-15 { background-position: -1px -42px; width: 20px; height: 20px; }
.explorer-icon-2 { background-position: -22px -42px; width: 20px; height: 20px; }
.explorer-icon-3 { background-position: -43px -42px; width: 20px; height: 20px; }
.explorer-icon-4 { background-position: -1px -63px; width: 20px; height: 20px; }
.explorer-icon-5 { background-position: -22px -63px; width: 20px; height: 20px; }
.explorer-icon-6 { background-position: -43px -63px; width: 20px; height: 20px; }
.explorer-icon-7 { background-position: -1px -84px; width: 20px; height: 20px; }
.explorer-icon-8 { background-position: -22px -84px; width: 20px; height: 20px; }
.explorer-icon-9 { background-position: -43px -84px; width: 20px; height: 20px; }


.slide-fade-enter-active {
    transition: all 0.2s ease-out;
}
  
.slide-fade-leave-active {
    transition: all 0.2s ease-in;
}
  
.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateY(-200px);
    opacity: 0;
}