/* 초기화 */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; }
body { overflow-x: hidden; background: url('../../_images/intro/intro_260708.jpg') center/cover no-repeat;}

/* 전체 섹션 */
.ile-hero {
    position: relative;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
}

/* 배경 (이미지 겹침 효과를 위해 Absolute 유지 - layout 아님) */
.bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    z-index: 0;
}
.bg-layer.active { opacity: 1; z-index: 1; }

/* 메인 레이아웃 래퍼 (1600px, 중앙 정렬, Relative) */
.hero-wrapper {
    position: relative;
    max-width: 1600px;
    width: 100%;
    height: 100%;
    margin: 0 auto; /* 좌우 중앙 정렬 */
    z-index: 10;
    color: white;
    
    /* 내부요소 Flex 배치 */
    display: flex;
    align-items: center; /* 수직 중앙 */
    justify-content: space-between; /* 양 끝 배분 (좌:텍스트 / 우:버튼) */
}

/* 왼쪽 영역 (텍스트 + 로고) */
.left-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    flex: 1; /* 공간 차지 */
}

/* 텍스트들이 겹쳐있는 공간 (Grid 사용) */
.text-swapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    margin-bottom: 5vh; /* 로고와의 간격 */
}
.text-swapper .br {
    display:none;
}
.text-group {
    grid-area: 1 / 1 / 2 / 2; /* 한 칸에 다 몰아넣기 */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    pointer-events: none;
}

.text-group.active {
    opacity: 1;
    transform: translateY(0);
}

.sub-title { font-size:24px; margin-bottom:3vh; letter-spacing:-1px; font-weight: 300; color:#fff; word-break:keep-all;}
.main-title { font-size:55px; line-height: 1.2; letter-spacing:-1px; font-weight: 300; word-break: keep-all; }
.main-title strong {font-weight:bold;}

/* 로고 스타일 */
.logo-area img {

}

/* 오른쪽 버튼 영역 (Grid 2x2) */
.nav-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /* Flex 아이템 속성 */
    flex-shrink: 0; 
}

.nav-item {
    width:240px;
    height:240px;
    background: rgba(255, 255, 255, 0.9);
    border-radius:20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration:none;
}

.nav-item .label { font-size:30px; font-weight:600; color:#000000;}
.nav-item .enter-icon {
    display:none;
    margin-top:10px;
}
.nav-item .enter-icon p {
    font-size:16px;
    font-weight:300;
    color:#fff;
    margin-top:2px;
    line-height:1;
}
/* Hover & Active 효과 */
.nav-item:hover, .nav-item.active {
    background-color:rgba(232,69,34,0.8);
    color:#fff;
}
.nav-item:hover .label, .nav-item.active .label {
    color:#fff;
}
.nav-item:hover .enter-icon, .nav-item.active .enter-icon {
    display:block;
}

.ile-hero-renew .nav-area{
    max-width:500px;
}
.ile-hero-renew .nav-area .nav-item_last {
    height:90px;
    grid-column: span 2;
}
.ile-hero-renew .nav-area .nav-item_last,
.ile-hero-renew .nav-area .nav-item_last img {
    width:100%;

}
.ile-hero-renew .nav-area .nav-item_last img.off {
    display:none;
}
.ile-hero-renew .nav-area .nav-item_last:hover img.on {
    display:none;
}
.ile-hero-renew .nav-area .nav-item_last:hover img.off {
    display:block;
}
.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 정확히 정중앙에 배치 */
    
    /* 16:9 비율에 맞춰 강제로 크기를 늘림 */
    width: 100vw;
    height: 56.25vw; /* 9 / 16 = 0.5625 */
    
    min-height: 100vh;
    min-width: 177.77vh; /* 16 / 9 = 1.7777 */
    
    pointer-events: none; /* 배경 영상이므로 클릭 등의 마우스 간섭을 막음 */
}
/* .bg-layer02::before {
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:rgba(0,0,0,0.3);
    z-index:1;
} */
@media screen and (max-width:1680px) {
    .hero-wrapper {max-width:1400px;}
    .sub-title {font-size:24px;}
    .main-title {font-size:50px;}
    .logo-area img {width:200px;}
    .ile-hero-renew .nav-area {max-width:440px;}
    .nav-item {width:210px; height:210px;}
    .nav-item .label {font-size:26px;}
    .text-swapper {margin-bottom:13vh;}
}
@media screen and (max-width:1480px) {
    .hero-wrapper {max-width:1200px;}
    .sub-title {font-size:20px;}
    .main-title {font-size:46px;}
    .logo-area img {width:180px;}
    .ile-hero-renew .nav-area {max-width:420px;}
    .nav-item {width:200px; height:200px;}
    .nav-item .label {font-size:24px;}
    .text-swapper {margin-bottom:10vh;}
}
@media screen and (max-width:1280px) {
    .hero-wrapper {max-width:1080px;}
    .sub-title {font-size:18px; letter-spacing:-0.6px;}
    .main-title {font-size:40px;}
    .logo-area img {width:160px;}
    .ile-hero-renew .nav-area {max-width:380px;}
    .nav-item {width:180px; height:180px;}
    .nav-item .label {font-size:20px;}
    .text-swapper {margin-bottom:8vh;}
}
@media screen and (max-width:1200px) {
    .hero-wrapper {max-width:1000px;}
    .sub-title {font-size:18px; letter-spacing:-0.6px;}
    .main-title {font-size:40px;}
    .logo-area img {width:160px;}
    .ile-hero-renew .nav-area {max-width:360px;}
    .nav-item {width:170px; height:170px;}
    .nav-item .label {font-size:20px;}
    .text-swapper {margin-bottom:8vh;}
}        
/* =========================================
    MOBILE / TABLET (1024px 이하)
    ========================================= */
