@charset "utf-8";
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'microsoft yahei',sans-serif;font-size:14px;color:#333;background:#fff;line-height:1.6}
a{color:#333;text-decoration:none;transition:color .2s}
a:hover{color:#178655}
img{max-width:100%;display:block}
ul{list-style:none}
.w1200{max-width:1200px;margin:0 auto;padding:0 16px;width:100%;box-sizing:border-box}
@media(max-width:768px){
    .w1200{padding:0 12px}
    .footer-bottom .w1200{text-align:center}
    .footer-bottom p{font-size:11px;line-height:1.6;text-align:center}
}

/* ===== 导航栏 ===== */
.header-nav{position:fixed;top:0;left:0;width:100%;z-index:9999;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:0 20px;height:70px}

/* Logo */
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo img{height:45px;width:auto}
.logo i{font-size:32px;color:#178655}
.logo span{font-size:18px;font-weight:600;color:#333}

/* 导航菜单 */
.nav-list{display:flex;align-items:center;gap:0}
.nav-list li{position:relative}
.nav-list > li > a{display:block;padding:24px 18px;font-size:14px;color:#333;position:relative}
.nav-list > li > a:hover,
.nav-list > li > a.active{color:#178655}
.nav-list > li > a::after{content:'';position:absolute;bottom:18px;left:18px;right:18px;height:2px;background:#178655;transform:scaleX(0);transition:transform .2s}
.nav-list > li > a:hover::after,
.nav-list > li > a.active::after{transform:scaleX(1)}

/* 子菜单 */
.nav-list .has-sub .sub-menu{position:absolute;top:100%;left:0;min-width:160px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(10px);transition:all .2s}
.nav-list .has-sub:hover .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sub-menu a{display:block;padding:12px 18px;color:#666;font-size:13px;border-bottom:1px solid #f0f0f0}
.sub-menu a:last-child{border:none}
.sub-menu a:hover{background:#f8f9fa;color:#178655}

/* 语言按钮 */
.nav-list .lang-btn{background:#178655;color:#fff !important;padding:8px 16px !important;border-radius:4px;margin-left:10px}
.nav-list .lang-btn:hover{background:#146543}
.nav-list .lang-btn::after{display:none}

/* 手机菜单按钮 */
.mobile-menu-btn{display:none;flex-direction:column;justify-content:space-between;width:28px;height:20px;cursor:pointer;background:none;border:none;padding:0}
.mobile-menu-btn span{display:block;width:100%;height:2px;background:#333;border-radius:1px;transition:.3s}
.mobile-menu-btn.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.mobile-menu-btn.active span:nth-child(2){opacity:0}
.mobile-menu-btn.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* 移动端菜单 */
.mobile-menu{display:none;position:absolute;top:100%;left:0;width:100%;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.1);max-height:0;overflow:hidden;transition:max-height .3s}
.mobile-menu.active{max-height:500px;overflow-y:auto}
.mobile-menu a{display:block;padding:14px 20px;color:#333;font-size:15px;border-bottom:1px solid #eee}
.mobile-menu a:hover,.mobile-menu a.active{color:#178655;background:#f8f9fa}
.mobile-menu a.sub{padding-left:40px;font-size:14px;color:#666}
.mobile-menu a.lang{background:#178655;color:#fff;text-align:center;font-weight:500}

/* 手机二级菜单 */
.mobile-submenu{border-bottom:1px solid #eee}
.mobile-submenu-toggle{display:block;padding:14px 20px;color:#333;font-size:15px;cursor:pointer;position:relative}
.mobile-submenu-toggle .arrow{position:absolute;right:20px;transition:transform .3s}
.mobile-submenu-toggle.active .arrow{transform:rotate(180deg)}
.mobile-submenu-content{display:none;padding-left:0;background:#f9f9f9}
.mobile-submenu-content.show{display:block}
.mobile-submenu-content a{padding:12px 20px 12px 40px;font-size:14px;color:#666;border-bottom:1px solid #eee}
.mobile-submenu-content a:last-child{border-bottom:none}

/* 响应式 */
@media (max-width:1024px){
    .nav-list{display:none}
    .mobile-menu-btn{display:flex}
}
@media (max-width:768px){
    .header-inner{height:56px;padding:0 12px;justify-content:space-between}
    .logo{gap:6px;flex:1;max-width:70%}
    .logo img{height:36px;width:auto;max-height:36px}
    .logo i{font-size:28px}
    .logo span{display:inline;font-size:18px;max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap}
    .mobile-menu-btn{margin-left:auto}
    .mobile-menu{top:56px}
    .mobile-menu a{padding:14px 16px;font-size:15px}
    .w1200{padding:0 16px}
    .section-block{padding:40px 0}
    .detail-hero{padding:40px 0}
    .detail-hero h1{font-size:1.5rem}
    .product-grid{grid-template-columns:1fr;gap:16px}
    .news-grid{grid-template-columns:1fr;gap:16px}
    .case-grid-home{grid-template-columns:1fr;gap:16px}
    .footer-grid{grid-template-columns:1fr;gap:30px}
    .form-row{grid-template-columns:1fr}
    .contact-wrapper{grid-template-columns:1fr}
    .product-tabs{flex-wrap:wrap}
    .detail-content{font-size:15px;line-height:1.8}
    .detail-content img{max-width:100%;height:auto}
    .detail-info{padding:20px}
    .detail-info h1{font-size:1.4rem}
    .btn{padding:12px 24px;font-size:14px}
}
@media (max-width:480px){
    .header-inner{height:56px}
    .logo img{height:28px}
    .logo span{font-size:12px;max-width:80px}
    .section-block{padding:30px 0}
    .banner-list{height:250px}
    .banner-list li img{min-height:250px}
    .detail-hero h1{font-size:1.3rem}
    .product-item .img{height:180px}
    .case-card-home .img{height:180px}
}

/* ===== 幻灯片 ===== */
.banner{position:relative;margin-top:56px;opacity:0;transition:opacity 0.3s ease}
.banner.loaded{opacity:1}
.banner-inner{width:100%;margin:0 auto;position:relative;overflow:hidden}
.banner-list{position:relative;height:420px;background:#f5f5f5}
.banner-list li{position:absolute;top:0;left:0;width:100%;height:100%;display:none;opacity:0;transition:opacity 0.5s ease}
.banner-list li.active{display:block;opacity:1}
.banner-list li a{display:block;width:100%;height:100%}
.banner-list li img{width:100%;height:100%;object-fit:cover;min-height:420px}

.banner-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.banner-dots span{width:12px;height:12px;border-radius:50%;background:#ddd;cursor:pointer;transition:background .3s}
.banner-dots span.active{background:#178655}

.banner-prev,.banner-next{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;background:rgba(0,0,0,.3);border-radius:50%;cursor:pointer;opacity:0;transition:opacity .3s}
.banner-prev{left:20px}
.banner-next{right:20px}
.banner-inner:hover .banner-prev,
.banner-inner:hover .banner-next{opacity:1}
.banner-prev::before,.banner-next::before{content:'';position:absolute;top:50%;left:50%;width:10px;height:10px;border-top:2px solid #fff;border-left:2px solid #fff}
.banner-prev::before{transform:translate(-30%,-50%) rotate(-45deg)}
.banner-next::before{transform:translate(-70%,-50%) rotate(135deg)}

@media (max-width:768px){
    .banner{margin-top:60px}
    .banner-list{height:220px}
    .banner-dots{bottom:10px}
    .banner-dots span{width:8px;height:8px}
    .banner-prev,.banner-next{display:none}
}

/* ===== 通用区块 ===== */
.page-content{min-height:400px}
.section,.index-section{padding:60px 0}
.section-title{text-align:center;margin-bottom:40px}
.section-title h2{font-size:28px;color:#178655;font-weight:600;margin-bottom:10px}
.section-title p{color:#999}

/* 产品/案例卡片 */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.card-img{height:220px;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-img img{transform:scale(1.1)}
.card-body{padding:16px}
.card-body h3{font-size:16px;margin-bottom:8px}
.card-body p{color:#666;font-size:13px}

/* 按钮 */
.btn{display:inline-block;padding:10px 24px;background:#178655;color:#fff;border-radius:4px;transition:background .2s}
.btn:hover{background:#146543;color:#fff}
.btn-outline{display:inline-block;padding:10px 24px;border:2px solid #178655;color:#178655;border-radius:4px;transition:all .2s}
.btn-outline:hover{background:#178655;color:#fff}

/* 产品/案例列表样式 */
.floor_1,.floor_3{padding:60px 0}
.floor_1 .body ul,.floor_3 .body ul{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.floor_1 .body li,.floor_3 .body li{position:relative;border-radius:5px;overflow:hidden;transition:transform .3s}
.floor_1 .body li:hover,.floor_3 .body li:hover{transform:translateY(-4px)}
.floor_1 .body li .img,.floor_3 .body li .img{height:220px;overflow:hidden}
.floor_1 .body li .img img,.floor_3 .body li .img img{width:100%;height:100%;transition:transform .5s}
.floor_1 .body li:hover .img img,.floor_3 .body li:hover .img img{transform:scale(1.1)}
.floor_1 .body li .txt,.floor_3 .body li .txt{position:absolute;bottom:0;left:0;right:0;padding:15px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff}
.floor_1 .body li .txt h3,.floor_3 .body li .txt h3{font-size:16px;font-weight:normal}

/* 优势区块 */
.floor_2_main{background:#f8f9fa;padding:60px 0}
.box1{display:flex;align-items:center;gap:40px;margin-bottom:40px}
.box1 .left{flex:1}
.box1 .right{flex:0 0 400px}
.box1 .right img{width:100%;border-radius:8px}
.box1 li{margin-bottom:20px}
.box1 li h3{font-size:18px;margin-bottom:8px}
.box1 li p{color:#666}

/* 流程区块 */
.liucheng{background:#178655;color:#fff;padding:60px 0;text-align:center}
.liucheng h3{font-size:28px;margin-bottom:30px}
.liucheng ul{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}
.liucheng li{font-size:14px}

/* ===== 全局动画效果 ===== */
/* 页面过渡动画 */
.page-transition {
    animation: pageFadeIn 0.6s ease;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 悬停缩放效果 */
.hover-scale {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* 浮动动画 */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}

/* 渐变背景动画 */
.gradient-bg {
    background: linear-gradient(-45deg, #178655, #20c997, #178655, #20c997);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 闪烁动画 */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.blink {
    animation: blink 2s infinite;
}

/* 滑动进入动画 */
.slide-in-left {
    animation: slideInLeft 0.6s ease;
}

.slide-in-right {
    animation: slideInRight 0.6s ease;
}

.slide-in-up {
    animation: slideInUp 0.6s ease;
}

.slide-in-down {
    animation: slideInDown 0.6s ease;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 旋转动画 */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate {
    animation: rotate 20s linear infinite;
}

/* 脉冲动画 */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(23, 134, 85, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(23, 134, 85, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(23, 134, 85, 0);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

/* 打字机效果 */
.typewriter {
    overflow: hidden;
    border-right: 3px solid #178655;
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: #178655;
    }
}

/* 3D翻转效果 */
.flip-container {
    perspective: 1000px;
}

.flip-card {
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-container:hover .flip-card {
    transform: rotateY(180deg);
}

.flip-front, .flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-back {
    transform: rotateY(180deg);
}

/* 波浪效果 */
.wave {
    position: relative;
    overflow: hidden;
}

.wave::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: wave 3s linear infinite;
}

@keyframes wave {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* 关于区块 */
.floor_5{display:flex;align-items:center;gap:40px;padding:60px 0}
.floor_5 .left{flex:0 0 400px}
.floor_5 .left img{width:100%;border-radius:8px}
.floor_5 .right{flex:1}
.floor_5 .right h3{font-size:24px;color:#178655;margin-bottom:20px}

/* 新闻区块 */
.floor_6{padding:60px 0}
.floor_6 .cont{display:flex;gap:30px}
.floor_6 .newsimg{flex:0 0 400px}
.floor_6 .newsimg img{width:100%;border-radius:8px;margin-bottom:16px}
.floor_6 .newsimg h3{font-size:18px;margin-bottom:8px}
.floor_6 .newsimg p{color:#666}
.floor_6 .textlist{flex:1}
.floor_6 .textlist li{padding:16px 0;border-bottom:1px dashed #eee}
.floor_6 .textlist li h4{font-size:15px;margin-bottom:6px}
.floor_6 .textlist li p{color:#999;font-size:13px}

/* CTA区块 */
.floor_4_main{background:linear-gradient(135deg,#178655,#146543);color:#fff;padding:50px 0}
.floor_4_main .w1200{display:flex;align-items:center;justify-content:space-between}
.floor_4_main h3{font-size:28px}
.floor_4_main p{font-size:16px;opacity:.9}
.floor_4_main .phone{font-size:32px;font-weight:bold}

/* 链接栏 */
.links_main{border-top:1px solid #eee;padding:30px 0}
.links_main .w1200 span{color:#178655;font-size:24px;font-weight:bold;margin-right:30px}
.links_main .w1200 a{padding:0 20px;color:#666}

/* 页脚 */
.bottom_main{background:#1c2129;color:#999;padding:50px 0}
.bottom_main .w1200{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.bottom_main h4{color:#fff;font-size:16px;margin-bottom:20px}
.bottom_main a{color:#999;display:block;padding:6px 0;font-size:13px}
.bottom_main a:hover{color:#fff}
.bottom_copy{background:#1a1a1a;color:#666;padding:20px 0;text-align:center;font-size:12px}
.bottom_copy a{color:#666;display:inline;padding:0}

/* 响应式 */
@media (max-width:1024px){
    .card-grid{grid-template-columns:repeat(2,1fr)}
    .floor_1 .body ul,.floor_3 .body ul{grid-template-columns:repeat(2,1fr)}
    .floor_5{flex-direction:column}
    .floor_5 .left{flex:none;width:100%}
    .floor_6 .cont{flex-direction:column}
    .floor_6 .newsimg{flex:none;width:100%}
    .bottom_main .w1200{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
    .section{padding:40px 0}
    .card-grid{grid-template-columns:1fr}
    .floor_1 .body ul,.floor_3 .body ul{grid-template-columns:1fr}
    .box1{flex-direction:column}
    .box1 .right{flex:none;width:100%}
    .floor_4_main .w1200{flex-direction:column;text-align:center;gap:20px}
    .bottom_main .w1200{grid-template-columns:1fr}
    .liucheng ul{gap:20px}
    .floor_1 .body li .img,.floor_3 .body li .img{height:180px}
}

/* 分页样式 */
.pagination-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;margin:40px 0;flex-wrap:wrap}
.pagination-nums{display:flex;gap:4px}
.page-btn{display:flex;align-items:center;gap:6px;padding:10px 18px;background:#fff;border:1px solid #e5e5e5;border-radius:6px;color:#666;font-size:14px;transition:all .3s}
.page-btn:hover{background:#178655;border-color:#178655;color:#fff}
.page-num{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 10px;background:#fff;border:1px solid #e5e5e5;border-radius:6px;color:#666;font-size:14px;transition:all .3s}
.page-num:hover{background:#f5f5f5;border-color:#178655;color:#178655}
.page-num.current{background:#178655;border-color:#178655;color:#fff;font-weight:600}
.page-ellipsis{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;color:#999}
.page-prev i,.page-next i{font-size:12px}
.page-btn.page-prev,.page-btn.page-next{padding:10px 16px}

@media(max-width:768px){
.pagination-wrapper{gap:6px}
.pagination-nums{display:none}
.page-btn{padding:8px 12px;font-size:13px}
.page-num{min-width:36px;height:36px;font-size:13px}
}