@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    src: local('Pretendard'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/pretendard.woff2') format('woff2');
    unicode-range: U+AC00-D7A3, U+1100-11FF, U+0030-0039; /* 한글 및 숫자 */
}

/* 영문 적용을 위한 설정 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
    unicode-range: U+0041-005A, U+00A0-00FF; /* 기본 라틴 문자 범위 */
}

body {
    margin: 0;
    font-family: 'Poppins', 'Pretendard', sans-serif;
    background: #1a1a1a;
    color: white;
    overflow-x: hidden; /* 가로 스크롤 방지 */
}

ul {
    margin:0 ;
    padding:0;
    list-style: none;
}

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

.logo {
    position: fixed;
    top: 32px;
    left: 5%;
    z-index: 1002;
}

/* 로고가 흰색일 때와 검정색일 때의 필터 */
.logo img {
    filter: brightness(0) invert(1); /* 기본 흰색 로고 (white.svg가 흰색이라고 가정) */
    transition: filter 0.3s ease;
}

.logo.black-logo img {
    filter: brightness(0) invert(0); /* 검정색 로고 */
}

.global-solution {
    position: fixed;
    top: 27px;
    right: 220px;
    font-size: 12px;
    font-weight: 300;
    z-index: 1002;
    padding: 7px 20px;
    background: #bbbb;
    border-radius: 30px;
}

/* 햄버거 메뉴 스타일 */
.menu-hamburger {
    position: fixed;
    top: 32px;
    right: 5%;
    z-index: 1000;
    cursor: pointer;
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index:1002;
}

.menu-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: white; /* 기본 흰색 */
    transition: all 0.3s ease-in-out;
}

.menu-hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.menu-hamburger.active span:nth-child(2) {
    opacity: 0;
}

.menu-hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* 햄버거 메뉴가 검정색 배경에 있어야 할 때 (예: 4번 슬라이드) */
.menu-hamburger.black-logo span {
    background: black;
}

/* 메뉴가 열렸을 때 (X자 모양일 때) 햄버거 아이콘은 항상 흰색 */
.menu-hamburger.active span {
    background: white;
}
/* 햄버거 메뉴 스타일 끝 */

/* 메뉴 오버레이 */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    padding: 80px 140px; /* 상단 여백 조정 */
    box-sizing: border-box;
    color: white;
    align-items: flex-start;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1001;
}

.menu-overlay.active {
    display: flex; /* flex로 변경하여 내부 콘텐츠 정렬 */
    opacity: 1;
}

.menu-overlay .close-btn {
    position: absolute;
    top: 28px;
    right: 5%;
    font-size: 24px;
    cursor: pointer;
}

/* 메뉴 컨테이너 (오버레이 내부의 좌우 분할) */
.menu-content-wrapper {
    display: flex;
    width: 100%;
    padding-top: 150px; /* 로고와 햄버거와의 간격 */
    justify-content: space-between;
    align-items: flex-start;
    position: relative; /* 서브메뉴 컨테이너의 absolute 기준 */
}

/* 메인 메뉴 (HOME, ABOUT US, CONTACT US / SOLUTION, SYSTEM, EXPERIENCE 포함) */
.main-menu {
    display: flex; /* 내부 UL들을 가로로 배치 */
    justify-content: space-between; /* 양쪽 끝으로 배치 */
    width: 100%; /* 부모 컨테이너의 너비에 맞춤 */
    gap: 100px; /* 두 메뉴 그룹 사이의 간격 */
    z-index: 2; /* 서브메뉴보다 낮은 z-index */
}

.main-menu > div {
    /* flex-grow: 1; */
}

.main-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 왼쪽 메인 메뉴 항목 */
.main-menu ul:first-child li {
    margin-bottom: 25px;
}

.main-menu ul:first-child li a {
    font-size: 43px;
    font-weight: 300;
    letter-spacing: -2px;
    display: block;
    white-space: nowrap;
}

.main-menu ul:first-child li a:hover {
    color: #b366ff;
}

