<!doctype html>
<html lang="ko">
<head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="OSSE">
    <title>OSSE 오쎄</title>
    <link rel="canonical" href="https://www.osse.co.kr/">
    <meta name="keywords" content="런드리서핑 | 수야무 | 메디버블 | 소이베베 | 유통&영업 | 이데이몰 | 원료사업 | 게임">
    <meta name="description" content="Creating THE ORIGINAL. 오쎄만의 차별화된 브랜드, 콘텐츠 개발을 통해 새로운 고객가치를 창출해가는 토탈서비스그룹입니다.">    <meta name="date" content="">
    <link rel="icon" type="image/x-icon" href="./favicon.ico">
    <meta name="thumbnail" content="" alt="">
    <meta property="og:url" content="https://www.osse.co.kr/">
    <meta property="og:image" content="https://image.edaymall.com/images/mail/news/osse/html/img/main/main01_optimized.png">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="OSSE 오쎄">
    <meta property="og:locale" content="ko">
    <meta property="og:title" content="OSSE 런드리서핑 | 수야무 | 오쎄 글로벌푸드 | 메디버블 | 소이베베 | 유통&영업 | 이데이몰 | 원료사업 | 게임">
    <meta property="og:description" content="Creating THE ORIGINAL. 오쎄만의 차별화된 브랜드, 콘텐츠 개발을 통해 새로운 고객가치를 창출해가는 토탈서비스그룹입니다.">
    <script src="./common/js/jquery.1.11.1.min.js"></script>
    <link href="./common/css/style.css" rel="stylesheet">
    <script src="./common/js/jquery.collapse.js"></script>
    <script src="./common/js/util.js"></script>
    <script type="text/x-javascript">
    (function(w, d, a){
        w.__beusablerumclient__ = {
            load : function(src){
                var b = d.createElement("script");
                b.src = src; b.async=true; b.type = "text/x-javascript";
                d.getElementsByTagName("head")[0].appendChild(b);
            }
        };w.__beusablerumclient__.load(a + "?url=" + encodeURIComponent(d.URL));
    })(window, document, "//rum.beusable.net/load/b161207e112311u833");
    </script>
</head>
<body>

<div>

    <!-- ================================
            Header
    ================================ -->
    <!-- Back to top button -->
    <a id="toTop"><img src="./img/arrow_top.png" alt="to top"/></a>

    <header class="header nav-down">
        <div class="header_wrap">
            <p class="logo"><a href="/"><img src="./img/logo_main.png" alt="로고"/></a></p>
            <span> </span>
            <ul class="language">
                <li class="active"><a href="javascript:void(0);" onclick="localeCookieHandler('ko')">KO</a></li>
                <li><a href="javascript:void(0);" onclick="localeCookieHandler('en')">EN</a></li>
            </ul>
            <div class="burger">
                <div class="burger__patty"></div>
                <div class="burger__patty"></div>
                <div class="burger__patty"></div>
            </div>
            <nav class="menu">
                <ul class="menu__list">
                    <li class="menu__item">
                        <!-- Vetical -->
                        <div id="verticalType01">
                            <div class="ver-title01 f50 fw500 bgnone"><sup>01</sup><span class="three"
                                                                                         data-hover="WHO WE ARE"
                                                                                         onclick="location.href='/whoweare';">WHO WE ARE</span>
                            </div>
                            <div></div>
                            <div class="ver-title01 f50 fw500 bgnone"><sup>02</sup><span class="three"
                                                                                         data-hover="WHO WE WANT"
                                                                                         onclick="location.href='/whowewant';">WHO WE WANT</span>
                            </div>
                            <div></div>
                            <div class="ver-title01 f50 fw500"><sup>03</sup><span class="three" data-hover="WHAT WE DO"
                                                                                  onclick="location.href='javascript:void(0)';">WHAT WE DO</span>
                            </div>
                            <div>
                                <div class="v_content wow bounceInRight">
                                    <p><a href="./ossebrand" class="f22"><span class="three" data-hover="OSSE Brands">OSSE Brands</span></a>
                                    </p>
                                    <p><a href="./sales" class="f22"><span class="three"
                                                                           data-hover="Distribution & Sales">Distribution & Sales</span></a>
                                    </p>
                                    <p><a href="./globalfood" class="f22"><span class="three"
                                                                                data-hover="OSSE Globalfood">OSSE Globalfood</span></a>
                                    </p>
                                    <p><a href="./ecommerce" class="f22"><span class="three" data-hover="E-Commerce">E-Commerce</span></a>
                                    </p>
                                    <p><a href="./trade" class="f22"><span class="three" data-hover="Ingredient Trade">Ingredient Trade</span></a>
                                    </p>
                                    <p><a href="./game" class="f22"><span class="three"
                                                                          data-hover="Game">Game</span></a></p>
                                </div>


                            </div>
                            <div class="ver-title01 f50 fw500 bgnone"><sup>04</sup><span class="three"
                                                                                         data-hover="CONTACT US"
                                                                                         onclick="location.href='/contactus';">CONTACT US</span>
                            </div>
                            <div></div>
                            <div class="ver-title01 f50 fw500 bgnone"><sup>05</sup><span class="three" data-hover="SHOP"
                                                                                         onclick="window.open('https://www.edaymall.com ')">SHOP</span>
                            </div>
                            <div></div>

                        </div>
                        <div class="menu-epirus">
                            <!-- 2026-04-08 메뉴 -->
                            <p class="f20"><a href="https://www.boncrem.it/" target="_blank"><img
                                    src="/img/common/arrow.png" alt="페치 사이트 바로가기"/>Bon Crem Brand Site</a></p>
                            <!-- //2026-04-08 메뉴 -->
                            <p class="f20"><a href="/epirusvios" target="_blank"><img src="/img/common/arrow.png"
                                                                                      alt="페치 사이트 바로가기"/>Epirus Vios
                                Brand Site</a></p>
                            <p class="f20"><a href="./pecsi/index.html" target="_blank"><img src="/img/common/arrow.png"
                                                                                             alt="에피로스비오스 사이트 바로가기"/>Pecsi
                                Brand Site</a></p>
                        </div>

                        <!--                            <div class="menu-epirus " data-collapse-summary=""><a href="#"><img src="./img/common/logo2.png" alt="에피로스비오스 사이트 바로가기" onclick="location.href='/epirusvios';"></a></div>-->
                        <div aria-hidden="true" style="display: none;"></div>
                        <script>
                            $("#verticalType01").collapse({
                              accordion: true, //다열리고 싶을때
                              open: function() {
                                this.addClass("open");
                                this.css({ height: this.children().outerHeight() });
                              },
                              close: function() {
                                this.css({ height: "0px" });
                                this.removeClass("open");
                              }
                            });

                        </script>
                        <!-- // Vetical -->
                    </li>
                </ul>

                <div class="menu__brand">
                    <div class="logo_menu">
                        <a href="/index"><img src="./img/logo_white.png"/></a>
                        <p class="mt40 f16">TEL 02-318-3217~9</p>
                        <p class="f16">FAX 02-318-3216</p>
                        <p class="f16">ⓒ OSSE. All right reserved.</p>
                        <p class="pdf mt20 f14"><a href="./img/common/OsseCompanyIntroduction_web.pdf" target="_blank">Introduction.PDF</a>
                        </p>
                    </div>
                </div>
            </nav>
        </div><!-- //header_wrap -->
    </header>
    <!-- ================================
            // Header
    ================================ -->
