* {margin: 0;padding: 0;}
html,body {
	height: 100%;
}
body {
	background: url(../img/bg_3.png);
	background-size:100%;
	background-position:top;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #dbf1fc;
}
img {width:100%}
.rule {
	width: 100%;
}
.rule_item {
	width: 25%;
	margin: 10px 10px;
	float: left;
}
.rule_item img {
	width: 100%;
}

.name {
	display: none;
}
.n_login {
	margin-top: 10px;
	margin-right: 20px;
}
.n_login img {
	width: 80%
}
.topic {
	width: 90%;
}
.match {
	flex: 1;
   
}
.time {
	flex: 3;
	display: flex;
	align-items: center;
	flex-direction: column;
	margin: 0px 10px;
}
.time p {
	color:#88cee9;
	font-style:italic;
	font-weight:bold;
}
.d_time {
	flex:1; 
}
.state {
	font-size: 1em;
	flex:1; 
 	margin: 0px 10px;
	display: flex;
	justify-content: center;
	align-items:center;
}

.state button {
	height:2em;
	width:6em;
	border-radius: 15px;
	border: 1px solid #88cee9;
	background: linear-gradient(30deg,#88cee9,#bdebec); 
	color: #fff;
	
}
.ready button {
	background: linear-gradient(30deg,#b7b7b8,#f3ffff); 
	color: #fff;
	
}
.number {
	font-size: 1em;
	display: flex;
	width: 3em;
	align-items: center;
}
i {
	color: #d61e1e;
	font-weight: bold;
	font-size: 1em;
}
.footer {
    text-align: center;
    font-size: 12px;
    color: #777;
    margin: 30px 0;
}