body {
  font-family: Arial, sans-serif; /* 设置页面字体族 */
  font-size: 16px; /* 设置页面字体大小 */
  line-height: 1.5; /* 设置文本行高 */
  margin: 0; /* 清除页面默认的边距 */
  padding: 0; /* 清除页面默认的内边距 */
  background: linear-gradient(to bottom, #f3f7fb, #d4e6f3, #a3cde3); /* 设置背景渐变色 */
}

/* 设置表单样式 */
form {
  padding: 0px; /* 设置表单内边距 */
  max-width: 600px; /* 设置表单最大宽度 */
  margin: 0 auto; /* 居中对齐表单 */
}

/* 设置输入框、下拉菜单和按钮的样式 */
select,
input[type="text"],
button {
  display: block; /* 将元素设置为块级元素，占一行 */
  margin-bottom: 10px; /* 元素之间设置下外边距 */
  padding: 5px; /* 设置元素内边距 */
  font-size: 17px; /* 设置元素字体大小 */
  border: 5px solid #ccc; /* 设置元素边框 */
  border-radius: 50px; /* 设置元素边框圆角 */
  width: 100%; /* 设置元素宽度占满父元素 */
  box-sizing: border-box; /* 设置元素盒模型为边框盒模型 */
}

/* 设置按钮的样式 */
button {
  background-color: #ff8c00; /* 设置按钮背景颜色 */
  color: #fff; /* 设置按钮文本颜色 */
  border: none; /* 去除按钮边框 */
  cursor: pointer; /* 鼠标移上去时显示手型 */
}

/* 当鼠标悬停在按钮上时，改变按钮背景颜色 */
button:hover {
  background-color: #0062cc;
}

/* 设置表单标签的样式 */
label {
  display: inline-block; /* 将标签设置为行内块元素 */
  margin-bottom: 5px; /* 标签下方设置下外边距 */
  font-weight: bold; /* 设置标签字体为粗体 */
}


select {
  color: darkslategray; 
  text-align: left;
}


/* 对于所有设备，设置 p 标签的默认样式 */
p {
  margin: 0; /* 移除默认的上下边距 */
}

/* 当页面宽度小于767px时，调整文本输入的宽度 */
@media (max-width: 767px) {
  input[type="text"] {
    width: calc(100% - 40px);
  }
}




/* 首页css文件 *
/* 首页css文件 *
/* 首页css文件 */

/* 首页时间和刷新计数器文件 */
.syjsq {
  font-size: 15px; /* PC 字体大小 */
  color: darkslategray; /* 字体颜色 */
}

@media (max-width: 767px) {
  /* 手机设备 */
  .syjsq {
    font-size: 0.8rem; /* 手机字体大小 */
  }
}

 .syjsqsj {
    /* 显示框的宽度为屏幕宽度的 80% */
    width: 80vw;
    /* 显示框的最大宽度为 600px */
    max-width: 600px;
    /* 显示框的内边距为 10px */
    padding: 0px;
    /* 设置显示框的文字居中显示 */
    text-align: center;
    /* 设置显示框的背景色为继承父元素透明 */
    background-color: inherit;
    /* 设置显示框的边框样式 */
    border: 1px solid black;
    /* 设置显示框的圆角 */
    border-radius: 15px;
    /* 设置显示框的阴影效果 */
    box-shadow: 4px 2px 15px rgba(0, 0, 0, 0.3);
    /* 设置显示框在页面中水平居中显示 */
    margin: 0 auto;
    /* 设置显示框之间的间距为 0 */
    margin-bottom: 2;
  }

.syjsqsj:hover,
.syjsqsj:active {
transform: scale(1.12);
}


#date, #time {
  display: inline-block;
  vertical-align: middle;
}

#date {
  text-align: left;
}

#time {
  text-align: right;
  margin-left: auto;
}

.syjsq {
  display: inline-block;
  float: right;
  vertical-align: middle;
  margin-right: 12px;  /*往左移动12px */
}

@media (max-width: 768px) {
  #date, #time {
    display: block;
    text-align: center;
    margin: 0 auto;
  }
  
  .syjsq {
    display: block;
    text-align: right;
    float: none;
    margin-top: -5px;
  }
}

@media (min-width: 769px) {
  .syjsq {
    margin-top: 10px;
  }
}

#date, #time{
  display: inline;
}
 
  #date {
  font-size: 25px; /* PC 字体大小 */
  color: #2E8B57; /* 字体颜色 */
}

@media (max-width: 767px) {
  /* 手机设备 */
  #date {
    font-size: 18px; /* 手机字体大小 */
  }
}

#time {
  font-size: 20px; /* PC 字体大小 */
  color: #5a5af4; /* 字体颜色 */
}

