/* ============================================================
   服务与支持 特有样式 (service.css)
   设计基准宽: 1920px
   风格: 黑/白/深灰高对比 · 摄影大图 + 黑色渐变遮罩
   ============================================================ */

/* ---------- 通用 section 包裹（白底深字 / 黑底白字） ---------- */
.svc-section { padding: 80px 100px; }
@media (max-width: 1280px) { .svc-section { padding: 70px 60px; } }
@media (max-width: 768px)  { .svc-section { padding: 50px 24px; } }

/* 区块内标题 + 搜索框（左右排布） */
.svc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
}
.svc-head__title {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
}
@media (max-width: 768px) {
    .svc-head__title { font-size: var(--fs-h5); }
}

/* 搜索框（圆角浅灰胶囊 + 搜索图标） */
.svc-search {
    position: relative;
    width: 400px;
    max-width: 100%;
    height: 50px;
    background: #F4F4F4;
    border-radius: 50px;
    flex-shrink: 0;
}
.svc-search input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    border-radius: 50px;
    padding: 0 60px 0 28px;
    font-size: var(--fs-body-sm);
    color: #333;
    font-family: var(--font-sans);
}
.svc-search input::placeholder { color: #999; }
.svc-search__icon {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
}
@media (max-width: 768px) {
    .svc-search { width: 100%; height: 44px; }
    .svc-search input { padding: 0 52px 0 22px; font-size: var(--fs-caption-15); }
    .svc-search__icon { width: 24px; height: 24px; right: 12px; }
    .svc-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- 内容容器（圆角白卡 / 黑卡） ---------- */
.svc-panel {
    border-radius: 20px;
    overflow: hidden;
}
/* 下载中心：白底深字卡 */
.svc-panel--light { background: #fff; padding: 40px 60px; }
/* 常见问题：白底深字卡 */
.svc-panel--faq   { background: #fff; padding: 24px 30px; }
@media (max-width: 768px) {
    .svc-panel--light { padding: 20px 22px; }
    .svc-panel--faq   { padding: 8px 18px; }
}

/* ---------- 下载中心 文件列表行 ---------- */
.svc-file {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 22px 0;
    border-bottom: 1px solid #D8D8D8;
    transition: background .3s;
}
.svc-file:last-child { border-bottom: none; }
.svc-file:hover { background: rgba(0, 0, 0, .02); }
.svc-file__doc {
    width: 80px; height: 80px;
    flex-shrink: 0;
    object-fit: contain;
}
.svc-file__body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 6px;
}
.svc-file__name {
    font-size: var(--fs-h5);
    font-weight: 300;
    color: #3D3D3D;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.svc-file__date {
    font-size: var(--fs-body);
    font-weight: 300;
    color: #666;
    font-family: var(--font-num);
    white-space: nowrap;
    flex-shrink: 0;
}
.svc-file__dl {
    width: 60px; height: 60px;
    flex-shrink: 0;
    object-fit: contain;
    transition: transform .3s;
}
.svc-file:hover .svc-file__dl { transform: translateY(-2px); }
@media (max-width: 768px) {
    .svc-file { gap: 16px; padding: 16px 0; }
    .svc-file__doc { width: 48px; height: 48px; }
    .svc-file__body { flex-direction: column; align-items: flex-start; gap: 4px; }
    .svc-file__name { font-size: var(--fs-caption-16); white-space: normal; }
    .svc-file__date { font-size: var(--fs-micro-13); }
    .svc-file__dl { width: 36px; height: 36px; }
}

/* ---------- 分页 ---------- */
.svc-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 44px;
    margin-top: 40px;
}
.svc-pager__nav {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    color: #999;
    transition: color .3s;
}
.svc-pager__nav:hover { color: #333; }
.svc-pager__nums { display: flex; align-items: center; gap: 44px; }
.svc-pager__num {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    font-family: var(--font-num);
    color: #666;
    transition: background .3s, color .3s;
    cursor: pointer;
}
.svc-pager__num.is-active { background: #F2554E; color: #fff; }
.svc-pager__num:not(.is-active):hover { color: #333; }
@media (max-width: 768px) {
    .svc-pager { gap: 24px; margin-top: 28px; }
    .svc-pager__nums { gap: 22px; }
    .svc-pager__num { width: 32px; height: 32px; font-size: 28px; }
}

/* ---------- 常见问题 手风琴 ---------- */
.svc-faq__item {
    border-bottom: 1px solid #D8D8D8;
}
.svc-faq__item:last-child { border-bottom: none; }
.svc-faq__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 25px;
    text-align: left;
    cursor: pointer;
    transition: background .3s;
}
.svc-faq__head:hover { background: rgba(0, 0, 0, .02); }
.svc-faq__q {
    font-size: var(--fs-h5);
    font-weight: 300;
    color: #3D3D3D;
    line-height: 1.4;
}
.svc-faq__icon {
    width: 28px; height: 28px;
    flex-shrink: 0;
    transition: transform .35s;
    color: #999;
}
.svc-faq__item.is-open .svc-faq__icon { transform: rotate(180deg); }
.svc-faq__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease, padding .4s ease;
    padding: 0 25px;
}
.svc-faq__item.is-open .svc-faq__body {
    max-height: 240px;
    padding-bottom: 30px;
}
.svc-faq__a {
    font-size: var(--fs-body-sm-20);
    font-weight: 300;
    color: #666;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .svc-faq__head { padding: 20px 12px; }
    .svc-faq__q { font-size: var(--fs-caption-16); }
    .svc-faq__icon { width: 20px; height: 20px; }
    .svc-faq__a { font-size: var(--fs-caption); }
    .svc-faq__item.is-open .svc-faq__body { padding-bottom: 20px; }
}

/* ---------- 项目咨询（6 步圆形流程 · S 型） ----------
   设计稿几何(1920 基准)：圆形 220×220
   · 行1 圆心 y = 200，行2 圆心 y = 570（圆心垂直间距 370）
   · 三等分列居中 → 列中心 x = 16.667% / 50% / 83.333%
   流向：项目咨询(1) → 现场踏勘(2) → 方案设计(3) →↓→ 施工建设(4) → 运营维护(5) → 绿电交易(6)
        即第一行从左到右，第二行从右到左（S 型 / 牛耕式）
   连接线 = 白色虚线 + 末端三角箭头（朝向：右、右、下、左、左） ---------- */
.svc-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 150px 0;                 /* 行间距：圆心 370 = 圆 220 + 间隙 150 */
    justify-items: center;
    align-items: start;          /* 圆形贴行顶，避免 stretch 默认导致的垂直偏移 */
    max-width: 1468px;
    margin: 0 auto;
    padding: 90px 0 0;            /* 行1 圆心 = 90 + 110 = 200 */
}
/* S 型：第二行（第 4/5/6 步）从右到左排列 —— 列3/列2/列1
   注意用 nth-of-type 而非 nth-child：.svc-flow 内前 5 个子元素是虚线 <span>，
   nth-child 会把 span 计入序号导致错位；nth-of-type 只数 <div>（即 6 个 step） */
.svc-step:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.svc-step:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.svc-step:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.svc-step:nth-of-type(4) { grid-column: 3; grid-row: 2; }
.svc-step:nth-of-type(5) { grid-column: 2; grid-row: 2; }
.svc-step:nth-of-type(6) { grid-column: 1; grid-row: 2; }
.svc-step {
    width: 220px; height: 220px;
    border-radius: 50%;
    background: #000;
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 22px;
    position: relative;
    z-index: 2;
}
.svc-step__title {
    font-size: var(--fs-h5);
    font-weight: 500;
    margin-bottom: 14px;
}
.svc-step__desc {
    width: 160px;
    font-size: var(--fs-body-sm);
    font-weight: 300;
    line-height: 1.5;
    opacity: .92;
    text-align: left;
}

/* —— 连接线（白色虚线）+ 箭头（::after 三角）—— */
.svc-flow__line {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
/* 水平虚线（dash 4 实 4 空），两端各离圆边 16px */
.svc-flow__line--top-l,
.svc-flow__line--top-r,
.svc-flow__line--bot-r,
.svc-flow__line--bot-l {
    height: 2px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, .7) 50%, transparent 0);
    background-size: 8px 2px;
    background-repeat: repeat-x;
}
/* 1→2：行1 左段，箭头朝右 */
.svc-flow__line--top-l { top: 200px; left: calc(16.667% + 126px); width: calc(33.333% - 252px); }
/* 2→3：行1 右段，箭头朝右 */
.svc-flow__line--top-r { top: 200px; left: calc(50% + 126px); width: calc(33.333% - 252px); }
/* 4→5：行2 右段，箭头朝左 */
.svc-flow__line--bot-r { top: 570px; left: calc(50% + 126px); width: calc(33.333% - 252px); }
/* 5→6：行2 左段，箭头朝左 */
.svc-flow__line--bot-l { top: 570px; left: calc(16.667% + 126px); width: calc(33.333% - 252px); }
/* 3→4：列3 右侧垂直虚线，箭头朝下（圆3 底 310 → 圆4 顶 460） */
.svc-flow__line--right-v {
    width: 2px;
    top: 326px;                  /* 310 + 16 缩进 */
    height: 118px;               /* 150 − 32 缩进 */
    left: calc(83.333% - 1px);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .7) 50%, transparent 0);
    background-size: 2px 8px;
    background-repeat: repeat-y;
}
/* 箭头：朝右（top-l / top-r 右端） */
.svc-flow__line--top-l::after,
.svc-flow__line--top-r::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    margin-top: -6px;            /* 三角高 12，垂直居中于细线 */
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .95);
}
/* 箭头：朝左（bot-r / bot-l 左端） */
.svc-flow__line--bot-r::after,
.svc-flow__line--bot-l::after {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    margin-top: -6px;
    border-style: solid;
    border-width: 6px 10px 6px 0;
    border-color: transparent rgba(255, 255, 255, .95) transparent transparent;
}
/* 箭头：朝下（right-v 底端） */
.svc-flow__line--right-v::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -6px;           /* 三角宽 12，水平居中于细线 */
    border-style: solid;
    border-width: 10px 6px 0 6px;
    border-color: rgba(255, 255, 255, .95) transparent transparent transparent;
}
/* .mg-btn 为 inline-flex，margin:auto 无法居中 → 覆盖为 flex（块级），auto margin 才生效
   设计稿规格：160×60、圆角 10px、白底（覆盖默认胶囊 50px 圆角 + 45 高）*/
