@charset "UTF-8";/* reset */
/**author:Y.Ray*/
/**
@keyframes circle {}
@-o-keyframes circle {}
@-moz-keyframes circle {}
@-webkit-keyframes circle {}
**/
.circle {
  animation: circleX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, circleY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
  -o-animation: circleX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, circleY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
  -moz-animation: circleX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, circleY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
  -webkit-animation: circleX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, circleY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}
/*画圆运动*/
@keyframes circleX {from {top: -60px;}  to {top: -40px;  }}
@keyframes circleY {from {right: -150px;}  to {right: -120px;  }}

/* 按钮闪光 */
.a_ani {
	position:relative;
	overflow:hidden;
}
.a_ani::before {
	content:"";
	position:absolute;
	width:100%;
	height:200px;
	left:0;
	right:0;
	top:50%;
	background:rgba(255,255,255,0.2);
	border-radius:50%;
	margin:-100px auto auto;

	animation:mytop 1s infinite;
	-moz-animation:mytop 1s infinite;
	-webkit-animation:mytop 1s infinite;
	-o-animation:mytop 1s infinite;
	-webkit-transform:scale(0.2)
}
@-webkit-keyframes mytop{0%{-webkit-transform:scale(0.2)}100%{-webkit-transform:scale(1)}}
@-moz-keyframes mytop{0%{-moz-transform:scale(0.2)}100%{-moz-transform:scale(1)}}
@-o-keyframes mytop{0%{-o-transform:scale(0.2)}100%{-o-transform:scale(1)}}
@keyframes mytop{0%{transform:scale(0.2)}100%{transform:scale(1)}}

/* 文字渐变扫光 */
.title-shine{
  background:linear-gradient(to right,#9f9f9f 0,#fff 10%,#868686 20%);
	background-position:0;
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
  animation:shine 3s infinite linear;
	animation-fill-mode:forwards;
}
@-moz-keyframes shine{0%{background-position:0;}
60%{background-position:280px;}
100%{background-position:280px;}
}
@-webkit-keyframes shine{0%{background-position:0;}
60%{background-position:280px;}
100%{background-position:280px;}
}
@-o-keyframes shine{0%{background-position:0;}
60%{background-position:280px;}
100%{background-position:280px;}
}
@keyframes shine{0%{background-position:0;}
60%{background-position:280px;}
100%{background-position:280px;}
}

/* 以右下为圆心顺时针旋转8度 */
.hover-rotatedeg{
  transform-origin:right bottom; /*右下为圆心 */
  transition:all 0.6s cubic-bezier(0.23,1,0.320,1);
}
.hover-rotatedeg:hover{
  rotate:8deg;
}
/* 旋转360度放大1倍 */
.hover-rotate360:hover {
  transform:scale(1.95);
  transition:all 1s ease-in-out;
  rotate:360deg;
}

/* 按钮从左到右扫光 */
.button-lightsweep{
  transition: all 0.3s ease-in-out;
}
.button-lightsweep:hover {
  transform: scale(1.05);
}
.button-lightsweep:hover::before {
  animation: shine1 1.5s ease-out infinite;
}
.button-lightsweep::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100px;

  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  opacity: 0.6;
}
@keyframes shine1{
  0% {
    left: -100px;
  }
  60% {
    left: 100%;
  }
  to {
    left: 100%;
  }
}

/*放大缩小1*/
@keyframes scale1 {  from {    transform: scale(0.9)  }  to {    transform: scale(1.1)  }}
@-o-keyframes scale1  {  from {    transform: scale(0.9)  }  to {    transform: scale(1.1)  }}
@-moz-keyframes scale1  {  from {    transform: scale(0.9)  }  to {    transform: scale(1.1)  }}
@-webkit-keyframes scale1  {  from {    transform: scale(0.9)  }  to {    transform: scale(1.1)  }}
/*放大缩小2*/
@keyframes scale2 {  from {    transform: scale(1)  }  to {    transform: scale(1.05)  }}
@-o-keyframes scale2  {  from {    transform: scale(1)  }  to {    transform: scale(1.05)  }}
@-moz-keyframes scale2  {  from {    transform: scale(1)  }  to {    transform: scale(1.05)  }}
@-webkit-keyframes scale2  {  from {    transform: scale(1)  }  to {    transform: scale(1.05)  }}

