/* 书签栏总容器 */
       .mdui-row {
           display: flex; /* 弹性布局 */
           margin-top: 60px; /* 上外边距 */
           flex-wrap: wrap; /* 自动换行 */
           justify-content: center; /* 水平居中 */
           }
         /* 书签栏容器 */
       .bookmark {
           margin-right: 15px; /* 右外边距 */
           margin-bottom: 5px; /* 下外边距 */
           margin-left: 10px; /* 左外边距 */
           width: 100%;/* 宽度 */
           height: 230px; /* 高度 */
           max-width: 440px;/* 最大宽度 */
           min-width: 365px;/* 最小宽度 */
           }
          /* 书签栏标题 */
       .cat-title {
           margin-top: 2px; /* 上外边距 */
           margin-bottom: 5px; /* 下外边距 */
           background-color: transparent; /* 背景颜色 */
           color: #fff; /* 字体颜色 */
           text-align: center;  /* 居中对齐 */
           font-weight: 400; /* 字体粗细 */
           font-size: 20px; /* 字体大小 */
           transition-duration: 0.5s;/*过渡时间 */
           cursor: default;/* 鼠标悬停时鼠标指针的样式 */
           }
           /* 鼠标书签栏标题 */
       .cat-title:hover {
           background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           animation: grai 15s linear infinite;
           }
       @keyframes grai {
           0% {
           background-size: 400% 100%;
           background-position: 0% 50%;
           }
           100% {
           background-size: 400% 100%;
           background-position: 400% 50%;
           }
           }
           /* 书签栏盒子 */
       .bookmarl {
           overflow: auto;/*溢出自动显示或隐藏滚动条*/
           margin-right: 10px; /* 右外边距 */
           margin-left: 0px; /* 左外边距 */
           padding-top: 5px; /* 上内边距 */
           width: 100%;/* 宽度 */
           height: 175px; /* 高度 */
           max-width: 440px;/* 最大宽度 */
           min-width: 365px;/* 最小宽度 */
           border-radius: 10px; /* 圆角 */
           box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2),/* 外阴影 右 下 半径 颜色 */
                       -1px -1px 2px rgba(255, 255, 255, 0.2);
           outline: none;/* 移除轮廓线 */
           border: none;/* 移除边框 */
           background-color: rgba(0, 0, 0, 0.05); /* 背景透明度 */
           transition-duration: 0.2s;/*过渡时间 */
           backdrop-filter: blur(4px); /* 模糊效果的强度 */
           flex-wrap: wrap; /* 自动换行 */
           }
            /* 鼠标书签栏盒子 */
       .bookmarl:hover {
           height: auto; /* 高度 */
           min-height: 175px; /* 高度 */
           outline: none;/* 移除轮廓线 */
           border: none;/* 移除边框 */
	       box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2),
	             inset 1px 1px 2px rgba(0, 0, 0, 0.2);/* 外阴影 右 下 半径 颜色 */
           background-color: rgba(0, 0, 0, 0.2); /* 透明度 */
           backdrop-filter: blur(15px); /* 模糊效果的强度 */
           }
       .bookmarl:hover .cat-title{
            color: #dd18e4; /* 字体颜色 */
           }
            /*滚动条设置*/
       .bookmarl::-webkit-scrollbar {
           width: 0;/*宽度*/
           height: 0;/*高度*/
           }
       .bookmarl::after {
           position: absolute;
           top: -2px;
           left: -9px;
           width: 5.18%;
           height: 2px;
           background-color: #ff04f2;
           content: "";
           animation: ghfdj 5s linear infinite;
           }
       @keyframes ghfdj {
           0%   { background-color: #ff04f2;box-shadow: 0px 0px 2px #ff04f2,
                       0px 0px 6px #ff04f2,
                       0px 0px 10px #ff04f2,
                       0px 0px 14px #ff04f2,
                       0px 0px 18px #ff04f2,
                       0px 0px 22px #ff04f2,
                       0px 0px 24px #ff04f2,
                       0px 0px 26px #ff04f2; transform: translateX(0%);}
           50%  { background-color: #ff04f2;box-shadow: 0px 0px 2px #ff04f2,
                       0px 0px 6px #ff04f2,
                       0px 0px 10px #ff04f2,
                       0px 0px 14px #ff04f2,
                       0px 0px 18px #ff04f2,
                       0px 0px 22px #ff04f2,
                       0px 0px 24px #ff04f2,
                       0px 0px 26px #ff04f2; transform: translateX(1940%);} 
           51%  { background-color: #0000ff;box-shadow: 0px 0px 2px #0000ff,
                       0px 0px 6px #0000ff,
                       0px 0px 10px #0000ff,
                       0px 0px 14px #0000ff,
                       0px 0px 18px #0000ff,
                       0px 0px 22px #0000ff,
                       0px 0px 24px #0000ff,
                       0px 0px 26px #0000ff; transform: translateX(1940%);} 
           99%  { background-color: #0000ff;box-shadow: 0px 0px 2px #0000ff,
                       0px 0px 6px #0000ff,
                       0px 0px 10px #0000ff,
                       0px 0px 14px #0000ff,
                       0px 0px 18px #0000ff,
                       0px 0px 22px #0000ff,
                       0px 0px 24px #0000ff,
                       0px 0px 26px #0000ff; transform: translateX(0%);} 
           100% { background-color: #ff04f2;box-shadow: 0px 0px 2px #ff04f2,
                       0px 0px 6px #ff04f2,
                       0px 0px 10px #ff04f2,
                       0px 0px 14px #ff04f2,
                       0px 0px 18px #ff04f2,
                       0px 0px 22px #ff04f2,
                       0px 0px 24px #ff04f2,
                       0px 0px 26px #ff04f2; transform: translateX(0%);} 
           }
.bookmarl::before {           
    position: absolute;           
    bottom: -2px;           
    left: 97%;           
    width: 5.18%;           
    height: 2px;           
    background-color: #0000ff;           
    content: "";           
    animation: ghyuij 5s linear infinite;           
}       
@keyframes ghyuij {           
    0%   { background-color: #0000ff; box-shadow: 0px 0px 2px #0000ff,                       
        0px 0px 6px #0000ff,                       
        0px 0px 10px #0000ff,                       
        0px 0px 14px #0000ff,                       
        0px 0px 18px #0000ff,                       
        0px 0px 22px #0000ff,                       
        0px 0px 24px #0000ff,                       
        0px 0px 26px #0000ff; transform: translateX(0%);}           
    50%  { background-color: #0000ff; box-shadow: 0px 0px 2px #0000ff,                       
        0px 0px 6px #0000ff,                       
        0px 0px 10px #0000ff,                       
        0px 0px 14px #0000ff,                       
        0px 0px 18px #0000ff,                       
        0px 0px 22px #0000ff,                       
        0px 0px 24px #0000ff,                       
        0px 0px 26px #0000ff; transform: translateX(-1940%);}             
    51%  { background-color: #ff04f2; box-shadow: 0px 0px 2px #ff04f2,                       
        0px 0px 6px #ff04f2,                       
        0px 0px 10px #ff04f2,                       
        0px 0px 14px #ff04f2,                       
        0px 0px 18px #ff04f2,                       
        0px 0px 22px #ff04f2,                       
        0px 0px 24px #ff04f2,                       
        0px 0px 26px #ff04f2; transform: translateX(-1940%);}             
    99%  { background-color: #ff04f2; box-shadow: 0px 0px 2px #ff04f2,                       
        0px 0px 6px #ff04f2,                       
        0px 0px 10px #ff04f2,                       
        0px 0px 14px #ff04f2,                       
        0px 0px 18px #ff04f2,                       
        0px 0px 22px #ff04f2,                       
        0px 0px 24px #ff04f2,                       
        0px 0px 26px #ff04f2; transform: translateX(0%); }             
    100% { background-color: #0000ff; box-shadow: 0px 0px 2px #0000ff,                       
        0px 0px 6px #0000ff,                       
        0px 0px 10px #0000ff,                       
        0px 0px 14px #0000ff,                       
        0px 0px 18px #0000ff,                       
        0px 0px 22px #0000ff,                       
        0px 0px 24px #0000ff,                       
        0px 0px 26px #0000ff; transform: translateX(0%);}             
}  
       .bookmarl:hover::before,
       .bookmarl:hover::after{
           animation-duration: 3s;/*动画时间*/
           }
       .linkkkk img {
           margin-right: 0px; /* 右外边距 */
           transform: translateY(2px);/* 上-下+移动 */
           }
       .linkkkk img:hover{
           animation: sddpin 0.5s linear; /* 谷歌 动画:名称 2秒 线性 循环 */
           }
       @keyframes sddpin { /* 谷歌 定义 名称 */
           0%{ transform: rotateY(0deg); } /* 动画开始时（角度为0度） */
           100%{ transform: rotateY(360deg); } /* 动画结束时（角度为360度） */
           }
           /* 链接容器 */
       .linkkkk {
           display: inline-block; /* 行内块级元素 */
           overflow: hidden; /* 隐藏溢出元素 */
           margin-top: 3px; /* 上外边距 */
           margin-bottom: 3px; /* 下外边距 */
           margin-left: 15px; /* 左外边距 */
           width: 28%; /* 设置宽度 */
           height: 25px; /* 设置高度 */
           text-align: left;/* 水平左对齐 */
           }
       /* 鼠标经过书签链接 */
       .linktitle:hover{
        background: linear-gradient(270deg, red, orange, yellow, green, blue, indigo, violet,white,white);
           -webkit-text-fill-color: transparent;
           -webkit-background-clip: text;
           background-position: right;
           font-size: 15px; /* 字体大小*/
           animation: caise 25s linear infinite;
           }
       @keyframes caise {
           0% {
           background-size: 800% 100%;
           background-position: 800% 50%;
           }
           100% {
           background-size: 800% 100%;
           background-position: 0% 50%;
           }
           }
           /* 链接下划线 */
       .linktitle::before,
       .linktitle::after {
           position: absolute;/* 绝对定位 */
           z-index: -1; /* 设置元素的堆叠顺序数大在前 */
           width: 0;/* 宽度*/
           height: 1px;/* 高度 */
           background-color: #dd18e4;  /* 颜色*/
           content: "";/* 内容为空 */
           transition: width 1s ease; /* 宽度1秒过渡 */
           opacity: 0.7; /* 设置透明度 */
           }
         /* 鼠标链接下划线 */
       .linktitle::before {
           bottom: -2px;/* 距底部 */
           left: -22px;/*距左方*/
           }
          /* 鼠标链接上划线 */
       .linktitle::after {
           top: -1px;/*距上方*/
           right: 0;/*距右方*/
           }
         /* 鼠标链接上下划线 */
       .linktitle:hover::before,
       .linktitle:hover::after {
           width: calc(100% + 22px);/* 总宽度*/
           }
           /* 链接字样式 */
       .linktitle {
           position: relative;/* 下划线定位 */
           overflow: hidden; /* 隐藏溢出元素 */
           cursor: pointer; /*鼠标手型*/
           margin-left: 0px; /* 左外边距 */
           outline: none;/* 移除轮廓线 */
           border: none;/* 移除边框 */
           background-color: transparent;/* 背景颜色为透明 */
           color: #fff; /* 字体颜色 */
           text-align: left;/* 水平左对齐 */
           text-decoration: none;/* 去掉下划线 */
           font-size: 14px; /* 字体大小*/
           font-weight: 300; /* 字体粗细 */
           transition-duration: 1s;/*过渡时间 */
           flex-wrap: nowrap; /* 不换行 */
           }