@media (max-width: 767px) {
  /* 手机设备 */
  #time {
    font-size: 16px; /* 手机字体大小 */
  }
}

#time .seconds {
  animation: color-change 1s infinite;
}
@keyframes color-change {
  0% {
    color: #2E8B57; /* 深红色 */
  }
  33% {
    color: #F8B195; /* 淡橙色 */
  }
  66% {
    color: #5a5af4; /* 浅绿色 */
  }
  100% {
    color: #2E8B57; /* 深红色 */
  }
}

.syfwqxx {
  font-size: 18px;
  color: darkslategray;
  overflow: hidden;
  border-right: 0.15em solid transparent;
  white-space: nowrap;
  animation: typing 3s steps(40, end) 1 forwards;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@media (max-width: 767px) {
  .syfwqxx {
    font-size:15px;
  }
} 








/* 首页随机一言文件 */
#jinrishici {
    width: 80vw;
    max-width: 600px;
    padding: 0px;
    text-align: center;
    background-color: inherit;
    border: 1px solid black;
    border-radius: 15px;
    box-shadow: 4px 2px 15px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
    margin-bottom: 2;
    font-size: 1.0rem;
    text-align: left;
    color: #5a5af4;
    cursor: pointer
}

#jinrishici:hover,
#jinrishici:active {
transform: scale(1.12);
}

@media only screen and (max-width: 600px) {
    #jinrishici {
        text-align: left;
        font-size: 0.9rem;
        color: #5a5af4;
    }
}


/* 首页随机一言文件 */
.symryy {
    width: 80vw;
    max-width: 600px;
    padding: 0px;
    text-align: center;
    background-color: inherit;
    border: 1px solid black;
    border-radius: 15px;
    box-shadow: 4px 2px 15px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
    margin-bottom: 2;
    font-size: 1.3rem;
    text-align: left;
    color: darkslategray;
    cursor: pointer
}

.symryy:hover,
.symryy:active {
transform: scale(1.12);
}

#from {
    font-size: 0.8rem;
    color: #5a5af4;
    margin: 0;
    text-align: right;
    position: relative;
    margin-right: 12px;  /*往左移动12px */
}

#hitokoto {
  margin-left: 12.36px;
}


@media only screen and (max-width: 600px) {
    .symryy {
        text-align: left;
        font-size: 1.0rem;
        color: darkslategray;
    }
}





/* 首页热搜文件开始 */
  /* 容器设置 */
  #wbrs-output-container-xyz {
    position: relative;
    width: 80vw;
    max-width: 600px;
    margin: 2px auto;
    text-align: center;
  }

  /* 内部内容居中 */
  #wbrs-output {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0px 0;
    background-color: inherit;
    border: 1px solid black;
    border-radius: 15px;
    box-shadow: 4px 2px 15px rgba(0, 0, 0, 0.3);
    font-size: 20px;
    position: relative;
  }

  /* 居中显示热搜内容 */
  #hot-link-xyz {
    text-decoration: none;
    color: darkslategray;
    margin: 0 10px;
  }

  .hot-prefix-xyz {
    color: #5a5af4;
  }

  /* 左侧箭头 */
  #prev-arrow-xyz {
    position: absolute;
    left: 15px;
    cursor: pointer;
    font-size: 1.0rem;
  }

  /* 右侧箭头 */
  #next-arrow-xyz {
    position: absolute;
    right: 15px;
    cursor: pointer;
    font-size: 1.0rem;
  }

  /* 手机屏幕自动调整 */
  @media only screen and (max-width: 600px) {
    #prev-arrow-xyz, #next-arrow-xyz, #hot-link-xyz, .hot-prefix-xyz {
      font-size: 0.9rem;
    }
  }

/* 首页热搜文件结束 */








/* 首页财经指数文件 */
#sygpzs {
  width: 80vw;
  max-width: 600px;
  padding-top: 0px;        /* 调整框内输出内容与边框顶部之间的距离 */
  padding-bottom: 0px;        /* 调整框内输出内容与边框底部之间的距离 */ 
  text-align: center;           /* 框中内容居中显示 */
  background-color: inherit;
  border: 1px solid black;  /* 边框样式为1像素宽、黑色实线 */
  border-radius: 15px;  /* 边框圆角半径为15像素 */
  box-shadow: 4px 2px 15px rgba(0, 0, 0, 0.3);  /*添加阴影效 */
  margin: 0 auto;  /* 设置左右外边距为auto，实现水平居中 */
  margin-bottom: 2;  /* 底部外边距为2像素 */
  font-size: 20px;  /* 设置字体大小为20像素 */
}

