/* 全局样式 */

body,
ul,
li,
ol,
p,
dl,
dd,
dt,
a,
form {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #007bff;
    --secondary-color: #e6a23c;
    --light-bg: #f8f9fa;
    --dark-text: #333;
    --light-text: #666;
}

li {
    list-style: none;
}

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    background-color: #fff;
    font-size: 15px;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: #333;
}

a:hover {
    color: var(--primary-color);
}

img {
    max-width: 100%;
}

/* 基础样式 */

.header {
    border-bottom: 1px solid #eee;
    height: 100px;
    background-color: #fff;
    position: fixed;
    z-index: 9999;
    width: 100%;
}

.logo {
    background-color: #094cd3;
    height: 120px;transition: .35s;
}
.scrolled .logo{height: 100px;}
.logo img {
    display: block;
    width: 70%;
    margin: 20px auto;
}
.scrolled .logo img{
    margin: 10px auto;
}
.header,
.header-bottom {
    height: 100px;
}

@media (max-width:768px) {
    .logo {
        height: auto;
    }
    .logo img {
        margin: 0 auto;
    }
    .header,.header-bottom{height: 80px}
}


.nav-link {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    width: 100%;
}

.nav-link:hover {
    color: var(--primary-color);
}

.dropdown-item {
    text-decoration: none;
    color: #333;
}

.dropdown-item:hover {
    background-color: #033fb8;
    color: #FFF;
}

.hotline {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hotline svg {
    width: 24px;
}


/* 合并移动端样式（≤991.98px），减少冗余 */

@media (max-width: 991.98px) {
    .logo {
        text-align: center;
        height: 80px;
        margin: 0 -15px;
        padding-top: 20px;width: 60%;
    }
    .nav-menu {
        margin-bottom: 15px;
        justify-content: center;
        flex-wrap: wrap;
        background-color: #FFF;
        z-index: 9999;
        position: relative;
    }
    .hotline {
        justify-content: center;
    }
    .hotline span {
        display: none;
    }
    .banner {
        height: 400px;
    }
    .banner-title {
        font-size: 36px;
    }
    .banner-subtitle {
        font-size: 20px;
    }
    /* SVG 图标容器（移动端触控优化） */
    .icon-container {
        width: 48px;
        height: 48px;
        margin: 20px 0;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    /* SVG 图标基础样式 */
    .shake-icon {
        width: 100%;
        height: 100%;
        object-fit: contain;
        fill: #007aff;
        /* 图标主色 */
        /* 绑定抖动动画：动画名 时长 循环 匀速 */
        animation: shake-scale 1.5s infinite linear;
    }
    .shake-icon.rotate {
        animation: shake-scale-rotate 1.2s infinite ease-in-out;
    }
    @keyframes shake-scale-rotate {
        0% {
            transform: scale(1) rotate(0deg);
        }
        25% {
            transform: scale(1.1) rotate(2deg);
        }
        50% {
            transform: scale(1) rotate(0deg);
        }
        75% {
            transform: scale(0.9) rotate(-2deg);
        }
        100% {
            transform: scale(1) rotate(0deg);
        }
    }
}

/* 更小屏适配（≤375px） */

@media (max-width: 375px) {
    .icon-container {
        width: 40px;
        height: 40px;
    }
}

/* PC端默认样式（≥992px）：导航居中+电话居右+下拉不撑开+延迟消失 */

@media (min-width: 992px) {
    .row {
        display: flex;
        justify-content: space-between;
        position: relative;
    }
 
    .nav-menu {
        justify-content: center !important;
        display: flex !important;
        gap: 0;
    }
    .nav-menu a {
        position: relative;
        height: 80px;
        line-height: 80px;
        display: block;
        z-index: 1;
        color: #333333;
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: linear;
    }
    .nav-menu .nav-item:hover a {
        color: #fff;
    }
    .nav-menu .nav-item:hover a:before {
        transform: scaleX(1);
        -webkit-transform: scaleX(1);
        -moz-transform: scaleX(1);
        transform-origin: 0;
        -webkit-transform-origin: 0;
        visibility: visible\9;
    }
    .nav-menu .nav-item a:before {
        content: "";
        width: 100%;
        height: 100%;
        background-color: var(--primary-color);
        z-index: -1;
        position: absolute;
        left: 0;
        top: 0px;
        transform-origin: 100%;
        -webkit-transform-origin: 100%;
        -webkit-transition: -webkit-transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
        transition: -webkit-transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
        transform: scaleX(0);
        -webkit-transform: scaleX(0);
        visibility: hidden\9;
    }
    .nav-menu .dropdown-menu a {
        height: 50px;
        color: #fff;
        line-height: 42px;
        text-align: center;
    }
    .nav-menu .dropdown-menu a:before {
        height: 2px;
    }
    /* 一级菜单父项：固定宽度，确保下拉菜单对齐 */
    .dropdown-parent {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        width: 122px;
        /* 固定父级宽度，可根据需求调整 */
        text-align: center;
    }
    .dropdown-arrow {
        font-size: 12px;
    }
    /* 二级下拉菜单：核心优化 - 宽度与父级一致 + 渐显动画 */
    .dropdown-menu {
        position: absolute !important;
        z-index: 999;
        top: 100%;
        left: 0;
        margin-top: 0;
        padding: 0;
        border: none;
        display: block;
        /* 改为block，通过opacity控制显示 */
        opacity: 0;
        visibility: hidden;
        /* 配合opacity实现真正隐藏 */
        width: 100% !important;
        min-width: 0 !important;
        /* 清除Bootstrap的min-width:10rem */
        max-width: 100% !important;
        /* 防止宽度溢出 */
        /* 从上至下缓冲渐显动画 */
        transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.5s, transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        transform: translateY(-10px);
        /* 初始向上偏移 */
        background-color: #1455d3d9;
        /* 半透明蓝色背景 */
        border-radius: 0;
    }
    /* 下拉菜单显示样式：渐显+下移 */
    .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        /* 回到原位置 */
    }
    .nav-item .nav-link {
        justify-content: center;
        width: auto;
    }
}

/* 小屏样式（<992px）：保留原有功能，修复下拉箭头样式 */

@media (max-width: 991.98px) {
    .nav-menu-wrapper {
        display: none;
    }
    .nav-menu-wrapper.show {
        display: block;position: absolute;
        top: 80px;
        width: 100%;
        left: 0;
    }
    .nav-toggle-btn {
        display: flex !important;
    }
    .nav-menu {
        width: 100%;
    }
    .nav-item {
        position: relative;
        width: 100%;
        box-sizing: border-box;
    }
    .dropdown-menu {
        display: none;
        width: 100% !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        margin: 0.5rem 0 0 0 !important;
        padding: 0.5rem 0 !important;
        border: 1px solid #eee;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: hidden;
    }
    /* 仅当nav-item有active类时，二级菜单显示 */
    .nav-item.active .dropdown-menu {
        display: block;
    }
    .dropdown-arrow {
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }
    /* 修复：箭头是i标签，不是svg */
    .nav-item.active .dropdown-arrow i {
        transform: rotate(180deg);
    }
}

/* 导航按钮样式（三横↔叉号） */

.nav-toggle-btn {
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none !important;
}

.nav-icon {
    position: relative;
    width: 24px;
    height: 20px;
    display: block;
    transition: all 0.3s ease 0s;
}

.nav-icon .bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #333;
    border-radius: 1px;
    transition: all 0.3s ease 0s;
}

.nav-icon .bar:nth-child(1) {
    top: 0;
}

.nav-icon .bar:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.nav-icon .bar:nth-child(3) {
    bottom: 0;
}

.nav-toggle-btn.active .nav-icon .bar:nth-child(1) {
    top: 50% !important;
    transform: translateY(-50%) rotate(45deg) !important;
}

.nav-toggle-btn.active .nav-icon .bar:nth-child(2) {
    opacity: 0 !important;
}

.nav-toggle-btn.active .nav-icon .bar:nth-child(3) {
    bottom: 50% !important;
    transform: translateY(50%) rotate(-45deg) !important;
}

/* Banner区域 */

.swiper-horizontal>.swiper-pagination-bullets {
    bottom: 10px !important;
}

.banner-n {
    height: 400px;
    background: url("https://picsum.photos/1920/600") no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    position: relative;
}

.banner-n::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.banner-content {
    position: relative;
    z-index: -1;
}

@media (max-width:) {
    .banner-title {
        font-size: 42px;
        font-weight: bold;
        margin-bottom: 20px;
        line-height: 1.2;
        text-align: center;
        color: #FFF;
    }
}

.banner-subtitle {
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
    color: #FFF;
    width: 50%;
    margin: 0 auto;
}

/* 主内容区通用样式 */

.content-section.process-section {
    padding: 60px 0 150px;
    margin-bottom: 0;
    background: #f5f5f5 url(/images/bg-gylc.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
}

/* Tab切换区域 */

.tab-container {
    max-width: 1430px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
}

.tab-section {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    width: 100%;
}

/* 左侧竖排Tab */

