﻿

/*首页动画图片*/
@import url('color.css');

/*首页统一Title*/
 .section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 36px;
    color: var(--color-primary);
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-title h2::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--color-secondary);
}

.section-title p {
    font-size: 18px;
    color: var(--mid-gray);
    max-width: 800px;
    margin: 0 auto;
}

/*首页动画*/
.banner{ width:100%; height:600px; position:relative; background:#eee; overflow:hidden;}
.banner ul{ position:absolute; left:50%; margin-left:-960px; top:0;}
.banner ul li{ width:1920px; height:600px; float:left; overflow:hidden;}
.banner ul li img{ display:block; width:1920px; height:100%; object-fit:cover;}

.bannerindeo{ position:absolute; left:0; bottom:30px; width:100%; text-align:center; z-index:99;}
.bannerindeo a{ display:inline-block; width:12px; height:12px; background:url(../images/cycle_w.png) no-repeat; opacity: 0.5;  margin-right:12px; line-height:600px; overflow:hidden;}
.bannerindeo a.cur{ background:url(../images/cycle_w.png) no-repeat;opacity:1;}

.banner .bannerarrow { position: absolute; left:0; top: 50%; width:100%; z-index: 199; }
.banner .bannerarrow a.prev { background:url(../images/cycle_l.png) no-repeat;width:70px;height:70px;display:block;float:left;}
.banner .bannerarrow a.prev:hover{opacity: 0.9;}
.banner .bannerarrow a.next {  background:url(../images/cycle_r.png) no-repeat;width:70px;height:70px;display:block;float:right;}
.banner .bannerarrow a.next:hover{opacity: 0.9;}


  /* 痛点解决方案 */
    .pain-point {
        padding: 100px 0;
        background: var(--light-gray);
    }

    .pain-point-wrap {
        margin:0 80px;
        display: flex;
        gap: 40px;
        align-items: center;
    }

    .pain-point-left {
        flex: 1;
    }

    .pain-point-card {
        background: var(--white);
        padding: 25px;
        border-radius: 8px;
        box-shadow: var(--shadow);
        margin-bottom: 20px;
        border-left: 4px solid #e74c3c;
    }

    .pain-point-card h4 {
        font-size: 18px;
        margin-bottom: 10px;
        color: #e74c3c;
    }

    .pain-point-right {
        flex: 1;
    }

    .pain-point-right h3 {
        font-size: 30px;
        color: var(--primary);
        margin-bottom: 20px;
    }

    .pain-point-right ul {
        margin-bottom: 30px;
    }

    .pain-point-right li {
        font-size: 18px;
        margin-bottom: 15px;
        display: flex;
        align-items: flex-start;
    }

    .pain-point-right li::before {
        content: "✓";
        color: var(--secondary);
        font-size: 20px;
        margin-right: 10px;
        margin-top: 5px;
    }


/* 核心实力 */
.core-strength {
    padding: 100px 0;
}

.strength-wrap {
    margin:0 80px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.strength-card {
    background: var(--white);
    padding: 40px 20px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: transform 0.3s ease;
}

.strength-card:hover {
    transform: translateY(-5px);
}

.strength-card h3 {
    font-size: 40px;
    color: var(--secondary);
    margin-bottom: 15px;
}

.strength-card p {
    font-size: 16px;
    color: var(--mid-gray);
    font-weight: 500;
}



 /* 核心实力 */
.core-strength {
    padding: 100px 0;
}

.strength-wrap {
     margin:0 80px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.strength-card {
    background: var(--color-bg-primary);
    padding: 40px 20px;
    border-radius: 8px;
    box-shadow: var(--shadow-small);
    text-align: center;
    transition: transform 0.3s ease;
}

.strength-card:hover {
    transform: translateY(-5px);
}

.strength-card h3 {
    font-size: var(--font-size-xl);
    color: var(--color-secondary);
    margin-bottom: 15px;
}

.strength-card p {
    font-size: 16px;
    color: var(--font-color-normal);
    font-weight: 500;
}


 /* 核心服务 */
.core-service {
    padding: 100px 0;
    background: var(--light-gray);
}

.service-tab {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    gap: 20px;
}

.service-tab-item {
    padding: 10px 30px;
    background: var(--white);
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    color: var(--primary);
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

.service-tab-item.active {
    background: var(--secondary);
    color: var(--white);
}

.service-wrap {
    margin:0 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card {
    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.service-card h4 {
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.service-card h4 i {
    font-size: 24px;
    color: var(--secondary);
    margin-right: 10px;
}

.service-card p {
    color: var(--mid-gray);
    line-height: 1.7;
}


 /* 成功案例 */
        .case {
            padding: 100px 0;
        }

        .case-filter {
            display: flex;
            justify-content: center;
            margin-bottom: 40px;
            gap: 15px;
        }

        .case-filter .sorts-filter-item {
            padding: 8px 25px;
            border: 1px solid var(--primary);
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .case-filter .sorts-filter-item.active {
            background: var(--primary);
            color: var(--white);
        }
        .case-filter .sorts-filter-item.active a {color:var(--font-color-inverse);}

        .case-wrap {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .case-card {
            background: var(--white);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: transform 0.3s ease;
        }

        .case-card:hover {
            transform: translateY(-5px);
        }

        .case-card img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }

        .case-card-content {
            padding: 20px;
        }

        .case-card-content h4 {
            font-size: 18px;
            color: var(--primary);
            margin-bottom: 10px;
        }

        .case-card-content .tag {
            display: inline-block;
            padding: 3px 10px;
            background: var(--light-gray);
            color: var(--primary);
            border-radius: 3px;
            font-size: 12px;
            margin-bottom: 10px;
        }

        .case-card-content p {
            color: var(--mid-gray);
            font-size: 14px;
        }
        /* 全球布局 */
        .global {
            padding: 100px 0;
            background: var(--light-gray);
        }

        .global-wrap {
            display: flex;
            gap: 40px;
            align-items: center;
        }

        .global-left {
            flex: 1;
        }

        .global-left img {
            width: 100%;
            border-radius: 8px;
            box-shadow: var(--shadow);
        }

        .global-right {
            flex: 1;
        }

        .global-right h3 {
            font-size: 30px;
            color: var(--primary);
            margin-bottom: 20px;
        }

        .global-right p {
            color: var(--mid-gray);
            margin-bottom: 30px;
            font-size: 16px;
        }

        .global-list {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 30px;
        }

        .global-list-item {
            padding: 8px 20px;
            background: var(--white);
            border-radius: 30px;
            box-shadow: var(--shadow);
            color: var(--primary);
            font-weight: 500;
        }
        /* 咨询板块 */
        .consult {
            padding: 80px 0;
            background: var(--primary);
            color: var(--white);
        }

        .consult-wrap {
            display: flex;
            gap: 40px;
            align-items: center;
        }

        .consult-left {
            flex: 1;
        }

        .consult-left h3 {
            font-size: 36px;
            margin-bottom: 20px;
        }

        .consult-left p {
            font-size: 18px;
            color: #f0f0f0;
            margin-bottom: 30px;
        }

        .consult-contact {
            display: flex;
            gap: 30px;
            margin-top: 20px;
        }

        .consult-contact-item {
            display: flex;
            align-items: center;
        }

        .consult-contact-item i {
            font-size: 24px;
            color: var(--secondary);
            margin-right: 10px;
        }

        .consult-right {
            flex: 1;
        }

        .consult-form {
            background: var(--white);
            padding: 40px;
            border-radius: 8px;
            box-shadow: var(--shadow);
        }

     .consult-form input, 
.consult-form select, 
.consult-form textarea {
    width: 100%;            /* 统一改成 80% */
    padding: 15px;
    margin: 0 auto 20px;   /* 水平居中 + 底部间距 */
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 16px;
    color: var(--dark-gray);
    display: block;        /* 让宽度和居中生效 */
    box-sizing: border-box;/* 关键：内边距不撑宽 */
}

        .consult-form input:focus, .consult-form select:focus, .consult-form textarea:focus {
            outline: none;
            border-color: var(--secondary);
        }

        .consult-form textarea {
            height: 100px;
            resize: none;
        }




/*我们的服务*/

.service { width: 100%; padding: 60px 0; background: #ebf3ef; }
.service .tit { font-size: 32px; color:var(--font-bold); font-weight:bold;  }
.service .note { font-size: 16px; color:var(--font-light);  margin-top: 20px; }

.service .list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; justify-items: center; margin-top:50px;}
.service .list .item{background:var(--border-list);border-radius:10px;padding:30px 50px;width:calc(100% - 100px);}
.service .list .item:nth-child(3n+1) { justify-self: start; }
.service .list .item:nth-child(3n) { justify-self: end; }

.service .list .item .name{font-weight:bold;margin:10px 0px;font-size:18px;color:var(--font-bold);}
.service .list .item .name i { color: var(--font-bold); font-size: 32px; margin-right: 10px; }
.service .list .item .name a{color:var(--font-bold);}

.service .list .item .mark{line-height:32px;color:var(--font-light);}
.service .list .item .mark a{color:var(--font-light);margin-right:20px;}
.service .list .item .mark a:hover { color: var(--font-bold); }




/*服务流程*/

.process { width: 100%; padding: 60px 0; background: linear-gradient(to bottom, #947438, #d0b47e); }
.process .tit { font-size: 26px; color:var(--border-list); font-weight: bold; text-align: center; }

.process .list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; justify-items: center; margin-top: 50px; }
.process .list .item { background:var(--border-list); border-radius: 10px; padding: 10px 30px; width: calc(100% - 60px); }

.process .list .item .name { font-weight: bold; margin: 10px 0px; font-size: 18px; color:var(--font-bold); text-align: center; }
.process .list .item .name i { font-size: 36px; margin: 10px 0px; color: var(--font-bold); }
.process .list .item .mark { line-height: 26px; margin: 20px 0px; color: var(--font-light); text-align: justify; }


/*首页公司介绍*/

.about { width: 100%; padding: 60px 0; background: linear-gradient(180deg,#ece9ff 0%,#ece9ff 26.04%,rgba(236,233,255,0) 100%); }
.about .content{float:left;width:calc(100% - 500px);}
.about .content .tit { font-size: 32px; font-weight: 500; color: var(--font-bold); }
.about .content .note {padding:30px 0px; line-height:30px;font-size:16px;margin-top:20px;}
.about .content .note p{margin-bottom:20px;}
.about .content .note p b { color: var(--font-bold); font-size: 20px; }
.about .content .note img{width:100%;border-radius:10px;}

.about .content .note .video { border: 1px solid var(--font-bold); }

.about .line { background: #ebf3ef; height: 232px; border-radius: 10px; color: var(--font-bold); }
.about .line .line1 { height: 116px; }
.about .line .line1 .items { width: 25%; float: left; display: flex; align-items: flex-end; justify-content: center; height: 116px; line-height: 60px; }
.about .line .line1 .items span { font-size: 52px; }
.about .line .line1 .items b { font-weight: 100; display: flex; align-items: flex-end; line-height: 50px; margin-left: 5px; font-size: 28px; }
.about .line .line2 { height: 116px; }
.about .line .line2 .items { width: 25%; float: left; height: 106px; padding-top: 10px; font-size: 16px; display: flex; align-items: flex-start; justify-content: center; }
.about .line .line2 .items b { font-weight: normal; margin-right: 10px; }
.about sup { vertical-align: super; font-size:14px; margin-left:5px;font-weight:bold; }

.about .office{float:right;margin-left:50px;width:450px;}
.about .office .item{width:100%;overflow:hidden;margin-bottom:30px;text-align:center;}
.about .office .item .img{border-radius:10px;width:100%;aspect-ratio:4/3;}
.about .office .item .img img{width:100%;height:100%;border-radius:10px;}


/*首页项目展示*/

.products { width: 100%; padding: 60px 0; background:var(--border); }
.products .tit { font-size: 32px;  font-weight: 500; color:var(--font-bold); text-align: center; }
.products .note { font-size: 16px; color:var(--font-light); margin-top: 20px; text-align: center; }

.products .list { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; margin: 0 auto; padding: 10px; }
.products .item { width: 19%; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.3s; margin-top: 50px;background:var(--border-list); border-radius:5px;}
.products .item:hover { transform: translateY(-5px); }
.products .img { width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.products .img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.products .text { padding: 30px 10px; text-align: center; font-size: 16px; color:var(--font-bold);}


/*新闻动态*/
.news { width: 100%; padding: 50px 0; background: var(--light-gray); }
/*.news .tit { font-size: 26px; color:var(--font-bold); font-weight: bold; text-align:center;}
.news .tit a{color:var(--font-bold);}
.news .note { font-size: 16px; color:var(--font-light); margin-top: 20px; } 
*/


.news .list { width: 100%; margin: 0 auto;}
.news .items { text-align: center; display: block; cursor: pointer; margin-top: 30px; }
.news .items .img { width: 90%; margin:0 auto; aspect-ratio:4/3; overflow: hidden; border: 1px solid var(--border); border-radius: 5px; }
.news .items .img img { width: 100%; height: 100%; object-fit: cover; }
.news .items .text { width: 90%; height: 40px; padding: 10px; overflow: hidden; color:var(--font-light);}



/*首页客户案例*/

.case { width: 100%; padding: 60px 0; background:var(--nav-bg); }
.case .tit { font-size: 28px; font-weight: 500;color:var(--font-bold);text-align:center; }
.case .note { font-size: 16px; color:var(--font-light); margin-top: 12px; text-align:center;}

.case .list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; width: 100%; margin-top: 50px; }
.case .item {background:var(--border-list);border-radius:8px;padding:0 10px; border:1px solid var(--border);overflow:hidden;}
.case .item img { width: 100%; height: 100%; object-fit: cover; }


