:root {
  --vi: #ec6c00;
}

@keyframes round {
  0% {
    stroke-dashoffset: 250;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes leaveLeft {
  0% {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    transform: translateX(-3rem);
  }
}
@keyframes leaveRight {
  0% {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    transform: translateX(3rem);
  }
}
@keyframes showLeft {
  0% {
    transform: translateX(5rem);
    opacity: 0;
    visibility: hidden;
    z-index: -1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    z-index: 1;
  }
}
@keyframes showRight {
  0% {
    transform: translateX(-5rem);
    opacity: 0;
    visibility: hidden;
    z-index: -1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    z-index: 1;
  }
}
.w1660 {
  width: 41.5rem;
  max-width: 90%;
  margin: 0 auto;
}

.w1440 {
  width: 36rem;
  max-width: 90%;
  margin: 0 auto;
}

.anchor {
  position: relative;
  margin-top: -2.5rem;
}

.anchor.other {
  position: absolute;
  top: 0;
  left: 0;
}

.tac {
  text-align: center;
}

.lh1 {
  line-height: 1;
}

.fonb {
  font-weight: bold;
}

.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.main-tit {
  color: #000;
  line-height: 1;
  font-size: 1.1rem;
}
.main-tit.white {
  color: #ffffff;
}
.main-tit.vi {
  color: var(--vi);
}

.main-tit span{font-size: 0.6em;margin-left: 0.5em;color: #333;}

.main-sub {
  margin-top: 0.5rem;
  color: #666666;
  font-size: 0.55rem;
  line-height: 1;
}
.main-sub span {
  color: var(--vi);
}

.side-sub {
  margin-top: 0.35rem;
  color: #000;
  font-size: 0.55rem;
  line-height: 1;
}
.side-sub span {
  color: var(--vi);
}

.main-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 1.1rem;
  line-height: 1;
  border-radius: 0.1rem;
  box-shadow: 0 0 0 1px #e5e5e5;
  color: #333;
  transition: all 0.4s;
}
.main-more em {
  font-style: normal;
  display: block;
  position: relative;
  font-size: inherit;
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  min-width: 6px;
}
.main-more em::before {
  content: attr(data-word);
  display: block;
  position: absolute;
  top: 105%;
  z-index: 3;
  font-size: inherit;
  color: transparent;
  transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.main-more em:nth-child(1) {
  transition-delay: 0s;
}
.main-more em:nth-child(2) {
  transition-delay: 0.03s;
}
.main-more em:nth-child(3) {
  transition-delay: 0.06s;
}
.main-more em:nth-child(4) {
  transition-delay: 0.09s;
}
.main-more em:nth-child(5) {
  transition-delay: 0.12s;
}
.main-more.other {
  background-color: var(--vi);
  color: #fff;
  box-shadow: none;
}
.main-more:hover {
  background-color: var(--vi);
  box-shadow: none;
}
.main-more:hover em {
  transform: translateY(-100%);
  color: transparent;
}
.main-more:hover em::before {
  color: #fff;
}

.page-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-box a {
  width: 1.05rem;
  height: 1.05rem;
  line-height: 1.05rem;
  text-align: center;
  border-radius: 50%;
  color: #333333;
  margin-right: 5px;
  transition: all 0.4s;
}
.page-box a:last-child {
  margin-right: 0;
}
.page-box a:hover, .page-box a.active {
  background-color: var(--vi);
  color: #fff;
}

.head .drop-down {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: calc(100vh - 2.5rem);
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(33px);
          backdrop-filter: blur(33px);
  display: none;
}
.head .drop-down .wrap {
  display: flex;
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  background-color: #fff;
}
.head .drop-down .lf {
  width: 50%;
  padding: 1.45rem 1.55rem 1.5rem 3.25rem;
  border-right: 1px solid #e2e2e2;
}
.head .drop-down .lf .item-box {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.head .drop-down .lf .item-box .item {
  width: calc((100% - 1.2rem) / 4);
  aspect-ratio: 9/8;
  border-radius: 0.25rem;
  background-color: #f9f9f9;
  padding: 1.1rem 0.5rem 0.5rem;
  text-align: center;
  transition: all 0.4s;
}
.head .drop-down .lf .item-box .item div {
  margin: auto;
  width: 1.2rem;
  height: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1);
}
.head .drop-down .lf .item-box .item div img {
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.head .drop-down .lf .item-box .item p {
  margin-top: 0.2rem;
  color: #333;
}
.head .drop-down .lf .item-box .item:hover {
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.1);
}
.head .drop-down .lf .item-box .item:hover div {
  filter: inherit;
}
.head .drop-down .rg {
  width: 50%;
  padding: 1.45rem 0 1rem 1.5rem;
}
.head .drop-down .rg .swiper-box {
  margin-top: 1rem;
  position: relative;
}
.head .drop-down .rg .swiper-box .swiper-button-prev,
.head .drop-down .rg .swiper-box .swiper-button-next {
  top: auto;
  bottom: calc(100% + 0.8rem);
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background-color: #efefef;
  color: #333333;
  transition: all 0.4s;
}
.head .drop-down .rg .swiper-box .swiper-button-prev::after,
.head .drop-down .rg .swiper-box .swiper-button-next::after {
  font-size: 0.3rem;
}
.head .drop-down .rg .swiper-box .swiper-button-prev:hover,
.head .drop-down .rg .swiper-box .swiper-button-next:hover {
  background-color: var(--vi);
  color: #fff;
}
.head .drop-down .rg .swiper-box .swiper-button-prev {
  left: auto;
  right: 4.7rem;
}
.head .drop-down .rg .swiper-box .swiper-button-next {
  right: 3.25rem;
}
.head .drop-down .rg .swiper-box .proDrop-swiper {
  width: 100%;
}
.head .drop-down .rg .swiper-box .proDrop-swiper .swiper-slide {
  width: 36.66%;
  margin-right: 0.5rem;
}
.head .drop-down .rg .swiper-box .proDrop-swiper .swiper-slide:last-child {
  margin-right: 0;
}
.head .drop-down .rg .swiper-box .proDrop-swiper .swiper-slide .pic {
  width: 100%;
  aspect-ratio: 165/209;
  border-radius: 0.25rem;
  overflow: hidden;
}
.head .drop-down .rg .swiper-box .proDrop-swiper .swiper-slide .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.head .drop-down .rg .swiper-box .proDrop-swiper .swiper-slide .h1 {
  margin-top: 0.75rem;
  color: #000000;
}
.head .drop-down .link {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.35rem 0;
  background-color: #fff;
}

.footer {
  position: relative;
  overflow: hidden;
  background-color: #f9f9f9;
  z-index: 1;
}
.footer .pos-bg {
  position: absolute;
  bottom: 0;
  right: 4rem;
  width: 50%;
  z-index: -1;
}
.footer .pos-bg img {
  width: 100%;
}
.footer .top {
  padding: 2.5rem 0 0.9rem;
  border-bottom: 1px solid #cfcfcf;
  display: flex;
  justify-content: space-between;
}
.footer .lt .logo {
  width: 3.6rem;
  margin-bottom: 1.5rem;
}
.footer .lt .logo img {
  width: 100%;
}
.footer .lt .li {
  margin-bottom: 0.8rem;
}
.footer .lt .li:last-child {
  margin-bottom: 0;
}
.footer .lt .li .icon {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  color: #999999;
}
.footer .lt .li .icon span {
  width: 0.5rem;
  height: 0.5rem;
}
.footer .lt .li .icon span img {
  max-height: 100%;
  object-fit: contain;
}
.footer .lt .li .txt {
  margin-top: 0.3rem;
  color: #000;
  line-height: 1.2;
}
.footer .rt {
  display: flex;
}
.footer .rt .nav {
  display: flex;
  gap: 4.45rem;
}
.footer .rt .nav .li a {
  display: block;
  color: #666666;
  margin-bottom: 0.6rem;
  transition: all 0.4s;
}
.footer .rt .nav .li a:last-child {
  margin-bottom: 0;
}
.footer .rt .nav .li .tit {
  color: #333;
  margin-bottom: 0.9rem;
}
.footer .rt .nav .tit-li a {
  color: #333;
  margin-bottom: 1.4rem;
}
.footer .rt .nav .tit-li a:last-child {
  margin-bottom: 0;
}
.footer .rt .code {
  margin-left: 2.45rem;
}
.footer .rt .code .li-box {
  display: flex;
  gap: 0.6rem;
}
.footer .rt .code .li-box .li {
  color: #666666;
}
.footer .rt .code .li-box .li div {
  width: 4.1rem;
  height: 4.1rem;
  background-color: #fff;
  padding: 0.4rem;
  margin: 0 auto 0.2rem;
}
.footer .rt .code .li-box .li div img {
  width: 100%;
}
.footer .rt .code .share {
  margin-top: 3.25rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
}
.footer .rt .code .share a {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #e2e2e2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer .rt .code .share a img {
  max-width: 60%;
  max-height: 60%;
  -o-object-fit: contain;
     object-fit: contain;
}
.footer .bottom {
  padding: 0.9rem 0;
  display: flex;
  justify-content: space-between;
}
.footer .bottom a {
  color: #999999;
}
.footer .bottom .link {
  display: flex;
  color: #999999;
}
.footer .bottom .link a {
  margin-left: 0.8rem;
  position: relative;
}
.footer .bottom .link a::before {
  content: "";
  position: absolute;
  left: -0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 7px;
  background-color: #999;
}
.footer .bottom .link a:first-child {
  margin-left: 0;
}
.footer .bottom .link a:first-child::before {
  display: none;
}
.footer .bottom .link p {
  margin-left: 1.1rem;
}

@keyframes translate {
  0% {
    top: 50%;
    transform: translate(-50%, -50%) scale(5.3);
  }
  100% {
    top: 1.25rem;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes hide {
  0% {
    visibility: visible;
  }
  100% {
    visibility: hidden;
  }
}
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 200;
  display: none;
}
.loading .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(5.3);
  width: 4.25rem;
  z-index: 3;
}
.loading .icon img {
  width: 100%;
}
.loading .bg {
  background-color: #fff;
}
.loading.loaded {
  animation: hide 1s 3s linear forwards;
}
.loading.loaded .icon {
  animation: translate 2s linear forwards;
}
.loading.loaded .bg {
  animation: fade 1s linear forwards;
}

@keyframes moveY {
  0% {
    transform: translateY(30vh) scale(0.8);
  }
  100% {
    transform: translateY(0%) scale(1);
  }
}
@keyframes moveYBig {
  0% {
    transform: translateY(60vh) scale(0.7);
  }
  100% {
    transform: translateY(0%) scale(1);
  }
}
.index .ani-box {
  position: relative;
}
.index .index-ban {
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.index .index-ban .swiper-pagination-bullet{
  opacity: 1;
  width: 1rem;
  height: 3px;
  background-color: #ffffff;
  border-radius: 0;
  opacity: 1;
}
.index .index-ban .swiper-pagination-bullet-active{
  background-color: var(--vi);
}
.index .index-ban::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
.index .index-ban video,
.index .index-ban img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.index .index-ban .pos-cont {
  position: absolute;
  top: 39%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  z-index: 2;
}
.index .index-ban .pos-cont .tit {
  line-height: 1.25;
  font-weight: bold;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
.index .index-ban .pos-cont .cont {
  margin-top: 0.5rem;
  line-height: 1.6;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
.index .index-ban.loaded .pos-cont .tit {
  animation: moveY 2s 0.5s linear forwards;
}
.index .index-ban.loaded .pos-cont .cont {
  animation: moveYBig 2s 0.5s linear forwards;
}
.index .box1 {
  position: relative;
  z-index: 5;
  padding: 3.2rem 0 2.3rem;
  background-color: #f9f9f9;
}
.index .box1 .li-box {
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  gap: 2%;
  height: 14.75rem;
}
.index .box1 .li-box .li {
  position: relative;
  width: 18%;
  height: calc(100% - 1rem);
  border-radius: 0.25rem;
  overflow: hidden;
  transition: all 0.6s;
}
.index .box1 .li-box .li img,
.index .box1 .li-box .li video{
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.index .box1 .li-box .li p {
  position: absolute;
  bottom: 1.05rem;
  left: 0;
  width: 100%;
  padding: 0 1rem;
  color: #fff;
  font-size: 0.55rem;
  line-height: 1;
  text-align: center;
  transition: all 0.4s;
}
.index .box1 .li-box .li.active {
  width: 40%;
  height: 100%;
}
.index .box1 .li-box .li.active p {
  font-size: 0.7rem;
  text-align: left;
  bottom: 0.95rem;
}
.index .box2 {
  padding: 2.5rem 0 2.9rem;
  background-color: #f9f9f9;
}
.index .box2 .container {
  margin-top: 1.25rem;
  display: flex;
}
.index .box2 .container .lf {
  width: 20%;
  padding-top: 1.5rem;
  padding-right: 0.5rem;
}
.index .box2 .container .lf .box2-lf-swiper .swiper-slide {
  width: 100%;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #333333;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}
.index .box2 .container .lf .box2-lf-swiper .swiper-slide:last-child {
  margin-bottom: 0;
}
.index .box2 .container .lf .box2-lf-swiper .swiper-slide .icon {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.15rem solid transparent;
  transition: all 0.4s ease-in-out;
}
.index .box2 .container .lf .box2-lf-swiper .swiper-slide .icon img {
  max-width: 60%;
  max-height: 60%;
  -o-object-fit: contain;
     object-fit: contain;
}
.index .box2 .container .lf .box2-lf-swiper .swiper-slide .icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 0.3rem);
  height: calc(100% + 0.3rem);
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  transition: all 2s;
}
.index .box2 .container .lf .box2-lf-swiper .swiper-slide .icon svg circle {
  r: 0.75rem;
  cx: 50%;
  cy: 50%;
  fill: transparent;
  stroke: var(--vi);
  stroke-width: .15rem;
}
.index .box2 .container .lf .box2-lf-swiper .swiper-slide.active {
  color: var(--vi);
  font-weight: bold;
}
.index .box2 .container .lf .box2-lf-swiper .swiper-slide.active .icon {
  background-color: #fff;
  border-color: rgba(236, 108, 0, 0.1);
}
.index .box2 .container .lf .box2-lf-swiper .swiper-slide.active .icon svg {
  animation: round 10s linear forwards;
}
.index .box2 .container .rg {
  width: 80%;
  background-color: #fff;
  border-radius: 0.25rem;
}
.index .box2 .container .rg .item {
  padding: 1.8rem 1.55rem 1.9rem 1.65rem;
  width: 100%;
  border-radius: 0.25rem;
  display: none;
}
.index .box2 .container .rg .item.show {
  display: flex;
}
.index .box2 .container .rg .item .cont {
  width: 51%;
  padding-top: 1.05rem;
  padding-right: 2rem;
}
.index .box2 .container .rg .item .cont .h {
  color: #333;
}
.index .box2 .container .rg .item .cont .txt {
  margin-top: 0.75rem;
  color: #666666;
  line-height: 1.8;
}
.index .box2 .container .rg .item .pic {
  width: 49%;
}
.index .box2 .container .rg .item .pic .box2-top-swiper {
  width: 100%;
  height: 9.5rem;
}
.index .box2 .container .rg .item .pic .box2-top-swiper .swiper-slide {
  width: 100%;
  height: 100%;
  margin-right: 1rem;
}
.index .box2 .container .rg .item .pic .box2-top-swiper .swiper-slide:last-child {
  margin-right: 0;
}
.index .box2 .container .rg .item .pic .box2-top-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.index .box2 .container .rg .item .pic .box2-btm-swiper {
  margin-top: 0.6rem;
  width: 100%;
}
.index .box2 .container .rg .item .pic .box2-btm-swiper .swiper-slide {
  width: 2.5rem;
  height: 2.2rem;
  padding-bottom: 0.375rem;
  margin-right: 0.5rem;
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.4s;
}
.index .box2 .container .rg .item .pic .box2-btm-swiper .swiper-slide:last-child {
  margin-right: 0;
}
.index .box2 .container .rg .item .pic .box2-btm-swiper .swiper-slide::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--vi);
  transition: all 0.4s;
}
.index .box2 .container .rg .item .pic .box2-btm-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.index .box2 .container .rg .item .pic .box2-btm-swiper .swiper-slide-thumb-active {
  opacity: 1;
}
.index .box2 .container .rg .item .pic .box2-btm-swiper .swiper-slide-thumb-active::after {
  width: 100%;
}
.index .box3 {
  padding: 3.35rem 0 0;
}
.index .box3 .container {
  margin-top: 1.25rem;
  display: flex;
}
.index .box3 .container:hover .item {
  width: 42%;
}
.index .box3 .container .item {
  width: 50%;
  background-color: #f1f1f1;
  cursor: pointer;
  transition: all 0.6s;
}
.index .box3 .container .item .intro {
  padding: 1.7rem 1.25rem 0.5rem 3.25rem;
  height: 5.75rem;
  transition: all 0.4s;
}
.index .box3 .container .item .intro .h {
  color: #333;
  line-height: 1.3;
}
.index .box3 .container .item .intro .pos-re {
  margin-top: 0.35rem;
  position: relative;
}
.index .box3 .container .item .intro .cont {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #666;
  transition: all 0.4s;
}
.index .box3 .container .item .intro .li-box {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  max-height: 2rem;
  gap: 0.6rem .6rem;
  /*overflow-y: auto;*/
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}
.index .box3 .container .item .intro .li-box::-webkit-scrollbar{
  width: 3px;
}
.index .box3 .container .item .intro .li-box .li {
  width: -moz-max-content;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: #333333;
  transition: all 0.4s;
}
.index .box3 .container .item .intro .li-box .li span {
  width: 0.65rem;
  height: 0.65rem;
  filter: brightness(0.1);
}
.index .box3 .container .item .intro .li-box .li span img {
  max-height: 100%;
}
.index .box3 .container .item .intro .li-box .li:hover {
  color: var(--vi);
  font-weight: bold;
}
.index .box3 .container .item .intro .li-box .li:hover span {
  filter: inherit;
}
.index .box3 .container .item .pic {
  width: 100%;
  height: 13.25rem;
}
.index .box3 .container .item .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.index .box3 .container .item:nth-child(2) {
  background-color: #f9f9f9;
}
/*.index .box3 .container .item:nth-child(2) .intro {*/
/*  text-align: right;*/
/*  padding-right: 3.25rem;*/
/*  padding-left: 1.25rem;*/
/*}*/
/*.index .box3 .container .item:nth-child(2) .intro .li-box {*/
/*  justify-content: flex-end;*/
/*}*/
.index .box3 .container .item.active {
  width: 58%;
}
.index .box3 .container .item.active .intro {
  padding-top: 1.15rem;
}
.index .box3 .container .item.active .cont {
  opacity: 0;
  z-index: -1;
}
.index .box3 .container .item.active .li-box {
  opacity: 1;
  visibility: visible;
}
.index .box4 {
  padding: 2.5rem 0 3.9rem;
  height: calc(100vh + 3.9rem);
}
.index .box4 .wrap {
  position: relative;
  padding: 2.15rem 0 0;
  height: calc(100% - 2.5rem - 3.9rem);
}
.index .box4 .top {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.index .box4 .lf {
  width: 50%;
}
.index .box4 .lf .sub {
  margin-top: 0.5rem;
  line-height: 1.8;
  color: #666;
  width: 70%;
}
.index .box4 .lf .more {
  /*display: block;*/
  margin-top: 1.9rem;
  /*width: 5rem;*/
  /*height: 1.1rem;*/
  /*text-align: center;*/
  /*line-height: 1.1rem;*/
  /*border-radius: 6px;*/
  /*box-shadow: 0 0 0 1px #dfdfdf;*/
  color: var(--vi);
}
.index .box4 .rg {
  width: 50%;
  /*display: grid;*/
  gap: 1.65rem 0;
  /*grid-template-columns: 1fr 2fr 1fr;*/
  display: flex;
  flex-wrap: wrap;
}
.index .box4 .rg .item {
  /*width: -moz-max-content;*/
  /*width: max-content;*/
  width: 33.33%;
  line-height: 1;
  margin: auto;
}
.index .box4 .rg .item .info {
  display: flex;
  align-items: stretch;
  color: var(--vi);
}
.index .box4 .rg .item .info .num {
  font-style: italic;
  font-weight: bold;
  margin-right: 0.4rem;
}
.index .box4 .rg .item .info .unit {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.index .box4 .rg .item .info .unit p {
  line-height: 0.8;
}
.index .box4 .rg .item .txt {
  margin-top: 0.5rem;
  color: #666666;
}
.index .box4 .pic {
  width: 100%;
  position: absolute;
  top: 10rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0.5rem;
  overflow: hidden;
}
.index .box4 .pic img {
  width: 100%;
}
.index .box4 .pic .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}
.index .box4 .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.29);
  opacity: 0;
}
.index .box4 .play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-left: 0.45rem solid #fff;
  border-top: 0.3rem solid transparent;
  border-bottom: 0.3rem solid transparent;
}
.index .box5 {
  padding: 2.95rem 0 2.5rem;
  background-color: #f9f9f9;
}
.index .box5 .box5-swiper {
  margin-top: 1rem;
}
.index .box5 .box5-swiper .swiper-wrapper {
  transition-timing-function: linear;
}
.index .box5 .box5-swiper .swiper-slide {
  width: 17%;
  height: 10.7rem;
  margin-right: 0.75rem;
  background-color: #fff;
  border-radius: 0.25rem;
  padding: 1.75rem 0.85rem 0.5rem;
  text-align: center;
}
.index .box5 .box5-swiper .swiper-slide:last-child {
  margin-right: 0;
}
.index .box5 .box5-swiper .swiper-slide .icon {
  width: 80%;
  height: 3.4rem;
  margin: auto;
}
.index .box5 .box5-swiper .swiper-slide .icon img {
  max-height: 100%;
  object-fit: contain;
}
.index .box5 .box5-swiper .swiper-slide .h {
  margin-top: 1.25rem;
  color: #000000;
}
.index .box5 .box5-swiper .swiper-slide .txt {
  margin-top: 0.4rem;
  color: #666666;
  line-height: 1.8;
}
.index .box6 {
  padding: 2.5rem 0 2.3rem;
}
.index .box6 .tit {
  line-height: 1.5;
}
.index .box6 .form {
  margin-top: 1.2rem;
  width: 45.5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.index .box6 .form .li {
  width: 48%;
  margin-bottom: 0.85rem;
}
.index .box6 .form .li .h {
  color: #fff;
}
.index .box6 .form .li input {
  margin-top: 0.25rem;
  width: 100%;
  height: 1.05rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.04);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  padding: 0.3rem 0.4rem;
  color: #fff;
  border-radius: 4px;
}
.index .box6 .form .li input::-moz-placeholder {
  color: #fff;
}
.index .box6 .form .li input::placeholder {
  color: #fff;
}
.index .box6 .form .li textarea {
  margin-top: 0.25rem;
  width: 100%;
  height: 3rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.04);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  padding: 0.35rem 0.4rem;
  color: #fff;
  border-radius: 4px;
}
.index .box6 .form .li textarea::-moz-placeholder {
  color: #fff;
}
.index .box6 .form .li textarea::placeholder {
  color: #fff;
}
.index .box6 .form .li.wid100 {
  width: 100%;
}

.about .ani-box {
  position: relative;
  width: 100%;
}
.about .box1 {
  padding: 3.85rem 0 3.7rem;
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.about .box1 .wrap {
  height: 100%;
}
.about .box1 .line {
  position: absolute;
  top: -50vh;
  left: 0;
}
.about .box1 .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(33px);
          backdrop-filter: blur(33px);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
}
.about .box1 .top {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 5;
}
.about .box1 .lf {
  width: -moz-max-content;
  width: max-content;
  max-width: 40%;
  text-align: right;
}
.about .box1 .lf .h {
  color: #999999;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.about .box1 .lf .h1 {
  position: relative;
  /*left: 5rem;*/
  /*right: 1rem;*/
}
.about .box1 .lf .h2 {
  position: relative;
  /*left: 5rem;*/
  /*right: 1rem;*/
  color: var(--vi);
}
.about .box1 .rg {
  width: 55%;
  padding-top: 0.45rem;
  position: relative;
}

.about .box1 .rg .scr-more{position: absolute;bottom: -2.2em;left: 0;width: 100%;display: none;align-items: center;justify-content: center;color: #666;}

.about .box1 .rg .scr-more svg{width: 1em;height: 1em;margin-right: 0.3em;}

.about .box1 .rg.on .scr-more{display: flex;}








.about .box1 .rg .tit {
  color: #333333;
}
.about .box1 .rg .tit span {
  color: var(--vi);
}
.about .box1 .rg .txt {
  margin-top: 1.05rem;
  color: #666666;
  line-height: 2;
  position: relative;
  /*left: 2.5rem;*/
  left: 1.25rem;
  height: 10em;
  overflow-y: auto;
}
.about .box1 .pic {
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  width: 41.5rem;
  height: 100%;
  /*top: 74%;*/
}
.about .box1 .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.about .box1 .pic .bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  transform-origin: center;
}
.about .box1 .pic .img {
  width: 100%;
  height: 100%;
}
.about .box2 {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(100%);
  width: 100%;
  height: 100%;
  padding: 4rem 0 0;
  background-color: #fff;
  z-index: 10;
  overflow: hidden;
}
.about .box2 .box2-swiper {
  margin-top: 1.25rem;
  overflow: initial;
}
.about .box2 .box2-swiper .swiper-slide {
  width: 32.5%;
  margin-right: 2rem;
  transition: all 0.6s;
}
.about .box2 .box2-swiper .swiper-slide:last-child {
  margin-right: 0;
}
.about .box2 .box2-swiper .swiper-slide .pic {
  width: 100%;
  aspect-ratio: 18/11;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.6s;
}
.about .box2 .box2-swiper .swiper-slide .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all .4s;
}
.about .box2 .box2-swiper .swiper-slide .intro {
  padding: 0.9rem 0.75rem 0;
}
.about .box2 .box2-swiper .swiper-slide .h {
  font-size: 0.55rem;
  color: #333;
  transition: all 0.4s;
}
.about .box2 .box2-swiper .swiper-slide .txt {
  margin-top: 0.4rem;
  color: #333333;
  line-height: 1.8;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}
