@charset "UTF-8";


/* @font-face {
  font-family: 'Poppins-Regular';
  src: url('../font/Poppins-Regular.ttf');
}

*,html,body{
  font-family: 'Poppins-Regular';
} */

.w1720 {

  width: 17.2rem;

  margin: 0 auto;

  position: relative;

  font-size: 0; }



@media (max-width: 1780px) {

  .w1720 {

    width: 90%; } }

@media (max-width: 800px) {

  .w1720 {

    width: 94%; } }

.w1400 {

  width: 14rem;

  margin: 0 auto;

  font-size: 0; }



/* @media (max-width: 1460px) {

  .w1400 {

    width: 12rem; } } */

@media (max-width: 800px) {

  .w1400 {

    width: 94%; } }

.w1080 {

  width: 10.8rem;

  margin: 0 auto;

  position: relative;

  font-size: 0; }



@media (max-width: 1140px) {

  .w1080 {

    width: 90%; } }

@media (max-width: 800px) {

  .w1080 {

    width: 94%; } }

:root {

  --themes: #0049ce; }



header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 50;

  transition: all ease 0.5s;

  background-color: transparent; }

  header .hop {

    width: 100%;

    display: flex;

    justify-content: space-between;

    transition: all ease 0.5s;

    min-height: 0.9rem;

    align-items: center; }

  header .rav {

    width: auto;

    display: inline-block;

    vertical-align: middle;

    padding-left: 0.4rem;

    font-size: 0;

    display: flex;

    align-items: center; }

    header .rav .languages {

      width: auto;

      display: inline-block;

      vertical-align: middle;

      font-size: 0;

      margin: 0 0rem;

      text-align: left;

      z-index: 3;

      margin-left: 0.3rem; }

      header .rav .languages .lauges {

        width: 100%;

        display: inline-block;

        vertical-align: middle;

        position: relative; }

        header .rav .languages .lauges .lashow {

          width: 100%;

          position: relative;

          cursor: pointer;

          font-size: 0;

          line-height: 40px;

          height: 40px;

          white-space: nowrap;

          padding-right: 16px; }

          header .rav .languages .lauges .lashow .ac {

            display: inline-block;

            vertical-align: middle;

            width: 24px;

            height: 24px;

            margin-right: 0.1rem; }

            header .rav .languages .lauges .lashow .ac img {

              width: 100%;

              display: block; }

          header .rav .languages .lauges .lashow .am {

            color: #fff;

            display: inline-block;

            vertical-align: middle;

            width: auto; }

          header .rav .languages .lauges .lashow:after {

            content: ' ';

            position: absolute;

            right: 0rem;

            top: calc(50%);

            transform: translateY(-50%);

            width: 0;

            height: 0;

            border: solid 0.045rem;

            border-color: #fff transparent transparent transparent; }

        header .rav .languages .lauges .language {

          position: absolute;

          z-index: 20;

          top: 100%;

          width: 100%;

          display: none;

          width: 60px;

          width: 1rem;

          left: 50%;

          transform: translateX(-50%); }

          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;

                transform: translate(-105%, 0) skew(-20deg);

                background: var(--themes);

                z-index: 1;

                animation: outHover 0.5s ease 1 forwards; }

            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 {

                animation-name: onHover; }

@keyframes onHover {

  from {

    transform: translate(-110%, 0) skew(-20deg); }

  to {

    transform: translate(0, 0) skew(-20deg); } }

@keyframes outHover {

  from {

    transform: translate(0, 0) skew(-20deg); }

  to {

    transform: translate(110%, 0) skew(-20deg); } }

    header .rav .search {

      display: inline-block;

      vertical-align: middle;

      width: auto;

      text-align: center;

      cursor: pointer;

      position: relative;

      width: 21px;

      height: 40px; }

      header .rav .search .sc {

        display: inline-block;

        vertical-align: middle;

        width: 100%;

        position: absolute;

        left: 50%;

        top: 50%;

        transform: translate(-50%, -50%);

        z-index: 3; }

        header .rav .search .sc img {

          width: 100%;

          display: block; }

    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);

        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: 0.22rem;

          height: 0.21rem;

          display: block;

          border-radius: 50%;

          cursor: pointer;

          z-index: 1;

          filter: grayscale(1000%) brightness(2000%); }

        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 .menu {

      display: inline-block;

      vertical-align: middle;

      width: 20px;

      height: 20px;

      cursor: pointer;

      position: relative;

      display: none; }

      header .rav .menu img {

        width: 100%;

        display: block; }

      header .rav .menu img:first-child {

        display: block; }

      header .rav .menu img:last-child {

        display: none; }

      header .rav .menu .clk {

        width: 100%;

        height: 100%;

        text-align: center;

        color: #fff;

        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 .logo {

    display: inline-block;

    vertical-align: middle;

    width: auto;

    font-size: 0;

    white-space: nowrap; }

    header .logo .log {

      width: 1.6rem;

      display: inline-block;

      vertical-align: middle; }

      header .logo .log a, header .logo .log img {

        width: 100%;

        display: block; }

    header .logo .lm {

      display: inline-block;

      vertical-align: middle;

      width: auto;

      color: #fff;

      font-weight: bold;

      line-height: 1.5;

      margin-left: 0.1rem; }

  header nav {

    width: 100%;

    display: block;

    text-align: center; }

    header nav .natem {

      width: auto;

      display: inline-block;

      vertical-align: middle;

      position: relative;

      text-align: center;

      font-size: 0; }

      header nav .natem .nas {

        width: auto;

        display: inline-block;

        position: relative;

        margin: 0 0.1rem; }

        header nav .natem .nas a {

          display: inline-block;

          line-height: 0.9rem;

          color: #fff;

          position: relative;

          padding: 0 0.15rem;

          transition: all ease 0.5s; }

        header nav .natem .nas:after {

          content: ' ';

          position: absolute;

          left: 50%;

          bottom: 0rem;

          transform: translateX(-50%);

          opacity: 0;

          background-color: #fff;

          transition: all ease 0.5s;

          width: 0;

          height: 0.02rem; }

      header nav .natem .navuls {

        width: 2.2rem;

        width: 2rem;

        position: absolute;

        z-index: 101;

        left: calc(50%);

        top: 100%;

        transform: translateX(-50%);

        background-color: white;

        display: none; }

        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; }

            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; }

            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.has-nav .nas .xs {

      display: inline-block; }

    header nav .natem.on .nas:after {

      opacity: 1;

      width: 100%; }

    header nav .natem.on .nas .xs img:first-child {

      display: none; }

    header nav .natem.on .nas .xs img:last-child {

      display: block; }

    header nav .natem:hover .nas .xs img:first-child {

      display: none; }

    header nav .natem:hover .nas .xs img:last-child {

      display: block; }

    header nav .natem:hover .nas :after {

      opacity: 1;

      width: 100%; }



header.white {

  background-color: var(--themes); }



