body {
        margin: 0;
        font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
        background: #f3f6fa;
        color: #222;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .maincontainer {
        max-width: 1200px;
        margin-top: 24px;
        padding: 24px 24px;
    }

    header {
        background: linear-gradient(90deg, #0f2027 0%, #2c5364 100%);
        color: #fff;
        padding: 64px 0 40px 0;
        text-align: center;
    }

    header h1 {
        font-size: 2.8rem;
        font-weight: 900;
        margin-bottom: 12px;
        letter-spacing: 3px;
    }

    header p {
        font-size: 1.25rem;
        opacity: .93;
        margin: 0;
    }

    nav {
        background: #fff;
        box-shadow: 0 2px 12px rgba(44, 83, 100, 0.08);
    }

    nav ul {
        display: flex;
        justify-content: center;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    nav li {
        margin: 0 26px;
        position: relative;
    }

    nav a {
        display: block;
        padding: 22px 0;
        color: #2c5364;
        font-size: 1.15rem;
        font-weight: 600;
        text-decoration: none;
        border-bottom: 2px solid transparent;
        transition: .18s;
        letter-spacing: 1px;
    }

    nav a:hover,
    nav a.active {
        color: #0f2027;
        border-bottom: 2px solid #2c5364;
    }

    /* 下拉菜单样式 */
    .dropdown:hover .dropdown-menu {
        display: block;
    }

    .dropdown-menu {
        display: none;
        position: absolute;
        left: 0;
        top: 100%;
        background: #fff;
        min-width: 160px;
        box-shadow: 0 4px 16px rgba(44, 83, 100, 0.10);
        border-radius: 0 0 10px 10px;
        z-index: 10;
        padding: 0;
        margin: 0;
    }

    .dropdown-menu li {
        margin: 0;
        width: 100%;
    }

    .dropdown-menu a {
        padding: 14px 24px;
        color: #2c5364;
        font-size: 1rem;
        border-bottom: none;
        font-weight: 500;
        background: #fff;
        transition: background 0.15s, color 0.15s;
    }

    .dropdown-menu a:hover {
        background: #e3ecf7;
        color: #0f2027;
    }

    main {
        background: #fff;
        box-shadow: 0 8px 36px rgba(44, 83, 100, 0.10);
        padding: 68px 40px 48px 40px;
        margin: 40px auto;
    }

    .section-title {
        font-size: 2.2rem;
        font-weight: 800;
        color: #2c5364;
        border-left: 7px solid #0f2027;
        padding-left: 18px;
        margin-bottom: 36px;
        margin-top: 18px;
        letter-spacing: 2px;
    }

    .about {
        display: flex;
        align-items: center;
        gap: 40px;
        margin-bottom: 40px;
    }

    .about img {
        width: 380px;
        box-shadow: 0 2px 24px rgba(44, 83, 100, 0.13);
    }

    .about-text {
        flex: 1;
        font-size: 1.13rem;
        color: #444;
    }

    .products {
        display: flex;
        gap: 36px;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }

    .product {
        background: #f8fafc;
        border-radius: 16px;
        box-shadow: 0 2px 16px rgba(44, 83, 100, 0.08);
        padding: 22px;
        width: 30%;
        box-sizing: border-box;
        text-align: center;
        margin-bottom: 24px;
        transition: .18s;
    }

    .product:hover {
        transform: translateY(-8px) scale(1.04);
        box-shadow: 0 12px 32px rgba(44, 83, 100, 0.13);
    }

    .product img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 10px;
        margin-bottom: 16px;
        box-shadow: 0 2px 8px rgba(44, 83, 100, 0.10);
    }

    .product-title {
        font-size: 1.22rem;
        margin: 14px 0 8px;
        color: #0f2027;
        font-weight: 700;
    }

    .news-list {
        list-style: none;
        padding: 0;
        margin: 0 0 40px 0;
    }

    .news-list li {
        background: #f5f7fa;
        border-radius: 10px;
        margin-bottom: 16px;
        padding: 16px 22px;
        transition: .15s;
        box-shadow: 0 1px 6px rgba(44, 83, 100, 0.06);
    }

    .news-list a {
        color: #222;
        font-weight: 500;
        font-size: 1.08rem;
        text-decoration: none;
        transition: .15s;
    }

    .news-list li:hover {
        background: #e3ecf7;
    }

    .news-list a:hover {
        color: #2c5364;
        text-decoration: underline;
    }

    .contact {
        display: flex;
        gap: 40px;
        align-items: flex-start;
        margin-bottom: 32px;
    }

    .contact-info {
        flex: 1;
        font-size: 1.13rem;
        color: #444;
    }

    .contact-map {
        flex: 1;
    }

    .contact-map img {
        width: 100%;
        border-radius: 12px;
        box-shadow: 0 2px 16px rgba(44, 83, 100, 0.10);
    }

    footer {
        background: linear-gradient(90deg, #0f2027 0%, #2c5364 100%);
        color: #fff;
        text-align: center;
        padding: 28px 0;
        font-size: 1.08rem;
        margin-top: 56px;
        box-shadow: 0 -2px 20px rgba(44, 83, 100, 0.08);
    }

    nav ul {
        justify-content: flex-start;
    }

    /* 导航左对齐 */
    /* 友情链接样式 */
    .links-section {
        margin: 48px 0 0 0;
    }

    .links-title {
        font-size: 1.3rem;
        font-weight: 700;
        color: #2c5364;
        margin-bottom: 18px;
        border-left: 5px solid #0f2027;
        padding-left: 12px;
    }

    .friend-links {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
    }

    .friend-links a {
        display: inline-block;
        background: #f8fafc;
        color: #2c5364;
        font-weight: 500;
        padding: 10px 26px;
        border-radius: 8px;
        box-shadow: 0 1px 6px rgba(44, 83, 100, 0.06);
        text-decoration: none;
        transition: .15s;
    }

    .friend-links a:hover {
        background: #e3ecf7;
        color: #0f2027;
    }

    @media (max-width:900px) {
        .container {
            padding: 0 8px;
        }

        main {
            padding: 18px 6px;
        }

        .about,
        .contact,
        .products {
            flex-direction: column;
            gap: 18px;
        }

        .about img,
        .contact-map img {
            width: 100%;
            margin-bottom: 14px;
        }

        .product {
            width: 100%;
        }

        .section-title {
            font-size: 1.4rem;
            padding-left: 10px;
        }

        header {
            padding: 32px 0 18px 0;
        }

        footer {
            font-size: .98rem;
            padding: 14px 0;
        }

        nav ul {
            flex-direction: column;
        }

        nav li {
            margin: 0 0 8px 0;
        }

        .friend-links {
            flex-direction: column;
            gap: 12px;
        }
    }
        /* 服务项目样式 */
    .services-list {
      display: flex;
      flex-wrap: wrap;
      gap: 32px;
      justify-content: center;
      margin-bottom:40px;
    }
    .service-item {
      background: #f8fafc;
      border-radius: 16px;
      box-shadow: 0 2px 16px rgba(44,83,100,0.08);
      padding: 32px 28px;
      width: 370px;
      box-sizing: border-box;
      display: flex;
      align-items: flex-start;
      gap: 18px;
    }
    .service-icon {
      border-radius: 10px;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
    }
    .service-icon.bg-blue { background: #e3ecf7; color: #5b8ef7; }
    .service-icon.bg-green { background: #e7f7e3; color: #5ac47a; }
    .service-icon.bg-purple { background: #f3e7fa; color: #a97cf7; }
    .service-icon.bg-yellow { background: #fff3e3; color: #f7b85b; }
    .service-icon.bg-blue2 { background: #e3ecf7; color: #5b8ef7; }
    .service-icon.bg-red { background: #fae7e7; color: #f77c7c; }
    .service-title {
      font-size: 1.18rem;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .service-desc {
      color: #444;
    }
       /* 新闻资讯日期样式 */
    .news-date {
      float: right;
      color: #999;
      font-size: 0.98rem;
      margin-left: 10px;
    }
    /* 联系我们表单样式 */
    .contact-form-wrapper {
      flex: 1;
    }
    .contact-form .form-group {
      margin-bottom: 18px;
    }
    .contact-form label {
      display: block;
      font-weight: 600;
      margin-bottom: 6px;
    }
    .contact-form input,
    .contact-form textarea {
      width: 98%;
      padding: 10px 12px;
      border: 1px solid #d0d7de;
      border-radius: 6px;
      font-size: 1rem;
      box-sizing: border-box;
    }
    .contact-form textarea {
      resize: vertical;
    }
    .contact-form button {
      background: #2c5364;
      color: #fff;
      font-size: 1.08rem;
      padding: 10px 32px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.18s;
    }
    footer a {
        color: #fff;
        text-decoration: none;
        transition: color 0.15s;
    }