@charset "utf-8";
/* 基础样式初始化 */
*{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
a,img{
    border: 0;
}
body{
    font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}

/* 侧边栏样式 */
.side{
    position: fixed;
    width: 54px;
    height: 275px;
    right: 0;
    top: 40%;
    z-index: 100; /* 确保侧边栏在其他内容之上 */
}

.side ul li{
    width: 54px;
    height: 54px;
    float: left;
    position: relative;
    border-bottom: 1px solid #fff; /* 分隔线 */
}

/* 侧边栏内容框 */
.side ul li .sidebox{
    position: absolute;
    width: 54px;
    height: 54px;
    top: 0;
    right: 0;
    transition: all 0.3s; /* 平滑过渡效果 */
    background: #1c71c4;
    opacity: 0.8;
    filter: Alpha(opacity=80); /* IE兼容性 */
    color: #fff;
    font: 20px/54px "微软雅黑";
    overflow: hidden;
    text-align: center; /* 文字居中 */
}

/* 侧边栏顶部按钮 */
.side ul li .sidetop{
    width: 54px;
    height: 54px;
    line-height: 54px;
    display: inline-block;
    background: #1c71c4;
    opacity: 0.8;
    filter: Alpha(opacity=80); /* IE兼容性 */
    transition: all 0.3s; /* 平滑过渡效果 */
    text-align: center; /* 内容居中 */
    cursor: pointer; /* 鼠标指针变为手型 */
}

/* 悬停效果 */
.side ul li .sidetop:hover{
    background: #1c71c4;
    opacity: 1;
    filter: Alpha(opacity=100); /* IE兼容性 */
    transform: scale(1.05); /* 轻微放大效果 */
}

/* 图片样式调整 */
.side ul li img{
    float: left;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持图片比例 */
}
