/* ==========
   首页样式优化
   - 取消网页滚屏滑动效果
   - 轮播图增强功能
   - 移动端自适应
   ========== */

/* 取消滚屏滑动效果 */
body.index {
    overflow-x: hidden;
}

/* 修复main容器的定位问题，避免轮播图在页面底部显示 */
.index .main {
    position: static !important;
    z-index: auto !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    scroll-behavior: auto !important;
}

.right-button {
    display: none !important;
}

/* 修复index-bk容器的定位和变换 */
.index-bk {
    position: static !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
    -webkit-transition: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0rem 2rem 5rem;   /* 各版块之间间距 */
}

/* 轮播图容器样式 */
/* 首页轮播图容器，顶部不再受body或.header影响，单独控制margin-top，避免被导航栏遮挡 */
.index-n0 {
    height: 100% !important;  /* 轮播图高度 */
    /* min-height: 500px; */
    position: relative;
    margin-top: 80px; /* PC端导航栏高度，确保轮播图完全显示 */
    padding-bottom: 5vh;
}

.mySwiper {
    width: 100%;
    /* height: 100%; */
    position: relative;
}

.swiper-slide {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 轮播图分页器样式 */
.swiper-pagination {
    bottom: 20px !important;
    z-index: 10;
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    margin: 0 6px;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    background: #fff;
    transform: scale(1.2);
}

/* 轮播图左右箭头 */
.swiper-button-next,
.swiper-button-prev {
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-top: -25px;
    transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: scale(1.1);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 18px;
    font-weight: bold;
}

/* 移动端适配 */
@media (max-width: 768px) {
    /* 移动端首页轮播图容器，顶部margin-top与移动端导航栏高度保持一致，避免遮挡 */
    .index-n0 {
        /* height: 50vh !important; */
        /* min-height: 300px; */
        /* margin-top: 60px; */ /* 移动端导航栏高度 */
        padding-bottom: 3rem;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        width: 40px;
        height: 40px;
        margin-top: -20px;
    }
    
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 14px;
    }
    
    .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin: 0 4px;
    }

    /* ========== 首页轮播图移动端自适应样式 ========== */
    .mySwiper,
    .swiper-container {
        height: 200px !important; /* 移动端轮播高度，可根据实际需求调整 */
        /* min-height: 120px; */
    }
    .swiper-slide img {
        height: 200px !important;
        object-fit: cover;
    }
    .swiper-pagination {
        bottom: 8px !important;
    }
}


@media (max-width: 480px) {
    .index-n0 {
        /* height: 40vh !important; */
        /* min-height: 250px; */
        padding: 0 0 3rem;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        width: 35px;
        height: 35px;
        margin-top: -17px;
    }
    
    .swiper-pagination {
        bottom: 15px !important;
    }
    
    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        margin: 0 3px;
    }
}

/* ==========
   加盟宣传板块样式
   - 上部分：参考图片样式的字体排版设计
   - 下部分：长方形设计，居左对齐
   - 全面移动端自适应
   ========== */
.jiameng-section {
    background: #f5f5f5;
    padding: 60px 0;
    margin: 40px 0;
}

/* 加盟宣传上部分  */
.jiameng-banner {
    /* background: #fff; */
    border-radius: 0;
    padding: 60px 40px 0px;
    margin-bottom: 50px;
    position: relative;
    /* text-align: center; */
    /* box-shadow: none; */
    /* border-top: 4px solid #ff6b35; */
}

.jiameng-banner-content {
    /* display: block; */
    /* position: relative; */
    /* max-width: 800px; */
    /* margin: 0 auto; */
}

.jiameng-slogan {
    /* margin-bottom: 40px; */
    /* color: #333; */
}

/* 上方字体排版 */
.slogan-main {
    font-size: 50px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 80px;
    color: #000;
    letter-spacing: 2px;
    /* 初始状态：隐藏元素，等待滚动触发动画 */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* 滚动到元素时添加此类来触发动画 */
.slogan-main.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 保留原有的keyframes动画作为备用方案 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.highlight-number {
    color: #ff0000;
    font-size: 56px;
    font-weight: 900;
    text-shadow: none;
}

.slogan-sub {
    font-size: 22px;
    color: #000;
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 40px;
}

.jiameng-stats {
    display: flex;
    justify-content: flex-start;
    gap: 80px;
    margin-top: 40px;
}

.sy-stat-item {
    text-align: center;
    color: #000;
    position: relative;
}

/* 添加统计数据块之间的黑色竖划线 */
.sy-stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60px;
    background-color: #333;
    opacity: 0.3;
}

.sy-stat-number {
    font-size: 35px;
    font-weight: 900;
    margin-bottom: 8px;
    text-shadow: none;
}

.sy-stat-label {
    font-size: 16px;
    color: #000;
    font-weight: 500;
}


/* 加盟宣传下部分 - 长方形设计，居左对齐 */
.jiameng-entries {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    padding: 0 40px;
}

