Our Profile<\/title> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <style> \/* ===== RESET ===== *\/ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: \"Segoe UI\", Arial, Helvetica, sans-serif; background: #f4f4f4; overflow-x: hidden; } \/* ===== WRAPPER ===== *\/ .visual-wrapper { max-width: 1500px; margin: 0 auto; padding: 80px 60px; } \/* ===== IMAGE SECTION ===== *\/ .visual-section { position: relative; margin-bottom: 80px; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 30px 70px rgba(0,0,0,0.18); cursor: zoom-in; opacity: 1; transform: translateY(0); transition: opacity 1s cubic-bezier(.19,1,.22,1), transform 1s cubic-bezier(.19,1,.22,1); } \/* animation states *\/ .visual-section.animate { opacity: 0; transform: translateY(50px); } .visual-section.show { opacity: 1; transform: translateY(0); } \/* image fits naturally *\/ .visual-section img { width: 100%; height: auto; \/* \ud83d\udd11 ikut ukuran asli gambar *\/ display: block; } \/* ===== FULLSCREEN VIEW ===== *\/ .fullscreen { position: fixed; inset: 0; background: rgba(0,0,0,0.94); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .35s ease; } .fullscreen.active { opacity: 1; pointer-events: all; } .fullscreen img { max-width: 94%; max-height: 94%; border-radius: 6px; box-shadow: 0 40px 90px rgba(0,0,0,0.6); animation: zoomIn .4s ease; } @keyframes zoomIn { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } \/* ===== FLOATING RIGHT BUTTON ===== *\/ .side-button { position: fixed; top: 50%; right: 24px; transform: translateY(-50%); background: #c40018; color: #ffffff; padding: 14px 22px; font-size: 14px; font-weight: 700; letter-spacing: .5px; text-decoration: none; border-radius: 4px; box-shadow: 0 12px 30px rgba(0,0,0,.25); z-index: 1000; transition: all .3s ease; } .side-button:hover { background: #a30014; transform: translateY(-50%) translateX(-4px); } \/* ===== RESPONSIVE ===== *\/ @media (max-width: 1024px) { .visual-wrapper { padding: 60px 30px; } } @media (max-width: 768px) { .visual-wrapper { padding: 50px 20px; } .side-button { right: 10px; padding: 12px 16px; font-size: 13px; } } <\/style> <\/head> <body>   <div class=\"visual-wrapper\"> <div class=\"visual-section animate\"> <img decoding=\"async\" src=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide11.png\" alt=\"Company Profile Slide 1\" data-img=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide11.png\"> <\/div> <div class=\"visual-section animate\"> <img decoding=\"async\" src=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/bi-process.png\" alt=\"Company Profile Slide 2\" data-img=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/bi-process.png\"> <\/div> <div class=\"visual-section animate\"> <img decoding=\"async\" src=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide2-1.png\" alt=\"Company Profile Slide 3\" data-img=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide2-1.png\"> <\/div> <div class=\"visual-section animate\"> <img decoding=\"async\" src=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide14.png\" alt=\"Company Profile Slide 4\" data-img=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide14.png\"> <\/div> <\/div>  <div class=\"fullscreen\" id=\"fullscreen\"> <img decoding=\"async\" src=\"\" alt=\"Fullscreen Image\"> <\/div> <script> document.addEventListener(\"DOMContentLoaded\", () => { const sections = document.querySelectorAll(\".visual-section\"); const fullscreen = document.getElementById(\"fullscreen\"); const fullscreenImg = fullscreen.querySelector(\"img\"); \/* === SCROLL ANIMATION === *\/ if (\"IntersectionObserver\" in window) { const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add(\"show\"); } }); }, { threshold: 0.2 }); sections.forEach(sec => observer.observe(sec)); } else { sections.forEach(sec => sec.classList.add(\"show\")); } \/* === FULLSCREEN IMAGE === *\/ sections.forEach(section => { const img = section.querySelector(\"img\"); section.addEventListener(\"click\", () => { fullscreenImg.src = img.dataset.img; fullscreen.classList.add(\"active\"); document.body.style.overflow = \"hidden\"; }); }); fullscreen.addEventListener(\"click\", () => { fullscreen.classList.remove(\"active\"); document.body.style.overflow = \"\"; }); document.addEventListener(\"keydown\", e => { if (e.key === \"Escape\") { fullscreen.classList.remove(\"active\"); document.body.style.overflow = \"\"; } }); }); <\/script> <\/body>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Our Profile<\/p>","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-588","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/pages\/588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/comments?post=588"}],"version-history":[{"count":5,"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/pages\/588\/revisions"}],"predecessor-version":[{"id":936,"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/pages\/588\/revisions\/936"}],"wp:attachment":[{"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/media?parent=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t Our Profile<\/title> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <style> \/* ===== RESET ===== *\/ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: \"Segoe UI\", Arial, Helvetica, sans-serif; background: #f4f4f4; overflow-x: hidden; } \/* ===== WRAPPER ===== *\/ .visual-wrapper { max-width: 1500px; margin: 0 auto; padding: 80px 60px; } \/* ===== IMAGE SECTION ===== *\/ .visual-section { position: relative; margin-bottom: 80px; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 30px 70px rgba(0,0,0,0.18); cursor: zoom-in; opacity: 1; transform: translateY(0); transition: opacity 1s cubic-bezier(.19,1,.22,1), transform 1s cubic-bezier(.19,1,.22,1); } \/* animation states *\/ .visual-section.animate { opacity: 0; transform: translateY(50px); } .visual-section.show { opacity: 1; transform: translateY(0); } \/* image fits naturally *\/ .visual-section img { width: 100%; height: auto; \/* \ud83d\udd11 ikut ukuran asli gambar *\/ display: block; } \/* ===== FULLSCREEN VIEW ===== *\/ .fullscreen { position: fixed; inset: 0; background: rgba(0,0,0,0.94); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .35s ease; } .fullscreen.active { opacity: 1; pointer-events: all; } .fullscreen img { max-width: 94%; max-height: 94%; border-radius: 6px; box-shadow: 0 40px 90px rgba(0,0,0,0.6); animation: zoomIn .4s ease; } @keyframes zoomIn { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } \/* ===== FLOATING RIGHT BUTTON ===== *\/ .side-button { position: fixed; top: 50%; right: 24px; transform: translateY(-50%); background: #c40018; color: #ffffff; padding: 14px 22px; font-size: 14px; font-weight: 700; letter-spacing: .5px; text-decoration: none; border-radius: 4px; box-shadow: 0 12px 30px rgba(0,0,0,.25); z-index: 1000; transition: all .3s ease; } .side-button:hover { background: #a30014; transform: translateY(-50%) translateX(-4px); } \/* ===== RESPONSIVE ===== *\/ @media (max-width: 1024px) { .visual-wrapper { padding: 60px 30px; } } @media (max-width: 768px) { .visual-wrapper { padding: 50px 20px; } .side-button { right: 10px; padding: 12px 16px; font-size: 13px; } } <\/style> <\/head> <body>   <div class=\"visual-wrapper\"> <div class=\"visual-section animate\"> <img decoding=\"async\" src=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide11.png\" alt=\"Company Profile Slide 1\" data-img=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide11.png\"> <\/div> <div class=\"visual-section animate\"> <img decoding=\"async\" src=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/bi-process.png\" alt=\"Company Profile Slide 2\" data-img=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/bi-process.png\"> <\/div> <div class=\"visual-section animate\"> <img decoding=\"async\" src=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide2-1.png\" alt=\"Company Profile Slide 3\" data-img=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide2-1.png\"> <\/div> <div class=\"visual-section animate\"> <img decoding=\"async\" src=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide14.png\" alt=\"Company Profile Slide 4\" data-img=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide14.png\"> <\/div> <\/div>  <div class=\"fullscreen\" id=\"fullscreen\"> <img decoding=\"async\" src=\"\" alt=\"Fullscreen Image\"> <\/div> <script> document.addEventListener(\"DOMContentLoaded\", () => { const sections = document.querySelectorAll(\".visual-section\"); const fullscreen = document.getElementById(\"fullscreen\"); const fullscreenImg = fullscreen.querySelector(\"img\"); \/* === SCROLL ANIMATION === *\/ if (\"IntersectionObserver\" in window) { const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add(\"show\"); } }); }, { threshold: 0.2 }); sections.forEach(sec => observer.observe(sec)); } else { sections.forEach(sec => sec.classList.add(\"show\")); } \/* === FULLSCREEN IMAGE === *\/ sections.forEach(section => { const img = section.querySelector(\"img\"); section.addEventListener(\"click\", () => { fullscreenImg.src = img.dataset.img; fullscreen.classList.add(\"active\"); document.body.style.overflow = \"hidden\"; }); }); fullscreen.addEventListener(\"click\", () => { fullscreen.classList.remove(\"active\"); document.body.style.overflow = \"\"; }); document.addEventListener(\"keydown\", e => { if (e.key === \"Escape\") { fullscreen.classList.remove(\"active\"); document.body.style.overflow = \"\"; } }); }); <\/script> <\/body>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Our Profile<\/p>","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-588","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/pages\/588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/comments?post=588"}],"version-history":[{"count":5,"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/pages\/588\/revisions"}],"predecessor-version":[{"id":936,"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/pages\/588\/revisions\/936"}],"wp:attachment":[{"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/media?parent=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}