.title-line {
    position: relative;
    padding-top: 23px;
    text-align: left !important;
}
.title-line:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 60px;
    height: 5px;
    background-color: var(--esp-color-blue);
}
.esp32-e22-wrap p {
    margin-top: 0;
    margin-bottom: 0;
}
.esp32-e22-wrap .overview-wrap {
    padding-top: 60px;
    max-width: 1190px !important;
}
.esp32-e22-wrap .features-wrap {
    padding-top: 0;
    max-width: 1246px !important;
}
.i18n-en strong {
  font-family: var(--esp-font-family-maison-bold);
}

/* 1. 非 active 的 p 隐藏；3. content 最大宽度 400px */
.features-wrap .title-line {
    margin-bottom: 40px;
}
.features-pc-item-content {
  max-width: 400px;
  position: relative;
  min-height: 200px;
  margin-right: 60px;
}
.i18n-zh-hans .features-pc-item-content {
  max-width: 407px;
  margin-right: 53px;
}

.features-pc-item-content-slider {
  display: block;
  width: 100%;
}

.features-pc-item-content-slider p {
  margin: 0 0 1em;
}
.features-pc-item-content-slider p:last-child {
  margin-bottom: 0;
}

.features-pc-item-content-slider p:not(.active) {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.features-pc-item-content-slider p.active {
  opacity: 1;
  visibility: visible;
}
.features-pc-item-content-slider p.animating-out {
  opacity: 1;
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

.features-pc-item-img {
  position: relative;
  min-height: 302px;
}

.features-pc-item-img-slider {
  display: block;
  width: 100%;
}

.features-pc-item-img-slider p {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.features-pc-item-img-slider p.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.features-pc-item-img-slider p.animating-out {
  opacity: 1;
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}
.features-pc-item-img-slider p.active.animate-fade-in {
  z-index: 2;
  opacity: 0;
}
.features-pc-item-img-slider img {
  display: block;
  max-width: 100%;
  height: auto;
}
.i18n-ja strong {
  font-family: var(--esp-font-family-maison-bold);
}

/* 2. 动画：fadeUp / fadeDown（content）、fade（img） */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.features-pc-item-content p.animate-fade-up {
  animation: fadeUp 0.45s linear forwards;
}

.features-pc-item-content p.animate-fade-down {
  animation: fadeDown 0.45s linear forwards;
}

.features-pc-item-img p.animate-fade-in {
  animation: fadeIn 0.45s linear forwards;
}

.features-pc-item-img p.animate-fade-out {
  animation: fadeOut 0.45s linear forwards;
}

/* li 悬浮样式（可选） */
.features-pc-item-icon {
    margin-left: 80px;
}
.features-pc-item-icon li {
  position: relative;
  cursor: pointer;
  display: flex;
  padding-bottom: 16px;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: normal;
  margin-bottom: 24px;
  color: rgba(56, 57, 58, 0.4);
  /* 进入时 border-color 用慢过渡，离开时用下方 hover/active 的 0s 即立即消失 */
  transition: color 0.2s linear, opacity 0.2s linear, border-color 0s, transform 0.3s linear;
}
.features-pc-item-icon li::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    margin-top: -2px;
    background-image: url(../images/esp32-e22/icon1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.features-pc-item-icon li::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  width: 0;
  height: 1px;
  background-color: transparent;
  transition: width 0.2s linear;
}
.features-pc-item-icon li.active::before {
    background-image: url(../images/esp32-e22/icon1-active.png);
}
.features-pc-item-icon li[data-value="2"]::before {
    background-image: url(../images/esp32-e22/icon2.png);
}
.features-pc-item-icon li[data-value="2"].active::before {
    background-image: url(../images/esp32-e22/icon2-active.png);
}
.features-pc-item-icon li[data-value="3"]::before {
    background-image: url(../images/esp32-e22/icon3.png);
}
.features-pc-item-icon li[data-value="3"].active::before {
    background-image: url(../images/esp32-e22/icon3-active.png);
}
.features-pc-item-icon li[data-value="4"]::before {
    background-image: url(../images/esp32-e22/icon4.png);
}
.features-pc-item-icon li[data-value="4"].active::before {
    background-image: url(../images/esp32-e22/icon4-active.png);
}
.features-pc-item-icon li:hover,
.features-pc-item-icon li.active {
  /* 与站点风格一致时可在此写高亮色 */
  font-family: var(--esp-font-family-maison-bold);
  color: #38393a;
  /* 离开时 border-color 立即消失（使用 0s，覆盖基态的慢过渡） */
  transition: color 0.2s linear, opacity 0.2s linear, border-color 0.2s 0.1s ease-in-out, transform 0.3s linear;
}
.features-pc-item-icon li:hover::after,
.features-pc-item-icon li.active::after {
  width: 100%;
  background-color: rgba(56, 57, 58, 0.6);
}
/* 选中的 li 上移 16px，其后同级 li 一起上移；第一个 li 除外 */
/* .features-pc-item-icon li:hover:not(:first-child),
.features-pc-item-icon li.active:not(:first-child) {
  margin-top: -16px !important;
} */
/* 选中的 li 上移 16px，停留250ms后自动还原；第一个 li 除外 */
.features-pc-item-icon li:hover:not(:first-child),
.features-pc-item-icon li.active:not(:first-child) {
  transform: translateY(-12px);
}

@keyframes moveUpStayAndBack {
  0% {
    margin-top: 0;
  }
  47.1% {
    margin-top: -16px;
  }
  76.5% {
    margin-top: -16px;
  }
  100% {
    margin-top: 0;
  }
}
.features-pc-item-icon li:hover .primary,
.features-pc-item-icon li.active .primary {
    color: #1290d8;
}

.features-arrow {
  display: none;
}

/* 屏宽 < 1170px：Features 区垂直布局，标题在上、文案居中、图在下 */
@media (max-width: 1169px) {
  .features-wrap .title-line {
    text-align: center !important;
  }
  .features-wrap .title-line:before {
    left: 50%;
    transform: translateX(-50%);
  }
  .features-content-wrap .features-pc-item {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
  }
  .features-content-wrap .features-pc-item-content {
    order: 2;
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 24px;
    min-height: 0;
    overflow: hidden;
    touch-action: pan-y;
  }
  .features-pc-item-icon li::after {
    display: none;
  }
  .features-content-wrap .features-pc-item-content-slider {
    display: flex;
    width: 400%;
    transition: transform 0.45s ease;
    will-change: transform;
  }
  .features-content-wrap .features-pc-item-content-slider p {
    flex: 0 0 25%;
    width: 25%;
    box-sizing: border-box;
    opacity: 1;
    visibility: visible;
    position: relative;
  }
  /* 小于 768px：文案区高度仅随当前选中的 p 适应，不为最高 p 撑满 */
  @media (max-width: 768px) {
    .features-content-wrap .features-pc-item-content-slider {
      align-items: flex-start;
      overflow: hidden;
    }
  }
  .features-content-wrap .features-pc-item-img {
    order: 3;
    min-height: 260px;
    overflow: hidden;
    touch-action: pan-y;
  }
  .features-content-wrap .features-pc-item-img-slider {
    display: flex;
    width: 400%;
    transition: transform 0.45s ease;
    will-change: transform;
  }
  .features-content-wrap .features-pc-item-img-slider p {
    flex: 0 0 25%;
    width: 25%;
    box-sizing: border-box;
    opacity: 1;
    visibility: visible;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .features-content-wrap .features-pc-item-img img {
    display: block;
    margin: 0 auto;
  }
  .features-content-wrap .features-pc-item-icon {
    order: 1;
    margin-left: 0;
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .features-content-wrap .features-pc-item-icon ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .features-pc-item-icon li:hover:not(:first-child), .features-pc-item-icon li.active:not(:first-child) {
    margin-top: 0 !important;
    transform: none !important;
  }
  .features-content-wrap .features-pc-item-icon li {
    display: none;
    height: auto;
    margin-bottom: 0;
    margin-top: 0 !important;
    padding-bottom: 0;
    border-bottom: none;
    min-width: 380px;
  }
  .features-content-wrap .features-pc-item-icon li.active {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .features-content-wrap .features-arrow {
    display: inline-flex;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: url(../images/esp32-e22/arrow.png) center / contain no-repeat;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
  }
  .features-content-wrap .features-arrow-prev {
    margin-right: 12px;
    transform: rotate(180deg);
  }
  .features-content-wrap .features-arrow-next {
    margin-left: 12px;
  }
  .features-content-wrap .features-arrow-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
  }
  .features-content-wrap .features-pc-item-icon .features-arrow {
    display: inline-flex;
  }
  .features-content-wrap .features-pc-item-content p {
    text-align: left;
  }
}

/* ========== Target Applications ========== */
.target-applications-bg-wrap {
  position: relative;
  overflow: hidden;
}
.target-applications-bg-layer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(10px);
  transform: scale(1.08);
}
.target-applications-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.8);
  pointer-events: none;
  transition: background 0.35s ease;
}
.target-applications-bg-wrap.target-applications-third .target-applications-mask {
  background: rgba(79, 105, 127, 0.7);
}
.target-applications-bg-wrap.target-applications-third .target-applications-wrap,
.target-applications-bg-wrap.target-applications-third .target-applications-wrap .title-line,
.target-applications-bg-wrap.target-applications-third .target-applications-wrap > p,
.target-applications-bg-wrap.target-applications-third .target-applications-content-tab-top-item,
.target-applications-bg-wrap.target-applications-third .target-applications-content-tab-top-item:hover,
.target-applications-bg-wrap.target-applications-third .target-applications-content-tab-top-item.active {
  color: #fff;
}
.target-applications-bg-wrap.target-applications-third .target-applications-wrap .title-line:before {
  background-color: #fff;
}
.target-applications-bg-wrap.target-applications-third .target-applications-content-tab-wrap .tab-line {
  background: rgba(255, 255, 255, 0.4);
}
.target-applications-bg-wrap.target-applications-third .tab-line-indicator {
  background: #fff;
}
.target-applications-wrap {
  position: relative;
  z-index: 2;
  padding-top: 40px !important;
  max-width: 1246px !important;
}
.target-applications-wrap .title-line {
  text-align: center !important;
  margin-bottom: 32px;
}
.target-applications-wrap .title-line:before {
  left: 50%;
  transform: translateX(-50%);
  background-color: #38393a
}
.target-applications-wrap > p {
  color: #38393a;
  line-height: 1.625;
  margin-bottom: 40px;
  max-width: 1216px;
  text-align: center;
}
.target-applications-content-wrap {
  width: 100%;
}
.target-applications-content-item-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 28px;
  overflow: hidden;
  border-radius: 8px;
}
.target-applications-slider {
  display: flex;
  width: 500%;
  transition: transform 0.45s ease;
  will-change: transform;
}
.target-applications-content-item {
  flex: 0 0 20%;
  width: 20%;
  box-sizing: border-box;
}
.target-applications-content-item-img {
  width: 100%;
  line-height: 0;
}
.target-applications-content-item-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.target-applications-content-tab-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* 图片和 tab 之间的常显线 + 选中滑动线 */
.tab-line-wrap {
  position: relative;
  width: 100%;
  height: 4px;
  margin-top: 12px;
  flex-shrink: 0;
}
.target-applications-content-tab-wrap .tab-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(56, 57, 58, 0.4);
}
.tab-line-indicator {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 240px;
  height: 4px;
  background: #38393a;
  transition: transform 0.35s ease, width 0.35s ease;
  will-change: transform, width;
}
.target-applications-tab-inner {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 12px;
}
.i18n-ja .target-applications-tab-inner,
.i18n-zh-hans .target-applications-tab-inner,
.i18n-en .target-applications-tab-inner {
  justify-content: space-around;
}
.target-applications-content-tab-top-item {
  cursor: pointer;
  color: rgba(56, 57, 58, 0.4);
  transition: color 0.25s ease;
  white-space: nowrap;
  text-align: center;
}
.target-applications-content-tab-top-item:hover {
  color: rgba(56, 57, 58, 1);
  font-family: var(--esp-font-family-maison-bold);
}
.target-applications-content-tab-top-item.active {
  color: #38393a;
  font-family: var(--esp-font-family-maison-bold);
}

