/*=========瀵艰埅鏁堟灉==============*/
/*鎸夐挳鍙樺寲*/
/*out*/

@keyframes iconOut
{
    0% {
        left: 0px;
        opacity: 1;
    }
    50%{
        left: 3px;
        opacity: 1;
    }
    100% {
        left: -20px;
        opacity: 0;
    }
}
@-moz-keyframes iconOut /* Firefox */
{
    0% {
        left: 0px;
        opacity: 1;
    }
    50%{
        left: 3px;
        opacity: 1;
    }
    100% {
        left: -20px;
        opacity: 0;
    }
}
@-webkit-keyframes iconOut /* Safari 鍜� Chrome */
{
    0% {
        left: 0px;
        opacity: 1;
    }
    50%{
        left: 3px;
        opacity: 1;
    }
    100% {
        left: -20px;
        opacity: 0;
    }
}
/*IN*/

@keyframes iconIn
{
    0% {
        left: -20px;
        opacity: 0;
    }
    50%{
        left: 0px;
        opacity: 1;
    }
    100% {
        left: 0px;
        opacity: 1;
    }
}
@-moz-keyframes iconIn /* Firefox */
{
    0% {
        left: -20px;
        opacity: 0;
    }
    50%{
        left: 0px;
        opacity: 1;
    }
    100% {
        left: 0px;
        opacity: 1;
    }
}
@-webkit-keyframes iconIn /* Safari 鍜� Chrome */
{
    0% {
        left: -20px;
        opacity: 0;
    }
    50%{
        left: 0px;
        opacity: 1;
    }
    100% {
        left: 0px;
        opacity: 1;
    }
}
/*out*/

@keyframes iconFirstOut
{
    0% {
        transform: rotate(0deg);
        top: 0px;
    }
    100% {
        transform: rotate(45deg);
        top: 5px;
    }
}
@-moz-keyframes iconFirstOut /* Firefox */
{
    0% {
        transform: rotate(0deg);
        top: 0px;
    }
    100% {
        transform: rotate(45deg);
        top: 5px;
    }
}
@-webkit-keyframes iconFirstOut /* Safari 鍜� Chrome */
{
    
    0% {
        -webkit-transform: rotate(0deg);
        top: 0px;
    }
    100% {
        -webkit-transform: rotate(45deg);
        top: 5px;
    }
}
/**/
@keyframes iconLastOut
{
    0% {
        transform: rotate(0deg);
        top: 0px;
    }
    100% {
        transform: rotate(-45deg);
        top: -5px;
    }
}
@-moz-keyframes iconLastOut /* Firefox */
{
    0% {
        transform: rotate(0deg);
        top: 0px;
    }
    100% {
        transform: rotate(-45deg);
        top: -5px;
    }
}
@-webkit-keyframes iconLastOut /* Safari 鍜� Chrome */
{
    
    0% {
        -webkit-transform: rotate(0deg);
        top: 0px;
    }
    100% {
        -webkit-transform: rotate(-45deg);
        top: -5px;
    }
}
/*IN*/

@keyframes iconFirstIn
{
    0% {
        transform: rotate(45deg);
        top: 5px;
    }
    100% {
        transform: rotate(0deg);
        top: 0px;
    }
}
@-moz-keyframes iconFirstIn /* Firefox */
{
    0% {
        transform: rotate(45deg);
        top: 5px;
    }
    100% {
        transform: rotate(0deg);
        top: 0px;
    }
}
@-webkit-keyframes iconFirstIn /* Safari 鍜� Chrome */
{
    
    0% {
        -webkit-transform: rotate(45deg);
        top: 5px;
    }
    100% {
        -webkit-transform: rotate(0deg);
        top: 0px;
    }
}

