* {
    padding: 0;
    margin: 0;
}

ul,
ol,
li {
    list-style: none;
}

html {
    height: 100%;
}

body {
    height: 100%;
    background: black;
}

#app,
#kitty {
    position: relative;
    width: 100%;
    height: 100%;
    margin: auto;
    overflow: hidden;
}

#orientation {
    z-index: 10000;
}

#loadingPage {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#bg0 {
    position: absolute;
    top: 0%;
    left: 50%;
    z-index: 7000;
}

#logo {
    position: absolute;
    left: 50%;
    z-index: 7003;
}

#rotatCircle {
    position: absolute;
    left: 50%;
    z-index: 7004;
}

#rotatParticles1 {
    position: absolute;
    left: 50%;
    z-index: 7005;
    -webkit-animation: round_animate1 100s linear infinite;
    animation: round_animate1 100s linear infinite;
}

@keyframes round_animate1 {
    to {
        transform: rotate(-1turn);
    }
}

#rotatParticles2 {
    position: absolute;
    left: 50%;
    z-index: 7006;
    -webkit-animation: round_animate2 100s linear infinite;
    animation: round_animate2 100s linear infinite;
}

@keyframes round_animate2 {
    to {
        transform: rotate(1turn);
    }
}

#loadText {
    position: absolute;
    left: 50%;
    z-index: 7008;
    width: 100%;
    font-family: Microsoft YaHei;
    font-size: 26px;
    font-weight: 400;
    text-align: center;
    color: #FFFFFF;
    text-shadow: 0px 6px 1px rgba(0, 0, 0, 0.2);
}

#tips {
    position: absolute;
    top: 70%;
    left: 50%;
    z-index: 7004;
    width: 100%;
    font-family: Microsoft YaHei;
    font-size: 26px;
    font-weight: 400;
    text-align: center;
    color: #FFFFFF;
    text-shadow: 0px 6px 1px rgba(0, 0, 0, 0.2);
}

#loadbg {
    position: absolute;
    left: 50%;
    z-index: 7006;
    background-image: url(../img/install/loadingBG.png?v=1);
}

#pre {
    position: absolute;
    left: 50%;
    z-index: 7007;
    background-image: url(../img/install/loading.png?v=1);
}

#progress {
    position: relative;
    z-index: 7009;
    width: 100%;
    font-family: Microsoft YaHei;
    font-size: 26px;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 0px 6px 1px rgba(0, 0, 0, 0.2);
}

#particle {
    position: absolute;
    left: 50%;
    z-index: 7200;
    width: 80px;
    height: 49px;
}

#flashLight {
    width: 100%;
    height: 0;
    padding-bottom: 109.48275862068965%;
    background: url(../img/install/flashLight.png?v=1) 0% 0%/300% 100% no-repeat;
    animation: keyframes-flashLight 0.12s steps(1) infinite forwards;
}

@keyframes keyframes-flashLight {
    0% {
        width: 100%;
        height: 0;
        padding-bottom: 109.48275862068965%;
        background-size: 300% 100%;
    }
    33.33% {
        background-position: 50% 0%;
    }
    66.67%,
    100% {
        background-position: 100% 0%;
    }
}