@CHARSET "UTF-8";
/* ============================================================
   V-Ran 蔚然远行 - 关于我们(公司简介)专属样式
   配色取自公司 logo:帆船青 #1E9FD8 / 文字蓝 #1B5C94 / 浅底 #EAF6FD
   依赖: Bootstrap 3, Font Awesome 4.4, chem-base.css, chem-home.css
   ============================================================ */

/* ---------- Hero 横幅 ---------- */
.vr-about-hero {
    position: relative;
    background: linear-gradient(135deg, #143d66 0%, #1b5c94 45%, #1e9fd8 100%);
    color: #fff;
    padding: 80px 20px 90px;
    overflow: hidden;
}

.vr-about-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.vr-about-hero-deco {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 240px;
    color: rgba(255, 255, 255, .07);
}

.vr-about-hero-inner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.vr-about-hero h1 {
    margin: 14px 0 18px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.35;
}

.vr-about-hero-sub {
    margin: 0 0 32px;
    font-size: 15px;
    line-height: 2;
    color: rgba(255, 255, 255, .88);
    max-width: 820px;
}

/* 关键数字指标条 */
.vr-about-hero-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.vr-about-hero-stats li {
    flex: 1 1 200px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 6px;
    padding: 18px 22px;
    text-align: left;
    transition: background .25s ease, transform .25s ease;
}

.vr-about-hero-stats li:hover {
    background: rgba(255, 255, 255, .18);
    transform: translateY(-2px);
}

.vr-about-hero-stats strong {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.vr-about-hero-stats span {
    font-size: 13px;
    color: rgba(255, 255, 255, .82);
}

/* ---------- 公司概况 ---------- */
.vr-about-overview {
    background: #fff;
}

.vr-about-overview-text p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 2;
    color: #5b6673;
}

.vr-about-overview-text b {
    color: #1b5c94;
    font-weight: 600;
}

.vr-about-info-card {
    background: linear-gradient(180deg, #fafcfe 0%, #f1f7fb 100%);
    border: 1px solid #e6e8eb;
    border-top: 3px solid #1e9fd8;
    border-radius: 6px;
    padding: 22px 24px 18px;
    box-shadow: 0 2px 8px rgba(27, 92, 148, .05);
}

.vr-about-info-card h5 {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 600;
    color: #1b5c94;
    border-bottom: 1px dashed #d8e1e8;
    padding-bottom: 10px;
}

.vr-info-table {
    width: 100%;
    border-collapse: collapse;
}

.vr-info-table th,
.vr-info-table td {
    padding: 9px 0;
    vertical-align: top;
    font-size: 13px;
    line-height: 1.7;
    border-bottom: 1px dotted #e6edf2;
}

.vr-info-table th {
    width: 80px;
    color: #8a9099;
    font-weight: 500;
    text-align: left;
}

.vr-info-table td {
    color: #2a3744;
}

/* ---------- 核心业务 ---------- */
.vr-about-biz {
    background: #f6f8fa;
    border-top: 1px solid #eef1f4;
    border-bottom: 1px solid #eef1f4;
}

.vr-about-biz-card {
    position: relative;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 6px;
    padding: 30px 22px 26px;
    margin-bottom: 22px;
    text-align: center;
    height: 100%;
    transition: box-shadow .25s ease, transform .25s ease;
    overflow: hidden;
}

.vr-about-biz-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #1e9fd8 0%, #1b5c94 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.vr-about-biz-card:hover {
    box-shadow: 0 6px 22px rgba(30, 159, 216, .16);
    transform: translateY(-3px);
}

.vr-about-biz-card:hover::before {
    transform: scaleX(1);
}

.vr-about-biz-num {
    position: absolute;
    right: 16px;
    top: 14px;
    font-size: 38px;
    font-weight: 700;
    color: #eaf6fd;
    line-height: 1;
    letter-spacing: 1px;
}

.vr-about-biz-card .fa {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 50%;
    background: #eaf6fd;
    color: #1e9fd8;
    font-size: 26px;
    margin-bottom: 14px;
}

.vr-about-biz-card h4 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    color: #22303e;
}

.vr-about-biz-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: #6b7280;
}

/* ---------- 核心优势 ---------- */
.vr-about-adv {
    background: #fff;
}

.vr-about-adv-item {
    text-align: center;
    padding: 16px 10px;
}

.vr-about-adv-icon {
    width: 64px;
    height: 64px;
    line-height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eaf6fd 0%, #d4ecfa 100%);
    color: #1e9fd8;
    font-size: 28px;
}

.vr-about-adv-item h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #22303e;
}

.vr-about-adv-item p {
    margin: 0;
    font-size: 12px;
    color: #8a9099;
    line-height: 1.8;
}

/* ---------- 发展历程(时间轴) ---------- */
.vr-about-timeline {
    background: #f6f8fa;
    border-top: 1px solid #eef1f4;
    border-bottom: 1px solid #eef1f4;
    padding: 52px 0 56px;
}

.vr-timeline {
    list-style: none;
    margin: 0 auto;
    padding: 10px 0 0;
    max-width: 880px;
    position: relative;
}

.vr-timeline::before {
    content: "";
    position: absolute;
    left: 110px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #1e9fd8 0%, #1b5c94 100%);
    border-radius: 2px;
}

.vr-timeline li {
    position: relative;
    padding: 0 0 30px 175px;
    min-height: 90px;
}

