/* ========== 1. 顶部横幅 ========== */
.assistant-banner{
  background:                    /* 【属性】一次性声明背景相关所有子属性 */
    linear-gradient(             /* 【函数】生成一张“渐变图”，当做背景图用 */
      -48deg,                    /* 【角度】负值=逆时针；48°≖从左上→右下斜切，视觉更动感 */
      #F6433F,                   /* 【色标1】鲜红色，放在渐变起点，抓眼球 */
      #FD644F                    /* 【色标2】橘红色，放在渐变终点，形成自然过渡 */
    );                           /* 不写这行→背景就是默认透明，品牌红缺失，横幅失去“一眼识别” */
}

/* ========== 2. 轮播当前点 ========== */
.moments-function               /* 【限定范围】只影响“动态朋友圈”区块，避免污染其他 Swiper */
.swiper-container               /* 【限定范围】只影响 Swiper 插件生成的容器 */
.swiper-pagination-bullet-active/* 【伪类】插件自动给“当前激活的小圆点”加的这个类 */
{
  background:                    /* 【属性】填充小圆点的“实心”部分 */
    linear-gradient(             /* 同样用红→橘红渐变，与横幅形成品牌色呼应 */
      -48deg,                    /* 同一角度，保证整套视觉体系一致 */
      #F6433F,                   /* 起点色 */
      #FD644F                    /* 终点色 */
    );                           /* 不写→小圆点是插件默认的纯蓝色，品牌感瞬间断开 */
}

/* ========== 3. 轮播小圆点悬停 ========== */
.moments-function 
.swiper-container 
.swiper-pagination-bullet:hover /* 【伪类】鼠标悬停时才会匹配 */
{
  border-color: #F44E44;        /* 【边框色】橘红色，与渐变里的主色同一色相，微亮 6% 提醒可点击 */
                                 /* 不写→悬停无反馈，用户不知道这个圆点能不能点 */
}

/* ========== 4. 信用卡介绍卡片 ========== */
.credit-icon .item{              /* 【双层类】限定“信用图标”区域里的每一个卡片 */
  width: 366px;                  /* 【固定宽】366 px 是 UI 稿里横向刚好放 3 列的数值 */
  height: 383px;                 /* 【固定高】383 px 是 UI 稿里与插图、文案三行刚好不挤的数值 */
  background: #FFFFFF;           /* 【背景色】纯白，拉开与页面灰底的层次；不写→卡片跟背景糊成一片 */
  box-shadow:                     /* 【阴影】制造“浮起”错觉，让卡片看起来像 Material Card */
    0px                          /* 水平偏移=0，阴影垂直向下，不歪斜 */
    3px                          /* 垂直偏移=3 px，阴影紧贴身，显得轻盈 */
    43px                         /* 模糊半径=43 px，很大，营造柔和弥散效果 */
    0px                          /* 扩展半径=0，不改变阴影大小，只模糊 */
    rgba(65, 90, 140, 0.19);     /* 颜色=深蓝灰+19% 透明度，与整体冷色调统一，不刺眼 */
  border-radius: 10px;           /* 【圆角】10 px 让直角变“友好”，不写→卡片呆板、商务感太重 */
}

/* ========== 5. 卡片内部图标 ========== */
.credit-icon .item img{
  margin-top: 60px;              /* 【上外边距】把图标往下推 60 px，留出顶部“呼吸区” */
                                 /* 不写→图标贴顶，视觉上“头重脚轻”，用户第一眼难受 */
}

/* ========== 6. 卡片主标题 ========== */
.credit-icon .item h4{
  font-size: 26px;               /* 【字号】26 px 介于“标题”与“正文”之间，突出但不夸张 */
  color: #3B426B;                /* 【字色】深蓝灰，与主品牌红形成冷暖对比，可读性高 */
                                 /* 不写→继承 body 默认黑，呆板且无品牌区分度 */
}

/* ========== 7. 卡片描述文字 ========== */
.credit-icon .item p{
  color: #999CA7;                /* 【字色】中性灰偏蓝，降低对比度，视觉层级下降，让用户先读 h4 */
  font-size: 18px;               /* 【字号】18 px 比正文略大，保证 3 行描述也不挤 */
                                 /* 不写→默认 16 px 黑色，与标题拉不开层次，页面显得“平” */
}