

/* 眼睛 */

.eyeeye {
            position: relative;
            width: 108px;
            display: flex;
            justify-content: space-between;
            z-index: 9999;
          }
          .eyeeye::after , .eyeeye::before  {
            content: '';
            display: inline-block;
            width: 48px;
            height: 48px;
            background-color: #FFF;
            background-image:  radial-gradient(circle 14px, #0d161b 100%, transparent 0);
            background-repeat: no-repeat;
            border-radius: 50%;
            animation: eyeMove 10s infinite , blink 10s infinite;
            z-index: 9999;
          }
          @keyframes eyeMove {
            0%  , 10% {     background-position: 0px 0px}
            13%  , 40% {     background-position: -15px 0px}
            43%  , 70% {     background-position: 15px 0px}
            73%  , 90% {     background-position: 0px 15px}
            93%  , 100% {     background-position: 0px 0px}
          }
          @keyframes blink {
            0%  , 10% , 12% , 20%, 22%, 40%, 42% , 60%, 62%,  70%, 72% , 90%, 92%, 98% , 100%
            { height: 48px}
            11% , 21% ,41% , 61% , 71% , 91% , 99%
            { height: 18px}
          }
/* 关键：改为绝对定位，脱离文档流-oknowlogo双圆圈效果 */
.twocircles {
  width: 56px;
  height: 56px;
  display: inline-block;
  position: absolute; /* 关键：改为绝对定位，脱离文档流 */
  left: 36px; /* 相对于logo容器的左偏移（需根据logo位置微调） */
  top: 14px;  /* 相对于logo容器的上偏移 */
  animation: fadeIn 2s ease-out forwards; /* 淡入动画 */
}
.twocircles::after,
.twocircles::before {
  content: '';  
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #0b430a;
  position: absolute;
  left: 0;
  top: 0;
  animation: animloader 2s linear infinite;
}
.twocircles::after {
  animation-delay: 1s;
}
/* 淡入动画：确保从透明到完全显示 */
@keyframes fadeIn {
  0% { 
    opacity: 0;
    transform: scale(0.3); /* 轻微缩小增强淡入感 */
  }
  50% { 
    opacity: 0.3;
  }
  100% { 
    opacity: 1;
    transform: scale(1); /* 恢复原尺寸 */
  }
}
@keyframes animloader {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
/* 图片容器样式 - （oknow侧边小图效果）适用于包含图片的超链接 */
.link-img {
  display: inline-block; /* 使链接能正确应用宽高和阴影 */
  position: relative;
  /* margin: 10px; 图片之间的间距 */
  margin-top: 11px;
  border-radius: 12px; /* 轻微圆角，可选 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8); /* 初始阴影效果 */
  transition: all 0.3s ease; /* 动画过渡效果 */
}
/* 图片本身样式 */
.link-img img {
  display: block; /* 去除图片底部间隙 */
  max-width: 100%; /* 响应式图片 */
  height: auto;
  border-radius: inherit; /* 继承容器圆角 */
}
/* 鼠标悬停效果 */
.link-img:hover {
  box-shadow: 6px 20px 30px rgba(12, 85, 13, 0.9); /* 增强阴影 */
  transform: translateY(-3px); /* 轻微上浮效果 */
}
/* 图片容器样式 - （oknow二维码效果）适用于包含图片的超链接 */
.oknow-pic-img {
  display: inline-block; /* 使链接能正确应用宽高和阴影 */
  position: relative;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8); /* 初始阴影效果 */
  transition: all 0.3s ease; /* 动画过渡效果 */
  border-radius: inherit; /* 继承容器圆角 */
}
