body, html { overflow-x: hidden; background: #fff !important; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; color: #333; }
a { text-decoration: none; color: #333; transition: 0.3s; }

.xy-header-wrapper {
    position: fixed; top: 0; left: 0; width: 100%; height: 90px; 
    background: rgba(255,255,255,0.95); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); z-index: 9999; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; box-sizing: border-box;
    backdrop-filter: blur(10px);
}
.xy-logo img { height: 50px; width: auto; vertical-align: middle; }

.xy-nav { display: flex; height: 90px; align-items: center; }
.xy-nav-item { padding: 0 20px; font-size: 16px; font-weight: bold; cursor: pointer; height: 90px; line-height: 90px; color: #333; position: relative; }
.xy-nav-item::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 3px; background: #0056b3; transition: 0.3s; transform: translateX(-50%); }
.xy-nav-item:hover { color: #0056b3; }
.xy-nav-item:hover::after { width: 80%; }

.xy-nav-btn {
    background: #0056b3; color: #fff !important; padding: 0 28px; border-radius: 30px;
    height: 42px; line-height: 42px; margin-left: 25px; display: inline-block; font-weight: bold; letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0,86,179,0.3);
}
.xy-nav-btn:hover { background: #004494; transform: translateY(-2px); }
.xy-nav-btn::after { display: none; }

.m-nav-btn { display: none; width: 30px; height: 30px; cursor: pointer; z-index: 10000; }
.m-nav-btn span { display: block; width: 100%; height: 3px; background: #333; margin: 6px 0; }

.banner-section { margin-top: 90px; height: 850px; position: relative; overflow: hidden; background: #f0f0f0; }
.banner-slide { width: 100%; height: 100%; background-size: cover; background-position: center; position: relative; }
.banner-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.25); }
.banner-content { position: absolute; top: 50%; left: 12%; transform: translateY(-50%); color: #fff; z-index: 10; text-shadow: 2px 2px 10px rgba(0,0,0,0.6); }
.banner-title { font-size: 64px; font-weight: 800; margin-bottom: 25px; letter-spacing: 3px; }
.banner-subtitle { font-size: 24px; background: rgba(0,86,179,0.9); display: inline-block; padding: 12px 35px; border-radius: 4px; letter-spacing: 1px; }

.section-box { padding: 100px 0; position: relative; }
.bg-gray { background-color: #f5f7fa; }
.bg-dark-img { background-size: cover; background-position: center; position: relative; color: #fff; background-attachment: fixed; }
.bg-dark-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20, 25, 35, 0.85); z-index: 0; }

.section-parallax { 
    padding: 200px 0; 
    background-attachment: fixed;
    background-position: center; 
    background-size: cover; 
    position: relative; 
}
.section-parallax::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); 
    z-index: 1;
}

.container { width: 1200px; margin: 0 auto; max-width: 92%; position: relative; z-index: 2; }

.sec-header { text-align: center; margin-bottom: 70px; }
.sec-header h2 { font-size: 42px; color: #fff; margin-bottom: 10px; font-weight: 800; letter-spacing: 3px; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.sec-header p { font-size: 16px; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 4px; font-weight: bold; }
.sec-line { width: 70px; height: 4px; background: #fff; margin: 25px auto 0; border-radius: 2px; }

.text-dark .sec-header h2 { color: #333; text-shadow: none; }
.text-dark .sec-header p { color: #888; }
.text-dark .sec-line { background: #0056b3; }

.bg-dark-img .sec-header h2 { color: #fff; }
.bg-dark-img .sec-header p { color: #bbb; }
.bg-dark-img .sec-line { background: #fff; }

.adv-list { display: flex; justify-content: space-between; flex-wrap: wrap; }
.adv-item { 
    width: 23%; 
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 50px 30px; text-align: center; border-radius: 8px; transition: 0.4s; box-sizing: border-box; 
    border-top: 4px solid transparent;
}
.adv-item:hover { transform: translateY(-10px); background: #fff; border-top-color: #0056b3; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.adv-icon { font-size: 48px; color: #0056b3; margin-bottom: 25px; display: block; }
.adv-item h3 { font-size: 22px; margin-bottom: 15px; color: #222; font-weight: bold; }
.adv-item p { color: #666; font-size: 15px; line-height: 1.6; }

.prod-grid { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.prod-col { width: 33.33%; padding: 15px; box-sizing: border-box; margin-bottom: 15px; }
.prod-card { position: relative; height: 320px; border-radius: 6px; overflow: hidden; background-color: #333; background-size: cover; background-position: center; cursor: pointer; box-shadow: 0 10px 20px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.2); }
.prod-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; box-sizing: border-box; transition: 0.4s; }
.prod-card:hover .prod-overlay { background: rgba(0,86,179,0.9); justify-content: center; align-items: center; }
.prod-name { color: #fff; font-size: 24px; font-weight: bold; margin-bottom: 10px; transition: 0.3s; }
.prod-card:hover .prod-name { transform: translateY(-10px); margin-bottom: 20px; font-size: 26px; }
.prod-more { color: #fff; border: 1px solid #fff; padding: 8px 30px; border-radius: 30px; opacity: 0; transform: translateY(20px); transition: 0.3s; }
.prod-card:hover .prod-more { opacity: 1; transform: translateY(0); }

.scope-text-box { max-width: 900px; margin: 0 auto; text-align: center; line-height: 2; font-size: 18px; color: #444; }
.scope-tags { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.scope-tag { background: #fff; padding: 10px 25px; margin: 10px; border-radius: 25px; box-shadow: 0 3px 10px rgba(0,0,0,0.08); font-weight: bold; color: #0056b3; border: 1px solid #e6f0ff; }

.process-flow { display: flex; justify-content: space-between; position: relative; margin-top: 50px; }
.process-flow::before { content: ''; position: absolute; top: 50px; left: 5%; width: 90%; height: 2px; background: rgba(255,255,255,0.3); z-index: 0; }
.proc-step { width: 16%; text-align: center; position: relative; z-index: 1; }
.proc-circle { 
    width: 100px; height: 100px; 
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255,255,255,0.5); 
    border-radius: 50%; line-height: 96px; margin: 0 auto 25px; 
    font-size: 28px; color: #fff; font-weight: 900; 
    box-sizing: border-box; transition: 0.4s; 
}
.proc-step:hover .proc-circle { background: #fff; color: #0056b3; border-color: #fff; transform: scale(1.1); box-shadow: 0 0 20px rgba(255,255,255,0.4); }
.proc-step h4 { font-size: 20px; margin-bottom: 10px; color: #fff; font-weight: bold; }
.proc-step p { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.5; }

.about-content-box { 
    background: rgba(255, 255, 255, 0.95);
    padding: 60px; border-radius: 8px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    text-align: center; max-width: 900px; margin: 0 auto; 
}
.about-p { font-size: 16px; color: #555; line-height: 2; text-indent: 2em; text-align: justify; margin-bottom: 20px; }
.about-data { display: flex; justify-content: center; margin-top: 50px; border-top: 1px solid #eee; padding-top: 40px; }
.data-item { margin: 0 50px; text-align: center; }
.data-num { font-size: 60px; color: #0056b3; font-weight: bold; font-family: Impact, sans-serif; display: block; line-height: 1; }
.data-desc { font-size: 16px; color: #888; font-weight: bold; margin-top: 10px; display: block; }

.xy-footer { background: #111; color: #fff; padding: 80px 0 40px; text-align: center; }
.foot-info h2 { font-size: 32px; margin-bottom: 30px; font-weight: bold; letter-spacing: 2px; }
.foot-contact span { margin: 0 20px; color: #ccc; font-size: 16px; display: inline-block; }
.foot-copy { border-top: 1px solid #333; padding-top: 30px; color: #777; font-size: 13px; margin-top: 50px; }
.foot-copy a { color: #999; margin: 0 10px; }
.foot-copy a:hover { color: #fff; }

@media screen and (max-width: 768px) {
    .xy-header-wrapper { height: 60px; padding: 0 15px; background: #fff; }
    .xy-nav { display: none; position: absolute; top: 60px; left: 0; width: 100%; background: #fff; flex-direction: column; height: auto; box-shadow: 0 5px 10px rgba(0,0,0,0.1); border-top: 1px solid #eee; }
    .xy-nav-item { height: 50px; line-height: 50px; width: 100%; text-align: center; border-bottom: 1px solid #f5f5f5; padding: 0; }
    .xy-nav-item::after { display: none; }
    .xy-nav-btn { margin: 15px auto; display: block; width: 80%; text-align: center; height: 44px; line-height: 44px; }
    .m-nav-btn { display: block; }
    
    .banner-section { margin-top: 60px; height: 400px; }
    .banner-title { font-size: 32px; letter-spacing: 0; margin-bottom: 15px; }
    .banner-subtitle { font-size: 16px; padding: 8px 20px; }
    
    .section-parallax { padding: 60px 0; background-attachment: scroll; }
    .sec-header { margin-bottom: 40px; }
    .sec-header h2 { font-size: 28px; }

    .adv-item { width: 100%; margin-bottom: 20px; padding: 30px 20px; }
    .prod-col { width: 100%; }
    .prod-card { height: 240px; }
    
    .process-flow { flex-wrap: wrap; margin-top: 30px; }
    .process-flow::before { display: none; }
    .proc-step { width: 48%; margin-bottom: 40px; }
    .proc-circle { width: 70px; height: 70px; line-height: 66px; font-size: 22px; margin-bottom: 15px; }

    .about-content-box { padding: 30px 20px; }
    .about-data { flex-wrap: wrap; margin-top: 30px; padding-top: 30px; }
    .data-item { width: 100%; margin: 0 0 30px 0; }
    .data-num { font-size: 48px; }

    .foot-contact span { display: block; margin: 15px 0; }
}