@charset "utf-8";

/* 页面独立样式：about.html。
   公共样式见 global.css；本文件在 global.css 后加载，保留原章节编号。 */




/* ==========================================================================
   12.0 关于页溪 - 页面基础与通用排版
   ========================================================================== */

body.ab2-page {
    margin: 0;
    background: #fff;
    color: #334155;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 15px;
    line-height: 1.8;
}

.ab2-page :focus-visible {
    outline: 3px solid #032d60;
    outline-offset: 4px;
}

.abg-skip:focus {
    top: 12px;
}

#about-main h1,
#about-main h2,
#about-main h3,
#about-main .abg-phone-content > strong,
#about-main .abg-company-photo strong,
#about-main .abg-year,
#about-main .abg-web-preview strong {
    font-family: inherit;
    font-weight: 600;
}

#about-main h1 {
    font-size: 32px;
    line-height: 1.5;
    letter-spacing: -.5px;
}

#about-main h2 {
    font-size: 28px;
    line-height: 1.5;
    letter-spacing: -.4px;
}

#about-main h3 {
    font-size: 19px;
    line-height: 1.5;
}

#about-main .abg-button,
#about-main .abg-text-link,
#about-main .abg-form label {
    font-size: 14px;
}

#about-main .abg-form input:not([type="hidden"]),
#about-main .abg-form textarea,
#about-main .abg-form input::placeholder,
#about-main .abg-form textarea::placeholder {
    font-family: inherit;
    font-size: 14px;
}

#about-main .abg-form-note {
    font-size: 12px;
}

#about-main.ab3-main {
    --ab3-blue: #0176d3;
    --ab3-ink: #102a43;
    font-family: inherit;
    color: var(--ab3-ink);
    background: #fff;
}

#about-main.ab3-main * {
    box-sizing: border-box;
}

#about-main.ab3-main :where(h1,h2,h3,p,figure,dl,dd) {
    margin: 0;
    padding: 0;
}

#about-main.ab3-main a {
    color: inherit;
    text-decoration: none;
}

#about-main.ab3-main button {
    font-family: inherit;
    cursor: pointer;
}

#about-main.ab3-main h1 {
    font-size: 50px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -1.5px;
}

#about-main.ab3-main h2 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.4px;
}

#about-main.ab3-main h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
	text-align: center;
}

#about-main.ab3-main :focus-visible {
    outline: 2px solid #0176d3;
    outline-offset: 5px;
}

.ab3-wrap {
    width: calc(100% - 64px);
    max-width: 1100px;
    margin-inline: auto;
}

.ab3-section {
    padding-top: 40px;
}

#about-main .ab3-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 11px 22px;
    border: 1px solid #0176d3;
    border-radius: 6px;
    background: #0176d3;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    transition: background .2s,transform .2s;
}

#about-main .ab3-button:hover {
    background: #0563ad;
    border-color: #0563ad;
    transform: translateY(-2px);
}

#about-main .ab3-facts p {
    max-width: 800px;
    margin: 14px auto 30px;
    color: #d4e3f3;
    font-size: 16px;
    line-height: 1.9;
    text-align: center;
}

#about-main .ab3-heading > p:last-child {
    margin-top: 12px;
    color: #68798c;
    font-size: 15px;
    line-height: 1.8;
}

#about-main.ab3-main .ab3-story h3 {
    margin: 14px 0;
    color: #12304e;
    font-size: 26px;
    font-weight: 600;
    text-align: left;
}

#about-main .ab3-story .ab3-button {
    display: inline-flex;
    margin: 24px 0 0;
}

#about-main.ab3-main .ab3-text-link {
    border: 0;
    background: none;
    color: #0176d3;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.8;
}

#about-main .ab3-text-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

#about-main .ab3-form-section {
    padding-top: 40px;
    padding-bottom: 48px;
}



/* ==========================================================================
   12.1 关于页溪 - Hero首屏与面包屑
   ========================================================================== */

