@charset "UTF-8";
/**
 * @ClassName: animate.css
 * @Description: 首页动画样式表
 * @Author: wlj
 * @Date: 2017-10-27
 */

/*---动画----*/
/*----向下滑动效果----*/
@keyframes slideDown {
    0% {  top: -75px }
    100% { top: 0 }
}

@-o-keyframes slideDown {
    0% {  top: -75px }
    100% { top: 0 }
}

@-moz-keyframes slideDown {
    0% {  top: -75px }
    100% { top: 0 }
}

@-webkit-keyframes slideDown {
    0% { transform: scale(1); opacity: 1 }
    50% { transform: scale(0); opacity: .6 }
    100% { transform: scale(1); opacity: 1 }
}
/*----涟漪效果----*/
@-webkit-keyframes circle-wave {
    0% {  -webkit-transform: scale(1, 1);  transform: scale(1, 1);  opacity: 1;  filter: alpha(opacity=0)  }
    100% {  -webkit-transform: scale(1.5);  transform: scale(1.5);  opacity: 0;  filter: alpha(opacity=0)  }
}

@keyframes circle-wave {
    0% {  -webkit-transform: scale(1, 1);  transform: scale(1, 1);  opacity: 1;  filter: alpha(opacity=0)  }
    100% {  -webkit-transform: scale(1.5);  transform: scale(1.5);  opacity: 0;  filter: alpha(opacity=0)  }
}

/*---banner cover上浮效果--*/
@keyframes work-up {
    from { bottom: -670px}
    to { bottom: 45px }
}
@keyframes work-float {
    0%,100% { transform: translateY(0) }
    40% { transform: translateY(20px) }
}
/*---横向展开效果--*/
@keyframes scaleLeft {
    0% {  opacity: 0;  transform: translateX(-100%);  }
    10% {  opacity: 0.1;  transform: translateX(-100%);  }
    100% {  opacity: 1;  transform: translateX(0);  }
}
@keyframes scaleRight {
    0% {  opacity: 0;  transform: translateX(100%);  }
    10% {  opacity: 0.1;  transform: translateX(100%);  }
    100% {  opacity: 1;  transform: translateX(0);  }
}

@keyframes slideUp1 {
    0% {  transform: translateY(30px);  opacity: 0  }
    60% {  transform: translateY(30px);  opacity: 0  }
    100% {  transform: translateX(0);  opacity: 1  }
}

@keyframes slideUp2 {
    0% {  transform: translateY(30px); opacity: 0 }
    65% { transform: translateY(30px);  opacity: 0 }
    100% {  transform: translateX(0); opacity: 1 }
}
@keyframes slideUp3 {
    0% { transform: translateY(30px); opacity: 0 }
    70% { transform: translateY(30px); opacity: 0 }
    100% { transform: translateX(0); opacity: 1 }
}
@keyframes slideUp4 {
    0% { transform: translateY(30px); opacity: 0 }
    75% { transform: translateY(30px); opacity: 0 }
    100% { transform: translateX(0);opacity: 1 }
}

/*----旋转-----------*/
@keyframes rotate-elec {
    0% { transform: rotate(0deg) translate(278px) rotate(0deg);}
    100% { transform: rotate(360deg) translate(278px) rotate(-360deg);}
}
@keyframes rotate-stone {
    0% { transform: rotate(72deg) translate(278px) rotate(-72deg);}
    100% { transform: rotate(432deg) translate(278px) rotate(-432deg);}
}
@keyframes rotate-govern {
    0% { transform: rotate(144deg) translate(278px) rotate(-144deg); }
    100% { transform: rotate(504deg) translate(278px) rotate(-504deg); }
}
@keyframes rotate-police {
    0% { transform: rotate(216deg) translate(278px) rotate(-216deg);}
    100% { transform: rotate(576deg) translate(278px) rotate(-576deg);}
}
@keyframes rotate-rail {
    0% { transform: rotate(288deg) translate(278px) rotate(-288deg); }
    100% { transform: rotate(648deg) translate(278px) rotate(-648deg); }
}

@keyframes  rotate-xq {
    0% {  transform: rotate(0deg) translate(196px) rotate(0deg);  }
    100% {  transform: rotate(360deg) translate(196px) rotate(-360deg);  }
}
@keyframes rotate-xt {
    0% {  transform: rotate(90deg) translate(196px) rotate(0deg);  }
    100% {  transform: rotate(450deg) translate(196px) rotate(-360deg);  }
}
@keyframes rotate-zl {
    0% {  transform: rotate(180deg) translate(196px) rotate(0deg);  }
    100% {  transform: rotate(540deg) translate(196px) rotate(-360deg);  }
}
@keyframes rotate-jf {
    0% {  transform: rotate(270deg) translate(196px) rotate(0deg);  }
    100% {  transform: rotate(630deg) translate(196px) rotate(-360deg);  }
}
/*----闪动-----------*/
@keyframes spinTopIcon {
    0% {  opacity: 0;  transform: scale(1.5, 1.5);  }
    100% {  opacity: 1;  transform: scale(0, 0);  }
}
@keyframes spinBottomIcon {
    0% {  opacity: 1;  transform: scale(0, 0);  }
    100% {  opacity: 0;  transform: scale(1.5, 1.5);  }
}


/*-----擦除效果----*/

@keyframes wipeleft {
     0% {
         clip: rect(0,0,342px,0)
     }

     45% {
         clip: rect(0,0,342px,0)
     }

     100% {
         clip: rect(0,600px,342px,0)
     }
 }
@keyframes wiperight{
    0% {
        clip: rect(0,600px,342px,600px)
    }

    45% {
        clip: rect(0,600px,342px,600px)
    }

    100% {
        clip: rect(0,600px,342px,0)
    }
}



/*----散点效果----*/
@keyframes dx {
    0% {  transform:translate(70px,20px) scale(1); }
    50%{ transform:translate(10px,10px) scale(1);}
    100% { transform:translate(0px,0px) scale(0); }
}

@-o-keyframes dx {
    0% {  transform:translate(70px,20px) scale(1); }
    50%{ transform:translate(10px,10px) scale(1);}
    100% { transform:translate(0px,0px) scale(0.7);  }
}

@-moz-keyframes dx {
    0% {  transform:translate(70px,20px) scale(1); }
    50%{ transform:translate(10px,10px) scale(1);}
    100% { transform:translate(0px,0px) scale(0.7);}
}

@-webkit-keyframes dx {
    0% {  transform:translate(70px,20px) scale(1);}
    50%{ transform:translate(10px,10px) scale(1);}
    100% { transform:translate(0px,0px) scale(0.7);}
}

/*----散点效果2----*/
@keyframes dx2 {
    0% {  transform:translate(-80px,-10px) scale(1); }
    50%{ transform:translate(-10px,-5px) scale(1);}
    100% { transform:translate(0px,0px) scale(0); }
}

@-o-keyframes dx2 {
    0% {  transform:translate(-80px,-10px) scale(1); }
    50%{ transform:translate(-10px,-5px) scale(1);}
    100% { transform:translate(0px,0px) scale(0.7);  }
}

@-moz-keyframes dx2 {
    0% {  transform:translate(-80px,-10px) scale(1); }
    50%{ transform:translate(-10px,-5px) scale(1);}
    100% { transform:translate(0px,0px) scale(0.7);}
}

@-webkit-keyframes dx2 {
    0% {  transform:translate(-80px,-10px) scale(1);}
    50%{ transform:translate(-10px,-5px) scale(1);}
    100% { transform:translate(0px,0px) scale(0.7);}
}