/*上下移动*/
@keyframes moveY{  0%{transform: translateY(-10px);}  100%{transform: translateY(0);}}
@-o-keyframes moveY{  0%{transform: translateY(-10px);}  100%{transform: translateY(0);}}
@-moz-keyframes moveY{  0%{transform: translateY(-10px);}  100%{transform: translateY(0);}}
@-webkit-keyframes moveY{  0%{transform: translateY(-10px);}  100%{transform: translateY(0);}}

/*左右移动1*/
@keyframes moveX1{  0%{transform: translateX(10px);opacity: .4}  100%{transform: translateX(-10px);opacity: 1}}
@-o-keyframes moveX1{  0%{transform: translateX(10px);opacity: .4}  100%{transform: translateX(-10px);opacity: 1}}
@-moz-keyframes moveX1{  0%{transform: translateX(10px);opacity: .4}  100%{transform: translateX(-10px);opacity: 1}}
@-webkit-keyframes moveX1{  0%{transform: translateX(10px);opacity: .4}  100%{transform: translateX(-10px);opacity: 1}}
/*左右移动2----opcity*/
@keyframes moveX2{  0%{transform: translateX(-10px);opacity: .4}  100%{transform: translateX(10px);opacity: 1}}
@-o-keyframes moveX2{  0%{transform: translateX(-10px);opacity: .4}  100%{transform: translateX(10px);opacity: 1}}
@-moz-keyframes moveX2{  0%{transform: translateX(-10px);opacity: .4}  100%{transform: translateX(10px);opacity: 1}}
@-webkit-keyframes moveX2{  0%{transform: translateX(-10px);opacity: .4}  100%{transform: translateX(10px);opacity: 1}}

/*转圈1*/
@keyframes rotate1 {  from {    transform: rotate(0)  }  to {    transform: rotate(360deg)  }}
@-o-keyframes rotate1  {   from {    transform: rotate(0)  }  to {    transform: rotate(360deg)  }}
@-moz-keyframes rotate1  {   from {    transform: rotate(0)  }  to {    transform: rotate(360deg)  }}
@-webkit-keyframes rotate1  {   from {    transform: rotate(0)  }  to {    transform: rotate(360deg)  }}

/*转圈2*/
@keyframes rotate2 {  from {    transform: rotate(0)  }  to {    transform: rotate(-360deg)  }}
@-o-keyframes rotate2  {   from {    transform: rotate(0)  }  to {    transform: rotate(-360deg)  }}
@-moz-keyframes rotate2  {   from {    transform: rotate(0)  }  to {    transform: rotate(-360deg)  }}
@-webkit-keyframes rotate2  {   from {    transform: rotate(0)  }  to {    transform: rotate(-360deg)  }}

/*字体流光效果  配合 .text-streaming() 使用*/
@-moz-keyframes word {0% {background-position: 0 0;}  100% {background-position: -100% 0 }}
@-webkit-keyframes word {0% {background-position: 0 0;}  100% {background-position: -100% 0}}
@-ms-keyframes word {0% {background-position: 0 0;}  100% {background-position: -100% 0}}
@-o-keyframes word {0% {background-position: 0 0;}  100% {background-position: -100% 0}}
@keyframes word {0% {background-position: 0 0;}  100% {background-position: -100% 0}}

