/* 图标模块样式 - 红色系配色 */
/* ============================================
   图标模块容器 - 红色系配色
   模块功能：展示5个图标入口，支持悬停切换效果
   ============================================ */

/* 模块外层容器 */
.c_0100_3 {
    width: 100%;                    /* 全宽容器 */
    background-color: #f5f5f5;      /* 浅灰色背景 */
    padding: 40px 0;                /* 上下内边距40px，左右0 */
    overflow: hidden;               /* 清除浮动，防止高度塌陷 */
}

/* ============================================
   单个图标项容器
   桌面端：5个图标横向排列，每项占20%宽度
   ============================================ */

.c_0100_3 .l_ico1 {
    width: 20%;                     /* 每项占20%，5项正好100% */
    float: left;                    /* 左浮动实现横向排列 */
    text-align: center;             /* 内容水平居中 */
    transition: all 0.3s ease;      /* 所有属性0.3秒缓动过渡 */
}

/* 图标项悬停效果：整体上移 */
.c_0100_3 .l_ico1:hover {
    transform: translateY(-5px);    /* 向上移动5像素 */
}

/* ============================================
   图标链接区域
   ============================================ */

.c_0100_3 .ico1 {
    display: block;                 /* 块级显示，占满父容器 */
    width: 100%;                    /* 宽度100% */
    text-decoration: none;          /* 去除下划线 */
}

/* 图标图片样式 */
.c_0100_3 .ico1 img {
    width: 100px;                   /* 图标宽度100px */
    height: 100px;                  /* 图标高度100px */
    margin: 0 auto;                 /* 水平居中 */
    transition: all 0.3s ease;      /* 所有属性过渡动画 */
    position: relative;             /* 相对定位，建立层叠上下文 */
    z-index: 2;                     /* 层级2，确保在阴影之上 */
}

/* 图标图片悬停效果：放大 */
.c_0100_3 .ico1:hover img {
    transform: scale(1.1);          /* 放大到1.1倍 */
}

/* ============================================
   中文标题样式
   ============================================ */

.c_0100_3 .c_1 {
    font-size: 18px;                /* 字号18px */
    color: #333;                    /* 深灰色文字 */
    margin-top: 15px;               /* 上边距15px */
    font-weight: bold;              /* 粗体 */
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;  /* 微软雅黑字体 */
    transition: color 0.3s ease;    /* 颜色过渡动画 */
}

/* 中文标题悬停效果：变红色 */
.c_0100_3 .l_ico1:hover .c_1 {
    color: hsl(0, 100%, 36%);       /* 悬停时变为红色（HSL色相0，饱和度100%，亮度36%） */
}

/* ============================================
   英文副标题样式
   ============================================ */

.c_0100_3 .e_1 {
    font-size: 12px;                /* 字号12px */
    color: #999;                    /* 浅灰色文字 */
    margin-top: 5px;                /* 上边距5px */
    font-family: Arial, sans-serif; /* Arial英文字体 */
    text-transform: uppercase;      /* 全部大写 */
    letter-spacing: 1px;            /* 字间距1px */
}

/* ============================================
   图片切换效果 - 双图切换机制
   原理：默认显示白底图标(block1)，悬停显示红底图标(none1)
   ============================================ */

/* 默认状态图标：白底样式 */
.c_0100_3 .block1 {
    display: block;                 /* 默认显示 */
    background-color: #ffffff;      /* 白色背景 */
    border-radius: 8px;             /* 矩形圆角 */
    padding: 15px;                  /* 内边距15px */
    width: 120px;                    /* 容器宽度80px */
    height: 120px;                   /* 容器高度80px */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* 轻微阴影 */
    object-fit: contain;            /* 图片自适应容器，保持比例 */
}

/* 悬停状态图标：红底样式（默认隐藏） */
.c_0100_3 .none1 {
    display: none;                  /* 默认隐藏 */
    background-color: hsl(0, 100%, 36%);  /* 红色背景（与标题悬停色一致） */
    border-radius: 8px;             /* 矩形圆角 */
    padding: 15px;                  /* 内边距15px */
    width: 80px;                    /* 容器宽度80px */
    height: 80px;                   /* 容器高度80px */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);  /* 稍深阴影 */
    object-fit: contain;            /* 图片自适应容器，保持比例 */
}

/* 悬停时：隐藏白底图标 */
.c_0100_3 .l_ico1:hover .block1 {
    display: none;                  /* 悬停时隐藏 */
}

/* 悬停时：显示红底图标 */
.c_0100_3 .l_ico1:hover .none1 {
    display: block;                 /* 悬停时显示 */
}
/* ============================================
   响应式适配 - 针对不同屏幕尺寸调整布局
   ============================================ */

/* 中等屏幕适配：宽度≤1200px（平板等设备） */
@media screen and (max-width: 1200px) {
    .c_0100_3 .l_ico1 {
        width: 25%;                 /* 每行显示4个图标 */
    }
}

/* 小屏幕适配：宽度≤768px（手机等设备） */
@media screen and (max-width: 768px) {
    .c_0100_3 .l_ico1 {
        width: 50%;                 /* 每行显示2个图标 */
        margin-bottom: 30px;        /* 下边距30px，增加行间距 */
    }
    
    /* 缩小图标尺寸 */
    .c_0100_3 .ico1 img {
        width: 40px;                /* 图标宽度缩小到40px */
        height: 40px;               /* 图标高度缩小到40px */
    }
    
    /* 缩小圆形背景容器 */
    .c_0100_3 .block1,
    .c_0100_3 .none1 {
        width: 70px;                /* 圆形容器宽度缩小到70px */
        height: 70px;               /* 圆形容器高度缩小到70px */
        padding: 15px;              /* 保持内边距15px */
    }
    
    /* 缩小文字尺寸 */
    .c_0100_3 .c_1 {
        font-size: 16px;            /* 标题字号缩小到16px */
    }
}