/* 通用样式 */  
body, html {    
    margin: 0;    
    padding: 0;    
    font-family: Arial, sans-serif;    
    overflow-x: hidden; /* 防止水平滚动条 */  
    background-image: url(''); /* 添加背景图片 */  
    background-size: cover; /* 背景图片覆盖整个页面 */  
    background-position: center; /* 背景图片居中 */  
}  
  
/* 设置一个容器来限制内容的最大宽度 */  
.container {  
    max-width: 600px; 
    margin: 0 auto; /* 在PC端居中 */  
    margin-bottom: 80px;
}  
  
header, footer {    
    width: 100%; /* 在容器内保持100%宽度 */  
    position: relative; /* 改为相对定位，因为我们使用容器来控制布局 */  
    z-index: 1000; /* 确保头部和底部在其他内容之上 */  
}  
  
header {    
    padding: 10px;    
    background-color: #f4f4f4;    
}  
  
footer {      
    background-color: #333;      
    color: white;      
    text-align: center;      
    padding: 10px 0;      
    position: fixed;  /* 添加这一行 */  
    max-width: 600px;      /* 确保宽度覆盖整个页面 */  
    bottom: 0;        /* 固定在页面底部 */  
    height: 50px;
    line-height: 50px; 
    z-index: 99;      /* 设置一个较低的z-index，确保它不会覆盖其他需要交互的元素，比如.fui-navbar */  
}  

.fui-navbar {  
    position: fixed;  
    display: table;  
    width: 100%;  
    bottom: 0;  
    height: 2.45rem;  
    background: #fff;  
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);  
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);  
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);  
    max-width: 600px;  
    margin: 0 auto;  /* 如果需要居中显示 */  
    z-index: 100;    /* 确保它覆盖在footer之上 */  
}  
.fui-navbar .nav-item {
    position: relative;
    display: table-cell;
    height: 2.45rem;
    text-align: center;
    vertical-align: middle;
    width: 1%;
    color: #999;
}
.fui-navbar .nav-item .label {
    display: block;
    font-size: 0.55rem;
    position: relative;
    top: -0.1rem;
    white-space: normal;
    padding: 0;
}
    .fui-navbar .nav-item img {
        width: 1.1rem;
        height: 1.1rem;
    }
  
main {    
    padding-top: 10px; /* 根据头部的高度调整 */  
    padding-bottom: 20px; 
}  
  
.search-bar {    
    display: flex;    
    justify-content: center;    
    margin-bottom: 10px;    
}  
  
.search-bar input, .search-bar button {    
    padding: 8px;    
    border: 1px solid #ccc;    
    border-radius: 4px;    
}  
  
.search-bar button {    
    background-color: #007BFF;    
    color: white;    
    border: none;    
    cursor: pointer;    
}  
  
.category-tabs button {    
    background-color: transparent;    
    border: none;    
    border-bottom: 2px solid transparent;    
    padding: 10px;    
    margin-right: 5px;    
    cursor: pointer;    
    font-size: 16px;    
}  
  
.category-tabs button:hover, .category-tabs button.active {    
    border-bottom-color: #007BFF;    
}  
  
.drama-display {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: space-around;  
    padding: 10px;  
}  
  
.drama-item {  
    flex: 0 0 calc(33.33% - 20px); /* Adjust based on your padding and margins */  
    margin-bottom: 20px;  
    text-align: center;  
}  
  
.drama-item img {  
    width: 100%;  
    height: 200px;  
    margin-bottom: 10px;  
}  
  
.title {  
    font-size: 14px; 
    margin: 0;  
}   

.description {  
    font-size: 12px; 
    color:gray;
    margin: 0;  
}  
  
.footer-nav a {    
    color: white;    
    text-decoration: none;    
    margin: 0 10px;    
}  
  
/* 针对PC端的媒体查询 */  
@media (min-width: 768px) {  
    .drama-display {  
        justify-content: space-between; /* 可选：在PC端增加间距 */  
    }  
    .drama-item {  
        flex: 0 0 calc(33.333% - 20px); /* 在PC端调整每列的宽度 */  
    }  
    
    .drama-item img {  
        height: 300px;  
    }  
    
    .fui-navbar {
       max-width: 600px;
       z-index: 100;
    }
}