.zuci-pinyin {
   border-top-color: rgba(100, 100, 100, 0.2);
   border-color: #f8f5fc;
   border-top: 2px dashed rgba(100, 100, 100, 0.2);
 }

 .zuci-pinyin .content {
   display: flex;
   flex-direction: row;
   margin-left: -6px;
   margin-right: -6px;
   padding: 20px 0;
 }

 .zuci-pinyin .header {
   width: 40px;
   padding: 0;
   text-align: center;
   flex-shrink: 0;
   background-color: var(--color-bg);
   color: #fff;
   border-radius: 0.25rem;
   margin: 6px;
 }

 .zuci-pinyin .header h3 {
   padding-top: 6px;
   position: sticky;
   top: 0;
   margin-bottom: 0;
 }

 .bottoma {
   color: #8b6cc3;
 }

 .zuci-pinyin .list {
   flex-grow: 1;
   padding: 0;
   font-size: 0.925rem;
 }

 .bottoma {
   color: #e1ccf9;
 }

 .zuci-pinyin .list ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-wrap: wrap;
   background-color: #fff;
 }

 .zuci-pinyin .list li {
   width: 10%;
   padding: 6px;
 }

 .zuci-pinyin .list li a {
   background-color: var(--color-bg-tertiary);
 }

 .zuci-pinyin .list li a:hover {
   color: var(--color-hover-text);
   background-color: var(--color-bg-hover);
 }

 .zuci-pinyin .list a:not(.primary) {
   border: 1px solid var(--color-border-primary);
   text-align: center;
   display: block;
   border-radius: 0.25rem;
   padding: 0.5rem 0;
   color: var(--color-primary);
   transition: all ease 0.2s;
 }

 .from {
   width: 100%;
   display: flex;
   justify-content: space-around;
 }

 .from .label {
   width: calc((100% - 36px) / 4);
   height: 50px;
   margin: 10px 0;
 }

 .from .label input {
   width: 100%;
   height: 100%;
   border: 1px solid #ced4da;
   border-width: 2px;
   font-size: 16px;
   text-align: center;
   border-radius: 0.25rem;
 }

 .from .label button {
   border: none;
   width: 100%;
   height: 52px;
   font-size: 18px;
   background-color: #8b6cc3fd;
   border-radius: 0.25rem;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
     border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }

 .from .label button:hover {
   background-color: #6f42c1;
 }

 .from .label button a {
   color: #fff;
 }

 .tool-list {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   margin-top: 20px;
 }

 .tool-list a {
   display: block;
   color: #fff;
   text-align: center;
   width: calc((100% - 20px) / 2);
   height: 22px;
   background-color: #8a6bc1;
   border-bottom: 3px solid #6d549a;
   font-size: 16px;
   border-radius: 6px;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
   transition: all 0.2s ease-in-out;
   padding: 8px 0;
   margin-bottom: 10px;
 }

 .tool-list a:hover {
   background: #67a535;
   border-bottom: 3px solid #559223;
 }

 .dc {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
 }

 .dc a {
   display: flex;
   width: calc((100% - 30px) / 3);
   height: 40px;
   align-items: center;
   justify-content: center;
   color: #4e368c;
   font-size: 16px;
   background: #f9f9f9;
   border-radius: 4px;
   border: 1px solid #e9ecef;
   margin: 8px 8px 0 0;
 }

 .dc a:hover {
   color: #ff0000;
 }

 .cheaklist {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   /* justify-content: space-around; */
 }

 .cl-box {
   width: calc((100% - 24px) / 3);
   height: 38px;
   background-color: #f8f5fc;
   color: #4e368c;
   border: 1px solid rgba(111, 66, 193, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   margin: 0 6px 8px 0;
 }

 @media screen and (max-width: 768px) {
   .zuci-pinyin .list li {
     width: calc(100% / 4);
   }
 }