/* ==========================================
   1. GLOBAL & COMMON (모든 페이지 공통)
   ========================================== */
* {
    margin: 0;
    padding: 0;
    font-family: 'Pretendard', sans-serif;
    box-sizing: border-box;
    /* 패딩, 테두리를 포함해 크기 계산 (레이아웃 깨짐 방지) */

}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 중간 정렬 컨테이너 */
html {
    scroll-behavior: smooth;
}

/* 내부 링크 이동 시 부드러운 스크롤 */
body {
    overflow-x: hidden;
    width: 100%;
}

/* 가로 스크롤 발생 방지 */

/* 상단 헤더 (Header) */
header {
    width: 100%;
    height: 80px;
    background-color: #1a375f;
    position: sticky;
    /* 스크롤 시 상단에 고정 */
    top: 0;
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    /* 로고 - 메뉴 양 끝 정렬 */
    align-items: center;
    height: 80px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 50px;
}

/* 로고 스타일 */
.logo {
    flex-shrink: 0;
}

.logo a {
    display: block;
    cursor: pointer;
}

.logo img {
    height: 35px;
    width: auto;
    display: block;
    transition: opacity 0.3s;
}

.logo a:hover img {
    opacity: 0.8;
}

/* 메인 메뉴(GNB) & 서브메뉴(Drop) - Navigation */
.gnb {
    display: flex;
    align-items: center;
}

.menu-item {
    position: relative;
    padding: 0 15px;
    text-align: center;
}

.menu-item>a {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    display: block;
    line-height: 80px;
    transition: opacity 0.3s;
}

.menu-item>a:hover {
    opacity: 0.7;
}

.submenu {
    display: none;
    /* 평상시 숨김 */
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    /* 정확한 중앙 정렬 */
    background: #1a375f;
    min-width: 160px;
    padding: 10px 0;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

.menu-item:hover .submenu {
    display: block;
    /* 마우스 올리면 표시 */
}

.submenu li a {
    display: block;
    padding: 12px;
    color: #fff;
    font-size: 14px;
    transition: background 0.2s;
}

.submenu li a:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Groupware - 간격유지 */
.groupware {
    font-weight: 700;
    color: #ffffff !important;
    white-space: nowrap;
}

.groupware-item {
    padding-left: 30px;
}

/* 푸터 (Footer) */
footer {
    background: #1a375f;
    color: #fff;
    padding: 70px 0 30px;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 50px;
    margin-bottom: 30px;
}

.footer-info h4 {
    font-size: 20px;
    margin-bottom: 15px;
}

.footer-contact p {
    margin-bottom: 8px;
    opacity: 0.8;
    text-align: right;
}

.copyright {
    text-align: center;
    opacity: 0.5;
    font-size: 13px;
}

/* ==========================================
   2. HOMEPAGE CONTENT (메인 페이지 전용)
   ========================================== */

/* 메인 비주얼 슬라이드 영역 */
.main-visual {
    height: 800px;
    position: relative;
    overflow: hidden;
}

.slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 배경 이미지 꽉 채우기 */
    z-index: 1;
}

.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(26, 55, 95, 0.6), rgba(26, 55, 95, 0.4));
    /* 푸른색 계열의 그라데이션 필터 적용 */
    z-index: 2;
}

.main-visual .text-box {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1600px;
    padding: 0 50px;
    z-index: 3;
    text-align: left;
    pointer-events: none;
}

.main-visual .text-box h2 {
    font-size: 52px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

.main-visual .text-box p {
    font-size: 22px;
    color: #eee;
    font-weight: 300;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}


.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    display: flex;
    align-items: center;
    /* ★ 세로 중앙 정렬 */
    justify-content: flex-start;
    /* 가로 왼쪽 정렬 */
    position: relative;
    height: 100%;
}

