#writer-container {
            position: relative;
            width: 230px;
            height: 230px;
            margin: 0px auto;
        }
        .grid-background {
            position: absolute;
            top: 5px;
            left: 5px;
            width: 222px; /* 调整以适应填充 */
            height: 222px; /* 调整以适应填充 */
            border: 2px solid orange; /* 添加边框 */
            box-sizing: border-box; /* 确保边框不会影响尺寸 */
            z-index: -1;
        }
        .grid-background::before,
        .grid-background::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 5px;
            border-top: 2px dashed orange;
            transform-origin: center;
        }
        .grid-background::before {
            top: 50%;
            left: 0;
            transform: rotate(0deg);
        }
        .grid-background::after {
            top: 50%;
            left: 0;
            transform: rotate(90deg);
        }


.yuantton {
    display: inline-flex; /* 修改为flex布局以更好地控制子元素位置 */
    padding-right: 65px; /* 保持右边距，为图标留出空间 */
    height: 90px;
    background-color: white;
    color: black;
    border-radius: 15px;
    font-size: 60px; /* 可根据需要调整字体大小 */
    border: 2px solid black;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    gap: 8px; /* 标题和图片之间的间距 */
    transition: background-color 0.3s ease;
    position: relative; /* 确保伪元素定位基于按钮 */
    cursor: pointer;
    text-align: left;
    white-space: nowrap; /* 防止文本换行 */
    padding-left: 20px; /* 考虑到可能需要一些左边距 */
    color: #000;
}

.yuantton::after {
    content: ''; /* 必须，用于显示图片 */
    background: url('o.png') no-repeat center; /* 设置背景图片 */
    background-size: contain; /* 使图片自适应容器大小 */
    width: 55px; /* 图片宽度 */
    height: 50px; /* 图片高度 */
    position: absolute;
    right: 10px; /* 根据padding-right值调整，确保图片位于右侧中间位置 */
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
}
.yuantton:hover {
    background-color: #b2b2aa;
    color: #da1e84;
        }
table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

td {
  border: 2px solid #5d5d5d; 
  padding: 10px;
  overflow: hidden;
}
td:nth-child(1) { width: 20%; }
td:nth-child(2) { width: 80%; }
 a {
        color: inherit;
        text-decoration: none;
    }


.fenbi {
    width: 90%;
    margin: 0 auto;
    border: 2px solid #5d5d5d;
    border-radius: 25px; 
    padding: 30px;
    box-sizing: border-box;
}
.fenbi a {

    text-decoration: none; /* 可选：去掉下划线 */
}

.fenbi a:hover {
    color: #E53333; /* 可选：鼠标悬停时的颜色 */
    text-decoration: underline; /* 可选：鼠标悬停时显示下划线 */
}
.zigea {
  display: inline-block;
  position: relative;
  border: 2px solid #d58811;
  padding: 2px;
    width: 29%;
  margin: 2px;
  border-radius: 15px;
  height: auto; /* 根据内容自动调整高度 */

  overflow: hidden; /* 防止拼音溢出 */
}
.pinyina, .hanzia {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 溢出部分用省略号表示 */
}
.pinyina {
  display: block;
  font-size: 0.7em; 
  text-align: center;
}
.hanzia { 
  display: block;
  font-size: 1.2em; 
  text-align: center;
}



.zige {
  display: inline-block;
  position: relative;
  border: 2px solid #d58811;
  padding: 5px;
  margin: 5px;
  border-radius: 15px;
  width: 100px;
  height: 100px;
  cursor: pointer;
  overflow: hidden; /* 防止拼音溢出 */
}
.pinyin {
  position: absolute;
  top: 0.1em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5em;
  white-space: nowrap;
  max-width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis; /* 当拼音太长时显示省略号 */
}
.hanzi { 
transform: translateY(20px);
  display: block;
  font-size: 4em; 
  text-align: center;
}