</div>
<!-- 모달팝업 2026-04-14 -->
<div id="recruitModalOverlay"></div>
<div id="recruitPopup">
    <div class="swiper recruitSwiper">
        <div class="swiper-wrapper" id="popupSwiperWrapper">
            <div class="swiper-slide"
                 style="display:flex; justify-content:center; align-items:center; height:100%; background:#fff;">
                <p>최신 소식을 불러오는 중입니다...</p>
            </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="recruit-popup-footer">
        <label><input type="checkbox" id="chkHideToday"> 오늘 하루 보지 않기</label>
        <button type="button" id="btnClosePopup">닫기</button>
    </div>
</div>
<!-- //모달팝업 2026-04-14 -->
<!-- ================================
		Content
================================ -->
<main role="main">
    <section>
        <!-- main Visual Slide 20250408 -->
        <div class="swiper mainVS">
            <!-- 2026-04-14 퀵 -->
            <ul class="bnr_epirus">
                <li><a href="https://www.boncrem.it/" target="_blank"><img src="./img/common/bon.png" alt="Bon Crem"/>
                    <p>Bon Crem</p></a></li>
                <li><a href="/epirusvios" target="_blank"><img src="./img/common/epirus.png" alt="Epirus vios"/>
                    <p>Epirus vios</p></a></li>
                <li><a href="/pecsi" target="_blank"><img src="./img/common/pecsi.png" alt="Pecsi"/>
                    <p>Pecsi</p></a></li>
            </ul>
            <!-- //2026-04-14 퀵 -->
            <!-- //2026-02-20 -->
            <div class="swiper-wrapper">
                <!-- slide6 -->
                <div class="swiper-slide">
                    <div class="fnc-slide__inner">
                        <div class="fnc-slide__content">
                            <h2 class="fnc-slide__heading">
                                <div class="fnc-slide__heading-line">
                                    <span class="fw600">오쎄가 선별한, <br>세계의 맛을 소개</span>
                                </div>
                                <div class="fnc-slide__heading-line mt20">
                                    <a href="/globalfood"><span class="f32 fw400 white">OSSE Globalfood <br
                                            class="mView600"><b class="btn07 hvr-sweep-to-right3 ">바로가기</b></span></a>
                                </div>
                            </h2>
                        </div>
                        <div class=" wView600">
                            <video id="video3" class="video " autoplay loop playsinline muted>
                                <source src="./img/main/mainVideo06.mp4" type="video/mp4">
                            </video>
                        </div>
                        <div class=" mView600">
                            <video id="video3" class="video-container mView" autoplay loop playsinline muted>
                                <source src="./img/main/mainVideo06m.mp4" type="video/mp4">
                            </video>
                        </div>
                    </div>
                </div>
                <!-- slide1 -->
                <div class="swiper-slide">
                    <div class="fnc-slide__inner">
                        <div class="fnc-slide__content">
                            <h2 class="fnc-slide__heading">
                                <div class="fnc-slide__heading-line">
                                    <span class="fw600">보다 나은 <br>라이프스타일을 <br class="mView600">추구하는</span>
                                </div>
                                <div class="fnc-slide__heading-line mt20">
                                    <a href="/ossebrand"><span class="f32 fw400 white">OSSE Brands <br class="mView600"><b
                                            class="btn07 hvr-sweep-to-right3 ">바로가기</b></span></a>
                                </div>
                            </h2>
                        </div>
                        <div class="wView600">
                            <video id="video1" class="video-container" autoplay loop playsinline muted>
                                <source src="./img/main/mainVideo01.mp4" type="video/mp4">
                            </video>
                        </div>
                        <div class="mView600">
                            <video id="video1" class="video-container mView" autoplay loop playsinline muted>
                                <source src="./img/main/mainVideo01m.mp4" type="video/mp4">
                            </video>
                        </div>
                    </div>
                </div>
                <!-- slide2 -->
                <div class="swiper-slide">
                    <div class="fnc-slide__inner">
                        <div class="fnc-slide__content">
                            <h2 class="fnc-slide__heading">
                                <div class="fnc-slide__heading-line">
                                    <span class="fw600">고객과 미래를<br class="mView"> 연결하는 <br>신뢰의 파트너</span>
                                </div>
                                <div class="fnc-slide__heading-line mt20">
                                    <a href="/sales"><span class="f32 fw400 white">Distribution & Sales <br
                                            class="mView600"><b class="btn07 hvr-sweep-to-right3 ">바로가기</b></span></a>
                                </div>

                            </h2>
                        </div>
                        <div class=" wView600">
                            <video id="video2" class="video" autoplay loop playsinline muted>
                                <source src="./img/main/mainVideo02.mp4" type="video/mp4">
                            </video>
                        </div>
                        <div class=" mView600">
                            <video id="video2" class="video-container" autoplay loop playsinline muted>
                                <source src="./img/main/mainVideo02m.mp4" type="video/mp4">
                            </video>
                        </div>
                    </div>
                </div>
                <!-- slide3 -->
                <div class="swiper-slide">
                    <div class="fnc-slide__inner">
                        <div class="fnc-slide__content">
                            <h2 class="fnc-slide__heading">
                                <div class="fnc-slide__heading-line">
                                    <span class="fw600">더 나은 일상을 <br>경험하는</span>
                                </div>
                                <div class="fnc-slide__heading-line mt20">
                                    <a href="/ecommerce"><span class="f32 fw400 white">E-Commerce <br
                                            class="mView600"><b class="btn07 hvr-sweep-to-right3 ">바로가기</b></span></a>
                                </div>
                            </h2>
                        </div>
                        <div class=" wView600">
                            <video id="video3" class="video " autoplay loop playsinline muted>
                                <source src="./img/main/mainVideo03.mp4" type="video/mp4">
                            </video>
                        </div>
                        <div class=" mView600">
                            <video id="video3" class="video-container mView" autoplay loop playsinline muted>
                                <source src="./img/main/mainVideo03m.mp4" type="video/mp4">
                            </video>
                        </div>
                    </div>
                </div>

                <!-- slide4 -->
                <div class="swiper-slide">
                    <div class="fnc-slide__inner">
                        <div class="fnc-slide__content">
                            <h2 class="fnc-slide__heading">
                                <div class="fnc-slide__heading-line">
                                    <span class="fw600">지속 가능한 <br>맞춤 원료 솔루션</span>
                                </div>
                                <div class="fnc-slide__heading-line mt20">
                                    <a href="/trade"><span class="f32 fw400 white">Ingredient Trade <br
                                            class="mView600"><b class="btn07 hvr-sweep-to-right3 ">바로가기</b></span></a>
                                </div>
                            </h2>
                        </div>
                        <div class=" wView600">
                            <video id="video4" class="video " autoplay loop playsinline muted>
                                <source src="./img/main/mainVideo04.mp4" type="video/mp4">
                            </video>
                        </div>
                        <div class=" mView600">
                            <video id="video4" class="video-container " autoplay loop playsinline muted>
                                <source src="./img/main/mainVideo04m.mp4" type="video/mp4">
                            </video>
                        </div>
                    </div>
                </div>
                <!-- slide5 -->
                <div class="swiper-slide">
                    <div class="fnc-slide__inner">
                        <div class="fnc-slide__content">
                            <h2 class="fnc-slide__heading">
                                <div class="fnc-slide__heading-line">
                                    <span class="fw600">새로운 경험과 <br>즐거움 제공하는</span>
                                </div>
                                <div class="fnc-slide__heading-line mt20">
                                    <a href="/game"><span class="f32 fw400 white">Game <br class="mView600"><b
                                            class="btn07 hvr-sweep-to-right3 ">바로가기</b></span></a>
                                </div>
                            </h2>
                        </div>
                        <div class=" wView600">
                            <video id="video5" class="video " autoplay loop playsinline muted>
                                <source src="./img/main/mainVideo05.mp4" type="video/mp4">
                            </video>
                        </div>
                        <div class=" mView600">
                            <video id="video5" class="video-container " autoplay loop playsinline muted>
                                <source src="./img/main/mainVideo05m.mp4" type="video/mp4">
                            </video>
                        </div>
                    </div>
                </div>
                <!-- //slide5 -->

            </div>
            <ul class="swi-sc-box">
                <li class="swiper-scrollbar"></li>
                <li class="swi-nvi">
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </li>
            </ul>
        </div>

        <!-- Swiper JS -->
        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

        <!-- Initialize Swiper -->
        <script>
    var swiper = new Swiper(".mainVS", {
      scrollbar: {
        el: ".swiper-scrollbar",

      },
	   loop: true,
	   navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
	  },
	   autoplay: {
            delay: 7100,
        },
		parallax: true,
        speed: 1000,
	   slidesPerView: 1,
    });



        </script>
        <!-- //main Visual Slide 20250408-- -->
    </section>
    <!-- 2026-04-14 newsroom -->
    <div class="w100 theme-globalfood" id="newsroomWrapper" style="padding: 100px 0; transition: background 0.5s ease;">
        <div class="w1700" style="margin: 0 auto; position:relative">

            <p class="f50 fw900 white center">NEWSROOM</p>
            <p class="f18 fw400 white mt10 center">오쎄가 선보이는 다양한 비즈니스 소식을 신속하고 정확하게 전해드립니다.</p>
            <div class="bg-text-marquee">
                <span>OSSE SOCIAL MEDIA &nbsp;&nbsp;&nbsp;&nbsp; OSSE NEWSROOM &nbsp;&nbsp;&nbsp;&nbsp; OSSE NEWSROOM &nbsp;&nbsp;&nbsp;&nbsp; OSSE NEWSROOM&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </div>
            <div class="newsroom-container">


                <div class="header-area">
                    <div class="filter-group">
                        <button class="filter-btn active" data-feed="globalfood">OSSE Globalfood</button>
                        <button class="filter-btn" data-feed="laundry">Laundrysurfing.</button>
                        <button class="filter-btn" data-feed="suyamu">SUYAMU</button>
                    </div>

                    <div class="nav-group">
                        <button class="nav-btn" id="prevBtn" aria-label="Previous Page">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                      stroke-linejoin="round"/>
                            </svg>
                        </button>
                        <button class="nav-btn" id="nextBtn" aria-label="Next Page">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                      stroke-linejoin="round"/>
                            </svg>
                        </button>
                    </div>
                </div>

                <div class="slider-wrapper">
                    <div class="slider-track" id="sliderTrack">
                        <div class="status-message" style="font-size: 16px; padding: 20px;">피드를 불러오는 중입니다...</div>
                    </div>
                </div>
            </div>
        </div>

        <script>
        // 1. 공통 인스타그램 API 토큰 세팅
        const feedConfigs = {
            globalfood: `https://graph.facebook.com/v19.0/17841476371326067/media?fields=id,caption,media_type,media_url,permalink,thumbnail_url,timestamp&access_token=EAALUCP3PZBtMBRBIms4JmgQc8Q4DUjIohpzZBs2r3AeglNo35nPBbK4RJu0YbzUZCNz8GxS9NcBFch4mjtyowxqcgpt20SPZAwhtVlUkkav5mRQqMf4ncAiirjLGHeSptZA5HkFFuFIiyK12FXSPZCFowkfqfZAJ4cVxZCqij0y8UR9GRomoFPcCnjtvxhZCkldoKVNebBWjRkwmW6FUD`,
            laundry: `https://graph.facebook.com/v19.0/17841464573555434/media?fields=id,caption,media_type,media_url,permalink,thumbnail_url,timestamp&access_token=EAASAHIf65TQBRHJkehYqVRfBgZAgZAk6RbIxEKitZCdZBIRZBWLvR8Ytj8kVoy6e6yscrS5JqTBm8JOzqUUsnBct0ZBWE3heJS9dMRtSS5bc1YDjtNPZA4yqd5liv0gRGjl5gBlbUemKHH3wyYEXzloW4yV6sMUacnluFZAZCVxJLyZBztSmzViCmk5IhNokXXP7bdhmc5W0Sou6AmXNX5`,
            suyamu: `https://graph.facebook.com/v19.0/17841471394074929/media?fields=id,caption,media_type,media_url,permalink,thumbnail_url,timestamp&access_token=EAAVaTKx0fiMBRMympyFigC2YqJnWmjljdPXkwG6RDZBProbrDEYdPprYapiyZC8Cni9TkQiu5bHbppnQ6CC7iWYWbiu84XtasADHZAUtMvsA6C29Td67Sp8qh9mwXWwj9tXCtcHrYtdOkQBvnm1ewMoRZCKUDjPoWtRoPHHwox6YUl5iE3H5K4hj4wXDULZBdY5IsjvyKeHbc3FX8`
        };

    const track = document.getElementById('sliderTrack');
    const newsroomWrapper = document.getElementById('newsroomWrapper');
    let totalCards = 0;
    let currentIndex = 0;

    // [신규] 모든 계정을 스캔하여 N 뱃지를 달고, 가장 최신 탭을 자동 실행하는 통합 함수
    function initializeNewsroom() {
        const NEW_DAYS_THRESHOLD = 7;
        const now = new Date();
        const filterBtns = document.querySelectorAll('.filter-btn');

        let newestFeedKey = 'globalfood'; // 기본값 (실패 시 대비)
        let maxTimestamp = 0;
        let fetchPromises = [];

        filterBtns.forEach(btn => {
            const feedKey = btn.getAttribute('data-feed');
            const apiUrl = feedConfigs[feedKey];

            if (apiUrl && !apiUrl.includes('여기에_')) {
                const promise = fetch(apiUrl)
                    .then(res => res.json())
                    .then(data => {
                        if (data && data.data && data.data.length > 0) {
                            const latestPostDate = new Date(data.data[0].timestamp);
                            const postTimestamp = latestPostDate.getTime();

                            // 1. N 뱃지 추가 로직
                            const diffTime = Math.abs(now - latestPostDate);
                            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                            if (diffDays <= NEW_DAYS_THRESHOLD) {
                                btn.classList.add('has-new');
                            }

                            // 2. 3개 계정 중 가장 최신 게시물인지 비교하여 기록
                            if (postTimestamp > maxTimestamp) {
                                maxTimestamp = postTimestamp;
                                newestFeedKey = feedKey;
                            }
                        }
                    })
                    .catch(err => console.warn('초기 데이터 확인 실패:', err));

                fetchPromises.push(promise);
            }
        });

        // 모든 API 스캔이 끝나면 가장 최신 게시물을 가진 탭을 자동으로 클릭!
        Promise.all(fetchPromises).then(() => {
            const targetBtn = document.querySelector(`.filter-btn[data-feed="${newestFeedKey}"]`);
            if (targetBtn) {
                targetBtn.click(); // 마우스로 클릭한 것과 동일한 효과 (테마 변경 및 피드 로드 자동 처리)
            }
        });
    }

    // 인스타그램 데이터 화면에 그리기
    function loadFeed(feedKey) {
        track.innerHTML = `<div class="status-message" style="font-size: 16px; padding: 20px;">피드를 불러오는 중입니다...</div>`;
        track.style.transform = `translateX(0px)`;
        currentIndex = 0;

        const apiUrl = feedConfigs[feedKey];

        if (!apiUrl || apiUrl.includes('여기에_')) {
            track.innerHTML = `<div class="status-message" style="font-size: 16px; padding: 20px;">API 주소가 등록되지 않은 계정입니다. 스크립트를 확인해주세요.</div>`;
            return;
        }

        fetch(apiUrl)
          .then(response => response.json())
          .then(data => {
            if (!data || !data.data) {
              track.innerHTML = `<div class="status-message" style="font-size: 16px; padding: 20px;">데이터를 불러오지 못했습니다. 토큰 만료 여부를 확인해주세요.</div>`;
              return;
            }

            track.innerHTML = '';

            // 💡 [핵심 수정] 1. 전체 게시물 중에서 '비디오(릴스)'를 먼저 완전히 걸러냅니다.
            const validPosts = data.data.filter(post => post.media_type !== 'VIDEO');

            // 💡 [핵심 수정] 2. 비디오가 걸러진 '순수 이미지' 게시물 중에서 10개를 뽑습니다.
            const postsToDisplay = validPosts.slice(0, 10);

            // 실제 그려질 카드 개수로 업데이트
            totalCards = postsToDisplay.length;

            if (totalCards === 0) {
                 track.innerHTML = `<div class="status-message" style="font-size: 16px; padding: 20px;">표시할 이미지 게시물이 없습니다.</div>`;
                 return;
            }

            postsToDisplay.forEach(post => {
              // 이미 비디오를 걸러냈으므로 바로 media_url 사용
              const imgSrc = post.media_url;
              const caption = post.caption ? post.caption.substring(0, 50) + '...' : 'Instagram Post';

              let formattedDate = '';
              if (post.timestamp) {
                const dateObj = new Date(post.timestamp);
                formattedDate = `${dateObj.getFullYear()}. ${String(dateObj.getMonth() + 1).padStart(2, '0')}. ${String(dateObj.getDate()).padStart(2, '0')}`;
              }

              const cardHTML = `
                <a href="${post.permalink}" target="_blank" class="card_insta">
                  <div class="card-bg" style="background-image: url('${imgSrc}');"></div>
                  <div class="card-overlay"></div>
                  <div class="card-content">
                    <div class="card-category">Instagram</div>
                    <div class="card-title">${caption}</div>
                    <div class="card-date">${formattedDate}</div>
                  </div>
                </a>
              `;
              track.insertAdjacentHTML('beforeend', cardHTML);
            });
          })
          .catch(error => {
            track.innerHTML = `<div class="status-message" style="font-size: 16px; padding: 20px;">통신 오류가 발생했습니다.</div>`;
            console.error('오류 발생:', error);
          });
    }

    // 탭 클릭 이벤트 (테마 전환)
    const filterBtns = document.querySelectorAll('.filter-btn');
    filterBtns.forEach(btn => {
        btn.addEventListener('click', (e) => {
            filterBtns.forEach(b => b.classList.remove('active'));
            e.target.classList.add('active');

            e.target.classList.remove('has-new'); // 읽었으니 뱃지 제거

            const targetFeed = e.target.getAttribute('data-feed');

            if (newsroomWrapper) {
                newsroomWrapper.classList.remove('theme-globalfood', 'theme-laundry', 'theme-suyamu');
                newsroomWrapper.classList.add('theme-' + targetFeed);
            }

            loadFeed(targetFeed);
        });
    });

    // 슬라이더 화살표 이벤트
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    nextBtn.addEventListener('click', () => {
      if(track.children.length === 0 || !track.children[0].classList.contains('card_insta')) return;

      const wrapperWidth = document.querySelector('.slider-wrapper').offsetWidth;
      const cardTotalWidth = track.children[0].offsetWidth + 30;
      const visibleCount = Math.floor(wrapperWidth / cardTotalWidth);

      const maxIndex = Math.max(0, totalCards - visibleCount);
      if(currentIndex < maxIndex) {
        currentIndex++;
        updateSlider();
      }
    });

    prevBtn.addEventListener('click', () => {
      if(currentIndex > 0) {
        currentIndex--;
        updateSlider();
      }
    });

    function updateSlider() {
      if(track.children.length === 0 || !track.children[0].classList.contains('card_insta')) return;
      const cardWidth = track.children[0].offsetWidth;
      track.style.transform = `translateX(-${currentIndex * (cardWidth + 30)}px)`;
    }

    // 화면 로드 시 실행할 함수
    initializeNewsroom(); // 백그라운드 스캔 후 최신 탭 자동 클릭



        </script>
    </div>
    <!-- //2026-04-14 newsroom -->

    <div class="w1200">
        <div class="row mt200 pb200 weWrap">
            <div class="col-lg-6 pt50 wow fadeInLeft">
                <video class=" round40" autoplay loop playsinline muted>
                    <source src="./img/main/conceptmotion_600.mp4" type="video/mp4">
                </video>
            </div>
            <div class="col-lg-6 pt50 weBox">
                <div class=" wow fadeInRight pl50" data-wow-duration="1s" data-wow-delay="0.2s">
                    <p class="f50 fw800">Who We Are</p>
                    <p class="f22 fw400 gray01 mt30">
                        Total Service Group for Customers
                    </p>
                    <p class="f18 lh180 fw400 gray02 mt70  ">
                        30년 넘게 다양한 B2C 제품의<br class="wView">
                        유통판매업 네트워크를 쌓아온 오쎄는 <br class="wView">
                        이커머스 플랫폼 운영과<br class="wView">
                        오쎄만의 차별화된 브랜드, 콘텐츠 개발을 통해<br class="wView">
                        새로운 고객가치를 창출해가는 토탈서비스그룹입니다.
                    </p>
                    <a href="/whoweare"><p class="btn01 mt50 hvr-sweep-to-right">More</p></a>
                    <a href="./img/common/OsseCompanyIntroduction_web.pdf" target="_blank">&nbsp;<p
                            class="btn01 mt50 hvr-sweep-to-right">Introduction.PDF</p></a>
                </div>
            </div>
        </div>
        <!-- //row -->
    </div>
    <!-- //w1400 -->
    <div class="w100 bgBlack mt130">
        <div class="center pt150 pb80 wow fadeInDown">
            <p class="f50 fw900 white">What We Do</p>
            <p class="f18 fw400 white mt20">우리는 고객과의 진정성 있는 소통을 바탕으로,<br>우리만의 독창적인 서비스를 지속적으로 발전시켜 나갑니다.</p>
        </div>
        <div class="content-card pb200 row ">
            <div class="col-md-2 col-6 wow fadeInDown" data-wow-delay="1.0s">
                <a class="card" href="/ossebrand">
                    <div class="front" style="background-image: url(./img/main/main01_optimized.png)"></div>
                    <div class="back">
                        <div class="f16">
                            <p>보다 나은 라이프스타일을 위한 오쎄 자체 브랜드</p>
                            <button class="btn01 hvr-sweep-to-right mt20">Click Here</button>
                        </div>
                    </div>
                </a>
                <a href=""><p class="card-title white f27 fw400 center mt20">OSSE Brands</p></a>
            </div>
            <div class="col-md-2 col-6 wow fadeInDown" data-wow-delay="1.2s">
                <a class="card" href="/sales">
                    <div class="front" style="background-image: url(./img/main/main02_optimized.png)">
                        <!-- <p>Lorem ipsum dolor sit amet consectetur adipisi.</p> -->
                    </div>
                    <div class="back">
                        <div class="f17">
                            <p>신뢰로 이어지는 관계를 구축하는 유통 &middot; 판매 시스템</p>
                            <button class="btn01 hvr-sweep-to-right mt20">Click Here</button>
                        </div>
                    </div>
                </a>
                <a href=""><p class="card-title white f27 fw400 center mt20">Distribution & Sales</p></a>
            </div>

            <!-- 2026-03-19 -->
            <div class="col-md-2 col-6 wow fadeInDown" data-wow-delay="1.4s"><!-- 시간수정 -->
                <a class="card" href="/globalfood">
                    <div class="front" style="background-image: url(/img/main/main_06.png)">
                    </div>
                    <div class="back">
                        <div class="f17">
                            <p>OSSE Globalfood가 엄선한 세계의 맛을 전합니다.</p>
                            <button class="btn01 hvr-sweep-to-right mt20">Click Here</button>
                        </div>
                    </div>
                </a>
                <a href=""><p class="card-title white f27 fw400 center mt20">OSSE Globalfood</p></a>
            </div>
            <!-- //2026-03-19 -->
            <div class="col-md-2 col-6 wow fadeInDown" data-wow-delay="1.6s">
                <a class="card" href="/ecommerce">
                    <div class="front" style="background-image: url(./img/main/main03_optimized.png)">
                        <!-- <p>Lorem ipsum dolor sit amet consectetur adipisi.</p> -->
                    </div>
                    <div class="back">
                        <div class="f17">
                            <p>소통으로 만들어지는 고객 만족, EDAYMALL 운영</p>
                            <button class="btn01 hvr-sweep-to-right mt20">Click Here</button>
                        </div>
                    </div>
                </a>
                <a href=""><p class="card-title white f27 fw400 center mt20">E-Commerce</p></a></a>
            </div>
            <div class="col-md-2 col-6 wow fadeInDown" data-wow-delay="1.8s">
                <a class="card" href="/trade">
                    <div class="front" style="background-image: url(./img/main/main04_optimized.png)">
                        <!-- <p>Lorem ipsum dolor sit amet consectetur adipisi.</p> -->
                    </div>
                    <div class="back">
                        <div class="f17">
                            <p>지속 가능한 맞춤 솔루션을 제공하는 식품 원자재 공급</p>
                            <button class="btn01 hvr-sweep-to-right mt20">Click Here</button>
                        </div>
                    </div>
                </a>
                <a href=""><p class="card-title white f27 fw400 center mt20">Ingredient Trade</p></a>
            </div>
            <div class="col-md-2 col-6 wow fadeInDown" data-wow-delay="2s">
                <a class="card" href="/Game">
                    <div class="front" style="background-image: url(./img/main/main05_optimized.png)">
                        <!-- <p>Lorem ipsum dolor sit amet consectetur adipisi.</p> -->
                    </div>
                    <div class="back">
                        <div class="f17">
                            <p>새로운 경험과 즐거움을 선사하는 글로벌 서비스 게임</p>
                            <button class="btn01 hvr-sweep-to-right mt20">Click Here</button>
                        </div>
                    </div>
                </a>
                <a href=""><p class="card-title white f27 fw400 center mt20">Game</p></a>
            </div>
        </div>
    </div>

    <div class="w1400">
        <div class="center pt150 pb80 wow fadeInDown">
            <p class="f50 fw900 ">What We've Done</p>
            <p class="f18 fw400  mt20"></p>
        </div>

        <div class="content-card pb80 row wow fadeInDown">
            <!-- 2026-03-20 매출 -->
            <div class="col-md-3  col-6">
                <div class="center ">
                    <p class="f80 fw900"><span class="counter" data-start="0" data-end="32">32</span><span
                            class="f30 fw600">years</span></p>
                    <p class="f20 fw400 gray03">고객님과<br>함께한 시간<br>&nbsp;</p>
                </div>
            </div>
            <div class="col-md-3  col-6">
                <div class="center">
                    <p class="f80 fw900"><span class="counter" data-start="0" data-end="55">55</span><span
                            class="f30 fw600">채널</span></p>
                    <p class="f20 fw400 gray03">온라인 판매<br>유통망<br>&nbsp;</p>
                </div>
            </div>
            <div class="col-md-3  col-6">
                <div class="center">
                    <p class="f80 fw900"><span class="counter" data-start="0" data-end="769">769</span><span
                            class="f30 fw600">억원</span></p>
                    <p class="f20 fw400 gray03">연 매출액<br>*(2025년 기준)<br>&nbsp;</p>
                </div>
            </div>
            <div class="col-md-3  col-6">
                <div class="center">
                    <p class="f80 fw900"><span class="counter" data-start="0" data-end="115">115</span><span
                            class="f30 fw600">%</span></p>
                    <p class="f20 fw400 gray03">당기순이익 성장률<br> *(2023년 기준)<br>&nbsp;</p>
                </div>
            </div>
            <!-- //2026-03-20 -->
        </div>
    </div>
    <script>
