.h1, h1 {
  font-family: PingFangSC-Semibold;
  font-size: 32px;
  color: #383C43;
  letter-spacing: 0;
  text-align: center;
}

.banner-p {
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #919191;
  letter-spacing: 0;
  text-align: center;
  line-height: 25px;
}

@media (min-width: 768px) {
  .app-download-box {
    height: 120px;
    text-align: center;
    width: 600px;
    margin: auto;
  }
}

.app-box {
  text-align: center;
  width: 120px;
  margin: auto;
  height: 100%;
  background: #000;
  border-radius: 4px;
}

.app-box-icon {
  height: 65%;
  padding: 25px;
}

.app-download-text {
  height: 35%;
}

.app-h5 {
  color: #fff;
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: -0.43px;
  text-align: center;
  margin-bottom: 2px;
}

.app-download-p {
  opacity: 0.8;
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: -0.37px;
  text-align: center;
  margin-bottom: 0px;
}

.app-box-line {
  border: 1px;
  border: 1px solid #000000;
  border-radius: 2px;
  text-align: center;
  width: 120px;
  margin: auto;
  height: 100%;
  border-radius: 4px;
}

.app-h5.black {
  color: #000;
}

.app-download-p.black {
  color: #000;
}

.app-box:hover {
  cursor: pointer;
  background: #4586FF;
  transition: all 0.3s;
}

.app-box:hover rect {
  fill: #4586ff;
  transition: all 0.3s;
}

.app-box-line:hover {
  cursor: pointer;
  background: #4586FF;
  transition: all 0.3s;
  border: 1px solid #4586ff;
}

.app-box-line:hover h5 {
  color: #fff;
  transition: all 0.3s;
}

.app-box-line:hover p {
  color: #fff;
  transition: all 0.3s;
}

.app-box-line:hover path {
  fill: #fff;
  transition: all 0.3s;
}

.app-box-line:active {
  background: #376BCC;
}

.app-box:active {
  background: #376BCC;
}

.app-box:active rect {
  fill: #376bcc;
}

@media (min-width: 576px) {
  .app-download-box {
    width: 100%;
  }
}

.app-download-box {
  height: 120px;
  text-align: center;
  margin: auto;
}

@media (min-width: 768px) {
  .app-download-box {
    width: 600px;
  }
}

@media (min-width: 300px) {
  .app-box {
    display: none;
  }
}

@media (min-width: 576px) {
  .app-box {
    display: block;
  }
}

@media (min-width: 768px) {
  .download-img {
    margin-top: 5%;
    height: 500px;
    background: url(resources/download_img.png)no-repeat center top;
    background-size: 80%;
    margin-bottom: 50px;
  }
}

@media (min-width: 576px) {
  .download-img {
    margin-top: 5%;
    height: 500px;
    background: url(resources/download_img.png)no-repeat center top;
    background-size: 80%;
  }
}

@media (min-width: 300px) {
  .download-img {
    margin-top: 5%;
    background: url(resources/download_img.png)no-repeat center;
    background-size: 120%;
    height: 381px;
  }
}

@media (min-width: 992px) {
  .download-img {
    margin-top: 5%;
    height: 500px;
    background: url(resources/download_img.png)no-repeat center top;
    background-size: 80%;
  }
}

.footer-h1 {
  text-align: left;
  color: rgb(255,255,255);
  font-size: 38px;
}

.logo {
  width: 60px;
  height: 60px;
}

.img-ding {
  position: inherit;
  background: url(resources/logo.png);
  background-repeat: no-repeat;
  background-size: 40px;
  background-position: 44% 50%;
  margin: auto;
  width: 100%;
  height: 50px;
}

@media (min-width: 1200px) {
  .logo-img {
    position: relative;
    top: 0;
    left: 0;
    margin: 60px;
    /*margin: auto;*/
    margin-top: 5%;
    height: 500px;
  }
}

@media (min-width: 992px) {
  .logo-img {
    position: relative;
    /*margin-top: 5%;*/
    top: -37px;
    left: -57px;
    margin: auto;
    /*height: 469px;*/
  }
}