* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: Arial, sans-serif;
     background-color: #fff;
     width: 100%;
     height: 100%;
     /* 确保页面加载时在顶部 */
     scroll-snap-type: y mandatory;
 }

 /* 深灰色背景（模拟原图） */
 .contact-box {
     position: fixed;
     display: flex;
     flex-direction: column;
     align-items: center;
     height: 100vh;
     width: 100vw;
     background-color: rgba(42, 42, 42, 0.8);
     z-index: 10000;
 }

 /* 左侧商务图片占位 */
 .left-image {
     background: url('../img/contact.webp') no-repeat center;
     background-size: cover;
     width: 284px;
     height: 354px;
     border-top-left-radius: 8px;
     border-bottom-left-radius: 8px;
 }

 .right-image {
     width: 378px;
     padding-left: 25px;
     padding-top: 42px;
 }


 /* 弹框样式 */
 .contact-popup {
     width: 661px;
     height: 354px;
     margin: auto 50px auto 0;
     background: white;
     backdrop-filter: blur(5px);
     border-radius: 8px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     display: flex;
     flex-direction: row;
 }

 .hidden {
     display: none;
 }

 .contact-popup h2 {
     font-family: Yuanti SC, Yuanti SC;
     font-weight: bold;
     font-size: 20px;
     color: #000000;
     line-height: 16px;
     letter-spacing: 1px;
     text-align: left;
     font-style: normal;
     text-transform: none;
 }

 .email {
     margin-top: 60px;
     font-family: Yuanti SC, Yuanti SC;
     font-weight: 400;
     font-size: 14px;
     color: #000000;
     line-height: 14px;
     text-align: left;
     font-style: normal;
     text-transform: none;
     display: flex;
     flex-direction: row;
     align-items: center;
 }

 .email span {
     margin-left: 10px;
 }

 .cross-btn {
     position: absolute;
     top: 22px;
     right: 22px;
     width: 11px;
     height: 11px;
     cursor: pointer;
     background: url(../img/cross@2x.png) no-repeat center;
     background-size: cover;
 }

 .address {
     margin-top: 22px;
     font-family: Yuanti SC, Yuanti SC;
     font-weight: 400;
     font-size: 14px;
     color: #000000;
     line-height: 20px;
     text-align: left;
     font-style: normal;
     text-transform: none;
     display: flex;
     flex-direction: row;
     align-items: flex-start;
 }

 .address span {
     margin-left: 10px;
 }

 .foot {
     width: clamp(1440px, 100vw, 1920px);
     height: 356px;
     background-color: #282828;
     display: flex;
     flex-direction: column;
     justify-content: center;
     /* 垂直居中 */
     align-items: center;
     /* 水平居中 */
     position: relative;
 }

 .beian {
     position: absolute;
     bottom: 20px;
     /* 调整这个值可以改变备案号距离底部的距离 */
     left: 50%;
     transform: translateX(-50%);
     color: white;
 }

 .beian span a{
    color: white;
    margin-left: 2px;
 }

 .foot-logo {
     text-align: center;
     /* 确保图片在容器内水平居中 */
 }

 .container {
     width: clamp(1440px, 100vw, 1920px);
     margin: 0 auto;
     position: relative;
     background-color: #fff;
     min-height: 850px;
     font-family: Yuanti SC, Yuanti SC;
 }

 .nav-head {
     position: fixed;
     /* 关键！固定在视口顶部 */
     width: 100%;
     background-color: rgba(255, 255, 255, 0.5);
     display: flex;
     flex-direction: column;
     align-items: center;
     height: 80px;
     z-index: 99;

 }

 .nav-head .nav-logo {
     margin-left: 50px;
     margin-top: 30px;
     height: 20px
 }

 .nav-head .nav-container {
     position: relative;
     /* 关键！固定在视口顶部 */
     width: clamp(1440px, 100vw, 1920px);
     display: flex;
     background-color: rgba(255, 255, 255, 0.5);
     justify-content: space-between;
     height: 80px;
     z-index: 99;
 }



 .container .home-page {
     height: 960px;
     position: relative;
 }

 .container .vision-page {
     height: 850px;
     position: relative;
     background-color: #F5F5F5;
 }


 .container .home-page .logo-container {
     position: absolute;
     left: clamp(0px, 12.5vw, 240px);
     /* 随屏幕缩小，最小为 0 */
     top: 361px;
 }

 .container .home-page .home-logo {
     width: 674px
 }

 .container .home-page .logo-container .logo-content {
     width: 700px;
     height: 100px;
     margin-top: 36px;
     font-family: Yuanti SC, Yuanti SC;
     font-weight: 400;
     font-size: 25px;
     color: #666666;
     line-height: 50px;
     letter-spacing: 1px;
     text-align: left;
     font-style: normal;
     text-transform: none;
 }

 .container .building-container {
     position: absolute;
     width: 682px;
     height: 1052px;
     left: clamp(800px, 55.7vw, 1069px);
     /* 随屏幕缩小，最小为 0 */
     top: 0px;
     z-index: 100;


 }

 .container .building-container .building-img {
    width: 100%;
    height: 100%;
    background: url('../img/building.webp') no-repeat center;
    background-size: cover;
 }


 .contact-container {
     font-size: 16px;
     margin-right: 50px;
     margin-top: 30px;
     width: 58px;
     height: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
     cursor: pointer;
     font-weight: normal;
     transition: font-weight 0.3s ease;
 }

 .blue-line-normal {
     background-color: #266AB4;
     width: 100%;
     height: 1.5px;
     transition: width 0.3s ease;
     /* 添加过渡动画 */
 }

 .contact-container:hover {
     font-weight: bold;
     transition: font-weight 0.3s ease;
 }

 .contact-container:hover .blue-line-normal {
     width: 50%;
     transition: width 0.3s ease;
 }

 .scroll-container {
     width: 60px;
     height: 60px;
     position: absolute;
     bottom: 70px;
     left: clamp(0px, 12.5vw, 240px);
     /* 随屏幕缩小，最小为 0 */
     transition: height 0.3s ease;
 }

 .scroll-container:hover {
     height: 70px;
 }

 .scroll-line {
     width: 1px;
     height: 42px;
     position: absolute;
     left: 5px;
     bottom: 0px;
     background-color: #266AB4;
 }

 .scroll-text {
     position: absolute;
     transform: rotate(-90deg);
     transform-origin: left top;
     width: 80px;
     height: 50px;
     left: 0px;
     top: 0px;
     font-weight: 400;
     font-size: 10px;
     color: #000000;
     line-height: 10px;
     letter-spacing: 1px;
     text-align: left;
     font-style: normal;
     text-transform: none;
 }

 .vision-title {
     position: absolute;
     top: 70px;
     left: clamp(0px, 12.5vw, 240px);
     /* 随屏幕缩小，最小为 0 */
     display: flex;
     height: 20px;
     align-items: center;
 }

 .vision-line {
     width: 80px;
     height: 1px;
     background-color: #000000;
 }

 .vision-text {
     margin-left: 86px;
     font-size: 20px;
     font-family: Yuanti SC, Yuanti SC;
     font-weight: bold;
     font-size: 20px;
     line-height: 20px;
     letter-spacing: 1px;
     text-align: left;
     font-style: normal;
     text-transform: none;
 }

 /* 响应式设计 - 当屏幕小于1290px时 */
 /* @media (max-width: 1920px) {
     .container {
         width: 100%;
         padding: 20px 15px;
     }
 } */

 .vision-content {
     position: absolute;
     left: clamp(0px, 12.5vw, 240px);
     /* 随屏幕缩小，最小为 0 */
     top: 305px;
     display: flex;
 }

 .vision-bold {
     width: 654px;
     font-weight: bold;
     font-size: 40px;
     color: rgba(0, 0, 0, 0.9);
     line-height: 60px;
     letter-spacing: 3px;
     text-align: left;
     font-style: normal;
     text-transform: none;
 }

 .vision-normal {
     margin-left: 90px;
     font-family: Yuanti SC, Yuanti SC;
     font-weight: 400;
     font-size: 18px;
     color: #666666;
     line-height: 40px;
     letter-spacing: 1px;
     text-align: left;
     font-style: normal;
     text-transform: none;
 }

 .vision-mark{
    background-color: #37B0B7;
    position: absolute;
    width: 120px;
    height: 36px;
    line-height: 24px;
    left: -3px;
 }

 .product-left .product-l-b {
     position: absolute;
     display: flex;
     left: clamp(0px, 12.5vw, 240px);
     /* 随屏幕缩小，最小为 0 */
     bottom: 88px;
     transition: bottom 1s ease;
 }

 .product-left:hover .product-l-b {
     bottom: 128px;
     transition: bottom 1s ease;
 }

 .product-left .product-l-b-l-line {
     width: 169px;
     height: 2px;
     background: #266AB4;
     border-radius: 0px 0px 0px 0px;
     margin-top: 29px;
     transition: width 1s ease;
 }

 .product-left:hover .product-l-b-l-line {
     width: 372px;
     transition: width 1s ease;
 }

 .product-l-b-icon {
     width: 58px;
     height: 57px;
     margin-left: 74px;
     margin-top: 21px;
 }

 .product-l-b-l-conent {
     width: 396px;
     height: 90px;
     font-family: Yuanti SC, Yuanti SC;
     font-weight: 400;
     font-size: 30px;
     color: #FFFFFF;
     line-height: 45px;
     letter-spacing: 2px;
     text-align: left;
     font-style: normal;
     text-transform: none;
 }

 .product-page {
     height: 850px;
     width: 100%;
     display: flex;
 }

 .product-left {
     position: relative;
     height: 100%;
     width: 50%;
     background: url('../img/product-l.webp') no-repeat center center;
     background-size: cover;
     transition: background-size 1s ease;
     background-size: 100% 100%;
 }

 .product-left:hover {
     background-size: 150% 150%;
     transition: background-size 1s ease;
 }


 .product-left::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.85);
     transition: background-color 1s ease;
     /* 85%不透明度的黑色 */
 }

 .product-left:hover::before {
     transition: background-color 1s ease;
     background-color: rgba(0, 0, 0, 0.7);
     /* 85%不透明度的黑色 */
 }

 .product-left .product-l-content {
     position: absolute;
     top: 309px;
     left: clamp(0px, 12.5vw, 240px);
     /* 随屏幕缩小，最小为 0 */
     width: 528px;
     height: 84px;
     font-family: Yuanti SC, Yuanti SC;
     font-weight: 400;
     font-size: 16px;
     color: #999999;
     line-height: 28px;
     text-align: left;
     font-style: normal;
     text-transform: none;
     transition: color 1s ease;
     transition: top 1s ease;
 }

 .product-left:hover .product-l-content {
     color: #FFFFFF;
     top: 349px;
     transition: color 1s ease;
     transition: top 1s ease;
 }

 .product-l-img{
    width: 58px;
 }
 .product-title {
     position: absolute;
     top: 70px;
     left: clamp(0px, 12.5vw, 240px);
     /* 随屏幕缩小，最小为 0 */
     display: flex;
     height: 20px;
     align-items: center;

 }

 .product-line {
     width: 80px;
     height: 1px;
     background-color: #FFFFFF;
 }

 .product-text {
     margin-left: 86px;
     font-size: 20px;
     font-family: Yuanti SC, Yuanti SC;
     font-weight: bold;
     font-size: 20px;
     color: #FFFFFF;
     line-height: 20px;
     letter-spacing: 1px;
     text-align: left;
     font-style: normal;
     text-transform: none;
 }

 .product-right {
     position: relative;
     width: 50%;
     height: 100%;
 }

 .product-r-container {
     position: relative;
     height: 50%;
     width: 100%;
     background-size: cover;
 }

 .product-right-top {
     background: url('../img/product-r-t.webp') no-repeat center center;
     transition: background-size 1s ease;
     background-size: 100% 100%;
 }

 .product-right-top:hover {
     background-size: 150% 150%;
     transition: background-size 1s ease;
 }

 .product-right-bottom {
     background: url('../img/product-r-b.webp') no-repeat center center;
     transition: background-size 1s ease;
     background-size: 100% 100%;
 }

 .product-right-bottom:hover {
     background-size: 150% 150%;
     transition: background-size 1s ease;
 }

 .product-r-container::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.85);
     /* 85%不透明度的黑色 */
     transition: background-color 1s ease;
 }

 .product-r-container:hover:before {
     background-color: rgba(0, 0, 0, 0.7);
     /* 85%不透明度的黑色 */
     transition: background-color 1s ease;
 }

 .product-r-container {
     height: 50%;
     width: 100%;
 }

 .product-r-container .product-r-content {
     position: absolute;
     left: 192px;
     top: 90px;
     width: 528px;
     font-family: Yuanti SC, Yuanti SC;
     font-weight: 400;
     font-size: 16px;
     color: #999999;
     line-height: 28px;
     text-align: left;
     font-style: normal;
     text-transform: none;
     transition: color 1s ease;
     transition: top 1s ease;
 }

 .product-r-container:hover .product-r-content {
     color: white;
     top: 120px;
     transition: color 1s ease;
     transition: top 1s ease;
 }

 .product-r-container .four-lines {
     top: 90px;
     transition: top 1s ease;
 }

 .product-r-container:hover .four-lines {
     top: 100px;
     transition: top 1s ease;
 }

 .product-r-container .product-r-bottom {
     position: absolute;
     bottom: 60px;
     left: 188px;
     display: flex;
     transition: bottom 1s ease;
 }

 .product-r-container:hover .product-r-bottom {
     bottom: 90px;
     transition: bottom 1s ease;
 }


 .product-r-container .product-r-b-l-conent {
     width: 330px;
     font-family: Yuanti SC, Yuanti SC;
     font-weight: 400;
     font-size: 30px;
     color: #FFFFFF;
     line-height: 30px;
     letter-spacing: 2px;
     text-align: left;
     font-style: normal;
     text-transform: none;
 }

 .product-r-container .product-r-b-l-line {
     margin-top: 40px;
     width: 169px;
     height: 2px;
     background: #266AB4;
     border-radius: 0px 0px 0px 0px;
     transition: width 1s ease;
 }

 .product-r-container:hover .product-r-b-l-line {
     width: 309px;
     transition: width 1s ease;
 }

 .product-r-b-icon {
     width: 58px;
     height: 58px;
     margin-left: 47px;
 }

 .competencies-container {
     position: absolute;
     left: clamp(0px, 12.5vw, 240px);
     bottom: 176px;
     height: 356px;
     width: 472px;
 }

 .competencies-pic {
     position: absolute;
     bottom: 0px;
     left: 0;
     /* 随屏幕缩小，最小为 0 */
     width: 449px;
     height: 337px;
     z-index: 997;
 }

 .competencies-rect {
     position: absolute;
     bottom: 19px;
     right: 0px;
     width: 91px;
     height: 337px;
     background: #266AB4;
     border-radius: 0px 0px 0px 0px;
     opacity: 0.8;
     z-index: 998;
 }

 .container .competencies-page {
     height: 850px;
     position: relative;
     background-color: white;
 }

 .competencies-title {
     position: absolute;
     top: 70px;
     left: clamp(0px, 12.5vw, 240px);
     /* 随屏幕缩小，最小为 0 */
     display: flex;
     height: 20px;
     align-items: center;

 }

 .competencies-line {
     width: 80px;
     height: 1px;
     background-color: #000000;
 }

 .competencies-text {
     margin-left: 86px;
     font-size: 20px;
     font-family: Yuanti SC, Yuanti SC;
     font-weight: bold;
     font-size: 20px;
     line-height: 20px;
     letter-spacing: 1px;
     text-align: left;
     font-style: normal;
     text-transform: none;
 }

 .competencies-main {
     position: absolute;
     top: 169px;
     left: clamp(0px, 12.5vw, 240px);
     /* 随屏幕缩小，最小为 0 */
     width: 614px;
     font-family: Yuanti SC, Yuanti SC;
     font-weight: bold;
     font-size: 40px;
     color: rgba(0, 0, 0, 0.9);
     line-height: 60px;
     letter-spacing: 4px;
     text-align: left;
     font-style: normal;
     text-transform: none;
     z-index: 998;
 }

 .competencies-content {
     position: absolute;
     right: 0px;
     top: 187px;
     width: clamp(960px, 66vw, 1267px);
     /* 随屏幕缩小，最小为 0 */
     height: 522px;
     font-family: Yuanti SC, Yuanti SC;
     font-weight: 400;
     font-size: 16px;
     color: #666666;
     line-height: 30px;
     letter-spacing: 1px;
     text-align: left;
     font-style: normal;
     text-transform: none;
 }

 .competencies-content-gray {
     width: 100%;
     height: 261px;
     background: #F5F5F5;
     display: flex;
     justify-content: center;
     /* 水平居中 */
     align-items: center;
     /* 垂直居中 */
     font-size: 16px;
 }

  .competencies-content-gray span{
    width: 854px;
  }
 

 .competencies-content-white {
     width: 100%;
     height: 261px;
     background: white;
     display: flex;
     justify-content: center;
     /* 水平居中 */
     align-items: center;
     /* 垂直居中 */
     font-size: 18px;
 }
 .competencies-content-white span{
    width: 854px;
  }

 .coding-img{
    width: 449px;
    height: 337px;
 }