.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; } } } } }