/*背景流动*/
@-webkit-keyframes bgliner1 {0%{background-position: 0% 50%;}50%{background-position: 200% 50%;}100%{background-position: 0% 50%;}}
@-moz-keyframes bgliner1 {0%{background-position: 0% 50%;}50%{background-position: 200% 50%;}100%{background-position: 0% 50%;}}
@-ms-keyframes bgliner1 {0%{background-position: 0% 50%;}50%{background-position: 200% 50%;}100%{background-position: 0% 50%;}}
@-o-keyframes bgliner1 {0%{background-position: 0% 50%;}50%{background-position: 200% 50%;}100%{background-position: 0% 50%;}}
@keyframes bgliner1 {0%{background-position: 0% 50%;}50%{background-position: 200% 50%;}100%{background-position: 0% 50%;}}

/*抖动渐显*/
@keyframes showing {
  0% {opacity: 0;transform: scale(.4) rotate(0)}
  15%{opacity: .15;transform: scale(.5) rotate(10deg)}
  36%{opacity: .36;transform: scale(.6) rotate(0)}
  50%{opacity: .5;transform: scale(.7) rotate(-10deg)}
  65%{opacity: .65;transform: scale(.8) rotate(0)}
  80%{opacity: .8;transform: scale(.9) rotate(10deg)}
  100% {opacity: 1;transform: scale(1) rotate(0)}
}
@-o-keyframes showing {
  0% {opacity: 0;transform: scale(.4) rotate(0)}
  15%{opacity: .15;transform: scale(.5) rotate(10deg)}
  36%{opacity: .36;transform: scale(.6) rotate(0)}
  50%{opacity: .5;transform: scale(.7) rotate(-10deg)}
  65%{opacity: .65;transform: scale(.8) rotate(0)}
  80%{opacity: .8;transform: scale(.9) rotate(10deg)}
  100% {opacity: 1;transform: scale(1) rotate(0)}
}
@-moz-keyframes showing {
  0% {opacity: 0;transform: scale(.4) rotate(0)}
  15%{opacity: .15;transform: scale(.5) rotate(10deg)}
  36%{opacity: .36;transform: scale(.6) rotate(0)}
  50%{opacity: .5;transform: scale(.7) rotate(-10deg)}
  65%{opacity: .65;transform: scale(.8) rotate(0)}
  80%{opacity: .8;transform: scale(.9) rotate(10deg)}
  100% {opacity: 1;transform: scale(1) rotate(0)}
}
@-webkit-keyframes showing {
  0% {opacity: 0;transform: scale(.4) rotate(0)}
  15%{opacity: .15;transform: scale(.5) rotate(10deg)}
  36%{opacity: .36;transform: scale(.6) rotate(0)}
  50%{opacity: .5;transform: scale(.7) rotate(-10deg)}
  65%{opacity: .65;transform: scale(.8) rotate(0)}
  80%{opacity: .8;transform: scale(.9) rotate(10deg)}
  100% {opacity: 1;transform: scale(1) rotate(0)}
}

/* hover */
/* 
鼠标hover后 元素的效果，此效果也能单独拿出来给元素动态使用
hvr-grow  放大 
hvr-shrink 缩小
hvr-pulse  放大缩小
hvr-pulse-grow  更快的缩小复原
hvr-pulse-shrink 更快的放大复原
hvr-push    缩小一下
hvr-pop     放大一下
hvr-bounce-in   放大两下
hvr-bounce-out  缩小两下
hvr-rotate      右倾斜下
hvr-grow-rotate 放大右斜下
hvr-float       上悬浮起来
hvr-sink        下悬浮起来
hvr-bob         上悬浮后晃动
hvr-hang        元素先向下，然后上下悬浮
hvr-skew        元素整体斜体
hvr-skew-forward    底部不动，往右倾斜
hvr-skew-backward   底部不动 元素向左倾斜
hvr-wobble-vertical 上下悬浮
hvr-wobble-horizontal   左右频繁晃动
hvr-wobble-to-bottom-right  往右下悬浮
hvr-wobble-to-top-right     上右悬浮
hvr-wobble-top              底部不动，上下悬浮
hvr-wobble-bottom           上部不动，下部左右悬浮
hvr-wobble-skew             左右悬浮
hvr-buzz                    不倒翁晃动
hvr-buzz-out                不倒翁左右晃动后停
hvr-forward                 向左悬浮
hvr-backward                向右悬浮
hvr-shadow                  悬浮出阴影
hvr-grow-shadow             放大加阴影
hvr-float-shadow            悬浮起来 底部阴影
hvr-shadow-radial           上下都有阴影
hvr-underline-from-left     底部线条从左到右
hvr-underline-from-center   底部线条从中间到两边
hvr-underline-from-right    底部线条从右到左
hvr-underline-reveal        底部出现线条
hvr-overline-reveal         头部出现线条
hvr-overline-from-left      头部线条从左到右
hvr-overline-from-center    头部线条从中间到两边
hvr-overline-from-right     头部线条从右到左
*/


