/* 产品介绍 展示图片 ---start */

/* .scene-card 类定义了每个商品卡片的样式 */
.scene-card {
    display: flex; /* 使用 flexbox 布局 */
    flex-direction: column; /* 垂直排列子元素 */
    justify-content: center; /* 垂直居中对齐子元素 */
    align-items: center; /* 中心对齐子元素 */
    text-align: center; /* 文本居中对齐 */
    border: 0px solid #ddd; /* 边框样式 */
    padding: 10px; /* 内边距 */
    border-radius: 5px; /* 圆角边框 */
    opacity: 1; /* 初始时显示 */
    transform: translateY(0); /* 显示时不偏移 */
    animation: fadeInUp 0.5s forwards; /* 添加动画效果 */
    width: 276px; /* 设置宽度为 276px */
    height: 363px; /* 设置高度为 363px */
    background-color: white;
}

/* 商品图片样式 */
.scene-card img {
    width: 255px; /* 图片宽度 */
    height: 189px; /* 图片高度 */
    object-fit: cover; /* 保持图片比例并裁剪多余部分 */
    margin-bottom: 10px; /* 图片底部边距 */
}

/* 商品名称和用途的样式 */
.scene-name {
    margin-bottom: 10px; /* 下边距 */
    color: #333333;
}

.scene-use {
    margin-bottom: 10px; /* 下边距 */
    color: #999999;
}

/* 价格的样式 */
.price {
    font-weight: bold; /* 粗体字 */
    color: #FFCD55;
}

/* 产品介绍 展示图片 ---end */

/* MORE+ ---start */
.more-link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 47px;
    width: 188px;
    border: 1px solid black; /* 设置边框为黑色 */
    font-weight: lighter; /* 设置字体变细 */
    color: black; /* 设置字体颜色为黑色 */
    text-decoration: none; /* 移除下划线 */
}

/* 在需要时调整对齐的父元素 */
.mt-5 {
    margin-top: 3rem; /* Bootstrap 中的 mt-5 等同于 3rem 的上边距 */
}
/* MORE+ ---end */

/* 产品介绍标题的悬浮效果 ---start */
.hover-effect {
    position: relative; /* 使绝对定位的伪元素相对于此元素定位 */
    text-decoration: none; /* 移除下划线 */
    color: #333; /* 默认文字颜色 */
    font-size: 1rem; /* 默认字体大小 */
    transition: transform 0.3s, color 0.3s; /* 动画过渡效果 */
}

/* 鼠标悬浮效果 */
.hover-effect:hover {
    color: #FFCD54; /* 鼠标悬浮时的文字颜色 */
    transform: scale(1.1); /* 鼠标悬浮时的放大效果 */
}

/* 鼠标悬浮时显示的横线 */
.hover-effect::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: #FFCD54;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: scaleX(0); /* 初始时横线不可见 */
    transition: transform 0.3s; /* 横线出现的动画效果 */
}

/* 鼠标悬浮时横线显示 */
.hover-effect:hover::after {
    transform: scaleX(1); /* 鼠标悬浮时横线全宽显示 */
}

/* 鼠标悬浮效果激活状态 */
.hover-effect-active {
    color: #FFCD54; /* 激活状态下的文字颜色 */
    transform: scale(1.1); /* 激活状态下的放大效果 */
}

/* 鼠标悬浮时显示的横线在激活状态下 */
.hover-effect-active::after {
    transform: scaleX(1); /* 激活状态下横线全宽显示 */
}

/* 使横线的位置保持一致 */
.hover-effect::after {
    transform-origin: left; /* 横线从左侧开始 */
}

/* 产品介绍标题的悬浮效果 ---end */