@charset "utf-8";
/* ============================================================
   首页「ty8天游线路检测中心」板块 —— 独立样式文件
   仅作用于 .index__about.abt-section 作用域，不覆盖既有样式
   设计基准：1920px 宽（1rem = 100px，依赖 html{font-size:5.2083vw}）
   ============================================================ */

.index__about.abt-section{
    --abt-red:#bf0008;
    --abt-red-line:rgba(191,0,8,.42);
    --abt-text:#4b4b4b;
    --abt-sub:#333;
    --abt-gray:#6a6a6a;
    --abt-mark:#ededed;
    --abt-line:#dcdcdc;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    padding:0 .5rem;
    background:#fff;
    overflow:hidden;
}

/* 内容容器：左右两栏 */
.abt-inner{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1.6rem;
    width:100%;
    max-width:16.04rem;
}
.abt-content{
    flex:1 1 auto;
    min-width:0;
}

/* ---------- 标题区 ---------- */
.abt-head{
    position:relative;
    padding-top:.34rem;
}
.abt-head__en{
    position:absolute;
    left:0;
    top:0;
    font-family:Arial,Helvetica,"Microsoft YaHei",sans-serif;
    font-size:.46rem;
    line-height:1;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--abt-mark);
    white-space:nowrap;
    pointer-events:none;
    -webkit-user-select:none;
    user-select:none;
}
.abt-head__cn{
    position:relative;
    margin:0;
    padding:0;
    font-size:.56rem;
    line-height:1.08;
    font-weight:700;
    letter-spacing:.01em;
    color:var(--abt-red);
}
.abt-head__sub{
    position:relative;
    margin-top:.1rem;
    font-size:.21rem;
    line-height:1.45;
    color:var(--abt-sub);
    letter-spacing:.01em;
}
/* 副标题下方的浅灰分隔线 */
.abt-head:after{
    content:"";
    display:block;
    width:100%;
    height:1px;
    margin-top:.1rem;
    background:var(--abt-line);
}

/* ---------- 正文 ---------- */
.abt-desc{
    margin-top:.32rem;
}
.abt-desc p{
    font-size:.165rem;
    line-height:1.9;
    color:var(--abt-text);
    text-align:justify;
    text-indent:2em;
    word-break:break-word;
}
.abt-desc p+p{
    margin-top:.06rem;
}

/* ---------- 数据指标 ---------- */
.abt-stats{
    display:flex;
    flex-wrap:nowrap;
    gap:.5rem;
    margin-top:.6rem;
    list-style:none;
    padding:0;
}
.abt-stats__item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    width:1.1rem;
    height:1.1rem;
    padding:.08rem .04rem 0;
    border:2px solid var(--abt-red-line);
    border-radius:.08rem;
    background:transparent;
    transition:border-color .35s ease,background-color .35s ease,transform .35s ease;
}
.abt-stats__item:hover{
    border-color:var(--abt-red);
    background-color:rgba(191,0,8,.02);
    transform:translateY(-.03rem);
}
.abt-stats__num{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    line-height:1;
    color:var(--abt-red);
    white-space:nowrap;
}
.abt-stats__num em{
    font-style:normal;
    font-size:.44rem;
    line-height:.92;
    font-weight:700;
    letter-spacing:-.01em;
    font-variant-numeric:tabular-nums;
}
.abt-stats__num i{
    font-style:normal;
    font-size:.19rem;
    line-height:1;
    font-weight:400;
    margin-left:.02rem;
    color:var(--abt-gray);
    transform:translateY(-.02rem);
}
.abt-stats__item.is-lg .abt-stats__num em{font-size:.38rem;}
.abt-stats__item.is-xl .abt-stats__num em{font-size:.3rem;}
.abt-stats__label{
    margin-top:.11rem;
    font-size:.19rem;
    line-height:1;
    color:var(--abt-gray);
    white-space:nowrap;
}

/* ---------- 查看更多 ---------- */
.abt-more{
    margin-top:.48rem;
}
.abt-more a{
    display:inline-flex;
    align-items:center;
    gap:.1rem;
    font-size:.24rem;
    padding:.06rem .12rem;
    line-height:1;
    color:var(--abt-red);
    transition:opacity .3s ease;
}
.abt-more a:hover{
    background:var(--abt-red);
    color:#f2f2f2;
    opacity:.72;
}
.abt-more svg{
    display:block;
    width:.3rem;
    height:.3rem;
}

