html {
  height: 100%; }

body {
  font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;
  height: 100%;
  min-height: 800px;
  background-color: #DCFFF5;
  margin: 0; }

p {
  margin: 0; }

.clearfix:after {
  content: "";
  display: block;
  clear: both; }

.block {
  display: block; }

.clearfix {
  zoom: 1; }

.container {
  height: calc(100% - 85px);
  position: relative; }

.left-area, .right-area {
  width: 50%;
  padding: 40px;
  display: inline-block;
  font-size: 0;
  overflow: hidden;
  box-sizing: border-box; }
.left-area .right-area--text, .right-area .right-area--text {
  letter-spacing: 2px;
  font-size: 30px;
  font-weight: bold;
  color: #007255; }
.right-area--text div:first-child {
  margin-bottom: 4px;
}

.left-area {
  text-align: right;
  position: relative;
  height: 660px;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -330px; }
.left-area img {
  max-width: 100%;
  max-height: 100%; }

.center-box {
  position: absolute;
  left: 40px;
  width: calc(100% - 85px);
  top: 50%;
  transform: translateY(-50%); }

.right-area {
  float: right;
  height: 660px;
  padding-left: 55px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -330px; }
.right-area .right-area--logo {
  margin-top: 65px; }
.right-area .right-area--logo, .right-area .right-area--text {
  margin-bottom: 25px; }
.right-area .right-area--qr_code {
  box-sizing: border-box;
  width: 230px;
  height: 250px;
  background-color: #FFF;
  padding: 30px 40px;
  font-size: 14px;
  color: #272727; }
.right-area .right-area--qr_code .qr_code {
  float: left;
  text-align: center; }
.right-area .right-area--qr_code .qr_code .text {
  margin: 20px 0;
  font-size: 16px; }
.right-area .right-area--qr_code .download {
  float: right; }
.right-area .right-area--qr_code .download .android {
  padding-top: 15px;
  padding-bottom: 35px; }

.footer {
  height: 60px;
  background-color: #2D3B36;
  color: #FEFEFE;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 5px; }
.footer p {
  line-height: 25px; }

.phone img {
  width: 100%;
  margin: 0 auto;
  display: block; }
.phone .logo {
  width: 46%;
  margin-bottom: 25px; }
.phone .display {
  width: 100%; }
.phone .download {
  margin: 0 auto;
  width: 90%;
  text-align: center; }
.phone .download div {
  display: inline-block;
  box-sizing: border-box;
  width: 50%;
  float: left;
  padding: 10px; }
.phone .phone--text {
  font-size: 20px;
  color: #007255;
  text-align: center;
  margin: 20px 0; }

@media (max-width: 1218px) {
  .left-area img {
    position: absolute;
    left: 40px;
    width: calc(100% - 85px);
    top: 50%;
    transform: translateY(-50%); }

  .right-area .right-area--qr_code {
    width: 180px;
    padding: 15px;
    height: auto; }
  .right-area .right-area--qr_code .qr_code .text {
    margin: 10px 0 0 0; }
  .right-area .right-area--text {
    margin-bottom: 15px; }
  .right-area .right-area--logo {
    margin-top: 15px;
    margin-bottom: 15px; }
  .right-area .right-area--logo img {
    width: 80%;
    display: inline-block; } }
@media (max-width: 1024px) {
  .left-area, .right-area {
    padding: 20px; } }
@media (max-width: 960px) {
  .left-area, .right-area {
    padding: 10px; }

  .right-area {
    width: 360px;
    margin-right: 40px; }
  .right-area .right-area--qr_code {
    width: 180px;
    padding: 15px;
    height: auto; }
  .right-area .right-area--qr_code .qr_code .text {
    margin: 10px 0 0 0; }
  .right-area .right-area--text {
    margin-bottom: 15px; }
  .right-area .right-area--logo {
    margin-top: 0;
    margin-bottom: 15px; }
  .right-area .right-area--logo img {
    width: 80%;
    display: inline-block; } }
@media (min-width: 700px) {
  .phone {
    display: none; } }
@media (max-width: 700px) {
  .footer {
    display: none; }

  .container {
    display: none; }

  .phone .display {
    width: 100%; }

  body {
    min-height: 100%;
    height: auto;
    background: linear-gradient(to bottom, #E0FFF5, white);
    background-repeat: no-repeat;
    background-attachment: fixed; }
  body .phone {
    padding-top: 45px;
    padding-bottom: 35px; } }
@media (max-width: 320px) {
  .phone .logo {
    margin-bottom: 15px; }

  body {
    min-height: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-attachment: fixed; }
  body .phone {
    padding-top: 35px;
    padding-bottom: 25px; } }