/* 设置 .section-box 的样式 */
.section-box {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    margin: 0; /* 去除默认外边距 */
    width: 500px; /* 设置宽度 */
    height: 200px; /* 设置高度 */
    border: 2px solid #333; /* 设置边框 */
    border-radius: 15px; /* 设置圆角 */
    box-sizing: border-box; /* 包括内边距和边框在内的宽高 */
    background-color: #252C2E; /* 设置背景颜色 */
    position: relative; /* 设置相对定位 */
    padding: 20px; /* 设置内边距 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 设置阴影 */
}

/* 设置 .section-box-content 的样式 */
.section-box-content {
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: 140px; /* 左侧对齐 */
    width: calc(100% - 140px); /* 宽度为剩余空间 */
    height: 100%; /* 高度为100% */
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直排列 */
    justify-content: flex-start; /* 顶部对齐 */
    align-items: flex-start; /* 左侧对齐 */
    padding: 10px; /* 设置内边距 */
    color: #fff; /* 设置文字颜色 */
}

/* 设置 .section-box-content 内部 h2 的样式 */
.section-box-content h2 {
    margin: 20px 0 0 0; /* 设置顶部外边距，向下移动 */
    font-size: 30px; /* 设置更大的字体大小 */
    color: orange; /* 设置文字颜色 */
}

/* 设置 .section-box-content 内部 .stats 的样式 */
.section-box-content .stats {
    margin-top: 50px; /* 设置顶部外边距，向下移动 */
    display: flex; /* 使用弹性布局 */
    justify-content: space-between; /* 项目之间均匀分布 */
    font-size: 16px; /* 设置字体大小 */
    border-left: 1px solid #fff; /* 添加左边框 */
    border-right: 1px solid #fff; /* 添加右边框 */
}

/* 设置 .section-box-content 内部 .stats div 的样式 */
.section-box-content .stats div {
    margin-right: 10px; /* 设置右侧外边距 */
    padding: 0 10px; /* 设置左右内边距 */
    border-right: 1px solid #fff; /* 添加右边框 */
}

/* 设置 .section-box-content 内部 .stats 最后一个 div 的样式 */
.section-box-content .stats div:last-child {
    margin-right: 0; /* 去除右侧外边距 */
    border-right: none; /* 去除右边框 */
}

/* 设置 .avatar-frame 的样式 */
.avatar-frame {
    width: 100px; /* 设置宽度 */
    height: 100px; /* 设置高度 */
    border-radius: 50%; /* 设置圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    border: 3px solid #fff; /* 设置边框 */
    margin-right: 20px; /* 设置右侧外边距 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    position: absolute; /* 绝对定位 */
    top: 10px; /* 顶部对齐 */
    left: 10px; /* 左侧对齐 */
}

/* 设置 .avatar-frame 内部 img 的样式 */
.avatar-frame img {
    width: 100%; /* 宽度为100% */
    height: auto; /* 高度自动 */
}

/* 设置 .ets2-logo 的样式 */
.ets2-logo {
    position: absolute; /* 绝对定位 */
    top: 10px; /* 顶部对齐 */
    right: 10px; /* 右侧对齐 */
    width: 70px; /* 设置宽度 */
    height: auto; /* 高度自动 */
}