/* 1. SUIT 폰트 설정 */
@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2407@1.0/SUIT.woff2'); 
/* � Poppins 폰트 로드 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

/* 전역 변수 설정 */
:root {
    --primary-color: #333333;
    --text-dark: #333333;
    --white: #ffffff;
    --color-blue: #0391fe;
    /* � 추가: 요청된 마우스 오버 배경색 */
    --color-hover-bg: #0798e0; 
    --header-height: 100px;
    --banner-height: 650px;
}

/* Global Styles & Font */
body {
    font-family: 'SUIT', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    min-height: 100vh;
}



a {
    text-decoration: none;
    transition: color 0.3s;
}

/* Content Wrapper (최대 너비 1400px 중앙 정렬) */
.main-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px; 
}

.product-main-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px; 
}



.pwd-wrapper {
    max-width: 1400px;
    margin: 200px auto;
    padding: 0 20px; 
}

/* ================================================================= */
/* 2. GNB (Global Navigation Bar) Styles */
/* ================================================================= */
.gnb-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    background-color: transparent; /* 투명 배경 */
    height: var(--header-height); /* 요청 높이 100px */
    display: flex;
    justify-content: center;
    align-items: center;
	transition: background-color 0.3s ease; 
}

.gnb-header.scrolled {
    /* 🌟 스크롤 후 배경색 지정 */
   background-color: rgba(0, 0, 0, 0.5); 
    
    /* 텍스트가 잘 보이도록 그림자 효과는 유지 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    
}

.gnb-inner {
    width: 100%;
    max-width: 1400px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* 데스크톱 네비게이션 링크 */
.nav-links {
    display: none; 
	margin-top:20px;

}
@media (min-width: 1024px) {
    .nav-links {
        display: flex;
        gap: 40px;
    }




}

.nav-links a {

    color: var(--white);
    font-size: 18px; /* 요청 폰트 크기 */
    font-weight: 500; /* 요청 굵기 */
    white-space: nowrap;
	border:0px solid yellow;
	padding-left:10px;
}

.nav-links a:hover {
    color: rgba(3, 145, 254, 0.7);
}

.gnb-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* GNB 버튼 공통 스타일 (데스크톱) */
.gnb-button {
    height: 30px; /* 요청 높이 30px */
    border-radius: 30px; /* 요청 radius 30 */
    padding: 0 24px;
    font-size: 14px;
    font-weight: 500;
    display: none; 
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}


.nav-links .nav-item {
    position: relative; /* 서브 메뉴의 기준점 */
    display: inline-block; /* 기존 메뉴 항목과 동일하게 가로 배치 */
	padding-bottom: 20px; 
}

.nav-links .sub-menu {
    /* 1. 상위 메뉴에서 30px 아래로 위치 (이전 수정 사항 유지) */
    position: absolute;
    top: 100%; /* .nav-item padding-bottom 30px으로 간격 처리 */
    
    /* 🌟 핵심 수정: 서브 메뉴 중앙 정렬 */
    left: 50%; 
    transform: translateX(-50%); /* 서브 메뉴 너비의 50%만큼 왼쪽으로 이동 */
    
    /* 서브 메뉴 디자인 (나머지 스타일은 유지) */
    background-color: var(--white); 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 50; 
    min-width: 180px; 
    padding: 0; 
    
    /* 기본적으로 숨김 처리 (이전 수정 사항 유지) */
    display: none; 
    flex-direction: column; 
    text-align: left;
}

.nav-links .sub-menu a {
     position: relative; /* ::after 요소의 위치 기준점 */
    padding: 15px 10px; /* 내부 패딩 추가 */
    color: #666666; /* 텍스트 색상 (#333333) */
    display: flex; /* 화살표 배치를 위해 flex 사용 */
    justify-content: space-between; /* 텍스트와 화살표를 양 끝에 정렬 */
    align-items: center;
    font-size: 13px; /* 요청 13px */
    line-height: 1.5;
    transition: background-color 0.3s, color 0.3s;
	padding-right: 30px !important; 
    
}

.nav-links .sub-menu a::after {
    content: "";
    display: block;
    
    /* 화살표 크기 */
    width: 10px; 
    height: 10px; 
    
    /* 화살표 위치 고정 */
    position: absolute;
    right: 15px; /* .sub-menu a 내부 오른쪽에서 15px 떨어진 위치 */
    top: 50%;
    transform: translateY(-50%);
    
    /* 💡 기본 이미지: submenu_arrow_off.png */
    /* CSS 파일 위치에 따라 이미지 경로(url)를 조정해야 합니다. 
       (예: style.css가 /assets/css에 있다면 경로는 ../img/ 입니다) */
    background-image: url('/assets/img/submenu_arrow_off.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    transition: background-image 0.3s; /* 부드러운 전환 효과 */
}

.nav-links .sub-menu a:hover {
    /* 🌟 4. 마우스 오버 시 효과 적용 */
    background-color: #0094FF; /* 요청 배경색 #0094FF */
    color: var(--white); /* 요청 텍스트 색상 흰색 */
    
}

/* 🌟 4. 마우스 오버 시 화살표 색상 흰색으로 변경 */
.nav-links .sub-menu a:hover::after {
     background-image: url('../img/submenu_arrow_on.png');
}

/* 마우스 호버 시 서브 메뉴 표시 */
.nav-links .nav-item:hover .sub-menu {
    display: flex;
}




@media (min-width: 768px) {
    .gnb-button {
        display: flex; /* 회원가입/로그인 버튼 보이기 */
    }





}

/* 회원가입 버튼 스타일 */
.btn-signup {
    background-color: var(--white);
    color: var(--text-dark); /* #333333 */
    border: 1px solid var(--white);
}
.btn-signup:hover {
    background-color: #f0f0f0;
}

/* 로그인 버튼 스타일 */
.btn-login {
    background-color: transparent;
    color: var(--white);
    border: 1px solid var(--white);
}
.btn-login:hover {
    background-color: var(--white);
    color: var(--primary-color);
}


/* Mobile Menu Toggle (Hamburger Icon) */
.mobile-menu-btn {
    display: block;
    padding: 0; /* 여백 제거 */
    cursor: pointer;
    background: none; /* 배경 제거 */
    border: none; /* 혹시 생기는 테두리 제거 */
	margin-top:15px;
}


@media (min-width: 768px) {
    .mobile-menu-btn {
        display: none; 
    }
}

/* Mobile Navigation Overlay */
#mobile-menu {
    position: fixed; /* 🌟 absolute 대신 fixed로 변경하여 뷰포트 기준으로 고정 */
    top: 100px; /* 🌟 GNB 높이(100px)만큼 아래로 내림 */
    left: 0;
    width: 100%;
    /* 🌟 화면 나머지 영역을 가득 채우도록 높이 설정 */
   
    background-color: var(--white); 
    z-index: 999; /* 🌟 최상단으로 z-index를 훨씬 높임 */
    
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
    padding-bottom: 0; /* padding-bottom 제거 (스크롤 문제 해결 위해) */
    
    /* 🌟 메뉴 내용이 길 때 스크롤 가능하도록 설정 */
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; /* iOS 스크롤 부드럽게 */
}

#mobile-menu.active {
    display: flex;
    flex-direction: column;
}