@media (max-width: 800px) {

  header {

    background-color: var(--themes); }

    header .hop {

      align-items: center;

      padding: 0.1rem 0; }

    header .blace {

      position: fixed;

      z-index: -1;

      width: 100%;

      height: 100%;

      left: 0;

      top: 0;

      z-index: 450;

      display: none;

      background-color: rgba(0, 0, 0, 0.5); }

    header nav {

      width: 100%;

      width: 5rem;

      position: fixed;

      right: -100%;

      top: 0;

      left: auto;

      height: 100vh;

      background-color: #fff;

      margin-right: 0;

      overflow: auto;

      z-index: 500;

      transition: all ease  1.2s;

      padding-left: 0.1rem;

      padding: 0.1rem;

      display: block;

      text-align: left;

      opacity: 0;

      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 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 .logo .lm {

      color: #333; }

    header .rav .languages {

      margin: 0 0.2rem; }

    header .rav .menu {

      width: 30px;

      height: 30px;

      display: inline-block; }

      header .rav .menu .clk {

        line-height: 30px; }

    header .rav .searcom {

      width: 80px;

      background-color: #f8f8f8; }

      header .rav .searcom .input input {

        color: #333; }

      header .rav .searcom .input input::-webkit-input-placeholder,

      header .rav .searcom .input textarea::-webkit-input-placeholder {

        color: rgba(0, 0, 0, 0.5); }

      header .rav .searcom .input input:-moz-placeholder,

      header .rav .searcom .input textarea:-moz-placeholder {

        color: rgba(0, 0, 0, 0.5); }

      header .rav .searcom .input input::-moz-placeholder,

      header .rav .searcom .input textarea::-moz-placeholder {

        color: rgba(0, 0, 0, 0.5); }

      header .rav .searcom .input input:-ms-input-placeholder,

      header .rav .searcom .input textarea:-ms-input-placeholder {

        color: rgba(0, 0, 0, 0.5); }

    header .rav .search {

      width: 30px;

      display: inline-block; }

      header .rav .search .sc {

        width: 20px;

        height: 20px; }

        header .rav .search .sc img:first-child {

          display: none; }

        header .rav .search .sc img:last-child {

          display: block; }

    header .rav .sechom {

      width: 100vw;

      position: fixed;

      left: 0;

      top: calc(40px + 0.2rem);

      padding: 0.15rem; }



  header.menu-state .rav .menu img {

    opacity: 0; }

  header.menu-state nav {

    opacity: 1;

    right: 0; }

  header.menu-state .blace {

    opacity: 1; } }

.banner {

  width: 100%;

  position: relative; }

  .banner .swiper-slide {

    width: 100%;

    position: relative; }

    .banner .swiper-slide .imgs {

      width: 100%;

      position: relative;

      overflow: hidden; }

      .banner .swiper-slide .imgs .img {

        width: 100%;

        padding-top: 47.60%; }

    .banner .swiper-slide .box {

      position: absolute;

      top: 50%;

      left: calc(260 / 1920 * 100%);

      transform: translateY(-50%);

      z-index: 3;

      width: 80%;

      max-width: 6rem;

      text-align: left; }

      .banner .swiper-slide .box .bit {

        width: 100%;

        color: #fff;

        line-height: 1.2;

        font-weight: bold;

        margin-bottom: 0.15rem;

        opacity: 0;

        transform: translate3d(0, 25%, 0);

        transition: opacity 1s ease-out 0.2s,transform 1s ease-out 0.2s,box-shadow .3s; }

        .banner .swiper-slide .box .bit p {

          color: #fff;

          line-height: 1.2; }

      .banner .swiper-slide .box .binp {

        width: 100%;

        color: #fff;

        line-height: 1.5;

        margin: 0.215rem 0;

        opacity: 0;

        transform: translate3d(0, 25%, 0);

        transition: opacity 1s ease-out 0.2s,transform 1s ease-out 0.2s,box-shadow .3s; }

        .banner .swiper-slide .box .binp p {

          color: #fff;

          line-height: 1.5; }

    .banner .swiper-slide .videoc {

      position: absolute;

      left: 0;

      top: 0;

      width: 100%;

      height: 100%;

      display: block;

      z-index: 4;

      background-color: rgba(0, 0, 0, 0.3);

      opacity: 1;

      transition: all ease 0.5s;

      z-index: 5; }

      .banner .swiper-slide .videoc .vom {

        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        z-index: 3; }

  .banner .swiper-slide-active .box .bit, .banner .swiper-slide-active .box .binp {

    opacity: 1;

    transform: translate3d(0, 0, 0); }

  .banner .swiper-pagination {

    bottom: 0.6rem; }

  .banner .swiper-pagination-bullet {

    display: inline-block;

    vertical-align: middle;

    opacity: 1;

    width: 0.2rem;

    height: 3px;

    border-radius: 0;

    background-color: rgba(255, 255, 255, 0.3);

    transition: all ease 0.5s; }

  .banner .swiper-pagination-bullet-active {

    background-color: #fff;

    width: 0.4rem; }



@media (max-width: 1380px) {

  .banner .swiper-slide .box {

    left: 5%; }

  /*.banner .swiper-slide .imgs .img {*/

  /*  padding-top: 70%; } */
    
}

@media (max-width: 800px) {

  .banner .swiper-slide .box {

    left: 3%; } }

footer {

  width: 100%;

  background-color: #f2f2f2; }

  footer .ftop {

    width: 100%; }

    footer .ftop .fop {

      width: 100%; }

    footer .ftop .fpt {

      width: 100%;

      padding: 0.24rem 0;

      display: flex;

      flex-wrap: wrap;

      justify-content: space-between;

      align-items: center; }

      footer .ftop .fpt .ptiom {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        white-space: nowrap; }

        footer .ftop .fpt .ptiom .ic {

          display: inline-block;

          vertical-align: middle;

          width: 0.3rem;

          margin-right: 0.2rem; }

          footer .ftop .fpt .ptiom .ic img {

            width: 100%;

            display: block; }

        footer .ftop .fpt .ptiom .cm {

          display: inline-block;

          vertical-align: middle;

          width: auto;

          color: #333;

          line-height: 1.5; }

    footer .ftop .fbt {

      width: 100%;

      border-top: solid 1px rgba(0, 0, 0, 0.08);

      padding: 0.6rem 0;

      display: flex;

      flex-wrap: wrap;

      justify-content: space-between;

      flex-direction: row-reverse; }

      footer .ftop .fbt .fbl {

        display: inline-block;

        vertical-align: top;

        width: calc(250 / 1400 * 100%); }

        footer .ftop .fbt .fbl .fogo {

          width: 100%;

          font-size: 0; }

          footer .ftop .fbt .fbl .fogo a {

            display: inline-block;

            vertical-align: middle;

            width: 1.6rem; }

            footer .ftop .fbt .fbl .fogo a img {

              width: 100%;

              display: block; }

        footer .ftop .fbt .fbl .finp {

          width: 100%;

          margin: 0.35rem 0;

          color: #666;

          line-height: 1.75; }

          footer .ftop .fbt .fbl .finp p {

            color: #666;

            line-height: 1.75; }

        footer .ftop .fbt .fbl .share {

          width: 100%;

          font-size: 0; }

          footer .ftop .fbt .fbl .share .am {

            display: inline-block;

            vertical-align: middle;

            position: relative;

            width: 0.5rem;

            height: 0.5rem;

            border-radius: 50%;

            /* background-color: #fff; */

            margin-right: 0.14rem; }

            footer .ftop .fbt .fbl .share .am a, footer .ftop .fbt .fbl .share .am img {

              width: 100%;

              display: block; }

              footer .ftop .fbt .fbl .share .am a img:first-child {display: block;}
              footer .ftop .fbt .fbl .share .am a img:last-child {display: none;}

            footer .ftop .fbt .fbl .share .am .comd {

              position: absolute;

              left: 50%;

              bottom: calc(100% + 0.1rem);

              transform: translateX(-50%);

              width: 1.4rem;

              padding: 0.08rem;

              background-color: #fff;

              border-radius: 0.05rem;

              display: none; }

              footer .ftop .fbt .fbl .share .am .comd img {

                width: 100%;

                display: block; }

          /* footer .ftop .fbt .fbl .share .am:hover {

            background-color: var(--themes); } */

            footer .ftop .fbt .fbl .share .am:hover a img:first-child {display: none;}
            footer .ftop .fbt .fbl .share .am:hover a img:last-child {display: block;}

            /* footer .ftop .fbt .fbl .share .am:hover a img {

              filter: grayscale(1000%) brightness(2000%); } */

            footer .ftop .fbt .fbl .share .am:hover .comd {

              display: block; }

      footer .ftop .fbt .fbr {

        display: inline-block;

        vertical-align: top;

        width: calc(1100 / 1400 * 100%);

        font-size: 0; }

        footer .ftop .fbt .fbr .flist {

          display: inline-block;

          vertical-align: top;

          width: calc(220 / 1100 * 100%);

          text-align: left;

          padding-right: 0.15rem; }

          footer .ftop .fbt .fbr .flist .fit {

            width: 100%;

            font-size: 0;

            margin-bottom: 0.3rem; }

            footer .ftop .fbt .fbr .flist .fit a {

              display: inline-block;

              vertical-align: middle;

              color: #000;

              font-weight: bold;

              line-height: 1.5; }

            footer .ftop .fbt .fbr .flist .fit a:hover {

              color: var(--themes); }

          footer .ftop .fbt .fbr .flist .ful {

            width: 100%; }

            footer .ftop .fbt .fbr .flist .ful a {

              width: 100%;

              display: inline-block;

              vertical-align: top;

              color: #666666;

              transition: all ease 0.5s;

              line-height: 2;

              line-height: 1.5;

              padding: 0.05rem 0; }

            footer .ftop .fbt .fbr .flist .ful a:hover {

              color: var(--themes); }

  footer .fbot {

    width: 100%;

    background-color: #e7e7e7;

    padding: 0.2rem 0; }

    footer .fbot .fob {

      width: 100%;

      font-size: 0;

      display: flex;

      flex-wrap: wrap;

      align-items: center;

      justify-content: space-between; }

      footer .fbot .fob .fm {

        display: inline-block;

        vertical-align: middle;

        color: #999;

        line-height: 1.5; }

        footer .fbot .fob .fm a {

          display: inline-block;

          vertical-align: middle;

          color: #999;

          line-height: 1.5; }

        footer .fbot .fob .fm a:hover {

          color: var(--themes); }



@media (max-width: 800px) {

  footer .ftop .fbt {

    padding: 0px 0 10px;

    border-top: none; }

    footer .ftop .fbt .fbr {

      width: 100%; }

      footer .ftop .fbt .fbr .flist {

        width: 100%;

        border-bottom: solid 1px rgba(0, 0, 0, 0.08);

        position: relative; }

        footer .ftop .fbt .fbr .flist .fit {

          width: 100%;

          margin-bottom: 0;

          padding: 0.25rem 0;

          margin-left: 0; }

          footer .ftop .fbt .fbr .flist .fit a {

            font-size: 16px; }

        footer .ftop .fbt .fbr .flist .ful {

          width: 100%;

          font-size: 0;

          padding-bottom: 0.15rem;

          display: none;

          height: auto; }

          footer .ftop .fbt .fbr .flist .ful a {

            line-height: 2; }

      footer .ftop .fbt .fbr .flist:first-child {

        border-top: none;

        border-top: solid 1px rgba(0, 0, 0, 0.08); }

      footer .ftop .fbt .fbr .flist.has-ful:after {

        content: " ";

        display: inline-block;

        width: 14px;

        height: 8px;

        background-image: url("../images/xx.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.4rem;

        color: #333;

        border: none;

        transition: all ease 0.5s; }

      footer .ftop .fbt .fbr .flist.has-ful.show:after {

        content: " ";

        transform: translateX(0) rotate(180deg); }

    footer .ftop .fbt .fbl {

      width: 100%;

      padding-top: 20px;

      text-align: center; }

      footer .ftop .fbt .fbl .fogo a {

        width: 2.2rem; }

      footer .ftop .fbt .fbl .finp {

        font-size: 14px; }

      footer .ftop .fbt .fbl .share .am {

        width: 0.8rem;

        height: 0.8rem; } }

.question {

  width: 100%;

  padding: 0.5rem 0;

  background-color: #fff; }

  .question .quesm {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center; }

    .question .quesm .qul {

      display: inline-block;

      vertical-align: top;

      width: calc(600 / 1400 * 100%); }

      .question .quesm .qul .qit {

        width: 100%;

        color: #333;

        font-weight: bold;

        line-height: 1.3; }

        .question .quesm .qul .qit p {

          color: #333;

          font-weight: bold;

          line-height: 1.3; }

    .question .quesm .qur {

      display: inline-block;

      vertical-align: top;

      width: calc(750 / 1400 * 100%); }

      .question .quesm .qur .qurom {

        display: inline-block;

        vertical-align: top;

        width: calc(325 / 750 * 100%);

        margin-right: calc(99 / 750 * 100%); }

        .question .quesm .qur .qurom .qc {

          display: block;

          width: 0.42rem;

          height: 0.42rem;

          margin-bottom: 0.22rem; }

          .question .quesm .qur .qurom .qc img {

            width: 100%;

            display: block; }

        .question .quesm .qur .qurom .qiv {

          width: 100%;

          font-weight: bold;

          color: #333;

          line-height: 1.5; }

        .question .quesm .qur .qurom .qip {

          width: 100%;

          color: #999;

          line-height: 1.5;

          margin-top: 0.12rem; }

      .question .quesm .qur .qurom:nth-child(2n) {

        margin-right: 0; }



.question.td {

  border-top: solid 1px rgba(0, 0, 0, 0.08); }



.leave {

  width: 100%;

  padding: 1rem 0;

  background-color: #fbfbfb; }

  .leave .levom {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap;

    background-color: #fff;

    align-items: center; }

    .leave .levom .lel {

      display: inline-block;

      vertical-align: middle;

      width: calc(700 / 1400 * 100%);

      position: relative;

      overflow: hidden; }

      .leave .levom .lel .img {

        width: 100%;

        padding-top: 78.57%; }

    .leave .levom .ler {

      display: inline-block;

      vertical-align: middle;

      width: calc(700 / 1400 * 100%);

      padding: 0.2rem 0.6rem; }

      .leave .levom .ler .lit {

        width: 100%;

        color: #333;

        font-weight: bold;

        line-height: 1.1;

        margin-bottom: 0.25rem; }

      .leave .levom .ler .row {

        width: 100%;

        font-size: 0; }

        .leave .levom .ler .row .input {

          display: inline-block;

          vertical-align: middle;

          width: calc(275 / 580 * 100%);

          margin-right: calc(29 / 580 * 100%);

          margin-bottom: 0.2rem; }

          .leave .levom .ler .row .input .inv {

            width: 100%;

            border: none;

            border-bottom: solid 1px rgba(0, 0, 0, 0.06);

            color: #666;

            line-height: 3;

            height: 3em;

            background-color: transparent; }

        .leave .levom .ler .row .input:nth-child(2n) {

          margin-right: 0; }

        .leave .levom .ler .row .input.w100 {

          width: 100%;

          margin-right: 0; }

      .leave .levom .ler .sub {

        width: 100%;

        font-size: 0;

        margin-top: 0.3rem; }

        .leave .levom .ler .sub .stn {

          display: inline-block;

          vertical-align: middle;

          width: auto;

          background-color: var(--themes);

          color: #fff;

          line-height: 3;

          border-radius: 1.5em;

          padding: 0 0.45rem;

          cursor: pointer;

          border: none;

          transition: all ease 0.5s; }

        .leave .levom .ler .sub .stn:hover {

          animation: salce 0.5s alternate; }



.modular {

  width: 100%; }

  .modular .mitop {

    width: 100%;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    justify-content: space-between;

    margin-bottom: 0.5rem; }

    .modular .mitop .mol {

      display: inline-block;

      vertical-align: middle;

      width: auto;

      max-width: 9.5rem; }

      .modular .mitop .mol .mit {

        width: 100%;

        color: #333;

        font-weight: bold;

        line-height: 1.2; }

        .modular .mitop .mol .mit p {

          color: #333;

          font-weight: bold;

          line-height: 1.2; }

      .modular .mitop .mol .minp {

        width: 100%;

        color: #666;

        line-height: 1.7;

        margin-top: 0.15rem; }

        .modular .mitop .mol .minp p {

          color: #666;

          line-height: 1.7; }

    .modular .mitop .mor {

      display: inline-block;

      vertical-align: middle;

      width: auto; }

      .modular .mitop .mor a {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        background-color: var(--themes);

        color: #fff;

        padding: 0 0.2rem;

        line-height: 3;

        border-radius: 1.5em;

        transition: all ease 0.5s; }

        .modular .mitop .mor a span {

          display: inline-block;

          vertical-align: middle;

          width: 8px;

          margin-left: 0.45rem;

          position: relative;

          top: -0.02rem; }

          .modular .mitop .mor a span img {

            width: 100%;

            display: block;

            filter: grayscale(1000%) brightness(2000%); }

      .modular .mitop .mor a:hover {

        animation: salce 0.5s alternate; }

      .modular .mitop .mor .datas {

        display: inline-block;

        vertical-align: middle;

        width: auto; }

        .modular .mitop .mor .datas .datm {

          display: inline-block;

          vertical-align: middle;

          width: auto;

          margin-left: 0.65rem; }

          .modular .mitop .mor .datas .datm .tum {

            width: 100%;

            color: #333;

            font-weight: bold;

            line-height: 1.1; }

          .modular .mitop .mor .datas .datm .xp {

            width: 100%;

            color: #666;

            line-height: 1.5;

            margin-top: 0.1rem; }

      .modular .mitop .mor .btns {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        font-size: 0; }

        .modular .mitop .mor .btns .btn {

          display: inline-block;

          vertical-align: middle;

          width: 0.6rem;

          height: 0.6rem;

          border-radius: 50%;

          background-color: #eee;

          cursor: pointer; }

          .modular .mitop .mor .btns .btn img {

            width: 100%;

            display: block; }

          .modular .mitop .mor .btns .btn img:first-child {

            display: block; }

          .modular .mitop .mor .btns .btn img:last-child {

            display: none; }

        .modular .mitop .mor .btns .btn:hover {

          background-color: var(--themes); }

          .modular .mitop .mor .btns .btn:hover img:first-child {

            display: none; }

          .modular .mitop .mor .btns .btn:hover img:last-child {

            display: block; }

        .modular .mitop .mor .btns .btn + .btn {

          margin-left: 0.14rem; }

  .modular .midtop {

    width: 100%;

    text-align: center;

    margin-bottom: 0.5rem; }

    .modular .midtop .mit {

      width: 100%;

      color: #333;

      font-weight: bold;

      line-height: 1.2; }

      .modular .midtop .mit p {

        color: #333;

        font-weight: bold;

        line-height: 1.2; }

    .modular .midtop .minps {

      width: 100%;

      color: #666;

      line-height: 1.7;

      margin-top: 0.15rem; }

      .modular .midtop .minps p {

        color: #666;

        line-height: 1.7; }



@media (max-width: 800px) {

  .modular .mitop.tomid {

    text-align: center; }

    .modular .mitop.tomid .mol {

      width: 100%; }

    .modular .mitop.tomid .mor {

      width: 100%;

      margin-top: 15px; } }

.news {

  width: 100%;

  padding: 1rem 0;

  background-color: #fff; }

  .news .newplist {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap; }

    .news .newplist .newpm {

      width: calc(440 / 1400 * 100%);

      display: inline-block;

      vertical-align: top;

      margin-right: calc(39 / 1400 * 100%);

      background-color: #fbfbfb; }

      .news .newplist .newpm .imgs {

        width: 100%;

        position: relative;

        overflow: hidden; }

        .news .newplist .newpm .imgs a {

          width: 100%;

          display: block; }

        .news .newplist .newpm .imgs .img {

          width: 100%;

          padding-top: 63.63%;

          transition: all ease 0.5s; }

        .news .newplist .newpm .imgs .vim {

          position: absolute;

          bottom: 0;

          left: 0;

          right: 0;

          width: 100%;

          background-color: rgba(0, 0, 0, 0.6);

          text-align: center;

          color: #fff;

          line-height: 1.5;

          padding: 0.15rem;

          z-index: 2;

          transition: all ease 0.5s; }

      .news .newplist .newpm .imgs:hover .img {

        transform: scale(1.1); }

      .news .newplist .newpm .imgs:hover .vim {

        background-color: var(--themes); }

      .news .newplist .newpm .poms {

        width: 100%;

        padding: 0 0.25rem; }

        .news .newplist .newpm .poms .piem {

          width: 100%;

          border-bottom: solid 1px rgba(0, 0, 0, 0.08); }

          .news .newplist .newpm .poms .piem a {

            width: 100%;

            display: block;

            padding: 0.2rem 0; }

          .news .newplist .newpm .poms .piem .pm {

            width: 100%;

            color: #333;

            line-height: 1.5;

            font-weight: bold; }

          .news .newplist .newpm .poms .piem .time {

            width: 100%;

            color: #999;

            line-height: 1.5;

            margin-top: 0.06rem; }

        .news .newplist .newpm .poms .piem:last-child {

          border: none; }

        .news .newplist .newpm .poms .piem:hover .pm {

          color: var(--themes); }

    .news .newplist .newpm:nth-child(3n) {

      margin-right: 0; }



.mentech {

  width: 100%;

  background-color: #fbfbfb;

  padding: 1rem 0; }

  .mentech .menpers {

    width: 100%;

    position: relative; }

    .mentech .menpers .swiper-container {

      padding-bottom: .6rem; }

    .mentech .menpers .swiper-pagination {

      bottom: 0; }

    .mentech .menpers .swiper-pagination-bullet {

      display: inline-block;

      vertical-align: middle;

      opacity: 1;

      width: 0.2rem;

      height: 3px;

      border-radius: 0;

      background-color: rgba(0, 0, 0, 0.3);

      transition: all ease 0.5s; }

    .mentech .menpers .swiper-pagination-bullet-active {

      background-color: var(--themes);

      width: 0.4rem; }

    .mentech .menpers .swiper-slide {

      width: 100%;

      position: relative;

      background-color: #fff; }

      .mentech .menpers .swiper-slide a {

        width: 100%;

        display: block;

        padding: 0.4rem 0.5rem 0.2rem; }

      .mentech .menpers .swiper-slide .imgs {

        width: 100%;

        position: relative;

        overflow: hidden; }

        .mentech .menpers .swiper-slide .imgs .img {

          width: 100%;

          padding-top: 140%;

          transition: all ease 0.5s; }

      .mentech .menpers .swiper-slide .sim {

        width: 100%;

        color: #333;

        line-height: 1.5;

        text-align: center;

        font-weight: bold;

        margin-top: 0.2rem; }

    .mentech .menpers .swiper-slide:hover .imgs .img {

      transform: scale(1.1); }

    .mentech .menpers .btn {

      position: absolute;

      z-index: 2;

      top: 50%;

      transform: translateY(-50%);

      width: 0.6rem;

      height: 0.6rem;

      border-radius: 50%;

      background-color: #eee;

      cursor: pointer; }

      .mentech .menpers .btn img {

        width: 100%;

        display: block; }

      .mentech .menpers .btn img:first-child {

        display: block; }

      .mentech .menpers .btn img:last-child {

        display: none; }

    .mentech .menpers .btn:hover {

      background-color: var(--themes); }

      .mentech .menpers .btn:hover img:first-child {

        display: none; }

      .mentech .menpers .btn:hover img:last-child {

        display: block; }

    .mentech .menpers .bl {

      left: -1.2rem; }

    .mentech .menpers .br {

      right: -1.2rem; }



@media (max-width: 1680px) {

  .mentech .menpers .bl {

    left: -0.3rem; }

  .mentech .menpers .br {

    right: -0.3rem; } }

@media (max-width: 800px) {

  .mentech .menpers .bl {

    left: -0.15rem; }

  .mentech .menpers .br {

    right: -0.15rem; } }

.advange {

  width: 100%;

  padding: 1rem 0; }

  .advange .advanper {

    width: 100%;

    position: relative; }

    .advange .advanper .swiper-slide {

      width: 100%;

      padding-top: 0.7rem;

      position: relative; }

      .advange .advanper .swiper-slide .pomg {

        width: 100%;

        background-color: #fbfbfb;

        position: relative;

        padding: 0.9rem 0.55rem 0.6rem; }

        .advange .advanper .swiper-slide .pomg .vit {

          width: 100%;

          color: #333;

          line-height: 1.5;

          font-weight: bold;

          text-align: center; }

        .advange .advanper .swiper-slide .pomg .lx {

          width: 0.36rem;

          height: 2px;

          background-color: var(--themes);

          display: block;

          margin: 0.15rem auto 0.25rem; }

        .advange .advanper .swiper-slide .pomg .sinm {

          width: 100%;

          text-align: justify;

          color: #666;

          line-height: 2;

          height: 8em; }

      .advange .advanper .swiper-slide .voc {

        position: absolute;

        left: 50%;

        transform: translate(-50%, -50%);

        width: 1.3rem;

        height: 1.3rem;

        top: 0; }

        .advange .advanper .swiper-slide .voc .vg {

          width: 100%;

          height: 100%;

          display: block; }

          .advange .advanper .swiper-slide .voc .vg img {

            width: 100%;

            display: block; }

          .advange .advanper .swiper-slide .voc .vg img:first-child {

            display: block; }

          .advange .advanper .swiper-slide .voc .vg img:last-child {

            display: none; }

        .advange .advanper .swiper-slide .voc .vd {

          position: absolute;

          left: 50%;

          top: 50%;
          transform: translate(-50%,-50%);
          width: 0.4rem;

          height: auto;

          z-index: 3; }

          .advange .advanper .swiper-slide .voc .vd img {

            width: 100%;

            display: block; }

    .advange .advanper .swiper-slide:hover .voc .vg img:first-child {

      display: none; }

    .advange .advanper .swiper-slide:hover .voc .vg img:last-child {

      display: block; }

    .advange .advanper .swiper-slide:hover .voc .vd img {

      filter: grayscale(1000%) brightness(2000%); }

    .advange .advanper .btn {

      position: absolute;

      z-index: 2;

      top: 50%;

      transform: translateY(-50%);

      width: 0.6rem;

      height: 0.6rem;

      border-radius: 50%;

      background-color: #eee;

      cursor: pointer; }

      .advange .advanper .btn img {

        width: 100%;

        display: block; }

      .advange .advanper .btn img:first-child {

        display: block; }

      .advange .advanper .btn img:last-child {

        display: none; }

    .advange .advanper .btn:hover {

      background-color: var(--themes); }

      .advange .advanper .btn:hover img:first-child {

        display: none; }

      .advange .advanper .btn:hover img:last-child {

        display: block; }

    .advange .advanper .bl {

      left: -1.2rem; }

    .advange .advanper .br {

      right: -1.2rem; }



@media (max-width: 1680px) {

  .advange .advanper .bl {

    left: -0.3rem; }

  .advange .advanper .br {

    right: -0.3rem; } }

@media (max-width: 800px) {

  .advange .advanper .bl {

    left: -0.15rem; }

  .advange .advanper .br {

    right: -0.15rem; } }

.about {

  width: 100%;

  padding: 1rem 0; }

  .about .abvoms {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    flex-direction: row-reverse; }

    .about .abvoms .abl {

      display: inline-block;

      vertical-align: middle;

      width: calc(660 / 1400 * 100%);

      position: relative;

      overflow: hidden; }

      .about .abvoms .abl .img {

        width: 100%;

        padding-top: 62.12%; }

    .about .abvoms .abr {

      display: inline-block;

      vertical-align: middle;

      width: calc(610 / 1400 * 100%); }

      .about .abvoms .abr .aib {

        width: 100%;

        color: #333;

        font-weight: bold;

        line-height: 1.1;

        margin-bottom: 0.35rem; }

      .about .abvoms .abr .ainp {

        width: 100%;

        color: #666;
        text-align: justify;

        line-height: 1.6; }

        .about .abvoms .abr .ainp p {

          color: #666;

          line-height: 1.6; }

      .about .abvoms .abr .more {

        width: 100%;

        font-size: 0;

        margin-top: 0.335rem; }

        .about .abvoms .abr .more a {

          display: inline-block;

          vertical-align: middle;

          width: auto;

          background-color: var(--themes);

          color: #fff;

          padding: 0 0.2rem;

          line-height: 3;

          border-radius: 1.5em;

          transition: all ease 0.5s; }

          .about .abvoms .abr .more a span {

            display: inline-block;

            vertical-align: middle;

            width: 8px;

            margin-left: 0.45rem;

            position: relative;

            top: -0.02rem; }

            .about .abvoms .abr .more a span img {

              width: 100%;

              display: block;

              filter: grayscale(1000%) brightness(2000%); }

        .about .abvoms .abr .more a:hover {

          animation: salce 0.5s alternate; }

  .about .abtaom {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap;
    justify-content: space-between;

    margin-top: 0.7rem; }

    .about .abtaom .abom {

      width: auto;

      /* width: 25%; */

      display: inline-block;

      vertical-align: top;

      padding-right: 0.2rem; }

      .about .abtaom .abom .xum {

        width: 100%;

        font-size: 0; }

        .about .abtaom .abom .xum .LineNum {

          display: inline-block;

          vertical-align: middle;

          color: #333;

          font-weight: bold;

          line-height: 1; }

        .about .abtaom .abom .xum .xd {

          display: inline-block;

          vertical-align: top;

          color: #333;

          font-weight: bold;

          line-height: 1;

          margin-left: 0.06rem; }

      .about .abtaom .abom .xim {

        width: 100%;

        color: #666;

        line-height: 1.5;

        margin-top: 0.1rem; }



.field {

  width: 100%;

  padding: 1rem 0; }

  .field .fidlper {

    width: 100%; }

    .field .fidlper .swiper-slide {

      width: 100%;

      position: relative; }

      .field .fidlper .swiper-slide a {

        width: 100%;

        display: block; }

      .field .fidlper .swiper-slide .imgs {

        width: 100%;

        position: relative;

        overflow: hidden; }

        .field .fidlper .swiper-slide .imgs .img {

          width: 100%;

          padding-top: 101.45%;

          transition: all ease 0.5s; }

      .field .fidlper .swiper-slide .pom {

        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        display: flex;

        flex-wrap: wrap;

        align-content: space-between;

        z-index: 2;

        padding: 0.4rem; }

        .field .fidlper .swiper-slide .pom .bg1 {

          position: absolute;

          z-index: 1;

          left: 0;

          top: 0;

          width: 100%;

          height: 100%;

          transition: all ease 0.5s;

          opacity: 1; }

        .field .fidlper .swiper-slide .pom .bg2 {

          position: absolute;

          z-index: 1;

          left: 0;

          top: 0;

          width: 100%;

          height: 100%;

          background-color: rgba(0, 73, 206, 0.3);

          transition: all ease 0.5s;

          opacity: 0; }

        .field .fidlper .swiper-slide .pom .ic {

          display: block;

          width: 0.48rem;

          height: 0.48rem;

          position: relative;

          z-index: 2; }

          .field .fidlper .swiper-slide .pom .ic img {

            width: 100%;

            display: block; }

        .field .fidlper .swiper-slide .pom .coms {

          width: 100%;

          position: relative;

          z-index: 2; }

          .field .fidlper .swiper-slide .pom .coms .vic {

            width: 100%;

            color: #fff;

            line-height: 1.5; }

          .field .fidlper .swiper-slide .pom .coms .sim {

            width: 100%;

            color: rgba(255, 255, 255, 0.7);

            margin-top: 0.14rem;

            line-height: 1.5;

            transition: all ease 0.5s;

            height: 1.5em; }

          .field .fidlper .swiper-slide .pom .coms .cod {

            width: 100%;

            font-size: 0; }

            .field .fidlper .swiper-slide .pom .coms .cod span {

              display: inline-block;

              vertical-align: middle;

              width: 0;

              height: 0;

              transition: all ease 0.5s;

              background-color: var(--themes);

              border-radius: 50%; }

              .field .fidlper .swiper-slide .pom .coms .cod span img {

                width: 100%;

                display: block; }

    .field .fidlper .swiper-slide:hover .imgs .img {

      transform: scale(1.1); }

    .field .fidlper .swiper-slide:hover .pom .bg1 {

      opacity: 0; }

    .field .fidlper .swiper-slide:hover .pom .bg2 {

      opacity: 1; }

    .field .fidlper .swiper-slide:hover .pom .coms .sim {

      height: 4.5em; }

    .field .fidlper .swiper-slide:hover .pom .coms .cod span {

      margin-top: 0.2rem;

      width: 0.46rem;

      height: 0.46rem; }



.products {

  width: 100%;

  padding-top: 0.8rem;

  background-color: #fff; }

  .products .pronavs {

    width: 100%; }

    .products .pronavs .swiper-slide {

      width: 100%;

      display: inline-block;

      vertical-align: middle;

      height: auto;

      padding: 0.22rem 0.1rem;

      cursor: pointer; }

      .products .pronavs .swiper-slide .sic {

        width: 0.66rem;

        display: block;

        margin: 0 auto 0.1rem; }

        .products .pronavs .swiper-slide .sic img {

          width: 100%;

          display: block; }

      .products .pronavs .swiper-slide .cim {

        width: 100%;

        color: #666;

        line-height: 1.5;

        text-align: center; }

      .products .pronavs .swiper-slide:after {

        content: ' ';

        position: absolute;

        bottom: 0;

        height: 0.02rem;

        width: 0%;

        left: 50%;

        transform: translateX(-50%);

        background-color: var(--themes);

        opacity: 0;

        transition: all ease 0.5s; }

    .products .pronavs .swiper-slide:hover .cim, .products .pronavs .swiper-slide.on .cim {

      color: var(--themes); }

    .products .pronavs .swiper-slide:hover:after, .products .pronavs .swiper-slide.on:after {

      width: 100%;

      opacity: 1; }

  .products .conpent {

    width: 100%;

    background-color: #fbfbfb;

    padding: 0.5rem 0 1rem; }

    .products .conpent .cenpems {

      width: 100%; }

    .products .conpent .wutem {

      width: 100%;

      display: none; }

    .products .conpent .wutem.on {

      display: block; }

    .products .conpent .wupers {

      position: relative;

      width: 100%; }

      .products .conpent .wupers .swiper-slide {

        width: 100%;

        background-color: #fff; }

        .products .conpent .wupers .swiper-slide a {

          width: 100%;

          display: block; }

        .products .conpent .wupers .swiper-slide .imgs {

          width: 100%;

          position: relative;
          padding: 0.2rem;

          overflow: hidden; }

          .products .conpent .wupers .swiper-slide .imgs .img {

            width: 100%;

            padding-top: 100%;

            transition: all ease 0.5s; }

        .products .conpent .wupers .swiper-slide .lom {

          width: 100%;

          text-align: center;

          padding: 0.15rem;

          color: #333;

          line-height: 1.5; }

      .products .conpent .wupers .swiper-slide:hover .imgs .img {

        transform: scale(1.1); }

      .products .conpent .wupers .swiper-slide:hover .lom {

        background-color: var(--themes);

        color: #fff; }

        .products .conpent .wupers .btn {

          position: absolute;
    
          z-index: 2;
    
          top: 50%;
    
          transform: translateY(-50%);
    
          width: 0.6rem;
    
          height: 0.6rem;
    
          border-radius: 50%;
    
          background-color: #eee;
    
          cursor: pointer; }
    
          .products .conpent .wupers .btn img {
    
            width: 100%;
    
            display: block; }
    
          .products .conpent .wupers .btn img:first-child {
    
            display: block; }
    
          .products .conpent .wupers .btn img:last-child {
    
            display: none; }
    
        .products .conpent .wupers .btn:hover {
    
          background-color: var(--themes); }
    
          .products .conpent .wupers .btn:hover img:first-child {
    
            display: none; }
    
          .products .conpent .wupers .btn:hover img:last-child {
    
            display: block; }
    
        .products .conpent .wupers .bl {
    
          left: -1.2rem; }
    
        .products .conpent .wupers .br {
    
          right: -1.2rem; }
    
    
    
    @media (max-width: 1680px) {
    
      .products .conpent .wupers .bl {
    
        left: -0.3rem; }
    
      .products .conpent .wupers .br {
    
        right: -0.3rem; } }
    
    @media (max-width: 800px) {
    
      .products .conpent .wupers .bl {
    
        left: -0.15rem; }
    
      .products .conpent .wupers .br {
    
        right: -0.15rem; } }



.rightnav {

  position: fixed;

  right: 0.2rem;

  top: 60%;

  transform: translateY(-50%);

  z-index: 10; }

  .rightnav .ritm {

    display: block;

    width: 0.6rem;

    height: 0.6rem;

    border-radius: 50%;

    background-color: #eee;

    cursor: pointer; }

    .rightnav .ritm a {

      width: 100%;

      display: block; }

    .rightnav .ritm .rio {

      width: 100%;

      height: 100%;

      display: block; }

      .rightnav .ritm .rio img {

        width: 100%;

        display: block; }

  .rightnav .ritm + .ritm {

    margin-top: 0.1rem; }

  .rightnav .ritm:hover {

    background-color: var(--themes); }

    .rightnav .ritm:hover .rio img {

      filter: grayscale(1000%) brightness(2000%); }



@media (max-width: 800px) {

  .rightnav .ritm {

    width: 0.8rem;

    height: 0.8rem; } }

.nanner {

  width: 100%;

  position: relative; }

  .nanner .imgs {

    width: 100%;

    position: relative;

    overflow: hidden; }

    .nanner .imgs .img {

      width: 100%;

      padding-top: 29.6875%; }

  .nanner .nox {

    position: absolute;

    left: calc(260 / 1920 * 100%);

    top: 50%;

    transform: translateY(-50%); }

    .nanner .nox .nit {

      width: 100%;

      color: #fff;

      font-weight: bold;

      line-height: 1.5; }

    .nanner .nox .nie {

      width: 100%;

      color: #fff;

      font-weight: bold;

      line-height: 1.5; }



@media (max-width: 1460px) {

  .nanner .nox {

    left: 5%; } }

@media (max-width: 800px) {

  .nanner .nox {

    left: 3%; } }

.crumbs {

  width: 100%;

  background-color: #fff;

  box-shadow: 0px 0px 13px 0px rgba(214, 226, 247, 0.39); }

  .crumbs .column {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    align-items: center;

    font-size: 0; }

    .crumbs .column .colum {

      width: auto;

      font-size: 0;

      display: inline-block;

      vertical-align: middle; }

      .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 .sm {

        display: inline-block;

        vertical-align: middle;

        color: #444;

        line-height: 1rem; }

      .crumbs .column .colum a {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        color: #444;

        line-height: 1rem;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis; }

        .crumbs .column .colum a span {

          display: inline-block;

          color: #444;

          line-height: 1rem;

          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 {

        color: #333; }

        .crumbs .column .colum a:last-child span {

          display: none; }

    .crumbs .column .cul {

      display: inline-block;

      vertical-align: middle;

      flex: 1;

      width: 100%; }

      .crumbs .column .cul .swiper-slide {

        display: inline-block;

        vertical-align: middle;

        width: auto; }

        .crumbs .column .cul .swiper-slide a {

          display: inline-block;

          vertical-align: middle;

          color: #333;

          line-height: 0.7rem;

          width: 100%;

          padding: 0 0.15rem;

          text-align: center;

          transition: all ease 0.5s; }

          .crumbs .column .cul .swiper-slide a span {

            display: inline-block;

            vertical-align: middle;

            position: absolute;

            bottom: 0rem;

            left: 50%;

            transform: translateX(-50%);

            width: 100%;

            height: 0.02rem;

            background-color: var(--themes);

            transition: all ease 0.5s;

            opacity: 0;

            transition: all ease 0.5s; }

      .crumbs .column .cul .swiper-slide.on a {

        background-color: var(--themes);

        color: #fff !important; }

      .crumbs .column .cul .swiper-slide.on:hover a {

        color: #fff !important; }

      .crumbs .column .cul .swiper-slide:hover a {

        color: var(--themes); }

      .crumbs .column .cul .swiper-scrollbar {

        background-color: rgba(0, 0, 0, 0.1);

        left: 0;

        right: 0;

        width: 100%;

        bottom: 0;

        display: none; }

      .crumbs .column .cul .swiper-scrollbar-drag {

        background-color: var(--themes); }

    .crumbs .column .cul.pbs .swiper-container {

      padding-bottom: 0.15rem; }

    .crumbs .column .cul.pbs .swiper-scrollbar {

      display: block; }

  .crumbs .column.xl {

    justify-content: space-between;

    font-size: 0;

    align-items: center; }



@media (max-width: 800px) {

  .crumbs .column {

    flex-direction: column-reverse; }

    .crumbs .column .colum {

      border-bottom: solid 1px #eee; }

    .crumbs .column .cul .swiper-slide a {

      line-height: 0.9rem; } }

.colums {

  width: 100%;

  text-align: right;

  padding-top: 0.1rem; }

  .colums .colum {

    width: auto;

    font-size: 0;

    display: inline-block;

    vertical-align: middle; }

    .colums .colum .home {

      display: inline-block;

      vertical-align: middle;

      width: 16px;

      height: 16px;

      min-width: 16px;

      min-height: 16px;

      margin-right: .1rem;

      position: relative; }

      .colums .colum .home img {

        width: 100%;

        display: block; }

    .colums .colum .sm {

      display: inline-block;

      vertical-align: middle;

      color: #999;

      line-height: 2.25; }

    .colums .colum a {

      display: inline-block;

      vertical-align: middle;

      width: auto;

      color: #999;

      line-height: 2.25;

      overflow: hidden;

      white-space: nowrap;

      text-overflow: ellipsis; }

      .colums .colum a span {

        display: inline-block;

        color: #999;

        line-height: 2.25;

        position: relative;

        margin: 0 .08rem; }

        .colums .colum a span img {

          width: 100%;

          display: block; }

    .colums .colum a:hover {

      color: var(--themes); }

    .colums .colum a:last-child span {

      display: none; }



.applion {

  width: 100%;

  padding-bottom: 1rem; }

  .applion .applom {

    width: 100%;

    padding-top: 0.4rem; }

  .applion .applomlis {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap; }

    .applion .applomlis .aplom {

      display: inline-block;

      vertical-align: top;

      width: calc(433 / 1400 * 100%);

      margin-right: calc(50 / 1400 * 100%);

      margin-bottom: 0.4rem; }

      .applion .applomlis .aplom a {

        width: 100%;

        display: block; }

      .applion .applomlis .aplom .imgs {

        width: 100%;

        position: relative;

        overflow: hidden; }

        .applion .applomlis .aplom .imgs .img {

          width: 100%;

          padding-top: 64.66%;

          transition: all ease 0.5s; }

      .applion .applomlis .aplom .xim {

        width: 100%;

        padding: 0.15rem 0 0.1rem;

        color: #333;

        line-height: 1.5; }

    .applion .applomlis .aplom:nth-child(3n) {

      margin-right: 0; }

    .applion .applomlis .aplom:hover .imgs .img {

      transform: scale(1.1); }

    .applion .applomlis .aplom:hover .xim {

      color: var(--themes); }



.appdtail {

  width: 100%;

  background-color: #fbfbfb;

  padding-bottom: 0.8rem; }



.cations {

  width: 100%;

  padding: 0.8rem 0; }

  .cations .cationlis {

    width: 100%;

    font-size: 0; }

    .cations .cationlis .cavom {

      width: 100%;

      display: flex;

      flex-wrap: wrap;

      align-items: center; }

      .cations .cationlis .cavom .cml {

        display: inline-block;

        vertical-align: middle;

        width: calc(700 / 1400 * 100%);

        position: relative;

        overflow: hidden; }

        .cations .cationlis .cavom .cml .img {

          width: 100%;

          padding-top: 64.28%; }

      .cations .cationlis .cavom .cmr {

        display: inline-block;

        vertical-align: middle;

        width: calc(700 / 1400 * 100%);

        padding: 0.2rem 0 0.2rem 0.6rem; }

        .cations .cationlis .cavom .cmr .cir {

          width: 100%;

          color: #333;

          line-height: 1.5;

          margin-bottom: 0.14rem; }

        .cations .cationlis .cavom .cmr .sinp {

          width: 100%;

          color: #666;

          line-height: 1.7; }

          .cations .cationlis .cavom .cmr .sinp p {

            color: #666;

            line-height: 1.7; }

    .cations .cationlis .cavom:nth-child(2n) {

      flex-direction: row-reverse; }

      .cations .cationlis .cavom:nth-child(2n) .cmr {

        padding: 0.2rem 0.6rem 0.2rem 0rem; }



.mains {

  width: 100%;

  background-color: #fbfbfb;

  padding: 0.6rem 0 0.8rem; }

  .mains .wupers {

    width: 100%; }

    .mains .wupers .swiper-slide {

      width: 100%;

      background-color: #fff; }

      .mains .wupers .swiper-slide a {

        width: 100%;

        display: block; }

      .mains .wupers .swiper-slide .imgs {

        width: 100%;

        position: relative;

        overflow: hidden; }

        .mains .wupers .swiper-slide .imgs .img {

          width: 100%;

          padding-top: 100%;

          transition: all ease 0.5s; }

      .mains .wupers .swiper-slide .lom {

        width: 100%;

        text-align: center;

        padding: 0.15rem;

        color: #333;

        line-height: 1.5; }

    .mains .wupers .swiper-slide:hover .imgs .img {

      transform: scale(1.1); }

    .mains .wupers .swiper-slide:hover .lom {

      background-color: var(--themes);

      color: #fff; }



.solution {

  width: 100%;

  position: relative; }

  .solution .w1400 {

    z-index: 2; }

  .solution .soulms {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    font-size: 0;

    padding-bottom: 0.8rem;

    position: relative;

    padding-top: 0.3rem;

    align-items: flex-start; }

    .solution .soulms .sul {

      width: calc(340 / 1400 * 100%);

      display: inline-block;

      vertical-align: top;

      position: sticky;

      top: 0.9rem; }

      .solution .soulms .sul .sit {

        width: 100%;

        color: #333;

        font-weight: bold;

        line-height: 1.2;

        margin-bottom: 0.45rem; }

        .solution .soulms .sul .sit p {

          color: #333;

          font-weight: bold;

          line-height: 1.2; }

      .solution .soulms .sul .siruls {

        width: 100%;

        background-color: #f8f8f8;

        padding: 0.2rem 0; }

        .solution .soulms .sul .siruls .sirem {

          width: 100%;

          position: relative; }

          .solution .soulms .sul .siruls .sirem .sas {

            width: 100%;

            font-size: 0;

            position: relative;

            padding: 0 0.2rem;

            cursor: pointer; }

            .solution .soulms .sul .siruls .sirem .sas a {

              display: inline-block;

              vertical-align: middle;

              width: auto;

              position: relative;

              line-height: 2.2;

              color: #333; }

              .solution .soulms .sul .siruls .sirem .sas a:after {

                content: ' ';

                position: absolute;

                bottom: 0;

                width: 0;

                left: 0;

                height: 0.02rem;

                border-radius: 0.01rem;

                transition: all ease 0.5s;

                background-color: var(--themes); }

            .solution .soulms .sul .siruls .sirem .sas a:hover {

              color: var(--themes); }

              .solution .soulms .sul .siruls .sirem .sas a:hover:after {

                width: 100%; }

          .solution .soulms .sul .siruls .sirem .sas.on a {

            color: var(--themes); }

            .solution .soulms .sul .siruls .sirem .sas.on a:after {

              width: 100%; }

          .solution .soulms .sul .siruls .sirem .sas.active a {

            color: var(--themes); }

            .solution .soulms .sul .siruls .sirem .sas.active a:after {

              width: 100%; }

          .solution .soulms .sul .siruls .sirem .sevul {

            width: 100%;

            margin-top: 0.1rem;

            display: none; }

            .solution .soulms .sul .siruls .sirem .sevul .sli {

              width: 100%;

              font-size: 0;

              padding: 0 0.38rem; }

              .solution .soulms .sul .siruls .sirem .sevul .sli .as {

                display: inline-block;

                vertical-align: middle;

                width: auto;

                color: #333;

                line-height: 2;
                padding: 0.08rem 0;

                position: relative; }

                .solution .soulms .sul .siruls .sirem .sevul .sli .as:after {

                  content: ' ';

                  position: absolute;

                  bottom: 0;

                  width: 0;

                  left: 0;

                  transition: all ease 0.5s;

                  height: 0.02rem;

                  border-radius: 0.01rem;

                  background-color: var(--themes); }

              .solution .soulms .sul .siruls .sirem .sevul .sli a:hover {

                color: var(--themes); }

            .solution .soulms .sul .siruls .sirem .sevul .sli.active {

              background-color: rgba(0, 73, 206, 0.06); }

              .solution .soulms .sul .siruls .sirem .sevul .sli.active .as {

                color: var(--themes); }

                .solution .soulms .sul .siruls .sirem .sevul .sli.active .as::after {

                  width: 100%; }

            .solution .soulms .sul .siruls .sirem .sevul .sli.hover {

              background-color: rgba(0, 73, 206, 0.06); }

              .solution .soulms .sul .siruls .sirem .sevul .sli.hover .as {

                color: var(--themes); }

                .solution .soulms .sul .siruls .sirem .sevul .sli.hover .as::after {

                  width: 100%; }

        .solution .soulms .sul .siruls .sirem + .sirem {

          margin-top: 0.3rem; }

        .solution .soulms .sul .siruls .sirem.has-seu:after {

          content: ' ';

          cursor: pointer;

          background-image: url("../images/x2.png");

          width: 16px;

          height: 9px;

          background-size: 100% 100%;

          position: absolute;

          right: 0.2rem;

          top: 0.15rem;

          z-index: 2;

          transition: all ease 0.5s; }

        .solution .soulms .sul .siruls .sirem.has-seu.show:after {

          content: ' ';

          background-image: url("../images/x3.png");

          width: 16px;

          height: 9px;

          background-size: 100% 100%;

          position: absolute;

          right: 0.2rem;

          top: 0.15rem;

          z-index: 2;

          transition: all ease 0.5s;

          transform: rotate(180deg); }

    .solution .soulms .sur {

      width: calc(1060 / 1400 * 100%);

      display: inline-block;

      vertical-align: top;

      padding-left: calc(60 / 1400 * 100%); }

      .solution .soulms .sur .surpm {

        width: 100%; }

        .solution .soulms .sur .surpm .riy {

          width: 100%;

          color: #333;

          line-height: 1.4;

          margin-bottom: 0.25rem; }

        .solution .soulms .sur .surpm .rinp {

          width: 100%;

          color: #333;
          text-align: justify;

          line-height: 1.75; }

          .solution .soulms .sur .surpm .rinp p {

            color: #333;

            line-height: 1.75; }

        .solution .soulms .sur .surpm .sitop {

          width: 100%;

          display: flex;

          flex-wrap: wrap;

          justify-content: space-between;

          align-items: center;

          margin-bottom: 0.26rem; }

          .solution .soulms .sur .surpm .sitop .sil {

            display: inline-block;

            vertical-align: middle;

            width: auto; }

            .solution .soulms .sur .surpm .sitop .sil .lit {

              width: 100%;

              color: #333;

              font-weight: bold;

              line-height: 1.5; }

              .solution .soulms .sur .surpm .sitop .sil .lit span {

                display: inline-block;

                vertical-align: middle;

                height: 0.2rem;

                width: 0.03rem;

                height: 20px;

                width: 2px;

                margin-right: 0.12rem;

                position: relative;

                top: -0.02rem;

                background-color: var(--themes); }

          .solution .soulms .sur .surpm .sitop .sir {

            display: inline-block;

            vertical-align: middle;

            width: auto; }

            .solution .soulms .sur .surpm .sitop .sir .btn {

              display: inline-block;

              vertical-align: middle;

              width: 0.42rem;

              height: 0.42rem;

              border-radius: 50%;

              background-color: #eee;

              cursor: pointer; }

              .solution .soulms .sur .surpm .sitop .sir .btn img {

                width: 100%;

                display: block; }

              .solution .soulms .sur .surpm .sitop .sir .btn img:first-child {

                display: block; }

              .solution .soulms .sur .surpm .sitop .sir .btn img:last-child {

                display: none; }

            .solution .soulms .sur .surpm .sitop .sir .btn:hover {

              background-color: var(--themes); }

              .solution .soulms .sur .surpm .sitop .sir .btn:hover img:first-child {

                display: none; }

              .solution .soulms .sur .surpm .sitop .sir .btn:hover img:last-child {

                display: block; }

            .solution .soulms .sur .surpm .sitop .sir .btn + .btn {

              margin-left: 0.14rem; }

        .solution .soulms .sur .surpm .relapers {

          width: 100%; }

          .solution .soulms .sur .surpm .relapers .swiper-slide {

            width: 100%;

            position: relative; }

            .solution .soulms .sur .surpm .relapers .swiper-slide a {

              width: 100%;

              display: block; }

            .solution .soulms .sur .surpm .relapers .swiper-slide .imgs {

              width: 100%;

              position: relative;

              overflow: hidden;

              border: solid 1px #eee;

              background-color: #fff; }

              .solution .soulms .sur .surpm .relapers .swiper-slide .imgs .img {

                width: 100%;

                padding-top: 100%;

                transition: all ease 0.5s; }

            .solution .soulms .sur .surpm .relapers .swiper-slide .pim {

              width: 100%;

              color: #333;

              text-align: center;

              line-height: 1.5;

              padding: 0.1rem 0; }

          .solution .soulms .sur .surpm .relapers .swiper-slide:hover .imgs .img {

            transform: scale(1.1); }

          .solution .soulms .sur .surpm .relapers .swiper-slide:hover .pim {

            color: var(--themes); }

        .solution .soulms .sur .surpm .poekm {

          width: 100%;

          position: relative; }

          .solution .soulms .sur .surpm .poekm .imgs {

            width: 100%;

            position: relative;

            overflow: hidden; }

            .solution .soulms .sur .surpm .poekm .imgs .img {

              width: 100%;

              padding-top: 30%; }

          .solution .soulms .sur .surpm .poekm .pox {

            position: absolute;

            top: 50%;

            transform: translateY(-50%);

            left: 0.5rem;

            max-width: 90%;

            z-index: 2; }

            .solution .soulms .sur .surpm .poekm .pox .pit {

              width: 100%;

              color: #333;

              line-height: 1.5; }

            .solution .soulms .sur .surpm .poekm .pox .ems {

              width: 100%;

              font-size: 0;

              margin-top: 0.3rem; }

              .solution .soulms .sur .surpm .poekm .pox .ems a {

                display: inline-block;

                vertical-align: middle;

                width: auto;

                background-color: var(--themes);

                color: #fff;

                padding: 0 0.34rem;

                line-height: 3;

                border-radius: 1.5em;

                transition: all ease 0.5s; }

              .solution .soulms .sur .surpm .poekm .pox .ems a:hover {

                animation: salce 0.5s alternate; }

        .solution .soulms .sur .surpm .celaper {

          width: 100%; }

          .solution .soulms .sur .surpm .celaper .swiper-slide {

            width: 100%;

            position: relative; }

            .solution .soulms .sur .surpm .celaper .swiper-slide a {

              width: 100%;

              display: block; }

            .solution .soulms .sur .surpm .celaper .swiper-slide .imgs {

              width: 100%;

              position: relative;

              overflow: hidden;

              background-color: #fff; }

              .solution .soulms .sur .surpm .celaper .swiper-slide .imgs .img {

                width: 100%;

                padding-top: 55.78%;

                transition: all ease 0.5s; }

            .solution .soulms .sur .surpm .celaper .swiper-slide .pim {

              width: 100%;

              color: #333;

              line-height: 1.5;

              padding: 0.15rem 0; }

          .solution .soulms .sur .surpm .celaper .swiper-slide:hover .imgs .img {

            transform: scale(1.1); }

          .solution .soulms .sur .surpm .celaper .swiper-slide:hover .pim {

            color: var(--themes); }

      .solution .soulms .sur .surpm + .surpm {

        margin-top: 0.6rem; }

      .solution .soulms .sur .vtom {

        width: 100%; }

        .solution .soulms .sur .vtom .vit {

          width: 100%;

          color: #333;

          line-height: 1.3; }

          .solution .soulms .sur .vtom .vit p {

            color: #333;

            line-height: 1.3; }

        .solution .soulms .sur .vtom .vinp {

          width: 100%;

          color: #333;

          line-height: 1.75;

          margin-top: 0.2rem; }

          .solution .soulms .sur .vtom .vinp p {

            color: #333;

            line-height: 1.75; }

      .solution .soulms .sur .vtom.tbs {

        margin-top: 0.6rem; }

      .solution .soulms .sur .surmlis {

        width: 100%;

        margin-top: 0.4rem; }

        .solution .soulms .sur .surmlis .surem {

          width: 100%;

          border-bottom: solid 1px #eee;

          display: flex;

          flex-wrap: wrap;

          justify-content: space-between;

          flex-direction: row-reverse;

          padding: 0.6rem 0; }

          .solution .soulms .sur .surmlis .surem .sml {

            display: inline-block;

            vertical-align: middle;

            width: calc(265 / 1005 * 100%);

            position: relative;

            overflow: hidden; }

            .solution .soulms .sur .surmlis .surem .sml .img {

              width: 100%;

              padding-top: 67.92%; }

          .solution .soulms .sur .surmlis .surem .smr {

            display: inline-block;

            vertical-align: top;

            width: calc(640  / 1005 * 100%); }

            .solution .soulms .sur .surmlis .surem .smr .sig {

              width: 100%;
              font-weight: bold;

              color: var(--themes);

              line-height: 1.5; }

            .solution .soulms .sur .surmlis .surem .smr .einp {

              width: 100%;

              color: #666;

              line-height: 1.75;

              margin-top: 0.12rem; }

              .solution .soulms .sur .surmlis .surem .smr .einp p {

                color: #666;

                line-height: 1.75; }

        .solution .soulms .sur .surmlis .surem:first-child {

          padding-top: 0.2rem; }

      .solution .soulms .sur .retulis {

        width: 100%;

        margin-top: 0.5rem; }

        .solution .soulms .sur .retulis .retum {

          width: 100%; }

          .solution .soulms .sur .retulis .retum .retop {

            width: 100%;

            display: flex;

            align-items: center;

            justify-content: space-between;

            background-color: var(--themes);

            padding: 0.1rem 0.3rem;

            cursor: pointer; }

            .solution .soulms .sur .retulis .retum .retop .rel {

              display: inline-block;

              vertical-align: middle;

              width: auto;

              font-size: 0; }

              .solution .soulms .sur .retulis .retum .retop .rel .xc {

                display: inline-block;

                vertical-align: middle;

                width: 0.3rem;

                height: 0.3rem;

                margin-right: 0.14rem; }

                .solution .soulms .sur .retulis .retum .retop .rel .xc img {

                  width: 100%;

                  display: block; }

              .solution .soulms .sur .retulis .retum .retop .rel .xm {

                display: inline-block;

                vertical-align: middle;

                width: auto;

                color: #fff;

                line-height: 1.5; }

            .solution .soulms .sur .retulis .retum .retop .rer {

              display: inline-block;

              vertical-align: middle;

              width: auto; }

              .solution .soulms .sur .retulis .retum .retop .rer .km {

                display: inline-block;

                vertical-align: middle;

                color: #fff;

                line-height: 1.5; }

              .solution .soulms .sur .retulis .retum .retop .rer .ix {

                display: inline-block;

                vertical-align: middle;

                width: 11px;

                margin-left: 0.04rem;

                transition: all ease 0.5s; }

                .solution .soulms .sur .retulis .retum .retop .rer .ix img {

                  width: 100%;

                  display: block; }

          .solution .soulms .sur .retulis .retum .cont {

            width: 100%;

            padding: 0.3rem 0;

            display: none; }

            .solution .soulms .sur .retulis .retum .cont .cinp {

              width: 100%;

              color: #666;

              line-height: 1.7; }

              .solution .soulms .sur .retulis .retum .cont .cinp p {

                color: #666;

                line-height: 1.7; }

            .solution .soulms .sur .retulis .retum .cont .iconlist {

              width: 100%;

              margin-top: 0.3rem; }

              .solution .soulms .sur .retulis .retum .cont .iconlist .iconm {

                width: 100%;

                font-size: 0; }

                .solution .soulms .sur .retulis .retum .cont .iconlist .iconm .ic {

                  display: inline-block;

                  vertical-align: middle;

                  width: 0.9rem;

                  height: 0.9rem;

                  border-radius: 50%;

                  margin-right: 0.3rem;

                  background-color: rgba(0, 73, 206, 0.06); }

                .solution .soulms .sur .retulis .retum .cont .iconlist .iconm .lom {

                  display: inline-block;

                  vertical-align: middle;

                  width: calc(100% - 0.9rem - 0.3rem); }

                  .solution .soulms .sur .retulis .retum .cont .iconlist .iconm .lom .lt {

                    width: 100%;

                    color: #333;
                    font-weight: bold;

                    line-height: 1.5; }

                  .solution .soulms .sur .retulis .retum .cont .iconlist .iconm .lom .em {

                    width: 100%;

                    color: #666;

                    line-height: 1.5; }

              .solution .soulms .sur .retulis .retum .cont .iconlist .iconm + .iconm {

                margin-top: 0.3rem; }

        .solution .soulms .sur .retulis .retum + .retum {

          margin-top: 0.6rem; }

        .solution .soulms .sur .retulis .retum.show .retop .rer .ix {

          transform: rotate(180deg); }

      .solution .soulms .sur .asurmlis {

        width: 100%;

        font-size: 0;

        display: flex;

        flex-wrap: wrap; }

        .solution .soulms .sur .asurmlis .asurm {

          display: inline-block;

          vertical-align: top;

          width: calc(480 / 1000 * 100%);

          margin-right: calc(39 / 1000 * 100%);

          background-color: #fbfbfb;

          padding: 0.3rem 0.4rem 0.5rem; }

          .solution .soulms .sur .asurmlis .asurm .ac {

            display: block;

            margin: 0 auto 0.25rem;

            width: 0.57rem;
 }

            .solution .soulms .sur .asurmlis .asurm .ac img {

              width: 100%;

              display: block; }

          .solution .soulms .sur .asurmlis .asurm .ac.smal {

            width: 0.5rem;

            height: 0.5rem; }

          .solution .soulms .sur .asurmlis .asurm .ait {

            width: 100%;
            font-weight: bold;

            text-align: center;

            color: #333;

            line-height: 1.5; }

          .solution .soulms .sur .asurmlis .asurm .qim {

            width: 100%;

            color: #666;
            text-align: justify;

            line-height: 2;
            max-width: 3.7rem;

            margin-top: 0.14rem; }

          .solution .soulms .sur .asurmlis .asurm .qim.cen {

            text-align: center; }

        .solution .soulms .sur .asurmlis .asurm:nth-child(2n) {

          margin-right: 0; }

      .solution .soulms .sur .policys {

        width: 100%;

        font-size: 0;

        display: flex;

        flex-wrap: wrap;

        margin-top: 0.2rem; }

        .solution .soulms .sur .policys .polim {

          display: inline-block;

          vertical-align: top;

          padding: 0.14rem 0;

          width: 23.5%;

          margin-right: 2%;

          cursor: pointer; }

          .solution .soulms .sur .policys .polim .vc {

            display: block;

            width: 0.95rem;

            height: 0.95rem;

            border-radius: 50%;

            background-color: #fbfbfb;

            margin: 0 auto 0.25rem; }

            .solution .soulms .sur .policys .polim .vc img {

              width: 100%;

              display: block; }

          .solution .soulms .sur .policys .polim .pim {

            width: 100%;

            color: #666;

            line-height: 1.5;

            text-align: center; }

        .solution .soulms .sur .policys .polim:nth-child(4n) {

          margin-right: 0; }

        .solution .soulms .sur .policys .polim:hover .vc {

          background-color: var(--themes); }

          .solution .soulms .sur .policys .polim:hover .vc img {

            filter: grayscale(1000%) brightness(2000%); }

      .solution .soulms .sur .manalist {

        width: 100%;

        margin-top: 0.4rem; }

        .solution .soulms .sur .manalist .matem {

          width: 100%;

          background-color: #fbfbfb;

          padding: 0.4rem 0.3rem; }

          .solution .soulms .sur .manalist .matem .mc {

            display: inline-block;

            vertical-align: top;

            width: 0.49rem;

            height: 0.49rem;

            margin-right: 0.35rem; }

            .solution .soulms .sur .manalist .matem .mc img {

              width: 100%;

              display: block; }

          .solution .soulms .sur .manalist .matem .com {

            display: inline-block;

            vertical-align: top;

            width: calc(100% - 0.49rem - 0.35rem); }

            .solution .soulms .sur .manalist .matem .com .cimp {

              width: 100%;
              font-weight: bold;

              color: #333;

              line-height: 1.5; }

            .solution .soulms .sur .manalist .matem .com .limp {

              width: 100%;

              color: #666;
              text-align: justify;

              line-height: 1.5;

              margin-top: 0.05rem; }

        .solution .soulms .sur .manalist .matem + .matem {

          margin-top: 0.3rem; }

      .solution .soulms .sur .qualieys {

        width: 100%;

        font-size: 0;

        margin-top: 0.4rem; }

        .solution .soulms .sur .qualieys .quam {

          width: 100%;

          font-size: 0; }

          .solution .soulms .sur .qualieys .quam .qc {

            display: inline-block;

            vertical-align: middle;

            width: 0.86rem;

            height: 0.86rem;

            border-radius: 50%;

            margin-right: 0.3rem;

            background-color: #fbfbfb; }

            .solution .soulms .sur .qualieys .quam .qc img {

              width: 100%;

              display: block; }

          .solution .soulms .sur .qualieys .quam .cim {

            width: calc(100% - 0.3rem - 0.86rem);

            display: inline-block;

            vertical-align: middle;
            text-align: justify;

            color: #666;

            line-height: 1.5; }
            .solution .soulms .sur .qualieys .quam .cim .cimp{
              color: #333;
              font-weight: bold;
            }

        .solution .soulms .sur .qualieys .quam + .quam {

          margin-top: 0.3rem; }

      .solution .soulms .sur .suppers {

        width: 100%;

        font-size: 0;

        display: flex;

        flex-wrap: wrap;

        margin-top: 0.4rem; }

        .solution .soulms .sur .suppers .supam {

          display: inline-block;

          vertical-align: top;

          width: calc(308 / 1000 * 100%);

          margin-right: calc(37 / 1000 * 100%);

          cursor: pointer;

          margin-bottom: 0.3rem;

          background-color: #fbfbfb; }

          .solution .soulms .sur .suppers .supam .imgs {

            width: 100%;

            position: relative;

            overflow: hidden; }

            .solution .soulms .sur .suppers .supam .imgs .img {

              width: 100%;

              padding-top: 64.93%;

              transition: all ease 0.5s; }

          .solution .soulms .sur .suppers .supam .lom {

            width: 100%;

            background-color: #fbfbfb;

            padding: 0.25rem 0.3rem; }

            .solution .soulms .sur .suppers .supam .lom .lit {

              width: 100%;

              color: #333;
              font-weight: bold;

              line-height: 1.5; }

            .solution .soulms .sur .suppers .supam .lom .sim {

              width: 100%;

              color: #666;
              text-align: justify;

              line-height: 2;

              margin-top: 0.1rem; }

        .solution .soulms .sur .suppers .supam:nth-child(3n) {

          margin-right: 0; }

      .solution .soulms .sur .lnterlist {

        width: 100%;

        font-size: 0;

        display: flex;

        flex-wrap: wrap; }

        .solution .soulms .sur .lnterlist .litom {

          display: inline-block;

          vertical-align: top;

          width: calc(308 / 1000 * 100%);

          margin-right: calc(37 / 1000 * 100%);

          margin-bottom: 0.35rem;

          background-color: #fbfbfb; }

          .solution .soulms .sur .lnterlist .litom a {

            width: 100%;

            height: 100%;

            display: flex;

            flex-wrap: wrap;

            align-content: space-between; }

          .solution .soulms .sur .lnterlist .litom .vob {

            width: 100%;

            padding: 0.3rem 0.4rem; }

          .solution .soulms .sur .lnterlist .litom .vc {

            margin: 0 auto;

            display: block;

            height: 0.6rem;

            width: auto;

            text-align: center; }

            .solution .soulms .sur .lnterlist .litom .vc img {

              height: 0.6rem;

              display: inline-block;

              vertical-align: middle; }

          .solution .soulms .sur .lnterlist .litom .cit {

            width: 100%;

            margin: 0.2rem 0;
            font-weight: bold;

            color: #333;

            line-height: 1.5;

            text-align: center; }

          .solution .soulms .sur .lnterlist .litom .pim {

            width: 100%;

            color: #666;

            line-height: 1.5;

            text-align: center; }

          .solution .soulms .sur .lnterlist .litom .vmc {

            width: 100%;

            text-align: center;

            color: #666;

            line-height: 1.5;

            padding: 0.1rem; }

        .solution .soulms .sur .lnterlist .litom:nth-child(3n) {

          margin-right: 0; }

      .solution .soulms .sur .standper {

        width: 100%;

        background-color: #fbfbfb;

        padding: 0.2rem;

        margin-top: 0.4rem; }

        .solution .soulms .sur .standper .swiper-slide {

          width: 100%; }

          .solution .soulms .sur .standper .swiper-slide .sic {

            width: 0.9rem;

            height: 0.9rem;

            border-radius: 50%;

            display: block;

            margin: 0 auto;

            background-color: #fff; }

            .solution .soulms .sur .standper .swiper-slide .sic img {

              width: 100%;

              display: block; }

      .solution .soulms .sur .Testlis {

        width: 100%; }

        .solution .soulms .sur .Testlis .teasm {

          width: 100%;

          font-size: 0;

          background-color: #fbfbfb; }

          .solution .soulms .sur .Testlis .teasm .imgs {

            display: inline-block;

            vertical-align: middle;

            width: calc(350 / 1000 * 100%);

            position: relative; }

            .solution .soulms .sur .Testlis .teasm .imgs .img {

              width: 100%;

              padding-top: 65.71%;

              transition: all ease 0.5s; }

          .solution .soulms .sur .Testlis .teasm .pom {

            display: inline-block;

            vertical-align: middle;

            width: calc(650 / 1000 * 100%);

            padding: 0.3rem 0.6rem; }

            .solution .soulms .sur .Testlis .teasm .pom .sinp {

              width: 100%;

              color: #666;

              line-height: 1.5; }

              .solution .soulms .sur .Testlis .teasm .pom .sinp p {

                color: #666;

                line-height: 1.5; }

        .solution .soulms .sur .Testlis .teasm + .teasm {

          margin-top: 0.3rem; }

    .solution .soulms:after {

      content: ' ';

      position: absolute;

      left: calc(340 / 1400 * 100%);

      height: calc(102%);

      width: 1px;

      background-color: #eee;

      bottom: 0;

      z-index: 1; }



@media (max-width: 1460px) {

  .solution:after {

    left: calc(5% + (340 / 1400 * 90%)); } }

@media (max-width: 800px) {

  .solution:after {

    display: none; }

  .solution .soulms:after {

    display: none; }

  .solution .soulms .sul {

    position: relative !important;

    top: 0 !important; }

  .solution .soulms .sur .surpm .poekm .imgs .img {

    padding-top: 40%; } }

.pages {

  width: 100%;

  padding: 0.22rem 0 0.25rem;

  font-size: 0;

  text-align: center;

  margin-top: 0.2rem; }

  .pages .page {

    display: inline-block;

    vertical-align: middle;

    width: 0.5rem;

    height: 0.5rem;

    line-height: 0.5rem;

    text-align: center;

    color: #333;

    border-radius: 50%;

    background-color: #fff;

    border: solid 1px #eee;

    margin: 0 0.05rem 0.1rem; }

  .pages .page.ltn {

    background-image: url("../images/l3.png");

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat; }

  .pages .page.rtn {

    background-image: url("../images/r3.png");

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat; }

  .pages .page.on {

    background-color: var(--themes);

    color: #fff; }

  .pages .page.ltn:hover {

    background-image: url("../images/l2.png");

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat;

    border: solid 1px var(--themes); }

  .pages .page.on.ltn {

    background-image: url("../images/l2.png");

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat;

    border: solid 1px var(--themes); }

  .pages .page.on.rtn {

    background-image: url("../images/r2.png");

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat;

    border: solid 1px var(--themes); }

  .pages .page.rtn:hover {

    background-image: url("../images/r2.png");

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat;

    border: solid 1px var(--themes); }

  .pages .page.auto {

    width: auto;

    padding: 0 0.24rem; }

  .pages .page:hover {

    background-color: var(--themes);

    color: #fff; }



@media (max-width: 900px) {

  .pages .page {

    width: 0.8rem;

    height: 0.8rem;

    line-height: 0.8rem;

    font-size: 16px;

    margin: 0 0.1rem 0.1rem; } }

.newsom {

  width: 100%;

  padding: 0rem 0 0.8rem; }

  .newsom .newom {

    width: 100%;

    padding-top: 0.4rem; }

  .newsom .coolm {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    margin-bottom: 0.5rem; }

    .newsom .coolm .col {

      display: inline-block;

      vertical-align: middle;

      width: calc(440 / 1400 * 100%); }

      .newsom .coolm .col .select {

        display: inline-block;

        vertical-align: middle;

        border: none;

        text-align: left;

        position: relative;

        width: 100%;

        border-radius: 1.7em;

        background-color: #f5f5f5; }

        .newsom .coolm .col .select .select-con {

          width: 100%;

          display: inline-block;

          vertical-align: middle;

          position: relative;

          font-size: 0; }

          .newsom .coolm .col .select .select-con .select-value {

            display: inline-block;

            vertical-align: middle;

            width: 100%;

            line-height: 3.4em;

            height: 3.4em;

            color: #888;

            cursor: pointer;

            padding: 0 .24rem; }

          .newsom .coolm .col .select .select-con select {

            position: absolute;

            width: 100%;

            height: 100%;

            left: 0;

            top: 0;

            z-index: 2;

            opacity: 0; }

            .newsom .coolm .col .select .select-con select option {

              color: #666;

              font-size: .16rem;

              line-height: 2.5;

              background: #fff; }

          .newsom .coolm .col .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;

            /*滚动条里面小方块*/

            /*滚动条里面轨道*/ }

            .newsom .coolm .col .select .select-con .seluls .option {

              width: 100%;

              color: #666;

              line-height: 2.5;

              background: #fff;

              cursor: pointer;

              padding: 0 0.15rem; }

            .newsom .coolm .col .select .select-con .seluls .option:hover {

              background-color: var(--themes);

              color: #fff; }

            .newsom .coolm .col .select .select-con .seluls .option + .option {

              border-top: solid 1px #ddd; }

          .newsom .coolm .col .select .select-con .seluls::-webkit-scrollbar {

            width: 4px;

            height: 4px;

            scrollbar-arrow-color: rgba(0, 0, 0, 0.1); }

          .newsom .coolm .col .select .select-con .seluls::-webkit-scrollbar-thumb {

            border-radius: 10px;

            -webkit-box-shadow: inset 0 0 10px rgba(0, 73, 206, 0.3);

            background: rgba(0, 73, 206, 0.3);

            scrollbar-arrow-color: rgba(0, 0, 0, 0.1); }

          .newsom .coolm .col .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); }

        .newsom .coolm .col .select .select-con:after {

          display: inline-block;

          content: "";

          position: absolute;

          right: .2rem;

          top: 50%;

          transform: translateY(-50%);

          z-index: 1;

          width: 14px;

          height: 8px;

          background-image: url("../images/xx.png");

          background-size: 100%;

          background-repeat: no-repeat;

          background-position: center; }

    .newsom .coolm .cor {

      display: inline-block;

      vertical-align: middle;

      width: calc(920 / 1400 * 100%); }

      .newsom .coolm .cor .input {

        width: 100%;

        display: flex;

        align-items: center;

        border-radius: 1.7em;

        padding: 0 0.1rem 0 0.3rem;

        background-color: #f5f5f5; }

        .newsom .coolm .cor .input .sin {

          display: inline-block;

          vertical-align: middle;

          width: calc(100% - 2.8em);

          padding-right: 0.2rem;

          line-height: 3.4em;

          height: 3.4em;

          color: #888;

          border: none;

          background-color: transparent; }

        .newsom .coolm .cor .input .stn {

          display: inline-block;

          vertical-align: middle;

          height: 2.8em;

          width: 2.8em;

          border-radius: 50%;

          background-color: var(--themes);

          position: relative; }

          .newsom .coolm .cor .input .stn img {

            width: 100%;

            display: block; }

          .newsom .coolm .cor .input .stn .svb {

            position: absolute;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            z-index: 2;

            cursor: pointer;

            opacity: 0; }

  .newsom .newlist {

    width: 100%;

    font-size: 0; }

    .newsom .newlist .newkm {

      width: 100%;

      font-size: 0;

      background-color: #fbfbfb; }

      .newsom .newlist .newkm a {

        width: 100%;

        display: block; }

      .newsom .newlist .newkm .imgs {

        display: inline-block;

        vertical-align: middle;

        width: calc(440 / 1400 * 100%);

        position: relative;

        overflow: hidden; }

        .newsom .newlist .newkm .imgs .img {

          width: 100%;

          padding-top: 63.63%;

          transition: all ease 0.5s; }

      .newsom .newlist .newkm .pom {

        display: inline-block;

        vertical-align: middle;

        width: calc(960 / 1400 * 100%);

        padding: 0.2rem 0.6rem; }

        .newsom .newlist .newkm .pom .ltm {

          display: inline-block;

          vertical-align: middle;

          width: calc(100% - 0.6rem);

          padding-right: 0.6rem; }

          .newsom .newlist .newkm .pom .ltm .lit {

            width: 100%;

            color: #333;

            font-weight: bold;

            line-height: 1.5;

            max-height: 3em; }

          .newsom .newlist .newkm .pom .ltm .time {

            width: 100%;

            color: #999;

            line-height: 1.5;

            margin: 0.2rem 0; }

          .newsom .newlist .newkm .pom .ltm .smk {

            width: 100%;

            color: #999;

            line-height: 1.5;

            max-height: 3em; }

        .newsom .newlist .newkm .pom .rtm {

          display: inline-block;

          vertical-align: middle;

          width: 0.6rem;

          height: 0.6rem;

          border-radius: 50%;

          background-color: #eee; }

          .newsom .newlist .newkm .pom .rtm img {

            width: 100%;

            display: block; }

          .newsom .newlist .newkm .pom .rtm img:first-child {

            display: block; }

          .newsom .newlist .newkm .pom .rtm img:last-child {

            display: none; }

    .newsom .newlist .newkm:hover .imgs .img {

      transform: scale(1.1); }

    .newsom .newlist .newkm:hover .pom .ltm .lit {

      color: var(--themes); }

    .newsom .newlist .newkm:hover .pom .rtm {

      background-color: var(--themes); }

      .newsom .newlist .newkm:hover .pom .rtm img:first-child {

        display: none; }

      .newsom .newlist .newkm:hover .pom .rtm img:last-child {

        display: block; }

    .newsom .newlist .newkm + .newkm {

      margin-top: 0.4rem; }



.details {

  width: 100%;

  padding-bottom: 0.6rem; }

  .details .detail {

    width: 100%;

    padding-top: 0.4rem; }

    .details .detail .dit {

      width: 100%;

      text-align: center;

      color: #333;

      line-height: 1.2; }

      .details .detail .dit p {

        text-align: center;

        color: #333;

        line-height: 1.2; }

    .details .detail .time {

      width: 100%;

      text-align: center;

      color: #888;

      line-height: 1.5;

      margin: 0.3rem 0; }

    .details .detail .share {

      width: 100%;

      font-size: 0;

      display: flex;

      align-items: center; }

      .details .detail .share .lx {

        display: inline-block;

        vertical-align: middle;

        flex: 1;

        height: 1px;

        background-color: #e7e7e7; }

      .details .detail .share .mon {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        font-size: 0;

        margin: 0 0.1rem; }

        .details .detail .share .mon .an {

          display: inline-block;

          vertical-align: middle;

          /*width: 0.3rem;*/

          height: 0.3rem;

          margin: 0 0.1rem; }

          .details .detail .share .mon .an a, .details .detail .share .mon .an img {

            height: 100%;
            max-width:none;

            display: block; }

          .details .detail .share .mon .an img:first-child {

            display: block; }

          .details .detail .share .mon .an img:last-child {

            display: none; }

        .details .detail .share .mon .an:hover img:first-child {

          display: none; }

        .details .detail .share .mon .an:hover img:last-child {

          display: block; }

    .details .detail .dinp {

      width: 100%;

      padding: 0.6rem 0;

      color: #333;

      line-height: 1.7; }

      .details .detail .dinp span, .details .detail .dinp p {

        color: #333;

        line-height: 1.7; }

      .details .detail .dinp img {

        max-width: 100%; }



.related {

  width: 100%;

  padding: 0.5rem 0; }

  .related .midtop {

    width: 100%; }

  .related .lateper {

    width: 100%; }

    .related .lateper .swiper-slide {

      width: 100%; }

      .related .lateper .swiper-slide a {

        width: 100%;

        display: block; }

      .related .lateper .swiper-slide .imgs {

        width: 100%;

        position: relative;

        overflow: hidden; }

        .related .lateper .swiper-slide .imgs .img {

          width: 100%;

          padding-top: 63.63%;

          transition: all ease 0.5s; }

      .related .lateper .swiper-slide .coms {

        width: 100%;

        padding: 0.24rem 0.3rem;

        background-color: #fbfbfb; }

        .related .lateper .swiper-slide .coms .xim {

          width: 100%;

          color: #333;

          line-height: 1.3;

          height: 2.6em; }

        .related .lateper .swiper-slide .coms .time {

          width: 100%;

          color: #999;

          line-height: 1.5;

          margin: 0.2rem 0; }

        .related .lateper .swiper-slide .coms .sinp {

          width: 100%;

          color: #999;

          line-height: 1.5;

          height: 3em; }

    .related .lateper .swiper-slide:hover .imgs .img {

      transform: scale(1.1); }

    .related .lateper .swiper-slide:hover .coms .xim {

      color: var(--themes); }

  .related .sub {

    width: 100%;

    margin-top: 0.5rem;

    font-size: 0;

    text-align: center; }

    .related .sub a {

      display: inline-block;

      vertical-align: middle;

      width: auto;

      background-color: var(--themes);

      color: #fff;

      padding: 0 0.2rem;

      line-height: 3;

      border-radius: 1.5em;

      transition: all ease 0.5s; }

      .related .sub a span {

        display: inline-block;

        vertical-align: middle;

        width: 8px;

        margin-left: 0.45rem;

        position: relative;

        top: -0.02rem; }

        .related .sub a span img {

          width: 100%;

          display: block;

          filter: grayscale(1000%) brightness(2000%); }

    .related .sub a:hover {

      animation: salce 0.5s alternate; }



.certifiom {

  width: 100%;

  padding: 0;

  background-color: #fbfbfb;

  padding-bottom: 0.8rem; }

  .certifiom .certiom {

    width: 100%;

    padding-top: 0.4rem; }

  .certifiom .certm {

    width: 100%;

    color: #333;

    line-height: 1.75; }

    .certifiom .certm span, .certifiom .certm p {

      color: #333;

      line-height: 1.75; }

    .certifiom .certm img {

      max-width: 100%; }

  .certifiom .htovm {

    width: 100%;

    margin-top: 0.8rem; }

    .certifiom .htovm .hinp {

      width: 100%;

      color: #333;

      line-height: 1.75; }

      .certifiom .htovm .hinp p {

        color: #333;

        line-height: 1.75; }

    .certifiom .htovm .honavs {

      width: 100%;

      margin-top: 0.4rem;

      margin-bottom: 0.5rem; }

      .certifiom .htovm .honavs .swiper-wrapper.center {

        justify-content: center; }

      .certifiom .htovm .honavs .swiper-slide {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        cursor: pointer;

        line-height: 3;

        font-weight: bold;

        height: 3em;

        position: relative;

        text-align: center;

        min-width: 1.8rem;

        color: #333;

        padding: 0 0.2rem; }

        .certifiom .htovm .honavs .swiper-slide:after {

          content: ' ';

          position: absolute;

          bottom: 0;

          width: 100%;

          height: 1px;

          bottom: 0;

          left: 0;

          right: 0;

          background-color: #eee;

          transition: all ease 0.5s; }

      .certifiom .htovm .honavs .swiper-slide.on {

        color: var(--themes); }

        .certifiom .htovm .honavs .swiper-slide.on:after {

          width: 100%;

          height: 2px;

          background-color: var(--themes); }

      .certifiom .htovm .honavs .swiper-slide:hover {

        color: var(--themes); }

      .certifiom .htovm .honavs .swiper-scrollbar {

        background-color: rgba(0, 0, 0, 0.1);

        left: 0;

        right: 0;

        width: 100%;

        bottom: 0;

        display: none; }

      .certifiom .htovm .honavs .swiper-scrollbar-drag {

        background-color: var(--themes); }

    .certifiom .htovm .honavs.pbs .swiper-container {

      padding-bottom: 0.15rem; }

    .certifiom .htovm .honavs.pbs .swiper-scrollbar {

      display: block; }

    .certifiom .htovm .hconts {

      width: 100%; }

      .certifiom .htovm .hconts .hcoms {

        width: 100%;

        display: none; }

      .certifiom .htovm .hconts .hcoms.on {

        display: block; }

      .certifiom .htovm .hconts .hecomper {

        width: 100%;

        position: relative;

        padding-bottom: 0.3rem; }

        .certifiom .htovm .hconts .hecomper .btn {

          position: absolute;

          z-index: 2;

          top: 50%;

          transform: translateY(-50%);

          width: 0.6rem;

          height: 0.6rem;

          border-radius: 50%;

          background-color: #eee;

          cursor: pointer; }

          .certifiom .htovm .hconts .hecomper .btn img {

            width: 100%;

            display: block; }

          .certifiom .htovm .hconts .hecomper .btn img:first-child {

            display: block; }

          .certifiom .htovm .hconts .hecomper .btn img:last-child {

            display: none; }

        .certifiom .htovm .hconts .hecomper .btn:hover {

          background-color: var(--themes); }

          .certifiom .htovm .hconts .hecomper .btn:hover img:first-child {

            display: none; }

          .certifiom .htovm .hconts .hecomper .btn:hover img:last-child {

            display: block; }

        .certifiom .htovm .hconts .hecomper .bl {

          left: -1.2rem; }

        .certifiom .htovm .hconts .hecomper .br {

          right: -1.2rem; }

        .certifiom .htovm .hconts .hecomper .swiper-slide {

          width: 100%;

          position: relative; }

          .certifiom .htovm .hconts .hecomper .swiper-slide a {

            width: 100%;

            display: block; }

          .certifiom .htovm .hconts .hecomper .swiper-slide .imgs {

            width: 100%;

            position: relative;

            overflow: hidden;

            background-color: #fff;

            padding: 0.4rem 0.5rem 0.2rem; }

            .certifiom .htovm .hconts .hecomper .swiper-slide .imgs .img {

              width: 100%;

              padding-top: 140%;

              transition: all ease 0.5s; }

          .certifiom .htovm .hconts .hecomper .swiper-slide .sim {

            width: 100%;

            color: #333;

            line-height: 2;

            text-align: center;

            font-weight: bold;

            padding: 0.1rem; }

        .certifiom .htovm .hconts .hecomper .swiper-slide:hover .imgs .img {

          transform: scale(1.1); }



@media (max-width: 1680px) {

  .certifiom .htovm .hconts .hecomper .bl {

    left: -0.3rem; }

  .certifiom .htovm .hconts .hecomper .br {

    right: -0.3rem; } }

@media (max-width: 800px) {

  .certifiom .htovm .hconts .hecomper .bl {

    left: -0.15rem; }

  .certifiom .htovm .hconts .hecomper .br {

    right: -0.15rem; } }

.produem {

  width: 100%;

  display: block; }



.prcomt {

  width: 100%;

  padding: 0.4rem 0; }

  .prcomt .toolist {

    width: 100%;

    margin-top: 0.6rem; }

    .prcomt .toolist .tloem {

      width: 100%;

      font-size: 0;

      padding: 0.5rem 0.75rem;

      display: flex;

      flex-wrap: wrap;

      justify-content: space-between;

      align-items: center;

      flex-direction: row-reverse;

      min-height: 5.2rem; }

      .prcomt .toolist .tloem .imgs {

        display: inline-block;

        vertical-align: middle;

        width: calc(800 / 1250 * 100%);

        position: relative;

        overflow: hidden; }

        .prcomt .toolist .tloem .imgs .img {
background-size: contain !important; 
          width: 100%;

          padding-top: 45.86%; }

      .prcomt .toolist .tloem .loxs {

        display: inline-block;

        vertical-align: middle;

        width: calc(400 / 1250 * 100%); }

        .prcomt .toolist .tloem .loxs .lvt {

          width: 100%;

          color: #333;

          line-height: 1.5; }

        .prcomt .toolist .tloem .loxs .lx {

          width: 0.46rem;

          display: block;

          height: 0.03rem;

          background-color: #0049ce;

          margin: 0.4rem 0; }

        .prcomt .toolist .tloem .loxs .linp {

          width: 100%;

          color: #666;

          line-height: 1.5; }

          .prcomt .toolist .tloem .loxs .linp p {

            color: #666;

            line-height: 1.5; }

        .prcomt .toolist .tloem .loxs .more {

          width: 100%;

          font-size: 0;

          margin-top: 0.335rem; }

          .prcomt .toolist .tloem .loxs .more a {

            display: inline-block;

            vertical-align: middle;

            width: auto;

            background-color: var(--themes);

            color: #fff;

            padding: 0 0.2rem;

            line-height: 3;

            border-radius: 1.5em;

            transition: all ease 0.5s; }

            .prcomt .toolist .tloem .loxs .more a span {

              display: inline-block;

              vertical-align: middle;

              width: 8px;

              margin-left: 0.45rem;

              position: relative;

              top: -0.02rem; }

              .prcomt .toolist .tloem .loxs .more a span img {

                width: 100%;

                display: block;

                filter: grayscale(1000%) brightness(2000%); }

          .prcomt .toolist .tloem .loxs .more a:hover {

            animation: salce 0.5s alternate; }

    .prcomt .toolist .tloem + .tloem {

      margin-top: 0.8rem; }

    .prcomt .toolist .tloem:nth-child(2n) {

      flex-direction: row; }

  .prcomt .pronavs {

    width: 100%; }

    .prcomt .pronavs .swiper-slide {

      width: 100%;

      display: inline-block;

      vertical-align: middle;

      height: auto;

      padding: 0.22rem 0.1rem;

      cursor: pointer; }

      .prcomt .pronavs .swiper-slide .sic {

        width: 0.66rem;

        display: block;

        margin: 0 auto 0.1rem; }

        .prcomt .pronavs .swiper-slide .sic img {

          width: 100%;

          display: block; }

      .prcomt .pronavs .swiper-slide .cim {

        width: 100%;

        color: #666;

        line-height: 1.5;

        text-align: center; }

      .prcomt .pronavs .swiper-slide:after {

        content: ' ';

        position: absolute;

        bottom: 0;

        height: 0.02rem;

        width: 0%;

        left: 50%;

        transform: translateX(-50%);

        background-color: var(--themes);

        opacity: 0;

        transition: all ease 0.5s; }

    .prcomt .pronavs .swiper-slide:hover .cim, .prcomt .pronavs .swiper-slide.on .cim {

      color: var(--themes); }

    .prcomt .pronavs .swiper-slide:hover:after, .prcomt .pronavs .swiper-slide.on:after {

      width: 100%;

      opacity: 1; }

  .prcomt .provent {

    width: 100%; }

    .prcomt .provent .prolist {

      width: 100%;

      font-size: 0; }

      .prcomt .provent .prolist .parem {

        display: inline-block;

        vertical-align: top;

        width: calc(320 / 1400 * 100%);

        margin-right: calc(39 / 1400 * 100%);

        background-color: #fff;

        margin-bottom: 0.4rem; }

        .prcomt .provent .prolist .parem a {

          width: 100%;

          display: block; }

        .prcomt .provent .prolist .parem .imgs {

          width: 100%;

          position: relative;
          padding: 0.5rem;

          overflow: hidden;

          border: solid 1px #eeeeee; }

          .prcomt .provent .prolist .parem .imgs .img {

            width: 100%;

            padding-top: 100%;

            transition: all ease 0.5s; }

        .prcomt .provent .prolist .parem .lom {

          width: 100%;

          text-align: center;

          padding: 0.15rem;

          color: #333;

          line-height: 1.5; }

      .prcomt .provent .prolist .parem:hover .imgs .img {

        transform: scale(1.1); }

      .prcomt .provent .prolist .parem:hover .lom {

        background-color: var(--themes);

        color: #fff; }

      .prcomt .provent .prolist .parem:nth-child(4n) {

        margin-right: 0; }

    .prcomt .provent .pages {

      margin-top: 0;

      padding-top: 0; }

  .prcomt .procool {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    margin: 0.5rem 0; }

    .prcomt .procool .sorts {

      display: inline-block;

      vertical-align: middle;

      width: auto;

      text-align: center; }

      .prcomt .procool .sorts .sriem {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        cursor: pointer; }

        .prcomt .procool .sorts .sriem .sm {

          display: inline-block;

          vertical-align: middle;

          color: #333;

          font-weight: bold;

          line-height: 1.5; }

        .prcomt .procool .sorts .sriem .cin {

          display: inline-block;

          vertical-align: middle;

          width: auto;

          margin-left: 0.1rem;

          width: 9px; }

          .prcomt .procool .sorts .sriem .cin .tc {

            width: 9px;

            display: block; }

            .prcomt .procool .sorts .sriem .cin .tc img {

              width: 100%;

              display: block; }

            .prcomt .procool .sorts .sriem .cin .tc img:first-child {

              display: block; }

            .prcomt .procool .sorts .sriem .cin .tc img:last-child {

              display: none; }

          .prcomt .procool .sorts .sriem .cin .bc {

            width: 9px;

            display: block;

            margin-top: 4px; }

            .prcomt .procool .sorts .sriem .cin .bc img {

              width: 100%;

              display: block; }

            .prcomt .procool .sorts .sriem .cin .bc img:first-child {

              display: block; }

            .prcomt .procool .sorts .sriem .cin .bc img:last-child {

              display: none; }

      .prcomt .procool .sorts .sriem.up .sm {

        color: var(--themes); }

      .prcomt .procool .sorts .sriem.up .cin .tc img:first-child {

        display: none; }

      .prcomt .procool .sorts .sriem.up .cin .tc img:last-child {

        display: block; }

      .prcomt .procool .sorts .sriem.down .sm {

        color: var(--themes); }

      .prcomt .procool .sorts .sriem.down .cin .tc img:first-child {

        display: block; }

      .prcomt .procool .sorts .sriem.down .cin .tc img:last-child {

        display: none; }

      .prcomt .procool .sorts .sriem.down .cin .bc img:first-child {

        display: none; }

      .prcomt .procool .sorts .sriem.down .cin .bc img:last-child {

        display: block; }

      .prcomt .procool .sorts .sriem + .sriem {

        margin-left: 0.3rem; }

    .prcomt .procool .seoms {

      display: inline-block;

      vertical-align: middle;

      width: 5rem; }

      .prcomt .procool .seoms .sears {

        width: 100%;

        background-color: #f5f5f5;

        display: flex;

        align-items: center;

        border-radius: 1.6em;

        height: 3.2em;

        padding: 0 0.1rem 0 0.3rem; }

        .prcomt .procool .seoms .sears .stn {

          display: inline-block;

          vertical-align: middle;

          width: calc(3.2em - 0.2rem);

          height: calc(3.2em - 0.2rem);

          border-radius: 50%;

          background-color: var(--themes);

          cursor: pointer;

          position: relative; }

          .prcomt .procool .seoms .sears .stn img {

            width: 100%;

            display: block; }

          .prcomt .procool .seoms .sears .stn .scv {

            position: absolute;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            cursor: pointer;

            z-index: 2;

            opacity: 0; }

        .prcomt .procool .seoms .sears .sin {

          display: inline-block;

          vertical-align: middle;

          width: calc(100% - (3.2em - 0.2rem) - 0.2rem);

          margin-right: 0.2rem;

          color: #888;

          line-height: 3.2;

          height: 3.2em;

          border: none;

          background-color: transparent; }

    .prcomt .procool .rem {

      display: inline-block;

      vertical-align: middle;

      width: auto; }

      .prcomt .procool .rem .rtn {

        display: inline-block;

        vertical-align: middle;

        width: auto; }

        .prcomt .procool .rem .rtn a {

          display: inline-block;

          vertical-align: middle;

          width: auto;

          padding: 0 0.25rem;

          color: #666;

          line-height: 3.2;

          border-radius: 1.6em;

          background-color: #f5f5f5; }

        .prcomt .procool .rem .rtn a:hover {

          background-color: var(--themes);

          color: #fff; }

      .prcomt .procool .rem .rtn + .rtn {

        margin-left: 0.2rem; }

  .prcomt .navcont {

    width: 100%;

    margin-bottom: 0.5rem; }

    .prcomt .navcont .nacomt {

      width: 100%;

      display: none; }

    .prcomt .navcont .nacomt.on {

      display: block; }

    .prcomt .navcont .classify {

      width: 100%;

      padding: 0.24rem 0.4rem 0.14rem;

      font-size: 0;

      background-color: #f5f5f5; }

      .prcomt .navcont .classify a {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        color: #333;

        font-weight: bold;

        line-height: 1.5;

        margin-right: 0.24rem;

        margin-bottom: 0.1rem; }

      .prcomt .navcont .classify a:hover {

        color: var(--themes); }

        .prcomt .navcont .classify a.on{
          color: var(--themes);
        }



.newpront {

  width: 100%;

  padding: 0.8rem 0;

  background-color: #fbfbfb; }

  .newpront .iterm {

    width: 100%; }

    .newpront .iterm .tits {

      width: 100%;

      color: #333;

      line-height: 1.5;

      font-weight: bold;

      margin-bottom: 0.3rem; }

    .newpront .iterm .itemper {

      width: 100%; }

      .newpront .iterm .itemper .swiper-slide {

        width: 100%;

        background-color: #fff; }

        .newpront .iterm .itemper .swiper-slide a {

          width: 100%;

          display: block; }

        .newpront .iterm .itemper .swiper-slide .imgs {

          width: 100%;

          position: relative;

          overflow: hidden;

          border: solid 1px #eeeeee; }

          .newpront .iterm .itemper .swiper-slide .imgs .img {

            width: 100%;

            padding-top: 100%;

            transition: all ease 0.5s;background-size: 0 0 !important;position: relative; }
.newpront .iterm .itemper .swiper-slide .imgs .img img{
              top: 15% !important;left: 15% !important;width: 70% !important;height: 70% !important;    opacity: 1 !important;object-fit: contain;
            }
        .newpront .iterm .itemper .swiper-slide .lom {

          width: 100%;

          text-align: center;

          padding: 0.15rem;

          color: #333;

          line-height: 1.5; }

      .newpront .iterm .itemper .swiper-slide:hover .imgs .img {

        transform: scale(1.1); }

      .newpront .iterm .itemper .swiper-slide:hover .lom {

        background-color: var(--themes);

        color: #fff; }

  .newpront .iterm + .iterm {

    margin-top: 0.5rem; }



.petails {

  width: 100%;

  background-color: rgba(245,245,245,0.2);

  padding-bottom: 0.8rem; }

  .petails .petam {

    width: 100%;

    margin-top: 0.4rem;

    background-color: #fff;

    padding: 0.6rem 0; }

    .petails .petam .petm {

      width: 100%;

      max-width: 11.4rem;

      display: block;

      margin: 0 auto; }

      .petails .petam .petm .pel {

        display: inline-block;

        vertical-align: middle;

        width: calc(460 / 1140 * 100%);

        margin-right: calc(99 / 1140 * 100%); }

        .petails .petam .petm .pel .ptper {

          width: 100%;

          position: relative; }

          .petails .petam .petm .pel .ptper .swiper-slide {

            width: 100%;

            display: block;

            background-color: #fff;

            border-radius: 10px;

            border: solid 1px #eee;

            overflow: hidden; }

            .petails .petam .petm .pel .ptper .swiper-slide .imgs {

              width: 100%;

              position: relative;
              padding: 15%;

              overflow: hidden; }

              .petails .petam .petm .pel .ptper .swiper-slide .imgs .img {
background-size: contain !important;
                width: 100%;

                padding-top: 100%; }

        .petails .petam .petm .pel .pbper {

          width: 100%;

          margin-top: 0.2rem; }

          .petails .petam .petm .pel .pbper .swiper-slide {

            width: 100%;

            display: block;

            background-color: #fff;

            border-radius: 10px;

            border: solid 1px #eee;

            overflow: hidden;

            cursor: pointer; }

            .petails .petam .petm .pel .pbper .swiper-slide .imgs {

              width: 100%;

              position: relative;

              overflow: hidden; }

              .petails .petam .petm .pel .pbper .swiper-slide .imgs .img {

                width: 100%;

                padding-top: 100%; }

          .petails .petam .petm .pel .pbper .swiper-slide.on, .petails .petam .petm .pel .pbper .swiper-slide:hover {

            border: solid 1px var(--themes); }

      .petails .petam .petm .per {

        display: inline-block;

        vertical-align: middle;

        width: calc(550 / 1140 * 100%); }

        .petails .petam .petm .per .lit {

          width: 100%;

          color: #333;

          line-height: 1.5;

          margin-bottom: 0.3rem; }

        .petails .petam .petm .per .linp {

          width: 100%;

          color: #333;
          overflow: hidden;

          line-height: 1.75; }

          .petails .petam .petm .per .linp p {

            color: #333;

            line-height: 1.75; }

        .petails .petam .petm .per .btns {

          width: 100%;

          margin-top: 0.4rem;

          font-size: 0; }

          .petails .petam .petm .per .btns .btn {

            display: inline-block;

            vertical-align: middle;

            width: auto; }

            .petails .petam .petm .per .btns .btn a {

              width: auto;

              display: inline-block;

              vertical-align: middle;

              padding: 0 0.35rem;

              line-height: 3;

              border-radius: 1.5em;

              background-color: #eee;

              color: #333; }

              .petails .petam .petm .per .btns .btn a span {

                display: inline-block;

                vertical-align: middle;

                width: 0.22rem;

                margin-right: 0.2rem;

                position: relative;

                top: -0.02rem; }

                .petails .petam .petm .per .btns .btn a span img {

                  width: 100%;

                  display: block; }

            .petails .petam .petm .per .btns .btn a:hover {

              background-color: var(--themes);

              color: #fff; }

              .petails .petam .petm .per .btns .btn a:hover span img {

                filter: grayscale(1000%) brightness(2000%); }

          .petails .petam .petm .per .btns .btn + .btn {

            margin-left: 0.2rem; }

  .petails .metail {

    width: 100%;

    margin: 0.5rem 0;

    background-color: #fff; }

    .petails .metail .maenavs {

      width: 100%;

      background-color: var(--themes); }

      .petails .metail .maenavs .maenav {

        width: 100%;

        padding: 0 0.5rem; }

        .petails .metail .maenavs .maenav .swiper-wrapper.center {

          justify-content: center; }

        .petails .metail .maenavs .maenav .swiper-container {

          max-width: 15.2rem;

          margin: 0 auto; }

        .petails .metail .maenavs .maenav .swiper-slide {

          display: inline-block;

          vertical-align: middle;

          width: auto;

          margin-right: 0.7rem; }

          .petails .metail .maenavs .maenav .swiper-slide a {

            display: inline-block;

            vertical-align: middle;

            color: #b0c9f7;

            line-height:0.8rem;

            width: auto;

            padding: 0 0.15rem;

            transition: all ease 0.5s; }

        .petails .metail .maenavs .maenav .swiper-slide.on a, .petails .metail .maenavs .maenav .swiper-slide:hover a {

          color: #fff; }

      .petails .metail .maenavs .maenav.fixed {

        position: fixed;

        z-index: 20;

        left: 0;

        right: 0;

        background-color: var(--themes); }

    .petails .metail .mcont {

      width: 100%;

      padding: 0.4rem 0.6rem; }

      .petails .metail .mcont .mitem {

        width: 100%;

        background-color: #fbfbfb;

        padding: 0.4rem; }

        .petails .metail .mcont .mitem .mit {

          width: 100%;

          font-weight: bold;

          color: var(--themes);

          line-height: 1.5;

          margin-bottom: 0.15rem; }

        .petails .metail .mcont .mitem .minp {

          width: 100%;

          color: #333;

          line-height: 1.75; }

          .petails .metail .mcont .mitem .minp p {

            color: #333;

            line-height: 1.75; }

        .petails .metail .mcont .mitem .tables {

          width: 100%; }

          .petails .metail .mcont .mitem .tables .tr {

            width: 100%; }

          .petails .metail .mcont .mitem .tables table {

            width: 100%; }

            .petails .metail .mcont .mitem .tables table tr {

              width: 100%;

              background-color: #f2f2f2; }

            .petails .metail .mcont .mitem .tables table td {

              color: #333;

              line-height: 1.5;

              padding: 0.15rem 10%;

              width: 50%; }

            .petails .metail .mcont .mitem .tables table tr:nth-child(2n) {

              background-color: #fff; }

            .petails .metail .mcont .mitem .tables table tr.head {

              background-color: var(--themes); }

              .petails .metail .mcont .mitem .tables table tr.head td {

                color: #fff; }

            .petails .metail .mcont .mitem .tables table .td1 {

              text-align: left; }

            .petails .metail .mcont .mitem .tables table .td2 {

              text-align: center; }

          .petails .metail .mcont .mitem .tables table, .petails .metail .mcont .mitem .tables tr, .petails .metail .mcont .mitem .tables td {

            border: none; }

        .petails .metail .mcont .mitem .downlist {

          width: 100%;

          font-size: 0;

          display: flex;

          flex-wrap: wrap; }

          .petails .metail .mcont .mitem .downlist .doiem {

            display: inline-block;

            vertical-align: top;

            width: calc(560 / 1180 * 100%);

            margin-right: calc(59 / 1180 * 100%);

            margin-bottom: 0.2rem; }

            .petails .metail .mcont .mitem .downlist .doiem a {

              width: 100%;

              display: block;

              background-color: #fff;

              padding: 0.15rem 0.3rem;

              font-size: 0; }

            .petails .metail .mcont .mitem .downlist .doiem .ic {

              display: inline-block;

              vertical-align: middle;

              width: 22px;

              margin-right: 0.14rem; }

              .petails .metail .mcont .mitem .downlist .doiem .ic img {

                width: 100%;

                display: block; }

            .petails .metail .mcont .mitem .downlist .doiem .pm {

              display: inline-block;

              vertical-align: middle;

              width: calc(100% - 22px - 0.14rem);

              color: #333;

              line-height: 1.5; }

          .petails .metail .mcont .mitem .downlist .doiem:nth-child(2n) {

            margin-right: 0; }

          .petails .metail .mcont .mitem .downlist .doiem:hover a {

            background-color: var(--themes); }

            .petails .metail .mcont .mitem .downlist .doiem:hover a .pm {

              color: #fff; }

            .petails .metail .mcont .mitem .downlist .doiem:hover a .ic img {

              filter: grayscale(1000%) brightness(2000%); }

      .petails .metail .mcont .mitem + .mitem {

        margin-top: 0.5rem; }

  .petails .relateds {

    width: 100%;

    background-color: #fff;

    margin: 0.5rem 0; }

    .petails .relateds .ritop {

      width: 100%;

      background-color: var(--themes);

      font-size: 0;

      display: flex;

      align-items: center;

      justify-content: space-between;

      padding: 0.18rem 0.5rem; }

      .petails .relateds .ritop .rim {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        color: #fff;

        line-height: 1.5; }

      .petails .relateds .ritop .rom {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        font-size: 0; }

        .petails .relateds .ritop .rom .ptn {

          display: inline-block;

          vertical-align: middle;

          width: auto; }

        .petails .relateds .ritop .rom .btn {

          display: inline-block;

          vertical-align: middle;

          width: 0.42rem;

          height: 0.42rem;

          border-radius: 50%;

          cursor: pointer;

          background-color: rgba(255, 255, 255, 0.2); }

          .petails .relateds .ritop .rom .btn img {

            width: 100%;

            display: block; }

          .petails .relateds .ritop .rom .btn img:first-child {

            display: block; }

          .petails .relateds .ritop .rom .btn img:last-child {

            display: none; }

        .petails .relateds .ritop .rom .btn:hover {

          background-color: #fff; }

          .petails .relateds .ritop .rom .btn:hover img:first-child {

            display: none; }

          .petails .relateds .ritop .rom .btn:hover img:last-child {

            display: block; }

        .petails .relateds .ritop .rom .btn + .btn {

          margin-left: 0.1rem; }

    .petails .relateds .latem {

      width: 100%;

      padding: 0.5rem 0.6rem; }

      .petails .relateds .latem .wupers {

        width: 100%; }

        .petails .relateds .latem .wupers .swiper-slide {

          width: 100%;

          background-color: #fff; }

          .petails .relateds .latem .wupers .swiper-slide a {

            width: 100%;

            display: block; }

          .petails .relateds .latem .wupers .swiper-slide .imgs {

            width: 100%;

            position: relative;
            padding: 0.2rem;

            overflow: hidden;

            border: solid 1px #eeeeee; }

            .petails .relateds .latem .wupers .swiper-slide .imgs .img {

              width: 100%;

              padding-top: 100%;
              
              background-size: contain !important;

              transition: all ease 0.5s; }

          .petails .relateds .latem .wupers .swiper-slide .lom {

            width: 100%;

            text-align: center;

            padding: 0.15rem;

            color: #333;

            line-height: 1.5; }

        .petails .relateds .latem .wupers .swiper-slide:hover .imgs .img {

          transform: scale(1.1); }

        .petails .relateds .latem .wupers .swiper-slide:hover .lom {

          background-color: var(--themes);

          color: #fff; }

      .petails .relateds .latem .Inspection {

        width: 100%;

        padding: 0.6rem 0.8rem;

        display: flex;

        align-items: center;

        justify-content: space-between;

        flex-wrap: wrap;

        flex-direction: row-reverse; }

        .petails .relateds .latem .Inspection .xol {

          display: inline-block;

          vertical-align: middle;

          width: calc(488 / 1120 * 100%);

          position: relative;

          overflow: hidden; }

          .petails .relateds .latem .Inspection .xol .imgs {

            width: 100%;

            position: relative;

            overflow: hidden; }

            .petails .relateds .latem .Inspection .xol .imgs .img {

              width: 100%;

              padding-top: 49.18%; }

        .petails .relateds .latem .Inspection .xor {

          display: inline-block;

          vertical-align: middle;

          width: calc(600 / 1120 * 100%); }

          .petails .relateds .latem .Inspection .xor .xit {

            width: 100%;

            color: #333;
            font-weight: bold;

            line-height: 1.5; }

            .petails .relateds .latem .Inspection .xor .xit p {

              color: #333;

              line-height: 1.5; }

          .petails .relateds .latem .Inspection .xor .xip {

            width: 100%;

            color: #666;

            line-height: 1.5;

            margin-top: 0.25rem; }

            .petails .relateds .latem .Inspection .xor .xip p {

              color: #666;

              line-height: 1.5; }

      .petails .relateds .latem .servlist {

        width: 100%;

        font-size: 0;

        display: flex;

        flex-wrap: wrap; }

        .petails .relateds .latem .servlist .serom {

          display: inline-block;

          vertical-align: top;

          width: calc(620 / 1280 * 100%);

          margin-right: calc(39 / 1280 * 100%);

          margin-bottom: 0.3rem;

          position: relative;

          background-color: #fbfbfb;

          overflow: hidden; }

          .petails .relateds .latem .servlist .serom .serom-box {

            width: 100%;

            display: block;

            padding: 0.4rem 1.1rem 0.4rem 0.4rem; }

          .petails .relateds .latem .servlist .serom .tc {

            display: inline-block;

            vertical-align: top;

            width: 0.45rem;

            height: 0.45rem;

            margin-right: 0.3rem; }

            .petails .relateds .latem .servlist .serom .tc img {

              width: 100%;

              display: block; }

          .petails .relateds .latem .servlist .serom .eum {

            display: inline-block;

            vertical-align: top;

            width: calc(100% - 0.45rem - 0.3rem); }

            .petails .relateds .latem .servlist .serom .eum .eit {
              display: block;
              width: 100%;

              font-size: 0; }

              .petails .relateds .latem .servlist .serom .eum .eit .em {

                display: inline-block;

                vertical-align: middle;
                font-weight: bold;

                color: #333;

                line-height: 1.5;

                max-width: calc(100% - 8px - 0.15rem); }

              .petails .relateds .latem .servlist .serom .eum .eit .ei {

                display: inline-block;

                vertical-align: middle;

                width: 8px;

                margin-left: 0.15rem; }

                .petails .relateds .latem .servlist .serom .eum .eit .ei img {

                  width: 100%;

                  display: block; }

                .petails .relateds .latem .servlist .serom .eum .eit .ei img:first-child {

                  display: block; }

                .petails .relateds .latem .servlist .serom .eum .eit .ei img:last-child {

                  display: none; }

            .petails .relateds .latem .servlist .serom .eum .eim {

              width: 100%;

              color: #666;

              line-height: 1.4;

              margin-top: 0.2rem; }

          .petails .relateds .latem .servlist .serom .num {

            position: absolute;

            right: 0.2rem;

            bottom: -0.22rem;

            line-height: 1;

            color: rgba(102, 102, 102, 0.1); }

        .petails .relateds .latem .servlist .serom:nth-child(2n) {

          margin-right: 0; }

        .petails .relateds .latem .servlist .serom:hover .eum .eit .em {

          color: var(--themes); }

        .petails .relateds .latem .servlist .serom:hover .eum .eit .ei img:first-child {

          display: none; }

        .petails .relateds .latem .servlist .serom:hover .eum .eit .ei img:last-child {

          display: block; }

      .petails .relateds .latem .linp {

        width: 100%;

        color: #333;

        line-height: 1.75; }

        .petails .relateds .latem .linp p {

          color: #333;

          line-height: 1.75; }

      .petails .relateds .latem .latemlis {

        width: 100%;

        margin-top: 0.4rem;

        font-size: 0; }

        .petails .relateds .latem .latemlis .laim {

          width: 100%;

          font-size: 0;

          background-color: #fbfbfb; }

          .petails .relateds .latem .latemlis .laim a {

            width: 100%;

            display: block; }

          .petails .relateds .latem .latemlis .laim .imgs {

            display: inline-block;

            vertical-align: middle;

            width: calc(330 / 1280 * 100%);

            position: relative;

            overflow: hidden; }

            .petails .relateds .latem .latemlis .laim .imgs .img {

              width: 100%;

              padding-top: 66.66%;

              transition: all ease 0.5s; }

          .petails .relateds .latem .latemlis .laim .coms {

            display: inline-block;

            vertical-align: middle;

            width: calc(950 / 1280 * 100%);

            padding: 0.2rem 0.4rem; }

            .petails .relateds .latem .latemlis .laim .coms .cit {

              width: 100%;

              font-weight: bold;

              color: #333;

              line-height: 1.4; }

            .petails .relateds .latem .latemlis .laim .coms .nimp {

              width: 100%;

              color: #666;

              line-height: 1.5;

              margin-top: 0.1rem; }

              .petails .relateds .latem .latemlis .laim .coms .nimp p {

                color: #666;

                line-height: 1.5; }

        .petails .relateds .latem .latemlis .laim:hover .imgs .img {

          transform: scale(1.1); }

        .petails .relateds .latem .latemlis .laim:hover .coms .cit {

          color: var(--themes); }

        .petails .relateds .latem .latemlis .laim + .laim {

          margin-top: 0.4rem; }



.comparison {

  width: 100%;

  padding-bottom: 0.8rem; }

  .comparison .parison {

    width: 100%;

    padding-top: 0.4rem; }

  .comparison .pronavs {

    width: 100%; }

    .comparison .pronavs .swiper-slide {

      width: 100%;

      display: inline-block;

      vertical-align: middle;

      height: auto;

      padding: 0.22rem 0.1rem;

      cursor: pointer; }

      .comparison .pronavs .swiper-slide .sic {

        width: 0.66rem;

        display: block;

        margin: 0 auto 0.1rem; }

        .comparison .pronavs .swiper-slide .sic img {

          width: 100%;

          display: block; }

      .comparison .pronavs .swiper-slide .cim {

        width: 100%;

        color: #666;

        line-height: 1.5;

        text-align: center; }

      .comparison .pronavs .swiper-slide:after {

        content: ' ';

        position: absolute;

        bottom: 0;

        height: 0.02rem;

        width: 0%;

        left: 50%;

        transform: translateX(-50%);

        background-color: var(--themes);

        opacity: 0;

        transition: all ease 0.5s; }

    .comparison .pronavs .swiper-slide:hover .cim, .comparison .pronavs .swiper-slide.on .cim {

      color: var(--themes); }

    .comparison .pronavs .swiper-slide:hover:after, .comparison .pronavs .swiper-slide.on:after {

      width: 100%;

      opacity: 1; }

  .comparison .vipst {

    width: 100%;

    margin: 0.3rem 0;

    color: #333;

    line-height: 1.5;font-weight: bold; }

  .comparison .Narrowing {

    width: 100%;

    font-size: 0;
    position: relativez;
    z-index: 2;

    display: flex; }

    .comparison .Narrowing .name {

      display: inline-block;

      vertical-align: middle;

      width: auto;

      color: #333;

      font-size: 0.18rem;

      line-height: 42px;

      margin-right: 0.3rem; }

    .comparison .Narrowing .ropms {

      display: inline-block;

      vertical-align: top;

      flex: 1;

      font-size: 0; }

      .comparison .Narrowing .ropms .rules {

        display: inline-block;

        vertical-align: top;

        width: auto;

        position: relative;

        cursor: pointer;

        margin-right: 0.1rem;

        margin-bottom: 0.2rem; }

        .comparison .Narrowing .ropms .rules .rulae {

          display: inline-block;

          vertical-align: middle;

          width: auto;

          padding: 0 0.52rem 0 0.2rem;

          background-color: #f5f5f5;

          line-height: 3;

          font-size: 14px;

          border-radius: 1.5em; }

        .comparison .Narrowing .ropms .rules .rc {

          display: inline-block;

          vertical-align: middle;

          width: 11px;

          position: absolute;

          right: 0.22rem;

          top: 50%;

          transform: translateY(-50%); }

          .comparison .Narrowing .ropms .rules .rc img {

            width: 100%;

            display: block; }

      .comparison .Narrowing .ropms .rules:hover .rulae {

        background-color: var(--themes);

        color: #fff; }

      .comparison .Narrowing .ropms .rules:hover .rc img {

        filter: grayscale(1000%) brightness(2000%); }
        
        
        
        .comparison .Narrowing .ropms .rules.active:after {
        content: ' ';
        position: absolute;
        left: 0;
          top: 0;
        font-size: 14px;
        line-height: 3;
        height: 3em;
        border-radius: 1.5em;
        border: solid 2px var(--themes);
        width: 100%;
        box-sizing: border-box; }
      .comparison .Narrowing .ropms .rules.active .voms {
        position: absolute;
        bottom: calc(100% + 0.75em);
        left: 50%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.05rem 0.15rem;
        color: #fff;
        font-size: 11px;
        line-height: 1.25;
        background-color: #000;
        transition: all 0.1s ease-out;
        pointer-events: none;
        transform: translate(-50%, 0.5rem);
        visibility: hidden; }
        .comparison .Narrowing .ropms .rules.active .voms:after {
          content: ' ';
          position: absolute;
          top: 100%;
          left: 50%;
          width: 0;
          height: 0;
          margin-left: -10px;
          border-style: solid;
          border-width: 10px 10px 0 10px;
          border-color: #000 transparent transparent transparent; }
        .comparison .Narrowing .ropms .rules.active .voms .vuls {
          width: 100%; }
          .comparison .Narrowing .ropms .rules.active .voms .vuls .sim {
            width: 100%;
            color: #fff;
            line-height: 1.5;
            padding: 0.02rem 0;
            text-align: center; }
      .comparison .Narrowing .ropms .rules.active:hover .voms {
        pointer-events: all;
        visibility: visible;
        transform: translate(-50%, -0.05rem); }
        
        
        
    
      .comparison .Narrowing .ropms .clear {

        display: inline-block;

        vertical-align: top;

        width: auto;

        background-color: var(--themes);

        color: #fff;

        position: relative;

        margin-right: 0.1rem;

        margin-bottom: 0.2rem;

        line-height: 3;

        font-size: 14px;

        border-radius: 1.5em;

        padding: 0 0.2rem; }

  .comparison .compars {

    width: 100%;

    margin-top: 0.3rem;

    display: flex;

    justify-content: space-between;

    align-items: center; }

    .comparison .compars .col {

      display: inline-block;

      vertical-align: middle;

      color: #333;

      line-height: 1.5; font-weight: bold;}

    .comparison .compars .cor {

      display: inline-block;

      vertical-align: middle;

      width: auto;

      z-index: 48;

      position: relative; }

      .comparison .compars .cor .etn {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        padding: 0 0.4rem;

        background-color: var(--themes);

        color: #fff;

        line-height: 3;

        border-radius: 1.5em;

        cursor: pointer;

        position: relative;

        z-index: 9999; }

        .comparison .compars .cor .etn span {

          display: inline-block;

          vertical-align: middle;

          width: 20px;

          margin-right: 0.1rem;

          position: relative;

          top: -0.02rem; }

          .comparison .compars .cor .etn span img {

            width: 100%;

            display: block; }

      .comparison .compars .cor .hidebg {

        position: fixed;

        z-index: 11;

        top: 0;

        right: 0;

        bottom: 0;

        left: 0;

        z-index: 12;

        display: none;

        background-color: rgba(0, 0, 0, 0.01); }

      .comparison .compars .cor .forms {

        box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.1);

        position: absolute;

        top: calc(100% + 0.1rem);

        background-color: #fff;

        right: 0;

        padding: 0.3rem 0.3rem 0.1rem;

        font-size: 0;

        overflow: hidden;

        min-width: calc(170px + 170px + 0.8rem);

        display: none;

        z-index: 14; }

        .comparison .compars .cor .forms .fiem {

          display: inline-block;

          vertical-align: middle;

          width: 170px;

          margin-right: 0.2rem;

          margin-bottom: 0.2rem;

          float: left; }

          .comparison .compars .cor .forms .fiem a {

            width: 100%;

            display: block;

            background-color: #f9f9f9;

            text-align: center;

            color: #333;

            line-height: 3;

            border-radius: 1.5em; }

            .comparison .compars .cor .forms .fiem a .fc {

              width: 20px;

              display: inline-block;

              vertical-align: middle; }

              .comparison .compars .cor .forms .fiem a .fc img {

                width: 100%;

                display: block; }

          .comparison .compars .cor .forms .fiem a:hover {

            background-color: var(--themes);

            color: #fff; }

            .comparison .compars .cor .forms .fiem a:hover .fc img {

              filter: grayscale(1000%) brightness(2000%); }

        .comparison .compars .cor .forms .fiem:nth-child(2n) {

          margin-right: 0;

          float: right; }

    .comparison .compars .cor.show .hidebg {

      display: block; }

    .comparison .compars .cor.show .forms {

      display: block; }

  .comparison .tablesm {

    width: 100%;

    overflow-y: hidden;

    overflow-x: auto;

    margin-top: 0.3rem;

    /*滚动条里面小方块*/

    /*滚动条里面轨道*/ }

    .comparison .tablesm::-webkit-scrollbar {

      width: 6px;

      height: 6px;

      scrollbar-arrow-color: rgba(0, 0, 0, 0.1); }

    .comparison .tablesm::-webkit-scrollbar-thumb {

      border-radius: 10px;

      -webkit-box-shadow: inset 0 0 10px rgba(0, 73, 206, 0.6);

      background: rgba(0, 73, 206, 0.6);

      scrollbar-arrow-color: rgba(0, 0, 0, 0.1); }

    .comparison .tablesm::-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); }

    .comparison .tablesm table {

      border: none;

      border-collapse: collapse;

      color: #333;

      line-height: 1.2;

      width: max-content;

      min-width: 100%; }

      .comparison .tablesm table tr {

        border: none;

        position: relative;

        border-bottom: solid 1px #eee; }

      .comparison .tablesm table .td1 {

        position: sticky;

        top: 0;

        left: 0;

        z-index: 10;

        width: 330px;

        background-color: #fff; }

      .comparison .tablesm table tr.head {

        background-color: #fbfbfb;

        border: none; }

        .comparison .tablesm table tr.head .td1 {

          background-color: #fbfbfb; }

      .comparison .tablesm table .td2 {

        width: 180px;

        text-align: center; }

      .comparison .tablesm table td, .comparison .tablesm table th {

        border: none;

        padding: 0.12rem; }

      .comparison .tablesm table .tdm {

        width: 100%;

        display: flex;

        align-items: center;

        text-align: left; }

        .comparison .tablesm table .tdm .ic {

          display: inline-block;

          vertical-align: middle;

          width: 20px;

          margin-right: 0.3rem;

          position: relative; }

          .comparison .tablesm table .tdm .ic img {

            width: 100%;

            display: block; }

          .comparison .tablesm table .tdm .ic img:first-child {

            display: block; }

          .comparison .tablesm table .tdm .ic img:last-child {

            display: none; }

          .comparison .tablesm table .tdm .ic .viem {

            position: absolute;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            z-index: 2;

            cursor: pointer;

            opacity: 0; }

        .comparison .tablesm table .tdm .ic.selected img:first-child {

          display: none; }

        .comparison .tablesm table .tdm .ic.selected img:last-child {

          display: block; }

        .comparison .tablesm table .tdm .com {

          display: inline-block;

          vertical-align: middle;

          width: auto;

          background-color: #ddd;

          color: #666;

          line-height: 2.6;

          padding: 0 0.3rem;

          border-radius: 1.3em;

          margin-right: 0.4rem; }
          .comparison .tablesm table .tdm .com:hover {
            background-color: var(--themes);
            color: #fff;
            cursor: pointer; }

        .comparison .tablesm table .tdm .com.open {

          background-color: var(--themes);

          color: #fff;

          cursor: pointer; }

        .comparison .tablesm table .tdm .em {

          display: inline-block;

          vertical-align: middle;

          width: auto;

          color: #333;

          line-height: 1.5; }

        .comparison .tablesm table .tdm .pic {

          display: inline-block;

          vertical-align: middle;

          width: 0.8rem;

          margin-right: 0.2rem; }

          .comparison .tablesm table .tdm .pic img {

            width: 100%;

            display: block; }

        .comparison .tablesm table .tdm .roe {

          display: inline-block;

          vertical-align: middle;

          flex: 1; }

          .comparison .tablesm table .tdm .roe .ek {

            width: 100%;

            color: #333;

            line-height: 1.5; }

          .comparison .tablesm table .tdm .roe .vob {

            width: 100%;

            font-size: 0;

            margin-top: 0.1rem; }

            .comparison .tablesm table .tdm .roe .vob a {

              display: inline-block;

              vertical-align: middle;

              background-color: var(--themes);

              color: #fff;

              line-height: 2.5;

              border-radius: 1.5em;

              padding: 0 0.15rem; }
              .comparison .navcont {
                width: 100%;
                margin-bottom: 0.5rem; }
                .comparison .navcont .nacomt {
                  width: 100%;
                  display: none; }
                .comparison .navcont .nacomt.on {
                  display: block; }
                .comparison .navcont .classify {
                  width: 100%;
                     padding: 0.24rem 0.4rem 0.14rem;
                        font-size: 0;
                        background-color: #f5f5f5;
                  }
                  .comparison .navcont .classify a {
                        display: inline-block;
                        vertical-align: middle;
                        width: auto;
                        color: #333;
                        font-weight: bold;
                        line-height: 1.5;
                        margin-right: 0.24rem;
                        margin-bottom: 0.1rem;
                      
                  }
                  /*.comparison .navcont .classify a:hover {*/
                  /*  color: #fff; */
                  /*  background-color: var(--themes);*/
                  /*}*/
                .comparison .navcont .classify a:hover {

                    color: var(--themes); }
            
                    .comparison .navcont .classify a.on{
                      color: var(--themes);
                    }



@media (max-width: 800px) {

  .comparison .tablesm table .td1 {

    width: 210px; } }

.popox {

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.3);

  z-index: 60;

  display: none; }

  .popox .pox {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    background-color: #fff;

    width: 360px;

    padding: 0.3rem;

    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.1);

    max-width: 80%; }

    .popox .pox .pit {

      width: 100%;

      color: #333;

      line-height: 1.5;

      margin-bottom: 0.15rem; }

    .popox .pox .maxen {

      width: 100%;

      font-size: 0;

      margin: 0.15rem 0 0.2rem; }

      .popox .pox .maxen .miem {

        display: inline-block;

        vertical-align: middle;

        width: 48%;

        margin-right: 4%; }

        .popox .pox .maxen .miem .name {

          width: 100%;

          color: #333;

          line-height: 1.5;

          margin-bottom: 0.08rem; }

        .popox .pox .maxen .miem .input {

          width: 100%; }

          .popox .pox .maxen .miem .input .int {

            width: 100%;

            display: block;

            background-color: #f5f5f5;

            border-radius: 1.5em;

            line-height: 3;

            padding: 0 0.2rem;

            color: #666;

            border: none; }

      .popox .pox .maxen .miem:nth-child(2n) {

        margin-right: 0; }

    .popox .pox .xamuls {

      width: 100%;

      overflow: auto;

      height: 2.5rem;

      /*滚动条里面小方块*/

      /*滚动条里面轨道*/ }

      .popox .pox .xamuls::-webkit-scrollbar {

        width: 4px;

        height: 4px;

        scrollbar-arrow-color: rgba(0, 0, 0, 0.1); }

      .popox .pox .xamuls::-webkit-scrollbar-thumb {

        border-radius: 10px;

        -webkit-box-shadow: inset 0 0 10px rgba(0, 73, 206, 0.6);

        background: rgba(0, 73, 206, 0.6);

        scrollbar-arrow-color: rgba(0, 0, 0, 0.1); }

      .popox .pox .xamuls::-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); }

      .popox .pox .xamuls .xli {

        width: 100%;

        padding: 0.04rem 0; }

        .popox .pox .xamuls .xli .label {

          width: 100%;

          display: block;

          position: relative;

          font-size: 0; }

          .popox .pox .xamuls .xli .label .ic {

            display: inline-block;

            vertical-align: middle;

            width: 14px;

            margin-right: 0.15rem; }

            .popox .pox .xamuls .xli .label .ic img {

              width: 100%;

              display: block; }

            .popox .pox .xamuls .xli .label .ic img:first-child {

              display: block; }

            .popox .pox .xamuls .xli .label .ic img:last-child {

              display: none; }

          .popox .pox .xamuls .xli .label .cm {

            display: inline-block;

            vertical-align: middle;

            width: calc(100% - 15px - 0.15rem);

            color: #666;

            line-height: 1.5; }

          .popox .pox .xamuls .xli .label .sitm {

            position: absolute;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            z-index: 2;

            opacity: 0;

            cursor: pointer; }

        .popox .pox .xamuls .xli .label.selected .ic img:first-child {

          display: none; }

        .popox .pox .xamuls .xli .label.selected .ic img:last-child {

          display: block; }

    .popox .pox .sub {

      width: 100%;

      text-align: center;

      font-size: 0;

      margin-top: 0.3rem; }

      .popox .pox .sub .stn {

        display: inline-block;

        vertical-align: middle;

        background-color: var(--themes);

        color: #fff;

        line-height: 2.8;

        padding: 0 0.3rem;

        border-radius: 1.4em;

        width: auto;

        cursor: pointer; }

    .popox .pox .close {

      position: absolute;

      right: 0.2rem;

      top: 0.1rem;

      color: #333;

      cursor: pointer;

      z-index: 2; }



.parisom {

  width: 100%;

  background-color: #fbfbfb;

  padding-bottom: 0.8rem; }

  .parisom .risom {

    width: 100%;

    padding-top: 0.4rem; }

  .parisom .mitn {

    width: 100%;

    font-size: 0;

    margin: 0.3rem 0; }

    .parisom .mitn .col {

      display: inline-block;

      vertical-align: middle;

      width: auto;

      z-index: 48;

      position: relative; }

      .parisom .mitn .col .etn {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        padding: 0 0.4rem;

        background-color: var(--themes);

        color: #fff;

        line-height: 3;

        border-radius: 1.5em;

        cursor: pointer;

        position: relative;

        z-index: 9999; }

        .parisom .mitn .col .etn span {

          display: inline-block;

          vertical-align: middle;

          width: 20px;

          margin-right: 0.1rem;

          position: relative;

          top: -0.02rem; }

          .parisom .mitn .col .etn span img {

            width: 100%;

            display: block; }

      .parisom .mitn .col .hidebg {

        position: fixed;

        z-index: 11;

        top: 0;

        right: 0;

        bottom: 0;

        left: 0;

        z-index: 12;

        display: none;

        background-color: rgba(0, 0, 0, 0.01); }

      .parisom .mitn .col .forms {

        box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.1);

        position: absolute;

        top: calc(100% + 0.1rem);

        background-color: #fff;

        left: 0;

        padding: 0.3rem 0.3rem 0.1rem;

        font-size: 0;

        overflow: hidden;

        min-width: calc(170px + 170px + 0.8rem);

        display: none;

        z-index: 14; }

        .parisom .mitn .col .forms .fiem {

          display: inline-block;

          vertical-align: middle;

          width: 170px;

          margin-right: 0.2rem;

          margin-bottom: 0.2rem;

          float: left; }

          .parisom .mitn .col .forms .fiem a {

            width: 100%;

            display: block;

            background-color: #f9f9f9;

            text-align: center;

            color: #333;

            line-height: 3;

            border-radius: 1.5em; }

            .parisom .mitn .col .forms .fiem a .fc {

              width: 20px;

              display: inline-block;

              vertical-align: middle; }

              .parisom .mitn .col .forms .fiem a .fc img {

                width: 100%;

                display: block; }

          .parisom .mitn .col .forms .fiem a:hover {

            background-color: var(--themes);

            color: #fff; }

            .parisom .mitn .col .forms .fiem a:hover .fc img {

              filter: grayscale(1000%) brightness(2000%); }

        .parisom .mitn .col .forms .fiem:nth-child(2n) {

          margin-right: 0;

          float: right; }

    .parisom .mitn .col.show .hidebg {

      display: block; }

    .parisom .mitn .col.show .forms {

      display: block; }

  .parisom .tablesm {

    width: 100%;

    overflow-y: hidden;

    overflow-x: auto;

    margin-top: 0.3rem;

    /*滚动条里面小方块*/

    /*滚动条里面轨道*/ }

    .parisom .tablesm::-webkit-scrollbar {

      width: 6px;

      height: 6px;

      scrollbar-arrow-color: rgba(0, 0, 0, 0.1); }

    .parisom .tablesm::-webkit-scrollbar-thumb {

      border-radius: 10px;

      -webkit-box-shadow: inset 0 0 10px rgba(0, 73, 206, 0.6);

      background: rgba(0, 73, 206, 0.6);

      scrollbar-arrow-color: rgba(0, 0, 0, 0.1); }

    .parisom .tablesm::-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); }

    .parisom .tablesm table {

      border: none;

      border-collapse: collapse;

      color: #333;

      line-height: 1.2;

      width: max-content;

      min-width: 100%;

      box-sizing: border-box; }

      .parisom .tablesm table tbody {

        width: 100%; }

      .parisom .tablesm table tr {

        border: none;

        position: relative; }

      .parisom .tablesm table tr + tr {

        border-top: solid 1px #fbfbfb; }

      .parisom .tablesm table tr.head {

        background-color: var(--themes); }

        .parisom .tablesm table tr.head th {

          color: #fff;

          text-align: center; }

        .parisom .tablesm table tr.head .td1 {

          text-align: center;

          background-color: var(--themes);

          border-right: solid 1px var(--themes); }

        .parisom .tablesm table tr.head .td2 {

          text-align: center;

          background-color: var(--themes);

          border-right: solid 1px var(--themes); }

        .parisom .tablesm table tr.head td + td {

          border-left: solid 1px var(--themes); }

      .parisom .tablesm table table, .parisom .tablesm table tr, .parisom .tablesm table td, .parisom .tablesm table th {

        border: none; }

      .parisom .tablesm table td, .parisom .tablesm table th {

        text-align: center;

        color: #333;

        line-height: 1.3;

        padding: 0.18rem 0.3rem; }

      .parisom .tablesm table .td1 {
font-weight: bold;
        width: 280px;

        text-align: left;

        position: sticky;

        top: 0;

        left: 0;

        z-index: 10;

        background-color: #fff;

        border-right: solid 1px #eee; }
        .parisom .tablesm table .pic{
          max-width: 150px;
          display: block;
          margin: 0 auto;
        }

      .parisom .tablesm table .td2 {

        width: 279px;

        text-align: center;

        border-right: solid 1px #eee;

        background-color: #fff; }

        .parisom .tablesm table .td2 .ic {

          display: inline-block;

          vertical-align: middle;

          width: 14px;

          position: relative; }

          .parisom .tablesm table .td2 .ic img {

            width: 100%;

            display: block; }

          .parisom .tablesm table .td2 .ic img:first-child {

            display: block; }

          .parisom .tablesm table .td2 .ic img:last-child {

            display: none; }

          .parisom .tablesm table .td2 .ic .viem {

            position: absolute;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            z-index: 2;

            cursor: pointer;

            opacity: 0; }

        .parisom .tablesm table .td2 .ic.selected img:first-child {

          display: none; }

        .parisom .tablesm table .td2 .ic.selected img:last-child {

          display: block; }

      .parisom .tablesm table .td2:last-child {

        border-right: none; }



@media (max-width: 800px) {

  .parisom .tablesm table .td1 {

    width: 210px; } }



    .podsm {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      z-index: 60;
      display: none; }
      .podsm .pok {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        width: 600px;
        padding: 0.3rem;
        box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.1);
        max-width: 90%; }
        .podsm .pok .pit {
          width: 100%;
          color: #333;
          line-height: 1.5;
          margin-bottom: 0.15rem; }
        .podsm .pok .btns {
          width: 100%;
          text-align: right;
          font-size: 0;
          margin-top: 0.3rem; }
          .podsm .pok .btns .btn {
            display: inline-block;
            vertical-align: middle;
            background-color: var(--themes);
            color: #fff;
            line-height: 2.8;
            padding: 0 0.3rem;
            border-radius: 1.4em;
            width: auto;
            cursor: pointer;
            margin-left: 0.2rem; }
        .podsm .pok .clost {
          position: absolute;
          right: 0.2rem;
          top: 0.1rem;
          color: #333;
          cursor: pointer;
          z-index: 2; }
        .podsm .pok .simp {
          width: 100%;
          color: #333;
          line-height: 1.75;
          margin: 0.3rem 0; }
          .podsm .pok .simp p {
            color: #333;
            line-height: 1.75; }
        .podsm .pok .input {
          width: 100%;
          display: block;
          margin: 0.2rem 0; }
          .podsm .pok .input .int {
            width: 100%;
            display: block;
            border-radius: 5px;
            border: solid 1px #ddd;
            line-height: 3;
            height: 3em;
            padding: 0 0.2rem;
            color: #333;
            transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), margin 0.3s ease-out; }
            
.pocox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 60;
  display: none; }
  .pocox .cox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 360px;
    padding: 0.3rem;
    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.1);
    max-width: 80%; }
    .pocox .cox .pit {
      width: 100%;
      color: #333;
      line-height: 1.5;
      margin-bottom: 0.15rem; }
    .pocox .cox .maxen {
      width: 100%;
      font-size: 0;
      margin: 0.15rem 0 0.2rem; }
      .pocox .cox .maxen .miem {
        display: inline-block;
        vertical-align: middle;
        width: 48%;
        margin-right: 4%; }
        .pocox .cox .maxen .miem .name {
          width: 100%;
          color: #333;
          line-height: 1.5;
          margin-bottom: 0.08rem; }
        .pocox .cox .maxen .miem .input {
          width: 100%; }
          .pocox .cox .maxen .miem .input .int {
            width: 100%;
            display: block;
            background-color: #f5f5f5;
            border-radius: 1.5em;
            line-height: 3;
            padding: 0 0.2rem;
            color: #666;
            border: none; }
      .pocox .cox .maxen .miem:nth-child(2n) {
        margin-right: 0; }
      .pocox .cox .maxen .miem.w100 {
        width: 100%;
        margin-right: 0; }
    .pocox .cox .xamuls {
      width: 100%;
      overflow: auto;
      height: 2.5rem;
      /*滚动条里面小方块*/
      /*滚动条里面轨道*/ }
      .pocox .cox .xamuls::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        scrollbar-arrow-color: rgba(0, 0, 0, 0.1); }
      .pocox .cox .xamuls::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 10px rgba(0, 73, 206, 0.6);
        background: rgba(0, 73, 206, 0.6);
        scrollbar-arrow-color: rgba(0, 0, 0, 0.1); }
      .pocox .cox .xamuls::-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); }
      .pocox .cox .xamuls .xli {
        width: 100%;
        padding: 0.04rem 0; }
        .pocox .cox .xamuls .xli .label {
          width: 100%;
          display: block;
          position: relative;
          font-size: 0; }
          .pocox .cox .xamuls .xli .label .ic {
            display: inline-block;
            vertical-align: middle;
            width: 14px;
            margin-right: 0.15rem; }
            .pocox .cox .xamuls .xli .label .ic img {
              width: 100%;
              display: block; }
            .pocox .cox .xamuls .xli .label .ic img:first-child {
              display: block; }
            .pocox .cox .xamuls .xli .label .ic img:last-child {
              display: none; }
          .pocox .cox .xamuls .xli .label .cm {
            display: inline-block;
            vertical-align: middle;
            width: calc(100% - 15px - 0.15rem);
            color: #666;
            line-height: 1.5; }
          .pocox .cox .xamuls .xli .label .sitm {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
            cursor: pointer; }
        .pocox .cox .xamuls .xli .label.selected .ic img:first-child {
          display: none; }
        .pocox .cox .xamuls .xli .label.selected .ic img:last-child {
          display: block; }
    .pocox .cox .sub {
      width: 100%;
      text-align: center;
      font-size: 0;
      margin-top: 0.3rem; }
      .pocox .cox .sub .stn {
        display: inline-block;
        vertical-align: middle;
        background-color: var(--themes);
        color: #fff;
        line-height: 2.8;
        padding: 0 0.3rem;
        border-radius: 1.4em;
        width: auto;
        cursor: pointer; }
    .pocox .cox .closr {
      position: absolute;
      right: 0.2rem;
      top: 0.1rem;
      color: #333;
      cursor: pointer;
      z-index: 2; }

      
@media(max-width: 750px) {  
  .banner .swiper-slide .imgs .img{padding-top: calc(770/750*100%);}
  .banner .swiper-slide .box{top: 10%;left: 0;width: 100%;max-width: 100%;padding: 0 .3rem; transform: translate(0,0);text-align: center;}
  .banner .swiper-slide .box .bit{padding-bottom: .15rem;margin-bottom: .4rem;line-height: 1.15; font-size: .5rem;}
  .banner .swiper-slide .box .binp{margin-bottom: .2rem;font-size: .28rem;line-height: 1.35;}

  .nanner .imgs .img{padding-top: calc(770/750*100%);}
  .nanner .nox{top: 10%;left: 0;width: 100%;max-width: 100%;padding: 0 .3rem; transform: translate(0,0);text-align: center;}
  .nanner .nox .nit{padding-bottom: .15rem;margin-bottom: .4rem;line-height: 1.15; font-size: .5rem;}
}