body {
        /* background-color: black;
        color:white; */
        text-align: center;
        font-family: Arial, sans-serif;
        margin: 0;
        /* padding: 20px; */
        
    }
    #section-edit{
        height:100vh;
    }
    #fileInputContainer {
        border: 2px dashed #ccc; /* 虚线边框 */
        padding: 20px;
        text-align: center;
    }
    #fileInput {
        display: none; /* 隐藏原始输入框 */
    }
    #output img {
        max-width: 100%;
        height:300px;
        width:auto;
        margin-top: 20px;
        position: center;
        background-color: white;
    }

    .batch {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: transparent; /* 底部容器背景色 */
padding: 10px; /* 可以根据需要调整底部容器的内边距 */
text-align: center; /* 将链接居中 */
}

.batch a {
color: white; /* 链接文字颜色 */

}


#notification {
display: none;
font-size: 18px;
/* background-color: white; 设置通知条的背景颜色 */
background-color: purple !important;
color: black; /* 设置文字颜色为白色 */
padding: 30px; /* 设置内边距 */
text-align: center; /* 文字居中 */
position: fixed; /* 固定在页面顶部 */
top: 0; /* 距离页面顶部0像素 */
left: 0; /* 距离页面左侧0像素 */
width: 100%; /* 宽度100% */
margin: 0px;
z-index: 9999; /* 确保通知条显示在其他元素之上 */
}


/* 一键调节亮度的css。 */

.light-mode {
background-color: #fff; /* 切换到亮色模式时的背景颜色 */
color: #000; /* 切换到亮色模式时的文字颜色 */
}

.dark-mode {
background-color: #000; /* 切换到暗色模式时的背景颜色 */
color: #fff; /* 切换到暗色模式时的文字颜色 */
}

.white-icon {
color: white;
position: fixed;
top: 20px; /* 距离顶部的距离 */
right: 20px; /* 距离右侧的距离 */
z-index: 9999; /* 控制按钮的层叠顺序 */
}

/* 举报链接的css。 */
#report-link {
margin-top: 10px; /* 设置上方距离为 20 像素 */
display: block; /* 让超链接元素作为块级元素显示，以便设置上下间距 */
color:#333
}
footer {
/* background-color: #333; */
color: #fff;
text-align: center;
}




.div-contact-info {
display: flex;
flex-wrap: wrap; /* 允许子元素换行 */
justify-content: space-between;
padding: 20px;
background-color: #333;
color: #fff;
max-width:100%;
}

.div-contact-info > div {
flex: 1;
max-width: 100%;
margin: 0 1px; /* 添加间距以分隔每个column */
}

.div-contact-info h4 {
text-align: left;
}

.div-contact-info a {
display: block;
text-align: left; /* 左对齐 */
margin-top: 10px; /* 添加顶部间距 */
color: #fff; /* 设置为白色字体 */
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
.div-contact-info > div {
    flex: 0 0 100%; /* 每个column占据整个宽度 */
    margin: 10px 0; /* 更改间距 */
}
}





    
    /* 聊天按钮的css */
    #contactButton {
        position: fixed;
                  bottom: 20px;
                  right: 20px;
                  background-color:   whitesmoke;
                  color: black;
                  padding: 15px 15px;
                  font-size: 15px;
                  border: none;
                  border-radius: 90%;
                  cursor: pointer;
                  width:100px;
              }
              
              #contactButton:hover {
                  background-color:   white;
              }
              
              #contactFormContainer {
                  display: none;
                  position: fixed;
                  bottom: 70px;
                  right: 20px;
                  width: 250px; /* 修改为较小的数值 */
                  background-color: black;
                  border: 1px solid #ccc;
                  padding: 20px;
                  text-align: left;
      }
      #contactButton.new-message {
          animation: blink 1.5s infinite;
      }
      .subscribe-btn {
        display: inline-block;
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        text-align: center;
        text-decoration: none;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .subscribe-btn:hover {
        background-color: #45a049;
    }
   

  
.banner-container {
display: flex;
justify-content: space-around;
align-items: center;
background-color: rgb(33, 33, 33);
padding: 20px;
}

.banner-box {
margin-bottom: 30px;
margin-left: 20px;
margin-right: 20px;
min-width: 100px;
border: 2px solid white; /* 添加边框样式 */
border-radius: 30px;
min-height: 100px;
background-color: rgb(3, 3, 3) /* 将背景色设置为透明 */

display: flex;
justify-content: center;
align-items: center;
color: white; /* 文字颜色设置为白色 */
font-weight: bold;
font-size: 24px;
font-family: Arial, sans-serif;
line-height: 1.5;
padding: 10px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
flex: 1;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* 添加文字阴影以突出显示 */
}

/* Responsive design */
@media (max-width: 768px) {
.banner-container {
    flex-direction: column;

}

.banner-box {
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
}


}

/* 回到顶部的css。 */
#scrollToTop {
    display: none;
    position: fixed;
    bottom: 200px;
    right: 20px;
    z-index: 99;
    font-size: 18px;
    cursor: pointer;
    background-color: black;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}
#scrollToTop:hover {
    background-color: #0056b3;
}