#sygpzs:hover,
#sygpzs:active {
transform: scale(1.12);
cursor: pointer; /* 将鼠标光标设为手型 */
}

    /* 在手机屏幕上自动调整字体大小 */
    @media only screen and (max-width: 600px) {
         #sygpzs {
            text-align: center; 
            font-size: 1.00rem;
        }
    }



#caidan {
  display: flex; /* 将元素设为弹性盒子 */
  flex-wrap: wrap; /* 设置元素换行 */
  justify-content: center; /* 将元素在容器中水平居中 */
  align-items: center; /* 将元素在容器中垂直居中 */
  
  width: 80vw;
  max-width: 600px;
  padding-top: 5px;        /* 调整框内输出内容与边框顶部之间的距离 */
  padding-bottom: 5px;     /* 调整框内输出内容与边框底部之间的距离 */ 
  text-align: center;      /* 框中内容居中显示 */
  background-color: inherit;
  border: 1px solid black; /* 边框样式为1像素宽、黑色实线 */
  border-radius: 15px;     /* 边框圆角半径为15像素 */
  box-shadow: 4px 2px 15px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
  margin: 0 auto;          /* 设置左右外边距为auto，实现水平居中 */
  margin-bottom: 2px;      /* 底部外边距为2像素 */
  font-size: 20px;         /* 设置字体大小为20像素 */
}

    
    
#caidan button {
  flex: 1; /* 设置元素的伸缩比例 */
  margin: 0px; /* 设置元素的外边距 */
  max-width: 150px; /* 设置元素的最大宽度 */
  
  background-color: transparent; /* 将按钮颜色设置为透明 */
  border: 1px solid darkslategray; /* 增加按钮边框宽度并设置颜色为darkslategray */
  color: darkslategray; /* 将字体颜色更改为darkslategray */
  padding: 8px 16px; /* 设置按钮内边距 */
  text-align: center; /* 将按钮内文本居中 */
  text-decoration: none; /* 取消文本下划线 */
  display: inline-block; /* 将元素设为行内块级元素 */
  font-size: 16px; /* 设置字体大小 */
  font-weight: bold; /* 将字体加粗 */
  cursor: pointer; /* 将鼠标指针设为手型 */
  border-radius: 30px; /* 设置按钮圆角半径 */
  box-shadow: 0px 2px 4px rgba(0,0,0,0.4); /* 设置按钮的阴影效果 */
  white-space: nowrap; /* 避免按钮文字换行 */
  position: relative; /* 添加 position 属性 */
}


#caidan button:hover {
  background-color: #e1e1e1; /* 将悬停时的背景色调为淡雅的灰色 */
  transform: translateY(-2px); /* 设置按钮向上移动2个像素 */
  box-shadow: 0px 4px 8px rgba(0,0,0,0.4); /* 将按钮的阴影效果加强 */
}





/* 首页功德木鱼念珠css文件 */
#sygdmynz {
  width: 80vw; /* 显示框的宽度为屏幕宽度的 80% */
  max-width: 600px; /* 显示框的最大宽度为 600px */
  padding: 0px; /* 显示框的内边距为 0px */
  text-align: center; /* 设置显示框的文字居中显示 */
  background-color: inherit; /* 背景色 */
  border: 1px solid black; /* 设置显示框的边框样式 */
  border-radius: 15px; /* 设置显示框的圆角 */
  box-shadow: 4px 2px 15px rgba(0, 0, 0, 0.3); /* 设置显示框的阴影效果 */
  margin: 0 auto; /* 设置显示框在页面中水平居中显示 */
  margin-bottom: 2px; /* 底部外边距为2px */
  position: relative; /* 添加 position 属性 */
  font-size: 16px; /* 设置字体大小 */
  color: #5a5af4; /* 设置字体颜色 */
  background: transparent; /* 背景透明 */
}

#sygdmynz img {
  width: 80px; /* 设置图片宽度 */
  height: 80px; /* 设置图片高度 */
  cursor: pointer; /* 设置鼠标悬停时显示手型 */
  transition: transform 0.2s ease-in-out; /* 设置放大效果的过渡动画 */
  display: inline-block; /* 设为行内块元素 */
  margin-right: 10px; /* 图片之间的右边距 */
}

#sygdmynz img:hover {
  transform: scale(1.6); /* 鼠标悬停时放大图片 */
}

#sygdmynz img:active {
  animation: shake 0.2s ease-in-out; /* 点击时触发摇动动画 */
}

@keyframes shake {
  0% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(-2px, 0) rotate(-2deg); }
  40% { transform: translate(2px, 0) rotate(2deg); }
  60% { transform: translate(-2px, 0) rotate(-2deg); }
  80% { transform: translate(2px, 0) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

#sygdmynz p {
  display: inline-block;
  margin: 0;
  float: right; /* 调整文本浮动 */
  margin-right: 12px; /* 向右移动12px */
  margin-top: 50px; /* 向下移动以调整位置 */
  position: relative;
}

