/* 布局的css */
 
 .transition-effect {
    transition: max-width .4s ease, padding .5s ease, transform .3s ease, all .4s ease;
    transition-behavior: normal, normal, normal, normal;
    transition-duration: 0.4s, 0.5s, 0.3s, 0.4s;
    transition-timing-function: ease, ease, ease, ease;
    transition-delay: 0s, 0s, 0s, 0s;
    transition-property: max-width, padding, transform, all;
}

 /* 虚化 */
 .woku_ui_Bokeh {
    /* 下面是模糊效果 */
    backdrop-filter: blur(15px);
 }

 /* 居中 */
 .woku_ui_Center {
    display: flex;
    justify-content: center;
    align-items: center;
 }
  /* 居中_2 */
 .woku_ui_Center_2 {
    display: flex;
   justify-content: flex-end;
   margin: -34px 0px 0px 0px;
 }

 /* 阴影 */
 .woku_ui_shade {
    /* 外阴影 */
    box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 25%);

 }

 /* 阴影2 */
 .woku_ui_shade_2 {
    /* 阴影 */
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.25));

 }

  /* 阴影 */
 .woku_ui_shade_3 {
    /* 外阴影 */
    box-shadow: 0px -2px 4px 0px rgb(0 0 0 / 25%);

 }

 /* 提示的字 */
 .woku_ui_Hints_of_the_worde {
    /* 字体大小 */
    font-size: 14px;
    word-wrap: break-word;
    width: calc(100% - 50px);
    /* 外边距 */
    margin: -30px 0px 0px 40px;
    /* 粗细 */
    font-weight: 300;
 }

 /* 模块栏 */
 .woku_ui_Module_bar {
    /* 圆角 */
    border-radius: 10px;
    /* 外边距 */
    margin: 25px 0px 25px 0px;
 }

 /* 顶部栏 */
 .woku_ui_Top_bar {
    display: flex;
    align-items: center;
    /* 外边距 */
    margin: 0px 19px 0px 19px;
 }

 /* 顶部栏-字 */
 .woku_ui_Top_bar_word {
    /* 字体大小 */
    font-size: 23px;
    /* 粗细 */
    font-weight: 200;

 }

 /* 不居中 */
 .woku_ui_Not_centered {
    display: flex;

 }

 /* 按钮区 */
 .woku_button_area {
    /* 颜色 */
    background: #ffffff10;
    /* 下面是模糊效果 */
    backdrop-filter: blur(60px);
    /* 内与外阴影 */
    box-shadow: inset 0px 2px 4px 0px rgb(0 0 0 / 25%), 0px 2px 4px 0px rgb(0 0 0 / 25%);;
    display: inline-block;
    /* 圆角 */
    border-radius: 38.4px;
 }


 .woku_mask_1 {
    mask-image: url(../../../resource/icon/wz_1.png);
    -webkit-mask: url(../../../resource/icon/wz_1.png);
    mask-repeat: no-repeat;
    mask-position: center calc(50% + 30px);
    ;
    mask-size: calc(100% - 374px);
 }

 .woku_near {
    /* 靠近就变化 */
    /* 颜色 */
    background: #ffffff;

    border: 1px solid #E69F6C;
    /* 鼠标样式 */
    cursor: pointer;

    /* 延时过度 */
    transition: background-color 0.3s;
}

.woku_near:hover {
    background: #b8b8b8;
    /* 鼠标悬停时的背景颜色 */
}

.woku_near:active {
    background: #a0a0a0;
    /* 鼠标按下时的背景颜色 */
}

 /*------------*/

 /* 滚动条 - 1*/
 .woku_ui_scroll_bar_1 {}

 /* 修改滚动条的宽度 */
 .woku_ui_scroll_bar_1::-webkit-scrollbar {
    width: 8px;
    /* 垂直滚动条的宽度 */
    height: 8px;
    /* 水平滚动条的高度 */


 }

 /* 修改滚动条轨道的样式 */
 .woku_ui_scroll_bar_1::-webkit-scrollbar-track {
    background: rgba(241, 241, 241, 0.33);
    /* 轨道背景颜色 */
    border-radius: 3px;
    /* 轨道圆角 */
 }

 /* 修改滚动条滑块的样式 */
 .woku_ui_scroll_bar_1::-webkit-scrollbar-thumb {
    background: #bbbbbb;
    /* 滑块背景颜色 */
    border-radius: 10px;
    /* 滑块圆角 */
 }

 /* 当滚动条滑块处于悬停状态时的样式 */
 .woku_ui_scroll_bar_1::-webkit-scrollbar-thumb:hover {
    background: #616161;
    /* 悬停时滑块背景颜色 */
    cursor: pointer;
    /* 鼠标悬停时的光标样式 */


 }

 /*------------*/

 .woku_Universal_button {
    /* 通用的按钮（我这里调教的很好的啦） */

    padding: 8px 8px;
    /* 按钮内边距 */
    font-size: 12px;
    /* 文本字体大小 */
    color: #000000;
    /* 文本颜色 */
    border: none;
    /* 无边框 */
    border-radius: 16px;
    /* 边框圆角 */
    cursor: pointer;
    /* 鼠标悬停时的光标样式 */
    display: inline-flex;
    /* 按钮为行内弹性盒模型 */
    align-items: center;
    /* 子元素垂直居中 */
    gap: 3px;
    /* 图标和文本之间的间距 */
    transition: background-color 0.3s;
    /* 添加背景颜色过渡效果 */
    padding: 8px 8px 8px 8px;
    /* 上右下左 内边 */
 }

 .woku_Universal_button:hover {
    background-color: #b8b8b8;
    /* 鼠标悬停时的背景颜色 */
 }

 .woku_Universal_button:active {
    background: #a0a0a0;
    /* 鼠标按下时的背景颜色 */
 }

 .woku_Bokeh_color_effect {
    /* 虚化颜色效果*/
    /* 背景颜色 */
    background-color: #e69f6c60;

    /* 下面是模糊效果 */
    backdrop-filter: blur(5px);

 }

 /*------------*/