.maolv_bj {
  position: fixed;                                    /* 固定定位 */
  left: 0;                                            /* 左边距 */
  top: 0;                                             /* 上边距 */
  width: 100%;                                        /* 宽度 */
  height: 100%;                                       /* 高度 */
  background: rgba(0, 0, 0, 0.5);                     /* 半透明背景色 */
  display: flex;                                      /* 弹性盒子布局 */
  justify-content: center;                            /* 子元素水平居中 */
  align-items: center;                                /* 子元素垂直居中 */
  z-index: 99999;                                     /* 堆叠顺序 */
}

.maolv_box {
  width: 20rem;                                       /* 宽度 */
}

.maolv_box_content {
  font-size: 16px;                                    /* 字体大小 */
  text-align: center;                                 /* 文本居中 */
  color: #333;                                        /* 字体颜色 */
  line-height: 50px;                                  /* 行高设置 */
  padding: 5px 15px 5px 15px;                         /* 内边距 */
  background: linear-gradient(135deg,rgba(255, 255, 255, 0.93) 0%,rgba(255, 255, 255, 0.93) 100%); /* 半透渐变 */
  overflow-y: auto;                                   /* 添加垂直滚动条 */
  max-height: 70%;                                    /* 设置最大高度 */
}

.maolv_box_content_iframe {
  text-align: center;                                 /* 文本居中 */
  padding: 0px 0px;                                   /* 内边距 */
  background-color: #FFFFFF;                          /* 背景颜色 */
}

.maolv_box_content_iframe iframe {
    width: 100%;                                      /* 宽度 */
    height: 80%;                                      /* 高度 */
    border-style: none;                               /* 去除边框 */
    outline: none;                                    /* 确保没有轮廓线 */
}

.maolv_title {
  position: relative;                                 /* 相对定位 */
  width: 100%;                                        /* 宽度 */
  height: 50px;                                       /* 高度 */
  background: linear-gradient(135deg,rgba(71, 209, 135, 0.92) 0%,rgba(70, 157, 95, 0.92) 100%); /* 渐变背景 */
  display: flex;                                      /* 弹性盒子布局 */
  justify-content: center;                            /* 水平居中 */
  align-items: center;                                /* 垂直居中 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);        /* 文字阴影 */
  border-radius: 8px 8px 0 0;                         /* 圆角 */
}

.maolv_name {
  width: 100%;                                        /* 宽度 */
  margin-left:20px;                                   /* 左边距 */
  font-size: 18px;                                    /* 字体大小 */
  color: #fff;                                        /* 字体颜色 */
}

.maolv_close {
  position: absolute;                                 /* 绝对定位 */
  right: 15px;                                        /* 右边距 */
  font-size: 25px;                                    /* 字体大小 */
  color: #fff;                                        /* 字体颜色 */
  cursor:pointer;                                     /* 鼠标指针样式 */
}

.maolv_btn {
  display: flex;                                      /* 弹性盒子布局 */
  align-items: center;                                /* 居中对齐 */
  justify-content: center;                            /* 中心对齐 */
  border-top: 1px solid #DCDCDC;                      /* 边框 */
  border-radius: 0 0 8px 8px;                         /* 圆角 */
  overflow: hidden;                                   /* 隐藏溢出内容 */
}

.maolv_btn .button1 {                                 
  flex: 1;                                            /* 弹性宽度 */
  color: #999;                                        /* 字体颜色 */
  cursor: pointer;                                    /* 鼠标指针样式 */
  padding: 13px;                                      /* 内边距 */
  font-size: 18px;                                    /* 字体大小 */
  border-right: 1px solid #DCDCDC;                    /* 边框 */
  background: linear-gradient(135deg,rgba(255, 255, 255, 0.92) 0%,rgba(255, 255, 255, 0.92) 100%); /* 渐变背景 */
  text-align: center;                                 /* 文本居中 */
  transition: all 0.3s ease;                          /* 过渡效果 */
}

.maolv_btn .button1:active {
  background: linear-gradient(135deg,rgba(230, 230, 230, 0.92) 0%,rgba(230, 230, 230, 0.92) 100%); /* 渐变背景 */
  color: #666;                                        /* 字体颜色 */
  transform: translateY(2px);                         /* 平移变换 */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);           /* 阴影 */
}

.maolv_btn .button2 {                                 
  flex: 1;                                            /* 弹性宽度 */
  color: #00A3FF;                                     /* 字体颜色 */
  cursor: pointer;                                    /* 鼠标指针样式 */
  padding: 13px;                                      /* 内边距 */
  font-size: 18px;                                    /* 字体大小 */
  background: linear-gradient(135deg,rgba(255, 255, 255, 0.92) 0%,rgba(255, 255, 255, 0.92) 100%); /* 渐变背景 */
  text-align: center;                                 /* 文本居中 */
  transition: all 0.3s ease;                          /* 过渡效果 */
}

