html.visible {
  overflow: auto;
}
.sec-full {
  width: 100%;
  height: 100%;
}

/* 历史时间轴样式 */
.history-timeline {
  position: relative;
  margin-top: calc(60 * var(--rpx));
}

.history-swiper {
  height: calc(450 * var(--rpx));
}

.history-swiper .swiper-slide {
  width: 40%;
}

.timeline-item {
  flex-direction: column;
  align-items: flex-end;
  padding: calc(40 * var(--rpx));
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  gap: 10px;
}

.timeline-year {
  font-size: var(--font-size-72);
  ;
  font-weight: 500;
  color: var(--primary);
  min-width: calc(200 * var(--rpx));
}

.timeline-content {
  width: 100%;
}

.timeline-image {
  width: calc(270 * var(--rpx));
  height: calc(176 * var(--rpx));
  position: relative;
}

.timeline-image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 40px;
  transform: translate(-50%, 50%);
  background-color: rgba(42, 43, 138, 0.8);
}

.timeline-text {
  flex: 1;
}

.timeline-text p {
  font-size: var(--font-size-18);
  line-height: 1.6;
  color: #333;
}

.history-swiper .swiper-slide:nth-child(2n) .timeline-item {
  align-items: flex-start;
  flex-direction: column-reverse;
}

.history-swiper .swiper-slide:nth-child(2n) .timeline-content {
  align-items: flex-end;
}

.history-swiper .swiper-slide:nth-child(2n) .timeline-image::after {
  left: unset;
  right: 0;
  transform: translate(50%, 50%);
}

/* 时间轴指示器 */
.timeline-indicators {
  margin-top: calc(60 * var(--rpx));
  padding: calc(30 * var(--rpx)) 0;
  border-top: 1px solid #e0e0e0;
}

.timeline-years {
  display: flex;
  flex-wrap: wrap;
  gap: calc(20 * var(--rpx));
}

