/* 方舟生存进化 */
#snail_fzscjh{
    transition: all .6s ease-in;
}

#snail_fzscjh:after, #snail_fzscjh:before {
    box-sizing: border-box;
    border: 3px solid transparent;
    width: 0;
    height: 0;
    content: '';
    display: block;
    position: absolute;
}
#snail_fzscjh:before {
    bottom: 0;
    right: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
}
#snail_fzscjh:after {
    top: 0;
    left: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
}
#snail_fzscjh:hover:after, #snail_fzscjh:hover:before {
    width: 100%;
    height: 100%;
}
#snail_fzscjh:hover:before {
    border-bottom-color: #F08200;
    border-left-color: #F08200;
    transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
}
#snail_fzscjh:hover:after {
    border-top-color: #F08200;
    border-right-color: #F08200;
    transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
}

/* 方块方舟 */
#snail_fzfk{
    transition: all .6s ease-in;
}

#snail_fzfk:after, #snail_fzfk:before {
    box-sizing: border-box;
    border: 3px solid transparent;
    width: 0;
    height: 0;
    content: '';
    display: block;
    position: absolute;
}
#snail_fzfk:before {
    bottom: 0;
    right: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
}
#snail_fzfk:after {
    top: 0;
    left: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
}
#snail_fzfk:hover:after, #snail_fzfk:hover:before {
    width: 100%;
    height: 100%;
}
#snail_fzfk:hover:before {
    border-bottom-color: #F08200;
    border-left-color: #F08200;
    transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
}
#snail_fzfk:hover:after {
    border-top-color: #F08200;
    border-right-color: #F08200;
    transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
}

/* ATLAS */
#snail_atlas{
    transition: all .6s ease-in;
}

#snail_atlas:after, #snail_atlas:before {
    box-sizing: border-box;
    border: 3px solid transparent;
    width: 0;
    height: 0;
    content: '';
    display: block;
    position: absolute;
}
#snail_atlas:before {
    bottom: 0;
    right: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
}
#snail_atlas:after {
    top: 0;
    left: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
}
#snail_atlas:hover:after, #snail_atlas:hover:before {
    width: 100%;
    height: 100%;
}
#snail_atlas:hover:before {
    border-bottom-color: #F08200;
    border-left-color: #F08200;
    transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
}
#snail_atlas:hover:after {
    border-top-color: #F08200;
    border-right-color: #F08200;
    transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
}


/* LAST */
#snail_lost{
    transition: all .6s ease-in;
}

#snail_lost:after, #snail_lost:before {
    box-sizing: border-box;
    border: 3px solid transparent;
    width: 0;
    height: 0;
    content: '';
    display: block;
    position: absolute;
}
#snail_lost:before {
    bottom: 0;
    right: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
}
#snail_lost:after {
    top: 0;
    left: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
}
#snail_lost:hover:after, #snail_lost:hover:before {
    width: 100%;
    height: 100%;
}
#snail_lost:hover:before {
    border-bottom-color: #F08200;
    border-left-color: #F08200;
    transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
}
#snail_lost:hover:after {
    border-top-color: #F08200;
    border-right-color: #F08200;
    transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
}

/* Z */
#snail_z{
    transition: all .6s ease-in;
}

#snail_z:after, #snail_z:before {
    box-sizing: border-box;
    border: 3px solid transparent;
    width: 0;
    height: 0;
    content: '';
    display: block;
    position: absolute;
}
#snail_z:before {
    bottom: 0;
    right: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
}
#snail_z:after {
    top: 0;
    left: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
}
#snail_z:hover:after, #snail_z:hover:before {
    width: 100%;
    height: 100%;
}
#snail_z:hover:before {
    border-bottom-color: #F08200;
    border-left-color: #F08200;
    transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
}
#snail_z:hover:after {
    border-top-color: #F08200;
    border-right-color: #F08200;
    transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
}

