公共样式*/

body,div,p,ul,li,ol,li,dl,dd,dt,h1,h2,h3,h4,h5,h6,input,img{

	padding:0;

	margin:0;

	list-style:none;

}

html{

	font-family: "microsoft yahei","heiti","Helvetica";

	font-size:100px;

}

body{

	width: 100%;

	margin: 0 auto;

	background-color:#BC0A0C; 

}

a{

	color: #fff!important;

	text-decoration: none;	

	cursor: pointer;

}

.left{

	float: left;

}

.right{

	float: right;

}

.clear{

	clear: both;

}

.clearfloat:after{

	content:".";

	display: block;

	visibility: hidden;

	height:0;

	clear:both;

}

/*本页样式*/

/*.main{

	position: fixed;

	width: 100%;

	height: 100%;

	background:url(../image/bg.jpg) no-repeat center center;

	background-attachment: fixed;

	background-size: cover;

}*/

.content{

	position: fixed;

	left: 0;

	right: 0;

	top:50%;

	transform:translateY(-50%);

	background: none;

}

.content .content_top img:first-child{

	width: 100%;

	height: auto;

}

@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}

@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}

.content .content_top .find{

	position: absolute;

	top: 24%;

	left:10%;

	width: 80%;

	height: auto;

	z-index:99;

	animation:fadeInUp 0.7s ease 0.2s 1 both;

    -webkit-animation:fadeInUp 0.7s ease 0.2s 1 both;

}

@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}

@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}

.content .content_top .box{

	position: absolute;

	top: 40%;

	left:27%;

	width: 46%;

	height: auto;

	z-index:99;

	animation:fadeInLeft 0.7s ease 0.6s 1 both;

    -webkit-animation:fadeInLeft 0.7s ease 0.6s 1 both;

}

@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}

@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}

.content .content_top .text{

	position: absolute;

	top: 50%;

	left:20%;

	width: 60%;

	height: auto;

	z-index:99;

	animation:fadeInRight 0.7s ease 0.6s 1 both;

    -webkit-animation:fadeInRight 0.7s ease 0.6s 1 both;

}

.content_top{

	width: 100%;

	height: 100%;

	overflow: hidden;

	position: relative;

	z-index: -99;

}

@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}

@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}

.cloud{

	position: absolute;

	left: 0;

	top:15%;

	width: 100%;

	height: auto;

	animation:fadeInUpBig 0.7s ease 1 both;

    -webkit-animation:fadeInUpBig 0.7s ease 1 both;

}

@keyframes figerscale{

    0%{

        transform:translateY(0px);

        -webkit-transform:translateY(0px);

        transform:scale(1);

        -webkit-transform:scale(1);

    }

    100%{

        transform:translateY(4px);

        -webkit-transform:translateY(4px);

        transform:scale(1.05);

        -webkit-transform:scale(1.05);

    }

}

@-webkit-keyframes figerscale{

    0%{

        transform:translateY(0px);

        -webkit-transform:translateY(0px);

        transform:scale(1);

        -webkit-transform:scale(1);

    }

    100%{

        transform:translateY(4px);

        -webkit-transform:translateY4px);

		transform:scale(1.05);

        -webkit-transform:scale(1.05);

    }

}

.reverse_button{

	position: absolute;

	width: 6rem;

	height: 1.3rem;

	border-radius: 20px;

	bottom: 1.8rem;

	left: 50%;

	transform:translateX(-50%);

	/*z-index: 99;*/

}

.reverse_button img{

	animation:figerscale .5s  linear infinite alternate;

    -webkit-animation:figerscale .5s  linear infinite alternate;

}

.tip{

	color: #fff!important;

	font-size:12px;

	text-align: center;

}

/*.tip span{

	font-weight: bold;

	color: #fff!important;

}*/

.pop{

	display: none;

	position: fixed;

	left: 0;

	top: 0;

	right:0;

	bottom:0;

	background-color: rgba(0,0,0,.4);

}

.pop>div{

	position: fixed;

	left: 10%;

	top:50%;

	transform:translateY(-50%);

	width: 80%;

}

