/*  */
/* .typed-cursor{
    color: #fff;
    opacity: 1;
    -webkit-animation: typedjsBlink 1.5s infinite;
    animation: typedjsBlink 1.5s infinite;
}
@keyframes typedjsBlink{
    50% { opacity: 0; }
}
@-webkit-keyframes typedjsBlink{
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}
.typed-fade-out{
    opacity: 0;
    transition: opacity .25s;
    -webkit-animation: 0;
    animation: 0;
}   */


/* 自定义动画 种类1*/
.ani-parent{overflow: hidden;position: relative;}
/* 
    parent决定perspective
*/
.card-parent{
	-webkit-perspective: 300px;
	-moz-perspective: 300px;
    -ms-perspective: 300px;
	-o-perspective: 300px;
	perspective: 300px;

	-webkit-perspective-origin: 50% 50%;
	-moz-perspective-origin: 50% 50%;
	-ms-perspective-origin: 50% 50%;
	-o-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
}
.card{
    position: relative;
    -webkit-animation-name: card;
    animation-name: card;
    /* overflow: hidden; */

    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;

    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes card {
    0% {
        opacity: 0;
        -webkit-transform: translate3d( 0, -100px, -100px ) rotateX( -180deg );
           -moz-transform: translate3d( 0, -100px, -100px ) rotateX( -180deg );
            -ms-transform: translate3d( 0, -100px, -100px ) rotateX( -180deg );
             -o-transform: translate3d( 0, -100px, -100px ) rotateX( -180deg );
                transform: translate3d( 0, -100px, -100px ) rotateX( -180deg );
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d( 0, 0px, 0px ) rotateX( 0deg );
           -moz-transform: translate3d( 0, 0px, 0px ) rotateX( 0deg );
            -ms-transform: translate3d( 0, 0px, 0px ) rotateX( 0deg );
             -o-transform: translate3d( 0, 0px, 0px ) rotateX( 0deg );
                transform: translate3d( 0, 0px, 0px ) rotateX( 0deg );
    }
}


/*  */
.fly-reverse-parent {

    overflow: hidden;

    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;

    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}
.fly-reverse {
    /* position: relative; */
    -webkit-animation-name: fly-reverse;
    animation-name: fly-reverse;
    /* overflow: hidden; */

    -webkit-transition: all 600ms ease, opacity 300ms ease;
    -moz-transition: all 600ms ease, opacity 300ms ease;
    -ms-transition: all 600ms ease, opacity 300ms ease;
    -o-transition: all 600ms ease, opacity 300ms ease;
    transition: all 600ms ease, opacity 300ms ease;

    -webkit-transform-origin: 50% 50% 50px;
    -moz-transform-origin: 50% 50% 50px;
    -ms-transform-origin: 50% 50% 50px;
    -o-transform-origin: 50% 50% 50px;
    transform-origin: 50% 50% 50px;

    /* -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%; */


    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}
@keyframes fly-reverse{
    0%{
        opacity: 0;
        -webkit-transform: rotateX( -180deg ) scale(1,1);
           -moz-transform: rotateX( -180deg ) scale(1,1);
            -ms-transform: rotateX( -180deg ) scale(1,1);
             -o-transform: rotateX( -180deg ) scale(1,1);
                transform: rotateX( -180deg ) scale(1,1);        
    }
    100%{
        opacity: 1;
        -webkit-transform: rotateX( 0deg ) scale(1,1);
           -moz-transform: rotateX( 0deg ) scale(1,1);
            -ms-transform: rotateX( 0deg ) scale(1,1);
             -o-transform: rotateX( 0deg ) scale(1,1);
                transform: rotateX( 0deg ) scale(1,1);  
    }    
}


/*  */
.helix-parent {
	-webkit-perspective: 600px;
	   -moz-perspective: 600px;
	    -ms-perspective: 600px;
	     -o-perspective: 600px;
	        perspective: 600px;

	-webkit-perspective-origin: 50% 50%;
	   -moz-perspective-origin: 50% 50%;
	    -ms-perspective-origin: 50% 50%;
	     -o-perspective-origin: 50% 50%;
	        perspective-origin: 50% 50%;
}
.helix{
    position: relative;
    -webkit-animation-name: helix;
    animation-name: helix;
    overflow: hidden;

    -webkit-transition: all 600ms ease,opacity 200ms ease;
       -moz-transition: all 600ms ease;
        -ms-transition: all 600ms ease,opacity 200ms ease;
         -o-transition: all 600ms ease,opacity 200ms ease;
            transition: all 600ms ease,opacity 200ms ease;

    -webkit-transform-origin: 50% 50%;
       -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
         -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
}
@keyframes helix{
    0%{
        opacity: 0;
        -webkit-transform: rotateY( -180deg );
           -moz-transform: rotateY( -180deg );
            -ms-transform: rotateY( -180deg );
             -o-transform: rotateY( -180deg );
                transform: rotateY( -180deg );           
    }
    100%{
        opacity: 1;
        -webkit-transform: rotateY( 0deg );
           -moz-transform: rotateY( 0deg );
            -ms-transform: rotateY( 0deg );
             -o-transform: rotateY( 0deg );
                transform: rotateY( 0deg );        
    }
}
/*  */
.fan-parent {
	-webkit-perspective: 600px;
	   -moz-perspective: 600px;
	    -ms-perspective: 600px;
	     -o-perspective: 600px;
	        perspective: 600px;

	-webkit-perspective-origin: 50% 50%;
	   -moz-perspective-origin: 50% 50%;
	    -ms-perspective-origin: 50% 50%;
	     -o-perspective-origin: 50% 50%;
	        perspective-origin: 50% 50%;
}
.fan{
    position: relative;
    -webkit-animation-name: fan;
    animation-name: fan;
    overflow: hidden;

	-webkit-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
	   -moz-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
	    -ms-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
	     -o-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
	        transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);

	-webkit-transform-origin: 0% 0%;
	   -moz-transform-origin: 0% 0%;
	    -ms-transform-origin: 0% 0%;
	     -o-transform-origin: 0% 0%;
	        transform-origin: 0% 0%;
}
@keyframes fan{
    0%{
        opacity: 0;
        -webkit-transform: rotate( -60deg );
           -moz-transform: rotate( -60deg );
            -ms-transform: rotate( -60deg );
             -o-transform: rotate( -60deg );
                transform: rotate( -60deg );                 
    }
    100%{
        opacity: 1;
        -webkit-transform: rotate( 0deg );
           -moz-transform: rotate( 0deg );
            -ms-transform: rotate( 0deg );
             -o-transform: rotate( 0deg );
                transform: rotate( 0deg );        
    }
}






