/* ==========================================================================
   基础样式重置和全局样式
   ========================================================================== */

/* SVG图标样式 */
.icon-svg {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* 常用场景SVG图标样式 */
.svg-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 8px;
    fill: #3e67ff;
}

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

body {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

/* ==========================================================================
   Banner区域样式
   ========================================================================== */

.banner {
    width: 100%;
    height: 357px;
    background-color: #ECF6FF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.banner-text {
    width: 300px;
    height: 85px;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    font-weight: bold;
    color: #296CEF;
    background-color: transparent;
}

.banner-image {
    width: 470px;
    height: 360px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.banner-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}



 /* 标题栏样式 */
 .title-bar {
     width: 100%;
     height: 91px;
     background-image: url('ylws_title1.png');
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
     margin: 20px 0;
 }

 /* 常见问题标题栏样式 */
 .faq-title-bar {
     width: 100%;
     height: 91px;
     background-image: url('ylws_title2.png');
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
     margin: 20px 0;
 }

 .title-text {
     display: none;
 }

 /* 页面内容样式 */
 .content {
     width: 100%;
     max-width: 1200px;
     margin: 40px auto;
     padding: 0 20px;
 }

 .container {
     width: 1200px;
     height: 350px;
     margin: 0 auto;
     display: flex;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     overflow: hidden;
 }

 /* 左侧轮播区域 */
 .carousel-section {
     width: 600px;
     height: 100%;
     background-color: #fff;
     position: relative;
     overflow: hidden;
 }



 /* 右侧列表区域 */
 .list-section {
     width: 1200px;
     height: 100%;
     background-color: #fff;
     padding: 12px;
     overflow-y: auto;
 }

 .list-title {
     font-size: 24px;
     color: #333;
     margin-bottom: 15px;
     padding-bottom: 10px;
     border-bottom: 2px solid #3498db;
 }

 .news-list {
     list-style-type: none;
 }

 .news-item {
     padding: 8px 0;
     border-bottom: 1px solid #eee;
     display: flex;
     align-items: center;
       width: 50%;
    float: left;
 }



 .news-date {
     background-color: #3498db;
     color: white;
     padding: 5px 10px;
     border-radius: 4px;
     font-size: 14px;
     margin-right: 15px;
     min-width: 80px;
     text-align: center;
 }

 .news-title {
     color: #333;
     font-size: 16px;
     flex: 1;
     text-decoration: none;
     transition: color 0.3s;
 }

 .news-title:hover {
     color: #3498db;
 }

 /* 更多按钮样式 */
 .more-button-container {
     text-align: center;
     padding-top: 16px;
       clear: both;
 }

 .more-button {
     display: inline-block;
     padding: 10px 30px;
     background-color: #3498db;
     color: white;
     text-decoration: none;
     border-radius: 4px;
     font-weight: bold;
     transition: background-color 0.3s;
 }

 .more-button:hover {
     background-color: #2980b9;
 }






 /* 常用场景板块 */
 .common-scene {
     width: 1300px;
     margin: 0 auto;
     min-height: 400px;
     background-image: url('cycj_bg.png');
     background-position: center 40px;
     /* 背景向下偏移20px */
     background-repeat: no-repeat;

     overflow: hidden;

     padding: 10px 40px;
     position: relative;
 }



 .scene-content {
     position: relative;
     z-index: 1;
 }

 .scene-title {
     font-size: 48px;
     font-weight: bold;
     text-align: center;
     margin-bottom: 40px;
 }

 .scene-title span.common {
     color: #000;
     /* 常用 - 黑色 */
 }

 .scene-title span.scene {
     color: #3e67ff;
     /* 场景 - 蓝色 */
 }



 /* 主选项卡样式 */
 .main-tabs {
     display: flex;
     background: #f0f5ff;
     border-bottom: 1px solid #e0e5ff;
 }

 .main-tab-btn {
     flex: 1;
     padding: 15px 20px;
     background: none;
     border: none;
     font-size: 18px;
     font-weight: bold;
     color: #3e67ff;
     cursor: pointer;
     transition: all 0.3s;
     text-align: center;
 }

 .main-tab-btn.active {
     background: white;
     color: #3e67ff;
     border-bottom: 3px solid #3e67ff;
 }

 .main-tab-btn:hover:not(.active) {
     background: #e6edff;
 }

 .main-tab-content {
     padding: 0;
 }

 .main-tab-pane {
     display: none;
     min-height: 500px;
 }

 .main-tab-pane.active {
     display: block;
 }

 /* 子选项卡样式 */
 .sub-tabs-container {
     border-bottom: 1px solid #eee;
 }

 .sub-tabs {
     display: flex;
     overflow-x: auto;
     background: #f9f9f9;
 }

 .sub-tab-btn {
     padding: 12px 25px;
     background: none;
     border: none;
     font-size: 16px;
     color: #666;
     cursor: pointer;
     white-space: nowrap;
     transition: all 0.3s;
     border-bottom: 2px solid transparent;
 }

 .sub-tab-btn.active {
     color: #3e67ff;
     border-bottom: 2px solid #3e67ff;
     background: white;
 }

 .sub-tab-btn:hover:not(.active) {
     color: #3e67ff;
     background: #f0f5ff;
 }

 .sub-tab-content {
     padding: 30px;
 }

 .sub-tab-pane {
     display: none;
     animation: fadeIn 0.5s;
 }

 .sub-tab-pane.active {
     display: block;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 /* 内容样式 */
 .content-section {
     margin-bottom: 25px;
 }

 .content-section h3 {
     color: #3e67ff;
     margin-bottom: 15px;
     padding-bottom: 10px;
     border-bottom: 1px solid #f0f5ff;
 }

 .content-section p {
     margin-bottom: 15px;
     text-align: justify;
 }

 .sub-section {
     margin-left: 20px;
     margin-bottom: 20px;
 }

 .sub-section h4 {
     color: #555;
     margin-bottom: 10px;
 }

 .contact-info {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     margin-top: 20px;
 }

 .contact-item {
     flex: 1;
     min-width: 250px;
     background: #f9f9f9;
     padding: 15px;
     border-radius: 5px;
     border-left: 4px solid #3e67ff;
 }

 .contact-item h4 {
     color: #3e67ff;
     margin-bottom: 10px;
 }






 @media (max-width: 768px) {


     .scene-title {
         font-size: 36px;
     }


 }

 @media (max-width: 480px) {


     .scene-title {
         font-size: 28px;
     }

     .scene-icon {
         width: 60px;
         height: 60px;
         font-size: 28px;
     }

 }




 /* 常用平台容器 */
 .common-platforms-container {
     width: 100%;
     max-width: 1200px;
     margin: 20px auto;
     background: white;
     border-radius: 10px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     padding: 20px;
 }

 /* 平台网格布局 */
 .platforms-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
 }

 .platform-item {
     width: 100%;
     height: 100px;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
     background: linear-gradient(135deg, #3e67ff, #2a4fd8);
 }

 .platform-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
     background: linear-gradient(135deg, #2a4fd8, #1e3bb3);
 }

 .platform-link-box {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 18px;
     font-weight: bold;
     text-align: center;
     padding: 5px;
     text-decoration: none;
     line-height: 1.2;
 }

 /* 常用平台响应式适配 */
 @media (max-width: 1200px) {
     .common-platforms-container {
         width: 95%;
         margin: 20px auto;
     }
 }

 @media (max-width: 1000px) {
     .platforms-grid {
         flex-wrap: wrap;
         justify-content: center;
     }

     .platform-item {
         width: 48%;
         max-width: 400px;
         margin-bottom: 20px;
     }
 }

 @media (max-width: 768px) {
     .common-platforms-container {
         width: 95%;
         padding: 20px 15px;
         margin: 15px auto;
     }

     .platforms-grid {
         flex-direction: column;
         align-items: center;
         gap: 15px;
     }

     .platform-item {
         width: 100%;
         max-width: 100%;
         height: 100px;
         margin-bottom: 0;
     }

     .platform-item img {
         width: 100%;
         height: 100px;
         object-fit: contain;
         padding: 10px;
     }
 }

 @media (max-width: 480px) {
     .common-platforms-container {
         padding: 15px 10px;
         margin: 10px auto;
         border-radius: 8px;
     }

     .platforms-grid {
         gap: 10px;
     }

     .platform-item {
         height: 80px;
     }

     .platform-item img {
         height: 80px;
         padding: 8px;
     }
 }

 @media (max-width: 320px) {
     .common-platforms-container {
         padding: 10px 8px;
     }

     .platform-item {
         height: 70px;
     }

     .platform-item img {
         height: 70px;
         padding: 5px;
     }
 }

 /* 移动端触摸优化 */
 @media (hover: none) and (pointer: coarse) {
     .platform-item {
         min-height: 44px;
     }

     .platform-item:active {
         transform: scale(0.98);
         opacity: 0.9;
     }
 }

 /* 横屏模式优化 */
 @media (max-width: 768px) and (orientation: landscape) {
     .platforms-grid {
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: space-around;
     }

     .platform-item {
         width: 48%;
         max-width: 200px;
         height: 60px;
     }

     .platform-item img {
         height: 60px;
         padding: 5px;
     }
 }

 /* 办事板块容器 */
 .affairs-section {
     width: 100%;
     background-image: url('zxbs_bg.png');
     background-size: cover;
     background-position: center;
     padding: 60px 0;
 }

 .affairs-container {
     width: 1200px;
     margin: 0 auto;
     display: flex;
     gap: 30px;
 }

 /* 左侧在线办事 */
 .online-affairs {
     flex: 1;
     background: rgba(255, 255, 255, 0.9);
     border-radius: 10px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     backdrop-filter: blur(5px);
 }

 .section-header {
     height: 48px;
     /* 高度增加 */
     background: #3e67ff;
     color: white;
     font-size: 24px;
     /* 标题文字增大 */
     font-weight: bold;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 20px;
     line-height: 48px;
     /* 行高增加 */
 }

 .more-link {
     color: white;
     font-size: 14px;
     text-decoration: none;
 }

 .affairs-links {
     padding: 10px 20px;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 10px;
 }

 .affair-link {
     font-size: 20px;
     color: #3e67ff;
     text-decoration: none;
     padding: 15px 0;
     /* 增加垂直内边距 */
     border-bottom: 1px solid #f0f5ff;
     transition: all 0.3s;
     display: flex;
     align-items: center;
     min-height: 70px;
     /* 最小高度增加 */
     line-height: 1.5;
     /* 行高调整 */
 }

 .affair-link:hover {
     color: #2a4fd8;
     transform: translateX(5px);
 }

 .affair-link .icon-svg {
     margin-right: 15px;
     width: 28px;
     height: 28px;
     filter: brightness(0) saturate(100%) invert(39%) sepia(98%) saturate(748%) hue-rotate(183deg) brightness(94%) contrast(91%);
 }

 /* 右侧系列解读 */
 .series-interpretation {
     flex: 1;
     background: rgba(255, 255, 255, 0.9);
     border-radius: 10px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     backdrop-filter: blur(5px);
 }





 @media (max-width: 900px) {
     .affairs-container {
         flex-direction: column;
     }

     .affairs-links {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 768px) {
     .affair-link {
         font-size: 18px;
     }

     .interpretation-carousel-container {
         height: 300px;
     }

     .section-header {
         font-size: 22px;
         height: 42px;
         line-height: 42px;
     }
 }

 @media (max-width: 480px) {
     .affairs-section {
         padding: 30px 0;
     }

     .section-header {
         font-size: 20px;
         height: 40px;
         line-height: 40px;
     }

     .affair-link {
         font-size: 16px;
         min-height: 60px;
     }

     .interpretation-carousel-item {
         width: 120px;
         height: 195px;
     }
 }

 /* 在线地图板块 */
 .online-maps {
     width: 1300px;
     margin: 0 auto;
     min-height: 400px;
     background-image: url('zxdt_bg.png');
     background-position: center 40px;
     /* 背景向下偏移20px */
     background-repeat: no-repeat;
     background-size: cover;

     overflow: hidden;

     padding: 10px 40px;
     position: relative;
 }

 .maps-content {
     position: relative;
     z-index: 1;
 }

 .maps-title {
     font-size: 48px;
     font-weight: bold;
     text-align: center;
     margin-bottom: 40px;
 }

 .maps-title span.online {
     color: #000;
     /* 在线 - 黑色 */
 }

 .maps-title span.maps {
     color: #3e67ff;
     /* 地图 - 蓝色 */
 }

 /*在线地图*/
 .convenience-map-section {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     background: white;
     border-radius: 10px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     overflow: hidden;
 }

 /* 地图容器 - 移除flex布局 */
 .map-container {
     min-height: 600px;
     position: relative;
 }

 /* 左侧学校列表 - 宽度调整为350px */
 .school-list-container {
     width: 350px;
     background: #f8f9ff;
     border-right: 1px solid #e0e5ff;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     z-index: 10;
 }

 .school-tabs {
     display: flex;
     background: #f0f5ff;
     border-bottom: 1px solid #e0e5ff;
 }

 /* 调整选项卡样式，确保文字在一行显示 */
 .school-tab {
     flex: 1;
     min-width: 70px;
     padding: 12px 5px;
     background: none;
     border: none;
     font-size: 13px;
     font-weight: bold;
     color: #3e67ff;
     cursor: pointer;
     transition: all 0.3s;
     text-align: center;
     white-space: nowrap;
 }

 .school-tab.active {
     background: white;
     color: #3e67ff;
     border-bottom: 3px solid #3e67ff;
 }

 .school-tab:hover:not(.active) {
     background: #e6edff;
 }

 .school-list {
     height: calc(100% - 48px);
     /* 减去选项卡高度 */
     overflow-y: auto;
     padding: 15px;
 }

 /* 修复选项卡内容显示问题 */
 .school-list-content {
     display: none;
 }

 .school-list-content.active {
     display: block;
 }

 .school-item {
     padding: 12px 15px;
     border-bottom: 1px solid #eee;
     cursor: pointer;
     transition: all 0.3s;
     display: flex;
     align-items: center;
 }

 .school-item img {
     width: 24px;
     height: 24px;
     margin-right: 10px;
     filter: brightness(0) saturate(100%) invert(39%) sepia(98%) saturate(748%) hue-rotate(183deg) brightness(94%) contrast(91%);
 }

 .school-item:hover {
     background: #f0f5ff;
     transform: translateX(5px);
 }

 .school-item .icon-svg {
     margin-right: 10px;
     width: 18px;
     height: 18px;
 }

 .school-name {
     font-size: 16px;
     color: #333;
     font-weight: 500;
 }

 .school-address {
     font-size: 13px;
     color: #666;
     margin-top: 5px;
 }

 .school-phone {
     font-size: 13px;
     color: #666;
     margin-top: 3px;
 }

 /* 右侧地图区域 */
 .map-display {
     position: absolute;
     top: 0;
     left: 350px;
     /* 左侧列表宽度 */
     right: 0;
     bottom: 0;
 }

 #map-container {
     width: 100%;
     height: 100%;
 }

 /* 带箭头的提示框样式 */
 .map-tip {
     position: absolute;
     background: rgba(255, 255, 255, 0.95);
     padding: 15px;
     border-radius: 8px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     z-index: 1000;
     max-width: 300px;
     display: none;
     transform: translate(-50%, -100%);
     top: 0;
     left: 0;
 }

 .map-tip::after {
     content: '';
     position: absolute;
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
     border-width: 10px 10px 0;
     border-style: solid;
     border-color: rgba(255, 255, 255, 0.95) transparent transparent;
 }

 .tip-title {
     font-size: 18px;
     font-weight: bold;
     color: #3e67ff;
     margin-bottom: 5px;
 }

 .tip-address {
     font-size: 14px;
     color: #555;
 }

 .tip-phone {
     font-size: 14px;
     color: #555;
 }

 .close-tip {
     position: absolute;
     top: 10px;
     right: 10px;
     background: none;
     border: none;
     font-size: 16px;
     cursor: pointer;
     color: #999;
 }



 @media (max-width: 900px) {
     .school-list-container {
         position: relative;
         width: 100%;
         height: 300px;
         border-right: none;
         border-bottom: 1px solid #e0e5ff;
     }

     .map-display {
         position: relative;
         height: 400px;
         left: 0;
     }

     /* 确保地图容器在移动设备上有高度 */
     #map-container {
         height: 100%;
     }
 }

 @media (max-width: 768px) {




     .mpas-title {
         font-size: 36px;
     }



     .online-maps {
         padding: 10px 20px;
     }



     .main-tabs {
         flex-direction: column;
     }

     .sub-tabs {
         flex-wrap: wrap;
     }

     .sub-tab-btn {
         flex: 1;
         min-width: 120px;
     }

     .sub-tab-content {
         padding: 20px;
     }

     .contact-info {
         flex-direction: column;
     }

 }

 @media (max-width: 600px) {
     .school-tab {
         font-size: 12px;
         padding: 12px 3px;
     }

     .school-item {
         padding: 10px;
     }

     .section-header h2 {
         font-size: 26px;
     }
 }

 @media (max-width: 480px) {
     .banner-text {
         font-size: 28px;
     }

     .title-text {
         font-size: 28px;
     }

     .title-bar {
         height: 70px;
     }

     .banner-container {
         padding: 0 20px;
     }

     .scene-title {
         font-size: 28px;
     }

     .maps-title {
         font-size: 28px;
     }

     .scene-icon {
         width: 60px;
         height: 60px;
         font-size: 28px;
     }

     .main-tab-btn {
         padding: 12px 15px;
         font-size: 16px;
     }

     .sub-tab-btn {
         padding: 10px 15px;
         font-size: 14px;
     }
 }

 /*常见问题*/

 .faq-section {
     width: 100%;
     max-width: 1200px;
     background: white;
     border-radius: 10px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     padding: 50px;
     margin: 20px auto;
 }

 .section-header {
     text-align: center;
 }

 .section-header h2 {
     font-size: 36px;
     color: #3e67ff;
     margin-bottom: 15px;
 }

 .section-header p {
     font-size: 18px;
     color: #666;
 }

 .faq-container {
     margin-bottom: 40px;
 }

 .faq-item {
     margin-bottom: 30px;
     padding-bottom: 30px;
     border-bottom: 1px solid #f0f5ff;
 }

 .faq-item:last-child {
     border-bottom: none;
 }

 .question {
     display: flex;
     align-items: flex-start;
     margin-bottom: 15px;
 }

 .question-link {
     text-decoration: none;
     display: flex;
     align-items: flex-start;
     width: 100%;
 }

 .question-link:hover .question-text {
     color: #3e67ff;
 }

 .question-icon {
     width: 32px;
     height: 32px;
     background: #3e67ff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 15px;
     flex-shrink: 0;
 }

 .question-icon .icon-svg {
     width: 16px;
     height: 16px;
     filter: brightness(0) invert(1);
 }

 .question-text {
     font-size: 20px;
     font-weight: bold;
     color: #333;
     transition: color 0.3s;
 }

 .answer {
     display: flex;
     align-items: flex-start;
 }

 .answer-icon {
     width: 32px;
     height: 32px;
     background: #2ecc71;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 15px;
     flex-shrink: 0;
 }

 .answer-icon .icon-svg {
     width: 16px;
     height: 16px;
     filter: brightness(0) invert(1);
 }

 .answer-text {
     font-size: 16px;
     color: #555;
     line-height: 1.7;
     /* 限制为2行，超出部分显示省略号 */
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .more-button-container {
     text-align: center;
 }

 .more-button {
     display: inline-block;
     padding: 12px 40px;
     background: #3e67ff;
     color: white;
     font-size: 18px;
     font-weight: bold;
     text-decoration: none;
     border-radius: 30px;
     transition: all 0.3s;
     box-shadow: 0 4px 15px rgba(62, 103, 255, 0.3);
 }

 .more-button:hover {
     background: #2a4fd8;
     transform: translateY(-3px);
     box-shadow: 0 6px 20px rgba(62, 103, 255, 0.4);
 }

 /* 响应式设计 */
 @media (max-width: 768px) {
     .faq-section {
         padding: 30px;
     }

     .section-header h2 {
         font-size: 28px;
     }

     .question-text {
         font-size: 18px;
     }

     .answer-text {
         font-size: 15px;
     }
 }

 @media (max-width: 480px) {
     .faq-section {
         padding: 20px;
     }

     .section-header h2 {
         font-size: 24px;
     }

     .question-icon,
     .answer-icon {
         width: 28px;
         height: 28px;
     }

     .more-button {
         padding: 10px 30px;
         font-size: 16px;
     }
 }

 /*快捷访问*/

 .quick-links-section {
     width: 100%;
     max-width: 1200px;
     background: white;
     border-radius: 10px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     padding: 50px;
     margin: 20px auto;
 }

 .section-header {
     text-align: center;
 }

 .section-header h2 {
     font-size: 32px;
     color: #3e67ff;
     margin-bottom: 15px;
 }

 .section-header p {
     font-size: 18px;
     color: #666;
 }

 .links-container {
     display: flex;
     justify-content: space-between;
     gap: 20px;
 }

 .link-item {
     flex: 1;
     height: 130px;
     border-radius: 8px;
     overflow: hidden;
     position: relative;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
 }

 .link-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
 }

 .link-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .link-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(62, 103, 255, 0.7);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .link-item:hover .link-overlay {
     opacity: 1;
 }

 .link-text {
     color: white;
     font-size: 22px;
     font-weight: bold;
     text-align: center;
     padding: 0 20px;
 }

 /* 响应式设计 */
 @media (max-width: 900px) {
     .links-container {
         flex-direction: column;
     }

     .link-item {
         height: 150px;
     }

     .quick-links-section {
         padding: 30px;
     }
 }

 @media (max-width: 600px) {
     .section-header h2 {
         font-size: 28px;
     }

     .section-header p {
         font-size: 16px;
     }

     .link-text {
         font-size: 18px;
     }
 }



/* ==========================================================================
   移动端响应式适配
   ========================================================================== */

/* 移动端基础布局调整 */
@media (max-width: 768px) {
    /* 容器宽度调整 */
    .container {
        width: 100%;
        flex-direction: column;
        height: auto;
    }
    
    /* 轮播区域调整 */
    .carousel-section {
        width: 100%;
        height: 250px;
    }
    
    /* 列表区域调整 */
    .list-section {
        width: 100%;
        height: auto;
    }
    
    /* 常用场景板块调整 */
    .common-scene {
        width: 100%;
        padding: 10px 20px;
    }
    
    /* 主选项卡调整为垂直布局 */
    .main-tabs {
        flex-direction: column;
    }
    
    .main-tab-btn {
        padding: 12px 15px;
        font-size: 16px;
    }
    
    /* 子选项卡调整为可滚动 */
    .sub-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 10px;
    }
    
    .sub-tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* 常用平台网格调整 */
    .platforms-grid {
        flex-direction: column;
        align-items: center;
    }
    
    .platform-item {
        width: 100%;
        max-width: 400px;
        margin-bottom: 15px;
    }
    
    /* 办事板块调整 */
    .affairs-container {
        width: 100%;
        flex-direction: column;
    }
    
    .affairs-links {
        grid-template-columns: 1fr;
    }
    
    /* 在线地图调整 */
    .online-maps {
        width: 100%;
        padding: 10px 20px;
    }
    
    .map-container {
        flex-direction: column;
    }
    
    .school-list-container {
        width: 100%;
        height: 300px;
        border-right: none;
        border-bottom: 1px solid #e0e5ff;
    }
    
    .map-display {
        width: 100%;
        height: 400px;
    }
    
    /* 常见问题调整 */
    .faq-section {
        width: 100%;
        padding: 30px 20px;
    }
    
    .question-text {
        font-size: 18px;
    }
    
    .answer-text {
        font-size: 15px;
    }
    
    /* 快捷访问调整 */
    .quick-links-section {
        width: 100%;
        padding: 30px 20px;
    }
    
    .links-container {
        flex-direction: column;
    }
    
    .link-item {
        height: 150px;
        margin-bottom: 15px;
    }
    
    /* 系列解读轮播图调整 */
    .image-carousel-container {
        height: 250px;
        padding: 10px;
    }
    
    .carousel-item {
        width: 100%;
        height: 250px;
        font-size: 24px;
    }
    
    .carousel-track {
        width: 600%; /* 100% * 6 */
    }
    
    .carousel-control {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }
}