.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-grow:hover,.hvr-grow:focus,.hvr-grow:active {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

/* 悬浮缩小 */
.hvr-shrink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}
.hvr-shrink:hover,.hvr-shrink:focus,.hvr-shrink:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
}

@-webkit-keyframes hvr-pulse {
    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    75% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9)
    }
}
@keyframes hvr-pulse {
    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    75% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9)
    }
}

.hvr-pulse {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0)
}

.hvr-pulse:hover,.hvr-pulse:focus,.hvr-pulse:active {
    -webkit-animation-name: hvr-pulse;
    animation-name: hvr-pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@-webkit-keyframes hvr-pulse-grow {
    to {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@keyframes hvr-pulse-grow {
    to {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
}

.hvr-pulse-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0)
}

.hvr-pulse-grow:hover,.hvr-pulse-grow:focus,.hvr-pulse-grow:active {
    -webkit-animation-name: hvr-pulse-grow;
    animation-name: hvr-pulse-grow;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate
}

@-webkit-keyframes hvr-pulse-shrink {
    to {
        -webkit-transform: scale(0.9);
        transform: scale(0.9)
    }
}

@keyframes hvr-pulse-shrink {
    to {
        -webkit-transform: scale(0.9);
        transform: scale(0.9)
    }
}

/* 放大缩小闪动 */
.hvr-pulse-shrink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0)
}
.hvr-pulse-shrink:hover,.hvr-pulse-shrink:focus,.hvr-pulse-shrink:active {
    -webkit-animation-name: hvr-pulse-shrink;
    animation-name: hvr-pulse-shrink;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate
}
@-webkit-keyframes hvr-push {
    50% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes hvr-push {
    50% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.hvr-push {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0)
}

.hvr-push:hover,.hvr-push:focus,.hvr-push:active {
    -webkit-animation-name: hvr-push;
    animation-name: hvr-push;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

@-webkit-keyframes hvr-pop {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

@keyframes hvr-pop {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

.hvr-pop {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0)
}

.hvr-pop:hover,.hvr-pop:focus,.hvr-pop:active {
    -webkit-animation-name: hvr-pop;
    animation-name: hvr-pop;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

.hvr-bounce-in {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .5s;
    transition-duration: .5s
}

.hvr-bounce-in:hover,.hvr-bounce-in:focus,.hvr-bounce-in:active {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition-timing-function: cubic-bezier(0.47,2.02,0.31,-0.36);
    transition-timing-function: cubic-bezier(0.47,2.02,0.31,-0.36)
}

.hvr-bounce-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .5s;
    transition-duration: .5s
}

.hvr-bounce-out:hover,.hvr-bounce-out:focus,.hvr-bounce-out:active {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition-timing-function: cubic-bezier(0.47,2.02,0.31,-0.36);
    transition-timing-function: cubic-bezier(0.47,2.02,0.31,-0.36)
}

.hvr-rotate {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-rotate:hover,.hvr-rotate:focus,.hvr-rotate:active {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg)
}

.hvr-grow-rotate {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}
.hvr-grow-rotate:hover,.hvr-grow-rotate:focus,.hvr-grow-rotate:active {
    -webkit-transform: scale(1.1) rotate(4deg);
    transform: scale(1.1) rotate(4deg)
}

.hvr-float {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}
.hvr-float:hover,.hvr-float:focus,.hvr-float:active {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px)
}

.hvr-sink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-sink:hover,.hvr-sink:focus,.hvr-sink:active {
    -webkit-transform: translateY(8px);
    transform: translateY(8px)
}

@-webkit-keyframes hvr-bob {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }

    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px)
    }

    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }
}