$(document).ready(function() {
    const $counters = $(".counter");
    const exposurePercentage = 100;
    const duration = 1000;
    const addCommas = true;

    function updateCounter($el, start, end) {
        let startTime;
        function animateCounter(timestamp) {
            if (!startTime) startTime = timestamp;
            const progress = (timestamp - startTime) / duration;
            const current = Math.round(start + progress * (end - start));
            const formattedNumber = addCommas ? current.toLocaleString() : current;
            $el.text(formattedNumber);
            if (progress < 1) {
                requestAnimationFrame(animateCounter);
            } else {
                $el.text(addCommas ? end.toLocaleString() : end);
            }
        }
        requestAnimationFrame(animateCounter);
    }

    $(window).on('scroll', function() {
        $counters.each(function() {
            const $el = $(this);
            if (!$el.data('scrolled')) {
                const rect = $el[0].getBoundingClientRect();
                const winHeight = window.innerHeight;
                const contentHeight = rect.bottom - rect.top;

                if (rect.top <= winHeight - (contentHeight * exposurePercentage / 100) && rect.bottom >= (contentHeight * exposurePercentage / 100)) {
                    const start = parseInt($el.data("start"));
                    const end = parseInt($el.data("end"));
                    updateCounter($el, start, end);
                    $el.data('scrolled', true);
                }
            }
        });
    }).scroll();
});


    </script>
    <!-- //w1400 -->


    <div class="w100 bgBlack mt130">
        <div class="w1200">
            <div class="center pt150 pb80 wow fadeInDown">
                <p class="f50 fw900 white">How Can We Help?</p>
                <p class="f18 fw400 white mt20">고객의 필요와 목표를 깊이 이해하고 함께 <br>성장할 수 있는 가치를 창출하는 데 초점을 둡니다.</p>
            </div>

            <div class="pb200 row ">
                <div class="col-md-6 mb20m wow fadeInDown" data-wow-delay="0.5s">
                    <a href="https://www.edaymall.com/" target="_blank">
                        <div class="grayBox round30 hvr-sweep-to-right2">
                            <p class="black f50 fw700 lh100">Shop</p>
                            <p class="arrow_right"><img src="./img/arrow_right.png" alt="arrow"/></p>
                            <p class="gray03 f23 fw400 mt50  text-right">for Customer</p>
                        </div>
                    </a>
                </div>
                <div class="col-md-6 mb20m wow fadeInDown" data-wow-delay="1s">
                    <a href="/contactus">
                        <div class="grayBox round30 hvr-sweep-to-right2">
                            <p class="black f50 fw700 lh100">Contact</p>
                            <p class="arrow_right"><img src="./img/arrow_right.png" alt="arrow"/></p>
                            <p class="gray03 f23 fw400 mt50  text-right">for Business</p>
                        </div>
                    </a>
                </div>

            </div>
        </div>
    </div>
    <!-- //w1400 -->
    <!-- ================================
            // Content
    ================================ -->

    <!-- ================================
            Footer
    ================================ -->
    <!DOCTYPE html>