.maolv_btn .button2:active {
  background: linear-gradient(135deg,rgba(200, 230, 255, 0.92) 0%,rgba(200, 230, 255, 0.92) 100%); /* 渐变背景 */
  color: #007ACC;                                     /* 字体颜色 */
  transform: translateY(2px);                         /* 平移变换 */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);           /* 阴影 */
}

.maolv_tishi {
    position: fixed;                                  /* 固定定位 */
    z-index: 99999;                                   /* 堆叠顺序 */
    top: 50%;                                         /* 上边距 */
    left: 50%;                                        /* 左边距 */
    transform: translate(-50%, -50%);                 /* 转换位置 */
    width: fit-content;                               /* 自适应宽度 */
    min-width: 80px;                                  /* 最小宽度 */
    max-width: 80%;                                   /* 最大宽度 */
    padding: 8px 16px;                                /* 内边距 */
    border-radius: 8px;                               /* 圆角 */
    background: rgba(0, 0, 0, 0.75);                  /* 背景颜色 */
    display: flex;                                    /* 弹性盒子布局 */
    justify-content: center;                          /* 水平居中 */
    align-items: center;                              /* 垂直居中 */
    white-space: nowrap;                              /* 文本不换行 */
    animation: fadeIn 0.4s ease-out both;             /* 动画 */
}

.maolv_tishi .maolv_tishi_text {
    font-size: 15px;                                  /* 字体大小 */
    color: #fff;                                      /* 字体颜色 */
    line-height: 1.2;                                 /* 行高 */
    text-align: center;                               /* 文本居中 */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -45%); } /* 开始状态 */
    to   { opacity: 1; transform: translate(-50%, -50%); } /* 结束状态 */
}

/* 定义加载动画的容器样式 */
.maolv_loading {
  position: fixed;                                    /* 固定定位，使元素固定在视窗中 */
  left: 0;                                            /* 距离左边0像素 */
  top: 0;                                             /* 距离顶部0像素 */
  width: 100%;                                        /* 宽度占满整个视窗宽度 */
  height: 100%;                                       /* 高度占满整个视窗高度 */
  background: rgba(255, 255, 255, 0.1);               /* 半透明白色背景 */
  display: flex;                                      /* 使用flex布局 */
  justify-content: center;                            /* 子元素水平居中 */
  align-items: center;                                /* 子元素垂直居中 */
  z-index: 999999;                                    /* 设置高z-index值，使其位于页面最上层 */
}

/* 加载内容的样式 */
.maolv_loading_content {
  background: rgba(255, 255, 255, 1);                 /* 白色背景 */
  border-radius: 12px;                                /* 圆角半径为12px */
  padding: 15px;                                      /* 内边距为15px */
  display: flex;                                      /* 使用flex布局 */
  flex-direction: column;                             /* 子元素垂直排列 */
  align-items: center;                                /* 子元素水平居中 */
  justify-content: center;                            /* 子元素垂直居中 */
  min-width: 50px;                                    /* 最小宽度为50px */
  min-height: 50px;                                   /* 最小高度为50px */
  box-shadow: 0px 2px 8px rgba(45, 48, 55, 0.15);     /* 添加阴影效果 */
}

/* 加载文本的样式 */
.maolv_loading_text {
  margin-top: 10px;                                   /* 上边距为10px */
  font-size: 12px;                                    /* 字体大小为12px */
  color: #757474;                                     /* 文字颜色 */
  text-align: center;                                 /* 文本居中 */
  font-weight: bold;                                  /* 粗体 */
}

/**********************************************************/
/* 齿轮加载

<div class="loading_gear"></div>

*/ 
.loading_gear {
  width: 45px;                                        /* 宽度为45px */
  height: 45px;                                       /* 高度为45px */
  display: grid;                                      /* 使用grid布局 */
  color: #0AA7F6;                                     /* 前景色为蓝色 */
  background: radial-gradient(farthest-side, currentColor calc(100% - 7px),#0000 calc(100% - 6px) 0); /* 径向渐变背景 */
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 15px),#000 calc(100% - 13px)); /* Webkit遮罩 */
  border-radius: 50%;                                 /* 圆形 */
  animation: loading_gear 2s infinite linear;         /* 应用名为loading_gear-sm4bhi的动画，持续时间为2秒，无限循环 */
}

/* loading_gear的伪元素样式定义 */
.loading_gear::before,
.loading_gear::after {
  content: "";                                        /* 内容为空 */
  grid-area: 1/1;                                     /* 占据grid的第一个单元格 */
  background: linear-gradient(currentColor 0 0) center, linear-gradient(currentColor 0 0) center; /* 线性渐变背景 */
  background-size: 100% 11px,11px 100%;               /* 背景尺寸 */
  background-repeat: no-repeat;                       /* 背景不重复 */
}

