body { padding: 0; margin: 0 }
#unity-container { position: fixed; width: 100%; height: 100%; }
#unity-canvas { width: 100%; height: 100%; background: translate no-repeat center }
#MCanvas { text-align: center; width: 100%; height: 100%; background: translate no-repeat center;background-size:100% 100%; filter: blur(5px); }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block }
#unity-logo { width: 900px; height: 900px;background: url('loadingBg.png') no-repeat center}
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: transparent; padding: 10px; display: none }
#MUnitylogo{ width: 100%; height: 100%; background: url('mUnityLogo.png') no-repeat center; animation: opacityAnimation 1.5s; animation-iteration-count: 1;animation-fill-mode: forwards;display: block; }
.text {
	position: absolute; /* 文字的绝对定位 */
	top: 50%; /* 放置在容器的垂直中间 */
	left: 50%; /* 放置在容器的水平中间 */
	margin-top: -16px;
	transform: translate(-50%, -50%); /* 使文字居中定位 */
	color: #765DEF; /* 文字颜色 */
	font-size: 14px; /* 文字大小 */
	font-weight: bold; /* 粗体 */
}
#unity-progress-bar-empty  {
	position: absolute; /* 文字的绝对定位 */
	top: 50%; /* 放置在容器的垂直中间 */
	left: 50%; /* 放置在容器的水平中间 */
	margin-left: -135px;
    border: 1px solid #2D98FF; /* 蓝色边框，像素为2 */
    background-color: transparent; /* 底框透明 */
	width: 270px;  
	height: 10px;
	border-radius: 5px;
}
#unity-progress-bar-full  {
	margin-top: -1px;
	height: 10px;
	width: 0%;  
	background-color: #2D98FF;
	border-radius: 5px;
}

.loading {
	position: absolute;
	/* 居中 */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* 高度 */
	height: 40px;
	/* 弹性布局 */
	display: flex;
	/* 设置子项在y轴方向居中，应该是设置起点在中间，非常有用，不然动画很怪 */
	align-items: center;
}

/* 自建UnityLogo透明度变化 */
@keyframes opacityAnimation {
  0% {
	transform: scale(0.95);
    opacity: 0.5; /* 初始状态，设置透明度为0.5 */
  }
  50% {
	transform: scale(1);
    opacity: 1; /* 中间状态，设置透明度为1 */
  }
  80% {
    opacity: 0.5; /* 结束状态，再次设置透明度为0.5 */
  }
  100% {
    opacity: 0; /* 结束状态，再次设置透明度为0 */
  }
}
/* 网页窗口 */
.frame{
  width: 100%;
  height: 100%;
  background: transparent;
  position: fixed;
  top: 0;
  right: 0;
  box-shadow: -2px 0 12px #ccc;
  z-index: 99;
  display: none;
}
/* 小竖条 */
.item {
	height: 50px;
	width: 5px;
	background: white;
	/* 加margin，使竖条之间有空隙 */
	margin: 0px 3px;
	/* 圆角 */
	border-radius: 10px;
	/* 动画：名称、时间、循环 */
	animation: loading 1s infinite;
}
/* 设置动画 */
@keyframes loading {
	0%  { height: 0px;  }
	50% { height: 50px; }
	100%{ height: 0px;	}
}
/* 为每一个竖条设置延时 */
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }
.item:nth-child(4) { animation-delay: 0.3s; }
.item:nth-child(5) { animation-delay: 0.4s; }
.item:nth-child(6) { animation-delay: 0.5s; }
.item:nth-child(7) { animation-delay: 0.6s; }
.item:nth-child(8) { animation-delay: 0.7s; }