/* 屏宽 < 1170px：Target Applications 垂直布局，图下仅显示当前项 caption，支持手指左右滑动 */
@media (max-width: 1169px) {
  .target-applications-content-wrap .target-applications-content-item-wrap {
    touch-action: pan-y;
    margin-bottom: 20px;
  }
  .target-applications-content-wrap .target-applications-content-tab-wrap {
    margin-top: 0;
  }
  .target-applications-content-wrap .tab-line-wrap {
    margin-top: 20px;
  }
  .target-applications-content-wrap .target-applications-tab-inner {
    justify-content: center;
    margin-top: 12px;
    gap: 0;
  }
  .target-applications-content-wrap .target-applications-content-tab-top-item {
    display: none;
    cursor: default;
  }
  .target-applications-content-wrap .target-applications-content-tab-top-item.active {
    display: block;
    text-align: center;
    color: #38393a;
    font-family: var(--esp-font-family-maison-bold);
    font-size: 18px;
  }
}

@media (max-width: 1280px) {
    .features-content-pc-wrap .features-pc-item {
        justify-content: space-between;
        width: 100%;
    }
    .features-pc-item-content {
        margin-right: 0;
    }
    .features-pc-item-icon{
        margin-left: 0;
    }
    .tab-line-indicator {
        min-width: fit-content;
    }
}

