*{transition:all .7s ease 0s;font-size:}
body{background-color: #fff}
.title{text-align: center}
.title h4{font-size: 30px;line-height:10px;margin-bottom: -40px;margin-left:30px;}
/*ѧÀúÌáÉýÓÅÊÆ¿ªÊ¼*/
.superiority{ width:100%; height:847px; float:left; margin-top:0px;  background-size:cover;}
.super_text{ width:100%; height:847px; margin:0 auto; background:url(../../images/产品服务.webp) no-repeat center; background-size:cover;margin-top:-30px; }
.super_content{ width:100%; height:742px; float:left;margin-top: 60px;}
.superli{ width:100%; height:auto; float:left; margin-top:65px;}
.superli ul{ width:100%; float:left; height:auto; margin-left:10px;}
/*.superli ul li{ width:100px; height:100px; float:left; color:#409AED; text-align:center; font-size:18px;cursor:pointer;border-radius: 100px;line-height:24px;background:url(../../images/qipao.png) no-repeat center; background-size:cover;display: block;}*/
/* 父级 ul 开启 flex 布局，让 li 自动排布并支持换行 */
.superli ul {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: center; /* 居中对齐 */
    gap: 15px; /* 每个圆之间的间距，替代以前的margin */
    padding: 0;
    margin: 0;
    list-style: none;
}

.superli ul li {
    /* 核心修改：宽度使用 vw (视口宽度的百分比)，10vw 代表占据屏幕宽度的 10% */
    position: relative;
    width: 6vw; 
    
    /* 高度设置为 0，用 padding-bottom 撑开，保证宽高永远 1:1 (正圆) */
    height: 0; 
    padding-bottom: 10vw; 
    
    /* 文字垂直居中需要调整，因为高度是padding撑出来的 */
    display: flex; 
    align-items: center; 
    justify-content: center;
    
    color: #409AED;
    text-align: center;
    font-size: 1.2vw; /* 字体大小也用 vw，跟随屏幕缩放 */
    cursor: pointer;
    border-radius: 50%; /* 50% 就是完美正圆，不用写死 100px */
    
    background: url(../../images/qipao.webp) no-repeat center;
    background-size: contain; /* 用 contain 替代 cover，保证整个气泡图完整显示在圆内不被裁切拉伸 */
}

.superli ul li a {

}

.superli ul li:nth-child(2){animation:myfirst linear infinite 2s;}
@keyframes myfirst {0% {margin-top:252px;} 50% {margin-top:260px;} 100% {margin-top:252px;}}

.superli ul li:nth-child(3){animation:myfirsta linear infinite 2s;}
@keyframes myfirsta {0% {margin-top:100px;} 70% {margin-top:108px;} 100% {margin-top:100px;}}

.superli ul li:nth-child(4){animation:myfirstb linear infinite 2s;}
@keyframes myfirstb {0% {margin-top:331px;} 60% {margin-top:340px;} 100% {margin-top:332px;}}

.superli ul li:nth-child(5){animation:myfirstc linear infinite 2s;}
@keyframes myfirstc {0% {margin-top:0px;} 40% {margin-top:8px;} 100% {margin-top:0px;}}

.superli ul li:nth-child(1){animation:myfirstd linear infinite 2s;}
@keyframes myfirstd {0% {margin-top:0px;} 40% {margin-top:8px;} 100% {margin-top:0px;}}

.superli ul li:nth-child(6){animation:myfirsts linear infinite 2s;}
@keyframes myfirsts {0% {margin-top:252px;} 40% {margin-top:260px;} 100% {margin-top:252px;}}

.superli ul li:nth-child(7){animation:myfirste linear infinite 2s;}
@keyframes myfirste {0% {margin-top:100px;} 40% {margin-top:108px;} 100% {margin-top:100px;}}

.superli ul li:nth-child(8){animation:myfirstk linear infinite 2s;}
@keyframes myfirstk {0% {margin-top:332px;} 40% {margin-top:340px;} 100% {margin-top:332px;}}


.superli ul li:hover{transform: scale(1.3);transition: all 0.3s;}
.superli ul li a{
  top: 40%;
  position: absolute;
  color: inherit; /* 继承 li 的颜色 */
  text-decoration: none;
  font-weight: bold;
  color: #033955;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #00d0ff, 0 0 35px #06517f, 0 0 60px #57d3e7;
}
.superli ul li:nth-child(1){margin-left:1vw;}
/*.superli ul li:nth-child(2)>a{display:block;margin-top:38px;}*/
.superli ul li:nth-child(2){ margin-left:5%;margin-top:5%;}
.superli ul li:nth-child(3){ margin-left:5%; margin-top:2%;}
.superli ul li:nth-child(4){ margin-left:5%; margin-top:0px;}
.superli ul li:nth-child(5){ margin-left:5%; margin-top:152px;}
.superli ul li:nth-child(6){ margin-left:5%; margin-top:5%;}
.superli ul li:nth-child(7){ margin-left:5%; margin-top:5%;}
.superli ul li:nth-child(8){ margin-left:5%; margin-top:5%;}
/*.superli ul li:hover{ background:#ffc670;border:1px solid #000000}
.superli .superhover{background:#ffc670; border:1px solid #ffa229;}*/
.supertext{ width:100%; height:65px; float:left; margin-top:165px;}
.supert{ width:90%; height:65px; margin:0 auto; text-align:center; font-size:24px; color:#fff; display:none;}
.supert:first-Child{ display:block;}
.superbut{ width:50%; float:left; height:74px;margin-left: 25%;}
.superbtn{ width:80%; height:72px; border:1px solid #000000; line-height:72px; text-align:center; font-size:30px; color:#00000; margin-left: 10%; margin-top:90px;border-radius: 40px;cursor:pointer;}
.superbtn:hover{ background: #ffc670; color:#00000;transform: scale(1.05);transition: all 0.5s;}
.imgWrap_k{float:left;width: 100%;position: relative;margin-top: -920px;z-index: -111;height: 900px;}
.imgWrap {width: 700px;height: 700px;margin: 0 auto;margin-top: 120px;}

.outer, .inner, .small {
	position: relative;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background-color: rgba(253,232,222,0.7);
    opacity: 0;
    -webkit-animation: ballScale 4s 0s linear infinite;
    -moz-animation: ballScale 4s 0s linear infinite;
    -ms-animation: ballScale 4s 0s linear infinite;
    animation: ballScale 4s 0s linear infinite;
}

.inner{
	position: relative;
	margin-top: -700px;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -ms-animation-delay: 1s;
      animation-delay: 1s;
}
.small{
		position: relative;
	margin-top: -700px;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -ms-animation-delay: 2s;
      animation-delay: 2s;
}
@-webkit-keyframes ballScale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1; }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);

    opacity: 0; } }