.tab-nav {
    width: 200px;
    flex-shrink: 0;
    padding: 10px 0;
}

.tab-btn {
    display: block;
    width: 100%;
    padding: 10px 20px;
    background: #f5f5f5;
    border: none;
    text-align: left;
    font-size: 16px;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 5px;
}

.tab-btn.active {
    background: var(--primary-color);
    color: #fff;
    font-weight: 500;
    padding-left: 25px;
    position: relative;
}

.tab-btn.active::before {
    content: "";
    display: block;
    width: 4px;
    height: 20px;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.tab-btn:hover:not(.active) {
    background: #f0f0f0;
    padding-left: 25px;
}

/* 右侧Tab内容区 */

.tab-content-wrap {
    flex: 1;
    width: calc(100% - 230px);
}

.tab-content {
    display: none;
    width: 100%;
    height: 100%;
}

.tab-content.active {
    display: block;
}

/* Swiper核心样式 - 确保3列生效 */

.card-swiper {
    width: 100%;
    height: auto;
    position: relative;
    padding: 10px 0 30px;
    overflow: hidden;
}

.card-swiper .swiper-wrapper {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
}

.card-swiper .swiper-slide {
    /* 强制PC端3列宽度 */
    height: auto !important;
    flex: 0 0 auto !important;
}

.card-swiper .card-img {
    margin-bottom: 5px !important;
}

/* 卡片样式 */

.card-item {
    background: #fff;
    overflow: hidden;
    text-align: center;
    padding-bottom: 15px;
    height: 100%;
    transition: transform 0.3s ease;
}

.card-item:hover {
    transform: translateY(-5px);
}

.card-img {
    width: 100%;
    object-fit: cover;
    margin-bottom: 15px;
}

.card-text {
    line-height: 1.6;
    padding: 0 15px;
    color: #666;
    min-height: 60px;
}

/* Swiper箭头样式 */

.swiper-button-prev,
.swiper-button-next {
    width: 40px;
    height: 65px;
    background-color: #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: #fff !important;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    z-index: 10;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: var(--primary-color);
    color: #fff !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 18px !important;
    font-weight: bold;
}

.swiper-button-prev {
    left: 10px;
}

.swiper-button-next {
    right: 10px;
}

/* 特色工艺区域 */

.craft-section {
    background-color: #f9f9f9 !important;
}

.section-desc {
    font-size: 16px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
    color: #666;
    line-height: 1.8;
}

.craft-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.craft-item {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.craft-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.craft-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.craft-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #222;
}

.craft-text {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* 施工流程区域 - 保留所有原有特效 */

.content-section.process-section {
    padding: 60px 0 120px;
    overflow: hidden;
    background-color: #f5f4f4 !important;
}

.process-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    margin: 50px auto 0;
    padding: 0 20px;
}

/* 黄色背景线条 */

.process-line {
    position: absolute;
    top: 54px;
    left: 0;
    width: 100%;
    height: 15px;
    background-color: #ffb088;
    transform: translateY(-50%);
    z-index: 1;
    border-radius: 5px;
}

/* 滚动容器：包含2份流程项，实现无缝衔接，层级高于线条 */

.process-scroll {
    display: flex;
    justify-content: flex-start;
    gap: 40px;
    width: calc(2 * var(--process-width));
    animation: scroll-left 60s linear infinite;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

/* 单个流程项样式：固定宽高，保证排版统一 */

.process-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 120px;
    flex-shrink: 0;
}

.process-icon {
    width: 88px;
    height: 88px;
    background: #fff;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    color: var(--primary-color);
    font-size: 30px;
    flex-shrink: 0;
    position: relative;
    transition: all 0.3s ease;
    margin: 10px;
}

.process-icon img {
    width: 60px;
    border-radius: 50%;
    max-width: 100%;
}

.process-icon::before {
    border: 10px solid #f5f5f5;
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    z-index: -1;
}

.process-title {
    font-weight: 500;
    color: #333;
    line-height: 1.2;
    height: 38px;
}

.process-item span {
    display: block;
    background-color: #227ccf;
    padding: 5px 12px;
    color: #fff;
    margin-top: 5px;
    font-size: 14px;
}

/* 响应式适配 - 移动端调整 */

@media (max-width: 992px) {
    .tab-section {
        flex-direction: column;
        gap: 20px;
    }
    .tab-nav {
        width: 100%;
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding: 10px;
        margin-bottom: 0;
    }
    .tab-btn {
        white-space: nowrap;
        margin-bottom: 0;
        padding: 10px 15px;
    }
    .tab-btn.active {
        padding-left: 15px;
    }
    .tab-btn:hover:not(.active) {
        padding-left: 15px;
    }
    .tab-content-wrap {
        width: 100%;
        padding: 20px;
    }
    /* 平板端Swiper 2列 */
    .swiper-slide {
        width: calc((100% - 25px) / 2) !important;
    }
    .craft-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .swiper-button-prev {
        left: 10px;
    }
    .swiper-button-next {
        right: 10px;
    }
}

@media (max-width: 576px) {
    .banner {
        height: 300px;
    }
    .banner-title {
        font-size: 28px;
    }
    .banner-subtitle {
        font-size: 16px;
    }
    .section-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .craft-list {
        grid-template-columns: 1fr;
    }
    /* 手机端Swiper 1列 */
    .swiper-slide {
        width: 100% !important;
    }
    /* 手机端流程项进一步调整 */
    .process-item {
        width: 80px;
        margin-top: 25px;
    }
    .process-icon {
        overflow: hidden;
        border-radius: 50%;
    }
    .process-line {
        height: 10px;
        top: 80px;
    }
    .process-title {
        font-size: 12px;
    }
    .process-scroll {
        gap: 20px;
        animation-duration: 40s;
    }
    .tab-content-wrap {
        padding: 20px 15px;
    }
    .process-wrap {
        margin-top: 20px;
    }
}

/***案例***/

/* 筛选区域 - eyoucms风格 */

.filter-section {
    background-color: var(--light-bg);
    padding: 25px 0;
    margin-bottom: 40px;
    border-radius: 8px;
}

.filter-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--secondary-color);
}

.filter-options-container {
    margin-bottom: 10px;
    max-height: 140px;
    overflow-y: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-link {
    display: inline-block;
    padding: 6px 15px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 30px;
    font-size: 0.9rem;
    color: #555;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
}

.filter-link:hover,
.filter-link.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    text-decoration: none;
}

/* 案例卡片 */

.case-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    margin-bottom: 30px;
}

.case-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}

.case-img {
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    margin-bottom: 15px;height: 500px;
}

.case-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
@media (max-width:575px){.case-img {height:auto;}}
.case-card:hover .case-img img {
    transform: scale(1.05);
}

.case-info {
    padding: 20px;
}