.year-item {
  padding: calc(8 * var(--rpx)) 0;
  font-size: var(--font-size-14);
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.year-item:hover,
.year-item.active {
  color: var(--primary);
}

/* 真空技术无处不在 - 样式 */
.sec-aboutus-1 {
  height: 100dvh;
  position: relative;
  min-height: calc(600 * var(--rpx));
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  overflow: hidden;
  padding-top: var(--header-h);
}

.sec-aboutus-1 .earth-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.sec-aboutus-1 .earth-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-aboutus-1 .hero-content {
  position: relative;
  z-index: 2;
  color: white;
  height: 100%;
}

.sec-aboutus-1 .hero-content .hero-text {
  text-align: center;
}

.sec-aboutus-1 .hero-title {
  font-size: var(--font-size-68);
  margin-bottom: calc(24 * var(--rpx));
  line-height: 1.2;
  opacity: -1;
}

.sec-aboutus-1 .hero-title.animate {
  animation: moveUp 0.8s ease-out .6s both;
}

.sec-aboutus-1 .hero-subtitle {
  font-size: var(--font-size-24);
  margin-bottom: calc(80 * var(--rpx));
  opacity: 0.9;
  max-width: calc(600 * var(--rpx));
  font-weight: 300;
  text-align: center;
  opacity: -1;
}

.sec-aboutus-1 .hero-subtitle.animate {
  animation: moveUp 0.8s ease-out .8s both;
}

.sec-aboutus-1 .hero-stats {
  display: flex;
  width: 100%;
  /* gap: calc(80 * var(--rpx)); */
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  opacity: -1;
}

.sec-aboutus-1 .hero-stats.animate {
  animation: moveUp 0.8s ease-out 1.6s both;
}

@keyframes moveUp {
  0% {
    opacity: -1;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.sec-aboutus-1 .stat-item {
  flex: 1 0 0;
  padding: clamp(calc(20 * var(--rpx)), 3.125vw, calc(60 * var(--rpx))) calc(20 * var(--rpx));
}

.sec-aboutus-1 .stat-item+.stat-item {
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.sec-aboutus-1 .stat-number {
  width: max-content;
  font-size: var(--font-size-72);
  ;
  color: #fff;
  margin-bottom: calc(8 * var(--rpx));
  line-height: 1;
  position: relative;
}

.sec-aboutus-1 .stat-label {
  font-size: var(--font-size-18);
  opacity: 0.8;
}

.sec-aboutus-1 .stat-number span {
  font-size: var(--font-size-18);
  position: absolute;
  top: 0;
  right: -20px;
}

.sec-aboutus-1 .stat-item:first-child .stat-number span {
  top: unset;
  bottom: 0;
}

.sec-aboutus-2 {
  min-height: calc(100vh - var(--header-h));
  height: auto;
  padding: clamp(calc(40 * var(--rpx)), 6.25vw, calc(120 * var(--rpx))) 0;
  background-color: #f8f9fa;
}

.sec-aboutus-2 .company-intro-content {
  align-items: center;
  gap: calc(80 * var(--rpx));
}

.sec-aboutus-2 .company-intro-title {
  font-size: var(--font-size-48);
  line-height: 1.3;
  margin-bottom: calc(40 * var(--rpx));
  color: #333;
}

.sec-aboutus-2 .company-intro-desc {
  width: 50%;
  margin-bottom: calc(60 * var(--rpx));
}

.sec-aboutus-2 .company-intro-desc p {
  font-size: var(--font-size-18);
  line-height: 1.8;
  font-weight: 300;
  color: var(--theme-color);
  margin-bottom: calc(20 * var(--rpx));
}

.sec-aboutus-2 .company-intro-signature {
  font-size: var(--font-size-18);
  color: var(--primary);
}

.sec-aboutus-2 .signature-name {
  margin-bottom: calc(8 * var(--rpx));
}

.sec-aboutus-3 {
  position: relative;
  overflow: hidden;
}

.sec-aboutus-3 .sec-area {
  position: absolute;
  right: max(0px, calc((100% - var(--max-content-width)) / 2));
  bottom: max(30px, 10%);
  align-items: flex-end;
}

/* 右侧视频区域 */
.sec-aboutus-3 .hero-video {
  width: calc(400 * var(--rpx));
  height: calc(250 * var(--rpx));
  margin-bottom: calc(10 * var(--rpx));
}

.sec-aboutus-3 .video-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 calc(20 * var(--rpx)) calc(40 * var(--rpx)) rgba(0, 0, 0, 0.3);
}

.sec-aboutus-3 .video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-aboutus-3 .video-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.sec-aboutus-3 .play-button {
  cursor: pointer;
  transition: transform 0.3s ease;
  margin-bottom: calc(16 * var(--rpx));
}

.sec-aboutus-3 .play-button:hover {
  transform: scale(1.1);
}

.sec-aboutus-3 .video-label {
  color: white;
  font-size: var(--font-size-12);
  font-weight: 300;
}

/* 主要内容文字 */

.sec-aboutus-3 .hero-text {
  max-width: calc(600 * var(--rpx));
  color: white;
}

.sec-aboutus-3 .hero-title {
  font-size: var(--font-size-68);
  line-height: 1.2;
  margin-bottom: calc(40 * var(--rpx));
}

.sec-aboutus-3 .hero-description {
  font-size: var(--font-size-18);
  line-height: 1.8;
  font-weight: 300;
  opacity: 0.95;
}

.sec-aboutus-3 .hero-description p {
  margin: 0;
}

/* 底部品牌大字 */
.sec-aboutus-3 .hero-brand {
  width: 70vw;
  margin-right: calc((100vw - var(--max-content-width)) / -2);
}

/* 历史英雄区域 */
.sec-aboutus-4 {
  position: relative;
  overflow: hidden;
  justify-content: center;
}

/* 左侧内容区域 */
.sec-aboutus-4 .history-content {
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: calc(80 * var(--rpx));
  z-index: 2;
}

.sec-aboutus-4 .history-text {
  max-width: calc(500 * var(--rpx));
}

.sec-aboutus-4 .history-title {
  font-size: var(--font-size-48);
  line-height: 1.2;
  margin-bottom: calc(40 * var(--rpx));
  color: #333;
}

.sec-aboutus-4 .history-description {
  font-size: var(--font-size-16);
  line-height: 1.8;
  color: #666;
  margin-bottom: calc(40 * var(--rpx));
}

.sec-aboutus-4 .history-description p {
  margin-bottom: calc(16 * var(--rpx));
}

.sec-aboutus-4 .history-description p:last-child {
  margin-bottom: 0;
}

.sec-aboutus-4 .history-action {
  margin-top: calc(40 * var(--rpx));
}

.sec-aboutus-4 .history-background {
  display: flex;
  align-items: center;
}

.sec-aboutus-4 .history-btn {
  padding: calc(12 * var(--rpx)) calc(32 * var(--rpx));
  background-color: transparent;
  border: 1px solid var(--theme-color);
  border-radius: calc(25 * var(--rpx));
  font-size: var(--font-size-14);
  color: var(--theme-color);
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.sec-aboutus-4 .history-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background-color: rgba(0, 124, 186, 0.05);
}

/* 右侧图片区域 */
.sec-aboutus-4 .history-images {
  display: flex;
  flex-direction: column;
  width: 60%;
  height: 100%;
  z-index: 1;
}

.sec-aboutus-4 .main-image {
  width: 100%;
  overflow: hidden;
  z-index: 4;
}

.sec-aboutus-4 .main-image img {
  width: calc(540 * var(--rpx));
  aspect-ratio: 640 / 417;
  text-align: left;
}

.sec-aboutus-4 .small-image {
  width: 100%;
  text-align: right;
  overflow: hidden;
  z-index: 3;
  margin-top: -5%;
}

.sec-aboutus-4 .small-image img {
  width: calc(380 * var(--rpx));
  aspect-ratio: 480 / 312;
}

.common-page-link .page-container {
  gap: max(30px, 5%);
}

.common-link-wrap {
  flex-shrink: 0;
  width: 50%;
}

.common-link-item {
  border-top: 1px solid #f9f9f9;
  border-bottom: 1px solid #f9f9f9;
  padding: 20px 10px;
}

.common-link-item+.common-link-item {
  margin-top: -1px;
}

.common-link-item a {
  font-weight: 300;
  font-size: var(--font-size-24);
  color: var(--theme-color);
}

.common-link-item .icon {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  border: 1px solid var(--primary);
  margin-right: 10px;
  display: none;
}

.common-link-item span {
  font-size: 14px;
  font-weight: 300;
}

.page-container {
  margin-top: max(30px, 5%);
}

.common-link-item.active a,
.common-link-item:hover a {
  color: var(--primary);
}

.common-link-item.active .icon {
  display: flex;
}

/* 产业布局区域样式 */
.sec-industrial-1 {
  position: relative;
}

.industrial-content {
  position: relative;
  margin-bottom: max(30px, 10%);
}

/* 地区导航标签 */
.region-tabs {
  display: flex;
  gap: calc(30 * var(--rpx));
  margin-bottom: calc(40 * var(--rpx));
}

.region-tab {
  background: transparent;
  border: none;
  font-size: var(--font-size-16);
  color: var(--theme-color);
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.region-tab.active {
  color: var(--primary);
  font-weight: 500;
}

.region-tab.active::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary);
}

.region-tab:hover:not(.active) {
  color: #666;
}

/* 主要内容布局 */
.sec-industrial-1 .address-wrap {
  display: flex;
  align-items: flex-start;
}

/* 左侧公司列表 */
.sec-industrial-1 .company-list {
  width: calc(640 * var(--rpx));
}

.sec-industrial-1 .company-card {
  display: flex;
  margin-bottom: calc(20 * var(--rpx));
  background: #f9f9f9;
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.sec-industrial-1 .company-card:hover {
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(0, 0, 0, 0.1);
  transform: translateY(calc(-2 * var(--rpx)));
}

.sec-industrial-1 .company-card.active {
  border-color: var(--primary);
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(0, 124, 186, 0.15);
}

.sec-industrial-1 .company-image {
  width: calc(180 * var(--rpx));
  overflow: hidden;
  flex-shrink: 0;
}

.sec-industrial-1 .company-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-industrial-1 .company-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(40 * var(--rpx)) calc(20 * var(--rpx));
}

.sec-industrial-1 .company-name {
  font-size: var(--font-size-18);
  font-weight: 600;
  color: var(--theme-color);
  margin-bottom: calc(8 * var(--rpx));
  line-height: 1.3;
}

.sec-industrial-1 .company-desc {
  font-size: var(--font-size-14);
  color: var(--theme-color);
  line-height: 1.5;
}

.sec-industrial-1 .company-link {
  font-size: var(--font-size-12);
  text-decoration: none;
  transition: color 0.3s ease;
  gap: 5px;
  line-height: 1;
  color: var(--theme-color);
  margin-top: calc(8 * var(--rpx));
}

.sec-industrial-1 .company-link:hover {
  color: #005a8b;
  text-decoration: underline;
}

/* 右侧地球图 */
.sec-industrial-1 .global-map {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(500 * var(--rpx));
}

.sec-industrial-1 .map-container {
  position: relative;
  width: calc(400 * var(--rpx));
  height: calc(400 * var(--rpx));
}

.sec-industrial-1 .earth-sphere {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 calc(20 * var(--rpx)) calc(40 * var(--rpx)) rgba(0, 0, 0, 0.1);
}

.sec-industrial-1 .earth-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* 同心圆装饰 */
.sec-industrial-1 .concentric-circles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sec-industrial-1 .circle {
  position: absolute;
  border: 1px solid rgba(0, 124, 186, 0.2);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sec-industrial-1 .circle-1 {
  width: calc(450 * var(--rpx));
  height: calc(450 * var(--rpx));
}

.sec-industrial-1 .circle-2 {
  width: calc(500 * var(--rpx));
  height: calc(500 * var(--rpx));
}

.sec-industrial-1 .circle-3 {
  width: calc(550 * var(--rpx));
  height: calc(550 * var(--rpx));
}

/* 地理位置标记 */
.sec-industrial-1 .location-marker {
  position: absolute;
  width: calc(12 * var(--rpx));
  height: calc(12 * var(--rpx));
  cursor: pointer;
  z-index: 10;
}

.sec-industrial-1 .marker-dot {
  width: 100%;
  height: 100%;
  background-color: var(--primary);
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
}

.sec-industrial-1 .marker-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(20 * var(--rpx));
  height: calc(20 * var(--rpx));
  background-color: rgba(0, 124, 186, 0.3);
  border-radius: 50%;
  animation: pulse 2s infinite;
  z-index: 1;
}

.sec-intro {
  font-size: var(--font-size-20);
  font-weight: 300;
  text-align: center;
  padding-bottom: max(30px, 5%);
  border-bottom: 1px solid #e8e8e8;
  color: var(--theme-color);
}

.sec-title {
  font-size: var(--font-size-24);
  color: var(--primary);
  margin-bottom: calc(50 * var(--rpx));
}

.sec-industrial-2 {
  margin-bottom: max(30px, 10%);
}

.sec-sustainable-1 {
  height: 100vh;
  height: 100dvh;
  position: relative;
  padding-top: var(--header-h);
}

.sec-sustainable-1 .bg-wrap,
.sec-sustainable-1 .txt-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sec-sustainable-1 .txt-wrap .item {
  padding: 0 20px;
  position: relative;
}

.sec-sustainable-1 .txt-wrap .item-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.sec-sustainable-1 .txt-wrap .item-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-sustainable-1 .bg-wrap::after,
.sec-sustainable-1 .bg-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 33.33%;
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 1;
  opacity: 0;
  transform: translateY(100%);
  transition: 1s linear;
}

.sec-sustainable-1 .bg-wrap::after {
  left: 66.66%;
}

.sec-sustainable-1 .bg-wrap .item {
  transition: 0.3s;
}

.bg-wrap.active .item.active {
  width: 100%;
}

.bg-wrap.active .item:not(.active) {
  width: 0;
}

.bg-wrap.active::after,
.bg-wrap.active::before {
  opacity: 1;
  transform: translateY(0);
}

.sec-sustainable-1 .item {
  width: 33.33%;
  height: 100%;
  color: #fff;
  position: relative;
}

.sec-sustainable-1 .item .txt {
  text-align: center;
}

.sec-sustainable-1 .item .title {
  font-size: var(--font-size-68);
}

.sec-sustainable-1 .item .title_sub {
  font-size: var(--font-size-20);
  font-weight: 300;
}

.sec-sustainable-1 .item .intro {
  font-size: var(--font-size-18);
  font-weight: 300;
  margin: max(30px, 5%) 0;
  display: none;
}

.sec-sustainable-1 .item .more-btn {
  border-color: #fff;
  color: #fff;
  margin: 0 auto;
  display: none;
}

.txt-wrap .item.active .intro,
.txt-wrap .item.active .more-btn {
  display: block;
}

.sec-sustainable-1 .item .letter {
  width: 100%;
  height: 30.74%;
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/* .sec-sustainable-1 .item .letter img {
  backdrop-filter: blur(30px);
} */

.sec-sustainable-2 .card-wrap {
  --c: 4;
  --g: clamp(20px, 5.20833vw, calc(100 * var(--rpx)));
  gap: var(--g);
}

.sec-sustainable-2 .item {
  width: var(--w);
  padding: calc(30 * var(--rpx)) 0;
}

.sec-sustainable-2 .item img {
  max-width: 60%;
}

.sec-sustainable-2 .icon {
  height: 40%;
}

.sec-sustainable-2 .title {
  text-align: center;
  position: relative;
  color: #2f8dcd;
  font-size: var(--font-size-30);
  font-weight: 300;
  padding-top: calc(30 * var(--rpx));
  margin-top: calc(50 * var(--rpx));
}

.sec-sustainable-2 .title::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 2em;
  height: 1px;
  background-color: #2f8dcd;
}

.sec-environment-1 .container {
  position: relative;
}

.sec-environment-1 .card-wrap {
  gap: calc(20 * var(--rpx));
}

/* 新闻网格布局 */
.common-layout-list {
  --column: 2;
}

/* 新闻卡片基础样式 */
.common-layout-list .item {
  background: #f7f7f7;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  padding: calc(40 * var(--rpx));
}

.common-layout-list .item.hover:hover {
  background-color: var(--primary);
}

/* 新闻图片 */
.common-layout-list .news-image {
  width: calc(270 * var(--rpx));
  flex-shrink: 0;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
}

.common-layout-list .news-image img {
  transition: transform 0.3s ease;
}

.common-layout-list .item.hover:hover .news-image img {
  transform: scale(1.05);
}

/* 新闻内容 */
.common-layout-list .news-content {
  font-weight: 300;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--theme-color);
}

