@charset "UTF-8";

.w1200 {

  width: 12rem;

  margin: 0 auto;

  position: relative;

  font-size: 0; }



@media (max-width: 1280px) {

  .w1200 {

    width: 90%; } }

@media (max-width: 800px) {

  .w1200 {

    width: 94%; } }

.w1600 {

  width: 16rem;

  margin: 0 auto;

  position: relative;

  font-size: 0; }



@media (max-width: 1680px) {

  .w1600 {

    width: 94%; } }

@media (max-width: 800px) {

  .w1600 {

    width: 94%; } }

:root {

  /* --themes: #22943a;  */

  --themes: #999; 
}



/*@font-face {*/

/*  font-family: 'MiSans-Bold';*/

/*  src: url("../font/MiSans-Bold.otf"); }*/

/*@font-face {*/

/*  font-family: 'MiSans-Demibold';*/

/*  src: url("../font/MiSans-Demibold.otf"); }*/

/*@font-face {*/

/*  font-family: 'MiSans-Light';*/

/*  src: url("../font/MiSans-Light.otf"); }*/

/*@font-face {*/

/*  font-family: 'MiSans-Medium';*/

/*  src: url("../font/MiSans-Medium.otf"); }*/

/*@font-face {*/

/*  font-family: 'MiSans-Normal';*/

/*  src: url("../font/MiSans-Normal.otf"); }*/

/*@font-face {*/

/*  font-family: 'MiSans-Semibold';*/

/*  src: url("../font/MiSans-Semibold.otf"); }*/

/*@font-face {*/

/*  font-family: 'Oswald-Medium';*/

/*  src: url("../font/Oswald-Medium.ttf"); }*/

/** body, html {*/

/*  font-family: 'MiSans-Normal'; }*/



header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 50;

  transition: all ease 0.5s; }

header .hop {

  width: 100%;

  display: flex;

  justify-content: space-between;

  transition: all ease 0.5s;

  min-height: 0.9rem;

  align-items: center; }

header .rav {

  width: auto;

  display: inline-block;

  vertical-align: middle;

  padding-left: 0.4rem;

  font-size: 0;

  display: flex;

  align-items: center; }

header .rav .search {

  display: inline-block;

  vertical-align: middle;

  width: auto;

  text-align: center;

  cursor: pointer;

  position: relative;

  width: 19px;

  height: 40px; }

header .rav .search .sc {

  display: inline-block;

  vertical-align: middle;

  width: 100%;

  position: absolute;

  left: 50%;

  top: 50%;

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

  z-index: 3; }

header .rav .search .sc img {

  width: 100%;

  display: block; }

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

  display: block; }

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

  display: none; }

header .rav .sechom {

  position: absolute;

  z-index: 3;

  right: 0;

  width: 4rem;

  background-color: #fff;

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

  padding: 0.1rem;

  top: 100%;

  display: none; }

header .rav .sechom form {

  width: 100%;

  display: block;

  font-size: 0; }

header .rav .sechom .input {

  display: inline-block;

  vertical-align: middle;

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

  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: 15px;

  height: 15px;

  display: block;

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

header .rav .languages .lauges {

  width: 100%;

  display: inline-block;

  vertical-align: middle;

  position: relative; }

header .rav .languages .lauges .lashow {

  width: 100%;

  position: relative;

  cursor: pointer;

  font-size: 0;

  line-height: 40px;

  white-space: nowrap;

  height: 40px;

  padding-right: 16px; }

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

  display: inline-block;

  vertical-align: middle;

  width: 19px;

  margin-right: 0.1rem; }

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

  width: 100%;

  display: block; }

header .rav .languages .lauges .lashow .ac img:first-child {

  display: block; }

header .rav .languages .lauges .lashow .ac img:last-child {

  display: none; }

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

  color: #fff;

  display: inline-block;

  vertical-align: middle;

  width: auto;

  min-width: 40px; }

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

  content: ' ';

  position: absolute;

  right: 0rem;

  top: calc(50%);

  transform: translateY(-50%);

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

  width: 9px;

  height: 6px;

  background-size: 100%; }

header .rav .languages .lauges .language {

  position: absolute;

  z-index: 20;

  top: 100%;

  width: 100%;

  display: none;

  width: 60px;

  width: 1rem;

  left: 50%;

  transform: translateX(-50%); }

header .rav .languages .lauges .language .latem {

  width: 100%; }

header .rav .languages .lauges .language .latem a {

  width: 100%;

  display: block;

  color: #333;

  padding: 0 0.1rem;

  line-height: 3;

  text-align: center;

  position: relative;

  background: #efefef;

  overflow: hidden; }

header .rav .languages .lauges .language .latem a span {

  display: inline-block;

  vertical-align: middle;

  position: relative;

  z-index: 2; }

header .rav .languages .lauges .language .latem a:after {

  content: "";

  position: absolute;

  width: 140%;

  height: 100%;

  left: -10%;

  top: 0;

  z-index: -1;

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

  background: var(--themes);

  z-index: 1;

  animation: outHover 0.5s ease 1 forwards; }

