/* 音乐开关*/
#switch-music{z-index:9999999;position:absolute;top:10px; left:10px; width:30px; height:30px;opacity: 0;}
#switch-music img{max-width: 100%;}
#switch-music.show{display:block; z-index:999;}
#switch-music .tips{color: rgba(255,255,255,.75); z-index:999; top: 15px;: 100px; width: 30px; text-align:; opacity: 0;}
#switch-music .tips.on{opacity: 1;: 100px; z-index:999;}
#switch-music div:nth-child(2){display:none; z-index:999;}
#switch-music.on div:nth-child(2){display:block; animation: music 1s linear infinite; -webkit-animation: music 1s linear infinite; z-index:999;}
@keyframes music{
    0%{transform: rotate(0)}
    100%{transform: rotate(360deg)}
}
@-webkit-keyframes music{
    0%{transform: rotate(0); -webkit-transform: rotate(0)}
    100%{transform: rotate(360deg); -webkit-transform: rotate(360deg)}
}

@keyframes wring
{0%,50%,100%{-webkit-transform:scale(1) skew(0deg) translate(0)}25%{-webkit-transform:scale(1.01) skew(5deg) translateY(0.5%)}75%{-webkit-transform:scale(1.01) skew(-5deg) translateY(-.5%)}}
@-moz-keyframes wring
{0%,50%,100%{-webkit-transform:scale(1) skew(0deg) translate(0)}25%{-webkit-transform:scale(1.01) skew(5deg) translateY(0.5%)}75%{-webkit-transform:scale(1.01) skew(-5deg) translateY(-.5%)}}
@-webkit-keyframes wring
{0%,50%,100%{-webkit-transform:scale(1) skew(0deg) translate(0)}25%{-webkit-transform:scale(1.01) skew(5deg) translateY(0.5%)}75%{-webkit-transform:scale(1.01) skew(-5deg) translateY(-.5%)}}

@keyframes shake1 {  
    0%{-webkit-transform: translateY(0);}  
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateY(-10px);}  
    20%, 40%, 60%, 80% {-webkit-transform: translateY(10px);} 
    100% {-webkit-transform: translateY(0);} 
}  
@-moz-keyframes shake1 {  
    0% {-moz-transform: translateX(0);}  
    10%, 30%, 50%, 70%, 90% {-moz-transform: translateY(-10px);}  
    20%, 40%, 60%, 80% {-moz-transform: translateY(10px);}  
    100% {-moz-transform: translateX(0);}
}  
@-webkit-keyframes shake1 {  
    0% {-webkit-transform: translateX(0);}  
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateY(-10px);}  
    20%, 40%, 60%, 80% {-webkit-transform: translateY(10px);}  
    100% {-webkit-transform: translateX(0);}
}

