$banner-prefix-cls: '#{$name-prefix}-banner';
$svgIcon-prefix-cls: '#{$name-prefix}-svg-icon';

.#{$banner-prefix-cls} {
  width: 100%;
  position: relative;
  transition: margin-top .3s;
  &--host {
    margin-top: -100px;
  }

  .title {
    font-size: 42px;
    font-weight: bold;
    color: $white;
    position: absolute;
    left: 160px;
    top: 50%;
    transform: translateY(-50%);
    letter-spacing: 5px;
  }

  img {
    width: 100%;
  }

  :deep(.search-bar) {
    position: absolute;
    bottom: 234px;
    left: 50%;
    border-radius: 4px;
    transform: translateX(-50%);
    width: 1152px;
    height: 90px;
    background-color: rgb(255 255 255 / 80%);
    display: flex;
    align-items: center;
    .el-icon {
      margin: 0 24px 0 32px;
    }

    .mai-input {
      background: transparent;
      outline: none;
      border: none;
      border-radius: unset;
      width: 100%;
      font-size: 28px;
      padding-right: 24px;
    }

    .mai-btn {
      font-size: 32px;
      color: $white;
      height: 100%;
      background: #14417a;
      border-radius: 4px;
      width: 180px;
      flex-shrink: 0;
    }
  }
}