/* 小屏幕手机适配 */
@media (max-width: 480px) {
    /* Banner区域调整 */
    .banner {
        height: 200px;
    }
    
    .banner-container {
        flex-direction: column;
        text-align: center;
    }
    
    .banner-text {
        width: 100%;
        height: auto;
        font-size: 32px;
        margin: 10px 0;
    }
    
    .banner-image {
        width: 100%;
        height: 120px;
        margin: 10px 0;
    }
    
    /* 标题栏调整 */
    .title-bar {
        height: 60px;
        margin: 15px 0;
    }
    
    .title-text {
        font-size: 28px;
    }
    
    /* 轮播图指示器调整 */
    .carousel-controls {
        bottom: 10px;
    }
    
    .carousel-indicator {
        width: 8px;
        height: 8px;
    }
    
    /* 新闻列表调整 */
    .news-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .news-date {
        margin-right: 0;
        margin-bottom: 8px;
        align-self: flex-start;
    }
    
    /* 选项卡内容调整 */
    .sub-tab-content {
        padding: 15px;
    }
    
    .content-section h3 {
        font-size: 18px;
    }
    
    .content-section p {
        font-size: 14px;
    }
    
    /* 地图提示框调整 */
    .map-tip {
        max-width: 250px;
        padding: 10px;
    }
    
    .tip-title {
        font-size: 16px;
    }
    
    .tip-address {
        font-size: 12px;
    }
    
    /* 更多按钮调整 */
    .more-button {
        padding: 10px 25px;
        font-size: 16px;
    }
    
    /* 系列解读轮播图进一步调整 */
    .image-carousel-container {
        height: 200px;
    }
    
    .carousel-item {
        height: 200px;
        font-size: 20px;
    }
    
    .carousel-indicators {
        bottom: 5px;
    }
    
    .indicator {
        width: 8px;
        height: 8px;
    }
}

