@charset "UTF-8";

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;
  width                : inherit;
  flex-direction       : column;
  letter-spacing       : 1px;
  background-size      : cover;
  background-repeat    : no-repeat;
  align-items          : center;
  background-image     : url(../img/web_bg.jpg);
  background-position  : top center;
  background-attachment: fixed;
}

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

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

.left,
.right {
  width: 975px;
}

.left {
  margin-right: 36px;
}

.card {
  box-shadow      : 0 0 10px 0 rgba(0, 0, 0, 0.04);
  background-color: #fff;
  border-radius   : 20px;
  width           : 100%;
  background      : linear-gradient(180deg, #152035 0%, rgb(21 32 53 / 30%) 62.43%, rgb(21 53 40 / 30%) 100%);
  border-radius   : 70px;
  backdrop-filter : blur(10px);
}

:root {
  --swiper-theme-color: #ff7f41 !important;
}

/* 第一行 */
.container-1 {
  margin-top     : 50px;
  justify-content: flex-start;
  width          : calc(100% - 80px);
  margin-bottom  : 150px;
}

.container-1 .left .swiper {
  width         : 447px;
  height        : 650px;
  padding-bottom: 30px;
}

.container-1 .left .swiper .swiper-pagination {
  display: block;
}

.container-1 .left .swiper .swiper-pagination-bullet {
  background: var(--swiper-theme-color);
  opacity   : 0.1;
}

.container-1 .left .swiper .swiper-pagination-bullet-active {
  opacity: 1 !important;
}

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

.container-1 .right .logo {
  width: 278px;
}

.container-1 .right .title {
  margin-top : 36px;
  height     : 50px;
  align-items: center;
  font-weight: 700;
  font-size  : 32px;
  line-height: 42px;
  color      : #FFFFFF;
}

.container-1 .right .desc {
  height     : 24px;
  font-size  : 20px;
  line-height: 26px;
  color      : #97A1BF;
}

.container-1 .right .card {
  margin-top        : 34px;
  flex              : 1;
  display           : grid;
  padding           : 54px 78px;
  grid-row          : 6;
  grid-template-rows: 6;
  row-gap           : 24px;
  position          : relative;
}

.container-1 .right .card .weblist {
  border-radius   : 4px;
  background-color: #0B1426;
  height          : 57px;
  align-items     : center;
  padding         : 0 0 0 20px;
  color           : #fff;
  margin-bottom   : 24px;
}

.container-1 .right .card .weblist .link {
  font-size      : 20px;
  flex           : 1;
  color          : #fff;
  text-decoration: none;
}

.container-1 .right .card .weblist .version {
  width       : 40px;
  margin-right: 10px;
  display     : none;
}

.container-1 .right .card .weblist .network {
  margin-right: 11px;
  width       : 26px;
}

.container-1 .right .card .weblist .sec_green {
  min-width   : 40px;
  margin-right: 32px;
  font-size   : 20px;
}

.container-1 .right .card .weblist .sec_green+a {
  font-size       : 20px;
  display         : flex;
  text-decoration : none;
  color           : #fff;
  min-width       : 111px;
  height          : 56px;
  align-items     : center;
  justify-content : center;
  background-color: #ff592c;
  border-radius   : 0 4px 4px 0;
  margin-left     : 10px;
}

.container-2 {
  margin-top: 38px;
}

.container-2 .card {
  height: 130px;
}

.container-2 .left {
  padding: 11px 0 12px 26px;
}

.container-2 .left #qrcode {
  width : 107px;
  height: 107px;
  cursor: pointer;
}

.container-2 .left .download-info {
  margin-left    : 11px;
  flex-direction : column;
  justify-content: center;
  margin-right   : 69px;
}

.container-2 .left .download-info .text {
  font-weight  : bold;
  font-size    : 16px;
  margin-bottom: 16px;
}

.container-2 .left .download-info .sub-text {
  color    : #777e90;
  font-size: 12px;
}

.container-2 .left .contact {
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  color          : #777e90;
  font-weight    : bold;
}

.container-2 .left .contact .phone {
  height       : 44px;
  font-size    : 31px;
  margin-bottom: 10px;
}

.container-2 .left .contact .info {
  font-weight: 16px;
}

.container-2 .right {
  padding       : 20px 0 20px 24px;
  flex-direction: column;
}

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

.container-2 .right .list {
  padding-left: 26px;
  padding-top : 22px;
  align-items : center;
}

.container-2 .right .list .item {
  align-items : center;
  margin-right: 40px;
  cursor      : pointer;
}

.container-2 .right .list .item img {
  margin-right: 6px;
}

.container-2 .right .list .item span {
  font-size  : 20px;
  font-weight: bold;
  color      : #777e90;
}

.container-3 {
  width         : 1200px;
  margin-top    : 36px;
  flex-direction: column;
  padding       : 40px;
  margin-bottom : 66px;
}

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

.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%);
}

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

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

.card-detail .weblist-wrap {
  flex-direction: column;
  height        : calc(81px * 6);
  overflow      : hidden;
}

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

.card-detail .list {}

.card-detail .list .item {
  width       : 50px;
  height      : 50px;
  margin-right: 50px;
}

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

.card-text-list {
  flex-direction: column;
  width         : 663px;
}

.card-text-list .text {
  font-weight: 400;
  font-size  : 14px;
  line-height: 180%;
  color      : #B9C5EB;
}

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

.qrcode-wrap {
  position        : absolute;
  right           : 17px;
  bottom          : 250px;
  width           : 268px;
  height          : 187px;
  background-image: url(../img/app_download_bg.png);
  cursor          : pointer;
}

.qrcode-wrap #qrcode {
  width   : 99px;
  height  : 99px;
  position: absolute;
  right   : 77px;
  top     : 44px;
}

.qrcode-wrap .txt {
  font-weight: 700;
  font-size  : 16px;
  line-height: 21px;
  color      : #fff;
  position   : absolute;
  bottom     : -14px;
  left       : 54%;
  transform  : translateX(-50%);
  width      : 140px;
}