#tip {
  position: absolute; /* 添加 position 属性 */
  top: 30px; /* 将元素移动到父元素顶部 */
  transform: translateX(-50%); /* 向左移动一半元素宽度以居中 */
  background-color: #2E8B57; /* 设置提示框背景色 */
  color: #fff; /* 设置字体颜色 */
  padding: 1px;
  border-radius: 1px; /* 设置提示框圆角 */
  font-size: 14px; /* 设置字体大小 */
  display: none; /* 默认隐藏 */
}

#sygdmynz img:hover + #tip {
  display: block; /* 当鼠标悬停在图片上时显示提示框 */
}

@media only screen and (max-width: 600px) {
  #sygdmynz {
    font-size: 3.7vw; /* 小屏幕下的字体大小 */
    color: #5a5af4; /* 字体颜色保持不变 */
  }
}



/* 首页价值观 */
.marquee-container {
  width: 80vw; /* 显示框的宽度为屏幕宽度的 80% */
  max-width: 600px; /* 显示框的最大宽度为 600px */
  padding: 0px; /* 显示框的内边距为 0px */
  text-align: center; /* 设置显示框的文字居中显示 */
  background-color: inherit; /* 背景色 */
  border: 1px solid black; /* 设置显示框的边框样式 */
  border-radius: 15px; /* 设置显示框的圆角 */
  box-shadow: 4px 2px 15px rgba(0, 0, 0, 0.3); /* 设置显示框的阴影效果 */
  margin: 0 auto; /* 设置显示框在页面中水平居中显示 */
  margin-bottom: 2px; /* 底部外边距为2px */
  position: relative; /* 添加 position 属性 */
  
  font-size: 1rem; /* 设置字体大小 */
  color: darkslategray; /* 字体颜色 */
  white-space: nowrap; /* 避免文字换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  box-sizing: border-box; /* 包括边框和内边距在内的总宽度计算 */
}

.marquee-container:hover,
.marquee-container:active {
  transform: scale(1.12); /* 放大 */
  cursor: pointer; /* 将鼠标光标设为手型 */
}

@media only screen and (max-width: 600px) {
  .marquee-container {
    font-size: 0.8rem; /* 设置小屏幕的字体大小 */
  }
}

.marquee {
  display: inline-block;
  padding-right: 20px; /* 调整每组之间的间距 */
  animation: marquee 10s linear infinite; /* 设置滚动动画 */
}

.marquee strong {
  color: darkslategray; /* 设置加粗文本的颜色 */
  font-weight: bold; /* 设置文本加粗 */
}

@keyframes marquee {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}


/* 首页嵌入imrrgo结束 */
#sytqhhy {
    background-color: transparent;
    width: 80vw;
    max-width: 600px;
    height: 33vh;
    max-height: 29px;
    padding: 5px;
    text-align: center;
    background-color: inherit;
    border: 1px solid black;
    border-radius: 15px;
    box-shadow: 4px 2px 15px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
    margin-bottom: 2px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* 添加 box-sizing */
}

#sytqhhy iframe {
    width: 100%; /* 确保iframe宽度为100% */
    height: 100%; /* 确保iframe高度为100% */
    border-radius: 15px;
    box-sizing: border-box; /* 添加 box-sizing */
}

#sytqhhy:hover {
    transform: scale(1.12) translateX(10px);
    box-sizing: border-box; /* 确保在悬停时边框和填充不影响大小 */
}
/* 首页嵌入imrrgo结束 */


  /* 首页点击小图片弹出大图片CSS---开始 */
#tantanchuceng {
    background-color: transparent;
    width: 80vw;
    max-width: 600px;
    height: 55vh;
    max-height: 40px;
    padding: 5px;
    text-align: center;
    background-color: inherit;
    border: 1px solid black;
    border-radius: 15px;
    box-shadow: 4px 2px 15px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
    margin-bottom: 2px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}



#iconContainer-tanchuceng {
    display: flex;
    justify-content: center; /* 水平居中 */
    gap: 22px; /* 每个图标之间的间隔 */
    padding: 0 10px; /* 可以适当设置左右内边距 */
}


.small-icon-tanchuceng {
    width: 30px;
    height: 30px;
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer; /* 手型指针 */
    transition: transform 0.3s; /* 默认状态下无动画 */
}

.small-icon-tanchuceng:hover {
    animation: shake 0.3s infinite ease-in-out;
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(0); }
    75% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}




/* 针对手机端，调整左右间隔 */
@media screen and (max-width: 768px) {
    .small-icon-tanchuceng {
        margin-left: -5px;
        margin-right: -5px;
    }
}




