@-webkit-keyframes fadeInUp {
  0% { opacity: 0;-webkit-transform: translate3d(0, 100%, 0); }
  100% {opacity: 1; -webkit-transform: none; }} 
  @keyframes fadeInUp {
  0% { opacity: 0;transform: translate3d(0, 100%, 0); }
  100% {opacity: 1; transform: none; }} 
  @-webkit-keyframes bounceOut {
  100% {    opacity: 0; }}
@keyframes bounceOut {
  100% {    opacity: 0; }}
  @-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-60px)}
100%{opacity:1;-webkit-transform:translateX(0)}}
@-moz-keyframes fadeInLeft{0%{opacity:0;-moz-transform:translateX(-60px)}
100%{opacity:1;-moz-transform:translateX(0)}}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(60px)}
100%{opacity:1;-webkit-transform:translateX(0)}}
@-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translateX(60px)}
100%{opacity:1;-moz-transform:translateX(0)}}
   @-webkit-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); }
  60% { opacity: 1;-webkit-transform: translate3d(25px, 0, 0);}
  75% { -webkit-transform: translate3d(-10px, 0, 0);}
  90% {  -webkit-transform: translate3d(5px, 0, 0);}
  100% { -webkit-transform: none; }}
 @keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% { opacity: 0; transform: translate3d(-3000px, 0, 0); }
  60% { opacity: 1;transform: translate3d(25px, 0, 0);}
  75% { transform: translate3d(-10px, 0, 0);}
  90% {  transform: translate3d(5px, 0, 0);}
  100% { transform: none; }} 
@-webkit-keyframes flipInY {
  0% {-webkit-transform: perspective(800px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in;opacity: 0; }
  40% { -webkit-transform: perspective(800px) rotate3d(0, 1, 0, -20deg);  -webkit-transition-timing-function: ease-in; }
  60% {  -webkit-transform: perspective(800px) rotate3d(0, 1, 0, 10deg);  opacity: 1;}
  80% { -webkit-transform: perspective(800px) rotate3d(0, 1, 0, -5deg); }
  100% { -webkit-transform: perspective(800px);}}
@keyframes flipInY {
  0% {transform: perspective(800px) rotate3d(0, 1, 0, 90deg); transition-timing-function: ease-in;opacity: 0; }
  40% { transform: perspective(800px) rotate3d(0, 1, 0, -20deg);  transition-timing-function: ease-in; }
  60% {  transform: perspective(800px) rotate3d(0, 1, 0, 10deg);  opacity: 1;}
  80% { transform: perspective(800px) rotate3d(0, 1, 0, -5deg); }
  100% { transform: perspective(800px);}}
  @-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);}
  20% {  -webkit-transform: scale3d(1.1, 1.1, 1.1);}
  40% { -webkit-transform: scale3d(.9, .9, .9); }
  60% {opacity: 1;  -webkit-transform: scale3d(1.03, 1.03, 1.03);}
  80% {-webkit-transform: scale3d(.97, .97, .97);}
  100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1);  }}  
  @keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% {opacity: 0;transform: scale3d(.3, .3, .3);}
  20% {  transform: scale3d(1.1, 1.1, 1.1);}
  40% { transform: scale3d(.9, .9, .9); }
  60% {opacity: 1;  transform: scale3d(1.03, 1.03, 1.03);}
  80% {transform: scale3d(.97, .97, .97);}
  100% { opacity: 1; transform: scale3d(1, 1, 1);  }}
 @-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% {  opacity: 0;     -webkit-transform: translate3d(3000px, 0, 0);}
  60% { opacity: 1;   -webkit-transform: translate3d(-25px, 0, 0);}
  75% {    -webkit-transform: translate3d(10px, 0, 0);}
  90% {   -webkit-transform: translate3d(-5px, 0, 0);}
  100% {  -webkit-transform: none;}} 
  @keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% {  opacity: 0;     transform: translate3d(3000px, 0, 0);}
  60% { opacity: 1;   transform: translate3d(-25px, 0, 0);}
  75% {    transform: translate3d(10px, 0, 0);}
  90% {   transform: translate3d(-5px, 0, 0);}
  100% {  transform: none;}}
  @-webkit-keyframes fadeInLeft {
  0% { opacity: 0;-webkit-transform: translate3d(-100%, 0, 0);}
  100% {opacity: 1;-webkit-transform: none; }}  
  @keyframes fadeInLeft {
  0% { opacity: 0;transform: translate3d(-100%, 0, 0);}
  100% {opacity: 1;transform: none; }}