/* 오른쪽 메인 메뉴 항목 (SOLUTION, SYSTEM, EXPERIENCE) */
.main-menu ul:last-child {
    text-align: left; /* 오른쪽 정렬 */
}

.main-menu ul:last-child li.has-submenu {
    margin-bottom: 25px;
    position: relative; /* 자식 서브메뉴의 absolute 기준점 */
}

/* 새로 추가된 div (<a>와 <ul>을 감싸는 역할) */
.main-menu ul:last-child li.has-submenu > div {
    position: relative; /* 서브메뉴 ul의 absolute 기준점 */
    display: inline-block; /* 내용물(a태그) 너비에 맞추기 위해 */
}

.main-menu ul:last-child li.has-submenu > div > a {
    font-size: 48px;
    font-weight: 500;
    gap:20px;
    color: rgba(255, 255, 255, 0.3);
    display: flex; /* flex 유지 */
    align-items: center;
    justify-content: flex-end; /* 텍스트와 아이콘을 오른쪽으로 정렬 */
    cursor: pointer;
    transition: color 0.3s ease;
    white-space: nowrap; /* 텍스트가 줄바꿈되지 않도록 */
}

.main-menu ul:last-child li.has-submenu > div > a.active {
    color: white;
}

.main-menu ul:last-child li.has-submenu > div > a .menu-icon {
    font-size: 0.6em;
    margin-left: 10px; /* 아이콘을 텍스트 오른쪽에 배치 */
}

.menu-icon {
    font-size: 0.6em;
    width:40px;
    margin-right: 10px; /* 아이콘을 텍스트 왼쪽에 배치 (기존 margin-left를 변경) */
    transition: transform 0.3s ease; /* 애니메이션 효과 추가 */
    display: inline-block; /* transform 적용을 위해 */
    transform: rotate(0deg); /* 기본은 0도 회전 (왼쪽 화살표처럼 보이게 하려면 유니코드 문자 변경 필요) */
}

/* SOLUTION 링크가 활성화될 때 아이콘 변경 (오른쪽 화살표) */
.main-menu ul:last-child li.has-submenu > div > a.active .menu-icon {
    transform: rotate(180deg);
}

/* 하위 메뉴 (sub-menu) 스타일 */
.sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute; /* 부모 .has-submenu > div 를 기준으로 위치 지정 */
    top: 6px; /* 상위 메뉴 텍스트와 같은 높이 */
    right: calc(100% + 50px); /* 상위 메뉴 텍스트 오른쪽 끝에서 서브메뉴 간격 띄우기 */
    width: 400px; /* 서브메뉴 고정 너비 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    text-align: left; /* 서브메뉴 텍스트는 왼쪽 정렬 */
    z-index: 10; /* 메인 메뉴보다 위로 */
    pointer-events: none; /* 기본적으로 클릭 방지 */
}

/* 활성화된 하위 메뉴만 보이기 */
.sub-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* 활성화될 때만 클릭 허용 */
}

/* 하위 메뉴 항목 스타일 */
.sub-menu li {
    margin-bottom: 15px;
}

.sub-menu li a {
    color: rgba(255, 255, 255, 0.7);
    text-align: right;
    text-decoration: none;
    font-size: 28px;
    font-weight: 200;
    display: block;
    white-space: nowrap;
    transition: color 0.3s ease;
    font-size: 40px !important;
}

.sub-menu li a:hover {
    color: #b366ff;
}

