.product {
    width: 100%;
    height: auto;
    background-color: white;
  }
  /* lunbo */
  .lunbo {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    z-index: 888;
    background-color: transparent;
  }
  /* For demo */
  .ant-carousel >>> .slick-slide {
    text-align: center;
    height: 320px;
    line-height: 320px;
    background: #364d79;
    overflow: hidden;
  }
  
  .ant-carousel >>> .slick-slide h3 {
    color: black;
  }
  .ant-tabs-nav .ant-tabs-tab:hover {
      /* color: #40a9ff; */
      color: #ec1b2a;
  }
  /* two */
  .pro_two {
    width: 100%;
    height: 123px;
    background-color: white;
    display: flex;
    justify-content: center;
    z-index: 666;
  }
  .two_kuan {
    width: 1200px;
    height: 121px;
    margin-top: -60px;
    background-color: white;
    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; /*底边阴影*/
   
    }
  .two_content {
    flex-grow: 1;
    width: 344px;
    height: 121px;
    /* background-color: slateblue; */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .two_content_left {
    /* flex-grow: 1; */
    width: 70px;
    height: 121px;
    /* text-align: right; */
    background-position: center;
    background-repeat: no-repeat;
  }

  .two_content_left.img1{
    background-image: url(../img/260410/自动化ai.png);
  }

  /* .protwo_tab_active .two_content_left.img1{
    background-image: url(../img/2_1_1.png);
  } */

  .two_content_left.img2{
    background-image: url(../img/260410/客服系统.png);
  }

  /* .protwo_tab_active .two_content_left.img2{
    background-image: url(../img/2_2_1.png);
  } */

  .two_content_left.img3{
    background-image: url(../img/260410/自动殷勤.png);
  }

  /* .protwo_tab_active .two_content_left.img3{
    background-image: url(../img/2_3_1.png);
  } */

  .two_content_left.img4{
    background-image: url(../img/260410/定制化.png);
  }

  /* .protwo_tab_active .two_content_left.img4{
    background-image: url(../img/2_4_1.png);
  } */

  .protwo_tab_active .two_text1{
    color: #f6474a;
  }

  /* .two_content_left > p {
    margin: 0;
    padding-top: 36px;
    padding-right: 20px;
  } */
  .two_content_right {
    /* flex-grow: 2;
    width: 115px; */
    height: 121px;
    font-size: 18px;
    color: red;
    /* background-color: sandybrown; */
  }
  .two_text1 {
    margin: 0;
    padding-top: 36px;
    color: #4d4d4d;
    font-size: 18px;
  }
  /* .two_texthei {
    margin: 0;
    padding-top: 36px;
    color: #4d4d4d;
    font-size: 18px;
  } */
  .two_text2 {
    margin: 0;
    padding-top: 4px;
    font-size: 14px;
    color: #999999;
  }
  
  /* three */
  .product_three {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
  }
  .three_kuan {
    width: 1200px;
    height: 1000px;
    /* background-color: sandybrown; */
  }
  /* .three_kong {
    width: 100%;
    height: 63px;
    background-color: goldenrod;
  } */
  .three_character {
    width: 100%;
    height: 194px;
    /* background-color: saddlebrown; */
  }
  .three_character_title {
    margin: 0;
    /* padding-top: 50px; */
    font-size: 38px;
    font-weight: bold;
    text-align: center;
  }
  .three_character_dec {
    margin: 0;
    font-size: 16px;
    padding: 32px 282px 0 282px;
    text-align: center;
    color: #808080;
  }
  .three_picture {
    width: 100%;
    height: 691px;
    /* background-color: salmon; */
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
  .three_picture > img {
    width: auto;
    height: 692px;
  }
  
  /* four */
  .product_four {
    width: 100%;
    height: 559px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
  }
  .four_kuan {
    width: 1200px;
    height: 499px;
    /* background-color: aquamarine; */
  }
  .four_top {
    width: 100%;
    height: 191px;
    text-align: center;
    /* background-color: slateblue; */
  }
  .four_top_title {
    margin: 0;
    font-size: 38px;
    padding-top: 49px;
  }
  .four_top_dec {
    margin: 0;
    padding-top: 28px;
    font-size: 16px;
    color: #808080;
  }
  .four_center {
    width: 100%;
    height: auto;
    /* background-color: saddlebrown; */
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
  .four_center_kuan {
    width: 1200px;
    height: auto;
    /* background-color: sandybrown; */
    display: flex;
    justify-content: flex-start;
  }
  .four_center_kuan ul{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    /* background-color: saddlebrown; */
    display: flex;
    justify-content: flex-start;
  }
  .four_center_kuan ul li{
    flex-grow: 1;
    width: 240px;
    height: auto;
    /* border: 1px solid #333; */
    /* background-color: #4aa9eb; */
  }
  .four_center_kuan ul li:hover{
    box-shadow: -5px 0 5px #eff1f2, /*左边阴影*/ 5px 0 5px #eff1f2,
      /*右边阴影*/ 0 -5px 5px #eff1f2, /*顶部阴影*/ 0 5px 5px #eff1f2; /*底边阴影*/
  }

  .four_center_kuan_one {
    flex-grow: 1;
    width: 240px;
    height: 231px;
    /* background-color: slategrey; */
  }
  .four_one_top {
    width: 240px;
    height: 85px;
    /* background-color: steelblue; */
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  .four_one_top_title {
    margin: 0;
    padding-top: 30px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }
  .four_one_top_dec {
    margin-top: 10px;
    padding: 0 14px;
    text-align: center;
    font-size: 18px;
    color: #999;
  }
  .four_center_kuan_one img {
    width: auto;
    height: 85px;
  }
  .four_center_kuan ul li:hover .four_one_top>img{
    transform:scale(1.1);
    -webkit-transform:scale(1.1);  /*兼容-webkit-引擎浏览器*/
    -moz-transform:scale(1.1);  
  }
  .four_center_kuan ul li:hover .four_one_top_title{
    font-size: 19px;
  }
  .four_center_kuan ul li:hover .four_one_top_dec{
    font-size: 19px;
  }
  .four_center_kuan_two {
    flex-grow: 1;
    width: 254px;
    height: 231px;
    background-color: seagreen;
  }
  .four_center_kuan_three {
    flex-grow: 1;
    width: 254px;
    height: 231px;
    background-color: steelblue;
  }
  .four_center_kuan_four {
    flex-grow: 1;
    width: 254px;
    height: 231px;
    background-color: sandybrown;
  }
  .four_center_kuan_five {
    flex-grow: 1;
    width: 254px;
    height: 231px;
    background-color: skyblue;
  }
  
  /* five */
  .product_five {
    width: 100%;
    height: 749px;
    background-color: white;
    display: flex;
    justify-content: center;
  }
  .five_kuan {
    width: 1200px;
    height: 749px;
    /* background-color: sandybrown; */
  }
  .five_top {
    width: 100%;
    height: 219px;
    /* background-color: saddlebrown; */
    text-align: center;
  }
  .five_top_title {
    font-size: 38px;
    color: #000;
    margin: 0;
    padding-top: 52px;
  }
  .five_top_dec {
    font-size: 16px;
    color: #808080;
    margin: 0;
    padding-top: 30px;
  }
  .five_bottom {
    width: 100%;
    height: 528px;
    margin-left: 30px;
    /* background-image: url("../assets/img/five_fourtel.png"); */
    /* background-image: url("../img/five_fourtel.png"); */
    background-image: url("../img/260410/5ebe6df04a3fafa24e71cfc27c70f559.jpg");
    /* background-position: 100% 100%; */
    background-size: 100%;
    background-repeat: no-repeat;
  }
  /* six */
  .product_six {
    width: 100%;
    height: 278px;
    /* background-image: url("../assets/img/product_six_background.png"); */
    background-image: url("../img/product_six_background.png");
    background-position: center;
    display: flex;
    justify-content: center;
  }
  .six_content {
    width: 1200px;
    height: 278px;
    /* background-color: saddlebrown; */
  }
  .six_bottom {
    width: 100%;
    height: 147px;
    /* background-color: cadetblue; */
    display: flex;
    justify-content: space-between;
  }
  .six_top {
    width: 100%;
    height: 131px;
    /* background-color: saddlebrown; */
  }
  
  .six_left {
    width: 360px;
    height: 100%;
    /* background-color: blueviolet; */
    display: flex;
    justify-content: flex-start;
  }
  .six_middle {
    width: 450px;
    height: 100%;
    /* background-color: blueviolet; */
    display: flex;
    justify-content: flex-start;
  }
  .six_left_image {
    width: auto;
    height: 100%;
    /* background-color: slateblue; */
  }
  .six_left_dec {
    flex-grow: 2;
    width: 100px;
    text-align: center;
    font-size: 24px;
    color: white;
  }
  .six_left_dec >p:first-child {
    margin: 0;
    padding-left: 20px;
    text-align: left;
  }
  .six_left_dec >p:last-child {
    margin: 0;
    font-size: 16px ;  
    line-height: 1.5;
    padding-left: 20px;
    text-align: left;
    padding-top: 10px;
    color: rgba(255, 255, 255, .7);
   
  }
  .six_center {
    width: 450px;
    height: 100%;
    /* background-color: sandybrown; */
  }
  .six_right {
    width: 376px;
    height: 100%;
    /* background-color: skyblue; */
  }
  .six_top_title {
    color: white;
    font-size: 38px;
    text-align: center;
    margin: 0;
    padding-top: 33px;
  }
  
  /* seven */
  .product_seven {
    width: 100%;
    height: 993px;
    background-color: white;
    display: flex;
    justify-content: center;
  }
  .seven_content {
    max-width: 1200px;
    min-width: 1200px;
    height: 993px;
    /* background-color: burlywood; */
    /* display: flex; */
  }
  .seven_center {
    width: 100%;
    height: auto;
    background-color: salmon;
  }
  .seven_center ul{
    width: 100%;
    height: auto;
    background-color: white;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .seven_center ul li{
    width: 220px;
    height: 220px;
    /* border: 1px solid #ccc; */
    margin-top: 20px;
    border-radius: 8px;
    /* border: 1px solid #ccc; */
    box-shadow: -3px 0 3px #eff1f2, /*左边阴影*/ 3px 0 3px #eff1f2,
      /*右边阴影*/ 0 -3px 3px #eff1f2, /*顶部阴影*/ 0 3px 3px #eff1f2; /*底边阴影*/
    /* background-color: saddlebrown; */
  }
  .seven_center ul li:hover{
    box-shadow: -6px 0 6px #eff1f2, /*左边阴影*/ 6px 0 6px #eff1f2,
      /*右边阴影*/ 0 -6px 6px #eff1f2, /*顶部阴影*/ 0 6px 6px #eff1f2; /*底边阴影*/
  }
  
  .imagecenter {
    width: auto;
    height: 44px;
    padding-top: 17px;
    text-align: center;
  }
  .seven_content_title {
    margin: 0;
    padding-top: 33px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
  }
  .seven_content_dec {
    font-size: 14px;
    text-align: center;
    color: #4d4d4d;
    padding: 15px 10px 0 10px;
  }
  .seven_center ul li:hover .seven_content_title{
    font-size: 22px;
  }
  .seven_center ul li:hover .seven_content_dec{
    font-size: 15px;
  }
  .seven_center ul li:hover .imagecenter{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
  }
  .seven_top {
    width: 100%;
    text-align: center;
    height: 198px;
    /* background-color: seagreen; */
  }
  .dosomething {
    margin: 0;
    padding-top: 50px;
    margin-bottom: 0;
    font-size: 38px;
    color: #000;
  }
  .shengtaitixi {
    margin-top: 34px;
    font-size: 16px;
    color: #808080;
  }
  
  /* eight */
  .product_eight {
    width: 100%;
    height: 777px;
    background-image: url("../img/260410/20.png");
    background-position: center;
    display: flex;
    justify-content: center;
    align-content: center;
  }
  .peight_zhuanye {
    margin-top: 34px;
    /* margin-left: 16px; */
    width: 1200px;
    height: 684px;
    /* background-color: saddlebrown; */
  }
  .peight_zhuanye ul{
    width: 100%;
    height: 100%;
    /* background-color: #4aa9eb; */
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .peight_zhuanye ul li{
    margin-top: 154px;
    width: 280px;
    height: 179px;
    /* border: 1px solid #ccc; */
  }
  
  .eight_title {
    margin-top: 15px;
    margin-bottom: 0;
    text-align: center;
    font-size: 28px;
    color: #fff;
  }
  .eight_dec {
    text-align: center;
    font-size: 16px;
    color: rgba(255, 255, 255, .7);
    padding: 18px 18px 0 18px;
  }
  .peight_zhuanye ul li:hover .eight_title{
    font-size: 29px;
  }
  .peight_zhuanye ul li:hover .eight_dec{
    font-size: 17px;
  }

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

/* ① 【已修正】关于文件开头第 16 / 24 行那两条 `.ant-carousel >>> .slick-slide`
 *
 *    最初的转换把它们当成「老项目里生效、只是语法要改」来移植，结果 banner
 *    矮了 68px，整页内容上移。
 *
 *    实测结论：这两条规则在老项目里【根本没有生效】，是死代码。
 *    证据（用 tools/measure.js 扫描截图列像素，精确到 1px）：
 *        老站 banner 高 388px  ← 正好等于 lunbo1.png 的原生高度 388px
 *        规则里写的是 height: 320px
 *    如果规则生效，老站就该是 320px。而且 `background: #364d79`（深蓝）
 *    在老页面任何地方都看不到。
 *
 *    原因：这些 CSS 是通过 `<style scoped>` 里的 @import 引入的，
 *    vue-loader 并没有对 @import 进来的内容做 `>>>` → 后代选择器的转换，
 *    所以 `>>>` 原样留在产物里，作为非法组合符被浏览器整条丢弃。
 *
 *    所以：不移植它们，才是「和老页面一模一样」。
 *
 *    老页面 banner 的真实渲染方式是 —— 图片按原生尺寸（1920×388）显示，
 *    横向溢出部分由 antd 的 `.slick-list { overflow: hidden }` 裁掉。
 *    新结构里没有 .slick-list，所以把裁切放到 .ant-carousel 上，
 *    并补一条 antd 里真正生效过的 `.slick-slide img { display: block }`。 */
.ant-carousel {
  overflow: hidden;
}
.ant-carousel .slick-slide img {
  display: block;
}

/*    幻灯片内的包裹层。复刻 antd 渲染出的
 *        <div style="width: 100%; display: inline-block;">
 *    它是 inline-level 的，所以 <img> 会落在行盒基线上，
 *    行高在图片下方留出约 5px 下沿空隙。老页面 banner 就是靠这 5px
 *    比 CSS 算出的位置低一点，下面 margin-top:-60px 的白卡片也跟着低。
 *    不要「优化」成 display:block —— 那 5px 会消失，整页上移。 */
.ant-carousel .slide-inner {
  width: 100%;
  display: inline-block;
}

/* ② 老代码：<div @mouseover="protwo_tab=N" :class="{protwo_tab_active: protwo_tab==N}">
 *    protwo_tab 初始为 0 → 首屏第一项高亮（HTML 里已静态写死 protwo_tab_active），
 *    鼠标移入某一项时高亮跟着走。
 *    这里用纯 CSS 复刻：鼠标进入这一整排时，默认高亮项让位为常态色，
 *    当前悬停项变红。两条规则特异度相同，靠书写顺序保证「悬停第一项时仍是红色」。 */
.two_kuan:hover .protwo_tab_active .two_text1 { color: #4d4d4d; }
.two_kuan .two_content:hover .two_text1       { color: #f6474a; }

/* ③ 第六屏三个层级名（员工办公协同层 / 客户接待转化层 / 经营决策分析层）
 *    原来是 .six_left_dec 里没有 class 的第一个 <p>，补语义后改成 <h3>，
 *    上面第 420 行的 `.six_left_dec >p:first-child` 就不再匹配了。
 *    这里补一条声明完全相同的规则，渲染逐像素不变。
 *    （第二个 <p> 仍是 :last-child，原规则继续生效，无需处理。） */
.six_left_dec > h3:first-child {
  margin: 0;
  padding-left: 20px;
  text-align: left;
}