<html>
<footer class="w100 bgBlack">
    <div class="w1400">
        <div class="row flex">
            <div class="col-md-8 gray02 pb20 f14">
                <p>서울 성동구 아차산로 121 | <br class="mView"> 소비자상담 : 080-999-0909 | <br class="mView"> TEL 02-318-3217~9 | <br class="mView"> FAX 02-318-3216 |<br class="mView"> <b class="person"><a href="/personal" >개인정보처리방침</a></b> | <br class="mView"> <b class="gray04"><a href="/terms">이용약관</a></b></p>
                <p class="mt5">ⓒ2025 OSSE. All rights reserved.</p>
            </div>
            <div class="col-md-4  flex02 pb50 f14">
                <select class="family" onchange="if(this.value) window.open(this.value);">
                    <option value="https://www.osse.co.kr/">Family Site</option>
                    <option value="https://www.vegemil.co.kr/">정식품</option>
                    <option value="https://www.innp.co.kr/kr/">자연과사람들</option>
                    <option value="https://www.edaymall.com/">이데이몰</option>
                </select>
            </div>
        </div>
    </div>

</footer>
</html>
    <!-- ================================
            // Footer
    ================================ -->
</main>
<!-- 2026-04-14 모달 스크립트 -->
<script>
// 오늘 하루 보지 않기 쿠키 설정 함수
function setPopupCookie(name, value, expiredays) {
    var todayDate = new Date();
    todayDate.setDate(todayDate.getDate() + expiredays);
    document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toUTCString() + ";";
}