#about-main.ab3-main .ab3-eyebrow {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 1.8px;
	text-align: center;
}

.ab3-hero {
    padding-top: 116px;
    overflow: hidden;
    background: radial-gradient(ellipse at 12% 34%,#f1eefe99,transparent 34%),radial-gradient(ellipse at 88% 52%,#dff9fb88,transparent 35%),#fff;
}

.ab3-hero-stage {
    position: relative;
    max-width: 1400px;
    height: 590px;
    margin-inline: auto;
}

.ab3-hero-copy {
    position: absolute;
    z-index: 2;
    top: 120px;
    left: 50%;
    width: 600px;
    transform: translateX(-50%);
    text-align: center;
}

#about-main .ab3-hero-copy .ab3-eyebrow {
    margin-bottom: 20px;
    color: #687c90;
}

#about-main .ab3-hero-copy h1 span {
    color: #0176d3;
}

#about-main .ab3-hero-desc {
    margin: 20px 0 26px;
    color: #526579;
    font-size: 16px;
    line-height: 1.9;
}

#about-main .ab3-heading .ab3-eyebrow {
    margin-bottom: 10px;
    color: #0176d3;
}

#about-main .ab3-story > div > p:not(.ab3-eyebrow) {
    color: #526579;
    font-size: 15px;
    line-height: 1.9;
    text-align: left;
}

#about-main .ab3-breadcrumb {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    margin-bottom: 14px;
    color: #526579;
    font-size: 14px;
    line-height: 1.8;
}

#about-main .ab3-breadcrumb ol {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#about-main .ab3-breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#about-main .ab3-breadcrumb [aria-hidden="true"] {
    color: #8b9bad;
}



/* ==========================================================================
   12.3 关于页溪 - 案例、项目与内容列表
   ========================================================================== */

.abg-main .abg-project {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 510px;
    padding: 26px;
    overflow: hidden;
    border-radius: 16px;
    color: #222c38;
    transition: transform .2s;
}

.abg-project:hover {
    transform: translateY(-4px);
}

.ab3-projects {
    padding-top: 64px;
    padding-bottom: 0;
}

.ab3-projects-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 28px;
}

.ab3-projects-heading .ab3-heading {
    max-width: 840px;
    margin-bottom: 0;
    text-align: left;
}

#about-main.ab3-main .ab3-projects-heading .ab3-eyebrow {
    text-align: left;
}

.ab3-projects-heading > .ab3-text-link {
    flex-shrink: 0;
    margin-bottom: 3px;
}

.ab3-cases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.ab3-case-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dfe7ef;
    border-radius: 16px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.ab3-case-card:hover {
    border-color: #a9ccec;
    box-shadow: 0 8px 24px #123a6010;
}

.ab3-case-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 100px;
    padding: 16px 22px;
    border-bottom: 1px solid #edf1f5;
    background: #f8fafc;
}

.ab3-case-brand img {
    display: block;
    width: 124px;
    height: 68px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.ab3-case-brand > span {
    padding: 4px 8px;
    border: 1px solid #e2e9f1;
    border-radius: 5px;
    background: #fff;
    color: #62758a;
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
}

.ab3-case-copy {
    flex: 1;
    padding: 24px 22px;
}

#about-main.ab3-main .ab3-case-copy h3 {
    color: #12304e;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.2px;
    text-align: left;
}

#about-main .ab3-case-copy p {
    margin-top: 12px;
    color: #62758a;
    font-size: 14px;
    line-height: 1.85;
}

.ab3-case-footer {
    display: flex;
    align-items: center;
    margin: 0 22px;
    padding: 15px 0 18px;
    border-top: 1px solid #edf1f5;
    color: #0869d0;
    font-size: 13px;
    font-weight: 600;
}


/* ==========================================================================
   12.4 关于页溪 - 服务、理念与功能模块
   ========================================================================== */

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