/*从顶部掉落图片的CSS*/
@keyframes dropInEffect-tanchuceng {
  0% {
    transform: translateY(-100%); /* 从顶部之外开始 */
    opacity: 0; /* 初始透明 */
  }
  70% {
    transform: translateY(0);
    opacity: 1; /* 渐渐出现 */
  }
  80% {
    transform: translateY(-10px); /* 轻微反弹 */
  }
  90% {
    transform: translateY(5px); /* 再次反弹 */
  }
  100% {
    transform: translateY(0); /* 回到最终位置 */
  }
}

.layer-popup-tanchuceng {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.0);
  display: none;
  align-items: center;
  justify-content: center;
}

.popup-box-tanchuceng {
  position: relative;
  background-color: #fff;
  padding: 7px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  animation: dropInEffect-tanchuceng 0.6s ease-in-out; /* 使用从顶部降落并带有抖动的动画 */
}


@keyframes zoomInEffect-tanchuceng {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.large-img-tanchuceng {
  width: auto;
  height: auto;
}

.mask-tanchuceng {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  display: none;
}

  /* 首页点击小图片弹出大图片CSS---结束 */








/* 首页导航文件 */
#sydh {
  width: 80vw;
  max-width: 600px;
  padding-top: 5px;        /* 调整框内输出内容与边框顶部之间的距离 */
  padding-bottom: 5px;     /* 调整框内输出内容与边框底部之间的距离 */ 
  text-align: center;      /* 框中内容居中显示 */
  background-color: inherit;
  border: 1px solid black; /* 边框样式为1像素宽、黑色实线 */
  border-radius: 15px;     /* 边框圆角半径为15像素 */
  box-shadow: 4px 2px 15px rgba(0, 0, 0, 0.3);  /* 添加阴影效果 */
  margin: 0 auto;          /* 设置左右外边距为auto，实现水平居中 */
  margin-bottom: 2px;      /* 底部外边距为2像素 */
  font-size: 20px;         /* 设置字体大小为20像素 */
  display: flex;           /* 将元素设为弹性盒子 */
  flex-wrap: wrap;         /* 设置元素换行 */
  justify-content: center; /* 将元素在容器中水平居中 */
  align-items: center;     /* 将元素在容器中垂直居中 */
}

#sydh button {
  flex: 1; /* 设置元素的伸缩比例 */
  margin: 0px; /* 设置元素的外边距 */
  max-width: 150px; /* 设置元素的最大宽度 */
  
  background-color: transparent; /* 将按钮颜色设置为透明 */
  border: 1px solid darkslategray; /* 增加按钮边框宽度并设置颜色为darkslategray */
  color: darkslategray; /* 将字体颜色更改为darkslategray */
  padding: 8px 16px; /* 设置按钮内边距 */
  text-align: center; /* 将按钮内文本居中 */
  text-decoration: none; /* 取消文本下划线 */
  display: inline-block; /* 将元素设为行内块级元素 */
  font-size: 16px; /* 设置字体大小 */
  font-weight: bold; /* 将字体加粗 */
  cursor: pointer; /* 将鼠标指针设为手型 */
  border-radius: 30px; /* 设置按钮圆角半径 */
  box-shadow: 0px 2px 4px rgba(0,0,0,0.4); /* 设置按钮的阴影效果 */
  white-space: nowrap; /* 避免按钮文字换行 */
  position: relative; /* 添加 position 属性 */
}

#sydh button:hover {
  background-color: #e1e1e1; /* 将悬停时的背景色调为淡雅的灰色 */
  transform: translateY(-2px); /* 设置按钮向上移动2个像素 */
  box-shadow: 0px 4px 8px rgba(0,0,0,0.4); /* 将按钮的阴影效果加强 */
}



  /* 加载动画遮罩层 */
  .loading-overlay {
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: transparent;
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
  }

  .spinner {
      width: 110px;
      height: 100px;
      background-color: rgba(255, 105, 180, 0.1);
      border-radius: 20px;
      position: relative;
      margin: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      animation: jumping 0.8s infinite alternate;
  }

  .spinner .eye {
      width: 40%;
      height: 40%;
      border-radius: 50%;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .spinner .eye .eyeball {
      width: 50%;
      height: 50%;
      border-radius: 50%;
      background-color: #e55A54;
      animation: eyemove 1.6s infinite alternate;
  }

  .spinner .mouth {
      width: 32%;
      height: 12px;
      border-radius: 12px;
      background-color: #e55A54;
      margin-top: 15%;
  }

  .spinner::before,
  .spinner::after {
      content: "";
      display: block;
      width: 20%;
      height: 10px;
      background-color: #fff;
      border-radius: 10px;
      position: absolute;
      left: 50%;
      top: -10px;
  }

  .spinner::before {
      transform: translateX(-70%) rotate(45deg);
  }

  .spinner::after {
      transform: translateX(-30%) rotate(-45deg);
  }

  @keyframes jumping {
      0% {
          top: 0;
          box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
      }

      50% {
          top: 0;
          box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
      }

      100% {
          top: -50px;
          box-shadow: 0px 120px 50px rgba(0, 0, 0, 0.2);
      }
  }

  @keyframes eyemove {
      0%,
      10% {
          transform: translate(50%);
      }

      90%,
      100% {
          transform: translate(-50%);
      }
  }
  /* 加载动画结束 */







/* 首页css结束 */
/* 首页css结束 */
/* 首页css结束 */




/* 这里是便民服务的菜单栏的css */
#xhzd button {
  cursor: pointer; /* 将鼠标光标设为手型 */
  position: relative;
  top: -5px;
  display: inline-block; 
  margin-right: 10px; 
  width: auto; /* 按钮宽度自适应内容 */
  white-space: nowrap; /* 禁止文本自动换行 */
  background-color: #2E8B57;  /* 按钮颜色为草绿色 */
}