.svc-flow__btn {
    display: flex;
    width: 160px;
    height: 60px;
    min-width: 160px;          /* 覆盖 .mg-btn 的 min-width:160 */
    border-radius: 10px;
    background: #FFFFFF;
    margin: 60px auto 0;
    font-size: 22px;
}

/* —— 响应式：平板 2 列（隐藏连接线，恢复自然顺序）—— */
@media (max-width: 1024px) {
    .svc-flow { grid-template-columns: repeat(2, 1fr); gap: 60px 40px; padding-top: 30px; }
    .svc-step:nth-of-type(n) { grid-column: auto; grid-row: auto; }   /* 取消 S 型定位 */
    .svc-step { width: 170px; height: 170px; padding: 0 16px; }
    .svc-step__title { font-size: var(--fs-body); margin-bottom: 8px; }
    .svc-step__desc { font-size: var(--fs-caption); }
    .svc-flow__line { display: none; }
}
@media (max-width: 600px) {
    .svc-flow { grid-template-columns: 1fr; gap: 36px; }
    .svc-step { width: 220px; height: 220px; padding: 0 22px; }
    .svc-step__title { font-size: var(--fs-body-24); margin-bottom: 12px; }
    .svc-step__desc { font-size: var(--fs-caption-16); }
    .svc-flow__btn { margin-top: 40px; }
}