.ab3-values article {
    padding: 24px;
    border-radius: 12px;
    background: #f7f9fc;
}

.ab3-value-art {
    display: grid;
    place-items: center;
    height: 126px;
    margin-bottom: 18px;
    border-radius: 10px;
    background: #eaf3ff;
    color: #1585d6;
}

.ab3-value-art svg {
    width: 94px;
    height: 90px;
    fill: #d8ecff;
    stroke: currentColor;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#about-main .ab3-values h3 {
    font-size: 18px;
}

#about-main .ab3-values p {
    margin-top: 10px;
    color: #64758a;
    font-size: 14px;
    line-height: 1.85;
	text-align: justify;
}

.ab3-cooperation {
    padding-top: 64px;
    padding-bottom: 64px;
}

.ab3-cooperation .ab3-heading {
    text-align: left;
}

#about-main.ab3-main .ab3-cooperation .ab3-eyebrow {
    text-align: left;
}

.ab3-cooperation .ab3-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.ab3-cooperation .ab3-values article {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-content: start;
    column-gap: 20px;
    padding: 28px;
    border: 1px solid #e1e8f0;
    border-radius: 14px;
    background: #f8fafc;
}

.ab3-cooperation .ab3-value-art {
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
    margin: 0;
    border: 1px solid #dae9fb;
    border-radius: 12px;
    background: #edf5ff;
    color: #0869d0;
}

.ab3-cooperation .ab3-value-art svg {
    width: 32px;
    height: 32px;
    fill: #d8eaff;
}

#about-main.ab3-main .ab3-cooperation h3 {
    color: #12304e;
    font-size: 18px;
    line-height: 1.6;
    text-align: left;
}

#about-main .ab3-cooperation .ab3-values p {
    color: #62758a;
    font-size: 14px;
    line-height: 1.85;
    text-align: left;
}

.ab3-service-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0;
    padding: 20px 28px;
    border-top: 1px solid #e7edf4;
    background: #f8fafc;
}

#about-main .ab3-service-overview p {
    color: #62758a;
    font-size: 14px;
    line-height: 1.85;
}

#about-main.ab3-main .ab3-service-overview p a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ab3-service-overview > a {
    flex-shrink: 0;
}

.ab3-services-panel {
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid #dfe7ef;
    border-radius: 16px;
    background: #fff;
}

.ab3-service + .ab3-service {
    border-left: 1px solid #e7edf4;
}

.ab3-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
}

.ab3-service {
    display: flex;
    min-width: 0;
    background: #fff;
    transition: background .2s;
}

.ab3-service:hover {
    background: #f8fbff;
}

.ab3-service-copy {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-content: start;
    column-gap: 16px;
    width: 100%;
    padding: 28px;
    text-align: left;
}

#about-main.ab3-main .ab3-service .ab3-eyebrow {
    grid-column: 2;
    color: #6b7e92;
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: 1.2px;
}

.ab3-service-icon {
    display: grid;
    grid-row: 1 / 3;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #dceafb;
    border-radius: 11px;
    background: #edf5fd;
    color: #0869d0;
}

.ab3-service-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#about-main.ab3-main .ab3-service h3 {
    grid-column: 2;
    margin-top: 6px;
    color: #12304e;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.55;
    text-align: left;
}

#about-main .ab3-service .ab3-text-link {
    grid-column: 1 / -1;
    display: inline-block;
    margin-top: 18px;
    padding-top: 0;
    font-size: 13px;
}

.ab3-work > .ab3-heading {
    max-width: 850px;
    margin-bottom: 28px;
    text-align: left;
}

#about-main.ab3-main .ab3-work .ab3-eyebrow {
    text-align: left;
}

#about-main .ab3-service p:not(.ab3-eyebrow) {
    grid-column: 1 / -1;
    margin-top: 16px;
    color: #62758a;
    font-size: 14px;
    line-height: 1.85;
    text-align: left;
}