#xhzd button:hover {
  background-color: #5a5af4; /* 鼠标悬停时设置背景颜色为紫药水色 */
  transform: translateY(-2px); /* 设置按钮向上移动2个像素 */
  box-shadow: 0px 4px 8px rgba(0,0,0,0.4); /* 将按钮的阴影效果加强 */
}

/* 新闻 */
.result-container {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-left: 5px solid #4CAF50;
    border-radius: 5px;
}

.result-container h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #333;
}

.result-container p {
    margin: 5px 0;
    color: #666;
}

.result-container .description {
    color: #444;
}

.result-container a {
    color: #4CAF50;
    text-decoration: none;
    font-weight: bold;
}

.result-container a:hover {
    text-decoration: underline;
}

/* 热搜样式 */
.hot-search-container {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-left: 5px solid #FF5722;
    border-radius: 5px;
}

.hot-search-title {
    color: #FF5722;
    font-size: 18px;
    margin-bottom: 5px;
}

.hot-search-hotnum {
    font-size: 14px;
    color: #999;
}

/* 错误提示样式 */
.error {
    color: red;
    font-weight: bold;
    font-size: 16px;
}


/* 黄历美化 */
.result-container {
    background-color: #f9f9f9; /* 背景颜色 */
    border: 1px solid #ddd; /* 边框 */
    padding: 20px; /* 内边距 */
    margin: 15px 0; /* 外边距 */
    border-radius: 10px; /* 边框圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.result-container p {
    font-size: 16px; /* 文字大小 */
    line-height: 1.8; /* 行高 */
    color: #333; /* 文字颜色 */
    margin: 5px 0; /* 段落间距 */
    position: relative; /* 相对定位，为了加十字 */
}

.result-container p span {
    color: #d9534f; /* 强调的文字颜色，使用红色 */
    font-weight: bold; /* 粗体显示 */
}

.result-container p span:first-child {
    color: #5bc0de; /* 第一列的文字颜色，使用蓝色 */
}

.result-container p span {
    display: inline-block;
    min-width: 120px; /* 给左边的文字一固定宽度对齐 */
}

/* 每行底部添加分割线 */
.result-container p::after {
    content: "";
    display: block;
    height: 1px;
    background-color: #ddd; /* 分割线颜色 */
    margin-top: 10px;
}

/* 鼠标悬停时的效果 */
.result-container p:hover {
    background-color: #f2f2f2; /* 段落 hover 时改变背景颜色 */
    color: #337ab7; /* 文字变色 */
    cursor: crosshair; /* 鼠标指针变为十字形 */
}

/* 鼠标悬停时，十字形显示的变化 */
.result-container p:hover::before {
    content: "+";
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    font-size: 18px;
    color: #d9534f;
}
/* 黄历美化 */


/* 油价美化 */
#yj-output h2 {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 10px;
    text-align: center;
}

.gas-type {
    font-size: 22px;
    margin: 8px 0;
    color: #34495e;
}

.gas-price {
    font-weight: bold;
    color: #e74c3c;
}

.last-updated {
    font-size: 18px;
    color: #7f8c8d;
    text-align: right;
    margin-top: 15px;
    font-style: italic;
}

.gas-type::before {
    content: "⛽"; /* 在每行油价前添加一个图标 */
    margin-right: 5px;
    color: #95a5a6;
}


/*新华字典  */
@media (min-width: 767px) {
  /* PC设备 */
  #xhzd-output, #dxx-output, .result-container {
    max-width: 70%; /* 例如，屏幕宽度的60% */
      margin: 0 auto; /* 居中对齐表单 */
  }
}



