/* 电脑端背景图片 */
           body {
           background-image: url("http://hao.shenxian.ren/templates/default/image/bj3.jpg");
           background-attachment: fixed; /* 背景图片固定不动 */
           background-size: cover; /* 自适应屏幕大小 */
           justify-content: center; /* 水平居中 */
           }
           /* 手机端背景图片 */
      @media only screen and (max-width: 900px) {
      body {
           background-image: url(http://hao.shenxian.ren/templates/default/image/bj3.jpg");
           background-attachment: fixed; /* 背景图片固定不动 */
           background-size: cover; /* 自适应屏幕大小 */
           justify-content: center; /* 水平居中 */
           }}

     #searchForm{
            justify-content: center;/* 水平居中 */
    }
    #searchFormContainer{
      display: flex;/* 弹性布局 */
            justify-content: center;/* 水平居中 */
     
          
    }
        /* 标签页容器 */
  #searchResults {
       width: 100%;  
       height: 832px;
       margin-top: 10px; /* 上外边距 */
       margin-left: 0px; /*左右移动*/
       text-align: center;  /* 水平居中 */
       overflow: hidden;/*溢出自动显示或隐藏滚动条*/
}

    /* 我的导航容器 */
     #centerText {
    
           display: flex;/* 弹性布局 */
           justify-content: center; /* 水平居中 */
           align-items: center; /* 垂直居中 */
           height: 150px; /* 高度 */
		   margin-top: 0px /*上下移动*/
		   margin-left: 0px; /*左右移动*/
           }
     
  #tianqi{
      
  }
  
  
           /* 我的导航样式 */
	     .color-change {
            display: inline-block;
			font-size: 40px; /* 字体大小 */
		    color: #ffffff;/* 字体颜色 */
            font-weight: 450; /* 字体粗细 */
            margin-top: 30px /*上下移动*/
        }
    .container {
      
           text-align: center;  /* 水平居中 */
           margin-top: 10px; /* 上外边距 */

    }
     /* 搜索总容器 */
    .contentda{
        display: flex;   /* 使用弹性布局 */
           text-align: center;  /* 水平居中 */
         
            justify-content: center;   /* 子元素水平居中 */
            align-items: center;   /* 子元素垂直居中 */
              margin-top: 5px; /* 上下移动 */
        }
        
    .fanhui{
        width: 60px;/*宽度*/
        height: 35px;      /* 高度 */
        font-size: 22px;   /* 在这里输入搜索内容 字体大小 */
        color: #fff;        /* 在这里输入搜索内容 字体颜色 */
        font-weight: 4px; /* 字体粗细 */
        border-radius: 5px; /* 圆角 */
        margin-top: 0px; /* 上下边距 */
        background-color: rgba(0, 0, 0, 0.3); /* 黑色背景透明度50% */
           
        }
         /* 鼠标经过时变化 */
         .fanhui:hover {
           color: #10e66b; /* 鼠标经过链接文字时的颜色 */
           background-color: rgba(228, 222, 222, 0.1); /* 黑色背景透明度50% */
           border-color: #f4fcf7;/* 设置边框颜色 */
           }

       /* 搜索短容器 */
       .contentduan {
        min-width: 300px;/* 最小宽度 */
           max-width: 1000px;/* 最大宽度 */
           width: 99%;/* 宽度比 */
            height: 35px; /* 使内容填充容器高度 */
           overflow-x: auto; /* 水平方向显示滚动条 */
           margin-left: 0px; /*左右移动*/
          
         }
            /*滚动条*/
      .contentduan::-webkit-scrollbar {
           width: 0;/*宽度*/
           height: 0;/*高度*/
           }
           /* 搜索宽容器 */
        .contentkuan {
            text-align: left;/* 水平左对齐 */
            width: 1200px; /* 设置内容的宽度超过容器宽度 */
            height: 100%; /* 使内容填充容器高度 */
            margin-left: 3px; /*左右移动*/
            }
        /*搜索引擎和框样式 */
     .search-button {
      width: auto;     /* 搜索引擎框宽度 */
      height: 32px;      /* 搜索引擎框高度 */
      font-size: 16px;   /* 在这里输入搜索内容 字体大小 */
      color: #fff;         /* 在这里输入搜索内容 字体颜色 */
      border-radius: 5px; /* 圆角 */
      margin-top: 0px; /* 上下边距 */
      background-color: rgba(0, 0, 0, 0.3); /* 黑色背景透明度50% */
    }
         /* 鼠标经过时变化 */
         .search-button:hover {
           color: #10e66b; /* 鼠标经过链接文字时的颜色 */
           background-color: rgba(228, 222, 222, 0.1); /* 黑色背景透明度50% */
           border-color: #f4fcf7;/* 设置边框颜色 */
           }
    /*搜索框样式 */
    .sousuokuang{
      
           outline: none;/* 移除轮廓线 */
           min-width: 330px;/* 最小宽度 */
           max-width: 900px;/* 最大宽度 */
           width: 95%;/* 宽度比 */
           height: 43px; /* 设置高度 */
           font-size: 20px; /* 字体大小 */
           padding-left: 10px;/* 字的左內边距 */
           border-radius: 7px; /* 圆角 */
           background-color: rgba(0, 0, 0, 0.1); /* 黑色背景透明度50% */
           color: #ffffff; /* 字体颜色 */
           border-top: 2px solid #fff;  /* 上边框粗细实线颜色 */
           border-left: 2px solid #fff;  /* 左边框粗细实线颜色 */
           border-bottom: 2px solid #000;  /* 下边框粗细实线颜色 */
           border-right: 2px solid #000;  /* 右边框粗细实线颜色 */
          
          
       
    }
    .sousuokuang:hover {
           background-color: rgba(228, 222, 222, 0.1); /* 黑色背景透明度50% */
           border-color: #f006a2;/* 设置边框颜色 */
           border-top: 2px solid #000;  /* 上边框粗细实线颜色 */
           border-left: 2px solid #000;  /* 左边框粗细实线颜色 */
           border-bottom: 2px solid #fff;  /* 下边框粗细实线颜色 */
           border-right: 2px solid #fff;  /* 右边框粗细实线颜色 */
          
           }
   /*搜索两字和框样式 */
    .sousuo {
           background-color: transparent; /* 设置背景颜色为透明 */
           width: 80px;/* 框的宽度 */
           height: 40px; /* 框的高度 */
           font-size: 20px; /* 字体大小 */
           background-color: rgba(7, 7, 7, 0.37); /* 黑色背景透明度50% */
           outline: none;/* 移除轮廓线 */
           border: none;/* 移除边框 */
           border-radius: 7px; /* 圆角 */
           color: #fff; /* 字体颜色 */
           margin-left: -86px; /*左右移动*/
           margin-top: -2px; /* 上外边距 */
    }
     /* 鼠标经过时变化 */
     .sousuo:hover {
           color: #10e66b; /* 鼠标经过链接文字时的颜色 */
           }

