body {
    font-family: "SF Pro SC","HanHei SC","SF Pro Text","Myriad Set Pro","SF Pro Icons","Apple Legacy Chevron","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
    ;
    margin: 0;
    padding: 0;
    background: #F3F3F3;
}
#main{
    overflow-x: hidden;
  width: 100vw;
  display: block;
  height: 100vh;
  position: relative;
}
#main > div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.4s ease-in-out;
    visibility: hidden;
  pointer-events: none;
  bottom:0;
  overflow-y:auto;
  padding-bottom: 120px;
    /* display: none; */
}

#main > div.active {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    /* display: block; */
}

.select_path {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden; /* 新增容器溢出处理 */
}

.select_path {
    justify-content: flex-start; /* 新增：默认左对齐 */
}

.select_path .item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 0;       /* 删除原有右边距 */
    color: #555;
    padding-right: 15px;   /* 新增内边距替代右边距 */
}

.select_path.four-or-more .item {
    flex: 1 1 0%; /* 新增：当数量≥4时启用等分宽度 */
}

/* 调整分隔符样式 */
.select_path .item:not(:last-child)::after {
    content: ">";
    margin: 0 8px;
    white-space: nowrap;
    position: absolute;    /* 绝对定位保证分隔符位置 */
}

.select_path .item:not(:last-child) {
    position: relative;    /* 为分隔符提供定位基准 */
    padding-right: calc(15px + 8px + 8px); /* 新增分隔符占位 */
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul li {
    padding: 15px;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s;
  max-width: 300px;
  box-sizing: border-box;
  margin: 10px auto;
}

/* 修改书籍选择项布局，使用弹性布局自动换行 */
#select_book .books_box {
    padding: 10px;
  column-count: 3;
  column-gap: 10px;
}

#select_book .books_box .item {
    width: 100%;
  box-sizing: border-box;
  break-inside: avoid;
  background: #FFF;
  overflow: hidden;
  margin-bottom: 16px;
  border-radius: 6px;
  box-shadow: 0 0 8px 0 #cecece;
}
#select_book .books_box .item .img_box{
    width: 100%;
  height: auto;
  margin: auto;
}
#select_book .books_box .item .img_box img{
    width: 100%;
    float: left;
}
#select_book .books_box .item .info_box{
    box-sizing: border-box;
  padding: 3px 5px;
}
#select_book .books_box .item .info_box .title{
    margin: 0;
  font-size: 13px;
}
#select_book .books_box .item .info_box .desc{
    color: #666;
  margin-top: 5px;
  font-size: 12px;
  text-align: right;
}


ul li:hover {
    background: #e0e0e0;
}

ul li i {
    float: right;
    color: #888;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background: #f8f8f8;
}

.word {
    font-weight: bold;
  font-family: Verdana;
  color: #2E2E2E;
}

audio {
    width: 100%;
}

.info_box .title {
    margin: 0;
    font-size: 16px;
}

.info_box .desc {
    color: #666;
    margin-top: 5px;
}

.img_box {
    width: 50px;
    height: 50px;
    background: #eee;
    margin-right: 10px;
    display: inline-block;
}

#select_book ul li {
    display: flex;
    align-items: center;
}

