.container {
    /* 容器樣式 - 預留空間 */
    /* padding: 0 8vw; */
    width: 100%;
}

.section1{
    /* background: url('../image/index/oneBg.png'); */
    /* background-size: 100% 100%; */
    padding: 0 10vw;
    height: 60vh;
    position: relative;
    overflow: hidden; /* 隐藏超出部分 */
}

/* Section1 轮播容器 */
.section1-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Section1 轮播幻灯片 */
.section1-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* 显示当前活动的幻灯片 */
.section1-slide.active {
    opacity: 1;
}

/* 确保内容在轮播之上 */
.section1 > *:not(.section1-carousel) {
    position: relative;
    z-index: 2;
}
/* .sectionOneLeft - 預留樣式 */
.section2{
    background: url('../image/index/twoBg.png');
    background-size: cover;
    padding: 0 10vw;
    /* height: 60vh; */
    position: absolute; /* 絕對定位 */
    top: 50vh; /* 定位到 section1 的底部 */
    left: 0;
    right: 0;
    z-index: 10; /* 確保在其他元素之上 */
}
.section2Header{
    margin-top: 18vh;
    font-size: 1vw;
    display: flex;
    flex-direction: column;
    border-radius: 40px;
    align-items: center;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.73) 0%, rgba(171, 201, 245, 0.56) 52.24%, rgba(255, 255, 255, 1) 100%);
    border: 4px solid rgba(255, 255, 255, 1);
    box-shadow:inset -1px 1px 4px  rgba(255, 255, 255, 0.95);
    padding:1.2vh 1vw;
    position: relative;
    overflow: hidden;
}

.section2Header-carousel-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.section2Header-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
}

.section2Header-item.active {
    opacity: 1;
    position: relative;
}

.heone{
    flex: 2;
    display: flex;
    align-items: center;
}
.twoOne{
    background-color:rgba(11, 135, 255, 0.2);
    padding: 0.5vh 1vw;
    border-radius: 40px;
    color: rgba(28, 113, 212, 1);
    font-weight: bold;
    margin-left: 2vw;
}
.twoTwo{
    flex: 6;
}
.twoThere{
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: rgba(76, 151, 220, 1);
}
.labaImg{
    width: 2vw;
    height: 2vw;
}
.rightImg{
    width: 1.5vw;
    height: 1.5vw;
    margin-left: 1vw;
}
.section2HeaderTwo{
    background: url('../image/index/twoBanerBox.png');
    background-size: 100% 100%;
    height: 40vh;
    margin: 30px 0;
    padding: 1vw;
    display: flex;
    gap: 2vw;
    align-items: stretch;
    /* box-sizing: content-box !important; */
}
.twoTwoLeft{
    gap:1vw;
    flex: 1;
    width: 50%;
    height: 100%;
    position: relative;
}
.twoTwoLeftImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}
.twoTwoRight{
    flex: 1;
    width: 50%;
    height: 100%;
}
.twoTwoLeftFirst{
    font-size: 1vw;
    background-color: rgba(0, 0, 0, 0.25);
    position: absolute;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 15%;
    color: #fff;
}
.twoTwoLeftFirstText{
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 1vw;
}
/* lunbo indicators */
.lunbo{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
}
.lunbo-dot{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgba(255,255,255,1);
    border: 0;
    padding: 0;
    cursor: pointer;
}
.lunbo-dot.active{
    background-color: rgba(42, 130, 228, 1);
}

/* 轮播箭头 */
.carousel-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.49);
    border: none;
    width: 25px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.3s ease;
    z-index: 10;
}
.carousel-arrow:hover{
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
}
.carousel-arrow:hover svg{
    stroke: #000;
}
.carousel-arrow-left{
    left: 0px;
}
.carousel-arrow-right{
    right: 0px;
}
.carousel-arrow svg{
    width: 40px;
    height: 40px;
}

/* 新闻公告区域样式 */
.twoTwoRight {
    flex: 1;
    /* padding: 15px; */
   
    color: white;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    height: 100%;
}

/* 标签页导航 */
.news-tabs {
    display: flex;
    gap: 1vw;
    flex-shrink: 0;
}

.tab-button {
    padding: 5px 16px;
    background: transparent;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1.1vw;
    font-weight: 500;
   border-radius: 6px;
    transition: all 0.3s ease;
}

.tab-button.active {
    background: white;
    color: rgba(10, 116, 209, 1);
}

.tab-button:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
}

/* 标签页内容 */
.tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

/* 头条新闻 */
.headline-news {
    background: white;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    flex-shrink: 0;
}


/* 新闻列表 */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    overflow-y: auto;
    max-height: 100%;
    min-height: 200px; /* 设置最小高度确保一致性 */
    /* 隐藏滚动条但保持滚动功能 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* 隐藏Webkit浏览器的滚动条 */
.news-list::-webkit-scrollbar {
    display: none;
}

.news-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    padding: 10px 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
}

.news-item:hover {
    background-color: white;
}

.news-item:hover .news-text {
    color: rgba(10, 116, 209, 1);
    font-weight: bold;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: 1vw;
    flex: 1;
    min-width: 0;
    width: 0;
}

.news-item:active {
    background-color: white;
}

.news-item:active .news-text {
    color: rgba(10, 116, 209, 1);
    font-weight: bold;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    flex: 1;
    min-width: 0;
    width: 0;
}

.bullet {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    flex-shrink: 0;
}

.news-text {
    color: white;
    font-size: 0.9vw;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    width: 0;
    max-width: none;
}

.news-date {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.5vw;
    flex-shrink: 0;
    margin-left: auto;
    width: 50px;
    text-align: right;
    white-space: nowrap;
}
.section3{
    margin-top: 55vh;
    background: url('../image/index/thereBg.png');
    background-size: 100% 100%;
    padding: 0 10vw 8vh;

}
.section3Header{
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
}
.comBoxLeft{
    display: flex;
    align-items: center;
}
.comLeftImg{
    width: 10px;
    /* height: 10px; */
}
.comText{
    margin-left: 10px;
    font-size: 1.3vw;
    font-weight: 700;
}
.comRightImg{
    width: 5vw;
}

/* 人才价值兑付区域样式 */
.thereBox {
    /* padding: 4vh 0; */
    /* padding-top: 4vh; */
    position: relative;
    min-height: 60vh;
}

/* 标题和更多按钮 */
.talent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4vh;
}

.talent-title {
    font-size: 2.5vw;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.more-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 1vw;
    cursor: pointer;
    transition: all 0.3s ease;
}

.more-button:hover {
    background: #0056b3;
    transform: translateY(-2px);
}

.more-button svg {
    width: 16px;
    height: 16px;
}

/* 卡片网格布局 */
.talent-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vw;
    margin-bottom: 4vh;
}

/* 卡片基础样式 */
.talent-card {
    background: white;
    border-radius: 0.6vw;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-height: 180px;
}

.talent-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
}



/* 政策方向卡片2 */


/* 卡片内容 */
.card-content {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    /* thereItemBg */
    background: url('../image/index/thereItemBg.png');
    background-size: contain;
    background-repeat: no-repeat;
    align-items: center;
    gap: 1vw;
}
.card-content:hover{
    background: none;
}
/* 卡片左侧内容 */
.card-left {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 0;
    height: 100%;
    margin-left: 1.5vw;
    
}

/* 左侧文字内容区域 */
.card-left-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    position: relative;
    gap: 0.5vh;
}

/* 卡片箭头圆圈 */
.card-arrow-circle {
    position: static;
    width: 1.6vw;
    height: 1.6vw;
    background: linear-gradient(90deg, rgba(15, 143, 255, 1) 0%, rgba(82, 174, 235, 1) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
    cursor: pointer;
    align-self: flex-start;
    margin-top: 0.5vh;
}

.card-arrow-circle:hover {
    transform: scale(1.1);
}

.card-arrow-circle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.card-arrow-circle:hover svg {
    transform: translateX(2px);
}



/* 卡片右侧图片 */
.card-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.5vw;
}

.card-image {
    max-width: 150px;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.card-title {
    font-size: 1.4vw;
    font-weight: 700;
    margin: 0 0 0.5vh 0;
    color: black;
}

.card-subtitle {
    font-size: 1vw;
    color: #007bff;
    margin: 0 0 2vh 0;
    font-weight: 400;
}



/* 卡片图标 */
.card-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 1vh 0;
    position: relative;
}

