우종완

TBHSHOP

Season's Texture | TBHSHOP

<div id="jj-texture-mo-wrap">

    
    <div class="jjtxm-hero">

        
        <div class="jjtxm-visual">

            
            <img class="jjtxm-hero-img jjtxm-hero-slide jjtxm-hero-slide01 jjtxm-is-active" src="https://tbhimg.com/images/gw/03/20260930/mo/mo_01_hero.jpg" alt="쥬시쥬디 시즌스 텍스처 레더 앤 스웨이드 컬렉션 메인 비주얼" fetchpriority="high" decoding="async">

            
            <img class="jjtxm-hero-slide jjtxm-hero-slide02" src="https://tbhimg.com/images/gw/03/20260930/mo/mo_02_hero.jpg" alt="" decoding="async">

            
            <img class="jjtxm-hero-slide jjtxm-hero-slide03" src="https://tbhimg.com/images/gw/03/20260930/mo/mo_03_hero.jpg" alt="" decoding="async">

            
            <img class="jjtxm-hero-slide jjtxm-hero-slide04" src="https://tbhimg.com/images/gw/03/20260930/mo/mo_04_hero.jpg" alt="" decoding="async">

        </div>


        
        <div class="jjtxm-copy">

            
            <div class="jjtxm-brand">
                JUCY JUDY
            </div>


            
            <div class="jjtxm-main-mask">

                <img class="jjtxm-main-img" src="https://tbhimg.com/images/gw/03/20260930/mo/mo_01_hero_txt.png" alt="SEASON'S TEXTURE" decoding="async">

            </div>


            
            <div class="jjtxm-subtitle">
                LEATHER &amp; SUEDE
            </div>


        </div>

    </div>

</div>



<style>
/* =========================================================
   JUCY JUDY SEASON'S TEXTURE - MOBILE
   MAIN HERO ONLY
========================================================= */


/* =========================================================
   WRAP
========================================================= */
#jj-texture-mo-wrap {
    width: 100%;
    max-width: 720px;

    margin: 0 auto;
    padding: 0;

    overflow: hidden;
    box-sizing: border-box;

    font-family: 'Pretendard', Arial, sans-serif;
    background: #fff;
}


/* =========================================================
   BOX SIZING
========================================================= */
#jj-texture-mo-wrap *,
#jj-texture-mo-wrap *::before,
#jj-texture-mo-wrap *::after {
    box-sizing: border-box;
}


/* =========================================================
   HERO
========================================================= */
#jj-texture-mo-wrap .jjtxm-hero {
    position: relative;

    width: 100%;
    max-width: 720px;

    margin: 0 auto;
    padding: 0;

    overflow: hidden;
    background: #dce5e6;
}


/* =========================================================
   HERO VISUAL
========================================================= */
#jj-texture-mo-wrap .jjtxm-visual {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


/* =========================================================
   HERO 01
   ★ 첫 번째 이미지가 HERO 높이 기준
========================================================= */
#jj-texture-mo-wrap .jjtxm-hero-img {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;
}


/* =========================================================
   HERO 02 / 03 / 04
   ★ HERO 01 위에 겹침
========================================================= */
#jj-texture-mo-wrap .jjtxm-hero-slide02,
#jj-texture-mo-wrap .jjtxm-hero-slide03,
#jj-texture-mo-wrap .jjtxm-hero-slide04 {
    position: absolute;
    z-index: 2;

    left: 0;
    top: 0;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;
    opacity: 0;
}


/* =========================================================
   HERO FADE
   ★★★★★ 페이드 속도 수정 ★★★★★

   현재 : 1.4초
   느리게 : 1.8초
   빠르게 : 1.0초
========================================================= */
#jj-texture-mo-wrap.jjtxm-js .jjtxm-hero-slide {
    transition:
        opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/* =========================================================
   ACTIVE HERO
========================================================= */
#jj-texture-mo-wrap.jjtxm-js .jjtxm-hero-slide.jjtxm-is-active {
    opacity: 1;
    z-index: 3;
}