$(document).ready(function() {
    var endDate = new Date("2026-04-30T23:59:59");
    var currentDate = new Date();
    var cookiedata = document.cookie;

    // 현재 시간이 종료일 이전이고, 쿠키가 없을 때만 팝업 표시
    if (currentDate <= endDate && cookiedata.indexOf("hideRecruitPopup=Y") < 0) {
        $("#recruitModalOverlay, #recruitPopup").show();

        const popupApiUrls = [
            `https://graph.facebook.com/v19.0/17841476371326067/media?fields=id,media_type,media_url,permalink,thumbnail_url,caption,timestamp&access_token=EAALUCP3PZBtMBRBIms4JmgQc8Q4DUjIohpzZBs2r3AeglNo35nPBbK4RJu0YbzUZCNz8GxS9NcBFch4mjtyowxqcgpt20SPZAwhtVlUkkav5mRQqMf4ncAiirjLGHeSptZA5HkFFuFIiyK12FXSPZCFowkfqfZAJ4cVxZCqij0y8UR9GRomoFPcCnjtvxhZCkldoKVNebBWjRkwmW6FUD`,
            `https://graph.facebook.com/v19.0/17841464573555434/media?fields=id,media_type,media_url,permalink,thumbnail_url,caption,timestamp&access_token=EAASAHIf65TQBRHJkehYqVRfBgZAgZAk6RbIxEKitZCdZBIRZBWLvR8Ytj8kVoy6e6yscrS5JqTBm8JOzqUUsnBct0ZBWE3heJS9dMRtSS5bc1YDjtNPZA4yqd5liv0gRGjl5gBlbUemKHH3wyYEXzloW4yV6sMUacnluFZAZCVxJLyZBztSmzViCmk5IhNokXXP7bdhmc5W0Sou6AmXNX5`,
            `https://graph.facebook.com/v19.0/17841471394074929/media?fields=id,media_type,media_url,permalink,thumbnail_url,caption,timestamp&access_token=EAAVaTKx0fiMBRMympyFigC2YqJnWmjljdPXkwG6RDZBProbrDEYdPprYapiyZC8Cni9TkQiu5bHbppnQ6CC7iWYWbiu84XtasADHZAUtMvsA6C29Td67Sp8qh9mwXWwj9tXCtcHrYtdOkQBvnm1ewMoRZCKUDjPoWtRoPHHwox6YUl5iE3H5K4hj4wXDULZBdY5IsjvyKeHbc3FX8`
        ];

        Promise.all(popupApiUrls.map(url => fetch(url).then(res => res.json()).catch(e => null)))
            .then(results => {
                let allPosts = [];

                results.forEach(data => {
                    if (data && data.data) {
                        const onlyImages = data.data.filter(post => post.media_type !== 'VIDEO');
                        allPosts = allPosts.concat(onlyImages);
                    }
                });

                allPosts.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
                const recentPosts = allPosts.slice(0, 3);

                const popupWrapper = document.getElementById('popupSwiperWrapper');
                popupWrapper.innerHTML = '';

                // ==============================================================
                // 🚀 2주 한정 채용 팝업 추가
                // ==============================================================
                var recruitTargetDate = new Date("2026-04-28T23:59:59");

                if (currentDate <= recruitTargetDate) {
                    const specificSlideHTML = `
                        <div class="swiper-slide">
                            <a href="https://www.saramin.co.kr/zf_user/jobs/relay/view?rec_idx=53620219#seq=0" target="_blank" class="popup-insta-slide">
                                <img src="./img/want/reu_ad01_.jpg" alt="OSSE Recruitment" style="width: 100%; height: 100%; object-fit: cover; display: block;">
                            </a>
                        </div>
                    `;
                    popupWrapper.insertAdjacentHTML('beforeend', specificSlideHTML);
                }
                // ==============================================================

                // 3. 인스타그램 슬라이드 생성
                recentPosts.forEach(post => {
                    const imgSrc = post.media_url;
                    let rawCaption = post.caption ? post.caption.replace(/\n/g, ' ') : 'Instagram Post';
                    let formattedDate = '';
                    if (post.timestamp) {
                        const dateObj = new Date(post.timestamp);
                        formattedDate = `${dateObj.getFullYear()}. ${String(dateObj.getMonth() + 1).padStart(2, '0')}. ${String(dateObj.getDate()).padStart(2, '0')}`;
                    }

                    const slideHTML = `
                        <div class="swiper-slide">
                            <a href="${post.permalink}" target="_blank" class="popup-insta-slide">
                                <img src="${imgSrc}" alt="OSSE Instagram" style="width: 100%; height: 100%; object-fit: cover; display: block;">
                                <div style="position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px 20px; background: transparent; text-align: left; box-sizing: border-box;">
                                    <p class="insta-caption" style="color: #fff; font-size: 18px; font-weight: bold; line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 5px rgba(0,0,0,0.8), 0 0 15px rgba(0,0,0,0.6);">${rawCaption}</p>
                                    <p style="color: #eee; font-size: 13px; margin: 8px 0 0 0; text-shadow: 1px 1px 4px rgba(0,0,0,0.8);">${formattedDate}</p>
                                </div>
                            </a>
                        </div>
                    `;
                    popupWrapper.insertAdjacentHTML('beforeend', slideHTML);
                });

                // 4. 슬라이드 DOM 업데이트 직후 Swiper 강제 실행
                var popupSwiper = new Swiper(".recruitSwiper", {
                    loop: true,
                    autoplay: {
                        delay: 3500,
                        disableOnInteraction: false,
                    },
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                    },
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },
                    observer: true,
                    observeParents: true,
                    observeSlideChildren: true
                });
            })
            .catch(err => {
                console.error("팝업 인스타 통합 연동 에러:", err);
                document.getElementById('popupSwiperWrapper').innerHTML = '<p style="padding:20px; text-align:center;">Failed to load data.</p>';
            });

    } else {
        $("#recruitModalOverlay, #recruitPopup").hide();
    }

    // 닫기 버튼 클릭 이벤트
    $("#btnClosePopup").click(function() {
        if ($("#chkHideToday").is(":checked")) {
            setPopupCookie("hideRecruitPopup", "Y", 1);
        }
        $("#recruitModalOverlay, #recruitPopup").hide();
    });

    // 배경 클릭 시 닫기
    $("#recruitModalOverlay").click(function() {
        $("#recruitModalOverlay, #recruitPopup").hide();
    });
});



</script>
<script src="./common/js/bootstrap.bundle.js"></script>
<!-- main Video Slide 
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="./common/js/video.js"></script>
 // main Video Slide -->
<script src="./common/js/common.js"></script>
<!-- mobilemenu -->
<script src="./common/js/script_mobilemenu.js"></script>
<!-- wow -->
<script src="./common/js/wow.min.js"></script>
<script>
	new WOW().init();



</script>
</body>
</html>