/* 슬라이드 텍스트 박스 */
/* 텍스트 박스: 위치를 중앙보다 아래로 이동 */
.text-box {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    color: #fff;
    position: relative;
    z-index: 3;
    /* 텍스트 위치를 아래로 밀어줌 */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* 아래쪽 정렬 */
    padding-bottom: 150px;
    /* 바닥에서 150px 정도 띄움 (조절 가능) */
}

.text-box h2 {
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    /* 가독성 확보 */
}

.text-box p {
    font-size: 22px;
    font-weight: 300;
    opacity: 0.9;
}

.swiper-pagination {
    bottom: 80px !important;
}

/* 퀵 메뉴 (Quick Menu) - 카드형 링크 */
/* Quick Menu (아이콘 바탕색 연회색으로 고정) */
.gray-bg-wrapper {
    background-color: #f5f7f9;
    padding: 80px 0;
}

.quick-menu {
    display: flex;
    justify-content: center;
    gap: 15px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

.quick-item {
    flex: 1;
    background: #ffffff;
    padding: 40px 15px;
    border-radius: 15px;
    text-align: center;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    /* 호버 애니메이션 속도 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.quick-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    background-color: #005aab;
}

.icon-circle {
    width: 65px;
    height: 65px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 24px;
    color: #005aab;
    transition: all 0.3s ease;
}

.quick-item:hover .icon-circle {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}


.quick-item h3 {
    font-size: 1.15rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.quick-item p {
    font-size: 0.85rem;
    color: #777;
    line-height: 1.4;
    word-break: keep-all;
}

.quick-item:hover h3,
.quick-item:hover p {
    color: #fff;
    /* 호버 시 글자색 흰색으로 */
}

/* Intro Section */
.intro-section {
    padding: 120px 0;
    text-align: center;
    background-color: #fff;
}

.intro-section h2 {
    font-size: 36px;
    margin-bottom: 10px;
    color: #222;
}

.blue-text {
    color: #007bff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 45px;
    display: block;
}

.description,
.partner-text {
    font-size: 19px;
    color: #555;
    line-height: 1.8;
}

.section-title {
    font-size: 24px;
    color: #888;
    margin-bottom: 60px;
    font-weight: 500;
}

/* Partner Section */
/* 파트너사 로고 섹션 확인 */
.partner-section {
    padding: 100px 0 150px;
    background-color: #f1f5f9;
    text-align: center;
}

.partner-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    align-items: center;
}

.partner-logo {
    background: transparent;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    /* 배경과 그림자만 변화 */
    padding: 0 !important;
    /* 패딩을 0으로 고정하여 내부 이미지 크기 유지 */
    border: none !important;
    overflow: hidden;
}

.partner-logo img {
    /* auto 대신 %를 사용하여 박스 크기에 맞춰 고정합니다 */
    width: 70%;
    height: 60%;
    /* object-fit은 로고가 찌그러지지 않게 비율을 유지해줍니다 */
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.5;
    /* 평소엔 무채색/반투명 */
    transition: filter 0.3s ease, opacity 0.3s ease;
    /* 마우스 올릴 때 떨림 방지 */
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* [마우스 올렸을 때 효과] */
.partner-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
    /* 호버 시 컬러로 복구 */
    /* transform 설정을 아예 제거하여 크기 변동의 여지를 주지 않습니다 */
}

