﻿@charset "utf-8";
/* Meixin about page ? adapted from cnjuki nabout layout */
.page-about .about-seo-h1{position:absolute;width:0;height:0;overflow:hidden;}
.page-about .about-container{width:100%;overflow:hidden;}
.page-about .about-container img{max-width:100%;vertical-align:top;}
.page-about .about-container ul,.page-about .about-container li{list-style:none;margin:0;padding:0;}
.page-about .img-cover{background-size:cover;background-position:center;background-repeat:no-repeat;}
.nbanner {
  width: 100%;
  position: relative;
  z-index: 1;
}
.nbanner > img {
  width: 100%;
  display: block;
}
.nbanner .banner-word{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top:0;
  color: #fff;
}
.nbanner .banner-word .banner-path{
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  font-size: var(--body-fs, 16px);
}
.nbanner .banner-word .banner-path .site-wrap{
  height: 50px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.nbanner .banner-word .banner-path a{
  display: block;
  color: #fff;
}
.nbanner .banner-word .banner-path .icon-jiantou{
  font-size: 12px;
  margin:0 10px;
}
.nbanner .banner-word .banner-type{
  height: calc(100% - 51px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.nbanner .banner-word .banner-type .title{
  border:2px solid rgba(255, 255, 255, .35);
  padding:5px 30px;
  border-radius: 40px;
}
.nbanner .banner-word .banner-type .content{
  font-size: 42px;
  line-height: 42px;
  margin-top: 40px;
  font-weight: 700;
  text-align: left;
}
@media (max-width: 1280px) {
  .nbanner {
    height:50vh;
  }
  .nbanner > img {
    height: 100%;
    object-fit: cover;
  }
  .nbanner .banner-word .banner-type{
    align-items: center;
  }
  .nbanner .banner-word .banner-type .content{
    margin-top: 4%;
    font-size: 32px;
    line-height: 32px;
    text-align: center;
  }
}
@media (max-width: 992px) {

}
@media (max-width: 750px) {
  .nbanner {
    height:38vh;
  }
  .nbanner .banner-word .banner-path .site-wrap{
    height: 36px;
  }
  .nbanner .banner-word .banner-type{
    height: calc(100% - 37px);
  }
  .nbanner .banner-word .banner-type .title{
    padding:3px 20px;
  }
  .nbanner .banner-word .banner-type .content{
    font-size: 20px;
    line-height: 24px;
  }
}

.ny{
  width: 100%;
  padding: 72px 0 48px;
  overflow: hidden;
}
@media (max-width: 1280px) {
  .ny{
    padding: 48px 0 32px;
  }
}
@media (max-width: 750px) {
  .ny{
    padding: 28px 0 20px;
  }
}

.ntype{
  width: 100%;
  border-bottom: 1px #eee solid;
  overflow: hidden;
}
.ntype ul{
  display: flex;
  justify-content: center;
  align-items: center;
}
.ntype li{
  line-height: 60px;
  padding:0 30px;
}
.ntype a{
  display: block;
  font-weight: 700;
  position: relative;
}
.ntype a:after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  background: #C8161D;
  bottom: 0;
  left: 0;
  transform-origin: center;
  transform: scale(0, 1);
  transition: transform 0.3s cubic-bezier(1, 0, 0, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.ntype li:hover a,
.ntype li.active a{
  color: #C8161D;
}
.ntype li:hover a:after,
.ntype li.active a:after {
  transform-origin: center;
  transform: scale(1);
}
@media (max-width: 1280px) {
  .ntype li{
    line-height: 50px;
    padding:0 20px;
  }
}
@media (max-width: 992px) {

}
@media (max-width: 750px) {
  .ntype li{
    line-height: 40px;
    padding:0 10px;
  }
}

.ntitle{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ntitle.center{
  text-align: center;
  align-items: center;
  justify-content: center;
}
.ntitle .title{
  font-size: 36px;
  line-height: 36px;
  font-weight: 900;
}
.ntitle .line{
  display: flex;
  margin-top: 20px;
  align-items: center;
}
.ntitle.center .line{
  justify-content: center;
}
.ntitle .line .line1,
.ntitle .line .line2,
.ntitle .line .line3{
  width: 36px;
  height: 5px;
}
.ntitle .line .line1{
  background: #C8161D;
}
.ntitle .line .line2{
  background: #f9f9f9;
}
.ntitle .line .line3{
  background: #1B2F60;
}
@media (max-width: 1280px) {
  .ntitle .title{
    font-size: 28px;
    line-height: 28px;
  }
  .ntitle .line .line1,
  .ntitle .line .line2,
  .ntitle .line .line3{
    width: 30px;
    height: 4px;
  }
}
@media (max-width: 992px) {

}
@media (max-width: 750px) {
  .ntitle .title{
    font-size: 20px;
    line-height: 24px;
  }
  .ntitle .line{
    margin-top: 10px;
  }
  .ntitle .line .line1,
  .ntitle .line .line2,
  .ntitle .line .line3{
    width: 20px;
    height: 2px;
  }
}

.npage {
  width: 100%;
  font-size: 0;
  text-align: center;
  margin-top: 2%;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.npage span,
.npage a {
  width: 44px;
  height: 44px;
  line-height: 42px;
  border: 1px solid #eee;
  margin: 4px 5px;
  font-size: 16px;
  color: #666;
  transition: all 0.4s ease;
  border-radius: 22px;
  background-color: #fff;
  display: block;
}
.npage a.first,
.npage a.last {
  display: none;
}
.npage a.prev,
.npage a.next {
  width: 100px;
}
.npage span:hover,
.npage span.active,
.npage span.on,
.npage a:hover,
.npage a.active,
.npage a.on {
  border-color: #C8161D;
  background-color: #C8161D;
  color: #fff;
}
.npage a.disable {
  pointer-events: none;
}
@media (max-width: 1280px) {
  .npage span,
  .npage a {
    margin: 4px 2px;
    width: 34px;
    height: 34px;
    line-height: 32px;
    border-radius: 17px;
    font-size: 14px;
  }
  .npage a.prev,
  .npage a.next {
    width: 64px;
  }
}
@media (max-width: 992px) {
}
@media (max-width: 750px) {
  .npage span,
  .npage a {
    margin: 4px 2px;
    width: 28px;
    height: 28px;
    line-height: 26px;
    border-radius: 14px;
  }
}

.nabout{
  width: 100%;
  overflow: hidden;
}
.nabout .about-box1{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  overflow: hidden;
}
.nabout .about-box1 .left{
  width: 50%;
  padding-bottom: 56px;
}
.nabout .about-box1 .left .title{
  display: flex;
  align-items: center;
  color: #666;
}
.nabout .about-box1 .left .title em{
  margin-right: 5px;
  font-size: 20px;
}
.nabout .about-box1 .left .subtitle{
  font-size: 36px;
  line-height: 36px;
  font-weight: 700;
  margin:20px 0 40px 0;
}
.nabout .about-box1 .left .arrow{
  width: 80px;
  height: 80px;
  border:1px #C8161D dashed;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:8px;
  margin-top: 40px;
}
.nabout .about-box1 .left .arrow em{
  width: 62px;
  line-height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #C8161D;
  color: #fff;
  font-size: 24px;
}
.nabout .about-box1 .right{
  width: 44%;
  position: relative;
}
.nabout .about-box1 .right .img1{
  width: 100%;
  display: block;
}
.nabout .about-box1 .right .img2{
  width: 54%;
  position: absolute;
  left: 50%;
  bottom:1rem;
  margin-left: -27%;
  animation: img360 8s linear infinite;
}
@keyframes img360{
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(360deg);
  }
}
.nabout .about-box2{
  width: 100%;
  overflow: hidden;
}
.nabout .about-box2 .bgimg {
    width: 100%;
    height: 44rem;
    position: relative;
    overflow: hidden;
}
.nabout .about-box2 .bgimg .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    background-attachment: fixed;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}
.nabout .about-box2 .content{
    margin-top: -110px;
    position: relative;
    z-index: 4;
    padding: 80px 80px 0 80px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nabout .about-box2--nobg{
  margin-top: 56px; /* 与企业文化等模块间距一致 */
}
.nabout .about-box2--nobg .content{
    margin-top: 0;
    /* 内容宽与首页 site-wrap 一致：仅保留上下内边距 */
    padding: 56px 0 48px;
}
.nabout .about-box2 .content .left{
    width: 44%;
    position: relative;
}
.nabout .about-box2 .content .left .image{
  position: relative;
  border:1px #eee solid;
  background: #f5f5f5;
  overflow: hidden;
  /* 以横图比例为准统一高度；竖图左右留白完整显示 */
  aspect-ratio: 470 / 343;
  width: 100%;
}
.nabout .about-box2 .content .left .image img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  background: transparent;
}
.nabout .about-box2 .content .left .swiper-slide{
  width: 100%;
}
.nabout .about-box2 .content .left .name{
  background: #C8161D;
  text-align: center;
  color: #fff;
  font-size: var(--body-fs, 16px);
  line-height: 46px;
  margin-top: 4px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  display: block;
}
.nabout .about-box2 .content .left .swiper-button-next,
.nabout .about-box2 .content .left .swiper-button-prev{
  color: #fff;
  background: rgba(200, 22, 29, .85);
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: 2px;
}
.nabout .about-box2 .content .left .swiper-button-next:after,
.nabout .about-box2 .content .left .swiper-button-prev:after{
  font-size: 16px;
}
.nabout .about-box2 .content .right{
  width: 50%;
}
.nabout .about-box2 .content .right li{
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
}
.nabout .about-box2 .content .right li:last-child{
  margin-bottom: 0;
}
.nabout .about-box2 .content .right .icon i{
  font-size: 60px;
  color: #C8161D;
}
.nabout .about-box2 .content .right .word{
  margin-left: 20px;
}
.nabout .about-box2 .content .right .word .word1 {
  color: #C8161D;
}
.nabout .about-box2 .content .right .word .word1 .counter{
  font-size: 60px;
  font-weight: 700;
}
.nabout .about-box3{
  width: 100%;
  margin-top: 56px;
  background: url(../images/about/culture-bg.jpg) no-repeat center;
  background-size: cover;
  height: calc(760rem / 16);
  overflow: hidden;
}
.nabout .about-box3 ul{
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  border-left:1px solid rgba(255, 255, 255, .3);
}
.nabout .about-box3 li{
  width: 33.33333333%;
  color: #fff;
  text-align: center;
  border-right:1px solid rgba(255, 255, 255, .3);
  padding:110px 60px;
  position: relative;
}
.nabout .about-box3 li:after{
  content: "";
  width: 100%;
  height: 0;
  background: linear-gradient(to bottom, transparent, #C8161D);
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transition: all 400ms linear;
  -moz-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
}
.nabout .about-box3 li:hover:after{
  opacity: 1;
  height: 60%;
}
.nabout .about-box3 .title{
  position: relative;
  z-index: 1;
  position: relative;
}
.nabout .about-box3 .title span{
  position: relative;
}
.nabout .about-box3 .title span:after{
  content: "";
  width: 50px;
  height: 50px;
  top:0;
  right: -20px;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: #C8161D;
  opacity: 0;
  -webkit-transition: all 400ms linear;
  -moz-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
}
.nabout .about-box3 li:hover .title span:after{
  top:-20px;
  opacity: 1;
}
.nabout .about-box3 .content{
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 30px;
  position: relative;
  z-index: 1;
}
.nabout .about-box4{
  padding: 64px 0;
  background: #f9f9f9;
  overflow: hidden;
}
.nabout .about-box4 .title{
  color: #666;
}
.nabout .about-box4 .title i{
  margin-right: 5px;
  font-size: 20px;
}
.nabout .about-box4 .subtitle{
  font-size: 36px;
  line-height: 36px;
  font-weight: 700;
  margin:20px 0 40px 0;
}
.nabout .about-box4 .content li{
  display: flex;
  align-items: center;
}
.nabout .about-box4 .content .image{
  width: 60%;
}
.nabout .about-box4 .content .image img{
  width: 100%;
  display: block;
}
.nabout .about-box4 .content .word{
  width: 50%;
  background: #fff;
  margin-left: -10%;
  padding:60px;
}
.nabout .about-box4 .content .word .t{
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
}
.nabout .about-box4 .content .word .c{
  margin-top: 10px;
}
.nabout .about-box4 .content .btns{
  margin-top: 40px;
  display: flex;
  align-items: center;
}
.nabout .about-box4 .content .btns .swiper-button-prev,
.nabout .about-box4 .content .btns .swiper-button-next{
  position: static;
  width: 40px;
  height: 40px;
  background: #C8161D;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-top: 0;
}
.nabout .about-box4 .content .btns .swiper-button-prev:after,
.nabout .about-box4 .content .btns .swiper-button-next:after{
  font-size: 16px;
  color: #fff;
}
.nabout .about-box5{
  margin-top: 56px;
  overflow: hidden;
}
.nabout .about-box5 .title{
  color: #666;
}
.nabout .about-box5 .title i{
  margin-right: 5px;
  font-size: 20px;
}
.nabout .about-box5 .subtitle{
  font-size: 36px;
  line-height: 36px;
  font-weight: 700;
  margin:20px 0 40px 0;
}
.nabout .about-box5 .content{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.nabout .about-box5 .content img{
  max-width: 100%;
  display: block;
}
.nabout .about-box5 .content .img2{
  position: absolute;
  left: 0;
  top:0;
}
@media (max-width: 1280px) {
  .nabout .about-box1{
    flex-direction: column;
  }
  .nabout .about-box1 .left,
  .nabout .about-box1 .right{
    width: 100%;
  }
  .nabout .about-box1 .left{
    padding-bottom: 28px;
  }
  .nabout .about-box1 .left .subtitle{
    margin:2% 0 4% 0;
    font-size: 28px;
    line-height: 28px;
  }
  .nabout .about-box1 .left .arrow{
    width: 64px;
    height: 64px;
    margin-top: 4%;
  }
  .nabout .about-box1 .left .arrow em{
    width: 46px;
    line-height: 46px;
  }
  .nabout .about-box2 .bgimg {
    height: 32rem;
  }
  .nabout .about-box2 .content{
    padding:8% 3% 0 3%;
    flex-direction: column;
  }
  .nabout .about-box2.about-history .about-history__panel{
    display: block;
    flex-direction: unset;
  }
  .nabout .about-box2 .content .left,
  .nabout .about-box2 .content .right{
    width: 100%;
  }
  .nabout .about-box2 .content .right{
    margin-top: 4%;
  }
  .nabout .about-box2 .content .right li{
    margin-bottom: 4%;
  }
  .nabout .about-box2 .content .right .icon i{
    font-size: 50px;
  }
  .nabout .about-box2 .content .right .word{
    margin-left: 15px;
  }
  .nabout .about-box2 .content .right .word .word1 .counter{
    font-size: 50px;
  }
  .nabout .about-box3{
    margin-top: 28px;
    height: auto;
  }
  .nabout .about-box2--nobg{
    margin-top: 28px;
  }
  .nabout .about-box2--nobg .content{
    padding: 36px 0 32px;
  }
  .nabout .about-box3 ul{
    flex-direction: column;
    border:none;
  }
  .nabout .about-box3 li{
    width: 100%;
    padding: 32px 0;
    border:none;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
  }
  .nabout .about-box3 li:after{
    display: none;
  }
  .nabout .about-box3 .content{
    margin-top: 2%;
    font-size: 28px;
  }
  .nabout .about-box3 .title span:after{
    width: 36px;
    height: 36px;
    right: -15px;
    top:-15px;
    opacity: 1;
  }
  .nabout .about-box3 li:hover .title span:after{
    top:-15px;
  }
  .nabout .about-box4{
    padding: 40px 0;
  }
  .nabout .about-box4 .subtitle{
    margin:2% 0 4% 0;
    font-size: 28px;
    line-height: 28px;
  }
  .nabout .about-box4 .content li{
    flex-direction: column;
  }
  .nabout .about-box4 .content .image{
    width: 100%;
  }
  .nabout .about-box4 .content .word{
    width: 100%;
    padding:3%;
    margin-left: 0;
  }
  .nabout .about-box4 .content .word .t{
    font-size: 20px;
  }
  .nabout .about-box4 .content .btns{
    margin-top: 4%;
  }
  .nabout .about-box4 .content .btns .swiper-button-prev,
  .nabout .about-box4 .content .btns .swiper-button-next{
    width: 32px;
    height: 32px;
  }
  .nabout .about-box4 .content .btns .swiper-button-prev:after,
  .nabout .about-box4 .content .btns .swiper-button-next:after{
    font-size: 14px;
  }
  .nabout .about-box5{
    margin-top: 36px;
  }
  .nabout .about-box5 .subtitle{
    margin:2% 0 4% 0;
    font-size: 28px;
    line-height: 28px;
  }
}
@media (max-width: 992px) {
  .nabout .about-box1 .left .subtitle{
    font-size: 24px;
    line-height: 24px;
  }
  .nabout .about-box3 .content{
    font-size: 24px;
  }
  .nabout .about-box4 .subtitle{
    font-size: 24px;
    line-height: 24px;
  }
  .nabout .about-box5 .subtitle{
    font-size: 24px;
    line-height: 24px;
  }
}
@media (max-width: 750px) {
  .nabout .about-box1 .left .subtitle{
    font-size: 20px;
  }
  .nabout .about-box1 .left .arrow{
    width: 48px;
    height: 48px;
    padding:6px;
  }
  .nabout .about-box1 .left .arrow em{
    width: 34px;
    line-height: 34px;
    font-size: 12px;
  }
  .nabout .about-box2 .bgimg {
    height: 24rem;
  }
  .nabout .about-box2 .content .left .name{
    line-height: 40px;
  }
  .nabout .about-box2 .content .right .icon i{
    font-size: 32px;
  }
  .nabout .about-box2 .content .right .word{
    margin-left: 10px;
  }
  .nabout .about-box2 .content .right .word .word1 .counter{
    font-size: 32px;
  }
  .nabout .about-box3 .content{
    font-size: 20px;
  }
  .nabout .about-box3 .title span:after{
    width: 30px;
    height: 30px;
    right: -10px;
    top:-10px;
  }
  .nabout .about-box3 li:hover .title span:after{
    top:-10px;
  }
  .nabout .about-box4 .subtitle{
    font-size: 20px;
  }
  .nabout .about-box4 .content .word .t{
    font-size: 16px;
  }
  .nabout .about-box4 .content .word .c{
    margin-top: 5px;
  }
  .nabout .about-box4 .content .btns .swiper-button-prev,
  .nabout .about-box4 .content .btns .swiper-button-next{
    width: 28px;
    height: 28px;
    margin-right: 5px;
  }
  .nabout .about-box5 .subtitle{
    font-size: 20px;
  }
}

.nprotype{
  width: 100%;
  margin-top: 30px;
  position: relative;
  overflow: hidden;
}
.nprotype:after{
  content: "";
  width: 100%;
  height: 1px;
  background: #eee;
  position: absolute;
  left: 0;
  top:34px;
}
.nprotype .site-wrap{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.nprotype a{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.nprotype .swiper-container{
  width: calc(100% - 166px);
}
.nprotype li.active a{
  color: #C8161D;
}
.nprotype .icon{
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nprotype .icon i{
  font-size: 30px;
  color: #C8161D;
}
.nprotype li.active .icon{
  background:#C8161D;
}
.nprotype li.active .icon i{
  color: #fff;
}
.nprotype .text{
  margin-top: 10px;
}
.nprotype .swiper-button-prev,
.nprotype .swiper-button-next{
  position: relative;
  width: 48px;
  height: 48px;
  background: #eee;
  border-radius: 50%;
  margin-top: 10px;
}
.nprotype .swiper-button-prev:after,
.nprotype .swiper-button-next:after{
  font-size: 16px;
  color: #C8161D;
}
@media (max-width: 1280px) {
  .nprotype{
    margin-top: 4%;
  }
  .nprotype:after{
    top:24px;
  }
  .nprotype .swiper-container{
    width: calc(100% - 112px);
  }
  .nprotype .icon{
    width: 48px;
    height: 48px;
  }
  .nprotype .icon i{
    font-size: 24px;
  }
  .nprotype .swiper-button-prev,
  .nprotype .swiper-button-next{
    width: 36px;
    height: 36px;
    margin-top: 5px;
  }
  .nprotype .swiper-button-prev:after,
  .nprotype .swiper-button-next:after{
    font-size: 16px;
  }
}
@media (max-width: 992px) {
}
@media (max-width: 750px) {
  .nprotype:after{
    top:16px;
  }
  .nprotype .swiper-container{
    width: calc(100% - 68px);
  }
  .nprotype .icon{
    width: 32px;
    height: 32px;
  }
  .nprotype .icon i{
    font-size: 16px;
  }
  .nprotype .text{
    margin-top: 5px;
  }
  .nprotype .swiper-button-prev,
  .nprotype .swiper-button-next{
    width: 24px;
    height: 24px;
    margin-top: 5px;
  }
  .nprotype .swiper-button-prev:after,
  .nprotype .swiper-button-next:after{
    font-size: 12px;
  }
}


/* 企业荣誉：证书单独一行（全宽，一行四个） */
.nabout .about-box2--nobg .content.about-honor{
  align-items: stretch;
  gap: 0;
  padding-bottom: 24px;
}
.nabout .about-box2--nobg .content.about-honor .left{
  width: 100%;
  max-width: none;
  margin: 0;
}
.nabout .about-box2--nobg .content.about-honor .left .image{
  aspect-ratio: 3 / 4;
}
.nabout .about-box2--nobg .content.about-honor .left .name{
  font-size: 14px;
  line-height: 40px;
}
.nabout .about-box2--nobg .content.about-honor .left .swiper-button-next,
.nabout .about-box2--nobg .content.about-honor .left .swiper-button-prev{
  /* 相对证书图区域垂直居中（扣除底部标题条高度） */
  top: calc((100% - 44px) / 2);
  margin-top: 0;
  transform: translateY(-50%);
}

/* 生产能力：一行三个，精简卡片 */
.about-cap-block{
  margin-top: 8px;
  padding: 0 0 56px;
}
.about-cap-block .mx-cap{
  width: var(--site-width-pct);
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.mx-cap__cols{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
  counter-reset: mx-cap;
}
.mx-cap__col{
  display: contents;
}
.mx-cap__card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
  padding: 28px 24px 24px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 4px;
  counter-increment: mx-cap;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.mx-cap__card:before{
  content: counter(mx-cap, decimal-leading-zero);
  display: block;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: #c8c8c8;
  line-height: 1;
}
.mx-cap__card:after{
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 2px;
  background: #C8161D;
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: left center;
  transition: opacity .25s ease, transform .28s ease;
}
.mx-cap__card:hover{
  border-color: #e0e0e0;
  box-shadow: 0 14px 32px rgba(26, 26, 26, .06);
  transform: translateY(-3px);
}
.mx-cap__card:hover:after{
  opacity: 1;
  transform: scaleX(1);
}
.mx-cap__zh{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.35;
  letter-spacing: .02em;
}
.mx-cap__en{
  margin: 6px 0 0;
  font-size: 13px;
  color: #999;
  line-height: 1.4;
  letter-spacing: .04em;
}
.page-about .about-container .mx-cap__list,
.nabout .mx-cap__list{
  margin: 18px 0 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid #f0f0f0;
  flex: 1 1 auto;
}
.nabout .about-box2 .content .right.mx-cap .mx-cap__list li,
.about-cap-block .mx-cap__list li{
  position: relative;
  display: block;
  align-items: unset;
  margin: 0 0 8px;
  padding: 0 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}
.nabout .about-box2 .content .right.mx-cap .mx-cap__list li:before,
.about-cap-block .mx-cap__list li:before{
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #C8161D;
  opacity: .7;
}
.nabout .about-box2 .content .right.mx-cap .mx-cap__list li:last-child,
.about-cap-block .mx-cap__list li:last-child{
  margin-bottom: 0;
}
.lang-en .mx-cap__zh{ font-size: 16px; }
.lang-en .mx-cap__en{ display: none; }
@media (prefers-reduced-motion: reduce) {
  .mx-cap__card,
  .mx-cap__card:after{ transition: none; }
  .mx-cap__card:hover{ transform: none; }
}
@media (max-width: 1280px) {
  .mx-cap__cols{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 750px) {
  .about-cap-block{ padding-bottom: 36px; }
  .mx-cap__cols{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .mx-cap__card{ padding: 22px 18px 18px; }
  .mx-cap__card:hover{
    transform: none;
    box-shadow: none;
  }
  .mx-cap__card:after{ left: 18px; right: 18px; }
  .mx-cap__zh{ font-size: 16px; }
}

/* 兼容旧左右布局残留 */
.nabout .about-box2--nobg .content{
  align-items: flex-start;
  gap: 36px;
}
.nabout .about-box2 .content .right.mx-cap{
  width: 54%;
}
@media (max-width: 1280px) {
  .nabout .about-box2 .content .right.mx-cap{ width: 100%; }
  .nabout .about-box2--nobg .content{ gap: 24px; }
}


/* culture 4 columns */
.nabout .about-box3 ul.culture-4 li{
  width: 25%;
  padding: 80px 36px;
}
.nabout .about-box3 .content{
  font-size: 22px;
}
/* 平板起已纵向堆叠，条目需 100% 宽（勿用 50%，否则两侧留白） */
@media (max-width: 1280px) {
  .nabout .about-box3 ul.culture-4 li{
    width: 100%;
    padding: 40px 0;
  }
}

/* map logo overlay */
.nabout .about-box5 .about-map{
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background: #000;
}
.nabout .about-box5 .about-map > img.map-bg{
  width: 100%;
  display: block;
}
.nabout .about-box5 .about-map .map-logo-mask{
  position: absolute;
  left: 61%;
  top: 30%;
  width: 14%;
  height: 10%;
  background: #000;
  z-index: 2;
}
.nabout .about-box5 .about-map .map-logo{
  position: absolute;
  left: 61.5%;
  top: 29%;
  width: 12%;
  height: auto;
  z-index: 3;
  object-fit: contain;
}

/* section anchors offset */
.nabout [id^="about"]{
  scroll-margin-top: 80px;
}
/* company intro paragraph */
.nabout .about-box1 .left .content{
  color: #666;
  line-height: 1.8;
  font-size: var(--body-fs, 16px);
}
.nabout .about-box1 .left .content p{
  margin: 0 0 14px;
}
.nabout .about-box1 .left .content p:last-child{
  margin-bottom: 0;
}

/* culture bg from inline style */
.nabout .about-box3{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.lang-en .nabout .about-box1 .left .subtitle{
  font-size: 30px;
  line-height: 1.25;
}
.lang-en .nabout .about-box3 .content{
  font-size: 18px;
}
.lang-en .nabout .about-box2 .content .right .word .word2{
  font-size: var(--body-fs, 16px);
}

/* culture readability overlay */
.nabout .about-box3{
  position: relative;
}
.nabout .about-box3:before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 0;
}
.nabout .about-box3 > ul{
  position: relative;
  z-index: 1;
}
/* 覆盖 about-container ul{margin:0}，与其它模块共用 site-wrap 容器宽度 */
.nabout .about-box3 > ul.site-wrap{
  margin-left: auto;
  margin-right: auto;
  width: var(--site-width-pct);
  max-width: var(--site-max-width);
  box-sizing: border-box;
}
.nabout .about-box3 .content{
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
}


/* ========== 发展历程 PPT 时间轴（原样式 + 左右切换） ========== */
.nabout .about-box2.about-history{
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: transparent;
  height: auto;
  max-height: none;
}
.nabout .about-box2.about-history .bgimg{
  display: block;
}
.nabout .about-box2.about-history .about-history__panel{
  display: block;
  width: var(--site-width-pct);
  max-width: var(--site-max-width);
  margin: -110px auto 0;
  padding: 72px 48px 88px;
  background: #fff;
  position: relative;
  z-index: 4;
  box-sizing: border-box;
}
.about-history__head{
  margin-bottom: 40px;
  text-align: center;
}
.about-history__title{
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
  letter-spacing: .06em;
}
.about-history__title:after{
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 14px auto 0;
  background: #C8161D;
  border-radius: 2px;
}
.about-history__sub{
  margin: 12px 0 0;
  font-size: 14px;
  color: #999;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.mx-timeline{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mx-timeline__nav{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  background: #fff;
  color: #666;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 3;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.mx-timeline__chevron{
  display: block;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.mx-timeline__nav--prev .mx-timeline__chevron{
  transform: rotate(135deg);
  margin-left: 3px;
}
.mx-timeline__nav--next .mx-timeline__chevron{
  transform: rotate(-45deg);
  margin-right: 3px;
}
.mx-timeline__nav:hover{
  color: #fff;
  background: #C8161D;
  border-color: #C8161D;
}
.mx-timeline__nav.swiper-button-disabled{
  opacity: .35;
  cursor: default;
  pointer-events: none;
}
.mx-timeline__swiper{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  height: 400px;
  padding: 0 4px;
  box-sizing: border-box;
}
.mx-timeline__line{
  position: absolute;
  left: 2%;
  right: 2%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: #e6e6e6;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.mx-timeline__line:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, #C8161D 0%, #e85a5f 55%, #f0c4c6 100%);
  transition: width 1.1s cubic-bezier(.22,.61,.36,1);
}
.mx-timeline.is-inview .mx-timeline__line:before{
  width: 100%;
}
.mx-timeline__swiper .swiper-wrapper{
  align-items: stretch;
  height: 100%;
}
.mx-timeline__item{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  height: 100%;
  padding: 0 4px;
  box-sizing: border-box;
  cursor: pointer;
}
/* 轴上圆点（沿用修改时的点样式） */
.mx-timeline__dot{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.mx-timeline__dot i{
  display: block;
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #bbb;
  box-shadow: 0 0 0 6px #fff;
  transition: background .25s ease, transform .25s ease;
}
.mx-timeline__dot i:after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #C8161D;
  opacity: 0;
  transform: scale(2.4);
  transition: opacity .25s ease;
}
.mx-timeline__item.swiper-slide-active .mx-timeline__dot i,
.mx-timeline__item.is-active .mx-timeline__dot i{
  background: #C8161D;
  transform: scale(1.15);
}
.mx-timeline__item.swiper-slide-active .mx-timeline__dot i:after,
.mx-timeline__item.is-active .mx-timeline__dot i:after{
  opacity: .22;
}

/* 卡片：年份在卡片内，active / inactive 区分 */
.mx-timeline__card{
  position: absolute;
  left: 50%;
  width: 100%;
  max-width: 168px;
  padding: 16px 14px 14px;
  transform: translateX(-50%);
  text-align: center;
  box-sizing: border-box;
  background: #f6f6f6;
  border: 1px solid #ececec;
  border-radius: 10px;
  opacity: .48;
  box-shadow: none;
  transition: transform .28s ease, opacity .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.mx-timeline__date{
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: #b0b0b0;
  transition: color .28s ease;
}
.mx-timeline__zh{
  font-size: 14px;
  font-weight: 700;
  color: #777;
  line-height: 1.5;
  transition: color .28s ease;
}
.mx-timeline__en{
  margin-top: 6px;
  font-size: 12px;
  color: #aaa;
  line-height: 1.45;
  transition: color .28s ease;
}
.lang-en .mx-timeline__zh{ font-size: 13px; }
.lang-en .mx-timeline__en{ font-size: 11px; }

.mx-timeline__item--above .mx-timeline__card{
  bottom: calc(50% + 28px);
}
.mx-timeline__item--below .mx-timeline__card{
  top: calc(50% + 28px);
}
.mx-timeline__item--above .mx-timeline__card:after,
.mx-timeline__item--below .mx-timeline__card:before{
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  height: 20px;
  background: #d8d8d8;
  transform: translateX(-50%);
  transition: height .28s ease, background .28s ease, opacity .28s ease;
}
.mx-timeline__item--above .mx-timeline__card:after{
  bottom: -22px;
}
.mx-timeline__item--below .mx-timeline__card:before{
  top: -22px;
}

/* Active 卡片 */
.mx-timeline__item.swiper-slide-active .mx-timeline__card,
.mx-timeline__item.is-active .mx-timeline__card{
  opacity: 1;
  background: #fff;
  border-color: rgba(200, 22, 29, .22);
  box-shadow: 0 12px 28px rgba(26, 26, 26, .08);
}
.mx-timeline__item.swiper-slide-active .mx-timeline__date,
.mx-timeline__item.is-active .mx-timeline__date{
  color: #C8161D;
}
.mx-timeline__item.swiper-slide-active .mx-timeline__zh,
.mx-timeline__item.is-active .mx-timeline__zh{
  color: #1a1a1a;
}
.mx-timeline__item.swiper-slide-active .mx-timeline__en,
.mx-timeline__item.is-active .mx-timeline__en{
  color: #888;
}
.mx-timeline__item.swiper-slide-active .mx-timeline__card:after,
.mx-timeline__item.swiper-slide-active .mx-timeline__card:before,
.mx-timeline__item.is-active .mx-timeline__card:after,
.mx-timeline__item.is-active .mx-timeline__card:before{
  background: linear-gradient(180deg, #C8161D, rgba(200, 22, 29, .35));
  height: 22px;
}
.mx-timeline__item.swiper-slide-active.mx-timeline__item--above .mx-timeline__card:after,
.mx-timeline__item.is-active.mx-timeline__item--above .mx-timeline__card:after{
  background: linear-gradient(180deg, rgba(200, 22, 29, .2), #C8161D);
}

/* PC 入场：交替上下滑入 */
@media (min-width: 991px) {
  .mx-timeline__item .mx-timeline__card{
    opacity: 0;
  }
  .mx-timeline__item--above .mx-timeline__card{
    transform: translate(-50%, 18px);
  }
  .mx-timeline__item--below .mx-timeline__card{
    transform: translate(-50%, -18px);
  }
  .mx-timeline.is-inview .mx-timeline__item .mx-timeline__card{
    opacity: .48;
  }
  .mx-timeline.is-inview .mx-timeline__item.swiper-slide-active .mx-timeline__card,
  .mx-timeline.is-inview .mx-timeline__item.is-active .mx-timeline__card{
    opacity: 1;
  }
  .mx-timeline.is-inview .mx-timeline__item--above .mx-timeline__card,
  .mx-timeline.is-inview .mx-timeline__item--below .mx-timeline__card{
    transform: translateX(-50%);
  }
  .mx-timeline.is-inview .mx-timeline__item:nth-child(1) .mx-timeline__card{ transition-delay: .05s; }
  .mx-timeline.is-inview .mx-timeline__item:nth-child(2) .mx-timeline__card{ transition-delay: .12s; }
  .mx-timeline.is-inview .mx-timeline__item:nth-child(3) .mx-timeline__card{ transition-delay: .19s; }
  .mx-timeline.is-inview .mx-timeline__item:nth-child(4) .mx-timeline__card{ transition-delay: .26s; }
  .mx-timeline.is-inview .mx-timeline__item:nth-child(5) .mx-timeline__card{ transition-delay: .33s; }
  .mx-timeline.is-inview .mx-timeline__item:nth-child(6) .mx-timeline__card{ transition-delay: .4s; }
  .mx-timeline.is-inview .mx-timeline__item:nth-child(7) .mx-timeline__card{ transition-delay: .47s; }
  .mx-timeline.is-inview .mx-timeline__item:nth-child(8) .mx-timeline__card{ transition-delay: .54s; }
  .mx-timeline__item .mx-timeline__card{
    transition: opacity .45s ease, transform .45s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease;
  }

  .mx-timeline__item:hover .mx-timeline__card{
    opacity: .85;
  }
  .mx-timeline__item.swiper-slide-active:hover .mx-timeline__card,
  .mx-timeline__item.is-active:hover .mx-timeline__card{
    opacity: 1;
  }
  .mx-timeline__item:hover .mx-timeline__date{
    color: #C8161D;
  }
  .mx-timeline__item:hover .mx-timeline__zh{
    color: #1a1a1a;
  }
  .mx-timeline__item--above:hover .mx-timeline__card{
    transform: translate(-50%, -4px);
  }
  .mx-timeline__item--below:hover .mx-timeline__card{
    transform: translate(-50%, 4px);
  }
  .mx-timeline__item:hover .mx-timeline__dot i{
    background: #C8161D;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-timeline__line:before,
  .mx-timeline__item .mx-timeline__card{
    transition: none !important;
  }
  .mx-timeline__item .mx-timeline__card{
    opacity: .48 !important;
  }
  .mx-timeline__item.swiper-slide-active .mx-timeline__card,
  .mx-timeline__item.is-active .mx-timeline__card{
    opacity: 1 !important;
  }
  .mx-timeline__item--above .mx-timeline__card,
  .mx-timeline__item--below .mx-timeline__card{
    transform: translateX(-50%) !important;
  }
  .mx-timeline__line:before{ width: 100%; }
}

@media (max-width: 1200px) {
  .mx-timeline__swiper{
    height: 360px;
  }
  .mx-timeline__zh{ font-size: 13px; }
  .mx-timeline__date{ font-size: 20px; }
  .mx-timeline__card{ max-width: 150px; padding: 14px 12px 12px; }
}
@media (max-width: 990px) {
  .nabout .about-box2.about-history .about-history__panel{
    padding: 40px 4% 50px;
    margin-top: -80px;
  }
  .about-history__head{ text-align: left; margin-bottom: 28px; }
  .about-history__title{ font-size: 28px; letter-spacing: .04em; }
  .about-history__title:after{ margin-left: 0; margin-right: auto; }
  .about-history__sub{ letter-spacing: .08em; }
  .mx-timeline{
    gap: 8px;
  }
  .mx-timeline__nav{
    width: 36px;
    height: 36px;
  }
  .mx-timeline__swiper{
    height: 340px;
    padding: 0;
  }
  .mx-timeline__line{
    left: 4%;
    right: 4%;
  }
  .mx-timeline__line:before{ width: 100%; }
  .mx-timeline__item .mx-timeline__card{
    opacity: .48;
  }
  .mx-timeline__item.swiper-slide-active .mx-timeline__card,
  .mx-timeline__item.is-active .mx-timeline__card{
    opacity: 1;
  }
  .mx-timeline__item--above .mx-timeline__card,
  .mx-timeline__item--below .mx-timeline__card{
    transform: translateX(-50%);
  }
  .nabout .about-box2--nobg{
    margin-top: 20px;
  }
  .nabout .about-box2--nobg .content{
    padding: 32px 0 20px;
  }
  .about-cap-block{
    margin-top: 4px;
    padding-bottom: 32px;
  }
  .nabout .about-box3{
    margin-top: 20px;
  }
  .nabout .about-box3 > ul.site-wrap{
    width: var(--site-width-pct);
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
  }
  .nabout .about-box3 li{
    padding: 28px 0;
    box-sizing: border-box;
  }
  .nabout .about-box4{
    padding: 32px 0;
  }
  .nabout .about-box5{
    margin-top: 28px;
  }
}
@media (max-width: 750px) {
  .nabout .about-box2.about-history .about-history__panel{
    padding: 28px 16px 32px;
    margin-top: -64px;
  }
  .about-history__title{ font-size: 24px; }
  .about-history__title:after{ width: 36px; margin-top: 10px; }
  .about-history__head{ margin-bottom: 20px; }
  .mx-timeline__swiper{
    height: 320px;
  }
  .mx-timeline__card{ max-width: 136px; padding: 12px 10px 10px; }
  .mx-timeline__date{ font-size: 18px; margin-bottom: 6px; }
  .mx-timeline__zh{ font-size: 13px; }
  .mx-timeline__en{ font-size: 11px; margin-top: 4px; }
  .nabout .about-box1 .left{
    padding-bottom: 16px;
  }
  .nabout .about-box2--nobg{
    margin-top: 16px;
  }
  .nabout .about-box2--nobg .content{
    padding: 24px 0 16px;
  }
  .about-cap-block{
    padding-bottom: 28px;
  }
  .nabout .about-box3{
    margin-top: 16px;
  }
  .nabout .about-box3 li{
    padding: 22px 0;
  }
  .nabout .about-box4{
    padding: 28px 0;
  }
  .nabout .about-box5{
    margin-top: 24px;
  }
}
