.bf-banner {position:relative;height:100vh;background:#fff;overflow:hidden;}
.bf-banner-image {position:absolute;top:0;left:0;width:100vw;height:100vh;}
.bf-banner-image.active {z-index:1;}
.bf-banner-container {position:absolute;top:40%;left:50%;z-index:2;text-align:center;font-size:0;transform:translate(-50%,-50%);color:#fff;}
.bf-banner-icon {width:.98rem;height:.98rem;margin:0 auto;}
.bf-banner-icon.iconfont {font-size:.88rem;color:#fff;}
.bf-banner-icon.icon {width:.88rem;color:#fff;}
.bf-banner-title {margin-top:.3rem;margin-bottom:.1rem;font-size:.52rem;color:#fff;text-transform:uppercase;text-align:center;white-space:nowrap;}
.bf-banner-subtitle {color:#fff;text-transform:uppercase;text-align:center;white-space:nowrap;}

@media screen and (max-width:768px) {.bf-banner-container {width:90%;margin:0 auto;}
  .bf-banner-title {white-space:pre-wrap; font-size: .42rem; }
}


.swiper-banner-container { width: 100%; height: 100%; }
.swiper-banner-container .bf-banner-image { position: static; width: 100%; height: 100%; }
.banner-tips { position: absolute; bottom: 1.34rem; left: 0; z-index: 1; width: 100%; text-align: center; color: #fff;  }
.banner-tips.no-classification { bottom: 6%; }
.banner-tips .tips.pc {display: block;}
.banner-tips .tips.mo {display: none;}
.banner-tips span { display: inline-block; line-height: 1; vertical-align: middle; }
.banner-tips .icon { position: relative; display: inline-block; width: .14rem; height: .25rem; margin-left: .1rem; border: 1px #fff solid; border-radius: .14rem; vertical-align: middle; }
.banner-tips .icon:after { content: ""; position: absolute; top: 18%; left: 50%; width: 2px; height: 5px; margin-left: -1px; background: #fff; transition: all .3s ease; animation: aniIcon 1s infinite;  }
.bf-banner-classification {  position: absolute; bottom: 0; left: 0; width: 100%;z-index: 1; }
.bf-banner-classification .list { border-radius: .24rem .24rem 0 0; font-size: 0 ;overflow: hidden; }
.bf-banner-classification .item { width: calc(100% / 6); padding: .3rem 0; border-right: 1px solid rgba(255,255,255,.5); font-size: 0; text-align: center; background: rgba(255,255,250,0.4); cursor: pointer; }
.bf-banner-classification .item:last-child { border-right: 0; }
.bf-banner-classification .item.active { background: #00928c; }
.bf-banner-classification .label {color: #fff;}
@keyframes aniIcon {
  0% {
    top: 18%;
    opacity: .5;
  }
  100% {
    top: 50%;
    opacity: 1;
  }
}
@media screen and (max-width: 768px) {
  .banner-tips { bottom: 2.2rem; }
  .banner-tips.no-classification { bottom: 3%; }
  .banner-tips .tips.pc {display: none;}
  .banner-tips .tips.mo {display: inline-block; padding: 0 .2rem; border-radius: .4rem; background: rgba(0,0,0,.4);}
  .bf-banner-classification .item {width: 33.3333%;border-bottom: 1px solid rgba(255,255,255,.5);}
  .bf-banner-classification .item .label {font-size: .2rem;}
  .bf-banner-classification .item:nth-child(3n + 3) { border-right: 0; }
}