/* 随机音乐美化 */
#music-output h2 {
    font-size: 18px;
    color: #4CAF50;
}

audio {
    width: 100%;
    margin-top: 10px;
}
#music-output h2 a {
    text-decoration: none;
    color: #4CAF50;
}

#music-output h2 a:hover {
    color: #3E8E41;
}
  #music-output img {
    width: auto;
    max-height: 45vh; /* 最大高度设置为视口高度的 40% */
    object-fit: cover; /* 保持图片的纵横比并填充容器 */
  }



/* 彩票开奖子选项 */
#cpkj-select {
  height: 35px;
  width: 140px;
  font-size: 14px;
  position: relative;
  top: -5px;
}

#cpkj-output {
  position: relative;
  top: 0px;
  font-size: 22px;
  text-align: center;
  color: red;
}




/* IP功能菜单栏 */
#ip_address_option button:hover {
  background-color: #5a5af4; /* 鼠标悬停时设置背景颜色为紫药水色 */
  transform: translateY(-5px); /* 设置按钮向上移动2个像素 */
  box-shadow: 0px 4px 8px rgba(0,0,0,0.4); /* 将按钮的阴影效果加强 */
}


/* 针对 #ipchaxun-output 内部的段落 p */
#ipchaxun-output p {
    margin: 10px 0;
    font-size: 14px;
    color: #555;
    text-transform: uppercase; /* 字体大写 */
    letter-spacing: 1px; /* 增加字间距 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 字体加阴影特效 */
    transition: color 0.3s ease; /* 颜色渐变效果 */
    word-wrap: break-word; /* 超出宽度自动换行 */
    word-break: break-all; /* 处理长单词的自动换行 */
}


/* 设置 #ipchaxun-output 内的 hr 样式 */
#ipchaxun-output hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 15px 0;
}



  /*--pc-IP信息---国内，检测，隐匿 ---图像功能（去水印）*/
@media (min-width: 767px) {
  #ipjiance-output iframe, #guonei-output iframe, #whoer-output iframe, #qushuiyin-output iframe {
    border: 1px solid #2E8B57;
    height: calc(78.5vh - 2px); 
}
}

  /*-手机-IP信息---国内，检测，隐匿 ---图像功能（去水印）*/
@media (max-width: 767px) {
  #ipjiance-output iframe, #guonei-output iframe, #whoer-output iframe, #qushuiyin-output iframe {
    border: 1px solid #2E8B57;
    height: calc(70vh - 2px); 
}
}


/* IP功能菜单栏------结束*/



/* 这里是图像功能的菜单栏的css */
#tupian button {
  cursor: pointer; /* 将鼠标光标设为手型 */
  position: relative;
  top: 0px;
  display: inline-block; 
  margin-right: 10px; 
  width: auto; /* 按钮宽度自适应内容 */
  white-space: nowrap; /* 禁止文本自动换行 */
  background-color: transparent; /* 将按钮颜色设置为透明 */
  font-weight: bold; /* 将字体加粗 */
  border: 2px solid darkslategray; /* 增加按钮边框宽度并设置颜色为darkslategray */
  color: darkslategray;
}

#tupian button:hover {
  background-color: #2E8B57; /* 鼠标悬停时设置背景颜色为紫药水色 */
  transform: translateY(2px); /* 设置按钮向上移动2个像素 */
  box-shadow: 0px 4px 8px rgba(0,0,0,0.4); /* 将按钮的阴影效果加强 */
}





  /*--pc-（去水印）*/
@media (min-width: 767px) {
  #qushuiyin-output iframe {
    border: 1px solid #2E8B57;
    height: calc(78.2vh - 2px); 
}
}

  /*-手机-（去水印）*/
@media (max-width: 767px) {
  #qushuiyin-output iframe {
    border: 1px solid #2E8B57;
    height: calc(69.8vh - 2px); 
}
}






/* 这里是图像功能的菜单栏的css-------结束 */


  /*存储影音--css文件 */
#tuchuang button {
  cursor: pointer; /* 将鼠标光标设为手型 */
  position: relative;
  top: 0px;
  display: inline-block; 
  margin-right: 10px; 
  width: auto; /* 按钮宽度自适应内容 */
  white-space: nowrap; /* 禁止文本自动换行 */
  background-color: transparent; /* 将按钮颜色设置为透明 */
  font-weight: bold; /* 将字体加粗 */
  border: 2px solid darkslategray; /* 增加按钮边框宽度并设置颜色为darkslategray */
  color: darkslategray;
}

