body {
    background-color: #f8f8f8; /* 浅灰色背景 */
}
.index-toubu-div {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1400px;
    height: 120px; /* 原来是20vh */
    border-radius: 5px;
    background: #A3D0C3; /* 主题色 */
}
.left-section, .middle-section, .right-section {
    flex: 1; /* 每个部分占据相同的空间 */
    text-align: center;
}
.left-section {
    /* 备用区域，暂无内容 */
    width: 466px;
    height: 120px; /* 原来是20vh */
     display: flex;
    align-items: center;
    justify-content: center;
}
.left-section img{
    /* 备用区域，暂无内容 */
    width: 266px;
    height: 70px; /* 原来是20vh */
}
.right-section {
   width: 466px;
    height: 100%;
     display: flex;
     /*background: #d0a3aa; !* 主题色 *!*/
}

/* 登录按钮样式 */
.index-toubu-div-login {
    width: 232px;
    height: 120px;

     display: flex;
    /*justify-content: center;*/
    /*align-items: center;*/
    /*background: #1723f3; !* 较深的蓝色 *!*/

}

.login-button {
    margin-top: 15px;
    margin-left: 20px;
    width: 60px; /* 原来是6vmin */
    height: 60px; /* 原来是6vmin */
    background: #5C8CA5; /* 较深的蓝色 */
    border-radius: 50%;
    /*overflow: hidden;*/
    /*cursor: pointer;*/
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s; /* 背景色渐变效果 */
    /*margin-bottom: 10px; !* 原来是1vh *!*/
}

.login-button:hover {
    background: #487088; /* 鼠标悬停时更深的蓝色 */
}

.login-button a {
    text-align: center;
    font-size: 14px; /* 原来是1vh */
    color: #FFFFFF; /* 白色文字 */
    text-decoration: none;
}

.login-touxiang {

    width: 100px; /* 原来是6vmin */
    height: 120px; /* 原来是6vmin */
    /*background: #5C8CA5; !* 较深的蓝色 *!*/


    transition: background-color 0.3s; /* 背景色渐变效果 */
    /*margin-bottom: 10px; !* 原来是1vh *!*/

}
.login-touxiang img{
      margin-top: 15px;
    /*margin-left: 30px;*/
    /*margin:15px 0px 0px auto;*/
   width: 60px; /* 原来是6vmin */
    height: 60px; /* 原来是6vmin */
     border-radius: 50%;
      /*background: #87a1e3; !* 较深的蓝色 *!*/
}
.login-touxiang div{
        /*margin-top: 1px;*/
    /*margin-left: 30px;*/
   width: 100px; /* 原来是6vmin */
    height: 50px;
    text-align: center;
    color: #FFFFFF;
    /*background: #d11010; !* 较深的蓝色 *!*/
}
/* 注册按钮样式 */
.register-btn {
    margin-top: 15px;
    margin-left: 5px;
    width: 60px; /* 原来是6vmin */
    height: 60px; /* 原来是6vmin */
     border-radius: 50%;

     display: flex;
    justify-content: center;
    align-items: center;
    /*transform: translateX(-50%);*/
    white-space: nowrap;
    background: #5C8CA5; /* 与登录按钮相同的背景色 */

    font-size: 14px; /* 原来是1vh */
    color: #FFFFFF; /* 白色文字 */
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.5s, transform 0.3s;
    transform: translateY(10px); /* 初始状态，向上移动10px */
    cursor: pointer;
}
.register-btn:hover {
    background: #487088; /* 鼠标悬停时更深的蓝色 */
}
.register-btn a {
    text-align: center;
    font-size: 14px; /* 原来是1vh */
    color: #FFFFFF; /* 白色文字 */
    text-decoration: none;
}
/* 登录按钮悬停时显示注册按钮 */
.index-toubu-div-login:hover .register-btn {
    opacity: 1;
    transform: translateY(0); /* 悬停时回到原位 */
}

/* 分享 */
.index-toubu-div-fenxiang {
   width: 232px;
    height: 120px;
  display: flex;
    /*background: #f31773; !* 较深的蓝色 *!*/
}
.index-toubu-div-fenxiang-fx {
    margin-top: 45px;
    margin-left: 30px;
    width: 60px; /* 原来是6vmin */
    height: 15px; /* 原来是6vmin */
    background: #5C8CA5; /* 较深的蓝色 */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s; /* 背景色渐变效果 */
    margin-bottom: 10px; /* 原来是1vh */
}
.index-toubu-div-fenxiang-fx a {
    text-align: center;
    font-size: 14px; /* 原来是1vh */
    color: #FFFFFF; /* 白色文字 */
    text-decoration: none;
}
.index-toubu-div-fenxiang-fx:hover {
    background: #487088; /* 鼠标悬停时更深的蓝色 */
}
.index-toubu-div-fenxiang-xianshi {
    margin-top: 10px;
    margin-left: 10px;
    width: 50px; /* 原来是6vmin */
    height: 80px; /* 原来是6vmin */
     border-radius: 10px;

    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background: #5C8CA5; /* 与登录按钮相同的背景色 */

    font-size: 14px; /* 原来是1vh */
    color: #FFFFFF; /* 白色文字 */
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.5s, transform 0.3s;
    transform: translateY(10px); /* 初始状态，向上移动10px */
    cursor: pointer;
}
.index-toubu-div-fenxiang-xianshi a {
    /*text-align: center;*/
    font-size: 14px; /* 原来是1vh */
    color: #FFFFFF; /* 白色文字 */
    text-decoration: none;
}
.index-toubu-div-fenxiang:hover .index-toubu-div-fenxiang-xianshi {
    /*display: block;*/
    opacity: 1;
    transform: translateY(0);
}
.index-toubu-div-fenxiang div {
    padding: 10px;
    /*border-bottom: 1px solid #E0E0E0; !* 浅灰色分隔线 *!*/
    color: #5C8CA5; /* 较深的蓝色文字 */
}