/* ---------- 右侧配图 ---------- */
.abt-figure{
    position:relative;
    flex:0 0 auto;
    width:7.11rem;
    height:6.31rem;
    max-height:62vh;
    border-radius:.18rem;
    overflow:hidden;
    background:#f2f2f2;
    box-shadow:0 .1rem .5rem rgba(0,0,0,.07);
}
.abt-figure img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

/* ---------- 入场动效 ----------
   只在 JS 检测到进入视口后（is-inview）才挂载动画。
   未触发 / 未加载 JS 时元素保持正常可见，绝不出现空白。
   元素本身不使用 opacity:0 的初始态。 */
@keyframes abtFadeUp{
    from{opacity:0;transform:translateY(.3rem);}
    to{opacity:1;transform:translateY(0);}
}
@keyframes abtFadeScale{
    from{opacity:0;transform:translateY(.4rem) scale(.985);}
    to{opacity:1;transform:translateY(0) scale(1);}
}
.abt-anim.is-inview .abt-content>*{
    animation:abtFadeUp .8s cubic-bezier(.2,.7,.3,1) both;
}
.abt-anim.is-inview .abt-content>*:nth-child(1){animation-delay:.05s;}
.abt-anim.is-inview .abt-content>*:nth-child(2){animation-delay:.13s;}
.abt-anim.is-inview .abt-content>*:nth-child(3){animation-delay:.21s;}
.abt-anim.is-inview .abt-content>*:nth-child(4){animation-delay:.29s;}
.abt-anim.is-inview .abt-figure{
    animation:abtFadeScale 1s cubic-bezier(.2,.7,.3,1) both;
    animation-delay:.1s;
}

/* ============================================================
   中等屏幕（997 - 1200px）：固定 px，保持左右布局
   ============================================================ */
@media all and (min-width:997px) and (max-width:1200px){
    .index__about.abt-section{padding:0 40px;}
    .abt-inner{max-width:1100px;gap:44px;}
    .abt-head{padding-top:26px;}
    .abt-head__en{font-size:38px;}
    .abt-head__cn{font-size:40px;}
    .abt-head__sub{margin-top:12px;font-size:17px;}
    .abt-desc{margin-top:26px;}
    .abt-desc p{font-size:15px;line-height:1.9;}
    .abt-stats{margin-top:30px;gap:10px;}
    .abt-stats__item{flex:1 1 0;width:auto;min-width:0;height:100px;}
    .abt-stats__num em{font-size:32px;}
    .abt-stats__item.is-lg .abt-stats__num em{font-size:27px;}
    .abt-stats__item.is-xl .abt-stats__num em{font-size:22px;}
    .abt-stats__num i{font-size:14px;}
    .abt-stats__label{margin-top:10px;font-size:14px;}
    .abt-more{margin-top:28px;}
    .abt-more a{font-size:16px;gap:8px;}
    .abt-more svg{width:22px;height:22px;}
    .abt-figure{flex:0 0 40%;width:40%;height:auto;aspect-ratio:711 / 631;max-height:58vh;border-radius:12px;}
    @keyframes abtFadeUp{
        from{opacity:0;transform:translateY(24px);}
        to{opacity:1;transform:translateY(0);}
    }
    @keyframes abtFadeScale{
        from{opacity:0;transform:translateY(28px) scale(.985);}
        to{opacity:1;transform:translateY(0) scale(1);}
    }
}

/* ============================================================
   平板（769 - 996px）：空间有限，左右布局用紧凑尺寸
   ============================================================ */