/* 모바일 메뉴 내부 nav의 스타일도 확인 */
#mobile-menu nav {
    width: 100%;
    /* 🌟 메뉴를 스크롤 할 때 배경이 함께 스크롤 되도록 min-height를 100%로 설정 */
    min-height: 100%; 
}
#mobile-menu a {
    color: var(--text-dark);
    padding: 12px 20px;
    font-weight: 600;
}
#mobile-menu a:hover {
     /* 현재: background-color: #f0f0f0; */
    background-color: var(--white); /* 흰색 배경으로 변경 */
    /* 또는 background-color: transparent; */

}
#mobile-menu .mobile-btns {
    padding: 10px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#mobile-menu .mobile-btns button {
    height: 40px;
    border-radius: 30px;
    font-weight: 600;
    border: none;
}
#mobile-menu .mobile-btns .btn-login-mobile {
    background-color: var(--primary-color);
    color: var(--white);
}
#mobile-menu .mobile-btns .btn-signup-mobile {
     background-color: var(--white); /* 흰색 배경으로 변경 */
    color: var(--text-dark);
    border: 1px solid #ccc;
}

#mobile-menu.active .mobile-btns {
  display: flex !important;
}

#mobile-menu .mobile-btns {
  background-color: #fff;
  padding: 20px;
  border-top: 1px solid #eee;
}

@media (max-width: 1023px) {
    #mobile-menu .nav-item {
        /* 상위 메뉴 항목에 패딩 추가 */
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    #mobile-menu .nav-item > a {
        /* 상위 메뉴 링크 */
        display: block;
        color: var(--text-dark);
        font-weight: 500;
        font-size: 18px;
    }

    #mobile-menu .sub-menu {
        /* 기본적으로 숨김 처리 */
        height: 0;
        overflow: hidden;
        transition: height 0.3s ease-out; /* JavaScript 토글을 위한 애니메이션 */
        background-color: #f8f8f8; /* 서브 메뉴 배경색 */
        padding: 0 10px;
    }

    /* 토글 시 서브 메뉴가 보이도록 (JavaScript로 'active' 클래스 추가 예정) */
    /* #mobile-menu .nav-item.active .sub-menu {
        height: auto; 
        padding-top: 10px;
        padding-bottom: 10px;
    } */

    #mobile-menu .sub-menu a {
        padding: 20px 10px;
        display: block;
        color: #555;
        font-size: 15px;
        border-top: 1px dotted #e0e0e0;
    }
    
    #mobile-menu .sub-menu a:first-child {
        border-top: none; /* 첫 번째 항목의 상단 점선 제거 */
    }
}

/* ================================================================= */
/* 3. Main Rolling Banner Styles */
/* ================================================================= */
#main-banner-section {
    height: var(--banner-height); /* 요청 높이 650px */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: background-color 1.5s ease-in-out;
    background-size: cover;
    background-position: center;
    transition: background-image 1.5s ease-in-out, background-color 1.5s ease-in-out;
}

#main-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.3);
    transition: background-color 1.5s ease-in-out;
}

.banner-content {
    /* GNB 높이만큼 패딩을 주어 GNB 아래에 텍스트가 시작하도록 함 */
    padding-top: var(--header-height);
    width: 100%;
    position: relative;
    z-index: 10;
    color: var(--white);
}



/* 롤링 텍스트 컨테이너 */
.rolling-text-container {
    width: 100%;
    max-width: 750px;
    height: 300px; /* 서브타이틀 공간 확보 */
    overflow: hidden;
    position: relative;
    text-align: left;
}

/* 롤링 텍스트 슬라이드 애니메이션 (수평 이동) */
.text-slide {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; 
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0; /* 기본적으로 숨김 */
}

/* 새로운 슬라이드가 오른쪽 밖에서 시작하는 위치 */
.slide-in-start {
    opacity: 0;
    transform: translateX(100%); 
}

/* 이전 슬라이드가 왼쪽으로 퇴장하는 위치 */
.slide-out-left {
    opacity: 0;
    transform: translateX(-100%); 
}

/* 활성 슬라이드 (중앙 위치) */
.text-active {
    opacity: 1;
    transform: translateX(0);
}

/* 폰트 크기 정의 (Desktop) - 롤링 배너 타이틀 */
.main-title {
    font-size: 55px; /* 요청 55px */
    font-weight: 500; 
    line-height: 1.1; /* 타이틀 간격 좁힘 */
    margin-bottom: 8px;
}
.main-subtitle {
    font-size: 20px; /* 요청 20px */
    font-weight: 300; 
    margin-top: 30px; 
}





/* ================================================================= */
/* 4. Pagination Styles */
/* ================================================================= */
#banner-pagination {
    display: flex;
    gap: 12px;
    margin-top: 40px;
}

.pagination-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s;
    cursor: pointer;
    border: none;
    padding: 0;
    outline: none;
}
.pagination-dot.active {
    background-color: var(--white);
    transform: scale(1.2);
}
.pagination-dot:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.8);
}



/* ------------------------------------------- */
/* 모바일 반응형 (Max-width: 768px) */
/* ------------------------------------------- */
@media screen and (max-width: 768px) {
    /* banner-content의 높이를 500px로 설정 */
    .banner-content {
        height: 500px;
        /*
        * 중요: 높이가 500px로 고정되면, 내부 콘텐츠가 넘치지 않도록
        * 필요에 따라 overflow 속성을 추가하는 것을 고려해야 합니다.
        * overflow: hidden; 또는 overflow: auto;
        */
    }
    
    /* 만약 이미지/비디오 배경이 있다면, 콘텐츠 박스에 맞게 조정 */
    .banner-content .banner-media-element { /* 실제 미디어 요소의 클래스명 사용 */
        object-fit: cover; /* 이미지가 잘리더라도 영역을 채우도록 설정 */
        height: 100%;      /* 부모(.banner-content) 높이에 맞춤 */
    }

	 #banner-pagination {
        /* 위치 기준점을 .banner-content에 맞춥니다. */
        position: absolute; 
        
        /* 배너 하단에서 20px (원하는 간격으로 조절 가능) */
        bottom: 20px; 
        
        /* 수평 중앙 정렬을 위한 핵심 속성 */
        left: 50%; 
        transform: translateX(-50%); 
        
        /* 페이지네이션 요소들이 중앙 정렬되도록 추가 */
        display: flex;
        justify-content: center;
        
        /* 너비를 100%로 설정하여 중앙 정렬이 올바르게 작동하도록 보조 */
        width: 100%; 
    }

    /* 페이지네이션 내부 요소 (점 또는 버튼)가 줄 바꿈되는 경우를 대비 */
    #banner-pagination > * {
        margin: 0 5px; /* 페이지네이션 요소 간 간격 유지 */
    }
}