@keyframes hvr-bob {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }

    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px)
    }

    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }
}

@-webkit-keyframes hvr-bob-float {
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }
}

@keyframes hvr-bob-float {
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }
}

.hvr-bob {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0)
}
.hvr-bob:hover,.hvr-bob:focus,.hvr-bob:active {
    -webkit-animation-name: hvr-bob-float,hvr-bob;
    animation-name: hvr-bob-float,hvr-bob;
    -webkit-animation-duration: .3s,1.5s;
    animation-duration: .3s,1.5s;
    -webkit-animation-delay: 0s,.3s;
    animation-delay: 0s,.3s;
    -webkit-animation-timing-function: ease-out,ease-in-out;
    animation-timing-function: ease-out,ease-in-out;
    -webkit-animation-iteration-count: 1,infinite;
    animation-iteration-count: 1,infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal,alternate;
    animation-direction: normal,alternate
}

@-webkit-keyframes hvr-hang {
    0% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    50% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }

    100% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }
}

@keyframes hvr-hang {
    0% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    50% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }

    100% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }
}

@-webkit-keyframes hvr-hang-sink {
    100% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }
}

@keyframes hvr-hang-sink {
    100% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }
}

/* 元素先向下，然后上下悬浮 */
.hvr-hang {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0)
}
.hvr-hang:hover,.hvr-hang:focus,.hvr-hang:active {
    -webkit-animation-name: hvr-hang-sink,hvr-hang;
    animation-name: hvr-hang-sink,hvr-hang;
    -webkit-animation-duration: .3s,1.5s;
    animation-duration: .3s,1.5s;
    -webkit-animation-delay: 0s,.3s;
    animation-delay: 0s,.3s;
    -webkit-animation-timing-function: ease-out,ease-in-out;
    animation-timing-function: ease-out,ease-in-out;
    -webkit-animation-iteration-count: 1,infinite;
    animation-iteration-count: 1,infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal,alternate;
    animation-direction: normal,alternate
}

/* 元素整体斜体 */
.hvr-skew {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}
.hvr-skew:hover,.hvr-skew:focus,.hvr-skew:active {
    -webkit-transform: skew(-10deg);
    transform: skew(-10deg)
}

/* 底部不动，往右倾斜 */
.hvr-skew-forward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%
}
.hvr-skew-forward:hover,.hvr-skew-forward:focus,.hvr-skew-forward:active {
    -webkit-transform: skew(-10deg);
    transform: skew(-10deg)
}

/* 底部不懂 元素向左倾斜 */
.hvr-skew-backward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%
}
.hvr-skew-backward:hover,.hvr-skew-backward:focus,.hvr-skew-backward:active {
    -webkit-transform: skew(10deg);
    transform: skew(10deg)
}
@-webkit-keyframes hvr-wobble-vertical {
    16.65% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    33.3% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }

    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }

    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px)
    }

    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}
@keyframes hvr-wobble-vertical {
    16.65% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    33.3% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }

    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }

    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px)
    }

    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

/* 上下悬浮 */
.hvr-wobble-vertical {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0)
}
.hvr-wobble-vertical:hover,.hvr-wobble-vertical:focus,.hvr-wobble-vertical:active {
    -webkit-animation-name: hvr-wobble-vertical;
    animation-name: hvr-wobble-vertical;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}
