/* 基础样式重置 */
body,ul, li, p { margin: 0; padding: 0; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }

/* header 图片区域 */
.header { margin: 0; padding: 0; }
    .header img.ad { width: 100%; object-fit: cover; /* 保证不变形，填充满 */ display: block; }

/* 导航条 */
.nav { background: #2c3e50; position: relative; }
    .nav ul { display: flex; justify-content: center; align-items: center; }
    .nav li { margin: 0 20px; }
    .nav a { display: block; padding: 12px 0; font-size: 24px; color: #ecf0f1; transition: color 0.3s; }
        .nav a:hover { color: #f39c12; }

/* 容器样式 */
.container { max-width: 960px; width: 100%; min-height:600px; margin:0 auto; background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; }

.content { padding: 20px; }

.block { margin-bottom: 25px; animation: fadeIn 0.5s ease-out; }

.quetion, .answer { display: flex; margin-bottom: 8px; }

.quetion { justify-content: flex-start; }

.answer { justify-content: flex-end; }

.avatar { width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-size: 24px; margin: 0 10px; flex-shrink: 0; }

.quetion .avatar { background: #e91e63; }

.answer .avatar { background: #4caf50; }

.message-container { max-width: 75%; display: flex; flex-direction: column; }

.quetion .message-container { align-items: flex-start; }

.answer .message-container { align-items: flex-end; }

.message { padding: 12px 16px; border-radius: 18px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); line-height: 1.5; }

.quetion .message { background: #f1f1f1; color: #333; border-top-left-radius: 5px; font-size:22px; }

.answer .message { background: #4a6bdf; color: white; border-top-right-radius: 5px; font-size: 18px; }


/* 流程图整体 */
.price .desc ul { list-style: none; padding: 0; margin: 20px 0; position: relative; }

    /* 左侧竖线 */
    .price .desc ul::before { content: ""; position: absolute; left: 20px; /* 和圆点对齐 */ top: 0; bottom: 0; width: 2px; background: #3498db; }

/* 单个流程节点 */
.price .desc li { position: relative; margin: 20px 0 20px 60px; /* 给左边留位置放圆点 */ padding: 10px 15px; background: #f9f9f9; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); color: #333; font-size:20px; }

    /* 节点圆圈 */
    .price .desc li::before { content: ""; position: absolute; left: -42px; /* 和竖线对齐 */ top: 15px; width: 20px; height: 20px; background: #fff; border: 3px solid #3498db; border-radius: 50%; }

    /* 步骤号数字 */
    .price .desc li::after { content: counter(step); counter-increment: step; position: absolute; left: -34px; top: 14px; font-size: 16px; color: #3498db; font-weight: bold; }

/* 初始化计数器 */
.price .desc ul { counter-reset: step; }

.p { margin: 30px 10px; }
.price table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    .price table th,
    .price table td { border: 1px solid #ddd; padding: 12px 10px; text-align: center; font-size: 18px; }
    .price table th { background: #2c3e50; color: #fff; font-weight: bold; }
    .price table tr:nth-child(even) td { background: #f9f9f9; }
    .price table tr:hover td { background: #f1f7ff; }

    /* 价格列加红色 */
    .price table td:last-child { font-weight: bold; color: #e74c3c; }

/* 整体容器 */
.soft { margin: 30px auto; display: flex; flex-direction: column; gap: 40px; font-family: "Microsoft YaHei", sans-serif; }

    /* 区块样式（免费/收费） */
    .soft .free,
    .soft .charge { background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

    /* 标题 */
    .soft h2 { margin-bottom: 15px; text-align: center; font-size: 22px; color: #2c3e50;  padding-bottom: 8px; }

    /* 表格样式 */
    .soft table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 15px; }

        .soft table th,
        .soft table td { border: 1px solid #ddd; padding: 12px 10px; text-align: center; }

        .soft table th { background: #3498db; color: #fff; font-weight: bold; }

        .soft table tr:nth-child(even) td { background: #f9f9f9; }

        .soft table tr:hover td { background: #f1f7ff; }

        /* 链接样式 */
        .soft table a { color: #3498db; text-decoration: none; font-weight: bold; }
            .soft table a:hover { color: #e74c3c; text-decoration: underline; }

.contact { width: 960px; margin: 30px auto; padding: 20px; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); font-family: "Microsoft YaHei", sans-serif; }

    /* 标题单独一行，左对齐或居中都行 */
    .contact h2 { font-size: 22px; color: #2c3e50; margin-bottom: 20px; border-left: 4px solid #3498db; padding-left: 10px; }

    /* 每一行联系方式 */
    .contact .line { font-size: 18px; color: #333; margin: 10px 0; padding: 10px 15px; border: 1px dashed #3498db; border-radius: 6px; background: #f9f9f9; display: block; /* 强制换行 */ width: fit-content; transition: all 0.3s; }

        /* 悬停效果 */
        .contact .line:hover { background: #eaf4ff; color: #3498db; transform: scale(1.03); }

.foot { display: flex; flex-wrap: wrap; /* 超过就换行 */ max-width: 600px; /* 最大宽度 600px */ margin: 0 auto; /* 居中 */ gap: 10px; /* 每个 span 之间的间距，可选 */ }

    .foot span { flex: 1 1 auto; /* 每个 span 可伸缩 */ text-align: center; /* 文字居中 */ padding: 5px 10px; /* 内边距，避免文字贴边 */ }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .nav li { margin: 0 10px; }
    .nav a { font-size: 20px; }

    .message-container { max-width: 85%; }
    .content { padding: 15px; }
    .message { padding: 8px 10px; }

    .avatar { width: 40px; height: 40px; font-size: 20px; }
    .quetion .message { font-size: 18px; }

    .answer .message { font-size: 18px; }
}