.bg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 500px;
  background: url(../bg.jpg) no-repeat center;
  background-size: 100%;
  background-position-y: 60%;
  z-index: -1;
}
@media (max-width: 600px) {
  .bg {
    height: 400px;
  }
}
@media (max-width: 400px) {
  .bg {
    height: 300px;
  }
}
#app .box {
  max-width: 55%;
  min-width: 677px;
  margin: auto;
  margin-top: 15%;
  background-color: #fdfdfd;
  min-height: 500px;
  padding: 50px;
}
#app .box .title {
  padding: 5px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
  font-size: 22px;
}
#app .box .top {
  text-align: center;
  padding: 10px 0;
  background-color: #eff4fa;
  font-size: 22px;
}
#app .box .main_body {
  padding: 20px;
  text-align: center;
}
#app .box .main_body pre {
  width: 80%;
  font-size: 20px;
  text-indent: 2em;
  margin: auto;
}
#app .box .main_body img {
  width: 80%;
}
@media (max-width: 912px) {
  #app .box {
    width: 80% !important;
    max-width: none;
    min-width: auto;
    padding: 1em;
  }
  #app .box .main_body {
    padding: 0.2em;
  }
  #app .box .title {
    font-size: 1.1em !important;
  }
  #app .box .top {
    font-size: 0.9em !important;
  }
  #app .box pre {
    font-size: 1.14em !important;
  }
}
@media (max-width: 340px) {
  #app .box pre {
    font-size: 0.8em !important;
  }
}