@media all and (min-width:769px) and (max-width:996px){
    .index__about.abt-section{padding:0 26px;}
    .abt-inner{max-width:1100px;gap:26px;}
    .abt-head{padding-top:22px;}
    .abt-head__en{font-size:28px;letter-spacing:.04em;}
    .abt-head__cn{font-size:32px;}
    .abt-head__sub{margin-top:8px;font-size:14px;}
    .abt-head:after{margin-top:10px;}
    .abt-desc{margin-top:18px;}
    .abt-desc p{font-size:13px;line-height:1.85;}
    .abt-stats{margin-top:22px;gap:8px;}
    .abt-stats__item{flex:1 1 0;width:auto;min-width:0;height:86px;}
    .abt-stats__num em{font-size:25px;}
    .abt-stats__item.is-lg .abt-stats__num em{font-size:21px;}
    .abt-stats__item.is-xl .abt-stats__num em{font-size:17px;}
    .abt-stats__num i{font-size:11px;}
    .abt-stats__label{margin-top:8px;font-size:12px;}
    .abt-more{margin-top:20px;}
    .abt-more a{font-size:14px;gap:6px;}
    .abt-more svg{width:18px;height:18px;}
    .abt-figure{flex:0 0 34%;width:34%;height:auto;aspect-ratio:711 / 631;max-height:50vh;border-radius:10px;}
    @keyframes abtFadeUp{
        from{opacity:0;transform:translateY(20px);}
        to{opacity:1;transform:translateY(0);}
    }
    @keyframes abtFadeScale{
        from{opacity:0;transform:translateY(24px) scale(.985);}
        to{opacity:1;transform:translateY(0) scale(1);}
    }
}

/* ============================================================
   移动端竖屏（<= 768px）：按手机版设计稿
   顺序 = 居中标题 → 通栏图片 → 一段正文 → 四格数据 → 右对齐查看详情
   基准宽度 750px（站点 viewport 为 width=750，此处直接用 px）
   ============================================================ */
@media all and (max-width:768px){
    .index__about.abt-section{
        display:block;
        height:auto;
        padding:26px 24px 34px;
    }
    .abt-inner{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        max-width:none;
    }
    /* 让左栏内容参与整体排序：标题在图片前、正文在图片后 */
    .abt-content{display:contents;}

    /* 标题区：整体居中，水印压在标题上方 */
    .abt-head{
        order:1;
        padding-top:18px;
        text-align:center;
    }
    .abt-head__en{
        left:50%;
        transform:translateX(-50%);
        font-size:42px;
        letter-spacing:.04em;
    }
    .abt-head__cn{
        font-size:58px;
        text-align:center;
    }
    /* 标题下方红色短线（仅手机版设计稿有） */
    .abt-head__cn:after{
        content:"";
        display:block;
        width:52px;
        height:4px;
        margin:14px auto 0;
        background:var(--abt-red);
    }
    .abt-head__sub{
        margin-top:22px;
        font-size:20px;
        line-height:1.5;
        text-align:center;
    }
    .abt-head:after{display:none;}

    /* 通栏图片 */
    .abt-figure{
        order:2;
        width:100%;
        height:auto;
        aspect-ratio:8 / 7;
        max-height:none;
        margin-top:30px;
        border-radius:11px;
        box-shadow:0 6px 18px rgba(0,0,0,.08);
    }

    /* 正文：两段并作一整段，首行缩进 */
    .abt-desc{
        order:3;
        margin-top:36px;
        color:#3c3c3c;
        text-indent:2em;
    }
    .abt-desc p{
        display:inline;
        margin:0;
        text-indent:0;
        font-size:21px;
        line-height:1.62;
        text-align:justify;
    }

    /* 四格数据 */
    .abt-stats{
        order:4;
        margin-top:32px;
        gap:16px;
    }
    .abt-stats__item{
        flex:1 1 0;
        width:auto;
        min-width:0;
        height:101px;
        padding:8px 2px 6px;
        border-color:rgba(191,0,8,.8);
    }
    .abt-stats__num em{font-size:36px;}
    .abt-stats__item.is-lg .abt-stats__num em{font-size:31px;}
    .abt-stats__item.is-xl .abt-stats__num em{font-size:25px;}
    .abt-stats__num i{font-size:17px;margin-left:1px;}
    .abt-stats__label{margin-top:10px;font-size:20px;}

    /* 查看详情：右对齐 */
    .abt-more{
        order:5;
        margin-top:30px;
        text-align:right;
    }
    .abt-more a{font-size:24px;gap:6px;}
    .abt-more svg{width:26px;height:26px;}

    @keyframes abtFadeUp{
        from{opacity:0;transform:translateY(16px);}
        to{opacity:1;transform:translateY(0);}
    }
    @keyframes abtFadeScale{
        from{opacity:0;transform:translateY(16px) scale(.985);}
        to{opacity:1;transform:translateY(0) scale(1);}
    }
}