{"id":10,"date":"2025-09-06T22:41:12","date_gmt":"2025-09-06T22:41:12","guid":{"rendered":"http:\/\/jcresources.co.kr\/en\/?page_id=10"},"modified":"2025-12-08T23:22:41","modified_gmt":"2025-12-08T23:22:41","slug":"home","status":"publish","type":"page","link":"https:\/\/jcresources.co.kr\/en\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10\" class=\"elementor elementor-10\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4b9d3ea e-con-full e-flex e-con e-parent\" data-id=\"4b9d3ea\" data-element_type=\"container\" id=\"section1\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b863407 elementor-widget elementor-widget-html\" data-id=\"b863407\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"hero-slider\" id=\"heroSlider\">\r\n    <div class=\"slide active\" style=\"background-image:url('\/wp-content\/uploads\/main_01.jpg');\">\r\n        <div class=\"slide__overlay\"><\/div>\r\n        <div class=\"slide__content\">\r\n            <div class=\"slide__inner\">\r\n                <h2 class=\"slide__title\">A sustainable future, <br>begins with resource independence.<\/h2>\r\n                <p class=\"slide__desc\">A sustainable future begins with resource self-sufficiency.<\/p>\r\n                <div class=\"slide__nav\">\r\n                    <button type=\"button\" class=\"nav-btn prev\" aria-label=\"\uc774\uc804\"><\/button>\r\n                    <button type=\"button\" class=\"nav-btn next\" aria-label=\"\ub2e4\uc74c\"><\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"slide\" style=\"background-image:url('\/wp-content\/uploads\/main_03.jpg');\">\r\n        <div class=\"slide__overlay\"><\/div>\r\n        <div class=\"slide__content\">\r\n            <div class=\"slide__inner\">\r\n                <h2 class=\"slide__title\">Global partner in resource distribution<\/h2>\r\n                <p class=\"slide__desc\">Global partner in resource distribution<\/p>\r\n                <div class=\"slide__nav\">\r\n                    <button type=\"button\" class=\"nav-btn prev\" aria-label=\"\uc774\uc804\"><\/button>\r\n                    <button type=\"button\" class=\"nav-btn next\" aria-label=\"\ub2e4\uc74c\"><\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"slide\" style=\"background-image:url('\/wp-content\/uploads\/main_02-1.jpg');\">\r\n        <div class=\"slide__overlay\"><\/div>\r\n        <div class=\"slide__content\">\r\n            <div class=\"slide__inner\">\r\n                <h2 class=\"slide__title\">Recycling resources, our responsibility<\/h2>\r\n                <p class=\"slide__desc\">Recycling resources is our responsibility and duty<\/p>\r\n                <div class=\"slide__nav\">\r\n                    <button type=\"button\" class=\"nav-btn prev\" aria-label=\"\uc774\uc804\"><\/button>\r\n                    <button type=\"button\" class=\"nav-btn next\" aria-label=\"\ub2e4\uc74c\"><\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div class=\"slider-dots\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n    (function() {\r\n        var root = document.getElementById('heroSlider')\r\n        var slides = Array.from(root.querySelectorAll('.slide'))\r\n        var dotsContainer = root.querySelector('.slider-dots')\r\n        var idx = 0,\r\n            timer = null,\r\n            DUR = 8000\r\n        var dots = []\r\n\r\n        slides.forEach(function(_, i) {\r\n            var dot = document.createElement('button')\r\n            dot.className = 'dot'\r\n            dot.setAttribute('aria-label', (i + 1) + '\ubc88 \uc2ac\ub77c\uc774\ub4dc')\r\n            dot.addEventListener('click', function() {\r\n                setActive(i)\r\n                restart()\r\n            })\r\n            dotsContainer.appendChild(dot)\r\n            dots.push(dot)\r\n        })\r\n\r\n        function setActive(n) {\r\n            slides.forEach(function(s) {\r\n                s.classList.remove('active')\r\n            })\r\n            dots.forEach(function(d) {\r\n                d.classList.remove('active')\r\n            })\r\n            idx = (n + slides.length) % slides.length\r\n            slides[idx].classList.add('active')\r\n            dots[idx].classList.add('active')\r\n        }\r\n\r\n        function next() {\r\n            setActive(idx + 1)\r\n            restart()\r\n        }\r\n\r\n        function prev() {\r\n            setActive(idx - 1)\r\n            restart()\r\n        }\r\n\r\n        function start() {\r\n            timer = setInterval(next, DUR)\r\n        }\r\n\r\n        function stop() {\r\n            if (timer) {\r\n                clearInterval(timer)\r\n                timer = null\r\n            }\r\n        }\r\n\r\n        function restart() {\r\n            stop()\r\n            start()\r\n        }\r\n\r\n        root.querySelectorAll('.nav-btn.prev').forEach(function(b) {\r\n            b.addEventListener('click', function(e) {\r\n                e.stopPropagation();\r\n                prev()\r\n            })\r\n            b.addEventListener('touchstart', function(e) {\r\n                e.stopPropagation();\r\n                prev()\r\n            }, {\r\n                passive: true\r\n            })\r\n        })\r\n        root.querySelectorAll('.nav-btn.next').forEach(function(b) {\r\n            b.addEventListener('click', function(e) {\r\n                e.stopPropagation();\r\n                next()\r\n            })\r\n            b.addEventListener('touchstart', function(e) {\r\n                e.stopPropagation();\r\n                next()\r\n            }, {\r\n                passive: true\r\n            })\r\n        })\r\n\r\n        setActive(0)\r\n        start()\r\n    })()\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-55169c5 e-con-full e-flex e-con e-parent\" data-id=\"55169c5\" data-element_type=\"container\" id=\"section2\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d0e40da elementor-widget elementor-widget-html\" data-id=\"d0e40da\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"diagram-wrap\">\r\n    <h2 class=\"diagram-side left\">Producing<\/h2>\r\n\r\n    <div class=\"circle-diagram\">\r\n        <svg class=\"donut\" viewBox=\"0 0 1000 1000\">\r\n            <g id=\"segments\" transform=\"translate(500,500)\"><\/g>\r\n            <circle cx=\"500\" cy=\"500\" r=\"180\" fill=\"none\" \/>\r\n        <\/svg>\r\n        <h1 class=\"center-title\">JC<\/h1>\r\n    <\/div>\r\n\r\n    <h2 class=\"diagram-side right\">Trading<\/h2>\r\n<\/div>\r\n\r\n<script>\r\n    function polarToCartesian(r, angleDeg) {\r\n        const rad = (Math.PI \/ 180) * angleDeg;\r\n        return [r * Math.cos(rad), r * Math.sin(rad)];\r\n    }\r\n\r\n    function describeSegment(startOuter, endOuter, startInner, endInner, R, r) {\r\n        const [x1, y1] = polarToCartesian(R, startOuter);\r\n        const [x2, y2] = polarToCartesian(R, endOuter);\r\n        const [x3, y3] = polarToCartesian(r, endInner);\r\n        const [x4, y4] = polarToCartesian(r, startInner);\r\n\r\n        return `\r\n            M ${x1},${y1}\r\n            A ${R},${R} 0 0,1 ${x2},${y2}\r\n            L ${x3},${y3}\r\n            A ${r},${r} 0 0,0 ${x4},${y4}\r\n            Z\r\n        `;\r\n    }\r\n\r\n    const g = document.getElementById('segments');\r\n    const R = 420, r = 180;\r\n    const count = 5;\r\n    const gapPx = 20;\r\n    const colors = [\"#5A9F7E\", \"#8BD15E\", \"#2b576f\", \"#1e87b0\", \"#2cafc3\"];\r\n    const labels = [\r\n        { title: \"Recycling\", desc: \"W, Mo, V, Ni, NdPr, <br>Lithium Battery\" },\r\n        { title: \"Strategic Investment<br>&Partnership\", desc: \"\" },\r\n        { title: \"Global<br>Network\", desc: \"\" },\r\n        { title: \"Trading\", desc: \"Ferro Alloys, Scrap, <br>Sludge, Foundry Auxiliary Materials\" },\r\n        { title: \"Electrification<br>Item\", desc: \"Lithium, <br>Lithium Battery Materials, <br>Solder Paste, Flux\" }\r\n    ];\r\n\r\n    const fullAngle = 360 \/ count;\r\n    const outerGapAngle = (gapPx \/ R) * (180 \/ Math.PI);\r\n    const innerGapAngle = (gapPx \/ r) * (180 \/ Math.PI);\r\n    const rotateOffset = 18;\r\n\r\n    const order = [3, 4, 0, 1, 2];\r\n\r\n    for (let i = 0; i < count; i++) {\r\n        const baseAngle = i * fullAngle + rotateOffset;\r\n        const startOuter = baseAngle + outerGapAngle \/ 2;\r\n        const endOuter   = baseAngle + fullAngle - outerGapAngle \/ 2;\r\n        const startInner = baseAngle + innerGapAngle \/ 2;\r\n        const endInner   = baseAngle + fullAngle - innerGapAngle \/ 2;\r\n        const mid        = (startOuter + endOuter) \/ 2;\r\n\r\n        const path = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"path\");\r\n        path.setAttribute(\"d\", describeSegment(startOuter, endOuter, startInner, endInner, R, r));\r\n        path.setAttribute(\"fill\", colors[i]);\r\n        path.setAttribute(\"class\", \"seg-shape\");\r\n        const seq = order.indexOf(i);\r\n        path.style.transitionDelay = `${seq * 0.2}s`;\r\n        g.appendChild(path);\r\n\r\n        const [tx, ty] = polarToCartesian((R + r) \/ 2, mid);\r\n        const text = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\r\n        text.setAttribute(\"x\", tx);\r\n        text.setAttribute(\"y\", ty);\r\n        text.setAttribute(\"class\", \"seg-text\");\r\n        text.setAttribute(\"text-anchor\", \"middle\");\r\n        text.setAttribute(\"dominant-baseline\", \"middle\");\r\n        text.style.transitionDelay = `${seq * 0.2 + 0.1}s`;\r\n\r\n        const titleLines = labels[i].title.split(\"<br>\");\r\n        titleLines.forEach((line, idx) => {\r\n            const tspan = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"tspan\");\r\n            tspan.setAttribute(\"x\", tx);\r\n            tspan.setAttribute(\"class\", \"seg-title-line\");\r\n            tspan.setAttribute(\"dy\", idx === 0 ? \"-0.3em\" : \"1.2em\");\r\n            tspan.textContent = line.trim();\r\n            text.appendChild(tspan);\r\n        });\r\n\r\n        const descLines = labels[i].desc.split(\"<br>\");\r\n        descLines.forEach((line, idx) => {\r\n            const tspan = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"tspan\");\r\n            tspan.setAttribute(\"x\", tx);\r\n            tspan.setAttribute(\"class\", \"seg-desc-line\");\r\n            tspan.setAttribute(\"dy\", idx === 0 ? \"1.6em\" : \"1.2em\");\r\n            tspan.textContent = line.trim();\r\n            text.appendChild(tspan);\r\n        });\r\n\r\n        g.appendChild(text);\r\n    }\r\n\r\n    const diagram = document.querySelector('.circle-diagram');\r\n    const observer = new IntersectionObserver(es => {\r\n        es.forEach(e => {\r\n            if (e.isIntersecting) {\r\n                diagram.classList.add('animate');\r\n                observer.disconnect();\r\n            }\r\n        });\r\n    }, { threshold: .3 });\r\n    observer.observe(diagram);\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>A sustainable future, begins with resource independence. A sustainable future begins with resource self-sufficiency. Global partner in resource distribution Global partner in resource distribution Recycling resources, our responsibility Recycling resources is our responsibility and duty Producing JC Trading<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/jcresources.co.kr\/en\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jcresources.co.kr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jcresources.co.kr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jcresources.co.kr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jcresources.co.kr\/en\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":30,"href":"https:\/\/jcresources.co.kr\/en\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":2874,"href":"https:\/\/jcresources.co.kr\/en\/wp-json\/wp\/v2\/pages\/10\/revisions\/2874"}],"wp:attachment":[{"href":"https:\/\/jcresources.co.kr\/en\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}