#coupon{
	width:100%;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	background:rgba(0,0,0,.7);
	z-index:11;
	display: none;
	justify-content: center;
	align-items: center;
	opacity:0;
}
#coupon img{
	width: 100%;
}
#coupon p{
	margin:0;
}
#coupon.coupon_show{
	display: flex;
	animation: coupon_open_mov .5s;
	opacity:1;
}
@keyframes coupon_open_mov {
	0%{opacity:0;}
	100%{opacity:1;}
}
#coupon > div{
	width:90%;
	max-width:400px;
	position:relative;
	opacity:0;
}
#coupon.coupon_show > div{
	opacity:1;
	animation: coupon_box_mov ease-out 1.2s;
	
}
@keyframes coupon_box_mov {
	0%{top:-300px;opacity:0;}
	33%{top:-300px;opacity:0;}
	34%{top:-300px;opacity:1;}
	60%{top:30px;opacity:1;}
	70%{top:-25px;opacity:1;}
    75%{top:15px;opacity:1;}
	80%{top:-10px;opacity:1;}
    85%{top:12px;opacity:1;}
	90%{top:-5px;opacity:1;}
	100%{top:0;opacity:1;}
}
.coupon_close{
	font-weight: bold;
	font-size: 28px;
	position: absolute;
	top: 2.5%;
	right: 0px;
	color: #fff;
	border: 1px solid #fff;
	line-height: 32px;
	width: 32px;
	text-align: center;
	cursor: pointer;
}
.coupon_btn{
	width:100%;
	position:absolute;
	bottom:0;
	animation: coupon_move infinite .9s;
}
#coupon a:hover{
	opacity:1;
}
#coupon a .coupon_btn:hover{
	opacity:.8;
}
@keyframes coupon_move {
	0%{
		transform:scale(1);
		-webkit-transform:scale(1);
		-moz-transform:scale(1);
	}
	49%{
		transform:scale(1);
		-webkit-transform:scale(1);
		-moz-transform:scale(1);
	}
	50%{
		transform:scale(1.02);
		-webkit-transform:scale(1.02);
		-moz-transform:scale(1.02);
	}
	100%{
		transform:scale(1.02);
		-webkit-transform:scale(1.02);
		-moz-transform:scale(1.02);
	}
}