button {
    display: none; /* 隐藏未使用的按钮 */
}
#word_list .playAudio{
    background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNzQzMTMwNTEyMDQxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI3OTkiIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiI+PHBhdGggZD0iTTUxMiAxMjhhMzg0IDM4NCAwIDEgMCAwIDc2OCAzODQgMzg0IDAgMCAwIDAtNzY4ek00Mi42NjY2NjcgNTEyQzQyLjY2NjY2NyAyNTIuOCAyNTIuOCA0Mi42NjY2NjcgNTEyIDQyLjY2NjY2N3M0NjkuMzMzMzMzIDIxMC4xMzMzMzMgNDY5LjMzMzMzMyA0NjkuMzMzMzMzLTIxMC4xMzMzMzMgNDY5LjMzMzMzMy00NjkuMzMzMzMzIDQ2OS4zMzMzMzNTNDIuNjY2NjY3IDc3MS4yIDQyLjY2NjY2NyA1MTJ6IiBmaWxsPSIjNzVDODJCIiBwLWlkPSIyODAwIj48L3BhdGg+PHBhdGggZD0iTTY5MC43NzMzMzMgNTg0LjE5MmE4NS4zMzMzMzMgODUuMzMzMzMzIDAgMCAwIDAtMTQ0LjM4NGwtMjI5LjI5MDY2Ni0xNDQuNDI2NjY3Yy01Ni44MzItMzUuNzk3MzMzLTEzMC44MTYgNS4wNzczMzMtMTMwLjgxNiA3Mi4xOTJ2Mjg4Ljg1MzMzNGMwIDY3LjExNDY2NyA3My45ODQgMTA3Ljk0NjY2NyAxMzAuODE2IDcyLjE5MmwyMjkuMjQ4LTE0NC40MjY2Njd6TTY0NS4yNDggNTEyTDQxNiA2NTYuMzg0VjM2Ny41NzMzMzNMNjQ1LjI5MDY2NyA1MTJ6IiBmaWxsPSIjNzVDODJCIiBwLWlkPSIyODAxIj48L3BhdGg+PC9zdmc+");
    width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 72%;
  margin:0;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background-position:center;
}
#word_list .playAudio.playing{
    background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNzQzMTMxNjAzMjg5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI5NTgiIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiI+PHBhdGggZD0iTTUxMiAxMjhhMzg0IDM4NCAwIDEgMCAwIDc2OCAzODQgMzg0IDAgMCAwIDAtNzY4ek00Mi42NjY2NjcgNTEyQzQyLjY2NjY2NyAyNTIuOCAyNTIuOCA0Mi42NjY2NjcgNTEyIDQyLjY2NjY2N3M0NjkuMzMzMzMzIDIxMC4xMzMzMzMgNDY5LjMzMzMzMyA0NjkuMzMzMzMzLTIxMC4xMzMzMzMgNDY5LjMzMzMzMy00NjkuMzMzMzMzIDQ2OS4zMzMzMzNTNDIuNjY2NjY3IDc3MS4yIDQyLjY2NjY2NyA1MTJ6IiBmaWxsPSIjNTNBMjBDIiBwLWlkPSIyOTU5Ij48L3BhdGg+PHBhdGggZD0iTTQ0OS45MiAyNTYuMDQyNjY3YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEgMzguOTU0NjY3IDMwLjM3ODY2Nmw5Mi44ODUzMzMgMzA5LjYzMiAzOS45Nzg2NjctOTkuODgyNjY2QTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEgNjYxLjMzMzMzMyA0NjkuMzMzMzMzSDc2OGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMSAxIDAgODUuMzMzMzM0aC03Ny43ODEzMzNsLTc0LjYyNCAxODYuNDk2YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEtODAuNDY5MzM0LTMuNTg0bC05Mi44ODUzMzMtMzA5LjYzMi0zOS45Nzg2NjcgOTkuODgyNjY2QTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEgMzYyLjY2NjY2NyA1NTQuNjY2NjY3SDI1NmE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAxIDAtODUuMzMzMzM0aDc3Ljc4MTMzM2w3NC42MjQtMTg2LjQ5NkE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAxIDQ0OS45MiAyNTZ6IiBmaWxsPSIjNTNBMjBDIiBwLWlkPSIyOTYwIiBzdHlsZT0iYmFja2dyb3VuZDogIzUzQTIwQzsiPjwvcGF0aD48L3N2Zz4=");
}
#word_list .yinbiao{
    font-family: Arial Unicode MS,Georgia;
    color: #6A9A8E;
}
#word_list .desc{
    font-family: "SF Pro SC","HanHei SC","SF Pro Text","Myriad Set Pro","SF Pro Icons","Apple Legacy Chevron","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
    font-size: 13px;
    color: #646363;
}
td.audio_box{
    position: relative;
    padding: 0;
}