@media (max-width: 768px) {
  .esp32-e22-wrap .overview-wrap {
    padding-top: 28px;
    padding-bottom: 40px;
  }
  .features-content-wrap .features-pc-item-icon li {
    min-width: 310px;
    max-width: 310px;
  }
  .features-wrap .title-line {
    padding-top: 16px;
  }
  .features-content-wrap .features-pc-item-content {
    margin-bottom: 28px;
  }
  .esp32-e22-wrap .features-wrap {
    padding-bottom: 40px;
  }
  .target-applications-wrap {
    padding-bottom: 40px !important;
  }
  .i18n-en .features-pc-item-icon li[data-value="2"] .primary,
  .i18n-ja .features-pc-item-icon li[data-value="2"] .primary,
  .i18n-en .features-pc-item-icon li[data-value="3"] .primary,
  .i18n-ja .features-pc-item-icon li[data-value="3"] .primary,
  .i18n-en .features-pc-item-icon li[data-value="4"] .primary {
    display: block;
  }
}
body:not(.views-display-home-dynews) .new-banner-video-wrap picture {
  display: none;
}
body:not(.views-display-home-dynews) .new-banner-video-wrap .video-banner-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}
body:not(.views-display-home-dynews) .new-banner-video-wrap .video-banner-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right;
  display: block;
  outline: none;
}
@media (max-width: 768px) {
  body:not(.views-display-home-dynews) .new-banner-video-wrap picture {
    display: block !important;
  }
  body:not(.views-display-home-dynews) .new-banner-video-wrap .video-banner-container {
    display: none !important;
  }
}