@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
*{font-family:"Noto Sans TC", serif; background-repeat:no-repeat; background-position:center top;}
/*scroll bar*/
body::-webkit-scrollbar { width:5px; height:5px; background-color:#fff;}
body::-webkit-scrollbar-track {background-color:#fff;}
body::-webkit-scrollbar-thumb {background: #eee;}
/*loading*/
#loadPage{
	display:block;
	width:100%;
	height:100vh;
	background-color:transparent;
	position:fixed;
	top:0;
	left:0;
	z-index:9999999999;
}
#loadPage > span{
	position:absolute;
	background-image:url('../img/loading.png');
	background-size:90px;
	width:90px;
	height:120px;
	left:50%;
	margin-left:-45px;
	top:45vh;
	margin-top:-60px;
	animation:day 0.5s ease infinite;
}
@keyframes day{
    0%{
		transform:scale(1.0);	
    }
    50%{
		transform:scale(0.95);	
    }
    100%{
    	transform:scale(1.0);	
    }
}
/*colorbox*/
#cboxOverlay{z-index:999999;background-color:rgba(0,0,0,0.75);}
#cboxClose{
  background-image:url('../img/btn_close.png');
  background-repeat:no-repeat;
  width:41px;
  height:41px;
  outline: none; /* for Firefox Google Chrome  */
  behavior:expression(this.onFocus=this.blur()); /* for IE */
}
#cboxClose:hover{transform:scale(0.9);}
#cboxWrapper{background:transparent;}
@media (max-width:765px) {
  #cboxClose{width:0.8rem;height:0.8rem;right:0;}
  #cboxWrapper{
    margin-top:0.5rem;
    padding-top:0;
  }
}
/*layout*/
html,body{
	width:100%;
	height:auto;
	margin:0 auto;
	padding:0;
	background-color:#3f532f;
}
html{
	overflow-x:hidden;
}
body{
	background:url('../img/bg.jpg') no-repeat;
	background-position:center 35px;
	background-size:1920px;
	min-width:1024px;
}
@media (max-width:1024px){
	body{
		background:url('../img/bg_02.jpg') no-repeat;
		background-position:-520px 35px;
		min-width:100%;
	}
}
@media (max-width:765px){
	body{
		min-width:100%;
		background-color:#69903d;
		background-image:url('../img/bg_m.jpg');
		background-position:center 1.8rem;
		background-size:100%;
	}
}
.nav{
	width:100%;
	position:fixed;
	height:60px;
	top:35px;
	line-height:60px;
	text-align:center;
	background-color:rgba(0,0,0,0.75);
	color:#fff;
	font-size:20px;
	font-weight:500;
	z-index:20;
}
.nav > a{
	position:relative;
	display:inline-block;
	width:180px;
	height:100%;
	text-shadow: rgba(3, 3, 3,0.8) 0px 1px 1px;
}
.nav > a:last-child{
	margin-right:0;
}
.nav > a:hover{
	font-size:22px;
	background-color:#000;
}
.link{
	font-size:20px;
	top:46px;
	right:30px;
	color:#3e474c;
	position:fixed;
	z-index:22;
	text-align:right;
	font-weight:600;
}
.link > a{
	height:40px;
	display:inline-block;
	vertical-align:top;
	background-size:100%;
}
a.signup{
	width:150px;
	height:36px;
	line-height:36px;
	text-align:center;
	background-color:#fff048;
	border:2px solid #ffcd04;
}
a.download,a.fb,a.baha{
	width:40px;
	overflow:hidden;
	line-height:100;
	margin-left:5px;
}
a.download{background-image:url('../img/icon_download.png');}
a.fb{background-image:url('../img/icon_fb.png');}
a.baha{background-image:url('../img/icon_baha.png');}
@media (max-width:1440px){
	.nav{
		text-align:left;
		height:50px;
		line-height:50px;
	}
	.nav > a{
		width:18%;
		text-align: center;
	}
	.link{
		width:28%;
		right:0;
		top:35px;
		font-size:0;
	}
	.link > a{
		height:50px;
		background-size:100%;
	}
	a.signup{
		width:46%;
		height:46px;
		line-height:46px;
		font-size:20px;
	}
	a.download,a.fb,a.baha{
		width:16%;
		background-size:60%;
		background-position:center;
		margin-left:0px;
	}
	a.download{background-color:#154386; }
	a.fb{background-color:#5464c0;}
	a.baha{background-color:#39a2c0;}
}
@media (max-width:765px){
	.nav{
		height:1.2rem;
		top:0;
		line-height:1.2rem;
		font-size:0;
		background-color:rgba(0,0,0,1.0);
	}
	.nav > a{
		width:28%;
		height:100%;
		font-size:0.3rem;
	}
	.nav > a:last-child{
		width:16%;
		margin-right:0;
	}
	.nav > a:hover{
		font-size:0.45rem;
		background-color:#000;
	}
	.link{
		width:100%;
		height:1.2rem;
		right:0;
		top:auto;
		bottom:0;
		background-color:rgba(0,0,0,0.7);
		text-align:left;
	}
	.link > a{
		height:1.2rem;
	}
	a.signup{
		font-size:0.5rem;
		width:55%;
		height:1rem;
		line-height:1rem;
		border:0.1rem solid #ffcd04;
	}
	a.download,a.fb,a.baha{
		width:14.3%;
	}
	.nav > a:hover{
		font-size:0.32rem;
	}
}
/*center*/
.wrapper{
	position:relative;
	margin:0 auto;
	width:1024px;
	text-align:center;
	padding-top:145px;
}
.logo{
	position:absolute;
	left:0;
	width:159px;
	height:103px;
	overflow:hidden;
	text-indent:-10000px;
	background-size:100%;
	background-image:url('../img/logo.png');
}
.wrapper > h1{
	display:inline-block;
	width:422px;
	height:161px;
	background:url('../img/title.png') no-repeat;
	background-size:100%;
	text-indent:-1000%;
	overflow:hidden;
}
.wrapper > h2{
	position:absolute;
	width:312px;
	height:219px;
	background-image:url('../img/event_time.png');
	overflow:hidden;
	text-indent:-1000%;
	right:-80px;
	top:120px;
}
.member{
	width:100%;
	margin:29px auto 40px auto;
	font-size:16px;
	font-weight:500;
	font-family:'cwTeXYen', sans-serif;
	color:#fff;
	text-shadow:2px 0 2px #364d37,0 2px 2px #364d37,-2px 0 2px #364d37,0 -2px 2px #364d37,2px 0 1px #364d37,0 2px 1px #364d37,-2px 0 1px #364d37,0 -2px 1px #364d37,2px 0 2px #364d37,0 2px 2px #364d37,-2px 0 2px #364d37,0 -2px 2px #364d37,2px 0 1px #364d37,0 2px 1px #364d37,-2px 0 1px #364d37,0 -2px 1px #364d37,2px 0 2px #364d37,0 2px 2px #364d37,-2px 0 2px #364d37,0 -2px 2px #364d37,2px 0 1px #364d37,0 2px 1px #364d37,-2px 0 1px #364d37,0 -2px 1px #364d37;
}
.member a{
	text-shadow:none;
}
.member a:hover{
	filter:brightness(1.1);
}
.member > div > span{
	display:inline-block;
	height:38px;
	line-height:38px;
	vertical-align:middle;
	margin-right:20px;
}
.btn_01,.btn_02{
	display:inline-block;
	vertical-align:middle;
	height:38px;
	line-height:38px;
	font-weight:600;
	background-size:100%;
}
.btn_01{
	width:93px;
	color:#27351b;
	background-image:url('../img/btn_bg_01.png?201809101423');
}
.btn_02{
	width:128px;
	font-weight:500;
	background-image:url('../img/btn_bg_02.png?201809101423');
}
@media (max-width:1024px){
	.wrapper{
		width:100%;
		left:50%;
		margin-left:-50%
	}
	.wrapper > h1{
		width:45%;
		height:0;
		padding-bottom:18%;
	}
	.logo{
		width:15%;
		left:5%;
	}
	.wrapper > h2{
		width:28%;
		background-size:100%;
		right:-5%;
	}
}
@media (max-width:765px){
	.wrapper{
		width:100%;
		left:0;
		margin-left:0;
		padding-top:1.7rem;
		overflow:hidden;
	}
	.logo{
		position:absolute;
		width:1.6rem;
		height:1.5rem;
		top:2.5rem;
		left:0.4rem;
		text-indent:-500%;
		z-index:4;
	}
	.wrapper > h1{
		display:inline-block;
		width:5rem;
		height:2.0rem;
		padding-bottom:0.2rem;
		margin-top:0.8rem;
	}
	.wrapper > h2{
		background-image:none;
		text-indent:0;
		width:100%;
		left:0;
		font-size:0.25rem;
		height:0.3rem;
		line-height:0.3rem;
		top:0.9rem;
		color:#fff;
		background-color:#33528E;
		font-weight:400;
		padding:0.2rem 0;
		letter-spacing:0.1rem;
		overflow:visible;
	}
	.wrapper > h2::after{
		display: block;
		position: absolute;
		background-image:url('../img/ch.png');
		background-repeat:no-repeat;
		content:'';
		width:2rem;
		height:2rem;
		background-size:100%;
		right:0.15rem;
		top:1.3rem;
	}
	.member{
		margin:0 auto;
		padding-bottom:0.75rem;
	}
	.member > div > span{
		width:80%;
        height:auto;
        margin-left:5%;
		font-weight:400;
		font-size:0.28rem;
		margin-bottom:0.4rem;
        line-height:1.5;
	}
	.member a{
		font-size:14px;
	}
}
/*gacha*/
.center_box{
	width:1000px;
	height:547px;
	margin:0 auto 20px auto;
	text-align:left;
	position:relative;
}
.gacha_outer{
	overflow:hidden;
	width:455px;
	height:547px;
	display:inline-block;
	vertical-align:text-top;
	position:absolute;
	cursor:pointer;
	left:110px;
	top:0;
}
.gacha_outer:hover > div.g_msg{
	color:#dd4a2c;
}
.gacha_outer > div{
	position:absolute;
}
.wing_left,.wing_right{
	width:70px;
	height:44px;
	top:39px;
	z-index:8;
}
.wing_left{
	left:62px;
	background-image:url('../img/wing_left.png');
	transform-origin:right center;
  	animation:wing2 2.5s infinite ease;
  	background-size:100%;
}
.wing_right{
	right:50px;
	background-image:url('../img/wing_right.png');
	transform-origin:left center;
  	animation:wing 2.5s infinite ease;
  	background-size:100%;
}
@keyframes wing{
    0%{
      transform:rotate(20deg);
    }
    50%{
      transform:rotate(0deg);
    }
    100%{
      transform:rotate(20deg);
    }
}
@keyframes wing2{
    0%{
      transform:rotate(-20deg);
    }
    50%{
      transform:rotate(0deg);
    }
    100%{
      transform:rotate(-20deg);
    }
}
.g_msg{
	color:#666;
	font-weight:800;
	font-size:16px;
	top:359px;
	left:144px;
	z-index:8;
	animation:g_msg 2.5s infinite ease;
}
.triangle{
	width:20px;
	height:12px;
	background-image:url('../img/icon_triangle.png');
  	background-size:100%;
	background-position:center top;
	top:364px;
	right:135px;
	z-index:8;
	animation:triangle 0.5s infinite ease;
}
@keyframes triangle{
    0%{
		background-position:center top;
    }
    50%{
		background-position:center bottom;
    }
    100%{
		background-position:center top;
    }
}
.turn{
	width:80px;
	height:85px;
	background-image:url('../img/turn.png');
  	background-size:100%;
	z-index:10;
	right:104px;
	top:389px;
	transition:0.3s ease;
}
#turn{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	right:0;
}
.gacha_outer:hover > div.turn{
	filter:brightness(1.2);
}
.export{
	width:122px;
	height:80px;
	top:400px;
	left:130px;
	overflow:hidden;
	z-index:10;
}
.machine{
	width:100%;
	height:100%;
	z-index:5;
	background-image:url('../img/machine.png');
  	background-size:100%;
}
@media (max-width:1024px){
.center_box{
	width:960px;
	left:50%;
	margin-left:-460px;
	transform:scale(0.95);
}
}
@media (max-width:765px){
	.center_box{
		width:90%;
		height:auto;
		margin:0 auto;
		margin-left:auto;
		left:0;
		text-align:center;
		position:relative;
		transform:scale(1.00);
	}
	.gacha_outer{
		position:relative;
		-webkit-transform:scale(0.85);
		-moz-transform:scale(0.85);
		transform:scale(0.85);
		margin-left:-104px;
		left:-100px;
		top:-43px;
	}
}
@media (max-width:320px){
	.gacha_outer{
		position:relative;
		-webkit-transform:scale(0.7);
		-moz-transform:scale(0.7);
		transform:scale(0.7);
		margin-left:-130px;
		top:-80px;
	}
}
/*egg*/
.egg{
	width:240px;
	height:300px;
	top:20px;
	left:120px;
	overflow:hidden;
}
.egg > span{
	width:83px;
	height:84px;
	display:block;
	position:absolute;
	animation:egg-inner 2.6s ease infinite;
  	background-size:100%;
}
@keyframes egg-inner{
	0%{
		transform:scaleY(1.0);
	}
	50%{
		transform:scaleY(0.90);
	}
}
.e_01{
	background-image:url('../img/e_01.png');
	bottom:0;
	left:5px;
	z-index:3;
}
.e_02{
	background-image:url('../img/e_02.png');
	bottom:60px;
	left:80px;
	z-index:0;
}
.e_03{
	background-image:url('../img/e_03.png');
	bottom:0px;
	right:00px;
	z-index:1;
}
.e_04{
	background-image:url('../img/e_04.png');
	z-index:1;
	bottom:80px;
	right:5px;
}
.e_05{
	background-image:url('../img/e_05.png');
	z-index:0;
	bottom:130px;
	right:40px;
}
.e_06{
	background-image:url('../img/e_06.png');
	z-index:2;
	bottom:0;
	left:70px;
}
.e_07{
	background-image:url('../img/e_07.png');
	z-index:0;
	left:20px;
	bottom:110px;
}
.e_08{
	background-image:url('../img/e_08.png');
	z-index:0;
	bottom:50px;
	left:5px;
}
.e_09{
	width:83px;
	height:84px;
	position:absolute;
	background-image:url('../img/e_04.png');
	background-size:100%;
	top:-80px;
	left:20px;
	transform:scale(0.5);
	filter:brightness(0.5);
}
/*reward*/
.reward{
	display:inline-block;
	width:485px;
	vertical-align:text-top;
	position:absolute;
	top:20px;
	right:0;
}
.reward p{
	width:100%;
	height:114px;
	font-size:20px;
	color:#fff;
	font-weight:500;
	background-image:url('../img/msg_bg.png');
	box-sizing:border-box;
	padding-top:24px;
	line-height:1.5;
	text-align:center;
}
.days{
	width:200px;
	height:180px;
	position:relative;
	display:inline-block;
	background-image:url('../img/leef.png');
	background-position:center bottom;
	overflow:visible;
}
.d5{
	display:block;
	left:50%;
	margin-left:-90px;
	margin-top:-5px;
	margin-bottom: -10px;
}
.d10{
	margin-left:40px;
}
.d15{
	margin-left:20px;
}
.days > div,.days > span{
	position:absolute;
}
.days > div{
	width:173px;
	height:173px;
	background-position:center;
	z-index:5;
	left:50%;
	margin-left:-90px;
	bottom:12px;
}
.r_egg_01{
	background-image:url('../img/d5.png');
}
.r_egg_02{
	background-image:url('../img/d10.png');
}
.r_egg_03{
	background-image:url('../img/d15.png');
}
.btn_03{
	width:107px;
	height:44px;
	line-height:44px;
	color:#27351b;
	font-size:20px;
	background-image:url('../img/btn_bg_03.png');
	background-size:100%;
	font-weight:800;
	bottom:20px;
	left:50%;
	margin-left:-53.5px;
	z-index:8;
	text-align:center;
}
.before{
	-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}
.days > div.after::before{
	display:inline-block;
	width:140px;
	height:140px;
	position:absolute;
	left:20px;
	top:18px;
	border-radius:100%;
	content:'已領取';
	text-align:center;
	line-height:130px;
	color:#fff;
	font-size:20px;
	background-color:rgba(0,0,0,0.68);
}
.days > span.after{
	filter:brightness(0.4);
}
.days > div.get{
	animation:day 0.8s infinite ease;
}
.days > span.get{
	animation:Shining 0.8s infinite ease;
}
@keyframes Shining{
    0%{
		filter:brightness(1.00);	
    }
    50%{
		filter:brightness(1.05);	
    }
    100%{
		filter:brightness(1.00);	
    }
}

/*TIP*/
.now_time{
	margin-top:10px;
	margin-bottom:25px;
	padding:0 40px;
	color:#fff;
	height:42px;
	line-height:42px;
	font-size:18px;
	font-weight:500;
	background-color: #4C6636;
	border:4px solid #b4cf4f;
	border-radius:40px;
	display: inline-block;
}
.tip{
	color:#fff;
	font-size:14px;
	line-height:1.6;
	font-weight:300;
	opacity:0.95;
}
.tip ul li{
	counter-increment:list-no;	
}
.tip ul li::before{
	content:counter(list-no);
	display:inline-block;
	background-color:#fff;
	color:#658C3C;
	width:16px;
	height:16px;
	line-height:14px;
	border-radius:100%;
	font-size:12px;
	vertical-align:middle;
	margin-top:-4px;
	margin-right:5px;
	transform:scale(0.9);
}
.girl,.bird{
	background-size:100%;
	display:block;
	position:absolute;
}
.girl{
	background-image:url('../img/girl.png');
	width:400px;
	height:598px;
	left:-230px;
	top:340px;
	z-index:0;
}
.bird{
	background-image:url('../img/bird.png');
	width:167px;
	height:204px;
	right:-130px;
	top:602px;
}
@media (max-width:1024px){
	.gacha_outer{
		left:40px;
	}
	.reward{
		top:30px;
		right:90px;
		transform:scale(0.90)
	}
	.girl,.bird{
		display:none;
	}
}
@media (max-width:765px){
	.reward{
		width:100%;
		position:relative;
		margin-top:-120px;
		top:0;
		right:0;
	}
	.reward p{
		width:120%;
		margin-left:-10%;
		height:0;
		padding-bottom:20%;
		font-size:0.45rem;
		background-size:100%;
		padding-top:0.55rem;
		overflow:visible;
		position:relative;
	}
	.reward p::after{
		display:block;
		width:30%;
		height:3.6rem;
		content:'';
		background-image:url('../img/bird.png');
		background-size:100%;
		position:absolute;
		right:3%;
		top:2.8rem;
	}
	.days{
		width:38%;
		height:0;
		padding-bottom:40%;
		background-size:130%;
		overflow:visible;
	}
	.days > div{
		width:100%;
		height:0;
		padding-bottom:100%;
		background-size:100%;
		left:50%;
		margin-left:-50%;
		bottom:12px;
	}
    .days.d5 > div {
        background-size:115%;
    }
	.d5{
		display:block;
		left:31%;
		margin-left:0;
		margin-top:0px;
		margin-bottom:10px;
	}
	.d10{
		margin-left:0;
	}
	.d15{
		margin-left:10px;
	}
	.days > div.after::before{
		width:96%;
		height:0;
		padding-bottom:95%;
		left:4%;
		top:3.5%;
		border-radius:100%;
		line-height:3rem;
		font-size:0.4rem;
	}
	.btn_03{
		width:70%;
		height:1rem;
		line-height:1rem;
		color:#27351b;
		font-size:0.5rem;
		bottom:0.2rem;
		left:15%;
		margin-left:0;
	}
	.now_time{
		width:80%;
		padding:0;
		font-size:0.4rem;
		border:0.1rem solid #b4cf4f;
	}
	.tip{
		width:80%;
		margin-left:10%;
		margin-bottom:30px;
		font-size:0.33rem;
	}
	.tip ul{
		margin-top:20px;
	}
	.tip ul li::before{
		font-weight:800;
	}
}
@media (max-width:320px){
	.reward{
		margin-top:-185px;
		top:0;
		right:0;
	}
}
/*notice*/
.notice{
	font-size:16px;
	color:#d1d1d1;
	padding:97px 0;
	margin-top:35px;
	background-image:url('../img/notice_bg.jpg');
}
.notice_outer{
	position:relative;
	width:960px;
	margin:0 auto;
}
.notice_outer > span{
	display:block;
	color:#c9e199;
	font-size:24px;
	font-weight:600;
	margin-bottom:10px;
}
.notice_outer > ul > li{
	width:733px;
	line-height:1.5;
	counter-increment:list-no;
	text-indent:-24px;
	padding-left:24px;
	font-weight:300;
}
.notice_outer > ul > li::before{
	display:inline-block;
	content:counter(list-no);
	width:20px;
	height:20px;
	border-radius:100%;
	background-color:#c9e199;
	vertical-align:middle;
	margin-top:-5px;
	margin-right:5px;
	color:#354d35;
	line-height:20px;
	text-indent:0;
	text-align:center;
	transform:scale(0.6);
}
.notice_outer > ul > li > a{
	color:#ffda6b;
}
.notice_outer > ul > li > b{
	display:block;
	font-size:14px;
	font-weight:300;
	margin-top:10px;
	margin-left:-0.5rem;
	text-indent:0;
}
.bear{
	position:absolute;
	width:231px;
	height:261px;
	background-image:url('../img/bear.png');
	right:0;
	top:80px;
}
footer{
	background-color:#2a3d2a;
}
@media (max-width:1024px){
.notice{
	width:100%;
	box-sizing:border-box;
	padding:8% 10%;
	background-repeat:repeat-y;
	overflow:hidden;
}
.notice_outer{
	width:100%;
}
.notice_outer > ul,.notice_outer > ul > li{
	width:80%;
}
.notice_outer > ul > li:nth-child(1),.notice_outer > ul > li:nth-child(2),.notice_outer > ul > li:nth-child(3),.notice_outer > ul > li:nth-child(4){
	width:120%;
}
.bear{
	width:28%;
	height:0;
	padding-bottom:33%;
	background-size:100%;
	right:0;
	top:auto;
	bottom:0;
}
}
@media (max-width:765px){
.notice{
	width:100%;
	font-size:0.35rem;
	box-sizing:border-box;
	padding:1.5rem 1rem;
	margin-top:0;
	background-size:cover;
	background-position:center;
}
.notice_outer{
	width:100%;
	left:0;
}
.notice_outer > span{
	text-align:center;
	font-size:0.8rem;
	margin-bottom:0.5rem;
}
.notice_outer > ul,.notice_outer > ul > li:nth-child(1),.notice_outer > ul > li:nth-child(2),.notice_outer > ul > li:nth-child(3),.notice_outer > ul > li:nth-child(5){
	width: 100%;
}
.notice_outer > ul > li{
	width:100%;
	box-sizing:border-box;
	line-height:1.8;
}
.notice_outer > ul > li::before{
	font-weight:800;
	transform:scale(0.7);
}
.notice_outer > ul > li > a{
	color:#ffda6b;
}
.notice_outer > ul > li > b{
	font-size:0.35rem;
	margin-top:0.3rem;
	margin-left:-0.2rem;
}
.bear{
	position:relative;
	width:40%;
	padding-bottom:45%;
	right:auto;
	top:auto;
	margin:1rem auto 0 auto; 
}
footer{
	padding:0 0 0.5rem 0;
}

}

/*gacha animation*/
.turn.move{
	animation:turn 0.3s ease-in-out 0s 2;
}
.e_09.move{
	animation:ex-egg 0.8s ease-in-out 1 alternate forwards;
}
.e_02.move,.e_03.move,.e_08.move,.e_05.move{
	animation:shake_a 0.8s ease-in-out 0s 2 ;
}
.e_06.move,.e_07.move,.e_04.move{
	animation:shake_b 0.8s ease-in-out 0s 2 ;
}
.e_02.move,.e_01.move{
	animation:shake_c 0.8s ease-in-out 0s 2 ;
}
@keyframes ex-egg{
	from{
		transform:scale(0.5);
		filter:brightness(0.5);
	}
	to{
		filter:brightness(1.0);
		transform:scale(1.0);	
	}
	0%{
		top:-80px;
	}
	40%{
		top:10px;
	}
	60%,80%{
		top:10px;
		transform:rotate(20deg);
	}
	70%,90%{
		top:10px;
		transform:rotate(-20deg);
	}
	100%{
		top:10px;
		transform:rotate(30deg);
	}
}

@keyframes shake_a {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-10px, 0, 20px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translate3d(2px, 8px, 0);
  }
}
@keyframes shake_b{
  from,
  to {
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(16px, 8px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate3d(10px, 0px, 20px);
  }

  15%,
  25%,
  35%,
  45%{
  	transform: translate3d(0px, 16px, 0);
  }
}
@keyframes shake_c{
  from,
  to {
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(6px, -8px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate3d(-2px, 0px, -10px);
  }

  15%,
  25%,
  35%,
  45%{
  	transform: translate3d(0px, -6px, 0);
  }
}
@keyframes turn{
  25%,40%,75%{
  	transform: rotate(180deg);
  }
}