.case-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.case-details {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.case-detail-item {
    flex: 0 0 50%;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.case-detail-item i {
    color: var(--secondary-color);
    margin-right: 5px;
    width: 18px;
}

.case-price {
    color: #e63946;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.designer-info {
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.designer-avatar {
    width: 100%;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 12px;
    border: 2px solid var(--light-bg);
}

.designer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cases-section .designer-info .designer-avatar {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    overflow: hidden;
}

.contact-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    transition: all 0.3s;
    margin-left: auto;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.contact-btn:hover {
    background-color: #1a4a8a;
    color: white;
    transform: scale(1.05);
    text-decoration: none;
}

/* 响应式调整 */

@media (max-width: 768px) {
    .banner h1 {
        font-size: 2.2rem;
    }
    .case-detail-item {
        flex: 0 0 100%;
    }
    .contact-btn {
        padding: 6px 15px;
        font-size: 0.85rem;
    }
}

/* 面包屑导航 */

.breadcrumb {
    background-color: transparent;
    padding: 15px 0;
    margin-bottom: 20px;
}

.breadcrumb-item a {
    color: var(--primary-color);
    text-decoration: none;
}

.breadcrumb-item.active {
    color: var(--light-text);
}

/* 主内容区域 - 左右两栏布局 */

.main-content {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
}

.left-column {
    flex: 1;
}

.right-column {
    width: 300px;
}

/* 案例头部信息 */

.case-detail-header {
    background-color: white;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.case-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.case-meta {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.case-meta-item {
    display: flex;
    align-items: center;
    margin-right: 30px;
    margin-bottom: 10px;
}

.case-meta-icon {
    background-color: var(--primary-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.case-meta-text {
    display: flex;
    flex-direction: column;
}

.case-meta-label {
    font-size: 0.85rem;
    color: var(--light-text);
}

.case-meta-value {
    font-weight: 600;
    font-size: 1.1rem;
}

.case-price-tag {
    background-color: #e63946;
    color: white;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 1.5rem;
    font-weight: 700;
    display: inline-block;
}

/* 案例图片区域 */

.case-gallery {
    margin-bottom: 40px;
}

.main-image {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.main-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    transition: transform 0.5s;
}

.main-image img:hover {
    transform: scale(1.02);
}

/* 案例描述 */

.case-description {
    background-color: white;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.case-description p {
    line-height: 1.8;
    margin-bottom: 20px;
}

.feature-list {
    list-style-type: none;
    padding-left: 0;
}

.feature-list li {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    position: relative;
    padding-left: 30px;
}

.feature-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: bold;
}

/* 右侧边栏 - 设计师信息 */

.designer-sidebar {
    background-color: white;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 30px;
}

.designer-header {
    border-bottom: 1px solid #eee;
    position: relative;
}

.designer-level {
    position: absolute;
    background-color: #f60;
    color: #fff;
    left: 0;
    top: 0;
    z-index: 110;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 0 0 10px 0;
}

.designer-avatar {
    overflow: hidden;
    margin: 0 auto 20px;
}

.designer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.designer-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.designer-title {
    font-size: 1rem;
    margin-bottom: 15px;
}

.designer-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.designer-stat {
    text-align: center;
    padding: 15px 10px;
    background-color: var(--light-bg);
    border-radius: 8px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    display: block;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--light-text);
}

.designer-bio p {
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.contact-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 25px;
}

.designer-actions .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    padding: 12px;
    font-weight: 600;
    border-radius: 30px;
    width: 100%;
}

.designer-actions .btn-primary:hover {
    background-color: #1a4a8a;
    border-color: #1a4a8a;
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 30px;
    width: 100%;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* 相关案例 */

.related-cases {
    margin-bottom: 60px;
}

.related-case-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s;
    height: 100%;
}

.related-case-card:hover {
    transform: translateY(-8px);
}

.related-case-img {
    height: 180px;
    overflow: hidden;
}

.related-case-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.related-case-card:hover .related-case-img img {
    transform: scale(1.05);
}

.related-case-info {
    padding: 20px;
}

.related-case-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.related-case-meta {
    font-size: 0.9rem;
    color: var(--light-text);
    margin-bottom: 10px;
}

/* 响应式调整 */

@media (max-width: 992px) {
    .main-content {
        flex-direction: column;
    }
    .right-column {
        width: 100%;
    }
    .designer-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .banner h1 {
        font-size: 2rem;
    }
    .case-title {
        font-size: 1.6rem;
    }
    .case-meta-item {
        margin-right: 15px;
    }
    .designer-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

.breadcrumb {
    background-color: #f5f5f5;
    font-size: 14px;
    padding: 0.75rem 0;
    color: #666;
}

/* sidebar_box侧边栏 */

.sidebar_box {
    position: fixed;
    right: 6px;
    top: 50%;
    text-align: center;
    z-index: 99999;
    margin-top: -200px;
    font-size: 12px;
    width: 80px;
}

.sidebar_box li>a {
    display: block;
    overflow: hidden;
    width: 78px;
    z-index: 5;
    height: 78px;
    border: 1px solid #f1f1f1;
    color: #666666;
    line-height: 125px;
    margin-bottom: 3px;
    border-radius: 6px;
}

.sidebar_box li>a:hover {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0);
}

.sidebar_box li {
    position: relative;
    display: inline-block;
}

.tel {
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    -o-transition: all 0.15s;
    height: 80px;
    line-height: 80px;
    top: 0;
    transition: all 0.15s;
    position: absolute;
    right: 0px;
    padding: 0 5px 0 25px;
    border-radius: 40px 0 0 40px;
    font-family: Arial;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    background: #007bff;
    white-space: nowrap;
    z-index: -1;
    display: block;
    text-align: center;
}

.sidebar_box li:hover .tel {
    right: 80px;
    opacity: 1;
    visibility: visible;
}

@media (max-width:640px) {
    .sidebar_box {
        display: none;
    }
}

.sidebar_phone {
    background: #fff url(../images/sidebar01.png) no-repeat center center;
}

.sidebar_phone:hover {
    background: #007bff url(../images/sidebars01.png) no-repeat center center;
    border-radius: 0 6px 6px 0;
}

.sidebar_service {
    background: #fff url(../images/sidebar02.png) no-repeat center center;
}

.sidebar_service:hover {
    background: #007bff url(../images/sidebars02.png) no-repeat center center;
}

.sidebar_make {
    background: #fff url(../images/sidebar03.png) no-repeat center center;
}

.sidebar_make:hover {
    background: #007bff url(../images/sidebars03.png) no-repeat center center;
}

.sidebar_code {
    background: #fff url(../images/sidebar04.png) no-repeat center center;
}

.sidebar_code:hover {
    background: #007bff url(../images/sidebars04.png) no-repeat center center;
}

.sidebar_top {
    background: #fff url(../images/sidebar05.png) no-repeat center center;
}

.sidebar_top:hover {
    background: #007bff url(../images/sidebars05.png) no-repeat center center;
}

.code_pop {
    overflow: hidden;
    width: 270px;
    height: 260px;
    background: url(../images/code_bg.png) no-repeat center top;
    visibility: hidden;
    position: absolute;
    right: 0px;
    bottom: 0px;
    opacity: 0;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.tcbox {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    display: table;
    z-index: 999;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    visibility: hidden;
    opacity: 0;
}

.tcbox.hover {
    visibility: visible;
    opacity: 1;
}

.tan {
    display: table-cell;
    vertical-align: middle;
}

.sidebar_box li:hover .code_pop {
    visibility: visible;
    opacity: 1;
    right: 80px;
}

.tcbox .tan>div {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    margin: 0 auto;
    position: relative;
    top: -50px;
}

.tcbox.hover .tan>div {
    top: 0;
}

.code_pop dl {
    width: 190px;
    margin: 28px 0 0 42px;
}

.code_pop dl dt {
    overflow: hidden;
    display: block;
    text-align: center;
    height: 16px;
    line-height: 16px;
    margin-bottom: 5px;
    color: #666666;
    font-size: 14px;
}

.code_pop dl dd {
    overflow: hidden;
    width: 190px;
    height: 190px;
    margin: 0 auto;
}

.code_pop dl dd>img {
    overflow: hidden;
    width: 190px;
    height: 190px;
}

.make_success {
    background: #fff;
    width: 420px;
    height: 400px;
    position: absolute;
    text-align: center;
    /* left: 50%;
    top: 50%;
    margin: -200px 0 0 -210px; */
    border-radius: 12px;
}

.make_success img {
    overflow: hidden;
    width: 182px;
    height: 133px;
    margin: 42px auto 0 auto;
}

.make_success h3 {
    overflow: hidden;
    height: 26px;
    line-height: 26px;
    margin: 36px 30px 16px 30px;
    font-size: 20px;
    font-weight: bold;
}

.make_success p {
    overflow: hidden;
    height: 20px;
    line-height: 20px;
    margin: 0 30px;
    color: #666666;
}

.make_success a {
    display: block;
    width: 166px;
    height: 46px;
    line-height: 46px;
    margin: 35px auto 0 auto;
    color: #007bff;
    border: 1px solid #007bff;
    border-radius: 12px;
}

.q_make {
    overflow: hidden;
    width: 760px;
    height: 424px;
    background: #fff url(../images/make.jpg) no-repeat right bottom;
    padding-left: 40px;
    border-radius: 12px;
}

.q_close {
    height: 14px;
    margin: 23px 25px 10px 25px;
}

.q_close>a {
    display: block;
    width: 14px;
    height: 14px;
    float: right;
    background: url(../images/x02.png) no-repeat;
}

.make_p {
    height: 38px;
    line-height: 38px;
    font-size: 18px;
    font-weight: bold;
}

.make_p .make_h2 {
    font-size: 32px;
    display: inline-block;
}

.make_p .make_h4 {
    display: inline-block;
}

.make_p>h4>span {
    color: #ff5f00;
}

/* 设计师头部信息 */

.designer-header-section {
    background-color: white;
    border-radius: 10px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.designer-header-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}

.designer-avatar-large {
    width: 280px;
    height: 330px;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 40px;
    border: 8px solid white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.designer-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.designer-basic-info {
    flex: 1;
}

.designer-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.designer-title {
    font-size: 1rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.designer-level-badge {
    display: inline-block;
    background-color: var(--secondary-color);
    color: white;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.designer-info p {
    display: block;
    margin-bottom: 5px;
}

.designer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.designer-tag {
    display: inline-block;
    padding: 5px 15px;
    background-color: #f0f7ff;
    color: var(--primary-color);
    border-radius: 20px;
    font-size: 0.9rem;
    border: 1px solid #d1e3ff;
}

.designer-quote {
    color: var(--light-text);
    border-left: 4px solid var(--secondary-color);
    padding-left: 15px;
    margin-top: 15px;
    font-size: 1.1rem;
}

/* 设计师统计信息 */

.designer-stats-section {
    margin-bottom: 40px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stat-card {
    background-color: white;
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--light-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--primary-color);
    font-size: 1.5rem;
}

.stat-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-color);
    display: block;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.95rem;
    color: var(--light-text);
}

/* 内容区域 */

.content-section {
    background-color: white;
    border-radius: 10px;
    padding: 40px 0;
    margin-bottom: 40px;
}

.section-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #000;
    text-align: center;
}

.designer-bio p {
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 1.05rem;
}

.experience-timeline {
    position: relative;
    padding-left: 30px;
    margin-top: 30px;
}

.experience-timeline:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: var(--primary-color);
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
    padding-left: 20px;
}

.timeline-item:before {
    content: "";
    position: absolute;
    left: -8px;
    top: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--secondary-color);
}

.timeline-year {
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.timeline-content {
    color: var(--light-text);
}

/* 擅长领域 */

.specialties-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.specialty-item {
    background-color: var(--light-bg);
    border-radius: 8px;
    padding: 20px;
    border-left: 4px solid var(--primary-color);
}

.specialty-title {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.specialty-desc {
    color: var(--light-text);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* 案例展示 */

.cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 20px;
}

.case-item {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s;
    background-color: white;
}

.case-item:hover {
    transform: translateY(-8px);
}

.case-image {
    height: 200px;
    overflow: hidden;
}

.case-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.case-item:hover .case-image img {
    transform: scale(1.05);
}

.case-info {
    padding: 20px;
}

.case-name {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.case-meta {
    font-size: 0.9rem;
    color: var(--light-text);
    margin-bottom: 10px;
}

.case-price {
    color: #e63946;
    font-weight: 600;
}

/* 联系区域 */

.contact-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, #3a7cda 100%);
    border-radius: 10px;
    padding: 40px;
    color: white;
    margin-bottom: 40px;
}

.contact-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: center;
}

.contact-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.contact-option {
    text-align: center;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: background-color 0.3s;
}

.contact-option:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.contact-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.contact-method {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.contact-detail {
    font-size: 0.95rem;
    opacity: 0.9;
}

.contact-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.btn-light {
    background-color: white;
    color: var(--primary-color);
    border-color: white;
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 30px;
    transition: all 0.3s;
}

.btn-light:hover {
    background-color: #f8f9fa;
    transform: translateY(-3px);
}

.btn-outline-light {
    color: white;
    border-color: white;
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 30px;
    transition: all 0.3s;
}

.btn-outline-light:hover {
    background-color: white;
    color: var(--primary-color);
    transform: translateY(-3px);
}

/* 响应式调整 */

@media (max-width: 992px) {
    .designer-header-content {
        flex-direction: column;
        text-align: center;
    }
    .designer-avatar-large {
        margin-right: 0;
        margin-bottom: 30px;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .specialties-grid {
        grid-template-columns: 1fr;
    }
    .cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .contact-options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .banner h1 {
        font-size: 2.2rem;
    }
    .designer-name {
        font-size: 2rem;
    }
    .cases-grid {
        grid-template-columns: 1fr;
    }
    .contact-buttons {
        flex-direction: column;
        align-items: center;
    }
}

.sidebar-menu {
    position: sticky;
    top:100px;
}

.sidebar-menu li a {
    height: 50px;
    display: flex;
    position: relative;
    font-size: 16px;
    align-items: center;
    padding-left: 10px;
    background-color: #f5f5f5;
    margin-bottom: 3px;
    border-radius: 5px;
    transition: 0.25s;
}

.sidebar-menu li a::before {
    content: "";
    background-color: #007bff;
    width: 40px;
    height: 3px;
    display: inline-block;
    margin-right: 10px;
}

.sidebar-menu li:hover a::before,
.sidebar-menu li.on a::before {
    background-color: #fff;
    width: 45px;
}

.sidebar-menu li:hover a,
.sidebar-menu li.on a {
    font-weight: 600;
    color: #fff;
    background: linear-gradient(to bottom, #21a5e7, #007bff);
}

article img {
    display: block;
    margin: 5px auto !important;
    max-width: 100% !important;
}

.post h1 {
    font-size: 30px;
    font-weight: 600;
}

.card-list .pic {
    height: 220px;
    overflow: hidden;
}

.card-list .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*分页 begin*/

.pagination li {
    margin: 0 5px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
}

.pagination li a {
    border-radius: 4px;
    color: #6e6e6e;
    background: #fff;
    padding: 12px 16px;
    border: 1px solid #dcdcdc;
}

/* .pagination li i {font-weight:bold;font-size:18px;padding:0 3px} */

.pagination li.active a,
.pagination li a:hover {
    background: #ff9600;
    color: #fff;
    border: 1px solid #ff9600;
}

/*分页 end*/

.content_fixed {
    width: 100%;
    background: #215ed7d9;
    color: white;
    text-align: center;
    padding: 1.2rem;
    font-size: 1.2rem;
    font-weight: 500;
    height: 110px;
    user-select: none;
    -webkit-user-drag: none;
    /* 3. 开启硬件加速，让元素在独立图层渲染，避免重绘抖动 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* 默认状态：relative，跟随文档流 */
    position: relative;
    left: 0;
    bottom: 0;
    /* relative下bottom不生效，但保留无妨 */
    z-index: 10000;
    overscroll-behavior: contain;
    /* 过渡效果让变化平滑 */
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    /* 确保不被遮挡 */
}

.content_fixed-placeholder {
    display: none;
    width: 100%;
}

.content_fixed i {
    font-size: 24px;
}

.fixed_form {
    margin: 10px 0 0 0;
}

.fixed_form .fixed_input {
    display: block;
    font-size: 14px;
    overflow: hidden;
    width: 250px;
    height: 56px;
    line-height: 56px;
    padding: 0 15px;
    border-radius: 5px;
    margin-right: 8px;
    float: left;
    border: none;
}

.fixed_h2 {
    font-size: 22px;
    font-weight: bold;
    height: 26px;
    line-height: 26px;
    margin: 10px 0 12px 0;
}

.fixed_p {
    font-size: 18px;
    height: 22px;
    line-height: 22px;
}

.fixed_sub {
    width: 168px;
    height: 56px;
    line-height: 56px;
    background: #ff6a00;
    border-radius: 3px;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    float: left;
    border: none;
}

.fixed_box {
    margin: 0 auto;
    position: relative;
}

.fixed_l {
    color: #fff;
}

.fixed_x {
    display: block;
    overflow: hidden;
    width: 36px;
    height: 36px;
    margin: 0;
    color: #fff;
    border-radius: 50%;
    margin-top: 10px;
    margin-left: 10px;
}

@media (max-width:640px) {
    .content_fixed {
        display: none !important;
    }
}

/* 关闭按钮样式 */

.content_fixed .close-fixed-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(0, 0, 0, 0.2);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

.content_fixed .close-fixed-btn:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* 隐藏状态 */

.content_fixed-placeholder.hidden {
    display: none !important;
}

/* 固定定位样式（保留原有逻辑） */

.content_fixed.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

/* 占位符样式（防止布局塌陷） */

/* 隐藏状态 */

.content_fixed.hidden {
    display: none;
}

.content_fixed-placeholder.hidden {
    display: none
}

/*banner*/

.banner .owl-theme {
    display: none;
    position: relative;
    width: 100%;
    -ms-touch-action: pan-y;
}

.banner .owl-theme .item {
    background-repeat: no-repeat !important;
    background-size: auto 100% !important;
    background-position: center top !important;
}

.banner .owl-theme .item img {
    padding: 0 15px;
}

/*prev-next*/

.banner .owl-next,
.banner .owl-prev {
    text-indent: -9999px;
    background: url(../images/slider-arrow.png) 0 0 no-repeat;
    overflow: hidden;
    width: 42px;
    height: 84px;
    margin: 0 10px;
    position: absolute;
    left: 3%;
    top: 50%;
    margin-top: -42px;
    display: block;
    filter: alpha(opacity=10);
    opacity: 0.1;
}

.banner .owl-next {
    left: auto;
    right: 3%;
    background-position: -42px 0;
}

.banner .owl-next:hover,
.banner .owl-prev:hover {
    filter: alpha(opacity=70);
    opacity: 0.7;
}

/*page*/

.banner .owl-controls .owl-pagination {
    width: 100%;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    height: 60px;
    text-align: center;
}

.banner .owl-controls .owl-pagination .owl-page {
    display: inline-block;
}

.banner .owl-controls .owl-pagination .owl-page span {
    text-indent: -9999px;
    cursor: pointer;
    display: inline-block;
    zoom: 1;
    width: 10px;
    height: 10px;
    margin: 0 6px;
    overflow: hidden;
    background-color: hsla(0, 0%, 100%, 0.5);
    border-radius: 100%;
}

@media (max-width: 767px) {
    .banner .owl-controls .owl-pagination {
        height: 50px;
    }
}

.banner .owl-controls .owl-page.active span,
.banner .owl-controls.clickable .owl-page:hover span {
    background-color: hsla(0, 0%, 100%, 0);
    border: 1px solid #fff;
}

/*mobile*/

@media (max-width: 767px) {
    .banner .owl-next,
    .banner .owl-prev {
        width: 23px;
        height: 40px;
        margin-top: -20px;
        background-size: auto 40px;
    }
    .banner .owl-next {
        background-position: -23px 0;
    }
    .banner .owl-theme .item img {
        padding: 0;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .banner .owl-theme .item {
        height: 354px;
    }
    .banner-mask {
        margin-top: 25px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .banner .owl-theme .item {
        height: 464px;
    }
    .banner-mask {
        margin-top: 15px;
    }
}

.swiper-wrapper {
    z-index: 0 !important;
}

.swiper-container.banner-home {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.banner-home .swiper-slide {
    width: 100% !important;
    height: 100% !important;
}

.banner-home .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-home .slide-inner {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-size: cover;
    background-position: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    color: #fff;
}

.swiper-pagination-bullet {
    width: 12px;
    height: 6px;
    border: 1px solid #333;
    background-color: #333;
    transition: .35s;
    border-radius: 5px;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    border: 1px solid #007aff;
    background-color: #007aff;
    width: 24px;
}

.index_about {
    padding: 70px 0;
}

.t1 {
    padding-bottom: 8px;
    margin-bottom: 15px;
    position: relative;
}

.t1 .h1 {
    font-size: 30px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

@media(max-width:992px) {
    .index_about .t1 .h2 {
        font-size: 36px;
        left: 90px;
        top: -20px;
    }
}

.index-about-body p {
    margin-bottom: 1em;
}

.masterMore ._icon {
    width: 40px;
    height: 40px;
    position: relative;
    text-align: center;
    line-height: 40px;
    font-size: 28px;
    transition: color .3s ease-in-out;
    z-index: 2;
    color: #026ed1;
}

.masterMore ._icon:before,
.masterMore ._icon:after {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 3px;
    transform: rotate(45deg);
    transition: background-color .3s ease-in-out;
}

.masterMore ._icon:before,
.masterMoreHover:hover .masterMore.style1 ._icon:before {
    left: 0;
    z-index: -1;
}

.masterMore.style1 ._icon:before {
    background-color: #fff;
    border: 1px solid #026ed1;
}

.masterMoreHover:hover .masterMore.style1 ._icon:before {
    background-color: #026ed1;
}

.masterMore ._icon:after {
    left: 15px;
    z-index: -2;
    opacity: .1;
}

.masterMore.style1 ._icon:after {
    background-color: #fff;
    border: 1px solid #03abad;
}

.masterMoreHover:hover .masterMore.style1 ._icon:after {
    background-color: #03abad;
}

.masterMore ._name {
    margin-left: 25px;
    transition: color .25s ease;
}

.f-18 {
    font-size: 18px;
}

.masterMoreHover:hover .masterMore ._icon {
    color: #fff;
}

.icon_list {
    background: url(/images/bg_icon_list.jpg) no-repeat;
    background-size: cover;
}

.icon_list .iconbox {
    background-color: #FFF;
    border-radius: 10px;
    text-align: center;
    padding: 3rem 0;
    box-shadow: 0 0 15px #CCC, inset 0 -30px 26px rgba(225, 236, 249, 0.3);
    margin-bottom: 2rem;
}

.icon_list .iconbox img {
    width: 60px;
}

.moshi {
    position: relative;
}

/* 手风琴容器：横向布局（标题+图片），固定宽高，溢出隐藏 */

.accordion-container {
    width: 100%;
    height: 500px;
    margin: 50px auto;
    display: flex;
    /* 横向布局：左侧标题（3列） + 右侧图片 */
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 标题列表：横向布局（3列并排，每列70px），高度与图片一致，黑色半透明背景 */

.accordion-titles {
    display: flex;
    /* 横向布局实现3列并排，关键！ */
    height: 100%;
    /* 高度与容器/图片一致 */
    background: rgba(0, 0, 0, 0.7);
    /* 黑色半透明背景（0.7为透明度，可调整） */
    z-index: 10;
    padding: 0;
}

/* 单个标题：每列宽度70px，高度100%（与图片一致），纵向排列文字，带右侧1px白线分隔 */

.accordion-title {
    width: 70px;
    /* 固定每列宽度70px，满足需求 */
    height: 100%;
    /* 高度与图片/容器一致，关键！ */
    color: #fff;
    font-size: 18px;
    letter-spacing: .75em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 0;
    /* 取消圆角，适配整列展示 */
    /* 核心：实现文字纵向排列（从上到下、从右到左，文字正向） */
    writing-mode: vertical-rl;
    /* 纵向书写，从右往左排列 */
    padding: 30px 0;
    /* 纵向内边距，优化文字间距 */
    /* 实现每列之间1px白线：给除了最后一列的标题加右侧边框 */
    border-right: 1px solid #ffffff;
    /* 关键修复：单个标题背景设为透明，继承父容器的半透明背景 */
    background: transparent;
    display: flex;
    align-items: center;
}

/* 移除最后一个标题的右侧边框，避免最右侧多出白线 */

.accordion-title:last-child {
    border-right: none;
}

.accordion-title:hover {
    /* 关键修复：悬停背景也设为半透明，不覆盖整体黑色半透明，保留层次感 */
    background: rgba(255, 255, 255, 0.2);
    /* 白色半透明高亮，叠加在黑色半透明上 */
}

/* 图片容器：flex占满剩余宽度，高度100%，溢出隐藏（实现非激活项隐藏） */

.accordion-images {
    flex: 1;
    /* 占满容器剩余宽度 */
    height: 100%;
    display: flex;
    overflow: hidden;
    /* 隐藏非激活的图片 */
}

/* 单个图片项：默认收缩为0（完全隐藏），过渡0.5s缓冲，溢出隐藏 */

.accordion-item {
    flex: 0;
    /* 默认收缩隐藏 */
    width: 100%;
    /* 激活后占满图片容器宽度 */
    height: 100%;
    transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    /* 防止多个图片挤在一起，激活项独占宽度 */
}

/* 激活项：展开为1（占满整个图片容器宽度），其余保持0隐藏 */

.accordion-item.active {
    flex: 1;
    /* 展开占满右侧所有宽度 */
}

/* 图片：覆盖容器，保持比例，居中裁剪 */

.accordion-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.accordion-item.active .accordion-img {
    transform: scale(1.05);
    /* 激活图片轻微放大，增强视觉 */
}

/* 响应式：移动端适配宽高和标题字体 */

@media (max-width: 768px) {
    .accordion-container {
        height: 300px;
    }
    .accordion-title {
        width: 50px;
        /* 移动端适配每列宽度 */
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .accordion-container {
        height: 200px;
    }
    .accordion-title {
        width: 40px;
        /* 移动端适配每列宽度 */
        font-size: 11px;
    }
}

/***********************/

.process-section {
    padding: 80px 0;
    background: url('/images/shlc_bg.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    /* 可选：背景固定效果 */
}

.process-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 3. 3列图标板块 */

.iconbox-section {
    padding: 80px 0;
    background: #fff;
}

.iconbox-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    justify-content: center;
}

.iconbox-item:hover {
    background: #f8f9fa;
    transform: translateY(-5px);
}

.iconbox-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.iconbox-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.iconbox-item svg {
    width: 60px;
    height: 60px;
}

/* 4. 客服照片轮播板块 */

.service-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.service-section .swiper {
    width: 100%;
    height: auto;
    padding: 20px 0;
}

.service-section .swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-section .swiper-slide img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 响应式适配 */

@media (max-width: 768px) {
    .process-section,
    .iconbox-section,
    .service-section {
        padding: 40px 0;
    }
    .iconbox-item {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .service-section .swiper-slide img {
        height: 200px;
    }
}

.specialty-tag {
    height: 68px;
    overflow: hidden;
    display: block;
}

.button {
    background-color: #007aff;
    color: #FFF;
    padding: 8px 20px;
}

.show_list_pop a.imga {
    position: relative;
    padding-bottom: 100%;
    display: block;
}

.show_list_pop a.imga img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    display: block;
}

.show_con {
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    -o-transition: all 0.3s;
    position: relative;
    z-index: 5;
    padding: 25px;
    margin-top: 0;
    background: #FFF
}

.show_list_pop:hover .show_con {
    border: 1px solid #007aff;
    background: #007aff;
    border-radius: 0 0 5px 5px;
}

.show_con .show_tit {
    display: block;
    font-size: 18px;
    line-height: 20px;
    overflow: hidden;
    color: #333;
    font-weight: 600;
}

.show_con .show_p {
    font-size: 18px;
    line-height: 1.8;
    overflow: hidden;
    font-size: 14px;
    color: #666666;
    margin-top: 12px;
}

.show_con svg {
    position: absolute;
    bottom: 30px;
    right: 15px;
    width: 40px;
    height: auto;
    fill: #ccc;
}

.show_con:hover svg {
    fill: #fff;
}

.show_list_pop:hover .show_tit,
.show_list_pop:hover .show_p {
    color: #FFF;
}

.show_sub {
    height: 52px;
    line-height: 52px;
}

.show_nav {
    overflow-x: auto;
    /* 横向溢出时显示滚动条 */
    overflow-y: hidden;
    /* 禁止纵向滚动，避免干扰 */
    -webkit-overflow-scrolling: touch;
    /* 开启iOS原生弹性滚动，提升滑动体验 */
    scrollbar-width: none;
    /* 隐藏Firefox滚动条 */
    white-space: nowrap;
    /* 确保子元素不换行（关键！） */
}

/* 隐藏Chrome/Safari等webkit内核浏览器的滚动条（可选，优化视觉） */

.show_nav::-webkit-scrollbar {
    display: none;
}

.show_content {
    background-color: #e5e5e5;
    padding: 2rem 0;
}

/* 适配移动端的媒体查询（关键！） */

@media (max-width: 768px) {
    .show_nav {
        width: 100%;
        /* 移动端容器宽度铺满屏幕 */
        max-width: 100vw;
        /* 限制最大宽度为屏幕宽度 */
        padding: 0 10px;
        /* 可选：增加左右内边距，避免内容贴边 */
    }
    /* 重要：确保.show_nav的子元素横向排列，不换行 */
    .show_nav>* {
        display: inline-block;
        /* 子元素行内块显示，横向排列 */
        /* 如果子元素是flex布局，也可以用：
        display: flex;
        flex-shrink: 0; // 禁止子元素收缩，保证宽度完整
        */
    }
}

.show_nav>a,
.show_trim>a {
    display: inline-block;
    color: #666666;
    padding: 0 15px;
    position: relative;
}

.show_nav>a.active,
.show_trim>a.active {
    display: inline-block;
    color: #007aff;
}

.show_nav>a:after,
.show_nav>a.active:after,
.show_trim>a:after,
.show_trim>a.active:after {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 2px;
    width: 0;
    background-color: #007aff;
}

.show_nav>a:hover:after,
.show_nav>a.active:after,
.show_trim>a:hover:after,
.show_trim>a.active:after {
    right: auto;
    left: 0;
    width: 100%;
}

/***首页设计师***/

.index_team {
    background: url(/images/team-bj.jpg) no-repeat;
    background-size: cover;
    background-position: right bottom;
}

.index_team .section-title,
.index_team .sub-title {
    color: #FFF;
}

.card-swiper-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 0;
}

/* Swiper wrapper 样式重置 */

.card-swiper .swiper-wrapper {
    padding-bottom: 20px;
}

/* Swiper slide 样式 */

/* 响应式适配 */

@media (max-width: 1200px) {
    .card-swiper .swiper-slide {
        width: calc(100% / 4 - 15px) !important;
    }
}

@media (max-width: 768px) {
    .card-swiper .swiper-slide {
        width: calc(100% / 2 - 10px) !important;
    }
}

/* 卡片样式（保留原有悬停效果） */

.card-swiper-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    height: 100%;
}

.card-swiper-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card-swiper-content {
    position: absolute;
    left: 0;
    bottom: -57px;
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    transition: all 0.5s ease;
    z-index: 1;
}

.card-swiper-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    transition: transform 0.5s ease;
}

.card-swiper-desc {
    font-size: 14px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease 0.1s;
    max-height: 0;
}

.card-swiper-card button {
    background-color: #007aff;
    border-radius: 20px;
    color: #fff;
    padding: 5px 20px;
    border: none;
    opacity: 0;
    transition: transform 0.5s ease;
}

/* 悬停效果 */

.card-swiper-card:hover .card-swiper-content {
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-swiper-card:hover .card-swiper-title {
    transform: translateY(-20px);
}

.card-swiper-card:hover .card-swiper-desc,
.card-swiper-card:hover button {
    opacity: 1;
    transform: translateY(0);
    max-height: 200px;
}

.card-swiper-card:hover button {
    opacity: 1;
    transform: translateY(20px);
}

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

/* Swiper分页器样式（单独定义） */

.card-swiper .swiper-pagination-bullet {
    background: #666;
    opacity: 0.6;
}

.card-swiper .swiper-pagination-bullet-active {
    background: #000;
    opacity: 1;
}

/* Swiper导航按钮样式（单独定义） */

.card-swiper .swiper-button-prev,
.card-swiper .swiper-button-next {
    color: #333;
    width: 40px;
    height: 70px;
    background: rgba(0, 0, 0, .5);
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-swiper .swiper-button-prev::after,
.card-swiper .swiper-button-next::after {
    font-size: 16px;
}

.btn-center {
    background-image: linear-gradient(to bottom, #0D99FF, #3454FD), linear-gradient(91deg, #3454FD, #0D99FF);
    color: #FFF;
    font-size: 18px;
    border-radius: .35714rem;
    background-clip: padding-box, border-box;
    box-shadow: 0 .14286rem .28571rem #1616161a;
    width: 12.57143rem;
    height: 3.21429rem;
    margin: 1rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .35s;
}

.btn-center:hover {
    background-image: linear-gradient(to bottom, #3454FD, #0D99FF), linear-gradient(91deg, #0D99FF, #3454FD);
    color: #FFF;
}

/* 首页展厅 */

.image-section {
    margin: 0 auto;
    min-height: 450px;
    /* 基础高度，保证布局稳定 */
    gap: 15px !important;
    /* 全局15px间距，覆盖Bootstrap */
    /* 关键：Grid布局 - 桌面端2列2行 */
    display: grid !important;
    /* 强制覆盖Bootstrap的d-flex */
    grid-template-columns: 1fr 1fr;
    /* 2列均分宽度 */
    grid-template-rows: 1fr 1fr;
    /* 2行均分高度 */
}

/* 左侧竖图容器：跨2行 */

.vertical-img-wrap {
    grid-row: span 2;
    /* 核心属性：跨2行 */
    width: 100% !important;
    /* 覆盖Bootstrap的w-50 */
    height: 100%;
    display: flex;
}

/* 右侧图片容器：占右列2行，垂直排列 */

.img-container {
    grid-column: 2;
    /* 固定在第二列 */
    grid-row: 1 / 3;
    /* 占满第二列的2行 */
    width: 100% !important;
    /* 覆盖Bootstrap的w-50 */
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* 右侧两张图的垂直间距 */
}

/* 右侧单张图容器：均分高度 */

.horizontal-img-wrap {
    flex: 1;
    display: flex;
    max-height: 220px;
}

/* 所有图片：强制撑满容器，防止变形 */

.img-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 保持比例，裁剪超出部分 */
    border-radius: 4px;
}

/* 移动端布局（767px及以下） */

@media (max-width: 767px) {
    .image-section {
        /* 移动端改回Grid单行单列 + 自动换行 */
        grid-template-columns: 1fr;
        /* 1列 */
        grid-template-rows: auto auto;
        /* 高度自适应 */
    }
    /* 左侧图：单独一行 */
    .vertical-img-wrap {
        grid-row: span 1 !important;
        /* 取消跨行 */
        min-height: 200px;
        /* 移动端基础高度 */
        margin-bottom: 0;
        /* 用Grid的gap控制间距 */
    }
    /* 右侧容器：单独一行，水平排列 */
    .img-container {
        grid-column: 1 !important;
        /* 回到第一列 */
        grid-row: 2 !important;
        /* 第二行 */
        flex-direction: row !important;
        /* 水平排列 */
        min-height: 200px;
        /* 移动端基础高度 */
    }
}

.footer {
    border-top: 1px solid #ccc;
}

.footer-col {
    background-color: #f1f1f1;
}

.footer-col .container {
    max-width: 1320px;
}

.footer-col * {
    color: #333;
    font-size: 14px;
}

.footer-col li {
    padding: 5px 0;
}

.footer-col li a {
    display: block;
}

.footer-col h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 7px;
}

/*******************/

/* 设计师列表样式 */

.designer-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.designer-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s;
    background: white;
}

.designer-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.designer-info {
    padding: 20px;
    text-align: center;
}

.designer-info img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
}

.designer-info h3 {
    margin: 10px 0 5px;
    color: #333;
}

.designer-info p {
    color: #666;
    font-size: 14px;
}

.appointment-btn {
    padding: 12px;
    background: #4CAF50;
    color: white;
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.appointment-btn:hover {
    background: var(--primary-color)
}

/* 模态弹窗遮罩 */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 模态内容 */

.modal-content {
    background: white;
    width: 90%;
    max-width: 500px;
    border-radius: 12px;
    position: relative;
    animation: slideIn 0.3s;
    max-height: 90vh;
    overflow-y: auto;
}

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

/* 关闭按钮 */

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
}

.modal-close:hover {
    color: #333;
}

.modal-content-box {
    background-color: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    padding: 25px;
    position: relative;
    animation: modalFadeIn 0.3s ease;
}

/* 模态头部 */

.modal-content-box .modal-header {
    padding: 25px 30px 15px;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.modal-content-box .modal-header h2 {
    margin: 0 0 10px;
    color: #333;
    font-size: 24px;
}

.modal-content-box .designer-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

/* 模态内容 */

.modal-content-box .modal-body {
    padding: 30px;
}

/* 表单样式 */

.modal-content-box .form-group {
    margin-bottom: 20px;
}

.modal-content-box .form-label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 500;
    font-size: 14px;
}

.modal-content-box .form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.modal-content-box .form-control:focus {
    outline: none;
    border-color: #4CAF50;
}

.modal-content-box textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

/* 提交按钮 */

.modal-content-box .submit-btn {
    width: 100%;
    padding: 14px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.modal-content-box .submit-btn:hover {
    background: #45a049;
    transform: translateY(-1px);
}

.modal-content-box .submit-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* 响应式设计 */

@media (max-width: 768px) {
    .designer-list {
        grid-template-columns: 1fr;
    }
    .modal-content {
        width: 95%;
        max-height: 85vh;
    }
    .modal-header,
    .modal-body {
        padding: 20px;
    }
}

.yyzt {
    background-color: #1455d3;
    border-top: 10px solid #ff6a00;
    padding: 2.25rem 2rem;
    color: #FFF;
}

.yyzt h3 {
    color: #FFF;
    border-bottom: 1px solid #7b9ee5;
    line-height: 2;
    background: url(/images/icon_yuyue.png) no-repeat right;background-size: 40px 40px;: ;
}

.yyzt form button[type=submit] {
    background-color: #ff6a00;
}

.yyzt form .form-control {
    background: transparent !important;
    color: #FFF;
}

.yyzt form input::placeholder {
    color: #eee;
    opacity: 1;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3列等宽 */
    grid-template-rows: repeat(2, 200px);
    /* 2行固定高度，可依内容调整，但保证正方形感 */
    gap: 0;
    /* 网格间隙，增加透气感 */
    width: min(100%, 750px);
    border-radius: 2rem;
}

/* 所有网格单元的通用样式 */

.grid-item {
    background-color: rgba(20, 30, 40, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* 半透明描边，增加精致感 */
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 防止内容溢出，同时保留内边距 */
    padding: 0.5rem;
    text-decoration: none;
    /* 移除可能的链接装饰 */
    color: white;
    font-weight: 500;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* 单独指定第1、3、4、6块的四个圆角 */

/* 第1块 (grid area 第一行第一列) — 左上圆角 */

.item-1 {
    border-top-left-radius: 40px;
    /* 其余三个角保持默认0或后续可覆盖，不过为了保险设为0 */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

/* 第3块 (第一行第三列) — 右上圆角 */

.item-3 {
    border-top-left-radius: 0;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

/* 第4块 (第二行第一列) — 左下圆角 */

.item-4 {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 40px;
}

/* 第6块 (第二行第三列) — 右下圆角 */

.item-6 {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 0;
}

/* 确保剩余两块(第2、第5)没有圆角 (完全直角) */

.item-2,
.item-5 {
    border-radius: 0;
}

/* 鼠标悬停在任意网格块上 → 背景呈现橙色 (保持半透明效果) */

.grid-item:hover {
    background-color: rgba(255, 165, 0, 0.75);
    /* 橙色半透明，鲜艳但不遮挡背景 */
    transition: background-color 0.2s ease, transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.grid-item {
    background-image: none;
}

.grid-item:hover,.grid-item:first-child {
    background-color: #914ddb;
    transition: background-color 0.25s;
}

/* 小屏适配：行高改为auto，仍保持比例 */

@media (max-width: 550px) {
    .grid {
        grid-template-rows: repeat(2, 160px);
    }
}

.grid-item {
    position: relative;
    /* 为了伪元素绝对定位 */
}

.qczy {
   background: radial-gradient(circle at top left, #0633c5, #094cd3);
    padding: 120px 0;
    height: 780px;
    position: relative;
    background-size: cover;
}
.qczy .container{max-width:90%;}

.qczy .list2 {
    color: #FFF;
    font-size: 15px;
    line-height: 1.8;
    margin: 0 auto;
}

.qccox {
    border-radius: 30px;
    border: 3px solid #ff6a00;
    text-align: center;
    color: #FFF;
    font-size: 1.25rem;
    padding: .25rem 0;
}

.qccox span {
    font-size: 1.55rem;
    color: #ff6a00;
    font-weight: 700;
}

.qccox:hover{
    background-color: #ff6a00
}

.qccox:hover span {
    color: #FFF;
}

.qczy-mobi {
    display: none;
}

.ewm {
    text-align: center;
}

@media (max-width: 640px) {
    .qczy,
    .footer-col .row {
        display: none;
    }
    .qczy-mobi {
        display: block;
        padding: 20px 0;
        height: auto !important;
       background: radial-gradient(circle at top left, #0633c5, #094cd3);
        background-size: 90%;
        background-position-y: 540px;
    }
    .qczy-mobi .col-4 {
        padding: 3px;
    }
    .qccox {
        font-size: 1rem;
    }
    .qccox span {
        font-size: 1.25rem;
    }
    .ewm {
        text-align: left;
    }
}

.zpmenu {
    margin-top: 20px;
    width: 1430px;
    display: block;
    height: 358px;
    overflow: hidden;
    margin: 0 auto
}

.zpmenu dl {
    width: 1430px;
    float: left;
    height: 360px;
    _width: 962px;
    display: flex;
}

.zpmenu dt {
    flex: 1;
    text-align: center;
    height: 100%;
    background: #e4e4e4;
    padding-top: 3rem;
    cursor: pointer;
    position: relative;
    transition: flex 0.5s ease;
    /* 平滑过渡 */
    overflow: hidden;
}

#slider2 dt:nth-child(4n+1) {
    background: #cacaca;
}

.zpmenu dt .sheji-icon {
    width: 64px;
    display: block;
    cursor: pointer;
    height: 60px;
    margin: 0 auto 30px;
}

.zpmenu dt .sheji-icon.core1 {
    background: url(/images/core6-1.png) no-repeat;
}

.zpmenu dt .sheji-icon.core2 {
    background: url(/images/core6-2.png) no-repeat;
}

.zpmenu dt .sheji-icon.core3 {
    background: url(/images/core6-3.png) no-repeat;
}

.zpmenu dt .sheji-icon.core4 {
    background: url(/images/core6-4.png) no-repeat;
}

.zpmenu dt .sheji-icon.core5 {
    background: url(/images/core6-5.png) no-repeat;
}

.zpmenu dt .sheji-icon.core6 {
    background: url(/images/core6-6.png) no-repeat;
}

.zpmenu dt.open .sheji-icon.core1,
.zpmenu dt .sheji-icon.core1:hover {
    background: url(/images/core6-1-hover.png) no-repeat;
}

.zpmenu dt .sheji-icon.core2:hover {
    background: url(/images/core6-2-hover.png) no-repeat;
}

.zpmenu dt .sheji-icon.core3:hover {
    background: url(/images/core6-3-hover.png) no-repeat;
}

.zpmenu dt .sheji-icon.core4:hover {
    background: url(/images/core6-4-hover.png) no-repeat;
}

.zpmenu dt .sheji-icon.core5:hover {
    background: url(/images/core6-5-hover.png) no-repeat;
}

.zpmenu dt .sheji-icon.core6:hover {
    background: url(/images/core6-6-hover.png) no-repeat;
}

.zpmenu dd {
    position: relative;
    width: 530px;
    display: block;
    float: left;
    height: 360px;
    overflow: hidden
}

.text-sheji {
    font-size: 24px;
    color: #424242;
    font-weight: 500;
}

.text-sheji_2 {
    font-size: 11px;
    color: #808080;
    font-weight: 300;
    text-transform: uppercase;
}

.open-sheji-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

#slider2 {
    display: flex;
    height: 100%;
    width: 100%;
}

#slider2 .num {
    width: 60px;
    height: 60px;
    border: 1px solid #ccc;
    border-radius: 50%;
    font-weight: 200;
    font-size: 24px;
    display: block;
    margin: 30px auto;
    line-height: 60px;
    color: #666;
}

.zpinfor {
    position: relative;
}

/* 展开状态的dt */

#slider2 dt.open,
#slider2 dt:hover,
#slider2 dd:hover+dt.open,
#slider2 dd:hover~dt.open,
#slider2 dt.open:hover {
    background: #094cd3 !important;
    color: #fff !important;
    position: relative;
}

#slider2 dt.open .num,
#slider2 dt:hover .num {
    color: #FFF !important;
}

/* dd默认隐藏，展开时显示 */

#slider2 dd {
    flex: 0; 
    transition: flex 0.5s ease;
    overflow: hidden;
}

/* dd展开样式 */

#slider2 dd.open {
    flex: 3;
    /* dd展开宽度 */
}

#slider2 .open .text-sheji {
    color: #fff !important;
}

#slider2 .open .text-sheji_2 {
    color: #fff !important;
}

/* 新增：dd悬停样式 */

#slider2 dd:hover {
    flex: 3;
}

@media (max-width:640px) {
    /* 容器适配移动端宽度 */
    .zpmenu {
        width: 100% !important;
        height: 930px;
        overflow: visible !important;
        margin: 0 !important;
        padding: 10px;
    }
    /* 核心布局：每组dt+dd为一行（纵向排列行组） */
    #slider2 {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        gap: 0px;
        flex-wrap: wrap;
    }
    /* 修复DT/DD的兄弟结构：通过伪容器实现一行布局（关键） */
    #slider2 dt {
        width: 30% !important;
        /* DT固定宽度（可根据需求调整） */
        flex: none !important;
        /* 禁止宽度伸缩 */
        height: 150px !important;
        /* 固定高度，保持原有比例 */
        padding: 1rem 0 !important;
        background: #094cd3 !important;
        /* 默认蓝色背景 */
        color: #fff !important;
        /* 白色文字 */
        margin: 0 0 5px;
        transition: none !important;
        cursor: default !important;
    }
    /* 覆盖原有4n+1的背景色，统一蓝色 */
    #slider2 dt:nth-child(4n+1) {
        background: #094cd3 !important;
    }
    /* DD 样式：自适应剩余宽度 + 与DT同行 */
    .zpmenu dd {
        width: 70% !important;
        height: 120px !important;
        overflow: hidden !important;
        margin: 0 !important;
        background: #f5f5f5 !important;
        display: block !important;
        /* 强制展开 */
        float: left !important;
        /* 与DT同行 */
    }
    /* 图标容器（适配DT固定宽度） */
    .zpmenu dt .sheji-icon {
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto 10px !important;
        background-size: contain !important;
        background-position: center !important;
    }
    /* 数字样式（适配DT固定宽度） */
    #slider2 .num {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
        line-height: 30px !important;
        margin: 10px auto !important;
        border-color: #fff !important;
        color: #fff !important;
    }
    #slider2 dd {
    height: 150px !important;}
    #slider2 dd.open {
        flex: auto
    }
    /* 文本样式（适配DT固定宽度） */
    .text-sheji {
        font-size: 14px !important;
        color: #fff !important;
    }
    .text-sheji_2 {
        font-size: 8px !important;
        color: #fff !important;
        margin-top: 5px !important;
    }
    /* DD内图片容器（自适应DD宽度） */
    .sheji-2 {
        width: 100%;
        height: 100%;
    }
    .sheji-2 img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* 图片填充容器，保持比例 */
        display: block;
    }
    /* 行组 clearfix：解决浮动高度塌陷 */
    #slider2::after {
        content: "";
        display: block;
        clear: both;
    }
    /* 触摸反馈优化 */
    .zpmenu dt,
    .zpmenu dd {
        -webkit-tap-highlight-color: transparent;
    }
    #slider2 dd {
        flex: auto;
    }
}

