* {
	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=2);
}

#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 {
	z-index: 7008;
	position: absolute;
	left: 50%;
	overflow: hidden;
}

#particle.bubbles{
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
}
  
#fishCtn {
	position: absolute;
	left: 50%;
	width: 80px;
	height: 49px;
	z-index: 7200;
	display: flex;
	align-items: center;
}

#fish {
	width: 100%;
    height: 0;
    padding-bottom: 61.25000000000001%;
    background-image: url("../img/install/fish.png");
    background-size: 700% 100%;
    background-repeat: no-repeat;
    animation-name: keyframes-fish;
    animation-duration: 0.28s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-timing-function: steps(1);
}
  
@keyframes keyframes-fish {
    0% {
        width: 100%;
        height: 0;
        padding-bottom: 61.25000000000001%;
        background-image: url("../img/install/fish.png");
        background-size: 700% 100%;
    }

    14.29% {
        background-position: 16.666666666666664% 0%;
    }

    28.57% {
        background-position: 33.33333333333333% 0%;
    }

    42.86% {
        background-position: 50% 0%;
    }

    57.14% {
        background-position: 66.66666666666666% 0%;
    }

    71.43% {
        background-position: 83.33333333333334% 0%;
    }

    85.71%,
    100% {
        background-position: 100% 0%;
    }
}