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

        body {
            background-color: #F1F9FF;
            font-family: 'Source Han Sans CN', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            overflow-x: hidden;
        }

        /* 通用容器 */
        .whly_con {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
           /* padding: 0 15px;*/
        }

        .title_img {
            margin: 0 auto;
            text-align: center;
            margin-top: 47px;
            margin-bottom: 20px;
        }

        .title_img img {
            max-width: 100%;
            height: auto;
        }
        .introduce_bg{background: url(/uiFramework/commonResource/image/2026020520511137642.png)center  no-repeat;height: 566px;width: 1200px;position: relative;}
        .introduce_word{width: 1000px;position: absolute;top: 100px; right: 0;transform: translate(-9%);}

        .whly_introduce p {
            font-weight: bold;
            font-size: 24px;
            color: #000;
            line-height: 62px;
            text-indent: 50px;
        }

        .whly_seasons {
            margin-top: 35px;
            margin-bottom: 60px;
        }

        /* 标题样式 */
        .container {
            width: 100%;
            max-width: 1200px;
            text-align: center;
        }

        .title {
            font-size: 2.8rem;
            color: #2c3e50;
            margin-bottom: 50px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .title::after {
            content: '';
            display: block;
            width: 150px;
            height: 4px;
            background: linear-gradient(90deg, #3498db, #2ecc71);
            margin: 15px auto;
            border-radius: 2px;
        }

        /* 横排图片容器 - PC端布局 */
        .seasons-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            width: 100%;
            height: 500px;
            margin-bottom: 60px;
        }

        /* 所有季节项目 - PC端 */
        .seasons-row > * > .season-item {
            position: relative;
            cursor: pointer;
            overflow: hidden;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
            height: 100%;
            flex: 1;
            min-width: 0;
        }

        /* 大图状态 - PC端 */
        .seasons-row > * > .season-item.large-state {
            flex: 2 !important;
            z-index: 10;
        }

        /* 小图状态 - PC端 */
        .season-item.small-state {
            height: 500px;
            flex: 0.5;
        }

        /* 图片容器 */
        .image-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        /* 正常图片 */
        .normal-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
            pointer-events: none; /* 防止图片区域干扰触摸事件 */
        }

        .season-item:hover .normal-image {
            transform: scale(1.05);
        }

        /* 大图 */
        .large-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
          
        }

        .large-state .large-image {
            display: block;
            height: 500px;
        }

        .large-state .normal-image {
            display: none;
        }

        /* 大图的文字叠加 */
        .text-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            /*padding: 30px;*/
            opacity: 0;
            transition: all 0.5s ease;
            background: rgba(0, 0, 0, 0.4);
            display: none;

        }

        .large-state .text-overlay {
            opacity: 1;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
        }

        .season-desc {
            font-size: 1.6rem;
            line-height: 1.8;
            text-align: center;
        }

        .season-desc p {
            margin: 12px 0;
            opacity: 0;
            transform: translateY(15px);
            transition: all 0.4s ease;
            color: #fff;
        }

        .large-state .season-desc p {
            opacity: 1;
            transform: translateY(0);
        }

        /* 文字逐行显示动画延迟 */
        .spring.large-state .season-desc p:nth-child(1) { transition-delay: 0.2s; }
        .spring.large-state .season-desc p:nth-child(2) { transition-delay: 0.4s; }
        .spring.large-state .season-desc p:nth-child(3) { transition-delay: 0.6s; }
        .summer.large-state .season-desc p:nth-child(1) { transition-delay: 0.2s; }
        .summer.large-state .season-desc p:nth-child(2) { transition-delay: 0.4s; }
        .autumn.large-state .season-desc p:nth-child(1) { transition-delay: 0.2s; }
        .autumn.large-state .season-desc p:nth-child(2) { transition-delay: 0.4s; }
        .winter.large-state .season-desc p:nth-child(1) { transition-delay: 0.2s; }
        .winter.large-state .season-desc p:nth-child(2) { transition-delay: 0.4s; }

        .season-desc p a {
            color: #fff;
            font-size: 24px;
            text-decoration: none;
        }

        /* 季节标签 */
        .season-label {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 1.3rem;
            font-weight: bold;
            z-index: 5;
            min-width: 60px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .spring .season-label { background: rgba(46, 204, 113, 0.9); }
        .summer .season-label { background: rgba(231, 76, 60, 0.9); }
        .autumn .season-label { background: rgba(243, 156, 18, 0.9); }
        .winter .season-label { background: rgba(52, 152, 219, 0.9); }

        .large-state .season-label {
            bottom: 30px;
            font-size: 1.5rem;
            padding: 10px 25px;
        }

        /* ==================== 移动端适配样式 ==================== */
        
        /* 平板设备 (768px - 1024px) */
        @media screen and (max-width: 1024px) {
            .whly_con {
                /*padding: 0 20px;*/
            }
            
            .title {
                font-size: 2.2rem;
                margin-bottom: 40px;
            }
            
            .whly_introduce p {
                font-size: 20px;
                line-height: 48px;
                text-indent: 40px;
            }
            
            /* 平板端布局调整为两行两列 */
            .seasons-row {
                flex-wrap: wrap;
                height: auto;
                gap: 15px;
            }
            
            .seasons-row > * > .season-item {
                flex-basis: calc(50% - 10px);
                height: 350px;
            }
            
            .season-item.large-state {
                flex-basis: calc(100% - 10px) !important;
                height: 400px;
                order: -1; /* 将大图移到最前面 */
            }
            
            .large-state .large-image {
                height: 400px;
            }
            
            .season-desc {
                font-size: 1.4rem;
            }
            
            .season-desc p a {
                font-size: 20px;
            }
        }

        /* 手机设备 (小于768px) */
        @media screen and (max-width: 768px) {
            .title_img {
                margin-top: 30px;
                margin-bottom: 15px;
            }
            
            .title {
                font-size: 1.8rem;
                margin-bottom: 30px;
            }
            
            .title::after {
                width: 100px;
                height: 3px;
                margin: 10px auto;
            }
            
            .whly_introduce p {
                font-size: 18px;
                line-height: 36px;
                text-indent: 2em; /* 使用em单位替代固定像素 */
                /*padding: 0 10px;*/
                padding-right: 40px;
                padding-left: 10px;
                text-align: justify;
            }
            
            .whly_seasons {
                margin-top: 25px;
                margin-bottom: 40px;
            }
            
            /* 手机端布局调整为垂直堆叠 */
            .seasons-row {
                flex-direction: column;
                gap: 15px;
            }
            
            .seasons-row > * > .season-item {
                flex-basis: 100%;
                width: 100%;
                height: 300px;
            }
            
            .season-item.large-state {
                height: 350px;
            }
            
            .large-state .large-image {
                height: 350px;
            }
            
            .text-overlay {
                /*padding: 20px;*/
            }
            
            .season-desc {
                font-size: 1.2rem;
            }
            
            .season-desc p {
                margin: 8px 0;
            }
            
            .season-desc p a {
                font-size: 18px;
            }
            
            .season-label {
                font-size: 1.1rem;
                padding: 6px 15px;
                bottom: 10px;
            }
            
            .large-state .season-label {
                bottom: 20px;
                font-size: 1.3rem;
                padding: 8px 20px;
            }
        }

        /* 小手机设备 (小于480px) */
        @media screen and (max-width: 480px) {
            .title {
                font-size: 1.6rem;
            }
            
            .whly_introduce p {
                font-size: 16px;
                line-height: 30px;
            }
            
            .seasons-row > * > .season-item {
                height: 250px;
            }
            
            .season-item.large-state {
                height: 300px;
            }
            
            .large-state .large-image {
                height: 300px;
            }
            
            .season-desc {
                font-size: 1rem;
            }
            
            .season-desc p a {
                font-size: 16px;
            }
            
            .season-label {
                font-size: 1rem;
            }
        }

        /* 交互状态调整 - 移动端触摸友好 */
        @media (hover: none) and (pointer: coarse) {
            .season-item {
                cursor: default;
            }
            
            .season-item:active {
                transform: scale(0.98);
            }
            
            /* 移动端点击切换大图时，移除hover效果 */
            .season-item.large-state:active {
                transform: none;
            }
        }

        /* 横屏模式优化 */
        @media screen and (max-height: 600px) and (orientation: landscape) {
            .seasons-row > * > .season-item {
                height: 250px;
            }
            
            .season-item.large-state {
                height: 280px;
            }
            
            .large-state .large-image {
                height: 280px;
            }
        }

        /* 高DPI屏幕优化 */
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            .season-label {
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        }

        /* 暗色模式适配 */
        @media (prefers-color-scheme: dark) {
            body {
                background-color: #0a1929;
            }
            
            .whly_introduce p {
                color: #e0e0e0;
            }
            
            .title {
                color: #e0e0e0;
            }
            
            .season-item {
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            }
        }

        /* 打印样式 */
        @media print {
            .season-item {
                break-inside: avoid;
                box-shadow: none;
                border: 1px solid #ddd;
            }
        }
        
        /* 辅助功能增强 */
        .season-item:focus {
            outline: 3px solid #3498db;
            outline-offset: 2px;
        }
        
        /* 加载优化 */
        .image-container {
            background-color: #f0f0f0;
        }
   

  /* ============== 文字介绍部分移动端适配样式 ============== */

   /* 大屏幕平板 (1024px - 1199px) */
        @media screen and (max-width: 1199px) {
            .introduce_bg {
                width: 100%;
                height: 500px;
            }
            
            .introduce_word {
                width: 85%;
                top: 80px;
                transform: translate(-7%);
                padding: 30px;
            }
            
            .introduce_word p {
                font-size: 20px;
                line-height: 1.7;
                margin-bottom: 20px;
            }
            
            .introduce_word p:first-child {
                font-size: 20px;
                margin-bottom: 25px;
            }
        }
        
        /* 平板设备 (768px - 1023px) */
        @media screen and (max-width: 1023px) {
            body {
                padding: 15px;
            }
            
            .introduce_bg {
                height: 450px;
                border-radius: 10px;
            }
            
            .introduce_word {
                width: 90%;
                top: 60px;
                transform: translate(-5%);
                padding: 25px;
            }
            
            .introduce_word p {
                font-size: 18px;
                line-height: 1.6;
                margin-bottom: 18px;
            }
            
            .introduce_word p:first-child {
                font-size: 18px;
                margin-bottom: 22px;
                padding-left: 18px;
            }
            
            .introduce_word p:first-child::before {
                width: 5px;
                height: 70%;
            }
        }
        
        /* 手机设备 (576px - 767px) */
        @media screen and (max-width: 767px) {
            .introduce_bg {
                height: 400px;
                border-radius: 8px;
                background-position: 60% center; /* 调整背景图位置 */
            }
            
            /* 移动端改为全宽度居中布局 */
            .introduce_word {
                width: 95%;
                top: 50px;
                transform: translate(-2.5%);
                padding: 20px;
                text-align: left; /* 移动端左对齐更好阅读 */
            }
            
            /* 移动端使用更深的遮罩确保文字清晰 */
            .introduce_bg::before {
                background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
            }
            
            .introduce_word p {
                font-size: 16px;
                line-height: 1.6;
                margin-bottom: 16px;
                text-align: justify; /* 两端对齐提升可读性 */
            }
            
            .introduce_word p:first-child {
                font-size: 16px;
                margin-bottom: 20px;
                padding-left: 16px;
            }
            
            .introduce_word p:first-child::before {
                width: 4px;
                height: 60%;
            }
        }
        
        /* 小手机设备 (小于576px) */
        @media screen and (max-width: 575px) {
            body {
               padding: 0px;
            }
            
            .introduce_bg {
                height: 380px;
            }
            
            .introduce_word {
                width: 100%;
                top: 40px;
                transform: none;
                right: 0;
                left: 0;
                padding: 20px 10px;
                position: absolute;
            }
            
            .introduce_word p {
                font-size: 16px;
                line-height: 1.6;
                margin-bottom: 14px;
            }
            
            .introduce_word p:first-child {
                font-size: 16px;
                margin-bottom: 18px;
                padding-left: 14px;
            }
            
            .introduce_word p:first-child::before {
                width: 3px;
                height: 50%;
            }
        }
        
        /* 超小手机设备 (小于400px) */
        @media screen and (max-width: 400px) {
            .introduce_bg {
                height: 350px;
            }
            
            .introduce_word {
                top: 30px;
                padding: 16px 12px;
            }
            
            .introduce_word p {
                font-size: 16px;
                line-height: 1.6;
                margin-bottom: 12px;
            }
            
            .introduce_word p:first-child {
                font-size: 16px;
                margin-bottom: 16px;
                padding-left: 12px;
            }
        }
        
        /* 横屏模式优化 */
        @media screen and (max-height: 500px) and (orientation: landscape) {
            .introduce_bg {
                height: 300px;
            }
            
            .introduce_word {
                top: 30px;
                padding: 15px;
            }
            
            .introduce_word p {
                font-size: 16px;
                line-height: 1.6;
                margin-bottom: 10px;
            }
            
            .introduce_word p:first-child {
                font-size: 16px;
                margin-bottom: 15px;
            }
        }
        
        /* 暗色模式适配 */
        @media (prefers-color-scheme: dark) {
            body {
                background-color: #121212;
            }
            
            .introduce_bg {
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            }
        }
        
        /* 高对比度模式 */
        @media (prefers-contrast: high) {
            .introduce_bg::before {
                background: rgba(0, 0, 0, 0.9) !important;
            }
            
            .introduce_word p {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            }
        }
        
        /* 打印样式 */
        @media print {
            .introduce_bg {
                background: none !important;
                height: auto !important;
                box-shadow: none !important;
                border: 1px solid #ddd !important;
            }
            
            .introduce_bg::before {
                display: none !important;
            }
            
            .introduce_word {
                position: static !important;
                width: 100% !important;
                transform: none !important;
                color: #000 !important;
                padding: 20px !important;
                text-shadow: none !important;
            }
        }
 </style>