/* styles written in this file is for Standard */


.clearfix:after{
	content:		".";
	display:		block;
	visibility:		hidden;
	height:			0.1px;
	font-size:		0.1em;
	line-height:		0;
	clear:			both;
}

.clearfix{
	zoom:			100%;
}


*{
	margin:			0;
	padding:		0;
}

html{
	font-size:		62.5%;
}

img{
	vertical-align:		bottom;
}

body{
	font-family:		'微软雅黑','Microsoft YaHei',sans-serif,Helvetica,Arial;
	font-size:		16px;
	font-size:		1.6rem;
	line-height:		1.6;
	//background:		rgba(238,238,238,1);
	color:			#333;
	//text-shadow:		1px 1px 1px #fff;
	text-size-adjust: none;
}

#wrapper{
	background:		url(../img/bg.jpg) no-repeat center center;
	background-size:	cover;
}



.cd{
	position:		fixed;
	top:			50%;
	left:			50%;
	width:			222px;
	margin:			-48px 0 0 -111px;
	text-align:		center;
	color:			#fff;
	text-shadow:		1px 1px 1px #000;
}

#🐵{
	margin-top:		10px;
}


#xnh{
	display:		none;
}


ul.happy{
	box-sizing:		border-box;
	position:		relative;
	padding:		80px 0 0 35px;
	height:			100%;
}

ul.happy li{
	position:		relative;
	list-style:		none;
	width:			143px;
	margin:			0 auto;
	text-align:		center;
	opacity:		0;
}

ul.happy li.w1{
	height:			118px;
}

ul.happy li.w2{
	height:			114px;
}

ul.happy li.w3{
	height:			118px;
	z-index:		9;
}

ul.happy li.w4{
	opacity:		1;
}

ul.happy li img{
	position:		absolute;
	top:			0;
	left:			0;
}

ul.happy li img:first-child{
	opacity:		0;
}

ul.happy li.w4 img{
	margin:			-100px 0 0 -150px;
	opacity:		1;
}

ul.happy li.grow img:first-child{
	animation:		breathe 4s infinite ease;
}


ul.happy li.w5 a{
	box-sizing:		border-box;
	display:		block;
	background:		#cc0000;
	border:			3px solid #cc0000;
	color:			#fff;
	text-decoration:	none;
	cursor:			pointer;
}

ul.happy li.w5 a span{
	box-sizing:		border-box;
	display:		block;
	padding:		3px;
	border:			1px solid #fff;
}

.logo{
	position:		fixed;
	right:			20px;
	bottom:			20px;
	text-align:		right;
	opacity:		0;
}




@keyframes breathe{
0%,100%{opacity:0;}
50%{opacity:1;}
}



@keyframes rubberBand{
0%{transform:scaleX(1);transform:scaleX(1);opacity:0;}
30%{transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{transform:scaleX(1);transform:scaleX(1);opacity:1;}
}



@keyframes shake-opacity {
  4% {
    transform: translate(1px, -3px) rotate(-1.5deg);
     }
  8% {
    transform: translate(-1px, -3px) rotate(-0.5deg);
     }
  12% {
    transform: translate(4px, 4px) rotate(-1.5deg);
     }
  16% {
    transform: translate(3px, 4px) rotate(1.5deg);
     }
  20% {
    transform: translate(0px, 4px) rotate(2.5deg);
     }
  24% {
    transform: translate(3px, -3px) rotate(2.5deg);
     }
  28% {
    transform: translate(-4px, 5px) rotate(1.5deg);
     }
  32% {
    transform: translate(5px, 1px) rotate(0.5deg);
     }
  36% {
    transform: translate(-1px, 2px) rotate(2.5deg);
     }
  0%,40%, 100% {
    transform: translate(0, 0) rotate(0); } }


@keyframes rollIn{
0%{opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}
20%{opacity:0;}
to{opacity:1;transform:none;transform:none}
}


@keyframes tada{
0%{transform:scaleX(1);transform:scaleX(1)}
10%,20%{transform:scale3d(.7,.7,.7) rotate(-5deg);transform:scale3d(.7,.7,.7) rotate(-5deg)}
30%,50%,70%,90%{transform:scale3d(3,3,3) rotate(5deg);transform:scale3d(3,3,3) rotate(5deg)}
40%,60%,80%{transform:scale3d(3,3,3) rotate(-5deg);transform:scale3d(3,3,3) rotate(-5deg)}
to{transform:scaleX(1);transform:scaleX(1)}
}


@keyframes bounceInDown{
0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}
0%{opacity:0;transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}
60%{opacity:1;transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}
75%{transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
90%{transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}
to{opacity:1;transform:none;transform:none}
}


.swing{
	animation: swing 3s infinite;
}

@keyframes swing{
5%{transform:rotate(15deg);transform:rotate(15deg)}
10%{transform:rotate(-10deg);transform:rotate(-10deg)}
15%{transform:rotate(5deg);transform:rotate(5deg)}
20%{transform:rotate(-5deg);transform:rotate(-5deg)}
25%,to{transform:rotate(0deg);transform:rotate(0deg)}
}






/* 抽签部分的css */

@keyframes play {
	100%{
		background-position: -737px -2px;
	}
}
@-webkit-keyframes play {
	100%{
		background-position: -737px -2px;
	}
}
.sprite {
	width:145px;
	height:300px;
	display:inline-block;
	overflow:hidden;
	background-repeat: no-repeat;
	background-image:url(../pray/234.png);
	background-position: -2px -2px;
	animation: play 0.8s steps(5) infinite;
	-webkit-animation: play 0.8s steps(5) infinite;
}
.preload {
	background-position: 9999px 9999px;
	width: 1px;
	height: 1px;
	display: none;
}
.cover {
	background: url(../pray/share.png) top right no-repeat;
	background-size: 50%;
	background-color: rgba(0, 0, 0, 0.7);
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 99;
	display: none;
}

.decode .inner {
	width: 100%;
	height: 100%;
	background: url(../pray/decode.png) center no-repeat;
	background-size: 80%;
}

.item {
	width: 100%;
	text-align: center;
	padding-top: 20%;
}