@keyframes fadeInUp1
{
    0%{opacity:0;-webkit-transform:translate3d(0,40%,0);transform:translate3d(0,40%,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@-moz-keyframes fadeInUp1 /* Firefox */
{
    0%{opacity:0;-webkit-transform:translate3d(0,40%,0);transform:translate3d(0,40%,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@-webkit-keyframes fadeInUp1 /* Safari 和 Chrome */
{
    0%{opacity:0;-webkit-transform:translate3d(0,40%,0);transform:translate3d(0,40%,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
} 
@keyframes fadeInDown1
{
    0%{opacity:0;-webkit-transform:translate3d(0,-40%,0);transform:translate3d(0,-40%,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@-moz-keyframes fadeInDown1 /* Firefox */
{
    0%{opacity:0;-webkit-transform:translate3d(0,-40%,0);transform:translate3d(0,-40%,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@-webkit-keyframes fadeInDown1 /* Safari 和 Chrome */
{
    0%{opacity:0;-webkit-transform:translate3d(0,-40%,0);transform:translate3d(0,-40%,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
} 

@-webkit-keyframes fadeIn2
{
  0% {opacity: 0;left: 0}
  50% { opacity: 1;left: 0}
  60%,80% { opacity: 1;left: 10px}
  70%,90% { opacity: 1;left: -10px}
  100% { opacity: 1;left: 0}
}
@-moz-keyframes fadeIn2
{
  0% {opacity: 0;left: 0}
  50% { opacity: 1;left: 0}
  60%,80% { opacity: 1;left: 10px}
  70%,90% { opacity: 1;left: -10px}
  100% { opacity: 1;left: 0}
}
@keyframes fadeIn2
{
  0% {opacity: 0;left: 0}
  50% { opacity: 1;left: 0}
  60%,80% { opacity: 1;left: 10px}
  70%,90% { opacity: 1;left: -10px}
  100% { opacity: 1;left: 0}
}


@keyframes fadeInBig
{
    0%{opacity:0;top:0;left: 50%;width: 0%;height: 0%}
    100%{opacity:1;top:0;left: 0;width: 100%;height: 100%}
}
@-moz-keyframes fadeInBig /* Firefox */
{
    0%{opacity:0;top:0;left: 50%;width: 0%;height: 0%}
    100%{opacity:1;top:0;left: 0;width: 100%;height: 100%}
}
@-webkit-keyframes fadeInBig /* Safari 和 Chrome */
{
    0%{opacity:0;top:0;left: 50%;width: 0%;height: 0%}
    100%{opacity:1;top:0;left: 0;width: 100%;height: 100%}
} 

@keyframes bounceIn1
{
    0%,20%,40%,60%,80%,100%{
      -webkit-transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);
      transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)
    }
    0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
    20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
    40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
    60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
    80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
    100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@-moz-keyframes bounceIn1 /* Firefox */
{
    0%,20%,40%,60%,80%,100%{
      -webkit-transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);
      transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)
    }
    0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
    20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
    40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
    60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
    80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
    100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@-webkit-keyframes bounceIn1 /* Safari 和 Chrome */
{
    0%,20%,40%,60%,80%,100%{
      -webkit-transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);
      transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)
    }
    0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
    20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
    40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
    60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
    80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
    100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
} 

@keyframes fadeInRight1
{
    0%{opacity:0;-webkit-transform:translate3d(40%,0,0);transform:translate3d(40%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@-moz-keyframes fadeInRight1 /* Firefox */
{
    0%{opacity:0;-webkit-transform:translate3d(40%,0,0);transform:translate3d(40%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@-webkit-keyframes fadeInRight1 /* Safari 和 Chrome */
{
    0%{opacity:0;-webkit-transform:translate3d(40%,0,0);transform:translate3d(40%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
} 
@keyframes fadeInLeft1
{
    0%{opacity:0;-webkit-transform:translate3d(-40%,0,0);transform:translate3d(-40%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@-moz-keyframes fadeInLeft1 /* Firefox */
{
    0%{opacity:0;-webkit-transform:translate3d(-40%,0,0);transform:translate3d(-40%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@-webkit-keyframes fadeInLeft1 /* Safari 和 Chrome */
{
    0%{opacity:0;-webkit-transform:translate3d(-40%,0,0);transform:translate3d(-40%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
} 
keyframes roll1
{
    0%{opacity:0;-webkit-transform:translate3d(-40%,40%,0);transform:translate3d(-40%,40%,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@-moz-keyframes roll1 /* Firefox */
{
    0%{opacity:0;-webkit-transform:translate3d(-40%,40%,0);transform:translate3d(-40%,40%,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@-webkit-keyframes roll1 /* Safari 和 Chrome */
{
    0%{opacity:0;-webkit-transform:translate3d(-40%,40%,0);transform:translate3d(-40%,40%,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
} 

keyframes roll2
{
    0%{opacity:0;-webkit-transform:translate3d(40%,40%,0);transform:translate3d(40%,40%,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@-moz-keyframes roll2 /* Firefox */
{
    0%{opacity:0;-webkit-transform:translate3d(40%,40%,0);transform:translate3d(40%,40%,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@-webkit-keyframes roll2 /* Safari 和 Chrome */
{
    0%{opacity:0;-webkit-transform:translate3d(40%,40%,0);transform:translate3d(40%,40%,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
} 

@-webkit-keyframes bubble /* Safari 和 Chrome */
{
    0%{opacity:0;-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@-moz-keyframes bubble /* Firefox */
{
    0%{opacity:0;-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@-webkit-keyframes bubble /* Safari 和 Chrome */
{
    0%{opacity:0;-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}

@-webkit-keyframes fadeIn
{
  0% {opacity: 0;}
  100% { opacity: 1;}
}
@-moz-keyframes fadeIn
{
  0% {opacity: 0;}
  100% { opacity: 1;}
}
@keyframes fadeIn
{
  0% {opacity: 0;}
  100% { opacity: 1;}
}


@keyframes fadeIn1
{
    0%{opacity:0;width: 150%;left:-30%;height: 150%;top: -30%}
    100%{opacity:1;width: 100%;left: 0;height: 100%;top: 0;}
}

@-moz-keyframes fadeIn1 /* Firefox */
{
    0%{opacity:0;width: 150%;left:-30%;height: 150%;top: -30%}
    100%{opacity:1;width: 100%;left: 0;height: 100%;top: 0;}
}

@-webkit-keyframes fadeIn1 /* Safari 和 Chrome */
{
    0%{opacity:0;width: 150%;left:-30%;height: 150%;top: -30%}
    100%{opacity:1;width: 100%;left: 0;height: 100%;top: 0;}
}

.pof{position: fixed; z-index:9999}
@-webkit-keyframes bubble /* Safari 和 Chrome */
{
    0%{opacity:0;-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}

@-moz-keyframes bubble /* Firefox */
{
    0%{opacity:0;-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}

@-webkit-keyframes bubble /* Safari 和 Chrome */
{
    0%{opacity:0;-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}

@-webkit-keyframes bubble{
  0%{opacity:0;-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}
  100%{opacity:1;-webkit-transform:none;transform:none}
  }
  @keyframes bubble{
    0%{opacity:0;-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
  }
    @-webkit-keyframes s3bottle{0%{-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-transform:none;transform:none}100%{-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-transform:rotate3d(0,0,1,33deg);transform:rotate3d(0,0,1,33deg)}}@keyframes s3bottle{0%{-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-transform:none;transform:none}100%{-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-transform:rotate3d(0,0,1,33deg);transform:rotate3d(0,0,1,33deg)}}@-webkit-keyframes s5leftHand{0%{opacity:0;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:none;transform:none}100%{opacity:1;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate3d(0,0,1,44deg);transform:rotate3d(0,0,1,44deg)}}@keyframes s5leftHand{0%{opacity:0;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:none;transform:none}100%{opacity:1;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate3d(0,0,1,44deg);transform:rotate3d(0,0,1,44deg)}}@-webkit-keyframes s5rightHand{0%{opacity:0;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:none;transform:none}100%{opacity:1;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate3d(0,0,1,-44deg);transform:rotate3d(0,0,1,-44deg)}}@keyframes s5rightHand{0%{opacity:0;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:none;transform:none}100%{opacity:1;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate3d(0,0,1,-44deg);transform:rotate3d(0,0,1,-44deg)}}@-webkit-keyframes people{0%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}50%{-webkit-transition-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);transition-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(15px,0,0);transform:translate3d(15px,0,0)}}@keyframes people{0%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}50%{-webkit-transition-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);transition-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(15px,0,0);transform:translate3d(15px,0,0)}}@-webkit-keyframes coin{0%{opacity:0;-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes coin{0%{opacity:0;-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@-webkit-keyframes s9w3{0%{width:0}100%{width:245px}}@keyframes s9w3{0%{width:0}100%{width:245px}}@-webkit-keyframes s12water{0%{height:96px}100%{height:89px}}@keyframes s12water{0%{height:96px}100%{height:89px}}@-webkit-keyframes arrow{0%,100%{opacity:0}50%{opacity:1}}@keyframes arrow{0%,100%{opacity:0}50%{opacity:1}}
  .ani .wmw path,
  .ani .wmw polygon{stroke-dasharray:1000;-webkit-animation:dash 1s .5s linear both}@-webkit-keyframes dash{0%{opacity:0;stroke-dashoffset:1000}100%{opacity:1;stroke-dashoffset:0}}
  .up{margin:auto;left:0;right:2px;bottom:2.8%;width:29px;height:14px}
  .wmw{left:0;top:0}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
  @keyframes bounceIn{
    0%,20%,40%,60%,80%,100%{
      -webkit-transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);
      transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)
      }0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
    @-webkit-keyframes revolve{            
      0%{opacity:1;-webkit-transform:rotate(0deg);}
      100%{opacity:1;-webkit-transform:rotate(36000deg);}
    }

/*平滑出现消失*/
@-webkit-keyframes fadeIn3
{
  0% {opacity: 0;}
  40% { opacity: 1;}
  60% { opacity: 1;}
  100% {opacity: 0;}
}
@-moz-keyframes fadeIn3
{
   0% {opacity: 0;}
  40% { opacity: 1;}
  60% { opacity: 1;}
  100% {opacity: 0;}
}
@keyframes fadeIn3
{
   0% {opacity: 0;}
  40% { opacity: 1;}
  60% { opacity: 1;}
  100% {opacity: 0;}
}

/*闪烁出现*/
@-webkit-keyframes fadeIn4
{
  0% {opacity: 0;}
  20% { opacity: 1;}
  40% { opacity: 0;}
  60% { opacity: 1;}
  80% {opacity: 0;}
  100% {opacity: 1;}
}
@-moz-keyframes fadeIn4
{
  0% {opacity: 0;}
  20% { opacity: 1;}
  40% { opacity: 0;}
  60% { opacity: 1;}
  80% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn4
{
  0% {opacity: 0;}
  20% { opacity: 1;}
  40% { opacity: 0;}
  60% { opacity: 1;}
  80% {opacity: 0;}
  100% {opacity: 1;}
}

@-webkit-keyframes fadeOut {0% {opacity:1}
100% {opacity:0}
}
@-moz-keyframes fadeOut {0% {opacity:1}
100% {opacity:0}
}
@keyframes fadeOut {0% {opacity:1}
100% {opacity:0}
}

@keyframes light1
{
    0%{opacity: 1;transform: rotate(0);transform-origin:0% 100%;}
    25%{opacity: 1;transform: rotate(20deg);transform-origin:0% 100%;}
    50%{opacity: 1;transform: rotate(0);transform-origin:0% 100%;}
    75%{opacity: 1;transform: rotate(-20deg);transform-origin:0% 100%;}
    100%{opacity: 1;transform: rotate(0);transform-origin:0% 100%;}
}

@-moz-keyframes light1 /* Firefox */
{
    0%{opacity: 1;-moz-transform: rotate(0);-moz-transform-origin:0% 100%;}
    25%{opacity: 1;-moz-transform: rotate(20deg);-moz-transform-origin:0% 100%;}
    50%{opacity: 1;-moz-transform: rotate(0);-moz-transform-origin:0% 100%;}
    75%{opacity: 1;-moz-transform: rotate(-20deg);-moz-transform-origin:0% 100%;}
    100%{opacity: 1;-moz-transform: rotate(0);-moz-transform-origin:0% 100%;}
}

@-webkit-keyframes light1 /* Safari 和 Chrome */
{
    0%{opacity: 1;-webkit-transform: rotate(0);-webkit-transform-origin:0% 100%;}
    25%{opacity: 1;-webkit-transform: rotate(20deg);-webkit-transform-origin:0% 100%;}
    50%{opacity: 1;-webkit-transform: rotate(0);-webkit-transform-origin:0% 100%;}
    75%{opacity: 1;-webkit-transform: rotate(-20deg);-webkit-transform-origin:0% 100%;}
    100%{opacity: 1;-webkit-transform: rotate(0);-webkit-transform-origin:0% 100%;}
}
  
@keyframes light2
{
    0%{opacity: 1;transform: rotate(0);transform-origin:100% 100%;}
    25%{opacity: 1;transform: rotate(-20deg);transform-origin:100% 100%;}
    50%{opacity: 1;transform: rotate(0);transform-origin:100% 100%;}
    75%{opacity: 1;transform: rotate(20deg);transform-origin:100% 100%;}
    100%{opacity: 1;transform: rotate(0);transform-origin:100% 100%;}
}

@-moz-keyframes light2 /* Firefox */
{
    0%{opacity: 1;-moz-transform: rotate(0);-moz-transform-origin:100% 100%;}
    25%{opacity: 1;-moz-transform: rotate(-20deg);-moz-transform-origin:100% 100%;}
    50%{opacity: 1;-moz-transform: rotate(0);-moz-transform-origin:100% 100%;}
    75%{opacity: 1;-moz-transform: rotate(20deg);-moz-transform-origin:100% 100%;}
    100%{opacity: 1;-moz-transform: rotate(0);-moz-transform-origin:100% 100%;}
}

@-webkit-keyframes light2 /* Safari 和 Chrome */
{
    0%{opacity: 1;-webkit-transform: rotate(0);-webkit-transform-origin:100% 100%;}
    25%{opacity: 1;-webkit-transform: rotate(-20deg);-webkit-transform-origin:100% 100%;}
    50%{opacity: 1;-webkit-transform: rotate(0);-webkit-transform-origin:100% 100%;}
    75%{opacity: 1;-webkit-transform: rotate(20deg);-webkit-transform-origin:100% 100%;}
    100%{opacity: 1;-webkit-transform: rotate(0);-webkit-transform-origin:100% 100%;}
} 

.flip {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
  backface-visibility: hidden;
  transform: translateX(0);
}

.flip.out {
  -webkit-transform: rotateY(-90deg) scale(.9);
  -webkit-animation-name: flipouttoleft;
  -webkit-animation-duration: 175ms;
  transform: rotateY(-90deg) scale(.9);
  animation-name: flipouttoleft;
  animation-duration: 175ms;
}
.flip.in {
  -webkit-animation-name: flipintoright;
  -webkit-animation-duration: 225ms;
  animation-name: flipintoright;
  animation-duration: 225ms;
}
.flip.out.reverse {
  -webkit-transform: rotateY(90deg) scale(.9);
  -webkit-animation-name: flipouttoright;
  transform: rotateY(90deg) scale(.9);
  animation-name: flipouttoright;
}
.flip.in.reverse {
  -webkit-animation-name: flipintoleft;
  animation-name: flipintoleft;
}
@-webkit-keyframes flipouttoleft {
    from { -webkit-transform: rotateY(0); }
    to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
@keyframes flipouttoleft {
    from { transform: rotateY(0); }
    to { transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipouttoright {
    from { -webkit-transform: rotateY(0) ; }
    to { -webkit-transform: rotateY(90deg) scale(.9); }
}
@keyframes flipouttoright {
    from { transform: rotateY(0); }
    to { transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
    from { -webkit-transform: rotateY(-90deg) scale(.9); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoleft {
    from { transform: rotateY(-90deg) scale(.9); }
    to { transform: rotateY(0); }
}
@-webkit-keyframes flipintoright {
    from { -webkit-transform: rotateY(90deg) scale(.9); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoright {
    from { transform: rotateY(90deg) scale(.9); }
    to { transform: rotateY(0); }
}