/* --- CSS Variables & Reset --- */
        :root {
            --brand-red: #e20313;
            --brand-dark: #A6151D;
            --gray-bg: #f2f2f2;
            --gray-text: #6b7280;
            --gray-title: #1f2937;
            --max-width: 1200px;
            --header-height: 80px;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* body {
            font-family: 'Noto Sans SC', sans-serif;
            color: var(--gray-title);
            line-height: 1.6;
            background-color: #fff;
            overflow-x: hidden;
        } */

        a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
        ul { list-style: none; }
        img { max-width: 100%; display: block; }
        
        .container {
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 20px;
        }
        .anchor{
            position: absolute;
            top: 0;
            left: 0;
        }
        @font-face {
          font-family: "D-DINCONDENSED-BOLD";
          src: url("../fonts/D-DINCONDENSED-BOLD.TTF");
        }
        /* --- Utilities --- */
        .flex { display: flex; }
        .flex-col { flex-direction: column; }
        .items-center { align-items: center; }
        .justify-between { justify-content: space-between; }
        .justify-center { justify-content: center; }
        .text-center { text-align: center; }
        .font-bold { font-weight: 700; }
        .text-brand-red { color: var(--brand-red); }
        .bg-gray { background-color: var(--gray-bg); }
        
        /* Section Title Styling */
        .section-header { margin-bottom: 3rem; }
        .section-header.white, .section-header.white h2{ color: #fff; }
        .section-header.white p.subtitle{ color: rgba(255,255,255,0.5);}
        .section-header h2 { text-align: center; font-size: 2.5rem; color: #111; font-weight: normal;}
        .section-header p.subtitle { text-align: center; font-size: 1.875rem; color: #999; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1.5rem;font-family: "D-DINCONDENSED-BOLD"; line-height: 1;}
        .section-header .desc { margin: 0 auto; color: #666; font-size: 1rem; line-height: 1.8; text-indent: 2em;}
        .section-header .desc span{ color: var(--brand-red); font-weight: bold;}
        .section-header .more { margin-top: 1.5rem;}
        .section-header .more a{ color: #fff; background: var(--brand-red); font-size: 1rem; padding: 8px 20px; display: inline-block;}
        .section-header .more a:hover{ text-decoration: underline;}



        /* --- Strategy Section (Complex Grid) --- */
        .strategy-row {
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
        }
        
        .s-label {
            background: var(--brand-red);
            color: #fff;
            width: 100%;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-weight: bold;
        }
        .s-label .num { height: 40px; margin-right: 5px;}
        .s-label .txt { font-size: 1.25rem;}

        .s-content {
            background: var(--gray-bg);
            flex: 1;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding: 20px 0;
            gap: 10px;
            border-left: 5px solid var(--brand-red);
            padding-left: 10px;
        }

        .s-card {
            display: flex; flex-direction: column; align-items: center; text-align: center;
            min-width: 50px;
        }
        .s-card:hover{ color: var(--brand-red);}
        .s-card i { font-size: 2rem; line-height: 1; margin-bottom: 5px; color: var(--brand-red); }
        .s-card span { font-size: 1rem; color: #666; }

        /* --- Strategic Positioning (Timeline) --- */
        .pos-section {
            padding: 40px 0;
            background: url("../images/ztzl_6.jpg") no-repeat center center;
            background-size: cover;
            position: relative;
        }
        .timeline {
            position: relative;
        }
        .timeline .line{
            width: 100%;
            display: block;
        }
        .t-item {
            position: absolute;
            z-index: 10;
            width: 0;
            height: 0;
        }
        .t-item::after{
            content: '';
            width: 1px;
            height: 20rem;
            background-image: linear-gradient(to bottom, rgba(226, 3 ,19, 0), rgba(226, 3 ,19, 1));
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .step-1{
            left: 9%;
            bottom: 1%;
        }
        .step-2{
            left: 45%;
            bottom: 8.5%;
        }
        .step-3{
            left: 80%;
            bottom: 32%;
        }

        .t-box {
            width: 12.5rem;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            color: #000;
            transform: translateY(-18.75rem);
        }
        .t-box .title{
            background: var(--brand-red);
            height: 5rem;
            width: 11.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
        }
        .t-box h3 { font-size: 1.875rem; line-height: 1.2; font-weight: normal;}
        .t-box .year { font-size: 1.25rem; font-family: "D-DINCONDENSED-BOLD";}
        .t-box p { padding-left: .75rem; padding-top: .5rem; font-size: 1rem; line-height: 1.8; text-align: left;}
        
        .t-dot {
            width: 13px; height: 13px;
            background: var(--brand-red);
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
        }
        .t-dot::after, .t-dot::before{
            content: '';
            width: 100%;
            height: 100%;
            background: var(--brand-red);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(.5);
            opacity: .5;
        }
        .t-dot::after{
            animation: zoomFade 2s linear infinite;
        }
        .t-dot::before{
            animation: zoomFade 2s 1s linear infinite;
        }
        /* 放大渐隐动画 */
        @keyframes zoomFade {
            0% { transform: translate(-50%, -50%) scale(.5); opacity: .5; }
            100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
        }


        /* --- Party Building (Updated Layout) --- */
        .party-section { padding: 40px 0; background: url("../images/ztzl_12.jpg") no-repeat center center; background-size: cover; }
        
        .party-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .p-card {
            position: relative;
            overflow: hidden;
            background: #eee;
        }
        .black-border{ border: 3px solid #000;}
        .p-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
        .p-card:hover img { transform: scale(1.1); }
     

        /* --- Goals (Accordion) --- */
        .goals-section { padding: 40px 0; background: url("../images/ztzl_12s.jpg") no-repeat center center; background-size: cover;  }
        .goals-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .goal-card {
            height: 29.25rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: flex 0.5s ease; /* Transition for accordion */
        }
        .goal-card::before{
            content: '';
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.12);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
        }
        .goal-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
        .goal-card:hover img { transform: scale(1.1); }
        .goal-label {
            position: absolute; top: 0; left: 0; z-index: 3;
            color: #fff;
            padding: 1.25rem 10px;
            writing-mode: vertical-rl;
            text-orientation: upright;
            letter-spacing: 5px;
            font-size: 1.2rem;
            height: 17.5rem;
            display: flex; align-items: center;
            pointer-events: none;
        }
        .goal-card:hover .goal-label {
            background-image: linear-gradient(to bottom, rgba(226, 3 ,19, 1), rgba(226, 3 ,19, 0));
        }

        /* --- Four Businesses (Updated with Tabs) --- */
        .biz-section {
            position: relative;
            height: 46.75rem;
            background: #222;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            overflow: hidden;
            background: url("../images/ztzl_13.jpg") no-repeat center center; background-size: cover;
        }
        /* Multiple backgrounds for switching */
        /* .biz-bg-layer {
            position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease-in-out;
            pointer-events: none;
        }
        .biz-bg-layer.active { opacity: 1; }
        .biz-bg-layer img { width: 100%; height: 100%; object-fit: cover; }
        .biz-bg-overlay {
            position: absolute; inset: 0; background: rgba(0,30,80,0.3); pointer-events: none;
        } */
        
        .biz-section .section-header {
            position: absolute;
            top: 80px;
            left: 0;
            width: 100%;
            z-index: 10;
        }

        .biz-tabs-container {
            position: relative;
            z-index: 20;
            max-width: var(--max-width);
            margin: 0 auto;
            width: 100%;
            background: rgba(255,255,255,0.85);
            box-shadow: 0 -5px 1.25rem rgba(0,0,0,0.1);
            display: flex;
        }
        
        .biz-tab {
            flex: 1;
            height: 14.375rem;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 1.25rem;
            cursor: pointer;
            transition: background 0.3s, color 0.3s;
            color: #444;
            position: relative;
        }
        .biz-tab::after {
            content: '';
            position: absolute;
            left: 100%;
            top: 50%;
            width: 1px;
            height: 80%;
            background: rgba(0, 0 , 0, 0.1);
            transform: translateY(-50%);
        }

        .biz-tab:last-child::after { display: none;}
        /* Active state only changes color, no size change */
        .biz-tab:hover{
            background: var(--brand-red);
            color: #fff;
        }
        .biz-tab i { font-size: 3.5rem; margin-bottom: 15px; color: var(--brand-red); transition: color 0.3s; line-height: 1;}
        .biz-tab:hover i{ color: #fff; }
        .biz-tab h4 { font-size: 1.25rem; font-weight: normal; }

        /* --- Five Sectors (Updated Icon) --- */
        .sectors-section { padding: 40px 0; }
        .sectors-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        .sector-card {
            height: 28.125rem;
            position: relative;
            overflow: hidden;
        }
        .sector-card::before {
            content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); z-index: 5;
        }
        .sector-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
        .sector-card:hover img { transform: scale(1.1); }
        
        .sector-info {
            position: absolute; bottom: 2.5rem; left: 0; width: 100%;
            z-index: 10; text-align: center; color: #fff;
        }
        /* Rounded Hexagon Icon using SVG Data URI */
        .sector-icon {
            width: 70px; height: 70px; /* Slightly larger to account for stroke */
            margin: 0 auto 10px;
            background: transparent;
            /* SVG Hexagon with rounded corners via stroke-linejoin */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L88 29 V71 L50 92 L12 71 V29 Z' fill='white' stroke='white' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            display: flex; align-items: center; justify-content: center;
            color: var(--brand-red);
        }
        .sector-icon i { font-size: 2rem; }
        .sector-info h3 { font-size: 1.5rem; font-weight: bold; line-height: 1.2;}


        /* --- Media Queries (Desktop) --- */
        @media (min-width: 768px) {

            .strategy-row { flex-direction: row; align-items: stretch; min-height: 100px; margin-bottom: 15px; }
            .s-label { width: 11.75rem; height: 6.25rem;}
            .s-label .num{ height: 4.125rem;}
            .s-label .txt{ margin-top: 2.5rem;}
            .s-content { padding-left: 3.125rem; 
                padding: 0;
                gap: 20px;
            }

            /* Updated Party Grid for Desktop */
            .party-section{
                padding: 7.5rem 0;
                padding-bottom: 18.75rem;
            }
            .party-grid { 
                grid-template-columns: repeat(8, 1fr); 
            }
            .p-card.row-3 { grid-column: span 3; } /* 3 items * 2 cols = 6 */
            .p-card.row-2 { grid-column: span 2; } /* 3 items * 2 cols = 6 */
            .p-card.row-4 { grid-column: span 4; } /* 2 items * 3 cols = 6 */
            .p-card{ height: 15.625rem; }

            /* Updated Goals Accordion for Desktop */
            .goals-section{
                padding: 5rem 0;
            }
            .goals-container { 
                flex-direction: row;
                height: 500px;
                gap: 0;
            }
            .goal-card {
                flex: 1; /* Default collapsed width */
            }
            .s-card{
                width: 17%;
            }
            .goal-card:hover {
                flex: 3; /* Expanded width on hover */
            }

            .pos-section{
                padding: 4.5rem 0;
                padding-bottom: 13.125rem;
            }
            .sectors-section{
                padding: 5rem 0;
            }
            
            .sectors-grid { grid-template-columns: repeat(5, 1fr); }

        }

        @media screen and (max-width: 991px) {
            .section-header h2{ font-size: 28px;}
            .section-header p.subtitle{ font-size: 18px;}
            .timeline .line{ display: none;}
            .t-item{ position: static; width: 100%; height: auto; margin-bottom: 15px;}
            .t-item::after{ display: none;}
            .t-dot{
                display: none;
            }
            .t-box{
                width: 100%;
                position: static;
                transform: translateY(0);
            }
            .t-box h3{ font-size: 20px;}
            .t-box p{ text-align: center;}
            .t-box .title{ width: 100%;}
            .goal-card{
                height: 14.25rem;
            }
            .goal-label{ height: 100%;}
            .biz-section{ height: 25rem;}
            .biz-tab{ text-align: center; height: 8rem; padding: 1.25rem  5px;}
            .biz-tab h4{ font-size: 14px; }
            .biz-tab i{ font-size: 24px; margin-bottom: 10px;}
            .sectors-grid{
                display: flex;
                padding-left: calc((100vw - 100%)/2);
                width: 100vw;
                margin-left: calc((100vw - 100%)/2*-1);
                overflow: scroll;
                scroll-snap-type: x mandatory;
            }
            .sector-card{
                width: 30vw;
                flex-shrink: 0;
                height: 18rem;
            }
            .sector-info h3{
                font-size: 18px;
            }
        }