body {
  text-align: center;
  /* display: flex;   */
  /* justify-content: center;  
  align-items: center;   */
  /* height: 100vh;   */
}
h3 {
  font-weight: bold;
  font-size: 24px;
  color: #111111;
}
.text {
  font-weight: 400;
  font-size: 14px;
  color: #8D8D8D;
}
/* 敬业智慧协同办公平台 */
.office {
  height: 406px;
  background-image: url("../img/qywxOA/banner.jpg");
  background-size: cover; /* 覆盖整个容器，可能会裁剪图片 */  
  background-position: center; /* 图片居中 */  
  background-repeat: no-repeat; /* 图片不重复 */  
  padding-top: 154px;
}
.office .name {
  font-weight: 400;
  font-size: 24px;
  color: rgba(246, 253, 255, 0.41);
}
.office h1 {
  font-weight: bold;
  font-size: 50px;
  color: #F6FDFF;
  margin-top: 31px;
}
.office .title {
  width: 656px;
  font-weight: 400;
  font-size: 16px;
  color: #F6FDFF;
  margin: 30px auto 70px;
}
.office .use {
  display: block;
  width: 220px;
  height: 56px;
  background: #4E73DF;
  box-shadow: 0px 0px 14px 2px rgba(0,0,0,0.03);
  border-radius: 4px;
  border: 1px solid #6B91FF;
  font-weight: 400;
  font-size: 22px;
  color: #FFFFFF;
  margin: 0 auto;
  line-height: 56px;
}

/* 与企业微信连通，实现内外协同 */
.hub {
  height: 987px;
  padding-top: 102px;
  background: #FCFCFF;
}
.hub .subtitle {
  color: #585858;
  margin-top: 29px;
}
.hub ul {
  width: 1200px;
  margin: 55px auto 0;
}
.hub ul li {
  float: left;
  width: 300px;
  height: 260px;
  padding-top: 100px;
  background: #FFFFFF;
  box-shadow: 0px 0px 20px 0px rgba(106,137,229,0.1);
}
.hub li .title {
  font-weight: 400;
  font-size: 24px;
  color: #FFFFFF;
  text-align: left;
}
.hub li .explanation {
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  margin-top: 19px;
  text-align: left;
}
.hub li:first-of-type {
  background: url("../img/qywxOA/hub.png") -0px -840px no-repeat;
  width: 300px;
  height: 242px;
  padding-top: 118px;
}
.hub li:first-of-type .title {
  margin-left: 31px;
}
.hub li:first-of-type .explanation {
  margin-left: 30px;
}
.hub li .image {
  width: 80px;
  height: 80px;
  margin: 0 auto;
} 
.hub li:nth-of-type(2) .image {
  background: url("../img/qywxOA/hub.png") -0px -80px no-repeat;
}
.hub li:nth-of-type(3) .image {
  background: url("../img/qywxOA/hub.png") -0px -0px no-repeat;
}
.hub li:nth-of-type(4) .image {
  background: url("../img/qywxOA/hub.png") -0px -400px no-repeat;
}
.hub li:nth-of-type(5) .image {
  background: url("../img/qywxOA/hub.png") -0px -320px no-repeat;
}
.hub li:nth-of-type(6) .image {
  background: url("../img/qywxOA/hub.png") -0px -240px no-repeat;
}
.hub li:nth-of-type(7) .image {
  background: url("../img/qywxOA/hub.png") -0px -160px no-repeat;
}
.hub li h3 {
  font-size: 18px;
  margin-top: 40px;
  margin-bottom: 14px;
}
.hub li .text {
  width: 223px;
  margin: 0 auto;
}
.hub li:last-of-type {
  background: url("../img/qywxOA/hub.png") -0px -480px no-repeat;
  width: 300px;
  height: 242px;
  padding-top: 118px;
}
.hub li:last-of-type .title {
  margin-right: 49px;
  text-align: right;
}
.hub li:last-of-type .explanation {
  margin-right: 50px;
  text-align: right;
}