/* 农历 */
.middle-section {
    width: 466px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.index-toubu-div-nongli {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #A3D0C3; /* 主题色 */
    padding: 10px;
    height: 1%;
}
.calendar-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 间距 */
}
.hover-info {
    position: relative;
    cursor: pointer;
}
.info-label {
    font-weight: bold;
    color: #FFFFFF; /* 白色文字 */
    font-size: 10px; /* 原来是1vh */
}
.info-value {
    color: #FFFFFF; /* 白色文字 */
    font-size: 10px; /* 原来是1vh */
}
.hidden-content {
    display: none;
    position: absolute;
    left: 0;
    top: 100%; /* 显示在下方 */
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
    max-width: 100%; /* 设置最大宽度，根据需要调整 */
    width: auto; /* 使宽度自动根据内容调整 */
    max-height: 150px; /* 设置最大高度，根据需要调整 */
    overflow: auto; /* 超出最大高度时显示滚动条 */
    font-size: 12px; /* 原来是0.7vh */
}
.hover-info:hover .hidden-content {
    display: block;
}

/* 搜索框 */
.search-container {
    position: relative;
    width: 300px; /* 搜索框的宽度 */
    /*height: 20px;*/
    margin: 10px auto; /* 水平居中 */
}
#searchQuery {
    width: 100%; /* 输入框宽度占满容器 */
    height: 30px; /* 原来是5vh */
    padding: 10px; /* 内边距 */
    font-size: 14px; /* 原来是1vh */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 4px; /* 圆角边框 */
    box-sizing: border-box; /* 边框和内边距包含在宽度内 */
}
.button-container {
    display: flex; /* 启用Flexbox布局 */
    justify-content: space-between; /* 按钮之间的间距均匀分布 */
}
button {
    flex: 1; /* 每个按钮平分空间 */
    padding: 10px;
    font-size: 14px; /* 原来是1.5vh */
    color: white; /* 文字颜色 */
    background-color: #7D9FAD; /* 按钮背景色 */
    border: none; /* 无边框 */
    border-radius: 4px; /* 圆角边框 */
    margin: 5px; /* 按钮之间的间距 */
    cursor: pointer; /* 鼠标指针 */
    outline: none; /* 点击时无轮廓 */
    height: 40px; /* 原来是20% */
    width: 35%;
}
button:hover {
    background-color: #3367d6; /* 鼠标悬停时的背景色 */
}
button:active {
    background-color: #2a56c6; /* 鼠标点击时的背景色 */
}


/* 分享的网站 */
.index-wangzhan-body {
   margin:10px  auto;

    width: 1400px;
     height: auto;
    border-radius: 5px;
    background: #FFFFFF; /* 主题色 */
}
.index-wangzhan-toubu{
    background-color: #f8f8f8; /* 浅灰色背景 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.index-wangzhan-toubu a{
    text-align: center;
    font-size: 20px; /* 原来是1vh */
    /*color: #000000; !* 白色文字 *!*/

    text-decoration: none;
    margin-left: 30px;
}
.index-wangzhan-toubu-yanse {
     /*background-color: #981515; !* 选中时的背景色 *!*/
    color: #000000; /* 白色文字 */
    padding: 0px 10px; /* 添加一些内边距以便背景色显示 */
    border-radius: 2px; /* 圆角边框 */
}

.active {
    background-color: #ffffff; /* 选中时的背景色 */
    color: #1723f3; /* 白色文字 */
    padding: 5px 10px; /* 添加一些内边距以便背景色显示 */
    border-radius: 5px; /* 圆角边框 */
}

/*.index-wangzhan-neirong{*/
/*      width: 1400px;*/
/*    height: auto;*/
/*     border-radius: 5px; !* 圆角边框 *!*/
/*}*/
.index-wangzhan-div{
    margin:auto;
      display: flex;

      width: 1400px;
    height: auto;
     flex-wrap: wrap; /* 允许子元素换行 */
     border-radius: 5px; /* 圆角边框 */
      background-color: #ffffff;
}

/*按钮*/
.index-wangzhan-div-dueixiang {
    margin: 10px;
    width: 213px;
    height: 120px;
    border-radius: 5px; /* 圆角边框 */
    /*background-color: #cb29b3;*/

}