@keyframes iconLastIn
{
    0% {
        transform: rotate(-45deg);
        top: -5px;
    }
    100% {
        transform: rotate(0deg);
        top: 0px;
    }
}
@-moz-keyframes iconLastIn /* Firefox */
{
    0% {
        transform: rotate(-45deg);
        top: -5px;
    }
    100% {
        transform: rotate(0deg);
        top: 0px;
    }
}
@-webkit-keyframes iconLastIn /* Safari 鍜� Chrome */
{
    0% {
        -webkit-transform: rotate(-45deg);
        top: -5px;
    }
    100% {
        -webkit-transform: rotate(0deg);
        top: 0px;
    }
}
/*鎸夐挳鍙樺寲缁撴潫*/
/*===========================*/
/*鎶栧姩鏁堟灉*/
@keyframes Shake
{
  from   {
    transform: translateX(1px) rotate(2deg);
  }
  to  {transform: translateX(-1px) rotate(-2deg);}
}

@-moz-keyframes Shake /* Firefox */
{
  from{
    -moz-transform: translateX(1px) rotate(2deg);
  }
  to{
    -moz-transform: translateX(-1px) rotate(-2deg);
  }
}

@-webkit-keyframes Shake /* Safari 鍜� Chrome */
{
  from{
    -webkit-transform: translateX(1px) rotate(2deg);
  }
  to{
    -webkit-transform: translateX(-1px) rotate(-2deg);
  }
}
/*鎶栧姩鏁堟灉缁撴潫*/
/*=================================*/
/*闂姩鏁堟灉*/

@keyframes flicker
{
    from{
        box-shadow: 0 0 0 0px rgba(0,255,185,1);
    }
    to{
        box-shadow: 0 0 0 10px rgba(0,255,185,0);
    }
}

@-moz-keyframes flicker /* Firefox */
{
    from{
        box-shadow: 0 0 0 0px rgba(0,255,185,1);
    }
    to{
        box-shadow: 0 0 0 10px rgba(0,255,185,0);
    }
}

@-webkit-keyframes flicker /* Safari 鍜� Chrome */
{
    from{
        box-shadow: 0 0 0 0px rgba(0,255,185,1);
    }
    to{
        box-shadow: 0 0 0 10px rgba(0,255,185,0);
    }
}
/**/

@keyframes flickerUp
{
    0%{
        box-shadow: 0 0 0 0px rgba(255,255,255,1);
        transform: perspective(100px) translate3d(0, 0, -10px);
        animation-timing-function: ease-out;
    }
    50%{
        box-shadow: 0 0 0 10px rgba(255,255,255,0.1);
        transform: perspective(100px) translate3d(0, 0, 0px);/*perspective閫忚璺濈*/
        animation-timing-function: ease-out;
    }
    100%{
        box-shadow: 0 0 0 10px rgba(255,255,255,0);
        transform: perspective(100px) translate3d(0, 0, -10px);
        animation-timing-function: ease-in;
    }
}

@-moz-keyframes flickerUp /* Firefox */
{
    0%{
        box-shadow: 0 0 0 0px rgba(255,255,255,1);
        transform: perspective(100px) translate3d(0, 0, -10px);
        animation-timing-function: ease-out;
    }
    50%{
        box-shadow: 0 0 0 10px rgba(255,255,255,0.1);
        transform: perspective(100px) translate3d(0, 0, 0px);
        animation-timing-function: ease-out;
    }
    100%{
        box-shadow: 0 0 0 10px rgba(255,255,255,0);
        transform: perspective(100px) translate3d(0, 0, -10px);
        animation-timing-function: ease-in;
    }
}

@-webkit-keyframes flickerUp /* Safari 鍜� Chrome */
{
    0%{
        box-shadow: 0 0 0 0px rgba(255,255,255,1);
        -webkit-transform: perspective(100px) translate3d(0, 0, -10px);
        -webkit-animation-timing-function: ease-out;
    }
    50%{
        box-shadow: 0 0 0 10px rgba(255,255,255,0.1);
        -webkit-transform: perspective(100px) translate3d(0, 0, 0px);
        -webkit-animation-timing-function: ease-out;
    }
    100%{
        box-shadow: 0 0 0 10px rgba(255,255,255,0);
        -webkit-transform: perspective(100px) translate3d(0, 0, -10px);
        -webkit-animation-timing-function: ease-in;
    }
}
/*缈昏浆*/

