@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#333;}

.box{width:800px;height:280px;margin:50px auto;overflow:hidden;}
.box .link{display:inline-block;width:205px;height:220px;margin:0 20px; position:relative;}
.link .icon{
	display:block;width:100%;height:180px;
	
	-moz-transition:ease-out 0.2s;
	-o-transition:ease-out 0.2s;
	-webkit-transition:ease-out 0.2s;
	transition:ease-out 0.2s;
}

.link .icon:hover{
	transform:rotate(360deg) scale(1.2);
	-moz-transform:rotate(360deg) scale(1.2);
	-o-transform:rotate(360deg) scale(1.2);
	-webkit-transform:rotate(360deg) scale(1.2);
}
.mission-link .icon{background:url(../images/mission.png) no-repeat center 0;}
.play-link .icon{background:url(../images/play.png) no-repeat center 0;}
.touch-link .icon{background:url(../images/touch.png) no-repeat center 0;}

.button{
	display:block;width:180px;height:50px;border:2px solid rgba(255,255,255,0.8);line-height:50px;padding-left:20px;box-sizing:border-box;margin:0 auto;font-weight:bold;font-size:18px;text-decoration:none;text-transform:uppercase;font-family:Arial;color:#2DCB70;background:url(../images/allow.png) no-repeat 130px center;position:relative;

	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
	-moz-box-sizing:border-box;
	
	-moz-transition:ease 0.4s;
	-o-transition:ease 0.4s;
	-webkit-transition:ease 0.4s;
	transition:ease 0.4s;
}
.button:hover{border:2px solid #fff;background-position:140px center;}
.button .line{
	position:absolute;background:none; 
	
	-moz-transition:ease 0.4s;
	-o-transition:ease 0.4s;
	-webkit-transition:ease 0.4s;
	transition:ease 0.4s;
}
.button:hover .line{background:#fff;}
.button .line-top{width:0px;height:2px;left:-110%;top:-2px;}
.button:hover .line-top{width:100%;left:-2px;}
.button .line-right{width:2px;height:0px;right:-2px;top:-110%;}
.button:hover .line-right{height:100%;top:-2px;}
.button .line-bottom{width:2px;height:0px;left:-2px;bottom:-110%;}
.button:hover .line-bottom{height:100%;bottom:-2px;}
.button .line-left{width:0px;height:2px;right:-110%;bottom:-2px;}
.button:hover .line-left{width:100%;right:-2px;}
.box .tip{position:absolute;padding:0px 14px;height:35px;line-height:35px;background:#2DCB70;color:#fff;top:160px;font-size:16px;font-weight:normal;text-transform:none;margin:0 auto;opacity:0;border-radius:3px}
.tip em{font-style:normal;}
.tip span{position:absolute;width:0;height:0;overflow:hidden;border:7px solid transparent;border-top-color:#2DCB70;left:50%;margin-left:-3px;bottom:-14px;}