/*ljc-active 2018.1.25 增加动画*/
/*公用*/
@charset "utf-8"; 
.rZ_-360scale, .rZ_360R, .rZ_360L, .rZ_R360, .rZ_L360, .tf_R, .tf_L, .tf_B, .tf_T, .tf_Bscale, .tf_Tscale, .tf_Lscale, .tf_Rscale, .tf_scale1, .tf_scale2, .rZ_270, .op_0, .scale_TH, .scale_CW, .rLY_90, .rY_90, .rY_-90, .rX_90, .rX_-90, .rRY_-90, .rTX_90, .rTX_-90, .rBX_90, .rBX_-90, .tf_LT, .tf_RT, .tf_LB, .tf_RB { transition: 0.3s linear 0s; }
.rZ_-360scale, .tf_R, .tf_L, .tf_B, .tf_T, .tf_Bscale, .tf_Tscale, .tf_Lscale, .tf_Rscale, .tf_scale1, .tf_scale2, .rZ_270, .op_0, .rLY_90, .rY_90, .rY_-90, .rX_90, .rX_-90, .rRY_-90, .rTX_90, .rTX_-90, .rBX_90, .rBX_-90, .tf_LT, .tf_RT, .tf_LB, .tf_RB { opacity: 0; }
/*移位*/
.tf_R { transform: translate(200px, 0); }
.tf_L { transform: translate(-200px, 0); }
.tf_B { transform: translate(0, 200px); }
.tf_T { transform: translate(0, -200px); }
.tf_LT { transform: translate(-200px, -200px); }
.tf_RT { transform: translate(200px, -200px); }
.tf_LB { transform: translate(-200px, 200px); }
.tf_RB { transform: translate(200px, 200px); }
/*移位并缩放*/
.tf_Bscale { transform: translate(0, 200px) scale(0); transform-origin: bottom; }
.tf_Tscale { transform: translate(0, -200px) scale(0); transform-origin: top; }
.tf_Lscale { transform: translate(-200px, 0) scale(0); transform-origin: left; }
.tf_Rscale { transform: translate(200px, 0) scale(0); transform-origin: right; }
/*缩放*/
.tf_scale1 { transform: scale(0); }
.tf_scale2 { transform: scale(1.5); }
.scale_TH { transform: scale(1, 0); transform-origin: top; }
.scale_CW { transform: scale(0, 1); }
/*旋转*/
.rZ_270 { transform: rotateZ(270deg); }
/*旋转缩放*/
.rZ_-360scale { transform: rotateZ(-360deg) scale(2); }
/*旋转并移位*/
.rZ_L360, .rZ_R360 { border-radius: 50%; }
.rZ_L360 { transform: translate(-200px, 0) rotateZ(-360deg); }
.rZ_R360 { transform: translate(200px, 0) rotateZ(360deg); }
.rZ_360L { transform: rotateZ(-360deg) translate(-200px, 0); }
.rZ_360R { transform: rotateZ(-360deg) translate(200px, 0); }
/*翻转*/
.rY_90, .rLY_90 { transform: rotateY(90deg); }
.rY_-90, .rRY_-90 { transform: rotateY(-90deg); }
.rX_90, .rTX_90, .rBX_90 { transform: rotateX(90deg); }
.rX_-90, .rTX_-90, .rBX_-90 { transform: rotateX(-90deg); }
.rLY_90 { transform-origin: left; }
.rRY_-90 { transform-origin: right; }
.rTX_90, .rTX_-90 { transform-origin: top; }
.rBX_90, .rBX_-90 { transform-origin: bottom; }
/*动画*/
[class*="active"] .bounce, .anim-active.bounce { animation: bounce 1.5s ease-in-out 0s; }
[class*="active"] .shake, .anim-active.shake { animation: shake 1s ease-in-out 0s; }
@keyframes bounce { 0% {opacity:0;transform:translate(0, -200px);}15% {opacity:1;transform:translate(0) scale(1, 0.75);}30% {transform:translate(0, -160px) scale(1);}45% {transform:translate(0) scale(1, 0.85);}60% {transform:translate(0, -100px) scale(1);}75% {transform:translate(0) scale(1, 0.95);}90% {transform:translate(0, -40px) scale(1);}100% {transform:translate(0);}}
@keyframes shake { 0% {opacity:0;transform:translate(-100px, 0);}20% {opacity:1;transform:translate(70px, 0);}40% {transform:translate(-50px, 0);}60% {transform:translate(30px, 0);}80% {transform:translate(-10px, 0);}100% {transform:translate(0);}}
/*active*/
[class*="active"] .op_0, .anim-active.op_0, [class*="active"] .tf_R, [class*="active"] .tf_L, [class*="active"] .tf_B, [class*="active"] .tf_T, .anim-active.tf_R, .anim-active.tf_L, .anim-active.tf_B, .anim-active.tf_T, .anim-active.tf_LT, [class*="active"] .tf_LT, .anim-active.tf_RT, [class*="active"] .tf_RT, .anim-active.tf_LB, [class*="active"] .tf_LB, .anim-active.tf_RB, [class*="active"] .tf_RB, [class*="active"] .tf_Bscale, [class*="active"] .tf_Tscale, .anim-active.tf_Bscale, .anim-active.tf_Tscale, [class*="active"] .tf_Lscale, [class*="active"] .tf_Rscale, .anim-active.tf_Lscale, .anim-active.tf_Rscale { transform: translate(0, 0) scale(1); opacity: 1; transition: 0.5s cubic-bezier(.175,.885,.32,1.275) 0.5s; }
[class*="active"] .tf_scale2, .anim-active.tf_scale2, [class*="active"] .tf_scale1, .anim-active.tf_scale1, [class*="active"] .scale_TH, [class*="active"] .scale_CW, .anim-active.scale_TH, .anim-active.scale_CW { transform: scale(1); opacity: 1; transition: 0.5s cubic-bezier(.175,.885,.32,1.275) 0.5s; }
[class*="active"] .rZ_270, .anim-active.rZ_270, [class*="active"] .rLY_90, .anim-active.rLY_90, [class*="active"] .rY_90, .anim-active.rY_90, [class*="active"] .rY_-90, .anim-active.rY_-90, [class*="active"] .rX_90, .anim-active.rX_90, [class*="active"] .rX_-90, .anim-active.rX_-90, [class*="active"] .rRY_-90, .anim-active.rRY_-90, [class*="active"] .rTX_90, .anim-active.rTX_90, [class*="active"] .rTX_-90, .anim-active.rTX_-90, [class*="active"] .rBX_-90, .anim-active.rBX_-90, [class*="active"] .rBX_90, .anim-active.rBX_90 { transform: rotate(0deg); opacity: 1; transition: 0.5s cubic-bezier(.175,.885,.32,1.275) 0.5s; }
[class*="active"] .rZ_L360, .anim-active.rZ_L360, [class*="active"] .rZ_R360, .anim-active.rZ_R360 { transform: translate(0) rotateZ(0deg); transition: 0.5s cubic-bezier(.175,.885,.32,1.275) 0.5s }
[class*="active"] .rZ_360L, .anim-active.rZ_360L, [class*="active"] .rZ_360R, .anim-active.rZ_360R { transform: rotateZ(0deg) translate(0); transition: 0.5s cubic-bezier(.175,.885,.32,1.275) 0.5s }
[class*="active"] .rZ_-360scale, .anim-active.rZ_-360scale { transform: rotate(0deg) scale(1); opacity: 1; transition: 0.5s cubic-bezier(.175,.885,.32,1.275) 0s; }
[class*="active"] .delay1 { transition-delay: 1s; }
[class*="active"] .delay1_2 { transition-delay: 1.2s; }
[class*="active"] .delay1_4 { transition-delay: 1.4s; }
[class*="active"] .delay1_5 { transition-delay: 1.5s; }
[class*="active"] .delay1_6 { transition-delay: 1.6s; }
[class*="active"] .delay1_8 { transition-delay: 1.8s; }
[class*="active"] .delay2 { transition-delay: 2s; }
[class*="active"] .delay2_1 { transition-delay: 2.1s; }
[class*="active"] .delay2_2 { transition-delay: 2.2s; }
[class*="active"] .delay2_4 { transition-delay: 2.4s; }
[class*="active"] .delay2_5 { transition-delay: 2.5s; }
[class*="active"] .delay2_6 { transition-delay: 2.6s; }
[class*="active"] .delay2_7 { transition-delay: 2.7s; }
[class*="active"] .delay2_8 { transition-delay: 2.8s; }
[class*="active"] .delay2_9 { transition-delay: 2.9s; }
[class*="active"] .delay3 { transition-delay: 3s; }
[class*="active"] .delay3_2 { transition-delay: 3.2s; }
[class*="active"] .delay3_4 { transition-delay: 3.4s; }
[class*="active"] .delay3_6 { transition-delay: 3.6s; }
[class*="active"] .delay3_8 { transition-delay: 3.8s; }
[class*="active"] .delay4 { transition-delay: 4s; }
[class*="active"] .delay4_2 { transition-delay: 4.2s; }
[class*="active"] .delay4_4 { transition-delay: 4.4s; }
[class*="active"] .delay4_6 { transition-delay: 4.6s; }
[class*="active"] .delay4_8 { transition-delay: 4.8s; }
[class*="active"] .delay5 { transition-delay: 5s; }
[class*="active"] .delay5_2 { transition-delay: 5.2s; }
[class*="active"] .delay5_4 { transition-delay: 5.4s; }
[class*="active"] .delay5_6 { transition-delay: 5.6s; }
[class*="active"] .delay5_8 { transition-delay: 5.8s; }
[class*="active"] .delay6 { transition-delay: 6s; }
[class*="active"] .dur1 { transition-duration: 1s; }
[class*="active"] .dur1_5 { transition-duration: 1.5s; }
[class*="active"] .dur1_8 { transition-duration: 1.8s; }
[class*="active"] .dur2_5 { transition-duration: 2.5s; }
[class*="active"] .ease { transition-timing-function: ease; }
[class*="active"] .linear { transition-timing-function: linear; }