
 
 /* 일반 태블릿 및 소형 데스크톱 */
@media (max-width: 1199px) {
  #s_blank {
    height: 97px;
  }
}

/* 모바일 기기 (스마트폰) */
@media (max-width: 767px) {
  #s_blank {
    height: 97px;
  }
}

/* 데스크톱 */
@media (min-width: 1200px) {
  #s_blank {
    height: 0px;
  }
}


/* =====================
   VIDEO SECTION
===================== */
.video-section {
  position: relative;
  width: 100%;
  min-height: 100svh;
  height: 100dvh;
  overflow: hidden;
  background: #000;
}

@supports not (height: 100dvh) {
  .video-section {
    height: 100vh;
  }
}

/* 영상 */
.video-section video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 핵심 */
  transform: translate(-50%, -50%);
}

/* =====================
   OVERLAY (가운데 정렬)
===================== */
.video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  color: #fff;

  background: rgba(0,0,0,0.35);
}

/* 작은 문구 */
.sub-text {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 3px;
  margin-bottom: 20px;
  font-family: 'NanumSquareNeo';
}

/* 메인 타이틀 */
.main-title1 {
  font-size: 180px;
  font-weight: 900;
  margin-bottom: 35px;
  font-family: 'NanumSquareNeo';
}

/* =====================
   BUTTONS
===================== */
.btn-group1 {
  display: flex;
  gap: 20px;
  padding-bottom: 5px; /* 하단에 숨쉴 공간을 명시적으로 부여 */
}

/* 공통 버튼 */
.btn2 {
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  border: 1px solid transparent; /* 핵심: 기본부터 border */  
  font-weight: 700;
  font-family: 'NanumSquareNeo';
}

/* 왼쪽 버튼 (흰색) */
.btn-white {
  background: #fff;
  color: #000;
  border: 1px solid #fff; /* hover 대비 */
}

/* 오른쪽 버튼 (투명) */
.btn-outline {
  border: 1px solid #fff;
  color: #fff;
}

/* hover 반전 */
.btn-white:hover {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  transform: none; /* 혹시 적용된 효과 제거 */
  text-decoration: none !important;
}

.btn-outline:hover {
  background: #fff;
  color: #000;
  text-decoration: none !important;
}

/* =====================
   SCROLL ARROW
===================== */
.scroll-indicator {
  position: absolute;
  bottom: env(safe-area-inset-bottom, 0px);
  margin-bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
}

.scroll-indicator span {
  display: block;
  width: 100%;
  height: 100%;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  animation: arrowMove 1.6s ease-in-out infinite;
}

@keyframes arrowMove {
  0% { transform: translateY(0) rotate(-45deg); opacity: 0.4; }
  50% { transform: translateY(8px) rotate(-45deg); opacity: 1; }
  100% { transform: translateY(0) rotate(-45deg); opacity: 0.4; }
}

/* =====================
   CONTENT
===================== */
.content-section {
  padding: 120px 20px;
  background: #fff;
}

/* =====================
   RESPONSIVE
===================== */

/* 태블릿 */
@media (max-width: 1024px) {
  .main-title1 {
    font-size: 120px;
  }
}

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

  .main-title1 {
    font-size: 75px;
  }

  .sub-text {
    font-size: 9px;
  }

  .btn-group1 {
    flex-direction: column;
    gap: 12px;
  }

  .btn2 {
    padding: 12px 24px;
    font-size: 13px;
  }
}


        /* 전체 배경 Wrapper (가로 100%, 배경색 #fff) */
.wrapper4 {
    width: 100%;
    background-color: #f9f9f9;
    padding: 80px 0;
    color: #222222;

    /* 애니메이션 추가 */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s ease forwards;
}