/* 슬라이더 및 콘텐츠 박스 스타일 (기존과 동일하게 유지) */
.slider {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.slider .slide {
    position: relative;
    width: 100%;
    height: 100vh;
	
}


.slider_img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.video-overlay {
    position: absolute; /* .slide 컨테이너를 기준으로 위치를 지정합니다. */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* 흰색 (255,255,255)에 40% 투명도 (0.4) */
    z-index: 2; /* 동영상 위에 배치합니다. */
}
.content-box {
    position: absolute;
    top: 50%; /* 부모 요소의 세로 중앙에 위치 */
    left: 5%;
    right: 5%;
    padding: 0px;
    z-index: 4;
    transform: translateY(-50%); /* 자신의 높이의 50%만큼 위로 이동 */
}
.content-box h1 {font-size:70px;}
.content-box p {font-size:22px; font-weight: 200;}
.content-box button {
    background: #2d0d81;
    border: none;
    padding: 8px 20px;
    color: white;
    cursor: pointer;
    border-radius: 30px;
    font-size: 13px;
}

.content-box .view_2{
    background: rgba(255, 255, 255, 0.1);
    border: none;
    padding: 8px 20px;
    color: white;
    cursor: pointer;
    border-radius: 30px;
    font-size: 13px;
}

.content-box button:hover {
    background: #000;
}


.content-s-box {
    position: absolute;
    top: 50%; /* 부모 요소의 세로 중앙에 위치 */
    left: 5%;
    right: 5%;
    padding: 0px;
    z-index: 4;
    transform: translateY(-50%); /* 자신의 높이의 50%만큼 위로 이동 */
}

.slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    width: 32px;
    height: 32px;
    background: url(/images/Arrow.svg) no-repeat center center;
    background-size: 10px;
    border: none;
    cursor: pointer;
    background-color: #7e7e7e90;
    border-radius: 30px;
    padding: 10px;
}
.slick-prev::before, .slick-next::before {
    content: '' !important;
}
.slick-prev {
    right: 5%;
    top: 46%;
    transform: translateY(-50%) rotate(180deg);
}
.slick-next {
    right: 5%;
    top: 52%;
}
.slick-dots {
    position: absolute;
    bottom: 34px;
    left: 5%;
    display: flex;
    gap: 10px;
}
.slick-dots li {
    list-style: none;
    width:24px;
    text-align:center;
}
.slick-dots li button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FFFFFF;
    opacity: 0.3;
    border: none;
    font-size: 0;
    cursor: pointer;
    position: relative;
}
.slick-dots li.slick-active button {
    width: 20px;
    height: 20px;
    opacity: 1;
    background: transparent;
    border: 4px solid rgba(255, 255, 255, 0.5);
}
.slick-dots li.slick-active button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* currentSlide가 4 또는 5일 때 적용될 스타일 (dark-dot-active 클래스 있을 때) */
.slick-dots li.slick-active.dark-dot-active button {
    background: #454545; /* 버튼 배경색 변경 */
    border: none; /* 테두리 제거 */
}

.slick-dots li.slick-active.dark-dot-active button::before {
    background: black; /* 가상 요소 배경색 변경 */
}

/* 모든 점 버튼의 기본 배경 변경 (선택 안 된 점 포함) */
.slick-dots li.dark-dots button {
    background: #777777; /* 모든 점 버튼의 배경색을 회색으로 변경 */
    border: none; /* 테두리 제거 (기본 버튼에도 적용) */
}

/* 활성화된 점 버튼의 스타일 (dark-dots가 있을 때) */
.slick-dots li.slick-active.dark-dots button {
    background: #454545; /* 활성화된 점 버튼의 배경색을 더 어둡게 변경 */
    border: none; /* 활성화된 점 테두리 제거 */
}

/* 활성화된 점의 ::before 가상 요소 스타일 (dark-dots가 있을 때) */
.slick-dots li.slick-active.dark-dots button::before {
    background: black; /* 활성화된 점의 안쪽 원을 검정색으로 변경 */
}