@keyframes flickerOut
{
    0%{
        transform: perspective(300px) rotate3d(0, 1, 0, -360deg);
        animation-timing-function: ease-out;
    }
    40%{
        transform: perspective(300px) translate3d(0, 0, 100px) rotate3d(0, 1, 0, -190deg);
        animation-timing-function: ease-out;
    }
    50%{
        transform: perspective(300px) translate3d(0, 0, 100px) rotate3d(0, 1, 0, -170deg);
        animation-timing-function: ease-in;
    }
    80% {
        transform: perspective(300px) scale3d(.95, .95, .95);
        animation-timing-function: ease-in;
  }
    100%{
        transform: perspective(300px) translate3d(0, 0, 0px) rotate3d(0, 0, 0, 0deg);
        animation-timing-function: ease-in;
    }
}

@-moz-keyframes flickerOut /* Firefox */
{
    0%{
        transform: perspective(300px) rotate3d(0, 1, 0, -360deg);
        animation-timing-function: ease-out;
    }
    40%{
        transform: perspective(300px) translate3d(0, 0, 100px) rotate3d(0, 1, 0, -190deg);
        animation-timing-function: ease-out;
    }
    50%{
        transform: perspective(300px) translate3d(0, 0, 100px) rotate3d(0, 1, 0, -170deg);
        animation-timing-function: ease-in;
    }
    80% {
        transform: perspective(300px) scale3d(.95, .95, .95);
        animation-timing-function: ease-in;
  }
    100%{
        transform: perspective(300px) translate3d(0, 0, 0px) rotate3d(0, 0, 0, 0deg);
        animation-timing-function: ease-in;
    }
}

@-webkit-keyframes flickerOut /* Safari 鍜� Chrome */
{
    0%{
         -webkit-transform: perspective(300px) rotate3d(0, 1, 0, -360deg);
         -webkit-animation-timing-function: ease-out;
    }
    40%{
         -webkit-transform: perspective(300px) translate3d(0, 0, 100px) rotate3d(0, 1, 0, -190deg);
         -webkit-animation-timing-function: ease-out;
    }
    50%{
         -webkit-transform: perspective(300px) translate3d(0, 0, 100px) rotate3d(0, 1, 0, -170deg);
         -webkit-animation-timing-function: ease-in;
    }
    80% {
         -webkit-transform: perspective(300px) scale3d(.95, .95, .95);
         -webkit-animation-timing-function: ease-in;
    }
    100%{
         -webkit-transform: perspective(300px) translate3d(0, 0, 0px) rotate3d(0, 0, 0, 0deg);
         -webkit-animation-timing-function: ease-in;
    }
}
/*闂姩鏁堟灉end*/
/*=================================*/
/**/
@keyframes twinkling
{
    from{
        box-shadow: 0 0 0px rgba(0,255,185,1);
    }
    to{
        box-shadow: 0 0 5px rgba(0,255,185,1);
    }
}

@-moz-keyframes twinkling /* Firefox */
{
    from{
        box-shadow: 0 0 0px rgba(0,255,185,1);
    }
    to{
        box-shadow: 0 0 5px rgba(0,255,185,1);
    }
}

@-webkit-keyframes twinkling /* Safari 鍜� Chrome */
{
    from{
        box-shadow: 0 0 0px rgba(0,255,185,1);
    }
    to{
        box-shadow: 0 0 5px rgba(0,255,185,1);
    }
}
/*鏂滅嚎*/

