﻿.win_wrap {
    clear: both;
    width: 100vw;
    height: 100vh;
/*     width: 100%;
    height: 908px; */
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
    /* background: url(../../../../web/lottery/egg_bg.png)  no-repeat; */
    /* background: url(../../images/lottery/wap/egg_bg.jpg) no-repeat; */
    background-size: 100%;

}


.egg {
	width: 750px;
	height: 500px;
	margin: 0px auto 0px auto;
	position: relative;
/* 	background: url(../../images/lottery/bg1.jpg);
 */



}

.egg ul li {
	z-index: 99;
}

.eggList {
	/* padding-top: 110px; */
    top: -25px;
	position: relative;
	/* width: 660px; */
}

.eggList li {
	/* float: left; */
	/* background: url(../../images/lottery/wap/egg_1.png) no-repeat bottom; */
	/* width: 486px;
	height: 392px; */
	cursor: pointer;
	position: relative;
	/* margin-left: 35px; */
	top: 85px;
	left: 8px;
	list-style: none;
}

.eggList li span {
	position: absolute;
	width: 30px;
	height: 60px;
	left: 68px;
	top: 64px;
	color: #ff0;
	font-size: 42px;
	font-weight: bold
}

.eggList li.curr {
	background: url(../../images/lottery/wap/egg_2.png) no-repeat bottom;
	cursor: default;
	z-index: 300;

	width: 748px;
	height: 738px;
	top: -161px;
	left: -31px;
}

.eggList li.curr sup {
position: absolute;
background: url(../../images/lottery/img-4.png) no-repeat;
width: 232px;
height: 181px;
top: -10px;
left: 65px;
z-index: 800;
}

.eggList li.Smash{
	top: -95px;
}

.hammer {
	width: 85px;
	height: 90px;
	position: absolute;
	z-index: 150;
	right: 0;
	top: 91px;
}

.resultTip {

	background: #ffc;
	width: 280px;
	/*padding: 6px;*/
	z-index: 500;
	color: rgb(197,131,16);
	text-align: center;
	overflow: hidden;
	z-index: 500;
	/*padding-top: 69px;*/
}

.resultTip b {
	font-size: 14px;
	/* line-height: 48px; */
}

.title {
	color: #fff;
font-size: 28px;
font-family: 微软雅黑;
position: absolute;
left: 100px;
width: 600px;
top: 50px;
}
.muji{
position: relative;
top: 470px;
left: -123;

}
.muji a{
	font-size: 18px;
color: #fff;
}
.menu{
	margin: 0 auto;
width: 300px;
background: #f8cb9c;
height: 300px;
padding: 10px;
font-size: 12px;
text-align: left;
color: #9C5E00;
}

.hammer .imgChuiZi {
  position: absolute;
  top: 0;
  right: 30px;
  width: 85px;
  height: 90px;
  z-index: 10002;
  -moz-transform-origin: bottom right;
  -webkit-transform-origin: bottom right;
  transform-origin: bottom 100%;
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
  -moz-animation: chuizi 1.5s ease 9999;
  -webkit-animation: chuizi 1.5s ease 9999;
  animation: chuizi 1.5s ease 9999;
}
@keyframes chuizi {
  0% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  30% {
    -moz-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }
  100% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
}
@-webkit-keyframes chuizi {
  0% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  30% {
    -moz-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }
  100% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
}
@-moz-keyframes chuizi {
  0% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  30% {
    -moz-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }
  100% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
}
@media screen and (min-height: 568px) and (max-height: 573px){
	body,.win_wrap{
		height: calc(100vh + 70px) !important;
	}
	.eggList li{
		top: 70px;
	}
	.eggList li.Smash{
		top: -80px;
	}
	.hammer {
		top: 76px;
	}
	.muji{
		top: 450px;
	}
}
@media screen and (max-height: 570px){
	body,.win_wrap{
		height: calc(100vh + 120px) !important;
	}
}
@media screen and (min-height: 574px) and (max-height: 612px){
	body,.win_wrap{
		height: calc(100vh + 50px) !important;
	}
}
@media screen and (min-height: 513px) and (max-height: 640px){
	/*body,.win_wrap{
		height: calc(100vh + 70px) !important;
	}*/
	.eggList li{
		top: 75px;
	}
	.eggList li.Smash{
		top: -105px;
	}
	.hammer {
		top: 81px;
	}
	.muji{
		top: 450px;
	}
}

@media screen and (min-height: 641px) and (max-height: 658px){
	body,.win_wrap{
		height: calc(100vh + 70px) !important;
	}
	.eggList li{
		top: 90px;
	}
	.eggList li.Smash{
		top: -75px;
	}
	.hammer {
		top: 90px;
	}
	.muji{
		top: 455px;
	}
}

@media screen and (min-height: 659px) and (max-height: 667px){
	body,.win_wrap{
		height: calc(100vh + 50px) !important;
	}
}
@media screen and (min-height: 668px) and (max-height: 736px){
	body,.win_wrap{
		height: calc(100vh + 70px) !important;
	}
	.eggList li{
		top: 90px;
	}
	.eggList li.Smash{
		top: -75px;
	}
	.hammer {
		top: 90px;
	}
	.muji{
		top: 455px;
	}
}
@media screen and (min-height: 737px) and (max-height: 738px){
	/*body,.win_wrap{
		height: calc(100vh + 50px) !important;
	}*/
	.eggList li{
		top: 100px;
	}
	.eggList li.Smash{
		top: -90px;
	}
	.hammer {
		top: 101px;
	}
	.muji{
		top: 500px;
	}
}

