@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;
  align-items          : center;
  background-image     : url(../img/web_bg.png);
  background-color     : #fafafa;
  background-position  : right center;
  background-attachment: fixed;
  position             : relative;
  background-size      : auto 100%;
  background-repeat    : no-repeat;
}

.kv {
  position : fixed;
  right    : 0;
  bottom   : 0;
  max-width: 750px;
  z-index  : -1;
}

@media(max-width: 1680px) {
  .kv {
    max-width: 40%;
  }
}

.kv img {
  max-width : 100%;
  max-height: 100%;
}

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 {
  width          : 100%;
  border-radius  : 16px;
  background-color: #fff;
}

: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      : #333;
}

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

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

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

.container-1 .right .card .weblist .link {
  font-size: 20px;
  flex     : 1;
}

.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 {
  width   : 59px;
  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: #3390FF;
  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        : #333;
  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      : #333;
}

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

.qrcode-wrap {
  position           : absolute;
  right              : 17px;
  bottom             : 250px;
  width              : 215px;
  height             : 158px;
  background-image   : url(../img/app_download_bg.png);
  background-repeat  : no-repeat;
  background-position: center center;
}

.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      : #333333;
  position   : absolute;
  bottom     : -24px;
  left       : 23px;
}