.ab3-service img {
    display: block;
    width: 100%;
    height: auto;
}



/* ==========================================================================
   12.8 关于页溪 - 专项组件与兼容样式
   ========================================================================== */

.abg-skip {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: 10000;
    padding: 10px 18px;
    background: #fff;
    color: #032d60;
}

.abg-form-note {
    margin-top: 12px !important;
    color: #52657a;
    font-size: 11px;
    line-height: 1.9;
}

.ab3-photo {
    position: absolute;
    overflow: hidden;
    border-radius: 14px;
    background: #e4ebf1;
    box-shadow: 0 10px 30px #18334d12;
}

.ab3-photo-one {
    left: 16%;
    top: 30px;
    width: 200px;
    height: 180px;
    transform: rotate(-3deg);
}

.ab3-photo-two {
    right: 10%;
    top: 10px;
    width: 300px;
    height: 260px;
    transform: rotate(3deg);
}

.ab3-photo-three {
    left: 4%;
    top: 270px;
    width: 210px;
    height: 204px;
    transform: rotate(-2deg);
}

.ab3-photo-four {
    right: 8%;
    top: 310px;
    width: 188px;
    height: 158px;
    transform: rotate(3deg);
}

.ab3-photo-five {
    left: 24%;
    bottom: 12px;
    width: 174px;
    height: 150px;
    background: #e4ebf1;
    transform: rotate(2deg);
}

.ab3-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ab3-facts {
    padding: 40px 0 44px;
    background: #073671;
    color: #fff;
    height: auto;
}

.ab3-facts dl {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 28px;
}

.ab3-facts dl > div {
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
}

.ab3-facts dt {
    margin-top: 8px;
    font-size: 12px;
    color: #b7cce3;
}

.ab3-facts dd {
    font-size: 38px;
    font-weight: 600;
    line-height: 1.3;
}

.ab3-facts dd span {
    margin-left: 5px;
    font-size: 20px;
}

.ab3-facts dd.ab3-fact-word {
    font-size: 28px;
    line-height: 1.76;
}

#about-main.ab3-main .ab3-profile h2 {
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.ab3-profile dt {
    font-size: 13px;
}

.ab3-heading {
    margin-bottom: 32px;
    text-align: center;
}

.ab3-art-two {
    background: #f1edff;
    color: #8770cc;
}

.ab3-art-two svg {
    fill: #e3d9fa;
}

.ab3-art-three {
    background: #e3f4f1;
    color: #309a87;
}

.ab3-art-three svg {
    fill: #c8ebe4;
}

.ab3-art-four {
    background: #fff0e4;
    color: #c48b55;
}

.ab3-art-four svg {
    fill: #fbe5cf;
}

.ab3-story {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    overflow: hidden;
    min-height: 340px;
    border: 1px solid #dfe7ef;
    border-radius: 16px;
    background: #f8fafc;
}

.ab3-story > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ab3-story > div {
    align-self: center;
    min-width: 0;
    padding: 36px 40px;
}

.ab3-anchor {
    scroll-margin-top: 116px;
}



/* ==========================================================================
   12.9 关于页溪 - 响应式与交互适配
   ========================================================================== */

@media (max-width: 900px) {
    
    .abg-project {
        padding: 22px !important;
    }
}

@media (max-width: 600px) {
    
    .abg-main .abg-project {
        min-height: 500px;
        padding: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ab2-page *,
    .ab2-page *::before,
    .ab2-page *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 600px) {
    #about-main h1 {
        font-size: 27px;
    }
    
    #about-main h2 {
        font-size: 24px;
    }
    
    #about-main h3 {
        font-size: 18px;
    }
}

