@charset "UTF-8";

.w1600 {

  width: 16rem;

  margin: 0 auto;

  font-size: 0;

  max-width: 100%; }



@media (max-width: 1660px) {

  .w1600 {

    width: 90%; } }

@media (max-width: 800px) {

  .w1600 {

    width: 94%; } }

:root {

  --themes: #1aa4d4; }



header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 50;

  transition: all ease 0.5s;

  width: 100%;

  background-color: #fff; }

  header .hop {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between; }

  header .logo {

    display: inline-block;

    vertical-align: middle;

    width: 0.9rem; }

    header .logo a, header .logo img {

      width: 100%;

      display: block; }

  header nav {

    display: inline-block;

    vertical-align: middle;

    text-align: right;

    flex: 1;

    text-align: right; }

    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.14rem; }

        header nav .natem .nas a {

          display: inline-block;

          line-height: 1.1rem;

          color: #222;

          position: relative;

          padding: 0 0.1rem;

          transition: all ease 0.5s; }

        header nav .natem .nas .xs {

          display: inline-block;

          vertical-align: middle;

          width: 0.1rem;

          margin-left: 0.1rem;

          display: none; }

          header nav .natem .nas .xs img {

            width: 100%;

            display: block; }

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

            display: block; }

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

            display: none; }

        header nav .natem .nas:after {

          content: ' ';

          position: absolute;

          left: 50%;

          bottom: 0rem;

          transform: translateX(-50%);

          opacity: 0;

          width: 100%;

          height: 3px;

          background-color: var(--themes);

          transition: all ease 0.5s;

          width: 0; }

      header nav .natem .navuls {

        width: 2rem;

        position: absolute;

        z-index: 101;

        left: calc(50%);

        top: 100%;

        transform: translateX(-50%);

        background-color: rgba(255, 255, 255, 0.8);
        max-height: 3rem;
        overflow: auto;

        display: none;

        text-align: center; }
        header nav .natem .navuls::-webkit-scrollbar {
            width: 4px;
            height: 4px;
            scrollbar-arrow-color:rgba(0,0,0,.1);
        }
        /*滚动条里面小方块*/
        header nav .natem .navuls::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 10px rgba(26, 164, 212, 0.8);
            background: rgba(26, 164, 212, 0.8);
            scrollbar-arrow-color:rgba(0,0,0,.1);
        }
        /*滚动条里面轨道*/
        header nav .natem .navuls::-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);
        }

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

        width: 100%;

        position: fixed;

        left: 50%;

        transform: translateX(-50%);

        top: calc(1rem);

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

        display: none;

        text-align: left; }

        header nav .natem .longul .lotem {

          width: 100%;

          display: flex;

          flex-wrap: wrap;

          justify-content: space-between;

          padding: 0.24rem 0 0.5rem; }

        header nav .natem .longul .lonl {

          display: inline-block;

          vertical-align: middle;

          width: calc(1260 / 1680 * 100%); }

          header nav .natem .longul .lonl .lovem {

            width: calc(420 / 1260 * 100%);

            display: inline-block;

            vertical-align: top;

            padding-right: 0.24rem; }

            header nav .natem .longul .lonl .lovem .lit {

              width: 100%;

              font-size: 0;

              margin-bottom: 0.2rem; }

              header nav .natem .longul .lonl .lovem .lit a {

                display: inline-block;

                vertical-align: middle;

                color: #222;

                line-height: 1.4;

                transition: all ease 0.5s;

                padding: 0.06rem 0; }

              header nav .natem .longul .lonl .lovem .lit a:hover {

                color: var(--themes); }

            header nav .natem .longul .lonl .lovem .lul {

              width: 100%; }

              header nav .natem .longul .lonl .lovem .lul a {

                width: 100%;

                display: inline-block;

                vertical-align: top;

                color: #888;

                transition: all ease 0.5s;

                line-height: 2;

                line-height: 1.5;

                padding: 0.05rem 0; }

              header nav .natem .longul .lonl .lovem .lul a:hover {

                color: var(--themes); }

              header nav .natem .longul .lonl .lovem .lul div {

                width: 100%;

                display: inline-block;

                vertical-align: middle;

                color: #888;

                line-height: 2;

                transition: all ease 0.5s; }

        header nav .natem .longul .lonr {

          display: inline-block;

          vertical-align: middle;

          width: calc(235 / 1680 * 100%); }

          header nav .natem .longul .lonr .rom {

            width: 100%;

            position: relative;

            overflow: hidden; }

            header nav .natem .longul .lonr .rom a {

              width: 100%;

              display: block; }

            header nav .natem .longul .lonr .rom .img {

              width: 100%;

              padding-top: 146.58%;

              transition: all ease 0.5s; }

          header nav .natem .longul .lonr .rom:hover .img {

            transform: scale(1.1); }

    header nav .natem.has-nav .nas .xs {

      display: inline-block; }

    header nav .natem.on .nas a {

      color: var(--themes); }

    header nav .natem.on .nas:after {

      opacity: 1;

      width: 100%; }

    header nav .natem:hover .nas a {

      color: var(--themes); }

    header nav .natem:hover .nas:after {

      opacity: 1;

      width: 100%; }

  header .rav {

    display: inline-block;

    vertical-align: middle;

    width: auto;

    font-size: 0; }

    header .rav .search {

      display: inline-block;

      vertical-align: middle;

      width: auto;

      text-align: center;

      cursor: pointer;

      position: relative;

      width: 0.4rem;

      height: 0.4rem;

      margin-left: 0.4rem;

      display: none; }

      header .rav .search .sc {

        display: inline-block;

        vertical-align: middle;

        width: 24px;

        position: absolute;

        left: 50%;

        top: 50%;

        border-radius: 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: 19px;

          height: 19px;

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

        width: 100%;

        height: 100%;

        text-align: center;

        color: #333;

        font-size: 20px;

        line-height: 24px;

        text-align: center;

        position: absolute;

        z-index: 3;

        left: 50%;

        top: 50%;

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

        display: none; }

    header .rav .lauges {

      display: inline-block;

      vertical-align: middle;

      width: auto;

      font-size: 0; }

      header .rav .lauges .ltn {

        display: inline-block;

        vertical-align: middle;

        width: auto; }

        header .rav .lauges .ltn a {

          display: inline-block;

          vertical-align: middle;

          color: #222;

          line-height: 1.5; }

        header .rav .lauges .ltn a:hover {

          color: var(--themes); }

      header .rav .lauges .ld {

        display: inline-block;

        vertical-align: middle;

        width: 1px;

        background-color: #eee;

        height: 0.2rem;

        margin: 0 0.12rem; }

    header .rav .form {

      display: inline-block;

      vertical-align: middle;

      width: 1.7rem;

      background-color: #eee;

      border: solid 1px #e5e5e5;

      line-height: 36px;

      border-radius: 18px;

      padding: 0 0.2rem;

      margin-right: 0.24rem;

      margin-left: 0.24rem; }

      header .rav .form .fin {

        display: inline-block;

        vertical-align: middle;

        width: calc(100% - 18px);

        height: 36px;

        line-height: 36px;

        border: none;

        background-color: transparent;

        color: #333;

        padding-right: 0.14rem; }

      header .rav .form .stv {

        display: inline-block;

        vertical-align: middle;

        width: 18px;

        position: relative; }

        header .rav .form .stv img {

          width: 100%;

          display: block; }

        header .rav .form .stv .stt {

          position: absolute;

          left: 0;

          top: 0;

          width: 100%;

          height: 100%;

          cursor: pointer;

          z-index: 2;

          opacity: 0; }