.jiameng-entry {
    background: #fff;
    border-radius: 8px;
    padding: 15px 20px;
    width: 100%;
    max-width: 25%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    /* border-left: 4px solid #ff6b35; */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* 国内加盟背景图片 */
.jiameng-entry.domestic {
    background-image:  url('/static/images/index/index_gnjm.jpg');
}

/* 国外加盟背景图片 */
.jiameng-entry.international {
    background-image: url('/static/images/index/index_hwjm.jpg');
}

/* 添加背景图案装饰 */
.jiameng-entry::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background:linear-gradient(90deg, #000000c4 30%, rgb(0 0 0 / 50%) 90%);
    pointer-events: none;
}

.jiameng-entry:hover {
    transform: translateX(10px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
    border-left-color: #e55a2b;
}

.entry-content {
    flex: 1;
    text-align: left;
    z-index: 2;
}

.entry-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.2;
}

.entry-content p {
    font-size: 14px;
    color: #ffffff99;
    margin-bottom: 15px;
    line-height: 1.4;
}

.entry-btn {
    display: inline-block;
    background: #e22702;
    color: #fff;
    padding: 8px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 10px;
    transition: all 0.3s ease;
    border: none;
}

.entry-btn:hover {
    background: #c52604;
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .jiameng-section {
        padding: 40px 0;
        margin: 20px 0;
    }
    
    .jiameng-banner {
        padding: 40px 20px;
        margin-bottom: 30px;
    }
    
    .jiameng-banner-content {
        max-width: 100%;
    }
    
    .slogan-main {
        font-size: 32px;
        line-height: 1.2;
    }
    
    .highlight-number {
        font-size: 38px;
    }
    
    .slogan-sub {
        font-size: 16px;
    }
    
    .jiameng-stats {
        gap: 40px;
        margin-top: 30px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* 移动端统计数据块竖划线调整 */
    .sy-stat-item:not(:last-child)::after {
        right: -20px;
        height: 50px;
    }
    
    .sy-stat-number {
        font-size: 32px;
    }
    
    .sy-stat-label {
        font-size: 14px;
    }
    
    .jiameng-entries {
        align-items: stretch;
        padding: 0 20px;
        flex-direction: column;
        gap: 15px;
    }
    
    .jiameng-entry {
        max-width: 100%;
        padding: 20px;
        flex-direction: row;
        gap: 15px;
    }
    
    /* 移动端加盟版块背景图片调整 */
    .jiameng-entry::before {
        width: 100%;
    }
    
    .entry-icon {
        width: 50px;
        height: 50px;
    }
    
    .entry-icon img {
        width: 25px;
        height: 25px;
    }
    
    .entry-content h3 {
        font-size: 18px;
    }
    
    .entry-content p {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .jiameng-section {
        padding: 30px 0;
        margin: 15px 0;
    }
    
    .jiameng-banner {
        padding: 30px 15px;
        margin-bottom: 25px;
    }
    
    .slogan-main {
        font-size: 26px;
        margin-bottom: 15px;
    }
    
    .highlight-number {
        font-size: 32px;
    }
    
    .slogan-sub {
        font-size: 15px;
    }
    
    .jiameng-stats {
        gap: 30px;
        margin-top: 25px;
        flex-direction: column;
        align-items: center;
    }
    
    /* 小屏幕隐藏竖划线 */
    .sy-stat-item:not(:last-child)::after {
        display: none;
    }
    
    .sy-stat-number {
        font-size: 28px;
    }
    
    .sy-stat-label {
        font-size: 13px;
    }
    
    .jiameng-entries {
        padding: 0 15px;
    }
    
    .jiameng-entry {
        padding: 18px 15px;
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    /* 小屏幕加盟版块背景图片调整 */
    .jiameng-entry::before {
        width: 100%;
        background:linear-gradient(90deg, #000000c4 30%, rgb(0 0 0 / 50%) 90%);
    }
    
    .entry-content {
        text-align: center;
    }
    
    .entry-icon {
        width: 45px;
        height: 45px;
        margin: 0 auto;
    }
    
    .entry-icon img {
        width: 22px;
        height: 22px;
    }
    
    .entry-content h3 {
        font-size: 16px;
        margin-bottom: 6px;
    }
    
    .entry-content p {
        font-size: 12px;
        margin-bottom: 12px;
    }
    
    .entry-btn {
        padding: 6px 16px;
        font-size: 13px;
    }
}

/* ==========
   合作背景图板块样式
   - 实现全宽度背景图
   - 设置固定高度
   - 居中显示内容
   ========== */
   .cooperation-banner {
    width: 100%;
    height: 300px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    overflow: hidden;
}

/* 背景图片容器 */
.banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 背景图片样式 */
.banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 背景图遮罩层 - 增加文字可读性 */
.cooperation-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.018);
    z-index: 1;
}

/* 文字内容容器 - 确保文字显示在遮罩层之上 */
.banner-text {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* 标题文字样式 - 大号白色加粗字体带阴影 */
.banner-text h2 {
    color: #fff;
    font-size: 36px;
    font-weight: bold;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* ==========
   响应式布局适配
   - 768px 以下屏幕
   - 减小背景图高度
   - 缩小文字大小
   ========== */
@media (max-width: 768px) {
    .cooperation-banner {
        height: 200px;
    }

    .banner-text h2 {
        font-size: 24px;
    }
}

/* ==========
   加盟优势
   ========== */
   .jm-youshi-flex {
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
    flex-wrap: wrap;
  }
  
  .jm-youshi-01 {
    width: 30%;
    border: 1px solid #cccccc;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    margin-top: 30px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  
  .jm-youshi-01:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
  }
  
  .jm-youshi-01 .div-title {
    position: relative;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    line-height: 70px;
    background: linear-gradient(135deg, #e22702 0%, #f39c12 100%);
    overflow: hidden;
    padding-left: 10%;
    padding-right: 10%;
    /* 添加背景图片支持 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  /* 第1个版块 - 国家级非遗传承背景 */
  .jm-youshi-01:nth-child(1) .div-title {
    background: linear-gradient(135deg, rgb(255 126 1 / 68%) 0%, rgb(0 0 0 / 40%) 100%), url(/static/images/jiameng/jmys_bj1.png);
    background-size: cover;
    /* background-position: center; */
  }
  
  /* 第2个版块 - 累计销量超1亿碗背景 */
  .jm-youshi-01:nth-child(2) .div-title {
    background: linear-gradient(135deg, rgb(127 25 0) 0%, rgb(0 0 0 / 40%) 100%), url(/static/images/jiameng/jmys_bj2.png);
    background-size: cover;
    background-position: center;
  }
  
  /* 第3个版块 - AI全链路智能系统背景 */
  .jm-youshi-01:nth-child(3) .div-title {
    background: linear-gradient(95deg, rgb(0 19 71 / 62%) 0%, rgb(0 0 0 / 40%) 100%), url(/static/images/jiameng/jmys_bj3.png);
    background-size: cover;
    background-position: center;
  }
  
  /* 第4个版块 - 自有标准化智能供应链背景 */
  .jm-youshi-01:nth-child(4) .div-title {
    background: linear-gradient(135deg, rgb(3 119 98) 0%, rgb(29 29 29 / 40%) 100%), url(/static/images/jiameng/jmys_bj4.png);
    background-size: cover;
    background-position: center;
  }
  
  /* 第5个版块 - 百店实战流量发动机背景 */
  .jm-youshi-01:nth-child(5) .div-title {
    background: linear-gradient(135deg, rgba(226, 39, 2, 0.8) 0%, rgb(0 0 0 / 40%) 100%), url(/static/images/jiameng/jmys_bj5.png);
    background-size: cover;
    background-position: center;
  }
  
  /* 第6个版块 - 保姆式服务0经验开店背景 */
  .jm-youshi-01:nth-child(6) .div-title {
    background: linear-gradient(135deg, rgb(255 112 24) 0%, rgb(0 0 0 / 40%) 100%), url(/static/images/jiameng/jmys_bj6.png);
    background-size: cover;
    background-position: center;
  }

  .jm-youshi-01 .div-title .span-num {
    position: absolute;
    left: -3px; /* 移动到左边 */
    bottom: -25px;
    font-size: 25px;
    line-height: 60px;
    color: rgba(255, 255, 255, 0.29);
  }

  .jm-youshi-01 .div-des {
    font-size: 16px;
    color: #555;
    line-height: 30px;
    padding: 20px 10%;
    position: relative;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    overflow: hidden;
    min-height: 80%; /* 确保最小高度 */
  }
  
  /* 通用背景图标样式 - 修复定位问题 */
  .jm-youshi-01 .div-des::before {
    content: '';
    position: absolute;
    right: 0px; /* 调整右边距 */
    bottom: 10px; /* 调整底边距 */
    width: 80px; /* 减小尺寸 */
    height: 80px;
    opacity: 0.1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(15deg);
    transition: all 0.3s ease;
    z-index: 1; /* 确保层级 */
  }
  
  /* 悬停时图标效果 */
  .jm-youshi-01:hover .div-des::before {
    opacity: 0.2;
    transform: rotate(15deg) scale(1.1);
  }
  
  /* 第1个版块 - 非遗传承图标 */
  .jm-youshi-01:nth-child(1) .div-des::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M553.95547 121.609466c-224.932486 0-407.275053 182.34359-407.275053 407.275053 0 224.933509 182.34359 407.275053 407.275053 407.275053 224.933509 0 407.275053-182.341544 407.275053-407.275053C961.230523 303.953056 778.887956 121.609466 553.95547 121.609466zM556.149434 145.760467c205.786465 0 373.782308 161.780293 383.751337 365.092409l-61.248847 0c-2.010793-22.170908-32.98007-297.758996-330.2356-302.578758-262.757901-4.261038-324.904185 248.243355-324.904185 248.243355l125.382388 2.130519 168.720342-172.730671c0 0 18.036759-13.407331 30.802478-12.652133 14.892145 0.880042 27.257753 9.58836 27.257753 9.58836L797.849782 510.852876 722.524363 510.852876 572.771987 363.158364l0.014326-0.01535-7.265459-7.1355-6.615661-6.525611-0.014326 0.013303-11.436447-11.23281-178.327122 172.590478L172.400144 510.852876C182.369173 307.54076 350.366039 145.760467 556.149434 145.760467zM547.213943 388.620218l46.136691 47.880401-49.238326 48.535316-47.577503-45.924867L547.213943 388.620218zM471.741168 463.812607l47.44345 45.795931-44.399121 43.765695-46.705648-46.064036L471.741168 463.812607zM544.781549 534.316217l45.780581 44.190367-45.075525 44.597642-45.376376-44.753184L544.781549 534.316217zM615.445817 553.888956l-45.734533-44.145341 48.321445-47.630715 44.010265 45.674158L615.445817 553.888956zM556.149434 914.204581c-206.829212 0-375.48304-163.42679-383.887437-368.193021l47.876308 0c2.633985 23.331335 39.757413 295.927281 336.259791 293.909326 262.787576-1.786689 318.828828-255.652077 318.828828-255.652077l-125.398761 0.757245L585.317696 761.592069c0 0-17.708278 13.818699-30.487301 13.357189-14.907495-0.535188-27.47981-8.958005-27.47981-8.958005l-228.1825-219.979694 90.067138 0 13.648831-13.597666 117.316705 115.705001-24.55623 24.295287 25.59693 24.707679 24.283008-24.026158 24.733261 24.393524 25.559068-24.747588-25.007507-24.663677 115.912731-114.677603 12.151737 12.610177 241.164136 0C931.634521 750.777791 762.980693 914.204581 556.149434 914.204581z" fill="%23bfbfbf"/></svg>');
  }
  
  /* 第2个版块 - 销量图标 */
  .jm-youshi-01:nth-child(2) .div-des::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M598.099982 1023.99978H425.900018c-42.499991 0.1-77.099983-34.299993-77.299983-76.799983 0-7.899998 1.2-15.699997 3.599999-23.199996-106.499977-19.099996-195.099958-92.69998-233.39995-193.799958C106.000087 696.09985 99.500089 659.999858 99.500089 623.599866v-35.899992c-12.999997-6.199999-24.099995-15.899997-31.899994-28.099994-7.999998-12.399997-12.299997-26.899994-12.299997-41.699991v-6.199999c0.2-42.799991 34.999992-77.399983 77.799983-77.299983h757.699838c20.599996-0.1 40.399991 8.099998 54.999988 22.699995 14.599997 14.399997 22.799995 34.099993 22.799995 54.699988v6.199999c0 14.799997-4.299999 29.299994-12.299997 41.699991-7.799998 12.099997-18.899996 21.799995-31.899994 28.099994v35.999992c0 72.099985-25.699994 141.89997-72.599984 196.799958-46.19999 54.399988-109.899976 90.99998-180.199961 103.599977 2.399999 7.499998 3.599999 15.399997 3.599999 23.199995 0 42.299991-34.599993 76.699984-77.099983 76.599984z m-172.199964-95.29998c-10.199998 0-18.499996 8.299998-18.499996 18.499997s8.299998 18.499996 18.499996 18.499996h172.199964c10.199998 0 18.499996-8.299998 18.499996-18.499996s-8.299998-18.499996-18.499996-18.499997H425.900018zM158.200076 595.199872v28.399994c0.6 136.699971 111.699976 247.199947 248.399947 246.899947h210.699954c136.699971 0.3 247.799947-110.199976 248.399947-246.899947v-28.399994H158.200076z m-25.099995-102.499978c-10.499998 0-19.099996 8.499998-19.099995 18.999996v6.199999c0 10.499998 8.599998 18.999996 19.099995 18.999996h757.699838c10.499998 0 19.099996-8.499998 19.099996-18.999996v-6.199999c0-10.499998-8.599998-18.999996-19.099996-18.999996H133.100081z m2.9-111.999976c-11.499998 0-21.999995-6.699999-26.799994-17.199996-3.999999-8.899998-3.299999-19.099996 1.799999-27.399994h-9.899998C85.000092 336.199928 72.000095 323.099931 72.000095 306.999934s13.099997-29.199994 29.199993-29.199994h128.099973L764.099946 38.499992c14.799997-6.599999 32.099993-0.1 38.799992 14.599997 6.599999 14.599997 0.1 31.899993-14.499997 38.499991-0.1 0-0.1 0.1-0.2 0.1l-415.999911 186.19996h430.999907c16.099997 0 29.199994 13.099997 29.199994 29.199994s-13.099997 29.199994-29.199994 29.199994H241.900058l-93.79998 41.999991c-3.799999 1.6-7.899998 2.399999-12.099997 2.399999z m755.299838-44.49999c-7.799998 0-15.199997-3.099999-20.699996-8.599998-11.399998-11.299998-11.499998-29.599994-0.2-40.999992l0.2-0.2c5.599999-5.499999 12.999997-8.499998 20.799995-8.499998 1.9 0 3.799999 0.2 5.599999 0.6 1.9 0.4 3.699999 0.9 5.499999 1.7 1.8 0.7 3.499999 1.6 5.099999 2.699999 1.6 1.1 3.099999 2.3 4.499999 3.599999 11.399998 11.299998 11.499998 29.599994 0.2 40.999992l-0.2 0.2c-1.4 1.4-2.899999 2.599999-4.499999 3.599999-1.6 1.1-3.299999 2-5.099999 2.699999-1.8 0.7-3.599999 1.3-5.499999 1.7-1.9 0.3-3.799999 0.5-5.699998 0.5zM856.499926 58.299987c-3.899999 0-7.699998-0.7-11.199998-2.199999-3.599999-1.4-6.799999-3.599999-9.499998-6.299999-5.499999-5.499999-8.599998-12.899997-8.599998-20.599995 0-1.9 0.2-3.799999 0.6-5.699999 0.4-1.9 0.9-3.699999 1.7-5.499999 0.7-1.8 1.6-3.499999 2.699999-4.999999 2.1-3.199999 4.899999-5.899999 8.099998-7.999998 3.199999-2.1 6.799999-3.599999 10.599998-4.399999 1.8-0.4 3.699999-0.6 5.599999-0.6 7.799998 0 15.299997 3.099999 20.799996 8.499998 1.4 1.4 2.599999 2.799999 3.599999 4.399999 1.1 1.6 2 3.299999 2.699999 4.999999 0.7 1.8 1.3 3.599999 1.7 5.499999 0.4 1.9 0.6 3.799999 0.6 5.699999 0 7.699998-3.099999 15.099997-8.599998 20.599995-5.699999 5.499999-13.099997 8.599998-20.799996 8.599998z" fill="%23bfbfbf"/></svg>');
  }
  
  /* 第3个版块 - AI智能图标 */
  .jm-youshi-01:nth-child(3) .div-des::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M501.824 32C303.552 32 141.504 176.992 141.504 357.76c0 23.712 2.816 47.104 8.32 69.856l-51.008 114.208a32 32 0 0 0 24.704 44.736c54.272 7.744 76.672 31.168 76.672 77.312v111.552a64 64 0 0 0 64 64h20.704a64 64 0 0 1 64 64V960a32 32 0 0 0 32 32h345.6a32 32 0 0 0 0-64h-313.6v-24.608a128 128 0 0 0-128-128h-20.736v-111.552c0-65.664-32.192-110.688-91.2-131.136l39.872-89.28a31.968 31.968 0 0 0 1.568-21.792 233.088 233.088 0 0 1-8.896-63.904c0-143.712 131.936-261.76 296.32-261.76s296.32 118.016 296.32 261.76a32 32 0 0 0 64 0C862.144 176.992 700.064 32 501.824 32zM904 448a32 32 0 0 0-32 32v360a32 32 0 0 0 64 0V480a32 32 0 0 0-32-32z" fill="%23bfbfbf"/><path d="M673.888 466.656c-11.744-25.568-48.416-24.64-58.816 1.536l-132.8 333.76a32 32 0 0 0 59.488 23.68l32.608-81.92c0.576 0.032 1.088 0.32 1.664 0.32h154.848l38.176 83.104a31.968 31.968 0 1 0 58.144-26.72l-153.312-333.76zM599.68 680l47.264-118.72 54.528 118.72H599.68z" fill="%23bfbfbf"/></svg>');
  }
  
  /* 第4个版块 - 供应链图标 */
  .jm-youshi-01:nth-child(4) .div-des::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M873.941333 492.394667c-8.618667 137.301333-93.632 253.866667-213.013333 307.712A149.333333 149.333333 0 0 1 362.666667 789.333333a149.333333 149.333333 0 0 1 282.346666-67.968 285.098667 285.098667 0 0 0 148.778667-209.408 191.168 191.168 0 0 0 80.149333-19.562666zM512 704a85.333333 85.333333 0 1 0 77.397333 121.301333l0.789334-1.749333 1.706666-4.117333a84.736 84.736 0 0 0 3.349334-11.221334l-0.32 1.365334c0.32-1.365333 0.64-2.730667 0.874666-4.117334l-0.554666 2.752a84.906667 84.906667 0 0 0 0.981333-5.013333l-0.426667 2.261333c0.298667-1.514667 0.554667-3.072 0.768-4.629333l-0.341333 2.346667c0.213333-1.472 0.426667-2.965333 0.597333-4.48l-0.256 2.133333c0.512-3.754667 0.768-7.594667 0.768-11.498667l-0.149333-5.12a86.08 86.08 0 0 0-0.448-5.12l0.362667 3.754667a85.632 85.632 0 0 0-0.512-4.821333l0.149333 1.066666a84.992 84.992 0 0 0-2.282667-11.797333l0.341334 1.28a84.693333 84.693333 0 0 0-1.322667-4.693333l0.981333 3.413333a84.672 84.672 0 0 0-1.365333-4.629333l0.384 1.194666a84.693333 84.693333 0 0 0-1.6-4.629333l1.216 3.434667a84.693333 84.693333 0 0 0-1.728-4.778667l0.512 1.344a84.885333 84.885333 0 0 0-5.098667-11.029333l0.725334 1.344a85.205333 85.205333 0 0 0-2.218667-3.968l1.493333 2.624A85.312 85.312 0 0 0 512 704zM234.666667 170.666667a149.333333 149.333333 0 1 1-7.637334 298.474666V469.333333c0 93.994667 45.525333 177.365333 115.733334 229.269334a193.088 193.088 0 0 0-22.4 78.677333C217.664 713.237333 149.333333 599.253333 149.333333 469.333333c0-8.789333 0.32-17.493333 0.917334-26.133333A149.333333 149.333333 0 0 1 234.666667 170.666667z m277.333333-64c83.136 0 159.744 27.968 220.906667 75.029333a149.333333 149.333333 0 1 1-63.914667 49.856A283.2 283.2 0 0 0 512 184.384c-42.709333 0-83.2 9.386667-119.573333 26.24a192.426667 192.426667 0 0 0-60.458667-56.170667A360.874667 360.874667 0 0 1 512 106.666667zM233.130667 405.290667l0.533333 0.042666-0.32-0.042666h-0.213333z m-1.856-0.042667l0.746666 0.042667h1.109334l-1.856-0.042667z m-1.024-0.042667l0.768 0.042667h0.256l-1.024-0.042667z m-3.349334-0.234666l0.448 0.042666h-0.170666l-0.277334-0.042666z m-1.92-0.170667h0.256-0.256z m-25.834666-7.189333l0.618666 0.277333-0.554666-0.256-0.064-0.021333z m-1.578667-0.746667l1.365333 0.64 0.213334 0.106667-0.213334-0.106667-0.234666-0.106667-1.130667-0.533333z m-14.592-8.96l2.069333 1.514667 0.682667 0.512-1.813333-1.322667-0.938667-0.704z m-0.64-0.512l0.298667 0.234667-0.042667-0.021334-0.256-0.213333z m537.834667-117.397333l-0.661334 0.938666 0.512-0.704 0.149334-0.234666z m23.296-21.973334l-1.194667 0.789334 0.597333-0.405334 0.597334-0.384z m27.562666-11.392l-0.597333 0.128 0.341333-0.064 0.256-0.064z m2.325334-0.469333l-0.362667 0.064 0.384-0.064h-0.021333z m0.32-0.064l-0.064 0.021333h0.021333l0.042667-0.021333z m6.656-0.96l-2.325334 0.277333-2.026666 0.277334 2.154666-0.298667 2.197334-0.256z m-551.274667 170.005333h-0.042667l-0.597333-0.042666 0.64 0.042666z m-3.648-0.32l-0.128-0.021333 0.682667 0.064-0.554667-0.042667z m-23.018667-5.824l-0.256-0.106666-1.024-0.426667 2.090667 0.853333-0.810667-0.32z m-12.608-6.421333l0.32 0.213333 0.554667 0.32-0.874667-0.533333z m-2.986666-1.941333l-0.021334-0.021334-1.045333-0.682666 1.066667 0.704z m43.178666 14.549333h-0.576 0.576z m522.218667-162.069333l0.341333-0.149334 0.170667-0.064-0.512 0.213334z m15.701333-5.738667l0.213334-0.064 0.170666-0.042667-0.384 0.106667z m5.632-1.237333l0.085334-0.021334-0.128 0.021334h0.042666z m-5.418666 1.173333l-0.192 0.064 1.664-0.426667a84.693333 84.693333 0 0 0-4.522667 1.216l1.834667-0.512-2.24 0.64-1.664 0.512-2.026667 0.704a84.714667 84.714667 0 0 0-8.256 3.392l0.682667-0.32-0.853334 0.384-0.405333 0.192-0.128 0.064-0.32 0.192-0.746667 0.362667-1.557333 0.810667-0.085333 0.021333-1.941334 1.066667 1.813334-0.981334-1.813334 1.002667-1.109333 0.618667-0.853333 0.512 0.170666-0.085334-0.192 0.106667-1.92 1.194667-0.576 0.362666-0.938666 0.64-0.533334 0.341334-1.728 1.216-1.322666 0.96-0.384 0.298666c-2.709333 2.048-5.290667 4.245333-7.744 6.592l-0.661334 0.64-0.853333 0.853334-1.109333 1.130666-0.341334 0.384-0.405333 0.405334-1.002667 1.109333-0.768 0.853333-0.149333 0.170667-0.426667 0.512-1.365333 1.642667-0.768 0.917333-0.554667 0.746667-0.064 0.085333-1.344 1.770667-0.384 0.554666-2.453333 3.584A85.333333 85.333333 0 1 0 789.333333 234.666667l-0.789333 0.021333L788.48 234.666667l-3.925333 0.128-1.130667 0.064a85.674667 85.674667 0 0 0-5.312 0.533333l-2.133333 0.298667-1.578667 0.277333 1.28-0.213333-1.301333 0.213333-0.490667 0.085333-0.277333 0.064-0.106667 0.021334-0.106667 0.021333h-0.042666l-1.6 0.32 0.938666-0.192-0.981333 0.213333-0.96 0.192-1.194667 0.277334 0.853334-0.213334-1.066667 0.234667-0.426667 0.128-0.469333 0.106667-0.192 0.042666h0.021333l-0.192 0.042667zM229.973333 405.184l3.370667 0.106667L234.666667 405.333333a85.333333 85.333333 0 1 0-70.293334-36.949333l2.944 4.053333c0.853333 1.066667 1.706667 2.133333 2.602667 3.157334l0.064 0.064 1.493333 1.706666-1.194666-1.386666 1.898666 2.133333c0.746667 0.810667 1.536 1.621333 2.346667 2.410667l0.213333 0.234666 0.490667 0.469334 0.554667 0.533333 1.322666 1.237333 0.490667 0.448 0.554667 0.490667-0.533334-0.490667 1.301334 1.152-0.256-0.213333 0.256 0.213333 0.384 0.341334 1.002666 0.832 0.469334 0.384 1.557333 1.237333-0.618667-0.469333 0.618667 0.490666 0.256 0.192 0.384 0.298667-0.341333-0.277333 1.28 0.981333 2.858666 2.005333 0.021334 0.021334 0.064 0.042666 0.746666 0.512 1.6 1.024 0.576 0.362667-1.557333-1.002667 2.752 1.728 1.685333 0.981334 1.386667 0.789333 0.789333 0.405333 1.002667 0.533334 1.749333 0.853333 1.109334 0.533333 0.234666 0.106667 0.277334 0.128 1.92 0.853333 0.746666 0.32 0.256 0.085334 0.256 0.106666 0.768 0.32 2.048 0.789334-1.194666-0.448c3.136 1.216 6.357333 2.24 9.664 3.072l5.013333 1.109333c1.493333 0.277333 2.986667 0.533333 4.48 0.725333l-0.64-0.085333 2.090667 0.256 0.533333 0.064h0.085333l0.170667 0.021333 0.362667 0.064 1.130666 0.085334-1.024-0.106667 1.301334 0.149333 0.426666 0.021334 1.408 0.106666h0.042667l0.661333 0.042667 0.533334 0.021333-0.277334-0.021333z" fill="%23bfbfbf"/></svg>');
  }
  
  /* 第5个版块 - 流量发动机图标 */
  .jm-youshi-01:nth-child(5) .div-des::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M361.409 861.8c36.509 12.17 48.678-21.297 33.466-33.466-48.678-33.466-73.017-94.313-54.762-149.076 18.254-60.847 66.932-85.186 66.932-176.457 0 0 60.847 45.636 48.678 115.611 60.847-69.974 33.466-161.245 21.297-203.839 155.161 82.144 289.025 261.644 133.864 413.762-18.254 15.211 0 42.593 27.382 33.466 422.889-240.347 103.441-599.347 48.678-641.94 18.254 42.593 21.297 109.525-15.211 142.992-63.891-240.347-219.051-289.025-219.051-289.025 18.254 124.737-69.974 258.602-152.119 362.042-3.042-51.72-6.084-85.186-30.424-130.822-6.084 88.229-76.059 161.245-94.312 252.516-24.339 121.694 18.254 209.923 185.585 304.237v0z" fill="%23bfbfbf"/></svg>');
  }
  
  /* 第6个版块 - 保姆式服务图标 */
  .jm-youshi-01:nth-child(6) .div-des::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M517.973333 64c154.88 0 295.381333 77.226667 378.069334 199.68L896 160h64V384h-224V320h119.893333c-64.384-109.738667-180.693333-182.613333-311.893333-191.146667V192h-64V129.792c-186.965333 17.792-335.189333 165.504-350.677333 350.208H192v64H129.322667c15.488 184.704 163.712 332.373333 350.72 350.165333L480 832h64v63.146667c164.352-10.709333 303.829333-122.325333 348.928-276.821334l4.010667-14.933333 62.122666 15.445333C909.653333 817.749333 728.234667 960 517.973333 960 267.349333 960 64 759.466667 64 512c0-247.552 203.349333-448 453.973333-448zM394.026667 349.44c14.336 0 27.776 2.005333 40.32 6.058667 12.544 4.010667 23.466667 9.984 32.682666 17.92 9.258667 7.893333 16.512 17.834667 21.76 29.781333 5.205333 11.946667 7.850667 25.856 7.850667 41.685333 0 10.154667-1.066667 19.328-3.157333 27.52a93.269333 93.269333 0 0 1-8.746667 22.4c-3.712 6.741333-8.106667 12.928-13.226667 18.602667a216.96 216.96 0 0 1-16.554666 16.597333l-96.341334 82.858667h140.672v59.136H277.930667v-71.253333l123.221333-110.634667 6.272-5.930667c4.181333-4.096 8.362667-8.533333 12.544-13.354666a36.906667 36.906667 0 0 0 9.386667-25.088 30.464 30.464 0 0 0-11.648-25.301334 42.837333 42.837333 0 0 0-27.306667-9.173333c-12.544 0-22.314667 3.882667-29.354667 11.648a46.933333 46.933333 0 0 0-11.861333 28.672l-67.2-4.906667 0.853333-9.6c1.536-12.458667 4.693333-23.509333 9.472-33.194666 5.973333-12.117333 13.866667-22.186667 23.722667-30.250667 9.856-8.064 21.418667-14.08 34.730667-18.133333 13.269333-4.053333 27.690667-6.058667 43.221333-6.058667z m312.917333 5.376v197.12h40.789333v56.448h-40.789333v63.616h-64.512v-63.616h-138.410667v-56.448l129.450667-197.12h73.472z m-64.512 87.808h-0.853333l-70.4 109.312h71.253333v-109.312z" fill="%23bfbfbf"/></svg>');
  }
  
  /* 移动端适配优化 */
  @media (max-width: 1200px) {
    .jm-youshi-01 {
      width: 48%; /* 平板端两列 */
      margin-bottom: 20px;
    }
  }
  
  @media (max-width: 768px) {
    .jm-youshi-flex {
      flex-direction: column;
      padding-top: 20px;
    }
    
    .jm-youshi-01 {
      width: 100%; /* 手机端单列 */
      margin-top: 20px;
      margin-bottom: 15px;
    }
    
    .jm-youshi-01 .div-title {
      font-size: 22px;
      line-height: 60px;
      padding-left: 15px;
      padding-right: 15px;
    }
    
    .jm-youshi-01 .div-title .span-num {
      font-size: 45px;
      bottom: -15px;
    }
    
    .jm-youshi-01 .div-des {
      font-size: 14px;
      line-height: 26px;
      padding: 15px;
      min-height: 100px;
    }
    
    /* 移动端图标调整 */
    .jm-youshi-01 .div-des::before {
      width: 60px;
      height: 60px;
      right: 8px;
      bottom: 8px;
      opacity: 0.08;
    }
    
    .jm-youshi-01:hover .div-des::before {
      opacity: 0.15;
    }
  }
  
  @media (max-width: 480px) {
    .jm-youshi-01 .div-title {
      font-size: 20px;
      line-height: 50px;
    }
    
    .jm-youshi-01 .div-title .span-num {
      font-size: 35px;
      bottom: -10px;
    }
    
    .jm-youshi-01 .div-des {
      font-size: 13px;
      line-height: 24px;
      padding: 12px;
      min-height: 90px;
    }
    
    /* 超小屏幕图标进一步调整 */
    .jm-youshi-01 .div-des::before {
      width: 45px;
      height: 45px;
      right: 5px;
      bottom: 5px;
    }
  }


/* ==========
   门店展示
   ========== */
/* 门店展示板块样式 */
.store-gallery {
    padding: 0px 0;
}

/* 门店类型容器 */
.store-type {
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

/* 门店标题样式 */
.store-title {
    font-size: 24px;
    color: #333;
    margin-top: 40px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* 新增规则：移除特定SVG图标的动效 */
.store-title .icon {
    transition: none !important;
    /* 禁用过渡动画 */
}

.store-title .icon:hover {
    transform: none !important;
    /* 禁用悬停时的变换效果 */
}

.store-title .icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

/* 图片网格布局 */
.store-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0 auto;
    max-width: 1200px;
}

/* 图片项样式 */
.store-img-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    /* 添加鼠标手型 */
}

.store-img-item img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* 悬停放大效果 */
.store-img-item:hover img {
    transform: scale(1.15);
    /* 增加放大比例 */
}

/* 动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 依次延迟动画 */
.store-type:nth-child(1) {
    animation-delay: 0.2s;
}

.store-type:nth-child(2) {
    animation-delay: 0.4s;
}

.store-type:nth-child(3) {
    animation-delay: 0.6s;
}

/* 响应式适配 */
@media (max-width: 1200px) {
    .store-images {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0 15px;
    }

    .store-img-item img {
        height: 200px;
    }
}

@media (max-width: 768px) {
    .store-gallery {
        padding: 20px 0;
    }

    .store-type {
        margin-bottom: 40px;
    }

    .store-title {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .store-images {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .store-img-item img {
        height: 160px;
    }
}

@media (max-width: 480px) {
    .store-images {
        grid-template-columns: 1fr;
    }

    .store-img-item img {
        height: 200px;
    }
}

/* ==========
   小按钮基础样式
   - 圆角红色按钮
   - 弹性布局居中
   - 过渡动画效果
   ========== */

.xiaoanniu {
    margin-top: 10px;
    display: inline-flex;
    /* 行内弹性布局 */
    justify-content: center;
    /* 内容水平居中 */
    align-items: center;
    /* 内容垂直居中 */
    flex: 0 1 auto;
    /* 弹性增长和收缩比例 */
    border-radius: 25px;
    /* 圆角边框 */
    background: #555555;
    /* 背景色 */
    padding: 0 25px;
    /* 左右内边距 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0);
    /* 阴影效果 */
    font-size: 16px;
    /* 字体大小 */
    color: #ffffff;
    /* 字体颜色 */
    min-width: 130px;
    /* 最小宽度 */
    height: 45px;
    /* 按钮高度 */
    text-align: center;
    /* 文字居中 */
    transition: all 0.3s ease;
    /* 过渡动画效果 */
    text-decoration: none;
    /* 移除下划线 */
    white-space: nowrap;
    /* 防止文字换行 */
}

/* 按钮悬停效果 - 加深背景色 */
.xiaoanniu:hover {
    background: #e22702;
    /* 悬停时背景色 */
    color: #ffffff;
    /* 悬停时字体颜色 */
}



/* ==========
   移动端适配样式
   - 调整按钮尺寸
   - 优化间距
   - 保持居中对齐
   ========== */
@media (max-width: 768px) {
    .jiameng-floating-btns {
        gap: 10px;
        /* 移动端按钮间距 */
        padding: 0 10px;
        /* 移动端内边距 */
        left: 50%;
        /* 保持水平居中 */
        transform: translateX(-50%);
        /* 修正居中位置 */
        width: calc(100% - 20px);
        /* 考虑padding的宽度计算 */
    }

    .jiameng-guonei-haiwai {
        min-width: 120px;
        /* 移动端按钮最小宽度 */
        height: 38px;
        /* 移动端按钮高度 */
    }
}

/* ==========
   通用板块布局
   - 统一内外边距
   - 区块间距控制
   ========== */

.section-block {
    padding: 40px 0;
    /* 设置上下内边距为60px，左右内边距为0，以创建垂直方向上的空间 */
    margin-bottom: 10px;
    /* 在每个区块之下添加40px的外边距，用以区分不同内容区块 */
}

/* ==========
   加盟流程展示
   - 弹性布局
   - 自适应换行
   - 均匀分布
   ========== */
.process-steps {
    display: flex;
    justify-content: space-between;
    margin: 40px 0;
    flex-wrap: wrap;
}

/* 流程步骤项样式 */
.step-item {
    flex: 1;
    text-align: center;
    padding: 20px;
}

/* 步骤序号样式 */
.step-num {
    font-size: 36px;
    color: #e22702;
    font-weight: bold;
}

/* 步骤描述样式 */
.step-desc {
    font-size: 13px;
    color: #888;
    margin-top: 8px;
    line-height: 1.6;
}

/* ==========
   加盟条件列表
   - 网格布局
   - 自适应列数
   - 统一间距
   ========== */
.conditions-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    padding: 40px 0;
}

/* 条件项样式 */
.condition-item {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 10px;
}

/* ==========
   常见问题展示
   - 居中布局
   - 最大宽度限制
   - 间距控制
   ========== */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 15px;

}

/* 问题项样式 */
.faq-item {
    margin-bottom: 20px;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 8px;
}

/* ==========
   申请表单样式
   - 居中布局
   - 响应式宽度
   - 统一间距
   ========== */
.apply-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 0;
}

