*{margin:0;
  padding: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;
        -webkit-box-sizing:border-box;
        -o-box-sizing:border-box;
        -moz-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;
        -moz-transition:ease 0.4s;
        -o-transition:ease 0.4s;
        -webkit-transition:ease 0.4s;
        transition:ease 0.4s;
        position:relative;}

.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;}