#jj-texture-mo-wrap.jjtxm-js .jjtxm-hero-slide:not(.jjtxm-is-active) {
    opacity: 0;
}


/* =========================================================
   IMAGE ERROR
========================================================= */
#jj-texture-mo-wrap .jjtxm-slide-error {
    display: none !important;
}


/* =========================================================
   HERO TEXT AREA

   ★★★★★ 전체 텍스트 위치 수정 ★★★★★

   bottom: 6.3% (현재)

   8% = 전체 텍스트 위로
   4% = 전체 텍스트 아래로
========================================================= */
#jj-texture-mo-wrap .jjtxm-copy {
    position: absolute;
    z-index: 10;

    left: 50%;

    /* ★ 전체 텍스트 상하 위치 */
    bottom: 6.3%;

    width: 100%;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 0;
    padding: 0 4%;

    text-align: center;
    color: #fff;

    pointer-events: none;
}


/* =========================================================
   JUCY JUDY

   ★★★★★ 브랜드명 크기 / 위치 수정 ★★★★★
========================================================= */
#jj-texture-mo-wrap .jjtxm-brand {
    position: relative;
    z-index: 3;

    margin: 0;
    padding: 0;

    /* ★ 브랜드명 상하 위치 */
    transform: translateY(-1.2vw);

    font-family: 'Pretendard', Arial, sans-serif;

    /* ★ 브랜드명 크기 */
    font-size: clamp(14px, 2.7vw, 20px);

    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;

    color: #fff;
}


/* =========================================================
   MAIN TITLE PNG

   ★★★★★ 메인 PNG 크기 수정 ★★★★★

   현재 : 86%
   크게 : 90%
   작게 : 80%
========================================================= */
#jj-texture-mo-wrap .jjtxm-main-mask {
    position: relative;
    z-index: 2;

    /* ★ 메인 타이틀 PNG 크기 */
    width: 86%;
    max-width: 620px;

    margin-left: auto;
    margin-right: auto;

    /* ★ 브랜드명과 PNG 간격 */
    margin-top: -5.2vw;

    /* ★ PNG와 하단 텍스트 간격 */
    margin-bottom: -5.8vw;

    padding: 0;
    overflow: hidden;
}


/* =========================================================
   MAIN TITLE REVEAL

   ★ 왼쪽 → 오른쪽 등장
   ★ 현재 1.8초
========================================================= */
#jj-texture-mo-wrap.jjtxm-js .jjtxm-main-mask {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);

    /* ★ PNG 등장 속도 */
    animation:
        jjtxmTitleReveal
        1.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}


/* =========================================================
   MAIN TITLE IMAGE
========================================================= */
#jj-texture-mo-wrap .jjtxm-main-img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;
    padding: 0;
}


/* =========================================================
   LEATHER & SUEDE

   ★★★★★ 서브 타이틀 크기 / 간격 수정 ★★★★★
========================================================= */
#jj-texture-mo-wrap .jjtxm-subtitle {
    position: relative;
    z-index: 3;

    /* ★ PNG와 서브 타이틀 간격 */
    margin: 1.6vw 0 0;
    padding: 0;

    font-family: 'Pretendard', Arial, sans-serif;

    /* ★ 서브 타이틀 크기 */
    font-size: clamp(16px, 3.05vw, 22px);

    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;

    color: #fff;
}


/* =========================================================
   할인 + 쿠폰 / 기간

   ★★★★★ 혜택 크기 / 간격 수정 ★★★★★
========================================================= */
#jj-texture-mo-wrap .jjtxm-benefit {
    position: relative;
    z-index: 3;

    /* ★ 서브 타이틀과 혜택 간격 */
    margin: 1.25vw 0 0;
    padding: 0;

    font-family: 'Pretendard', Arial, sans-serif;

    /* ★ 혜택 텍스트 크기 */
    font-size: clamp(16px, 3.05vw, 22px);

    font-weight: 300;
    line-height: 1.15;
    letter-spacing: 0;

    white-space: nowrap;
    color: #fff;
}