@-webkit-keyframes hvr-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px)
    }

    33.3% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px)
    }

    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px)
    }

    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }

    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes hvr-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px)
    }

    33.3% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px)
    }

    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px)
    }

    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }

    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

/* 左右频繁晃动 */
.hvr-wobble-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0)
}
.hvr-wobble-horizontal:hover,.hvr-wobble-horizontal:focus,.hvr-wobble-horizontal:active {
    -webkit-animation-name: hvr-wobble-horizontal;
    animation-name: hvr-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}
@-webkit-keyframes hvr-wobble-to-bottom-right {
    16.65% {
        -webkit-transform: translate(8px,8px);
        transform: translate(8px,8px)
    }

    33.3% {
        -webkit-transform: translate(-6px,-6px);
        transform: translate(-6px,-6px)
    }

    49.95% {
        -webkit-transform: translate(4px,4px);
        transform: translate(4px,4px)
    }

    66.6% {
        -webkit-transform: translate(-2px,-2px);
        transform: translate(-2px,-2px)
    }

    83.25% {
        -webkit-transform: translate(1px,1px);
        transform: translate(1px,1px)
    }

    100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}
@keyframes hvr-wobble-to-bottom-right {
    16.65% {
        -webkit-transform: translate(8px,8px);
        transform: translate(8px,8px)
    }

    33.3% {
        -webkit-transform: translate(-6px,-6px);
        transform: translate(-6px,-6px)
    }

    49.95% {
        -webkit-transform: translate(4px,4px);
        transform: translate(4px,4px)
    }

    66.6% {
        -webkit-transform: translate(-2px,-2px);
        transform: translate(-2px,-2px)
    }

    83.25% {
        -webkit-transform: translate(1px,1px);
        transform: translate(1px,1px)
    }

    100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}

/* 往右下悬浮 */
.hvr-wobble-to-bottom-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0)
}
.hvr-wobble-to-bottom-right:hover,.hvr-wobble-to-bottom-right:focus,.hvr-wobble-to-bottom-right:active {
    -webkit-animation-name: hvr-wobble-to-bottom-right;
    animation-name: hvr-wobble-to-bottom-right;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}
@-webkit-keyframes hvr-wobble-to-top-right {
    16.65% {
        -webkit-transform: translate(8px,-8px);
        transform: translate(8px,-8px)
    }

    33.3% {
        -webkit-transform: translate(-6px,6px);
        transform: translate(-6px,6px)
    }

    49.95% {
        -webkit-transform: translate(4px,-4px);
        transform: translate(4px,-4px)
    }

    66.6% {
        -webkit-transform: translate(-2px,2px);
        transform: translate(-2px,2px)
    }

    83.25% {
        -webkit-transform: translate(1px,-1px);
        transform: translate(1px,-1px)
    }

    100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}
@keyframes hvr-wobble-to-top-right {
    16.65% {
        -webkit-transform: translate(8px,-8px);
        transform: translate(8px,-8px)
    }

    33.3% {
        -webkit-transform: translate(-6px,6px);
        transform: translate(-6px,6px)
    }

    49.95% {
        -webkit-transform: translate(4px,-4px);
        transform: translate(4px,-4px)
    }

    66.6% {
        -webkit-transform: translate(-2px,2px);
        transform: translate(-2px,2px)
    }

    83.25% {
        -webkit-transform: translate(1px,-1px);
        transform: translate(1px,-1px)
    }

    100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}

/* 上右悬浮 */
.hvr-wobble-to-top-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0)
}
.hvr-wobble-to-top-right:hover,.hvr-wobble-to-top-right:focus,.hvr-wobble-to-top-right:active {
    -webkit-animation-name: hvr-wobble-to-top-right;
    animation-name: hvr-wobble-to-top-right;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}