/* 애니메이션 정의 */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

        /* 중앙 정렬 Container (PC 기준 1200px) */
        .container4 {
            width: 1200px;
            margin: 0 auto;
            padding: 0;
        }

        /* --- 상단 타이틀 영역 --- */
        .top-row {
            display: flex;
            justify-content: flex-start;
            margin-bottom: 120px;
        }

        .top-row .subtitle {
            width: 320px;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 3px;
            color: #888888;
            padding-top: 12px;
            text-align: left; /* 명시적 좌측 정렬 */
        }

        .top-row .main-title {
            flex: 1;
            text-align: left; /* 명시적 좌측 정렬 */
        }

        .top-row .main-title h1 {
            font-size: 52px;
			font-family:'NanumSquareNeo';
            font-weight: 900;
            line-height: 1.25;
            margin: 0 0 30px 0;
            letter-spacing: -1.5px;
            color: #111111;
            word-break: keep-all;
        }

        .top-row .main-title p {
            font-size: 17px;
            line-height: 1.7;
            color: #666666;
            margin: 0;
            word-break: keep-all;
        }

        /* --- 중간 통계 수치 영역 --- */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            border-bottom: 1px solid #eeeeee;
            padding-bottom: 80px;
            margin-bottom: 100px;
        }

        .stat-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* 좌측 정렬 강제 */
        }

        .stat-num-wrapper {
            display: flex;
            align-items: baseline;
            margin-bottom: 15px;
            color: #111111;
        }

        .stat-num {
            font-size: 90px;
            font-weight: 800;
            line-height: 1;
            letter-spacing: -2px;
        }

        .stat-unit {
            font-size: 40px;
            font-weight: 700;
            margin-left: 4px;
            letter-spacing: -1px;
        }

        .stat-label {
            font-size: 16px;
            font-weight: 500;
            color: #888888;
        }

        /* --- 하단 전문가 팀 영역 --- */
        .bottom-section {
            display: flex;
            gap: 80px;
            align-items: center;
        }

        .text-content {
            flex: 1;
            text-align: left; /* 명시적 좌측 정렬 강제 */
        }

        .image-content {
            flex: 1;
        }

        .image-content img {
            width: 100%;
            height: auto;
            border-radius: 20px;
            display: block;
            box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08); /* 고급스러운 그림자 효과 */
            object-fit: cover;
        }

        .text-content h2 {
            font-size: 36px;
			font-family:'NanumSquareNeo';
            font-weight: 700;
            margin: 0 0 24px 0;
            letter-spacing: -1px;
            color: #111111;
            text-align: left;
        }

        .text-content > p {
            font-size: 17px;
            line-height: 1.6;
            color: #666666;
            margin: 0 0 45px 0;
            word-break: keep-all;
            text-align: left;
        }

        .feature-list {
            display: flex;
            flex-direction: column;
            gap: 32px;
            align-items: flex-start; /* 좌측 정렬 강제 */
        }

        .feature-item {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            text-align: left;
        }

        .icon-circle {
            width: 36px;
            height: 36px;
            background-color: #333333; /* 이미지와 동일한 짙은 색 체크박스 */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .icon-circle svg {
            width: 18px;
            height: 18px;
            stroke: #ffffff;
            stroke-width: 2.5;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .feature-text h3 {
            font-size: 19px;
			font-family:'NanumSquareNeo';
            font-weight: 700;
            margin: 0 0 8px 0;
            color: #222222;
        }

        .feature-text p {
            font-size: 15px;
            color: #888888;
            margin: 0;
            line-height: 1.4;
        }


        /* ==========================================
           반응형 미디어 쿼리 (Tablet & Mobile)
           ========================================== */

        /* Tablet 및 작은 해상도 PC (1200px 이하) */
        @media screen and (max-width: 1200px) {
            .container4 {
                width: 100%;
                padding: 50px 10px; /* 요청하신 좌우 10px 여백 */
            }
            .wrapper4 {
                padding: 10px 0;
            }
            .top-row {
                gap: 40px;
            }
            .top-row .subtitle {
                width: 200px;
            }
            .bottom-section {
                gap: 50px;
            }
            
            /* 숫자가 겹치지 않도록 1차적으로 폰트 크기 축소 */
            .stat-num { font-size: 70px; }
            .stat-unit { font-size: 32px; }
        }

        /* 중간 사이즈 Tablet (992px 이하) - 숫자 겹침 방지 세밀 조정 */
        @media screen and (max-width: 992px) {
            .top-row .main-title h1 {
                font-size: 35px;
            }
            .stat-num { font-size: 55px; } /* 숫자를 더 줄여서 4열 유지 시 겹침 방지 */
            .stat-unit { font-size: 24px; }
            .stat-label { font-size: 14px; }
            
            .bottom-section {
                flex-direction: column; /* 좁은 태블릿부터는 이미지와 텍스트를 위아래로 배치 */
                align-items: flex-start; /* 가운데 정렬 방지, 무조건 왼쪽 기준 */
            }
            .image-content {
                width: 100%;
            }
        }

        /* Mobile (768px 이하) */
        @media screen and (max-width: 768px) {
            .wrapper4 {
                padding: 0px 0;
            }
            
            .top-row {
                flex-direction: column;
                gap: 24px;
                margin-bottom: 70px;
                align-items: flex-start;
            }

            .top-row .subtitle {
                width: 100%;
                padding-top: 0;
            }

            .top-row .main-title h1 {
                font-size: 29px;
                line-height: 1.3;
                margin-bottom: 20px;
            }

            .top-row .main-title p {
                font-size: 15px;
            }

            /* 모바일에서 2열 배치 요청 반영 */
            .stats-grid {
                grid-template-columns: repeat(2, 1fr); 
                row-gap: 50px;
                column-gap: 10px;
                margin-bottom: 70px;
                padding-bottom: 60px;
            }

            .stat-num-wrapper {
                margin-bottom: 8px;
            }

            /* 2열이 되면서 공간이 확보되므로 폰트 크기 다시 살짝 키움 */
            .stat-num { font-size: 60px; }
            .stat-unit { font-size: 28px; }

            .text-content h2 {
                font-size: 28px;
            }

            .text-content > p {
                font-size: 15px;
                margin-bottom: 35px;
            }

            .feature-item {
                gap: 16px;
            }
            
            .feature-text h3 {
                font-size: 17px;
            }
        }


        /* 가로 100% wrapper7 */
        .wrapper7 { width: 100%; background-color: #fff; padding: 80px 5px; }

        /* PC 기준 1200px container7 */
        .container7 {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: flex-start; /* 상단 정렬 */
            justify-content: space-between;
            gap: 60px;
        }


/* 왼쪽 영역 베이스 */
.content-left {
    width: 50%;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-align: left; /* 기본 왼쪽 정렬 */
}

/* 상단 영문 서브타이틀 */
.sub-title {
    font-size: 18px;
    letter-spacing: 4px;
    color: #999;
    margin-bottom: 20px;
    font-weight: 500;
}

/* 메인 타이틀 (기존 100px 유지하되 줄간격 조정) */
.content-left h2 {
    font-size: 80px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -3px;
    color: #000;
    margin-bottom: 40px;
}

/* 설명 문구 */
.desc {
    font-size: 22px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 50px;
}

/* 하단 아이콘 리스트 정보 */
.info-list {
    list-style: none;
    padding: 0;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 30px; /* 간격을 살짝 넓혔습니다 */
}

.info-icon {
    width: 60px;  /* 원 크기를 55px -> 60px로 확대 */
    height: 60px;
    background: #f8f9fa; /* 배경을 좀 더 밝고 깔끔하게 변경 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    transition: all 0.3s ease; /* 부드러운 효과 추가 */
}

/* 아이콘 스타일 정의 */
.info-icon i { 
    font-size: 20px; /* 아이콘 자체 크기 */
    color: #333;  /* 요청하신 색상 적용 */
}

.info-text span {
    display: block;
    font-size: 14px;
    color: #888;
    margin-bottom: 4px;
    font-weight: 500;
}

.info-text p {
    margin: 0; /* 기본 마진 제거 */
    font-size: 19px; /* 글자 크기 미세 조정 */
    font-weight: 700;
    color: #222;
    line-height: 1.2;
}

/* 마우스 호버 시 살짝 떠오르는 효과 (선택 사항) */
.info-item:hover .info-icon {
    background: #5a6775;
}
.info-item:hover .info-icon i {
    color: #fff;
}

        /* 오른쪽 Iframe 영역 */
        .content-right {
            width: 50%;
            opacity: 0; /* 초기 상태 숨김 */
            transform: translateY(50px); /* 아래에서 대기 */
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            transition-delay: 0.3s; /* 순차적 등장을 위한 지연 */
        }

        /* 스크롤 시 나타나는 클래스 */
        .content-left.is-visible,
        .content-right.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        #form-iframe {
           width: 100%;
           border: none;
           /* height: 0px; /* 초기값 */
           overflow: hidden;
           transition: height 0.3s ease; /* 부드러운 높이 변화 */
        }

        /* 모달 팝업 */
        #modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(8px);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        .modal-box {
            background: #fff;
            width: 90%;
            max-width: 650px;
            height: 70vh;
            border-radius: 24px;
            padding: 40px;
            position: relative;
            display: flex;
            flex-direction: column;
            box-shadow: 0 30px 60px rgba(0,0,0,0.2);
        }

        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .modal-close { cursor: pointer; font-size: 35px; border: none; background: none; color: #999; line-height: 1; }
        .modal-body { flex: 1; overflow-y: auto; padding-right: 10px; line-height: 1.7; color: #444; font-size: 15px; white-space: pre-wrap; }

        /* 반응형 */
        @media (max-width: 1200px) {
            .container7 { padding: 0 5px; }
            .content-left h2 { font-size: 65px; }
        }

        @media (max-width: 768px) {
            .wrapper7 { padding: 50px 5px; }
            .container7 { flex-direction: column; text-align: center; gap: 40px; margin-bottom: 0px;}
            .content-left, .content-right { width: 100%; }
    .content-left h2 { font-size: 40px; margin-bottom: 20px; }
    .sub-title { font-size: 14px; }
    .desc { font-size: 16px; margin-bottom: 30px; }
    .info-icon { width: 45px; height: 45px; }
    .info-text p { font-size: 15px; }
        }


        /* 전체 너비 래퍼 */
        .wrapper5 {
            width: 100%;
            background-color: #ffffff;
            padding: 40px 0px 0px 0px;
        }

        /* 중앙 정렬 컨테이너 */
        .container5 {
            width: 1200px;
            margin: 0 auto;
            background-color: #ffffff;
        }

        /* 타이틀 영역 레이아웃 (Flex 사용) */
        .title-group {
            display: flex;
            align-items: flex-start; /* 상단 정렬 */
            gap: 15px; /* 글자와 버튼 사이 간격 */
        }

        /* 메인 타이틀: 영상제작 */
        .main-title {
            font-size: 45px;
            font-weight: 900;
			font-family:'NanumSquareNeo';
            line-height: 1.1;
            letter-spacing: -1px;
            color: #000;
        }

        /* 버튼 형태의 서브 타이틀: Cinema & Motion */
        .sub-button {
            display: inline-block;
            font-size: 18px;
            font-weight: 700;
			font-family:'NanumSquareNeo';
            color: #333333;
            background-color: #ffffff;
            border: 1px solid #333333;
            padding: 6px 16px;
            border-radius: 50px; /* 테두리가 아주 둥근 형태 */
            letter-spacing: 0.05em;
            white-space: nowrap; /* 줄바꿈 방지 */
            margin-top: 8px; /* 메인 글자 높이와 맞추기 위한 미세 조정 */
        }

        /* 반응형: 태블릿 및 모바일 */
        @media (max-width: 1220px) {
            .container5 {
                width: 100%;
                padding-left: 10px;
                padding-right: 10px;
            }

            .wrapper5 {
                padding: 20px 0px 0px 0px;
            }

            .title-group {
                gap: 8px; /* 모바일에서 간격 축소 */
            }

            /* 모바일에서 타이틀 크기 축소 */
            .main-title {
                font-size: 32px;
            }

            /* 모바일에서 버튼 크기 및 폰트 축소 */
            .sub-button {
                font-size: 13px;
                padding: 4px 10px;
                margin-top: 5px;
            }
        }