* {
  margin: 0;
  padding: 0;
}
*,
.wechat-tips {
  box-sizing: border-box;
}
@font-face {
  font-family: icomoon;
  font-weight: 400;
  font-style: normal;
  /* src: url(fonts/d_icomoon.ttf) format('truetype'); */
}
[class*=' icon-'],
[class^='icon-'] {
  font-family: icomoon;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
}
.desc-section pre,
.releases-section .release-view .version-info .changelog .wrapper,
body,
html {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.icon-Downloading:before {
  content: '\e900';
}
.icon-refresh:before {
  content: '\e901';
}
.icon-android_store:before {
  content: '\e600';
}
.icon-android:before {
  content: '\e601';
}
.icon-icon_path:before {
  content: '\e602';
}
.icon-ios_store:before {
  content: '\e603';
}
.icon-ios:before {
  content: '\e604';
}
.icon-qrcode:before {
  content: '\e605';
}
.icon-brace-left:before {
  content: '\e613';
}
.icon-brace-right:before {
  content: '\e617';
}
.icon-comma-eye:before {
  content: '\e618';
}
.icon-mouth:before {
  content: '\e619';
}
.icon-close:before {
  content: '\e63b';
}
.icon-download:before {
  content: '\e902';
}
.main > header .name span,
.main > header body.passwd .name span {
  display: inline-block;
  overflow: hidden;
  max-width: 100%;
  line-height: 1.6;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: normal;
}
body,
html {
  height: 100%;
  font-size: 14px;
  color: #a9b1b3;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
}
.combo .pattern {
  max-width: 220px;
}
.pattern.left {
  left: 0;
}
.pattern.right {
  right: 0;
}
.pattern {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 21.66%;
  max-width: 312px;
  transition: all 0.5s;
}
.pattern img {
  width: 100%;
  -webkit-transition: all 1s;
  transition: all 1s;
  pointer-events: none;
}
.wechat_tip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  top: 15px;
  border-radius: 10px;
  width: 135px;
  height: 60px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #fff;
  background: #3ab2a7;
  align-items: center;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.wechat_tip i {
  top: -10px;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #3ab2a7;
  border-left: 6px solid transparent;
  width: 0;
  height: 0;
}
.wechat_tip,
.wechat_tip > i {
  position: absolute;
  right: 10px;
}
@media (max-width: 1280px) {
  .pattern {
    width: 18%;
  }
}
.combo .main {
  min-width: 960px;
  max-width: 100%;
}
.main {
  margin: 0 auto;
  width: 700px;
  max-width: 94%;
}
.main .table-container {
  display: table;
  width: 100%;
  height: 100%;
}
.main .table-container .cell-container {
  display: table-cell;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}
.main .table-container .cell-container .app-brief {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.main .bg-path {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  font-size: 290px;
  color: #eff2f2;
}
.main .wrapper {
  margin-right: auto;
  margin-left: auto;
  width: 290px;
}
.main .icon-container {
  position: relative;
  margin: 0 auto;
  width: 290px;
  height: 290px;
}
.main .icon-container .icon {
  top: 0;
  left: 0;
  border-radius: 17.54%;
  padding: 10px;
  width: 140px;
  height: 140px;
  background-color: #fff;
}
.main .icon-container .icon img {
  border-radius: 17.54%;
  width: 120px;
  max-width: 100%;
  height: 120px;
}
.main .icon-container span {
  display: block;
  position: absolute;
  z-index: 2;
}
.main .icon-container .qrcode {
  right: 0;
  bottom: 0;
  border: 20px solid transparent;
  border-radius: 26px;
  width: 140px;
  height: 140px;
  background-color: #eff2f2;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.main .icon-container .qrcode img {
  width: 100px;
  height: 100px;
}
.main .release-type {
  margin: 24px auto 0;
  width: 290px;
  text-align: left;
}
.main .name {
  position: relative;
  margin: 20px auto;
  width: 290px;
  font-size: 28px;
  font-weight: 400;
  text-align: left;
  color: #505556;
}
.main .name .icon-warp i {
  margin-right: 10px;
}
.main .scan-tips {
  margin: 0 auto;
  width: 290px;
  line-height: 22px;
  text-align: left;
  white-space: nowrap;
}
.main .scan-tips .text-black {
  color: #505556;
}
.main .release-info {
  position: relative;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-top: 30px;
}
.main .release-info:before {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -30%;
  border-top: 1px solid #dae2e3;
  width: 60%;
  content: ' ';
}
.main .release-info p {
  margin-bottom: 4px;
}
.main .section {
  position: relative;
  z-index: 2;
  border-top: 1px solid #dae2e3;
  padding: 50px 0;
}
.main .section h2 {
  margin: 0 0 40px;
  font-size: 20px;
  font-weight: 400;
  color: #505556;
}
.main .per-type-info {
  overflow: hidden;
  position: relative;
  border-top: 1px solid #dae2e3;
  padding-top: 0;
}
.main .per-type-info:before {
  position: absolute;
  left: 50%;
  width: 1px;
  height: 100%;
  background-color: #dae2e3;
  content: ' ';
}
.main .per-type-info .type {
  float: left;
  width: 50%;
}
.main .per-type-info .info {
  padding-top: 50px;
  font-size: 12px;
}
.main .per-type-info .info .type-icon {
  margin-bottom: 40px;
}
.main .per-type-info .info i {
  margin-bottom: 0;
  font-size: 48px;
  color: #505556;
}
.main .actions {
  margin: 30px auto 0;
  max-width: 290px;
}
.main .actions p {
  /* padding: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #3ab2a7; */
}
.main .actions p.strong {
  font-weight: 700;
}
.main .actions button {
  display: inline-block;
  border: 1px solid #32b2a7;
  border-radius: 40px;
  padding: 12px 46px;
  min-width: 200px;
  font-size: 14px;
  color: #fff;
  background: #32b2a7;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.main .actions button.loading {
  border-top-color: transparent;
  border-left-color: transparent;
  padding: 12px 0;
  width: 43px;
  min-width: 43px;
  background: 0 0;
  -webkit-animation: rotate 0.6s linear infinite;
  animation: rotate 0.6s linear infinite;
}
.main .actions button.loading_ten {
  border-top-color: transparent;
  border-left-color: transparent;
  padding: 12px 0;
  width: 43px;
  min-width: 43px;
  background: 0 0;
  -webkit-animation: rotate_r 0.6s linear infinite;
  animation: rotate_r 0.6s linear infinite;
}
.main .actions a {
  display: block;
  font-size: 14px;
  color: #868c8e;
}
/* .main .type-ios {
  display: none;
} */
.out-container {
  position: relative;
  z-index: 2;
  transition: all 0.5s;
}
.main,
.out-container {
  display: block;
  height: 100%;
}
.main .header {
  display: block;
  height: 100%;
  min-height: 700px;
  max-height: 900px;
}
.master-section {
  overflow: hidden;
  padding: 40px 0;
}
.master-section p {
  margin: 0;
  line-height: 21px;
}
.master-section pre {
  line-height: 22px;
  text-align: left;
  white-space: pre-line;
  word-wrap: break-word;
  word-break: break-all;
}


.hlong *{display:inline-block;vertical-align:middle}

#install{
    margin:1rem;
}
#install h4{
    margin:2rem 0 1rem;
}
#install .button{
    padding:1rem 0 4rem;
}