/* ================================================================= */
/* 5. Business Field Section Styles (메인 롤링 아래 섹션) */
/* ================================================================= */
.business-section {
    padding-top: 80px; /* 상단 패딩 */
    padding-bottom: 80px; /* 하단 패딩 */
	  background-size: cover;
    background-position: center;
 background-image: url('/assets/img/business_bg.png');
}

.title-cluster {
    text-align: center; /* 모든 텍스트 중앙 정렬 */
    margin-bottom: 50px;
}

/* 44px 메인 타이틀 */
.section-main-title {
    font-size: 44px; /* 요청 44px */
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 30px;
    line-height: 1.2;
}

/* 18px 서브타이틀 */
.section-subtitle {
    font-size: 18px; /* 요청 18px */
    font-weight: 400;
    color: #666;
    margin-bottom: 30px;
}

/* 18px 영문 서브타이틀 */
.section-en-subtitle {
    font-size: 18px; /* 요청 18px */
    font-weight: 500;
    color: var(--color-blue); /* #0391FE */
    margin-bottom: 20px; /* 사업 분야 타이틀과의 간격 */
	letter-spacing:5px;

}

/* 40px 사업 분야 타이틀 */
.section-field-title {
    font-size: 40px; /* 요청 40px */
    font-weight: 800;
    color: var(--primary-color); /* #1e3a8a */
    margin-top: 0px;
    margin-bottom: 50px;
}

/* 사업 분야 카드 그리드 레이아웃 */
.field-grid {
    display: grid;
    /* 4개의 카드를 중앙에 배치하면서 간격 확보 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px; 
    justify-content: center;
}

/* PC 이미지 기본 설정 */
.mo_title{
    display: none; /* 기본적으로 모바일 이미지는 숨김 */
}
.pc_title {
    display: block; /* 기본적으로 PC 이미지는 보임 */
}


@media (max-width: 768px) {
	.business-section {
		padding-top: 40px; /* 상단 패딩 */
		padding-bottom: 40px; /* 하단 패딩 */
	}

	.mo_title {
		display: block; 
	}

	.pc_title {
		display: none; 
	}

}
@media (min-width: 1200px) {
    /* 데스크톱에서 4개의 카드가 333px 너비로 딱 맞도록 설정 */
    .field-grid {
        grid-template-columns: repeat(4, 333px);
        /* 4개 카드가 가운데 오도록 정렬 */
        justify-content: center; 
    }

	.business-section {
		padding-top: 40px; /* 상단 패딩 */
		padding-bottom: 80px; /* 하단 패딩 */

	}

}

/* 사업 분야 카드 스타일 */
.field-card {
    background-color: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
}
.field-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

/* 카드 내 링크 스타일 */
.field-link {
    display: block;
    color: inherit;
}

/* 이미지 컨테이너 (333px x 400px 배경 역할 및 상대 위치 설정) */
.field-image-container {
    width: 100%;
    height: 400px; /* 요청 400px 높이 */

    position: relative; /* 버튼과 텍스트의 절대 위치 기준 */
    overflow: hidden;
    /* 공통 배경 설정은 제거하고 개별 클래스에서 지정 */
    background-size: cover;
    background-position: center;
}

/* 5.1. 개별 사업 분야 카드 배경 이미지 정의 */
/* 실제 이미지 URL로 교체하세요. 현재는 구분을 위한 플레이스홀더입니다. */
.field-image-container.field-1 {
    background-image: url('/assets/img/business_card1.png');
}
.field-image-container.field-2 {
    background-image: url('/assets/img/business_card2.png');
}
.field-image-container.field-3 {
    background-image: url('/assets/img/business_card3.png');
}
.field-image-container.field-4 {
    background-image: url('/assets/img/business_card4.png');
}


/* 텍스트 가독성을 위한 오버레이 */
.field-image-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2); /* 반투명 검은색 오버레이 */
    z-index: 10;
}

/* 이미지 컨테이너 내 텍스트 그룹 (좌측 상단에 위치) */
.field-text-overlay {
    position: absolute;
    top: 30px; /* 상단 여백 */
    left: 30px; /* 좌측 여백 */
    right: 18px; /* 버튼과의 간격 확보 (58px + 20px = 78px) */
    text-align: left;
    color: var(--white);
    z-index: 20; /* 오버레이 위로 올라오도록 */
}

/* 카드 내 타이틀 및 설명 */
.field-card-title {
    font-size: 16px;
    font-weight: 400;
    margin-top: 0; 
    margin-bottom: 4px;
}
.field-card-description {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0;
}


/* 버튼 영역 (58x58 라운드) */
.field-button {
    position: absolute;
    top: 320px; /* 오른쪽 위 20px 여백 */
    right: 20px;
    width: 58px; /* 요청 58px */
    height: 58px; /* 요청 58px */
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 30; /* 텍스트와 오버레이보다 가장 위에 배치 */
}

/* 버튼 이미지 스타일 */
.field-button img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s;
}

/* 마우스 오버 전 이미지 (기본) */
.field-button .btn-off-img {
    opacity: 1;
}
/* 마우스 오버 시 이미지 (숨김) */
.field-button .btn-on-img {
    opacity: 0;
}

/* 마우스 오버 시 이미지 교체 효과 (field-card hover 시) */
.field-card:hover .field-button .btn-off-img {
    opacity: 0;
}
.field-card:hover .field-button .btn-on-img {
    opacity: 1;
}


/* ================================================================= */
/* 6. Responsiveness (Mobile Font Adjustments) */
/* ================================================================= */

/* Mobile Adjustments (Max 640px) */
@media (max-width: 640px) { 

.rolling-text-container {

    height: 400px; /* 서브타이틀 공간 확보 */

}

    .main-title {
	margin-top:150px;
        font-size: 30px; /* Mobile Rolling Title (30px) */
    }
    .main-subtitle {
        font-size: 18px; /* Mobile Rolling Subtitle (18px) */
    }
    
    .section-main-title {
        font-size: 30px; /* Mobile Section Main Title (44px -> 32px) */
    }

	 .section-sub-title {
        font-size: 16px; /* Mobile Section Main Title (44px -> 32px) */
    }


	.page-header-line {
		height: 30px;
		margin-bottom: 10px; /* 타이틀과의 간격 */

	}

	.section-en-subtitle {
		font-size: 16px; /* 요청 18px */
	}



    .section-field-title {
        font-size: 26px; /* Mobile Section Field Title (40px -> 30px) */
    }


    
    .gnb-inner, .main-wrapper {
        padding: 0 15px;
    }

    .field-grid {
        /* 모바일에서는 1열로 표시 */
        grid-template-columns: 1fr;
    }
    
    /* 모바일에서는 버튼이 너무 크지 않도록 약간 줄일 수 있습니다 (선택 사항) */
    .field-button {
        width: 50px;
        height: 50px;
    }
    
    /* 모바일에서 텍스트 영역이 너무 넓어지는 것을 방지 */
    .field-text-overlay {
        right: 80px;
    }
}