.index-wangzhan-div-dueixiang-name{
   /*margin: 15px;*/
    width: 213px;
    height: 90px;
     cursor: pointer;
    border-radius: 5px; /* 圆角边框 */
    background-color: #d5d1d1;;
    flex: 0 0 auto; /* 不允许子元素伸缩，保持固定大小 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡效果 */
 display: flex; /* 使用Flexbox布局 */
    flex-direction: column; /* 子元素垂直排列 */
    justify-content: center; /* 垂直居中对齐子元素 */
    align-items: center; /* 水平居中对齐子元素 */

}
.index-wangzhan-div-dueixiang-name:hover {
    transform: scale(1.1); /* 鼠标悬停时放大10% */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); /* 增加阴影效果，增强立体感 */
}

.index-wangzhan-div-dueixiang-name-h1{
   /*margin: 15px;*/
   /* width: 200px;*/
   /*height: 35px;*/
   /* margin-top: 10px;*/
    font-size: 14px;
}
.index-wangzhan-div-dueixiang-name img{
   /*margin: 15px;*/
    width: 35px;
   height: 35px;

      margin-top: 3px;

}
.index-wangzhan-div-dueixiang-name span{
   /*margin: 15px;*/
     font-size: 12px;
      margin-top: 3px;


}

.index-wangzhan-div-dueixiang-gongneng{
    width: 200px;
    height: 25px;
      display: flex;
    margin: auto;
    /*flex-direction: column; !* 子元素垂直排列 *!*/
    /*justify-content: center; !* 垂直居中对齐子元素 *!*/
    /*align-items: center; !* 水平居中对齐子元素 *!*/
    /*background: #00ff80;*/
}
.index-wangzhan-div-dueixiang-gongneng nav{
    /*margin-top: 2px;*/
    /*margin-left: 20px;*/
    margin: auto;
    width: 65px;
    height: 25px;
    font-size: 14px;
     cursor: pointer;
     /*background-color: #3b73ed;*/
     display: flex;
     justify-content: center; /* 垂直居中对齐子元素 */
    align-items: center; /* 水平居中对齐子元素 */
}

/* 推荐的影视 */
.index-yingshi-div {
    margin:10px  auto;

      display: flex;

      width: 1400px;
    height: auto;
     flex-wrap: wrap; /* 允许子元素换行 */
     border-radius: 5px; /* 圆角边框 */
      background-color: #ffffff;
}

.index-meiti-div-dueixiang {

    cursor: pointer;

    margin: 10px;
    width: 130px;
    height: 215px;
    border-radius: 5px; /* 圆角边框 */
    /*background-color: #cb29b3;*/

}


.index-meiti-div-dueixiang-name{
   /*margin: 15px;*/
    width: 130px;
    height: 195px;
    border-radius: 5px; /* 圆角边框 */
    /*background-color: #cf3232;*/
    flex: 0 0 auto; /* 不允许子元素伸缩，保持固定大小 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡效果 */
 display: flex; /* 使用Flexbox布局 */
    flex-direction: column; /* 子元素垂直排列 */
    justify-content: center; /* 垂直居中对齐子元素 */
    align-items: center; /* 水平居中对齐子元素 */

}
.index-meiti-div-dueixiang-name:hover {
    transform: scale(1.1); /* 鼠标悬停时放大10% */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); /* 增加阴影效果，增强立体感 */
}


.index-meiti-div-dueixiang-name img{
   /*margin: 15px;*/
    width: 100%;
   height: 175px;

}
.index-meiti-div-dueixiang-name span{

     font-size: 12px;
}
.index-meiti-div-dueixiang-gongneng{
   width: 130px;
    height: 20px;
      display: flex;
margin-top: 5px;
    /*align-items: center;*/
    /*justify-content: center;*/
}

.index-meiti-div-dueixiang-gongneng nav{
    margin-top: 2px;
    margin-left: 10px;
    width: 65px;
    height: 25px;
    font-size: 14px;
     cursor: pointer;
     /*background-color: #3b73ed;*/
}
.index_fenye{
display: flex;
  align-items: center;
    justify-content: center;
  margin: auto;
      width: 1400px;
    height: 30px;
  /*background-color: #3b73ed;*/
}
.index_fenye_span_body{
    margin: auto;
    width: 500px;
    height: 30px;
    display: flex;
  align-items: center;
    justify-content: center;
    text-decoration: none;
      /*background-color: rgba(199, 205, 204, 0.29);*/
}
.index_fenye_span_body a{
    margin-left: 9px;
      text-decoration: none;
}
/* 底部 */
.index-dibu-div {
     margin: auto;

    display: flex;

    width: 1400px;
     height: auto;
    border-radius: 5px;
     background-color: #f8f8f8; /* 浅灰色背景 */


}
.index-dibu-div_zhanwei{
     width: 1400px;
     height: 80px;
}
.index-dibu-div_fenge{
     width: 1400px;
     height: 0.1px;
    margin:8px  auto;
     background: rgba(199, 205, 204, 0.29);
}
.index-dibu-div a{
     text-decoration: none;
    color: #9a9494;
    /*float: right;*/
 font-size: 12px;
}

.index-dibu-div_baobei{
     margin-left: auto; /* 将此元素推到右边 */
}