{"id":5693,"date":"2026-06-26T09:16:43","date_gmt":"2026-06-26T01:16:43","guid":{"rendered":"http:\/\/47.242.239.173\/?page_id=5693"},"modified":"2026-07-09T09:11:58","modified_gmt":"2026-07-09T01:11:58","slug":"motel-solution","status":"publish","type":"page","link":"http:\/\/47.242.239.173\/index.php\/motel-solution\/","title":{"rendered":"Motel Solution"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5693\" class=\"elementor elementor-5693\">\n\t\t\t\t<div class=\"elementor-element elementor-element-404ff2d e-flex e-con-boxed e-con e-parent\" data-id=\"404ff2d\" 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-ba8e62f elementor-widget elementor-widget-html\" data-id=\"ba8e62f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\r\n  <title>Motel Solution - eLighten 2.0 Optical Solution<\/title>\r\n  <style>\r\n    * {\r\n      margin: 0;\r\n      padding: 0;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    html {\r\n      scroll-behavior: smooth;\r\n    }\r\n\r\n    body {\r\n      overflow-x: hidden;\r\n    }\r\n\r\n    .solution-detail-page {\r\n      width: 100vw;\r\n      margin-left: calc(-50vw + 50%);\r\n      left: auto;\r\n      right: auto;\r\n      max-width: none;\r\n      margin-top: -15px;\r\n      margin-bottom: -15px;\r\n    }\r\n\r\n    .tab-navbar {\r\n      position: relative;\r\n      z-index: 9999;\r\n      background: linear-gradient(270deg, #E97000 0%, #D24C00 49.98%, #381100 100%) !important;\r\n      width: 100%;\r\n    }\r\n\r\n    .tab-navbar.fixed {\r\n      position: fixed;\r\n      top: 48px;\r\n      width: 100%;\r\n    }\r\n\r\n    .tab-container {\r\n      max-width: 1400px;\r\n      margin: 0 auto;\r\n      padding: 0 20px;\r\n      overflow-x: auto;\r\n      white-space: nowrap;\r\n      -webkit-overflow-scrolling: touch;\r\n      display: flex;\r\n    }\r\n\r\n    .black-reactangle {\r\n      width: 100%;\r\n      height: 16px;\r\n      background: #000000;\r\n    }\r\n\r\n    .tab-container::-webkit-scrollbar {\r\n      display: none;\r\n    }\r\n\r\n    .tab-btn {\r\n      position: relative;\r\n      overflow: hidden;\r\n      display: block;\r\n      height: 56px;\r\n      line-height: 56px;\r\n      text-align: center;\r\n      color: #fff;\r\n      font-size: 14px;\r\n      text-decoration: none;\r\n      box-sizing: border-box;\r\n      z-index: 1;\r\n      outline: none;\r\n      padding-left: 35px;\r\n      padding-right: 40px;\r\n      flex-shrink: 0;\r\n      cursor: pointer;\r\n    }\r\n\r\n    \/* \u6ed1\u5165\u80cc\u666f\u4f2a\u5143\u7d20 *\/\r\n    .tab-btn::before {\r\n      content: \"\" !important;\r\n      position: absolute !important;\r\n      top: 0 !important;\r\n      left: 0 !important;\r\n      width: 100% !important;\r\n      height: 100% !important;\r\n      z-index: -1 !important;\r\n      border-radius: 12px 12px 0 0 !important;\r\n      transform: translateX(-100%) !important;\r\n      transition: transform 0.2s ease !important;\r\n    }\r\n\r\n    .tab-btn.active {\r\n      font-weight: 500;\r\n      width: 252px;\r\n    }\r\n\r\n    .tab-btn.active::before {\r\n      transform: translateX(0) !important;\r\n      background: url(\"http:\/\/47.242.239.173\/wp-content\/uploads\/2026\/06\/tabbg-1.png\") center bottom \/ contain no-repeat !important;\r\n    }\r\n\r\n    .tab-btn:not(.active):hover::before {\r\n      transform: translateX(0) !important;\r\n      background: rgba(0, 0, 0, 0.2) !important;\r\n    }\r\n\r\n    \/* \u53f3\u4fa7\u7ad6\u7ebf *\/\r\n    .tab-btn:not(:last-child)::after {\r\n      content: \"\" !important;\r\n      position: absolute !important;\r\n      right: 0 !important;\r\n      top: calc(50% + 5px) !important;\r\n      transform: translateY(-50%) !important;\r\n      width: 1px !important;\r\n      height: 18px !important;\r\n      background: rgba(255, 255, 255, 0.5) !important;\r\n    }\r\n\r\n    \/* \u6fc0\u6d3b\u9879\u9690\u85cf\u524d\u540e\u7ad6\u7ebf *\/\r\n    .tab-btn.active::after {\r\n      display: none !important;\r\n    }\r\n\r\n    .tab-btn:has(+ .tab-btn.active)::after {\r\n      display: none !important;\r\n    }\r\n\r\n    .section-video {\r\n      position: relative;\r\n      width: 100%;\r\n      \/* height: 100vh; *\/\r\n      overflow: hidden;\r\n      background: #000;\r\n    }\r\n\r\n    .video-container {\r\n      \/* position: absolute;\r\n      top: 0;\r\n      left: 0; *\/\r\n      width: 100%;\r\n      \/* height: 100%; *\/\r\n    }\r\n\r\n    .video-container video {\r\n      width: 100%;\r\n      \/* height: 100%;\r\n      object-fit: cover; *\/\r\n    }\r\n\r\n    .video-overlay {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      background: rgba(0, 0, 0, 0.4);\r\n      cursor: pointer;\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .video-overlay:hover {\r\n      background: rgba(0, 0, 0, 0.3);\r\n    }\r\n\r\n    .play-button {\r\n      position: absolute;\r\n      left: 50%;\r\n      top: 178px;\r\n      transform: translateX(-50%);\r\n      padding: 16px 30px;\r\n      box-sizing: border-box;\r\n      transition: all 0.3s ease;\r\n      width: 311px;\r\n      height: 65px;\r\n      background: rgba(0, 0, 0, 0.3);\r\n      box-shadow: inset 0px 0px 22px 0px #FFFFFF;\r\n      border-radius: 8px;\r\n      backdrop-filter: blur(4px);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .play-button .play-icon {\r\n      width: 24px;\r\n      height: 28px;\r\n      margin-right: 29px;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .play-button .play-tip {\r\n      font-weight: 500;\r\n      font-size: 24px;\r\n      color: #FFFFFF;\r\n      line-height: 33px;\r\n      text-align: center;\r\n      font-style: normal;\r\n    }\r\n\r\n    .video-overlay.hidden {\r\n      display: none;\r\n    }\r\n\r\n    .video-info {\r\n      position: absolute;\r\n      top: 64px;\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      text-align: center;\r\n      z-index: 10;\r\n      width: 100%;\r\n      padding: 0 20px;\r\n    }\r\n\r\n    .video-title {\r\n      font-weight: 800;\r\n      font-size: 40px;\r\n      color: #FFFFFF;\r\n      line-height: 58px;\r\n      text-align: center;\r\n      font-style: normal;\r\n    }\r\n\r\n    .section {\r\n      \/* min-height: 100vh; *\/\r\n      width: 100%;\r\n      position: relative;\r\n    }\r\n\r\n    .section-scenarios {\r\n      background: linear-gradient(180deg, #310B00 0%, #000000 72.6%, #000000 100%);\r\n      padding: 0 0 120px;\r\n    }\r\n\r\n    .section-title {\r\n      font-weight: 800;\r\n      font-size: 40px;\r\n      color: #FFFFFF;\r\n      line-height: 58px;\r\n      text-align: center;\r\n      font-style: normal;\r\n      padding: 64px 0 48px;\r\n      margin: 0;\r\n    }\r\n\r\n    .scenarios-grid {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 20px;\r\n      max-width: 1400px;\r\n      margin: 0 auto;\r\n      padding: 0 20px;\r\n    }\r\n\r\n    .scenario-card {\r\n      position: relative;\r\n      border-radius: 30px;\r\n      overflow: hidden;\r\n      aspect-ratio: 4 \/ 3;\r\n    }\r\n\r\n    .scenario-card:first-child {\r\n      grid-row: span 2;\r\n      aspect-ratio: auto;\r\n    }\r\n\r\n    .scenario-card img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      transition: transform 0.5s ease;\r\n    }\r\n\r\n    .scenario-card:hover img {\r\n      transform: scale(1.1);\r\n    }\r\n\r\n    .scenario-overlay {\r\n      position: absolute;\r\n      bottom: 0;\r\n      left: 0;\r\n      right: 0;\r\n      background: rgba(0, 0, 0, 0.6);\r\n      border-radius: 0px 0px 30px 30px;\r\n      padding: 21px 0;\r\n    }\r\n\r\n    .scenario-title {\r\n      font-weight: 500;\r\n      font-size: 16px;\r\n      color: #FFFFFF;\r\n      line-height: 22px;\r\n      text-align: center;\r\n      font-style: normal;\r\n    }\r\n\r\n    .section-painpoints {\r\n      background: linear-gradient(180deg, #FDFDFD 0%, #E9E9E9 100%);\r\n      padding-bottom: 120px;\r\n    }\r\n\r\n    .section-painpoints .section-title {\r\n      color: #000000;\r\n    }\r\n\r\n    .painpoints-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(4, 1fr);\r\n      gap: 27px;\r\n      max-width: 1400px;\r\n      margin: 0 auto;\r\n      margin-top: 123px;\r\n      padding: 0 20px;\r\n    }\r\n\r\n    .painpoint-card {\r\n      background: #FFFFFF;\r\n      border-radius: 30px;\r\n      transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n      padding: 124px 26px 106px;\r\n      position: relative;\r\n    }\r\n\r\n    .painpoint-card:hover {\r\n      transform: translateY(-5px);\r\n      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);\r\n    }\r\n\r\n    .painpoint-icon {\r\n      width: 180px;\r\n      height: 180px;\r\n      position: absolute;\r\n      top: -90px;\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .painpoint-icon img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: contain;\r\n    }\r\n\r\n    .painpoint-title {\r\n      margin-bottom: 16px;\r\n      font-weight: 500;\r\n      font-size: 16px;\r\n      color: #000000;\r\n      line-height: 22px;\r\n      text-align: left;\r\n      font-style: normal;\r\n    }\r\n\r\n    .painpoint-desc {\r\n      font-weight: 400;\r\n      font-size: 14px;\r\n      color: #666666;\r\n      line-height: 20px;\r\n      text-align: left;\r\n      font-style: normal;\r\n      margin-bottom: 0;\r\n    }\r\n\r\n    .second-part {\r\n      margin-top: 12px;\r\n    }\r\n\r\n    .section-solution {\r\n      background: linear-gradient(180deg, #1a1a1a 0%, #000 100%);\r\n      position: relative;\r\n    }\r\n\r\n    .section-solution-title {\r\n      font-weight: 800;\r\n      font-size: 40px;\r\n      color: #FFFFFF;\r\n      line-height: 58px;\r\n      text-align: center;\r\n      font-style: normal;\r\n      position: absolute;\r\n      top: 80px;\r\n      left: 0;\r\n      width: 100%;\r\n      padding: 0 20px;\r\n    }\r\n\r\n    .solution-image {\r\n      width: 100%;\r\n      display: block;\r\n    }\r\n\r\n    .section-advantage {\r\n      background: #000000;\r\n      padding-bottom: 80px;\r\n    }\r\n\r\n    .advantage-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 27px;\r\n      max-width: 1400px;\r\n      margin: 0 auto;\r\n      margin-top: 123px;\r\n      padding: 0 20px;\r\n    }\r\n\r\n    .advantage-card {\r\n      background: #1E1E1E;\r\n      border-radius: 30px;\r\n      transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n      padding: 124px 26px 106px;\r\n      position: relative;\r\n    }\r\n\r\n    .advantage-card:hover {\r\n      transform: translateY(-5px);\r\n      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);\r\n    }\r\n\r\n    .advantage-icon {\r\n      width: 180px;\r\n      height: 180px;\r\n      position: absolute;\r\n      top: -90px;\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .advantage-icon img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: contain;\r\n    }\r\n\r\n    .advantage-title {\r\n      margin-bottom: 16px;\r\n      font-weight: 500;\r\n      font-size: 20px;\r\n      color: #FFFFFF;\r\n      line-height: 28px;\r\n      text-align: left;\r\n      font-style: normal;\r\n    }\r\n\r\n    .advantage-desc {\r\n      font-weight: 400;\r\n      font-size: 16px;\r\n      color: #FFFFFF;\r\n      line-height: 22px;\r\n      text-align: left;\r\n      font-style: normal;\r\n    }\r\n\r\n    .section-products {\r\n      background: linear-gradient(180deg, #1a1a1a 0%, #000 100%);\r\n      position: relative;\r\n    }\r\n\r\n    .section-products-title {\r\n      font-weight: 800;\r\n      font-size: 40px;\r\n      color: #FFFFFF;\r\n      line-height: 58px;\r\n      text-align: center;\r\n      font-style: normal;\r\n      position: absolute;\r\n      top: 80px;\r\n      left: 0;\r\n      width: 100%;\r\n      padding: 0 20px;\r\n    }\r\n\r\n    .section-products-img {\r\n      width: 100%;\r\n      display: block;\r\n    }\r\n    .pic-13 {\r\n      position: relative;\r\n\r\n      \/* \u901a\u7528\u70ed\u533a\u94fe\u63a5\u6837\u5f0f *\/\r\n      .hot-area {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        cursor: pointer;\r\n        \/* \u60ac\u6d6e\u663e\u793a\u624b\u578b *\/\r\n        background: transparent;\r\n        text-decoration: none;\r\n        \/* \u6d88\u9664a\u6807\u7b7e\u9ed8\u8ba4\u70b9\u51fb\u9ad8\u4eae\uff08\u79fb\u52a8\u7aef\u4f18\u5316\uff09 *\/\r\n        -webkit-tap-highlight-color: transparent;\r\n      }\r\n\r\n      \/* 1. \u5de6\u4fa7\u56db\u5929\u7ebf\u8def\u7531\u5668 \u767e\u5206\u6bd4\u70ed\u533a *\/\r\n      .hot-router {\r\n        left: 16.5%;\r\n        top: 29.8%;\r\n        width: 16.2%;\r\n        height: 40.2%;\r\n      }\r\n\r\n      \/* 2. \u7acb\u5f0fMesh\u4e3b\u673a *\/\r\n      .hot-mesh {\r\n        left: 37.4%;\r\n        top: 26.3%;\r\n        width: 15.1%;\r\n        height: 30%;\r\n      }\r\n\r\n      \/* 3. \u4e0b\u65b9POE\u4ea4\u6362\u673a *\/\r\n      .hot-switch {\r\n        left: 40%;\r\n        top: 66.7%;\r\n        width: 21%;\r\n        height: 11%;\r\n      }\r\n\r\n      \/* 4. \u5ba4\u5185\u65b9\u5f62\u5438\u9876AP *\/\r\n      .hot-indoor-ap {\r\n        left: 56%;\r\n        top: 35.5%;\r\n        width: 15.6%;\r\n        height: 30.4%;\r\n      }\r\n\r\n      \/* 5. \u7403\u5f62\u5ba4\u5916\u9632\u6c34AP *\/\r\n      .hot-outdoor-ap {\r\n        left: 73.2%;\r\n        top: 28.5%;\r\n        width: 14.4%;\r\n        height: 40.6%;\r\n      }\r\n    }\r\n    @media (max-width: 1024px) {\r\n      .painpoints-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n      }\r\n\r\n      .advantage-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n      }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      \/* ========== \u5bfc\u822a\u680f\u79fb\u52a8\u7aef\u9002\u914d ========== *\/\r\n      .tab-navbar.fixed {\r\n        top: 48px;\r\n      }\r\n\r\n      .tab-container {\r\n        padding: 0 12px;\r\n      }\r\n\r\n      .tab-btn {\r\n        height: 48px;\r\n        line-height: 48px;\r\n        font-size: 13px;\r\n        padding-left: 20px;\r\n        padding-right: 20px;\r\n      }\r\n\r\n      .tab-btn.active {\r\n        width: auto;\r\n      }\r\n\r\n      .tab-btn.active::before {\r\n        background: rgba(0, 0, 0, 0.35) !important;\r\n      }\r\n\r\n      .tab-btn:not(:last-child)::after {\r\n        top: 50%;\r\n        height: 16px;\r\n      }\r\n\r\n      .black-reactangle {\r\n        height: 12px;\r\n      }\r\n\r\n      \/* ========== \u9996\u5c4f\u89c6\u9891\u533a\u9002\u914d ========== *\/\r\n      \/* .section-video {\r\n        height: 70vh;\r\n        min-height: 480px;\r\n      } *\/\r\n\r\n      .video-info {\r\n        top: 10px;\r\n      }\r\n\r\n      .video-title {\r\n        font-size: 18px;\r\n        line-height: 24px;\r\n      }\r\n\r\n      .play-button {\r\n        top: 50%;\r\n        transform: translate(-50%, -50%);\r\n        width: 280px;\r\n        height: 56px;\r\n      }\r\n\r\n      .play-button .play-tip {\r\n        font-size: 20px;\r\n        line-height: 28px;\r\n      }\r\n\r\n      .play-button .play-icon {\r\n        width: 20px;\r\n        height: 24px;\r\n        margin-right: 20px;\r\n      }\r\n\r\n      \/* ========== \u901a\u7528\u533a\u5757\u9002\u914d ========== *\/\r\n      .section-title {\r\n        font-size: 28px;\r\n        line-height: 40px;\r\n        padding: 40px 0 32px;\r\n      }\r\n\r\n      .section-scenarios,\r\n      .section-painpoints,\r\n      .section-advantage {\r\n        padding-bottom: 80px;\r\n      }\r\n\r\n      \/* ========== \u573a\u666f\u5361\u7247\u9002\u914d ========== *\/\r\n      .scenarios-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 16px;\r\n        padding: 0 16px;\r\n      }\r\n\r\n      .scenario-card:first-child {\r\n        grid-row: span 1;\r\n        aspect-ratio: 4 \/ 3;\r\n      }\r\n\r\n      .scenario-overlay {\r\n        padding: 16px 0;\r\n      }\r\n\r\n      .scenario-title {\r\n        font-size: 15px;\r\n        line-height: 21px;\r\n      }\r\n\r\n      \/* ========== \u75db\u70b9&\u4f18\u52bf\u5361\u7247\u9002\u914d ========== *\/\r\n      .painpoints-grid,\r\n      .advantage-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 60px;\r\n        margin-top: 80px;\r\n        padding: 0 16px;\r\n      }\r\n\r\n      .painpoint-card,\r\n      .advantage-card {\r\n        padding: 80px 20px 50px;\r\n        border-radius: 24px;\r\n      }\r\n\r\n      .painpoint-icon,\r\n      .advantage-icon {\r\n        width: 120px;\r\n        height: 120px;\r\n        top: -60px;\r\n      }\r\n\r\n      .painpoint-title {\r\n        font-size: 16px;\r\n        margin-bottom: 12px;\r\n      }\r\n\r\n      .advantage-title {\r\n        font-size: 18px;\r\n        line-height: 26px;\r\n        margin-bottom: 12px;\r\n      }\r\n\r\n      .painpoint-desc,\r\n      .advantage-desc {\r\n        font-size: 14px;\r\n        line-height: 22px;\r\n      }\r\n\r\n      \/* ========== \u65b9\u6848&\u4ea7\u54c1\u56fe\u533a\u5757\u9002\u914d ========== *\/\r\n      .section-solution-title,\r\n      .section-products-title {\r\n        font-size: 28px;\r\n        line-height: 40px;\r\n        top: 48px;\r\n      }\r\n\r\n      .solution-image,\r\n      .section-products-img {\r\n        min-height: 600px;\r\n        object-fit: cover;\r\n        object-position: center top;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 375px) {\r\n      \/* \u5c0f\u5c4f\u4e8c\u6b21\u4f18\u5316 *\/\r\n      .video-title {\r\n        font-size: 14px;\r\n        line-height: 18px;\r\n      }\r\n\r\n      .section-title {\r\n        font-size: 24px;\r\n        line-height: 36px;\r\n      }\r\n\r\n      .play-button {\r\n        width: 240px;\r\n        height: 52px;\r\n      }\r\n\r\n      .play-button .play-tip {\r\n        font-size: 18px;\r\n      }\r\n\r\n      .tab-btn {\r\n        padding-left: 16px;\r\n        padding-right: 16px;\r\n        font-size: 12px;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n\r\n<body>\r\n  <div class=\"solution-detail-page\">\r\n    <div id=\"section-video\" class=\"section-video\">\r\n      <div class=\"video-container\">\r\n        <video id=\"main-video\" playsinline poster=\"\">\r\n          <source src=\"http:\/\/47.242.239.173\/img\/solution\/motel\/video.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n      <\/div>\r\n      <div class=\"video-overlay\" id=\"video-overlay\">\r\n        <div class=\"play-button\">\r\n          <img decoding=\"async\" class=\"play-icon\" src=\"http:\/\/47.242.239.173\/img\/solution\/motel\/1.png\" alt=\"play\">\r\n          <div class=\"play-tip\">Watch Video<\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"video-info\">\r\n        <h1 class=\"video-title\">Motel Solution For Seamless Roaming & Whole-Area Coverage<\/h1>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <nav class=\"tab-navbar\" id=\"tab-navbar\">\r\n      <div class=\"tab-container\" id=\"tab-container\">\r\n        <div class=\"tab-btn active\" data-target=\"section-scenarios\">Scenarios<\/div>\r\n        <div class=\"tab-btn\" data-target=\"section-painpoints\">Pain Points<\/div>\r\n        <div class=\"tab-btn\" data-target=\"section-solution\">Solution<\/div>\r\n        <div class=\"tab-btn\" data-target=\"section-advantage\">Advantage<\/div>\r\n        <div class=\"tab-btn\" data-target=\"section-products\">Products<\/div>\r\n      <\/div>\r\n      <div class=\"black-reactangle\"><\/div>\r\n    <\/nav>\r\n\r\n    <div id=\"section-scenarios\" class=\"section section-scenarios\">\r\n      <h2 class=\"section-title\">Scenarios<\/h2>\r\n      <div class=\"scenarios-grid\">\r\n        <div class=\"scenario-card\">\r\n          <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/motel\/2.png\" alt=\"Resort \/ Villa\">\r\n          <div class=\"scenario-overlay\">\r\n            <div class=\"scenario-title\">Resort \/ Villa<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"scenario-card\">\r\n          <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/motel\/3.png\" alt=\"Hotel\">\r\n          <div class=\"scenario-overlay\">\r\n            <div class=\"scenario-title\">Hotel<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"scenario-card\">\r\n          <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/motel\/4.png\" alt=\"Apartment\">\r\n          <div class=\"scenario-overlay\">\r\n            <div class=\"scenario-title\">Apartment<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"section-painpoints\" class=\"section section-painpoints\">\r\n      <h2 class=\"section-title\">Traditional Wi-Fi Network Pain Points<\/h2>\r\n      <div class=\"painpoints-grid\">\r\n        <div class=\"painpoint-card\">\r\n          <div class=\"painpoint-icon\">\r\n            <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/motel\/5.png\" alt=\"\">\r\n          <\/div>\r\n          <h3 class=\"painpoint-title\">Multiple SSIDs & Passwords<\/h3>\r\n          <p class=\"painpoint-desc\">Need to set different network names and passwords for each router. Manually\r\n            reconnect networks when moving between rooms or floors.<\/p>\r\n          <p class=\"painpoint-desc second-part\">Manually reconnect networks when moving between rooms or floors.<\/p>\r\n        <\/div>\r\n        <div class=\"painpoint-card\">\r\n          <div class=\"painpoint-icon\">\r\n            <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/motel\/6.png\" alt=\"\">\r\n          <\/div>\r\n          <h3 class=\"painpoint-title\">No Seamless Roaming<\/h3>\r\n          <p class=\"painpoint-desc\">Frequent disconnections and lag when moving around.<\/p>\r\n          <p class=\"painpoint-desc second-part\">Interruptions during video calls, streaming and gaming.<\/p>\r\n        <\/div>\r\n        <div class=\"painpoint-card\">\r\n          <div class=\"painpoint-icon\">\r\n            <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/motel\/7.png\" alt=\"\">\r\n          <\/div>\r\n          <h3 class=\"painpoint-title\">Fixed & Unstable Routing<\/h3>\r\n          <p class=\"painpoint-desc\">Data paths cannot be adjusted automatically.<\/p>\r\n          <p class=\"painpoint-desc second-part\">Slow speed and congestion under heavy traffic or interference.<\/p>\r\n        <\/div>\r\n        <div class=\"painpoint-card\">\r\n          <div class=\"painpoint-icon\">\r\n            <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/motel\/8.png\" alt=\"\">\r\n          <\/div>\r\n          <h3 class=\"painpoint-title\">No Self-Healing Ability<\/h3>\r\n          <p class=\"painpoint-desc\">Network blackspots if one router fails or goes offline.<\/p>\r\n          <p class=\"painpoint-desc second-part\">Whole connection breaks down without automatic rerouting.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"section-solution\" class=\"section section-solution\">\r\n      <h2 class=\"section-solution-title\">What is Motel Solution?<\/h2>\r\n      <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/motel\/9.jpg\" alt=\"\" class=\"solution-image\">\r\n    <\/div>\r\n\r\n    <div id=\"section-advantage\" class=\"section section-advantage\">\r\n      <h2 class=\"section-title\">Why choose Motel solution?<\/h2>\r\n      <div class=\"advantage-grid\">\r\n        <div class=\"advantage-card\">\r\n          <div class=\"advantage-icon\">\r\n            <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/motel\/10.png\" alt=\"\">\r\n          <\/div>\r\n          <h3 class=\"advantage-title\">Stable Mesh Wi-Fi<\/h3>\r\n          <p class=\"advantage-desc\">1.Seamless Mesh Wi-Fi featuring authentication roaming delivers consistent\r\n            connectivity for guests.<\/p>\r\n          <p class=\"advantage-desc second-part\">2.Delivers consistent, high-performance Wi-Fi coverage with no dead\r\n            zones across the entire premise.<\/p>\r\n        <\/div>\r\n        <div class=\"advantage-card\">\r\n          <div class=\"advantage-icon\">\r\n            <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/motel\/11.png\" alt=\"\">\r\n          <\/div>\r\n          <h3 class=\"advantage-title\">Centralized Management<\/h3>\r\n          <p class=\"advantage-desc\">1.Centralized remote management platform for standalone and chain hotels alike.<\/p>\r\n          <p class=\"advantage-desc second-part\">2.Real-time monitoring, efficient troubleshooting, and network\r\n            diagnostics via PING, SSH, and traceroute.<\/p>\r\n        <\/div>\r\n        <div class=\"advantage-card\">\r\n          <div class=\"advantage-icon\">\r\n            <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/motel\/12.png\" alt=\"\">\r\n          <\/div>\r\n          <h3 class=\"advantage-title\">Guest Access Control<\/h3>\r\n          <p class=\"advantage-desc\">1.Support multiple guest authentication like captive portal<\/p>\r\n          <p class=\"advantage-desc second-part\">2.VLAN segmentation to separate each sub-network to improve data\r\n            security<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"section-products\" class=\"section section-products pic-13\">\r\n      <h2 class=\"section-products-title\">Related Products<\/h2>\r\n      <img decoding=\"async\" src=\"http:\/\/47.242.239.173\/img\/solution\/motel\/13.jpg\" alt=\"\" class=\"section-products-img\">\r\n      <a href=\"\" class=\"hot-area hot-router\" target=\"_blank\"><\/a>\r\n      <a href=\"\" class=\"hot-area hot-mesh\" target=\"_blank\"><\/a>\r\n      <a href=\"\" class=\"hot-area hot-switch\" target=\"_blank\"><\/a>\r\n      <a href=\"\" class=\"hot-area hot-indoor-ap\" target=\"_blank\"><\/a>\r\n      <a href=\"\" class=\"hot-area hot-outdoor-ap\" target=\"_blank\"><\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    document.addEventListener('DOMContentLoaded', function () {\r\n      const video = document.getElementById('main-video');\r\n      const videoOverlay = document.getElementById('video-overlay');\r\n      const tabNavbar = document.getElementById('tab-navbar');\r\n      const tabContainer = document.getElementById('tab-container');\r\n      const tabButtons = document.querySelectorAll('.tab-btn');\r\n      const sections = document.querySelectorAll('.section');\r\n\r\n      videoOverlay.addEventListener('click', function () {\r\n        video.play();\r\n        this.classList.add('hidden');\r\n      });\r\n\r\n      video.addEventListener('pause', function () {\r\n        videoOverlay.classList.remove('hidden');\r\n      });\r\n\r\n      video.addEventListener('ended', function () {\r\n        videoOverlay.classList.remove('hidden');\r\n      });\r\n\r\n      function updateActiveTab() {\r\n        const navbarHeight = tabNavbar.offsetHeight;\r\n        const scrollPosition = window.scrollY + navbarHeight + 20;\r\n\r\n        for (let i = sections.length - 1; i >= 0; i--) {\r\n          const section = sections[i];\r\n          const sectionTop = section.offsetTop;\r\n\r\n          if (scrollPosition >= sectionTop) {\r\n            tabButtons.forEach(btn => btn.classList.remove('active'));\r\n            tabButtons[i].classList.add('active');\r\n\r\n            const activeBtn = tabButtons[i];\r\n            const containerRect = tabContainer.getBoundingClientRect();\r\n            const btnRect = activeBtn.getBoundingClientRect();\r\n\r\n            if (btnRect.left < containerRect.left) {\r\n              tabContainer.scrollTo({\r\n                left: tabContainer.scrollLeft + btnRect.left - containerRect.left - 10,\r\n                behavior: 'smooth'\r\n              });\r\n            } else if (btnRect.right > containerRect.right) {\r\n              tabContainer.scrollTo({\r\n                left: tabContainer.scrollLeft + btnRect.right - containerRect.right + 10,\r\n                behavior: 'smooth'\r\n              });\r\n            }\r\n\r\n            break;\r\n          }\r\n        }\r\n      }\r\n\r\n      const navbarOriginalTop = tabNavbar.offsetTop;\r\n\r\n      let scrollTimeout;\r\n      window.addEventListener('scroll', function () {\r\n        clearTimeout(scrollTimeout);\r\n        scrollTimeout = setTimeout(updateActiveTab, 100);\r\n\r\n        const scrollY = window.scrollY;\r\n        if (scrollY >= navbarOriginalTop) {\r\n          tabNavbar.classList.add('fixed');\r\n        } else {\r\n          tabNavbar.classList.remove('fixed');\r\n        }\r\n      });\r\n\r\n      tabButtons.forEach(button => {\r\n        button.addEventListener('click', function () {\r\n          const targetId = this.getAttribute('data-target');\r\n          const targetSection = document.getElementById(targetId);\r\n\r\n          if (targetSection) {\r\n            const navbarHeight = tabNavbar.offsetHeight;\r\n            const targetTop = targetSection.offsetTop;\r\n\r\n            window.scrollTo({\r\n              top: targetTop - navbarHeight,\r\n              behavior: 'smooth'\r\n            });\r\n\r\n            tabButtons.forEach(btn => btn.classList.remove('active'));\r\n            this.classList.add('active');\r\n          }\r\n        });\r\n      });\r\n\r\n      updateActiveTab();\r\n    });\r\n  <\/script>\r\n<\/body>\r\n\r\n<\/html>\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>Motel Solution &#8211; eLighten 2.0 Optical Solution Watch Video Motel Solution For Seamless Roaming &#038; Whole-Area Coverage Scenarios Pain Points Solution Advantage Products Scenarios Resort \/ Villa Hotel Apartment Traditional Wi-Fi Network Pain Points Multiple SSIDs &#038; Passwords Need to set different network names and passwords for each router. Manually reconnect networks when moving between rooms or floors. Manually reconnect networks when moving between rooms or floors. No Seamless Ro&#8230;<\/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-5693","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/47.242.239.173\/index.php\/wp-json\/wp\/v2\/pages\/5693","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=5693"}],"version-history":[{"count":277,"href":"http:\/\/47.242.239.173\/index.php\/wp-json\/wp\/v2\/pages\/5693\/revisions"}],"predecessor-version":[{"id":7877,"href":"http:\/\/47.242.239.173\/index.php\/wp-json\/wp\/v2\/pages\/5693\/revisions\/7877"}],"wp:attachment":[{"href":"http:\/\/47.242.239.173\/index.php\/wp-json\/wp\/v2\/media?parent=5693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}