@charset "utf-8";

/* --- 공통 변수 --- */
:root { --point-blue: #00e5ff; --bg-charcoal: #0c0e12; --text-gray: #8a919e; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #000; }

/* PC 기본 설정 */
body { overflow: hidden; } 
#main-container { width: 100%; height: 100%; position: relative; }
.full-page-section { width: 100%; height: 100vh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }

/* 애니메이션 타겟 */
.ani-hero, .ani-proc, .ani-biz, .ani-pf, .ani-trust, .ani-cta { opacity: 0; transform: translateY(50px); will-change: transform, opacity; }


/* PC/모바일 줄바꿈 제어용 */
.mo-br { display: none; }

/* 클라이언트 로고 비율 깨짐 방지 */
.logo-box img { 
    max-width: 70%; 
    max-height: 70%; 
    object-fit: contain; 
}


/* 공통: 배경/제목 */
.section-02, .portfolio-section, .trust-section { background: #080808; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.bg-typography { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 25vw; font-weight: 900; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.03); white-space: nowrap; pointer-events: none; z-index: 0; letter-spacing: -0.05em; }
.bg-spotlight { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120%; height: 120%; background: radial-gradient(circle, rgba(0, 229, 255, 0.06) 0%, rgba(0,0,0,0) 70%); z-index: 0; pointer-events: none; opacity: 0.8; }
.section-inner { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; position: relative; z-index: 1; }
.text-group { margin-bottom: 50px; text-align: center; padding: 0 20px; }
.proc-sub { font-size: 1rem; letter-spacing: 0.3em; color: var(--point-blue); font-weight: 700; margin-bottom: 10px; text-transform: uppercase; }
.proc-title { font-size: clamp(3rem, 6vw, 6rem); font-weight: 900; color: #fff; margin: 0 0 15px 0; letter-spacing: -0.03em; line-height: 1; }
.proc-title .blue { color: var(--point-blue); }
.proc-desc { font-size: 1.1rem; color: #888; font-weight: 400; margin: 0; line-height: 1.6; word-break: keep-all; }

/* HERO */
.hero-wrapper { background: var(--bg-charcoal); font-family: 'Pretendard', sans-serif; }
.hero-noise { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/76/1k_filmgrain.png'); opacity: 0.02; pointer-events: none; z-index: 2; }
.bg-text-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 1; }
.bg-text h2 { font-size: 18vw; font-weight: 900; line-height: 0.8; margin: 0; letter-spacing: -0.05em; text-transform: uppercase; text-align: center; }
.outline-text { color: transparent; -webkit-text-stroke: 1px rgba(0, 229, 255, 0.2); }
.solid-text { color: rgba(0, 229, 255, 0.08); }
.main-message { position: relative; z-index: 10; text-align: center; color: #fff; padding: 0 20px; }
.sub-lead { font-size: 1.1rem; letter-spacing: 0.5em; color: var(--point-blue); margin-bottom: 35px; font-weight: 700; }
.main-lead { font-size: clamp(3rem, 7vw, 6.5rem); font-weight: 900; line-height: 1.3; margin-bottom: 45px; letter-spacing: -0.05em; color: #fff; }
.rolling-box { display: inline-block; height: 1.2em; overflow: hidden; vertical-align: bottom; position: relative; top: 0.05em; }
.rolling-list { margin: 0; padding: 0; list-style: none; animation: rolling 4.5s infinite cubic-bezier(0.25, 1, 0.5, 1); }
.rolling-list li { height: 1.2em; display: flex; align-items: center; justify-content: center; }
.point-color { color: var(--point-blue); font-weight: 900; }
@keyframes rolling { 0%, 20% { transform: translateY(0); } 33%, 53% { transform: translateY(-1.2em); } 66%, 86% { transform: translateY(-2.4em); } 100% { transform: translateY(-3.6em); } }
.desc-text { font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.8; color: var(--text-gray); font-weight: 300; max-width: 750px; margin: 0 auto; }
.scroll-guide { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 15; color: #fff; font-size: 12px; letter-spacing: 0.1em; }
.mouse { width: 20px; height: 35px; border: 2px solid var(--point-blue); border-radius: 15px; position: relative; }
.wheel { width: 2px; height: 6px; background: var(--point-blue); position: absolute; top: 5px; left: 50%; transform: translateX(-50%); animation: scroll-ani 1.5s infinite; }
@keyframes scroll-ani { 0% { top: 5px; opacity: 1; } 100% { top: 20px; opacity: 0; } }

/* SECTION 1: PROCESS */
.swiper-03 { width: 100%; padding-bottom: 50px; overflow: visible !important; }
.swiper-03 .swiper-slide { width: 380px; height: 500px; box-shadow: 0 20px 30px rgba(0,0,0,0.5); transition: all 0.5s; opacity: 0.3; }
.swiper-03 .box-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 40px 30px; background: #1a1a1a; border-radius: 20px; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.05); }
.logo-vertical { display: none; position: absolute; top: 35px; right: 30px; font-size: 28px; font-weight: 900; color: #fff; writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 0.1em; }
.content-group { display: flex; flex-direction: column; align-items: flex-start; }
.star-ico { display: none; font-size: 1.5rem; color: var(--point-blue); margin-bottom: 20px; }
.text-area { width: 100%; }
.en-tit { font-size: 19px; font-weight: 800; color: #888; margin: 0 0 3px 0; text-transform: uppercase; letter-spacing: 0.05em; }
.kr-tit { font-size: 34px; font-weight: 800; color: #aaa; margin: 0 0 20px 0; line-height: 1.1; }
.desc-txt { display: none; font-size: 16px; color: #ccc; line-height: 1.6; font-weight: 400; word-break: keep-all; }
.swiper-03 .swiper-slide-active { opacity: 1; z-index: 10; }
.swiper-03 .swiper-slide-active .box-card { background: #000; border: 2px solid var(--point-blue); box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 25px rgba(0, 229, 255, 0.2); }
.swiper-03 .swiper-slide-active .logo-vertical { display: block; }
.swiper-03 .swiper-slide-active .star-ico { display: block; }
.swiper-03 .swiper-slide-active .desc-txt { display: block; }
.swiper-03 .swiper-slide-active .en-tit { color: var(--point-blue); } 
.swiper-03 .swiper-slide-active .kr-tit { color: #fff; font-size: 44px; }
@media (min-width: 1025px) { .swiper-03 .swiper-slide { width: 380px; height: 500px; } }

/* SECTION 2: BIZ SLIDER */
.biz-slider-section { background: #000; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.biz-bg-marquee { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; overflow: hidden; opacity: 0.15; pointer-events: none; z-index: 0; }
.biz-marquee-track { display: flex; width: max-content; animation: biz-marquee 300s linear infinite; }
.biz-bg-word { font-size: 25vw; font-weight: 900; color: transparent; -webkit-text-stroke: 2px #fff; margin-right: 4vw; text-transform: uppercase; letter-spacing: -0.02em; }
@keyframes biz-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.biz-bg-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150%; height: 150%; background: radial-gradient(circle, var(--slide-color, #00e5ff) 0%, transparent 60%); opacity: 0.25; z-index: 0; transition: background 0.8s; pointer-events: none; }
.biz-container { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 2; }
.biz-nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 1px solid rgba(255,255,255,0.2); color: #fff; width: 60px; height: 60px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; z-index: 20; }
.biz-nav:hover { background: #fff; color: #000; border-color: #fff; transform: translateY(-50%) scale(1.1); }
.biz-nav.prev { left: 5%; }
.biz-nav.next { right: 5%; }
.biz-card-wrap { width: 550px; height: 750px; perspective: 1500px; position: relative; }
.biz-card-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1); }
.biz-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; top:0; left:0; }
.biz-tint { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.2); }
.biz-overlay-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 60px 40px 50px; box-sizing: border-box; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, transparent 100%); z-index: 5; text-align: left; }
.biz-title { font-size: 3rem; font-weight: 900; color: #fff; margin: 0 0 10px 0; line-height: 1; letter-spacing: -0.02em; }
.biz-desc { font-size: 1.1rem; color: #ddd; font-weight: 400; line-height: 1.6; margin-bottom: 20px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); word-break: keep-all; }
.biz-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.biz-tags span { font-size: 0.9rem; color: var(--slide-color, #00e5ff); border: 1px solid rgba(255,255,255,0.3); padding: 5px 12px; border-radius: 50px; font-weight: 600; background: rgba(0,0,0,0.4); }
.biz-pagination { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); font-size: 1rem; color: #666; font-weight: 700; letter-spacing: 3px; }
@media (max-width: 1024px) { .biz-card-wrap { width: 90%; height: 50vh; max-height: 500px; } }

/* SECTION 3: PORTFOLIO */
.portfolio-section { justify-content: center; }
.portfolio-container { width: 100%; max-width: 1600px; padding: 0 20px; display: flex; flex-direction: column; justify-content: center; height: 100%; position: relative; z-index: 1; }
.pf-swiper { width: 100%; padding: 20px 0 60px 0; overflow: visible !important; }
.pf-slide { width: 480px; height: 320px; transition: 0.3s; margin-right: 40px; }
.pf-card { width: 100%; height: 100%; position: relative; overflow: hidden; cursor: pointer; }
.pf-img { width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform 0.5s; }
.pf-card:hover .pf-img { transform: scale(1.1); }
.pf-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); display: flex; flex-direction: column; justify-content: space-between; padding: 25px; box-sizing: border-box; transition: 0.3s; }
.pf-card:hover .pf-hover { background: rgba(0,0,0,0.4); border: 1px solid var(--point-blue); }
.pf-cat { font-size: 12px; color: #aaa; font-weight: 700; letter-spacing: 0.05em; display: block; margin-bottom: 5px; }
.pf-cl { font-size: 1.6rem; color: #fff; font-weight: 800; margin: 0; line-height: 1.2; }
.pf-res { opacity: 0; transform: translateY(10px); transition: 0.3s; text-align: right; }
.pf-card:hover .pf-res { opacity: 1; transform: translateY(0); }
.res-tit { font-size: 11px; color: #666; font-weight: 700; display: block; margin-bottom: 2px; }
.res-num { font-size: 1.4rem; color: var(--point-blue); font-weight: 800; }
.pf-footer { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; margin-top: 20px; border-top: 1px solid #222; padding-top: 30px; }
.pf-footer span { font-size: 1.3rem; color: #fff; font-weight: 700; }
.pf-arrow-btn { font-size: 2.6rem; color: #fff; text-decoration: none; transition: 0.3s; }
.pf-arrow-btn:hover { color: var(--point-blue); transform: translateX(10px); }
@media (min-width: 1025px) { .pf-slide { width: 480px; height: 320px; margin-right: 40px; } }

/* SECTION 4: TRUST */
.trust-section { flex-direction: column; justify-content: center; position: relative; }
.trust-inner { width: 100%; max-width: 1400px; padding: 0 20px; text-align: center; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; margin-bottom: 60px; }
.counter-wrap { display: flex; justify-content: center; align-items: flex-start; gap: 4vw; margin-top: 40px; width: 100%; }
.count-item { text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 280px; }
.count-num { font-size: clamp(5rem, 11vw, 11rem); font-weight: 900; color: #fff; letter-spacing: -0.04em; line-height: 0.9; margin-bottom: 10px; white-space: nowrap; display: flex; justify-content: center; align-items: flex-end; }
.count-num .counter { font-variant-numeric: tabular-nums; }
.count-num .unit { font-size: 0.4em; margin-left: 5px; font-weight: 800; margin-bottom: 15px; color: #888; }
.count-num .plus { color: var(--point-blue); font-size: 0.5em; margin-left: 0px; margin-bottom: 25px; }
.count-label { display: block; font-size: 1.4rem; color: #666; font-weight: 700; letter-spacing: 0.05em; margin-top: 10px; }
.bar { width: 1px; height: 120px; background: rgba(255,255,255,0.1); margin-top: 30px; }
.logo-marquee-full { width: 100%; overflow: hidden; position: relative; opacity: 0.6; margin-top: 60px; }
.logo-track { display: flex; width: max-content; animation: logo-scroll 30s linear infinite; }
.logo-box { width: 260px; height: 140px; background: #111; margin-right: 20px; display: flex; align-items: center; justify-content: center; color: #333; font-weight: 900; font-size: 1.4rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.03); transition: 0.3s; }
.logo-box:hover { border-color: var(--point-blue); color: #fff; background: #1a1a1a; }
@keyframes logo-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* SECTION 5: CTA */
.final-cta-section { background: #050505; }
.final-cta { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; }
.cta-inner { width: 100%; text-align: center; margin-bottom: 5vh; }
.btn-wrap { display: flex; justify-content: center; width: 100%; margin-top: 40px; } 
.cta-title { font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 900; color: #fff; line-height: 1.3; margin-bottom: 0; text-align: center; word-break: keep-all; }
.cta-title .blue { color: var(--point-blue); }
.cta-btn { display: inline-block; padding: 22px 70px; background: var(--point-blue); color: #000; font-size: 1.2rem; font-weight: 800; text-decoration: none; border-radius: 100px; transition: 0.4s; box-shadow: 0 15px 40px rgba(0, 229, 255, 0.2); }
.cta-btn:hover { transform: scale(1.05); background: #fff; }
.marquee-bg { position: absolute; width: 100%; height: 100%; opacity: 0.1; pointer-events: none; display: flex; flex-direction: column; justify-content: center; }
.marquee-track { font-size: 15vw; font-weight: 900; white-space: nowrap; color: transparent; -webkit-text-stroke: 2px #fff; display: flex; animation: marquee 60s linear infinite; }
.marquee-track.reverse { animation: marquee-rev 60s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes marquee-rev { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

/* Footer */
.main-footer { position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.footer-inner { max-width: 1600px; margin: 0 auto; padding: 0 80px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-end; }
.f-logo { font-size: 1.4rem; font-weight: 900; color: #fff; }
.f-info { text-align: right; color: #555; font-size: 0.85rem; line-height: 1.8; }
.bar { display: inline-block; width: 1px; height: 8px; background: #222; margin: 0 12px; }

/* Intro Layer */
#intro-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: flex; align-items: center; justify-content: center; z-index: 9999; }
.intro-logo { font-size: clamp(3rem, 10vw, 8rem); font-weight: 900; color: #fff; letter-spacing: -0.05em; }
.intro-logo .dot { color: var(--point-blue); }

/* =========================================
   [모바일 반응형] 최종 수정 (2줄 정렬 + 라인제거)
   ========================================= */
@media screen and (max-width: 1024px) {
    /* 기본 레이아웃 재설정 */
    html, body { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; }
    #main-container { height: auto !important; transform: none !important; padding-top: 60px !important; }
    .full-page-section { height: auto !important; min-height: 100vh; display: flex; flex-direction: column; padding: 80px 0; }
    
    /* 폰트 및 요소 사이즈 */
    .bg-typography { font-size: 15vw; top: 10%; }
    .proc-title, .main-lead { font-size: 3rem; }
    .sub-lead, .proc-sub { font-size: 0.8rem; letter-spacing: 0.2em; margin-bottom: 20px; }
    .proc-desc { font-size: 0.8rem; word-break: keep-all; }
    .scroll-guide { bottom: 120px; }
    
    /* 섹션별 요소 */
    .swiper-03 .swiper-slide { width: 300px; height: 400px; }
    .biz-card-wrap { width: 90%; height: 400px; }
    .pf-slide { width: 200px; height: 140px; margin-right: 15px; }
    .counter-wrap { flex-direction: column; gap: 30px; width: 100%; padding: 0; }
    .count-num { font-size: 5.5rem; line-height: 1.1; margin-bottom: 5px; }
    .logo-marquee-full { margin-top: 40px; }
    .logo-box { width: 140px; height: 80px; min-width: 140px; }
    .intro-logo { font-size: 3rem; }

    /* CTA 섹션 */
    .final-cta-section { height: 100vh !important; min-height: 600px; padding: 0 !important; }
    
    /* ▼▼▼ [푸터 모바일 수정] ▼▼▼ */
    .main-footer { padding: 40px 0; }
    
    /* 로고 및 전체 정렬 */
    .footer-top { flex-direction: column; align-items: center; gap: 20px; }
    .f-logo { font-size: 1.5rem; margin-bottom: 5px; }
    .f-info { text-align: center; width: 100%; }

    /* [핵심] 가로(옆으로) 배치 강제 */
    .info-row { 
        justify-content: center; 
        flex-wrap: wrap; /* 화면 좁으면 자동 줄바꿈 */
        margin-bottom: 6px; 
        gap: 0;
    }
    
    
 /* ▼▼▼ main.css 모바일 반응형 구문 안에 추가 ▼▼▼ */

    /* 모바일 전용 줄바꿈 활성화 */
    .mo-br { display: block !important; }
    .pc-br { display: none !important; }

    /* [2번 이미지] 클라이언트 로고 비율 깨짐 방지 */
    .logo-box img { 
        max-width: 75% !important; 
        max-height: 60% !important; 
        object-fit: contain !important; /* 이미지 형태 보존 */
    }

    /* [3번 이미지] 카운터 섹션 완벽 중앙 정렬 */
    .counter-wrap { 
        flex-direction: column !important; 
        align-items: center !important; /* 자식 요소들 중앙으로 */
        gap: 50px !important; 
    }
    .count-item { 
        width: 100% !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* 텍스트 중앙으로 */
    }
    .count-num { 
        justify-content: center !important; /* 숫자+단위 중앙 정렬 */
        margin-left: 0 !important; 
    }
    .bar { display: none !important; } /* 모바일에서 세로선 제거 */

    /* [4번 이미지] 포트폴리오 텍스트 정렬 */
    .pf-footer { 
        flex-direction: row !important; /* 화살표와 나란히 */
        align-items: center !important; 
        justify-content: space-between !important;
    }
    .pf-footer-text { 
        text-align: left !important; 
        font-size: 1.1rem !important; 
        line-height: 1.4 !important; 
    }
    
    
    
    /* 기존 세로 정렬 무시하고 가로로 */
    .row-2 { flex-direction: column !important; gap: 5px; } /* 사업자, 전화번호는 세로로 */
    .row-1 { flex-direction: row !important; gap: 10px; } /* 상호, 대표자는 가로로 */

    /* 구분선 보이게 설정 (상호/대표자 사이) */
    .row-1 .bar { 
        display: inline-block !important; 
        width: 1px; height: 10px; 
        background: rgba(255,255,255,0.3) !important; 
        margin: 0 8px !important; 
    }
    
    .footer-inner {
        padding: 0 !important; /* 모바일에서는 패딩 0 */
        width: 100%;
    }
    
    /* 폰트 및 컬러 */
    .info-row span, a[href^="tel"] { 
        color: #cccccc !important; 
        font-size: 0.85rem; 
        white-space: nowrap; /* 글자 끊김 방지 */
    }

    /* [핵심] 카피라이트 위쪽 라인 제거 & 간격 좁히기 */
    .footer-bottom { 
        border-top: none !important; 
        margin-top: 15px !important; 
        padding-top: 0 !important; 
        text-align: center; 
    }
    .copyright { opacity: 0.6; font-size: 0.75rem; }

    /* 헤더 고정 */
    header, #header, .header, #hd, .mobile-header { 
        background: rgba(0, 0, 0, 0.85) !important; 
        backdrop-filter: blur(10px) !important; 
        position: fixed !important; top: 0; left: 0; width: 100%; 
        z-index: 99999 !important; border-bottom: 1px solid rgba(255,255,255,0.1); 
    }
}