/* 414 用 416 的节奏，但方向改成 深→浅→最终停留深 */
@keyframes pulse416-reverse {
  0%      { opacity: 1;   }  /* 深 */
  15%     { opacity: .18; }  /* 变浅 */
  24.53%  { opacity: 1;   }  /* 回深 */
  100%    { opacity: 1;   }  /* 停留深 */
}

/* 初始为浅色，并允许平滑过渡 */
section[data-cattype="414"] .stripe-seq .segment {
  opacity: 0.18; /* 浅 */
  transition: opacity .18s ease-in-out;
  shape-rendering: crispEdges;
}

/* 从左到右依次延迟 保持你原来的节奏 */
section[data-cattype="414"] .stripe-seq .s1 { animation-delay: 0s; }
section[data-cattype="414"] .stripe-seq .s2 { animation-delay: .3s; }
section[data-cattype="414"] .stripe-seq .s3 { animation-delay: .6s; }
section[data-cattype="414"] .stripe-seq .s4 { animation-delay: .9s; }
section[data-cattype="414"] .stripe-seq .s5 { animation-delay: 1.2s; }
section[data-cattype="414"] .stripe-seq .s6 { animation-delay: 1.5s; }


@media (max-width: 768px) {
  section[data-cattype="414"] .arrow-svg {
    width: 190px;
    height: auto;
    display: block;
    margin-right: -10px;
	margin-bottom: 50px;
  }
}
section[data-cattype="414"] .arrow-container {
	width: 35%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  overflow: visible;
  position: absolute;
  padding-right: 20px;
  transform: translateY(0px);
  right: -30px;
  top: 10px;
}
/* 让 SVG 尺寸可控（按需调） */
section[data-cattype="414"] .arrow-svg { 
	width: 40%;
  height: auto;
  display: block;
  position: absolute;
  }


section[data-cattype="414"] {
  font-family: Helvetica, Arial, sans-serif;
  background: #d1d3d4; /* 整个 section 先设为灰色 */
  position: relative;
  padding: 75px 20px 0 20px;
  overflow: hidden;
}

section[data-cattype="414"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%; /* 白色高度占 45% */
  background: white;
  z-index: 0;
}

section[data-cattype="414"] .title {
  text-align: center;
  font-size: 45px;
  font-weight: bold;
  margin-bottom: 85px;
  margin-top: 35px;
  position: relative;
  z-index: 2;
  padding: 0 20px;
}

section[data-cattype="414"] .slider-wrapper {
  display: flex;
  justify-content: center;
    margin-top: -30px; /* 向上移动 30px，值可调整 */
    height: 650px;
    
}


section[data-cattype="414"] .big-lori-content{
  position: relative;
  top: -15px;
}
section[data-cattype="414"] .small-lori-content{
  position: relative;
}
/* 动画播放控制（每颗箭头不同 delay） */


/* 保持箭头显示 + 静止状态 */


section[data-cattype="414"] .card {
  position: relative;
  width: 250px;
  height: 545px;
  overflow: visible; /* 允许 lori 溢出展示出来 */
    justify-content: space-between; /* 关键：分散上下结构 */
  align-items: center;      /* 水平居中 */
  text-align: center;
  box-sizing: border-box;
  background: none;
  margin: 0 5%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 8%;
}

/* 新增伪元素：hover 时从中间上下展开 */
section[data-cattype="414"] .card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  width: 100%;
  height: 0%;
  background: linear-gradient(to right, #e60012, #8e0006);
  transform: translateY(-50%);
  z-index: 0;
  transition: height 0.5s ease;
}

section[data-cattype="414"] .card:hover::before {
  height: 110%;
  width: 290px;
}

