/*动画*/

.yt, .yb, .xl, .xr, .anime-t { opacity: 0; }

.anime-r .yt, .anime-r.yt { -webkit-animation: yt 1s forwards; -o-animation: yt 1s forwards; animation: yt 1s forwards; }

.anime-r .yb, .anime-r.yb { -webkit-animation: yb 1s forwards; -o-animation: yb 1s forwards; animation: yb 1s forwards; }

.anime-r .xl, .anime-r.xl { -webkit-animation: xl 1s forwards; -o-animation: xl 1s forwards; animation: xl 1s forwards; }

.anime-r .xr, .anime-r.xr { -webkit-animation: xr 1s forwards; -o-animation: xr 1s forwards; animation: xr 1s forwards; }

.anime-r .yt:nth-child(1), .anime-r .yb:nth-child(1), .anime-r .xl:nth-child(1), .anime-r .xr:nth-child(1) { animation-delay: 0.2s; }

.anime-r .yt:nth-child(2), .anime-r .yb:nth-child(2), .anime-r .xl:nth-child(2), .anime-r .xr:nth-child(2) { animation-delay: 0.4s; }

.anime-r .yt:nth-child(3), .anime-r .yb:nth-child(3), .anime-r .xl:nth-child(3), .anime-r .xr:nth-child(3) { animation-delay: 0.6s; }

.anime-r .yt:nth-child(4), .anime-r .yb:nth-child(4), .anime-r .xl:nth-child(4), .anime-r .xr:nth-child(4) { animation-delay: 0.8s; }

.anime-r .yt:nth-child(5), .anime-r .yb:nth-child(5), .anime-r .xl:nth-child(5), .anime-r .xr:nth-child(5) { animation-delay: 1s; }

.anime-r .yt:nth-child(6), .anime-r .yb:nth-child(6), .anime-r .xl:nth-child(6), .anime-r .xr:nth-child(6) { animation-delay: 1.2s; }

.anime-r .yt:nth-child(7), .anime-r .yb:nth-child(7), .anime-r .xl:nth-child(7), .anime-r .xr:nth-child(7) { animation-delay: 1.4s; }

.anime-r .yt:nth-child(8), .anime-r .yb:nth-child(8), .anime-r .xl:nth-child(8), .anime-r .xr:nth-child(8) { animation-delay: 1.6s; }

.anime-r .yt:nth-child(9), .anime-r .yb:nth-child(9), .anime-r .xl:nth-child(9), .anime-r .xr:nth-child(9) { animation-delay: 1.8s; }

.anime-r .yt:nth-child(10), .anime-r .yb:nth-child(10), .anime-r .xl:nth-child(10), .anime-r .xr:nth-child(10) { animation-delay: 2s; }

.anime-r .yt:nth-child(11), .anime-r .yb:nth-child(11), .anime-r .xl:nth-child(11), .anime-r .xr:nth-child(11) { animation-delay: 2.2s; }

.anime-r .yt:nth-child(12), .anime-r .yb:nth-child(12), .anime-r .xl:nth-child(12), .anime-r .xr:nth-child(12) { animation-delay: 2.4s; }



@keyframes yt {

  0% {

    -webkit-transform: translate3d(0, -30px, 0);

    -ms-transform: translate3d(0, -30px, 0);

    -o-transform: translate3d(0, -30px, 0);

    transform: translate3d(0, -30px, 0);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    opacity: 1;

  }

}

@-moz-keyframes yt {

  0% {

    -webkit-transform: translate3d(0, -30px, 0);

    -ms-transform: translate3d(0, -30px, 0);

    -o-transform: translate3d(0, -30px, 0);

    transform: translate3d(0, -30px, 0);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    opacity: 1;

  }

}

@-webkit-keyframes yt {

  0% {

    -webkit-transform: translate3d(0, -30px, 0);

    -ms-transform: translate3d(0, -30px, 0);

    -o-transform: translate3d(0, -30px, 0);

    transform: translate3d(0, -30px, 0);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    opacity: 1;

  }

}

