@charset "utf-8";
/* CSS Document */

*{
	padding:0px;
	margin:0px;
}
html{
	font-family: "Microsoft YaHei UI", "sans-serif", "serif", "Microsoft Sans Serif", Arial;
	font-size: 12px;
	text-align: center;
	background: #191308;
	background:url(../images/bg.jpg) no-repeat;
	background-size:cover;
	position: relative;
	overflow: hidden;
}
a{text-decoration: none;}

.container{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
	height: 30%;
	margin: 12% 0 0 -25%;
}

.content{
	margin: 0 auto;
	color: white;
	width:40%;
	height:420px;
	background: #151515;
	border: 1px solid #363636;
	border-radius: 20px;
}
.logo{margin-top: 6%; -webkit-animation:run 6s linear 0s infinite;}
@-webkit-keyframes run{
			from{
				-webkit-transform:rotate(0deg);
			}
			to{
				-webkit-transform:rotate(360deg);
			}
}
h2{color:#fdf26e; font-size: 1.6em; font-weight: normal; margin: 5% 0;}
.txt p{font-size: 1.2em; line-height: 220%;}
.txt p b{color:#f3a751}
.content a{display: block; width: 50%; height: 11%; background:linear-gradient(to bottom, #ffff7a , #f7cb4a , #ffff7a); margin: 0 auto; margin-top: 8%; border-radius: 30px; line-height: 220%; font-size: 1.7em; color: #683900;}
.content a:hover{background:linear-gradient(to bottom, #ffffae , #f8d46b , #ffffae);}

@media screen and (max-width:1366px){
	html{
		background: url(../images/bg.jpg) no-repeat;
		background-color: #191308;
	}
	.container{
		position: fixed;
		top:50%;
		left:70%;
		width: 50%;
		height: 50%;
		-webkit-transform: translateX(-50%) translateY(-50%);
		-moz-transform: translateX(-50%) translateY(-50%);
		-ms-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
	}
	.content{
		padding-top: 2em;
		padding-bottom: 2em;
	}
}

@media screen and (min-width: 320px) and (max-width: 359px) {
	.container{
		left:60%;
	}
	.content{
		width: 160%;
	}
}
@media screen and (min-width: 360px) and (max-width: 411px) {
	.container{
		left:63%;
	}
	.content{
		width: 150%;
		height: 112%;
	}
}
@media screen and (min-width: 412px) and (max-width: 767px) {
	.container{
		left:65%;
	}
	.content{
		width: 140%;
	}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.container{
		left:70%;
	}
	.content{
		width: 120%;
	}
}
@media screen and (min-width: 1024px) and (max-width: 1366px) {
	.container{
		top:50%;
		left:70%;
	}
	.content{
		width: 120%;
	}
}

@media screen and (max-height:812px){
	.container{
		top:37%;
	}
	.content{
		height: 120%;
	}
}
@media screen and (min-height:480px) and (max-height:567px){
	.container{
		top:30%;
	}
	.content{
		height: 130%;
		padding-top: 0;
	}
	.content a{
		line-height: 190%;
		font-size: 1.6em;
	}
}
@media screen and (min-height:568px) and (max-height:639px){
	.container{
		top:32%;
	}
	.content{
		height: 120%;
		padding-top: 0;
	}
	.content a{
		line-height: 190%;
		font-size: 1.6em;
	}
}
@media screen and (min-height:640px) and (max-height:666px){
	.container{
		top:36%;
	}
	.content{
		height: 108%;
		padding-top: 0;
	}
	.content a{
		line-height: 190%;
	}
}
@media screen and (min-height:667px) and (max-height:735px){
	.container{
		top:36%;
	}
	.content{
		height: 110%;
		padding-top: 0;
	}
	.content a{
		line-height: 200%;
		width: 52%;
		height: 11.4%;
	}
}
@media screen and (min-height:736px) and (max-height:811px){
	.container{
		top:40%;
	}
	.content{
		height: 100%;
		padding-top: 0;
	}
	.content a{
		line-height: 200%;
	}
}
@media screen and (min-height:812px) and (max-height:823px){
	.container{
		top:40%;
	}
	.content{
		height: 90%;
		padding-top: 0;
		padding-bottom: 0;
	}
	.content a{
		line-height: 200%;
		width: 52%;
	}
}
@media screen and (min-height:1024px) and (max-height:1365px){
	.container{
		top:40%;
	}
	.content{
		height: 80%;
	}
}