@keyframes change-Background {
    0% { background-image: url('img/case1.webp'); }
    25% { background-image: url('img/case15.webp'); }
    50% { background-image: url('img/case2.webp'); }
    75% { background-image: url('img/case3.webp'); }
    100% { background-image: url('img/case4.webp'); }
}


/* --- 全局与背景 --- */
body{
  background-color: transparent; 
  color: #fff;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  -webkit-text-size-adjust: 100%;
  position: relative;
  z-index: 1;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #222;
  animation: change-Background 25s linear infinite;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}


/* --- 尺子和内容容器（PC端） --- */
.rulers-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background-image: url(bd1.png), url(bd2.png);
    background-repeat: no-repeat, repeat-x;
    background-position: left top, left bottom;
}

.container {
  position: relative;
  z-index: 1;
  padding: 32px 16px 128px 111px;
  max-width: 800px;
}


/* ... 其他样式保持不变 ... */
img{ display:block; max-width: 100%; height: auto; image-rendering: auto; }
img.logo{ width: 100%; max-width: 544px; margin-left: 65px; margin-bottom: 32px; background-color: transparent; }
section{ display: block; margin: 0 0 64px 0; padding: 0 16px; border-left: 1px solid #034; }
a{ display:inline-block; }
a:link{color: #0af;} a:visited{color: #0af;} a:hover{color: #aff; font-weight: bold;} a:active{color: #fff; font-weight: bold;}
p{ margin-top: 1em; margin-bottom: 0; padding: 0; line-height: 1.6; }
strong{ font-weight: normal; color: #fff; }
h1, h2{ border-bottom: 1px solid #055; line-height: 75%; color: #65d7f4; font-size: 1.5rem; font-weight: bold; margin: 0; }
h3{ border-bottom: 1px solid #055; line-height: 75%; color: #65d7f4; font-size: 1.2rem; font-weight: bold; margin: 0; }
small{ display:block; line-height: 175%; color: #65d7f4; font-size: 0.8rem; font-weight: bold; margin-bottom: 1em; }


/* --- 响应式设计：媒体查询 (手机端) --- */
@media (max-width: 768px) {

  .rulers-overlay {
      background-image: url(bd1.png);
      background-repeat: no-repeat;
      background-position: left top;
      position: absolute;
  }

  .container {
    padding: 32px 24px;
    max-width: none;
    padding-bottom: 96px; 
  }
  
  .container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background: url(bd2.png) repeat-x;
  }
  
  img.logo {
    margin-left: 0;
  }

  section {
    padding: 0 8px;
    margin-bottom: 48px;
  }
}