@-o-keyframes yt {

  0% {

    -webkit-transform: translate3d(0, -30px, 0);

    -ms-transform: translate3d(0, -30px, 0);

    -o-transform: translate3d(0, -30px, 0);

    transform: translate3d(0, -30px, 0);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    opacity: 1;

  }

}



@keyframes yb {

  0% {

    -webkit-transform: translate3d(0, 30px, 0);

    -ms-transform: translate3d(0, 30px, 0);

    -o-transform: translate3d(0, 30px, 0);

    transform: translate3d(0, 30px, 0);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    opacity: 1;

  }

}

@-moz-keyframes yb {

  0% {

    -webkit-transform: translate3d(0, 30px, 0);

    -ms-transform: translate3d(0, 30px, 0);

    -o-transform: translate3d(0, 30px, 0);

    transform: translate3d(0, 30px, 0);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    opacity: 1;

  }

}

@-webkit-keyframes yb {

  0% {

    -webkit-transform: translate3d(0, 30px, 0);

    -ms-transform: translate3d(0, 30px, 0);

    -o-transform: translate3d(0, 30px, 0);

    transform: translate3d(0, 30px, 0);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    opacity: 1;

  }

}

@-o-keyframes yb {

  0% {

    -webkit-transform: translate3d(0, 30px, 0);

    -ms-transform: translate3d(0, 30px, 0);

    -o-transform: translate3d(0, 30px, 0);

    transform: translate3d(0, 30px, 0);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    opacity: 1;

  }

}



@keyframes xl {

  0% {

    -webkit-transform: translate3d(-30px, 0, 0);

    -ms-transform: translate3d(-30px, 0, 0);

    -o-transform: translate3d(-30px, 0, 0);

    transform: translate3d(-30px, 0, 0);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    opacity: 1;

  }

}

@-moz-keyframes xl {

  0% {

    -webkit-transform: translate3d(-30px, 0, 0);

    -ms-transform: translate3d(-30px, 0, 0);

    -o-transform: translate3d(-30px, 0, 0);

    transform: translate3d(-30px, 0, 0);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    opacity: 1;

  }

}

@-webkit-keyframes xl {

  0% {

    -webkit-transform: translate3d(-30px, 0, 0);

    -ms-transform: translate3d(-30px, 0, 0);

    -o-transform: translate3d(-30px, 0, 0);

    transform: translate3d(-30px, 0, 0);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    opacity: 1;

  }

}

@-o-keyframes xl {

  0% {

    -webkit-transform: translate3d(-30px, 0, 0);

    -ms-transform: translate3d(-30px, 0, 0);

    -o-transform: translate3d(-30px, 0, 0);

    transform: translate3d(-30px, 0, 0);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    opacity: 1;

  }

}



@keyframes xr {

  0% {

    -webkit-transform: translate3d(30px, 0, 0);

    -ms-transform: translate3d(30px, 0, 0);

    -o-transform: translate3d(30px, 0, 0);

    transform: translate3d(30px, 0, 0);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    opacity: 1;

  }

}

@-moz-keyframes xr {

  0% {

    -webkit-transform: translate3d(30px, 0, 0);

    -ms-transform: translate3d(30px, 0, 0);

    -o-transform: translate3d(30px, 0, 0);

    transform: translate3d(30px, 0, 0);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    opacity: 1;

  }

}

@-webkit-keyframes xr {

  0% {

    -webkit-transform: translate3d(30px, 0, 0);

    -ms-transform: translate3d(30px, 0, 0);

    -o-transform: translate3d(30px, 0, 0);

    transform: translate3d(30px, 0, 0);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    opacity: 1;

  }

}

@-o-keyframes xr {

  0% {

    -webkit-transform: translate3d(30px, 0, 0);

    -ms-transform: translate3d(30px, 0, 0);

    -o-transform: translate3d(30px, 0, 0);

    transform: translate3d(30px, 0, 0);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    opacity: 1;

  }

}