body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     color: #333;
 }

  .container {  
    max-width: 1200px;  
    margin: 0 auto;  
    padding: 20px;  
  }  
  .product-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  
    grid-gap: 20px;  
    height: 300px;
  }  
  .product-item {  
    background-color: #fff;  
    border: 1px solid #ddd;  
    border-radius: 4px;  
    padding: 20px;  
    text-align: center;  
    transition: box-shadow 0.3s ease;  
  }  
  .product-item:hover {  
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);  
  }  
  .product-item img {  
    max-width: 100%;  
    height: auto;  
    margin-bottom: 10px;  
  }  
  .product-item h3 {  
    margin: 0;  
  }  
  .product-item p {  
    margin: 10px 0;  
    font-size: 14px;  
    color: #666;  
  }  

 header {
     background-color: #f2f2f2;
     padding: 20px;
     text-align: center;
 }

 header h1 {
     margin: 0;
 }

 nav {
     background-color: #6666cc;
     height: 60px;
     line-height: 60px;
     color: #fff;
     padding: 10px 0;
     text-align: center;
 }

 nav ul {
     display: flex;
     list-style-type: none;
     padding: 0;
     margin: 0;
     overflow: hidden;
     background-color: #6666cc;
 }

 nav ul li {
     display: inline;
     margin: 0 25px;
 }

 nav ul li:first-child {
     margin-left: 100px;
     margin-right: auto;
 }

 nav ul li:last-child {
     margin-right: 100px;
 }

 a[href] {
     color: #fff;
     text-decoration: none;
 }

 a[href]:hover {
     color: #fff;
     text-decoration: underline;
 }

 nav ul li img {
     vertical-align: middle; /* 使图片与文本垂直对齐 */
     width: 40px; /* 设置图片宽度，高度会自动调整以保持比例 */
     height: auto;
 }

 .submenu {  
   display: none;  
   position: absolute;  
   min-width:600px;  
   min-height:100px;
   line-height:100px;
   text-align: center;
   z-index: 1000;  
 }  
   
 .submenu li {  
   float: none;  
   position: relative;  
 }  
   
 .submenu li a {  
   padding: 2px 4px;  
 }  
   
 .has-submenu:hover .submenu {  
   display: block;  
 }

 main {
     padding: 0px;
 }

.center-text {  
  text-align: center; /* 使文字居中 */  
}

/* styles.css */  
.carousel {  
  position: relative;  
  width: 100%;  
  height: 500px;
  overflow: hidden;  
}  
  
.carousel-images {  
  display: flex;  
  transition: transform 0.5s ease-in-out;  
}  
  
.carousel-images img {  
  width: 100%;  
  flex-shrink: 0;  
  opacity: 0;  
  transition: opacity 0.5s ease-in-out;  
}  
  
.carousel-images img.active {  
  opacity: 1;  
}  

  
.carousel-btn {  
  position: absolute;  
  top: 50%;  
  transform: translateY(-50%);  
  border-radius: 60%;
  background-color: rgba(0, 0, 0, 0.5);  
  color: white;  
  border: none;  
  cursor: pointer;  
  padding: 10px;  
  z-index: 10;  
}  
  
.prev {  
  left: 10px;  
}  
  
.next {  
  right: 10px;  
}

.container_footer {  
  width: 100%;  
  text-align: center;  
}  

.header_footer {  
  background-color: #6666aa;  
  color: #fff;  
  padding: 20px;  
  width: 100%;
}  
.header_footer h1 {  
  margin: 0;  
  font-size: 1.5em;  
}  
.header_footer p {  
  margin: 10px 0;  
  font-size: 1.0em;  
}  
.contact-button {  
  display: block;  
  width: 100%;  
  max-width: 400px; /* 限制最大宽度，避免在超大屏幕上过宽 */  
  margin: 10px auto;  
  padding: 10px;  
  background-color: #6666aa;  
  color: #fff;  
  text-decoration: none;  
  text-align: center;  
  font-size: 18px;  
  border: none;  
  border-radius: 15px; /* 添加圆角 */  
  cursor: pointer;  
}  
.contact-button:hover {  
  background-color: #6666cc;  
}  

footer {
    background-color: #9999cc;
    color: #fff;
    padding: 20px;
    text-align: center;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20px; 
    line-height: 5px;
}