/* --- 초기화 및 공통 스타일 --- */
     
        img {
            max-width: 100%;
            display: block;
        }

        /* 공통 컨테이너 */
        .ev-container {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 20px;
			position: relative;
        }

        /* --- 상단 섹션: Product Intro (Light) --- */
        .ev-hero-area {
            position: relative;
            background-color: #f8f9fa; /* 밝은 회색 배경 */
            height: auto; /* 높이 고정 */
            display: flex;
            align-items: stretch; /* 높이 꽉 채우기 */
            overflow: hidden;
            padding: 0; 
        }

        .ev-hero-flex {
            display: flex;
            width: 100%;
            max-width: 100%; 
            margin: 0;
            padding: 0;
            align-items: stretch;
        }

        /* 좌측: 제품 이미지 영역 (꽉 채우기) */
        .ev-hero-img-box {
            flex: 1; /* 50% 너비 */
            position: relative;
            overflow: hidden;
			
        }

        /* 제품 이미지 스타일 */
        .ev-main-img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 비율 유지하며 영역 꽉 채움 */
            transform: none;
            filter: none;
        }

        /* 우측: 텍스트 콘텐츠 영역 */
        .ev-hero-desc-box {
       flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 30px 100px;

  position: relative;
  background:#fff url(../img/Int_Bg_1.png) no-repeat center;-webkit-background-size: cover;
			background-size: cover;
        }
        
        /* [수정] 영문 세로 텍스트: 크기 대폭 축소(16px), 파란색 계열 변경 */
        .ev-vertical-text {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transform: rotate(180deg);
            font-size: 16px; /* 40px -> 16px (반 이하로 축소) */
            font-weight: 700;
            color: #0056b3; /* [수정] 푸른색 계열 (밝은 파랑) */
            letter-spacing: 3px; 
            margin-right: 40px; 
            white-space: nowrap;
            font-family: sans-serif;
            user-select: none;
            opacity: 0.8;
        }

        /* 실제 텍스트 내용 래퍼 */
        .ev-content-inner {
            max-width: 100%;
			padding:5% 2%
        }

        .ev-hero-sub-title {
            font-size: 18px;
            color: #666;
            font-weight: 500;
            margin-bottom: 10px;
            display: block;
        }

        .ev-hero-main-title {
            font-size: 48px;
            line-height: 1.3;
            font-weight: 700;
            color: #111;
            margin-bottom: 24px;
        }

        .ev-hero-main-title span {
            color: #0056b3; 
        }

        .ev-hero-desc {
            font-size: 26px;
  color: #555;
  margin-bottom: 40px;
  line-height: 1.6;
  font-weight: 600;
        }

        .ev-btn-outline {
            display: inline-flex;
            align-items: center;
            padding: 12px 30px;
            border: 2px solid #333;
            font-weight: 700;
            transition: all 0.3s ease;
        }

        .ev-btn-outline:hover {
            background: #333;
            color: #fff;
        }

        .ev-btn-arrow {
            margin-left: 10px;
            font-size: 18px;
        }


        /* --- 하단 섹션: Solution (Dark) --- */
    

        /* --- 반응형 (모바일/태블릿) --- */
        @media (max-width: 992px) {
            .ev-hero-area {
                height: auto; 
                display: block;
            }

            .ev-hero-flex {
                flex-direction: column;
            }
            
            .ev-hero-img-box {
                height: auto; 
                width: 100%;
            }

            .ev-hero-desc-box {
                padding: 40px 20px;
                flex-direction: row; 
                justify-content: flex-start;
            }

            .ev-vertical-text {
                font-size: 14px; /* 모바일에서 더 작게 */
                margin-right: 15px;
            }

            .ev-hero-main-title {
                font-size: 32px;
            }

            .ev-hero-desc {
  font-size: 16px;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.6;
  font-weight: 600;
}
}

  @media (max-width: 350px) {

 .ev-hero-desc-box {
    padding: 40px 10px;
    flex-direction: row;
    justify-content: flex-start;
  }
 .ev-hero-main-title {
    font-size: 22px;
  }
 .ev-hero-desc {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
    font-weight: 600;
  }


  }

