* {
    margin: 0; /* 设置所有元素的外边距为0 */
    padding: 0; /* 设置所有元素的内边距为0 */
}
body {
    overflow: hidden; /* 隐藏页面滚动条 */
}
.navbar {
    position: relative; /* 设置导航栏相对定位 */
    width: 100vw; /* 设置导航栏宽度为视口宽度 */
    display: flex; /* 使用弹性布局 */
}
.main {
    font-size: 40px; /* 设置主要内容的字体大小 */
    font-weight: bold; /* 设置主要内容的字体粗细 */
    flex: 1; /* 设置主要内容弹性伸缩 */
    height: calc(100vh - 43px); /* 计算主要内容高度 */
    position: relative; /* 设置主要内容相对定位 */
    top: 43px; /* 使主要内容距离顶部导航栏高度 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
#checkbox {
    display: none; /* 隐藏复选框 */
}
.navbar label {
    position: absolute; /* 设置标签绝对定位 */
    top: 0; /* 距离顶部0像素 */
    left: 70px; /* 距离左侧70像素 */
    width: 100%; /* 宽度100% */
    height: 43px; /* 高度43像素 */
    font-size: 30px; /* 字体大小30像素 */
    color: #5a738e; /* 字体颜色 */
    background-color: #ededed; /* 背景颜色 */
    padding-left: 20px; /* 左内边距20像素 */
    border: 1px solid #d9dee4; /* 边框样式 */
    cursor: pointer; /* 鼠标指针样式为手型 */
    transition: all 0.5s; /* 动画过渡效果 */
}
.navbar ul {
    list-style: none; /* 移除列表样式 */
    width: 70px; /* 宽度70像素 */
    height: 100vh; /* 高度100%视口高度 */
    background-color: #2a3f54; /* 背景颜色 */
    transition: all 0.5s; /* 动画过渡效果 */
    overflow: hidden; /* 内容溢出隐藏 */
}
.navbar ul li {
    height: 70px; /* 高度70像素 */
    margin-bottom: 10px; /* 下外边距10像素 */
}
.navbar ul li:first-child {
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    padding: 0 10px; /* 上下内边距0，左右内边距10像素 */
}
.navbar ul li:first-child img {
    width: 50px; /* 图片宽度50像素 */
    height: 50px; /* 图片高度50像素 */
    border-radius: 50%; /* 图片圆角 */
}
.navbar ul li:first-child span {
    color: #fff; /* 字体颜色为白色 */
    white-space: nowrap; /* 不换行显示 */
    padding-left: 10px; /* 左内边距10像素 */
    display: none; /* 初始隐藏 */
}
.navbar ul li a {
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    flex-direction: column; /* 垂直排列 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    color: #d1d1d1; /* 字体颜色 */
    text-decoration: none; /* 文本无下划线 */
}
.navbar ul li a i {
    font-size: 25px; /* 图标字体大小 */
    margin-bottom: 10px; /* 下外边距10像素 */
}
.navbar ul li a span {
    font-size: 12px; /* 字体大小12像素 */
    white-space: nowrap; /* 不换行显示 */
}
.navbar ul li a:hover {
    color: #fff; /* 鼠标悬停时字体颜色为白色 */
    background-color: #35495d; /* 鼠标悬停时背景颜色 */
}
.navbar input:checked+label {
    left: 200px; /* 复选框选中时标签左移200像素 */
}
.navbar input:checked~ul {
    width: 200px; /* 复选框选中时列表宽度变为200像素 */
}
.navbar input:checked~ul li:first-child {
    justify-content: flex-start; /* 复选框选中时第一个列表项左对齐 */
}
.navbar input:checked~ul li:first-child span {
    display: block; /* 复选框选中时第一个列表项显示 */
}
.navbar input:checked~ul li a {
    flex-direction: row; /* 复选框选中时列表项水平排列 */
    justify-content: flex-start; /* 列表项左对齐 */
}
.navbar input:checked~ul li a i {
    font-size: 18px; /* 复选框选中时图标字体大小 */
    margin: 0 15px 0 30px; /* 图标外边距 */
}
.navbar input:checked~ul li a span {
    font-size: 14px; /* 复选框选中时字体大小 */
}