@charset "utf-8";
/*动画*/
.animated {
  -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; 
  -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;
}

.animated.infinite {-webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite;}
.animated.linear{
  -webkit-animation-timing-function:linear;
  -moz-animation-timing-function:linear;
  -ms-animation-timing-function:linear;
  -o-animation-timing-function:linear;
  animation-timing-function:linear;
}
.animated.easeout{
  -webkit-animation-timing-function:ease-out;
  -moz-animation-timing-function:ease-out;
  -ms-animation-timing-function:ease-out;
  -o-animation-timing-function:ease-out;
  animation-timing-function:ease-out;
}
.animated.propertyAll{
    transition-property:all;
    -moz-transition-property:all; /* Firefox 4 */
    -webkit-transition-property:all; /* Safari 和 Chrome */
    -o-transition-property:all; /* Opera */
}
.animated.property-width{
  transition-property:width;
  -moz-transition-property:width; /* Firefox 4 */
  -webkit-transition-property:width; /* Safari 和 Chrome */
  -o-transition-property:width; /* Opera */
}
.animated.property-height{
  transition-property:height;
  -moz-transition-property:height; /* Firefox 4 */
  -webkit-transition-property:height; /* Safari 和 Chrome */
  -o-transition-property:height; /* Opera */
}
/*.animated.hinge {
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -ms-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
}*/
.animated.fast{-webkit-animation-duration: 300ms; -moz-animation-duration: 300ms; -ms-animation-duration: 300ms; -o-animation-duration: 300ms; animation-duration: 300ms;}
.animated.slow{-webkit-animation-duration: 2000ms; -moz-animation-duration: 2000ms; -ms-animation-duration: 2000ms; -o-animation-duration: 2000ms; animation-duration: 2000ms;}
/*翻转,反弹*/
/*.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
    -webkit-animation-duration: .75s;
    -moz-animation-duration: .75s;
    -ms-animation-duration: .75s;
    -o-animation-duration: .75s;
    animation-duration: .75s;
}*/
/* key frames */
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}to{-webkit-transform: rotate(360deg)}}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}to{-moz-transform: rotate(360deg)}}
@-ms-keyframes rotate{from{-ms-transform: rotate(0deg)}to{-ms-transform: rotate(360deg)}}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}to{-o-transform: rotate(360deg)}}
@keyframes rotate{from{transform: rotate(0deg)}to{transform: rotate(360deg)}}
/* fadeIn */
@-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@-moz-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@-ms-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@-o-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
.fadeIn {-webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -ms-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn;}
/* fadeOut */
@-webkit-keyframes fadeOut {from {opacity: 1;} to {opacity: 0;}}
@-moz-keyframes fadeOut {from {opacity: 1;} to {opacity: 0;}}
@-ms-keyframes fadeOut {from {opacity: 1;} to {opacity: 0;}}
@-o-keyframes fadeOut {from {opacity: 1;} to {opacity: 0;}}
@keyframes fadeOut {from {opacity: 1; } to {opacity: 0; }}
.fadeOut {-webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -ms-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut;}
/* fadeInDown */
@-webkit-keyframes fadeInDown{
  from {opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}
  to {opacity: 1; -webkit-transform: none;transform: none;}
}
@keyframes fadeInDown{
  from {opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}
  to {opacity: 1; -webkit-transform: none; transform: none;}
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
/* slideInLeft */
@-webkit-keyframes slideInLeft {from {-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
@-moz-keyframes slideInLeft {from {-moz-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to {-moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
@-ms-keyframes slideInLeft {from {-ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to {-ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
@-o-keyframes slideInLeft {from {-o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to {-o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
@keyframes slideInLeft {from {transform: translate3d(-100%, 0, 0); visibility: visible; } to {transform: translate3d(0, 0, 0);}}
.slideInLeft {-webkit-animation-name: slideInLeft; -moz-animation-name: slideInLeft; -ms-animation-name: slideInLeft; -o-animation-name: slideInLeft; animation-name: slideInLeft;}
/*
* slideInRight
*/
@-webkit-keyframes slideInRight {from {-webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
@-moz-keyframes slideInRight {from {-moz-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to {-moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
@-ms-keyframes slideInRight {from {-ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to {-ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
@-o-keyframes slideInRight {from {-o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to {-o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
@keyframes slideInRight {from {transform: translate3d(100%, 0, 0); visibility: visible; } to {transform: translate3d(0, 0, 0);}}
.slideInRight {-webkit-animation-name: slideInRight; -moz-animation-name: slideInRight; -ms-animation-name: slideInRight; -o-animation-name: slideInRight; animation-name: slideInRight;}
/*
* slideOutLeft
*/
@-webkit-keyframes slideOutLeft {from {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to {visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}}
@-moz-keyframes slideOutLeft {from {-moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to {visibility: hidden; -moz-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}}
@-ms-keyframes slideOutLeft {from {-ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to {visibility: hidden; -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}}
@-o-keyframes slideOutLeft {from {-o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to {visibility: hidden; -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}}
@keyframes slideOutLeft {from {transform: translate3d(0, 0, 0); } to {visibility: hidden; transform: translate3d(-100%, 0, 0);}}
.slideOutLeft {-webkit-animation-name: slideOutLeft; -moz-animation-name: slideOutLeft; -ms-animation-name: slideOutLeft; -o-animation-name: slideOutLeft; animation-name: slideOutLeft;}
/*
* slideOutRight
*/
@-webkit-keyframes slideOutRight {from {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to {visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}}
@-moz-keyframes slideOutRight {from {-moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to {visibility: hidden; -moz-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}}
@-ms-keyframes slideOutRight {from {-ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to {visibility: hidden; -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}}
@-o-keyframes slideOutRight {from {-o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to {visibility: hidden; -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } }
@keyframes slideOutRight {from {transform: translate3d(0, 0, 0); } to {visibility: hidden; transform: translate3d(100%, 0, 0);}}
.slideOutRight {-webkit-animation-name: slideOutRight; -moz-animation-name: slideOutRight; -ms-animation-name: slideOutRight; -o-animation-name: slideOutRight; animation-name: slideOutRight;}

@-webkit-keyframes slideInDown {
  from {-webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible;}
  to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
@-moz-keyframes slideInDown {
  from {-moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible;}
  to {-moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 
}
@-ms-keyframes slideInDown {
  from {-ms-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible;}
  to {-ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 
}
@-o-keyframes slideInDown {
  from {-o-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible;}
  to {-o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes slideInDown{
  from {-webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);visibility:visible;height: 0;}
  to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);height: inherit;}
}
.slideInDown{
  -webkit-animation-name: slideInDown;
  -moz-animation-name: slideInDown;
  -ms-animation-name: slideInDown;
  -o-animation-name: slideInDown;
  animation-name: slideInDown;
}
/*
* slideInUp
*/
@-webkit-keyframes slideInUp {
  from {-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible;}
  to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
@-moz-keyframes slideInUp {
  from {-moz-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible;}
  to {-moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} 
}
@-ms-keyframes slideInUp {
  from {-ms-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible;}
  to {-ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} 
}
@-o-keyframes slideInUp {
  from {-o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible;}
  to {-o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
@keyframes slideInUp{
  from {-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);visibility:visible;}
  to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
.slideInUp{
  -webkit-animation-name: slideInUp;
  -moz-animation-name: slideInUp;
  -ms-animation-name: slideInUp;
  -o-animation-name: slideInUp;
  animation-name: slideInUp;
}