.vr-timeline li:last-child {
    padding-bottom: 0;
}

.vr-tl-dot {
    position: absolute;
    left: 102px;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid #1e9fd8;
    box-shadow: 0 0 0 4px #eaf6fd;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.vr-tl-year {
    position: absolute;
    left: 0;
    top: 4px;
    width: 90px;
    font-size: 22px;
    font-weight: 700;
    color: #1b5c94;
    text-align: right;
    letter-spacing: 1px;
    /* 年份不折行：宽度固定 90px, 长年份(如 2026 · 至今)换行会顶乱时间轴 */
    white-space: nowrap;
    transition: color .25s ease;
}

/* 年份副标: 「· 至今」这类后缀, 用小字号挂在年份下方, 避免撑破 90px 年份区 */
.vr-tl-year em {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0;
    color: #8a9099;
}

.vr-tl-card {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 6px;
    padding: 14px 20px;
    transition: box-shadow .25s ease, transform .25s ease;
}

/*
 * 悬停联动: 卡片右移 + 圆点高亮 + 年份变品牌色。
 *
 * 注意: .vr-tl-year 必须写在 .vr-tl-card 外面(li 的直接子元素)。
 * 带 transform 的元素会成为后代绝对定位元素的包含块, 年份若留在卡片里,
 * 卡片一 hover 年份的 left:0 就改按卡片计算, 会跳进卡片压住标题文字。
 * 同理年份这里只变色、不做位移, 避免任何跳动。
 */
.vr-timeline li:hover .vr-tl-card {
    box-shadow: 0 4px 14px rgba(30, 159, 216, .14);
    transform: translateX(4px);
}

.vr-timeline li:hover .vr-tl-year {
    color: #1e9fd8;
}

.vr-timeline li:hover .vr-tl-year em {
    color: #5b6673;
}

.vr-timeline li:hover .vr-tl-dot {
    border-color: #1b5c94;
    box-shadow: 0 0 0 6px #d9eefb;
    transform: scale(1.12);
}

.vr-tl-card h5 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #1b5c94;
}

.vr-tl-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.85;
    color: #6b7280;
}

/* ---------- 资质公示 ---------- */
.vr-about-license {
    background: #fff;
}

.vr-about-license-img {
    background: #f6f8fa;
    border: 1px solid #e6e8eb;
    border-radius: 6px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(27, 92, 148, .06);
}

.vr-about-license-img img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.vr-about-license-text h5 {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 600;
    color: #1b5c94;
    padding-bottom: 10px;
    border-bottom: 2px solid #1e9fd8;
    display: inline-block;
}

.vr-about-license-text ul {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.vr-about-license-text li {
    position: relative;
    padding: 6px 0 6px 24px;
    font-size: 13px;
    line-height: 1.85;
    color: #2a3744;
}

.vr-about-license-text li .fa {
    position: absolute;
    left: 0;
    top: 8px;
    color: #1e9fd8;
    font-size: 14px;
}

.vr-about-license-tip {
    background: #f6f8fa;
    border-left: 3px solid #1e9fd8;
    border-radius: 4px;
    padding: 10px 14px;
    margin: 0;
    font-size: 12px;
    color: #5b6673;
    line-height: 1.8;
}

.vr-about-license-tip .fa {
    color: #1e9fd8;
    margin-right: 6px;
}

/* ---------- CTA 行动召唤 ---------- */
.vr-about-cta {
    background: linear-gradient(135deg, #143d66 0%, #1b5c94 60%, #1e9fd8 100%);
    color: #fff;
    padding: 56px 20px;
    text-align: center;
}

.vr-about-cta h3 {
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 700;
}

.vr-about-cta p {
    margin: 0 0 26px;
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
}

.vr-about-cta-btns .btn {
    margin: 0 8px;
    padding: 10px 28px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
}

.vr-about-cta-btns .vr-btn-cta {
    background: #fff;
    color: #1b5c94;
    border: 1px solid #fff;
}

.vr-about-cta-btns .vr-btn-cta:hover {
    background: #eaf6fd;
    color: #14486e;
}

.vr-about-cta-btns .vr-btn-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .7);
}

.vr-about-cta-btns .vr-btn-ghost:hover {
    background: rgba(255, 255, 255, .12);
}

/* ---------- 响应式 ---------- */
@media (max-width: 991px) {
    .vr-about-hero h1 { font-size: 28px; }
    .vr-about-hero-deco { font-size: 140px; right: -20px; }
    .vr-about-hero-stats li { flex: 1 1 45%; }
    .vr-timeline::before { left: 22px; }
    .vr-timeline li { padding-left: 65px; }
    .vr-tl-dot { left: 14px; }
    .vr-tl-year {
        position: static;
        width: auto;
        text-align: left;
        display: block;
        margin-bottom: 4px;
    }

    /* 窄屏空间紧, 悬停时卡片不再横移, 只保留阴影 */
    .vr-timeline li:hover .vr-tl-card {
        transform: none;
    }
}

@media (max-width: 767px) {
    .vr-about-hero { padding: 50px 16px 60px; }
    .vr-about-hero h1 { font-size: 24px; }
    .vr-about-hero-sub { font-size: 14px; line-height: 1.85; }
    .vr-about-hero-deco { display: none; }
    .vr-about-hero-stats li { flex: 1 1 100%; }
    .vr-about-cta-btns .btn { display: block; margin: 0 auto 10px; max-width: 260px; }
}