/* ================================================================= */
/* 6. Solution Section Styles */
/* ================================================================= */

.solution-section {
    padding-top: 80px; 
    padding-bottom: 0px; 
    background-color: #ffffff; 
    background-image: url('/assets/img/solution_bg.png'); 

    /* 🌟 수정: 배경 이미지를 상단(top)에서 100px 아래(Y축)로, 가운데(X축)에 위치 */
    background-position: center 220px; 
    background-repeat: no-repeat; /* 배경 이미지가 반복되지 않도록 추가 */
    position: relative; 
  
}


/* Solution Main Title (48px, Left-aligned) */
.solution-main-title {
    font-size: 48px; 
    font-weight: 700;
    color: var(--text-dark); 
    line-height: 1.25;
    margin-bottom: 50px;
    text-align: left;
}


/* Solution Content Layout: Visual과 List의 기준 컨테이너 */
.solution-content-layout {
    /* 🌟 Absolute Position 기준점 설정 */
    position: relative; 
    /* 이미지 높이 (400px)에 맞춤 */
    height: 440px; /* 전체 섹션의 높이 고정 (필요에 따라 조정) */
    max-width: 1400px;
    margin: 0 auto;
}

/* PC 이미지 기본 설정 */
.solution-image-mobile {
    display: none; /* 기본적으로 모바일 이미지는 숨김 */
}
.solution-image-pc {
    display: block; /* 기본적으로 PC 이미지는 보임 */
}



/* 1. Image Container: Visual 영역 (Content Layout 내에서 차지) */
.solution-visual {
    /* 🌟 Content Layout 내에서 일반적인 흐름으로 배치 */
    position: relative;
    width: 100%;
    height: 440px; /* Content Layout과 동일 높이 */
    overflow: hidden; 
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.solution-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 컨테이너를 가득 채우도록 */
    display: block;
}




/* 2. Feature List Container: 이미지 위 오른쪽 60% 배치 */
.solution-feature-list {
    /* 🌟 Content Layout (height: 400px)을 기준으로 절대 위치 설정 */
    position: absolute; 
    top: 50px; 
    /* 오른쪽 끝 20px 마진을 위해 right: 20px, 왼쪽은 남은 영역을 차지하도록 */
    right: 20px;
    width: 60%; 
    max-width: 840px; /* 1400px * 0.6 */
    z-index: 20; 
    /* 🌟 배경 투명으로 설정 */
    background-color: transparent; 
    border-radius: 12px;
    padding: 0; /* padding은 item 내부에서 처리 */
    box-shadow: none; /* 오버레이 배경이 투명이므로 리스트 박스 쉐도우 제거 */
    height: 100%; /* Visual 높이(400px)에 맞춤 */
}


/* Feature Item (단일 ROW, 높이 109px, Flexbox) */
.solution-feature-item {
position: relative;
    height: 109px; 
    display: flex; 
    align-items: center;
    justify-content: space-between; 
    
    padding: 0 30px; 
    border-bottom: 1px solid #ddd; 
    transition: all 0.3s;
    position: relative; 
    cursor: pointer;
    /* 🌟 수정: 아이템의 배경색을 투명으로 설정 */
    background-color: transparent; 
}
.solution-feature-item:last-child {
    border-bottom: none; 
}

/* 🌟 마우스 오버 효과 (배경색 및 텍스트 색상 변경) */
.solution-feature-item:hover {
    background-color: var(--color-hover-bg); /* #0798E0 */
    color: var(--white);
	border-radius:10px;
	 border-bottom: 0px solid #ddd; 
}

/* Icon and Title alignment */
.feature-icon-title {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 250px; 
    margin-right: 0px;
}

/* 🌟 Feature Icon (이미지 컨테이너) */
.feature-icon {
    width: 14px; /* 이미지 크기 설정 */
    height: 14px;
    margin-right: 15px;
    flex-shrink: 0;
    position: relative; /* 이미지 절대 위치 기준 */
}

/* 🌟 아이콘 이미지 공통 스타일 (겹쳐서 배치) */
.feature-icon img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s; /* 교체 시 부드러운 전환 */
    object-fit: contain; /* 이미지가 잘리지 않도록 */
}

/* 🌟 호버 이미지 (on)는 기본적으로 숨김 */
.feature-icon .icon-on {
    opacity: 0; 
}

/* 🌟 호버 시 off 이미지 숨김, on 이미지 표시 */
.solution-feature-item:hover .feature-icon .icon-off {
    opacity: 0;
}

.solution-feature-item:hover .feature-icon .icon-on {
    opacity: 1;
}


/* Feature Title */
.feature-title {
    font-size: 24px; 
    font-weight: 500;
    color: #fff; /* 기본 색상 */
    margin: 0;
    line-height: 1.2;
    flex-shrink: 0;
}

/* Feature Description (남은 공간 차지) */
.feature-description {
    font-size: 16px; 
    font-weight: 400;
    color: #fff;
    margin: 0; 
    line-height: 1.5;
    flex-grow: 1; 
    padding-right: 50px; 
}

/* 🌟 마우스 오버 시 텍스트/화살표 색상 흰색으로 변경 */
.solution-feature-item:hover .feature-title,
.solution-feature-item:hover .feature-description {
    color: var(--white) !important;
}

/* 🌟 화살표 아이콘 스타일 */
.feature-arrow {
    position: relative; /* flex item으로 오른쪽 끝에 위치 */
    display: flex;
    align-items: center;
    height: 100%;
    flex-shrink: 0;
    opacity: 0; /* 🌟 기본적으로 숨김 */
    transition: opacity 0.3s;
}
.feature-arrow svg {
    color: var(--white);
    stroke: var(--white);
    width: 20px;
    height: 20px;
    margin-left: 10px;
}

/* 🌟 마우스 오버 시 화살표 표시 및 텍스트/아이콘 색상 흰색으로 변경 */
.solution-feature-item:hover .feature-title,
.solution-feature-item:hover .feature-description {
    color: var(--white) !important;
}
.solution-feature-item:hover .feature-icon svg circle {
    stroke: var(--white) !important;
}
.solution-feature-item:hover .feature-icon svg {
    color: var(--white) !important;
}

.solution-feature-item:hover .feature-arrow {
    opacity: 1;
}