/* 小屏手机适配（调整DT宽度比例） */

@media (max-width: 375px) {
    .text-sheji {
        font-size: 12px !important;
    }
}
/********************/
    /* 第一块：Banner通栏 */
    .company-banner {
        width: 100%;
        height: 660px;
        background: #f5f5f5 url(/images/company-banner.jpg) no-repeat center center;
        background-size: cover;
        text-align: center;color: #FFF;
      }
      .company-banner h1{line-height: 1.5;font-size: 4rem;}
      .company-banner h1 i{width: 50px;height: 50px;text-align: center;line-height: 40px;border-radius: 100%;border:1px solid #FFF
        ;display: block;margin: 2.5rem auto;position: relative;}
        .company-banner h1 i::after{width: 30px;
            height: 1px;
            content: "";
            display: block;
            border-top: 1px solid #FFF;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%);}
  @media (max-width:768px){.company-banner{height:400px} .company-banner h1{font-size: 3rem;}}
  @media (max-width:575px){.company-banner h1{font-size: 2rem;}}
      /* 第二块：企业介绍+数据统计 */
      .company-about {
        padding: 80px 0;
      }
      .company-title {
        font-size: 36px;
        font-weight: bold;
        color: #222;
        margin-bottom: 15px;
      }
      .company-subtitle {
        font-size: 16px;
        color: #666;
        margin-bottom: 25px;
      }
      .company-about-text p {
        font-size: 15px;
        line-height: 1.8;
        color: #555;
        margin-bottom: 15px;
      }
      /* 数据卡片样式 */
      .company-data-item {
        background: linear-gradient(to bottom,  #487eea, #ffffff);
        padding: 40px 15px;
        text-align: center;
        border-radius: 8px;
        transition: all 0.3s ease;
        height: 100%;
      }
      .company-data-item:hover {
        background: #094cd3;
        cursor: pointer;
      }
      .company-data-title {
        font-size: 18px;
        color: #fff;
        font-weight: 500;
      }
      .company-data-num {       
        font-weight: bold;
        color: #fff;
        line-height: 1.2;
      }
      .company-data-num span{font-size: 32px;}
      .company-data-item:hover .company-data-num,
      .company-data-item:hover .company-data-desc {
        color: #fff !important;
      }
      .company-data-desc {
        font-size: 13px;
        color: #fff;
        margin-top: 5px;
      }
  
      /* 第三块：资质荣誉 */
      .company-honor {
        padding: 120px 0 80px;
        background: url(/images/company-bg-1.jpg) no-repeat center top;
        background-size: cover;
        color: #fff;
      }
      .company-honor-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 20px;background: url(/images/company-icon-1.png) no-repeat 0 0;padding-left: 40px;
      }
      .company-honor-text {font-size: 18px;
        line-height: 1.8;
        margin-bottom: 20px;width: 75%;
      }
      .company-honor-info p {
        line-height: 2;
        margin-bottom: 8px;
      }
      .company-honor-img {
        display: flex;
        gap: 20px;
        align-items: center;
        height: 100%;flex-wrap: wrap;
      }
      .company-honor-img img {
        flex: 1;
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      }
  
      /* 第四块：图片展示 */
      .company-img-group {
        padding: 40px 0;
      }
      .company-img-item {
        padding: 8px;
      }
      .company-img-item img {
        width: 100%;
        height: 220px;
        object-fit: cover;
      }
  
      /* 第五块：核心优势 */
      .company-advantage {
        background: #E8F3FF;
        padding: 80px 0;
      }
      .company-advantage-header {
        text-align: center;
        margin-bottom: 50px;
      }
      .company-advantage-title {
        font-size: 34px;
        font-weight: bold;
        margin-bottom: 15px;
      }
      .company-advantage-subtitle {
        font-size: 16px;
        color: #666;
      }
      /* 优势卡片 */
      .company-advantage-card {
        background: #fff;
        padding: 35px 25px 100px;;
        transition: all 0.4s ease;
        height: 100%;
      }
      .company-advantage-card:hover {
        background: #96aed0;
        background: linear-gradient(to bottom, #96aed0, #bdccdf);
        background-size: cover;
        color: #fff;
        cursor: pointer;
      }
      .company-advantage-icon {
        font-size: 28px;
        color: #165DFF;
        margin-bottom: 20px;
      }
      .company-advantage-card:hover .company-advantage-icon {
        color: #fff;
      }
      .company-advantage-card-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 15px;
      }
      .company-advantage-card-title::after{content: "";width:20px;background-color: #1952c6;height: 5px;display: block;margin: 1.5rem 0;} 
      .company-advantage-card-text {
        font-size: 14px;
        line-height: 1.8;
        color: #555;
      }
      .company-advantage-card:hover .company-advantage-card-text {
        color: #fff;
      }
      
.by{background: url(/images/bg-index-baoyi.jpg) no-repeat;background-size: cover;}
.by .container{max-width: 90%;position:relative;padding:18rem 0 10rem;}
.by .logo_brand{position: absolute;top:0;left: 0;}
.by h2{color: #FFF;font-size: 4rem;letter-spacing:.15em}
.by .sub{font-size:1.8rem;color: #FFF;}
.by .bybox{border-radius:50px;background: #FFF;font-size:1.25rem;color:#a9a4a4;display:flex;align-items:center;justify-content:center;cursor:pointer}
.by .row{margin-top:10rem;}
@media (max-width:640px){.by .container{padding:12rem 0 5rem;}.by .row{margin-top:5rem;}}
.by .bybox:hover{background:#c8b68f;color:#FFF}
.by .icon{width:40px;height: 40px;margin-right:5px;transition:.35s;}
.bybox.by-1 .icon{background: url(/images/icon-index-by-1.png) no-repeat 0 -37px;background-size:cover;}
.bybox.by-1:hover .icon{background: url(/images/icon-index-by-1.png) no-repeat 0 0;background-size:cover;}
.bybox.by-2 .icon{background: url(/images/icon-index-by-2.png) no-repeat 0 -37px;background-size:cover;}
.bybox.by-2:hover .icon{background: url(/images/icon-index-by-2.png) no-repeat 0 0;background-size:cover}
.bybox.by-3 .icon{background: url(/images/icon-index-by-3.png) no-repeat 0 -37px;background-size:cover;}
.bybox.by-3:hover .icon{background: url(/images/icon-index-by-3.png) no-repeat 0 0;background-size:cover}

.jg{background: url(/images/bg-index-jiugai.jpg) no-repeat;background-size: cover;color:#FFF}
.jg p{margin-bottom: 1.5rem;font-size:16px;line-height: 1.8;color:#fff;}
.jgbox,.jg .btn{border-radius:50px;border:1px solid #ff6a00;background:#ff6a00;font-size:1.25rem;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.35s}
.jgbox:hover{border:1px solid #fff;background:transparent}
.jg .btn{width: 200px;}
.jgbox .icon{height: 40px;margin-right: 5px;width: 40px;display:inline-block}
.jg .container{max-width: 90%;position:relative;}