.about .box2 .box2-swiper .swiper-slide:hover .pic img {
  transform: scale(1.04);
}
.about .box2 .box2-swiper .swiper-slide-active {
  width: 43%;
}
.about .box2 .box2-swiper .swiper-slide-active .intro {
  padding: 1rem 0.9rem 0;
}
.about .box2 .box2-swiper .swiper-slide-active .h {
  color: var(--vi);
  font-size: 0.65rem;
}
.about .box2 .box2-swiper .swiper-slide-active .txt {
  opacity: 1;
  visibility: visible;
}
.about .box3 {
  padding: 2.65rem 0 0;
  background-color: #f9f9f9;
  overflow: hidden;
}
.about .box3 .container {
  margin-top: 0.9rem;
  display: flex;
  justify-content: space-between;
}
.about .box3 .container .intro {
  width: 33%;
  position: relative;
}
.about .box3 .container .intro .item {
  position: absolute;
  top: 1.75rem;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateX(5rem);
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
.about .box3 .container .intro .item.leaveLeft {
  animation: leaveLeft 1s ease-in-out forwards;
}
.about .box3 .container .intro .item.leaveRight {
  animation: leaveRight 1s ease-in-out forwards;
}
.about .box3 .container .intro .item.showLeft {
  animation: showLeft 1s ease-in-out forwards;
}
.about .box3 .container .intro .item.showRight {
  animation: showRight 1s ease-in-out forwards;
}
.about .box3 .container .intro .item .h {
  color: #000000;
  line-height: 1.3;
  font-weight: bold;
}
.about .box3 .container .intro .item .txt {
  margin-top: 0.5rem;
  color: #666;
  line-height: 2;
}
.about .box3 .container .swiper-box {
  width: 61.5%;
  position: relative;
}
.about .box3 .container .swiper-box .pic-box {
  position: relative;
  width: 63%;
  aspect-ratio: 16/11;
}
.about .box3 .container .swiper-box .pic-box::after {
  content: "";
  position: absolute;
  top: 0;
  /*left: calc(100% + 3.25rem);*/
  left: calc(100% + 1.5rem);
  width: 1px;
  height: 100%;
  background-color: #d8d8d8;
}
.about .box3 .container .swiper-box .pic-box .pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  transform: translateX(5rem);
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
.about .box3 .container .swiper-box .pic-box .pic.leaveLeft {
  animation: leaveLeft 1s ease-in-out forwards;
}
.about .box3 .container .swiper-box .pic-box .pic.leaveRight {
  animation: leaveRight 1s ease-in-out forwards;
}
.about .box3 .container .swiper-box .pic-box .pic.showLeft {
  animation: showLeft 1s ease-in-out forwards;
}
.about .box3 .container .swiper-box .pic-box .pic.showRight {
  animation: showRight 1s ease-in-out forwards;
}
.about .box3 .container .swiper-box .pic-box .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.about .box3 .container .swiper-box .box3-swiper {
  position: absolute;
  bottom: 0;
  /*left: calc(63% + 6.5rem);*/
  left: calc(63% + 3rem);
  width: 50%;
}
.about .box3 .container .swiper-box .box3-swiper .swiper-button-prev,
.about .box3 .container .swiper-box .box3-swiper .swiper-button-next {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  margin-top: 2.35rem;
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background-color: #efefef;
  color: #333333;
  transition: all 0.4s;
}
.about .box3 .container .swiper-box .box3-swiper .swiper-button-prev::after,
.about .box3 .container .swiper-box .box3-swiper .swiper-button-next::after {
  font-size: 0.3rem;
}
.about .box3 .container .swiper-box .box3-swiper .swiper-button-prev.swiper-button-lock,
.about .box3 .container .swiper-box .box3-swiper .swiper-button-next.swiper-button-lock {
  display: none;
}
.about .box3 .container .swiper-box .box3-swiper .swiper-button-prev:hover,
.about .box3 .container .swiper-box .box3-swiper .swiper-button-next:hover {
  background-color: var(--vi);
  color: #fff;
}
.about .box3 .container .swiper-box .box3-swiper .swiper-button-next {
  margin-left: 0.5rem;
}
.about .box3 .container .swiper-box .box3-swiper .swiper-slide {
  width: 100%;
  font-size: 4rem;
  line-height: 1;
  color: #ebebeb;
  font-weight: bold;
  opacity: 0;
  transition: all 1s;
}
.about .box3 .container .swiper-box .box3-swiper .swiper-slide-active {
  opacity: 1;
}
.about .box3 .bottom {
  margin-top: 1.8rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.myear-box {
    height: 0;
    visibility: hidden;
}
.about .box3 .bottom .year-box {
  position: relative;
  width: 30%;
  height: 4rem;
}
.about .box3 .bottom .year-box .year {
  position: absolute;
  bottom: 0;
  left: 0;
  color: var(--vi);
  font-size: 4rem;
  line-height: 0.9;
  font-weight: bold;
  transform: translateX(5rem);
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
.about .box3 .bottom .year-box .year.leaveLeft {
  animation: leaveLeft 1s ease-in-out forwards;
}
.about .box3 .bottom .year-box .year.leaveRight {
  animation: leaveRight 1s ease-in-out forwards;
}
.about .box3 .bottom .year-box .year.showLeft {
  animation: showLeft 1s ease-in-out forwards;
}
.about .box3 .bottom .year-box .year.showRight {
  animation: showRight 1s ease-in-out forwards;
}
.about .box3 .bottom .box3Btm-swiper {
  width: 65%;
  margin: 0;
  background-image: url(../img/25.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}
.about .box3 .bottom .box3Btm-swiper .swiper-slide {
  width: 4.5rem;
  /*width: 16.66%;*/
  padding-bottom: 1.1rem;
  text-align: center;
  color: #333333;
  cursor: pointer;
  transition: all 0.4s;
}
.about .box3 .bottom .box3Btm-swiper .swiper-slide::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 0.45rem;
  background-color: #333333;
  transition: all 0.4s;
}
.about .box3 .bottom .box3Btm-swiper .swiper-slide.active {
  color: var(--vi);
  font-weight: bold;
}
.about .box3 .bottom .box3Btm-swiper .swiper-slide.active::after {
  background-color: var(--vi);
}
.about .box4 {
  padding: 5.9rem 0 3.55rem;
  overflow: hidden;
}
.about .box4 .top {
  display: flex;
  justify-content: space-between;
}
.about .box4 .top .intro {
  width: 54%;
}
.about .box4 .top .intro .txt {
  color: #666666;
  line-height: 1.8;
}
.about .box4 .top .intro .num-box {
  margin-top: 1.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 3.5rem;
}
.about .box4 .top .intro .num-box .item {
  line-height: 1;
}
.about .box4 .top .intro .num-box .item .info {
  display: flex;
  align-items: stretch;
  color: var(--vi);
}
.about .box4 .top .intro .num-box .item .info .num {
  font-style: italic;
  font-weight: bold;
  margin-right: 0.4rem;
}
.about .box4 .top .intro .num-box .item .info .unit {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.about .box4 .top .intro .num-box .item .info .unit p {
  line-height: 0.8;
}
.about .box4 .top .intro .num-box .item .txt {
  margin-top: 0.5rem;
  color: #666666;
}
.about .box4 .box4-swiper {
  margin-top: 2.15rem;
  overflow: initial;
}
.about .box4 .box4-swiper .swiper-wrapper {
  transition-timing-function: linear;
}
.about .box4 .box4-swiper .swiper-slide {
  width: 36%;
  margin-right: 1.25rem;
}
.about .box4 .box4-swiper .swiper-slide:last-child {
  margin-right: 0;
}
.about .box4 .box4-swiper .swiper-slide .pic {
  width: 100%;
  aspect-ratio: 20/13;
  border-radius: 0.25rem;
  overflow: hidden;
}
.about .box4 .box4-swiper .swiper-slide .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.about .box4 .box4-swiper .swiper-slide .h {
  margin-top: 1rem;
  color: #000000;
}
.about .box5 {
  padding: 2.9rem 0 2.65rem;
  background-color: #f9f9f9;
}
.about .box5 .tab {
  margin-top: 1.1rem;
  display: flex;
  gap: 2.25rem;
  line-height: 1.2;
  border-bottom: 1px solid #d0d0d0;
}
.about .box5 .tab span {
  color: #000000;
  padding-bottom: 0.8rem;
  position: relative;
  cursor: pointer;
  transition: all 0.4s;
}
.about .box5 .tab span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background-color: var(--vi);
  transition: all 0.4s;
}
.about .box5 .tab span:hover {
  color: var(--vi);
}
.about .box5 .tab span.active {
  color: var(--vi);
}
.about .box5 .tab span.active::after {
  width: 100%;
}
.about .box5 .swiper-box {
  margin-top: 1.2rem;
  position: relative;
  display: none;
}
.about .box5 .swiper-box.show {
  display: block;
}
.about .box5 .swiper-box .swiper-button-prev,
.about .box5 .swiper-box .swiper-button-next {
  top: auto;
  bottom: calc(100% + 1.6rem);
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background-color: #efefef;
  color: #333333;
  transition: all 0.4s;
}
.about .box5 .swiper-box .swiper-button-prev::after,
.about .box5 .swiper-box .swiper-button-next::after {
  font-size: 0.3rem;
}
.about .box5 .swiper-box .swiper-button-prev:hover,
.about .box5 .swiper-box .swiper-button-next:hover {
  background-color: var(--vi);
  color: #fff;
}
.about .box5 .swiper-box .swiper-button-prev {
  left: auto;
  right: 1.6rem;
}
.about .box5 .swiper-box .swiper-button-next {
  right: 0;
}
.about .box5 .swiper-box .box5-swiper .swiper-slide {
  width: 23.2%;
  margin-right: 2.4%;
}
.about .box5 .swiper-box .box5-swiper .swiper-slide:last-child {
  margin-right: 0;
}
.about .box5 .swiper-box .box5-swiper .swiper-slide .pic {
  width: 100%;
  height: 12.25rem;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #fff;
  padding: 1.5rem;
  text-align: center;
}
.about .box5 .swiper-box .box5-swiper .swiper-slide .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.about .box5 .swiper-box .box5-swiper .swiper-slide .h {
  margin-top: 0.7rem;
}
.about .box6 {
  padding: 3.5rem 0 5.25rem;
}
.about .box6 .swiper-box {
  margin-top: 1.25rem;
}
.about .box6 .swiper-box .swiper-pagination {
  position: relative;
  bottom: 0;
  margin-top: 1.35rem;
  line-height: 1;
}
.about .box6 .swiper-box .swiper-pagination .swiper-pagination-bullet {
  width: 1.45rem;
  height: 3px;
  border-radius: 0;
  background-color: #d3d3d3;
  margin: 0 0.25rem;
  transition: all 0.4s;
}
.about .box6 .swiper-box .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--vi);
}
.about .box6 .swiper-box .box6-swiper {
  padding: 1px;
}
.about .box6 .swiper-box .box6-swiper .swiper-slide {
  width: 20%;
  height: 4.15rem;
  box-shadow: 0 0 0 1px #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about .box6 .swiper-box .box6-swiper .swiper-slide img {
  max-width: 70%;
  max-height: 70%;
  -o-object-fit: contain;
     object-fit: contain;
}

.product .box1 {
  padding: 4rem 0 2.4rem;
  background-color: #f9f9f9;
}
.product .box1 .box1-swiper {
  margin-top: 1.25rem;
  overflow: initial;
}
.product .box1 .box1-swiper .swiper-button-prev,
.product .box1 .box1-swiper .swiper-button-next {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  margin-top: 2rem;
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background-color: #efefef;
  color: #333333;
  transition: all 0.4s;
}
.product .box1 .box1-swiper .swiper-button-prev::after,
.product .box1 .box1-swiper .swiper-button-next::after {
  font-size: 0.3rem;
}
.product .box1 .box1-swiper .swiper-button-prev.swiper-button-lock,
.product .box1 .box1-swiper .swiper-button-next.swiper-button-lock {
  display: none;
}
.product .box1 .box1-swiper .swiper-button-prev:hover,
.product .box1 .box1-swiper .swiper-button-next:hover {
  background-color: var(--vi);
  color: #fff;
}
.product .box1 .box1-swiper .swiper-button-next {
  margin-left: 0.5rem;
}
.product .box1 .box1-swiper .swiper-pagination {
  position: absolute;
  bottom: 5px;
  left: 5.25rem;
  width: -moz-max-content;
  width: max-content;
  color: #666666;
  display: flex;
  align-items: center;
}
.product .box1 .box1-swiper .swiper-pagination .swiper-pagination-current {
  margin-right: 0.3rem;
  color: var(--vi);
}
.product .box1 .box1-swiper .swiper-scrollbar {
  bottom: 0.55rem;
  right: 0;
  left: auto;
  width: 82%;
  height: 1px;
  background-color: #dadada;
}
.product .box1 .box1-swiper .swiper-scrollbar .swiper-scrollbar-drag {
  top: auto;
  bottom: 0;
  height: 2px;
  background: var(--vi);
}
.product .box1 .box1-swiper .swiper-wrapper {
  transition-timing-function: linear;
}
.product .box1 .box1-swiper .swiper-slide {
  width: 22%;
  margin-right: 0.5rem;
}
.product .box1 .box1-swiper .swiper-slide:last-child {
  margin-right: 0;
}
.product .box1 .box1-swiper .swiper-slide .pic {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 0.25rem;
  overflow: hidden;
}
.product .box1 .box1-swiper .swiper-slide .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.product .box1 .box1-swiper .swiper-slide .h {
  margin-top: 0.9rem;
  color: #000000;
}
.product .box2 {
  padding: 4rem 0 6rem;
  background-color: #fff;
}
.product .box2 .item-box {
  margin-top: 1.25rem;
}
.product .box2 .item-box .li-box {
  display: flex;
  flex-wrap: wrap;
}
.product .box2 .item-box .li-box .li {
  width: 20%;
  height: 4.5rem;
  box-shadow: 0 0 0 1px #e9e9e9;
  padding: 1.2rem 0.5rem 0.5rem;
  text-align: center;
  transition: all 0.4s;
}
.product .box2 .item-box .li-box .li div {
  width: 1.05rem;
  height: 1.05rem;
  margin: auto;
  filter: brightness(0.1);
  transition: all 0.4s;
}
.product .box2 .item-box .li-box .li div img {
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.product .box2 .item-box .li-box .li p {
  margin-top: 0.45rem;
  color: #333;
  transition: all 0.4s;
}
.product .box2 .item-box .li-box .li:hover {
  background-color: #fff;
  box-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.09);
  transform: scale(1.03);
}
.product .box2 .item-box .li-box .li:hover div {
  filter: initial;
}
.product .box2 .item-box .li-box .li:hover p {
  color: var(--vi);
}

.pro-list {
  padding: 4rem 0 3.75rem;
  background-color: #f9f9f9;
}

.pro-list .back{display: flex;align-items: center;margin-bottom: 1rem;}

.pro-list .back span{margin-left: 0.18rem;}

.pro-list .back span svg{width: 1rem;height: 0.5rem;}

.pro-list .container .lf .back span{margin-left: 0.2rem;}

/*.pro-list .back span svg path{fill: #000;}*/

/*.pro-list .back:hover{color: var(--vi)}*/

/*.pro-list .back:hover span svg path{fill: var(--vi)}*/


.pro-list .container {
  margin-top: 1.9rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.pro-list .container .lf {
  width: 23%;
  position: sticky;
  top: 3rem;
}
.pro-list .container .lf .li {
  margin-bottom: 0.85rem;
}
.pro-list .container .lf .li:last-child {
  margin-bottom: 0;
}
.pro-list .container .lf .li .select {
  margin-top: 0.35rem;
  position: relative;
  width: 100%;
}
.pro-list .container .lf .li .select::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  border-top: 0.25rem solid #999;
  border-right: 0.2rem solid transparent;
  border-left: 0.2rem solid transparent;
  border-radius: 1px;
  pointer-events: none;
  transition: all 0.4s ease;
}
.pro-list .container .lf .li .select input {
  width: 100%;
  height: 1.25rem;
  padding: 0 0.55rem;
  border: 1px solid #eee;
  background-color: #fff;
  color: #333;
  cursor: pointer;
}
.pro-list .container .lf .li .select .clear {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  border: 1px solid #fff;
  filter: brightness(.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all .4s;
}
.pro-list .container .lf .li .select .clear img {
  max-width: 50%;
  max-height: 50%;
  object-fit: contain;
}
.pro-list .container .lf .li .select .sli-cont {
  position: absolute;
  top: calc(100% + 0.2rem);
  left: 0;
  width: 100%;
  max-height: 5rem;
  background-color: #fff;
  border: 1px solid #eee;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: all 0.4s ease;
}
.pro-list .container .lf .li .select .sli-cont p {
  padding: 0 0.55rem;
  height: 1rem;
  line-height: 1rem;
  cursor: pointer;
  transition: all 0.4s ease;
}
.pro-list .container .lf .li .select .sli-cont p:hover {
  background-color: #f9f9f9;
}
.pro-list .container .lf .li .select.active::before {
  transform: translateY(-50%) rotate(180deg);
}
.pro-list .container .lf .li .select.active .sli-cont {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.pro-list .container .lf .li .select:hover .clear {
  opacity: 1;
  pointer-events: auto;
}
.pro-list .container .rg {
  width: 66%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.pro-list .container .rg .item {
  width: calc((100% - 1.1rem) / 3);
  background-color: #fff;
  transition: all 0.4s ease-in-out;
}
.pro-list .container .rg .item .pic {
  width: 100%;
  height: 6.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pro-list .container .rg .item .pic img {
  max-height: 80%;
  -o-object-fit: contain;
     object-fit: contain;
}
.pro-list .container .rg .item .intro {
  border-top: 1px solid #e5e5e5;
  width: 100%;
  height: 3.3rem;
  padding: 1.05rem 0.85rem 0.5rem;
}
.pro-list .container .rg .item .intro .h {
  color: #333333;
}
.pro-list .container .rg .item .intro .more {
  margin-top: 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #999999;
  transition: all 0.4s ease-in-out;
}
.pro-list .container .rg .item:hover {
  transform: translateY(-0.3rem);
  box-shadow: 0 0 2.25rem rgba(0, 0, 0, 0.08);
}
.pro-list .container .rg .item:hover .intro .more {
  color: var(--vi);
}

.pro-info .back{display: flex;align-items: center;padding: 2.55rem 0 0;}

.pro-info .back span{margin-left: 0.18rem;}

.pro-info .back span svg{width: 1rem;height: 0.5rem;}

.pro-info .back span svg path{fill: #000;}

.pro-info .back:hover{color: var(--vi)}

.pro-info .back:hover span svg path{fill: var(--vi)}


.pro-info .box1 {
  padding: 3.55rem 0;
}
.pro-info .box1 .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pro-info .box1 .lf {
  width: 42%;
}
.pro-info .box1 .lf .pic {
  width: 100%;
  aspect-ratio: 35/26;
}
.pro-info .box1 .lf .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.pro-info .box1 .lf .box1-swiper {
  margin-top: 0.8rem;
}
.pro-info .box1 .lf .box1-swiper .swiper-slide {
  width: 2.85rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  padding: 0.3rem 0.4rem;
  margin-right: 0.5rem;
  opacity: 0.3;
  transition: all 0.4s ease;
}
.pro-info .box1 .lf .box1-swiper .swiper-slide:last-child {
  margin-right: 0;
}
.pro-info .box1 .lf .box1-swiper .swiper-slide img {
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pro-info .box1 .lf .box1-swiper .swiper-slide.active {
  opacity: 1;
  border-color: var(--vi);
}
.pro-info .box1 .rg {
  width: 49%;
  padding-top: 0.9rem;
}
.pro-info .box1 .rg .li-box {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 0;
}
.pro-info .box1 .rg .li-box .li {
  width: 33.33%;
  line-height: 1;
}
.pro-info .box1 .rg .li-box .li .key {
  color: #999999;
}
.pro-info .box1 .rg .li-box .li .value {
  margin-top: 0.45rem;
  color: #000000;
  padding-right: .5rem;
  line-height: 1.4;
}
.pro-info .box1 .rg .more {
  margin-top: 2.6rem;
  margin-right: 1rem;
}

.pro-info .box1 .rg .mbtn{display: flex;}


.pro-info .box2 {
  padding: 2.55rem 0 2.6rem;
  background-color: #f9f9f9;
}
.pro-info .box2 .wrap {
  padding: 0 2.4rem;
}
.pro-info .box2 .li-box {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.pro-info .box2 .li-box .li {
  width: calc((100% - 1.65rem) / 4);
  background-color: #fff;
  transition: all 0.4s ease-in-out;
}
.pro-info .box2 .li-box .li .pic {
  width: 100%;
  height: 6.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pro-info .box2 .li-box .li .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  /*max-height: 80%;*/
  /*-o-object-fit: contain;*/
     /*object-fit: contain;*/
}
.pro-info .box2 .li-box .li .intro {
  border-top: 1px solid #e5e5e5;
  width: 100%;
  height: 3.3rem;
  padding: 1.05rem 0.85rem 0.5rem;
}
.pro-info .box2 .li-box .li .intro .h {
  color: #333333;
}
.pro-info .box2 .li-box .li .intro .more {
  margin-top: 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #999999;
  transition: all 0.4s ease-in-out;
}
.pro-info .box2 .li-box .li:hover {
  transform: translateY(-0.3rem);
  box-shadow: 0 0 2.25rem rgba(0, 0, 0, 0.08);
}
.pro-info .box2 .li-box .li:hover .intro .more {
  color: var(--vi);
}
.pro-info .box2 .more {
  margin: 1.75rem auto 0;
}

.news {
  padding: 3rem 0 3.25rem;
}
.news .hot-swiper {
  box-shadow: 0 0.1rem 0.75rem #f3f2f0;
}
.news .hot-swiper .swiper-pagination {
  bottom: 1rem;
  left: 1.5rem;
  width: -moz-max-content;
  width: max-content;
  line-height: 1;
}
.news .hot-swiper .swiper-pagination .swiper-pagination-bullet {
  position: relative;
  width: 0.8rem;
  height: 0.8rem;
  margin: 0 0.75rem 0 0;
  opacity: 1;
  background: none;
  transition: all 0.4s;
}
.news .hot-swiper .swiper-pagination .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.15rem;
  height: 0.15rem;
  border-radius: 50%;
  background-color: #c5c5c5;
  transition: all 0.4s;
}
.news .hot-swiper .swiper-pagination .swiper-pagination-bullet-active {
  box-shadow: 0 0 0 1px var(--vi);
}
.news .hot-swiper .swiper-pagination .swiper-pagination-bullet-active::after {
  background-color: var(--vi);
}
.news .hot-swiper .swiper-slide {
  display: flex;
  flex-wrap: wrap;
  border-radius: 0.25rem;
  overflow: hidden;
}
.news .hot-swiper .swiper-slide .intro {
  width: 44%;
  padding: 1.65rem 1.5rem 1.5rem;
  background-color: #fff;
  position: relative;
}
.news .hot-swiper .swiper-slide .intro .time {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #666666;
}
.news .hot-swiper .swiper-slide .intro .h {
  margin-top: 0.6rem;
  color: var(--vi);
  line-height: 1.3;
  max-height: 2.6em;
  overflow: hidden;
}
.news .hot-swiper .swiper-slide .intro .txt {
  margin-top: 0.45rem;
  color: #999;
  line-height: 1.6;
  max-height: 3.2em;
  overflow: hidden;
}
.news .hot-swiper .swiper-slide .intro .more {
  margin-top: 1.5rem;
}
.news .hot-swiper .swiper-slide .intro .pos-icon {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 84%;
}
.news .hot-swiper .swiper-slide .intro .pos-icon img {
  width: 100%;
}
.news .hot-swiper .swiper-slide .pic {
  width: 56%;
  aspect-ratio: 135/82;
  background-color: #f9f9f9;
}
.news .hot-swiper .swiper-slide .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.news .li-box {
  margin-top: 2.95rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 1.35rem;
}
.news .li-box .li {
  width: calc((100% - 2.7rem) / 3);
  background-color: #fff;
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: 0 0.1rem 0.75rem #f3f2f0;
}
.news .li-box .li .pic {
  width: 100%;
  height: 6.8rem;
  overflow: hidden;
}
.news .li-box .li .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.4s ease-in-out;
}
.news .li-box .li .intro {
  padding: 0.8rem 0.8rem 0.9rem;
  position: relative;
}
.news .li-box .li .intro .time {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #666666;
}
.news .li-box .li .intro .h {
  margin-top: 0.45rem;
  color: #333;
  line-height: 1.6;
  height: 3.2em;
  overflow: hidden;
  transition: all 0.4s;
}
.news .li-box .li .intro .more {
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  color: #666;
}
.news .li-box .li .intro::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background-color: var(--vi);
  transition: all 0.4s;
}
.news .li-box .li:hover .pic img {
  transform: scale(1.04);
}
.news .li-box .li:hover .intro .h {
  color: var(--vi);
}
.news .li-box .li:hover .intro::after {
  width: 100%;
}
.news .page-box {
  margin-top: 2.5rem;
}

.news-info {
  padding: 1.7rem 0 4rem;
  background-color: #f9f9f9;
}
.news-info .wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.news-info .box {
  width: 75%;
  background-color: #fff;
  padding: 1.4rem 1.6rem 4rem;
  box-shadow: 0 0.1rem 0.75rem #f3f2f0;
}
.news-info .box .tit {
  color: #000;
  line-height: 1.2;
}
.news-info .box .tag {
  margin-top: 1.2rem;
  display: flex;
  align-items: center;
}
.news-info .box .tag .time {
  color: #333333;
  margin-right: 1.95rem;
}
.news-info .box .share {
  display: flex;
  align-items: center;
}
.news-info .box .share p {
  color: #333333;
  margin-right: 0.6rem;
}
.news-info .box .cont {
  margin-top: 0.7rem;
  padding-top: 2rem;
  border-top: 1px solid #f0f0f0;
  color: #666666;
  word-break: break-word;
}
.news-info .rg {
  position: sticky;
  top: 2.3rem;
  width: 23%;
}
.news-info .recommend {
  width: 100%;
  background-color: #fff;
  padding: 1.5rem 0 0.75rem;
  border-radius: 0.25rem;
  box-shadow: 0 0.1rem 0.75rem #f3f2f0;
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.news-info .recommend:last-child {
  margin-bottom: 0;
}
.news-info .recommend .tit {
  color: #111111;
  line-height: 1.4;
  padding: 0 0.75rem;
  position: relative;
}
.news-info .recommend .tit::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background-color: var(--vi);
}
.news-info .recommend .recommend-swiper {
  margin-top: 0.6rem;
  width: calc(100% - 1.5rem);
}
.news-info .recommend .recommend-swiper .swiper-pagination {
  position: relative;
  bottom: 0;
  margin-top: 1.15rem;
  line-height: 1;
}
.news-info .recommend .recommend-swiper .swiper-pagination .swiper-pagination-bullet {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  background: none;
  margin: 0 0.15rem;
  opacity: 1;
  transition: all 0.4s;
}
.news-info .recommend .recommend-swiper .swiper-pagination .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.15rem;
  height: 0.15rem;
  background-color: #c5c5c5;
  border-radius: 50%;
  transition: all 0.4s;
}
.news-info .recommend .recommend-swiper .swiper-pagination .swiper-pagination-bullet-active {
  box-shadow: 0 0 0 1px var(--vi);
}
.news-info .recommend .recommend-swiper .swiper-pagination .swiper-pagination-bullet-active::after {
  background-color: var(--vi);
}
.news-info .recommend .recommend-swiper .swiper-slide {
  width: 100%;
  margin-right: 1rem;
}
.news-info .recommend .recommend-swiper .swiper-slide:last-child {
  margin-right: 0;
}
.news-info .recommend .recommend-swiper .swiper-slide .pic {
  width: 100%;
  height: 5rem;
  border-radius: 0.25rem;
  overflow: hidden;
}
.news-info .recommend .recommend-swiper .swiper-slide .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.4s;
}
.news-info .recommend .recommend-swiper .swiper-slide .h {
  margin-top: 0.5rem;
  color: #333333;
  transition: all 0.4s;
}
.news-info .recommend .recommend-swiper .swiper-slide .time {
  margin-top: 0.3rem;
  color: #999999;
}
.news-info .recommend .recommend-swiper .swiper-slide:hover .pic img {
  transform: scale(1.04);
}
.news-info .recommend .recommend-swiper .swiper-slide:hover .h {
  color: var(--vi);
}
.news-info .recommend .li-box {
  margin-top: 1rem;
  padding: 0 0.75rem;
}
.news-info .recommend .li-box .li {
  display: block;
  margin-bottom: 0.7rem;
  transition: all 0.4s;
}
.news-info .recommend .li-box .li:last-child {
  margin-bottom: 0;
}
.news-info .recommend .li-box .li p {
  color: #333333;
  line-height: 1.4;
  transition: all 0.4s;
}
.news-info .recommend .li-box .li span {
  margin-top: 0.3rem;
  display: block;
  color: #999999;
}
.news-info .recommend .li-box .li:hover p {
  color: var(--vi);
}
.news-info .recommend .back {
  margin-top: 1.75rem;
  width: 100%;
  height: 1.25rem;
  background-color: var(--vi);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s;
}
.news-info .recommend .back span {
  display: flex;
  margin-left: 0.5rem;
  width: 16px;
}
.news-info .info-page {
  padding-bottom: 0;
}

.service .box1 {
  padding: 3.25rem 0 3.6rem;
  background-color: #f9f9f9;
}
.service .box1 .container {
  margin-top: 1.75rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.service .box1 .container .lf {
  width: 49.5%;
}
.service .box1 .container .lf .li {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #dbdbdb;
}
.service .box1 .container .lf .li:last-child {
  margin-bottom: 0;
}
.service .box1 .container .lf .li .top-bots {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333333;
  cursor: pointer;
  transition: all 0.4s;
}
.service .box1 .container .lf .li .top-bots span {
  transition: all 0.4s;
}
.service .box1 .container .lf .li .btn-bots {
  display: none;
  margin-top: 0.75rem;
  line-height: 1.8;
  color: #666;
}
.service .box1 .container .lf .li.active .top-bots {
  color: var(--vi);
}
.service .box1 .container .lf .li.active .top-bots span {
  transform: rotate(180deg);
}
.service .box1 .container .rg {
  width: 45%;
}
.service .box1 .container .rg .pic-box {
  position: relative;
  aspect-ratio: 1/1;
}
.service .box1 .container .rg .pic-box .pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.25rem;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}
.service .box1 .container .rg .pic-box .pic.show {
  opacity: 1;
  visibility: visible;
}
.service .box1 .container .rg .pic-box .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.service .box1 .container .rg .pic-box .pic video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
     object-fit: cover;
}

.service .box2 {
  padding: 3rem 0 2.5rem;
  background-color: #fff;
}
.service .box2 .cont {
  margin-top: 1.75rem;
  color: #666666;
  line-height: 1.8;
}
.service .box2 .container {
  margin-top: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}
.service .box2 .container .lf {
  width: 49.5%;
}
.service .box2 .container .lf .li {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #dbdbdb;
}
.service .box2 .container .lf .li:last-child {
  margin-bottom: 0;
}
.service .box2 .container .lf .li .top-bots {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333333;
  cursor: pointer;
  transition: all 0.4s;
}
.service .box2 .container .lf .li .top-bots span {
  transition: all 0.4s;
}
.service .box2 .container .lf .li .btn-bots {
  display: none;
  margin-top: 0.75rem;
  line-height: 1.8;
  color: #666;
}
.service .box2 .container .lf .li.active .top-bots {
  color: var(--vi);
}
.service .box2 .container .lf .li.active .top-bots span {
  transform: rotate(180deg);
}
.service .box2 .container .rg {
  width: 45%;
}
.service .box2 .container .rg .pic-box {
  position: relative;
  aspect-ratio: 1/1;
}
.service .box2 .container .rg .pic-box .pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.25rem;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}
.service .box2 .container .rg .pic-box .pic.show {
  opacity: 1;
  visibility: visible;
}
.service .box2 .container .rg .pic-box .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.service .box2 .container .rg .pic-box .pic video{
    display: block;
    width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.service .box3 {
  padding: 2.5rem 0 5rem;
}
.service .box3 .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4.5rem;
  position: relative;
}
.service .box3 .item:nth-child(odd) {
  flex-direction: row-reverse;
}
.service .box3 .item:last-child {
  margin-bottom: 0;
}
.service .box3 .item .pic {
  width: 45%;
  border-radius: 0.25rem;
}
.service .box3 .item .pic img {
  width: 100%;
}
.service .box3 .item .intro {
  width: 46%;
}
.service .box3 .item .intro .txt {
  margin-top: 3rem;
}

.contact .box1 {
  background-color: #f9f9f9;
  padding: 4rem 0 3.5rem;
  position: relative;
  z-index: 15;
}
.contact .box1 .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.contact .box1 .lf {
  width: calc(50% - 0.25rem);
  padding-bottom: 1.35rem;
  background-color: #fff;
}
.contact .box1 .lf .top-box {
  padding: 2.05rem 0.5rem 1.25rem;
  border-bottom: 1px solid #ebebeb;
}
.contact .box1 .lf .tit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: #000;
}
.contact .box1 .lf .tit span {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background-color: var(--vi);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact .box1 .lf .tit span img {
  max-width: 60%;
  max-height: 60%;
  -o-object-fit: contain;
     object-fit: contain;
}
.contact .box1 .lf .tel {
  margin-top: 0.75rem;
  color: var(--vi);
}
.contact .box1 .lf .li-box {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 0;
  padding: 0 1.5rem;
}
.contact .box1 .lf .li-box .li {
  width: 50%;
}
.contact .box1 .lf .li-box .li .icon {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #999;
}
.contact .box1 .lf .li-box .li .icon span {
  width: 0.5rem;
  height: 0.5rem;
}
.contact .box1 .lf .li-box .li .icon span img {
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.contact .box1 .lf .li-box .li .txt {
  margin-top: 0.35rem;
  padding-left: 0.85rem;
  color: #000;
  line-height: 1.75;
}
.contact .box1 .rg {
  width: calc(50% - 0.25rem);
  background-color: #fff;
  padding: 1rem 1rem 2.5rem;
}
.contact .box1 .rg .share {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.contact .box1 .rg .share a,
.footer .rt .code .share a {
  width: 1rem;
  height: 1rem;
  margin: 0;
}
.contact .box1 .rg .share a:nth-child(1)::after,
.footer .rt .code .share a:nth-child(1)::after {
  background-image: url(../img/53.png);
}
.footer .rt .code .share a:nth-child(2)::after {
  background-image: url(../img/52.png);
}
.contact .box1 .rg .share a:hover::after,
.footer .rt .code .share a::after {
  filter: brightness(100);
}
.contact .box1 .rg .code-box {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 3.5rem;
}
.contact .box1 .rg .code-box .li {
  width: -moz-max-content;
  width: max-content;
  text-align: center;
}
.contact .box1 .rg .code-box .li div {
  width: 5.5rem;
  aspect-ratio: 1/1;
  margin: auto;
}
.contact .box1 .rg .code-box .li div img {
  width: 100%;
}
.contact .box1 .rg .code-box .li p {
  margin-top: 0.5rem;
  color: #666666;
}
.contact .box2 {
  padding: 6.95rem 0 5.35rem;
  position: relative;
}
.contact .box2 .pos-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.contact .box2 .pos-bg img {
  width: 100%;
}
.contact .box2 .wrap {
  position: relative;
  z-index: 5;
}
.contact .box2 .box {
  margin-top: 2.15rem;
  padding: 2rem 7.85rem 1.95rem;
  background-color: #fff;
  box-shadow: 0 0 1.75rem rgba(0, 0, 0, 0.08);
}
.contact .box2 .box .sub {
  margin-top: 0.5rem;
  line-height: 1.2;
  color: #666666;
}
.contact .box2 .box .form {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.contact .box2 .box .form .li {
  width: calc((100% - 0.75rem) / 2);
}
.contact .box2 .box .form .li .h {
  position: relative;
  padding-left: 0.3rem;
  color: #000000;
}
.contact .box2 .box .form .li .h span {
  position: absolute;
  left: 0;
  top: 0;
  color: #ff0000;
}
.contact .box2 .box .form .li input {
  margin-top: 0.3rem;
  width: 100%;
  height: 1.25rem;
  border: 1px solid #eaeaea;
  border-radius: 0.1rem;
  padding: 0 0.3rem;
  color: #333;
}
.contact .box2 .box .form .li textarea {
  margin-top: 0.3rem;
  width: 100%;
  height: 3.25rem;
  border: 1px solid #eaeaea;
  border-radius: 0.1rem;
  padding: 0.4rem 0.3rem;
  color: #333;
}
.contact .box2 .box .form .li.wid100 {
  width: 100%;
}
.contact .box2 .box .form .submit {
  width: 10rem;
  margin: auto;
}
.contact .box2 .box .form .tips {
  width: 100%;
  color: #999;
}

.dev .box1 {
  padding: 4rem 0 3.75rem;
}
.dev .box1 .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}
.dev .box1 .pic {
  width: 47.5%;
  border-radius: 0.25rem;
  overflow: hidden;
}
.dev .box1 .pic img {
  width: 100%;
}
.dev .box1 .intro {
  width: 38.5%;
}
.dev .box1 .intro .txt {
  margin-top: 1rem;
  color: #666666;
  line-height: 1.8;
}
.dev .box2 {
  padding: 2.8rem 0 3rem;
  background-color: #f9f9f9;
  overflow: hidden;
}
.dev .box2 .cont {
  margin: 0.5rem auto 0;
  width: 58%;
}
.dev .box2 .box2-swiper {
  margin-top: 1rem;
  overflow: initial;
}
.dev .box2 .box2-swiper .swiper-wrapper {
  transition-timing-function: linear;
}
.dev .box2 .box2-swiper .swiper-slide {
  width: 36%;
  aspect-ratio: 2/1;
  border-radius: 0.25rem;
  overflow: hidden;
  margin-right: 1.25rem;
}
.dev .box2 .box2-swiper .swiper-slide:last-child {
  margin-right: 0;
}
.dev .box2 .box2-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.dev .box3 {
  padding: 3.75rem 0 4.4rem;
}
.dev .box3 .cont {
  margin: 0.5rem auto 0;
  width: 58%;
  color: #666666;
  line-height: 1.8;
}
.dev .box3 .li-box {
  margin-top: 2.4rem;
  display: flex;
  justify-content: center;
  gap: 16%;
}
.dev .box3 .li-box .li {
  width: -moz-max-content;
  width: max-content;
  text-align: center;
}
.dev .box3 .li-box .li .num {
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: center;*/
  color: var(--vi);
  line-height: 1.2;
}
.dev .box3 .li-box .li .h1 {
  margin-top: 1rem;
  color: #000000;
}
.dev .box3 .li-box .li .txt {
  margin-top: 0.25rem;
  color: #666666;
  line-height: 1.8;
}
.dev .box4 {
  padding: 4.5rem 0 3.25rem;
  position: relative;
}
.dev .box4 .pos-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.dev .box4 .pos-bg img {
  width: 100%;
}
.dev .box4 .wrap {
  position: relative;
  z-index: 2;
}
.dev .box4 .li-box {
  margin-top: 2.75rem;
  display: flex;
  background-color: #fff;
  box-shadow: 0 0 2.3rem rgba(0, 0, 0, 0.07);
}
.dev .box4 .li-box .li {
  position: relative;
  width: 16%;
  height: 15rem;
  padding: 1rem 0.6rem;
  border-right: 1px solid #e3e3e3;
  transition: all 0.6s;
}
.dev .box4 .li-box .li:last-child {
  border-right: none;
}
.dev .box4 .li-box .li .pic {
  width: 100%;
  height: 6.5rem;
  border-radius: 0.25rem;
  overflow: hidden;
  transition: all 0.4s;
}
.dev .box4 .li-box .li .pic img {
  width: 11.8rem;
  height: 100%;
  object-fit: cover;
  max-width: initial;
}
.dev .box4 .li-box .li .h {
  margin-top: 0.75rem;
  color: #000000;
  text-align: center;
}
.dev .box4 .li-box .li .txt {
  margin-top: 0.45rem;
  color: #666;
  line-height: 1.8;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}
.dev .box4 .li-box .li .page {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.dev .box4 .li-box .li .nor {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: -moz-max-content;
  width: max-content;
  text-align: center;
  transition: all 0.4s;
}
.dev .box4 .li-box .li .nor::before {
  content: "";
  position: absolute;
  right: calc(100% + 0.65rem);
  top: 50%;
  transform: translateY(-50%);
  width: 0.85rem;
  height: 1px;
  background-color: #d8d8d8;
}
.dev .box4 .li-box .li .nor::after {
  content: "";
  position: absolute;
  left: calc(100% + 0.65rem);
  top: 50%;
  transform: translateY(-50%);
  width: 0.85rem;
  height: 1px;
  background-color: #d8d8d8;
}
.dev .box4 .li-box .li .hov {
  position: absolute;
  bottom: 0.8rem;
  left: 1.5rem;
  display: flex;
  align-items: center;
  color: #666666;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}
.dev .box4 .li-box .li .hov .cur {
  color: var(--vi);
  margin-right: 0.15rem;
}
.dev .box4 .li-box .li.active {
  width: 36%;
  padding: 1rem 1.55rem;
}
.dev .box4 .li-box .li.active .txt {
  opacity: 1;
  visibility: visible;
  transition: all 0.4s 0.2s;
}
.dev .box4 .li-box .li.active .nor {
  opacity: 0;
  visibility: hidden;
}
.dev .box4 .li-box .li.active .hov {
  opacity: 1;
  visibility: visible;
}/*# sourceMappingURL=style.css.map */

.footer__p-pc {
    display: block;
}
.footer__p-mobile {
    display: none;
}


.pro-list .container .lf .back {
    margin-top: 0.85rem;
    margin-bottom: 0;
    width: 100%;
    height: 1.25rem;
    background-color: var(--vi);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s;
}
.pro-list .container .lf .back span {
    display: flex;
    margin-left: 0.2rem;
    width: 16px;
}



/*2025-11-04*/
/*.footer .top{padding: 70px 0 50px;border-top: 1px solid #CFCFCF;border-bottom: none;}*/

/*.footer .fhd{position: relative;z-index: 2;padding: 47px 0 35px;display: flex;align-items: center;justify-content: space-between;}*/

/*.footer .fhd .logo{width: 145px;}*/

/*.footer .fhd .logo img{width: 100%;}*/

/*.footer .fhd .rf{position: relative;}*/

/*.footer .fhd .rf .rtp{display: flex;align-items: center;padding: 10px 20px;border-radius: 50px;border: 1px solid #D7D7D7;}*/

/*.footer .fhd .rf .rtp span{line-height: calc(30 / 16);min-width: calc(170 / 16 * 1em);padding-right: 0.5em;}*/

/*.footer .fhd .rf .rtp svg{width: calc(11 / 16 * 1em);}*/

/*.footer .fhd .rf .rbt{position: absolute;top: 100%;left: 0;width: 100%;border-radius: 25px;border: 1px solid #D7D7D7;padding: 10px 20px;background: #fff;display: none;}*/

/*.footer .fhd .rf .rbt a{display: block;line-height: calc(30 / 16);}*/

/*.footer .fhd .rf .rbt a:hover{color: var(--vi)}*/

/*.footer .flinks{border-bottom: 1px solid #CFCFCF;display: flex;align-items: center;flex-wrap: wrap;padding-bottom: 29px;}*/

/*.footer .flinks .set{line-height: calc(19 / 16);color: #666;margin-right: 21px;}*/

/*.footer .flinks .det{display: flex;flex-wrap: wrap;align-items: center;}*/

/*.footer .flinks .det a{max-height: 41px;margin-right: 21px;max-width: 113px;}*/
.footer .top{padding: 1.75rem 0 1.25rem;border-top: 1px solid #CFCFCF;border-bottom: none;}

.footer .fhd{position: relative;z-index: 2;padding: 1.18rem 0 0.88rem;display: flex;align-items: center;justify-content: space-between;}

.footer .fhd .logo{width: 3.63rem;}

.footer .fhd .logo img{width: 100%;}

.footer .fhd .rf{position: relative;}

.footer .fhd .rf .rtp{display: flex;align-items: center;padding: 0.25rem 0.50rem;border-radius: 1.25rem;border: 1px solid #D7D7D7;}

.footer .fhd .rf .rtp span{line-height: calc(30 / 16);min-width: calc(170 / 16 * 1em);padding-right: 0.5em;}

.footer .fhd .rf .rtp svg{width: calc(11 / 16 * 1em);}

.footer .fhd .rf .rbt{position: absolute;top: 100%;left: 0;width: 100%;border-radius: 0.63rem;border: 1px solid #D7D7D7;padding: 0.25rem 0.50rem;background: #fff;display: none;}

.footer .fhd .rf .rbt a{display: block;line-height: calc(30 / 16);}

.footer .fhd .rf .rbt a:hover{color: var(--vi)}

.footer .flinks{border-bottom: 1px solid #CFCFCF;display: flex;align-items: center;flex-wrap: wrap;padding-bottom: 0.72rem;}

.footer .flinks .set{line-height: calc(19 / 16);color: #666;margin-right: 0.53rem;}

.footer .flinks .det{display: flex;flex-wrap: wrap;align-items: center;}

.footer .flinks .det a{max-height: 1.02rem;margin-right: 0.53rem;max-width: 2.83rem;}

.footer .flinks .det a img{position: relative;animation: breathe 3s ease-in-out infinite;}

@keyframes breathe {
    0% {
        /* 初始状态 - 正常大小 */
        transform: scale(1);
    }
    50% {
        /* 中间状态 - 放大1.2倍 */
        transform: scale(1.2);
    }
    100% {
        /* 结束状态 - 回到正常大小 */
        transform: scale(1);
    }
}





.index .box1 .phbox{display: none;}




/*移动端*/
@media screen and (max-width: 768px) {
    .footer__p-pc {
        display: none;
    }
    .footer__p-mobile {
        display: block;
        padding-left: .7rem;
    }
    .footer__p-mobile p {
        padding-left: 0!important;
    }
    .index .box1 .li-box {
        flex-direction: column;
        height: auto;
        display: none;
    }
    .index .box1 .phbox{display: block;margin-top: 0.9rem}
    
    .index .box1 .phbox .swiper{overflow: hidden;}
    
    .index .box1 .phbox .li{width: 17.25rem;
        height: 13.75rem;display: block;}
        
    .index .box1 .phbox .li img, 
    .index .box1 .phbox .li video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .index .box1 .phbox .li p {
        position: absolute;
        bottom: 1.05rem;
        left: 0px;
        width: 100%;
        padding: 0px 1rem;
        color: rgb(255, 255, 255);
        font-size: .75rem;
        line-height: 1;
        text-align: center;
        transition: 0.4s;
    }
    
    .index .box1 .phbox .swiper-pagination{position: relative;bottom: 0;margin-top: 0.25rem;}
    
    .index .box1 .li-box .li {
        width: 17.25rem;
        height: 13.75rem;
        margin-bottom: .5rem;
    }
    .index .box1 .li-box .li.active {
                width: 17.25rem;
        height: 13.75rem;
    }
    .index .box1 .li-box .li.active p {
        text-align: center;
    }
    .index .box1 .li-box .li p {
        font-size: .75rem;
    }
    .index .box2 .container {
        flex-direction: column;
    }
    .swiper-container-vertical>.swiper-wrapper {
        flex-direction: row;
    }
    
    /*.index .box2 .container .lf .box2-lf-swiper .swiper-slide {*/
    /*    display: flex;*/
        /*flex-direction: column;*/
    /*    width: fit-content;*/
    /*    margin-right: 0.5rem;*/
    /*}*/
    .index .box2 .container .lf .box2-lf-swiper .swiper-slide p{flex: 1;}
    
    /*.box2-lf-swiper .swiper-wrapper{flex-wrap: wrap;}*/
    
    /*.index .box2 .container .lf .box2-lf-swiper .swiper-slide{width: 100%;margin-right: 0;justify-content: center;}*/
    
    .index .box2 .container .lf .box2-lf-swiper .swiper-slide .icon svg{stroke-dasharray: 0;
    stroke-dashoffset: 0;}
    
    /*.index .box2 .container .lf .box2-lf-swiper .swiper-slide.active .icon svg{animation: none;}*/
    
    /*.index .box2 .container .lf .box2-lf-swiper .swiper-slide p{flex: auto;}*/
    
    .index .box2 .container .lf{padding-top: 0;}
    
    .index .box2 .container .lf .box2-lf-swiper .swiper-pagination {
        position: relative;
        bottom: 0;
    }
    
    .index .box2 .container .lf .box2-lf-swiper .swiper-slide{margin-bottom: 0.75rem;}
}