.brand {
  min-height: 52px;
  padding-left: 66px;
  justify-content: center;
  transition: filter .25s ease;
}

.brand-circuit { display: none; }

.brand::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 50px;
  height: 50px;
  background: url("/logo-yunxu.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 12px rgba(155, 242, 109, .2));
  transform: translateY(-50%);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), filter .3s;
}

.brand::after {
  content: "";
  position: absolute;
  left: 57px;
  top: 50%;
  width: 1px;
  height: 34px;
  background: linear-gradient(transparent, rgba(155, 242, 109, .55), transparent);
  transform: translateY(-50%);
}

.brand:hover::before {
  filter: drop-shadow(0 0 18px rgba(155, 242, 109, .42));
  transform: translateY(-50%) scale(1.055);
}

.brand-name {
  font-size: 29px;
  font-weight: 500;
  letter-spacing: .015em;
  text-shadow: 0 0 22px rgba(240, 245, 239, .08);
}

.brand-name span { margin-left: 2px; }
.brand small { margin-top: 7px; color: #819792; letter-spacing: .18em; font-size: 7px; }
.footer-brand .brand { padding-left: 66px; }
.footer-brand .brand-name { font-size: 30px; }

@media (max-width: 760px) {
  .brand { min-height: 42px; padding-left: 49px; }
  .brand::before { width: 40px; height: 40px; }
  .brand::after { left: 44px; height: 28px; }
  .brand-name { font-size: 21px; }
  .brand small { margin-top: 5px; font-size: 5.5px; letter-spacing: .12em; }
  .footer-brand .brand { padding-left: 58px; }
  .footer-brand .brand::before { width: 46px; height: 46px; }
  .footer-brand .brand::after { left: 51px; }
  .footer-brand .brand-name { font-size: 26px; }
}