{"id":7,"date":"2026-04-29T10:47:03","date_gmt":"2026-04-29T02:47:03","guid":{"rendered":"http:\/\/47.242.239.173\/witek\/?page_id=7"},"modified":"2026-07-08T12:00:07","modified_gmt":"2026-07-08T04:00:07","slug":"home","status":"publish","type":"page","link":"http:\/\/47.242.239.173\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-45cd0b2 e-con-full e-flex e-con e-parent\" data-id=\"45cd0b2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4f8c478 elementor-widget elementor-widget-html\" data-id=\"4f8c478\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\r\n  \/**\r\n * \u89c6\u9891\u8f6e\u64ad\u6a2a\u5e45\u6837\u5f0f\r\n * \u5b9e\u73b0\u5168\u5c4f\u89c6\u9891\u6a2a\u5e45\u6548\u679c\uff0c\u5305\u542b\u8fdb\u5ea6\u6761\u5bfc\u822a\u529f\u80fd\r\n *\/\r\n\r\n  \/* \u4e3b\u5bb9\u5668 - \u5168\u5c4f\u89c6\u9891\u6a2a\u5e45 *\/\r\n  .vbs-full-banner {\r\n    width: 100vw;\r\n    position: relative;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    overflow: hidden;\r\n    background: #000;\r\n    height: 900px;\r\n    will-change: transform;\r\n  }\r\n\r\n  \/* \u54cd\u5e94\u5f0f\uff1a\u79fb\u52a8\u7aef\u9ad8\u5ea6\u8c03\u6574 *\/\r\n  @media (max-width: 768px) {\r\n    .vbs-full-banner {\r\n      height: 400px;\r\n    }\r\n  }\r\n\r\n  \/* \u5e7b\u706f\u7247\u5bb9\u5668 *\/\r\n  .vbs-slide {\r\n    position: absolute;\r\n    inset: 0;\r\n    opacity: 0;\r\n    transition: opacity 1s ease, transform 0.8s ease;\r\n    transform: scale(1.02);\r\n  }\r\n\r\n  \/* \u5e7b\u706f\u7247\u906e\u7f69\u5c42 - \u6dfb\u52a0\u534a\u900f\u660e\u906e\u7f69\u63d0\u5347\u6587\u5b57\u53ef\u8bfb\u6027 *\/\r\n  .vbs-slide::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* \u6fc0\u6d3b\u72b6\u6001\u7684\u5e7b\u706f\u7247 *\/\r\n  .vbs-slide.active {\r\n    opacity: 1;\r\n    transform: scale(1);\r\n  }\r\n\r\n  \/* \u89c6\u9891\u5143\u7d20\u6837\u5f0f *\/\r\n  .vbs-slide video {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* \u6807\u9898\u6837\u5f0f *\/\r\n  .vbs-title {\r\n    position: absolute;\r\n    top: 56px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    z-index: 10;\r\n    color: #fff;\r\n    font-size: clamp(20px, 3vw, 40px);\r\n    font-weight: 600;\r\n    text-align: center;\r\n    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);\r\n    margin: 0;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  \/* \u54cd\u5e94\u5f0f\uff1a\u79fb\u52a8\u7aef\u6807\u9898\u4f4d\u7f6e\u8c03\u6574 *\/\r\n  @media (max-width: 768px) {\r\n    .vbs-title {\r\n      top: 25px;\r\n      font-size: 15px;\r\n      white-space: nowrap;\r\n      max-width: 95%;\r\n      padding: 0;\r\n      line-height: 1.3;\r\n    }\r\n  }\r\n\r\n  \/* \u8fdb\u5ea6\u6761\u5305\u88f9\u5bb9\u5668 *\/\r\n  .vbs-progress-wrap {\r\n    position: absolute;\r\n    top: 136px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    display: flex;\r\n    gap: clamp(4px, 0.8vw, 8px);\r\n    width: min(95%, 1150px);\r\n    height: clamp(28px, 4vw, 36px);\r\n    z-index: 10;\r\n    cursor: pointer;\r\n  }\r\n\r\n  \/* \u5355\u4e2a\u8fdb\u5ea6\u6761\u9879 *\/\r\n  .vbs-progress-item {\r\n    flex: 1 1 0%;\r\n    min-width: 0;\r\n    position: relative;\r\n    box-shadow: inset 0px 3px 6px 0px rgba(255, 255, 255, 0.65);\r\n    border-radius: 16px;\r\n    border: 1px solid rgba(255, 255, 255, 0.5);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: all 0.3s ease;\r\n    padding: 0 4px;\r\n    height: 32px;\r\n  }\r\n\r\n  \/* \u8fdb\u5ea6\u6761\u9879\u60ac\u505c\u6548\u679c *\/\r\n  .vbs-progress-item:hover {\r\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);\r\n    border-color: rgba(255, 255, 255, 0.5);\r\n    box-shadow: 0 0 25px rgba(255, 255, 255, 0.35), inset 0 0 35px rgba(255, 255, 255, 0.4);\r\n  }\r\n\r\n  \/* SVG\u8fb9\u6846\u8fdb\u5ea6\u6761\u5bb9\u5668 *\/\r\n  .vbs-border-progress {\r\n    position: absolute;\r\n    inset: -2px;\r\n    pointer-events: none;\r\n    opacity: 0;\r\n    border-radius: 18px;\r\n    overflow: hidden;\r\n  }\r\n\r\n  \/* \u6fc0\u6d3b\u72b6\u6001\u663e\u793a\u8fdb\u5ea6\u6761 *\/\r\n  .vbs-progress-item.active .vbs-border-progress {\r\n    opacity: 1;\r\n  }\r\n\r\n  \/* SVG\u5bb9\u5668\u6837\u5f0f *\/\r\n  .vbs-border-progress svg {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    filter: drop-shadow(0 0 4px rgba(255, 165, 0, 0.6)) drop-shadow(0 0 8px rgba(255, 165, 0, 0.4));\r\n  }\r\n\r\n  \/* \u8fdb\u5ea6\u8def\u5f84 - \u4f7f\u7528stroke-dasharray\u5b9e\u73b0\u52a8\u753b *\/\r\n  .vbs-border-progress .border-progress {\r\n    fill: none;\r\n    stroke: #e16400;\r\n    stroke-width: 4;\r\n    stroke-linecap: round;\r\n    stroke-dasharray: 443;\r\n    stroke-dashoffset: 443;\r\n  }\r\n\r\n  \/* \u8fdb\u5ea6\u6761\u6587\u5b57 *\/\r\n  .vbs-progress-text {\r\n    position: relative;\r\n    z-index: 2;\r\n    white-space: nowrap;\r\n    overflow: visible;\r\n    text-overflow: unset;\r\n    width: 100%;\r\n    font-weight: 400;\r\n    font-size: 14px;\r\n    color: #FFFFFF;\r\n    line-height: 32px;\r\n    text-align: center;\r\n    font-style: normal;\r\n  }\r\n\r\n  \/* \u54cd\u5e94\u5f0f\uff1a\u79fb\u52a8\u7aef\u6587\u5b57\u7701\u7565 *\/\r\n  @media (max-width: 768px) {\r\n    .vbs-progress-text {\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      font-size: 11px;\r\n      line-height: 24px;\r\n    }\r\n\r\n    .vbs-progress-wrap {\r\n      top: 70px;\r\n      height: 28px;\r\n      padding: 0 10px;\r\n    }\r\n\r\n    .vbs-progress-item {\r\n      height: 24px;\r\n      border-radius: 12px;\r\n      padding: 0 2px;\r\n    }\r\n\r\n    .vbs-border-progress {\r\n      inset: -1px;\r\n      border-radius: 14px;\r\n    }\r\n\r\n    .vbs-border-progress svg {\r\n      filter: none;\r\n    }\r\n\r\n    .vbs-border-progress .border-progress {\r\n      stroke-width: 3;\r\n    }\r\n  }\r\n\r\n\r\n\r\n  \/**\r\n * \r\n * solution\r\n *\/\r\n  \/* \u5916\u5c42\u5bb9\u5668\uff1a1920\u5c4f\u56fa\u5b9a1400px\uff0c\u5c45\u4e2d\uff0c\u5168\u7f29\u653e\u517c\u5bb9 *\/\r\n  .solution-wrapper {\r\n    width: 100%;\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n    padding: 30px 0 162px;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .solution-title-wrap {\r\n    text-align: center;\r\n    margin-bottom: 42px;\r\n  }\r\n\r\n  .solution-title-wrap h2 {\r\n    font-weight: 800;\r\n    font-size: clamp(20px, 3vw, 40px);\r\n    color: #000000;\r\n    line-height: 68px;\r\n    font-style: normal;\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .solution-title-wrap p {\r\n    font-weight: 400;\r\n    font-size: 20px;\r\n    color: #333333;\r\n    line-height: 32px;\r\n    font-style: normal;\r\n  }\r\n\r\n  \/* Flex \u901a\u7528\u884c\u5bb9\u5668 *\/\r\n  .solution-flex-row {\r\n    display: flex;\r\n    gap: 20px;\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .flex-item {\r\n    overflow: hidden;\r\n    flex-shrink: 0;\r\n    border-radius: 20px;\r\n  }\r\n\r\n  .flex-item-one {\r\n    width: 57.1%;\r\n  }\r\n\r\n  .flex-item-two {\r\n    flex: 1;\r\n  }\r\n\r\n  .flex-item-three {\r\n    width: 41.4%;\r\n  }\r\n\r\n  .mixture-part {\r\n    flex: 1;\r\n  }\r\n\r\n  .flex-item-four {\r\n    width: 100%;\r\n  }\r\n\r\n  .flex-item-five {\r\n    width: 46%;\r\n  }\r\n\r\n  .flex-item-six {\r\n    flex: 1;\r\n  }\r\n\r\n  .mb-16 {\r\n    margin-bottom: 16px;\r\n  }\r\n\r\n  .solution-wrapper img {\r\n    transition: transform 1s ease-in-out;\r\n    transform: scale(1);\r\n  }\r\n\r\n  \/* \u60ac\u6d6e\u653e\u5927\u6548\u679c *\/\r\n  .solution-wrapper img:hover {\r\n    transform: scale(1.06);\r\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);\r\n  }\r\n\r\n\r\n  \/* \u79fb\u52a8\u7aef\uff1a768px \u4ee5\u4e0b\u5355\u5217\u5806\u53e0 *\/\r\n  @media (max-width: 768px) {\r\n    .solution-wrapper {\r\n      padding: 36px 16px 60px;\r\n    }\r\n\r\n    .solution-title-wrap {\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .solution-title-wrap h2 {\r\n      font-size: 24px;\r\n      line-height: 34px;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n    .solution-title-wrap p {\r\n      font-size: 14px;\r\n      line-height: 20px;\r\n      margin-bottom: 24px;\r\n      padding: 0 10px;\r\n    }\r\n\r\n    .solution-flex-row {\r\n      flex-direction: column;\r\n      gap: 12px;\r\n    }\r\n\r\n    .mb-16 {\r\n      margin-bottom: 12px;\r\n    }\r\n\r\n    .flex-item {\r\n      width: 100%;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .flex-item-one,\r\n    .flex-item-two,\r\n    .flex-item-three,\r\n    .flex-item-four,\r\n    .flex-item-five,\r\n    .flex-item-six {\r\n      width: 100%;\r\n    }\r\n\r\n    .mixture-part {\r\n      width: 100%;\r\n    }\r\n  }\r\n\r\n\r\n\r\n<\/style>\r\n<!-- \u89c6\u9891\u64ad\u653e\u90e8\u5206 -->\r\n<div class=\"vbs-full-banner\">\r\n  <h2 class=\"vbs-title\">We Innovate\uff0cTake you to Explore unKnown!<\/h2>\r\n  <div class=\"vbs-progress-wrap\"><\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n  (function () {\r\n    \/\/ \u9876\u90e8\u89c6\u9891\r\n    const CONFIG = {\r\n      ITEMS: [\r\n        { url: \"http:\/\/47.242.239.173\/img\/01.mp4\", text: \"WLAN\" },\r\n        { url: \"http:\/\/47.242.239.173\/img\/02.mp4\", text: \"WIKING\" },\r\n        { url: \"http:\/\/47.242.239.173\/img\/03.mp4\", text: \"Cloud Switch\" },\r\n        { url: \"http:\/\/47.242.239.173\/img\/04.mp4\", text: \"Superic Industrial\" },\r\n        { url: \"http:\/\/47.242.239.173\/img\/05.mp4\", text: \"Wireless Bridge\" },\r\n        { url: \"http:\/\/47.242.239.173\/img\/06.mp4\", text: \"Solar Solution\" },\r\n      ],\r\n      SHOW_DURATION: 7000,\r\n      PATH_LENGTH: 456, \/\/\r\n      CLASS_PREFIX: \"vbs-\"\r\n    };\r\n\r\n    const debounce = (fn, delay) => {\r\n      let timer = null;\r\n      return (...args) => {\r\n        clearTimeout(timer);\r\n        timer = setTimeout(() => fn.apply(this, args), delay);\r\n      };\r\n    };\r\n\r\n    const createSlide = (item, index) => {\r\n      const slide = document.createElement('div');\r\n      slide.className = `${CONFIG.CLASS_PREFIX}slide${index === 0 ? ' active' : ''}`;\r\n\r\n      const video = document.createElement('video');\r\n      video.muted = true;\r\n      video.loop = true;\r\n      video.playsInline = true;\r\n      video.preload = index === 0 ? 'auto' : index === 1 ? 'metadata' : 'none';\r\n      video.src = item.url;\r\n      video.addEventListener('error', () => console.warn(`Video ${index} load failed`));\r\n\r\n      slide.appendChild(video);\r\n      return slide;\r\n    };\r\n\r\n    const createProgressItem = (item) => {\r\n      const itemEl = document.createElement('div');\r\n      itemEl.className = `${CONFIG.CLASS_PREFIX}progress-item`;\r\n      const width = 200;\r\n      const height = 36;\r\n\r\n      const perimeter = 2 * (width + height) - 8 * 16 + 2 * Math.PI * 16;\r\n\r\n      CONFIG.PATH_LENGTH = Math.round(perimeter);\r\n      itemEl.innerHTML = `\r\n      <div class=\"${CONFIG.CLASS_PREFIX}border-progress\">\r\n        <svg viewBox=\"0 0 200 50\" preserveAspectRatio=\"none\">\r\n          <rect class=\"border-bg\" x=\"2\" y=\"2\" width=\"196\" height=\"46\" rx=\"23\" ry=\"23\" \/>\r\n          <rect class=\"border-progress\" x=\"2\" y=\"2\" width=\"196\" height=\"46\" rx=\"23\" ry=\"23\" \/>\r\n        <\/svg>\r\n      <\/div>\r\n      <span class=\"${CONFIG.CLASS_PREFIX}progress-text\">${item.text}<\/span>\r\n    `;\r\n      return itemEl;\r\n    };\r\n\r\n    try {\r\n      const banner = document.querySelector(`.${CONFIG.CLASS_PREFIX}full-banner`);\r\n      const progressWrap = banner.querySelector(`.${CONFIG.CLASS_PREFIX}progress-wrap`);\r\n      if (!banner || !progressWrap) return;\r\n\r\n      CONFIG.ITEMS.forEach((item, index) => {\r\n        banner.insertBefore(createSlide(item, index), progressWrap);\r\n      });\r\n\r\n      CONFIG.ITEMS.forEach(item => {\r\n        progressWrap.appendChild(createProgressItem(item));\r\n      });\r\n\r\n      const slides = banner.querySelectorAll(`.${CONFIG.CLASS_PREFIX}slide`);\r\n      const videos = banner.querySelectorAll(`.${CONFIG.CLASS_PREFIX}slide video`);\r\n      const progressItems = banner.querySelectorAll(`.${CONFIG.CLASS_PREFIX}progress-item`);\r\n      const progressBorders = banner.querySelectorAll(`.${CONFIG.CLASS_PREFIX}border-progress .border-progress`);\r\n\r\n      if (!slides.length) return;\r\n\r\n      let currentIndex = 0;\r\n      let animationFrame = null;\r\n      let isPaused = false;\r\n\r\n      const resetAllState = () => {\r\n        slides.forEach((slide, i) => {\r\n          slide.classList.remove('active');\r\n          videos[i].pause();\r\n          videos[i].currentTime = 0;\r\n          progressItems[i].classList.remove('active');\r\n          \/\/ \u5f3a\u5236\u7acb\u5373\u91cd\u7f6e\u8fdb\u5ea6\u6761\uff0c\u65e0\u8fc7\u6e21\r\n          progressBorders[i].style.strokeDashoffset = CONFIG.PATH_LENGTH;\r\n        });\r\n      };\r\n\r\n      const playSlider = debounce((index) => {\r\n        if (animationFrame) cancelAnimationFrame(animationFrame);\r\n\r\n        resetAllState();\r\n        currentIndex = index;\r\n\r\n        slides[currentIndex].classList.add('active');\r\n        videos[currentIndex].play().catch(() => { });\r\n        progressItems[currentIndex].classList.add('active');\r\n\r\n        const nextIndex = (currentIndex + 1) % slides.length;\r\n        videos[nextIndex].preload = 'auto';\r\n\r\n        let startTime = Date.now();\r\n        const animate = () => {\r\n          if (isPaused) {\r\n            animationFrame = requestAnimationFrame(animate);\r\n            return;\r\n          }\r\n\r\n          const elapsed = Date.now() - startTime;\r\n          const progress = Math.min(elapsed \/ CONFIG.SHOW_DURATION, 1);\r\n          \/\/ JS\u9010\u5e27\u63a7\u5236\u8fdb\u5ea6\uff0c\u65e0CSS\u8fc7\u6e21\u51b2\u7a81\r\n          progressBorders[currentIndex].style.strokeDashoffset = CONFIG.PATH_LENGTH * (1 - progress);\r\n\r\n          if (progress >= 1) {\r\n            setTimeout(() => playSlider((currentIndex + 1) % slides.length), 500);\r\n            return;\r\n          }\r\n\r\n          animationFrame = requestAnimationFrame(animate);\r\n        };\r\n\r\n        animationFrame = requestAnimationFrame(animate);\r\n      }, 150); \/\/ \u9632\u6296\u65f6\u95f4\u7f29\u77ed\uff0c\u70b9\u51fb\u54cd\u5e94\u66f4\u5feb\r\n\r\n      progressItems.forEach((item, index) => {\r\n        item.addEventListener('click', () => playSlider(index));\r\n      });\r\n\r\n      document.addEventListener('visibilitychange', () => {\r\n        isPaused = document.hidden;\r\n        if (!isPaused) videos[currentIndex].play().catch(() => { });\r\n      });\r\n\r\n      playSlider(0);\r\n    } catch (e) {\r\n      console.error(\"Video banner init failed:\", e);\r\n    }\r\n\r\n\r\n  })();\r\n  \/\/ \u4e2d\u90e8\u8f6e\u64ad\u56fe\r\n  var carouselCurrent = 1;\r\n  var carouselTotal = 3;\r\n  var carouselTimer = null;\r\n  var carouselDelay = 4000;\r\n\r\n  function initCarousel() {\r\n    var wrap = document.getElementById('wrap');\r\n    var track = document.getElementById('track');\r\n    var dotsContainer = document.getElementById('dots');\r\n    var btns = document.querySelectorAll('.tab-btn');\r\n\r\n    \/\/ DOM\u5143\u7d20\u4e0d\u5b58\u5728\u65f6\u76f4\u63a5\u8fd4\u56de\uff0c\u907f\u514d\u62a5\u9519\r\n    if (!wrap || !track || !dotsContainer || btns.length === 0) {\r\n      return;\r\n    }\r\n\r\n    var wrapWidth = wrap.offsetWidth;\r\n\r\n    track.style.width = (wrapWidth * (carouselTotal + 2)) + 'px';\r\n    var panels = document.querySelectorAll('.tab-panel');\r\n    panels.forEach(function (panel) {\r\n      panel.style.width = wrapWidth + 'px';\r\n    });\r\n\r\n    track.style.transition = 'none';\r\n    track.style.transform = 'translateX(-' + wrapWidth + 'px)';\r\n\r\n    dotsContainer.innerHTML = '';\r\n    for (var i = 0; i < carouselTotal; i++) {\r\n      var dot = document.createElement('span');\r\n      dot.className = 'dot';\r\n      if (i === 0) dot.classList.add('active');\r\n      dot.onclick = function (idx) {\r\n        return function () {\r\n          carouselGoTo(idx + 1);\r\n        };\r\n      }(i);\r\n      dotsContainer.appendChild(dot);\r\n    }\r\n\r\n    btns[0].classList.add('active');\r\n    document.querySelector('.tab-main-title').innerText = btns[0].innerText;\r\n\r\n    btns.forEach(function (btn, idx) {\r\n      btn.onclick = function () {\r\n        carouselGoTo(idx + 1);\r\n      };\r\n    });\r\n\r\n    var prevBtn = document.getElementById('prevBtn');\r\n    var nextBtn = document.getElementById('nextBtn');\r\n    if (prevBtn) prevBtn.onclick = carouselPrev;\r\n    if (nextBtn) nextBtn.onclick = carouselNext;\r\n\r\n    wrap.onmouseenter = carouselStop;\r\n    wrap.onmouseleave = carouselStart;\r\n\r\n    setTimeout(function () {\r\n      track.classList.remove('no-transition');\r\n    }, 50);\r\n\r\n    setTimeout(carouselStart, 1000);\r\n  }\r\n\r\n  function carouselGoTo(index) {\r\n    carouselCurrent = index;\r\n    var wrap = document.getElementById('wrap');\r\n    var track = document.getElementById('track');\r\n    var btns = document.querySelectorAll('.tab-btn');\r\n    var dots = document.querySelectorAll('.dot');\r\n    var title = document.querySelector('.tab-main-title');\r\n\r\n    track.style.transition = 'transform 0.5s ease-in-out';\r\n    track.style.transform = 'translateX(-' + (index * wrap.offsetWidth) + 'px)';\r\n\r\n    var logicalIndex = (index - 1) % carouselTotal;\r\n    if (logicalIndex < 0) logicalIndex += carouselTotal;\r\n    btns.forEach(function (b) { b.classList.remove('active'); });\r\n    btns[logicalIndex].classList.add('active');\r\n\r\n    dots.forEach(function (d) { d.classList.remove('active'); });\r\n    dots[logicalIndex].classList.add('active');\r\n\r\n    title.innerText = btns[logicalIndex].innerText;\r\n  }\r\n\r\n  function carouselPrev() {\r\n    var prevIndex = carouselCurrent - 1;\r\n    var wrap = document.getElementById('wrap');\r\n    var wrapWidth = wrap.offsetWidth;\r\n    var track = document.getElementById('track');\r\n\r\n    if (prevIndex < 1) {\r\n      track.style.transition = 'transform 0.5s ease-in-out';\r\n      track.style.transform = 'translateX(0px)';\r\n\r\n      setTimeout(function () {\r\n        track.style.transition = 'none';\r\n        track.style.transform = 'translateX(-' + (carouselTotal * wrapWidth) + 'px)';\r\n        carouselCurrent = carouselTotal;\r\n\r\n        setTimeout(function () {\r\n          track.style.transition = 'transform 0.5s ease-in-out';\r\n        }, 50);\r\n      }, 500);\r\n\r\n      var btns = document.querySelectorAll('.tab-btn');\r\n      var dots = document.querySelectorAll('.dot');\r\n      var title = document.querySelector('.tab-main-title');\r\n      btns.forEach(function (b) { b.classList.remove('active'); });\r\n      btns[carouselTotal - 1].classList.add('active');\r\n      dots.forEach(function (d) { d.classList.remove('active'); });\r\n      dots[carouselTotal - 1].classList.add('active');\r\n      title.innerText = btns[carouselTotal - 1].innerText;\r\n    } else {\r\n      carouselGoTo(prevIndex);\r\n    }\r\n  }\r\n\r\n  function carouselNext() {\r\n    var nextIndex = carouselCurrent + 1;\r\n    var wrap = document.getElementById('wrap');\r\n    var wrapWidth = wrap.offsetWidth;\r\n    var track = document.getElementById('track');\r\n\r\n    if (nextIndex > carouselTotal) {\r\n      track.style.transition = 'transform 0.5s ease-in-out';\r\n      track.style.transform = 'translateX(-' + ((carouselTotal + 1) * wrapWidth) + 'px)';\r\n\r\n      var btns = document.querySelectorAll('.tab-btn');\r\n      var dots = document.querySelectorAll('.dot');\r\n      var title = document.querySelector('.tab-main-title');\r\n      btns.forEach(function (b) { b.classList.remove('active'); });\r\n      btns[0].classList.add('active');\r\n      dots.forEach(function (d) { d.classList.remove('active'); });\r\n      dots[0].classList.add('active');\r\n      title.innerText = btns[0].innerText;\r\n\r\n      setTimeout(function () {\r\n        track.style.transition = 'none';\r\n        track.style.transform = 'translateX(-' + wrapWidth + 'px)';\r\n        carouselCurrent = 1;\r\n\r\n        setTimeout(function () {\r\n          track.style.transition = 'transform 0.5s ease-in-out';\r\n        }, 50);\r\n      }, 500);\r\n    } else {\r\n      carouselGoTo(nextIndex);\r\n    }\r\n  }\r\n\r\n  function carouselStart() {\r\n    carouselStop();\r\n    carouselTimer = setInterval(carouselNext, carouselDelay);\r\n  }\r\n\r\n  function carouselStop() {\r\n    if (carouselTimer) {\r\n      clearInterval(carouselTimer);\r\n      carouselTimer = null;\r\n    }\r\n  }\r\n\r\n  window.onload = initCarousel;\r\n  window.onresize = initCarousel;\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2a483b7 e-flex e-con-boxed e-con e-parent\" data-id=\"2a483b7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-074b062 elementor-widget elementor-widget-html\" data-id=\"074b062\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n \r\n\r\n  \/**\r\n * \r\n * high-quality-hardware\u8f6e\u64ad\u56fe\r\n *\/\r\n  .banner-carousel-wrap {\r\n    width: 100%;\r\n    max-width: 1400px;\r\n    margin: 72px auto 0;\r\n\r\n    .tab-main-title {\r\n      font-weight: 600;\r\n      font-size: 40px;\r\n      color: #000000;\r\n      line-height: 58px;\r\n      text-align: center;\r\n      font-style: normal;\r\n      margin-bottom: 32px;\r\n    }\r\n\r\n    .tab-buttons {\r\n      display: flex;\r\n      justify-content: center;\r\n      gap: 24px;\r\n      margin-bottom: 48px;\r\n    }\r\n\r\n    .tab-btn {\r\n      padding: 10px 25px;\r\n      background: rgba(0, 0, 0, 0.05);\r\n      border-radius: 20px;\r\n      border: none;\r\n      cursor: pointer;\r\n      transition: all 0.3s ease;\r\n      font-weight: 600;\r\n      font-size: 14px;\r\n      color: #000000;\r\n      line-height: 20px;\r\n      text-align: center;\r\n      font-style: normal;\r\n    }\r\n\r\n    .tab-btn.active {\r\n      background: linear-gradient(270deg, #E97000 0%, #D24C00 49.98%, #381100 100%);\r\n      color: #fff;\r\n    }\r\n\r\n    .tab-content-wrap {\r\n      width: 100%;\r\n      border-radius: 30px;\r\n      height: 589px;\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .slide-track {\r\n      display: flex;\r\n      height: 100%;\r\n      transition: transform 0.5s ease-in-out;\r\n    }\r\n\r\n    .slide-track.no-transition {\r\n      transition: none;\r\n    }\r\n\r\n    .tab-panel {\r\n      width: 100%;\r\n      height: 100%;\r\n      flex-shrink: 0;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .img-box {\r\n      width: 100%;\r\n      height: 100%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .img-box img {\r\n      width: 100%;\r\n      height: 100%;\r\n      display: block;\r\n    }\r\n\r\n    .carousel-arrow {\r\n      position: absolute;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      width: 50px;\r\n      height: 50px;\r\n      border-radius: 50%;\r\n      border: none;\r\n      background: rgba(0, 0, 0, 0.5);\r\n      color: #fff;\r\n      font-size: 24px;\r\n      cursor: pointer;\r\n      z-index: 10;\r\n      transition: background 0.3s ease;\r\n    }\r\n\r\n    .carousel-arrow:hover {\r\n      background: rgba(0, 0, 0, 0.7);\r\n    }\r\n\r\n    .carousel-arrow.prev {\r\n      left: 20px;\r\n    }\r\n\r\n    .carousel-arrow.next {\r\n      right: 20px;\r\n    }\r\n\r\n    .carousel-dots {\r\n      position: absolute;\r\n      bottom: 20px;\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      display: flex;\r\n      gap: 12px;\r\n      z-index: 10;\r\n    }\r\n\r\n    .dot {\r\n      width: 12px;\r\n      height: 12px;\r\n      border-radius: 50%;\r\n      background: rgba(255, 255, 255, 0.5);\r\n      cursor: pointer;\r\n      transition: background 0.3s ease;\r\n    }\r\n\r\n    .dot.active {\r\n      background: #fff;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .banner-carousel-wrap {\r\n      padding: 0 16px;\r\n      margin: 36px auto 0;\r\n    }\r\n\r\n    .banner-carousel-wrap .tab-main-title {\r\n      font-size: 15px;\r\n      line-height: 34px;\r\n      margin-bottom: 16px;\r\n    }\r\n\r\n    .banner-carousel-wrap .tab-buttons {\r\n      gap: 8px;\r\n      margin-bottom: 24px;\r\n      flex-wrap: wrap;\r\n      padding: 0 10px;\r\n    }\r\n\r\n    .banner-carousel-wrap .tab-btn {\r\n      padding: 6px 16px;\r\n      font-size: 12px;\r\n      line-height: 18px;\r\n      border-radius: 14px;\r\n    }\r\n\r\n    .banner-carousel-wrap .tab-content-wrap {\r\n      height: 280px;\r\n      border-radius: 16px;\r\n    }\r\n\r\n    .banner-carousel-wrap .carousel-dots {\r\n      bottom: 12px;\r\n      gap: 8px;\r\n    }\r\n\r\n    .banner-carousel-wrap .dot {\r\n      width: 8px;\r\n      height: 8px;\r\n    }\r\n\r\n    .banner-carousel-wrap .carousel-arrow {\r\n      width: 36px;\r\n      height: 36px;\r\n      font-size: 18px;\r\n    }\r\n\r\n    .banner-carousel-wrap .carousel-arrow.prev {\r\n      left: 10px;\r\n    }\r\n\r\n    .banner-carousel-wrap .carousel-arrow.next {\r\n      right: 10px;\r\n    }\r\n\r\n    .banner-carousel-wrap .img-box img {\r\n      object-fit: cover;\r\n    }\r\n  }\r\n<\/style>\r\n<div class=\"solution-wrapper\">\r\n  <div class=\"solution-title-wrap\">\r\n    <h2>SOLUTION<\/h2>\r\n    <p>Easy maintenance, no matter where you are<\/p>\r\n  <\/div>\r\n  <!-- \u7b2c\u4e00\u884c\u5e03\u5c40 -->\r\n  <div class=\"solution-flex-row mb-16\">\r\n    <div class=\"flex-item-one flex-item\">\r\n      <a href=\"http:\/\/47.242.239.173\/index.php\/motel-solution\/\">\r\n        <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/s1.jpg\" alt=\"\">\r\n      <\/a>\r\n    <\/div>\r\n    <div class=\"flex-item-two flex-item\">\r\n      <a href=\"http:\/\/47.242.239.173\/index.php\/cloud-smart-remote-management-cctv-solution\/\">\r\n        <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/s2.jpg\" alt=\"\">\r\n      <\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <!-- \u7b2c\u4e8c\u884c\u5e03\u5c40 -->\r\n  <div class=\"solution-flex-row\">\r\n    <div class=\"flex-item-three flex-item\">\r\n      <a href=\"http:\/\/47.242.239.173\/index.php\/no-ac-powerbroadband-solar-powered-cctv\/\">\r\n        <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/s3.jpg\" alt=\"\">\r\n      <\/a>\r\n    <\/div>\r\n    <div class=\"mixture-part\">\r\n      <div class=\"solution-flex-row mb-16\">\r\n        <div class=\"flex-item-four flex-item\">\r\n          <a href=\"http:\/\/47.242.239.173\/index.php\/notyetopen\/\">\r\n            <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/s4.jpg\" alt=\"4G Outdoor Router\">\r\n          <\/a>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"solution-flex-row\">\r\n        <div class=\"flex-item-five flex-item\">\r\n          <a href=\"http:\/\/47.242.239.173\/index.php\/notyetopen\/\">\r\n            <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/s5.jpg\" alt=\"Outdoor Cabinet Switch\">\r\n          <\/a>\r\n        <\/div>\r\n        <div class=\"flex-item-six flex-item\">\r\n          <a href=\"http:\/\/47.242.239.173\/index.php\/notyetopen\/\">\r\n            <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/s6.jpg\" alt=\"CCTV Camera\">\r\n          <\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-61a3103 e-flex e-con-boxed e-con e-parent\" data-id=\"61a3103\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9da2c1e elementor-widget elementor-widget-html\" data-id=\"9da2c1e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* \u5e95\u90e8\u5168\u5c4f\u89c6\u9891\u6a21\u5757 *\/\r\n.bottom-full-video-wrap {\r\n  width: 100vw;\r\n  position: relative;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  overflow: hidden;\r\n  background: #000;\r\n  height: 600px;\r\n  margin-top: 0px;\r\n}\r\n.bottom-full-video-wrap video {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  pointer-events: none;\r\n}\r\n\/* \u4ec5\u5e95\u90e8\u9ed1\u8272\u6e10\u53d8\uff0c\u9876\u90e8\u65e0\u767d\u8272\u906e\u7f69 *\/\r\n.bottom-full-video-wrap::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  height: 40%;\r\n  background: linear-gradient(to bottom, transparent, #000);\r\n  pointer-events: none;\r\n  z-index: 2;\r\n}\r\n\/* \u79fb\u52a8\u7aef\u9002\u914d *\/\r\n@media (max-width: 768px) {\r\n  .bottom-full-video-wrap {\r\n    height: 320px;\r\n    margin-top: 60px;\r\n  }\r\n  .bottom-full-video-wrap::after {\r\n    height: 50%;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<!-- \u5e95\u90e8\u89c6\u9891 -->\r\n<div class=\"bottom-full-video-wrap\">\r\n  <video muted loop playsInline autoplay preload=\"auto\">\r\n    <source src=\"\/img\/CPES2025.mp4\" type=\"video\/mp4\">\r\n  <\/video>\r\n<\/div>\t\t\t\t<\/div>\n\t\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>We Innovate\uff0cTake you to Explore unKnown! SOLUTION Easy maintenance, no matter where you are<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/47.242.239.173\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/47.242.239.173\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/47.242.239.173\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/47.242.239.173\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/47.242.239.173\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":165,"href":"http:\/\/47.242.239.173\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":7771,"href":"http:\/\/47.242.239.173\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/7771"}],"wp:attachment":[{"href":"http:\/\/47.242.239.173\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}