.swiper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  .swiper-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    transition: all 0ms ease;

    & > div {
      overflow: hidden;
      flex-shrink: 0;
      width: 100%;
      height: 100%;
    }
  }

  &.horizontal .swiper-wrapper {
    flex-direction: row;
  }

  &.vertical .swiper-wrapper {
    flex-direction: column;
  }
  //pagination
  .swiper-pagination {
    position: absolute;

    .swiper-pagination-bullet {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #000000;
      opacity: .2;
      transition: all .5s ease;
    }

    .swiper-pagination-bullet.active {
      background: #007aff;
      opacity: 1;
    }
  }

  &.vertical .swiper-pagination {
    right: 10px;
    top: 50%;
    transform: translate3d(0, -50%, 0);

    .swiper-pagination-bullet {
      display: block;
      margin: 6px 0;
    }
  }

  &.horizontal .swiper-pagination {
    bottom: 10px;
    width: 100%;
    text-align: center;

    .swiper-pagination-bullet {
      display: inline-block;
      margin: 0 3px;
    }
  }



  //tabmode
  .swiper-tabnav {
    position: relative;
    & > span {
      color: #8391a5;
      transition: color .3s;
      &:hover {
        color: #1f2d3d;
        cursor: pointer;
      }
      &.active{
        color: #20a0ff;
      }
    }
  }
  .active-line{
    position: absolute;
    background: #20a0ff;
    transition: all .3s;
  }
  &.horizontal.tabmode{
    &>.swiper-tabnav {
      height: 30px;
      & > span {
        display: inline-block;
        padding: 0 15px;
      }
    }
    .active-line{
      height: 2px;
      width:auto;
      bottom: 0;
      left: 0;
    }
    &>.swiper-wrapper{
      height: calc(100% - 30px);
    }
  }
  &.vertical.tabmode {
    display: flex;
    flex-direction: row;
    &>.swiper-tabnav{
      width: 30px;
      display: inline-flex;
      flex-direction: column;
      justify-content: space-around;
      &>span{
        padding: 8px 0;
        text-align: center;
      }
    }
    .active-line{
      width: 2px;
      height: auto;
      right: 0;
      top: 0;
    }
    &>.swiper-wrapper{
      width: calc(100% - 30px);
      display: inline-flex;
    }
  }
}