/* ==================== 分类信息模板样式（专属模板使用） ==================== */
.ci-wrapper {
    max-width: 938px;
    margin: 0 auto;
    padding: 0 25px;
    box-sizing: border-box;
    font-family: 'Microsoft YaHei', sans-serif;
}

.ci-hero {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.ci-hero__title {
    font-size: 50px;
    color: #ff3333;
    letter-spacing: 25px;
    font-weight: bold;
    margin: 0;
    line-height: 1.2;
}

.ci-section {
    padding-top: 20px;
}

.ci-title {
    font-size: 25px;
    letter-spacing: 25px;
    font-weight: normal;
    margin: 0 0 15px 0;
}

.ci-title--blue {
    color: #3d61a5;
}

.ci-subtitle {
    font-size: 25px;
    letter-spacing: 18px;
    font-weight: bold;
    margin: 0 0 15px 119px;
}

.ci-subtitle--red {
    color: #ff3333;
}

.ci-list {
    list-style: none;
    padding: 0 0 0 81px;
    margin: 0;
    font-size: 14px;
    color: #333;
    line-height: 35px;
}

.ci-grid--steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20px;
}

.ci-card {
    width: 48%;
    margin-bottom: 15px;
    font-size: 13px;
    color: #333;
    font-weight: bold;
    letter-spacing: 1px;
}

    .ci-card img {
        width: 100%;
        height: auto;
        display: block;
    }

    .ci-card p {
        margin: 10px 0 0 0;
        font-size: 13px;
        line-height: 1.4;
    }

    .ci-card:last-child p {
        font-size: 16px;
    }

.ci-packaging {
    padding-left: 124px;
    margin-top: 5px;
}

    .ci-packaging img {
        max-width: 700px;
        width: 100%;
        height: auto;
    }

.ci-usage {
    font-size: 16px;
    color: #333;
    letter-spacing: 1px;
    line-height: 35px;
    padding-bottom: 20px;
}

    .ci-usage p {
        margin: 0;
    }

.ci-qrcode {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 40px;
}

.ci-qrcode__item {
    width: 265px;
    max-width: 45%;
    text-align: center;
    margin: 20px 20px 0 20px;
}

    .ci-qrcode__item img {
        width: 100%;
        height: auto;
    }

.ci-qrcode__desc {
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: #3d61a5;
    letter-spacing: 5px;
    font-weight: bold;
    line-height: 35px;
    margin-top: 20px;
}

/* ==================== 分类信息默认模板样式 ==================== */
/* 整体容器 */
.ci-default-wrap {
    width: 85%;
    margin: 0 auto;
}

/* 小节通用间距 */
.ci-default-section {
    margin-top: 70px;
}

/* 小节蓝色标题（产品用途、使用方法） */
.ci-default-section__title {
    font-size: 28px;
    letter-spacing: 25px;
    font-weight: bold;
    margin: 0 0 15px 0;
}

.ci-default-section__title--blue {
    color: #3d61a5;
}

/* 产品用途列表 */
.ci-default-uselist {
    /* list-style: none; */ /* 若要去掉圆点请取消注释 */
    padding-left: 80px; /* 【可调】左边距 */
    margin: 0;
    font-size: 18px; /* 【可调】字体大小 */
    color: #333; /* 【可调】字体颜色 */
    line-height: 35px; /* 【可调】行间距 */
}

/* 烫印操作示意图标题（红色） */
.ci-default-stepstitle {
    font-size: 25px;
    color: #3d61a5;
    letter-spacing: 18px;
    font-weight: bold;
    margin: 0 0 25px 0; /* 【可调】标题与下方图片间距 */
    text-align: left;
}

/* 步骤图片网格（两张一行，居中） */
.ci-default-stepsgrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* 【可调】图片左右间距 */
    margin-top: 15px;
    margin-bottom: 15px;
}

.ci-default-stepcard {
    width: 48%;
    margin-bottom: 10px; /* 【可调】图片上下间距 */
}

.ci-default-stepcard__img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ddd; /* 浅灰边框 */
    border-radius: 4px; /* 小圆角 */
}

.ci-default-stepcard__text {
    margin: 10px 0 0 0;
    font-size: 13px; /* 【可调】步骤文字大小 */
    color: #333; /* 【可调】步骤文字颜色 */
    line-height: 1.4;
}

/* 第四步文字格外突出 */
.ci-default-stepcard:last-child .ci-default-stepcard__text {
    font-size: 18px;
    color: #e60012;
    font-weight: bold;
}