/* --- [Layout & Grid System] --- */
        .ev-solution-area {
            background: url(../img/Main_B_Bg_3.png) no-repeat center;
    background-size: auto;
  -webkit-background-size: cover;
  background-size: cover;

  padding: 5% 10%;
        }

        .ev-container {
            max-width: 100%;
            margin: 0 auto;
        }

        /* 3단 그리드 레이아웃 (HTML 수정 없이 display: contents 활용) */
        .ev-masonry-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px; /* 여유로운 간격 */
            align-items: stretch;
        }

        /* HTML 구조 무력화 (display: contents) */
        .ev-col-left, 
        .ev-col-right {
            display: contents;
        }

        /* --- [Header Style] --- */
        .ev-sol-header {
            grid-column: 1 / -1;
            text-align: left;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee; /* 아주 연한 구분선 */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .ev-sol-label {
            display: inline-block;
            font-size: 22px;
            font-weight: 700;
            color: #0056b3; /* 요청하신 블루 포인트 컬러 */
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 20px;
            position: relative;
            padding-left: 45px;
        }

        /* 라벨 옆 장식 선 */
        .ev-sol-label::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            width: 35px;
            height: 2px; /* 두께 살짝 조정 */
            background-color: #5682c1;
        }

        .ev-sol-title {
            font-size: 40px;
            font-weight: 700;
            color: #111; /* 제목은 완전한 블랙에 가깝게 */
            line-height: 1.3;
            word-break: keep-all;
        }

        /* --- [Card Item Style] --- */
        .ev-card-link {
            position: relative;
            background: #fff;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            display: flex;
            flex-direction: column;
            /* 밝은 테마용 기본 그림자 */
  
            border: 1px solid #eaeaea; /* 연한 테두리 추가로 깔끔함 강조 */
            overflow: hidden; /* 이미지 확대 시 영역 밖으로 나가는 것 방지 */
        }

        /* 카드 호버 효과 */
        .ev-card-link:hover {
            transform: translateY(-10px);
            box-shadow: 0 3px 5px rgba(86, 130, 193, 0.15); /* 블루 틴트 그림자 */
            border-color: #5682c1; /* 테두리 색상 변경 */
        }

        /* 이미지 스타일 */
        .ev-card-img {
            width: 100%;
            height: auto;
            object-fit: cover;
            /* 밝은 테마이므로 흑백 대신 선명하게 유지 */
            transition: transform 0.6s ease;
        }

        /* 호버 시 이미지 줌 인 */
        .ev-card-link:hover .ev-card-img {
            transform: scale(1.05);
        }

        .ev-item-text-box {
            padding: 15px 30px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            background-color: #fff;
            position: relative;
        }
        
        /* 텍스트 박스 상단 포인트 라인 (호버 전에는 숨김 or 연하게) */
        .ev-item-text-box::after {
            content: '';
            position: absolute;
            top: 0;
            left: 30px; /* 패딩 값과 동일하게 시작 */
            width: 50px;
            height: 3px;
            background-color: #eee;
            transition: width 0.4s ease, background-color 0.4s ease;
        }

        /* 호버 시 라인이 길어지며 파란색으로 변경 */
        .ev-card-link:hover .ev-item-text-box::after {
            width: calc(100% - 60px); /* 좌우 패딩 제외한 너비 */
            background-color: #5682c1;
        }

        .ev-card-title {
            display: block;
            font-size: 22px;
            font-weight: 700;
            color: #222;
            margin-top: 15px; /* 상단 라인과의 간격 */
            margin-bottom: 15px;
            letter-spacing: -0.5px;
            transition: color 0.3s;
        }
        
        .ev-card-link:hover .ev-card-title {
            color: #5682c1; /* 제목도 파란색으로 변경 */
        }

        .ev-card-desc {
            display: block;
            font-size: 16px;
            color: #666;
            line-height: 1.5;
            word-break: keep-all;font-weight: 600;
        }

        /* --- [Responsive Design] --- */
        @media (max-width: 1024px) {
            .ev-masonry-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .ev-sol-header {
                grid-column: span 2; 
                text-align: center; 
                align-items: center;
            }
            .ev-sol-label {
                padding-left: 0;
            }
            .ev-sol-label::before {
                display: none; /* 중앙 정렬 시 라인 제거 */
            }
            .ev-card-link:last-child {
                grid-column: span 1;
            }
        }

        @media (max-width: 768px) {
            .ev-masonry-grid {
                grid-template-columns: 1fr;
                gap: 0px;
            }
            .ev-sol-header {
                grid-column: span 1;
                margin-bottom: 20px;
            }
            .ev-sol-title {
                font-size: 28px;
            }
            .ev-col-left, .ev-col-right {
                display: block; 
            }
            .ev-card-img {
                height: auto;
				margin:0px 0;
            }
			.ev-card-link{margin:20px 0 0}

			.ev-solution-area {
  background: url(../img/Main_B_Bg_2.png) no-repeat center;
    background-size: auto;
  background-size: auto;
  -webkit-background-size: cover;
  background-size: cover;
  padding: 5% 3%;
}
        }


 /* --- Keyframes --- */
        @keyframes wipe-in {
            0% { 
                -webkit-clip-path: inset(0 100% 0 0);
                clip-path: inset(0 100% 0 0); 
            }
            100% { 
                -webkit-clip-path: inset(0 0 0 0);
                clip-path: inset(0 0 0 0); 
            }
        }

        @keyframes fade-up {
            0% { opacity: 0; transform: translateY(30px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        @keyframes expand-width {
            0% { width: 0; }
            100% { width: 100%; }
        }

        /* --- Banner Area --- */
        .ir-banner {
            position: relative;
            width: 100%;
            height: 720px;
            background-image: url('../img/ir-banner_bg.jpg');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            
            /* 초기 상태: 안 보임 
            -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0); */
        }

        /* 애니메이션 실행 클래스 */
        .ir-banner.active {
            animation: wipe-in 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
        }

        .ir-banner::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.5));
            z-index: 1;
        }

        /* --- Layout Container --- */
        .ir-container {
            position: relative;
            z-index: 2;
            width: 100%;
        
            padding: 0 40px;
            padding-bottom: 40px; 
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* --- Top Section --- */
        .ir-top-section {
            display: flex;
            flex-direction: row; 
            align-items: flex-start;
            padding-bottom: 130px;
            opacity: 0; 
        }

        .ir-banner.active .ir-top-section {
            animation: fade-up 0.8s ease-out 0.8s forwards;
        }

        .ir-category {
            font-size: 15px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 1px;
            margin-right: 40px;
            margin-top: 15px;
            white-space: nowrap;
			display:none;
        }

        .ir-text-content {
            display: flex;
            flex-direction: column;
			padding-left:150px;
        }

        .ir-main-title {
            font-size: 50px; 
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .ir-description {
            font-size: 17px;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
        }

        /* --- Divider Line --- */
        .ir-divider-line {
            width: 0; 
            height: 1px;
            background-color: #0090ff;
            margin: 0;
            border: none;
            box-shadow: 0 0 10px rgba(0, 144, 255, 0.5);
            /* Firefox 호환성: Flex item에서 width 애니메이션이 작동하도록 설정 */
            align-self: flex-start;
			display:block !important;
        }

        .ir-banner.active .ir-divider-line {
            animation: expand-width 1.0s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards;
        }

        /* --- Bottom Section --- */
        .ir-bottom-section {
            display: flex;
            justify-content: flex-end; 
            padding-top: 50px; 
            gap: 30px; 
        }

        .ir-link-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            color: #fff;
            width: 300px;
            transition: opacity 0.3s;
            position: relative;
            opacity: 0; 
        }

        .ir-banner.active .ir-link-item:nth-child(1) {
            animation: fade-up 0.6s ease-out 1.8s forwards;
        }

        .ir-banner.active .ir-link-item:nth-child(2) {
            animation: fade-up 0.6s ease-out 2.1s forwards;
        }

        .ir-link-item::before {
            content: '';
            position: absolute;
            top: -56px; 
            left: 0;
            width: 12px;
            height: 12px;
            background-color: #0090ff; 
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(0, 144, 255, 0.8);
        }

        .ir-link-item:hover {
            opacity: 0.8 !important;
        }

        .ir-link-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .ir-link-desc {
            font-size: 15px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 1.6;
            margin-bottom: 30px;
            min-height: 48px;
        }

        .ir-link-action {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #fff;
            gap: 15px;
        }

        .ir-arrow-svg {
            width: 45px;
            height: 12px;
            fill: none;
            stroke: #fff;
            stroke-width: 1;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            overflow: visible;
        }

        .ir-link-item:hover .ir-arrow-svg {
            transform: translateX(10px);
        }

        /* --- Responsive (Mobile Fix) --- */
        @media (max-width: 1024px) {
            .ir-main-title { font-size: 42px; }
            .ir-bottom-section { gap: 40px; }
        }

        @media (max-width: 768px) {
            .ir-banner { 
                height: auto; 
                padding: 80px 0;
                -webkit-clip-path: none !important;
                clip-path: none !important; 
                animation: none !important; 
            }
            .ir-text-content{padding-left:0px}
            .ir-container { padding: 0 20px; padding-bottom: 0; }
            
            .ir-top-section { 
                flex-direction: column; 
                padding-bottom: 60px;
                opacity: 1 !important; 
                animation: none !important;
            }

            .ir-divider-line {
                width: 100% !important; 
                animation: none !important;
            }

            .ir-link-item { 
                width: 100%; 
                opacity: 1 !important; 
                animation: none !important;
            }

            .ir-category { margin-right: 0; margin-bottom: 20px; margin-top: 0; }
            
            .ir-main-title { font-size: 25px; }
            .ir-description { font-size: 15px; }

            .ir-bottom-section {
                flex-direction: column;
                align-items: flex-start;
                margin-top: 0;
                padding-top: 50px;
                gap: 50px;
            }
			.ir-link-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
}


            .ir-link-item::before { display: none; }
        }




		@media all and (min-width:1px) and (max-width:320px) {
		
		
		
		
		.ev-card-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  margin-top: 15px;
  margin-bottom: 15px;
  letter-spacing: -0.5px;
  transition: color 0.3s;
}
	.ev-card-desc {
  display: block;
  font-size: 11px;
  color: #666;
  line-height: 1.5;
  word-break: keep-all;
  font-weight: 600;
}	
		.ev-sol-title {
  font-size: 20px;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
  word-break: keep-all;
}

.ev-sol-label {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: #0056b3;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
  position: relative;
  padding-left: 00px;
}


		}