/*基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul,li {
    list-style: none; /* 移除列表默认样式 */
}

a {
    text-decoration: none; /* 移除链接默认下划线 */
}

a:hover {
    color: #880000;
}

/*主页body样式*/
.index {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    max-width: 1200px;
    min-width: 320px;
    margin: 0 auto;
}

.index-nav {
    background-color: #f8f9fa;
    padding: 15px 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.index-nav-links {
    display: flex;
    gap: 20px;
}

.index-nav-links a {
    color: #333;
    font-weight: 500;
}

.index-breadcrumb {
    display: none;
    padding: 0;
    margin: 0;
}

.index-breadcrumb li {
    display: inline;
    font-size: 14px;
}

.index-breadcrumb li+li:before {
    content: ">";
    padding: 0 5px;
}

.index-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.index-logo {
    margin-bottom: 30px;
    max-width: 200px;
    height: auto;
}

.index-search-container {
    display: flex;
    width: 100%;
    max-width: 600px;
}

.index-search-box {
    flex: 1;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 30px 0 0 30px;
    font-size: 16px;
    outline: none;
}

.index-search-btn {
    padding: 0 20px;
    background-color: #4285f4;
    color: white;
    border: none;
    border-radius: 0 30px 30px 0;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}


footer {
    background-color: #f8f9fa;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: #666;
}

/*主页样式结束*/


/*子页body样式*/
.page {
    font-family: Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    min-width: 320px;
    margin: 0 auto;
}

/* 网页头部整体样式 */
.page-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0; /* 可根据需要调整内边距 */
    background-color: #f8f9fa; /* 背景色可根据设计需求调整 */
}

/* 头部容器样式，用于包裹logo和主导航 */
.header-container {
    width: 100%;
    /* 最大宽度可根据设计需求调整 */
    margin: 0 auto;
    text-align: center; /* 使内容居中，便于子元素横向居中 */
}

/* logo容器样式 */
.logo-container {
    margin-bottom: 10px; /* 与下方主导航的间距 */
}

.logo {
    height: auto;
    width: auto;
    max-width: 150px; /* logo最大宽度可根据设计需求调整 */
}

/*导航*/
.nav-one {
        display: flex;
    justify-content: center; /* 使导航项横向居中 */
    gap: 20px; /* 导航项之间的间距 */
}
.nav-two {
        display: flex;
    justify-content: center; /* 使导航项横向居中 */
    gap: 20px; /* 导航项之间的间距 */
}
/* 基础样式 */
.nav-one ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-item {
    position: relative;
    padding: 8px 16px;
    transition: background 0.3s;
}

.top-item a {
    color: #333;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    display: block;
}

/* 当前顶级栏目高亮效果 */
.top-item.top-active {
    background: #1890ff;
    border-bottom: 3px solid #096dd9;
}

.top-item.top-active a {
    color: white;
}


.nav-two ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-item {
    position: relative;
    padding: 8px 16px;
    transition: background 0.3s;
    border-bottom: 2px solid #00ff00;
}

.nav-item a {
    color: #333;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    display: block;
}

.active {
    color: #ff0000;
    font-weight: bold;
    border-bottom: 2px solid #ff0000;
}

/* 搜索框容器样式 */
.search-wrapper {
    width: 100%;
    /* 与header-container保持一致的最大宽度 */
    margin: 0 auto;
}

.search-container {
    display: flex;
    justify-content: center; /* 使搜索框和按钮横向居中 */
    align-items: center; /* 垂直居中 */
    gap: 10px; /* 搜索框和按钮之间的间距 */
}

.search-box {
    margin-top: 10px;
    padding: 10px; /* 内边距 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 4px; /* 圆角边框 */
    width: calc(100% - 140px); /* 自适应宽度，留出按钮空间 */
    max-width: 600px; /* 最大宽度限制 */
}

.search-btn {
    padding: 10px 20px; /* 内边距 */
    background-color: #4285f4; /* 背景色 */
    color: white; /* 文字颜色 */
    border: none; /* 无边框 */
    border-radius: 4px; /* 圆角边框 */
    cursor: pointer; /* 鼠标悬停变为手型 */
}

.search-btn:hover {
    background-color: #357ae8; /* 按钮悬停背景色 */
}

/*位置*/
.wz {
    width: 100%;
    align-items: center;
    padding: 10px 10px; /* 可根据需要调整内边距 */
    background-color: #f8f9fa; /* 背景色可根据设计需求调整 */
    margin-top: 10px;
}

/* 文章列表样式 */
.content-container {
    padding: 20px;
    flex: 1;
}

.content-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
    background-color: #f8f9fa;
}

.content-card {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
}

.content-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.thumbnail-container {
    position: relative;
}

.thumbnail {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.view-count {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
}

.content-title {
    padding: 5px;
    font-size: 16px;
}

.content-author {
    padding: 0 5px 5px;
    font-size: 14px;
    color: #666;
}

/* 榜单样式 */
.ranking-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.hot-ranking,.recommend-ranking {
    background-color: #f8f9fa;
}

.ranking-section h3 {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-left: 10px;
}

.ranking-section li {
    margin-bottom: 10px;
    margin-left: 10px;
}

.ranking-section li a {
    color: #666;
}

.ranking-section li a:hover {
    color: #880000;
    background-color: #999;
}

/* 页脚样式 */
.page-footer {
    background-color: #f8f9fa;
    padding: 2px;
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-top: 50px;
}

.contact-info b{
    color: #999;
}

.contact-info a {
    margin: 5px;
    color: #999;
}

.gaba {
    width: 14px;
    height: 14px;
}

 /* 内容详情页特定样式 */
.content-article {
    width: 100%;
    margin-bottom: 20px;
    background-color: #f8f9fa;
    padding: 20px 0;
}

.title-section {
    width: 100%;
    margin-bottom: 15px;
    text-align: center;
}

.detail-title {
    font-size: 28px;
    color: #333;
    line-height: 1.3;
    width: 100%;
}

.meta-section {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.meta-section span {
    margin: 0 5px;
}

.content-section {
    width: 100%;
    line-height: 1.8;
    font-size: 16px;
    margin: 0px 20px 0px 20px;
}

.content-section p {
    margin-bottom: 20px;
    width: 100%;
}

.content-image {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: 4px;
}

.artcile-view-count {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .nav-primary {
        display: none;
    }
    
    .breadcrumb {
        display: block;
        margin-top: 10px;
    }
    
    .search-wrapper {
        display: flex;
        justify-content: center;
    }
    
    .search-container {
        width: 100%;
    }
    
    .ranking-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .content-list {
        grid-template-columns: 1fr;
    }
}



/* 响应式调整 */
@media (max-width: 768px) {
    .detail-title {
        font-size: 24px;
    }
    
    .meta-section {
        flex-direction: column;
        gap: 8px;
    }
}