.apply-btn {
    position: absolute;
    bottom: 50px;
    right: 50px;
    width: 130px;
    height: 130px;
    background: #FFFFFF30 0% 0% no-repeat padding-box;
    border: 1px solid #FFFFFF94;
    border-radius:10em;
    opacity: 1;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: 0.5s ease-out;
    cursor:pointer;
}
.apply-btn:hover {
    width: 324px;
    transition: 0.5s ease-out;
    color: #1a1a1a;
}
.apply-btn .inquiry-img {
    content: url('/images/inquiry_non.svg');
    transition: all 0.5s ease-in-out;
    float: right;
    /* padding-right: 32px; */
	    padding-right: 17px;
    width: 80px;
}
.apply-btn:hover .inquiry-img {
    content: url('/images/inquiry.svg');
    transition: all 0.5s ease-in-out;
}
.apply-btn .inquiry-text {
    font-size: 21px;
    color: white;
    font-weight: bold;
    display:none;
    padding-top:24px;
    margin-right: 0px;
}
.blur-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(50%);
}
.content-text {
    display:flex;
    justify-content: space-between;
    align-items: end;
    padding-top: 260px;
}
.content-text-left {
    display:flex;
    align-items: flex-end;
}
.content-text-right {
    padding-right:40px;
    line-height: 25px;
}
.left_1 {
    font-size: 120px;
    font-weight:200;
}
.left_2 {
    font-size: 23px;
    font-weight:100;
    padding: 0px 0px 40px 40px;
}
.right_1 {
    font-size: 18px;
    font-weight:100;
    font-family: Pretendard;
}
.right_2 {
    padding:20px 0px 40px;
    font-size: 18px;
    font-weight:100;
    font-family: Pretendard;
}

.center-flex {
    text-align: center;
    display: flex;
    justify-content: space-evenly;
}
.center-flex-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.center-flex-inner h1 {
    color:#000;
    font-size:30px;
}
.center-flex-inner p {
    color:#000;
    font-size:20px;
}

.image-grid-container {
    position: absolute;
    top: 0;
    right: 8%;
   /*  width: 100%; */
    height: 100%;
    display: flex
;
    justify-content: end;
    gap: 0px;
    padding: 0px;
    overflow: hidden;
    z-index: 100;
}

.flowing-images.left-flow {
    width: 410px; /* ⭐️ 왼쪽 컬럼의 고정 너비. 이 너비가 충분한지 확인하세요. ⭐️ */
    flex-shrink: 0; /* 이 요소가 공간이 부족해도 축소되지 않도록 합니다. */
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 왼쪽 슬라이드 내부의 이미지 세로 중앙 정렬 */
    align-items: center; /* 왼쪽 슬라이드 내부의 이미지 가로 중앙 정렬 */
    margin: 0;
    padding: 0;
}


.flowing-images.right-flow {
    width:410px; /* ⭐️ 남은 공간을 모두 차지하여 오른쪽으로 확장합니다. ⭐️ */
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 오른쪽 슬라이드 내부의 이미지 세로 중앙 정렬 */
    align-items: flex-end; /* ⭐️ 이 컬럼 내에서 콘텐츠(Swiper)를 오른쪽으로 정렬합니다. ⭐️ */
    margin: 0;
    padding: 0;
}

/* Swiper 컨테이너 스타일 (leftFlowSwiper, rightFlowSwiper에 모두 적용) */
.swiper {
    width: 100%;
    height: 100%; /* 부모 .flowing-images의 높이를 채웁니다. */
}

/* Swiper 슬라이드 내부의 이미지 스타일 */
.swiper-slide {
    width: 100%;
    height: auto !important; /* 높이가 자동으로 조절되도록 합니다. */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px; /* 슬라이드 자체의 하단 마진을 제거합니다. */
    
    /* 초기 블러 및 투명도 (나머지 부분 흐리게) */
    filter: blur(2px);
    opacity: 0.7;
    transition: filter 0.5s ease, opacity 0.5s ease;
}

/* 활성화 시 효과 */
.image-grid-container.active-image-effects .swiper-slide {
    filter: blur(0px);
    opacity: 1;
}


.swiper-slide img {
   
        filter: contrast(0.7);
}