/* =========================================================
   DATE
========================================================= */
#jj-texture-mo-wrap .jjtxm-date {
    font-family: 'Pretendard', Arial, sans-serif;
    font-weight: 300;
}


/* =========================================================
   TITLE REVEAL KEYFRAMES
========================================================= */
@keyframes jjtxmTitleReveal {

    0% {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
    }

    100% {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {

    #jj-texture-mo-wrap.jjtxm-js .jjtxm-main-mask {
        animation: none;

        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
    }

    #jj-texture-mo-wrap.jjtxm-js .jjtxm-hero-slide {
        transition: none;
    }

}
</style>



<script>
(function () {

    var wrap = document.getElementById('jj-texture-mo-wrap');

    if (!wrap || wrap.dataset.jjtxmInitialized === 'true') {
        return;
    }

    wrap.dataset.jjtxmInitialized = 'true';


    /* =====================================================
       HERO SLIDER
    ====================================================== */
    var slides = Array.prototype.slice.call(
        wrap.querySelectorAll('.jjtxm-hero-slide')
    );

    var validSlides = [];
    var currentIndex = 0;
    var sliderTimer = null;


    /* =====================================================
       ★★★★★ HERO 이미지 유지 시간 수정 ★★★★★

       3000 = 3초
       3500 = 3.5초
       3800 = 3.8초 (현재)
       4000 = 4초
       5000 = 5초
    ====================================================== */
    var slideDelay = 3800;


    /* =====================================================
       이미지 오류 처리
    ====================================================== */
    function markSlideError(slide) {

        slide.classList.add('jjtxm-slide-error');
        slide.classList.remove('jjtxm-is-active');
    }


    /* =====================================================
       정상 이미지 리스트 생성
    ====================================================== */
    function buildValidSlides() {

        var previousSlide = validSlides[currentIndex];

        validSlides = slides.filter(function (slide) {

            return (
                !slide.classList.contains('jjtxm-slide-error') &&
                slide.complete &&
                slide.naturalWidth > 0
            );

        });

        slides.forEach(function (slide) {
            slide.classList.remove('jjtxm-is-active');
        });

        if (!validSlides.length) {
            currentIndex = 0;
            return;
        }

        var previousIndex = validSlides.indexOf(previousSlide);

        currentIndex = previousIndex >= 0 ? previousIndex : 0;

        validSlides[currentIndex].classList.add('jjtxm-is-active');
    }


    /* =====================================================
       NEXT HERO
    ====================================================== */
    function showNextSlide() {

        if (validSlides.length <= 1) {
            return;
        }

        var nextIndex =
            (currentIndex + 1) % validSlides.length;

        validSlides[nextIndex].classList.add('jjtxm-is-active');

        validSlides[currentIndex].classList.remove('jjtxm-is-active');

        currentIndex = nextIndex;
    }


    /* =====================================================
       SLIDER START
    ====================================================== */
    function startSlider() {

        if (sliderTimer !== null) {

            clearInterval(sliderTimer);
            sliderTimer = null;
        }

        if (document.hidden || validSlides.length <= 1) {
            return;
        }

        sliderTimer = setInterval(
            showNextSlide,
            slideDelay
        );
    }


    /* =====================================================
       IMAGE LOAD CHECK

       ★ 정상 로드된 이미지만 자동 순환
       ★ 이미지 오류 시 자동 제외
    ====================================================== */
    function initializeSlider() {

        if (!slides.length) {
            return;
        }

        var checkedCount = 0;

        function imageChecked() {

            checkedCount++;

            if (checkedCount >= slides.length) {

                buildValidSlides();

                startSlider();
            }
        }

        slides.forEach(function (slide) {

            if (slide.complete) {

                if (slide.naturalWidth === 0) {
                    markSlideError(slide);
                }

                imageChecked();
                return;
            }

            slide.addEventListener('load', function () {

                imageChecked();

            }, { once: true });

            slide.addEventListener('error', function () {

                markSlideError(slide);
                imageChecked();

            }, { once: true });

        });

    }


    /* =====================================================
       TITLE REVEAL
       ★ 메인 PNG 왼쪽 → 오른쪽 등장
    ====================================================== */
    wrap.classList.add('jjtxm-js');


    /* =====================================================
       HERO START
    ====================================================== */
    initializeSlider();


    /* =====================================================
       TAB 비활성화 시 슬라이더 정지
       TAB 복귀 시 슬라이더 재시작
    ====================================================== */
    document.addEventListener(
        'visibilitychange',
        function () {

            if (document.hidden) {

                if (sliderTimer !== null) {

                    clearInterval(sliderTimer);
                    sliderTimer = null;
                }

                return;
            }

            startSlider();

        }
    );

})();
</script>