/* 产品包装示意图标题（红色） */
.ci-default-packtitle {
    font-size: 25px;
    color: #3d61a5;
    letter-spacing: 18px;
    font-weight: bold;
    margin: 0 0 15px 0;
    text-align: left;
}

/* 包装图片容器（左对齐，左边距可调） */
.ci-default-packimg {
    position: relative;
    display: inline-block;
    text-align: left;
    margin-left: 0px; /* 【可调】整体左侧距离 */
    margin-top: 15px;
    margin-bottom: 15px;
}

    /* 去掉包装图本身的边框和圆角 */
    .ci-default-packimg img {
        max-width: 700px;
        width: 100%;
        height: auto;
        display: block;
        border: none;
        border-radius: 0;
    }

/* ========== 包装图四向可调定位文本 ========== */
.ci-pack-text {
    position: absolute;
    white-space: nowrap;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 原来是 center，改为 flex-start 左对齐 */
}

.ci-pack-text-main {
    font-size: 18px; /* 【可调】主文字大小 */
    color: #333; /* 【可调】主文字颜色 */
    display: block;
}

.ci-pack-text-sub {
    font-size: 12px; /* 【可调】副文字大小 */
    color: #666; /* 【可调】副文字颜色 */
    display: block;
}

/* 上方文字定位 */
.ci-pack-text-top {
    top: 38%; /* 【可调】距离图片顶部的偏移 */
    left: 115%;
    transform: translateX(-50%);
}
/* 右侧文字定位 */
.ci-pack-text-right {
    top: 60%;
    right: -32%; /* 【可调】距离图片右侧的偏移 */
    transform: translateY(-50%);
}
/* 下方文字定位 */
.ci-pack-text-bottom {
    bottom:-5px; /* 【可调】距离图片底部的偏移 */
    left: 80%;
    transform: translateX(-50%);
}
/* 左侧文字定位 */
.ci-pack-text-left {
    top: 93%;
    left: 40px; /* 【可调】距离图片左侧的偏移 */
    transform: translateY(-50%);
}

/* 使用方法文字 */
.ci-default-usagetext {
    font-size: 16px;
    color: #333;
    letter-spacing: 1px;
    line-height: 35px;
}

/* 微信/抖音二维码区域 */
.ci-default-qrcode {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 40px;
    margin-top: 20px;
}

.ci-default-qrcode__item {
    width: 265px;
    max-width: 45%;
    text-align: center;
    margin: 20px;
}

    .ci-default-qrcode__item img {
        width: 100%;
        height: auto;
    }

.ci-default-qrcode__desc {
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: #3d61a5;
    letter-spacing: 5px;
    font-weight: bold;
    line-height: 35px;
    margin-top: 20px;
}

.ci-pack-warning {
    color: #e60012;
}

/* ==================== 定制流程图（纯CSS，带箭头图标动效） ==================== */

.ci-custom-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 25px;
    margin-bottom: 25px;
    border-top: 1px solid #d0d5dd; /* 90%宽的横线 */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 45px; /* 横线与内容之间的间距 */
}

/* 单个步骤 */
.ci-flow-step {
    width: 30%; /* 三列布局 */
    min-width: 200px;
    margin-bottom: 40px; /* 【可调】上下间距 */
    display: flex;
    align-items: flex-start;
    gap: 0;
    position: relative;
}

/* 图标列 */
.ci-flow-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3d61a5 0%, #5a7fc2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(61, 97, 165, 0.3);
}

    .ci-flow-icon span {
        font-size: 22px;
        line-height: 1;
    }

/* 箭头线（纯CSS三角形） */
.ci-flow-arrow {
    position: absolute;
    top: 50%;
    right: -18px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #3d61a5;
    z-index: 1;
}

/* 最后一个步骤不显示箭头 */
.ci-flow-step:last-child .ci-flow-arrow {
    display: none;
}

/* 卡片内容 */
.ci-flow-card {
    flex: 1;
    background: #f8f9fb;
    border: 1px solid #e8ecf1;
    border-radius: 10px;
    padding: 16px 18px;
    margin-left: 20px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}
    /* 卡片悬停微动效 */
    .ci-flow-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    }

/* 步骤编号（卡片内右上角） */
.ci-flow-num {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 28px;
    font-weight: 800;
    color: rgba(61, 97, 165, 0.10);
    line-height: 1;
    pointer-events: none;
}

/* 步骤标题 */
.ci-flow-title {
    font-size: 15px;
    color: #3d61a5;
    font-weight: bold;
    margin: 0 0 6px 0;
}

/* 步骤描述 */
.ci-flow-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.8;
    margin: 0;
}