@-moz-keyframes ballScale {
  0% {
    -moz-transform: scale(0);
            transform: scale(0);
    opacity: 1; }

  100% {
    -moz-transform: scale(1);
            transform: scale(1);

    opacity: 0; } }
@-ms-keyframes ballScale {
  0% {
    -ms-transform: scale(0);
            transform: scale(0);
    opacity: 1; }

  100% {
    -ms-transform: scale(1);
            transform: scale(1);

    opacity: 0; } }
@keyframes ballScale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
    }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; }
}
@media (max-width:768px){
  .superli ul li {
      /* 核心修改：宽度使用 vw (视口宽度的百分比)，10vw 代表占据屏幕宽度的 10% */
      position: relative;
      width: 8vw; 
      
      /* 高度设置为 0，用 padding-bottom 撑开，保证宽高永远 1:1 (正圆) */
      height: 0; 
      padding-bottom: 10vw; 
      
      /* 文字垂直居中需要调整，因为高度是padding撑出来的 */
      display: flex; 
      align-items: center; 
      justify-content: center;
      
      color: #409AED;
      text-align: center;
      font-size: 1.2vw; /* 字体大小也用 vw，跟随屏幕缩放 */
      cursor: pointer;
      border-radius: 50%; /* 50% 就是完美正圆，不用写死 100px */

  }


  .superli ul li:nth-child(1){margin-left:1%;}
  .superli ul li:nth-child(2){ margin-left:1%;margin-top:5%;}
  .superli ul li:nth-child(3){ margin-left:1%; margin-top:2%;}
  .superli ul li:nth-child(4){ margin-left:1%; margin-top:0px;}
  .superli ul li:nth-child(5){ margin-left:1%; margin-top:152px;}
  .superli ul li:nth-child(6){ margin-left:1%; margin-top:5%;}
  .superli ul li:nth-child(7){ margin-left:1%; margin-top:5%;}
  .superli ul li:nth-child(8){ margin-left:1%; margin-top:5%;}
}