.w1720 {

  width: 17.2rem;

  margin: 0 auto;

  font-size: 0;

  max-width: 100%; }



@media (max-width: 1740px) {

  .w1720 {

    width: 90%; } }

@media (max-width: 800px) {

  .w1720 {

    width: 94%; } }

.w1440 {

  width: 14.4rem;

  margin: 0 auto;

  font-size: 0;

  max-width: 100%; }



@media (max-width: 1460px) {

  .w1440 {

    width: 90%; } }

@media (max-width: 800px) {

  .w1440 {

    width: 94%; } }

:root {

  --themes: #182f82; }



/* @font-face {

  font-family: 'PFRegular';

  src: url("../font/PingFang-Regular.woff2"); }

@font-face {

  font-family: 'PFBold';

  src: url("../font/PingFang-Bold.woff2"); }

@font-face {

  font-family: 'PFMedium';

  src: url("../font/PingFang-Medium.woff2"); } */

body, html {
  /* font-family: 'PFMedium';  */
  font-family: sans-serif;
}



.Regular {

  /* font-family: 'PFRegular';  */
}



.Bold {
  /* font-family: 'PFBold';  */
  font-weight: bold;
}



.Medium {

  /* font-family: 'PFMedium';  */
}



footer {

  width: 100%; }

  footer .ftop {

    width: 100%; }

  footer .fbot {

    width: 100%; }

  footer .fop {

    width: 100%;

    padding: 0.6rem 0 0.4rem;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between; }

    footer .fop .fol {

      display: inline-block;

      vertical-align: top;

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

      footer .fop .fol .fogo {

        width: 100%;

        font-size: 0; }

        footer .fop .fol .fogo a {

          display: inline-block;

          vertical-align: middle;

          width: 2.02rem; }

          footer .fop .fol .fogo a img {

            width: 100%;

            display: block; }

      footer .fop .fol .share {

        width: 100%;

        font-size: 0;

        margin: 0.35rem 0; }

        footer .fop .fol .share .am {

          display: inline-block;

          vertical-align: middle;

          width: auto;

          height: 20px;

          margin-right: 0.16rem;

          transition: all ease 0.5s;

          opacity: 0.4; }

          footer .fop .fol .share .am a, footer .fop .fol .share .am img {

            height: 100%;

            display: block; }

        footer .fop .fol .share .am:hover {

          opacity: 1; }

      footer .fop .fol .sinp {

        width: 100%;

        color: #b3bcdc;

        line-height: 1.75; }

        footer .fop .fol .sinp p {

          color: #b3bcdc;

          line-height: 1.75; }

    footer .fop .for {

      display: inline-block;

      vertical-align: top;

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

      display: flex;

      justify-content: flex-end; }

      footer .fop .for .flist {

        display: inline-block;

        vertical-align: top;

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

        text-align: left;

        /* width: auto; */

        min-width: 4em;

        font-size: 0.18rem; }

        footer .fop .for .flist .fit {

          width: 100%;

          font-size: 0;

          margin-bottom: 0.2rem; }

          footer .fop .for .flist .fit a {

            display: inline-block;

            vertical-align: middle;

            color: #fff;

            line-height: 1.4;

            transition: all ease 0.5s;

            padding: 0.06rem 0; }

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

            color: #fff; }

        footer .fop .for .flist .ful {

          width: 100%; }

          footer .fop .for .flist .ful a {

            width: 100%;

            display: inline-block;

            vertical-align: top;

            color: #b3bcdc;

            transition: all ease 0.5s;

            line-height: 2;

            line-height: 1.5;

            padding: 0.05rem 0; }

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

            color: #fff; }

          footer .fop .for .flist .ful div {

            width: 100%;

            display: inline-block;

            vertical-align: middle;

            color: #b3bcdc;

            line-height: 2;

            transition: all ease 0.5s; }

      footer .fop .for .flist + .flist {

        margin-left: calc(70 / 1000 * 100%); }

  footer .fob {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    padding: 0.25rem 0; }

    footer .fob .fm {

      display: inline-block;

      vertical-align: middle;

      width: auto;

      color: #6173b2;

      line-height: 1.5; }

      footer .fob .fm a {

        display: inline-block;

        vertical-align: middle;

        color: #6173b2;

        line-height: 1.5;

        transition: all ease 0.5s; }

      footer .fob .fm a:hover {

        color: #fff; }



@media (max-width: 800px) {

  footer .fop {

    padding: 0.3rem 0 0; }

    footer .fop .fol {

      width: 100%;

      margin-bottom: 0.2rem;

      text-align: center; }

    footer .fop .for {

      width: 100%;

      display: none; }

      footer .fop .for .flist {

        width: 100%;

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

        position: relative; }

        footer .fop .for .flist .fit {

          width: 100%;

          margin-bottom: 0;

          padding: 0.25rem 0;

          margin-left: 0; }

          footer .fop .for .flist .fit a {

            font-size: 16px; }

        footer .fop .for .flist .ful {

          width: 100%;

          font-size: 0;

          padding-bottom: 0.15rem;

          display: none;

          height: auto; }

          footer .fop .for .flist .ful a {

            line-height: 2; }

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

        border-top: none;

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

      footer .fop .for .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.5rem;

        color: #333;

        border: none;

        transition: all ease 0.5s; }

      footer .fop .for .flist.has-ful.show:after {

        content: " ";

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

header {

  width: 100%;

  position: fixed;

  z-index: 10;

  top: 0;

  left: 0;

  right: 0;

  background-color: transparent;

  transition: all ease 0.5s; }

  header .hop {

    width: 100%;

    font-size: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative; }

    header .hop .hol {

      display: inline-block;

      vertical-align: middle;

      width: auto; }

      header .hop .hol .ss {

        display: inline-block;

        vertical-align: middle;

        width: 16px;

        cursor: pointer; }

        header .hop .hol .ss img {

          width: 100%;

          display: block; }

      header .hop .hol .languages {

        width: auto;

        display: inline-block;

        vertical-align: middle;

        font-size: 0;

        margin: 0 0.1rem;

        text-align: left;

        z-index: 3;

        margin-left: 0.5rem; }

        header .hop .hol .languages .lauges {

          width: 100%;

          display: inline-block;

          vertical-align: middle;

          position: relative; }

          header .hop .hol .languages .lauges .lashow {

            width: 100%;

            position: relative;

            cursor: pointer;

            font-size: 0;

            line-height: 40px;

            height: 40px;

            padding-right: 16px; }

            header .hop .hol .languages .lauges .lashow .ac {

              display: inline-block;

              vertical-align: middle;

              width: 16px;

              height: 16px;

              margin-right: 0.1rem; }

              header .hop .hol .languages .lauges .lashow .ac img {

                width: 100%;

                display: block; }

            header .hop .hol .languages .lauges .lashow .am {

              color: #fff;

              display: inline-block;

              vertical-align: middle;

              width: auto; }

            header .hop .hol .languages .lauges .lashow:after {

              content: ' ';

              position: absolute;

              right: 0rem;

              top: calc(50%);

              transform: translateY(-50%);

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

              width: 10px;

              height: 5px;

              background-size: 100%; }

          header .hop .hol .languages .lauges .language {

            position: absolute;

            z-index: 20;

            top: 100%;

            width: 100%;

            display: none;

            width: 60px;

            width: 1rem;

            left: 50%;

            transform: translateX(-50%); }

            header .hop .hol .languages .lauges .language .latem {

              width: 100%; }

              header .hop .hol .languages .lauges .language .latem a {

                width: 100%;

                display: block;

                color: #333;

                padding: 0 0.1rem;

                line-height: 3;

                text-align: center;

                position: relative;

                background: #efefef;

                overflow: hidden; }

                header .hop .hol .languages .lauges .language .latem a span {

                  display: inline-block;

                  vertical-align: middle;

                  position: relative;

                  z-index: 2; }

                header .hop .hol .languages .lauges .language .latem a:after {

                  content: "";

                  position: absolute;

                  width: 140%;

                  height: 100%;

                  left: -10%;

                  top: 0;

                  z-index: -1;

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

                  background: var(--themes);

                  z-index: 1;

                  animation: outHover 0.5s ease 1 forwards; }

              header .hop .hol .languages .lauges .language .latem a:hover {

                color: #fff; }

                header .hop .hol .languages .lauges .language .latem a:hover span {

                  color: #fff; }

                header .hop .hol .languages .lauges .language .latem a:hover:after {

                  animation-name: onHover; }

@keyframes onHover {

  from {

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

  to {

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

@keyframes outHover {

  from {

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

  to {

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

    header .hop .hor {

      display: inline-block;

      vertical-align: middle;

      width: auto; }

      header .hop .hor .menu {

        display: inline-block;

        vertical-align: middle;

        width: 24px;

        height: 24px;

        cursor: pointer;

        position: relative;

        display: none; }

        header .hop .hor .menu img {

          width: 100%;

          display: block; }

        header .hop .hor .menu .clk {

          width: 100%;

          height: 100%;

          text-align: center;

          color: #fff;

          font-size: 20px;

          line-height: 24px;

          text-align: center;

          position: absolute;

          z-index: 3;

          left: 50%;

          top: 50%;

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

          display: none; }

      header .hop .hor .nav {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        position: relative; 

        font-size: 0; }

        header .hop .hor .nav .nsa {

          display: inline-block;

          vertical-align: middle;

          width: auto; }

          header .hop .hor .nav .nsa .tas {

            width: 100%; }

            header .hop .hor .nav .nsa .tas a {

              display: inline-block;

              vertical-align: middle;

              color: #fff;

              line-height: 0.7rem; }

          header .hop .hor .nav .nsa .navuls {

            position: absolute;

            right: -0.3rem;

            top: 100%;

            background-color: #fff;

            display: flex;

            flex-wrap: wrap;

            /* max-width: 8rem; */

            width: auto;
            white-space: nowrap;

            padding: 0.2rem;

            display: none;

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

            header .hop .hor .nav .nsa .navuls .catem {

              width: 2.5rem;
              display: inline-block;
              vertical-align: top;
              margin-right: 0.3rem; }

              header .hop .hor .nav .nsa .navuls .catem .nait {

                width: 100%;

                font-size: 0;

                margin-bottom: 0.15rem; }

                header .hop .hor .nav .nsa .navuls .catem .nait a {

                  display: inline-block;

                  vertical-align: middle;

                  color: #333;

                  line-height: 1.5; }

                header .hop .hor .nav .nsa .navuls .catem .nait a:hover {

                  color: var(--themes); }

              header .hop .hor .nav .nsa .navuls .catem .cauls {

                width: 100%; }

                header .hop .hor .nav .nsa .navuls .catem .cauls .atn {

                  width: 100%;

                  padding: 0.04rem 0; }

                  header .hop .hor .nav .nsa .navuls .catem .cauls .atn a {

                    width: 100%;

                    color: #666;

                    line-height: 1.5; }

                  header .hop .hor .nav .nsa .navuls .catem .cauls .atn a:hover {

                    color: var(--themes); }

            header .hop .hor .nav .nsa .navuls .catem:nth-child(3n) {

              margin-right: 0; }

        header .hop .hor .nav .nsa + .nsa {

          margin-left: 0.4rem; }

    header .hop .logo {

      position: absolute;

      left: 50%;

      top: 50%;

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

      width: 1.61rem; }

      header .hop .logo a, header .hop .logo img {

        width: 100%;

        display: block; }

    header .hop nav {

      display: none; }

  header .sechom {

    position: absolute;

    z-index: 3;

    right: 0;

    width: 100%;

    background-color: #fff;

    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.09);

    padding: 0.2rem 0.1rem;

    top: 100%;

    display: none; }

    header .sechom form {

      width: 100%;

      display: block;

      font-size: 0;

      margin: 0 auto;

      max-width: 9rem; }

    header .sechom .input {

      display: inline-block;

      vertical-align: middle;

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

      margin-right: 0.2rem; }

      header .sechom .input .int {

        width: 100%;

        display: block;

        background-color: #fff;

        line-height: 2.4;

        height: 2.4em;

        color: #111;

        padding: 0 0.2rem;

        border: none;

        background-color: #f1f1f1; }

    header .sechom .stn {

      display: inline-block;

      vertical-align: middle;

      width: 2.2em;

      height: 2.2em;

      border-radius: 50%;

      background-color: var(--themes);

      position: relative; }

      header .sechom .stn img {

        position: absolute;

        top: 50%;

        left: 50%;

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

        width: 16px;

        height: 17px;

        display: block;

        border-radius: 50%;

        cursor: pointer;

        z-index: 1;

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

      header .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.blacd {

  background-color: #223175; }



@media (max-width: 800px) {

  header .hop {

    height: 0.9rem; }

    header .hop .hor .menu {

      display: inline-block; }

    header .hop .hor .nav {

      display: none; }

    header .hop nav {

      width: 100%;

      position: fixed;

      right: 0;

      top: calc(0.9rem);

      left: auto;

      height: calc(100vh - 0.9rem);

      background-color: #fff;

      margin-right: 0;

      overflow: auto;

      z-index: 500;

      transition: transform .3s;

      padding-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.menu-state .hop .hor .menu img {

    opacity: 0; } }

.banner {

  width: 100%;

  position: relative; }

  .banner .swiper-slide {

    width: 100%;

    position: relative; }

    .banner .swiper-slide .imgs {

      width: 100%;

      position: relative;

      overflow: hidden; }

      .banner .swiper-slide .imgs .img {

        width: 100%;

        padding-top: 48.95%; }

    .banner .swiper-slide .box {

      position: absolute;

      left: 50%;

      top: calc(240 / 940 * 100%);

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

      z-index: 3;

      width: 80%;

      max-width: 80%;

      text-align: center; }

      .banner .swiper-slide .box .cn {

        width: 100%;

        color: #fff;

        line-height: 1.2;

        font-family: 'PFRegular';

        letter-spacing: 0.14rem;

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

          color: #fff;

          line-height: 1.2; }

    .banner .swiper-slide .videoc {

      position: absolute;

      left: 0;

      top: 0;

      width: 100%;

      height: 100%;

      display: block;

      z-index: 4;

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

      opacity: 1;

      transition: all ease 0.5s;

      z-index: 5; }

      .banner .swiper-slide .videoc .vom {

        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        z-index: 3; }

  .banner .swiper-slide-active .box .cn, .banner .swiper-slide-active .box .en, .banner .swiper-slide-active .box .more {

    opacity: 1;

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

  .banner .swiper-pagination {

    bottom: 0.9rem;

    width: auto;

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

  .banner .swiper-pagination-bullet {

    display: inline-block;

    vertical-align: bottom;

    opacity: 1;

    position: relative;

    transition: all ease 0.5s;

    background-color: transparent !important;

    font-size: 16px;

    width: 1.5em;

    height: 1.5em;

    line-height: 1.5;

    color: #fff;

    opacity: 0.6;

    cursor: pointer; }

  .banner .swiper-pagination-bullet-active {

    opacity: 1; }

  .banner .down {

    position: absolute;

    left: 50%;

    bottom: 0.8rem;

    width: 0.3rem;

    cursor: pointer;

    z-index: 2;

    transform: translateX(-50%);

    transition: all ease 0.5s; }

    .banner .down img {

      width: 100%;

      display: block; }

  .banner .down:hover {

    transform: translateX(-50%) scale(1.1); }



.rightnav {

  position: fixed;

  top: 85%;

  right: 0.2rem;

  z-index: 3; }

  .rightnav .ritm {

    width: 0.5rem;

    height: 0.5rem;

    background-color: var(--themes);

    display: block;

    cursor: pointer;

    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.19);

    transition: all ease 0.5s; }

    .rightnav .ritm img {

      width: 100%;

      display: block; }

  .rightnav .ritm:hover {

    animation: icon-bounce 0.5s alternate; }



@media (max-width: 800px) {

  .rightnav .ritm {

    width: 0.7rem;

    height: 0.7rem; } }

.modular {

  width: 100%; }

  .modular .mitop {

    width: 100%;

    margin-bottom: 0.6rem; }

    .modular .mitop .mit {

      width: 100%;

      font-size: 0; }

      .modular .mitop .mit .lx {

        display: inline-block;

        vertical-align: middle;

        width: 3px;

        margin-right: 0.2rem; }

        .modular .mitop .mit .lx img {

          width: 100%;

          display: block; }

      .modular .mitop .mit .xm {

        display: inline-block;

        vertical-align: middle;

        color: #333;

        font-weight: bold;

        line-height: 1.2; }

  .modular .mitop.flexs {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap; }

    .modular .mitop.flexs .mit {

      display: inline-block;

      vertical-align: middle;

      width: auto; }

    .modular .mitop.flexs .ram {

      display: inline-block;

      vertical-align: middle; }

      .modular .mitop.flexs .ram .raim {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        font-size: 0;

        cursor: pointer; }

        .modular .mitop.flexs .ram .raim .ec {

          display: inline-block;

          vertical-align: middle;

          width: 22px;

          margin-right: 0.04rem; }

          .modular .mitop.flexs .ram .raim .ec img {

            width: 100%;

            display: block; }

          .modular .mitop.flexs .ram .raim .ec img:first-child {

            display: block; }

          .modular .mitop.flexs .ram .raim .ec img:last-child {

            display: none; }

        .modular .mitop.flexs .ram .raim .cm {

          display: inline-block;

          vertical-align: middle;

          color: #333;

          line-height: 1.5; }

      .modular .mitop.flexs .ram .raim + .raim {

        margin-left: 0.7rem; }

      .modular .mitop.flexs .ram .raim.on .ec img:first-child, .modular .mitop.flexs .ram .raim:hover .ec img:first-child {

        display: none; }

      .modular .mitop.flexs .ram .raim.on .ec img:last-child, .modular .mitop.flexs .ram .raim:hover .ec img:last-child {

        display: block; }

      .modular .mitop.flexs .ram .raim.on .cm, .modular .mitop.flexs .ram .raim:hover .cm {

        color: var(--themes); }



@media (max-width: 800px) {

  .modular .mitop.flexs .ram {

    text-align: center; }

    .modular .mitop.flexs .ram .raim .ec {

      display: block;

      margin: 0 auto 0.1rem; }

    .modular .mitop.flexs .ram .raim .cm {

      width: 100%;

      text-align: center; } }

.about {

  width: 100%;

  padding: 0.8rem 0; }

  .about .aboum {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    flex-direction: row-reverse; }

    .about .aboum .aml {

      display: inline-block;

      vertical-align: middle;

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

      position: relative;

      overflow: hidden; }

      .about .aboum .aml .imgs {

        width: 100%; }

        .about .aboum .aml .imgs .img {

          width: 100%;

          padding-top: 70.83%; }

    .about .aboum .amr {

      display: inline-block;

      vertical-align: middle;

      width: calc(620 / 1720 * 100%); }

      .about .aboum .amr .minps {

        width: 100%;

        color: #333;

        line-height: 1.75; }

        .about .aboum .amr .minps p {

          color: #333;

          line-height: 1.75; }

      .about .aboum .amr .more {

        width: 100%;

        font-size: 0;

        margin-top: 0.6rem; }

        .about .aboum .amr .more a {

          display: inline-block;

          vertical-align: middle;

          padding: 0 0.4rem;

          background-color: var(--themes);

          color: #fff;

          line-height: 3; }

          .about .aboum .amr .more a span {

            display: inline-block;

            vertical-align: middle;

            width: 8px;

            margin-left: 0.1rem; }

            .about .aboum .amr .more a span img {

              width: 100%;

              display: block; }

        .about .aboum .amr .more a:hover {

          animation: icon-bounce 0.5s alternate; }



.newoms {

  width: 100%;

  padding: 0.8rem 0; }

  .newoms .newlist {

    width: 100%;

    font-size: 0; }

    .newoms .newlist .newom {

      display: inline-block;

      vertical-align: top;

      width: calc(392 / 1720 * 100%);

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

      position: relative;

      transition: all ease 0.5s;

      background-color: #fff; }

      .newoms .newlist .newom .imgs {

        width: 100%;

        position: relative;

        overflow: hidden; }

        .newoms .newlist .newom .imgs .img {

          width: 100%;

          padding-top: 66.66%;

          transition: all ease 0.5s; }

      .newoms .newlist .newom .com {

        width: 100%;

        transition: all ease 0.5s;

        padding: 0.3rem 0; }

        .newoms .newlist .newom .com .ex {

          width: 100%;

          color: #888;

          line-height: 1.5; }

        .newoms .newlist .newom .com .tc {

          width: 100%;

          color: #333;

          line-height: 1.5;

          position: relative;

          margin: 0.08rem 0;

          overflow: hidden;

          text-overflow: ellipsis;

          display: -webkit-box;

          -webkit-line-clamp: 1;

          -webkit-box-orient: vertical; }

          .newoms .newlist .newom .com .tc:after {

            content: ' ';

            position: absolute;

            left: 0;

            top: 50%;

            transform: translateY(-50%);

            left: -0.3rem;

            transition: all ease 0.5s;

            opacity: 0; }

        .newoms .newlist .newom .com .eim {

          width: 100%;

          color: #888;

          line-height: 1.5;

          height: 3em; }

        .newoms .newlist .newom .com .check {

          width: 100%;

          font-size: 0;

          margin-top: 0.24rem;

          transition: all ease 0.5s;

          opacity: 0; }

          .newoms .newlist .newom .com .check .xm {

            display: inline-block;

            vertical-align: middle;

            color: var(--themes);

            line-height: 1.5; }

            .newoms .newlist .newom .com .check .xm span {

              display: inline-block;

              vertical-align: middle;

              width: 8px;

              position: relative;

              margin-left: 0.06rem; }

              .newoms .newlist .newom .com .check .xm span img {

                width: 100%;

                display: block; }

    .newoms .newlist .newom:nth-child(4n) {

      margin-right: 0; }

    .newoms .newlist .newom:hover .imgs .img {

      transform: scale(1.1); }

    .newoms .newlist .newom:hover .com {

      box-shadow: 0px 0px 38px 0px rgba(178, 189, 230, 0.35);

      padding: 0.3rem; }

      .newoms .newlist .newom:hover .com .check {

        opacity: 1; }

      .newoms .newlist .newom:hover .com .tc {

        color: var(--themes); }



@media (max-width: 800px) {

  .newoms .newlist .newom .com .tc {

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    white-space: wrap !important;

    -webkit-box-orient: vertical;

    height: 3em; } }

.product {

  width: 100%;

  padding: 0.8rem 0; }

  .product .prconts {

    width: 100%;

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

    .product .prconts .peconm {

      width: 100%;

      display: none; }

    .product .prconts .peconm.on {

      display: block; }

    .product .prconts .propers {

      width: 100%;

      cursor: url("../images/i5.png") 30 30, auto; }

      .product .prconts .propers .swiper-slide {

        width: 100%;

        position: relative;

        overflow: hidden; }

        .product .prconts .propers .swiper-slide a {

          width: 100%;

          display: block;

          cursor: url("../images/i5.png") 30 30, auto; }

        .product .prconts .propers .swiper-slide .imgs {

          width: 100%;

          position: relative;

          overflow: hidden; }

          .product .prconts .propers .swiper-slide .imgs .img {

            width: 100%;

            position: relative;

            padding-top: 100%; }

          .product .prconts .propers .swiper-slide .imgs .pmg {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            z-index: 3;

            opacity: 0;

            transition: all ease 0.5s; }

        .product .prconts .propers .swiper-slide .com {

          width: 100%;

          padding: 0.2rem 0; }

          .product .prconts .propers .swiper-slide .com .cp {

            width: 100%;

            text-align: center;

            color: #333;

            line-height: 1.5; }

          .product .prconts .propers .swiper-slide .com .pm {

            width: 100%;

            color: #888;

            text-align: center;

            line-height: 1.5;

            margin-top: 0.02rem; }

      .product .prconts .propers .swiper-slide:hover .imgs .pmg {

        opacity: 1; }



@media (max-width: 1740px) {

  .product .prconts {

    padding-left: 5%; } }

@media (max-width: 800px) {

  .product .prconts {

    padding-left: 3%; } }

.nanber {

  width: 100%;

  position: relative; }

  .nanber .imgs {

    width: 100%;

    position: relative; }

    .nanber .imgs .img {

      width: 100%;

      padding-top: 39.0625%; }

  .nanber .nox {

    position: absolute;

    z-index: 4;

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

    top: calc(45%);

    transform: translateY(-50%);

    width: 70%;

    z-index: 2;

    text-align: left; }

    .nanber .nox .cm {

      width: 100%;

      color: #fff;

      line-height: 1.4; }



@media (max-width: 800px) {

  .nanber .nox {

    left: 3%; } }

.produpers {

  width: 100%;

  padding: 1rem 0; }

  .produpers .produper {

    width: 100%;

    position: relative; }

    .produpers .produper .swiper-slide {

      width: 100%;

      position: relative;

      overflow: hidden; }

      .produpers .produper .swiper-slide a {

        width: 100%;

        display: block; }

      .produpers .produper .swiper-slide .imgs {

        width: 100%;

        position: relative;

        overflow: hidden; }

        .produpers .produper .swiper-slide .imgs .img {

          width: 100%;

          position: relative;

          padding-top: 100%; }

        .produpers .produper .swiper-slide .imgs .pmg {

          position: absolute;

          top: 0;

          left: 0;

          width: 100%;

          height: 100%;

          z-index: 3;

          opacity: 0;

          transition: all ease 0.5s; }

      .produpers .produper .swiper-slide .com {

        width: 100%;

        padding: 0.2rem 0; }

        .produpers .produper .swiper-slide .com .cp {

          width: 100%;

          color: #333;

          text-align: center;

          line-height: 1.5; }

        .produpers .produper .swiper-slide .com .pm {

          width: 100%;

          color: #888;

          line-height: 1.5;

          text-align: center;

          margin-top: 0.02rem; }

    .produpers .produper .swiper-slide:hover .imgs .pmg {

      opacity: 1; }

    .produpers .produper .btn {

      position: absolute;

      top: 40%;

      transform: translateY(-50%);

      width: 9px;

      cursor: pointer;

      transition: all ease 0.5s;

      z-index: 3; }

      .produpers .produper .btn img {

        width: 100%;

        display: block; }

    .produpers .produper .btn:hover {

      transform: translateY(-50%) scale(1.1); }

    .produpers .produper .bl {

      left: -0.4rem; }

    .produpers .produper .br {

      right: -0.4rem; }



@media (max-width: 1740px) {

  .produpers .produper .bl {

    left: -15px; }

  .produpers .produper .br {

    right: -15px; } }

@media (max-width: 800px) {

  .produpers .produper .bl {

    left: -3px; }

  .produpers .produper .br {

    right: -3px; } }

.panner {

  width: 100%;

  position: relative; }

  .panner .imgs {

    width: 100%;

    position: relative; }

    .panner .imgs .img {

      width: 100%;

      padding-top: 39.0625%; }

  .panner .nox {

    position: absolute;

    z-index: 4;

    right: calc(120 / 1920 * 100%);

    top: calc(45%);

    transform: translateY(-50%);

    width: 70%;

    z-index: 2;

    text-align: right; }

    .panner .nox .cm {

      width: 100%;

      color: #fff;

      line-height: 1.4; }



.nanber.nec {

  width: 100%;

  position: relative;

  display: flex;

  flex-wrap: wrap;

  flex-direction: row-reverse; }

  .nanber.nec .imgs {

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

    position: relative;

    display: inline-block;

    vertical-align: middle; }

    .nanber.nec .imgs .img {

      width: 100%;

      padding-top: 60%; }

  .nanber.nec .leom {

    position: relative;

    left: 0;

    top: 0;

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

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    padding: 0.2rem calc(100 / 1920 * 100%);

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

    .nanber.nec .leom .pt {

      width: 100%;

      color: #fff;

      line-height: 1.5; }

    .nanber.nec .leom .xm {

      width: 100%;

      color: #fff;

      line-height: 1.5;

      margin: 0.2rem 0 0.4rem; }

      .nanber.nec .leom .xm p {

        color: #fff;

        line-height: 1.5; }

    .nanber.nec .leom .lx {

      width: 0.45rem;

      display: block; }

      .nanber.nec .leom .lx img {

        width: 100%;

        display: block; }



@media (max-width: 800px) {

  .nanber.nec .imgs {

    width: 100%; }

  .nanber.nec .leom {

    position: relative;

    width: 100%;

    height: 100%;

    padding: 20px; } }

.newpeom {

  width: 100%;

  padding: 1rem 0; }

  .newpeom .newplis {

    width: 100%;

    font-size: 0; }

    .newpeom .newplis .nepm {

      display: inline-block;

      vertical-align: top;

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

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

      margin-bottom: 0.5rem; }

      .newpeom .newplis .nepm a {

        width: 100%;

        display: block; }

      .newpeom .newplis .nepm .imgs {

        width: 100%;

        position: relative;

        overflow: hidden; }

        .newpeom .newplis .nepm .imgs .img {

          width: 100%;

          padding-top: 66.66%;

          transition: all ease 0.5s; }

      .newpeom .newplis .nepm .pom {

        width: 100%;

        padding: 0.3rem 0 0.2rem;

        border-bottom: solid 1px #eee; }

        .newpeom .newplis .nepm .pom .pe {

          width: 100%;

          color: #888;

          line-height: 1.5; }

        .newpeom .newplis .nepm .pom .xit {

          width: 100%;

          color: #333;

          font-weight: bold;

          line-height: 1.5;

          overflow: hidden;

          text-overflow: ellipsis;

          display: -webkit-box;

          -webkit-line-clamp: 1;

          -webkit-box-orient: vertical; }

    .newpeom .newplis .nepm:nth-child(3n) {

      margin-right: 0; }

    .newpeom .newplis .nepm:hover .imgs .img {

      transform: scale(1.1); }

    .newpeom .newplis .nepm:hover .pom .xit {

      color: var(--themes); }



@media (max-width: 800px) {

  .newpeom .newplis .nepm .pom .xit {

    font-size: 14px;

    height: 3em;

    white-space: wrap !important;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical; } }

.details {

  width: 100%;

  padding: 0.7rem 0; }

  .details .detail {

    width: 100%;

    font-size: 0; }

    .details .detail .del {

      display: inline-block;

      vertical-align: top;

      width: calc(1200 / 1720 * 100%);

      margin-right: calc(139 / 1720 * 100%); }

      .details .detail .del .dit {

        width: 100%;

        color: #333;

        font-weight: bold;

        line-height: 1.3;

        margin-bottom: 0.6rem; }

      .details .detail .del .dim {

        width: 100%;

        font-size: 0;

        border-top: solid 1px #eee;

        border-bottom: solid 1px #eee;

        padding: 0.25rem 0;

        margin-bottom: 0.6rem; }

        .details .detail .del .dim .am {

          display: inline-block;

          vertical-align: middle;

          height: 18px;

          margin-right: 0.25rem; }

          .details .detail .del .dim .am a, .details .detail .del .dim .am img {

            height: 100%;

            display: block; }

          .details .detail .del .dim .am img:first-child {

            display: block; }

          .details .detail .del .dim .am img:nth-child(2) {

            display: none; }

        .details .detail .del .dim .am:hover img:first-child {

          display: none; }

        .details .detail .del .dim .am:hover img:nth-child(2) {

          display: block; }

      .details .detail .del .dinp {

        width: 100%;

        color: #333;

        line-height: 1.75; }

        .details .detail .del .dinp p {

          color: #333;

          line-height: 1.75; }

        .details .detail .del .dinp img {

          max-width: 100%; }

    .details .detail .der {

      display: inline-block;

      vertical-align: top;

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

      position: sticky;

      top: 0.8rem; }

      .details .detail .der .mitop {

        margin-bottom: 0.4rem; }

      .details .detail .der .derlist {

        width: 100%; }

        .details .detail .der .derlist .derm {

          width: 100%;

          position: relative;

          display: block; }

          .details .detail .der .derlist .derm a {

            width: 100%;

            display: block; }

          .details .detail .der .derlist .derm .imgs {

            width: 100%;

            position: relative;

            overflow: hidden; }

            .details .detail .der .derlist .derm .imgs .img {

              width: 100%;

              padding-top: 66.66%;

              transition: all ease 0.5s; }

          .details .detail .der .derlist .derm .pom {

            width: 100%;

            padding: 0.15rem 0 0.15rem; }

            .details .detail .der .derlist .derm .pom .pe {

              width: 100%;

              color: #888;

              line-height: 1.5; }

            .details .detail .der .derlist .derm .pom .xit {

              width: 100%;

              color: #333;

              font-weight: bold;

              line-height: 1.5; }

        .details .detail .der .derlist .derm + .derm {

          margin-top: 0.3rem; }

        .details .detail .der .derlist .derm:hover .imgs .img {

          transform: scale(1.1); }

        .details .detail .der .derlist .derm:hover .pom .xit {

          color: var(--themes); }



.abouts {

  width: 100%;

  padding: 1rem 0 0; }

  .abouts .abtop {

    width: 100%;

    margin-bottom: 0.5rem; }

    .abouts .abtop .ait {

      width: 100%;

      color: #333;

      text-align: center;

      line-height: 1.5;

      margin-bottom: 0.14rem; }

    .abouts .abtop .xl {

      display: block;

      margin: 0 auto;

      width: 0.3rem; }

      .abouts .abtop .xl img {

        width: 100%;

        display: block; }

  .abouts .ainp {

    width: 100%;

    color: #333;

    line-height: 1.75; }

    .abouts .ainp p {

      color: #333;

      line-height: 1.75; }

  .abouts .paners {

    width: 100%;

    margin-top: 1rem; }

    .abouts .paners .imgs {

      width: 100%; }

      .abouts .paners .imgs img {

        width: 100%;

        display: block; }

  .abouts .petom {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    margin: 0.8rem 0;

    flex-direction: row-reverse; }

    .abouts .petom .imgs {

      display: inline-block;

      vertical-align: middle;

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

      position: relative;

      overflow: hidden; }

      .abouts .petom .imgs .img {

        width: 100%;

        padding-top: 80.35%; }

    .abouts .petom .pem {

      display: inline-block;

      vertical-align: middle;

      width: calc(530 / 1720 * 100%); }

      .abouts .petom .pem .pemlist {

        width: 100%;

        font-size: 0; }

        .abouts .petom .pem .pemlist .peim {

          width: 100%;

          font-size: 0;

          padding: 0.6rem 0; }

          .abouts .petom .pem .pemlist .peim .pc {

            display: inline-block;

            vertical-align: top;

            width: 0.48rem;

            height: 0.48rem;

            margin-right: 0.5rem; }

            .abouts .petom .pem .pemlist .peim .pc img {

              width: 100%;

              display: block; }

          .abouts .petom .pem .pemlist .peim .eom {

            width: calc(100% - 0.98rem);

            display: inline-block;

            vertical-align: top; }

            .abouts .petom .pem .pemlist .peim .eom .et {

              width: 100%;

              color: #333;

              font-weight: bold;

              line-height: 1.5;

              padding: 0.1rem 0; }

            .abouts .petom .pem .pemlist .peim .eom .ep {

              width: 100%;

              color: #333;

              line-height: 1.75; }

              .abouts .petom .pem .pemlist .peim .eom .ep p {

                color: #333;

                line-height: 1.75; }



.honors {

  width: 100%;

  padding: 0.4rem 0 0.8rem; }

  .honors .abtop {

    width: 100%;

    margin-bottom: 0.5rem;

    text-align: left; }

    .honors .abtop .ait {

      width: 100%;

      color: #333;

      line-height: 1.5;

      margin-bottom: 0.1rem; }

    .honors .abtop .xl {

      display: block;

      width: 0.3rem; }

      .honors .abtop .xl img {

        width: 100%;

        display: block; }

  .honors .hoduper {

    width: 100%;

    position: relative; }

    .honors .hoduper .swiper-slide {

      width: 100%;

      position: relative;

      overflow: hidden; }

      .honors .hoduper .swiper-slide a {

        width: 100%;

        display: block; }

      .honors .hoduper .swiper-slide .imgs {

        width: 100%;

        position: relative;

        overflow: hidden; }

        .honors .hoduper .swiper-slide .imgs .img {

          width: 100%;

          position: relative;

          padding-top: 91.42%; }

      .honors .hoduper .swiper-slide .com {

        width: 100%;

        padding: 0.2rem 0; }

        .honors .hoduper .swiper-slide .com .cp {

          width: 100%;

          color: #333;

          line-height: 1.5;

          margin-bottom: 0.05rem; }

        .honors .hoduper .swiper-slide .com .pinm {

          width: 100%;

          color: #333;

          line-height: 1.75; }

          .honors .hoduper .swiper-slide .com .pinm p {

            color: #333;

            line-height: 1.75; }

          .honors .hoduper .swiper-slide .com .pinm p + p {

            margin-top: 0.05rem; }

    .honors .hoduper .swiper-slide:hover .imgs .pmg {

      opacity: 1; }

    .honors .hoduper .btn {

      position: absolute;

      top: 40%;

      transform: translateY(-50%);

      width: 9px;

      cursor: pointer;

      transition: all ease 0.5s;

      z-index: 3; }

      .honors .hoduper .btn img {

        width: 100%;

        display: block; }

    .honors .hoduper .btn:hover {

      transform: translateY(-50%) scale(1.1); }

    .honors .hoduper .bl {

      left: -0.4rem; }

    .honors .hoduper .br {

      right: -0.4rem; }



@media (max-width: 1740px) {

  .honors .hoduper .bl {

    left: -15px; }

  .honors .hoduper .br {

    right: -15px; } }

@media (max-width: 800px) {

  .honors .hoduper .bl {

    left: -3px; }

  .honors .hoduper .br {

    right: -3px; } }

.history {

  width: 100%;

  padding: 0.4rem 0; }

  .history .abtop {

    width: 100%;

    margin-bottom: 0.5rem;

    text-align: left; }

    .history .abtop .ait {

      width: 100%;

      color: #333;

      line-height: 1.5;

      margin-bottom: 0.1rem; }

    .history .abtop .xl {

      display: block;

      width: 0.3rem; }

      .history .abtop .xl img {

        width: 100%;

        display: block; }

  .history .histom {

    width: 100%;

    padding: 1.4rem 0.6rem; }

  .history .histper {

    width: 100%;

    position: relative; }

    .history .histper:after {

      content: ' ';

      position: absolute;

      z-index: 1;

      width: 100%;

      height: 1px;

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

      left: 0;

      right: 0;

      top: 50%;

      transform: translateY(-50%); }

    .history .histper .swiper-container {

      position: relative;

      z-index: 3;

      padding: 1rem 0; }

    .history .histper .swiper-slide {

      width: 100%;

      position: relative;

      transform: translateY(-50%);

      top: 0.125rem;

      transition: all ease 0.5s;

      cursor: pointer; }

      .history .histper .swiper-slide .xls {

        display: flex;

        width: 0.25rem;

        flex-wrap: wrap; }

        .history .histper .swiper-slide .xls .lx {

          display: block;

          margin: 0 auto;

          width: 1px;

          height: 1.9rem;

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

        .history .histper .swiper-slide .xls .point {

          display: block;

          width: 0.25rem; }

          .history .histper .swiper-slide .xls .point img {

            width: 100%;

            display: block; }

          .history .histper .swiper-slide .xls .point img:first-child {

            display: block; }

          .history .histper .swiper-slide .xls .point img:last-child {

            display: none; }

      .history .histper .swiper-slide .rls {

        position: absolute;

        top: 0;

        left: 0;

        width: calc(374 / 186 * 100%);

        padding-left: 0.3rem;

        font-size: 0; }

        .history .histper .swiper-slide .rls .year {

          width: 100%;

          color: #fff;

          line-height: 1.3;

          opacity: 0.6;

          transition: all ease 0.5s; }

        .history .histper .swiper-slide .rls .yinp {

          width: 100%;

          margin-top: 0.12rem;

          color: #fff;

          line-height: 1.5;

          height: 4.5em;

          opacity: 0.6;

          transition: all ease 0.5s; }

          .history .histper .swiper-slide .rls .yinp p {

            color: #fff;

            line-height: 1.5; }

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

      transform: translateY(50%);

      top: -0.125rem; }

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

        flex-direction: column-reverse; }

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

        top: auto;

        bottom: 0; }

    .history .histper .swiper-slide:hover .xls .point img:first-child, .history .histper .swiper-slide-active .xls .point img:first-child {

      display: none; }

    .history .histper .swiper-slide:hover .xls .point img:last-child, .history .histper .swiper-slide-active .xls .point img:last-child {

      display: block; }

    .history .histper .swiper-slide:hover .rls .year, .history .histper .swiper-slide:hover .rls .yinp, .history .histper .swiper-slide-active .rls .year, .history .histper .swiper-slide-active .rls .yinp {

      opacity: 1; }



.petails {

  width: 100%;

  padding: 0.7rem 0;

  background-color: #f4f9fd; }

  .petails .petail {

    width: 100%;

    font-size: 0;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between; }

    .petails .petail .pel {

      display: inline-block;

      vertical-align: top;

      width: calc(670 / 1720 * 100%);

      margin: 0 calc(100 / 1720 * 100%); }

      .petails .petail .pel .swiper-container {

        padding-bottom: 0.3rem; }

      .petails .petail .pel .swiper-slide {

        width: 100%; }

        .petails .petail .pel .swiper-slide .imgs {

          width: 100%;

          position: relative;

          overflow: hidden; }

          .petails .petail .pel .swiper-slide .imgs .img {

            width: 100%;

            padding-top: 100%; }

      .petails .petail .pel .swiper-pagination-bullet {

        background-color: #c8d1e3;

        opacity: 1; }

      .petails .petail .pel .swiper-pagination-bullet-active {

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

    .petails .petail .per {

      display: inline-block;

      vertical-align: top;

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

      .petails .petail .per .pie {

        width: 100%;

        color: #333;

        line-height: 1.3;

        margin-bottom: 0.2rem; }

      .petails .petail .per .sinp {

        width: 100%;

        color: #333;

        line-height: 1.6; }

        .petails .petail .per .sinp p {

          color: #333;

          line-height: 1.6; }

      .petails .petail .per .iconlis {

        width: 100%;

        font-size: 0;

        margin-top: 0.5rem; }

        .petails .petail .per .iconlis .cion {

          display: inline-block;

          vertical-align: middle;

          width: auto;

          margin-right: 0.4rem; }

          .petails .petail .per .iconlis .cion .ic {

            display: block;

            margin: 0 auto 0.12rem;

            width: 0.6rem;

            height: 0.6rem;

            border-radius: 50%;

            background-color: #23b0e3; }

          .petails .petail .per .iconlis .cion .cm {

            width: 100%;

            text-align: center;

            color: #333;

            line-height: 1.5; }



.conpeom {

  width: 100%;

  padding: 0.7rem 0; }

  .conpeom .conavs {

    width: 100%;

    margin-bottom: 0.7rem; }

    .conpeom .conavs .swiper-wrapper.center{

      justify-content: center;

    }

    .conpeom .conavs .swiper-slide {

      width: 100%;

      padding: 0.2rem 0;

      border-bottom: solid 1px #eee;

      color: #333;

      line-height: 2;

      cursor: pointer;

      text-align: center; }

    .conpeom .conavs .swiper-slide.on, .conpeom .conavs .swiper-slide:hover {

      color: var(--themes);

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

  .conpeom .peconts {

    width: 100%; }

    .conpeom .peconts .peiom {

      width: 100%;

      display: none; }

    .conpeom .peconts .peiom.on {

      display: block; }

    .conpeom .peconts .pinps {

      width: 100%;

      color: #333;

      line-height: 1.75; }

      .conpeom .peconts .pinps p {

        color: #333;

        line-height: 1.75; }

      .conpeom .peconts .pinps img {

        max-width: 100%; }



.searchd {

  width: 100%;

  padding: 0.8rem 0;

  background-color: #f1f1f1; }

  .searchd .sercom {

    width: 100%; }

    .searchd .sercom form {

      width: 100%;

      display: block;

      font-size: 0;

      margin: 0 auto;

      max-width: 8rem;

      overflow: hidden;

      border-radius: 0.3rem;

      display: flex;

      background-color: #fff; }

    .searchd .sercom .int {

      display: inline-block;

      vertical-align: middle;

      width: calc(100% - 65px); }

      .searchd .sercom .int input {

        width: 100%;

        display: block;

        padding: 0 0.3rem;

        line-height: 3.5;

        height: 3.5em;

        background-color: #fff;

        border: none; }

    .searchd .sercom .stn {

      width: 65px;

      display: inline-block;

      vertical-align: middle;

      position: relative;

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

      .searchd .sercom .stn img {

        position: absolute;

        left: 50%;

        top: 50%;

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

        width: 16px;

        height: 16px; }

      .searchd .sercom .stn .scc {

        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        cursor: pointer;

        opacity: 0; }

  .searchd .result {

    width: 100%;

    margin-top: 0.8rem; }

    .searchd .result .sit {

      width: 100%;

      text-align: center;

      color: #333;

      font-weight: bold;

      line-height: 1.4;

      margin-bottom: 0.4rem; }

      .searchd .result .sit span {

        color: var(--themes); }

    .searchd .result .resom {

      width: 100%;

      font-size: 0;

      text-align: center;

      margin-bottom: 0.6rem; }

      .searchd .result .resom .riem {

        display: inline-block;

        vertical-align: middle;

        width: auto;

        padding: 0 0.25rem;

        line-height: 2.5;

        border-radius: 1.25em;

        background-color: #fff;

        cursor: pointer;

        margin: 0 0.15rem; }

      .searchd .result .resom .riem:hover, .searchd .result .resom .riem.on {

        background-color: var(--themes);

        color: #fff; }

  .searchd .searpon {

    width: 100%;

    font-size: 0;

    display: block;

    max-width: 14rem;

    margin: 0 auto; }

    .searchd .searpon .sepom {

      width: 100%;

      display: none; }

    .searchd .searpon .sepom.on {

      display: block; }

    .searchd .searpon .searlist {

      width: 100%; }

      .searchd .searpon .searlist .seam {

        width: 100%;

        background-color: #fff;

        border-radius: 0.2rem;

        transition: all ease 0.5s; }

        .searchd .searpon .searlist .seam a {

          width: 100%;

          display: flex;

          align-items: center;

          padding: 0.3rem;

          justify-content: space-between; }

        .searchd .searpon .searlist .seam .lam {

          display: inline-block;

          vertical-align: middle;

          flex: 1;

          padding-right: 0.15rem; }

          .searchd .searpon .searlist .seam .lam .lit {

            width: 100%;

            color: #333;

            font-weight: bold;

            line-height: 1.5; }

          .searchd .searpon .searlist .seam .lam .linp {

            width: 100%;

            margin-top: 0.05rem;

            color: #999;

            line-height: 1.5; }

            .searchd .searpon .searlist .seam .lam .linp p {

              color: #999;

              line-height: 1.5; }

        .searchd .searpon .searlist .seam .ram {

          display: inline-block;

          vertical-align: middle;

          width: auto; }

          .searchd .searpon .searlist .seam .ram .tip {

            display: inline-block;

            vertical-align: middle;

            padding: 0 0.4rem;

            line-height: 2.5;

            border-radius: 1.25em;

            background-color: var(--themes);

            color: #fff; }

      .searchd .searpon .searlist .seam:hover {

        box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.09); }

        .searchd .searpon .searlist .seam:hover .lam .lit {

          color: var(--themes); }

      .searchd .searpon .searlist .seam + .seam {

        margin-top: 0.2rem; }