/* 书签栏总容器 */
    #bookmarkBarContainer {
      display: block;
      display: flex; /* 弹性布局 */
   flex-wrap: wrap; /* 自动换行 */
    justify-content: center; /* 水平居中 */
    margin-top: 30px; /* 上下移动 */
    margin-bottom: 20px; /* 下外边距 */
    }
    /* 书签栏中容器 */
    #bookmarkList{
      display: block;
      display: flex; /* 弹性布局 */
      flex-wrap: wrap; /* 子元素自动换行 */
    justify-content: center; /* 水平居中 */
    margin-left: -50px; /* 左外边距 */

    }
       /* 书签栏小容器 */
       .bookmark {
           width: 380px;/* 宽度 */
           height: 200px; /* 高度 */
           margin-left: 30px; /* 左外边距 */
           margin-right: 30px; /* 右外边距 */
           margin-top: 30px; /* 上外边距 */
           margin-bottom: 20px; /* 下外边距 */
          }

              /* 书签标题样式 */
              .bookmarkTitle {
           text-align: center;  /* 居中对齐 */
           font-size: 28px; /* 字体大小 */
           font-weight: bold; /* 设置字体为粗体 */
           color: #ffffff; /* 字体颜色 */
           text-shadow: 3px 3px 2px #000000;  /*水平偏移量、垂直偏移量、模糊半径和投影颜色*/
           margin-bottom: 3px; /* 下外边距 */
           margin-top: 5px; /* 上外边距 */
           letter-spacing: 10px; /* 设 置字与字之间的间距为2像素 */
           font-family: "宋体", Arial, sans-serif; /* 设置字体为宋体 */
           }
           /* 鼠标经过书签标题 */
      .bookmarkTitle:hover {
         color: #10e66b; /* 鼠标经过链接文字时的颜色 */
           }
           /* 书签框样式 */
      .bookmarl {
           position: relative; /* 设置相对定位 */
           width: 380px;/* 宽度 */
           height: 200px; /* 高度 */
           border-radius: 10px; /* 圆角 */
           border-top: 1px solid #fff;  /* 上边框粗细实线颜色 */
           border-left: 1px solid #fff;  /* 左边框粗细实线颜色 */
           border-bottom: 1px solid #000;  /* 下边框粗细实线颜色 */
           border-right: 1px solid #000;  /* 右边框粗细实线颜色 */
           background-color: rgba(0, 0, 0, 0.5); /* 设置框的半透明黑色背景，透明度为0.5 */
           padding-left: 8px;/* 左內边距 */
           overflow: hidden; /* 溢出隐藏 */
           transition-duration: 1s;/*过渡时间 */
           }
           
           .bookmarla:hover {
            display: none;
            animation-play-state: paused;/*动画暂停*/
           }
             /* 书签框旋转线段样式 */
        .bookmarla, .bookmarlb, .bookmarlc, .bookmarld, .bookmarle, .bookmarlf, .bookmarlg, .bookmarlh,
        .bookmarli, .bookmarlj, .bookmarlk, .bookmarll, .bookmarlm, .bookmarln, .bookmarlo, .bookmarlp,
        .bookmarlq, .bookmarlr{
            content: ""; /* 设置伪元素的内容为空 */
            position: absolute;
            width: 5px;
            height: 20px;
            left: 0PX;
            bottom: 0PX;
            animation: moveLine 9s linear infinite;
            background-color: rgba(177, 177, 177, 0.5); /* 设置框的半透明黑色背景，透明度为0.5 */
            box-shadow: 
             0px 0px 2px rgba(177, 177, 177, 0.8),/* 外阴影 右 下 半径 颜色 */
             0px 0px 6px rgba(177, 177, 177, 0.8),
             0px 0px 10px rgba(177, 177, 177, 0.8)，
             0px 0px 14px rgba(177, 177, 177, 0.8),
             0px 0px 18px rgba(177, 177, 177, 0.8),
             0px 0px 22px rgba(177, 177, 177, 0.8),
             0px 0px 26px rgba(177, 177, 177, 0.8);
           }
           .bookmarlb {
            animation-delay: 0.5s;/*动画延迟*/
           }
           .bookmarlc {
            animation-delay: 1s;/*动画延迟*/
           }
           .bookmarld {
            animation-delay: 1.5s;/*动画延迟*/
           }
           .bookmarle {
            animation-delay: 2s;/*动画延迟*/
           }
           .bookmarlf {
            animation-delay: 2.5s;/*动画延迟*/
           }
           .bookmarlg {
            animation-delay: 3s;/*动画延迟*/
           }
           .bookmarlh {
            animation-delay: 3.5s;/*动画延迟*/
           }
           .bookmarli {
            animation-delay: 4s;/*动画延迟*/
           }
           .bookmarlj {
            animation-delay: 4.5s;/*动画延迟*/
           }
           .bookmarlk {
            animation-delay: 5s;/*动画延迟*/
           }
           .bookmarll {
            animation-delay: 5.5s;/*动画延迟*/
           }
           .bookmarlm {
            animation-delay: 6s;/*动画延迟*/
           }
           .bookmarln {
            animation-delay: 6.5s;/*动画延迟*/
           }
           .bookmarlo {
            animation-delay: 7s;/*动画延迟*/
           }
           .bookmarlp {
            animation-delay: 7.5s;/*动画延迟*/
           }
           .bookmarlq {
            animation-delay: 8s;/*动画延迟*/
           }
           .bookmarlr {
            animation-delay: 8.5s;/*动画延迟*/
           }

         @keyframes moveLine {
            0%   {left: 0PX;  bottom: -8PX;  transform: rotate(0deg);}
            20%  {left: 0PX;  bottom: 188PX; transform: rotate(0deg);}
            22%  {left: 5px;  bottom: 188PX; transform: rotate(90deg);}
            49%  {left: 370px; bottom: 188PX; transform: rotate(90deg);}
            51%  {left: 382px; bottom: 180px; transform: rotate(180deg);}
            70%  {left: 382px; bottom: 0px;  transform: rotate(180deg);}
            72%  {left: 382PX; bottom: -8px;   transform: rotate(270deg);}
            98%  {left: 10PX;  bottom: -8px;   transform: rotate(270deg);}
            100% {left: 0PX;  bottom: 0PX;   transform: rotate(360deg);}
        }
        .bookmarl:hover  .bookmarla,
        .bookmarl:hover  .bookmarlb,
        .bookmarl:hover  .bookmarlc,
        .bookmarl:hover  .bookmarld,
        .bookmarl:hover  .bookmarle,
        .bookmarl:hover  .bookmarlf,
        .bookmarl:hover  .bookmarlg,
        .bookmarl:hover  .bookmarlh,
        .bookmarl:hover  .bookmarli,
        .bookmarl:hover  .bookmarlj,
        .bookmarl:hover  .bookmarlk,
        .bookmarl:hover  .bookmarll,
        .bookmarl:hover  .bookmarlm,
        .bookmarl:hover  .bookmarln,
        .bookmarl:hover  .bookmarlo,
        .bookmarl:hover  .bookmarlp,
        .bookmarl:hover  .bookmarlq,
        .bookmarl:hover  .bookmarlr
        {
              display: none;
               }


        
       .bookmarl::before {
           content: ""; /* 设置伪元素的内容为空 */
           position: absolute; /* 设置绝对定位 */
           width: 200PX; /* 设置宽度为150像素 */
           height: 200PX; /* 设置高度为父元素高度的300% */
           border-radius: 50%; /* 圆角 */
           background: linear-gradient(#00ccff, #d500f9); /* 设置背景为线性渐变，颜色从#00ccff到#d500f9 */
           background-color: rgba(0, 0, 0, 0.1); /* 设置框的半透明黑色背景，透明度为0.5 */
           margin-top: 80px; /* 上下移动 */
           margin-left: 260px; /* 往右移 */
           animation: rotate 3s linear infinite; /* 设置动画效果为rotate，持续时间4秒，循环播放无限次 */
           }
       .bookmarl:hover::before {
            display: none;
           }
           .bookmarl::after {
           content: ""; /* 设置伪元素的内容为空 */
           position: absolute; /* 设置绝对定位 */
           background-color: rgba(0, 0, 0, 0.3); /* 设置框的半透明黑色背景，透明度为0.5 */
           inset: 5px; /* 设置内边距为5像素 */
           border-radius: 10px; /* 设置边框圆角为10像素 */
           z-index: 800; /* 设置元素的堆叠顺序为1 */
           }
           
           @keyframes rotate {
             from {
               transform: rotate(0deg); /* 从初始状态开始旋转0度 */
             }
             to {
               transform: rotate(360deg); /* 旋转到最终状态，360度 */
             }
           }
           
            /* 鼠标经过时书签栏 */
      .bookmarl:hover {
           background-color: rgba(0, 0, 0, 0.15); /* 背景透明度 */
           backdrop-filter: blur(15px); /* 模糊强度 */
           border-top: 1px solid #000;  /* 上边框粗细实线颜色 */
           border-left: 1px solid #000;  /* 左边框粗细实线颜色 */
           border-bottom: 1px solid #fff;  /* 下边框粗细实线颜色 */
           border-right: 1px solid #fff;  /* 右边框粗细实线颜色 */
           
           }
           /*滚动条*/
      .bookmarl::-webkit-scrollbar {
           width: 0;/*宽度*/
           height: 0;/*高度*/
           }
            /* 书签链接容器 */
      .bookmarkLinl {
           display: inline-block; /* 以行内块级元素显示 */
           width: 32%; /* 设置宽度 */
           height: 24px; /* 设置高度 */
           text-align: left;/* 水平对齐左对齐 */
           margin-left: 0px; /* 左外边距 */
           margin-top: 10px; /* 上外边距 */
           z-index: 900; /* 设置元素的堆叠顺序为1 */
       
  
           }
           /* 书签链接 */
      .bookmarkLink {
           text-align: left;/* 水平左对齐 */
           margin-left: 0px; /* 左外边距 */
           text-decoration: none;/* 去掉下划线 */
           font-size: 16px; /* 字体大小*/
           color: #fff; /* 字体颜色 */
           font-weight: 0Px; /* 字体粗细 */
           position: relative;/* 下划线定位 */
           text-shadow: 0.5px 0.5px 1px #000000;  /*水平偏移量、垂直偏移量、模糊半径和投影颜色*/
           z-index: 920; /* 设置元素的堆叠顺序为1 */
           }
     
            /* 鼠标经过书签链接 */
      .bookmarkLink:hover {
           color: #10e66b; /* 颜色 */
           font-size: 17px; /* 字体大小*/
            z-index: 930; /* 设置元素的堆叠顺序为1 */
         
           }
           
           /* 链接下划线 */
      .bookmarkLink::after {
           content: "";
           position: absolute;/* 绝对定位 */
           left: 0;/* 距左侧 */
           bottom: -1px;/* 距底部 */
           width: 0px; /* 初始宽度 */
           height: 1px;/* 高度 */
           background-color: #ee9ced;/* 颜色 */
           transition: width 1s ease; /* 动画过渡 */
           margin-left: -20px; /* 往右移 */
          }
           /* 鼠标经过链接下划线 */
      .bookmarkLink:hover::after {
   
           width: calc(100% + 20px); /* 下划线宽度 */
      
          }