/* 모바일 조정 (단일 열, 높이 고정 해제) */
@media screen and (max-width: 768px) {

	.solution-section {
		 padding-top: 40px; 
		background-image: none; 	  
	}


 /* 1. 레이아웃 높이 600px 설정 */
    .solution-content-layout {
          position: relative; /* 높이 변경 시 다시 relative 설정 */
		

    }

	.solution-visual {
        height: 610px;
    }

	.solution-content-layout {
		height: 610px; /* 전체 섹션의 높이 고정 (필요에 따라 조정) */
	}

    
    /* 2. 이미지 표시 전환 */
    .solution-content-layout .solution-image-pc {
        display: none; /* 모바일에서 PC 이미지 숨김 */

    }


    .solution-content-layout .solution-image-mobile {
        display: block; /* 모바일에서 모바일 이미지 표시 */
        width: 100%;
        height: 100%; /* 부모 레이아웃 높이에 맞춤 (600px) */
        object-fit: cover; /* 이미지가 잘리지 않게 채움 */
		border:0px solid yellow;

    }

	.solution-main-title{ font-size: 26px;}
    .solution-feature-list {
        position: absolute;
        top: 80%; /* 원하는 위치로 조정 (예: 50%는 중앙, 20%는 상단) */
        left: 50%;
        transform: translate(-50%, -50%); /* 중앙 정렬 */
        width: 90%; /* 화면 너비에 맞게 조정 */
        z-index: 10; /* 이미지 위에 오도록 설정 */

    }



    .solution-feature-item {
		 position: relative; 
        display: block; /* 모바일에서는 다시 블록 요소로 변경 */
        height: auto; /* 높이 고정 해제 */
        padding: 15px; 
        margin-bottom: 10px;
    }

    .feature-icon-title {
		font-size:22px;
        margin-bottom: 8px;
        width: auto;
    }
    .feature-description {
	width:80%;
		font-size:16px;
        margin-left: 25px; 
        padding-right: 0;
    }



   /* ✨ 핵심 수정: 모바일에서 .feature-arrow를 항상 보이게 하고 위치 지정 */
    .solution-feature-list .feature-arrow {
        display: block !important; /* !important로 다른 display: none 규칙을 무시하고 강제로 표시 */
        position: absolute;
        top: 50%; /* feature-icon-title 영역 오른쪽 중간 */
        right: 15px; /* 오른쪽 끝에서 여백 15px */
        transform: translateY(-50%); /* 수직 중앙 정렬 */
        width: 20px; /* 화살표 크기 조정 (필요에 따라) */
        height: auto;
		border:0px solid yellow;
		  opacity: 1 !important;     
    }

	 .solution-feature-list .feature-item .feature-arrow svg {
        width: 100%;
        height: 100%;
        /* 모바일에서 화살표 색상 조정이 필요하면 추가 */
        /* stroke: var(--primary-color); */
    }
    
	 .solution-feature-list .feature-item:hover .feature-arrow {
        display: block; /* PC 호버 스타일로 인해 숨겨졌다면 다시 표시 */
        opacity: 1; 
    }

	

}


/* ================================================================= */
/* 7. Service Section Styles (New Area) */
/* ================================================================= */


.service-area {
    margin-top: 100px; 
    max-width: 1400px; 
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px; /* main-wrapper와 동일한 좌우 패딩 */
}

/* Header Row: Service Title (Left) + Controls (Right) */
.service-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; 
    margin-bottom: 30px; 
}

/* 🌟 Service Title (50px, #333333) */
.service-title {
    font-size: 50px;
    font-weight: 700;
    color: var(--text-dark); /* #333333 */
    margin: 0;
}

.service-controls {
    display: flex;
    align-items: center;
    gap: 30px; 
}

.service-buttons {
    display: flex;
    gap: 10px;
}

/* Tab Button 공통 스타일 */
.btn-tab {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.2s;
    background-color: #eeeeee; /* 🌟 비활성화 기본 배경색 */
    color: #999999; /* 🌟 비활성화 기본 글씨색 */
}



/* 🌟 Active 상태: 공지사항 버튼 (#0798E0 배경, 흰색 글씨) */
.btn-tab.active {
    background-color: var(--color-hover-bg) !important; /* #0798E0 */
    color: var(--white) !important;
}

/* 🌟 초기 상태 (공지사항 버튼이 기본 Active) */
.btn-notice.active {
    background-color: var(--color-hover-bg); /* #0798E0 */
    color: var(--white);
}

/* 보도자료 버튼 초기 상태 (비활성화) */
.btn-press {
    background-color: #eeeeee;
    color: #999999;
}


/* 전체보기 텍스트 및 아이콘 */
.view-all {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #0798E0;
}


/* 🌟 추가: 새로운 이미지 아이콘 스타일 (24x24px) */
.view-all-icon {
    width: 24px;
    height: 24px;
    margin-left: 5px; /* 텍스트와의 간격 */
    flex-shrink: 0;
}

/* Content Area & Switching */
.service-content-area {
    position: relative;
    min-height: 350px; 
	border:0px solid yellow;
}

.service-content {
    /* 기본적으로 겹치도록 절대 위치 및 숨김 */
    position: absolute; 
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none; /* 숨겨진 동안 클릭 방지 */
    display: grid; 
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-content.active-tab {
    /* 활성화되면 보이도록 */
    opacity: 1;
    position: static; 
    pointer-events: auto;
}

/* Item Style (3-Column) */
.service-item {
  
    border-radius: 12px;
    padding-top: 30px;
    
    height: 100%; 
    display: flex;
    flex-direction: column;
}

/* 🌟 1. 날짜 (16px #999999) */
.item-date {
    font-size: 16px;
    color: #999999;
    margin-bottom: 15px; /* 타이틀과의 간격 */
    margin-top: 0;
}

/* 🌟 2. 타이틀 (24px #333333) */
.item-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark); /* #333333 */
    margin-top: 0;
    margin-bottom: 15px; /* 내용과의 간격 */
}

/* 🌟 3. 내용 (16px #333333) */
.item-summary {
    font-size: 16px;
   overflow: hidden; /* 영역을 벗어나는 내용을 숨김 */
    text-overflow: ellipsis; /* 숨겨진 텍스트를 말줄임표로 표시 */
    
    /* ⚠️ 핵심 속성: 3줄로 제한 */
    display: -webkit-box; /* Flexbox 기반의 박스 모델 사용 */
    -webkit-line-clamp: 3; /* 내용을 3줄로 제한 */
    -webkit-box-orient: vertical; /* 텍스트 방향을 세로로 지정 */
    
    /* 줄 높이 설정 (선택 사항: 텍스트가 겹치는 것을 방지) */
    line-height: 1.5; /* 줄 높이 */
    max-height: calc(1.5 * 3em); /* (줄 높이 * 3줄)의 최대 높이 */
    
    color: #666; /* 텍스트 색상 예시 */
    margin-top: 5px;
}


/* 모바일 조정 */
@media (max-width: 768px) {

	.service-area {
		margin-top: 40px; 

		padding: 0 20px; /* main-wrapper와 동일한 좌우 패딩 */
	}

    .service-title {
        font-size: 30px;
    }
    .service-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
   .service-controls {
        display: flex;       /* 탭 버튼들이 여전히 유연하게 배치되도록 flex 유지 */
        flex-wrap: wrap;     /* 버튼이 한 줄에 다 안 들어갈 경우 줄바꿈 허용 */
        width: 100%;         /* ✨ 핵심: 부모 너비 전체(100%) 차지 */
        margin-top: 20px;    /* 서비스 제목과의 간격 추가 (선택 사항) */
		border:0px solid yellow;
    }
    
    .service-content {
        grid-template-columns: 1fr; /* 모바일에서 1열 */
		border:0px solid yellow;
		 gap: 10px;
		 margin-bottom:30px;
    }

	.service-item {
		padding-top: 10px;
	}

	.item-summary {
		
		line-height: 1.2; /* 줄 높이 */

	}



    .btn-tab {
        padding: 8px 26px;
        font-size: 14px;
    }
}