@media (max-width: 1100px) {
    .ab3-hero-stage {
        height: 560px;
    }
    
    #about-main.ab3-main h1 {
        font-size: 42px;
    }
    
    .ab3-hero-copy {
        top: 140px;
        width: 520px;
    }
    
    .ab3-photo-one {
        left: 6%;
        width: 150px;
        height: 125px;
    }
    
    .ab3-photo-two {
        right: 5%;
        width: 170px;
        height: 180px;
    }
    
    .ab3-photo-three {
        left: 1%;
        width: 160px;
        height: 170px;
        top: 285px;
    }
    
    .ab3-photo-four {
        right: 1%;
        width: 155px;
        height: 130px;
        top: 335px;
    }
    
    .ab3-photo-five {
        left: 22%;
        width: 145px;
        height: 95px;
    }
    
    .ab3-values article {
        padding: 18px;
    }
}

@media (max-width: 800px) {
    .ab3-wrap {
        width: calc(100% - 40px);
    }
    
    .ab3-hero-copy {
        top: 170px;
        width: 450px;
    }
    
    #about-main.ab3-main h1 {
        font-size: 36px;
    }
    
    .ab3-photo-one {
        width: 125px;
        height: 105px;
        left: 7%;
        top: 15px;
    }
    
    .ab3-photo-two {
        width: 145px;
        height: 150px;
        right: 5%;
        top: 0;
    }
    
    .ab3-photo-three {
        width: 130px;
        height: 135px;
        top: 350px;
    }
    
    .ab3-photo-four {
        width: 130px;
        height: 110px;
        top: 390px;
    }
    
    .ab3-photo-five {
        left: 26%;
        width: 125px;
        height: 80px;
    }
    
    .ab3-values {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    
    .ab3-story > div {
        padding: 28px;
    }
    
    .ab3-service-copy {
        padding: 24px 20px;
    }
    
    #about-main .ab3-service h3 {
        font-size: 21px;
    }
}

@media (max-width: 600px) {
    .ab3-wrap {
        width: calc(100% - 36px);
    }
    
    .ab3-hero {
        padding-top: 104px;
    }
    
    .ab3-hero-stage {
        height: 730px;
    }
    
    .ab3-hero-copy {
        top: 210px;
        width: calc(100% - 36px);
    }
    
    #about-main.ab3-main h1 {
        font-size: 32px;
        letter-spacing: -.8px;
    }
    
    #about-main.ab3-main h2 {
        font-size: 24px;
    }
    
    #about-main .ab3-hero-copy .ab3-eyebrow {
        margin-bottom: 16px;
    }
    
    #about-main .ab3-hero-desc {
        margin: 18px 0 22px;
        font-size: 15px;
    }
    
    .ab3-photo-one {
        left: 7%;
        top: 22px;
        width: 112px;
        height: 112px;
    }
    
    .ab3-photo-two {
        right: 7%;
        top: 0;
        width: 132px;
        height: 164px;
    }
    
    .ab3-photo-three {
        left: 6%;
        top: auto;
        bottom: 28px;
        width: 145px;
        height: 150px;
    }
    
    .ab3-photo-four {
        right: 6%;
        top: auto;
        bottom: 80px;
        width: 128px;
        height: 125px;
    }
    
    .ab3-photo-five {
        display: none;
    }
    
    .ab3-facts {
        padding: 32px 0;
    }
    
    .ab3-facts dl {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 26px 16px;
    }
    
    .ab3-facts dd {
        font-size: 32px;
    }
    
    .ab3-facts dd.ab3-fact-word {
        font-size: 23px;
    }
    
    #about-main .ab3-facts p {
        font-size: 14px;
    }
    
    .ab3-section {
        padding-top: 56px;
    }
    
    .ab3-heading {
        margin-bottom: 26px;
    }
    
    .ab3-values {
        gap: 12px;
    }
    
    .ab3-values article {
        padding: 16px;
    }
    
    .ab3-value-art {
        height: 100px;
    }
    
    .ab3-value-art svg {
        width: 72px;
    }
    
    #about-main .ab3-values h3 {
        font-size: 16px;
    }
    
    #about-main .ab3-values p {
        font-size: 13px;
    }
    
    .ab3-story,
    .ab3-service-grid,
    .ab3-cases,
    .ab3-company,
    .ab3-invite {
        grid-template-columns: minmax(0,1fr);
    }
    
    .ab3-story > img {
        height: 240px;
    }
    
    #about-main .ab3-story h3 {
        font-size: 24px;
    }
}