.loading_gear::after {
  transform: rotate(45deg);                           /* 旋转45度 */
}

@keyframes loading_gear {                             /* loading_gear-sm4bhi动画的关键帧 */
  100% {
    transform: rotate(1turn);                         /* 完整旋转一圈 */
  }
}

/*************************************************************/
/* 普通加载圈

<div class="loading_quan"></div>

*/
.loading_quan {
  width: 45px;                                        /* 宽度为45px */
  height: 45px;                                       /* 高度为45px */
  border: 8px solid #CBCBCB;                          /* 实线边框 */
  border-top-color: #0AA7F6;                          /* 边框顶部颜色 */
  animation: loading_quan 1s linear infinite;         /* 应用spin013151动画，持续时间为1秒，线性执行，无限循环 */
  border-radius: 100%;                                /* 圆形 */
}

@keyframes loading_quan {                             /* spin013151动画的关键帧 */
  to {
    transform: rotate(360deg);                        /* 旋转360度 */
  }
}

/**************************************************************/
/* 灰色相同大小加载圈

<div class="loader1">
    <div class="orbe" style="--index: 0"></div>
    <div class="orbe" style="--index: 1"></div>
    <div class="orbe" style="--index: 2"></div>
    <div class="orbe" style="--index: 3"></div>
    <div class="orbe" style="--index: 4"></div>
</div>

*/
.loader1 {
  --size-loader: 45px;                                /* 自定义属性：loader大小 */
  --size-orbe: 8px;                                   /* 自定义属性：orbe大小 */
  width: var(--size-loader);                          /* 使用自定义属性设置宽度 */
  height: var(--size-loader);                         /* 使用自定义属性设置高度 */
  position: relative;                                 /* 相对定位 */
  transform: rotate(45deg);                           /* 旋转45度 */
}

/* orbe的定义 */
.orbe {
  position: absolute;                                 /* 绝对定位 */
  width: 100%;                                        /* 宽度100% */
  height: 100%;                                       /* 高度100% */
  --delay: calc(var(--index) * 0.1s);                 /* 根据--index计算延迟时间 */
  animation: orbit7456 ease-in-out 1.5s var(--delay) infinite; /* 应用orbit7456动画，缓入缓出，持续时间1.5秒，根据--delay延迟，无限循环 */
  opacity: calc(1 - calc(0.2 * var(--index)));        /* 根据--index调整透明度 */
}

.orbe::after {
  position: absolute;                                 /* 绝对定位 */
  content: '';                                        /* 内容为空 */
  top: 0;                                             /* 距离顶部0px */
  left: 0;                                            /* 距离左边0px */
  width: var(--size-orbe);                            /* 使用自定义属性设置宽度 */
  height: var(--size-orbe);                           /* 使用自定义属性设置高度 */
  background-color: #A3A3A3;                          /* 背景颜色 */
  border-radius: 50%;                                 /* 圆形 */
}

@keyframes orbit7456 {                               /* orbit7456动画的关键帧 */
  0% {}

  80%, 100% {
    transform: rotate(360deg);                        /* 旋转360度 */
  }
}
/**************************************************************/
/* 拼多多大小圈加载圈

<div class="pdd-load">
    <div class="pdd-load__dot"></div>
    <div class="pdd-load__dot"></div>
    <div class="pdd-load__dot"></div>
    <div class="pdd-load__dot"></div>
    <div class="pdd-load__dot"></div>
    <div class="pdd-load__dot"></div>
    <div class="pdd-load__dot"></div>
    <div class="pdd-load__dot"></div>
</div>

*/ 
.pdd-load {
  --uib-size: 2.8rem;                                 /* 自定义属性：大小 */
  --uib-speed: .9s;                                   /* 自定义属性：动画速度 */
  --uib-color: #FC2121;                               /* 自定义属性：颜色 */
  position: relative;                                 /* 相对定位 */
  display: flex;                                      /* 使用flex布局 */
  align-items: center;                                /* 居中对齐 */
  justify-content: flex-start;                        /* 开始对齐 */
  height: var(--uib-size);                            /* 使用自定义属性设置高度 */
  width: var(--uib-size);                             /* 使用自定义属性设置宽度 */
}

.pdd-load__dot {
  position: absolute;                                 /* 绝对定位 */
  top: 0;                                             /* 距离顶部0px */
  left: 0;                                            /* 距离左边0px */
  display: flex;                                      /* 使用flex布局 */
  align-items: center;                                /* 居中对齐 */
  justify-content: flex-start;                        /* 开始对齐 */
  height: 100%;                                       /* 高度100% */
  width: 100%;                                        /* 宽度100% */
}