/* ================================================================= */
/* 8. Careers Section Styles */
/* ================================================================= */


.career-section {
    width: 100%;
    /* 🌟 PC 기본 높이 설정 */
    height: 280px; 
    
    /* 🌟 배경색 (배경 이미지 요청이 없으므로 임시로 파란색 계열 사용) */
     background-image: url('/assets/img/career_bg.png'); 
    background-size: cover;
    background-position: center;
    
    /* 콘텐츠 정렬을 위한 Flexbox 설정 */
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center;
}

.career-section .career-content {
    /* main-wrapper가 max-width를 가지고 있으므로 이를 활용 */
    display: flex;
    justify-content: space-between; /* 양 끝 정렬 */
    align-items: center;
    width: 100%; /* main-wrapper 내에서 전체 너비 사용 */
}

/* 🌟 왼쪽 텍스트 영역 스타일 */
.career-section .career-text-container {
    color: #ffffff;
    /* PC 환경에서 왼쪽 여백을 위해 약간의 공간 확보 */
    padding-left: 20px; 
}

.career-section .career-text-small {
    /* CAREERS 텍스트 */
	font-family: 'SUIT', sans-serif;
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 15px;
    display: block;
}

.career-section .career-text-large {
    /* A Better Company... 텍스트 */
	font-family: 'SUIT', sans-serif;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
    display: block;
}

/* 🌟 모바일 환경 텍스트 정렬 및 간격 조정 */
@media (max-width: 768px) {

  .career-section {
        /* 1. 배경 이미지 설정 */

        background-image: url('/assets/img/career_bg_m.png');
        height: 406px;
        /* 모바일에서는 콘텐츠가 세로로 배치되도록 설정 */
        flex-direction: column; 
        text-align: center;
    }

  .career-section .career-content {
        flex-direction: column;
        align-items: flex-start;
        /* 🌟 전체 너비를 사용하지만, 좌우 패딩을 적용하여 오버플로우 방지 */
        width: calc(100% - 40px); /* 뷰포트 너비 - 좌우 20px 패딩 */
        margin: 0 20px; /* 좌우 20px 여백 적용 및 중앙 정렬 해제 */
    }

    .career-section .career-text-container {
        /* 🌟 패딩을 0으로 설정하고, 정렬은 부모 .career-content에 맡깁니다. */
        padding: 0 0 30px 0; 
        text-align: left;
        width: 100%; /* 부모의 calc(100% - 40px) 너비를 상속받음 */
    }

	.career-section .career-text-small {

		font-size: 16px;

	}

    .career-section .career-text-large {
        font-size: 26px;
    }
}

/* 🌟 오른쪽 버튼 영역 스타일 */
.career-buttons-container {
    display: flex;
    gap: 20px; /* 버튼 간 간격 */
    align-items: center;
    /* 오른쪽 영역 중앙 정렬을 위해 필요 시 justify-content: center; */
}

.career-button {
    /* 🌟 요청된 버튼 크기 */
    width: 340px;
    height: 80px;
    
    /* 🌟 버튼 디자인 */
    background-color: #ffffff; /* 흰색 배경 */
    border: 1px solid #e0e0e0;
    border-radius: 0px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    color: var(--text-dark); /* 텍스트 색상 */
    text-align: left; /* 내부 요소 왼쪽 정렬 */
    padding: 0 40px; /* 내부 패딩 */
    
    /* 내부 아이콘/텍스트/화살표 배치를 위한 Flexbox */
    display: flex;
    align-items: center;
    justify-content: space-between; /* 텍스트와 화살표를 양 끝에 정렬 */
    transition: background-color 0.3s;
}

.career-button:hover {
    background-color: #f7f7f7;
}

/* 🌟 버튼 내부 요소 스타일 (아이콘, 텍스트, 화살표) */
.career-img-btn {
    /* 아이콘 이미지 크기 조정 (기존 이미지 사용) */
    width: 31px; 
    height: 35px;
    margin-right: 15px;
    flex-shrink: 0;
}

.career-img-btn1 { /* 아이콘 이미지 크기 조정 (기존 이미지 사용) */ width: 25px; 
height: 27px; margin-right: 20px; flex-shrink: 0; }