@media (max-width: 800px) {

  header .hop {

    align-items: center;

    padding: 0.1rem 0;

    height: calc(40px + 0.2rem); }

    header .hop nav {

      width: 100%;

      position: fixed;

      right: 0;

      top: calc(40px + 0.2rem);

      left: auto;

      height: calc(100vh - 40px - 0.2rem);

      background-color: #fff;

      margin-right: 0;

      overflow: auto;

      z-index: 500;

      transition: transform .3s;

      padding-left: 0.1rem;

      padding: 0.1rem;

      display: block;

      text-align: left;

      display: none;

      border-top: solid 1px #e5e5e5; }

      header .hop 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 .hop nav .natem .nas {

          width: auto;

          display: inline-block;

          text-align: left;

          width: 100%;

          margin: 0; }

          header .hop 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 .hop nav .natem .nas .ik {

            display: none !important; }

          header .hop nav .natem .nas a:hover {

            color: var(--themes);

            background-color: transparent; }

        header .hop 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 .hop nav .natem .navuls ul {

            width: 100%;

            padding: 0.1rem 0.2rem; }

            header .hop nav .natem .navuls ul li {

              width: 100%;

              display: block;

              position: relative;

              margin-bottom: 0; }

              header .hop 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 .hop nav .natem .navuls ul li .ns:hover {

                color: var(--themes); }

            header .hop nav .natem .navuls ul li + li {

              border-top: solid 1px #eee; }

            header .hop nav .natem .navuls ul li:hover .ns {

              background-color: transparent;

              color: var(--themes); }

            header .hop nav .natem .navuls ul li.has-the:after {

              display: block; }

        header .hop nav .natem:before {

          display: none !important; }

        header .hop nav .natem .prosubnav {

          display: none; }

      header .hop nav .natem.on .nas:after {

        display: none; }

      header .hop nav .natem.has-nav .nas .xs {

        display: none; }

      header .hop 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 .hop nav .natem.has-nav.show:after {

        content: "-"; }

      header .hop nav .natem.animate {

        opacity: 1;

        transform: translate(0, 0); }

    header .hop .rav .menu {

      width: 30px;

      height: 30px;

      display: inline-block;

      margin-left: 0.24rem; }

      header .hop .rav .menu .clk {

        line-height: 30px;

        color: #fff;

        color: #333; }

    header .hop .rav .form {

      width: 140px; }

    header .hop .rav .sechom {

      width: 100vw;

      position: fixed;

      left: 0;

      top: calc(40px + 0.2rem);

      padding: 0.15rem; }

    header .hop nav.hei {

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

      border-top: solid 1px rgba(255, 255, 255, 0.15); }

      header .hop nav.hei .natem .nas a {

        color: #fff; }

      header .hop nav.hei .natem .nas a:hover {

        color: var(--themes); }

      header .hop nav.hei .natem .navuls {

        background-color: transparent; }

        header .hop nav.hei .natem .navuls ul li .ns {

          background-color: transparent;

          color: #fff; }

        header .hop nav.hei .natem .navuls ul li .ns:hover {

          color: var(--themes); }

        header .hop nav.hei .natem .navuls ul li + li {

          border-top: solid 1px rgba(255, 255, 255, 0.15); }

      header .hop nav.hei .natem.has-nav:after {

        color: #fff; }



  header.menu-state .hop .rav .menu img {

    opacity: 0; } }

.banner {

  width: 100%;

  position: relative; }

  .banner .swiper-slide {

    width: 100%;

    position: relative; }

    .banner .swiper-slide .pcimgs {

      width: 100%;

      position: relative;

      overflow: hidden;

      display: block; }

      .banner .swiper-slide .pcimgs .img {

        width: 100%;

        padding-top: 42.91%; }

    .banner .swiper-slide .phimgs {

      width: 100%;

      position: relative;

      overflow: hidden;

      display: none; }

      .banner .swiper-slide .phimgs .img {

        width: 100%;

        padding-top: 50%; }

    .banner .swiper-slide .box {

      position: absolute;

      top: 40%;

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

      transform: translateY(-50%);

      z-index: 3;

      width: 8.7rem;

      text-align: left;

      max-width: 80%; }

      .banner .swiper-slide .box .bit {

        width: 100%;

        color: #fff;

        font-weight: bold;

        line-height: 1.2;

        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;

          font-weight: bold;

          line-height: 1.2; }

      .banner .swiper-slide .box .pim {

        width: 100%;

        color: #fff;

        line-height: 1.75;

        margin-top: 0.3rem;

        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 .pim p {

          color: #fff;

          line-height: 1.75; }

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

      position: absolute;

      bottom: 0.45rem;

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

      z-index: 3;

      width: 8.8rem;

      text-align: center;

      max-width: 80%;

      color: #666;

      line-height: 1.6;

      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 .binp p {

        color: #666;

        line-height: 1.6; }

  .banner .swiper-slide-active .box .bit, .banner .swiper-slide-active .box .xid, .banner .swiper-slide-active .box .pim {

    opacity: 1;

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

  .banner .swiper-slide-active .binp {

    opacity: 1;

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

  .banner .swiper-pagination {

    bottom: 0.35rem; }

  .banner .swiper-pagination-bullet {

    display: inline-block;

    vertical-align: middle;

    background-color: #fff;

    opacity: 1;

    width: 0.06rem;

    height: 0.06rem;

    margin: 0 0.12rem;

    transition: all ease 0.5s; }

  .banner .swiper-pagination-bullet-active {

    width: 0.1rem;

    height: 0.1rem;

    border: solid 0.03rem #fff;

    background-color: transparent; }

  .banner .btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    cursor: pointer;

    z-index: 2;

    width: 0.27rem; }

    .banner .btn img {

      width: 100%;

      display: block; }

  .banner .bl {

    left: 0.8rem; }

  .banner .br {

    right: 0.8rem; }



@media (max-width: 1280px) {

  .banner .bl {

    left: 3%; }

  .banner .br {

    right: 3%; } }

@media (max-width: 800px) {

  .banner .swiper-slide .pcimgs {

    display: none; }

  .banner .swiper-slide .phimgs {

    display: block; } }

.searbar {

  width: 100%;

  background-color: #fff;

  padding: 0.35rem 0; }

  .searbar .hotline {

    width: 100%;

    font-size: 0;

    padding: 0 0.2rem; }

    .searbar .hotline .em {

      display: inline-block;

      vertical-align: middle;

      color: var(--themes);

      line-height: 1.8;

      margin-right: 0.2rem; }

    .searbar .hotline .am {

      display: inline-block;

      vertical-align: middle;

      margin-right: 0.2rem; }

      .searbar .hotline .am a {

        display: inline-block;

        vertical-align: middle;

        color: #888;

        line-height: 1.8; }

      .searbar .hotline .am a:hover {

        color: var(--themes); }

  .searbar .searbox {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    margin-top: 0.1rem; }

    .searbar .searbox .sebl {

      display: inline-block;

      vertical-align: middle;

      flex: 1;

      margin-right: 0.5rem; }

      .searbar .searbox .sebl form {

        width: 100%;

        display: block; }

      .searbar .searbox .sebl .int {

        display: inline-block;

        vertical-align: middle;

        width: calc(100% - 2.7rem);

        background-color: #f1f7f8;

        padding: 0 0.2rem; }

        .searbar .searbox .sebl .int .sin {

          display: inline-block;

          vertical-align: middle;

          width: calc(100% - 0.5rem);

          line-height: 3.5;

          height: 3.5em;

          color: #999;

          border: none;

          background-color: transparent; }

        .searbar .searbox .sebl .int .svt {

          display: inline-block;

          vertical-align: middle;

          width: 0.3rem;

          height: 0.3rem;

          margin-left: 0.2rem;

          position: relative; }

          .searbar .searbox .sebl .int .svt img {

            width: 100%;

            display: block; }

          .searbar .searbox .sebl .int .svt input {

            position: absolute;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            cursor: pointer;

            opacity: 0;

            z-index: 2; }

      .searbar .searbox .sebl .stn {

        display: inline-block;

        vertical-align: middle;

        width: 2.7rem; }

        .searbar .searbox .sebl .stn input {

          width: 100%;

          display: block;

          background-color: var(--themes);

          color: #fff;

          line-height: 3.5em;

          text-align: center;

          cursor: pointer;

          border: none; }

    .searbar .searbox .sebr {

      width: auto;

      display: inline-block;

      vertical-align: middle; }

      .searbar .searbox .sebr .tell {

        width: auto;

        font-size: 0;

        display: inline-block;

        vertical-align: middle; }

        .searbar .searbox .sebr .tell .tc {

          display: inline-block;

          vertical-align: middle;

          width: 0.42rem;

          height: 0.42rem;

          border-radius: 50%;

          background-color: var(--themes);

          margin-right: 0.2rem; }

          .searbar .searbox .sebr .tell .tc img {

            width: 100%;

            display: block; }

        .searbar .searbox .sebr .tell .rem {

          display: inline-block;

          vertical-align: middle;

          width: auto; }

          .searbar .searbox .sebr .tell .rem .rum {

            width: 100%;

            color: #222;

            font-weight: bold;

            line-height: 1.1; }

          .searbar .searbox .sebr .tell .rem .rp {

            width: 100%;

            color: #666;

            line-height: 1.6; }



.modular {

  width: 100%; }

  .modular .mitop {

    width: 100%;

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    margin-bottom: 0.4rem; }

    .modular .mitop .mol {

      display: inline-block;

      vertical-align: middle;

      width: auto; }

      .modular .mitop .mol .mit {

        width: 100%;

        color: var(--themes);

        font-weight: bold;

        line-height: 1.3; }

      .modular .mitop .mol .mip {

        width: 100%;

        color: #222;

        line-height: 1.5; }

    .modular .mitop .mol.mid {

      width: 100%;

      text-align: center; }

    .modular .mitop .mol.white .mit, .modular .mitop .mol.white .mip {

      color: #fff; }



.procens {

  width: 100%;

  padding: 1rem 0; }

  .procens .Category {

    width: 100%;

    overflow: hidden;

    height: calc(2.2em * 3 + 0.2rem); }

    .procens .Category .cavom {

      width: 100%;

      font-size: 0; }

      .procens .Category .cavom .an {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        margin-right: 0.24rem;

        margin-bottom: 0.1rem; }

        .procens .Category .cavom .an a {

          display: inline-block;

          vertical-align: middle;

          width: auto;

          color: #222;

          padding: 0 0.2rem;

          line-height: 2.2;

          border-radius: 1.5em; }

      .procens .Category .cavom .an.on a {

        background-color: var(--themes);

        color: #fff; }

  .procens .vot {

    width: 100%;

    font-size: 0;

    text-align: center;

    padding-top: 0.2rem;

    border-top: solid 1px #dcdcdc;

    margin-top: 0.15rem; }

    .procens .vot .icn {

      display: inline-block;

      vertical-align: middle;

      width: 34px;

      height: 34px;

      border-radius: 50%;

      cursor: pointer;

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

      .procens .vot .icn img {

        width: 100%;

        display: block; }

  .procens .Category.autos {

    height: auto; }

  .procens .vot.autos .icn {

    transform: rotate(180deg); }

  .procens .procont {

    width: 100%;

    margin-top: 0.4rem; }

    .procens .procont .propers {

      width: 100%;

      position: relative; }

      .procens .procont .propers .swiper-container {

        padding-bottom: 0.4rem; }

      .procens .procont .propers .swiper-slide {

        width: 100%;

        position: relative;

        border-radius: 0.1rem;

        overflow: hidden;

        background-color: #fff; }

        .procens .procont .propers .swiper-slide .bg {

          position: absolute;

          left: 0;

          top: 0;

          width: 100%;

          height: 100%;

          display: block;

          opacity: 0;

          z-index: 1;

          background-image: linear-gradient(180deg, #0194c7 0%, #54c8f0 100%);

          transition: all ease 0.5s; }

        .procens .procont .propers .swiper-slide a {

          width: 100%;

          display: block; }

        .procens .procont .propers .swiper-slide .pomd {

          width: 100%;

          display: block;

          padding: 0.28rem 0.24rem;

          position: relative;

          z-index: 2; }

          .procens .procont .propers .swiper-slide .pomd .pix {

            width: 100%;

            color: rgba(34, 34, 34, 0.5);

            line-height: 1.75; }

          .procens .procont .propers .swiper-slide .pomd .llx {

            width: 100%;

            height: 1px;

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

            margin: 0.05rem 0; }

          .procens .procont .propers .swiper-slide .pomd .vit {

            width: 100%;

            color: #222;

            font-weight: bold;

            line-height: 1.5;

            height: 3em; }

          .procens .procont .propers .swiper-slide .pomd .imgs {

            width: 100%;

            position: relative;

            overflow: hidden;

            margin-top: 0.1rem; }

            .procens .procont .propers .swiper-slide .pomd .imgs .img {

              width: 100%;

              padding-top: 94.82%;

              transition: all ease 0.5; }

            .procens .procont .propers .swiper-slide .pomd .imgs .rc {

              position: absolute;

              z-index: 2;

              bottom: 0.08rem;

              left: 0.08rem;

              width: 0.34rem;

              height: 0.34rem;

              border-radius: 50%;

              opacity: 0;

              transition: all ease 0.5s;

              border: solid 1px #fff; }

              .procens .procont .propers .swiper-slide .pomd .imgs .rc img {

                width: 100%;

                display: block; }

      .procens .procont .propers .swiper-slide:hover .bg {

        opacity: 1; }

      .procens .procont .propers .swiper-slide:hover .pomd .imgs .rc {

        opacity: 1; }

      .procens .procont .propers .swiper-slide:hover .pomd .llx {

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

      .procens .procont .propers .swiper-slide:hover .pomd .vit {

        color: #fff; }

      .procens .procont .propers .swiper-slide:hover .pomd .pix {

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

      .procens .procont .propers .swiper-pagination-bullet {

        width: 0.16rem;

        height: 0.04rem;

        border-radius: 0.02rem;

        background-color: #b5b5b5;

        opacity: 1; }

      .procens .procont .propers .swiper-pagination-bullet-active {

        width: 0.36rem;

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

      .procens .procont .propers .swiper-pagination {

        bottom: 0; }

    .procens .procont .pictm {

      width: 100%;

      display: none; }

    .procens .procont .pictm.on {

      display: block; }



.rightnav {

  position: fixed;

  right: 0.12rem;

  top: 55%;

  transform: translateY(-50%);

  width: auto;

  z-index: 10; }

  .rightnav .ritm {

    width: 0.8rem;

    height: 0.8rem;

    display: block;

    position: relative;

    background-color: #f1f7f8;

    box-shadow: 0px 2px 5px 0px rgba(26, 164, 212, 0.14);

    border-radius: 0.2rem 0 0.2rem 0.2rem; }

    .rightnav .ritm a {

      width: 100%;

      height: 100%;

      display: flex;

      flex-wrap: wrap;

      align-content: center;

      justify-content: center; }

    .rightnav .ritm .rc {

      display: block;

      margin: 0 auto 0.05rem;

      width: 0.32rem;

      height: 0.32rem; }

      .rightnav .ritm .rc img {

        width: 100%;

        display: block; }

    .rightnav .ritm .cm {

      width: 100%;

      text-align: center;

      color: #999;

      line-height: 1.5; }

    .rightnav .ritm .rcom {

      position: absolute;

      right: calc(100% + 0.04rem);

      top: 50%;

      transform: translateY(-50%);

      background-color: var(--themes);

      padding: 0.1rem;

      border-radius: 0.2rem;

      display: none;

      width: auto; }

      .rightnav .ritm .rcom .mg {

        width: 1.2rem;

        display: block; }

        .rightnav .ritm .rcom .mg img {

          width: 100%;

          display: block; }

      .rightnav .ritm .rcom .rim {

        width: 100%;

        color: #fff;

        line-height: 1.75;

        white-space: nowrap; }
        .rightnav .ritm .pecm {
          position: absolute;
          right: calc(100% + 0.06rem);
          top: 0%;
          transform: translateY(0%);
          background-color: var(--themes);
          padding: 0.1rem;
          border-radius: 0.2rem 0 0.2rem 0.2rem;
          width: 2rem;
          min-width: 150px;
          display: none; }
          .rightnav .ritm .pecm .ec {
            position: absolute;
            left: 100%;
            top: 0;
            width: 0.13rem; }
            .rightnav .ritm .pecm .ec img {
              width: 100%;
              display: block; }
          .rightnav .ritm .pecm .pit {
            width: 100%;
            text-align: center;
            color: #fff;
            line-height: 1.4;
            margin-bottom: 0.08rem; }
          .rightnav .ritm .pecm .qquls {
            width: 100%;
            background-color: #fff;
            border-radius: 0.14rem 0 0.14rem 0.14rem;
            padding: 0.1rem; }
            .rightnav .ritm .pecm .qquls .qli {
              width: 100%;
              font-size: 0;
              border-bottom: solid 1px #dcdcdc;
              padding: 0.05rem 0.1rem;
              display: block; }
              .rightnav .ritm .pecm .qquls .qli .ic {
                display: inline-block;
                vertical-align: middle;
                width: 0.18rem;
                height: 0.18rem;
                margin-right: 0.1rem; }
                .rightnav .ritm .pecm .qquls .qli .ic img {
                  width: 100%;
                  display: block; }
              .rightnav .ritm .pecm .qquls .qli .cm {
                display: inline-block;
                vertical-align: middle;
                width: calc(100% - 0.18rem - 0.1rem);
                color: #222;
                line-height: 1.5;
                text-align: left; }
            .rightnav .ritm .pecm .qquls .qli:hover .cm {
              color: var(--themes); }

  .rightnav .ritm + .ritm {

    margin-top: 0.05rem; }

  .rightnav .ritm:hover {

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

    .rightnav .ritm:hover .rc img {

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

    .rightnav .ritm:hover .cm {

      color: #fff; }

    .rightnav .ritm:hover .rcom {

      display: block; }
      .rightnav .ritm:hover .pecm {
        display: block; }



@media (max-width: 800px) {

  .rightnav .ritm {

    width: 1rem;

    height: 1rem; } }

footer {

  width: 100%;

  background-color: #222; }

  footer .ftop {

    width: 100%; }

  footer .fop {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    padding: 0.8rem 0; }

    footer .fop .fiv {

      width: 100%;

      color: #fff;

      line-height: 1.4;

      margin-bottom: 0.2rem; }

    footer .fop .fol {

      display: inline-block;

      vertical-align: top;

      width: calc(940 / 1600 * 100%); }

      footer .fop .fol .flist {

        display: inline-block;

        vertical-align: top;

        width: calc(188 / 940 * 100%);

        text-align: left; }

        footer .fop .fol .flist .fit {

          width: 100%;

          font-size: 0;

          margin-bottom: 0.2rem; }

          footer .fop .fol .flist .fit a {

            display: inline-block;

            vertical-align: middle;

            color: #fff;

            line-height: 1.4;

            transition: all ease 0.5s; }

          footer .fop .fol .flist .fit a:hover {

            color: #fff; }

        footer .fop .fol .flist .ful {

          width: 100%; 
          overflow: auto;
          max-height: 3rem;
          max-width: 88%;
        }
        footer .fop .fol .flist .ful::-webkit-scrollbar {
            width: 4px;
            height: 4px;
            scrollbar-arrow-color:rgba(0,0,0,.1);
        }
        /*滚动条里面小方块*/
        footer .fop .fol .flist .ful::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 10px rgba(26, 164, 212, 0.8);
            background: rgba(26, 164, 212, 0.8);
            scrollbar-arrow-color:rgba(0,0,0,.1);
        }
        /*滚动条里面轨道*/
        footer .fop .fol .flist .ful::-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);
        }

          footer .fop .fol .flist .ful a {

            width: 100%;

            display: inline-block;

            vertical-align: top;

            color: #888;

            transition: all ease 0.5s;

            line-height: 2;

            line-height: 1.5;

            padding: 0.05rem 0; }

          footer .fop .fol .flist .ful a:hover {

            color: #fff; }

          footer .fop .fol .flist .ful div {

            width: 100%;

            display: inline-block;

            vertical-align: middle;

            color: #888;

            line-height: 2;

            transition: all ease 0.5s; }

    footer .fop .fom {

      display: inline-block;

      vertical-align: top;

      width: calc(410 / 1600 * 100%); }

      footer .fop .fom .fitul {

        width: 100%; }

        footer .fop .fom .fitul .fli {

          width: 100%;

          font-size: 0;

          padding: 0.05rem 0; }

          footer .fop .fom .fitul .fli .ic {

            display: inline-block;

            vertical-align: middle;

            width: 18px;

            margin-top: calc(0.75em - 9px);

            margin-right: 0.1rem; }

            footer .fop .fom .fitul .fli .ic img {

              width: 100%;

              display: block; }

          footer .fop .fom .fitul .fli .em {

            display: inline-block;

            vertical-align: top;

            width: calc(100% - 18px - 0.1rem);

            color: #fff;

            line-height: 1.5; }

    footer .fop .for {

      display: inline-block;

      vertical-align: top;

      width: auto; }

      footer .fop .for .codom {

        display: inline-block;

        vertical-align: middle; }

      footer .fop .for .mg {

        width: 1.28rem;

        display: block; }

        footer .fop .for .mg img {

          width: 100%;

          display: block; }

      footer .fop .for .cm {

        width: 100%;

        text-align: center;

        color: #888;

        line-height: 1.5;

        margin-top: 0.05rem; }

  footer .fbp {

    width: 100%;

    border-top: solid 1px rgba(255, 255, 255, 0.1);

    border-top: solid 1px #313131;

    display: flex;

    align-items: center;

    padding: 0.25rem 0; }

    footer .fbp .xk {

      display: inline-block;

      vertical-align: middle;

      color: #fbfbfb;

      line-height: 1.5;

      margin-right: 0.14rem; }

    footer .fbp .urlper {

      flex: 1; }

      footer .fbp .urlper .swiper-slide {

        display: inline-block;

        vertical-align: middle;

        width: auto; }

        footer .fbp .urlper .swiper-slide a {

          display: inline-block;

          vertical-align: middle;

          color: rgba(251, 251, 251, 0.2);

          line-height: 1.5;

          transition: all ease 0.5s; }

          footer .fbp .urlper .swiper-slide a span {

            display: inline-block;

            color: rgba(251, 251, 251, 0.2);

            line-height: 1.5;

            margin-right: 0.05rem;

            margin-left: 0.05rem; }

        footer .fbp .urlper .swiper-slide a:hover {

          color: #fff; }

          footer .fbp .urlper .swiper-slide a:hover span {

            display: inline-block;

            color: rgba(251, 251, 251, 0.2);

            line-height: 1.5; }

  footer .fbot {

    width: 100%;

    border-top: solid 1px rgba(255, 255, 255, 0.1);

    border-top: solid 1px #313131; }

  footer .fob {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    padding: 0.3rem 0; }

    footer .fob .fm {

      display: inline-block;

      vertical-align: middle;

      color: rgba(251, 251, 251, 0.2);

      line-height: 1.5; }

      footer .fob .fm a {

        display: inline-block;

        color: rgba(251, 251, 251, 0.2);

        line-height: 1.5;

        margin: 0 0.04rem; }

      footer .fob .fm a:hover {

        color: #fff; }



@media (max-width: 800px) {

  footer .fop {

    width: 100%;

    padding: 0.2rem 0; }

    footer .fop .fol {

      width: 100%;

      margin-bottom: 0.2rem; }

      footer .fop .fol .flist {

        width: 100%;

        border-bottom: solid 1px rgba(255, 255, 255, 0.15);

        position: relative; }

        footer .fop .fol .flist .fit {

          width: 100%;

          margin-bottom: 0;

          padding: 0.25rem 0;

          margin-left: 0;

          position: relative; }

          footer .fop .fol .flist .fit a {

            font-size: 16px; }

        footer .fop .fol .flist .ful {

          width: 100%;

          font-size: 0;

          padding-bottom: 0.15rem;

          display: none;

          height: auto; }

          footer .fop .fol .flist .ful a {

            line-height: 2; }

      footer .fop .fol .flist:first-child {

        border-top: none;

        border-top: solid 1px rgba(255, 255, 255, 0.15); }

      footer .fop .fol .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 .fop .fol .flist.has-ful.show:after {

        content: " ";

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

    footer .fop .fom {

      width: 100%;

      margin-bottom: 0.2rem; }

    footer .fop .for {

      width: 100%;

      max-width: 4rem;

      text-align: center;

      margin: 0 auto; } }

.partners {

  width: 100%;

  padding: 1rem 0 0.5rem; }

  .partners .potem {

    width: 100%;

    padding: 0.7rem 0.8rem;

    box-shadow: 0px 1px 40px 0px rgba(15, 69, 141, 0.27);

    background-color: #fff; }

    .partners .potem .partper {

      width: 100%; }

      .partners .potem .partper .swiper-pagination {

        bottom: 0; }

    .partners .potem .pagam {

      display: inline-block;

      vertical-align: top;

      width: calc(268 / 1440 * 100%);

      margin-right: calc(24 / 1440 * 100%);

      margin-bottom: 0.3rem;

      border: solid 1px #dcdcdc; }

      .partners .potem .pagam a {

        width: 100%;

        display: block; }

      .partners .potem .pagam .imgs {

        width: 100%;

        position: relative;

        overflow: hidden; }

        .partners .potem .pagam .imgs .img {

          width: 100%;

          padding-top: 41.04%;

          transition: all ease 0.5s; }

    .partners .potem .pagam:hover .imgs .img {

      transform: scale(1.1); }

    .partners .potem .pagam:nth-child(5n) {

      margin-right: 0; }

    .partners .potem .swiper-container {

      padding-bottom: 0.3rem; }



.news {

  width: 100%;

  padding: 0.5rem 0 1rem; }

  .news .newpers {

    width: 100%; }

    .news .newpers .swiper-slide {

      width: 100%;

      position: relative; }

      .news .newpers .swiper-slide a {

        width: 100%;

        display: block; }

      .news .newpers .swiper-slide .imgs {

        width: 100%;

        position: relative;

        overflow: hidden; }

        .news .newpers .swiper-slide .imgs .img {

          width: 100%;

          padding-top: 66.05%;

          transition: all ease 0.5s; }

      .news .newpers .swiper-slide .poms {

        width: 100%;

        font-size: 0;

        display: flex;

        flex-wrap: nowrap;

        align-items: center;

        justify-content: space-between;

        padding-top: 0.18rem;

        box-sizing: border-box; }

        .news .newpers .swiper-slide .poms .pol {

          display: inline-block;

          vertical-align: middle;

          flex: 1;

          width: 100%;

          max-width: calc(100% - 1.14rem);

          padding-right: 0.14rem; }

          .news .newpers .swiper-slide .poms .pol .piv {

            width: 100%;

            color: #222;

            font-weight: bold;

            line-height: 1.2;

            height: 2.4em; }

          .news .newpers .swiper-slide .poms .pol .lim {

            width: 100%;

            color: #666;

            line-height: 1.5;

            margin-top: 0.1rem; }

        .news .newpers .swiper-slide .poms .por {

          display: inline-block;

          vertical-align: middle;

          width: 1rem;

          box-sizing: border-box;

          border: solid 1px #222;

          border-radius: 6px;

          padding: 0.1rem 0.18rem;

          box-sizing: border-box; }

          .news .newpers .swiper-slide .poms .por .day {

            width: 100%;

            display: inline-block;

            vertical-align: middle; }

          .news .newpers .swiper-slide .poms .por .date {

            width: 100%;

            text-align: center;

            color: #222;

            line-height: 1.5;

            white-space: nowrap; }

          .news .newpers .swiper-slide .poms .por .now {

            width: 100%;

            color: #222;

            text-align: center;

            line-height: 1.2; }

    .news .newpers .swiper-slide:hover .imgs .img {

      transform: scale(1.1); }

    .news .newpers .swiper-slide:hover .poms .piv {

      color: var(--themes); }



@media (max-width: 800px) {

  .news .newpers .swiper-slide .poms .por {

    width: 1.3rem; }

  .news .newpers .swiper-slide .poms .pol {

    max-width: calc(100% - 1.44rem); } }

.abouts {

  width: 100%;

  padding: 1rem 0;

  position: relative; }

  .abouts .aboum {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    flex-direction: row-reverse;

    position: relative;

    z-index: 2; }

    .abouts .aboum .abol {

      display: inline-block;

      vertical-align: middle;

      position: relative;

      width: calc(960 / 1920 * 100%); }

      .abouts .aboum .abol .abper {

        width: 100%; }

        .abouts .aboum .abol .abper .swiper-slide {

          width: 100%;

          position: relative; }

          .abouts .aboum .abol .abper .swiper-slide a {

            width: 100%;

            display: block; }

          .abouts .aboum .abol .abper .swiper-slide .imgs {

            width: 100%;

            position: relative;

            overflow: hidden; }

            .abouts .aboum .abol .abper .swiper-slide .imgs .img {

              width: 100%;

              height: 6.35rem; }

          .abouts .aboum .abol .abper .swiper-slide .vom {

            position: absolute;

            bottom: 0;

            left: 0;

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

            width: 100%;

            padding: 0.15rem 0.3rem;

            display: flex;

            align-items: center;

            height: 1rem; }

            .abouts .aboum .abol .abper .swiper-slide .vom .vm {

              width: 100%;

              color: #fff;

              line-height: 1.5; }

      .abouts .aboum .abol .atper {

        position: absolute;

        right: 0;

        top: 0;

        width: 3rem;

        z-index: 3;

        background: -webkit-gradient(linear, 0 0, right 0, from(transparent), to(rgba(0, 0, 0, 0.5))); }

        .abouts .aboum .abol .atper .swiper-container {

          height: 5.35rem; }

        .abouts .aboum .abol .atper .swiper-slide {

          width: 100%;

          display: flex;

          align-items: center;

          justify-content: center;

          cursor: pointer; }

          .abouts .aboum .abol .atper .swiper-slide .xum {

            width: 100%;

            color: #fff;

            line-height: 1.5;

            text-align: center;

            transition: all ease 0.5s; }

        .abouts .aboum .abol .atper .swiper-slide.on .xum {

          transform: scale(1.3); }

      .abouts .aboum .abol .btns {

        width: 3rem;

        background-color: var(--themes);

        height: 1rem;

        display: flex;

        align-items: center;

        text-align: center;

        justify-content: center;

        position: absolute;

        z-index: 3;

        right: 0;

        bottom: 0; }

        .abouts .aboum .abol .btns .btn {

          display: inline-block;

          vertical-align: middle;

          width: 0.2rem;

          cursor: pointer;

          transition: all ease 0.5s; }

          .abouts .aboum .abol .btns .btn img {

            width: 100%;

            display: block; }

        .abouts .aboum .abol .btns .btn:hover {

          transform: scale(1.1); }

        .abouts .aboum .abol .btns .lx {

          display: inline-block;

          vertical-align: middle;

          width: 1.2rem;

          height: 2px;

          margin: 0 0.15rem;

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

          position: relative; }

          .abouts .aboum .abol .btns .lx span {

            position: absolute;

            left: 0;

            top: 0;

            height: 2px;

            width: 0;

            transition: all ease 5s;

            z-index: 2;

            background-color: #fff;

            animation: long linear 5s infinite;

            animation-delay: 1s; }

@keyframes long {

  0% {

    width: 0; }

  100% {

    width: 100%; } }

        .abouts .aboum .abol .btns .lx.on span {

          width: 100%; }

    .abouts .aboum .abor {

      display: inline-block;

      vertical-align: middle;

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

      padding-left: calc(160 / 1920 * 100%);

      padding-right: calc(145 / 1920 * 100%); }

      .abouts .aboum .abor .sinp {

        width: 100%;

        color: #666;

        line-height: 1.5; }

        .abouts .aboum .abor .sinp p {

          color: #666;

          line-height: 1.5; }

      .abouts .aboum .abor .datem {

        width: 100%;

        font-size: 0;

        margin: 0.35rem 0; }

        .abouts .aboum .abor .datem .daim {

          display: inline-block;

          vertical-align: top;

          width: 32%;

          margin-right: 2%; }

          .abouts .aboum .abor .datem .daim .xum {

            width: 100%;

            color: #222;

            line-height: 1.5; }

          .abouts .aboum .abor .datem .daim .pum {

            width: 100%;

            color: #222;

            line-height: 1.5; }

        .abouts .aboum .abor .datem .daim:nth-child(3n) {

          margin-right: 0; }

      .abouts .aboum .abor .more {

        width: 100%;

        font-size: 0; }

        .abouts .aboum .abor .more a {

          display: inline-block;

          vertical-align: middle;

          background-color: var(--themes);

          color: #fff;

          padding: 0 0.5rem;

          line-height: 3;

          border-radius: 1.5em;

          width: auto;

          transition: all ease 0.5s; }

        .abouts .aboum .abor .more a:hover {

          animation: icon-bounce 0.5s alternate; }

  .abouts:after {

    content: ' ';

    position: absolute;

    z-index: 1;

    width: calc(470 / 1920 * 100%);

    top: 0;

    right: 0;

    height: 100%;

    background-color: #f5f5f5; }



@media (max-width: 1660px) {

  .abouts .aboum .abor {

    padding-left: 5%;

    padding-right: 3.5%; } }

.cases {

  width: 100%;

  padding: 0.6rem 0 0;

  position: relative; }

  .cases .xg {

    position: absolute;

    z-index: 1;

    width: calc(730 / 1920 * 100%);

    right: 0;

    top: 0;

    height: 100%; }

  .cases .catom {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    position: relative;

    z-index: 2; }

    .cases .catom .catl {

      display: inline-block;

      vertical-align: middle;

      width: calc(1450 / 1920 * 100%); }

      .cases .catom .catl .catlper {

        width: 100%; }

        .cases .catom .catl .catlper .swiper-slide {

          width: 100%; }

          .cases .catom .catl .catlper .swiper-slide a {

            width: 100%;

            display: block; }

          .cases .catom .catl .catlper .swiper-slide .imgs {

            width: 100%;

            position: relative;

            overflow: hidden; }

            .cases .catom .catl .catlper .swiper-slide .imgs .img {

              width: 100%;

              padding-top: 52.75%;

              transition: all ease 0.5s; }

        .cases .catom .catl .catlper .swiper-slide:hover .imgs .img {

          transform: scale(1.1); }

    .cases .catom .catr {

      display: inline-block;

      vertical-align: middle;

      width: calc(470 / 1920 * 100%);

      position: relative;

      padding-right: calc(160 / 1920 * 100%   ); }

      .cases .catom .catr .xg {

        display: none; }

      .cases .catom .catr .catrlis {

        width: 100%;

        text-align: right;

        position: relative;

        z-index: 2; }

        .cases .catom .catr .catrlis:after {

          height: 100%;

          content: ' ';

          position: absolute;

          right: calc(0.1rem - 0.5px);

          height: calc(100% - 0.4rem);

          width: 1px;

          background-color: #fff;

          top: 0;

          z-index: 1;

          top: 50%;

          transform: translateY(-50%); }

        .cases .catom .catr .catrlis .ciem {

          width: 100%;

          padding: 0.06rem 0;

          font-size: 0;

          cursor: pointer;

          position: relative;

          z-index: 2; }

          .cases .catom .catr .catrlis .ciem .xame {

            display: inline-block;

            vertical-align: middle;

            color: #fff;

            line-height: 1.5;

            width: calc(100% - 0.4rem);

            text-align: right; }

          .cases .catom .catr .catrlis .ciem .rc {

            display: inline-block;

            vertical-align: middle;

            width: 0.2rem;

            margin-left: 0.2rem; }

            .cases .catom .catr .catrlis .ciem .rc img {

              width: 100%;

              display: block; }

            .cases .catom .catr .catrlis .ciem .rc img:first-child {

              display: block; }

            .cases .catom .catr .catrlis .ciem .rc img:last-child {

              display: none; }

        .cases .catom .catr .catrlis .ciem.on .rc img:first-child, .cases .catom .catr .catrlis .ciem:hover .rc img:first-child {

          display: none; }

        .cases .catom .catr .catrlis .ciem.on .rc img:last-child, .cases .catom .catr .catrlis .ciem:hover .rc img:last-child {

          display: block; }



@media (max-width: 800px) {

  .cases .catom .catl {

    width: 70%; }

  .cases .catom .catr {

    width: 30%; } }

.nanner {

  width: 100%;

  position: relative; }

  .nanner .imgs {

    width: 100%;

    position: relative;

    overflow: hidden; }

    .nanner .imgs .img {

      width: 100%;

      height: 4rem; }



.noncont {

  width: 100%;

  padding-bottom: 0.6rem; }

  .noncont .nacont {

    width: 100%;

    position: relative;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between; }

    .noncont .nacont .nal {

      display: inline-block;

      vertical-align: middle;

      width: calc(280 / 1600 * 100%);

      position: relative;

      top: -0.6rem; }

      .noncont .nacont .nal .crumbs {

        display: none; }

    .noncont .nacont .nar {

      display: inline-block;

      vertical-align: middle;

      width: calc(1260 / 1600 * 100%); }

      .noncont .nacont .nar .recom {

        display: none; }

  .noncont .nanper {

    width: 100%;

    position: relative; }

    .noncont .nanper .swiper-slide {

      width: 100%; }

      .noncont .nanper .swiper-slide a {

        width: 100%;

        display: block; }

      .noncont .nanper .swiper-slide .imgs {

        width: 100%;

        position: relative;

        overflow: hidden; }

        .noncont .nanper .swiper-slide .imgs .img {

          width: 100%;

          padding-top: 41.79%; }

      .noncont .nanper .swiper-slide .lom {

        position: absolute;

        z-index: 3;

        bottom: 0;

        width: 100%;

        padding: 0.6rem;

        max-width: calc(100% - 1.5rem); }

        .noncont .nanper .swiper-slide .lom .lmt {

          width: 100%;

          color: #fff;

          font-weight: bold;

          line-height: 1.2; }

        .noncont .nanper .swiper-slide .lom .pim {

          width: 100%;

          color: #f0f6ff;

          line-height: 1.5;

          max-height: 3em;

          margin-top: 0.1rem; }

    .noncont .nanper .btns {

      position: absolute;

      right: 0.6rem;

      bottom: 0.6rem;

      width: auto;

      z-index: 3;

      font-size: 0; }

      .noncont .nanper .btns .btn {

        display: inline-block;

        vertical-align: middle;

        width: 0.45rem;

        height: 0.45rem;

        border-radius: 50%;

        background-color: #999;

        cursor: pointer; }

        .noncont .nanper .btns .btn img {

          width: 100%;

          display: block; }

      .noncont .nanper .btns .btn + .btn {

        margin-left: 0.18rem; }

      .noncont .nanper .btns .btn:hover {

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

  .noncont .newlist {

    width: 100%;

    font-size: 0;

    margin-top: 0.5rem; }

    .noncont .newlist .netom {

      display: inline-block;

      vertical-align: top;

      width: calc(582 / 1260 * 100%);

      margin-right: calc(95  / 1260 * 100%);

      margin-bottom: 0.4rem; }

      .noncont .newlist .netom a {

        width: 100%;

        display: block; }

      .noncont .newlist .netom .imgs {

        width: 100%;

        position: relative;

        overflow: hidden; }

        .noncont .newlist .netom .imgs .img {

          width: 100%;

          padding-top: 65.80%;

          transition: all ease 0.5s; }

      .noncont .newlist .netom .lom {

        width: 100%;

        padding: 0.2rem 0; }

        .noncont .newlist .netom .lom .lit {

          width: 100%;

          color: #222;

          font-weight: bold;

          line-height: 1.2;

          height: 2.4em; }

        .noncont .newlist .netom .lom .lkm {

          width: 100%;

          color: #666;

          line-height: 1.5;

          margin-top: 0.1rem; }

    .noncont .newlist .netom:nth-child(2n) {

      margin-right: 0; }

    .noncont .newlist .netom:hover .imgs .img {

      transform: scale(1.1); }

    .noncont .newlist .netom:hover .lom .lit {

      width: 100%;

      color: var(--themes); }

  .noncont .nlom {

    width: 100%; }

    .noncont .nlom .tiop {

      width: 100%;

      padding: 0.55rem 0.3rem; }

      .noncont .nlom .tiop .tit {

        width: 100%;

        font-size: 0;

        position: relative; }

        .noncont .nlom .tiop .tit .em {

          display: inline-block;

          vertical-align: middle;

          color: #fff;

          font-weight: bold;

          line-height: 1.2;

          width: auto;

          position: relative;

          z-index: 2; }

        .noncont .nlom .tiop .tit .ic {

          width: 0.42rem;

          height: 0.42rem;

          position: absolute;

          top: -0.14rem;

          left: -0.16rem;

          z-index: 1; }

          .noncont .nlom .tiop .tit .ic img {

            width: 100%;

            display: block; }

      .noncont .nlom .tiop .ep {

        width: 100%;

        color: #fff;

        line-height: 1.5;

        margin-top: 0.05rem; }

    .noncont .nlom .naluls {

      width: 100%; }

      .noncont .nlom .naluls .natem {

        width: 100%; }

        .noncont .nlom .naluls .natem .nas {

          width: 100%;

          font-size: 0;

          padding: 0.24rem 0.3rem;

          display: flex;

          align-items: center;

          justify-content: space-between;

          background-color: #e8eeef;

          border-radius: 2px;

          cursor: pointer; }

          .noncont .nlom .naluls .natem .nas a {

            display: inline-block;

            vertical-align: middle;

            color: #222;

            line-height: 1.5; }

          .noncont .nlom .naluls .natem .nas a:hover {

            color: var(--themes); }

          .noncont .nlom .naluls .natem .nas .ic {

            display: inline-block;

            vertical-align: middle;

            width: 0.2rem;

            display: none;

            transition: all ease 0.5s; }

            .noncont .nlom .naluls .natem .nas .ic img {

              width: 100%;

              display: block; }

        .noncont .nlom .naluls .natem .naeul {

          width: 100%;

          background-color: #e8eeef;

          border-left: solid 0.03rem var(--themes);

          padding: 0.14rem 0.3rem;

          display: none; }

          .noncont .nlom .naluls .natem .naeul .ail {

            width: 100%;

            padding: 0.05rem 0; }

            .noncont .nlom .naluls .natem .naeul .ail a {

              width: 100%;

              color: #888;

              line-height: 1.4; }

            .noncont .nlom .naluls .natem .naeul .ail a:hover {

              color: var(--themes); }

      .noncont .nlom .naluls .natem + .natem {

        margin-top: 0.02rem; }

      .noncont .nlom .naluls .natem.has-nae .nas .ic {

        display: inline-block; }

      .noncont .nlom .naluls .natem.has-nae.show .nas {

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

        .noncont .nlom .naluls .natem.has-nae.show .nas .ic {

          transform: rotate(90deg); }

          .noncont .nlom .naluls .natem.has-nae.show .nas .ic img {

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

        .noncont .nlom .naluls .natem.has-nae.show .nas a {

          color: #fff; }

        .noncont .nlom .naluls .natem.has-nae.show .nas a:hover {

          color: #222; }
          .noncont .nlom .naluls .natem.nohide .nas{
            background-color: var(--themes);
          }
          .noncont .nlom .naluls .natem.nohide .nas .ic{
            display: none;
          }
          .noncont .nlom .naluls .natem.nohide .nas a{
            color: #fff;
          }
          .noncont .nlom .naluls .natem.nohide .naeul{
            display: block;
            max-height: 5rem;
            overflow: auto;
          }
          .noncont .nlom .naluls .natem.nohide .naeul::-webkit-scrollbar {
            width: 4px;
            height: 4px;
            scrollbar-arrow-color:rgba(0,0,0,.1);
        }
        /*滚动条里面小方块*/
        .noncont .nlom .naluls .natem.nohide .naeul::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 10px rgba(26, 164, 212, 0.8);
            background: rgba(26, 164, 212, 0.8);
            scrollbar-arrow-color:rgba(0,0,0,.1);
        }
        /*滚动条里面轨道*/
        .noncont .nlom .naluls .natem.nohide .naeul::-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);
        }

    .noncont .nlom .tell {

      width: 100%;

      font-size: 0;

      display: inline-block;

      vertical-align: middle;

      background-color: var(--themes);

      padding: 0.25rem 0.2rem;

      margin: 0.2rem 0; }

      .noncont .nlom .tell .tc {

        display: inline-block;

        vertical-align: middle;

        width: 0.42rem;

        height: 0.42rem;

        border-radius: 50%;

        background-color: #fff;

        margin-right: 0.2rem; }

        .noncont .nlom .tell .tc img {

          width: 100%;

          display: block; }

      .noncont .nlom .tell .rem {

        display: inline-block;

        vertical-align: middle;

        width: calc(100% - 0.62rem); }

        .noncont .nlom .tell .rem .rum {

          width: 100%;

          color: #fff;

          font-weight: bold;

          line-height: 1.1; }

        .noncont .nlom .tell .rem .rp {

          width: 100%;

          color: #fff;

          line-height: 1.6;

          margin-top: 0.06rem; }

    .noncont .nlom .searn {

      width: 100%; }

      .noncont .nlom .searn form {

        width: 100%;

        font-size: 0;

        display: block;

        background-color: #e8eeef;

        padding: 0 0.25rem; }

      .noncont .nlom .searn .sin {

        display: inline-block;

        vertical-align: middle;

        width: calc(100% - 0.39rem);

        border: none;

        background-color: transparent;

        line-height: 0.7rem;

        color: #999; }

      .noncont .nlom .searn .stn {

        display: inline-block;

        vertical-align: middle;

        width: 0.29rem;

        margin-left: 0.1rem;

        position: relative; }

        .noncont .nlom .searn .stn img {

          width: 100%;

          display: block; }

        .noncont .nlom .searn .stn input {

          position: absolute;

          left: 0;

          top: 0;

          width: 100%;

          height: 100%;

          z-index: 2;

          cursor: pointer;

          opacity: 0; }

  .noncont .recom {

    width: 100%;

    margin-top: 0.5rem; }

    .noncont .recom .rip {

      width: 100%;

      font-size: 0;

      padding: 0.4rem 0 0.3rem;

      border-top: solid 1px #f1f7f8; }

      .noncont .recom .rip .em {

        width: 100%;

        color: var(--themes);

        font-weight: bold;

        line-height: 1.2; }

    .noncont .recom .reamlis {

      width: 100%; }

      .noncont .recom .reamlis .ream {

        width: 100%; }

        .noncont .recom .reamlis .ream a {

          width: 100%;

          display: block; }

        .noncont .recom .reamlis .ream .imgs {

          width: 100%;

          position: relative;

          overflow: hidden; }

          .noncont .recom .reamlis .ream .imgs .img {

            width: 100%;

            padding-top: 66.19%;

            transition: all ease 0.5s; }

        .noncont .recom .reamlis .ream .xie {

          width: 100%;

          color: #222;

          font-weight: bold;

          line-height: 1.2;

          height: 2.4em;

          margin-top: 0.15rem; }

      .noncont .recom .reamlis .ream:hover .imgs .img {

        transform: scale(1.1); }

      .noncont .recom .reamlis .ream:hover .xie {

        color: var(--themes); }

      .noncont .recom .reamlis .ream + .ream {

        margin-top: 0.25rem; }

    .noncont .recom .prodlis {

      width: 100%; }

      .noncont .recom .prodlis .proam {

        width: 100%;

        position: relative;

        border-radius: 0.1rem;

        overflow: hidden;

        background-color: #fff; }

        .noncont .recom .prodlis .proam .bg {

          position: absolute;

          left: 0;

          top: 0;

          width: 100%;

          height: 100%;

          display: block;

          opacity: 0;

          z-index: 1;

          background-image: linear-gradient(180deg, #0194c7 0%, #54c8f0 100%);

          transition: all ease 0.5s; }

        .noncont .recom .prodlis .proam a {

          width: 100%;

          display: block; }

        .noncont .recom .prodlis .proam .pomd {

          width: 100%;

          display: block;

          padding: 0.28rem 0.24rem;

          position: relative;

          z-index: 2; }

          .noncont .recom .prodlis .proam .pomd .pix {

            width: 100%;

            color: rgba(34, 34, 34, 0.5);

            line-height: 1.75; }

          .noncont .recom .prodlis .proam .pomd .llx {

            width: 100%;

            height: 1px;

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

            margin: 0.05rem 0; }

          .noncont .recom .prodlis .proam .pomd .vit {

            width: 100%;

            color: #222;

            font-weight: bold;

            line-height: 1.5;

            height: 3em; }

          .noncont .recom .prodlis .proam .pomd .imgs {

            width: 100%;

            position: relative;

            overflow: hidden;

            margin-top: 0.1rem; }

            .noncont .recom .prodlis .proam .pomd .imgs .img {

              width: 100%;

              padding-top: 94.82%;

              transition: all ease 0.5; }

            .noncont .recom .prodlis .proam .pomd .imgs .rc {

              position: absolute;

              z-index: 2;

              bottom: 0.08rem;

              left: 0.08rem;

              width: 0.34rem;

              height: 0.34rem;

              border-radius: 50%;

              opacity: 0;

              transition: all ease 0.5s;

              border: solid 1px #fff; }

              .noncont .recom .prodlis .proam .pomd .imgs .rc img {

                width: 100%;

                display: block; }

      .noncont .recom .prodlis .proam + .proam {

        margin-top: 0.15rem; }

      .noncont .recom .prodlis .proam:hover .bg {

        opacity: 1; }

      .noncont .recom .prodlis .proam:hover .pomd .imgs .rc {

        opacity: 1; }

      .noncont .recom .prodlis .proam:hover .pomd .llx {

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

      .noncont .recom .prodlis .proam:hover .pomd .vit {

        color: #fff; }

      .noncont .recom .prodlis .proam:hover .pomd .pix {

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

  .noncont .detail {

    width: 100%; }

    .noncont .detail .dit {

      width: 100%;

      color: #131313;

      line-height: 1.4; }

    .noncont .detail .dim {

      width: 100%;

      font-size: 0;

      display: flex;

      flex-wrap: wrap;

      align-items: center;

      justify-content: space-between;

      padding: 0.2rem 0; }

      .noncont .detail .dim .dml {

        display: inline-block;

        vertical-align: middle;

        width: auto; }

        .noncont .detail .dim .dml .emx {

          display: inline-block;

          vertical-align: middle;

          width: auto;

          font-size: 0;

          margin-right: 0.34rem; }

          .noncont .detail .dim .dml .emx .ei {

            display: inline-block;

            vertical-align: middle;

            width: 0.2rem;

            margin-right: 0.1rem; }

            .noncont .detail .dim .dml .emx .ei img {

              width: 100%;

              display: block; }

          .noncont .detail .dim .dml .emx .im {

            display: inline-block;

            vertical-align: middle;

            width: auto;

            color: #666;

            line-height: 1.5; }

      .noncont .detail .dim .dmr {

        display: inline-block;

        vertical-align: middle;

        width: auto; }

        .noncont .detail .dim .dmr .xm {

          display: inline-block;

          vertical-align: middle;

          width: 0.21rem;

          position: relative; }

          .noncont .detail .dim .dmr .xm a, .noncont .detail .dim .dmr .xm img {

            width: 100%;

            display: block; }

          .noncont .detail .dim .dmr .xm .codm {

            position: absolute;

            left: 50%;

            transform: translateX(-50%);

            bottom: calc(100% + 0.1rem);

            background-color: #fff;

            border-radius: 5px;

            width: 1.2rem;

            padding: 0.08rem;

            box-shadow: 0px 1px 40px 0px rgba(15, 69, 141, 0.27);

            display: none; }

        .noncont .detail .dim .dmr .xm + .xm {

          margin-left: 0.24rem; }

        .noncont .detail .dim .dmr .xm:hover .codm {

          display: block; }

        .noncont .detail .dim .dmr .downs {

          display: inline-block;

          vertical-align: middle;

          width: auto; }

          .noncont .detail .dim .dmr .downs a {

            display: inline-block;

            vertical-align: middle;

            background-color: var(--themes);

            width: auto;

            color: #fff;

            line-height: 3;

            padding: 0 0.4rem;

            border-radius: 1.5em;

            transition: all ease 0.5s; }

            .noncont .detail .dim .dmr .downs a span {

              display: inline-block;

              vertical-align: middle;

              width: 0.2rem;

              margin-left: 0.15rem;

              position: relative;

              top: -0.02rem; }

              .noncont .detail .dim .dmr .downs a span img {

                width: 100%;

                display: block; }

          .noncont .detail .dim .dmr .downs a:hover {

            animation: icon-bounce 0.5s alternate; }

    .noncont .detail .dinp {

      width: 100%;

      color: #717273;

      line-height: 1.75;

      padding: 0.3rem 0;

      border-top: solid 1px #e8e8e8; }

      .noncont .detail .dinp span, .noncont .detail .dinp p {

        color: #717273;

        line-height: 1.75; }

      .noncont .detail .dinp img {

        max-width: 100%; }

  .noncont .caselis {

    width: 100%; }

    .noncont .caselis .cavom {

      width: 100%;

      background-color: #f2f3f5; }

      .noncont .caselis .cavom a {

        width: 100%;

        display: block; }

      .noncont .caselis .cavom .imgs {

        display: inline-block;

        vertical-align: middle;

        width: calc(510 / 1260 * 100%);

        position: relative;

        overflow: hidden; }

        .noncont .caselis .cavom .imgs .img {

          width: 100%;

          padding-top: 70.58%;

          transition: all ease 0.5s; }

      .noncont .caselis .cavom .rom {

        display: inline-block;

        vertical-align: middle;

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

        padding: 0.2rem 0.5rem; }

        .noncont .caselis .cavom .rom .emx {

          display: inline-block;

          vertical-align: middle;

          width: 100%;

          font-size: 0; }

          .noncont .caselis .cavom .rom .emx .ei {

            display: inline-block;

            vertical-align: middle;

            width: 0.2rem;

            margin-right: 0.1rem; }

            .noncont .caselis .cavom .rom .emx .ei img {

              width: 100%;

              display: block; }

          .noncont .caselis .cavom .rom .emx .im {

            display: inline-block;

            vertical-align: middle;

            width: auto;

            color: #999;

            line-height: 1.5; }

        .noncont .caselis .cavom .rom .eit {

          width: 100%;

          color: #222;

          font-weight: bold;

          line-height: 1.2;

          margin: 0.15rem 0 0.25rem; }

        .noncont .caselis .cavom .rom .eip {

          width: 100%;

          color: #666;

          line-height: 1.5; }

          .noncont .caselis .cavom .rom .eip p {

            color: #666;

            line-height: 1.5; }

        .noncont .caselis .cavom .rom .more {

          width: 100%;

          font-size: 0;

          margin-top: 0.45rem; }

          .noncont .caselis .cavom .rom .more .vtn {

            display: inline-block;

            vertical-align: middle;

            color: #fff;

            background-color: var(--themes);

            width: auto;

            padding: 0 0.44rem;

            border-radius: 1.5em;

            line-height: 3;

            transition: all ease 0.5s; }

          .noncont .caselis .cavom .rom .more .vtn:hover {

            animation: icon-bounce 0.5s alternate; }

    .noncont .caselis .cavom:hover .imgs .img {

      transform: scale(1.1); }

    .noncont .caselis .cavom:hover .rom .eit {

      color: var(--themes); }

    .noncont .caselis .cavom + .cavom {

      margin-top: 0.45rem; }

  .noncont .carom {

    width: 100%;

    /*display: flex;*/

    flex-wrap: wrap;

    justify-content: space-between;

    flex-direction: row-reverse;

    align-items: center; }

    .noncont .carom .cal {

      display: inline-block;

      vertical-align: middle;

      width: calc(630 / 1260 * 100%);

      position: relative;

      overflow: hidden; }

      .noncont .carom .cal .img {

        width: 100%;

        padding-top: 65.71%; }

    .noncont .carom .car {

      display: inline-block;

      vertical-align: middle;

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

      .noncont .carom .car .cie {

        width: 100%;

        font-size: 0;

        margin-bottom: 0.2rem; }

        .noncont .carom .car .cie span {

          display: inline-block;

          vertical-align: middle; }

      .noncont .carom .car .cit {

        width: 100%;

        color: #222;

        font-weight: bold;

        line-height: 1.3; }

      .noncont .carom .car .lx {

        width: 100%;

        font-size: 0;

        margin: 0.15rem 0 0.3rem; }

        .noncont .carom .car .lx span {

          display: inline-block;

          vertical-align: middle;

          background-color: var(--themes);

          width: 0.2rem;

          height: 0.03rem; }

      .noncont .carom .car .sinp {

        width: 100%;

        color: #666;

        line-height: 1.75; }

        .noncont .carom .car .sinp span, .noncont .carom .car .sinp p {

          color: #666;

          line-height: 1.75; }

  .noncont .cinsp {

    width: 100%;

    margin-top: 0.3rem;

    color: #666;

    line-height: 1.75; }

    .noncont .cinsp span, .noncont .cinsp p {

      color: #666;

      line-height: 1.75; }

  .noncont .destlis {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap;

    margin-top: 0.5rem;

    padding-top: 0.4rem;

    border-top: solid 1px #e8eeef; }

    .noncont .destlis .desom {

      display: inline-block;

      vertical-align: top;

      width: calc(400 / 1260 * 100%);

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

      margin-bottom: 0.3rem;

      background-color: #e8eeef; }

      .noncont .destlis .desom a {

        width: 100%;

        display: block; }

      .noncont .destlis .desom .imgs {

        width: 100%;

        position: relative;

        overflow: hidden; }

        .noncont .destlis .desom .imgs .img {

          width: 100%;

          padding-top: 65.75%;

          transition: all ease 0.5s; }

      .noncont .destlis .desom .eom {

        width: 100%;

        padding: 0.3rem; }

        .noncont .destlis .desom .eom .eit {

          width: 100%;

          color: #222;

          font-weight: bold;

          line-height: 1.3; }

        .noncont .destlis .desom .eom .lom {

          width: 100%;

          color: #666;

          line-height: 1.5;

          margin-top: 0.1rem; }

    .noncont .destlis .desom:nth-child(3n) {

      margin-right: 0; }

  .noncont .proelist {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap; }

    .noncont .proelist .provm {

      display: inline-block;

      vertical-align: top;

      width: calc(300 / 1260 * 100%);

      margin-right: calc(19 / 1260 * 100%);

      margin-bottom: 0.2rem;

      position: relative;

      border-radius: 0.1rem;

      overflow: hidden;

      background-color: #fff; }

      .noncont .proelist .provm a {

        width: 100%;

        display: block; }

      .noncont .proelist .provm .bg {

        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        display: block;

        opacity: 0;

        z-index: 1;

        background-image: linear-gradient(180deg, #0194c7 0%, #54c8f0 100%);

        transition: all ease 0.5s; }

      .noncont .proelist .provm a {

        width: 100%;

        display: block; }

      .noncont .proelist .provm .pomd {

        width: 100%;

        display: block;

        padding: 0.28rem 0.24rem;

        position: relative;

        z-index: 2; }

        .noncont .proelist .provm .pomd .pix {

          width: 100%;

          color: rgba(34, 34, 34, 0.5);

          line-height: 1.75; }

        .noncont .proelist .provm .pomd .llx {

          width: 100%;

          height: 1px;

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

          margin: 0.05rem 0; }

        .noncont .proelist .provm .pomd .vit {

          width: 100%;

          color: #222;

          font-weight: bold;

          line-height: 1.5;

          height: 3em; }

        .noncont .proelist .provm .pomd .imgs {

          width: 100%;

          position: relative;

          overflow: hidden;

          margin-top: 0.1rem; }

          .noncont .proelist .provm .pomd .imgs .img {

            width: 100%;

            padding-top: 94.82%;

            transition: all ease 0.5; }

          .noncont .proelist .provm .pomd .imgs .rc {

            position: absolute;

            z-index: 2;

            bottom: 0.08rem;

            left: 0.08rem;

            width: 0.34rem;

            height: 0.34rem;

            border-radius: 50%;

            opacity: 0;

            transition: all ease 0.5s;

            border: solid 1px #fff; }

            .noncont .proelist .provm .pomd .imgs .rc img {

              width: 100%;

              display: block; }

    .noncont .proelist .provm:nth-child(4n) {

      margin-right: 0; }

    .noncont .proelist .provm:hover .bg {

      opacity: 1; }

    .noncont .proelist .provm:hover .pomd .imgs .rc {

      opacity: 1; }

    .noncont .proelist .provm:hover .pomd .llx {

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

    .noncont .proelist .provm:hover .pomd .vit {

      color: #fff; }

    .noncont .proelist .provm:hover .pomd .pix {

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

  .noncont .nimp {

    width: 100%;

    color: #222;

    line-height: 1.75; }

    .noncont .nimp p {

      color: #222;

      line-height: 1.75; }

  .noncont .brandlis {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap;

    margin-top: 0.5rem; }

    .noncont .brandlis .brame {

      display: inline-block;

      vertical-align: top;

      width: calc(605 / 1260 * 100%);

      margin-right: calc(49 / 1260 * 100%);

      margin-bottom: 0.4rem; }

      .noncont .brandlis .brame a {

        width: 100%;

        display: block; }

      .noncont .brandlis .brame .biop {

        width: 100%;

        background-color: var(--themes);

        padding: 0.14rem 0.14rem;

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        justify-content: space-between; }

        .noncont .brandlis .brame .biop .bk {

          display: inline-block;

          vertical-align: middle;

          color: #fff;

          line-height: 1.5;

          border-left: solid 2px #fff; }

        .noncont .brandlis .brame .biop .be {

          display: inline-block;

          vertical-align: middle;

          width: auto;

          color: #fff;

          line-height: 1.5; }

      .noncont .brandlis .brame .pom {

        width: 100%;

        background-color: #e8eeef;

        padding: 0.28rem;

        font-size: 0; }

        .noncont .brandlis .brame .pom .imgs {

          display: inline-block;

          vertical-align: middle;

          width: calc(1.42rem);

          margin-right: 0.3rem;

          position: relative;

          overflow: hidden; }

          .noncont .brandlis .brame .pom .imgs .img {

            width: 100%;

            padding-top: 100%;

            transition: all ease 0.5s; }

        .noncont .brandlis .brame .pom .imgs:hover .img {

          transform: scale(1.1); }

          .noncont .brandlis .brame .pom .kom {

            display: inline-block;
  
            vertical-align: middle;
  
            width: calc(100% - 1.72rem); 
            overflow: auto;
            max-height: calc((0.08rem + 1.3em) * 5);
          }
          .noncont .brandlis .brame .pom .kom::-webkit-scrollbar {
            width: 4px;
            height: 4px;
            scrollbar-arrow-color:rgba(0,0,0,.1);
        }
        /*滚动条里面小方块*/
        .noncont .brandlis .brame .pom .kom::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 10px rgba(26, 164, 212, 0.8);
            background: rgba(26, 164, 212, 0.8);
            scrollbar-arrow-color:rgba(0,0,0,.1);
        }
        /*滚动条里面轨道*/
        .noncont .brandlis .brame .pom .kom::-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);
        }

          .noncont .brandlis .brame .pom .kom a {

            width: 100%;

            color: #222;

            line-height: 1.3;

            padding: 0.04rem 0; }

          .noncont .brandlis .brame .pom .kom a:hover {

            color: var(--themes); }

    .noncont .brandlis .brame:nth-child(2n) {

      margin-right: 0; }

  .noncont .bralist {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap; }

    .noncont .bralist .arbom {

      display: inline-block;

      vertical-align: top;

      width: calc(285 / 1260 * 100%);

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

      margin-bottom: 0.5rem; }

      .noncont .bralist .arbom a {

        width: 100%;

        display: block; }

      .noncont .bralist .arbom .imgs {

        width: 100%;

        position: relative;

        overflow: hidden;

        background-color: #fff; }

        .noncont .bralist .arbom .imgs .img {

          width: 100%;

          padding-top: 81.081%;

          transition: all ease 0.5s; }

      .noncont .bralist .arbom .bom {

        width: 100%;

        padding-top: 0.2rem; }

        .noncont .bralist .arbom .bom .bit {

          width: 100%;

          color: #222;

          font-weight: bold;

          line-height: 1.3; }

        .noncont .bralist .arbom .bom .vim {

          width: 100%;

          color: #666;

          line-height: 1.5; }

    .noncont .bralist .arbom:nth-child(4n) {

      margin-right: 0; }

    .noncont .bralist .arbom:hover .imgs .img {

      transform: scale(1.1); }

    .noncont .bralist .arbom:hover .bom .bit {

      color: var(--themes); }

  .noncont .prohm {

    width: 100%;

    background-color: #fff;

    padding: 0.5rem;

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    align-items: center;

    border-radius: 0.1rem; }

    .noncont .prohm .prol {

      display: inline-block;

      vertical-align: middle;

      width: calc(580 / 1160 * 100%); }

      .noncont .prohm .prol .ptper {

        width: 100%;

        position: relative; }

        .noncont .prohm .prol .ptper .swiper-slide {

          width: 100%;

          display: block;

          background-color: #fff;

          border: solid 1px #e8eeef;

          overflow: hidden; }

          .noncont .prohm .prol .ptper .swiper-slide .imgs {

            width: 100%;

            position: relative;

            overflow: hidden; }

            .noncont .prohm .prol .ptper .swiper-slide .imgs .img {

              width: 100%;

              padding-top: 100%; }

      .noncont .prohm .prol .pbper {

        width: 100%;

        margin-top: 0.2rem; }

        .noncont .prohm .prol .pbper .swiper-slide {

          width: 100%;

          display: block;

          background-color: #fff;

          border: solid 1px #e8eeef;

          overflow: hidden;

          cursor: pointer; }

          .noncont .prohm .prol .pbper .swiper-slide:after {

            content: ' ';

            position: absolute;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            z-index: 2;

            border: solid 3px var(--themes);

            opacity: 0;

            transition: all ease 0.5s;

            box-sizing: border-box; }

          .noncont .prohm .prol .pbper .swiper-slide .imgs {

            width: 100%;

            position: relative;

            overflow: hidden; }

            .noncont .prohm .prol .pbper .swiper-slide .imgs .img {

              width: 100%;

              padding-top: 100%; }

        .noncont .prohm .prol .pbper .swiper-slide.on, .noncont .prohm .prol .pbper .swiper-slide:hover {

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

          .noncont .prohm .prol .pbper .swiper-slide.on:after, .noncont .prohm .prol .pbper .swiper-slide:hover:after {

            opacity: 1; }

    .noncont .prohm .pror {

      display: inline-block;

      vertical-align: middle;

      width: calc(470 / 1160 * 100%); }

      .noncont .prohm .pror .pir {

        width: 100%;

        color: #222;

        font-weight: bold;

        line-height: 1.2; }

        .noncont .prohm .pror .pir p {

          color: #222;

          font-weight: bold;

          line-height: 1.2; }

      .noncont .prohm .pror .lx {

        width: 100%;

        margin: 0.28rem 0;

        height: 1px;

        background-color: #e8eeef; }

      .noncont .prohm .pror .sinp {

        width: 100%;

        color: #666;

        line-height: 1.75; }

        .noncont .prohm .pror .sinp p {

          color: #666;

          line-height: 1.75; }

      .noncont .prohm .pror .range {

        width: 100%;

        margin-top: 0.4rem; }

        .noncont .prohm .pror .range .rxs {

          width: 100%;

          color: #222;

          line-height: 1.5;

          margin-bottom: 0.08rem; }

        .noncont .prohm .pror .range .loms {

          width: 100%;

          font-size: 0; }

          .noncont .prohm .pror .range .loms .lm {

            display: inline-block;

            vertical-align: middle;

            width: auto;

            border: solid 1px #e8eeef;

            border-radius: 3px;

            padding: 0 0.12rem;

            line-height: 2.5;

            margin-right: 0.1rem;

            margin-bottom: 0.1rem;

            color: #999; }

      .noncont .prohm .pror .btns {

        width: 100%;

        font-size: 0;

        margin-top: 0.5rem; }

        .noncont .prohm .pror .btns .btn {

          display: inline-block;

          vertical-align: middle;

          width: auto; }

          .noncont .prohm .pror .btns .btn a {

            display: inline-block;

            vertical-align: middle;

            width: auto;

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

            color: var(--themes);

            line-height: 3;

            padding: 0 0.4rem;

            border-radius: 1.5em;

            transition: all ease 0.5s; }

            .noncont .prohm .pror .btns .btn a span {

              display: inline-block;

              vertical-align: middle;

              width: 0.37rem;

              margin-left: 0.2rem;

              position: relative;

              top: -0.02rem; }

              .noncont .prohm .pror .btns .btn a span img {

                width: 100%;

                display: block; }

          .noncont .prohm .pror .btns .btn a:hover {

            animation: icon-bounce 0.5s alternate;

            background-color: var(--themes);

            color: #fff; }

            .noncont .prohm .pror .btns .btn a:hover span img {

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

              .noncont .prohm .pror .btns .btn a:hover .nos img {

                filter: grayscale(0) brightness(1); }

        .noncont .prohm .pror .btns .btn + .btn {

          margin-left: 0.1rem; }

  .noncont .metail {

    width: 100%;

    background-color: #fff;

    border-radius: 0.1rem;

    margin-top: 0.2rem; }

    .noncont .metail .maenavs {

      width: 100%; }

    .noncont .metail .maenav {

      width: 100%;

      border-bottom: solid 1px #e8eeef; }

      .noncont .metail .maenav .swiper-slide {

        width: auto;

        display: inline-block;

        vertical-align: middle;

        position: relative; }

        .noncont .metail .maenav .swiper-slide a {

          display: inline-block;

          vertical-align: middle;

          line-height: 0.8rem;

          width: auto;

          padding: 0 0.65rem;

          color: #222; }

        .noncont .metail .maenav .swiper-slide:after {

          content: ' ';

          position: absolute;

          z-index: 2;

          bottom: 0;

          left: 0;

          right: 0;

          width: 100%;

          height: 0.03rem;

          background-color: var(--themes);

          transition: all ease 0.5s;

          opacity: 0; }

      .noncont .metail .maenav .swiper-slide.on a {

        color: var(--themes); }

      .noncont .metail .maenav .swiper-slide.on:after {

        opacity: 1; }

    .noncont .metail .mcont {

      width: 100%;

      padding: 0.4rem 0.5rem; }

      .noncont .metail .mcont .mitem {

        width: 100%; }

      .noncont .metail .mcont .mitem + .mitem {

        margin-top: 0.4rem; }

      .noncont .metail .mcont .minp {

        width: 100%;

        /* color: #666; */

        line-height: 1.75; }

        .noncont .metail .mcont .minp span, .noncont .metail .mcont .minp p {

          /* color: #666; */

          line-height: 1.75; }

        .noncont .metail .mcont .minp img {

          max-width: 100%; }

      .noncont .metail .mcont .comtn {

        width: 100%; }

        .noncont .metail .mcont .comtn .cit {

          width: 100%;

          color: #222;

          line-height: 1.5;

          border-left: solid 0.03rem var(--themes);

          margin-bottom: 0.25rem;

          padding-left: 0.14rem; }

        .noncont .metail .mcont .comtn .table {

          width: 100%;

          overflow-y: hidden;

          overflow-x: auto;

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

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

          .noncont .metail .mcont .comtn .table::-webkit-scrollbar {

            width: 4px;

            height: 4px;

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

          .noncont .metail .mcont .comtn .table::-webkit-scrollbar-thumb {

            border-radius: 10px;

            -webkit-box-shadow: inset 0 0 10px rgba(26, 164, 212, 0.8);

            background: rgba(26, 164, 212, 0.8);

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

          .noncont .metail .mcont .comtn .table::-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); }

          .noncont .metail .mcont .comtn .table table {

            width: 11.6rem; }

          .noncont .metail .mcont .comtn .table td {

            border: solid 1px #e8e8e8;

            color: #666;

            line-height: 1.5;

            padding: 0.14rem 0.14rem;

            text-align: center; }

          .noncont .metail .mcont .comtn .table .td1 {

            width: calc(170 / 1160 * 100%);

            background-color: #e8eeef;

            border-bottom: solid 1px #fff; }

          .noncont .metail .mcont .comtn .table .td2 {

            width: calc(110 / 1160 * 100%); }

          .noncont .metail .mcont .comtn .table .td3 {

            width: calc(110 / 1160 * 100%); }

          .noncont .metail .mcont .comtn .table .td4 {

            width: calc(110 / 1160 * 100%); }

          .noncont .metail .mcont .comtn .table .td5 {

            width: calc(170 / 1160 * 100%); }

          .noncont .metail .mcont .comtn .table .td6 {

            width: calc(110 / 1160 * 100%); }

          .noncont .metail .mcont .comtn .table .td7 {

            width: calc(170 / 1160 * 100%); }

          .noncont .metail .mcont .comtn .table .td8 {

            width: calc(110 / 1160 * 100%); }

          .noncont .metail .mcont .comtn .table .td9 {

            width: calc(110 / 1160 * 100%); }

        .noncont .metail .mcont .comtn .table.wd2 td {

          border: solid 1px #e8e8e8;

          color: #666;

          line-height: 1.5;

          padding: 0.14rem 0.25rem;

          text-align: left; }

        .noncont .metail .mcont .comtn .table.wd2 .td1 {

          width: calc(400 / 1160 * 100%);

          background-color: #e8eeef;

          border-bottom: solid 1px #fff; }

        .noncont .metail .mcont .comtn .table.wd2 .td2 {

          width: calc(760 / 1160 * 100%); }

        .noncont .metail .mcont .comtn .table.wd2 td + td {

          border-left: none; }

  .noncont .botms {

    width: 100%;

    margin-top: 0.2rem;

    padding: 0.2rem 0.4rem;

    background-color: #fff;

    border-radius: 0.1rem;

    font-size: 0; }

    .noncont .botms .boms {

      display: inline-block;

      vertical-align: middle;

      width: calc(50% - 0.35rem - 1px); }

      .noncont .botms .boms a {

        width: 100%;

        display: flex;

        align-items: center; }

        .noncont .botms .boms a .ic {

          display: inline-block;

          vertical-align: middle;

          width: 10px; }

          .noncont .botms .boms a .ic img {

            width: 100%;

            display: block; }

          .noncont .botms .boms a .ic img:first-child {

            display: block; }

          .noncont .botms .boms a .ic img:last-child {

            display: none; }

        .noncont .botms .boms a .pm {

          display: inline-block;

          vertical-align: middle;

          flex: 1;

          color: #111;

          line-height: 1.5; }

      .noncont .botms .boms a:hover .ic img:first-child {

        display: none; }

      .noncont .botms .boms a:hover .ic img:last-child {

        display: block; }

      .noncont .botms .boms a:hover .pm {

        color: var(--themes); }

    .noncont .botms .lx {

      display: inline-block;

      vertical-align: middle;

      height: 0.2rem;

      width: 2px;

      background-color: #e8e8e8;

      margin: 0 0.35rem; }



.noncont.gray {

  background-color: #e8eeef; }

  .noncont.gray .nlom .naluls .nas {

    background-color: #fff; }

  .noncont.gray .nlom .naluls .naeul {

    background-color: #fff; }

  .noncont.gray .nlom .searn form {

    background-color: #fff; }



.crumbs {

  width: 100%; }

  .crumbs .column {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    align-items: center;

    font-size: 0; }

    .crumbs .column .colum {

      width: 100%;

      font-size: 0;

      display: inline-block;

      vertical-align: middle;

      text-align: right; }

      .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: 0.8rem; }

      .crumbs .column .colum a {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        color: #444;

        line-height: 0.8rem;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis; }

        .crumbs .column .colum a span {

          display: inline-block;

          color: #444;

          line-height: 0.8rem;

          position: relative;

          margin: 0 .08rem; }

          .crumbs .column .colum a span img {

            width: 100%;

            display: block; }

      .crumbs .column .colum a:hover {

        color: var(--themes); }

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

        color: #333; }

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

          display: none; }

    .crumbs .column .cul {

      display: inline-block;

      vertical-align: middle; }



@media (max-width: 800px) {

  .noncont .nacont .nal {

    top: 0; }

    .noncont .nacont .nal .crumbs {

      display: block; }

    .noncont .nacont .nal .recom {

      display: none; }

    .noncont .nacont .nal .nlom .tiop {

      padding: 0.25rem; }

  .noncont .nacont .nar .recom {

    display: block; }

  .noncont .nacont .nar .nanper .swiper-slide .lom {

    padding: 0.3rem; }

  .noncont .nacont .nar .nanper .btns {

    right: 0.3rem;

    bottom: 0.3rem; } }

.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: #666;

    border-radius: 0.25rem;

    background-color: #fff;

    margin: 0 0.05rem 0.1rem; }

  .pages .page.ltn {

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

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat; }

  .pages .page.rtn {

    background-image: url("../images/b2.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/b3.png");

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat;

    background-color: #fff !important;

    border: none; }

  .pages .page.on.ltn {

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

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat;

    background-color: #fff !important;

    border: none; }

  .pages .page.on.rtn {

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

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat;

    background-color: #fff !important;

    border: none; }

  .pages .page.rtn:hover {

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

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat;

    background-color: #fff !important;

    border: none; }

  .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;
    border-radius: 0.4rem;

    font-size: 16px;

    margin: 0 0.1rem 0.1rem; } }

.downers {

  width: 100%;

  padding: 0.4rem 0; }

  .downers .downlist {

    width: 100%;

    font-size: 0; }

    .downers .downlist .dowm {

      display: inline-block;

      vertical-align: top;

      width: calc(760 / 1600 * 100%);

      margin-right: calc(79 / 1600 * 100%);

      margin-bottom: 0.2rem;

      background-color: #f2f3f5; }

      .downers .downlist .dowm a {

        width: 100%;

        padding: 0.3rem 0.35rem;

        font-size: 0;

        display: block; }

      .downers .downlist .dowm .lx {

        display: inline-block;

        vertical-align: middle;

        width: 0.06rem;

        height: 0.28rem;

        background-color: var(--themes);

        margin-right: 0.1rem; }

      .downers .downlist .dowm .name {

        display: inline-block;

        vertical-align: middle;

        padding-right: 0.2rem;

        width: calc(100% - 0.16rem - 0.5rem);

        color: #222;

        font-weight: bold;

        line-height: 1.5; }

      .downers .downlist .dowm .ric {

        display: inline-block;

        vertical-align: middle;

        width: 0.5rem;

        height: 0.5rem;

        border-radius: 50%;

        background-color: #fff; }

        .downers .downlist .dowm .ric img {

          width: 100%;

          display: block; }

        .downers .downlist .dowm .ric img:first-child {

          display: block; }

        .downers .downlist .dowm .ric img:last-child {

          display: none; }

    .downers .downlist .dowm:nth-child(2n) {

      margin-right: 0; }

    .downers .downlist .dowm:hover .ric {

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

      .downers .downlist .dowm:hover .ric img:first-child {

        display: none; }

      .downers .downlist .dowm:hover .ric img:last-child {

        display: block; }



.contact {

  width: 100%;

  padding: 0.6rem 0; }

  .contact .catlist {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap;

    justify-content: center; }

    .contact .catlist .caitm {

      width: 32%;

      display: inline-block;

      vertical-align: top;

      text-align: center;

      padding: 0.2rem;

      margin-right: 2%; }

      .contact .catlist .caitm .ic {

        display: block;

        margin: 0 auto 0.2rem;

        width: 0.93rem;

        height: 0.93rem;

        border-radius: 50%;

        background-color: #fff;

        box-shadow: 0px 1px 15px 3px rgba(0, 94, 157, 0.11); }

        .contact .catlist .caitm .ic img {

          width: 100%;

          display: block; }

      .contact .catlist .caitm .cit {

        width: 100%;

        color: var(--themes);

        font-weight: bold;

        line-height: 1.5;

        text-align: center; }

        .contact .catlist .caitm .cit p {

          color: var(--themes);

          font-weight: bold;

          line-height: 1.5; }

    .contact .catlist .caitm:nth-child(3n) {

      margin-right: 0; }

  .contact .maps {

    width: 100%;

    margin-top: 0.4rem; }

    .contact .maps .map {

      width: 100%; }

      .contact .maps .map img {

        width: 100%;

        display: block; }

  .contact .message {

    width: 100%;

    margin-top: 0.5rem; }

    .contact .message .mit {

      width: 100%;

      color: #222;

      line-height: 1.4;

      margin-bottom: 0.4rem; }

    .contact .message form {

      width: 100%;

      display: block; }

    .contact .message .row {

      width: 100%;

      font-size: 0; }

      .contact .message .row .input {

        display: inline-block;

        vertical-align: middle;

        width: calc(510 / 1600 * 100%);

        margin-right: calc(34 / 1600 * 100%);

        background-color: #ffffff;

        border: solid 1px #d2d2d2;

        margin-bottom: 0.3rem; }

        .contact .message .row .input input {

          width: 100%;

          display: block;

          border: none;

          background-color: transparent;

          color: #222;

          line-height: 3.5;

          padding: 0 0.3rem; }

      .contact .message .row .input:nth-child(3n) {

        margin-right: 0; }

    .contact .message .text {

      width: 100%;

      margin-bottom: 0.3rem; }

      .contact .message .text .area {

        width: 100%;

        display: block;

        border: solid 1px #d2d2d2;

        padding: 0.2rem 0.3rem;

        background-color: #fff;

        color: #222;

        line-height: 1.5; }

    .contact .message .sub {

      width: 100%;

      font-size: 0;

      margin-top: 0.4rem;

      text-align: center; }

      .contact .message .sub .stn {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        background-color: var(--themes);

        color: #fff;

        position: relative;

        padding: 0 0.7rem;

        line-height: 3.2;

        height: 3.2em;

        border-radius: 1.6em;

        transition: all ease 0.5s; }

        .contact .message .sub .stn span {

          display: inline-block;

          vertical-align: middle;

          width: 15px;

          margin-left: 0.2rem;

          position: relative;

          top: -0.02rem; }

          .contact .message .sub .stn span img {

            width: 100%;

            display: block; }

        .contact .message .sub .stn .sic {

          position: absolute;

          left: 0;

          top: 0;

          width: 100%;

          height: 100%;

          z-index: 2;

          cursor: pointer;

          opacity: 0; }

      .contact .message .sub .stn:hover {

        animation: icon-bounce 0.5s alternate; }



.aboutm {

  width: 100%;

  padding: 0.6rem 0; }

  .aboutm .abtom {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    font-size: 0; }

    .aboutm .abtom .abl {

      display: inline-block;

      vertical-align: top;

      width: calc(740 / 1600 * 100%); }

    .aboutm .abtom .abr {

      display: inline-block;

      vertical-align: top;

      width: calc(740 / 1600 * 100%); }

    .aboutm .abtom .ainp {

      width: 100%;

      color: #666;

      line-height: 1.75; }

      .aboutm .abtom .ainp p {

        color: #666;

        line-height: 1.75; }



.cultrue {

  width: 100%;

  padding: 0.6rem 0 0;

  position: relative;

  overflow: hidden; }

  .cultrue .bg {

    position: absolute;

    z-index: 1;

    width: 100%;

    left: 0;

    top: 0;

    width: 100%;

    height: 11.2rem;

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

  .cultrue .w1600 {

    position: relative;

    z-index: 2; }

  .cultrue .cultlis {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap; }

    .cultrue .cultlis .culom {

      display: inline-block;

      vertical-align: top;

      width: calc(380 / 1600 * 100%);

      margin-right: calc(26 / 1600 * 100%);

      background-color: #fff;

      padding: 0.7rem 0.4rem; }

      .cultrue .cultlis .culom .ic {

        display: block;

        margin: 0 auto 0.24rem;

        width: 1rem;

        height: 1rem; }

        .cultrue .cultlis .culom .ic img {

          width: 100%;

          display: block; }

      .cultrue .cultlis .culom .xt {

        width: 100%;

        text-align: center;

        color: #222;

        font-weight: bold;

        line-height: 1.2; }

      .cultrue .cultlis .culom .xim {

        width: 100%;

        color: #666;

        line-height: 1.5;

        text-align: center;

        margin-top: 0.12rem; }

        .cultrue .cultlis .culom .xim p {

          line-height: 1.5;

          text-align: center; }

    .cultrue .cultlis .culom:nth-child(4n) {

      margin-right: 0; }

  .cultrue .vomen {

    width: calc(1760 / 1920 * 100%);

    background-color: #ffffff;

    box-shadow: 0px 1px 40px 0px rgba(15, 69, 141, 0.27);

    position: relative;

    z-index: 2;

    margin-top: 1rem;

    font-size: 0; }

    .cultrue .vomen .vml {

      display: inline-block;

      vertical-align: middle;

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

      position: relative;

      overflow: hidden; }

      .cultrue .vomen .vml .img {

        width: 100%;

        padding-top: 60.41%; }

    .cultrue .vomen .vmr {

      display: inline-block;

      vertical-align: middle;

      width: calc(799 / 1760 * 100%);

      padding: 0.2rem 0.8rem; }

      .cultrue .vomen .vmr .vir {

        width: 100%;

        color: #222;

        font-weight: bold;

        line-height: 1.3; }

      .cultrue .vomen .vmr .vinp {

        width: 100%;

        color: #666;

        line-height: 1.75;

        margin-top: 0.15rem; }

        .cultrue .vomen .vmr .vinp p {

          color: #666;

          line-height: 1.75; }



@media (max-width: 900px) {

  .cultrue {

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

.history {

  width: 100%;

  padding: 0.6rem 0;

  overflow: hidden; }

  .history .histper {

    width: 100%;

    padding-left: calc((100% - 16rem) / 2);

    position: relative; }

    .history .histper:after {

      content: ' ';

      position: absolute;

      width: 100%;

      top: 50%;

      transform: translateY(-50%);

      border-bottom: dashed 1px rgba(0, 0, 0, 0.4);

      left: calc((100% - 16rem) / 2); }

    .history .histper .btn {

      position: absolute;

      left: calc((100% - 16rem) / 2 - 1rem);

      top: 50%;

      transform: translateY(-50%);

      width: 0.6rem;

      height: 0.6rem;

      border-radius: 50%;

      background-color: var(--themes);

      font-size: 0; }

      .history .histper .btn .bn {

        display: inline-block;

        vertical-align: middle;

        width: 0.3rem;

        height: 0.6rem;

        position: relative;

        cursor: pointer; }

        .history .histper .btn .bn img {

          position: absolute;

          left: 50%;

          top: 50%;

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

      .history .histper .btn .bn:hover img {

        transform: translate(-50%, -50%) scale(1.1); }

    .history .histper .swiper-container {

      padding: 1.5rem 0; }

    .history .histper .swiper-slide {

      width: 100%;

      position: relative;

      transform: translateY(-50%);

      top: 0.05rem;

      transition: all ease 0.5s;

      opacity: 0; }

      .history .histper .swiper-slide .line {

        display: flex;

        width: 0.16rem;

        flex-wrap: wrap;

        flex-direction: column-reverse; }

        .history .histper .swiper-slide .line .x1 {

          display: block;

          width: 0.16rem;

          height: 0.16rem;

          border-radius: 50%;

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

          .history .histper .swiper-slide .line .x1 img {

            width: 100%;

            display: block; }

        .history .histper .swiper-slide .line .x2 {

          display: block;

          width: 0.16rem; }

          .history .histper .swiper-slide .line .x2 img {

            width: 100%;

            display: block; }

          .history .histper .swiper-slide .line .x2 img:first-child {

            display: block; }

          .history .histper .swiper-slide .line .x2 img:last-child {

            display: none; }

      .history .histper .swiper-slide .rem {

        position: absolute;

        top: 0;

        left: 0;

        width: calc(540 / 400 * 100%);

        padding-left: calc(45 / 540 * 100%);

        font-size: 0; }

        .history .histper .swiper-slide .rem .rom {

          width: 100%;

          font-size: 0; }

        .history .histper .swiper-slide .rem .imgs {

          display: inline-block;

          vertical-align: middle;

          width: calc(240 / 540 * 100%);

          position: relative;

          overflow: hidden; }

          .history .histper .swiper-slide .rem .imgs .img {

            width: 100%;

            padding-top: 75%; }

        .history .histper .swiper-slide .rem .eam {

          display: inline-block;

          vertical-align: middle;

          width: calc(300 / 540 * 100%);

          padding-left: 0.3rem; }

          .history .histper .swiper-slide .rem .eam .et {

            width: 100%;

            color: var(--themes);

            line-height: 1.3;

            font-weight: bold; }

          .history .histper .swiper-slide .rem .eam .eim {

            width: 100%;

            margin-top: 0.12rem;

            color: #666;

            line-height: 1.5;

            height: 4.5em; }

            .history .histper .swiper-slide .rem .eam .eim p {

              color: #666;

              line-height: 1.5; }

    .history .histper .swiper-slide:nth-child(2n) {

      transform: translateY(50%);

      top: -0.05rem; }

      .history .histper .swiper-slide:nth-child(2n) .line {

        flex-direction: column; }

        .history .histper .swiper-slide:nth-child(2n) .line .x2 img:first-child {

          display: none; }

        .history .histper .swiper-slide:nth-child(2n) .line .x2 img:last-child {

          display: block; }

      .history .histper .swiper-slide:nth-child(2n) .rem {

        top: auto;

        bottom: 0; }

    .history .histper .swiper-slide-active, .history .histper .swiper-slide-active + .swiper-slide, .history .histper .swiper-slide-active + .swiper-slide + .swiper-slide, .history .histper .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide {

      opacity: 1; }



@media (max-width: 1660px) {

  .history .histper {

    padding-left: 5%; } }

@media (max-width: 800px) {

  .history .histper {

    padding-left: 3%; }

    .history .histper .swiper-container {

      max-width: 97%;

      padding: 2rem 0; }

    .history .histper .swiper-slide .rem {

      width: 6rem; }

      .history .histper .swiper-slide .rem .eam .eim {

        width: 100%;

        margin-top: 0.12rem;

        color: #666;

        line-height: 1.5;

        height: 5.8em;

        overflow: hidden;

        text-overflow: ellipsis;

        display: -webkit-box;

        -webkit-line-clamp: 4;

        -webkit-box-orient: vertical; }

        .history .histper .swiper-slide .rem .eam .eim p {

          color: #666;

          line-height: 1.5; }

    .history .histper .btn {

      left: 1.5%;

      z-index: 4; }

    .history .histper:after {

      left: 0; } }