@media screen and (max-width: 768px) {
  .main .app-brief .bg-path,
  .main .app-brief .qrcode {
    display: none;
  }
  .main .icon-container {
    width: 100%;
    height: auto;
    text-align: center;
  }
  .main .app-brief {
    text-align: center;
  }
  .main .icon-container .icon {
    display: inline-block;
    position: static;
  }
  .main .header {
    height: 100%;
    min-height: 400px;
    max-height: 100%;
  }
  .main .header .name {
    font-size: 24px;
    text-align: center;
  }
  .main .header .name .icon-warp {
    display: inline-block;
    position: static;
    margin-left: -48px;
    max-width: 76%;
  }
  .main .header .scan-tips {
    display: none;
  }
  .main .header.ad-app {
    min-height: 700px;
  }
  .main .header .type-ios {
    display: block;
  }
  .section {
    padding: 50px 20px;
  }
  .per-type-info {
    display: none;
  }
  .master-section {
    text-align: center;
  }
  .master-section .store-link {
    display: inline-block;
    float: none;
    margin-bottom: 0;
  }
  .master-section p {
    display: none;
  }
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate_r {
  0% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes rotate_r {
  0% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
.per-type-info .info,
.releases-section .release-view .qrcode,
.section-store-link,
.store-section {
  text-align: center;
}




.layer-box-top {
  height: 100px;
  border-radius: 30px 30px 0 0;
  background-image: linear-gradient(to right, #2f8de7, #2374e2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.layer-box-top img {
  width: 60px;
  height: 60px;
  margin-right: 15px;
}

.layer-box-top .right {
  width: 150px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

.layer-box-top .right .content-red {
  color: red;
  margin: 0 5px;
}

.layer-box-bottom {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.layer-box-bottom .layer-box-content {
  width: 80%;
  height: 40px;
  background-color: #edf7f4;
  border-radius: 50px;
  display: flex;
}

.layer-box-bottom .layer-box-content .left {
  width: 200px;
  font-size: 16px;
  display: flex;
  padding-left: 20px;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.layer-box-bottom .layer-box-content .right {
  width: 80px;
  border-radius: 0 30px 30px 0;
  background-image: linear-gradient(to right, #1587f0, #05c5ef);
  font-size: 18px;
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
}

img{
  max-width: 100%;
}