.career-button .button-text-area {
    /* 텍스트와 서브 텍스트를 담을 컨테이너 */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.career-button .main-text {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.career-button .main-text:hover {
   color:#0798E0;
}

/* 🌟 화살표 구현 */
.career-button::after {
    /* 텍스트 화살표 제거 */
    content: ''; 
    
    /* 🌟 핵심 수정: 이미지 크기에 맞춰 가상 요소 크기 지정 */
    width: 38px; /* 적절한 이미지 너비 */
    height: 38px; /* 적절한 이미지 높이 */
    
    /* 🌟 배경 이미지 설정 */
    background-image: url('/assets/img/career_bt.png'); /* 이미지 경로 */
    background-size: contain; /* 크기에 맞게 조정 */
    background-repeat: no-repeat;
    background-position: center;
    
    margin-left: 15px;
    
    /* 호버 애니메이션을 위한 트랜지션 (이미지가 이동하도록 설정) */
    transition: transform 0.3s ease-out; 
}

.career-button:hover::after {
    transform: translateX(10px);
}


/* 🌟 모바일 환경 버튼 조정 */
@media (max-width: 768px) {
     .career-buttons-container {
        flex-direction: column;
        gap: 15px;
        width: 100%; /* 🌟 부모 .career-content 너비(100%)를 사용 */
        
        /* 🌟 패딩 제거 (텍스트와 시작점을 맞추기 위해 20px 마진을 버튼 자체에 적용) */
        padding-left: 0; 
    }
    .career-button {
        /* 🌟 너비를 100%로 설정하여 컨테이너 너비에 꽉 채움 */
        width: 100%; 
        max-width: 260px;
        margin: 0; /* 중앙 정렬 해제 */
        
        /* 🌟 텍스트 시작점(20px)에 맞추기 위해 버튼 자체에 왼쪽 마진 적용 */
        margin-left: 0px; /* .career-buttons-container에 패딩이 있었으므로 0으로 설정 */
    }

	.career-button .main-text {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

}



/* ================================================================= */
/* 9. Footer Section Styles */
/* ================================================================= */


/* 1. Top Row: Contact Info (Background #222222, Height 50px) */
.footer-top-row {
    background-color: #222222;
    height: 50px;
    display: flex; /* 내부 컨텐츠 중앙 정렬을 위해 */
    align-items: center;
}

.footer-contact-info {
    /* main-wrapper (1400px)를 사용하여 중앙 정렬 */
    height: 100%;
    display: flex;
    justify-content: center; /* 🌟 수평 중앙 정렬 */
    align-items: center;
    gap: 20px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 구분선 (| 모양 대신 CSS로 수직선 구현) */
.contact-item.separator {
    position: relative;
    padding-left: 20px;
}
.contact-item.separator::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background-color: #444444; /* 어두운 구분선 */
}

/* 🌟 아이콘 19x19 */
.contact-icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

/* 🌟 TEL/FAX/E-mail 텍스트 (16px #999999) */
.contact-label {
    font-size: 16px;
    font-weight: 500;
    color: #999999;
    margin-right: 5px;
    flex-shrink: 0;
}

/* 🌟 전화번호/이메일 값 (FFFFFF) */
.contact-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--white); /* #FFFFFF */
    flex-shrink: 0;
}


@media screen and (max-width: 768px) {

.footer-top-row {

    height: auto;

}
    
    /* 1. 푸터 컨테이너 */
    .footer-contact-info {
        display: flex;
        flex-wrap: wrap; 
        justify-content: flex-start; 
        /* 항목들이 화면 가장자리에 붙지 않도록 좌우 20px 여백 확보 */
        padding: 10px 20px; 
    }

    /* 2. 개별 항목: 2개씩 가로 배열 및 내부 가로 정렬 */
    .contact-item {
        /* ✨ 핵심 수정 1: width 50%가 정확히 작동하도록 설정 */
        box-sizing: border-box; 
        width: 47%; /* TEL(50%) + FAX(50%) = 100%로 첫 줄 완성 */
        margin-bottom: 0px; 
        
        /* 내부 아이콘, 레이블, 값을 가로로 배열 */
        display: flex; 
        flex-direction: row; 
        align-items: center; 
        justify-content: flex-start; 
        
        /* 50% 너비 내에서 내용과 경계선 사이 간격 확보 */
        padding: 0 5px; 
    }
    
    /* 3. 아이콘과 텍스트 크기 및 간격 */
    .contact-icon {
        width: 20px; 
        height: 20px;
        margin-right: 5px; 
    }

    .contact-label,
    .contact-value {
        font-size: 14px !important; /* ✨ 요청하신 14px 텍스트 크기 */
        line-height: 1.4;
        white-space: nowrap; 
        margin-right: 10px; 
    }
    
    /* 4. PC용 구분선 제거 (기존 유지) */
    .contact-item.separator {
        border-left: none; 
        padding-left: 0;
    }
}


/* 2. Bottom Row: Company Info & Navigation (Background #111111) */
.footer-bottom-row {
    background-color: #111111;
    padding: 40px 0;
}

.footer-company-info {
    /* main-wrapper를 사용하여 1400px 중앙 정렬 및 좌측 정렬 */
    display: flex; /* 하위 flex 설정에 영향을 주지 않도록 flex 제거 (기존 main-wrapper와 동일) */
    align-items: flex-start; 
}

/* 🌟 로고와 상세 정보 블록을 묶어 수평 정렬하는 컨테이너 */
.footer-info-cluster {
    display: flex;
    align-items: flex-start; /* 상단 정렬 */
    width: 100%;
    gap: 80px; /* 로고와 정보 블록 사이의 간격 */
}

/* 🌟 A. 로고 */
.footer-logo {
    height: 46px; 
    width: auto;
    flex-shrink: 0; /* 로고 크기 유지 */
    margin-top: 5px; /* 네비게이션과 로고의 상단 맞춤을 위해 약간 조정 */
}

/* 🌟 B. 정보 블록 (footer-nav, info-details, copyright를 수직 배치) */
.footer-details-block {
    display: flex;
    flex-direction: column; /* 세로 정렬 */
    align-items: flex-start;
    flex-grow: 1; /* 남은 공간 모두 사용 */
}


/* 2. 내비게이션 링크 */
.footer-nav {
    display: flex;
    gap: 0; 
    margin-bottom: 25px; /* 상세 정보와의 간격 */
}


/* 3. Company Details */
.info-details {
    /* � 카피라이트와의 간격 */
    margin-bottom: 0px; 
}
.info-details p {
    font-size: 16px; 
    color: #666666; 
    line-height: 1.8;
    margin: 0;
}

/* Navigation Links */
.footer-nav {
    display: flex;
    gap: 0; /* 각 메뉴 사이의 간격을 0으로 하고 구분선으로 대체 */
}
.footer-nav a {
    font-size: 16px;
    color: var(--white); /* � #FFFFFF로 변경 */
    padding: 0 15px; /* 메뉴 텍스트 좌우 여백 */
    position: relative;
    transition: color 0.2s;
}

.footer-nav a:first-child{
	 padding: 0 15px 0 0; /* 메뉴 텍스트 좌우 여백 */
}

/* � 메뉴 구분선 (|) 스타일 (마지막 요소 제외) */
.footer-nav a:not(:last-child)::after {
    content: '|';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #333333; /* � 구분선 색상 #333333 */
    font-size: 14px;
}

.footer-nav a:hover {
    color: #999999; /* 호버 시 색상을 약간 어둡게 변경 */
}


/* � '상호:', '대표:', '사업자등록번호:' 등 레이블 색상 */
.info-details .detail-label {
    color: #666666; 
    font-weight: 400;
}
/* 🌟 실제 값 (루미바이오텍(주) 등)의 색상을 #FFFFFF로 변경 */
.info-details .detail-value {
    color: var(--white); /* #FFFFFF */
    font-weight: 500;
}

.info-details .pipe {
    margin: 0 10px;
    color: #666666; /* 파이프 색상 */
}
.info-details .address {
    margin-bottom: 20px;
}

/* 2-3. Copyright */
.copyright {
    font-size: 16px;
    color: #444444;
    margin: 0;
}


@media screen and (max-width: 768px) {
    /* 푸터 섹션 패딩 */
    .footer-bottom-row {
        padding: 30px 0px; 
		margin-bottom:70px;
    }


	/* 2. 문제 요소 (.footer-info-cluster) 너비 및 박스 모델 조정 */
    .footer-info-cluster {
        /* 패딩/경계선이 너비에 포함되도록 설정 */
        box-sizing: border-box; 
        width: 100%; 
        /* 해당 요소 내에서 오버플로우가 발생하면 숨김 */
        overflow-x: hidden;
    }

    /* 3. 상위 Wrapper의 패딩/마진 초기화 (충돌 방지) */
    /* .main-wrapper가 보통 PC에서 max-width와 모바일에서 좌우 패딩을 가집니다. */
    .footer-bottom-row .main-wrapper.footer-company-info {
        /* PC용 최대 너비 제한 해제 */
        max-width: none;
        /* 좌우 패딩이 있다면 0으로 설정하거나, .footer-bottom-row가 패딩을 갖도록 이동 */
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }
    
    /* 4. .footer-bottom-row에 안전한 좌우 여백 다시 부여 */
    .footer-bottom-row {
        /* 메인 래퍼에서 제거된 좌우 패딩을 이 섹션에 적용 */
        padding: 30px 20px; 
    }
    
    /* ---------------------------------------------------- */
    
    /* 기존 자식 요소들도 width: 100%를 정확히 준수하도록 조정 */
    .footer-details-block,
    .footer-info-cluster .info-details {
        width: 100%;
        box-sizing: border-box;
    }
    
    /* 기타 수정된 요소들 (로고, 네비게이션)도 width 100%를 초과하지 않도록 확인 */
    .footer-logo {
        max-width: 150px; /* 로고가 150px을 초과하지 않도록 보장 */
    }


    /* 메인 컨테이너 (순서 제어의 기준) */
    .footer-company-info,
    .footer-info-cluster,
    .footer-details-block { /* 새로 추가된 div도 세로 배열에 방해되지 않도록 설정 */
        display: flex;
        flex-direction: column; 
        align-items: flex-start; /* 모든 항목 왼쪽 정렬 */
        width: 100%;
    }
    
    /* ---------------------------------------------------- */
    /* ✨ 2. 요청 순서대로 Order 속성 부여 */
    /* ---------------------------------------------------- */


    /* 2순위: 푸터 로고 (150*32px) */
    .footer-logo < .footer-details-block  {
        order: 1; 
        width: 150px;
        height: 32px;
        object-fit: contain;
        margin-bottom: 15px; 
    }

	 .footer-logo  {
  
        width: 150px;
        height: 32px;
        object-fit: contain;
        margin-bottom: 15px; 
    }


.footer-nav a {

    padding: 0 7px; /* 메뉴 텍스트 좌우 여백 */

}



	.footer-nav a:first-child{
	 padding: 0 7px 0 0; /* 메뉴 텍스트 좌우 여백 */
}

/* � 메뉴 구분선 (|) 스타일 (마지막 요소 제외) */
.footer-nav a:not(:last-child)::after {
  display:none;
}

    
    /* 3순위: 상호/대표/사업자등록번호 (info-details 컨테이너 자체가 옴) */
    /* info-details는 nav와 logo 사이에 있어야 하므로, 로고가 2순위이므로, 
       footer-details-block이 3순위를 가지거나 info-details가 order를 받아야 합니다. */
    .info-details { 
        order: 3;
        width: 100%;
        margin-bottom: 5px; /* 주소 아래 카피라이트와의 간격 확보 */
    }

    /* 4순위: 카피라이트 */
    .copyright {
        order: 4; 
        font-size: 13px;
        margin-top: 5px; 
    }
    
    /* ---------------------------------------------------- */
    /* 3. 상세 텍스트 스타일 (13px) */
    /* ---------------------------------------------------- */

    /* footer-nav 내부 링크 텍스트 */
    .footer-nav a {
        font-size: 13px;
        /* 기타 스타일: 세로로 쌓이거나 가로로 이어지도록 조정 */
        display: block; /* 링크를 세로로 쌓이게 함 (선택 사항) */
        margin-bottom: 5px;
    }

    /* 상호, 대표, 사업자등록번호 (detail-text 전체) 13px 설정 */
    .info-details p,
    .info-details .detail-label,
    .info-details .detail-value {
        font-size: 13px; 
        line-height: 1.6;
    }
    

    
    /* 주소 */
    .info-details .address {
        margin-top: 5px;
    }

	.footer-info-cluster {

		gap: 10px; /* 로고와 정보 블록 사이의 간격 */
	}

}
/* ================================================================= */
/* 10. Fixed Quick Button Styles */
/* ================================================================= */

.quick-button-fixed {
    position: fixed;
    right: 10px; 
    top: 300px; 
    width: 90px; 
    /* 🌟 수정: 고정 높이 대신 최소 높이(min-height)를 설정하여 배경 이미지 잘림 방지 */
    min-height: 290px; 
    
    background-image: url('/assets/img/pc_pop_btn_bg.png'); 
    background-size: cover;
    background-repeat: no-repeat; /* 배경 이미지가 반복되지 않도록 명시 */
    background-position: center center; /* 배경 이미지가 중앙에 위치하도록 명시 */
    z-index: 100;
    border-radius: 10px;
    overflow: hidden;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; 
    padding: 0px 0; 
    
    display: none; 
}
/* PC 데스크톱 환경에서만 보이도록 설정 */
@media (min-width: 1024px) {
    .quick-button-fixed {
        display: flex;
    }
}

/* 개별 영역 스타일 */
.quick-item {
    display: flex;
    flex-direction: column; /* 아이콘 밑에 텍스트 */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0px 0;
    width: 100%;
    color: var(--white); /* 텍스트 흰색 */
    transition: background-color 0.2s;
	border:0px solid yellow;

}

.quick-item:nth-child(1) {
	margin-top:30px;
}
.quick-item:nth-child(5) {
	margin-bottom:30px;
}


.quick-item:hover {
    /*background-color: rgba(0, 0, 0, 0.1);*/
	color: var(--white);
}

/* 아이콘 스타일 */
.quick-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 5px;
}