/* ---------- 联系我们 表单 ---------- */
.svc-contact {
    max-width: 1408px;
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px 208px;
}
.svc-field { display: flex; flex-direction: column; gap: 20px; }
.svc-field__label {
    font-size: var(--fs-body-26);
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
}
.svc-field__input,
.svc-field__select {
    width: 100%;
    height: 70px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .8);
    background: transparent;
    outline: none;
    padding: 0 24px;
    font-size: var(--fs-body);
    font-family: var(--font-sans);
    color: #fff;
    transition: border-color .3s;
    -webkit-appearance: none;
    appearance: none;
}
.svc-field__input::placeholder { color: rgba(255, 255, 255, .5); }
.svc-field__input:focus,
.svc-field__select:focus { border-color: #fff; }
/* select 下拉箭头（纯 CSS 三角） */
.svc-field--select { position: relative; }
.svc-field--select::after {
    content: "";
    position: absolute;
    right: 24px; bottom: 30px;
    width: 0; height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid rgba(255, 255, 255, .7);
    pointer-events: none;
}
.svc-field__select option { color: #333; }
.svc-contact__agree {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}
.svc-contact__check {
    width: 25px; height: 25px;
    flex-shrink: 0;
    accent-color: #fff;
}
.svc-contact__agree label {
    font-size: var(--fs-body-sm-20);
    color: #fff;
    text-align: center;
    line-height: 1.4;
    cursor: pointer;
}
.svc-contact__agree a { color: #85BBF1; text-decoration: underline; }
.svc-contact__submit {
    grid-column: 1 / -1;
    justify-self: center;
    width: 260px;
    height: 65px;
    border-radius: 10px;
    background: #fff;
    color: #000;
    font-size: 22px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: transform .3s, box-shadow .3s;
    margin-top: 20px;
}
.svc-contact__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
@media (max-width: 1024px) {
    .svc-contact { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
    .svc-field__label { font-size: var(--fs-caption-16); }
    .svc-field__input, .svc-field__select { height: 52px; font-size: var(--fs-caption-16); padding: 0 16px; }
    .svc-field--select::after { bottom: 20px; }
    .svc-contact__agree label { font-size: var(--fs-micro-13); }
    .svc-contact__check { width: 18px; height: 18px; }
    .svc-contact__submit { width: 100%; height: 52px; font-size: var(--fs-body-sm); }
}

/* ---------- 全球服务中心总部 ---------- */
.svc-hq { text-align: center; }
.svc-hq__title {
    font-size: var(--fs-h1-80);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 60px;
}
.svc-hq__map {
    width: 100%;
    max-width: 1400px;
    border-radius: 40px;
    overflow: hidden;
    margin: 0 auto 60px;
}
.svc-hq__map img { width: 100%; height: auto; display: block; }
.svc-hq__info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
    max-width: 1335px;
    margin: 0 auto;
}
.svc-hq__item {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
}
.svc-hq__item img { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; }
.svc-hq__item span {
    font-size: var(--fs-body-26);
    font-weight: 300;
    line-height: 1.3;
    white-space: nowrap;
}
.svc-hq__item--num span { font-family: var(--font-num); }
@media (max-width: 1280px) { .svc-hq__title { font-size: 60px; } }
@media (max-width: 768px)  {
    .svc-hq__title { font-size: var(--fs-h4-36); margin-bottom: 36px; }
    .svc-hq__map { border-radius: 20px; margin-bottom: 36px; }
    .svc-hq__info { flex-direction: column; gap: 24px; }
    .svc-hq__item img { width: 30px; height: 30px; }
    .svc-hq__item span { font-size: var(--fs-caption-17); }

/* 注：megamenu 黑色半透明毛玻璃样式已统一到 common.css（全站生效），
   service.css 不再单独维护。 */