/* 方舟公园 */
#snail_fzgy{
    transition: all .6s ease-in;
}

#snail_fzgy:after, #snail_fzgy:before {
    box-sizing: border-box;
    border: 3px solid transparent;
    width: 0;
    height: 0;
    content: '';
    display: block;
    position: absolute;
}
#snail_fzgy:before {
    bottom: 0;
    right: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
}
#snail_fzgy:after {
    top: 0;
    left: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
}
#snail_fzgy:hover:after, #snail_fzgy:hover:before {
    width: 100%;
    height: 100%;
}
#snail_fzgy:hover:before {
    border-bottom-color: #F08200;
    border-left-color: #F08200;
    transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
}
#snail_fzgy:hover:after {
    border-top-color: #F08200;
    border-right-color: #F08200;
    transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
}

/* 黑光 */
#snail_hg{
    transition: all .6s ease-in;
}

#snail_hg:after, #snail_hg:before {
    box-sizing: border-box;
    border: 3px solid transparent;
    width: 0;
    height: 0;
    content: '';
    display: block;
    position: absolute;
}
#snail_hg:before {
    bottom: 0;
    right: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
}
#snail_hg:after {
    top: 0;
    left: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
}
#snail_hg:hover:after, #snail_hg:hover:before {
    width: 100%;
    height: 100%;
}
#snail_hg:hover:before {
    border-bottom-color: #F08200;
    border-left-color: #F08200;
    transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
}
#snail_hg:hover:after {
    border-top-color: #F08200;
    border-right-color: #F08200;
    transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
}

/* 武林志2 */
#snail_wlz2{
    transition: all .6s ease-in;
}

#snail_wlz2:after, #snail_wlz2:before {
    box-sizing: border-box;
    border: 3px solid transparent;
    width: 0;
    height: 0;
    content: '';
    display: block;
    position: absolute;
}
#snail_wlz2:before {
    bottom: 0;
    right: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
}
#snail_wlz2:after {
    top: 0;
    left: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
}
#snail_wlz2:hover:after, #snail_wlz2:hover:before {
    width: 100%;
    height: 100%;
}
#snail_wlz2:hover:before {
    border-bottom-color: #F08200;
    border-left-color: #F08200;
    transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
}
#snail_wlz2:hover:after {
    border-top-color: #F08200;
    border-right-color: #F08200;
    transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
}

/* 武林志1 */
#snail_wlz11{
    transition: all .6s ease-in;
}

#snail_wlz11:after, #snail_wlz11:before {
    box-sizing: border-box;
    border: 3px solid transparent;
    width: 0;
    height: 0;
    content: '';
    display: block;
    position: absolute;
}
#snail_wlz11:before {
    bottom: 0;
    right: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
}
#snail_wlz11:after {
    top: 0;
    left: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
}
#snail_wlz11:hover:after, #snail_wlz11:hover:before {
    width: 100%;
    height: 100%;
}
#snail_wlz11:hover:before {
    border-bottom-color: #F08200;
    border-left-color: #F08200;
    transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
}
#snail_wlz11:hover:after {
    border-top-color: #F08200;
    border-right-color: #F08200;
    transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
}

/* 西部狂徒 */
#snail_xbkt{
    transition: all .6s ease-in;
}

#snail_xbkt:after, #snail_xbkt:before {
    box-sizing: border-box;
    border: 3px solid transparent;
    width: 0;
    height: 0;
    content: '';
    display: block;
    position: absolute;
}
#snail_xbkt:before {
    bottom: 0;
    right: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
}
#snail_xbkt:after {
    top: 0;
    left: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
}
#snail_xbkt:hover:after, #snail_xbkt:hover:before {
    width: 100%;
    height: 100%;
}
#snail_xbkt:hover:before {
    border-bottom-color: #F08200;
    border-left-color: #F08200;
    transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
}
#snail_xbkt:hover:after {
    border-top-color: #F08200;
    border-right-color: #F08200;
    transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
}