/* 🌟 전화번호 스타일 (영역을 벗어나지 않도록) */
.quick-number {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    padding: 0 5px; /* 양옆 5px 여백 */
    word-break: break-all; /* 긴 번호가 90px 너비를 벗어나지 않도록 줄 바꿈 */
}

/* 상담/카톡 텍스트 스타일 */
.quick-label {
    font-size: 13px;
    font-weight: 500;
}

/* 🌟 구분 라인 스타일 */
.quick-separator {
    width: 60px; /* 라인 너비 */
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3); /* 흰색 투명 라인 */
    margin: 0px 0;
}


/* style.css 파일의 가장 하단에 추가 */

/* ================================================================= */
/* 11. To Top Button Styles */
/* ================================================================= */

.to-top-button {
    /* 🌟 위치 고정 (오른쪽 하단) */
    position: fixed;
    right: 30px; 
    bottom: 30px; 
    z-index: 99; /* 다른 요소 위, 퀵 버튼 아래 */
    
    /* 🌟 숨김/표시 애니메이션 */
    opacity: 1;
    transition: opacity 0.3s, visibility 0.3s;
    cursor: pointer;
    line-height: 0;
}

/* 초기 숨김 상태 */
.to-top-button.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 클릭 방지 */
}

/* top.png 이미지 크기는 이미지 원본 크기에 의존, 필요시 조정 */
.to-top-icon {
    width: 76px; /* 적절한 크기 지정 (예시) */
    height: 76px;
    display: block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}

.to-top-button:hover {
    opacity: 0.8;
}

/* 퀵 버튼과 겹치지 않도록 모바일에서 위치 조정 */
@media (max-width: 1023px) {
    .to-top-button {
        right: 15px;
        bottom: 105px;
    }
}

/* 모바일 하단 고정 CTA 버튼 */
.mobile-fixed-cta {
    display: none; /* PC에서는 숨김 */
}

@media (max-width: 768px) {
    .mobile-fixed-cta {

        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background-color: #fff;
        border-top: 1px solid #eee;
    }

    .mobile-fixed-cta a {
        flex: 1;
    }

    .mobile-fixed-cta img {
        display: block;
        width: 100%;
        height: auto;
    }
}