/* 适用场景 */
.scene {
  position: relative;
  height: 772px;
  padding-top: 44px;
  overflow: hidden;
}
.scene .subtitle {
  margin-top: 20px;
}
.scene .button {
  width: 717px;
  height: 64px;
  margin: 38px auto 0;
  display: flex; 
  gap: 0;
}
.scene .button .key-link {
  width: 179.25px;
  height: 64px;
  border: none; 
  border-bottom: 3px solid #F0F0F0;
  font-weight: 400;
  font-size: 16px;
  color: #444444;
  line-height: 64px;
}
.scene .button .key-link.active {
  color: #4E73DF;
  border-bottom: 3px solid #4E73DF;
}
.scene .image .key-content {
  position: absolute;
  top: 58%; /* 向上移动自身高度的50% */  
  left: 50%; /* 向左移动自身宽度的50% */  
  transform: translate(-50%, -50%); /* 通过transform属性调整位置，使其完全居中 */ 
  visibility: hidden;
  opacity: 0;
  width: 1032px;
  height:474px;
  margin: 60px auto 0;
  transition: opacity 1s ease-in-out;
}
.scene .image .key-content.active {
  visibility: visible;
  opacity: 1;
}
.scene .image .key-content:first-of-type {
  background: url("../img/qywxOA/scene.png") -0px -1422px no-repeat;
}
.scene .image .key-content:nth-of-type(2) {
  background: url("../img/qywxOA/scene.png") -0px -0px no-repeat;
}
.scene .image .key-content:nth-of-type(3) {
  background: url("../img/qywxOA/scene.png") -0px -474px no-repeat;
}
.scene .image .key-content:last-of-type {
  background: url("../img/qywxOA/scene.png") -0px -948px no-repeat;
}
.scene .key-content .bubble {
  position: absolute;
  bottom: -200px; /* 初始位置在视口之外 */  
  background-color: #4E73DF;  
  border: 1px solid #4E73DF;  
  border-radius: 20px;  
  padding: 5px;  
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  
  width: 160px;  
  text-align: center;  
  margin: 0; /* 移除外边距，因为使用了绝对定位 */ 
}
.scene .bubble.one {
  animation: rise 1s ease-out forwards; /* 应用动画 */  
}

.scene .bubble.two {
  animation: rise_two 2s ease-out forwards; /* 应用动画 */ 
}
.scene .bubble.three {
  animation: rise_three 3s ease-out forwards; /* 应用动画 */  
}
.scene .bubble.four {
  animation: rise_four 1s ease-out forwards; /* 应用动画 */  
}

.scene .bubble.five {
  animation: rise_five 2s ease-out forwards; /* 应用动画 */  
}
.scene .bubble.six {
  animation: rise_six 3s ease-out forwards; /* 应用动画 */  
}.scene .bubble.seven {
  animation: rise_seven 1s ease-out forwards; /* 应用动画 */  
}

.scene .bubble.eight {
  animation: rise_eight 2s ease-out forwards; /* 应用动画 */ 
}
.scene .bubble.nine {
  animation: rise_nine 3s ease-out forwards; /* 应用动画 */  
}.scene .bubble.ten {
  animation: rise_ten 1s ease-out forwards; /* 应用动画 */  
}

.scene .bubble.eleven {
  animation: rise_eleven 2s ease-out forwards; /* 应用动画 */ 
}
.scene .bubble.twelve {
  animation: rise_twelve 3s ease-out forwards; /* 应用动画 */  
}
.scene .bubble p {  
  margin: 0;
  color: #fff;  
}  

.scene .arrow {  
  width: 0;  
  height: 0;  
  border-left: 10px solid transparent;  
  border-right: 10px solid transparent;  
  border-top: 10px solid #4E73DF; /* 箭头颜色与气泡背景相同 */  
  position: absolute;  
  bottom: -10px; /* 箭头顶部与气泡底部对齐 */  
  left: 50%;  
  margin-left: -10px; /* 使箭头居中 */  
}  
.scene .arrows {  
  width: 0;  
  height: 0;  
  border-left: 10px solid transparent;  
  border-right: 10px solid transparent;  
  border-bottom: 10px solid #4E73DF; /* 箭头颜色与气泡背景相同 */  
  position: absolute;  
  top: -10px; /* 箭头顶部与气泡顶部边缘外10px处对齐（因为箭头高度为10px，所以底部与气泡顶部对齐） */  
  left: 50%;  
  margin-left: -10px; /* 使箭头水平居中 */  
  z-index: -1; /* 确保箭头在气泡之下 */

}  

/* 定义动画 */  
@keyframes rise {  
  0% {  
      left: -1%;  
      bottom: 41.5%; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  } 
  100% {  
      left: -1%; 
      bottom: 53%; /* 结束位置，可以根据需要调整 */  
      opacity: 1; /* 结束透明度 */  
  }  
}

