@charset "utf-8";
*{font-family: 微软雅黑;}
body{background: #303030; user-select: none;}
.header{
	width:99%;
	height: 18%;
	position: absolute;
	top: 2%;
	box-shadow: inset 4px 4px 4px #303030, inset -4px -4px 4px #303030;
	background: #ffbb00;
}
h1{
	position: absolute;
	top:50%;
	left:50%;
	color: #fff;
	font-size: 2em;
	font-weight: 400;
	letter-spacing: 5px;
	transform: translate(-50%,-80%);
}
.container{
	width:100%;
	height: 70%;
	position: absolute;
	left: 0%;
	top:20%;
	display: grid;
	grid-template-rows: repeat(2,1fr);
	grid-template-columns: repeat(8,1fr);
	background: #303030;
}
.tag{
	position: relative;
	margin:20px 10px;
	border: 1px solid #454545;
	border-radius: 5px;
}
.tag img{
	position: absolute;
	top:36%;
	left:50%;
	transform: translate(-50%,-50%);
	width:80%;
}
.tag .gun_name{
	position: absolute;
	bottom: 0;
	left: 0;
	width:100%;
	height: 30%;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
.red{
	background: #EB4B4B;
}
.pink{
	background: #D32CE6;			
}
.purple{
	background: #8847FF;			
}
.blue{
	background: #4B69FF;			
}
.tag .gun_name h5{
	margin: 13px;
	position: absolute;
	top:50%;
	transform: translateY(-91%);
	color:#fff;
	font-weight: 400;
}
.tag .gun_tag_red{
	position: absolute;
	right: 0;
	margin: 5px;
	background: #EB4B4B;
	width:50px;
	height:20px;
	border-radius: 5px;
}
.tag .gun_tag_pink{
	position: absolute;
	right: 0;
	margin: 5px;
	background: #D32CE6;
	width:50px;
	height:20px;
	border-radius: 5px;
}
.tag .gun_tag_purple{
	position: absolute;
	right: 0;
	margin: 5px;
	background: #8847FF;
	width:50px;
	height:20px;
	border-radius: 5px;
}
.tag .gun_tag_blue{
	position: absolute;
	right: 0;
	margin: 5px;
	background: #4B69FF;
	width:50px;
	height:20px;
	border-radius: 5px;
}
.tag h6{
	position: absolute;
	color: #fff;
	margin:0;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-weight: 600;
}
#btn{
	position: absolute;
	bottom: 2%;
	left:50%;
	transform: translateX(-50%);
	width:99%;
	background: #00bc8c;
	text-align: center;
	height: 6%;
	border-radius: 5px;
	color:#fff;
	letter-spacing: 13px;
	cursor: pointer;
}
#btn:hover{
	box-shadow: 3px 6px 9px #FFBB00, -3px -6px 9px #FFBB00, 3px -6px 9px #ffbb00, -3px 6px 9px #ffbb00; 
	transition: .52s;
}
#btn:active{
	width:80%;
	height: 4%;
	transition: none;
	bottom: 3%;
}
h4{
	position: absolute;
	margin: 0;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	font-size:1.3em;
	font-weight: 400;
}
.prize{
	border-radius: 13px;
	border:1px #454545 solid;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: #303030;
	height: 360px;
	width:400px;
	visibility: hidden;
}
.prize .tag{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-55%,-55%);
	background: #303030;
	height:200px;
	width:150px;
}
.prize .btn{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 3%;
	border-radius: 5px;
	cursor:pointer;
	color: #fff;
	background: #00bc8c;
	padding: 5px 13px;
}
h2{
	color:#fff;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top:3%;
}