@charset "utf-8";
html, body { width: 100%; height: 100%; overflow: hidden;}
body{ background: #fff; font-size:.25rem;}
div { box-sizing: border-box;}
.dn { display: none;}
.clearfix:after { content: '\20'; clear: both; height: 0; display: block;}
a {-webkit-tap-highlight-color:transparent;}
*{ outline:none!important;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
img {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none; -o-user-select: none;}
input,textarea { outline: none; border: none; box-sizing: border-box; background: none;}
/* --------------index-start-------------- */
.logo { z-index: 10; width: 5.09rem; position: fixed; left: .76rem; top: .64rem; pointer-events: none;}
.star { z-index: 2; animation: scaleAni 1.5s infinite linear; position: absolute; left: 1.28rem; top: 28.8vh; width: 8.99rem; cursor: pointer;}
.home { z-index: 2;  position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/bg2.jpg) center bottom no-repeat; background-size: cover;}
.goldDust { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;}
@keyframes scaleAni {
	0% { transform: scale(1); opacity: 1;}
	50% { transform: scale(1.1); opacity: 0.8;}
	100% { transform: scale(1); opacity: 1;}
}
.gamePage { display: none; overflow: hidden; z-index: 3; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/bg2.jpg) center bottom no-repeat; background-size: cover;}
.gameDust { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;}
.rainArea { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; overflow: hidden;}
.giveBar { z-index: 5; background: url(../images/group.png) center no-repeat; width: 8.11rem; height: 1.8rem; position: absolute; background-size: 100% auto;
left: 1.63rem; bottom: 3.3rem;}
.step { position: absolute; left: 2.8rem; top: .44rem; width: 2.61rem; z-index: 2; pointer-events: none;}
.giveBar span { border-radius: 1.34rem; position: absolute; display: block; left: .28rem; top: .12rem; height: 1.34rem;
width: 7.64rem; overflow: hidden;}
.giveBar span i { position: absolute; width: 100%; height: 100%; left: -100%; background: #ba0901; border-radius: 1.34rem; top: 0;
transition: left .45s ease;}
.giveBar.hit span { box-shadow: 0 0 .18rem rgba(255,255,255,.85) inset;}
.giveBar.done { animation: barPop .5s cubic-bezier(.2, 1.4, .3, 1) both;}
@keyframes barPop {
	0% { transform: scale(.86); }
	100% { transform: scale(1); }
}
.winLayer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: hidden;}
.winDust { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none;}
.winLayer .winFlash { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; opacity: 0; z-index: 20;}
.winLayer.show .winFlash { animation: winFlash .4s ease .86s;}
@keyframes winFlash {
	0% { opacity: 0;}
	18% { opacity: .5;}
	100% { opacity: 0;}
}
.winItem { position: absolute; display: block; opacity: 0; transform-origin: center center;}
.winItem img { width: 100%; display: block; mix-blend-mode: screen; -webkit-user-drag: none;}
.winLayer.show .win-fade { animation: winFade .42s ease both;}
.winLayer.show .win-pop { animation: winPop .5s cubic-bezier(.16, .84, .32, 1.25) both;}
.winLayer.show .win-strong { animation: winStrong .58s cubic-bezier(.12, .82, .28, 1.2) both;}
.winLayer.show .win-boom { animation: winBoom .72s cubic-bezier(.1, .78, .22, 1.18) both;}
@keyframes winFade {
	0% { transform: scale(1.7); opacity: 0;}
	100% { transform: scale(1); opacity: var(--op, 1);}
}
@keyframes winPop {
	0% { transform: scale(2.4); opacity: 0; filter: brightness(1.8);}
	62% { transform: scale(.9); opacity: 1; filter: brightness(1.1);}
	100% { transform: scale(1); opacity: 1; filter: brightness(1);}
}
@keyframes winStrong {
	0% { transform: scale(2.8); opacity: 0; filter: brightness(2.4);}
	58% { transform: scale(.88); opacity: 1; filter: brightness(1.15);}
	78% { transform: scale(1.08); opacity: 1;}
	100% { transform: scale(1); opacity: 1; filter: brightness(1);}
}
@keyframes winBoom {
	0% { transform: scale(3.6); opacity: 0; filter: brightness(3);}
	52% { transform: scale(.86); opacity: 1; filter: brightness(1.35);}
	72% { transform: scale(1.1); opacity: 1; filter: brightness(1.1);}
	100% { transform: scale(1); opacity: 1; filter: brightness(1);}
}
.gamePage.winShake { animation: winShake .5s linear .86s;}
@keyframes winShake {
	0%, 100% { transform: translate3d(0,0,0);}
	12% { transform: translate3d(-.12rem, .08rem, 0);}
	24% { transform: translate3d(.14rem, -.1rem, 0);}
	36% { transform: translate3d(-.1rem, -.06rem, 0);}
	50% { transform: translate3d(.1rem, .08rem, 0);}
	64% { transform: translate3d(-.06rem, .04rem, 0);}
	78% { transform: translate3d(.05rem, -.03rem, 0);}
}
.circle { padding-top: .2rem; background: url(../images/circle.png) center no-repeat; width: 3.9rem; height: 3.83rem; box-sizing:border-box;background-size: 100% auto;
display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; cursor: pointer; padding-right: .24rem; padding-left: .12rem;
padding-bottom: .29rem; -webkit-tap-highlight-color: transparent; touch-action: manipulation; will-change: transform;}
.circle.tpl { display: none;}
.circle img { pointer-events: none; -webkit-user-drag: none;}
.circle img.eng { width: auto; height: 100%;}
.circle img.hideImg { width: 80%; display: none;}
.circle.caught { z-index: 20; cursor: default;}
.circle.caught .eng { display: none;}
.circle.caught .hideImg { display: block; animation: hidePop .28s cubic-bezier(.34, 1.56, .64, 1);}
.circle.flying { z-index: 40; pointer-events: none; transition: transform .7s cubic-bezier(.22, .61, .36, 1), opacity .28s linear .42s; opacity: 0;}
@keyframes hidePop {
	0% { transform: scale(.35); opacity: 0;}
	100% { transform: scale(1); opacity: 1;}
}