body {
  --bottom-box-code-height: 350px;
  --bottomBoxHeight: 200px;
  --bottomPngleft: -134px;
  --bottomPngWidth: 490px;
  --code-box-width: 620px;
  --code-box-code-top: 51px;
  --code-box-code-text-font-size: 18px;
  --code-box-code-text-top: 16px;
  --code-box-code-png-width: 153px;
  --code-box-code-png-width1: 153px;
  --code-box-code-png-width2: 153px;
  --code-box-company-font-size: 20px;
  --code-box-company-address-margin: 28px;
  --address-isshow: block;
  --phone-address-isshow: none;
  --code-box-company-address-padding: 50px;
  --lanwawa-logo-width: 317px;
  --lanwawa-logo-height: 228px;
  --code-box-company-work-name-margin: 15px;
  --code-box-company-date-font-size: 13px;
  --code-box-company-date-padding-bottom: 10px;
}

@media screen and (max-width: 1600px) {
  body {
    --bottom-box-code-height: 303px;
    --bottom-box-mrgin-top: 140px;
    --bottomBoxHeight: 173px;
    --bottomPngTop: -140px;
    --bottomPngleft: -116px;
    --bottomPngWidth: 425px;
    --code-box-width: 537px;
    --code-box-code-top: 44px;
    --code-box-code-text-font-size: 16px;
    --code-box-code-text-top: 14px;
    --code-box-code-png-width: 134px;
    --code-box-code-png-width1: 133px;
    --code-box-code-png-width2: 133px;
    --code-box-company-font-size: 17px;
    --code-box-company-address-margin: 36px;
    --address-isshow: block;
    --phone-address-isshow: none;
    --code-box-company-address-padding: 43px;
    --lanwawa-logo-width: 275px;
    --lanwawa-logo-height: 198px;
    --code-box-company-work-name-margin: 13px;
    --code-box-company-date-font-size: 12px;
    --code-box-company-date-padding-bottom: 9px;
  }
}
@media screen and (max-width: 1400px) {
  body {
    --bottom-box-code-height: 233px;
    --bottom-box-mrgin-top: 107px;
    --bottomBoxHeight: 133px;
    --bottomPngTop: -109px;
    --bottomPngleft: -89px;
    --bottomPngWidth: 327px;
    --code-box-width: 413px;
    --code-box-code-top: 34px;
    --code-box-code-text-font-size: 12px;
    --code-box-code-text-top: 11px;
    --code-box-code-png-width: 103px;
    --code-box-code-png-width1: 102px;
    --code-box-code-png-width2: 103px;
    --code-box-company-font-size: 13px;
    --code-box-company-address-margin: 28px;
    --address-isshow: block;
    --phone-address-isshow: none;
    --code-box-company-address-padding: 33px;
    --lanwawa-logo-width: 211px;
    --lanwawa-logo-height: 152px;
    --code-box-company-work-name-margin: 10px;
    --code-box-company-date-font-size: 12px;
    --code-box-company-date-margin-bottom: 29px;
    --code-box-company-date-padding-bottom: 7px;
  }
}
@media screen and (max-width: 1200px) {
  body {
    --bottom-box-bottom: 8vw;
    --bottom-box-code-height: 16%;
    --bottom-box-mrgin-top: 24%;
    --bottomBoxHeight: 18%;
    --bottomPngTop: -44%;
    --bottomPngleft: -10%;
    --bottomPngWidth: 40vw;
    --code-box-width: 50%;
    --code-box-code-top: 12%;
    --code-box-code-text-font-size: 1vw;
    --code-box-code-text-top: 5%;
    --code-box-code-png-width: 86%;
    --code-box-code-png-width1: 86%;
    --code-box-code-png-width2: 86%;
    --code-box-code-iphone-width: 31%;
    --code-box-company-font-size: 2.5vw;
    --code-box-company-address-margin: 4%;
    --address-isshow: none;
    --phone-address-isshow: block;
    --code-box-company-address-padding: 5%;
    --lanwawa-logo-width: 20%;
    --lanwawa-logo-height: 50%;
    --code-box-company-work-name-margin: 3%;
    --code-box-company-date-font-size: 2vw;
    --code-box-company-date-margin-bottom: 11%;
    --code-box-company-date-padding-bottom: 3%;
  }
}
body .bottom-box {
  position: relative;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: var(--mainContentBox);
  height: var(--bottom-box-code-height);
  display: flex;
  justify-content: space-evenly;
}
body .bottom-box .bottom-png {
  position: absolute;
  left: 0;
  margin-left: var(--bottomPngleft);
  width: var(--bottomPngWidth);
  height: calc(var(--bottomPngWidth) * 328 / 490);
  z-index: 9;
}
body .bottom-box .code-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: var(--code-box-width);
  margin-left: var(--code-box-left);
}
body .bottom-box .code-box .code {
  width: var(--code-box-code-iphone-width);
  margin-top: var(--code-box-code-top);
  text-align: center;
  color: #ffffff;
}
body .bottom-box .code-box .code .code-text {
  font-size: var(--code-box-code-text-font-size);
  margin: 0;
  padding: 0;
  margin-top: var(--code-box-code-text-top);
}
body .bottom-box .code-box .code:nth-child(1) .code-png {
  width: var(--code-box-code-png-width);
  height: var(--code-box-code-png-width);
}
body .bottom-box .code-box .code:nth-child(2) .code-png {
  width: var(--code-box-code-png-width1);
  height: var(--code-box-code-png-width1);
}
body .bottom-box .code-box .code:nth-child(3) .code-png {
  width: var(--code-box-code-png-width2);
  height: var(--code-box-code-png-width2);
}
body .company {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  width: 100%;
  height: var(--bottomBoxHeight);
  font-size: var(--code-box-company-font-size);
  background-image: url(../images/bottom-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 5%;
}
body .company .address {
  display: var(--address-isshow);
  margin: var(--code-box-company-address-margin) 0;
}
body .company .address .beijing {
  padding-right: var(--code-box-company-address-padding);
}
body .company .phone-address {
  display: var(--phone-address-isshow);
  margin-top: var(--code-box-company-address-margin);
}
body .company .lanwawa-logo {
  position: absolute;
  top: 0;
  left: 10%;
  margin-top: -8%;
  width: var(--lanwawa-logo-width);
  height: var(--lanwawa-logo-height);
}
body .company .work-name {
  margin-bottom: var(--code-box-company-work-name-margin);
}
body .company .date {
  font-size: var(--code-box-company-date-font-size);
  padding-bottom: var(--code-box-company-date-padding-bottom);
}