/* 表单项组样式 */
.form-group {
    margin-bottom: 20px;
}

/* 输入框样式 */
.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

/* 提交按钮样式 */
.submit-btn {
    background: #e22702;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    cursor: pointer;
    width: 100%;
}

/* ==========
   响应式适配总览
   - 移动端布局调整
   - 间距优化
   - 元素垂直排列
   ========== */
@media (max-width: 768px) {
    .section-block {
        padding: 20px 0;
    }

    .process-steps {
        flex-direction: column;
    }

    .step-item {
        margin-bottom: 20px;
    }
}

/* 加盟流程横向滑动（PC），竖向排列（WAP） */
.process-steps-scroll {
    display: grid;
    gap: 25px;
    padding: 40px 20px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* PC端布局 */
@media (min-width: 1200px) {
    .process-steps-scroll {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* 平板端布局 */
@media (min-width: 769px) and (max-width: 1200px) {
    .process-steps-scroll {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

/* 手机端布局 */
@media (max-width: 767px) {
    .process-steps-scroll {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* 流程步骤项样式优化 */
.step-item {
    position: relative;
    background: #fff;
    border-radius: 15px;
    padding: 30px 25px;
    min-height: 200px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(226, 39, 2, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 图标基础样式 */
.step-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(226, 39, 2, 0.05);
    transition: all 0.3s ease;
}

.step-icon i {
    font-size: 36px;
    color: #e22702;
    transition: all 0.3s ease;
}

/* 悬停效果 */
.step-item:hover .step-icon {
    background: #e22702;
    transform: scale(1.1);
}

.step-item:hover .step-icon i {
    color: #fff;

}

/* 序号样式优化 */
.step-num {
    position: absolute;
    top: -15px;
    right: -15px;
    font-size: 72px;
    font-weight: 800;
    color: rgba(226, 39, 2, 0.08);
    font-family: 'Arial', sans-serif;
    line-height: 1;
    z-index: 0;
    transition: all 0.3s ease;
}

/* 内容样式优化 */
.step-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.step-title {
    font-size: 22px;
    color: #333;
    font-weight: 600;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 12px;
}

.step-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: #e22702;
}

.step-desc {
    color: #666;
    font-size: 16px;
    line-height: 1.8;
}

/* 悬停效果增强 */
.step-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(226, 39, 2, 0.15);
}

.step-item:hover .step-icon i {
    background: #e22702;
    color: #fff;
    transform: scale(1.1);
}

.step-item:hover .step-num {
    color: rgba(226, 39, 2, 0.15);
    transform: scale(1.1);
}

/* 移动端优化 */
@media (max-width: 767px) {
    .step-item {
        padding: 25px 20px;
        min-height: 180px;
    }

    .step-icon {
        width: 60px;
        height: 60px;
    }

    .step-icon i {
        font-size: 28px;
    }

    .step-title {
        font-size: 20px;
    }

    .step-desc {
        font-size: 14px;
    }

    .step-num {
        font-size: 56px;
    }
}

/* 平滑滚动效果 */
html {
    scroll-behavior: auto !important; /* 让JS控制滚动行为，支持惯性效果 */
}

/* 调整定位偏移量，防止固定导航遮挡内容 */
section[id] {
    scroll-margin-top: 80px;
    /* 根据实际导航栏高度调整 */
}

/* ==========
   加盟申请板块样式
   - 左右结构布局
   - 红色背景主题
   - 响应式设计
   ========== */

/* 加盟申请板块容器 */
.apply-section {
    background: linear-gradient(135deg, #fd2222 0%, #f4e200d9 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

/* 背景装饰元素 */
.apply-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 40%;
    height: 200%;
    background: rgba(255, 255, 255, 0.05);
    transform: rotate(15deg);
    z-index: 1;
}

/* 主容器 */
.apply-container {
    max-width: 80%;
    margin: 0 auto;
    padding: 0 0px;
    display: flex;
    align-items: center;
    /* gap: 60px; */
    position: relative;
    z-index: 2;
}

/* 左侧内容区域 */
.apply-left {
    flex: 1;
    color: #fff;
}

/* 左侧内容容器 */
.apply-content {
    max-width: 500px;
}

/* 主标题样式 */
.apply-title {
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 20px;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.0);
}

/* 副标题样式 */
.apply-subtitle {
    font-size: 18px;
    margin: 0 0 40px;
    opacity: 0.9;
    line-height: 1.6;
}

/* 特色功能列表 */
.apply-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 特色功能项 */
.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.feature-item:last-child {
    border-bottom: none;
}

/* 特色功能图标 */
.jiameng-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.jiameng-icon svg {
    color: #fff;
    width: 24px;
    height: 24px;
}

.feature-item:hover .jiameng-icon {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

/* 特色功能文字 */
.feature-item span {
    font-size: 16px;
    font-weight: 500;
}

/* 右侧表单区域 */
.apply-right {
    flex: 1;
    max-width: 700px;
}

/* 表单容器 */
.form-container {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* 表单容器装饰 */
.form-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    border-radius: 22px;
    z-index: -1;
}

/* iframe样式 */
.apply-iframe {
    border-radius: 15px;
    background: #fff;
    min-height: 600px;
}

/* ==========
   响应式适配
   - 平板端布局调整
   - 移动端垂直排列
   ========== */

/* 平板端适配 */
@media (max-width: 1200px) {
    .apply-container {
        gap: 40px;
        padding: 0 15px;
    }

    .apply-title {
        font-size: 36px;
    }

    .apply-subtitle {
        font-size: 16px;
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
    .apply-section {
        padding: 60px 0;
    }

    .apply-container {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .apply-left {
        order: 1;
    }

    .apply-right {
        order: 2;
        max-width: 100%;
    }

    .apply-content {
        max-width: 100%;
    }

    .apply-title {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .apply-subtitle {
        font-size: 15px;
        margin-bottom: 30px;
    }

    .apply-features {
        gap: 15px;
    }

    .feature-item {
        justify-content: center;
        padding: 12px 0;
    }

    .jiameng-icon {
        width: 40px;
        height: 40px;
    }

    .jiameng-icon svg {
        width: 20px;
        height: 20px;
    }

    .feature-item span {
        font-size: 14px;
    }

    .form-container {
        padding: 20px;
        border-radius: 15px;
    }

    .apply-iframe {
        height: 500px;
        min-height: 500px;
    }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
    .apply-section {
        padding: 40px 0;
    }

    .apply-container {
        padding: 0 10px;
    }

    .apply-title {
        font-size: 24px;
    }

    .apply-subtitle {
        font-size: 14px;
    }

    .form-container {
        padding: 15px;
    }

    .apply-iframe {
        height: 450px;
        min-height: 450px;
    }
}

/* 加盟咨询板块样式 */
#consultation {
    padding: 40px 0;
    text-align: center;
}

#consultation .consultation-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 10px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    #consultation {
        padding: 20px 0;
    }

    #consultation .consultation-content {
        max-width: 100%;
        padding: 10px;
    }
}

/* 加盟条件板块基础样式 */
.conditions-grid {
    display: grid;
    gap: 24px;
    padding: 30px 20px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* 响应式布局 */
@media (min-width: 1200px) {
    .conditions-grid {
        grid-template-columns: repeat(3, 1fr);
        /* PC端三列 */
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .conditions-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 平板端两列 */
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .conditions-grid {
        grid-template-columns: 1fr;
        /* 手机端单列 */
        gap: 16px;
        padding: 20px 15px;
    }
}

/* 条件卡片样式 */
.condition-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0;
}

.condition-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 序号样式 */
.condition-index {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 48px;
    font-weight: 800;
    color: rgba(226, 39, 2, 0.08);
    font-family: 'Arial', sans-serif;
    line-height: 1;
}

/* 标题样式 */
.condition-title {
    font-size: 20px;
    color: #333;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(226, 39, 2, 0.1);
    position: relative;
}

.condition-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 40px;
    height: 2px;
    background: #e22702;
}

/* 内容列表样式 */
.condition-content ul {
    margin: 0;
    padding-left: 20px;
}

.condition-content li {
    color: #666;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 10px;
    position: relative;
}

.condition-content li::before {
    content: '';
    position: absolute;
    left: -18px;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e22702;
    opacity: 0.6;
}

/* 移动端优化 */
@media (max-width: 767px) {
    .condition-card {
        padding: 20px;
    }

    .condition-index {
        font-size: 36px;
        top: 15px;
        right: 15px;
    }

    .condition-title {
        font-size: 18px;
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    .condition-content li {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 8px;
    }
}

/* 费用表格样式 */
.fee-table-wrapper {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 15px;
    overflow-x: auto;
}

.fee-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

/* 表头样式优化 */
.fee-table thead th {
    background: #e22702;
    color: #fff;
    padding: 15px 20px;
    /* 增加表头内边距 */
    font-weight: 600;
    text-align: center;
    border: none;
    font-size: 18px;
    line-height: 1.4;
}

/* 表头小字体优化 */
.fee-table th small {
    font-size: 13px;
    opacity: 0.8;
    display: block;
    margin-top: 4px;
    font-weight: normal;
}

/* 表格内容样式优化 */
.fee-table td {
    padding: 12px 15px;
    /* 常规单元格内边距 */
    text-align: center;
    border: 1px solid #eee;
    color: #333;
    font-size: 13px;
    /* 内容字体调小 */
    line-height: 1.5;
}

/* 第一列（费用项目）样式 */
.fee-table td:first-child {
    font-weight: 600;
    text-align: left;
    background: #f8f8f8;
    padding: 12px 25px;
    /* 增加左右内边距 */
    font-size: 14px;
    /* 保持费用项目字体稍大 */
    padding: 0px 40px;
}

/* 最后一列（说明）样式 */
.fee-table td:last-child {
    text-align: left;
    color: #666;
    padding: 12px 8px;
    /* 说明列增加内边距 */
    font-size: 13px;
    line-height: 1.5;
    /* left: 10px; */
}

/* 数字金额列样式 */
.fee-table td:not(:first-child):not(:last-child) {
    font-family: Arial, sans-serif;
    /* 数字使用等宽字体 */
    padding: 12px -10px;
    /* 数字列减少内边距使其更紧凑 */
}

/* 合计行样式优化 */
.fee-table tr.total-row {
    background: #fff9f8;
    /* 浅色背景 */
    position: relative;
}

.fee-table tr.total-row td {
    font-weight: 700;
    /* 加粗字体 */
    font-size: 15px;
    /* 字号稍大 */
    color: #e22702;
    /* 使用品牌红色 */
    border-top: 2px solid #e22702;
    /* 上边框加粗 */
    border-bottom: 2px solid #e22702;
    /* 下边框加粗 */
    padding: 15px 12px;
    /* 增加内边距 */
}

/* 合计行第一列特殊样式 */
.fee-table tr.total-row td:first-child {
    background: #e22702;
    /* 品牌红色背景 */
    color: #fff;
    /* 白色文字 */
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    /* 文字居中 */
}

/* 合计行最后一列说明文字样式 */
.fee-table tr.total-row td:last-child {
    color: #666;
    /* 说明文字保持灰色 */
    font-size: 13px;
    font-weight: normal;
}

/* 合计行数字列样式 */
.fee-table tr.total-row td:not(:first-child):not(:last-child) {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .fee-table tr.total-row td {
        font-size: 14px;
        padding: 12px 8px;
    }

    .fee-table tr.total-row td:first-child {
        font-size: 14px;
    }

    .fee-table tr.total-row td:not(:first-child):not(:last-child) {
        font-size: 14px;
    }

    .fee-table tr.total-row td:last-child {
        font-size: 12px;
    }
}

/* 温馨提示容器样式 */
.fee-notice {
    margin-top: 30px;
    padding: 20px 25px;
    background: #fff9f8;
    border-radius: 10px;
    border-left: 4px solid #e22702;
    box-shadow: 0 2px 12px rgba(226, 39, 2, 0.08);
    position: relative;
    transition: all 0.3s ease;
}

/* 温馨提示文字样式 */
.fee-notice .warning {
    color: #666;
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
    padding-left: 30px;
    position: relative;
}

/* 添加提示图标 */
.fee-notice .warning::before {
    content: "!";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background: #e22702;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
}


/* 移动端适配 */
@media (max-width: 768px) {
    .fee-notice {
        margin-top: 20px;
        padding: 15px 20px;
    }

    .fee-notice .warning {
        font-size: 13px;
        padding-left: 25px;
    }

    .fee-notice .warning::before {
        width: 18px;
        height: 18px;
        font-size: 11px;
    }
}

/* ==========
   移动端适配
   ========== */

/* 移动端适配 */
@media (max-width: 768px) {
    .fee-table-wrapper {
        margin: 15px 15px;
        /* 负边距让表格占满屏幕 */
        padding: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* iOS滚动优化 */
    }

    /* 表格基础样式调整 */
    .fee-table {
        min-width: 600px;
        /* 确保最小宽度可显示完整内容 */
        font-size: 12px;
        /* 整体字号调小 */
    }

    /* 表头适配 */
    .fee-table thead th {
        padding: 10px 8px;
        font-size: 13px;
        white-space: nowrap;
        /* 防止文字换行 */
    }

    .fee-table th small {
        font-size: 11px;
        margin-top: 2px;
    }

    /* 表格内容适配 */
    .fee-table td {
        padding: 8px 6px;
        font-size: 12px;
    }

    /* 第一列（费用项目）样式调整 */
    .fee-table td:first-child {
        padding: 8px 10px;
        font-size: 12px;
        width: 80px;
        /* 固定宽度 */
        white-space: nowrap;
    }

    /* 金额列样式 */
    .fee-table td:not(:first-child):not(:last-child) {
        padding: 8px 4px;
        width: 60px;
        /* 固定宽度 */
    }

    /* 说明列样式 */
    .fee-table td:last-child {
        padding: 8px;
        font-size: 11px;
        line-height: 1.4;
        min-width: 120px;
        /* 最小宽度 */
    }

    /* 高亮行图标调整 */
    .fee-table svg.icon {
        width: 14px;
        height: 14px;
        margin-left: 4px;
        vertical-align: middle;
    }

    /* 合计行样式 */
    .fee-table tr.total-row td {
        font-size: 12px;
        font-weight: 600;
    }

    /* 移动端自适应 横向滚动提示 */
    .fee-table-wrapper::after {
        content: '← 左右滑动查看更多 →';
        display: block;
        text-align: center;
        color: #999;
        font-size: 12px;
        padding: 10px 0;
        background: #fff;
        position: sticky;
        left: 0;
        width: 100%;
    }
}

/* 超小屏幕适配 */
@media (max-width: 375px) {
    .fee-table {
        min-width: 500px;
        /* 更小的最小宽度 */
    }

    .fee-table td:first-child {
        width: 70px;
        font-size: 11px;
    }

    .fee-table td:not(:first-child):not(:last-child) {
        width: 50px;
    }
}

/* svg图标样式 */
svg.icon {
    width: 20px;
    height: auto;
    /* 保持比例 */
    margin-left: 5px;
    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1), fill 0.3s;
}

/* svg图标 悬停时旋转并变色示例 */
svg.icon:hover {
    transform: rotate(20deg) scale(4);
    fill: #e22702;
}

/* ========== 
    图片水印样式 
    - 通过伪元素添加全局水印 
    - 支持自定义图片地址 
    ========== */
/* 水印背景样式 */
.watermark-bg {
    position: relative;
    z-index: 1;
    overflow: visible;
    /* 修改为visible确保水印不被裁切 */
}

.watermark-bg::after {
    content: ""; /* 设置伪元素内容为空 */
    position: absolute; /* 绝对定位，相对于父元素 */
    left: -20%; /* 左偏移量，使其超出父元素边界 */
    top: -20%; /* 顶部偏移量，使其超出父元素边界 */
    width: 140%; /* 宽度，使其覆盖更大范围 */
    height: 140%; /* 高度，使其覆盖更大范围 */
    pointer-events: none; /* 禁用鼠标事件，使其不影响下层元素交互 */
    z-index: -1; /* 将水印置于内容下层 */
    background-image: url('/static/images/logo.png'); /* 水印图片路径 */
    background-repeat: repeat; /* 水印图片重复平铺 */
    background-position: 0 0; /* 水印图片起始位置 */
    background-size: 200px auto; /* 水印图片尺寸，宽度200px，高度自适应 */
    opacity: 0.03; /* 水印透明度 */
    transform: rotate(338deg) scale(0.8); /* 旋转并缩放水印 */
    transform-origin: center center; /* 设置旋转和缩放的中心点 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    .watermark-bg::after {
        --watermark-gap: 150px;
        /* 移动端适当减小间距 */
        background-size: 80px auto;
        /* 移动端稍微减小水印尺寸 */
    }
}

/* 流程时间线容器 */
.process-timeline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

/* 流程项样式 */
.timeline-item {
    flex: 1;
    text-align: center;
    padding: 20px;
    position: relative;
}

/* 流程序号 */
.timeline-number {
    width: 70px;
    height: 70px;
    background: #e22702;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    /* font-weight: bold; */
    margin: 0 auto 20px;
    position: relative;
    z-index: 2;
}

/* 连接线 */
.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 60px;
    right: -50%;
    width: 100%;
    height: 2px;
    background: #e22702;
    z-index: 1;
}

/* 内容样式 */
.timeline-content h3 {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    transition: all 0.3s ease; /* 添加过渡动画 */
    cursor: pointer; /* 鼠标指针样式 */
}

/* h3标题悬停效果 */
.timeline-content h3:hover {
    font-size: 26px; /* 字体放大 */
    color: #e22702; /* 颜色变红 */
    transform: scale(1.1); /* 整体放大效果 */
}

.timeline-content p {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
    transition: all 0.3s ease; /* 添加过渡动画 */
    cursor: pointer; /* 鼠标指针样式 */
}

/* p段落悬停效果 */
.timeline-content p:hover {
    font-size: 16px; /* 字体放大 */
    color: #e22702; /* 颜色变红 */
    transform: scale(1.05); /* 轻微放大效果 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    .process-timeline {
        flex-direction: column;
        padding: 20px 0;
    }

    .timeline-item {
        width: 100%;
        margin-bottom: 0px;
    }

    .timeline-item:not(:last-child)::after {
        top: auto;
        bottom: -15px;
        left: 50%;
        width: 2px;
        height: 30px;
        transform: translateX(-50%);
    }

    .timeline-number {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .timeline-content h3 {
        font-size: 18px;
    }
}

/* 平板端优化 */
@media (min-width: 769px) and (max-width: 1200px) {
    .process-timeline {
        flex-wrap: wrap;
    }

    .timeline-item {
        flex: 0 0 33.333%;
        margin-bottom: 40px;
    }
}

/* 移动端优化 */
@media (max-width: 480px) {
    .timeline-content p {
        font-size: 13px;
    }

    .timeline-number {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* 悬停效果 */
.timeline-item:hover .timeline-number {
    transform: scale(1.1);
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(226, 39, 2, 0.3);
}

/* 添加弹出层样式 */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor: pointer;
}

.popup-image {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.popup-overlay.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.popup-overlay.active .popup-image {
    transform: scale(1);
}

/* 添加关闭按钮 */
.popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.popup-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.popup-close::before,
.popup-close::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: #fff;
    transform: rotate(45deg);
}

.popup-close::after {
    transform: rotate(-45deg);
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
    .popup-close {
        width: 32px;
        height: 32px;
        top: 15px;
        right: 15px;
    }

    .popup-close::before,
    .popup-close::after {
        width: 16px;
    }
}
/* ==========
   AI餐饮学院
   - 页面样式
   ========== */

   /* 动态背景 */
   .bg-animated {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(45deg, #0a0a0a, #100465, #282828);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
}

   .bg-particles {
       position: absolute;
       width: 100%;
       height: 100%;
       overflow: hidden;
   }

   .particle {
       position: absolute;
       width: 2px;
       height: 2px;
       background: rgba(64, 224, 255, 0.6);
       border-radius: 50%;
       animation: float 6s infinite linear;
   }

   @keyframes gradientShift {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
   }

   @keyframes float {
       0% { transform: translateY(100vh) translateX(0px); opacity: 0; }
       10% { opacity: 1; }
       90% { opacity: 1; }
       100% { transform: translateY(-100px) translateX(100px); opacity: 0; }
   }

      /* 主要内容区域 */
   .hero {
       min-height: 90vh;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 2rem;
       position: relative;
   }

   .hero-container {
       max-width: 1200px;
       width: 100%;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 4rem;
       align-items: center;
       z-index: 2;
   }

   .hero-left {
       text-align: left;
   }

   .hero-left h1 {
    font-size: clamp(6rem, 6vw, 4rem);
    font-weight: 900;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #40e0ff, #7c3aed, #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textGlow 3s ease-in-out infinite alternate;
    line-height: 1.2;
}

    .hero-description {
        font-size: clamp(2rem, 2.5vw, 1.4rem);
        line-height: 1.6;
        margin-bottom: 4rem;
        color: rgba(255, 255, 255, 0.8);
        animation: fadeInUp 1s ease 0.5s both;
    }

   .hero-cta {
       animation: fadeInUp 1s ease 1s both;
   }

   .hero-right {
       display: flex;
       justify-content: center;
       align-items: center;
       position: relative;
   }

   /* AI动画容器 */
   .ai-animation-container {
       width: 400px;
       height: 400px;
       position: relative;
       animation: fadeInUp 1s ease 1.5s both;
   }

   /* AI大脑核心 */
   .ai-brain {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 120px;
       height: 120px;
   }

   .brain-core {
       width: 100%;
       height: 100%;
       background: radial-gradient(circle, #40e0ff, #7c3aed);
       border-radius: 50%;
       animation: pulse 2s ease-in-out infinite;
       box-shadow: 
           0 0 30px rgba(64, 224, 255, 0.6),
           0 0 60px rgba(124, 58, 237, 0.4),
           inset 0 0 20px rgba(255, 255, 255, 0.2);
   }

   @keyframes pulse {
       0%, 100% { transform: scale(1); }
       50% { transform: scale(1.1); }
   }

   /* 神经网络节点 */
   .neural-network {
       position: absolute;
       width: 400px;
       height: 400px;
       top: -140px;
       left: -140px;
   }

   .neuron {
       position: absolute;
       width: 12px;
       height: 12px;
       background: #40e0ff;
       border-radius: 50%;
       left: var(--x);
       top: var(--y);
       animation: neuronPulse 3s ease-in-out infinite;
       animation-delay: var(--delay);
       box-shadow: 0 0 15px rgba(64, 224, 255, 0.8);
   }

   @keyframes neuronPulse {
       0%, 100% { 
           transform: scale(1);
           opacity: 0.6;
       }
       50% { 
           transform: scale(1.5);
           opacity: 1;
       }
   }

   /* 神经连接线 */
   .neural-connections {
       position: absolute;
       width: 400px;
       height: 400px;
       top: -140px;
       left: -140px;
       pointer-events: none;
   }

   .connection {
       fill: none;
       stroke: rgba(64, 224, 255, 0.4);
       stroke-width: 2;
       stroke-dasharray: 5, 5;
       animation: connectionFlow 4s linear infinite;
   }

   @keyframes connectionFlow {
       0% { stroke-dashoffset: 0; }
       100% { stroke-dashoffset: -20; }
   }

   /* 餐饮图标环绕 */
   .restaurant-icons {
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
   }

   .icon-orbit {
       position: absolute;
       top: 50%;
       left: 50%;
       width: var(--orbit-radius);
       height: var(--orbit-radius);
       transform: translate(-50%, -50%);
       animation: rotate var(--duration) linear infinite;
   }

   .restaurant-icon {
       position: absolute;
       top: 0;
       left: 50%;
       transform: translateX(-50%);
       font-size: 2rem;
       animation: counterRotate var(--duration) linear infinite reverse;
       filter: drop-shadow(0 0 10px rgba(64, 224, 255, 0.6));
   }

   @keyframes rotate {
       from { transform: translate(-50%, -50%) rotate(0deg); }
       to { transform: translate(-50%, -50%) rotate(360deg); }
   }

   @keyframes counterRotate {
       from { transform: translateX(-50%) rotate(0deg); }
       to { transform: translateX(-50%) rotate(-360deg); }
   }

   /* 数据流效果 */
   .data-streams {
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       overflow: hidden;
   }

   .data-stream {
       position: absolute;
       width: 2px;
       height: 100px;
       background: linear-gradient(to bottom, transparent, #40e0ff, transparent);
       animation: streamFlow var(--duration) linear infinite;
       animation-delay: var(--delay);
       border-radius: 1px;
   }

   .data-stream:nth-child(1) { left: 20%; transform: rotate(45deg); }
   .data-stream:nth-child(2) { left: 80%; transform: rotate(-45deg); }
   .data-stream:nth-child(3) { left: 60%; transform: rotate(90deg); }
   .data-stream:nth-child(4) { left: 40%; transform: rotate(-90deg); }

   @keyframes streamFlow {
       0% { 
           opacity: 0;
           transform: translateY(-50px) rotate(var(--rotation, 0deg));
       }
       50% { 
           opacity: 1;
       }
       100% { 
           opacity: 0;
           transform: translateY(450px) rotate(var(--rotation, 0deg));
       }
   }

   /* AI标识 */
   .ai-badge {
       position: absolute;
       top: 20px;
       right: 20px;
       width: 60px;
       height: 60px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(64, 224, 255, 0.1);
       border: 2px solid rgba(64, 224, 255, 0.3);
       border-radius: 50%;
       backdrop-filter: blur(10px);
   }

   .ai-text {
       font-size: 1.2rem;
       font-weight: bold;
       color: #40e0ff;
   }

   .ai-pulse {
       position: absolute;
       width: 100%;
       height: 100%;
       border: 2px solid rgba(64, 224, 255, 0.6);
       border-radius: 50%;
       animation: aiPulse 2s ease-out infinite;
   }

   @keyframes aiPulse {
       0% {
           transform: scale(1);
           opacity: 1;
       }
       100% {
           transform: scale(1.5);
           opacity: 0;
       }
   }

   @keyframes textGlow {
       0% { filter: brightness(1); }
       100% { filter: brightness(1.2) drop-shadow(0 0 20px rgba(64, 224, 255, 0.3)); }
   }

   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   /* CTA按钮 */
   .cta-buttons {
       display: flex;
       gap: 1.5rem;
       justify-content: center;
       flex-wrap: wrap;
       animation: fadeInUp 1s ease 1.5s both;
   }

   .btn {
    padding: 1rem 2rem;
    font-size: 1.8rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: inline-block;
}

   .btn-primary {
    background: linear-gradient(135deg, #40e0ff, #7c3aed);
    color: white;
    box-shadow: 0 10px 30px rgba(64, 224, 255, 0.3);
}

   .btn-secondary {
       background: transparent;
       color: #40e0ff;
       border: 2px solid #40e0ff;
   }

   .btn:hover {
       transform: translateY(-3px);
       box-shadow: 0 15px 40px rgba(64, 224, 255, 0.4);
   }

   .btn::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
       transition: left 0.5s;
   }

   .btn:hover::before {
       left: 100%;
   }

   /* 特性卡片区域 */
   .features {
       padding: 5rem 0rem 8rem;
       max-width: 1200px;
       margin: 0 auto;
   }

   .features h2 {
       text-align: center;
       font-weight: 600;
       font-size: clamp(2rem, 5vw, 4rem);
       margin-bottom: 4rem;
       background: linear-gradient(135deg, #40e0ff, #7c3aed);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }

   .features-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 4rem;
       margin-top: 3rem;
       margin: 2rem 0rem 6rem;
   }

   .feature-card {
       background: rgba(255, 255, 255, 0.05);
       backdrop-filter: blur(10px);
       border: 1px solid rgba(64, 224, 255, 0.2);
       border-radius: 20px;
       padding: 2.3rem 2rem 2.3rem;
       text-align: center;
       transition: all 0.3s ease;
       position: relative;
       overflow: hidden;
   }

   .feature-card:hover {
       transform: translateY(-10px);
       border-color: rgba(64, 224, 255, 0.5);
       box-shadow: 0 20px 40px rgba(64, 224, 255, 0.2);
   }

   .feature-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 3px;
       background: linear-gradient(90deg, #40e0ff, #7c3aed, #ff6b6b);
       transform: scaleX(0);
       transition: transform 0.3s ease;
   }

   .feature-card:hover::before {
       transform: scaleX(1);
   }

   .feature-icon2 {
       font-size: 3rem;
       margin-inline: auto;
       margin-bottom: 1rem;
       color: #40e0ff;
   }

   .feature-card h3 {
       font-size: 2.4rem;
       margin-inline: max(1rem, 5vw);
       margin-bottom: 1rem;
       margin: 2rem 0rem 2rem;
       color: #ffffff;
   }

   .feature-card p {
       color: rgba(255, 255, 255, 0.7);
       font-size: 14px;
       vertical-align: baseline;
       line-height: clamp(1rem, 5vw, 2.6rem);
   }

   /* 统计数据区域 */
   .stats {
       padding: 5rem 2rem;
       background: rgba(255, 255, 255, 0.02);
       backdrop-filter: blur(10px);
   }

   .stats-container {
       max-width: 80%;
       margin: 0 auto;
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       gap: 2rem;
       text-align: center;
   }

   .stat-item {
       /* padding: 2rem; */
   }

   .stat-number {
       font-size: clamp(2rem, 5vw, 4rem);
       font-weight: bold;
       color: #40e0ff;
       margin-bottom: 1rem;
       counter-reset: number var(--number);
   }

   .stat-label {
       font-size: 2rem;
       color: rgba(255, 255, 255, 0.8); 
   }

   /* 底部CTA */
   .bottom-cta {
       padding: 20vh 0 30vh; /* em; */ /* Removed invalid 'em;' */
       text-align: center;
       /* background: linear-gradient(135deg, rgba(64, 224, 255, 0.1), rgba(124, 58, 237, 0.1)); */
   }

   .bottom-cta h2 {
       font-size: clamp(2rem, 5vw, 6rem);
       font-weight: 900;
       text-align: center;
       margin: 5rem 0 2rem;
       background: linear-gradient(75deg, #40e0ff, #7c3aed, #ff6b6b);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }

   .bottom-cta p {
       text-align: center;
       font-size: 2rem;
       margin-bottom: 4rem;
       color: rgba(255, 255, 255, 0.8);
   }

   /* 移动端适配 */
   @media (max-width: 768px) {
       .navbar {
           padding: 1rem;
       }

       .nav-links {
           display: none;
       }

       .hero {
           padding: 1rem;
           min-height: 90vh;
       }

       .hero-container {
           grid-template-columns: 1fr;
           gap: 2rem;
           text-align: center;
       }

       .hero-left {
           text-align: center;
           order: 2;
       }

       .hero-right {
           order: 1;
       }

       .ai-animation-container {
           width: 300px;
           height: 300px;
       }

       .brain-core {
           width: 80px;
           height: 80px;
       }

       .neural-network {
           width: 300px;
           height: 300px;
           top: -110px;
           left: -110px;
       }

       .neural-connections {
           width: 300px;
           height: 300px;
           top: -110px;
           left: -110px;
       }

       .restaurant-icon {
           font-size: 1.5rem;
       }

       .ai-badge {
           width: 50px;
           height: 50px;
           top: 10px;
           right: 10px;
       }

       .ai-text {
           font-size: 1rem;
       }

       .cta-buttons {
           flex-direction: column;
           align-items: center;
       }

       .btn {
           width: 100%;
           max-width: 300px;
       }

       .features {
           padding: 3rem 1rem;
       }

       .stats {
           padding: 3rem 1rem;
       }

       .bottom-cta {
           padding: 3rem 1rem; /* Removed 'bottom-cta' text node */
       }
   }

   @media (max-width: 480px) {
       .ai-animation-container {
           width: 250px;
           height: 250px;
       }

       .brain-core {
           width: 60px;
           height: 60px;
       }

       .neural-network {
           width: 250px;
           height: 250px;
           top: -95px;
           left: -95px;
       }

       .neural-connections {
           width: 250px;
           height: 250px;
           top: -95px;
           left: -95px;
       }

       .restaurant-icon {
           font-size: 1.2rem;
       }

       .hero-left h1 {
           font-size: clamp(2rem, 8vw, 50rem);
       }

       .hero-description {
           font-size: 1.2rem;
       }
   }

   /* 滚动指示器 */
   .scroll-indicator {
       position: absolute;
       bottom: 2rem;
       left: 50%;
       transform: translateX(-50%);
       color: rgba(255, 255, 255, 0.6);
       animation: bounce 2s infinite;
   }

   @keyframes bounce {
       0%, 20%, 50%, 80%, 100% {
           transform: translateX(-50%) translateY(0);
       }
       40% {
           transform: translateX(-50%) translateY(-10px);
       }
       60% {
           transform: translateX(-50%) translateY(-5px);
       }
   }