/* 2. 일반 로고: 배경 흰색 변화 */
/* 특정 파트너사(이큐셀) 맞춤 스타일 */
.partner-logo:not(.eqc-hover):hover {
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* 3. 이큐셀 로고: 배경 남색 변화 */
.partner-logo.eqc-hover:hover {
    background: #1a375f;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 1. 이큐셀 평상시 상태: 여기서 사이즈를 줄여야 합니다 */
.partner-logo.eqc-hover img {
    width: 60% !important;
    /* 평소 사이즈를 60%로 고정 */
    height: auto;
    filter: grayscale(100%);
    opacity: 0.3;
    /* 평소엔 은은하게 */
    transition: all 0.3s ease;
    /* 부드러운 변화 효과 */
}

.partner-logo.eqc-hover:hover img {
    filter: none;
    /* 남색 배경 위에서 원래 색상 노출 */
    opacity: 1;
    /* 선명하게 */
    /* width 설정을 지우거나 평소와 똑같이 맞추면 크기가 변하지 않습니다 */
    width: 60% !important;
    transform: none !important;
    /* 혹시 모를 움직임 방지 */
}


.mobile-menu-btn {
    display: none !important;
}




/**/
@media (max-width: 768px) {

    header,
    .nav-container,
    .container,
    .quick-menu,
    .partner-grid {
        min-width: 100% !important;
        /* 1500px 설정을 무시하고 화면 꽉 차게 */
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
    }

    header {
        height: 60px;
    }

    .nav-container,
    .menu-item>a {
        line-height: 70px;
    }

    .nav-container {
        height: 60px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .logo img {
        height: 35px;
        margin-left: -15px;
        margin-bottom: -2px;
    }

    /* 모바일 버튼 보이기 */
    .mobile-menu-btn {
        position: absolute;
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 25px;
        height: 18px;
        cursor: pointer;

        /* [수정] z-index와 위치 */
        z-index: 900 !important;
        /* 메뉴(1000)보다 낮게 설정하여 메뉴가 열리면 가려짐 */
        right: 20px;
        /* 오른쪽 끝에서 20px 띄움 */
        top: 50%;
        /* 헤더 중앙 정렬 */
        transform: translateY(-50%);
    }

    /* 삼지창 */
    .mobile-menu-btn span {
        display: block;
        width: 100%;
        height: 2px;
        background: #fff;
        transition: 0.3s;

        /* [수정] 60px 밀려있던 것을 0으로 */
        margin-left: 0 !important;
    }

    /* 모바일 GNB */
    .gnb {
        display: flex !important;
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background: #1a375f;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 100px 30px 40px;
        /* 위쪽 여백 확보 */
        transition: 0.4s ease-in-out;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);

        z-index: 1000 !important;
    }

    .gnb.active {
        right: 0;
    }

    /* 기본적으로는 숨김 (메뉴 안 열렸을 때) */
    .close-menu {
        display: none;
    }

    /* 햄버거 메뉴가 열렸을 때(.active)만 최우선으로 부활 */
    .gnb.active .close-menu {
        display: block !important;
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;  /* 일부러 크게 잡아서 대충 눌러도 닫히게 합니다 */
        height: 100px;
        z-index: 10001;
        background: transparent; /* 투명 */
        cursor: pointer;
        opacity: 0; /* 완전히 투명하게 */
    }

    .menu-item {
        width: 100% !important;
        padding: 0;
        text-align: left;
    }

    .menu-item>a {
        line-height: 50px;
        font-size: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .menu-item.open .submenu {
        display: block;
    }

    /* 화살표 아이콘 */
    .menu-item.has-sub>a::after {
        content: '\f107';
        /* FontAwesome 화살표 */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 12px;
        transition: 0.3s;
    }

    .menu-item.has-sub.open>a::after {
        transform: rotate(180deg);
    }

    /* .open 클래스가 붙었을 때만 보이게 수정 */
    .menu-item.has-sub.open>.submenu {
        display: block !important;
    }


    /* 서브메뉴 아코디언 */
    .submenu {
        display: none !important;
        position: static !important;
        transform: none !important;
        width: 100% !important;
        background: rgba(0, 0, 0, 0.1);
        box-shadow: none;
    }

    .submenu li a {
        padding: 10px 25px !important;
        line-height: 1.5 !important;
    }


    /* 제목과 그리드 사이 간격 줄이기 */
    .section-title {
        font-size: 18px;
        /* 제목 크기를 모바일에 맞게 축소 */
        margin-bottom: 25px;
        /* 제목과 로고 사이 간격 줄임 */
        color: #666;
    }

    .main-visual {
        height: 600px;
    }

    .main-visual .text-box h2 {
        font-size: 30px;
        font-weight: 600;
    }

    .main-visual .text-box p {
        font-size: 15px;
        font-weight: 350;
    }

    .swiper-pagination {
        margin-bottom: -30px;
    }

    .intro-section p,
    .footer-info p,
    .text-box p {
        word-break: keep-all;
        /* 단어 단위 줄바꿈 */
        overflow-wrap: break-word;
    }

    .text-box h2 {
        font-size: 30px;
        margin-left: -35px;
    }

    .text-box p {
        font-size: 15px;
        margin-left: -35px;
    }

    /* 1. 퀵 메뉴 (회색 배경 위 하얀 박스들) 콤팩트하게 */
    .gray-bg-wrapper {
        padding: 40px 0;
        /* 위아래 여백 절반으로 축소 */
    }

    .quick-menu {
        gap: 10px;
        /* 박스 사이 간격 좁힘 */
    }

    .quick-item {
        padding: 20px 10px;
        /* 내부 여백 축소 */
        border-radius: 10px;
    }

    .icon-circle {
        width: 45px;
        /* 아이콘 원 사이즈 축소 */
        height: 45px;
        margin-bottom: 15px;
        font-size: 18px;
        /* 아이콘 자체 크기 조절 */
    }

    .quick-item h3 {
        font-size: 0.95rem;
        /* 글자 크기 축소 */
        margin-bottom: 5px;
    }

    .quick-item p {
        display: none;
        /* [결정적] 모바일에서 부가 설명은 숨겨야 훨씬 깔끔합니다 */
    }

    /* 2. 케이원텍 소개 섹션 (여백 최적화) */
    .intro-section {
        padding: 60px 0;
        /* 120px -> 60px로 여백 대폭 축소 */
    }

    .intro-section h2 {
        font-size: 24px;
        /* 메인 타이틀 크기 조절 */
    }

    .blue-text {
        font-size: 15px;
        margin-bottom: 25px;
        /* 아래 설명과의 간격 좁힘 */
    }

    .description,
    .partner-text {
        font-size: 14px;
        /* 본문 폰트 사이즈 최적화 */
        line-height: 1.6;
        padding: 0 15px;
        /* 양옆 여백 */
    }

    .section-title {
        margin-bottom: 20px;
    }

    /* 3. 파트너사 로고 (무채색 & 콤팩트) */
    .partner-section {
        padding: 40px 0 50px;
        /* 여백 줄임 */
    }

    .partner-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        /* 로고들 더 밀착 */
    }

    .partner-logo {
        height: 60px;

        box-shadow: none !important;
        /* 그림자 제거 */
    }

    .partner-logo img {
        width: 75% !important;
        filter: grayscale(100%);
        /* [결정적] 무채색 고정 */
        opacity: 0.6;
        /* 너무 튀지 않게 은은하게 */
    }

    footer {
        padding: 40px 0 20px !important;
        /* 상단 70px -> 40px로 대폭 줄임 */
    }

    .footer-grid {
        display: flex;
        flex-direction: column;
        /* 세로 정렬 */
        align-items: center;
        text-align: center;
        padding-bottom: 25px;
        margin-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-info {
        width: 100%;
        margin-bottom: 25px;
        /* 설명과 정보 사이 구분감 */
    }

    .footer-info h4 {
        font-size: 20px;
        margin-bottom: 10px;
        color: #fff;
    }

    .footer-info p {
        font-size: 14px;
        line-height: 1.5;
        word-break: keep-all;
        padding: 0 10px;
    }

    .footer-contact {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
        /* 정보 간 간격 촘촘하게 */
    }

    .footer-contact p {
        text-align: center;
        /* 중앙 정렬 */
        font-size: 13px;
        margin-bottom: 0;
        opacity: 0.8;
    }

    /* 본사 주소가 너무 길면 잘리거나 깨지므로 조절 */
    .footer-contact p:last-child {
        word-break: keep-all;
    }


}