@charset "utf-8";
/* ==================================================
bcom-under.css
内页用布局：under_top / pankuzu / main layout
依赖：bcom-base.css
使用范围示例：
-
- ...
// 页头视觉
- // 面包屑
- ... // 内页主体
================================================== */
/* ========== 1. 内页头图区域（under_top） ========== */
/* 整块区域，可以加背景图片或渐变 */
.bcom-under-top {
position: relative;
padding: 80px 0;
background-color: #1A7488; /* 深蓝绿主色 */
color: #FFFFFF;
overflow: hidden;
}
.bcom-under-top--soft {
background: linear-gradient(135deg, #1A7488 0%, #82CDDD 60%, #F5FAFC 100%);
}
.bcom-under-top--image {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* 半透明遮罩，方便叠图片 */
.bcom-under-top::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.35) 0%,
rgba(0, 0, 0, 0.10) 40%,
rgba(0, 0, 0, 0.0) 100%
);
pointer-events: none;
}
.bcom-under-top-inner {
position: relative;
z-index: 1;
}
/* 用 .bcom-container 包装即可 */
.bcom-under-top .bcom-container {
display: flex;
flex-direction: column;
justify-content: center;
}
/* 标题区 */
.bcom-under-top-label {
display: inline-block;
margin-bottom: 12px;
padding: 0.4rem 1.6rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.7);
font-size: 1.2rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.bcom-under-top-title {
font-size: 3.0rem;
line-height: 1.5;
letter-spacing: 0.20em;
font-weight: 600;
margin-bottom: 12px;
}
.bcom-under-top-title .bcom-under-top-title-sub {
display: block;
font-size: 1.6rem;
font-weight: 500;
letter-spacing: 0.12em;
margin-top: 4px;
}
.bcom-under-top-desc {
font-size: 1.4rem;
line-height: 2.1;
margin-top: 12px;
max-width: 640px;
}
/* 内页头图右侧可以放小插图/图标 */
.bcom-under-top-layout {
display: flex;
align-items: center;
gap: 40px;
}
.bcom-under-top-main {
flex: 1 1 auto;
min-width: 0;
}
.bcom-under-top-visual {
flex: 0 0 280px;
}
.bcom-under-top-visual img {
max-width: 100%;
height: auto;
}
/* 响应式 */
@media (max-width: 1024px) {
.bcom-under-top {
padding: 60px 0;
}
}
@media (max-width: 767px) {
.bcom-under-top {
padding: 40px 0 36px;
}
.bcom-under-top-layout {
flex-direction: column;
align-items: flex-start;
}
.bcom-under-top-title {
font-size: 2.4rem;
}
.bcom-under-top-desc {
font-size: 1.3rem;
}
.bcom-under-top-visual {
width: 60%;
}
}
/* ========== 2. 面包屑（pankuzu） ========== */
.bcom-breadcrumb {
background-color: #F5FAFC;
font-size: 1.2rem;
color: #726048;
}
.bcom-breadcrumb-inner {
padding: 10px 0;
}
/* 列表结构：
*/
.bcom-breadcrumb-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
}
.bcom-breadcrumb-item {
display: inline-flex;
align-items: center;
list-style: none;
max-width: 100%;
}
.bcom-breadcrumb-item a {
color: inherit;
text-decoration: none;
}
.bcom-breadcrumb-item a:hover {
opacity: 0.7;
}
/* 分隔符 ">" */
.bcom-breadcrumb-item + .bcom-breadcrumb-item::before {
content: ">";
display: inline-block;
margin: 0 6px;
color: #B3A38C;
font-size: 1.1rem;
}
.bcom-breadcrumb-item--current {
color: #170C03;
font-weight: 600;
}
/* 手机上压缩高度 */
@media (max-width: 767px) {
.bcom-breadcrumb-inner {
padding: 8px 0;
}
}
/* ========== 3. 内页主体布局（basic 容器） ========== */
/* 整个内页 main 区域 */
.bcom-under-main {
padding: 80px 0 120px;
background-color: #FDFDFD;
}
/* 页面顶部总标题（在内页正文用） */
.bcom-under-heading {
margin-bottom: 40px;
}
.bcom-under-heading-main {
margin-bottom: 8px;
font-size: 2.4rem;
line-height: 1.5;
letter-spacing: 0.18em;
color: #170C03;
}
.bcom-under-heading-sub {
font-size: 1.3rem;
color: #726048;
letter-spacing: 0.20em;
text-transform: uppercase;
}
.bcom-under-heading-desc {
margin-top: 12px;
font-size: 1.4rem;
color: #555555;
}
/* 通用正文段落排版 */
.bcom-under-body {
font-size: 1.4rem;
line-height: 2.1;
}
.bcom-under-body p {
margin-bottom: 1.2em;
}
.bcom-under-body a {
color: #35ADD3;
}
.bcom-under-body a:hover {
opacity: 0.7;
}
/* 内页布局：主内容 + 侧栏 */
.bcom-under-layout {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
}
.bcom-under-content {
flex: 1 1 auto;
min-width: 0;
}
.bcom-under-sidebar {
flex: 0 0 280px;
}
/* 侧栏卡片（比如 QA 分类、联系方式、小菜单） */
.bcom-under-sidebar-box {
background-color: #FFFFFF;
border-radius: 16px;
padding: 20px 24px;
box-shadow: 0 4px 16px rgba(0,0,0,0.04);
margin-bottom: 16px;
}
.bcom-under-sidebar-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 10px;
letter-spacing: 0.1em;
}
/* 响应式把侧栏放到下方 */
@media (max-width: 1024px) {
.bcom-under-main {
padding: 60px 0 80px;
}
}
@media (max-width: 767px) {
.bcom-under-main {
padding: 40px 0 60px;
}
.bcom-under-layout {
flex-direction: column;
gap: 32px;
}
.bcom-under-sidebar {
flex: 1 1 auto;
width: 100%;
}
}
/* ========== 4. 内页内容块（block） ========== */
/* 用于内页里的“卡片型 section”，比如价格说明、流程说明等 */
.bcom-under-block {
background-color: #FFFFFF;
border-radius: 16px;
padding: 32px 32px;
box-shadow: 0 4px 16px rgba(0,0,0,0.04);
margin-bottom: 32px;
}
.bcom-under-block--soft {
background-color: #F5FAFC;
}
.bcom-under-block--border {
border: 1px solid #E2C59F;
box-shadow: none;
}
.bcom-under-block-title {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 16px;
letter-spacing: 0.10em;
color: #170C03;
}
.bcom-under-block-title-sub {
display: block;
font-size: 1.2rem;
color: #8B8B8B;
margin-top: 4px;
}
.bcom-under-block-body {
font-size: 1.4rem;
line-height: 2.0;
}
.bcom-under-block-body p {
margin-bottom: 1.0em;
}
/* block 中的分割线 */
.bcom-under-block-divider {
border-top: 1px solid #E2C59F;
margin: 20px 0;
}
/* 手机上缩小 padding */
@media (max-width: 767px) {
.bcom-under-block {
padding: 24px 20px;
}
}
/* ========== 5. 简易分页 / 子导航（可选） ========== */
/* 如果你的内页有 tab 栏或小导航，可以复用这一套 */
.bcom-under-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
}
.bcom-under-tab {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.7rem 1.6rem;
border-radius: 999px;
border: 1px solid #E2C59F;
background-color: #FFFFFF;
font-size: 1.3rem;
letter-spacing: 0.08em;
color: #170C03;
cursor: pointer;
text-decoration: none;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.bcom-under-tab:hover {
background-color: #F5FAFC;
}
.bcom-under-tab--active {
background-color: #1A7488;
border-color: #1A7488;
color: #FFFFFF;
}
/* 手机时让 tabs 换行撑满 */
@media (max-width: 767px) {
.bcom-under-tab {
flex: 1 1 auto;
justify-content: center;
}
}