header .rav .languages .lauges .language .latem a:hover {

  color: #fff; }

header .rav .languages .lauges .language .latem a:hover span {

  color: #fff; }

header .rav .languages .lauges .language .latem a:hover:after {

  animation-name: onHover; }

@keyframes onHover {

  from {

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

  to {

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

@keyframes outHover {

  from {

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

  to {

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

header .rav .rd {

  display: inline-block;

  vertical-align: middle;

  width: 0.51rem;

  margin-left: 0.3rem;

  cursor: pointer; }

header .rav .rd img {

  width: 100%;

  display: block; }

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

  display: inline-block;

  vertical-align: middle;

  width: auto;

  font-size: 0;

  white-space: nowrap; }

header .logo .log {

  width: 2.54rem;

  display: inline-block;

  vertical-align: middle; }

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

  width: 100%;

  display: block; }

header .logo .log img:first-child {

  display: block; }

header .logo .log img:last-child {

  display: none; }

header nav {

  width: 100%;

  display: block;

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

header nav .natem .nas a {

  display: inline-block;

  line-height: 0.9rem;

  color: #fff;

  position: relative;

  padding: 0 0.15rem;

  transition: all ease 0.5s; }

header nav .natem .nas:after {

  content: ' ';

  position: absolute;

  left: 50%;

  bottom: 0rem;

  transform: translateX(-50%);

  opacity: 0;

  background-color: #fff;

  transition: all ease 0.5s;

  width: 0;

  height: 0.02rem; }

header nav .natem .navuls {

 

  min-width: 2rem;

  position: absolute;

  z-index: 101;

  left: calc(50%);

  top: 100%;

  transform: translateX(-50%);

  display: none; }

header nav .natem .navuls ul {

  width: 100%; }

header nav .natem .navuls ul li {

  width: 100%;

  position: relative; }

header nav .natem .navuls ul li .njm {

  width: 100%;

  font-size: 0;

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

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

header nav .natem .navuls ul li .ns { 
  width: 100%; 
  display: inline-block; 
  vertical-align: middle; 
  line-height: 3; 
  color: #333; 
  text-align: left; 
  padding: 0 0.1rem; 
  position: relative; 
  text-align: center; 
  white-space: nowrap;
}

header nav .natem .navuls ul li .theul {

  width: 100%;

  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: #fff;

  font-weight: bold; }

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;

  z-index: 101;

  left: calc(50%);

  top: 0.9rem;

  left: 0;

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

  padding: 0.4rem 0;

  background-color: var(--themes);

  display: none; }

header nav .natem .longul .longlist {

  width: 100%;

  font-size: 0;

  display: flex;

  flex-wrap: wrap;

  text-align: left; }

header nav .natem .longul .longlist .logem {

  display: inline-block;

  vertical-align: middle;

  width: calc(290 / 1320 * 100%);

  margin-right: calc(52 / 1320 * 100%);

  margin-bottom: 0.4rem;

  transition: all ease 0.5s;

  top: 0;

  position: relative; }

header nav .natem .longul .longlist .logem a {

  width: 100%;

  display: block;

  font-size: 0; }

header nav .natem .longul .longlist .logem .imgs {

  display: inline-block;

  vertical-align: middle;

  width: calc(1rem);

  margin-right: 0.2rem;

  position: relative;

  overflow: hidden; }

header nav .natem .longul .longlist .logem .imgs .img {

  width: 100%;

  padding-top: 100%;

  transition: all ease 0.5s; }

header nav .natem .longul .longlist .logem .rom {

  display: inline-block;

  vertical-align: middle;

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

header nav .natem .longul .longlist .logem .rom .rx {

  width: 100%;

  color: #fff;

  line-height: 1.5; }

header nav .natem .longul .longlist .logem:nth-child(4n) {

  margin-right: 0; }

header nav .natem .longul .longlist .logem:hover {

  top: -0.1rem; }

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

  display: inline-block; }

header nav .natem.on .nas:after {

  opacity: 1;

  width: 100%; }

header nav .natem:hover .nas:before {

  opacity: 1; }



header.white {

  background-color: #fff; }

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

  display: none; }

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

  display: block; }

header.white .rav .languages .lauges .lashow .ac img:first-child {

  display: none; }

header.white .rav .languages .lauges .lashow .ac img:last-child {

  display: block; }

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

  color: #000; }

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

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

  background-size: 100%; }

header.white .logo .log img:first-child {

  display: none; }

header.white .logo .log img:last-child {

  display: block; }

header.white nav .natem .nas a {

  color: #000; }

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

  opacity: 1;

  width: 100%;

  background-color: #333; }

header.white nav .natem:hover .nas:after {

  opacity: 1;

  width: 100%;

  background-color: #333; }



@media (max-width: 800px) {

  header {

    background-color: #fff; }

  header .hop {

    align-items: center;

    padding: 0.1rem 0;

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

  header .blace {

    position: fixed;

    z-index: -1;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    z-index: 450;

    display: none;

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

  header nav {

    width: 100%;

    width: 5rem;

    position: fixed;

    right: -100%;

    top: 0;

    left: auto;

    height: 100vh;

    background-color: #fff;

    margin-right: 0;

    overflow: auto;

    z-index: 500;

    transition: all ease  1.2s;

    padding-left: 0.1rem;

    padding: 0.1rem;

    display: block;

    text-align: left;

    opacity: 0;

    border-top: solid 1px #e5e5e5; }

  header nav .natem {

    display: inline-block;

    vertical-align: middle;

    position: relative;

    width: auto;

    width: 100%;

    padding: 0.1rem 0;

    opacity: 0;

    transform: translate(-10px, -30px);

    transition: all .8s ease; }

  header nav .natem .nas {

    width: auto;

    display: inline-block;

    text-align: left;

    width: 100%;

    margin: 0; }

  header nav .natem .nas a {

    width: auto;

    display: inline-block;

    vertical-align: middle;

    line-height: 2.5;

    color: #333;

    font-weight: bold;

    font-family: 'Alibaba-PuHuiTi-Bold';

    padding: 0 0.3rem;

    position: relative; }

  header nav .natem .nas .ik {

    display: none !important; }

  header nav .natem .nas a:hover {

    color: var(--themes);

    background-color: transparent; }

  header nav .natem .navuls {

    width: 100%;

    position: relative;

    z-index: 101;

    left: 0%;

    top: 0%;

    transform: translateX(0%);

    background: #fff;

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

    display: none;

    text-align: left; }

  header nav .natem .navuls ul {

    width: 100%;

    padding: 0.1rem 0.2rem; }

  header nav .natem .navuls ul li {

    width: 100%;

    display: block;

    position: relative;

    margin-bottom: 0; }

  header nav .natem .navuls ul li .njm {

    background-color: #fff;

    border-top: none; }

  header nav .natem .navuls ul li .ns { 
    width: auto; 
    display: inline-block; 
    vertical-align: middle; 
    line-height: 1.5; 
    color: #333; 
    text-align: left !important; 
    padding: .1rem 0.2rem; 
    background: #fff; 
    position: relative; 
    white-space: normal;

  }

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

    color: var(--themes); }

  header nav .natem .navuls ul li + li {

    border-top: solid 1px #eee; }

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

    background-color: transparent;

    color: var(--themes); }

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

    display: block; }

  header nav .natem:before {

    display: none !important; }

  header nav .natem.on .nas:after {

    display: none; }

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

    display: none; }

  header nav .natem.has-nav:after {

    content: "+";

    display: inline-block;

    width: 36px;

    height: 36px;

    line-height: 36px;

    text-align: center;

    position: absolute;

    background: none;

    right: 0;

    left: auto;

    transform: translateX(0);

    top: 0.05rem;

    font-size: 20px;

    color: #333;

    border: none; }

  header nav .natem.has-nav.show:after {

    content: "-"; }

  header nav .natem.animate {

    opacity: 1;

    transform: translate(0, 0); }

  header .logo .log img:first-child {

    display: none; }

  header .logo .log img:last-child {

    display: block; }

  header .rav .menu {

    width: 30px;

    height: 30px;

    display: inline-block;

    margin-left: 0.15rem; }

  header .rav .menu img {

    width: 100%;

    display: block;

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

  header .rav .menu .clk {

    line-height: 30px; }

  header .rav .searcom {

    width: 80px;

    background-color: #f8f8f8; }

  header .rav .searcom .input input {

    color: #333; }

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

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

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

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

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

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

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

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

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

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

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

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

  header .rav .search {

    width: 20px;

    display: inline-block;

    margin-right: 5px; }

  header .rav .search .sc {

    width: 15px;

    height: 15px; }

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

    display: none; }

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

    display: block; }

  header .rav .sechom {

    width: 100vw;

    position: fixed;

    left: 0;

    top: calc(40px + 0.2rem);

    padding: 0.15rem; }

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

    display: none; }

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

    display: block; }

  header .rav .languages .lauges .lashow .ac img:first-child {

    display: none; }

  header .rav .languages .lauges .lashow .ac img:last-child {

    display: block; }

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

    color: #000; }

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

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

    background-size: 100%; }

  header .hot {

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

  header .hot .hom .hkr .tc img:first-child {

    display: none; }

  header .hot .hom .hkr .tc img:last-child {

    display: block; }

  header .hot .hom .hkr .tm {

    color: #222; }



  header.menu-state .rav .menu img {

    opacity: 0; }

  header.menu-state nav {

    opacity: 1;

    right: 0; }

  header.menu-state .blace {

    opacity: 1; } }

.banner {

  width: 100%;

  position: relative; }

.banner .swiper-slide {

  width: 100%;

  position: relative; }

.banner .swiper-slide .imgs.pcm {

  width: 100%;

  position: relative;

  overflow: hidden;

  display: block; }

.banner .swiper-slide .imgs.pcm .img {

  width: 100%;

  padding-top: 48.958%; }

.banner .swiper-slide .imgs.phm {

  width: 100%;

  position: relative;

  overflow: hidden;

  display: none; }

.banner .swiper-slide .imgs.phm .img {

  width: 100%;

  padding-top: 48.958%; }

.banner .swiper-slide .box {

  position: absolute;

  z-index: 4;

  top: 50%;

  transform: translateY(-50%);

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

  width: 6rem;

  width: 8rem;

  max-width: 80%; }

.banner .swiper-slide .box .bit {

  width: 100%;

  color: #fff;

  line-height: 1.2;

  text-align: left;

  font-weight: bold;

  margin-top: 0.15rem;

  opacity: 0;

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

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

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

  color: #fff;

  line-height: 1.2;

  position: relative;

  z-index: 2; }

.banner .swiper-slide .box .eim {

  width: 100%;

  color: #fff;

  line-height: 1.2;

  text-align: left;

  margin-top: 0.3rem;

  font-weight: bold;

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

  color: #fff;

  line-height: 1.2;

  position: relative;

  z-index: 2; }

.banner .swiper-slide .box .more {

  width: 100%;

  margin-top: 0.55rem;

  font-size: 0;

  opacity: 0;

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

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

.banner .swiper-slide .box .more a {

  display: inline-block;

  vertical-align: middle;

  background-color: var(--themes);

  border-radius: 0.26rem;

  width: 0.52rem;

  height: 0.52rem;

  position: relative;

  top: 0;

  transition: all ease 0.5s; }

.banner .swiper-slide .box .more a:hover {

  top: -0.1rem; }

.banner .swiper-slide .box .vob {

  width: 100%;

  font-size: 0;

  margin-top: 0.5rem;

  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 .vob a {

  display: inline-block;

  vertical-align: middle;

  width: auto;

  background-color: #fff;

  padding: 0 0.45rem;

  color: #000;

  cursor: pointer;

  line-height: 3; }

.banner .swiper-slide .box .vob a:hover {

  background-color: var(--themes);

  color: #fff; }

.banner .swiper-slide .videoc {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  display: block;

  z-index: 4;

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

  opacity: 1;

  transition: all ease 0.5s;

  z-index: 5; }

.banner .swiper-slide .videoc .vom {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  z-index: 3; }

.banner .swiper-slide-active .box .bit, .banner .swiper-slide-active .box .more, .banner .swiper-slide-active .box .eim, .banner .swiper-slide-active .box .vob {

  opacity: 1;

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

.banner .swiper-pagination {

  bottom: 0.3rem; }

.banner .swiper-pagination-bullet {

  display: inline-block;

  vertical-align: middle;

  width: 6px;

  height: 6px;

  background-color: #fff;

  border: solid 2px #fff;

  opacity: 1;

  margin: 0 0.15rem !important; }

.banner .swiper-pagination-bullet-active {

  background-color: transparent;

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

  width: 10px;

  height: 10px; }

.banner .btn {

  position: absolute;

  bottom: 0;

  width: 0.29rem;

  cursor: pointer;

  z-index: 2;

  top: 50%;

  height: 0.51rem;

  font-size: 0;

  display: inline-block;

  vertical-align: middle;

  transform: translateY(-50%); }

.banner .btn img {

  width: 100%;

  display: block; }

.banner .btn img:first-child {

  display: block; }

.banner .btn img:last-child {

  display: none; }

.banner .btn:hover img:first-child {

  display: none; }

.banner .btn:hover img:last-child {

  display: block; }

.banner .bl {

  left: 0.6rem; }

.banner .br {

  right: 0.6rem; }

.banner .ric {

  position: absolute;

  right: 0.6rem;

  bottom: 0.6rem;

  width: 0.5rem;

  height: 0.5rem;

  border-radius: 50%;

  background-color: #fff;

  z-index: 3;

  cursor: pointer;

  transition: all ease 0.5s; }

.banner .ric img {

  width: 100%;

  display: block; }

.banner .ric:hover {

  transform: scale(1.1); }



@media (max-width: 800px) {

  .banner .swiper-slide .box {

    left: 5%; }

  .banner .swiper-slide .box .bit {

    font-size: 16px; }

  .banner .swiper-slide .box .eim {

    font-size: 12px; }

  .banner .swiper-slide .box .more a {

    font-size: 12px; }

  .banner .bl {

    left: 0.05rem; }

  .banner .br {

    right: 0.05rem; } }

footer {

  width: 100%;

  background-color: #f8f8f8;

  border-top: solid 0.04rem var(--themes); }

footer .ftop {

  width: 100%;

  padding: 0.6rem 0; }

footer .fop {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between; }

footer .fop .fol {

  display: inline-block;

  vertical-align: top;

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

footer .fop .fol .flist {

  display: inline-block;

  vertical-align: top;

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

  text-align: left;

  padding-right: 0.15rem; }

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: #000;

  line-height: 1.4;

  transition: all ease 0.5s; }

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

  color: var(--themes); }

footer .fop .fol .flist .ful {

  width: 100%; }

footer .fop .fol .flist .ful .am {

  width: 100%;

  font-size: 0; }

footer .fop .fol .flist .ful .ams {

  display: inline-block;

  vertical-align: middle;

  width: auto;

  position: relative; }

footer .fop .fol .flist .ful a {

  width: auto;

  display: inline-block;

  vertical-align: top;

  color: #999999;

  transition: all ease 0.5s;

  line-height: 2;

  line-height: 1.5;

  padding: 0.05rem 0;

  position: relative;

  z-index: 2; }

footer .fop .fol .flist .ful .af {

  content: ' ';

  position: absolute;

  z-index: 1;

  width: 100%;

  height: 0.06rem;

  background-color: var(--themes);

  left: 0;

  bottom: 0.08rem;

  opacity: 0;

  transition: all ease 0.5s; }

footer .fop .fol .flist .ful div {

  width: 100%;

  display: inline-block;

  vertical-align: middle;

  color: #999999;

  line-height: 2;

  transition: all ease 0.5s; }

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

  color: #000; }

footer .fop .fol .flist .ful .ams:hover .af {

  opacity: 1; }

footer .fop .for {

  display: inline-block;

  vertical-align: top;

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

footer .fop .for .fit {

  width: 100%;

  font-size: 0;

  margin-bottom: 0.2rem; }

footer .fop .for .fit a {

  display: inline-block;

  vertical-align: middle;

  color: #000;

  line-height: 1.4;

  transition: all ease 0.5s; }

footer .fop .for .fit a:hover {

  color: var(--themes); }

footer .fop .for .finp {

  width: 100%;

  color: #999999;

  line-height: 1.875; }

footer .fop .for .finp p {

  color: #999999;

  line-height: 1.875; }

footer .fop .for .comd {

  width: 100%;

  font-size: 0;

  margin-top: 0.2rem; }

footer .fop .for .comd .cms {

  display: inline-block;

  vertical-align: middle;

  width: auto;

  text-align: center; }

footer .fop .for .comd .cms .cm {

  display: inline-block;

  vertical-align: middle;

  width: 100%; }

footer .fop .for .comd .cms .cm img {

  width: 100%;

  display: block; }

footer .fop .for .comd .cms .cx {

  width: 100%;

  text-align: center;

  color: #999;

  line-height: 1.5;

  margin-top: 0.1rem; }

footer .fbot {

  width: 100%;

  background-color: #f3f3f3; }

footer .fob {

  width: 100%;

  padding: 0.3rem 0;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: center;

  font-size: 0; }

footer .fob .fm {

  display: inline-block;

  vertical-align: middle;

  width: auto;

  color: #222;

  line-height: 1.5; }

footer .fob .fm a {

  display: inline-block;

  vertical-align: middle;

  color: #222;

  line-height: 1.5; }

footer .fob .fm a:hover {

  color: var(--themes); }
  footer .fob .fomb {
    display: inline-block;
    vertical-align: middle;
    width: auto; }
  footer .fob .fbr {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    margin-right: 0.2rem; }
    footer .fob .fbr .xd {
      display: inline-block;
      vertical-align: middle;
      width: auto;
      color: rgba(0, 0, 0, 0.5);
      line-height: 1.5; }
    footer .fob .fbr .select {
      font-size: 0;
      display: inline-block;
      vertical-align: middle;
      border: none;
      text-align: left;
      position: relative;
      width: 2.9rem;
      z-index: 1; }
      footer .fob .fbr .select .select-con {
        width: 100%;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        font-size: 0; }
        footer .fob .fbr .select .select-con .select-value {
          display: inline-block;
          vertical-align: middle;
          width: 100%;
          line-height: 3em;
          height: 3em;
          color: rgba(0, 0, 0, 0.5);
          cursor: pointer;
          padding: 0 .2rem;
          z-index: 3;
          position: relative;
          border: solid 1px rgba(0, 0, 0, 0.1); }
        footer .fob .fbr .select .select-con select {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          z-index: 2;
          opacity: 0; }
          footer .fob .fbr .select .select-con select option {
            color: #666;
            font-size: .16rem;
            line-height: 2.5;
            background: #fff; }
        footer .fob .fbr .select .select-con .seluls {
          position: absolute;
          left: 0;
          bottom: calc(100%);
          min-width: 100%;
          max-height: 360px;
          overflow: auto;
          display: none;
          box-sizing: border-box;
          text-align: left;
          background-color: rgba(255, 255, 255, 0.2);
          z-index: 2;
          box-shadow: 0px 7px 59px 0px rgba(30, 112, 38, 0.16);
          overflow: auto;
          /*滚动条里面小方块*/
          /*滚动条里面轨道*/ }
          footer .fob .fbr .select .select-con .seluls .option {
            width: 100%;
            color: #333;
            line-height: 1.75;
            cursor: pointer;
            padding: 0.05rem 0.15rem; }
          footer .fob .fbr .select .select-con .seluls .option:hover {
            color: var(--themes); }
          footer .fob .fbr .select .select-con .seluls .option + .option {
            border-top: solid 1px rgba(0, 0, 0, 0.1); }
        footer .fob .fbr .select .select-con .seluls::-webkit-scrollbar {
          width: 4px;
          height: 4px;
          scrollbar-arrow-color: rgba(0, 0, 0, 0.1); }
        footer .fob .fbr .select .select-con .seluls::-webkit-scrollbar-thumb {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 10px rgba(34, 148, 58, 0.3);
          background: rgba(34, 148, 58, 0.3);
          scrollbar-arrow-color: rgba(0, 0, 0, 0.1); }
        footer .fob .fbr .select .select-con .seluls::-webkit-scrollbar-track {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
          background: rgba(0, 0, 0, 0.1); }
      footer .fob .fbr .select .select-con:after {
        display: inline-block;
        content: "";
        position: absolute;
        right: .2rem;
        top: 55%;
        transform: translateY(-50%);  
        z-index: 3;
        width: 0;
        height: 0;
        border: solid 0.05rem;
        border-color: #fff transparent transparent transparent; }



@media (max-width: 800px) {

  footer .ftop {

    padding: 0; }

  footer .fop {

    padding: 0.15rem 0; }

  footer .fop .fol {

    width: 100%;

    margin-bottom: 0.3rem; }

  footer .fop .fol .flist {

    width: 100%;

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

    position: relative; }

  footer .fop .fol .flist .fit {

    width: 100%;

    margin-bottom: 0;

    padding: 0.25rem 0;

    margin-left: 0; }

  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(0, 0, 0, 0.1); }

  footer .fop .fol .flist.has-ful:after {

    content: " ";

    display: inline-block;

    width: 14px;

    height: 8px;

    background-image: url("../images/x2.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 .for {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    align-items: center; }

  footer .fop .for .fomc {

    display: inline-block;

    vertical-align: middle;

    flex: 1;

    padding-right: 0.15rem; }

  footer .fop .for .comd {

    width: auto;

    display: inline-block;

    vertical-align: middle; }

  footer .fop .for .comd .cms {

    display: inline-block;

    vertical-align: middle;

    width: 2rem; } }

.nanner {

  width: 100%;

  position: relative; }

.nanner .imgs {

  width: 100%;

  position: relative;

  overflow: hidden; }

.nanner .imgs .img {

  width: 100%;

  padding-top: 33.85%; }

.nanner .nox {

  position: absolute;

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

  top: 50%;

  transform: translateY(-50%); }

.nanner .nox .nit {

  width: 100%;

  color: #fff;

  line-height: 1.5;

  font-weight: bold;

  font-family: 'MiSans-Demibold';

  position: relative; }

.nanner .nox .nit span {

  display: inline-block;

  vertical-align: middle;

  width: 0.42rem;

  position: absolute;

  left: 0.1rem;

  top: 20%;

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

  z-index: -1; }

.nanner .nox .lx {

  display: block;

  width: 1rem;

  height: 3px;

  margin-top: 0.35rem;

  background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--themes)); }

.nanner .nox .lx.ge {

  background: linear-gradient(to left, #22943a, rgba(255, 255, 255, 0)); }

.l-des{color: #fff;line-height: 1.3;margin-top: .2rem}
@media(max-width: 750px){
  .l-des{/* max-width: 11em; */}
}

@media (max-width: 1680px) {

  .nanner .nox {left: 5%;width: 90%;} }

@media (max-width: 800px) {

  .nanner .nox {left: 3%;width: 92%;} }

.crumbs {

  width: 100%;

  background-color: transparent;

  position: relative;

  background-color: #fff;

  box-shadow: 0px 0px 16px 0px rgba(204, 204, 204, 0.28);

  border-bottom: solid 1px #e5e5e5; }

.crumbs .column {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-start;

  align-items: center;

  font-size: 0;

  position: relative; }

.crumbs .column .colum {

  width: auto;

  font-size: 0;

  display: inline-block;

  vertical-align: middle;

  z-index: 2;

  position: relative; }

.crumbs .column .colum .home {

  display: inline-block;

  vertical-align: middle;

  width: 20px;

  height: 20px;

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

  line-height: 0.8rem; }

.crumbs .column .colum a {

  display: inline-block;

  vertical-align: middle;

  width: auto;

  color: #333;

  line-height: 0.8rem;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis; }

.crumbs .column .colum a span {

  display: inline-block;

  color: #333;

  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 span {

  display: none; }

.crumbs .column .cul {

  display: inline-block;

  vertical-align: middle;

  flex: 1;

  z-index: 2;

  position: relative; }

.crumbs .column .cul .swiper-slide {

  display: inline-block;

  vertical-align: middle;

  width: auto;

  margin-right: 0.6rem;

  position: relative; }

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

  display: inline-block;

  vertical-align: middle;

  color: #999;

  line-height: 1rem;

  width: auto;

  transition: all ease 0.5s; }

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

  display: inline-block;

  vertical-align: middle;

  width: 0.1rem;

  margin-right: 0.1rem;

  opacity: 0;

  transition: all ease 0.5s; }

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

  width: 100%;

  display: block; }

.crumbs .column .cul .swiper-slide:after {

  content: ' '; }

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

  color: #333; }

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

  opacity: 1; }

.crumbs .column .cul .swiper-slide.on:after {

  opacity: 1;

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

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

  color: #333; }

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

  opacity: 1;

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

.crumbs .column .cul .swiper-scrollbar {

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

  left: 0;

  right: 0;

  width: 100%;

  bottom: 0;

  display: none; }

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

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

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

  padding-bottom: 0.15rem; }

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

  display: block; }

.crumbs .column.xl {

  justify-content: space-between;

  font-size: 0;

  align-items: center; }



.crumbs.no:after {

  display: none; }



@media (max-width: 800px) {

  .crumbs .w1600 {

    width: 100%; }

  .crumbs .column .colum {

    padding: 0 0.2rem;

    border-bottom: solid 1px #eee; }

  .crumbs .column .cul {

    padding: 0 0.2rem; }

  .crumbs .column .cul .swiper-wrapper {

    justify-content: flex-start; } }

.modular {

  width: 100%; }

.modular .mitop {

  width: 100%;

  margin-bottom: 0.6rem; }

.modular .mitop .mit {

  width: 100%;

  color: #222;

  line-height: 1.5;

  text-align: center; }

.modular .mitop .mip {

  width: 100%;

  color: #666;

  line-height: 1.5;

  margin-top: 0.1rem;

  text-align: center; }

.modular .mitop .mip p {

  color: #666;

  line-height: 1.5; }

.modular .mitop.lefts .mit {

  text-align: left; }



.services {

  width: 100%;

  padding: 1rem 0;

  overflow: hidden; }

.services .servlist {

  width: 100%;

  font-size: 0;

  position: relative; }

.services .servlist .lx {

  position: absolute;

  z-index: 1;

  left: 50%;

  width: 4px;

  background-color: var(--themes);

  height: 100%;

  top: 0;

  transform: translateX(-50%); }

.services .servlist .servm {

  width: 100%;

  position: relative;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  flex-direction: row-reverse;

  z-index: 2; }

.services .servlist .servm .imgs {

  display: inline-block;

  vertical-align: middle;

  width: calc((100% - 4px ) / 2);

  position: relative;

  overflow: hidden; }

.services .servlist .servm .imgs .img {

  width: 100%;

  padding-top: 50%;

  transition: all ease 0.5s; }

.services .servlist .servm .veom {

  display: inline-block;

  vertical-align: middle;

  width: calc((100% - 4px ) / 2);

  position: relative; }

.services .servlist .servm .veom .bg1 {

  width: 100%;

  height: 100%;

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  opacity: 0.6;

  transition: all ease 0.5s;

  z-index: 1; }

.services .servlist .servm .veom .bg2 {

  width: 100%;

  height: 100%;

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  opacity: 0;

  transition: all ease 0.5s;

  z-index: -1; }

.services .servlist .servm .veom .toms {

  width: 100%;

  height: 100%;

  display: flex;

  flex-wrap: wrap;

  align-content: center;

  position: relative;

  z-index: 3;

  padding: 0.2rem 1rem; }

.services .servlist .servm .veom .toms .tem {

  width: 100%;

  font-size: 0;

  position: relative; }

.services .servlist .servm .veom .toms .tem .tc {

  display: inline-block;

  vertical-align: middle;

  width: 0.47rem;

  height: 0.47rem;

  border-radius: 50%;

  margin-right: 0.4rem;

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

.services .servlist .servm .veom .toms .tem .tc img {

  width: 100%;

  display: block; }

.services .servlist .servm .veom .toms .tem .cem {

  display: inline-block;

  vertical-align: middle;

  width: calc(100% - 0.47rem - 0.4rem); }

.services .servlist .servm .veom .toms .tem .nt {

  width: 100%;

  color: #000;

  font-family: 'MiSans-Bold'; }

.services .servlist .servm .veom .toms .tem .np {

  width: 100%;

  color: #666;

  line-height: 1.5;

  position: relative;

  z-index: 3;

  margin-top: 0.04rem; }

.services .servlist .servm .veom .toms .tem .num {

  position: absolute;

  z-index: 1;

  right: 0.4rem;

  top: 50%;

  transform: translateY(-50%);

  font-size: 0.8rem;

  color: #fff;

  font-style: italic;

  font-family: 'MiSans-Bold'; }

.services .servlist .servm .veom .toms .tem .num:after {

  content: attr(data-content);

  position: absolute;

  top: 0;

  left: 0;

  z-index: 1;

  font-size: 0.8rem;

  padding: 0 0.14rem;

  color: #fff;

  font-family: 'MiSans-Bold';

  background: linear-gradient(to top, white, var(--themes));

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  text-fill-color: transparent; }

.services .servlist .servm:nth-child(2n) {

  flex-direction: row; }

.services .servlist .servm.falm .veom .bg1 {

  opacity: 0;

  z-index: -1; }

.services .servlist .servm.falm .veom .bg2 {

  opacity: 0.6;

  z-index: 1; }



@media (max-width: 800px) {

  .services .servlist .lx {

    left: 0; }

  .services .servlist .servm {

    padding-left: 3px; }

  .services .servlist .servm .imgs {

    width: 100%; }

  .services .servlist .servm .veom {

    width: 100%; }

  .services .servlist .servm .veom .bg1 {

    opacity: 0;

    z-index: -1; }

  .services .servlist .servm .veom .bg2 {

    opacity: 1;

    z-index: 1; }

  .services .servlist .servm .veom .toms {

    padding: 30px 20px; }

  .services .servlist .servm .veom .toms .tem .tc {

    width: 40px;

    height: 40px; }

  .services .servlist .servm .veom .toms .tem .cem {

    width: calc(100% - 40px - 0.4rem); }

  .services .servlist .servm .veom .toms .tem .num {

    font-size: 1rem; }

  .services .servlist .servm .veom .toms .tem .num:after {

    font-size: 1rem; }

  .services .servlist .servm + .servm {

    margin-top: 0.5rem; } }

.contacts {

  width: 100%;

  padding: 1.2rem 0 1.2rem; }

.contacts .contlis {

  width: 100%;

  font-size: 0;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around; }

.contacts .contlis .contm {

  display: inline-block;

  vertical-align: top;

  text-align: left; }

.contacts .contlis .contm .tc {

  display: block;

  width: 0.57rem;

  height: 0.57rem;

  background-color: #000;

  border-radius: 50%;

  margin: 0 0 0.3rem; }

.contacts .contlis .contm .xn {

  width: 100%;

  color: #000;

  line-height: 1.5; }

.contacts .contlis .contm .xim {

  width: 100%;

  margin-top: 0.1rem;

  color: #000;

  line-height: 1.5; }

.contacts .contlis .contm .xim p {

  color: #000;

  line-height: 1.5; }



.mapsom {

  width: 100%;

  position: relative; }

.mapsom .map {

  width: 100%; }

.mapsom .map img {

  width: 100%;

  display: block; }

.mapsom .message {

  width: 100%; }

.mapsom .mesom {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: center;

  position: relative; }

.mapsom .mesom .mel {

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

.mapsom .mesom .mel .mitop {

  width: 100%; }

.mapsom .mesom .mel .mitop .mol {

  display: inline-block;

  vertical-align: middle; }

.mapsom .mesom .mel .mitop .mol .em {

  width: 100%;

  color: #fff;

  line-height: 1.5; }

.mapsom .mesom .mel .mitop .mol .cm {

  width: 100%;

  margin-top: 0.6rem;

  color: #fff;

  line-height: 1.875; }

.mapsom .mesom .mel .mitop .mol .cm p {

  color: #fff;

  line-height: 1.875; }

.mapsom .mesom .mer {

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

.mapsom .mesom .merom {

  width: 100%;

  background-color: #f8f8f8;

  box-shadow: -9px 6px 12px 1px rgba(34, 34, 34, 0.04);

  border-radius: 0;

  padding: 0.6rem 0.4rem;

  position: relative;

  top: -1.6rem; }

.mapsom .mesom .merom form {

  width: 100%;

  display: block; }

.mapsom .mesom .merom .mit {

  width: 100%;

  color: #000;

  line-height: 1.2;

  margin-bottom: 0.25rem; }

.mapsom .mesom .merom .row {

  width: 100%;

  font-size: 0;

  margin-bottom: 0.25rem; }

.mapsom .mesom .merom .name {

  width: 100%;

  color: #000;

  line-height: 1.5; }

.mapsom .mesom .merom .input {

  display: inline-block;

  vertical-align: top;

  width: 100%; }

.mapsom .mesom .merom .input .int {

  width: 100%;

  display: block;

  border: none;

  border-bottom: solid 1px #000;

  color: #333;

  line-height: 3;

  height: 3em;

  background-color: transparent; }

.mapsom .mesom .merom .input:nth-child(2n) {

  margin-right: 0; }

.mapsom .mesom .merom .text {

  width: 100%;

  display: block; }

.mapsom .mesom .merom .text .area {

  width: 100%;

  border: solid 1px #ebebeb;

  display: block;

  padding: 0.2rem;

  color: #333;

  line-height: 1.5; }

.mapsom .mesom .merom .sub {

  width: 100%;

  margin-top: 0.25rem;

  font-size: 0; }

.mapsom .mesom .merom .sub .stn {

  display: inline-block;

  vertical-align: middle;

  background-color: var(--themes);

  color: #fff;

  width: auto;

  padding: 0 0.9rem;

  line-height: 3;

  height: 3em;

  cursor: pointer;

  border: none; }



@media (max-width: 800px) {

  .mapsom .message {

    padding: 20px 0; }

  .mapsom .mesom .mel {

    width: 100%;

    margin-bottom: 15px; }

  .mapsom .mesom .mer {

    width: 100%; }

  .mapsom .mesom .mer .merom {

    top: 0;

    box-shadow: 0px 6px 12px 1px rgba(34, 34, 34, 0.2); } }

.cetails {

  width: 100%;

  background-color: #f9fafa;

  padding: 1rem 0; }

.cetails .cetail {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between; }

.cetails .cetail .cel {

  display: inline-block;

  vertical-align: top;

  width: 1rem;

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

  padding-top: 0.3rem; }

.cetails .cetail .cel .celper {

  width: 100%; }

.cetails .cetail .cel .celper .swiper-container {

  height: calc(4rem + 0.6rem); }

.cetails .cetail .cel .swiper-slide {

  width: 100%;

  background-color: #ffffff;

  border: solid 1px #e5e5e5;

  height: auto;

  position: relative;

  cursor: pointer; }

.cetails .cetail .cel .swiper-slide .imgs {

  width: 100%;

  position: relative;

  overflow: hidden; }

.cetails .cetail .cel .swiper-slide .imgs .img {

  width: 100%;

  padding-top: 100%;

  transition: all ease 0.5s; }

.cetails .cetail .cel .swiper-slide:after {

  content: ' ';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 2px;

  background-color: var(--themes);

  transition: all ease 0.5s;

  opacity: 0; }

.cetails .cetail .cel .swiper-slide + .swiper-slide {

  margin-top: 0.2rem; }

.cetails .cetail .cel .swiper-slide.on:after {

  opacity: 1; }

.cetails .cetail .cem {

  display: inline-block;

  vertical-align: top;

  width: 6.3rem;

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

.cetails .cetail .cem .cit {

  width: 100%;

  color: #222;

  font-family: 'MiSans-Semibold';

  line-height: 1.2; }

.cetails .cetail .cem .ex {

  width: 100%;

  color: var(--themes);

  color: #22943a;

  line-height: 1.5;

  margin-top: 0.1rem; }

.cetails .cetail .cem .lx {

  width: 0.3rem;

  height: 2px;

  background-color: #222;

  margin: 0.3rem 0 0.5rem; }

.cetails .cetail .cem .yoms {

  width: 100%; }

.cetails .cetail .cem .yoms .yit {

  width: 100%;

  color: var(--themes);

  color: #22943a;

  line-height: 1.5;

  margin-bottom: 0.2rem; }

.cetails .cetail .cem .yoms .yit span {

  display: inline-block;

  vertical-align: middle;

  width: 19px;

  margin-right: 0.1rem;

  position: relative;

  top: -0.02rem; }

.cetails .cetail .cem .yoms .yit span img {

  width: 100%;

  display: block; }

.cetails .cetail .cem .yoms .yinp {

  width: 100%;

  color: #666;

  line-height: 1.6; }

.cetails .cetail .cem .yoms .yinp p {

  color: #666;

  line-height: 1.6; }

.cetails .cetail .cer {

  display: inline-block;

  vertical-align: top;

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

.cetails .cetail .cer .cerper {

  width: 100%;

  position: relative; }

.cetails .cetail .cer .cerper .swiper-slide {

  width: 100%; }

.cetails .cetail .cer .cerper .swiper-slide .imgs {

  width: 100%;

  position: relative;

  overflow: hidden; }

.cetails .cetail .cer .cerper .swiper-slide .imgs .img {

  width: 100%;

  padding-top: 75%;

  transition: all ease 0.5s; }

.cetails .cetail .cer .cerper .btn {

  position: absolute;

  z-index: 3;

  top: 50%;

  transform: translateY(-50%);

  width: 0.52rem;

  height: 0.52rem;

  border-radius: 50%;

  cursor: pointer;

  background-color: #eee; }

.cetails .cetail .cer .cerper .btn img {

  width: 100%;

  display: block; }

.cetails .cetail .cer .cerper .btn img:first-child {

  display: block; }

.cetails .cetail .cer .cerper .btn img:last-child {

  display: none; }

.cetails .cetail .cer .cerper .btn:hover {

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

.cetails .cetail .cer .cerper .btn:hover img:first-child {

  display: none; }

.cetails .cetail .cer .cerper .btn:hover img:last-child {

  display: block; }

.cetails .cetail .cer .cerper .bl {

  left: 0; }

.cetails .cetail .cer .cerper .br {

  right: 0; }



@media (max-width: 800px) {

  .cetails .cetail .cel {

    width: 100%;

    order: 2;

    padding-top: 0; }

  .cetails .cetail .cel .celper .swiper-container {

    height: auto; }

  .cetails .cetail .cel .celper .swiper-slide + .swiper-slide {

    margin-top: 0rem; }

  .cetails .cetail .cer {

    width: 100%;

    order: 1;

    margin-bottom: 10px; }

  .cetails .cetail .cem {

    width: 100%;

    order: 3;

    margin-top: 20px; } }

.forms {

  width: 100%; }

.forms .fitem {

  width: 100%;

  position: relative;

  padding-top: 1rem; }

.forms .fitem .w1600 {

  position: relative;

  z-index: 2; }

.forms .fitem .tocm {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: center;

  flex-direction: row-reverse; }

.forms .fitem .tocm .tml {

  display: inline-block;

  vertical-align: middle;

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

  position: relative;

  overflow: hidden; }

.forms .fitem .tocm .tml .img {

  width: 100%;

  padding-top: 60%;

  transition: all ease 0.5s; }

.forms .fitem .tocm .tmr {

  display: inline-block;

  vertical-align: middle;

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

.forms .fitem .tocm .tmr .tir {

  width: 100%;

  color: #222;

  line-height: 1.2; }

.forms .fitem .tocm .tmr .lx {

  width: 0.3rem;

  height: 3px;

  background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--themes));

  margin: 0.2rem 0 0.3rem; }

.forms .fitem .tocm .tmr .tinp {

  width: 100%;

  color: #666;

  line-height: 1.875; }

.forms .fitem .tocm .tmr .tinp p {

  color: #666;

  line-height: 1.875; }

.forms .fitem:after {

  content: ' ';

  position: absolute;

  z-index: 1;

  width: 6.2rem;

  height: 4.57rem;

  background-color: #eee;

  right: 0;

  top: 0; }

.forms .fitem:nth-child(2n) {

  padding-bottom: 1rem; }

.forms .fitem:nth-child(2n):after {

  right: auto;

  top: auto;

  left: 0;

  bottom: 0; }

.forms .fitem:nth-child(2n) .tocm {

  flex-direction: row; }



@media (max-width: 800px) {

  .forms .fitem:after {

    display: none; } }

.stores {

  width: 100%;

  background-color: #f9fafa;

  padding: 1rem 0; }

.stores .storelis {

  width: 100%;

  position: relative;

  display: flex;

  flex-wrap: wrap; }

.stores .storelis .strom {

  display: inline-block;

  vertical-align: top;

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

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

  position: relative;

  padding: 2rem 0.6rem 0.6rem 0.6rem; }

.stores .storelis .strom .zi2 {

  position: relative;

  z-index: 2; }

.stores .storelis .strom .vgs {

  position: absolute;

  z-index: 1;

  width: 100%;

  height: 100%;

  display: block;

  left: 0;

  top: 0; }

.stores .storelis .strom .sie {

  width: 100%;

  color: #fff;

  line-height: 1.2; }

.stores .storelis .strom .lx {

  width: 0.3rem;

  height: 3px;

  background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--themes));

  margin: 0.3rem 0 0.3rem; }

.stores .storelis .strom .lx.white {

  background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff); }

.stores .storelis .strom .sip {

  width: 100%;

  color: #fff;

  line-height: 1.875; }

.stores .storelis .strom .sip p {

  color: #fff;

  line-height: 1.875; }

.stores .storelis .strom .eg {

  position: absolute;

  z-index: 2;

  right: 0.6rem;

  top: 0.4rem;

  width: 2.35rem;

  height: 2.35rem;

  border-radius: 50%; }

.stores .storelis .strom .eg img {

  width: 100%;

  display: block; }

.stores .storelis .strom:nth-child(2n) {

  margin-right: 0; }

  .stores .videoc {
    position: relative;
    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;
    margin-top: 0.6rem;
    height: 7rem; }
    .stores .videoc .vom {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 3; }



@media (max-width: 800px) {

  .stores .storelis .strom {

    width: 100%;

    margin-right: 0; }

  .stores .storelis .strom + .strom {

    margin-top: 15px; } }

.recommends {

  width: 100%;

  padding: 1rem 0; }

.recommends .recomnper {

  width: 100%; }

.recommends .recomnper .swiper-container {

  padding: 0.1rem 0; }

.recommends .recomnper .swiper-slide {

  width: 100%;

  background-color: #fff; }

.recommends .recomnper .swiper-slide a {

  width: 100%;

  display: block; }

.recommends .recomnper .swiper-slide .imgs {

  width: 100%;

  position: relative;

  overflow: hidden; }

.recommends .recomnper .swiper-slide .imgs .img {

  width: 100%;

  padding-top: 111.11%;

  transition: all ease 0.5s; }

.recommends .recomnper .swiper-slide .coms {

  width: 100%;

  padding: 0.24rem 0.15rem; }

.recommends .recomnper .swiper-slide .coms .cip {

  width: 100%;

  color: #222;

  line-height: 1.5;

  text-align: center; }

.recommends .recomnper .swiper-slide .coms .cmp {

  width: 100%;

  color: #666;

  line-height: 1.5;

  text-align: center;

  margin-top: 0.12rem; }

.recommends .recomnper .swiper-slide .coms .ic {

  display: block;

  margin: 0.3rem auto 0;

  width: 25px;

  position: relative;

  left: -0.12rem;

  width: 0.25rem; }

.recommends .recomnper .swiper-slide .coms .ic img {

  width: 100%;

  display: block; }

.recommends .recomnper .swiper-slide:hover {

  box-shadow: 0px 0px 10px 0px rgba(35, 196, 255, 0.15); }

.recommends .recomnper .swiper-slide:hover .imgs .img {

  transform: scale(1.1); }



.researchs {

  width: 100%;

  padding: 1rem 0; }

.researchs .renavs {

  width: 100%;

  margin-bottom: 0.6rem; }

.researchs .renavs .renav {

  width: 100%; }

.researchs .renavs .swiper-wrapper.center {

  justify-content: center; }

.researchs .renavs .swiper-slide {

  display: inline-block;

  vertical-align: middle;

  width: auto; }

.researchs .renavs .swiper-slide a {

  display: inline-block;

  vertical-align: middle;

  background-color: #ffffff;

  border: solid 1px #e5e5e5;

  width: auto;

  color: #666;

  line-height: 3;

  padding: 0 0.5rem; }

.researchs .renavs .swiper-slide:hover a, .researchs .renavs .swiper-slide.on a {

  background-color: var(--themes);

  color: #fff;

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

.researchs .renavs .swiper-slide + .swiper-slide {

  margin-left: 0.12rem; }

.researchs .recoum {

  width: 100%;

  position: relative; }

.researchs .recoum .imgs {

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

  display: inline-block;

  vertical-align: middle;

  position: relative;

  overflow: hidden;

  z-index: 1; }

.researchs .recoum .imgs a {

  width: 100%;

  display: block; }

.researchs .recoum .imgs .img {

  width: 100%;

  padding-top: 47.28%;

  transition: all ease 0.5s; }

.researchs .recoum .roc {

  display: inline-block;

  vertical-align: middle;

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

  position: absolute;

  z-index: 2;

  top: 50%;

  transform: translateY(-50%);

  right: 0;

  background-color: #fff;

  background-color: #fcfdfd;

  box-shadow: 0px 5px 30px 0px rgba(185, 191, 204, 0.3);

  border-radius: 0.2rem;

  padding: 0.6rem;

  overflow: hidden; }

.researchs .recoum .roc:after {

  content: ' ';

  position: absolute;

  top: 0;

  width: 100%;

  left: 0;

  height: 0.08rem;

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

.researchs .recoum .roc .rt {

  width: 100%;

  color: #191919;

  font-family: 'MiSans-Bold';

  line-height: 1.2; }

.researchs .recoum .roc .ri {

  display: block;

  width: 12px;

  height: 2px;

  background-color: var(--themes);

  margin: 0.2rem 0 0.25rem; }

.researchs .recoum .roc .rinp {

  width: 100%;

  color: #666;

  line-height: 1.6; }

.researchs .recoum .roc .rinp p {

  color: #666;

  line-height: 1.6; }

.researchs .reselist {

  width: 100%;

  font-size: 0;

  display: flex;

  flex-wrap: wrap;

  margin-top: 0.56rem; }

.researchs .reselist .revom {

  display: inline-block;

  vertical-align: top;

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

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

  margin-bottom: 0.34rem; }

.researchs .reselist .revom a {

  width: 100%;

  display: block; }

.researchs .reselist .revom .imgs {

  width: 100%;

  position: relative;

  overflow: hidden; }

.researchs .reselist .revom .imgs .img {

  width: 100%;

  padding-top: 56.27%;

  transition: all ease 0.5s; }

.researchs .reselist .revom .vit {

  width: 100%;

  color: #333;

  line-height: 1.6;

  margin-top: 0.1rem; }

.researchs .reselist .revom:nth-child(3n) {

  margin-right: 0; }

.researchs .reselist .revom:hover .imgs .img {

  transform: scale(1.1); }



@media (max-width: 800px) {

  .researchs .recoum .imgs {

    width: 100%; }

  .researchs .recoum .roc {

    width: 100%;

    border-radius: 0;

    top: 0;

    position: relative;

    transform: translateY(0);

    padding: 20px; } }

.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.58rem;

  height: 0.58rem;

  line-height: 0.58rem;

  text-align: center;

  color: #999;

  border: solid 1px #ebebeb;

  background-color: #fff;

  border-radius: 0%;

  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: #000;

  color: #fff;

  border: solid 1px #000; }

.pages .page.ltn:hover {

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

  background-position: center;

  background-size: 100% 100%;

  background-repeat: no-repeat;

  border: solid 1px #000; }

.pages .page.on.ltn {

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

  background-position: center;

  background-size: 100% 100%;

  background-repeat: no-repeat;

  border: solid 1px #000; }

.pages .page.on.rtn {

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

  background-position: center;

  background-size: 100% 100%;

  background-repeat: no-repeat;

  border: solid 1px #000; }

.pages .page.rtn:hover {

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

  background-position: center;

  background-size: 100% 100%;

  background-repeat: no-repeat;

  border: solid 1px #000; }

.pages .page.auto {

  width: auto;

  padding: 0 0.24rem; }

.pages .page:hover {

  background-color: #000;

  color: #fff;

  border: solid 1px #000; }



@media (max-width: 900px) {

  .pages .page {

    width: 0.8rem;

    height: 0.8rem;

    line-height: 0.8rem;

    font-size: 16px;

    margin: 0 0.1rem 0.1rem; } }

.abouts {

  width: 100%;

  padding: 1rem 0; }

.abouts .renavs {

  width: 100%;

  margin-bottom: 0.6rem; }

.abouts .renavs .swiper-wrapper.center {

  justify-content: center; }

.abouts .renavs .swiper-slide {

  display: inline-block;

  vertical-align: middle;

  width: auto; }

.abouts .renavs .swiper-slide a {

  display: inline-block;

  vertical-align: middle;

  background-color: #ffffff;

  border: solid 1px #e5e5e5;

  width: auto;

  color: #666;

  line-height: 3;

  padding: 0 0.5rem; }

.abouts .renavs .swiper-slide:hover a, .abouts .renavs .swiper-slide.on a {

  background-color: var(--themes);

  color: #fff;

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

.abouts .renavs .swiper-slide + .swiper-slide {

  margin-left: 0.12rem; }

.abouts .abtoms {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between; }

.abouts .abtoms .abl {display: inline-block;vertical-align: middle;width: calc(450 / 1600 * 100%);}

.abouts .abtoms .abl .aic {

  width: 100%;

  color: #222;

  line-height: 1.5; }

.abouts .abtoms .abl .aic p {

  color: #222;

  line-height: 1.5; }

.abouts .abtoms .abl .dates {width: 100%;/* margin-top: 0.5rem; */}

.abouts .abtoms .abl .dates .ditm {

  width: 100%;

  font-size: 0; }

.abouts .abtoms .abl .dates .ditm .dc {

  display: inline-block;

  vertical-align: top;

  width: 0.4rem;

  height: 0.4rem;

  margin-right: 0.15rem;

  margin-top: 0.2rem; }

.abouts .abtoms .abl .dates .ditm .dc img {

  width: 100%;

  display: block; }

.abouts .abtoms .abl .dates .ditm .lom {

  display: inline-block;

  vertical-align: top;

  width: calc(100% - 0.4rem - 0.15rem); }

.abouts .abtoms .abl .dates .ditm .lom .ltm {

  width: 100%;

  color: #222; }

.abouts .abtoms .abl .dates .ditm .lom .ltm span {

  display: inline-block;

  font-weight: bold;

  color: #222;

  font-family: 'Oswald-Medium';

  margin-right: 0.1rem; }

.abouts .abtoms .abl .dates .ditm .lom .xm {

  width: 100%;

  color: #000;

  line-height: 1.5; }

.abouts .abtoms .abl .dates .ditm + .ditm {

  margin-top: 0.25rem; }

.abouts .abtoms .abr {display: inline-block;vertical-align: middle;width: calc(1150 / 1600 * 100%);}

.abouts .abtoms .abr .ainp {

  width: 100%;

  color: #666;
  text-align: justify;

  line-height: 1.875; }

.abouts .abtoms .abr .ainp p {

  color: #000 !important;

  line-height: 1.875; }



.connotation {

  width: 100%;

  padding: 2rem 0; }

.connotation .connper {

  width: 100%; }

.connotation .connper .swiper-slide {

  width: 100%; }

.connotation .connper .swiper-slide .tic {

  width: 0.98rem;

  height: 0.98rem;

  border-radius: 50%;

  display: block;

  margin: 0 auto 0.45rem;

  border: dashed 1px #000; }

.connotation .connper .swiper-slide .tic img {

  width: 100%;

  display: block; }

.connotation .connper .swiper-slide .lx {

  width: 100%;

  height: 1px;

  background-color: #000;

  margin: 0.45rem 0; }

.connotation .connper .swiper-slide .vit {

  width: 100%;

  color: #000;

  line-height: 1.5;

  text-align: center;

  min-height: 1.5em; }

.connotation .connper .swiper-slide .vip {

  width: 100%;

  color: #000;

  line-height: 1.875;

  margin-top: 0.15rem;

  text-align: center; }

.connotation .connper .swiper-slide .vip p {

  color: #000;

  line-height: 1.875; }



.responsibility {

  width: 100%;

  padding: 1rem 0; }

.responsibility .resonlis {

  width: 100%;

  font-size: 0;

  display: flex;

  flex-wrap: wrap; }

.responsibility .resonlis .resom {

  display: inline-block;

  vertical-align: top;

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

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

  position: relative; }

.responsibility .resonlis .resom .vg {

  width: 100%;

  height: 100%;

  display: block;

  position: absolute;

  left: 0;

  top: 0;

  z-index: 1; }

.responsibility .resonlis .resom .kom {

  width: 100%;

  position: relative;

  z-index: 2;

  padding: 1.5rem 0.5rem 0.5rem 0.5rem;

  min-height: 4.5rem; }

.responsibility .resonlis .resom .kom .kit {

  width: 100%;

  color: #fff;

  line-height: 1.5; }

.responsibility .resonlis .resom .kom .lx {

  width: 0.3rem;

  height: 3px;

  background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--themes));

  margin: 0.3rem 0 0.3rem; }

.responsibility .resonlis .resom .kom .lx.white {

  background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff); }

.responsibility .resonlis .resom .kom .vuls {

  width: 100%;

  font-size: 0;

  max-width: 6rem; }

.responsibility .resonlis .resom .kom .vuls .vli {

  display: inline-block;

  vertical-align: top;

  width: 48%;

  margin-right: 4%;

  padding: 0.05rem 0; }

.responsibility .resonlis .resom .kom .vuls .vli .i {

  display: inline-block;

  vertical-align: top;

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background-color: var(--themes);

  margin-right: 0.14rem;

  margin-top: calc(0.8em - 3px); }

.responsibility .resonlis .resom .kom .vuls .vli .km {

  display: inline-block;

  vertical-align: top;

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

  color: #fff;

  line-height: 1.6; }

.responsibility .resonlis .resom .kom .vuls .vli:nth-child(2n) {

  margin-right: 0; }

.responsibility .resonlis .resom .kom .vuls.white .vli .i {

  background-color: #fff; }

.responsibility .resonlis .resom:nth-child(2n) {

  margin-right: 0; }



.systems {

  width: 100%;

  padding: 0.8rem 0;

  overflow: hidden; }

.systems .syom .imgs {

  width: 100%;

  overflow: hidden;

  position: relative; }

.systems .syom .imgs .img {

  width: 100%;

  padding-top: 55.46%;

  transition: all ease 0.5s; }

.systems .syom .lg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1; }

.systems .syom .kox {

  width: 100%;

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  z-index: 2;

  padding: 0.5rem 0.4rem; }

.systems .syom .kox .kit {

  width: 100%;

  color: #fff;

  line-height: 1.5;

  margin-bottom: 0.15rem; }

.systems .syom .kox .kinp {

  width: 100%;

  color: #fff;

  line-height: 1.875;

  height: 2rem;

  overflow: auto;

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

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

.systems .syom .kox .kinp p {

  color: #fff;

  line-height: 1.875; }

.systems .syom .kox .kinp::-webkit-scrollbar {

  width: 4px;

  height: 4px;

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

.systems .syom .kox .kinp::-webkit-scrollbar-thumb {

  border-radius: 10px;

  -webkit-box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.7);

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

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

.systems .syom .kox .kinp::-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); }

.systems .systop {

  width: 100%;

  font-size: 0;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between; flex-direction: row-reverse;}

.systems .systop .syl {

  display: inline-block;

  vertical-align: middle;

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

  position: relative; }

.systems .systop .syl .imgs .img {

  padding-top: 55.46%; }

.systems .systop .syl .kox {

  padding: 0.8rem 0.5rem; }

.systems .systop .syl .kox .kinp {

  height: 3.6rem; }

.systems .systop .syr {

  display: inline-block;

  vertical-align: middle;

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

  position: relative; }

.systems .systop .syr .imgs .img {

  padding-top: 112.61%; }

.systems .systop .syr .kox {

  padding: 0.8rem 0.4rem; }

.systems .systop .syr .kox .kinp {

  height: 3.6rem; }

.systems .sysbot {

  width: 100%;

  font-size: 0;

  margin-top: 0.15rem;

  display: flex;

  flex-wrap: wrap; }

.systems .sysbot .syom {

  display: inline-block;

  vertical-align: middle;

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

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

  position: relative; }

.systems .sysbot .syom .imgs .img {

  padding-top: 73.23%; }

.systems .sysbot .syom .kox {

  padding: 0.5rem 0.4rem; }

.systems .sysbot .syom .kox .kinp {

  height: 2rem; }

.systems .sysbot .syom:nth-child(3n) {

  margin-right: 0; }



@media (max-width: 800px) {

  .systems .syom .imgs {

    height: 100%;

    position: absolute;

    z-index: 1;

    left: 0;

    top: 0; }

  .systems .syom .imgs .img {

    height: 100%;

    padding-top: 0 !important; }

  .systems .syom .kox {

    position: relative; } }

.strategy {

  width: 100%;

  padding: 1.6rem 0; }

.strategy .straom {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: center;

  flex-direction: row-reverse; }

.strategy .straom .strl {

  display: inline-block;

  vertical-align: middle;

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

  position: relative; }

.strategy .straom .strl .tiom {

  display: inline-block;

  vertical-align: middle;

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

  margin-top: 0.05rem;

  margin-bottom: 0.05rem;

  margin-right: calc(9 / 810 * 100%);

  position: relative;

  overflow: hidden;

  border: solid 1px #fff; }

.strategy .straom .strl .tiom .imgs {

  width: 100%;

  position: relative;

  overflow: hidden; }

.strategy .straom .strl .tiom .imgs .img {

  width: 100%;

  padding-top: 55%;

  transition: all ease 0.5s; }

.strategy .straom .strl .tiom .vom {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  padding: 0.14rem 0.2rem;

  z-index: 2; }

.strategy .straom .strl .tiom .vom .tm {

  width: 100%;

  color: #fff;

  line-height: 1.5; }

.strategy .straom .strl .tiom:nth-child(2n) {

  margin-right: 0; }

.strategy .straom .strl .tiom:nth-child(2n) .vom {

  text-align: right; }

.strategy .straom .strl .tiom:nth-child(1) {

  border-radius: 0.2rem 0 0 0; }

.strategy .straom .strl .tiom:nth-child(2) {

  border-radius: 0 0.2rem  0 0; }

.strategy .straom .strl .tiom:nth-child(3) {

  border-radius: 0 0 0 0.2rem; }

.strategy .straom .strl .tiom:nth-child(4) {

  border-radius: 0 0 0.2rem  0; }

.strategy .straom .strl .miscm {

  position: absolute;

  left: 50%;

  top: 50%;

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

  width: 1.81rem;

  z-index: 2; }

.strategy .straom .strl .miscm .mg {

  width: 100%;

  animation: cys linear infinite 6s; }

.strategy .straom .strl .miscm .mg img {

  width: 100%;

  display: block; }

@keyframes cys {

  0% {

    transform: rotate(0); }

  100% {

    transform: rotate(360deg); } }

.strategy .straom .strl .miscm .eon {

  position: absolute;

  left: 50%;

  top: 50%;

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

  width: 1.3rem;

  z-index: 4;

  text-align: center; }

.strategy .straom .strl .miscm .eon .wm {

  color: #222;

  line-height: 1.5;

  width: 100%;

  max-width: 4em;

  margin: 0 auto; }

.strategy .straom .strr {

  display: inline-block;

  vertical-align: middle;

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

.strategy .straom .strr .rie {

  width: 100%;

  color: #fff;

  line-height: 1.4;

  margin-bottom: 0.14rem; }

.strategy .straom .strr .simp {

  width: 100%;

  color: #fff;

  line-height: 1.6; }

.strategy .straom .strr .simp p {

  color: #fff;

  line-height: 1.6; }



@media (max-width: 800px) {

  .strategy .straom .strl .miscm .eon .wm {

    font-size: 12px; } }

.honors {

  width: 100%;

  padding: 1rem 0; }

.honors .honorm {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: center; }

.honors .honorm .honl {

  display: inline-block;

  vertical-align: middle;

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

  position: relative; }

.honors .honorm .honl .swiper-slide {

  width: 100%;

  display: inline-block;

  vertical-align: middle;

  width: calc(460 / 1030 * 100%); }

.honors .honorm .honl .swiper-slide .imgs {

  width: 100%;

  position: relative;

  overflow: hidden; }

.honors .honorm .honl .swiper-slide .imgs .img {

  width: 100%;

  padding-top: 71.08%;

  transition: all ease 0.5s; }

.honors .honorm .honl .swiper-slide .vims {

  width: 100%;

  text-align: center;

  color: #111;

  margin-top: 0.8rem;

  opacity: 0;

  transition: all ease 0.5s; }

.honors .honorm .honl .swiper-slide-active .vims {

  opacity: 1; }

.honors .honorm .honl:after {

  content: ' ';

  position: absolute;

  left: 0;

  top: 0;

  height: 100%;

  z-index: 3;

  width: 2rem;

  transition: all ease 0.5s;

  background: linear-gradient(270deg, rgba(255, 255, 255, 0), #fff); }

.honors .honorm .honl:before {

  content: ' ';

  position: absolute;

  right: 0;

  top: 0;

  height: 100%;

  z-index: 3;

  width: 2rem;

  transition: all ease 0.5s;

  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff); }

.honors .honorm .honr {

  display: inline-block;

  vertical-align: middle;

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

  text-align: center; }

.honors .honorm .honr .swiper-container {

  height: calc(21em);

  margin: 0.2rem 0; }

.honors .honorm .honr .btn {

  display: inline-block;

  vertical-align: middle;

  width: 0.52rem;

  height: 0.52rem;

  border-radius: 50%;

  background-color: #eee;

  cursor: pointer; }

.honors .honorm .honr .btn img {

  width: 100%;

  display: block; }

.honors .honorm .honr .btn img:first-child {

  display: block; }

.honors .honorm .honr .btn img:last-child {

  display: none; }

.honors .honorm .honr .btn:hover {

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

.honors .honorm .honr .btn:hover img:first-child {

  display: none; }

.honors .honorm .honr .btn:hover img:last-child {

  display: block; }

.honors .honorm .honr .bl {

  transform: rotate(90deg); }

.honors .honorm .honr .br {

  transform: rotate(90deg); }

.honors .honorm .honr .swiper-slide {

  width: 100%;

  height: auto;

  cursor: pointer; }

.honors .honorm .honr .swiper-slide .sm {width: 100%;height: 3em;line-height: 3;text-align: center;color: #666;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;padding-left: 0.1rem;padding-right: 0.05rem;transition: background-color .3s;}

.honors .honorm .honr .swiper-slide.on .sm, .honors .honorm .honr .swiper-slide:hover .sm {

  background-color: var(--themes);

  color: #fff; }



@media (max-width: 800px) {

  .honors .honorm .honl {

    width: 100%;

    order: 2; }

  .honors .honorm .honl .swiper-slide {

    width: 65%; }

  .honors .honorm .honr {

    width: 100%;

    font-size: 0;

    order: 1;

    margin-bottom: 25px; }

  .honors .honorm .honr .swiper-container {

    display: inline-block;

    vertical-align: middle;

    width: calc(100% - 1.24rem);

    margin: 0 0.1rem;

    height: auto; }

  .honors .honorm .honr .swiper-container .swiper-slide {

    display: inline-block;

    vertical-align: middle;

    width: auto; }

  .honors .honorm .honr .swiper-container .swiper-slide .sm {display: inline-block;vertical-align: middle;/* width: auto; */padding: 0 0.1rem;}

  .honors .honorm .honr .bl {

    transform: rotate(0deg); }

  .honors .honorm .honr .br {

    transform: rotate(0deg); } }

.storys {

  width: 100%;

  padding: 1.1rem 0 4.5rem;

  padding: 0.6rem 0 5rem; }

.storys .satop {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between; }

.storys .satop .sal {

  display: inline-block;

  vertical-align: top;

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

.storys .satop .sal .siem {

  width: 100%;

  font-size: 0; }

.storys .satop .sal .siem .si {

  display: inline-block;

  vertical-align: middle;

  width: 0.66rem;

  margin-right: 0.34rem; }

.storys .satop .sal .siem .si img {

  width: 100%;

  display: block; }

.storys .satop .sal .siem .emk {

  display: inline-block;

  vertical-align: middle;

  color: #222;

  line-height: 1.5; }

.storys .satop .sar {

  display: inline-block;

  vertical-align: top;

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

.storys .satop .sar .eps {

  width: 100%;

  color: #000;

  line-height: 1.5; }

.storys .satop .sar .eps p {

  color: #000;

  line-height: 1.5; }

.storys .satop .sar .epm {

  width: 100%;

  color: #666;

  line-height: 1.875;

  margin-top: 0.3rem; }

.storys .satop .sar .epm p {

  color: #666;

  line-height: 1.875; }

.storys .satop .sar .more {

  width: 100%;

  text-align: right;

  font-size: 0; }

.storys .satop .sar .more a {

  display: inline-block;

  vertical-align: middle;

  color: var(--themes);

  line-height: 1.5; }

.storys .satop .sar .more a span {

  display: inline-block;

  vertical-align: middle;

  width: 0.2rem;

  margin-left: 0.1rem;

  position: relative;

  top: -0.02rem; }

.storys .satop .sar .more a span img {

  width: 100%;

  display: block; }

.storys .satop .sar .dates {

  width: 100%;

  margin-top: 0.3rem;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between; }

.storys .satop .sar .dates .ditm {

  display: inline-block;

  vertical-align: middle;
  flex: 1;

  width: auto; }

.storys .satop .sar .dates .ditm .dc {

  display: inline-block;

  vertical-align: top;

  width: 0.45rem;

  height: 0.45rem;

  margin-right: 0.15rem;

  margin-top: 0.2rem; }

.storys .satop .sar .dates .ditm .dc img {

  width: 100%;

  display: block; }

.storys .satop .sar .dates .ditm .lom {

  display: inline-block;

  vertical-align: top;

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

.storys .satop .sar .dates .ditm .lom .ltm {

  width: 100%;

  color: #222; }

.storys .satop .sar .dates .ditm .lom .ltm span {

  display: inline-block;

  font-weight: bold;

  color: #222;

  font-family: 'Oswald-Medium';

  margin-right: 0rem; }

.storys .satop .sar .dates .ditm .lom .xm {

  width: 100%;

  color: #000;

  line-height: 1.5; }



.cooperations {

  width: 100%;

  padding: .6rem 0; }

.cooperations .copper {

  width: 100%;

  position: relative; }

.cooperations .copper .swiper-container {

  padding-bottom: 0.8rem; }

.cooperations .copper .swiper-slide {

  width: 100%;

  position: relative; }

.cooperations .copper .swiper-slide .imgs {

  width: 100%;

  overflow: hidden;

  position: relative; }

.cooperations .copper .swiper-slide .imgs .img {

  width: 100%;

  padding-top: 37.5%;

  transition: all ease 0.5s; }

.cooperations .copper .swiper-pagination {

  bottom: 0; }

.cooperations .copper .swiper-pagination-bullet {

  display: inline-block;

  vertical-align: middle;

  width: 6px;

  height: 6px;

  background-color: #999;

  border: solid 2px #999;

  opacity: 1;

  margin: 0 0.15rem; }

.cooperations .copper .swiper-pagination-bullet-active {

  background-color: transparent;

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

  width: 10px;

  height: 10px; }



.cases {

  width: 100%;

  padding: .6rem 0;

  background-color: #f8f8f8; }

.cases .casop {

  width: 100%;

  font-size: 0;

  margin-bottom: 0.5rem; }

.cases .casop .cie {

  display: inline-block;

  width: auto;

  color: #222;

  line-height: 1; }

.cases .casop .xim {

  display: inline-block;

  width: auto;

  color: #666;

  line-height: 1.5; }

.cases .casop .xim span {

  display: inline-block;

  vertical-align: middle;

  width: 0.5rem;

  height: 1px;

  background-color: #555;

  margin: 0 0.15rem; }

.cases .casnavs {

  width: 100%;

  border-top: solid 1px #c9c9c9;

  margin-bottom: 0.3rem; }

.cases .casnavs .swiper-container {

  padding-top: 1px; }

.cases .casnavs .swiper-slide {

  width: 100%;

  text-align: center;

  position: relative;

  padding: 0.2rem 0.1rem;

  cursor: pointer; }

.cases .casnavs .swiper-slide .sic {

  display: block;

  margin: 0 auto 0.15rem;

  width: 100%; }

.cases .casnavs .swiper-slide .sic img {

  height: 0.54rem;

  display: inline-block; }

.cases .casnavs .swiper-slide .sic img:first-child {

  display: inline-block; }

.cases .casnavs .swiper-slide .sic img:last-child {

  display: none; }

.cases .casnavs .swiper-slide .sim {

  width: 100%;

  color: var(--themes);

  line-height: 1.5;

  transition: all ease 0.5s;

  opacity: 0; }

.cases .casnavs .swiper-slide:after {

  content: ' ';

  width: 100%;

  height: 2px;

  background-color: var(--themes);

  top: -1px;

  transition: all ease 0.5s;

  position: absolute;

  left: 0;

  opacity: 0; }

.cases .casnavs .swiper-slide.on:after, .cases .casnavs .swiper-slide:hover:after {

  opacity: 1; }

.cases .casnavs .swiper-slide.on .sic img:first-child, .cases .casnavs .swiper-slide:hover .sic img:first-child {

  display: none; }

.cases .casnavs .swiper-slide.on .sic img:last-child, .cases .casnavs .swiper-slide:hover .sic img:last-child {

  display: inline-block; }

.cases .casnavs .swiper-slide.on .sim, .cases .casnavs .swiper-slide:hover .sim {

  opacity: 1; }

.cases .caconts {

  width: 100%; }

.cases .caconts .catom {

  width: 100%;

  display: none; }

.cases .caconts .catom.on {

  display: block; }

.cases .sanom {

  width: 100%; }

.cases .sanom a {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  background-color: #fff;

  align-items: center; }

.cases .sanom .imgs {

  display: inline-block;

  vertical-align: middle;

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

  position: relative;

  overflow: hidden; }

.cases .sanom .imgs .img {

  width: 100%;

  padding-top: 69.13%;

  transition: all ease 0.5s; }

.cases .sanom .roms {

  display: inline-block;

  vertical-align: middle;

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

  padding: 0.4rem 1rem; }

.cases .sanom .roms .ri {

  display: block;

  width: 0.4rem;

  height: 0.4rem; }

.cases .sanom .roms .ri img {

  width: 100%;

  display: block; }

.cases .sanom .roms .rid {

  width: 100%;

  color: #222;

  font-weight: bold;

  font-family: 'MiSans-Demibold';

  line-height: 1.2;

  margin: 0.3rem 0; }

.cases .sanom .roms .sinp {

  width: 100%;

  color: #666;

  line-height: 1.6;

  margin: 0.3rem 0; }

.cases .sanom .roms .sinp p {

  color: #666;

  line-height: 1.6; }

.cases .sanom .roms .more {

  width: 100%;

  font-size: 0; }

.cases .sanom .roms .more .mtn {

  display: inline-block;

  vertical-align: middle;

  width: auto;

  color: var(--themes); }

.cases .sanom .roms .more .mtn span {

  display: inline-block;

  vertical-align: middle;

  width: 0.2rem;

  margin-left: 0.1rem;

  position: relative;

  top: -0.02rem;

  transition: all ease 0.5s; }

.cases .sanom:hover .imgs .img {

  transform: scale(1.1); }

.cases .sanom:hover .roms .more .mtn span {

  transform: rotate(45deg); }

.cases .Spread {

  width: 100%;

   }

.cases .Spread .mitop {

  margin-bottom: 0.3rem; }

.cases .Spread .renavs {

  width: 100%;

  margin-bottom: 0.5rem; }

.cases .Spread .renavs .renav {

  width: 100%; }

.cases .Spread .renavs .swiper-wrapper.center {

  justify-content: center; }

.cases .Spread .renavs .swiper-slide {

  display: inline-block;

  vertical-align: middle;

  width: auto; }

.cases .Spread .renavs .swiper-slide a {

  display: inline-block;

  vertical-align: middle;

  background-color: #ffffff;

  border: solid 1px #e5e5e5;

  width: auto;

  color: #666;

  line-height: 3;

  padding: 0 0.5rem; }

.cases .Spread .renavs .swiper-slide:hover a, .cases .Spread .renavs .swiper-slide.on a {

  background-color: var(--themes);

  color: #fff;

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

.cases .Spread .renavs .swiper-slide + .swiper-slide {

  margin-left: 0.12rem; }

.cases .Spread .spcont {
 position: relative;
  width: 100%; }

.cases .Spread .spcont .stiem {

  width: 100%; 
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
  visibility: hidden;
  transition: opacity ease .5s;
 }

.cases .Spread .spcont .stiem.on {
  position: relative;
   opacity: 1;
   z-index: 18;
   visibility: visible;
    }

.cases .Spread .spcoper {

  width: 100%;

  position: relative; }

.cases .Spread .spcoper .swiper-slide {

  width: 100%;

  position: relative; }

.cases .Spread .spcoper .swiper-slide .imgs {

  width: 100%;

  position: relative;

  overflow: hidden; }

.cases .Spread .spcoper .swiper-slide .imgs .img {

  width: 100%;

  padding-top: 42.5%;

  transition: all ease 0.5s; }

.cases .Spread .spcoper .swiper-slide .boe {

  position: absolute;

  bottom: 0.24rem;

  left: 50%;

  transform: translateX(-50%);

  z-index: 3;

  width: 80%;

  text-align: center; }

.cases .Spread .spcoper .swiper-slide .boe .bm {

  display: inline-block;

  vertical-align: middle;

  width: auto;

  color: #fff;

  line-height: 2.5;

  padding: 0 0.35rem;

  border: solid 1px #fff; }

.cases .Spread .spcoper .btn {

  position: absolute;

  z-index: 3;

  top: 50%;

  transform: translateY(-50%);

  width: 0.52rem;

  height: 0.52rem;

  border-radius: 50%;

  cursor: pointer;

  background-color: #eee; }

.cases .Spread .spcoper .btn img {

  width: 100%;

  display: block; }

.cases .Spread .spcoper .btn img:first-child {

  display: block; }

.cases .Spread .spcoper .btn img:last-child {

  display: none; }

.cases .Spread .spcoper .btn:hover {

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

.cases .Spread .spcoper .btn:hover img:first-child {

  display: none; }

.cases .Spread .spcoper .btn:hover img:last-child {

  display: block; }

.cases .Spread .spcoper .bl {

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

.cases .Spread .spcoper .br {

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



@media (max-width: 1680px) {

  .cases .Spread .spcoper .bl {

    left: calc(5% - 0.26rem); }

  .cases .Spread .spcoper .br {

    right: calc(5% - 0.26rem); } }

.hots {

  width: 100%;

  padding: 1rem 0; }

.hots .hontlis {

  width: 100%;

  font-size: 0;

  display: flex;

  flex-wrap: wrap; }

.hots .hontlis .hoems {

  display: inline-block;

  vertical-align: top;

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

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

  background-color: #fff;

  margin-bottom: 0.4rem; }

.hots .hontlis .hoems a {

  width: 100%;

  display: block; }

.hots .hontlis .hoems .imgs {

  width: 100%;

  position: relative;

  overflow: hidden; }

.hots .hontlis .hoems .imgs .img {

  width: 100%;

  padding-top: 111.11%;

  transition: all ease 0.5s; }

.hots .hontlis .hoems .coms {

  width: 100%;

  padding: 0.24rem 0.15rem; }

.hots .hontlis .hoems .coms .cip {

  width: 100%;

  color: #222;

  line-height: 1.5;

  text-align: center; }

.hots .hontlis .hoems .coms .cmp {

  width: 100%;

  color: #666;

  line-height: 1.5;

  text-align: center;

  margin-top: 0.12rem; }

.hots .hontlis .hoems .coms .ic {

  display: block;

  margin: 0.3rem auto 0;

  width: 25px;

  position: relative;

  left: -0.12rem;

  width: 0.25rem; }

.hots .hontlis .hoems .coms .ic img {

  width: 100%;

  display: block; }

.hots .hontlis .hoems:hover {

  box-shadow: 0px 0px 10px 0px rgba(35, 196, 255, 0.15); }

.hots .hontlis .hoems:hover .imgs .img {

  transform: scale(1.1); }

.hots .hontlis .hoems:nth-child(4n) {

  margin-right: 0; }



.catoms {

  width: 100%;

  padding: 1rem 0 0; }

.catoms .renavs {

  width: 100%;

  margin-bottom: 0.6rem; }

.catoms .renavs .renav {

  width: 100%; }

.catoms .renavs .swiper-wrapper.center {

  justify-content: center; }

.catoms .renavs .swiper-container {

  padding-bottom: 2px; }

.catoms .renavs .swiper-slide {

  display: inline-block;

  vertical-align: middle;

  width: auto; }

.catoms .renavs .swiper-slide a {

  display: inline-block;

  vertical-align: middle;

  background-color: #ffffff;

  border: solid 1px #e5e5e5;

  width: auto;

  color: #666;

  line-height: 3;

  padding: 0 0.5rem; }

.catoms .renavs .swiper-slide:hover a, .catoms .renavs .swiper-slide.on a {

  background-color: var(--themes);

  color: #fff;

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

.catoms .renavs .swiper-slide + .swiper-slide {

  margin-left: 0.12rem; }

.catoms .mcont {

  width: 100%;

  position: relative; }

.catoms .mcont .mitem {

  width: 100%;

  display: none; }

.catoms .mcont .mitem.on {

  display: block; }

.catoms .imgs {

  width: 100%;

  position: relative;

  overflow: hidden; }

.catoms .imgs .img {

  width: 100%;

  padding-top: 43.22%; }



.parameter {

  width: 100%;

  padding: 1.2rem 0; }

.parameter .spom {

  width: 100%;

  color: #222;

  line-height: 1.75;

  font-size: 0.16rem; }

.parameter .spom p {

  color: #222;

  line-height: 1.75; }

.parameter .spom .table {

  width: 100%;

  overflow: auto;

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

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

.parameter .spom .table::-webkit-scrollbar {

  width: 4px;

  height: 4px;

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

.parameter .spom .table::-webkit-scrollbar-thumb {

  border-radius: 10px;

  -webkit-box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.7);

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

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

.parameter .spom .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); }

.parameter .spom .table table {

  width: 16rem; 
  border: solid 1px #fff !important;

  max-width: 100%;

}

.parameter .spom .table table, .parameter .spom .table tr, .parameter .spom .table td {

  border: none;

  font-size: 0.16rem; }

  .parameter .spom .table td:first-child {
    flex: 0.5;
  }

.parameter .spom .table tr {

  width: 100%;

  display: flex;

  border-top: solid 1px #fff;

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

.parameter .spom .table tr:nth-child(2n) {

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

.parameter .spom .table tr:first-child {

  border-top:none; }

.parameter .spom .table tr:last-child {

  border-bottom: none; }

.parameter .spom .table td + td {

  border-left: solid 1px #fff; }

.parameter .spom .table td {

  flex: 1;

  padding: 0.15rem 0.2rem;

  color: #222;

  line-height: 1.6; }



.brands {

  width: 100%;

  padding: 1rem 0;

  background-color: #f8f8f8; }

.brands .renavs {

  width: 100%;

  margin-bottom: 0.6rem; }

.brands .renavs .renav {

  width: 100%; }

.brands .renavs .swiper-wrapper.center {

  justify-content: center; }

.brands .renavs .swiper-slide {

  display: inline-block;

  vertical-align: middle;

  width: auto; }

.brands .renavs .swiper-slide a {

  display: inline-block;

  vertical-align: middle;

  background-color: #ffffff;

  border: solid 1px #e5e5e5;

  width: auto;

  color: #666;

  line-height: 3;

  padding: 0 0.5rem; }

.brands .renavs .swiper-slide:hover a, .brands .renavs .swiper-slide.on a {

  background-color: var(--themes);

  color: #fff;

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

.brands .renavs .swiper-slide + .swiper-slide {

  margin-left: 0.12rem; }

.brands .baoem {

  width: 100%;

  font-size: 0;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between; }

.brands .baoem .bal {

  display: inline-block;

  vertical-align: middle;

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

.brands .baoem .bal .bit {

  width: 100%;

  color: #222;

  line-height: 1.4;

  margin-bottom: 0.5rem; }

.brands .baoem .bal .binp {

  width: 100%;

  color: #666;

  line-height: 1.75; }

.brands .baoem .bal .binp p {

  color: #666;

  line-height: 1.75; }

.brands .baoem .bal .mtns {

  width: 100%;

  font-size: 0;

  margin-top: 0.6rem; }

.brands .baoem .bal .mtns .mtn {

  display: inline-block;

  vertical-align: middle;

  width: 0.52rem;

  height: 0.52rem;

  cursor: pointer;

  border-radius: 50%;

  background-color: #eee; }

.brands .baoem .bal .mtns .mtn img {

  width: 100%;

  display: block; }

.brands .baoem .bal .mtns .mtn img:first-child {

  display: block; }

.brands .baoem .bal .mtns .mtn img:last-child {

  display: none; }

.brands .baoem .bal .mtns .mtn + .mtn {

  margin-left: 0.3rem; }

.brands .baoem .bal .mtns .mtn:hover {

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

.brands .baoem .bal .mtns .mtn:hover img:first-child {

  display: none; }

.brands .baoem .bal .mtns .mtn:hover img:last-child {

  display: block; }

.brands .baoem .bar {

  display: inline-block;

  vertical-align: middle;

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

.brands .baoem .bar .barm {

  display: inline-block;

  vertical-align: top;

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

  margin-right: calc(6 / 900 * 100%);

  margin-bottom: 0.08rem; }

.brands .baoem .bar .barm a {

  width: 100%;

  display: block; }

.brands .baoem .bar .barm .imgs {

  width: 100%;

  position: relative;

  overflow: hidden;

  background-color: #fff; }

.brands .baoem .bar .barm .imgs .img {

  width: 100%;

  padding-top: 51.81%;

  transition: all ease 0.5s; }

.brands .baoem .bar .barm:nth-child(4n) {

  margin-right: 0; }

.brands .baoem .bar .barm:hover .imgs .img {

  transform: scale(1.1); }



.evaluate {

  width: 100%;

  padding: 1.2rem 0; }

.evaluate .eit {

  width: 100%;

  text-align: center;

  color: #fff;

  line-height: 1.5;

  margin-bottom: 0.6rem; }

.evaluate .evapers {

  width: 100%;

  position: relative; }

.evaluate .evapers .bg {

  position: absolute;

  z-index: 1;

  width: 100%;

  left: 50%;

  transform: translateX(-50%);

  bottom: 0; }

.evaluate .evapers .bg .im {

  width: 100%;

  padding-top: 6.45%; }

.evaluate .evapers .swiper-container {

  z-index: 2;

  position: relative;

  padding-bottom: 0.5rem;

  padding: 0 0rem 0.5rem;

  margin: 0 1rem; }

.evaluate .evapers .swiper-slide {

  width: 100%; }

.evaluate .evapers .swiper-slide a {

  width: 100%;

  display: block;

  max-width: 3.5rem;

  margin: 0 auto; }

.evaluate .evapers .swiper-slide .imgs {

  width: 100%;

  position: relative;

  overflow: hidden; }

.evaluate .evapers .swiper-slide .imgs .img {

  width: 100%;

  padding-top: 100%; }

.evaluate .mtns {

  width: 100%;

  font-size: 0;

  margin-top: 0.6rem;

  text-align: center; }

.evaluate .mtns .mtn {

  display: inline-block;

  vertical-align: middle;

  width: 0.52rem;

  height: 0.52rem;

  cursor: pointer;

  border-radius: 50%;

  background-color: #eee; }

.evaluate .mtns .mtn img {

  width: 100%;

  display: block; }

.evaluate .mtns .mtn img:first-child {

  display: block; }

.evaluate .mtns .mtn img:last-child {

  display: none; }

.evaluate .mtns .mtn + .mtn {

  margin-left: 0.3rem; }

.evaluate .mtns .mtn:hover {

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

.evaluate .mtns .mtn:hover img:first-child {

  display: none; }

.evaluate .mtns .mtn:hover img:last-child {

  display: block; }



.Elegance {

  width: 100%;

  padding: 1rem 0;

  overflow: hidden; }

.Elegance .eitop {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 0.6rem; }

.Elegance .eitop .eol {

  display: inline-block;

  vertical-align: middle;

  width: auto; }

.Elegance .eitop .eol .eit {

  width: 100%;

  color: #222;

  line-height: 1.5; }

.Elegance .eitop .eor {

  display: inline-block;

  vertical-align: middle; }

.Elegance .eitop .eor .rganav {

  display: inline-block;

  vertical-align: middle;

  width: 8rem; }

.Elegance .eitop .eor .rganav .swiper-wrapper {

  justify-content: flex-end; }

.Elegance .eitop .eor .rganav .swiper-slide {

  width: auto;

  display: inline-block;

  vertical-align: middle;

  cursor: pointer;

  line-height: 3;

  position: relative;

  color: #666;

  border-bottom: solid 2px transparent; }

.Elegance .eitop .eor .rganav .swiper-slide:hover, .Elegance .eitop .eor .rganav .swiper-slide.on {

  color: var(--themes);

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

.Elegance .eitop .eor .rganav .swiper-slide + .swiper-slide {

  margin-left: 0.4rem; }

.Elegance .egacont {

  width: 100%; }

.Elegance .egacont .egitm {

  width: 100%;

  display: none; }

.Elegance .egacont .egitm.on {

  display: block; }

.Elegance .egacont .exiom {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: center;

  flex-direction: row-reverse; }

.Elegance .egacont .exiom .exl {

  display: inline-block;

  vertical-align: middle;

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

.Elegance .egacont .exiom .exl .exlper {

  width: 100%;

  position: relative; }

.Elegance .egacont .exiom .exl .exlper .mtn {

  display: inline-block;

  vertical-align: middle;

  width: 0.52rem;

  height: 0.52rem;

  cursor: pointer;

  border-radius: 50%;

  background-color: #eee;

  position: absolute;

  z-index: 2;

  top: 50%;

  transform: translateY(-50%); }

.Elegance .egacont .exiom .exl .exlper .mtn img {

  width: 100%;

  display: block; }

.Elegance .egacont .exiom .exl .exlper .mtn img:first-child {

  display: block; }

.Elegance .egacont .exiom .exl .exlper .mtn img:last-child {

  display: none; }

.Elegance .egacont .exiom .exl .exlper .mtn:hover {

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

.Elegance .egacont .exiom .exl .exlper .mtn:hover img:first-child {

  display: none; }

.Elegance .egacont .exiom .exl .exlper .mtn:hover img:last-child {

  display: block; }

.Elegance .egacont .exiom .exl .exlper .bl {

  left: -0.26rem; }

.Elegance .egacont .exiom .exl .exlper .br {

  right: -0.26rem; }

.Elegance .egacont .exiom .exl .swiper-slide {

  width: 100%; }

.Elegance .egacont .exiom .exl .swiper-slide .imgs {

  width: 100%;

  position: relative;

  overflow: hidden; }

.Elegance .egacont .exiom .exl .swiper-slide .imgs .img {

  width: 100%;

  padding-top: 64%; }

.Elegance .egacont .exiom .exr {

  display: inline-block;

  vertical-align: middle;

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

.Elegance .egacont .exiom .exr .einp {

  width: 100%;

  color: #666;

  line-height: 1.6;

  padding-right: 0.8rem;

  overflow: auto;

  max-height: 5.8rem;

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

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

.Elegance .egacont .exiom .exr .einp::-webkit-scrollbar {

  width: 2px;

  height: 2px;

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

.Elegance .egacont .exiom .exr .einp::-webkit-scrollbar-thumb {

  border-radius: 6px;

  -webkit-box-shadow: inset 0 0 10px rgba(34, 148, 58, 0.7);

  background: rgba(34, 148, 58, 0.7);

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

.Elegance .egacont .exiom .exr .einp::-webkit-scrollbar-track {

  border-radius: 6px;

  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);

  background: rgba(0, 0, 0, 0.1); }

.Elegance .egacont .exiom .exr .einp p {

  color: #666;

  line-height: 1.6; }

  @media (max-width: 800px) {
    .storys{position: relative;padding-bottom: 3rem;}
    .storys:after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(255,255,255,.5);}
    .storys .w1600{position: relative;z-index: 8;}
    .storys .satop .sar .dates .ditm .lom .ltm span{font-size: .26rem;}
    .abouts .abtoms .abl .dates .ditm .lom .ltm{font-size: .24rem;}
    .abouts .abtoms .abl .dates .ditm .lom .ltm span{font-size: .28rem;}
    .systems .systop{flex-direction: column-reverse;}
  }