.scan {
  padding: 0 8.3333vw;
  height: 56.25vw;
  background-color: #F8F9FA;
}

.scan .title {
  position: relative;
  padding-top: 7.6042vw;
  font-size: 3.75vw;
  font-weight: bold;
  z-index: 2;
  font-family: 'auto'
}

.scan:nth-of-type(1) {
  background: url('../image/bg/qrcode-bg.png') no-repeat center center;
  background-size: 100% 100%;
}

.scan:nth-of-type(2) {

  background: url('../image/bg/business-2.png') no-repeat center center;
  background-size: 100% 100%;
}

.scan:nth-of-type(3) {
  background: url('../image/bg/business-3.png') no-repeat center center;
  background-size: 100% 100%;
}

.scan:nth-of-type(2) .title, .scan:nth-of-type(3) .title {
  padding-top: 10.4167vw;
}

.scan.two {
  display: flex;
  flex-direction: column;
}

.scan.two .title::after {
  top: 3.6458vw;
  right: 7.2917vw;
  left: auto;
  content: '02'
}

.scan.three .title::after {
  top: 3.6458vw;
  content: '03'
}

.scan .title::after{
  position: absolute;
  content: '01';
  color: #cbcccd;
  font-size: 10.4167vw;
  left: 8.3333vw;
  letter-spacing: .5208vw;
  top: .8333vw;
  z-index: -1;
}

.scan .sub-title {
  margin: 2.1875vw 0 13.75vw 0;
  font-size: 1.875vw;
  letter-spacing: .2604vw;
  font-weight: 400;
}

.scan .qrcode-content {
  width: 8.8542vw;

}

.scan .qrcode-content .qrcode {
  width: 100%;
  height: 8.8542vw;
  /* padding: .5208vw; */
  box-sizing: border-box;
  border: 1px solid #878787;
}

.scan .qrcode-content .qrcode img {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.scan .qrcode-content .qr-tip {
  font-size: 1.0417vw;
  margin-top: .5208vw;
  text-align: center;
  letter-spacing: .1563vw;
}


@media screen and (max-width: 768px) {
  .scan {
    position: relative;
    height: 146.6667vw;
    background-size: cover;
    padding: 0;
  }
  .scan .title {
    margin-left: 6.6667vw;
    padding-top: 12vw;
    font-size: 9.6vw;
    font-weight: bold;
    font-family: '微软雅黑';
  }

  .scan .sub-title {
    font-size: 4.2667vw;
    margin-left: 6.6667vw;
  }

  .scan .qrcode-content {
    margin-left: 9.0667vw;
    margin-top: 72vw;
    width: max-content;
  }
  .scan .qrcode-content .qrcode {
    width: 23.4667vw;
    height: 23.4667vw;
  }
  .scan .qrcode-content .qr-tip {
    font-size: 3.7333vw;
    margin-left: -1.6vw;
    margin-top: 2.6667vw;
  }
  .scan:nth-of-type(1), .scan:nth-of-type(2), .scan:nth-of-type(3) {
    background-size: cover;
  }
  .scan:nth-of-type(3) {
    background-position-x: 60%;
  }
  .scan:nth-of-type(2) {
    padding-right: 6.6667vw;
  }
  .scan .title::after {
    font-size: 18.1333vw;
    left: 24vw;
    top: inherit;
    bottom: -2.6667vw;
    color: rgba(0, 0, 0, 0.18);
  }
  .scan.two .title::after {
    top: inherit;
    right: 22.1333vw;
  }
  .scan.three .title::after {
    top: inherit;
    left: 26.6667vw;
  }
}