/* 规范:页面头部使用科技蓝渐变 */ .hero-section { background: linear-gradient( to right, rgba(224, 242, 254, 0.98) 0%, rgba(186, 230, 253, 0.95) 50%, rgba(125, 211, 252, 0.9) 100% ); color: var(--brand-text-default); padding: 60px 0 40px; text-align: center; border: 1px solid rgba(14, 165, 233, 0.25); box-shadow: 0 2px 8px rgba(14, 165, 233, 0.12); } .hero-section .section-title { color: var(--brand-text-default); } .hero-section .section-subtitle { color: var(--text-light); } /* ========== 为什么需要风险管理(图示化) ========== */ .section-why-rm .section-title { margin-bottom: 8px; } .section-why-rm .section-subtitle { margin-bottom: 28px; max-width: 720px; margin-left: auto; margin-right: auto; } .why-rm-diagram { position: relative; margin-bottom: 28px; } .why-rm-center { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 160px; height: 160px; margin: 0 auto 24px; padding: 20px; background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(56, 189, 248, 0.08) 100%); border: 2px solid rgba(14, 165, 233, 0.35); border-radius: 50%; box-shadow: 0 4px 20px rgba(14, 165, 233, 0.15); } .why-rm-center-icon { font-size: 40px; margin-bottom: 8px; } .why-rm-center-text { font-size: 15px; font-weight: 600; color: var(--brand-primary); text-align: center; line-height: 1.3; } .why-rm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; } .why-rm-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 16px; background: var(--white); border-radius: 12px; border: 1px solid var(--border-color); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .why-rm-card:hover { border-color: rgba(14, 165, 233, 0.3); box-shadow: 0 6px 24px rgba(14, 165, 233, 0.12); } .why-rm-card-icon { font-size: 36px; margin-bottom: 12px; } .why-rm-card h4 { font-size: 15px; font-weight: 600; margin: 0 0 8px 0; color: var(--brand-primary); line-height: 1.3; } .why-rm-card p { font-size: 13px; line-height: 1.5; color: var(--text-color); margin: 0; } .why-rm-quote { max-width: 720px; margin: 0 auto; padding: 20px 24px !important; border-left: 4px solid var(--brand-primary); background: linear-gradient(to right, rgba(14, 165, 233, 0.06) 0%, transparent 100%); } .why-rm-quote-text { font-size: 15px; line-height: 1.7; color: var(--text-color); margin: 0; font-style: italic; } .why-rm-images { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 20px; } .why-rm-image-wrap { max-width: 900px; width: 100%; margin: 0 auto; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .why-rm-image { display: block; width: 100%; height: auto; vertical-align: middle; } @media (max-width: 768px) { .why-rm-center { width: 130px; height: 130px; font-size: 14px; } .why-rm-center-icon { font-size: 32px; } .why-rm-cards { grid-template-columns: 1fr 1fr; } } /* ========== 临床试验风险管理首页 ========== */ .section-block-title { font-size: 22px; font-weight: 600; margin: 0 0 12px 0; color: var(--brand-text-default); } .section-block-desc { font-size: 16px; line-height: 1.7; color: var(--text-color); margin: 0 0 20px 0; } .clinical-trial-purpose-card .purpose-list { list-style: none; padding: 0; margin: 0; } .clinical-trial-purpose-card .purpose-list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; font-size: 15px; line-height: 1.6; color: var(--text-color); border-bottom: 1px solid var(--border-color); } .clinical-trial-purpose-card .purpose-list li:last-child { border-bottom: none; } .purpose-icon { flex-shrink: 0; font-size: 24px; } .pathway-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--padding-md); margin-top: 20px; } .pathway-card { display: flex; flex-direction: column; padding: 24px; background: var(--white); border-radius: 8px; border: 1px solid var(--border-color); text-decoration: none; color: inherit; transition: box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease; } .pathway-card:hover { border-color: rgba(var(--brand-primary-rgb), 0.3); box-shadow: var(--shadow-hover); filter: brightness(1.02); } .pathway-icon { font-size: 40px; margin-bottom: 12px; } .pathway-card h3 { font-size: 20px; font-weight: 600; margin: 0 0 10px 0; color: var(--brand-primary); } .pathway-card p { font-size: 14px; line-height: 1.6; color: var(--text-color); margin: 0 0 16px 0; flex: 1; } .pathway-link { font-size: 14px; color: var(--brand-primary); font-weight: 500; } .pathway-card:hover .pathway-link { text-decoration: underline; } .contact-note { margin-top: 12px; font-size: 14px; color: var(--text-light); } /* ========== 从安全数据到患者救治的闭环(左右结构) ========== */ .section-closed-loop .section-title { margin-bottom: 24px; } .closed-loop-layout { display: flex; flex-direction: row; align-items: stretch; gap: 0; max-width: 1100px; margin: 0 auto; } .closed-loop-left { flex: 0 1 48%; min-width: 0; display: flex; flex-direction: column; } .closed-loop-arrow { flex: 0 0 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--brand-primary); padding: 0 8px; } .closed-loop-arrow-icon { font-size: 28px; line-height: 1; opacity: 0.9; } .closed-loop-arrow-label { font-size: 11px; color: var(--text-light); white-space: nowrap; } .closed-loop-right { flex: 0 1 48%; min-width: 0; display: flex; flex-direction: column; } .closed-loop-subtitle { font-size: 16px; font-weight: 600; margin: 0 0 12px 0; color: var(--brand-primary); } .closed-loop-image-wrap { flex: 1; min-height: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .closed-loop-image { display: block; width: 100%; height: auto; vertical-align: middle; } .closed-loop-measures { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; } .closed-loop-measure-card { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 14px; background: var(--white); border-radius: 8px; border: 1px solid var(--border-color); text-decoration: none; color: inherit; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .closed-loop-measure-card:hover { border-color: rgba(var(--brand-primary-rgb), 0.35); box-shadow: 0 2px 12px rgba(14, 165, 233, 0.15); } .closed-loop-measure-icon { font-size: 22px; margin-bottom: 6px; line-height: 1; } .closed-loop-measure-card h4 { font-size: 15px; font-weight: 600; margin: 0 0 4px 0; color: var(--brand-primary); } .closed-loop-measure-card p { font-size: 12px; line-height: 1.45; color: var(--text-color); margin: 0; flex: 1; min-height: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } @media (max-width: 768px) { .closed-loop-layout { flex-direction: column; gap: 20px; } .closed-loop-left, .closed-loop-right { flex: 1 1 auto; } .closed-loop-arrow { flex: none; padding: 12px 0; transform: rotate(90deg); } .closed-loop-image-wrap { flex: none; } .closed-loop-measures { flex: none; gap: 12px; } .closed-loop-measure-card { flex: none; min-height: auto; } } /* ========== 一键获取全部保司报价 ========== */ .section-get-quotes .container { max-width: 900px; } .get-quotes-card { padding: 24px 28px; margin-bottom: 20px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--white); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } .get-quotes-title { font-size: 20px; font-weight: 600; margin: 0 0 12px 0; color: var(--brand-primary); } .get-quotes-desc { font-size: 14px; line-height: 1.65; color: var(--text-color); margin: 0 0 20px 0; } .get-quotes-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .get-quotes-btn { padding: 12px 24px; font-size: 15px; font-weight: 500; border-radius: 8px; cursor: pointer; border: none; background: var(--brand-primary); color: var(--white); transition: background 0.2s ease, box-shadow 0.2s ease; } .get-quotes-btn:hover { background: #0c8ac7; box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35); } /* ========== 保险方案页面 4×3 网格 ========== */ .section-insurance-grid .container { max-width: 1100px; } .insurance-page-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto 1fr; gap: 16px; min-height: 420px; } .insurance-grid-cell { padding: 20px; background: var(--white); border-radius: 10px; border: 1px solid var(--border-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .insurance-cell-title { font-size: 17px; font-weight: 600; margin: 0 0 12px 0; color: var(--brand-primary); } .insurance-grid-cell p { font-size: 14px; line-height: 1.65; color: var(--text-color); margin: 0; } /* 左上 3×1:基础保障 */ .insurance-cell-basic { grid-column: 1 / 4; grid-row: 1; } /* 中部 3×1:全面保障 */ .insurance-cell-full { grid-column: 1 / 4; grid-row: 2; } /* 右侧 1×2:保险条款标准核心内容 */ .insurance-cell-standard { grid-column: 4; grid-row: 1 / 3; } .insurance-standard-list { list-style: none; padding: 0; margin: 0; } .insurance-standard-list li { position: relative; padding: 8px 0 8px 18px; font-size: 14px; line-height: 1.5; color: var(--text-color); } .insurance-standard-list li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary); } /* 底部 4×1:保险服务 */ .insurance-cell-services { grid-column: 1 / -1; grid-row: 3; } .insurance-cell-services .service-item { margin-bottom: 0; } /* ========== 服务供应商 ========== */ .section-service-providers { margin-top: 32px; } .section-service-providers .section-title { font-size: 22px; font-weight: 600; margin: 0 0 12px 0; color: var(--brand-text-default); } .section-service-providers .section-desc { font-size: 15px; color: var(--text-color); margin: 0 0 20px 0; line-height: 1.6; } .service-provider-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 32px; margin-top: 16px; } .service-provider-logo-item { display: flex; align-items: center; justify-content: center; width: 140px; height: 80px; padding: 12px 16px; background: var(--white); border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: box-shadow 0.2s ease; } .service-provider-logo-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .service-provider-logo-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } @media (max-width: 768px) { .insurance-page-grid { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; } .insurance-cell-basic, .insurance-cell-full, .insurance-cell-standard, .insurance-cell-services { grid-column: 1; grid-row: auto; } } /* 保证方案页:保证基金的基本逻辑图 */ .guarantee-logic-figure { margin: 32px 0 40px; } .guarantee-logic-figure h3 { font-size: 20px; margin: 0 0 16px 0; color: var(--brand-primary); } .guarantee-logic-img { display: block; max-width: 100%; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border-color); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } /* 保证基金管理形式比较表 */ .guarantee-compare-section { margin: 40px 0 40px; } .guarantee-compare-section h3 { font-size: 20px; margin: 0 0 16px 0; color: var(--brand-primary); } .guarantee-compare-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border-color); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } .guarantee-compare-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--white); } .guarantee-compare-table thead { background: linear-gradient(to right, rgba(14, 165, 233, 0.12) 0%, rgba(56, 189, 248, 0.08) 100%); border-bottom: 2px solid rgba(14, 165, 233, 0.35); } .guarantee-compare-table th { padding: 14px 16px; text-align: left; font-weight: 600; color: var(--brand-primary); white-space: nowrap; } .guarantee-compare-table th:first-child { min-width: 100px; } .guarantee-compare-table td { padding: 14px 16px; line-height: 1.6; color: var(--text-color); border-bottom: 1px solid var(--border-color); vertical-align: top; } .guarantee-compare-table tbody tr:last-child td { border-bottom: none; } .guarantee-compare-table tbody tr:hover { background: rgba(14, 165, 233, 0.04); } .guarantee-compare-table .compare-row-label { font-weight: 600; color: var(--brand-text-default); min-width: 100px; } /* 保险+保证方案页:比较区块与配置步骤 */ .insurance-guarantee-compare { margin-bottom: 40px; } .config-section { margin-top: 32px; } .config-content { padding: 0 0 10px 0; } .config-steps { list-style: none; padding: 0; margin: 0; counter-reset: config-step; } .config-steps li { position: relative; padding: 20px 0 20px 52px; border-bottom: 1px solid var(--border-color); counter-increment: config-step; } .config-steps li:last-child { border-bottom: none; } .config-steps li::before { position: absolute; left: 0; top: 22px; width: 32px; height: 32px; line-height: 32px; text-align: center; font-size: 14px; font-weight: 700; color: var(--white); background: var(--brand-primary); border-radius: 50%; content: counter(config-step); } .config-steps li strong { display: block; font-size: 17px; color: var(--brand-text-default); margin-bottom: 8px; } .config-steps li p { font-size: 15px; line-height: 1.7; color: var(--text-color); margin: 0; } @media (max-width: 768px) { .guarantee-compare-table-wrap { margin: 0 -16px; border-radius: 0; border-left: none; border-right: none; } .guarantee-compare-table th, .guarantee-compare-table td { padding: 12px 14px; font-size: 13px; } .guarantee-compare-table th { white-space: normal; } } /* 相关服务:风险减量 / 外溢风险管理 分栏并列 */ .related-service-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; margin-top: 8px; } .related-service-column { padding: 20px; background: linear-gradient(to bottom, rgba(14, 165, 233, 0.04) 0%, transparent 100%); border-radius: 12px; border: 1px solid var(--border-color); } .related-service-column h3 { margin-top: 0; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid rgba(14, 165, 233, 0.25); color: var(--brand-primary); } .related-service-column .service-list { margin: 12px 0 16px; } .related-service-column .service-list li { padding: 6px 0; } .related-service-column p { margin-bottom: 12px; } .related-service-column p:last-child { margin-bottom: 0; } @media (max-width: 768px) { .related-service-columns { grid-template-columns: 1fr; gap: 24px; } } .service-item { margin-bottom: 40px; } .service-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid var(--border-color); } .service-icon { font-size: 48px; } .service-header h2 { font-size: 28px; color: var(--primary-color); margin: 0; } .service-content h3 { font-size: 20px; margin: 25px 0 15px; color: var(--text-color); } .service-content p { font-size: 16px; line-height: 1.8; color: var(--text-color); margin-bottom: 15px; } .service-list { list-style: none; padding: 0; margin: 15px 0; } .service-list li { padding: 10px 0; font-size: 16px; color: var(--text-color); } .insurance-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 20px 0; } .insurance-item { background: var(--bg-color); padding: 20px; border-radius: 8px; border-left: 4px solid var(--primary-color); } .insurance-item h4 { font-size: 18px; margin-bottom: 10px; color: var(--primary-color); } .insurance-item p { font-size: 14px; color: var(--text-light); margin: 0; } .guarantee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin: 30px 0; } .guarantee-item { background: var(--bg-color); padding: 25px; border-radius: 8px; border-left: 4px solid var(--primary-color); } .guarantee-item h4 { font-size: 20px; margin-bottom: 15px; color: var(--primary-color); } .guarantee-item ul { list-style: none; padding: 0; } .guarantee-item li { padding: 8px 0; font-size: 15px; color: var(--text-color); } .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin: 30px 0; } .process-step { text-align: center; } .step-number { width: 50px; height: 50px; background: var(--primary-color); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; margin: 0 auto 15px; } .process-step h4 { font-size: 18px; margin-bottom: 10px; color: var(--text-color); } .process-step p { font-size: 14px; color: var(--text-light); } .intro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 30px; } .intro-grid .card h3 { font-size: 24px; margin-bottom: 15px; color: var(--primary-color); } .value-list { list-style: none; padding: 0; } .value-list li { padding: 10px 0; font-size: 16px; color: var(--text-color); } .value-list a { color: var(--primary-color); text-decoration: none; } .value-list a:hover { text-decoration: underline; } .nav-section { background: var(--bg-color); } .nav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 40px; } .nav-card { background: var(--white); border: 2px solid var(--border-color); border-radius: 12px; padding: 40px 30px; text-align: center; transition: all 0.3s ease; display: block; } .nav-card:hover { border-color: rgba(var(--brand-primary-rgb), 0.3); box-shadow: var(--shadow-hover); filter: brightness(1.02); } .nav-icon { font-size: 64px; margin-bottom: 20px; } .nav-card h3 { font-size: 22px; margin-bottom: 15px; color: var(--text-color); } .nav-card p { font-size: 14px; color: var(--text-light); } /* RMO轮播容器样式 */ .rmo-carousel-container { position: relative; width: 100%; margin-bottom: 30px; } .rmo-carousel-wrapper { position: relative; width: 100%; overflow: hidden; border-radius: 12px; margin-bottom: 20px; } .carousel-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 15px; } .rmo-carousel-track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .rmo-carousel-slide { min-width: 100%; flex-shrink: 0; padding: 0 10px; box-sizing: border-box; } .rmo-intro-card, .rmo-feature-card { background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%); border-left: 4px solid var(--primary-color); display: flex; flex-direction: column; height: 100%; min-height: 200px; margin: 0 auto; max-width: 800px; } .rmo-title-section { text-align: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--border-color); } .rmo-title-section h2 { font-size: 32px; font-weight: 700; color: var(--primary-color); margin-bottom: 10px; } .rmo-subtitle { font-size: 15px; color: var(--text-light); font-style: italic; margin: 0; } .feature-title { font-size: 32px; font-weight: 700; color: #ff6b6b; margin-bottom: 10px; } .rmo-mission { display: flex; flex-direction: column; gap: 12px; flex: 1; } .mission-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 15px; background: var(--white); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; flex: 1; } .mission-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); filter: brightness(1.03); } .mission-icon { font-size: 24px; flex-shrink: 0; line-height: 1; } .mission-content { flex: 1; } .mission-content h3 { font-size: 15px; color: var(--text-color); margin: 0; line-height: 1.5; font-weight: 500; } .rmo-feature-card { border-left: 4px solid #ff6b6b; } @media (max-width: 768px) { .service-header { flex-direction: column; text-align: center; } .insurance-services, .guarantee-grid { grid-template-columns: 1fr; } .process-steps { grid-template-columns: 1fr; } .intro-grid, .nav-grid { grid-template-columns: 1fr; } } /* 轮播导航按钮 */ .carousel-btn { position: relative; background: var(--white); border: none; border-radius: 8px; width: 48px; height: 48px; font-size: 24px; font-weight: bold; color: var(--primary-color); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); line-height: 1; } .carousel-btn:hover { background: var(--primary-color); color: var(--white); box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4); transform: scale(1.1); } .carousel-btn:active { transform: scale(0.95); } .carousel-btn-prev::before { content: '←'; font-size: 20px; } .carousel-btn-next::before { content: '→'; font-size: 20px; } /* 轮播指示器 */ .carousel-indicators { display: flex; justify-content: center; gap: 10px; z-index: 10; } .carousel-indicator { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--primary-color); background: transparent; cursor: pointer; transition: all 0.3s ease; padding: 0; } .carousel-indicator:hover { background: rgba(24, 144, 255, 0.3); } .carousel-indicator.active { background: var(--primary-color); width: 32px; border-radius: 6px; } @media (max-width: 768px) { .rmo-carousel-slide { padding: 0 5px; } .carousel-controls { gap: 15px; margin-top: 12px; } .carousel-btn { width: 40px; height: 40px; } .carousel-btn-prev::before, .carousel-btn-next::before { font-size: 18px; } .carousel-btn-prev { left: 5px; } .carousel-btn-next { right: 5px; } .rmo-intro-card, .rmo-feature-card { min-height: 180px; } .rmo-title-section { margin-bottom: 10px; padding-bottom: 8px; } .rmo-mission { gap: 10px; } .mission-item { padding: 10px 12px; gap: 10px; } .rmo-title-section h2, .feature-title { font-size: 24px; } .mission-content h3 { font-size: 14px; } }