:root {
     --primary-color: rgb(00, 60, 90);
     /* 主色调 */
     --secondary-color: #6c757d;
     /* 辅助色调 */
     --accent-color: #ef4444;
     /* 强调色 */
     --white-color: #f1f1f1;
     /* 背景颜色 */
   }

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

   ul,
   li {
     list-style: none;
   }

   img {
     vertical-align: middle;
   }

   body {
     font-family: Helvetica, Arial, sans-serif;
     font-size: 18px;
     line-height: 1.5;
     color: #333;
     background-color: var(--white-color);
   }

   .container {
     background-color: var(--white-color);
     position: relative;
     max-width: 1440px;
     margin: 0 auto;
   }

   /* 头部CSS */
   .header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     padding: 1.5rem 10%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     z-index: 100;
     transition: all 0.8s ease;

   }

   .header::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0);
     z-index: -1;
   }

   .logo {
     font-size: 2rem;
     color: var(--white-color);
     text-decoration: none;
     font-weight: 700;
   }

   #check,
   .icons {
     display: none;
     cursor: pointer;
   }

   .icons {
     width: 20px;
     height: 20px;
   }

   .navbar a {
     display: inline-block;
     font-size: 1.1rem;
     color: var(--white-color);
     text-decoration: none;
     font-weight: 500;
     padding: 0 1rem;
     margin: 0 0.2rem;
     transition: color 0.1s;
   }

   .navbar a:hover,
   .navbar a:active {
     color: var(--accent-color);
   }

   #home {
     height: 100vh;
     max-height: 800px;
     background-color: var(--primary-color);
   }

   .banner {
     position: relative;
   }

   .banner .left {
     position: absolute;
     z-index: 1;
     top: 30vh;
     left: 10rem;
   }

   .banner .right {
     position: absolute;
     z-index: 2;
     right: -1rem;
     bottom: -1rem;
   }

   .banner {
     width: 100%;
     height: 100%;
     overflow: hidden;
   }

   .banner .left h1 span {
     color: var(--white-color);
     font-size: clamp(4rem, 7vw, 8rem);
     line-height: 1;
     text-shadow:
       1px 1px 2px rgba(0, 0, 0, 0.2),
       2px 2px 4px rgba(0, 0, 0, 0.3),
       3px 3px 6px rgba(0, 0, 0, 0.4),
       4px 4px 8px rgba(0, 0, 0, 0.5);
   }

   .banner .left p {
     color: var(--white-color);
     font-size: clamp(1.5rem, 3vw, 4rem);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     background-image: linear-gradient(to bottom, rgba(256, 256, 256, 1), rgba(256, 256, 256, 0.6));
   }

   .banner .right img {
     width: clamp(30rem, 50vw, 40rem);
     height: clamp(30rem, 50vw, 40rem);
     object-fit: cover;
     filter: grayscale(50%) brightness(80%);
     opacity: 0.5;
   }

   .fading-image {
     width: 50%;
     height: auto;
     mask-image: radial-gradient(circle, black 0%, black 30%, transparent 70%);
     -webkit-mask-image: radial-gradient(circle, black 0%, black 30%, transparent 70%);
   }

   @media (max-width: 768px) {
     body {
       font-size: 16px;
     }

     .header {
       padding: 1rem 10%;
     }

     .navbar {
       position: absolute;
       top: 100%;
       left: 0;
       width: 100%;
       height: 0;
       background-color: rgba(0, 0, 0, 0.8);
       overflow: hidden;
       transition: 0.3s;
       box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
     }

     #check:checked~.icons .menu-icon {
       display: none;
     }

     .icons .close-menu {
       display: none;
     }

     #check:checked~.icons .close-menu {
       display: block;
     }

     .icons {
       display: inline-flex;
       font-size: 1.15rem;
       color: var(--white-color);
       font-weight: 600;
     }

     .navbar a {
       display: block;
       font-size: 1.1rem;
       margin: 1.5rem 0;
       text-align: center;
       transition: 0.3s ease;
       opacity: 0;
     }

     #check:checked~.navbar {
       height: 17rem;
     }

     #check:checked~.navbar a {
       opacity: 1;
       transform: translateY(0);
       transition-delay: calc(0.5s*var(--i));
     }

     .banner .left {
       left: 5rem;
     }

   }

   /* 主内容CSS */
   section {
     padding: 2rem;
   }

   h2 {
     font-size: 3rem;
     text-align: center;
   }

   #about .wrapper {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
     gap: 2rem;
     margin: 2rem 0;
     text-align: center;
   }

   #about p {
     text-align: justify;
     text-indent: 2rem;
   }

   #about .wrapper h4 {
     font-size: 1.3rem;
     border-radius: 1rem 1rem 0 0;
     padding: 0.8rem 0;
     background-color: var(--primary-color);
     color: var(--white-color);
   }

   #about .wrapper li {
     border: 1px solid var(--primary-color);
     border-top: none;
     padding: 0.5rem 0;
     font-size: 1.1rem;
   }

   #services {
     background-color: var(--primary-color);
   }

   #services h2 {
     color: var(--white-color);
   }

   #services .content {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
     gap: 2rem;
     margin: 2rem 0;
   }

   #services .content .item {
     border-radius: 1rem;
     background-color: var(--white-color);
     padding: 1rem;
     box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
   }

   #services .content .last-item {
     grid-column: 1 / -1;
     text-align: center;
     color: var(--white-color);
     margin-top: 2rem;
   }

   #services .content .last-item h3 {
     font-size: 1.8rem;
   }

   #services .content .last-item p {
     font-size: 1.3rem;
   }

   #services .content h4 {
     font-size: 1.5rem;
     text-align: center;
     border-bottom: 2px solid var(--primary-color);
     padding: 0.8rem 0 0.3rem 0;
   }

   #services .content li {
     padding: 0.5rem 0 0.5rem 1rem;
     font-size: 1.1rem;
     position: relative;
   }

   #services .content li::before {
     content: "• ";
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     color: var(--primary-color);
     font-weight: bold;
   }

   #products .content {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
     gap: 2rem;
     margin: 2rem 0;
     text-align: center;
   }

   #products .content h4 {
     font-size: 1.3rem;
     border-radius: 1rem 1rem 0 0;
     padding: 0.8rem 0;
     background-color: var(--primary-color);
     color: var(--white-color);
   }

   #products .content li {
     border: 1px solid var(--primary-color);
     border-top: none;
     padding: 0.5rem 0;
     font-size: 1.1rem;
   }

   #contact {
     background-color: var(--primary-color);
   }

   #contact h2 {
     color: var(--white-color);
   }

   #contact .content {
     display: grid;
     grid-template-columns: minmax(20rem, 2fr) 20em;
     gap: 2rem;
     margin-top: 2rem;
   }

   @media (max-width: 768px) {
     #contact .content {
       grid-template-columns: 1fr;
       grid-template-rows: auto auto;
     }
   }

   #contact .left,
   #contact .address {
     background-color: var(--white-color);
     color: var(--primary-color);
     border-radius: 1rem;
     padding: 3rem 2rem;
     display: grid;
     place-items: center;
     box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
   }

   #contact h4 {
     text-align: center;
     padding: 1rem;
     font-size: 1.5rem;
   }

   #contact p {
     text-indent: 2rem;
     text-align: justify;
   }

   #contact .address a {
     text-decoration: none;
     color: var(--primary-color);
     transition: color 0.1s;
   }

   #contact .address a:hover,
   #contact .address a:active {
     color: var(--accent-color);
   }

   footer {
     padding: 1rem;
     color: var(--white-color);
     background-color: rgba(0, 0, 0, 0.8);
     text-align: center;
   }