#tuchuang button:hover {
  background-color: #2E8B57; /* 鼠标悬停时设置背景颜色为紫药水色 */
  transform: translateY(2px); /* 设置按钮向上移动2个像素 */
  box-shadow: 0px 4px 8px rgba(0,0,0,0.4); /* 将按钮的阴影效果加强 */
}

/*
  #tuchuang-output, #tcvideo-output, #tcduanlianjie-output, #tcbkms-output {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #tuchuang-output iframe, #tcvideo-output iframe, #tcduanlianjie-output iframe, #tcbkms-output iframe {
    border: 1px solid #2E8B57;
    height: calc(580px - 2px); 
      width: calc(900px - 2px); 
    }


@media (max-width: 767px) {

    #tuchuang-output iframe, #tcvideo-output iframe, #tcduanlianjie-output iframe, #tcbkms-output iframe {
    height: 75vh; 
   width: 380px; 
 }
}
 */

  /* output通配符iframe 
div[id$="output"] iframe {
    border: 1px solid #2E8B57;
    height: calc(580px - 2px);
    width: calc(900px - 2px);
}
*/
  /*存储影音--css文件结束 */




/* 这里是嵌入式的css */
#daohang button {
  cursor: pointer; /* 将鼠标光标设为手型 */
  position: relative;
  top: -5px;
  display: inline-block; 
  margin-right: 10px; 
  width: auto; /* 按钮宽度自适应内容 */
  white-space: nowrap; /* 禁止文本自动换行 */
  background-color: transparent; /* 将按钮颜色设置为透明 */
  font-weight: bold; /* 将字体加粗 */
  border: 2px solid darkslategray; /* 增加按钮边框宽度并设置颜色为darkslategray */
  color: darkslategray;
}

#daohang button:hover {
  background-color: #2E8B57; /* 鼠标悬停时设置背景颜色为紫药水色 */
  transform: translateY(-2px); /* 设置按钮向上移动2个像素 */
  box-shadow: 0px 4px 8px rgba(0,0,0,0.4); /* 将按钮的阴影效果加强 */
}

/*嵌入式-PC端*/
@media (min-width: 767px) {
#daohang-output iframe, #chatgpt-output iframe, #jisuanqi-output iframe, #sinacj-output iframe, #qhkc-output iframe, #hejjw-output iframe, #cjysjs-output iframe, #fenghuangwang-output iframe, #jrtt-output iframe {
    border: 1px solid #2E8B57;
    height: calc(84.4vh - 2px); 
    width: calc(83vw - 2px); 
    }
}


/*嵌入式-手机端*/
@media (max-width: 767px) {
#daohang-output iframe, #chatgpt-output iframe, #jisuanqi-output iframe, #sinacj-output iframe, #qhkc-output iframe, #hejjw-output iframe, #cjysjs-output iframe, #fenghuangwang-output iframe, #jrtt-output iframe {
    border: 1px solid #2E8B57;
        height: calc(76.2vh - 2px); 
    width: calc(100vw - 2px); 
    }
}



  /*这里是嵌入式的菜单栏的css 结束*/



/* 留言功能菜单栏 */
#jsb button {
  cursor: pointer; /* 将鼠标光标设为手型 */
  position: relative;
  top: 0;
  display: inline-block; 
  margin-right: 10px; 
  width: auto; /* 按钮宽度自适应内容 */
  white-space: nowrap; /* 禁止文本自动换行 */
  background-color: #2E8B57;  /* 按钮颜色为草绿色 */
}

#jsb button:hover {
  background-color: #5a5af4; /* 鼠标悬停时设置背景颜色为紫药水色 */
  transform: translateY(-2px); /* 设置按钮向上移动2个像素 */
  box-shadow: 0px 4px 8px rgba(0,0,0,0.4); /* 将按钮的阴影效果加强 */
}

/* 留言，查看按钮定位到输入框上 */
.rareButtonContainer {
    position: absolute;
    bottom: 5px;
    right: 5px;
    display: flex;
}

.rareButton {
    width: 80px;
    height: 30px;
    margin-left: 5px;
}
/* 留言，查看按钮定位到输入框上结束 */


#jsbout-output {
      margin: 0 auto; /* 居中对齐表单 */
    max-width: 70%;
}


/*嵌入式-手机端*/
@media (max-width: 767px) {
#jsbout-output {
    max-width: 95%;
    }
}


/*嵌入式时间-PC端*/
@media (min-width: 767px) {
#sjsj-output iframe {
    border: 1px solid #2E8B57;
    height: calc(63.5vh - 2px); 
    width: calc(83vw - 2px); 
    }
}


/*嵌入式-手机端*/
@media (max-width: 767px) {
#sjsj-output iframe {
    border: 1px solid #2E8B57;
        height: calc(57.4vh - 2px); 
    width: calc(100vw - 2px); 
    }
}