/* 分子结构图标（银行方向） */
.molecular-structure {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 30% 30%, #ffffff, #e3f2fd);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.molecular-structure::before,
.molecular-structure::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #2196f3;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.molecular-structure::before {
    top: 10px;
    right: 10px;
}

.molecular-structure::after {
    bottom: 10px;
    left: 10px;
}

/* 盾牌图标（保险方向） */
.shield-icon {
    width: 50px;
    height: 60px;
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.shield-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: #ffd700;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 文档堆叠图标（证券方向） */
.documents-stack {
    width: 50px;
    height: 60px;
    position: relative;
}

.documents-stack::before,
.documents-stack::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 50px;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.documents-stack::before {
    top: 0;
    left: 0;
    z-index: 3;
}

.documents-stack::after {
    top: 5px;
    left: 5px;
    z-index: 2;
    background: linear-gradient(135deg, #bbdefb, #90caf9);
}

/* 服务器机架图标（政策方向） */
.server-rack {
    width: 50px;
    height: 60px;
    background: linear-gradient(135deg, #ff9800, #f57c00);
    border-radius: 4px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.server-rack::before,
.server-rack::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 8px;
    background: #ffc107;
    border-radius: 2px;
}

.server-rack::before {
    top: 15px;
}

.server-rack::after {
    bottom: 15px;
}

/* 商业服务器图标 */
.business-server {
    width: 50px;
    height: 60px;
    background: linear-gradient(135deg, #9c27b0, #7b1fa2);
    border-radius: 4px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.business-server::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #e1bee7;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 卡片箭头 */
.card-arrow {
    position: absolute;
    bottom: 1.5vh;
    right: 1.5vw;
    width: 30px;
    height: 30px;
    background: #007bff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
}

.talent-card:hover .card-arrow {
    background: #0056b3;
    transform: scale(1.1);
}

.talent-card:hover .card-arrow-circle {
    background: white;
    border-color: white;
}

.talent-card:hover .card-arrow-circle svg {
    color: #007bff;
}

.talent-card:hover .card-title {
    color: white;
}

.talent-card:hover .card-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

.bank-card .card-arrow {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.bank-card:hover .card-arrow {
    background: rgba(255, 255, 255, 0.3);
}

.section4{
    background: url('../image/index/fourBg.png');
    background-size: 100% 100%;
    padding: 5px 10vw 1vh;
    position: relative;
}

/* fourBox 主容器 */
.fourBox {
    padding-top: 4vh;
    display: flex;
    flex-direction: column;
    /* gap: 2vh; */
}

/* 顶部卡片容器 */
.fourBox-cards {
    display: flex;
    gap: 4vw;
    margin-bottom: 2vh;
}

/* 卡片基础样式 */
.fourBox-card {
    flex: 1;
    background: white;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: visible; /* 允许内容超出显示 */
    min-height: 25vh;
    display: flex;
    align-items: center;
    gap: 1vw;
    padding: 0 1.5vw;
}

.fourBox-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 职业技能培训卡片 */
.training-card {
    background: url('../image/index/fourOneOne.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.training-card:hover {
    color: white;
}

.training-card:hover .fourbox-card-title {
    color: white;
}

.training-card:hover .fourbox-card-description {
    color: rgba(255, 255, 255, 0.9);
}

/* 学历提升培训卡片 */
.education-card {
    background: url('../image/index/fourOneTwo.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.education-card:hover {
    color: white;
}

.education-card:hover .fourbox-card-title {
    color: white;
}

.education-card:hover .fourbox-card-description {
    color: rgba(255, 255, 255, 0.9);
}

/* 卡片图片容器 */
.fourbox-card-image-container {
    flex: 0 0 auto;
    width: 25vh;
    height: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    overflow: hidden;
    position: absolute;
    top: -10%; /* 超出顶部20% */
    left: 1.5vw;
    z-index: 2;
}

.fourbox-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* 卡片内容 */
.fourbox-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1vh;
    position: relative;
    margin-left: 27vh; /* 为图片预留空间，图片宽度20vh + 2vh间距 */
}

.fourbox-card-title {
    font-size: 1.4vw;
    font-weight: 700;
    margin: 0;
    color: #fff;
    transition: color 0.3s ease;
}

.fourbox-card-description {
    font-size: 1vw;
    color: #fff;
    margin: 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.fourbox-card-arrow {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 2vw;
    height: 2vw;
    background: rgba(255, 255, 255, 0.49);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
   
    transition: all 0.3s ease;
}
/* .fourbox-card-arrow-left{
    color: rgba(245, 232, 156, 1) ;
}
.fourbox-card-arrow-right{
    color: rgba(102, 177, 252, 1) ;
} */

.fourBox-card:hover .fourbox-card-arrow {
    background: rgba(255, 255, 255, 0.2);
    background-color: #fff;
    transform: translateY(-50%) scale(1.1);
}
.fourBox-card:hover .fourbox-card-arrow-left{
    color: rgba(245, 232, 156, 1) ;
}

.fourBox-card:hover .fourbox-card-arrow-right{
    color: rgba(102, 177, 252, 1) ;
}

/* 横幅样式 */
.fourBox-banner {
    border-radius: 1vw;
    /* padding: 2vw; */
    position: relative;
    overflow: hidden;
    height: 26vh;
    display: flex;
    align-items: center;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
}

.banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    z-index: 2;
    position: relative;
}

.banner-text {
    flex: 1;
}

.banner-title {
    font-size: 2vw;
    font-weight: 700;
    color: #1976d2;
    margin: 0 0 1vh 0;
}

.banner-description {
    font-size: 1.2vw;
    color: #1976d2;
    margin: 0;
    line-height: 1.4;
}

.banner-button {
    position: absolute;
    top: 50%;
    right: 10%;
    z-index: 10;
    transform: translateY(-50%);
    background: linear-gradient(270deg, rgba(255, 157, 28, 1) 0%, rgba(254, 116, 11, 1) 100%);
    color: white;
    border: none;
    padding: 0.5vw 1.5vw;
    border-radius: 25px;
    font-size: 1vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.banner-button:hover {
    background: #f57c00;
   
    box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4);
}

.banner-button svg {
    transition: transform 0.3s ease;
}

.banner-button:hover svg {
    transform: translateX(2px);
}

.banner-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.banner-carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.banner-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.banner-bg-image.active {
    opacity: 1;
}

/* banner轮播箭头 */
.banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.49);
    border: none;
    padding: 3px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #1976d2;
    transition: all 0.3s ease;
    z-index: 10;
    opacity: 0;
    margin: 0 0.5vw;
    pointer-events: none;
}

/* 当鼠标悬停在banner上时显示箭头 */
.banner-background:hover .banner-arrow {
    opacity: 1;
    pointer-events: auto;
}

.banner-arrow:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
}
.banner-arrow:hover svg {
    stroke: #1976d2;
}
.banner-arrow-left {
    left: 10px;
}
.banner-arrow-right {
    right: 10px;
}
.banner-arrow svg {
    width: 40px;
    height: 40px;
}

/* 轮播指示点 */
.fourBox-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1vh;
}

.indicator {
    width: 20px;
    height: 0.6vh;
    border-radius: 2px;
    background: rgba(0, 123, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: linear-gradient(90deg, rgba(15, 143, 255, 1) 0%, rgba(82, 174, 235, 1) 100%);
    transform: scale(1.2);
}

.indicator:hover {
    background: linear-gradient(90deg, rgba(15, 143, 255, 1) 0%, rgba(82, 174, 235, 1) 100%);
    transform: scale(1.1);
}

.section5{
    padding: 5px 10vw;
    position: relative;
    min-height: 60vh;
}

/* Section5 内容容器 */
.section5-content {
    padding: 4vh 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3vh;
}

/* 三个卡片容器 */
.section5-cards {
    display: flex;
    gap: 2vw;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    /* max-width: 1200px; */
}

/* 卡片基础样式 */
.section5-card {
    flex: 1;
    max-width: 30vw;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 24vw;
    border: rgba(46, 107, 219, 0.48) 1px solid;
}

.section5-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* 卡片顶部区域 */
.section5-card-top {
    height: 15vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 卡片图片样式 */
.section5-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
}

/* 陀螺仪卡片样式 */
.gyroscope-card .section5-card-top {
    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
}

/* 才金宝卡片样式 */
.treasure-card .section5-card-top {
    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
}

/* 才易融卡片样式 */
.finance-card .section5-card-top {
    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
}

/* 卡片底部区域 */
.section5-card-bottom {
    position: relative;
    background: url('../image/index/thereItemBg.png'), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(232, 247, 255, 1) 100%);
    background-size: cover, contain;
    background-repeat: no-repeat, no-repeat;
    background-position: top center, center;
    padding: 2vh 1.5vw;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background 0.3s ease;
}

/* 卡片底部内容容器 */
.section5-card-bottom-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: nowrap;
}

/* 卡片hover和选中状态 */
.section5-card:hover .section5-card-bottom,
.section5-card.selected .section5-card-bottom {
    background:  linear-gradient(135deg, rgba(15, 143, 255, 1) 0%, rgba(82, 174, 235, 1) 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top center;
}

/* hover和选中状态下的文字颜色调整 */
.section5-card:hover .section5-card-bottom .section5-card-title,
.section5-card.selected .section5-card-bottom .section5-card-title,
.section5-card:hover .section5-card-bottom .section5-card-desc,
.section5-card.selected .section5-card-bottom .section5-card-desc {
    color: white;
}

/* hover和选中状态下的描述文字宽度调整 */
.section5-card:hover .section5-card-desc,
.section5-card.selected .section5-card-desc {
    width: 80%;
}

/* 卡片主标题 */
.section5-card-title {
    font-size: 1.2vw;
    font-weight: 700;
    margin: 0 0 1vh 0;
    line-height: 1.3;
}

/* 卡片描述 */
.section5-card-desc {
    font-size: 0.8vw;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    opacity: 0.9;
    width: 100%;
    flex-shrink: 1;
    display: block;
    color: rgba(10, 116, 209, 1);
    /* white-space: nowrap;
    overflow: hidden;
    transition: width 0.3s ease;
    text-overflow: ellipsis; */
}

/* section5-right 容器 */
.section5-right {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
}

/* section5-right 图片 */
.section5-right-image {
    width: 100%;
    height: 1.5vw;
    object-fit: contain;
}

/* 只在hover和selected时显示图片 */
.section5-card:hover .section5-right,
.section5-card.selected .section5-right {
    opacity: 1;
}

/* 卡片操作箭头 */
.section5-card-arrow {
    position: absolute;
    top: 50%;
    right: 1.5vw;
    transform: translateY(-50%);
    width: 2.5vw;
    height: 2.5vw;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.section5-card-arrow:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.section5-card-arrow svg {
    color: white;
    transition: transform 0.3s ease;
}

.card-action-arrow:hover svg {
    transform: translateX(2px);
}

/* 陀螺仪图形样式 */
.gyroscope-graphic {
    position: relative;
    width: 120px;
    height: 120px;
}

.gyroscope-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: #64b5f6;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(100, 181, 246, 0.6);
}

.gyroscope-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #64b5f6;
    border-radius: 50%;
    opacity: 0.7;
}

.ring-1 {
    width: 40px;
    height: 40px;
    animation: rotate 8s linear infinite;
}

.ring-2 {
    width: 60px;
    height: 60px;
    animation: rotate 6s linear infinite reverse;
}

.ring-3 {
    width: 80px;
    height: 80px;
    animation: rotate 10s linear infinite;
}

.gyroscope-arrow {
    position: absolute;
    width: 3px;
    height: 15px;
    background: #64b5f6;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform-origin: center bottom;
}

.arrow-1 {
    transform: translate(-50%, -50%) rotate(0deg);
    animation: pulse 2s ease-in-out infinite;
}

.arrow-2 {
    transform: translate(-50%, -50%) rotate(120deg);
    animation: pulse 2s ease-in-out infinite 0.7s;
}

.arrow-3 {
    transform: translate(-50%, -50%) rotate(240deg);
    animation: pulse 2s ease-in-out infinite 1.4s;
}

/* 飞机图形样式 */
.airplane-graphic {
    position: relative;
    width: 120px;
    height: 120px;
}

.airplane-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 8px;
    background: #64b5f6;
    border-radius: 4px;
}

.airplane-wing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 4px;
    background: #42a5f5;
    border-radius: 2px;
}

