html{height: 100%;}
body{background:url(../images/keji.jpg) no-repeat;height:100%;background-size: 100% 100%}
.head{background:rgba(255,255,255,0.4);border:0;z-index: 99}
.head .head_back,.head .head-title{color:#fff;}
.warp{height:100%;padding-top: 45px;box-sizing: border-box;}
.box{width: 60%;top: 32%;left: 20%;position: absolute;}
.box .manghe{width: 100%}
.updown .manghe{animation: move 1s infinite;animation-direction: alternate;}
@keyframes move{
	0%{
		transform: translateY(0px);
	}
	100%{
		transform: translateY(10px);
	}
}
.box .shou{width: 60px;position: absolute;top: 50%;right: 20%;}
.box .chaikai{margin-top: 10px;color:#fff;text-shadow: 0 0 8px #fff;text-align: center;font-size:21px} 
.guang{position: absolute;width: 100%;height:100%;top: 0%;display:none;opacity: 0.2}
.good{width: 80%;margin:auto;padding:17% 0;position: relative;}
.good .tips{margin-bottom: 8px;display:block;color:#ff4f12;text-shadow: 0 0 5px #fff;font-size: 16px;}
.good img{width: 80%;margin:auto;border-radius: 10px;margin-bottom: 8px;}
.good p{font-size: 14px;font-weight: normal;}
.good h2{font-size: 21px;margin-top: 10px;color:#00f6ff;}
.good h2 span{font-size: 12px;}

#card {
	      width:70%;height:390px;
	      position: absolute;
	      left:15%;top: 20%;
	      display:none;
	      -webkit-transition: -webkit-transform 1s;
	         -moz-transition: -moz-transform 1s;
	           -o-transition: -o-transform 1s;
	              transition: transform 1s;
	      -webkit-transform-style: preserve-3d;
	         -moz-transform-style: preserve-3d;
	           -o-transform-style: preserve-3d;
	              transform-style: preserve-3d;
	      -webkit-transform-origin: right center;
	         -moz-transform-origin: right center;
	           -o-transform-origin: right center;
	              transform-origin: right center;
	    }
#card figure {
  display: block;
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
          margin:0;
}
#card .kapian{width: 100%;height:100%;}
#card .back {
	background:url(../images/card1.png) no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height:100%;
  -webkit-transform: rotateY( 180deg );
     -moz-transform: rotateY( 180deg );
       -o-transform: rotateY( 180deg );
          transform: rotateY( 180deg );
}
 #card.flipped {
  -webkit-transform: translateX( -100% ) rotateY( -180deg );
     -moz-transform: translateX( -100% ) rotateY( -180deg );
       -o-transform: translateX( -100% ) rotateY( -180deg );
          transform: translateX( -100% ) rotateY( -180deg );
}
.result{width: 60%;display:none;margin:auto;margin-top: 20px;}
.result .btn{display:block;color:#fff;background:url(../images/but_orange.png) no-repeat;background-size: 100% 100%;height:50px;text-align: center;line-height: 50px;font-size: 15px;}

.result .bot{font-weight: normal;margin-top: 8px;font-size: 12px;color:#f6f6f6;}