.PCAIPage {
  width: 100%;
  height: auto;
  background-color: #f4f5f9;
}
/* lunbo */
.ai_lunbo {
  width: 100%;
  height: 400px;
  margin: 0;
  padding: 0;
  z-index: 888;
  background-image: url(../img/banner.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.ai_two {
    width: 100%;
    height: 137px;
    display: flex;
    justify-content: center;
    z-index: 666;
}

.ai_two_kuan {
    width: 1200px;
    height: 121px;
    margin-top: -27px;
    /* background-color: wheat; */
    border-radius: 8px;
    display: flex;
    z-index: 998;
    justify-content: flex-start;
    box-shadow: -2px 0 2px #dedede,
        /*左边阴影*/
        2px 0 2px #dedede,
        /*右边阴影*/
        0 0px 0px #dedede,
        /*顶部阴影*/
        0 4px 4px #dedede;
    /*底边阴影*/
}

.ai_two_kuan ul {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 8px;
    background-color: white;
    display: flex;
    justify-content: flex-start;
}

.ai_two_kuan ul li {
    flex-grow: 1;
    width: 300px;
    height: 59px;
    margin-top: 30px;
    margin-left: 30px;
    /* background-color: slateblue; */
    /* border: 1px solid #333; */
    display: flex;
    justify-content: flex-start;
}

.two_content_left_img {
    margin-right: 20px;
    transition: all .2s;
    width: 51px;
    height: 51px;
    background: url(../img/ico.png) no-repeat;
    text-align: center;
    /* background-color: brown; */
}

.two_content_left_img_swap {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.two_text_hei.hover{
    color: #FC7809;
}

.two_content_image {
    margin: 0;
    padding-right: 20px;
    padding-top: 27px;
}

.two_content_right_tit {
    flex-grow: 2;
    width: 115px;
    height: 121px;
    font-size: 18px;
    color: red;
    /* background-color: sandybrown; */
}

.two_text_hei {
    margin: 0;
    color: #4d4d4d;
    font-size: 18px;
}

.two_text2 {
    margin: 0;
    padding-top: 4px;
    font-size: 14px;
    color: #999999;
}

.ai_three {
  width: 100%;
  height: 780px;
  padding: 137px 0 28px;
  background-image: url(../img/260512/ai/aiopen_15.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  margin-top: -137px;
  margin-bottom: -120px;
  z-index: 99;
}
.ai_three_box{
  background: linear-gradient(to right, #EFF3FE 0%, #DAE4FD 100%);
  
}

.ai_three_wrap {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}

.ai_three_left {
  width: 500px;
  padding-top: 20px;
}

.ai_three_title {
  font-size: 60px;
  line-height: 1.05;
  font-weight: 800;
  color: #222;
  letter-spacing: 1px;
}

.ai_three_title span {
  color: #2366F9;
}

.ai_three_subtitle {
  margin-top: 25px;
  font-size: 32px;
  color: #3b3f49;
}

.ai_three_desc {
  margin-top: 10px;
  font-size: 24px;
  color: #2366F9;
}

.ai_three_points {
  margin: 50px 0 0;
  padding: 0;
  list-style: none;
}

.ai_three_points li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 16px;
  font-size: 16px;
  color: #666;
  line-height: 1.5;
}

.ai_three_points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #2366F9;
  color: #2366F9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}


.ai_three_cards {
  width: 1200px;
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.ai_three_card {
  min-height: 82px;
  border-radius: 12px;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 6px 18px rgba(156, 170, 216, 0.18);
  display: flex;
  align-items: flex-start;
  
  box-sizing: border-box;
  padding: 20px 20px;
}

.ai_three_card_icon {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  margin-right: 20px;
  flex-shrink: 0;

  >img{
    width: 100%;
    height: 100%;
  } 
}
 


.ai_three_card_title {
  font-size: 18px;
  color: #3a3d46;
  font-weight: 700;
  line-height: 1.2;
}

.ai_three_card_desc {
  font-size: 15px;
  color: #9aa0ad;
  line-height: 1.25;
  margin-top: 5px;
}

.ai_four {
  width: 100%;
  padding: 50px 0 70px;
  background: #fff;
}

.ai_four_wrap {
  width: 1200px;
  margin: 0 auto;
}

.ai_four_title_row {
  display: flex;
  align-items: center;
  justify-content: center;
 
  margin-bottom: 50px;
  text-align: center;
  >img{
    width: 580px;
    margin-left: 20px;
    height: 100%;
  }
}


.ai_four_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.ai_four_card {
  height: 308px;
  display: flex;
  flex-direction: column;
  >img{
    width: 100%;
    height: 100%;
  }
}



.ai_five {
  width: 100%;
  padding: 50px 0 72px;
 background-image: url('../img/260512/ai/aiopen_24.png');
 background-size: cover;
 background-position: center center;
 background-repeat: no-repeat;
}

.ai_five_wrap {
  width: 1200px;
  margin: 0 auto;
}

.ai_five_title_row {
  display: flex;
  align-items: center;
  justify-content: center;
 
  margin-bottom: 50px;
  text-align: center;
  >img{
    width: 580px;
    height: 100%;
  }
}



.ai_five_viewport {
  overflow: hidden;
  width: 100%;
}

.ai_five_track {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  width: max-content;
  animation: aiFiveScroll 20s linear infinite;
  will-change: transform;
}

.ai_five_track:hover {
  animation-play-state: paused;
}

.ai_five_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}

.ai_five_item > img {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes aiFiveScroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-50% - 9px), 0, 0);
  }
}


.ai_six {
  width: 100%;
  padding: 50px 0 72px;
  background-image: url('../img/260512/ai/aiopen_32.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.ai_six_wrap {
  width: 1000px;
  margin: 0 auto;
}

.ai_six_title_row {
  display: flex;
  align-items: center;
  justify-content: center;
 
  margin-bottom: 50px;
  text-align: center;
  >img{
    width: 680px;
    height: 100%;
  }
}
.ai_six_viewport{
  >img{
    width: 100%;
    height: 100%;
  }
}


.ai_seven {
  width: 100%;
  padding: 50px 0 72px;
  background-image: url('../img/260512/ai/aiopen_4.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.ai_seven_wrap {
  width: 1200px;
  margin: 0 auto;
}

.ai_seven_title_row {
  display: flex;
  align-items: center;
  justify-content: center;
 
  margin-bottom: 50px;
  text-align: center;
  >img{
    width: 580px;
    height: 100%;
  }
}
.ai_seven_viewport{
  >img{
    width: 100%;
    height: 100%;
  }
}

.ai_eight {
  width: 100%;
  padding: 50px 0 30px;
  background-color: #fff;
}

.ai_eight_wrap {
  width: 1350px;
  margin: 0 auto;
}

.ai_eight_title_row {
  display: flex;
  align-items: center;
  justify-content: center;
 
  margin-bottom: 0px;
  text-align: center;
  >img{
    width: 680px;
    height: 100%;
  }
}
.ai_eight_viewport{
  >img{
    width: 100%;
    height: 100%;
  }
}


@media (max-width: 1250px) {
  .ai_three_wrap,
  .ai_three_cards {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .ai_three_wrap {
    flex-direction: column;
    align-items: center;
  }

  .ai_three_left {
    width: 100%;
    max-width: 560px;
  }

  .ai_three_hero {
    width: 100%;
    max-width: 590px;
  }

  .ai_three_hero_img {
    width: 100%;
    height: auto;
  }

  .ai_three_cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .ai_four_wrap,
  .ai_three_wrap,
  .ai_three_cards {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .ai_four_grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ai_five_wrap {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .ai_five_item {
    flex: 0 0 calc((100% - 18px) / 2);
  }

  .ai_five_track {
    animation-duration: 20s;
  }
}


/* ============================================================================
 *  以下是 Vue → 纯静态 HTML 转换时追加的「等价补齐」规则。
 *  上面的原有规则一行未改，这里只补上去掉 Vue 专有语法 / 换标题标签之后
 *  失效的部分，渲染结果与老页面一致。
 * ========================================================================= */

/* ① 第二屏四个图标：老代码是 Vue 内联样式按 aitwo_tab 换图
 *      :style="{ backgroundImage: `url(${aitwo_tab === N ? hoverImg : normalImg})` }"
 *    配合 @mouseover="aitwo_tab = N" / @mouseleave="aitwo_tab = 0"。
 *    初始值 0 = 四项都是常态图，移入才换 —— 纯 CSS :hover 与它逐帧等价。
 *    这里按 nth-child 定位到四项，不新增 class、不动 HTML 结构。
 *    常态图 zhixiao_2 / 42 / 45 / 47，hover 图 zhixiao_1 / 41 / 44 / 46
 *    （文件名见 tools/renamed-images.json）。 */
.ai_two_kuan ul li:nth-child(1) .two_content_left_img_swap {
  background-image: url(../img/260512/zhixiao_2.png);
}
.ai_two_kuan ul li:nth-child(1):hover .two_content_left_img_swap {
  background-image: url(../img/260512/zhixiao_1.png);
}

.ai_two_kuan ul li:nth-child(2) .two_content_left_img_swap {
  background-image: url(../img/260512/zhixiao_42.png);
}
.ai_two_kuan ul li:nth-child(2):hover .two_content_left_img_swap {
  background-image: url(../img/260512/zhixiao_41.png);
}

.ai_two_kuan ul li:nth-child(3) .two_content_left_img_swap {
  background-image: url(../img/260512/zhixiao_45.png);
}
.ai_two_kuan ul li:nth-child(3):hover .two_content_left_img_swap {
  background-image: url(../img/260512/zhixiao_44.png);
}

.ai_two_kuan ul li:nth-child(4) .two_content_left_img_swap {
  background-image: url(../img/260512/zhixiao_47.png);
}
.ai_two_kuan ul li:nth-child(4):hover .two_content_left_img_swap {
  background-image: url(../img/260512/zhixiao_46.png);
}

/* ② 老代码 :class="{ two_text_hei: true, hover: aitwo_tab == N }" 的文字变色。
 *    上面第 86 行的 `.two_text_hei.hover` 原规则保留不动（作为来源记录），
 *    这里补一条挂在 li:hover 下的等价规则。
 *    刻意限定在 .ai_two_kuan 内：.two_text_hei 是通用类名，
 *    首页 / 直销页也在用，不能写成裸选择器。 */
.ai_two_kuan ul li:hover .two_text_hei {
  color: #FC7809;
}

/* ③ .ai_three_title 由 <div> 改成 <h2>（本页最醒目的可见标题，补语义）。
 *    这个 class 没写 margin，换标签后会白捡 reset.css 给 h1~h6 的
 *    margin-bottom:1em（= 60px），与下方 .ai_three_subtitle 的 margin-top:25px
 *    相邻外边距合并后整块下移 35px。这里归零，恢复 <div> 的默认表现。 */
.ai_three_title {
  margin-top: 0;
  margin-bottom: 0;
}

/* ④ 同理，.ai_three_card_title 由 <div> 改成 <h3>。
 *    若不归零会白捡 margin-bottom:1em（= 18px），与 .ai_three_card_desc 的
 *    margin-top:5px 合并后把卡片撑高。 */
.ai_three_card_title {
  margin-top: 0;
  margin-bottom: 0;
}