/*
 * 版权所有(C) 云朵科技 2016-2025 所有权利保留
 * 项目名： x-api-service
 * 文件名： index.css
 * 模块说明：
 * 修改历史:
 * 2025-4-4 12:00:33 - 云朵科技
 */
/* 区域容器样式 */
.section {
    margin-bottom: 1px; /* 各区域之间的间距 */
    margin-top: 10px;
}
/* 查询栏容器 */
.certificate {
    margin-bottom: 1px; /* 各区域之间的间距 */
    background-color: #f5f5f5;
    height: 12vh; /* 设置高度为视口高度 */
}
.certificate .search {
    padding-top: 10px;
    font-family: Arial, sans-serif;
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    margin: 0 auto;
}
.certificate .search .search-bar {
    display: flex;
    width: 560px; /* 宽度可以根据需要调整 */
    /* max-width: 600px; 最大宽度限制 */
    background-color: #fff;
    border: 1px solid #ddd;
    /* border-radius: 25px; */
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 选择框 */
.certificate .search .search-bar select {
    height: 49px;
    width: 180px;
    border: none;
    outline: none;
    font-size: 16px;
    text-align: center;
}
/* 输入框样式 */
.certificate .search .search-bar input[type="text"] {
    flex-grow: 1;
    padding: 12px 16px;
    width: 290px;
    border: none;
    outline: none;
    font-size: 16px;
    color: #333;
}

/* 按钮样式 */
.certificate .search .search-bar button {
    margin-left: 1rem; /* 标题和日期之间的间距 */
    padding: 12px 20px;
    border: none;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.certificate .search .search-bar button:hover {
    background-color: #0056b3;
}

/* 按钮样式 */
.certificate .search .login-bar a {
    margin-left: 3rem; /* 标题和日期之间的间距 */
    padding: 16px 20px;
    border: none;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none; /* 去掉下划线 */
}

.certificate .search .login-bar a:hover {
    background-color: #0056b3;
}
/* 业务受理信息样式 */
.certificate .certificate-info {
    margin-top: 10px; /* 与上方内容的间距 */
    font-size: 16px; /* 字体大小适中 */
    color: #333; /* 文字颜色深灰 */
    text-align: left; /* 左对齐 */
    padding-left: 228px; /* 与 .search-bar 内容对齐 */
}


/* 响应式设计 */
@media (max-width: 768px) {
    .search .search-bar {
        width: 90%;
    }
}
/* 两列布局 */
.two-columns {
    display: flex;
    gap: 20px; /* 列之间的间距 */
}

.two-columns .column {
    flex: 1; /* 平均分配两列宽度 */
    background-color: #fff;
    /*padding: 20px;*/
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.full-width-column {
    flex:100%; /* 当只有一个列时，使其占据整个容器宽度 */
}

/* 三列平均布局 */
.three-columns {
    display: flex;
    gap: 20px; /* 列之间的间距 */
}

.three-columns .column {
    flex: 1; /* 平均分配三列宽度 */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
.section h2 {
    font-size: 20px;
    color: #333;
    border-left: 5px solid #007bff;
    padding-left: 10px;
    margin-bottom: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .two-columns, .three-columns {
        flex-direction: column; /* 在小屏幕上改为垂直排列 */
    }
}

/* 图片新闻栏 */
/* 走马灯样式 */
.carousel-item img {
    width: 100%;
    height: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
    min-height: 300px;
    cursor: pointer;
}

.default-carousel-caption {
    position: absolute;
    width: 100%;
    bottom: 0;
    color: var(--bs-carousel-caption-color);
    text-align: center;
    background-color: #f8f9fa; /* 设置背景为灰白色 */
}
.default-carousel-caption a {
    text-decoration: none; /* 去掉下划线 */
    color: blue; /* 将链接文字颜色设为蓝色 */
}

/* 通知公告样式 */
.message-list {
    list-style: none;
    padding: 0;
}

.message-list li {
    display: flex;
    justify-content: space-between; /* 标题和日期左右分布 */
    align-items: center; /* 垂直居中对齐 */
    line-height: 30px;
    /* border-bottom: 1px solid #ddd; */
}
.message-list li a {
    text-decoration: none; /* 去掉下划线 */
}
.message-list li a:before {
    content: '.';
    color: #7cc7ef;
    position: relative;
    top: -3px;
    margin-right: 5px;
    font-weight: bold;
    float: left;
}

.message-list li .highlight {
    color: darkred;
}

.message-list li .weight {
    font-weight: bolder;
}

/* 鼠标悬停时的样式 */
.message-list li:hover {
    background-color: #f0f0f0; /* 灰色背景 */
}

.message-list li:last-child {
    border-bottom: none;
}

.message-title {
    flex-grow: 1; /* 标题占据剩余空间 */
    text-decoration: none;
    font-size: 13px;
    color: #444; /* 日期颜色稍浅 */
}

.message-date {
    margin-left: 1rem; /* 标题和日期之间的间距 */
    color: #6c757d; /* 日期颜色稍浅 */
    font-size: 13px;
}

/* 列样式 */
.column {
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 列宽度比例 */
.column-contacts {
    flex: 3; /* 占比 3/10 */
}

.column-cert-service {
    flex: 5; /* 占比 4/10 */
}

.column-documents {
    flex: 2; /* 占比 3/10 */
}

/* 内容样式 */
.column-documents div {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}
.column-documents div a {
    color: #092e75;
    text-decoration: none; /* 去掉下划线 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* 在小屏幕上改为垂直排列 */
    }
}

/* 认证业务 */
/* 选项卡容器样式 */
.tabs-container {
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0 auto;
    max-width: 800px;
    overflow: hidden;
}

/* 选项卡头部样式 */
.tabs-header {
    display: flex;
}

/* 选项卡按钮样式 */
.tab-button {
    flex: 1;
    padding: 10px;
    color: #092e75;
    background-color: transparent;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

/* 激活状态的选项卡按钮 */
.tab-button.active {
    color:#fff;
    background-color: #092e75;
}

/* 鼠标悬停时的选项卡按钮 */
.tab-button:hover {
    color:#fff;
    background-color: #092e75;
}

/* 选项卡内容样式 */
.tabs-content {
    padding-top: 0;
}

/* 隐藏未激活的选项卡内容 */
.tab-content {
    display: flex;
    flex-wrap: wrap; /* 允许子项换行 */
    padding: 10px;
    flex-direction: row; /* 水平排列 span */
    font-size: 14px;
    color: #333;
    background-color: #f8f9fa;
}

/* 显示激活的选项卡内容 */
.tab-content .active {
    display: block;
}

.tab-content-item {
    display: flex;
    flex-wrap: wrap; /* 允许子项换行 */
    flex-direction: row; /* 水平排列 span */
    font-size: 14px;
    color: #333;
    background-color: #f8f9fa;
}
/* 子项容器样式 */
.tab-content-item .items {
    flex: 1 1 calc(50% - 30px); /* 每行显示两个，减去间距 */
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 5px;
    width:260px;
    padding: 15px;
    height: 60px; /* 80定高 如果两行的话 这里就要整体调高 */
    /*box-sizing: border-box;*/
}

.tab-content-item .items a {
    color: #092e75; /* 全部统一 */
    text-decoration: none; /* 去掉下划线 */
}
/* 子项内容容器样式 */
.tab-content-item .items .sub-items {
    /*display: flex;*/
    flex: 2; /* 占比 2/10 */
    /*flex-direction: row;*/
    align-items: center;
    margin-top: 5px;
}

/* 子项内容样式 */
.tab-content-item .items .sub-items a {
    font-size: 14px;
    color: #555;
    margin-right: 10px; /* 设置子项之间的间距 */
    text-decoration: none; /* 去掉下划线 */
    transition: color 0.3s ease;
}

/* 子项鼠标悬停效果 */
.tab-content-item .sub-items a:hover {
    color: #0f5132;
}

/* Banner 样式 */
.banner {
    background: linear-gradient(135deg, #007bff, #00bfff); /* 渐变背景色 */
    color: #fff; /* 文字颜色 */
    text-align: center; /* 文字居中对齐 */
    padding: 20px 20px; /* 内边距，控制高度 */
    margin: 5px 0 10px 0; /* 扩展到边 */
    /* margin-bottom: 40px; 与其他区域的间距 */
}

/* Banner 内容样式 */
/* Span 样式 */
.banner-content {
    display: flex;
    flex-direction: row; /* 水平排列 span */
    justify-content: center; /* 水平居中对齐 */
    gap: 30px; /* 设置 span 之间的间距 */
    align-items: center; /* 垂直对齐 */
}
.banner-content span {
    font-family: "Times New Roman", serif; /* 端庄字体 */
    font-size: 24px; /* 字体大小 */
    font-weight: bold; /* 加粗显示 */
    letter-spacing: 2px; /* 字母间距，增强端庄感 */
    line-height: 1.4; /* 行高 */
    padding: 10px 20px; /* 内边距，增加文字周围的空白区域 */
    background-color: rgba(255, 255, 255, 0.1); /* 半透明背景，突出文字 */
    border-radius: 8px; /* 圆角效果 */
}


/* 响应式设计 */
@media (max-width: 768px) {
    .banner-content h1 {
        font-size: 28px; /* 在小屏幕上缩小字体 */
    }
}

/* 友情链接栏样式 */
.friend-links {
    background-color: #f9f9f9; /* 浅色背景 */
}

/* 友情链接内容容器 */
.friend-links-content {
    display: flex;
    padding: 20px 20px;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-around; /* 分散对齐 */
    /* gap: 20px; 设置图片之间的间距 */
    overflow: hidden; /* 隐藏超出部分 */
}
/* 单个图片链接样式 */
.friend-links-content span {
    width: 120px; /* 图片宽度 */
    height: 50px;
    border-radius: 8px; /* 圆角效果 */
    /*border: 1px solid #033b6b;*/
}
/* 单个图片链接样式 */
.friend-links-content span img {
    width: auto; /* 图片宽度 */
    height: 50px; /* 图片高度 */
    border-radius: 8px; /* 圆角效果 */
    transition: transform 0.3s, box-shadow 0.3s; /* 添加过渡效果 */
}

/* 鼠标悬停时的样式 */
.friend-links-content img:hover {
    transform: scale(1.1); /* 放大效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

/* 更多 按钮的样式 */
.more-button {
    float: right;
    margin-top: -40px;
    display: inline-block;
    padding: 4px 8px; /* 减小内边距 */
    font-size: 12px; /* 更小的字体 */
    color: #6c757d; /* 灰色文字，降低视觉突出感 */
    background-color: transparent; /* 透明背景 */
    border: none; /* 去掉边框 */
    text-decoration: none; /* 去掉下划线 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    transition: color 0.3s ease; /* 只对颜色变化添加过渡动画 */
}

.more-button:hover {
    color: #343a40; /* 悬停时文字变为深灰色 */
    /* text-decoration: underline; 添加下划线以提示可点击 */
}

.more-button:focus {
    outline: none; /* 移除点击后的默认轮廓 */
    color: #343a40; /* 聚焦时文字颜色加深 */
}