@charset "UTF-8";

  .w1520 {
      width: 15.2rem;
      margin: 0 auto;
      position: relative;
      font-size: 0;
      max-width: 100%;
  }

  @media (max-width: 1540px) {
      .w1520 {
          width: 90%;
      }
  }

  @media (max-width: 800px) {
      .w1520 {
          width: 94%;
      }
  }

  :root {
      --themes: #009bde;
  }

  header {
      width: 100%;
      position: fixed;
      top: 0;
      z-index: 20;
      background-color: #fff;
      transition: all ease 0.5s;
      box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.1);
  }

  header .hop {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
  }

  header .lopm {
      width: auto;
      display: inline-block;
      vertical-align: middle;
  }

  header .lopm .logo {
      display: inline-block;
      vertical-align: middle;
      width: 2.41rem;
  }

  header .lopm .logo a,
  header .lopm .logo img {
      width: 100%;
      display: block;
  }

  header .lopm .logo img:first-child {
      display: block;
  }

  header .lopm .logo img:last-child {
      display: none;
  }

  header .rav {
      display: inline-block;
      vertical-align: middle;
      width: 2.4rem;
      font-size: 0;
      position: relative;
  }

  header .rav:after {
      content: ' ';
      position: absolute;
      width: 1px;
      background-color: #eee;
      left: -0.3rem;
      top: 0;
      z-index: 2;
      height: 100%;
      display: none;
  }

  header .rav .atn {
      display: inline-block;
      vertical-align: middle;
  }

  header .rav .atn a {
      display: inline-block;
      vertical-align: middle;
      line-height: 1rem;
      color: #111;
      padding-right: 0.3rem;
  }

  header .rav .atn a:hover {
      color: var(--themes);
  }

  header .rav .langs {
      display: inline-block;
      vertical-align: middle;
      font-size: 0;
      width: auto;
  }

  header .rav .langs .lan {
      display: inline-block;
      vertical-align: middle;
      color: #111;
      line-height: 1.5;
      font-weight: bold;
  }

  header .rav .langs .lan .lx {
      display: inline-block;
      vertical-align: middle;
      color: #111;
      margin: 0 0.1rem;
  }

  header .rav .langs .lan:nth-child(2n) .lx {
      display: none;
  }

  header .rav .langs .lan.on {
      color: var(--themes);
  }

  header .rav .menu {
      display: none;
  }

  header .rav .search {
      display: inline-block;
      vertical-align: middle;
      width: auto;
      text-align: center;
      cursor: pointer;
      position: relative;
      margin-left: 0.35rem;
      width: 0.2rem;
      height: 1rem;
  }

  header .rav .search .sc {
      display: inline-block;
      vertical-align: middle;
      width: 0.2rem;
      min-width: 16px;
      min-height: 16px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 3;
  }

  header .rav .search .sc img {
      width: 100%;
      display: block;
  }

  header .rav .search .sc img:first-child {
      display: block;
  }

  header .rav .search .sc img:last-child {
      display: none;
  }

  header .rav .sechom {
      position: absolute;
      z-index: 3;
      right: 0;
      width: 4rem;
      background-color: #fff;
      box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.09);
      padding: 0.1rem;
      top: 100%;
      display: none;
  }

  header .rav .sechom form {
      width: 100%;
      display: block;
      font-size: 0;
  }

  header .rav .sechom .input {
      display: inline-block;
      vertical-align: middle;
      width: calc(100% - 2.4em - 0.2rem);
      border: solid 1px #e5e5e5;
      margin-right: 0.2rem;
  }

  header .rav .sechom .input .int {
      width: 100%;
      display: block;
      background-color: #fff;
      line-height: 2.4;
      height: 2.4em;
      color: #111;
      padding: 0 0.1rem;
      border: none;
      background-color: #fff;
  }

  header .rav .sechom .stn {
      display: inline-block;
      vertical-align: middle;
      width: 2.2em;
      height: 2.2em;
      border-radius: 50%;
      background-color: var(--themes);
      position: relative;
  }

  header .rav .sechom .stn img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 22px;
      height: 21px;
      width: 0.22rem;
      height: 0.21rem;
      display: block;
      border-radius: 50%;
      cursor: pointer;
      z-index: 1;
      filter: grayscale(100%) brightness(400%);
  }

  header .rav .sechom .stn input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 50%;
      cursor: pointer;
      z-index: 3;
      opacity: 0;
  }

  header .rav .languages {
      width: auto;
      display: inline-block;
      vertical-align: middle;
      font-size: 0;
      margin: 0 0.1rem;
      text-align: left;
      margin-right: 0rem;
  }

  header .rav .languages .lauges {
      width: 100%;
      display: inline-block;
      vertical-align: middle;
      position: relative;
  }

  header .rav .languages .lauges .lashow {
      width: 100%;
      color: #333;
      position: relative;
      cursor: pointer;
      font-size: 0;
      padding-right: 12px;
  }

  header .rav .languages .lauges .lashow .ac {
      display: inline-block;
      vertical-align: middle;
      width: 0.2rem;
      height: 0.2rem;
      min-width: 16px;
      min-height: 16px;
      margin-right: 0.1rem;
      display: none;
  }

  header .rav .languages .lauges .lashow .ac img {
      width: 100%;
      display: block;
  }

  header .rav .languages .lauges .lashow .am {
      color: #333;
      line-height: 0.8rem;
      display: inline-block;
      vertical-align: middle;
      width: auto;
  }

  header .rav .languages .lauges .lashow:after {
      content: ' ';
      position: absolute;
      right: 0rem;
      top: calc(49% + 0.015rem);
      transform: translateY(-50%);
      background-image: url("/static/home/images/x.png");
      width: 9px;
      height: 6px;
      background-size: 100%;
  }

  header .rav .languages .lauges .lashow:hover .am {
      color: var(--themes);
  }

  header .rav .languages .lauges .language {
      position: absolute;
      z-index: 10;
      top: 100%;
      width: 100%;
      display: none;
      width: 60px;
      width: 1rem;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 0 0 0.1rem 0.1rem;
      overflow: hidden;
  }

  header .rav .languages .lauges .language .latem {
      width: 100%;
  }

  header .rav .languages .lauges .language .latem a {
      width: 100%;
      display: block;
      color: #333;
      padding: 0 0.1rem;
      line-height: 3;
      text-align: center;
      position: relative;
      background: #efefef;
      overflow: hidden;
  }

  header .rav .languages .lauges .language .latem a span {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      z-index: 2;
  }

  header .rav .languages .lauges .language .latem a:after {
      content: "";
      position: absolute;
      width: 140%;
      height: 100%;
      left: -10%;
      top: 0;
      z-index: -1;
      background: #fff;
      z-index: 1;
  }

  header .rav .languages .lauges .language .latem a:hover {
      color: #fff;
  }

  header .rav .languages .lauges .language .latem a:hover span {
      color: #fff;
  }

  header .rav .languages .lauges .language .latem a:hover:after {
      background-color: var(--themes);
  }

  header .rav .languages .lauges .language .latem:last-child {
      border-radius: 0 0 0.1rem 0.1rem;
      overflow: hidden;
  }

  header nav {
      display: inline-block;
      vertical-align: middle;
      flex: 1;
      text-align: center;
  }

  header nav .natem {
      width: auto;
      display: inline-block;
      vertical-align: middle;
      position: relative;
      text-align: center;
      font-size: 0;
  }

  header.white nav .natem {
      display: none;
  }

  header nav .natem .nas {
      width: auto;
      display: inline-block;
      position: relative;
      margin: 0 0.25rem;
  }

  header nav .natem .nas a {
      display: inline-block;
      line-height: 1rem;
      color: #333;
      position: relative;
  }

  header nav .natem .nas:after {
      content: ' ';
      position: absolute;
      left: 50%;
      bottom: 0rem;
      transform: translateX(-50%);
      opacity: 0;
      width: 100%;
      height: 0.03rem;
      transition: all ease 0.5s;
      background-color: var(--themes);
  }

  header nav .natem .navuls {
      width: 2.2rem;
      width: 1.8rem;
      position: absolute;
      z-index: 101;
      left: calc(50%);
      top: 100%;
      transform: translateX(-50%);
      background-color: white;
      display: none;
      overflow: hidden;
  }

  header nav .natem .navuls ul {
      width: 100%;
  }

  header nav .natem .navuls ul li {
      width: 100%;
      position: relative;
  }

  header nav .natem .navuls ul li .njm {
      width: 100%;
      font-size: 0;
      background-color: rgba(255, 255, 255, 0.5);
  }

  header nav .natem .navuls ul li .ns {
      width: 100%;
      display: inline-block;
      vertical-align: middle;
      line-height: 3;
      color: #222;
      text-align: left;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding: 0 0.1rem;
      position: relative;
      text-align: center;
      background-color: rgba(255, 255, 255, 0.5);
  }

  header nav .natem .navuls ul li .theul {
      width: 100%;
      background-color: #fff;
      display: none;
  }

  header nav .natem .navuls ul li .theul li {
      width: 100%;
      font-size: 0;
  }

  header nav .natem .navuls ul li .theul li .xn {
      display: inline-block;
      vertical-align: middle;
      color: #333;
      line-height: 2.5;
      padding: 0 0.2rem;
  }

  header nav .natem .navuls ul li .theul li .xn:hover {
      color: #333;
  }

  header nav .natem .navuls ul li:hover .ns {
      background-color: var(--themes);
      color: #fff;
  }

  header nav .natem .navuls ul li.has-the:after {
      content: "+";
      display: inline-block;
      width: 36px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      position: absolute;
      background: none;
      right: 0;
      left: auto;
      transform: translateX(0);
      top: 0.05rem;
      font-size: 20px;
      color: #333;
      border: none;
      display: none;
  }

  header nav .natem .navuls ul li.has-the.show:after {
      content: "-";
  }

  header nav .natem.on .nas a {
      color: var(--themes);
      font-weight: bold;
  }

  header nav .natem:hover .nas a {
      color: var(--themes);
      font-weight: bold;
  }

  header.white {
      background-color: transparent;
      box-shadow: none;
  }

  header.white .lopm .logo img:first-child {
      display: none;
  }

  header.white .lopm .logo img:last-child {
      display: block;
  }

  header.white nav {
      display: inline-block;
      vertical-align: middle;
      flex: 1;
      text-align: center;
  }

  header.white .rav:after {
      display: none;
  }

  header.white .rav .atn a {
      color: #fff;
  }

  header.white .rav .langs .lan {
      color: #fff;
  }

  header.white .rav .langs .lan .lx {
      color: #fff;
  }

  header.white .rav .search .sc img:first-child {
      display: none;
  }

  header.white .rav .search .sc img:last-child {
      display: block;
  }

  @media (max-width: 1260px) {
      header .rav {
          width: auto;
      }
  }

  @media (max-width: 800px) {
      header nav {
          width: 100%;
          position: fixed;
          right: 0;
          top: calc(0.9rem);
          left: auto;
          height: calc(100vh - 0.9rem);
          background-color: #fff;
          margin-right: 0;
          overflow: auto;
          z-index: 500;
          transition: transform .3s;
          padding: 0rem 0.2rem;
          display: block;
          text-align: left;
          display: none;
          border-top: solid 1px #e5e5e5;
      }

      header nav .natem {
          display: inline-block;
          vertical-align: middle;
          position: relative;
          width: auto;
          width: 100%;
          padding: 0.1rem 0;
          opacity: 0;
          transform: translate(-10px, -30px);
          transition: all .8s ease;
      }

      header.white nav .natem {
          display: inline-block;
      }

      header nav .natem .nas {
          width: auto;
          display: inline-block;
          text-align: left;
          width: 100%;
          margin: 0;
      }

      header nav .natem .nas a {
          width: auto;
          display: inline-block;
          vertical-align: middle;
          line-height: 2.5;
          color: #333;
          font-weight: bold;
          font-family: 'Alibaba-PuHuiTi-Bold';
          padding: 0 0.3rem;
          position: relative;
      }

      header nav .natem .nas .ik {
          display: none !important;
      }

      header nav .natem .nas a:hover {
          color: var(--themes);
          background-color: transparent;
      }

      header nav .natem .navuls {
          width: 100%;
          position: relative;
          z-index: 101;
          left: 0%;
          top: 0%;
          transform: translateX(0%);
          background: #fff;
          box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.09);
          display: none;
          text-align: left;
      }

      header nav .natem .navuls ul {
          width: 100%;
          padding: 0.1rem 0.2rem;
      }

      header nav .natem .navuls ul li {
          width: 100%;
          display: block;
          position: relative;
          margin-bottom: 0;
      }

      header nav .natem .navuls ul li .ns {
          width: auto;
          display: inline-block;
          vertical-align: middle;
          line-height: 3;
          color: #333;
          text-align: left !important;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          padding: 0 0.2rem;
          background: #fff;
          position: relative;
      }

      header nav .natem .navuls ul li .ns:hover {
          color: var(--themes);
      }

      header nav .natem .navuls ul li+li {
          border-top: solid 1px #eee;
      }

      header nav .natem .navuls ul li:hover .ns {
          background-color: transparent;
          color: var(--themes);
      }

      header nav .natem .navuls ul li.has-the:after {
          display: block;
      }

      header nav .natem:before {
          display: none !important;
      }

      header nav .natem .prosubnav {
          display: none;
      }

      header nav .natem.on .nas:after {
          display: none;
      }

      header nav .natem.has-nav .nas .xs {
          display: none;
      }

      header nav .natem.has-nav:after {
          content: "+";
          display: inline-block;
          width: 36px;
          height: 36px;
          line-height: 36px;
          text-align: center;
          position: absolute;
          background: none;
          right: 0;
          left: auto;
          transform: translateX(0);
          top: 0.05rem;
          font-size: 20px;
          color: #333;
          border: none;
      }

      header nav .natem.has-nav.show:after {
          content: "-";
      }

      header nav .natem.animate {
          opacity: 1;
          transform: translate(0, 0);
      }

      header .rav {
          flex: 1;
          text-align: right;
          border-left: none;
      }

      header .rav .sechom {
          width: 100vw;
          position: fixed;
          left: 50%;
          right: auto;
          transform: translateX(-50%);
      }

      header .rav .menu {
          display: inline-block;
          vertical-align: middle;
          width: 24px;
          height: 24px;
          margin-left: 0.1rem;
          cursor: pointer;
          position: relative;
      }

      header .rav .menu img {
          width: 100%;
          height: 100%;
          display: block;
      }

      header .rav .menu .clk {
          width: 100%;
          height: 100%;
          text-align: center;
          color: #333;
          font-size: 20px;
          line-height: 24px;
          text-align: center;
          position: absolute;
          z-index: 3;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          display: none;
      }

      header .rav .menu img:first-child {
          display: none;
      }

      header .rav .menu img:last-child {
          display: block;
      }

      header.menu-state .rav .menu img {
          opacity: 0;
      }

      header.white nav {
          display: none;
      }

      header.white .rav .menu .clk {
          color: #fff;
      }

      header.white .rav .menu img:first-child {
          display: block;
      }

      header.white .rav .menu img:last-child {
          display: none;
      }
  }

  footer {
      width: 100%;
      background-color: #515151;
      padding: 0.8rem 0;
  }

  footer .ftop {
      width: 100%;
  }

  footer .fop {
      width: 100%;
      font-size: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-bottom: 0.6rem;
  }

  footer .fop .fit {
      width: 100%;
      font-size: 0;
      margin-bottom: 0.2rem;
  }

  footer .fop .fit a {
      display: inline-block;
      vertical-align: middle;
      color: #fff;
      line-height: 1.4;
      font-weight: bold;
      transition: all ease 0.5s;
      padding: 0.06rem 0;
  }

  footer .fop .fit a:hover {
      color: var(--themes);
  }

  footer .fop .fpl {
      display: inline-block;
      vertical-align: middle;
      width: calc(900 / 1520 * 100%);
  }

  footer .fop .fpl .flist {
      display: inline-block;
      vertical-align: top;
      width: calc(180 / 900 * 100%);
      padding-right: 0.2rem;
      text-align: left;
  }

  footer .fop .fpl .flist .ful {
      width: 100%;
      padding-right: 0.2rem;
  }

  footer .fop .fpl .flist .ful a {
      width: 100%;
      display: inline-block;
      vertical-align: top;
      color: rgba(255, 255, 255, 0.5);
      transition: all ease 0.5s;
      line-height: 2;
      line-height: 1.5;
      padding: 0.05rem 0;
  }

  footer .fop .fpl .flist .ful a:hover {
      color: #fff;
  }

  footer .fop .fpl .flist .ful div {
      width: 100%;
      display: inline-block;
      vertical-align: middle;
      color: rgba(255, 255, 255, 0.5);
      line-height: 2;
      transition: all ease 0.5s;
  }

  footer .fop .fpr {
      display: inline-block;
      vertical-align: middle;
      width: calc(500 / 1520 * 100%);
      font-size: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
  }

  footer .fop .fpr .prl {
      display: inline-block;
      vertical-align: middle;
  }

  footer .fop .fpr .prl .pul {
      width: 100%;
  }

  footer .fop .fpr .prl .pul .pli {
      width: 100%;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.5);
  }

  footer .fop .fpr .prl .pul .pli+.pli {
      margin-top: 0.08rem;
  }

  footer .fop .fpr .prl .pul .um {
      display: inline-block;
      color: var(--themes);
      font-weight: bold;
  }

  footer .fop .fpr .prr {
      display: inline-block;
      vertical-align: middle;
  }

  footer .fop .fpr .prr .codem {
      display: inline-block;
      vertical-align: middle;
      width: auto;
      text-align: center;
  }

  footer .fop .fpr .prr .codem .am {
      display: block;
      width: 1.3rem;
      margin: 0 auto 0.1rem;
      min-width: 100px;
  }

  footer .fop .fpr .prr .codem .am img {
      width: 100%;
      display: block;
  }

  footer .fop .fpr .prr .codem .em {
      width: 100%;
      text-align: center;
      color: #fff;
      line-height: 1.5;
  }

  footer .fbot {
      width: 100%;
      font-size: 0;
  }

  footer .fob {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      padding: 0.28rem 0;
      border-top: solid 1px rgba(255, 255, 255, 0.1);
  }

  footer .fob .fm {
      display: inline-block;
      vertical-align: middle;
      color: rgba(255, 255, 255, 0.3);
      line-height: 1.5;
  }

  footer .fob .share {
      display: inline-block;
      vertical-align: middle;
  }

  footer .fob .share .am {
      display: inline-block;
      vertical-align: middle;
      width: 0.22rem;
      height: 0.22rem;
      min-width: 18px;
      min-height: 18px;
      position: relative;
      margin: 0 0.1rem;
      opacity: 0.5;
      transition: all ease 0.5s;
  }

  footer .fob .share .am a,
  footer .fob .share .am img {
      width: 100%;
      display: block;
  }

  footer .fob .share .am .code {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: calc(100% + 0.1rem);
      width: 1.4rem;
      height: 1.4rem;
      border-radius: 0.05rem;
      background-color: #fff;
      padding: 0.06rem;
      display: none;
  }

  footer .fob .share .am:hover {
      opacity: 1;
  }

  footer .fob .share .am:hover .code {
      display: block;
  }

  @media (max-width: 800px) {
      footer {
          padding: 0.2rem 0;
      }

      footer .fop {
          padding-bottom: 0.2rem;
      }

      footer .fop .fpl {
          width: 100%;
          margin-bottom: 0.3rem;
      }

      footer .fop .fpl .flist {
          width: 100%;
          border-bottom: solid 1px rgba(255, 255, 255, 0.15);
          position: relative;
      }

      footer .fop .fpl .flist .fit {
          width: 100%;
          margin-bottom: 0;
          padding: 0.3rem 0;
      }

      footer .fop .fpl .flist .lx {
          display: none;
      }

      footer .fop .fpl .flist .ful {
          width: 100%;
          font-size: 0;
          padding-bottom: 0.15rem;
          display: none;
      }

      footer .fop .fpl .flist .ful a {
          line-height: 2;
      }

      footer .fop .fpl .flist.has-ful:after {
          content: " ";
          display: inline-block;
          width: 12px;
          height: 7px;
          background-image: url("/static/home/images/x1.png");
          background-position: center;
          background-size: 100% 100%;
          text-align: center;
          position: absolute;
          right: 0.2rem;
          left: auto;
          transform: translateX(0) rotate(0deg);
          top: 0.5rem;
          color: #333;
          border: none;
          transition: all ease 0.5s;
      }

      footer .fop .fpl .flist.has-ful.show:after {
          content: " ";
          transform: translateX(0) rotate(180deg);
      }

      footer .fop .fpr {
          width: 100%;
      }
  }

  .banner {
      width: 100%;
      position: relative;
  }

  .banner .swiper-slide {
      width: 100%;
      display: block;
      position: relative;
  }

  .banner .swiper-slide .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .banner .swiper-slide .imgs .img {
      width: 100%;
      height: 100vh;
  }

  .banner .swiper-slide .box {
      position: absolute;
      left: calc(200 / 1920 * 100%);
      z-index: 4;
      top: calc(50% + 0.5rem);
      transform: translateY(-50%);
  }

  .banner .swiper-slide .box .bit {
      width: 100%;
      color: #fff;
      font-weight: bold;
      line-height: 1.3;
      opacity: 0;
      transform: translate3d(35%, 0, 0);
      transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s;
  }

  .banner .swiper-slide .box .bit p {
      color: #fff;
      line-height: 1.3;
  }

  .banner .swiper-slide .box .sinp {
      width: 100%;
      color: #fff;
      line-height: 1.5;
      margin: 0.3rem 0 0.55rem;
      opacity: 0;
      transform: translate3d(35%, 0, 0);
      transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s;
  }

  .banner .swiper-slide .box .sinp p {
      color: #fff;
      line-height: 1.5;
  }

  .banner .swiper-slide .box .more {
      width: 100%;
      font-size: 0;
      opacity: 0;
      transform: translate3d(35%, 0, 0);
      transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s;
  }

  .banner .swiper-slide .box .more a {
      display: inline-block;
      vertical-align: middle;
      color: rgba(255, 255, 255, 0.3);
      font-weight: bold;
      line-height: 1.5;
      transition: all ease 0.5s;
  }

  .banner .swiper-slide .box .more a:hover {
      color: #fff;
  }

  .banner .swiper-slide-active .box .bit,
  .banner .swiper-slide-active .box .sinp,
  .banner .swiper-slide-active .box .more {
      opacity: 1;
      transform: translate3d(0, 0, 0);
  }

  .banner .swiper-pagination {
      position: absolute;
      width: 100%;
      left: 0;
      right: 0;
      text-align: center;
      bottom: 0.5rem;
  }

  .banner .swiper-pagination-bullet {
      display: inline-block;
      vertical-align: middle;
      width: 0.12rem;
      height: 0.12rem;
      border-radius: 50%;
      margin-left: 0.2rem;
      background-color: rgba(255, 255, 255, 0.3);
      opacity: 1;
  }

  .banner .swiper-pagination-bullet-active {
      background-color: #fff;
  }

  .banner .bannav {
      position: absolute;
      right: calc(200 / 1920 * 100%);
      z-index: 5;
      top: calc(42% + 0.5rem);
      transform: translateY(-50%);
      width: 2.4rem;
      border: solid 1px #eee;
      border-radius: 0.1rem;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      padding: 0.15rem 0;
      opacity: 0;
      transition: all ease 1s;
  }

  .banner .bannav .nitem {
      width: 100%;
      font-size: 0;
      padding: 0.2rem 0;
  }

  .banner .bannav .nitem a {
      display: inline-block;
      vertical-align: middle;
      width: auto;
      position: relative;
      color: #fff;
      line-height: 3;
  }

  .banner .bannav .nitem a:after {
      content: ' ';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      bottom: 0;
      transition: all ease 0.5s;
      height: 0.02rem;
      border-radius: 0.01rem;
      background-color: #fff;
  }

  .banner .bannav .nitem a:hover:after {
      width: 100%;
  }

  .banner .videoc {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: block;
      z-index: 4;
      background-color: rgba(0, 0, 0, 0.05);
      opacity: 1;
      transition: all ease 0.5s;
      z-index: 5;
  }

  .banner .videoc .vom {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
  }

  .banner:hover .bannav {
      opacity: 1;
  }

  @media (max-width: 1540px) {
      .banner .bannav {
          right: 5%;
      }
  }

  @media (max-width: 800px) {
      .banner .swiper-slide .imgs .img {
          height: 60vh;
      }
  }

  .modular {
      width: 100%;
  }

  .modular .netop {
      width: 100%;
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
  }

  .modular .netop .nel {
      display: inline-block;
      vertical-align: middle;
  }

  .modular .netop .nel .cnt {
      width: 100%;
      color: #222;
      font-weight: bold;
  }

  .modular .netop .nel .emt {
      width: 100%;
      color: #666;
      font-weight: bold;
      line-height: 1.5;
  }

  .modular .netop .ner {
      display: inline-block;
      vertical-align: middle;
  }

  .modular .netop .ner .more {
      display: inline-block;
      vertical-align: middle;
      width: auto;
  }

  .modular .netop .ner .more a {
      display: inline-block;
      vertical-align: middle;
      background-color: var(--themes);
      padding: 0 0.26rem;
      color: #fff;
      line-height: 3.2;
      border-radius: 1.6em;
      transition: all ease 0.5s;
  }

  .modular .netop .ner .more a span {
      display: inline-block;
      vertical-align: middle;
      width: 0.32rem;
      height: 0.32rem;
      position: relative;
      top: -0.02rem;
      border-radius: 50%;
      margin-left: 0.45rem;
      background-color: rgba(255, 255, 255, 0.2);
  }

  .modular .netop .ner .more a span img {
      width: 100%;
      display: block;
  }

  .modular .netop .ner .more a:hover {
      transform: scale(1.05);
  }

  .modular .netop .ner .ninp {
      display: inline-block;
      vertical-align: top;
      width: 7.5rem;
      max-width: 100%;
      color: #444;
      line-height: 1.5;
  }

  .modular .netop .ner .ninp p {
      color: #444;
      line-height: 1.5;
  }

  .modular .mitop {
      width: 100%;
      margin-bottom: 0.45rem;
  }

  .modular .mitop .mit {
      width: 100%;
      color: #222;
      font-weight: bold;
      line-height: 1.5;
      text-align: center;
  }

  .modular .mitop .mip {
      width: 100%;
      color: #666;
      line-height: 1.6;
      text-align: center;
      margin-top: 0.15rem;
  }

  .modular .mitop .mip p {
      color: #666;
      line-height: 1.6;
  }

  #fp-nav ul li {
      margin: 10px auto;
  }

  #fp-nav ul li a {
      width: 100%;
      height: 100%;
      position: relative;
      display: block;
  }

  #fp-nav ul li a span {
      width: 10px;
      height: 10px;
      display: block;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.2);
      position: absolute;
      left: 50%;
      top: 50%;
      margin: 0;
      transform: translate(-50%, -50%);
  }

  #fp-nav ul li a.active span {
      width: 14px;
      height: 14px;
      margin: 0;
      background-color: var(--themes);
  }

  #fp-nav ul li:hover a span {
      margin: 0 !important;
  }

  @media (max-width: 800px) {
      #fp-nav {
          display: none;
          opacity: 0;
          z-index: -999;
      }
  }

  .newtem {
      width: 100%;
      padding: 0.5rem 0;
  }

  .newtem .netpm {
      width: 100%;
      font-size: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
  }

  .newtem .netpm .ntl {
      display: inline-block;
      vertical-align: middle;
      width: calc(730 / 1520 * 100%);
  }

  .newtem .netpm .ntl a {
      width: 100%;
      display: block;
  }

  .newtem .netpm .ntl .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .newtem .netpm .ntl .imgs .img {
      width: 100%;
      padding-top: 68.49%;
      transition: all ease 0.5s;
  }

  .newtem .netpm .ntl .nom {
      width: 100%;
      font-size: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      padding: 0.3rem 0;
      border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  }

  .newtem .netpm .ntl .nom .nl {
      display: inline-block;
      vertical-align: middle;
      flex: 1;
      font-weight: bold;
      color: #111;
      line-height: 1.5;
  }

  .newtem .netpm .ntl .nom .time {
      display: inline-block;
      vertical-align: middle;
      color: #999;
      line-height: 1.5;
  }

  .newtem .netpm .ntl .nom .time span {
      display: inline-block;
      vertical-align: middle;
      width: 16px;
      height: 16px;
  }

  .newtem .netpm .ntl .nom .time span img {
      width: 100%;
      display: block;
  }

  .newtem .netpm .ntl:hover .imgs .img {
      transform: scale(1.1);
  }

  .newtem .netpm .ntl:hover .nom .nl {
      color: var(--themes);
  }

  .newtem .netpm .ntr {
      display: inline-block;
      vertical-align: middle;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      width: calc(730 / 1520 * 100%);
  }

  .newtem .netpm .ntr .ntrlis {
      width: 100%;
      font-size: 0;
  }

  .newtem .netpm .ntr .ntrlis .ntrm {
      display: inline-block;
      vertical-align: top;
      width: calc(350 / 730 * 100%);
      margin-right: calc(29 / 730 * 100%);
  }

  .newtem .netpm .ntr .ntrlis .ntrm a {
      width: 100%;
      display: block;
  }

  .newtem .netpm .ntr .ntrlis .ntrm .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .newtem .netpm .ntr .ntrlis .ntrm .imgs .img {
      width: 100%;
      padding-top: 68.57%;
      transition: all ease 0.5s;
  }

  .newtem .netpm .ntr .ntrlis .ntrm .imgs .time {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 4;
      padding: 0.2rem;
      color: #fff;
      line-height: 1.5;
  }

  .newtem .netpm .ntr .ntrlis .ntrm .imgs .time span {
      display: inline-block;
      vertical-align: middle;
      width: 16px;
      margin-right: 0.1rem;
  }

  .newtem .netpm .ntr .ntrlis .ntrm .imgs .time span img {
      width: 100%;
      display: block;
  }

  .newtem .netpm .ntr .ntrlis .ntrm .rom {
      width: 100%;
      padding: 0.22rem 0;
      color: #111;
      line-height: 1.5;
  }

  .newtem .netpm .ntr .ntrlis .ntrm:nth-child(2n) {
      margin-right: 0;
  }

  .newtem .netpm .ntr .ntrlis .ntrm:hover .imgs .img {
      transform: scale(1.1);
  }

  .newtem .netpm .ntr .ntrlis .ntrm:hover .rom {
      color: var(--themes);
  }

  .newtem .netpm .ntr .ntblis {
      width: 100%;
  }

  .newtem .netpm .ntr .ntblis .nli {
      width: 100%;
      padding: 0.3rem 0;
      border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  }

  .newtem .netpm .ntr .ntblis .nli a {
      width: 100%;
      display: flex;
      align-items: center;
  }

  .newtem .netpm .ntr .ntblis .nli .name {
      display: inline-block;
      vertical-align: middle;
      color: #111;
      line-height: 1.5;
      flex: 1;
  }

  .newtem .netpm .ntr .ntblis .nli .time {
      display: inline-block;
      vertical-align: middle;
      color: #999;
      line-height: 1.5;
  }

  .newtem .netpm .ntr .ntblis .nli .time span {
      display: inline-block;
      vertical-align: middle;
      width: 16px;
      height: 16px;
  }

  .newtem .netpm .ntr .ntblis .nli .time span img {
      width: 100%;
      display: block;
  }

  .newtem .netpm .ntr .ntblis .nli:first-child {
      border-top: solid 1px rgba(0, 0, 0, 0.1);
  }

  .newtem .netpm .ntr .ntblis .nli:hover .name {
      color: var(--themes);
  }

  .histoys {
      width: 100%;
      padding: 1rem 0 0;
      position: relative;
      z-index: 3;
  }

  .histoys .histoy {
      width: 100%;
      position: relative;
  }

  .histoys .histoy .swiper-container {
      padding: 0.5rem 0;
  }

  .histoys .histoy .swiper-slide {
      width: 100%;
      font-size: 0;
      position: relative;
      top: 0.4rem;
      transition: all ease 0.5s;
  }

  .histoys .histoy .swiper-slide .lix {
      display: inline-block;
      vertical-align: top;
      width: 18px;
      margin-right: 0.24rem;
      transition: all ease 0.5s;
  }

  .histoys .histoy .swiper-slide .rem {
      display: inline-block;
      vertical-align: top;
      width: calc(100% - 0.24rem - 18px);
  }

  .histoys .histoy .swiper-slide .rem .rmg {
      width: 100%;
      margin-bottom: 0.2rem;
  }

  .histoys .histoy .swiper-slide .rem .rmg .mg {
      width: 100%;
      display: block;
  }

  .histoys .histoy .swiper-slide .rem .year {
      width: 100%;
      color: var(--themes);
      font-weight: bold;
      line-height: 1.5;
  }

  .histoys .histoy .swiper-slide .rem .sinp {
      width: 100%;
      margin-top: 0.2rem;
      color: var(--themes);
      line-height: 1.5;
  }

  .histoys .histoy .swiper-slide .rem .sinp p {
      color: var(--themes);
      line-height: 1.5;
  }

  .histoys .histoy .swiper-slide-active {
      position: relative;
      top: 0.4rem;
  }

  .histoys .histoy .swiper-slide-active .lix {
      background-image: url("/static/home/images/l1.png");
      background-size: 100%;
      height: 2.76rem;
      background-repeat: no-repeat;
  }

  .histoys .histoy .swiper-slide-active+.swiper-slide {
      position: relative;
      top: 0.1rem;
  }

  .histoys .histoy .swiper-slide-active+.swiper-slide .lix {
      background-image: url("/static/home/images/l2.png");
      background-size: 100%;
      height: 3rem;
      background-repeat: no-repeat;
  }

  .histoys .histoy .swiper-slide-active+.swiper-slide+.swiper-slide {
      position: relative;
      top: -0.2rem;
  }

  .histoys .histoy .swiper-slide-active+.swiper-slide+.swiper-slide .lix {
      background-image: url("/static/home/images/l3.png");
      background-size: 100%;
      height: 3.3rem;
      background-repeat: no-repeat;
  }

  .histoys .histoy .swiper-slide-active+.swiper-slide+.swiper-slide+.swiper-slide {
      position: relative;
      top: -0.5rem;
  }

  .histoys .histoy .swiper-slide-active+.swiper-slide+.swiper-slide+.swiper-slide .lix {
      background-image: url("/static/home/images/l4.png");
      background-size: 100%;
      height: 3.74rem;
      background-repeat: no-repeat;
  }

  .histoys .histoy .btn {
      position: absolute;
      top: 50%;
      z-index: 5;
      transform: translateY(-50%);
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      cursor: pointer;
      background-color: rgba(255, 255, 255, 0.2);
      transition: all ease 0.5s;
  }

  .histoys .histoy .btn img {
      width: 100%;
      display: block;
  }

  .histoys .histoy .btn img:first-child {
      display: block;
  }

  .histoys .histoy .btn img:last-child {
      display: none;
  }

  .histoys .histoy .btn:hover {
      background-color: #fff;
  }

  .histoys .histoy .btn:hover img:first-child {
      display: none;
  }

  .histoys .histoy .btn:hover img:last-child {
      display: block;
  }

  .histoys .histoy .bl {
      left: -0.5rem;
  }

  .histoys .histoy .br {
      right: -0.5rem;
  }

  @media (max-width: 1600px) {
      .histoys .histoy .bl {
          left: 0.75rem;
      }

      .histoys .histoy .br {
          right: 0.75rem;
      }
  }

  @media (max-width: 800px) {
      .histoys .histoy .bl {
          left: 0.95rem;
      }

      .histoys .histoy .br {
          right: 0.95rem;
      }
  }

  .areas {
      width: 100%;
      padding: 0.5rem 0;
  }

  .areas .areaper {
      width: 100%;
      position: relative;
  }

  .areas .areaper .swiper-container {
      padding-bottom: 0.4rem;
  }

  .areas .areaper .swiper-slide {
      width: calc(368 / 1920 * 100%);
      display: inline-block;
      vertical-align: top;
      transition: all ease 0.5s;
      position: relative;
      overflow: hidden;
      margin-right: calc(19 / 1920 * 100%);
  }

  .areas .areaper .swiper-slide a {
      width: 100%;
      display: block;
  }

  .areas .areaper .swiper-slide .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .areas .areaper .swiper-slide .imgs .img {
      width: 100%;
      height: 5.4rem;
      transition: all ease 0.5s;
  }

  .areas .areaper .swiper-slide .psm {
      position: absolute;
      bottom: calc((-1.5em) - 1.26rem);
      left: 0;
      background-color: rgba(19, 162, 231, 0.85);
      border-radius: 0 0.2rem 0 0;
      transition: all ease 0.5s;
      width: 100%;
      padding: 0.2rem;
      z-index: 3;
  }

  .areas .areaper .swiper-slide .psm .pit {
      width: 100%;
      color: #fff;
      text-align: center;
      line-height: 1.5;
  }

  .areas .areaper .swiper-slide .psm .psmlist {
      width: 100%;
      font-size: 0;
      margin-top: 0.2rem;
  }

  .areas .areaper .swiper-slide .psm .psmlist .pivm {
      display: inline-block;
      vertical-align: middle;
      /* width: calc(250 / 600 * 100%); */
      /* margin-right: calc(10 / 600 * 100%); */
      width: 100%;
      margin-bottom: 0.1rem;
      border: solid 1px rgba(255, 255, 255, 0.1);
      border-radius: 0.1rem;
      text-align: center;
      color: #fff;
      padding: 0 0.2rem;
      line-height: 3.2;
  }

  .areas .areaper .swiper-slide.on {
      width: calc(756 / 1920 * 100%);
  }

  .areas .areaper .swiper-slide.on .psm {
      width: calc(715 / 730 * 100%);
      padding: 0.4rem 0.6rem;
      bottom: 0;
  }

  .areas .areaper .swiper-slide.on .psm .pit {
      text-align: left;
  }

  .areas .areaper .swiper-scrollbar-drag {
      background-color: var(--themes);
  }

  .areas .areaper .btn {
      position: absolute;
      top: 50%;
      z-index: 5;
      transform: translateY(-50%);
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      cursor: pointer;
      background-color: rgba(51, 51, 51, 0.2);
      transition: all ease 0.5s;
  }

  .areas .areaper .btn img {
      width: 100%;
      display: block;
  }

  .areas .areaper .btn img:first-child {
      display: block;
  }

  .areas .areaper .btn img:last-child {
      display: none;
  }

  .areas .areaper .btn:hover {
      background-color: #fff;
  }

  .areas .areaper .btn:hover img:first-child {
      display: none;
  }

  .areas .areaper .btn:hover img:last-child {
      display: block;
  }

  .areas .areaper .bl {
      left: 0.8rem;
  }

  .areas .areaper .br {
      right: 0.8rem;
  }

  @media (max-width: 1600px) {
      .areas .areaper .swiper-slide.on .psm {
          padding: 20px;
      }

      .areas .areaper .bl {
          left: 0.75rem;
      }

      .areas .areaper .br {
          right: 0.75rem;
      }
  }

  @media (max-width: 800px) {
      .areas .areaper .swiper-slide.on .psm {
          padding: 20px;
      }

      .areas .areaper .bl {
          left: 0.95rem;
      }

      .areas .areaper .br {
          right: 0.95rem;
      }
  }

  .briefs {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      height: 100vh;
  }

  .briefs .brl {
      width: calc(1410 / 1920 * 100%);
      display: inline-block;
      vertical-align: middle;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
  }

  .briefs .brl .brtom {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      padding: 0.5rem 1rem 0.5rem calc(200 / 1920 * 100%);
      flex: 5.2;
  }

  .briefs .brl .brtom .betp {
      width: 100%;
      font-size: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
  }

  .briefs .brl .brtom .betp .bpl {
      display: inline-block;
      vertical-align: middle;
      flex: 1;
  }

  .briefs .brl .brtom .betp .bpl .binp {
      width: 100%;
      color: #444;
      text-align: justify;
      line-height: 1.7;
  }

  .briefs .brl .brtom .betp .bpl .binp p {
      color: #444;
      line-height: 1.7;
  }

  .briefs .brl .brtom .betp .bpr {
      display: inline-block;
      vertical-align: middle;
      margin-left: 1rem;
  }

  .briefs .brl .brtom .betp .bpr .more {
      display: inline-block;
      vertical-align: middle;
      width: auto;
  }

  .briefs .brl .brtom .betp .bpr .more a {
      display: inline-block;
      vertical-align: middle;
      background-color: var(--themes);
      padding: 0 0.26rem;
      color: #fff;
      line-height: 3.2;
      border-radius: 1.6em;
      transition: all ease 0.5s;
  }

  .briefs .brl .brtom .betp .bpr .more a span {
      display: inline-block;
      vertical-align: middle;
      width: 0.32rem;
      height: 0.32rem;
      position: relative;
      top: -0.02rem;
      border-radius: 50%;
      margin-left: 0.45rem;
      background-color: rgba(255, 255, 255, 0.2);
  }

  .briefs .brl .brtom .betp .bpr .more a span img {
      width: 100%;
      display: block;
  }

  .briefs .brl .brtom .betp .bpr .more a:hover {
      transform: scale(1.05);
  }

  .briefs .brl .brbom {
      width: 100%;
      padding: 0.5rem 1rem 0.5rem calc(200 / 1920 * 100%);
      flex: 4;
      display: flex;
      /* align-items: center; */
      position: relative;
  }

  .briefs .brl .brbom .brob {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
  }

  .briefs .brl .brbom .brob:after {
      content: ' ';
      z-index: 3;
      position: absolute;
      width: 1px;
      height: 100%;
      left: calc((200 / 1920 * 100%) + 1.3rem);
      background-color: rgba(255, 255, 255, 0.2);
      top: 0;
  }

  .briefs .brl .brbom .brob .bbl {
      display: inline-block;
      vertical-align: middle;
      width: 1.3rem;
      position: relative;
      z-index: 4;
  }

  .briefs .brl .brbom .brob .bbl .bitn {
      width: 100%;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.5;
      padding: 0.08rem 0;
      cursor: pointer;
      position: relative;
  }

  .briefs .brl .brbom .brob .bbl .bitn:after {
      content: ' ';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(50%, -50%);
      z-index: 3;
      width: 0.07rem;
      height: 0.2rem;
      border-radius: 0.035rem;
      background-color: var(--themes);
      opacity: 0;
      transition: all ease 0.5s;
  }

  .briefs .brl .brbom .brob .bbl .bitn.on {
      color: #fff;
      font-weight: bold;
  }

  .briefs .brl .brbom .brob .bbl .bitn.on:after {
      opacity: 1;
  }

  .briefs .brl .brbom .brob .bbr {
      display: inline-block;
      vertical-align: middle;
      width: calc(100% - 1.3rem);
      padding-left: 0.35rem;
      padding-top: 0.08rem;
  }

  .briefs .brl .brbom .brob .bbr .biem {
      width: 100%;
      display: none;
  }

  .briefs .brl .brbom .brob .bbr .biem.on {
      display: block;
  }

  .briefs .brl .brbom .brob .bbr .sinp {
      width: 100%;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.75;
  }

  .briefs .brl .brbom .brob .bbr .sinp p {
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.75;
  }

  .briefs .brr {
      width: calc(510 / 1920 * 100%);
      display: inline-block;
      vertical-align: middle;
      padding: 0.4rem 1rem;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
  }

  .briefs .brr .leftper {
      width: 100%;
      height: 100%;
      display: block;
  }

  

  .briefs .brr .leftper .swiper-slide {
      border-bottom: solid 1px rgba(255, 255, 255, 0.15);
      padding: 0.5rem 0;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      text-align: center;
  }

  .briefs .brr .leftper .swiper-slide .lum {
      width: 100%;
      font-size: 0;
  }

  .briefs .brr .leftper .swiper-slide .lum .xt {
      display: inline-block;
      vertical-align: middle;
      color: #fff;
  }

  .briefs .brr .leftper .swiper-slide .lum .pd {
      display: inline-block;
      vertical-align: middle;
      width: auto;
  }

  .briefs .brr .leftper .swiper-slide .lum .pd .d1,
  .briefs .brr .leftper .swiper-slide .lum .pd .d2 {
      width: 100%;
      color: #fff;
      line-height: 1.5;
  }

  .briefs .brr .leftper .swiper-slide .lum .pd .d1 {
      font-weight: bold;
  }

  .briefs .brr .leftper .swiper-slide .xum {
      width: 100%;
      color: #fff;
      line-height: 1.5;
  }
  @media(min-width: 801px){
    .briefs .brr .leftper .swiper-container {
        height: calc(100% - 0.8rem);
    }
    .briefs .brr .leftper .swiper-slide {
      width: 100% !important;
    }
  }
  @media (max-width: 800px) {
      .briefs {
          height: auto;
      }

      .briefs .brl {
          width: 100%;
      }

      .briefs .brl .brtom {
          padding: 20px;
      }

      .briefs .brl .brtom .betp .bpl {
          width: 100%;
      }

      .briefs .brl .brtom .betp .bpr {
          width: 100%;
          margin-left: 0;
          margin-top: 0.3rem;
      }

      .briefs .brl .brbom {
          padding: 20px;
      }

      .briefs .brl .brbom .brob:after {
          left: calc(20px + 2rem);
      }

      .briefs .brl .brbom .brob .bbl {
          width: 2rem;
      }

      .briefs .brl .brbom .brob .bbr {
          width: calc(100% - 2rem);
      }

      .briefs .brr {
          width: 100%;
          padding: 20px 5px;
      }

      .briefs .brr .leftper .swiper-wrapper{
        align-items: stretch;
      }

      .briefs .brr .leftper .swiper-slide {
        padding: 0.2rem 0;
        border-top: solid 1px rgba(255, 255, 255, 0.15);
        height: auto;
        align-content: flex-start;
      }
  }

  .nancont {
      width: 100%;
      position: relative;
  }

  .nanber {
      width: 100%;
      position: relative;
  }

  .nanber .imgs {
      width: 100%;
      position: relative;
  }

  .nanber .imgs .img {
      width: 100%;
      padding-top: 31.25%;
  }

  .nanber .nox {
      position: absolute;
      z-index: 4;
      left: calc(200 / 1920 * 100%);
      top: 50%;
      transform: translateY(-50%);
      width: 70%;
      z-index: 2;
  }

  .nanber .nox .cm {
      width: 100%;
      color: #fff;
      font-weight: bold;
      line-height: 1.4;
  }

  .nanber .nox .em {
      width: 100%;
      color: #fff;
      font-weight: bold;
      line-height: 1.5;
      margin-top: .0rem;
  }
  

  @media (max-width: 1540px) {
      .nanber .nox {
          left: 5%;
          width: 90%;
      }
  }

  @media (max-width: 800px) {
      .nanber .nox {
          left: 3%;
          width: 94%;
      }
  }

  .crumbs {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 3;
      border-top: solid 1px rgba(255, 255, 255, 0.2);
  }

  .crumbs .column {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
  }

  .crumbs .column .colum {
      width: auto;
      font-size: 0;
      display: inline-block;
      vertical-align: middle;
      text-align: right;
      white-space: nowrap;
  }

  .crumbs .column .colum .home {
      display: inline-block;
      vertical-align: middle;
      width: .2rem;
      height: .2rem;
      min-width: 18px;
      min-height: 18px;
      margin-right: .1rem;
      position: relative;
      top: -0.02rem;
  }

  .crumbs .column .colum .home img {
      width: 100%;
      display: block;
  }

  .crumbs .column .colum .home img:first-child {
      display: block;
  }

  .crumbs .column .colum .home img:last-child {
      display: none;
  }

  .crumbs .column .colum .sm {
      display: inline-block;
      vertical-align: middle;
      color: #fff;
      line-height: .8rem;
  }

  .crumbs .column .colum a {
      display: inline-block;
      vertical-align: middle;
      width: auto;
      color: #fff;
      line-height: .8rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }

  .crumbs .column .colum a span {
      display: inline-block;
      color: #fff;
      line-height: .8rem;
      position: relative;
      margin: 0 .08rem;
  }

  .crumbs .column .colum a span img {
      width: 100%;
      display: block;
  }

  .crumbs .column .colum a:hover {
      color: var(--themes);
  }

  .crumbs .column .colum a:last-child span {
      display: none;
  }

  .crumbs .column .cur {
      display: inline-block;
      vertical-align: middle;
      width: auto;
      text-align: right;
  }

  .crumbs .column .cur .swiper-slide {
      display: inline-block;
      vertical-align: middle;
      width: auto;
  }

  .crumbs .column .cur .swiper-slide a {
      display: inline-block;
      vertical-align: middle;
      width: auto;
      line-height: .8rem;
      color: #fff;
      position: relative;
      padding: 0 0.3rem;
  }

  .crumbs .column .cur .swiper-slide.on a {
      color: #fff;
      background-color: var(--themes);
  }

  .crumbs .column .cuper {
      width: auto;
      display: inline-block;
      vertical-align: middle;
      height: 3.2em;
      position: relative;
  }

  .crumbs .column .cuper .swiper-container {
      height: 10rem;
  }

  .crumbs .column .cuper .swiper-slide {
      display: inline-block;
      vertical-align: middle;
      margin: 0 .15rem;
      width: auto;
      height: 3.2em;
  }

  .crumbs .column .cuper .swiper-slide .coem {
      width: 100%;
      padding: 0 0.15rem;
  }

  .crumbs .column .cuper .swiper-slide .coem .ns {
      display: inline-block;
      vertical-align: middle;
  }

  .crumbs .column .cuper .swiper-slide .coem a {
      display: inline-block;
      vertical-align: middle;
      color: #666;
      line-height: 3.2em;
  }

  .crumbs .column .cuper .swiper-slide .coem .xm {
      display: inline-block;
      vertical-align: middle;
      margin-left: 0.12rem;
      width: 12px;
      transition: all ease 0.5s;
      display: none;
  }

  .crumbs .column .cuper .swiper-slide .coem .xm img {
      width: 100%;
      display: block;
  }

  .crumbs .column .cuper .swiper-slide .coem .xm img:first-child {
      display: block;
  }

  .crumbs .column .cuper .swiper-slide .coem .xm img:last-child {
      display: none;
  }

  .crumbs .column .cuper .swiper-slide .coem.on {
      background-color: var(--themes);
  }

  .crumbs .column .cuper .swiper-slide .coem.on a {
      color: #fff;
  }

  .crumbs .column .cuper .swiper-slide .coem.on .xm {
      transform: rotate(180deg);
  }

  .crumbs .column .cuper .swiper-slide .coem.on .xm img:first-child {
      display: none;
  }

  .crumbs .column .cuper .swiper-slide .coem.on .xm img:last-child {
      display: block;
  }

  .crumbs .column .cuper .swiper-slide .nspul {
      width: auto;
      position: absolute;
      z-index: 101;
      left: 50%;
      top: 100%;
      min-width: 100%;
      transform: translateX(-50%);
      background-color: var(--themes);
      display: none;
      box-shadow: -6px -8px 28px 4px rgba(0, 53, 97, 0.11);
  }

  .crumbs .column .cuper .swiper-slide .nspul .pli {
      width: 100%;
      text-align: center;
      border-top: solid 1px rgba(255, 255, 255, 0.1);
  }

  .crumbs .column .cuper .swiper-slide .nspul .pli a {
      width: 100%;
      display: block;
      color: rgba(255, 255, 255, 0.5);
      line-height: 3;
      transition: all ease 0.5s;
      padding: 0 0.1rem;
      white-space: nowrap;
  }

  .crumbs .column .cuper .swiper-slide .nspul .pli a:hover {
      color: #fff;
  }

  .crumbs .column .cuper .swiper-slide.has-the .coem .xm {
      display: inline-block;
  }

  @media (max-width: 800px) {
      .crumbs {
          position: relative;
          border: none;
      }

      .crumbs .column .cur .swiper-slide a {
          color: #333;
      }

      .crumbs .column .colum {
          text-align: right;
      }

      .crumbs .column .colum a {
          color: #333;
      }

      .crumbs .column .colum a span {
          color: #333;
      }

      .crumbs .column .colum .home img:first-child {
          display: none;
      }

      .crumbs .column .colum .home img:last-child {
          display: block;
      }
  }

  .newcont {
      width: 100%;
      padding: 1rem 0 0.5rem;
  }

  .newcont .newlist {
      width: 100%;
  }

  .newcont .newlist .necom {
      width: 100%;
      padding: 0.25rem 0;
      border-bottom: solid 1px #dfedf7;
      font-size: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      flex-direction: row-reverse;
  }

  .newcont .newlist .necom .imgs {
      display: inline-block;
      vertical-align: middle;
      width: calc(435 / 1520 * 100%);
      position: relative;
      overflow: hidden;
  }

  .newcont .newlist .necom .imgs a {
      width: 100%;
      display: block;
  }

  .newcont .newlist .necom .imgs .img {
      width: 100%;
      padding-top: 56.32%;
      transition: all ease 0.5s;
  }

  .newcont .newlist .necom .imgs:hover .img {
      transform: scale(1.1);
  }

  .newcont .newlist .necom .cems {
      display: inline-block;
      vertical-align: middle;
      width: calc(1000 / 1520 * 100%);
  }

  .newcont .newlist .necom .cems .time {
      display: inline-block;
      vertical-align: middle;
      color: #999;
      line-height: 1.5;
  }

  .newcont .newlist .necom .cems .time span {
      display: inline-block;
      vertical-align: middle;
      width: 16px;
      height: 16px;
  }

  .newcont .newlist .necom .cems .time span img {
      width: 100%;
      display: block;
  }

  .newcont .newlist .necom .cems .xt {
      width: 100%;
      display: block;
      color: #111;
      font-weight: bold;
      line-height: 1.6;
      margin: 0.1rem 0;
  }

  .newcont .newlist .necom .cems .xt:hover {
      color: var(--themes);
  }

  .newcont .newlist .necom .cems .xm {
      width: 100%;
      color: #999;
      line-height: 1.7;
      margin: 0.15rem 0;
  }

  .newcont .newlist .necom .cems .more {
      width: 100%;
      margin-top: 0.1rem;
  }

  .newcont .newlist .necom .cems .more a {
      display: inline-block;
      vertical-align: middle;
      color: var(--themes);
      line-height: 1.5;
      transition: all ease 0.5s;
  }

  .newcont .newlist .necom .cems .more a span {
      display: inline-block;
      vertical-align: middle;
      width: 5px;
      position: relative;
      top: -0.01 rem;
      margin-left: 0.05rem;
  }

  .newcont .newlist .necom .cems .more a span img {
      width: 100%;
      display: block;
  }

  .newcont .newlist .necom .cems .more a:hover {
      transform: scale(1.1);
  }

  .newcont .newpers {
      width: 100%;
      font-size: 0;
      position: relative;
      margin-bottom: 0.2rem;
  }

  .newcont .newpers .swiper-container {
      padding-bottom: 0.4rem;
  }

  .newcont .newpers .swiper-slide {
      width: 100%;
      background-color: #eff9ff;
      font-size: 0;
  }

  .newcont .newpers .swiper-slide .imgs {
      display: inline-block;
      vertical-align: middle;
      width: calc(665 / 1520 * 100%);
      position: relative;
      overflow: hidden;
  }

  .newcont .newpers .swiper-slide .imgs a {
      width: 100%;
      display: block;
  }

  .newcont .newpers .swiper-slide .imgs .img {
      width: 100%;
      padding-top: 56.32%;
      transition: all ease 0.5s;
  }

  .newcont .newpers .swiper-slide .imgs:hover .img {
      transform: scale(1.1);
  }

  .newcont .newpers .swiper-slide .eom {
      display: inline-block;
      vertical-align: middle;
      width: calc(855 / 1520 * 100%);
      padding: 0.4rem 0.9rem;
  }

  .newcont .newpers .swiper-slide .eom .time {
      display: inline-block;
      vertical-align: middle;
      color: #999;
      line-height: 1.5;
  }

  .newcont .newpers .swiper-slide .eom .time span {
      display: inline-block;
      vertical-align: middle;
      width: 16px;
      height: 16px;
  }

  .newcont .newpers .swiper-slide .eom .time span img {
      width: 100%;
      display: block;
  }

  .newcont .newpers .swiper-slide .eom .xt {
      width: 100%;
      display: block;
      color: #111;
      font-weight: bold;
      line-height: 1.6;
      margin: 0.1rem 0;
  }

  .newcont .newpers .swiper-slide .eom .xt:hover {
      color: var(--themes);
  }

  .newcont .newpers .swiper-slide .eom .xm {
      width: 100%;
      color: #999;
      line-height: 1.7;
      margin: 0.15rem 0;
  }

  .newcont .newpers .swiper-slide .eom .more {
      display: inline-block;
      vertical-align: middle;
      width: 100%;
      margin-top: 0.25rem;
  }

  .newcont .newpers .swiper-slide .eom .more a {
      display: inline-block;
      vertical-align: middle;
      background-color: var(--themes);
      padding: 0 0.2rem;
      color: #fff;
      line-height: 2.8;
      border-radius: 1.4em;
      transition: all ease 0.5s;
  }

  .newcont .newpers .swiper-slide .eom .more a span {
      display: inline-block;
      vertical-align: middle;
      width: 0.32rem;
      height: 0.32rem;
      position: relative;
      top: -0.02rem;
      border-radius: 50%;
      margin-left: 0.35rem;
      background-color: rgba(255, 255, 255, 0.2);
  }

  .newcont .newpers .swiper-slide .eom .more a span img {
      width: 100%;
      display: block;
  }

  .newcont .newpers .swiper-slide .eom .more a:hover {
      transform: scale(1.05);
  }

  .newcont .newpers .swiper-pagination {
      bottom: 0;
  }

  .newcont .newpers .swiper-pagination-bullet {
      background-color: #999;
      opacity: 1;
  }

  .newcont .newpers .swiper-pagination-bullet-active {
      background-color: var(--themes);
      width: 12px;
      height: 12px;
  }

  @media (max-width: 800px) {
      .newcont {
          padding: 0.5rem 0;
      }

      .newcont .newlist {
          width: 100%;
      }
  }

  .pages {
      width: 100%;
      padding: 0.4rem 0;
      font-size: 0;
      text-align: center;
  }

  .pages .page {
      display: inline-block;
      vertical-align: middle;
      width: 0.48rem;
      height: 0.48rem;
      line-height: calc(0.48rem - 1px);
      text-align: center;
      color: #666;
      background-color: #fff;
      margin: 0 0.07rem;
      border-radius: 0.225rem;
      box-sizing: border-box;
  }

  .pages .page.ltn {
      background-image: url("/static/home/images/b5.png");
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;
  }

  .pages .page.rtn {
      background-image: url("/static/home/images/b6.png");
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;
  }

  .pages .page.on {
      background-color: var(--themes);
      background-position: center;
      background-repeat: no-repeat;
      color: #fff;
      box-shadow: 0px 10px 30px 0px rgba(0, 65, 62, 0.1);
  }

  .pages .page.ltn:hover {
      background-color: #fff;
      background-image: url("/static/home/images/b3.png");
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;
  }

  .pages .page.on.ltn {
      background-color: #fff;
      background-image: url("/static/home/images/b3.png");
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;
  }

  .pages .page.on.rtn {
      background-color: #fff;
      background-image: url("/static/home/images/b4.png");
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;
  }

  .pages .page.rtn:hover {
      background-color: #fff;
      background-image: url("/static/home/images/b4.png");
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;
  }

  .pages .page.auto {
      width: auto;
      padding: 0 0.3rem;
      border-radius: 0.225rem;
  }

  .pages .page:hover {
      background-color: var(--themes);
      background-position: center;
      background-repeat: no-repeat;
      color: #fff;
      box-shadow: 0px 10px 30px 0px rgba(0, 65, 62, 0.1);
  }

  @media (max-width: 900px) {
      .pages .page {
          width: 0.8rem;
          height: 0.8rem;
          line-height: 0.8rem;
          border-radius: 0.4rem;
      }

      .pages .page.auto {
          border-radius: 0.4rem;
      }
  }

  .details {
      width: 100%;
      padding: 1rem 0;
      position: relative;
      z-index: 4;
  }

  .details .detail {
      width: 100%;
      position: relative;
      font-size: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
  }

  .details .detail .del {
      display: inline-block;
      vertical-align: top;
      width: calc(1140 / 1520 * 100%);
  }

  .details .detail .del .dit {
      width: 100%;
      color: #000;
      line-height: 1.3;
      font-weight: bold;
      margin-bottom: 0.15rem;
  }

  .details .detail .del .dim {
      width: 100%;
      font-size: 0;
      padding: 0.1rem 0;
  }

  .details .detail .del .dim .pm {
      display: inline-block;
      vertical-align: middle;
      color: #999;
      line-height: 1.5;
      margin-right: 0.24rem;
  }

  .details .detail .del .dim .share {
      display: inline-block;
      vertical-align: middle;
      width: auto;
  }

  .details .detail .del .dim .share .sm {
      display: inline-block;
      vertical-align: middle;
      color: #999;
      line-height: 1.5;
  }

  .details .detail .del .dim .share .am {
      display: inline-block;
      vertical-align: middle;
      color: #999;
      line-height: 1.5;
      position: relative;
      width: 0.2rem;
      height: 0.2rem;
      min-width: 18px;
      min-height: 18px;
      margin-right: 0.12rem;
  }

  .details .detail .del .dim .share .am a {
      width: 100%;
      display: block;
  }

  .details .detail .del .dim .share .am .comd {
      position: absolute;
      left: 50%;
      top: 100%;
      transform: translateX(-50%);
      width: 1.3rem;
      padding: 0.08rem;
      background-color: #fff;
      border-radius: 0.05rem;
      display: none;
  }

  .details .detail .del .dim .share .am .comd img {
      width: 100%;
      display: block;
  }

  .details .detail .del .dim .share .am:hover .comd {
      display: block;
  }

  .details .detail .del .dinp {
      width: 100%;
      padding: 0.3rem 0;
      margin: 0.25rem 0;
      border-top: solid 1px #e1eef8;
      border-bottom: solid 1px #e1eef8;
      color: #666;
      line-height: 1.75;
  }

  .details .detail .del .dinp p {
      color: #666;
      word-break: break-word;
      line-height: 1.75;
  }

  .details .detail .del .dot {
      width: 100%;
      font-size: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
  }

  .details .detail .del .dot .dol {
      display: inline-block;
      vertical-align: middle;
      flex: 1;
      padding-right: 0.3rem;
  }

  .details .detail .del .dot .dol .dtn {
      width: 100%;
      display: block;
      color: #333;
      line-height: 1.8;
      padding: 0.04rem 0;
  }

  .details .detail .del .dot .dol .dtn:hover {
      color: var(--themes);
  }

  .details .detail .del .dot .dor {
      display: inline-block;
      vertical-align: middle;
  }

  .details .detail .del .dot .back {
      display: inline-block;
      vertical-align: middle;
      background-color: var(--themes);
      color: #fff;
      line-height: 2.8;
      border-radius: 1.4em;
      padding: 0 0.24rem;
  }

  .details .detail .del .dot .back span {
      display: inline-block;
      vertical-align: middle;
      margin-left: 0.1rem;
      width: 0.18rem;
      margin-left: 0.25rem;
  }

  .details .detail .del .dot .back span img {
      width: 100%;
      display: block;
  }

  .details .detail .der {
      display: inline-block;
      vertical-align: top;
      width: calc(285 / 1520 * 100%);
  }

  .details .detail .der .rop {
      width: 100%;
      font-size: 0;
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.2rem;
  }

  .details .detail .der .rop .rt {
      display: inline-block;
      vertical-align: middle;
      color: #000;
      font-weight: bold;
      line-height: 1.5;
  }

  .details .detail .der .rop .em {
      display: inline-block;
      vertical-align: middle;
      color: #999;
      line-height: 1.5;
  }

  .details .detail .der .rop .em:hover {
      color: var(--themes);
  }

  .details .detail .der .derlist {
      width: 100%;
  }

  .details .detail .der .derlist .drem {
      width: 100%;
      font-size: 0;
      margin-bottom: 0.3rem;
  }

  .details .detail .der .derlist .drem a {
      width: 100%;
      display: block;
  }

  .details .detail .der .derlist .drem .imgs {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      overflow: hidden;
      width: 100%;
  }

  .details .detail .der .derlist .drem .imgs .img {
      width: 100%;
      padding-top: 66.66%;
      transition: all ease 0.5s;
  }

  .details .detail .der .derlist .drem .rod {
      display: inline-block;
      vertical-align: middle;
      width: 100%;
      padding: 0.2rem;
      background-color: #eff9ff;
      border-top: solid 2px var(--themes);
  }

  .details .detail .der .derlist .drem .rod .rm {
      width: 100%;
      color: #222;
      line-height: 1.5;
      max-height: 3em;
  }

  .details .detail .der .derlist .drem .rod .time {
      width: 100%;
      color: #999;
      line-height: 1.5;
      margin-top: 0.1rem;
  }

  .details .detail .der .derlist .drem:hover .imgs .img {
      transform: scale(1.1);
  }

  .details .detail .der .derlist .drem:hover .rod .rm {
      color: var(--themes);
  }

  .details .detail .der.fixed {
      width: 2.85rem;
      position: fixed;
      right: 50%;
      margin-right: -7.6rem;
      top: 1rem;
  }

  .details .detail .der.bot {
      position: absolute;
      right: 0;
      bottom: 0;
      margin-right: 0;
      top: auto;
      width: 2.85rem;
  }

  @media (max-width: 1420px) {
      .details .detail .der.fixed {
          width: 2.7rem;
          margin-right: -45%;
      }

      .details .detail .der.bot {
          position: absolute;
          right: 0;
          bottom: 0;
          margin-right: 0;
          top: auto;
          width: 2.7rem;
      }
  }

  @media (max-width: 800px) {
      .details {
          padding: 0.5rem 0;
      }
  }

  .casesd {
      width: 100%;
      padding: 1rem 0 1rem;
  }

  .casesd .casedlis {
      width: 100%;
      font-size: 0;
  }

  .casesd .casedlis .casem {
      width: 100%;
      font-size: 0;
      background-color: #fff;
  }

  .casesd .casedlis .casem a {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
  }

  .casesd .casedlis .casem .imgs {
      display: inline-block;
      vertical-align: middle;
      width: calc(456/ 1520 * 100%);
      position: relative;
      overflow: hidden;
  }

  .casesd .casedlis .casem .imgs .img {
      width: 100%;
      padding-top: 75%;
      transition: all ease 0.5s;
  }

  .casesd .casedlis .casem .oem {
      display: inline-block;
      vertical-align: middle;
      width: calc(1054 / 1520 * 100%);
      padding: 0.5rem 1rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
  }

  .casesd .casedlis .casem .oem .eml {
      display: inline-block;
      vertical-align: middle;
      flex: 1;
  }

  .casesd .casedlis .casem .oem .eml .eit {
      width: 100%;
      color: #111;
      line-height: 1.5;
      padding-left: 0.12rem;
      position: relative;
      font-weight: bold;
  }

  .casesd .casedlis .casem .oem .eml .eit:after {
      content: ' ';
      position: absolute;
      z-index: 2;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0.04rem;
      height: 0.2rem;
      background-color: var(--themes);
  }

  .casesd .casedlis .casem .oem .eml .eim {
      width: 100%;
      color: #999;
      line-height: 1.5;
      margin-top: 0.2rem;
  }

  .casesd .casedlis .casem .oem .eml .eim p {
      color: #999;
      line-height: 1.5;
  }

  .casesd .casedlis .casem .oem .emm {
      display: inline-block;
      vertical-align: middle;
      margin: 0 0.8rem;
      width: 1px;
      background-color: rgba(188, 215, 231, 0.5);
      height: 1rem;
      transform: rotate(30deg);
  }

  .casesd .casedlis .casem .oem .emr {
      display: inline-block;
      vertical-align: middle;
      width: auto;
  }

  .casesd .casedlis .casem .oem .emr .more {
      display: inline-block;
      vertical-align: middle;
      color: var(--themes);
      line-height: 1.5;
  }

  .casesd .casedlis .casem .oem .emr .more span {
      display: inline-block;
      vertical-align: middle;
      width: 5px;
      margin-left: 0.05rem;
      position: relative;
      top: -0.01rem;
  }

  .casesd .casedlis .casem .oem .emr .more span img {
      width: 100%;
      display: block;
  }

  .casesd .casedlis .casem:hover {
      background-color: #eff9ff;
  }

  .casesd .casedlis .casem:hover .imgs .img {
      transform: scale(1.1);
  }

  .casesd .casedlis .casem+.casem {
      margin-top: 0.3rem;
  }

  @media (max-width: 800px) {
      .casesd {
          padding: 0.5rem 0;
      }
  }

  .cetails {
      width: 100%;
      padding: 1rem 0;
  }

  .cetails .cetalper {
      width: 100%;
      position: relative;
  }

  .cetails .cetalper .swiper-slide {
      width: 100%;
  }

  .cetails .cetalper .swiper-slide a {
      width: 100%;
      display: block;
  }

  .cetails .cetalper .swiper-slide .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .cetails .cetalper .swiper-slide .imgs .img {
      width: 100%;
      padding-top: 61.90%;
      transition: all ease 0.5s;
  }

  .cetails .cetalper .swiper-slide .sim {
      width: 100%;
      text-align: center;
      color: #222;
      line-height: 1.6;
      margin-top: 0.2rem;
  }

  .cetails .cetalper .swiper-slide:hover .imgs .img {
      transform: scale(1.1);
  }

  .cetails .cetalper .swiper-slide:hover .sim {
      color: var(--themes);
  }

  .cetails .cetalper .btn {
      position: absolute;
      top: 50%;
      z-index: 5;
      transform: translateY(-50%);
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      cursor: pointer;
      background-color: rgba(0, 155, 222, 0.2);
      transition: all ease 0.5s;
  }

  .cetails .cetalper .btn img {
      width: 100%;
      display: block;
  }

  .cetails .cetalper .btn img:first-child {
      display: block;
  }

  .cetails .cetalper .btn img:last-child {
      display: none;
  }

  .cetails .cetalper .btn:hover {
      background-color: var(--themes);
  }

  .cetails .cetalper .btn:hover img:first-child {
      display: none;
  }

  .cetails .cetalper .btn:hover img:last-child {
      display: block;
  }

  .cetails .cetalper .bl {
      left: -0.5rem;
  }

  .cetails .cetalper .br {
      right: -0.5rem;
  }

  @media (max-width: 800px) {
      .cetails .cetalper .bl {
          left: 0rem;
      }

      .cetails .cetalper .br {
          right: 0rem;
      }
  }

  .forms {
      width: 100%;
      padding: 0.9rem 0;
  }

  .forms .form {
      width: 100%;
      font-size: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      flex-direction: row-reverse;
  }

  .forms .form .fol {
      display: inline-block;
      vertical-align: top;
      width: calc(700 / 1520 * 100%);
  }

  .forms .form .fol .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .forms .form .fol .imgs .img {
      width: 100%;
      padding-top: 68.57%;
  }

  .forms .form .for {
      display: inline-block;
      vertical-align: top;
      width: calc(740 / 1520 * 100%);
  }

  .forms .form .for form {
      width: 100%;
      display: block;
  }

  .forms .form .for .input {
      width: 100%;
      display: block;
      background-color: #fff;
      margin-bottom: 10px;
  }

  .forms .form .for .input .int {
      width: 100%;
      display: block;
      padding: 0 0.2rem;
      color: #666;
      line-height: 3;
      height: 3em;
      border: none;
      background-color: transparent;
  }

  .forms .form .for .input.yzm {
      display: flex;
  }

  .forms .form .for .input.yzm .yzm {
      display: inline-block;
      vertical-align: middle;
      height: 3em;
  }

  .forms .form .for .input.yzm .yzm img {
      height: 100%;
      display: block;
  }

  .forms .form .for .input.yzm .int {
      flex: 1;
      display: inline-block;
      vertical-align: middle;
  }

  .forms .form .for .text {
      width: 100%;
      margin-bottom: 10px;
  }

  .forms .form .for .text .area {
      width: 100%;
      border: none;
      padding: 0.2rem;
      line-height: 1.5;
      color: #666;
      background-color: #fff;
  }

  .forms .form .for .sub {
      width: 100%;
      font-size: 0;
      margin-top: 0.3rem;
  }

  .forms .form .for .sub .stn {
      display: inline-block;
      vertical-align: middle;
      background-color: var(--themes);
      color: #fff;
      line-height: 3;
      height: 3em;
      padding: 0 0.7rem;
      cursor: pointer;
      border: none;
      border-radius: 1.5em;
  }

  .contacts {
      width: 100%;
      padding: 0.8rem 0;
  }

  .contacts .cont {
      width: 100%;
      font-size: 0;
      margin-bottom: 0.3rem;
  }

  .contacts .cont .citem {
      display: inline-block;
      vertical-align: middle;
      width: 25%;
      text-align: center;
      padding: 0.2rem 0;
  }

  .contacts .cont .citem .ic {
      display: block;
      width: 0.85rem;
      height: 0.85rem;
      border-radius: 50%;
      background-color: rgba(0, 155, 222, 0.2);
      margin: 0 auto 0.14rem;
  }

  .contacts .cont .citem .ic img {
      width: 100%;
      display: block;
  }

  .contacts .cont .citem .pm {
      width: 100%;
      text-align: center;
      color: #111;
      line-height: 1.5;
  }

  .contacts .cont .citem .codm {
      width: 1.27rem;
      display: block;
      margin: 0 auto 0.2rem;
  }

  .contacts .cont .citem .codm img {
      width: 100%;
      display: block;
  }

  .joins {
      width: 100%;
      padding: 0.8rem 0;
  }

  .joins .livelist {
      width: 100%;
      font-size: 0;
  }

  .joins .livelist .livem {
      display: inline-block;
      vertical-align: top;
      width: calc(487 / 1520 * 100%);
      margin-bottom: 0.3rem;
      margin-right: calc(29 / 1520 * 100%);
      margin-bottom: 0.3rem;
  }

  .joins .livelist .livem a {
      width: 100%;
      display: block;
  }

  .joins .livelist .livem .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .joins .livelist .livem .imgs .img {
      width: 100%;
      padding-top: 75%;
      transition: all ease 0.5s;
  }

  .joins .livelist .livem .vom {
      width: 100%;
      font-size: 0;
      padding: 0.05rem 0;
  }

  .joins .livelist .livem .vom:before {
      content: ' ';
      position: absolute;
      bottom: 0;
      height: 0.02rem;
      width: 100%;
      z-index: 1;
      left: 0;
      background-color: #e5f0f8;
  }

  .joins .livelist .livem .vom:after {
      content: ' ';
      position: absolute;
      bottom: 0;
      height: 0.02rem;
      width: 0%;
      z-index: 3;
      left: 0;
      background-color: var(--themes);
      transition: all ease 0.5s;
  }

  .joins .livelist .livem .vom .em {
      display: inline-block;
      vertical-align: middle;
      width: calc(100% - 5px);
      padding-right: 0.2rem;
      color: #222;
      line-height: 3;
  }

  .joins .livelist .livem .vom .rc {
      display: inline-block;
      vertical-align: middle;
      width: 5px;
  }

  .joins .livelist .livem .vom .rc img {
      width: 100%;
      display: block;
  }

  .joins .livelist .livem:nth-child(3n) {
      margin-right: 0;
  }

  .joins .livelist .livem:hover .imgs .img {
      transform: scale(1.1);
  }

  .joins .livelist .livem:hover .vom .em {
      color: var(--themes);
  }

  .joins .livelist .livem:hover .vom:after {
      width: 100%;
  }

  .joins .more {
      display: inline-block;
      vertical-align: middle;
      width: 100%;
      margin-top: 0.25rem;
      text-align: center;
  }

  .joins .more a {
      display: inline-block;
      vertical-align: middle;
      background-color: var(--themes);
      padding: 0 0.2rem;
      color: #fff;
      line-height: 2.8;
      border-radius: 1.4em;
      transition: all ease 0.5s;
  }

  .joins .more a span {
      display: inline-block;
      vertical-align: middle;
      width: 0.32rem;
      height: 0.32rem;
      position: relative;
      top: -0.02rem;
      border-radius: 50%;
      margin-left: 0.35rem;
      background-color: rgba(255, 255, 255, 0.2);
  }

  .joins .more a span img {
      width: 100%;
      display: block;
  }

  .joins .more a:hover {
      transform: scale(1.05);
  }

  .joins .litem {
      width: 100%;
  }

  .joins .litem+.litem {
      margin-top: 1rem;
  }

  .inlets {
      width: 100%;
      position: relative;
      padding: 0.8rem 0;
  }

  .inlets .inletlis {
      width: 100%;
      font-size: 0;
  }

  .inlets .inletlis .intem {
      display: inline-block;
      vertical-align: top;
      width: calc(750 / 1520 * 100%);
      margin-right: calc(19 / 1520 * 100%);
      margin-bottom: 0.2rem;
      box-shadow: 0px 0px 30px 0px rgba(0, 155, 222, 0.04);
  }

  .inlets .inletlis .intem a {
      width: 100%;
      display: block;
      position: relative;
      top: 0;
      transition: all ease 0.5s;
      background-color: #fff;
      padding: 0.6rem 0.5rem;
  }

  .inlets .inletlis .intem .eml {
      display: inline-block;
      vertical-align: middle;
      width: calc(100% - 100px);
      padding-right: 0.2rem;
  }

  .inlets .inletlis .intem .eml .et {
      width: 100%;
      color: #222;
      line-height: 1.5;
  }

  .inlets .inletlis .intem .eml .ep {
      width: 100%;
      color: #111;
      line-height: 1.5;
      margin-top: 0.1rem;
  }

  .inlets .inletlis .intem .emr {
      display: inline-block;
      vertical-align: middle;
      width: 100px;
  }

  .inlets .inletlis .intem .emr img {
      width: 100%;
      display: block;
  }

  .inlets .inletlis .intem:nth-child(2n) {
      margin-right: 0;
  }

  .inlets .inletlis .intem:hover a {
      top: -0.1rem;
  }

  .devices {
      width: 100%;
      padding: 0.8rem 0;
  }

  .devices .devpers {
      width: 100%;
      font-size: 0;
      text-align: center;
  }

  .devices .devpers .denav {
      display: inline-block;
      vertical-align: middle;
      width: auto;
      background-color: #fff;
      padding: 0.1rem;
      border-radius: calc(1.5em + 0.1rem);
  }

  .devices .devpers .denav .swiper-slide {
      display: inline-block;
      vertical-align: middle;
      width: auto;
      font-size: 0;
  }

  .devices .devpers .denav .swiper-slide a {
      display: inline-block;
      vertical-align: middle;
      line-height: 3;
      padding: 0 0.45rem;
      color: #444;
      border-radius: 1.5em;
  }

  .devices .devpers .denav .swiper-slide.on a {
      background-color: var(--themes);
      color: #fff;
  }

  .devices .devcont {
      width: 100%;
      margin-top: 0.6rem;
  }

  .devices .devcont .deitm {
      width: 100%;
      display: none;
  }

  .devices .devcont .deitm.on {
      display: block;
  }

  .devices .devcont .devlist {
      width: 100%;
      font-size: 0;
  }

  .devices .devcont .devlist .devam {
      display: inline-block;
      vertical-align: top;
      width: calc(487 / 1520 * 100%);
      margin-bottom: 0.3rem;
      margin-right: calc(29 / 1520 * 100%);
      background-color: #eff9ff;
  }

  .devices .devcont .devlist .devam a {
      width: 100%;
      display: block;
      padding: 0.5rem 0.3rem;
  }

  .devices .devcont .devlist .devam .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .devices .devcont .devlist .devam .imgs .img {
      width: 100%;
      padding-top: 61.90%;
      transition: all ease 0.5s;
  }

  .devices .devcont .devlist .devam .vom {
      width: 100%;
      margin-top: 0.2rem;
      text-align: center;
  }

  .devices .devcont .devlist .devam .vom .vt {
      width: 100%;
      color: #111;
      line-height: 1.5;
  }

  .devices .devcont .devlist .devam .vom .vim {
      width: 100%;
      text-align: center;
      color: #999;
      line-height: 1.5;
      height: 3em;
      margin: 0.14rem 0 0.24rem;
  }

  .devices .devcont .devlist .devam .vom .add {
      width: 100%;
      text-align: center;
      line-height: 1.5;
      margin-top: 0.15rem;
      color: rgba(136, 136, 136, 0.4);
  }

  .devices .devcont .devlist .devam:nth-child(3n) {
      margin-right: 0;
  }

  .devices .devcont .devlist .devam:hover {
      background-color: var(--themes);
  }

  .devices .devcont .devlist .devam:hover .imgs .img {
      transform: scale(1.1);
  }

  .devices .devcont .devlist .devam:hover .vom .vt,
  .devices .devcont .devlist .devam:hover .vom .vim {
      color: #fff;
  }

  .devices .devcont .devlist .devam:hover .vom .add {
      color: #fff;
  }

  .tetails {
      width: 100%;
      padding: 0.8rem 0;
  }

  .tetails .tetail {
      width: 100%;
      font-size: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      flex-direction: row-reverse;
  }

  .tetails .tetail .tel {
      display: inline-block;
      vertical-align: middle;
      width: calc(680 / 1520 * 100%);
      background-color: #fff;
  }

  .tetails .tetail .tel .petop {
      width: 100%;
      position: relative;
      border-bottom: solid 1px #eaf6fc;
  }

  .tetails .tetail .tel .petop .swiper-slide {
      width: 100%;
      position: relative;
  }

  .tetails .tetail .tel .petop .swiper-slide .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .tetails .tetail .tel .petop .swiper-slide .imgs .img {
      width: 100%;
      padding-top: 75%;
      transition: all ease 0.5s;
  }

  .tetails .tetail .tel .pebot {
      width: 100%;
      position: relative;
      padding: 0.2rem;
  }

  .tetails .tetail .tel .pebot .swiper-container {
      width: calc(100% - 0.8rem);
      display: block;
      margin: 0 auto;
  }

  .tetails .tetail .tel .pebot .swiper-slide {
      width: 100%;
      position: relative;
      cursor: pointer;
      opacity: 0.5;
      transition: all ease 0.5s;
  }

  .tetails .tetail .tel .pebot .swiper-slide .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .tetails .tetail .tel .pebot .swiper-slide .imgs .img {
      width: 100%;
      padding-top: 68.75%;
      transition: all ease 0.5s;
  }

  .tetails .tetail .tel .pebot .swiper-slide.on {
      opacity: 1;
  }

  .tetails .tetail .tel .pebot .btn {
      position: absolute;
      z-index: 3;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
      opacity: 0.7;
      transition: all ease 0.5s;
      cursor: pointer;
  }

  .tetails .tetail .tel .pebot .btn img {
      width: 100%;
      display: block;
  }

  .tetails .tetail .tel .pebot .btn:hover {
      opacity: 1;
  }

  .tetails .tetail .tel .pebot .bl {
      left: calc(0.4rem + 4px);
  }

  .tetails .tetail .tel .pebot .br {
      right: calc(0.4rem + 4px);
  }

  .tetails .tetail .ter {
      width: calc(760 / 1520 * 100%);
      display: inline-block;
      vertical-align: middle;
  }

  .tetails .tetail .ter .tir {
      width: 100%;
      color: #111;
      font-weight: bold;
      line-height: 1.5;
      margin-bottom: 0.3rem;
  }

  .tetails .tetail .ter .vtem {
      width: 100%;
  }

  .tetails .tetail .ter .vtem .lvrom {
      width: 100%;
  }

  .tetails .tetail .ter .vtem .lvrom .tic {
      width: 100%;
      color: #111;
      line-height: 1.5;
      margin-bottom: 0.25rem;
  }

  .tetails .tetail .ter .vtem .lvrom .tic span {
      display: inline-block;
      vertical-align: middle;
      width: 0.24rem;
      min-width: 20px;
      margin-right: 0.1rem;
  }

  .tetails .tetail .ter .vtem .lvrom .tic span img {
      width: 100%;
      display: block;
  }

  .tetails .tetail .ter .vtem .lvrom .tinp {
      width: 100%;
      color: #666;
      word-break: break-word;
      line-height: 2;
  }

  .tetails .tetail .ter .vtem .lvrom .tinp p {
      color: #666;
      line-height: 2;
  }
  .tetails .tetail .ter .vtem .lvrom .tinp table{
    width: 100%;
  }
  .tetails .tetail .ter .vtem .lvrom .tinp table td{
    padding: 0.14rem;
  }

  .tetails .tetail .ter .vtem .lvrom .liuls {
      width: 100%;
      border: solid 1px #d9e7ef;
  }

  .tetails .tetail .ter .vtem .lvrom .liuls .li {
      width: 100%;
      color: #666;
      line-height: 1.5;
      padding: 0.15rem 0.2rem;
  }

  .tetails .tetail .ter .vtem .lvrom .liuls .li+.li {
      border-top: solid 1px #d9e7ef;
  }

  .tetails .tetail .ter .vtem .lvrom .lvrlisd {
      width: 100%;
      font-size: 0;
  }

  .tetails .tetail .ter .vtem .lvrom .lvrlisd .vrom {
      display: inline-block;
      vertical-align: middle;
      width: 50%;
  }

  .tetails .tetail .ter .vtem .lvrom .lvrlisd .vrom .tr {
      width: 100%;
      display: flex;
      border: solid 1px #d4e2e9;
  }

  .tetails .tetail .ter .vtem .lvrom .lvrlisd .vrom .tr+.tr {
      border-top: none;
  }

  .tetails .tetail .ter .vtem .lvrom .lvrlisd .vrom .td {
      display: inline-block;
      vertical-align: middle;
      width: 50%;
  }

  .tetails .tetail .ter .vtem .lvrom .lvrlisd .vrom .tdm {
      width: 100%;
      color: #666;
      line-height: 1.5;
      padding: 0.1rem;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      text-align: center;
  }

  .tetails .tetail .ter .vtem .lvrom .lvrlisd .vrom .tr.heac {
      background-color: var(--themes);
      border: solid 1px var(--themes);
      border-right: rgba(217, 231, 239, 0.2);
  }

  .tetails .tetail .ter .vtem .lvrom .lvrlisd .vrom .tr.heac .tdm {
      color: #fff;
  }

  .tetails .tetail .ter .vtem .lvrom .lvrlisd .vrom+.vrom .tr {
      border-left: none;
  }

  .tetails .tetail .ter .vtem .lvrom+.lvrom {
      margin-top: 0.35rem;
  }

  .relateds {
      width: 100%;
      padding: 0.8rem 0;
  }

  .relateds .repeers {
      width: 100%;
      font-size: 0;
      position: relative;
  }

  .relateds .repeers .swiper-container {
      padding-bottom: 0.4rem;
  }

  .relateds .repeers .repem {
      display: inline-block;
      vertical-align: top;
      width: calc(360 / 1520 * 100%);
      margin-right: calc(26 / 1520 * 100%);
      border: solid 1px #e8eff4;
      background-color: #fff;
  }

  .relateds .repeers .repem a {
      width: 100%;
      display: block;
      padding: 0.3rem;
  }

  .relateds .repeers .repem .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .relateds .repeers .repem .imgs .img {
      width: 100%;
      padding-top: 75%;
      transition: all ease 0.5s;
  }

  .relateds .repeers .repem .eim {
      width: 100%;
      text-align: center;
      color: #111;
      line-height: 1.7;
      margin-top: 0.2rem;
      height: 3.4em;
  }

  .relateds .repeers .repem:nth-child(4n) {
      margin-right: 0;
  }

  .relateds .repeers .swiper-pagination {
      bottom: 0;
  }

  .relateds .repeers .swiper-pagination-bullet {
      background-color: #cde9fb;
      opacity: 1;
      width: 10px;
      height: 10px;
  }

  .relateds .repeers .swiper-pagination-bullet-active {
      background-color: var(--themes);
  }

  .jionsd {
      width: 100%;
      font-size: 0;
      padding: 0.8rem 0;
  }

  .jionsd .jsond {
      width: 100%;
      font-size: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
  }

  .jionsd .jsond .jsl {
      display: inline-block;
      vertical-align: top;
      width: calc(1140 / 1520 * 100%);
  }

  .jionsd .jsond .jsl .jotop {
      width: 100%;
      position: relative;
      z-index: 2;
      font-size: 0;
      margin-bottom: 0.5rem;
  }

  .jionsd .jsond .jsl .jotop .jol {
      display: inline-block;
      vertical-align: middle;
      width: 100%;
  }

  .jionsd .jsond .jsl .jotop .jol .select {
      font-size: 0;
      display: inline-block;
      vertical-align: middle;
      border: none;
      text-align: left;
      position: relative;
      width: auto;
      margin-right: 0.3rem;
      margin-bottom: 0.1rem;
  }

  .jionsd .jsond .jsl .jotop .jol .select .select-con {
      width: 100%;
      display: inline-block;
      vertical-align: middle;
      position: relative;
      font-size: 0;
  }

  .jionsd .jsond .jsl .jotop .jol .select .select-con .select-value {
      display: inline-block;
      vertical-align: middle;
      width: 100%;
      line-height: 3em;
      height: 3em;
      color: #333;
      cursor: pointer;
      background-color: transparent;
      padding-right: 0.3rem;
  }

  .jionsd .jsond .jsl .jotop .jol .select .select-con select {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 2;
      opacity: 0;
  }

  .jionsd .jsond .jsl .jotop .jol .select .select-con select option {
      color: #666;
      font-size: .16rem;
      line-height: 2.5;
      background: #fff;
  }

  .jionsd .jsond .jsl .jotop .jol .select .select-con .seluls {
      position: absolute;
      left: 0;
      top: 100%;
      min-width: 100%;
      max-height: 360px;
      overflow: auto;
      display: none;
      box-sizing: border-box;
      text-align: left;
      background-color: #fff;
      z-index: 123;
      border-radius: 4px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
      overflow: auto;
      /*滚动条里面小方块*/
      /*滚动条里面轨道*/
  }

  .jionsd .jsond .jsl .jotop .jol .select .select-con .seluls .option {
      width: 100%;
      color: #666;
      line-height: 2.5;
      background: #fff;
      cursor: pointer;
      padding: 0 0.15rem;
  }

  .jionsd .jsond .jsl .jotop .jol .select .select-con .seluls .option:hover {
      background-color: var(--themes);
      color: #fff;
  }

  .jionsd .jsond .jsl .jotop .jol .select .select-con .seluls .option+.option {
      border-top: solid 1px #ddd;
  }

  .jionsd .jsond .jsl .jotop .jol .select .select-con .seluls::-webkit-scrollbar {
      width: 4px;
      height: 4px;
      scrollbar-arrow-color: rgba(0, 0, 0, 0.1);
  }

  .jionsd .jsond .jsl .jotop .jol .select .select-con .seluls::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 10px rgba(0, 155, 222, 0.3);
      background: rgba(0, 155, 222, 0.3);
      scrollbar-arrow-color: rgba(0, 0, 0, 0.1);
  }

  .jionsd .jsond .jsl .jotop .jol .select .select-con .seluls::-webkit-scrollbar-track {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
      background: rgba(0, 0, 0, 0.1);
  }

  .jionsd .jsond .jsl .jotop .jol .select .select-con:after {
      display: inline-block;
      content: "";
      position: absolute;
      right: .1rem;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
      width: 7px;
      height: 4px;
      background-image: url("/static/home/images/xx.png");
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
  }

  .jionsd .jsond .jsl .jotop .jol .wxm {
      display: inline-block;
      vertical-align: middle;
      margin-right: 0.3rem;
      margin-bottom: 0.1rem;
      line-height: 1.5;
      color: #999;
  }

  .jionsd .jsond .jsl .jotop .jol .searchm {
      display: inline-block;
      vertical-align: middle;
      width: 5rem;
      border: solid 1px #e5e5e5;
      overflow: hidden;
      border-radius: 1.6em;
      background-color: #fff;
  }

  .jionsd .jsond .jsl .jotop .jol .searchm .sem {
      width: 100%;
      font-size: 0;
      display: flex;
      padding-left: 0.2rem;
      align-items: center;
  }

  .jionsd .jsond .jsl .jotop .jol .searchm .sem .pic {
      display: inline-block;
      vertical-align: middle;
      width: 0.2rem;
      height: 0.2rem;
      width: 20px;
      height: 20px;
      margin-right: 0.14rem;
  }

  .jionsd .jsond .jsl .jotop .jol .searchm .sem .pic img {
      width: 100%;
      height: 100%;
      display: block;
  }

  .jionsd .jsond .jsl .jotop .jol .searchm .sem .int {
      flex: 1;
      display: inline-block;
      vertical-align: middle;
      height: 3.2em;
      line-height: 3.2;
      border: none;
      background-color: transparent;
  }

  .jionsd .jsond .jsl .jotop .jol .searchm .sem .stn {
      display: inline-block;
      vertical-align: middle;
      width: auto;
  }

  .jionsd .jsond .jsl .jotop .jol .searchm .sem .stn .ins {
      display: inline-block;
      vertical-align: middle;
      width: auto;
      cursor: pointer;
      padding: 0 0.3rem;
      background-color: var(--themes);
      color: #fff;
      line-height: 3.2;
      height: 3.2em;
      border: none;
  }

  .jionsd .jsond .jsl .recrtlis {
      width: 100%;
  }

  .jionsd .jsond .jsl .recrtlis .ril {
      width: 100%;
  }

  .jionsd .jsond .jsl .recrtlis .ril .ritle {
      width: 100%;
      padding: 0.22rem 0;
      cursor: pointer;
      border-bottom: solid 1px #e1eef8;
  }

  .jionsd .jsond .jsl .recrtlis .ril .ritle .rit {
      width: 100%;
      color: #111;
      font-weight: bold;
      line-height: 1.5;
  }

  .jionsd .jsond .jsl .recrtlis .ril .ritle .recom {
      width: 100%;
      margin-top: 0.05rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
  }

  .jionsd .jsond .jsl .recrtlis .ril .ritle .recom .rel {
      display: inline-block;
      vertical-align: middle;
  }

  .jionsd .jsond .jsl .recrtlis .ril .ritle .recom .rel .sm {
      display: inline-block;
      vertical-align: middle;
      color: #999;
      line-height: 1.6;
      margin-right: 0.3rem;
  }

  .jionsd .jsond .jsl .recrtlis .ril .ritle .recom .rer {
      display: inline-block;
      vertical-align: middle;
  }

  .jionsd .jsond .jsl .recrtlis .ril .ritle .recom .rer .time {
      width: 100%;
      color: #999;
      line-height: 1.5;
      margin-top: 0.06rem;
  }

  .jionsd .jsond .jsl .recrtlis .ril .ritle .recom .rer .time span {
      display: inline-block;
      vertical-align: middle;
      width: 16px;
      position: relative;
      top: -0.01rem;
      margin-right: 0.05rem;
  }

  .jionsd .jsond .jsl .recrtlis .ril .ritle .recom .rer .time span img {
      width: 100%;
      display: block;
  }

  .jionsd .jsond .jsl .recrtlis .ril .reconp {
      width: 100%;
      background-color: #eff9ff;
      position: relative;
      padding: 0.5rem;
      display: none;
  }

  .jionsd .jsond .jsl .recrtlis .ril .reconp:after {
      content: ' ';
      position: absolute;
      z-index: 1;
      width: 0;
      height: 0;
      border: solid 0.1rem;
      left: 0.3rem;
      bottom: 100%;
      border-color: transparent transparent #eff9ff transparent;
  }

  .jionsd .jsond .jsl .recrtlis .ril .reconp .rules {
      width: 100%;
      font-size: 0;
  }

  .jionsd .jsond .jsl .recrtlis .ril .reconp .rules .riem {
      width: 46%;
      margin-right: 8%;
      margin-bottom: 0.3rem;
      display: inline-block;
      vertical-align: top;
  }

  .jionsd .jsond .jsl .recrtlis .ril .reconp .rules .riem .rit {
      width: 100%;
      color: #222;
      line-height: 1.5;
      margin-bottom: 0.15rem;
  }

  .jionsd .jsond .jsl .recrtlis .ril .reconp .rules .riem .pul {
      width: 100%;
      color: #666;
      line-height: 1.7;
  }

  .jionsd .jsond .jsl .recrtlis .ril .reconp .rules .riem .pul p {
      color: #666;
      line-height: 1.7;
  }

  .jionsd .jsond .jsl .recrtlis .ril .reconp .rules .riem:nth-child(2n) {
      margin-right: 0;
  }

  .jionsd .jsond .jsl .recrtlis .ril .reconp .remd {
      width: 100%;
      font-size: 0;
  }

  .jionsd .jsond .jsl .recrtlis .ril .reconp .remd a {
      display: inline-block;
      vertical-align: middle;
      background-color: var(--themes);
      color: #fff;
      line-height: 3.2;
      border-radius: 1.6em;
      padding: 0 0.4rem;
      transition: all ease 0.5s;
  }

  .jionsd .jsond .jsl .recrtlis .ril .reconp .remd a span {
      display: inline-block;
      vertical-align: middle;
      width: 0.19rem;
      position: relative;
      top: -0.01rem;
      margin-left: 0.1rem;
  }

  .jionsd .jsond .jsl .recrtlis .ril .reconp .remd a span img {
      width: 100%;
      display: block;
  }

  .jionsd .jsond .jsl .recrtlis .ril .reconp .remd a:hover {
      transform: scale(1.05);
  }

  .jionsd .jsond .jsl .recrtlis .ril:first-child .ritle {
      border-top: solid 1px #e1eef8;
  }

  .jionsd .jsond .jsl .recrtlis .ril.show .ritle {
      border-bottom: solid 1px transparent;
  }

  .jionsd .jsond .jsl .recrtlis .ril.show .ritle .recom {
      display: none;
  }

  .jionsd .jsond .jsr {
      display: inline-block;
      vertical-align: top;
      width: calc(285 / 1520 * 100%);
  }

  .jionsd .jsond .jsr .jir {
      width: 100%;
      color: #222;
      line-height: 1.5;
      padding-bottom: 0.2rem;
      border-bottom: solid 1px #e1eef8;
  }

  .jionsd .jsond .jsr .jir span {
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      margin-right: 0.06rem;
  }

  .jionsd .jsond .jsr .jir span img {
      width: 100%;
      display: block;
  }

  .jionsd .jsond .jsr .jsrlist {
      width: 100%;
  }

  .jionsd .jsond .jsr .jsrlist .jitm {
      width: 100%;
      display: block;
      border-bottom: solid 1px #e1eef8;
  }

  .jionsd .jsond .jsr .jsrlist .jitm a {
      width: 100%;
      display: block;
      padding: 0.25rem 0;
  }

  .jionsd .jsond .jsr .jsrlist .jitm .jm {
      width: 100%;
      color: #111;
      line-height: 1.5;
  }

  .jionsd .jsond .jsr .jsrlist .jitm .time {
      width: 100%;
      color: #999;
      line-height: 1.5;
      margin-top: 0.06rem;
  }

  .jionsd .jsond .jsr .jsrlist .jitm .time span {
      display: inline-block;
      vertical-align: middle;
      width: 16px;
      position: relative;
      top: -0.01rem;
      margin-right: 0.05rem;
  }

  .jionsd .jsond .jsr .jsrlist .jitm .time span img {
      width: 100%;
      display: block;
  }

  .jionsd .jsond .jsr .jsrlist .jitm .time span img:first-child {
      display: block;
  }

  .jionsd .jsond .jsr .jsrlist .jitm .time span img:last-child {
      display: none;
  }

  .jionsd .jsond .jsr .jsrlist .jitm:hover .jm {
      color: var(--themes);
  }

  .jionsd .jsond .jsr .jsrlist .jitm:hover .time {
      color: var(--themes);
  }

  .jionsd .jsond .jsr .jsrlist .jitm:hover .time span img:first-child {
      display: none;
  }

  .jionsd .jsond .jsr .jsrlist .jitm:hover .time span img:last-child {
      display: block;
  }

  .jionsd .jsond .jsr.fixed {
      width: 2.85rem;
      position: fixed;
      right: 50%;
      margin-right: -7.6rem;
      top: 1rem;
  }

  .jionsd .jsond .jsr.bot {
      position: absolute;
      right: 0;
      bottom: 0;
      margin-right: 0;
      top: auto;
      width: 2.85rem;
  }

  @media (max-width: 1420px) {
      .jionsd .jsond .jsr.fixed {
          width: 2.7rem;
          margin-right: -45%;
      }

      .jionsd .jsond .jsr.bot {
          position: absolute;
          right: 0;
          bottom: 0;
          margin-right: 0;
          top: auto;
          width: 2.7rem;
      }
  }

  .services {
      width: 100%;
      padding: 0.8rem 0;
  }

  .services .serpers {
      width: 100%;
  }

  .services .serpers .swiper-slide {
      width: 100%;
  }

  .services .serpers .swiper-slide .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .services .serpers .swiper-slide .imgs .img {
      width: 100%;
      padding-top: 89.28%;
      transition: all ease 0.5s;
  }

  .services .serpers .swiper-slide .som {
      width: 100%;
      padding: 0.3rem;
      background-color: #f0f9ff;
  }

  .services .serpers .swiper-slide .som .sim {
      width: 100%;
      color: #222;
      line-height: 1.5;
      height: 4.5em;
  }

  .services .serpers .swiper-slide .som .num {
      width: 100%;
      color: #d6e8f4;
      line-height: 1.5;
      margin-top: 0.08rem;
  }

  .services .serpers .swiper-slide:hover .imgs .img {
      transform: scale(1.1);
  }

  .services .serpers .swiper-slide:hover .som {
      background-color: var(--themes);
  }

  .services .serpers .swiper-slide:hover .som .sim,
  .services .serpers .swiper-slide:hover .som .num {
      color: #fff;
  }

  .targets {
      width: 100%;
      padding: 1rem 0;
  }

  .targets .targpers {
      width: 100%;
  }

  .targets .targpers .swiper-slide {
      width: 100%;
  }

  .targets .targpers .swiper-slide .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .targets .targpers .swiper-slide .imgs .img {
      width: 100%;
      padding-top: 56.37%;
      transition: all ease 0.5s;
  }

  .targets .targpers .swiper-slide .xom {
      width: 100%;
      padding: 0.25rem 0;
      border-bottom: solid 1px #ddeef8;
  }

  .targets .targpers .swiper-slide .xom .xit {
      width: 100%;
      color: #222;
      line-height: 1.5;
  }

  .targets .targpers .swiper-slide .xom .xim {
      width: 100%;
      font-size: 0;
      margin-top: 0.08rem;
  }

  .targets .targpers .swiper-slide .xom .xim .km {
      display: inline-block;
      vertical-align: top;
      margin-right: 0.3rem;
      width: auto;
      color: #666;
      line-height: 1.5;
  }

  .targets .targpers .swiper-slide:hover .imgs .img {
      transform: scale(1.1);
  }

  .targets .targpers .swiper-slide:hover .xom {
      border-bottom: solid 1px var(--themes);
  }

  .targets .targpers .swiper-slide:hover .xom .xit {
      color: var(--themes);
  }

  .certificate {
      width: 100%;
      padding: 0.8rem 0;
  }

  .certificate .certper {
      width: 100%;
  }

  .certificate .certper .swiper-slide {
      width: 100%;
      background-color: #fff;
  }

  .certificate .certper .swiper-slide a {
      width: 100%;
      display: block;
      padding: 0.35rem;
  }

  .certificate .certper .swiper-slide .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .certificate .certper .swiper-slide .imgs .img {
      width: 100%;
      padding-top: 67.57%;
      transition: all ease 0.5s;
  }

  .certificate .certper .swiper-slide .vom {
      width: 100%;
      font-size: 0;
      padding-top: 0.2rem;
  }

  .certificate .certper .swiper-slide .vom .vt {
      display: inline-block;
      vertical-align: middle;
      color: #666;
      line-height: 1.5;
      width: calc(100% - 20px);
      padding-right: 0.1rem;
      color: #666;
  }

  .certificate .certper .swiper-slide .vom .ic {
      display: inline-block;
      vertical-align: middle;
      width: 20px;
  }

  .certificate .certper .swiper-slide .vom .ic img {
      width: 100%;
      display: block;
  }

  .systems {
      width: 100%;
      padding: 0.8rem 0;
      overflow: hidden;
  }

  .systems .systper {
      width: 100%;
      position: relative;
  }

  .systems .systper:after {
      content: ' ';
      position: absolute;
      width: 15.29rem;
      height: 1.11rem;
      z-index: 1;
      left: 50%;
      transform: translate(-50%, -50%);
      top: 72.2%;
      background-image: url("/static/home/images/bg15.png");
      background-size: 100% 100%;
      background-position: center;
      background-repeat: repeat-x;
  }

  .systems .systper .swiper-container {
      position: relative;
      z-index: 2;
  }

  .systems .systper .swiper-slide {
      width: 100%;
      z-index: 3;
  }

  .systems .systper .swiper-slide .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .systems .systper .swiper-slide .imgs .img {
      width: 100%;
      padding-top: 67.2%;
      transition: all ease 0.5s;
  }

  .systems .systper .swiper-slide .sim {
      width: 100%;
      text-align: center;
      color: #666;
      line-height: 1.5;
      height: 4.5em;
      margin-top: 0.5rem;
  }

  @media (max-width: 800px) {
      .systems .systper:after {
          top: 59.2%;
      }
  }

  .researchs {
      width: 100%;
      position: relative;
  }

  .researchs .hei {
      width: 100%;
      position: relative;
  }

  .researchs .hei .ght {
      width: 100%;
      padding-top: 39.58%;
  }

  .researchs .imglist {
      width: 100%;
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      overflow: hidden;
  }

  .researchs .imglist .item {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: -1;
      transition: all ease 0.8s;
  }

  .researchs .imglist .item.on {
      z-index: 3;
      opacity: 1;
  }

  .researchs .imglist .item.on .rox .rod {
      opacity: 1;
      transform: translate3d(0, 0, 0);
  }

  .researchs .imglist .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
      height: 100%;
  }

  .researchs .imglist .imgs .img {
      width: 100%;
      height: 100%;
      display: block;
  }

  .researchs .imglist .rox {
      position: absolute;
      z-index: 3;
      left: calc(200 / 1920 * 100%);
      top: 50%;
      transform: translateY(-50%);
      width: 5.6rem;
  }

  .researchs .imglist .rox .rod {
      width: 100%;
      opacity: 0;
      transform: translate3d(35%, 0, 0);
      transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s;
  }

  .researchs .imglist .rox .rc {
      width: 0.45rem;
      height: 0.45rem;
      display: block;
  }

  .researchs .imglist .rox .rc img {
      width: 100%;
      display: block;
  }

  .researchs .imglist .rox .rit {
      width: 100%;
      color: #fff;
      line-height: 1.5;
      margin: 0.1rem 0;
  }

  .researchs .imglist .rox .sinp {
      width: 100%;
      color: #fff;
      line-height: 1.6;
  }

  .researchs .imglist .rox .sinp p {
      color: #fff;
      line-height: 1.6;
  }

  .researchs .resnav {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 3;
      background-color: rgba(17, 17, 17, 0.4);
  }

  .researchs .resnav .swiper-wrapper{
    align-items: stretch;
  }


  .researchs .resnav .swiper-slide {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0;
      padding: 0.25rem 0.4rem;
      cursor: pointer;
      height: auto;
  }

  .researchs .resnav .swiper-slide .sol {
      display: inline-block;
      vertical-align: middle;
      flex: 1;
  }

  .researchs .resnav .swiper-slide .sol .xs {
      display: inline-block;
      vertical-align: middle;
      color: #fff;
      line-height: 1.5;
      font-weight: bold;
      margin-right: 0.1rem;
  }

  .researchs .resnav .swiper-slide .sol .dm {
      display: inline-block;
      vertical-align: middle;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.5;
  }

  .researchs .resnav .swiper-slide .sor {
      display: inline-block;
      vertical-align: middle;
  }

  .researchs .resnav .swiper-slide.on,
  .researchs .resnav .swiper-slide:hover {
      background-color: var(--themes);
  }

  .researchs .resnav .swiper-slide+.swiper-slide {
      border-left: solid 1px rgba(255, 255, 255, 0.2);
  }
  @media(max-width: 900px){
    .researchs .hei .ght{padding-top: 320px;}
    .researchs .imglist .rox{top: 20px;transform: translate(0,0);}
  }

  .guarantee {
      width: 100%;
      position: relative;
      padding: 0.8rem 0;
  }

  .guarantee .guarpers {
      width: 100%;
  }

  .guarantee .guarpers .swiper-slide {
      width: 100%;
      position: relative;
      cursor: pointer;
      overflow: hidden;
  }

  .guarantee .guarpers .swiper-slide .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .guarantee .guarpers .swiper-slide .imgs .img {
      width: 100%;
      padding-top: 143.71%;
      transition: all ease 0.5s;
  }

  .guarantee .guarpers .swiper-slide .vom {
      position: absolute;
      transition: all ease 0.8s;
      bottom: 0;
      width: 100%;
      background-color: transparent;
      z-index: 2;
      left: 0;
      height: calc(1.5em + 0.8rem);
      padding: 0.4rem;
  }

  .guarantee .guarpers .swiper-slide .vom .vit {
      width: 100%;
      color: #fff;
      line-height: 1.5;
      text-align: center;
  }

  .guarantee .guarpers .swiper-slide .vom .vinps {
      width: 100%;
      margin-top: 0.4rem;
      color: #fff;
      line-height: 1.6;
      max-height: 2rem;
      overflow: auto;
  }

  .guarantee .guarpers .swiper-slide .vom .vinps p {
      color: #fff;
      line-height: 1.6;
  }

  .guarantee .guarpers .swiper-slide .vom .vinps::-webkit-scrollbar {
      width: 4px;
      height: 4px;
      scrollbar-arrow-color: rgba(0, 0, 0, 0.1);
  }

  .guarantee .guarpers .swiper-slide .vom .vinps::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.3);
      scrollbar-arrow-color: rgba(0, 0, 0, 0.1);
  }

  .guarantee .guarpers .swiper-slide .vom .vinps::-webkit-scrollbar-track {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
      background: rgba(0, 0, 0, 0.1);
  }

  .guarantee .guarpers .swiper-slide.on .vom {
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      background-color: var(--themes);
  }

  .channels {
      width: 100%;
      overflow: hidden;
  }

  .channels .chans {
      width: 100%;
      padding: 0.8rem 0;
  }

  .channels .chaem {
      width: 100%;
      font-size: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      /* align-items: center;  */
  }

  .channels .chaem .cml {
      display: inline-block;
      vertical-align: middle;
      width: calc(633 / 1520 * 100%);
      position: relative;
      overflow: hidden;
  }

  .channels .chaem .cml .img {
      width: 100%;
      padding-top: 57.03%;
  }

  .channels .chaem .cmr {
      display: inline-block;
      vertical-align: middle;
      width: calc(800 / 1520 * 100%);
  }

  .channels .chaem .cmr .cir {
      width: 100%;
      color: #222;
      font-weight: bold;
      line-height: 1.5;
      margin-bottom: 0.2rem;
  }

  .channels .chaem .cmr .pc {
      width: 100%;
      color: #222;
      line-height: 1.5;
      margin: 0.24rem 0 0.2rem;
  }

  .channels .chaem .cmr .cmrlist {
      width: 100%;
      font-size: 0;
  }

  .channels .chaem .cmr .cmrlist .cirm {
      display: inline-block;
      vertical-align: top;
      width: calc((100% - 0.8rem) / 5);
      position: relative;
      margin-right: 0.2rem;
      margin-bottom: 0.2rem;
      cursor: pointer;
  }

  .channels .chaem .cmr .cmrlist .cirm::after {
      content: ' ';
      position: absolute;
      z-index: 2;
      left: 50%;
      top: calc(100% - 1px);
      transform: translateX(-50%);
      width: 15px;
      height: 8px;
      background-image: url("/static/home/images/i8.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: none;
  }

  .channels .chaem .cmr .cmrlist .cirm .hei {
      width: 100%;
      padding-top: 100%;
  }

  .channels .chaem .cmr .cmrlist .cirm .com {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-content: center;
      flex-wrap: wrap;
      justify-content: center;
      border: solid 1px #d4e8f6;
  }

  .channels .chaem .cmr .cmrlist .cirm .com .rc {
      width: 0.4rem;
      height: 0.4rem;
      margin: 0 auto 0.1rem;
  }

  .channels .chaem .cmr .cmrlist .cirm .com .rc img {
      width: 100%;
      display: block;
  }

  .channels .chaem .cmr .cmrlist .cirm .com .cm {
      width: 100%;
      text-align: center;
      color: #222;
      line-height: 1.5;
      max-height: 3em;
  }

  .channels .chaem .cmr .cmrlist .cirm:nth-child(5n) {
      margin-right: 0;
  }

  .channels .chaem .cmr .cmrlist .cirm.on {
      border: solid 1px var(--themes);
  }

  .channels .chaem .cmr .cmrlist .cirm.on::after {
      display: block;
  }

  .channels .chaem .cmr .cmron {
      width: 100%;
      margin-top: 0.4rem;
  }

  .channels .chaem .cmr .cmron .cmrem {
      width: 100%;
      display: none;
  }

  .channels .chaem .cmr .cmron .cmrem.on {
      display: block;
  }

  .channels .chaem .cmr .cmron .cinp {
      width: 100%;
      color: #666;
      line-height: 1.75;
  }

  .channels .chaem .cmr .cmron .cinp p {
      color: #666;
      line-height: 1.75;
  }

  .channels .chaem .cmr .cmron .pind {
      width: 100%;
      font-size: 0;
      max-width: 450px;
      min-height: 0.8rem;
  }

  .channels .chaem .cmr .cmron .pind .pli {
      width: 47%;
      color: #666;
      line-height: 1.75;
      display: inline-block;
      vertical-align: top;
      margin-right: 6%;
      position: relative;
      padding-left: 0.11rem;
  }

  .channels .chaem .cmr .cmron .pind .pli::after {
      content: ' ';
      position: absolute;
      left: 0;
      width: 0.04rem;
      height: 0.04rem;
      background-color: #ddd;
      top: calc(0.875em - 0.02rem);
  }

  .channels .chaem .cmr .cmron .pind .pli:nth-child(2n) {
      margin-right: 0;
  }

  .channels .chans:nth-child(2n) .chaem .cmr .cmrlist .cirm::after {
      background-image: url("/static/home/images/i7.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
  }

  .industrys {
      width: 100%;
      padding: 0.8rem 0;
  }

  .industrys .induper {
      width: 100%;
  }

  .industrys .induper .swiper-slide {
      width: 100%;
      position: relative;
  }

  .industrys .induper .swiper-slide a {
      width: 100%;
      display: block;
  }

  .industrys .induper .swiper-slide .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .industrys .induper .swiper-slide .imgs .img {
      width: 100%;
      padding-top: 100%;
      transition: all ease 0.5s;
  }

  .industrys .induper .swiper-slide .xit {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      background-color: #f0f9ff;
      border-radius: 0 0.2rem 0 0;
      text-align: center;
      padding: 0.3rem 0.3rem;
      color: #222;
  }

  .industrys .induper .swiper-slide:hover .imgs .img {
      transform: scale(1.1);
  }

  .industrys .induper .swiper-slide:hover .xit {
      background-color: var(--themes);
      color: #fff;
  }

  .counts {
      width: 100%;
      padding: 0.8rem 0;
  }

  .counts .citop {
      width: 100%;
      margin-bottom: 0.5rem;
  }

  .counts .citop .mip {
      width: 100%;
      color: #222;
      line-height: 1.6;
      text-align: center;
  }

  .counts .citop .mip p {
      color: #222;
      line-height: 1.6;
  }

  .counts .counper {
      width: 100%;
  }

  .counts .counper .swiper-slide {
      width: 100%;
      padding: 0.3rem;
      background-color: #e9f5fe;
      border: solid 1px #c6e2f6;
  }

  .counts .counper .swiper-slide .sop {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.22rem;
  }

  .counts .counper .swiper-slide .sop .sm {
      display: inline-block;
      vertical-align: middle;
      color: #222;
      font-weight: bold;
      line-height: 1.5;
  }

  .counts .counper .swiper-slide .sop .nux {
      display: inline-block;
      vertical-align: middle;
      color: rgba(186, 220, 245, 0.3);
      line-height: 1.3;
      font-weight: bold;
  }

  .counts .counper .swiper-slide .sinp {
      width: 100%;
      color: #666;
      line-height: 1.6;
      overflow: auto;
      height: 8em;
  }

  .counts .counper .swiper-slide .sinp p {
      color: #666;
      line-height: 1.6;
  }

  .counts .counper .swiper-slide .sinp::-webkit-scrollbar {
      width: 4px;
      height: 4px;
      scrollbar-arrow-color: rgba(0, 0, 0, 0.1);
  }

  .counts .counper .swiper-slide .sinp::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.3);
      scrollbar-arrow-color: rgba(0, 0, 0, 0.1);
  }

  .counts .counper .swiper-slide .sinp::-webkit-scrollbar-track {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
      background: rgba(0, 0, 0, 0.1);
  }

  .counts .counper .swiper-slide+.swiper-slide {
      border-left: none;
  }

  .counts .counper .swiper-slide:hover {
      background-color: var(--themes);
  }

  .counts .counper .swiper-slide:hover .sop .sm,
  .counts .counper .swiper-slide:hover .sop .num {
      color: #fff;
  }

  .counts .counper .swiper-slide:hover .sinp {
      color: #fff;
  }

  .counts .counper .swiper-slide:hover .sinp p {
      color: #fff;
  }

  .counts .xunper {
      width: 100%;
      margin-top: 0.5rem;
  }

  .counts .xunper .swiper-slide {
      width: 100%;
  }

  .counts .xunper .swiper-slide a {
      width: 100%;
      display: block;
  }

  .counts .xunper .swiper-slide .imgs {
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .counts .xunper .swiper-slide .imgs .img {
      width: 100%;
      padding-top: 57.45%;
      transition: all ease 0.5s;
  }

  .counts .xunper .swiper-slide .som {
      width: 100%;
      background-color: #fff;
      color: #666;
      line-height: 1.5;
      text-align: center;
      padding: 0.15rem 0.2rem;
  }

  .counts .xunper .swiper-slide:hover .imgs .img {
      transform: scale(1.1);
  }

  .counts .xunper .swiper-slide:hover .som {
      background-color: var(--themes);
      color: #fff;
  }

  .visions {
      width: 100%;
      padding: 0.8rem 0;
  }

  .visions .vision {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      flex-direction: row-reverse;
  }

  .visions .vision .vsl {
      display: inline-block;
      vertical-align: middle;
      width: calc(611 / 1520 * 100%);
      position: relative;
      overflow: hidden;
  }

  .visions .vision .vsl .img {
      width: 100%;
      padding-top: 79.90%;
  }

  .visions .vision .vsr {
      display: inline-block;
      vertical-align: middle;
      width: calc(760 / 1520 * 100%);
  }

  .visions .vision .vsr .vir {
      width: 100%;
      color: #222;
      font-weight: bold;
      line-height: 1.5;
      margin-bottom: 0.3rem;
  }

  .visions .vision .vsr .finp {
      width: 100%;
      color: #444;
      line-height: 1.5;
      margin-bottom: 0.3rem;
  }

  .visions .vision .vsr .finp p {
      color: #444;
      line-height: 1.5;
  }

  .visions .vision .vsr .vsrlist {
      width: 100%;
      font-size: 0;
  }

  .visions .vision .vsr .vsrlist .vsim {
      display: inline-block;
      vertical-align: top;
      width: calc((100% - 0.2rem) / 3);
      margin-right: 0.1rem;
      margin-bottom: 0.1rem;
      padding: 0.34rem 0.3rem;
      background-color: #fff;
      font-size: 0;
  }

  .visions .vision .vsr .vsrlist .vsim .vml {
      display: inline-block;
      vertical-align: middle;
      width: calc(100% - 0.44rem);
      padding-right: 0.1rem;
  }

  .visions .vision .vsr .vsrlist .vsim .vml .vt {
      width: 100%;
      color: #222;
      line-height: 1.5;
      font-weight: bold;
  }

  .visions .vision .vsr .vsrlist .vsim .vml .vb {
      width: 100%;
      color: #666;
      line-height: 1.5;
  }

  .visions .vision .vsr .vsrlist .vsim .vmr {
      display: inline-block;
      vertical-align: middle;
      width: 0.44rem;
      height: 0.44rem;
      opacity: 1;
  }

  .visions .vision .vsr .vsrlist .vsim .vmr img {
      width: 100%;
      display: block;
  }

  .visions .vision .vsr .vsrlist .vsim:nth-child(3n) {
      margin-right: 0;
  }

  .visions .vision .vsr .vsrlist .vsim:hover {
      background-color: var(--themes);
  }

  .visions .vision .vsr .vsrlist .vsim:hover .vml .vt,
  .visions .vision .vsr .vsrlist .vsim:hover .vml .vb {
      color: #fff;
  }

  .visions .vision .vsr .vsrlist .vsim:hover .vmr {
      opacity: 0.2;
  }

  .customized {
      width: 100%;
      padding: 1rem 0;
  }

  .customized .ciu {
      width: 100%;
      color: #fff;
      line-height: 1.5;
      text-align: center;
      margin-bottom: 0.5rem;
  }

  .customized .ciu p {
      color: #fff;
      line-height: 1.5;
  }

  .customized .custm {
      width: 100%;
      font-size: 0;
  }

  .customized .custm .cmg {
      width: 7.5rem;
      display: block;
      margin: 0 auto;
      position: relative;
      width: calc(750 / 1520 * 100%);
  }

  .customized .custm .cmg .img {
      width: 100%;
      padding-top: 60%;
  }

  .customized .custm .cmg .txtlist {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 3;
  }

  .customized .custm .cmg .txtlist .tiem {
      display: inline-block;
      vertical-align: middle;
      width: auto;
      background-color: #badcf5;
      padding: 0.2rem 0.3rem;
      color: #444;
      font-weight: bold;
      line-height: 1.5;
      white-space: nowrap;
      position: absolute;
      cursor: pointer;
      z-index: 2;
  }

  .customized .custm .cmg .txtlist .tiem:after {
      content: ' ';
      position: absolute;
      left: 100%;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border: solid 0.05rem;
      border-color: transparent transparent transparent #badcf5;
  }

  .customized .custm .cmg .txtlist .tiem:nth-child(2n):after {
      left: auto;
      right: 100%;
      border: solid 0.05rem;
      border-color: transparent #badcf5 transparent transparent;
  }

  .customized .custm .cmg .txtlist .tiem:nth-child(1) {
      right: calc(100% + 15%);
      top: 5%;
  }

  .customized .custm .cmg .txtlist .tiem:nth-child(2) {
      left: calc(100% + 15%);
      top: 5%;
  }

  .customized .custm .cmg .txtlist .tiem:nth-child(3) {
      right: calc(100% + 3%);
      bottom: 25%;
  }

  .customized .custm .cmg .txtlist .tiem:nth-child(4) {
      left: calc(100% + 3%);
      bottom: 25%;
  }

  .customized .custm .cmg .txtlist .tiem:hover {
      background-color: var(--themes);
      color: #fff;
  }

  .customized .custm .cmg .txtlist .tiem:hover:after {
      border: solid 0.05rem;
      border-color: transparent transparent transparent var(--themes);
  }

  .customized .custm .cmg .txtlist .tiem:nth-child(2n):hover:after {
      border: solid 0.05rem;
      border-color: transparent var(--themes) transparent transparent;
  }

  @media (max-width: 800px) {
      .customized .custm .cmg {
          width: 100%;
      }

      .customized .custm .cmg .txtlist {
          width: 100%;
          position: relative;
          margin-top: 0.3rem;
      }

      .customized .custm .cmg .txtlist .tiem {
          width: 47%;
          margin-right: 6%;
          position: relative;
          left: auto !important;
          top: auto !important;
          right: auto !important;
          bottom: auto !important;
          border-radius: 0.3rem;
          margin-bottom: 0.2rem;
      }

      .customized .custm .cmg .txtlist .tiem:after {
          display: none;
      }

      .customized .custm .cmg .txtlist .tiem:nth-child(2n) {
          margin-right: 0;
      }
  }

  .rightnav {
      position: fixed;
      z-index: 10;
      right: 0.1rem;
      top: 60%;
      transform: translateY(-50%);
  }

  .rightnav .ritm {
      display: block;
      width: 0.56rem;
      height: 0.56rem;
      /* position: relative; */
      background-color: #fff;
      box-shadow: 0px 0px 30px 0px rgba(0, 155, 222, 0.08);
  }

  .rightnav .ritm a,
  .rightnav .ritm img {
      width: 100%;
      display: block;
  }

  .rightnav .ritm img:first-child {
      display: block;
  }

  .rightnav .ritm img:last-child {
      display: none;
  }

  .rightnav .ritm .forms {
      position: absolute;
      top: 0;
      right: calc(100% + 0.1rem);
      background-color: #fff;
      width: 6rem;
      padding: 0.4rem;
      display: none;
  }

  .rightnav .ritm .forms .vit {
      width: 100%;
      color: #444;
      line-height: 1.5;
      margin-bottom: 0.12rem;
  }

  .rightnav .ritm .forms .row {
      width: 100%;
      font-size: 0;
  }

  .rightnav .ritm .forms .row .input {
      display: inline-block;
      vertical-align: top;
      width: 48%;
      margin-right: 4%;
      margin-bottom: 0.1rem;
      position: relative;
  }

  .rightnav .ritm .forms .row .input .sin {
      width: 100%;
      display: block;
      padding: 0 0.14rem;
      color: #999;
      line-height: 3;
      height: 3em;
      background-color: #fff;
      border: solid 1px #eee;
      padding-right: 0.2rem;
  }

  .rightnav .ritm .forms .row .input .vc {
      display: inline-block;
      vertical-align: middle;
      color: var(--themes);
      line-height: 1.5;
      position: absolute;
      right: 0.1rem;
      top: 0;
      line-height: 3;
  }

  .rightnav .ritm .forms .row .input:nth-child(2n) {
      margin-right: 0;
  }

  .rightnav .ritm .forms .row .input.w100 {
      width: 100%;
      margin-right: 0;
  }

  .rightnav .ritm .forms .text {
      width: 100%;
  }

  .rightnav .ritm .forms .text .area {
      width: 100%;
      display: block;
      padding: 0.14rem;
      color: #999;
      line-height: 1.5;
      background-color: #fff;
      border: solid 1px #eee;
      margin-bottom: 0.1rem;
  }

  .rightnav .ritm .forms .sub {
      width: 100%;
      font-size: 0;
  }

  .rightnav .ritm .forms .sub .stn {
      display: inline-block;
      vertical-align: middle;
      background-color: var(--themes);
      color: #fff;
      line-height: 3;
      width: auto;
      padding: 0 0.5rem;
      cursor: pointer;
      height: 3em;
      border: none;
  }

  .rightnav .ritm .forms:after {
      content: ' ';
      position: absolute;
      width: 0;
      height: 0;
      border: solid 0.05rem;
      left: 100%;
      top: 0.2rem;
      display: none;
      border-color: transparent transparent transparent #fff;
  }

  .rightnav .ritm .tellom {
      position: absolute;
      top: 0;
      right: calc(100% + 0.1rem);
      background-color: #fff;
      width: auto;
      padding: 0.25rem;
      display: none;
  }

  .rightnav .ritm .tellom .tit {
      width: 100%;
      color: #444;
      line-height: 1.5;
      margin-bottom: 0.12rem;
      white-space: nowrap;
  }

  .rightnav .ritm .tellom .tinp {
      width: 100%;
      color: #666;
      line-height: 1.5;
      white-space: nowrap;
  }

  .rightnav .ritm .tellom .tinp p {
      color: #666;
      line-height: 1.5;
  }

  .rightnav .ritm .tellom:after {
      content: ' ';
      position: absolute;
      width: 0;
      height: 0;
      border: solid 0.05rem;
      left: 100%;
      top: 0.2rem;
      display: none;
      border-color: transparent transparent transparent #fff;
  }

  .rightnav .ritm .sharm {
      position: absolute;
      top: 0;
      right: calc(100% + 0.1rem);
      background-color: #fff;
      width: 4rem;
      padding: 0.25rem;
      display: none;
  }

  .rightnav .ritm .sharm .dit {
      width: 100%;
      color: #444;
      line-height: 1.5;
      margin-bottom: 0.12rem;
      white-space: nowrap;
  }

  .rightnav .ritm .sharm .ticons {
      width: 100%;
      font-size: 0;
  }

  .rightnav .ritm .sharm .ticons .titm {
      display: inline-block;
      vertical-align: top;
      width: 48%;
      margin-right: 4%;
  }

  .rightnav .ritm .sharm .ticons .titm .re {
      width: 100%;
      color: #999;
      line-height: 1.5;
  }

  .rightnav .ritm .sharm .ticons .titm .sul {
      width: 100%;
  }

  .rightnav .ritm .sharm .ticons .titm .sul a {
      width: 100%;
      display: block;
      color: #444;
      line-height: 1.5;
      padding: 0.05rem 0;
  }

  .rightnav .ritm .sharm .ticons .titm .sul a span {
      display: inline-block;
      vertical-align: middle;
      width: 0.18rem;
      height: 0.18rem;
      margin-right: 0.1rem;
  }

  .rightnav .ritm .sharm .ticons .titm .sul a span img {
      width: 100%;
      display: block;
  }

  .rightnav .ritm .sharm .ticons .titm:nth-child(2n) {
      margin-right: 0;
  }

  .rightnav .ritm .sharm:after {
      content: ' ';
      position: absolute;
      width: 0;
      height: 0;
      border: solid 0.05rem;
      left: 100%;
      top: 0.2rem;
      display: none;
      border-color: transparent transparent transparent #fff;
  }

  .rightnav .ritm:hover {
      background-color: var(--themes);
  }

  .rightnav .ritm:hover img:first-child {
      display: none;
  }

  .rightnav .ritm:hover img:last-child {
      display: block;
  }

  .rightnav .ritm.on .forms {
      display: block;
  }

  .rightnav .ritm.on .tellom {
      display: block;
  }

  .rightnav .ritm+.ritm {
      margin-top: 0.04rem;
  }

  @media (max-width: 800px) {
      .rightnav .ritm {
          width: 0.8rem;
          height: 0.8rem;
      }

      .rightnav .ritm .forms {
          top: 50%;
          transform: translateY(-50%);
      }
  }

  .videoc {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: block;
      z-index: 4;
      background-color: rgba(0, 0, 0, 0.05);
      opacity: 1;
      transition: all ease 0.5s;
      z-index: 2;
  }

  .videoc .vom {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
  }