@-webkit-keyframes fadeInRight {
  0% { opacity: 0;   -webkit-transform: translate3d(100%, 0, 0);}
  100% { opacity: 1; -webkit-transform: none; }}
  @keyframes fadeInRight {
  0% { opacity: 0;   transform: translate3d(100%, 0, 0);}
  100% { opacity: 1; transform: none; }}
@-webkit-keyframes lightSpeedIn {
  0% {-webkit-transform: translate3d(400%, 0, 0) skewX(-30deg); opacity: 0;}
  60% { -webkit-transform: skewX(20deg); opacity: 1;}
  80% {-webkit-transform: skewX(-5deg); opacity: 1; }
  100% {-webkit-transform: none; opacity: 1;}}
  @keyframes lightSpeedIn {
  0% {transform: translate3d(400%, 0, 0) skewX(-30deg); opacity: 0;}
  60% { transform: skewX(20deg); opacity: 1;}
  80% {transform: skewX(-5deg); opacity: 1; }
  100% {transform: none; opacity: 1;}}
 .bg.sp,#foot{filter:alpha(opacity=0);opacity:0;-webkit-transition:all 1.5s linear;transition:all 1.5s linear;}
.home{opacity:0;-webkit-animation:bounceOut  1s 1s ease-out both;animation:bounceOut  1s 1s ease-out both; }
.bg.active .home{opacity:1;-webkit-animation:fadeInUp  1.5s 0s ease-out both;animation:fadeInUp 1.5s  0s ease-out both;}
.bg.sp.active,#foot.active{filter:alpha(opacity=100);opacity:1;}
#about,#video,#pro li,#skill,#type a,#play,#team li,#band li,#news li,#hot,#gps li,#list li,#fen li,#step li,#post,#table td,#prize,#ctrl,#supp,#group{-webkit-animation:bounceOut  0.5s 0s  ease-out both;animation:bounceOut  0.5s 0s ease-out both; }
#about.active{-webkit-animation:fadeInLeft  1s 0.1s  ease-out both;animation:fadeInLeft  1s 0.1s ease-out both; }
#video.active{-webkit-animation:fadeInRight 1s 0.5s  ease-out both;animation:fadeInRight  1s 0.5s ease-out both;}
#pro  li.active{-webkit-animation:fadeInRight 0.8s 0.5s  ease-out both;animation:fadeInRight  0.8s 0.5s ease-out both;}
#skill.active{-webkit-animation:bounceInRight 1s 0.5s  ease-out both;animation:bounceInRight  1s 0.5s ease-out both;}
#type a.active{-webkit-animation:fadeInUp 0.8s 0.5s  ease-out both;animation:fadeInUp  0.8s 0.5s ease-out both;}
#play.active{-webkit-animation:bounceInRight 1s 1s  ease-out both;animation:bounceInRight  1s 1s ease-out both;}
#team li.active{-webkit-animation:fadeInUp 0.8s 0.5s  ease-out both;animation:fadeInUp  0.8s 0.5s ease-out both;}
#band li.active{-webkit-animation:fadeInRight 0.8s 0.5s  ease-out both;animation:fadeInRight  0.8s 0.5s ease-out both;}
#news li.active{-webkit-animation:fadeInLeft 0.8s 0.5s  ease-out both;animation:fadeInLeft  0.8s 0.5s ease-out both;}
#hot.active{-webkit-animation:fadeInRight 1s 1s  ease-out both;animation:fadeInRight  1s 1s ease-out both;}
#gps li.active{-webkit-animation:bounceIn 1s 0.5s  ease-out both;animation:bounceIn  1s 0.5s ease-out both;}
#list li.active{-webkit-animation:fadeInLeft 0.8s 0.5s  ease-out both;animation:fadeInLeft  0.8s 0.5s ease-out both;}
#fen li.active{-webkit-animation:fadeInRight  0.8s 0.5s  ease-out both;animation:fadeInRight  0.8s 0.5s ease-out both; }
#step li.active{-webkit-animation:bounceIn 0.5s 0.2s  ease-out both;animation:bounceIn  0.5s 0.2s ease-out both;}
#post.active{-webkit-animation:lightSpeedIn 1s 0.5s  ease-out both;animation:lightSpeedIn  1s 0.5s ease-out both;}
#table td.active{-webkit-animation:fadeInUp 0.8s 0.5s  ease-out both;animation:fadeInUp  0.8s 0.5s ease-out both;}
#prize.active{-webkit-animation:bounceInRight 1s 0.5s  ease-out both;animation:bounceInRight  1s 0.5s ease-out both;}
#no.active{-webkit-animation:bounceInLeft 1s 0.5s  ease-out both;animation:bounceInLeft  1s 0.5s ease-out both;}
#ctrl.active{-webkit-animation:fadeInUp 1.2s 0.5s  ease-out both;animation:fadeInUp 1.2s 0.5s ease-out both;}
#supp.active{-webkit-animation:flipInY 1s 0.5s  ease-out both;animation:flipInY  1s 0.5s ease-out both;}
#group.active{-webkit-animation:bounceIn 1s 0.5s  ease-out both;animation:bounceIn  1s 0.5s ease-out both;}



 @media screen and (max-width: 640px) {
#obj1 .home,#obj1.active .home{opacity:1;-webkit-animation:none;animation:none;}
#foot{filter:alpha(opacity=100);opacity:1;}
 }
