html,body {
  min-height:100%;	
  padding: 0;
}
body{
	background: linear-gradient(
    to bottom,
    #4ed8ff 0%,   /* 天蓝 */
    #bce6fa 25%,  /* 浅蓝 */
    #f7c6ec 50%,  /* 粉色 */
    #f9b890 75%,  /* 橙粉 */
    #fff2a8 100%  /* 淡黄 */
  );
  padding: 0;
  margin: 0;
}
@keyframes box-glow {
  0% {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 255, 255, 1);
  }
  100% {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  }
}
.container{
	min-height: 100%;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-content: center;
	
}
.top{
	
}
.main{
	
}
.logo{
	width: 180px;
	height: 180px;
	margin:60px auto 20px auto;
	background: #FFFFFF;
	border-radius: 50%;
	animation: box-glow 3s infinite linear;
}
.logo img{
	width: 100%;
	height: 100%;
}
.title{
	font-size: 88px; 
	text-align: center;
	font-family: "微软雅黑";
	color: #FFFFFF;
	text-shadow: 1px 1px 0 #888,
               2px 2px 0 #888,
               3px 3px 0 #888;
}
.slogan{
	text-align: center;
	margin-top: 30px;
	color: #3CB87F;
	font-size: 68px;
	text-shadow: 1px 1px 0 #FFF,
               2px 2px 0 #FFF,
               3px 3px 0 #FFF;
}
.ml30{
	margin-left:30px;
}
.qrbox{
	display: flex;
	margin: 60px auto;
	justify-content: center;
}
.qrbox div{
	width: 180px;
}
.qrbox div img{
	width: 100%;
}
.qrbox div h1{
	text-align: center;
	font-size: 18px;
	font-weight: normal;
}
.footer{
	
	text-align: center;
	margin-bottom: 30px;
}

@media (max-width: 580px){
	html,body {
	  min-height: 100%;	
	  padding: 0;
	}
	.logo{
		width: 120px;
		height: 120px;
		margin-top: 30px;
	}
	.title{
		font-size: 38px;
	}
	.slogan{
		font-size: 28px;
	}
	.qrbox{
		flex-direction: column;
		align-content: center;
		align-items: center;
	}
	.qrbox div{
		width: 180px;
	}
	.qrbox div.ml30{
		margin-left: 0;
	}
}