@keyframes rise_two {  
  0% {
      left: 28.8%;  
      bottom: 0px; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  }  
  30% {  
      left: 28.8%;
      bottom: 0px; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  }
  100% {  
      left: 28.8%;
      bottom: 11.5%; /* 结束位置，可以根据需要调整 */  
      opacity: 1; /* 结束透明度 */  
  }  
}
@keyframes rise_three {  
  0% {
      left: 80.2%;  
      bottom: 51.5%; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  }  
  50% {  
      left: 80.2%; 
      bottom: 51.5%; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  }
  100% {  
      left: 80.2%; 
      bottom: 63%; /* 结束位置，可以根据需要调整 */  
      opacity: 1; /* 结束透明度 */  
  }  
}
@keyframes rise_four {  
  0% {  
      left: 3%;  
      bottom: 30.5%; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  } 
  100% {  
      left: 3%; 
      bottom: 42%; /* 结束位置，可以根据需要调整 */  
      opacity: 1; /* 结束透明度 */  
  }  
}

@keyframes rise_five {  
  0% {
      left: 62.8%;  
      bottom: 2%; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  }  
  30% {  
      left: 62.8%;
      bottom: 2%; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  }
  100% {  
      left: 62.8%;
      bottom: 13.5%; /* 结束位置，可以根据需要调整 */  
      opacity: 1; /* 结束透明度 */  
  }  
}
@keyframes rise_six {  
  0% {
      left: 86%;  
      bottom: 42.5%; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  }  
  50% {  
      left: 86%; 
      bottom: 42.5%; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  }
  100% {  
      left: 86%; 
      bottom: 54%; /* 结束位置，可以根据需要调整 */  
      opacity: 1; /* 结束透明度 */  
  }  
}
@keyframes rise_seven {  
  0% {  
      left: -0.5%;  
      bottom: 36.5%; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  } 
  100% {  
      left: -0.5%; 
      bottom: 48%; /* 结束位置，可以根据需要调整 */  
      opacity: 1; /* 结束透明度 */  
  }  
}

@keyframes rise_eight {  
  0% {
      left: 53.2%;  
      bottom: 0px; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  }  
  30% {  
      left: 53.2%;
      bottom: 0px; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  }
  100% {  
      left: 53.2%;
      bottom: 11.5%; /* 结束位置，可以根据需要调整 */  
      opacity: 1; /* 结束透明度 */  
  }  
}
@keyframes rise_nine {  
  0% {
      left: 78.2%;  
      bottom: 53.5%; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  }  
  50% {  
      left: 78.2%; 
      bottom: 53.5%; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  }
  100% {  
      left: 78.2%; 
      bottom: 65%; /* 结束位置，可以根据需要调整 */  
      opacity: 1; /* 结束透明度 */  
  }  
}
@keyframes rise_ten {  
  0% {  
      left: 14%;  
      bottom: 41.5%; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  } 
  100% {  
      left: 14%; 
      bottom: 53%; /* 结束位置，可以根据需要调整 */  
      opacity: 1; /* 结束透明度 */  
  }  
}

@keyframes rise_eleven {  
  0% {
      left: 31.15%;  
      bottom: 9.7%; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  }  
  30% {  
      left: 31.15%;
      bottom: 9.7%; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  }
  100% {  
      left: 31.15%;
      bottom: 21.2%; /* 结束位置，可以根据需要调整 */  
      opacity: 1; /* 结束透明度 */  
  }  
}
@keyframes rise_twelve {  
  0% {
      left: 68.5%;  
      bottom: 46.1%; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  }  
  50% {  
      left: 68.5%; 
      bottom: 46.1%; /* 初始位置 */  
      opacity: 0; /* 初始透明度 */  
  }
  100% {  
      left: 68.5%; 
      bottom: 57.6%; /* 结束位置，可以根据需要调整 */  
      opacity: 1; /* 结束透明度 */  
  }  
}
/* 四个亮点 */
.highlight {
  height: 620px;
  padding-top: 87px;
  background: #FCFCFF;
}
.highlight .subtitle {
  margin-top: 21px;
}
.highlight ul {
  width: 1200px;
  height: 360px;
  margin: 76px auto 0;
}
.highlight ul li {
  float: left;
  width: 300px;
  height: 257px;
  padding-top: 103px;
  background: #FFFFFF;
  box-shadow: 0px 0px 20px 0px rgba(106,137,229,0.1);
}
.highlight li div {
  width: 80px;
  height: 80px;
  margin: 0 auto;
}
.highlight li:first-of-type div {
  background: url("../img/qywxOA/highlight.png") -0px -0px no-repeat;
} 
.highlight li:nth-of-type(2) div {
  background: url("../img/qywxOA/highlight.png") -0px -240px no-repeat;
} 
.highlight li:nth-of-type(3) div {
  background: url("../img/qywxOA/highlight.png")  -0px -80px no-repeat;
} 
.highlight li:last-of-type div {
  background: url("../img/qywxOA/highlight.png") -0px -160px no-repeat;
} 
.highlight li h3 {
  font-size: 22px;
  margin-top: 55px;
  margin-bottom: 23px;
}

