.banner-box{
  max-width: 1920px;
  min-width: 1450px;
  margin: 0 auto;
  line-height: 1;
  position: relative;
  padding-top: 80px;
  .bg{
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
  .content-box{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .inner{
      width: 1320px;
      margin: 0 auto;
      box-sizing: border-box;
      padding-top: 220px;
      display: flex;
      justify-content: space-between;
      > .l{
        .t{
          font-weight: bold;
          font-size: 50px;
          color: #FFFFFF;
          margin-bottom: 26px;
        }
      }
      > .r .bg{
        width: 383px;
        height: 46px;
      }
    }
  }
}

.bottom-box{
  width: 1320px;
  margin: -35px auto 0;
  position: relative;
  z-index: 1;
  .nav-box{
    height: 65px;
    background: #367AEA;
    box-shadow: 0px 2px 8px 0px rgba(31,50,77,0.29);
    border-radius: 2px;
    display: flex;
    justify-content: space-around;
    .item{
      cursor: pointer;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 65px;
      position: relative;
      margin-right: 0px;
      &:last-child{
        margin-right: 0px;
      }
      &:after{
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        transition: .5s;
        width: 0;
        height: 3px;
      }
      &.active:after{
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 62px;
        height: 3px;
        background: #FFFFFF;
      }
    }
  }
  > .content-box{
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;

    .left{
      width: 210px;
      max-height: 621px;
      height: fit-content;
      overflow-y: auto;
      background: #FFFFFF;
      box-shadow: 0px 0px 4px 0px rgba(31,50,77,0.24);
      border-radius: 2px;
      line-height: 1;
      &::-webkit-scrollbar {
        width: 2px;
        height: 2px;
      }

      &::-webkit-scrollbar-thumb {
        background: #367AEA;
      }

      &::-webkit-scrollbar-corner {
        background: transparent;
      }

      .item{
        transition: .5s;
        cursor: pointer;
        height: 64px;
        display: flex;
        padding: 0 12px;
        align-items: center;
        border-bottom: 1px solid;
        border-image: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 20%,
          rgba(54, 122, 234, .5) 50%,
          rgba(255, 255, 255, 0) 80%
        )
        2 2 2 2;
        &.active{
          background: #F1F6FF;
          color: #367AEA;
          .name{
            color: #367AEA;
          }
        }
        .l{
          width: 13px;
          height: 13px;
          margin-right: 8px;
        }
        .name{
          font-size: 14px;
          color: #7088B1;
          text-align: justify;
          line-height: 16px;
        }
      }
    }
    .right{
      flex: 1;
      .item{
        padding: 15px 42px;
        .title-box{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 35px;
          .l, .r{
            flex: 1;
            height: 1px;
            background: #367AEA;
          }
          .m{
            margin: 0 10px;
            height: 60px;
            background: url("../assets/img/products/img-6.png") center no-repeat;
            font-weight: bold;
            font-size: 16px;
            color: #367AEA;
            text-align: center;
            line-height: 60px;
          }
        }
        .text-box{
          font-size: 14px;
          color: #221815;
          line-height: 34px;
        }
      }
    }
  }
}