.wing-left {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.wing-right {
    transform: translate(-50%, -50%) rotate(45deg);
}

.airplane-propeller {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 2px;
    background: #90caf9;
    border-radius: 1px;
}

.prop-left {
    left: 20%;
    transform: translateY(-50%);
    animation: spin 1s linear infinite;
}

.prop-right {
    right: 20%;
    transform: translateY(-50%);
    animation: spin 1s linear infinite;
}

.airplane-nodes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.node {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #64b5f6;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(100, 181, 246, 0.6);
}

.node-1 {
    top: 20%;
    left: 30%;
    animation: pulse 2s ease-in-out infinite;
}

.node-2 {
    top: 30%;
    right: 20%;
    animation: pulse 2s ease-in-out infinite 0.5s;
}

.node-3 {
    bottom: 30%;
    left: 20%;
    animation: pulse 2s ease-in-out infinite 1s;
}

.node-4 {
    bottom: 20%;
    right: 30%;
    animation: pulse 2s ease-in-out infinite 1.5s;
}

/* 控制面板图形样式 */
.control-panel-graphic {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-panel-circle {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
    box-shadow: 0 8px 25px rgba(26, 35, 126, 0.3);
}

.panel-segment {
    position: absolute;
    width: 50%;
    height: 50%;
    transform-origin: 100% 100%;
    overflow: hidden;
}

.segment-1 {
    transform: rotate(0deg);
}

.segment-2 {
    transform: rotate(90deg);
}

.segment-3 {
    transform: rotate(180deg);
}

.segment-4 {
    transform: rotate(270deg);
}

.segment-label {
    position: absolute;
    font-size: 10px;
    color: white;
    font-weight: 600;
    transform: rotate(45deg);
    top: 15px;
    left: 15px;
}

.panel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: #64b5f6;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(100, 181, 246, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-icon {
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* 分页指示点 */
.section5-indicators {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.section5-indicators .indicator {
    width: 20px;
    height: 0.6vh;
    background: rgba(33, 150, 243, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.section5-indicators .indicator.active {
    background: linear-gradient(90deg, #1976d2 0%, #42a5f5 100%);
    transform: scale(1.2);
}

.section5-indicators .indicator:hover {
    background: linear-gradient(90deg, #1976d2 0%, #42a5f5 100%);
    transform: scale(1.1);
}
.section6{
    background: url('../image/index/sixBg.png');
    background-size: 100% 100%;
    padding: 0 10vw 8vh;

}

/* Section6 内容容器 */
.section6-content {
    display: flex;
    gap: 3vw;
    align-items: stretch;
    /* min-height: 50vh; */
    padding: 4vh 0;
}

/* 左侧主要卡片 */
.section6-main-card {
    flex: 3;
    background: url('../image/index/sixBoxBg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    /* min-height: 45vh; */
    padding: 2vw;
}

.section6-card-header {
    margin-bottom: 4vh;
}

.section6-card-title {
    font-size: 1vw;
    font-weight: 700;
    color: #fff;
    margin: 0;
    margin-bottom: 10px;

}
.section6-card-desc::after{
    content: "";
    width: 60px;
    height: 3px;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
}
.section6-card-desc{
    width: 100%;
    height: 0.5px;
    background: #fff;
    position: relative;
}

/* 城市网格 */
.section6-cities-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5vw;
    margin-bottom: 3vh;
}

.city-button {
    padding: 1vh 0.8vw;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.7) 0%, rgba(65, 123, 209, 0.31) 100%);
    border: 1px solid rgba(255, 255, 255, 1);
    color: white;
    font-size: 1vw;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.city-button.active {
    background: white;
    color: #007bff;
}

.city-button:hover:not(.active) {
    background: white;
    color: #007bff;
}

.city-button.active:hover {
    background: #f8f9fa;
    transform: translateY(-1px);
}

/* 更多按钮 */
.section6-more-button {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1vw;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 15vw;
    min-width: 120px;
    margin: 0 auto;
    padding: 2vh 2vw;
}

.section6-more-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

.more-arrow {
    width: 80px;
    height: 25px;
    transition: transform 0.3s ease;
}

.section6-more-button:hover .more-arrow {
    transform: translateX(2px);
}

/* 背景装饰 */
.section6-background-graphic {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    height: 60%;
    opacity: 0.1;
    z-index: 1;
}

.background-train {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
}

/* 右侧三个小卡片容器 */
.section6-side-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

/* 小卡片基础样式 */
.section6-side-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 2vh 1.5vw;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 12vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section6-side-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 小卡片背景 */
.side-card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.side-card-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 小卡片标题 */
.side-card-title {
    font-size: 1.2vw;
    font-weight: 600;
    color: #333;
    margin: 0;
    z-index: 2;
    position: relative;
    text-align: center;
}

.section6-side-card:hover .side-card-title {
    color: #007bff;
}

/* 地方政策卡片特殊样式 */
.policy-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.policy-card:hover {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

/* 诉求沟通卡片特殊样式 */
.communication-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.communication-card:hover {
    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
}

/* 企业融资卡片特殊样式 */
.financing-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.financing-card:hover {
    background: linear-gradient(135deg, #fff3e0 0%, #ffcc02 100%);
}

.section7{
    
    background: url('../image/index/sevBg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
    padding: 0 10vw 8vh;
}
.section8{
    padding: 0 10vw 8vh;
    background: url('../image/index/enigBg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
}

/* Section8 Content 布局 */
.section8-content {
    display: flex;
    gap: 3vw;
    align-items: center;
    justify-content: center;
    padding: 4vw 0;
    /* max-width: 1200px; */
    /* margin: 0 auto; */
}

/* 左侧四个卡片网格 */
.section8-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.5vw;
    width: 45%;
}

/* 小卡片基础样式 */
.section8-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2vw;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 100px;
    position: relative;
    background: url('../image/index/thereItemBg.png'), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(232, 247, 255, 1) 100%);
    /* background: url('../image/index/thereItemBg.png'), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(232, 247, 255, 1) 100%); */
    background-size: contain 50%, contain;
    background-repeat: no-repeat, no-repeat;
    background-position: top center, center;
}   

/* 卡片选中/悬停状态 */
.section8-card:hover,
.section8-card.active {
    
    /* background: linear-gradient(135deg, rgba(15, 143, 255, 1) 0%, rgba(82, 174, 235, 1) 100%);
    border-color: rgba(15, 143, 255, 0.5); */
    background: url('../image/index/thereItemBg.png'), linear-gradient(180deg, rgba(15, 143, 255, 1) 0%, rgba(82, 174, 235, 1) 100%);
    background-size: contain 50%, contain;
    background-repeat: no-repeat, no-repeat;
    background-position: top center, center;
}

/* 卡片图标基础样式 */
.section8-card-icon {
    width: 1.5vw;
    height: 1.5vw;
    margin-bottom: 1vw;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.3s ease;
}

/* 科技赋能卡片图标 */
.section8-card-tech .section8-card-icon {
    background-image: url('../image/index/eniOne.png');
}

.section8-card-tech:hover .section8-card-icon,
.section8-card-tech.active .section8-card-icon {
    background-image: url('../image/index/eniOne-act.png');
}

/* 金融创新卡片图标 */
.section8-card-finance .section8-card-icon {
    background-image: url('../image/index/eniTwo.png');
}

.section8-card-finance:hover .section8-card-icon,
.section8-card-finance.active .section8-card-icon {
    background-image: url('../image/index/eniTwo-act.png');
}

/* 创新创业卡片图标 */
.section8-card-innovation .section8-card-icon {
    background-image: url('../image/index/eniThere.png');
}

.section8-card-innovation:hover .section8-card-icon,
.section8-card-innovation.active .section8-card-icon {
    background-image: url('../image/index/eniThere-act.png');
}

/* 乡村振兴卡片图标 */
.section8-card-rural .section8-card-icon {
    background-image: url('../image/index/eniFour.png');
}

.section8-card-rural:hover .section8-card-icon,
.section8-card-rural.active .section8-card-icon {
    background-image: url('../image/index/eniFour-act.png');
}

/* 卡片文字 - 未选中状态 */
.section8-card-text {
    font-size: 1.2vw;
    font-weight: 500;
    text-align: center;
    color: black;
    transition: color 0.3s ease;
}

/* 卡片文字 - 选中/悬停状态 */
.section8-card:hover .section8-card-text,
.section8-card.active .section8-card-text {
    color: white;
}
.bannerImgBtn{
    background: url(../image/talent-jili/rightImg.png);
    background-size: 100% 100%;
    width: 1.2vw;
    height: 1.2vw;
    margin-left: 0.5vw;
}
/* 卡片悬停效果 */
.section8-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 右侧大卡片 */
.section8-banner {
    width: 50%;
    
    height: -webkit-fill-available;
    min-height: 40vh;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    background: url('../image/index/eniRight.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 大卡片遮罩层 */
.section8-banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
   
   background-color: rgba(117, 117, 117, 0.54);
    display: flex;
    align-items: flex-end;
    padding: 1.5vw;
}

/* 大卡片内容 */
.section8-banner-content {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.section8-banner-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* 大卡片标题 */
.section8-banner-title {
    font-size: 1.2vw;
    font-weight: bold;
    color: white;
    padding: 0;
    margin: 0 0 0.5vw;
}

/* 大卡片描述 */
.section8-banner-desc {
    font-size: 0.8vw;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.4;
}

/* 大卡片按钮 */
.section8-banner-btn {
    background: white;
    border: none;
    border-radius: 25px;
    padding: 0.1vw 1vw;
    display: flex;
    align-items: center;
    gap: 0.5vw;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8vw;
    color: rgba(42, 130, 228, 1);
}

.section8-banner-btn:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.section8-banner-arrow {
    background: #333;
    color: white;
    border-radius: 50%;
    width: 1.5vw;
    height: 1.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8vw;
    background: url('../image/index/right.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Section8 响应式设计 */
@media (max-width: 768px) {
    .section8-content {
        flex-direction: column;
        gap: 4vw;
        padding: 6vw 0;
    }
    
    .section8-cards-grid {
        width: 100%;
        gap: 3vw;
    }
    
    .section8-card {
        padding: 4vw;
        min-height: 100px;
    }
    
    .section8-card-icon {
        width: 8vw;
        height: 8vw;
        margin-bottom: 2vw;
    }
    
    .section8-card-text {
        font-size: 3vw;
    }
    
    .section8-banner {
        width: 100%;
        height: 200px;
        border-radius: 8px;
        margin-top: 2vh;
    }
    
    .section8-banner-overlay {
        height: 100%;
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
        padding: 3vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .section8-banner-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2vh;
        width: 100%;
    }
    
    .section8-banner-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1vh;
    }
    
    .section8-banner-title {
        font-size: 5vw;
        font-weight: bold;
        margin: 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .section8-banner-desc {
        font-size: 3.5vw;
        line-height: 1.4;
        margin: 0;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        max-width: 90%;
    }
    
    .section8-banner-btn {
        padding: 1.8vw 3vw;
        font-size: 2.8vw;
        border-radius: 25px;
        min-height: 36px;
        display: flex;
        align-items: center;
        gap: 0.8vw;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    .section8-banner-btn:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    .section8-banner-arrow {
        width: 4vw;
        height: 4vw;
        min-width: 16px;
        min-height: 16px;
        background-size: 50% 50%;
        background-position: center;
        background-repeat: no-repeat;
    }
}

.section9{
    padding: 0 10vw 8vh;
    background:  url('../image/index/BankBg.png');
       
    background-size: 100% 100%;
    background-repeat: no-repeat, ;
    background-position: bottom center;
    position: relative;
    overflow: hidden;
}

.section9::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    pointer-events: none;
}
.section9-header-top{
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.section9-header{
    background: url('../image/index/bankTop.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 70px;
    width:500px ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 40px;
    font-weight: bold;
}
.section9-header-title{
    font-size: 2vw;
    /*  */
    background: linear-gradient(180deg, rgba(82, 174, 235, 1) 0.17%,  rgba(1, 98, 192, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 银行网格布局 */
.bank-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2vw;
    padding: 3vw 0vw;
    /* max-width: 1200px; */
    margin: 0 auto;
    position: relative;
}

/* 银行卡片样式 */
.bank-card {
    background: white;
    border-radius: 0;
    padding: 1.2vw 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 2.2;
    min-height: 60px;
}

.bank-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* 银行logo样式 */
.bank-logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(0.3);
    transition: filter 0.3s ease;
}

.bank-card:hover .bank-logo {
    filter: grayscale(0);
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .bank-grid {
        gap: 2vw;
        padding: 2.5vw 1.5vw;
    }
    
    .bank-card {
        padding: 1vw 1.5vw;
        min-height: 50px;
    }
}

@media (max-width: 768px) {
    .bank-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(5, 1fr);
        gap: 3vw;
        padding: 3vw 2vw;
    }
    
    .bank-card {
        padding: 1.5vw 2.5vw;
        min-height: 45px;
       
    }
}

@media (max-width: 480px) {
    .bank-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(8, 1fr);
        gap: 4vw;
        padding: 4vw 3vw;
    }
    
    .bank-card {
        padding: 2vw 3vw;
        min-height: 40px;
    }
    
    .bank-card:hover {
        transform: translateY(-3px);
    }
}

@media (max-width: 480px) {
    .section8-cards-grid {
        gap: 4vw;
    }
    
    .section8-card {
        padding: 5vw;
        min-height: 80px;
    }
    
    .section8-card-icon {
        width: 10vw;
        height: 10vw;
    }
    
    .section8-card-text {
        font-size: 4vw;
    }
    
    .section8-banner {
        height: 180px;
        border-radius: 6px;
        margin-top: 1.5vh;
    }
    
    .section8-banner-overlay {
        padding: 4vw;
    }
    
    .section8-banner-content {
        gap: 1.5vh;
    }
    
    .section8-banner-top {
        gap: 0.8vh;
    }
    
    .section8-banner-title {
        font-size: 6vw;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }
    
    .section8-banner-desc {
        font-size: 4vw;
        max-width: 95%;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    }
    
    .section8-banner-btn {
        padding: 2.2vw 3.5vw;
        font-size: 3.2vw;
        border-radius: 22px;
        min-height: 34px;
        gap: 1.2vw;
    }
    
    .section8-banner-arrow {
        width: 4.5vw;
        height: 4.5vw;
        min-width: 14px;
        min-height: 14px;
        background-size: 50% 50%;
    }
}

/* 横屏手机适配 */
@media (max-width: 768px) and (orientation: landscape) {
    .section8-banner {
        height: 160px;
        margin-top: 1vh;
    }
    
    .section8-banner-overlay {
        padding: 2vw;
    }
    
    .section8-banner-content {
        gap: 1vh;
    }
    
    .section8-banner-title {
        font-size: 4.5vw;
    }
    
    .section8-banner-desc {
        font-size: 3vw;
    }
    
    .section8-banner-btn {
        padding: 1.5vw 2.5vw;
        font-size: 2.5vw;
        min-height: 32px;
    }
    
    .section8-banner-arrow {
        width: 3.5vw;
        height: 3.5vw;
        min-width: 14px;
        min-height: 14px;
    }
}

/* 大屏手机适配 (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .section8-banner {
        height: 220px;
        margin-top: 2.5vh;
    }
    
    .section8-banner-overlay {
        padding: 3.5vw;
    }
    
    .section8-banner-content {
        gap: 2.5vh;
    }
    
    .section8-banner-title {
        font-size: 5.5vw;
    }
    
    .section8-banner-desc {
        font-size: 3.8vw;
    }
    
    .section8-banner-btn {
        padding: 2vw 3.2vw;
        font-size: 3vw;
        min-height: 36px;
    }
    
    .section8-banner-arrow {
        width: 4.2vw;
        height: 4.2vw;
        min-width: 18px;
        min-height: 18px;
    }
}
/* 动画效果 */
@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: translateY(-50%) rotate(0deg);
    }
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}
/* 響應式設計 */
@media (max-width: 768px) {
    .section1 {
        background-size: 100% 100%; /* 與桌面端保持一致 */
        background-position: center;
        background-repeat: no-repeat;
        height: 40vh; /* 與桌面端保持一致 */
        padding: 10px 4vw;
        position: relative; /* 設置為相對定位，作為絕對定位的參考點 */
    }
    .section2 {
        background: rgba(220, 236, 252, 1); /* 移動端使用漸變背景 */
        background-size: 100% 100%; /* 改為100% 100%以適應vh高度 */
        background-position: center;
        background-repeat: no-repeat;
        padding: 10px 4vw;
        height: 60vh; /* 與桌面端保持一致 */
        position: absolute !important; /* 強制絕對定位，覆蓋任何 relative 設置 */
        top: 0%; /* 改為頂部定位，與桌面端bottom:0%對應 */
        left: 0;
        right: 0;
        z-index: 10; /* 保持層級 */
    }
    .section2Header{
        margin-top: 1vh;
        font-size: 1.5vw;
        padding:0.2vh 1vw;
        flex-direction: column;
    }
    
    .labaImg{
        width: 4vw;
        height: 4vw;
    }
    .rightImg{
        width: 3vw;
        height: 3vw;
        margin-left: 1vw;
    }
    .section2HeaderTwo{
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 2vh;
        padding: 2vw;
        border-radius: 0;
    }
    .twoTwoLeft{
        width: 100%;
        height: 20vh;
    }
    .twoTwoLeftImg{
        width: 100%;
        height: 150px;
        object-fit: cover;
    }
    .twoTwoLeftFirst{
        font-size:2vw;
    }
    .twoTwoRight{
        width: 100%;
        height: auto;
        min-height: 180px;
    }
    .tab-button{
        font-size: 1.6vw;
    }
    .news-text{
        font-size: 1.5vw;
    }
    .news-item:hover .news-text{
        font-size: 1.6vw;
    }
    .news-date{
        font-size: 1.2vw;
    }
    .section3{
        margin-top: 400px;
        padding: 0 10vw 1vh;
    }
    .comLeftImg{
        width: 6px;
        /* height: 10px; */
    }
    .comText{
        margin-left: 5px;
        font-size: 2.5vw;
        font-weight: 700;
    }
    .comRightImg{
        width: 10vw;
    }
    
    /* 人才价值兑付移动端适配 */
    .talent-title {
        font-size: 4vw;
    }
    
    .more-button {
        font-size: 2.5vw;
        padding: 6px 12px;
    }
    
    .talent-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3vw;
    }
    
    .talent-card {
        min-height: 150px;
    }
    
    .card-title {
        font-size: 2.5vw;
    }
    
    .card-subtitle {
        font-size: 1.8vw;
    }
    
    .card-icon {
        margin: 0.5vh 0;
    }
    
    .card-image {
        max-width: 60px;
        max-height: 60px;
    }
    
    .molecular-structure,
    .shield-icon,
    .documents-stack,
    .server-rack,
    .business-server {
        width: 40px;
        height: 40px;
    }
    
    .molecular-structure::before,
    .molecular-structure::after {
        width: 12px;
        height: 12px;
    }
    
    .shield-icon::before {
        width: 12px;
        height: 12px;
    }
    
    .business-server::before {
        width: 12px;
        height: 12px;
    }
    
    .card-arrow {
        width: 25px;
        height: 25px;
        bottom: 1vh;
        right: 1vw;
    }
    
    .card-arrow svg {
        width: 16px;
        height: 16px;
    }
    
    /* 移动端箭头圆圈样式 */
    .card-arrow-circle {
        width: 28px;
        height: 28px;
    }
    
    .card-arrow-circle svg {
        width: 14px;
        height: 14px;
    }
    
    /* Section5 移动端适配 */
    .section5 {
        padding: 10px 4vw;
        min-height: auto;
    }
    
    .section5-content {
        padding: 2vh 0;
        gap: 2vh;
    }
    
    .section5-cards {
        flex-direction: column;
        gap: 3vh;
        align-items: center;
    }
    
    .section5-card {
        max-width: 100%;
        width: 100%;
        min-height: 250px;
    }
    
    .section5-card-top {
        height: 150px;
    }
    
    .section5-card-title {
        font-size: 4vw;
    }
    
    .section5-card-desc {
        font-size: 2.5vw;
    }
    
    .section5-card-arrow {
        width: 6vw;
        height: 6vw;
        right: 3vw;
    }
    
    .section5-card-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .gyroscope-center {
        width: 15px;
        height: 15px;
    }
    
    .ring-1 {
        width: 30px;
        height: 30px;
    }
    
    .ring-2 {
        width: 45px;
        height: 45px;
    }
    
    .ring-3 {
        width: 60px;
        height: 60px;
    }
    
    .gyroscope-arrow {
        width: 2px;
        height: 12px;
    }
    
    .airplane-body {
        width: 45px;
        height: 6px;
    }
    
    .airplane-wing {
        width: 22px;
        height: 3px;
    }
    
    .airplane-propeller {
        width: 15px;
        height: 1.5px;
    }
    
    .node {
        width: 4px;
        height: 4px;
    }
    
    .control-panel-circle {
        width: 70px;
        height: 70px;
    }
    
    .panel-center {
        width: 20px;
        height: 20px;
    }
    
    .center-icon {
        width: 8px;
        height: 8px;
    }
    
    .segment-label {
        font-size: 8px;
        top: 10px;
        left: 10px;
    }
    
    .section5-indicators .indicator {
        width: 10px;
        height: 2px;
    }
    
    /* Section6 移动端适配 */
    .section6 {
        padding: 0 4vw 4vh;
    }
    
    .section6-content {
        flex-direction: column;
        gap: 4vh;
        padding: 2vh 0;
        min-height: auto;
    }
    
    .section6-main-card {
        flex: none;
        min-height: auto;
        padding: 3vh 4vw;
        width: 100%;
        max-width: 90vw;
        margin: 0 auto;
    }
    
    .section6-card-title {
        font-size: 4vw;
        margin-bottom: 3vh;
    }
    
    .section6-cities-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2vw;
        margin-bottom: 4vh;
    }
    
    .city-button {
        padding: 1.5vh 1vw;
        font-size: 2.5vw;
        min-height: 5vh;
        border-radius: 6px;
    }
    
    .section6-more-button {
        padding: 2vh 3vw;
        font-size: 2.5vw;
        width: auto;
        min-width: 100px;
    }
    
    .more-arrow {
        width: 50px;
        height: 20px;
    }
    
    .section6-side-cards {
        flex: none;
        flex-direction: row;
        gap: 2vw;
        width: 100%;
        justify-content: space-between;
    }
    
    .section6-side-card {
        flex: 1;
        min-height: 12vh;
        padding: 2.5vh 1.5vw;
        width: auto;
    }
    
    .side-card-title {
        font-size: 3vw;
    }
}



/* 小屏手機適配 (480px以下) */
@media (max-width: 480px) {
    .section1 {
        height: 35vh; /* 小屏手機使用較小的高度 */
        min-height: 180px;
        padding: 8px 3vw;
        background-size: 100% 100%; /* 保持背景圖完全填充 */
        background-position: center center;
        background-repeat: no-repeat;
        position: relative; /* 設置為相對定位，作為絕對定位的參考點 */
    }
    .section2 {
        background: rgba(220, 236, 252, 1); /* 移動端使用漸變背景 */
        height: 55vh; /* 小屏手機使用較小的高度 */
        min-height: 180px;
        padding: 8px 3vw;
        background-size: 100% 100%; /* 保持背景圖完全填充 */
        background-position: center center;
        background-repeat: no-repeat;
        position: absolute !important; /* 強制絕對定位，覆蓋任何 relative 設置 */
        top: 25vh;
        left: 0;
        right: 0;
        z-index: 10;
    }
    .section2Header{
        margin-top: 1vh;
        font-size: 1.5vw;
        padding:0.2vh 1vw;
        flex-direction: column;
    }
    
    .labaImg{
        width: 4vw;
        height: 4vw;
    }
    .rightImg{
        width: 3vw;
        height: 3vw;
        margin-left: 1vw;
    }
    .section2HeaderTwo{
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 2vh;
        padding: 2vw;
        border-radius: 0;
    }
    .twoTwoLeft{
        width: 100%;
        height: 20vh;
    }
    .twoTwoLeftImg{
        width: 100%;
        height: 150px;
        object-fit: cover;
    }
    .twoTwoLeftFirst{
        font-size:2vw;
    }
    .twoTwoRight{
        width: 100%;
        height: auto;
        min-height: 180px;
    }
    .tab-button{
        font-size: 1.6vw;
    }
    .news-text{
        font-size: 1.5vw;
    }
    .news-item:hover .news-text{
        font-size: 1.6vw;
    }
    .news-date{
        font-size: 1.2vw;
    }
    
    /* 人才价值兑付小屏手机适配 */
    .talent-title {
        font-size: 5vw;
    }
    
    .more-button {
        font-size: 3vw;
        padding: 4px 8px;
    }
    
    .talent-cards-grid {
        grid-template-columns: 1fr;
        gap: 4vw;
    }
    
    .talent-card {
        min-height: 120px;
    }
    
    .card-title {
        font-size: 3.5vw;
    }
    
    .card-subtitle {
        font-size: 2.5vw;
    }
    
    .card-image {
        max-width: 50px;
        max-height: 50px;
    }
    
    .molecular-structure,
    .shield-icon,
    .documents-stack,
    .server-rack,
    .business-server {
        width: 35px;
        height: 35px;
    }
    
    .molecular-structure::before,
    .molecular-structure::after {
        width: 10px;
        height: 10px;
    }
    
    .shield-icon::before {
        width: 10px;
        height: 10px;
    }
    
    .business-server::before {
        width: 10px;
        height: 10px;
    }
    
    .card-arrow {
        width: 20px;
        height: 20px;
    }
    
    .card-arrow svg {
        width: 12px;
        height: 12px;
    }
    
    /* 小屏手机箭头圆圈样式 */
    .card-arrow-circle {
        width: 24px;
        height: 24px;
    }
    
    .card-arrow-circle svg {
        width: 12px;
        height: 12px;
    }
    
    /* fourBox 小屏手机适配 */
    .fourBox-cards {
        flex-direction: column;
        gap: 4vh;
    }
    
    .fourBox-card {
        min-height: 120px;
        padding: 4vw;
        gap: 3vw;
    }
    
    .fourbox-card-image-container {
        width: 60px;
        height: 60px;
        position: static; /* 手机端不使用绝对定位 */
        top: auto;
        left: auto;
    }
    
    .fourbox-card-title {
        font-size: 3.5vw;
    }
    
    .fourbox-card-description {
        font-size: 2.5vw;
    }
    
    .fourbox-card-arrow {
        width: 24px;
        height: 24px;
    }
    
    .fourbox-card-arrow svg {
        width: 12px;
        height: 12px;
    }
    
    .banner-title {
        font-size: 4.5vw;
    }
    
    .banner-description {
        font-size: 2.8vw;
    }
    .banner-bg-image{
        height: 150px;
    }
    .banner-button {
        font-size: 3vw;
        padding: 6px 12px;
        /* top: 10px; */
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
    }
    
    .banner-button svg {
        width: 12px;
        height: 12px;
    }
    
    .indicator {
        width: 5px;
        height: 5px;
    }
    
    /* fourBox 移动端适配 */
    .fourBox-cards {
        flex-direction: column;
        gap: 3vh;
    }
    .fourBox{
       padding-top: 0;
       gap: 0;
    }
    .fourBox-banner{
        min-height: 60px;
    }
    .fourbox-card-content{
        margin-left: 10px;
    }
    .fourBox-card {
        min-height: 80px;
        padding: 3vw;
        gap: 2vw;
    }
    
    .fourbox-card-image-container {
        width: 80px;
        height: 80px;
        position: static; /* 手机端不使用绝对定位 */
        top: auto;
        left: auto;
    }
    
    .fourbox-card-title {
        font-size: 2.5vw;
    }
    
    .fourbox-card-description {
        font-size: 1.8vw;
    }
    
    .fourbox-card-arrow {
        width: 28px;
        height: 28px;
    }
    
    .fourbox-card-arrow svg {
        width: 14px;
        height: 14px;
    }
    
    .banner-title {
        font-size: 3.5vw;
    }
    
    .banner-description {
        font-size: 2.2vw;
    }
    
    /* .banner-button {
        font-size: 2.5vw;
        padding: 8px 16px;
        top: 1.5vh;
        right: 2vw;
    }
    
    .banner-button svg {
        width: 14px;
        height: 14px;
    } */
    
    .indicator {
        width: 10px;
        height: 2px;
    }
    
    /* Section5 小屏手机适配 */
    .section5 {
        padding: 8px 10vw;
        min-height: auto;
    }
    
    .section5-content {
        padding: 1.5vh 0;
        gap: 2vh;
    }
    
    .section5-cards {
        flex-direction: column;
        gap: 2.5vh;
        align-items: center;
    }
    
    .section5-card {
        max-width: 100%;
        width: 100%;
        min-height: 200px;
    }
    
    .section5-card-top {
        height: 120px;
    }
    
    .section5-card-title {
        font-size: 5vw;
    }
    
    .section5-card-desc {
        font-size: 3vw;
    }
    
    .section5-card-arrow {
        width: 8vw;
        height: 8vw;
        right: 4vw;
    }
    
    .section5-card-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .gyroscope-center {
        width: 12px;
        height: 12px;
    }
    
    .ring-1 {
        width: 25px;
        height: 25px;
    }
    
    .ring-2 {
        width: 35px;
        height: 35px;
    }
    
    .ring-3 {
        width: 45px;
        height: 45px;
    }
    
    .gyroscope-arrow {
        width: 1.5px;
        height: 10px;
    }
    
    .airplane-body {
        width: 35px;
        height: 5px;
    }
    
    .airplane-wing {
        width: 18px;
        height: 2.5px;
    }
    
    .airplane-propeller {
        width: 12px;
        height: 1px;
    }
    
    .node {
        width: 3px;
        height: 3px;
    }
    
    .control-panel-circle {
        width: 50px;
        height: 50px;
    }
    
    .panel-center {
        width: 15px;
        height: 15px;
    }
    
    .center-icon {
        width: 6px;
        height: 6px;
    }
    
    .segment-label {
        font-size: 6px;
        top: 8px;
        left: 8px;
    }
    
    .section5-indicators .indicator {
        width: 10px;
        height: 2px;
    }
    
    /* Section6 小屏手机适配 */
    .section6 {
        padding: 0 3vw 3vh;
    }
    
    .section6-content {
        gap: 3vh;
        padding: 1.5vh 0;
    }
    
    .section6-main-card {
        padding: 2.5vh 3vw;
    }
    
    .section6-card-title {
        font-size: 5vw;
        margin-bottom: 2.5vh;
    }
    
    .section6-cities-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5vw;
        margin-bottom: 3vh;
    }
    
    .city-button {
        padding: 1.2vh 0.8vw;
        font-size: 3vw;
        min-height: 4.5vh;
        border-radius: 4px;
    }
    
    .section6-more-button {
        padding: 1.5vh 2.5vw;
        font-size: 3vw;
        min-width: 80px;
    }
    
    .more-arrow {
        width: 40px;
        height: 16px;
    }
    
    .section6-side-cards {
        flex-direction: row;
        gap: 1.5vw;
        justify-content: space-between;
    }
    
    .section6-side-card {
        flex: 1;
        min-height: 10vh;
        padding: 2vh 1.5vw;
        width: auto;
    }
    
    .side-card-title {
        font-size: 3.5vw;
    }
}

/* Section7 人才政策样式 */
.section7-content {
    display: flex;
    gap: 3vw;
    padding: 1vh 0;
    min-height: 50vh;
}
.section7-tabsBox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(90deg, rgba(15, 143, 255, 1) 0%, rgba(82, 174, 235, 1) 100%);
    padding: 8px;
    border-radius: 4px;
}
/* 左侧主内容区域 */
.section7-main-content {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

/* 标题区域 */
.section7-header {
    margin-bottom: 1vh;
}
.sevTitleImg{
    width: 100%;
}

.section7-title {
    font-size: 1.8vw;
    font-weight: 700;
    color: #333;
    margin: 0;
    position: relative;
}


/* 标签页导航 */
.section7-tabs {
    width: 20%;
    height: 5vh;
    display: flex;
    /* gap: 1vw; */
    /* margin-bottom: 1vh; */
}

.section7-tab-button {
    padding: 8px 20px 8px 16px;
    background: #f8f9fa;
    color: #666;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9vw;
    font-weight: 500;
    transition: all 0.3s ease;
}

.section7-tab-button.active {
    /* background: linear-gradient(90deg, rgba(15, 143, 255, 1) 0%, rgba(82, 174, 235, 1) 100%); */
    background: url('../image/index/sevLeftTitleBg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: rgba(34, 152, 249, 1);
    border-color: transparent;
    font-weight: bold;
}

.section7-tab-button:hover:not(.active) {
    background: #e9ecef;
    border-color: #dee2e6;
}

/* 搜索框容器 */
.section7-search-box {
    display: flex;
    align-items: center;
    gap: 1vw;
    width: 55%;
    background: white;
    padding: 0px 5px; 
    border-radius: 5px;
}

/* 搜索栏 */
.section7-search {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 10px 2px;
}

.section7-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.8vw;
    color: #333;
    background: transparent;
}

.section7-search-input::placeholder {
    color: #999;
}

.section7-search-button {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(166, 166, 166, 1);
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.section7-search-button:hover {
    background: #f8f9fa;
    color: #007bff;
}

/* 右侧搜索按钮 */
.section7-search-RightButton {
    background: linear-gradient(90deg, rgba(15, 143, 255, 1) 0%, rgba(82, 174, 235, 1) 100%);
    color: white;
    border: none;
    border-radius: 4px;
    /* padding: 8px 2vw; */
    width: 5.5vw;
    height: 32px;
    font-size: 0.8vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    white-space: nowrap;
}

.section7-search-RightButton:hover {
    background: linear-gradient(90deg, rgba(12, 120, 220, 1) 0%, rgba(70, 150, 210, 1) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.section7-search-RightButton:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 新闻列表 */
.section7-news-list {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.section7-news-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    background: white;
    border-radius: 2px;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
    cursor: pointer;
    transition: all 0.3s ease;
    /* border-left: 3px solid transparent; */
}

/* 奇数项（第1、3、5...个）的背景色 */
.section7-news-item:nth-child(odd) {
    background: rgba(161, 205, 255, 0.27);
}

/* 偶数项（第2、4、6...个）的背景色为透明 */
.section7-news-item:nth-child(even) {
    background: transparent;
}

.section7-news-item:hover {
    transform: translateX(4px);
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); */
    /* border-left-color: #007bff; */
}

.section7-bullet {
    color: rgba(34, 152, 249, 1);
    font-size: 0.8vw;
    font-weight: bold;
    flex-shrink: 0;
}

.section7-news-text {
    flex: 1;
    font-size: 1vw;
    color: rgba(128, 128, 128, 1);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section7-news-item:hover .section7-news-text {
    color: rgba(34, 152, 249, 1);
    font-weight: 500;
}

.section7-news-date {
    color: rgba(166, 166, 166, 0.65);
    font-size: 0.8vw;
    flex-shrink: 0;
    margin-left: 12px;
}

/* 右侧分类区域 */
.section7-sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5vh;
    padding: 1vw;
    border-radius: 7px;
    background-color: rgba(161, 205, 255, 0.27);
}

.section7-category-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gap: 12px; */
    padding: 10px 30px;
  
    background: url('../image/index/sevRigBtn.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* border-radius: 10px; */
    cursor: pointer;
    transition: all 0.3s ease;
    /* border: 1px solid #e9ecef; */
    position: relative;
    overflow: hidden;
}

.section7-category-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.section7-category-item:hover::before {
    left: 100%;
}

.section7-category-item:hover {
    /* background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); */
    transform: translateY(-2px);
    
    /* box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3); */
    /* border-color: #007bff; */
}

.section7-category-icon {
    font-size: 1.5vw;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    background: url('../image/index/sevRigR.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 1.5vw;
    height: 1.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section7-category-item:hover .section7-category-icon {
    transform: scale(1.1);
}

.section7-category-text {
    font-size: 1.1vw;
    font-weight: 500;
    color: rgba(34, 152, 249, 1);
    transition: color 0.3s ease;
}

.section7-category-item:hover .section7-category-text {
    color:rgba(34, 152, 249, 1);
}


/* Section7 响应式设计 */
@media (max-width: 768px) {
    .section7-content {
        flex-direction: column;
        gap: 4vh;
        padding: 2vh 0;
    }
    
    .section7-main-content {
        flex: none;
    }
    
    .section7-title {
        font-size: 4vw;
    }
    
    .section7-tab-button {
        display: none; /* 移动端隐藏 */
    }
    
    .section7-search-box {
        width: 100%;
        flex-direction: row; /* 保持一行显示 */
        gap: 8px;
        padding: 8px;
        background: #f8f9fa;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        align-items: center;
    }
    
    .section7-search {
        flex: 1; /* 占据剩余空间 */
        background: white;
        border: none; /* 手机端去掉边框 */
        border-radius: 6px;
        padding: 8px 12px;
        min-width: 0; /* 允许flex项目收缩 */
    }
    
    .section7-search-input {
        font-size: 16px; /* 防止iOS缩放 */
        padding: 8px 0;
        width: 100%;
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0;
    }
    
    .section7-search-input:focus {
        outline: none;
        background: white;
    }
    
    .section7-search-button {
        padding: 8px;
        margin-right: 8px;
    }
    
    .section7-search-button svg {
        width: 16px;
        height: 16px;
    }
    
    .section7-search-RightButton {
        flex-shrink: 0; /* 不允许收缩 */
        font-size: 14px;
        padding: 0 12px; /* 手机端上下padding为0 */
        min-height: 40px;
        border-radius: 6px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        white-space: nowrap; /* 防止文字换行 */
    }
    
    .section7-search-RightButton:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    .section7-news-text {
        font-size: 2.5vw;
    }
    
    .section7-news-date {
        font-size: 2vw;
    }
    
    .section7-bullet {
        font-size: 3vw;
    }
    
    .section7-sidebar {
        flex: none;
        padding-left: 0;
    }
    
    .section7-category-item {
        padding: 12px 16px;
    }
    
    .section7-category-icon {
        font-size: 3vw;
        width: 5vw;
        height: 5vw;
    }
    
    .section7-category-text {
        font-size: 2.5vw;
    }
}

@media (max-width: 480px) {
    .section7-title {
        font-size: 5vw;
    }
    
    .section7-tab-button {
        display: none; /* 小屏手机端隐藏 */
    }
    
    .section7-search-box {
        flex-direction: row; /* 保持一行显示 */
        padding: 6px;
        gap: 6px;
        align-items: center;
    }
    
    .section7-search {
        flex: 1; /* 占据剩余空间 */
        border: none; /* 小屏手机端去掉边框 */
        padding: 6px 8px;
        border-radius: 4px;
        min-width: 0; /* 允许flex项目收缩 */
    }
    
    .section7-search-input {
        font-size: 16px; /* 防止iOS缩放 */
        padding: 6px 0;
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0;
    }
    
    .section7-search-input:focus {
        outline: none;
        background: white;
    }
    
    .section7-search-button {
        padding: 6px;
        margin-right: 6px;
    }
    
    .section7-search-button svg {
        width: 14px;
        height: 14px;
    }
    
    .section7-search-RightButton {
        flex-shrink: 0; /* 不允许收缩 */
        font-size: 12px;
        padding: 0 10px; /* 小屏手机端上下padding为0 */
        min-height: 36px;
        border-radius: 4px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        white-space: nowrap; /* 防止文字换行 */
    }
    
    .section7-search-RightButton:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    .section7-news-text {
        font-size: 3vw;
    }
    
    .section7-news-date {
        font-size: 2.5vw;
    }
    
    .section7-bullet {
        font-size: 4vw;
    }
    
    .section7-category-icon {
        font-size: 4vw;
        width: 6vw;
        height: 6vw;
    }
    
    .section7-category-text {
        font-size: 3vw;
    }
}

/* 大屏手機適配 (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .section1 {
        height: 38vh; /* 大屏手機使用中等高度 */
        min-height: 240px;
        padding: 12px 5vw;
        background-size: 100% 100%; /* 保持背景圖完全填充 */
        background-position: center center;
        background-repeat: no-repeat;
        position: relative; /* 設置為相對定位，作為絕對定位的參考點 */
    }
    .section2 {
        background: rgba(220, 236, 252, 1); /* 移動端使用漸變背景 */
        height: 58vh; /* 大屏手機使用中等高度 */
        min-height: 240px;
        padding: 12px 5vw;
        background-size: 100% 100%; /* 保持背景圖完全填充 */
        background-position: center center;
        background-repeat: no-repeat;
        position: absolute !important; /* 強制絕對定位，覆蓋任何 relative 設置 */
        top: 0%;
        left: 0;
        right: 0;
        z-index: 10;
    }
    .section2Header{
        margin-top: 1vh;
        font-size: 1.5vw;
        padding:0.2vh 1vw;
        flex-direction: column;
    }
    
    .labaImg{
        width: 4vw;
        height: 4vw;
    }
    .rightImg{
        width: 3vw;
        height: 3vw;
        margin-left: 1vw;
    }
    .section2HeaderTwo{
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 2vh;
        padding: 2vw;
    }
    .twoTwoLeft{
        width: 100%;
        height: 20vh;
    }
    .twoTwoLeftImg{
        width: 100%;
        height: 150px;
        object-fit: cover;
    }
    .twoTwoLeftFirst{
        font-size:2vw;
    }
    .twoTwoRight{
        width: 100%;
        height: auto;
        min-height: 180px;
    }
    .tab-button{
        font-size: 1.6vw;
    }
    .news-text{
        font-size: 1.5vw;
    }
    .news-item:hover .news-text{
        font-size: 1.6vw;
    }
    .news-date{
        font-size: 1.2vw;
    }
}

/* 橫屏手機適配 */
@media (max-width: 768px) and (orientation: landscape) {
    .section1 {
        height: 30vh; /* 橫屏時使用較小高度 */
        min-height: 150px;
        padding: 6px 4vw;
        background-size: 100% 100%; /* 保持背景圖完全填充 */
        background-position: center center;
        background-repeat: no-repeat;
        position: relative; /* 設置為相對定位，作為絕對定位的參考點 */
    }
    .section2 {
        background: rgba(220, 236, 252, 1); /* 移動端使用漸變背景 */
        height: 50vh; /* 橫屏時使用較小高度 */
        min-height: 150px;
        padding: 6px 4vw;
        background-size: 100% 100%; /* 保持背景圖完全填充 */
        background-position: center center;
        background-repeat: no-repeat;
        position: absolute !important; /* 強制絕對定位，覆蓋任何 relative 設置 */
        top: 0%;
        left: 0;
        right: 0;
        z-index: 10;
    }
    .section2Header{
        margin-top: 1vh;
        font-size: 1.5vw;
        padding:0.2vh 1vw;
        flex-direction: column;
    }
    
    .labaImg{
        width: 4vw;
        height: 4vw;
    }
    .rightImg{
        width: 3vw;
        height: 3vw;
        margin-left: 1vw;
    }
    .section2HeaderTwo{
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 2vh;
        padding: 2vw;
    }
    .twoTwoLeft{
        width: 100%;
        height: 20vh;
    }
    .twoTwoLeftImg{
        width: 100%;
        height: 150px;
        object-fit: cover;
    }
    .twoTwoLeftFirst{
        font-size:2vw;
    }
    .twoTwoRight{
        width: 100%;
        height: auto;
        min-height: 180px;
    }
    .tab-button{
        font-size: 1.6vw;
    }
    .news-text{
        font-size: 1.5vw;
    }
    .news-item:hover .news-text{
        font-size: 1.6vw;
    }
    .news-date{
        font-size: 1.2vw;
    }
    
    /* Section6 移动端适配 */
    .section6 {
        padding: 0 4vw 4vh;
    }
    
    .section6-content {
        flex-direction: column;
        gap: 4vh;
        padding: 2vh 0;
        min-height: auto;
    }
    
    .section6-main-card {
        flex: none;
        min-height: auto;
        padding: 3vh 4vw;
        width: 100%;
        max-width: 90vw;
        margin: 0 auto;
    }
    
    .section6-card-title {
        font-size: 4vw;
        margin-bottom: 3vh;
    }
    
    .section6-cities-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2vw;
        margin-bottom: 4vh;
    }
    
    .city-button {
        padding: 1.5vh 1vw;
        font-size: 2.5vw;
        min-height: 5vh;
        border-radius: 6px;
    }
    
    .section6-more-button {
        padding: 2vh 3vw;
        font-size: 2.5vw;
        width: auto;
        min-width: 100px;
    }
    
    .more-arrow {
        width: 50px;
        height: 20px;
    }
    
    .section6-side-cards {
        flex: none;
        flex-direction: row;
        gap: 2vw;
        width: 100%;
        justify-content: space-between;
    }
    
    .section6-side-card {
        flex: 1;
        min-height: 12vh;
        padding: 2.5vh 1.5vw;
        width: auto;
    }
    
    .side-card-title {
        font-size: 3vw;
    }
}