<!doctype html>
<html lang="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title>경영이념/비전</title>
    <!-- 이 페이지 전용 CSS -->
<body>

<div id="wrapper" layout:fragment="content">

    <!-- ======================== HEADER -->
    <header id="hd" class="sub"></header>

    <!-- ======================== CONTAINER -->
    <div id="container">
        <div id="container_wrapper">

            <!-- ========= SUB VISUAL + BREADCRUMB ========= -->
            <div id="sub_visual">
                <div class="sub-bg bg-vision"></div>
                <div class="sub-tit-wrap">
                    <h2 class="sub-tit">경영이념/비전</h2>
                    <p class="sub-desc">항상 고객사와 소통하는 오라인포</p>
                </div>
				
				<div id="sub_breadcrumb">
					<div class="inner">
						<ul class="breadcrumb">
							<li>
								<a href="/" class="bc-home" aria-label="홈으로 이동">
									<img src="/img/sub/ico_home.svg" alt="HOME">
								</a>
							</li>
							<li class="bc-item bc-depth1">
								<button class="bc-btn" type="button" aria-haspopup="listbox" aria-expanded="false">
									<span class="bc-label">회사소개</span>
									<span class="bc-arrow">
										<img src="/img/sub/ico_arrow.svg" alt="arrow">
									</span>
								</button>
								<ul class="bc-dropdown" role="listbox">
									<li class="active"><a href="/company/intro">회사소개</a></li>
									<li><a href="/business/intro">사업소개</a></li>
									<li><a href="/careers/talent">인재채용</a></li>
									<li><a href="/bbs/owrainfo">오라인</a></li>
								</ul>
							</li>
							<li class="bc-item bc-depth2">
								<button class="bc-btn" type="button" aria-haspopup="listbox" aria-expanded="false">
									<span class="bc-label">경영이념/비전</span>
									<span class="bc-arrow">
										<img src="/img/sub/ico_arrow.svg" alt="arrow">
									</span>
								</button>
								<ul class="bc-dropdown" role="listbox">
									<li><a href="/company/intro">사업개요</a></li>
									<li class="active"><a href="/company/business">경영이념/비전</a></li>
									<li><a href="/company/history">회사 연혁</a></li>
									<li><a href="/company/chart">조직도</a></li>
									<li><a href="/company/map">찾아오는 길</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
            </div>            
            <!-- ========= SUB VISUAL + BREADCRUMB [e] ========= -->


            <!-- ========= SUB CONTENT [s] ========= -->
            <div class="sub_content">	
				<div class="sub-section">
					<div class="sub-inner">

						<!-- 경영이념 소개 텍스트 -->
						<div class="vision-intro">
							<h2 class="sub-h2">
								구성원의 창의적 가치를 존중하고 <em>온·오프라인 토탈서비스</em>로
								새로운 비즈니스 모델을 창출하는 선도 기업이 되겠습니다.
							</h2>
						</div>

						<!-- 경영이념 카드 3개 -->
						<div class="vision-cards" data-aos="fade-up" data-aos-delay="100">
							<div class="vision-card">
								<div class="vision-card-icon">
									<img src="/img/sub/ico_vision1.png" alt="창의적 능력 아이콘">
								</div>
								<p class="vision-card-label">창의적 능력</p>
							</div>
							<div class="vision-card">
								<div class="vision-card-icon">
									<img src="/img/sub/ico_vision2.png" alt="가치창조 아이콘">
								</div>
								<p class="vision-card-label">가치창조</p>
							</div>
							<div class="vision-card">
								<div class="vision-card-icon">
									<img src="/img/sub/ico_vision3.png" alt="꿈의 기업창조 아이콘">
								</div>
								<p class="vision-card-label">꿈의 기업창조</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="vision-scroll" id="vs-block">
 
                <!-- 슬라이드 1 -->
                <div class="vs-slide" data-idx="1">
                    <div class="vs-bg about-bg1"></div>
                    <div class="vs-slide-content">
                        <div class="vs-title-section">
                            <span class="vs-label white">FINANCE TECHNOLOGY SERVICE</span>
                            <h2 class="vs-title">경영이념</h2>
                        </div>
                        <div class="vs-desc-section">
                            <p class="vs-desc">
                                모든 구성원의 가치 창조를 존중하고, 창의적인 능력을<br>
								최대한 발휘할 수 있는 기업 문화를 표방하여 꿈의 기업을 창조한다.
                            </p>
                        </div>
                    </div>
                </div>
 
                <!-- 슬라이드 2 -->
                <div class="vs-slide" data-idx="2">
                    <div class="vs-bg about-bg2"></div>
                    <div class="vs-slide-content">
                        <div class="vs-title-section">
                            <span class="vs-label">VISION</span>
                            <h2 class="vs-title">비전</h2>
                        </div>
                        <div class="vs-desc-section">
                            <p class="vs-desc">
                                온/오프라인 토탈서비스 미디어 업체로서 새로운 비즈니스 모델을 개발하여<br>
								고객사와 회원간의 원활한 정보 교환 및 서비스를 만들어 선도 기업이 된다.
                            </p>
                        </div>
                    </div>
                </div>
 
                <!-- 페이지네이션 (bullet height 방식) -->
                <div class="vs-pagination">
                    <div class="vs-bullet" data-idx="1"></div>
                    <div class="vs-bullet" data-idx="2"></div>
                </div>
 
            </div>
            <!-- ========= SUB CONTENT [e] ========= -->
        </div>
    </div>