/* hino title 图片 */
section[data-cattype="414"] .hino-title {
  position: relative;
  height: 50px;
  margin-bottom: 10px;
  margin-top: 5%;
}
section[data-cattype="414"] .hino-title img {
  display: block;
  width: 85%;
  margin: 0 auto;
  transition: opacity 0.3s ease;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
section[data-cattype="414"] .hino-title img.hover {
  opacity: 0;
}
section[data-cattype="414"] .hino-title img.hover {
  opacity: 0;
  transition: opacity 0.3s ease;
}

section[data-cattype="414"] .card:hover .hino-title img.normal {
  opacity: 0;
}

section[data-cattype="414"] .card:hover .hino-title img.hover {
  opacity: 1;
}
section[data-cattype="414"] .card:hover .hino-title img.hover {
  opacity: 1;
}
section[data-cattype="414"] .lori{
  padding-top: 20%;
  flex-grow: 1;
}
/* lori 图片放大，确保超出背景边界 */
section[data-cattype="414"] .lori img {
  display: block;
  transform: scale(1.4);    
  position: relative;
  z-index: 2;
  transition: none;  /* 不需要 hover 变化，始终保持这个尺寸 */
}
section[data-cattype="414"] .lori-small{
    position: relative;
  z-index: 2;
  transition: none;  /* 不需要 hover 变化，始终保持这个尺寸 */
    display: block;
}
section[data-cattype="414"] .lori-small:hover{
  transform: scale(1.7);
   transition: transform 0.3s ease; /* 平滑过渡 */
}
section[data-cattype="414"] .lori-medium{
      position: relative;
  z-index: 2;
  transition: none;  /* 不需要 hover 变化，始终保持这个尺寸 */
    display: block;
}
section[data-cattype="414"] .lori-medium:hover{
  transform: scale(1.7);
   transition: transform 0.3s ease; /* 平滑过渡 */
}
section[data-cattype="414"] .card:hover .lori img {
  transform: scale(1.7); /* 放大 1.1 倍 */
  transition: transform 0.3s ease; /* 平滑过渡 */
}
/* 内容区域：hover 时淡入显示 */
section[data-cattype="414"] .card-content {
  padding: 20px 0;
  opacity: 1;                    /* 默认可见 */
  transform: translateY(0);       /* 默认位置 */
  z-index: 2;
  color: black;                  /* 文字是黑色 */
  pointer-events: auto;          /* 可点击 Explore 按钮 */
  transition: none;              /* 不需要动画淡入效果 */
}
section[data-cattype="414"] .card {
  display: flex;
  flex-direction: column;
  height: 550px; /* 可以根据你设计微调 */
}

section[data-cattype="414"] .card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
    justify-content: flex-start; /* ✅ 固定内容靠上 */
    align-items: center; /* ✅ 内容整体水平居中 */
  text-align: center;   /* ✅ 文字也居中 */
}
section[data-cattype="414"] .hino-title {
  position: relative;
  min-height: 50px;     /* ✅ 强制撑开高度，避免高度为 0 */
  flex-shrink: 0;        /* ✅ 防止被压缩隐藏 */
  width: 100%;           /* ✅ 保证在 flex 中不被限制 */
  z-index: 2;
}

section[data-cattype="414"] .card-content p {
  flex-grow: 0; /* ✅ 或直接移除这一行 */
  margin: 20px 0;
  font-size: 16px;
  text-align: justify;
}
section[data-cattype="414"] .explore-btn {
  margin-top: auto; /* ✅ 自动顶到底 */
}


section[data-cattype="414"] .card-content .explore-btn {
  display: inline-flex;
  align-items: center;
  background: #e60012;           /* 红色背景 */
  border: none;                  /* 移除边框 */
  color: #fff;                   /* 白色文字 */
  text-decoration: none;
  padding: 8px 16px;
  font-size: 16px;
  border-radius: 2px;
  transition: background 0.3s ease, color 0.3s ease;
    justify-content: center; /* ✅ 添加这个让文字居中 */
      margin-top: auto;
}
section[data-cattype="414"] .card:hover .card-content {
  color: #fff;
}

section[data-cattype="414"] .card:hover .card-content .explore-btn {
  background: transparent;      /* 背景透明 */
  border: 2px solid #fff;       /* 白色描边 */
  color: #fff;                  /* 文字白色 */
}

section[data-cattype="414"] .explore-btn i {
  margin-left: 8px;
  font-size: 8px;
  color: #fff;
}
/* 右上角箭头动画 */
section[data-cattype="414"] .corner-arrows {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 6px;
}