Season's Texture

<div id="jj-texture-wrap">

    
    <div class="jjtx-hero">

        
        <div class="jjtx-visual">

            
            <img class="jjtx-hero-slide jjtx-hero-slide01" src="https://tbhimg.com/images/gw/03/20260930/pc/pc_01_hero.jpg" alt="쥬시쥬디 시즌스 텍스처 레더 및 스웨이드 컬렉션 메인 비주얼 1" fetchpriority="high" decoding="async">

            
            <img class="jjtx-hero-slide jjtx-hero-slide02" src="https://tbhimg.com/images/gw/03/20260930/pc/pc_01_hero02.jpg" alt="쥬시쥬디 시즌스 텍스처 컬렉션 비주얼 2" decoding="async">

            
            <img class="jjtx-hero-slide jjtx-hero-slide03" src="https://tbhimg.com/images/gw/03/20260930/pc/pc_01_hero03.jpg" alt="쥬시쥬디 시즌스 텍스처 컬렉션 비주얼 3" decoding="async">

            
            <img class="jjtx-hero-slide jjtx-hero-slide04" src="https://tbhimg.com/images/gw/03/20260930/pc/pc_01_hero04.jpg" alt="쥬시쥬디 시즌스 텍스처 컬렉션 비주얼 4" decoding="async">

        </div>


        
        <div class="jjtx-copy">

            
            <div class="jjtx-brand">
                JUCY JUDY
            </div>

            
            <div class="jjtx-main-mask">

                <img class="jjtx-main-img" src="https://tbhimg.com/images/gw/03/20260930/pc/pc_01_hero_txt.png" alt="SEASON'S TEXTURE" decoding="async">

            </div>

            
            <div class="jjtx-subtitle">
                LEATHER &amp; SUEDE
            </div>

        </div>

    </div>

</div>


<style>
/* =========================================================
   JUCY JUDY SEASON'S TEXTURE - PC
   MAIN HERO ONLY
========================================================= */

/* =========================================================
   WRAP
========================================================= */
#jj-texture-wrap {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Pretendard', Arial, sans-serif;
}

#jj-texture-wrap *,
#jj-texture-wrap *::before,
#jj-texture-wrap *::after {
    box-sizing: border-box;
}


/* =========================================================
   HERO
========================================================= */
#jj-texture-wrap .jjtx-hero {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background: #dce5e6;
}


/* =========================================================
   HERO VISUAL
========================================================= */
#jj-texture-wrap .jjtx-visual {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


/* =========================================================
   HERO 01
   ★ 첫 번째 이미지가 전체 HERO 높이 기준
========================================================= */
#jj-texture-wrap .jjtx-hero-slide01 {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}


/* =========================================================
   HERO 02 / 03 / 04
   ★ HERO 01 위에 겹침
========================================================= */
#jj-texture-wrap .jjtx-hero-slide02,
#jj-texture-wrap .jjtx-hero-slide03,
#jj-texture-wrap .jjtx-hero-slide04 {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
}