.left-content-section {
    width: 35%; /* 이미지에서 보이는 대략적인 너비. 필요에 따라 조절하세요. */
    /* 예: width: 450px; 와 같이 픽셀 단위로 고정 너비를 줄 수도 있습니다. */
    height: 100%; /* 부모 .slide의 높이만큼 채움 */
    display: flex;
    flex-direction: column; /* 내부 요소들을 세로로 정렬 */
    justify-content: center; /* 내부 요소들을 세로 중앙 정렬 */
    align-items: flex-start; /* 내부 요소들을 왼쪽으로 정렬 */
    padding-left: 5%; /* 왼쪽 여백. 필요에 따라 조절하세요. */
    box-sizing: border-box; /* 패딩을 너비 계산에 포함 */

    /* 배경색 (이미지처럼 약간 밝은 회색 또는 투명한 흰색) */
    background-color: #f5f5f5; /* 연한 회색 */
    /* 또는 하얀색 블러 느낌을 원한다면: */
    /* background-color: rgba(255, 255, 255, 0.8); */
    /* backdrop-filter: blur(10px); */
    /* -webkit-backdrop-filter: blur(10px); */ /* 웹킷 브라우저 지원 */

    /* 비디오 오버레이 위에 보이도록 z-index 설정 */
    position: absolute; /* z-index를 적용하려면 position 속성이 필요 */
    z-index: 102; /* background-video나 video-overlay보다 높은 값 */
}

.left-content-section .main-text-block {
    margin-bottom: 30px; /* 제목과 버튼 블록 사이 간격 */
}