/* 超小屏幕适配 */
@media (max-width: 320px) {
    .banner-text {
        font-size: 28px;
    }
    
    .title-text {
        font-size: 24px;
    }
    
    .scene-title,
    .maps-title {
        font-size: 24px;
    }
    
    .main-tab-btn {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    .sub-tab-btn {
        font-size: 12px;
        padding: 8px 12px;
    }
    
    .image-carousel-container {
        height: 180px;
    }
    
    .carousel-item {
        height: 180px;
        font-size: 18px;
    }
}

/* 横屏模式适配 */
@media (max-height: 500px) and (orientation: landscape) {
    .banner {
        height: 150px;
    }
    
    .banner-text {
        font-size: 28px;
    }
    
    .container {
        height: 300px;
    }
    
    .carousel-section {
        height: 100%;
    }
    
    .list-section {
        height: 100%;
    }
    
    .image-carousel-container {
        height: 280px;
    }
    
    .carousel-item {
        height: 280px;
    }
}

/* 高分辨率屏幕适配 */
@media (min-width: 1400px) {
    .container {
        max-width: 1300px;
    }
    
    .common-scene,
    .online-maps {
        max-width: 1400px;
    }
    
    .affairs-container {
        max-width: 1300px;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .carousel-control,
    .carousel-indicator,
    .main-tab-btn,
    .sub-tab-btn,
    .school-tab,
    .school-item,
    .affair-link,
    .link-item {
        min-height: 44px; /* 最小触摸目标尺寸 */
    }
    
    .carousel-control {
        width: 44px;
        height: 44px;
    }
    
    .carousel-indicator {
        width: 12px;
        height: 12px;
    }
}

/* ==========================================================================
   移动端触摸交互样式
   ========================================================================== */

/* 触摸激活状态 */
.touch-active {
    transform: scale(0.95);
    opacity: 0.8;
    transition: all 0.1s ease;
}

/* 移动设备特定样式 */
.mobile-device {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.mobile-device a,
.mobile-device button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* 移动端布局 */
.mobile-layout .container {
    margin: 10px auto;
}

.mobile-layout .banner {
    margin-bottom: 15px;
}

.mobile-layout .title-bar {
    margin: 15px 0;
}

/* 横屏模式优化 */
.landscape .banner {
    height: 120px;
}

.landscape .banner-text {
    font-size: 24px;
}

.landscape .container {
    height: 250px;
}

.landscape .carousel-section {
    height: 100%;
}

.landscape .list-section {
    height: 100%;
}

.landscape .image-carousel-container {
    height: 200px;
}

.landscape .carousel-item {
    height: 200px;
    font-size: 20px;
}

/* 防止文本选择 */
.mobile-device {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 优化滚动性能 */
.mobile-layout .school-list,
.mobile-layout .news-list {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/* 移动端表单元素优化 */
.mobile-layout input,
.mobile-layout select,
.mobile-layout textarea {
    font-size: 16px; /* 防止iOS缩放 */
}

/* 高DPI屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .carousel-control,
    .carousel-indicator,
    .indicator {
        border: 0.5px solid rgba(255, 255, 255, 0.3);
    }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
    .mobile-device {
        background-color: #1a1a1a;
        color: #ffffff;
    }
    
    .mobile-device .banner {
        background-color: #2d3748;
    }
    
    .mobile-device .title-bar {
        background-color: #4a5568;
    }
}

/* 减少动画效果（针对有晕动症的用户） */
@media (prefers-reduced-motion: reduce) {
    .carousel-inner,
    .carousel-track {
        transition: none;
    }
    
    .carousel-item:hover,
    .link-item:hover,
    .platform-item:hover {
        transform: none;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .carousel-control {
        background: #000000;
        border: 2px solid #ffffff;
    }
    
    .carousel-indicator.active,
    .indicator.active {
        background: #ffffff;
        border: 1px solid #000000;
    }
}

/* 超大文本模式支持 */
@media (prefers-reduced-data: reduce) {
    .banner-image img {
        quality: 80%;
    }
    
    .link-item img {
        quality: 80%;
    }
}

/* Swiper轮播图样式 */
.swiper-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.swiper-wrapper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    font-weight: bold;
    text-align: center;
    position: relative;
    flex-shrink: 0;
}

.slide-content {
    z-index: 2;
    position: relative;
    padding: 20px;
}

.slide-content h3 {
    font-size: 24px;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.slide-content p {
    font-size: 18px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 轮播图链接样式 */
.slide-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
}

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

/* 底部内容样式 */
.slide-content-bottom {
    z-index: 2;
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    padding: 10px;
    text-align: center;
}

.slide-content-bottom h3 {
    font-size: 20px;
    margin: 0;
    line-height: 1.2;
    color: rgb(0, 0, 0);
}
/* Swiper分页器样式 */
.swiper-pagination {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 10;
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    background: white;
    transform: scale(1.2);
}

/* Swiper导航按钮样式 */
.swiper-button-next,
.swiper-button-prev {
    width: 40px;
    height: 40px;
    background: transparent;
    color: white;
    transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: transparent;
    color: #3e67ff;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 24px;
    font-weight: bold;
}

/* 移动端Swiper适配 */
@media (max-width: 768px) {
    .swiper-slide {
        font-size: 24px;
    }
    
    .slide-content h3 {
        font-size: 24px;
    }
    
    .slide-content p {
        font-size: 14px;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        width: 35px;
        height: 35px;
    }
    
    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .swiper-slide {
        font-size: 20px;
    }
    
    .slide-content h3 {
        font-size: 20px;
    }
    
    .slide-content p {
        font-size: 12px;
    }
    
    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }
}