.pdd-load__dot::before {
  content: '';                                        /* 内容为空 */
  height: 20%;                                        /* 高度为父元素的20% */
  width: 20%;                                         /* 宽度为父元素的20% */
  border-radius: 50%;                                 /* 圆形 */
  background-color: var(--uib-color);                 /* 使用自定义属性设置背景颜色 */
  transform: scale(0);                                /* 初始缩放比例为0 */
  opacity: 0.5;                                       /* 初始透明度为0.5 */
  animation: pdd calc(var(--uib-speed) * 1.111) ease-in-out infinite; /* 应用pulse0112动画，根据--uib-speed调整持续时间，缓入缓出，无限循环 */
}
/* 定义第二个点的样式和动画延迟 */
.pdd-load__dot:nth-child(2) {
  transform: rotate(45deg);                           /* 旋转45度 */
}

.pdd-load__dot:nth-child(2)::before {
  animation-delay: calc(var(--uib-speed) * -0.875);   /* 根据--uib-speed自定义属性设置动画延迟时间 */
}

/* 定义第三个点的样式和动画延迟 */
.pdd-load__dot:nth-child(3) {
  transform: rotate(90deg);                           /* 旋转90度 */
}

.pdd-load__dot:nth-child(3)::before {
  animation-delay: calc(var(--uib-speed) * -0.75);    /* 根据--uib-speed自定义属性设置动画延迟时间 */
}

/* 定义第四个点的样式和动画延迟 */
.pdd-load__dot:nth-child(4) {
  transform: rotate(135deg);                          /* 旋转135度 */
}

.pdd-load__dot:nth-child(4)::before {
  animation-delay: calc(var(--uib-speed) * -0.625);   /* 根据--uib-speed自定义属性设置动画延迟时间 */
}

/* 定义第五个点的样式和动画延迟 */
.pdd-load__dot:nth-child(5) {
  transform: rotate(180deg);                          /* 旋转180度 */
}

.pdd-load__dot:nth-child(5)::before {
  animation-delay: calc(var(--uib-speed) * -0.5);     /* 根据--uib-speed自定义属性设置动画延迟时间 */
}

/* 定义第六个点的样式和动画延迟 */
.pdd-load__dot:nth-child(6) {
  transform: rotate(225deg);                          /* 旋转225度 */
}

.pdd-load__dot:nth-child(6)::before {
  animation-delay: calc(var(--uib-speed) * -0.375);   /* 根据--uib-speed自定义属性设置动画延迟时间 */
}

/* 定义第七个点的样式和动画延迟 */
.pdd-load__dot:nth-child(7) {
  transform: rotate(270deg);                          /* 旋转270度 */
}

.pdd-load__dot:nth-child(7)::before {
  animation-delay: calc(var(--uib-speed) * -0.25);    /* 根据--uib-speed自定义属性设置动画延迟时间 */
}

/* 定义第八个点的样式和动画延迟 */
.pdd-load__dot:nth-child(8) {
  transform: rotate(315deg);                          /* 旋转315度 */
}

.pdd-load__dot:nth-child(8)::before {
  animation-delay: calc(var(--uib-speed) * -0.125);   /* 根据--uib-speed自定义属性设置动画延迟时间 */
}

/* 定义脉冲动画的关键帧 */
@keyframes pdd {                               /* pulse0112动画的关键帧 */
  0%, 100% {
    transform: scale(0);                             /* 开始和结束时缩放比例为0 */
    opacity: 0.5;                                    /* 开始和结束时透明度为0.5 */
  }

  50% {
    transform: scale(1);                             /* 中间时刻缩放比例为1 */
    opacity: 1;                                      /* 中间时刻透明度为1 */
  }
}

/**************************************************************/
/* 井号加载

<div class="jinghao"></div>

*/ 
.jinghao {
 position: relative;
 width: 2.5em;
 height: 2.5em;
 transform: rotate(165deg);
}

.jinghao:before, .jinghao:after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 display: block;
 width: 0.5em;
 height: 0.5em;
 border-radius: 0.25em;
 transform: translate(-50%, -50%);
}

.jinghao:before {
 animation: before8 2s infinite;
}

.jinghao:after {
 animation: after6 2s infinite;
}

@keyframes before8 {
 0% {
  width: 0.5em;
  box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }

 35% {
  width: 2.5em;
  box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
 }

 70% {
  width: 0.5em;
  box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
 }

 100% {
  box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }
}

@keyframes after6 {
 0% {
  height: 0.5em;
  box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }

 35% {
  height: 2.5em;
  box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
 }

 70% {
  height: 0.5em;
  box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
 }

 100% {
  box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }
}

.jinghao {
 position: absolute;
 top: calc(50% - 1.25em);
 left: calc(50% - 1.25em);
}
/**************************************************************/