/* =========================================================
   IMAGE ERROR
========================================================= */
#jj-texture-wrap .jjtx-slide-error {
    display: none !important;
}


/* =========================================================
   HERO FADE
   ★ 페이드 속도 수정 위치
   현재 : 1.4초
========================================================= */
#jj-texture-wrap.jjtx-js .jjtx-hero-slide {
    opacity: 0;

    /* ★ 이미지 전환 속도 수정 */
    transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/* =========================================================
   ACTIVE HERO
========================================================= */
#jj-texture-wrap.jjtx-js .jjtx-hero-slide.jjtx-is-active {
    opacity: 1;
    z-index: 3;
}


/* =========================================================
   HERO TEXT AREA
   ★★★★★ 전체 텍스트 위치 수정 ★★★★★

   top: 50% → 상하 위치
   48% = 위로 이동
   52% = 아래로 이동
========================================================= */
#jj-texture-wrap .jjtx-copy {
    position: absolute;
    z-index: 10;

    left: 50%;

    /* ★ 전체 텍스트 세로 위치 */
    top: 50%;

    width: 100%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 0;
    padding: 0;

    text-align: center;
    color: #fff;
    pointer-events: none;
}


/* =========================================================
   JUCY JUDY
   ★★★★★ 브랜드명 크기 / 간격 수정 ★★★★★
========================================================= */
#jj-texture-wrap .jjtx-brand {
    position: relative;
    z-index: 3;

    /* ★ 브랜드명과 메인 PNG 간격 */
    margin: 0 0 -65px;
    padding: 0;

    font-family: 'Pretendard', Arial, sans-serif;

    /* ★ 브랜드명 크기 */
    font-size: 20px;

    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fff;
}


/* =========================================================
   MAIN TITLE PNG
   ★★★★★ 메인 타이틀 크기 수정 ★★★★★

   현재 width: 55.35%
   크게 : 60%
   작게 : 50%
========================================================= */
#jj-texture-wrap .jjtx-main-mask {
    position: relative;
    z-index: 2;

    /* ★ 메인 PNG 크기 */
    width: 55.35%;
    max-width: 774px;

    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}


/* =========================================================
   MAIN TITLE REVEAL
   ★ 왼쪽 → 오른쪽으로 나타나는 애니메이션
   ★ 현재 1.8초
========================================================= */
#jj-texture-wrap.jjtx-js .jjtx-main-mask {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);

    /* ★ PNG 등장 속도 수정 */
    animation: jjtxTitleReveal 1.8s
        cubic-bezier(0.22, 1, 0.36, 1) forwards;
}


/* =========================================================
   MAIN TITLE IMAGE
========================================================= */
#jj-texture-wrap .jjtx-main-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
}


/* =========================================================
   LEATHER & SUEDE
   ★★★★★ 서브 타이틀 크기 / 위치 수정 ★★★★★
========================================================= */
#jj-texture-wrap .jjtx-subtitle {
    position: relative;
    z-index: 3;

    /* ★ PNG와 서브 타이틀 간격 */
    margin: -68px 0 0;
    padding: 0;

    font-family: 'Pretendard', Arial, sans-serif;

    /* ★ 서브 타이틀 크기 */
    font-size: 24px;

    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.035em;
    color: #fff;
}


/* =========================================================
   TITLE REVEAL KEYFRAMES
========================================================= */
@keyframes jjtxTitleReveal {

    0% {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
    }

    100% {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {

    #jj-texture-wrap.jjtx-js .jjtx-main-mask {
        animation: none;
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
    }

    #jj-texture-wrap.jjtx-js .jjtx-hero-slide {
        transition: none;
    }

}
</style>


