caimei-authentic-ross-static/css/brand.scss

.main {
  .brand {
    margin-top: 60px;

    &:first-child {
      margin-top: 120px;
    }

    .container {
      position: relative;
    }

    .cover {
      width: 880px;
      height: 420px;
      background: pink;
    }

    .content {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 360px;
      height: 340px;
      border: 3px solid #e8e8e8;
      box-sizing: border-box;
      background: #fff;
      .brand-logo {
        position: relative;
        width: 174px;
        height: 106px;
        background: skyblue;
        overflow: hidden;

        img {
          display: block;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }

      .name {
        font-size: 16px;
        color: #505050;
        margin: 24px 0 32px;
      }

      .link {
        width: 160px;
        height: 48px;
        background: #f7f7f7;
        opacity: 1;
        font-size: 16px;
        color: #505050;
        text-align: center;
        line-height: 48px;
        cursor: pointer;
        transition: all 0.4s;

        &:hover {
          background: #eee;
        }
      }
    }
  }
}