@charset "utf-8";



      /* * Hero 섹션 컨테이너 
         * 전체 화면을 차지하도록 설정
         */
        .nexus-hero-container {
            position: relative;
            width: 100%;
            height: 100vh; /* 뷰포트 전체 높이 */
            overflow: hidden;
        }

        /* * 개별 슬라이드 아이템 
         * 절대 위치로 겹쳐두고 불투명도(opacity)로 전환 효과를 줍니다.
         */
        .nexus-slide-unit {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), visibility 1.2s;
            z-index: 1;
        }

        /* 활성화된 슬라이드 상태 */
        .nexus-slide-unit.nexus-active {
            opacity: 1;
            visibility: visible;
            z-index: 2;
        }

        /* 미디어(비디오/이미지) 공통 스타일 */
        .nexus-media-obj {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 화면 비율에 맞춰 꽉 차게 */
            display: block;
        }
 /* 2. 시네마틱 오버레이 (중간) - 가상 요소 사용 */
        .nexus-slide-unit::after {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 1; /* 비디오 위 */
            pointer-events: none;
            
            /* 어둡게 누르는 효과 (Vignette) */
            background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
        }

      /* 7. 텍스트 레이어 - 글래스모피즘 적용 */
.nexus-content-layer {
    position: absolute;
    bottom: 25%;
    left: 8%;
    z-index: 10; /* 오버레이보다 훨씬 높게 */
    color: #fff;
    max-width: 800px;
    pointer-events: none;
    
    /* 유리 질감 효과 
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 50px 60px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/

    /* 패널 등장 애니메이션 */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.nexus-slide-unit.nexus-active .nexus-content-layer {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

/* [중요] 초기 로딩 시 강제 딜레이 설정 */
.nexus-hero-container.is-init .nexus-slide-unit.nexus-active .nexus-content-layer {
    transition-delay: 2.5s !important;
}

/* 8. 타이포그래피 (헤드라인 & 설명) */
.nexus-headline {
    font-family: 'Montserrat', sans-serif;
    font-size: 5.5rem;
    font-weight: 200;
    margin: 0 0 20px 0;
    letter-spacing: -1px;
    line-height: 1.1;
    color: #fff;
    
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.nexus-headline b {
    font-weight: 600;
    color: #fff;
}

.nexus-description {

    font-size: 2rem;
    font-weight: 600;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.5px;
    word-break: keep-all;

    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 시차(Stagger) 애니메이션 적용 */
.nexus-slide-unit.nexus-active .nexus-headline {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.nexus-slide-unit.nexus-active .nexus-description {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

/* 초기 로딩 시 시차 애니메이션 딜레이도 함께 밀기 */
.nexus-hero-container.is-init .nexus-slide-unit.nexus-active .nexus-headline {
    transition-delay: 2.7s !important;
}
.nexus-hero-container.is-init .nexus-slide-unit.nexus-active .nexus-description {
    transition-delay: 2.9s !important;
}

        /* 로딩 인디케이터 (하단 얇은 라인) */
        .nexus-progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background-color: #fff;
            width: 0%;
            z-index: 10;
            transition: width 0.1s linear;
            box-shadow: 0 0 10px rgba(255,255,255,0.5);
        }

        /* -------------------------------------------------- */
        /* [컨트롤 패널 (하단 중앙 정렬)] */
        /* -------------------------------------------------- */
        
        .nexus-control-panel {
            position: absolute;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px; /* 요소 간 간격 */
            z-index: 20;
        }

        /* 숫자 페이지네이션 스타일 */
        .nexus-page-indicator {
    
            color: rgba(255, 255, 255, 0.5);
            font-size: 16px;
            font-weight: 300;
            letter-spacing: 2px;
            min-width: 80px;
            text-align: center;
        }

        .nexus-page-current {
            color: #fff;
            font-weight: 700;
            font-size: 18px;
        }

        /* 네비게이션 버튼 스타일 */
        .nexus-nav-btn {
            position: relative;
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            color: #fff;
            backdrop-filter: blur(4px);
            overflow: hidden;
        }

        .nexus-nav-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            opacity: 0;
            transform: scale(0.5);
            transition: all 0.4s ease;
            z-index: -1;
            border-radius: 50%;
        }

        .nexus-nav-btn:hover {
            border-color: #fff;
            color: #000;
            transform: scale(1.1);
        }

        .nexus-nav-btn:hover::before {
            opacity: 1;
            transform: scale(1);
        }

        .nexus-nav-btn svg {
            width: 18px;
            height: 18px;
            stroke-width: 1.5;
            transition: transform 0.3s ease;
        }
        
        .nexus-prev:hover svg { transform: translateX(-2px); }
        .nexus-next:hover svg { transform: translateX(2px); }

        /* 모바일 대응 (반응형) */
        @media (max-width: 768px) {
            .nexus-headline {
                font-size: 2.2rem;
            }
            .nexus-description {
                font-size: 1rem;
            }
            .nexus-content-layer {
                left: 5%;
                right: 5%;
                bottom: 30%;
            }
        }



 /* 텍스트 컨테이너 */
 .Last_Section{width:100%;padding:5%;}


        .text-container {
            width: 100%;
     
            text-align: center; /* 깔끔한 중앙 정렬 */
        }

        /* 상단 작은 텍스트: PARTNER FarmTner */
        .sub-header {
            font-size: 16px; /* 작은 글씨 */
            color: #888;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 15px;
            text-transform: uppercase;
        }

        /* FarmTner 강조 색상 (상단 작은 영문) */
        .brand-name-small {
            color: #27ae60;
            margin-left: 5px;
        }

        /* 메인 타이틀: 함께하는 ~ (50px) */
        .main-title {
            font-size: 50px; /* 요청하신 50px 고정 */
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 30px;
            line-height: 1.3;
        }

        /* 하단 설명 2줄 */
        .description {
            font-size: 1.25rem;
            color: #555;
            line-height: 1.8; /* 줄 간격 넉넉하게 */
            word-break: keep-all;
        }

        /* 모바일 반응형 */
        @media (max-width: 768px) {
            .main-title {
                font-size: 28px; /* 모바일에서는 조금 작게 조정 */
            }
            .description {
                font-size: 16px;
            }
        }



  /* --- 로딩 --- */
        :root {
      
            --accent: #2e7d32;
     
        }

.Logo_Area{width:300px}
.Logo_Area img{max-width:100%;margin:0 auto}
        /* --- LOADING OVERLAY --- */
        .preloader {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #ffffff;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            color: #111;
        }
        .loading-bar {
            width: 250px;
            height: 2px;
            background: #eee;
            margin-top: 20px;
            position: relative;
            overflow: hidden;
        }
        .bar-fill {
            position: absolute;
            left: 0; top: 0;
            height: 100%;
            width: 0%;
            background: var(--accent);
        }





        /* Gradient Classes for Preview */
        .grad-vertical {
            background: linear-gradient(to bottom, #4CAF50, #2E7D32, #1B5E20);
        }
        .grad-diagonal {
            background: linear-gradient(135deg, #4CAF50, #2E7D32, #1B5E20);
        }
        .grad-radial {
            background: radial-gradient(circle, #4CAF50, #2E7D32, #1B5E20);
        }

.Intro_Duce_Section{width:100%;; position:relative;top:0;overflow:hidden;padding:3% 0}
/*
.Intro_Duce_Section::after{clear:both;content:'';display:block;
 background: linear-gradient(-45deg, #1d3326, #1d3326 50%, transparent 50%, transparent 1px);
  transform: rotate(0deg);position:absolute;right:0;bottom:0;width:500px;height:500px;z-index:-1}
*/

.Intro_Duce_Section::after{z-index: -1;
  position: absolute;
  right: 0%;
  bottom: 0%;
  clear: both;
  content: '';
  display: none;
  width: 40%;
  height: 450px;
 background: linear-gradient(135deg, #4CAF50, #2E7D32, #1B5E20);
  border-radius: 30px 0 0 0 ;
}

.Intro_Duce_Section>dl{width:100%;flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap:0px;padding:2% 5%;gap:50px;}
  
.Intro_Duce_Section::before{clear: both;
  content: 'FARMTNER';
  display: none;
  position: absolute;
  left: 5%;
  bottom: -48PX;
  font-size: 12em;
  opacity: 0.15;
  color: #0a0a0a;
  font-weight: 800;
  letter-spacing:-3px
}



.Intro_Duce_Section>dl>dt{width:calc(50% - 50px)}
.Intro_Duce_Section>dl>dt>img{width:100%;/*box-shadow: 5px 5px 15px rgba(0,0,0,0.2);*/border-radius:10px}
.Intro_Duce_Section>dl>dd{width:calc(50% - 50px)}
.Intro_Duce_Section>dl>dd>div{width:100%;position:relative;padding:10% 5%;}
.Intro_Duce_Section>dl>dd>div>h2{line-height:1.65;font-weight:400;color:#3a3a3a;padding:10px;}
.Intro_Duce_Section>dl>dd>div>h1{font-weight:400;color:#2e7d32;font-size:2.5em;padding:20px 10px;line-height: 1.45;;letter-spacing:2px}
.Intro_Duce_Section>dl>dd>div>h1>b{color:#1b5e20;font-weight:800}
.Intro_Duce_Section>dl>dd>div>h3{line-height:1.55;font-weight:500;color:#6a6a6a;padding:10px;}
.Intro_Duce_Section>dl>dd>div>span{display:inline-block;;text-align:center;;margin:15px 0}
.Intro_Duce_Section>dl>dd>div>span>a{display:block;padding:12px 25px;;border-radius:20px;width:100%;border:1px solid #0a0a0a;color:#000;-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;}

.Intro_Duce_Section>dl>dd>div>span>a:hover{background: #0a0a0a;color:#fff;}

.Intro_Duce_Section>dl>dd>div::before{clear: both;
  /*content: 'SMART INDICATOR';*/
  display: none;
  position: absolute;
  left: -4%;
  bottom: 38%;/*
  text-orientation: upright;
  writing-mode: vertical-lr;*/
  transform: rotate(90deg);
  letter-spacing: 3px;color:#2dabe1;font-family: 'Poppins', sans-serif;
  font-weight: 600;}

.button {
  position: relative;
  width: 200px;
  height: 60px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 1px solid #387cd8;
  background-color: #1b5e20;
  margin-top:40px
}

.button, .button__icon, .button__text {
  transition: all 0.3s;
}

.button .button__text {
  transform: translateX(30px);
  color: #fff;
  font-weight: 600;
}

.button .button__icon {
  position: absolute;
  transform: translateX(159px);
  height: 100%;
  width: 60px;
  height:60px;
  background-color: #1b5e20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button .svg {
  width: 30px;
  stroke: #fff;
}

.button:hover {
  background: #1b5e20;
}

.button:hover .button__text {
  color: transparent;
}

.button:hover .button__icon {
  width: 200px;
  transform: translateX(0);
}

.button:active .button__icon {
  background-color: #1b5e20;
}

.button:active {
  border: 1px solid #2e8644;
}
@media all and (min-width:1px) and (max-width:800px) {
.Intro_Duce_Section{width:100%}
.Intro_Duce_Section>dl{width:100%;flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap:0px;padding:2%}

.Intro_Duce_Section>dl>dt{width:100%;padding:5px;}
.Intro_Duce_Section>dl>dt>img{width:100%}
.Intro_Duce_Section>dl>dd{width:100%;;padding:5px;}
.Intro_Duce_Section>dl>dd>div{width:100%;position:relative;padding:2%;}
.Intro_Duce_Section>dl>dd>div>h2{line-height:1.65;font-weight:400;color:#3a3a3a;padding:5px;font-size:20px;}
.Intro_Duce_Section>dl>dd>div>h1{font-weight:700;;font-size:2em;padding:10px 5px
;line-height: 1.45;;letter-spacing:2px}
.Intro_Duce_Section>dl>dd>div>h3{line-height:1.55;font-weight:500;font-size:14px;color:#6a6a6a;padding:5px;}



.Intro_Duce_Section::after{z-index: -1;
  position: absolute;
  right: 0%;
  bottom: 0%;
  clear: both;
  content: '';
  display: none;
  width: 100%;
  height: 200px;
 background: linear-gradient(135deg, #4CAF50, #2E7D32, #1B5E20);
  border-radius: 15px 15px 0 0 ;
}


.Intro_Duce_Section>dl>dd>div::before{clear: both;
  /*content: 'SMART INDICATOR';*/
  display: block;
  position: relative;
  left: 0%;
  bottom: 0%;/*
  text-orientation: upright;
  writing-mode: vertical-lr;*/
  transform: rotate(0deg);
  letter-spacing: 2px;color:#2dabe1;font-family: 'Poppins', sans-serif;
  font-weight: 600;padding:5px}


}









/* --- 1. Reset & Core Settings --- */
        :root {
            --ft-green-1: #81C784;
            --ft-green-2: #4CAF50;
            --ft-green-3: #2E7D32;
            --ft-green-4: #1B5E20;
			--ft-green-5: #024f08;
            --ft-text-dark: #111;
            --ft-ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
        }

      

        /* --- 2. Main Layout (PC Default: Horizontal) --- */
        .ft-container {
            display: flex;
            width: 100vw;
            height: 100vh; /* 모바일 브라우저 주소창 대응을 위해 dvh 권장 */
  
            background-color: #f5f5f5;
            flex-direction: row; 
        }

        /* --- 3. Panel (Accordion Tab) --- */
        .ft-panel {
            position: relative;
            /* [PC] 닫힌 탭 너비 고정 */
            flex: 0 0 80px; 
            
            cursor: pointer;
            overflow: hidden;
            border-right: 1px solid rgba(255,255,255,0.15);
            transition: flex 0.6s var(--ft-ease-smooth); 
        }
        
        .ft-panel[data-idx="0"] { background-color: var(--ft-green-1); }
        .ft-panel[data-idx="1"] { background-color: var(--ft-green-2); }
        .ft-panel[data-idx="2"] { background-color: var(--ft-green-3); }
        .ft-panel[data-idx="3"] { background-color: var(--ft-green-4); }
	  .ft-panel[data-idx="4"] { background-color: var(--ft-green-5); }

        /* --- Active State Logic (Expand) --- */
        .ft-panel.active {
            /* [PC] 열린 탭은 남은 공간 차지 */
            flex: 1; 
            
            cursor: default;
            border-right: none;
            z-index: 10;
            /* box-shadow: -10px 0 30px rgba(0,0,0,0.1);
            
            [PC] 왼쪽 띠 영역 확보 (80px) */
            padding-left: 80px;
        }


        /* --- 4. Vertical Label (PC Default) --- */
        .ft-label-vertical {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-90deg);
            white-space: nowrap;
            color: rgba(255,255,255,0.95);
            font-size: 1.4rem;
            font-weight: 800;
         /*   text-transform: uppercase;*/
            letter-spacing: 3px;
            z-index: 20;
            pointer-events: none;
            transition: all 0.6s var(--ft-ease-smooth);
        }

        /* [PC] 활성화 시 왼쪽 띠 중앙으로 이동 */
        .ft-panel.active .ft-label-vertical {
            left: 40px; 
            color: rgba(255,255,255,1);
            letter-spacing: 5px;
        }


        /* --- 5. Content Layout --- */
        .ft-content-wrap {
            width: 100%;
            height: 100%;
            display: flex;
            background-color: #fff;
            
            /* 초기 상태: 숨김 */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease;
        }

        .ft-panel.active .ft-content-wrap {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.8s ease 0.3s;
        }

        /* Left Text Area */
        .ft-text-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 5%;
            overflow: hidden;
            white-space: nowrap; 
        }
        
        /* Right Image Area */
        .ft-image-area {
            flex: 1.2;
            position: relative;
            overflow: hidden;
        }
        
        /* Background Image */
        .ft-bg-img {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transition: transform 1s ease;
        }
        
        .ft-panel:hover .ft-bg-img {
            transform: scale(1.03);
        }


        /* --- 6. Typography --- */
        .ft-headline {
            font-size: 3.5rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 30px;
            color: var(--ft-text-dark);
            white-space: normal;
        }
        .ft-headline span { color: var(--ft-green-2); }

        .ft-subhead {
            font-size: 2rem;
            font-weight: 700;
            color: var(--ft-green-3);
            /*text-transform: uppercase;*/
            letter-spacing: 2px;
            margin-bottom: 15px;
            display: block;
        }

        .ft-body {
            font-size: 1.2rem;
            line-height: 1.7;
            color: #555;
            white-space: normal;
            max-width: 550px;
            margin-bottom: 40px;font-weight: 500;
        }

        /* --- 7. Button --- */
        .ft-cta-btn {
            display: inline-flex;
            align-items: center;
            padding: 12px 30px;
            border: 2px solid var(--ft-text-dark);
            border-radius: 50px;
            font-weight: 700;
            text-transform: uppercase;
            text-decoration: none;
            color: var(--ft-text-dark);
            width: fit-content;
            transition: all 0.3s ease;
        }
        
        .ft-cta-btn:hover {
            background-color: var(--ft-text-dark);
            color: #fff;
            padding-right: 40px;
        }
        
        .ft-cta-btn::after {
            content: '→';
            position: absolute;
            right: 20px;
            opacity: 0;
            transform: translateX(-10px);
            transition: 0.3s;
        }
        .ft-cta-btn:hover::after {
            opacity: 1;
            transform: translateX(0);
            position: relative;
            right: -10px;
        }

.Img_Area_1{background: url('../img/acco_1.png') no-repeat 65% center; -webkit-background-size: cover;
background-size: cover;}
.Img_Area_2{background: url('../img/acco_2.png') no-repeat center; -webkit-background-size: cover;
background-size: cover;}
.Img_Area_3{background: url('../img/acco_3.png') no-repeat center; -webkit-background-size: cover;
background-size: cover;}
.Img_Area_4{background: url('../img/acco_4.png') no-repeat center right; -webkit-background-size: cover;
background-size: cover;}

.Img_Area_5{background: url('https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?q=80&w=2000&auto=format&fit=crop');}



        /* --- 8. Mobile Responsiveness (Vertical Stack) --- */
        @media (max-width: 768px) {
            /* 1. 컨테이너 방향 전환: 가로 -> 세로 */
            .ft-container {
                flex-direction: column; 
            }

            /* 2. 패널 스타일 변경 */
            .ft-panel {
                /* 닫힌 탭: 너비 100%, 높이 60px 고정 */
                width: 100%;
                flex: 0 0 60px; 
                
                border-right: none;
                border-bottom: 1px solid rgba(255,255,255,0.15);
                border-top: 1px solid rgba(0,0,0,0.05);
            }

            .ft-panel.active {
                /* 열린 탭: 남은 높이 차지 */
                flex: 1; 
                
                padding-left: 0; 
                /* 상단 띠 영역 확보 (60px) */
                padding-top: 60px; 
                box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            }

            /* 3. 라벨 방향 전환: 세로 -> 가로 */
            .ft-label-vertical {
                transform: translate(-50%, -50%) rotate(0deg); 
                font-size: 1.1rem;
                letter-spacing: 2px;
            }
            
            /* 활성화 시 상단 띠 중앙으로 이동 */
            .ft-panel.active .ft-label-vertical {
                left: 50%;
                top: 30px; /* 60px 높이의 절반 */
                transform: translate(-50%, -50%) rotate(0deg);
                letter-spacing: 3px;
            }

            /* 4. 콘텐츠 내부 레이아웃 */
            .ft-content-wrap {
                flex-direction: column; /* 텍스트 위, 이미지 아래 */
                overflow-y: auto; /* 내용 넘치면 스크롤 */
            }

            .ft-text-area {
                flex: 0 0 auto; /* 내용만큼 높이 */
                padding: 30px 24px;
                white-space: normal; /* 모바일 줄바꿈 허용 */
            }

            .ft-image-area {
                flex: 1; /* 남은 공간은 이미지 */
                min-height: 250px; /* 최소 높이 보장 */
                width: 100%;
            }

            /* 5. 타이포그래피 조정 */
            .ft-headline { font-size: 2rem; margin-bottom: 15px; }
            .ft-subhead { margin-bottom: 10px; font-size: 0.9rem; }
            .ft-body { 
                font-size: 0.95rem; 
                margin-bottom: 25px;
            }
        }



		   /* [메인 컨테이너] 좌우 분할 레이아웃 */
        .vision-hero-wrapper {
            display: flex;
            width: 100%;
            min-height: auto; /* 화면 전체 높이 사용 */
            background-color: #fff;
        }

        /* [좌측] 비주얼 이미지 영역 */
        .vision-visual-segment {
            flex: 1; /* 50% 비율 */
            background-image: url('../img/Vision_Img.jpg'); /* 새싹/환경 이미지 */
            background-size: cover;
            background-position: 10% center;
            background-repeat: no-repeat;
            position: relative;
        }

        /* 이미지 위에 살짝 어두운 오버레이 (텍스트 가독성 필요시 사용, 현재는 투명도 낮게 설정) */
        .vision-visual-segment::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0); 
        }

        /* [우측] 콘텐츠 텍스트 영역 */
        .vision-content-segment {
            flex: 1; /* 50% 비율 */
            display: flex;
            flex-direction: column;
            justify-content: center; /* 수직 중앙 정렬 */
            padding: 80px 100px; /* 내부 여백 */
			background: #fafafa;
        }

        /* 1. 상단 라벨 (파란색 + 선) */
        .topic-indicator-label {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 700;
            color: #2e7d32; /* 신뢰감을 주는 블루 */
            margin-bottom: 24px;
        }

        .topic-indicator-label::before {
            content: '';
            display: inline-block;
            width: 24px;
            height: 2px;
            background-color: #2e7d32;
            margin-right: 12px;
        }

        /* 2. 메인 헤드라인 */
        .strategic-headline-txt {
            font-size: 50px;
            font-weight: 700;
            color: #1a1a1a;
            line-height: 1.45;
            margin-bottom: 30px;
            letter-spacing: -0.02em;
        }

        /* 3. 서브 설명글 */
        .strategic-desc-txt {
            font-size: 1.25rem;
            color: #666;
            margin-bottom: 60px;
            line-height:1.55;
            word-break: keep-all; /* 단어 단위 줄바꿈 */
        }

        /* 4. 내비게이션 그리드 (4개 박스) */
        .insight-grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4등분 */
            gap: 15px; /* 박스 사이 간격 */
            width: 100%;
        }

        /* 개별 카드 스타일 */
        .insight-card-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            border: 1px solid #e0e0e0;
            padding: 25px 10px;
            transition: all 0.3s ease;
            cursor: pointer;
            text-align: center;
            height: 140px; /* 고정 높이 */
        }

        /* 아이콘 영역 */
        .insight-card-icon {
            width: 40px;
            height: 40px;
            margin-bottom: 15px;
            fill: #888; /* 기본 아이콘 색상 */
            transition: fill 0.3s ease;
        }

        /* 텍스트 영역 */
        .insight-card-title {
            font-size: 15px;
            font-weight: 500;
            color: #333;
            transition: color 0.3s ease;
        }

        /* [Hover 효과] 마우스 올렸을 때 */
        .insight-card-item:hover {
            border-color: #2e7d32;
            transform: translateY(-3px); /* 살짝 위로 떠오름 */
            box-shadow: 0 5px 15px rgba(0, 86, 179, 0.1);
        }

        .insight-card-item:hover .insight-card-icon {
            fill: #2e7d32; /* 아이콘 파란색으로 변경 */
        }

        .insight-card-item:hover .insight-card-title {
            color: #2e7d32; /* 텍스트 파란색으로 변경 */
            font-weight: 700;
        }

        /* [반응형] 태블릿 및 모바일 대응 */
        @media (max-width: 1024px) {
            .vision-content-segment {
                padding: 60px 50px;
            }
            .strategic-headline-txt {
                font-size: 36px;
            }
            .insight-grid-container {
                grid-template-columns: repeat(2, 1fr); /* 2줄로 변경 */
            }
        }

        @media (max-width: 768px) {
            .vision-hero-wrapper {
                flex-direction: column; /* 세로 배치 */
            }
            .vision-visual-segment {
                min-height: 300px;
                flex: none; /* 높이 고정 */
            }
            .vision-content-segment {
                padding: 40px 24px;
                flex: none;
            }
            .strategic-headline-txt {
                font-size: 28px;
            }
            .strategic-desc-txt {
                font-size: 15px;
            }
        }