<script>
(function () {

    var wrap = document.getElementById('jj-texture-wrap');

    if (!wrap || wrap.dataset.jjtxInitialized === 'true') {
        return;
    }

    wrap.dataset.jjtxInitialized = 'true';

    /* =====================================================
       HERO SLIDER
    ====================================================== */
    var slides = Array.prototype.slice.call(
        wrap.querySelectorAll('.jjtx-hero-slide')
    );

    var validSlides = [];
    var currentIndex = 0;
    var sliderTimer = null;

    /* =====================================================
       ★★★★★ 이미지 유지 시간 수정 ★★★★★

       3000 = 3초
       3500 = 3.5초 (현재)
       4000 = 4초
       5000 = 5초
    ====================================================== */
    var slideDelay = 3500;


    /* =====================================================
       IMAGE ERROR
    ====================================================== */
    function markSlideError(slide) {
        slide.classList.add('jjtx-slide-error');
        slide.classList.remove('jjtx-is-active');
    }


    /* =====================================================
       정상 이미지 리스트 생성
    ====================================================== */
    function buildValidSlides() {

        var previousSlide = validSlides[currentIndex];

        validSlides = slides.filter(function (slide) {

            return (
                !slide.classList.contains('jjtx-slide-error') &&
                slide.complete &&
                slide.naturalWidth > 0
            );

        });

        slides.forEach(function (slide) {
            slide.classList.remove('jjtx-is-active');
        });

        if (!validSlides.length) {
            currentIndex = 0;
            return;
        }

        var previousIndex = validSlides.indexOf(previousSlide);

        currentIndex = previousIndex >= 0 ? previousIndex : 0;

        validSlides[currentIndex].classList.add('jjtx-is-active');
    }


    /* =====================================================
       NEXT HERO
    ====================================================== */
    function showNextSlide() {

        if (validSlides.length <= 1) {
            return;
        }

        var nextIndex = (currentIndex + 1) % validSlides.length;

        validSlides[nextIndex].classList.add('jjtx-is-active');

        validSlides[currentIndex].classList.remove('jjtx-is-active');

        currentIndex = nextIndex;
    }


    /* =====================================================
       HERO AUTO PLAY
    ====================================================== */
    function startSlider() {

        if (sliderTimer !== null) {
            clearInterval(sliderTimer);
            sliderTimer = null;
        }

        if (document.hidden || validSlides.length <= 1) {
            return;
        }

        sliderTimer = setInterval(showNextSlide, slideDelay);
    }


    /* =====================================================
       HERO IMAGE LOAD CHECK
       ★ 정상 로드된 이미지만 슬라이드 적용
       ★ 로딩 지연 시에도 정상 이미지 확인
    ====================================================== */
    function initializeSlider() {

        if (!slides.length) {
            return;
        }

        var checkedCount = 0;

        function imageChecked() {

            checkedCount++;

            if (checkedCount >= slides.length) {

                buildValidSlides();

                wrap.classList.add('jjtx-js');

                startSlider();
            }
        }

        slides.forEach(function (slide) {

            if (slide.complete) {

                if (slide.naturalWidth === 0) {
                    markSlideError(slide);
                }

                imageChecked();
                return;
            }

            slide.addEventListener('load', function () {
                imageChecked();
            }, { once: true });

            slide.addEventListener('error', function () {

                markSlideError(slide);
                imageChecked();

            }, { once: true });

        });

    }


    /* =====================================================
       TITLE ANIMATION
       ★ 메인 PNG 왼쪽 → 오른쪽 REVEAL
       ★ 슬라이드 로딩과 관계없이 실행
    ====================================================== */
    wrap.classList.add('jjtx-js');


    /* =====================================================
       HERO START
    ====================================================== */
    initializeSlider();


    /* =====================================================
       TAB 비활성 시 정지 / 복귀 시 재시작
    ====================================================== */
    document.addEventListener('visibilitychange', function () {

        if (document.hidden) {

            if (sliderTimer !== null) {
                clearInterval(sliderTimer);
                sliderTimer = null;
            }

            return;
        }

        startSlider();

    });

})();
</script>