@-webkit-keyframes hvr-wobble-top {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg)
    }

    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg)
    }

    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg)
    }

    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg)
    }

    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg)
    }

    100% {
        -webkit-transform: skew(0);
        transform: skew(0)
    }
}

@keyframes hvr-wobble-top {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg)
    }

    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg)
    }

    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg)
    }

    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg)
    }

    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg)
    }

    100% {
        -webkit-transform: skew(0);
        transform: skew(0)
    }
}

/* 底部不懂，上下悬浮 */
.hvr-wobble-top {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%
}
.hvr-wobble-top:hover,.hvr-wobble-top:focus,.hvr-wobble-top:active {
    -webkit-animation-name: hvr-wobble-top;
    animation-name: hvr-wobble-top;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}
@-webkit-keyframes hvr-wobble-bottom {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg)
    }

    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg)
    }

    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg)
    }

    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg)
    }

    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg)
    }

    100% {
        -webkit-transform: skew(0);
        transform: skew(0)
    }
}
@keyframes hvr-wobble-bottom {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg)
    }

    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg)
    }

    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg)
    }

    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg)
    }

    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg)
    }

    100% {
        -webkit-transform: skew(0);
        transform: skew(0)
    }
}

/* 上部不动，下部左右悬浮 */
.hvr-wobble-bottom {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0
}
.hvr-wobble-bottom:hover,.hvr-wobble-bottom:focus,.hvr-wobble-bottom:active {
    -webkit-animation-name: hvr-wobble-bottom;
    animation-name: hvr-wobble-bottom;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}
@-webkit-keyframes hvr-wobble-skew {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg)
    }

    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg)
    }

    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg)
    }

    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg)
    }

    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg)
    }

    100% {
        -webkit-transform: skew(0);
        transform: skew(0)
    }
}
@keyframes hvr-wobble-skew {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg)
    }

    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg)
    }

    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg)
    }

    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg)
    }

    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg)
    }

    100% {
        -webkit-transform: skew(0);
        transform: skew(0)
    }
}

/* 左右悬浮 */
.hvr-wobble-skew {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0)
}
.hvr-wobble-skew:hover,.hvr-wobble-skew:focus,.hvr-wobble-skew:active {
    -webkit-animation-name: hvr-wobble-skew;
    animation-name: hvr-wobble-skew;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}
@-webkit-keyframes hvr-buzz {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }
}
@keyframes hvr-buzz {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }
}

/* 不倒翁晃动 */
.hvr-buzz {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0)
}
.hvr-buzz:hover,.hvr-buzz:focus,.hvr-buzz:active {
    -webkit-animation-name: hvr-buzz;
    animation-name: hvr-buzz;
    -webkit-animation-duration: .15s;
    animation-duration: .15s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}
@-webkit-keyframes hvr-buzz-out {
    10% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    20% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }

    30% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    40% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }

    50% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg)
    }

    60% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg)
    }

    70% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg)
    }

    80% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg)
    }

    90% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0)
    }

    100% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0)
    }
}
@keyframes hvr-buzz-out {
    10% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    20% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }

    30% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    40% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }

    50% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg)
    }

    60% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg)
    }

    70% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg)
    }

    80% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg)
    }

    90% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0)
    }

    100% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0)
    }
}

/* 不倒翁左右晃动后停 */
.hvr-buzz-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0)
}
.hvr-buzz-out:hover,.hvr-buzz-out:focus,.hvr-buzz-out:active {
    -webkit-animation-name: hvr-buzz-out;
    animation-name: hvr-buzz-out;
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

/* 向左悬浮 */
.hvr-forward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-forward:hover,.hvr-forward:focus,.hvr-forward:active {
    -webkit-transform: translateX(8px);
    transform: translateX(8px)
}

/* 向右悬浮 */
.hvr-backward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-backward:hover,.hvr-backward:focus,.hvr-backward:active {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px)
}