@keyframes keytilt
{
    from{
        width: 0px;
    }
    to{
        width: 100%;
    }
}
@-moz-keyframes keytilt /* Firefox */
{
    from{
        width: 0px;
    }
    to{
        width:  100%;
    }
}
@-webkit-keyframes keytilt /* Safari 鍜� Chrome */
{
    from{
        width: 0px;
    }
    to{
        width:  100%;
    }
}
/**/
@keyframes keydialogue
{
    from{
        opacity: 0;
        left: -10px;
    }
    to{
        opacity: 1;
        left: 0px;
    }
}
@-moz-keyframes keydialogue /* Firefox */
{
    from{
        opacity: 0;
        left: -10px;
    }
    to{
        opacity: 1;
        left: 0px;
    }
}
@-webkit-keyframes keydialogue /* Safari 鍜� Chrome */
{
    from{
        opacity: 0;
        left: -10px;
    }
    to{
        opacity: 1;
        left: 0px;
    }
}
/**/
/**/
@keyframes fixedTop
{
    from{
        top: -95px;
    }
    to{
        top: 0px;
    }
}
@-moz-keyframes fixedTop /* Firefox */
{
    from{
        top: -95px;
    }
    to{
        top: 0px;
    }
}
@-webkit-keyframes fixedTop /* Safari 鍜� Chrome */
{
    from{
        top: -95px;
    }
    to{
        top: 0px;
    }
}
/**/
@keyframes Inrotate /* Firefox */
{
    0%{
        transform:perspective(600px) rotateX(5deg) rotateY(-10deg) scale(0.8);
    }
    100%{
        transform:perspective(600px) rotateY(0deg) rotateX(0deg)  scale(1);
    }
}
@-moz-keyframes Inrotate /* Firefox */
{
    0%{
        -moz-transform:perspective(600px) rotateX(5deg) rotateY(-10deg) scale(0.8);
    }
    100%{
        -moz-transform:perspective(600px) rotateY(0deg) rotateX(0deg)  scale(1);
    }
}
@-webkit-keyframes Inrotate /* Safari 鍜� Chrome */
{
    0%{
        transform:perspective(600px) rotateX(5deg) rotateY(-10deg) scale(0.8);
        -webkit-transform:perspective(600px) rotateX(5deg) rotateY(-10deg) scale(0.8);
        opacity: 0;
    }
    100%{
        transform:perspective(600px) rotateY(0deg) rotateX(0deg)  scale(1);
        -webkit-transform:perspective(600px) rotateY(0deg) rotateX(0deg)  scale(1);
        opacity: 1;
    }
}
/**/
@keyframes Outrotate /* Firefox */
{
    0%{
        transform:perspective(600px) rotateY(0deg) rotateX(0deg)  scale(1);
        opacity: 1;
    }
    100%{
        transform:perspective(600px) rotateX(5deg) rotateY(-10deg) scale(0.8);
        opacity: 0;
    }
}
@-moz-keyframes Outrotate /* Firefox */
{
    0%{
        -moz-transform:perspective(600px) rotateY(0deg) rotateX(0deg)  scale(1);
        opacity: 1;
    }
    100%{
        -moz-transform:perspective(600px) rotateX(5deg) rotateY(-10deg) scale(0.8);
        opacity: 0;
    }
}
@-webkit-keyframes Outrotate /* Safari 鍜� Chrome */
{
    0%{
        transform:perspective(600px) rotateY(0deg) rotateX(0deg)  scale(1);
        -webkit-transform:perspective(600px) rotateY(0deg) rotateX(0deg)  scale(1);
        opacity: 1;
    }
    100%{
        transform:perspective(600px) rotateX(5deg) rotateY(-10deg) scale(0.8);
        -webkit-transform:perspective(600px) rotateX(5deg) rotateY(-10deg) scale(0.8);
        opacity: 0;
    }
}
/* top*/
@keyframes Intop /* Firefox */
{
    0%{
        top: -30px;
    }
    100%{
        top: 0px;
    }
}
@-moz-keyframes Intop /* Firefox */
{
    0%{
        top: -30px;
    }
    100%{
        top: 0px;
    }
@-webkit-keyframes Intop /* Safari 鍜� Chrome */
{
    0%{
        top: -30px;
    }
    100%{
        top: 0px;
    }
}