* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: #f2f3f4;
}

body {
  margin: 0;
  background: transparent;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  overflow-x: hidden;
}

.page-frame {
  position: relative;
  width: min(100%, 500px);
  height: 889.333333px;
  margin: 0 auto;
  overflow: hidden;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 750px;
  height: 1334px;
  margin-left: 0;
  overflow: hidden;
  background: transparent url("static/main.png") top center / 750px 1253px no-repeat;
  transform-origin: top left;
}

.logo {
  position: absolute;
  top: 58px;
  left: 174px;
  width: 431px;
  height: auto;
}

.headline {
  position: absolute;
  top: 203px;
  left: 0;
  width: 750px;
  text-align: center;
  white-space: nowrap;
}

.headline h1 {
  margin: 0;
  font-size: 68px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
}

.headline .blue { color: #0867d9; }
.headline .red { color: #f02a32; }
.headline .green { color: #009b25; }

.headline p {
  margin: 17px 0 0;
  color: #666;
  font-size: 30px;
  line-height: 1;
  letter-spacing: .24em;
  text-indent: .24em;
}

.actions {
  position: absolute;
  top: 875px;
  left: 78px;
  width: 596px;
}

.action {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 20px;
  color: #fff;
  text-decoration: none;
  margin-top: 10px;
}

.action img { display: block; width: 100%; height: auto; }

.action span {
  position: absolute;
  top: 50%;
  left: 45%;
  width: 55%;
  transform: translate(-37%, -51%);
  text-align: center;
  line-height: 1;
}

.action strong {
  display: block;
  font-size: 36px;
  letter-spacing: .24em;
  text-indent: .24em;
}

.action small {
  display: block;
  margin-top: 7px;
  font-size: 19px;
  letter-spacing: .08em;
  text-indent: .08em;
}

footer {
  position: absolute;
  bottom: 34px;
  width: 750px;
  /* color: #999; */
  text-align: center;
  font-size: 19px;
  white-space: nowrap;
}