@media screen and (max-width:800px) {
    #about,#about.active,#list li,#list li.active{-webkit-animation:none;animation:none;opacity:1}
}
@media screen and (max-width:800px) {
    #type a,#type a.active,#news li,#news li.active{-webkit-animation:none;animation:none;}
}
@media screen and (max-width:800px) {
    #no,#no.active{-webkit-animation:none;animation:none;opacity:1}
}
.pick-area{width:100%!important;display:block;position:relative;font-size:14px;text-decoration:none;cursor:default;}.pick-show{position:relative;padding:0!important;height:57px;display:-webkit-box;display:flex}.pick-show span{float:left;display:inline-block;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333!important;cursor:pointer;background:none!important}.pick-show span:hover{color:#324945!important;border-radius:3px;}.pick-show em.pick-arrow{position:absolute;top:50%;margin-top:-4px;right:8px;display:block;border:8px solid #999;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid transparent;}.pick-show i{float:left;display:inline-block;padding:0 3px;color:#333;font-style:normal;}.pick-list{display:none;position:absolute;line-height:36px;margin:0;padding:0;background:#fff;z-index:999999999;overflow-y:auto;overflow-x:hidden;border:1px solid #dedede;border-top:none;width:100%!important;top:100%;left:0}.pick-list li{margin:0;padding-left:11px;list-style:none;color:#888;} .pick-list li:hover{color:#fff}
@media screen and (max-width:800px) {
    #team li,#team li.active{-webkit-animation:none;animation:none;}
}
@media screen and (max-width:800px) {
    #post,#post.active,#about,#about.active,#obj2 .home,#obj2{-webkit-animation:none;animation:none;opacity:1}
}
@media screen and (max-width:800px) {
    #fen li,#fen li.active{-webkit-animation:none;animation:none;}
}
@media screen and (max-width:800px) {
    #video,#video.active,#type a,#type a.active{-webkit-animation:none;animation:none;}
}