/* 悬浮出阴影 */
.hvr-shadow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow
}

.hvr-shadow:hover,.hvr-shadow:focus,.hvr-shadow:active {
    box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5)
}

/* 放大加阴影 */
.hvr-grow-shadow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: box-shadow,transform;
    transition-property: box-shadow,transform
}
.hvr-grow-shadow:hover,.hvr-grow-shadow:focus,.hvr-grow-shadow:active {
    box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

/* 悬浮起来 底部阴影 */
.hvr-float-shadow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    position: relative;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}
.hvr-float-shadow:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: -webkit-radial-gradient(center,ellipse,rgba(0,0,0,0.35) 0,rgba(0,0,0,0) 80%);
    background: radial-gradient(ellipse at center,rgba(0,0,0,0.35) 0,rgba(0,0,0,0) 80%);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform,opacity;
    transition-property: transform,opacity
}
.hvr-float-shadow:hover,.hvr-float-shadow:focus,.hvr-float-shadow:active {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px)
}

.hvr-float-shadow:hover:before,.hvr-float-shadow:focus:before,.hvr-float-shadow:active:before {
    opacity: 1;
    -webkit-transform: translateY(5px);
    transform: translateY(5px)
}

/* 上下都有阴影 */
.hvr-shadow-radial {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    position: relative
}
.hvr-shadow-radial:before,.hvr-shadow-radial:after {
    pointer-events: none;
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-repeat: no-repeat;
    height: 5px;
    opacity: 0;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: opacity;
    transition-property: opacity
}

.hvr-shadow-radial:before {
    bottom: 100%;
    background: -webkit-radial-gradient(50% 150%,ellipse,rgba(0,0,0,0.6) 0,rgba(0,0,0,0) 80%);
    background: radial-gradient(ellipse at 50% 150%,rgba(0,0,0,0.6) 0,rgba(0,0,0,0) 80%)
}

.hvr-shadow-radial:after {
    top: 100%;
    background: -webkit-radial-gradient(50% -50%,ellipse,rgba(0,0,0,0.6) 0,rgba(0,0,0,0) 80%);
    background: radial-gradient(ellipse at 50% -50%,rgba(0,0,0,0.6) 0,rgba(0,0,0,0) 80%)
}

.hvr-shadow-radial:hover:before,.hvr-shadow-radial:focus:before,.hvr-shadow-radial:active:before,.hvr-shadow-radial:hover:after,.hvr-shadow-radial:focus:after,.hvr-shadow-radial:active:after {
    opacity: 1
}

/* Underline From Left */
.hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right: 0;
}
/* Underline From Center */
.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
  left: 0;
  right: 0;
}
/* Underline From Right */
.hvr-underline-from-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 100%;
  right: 0;
  bottom: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transition-property: left;
  transition-property: left;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-right:hover:before, .hvr-underline-from-right:focus:before, .hvr-underline-from-right:active:before {
  left: 0;
}

/* Underline Reveal */
.hvr-underline-reveal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-reveal:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-reveal:hover:before, .hvr-underline-reveal:focus:before, .hvr-underline-reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
/* Overline Reveal */
.hvr-overline-reveal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-overline-reveal:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-overline-reveal:hover:before, .hvr-overline-reveal:focus:before, .hvr-overline-reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* Overline From Left */
.hvr-overline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-overline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  top: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-overline-from-left:hover:before, .hvr-overline-from-left:focus:before, .hvr-overline-from-left:active:before {
  right: 0;
}
/* Overline From Center */
.hvr-overline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-overline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  top: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-overline-from-center:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before {
  left: 0;
  right: 0;
}
/* Overline From Right */
.hvr-overline-from-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-overline-from-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 100%;
  right: 0;
  top: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transition-property: left;
  transition-property: left;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-overline-from-right:hover:before, .hvr-overline-from-right:focus:before, .hvr-overline-from-right:active:before {
  left: 0;
}