/* 数千家客户的信任与选择 */
.client {
  padding-top: 84px;
  padding-bottom: 20px;
}
.client .subtitle {
  margin-top: 25px;
  margin-bottom: 24px;
}

/* 为客户提供更加贴心、周到的服务 */
.service {
  height: 546px;
  padding-top: 94px;
}
.service ul {
  width: 1200px;
  height: 360px;
  margin: 75px auto 0;
}
.service ul li {
  float: left;
  width: 320px;
  height: 313px;
  margin-right: 120px;
  padding-top: 47px;
  background: #FFFFFF;
  box-shadow: 0px 0px 20px 0px rgba(106,137,229,0.1);
}
.service ul li:last-of-type {
  margin-right: 0;
}
.service li .text {
  color: #444444;
  margin-top: 18px;
}
.service li div {
  width: 200px;
  height:150px;
  margin: 43px auto 0;
}
.service li:first-of-type div {
  background: url("../img/qywxOA/service.png") -0px -150px no-repeat;
  width: 195px;
  height: 193px;
}
.service li:nth-of-type(2) div {
  background: url("../img/qywxOA/service.png") -0px -343px no-repeat;
}
.service li:last-of-type div {
  background: url("../img/qywxOA/service.png") -0px -0px no-repeat;
}

   /* Modal styles */  
   .modal {  
    display: none; /* Hidden by default */  
    position: fixed; /* Stay in place */  
    z-index: 1001; /* Sit on top */  
    left: 0;  
    top: 0;  
    width: 100%; /* Full width */  
    height: 100%; /* Full height */  
    overflow: auto; /* Enable scroll if needed */  
    background-color: rgb(0,0,0); /* Fallback color */  
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */  
}  

  /* Modal Content (Image) */  

    .modal .modal-content {  
      position: fixed;
      width: 320px;
      height: 332px;
      background: #FFFFFF;
      box-shadow: 0px 0px 20px 0px rgba(106,137,229,0.1);
      border-radius: 10px;
      text-align: center;
      padding: 0;
      left: 50%;  
      top: 50%; 
      transform: translate(-50%, -50%);  
    }  
  
    .modal .modal-content .introduce {
      display: flex;  
      justify-content: space-between; /* 在容器内分配空间，左边居中，右边对齐 */  
      align-items: center; /* 垂直居中，如果需要的话 */  
      width: 320px;
      height: 50px;
      background: #4E73DF;
      border-radius: 10px 10px 0px 0px;
      font-weight: 400;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 50px;
      margin-left: 0;
    }
    .modal .introduce p {
      flex: 1; /* 使这个div占据除span外的所有空间，并允许它内部的p居中 */  
      text-align: center; /* 使p内的文本居中 */  
      /* display: inline-block;
      vertical-align: middle; */
    }
    .modal .close {  
      /* display: inline-block; */
      /* color: #aaaaaa;   */
      color: #FFFFFF;
      font-size: 28px;  
      font-weight: bold;  
      margin-right: 5px;
      /* vertical-align: middle; */
      line-height: 50px;
    }  
      
    .modal .close:hover,  
    .modal .close:focus {  
      color: #FFFFFF;
      text-decoration: none;  
      cursor: pointer;  
    }
    .modal .modal-content img {
      margin-top: 30px;
    }
    .modal .modal-content .addition {
      font-weight: 400;
      font-size: 16px;
      line-height: 20px;
      margin-top: 10px;
    }