@media (max-width: 360px) {
    #about-main.ab3-main h1 {
        font-size: 28px;
    }
    
    .ab3-photo-one {
        left: 5%;
        width: 100px;
    }
    
    .ab3-photo-two {
        right: 5%;
        width: 115px;
    }
    
    .ab3-photo-three {
        left: 4%;
        width: 130px;
    }
    
    .ab3-photo-four {
        right: 4%;
        width: 115px;
    }
    
    .ab3-values {
        grid-template-columns: minmax(0,1fr);
    }
}

@media (max-width: 600px) {
    #about-main .ab3-breadcrumb {
        font-size: 13px;
    }
}


/* 12.9 关于页溪 - 精选客户项目适配 */
@media (max-width: 900px) {
    .ab3-projects-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .ab3-cases {
        gap: 16px;
    }

    .ab3-case-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 18px;
    }

    .ab3-case-copy {
        padding: 20px 18px;
    }

    .ab3-case-footer {
        margin-inline: 18px;
    }
}

@media (max-width: 600px) {
    .ab3-projects {
        padding-top: 48px;
        padding-bottom: 0;
    }

    .ab3-cases {
        grid-template-columns: minmax(0, 1fr);
    }

    .ab3-case-brand {
        flex-direction: row;
        align-items: center;
    }

    .ab3-case-copy {
        padding: 22px;
    }

    .ab3-case-footer {
        margin-inline: 22px;
    }
}

/* 12.9 关于页溪 - 服务介绍适配 */
@media (max-width: 900px) {
    .ab3-work .ab3-story > div {
        padding: 28px;
    }

    .ab3-work .ab3-service-copy {
        padding: 24px;
    }
}

@media (max-width: 600px) {
    .ab3-work .ab3-story {
        grid-template-columns: minmax(0, 1fr);
    }

    .ab3-work .ab3-story > img {
        height: 240px;
        object-position: center 35%;
    }

    .ab3-work .ab3-story > div {
        padding: 26px 22px;
    }

    #about-main.ab3-main .ab3-story h3 {
        font-size: 24px;
    }

    .ab3-work .ab3-service-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin: 0;
    }

    .ab3-service + .ab3-service {
        border-top: 1px solid #e7edf4;
        border-left: 0;
    }

    .ab3-service-overview {
        padding: 20px 22px;
    }

    .ab3-work .ab3-service-copy {
        padding: 24px 22px;
    }

    #about-main.ab3-main .ab3-service h3 {
        font-size: 19px;
    }
}

/* 12.9 关于页溪 - 公司介绍与合作方式适配 */
@media (max-width: 900px) {
    .ab3-cooperation .ab3-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ab3-service-overview {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 600px) {
    #about-main.ab3-main .ab3-profile h2 {
        font-size: 24px;
    }

    #about-main .ab3-profile p {
        margin-bottom: 26px;
        font-size: 14px;
    }

    .ab3-cooperation {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .ab3-cooperation .ab3-values {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .ab3-cooperation .ab3-values article {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 14px;
        padding: 22px 18px;
    }

    .ab3-cooperation .ab3-value-art {
        width: 40px;
        height: 40px;
    }

    .ab3-cooperation .ab3-value-art svg {
        width: 30px;
        height: 30px;
    }

    #about-main.ab3-main .ab3-cooperation h3 {
        font-size: 17px;
    }

    #about-main .ab3-cooperation .ab3-values p {
        margin-top: 8px;
        font-size: 14px;
    }
}