</div>

<th:block layout:fragment="scripts">
<script>
/* ============================================================
   vision-scroll — GSAP ScrollTrigger pin + scrub
   sixshop 블록 방식 참고:
     - pin: true  → 섹션을 뷰포트에 고정
     - scrub: 1   → 스크롤량에 비례해 타임라인 재생
     - 슬라이드 전환: translateY(-30%) scale(1.2) 위로 사라짐
                     translateY(+30%) scale(1.2) 아래서 등장
     - 불릿:       height 10px ↔ 30px 애니메이션
   ============================================================ */
(function () {
    gsap.registerPlugin(ScrollTrigger);
 
    const section    = document.getElementById('vs-block');
    if (!section) return;
 
    const slideEls   = section.querySelectorAll('.vs-slide');
    const slideCount = slideEls.length;
    if (slideCount < 2) return;
 
    let tl;
 
    function initScrollSlide() {
 
        /* 기존 인스턴스 정리 */
        ScrollTrigger.getAll()
            .filter(t => t.vars.id === 'vs-block')
            .forEach(t => t.kill());
        if (tl) tl.kill();
 
        /* gsap 인라인 스타일 초기화 */
        gsap.set('#vs-block .vs-slide[data-idx="1"]', { clearProps: 'all' });
        gsap.set('#vs-block .vs-slide[data-idx="2"]', { clearProps: 'all' });
        gsap.set('#vs-block .vs-slide[data-idx="1"] .vs-bg', { clearProps: 'all' });
        gsap.set('#vs-block .vs-slide[data-idx="2"] .vs-bg', { clearProps: 'all' });
        gsap.set('#vs-block .vs-bullet[data-idx="1"]', { clearProps: 'all' });
        gsap.set('#vs-block .vs-bullet[data-idx="2"]', { clearProps: 'all' });
 
        tl = gsap.timeline({
            scrollTrigger: {
                trigger : section,
                id      : 'vs-block',
                pin     : true,                           /* 섹션 고정 */
                start   : 'top top',
                end     : `+=${(slideCount - 1) * 100}%`, /* 슬라이드당 100vh */
                scrub   : true,                           /* 스크롤 1:1 연동 (지연 없음) */
            }
        });
 
        /* ── slide 1 → 2 전환 ── */
 
        // hold (슬라이드 1 잠깐 유지)
        tl.fromTo('#vs-block .vs-slide[data-idx="1"]',
            { opacity: 1, y: '0%',   scale: 1,   zIndex:  1 },
            { opacity: 1, y: '0%',   scale: 1,   zIndex:  1, duration: 0.03 }
        );
 
        // 슬라이드 1 퇴장 (위로 사라짐)
        tl.fromTo('#vs-block .vs-slide[data-idx="1"]',
            { opacity: 1, y: '0%',   scale: 1,   zIndex:  1 },
            { opacity: 0, y: '-30%', scale: 1.2, zIndex: -1, ease: 'power1.out', duration: 0.05 }
        );
        // 배경 1 줌아웃 페이드
        tl.fromTo('#vs-block .vs-slide[data-idx="1"] .vs-bg',
            { opacity: 1, scale: 1   },
            { opacity: 0, scale: 1.5, duration: 0.05 }, '<'
        );
        // 불릿 1: 활성 → 비활성
        tl.fromTo('#vs-block .vs-bullet[data-idx="1"]',
            { height: '30px', backgroundColor: '#fff' },
            { height: '10px', backgroundColor: 'rgba(255,255,255,0.4)', duration: 0.05 }, '<'
        );
        // 불릿 2: 비활성 → 활성
        tl.fromTo('#vs-block .vs-bullet[data-idx="2"]',
            { height: '10px', backgroundColor: 'rgba(255,255,255,0.4)' },
            { height: '30px', backgroundColor: '#fff', duration: 0.05 }, '<'
        );
        // 배경 2 줌인 페이드 인
        tl.fromTo('#vs-block .vs-slide[data-idx="2"] .vs-bg',
            { opacity: 0, scale: 1.5 },
            { opacity: 1, scale: 1,   duration: 0.05 }, '<'
        );
        // 슬라이드 2 등장 (아래에서 올라옴)
        tl.fromTo('#vs-block .vs-slide[data-idx="2"]',
            { opacity: 0, y: '30%',  scale: 1.2, zIndex: -1 },
            { opacity: 1, y: '0%',   scale: 1,   zIndex:  1, ease: 'power1.out', duration: 0.05 }, '<'
        );
 
        // hold (슬라이드 2 잠깐 유지)
        tl.fromTo('#vs-block .vs-slide[data-idx="2"]',
            { opacity: 1, y: '0%', scale: 1, zIndex: 1 },
            { opacity: 1, y: '0%', scale: 1, zIndex: 1, duration: 0.03 }
        );
    }
 
    initScrollSlide();
 
    /* 리사이즈 대응 */
    let resizeTimer;
    window.addEventListener('resize', function () {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(initScrollSlide, 200);
    });
 
})();
</script>
</th:block>