section[data-cattype="414"] .arrow-shape {
  width: 20px;
  height: 20px;
  border-top: 4px solid #d1d3d4;
  border-right: 4px solid #d1d3d4;
  transform: rotate(45deg);
  animation: arrowWave 1.5s infinite ease-in-out;
}

section[data-cattype="414"] .arrow-shape:nth-child(2) {
  border-color: #e60012;
  animation-delay: 0.3s;
}

section[data-cattype="414"] .arrow-shape:nth-child(3) {
  border-color: white;
  border-right-color: #d1d3d4;
  border-top-color: #d1d3d4;
  animation-delay: 0.6s;
}
section[data-cattype="414"] .nav-arrows {
  display: none;
}


@media (max-width: 1440px) {
  section[data-cattype="414"] .lori img {
  width: 100%;
  transform: scale(1.0);
}

  section[data-cattype="414"] .card:hover .lori img {
    transform: scale(1.4);
  }

section[data-cattype="414"] .card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
section[data-cattype="414"] .card {
  margin: 0 3%;
  height: 500px;
}
section[data-cattype="414"] .slider-wrapper {
  margin-top: -50px;
  height: 530px;
}
section[data-cattype="414"] .lori {
  padding-top: 0;
  height: 130px;
}
section[data-cattype="414"] .card-content p{
  margin: 0;
}
  section[data-cattype="414"] .arrow-container{
    transform: translateY(20px);
  }
  section[data-cattype="414"] .title{
    margin-top: 10px;
  }
  section[data-cattype="414"] .card:hover::before {
  height: 102%;
}
}
@media (max-width: 768px) {
  section[data-cattype="414"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%; /* 白色高度占 45% */
  background: white;
  z-index: 0;
}
  section[data-cattype="414"] .slider-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
      display: flex;
    overflow-x: auto;
    overflow-y: hidden; /* ⬅️ 防止上下滚动 */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    height: 620px;
      justify-content: flex-start !important; /* ✅ 从左开始排列 */
  }
  section[data-cattype="414"] .lori{
      padding: 0;
  }
  section[data-cattype="414"] .hino-title img{
    width: 60%;
  }
  section[data-cattype="414"] .card {
        flex: 0 0 100%;
        margin: 0 auto; /* 加这行让它居中 */
       scroll-snap-align: start !important; /* ✅ 滑动时从第一项吸附对齐 */
	      height: 590px;
  }
section[data-cattype="414"] .hino-title {
	margin-bottom: 0;
}
section[data-cattype="414"] .nav-arrows{
  display: flex;
}
 section[data-cattype="414"] .prev,
 section[data-cattype="414"] .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  z-index: 10;
  transition: background 0.3s;
  background: white;
  color: #e60012;
  outline: 1px solid #e60012;
}

section[data-cattype="414"] .prev:active,
section[data-cattype="414"] .next:active {
  background: #e60012;
  color: white;
}


section[data-cattype="414"] .prev {
  left: 10px;
}

section[data-cattype="414"] .next {
  right: 10px;
}

  section[data-cattype="414"] .arrow-container {
    top: 0;
    width: 75%;
  }
section[data-cattype="414"] .arrow-container2{
  left: -10px;
  bottom: 12px;
  justify-content: start;
}
section[data-cattype="414"] .card-content p{
  width: 60%;
	top: 70px;
}
section[data-cattype="414"] .card::before{
  left: 28px;
}
section[data-cattype="414"] .card:hover::before {
  width: 341px;
}
section[data-cattype="414"] .lori-small:hover{
  transform: scale(1.2) !important;
}

section[data-cattype="414"] .lori-medium:hover{
  transform: scale(1.2) !important;
}
section[data-cattype="414"] .card-content{
  padding: 0 !important;
  margin: 0;
  margin-top: 0;
  margin-bottom: 0;
}
}
@media (max-width: 768px) {
  section[data-cattype="414"] .mobile-menu-close {
	position: absolute;
    top: 24px;
    right: 16px;
    background: white;
    color: #e60012;
    font-size: 17px;
    border: none;
    padding: 6px 13px;
    border-radius: 4px;
    font-weight: bold;
    z-index: 10010;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }
}

@media (min-width: 769px) {
  section[data-cattype="414"] .mobile-menu-close {
    display: none;
  }
}