.common-layout-list .item.hover:hover .news-content,
.common-layout-list .item.hover:hover .news-content a {
  color: #fff;
}

/* 新闻元信息 */
.common-layout-list .news-meta {
  margin-bottom: calc(12 * var(--rpx));
}

.common-layout-list .news-date {
  font-size: var(--font-size-14);
  color: rgba(37, 37, 37, .5);
  gap: 5px;
}

/* 新闻标题 */
.common-layout-list .news-title {
  font-size: var(--font-size-24);
  line-height: 1.4;
  margin-bottom: calc(6 * var(--rpx));
}

/* 新闻摘要 */
.common-layout-list .news-excerpt {
  font-size: var(--font-size-14);
  color: rgba(37, 37, 37, .7);
  margin-bottom: calc(36 * var(--rpx));
}

/* 新闻操作 */
.common-layout-list .news-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.common-layout-list .news-link {
  color: var(--theme-color);
  font-size: var(--font-size-14);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.3s ease;
  gap: max(5px, 30 * var(--rpx));
  line-height: 1;
}

.common-layout-list .news-link img {
  filter: url(#gray-overlay);
  color: rgb(37, 37, 37);
}

.common-layout-list .item.hover:hover .news-title {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}

.common-layout-list .item.hover:hover .news-excerpt {
  color: rgba(255, 255, 255, 0.8);
}

.common-layout-list .item.hover:hover .news-link img,
.common-layout-list .item.hover:hover .news-date img {
  filter: url(#white-overlay);
}

.common-layout-list .news-share {
  background: none;
  border: none;
  font-size: var(--font-size-16);
  cursor: pointer;
  padding: calc(8 * var(--rpx));
  border-radius: calc(4 * var(--rpx));
  transition: background-color 0.3s ease;
}

.common-layout-list .news-share:hover {
  background-color: #f0f0f0;
}

/* 新闻分类标识 */
.news-card[data-category="company-news"]::before {
  content: "公司新闻";
  position: absolute;
  top: calc(12 * var(--rpx));
  left: calc(12 * var(--rpx));
  background-color: var(--primary);
  color: white;
  font-size: var(--font-size-10);
  padding: calc(4 * var(--rpx)) calc(8 * var(--rpx));
  border-radius: calc(4 * var(--rpx));
  z-index: 10;
}

.news-card[data-category="technology"]::before {
  content: "技术动态";
  position: absolute;
  top: calc(12 * var(--rpx));
  left: calc(12 * var(--rpx));
  background-color: #28a745;
  color: white;
  font-size: var(--font-size-10);
  padding: calc(4 * var(--rpx)) calc(8 * var(--rpx));
  border-radius: calc(4 * var(--rpx));
  z-index: 10;
}

.news-card[data-category="business"]::before {
  content: "商业资讯";
  position: absolute;
  top: calc(12 * var(--rpx));
  left: calc(12 * var(--rpx));
  background-color: #ffc107;
  color: #333;
  font-size: var(--font-size-10);
  padding: calc(4 * var(--rpx)) calc(8 * var(--rpx));
  border-radius: calc(4 * var(--rpx));
  z-index: 10;
}

.sec-aboutus-detail {
  color: var(--theme-color);
  background-color: #f7f7f7;
  position: relative;
  padding-top: var(--header-h);
}

.sec-aboutus-detail .time {
  text-align: center;
}

.sec-aboutus-detail .title {
  font-size: var(--font-size-48);
  text-align: center;
  padding: 0 5%;
}

.sec-aboutus-detail .intro {
  color: var(--primary);
  padding: 20px 0;
  border-bottom: 1px solid #666;
}

.sec-aboutus-detail-more .sec-top .title {
  font-size: calc(42 * var(--rpx));
  font-size: var(--font-size-42);
  color: var(--theme-color);
}

.sec-aboutus-detail-more .card-wrap {
  --column: 3;
  --gap: calc(80 * var(--rpx))
}

.sec-aboutus-detail-more .item {
  flex-direction: column;
  padding: 0 0 calc(30 * var(--rpx));
  background-color: unset;
  position: relative;
}

.sec-aboutus-detail-more .item::after {
  content: '';
  width: 100%;
  height: 1px;
  background: #e8e8e8;
  position: absolute;
  bottom: 0;
  left: 0;
}

.sec-aboutus-detail-more .news-link .icon {
  --l: calc(30 * var(--rpx));
  width: var(--l);
  height: var(--l);
  border: 1px solid var(--border);
  border-radius: calc(5 * var(--rpx));
}

.sec-aboutus-detail-more .news-link .icon img {
  height: 50%;
  filter: url(#primary-overlay);
}

.sec-aboutus-detail-more .common-layout-list .news-image {
  width: 100%;
  aspect-ratio: 480 / 283;
}

.sec-procurement .item:nth-child(even) {
  flex-direction: row-reverse;
}

.sec-procurement .item .txt {
  --p-t: clamp(20px, 3.125vw, calc(60 * var(--rpx)));
  --p-r: clamp(calc(32 * var(--rpx)), 4.16666vw, calc(80 * var(--rpx)));
  --p-b: var(--p-t);
  --p-l: clamp(20px, calc(40 * var(--rpx)), calc((100% - var(--max-content-width)) / 2));
  width: 50%;
  padding: var(--p-t) var(--p-r) var(--p-b) var(--p-l);
}

.sec-procurement .item:nth-of-type(even) .txt {
  padding-left: var(--p-r);
  padding-right: var(--p-l);
}

.sec-procurement .item .txt .title {
  font-size: var(--font-size-48);
  color: var(--theme-color);
  margin-bottom: 20px;
}

.sec-procurement .item .txt li {
  list-style-type: disc;
  list-style-position: inside;
  font-size: var(--font-size-18);
  color: var(--theme-color);
  font-weight: 300;
}

.sec-procurement .item .pic {
  width: 50%;
  height: calc(540 * var(--rpx));
}

.sec-procurement .item .intro {
  margin-bottom: calc(24 * var(--rpx));
}

.sec-procurement .item .more-btn {
  background-color: transparent;
  margin-top: auto;
}

/* ULVAC字母样式 */
.sec-aboutus-1 .logo-letters {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.sec-aboutus-1 .logo-letters.animate {
  animation: moveDown 0.8s ease-out both;
}

@keyframes moveDown {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  100% {
    opacity: -1;
    transform: translate(-50%, 50px);
  }
}

.sec-aboutus-1 .letter {
  opacity: 0;
  transform: translateY(-50px) scale(0);
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.sec-aboutus-1 .letter.animate {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 字母特效 */
.sec-aboutus-1 .letter-u.animate {
  animation: letterGlow 0.8s ease-out 0.2s both;
}

.sec-aboutus-1 .letter-l.animate {
  animation: letterGlow 0.8s ease-out 0.4s both;
}

.sec-aboutus-1 .letter-v.animate {
  animation: letterGlow 0.8s ease-out 0.6s both;
}

.sec-aboutus-1 .letter-a.animate {
  animation: letterGlow 0.8s ease-out 0.8s both;
}

.sec-aboutus-1 .letter-c.animate {
  animation: letterGlow 0.8s ease-out 1s both;
}

@keyframes letterGlow {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.5);
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }

  50% {
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  }
}

.procurement-policy__drawer {
  --padding-x: clamp(calc(30 * var(--rpx)), 4.166666vw, calc(80 * var(--rpx)));
}

.procurement-policy__drawer .procurement-policy__header {
  padding: calc(40 * var(--rpx)) var(--padding-x);
  background: url(../../images/bg-6.jpg) no-repeat center / cover;
}

.procurement-policy__drawer .procurement-policy__header .title {
  color: #fff;
  font-size: var(--font-size-48);
}

.procurement-policy__drawer .procurement-policy__main {
  --p-t: clamp(20px, 3.125vw, calc(60 * var(--rpx)));
  padding: var(--p-t) var(--padding-x) var(--padding-x);
}

.procurement-policy__drawer .visual-section {
  font-size: var(--font-size-18);
  font-weight: 300;
  padding-bottom: calc(30 * var(--rpx));
  border-bottom: 1px solid #e8e8e8;
}

.procurement-policy__drawer .visual-section p+p {
  margin-top: calc(12 * var(--rpx));
}

.procurement-policy__drawer .section-box {
  padding-top: calc(30 * var(--rpx));
}

.procurement-policy__drawer .section-box__title {
  font-size: var(--font-size-24);
  color: var(--primary);
}

.procurement-policy__drawer .section-box__main {
  font-size: var(--font-size-16);
  font-weight: 300;
  padding-top: 12px;
}

.procurement-policy__drawer .section-box__main img {
  text-align: center;
}

.section-news .layer-title__sub {
  font-size: var(--font-size-24);
  font-weight: 300;
}

.section-news .form {
  gap: calc(12 * var(--rpx));
}

.section-news .form .input-field {
  width: calc(320 * var(--rpx));
}

.section-news .form .input-field .search-btn {
  font-size: var(--font-size-14);
  color: #fff;
  line-height: calc(30 * var(--rpx));
  background: var(--primary);
  padding: 0 calc(16 * var(--rpx));
  border-radius: 999px;
}

@media screen and (max-width: 900px) {
  .sec-aboutus-3 .hero-brand {
    margin-right: -20px;
  }

  .sec-aboutus-4 .history-content {
    padding-left: 0;
  }
}

@media screen and (max-width: 750px) {
  .sec-aboutus-4 .history-background {
    flex-wrap: wrap;
  }

  .sec-aboutus-2 {
    background-size: auto 100%;
  }

  .sec-aboutus-2 .company-intro-desc {
    width: 90%;
  }

  .sec-aboutus-4 .history-content {
    width: 100%;
  }

  .sec-aboutus-4 .history-images {
    width: 100%;
    margin-top: calc(32 * var(--rpx));
  }

  .sec-aboutus-4 .main-image,
  .sec-aboutus-4 .small-image {
    width: 50%;
  }

  .sec-aboutus-4 .small-image {
    margin-top: -10%;
    margin-left: 40%;
  }

  .sec-sustainable-2 .card-wrap {
    --c: 2;
  }

  .sec-sustainable-1 {
    height: auto;
  }

  .sec-sustainable-1 .text-box {
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    position: relative;
  }

  .sec-sustainable-1 .txt-wrap {
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    position: sticky;
    top: var(--header-h);
    width: max-content;
  }

  .sec-sustainable-1 .item {
    width: 100vw;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    flex: 0 0 auto;
  }

  .sec-sustainable-1 .item .intro,
  .sec-sustainable-1 .item .more-btn {
    display: block;
  }

  .sec-sustainable-1 .txt-wrap .item-bg {
    display: block;
    z-index: -1;
  }

  .common-layout-list {
    --column: 1;
  }

  .common-layout-list .item {
    flex-direction: column;
  }

  .common-layout-list .news-image {
    width: 100%;
  }

  .sec-procurement .sec-area .item {
    flex-direction: column;
  }

  .sec-procurement .item .txt,
  .sec-procurement .item .pic {
    width: 100%;
    order: 2;
  }

  .sec-procurement .item .pic {
    height: auto;
    order: 1;
  }

  .sec-aboutus-detail-more .card-wrap {
    --column: 1;
  }

  .section-news .form {
    flex-wrap: wrap;
  }

  .section-news .form .input-field {
    width: 100%;
  }
}