.s8-container {
  background: url(/source/plugin/s8_app/images/pc_bg.jpg) center / cover;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 44px;
  height: 44px;
  border-radius: 0.5em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.title1 {
  font-size: 36px;
}
.title2 {
  font-size: 56px;
}
.title3, .title4 {
  font-size: 24px;
}
.home-title, footer {
  font-size: 16px;
}

.box-shadow {
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
}

.text-shadow-sm {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.home-title {
  background: rgba(176, 0, 0, 0.5);
  color: #fff;
}

.home-link {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fe373c;
}

.qrcode-corner {
  background: 
    url(../images/corner/1.svg) top left no-repeat,
    url(../images/corner/2.svg) top right no-repeat,
    url(../images/corner/3.svg) bottom left no-repeat,
    url(../images/corner/4.svg) bottom right no-repeat;
}

.qrcode {
  padding: 12px;
  border-radius: 12px;
}

.qrcode-text {
  background-color: rgba(0, 0, 0, 0.6);
  color: #ddd;
  font-weight: bold;
  font-size: 20px;
  text-shadow: 0 2px 10px rgba(56, 56, 56, 0.2);
}

.text-gallery {
  color: #ebebeb;
}

.text-red-orange {
  color: #fe373c;
}

footer {
  color: #fff;
}