.banner-tab {
  height: 52px;
  -webkit-box-shadow: 0px 2px 8px #f3f3f3;
          box-shadow: 0px 2px 8px #f3f3f3; }
  .banner-tab .tab-wraper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 325px;
    height: 52px;
    padding: 0;
    margin: 0 auto; }
  .banner-tab .tab-item {
    font-size: 16px;
    font-weight: 500;
    padding: 0 28px;
    color: #666666;
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
    .banner-tab .tab-item:hover {
      opacity: 0.8; }
    .banner-tab .tab-item.active {
      position: relative;
      color: #008cff; }
    .banner-tab .tab-item.active::after {
      content: "";
      width: 100%;
      height: 2px;
      position: absolute;
      bottom: -15px;
      left: 0px;
      background-color: #008cff; }

@media (max-width: 768px) {
  .banner-tab .tab-wraper {
    width: 100%; }
    .banner-tab .tab-wraper .tab-item {
      width: 50%; } }