@import '~scss/variables';
@import  '~scss/mixins';

$banner-height: 144px;

.banner {
  width: 100%;
  height: $banner-height;
  padding: 26px;
  background: $light-color02;

  .back {
    display: inline-flex;
    cursor: pointer;
    margin-bottom: 18px;
    font-size: $size-small;
    line-height: 20px;
    > span:last-child {
      margin-left: 8px;
      font-weight: 500;
    }
  }

  .intro {
    display: flex;
    align-items: center;
    .icon {
      display: inline-block;
      width: 48px;
      height: 48px;
      line-height: 48px;

      >span {
        position: static;
        transform: translateY(0);
      }
    }
    .text {
      margin-left: 19px;
      > h3 {
        font-size: 24px;
        font-weight: $font-bold;
        line-height: 32px;
        color: $dark-color07;
        text-shadow: 0 2px 4px 0 rgba(36, 46, 66, 0.1);
      }
      > p {
        font-style: $size-small;
        line-height: 20px;
        color: $dark-color01;
        word-break: break-word;
        @include ellipsis;
      }
    }
  }

  .rightIcon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    height: 144px;
    overflow: hidden;
    .image {
      display: inline-block;
      width: 200px;
      height: 200px;
      line-height: 144px;
      opacity: 0.1;
      mix-blend-mode: multiply;
    }
  }
}
