html {
  height: 100%;
}

body {
  margin               : 0;
  font-family          : "dinpro", "roboto", "PingFangSC-Regular", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size            : 14px;
  color                : #23262f;
  flex                 : 1 1 100%;
  display              : flex;
  flex-direction       : column;
  letter-spacing       : 1px;
  padding              : 20px 10px;
  background-image     : url(../img/H5_bg.jpg);
  background-size      : 100% auto;
  background-color     : #2f0c4e;
  background-attachment: fixed;
  background-repeat    : no-repeat;
}

body * {
  box-sizing            : border-box;
  -webkit-font-smoothing: antialiased;
  outline               : none !important;
}

body div {
  display    : flex;
  flex-shrink: 0;
}

.card {
  box-shadow    : 0 0 10px 0 rgba(0, 0, 0, 0.04);
  border-radius : 20px;
  background    : linear-gradient(180deg, rgb(21 32 53 / 30%) 0%, #152035 62.43%, rgb(21 53 40 / 30%) 100%);
  flex-direction: column;
  margin-top    : 25px;
  padding       : 24px 18px;
}

.logo {
  width        : 158px;
  margin-bottom: 17px;
}

.contact {
  color         : rgba(35, 38, 47, 0.5);
  flex-direction: column;
  font-weight   : bold;
}

.contact .phone {
  font-size    : 24px;
  height       : 33px;
  align-items  : center;
  margin-bottom: 10px;
}

.contact .info {
  margin-top: 10px;
}

.header {
  color         : #23262f;
  flex-direction: column;
}

.header .title {
  margin-top : 15px;
  align-items: center;
  color      : #fff;
  font-weight: bold;
  font-size  : 20px;
  line-height: 26px;
}

.header .desc {
  margin-top : 10px;
  font-weight: 400;
  font-size  : 12px;
  line-height: 1.8;
  color      : #97A1BF;
}

.links {
  display: flex;
  flex-direction: column;

  height: calc(44px * 8);
  overflow: hidden;
}

.links .weblist {
  height       : 32px;
  align-items  : center;
  padding      : 0 0 0 10px;
  color        : #777e90;
  overflow     : hidden;
  background   : #0B1426;
  border-radius: 4px;
  margin-bottom: 12px;
}

.links .weblist .link {
  font-size    : 12px;
  flex         : 1;
  overflow     : hidden;
  text-overflow: ellipsis;
  display      : block;
  color        : #fff;
}

.links .weblist .right-content {
  align-items: center;
}

.links .weblist .network {
  margin-right: 12px;
}

.links .weblist .version {
  width       : 30px;
  margin-right: 10px;
  display     : none;
}

.links .weblist .sec_green {
  min-width: 33px;
  color    : #fff;
  font-size: 12px;
}

.links .weblist .sec_green+a {
  display         : flex;
  text-decoration : none;
  color           : #fff;
  min-width       : 54px;
  height          : 33px;
  align-items     : center;
  justify-content : center;
  background-color: #ff592c;
  border-radius   : 0 4px 4px 0;
  margin-left     : 12px;
}

.browser {
  padding       : 20px 0 0 24px;
  height        : 145px;
  flex-direction: column;
  margin-top    : 20px;
  margin-bottom : 20px;
}

.browser .title {
  line-height  : 1.43;
  padding-right: 10px;
}

.browser .title::before {
  content         : "";
  width           : 5px;
  height          : 20px;
  margin-right    : 10px;
  border-radius   : 2.5px;
  background-image: linear-gradient(to top, #f04e23 94%, #ff7f41 -5%);
}

.browser .list {
  padding-top: 25px;
  align-items: center;
}

.browser .list .item {
  align-items : center;
  margin-right: 14px;
  cursor      : pointer;
}

.browser .list .item img {
  width       : 30px;
  margin-right: 4px;
}

.browser .list .item span {
  font-weight: bold;
  color      : #777e90;
}

.container-2 .left,
.container-2 .right {
  flex          : 1;
  flex-direction: column;
}

.container-2 img {
  width: 147px;
}

.container-2 .left {
  align-items : center;
  padding-left: 5px;
}

.container-2 .right {
  margin-left: 10px;
}

.container-2 button {
  outline         : none;
  border          : 1px solid #ff592c;
  color           : #ff592c;
  width           : 111px;
  height          : 34px;
  border-radius   : 5px;
  font-weight     : bold;
  align-items     : center;
  justify-content : center;
  background-color: #fff;
  margin-top      : 14px;
}

.container-2 .desc {
  margin-top: 10px;
  color     : #777e90;
  font-size : 12px;
}

.container-3 {
  flex-direction: column;
  margin-top    : 50px;
  line-height   : 1.43;
}

.container-3 .text {
  margin-bottom: 20px;
}

.container-3 .text::before {
  content         : "";
  width           : 5px;
  height          : 20px;
  margin-right    : 7px;
  border-radius   : 2.5px;
  background-image: linear-gradient(to top, #f04e23 94%, #ff7f41 -5%);
  flex-shrink     : 0;
}

.container-3 .sub-text {
  margin-left: 12px;
  color      : #777e90;
}

.card-detail {
  flex-direction: column;
}

.card-detail .tt {
  font-weight: 700;
  font-size  : 16px;
  line-height: 21px;
  color      : #FFFFFF;
  margin-top   : 20px;
  margin-bottom: 10px;
}

.brower-list {
  margin-bottom: 18px;
  margin-top: 13px;
}

.brower-list .item {
  width       : 27px;
  height      : 27px;
  margin-right: 27px;
}

.brower-list .item img {
  width: 100%;
}

.card-text-list {
  display: block;
}

.card-text-list .text {
  font-weight  : 400;
  font-size    : 14px;
  line-height  : 1.4;
  color        : #B9C5EB;
  margin-bottom: 10px;
}

.card-text-list .text.top {
  width: 196px
}

.card-text-list .text2 {
  font-size    : 16px;
  color        : #fff;
  margin-top   : 20px;
  font-weight  : bold;
  margin-bottom: 4px;
}

.download-info {
  float : right;
  /* height: 135px; */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.download-info .img {
  width           : 90px;
  height          : 90px;
  background-image: url(../img/app_download_bg.png);
}

.download-info .txt {
  font-size  : 12px;
  line-height: 16px;
  font-weight: bold;
  color: #FFFFFF;
  padding: 6px 0;
}

.download-info button {
  width: 104px;
  height: 36px;
  background-color: #F94E23;
  color           : #fff;
  border-radius   : 50px;
  border: navajowhite;
}

/* css/main_h5.css */