@media (max-width: 1024px) {
    .hero-wrapper {
        flex-direction: column; 
        padding: 110px 20px 20px 20px;
        justify-content: space-between;
        text-align: left;
        width: 100%;
        min-height: calc(var(--vh, 1vh) * 100);
        height: auto;
        box-sizing: border-box;
    }

    .left-content {
        /* 수정된 부분 시작 */
        flex: 1;  /* 중요: 0에서 1로 변경하여 남은 공간을 모두 채움 */
        width: 100%;
        text-align: center;
        max-width: 100%;
        /* height 관련 속성 삭제 (flex:1이 높이를 제어함) */
        /* 수정된 부분 끝 */
        
        /* 내부 정렬 유지를 위해 필요하다면 아래 속성 유지 */
        display: flex;
        flex-direction: column;
        justify-content:space-between; /* 텍스트 수직 중앙 정렬 */
        padding:0 40px 50px 40px;
    }
    .text-swapper .br {
        display:block;
    }
    .main-title { font-size:40px; text-align:left;}
    .sub-title { font-size:24px; margin-bottom:35px; text-align:left;}
    .logo-area {width:fit-content;}
    .logo-area img {width:auto; margin:0;}
    /* 버튼 가로 1열 배치 */
    .nav-area {
        display: flex;
        width: 100%;
        justify-content: center;

        gap:5px;
    }

    .nav-item {
        width:25%;
        height: 150px;
        border-radius: 8px;
    }
    .ile-hero-renew .nav-area {
        flex-wrap:wrap;
        gap:0;
    }
    .ile-hero-renew .nav-area .nav-item {
        width:calc(25% - 5px);
        margin-right:5px;
    }
    .ile-hero-renew .nav-area .nav-item:nth-child(4n) {
        margin-right:0;
    }
    .ile-hero-renew .nav-area {
        max-width:100%;
    }
    .ile-hero-renew .nav-area .nav-item_last {
        height:auto; 
        width:100%;
        margin-top:5px;                
    }
    .nav-item .label { font-size: 28px; }
    .nav-item .enter-icon { display: none; }
    .logo-area img {width:200px;}
    .text-swapper {margin-bottom:0;}
}
@media screen and (max-width:720px) {
    .hero-wrapper {padding:5vh 20px 5vh 20px;}
    .left-content {padding:0 20px 30px 20px;}
    .sub-title {font-size:22px;}
    .main-title {font-size:40px;}
    .nav-item {height:100px;}
    .nav-item .label {font-size:18px;}
    .nav-item .enter-icon {margin-top:5px;}
    .nav-item .enter-icon img {width:30px; display:none;}
    .nav-item .enter-icon p {font-size:14px;}
    .logo-area img {width:180px;}
    .main-title br {display:none;}

    .bg-video {top:auto; bottom:0; left:0; transform:translate(0,0);}
}
@media screen and (max-width:530px) {
    .sub-title {font-size:18px;}
    .main-title {font-size:36px;}
    .nav-item {height:80px;}
    .nav-item .label {font-size:16px;}
    .nav-item .enter-icon {margin-top:2px;}
    .nav-item .enter-icon img {width:38px;}
    .nav-item .enter-icon p {font-size:12px;}
    .logo-area img {width:130px;}
}
@media screen and (max-width:480px) {
    .sub-title {font-size:17px; letter-spacing:-1px;}
    .main-title {font-size:32px;}
    .nav-item {height:80px;}
    .nav-item .label {font-size:16px;}
    .nav-item .enter-icon {margin-top:2px;}
    .nav-item .enter-icon p {font-size:12px;}
    .logo-area img {width:130px;}
}        
@media screen and (max-width:380px) {
    .left-content {padding:0 10px 30px 10px;}
    .sub-title {font-size:15px; word-break:keep-all; letter-spacing:-1px; line-height:1.5;}
    .main-title {font-size:25px; letter-spacing:-1px; line-height:1.5;}
    .nav-item {height:80px;}
    .nav-item .label {font-size:13px; letter-spacing:-1px;}
    .nav-item.active .label {
        font-size:14px;
    }
    .nav-item .enter-icon {margin-top:2px;}
    .nav-item .enter-icon p {font-size:12px;}
    .logo-area img {width:130px;}
}