.left-content-section h2 {
    font-size: 3em; /* 원하는 폰트 크기 */
    color: #333; /* 텍스트 색상 */
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

.left-content-section .button-block {
    display: flex;
    flex-direction: column; /* 버튼들을 세로로 정렬 */
    gap: 20px; /* 버튼 사이 간격 */
    width: 100%; /* 부모 .left-content-section의 너비에 맞춤 */
    max-width: 300px; /* 버튼 블록의 최대 너비 제한 (조절 가능) */
}

.left-content-section .action-button {
    display: flex;
    justify-content: space-between; /* 텍스트와 화살표를 양 끝으로 분리 */
    align-items: center;
    padding: 15px 25px; /* 버튼 내부 패딩 */
    background-color: rgba(0, 0, 0, 0.05); /* 약간 투명한 회색 배경 */
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.left-content-section .action-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.left-content-section .action-button span {
    display: block;
}

.left-content-section .action-button .arrow-icon {
    font-size: 1.5em;
    margin-left: 10px;
}

/* 🌟 기존 .image-grid-container 너비 조정 (필수) 🌟 */
/* .left-content-section과 .image-grid-container의 너비 합이 100%가 되도록 */
.image-grid-container {
    /* ... 기존 스타일 유지 ... */
   
    flex-shrink: 0; /* 이 컨테이너가 줄어들지 않도록 (공간이 부족해도 축소 방지) */
}



.ycomms-hero {
    position: absolute;
    top: 62%;
    left: 5%;
   
    padding: 0px;
    z-index: 4;
    transform: translateY(-50%);
    width: 600px;
}

/* 왼쪽 박스 */
.ycomms-hero-left {
  
  top: 0;
  left: 0;
  width: 50%;
      height: 120px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

/* 오른쪽 박스 */
.ycomms-hero-right {
    position: absolute;
    top: -240px;
    right: 0;
    width: 50%;
    /* height: auto; */
    /* background: rgba(255, 255, 255, 0.5); */
    color: #000;
    display: flex
;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* 텍스트와 버튼 구성 */
.hero-request, .hero-message {
  text-align: left;
}

.request-title {
  font-size: 24px;
  font-weight: 500;
 margin: 0px;
}

.request-sub {
  font-size: 14px;
  margin: 0px;
}

.request-btn,
.view-btn {
 
  cursor: pointer;
}

.message-ko {
      font-size: 30px;
    font-weight: 400;
    margin: 0px;
    line-height: 1.5;
    height: 120px;
    width: 100%;
}

.message-en {
  font-size: 24px;
  font-weight: 400;  margin: 0px;
}

.view-more {
    display: flex;
    flex-direction: row;
    align-items: center;
  /*   gap: 40px; */
    width: 100%; height: 120px;
    justify-content: space-around;
    background: rgba(0, 0, 0, 0.6);
}



/* 1600px 이하 (태블릿 가로, 작은 데스크톱) */
@media screen and (max-width: 1600px) {
    /* 기존 1600px 스타일 유지 */
    .ycomms-hero {
        width: 500px;
    }

    .flowing-images.left-flow,
    .flowing-images.right-flow {
        width: 310px;
    }

    /* 추가: 콘텐츠 박스 폰트 크기 조정 */
    .content-box h1 {
        font-size: 60px;
    }
    .content-box p {
        font-size: 20px;
    }

    /* 추가: 슬라이드 4 텍스트 크기 조정 */
    .left_1 {
        font-size: 100px;
    }
    .left_2 {
        font-size: 20px;
    }
    .right_1, .right_2 {
        font-size: 16px;
    }
    
    /* 추가: slide 5 marketing section */
    .center-flex-inner h1 {
        font-size: 26px;
    }
    .center-flex-inner p {
        font-size: 18px;
    }

    /* 추가: apply-btn 크기 조정 */
    .apply-btn {
        width: 150px;
        height: 150px;
        bottom: 30px;
        right: 30px;
    }
    .apply-btn:hover {
        width: 280px;
    }
    .apply-btn .inquiry-text {
        font-size: 18px;
        padding-top: 25px;
    }
    .apply-btn .inquiry-img {
        padding-right: 25px;
    }
}

/* 1000px 이하 (태블릿 세로, 작은 태블릿) */
@media screen and (max-width: 1000px) {
    /* 헤더 요소 조정 */
    .logo {
        top: 20px;
        left: 20px;
    }
    .global-solution {
        display: none; /* 태블릿에서는 숨길 수 있음, 필요에 따라 조정 */
    }
    .menu-hamburger {
        top: 20px;
        right: 20px;
        width: 25px;
        height: 18px;
    }

    /* 메뉴 오버레이 조정 */
    .menu-overlay {
        padding: 60px 5%;
    }
    .menu-content-wrapper {
        padding-top: 100px;
        flex-direction: column; /* 세로로 정렬 */
        align-items: flex-start;
        gap: 50px; /* 메뉴 그룹 사이의 간격 */
    }
    .main-menu {
        flex-direction: column; /* 세로로 정렬 */
        gap: 10px;
        width: 100%;
    }
    .main-menu ul:first-child li a {
        font-size: 32px;
    }
    .main-menu ul:last-child li.has-submenu > div > a {
        font-size: 36px;
        justify-content: flex-start; /* 왼쪽 정렬로 변경 */ gap:0px;
    }
    .sub-menu {
        position: static; /* absolute 해제 */
        width: auto; /* 너비 자동 */
        opacity: 1; /* 항상 보이도록 */
        visibility: visible; /* 항상 보이도록 */
        pointer-events: auto; /* 항상 클릭 허용 */
        margin-top: 10px; /* 상위 메뉴와의 간격 */
        padding-left: 30px; /* 들여쓰기 */
        transition: none; /* 애니메이션 제거 */
        display: none; /* 초기에는 숨김 */
        text-align: left; /* 왼쪽 정렬 */
    }
    .sub-menu.active {         padding-left: 43px;
        display: block; /* 활성화 시 보이도록 */
    }
    .sub-menu li a {
        font-size: 28px !important;
        text-align: left; /* 왼쪽 정렬 */
    }
    .main-menu ul:last-child li.has-submenu > div > a .menu-icon {
	    width: 20px;
        margin-right: 10px; /* 아이콘을 텍스트 왼쪽에 배치 */
        transform: rotate(90deg); /* 기본 세로 화살표 (아래) */ gap:0px;
    }
    .main-menu ul:last-child li.has-submenu > div > a.active .menu-icon {
        transform: rotate(270deg); /* 활성화 시 위로 회전 */ 
    }


    /* 슬라이더 콘텐츠 박스 조정 */
    .content-box {
        left: 5%;
        right: 5%;
        padding: 0 20px;
    }
    .content-box h1 {
        font-size: 48px;
        line-height: 1.2;
    }
    .content-box p {
        font-size: 18px;
        line-height: 1.4;
    }

    /* 슬라이더 화살표 조정 */
    .slick-prev, .slick-next {
        width: 28px;
        height: 28px;
        background-size: 8px;
    }
    .slick-prev {
        right: 20px;
    }
    .slick-next {
        right: 20px;
    }

    /* 슬라이더 도트 조정 */
    .slick-dots {
        bottom: 20px;
        left: 20px;
        gap: 8px;
    }
    .slick-dots li button {
        width: 12px;
        height: 12px;
    }
    .slick-dots li.slick-active button {
        width: 18px;
        height: 18px;
    }
    .slick-dots li.slick-active button::before {
        width: 10px;
        height: 10px;
    }

    /* 슬라이드 4 텍스트 조정 */
    .content-text {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 150px; /* 상단 패딩 줄이기 */
        text-align: left;
    }
    .content-text-left {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px;
    }
    .left_1 {
        font-size: 70px;
    }
    .left_2 {
        font-size: 18px;
        padding: 0;
    }
    .content-text-right {
        padding-right: 0;
    }
    .right_1, .right_2 {
        font-size: 16px;
    }

    /* 슬라이드 5 마케팅 솔루션 조정 */
    .center-flex {
        flex-direction: column; /* 세로 정렬 */
        gap: 30px; /* 항목 간 간격 */
        padding: 20px; /* 전체 패딩 */
    }
    .center-flex-inner {
        padding: 15px 0;
    }
    .center-flex-inner h1 {
        font-size: 24px;
        margin-top: 10px;
    }
    .center-flex-inner p {
        font-size: 16px;
        text-align: center;
    }

    /* 슬라이드 6 ycomms-hero 및 이미지 그리드 조정 */
    .ycomms-hero {
        top: 50%; /* 중앙으로 조정 */
        left: 5%;
        transform: translateY(-50%);
        width: 90%; /* 화면 너비에 맞춤 */
        display: flex; /* 내부 요소들을 가로로 배치 */
        flex-direction: column;
        align-items: flex-start;
    }
    .ycomms-hero-left, .ycomms-hero-right {
        width: 100%; /* 너비 100% */
        position: static; /* absolute 해제 */
        height: auto;
        padding: 15px;
        box-sizing: border-box;
        justify-content: space-between;
        flex-direction: row;
    }
    .ycomms-hero-right {
        margin-top: 20px;
    }
    .message-ko {
        font-size: 24px;
        height: auto;
    }
    .message-en {
        font-size: 18px;
    }

    .image-grid-container {
        display: none; 
    }

    /* 프로젝트 문의 버튼 조정 */
    .apply-btn {
        width: 120px;
        height: 120px;
        bottom: 20px;
        right: 20px;
        padding: 0;
        border-radius: 50%; /* 원형 유지 */
    }
    .apply-btn:hover {
        width: 120px; 
    }
    .apply-btn .inquiry-text {
        display: none !important; /* 항상 숨김 */
    }
    .apply-btn .inquiry-img {
        float: none;
        padding-right: 0;
        width: 50px; /* 아이콘 크기 조정 */
        margin-top: -5px; /* 중앙 정렬 미세 조정 */
    }
    .apply-btn:hover .inquiry-img {
        content: url('/images/inquiry_non.svg'); /* hover 시에도 기본 아이콘 유지 */
    }
	
	.hero-message {display:none;}
}

/* 767px 이하 (모바일) */
@media screen and (max-width: 767px) {
    /* 기존 1000px 스타일을 덮어쓰거나 추가 조정 */
    .logo {
        top: 15px;
        left: 15px;
        width: 100px; /* 로고 크기 조정 */
    }
	
	
    .menu-hamburger {
        top: 15px;
        right: 15px;
        width: 22px;
        height: 20px;
    }
	
	
	.main-menu ul:last-child li.has-submenu { margin-bottom:15px;}

    /* 메뉴 오버레이 */
    .menu-overlay {
        padding: 50px 20px; overflow: scroll;
    }
    .menu-content-wrapper {
        padding-top: 20px;
    }
    .main-menu ul:first-child li a {
        font-size: 20px;
    }
	
	.main-menu ul:first-child li {
    margin-bottom: 10px;
}
    .main-menu ul:last-child li.has-submenu > div > a {
        font-size: 25px;
    }
    .sub-menu li a {
        font-size: 20px !important;
    }

    /* 슬라이더 콘텐츠 박스 */
    .content-box {
        left: 20px;
        right: 20px;
        top: 40%; /* 모바일에서는 하단에 더 가깝게 */
        transform: translateY(-40%);
    }
    .content-box_logo {
        width: 50%; /* 로고 크기 조정 */
        margin-bottom: 10px;
    }
	
	.content-box_logo img {width:100%;}
    .content-box h1 {
        font-size: 36px;
    }
    .content-box p {
        font-size: 16px;
        margin-bottom: 15px;
        line-height: 1.3;
    }
    .content-box button {
        padding: 6px 15px;
        font-size: 12px;
    }

    /* 슬라이더 화살표 */
    .slick-prev, .slick-next {
        display: none !important; /* 모바일에서는 화살표 숨김 */
    }
    /* 슬라이더 도트 */
    .slick-dots {
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        gap: 6px;
    }
    .slick-dots li button {
        width: 10px;
        height: 12px;
    }
    .slick-dots li.slick-active button {
        width: 18px;
        height: 20px;
    }
    .slick-dots li.slick-active button::before {
        width: 8px;
        height: 8px;
    }

    /* 슬라이드 4 텍스트 조정 */
    .content-text {
        padding-top: 0px;
    }
    .left_1 {
        font-size: 50px;
    }
    .left_2 {
        font-size: 16px;
        padding-bottom: 20px;
    }
    .right_1, .right_2 {
        font-size: 14px;
        padding-bottom: 10px;
    }

    /* 슬라이드 5 마케팅 솔루션 조정 */
    .center-flex-inner {
        padding: 0px 0;
    }
    .center-flex-inner img {
        width: 50px; /* 아이콘 크기 조정 */
    }
    .center-flex-inner h1 {
        font-size: 20px;
    }
    .center-flex-inner p {
        font-size: 14px; display:none;
    }
	
	.logo img {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
    width: 100%;
}
	.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 2;
}


	.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

    /* 슬라이드 6 ycomms-hero 조정 */
    .ycomms-hero-left, .ycomms-hero-right {
        flex-direction: column; /* 세로 정렬 */
        align-items: center;
        text-align: center;
        height: auto;
        padding: 10px;
        gap: 10px;
    }
    .ycomms-hero-right {
        margin-top: 10px;
    }
    .request-title, .message-en {
        font-size: 18px;
    }
    .request-sub {
        font-size: 12px;
    }
    .message-ko {
        font-size: 20px;
    }
    .ycomms-hero-left div img,
    .view-more div img {
        width: 30px; /* 이미지 크기 조정 */
        height: 30px;
    }
    .view-more {
      
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: auto;
        padding: 10px;
        gap: 10px;
   
    }
	
	.hero-message {display:none;}

    /* 프로젝트 문의 버튼 조정 */
    .apply-btn {
        width: 80px;
        height: 80px;
        bottom: 13%;
        right: 15px;
        border-width: 0.5px;
    }
	
	.apply-btn:hover {
	  width: 80px;
        height: 80px;
        bottom: 13%;
        right: 15px;
        border-width: 0.5px;
	}
    .apply-btn .inquiry-img {
        width: 40px;
    }
}