/* 自定义动画 种类2 */
.underline-from-center-parent{
    position: relative;
}
.underline-from-center {
    -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;
    position: absolute;
    z-index: 0;
    left: 51%;
    right: 51%;
    bottom: -4px;
    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;
    /*  */
    -webkit-animation-name: underline-from-center;
    animation-name: underline-from-center;
}
@keyframes underline-from-center{
    0%{
        left: 51%;
        right: 51%;
    }
    100%{
        left: 0;
        right: 0;        
    }
}
/*  */
.underline-from-left-parent{
    position: relative;
}
.underline-from-left {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    overflow: hidden;
    position: absolute;
    z-index: 0;
    left: 0;
    right: 100%;
    bottom: -4px;
    background: #5ae7fc;
    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;
    /*  */
    -webkit-animation-name: underline-from-left;
    animation-name: underline-from-left;
}
@keyframes underline-from-left{
    100%{
        right: 0;        
    }
}
/*  */
.underline-from-right-parent{
    position: relative;
}
.underline-from-right {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    overflow: hidden;
    position: absolute;
    z-index: 0;
    left: 100%;
    right:0;
    bottom: -4px;
    background: #5ae7fc;
    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;
    /*  */
    -webkit-animation-name: underline-from-right;
    animation-name: underline-from-right;
}
@keyframes underline-from-right{
    100%{
        left: 0;        
    }
}


/*  */
@keyframes ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}
.ripple-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);
    position: relative;
    /*  */
    content: '';
    position: absolute;
    border: #e1e1e1 solid 4px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    /*  */
    -webkit-animation-name: ripple-out;
    animation-name: ripple-out;
}
.ripple-out:before {
    content: '';
    position: absolute;
    border: #e1e1e1 solid 6px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.ripple-out:hover:before, .ripple-out:focus:before, .ripple-out:active:before {
  -webkit-animation-name: ripple-out;
  animation-name: ripple-out;
}





/* 自定义动画 种类3 */




/* added by customized */
@keyframes custom-pulse {
 
    0% {
 

 
        -webkit-transform: scale(0.95,0.95);
 
        transform: scale(0.95,0.95);
 
        transition: all 2s;
 
    }
    50%{
        -webkit-transform: scale(1.05,1.05);
 
        transform: scale(1.05,1.05);
 
        transition: all 2s;
    }
 
 
    100% {
 

 
        -webkit-transform: scale(0.95,0.95);
 
        transform: scale(0.95,0.95);
 
        transition: all 2s;
 
 
        
 
    }
 
}
 
 
 
 
 
.custom-pulse {
 
    /* -webkit-animation-name: custom-pulse;
    animation-name: custom-pulse;

    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; */
    animation: custom-pulse 4s infinite ease-out;
}



@keyframes swing02 {
 
    0% {
  
        -webkit-transform: translateX(-20px);
 
        transform: translateX(-20px);
 
        transition: all 5s;
 
    }
    50%{
        -webkit-transform: translateX(20px);
 
        transform: translateX(20px);
 
        transition: all 5s;
    }
 
 
    100% {
 

 
        -webkit-transform: translateX(-20px);
 
        transform: translateX(-20px);
 
        transition: all 5s;
 
        
 
    }
 
}
 
 
 
 
 
.swing02 {
    
    animation: swing02 10s infinite ease-out;
    /* -webkit-animation-name: swing02;
    animation-name: swing02;

    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; */

}