.pop_box{

	overflow: hidden;

    height: 4.7rem;

	/*padding: 20px 0;*/

	background: #fff;

}

.pop_box>div{

	position: relative;

	width: 96%;

	height: 4.3rem;

    margin: 0.2rem 2%;

	border: 1px solid #DCCDB7;

}

.pop_box form{

	width: 100%;

	position: absolute;

	top: 50%;

	left: 0;

	transform:translateY(-50%);

}

.pop_box form div{

	width: 80%;

	height: 35px;

	border-radius: 4px;

	background-color: #E5E5E5;

	margin:0 auto;

	margin-top: 15px;

}

.pop_box form div:first-child{

	margin-top: 0;

}

.pop_box form a{

	display: block;

	width: 80%;

	height: 34px;

	line-height: 34px;

	text-align: center;

	color: #333333!important;

	background-color:#E0BF77;

	font-size:0.38rem;

	margin: 0 auto;

	margin-top: 10px;

	border-radius: 4px;

	text-decoration: none;

}

/* WebKit browsers */

input::-webkit-input-placeholder {color: #9F9F9F;}

/* Mozilla Firefox 4 to 18 */

input:-moz-placeholder {color: #9F9F9F;}

/* Mozilla Firefox 19+ */

input::-moz-placeholder {color: #9F9F9F;}

/* Internet Explorer 10+ */

input:-ms-input-placeholder { color: #9F9F9F;}

.pop_box form div input{

	-webkit-appearance:none;

	-moz-appearance:none;

	appearance:none;

	border: none;

	outline: none;

	text-align: center;

	width: 80%;

	height: 35px;

	line-height: 35px;

	margin-left: 10%;

	font-size:0.38rem;

	background: none;

}

.close{

	margin: 0 auto;

	width: 0.9rem;

	height: 0.9rem;

	margin-top: 20px;

}

.close img{

	width: 0.9rem;

	height: 0.9rem;

}



/*音乐播放*/

#music{

	display: block;

	position: fixed;

	width: 0.6rem;

	height: 0.6rem;

	top:4%;

	right:7%;

	z-index: 9999;

}

#audio_btn{

    width: 1.06rem;

    height: 1.06rem;

}

#music .on { 

 background: url('../image/play.png') no-repeat 0 0; 

 background-size: 100% 100%;

 -webkit-animation: rotating 1.2s linear infinite; 

 animation: rotating 1.2s linear infinite;

}

#music .off {

 background: url('../image/parse.png') no-repeat 0 0;

 background-size: 100% 100%;

}  

@-webkit-keyframes rotating { 

 from { 

  -webkit-transform: rotate(0deg);

  -moz-transform: rotate(0deg);

  -ms-transform: rotate(0deg);

  -o-transform: rotate(0deg);

  transform: rotate(0deg);

 }

 to {

  -webkit-transform: rotate(360deg);

  -moz-transform: rotate(360deg);

  -ms-transform: rotate(360deg);

  -o-transform: rotate(360deg);

  transform: rotate(360deg);

 }

}

@keyframes rotating { 

 from { 

  -webkit-transform: rotate(0deg);

  -moz-transform: rotate(0deg);

  -ms-transform: rotate(0deg);

  -o-transform: rotate(0deg);

  transform: rotate(0deg);

 }

 to {

  -webkit-transform: rotate(360deg); 

  -moz-transform: rotate(360deg); 

  -ms-transform: rotate(360deg); 

  -o-transform: rotate(360deg); 

  transform: rotate(360deg); 

	}

}

@media screen and (max-width: 500px) {

    .content{

    	width: 88%;

    	margin-left: 6%;

    	position: fixed;

	    top: 50%;

	    transform: translateY(-50%);

    }

 /*   .content .content_top .text{

	    position: absolute;

	    top: 1%;

	    left: 35%;

	    width: 2.5rem;

	    height: 7.5rem;

	    z-index: 99;

	    animation: fadeInLeft 0.3s ease 1s 1 both;

	    -webkit-animation: fadeInLeft 0.3s ease 1s 1 both;

    }*/

}