.topbanner {position: relative}
.topbanner .banner {width: 100%;height: 100%}
.topbanner .banner ul.bb {position: relative;margin: 0;padding: 0;width: 100%;height: 100%;z-index: 5}
.topbanner .banner ul.bb .bb_li {position: absolute;width: 100%;height: 100%;z-index: 5;left: 0;top: 0;display: none}
.topbanner .banner ul.bb .bb_li>img {width: 100%}
.topbanner .banner .num {text-align: center;position: absolute;width: 100%;height: .3rem;right: 2px;bottom: 4%;z-index: 100;opacity: .8}
.topbanner .banner .num li {display: inline-block;margin-right: 8px;background-color: #fff;}
.topbanner .banner .num li a {text-align: center;color: #fff;overflow: hidden;display: inline-block;text-decoration: none;cursor: pointer;width: 40px;height: 4px;text-indent: -100px;opacity: 1}
.topbanner .banner .num li.num_hover{background-color: #d11e1e}
.topbanner .banner ul.bb .bb_li{background-size: 100% auto;}

.topbanner .banner{background-color: #333;}

.wk_wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -175px;
  margin-left: -415px;
  width: 830px;
  height: 350px;
}
.t2 .wk_wrap {
  width: 100% ;
  height:100%  ;
  left: 0 ;
  top: 0 ;margin: 0;overflow: hidden;
}
.wk_wrap .photlist{width: 1400px;transform: rotate(-30deg);margin-top: -300px;
    margin-left: -350px;
}
.wk_wrap .photlist .img{position: relative; float: left;margin-right:30px;margin-bottom:30px;
      transform: rotate(-30deg);
      opacity: 0;box-shadow:2px 2px 12px rgba(70,70,70,.5);
}
.wk_wrap .photlist .img .as1{position: absolute ;
z-index: 5 ;
right:105%;
top: 0 ;opacity: 0;}
.wk_wrap .photlist .img .as2{position: absolute ;
z-index: 5 ;
left:105%;
top: 0 ;opacity: 0;}
.wk_wrap .photlist img{display: block;}
.wk_wrap .photlist+.imgr{
  position: absolute ;opacity: 0;
  z-index: 5 ;
  right:0%;
  top:20% ;
}
.wk_wrap.active .photlist .img {
  -webkit-animation:pulws linear 2.4s .3s;-moz-animation:pulws linear 2.4s .3s;animation:pulws linear 2.4s .3s;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;
}
.wk_wrap.active .photlist .as1 {
  opacity:0.4;
  transition: opacity 1s linear 2.2s;
}

.wk_wrap.active .photlist .as2 {
  opacity:0.75;
  transition: opacity 1s linear 2.2s;
}
@keyframes pulws {
  0% {opacity:0;}
  20%{opacity: 1;}

  35% {-webkit-transform: rotate(0);transform: rotate(0);}
  70%{-webkit-transform:translateX(-150px);transform:translateX(-150px);margin-right:30px;margin-bottom:30px;}

  to {-webkit-transform:translateX(-150px);transform:translateX(-150px);margin-right:15px;margin-bottom:15px;opacity: 1;}
}
.wk_wrap.active .photlist+.imgr{
  right:10%;
  opacity:1;
  transition: all 2s linear 1s;
}

.wk_wrap .cont{
  display: inline-block;
  width: 100%;
  position: absolute ;
  height:auto  ;
  z-index: 5 ;
  left: 0 ;text-align:center;
  top: 50% ;
  transform: translateY(-50%);white-space: nowrap;
}
.wk_wrap .flyl{opacity: 0;transform: translateX(-10%);}
.wk_wrap .flyr{opacity: 0;transform: translateX(10%);}
.wk_wrap .mid{opacity: 0;height: 0;}
.wk_wrap.active .flyl,
.wk_wrap.active .flyr{
  transform: translateX(0);opacity: 1;
  transition: all 1.2s linear 0.3s;
}
.wk_wrap.active .mid{
  opacity:1;height:285px;transition: all 1.2s linear 0.3s;
}
.bgdot{
  position: absolute ;
  height:auto;
  z-index: 5 ;
  bottom: 0 ;
  width: 110% ;left:-10%;
}
.wk_wrap.active .bgdot{
  -webkit-animation:puld linear 10s .3s;-moz-animation:puld linear 10s .3s;animation:puld linear 10s .3s;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;}
@keyframes puld {
  0% {
}
  50%{left:0;}

  to{width: 100%;left: 0;}
}
/*新banner结束*/
@media screen and (max-width:1100px) {
  .bb_li>img{opacity: 0;}
  .wk_wrap{display: none;}
}
@media screen and (max-width: 767px) {
  .topbanner {padding: 8% 0;width: 100%;overflow: hidden;}
  .topbanner .banner .num{display: none;}
  .topbanner .banner{width: 100%;height: 100%;transform: scale(1.5,1.5);}
}