/* 作用域 */
section[data-cattype="416"] .stripe-seq .segment {
  opacity: 0.18;        /* 浅 */
  animation: none !important;
  transition: opacity .18s ease-in-out;
  shape-rendering: crispEdges;
}

/* 延迟：从最左到最右 */
section[data-cattype="416"] .stripe-seq .s1 { animation-delay: 0s;   }
section[data-cattype="416"] .stripe-seq .s2 { animation-delay: .3s; }
section[data-cattype="416"] .stripe-seq .s3 { animation-delay: .6s; }
section[data-cattype="416"] .stripe-seq .s4 { animation-delay: .9s; }
section[data-cattype="416"] .stripe-seq .s5 { animation-delay: 1.2s; }
section[data-cattype="416"] .stripe-seq .s6 { animation-delay: 1.5s; }

/* 一轮：
   0%   → .18（淡）
   15%  → 亮到 1
   24.53% → 淡回 .18
   100% → 停留在 .18（4s 静止）
*/
@keyframes pulse416 {
  0%      { opacity: .18; }
  15%     { opacity: 1;   }
  24.53%  { opacity: .18; }
  100%    { opacity: .18; }
}




@media (max-width: 768px) {
  section[data-cattype="414"] .arrow-svg {
    width: 190px;
    height: auto;
    display: block;
    margin-right: -10px;
	margin-bottom: 50px;
  }
}
/* 让 SVG 尺寸可控（按需调） */
section[data-cattype="416"] .arrow-svg { 
width: 16%;
  height: auto;
  display: block;
  position: absolute;
  padding-top: 60px;
  }

/* 用 dot-flashing 的节奏做闪烁（不需要多个副本） */
section[data-cattype="416"] .arrow-svg.dot-flashing {
  animation: dot-flashing-opacity 1s infinite linear alternate;
  /* 如果想跟你原来的延迟一致，可以加：animation-delay: 0.5s; */
}

/* 闪烁关键帧（等价于你给的 dot-flashing，但改成控制不透明度） */
@keyframes dot-flashing-opacity {
  0%   { opacity: 0.2; }
  50%,100% { opacity: 1; }
}

.btn-primary {
  background-color: #e60012;
  color: white !important;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  transition: background-color 0.3s ease;
}
.btn-primary:hover{
	background-color: #000000 !important;
}
.btn-primary:active {
  background-color: #000000 !important;
}
#\33 ColoumnDetail {
  padding-top: 0;
}
@keyframes fadeInUpCard {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-content {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.card-content.fadeInUp {
  animation: fadeInUpCard 1.5s ease forwards;
}

section[data-cattype="416"] {
  padding: 30px 0;
  font-family: Helvetica, sans-serif;
  color: #ffffff;
}
section[data-cattype="416"] .card-grid {
  margin-top: 15px;
  z-index: 1;
}
section[data-cattype="416"] .card-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  align-items: stretch;
}

section[data-cattype="416"] .card {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 30px;
  display: flex;
  align-items: center;       /* 垂直居中 */
  justify-content: flex-start;
  height: 317px;
  overflow: hidden;
}
section[data-cattype="416"] .card-layout .card:nth-child(3) {
  align-items: flex-end; /* 让文字靠底部 */
}

section[data-cattype="416"] .card-layout .card:nth-child(3) .card-content {
  padding-left: 40px;
  padding-bottom: 40px;
}
section[data-cattype="416"] .card-layout .card:nth-child(1) .card-content,
section[data-cattype="416"] .card-layout .card:nth-child(2) .card-content,
section[data-cattype="416"] .card-layout .card:nth-child(3) .card-content {
  max-width: 50%;
  padding-left: 96px;
}

/* 第三张卡片（右边）高度加倍 + gap */
section[data-cattype="416"] .card:nth-child(3) {
  height: calc(317px * 2 + 20px);
  margin-left: 15px; /* 推右边文字往右，不影响左边卡片 */
}
section[data-cattype="416"] .card-layout .card:nth-child(1) {
  margin-bottom: 15px;
}
/* 半透明黑色 overlay */
section[data-cattype="416"] .card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

/* 内容层级放上面 */
section[data-cattype="416"] .card-content {
  position: relative;
  z-index: 2;
  max-width: 80%;
  text-align: left;

}

section[data-cattype="416"] h2 {
  font-size: 40px;
  font-weight: bold;
	margin-bottom: 0 !important;
}
section[data-cattype="416"] .card {
  background-image: var(--bg-desktop);
}
section[data-cattype="416"] p {
  font-size: 16px;
  line-height: 1.4;
}

section[data-cattype="416"] .readmore:hover {
  background-color: #000000;
}
section[data-cattype="416"] .arrow-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  overflow: visible;
  position: relative;
  transform: translateY(60px);
  right: 150px;
  z-index: 11;
  bottom: 90px;
}
section[data-cattype="416"] .card-mobile {
  display: none;
}

section[data-cattype="416"] .arrow-container .arrow-svg {
  opacity: 0;
}
section[data-cattype="416"] .card-content p {
  margin-top: 5px;
  margin-bottom: 20px;
}

@media (max-width: 1550px){
  section[data-cattype="416"] .card-layout .card:nth-child(1) .card-content,
  section[data-cattype="416"] .card-layout .card:nth-child(2) .card-content,
  section[data-cattype="416"] .card-layout .card:nth-child(3) .card-content {
  max-width: 75%;
  padding-left: 40px;
  }
section[data-cattype="416"] .stripe-seq {
  width: 350px !important;
}
}
@media (max-width: 767px) {
  section[data-cattype="416"] .card-layout {
    display: block; /* 垂直堆叠 */
  }
  section[data-cattype="416"] .card-desktop {
    display: none;
  }

  section[data-cattype="416"] .card-mobile {
    display: block;
  }
  section[data-cattype="416"] .card {
    width: 100%;
    height: auto;
    margin: 0 0 15px 0;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
  }
  section[data-cattype="416"] .card {
    background-image: var(--bg-mobile);
  }
  section[data-cattype="416"] .card-content {
    max-width: 100%;
    padding-left: 0;
    padding-bottom: 0;
    z-index: 2;
  }

  section[data-cattype="416"] .card-layout .card:nth-child(3) .card-content {
    padding-left: 0;
    padding-bottom: 0;
  }

  section[data-cattype="416"] .card:nth-child(3) {
    margin-left: 0;
    height: auto;
  }

  section[data-cattype="416"] .arrow-container {
	position: relative;
    bottom: 40px;
    right: -190px;
    transform: none;
    justify-content: center;
    margin-top: 20px;
    padding-right: 0;
    width: 50%;
  }

  section[data-cattype="416"] h2 {
    font-size: 28px;
  }

  section[data-cattype="416"] p {
    font-size: 14px;
  }

  section[data-cattype="416"] .btn-primary {
    font-size: 14px;
    padding: 8px 16px;
  }

section[data-cattype="416"] .arrow-svg {
  width: 48%;
  height: auto;
  display: block;
  position: absolute;
  padding-top: 36px;
}
  section[data-cattype="416"] .card-content,
  section[data-cattype="416"] .card-layout .card:nth-child(1) .card-content,
  section[data-cattype="416"] .card-layout .card:nth-child(2) .card-content,
  section[data-cattype="416"] .card-layout .card:nth-child(3) .card-content {
  padding: 25px 15px;
    max-width: 100%;
  }

}