HiOS 15 | TECNO Smartphones

<!DOCTYPE html> <html dir="ltr" lang="fr-ML"> <head> <meta charset="utf-8"> <meta name="generator" content="TYPO3 CMS"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="preload" href="https://d3fyizz0b46qgr.cloudfront.net/global/Hios/15/1_0/index.min.css" as="style"> <link rel="stylesheet" href="https://d3fyizz0b46qgr.cloudfront.net/global/Hios/15/1_0/index.min.css"> <link rel="stylesheet" type="text/css" href="https://d3fyizz0b46qgr.cloudfront.net/static/new-css/main-min.css" media="all"> <link rel="stylesheet" href="https://d3fyizz0b46qgr.cloudfront.net/homenew/cssjs/swiper-bundle.min.css"> <script src="https://d3fyizz0b46qgr.cloudfront.net/global/homepage/new_global/js/jquery.min.js"></script> <script> document.addEventListener("scroll", function () { const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; const video = entry.target; // 如果已经加载过，则跳过 if (img.getAttribute('data-loaded') === 'true') { return; } if (video.getAttribute('data-loaded') === 'true') { return; } img.src = img.dataset.src; video.src = video.dataset.src // 标记为已加载 img.setAttribute('data-loaded', 'true'); video.setAttribute('data-loaded', 'true'); observer.unobserve(img); observer.unobserve(video); } }); }, { rootMargin: '0px 0px 500px 0px', // 提前xxpx加载 threshold: 0.01 }); document.querySelectorAll('img[data-src]').forEach(img => { observer.observe(img); }); document.querySelectorAll('video[data-src]').forEach(video => { observer.observe(video); }); }); </script> <script src="https://d3fyizz0b46qgr.cloudfront.net/static/new-js/jvrh-min-new-240423.js" type="text/javascript"></script>   <script> !function (e, t, n, s, u, a) { e.twq || (s = e.twq = function () { s.exe ? s.exe.apply(s, arguments) : s.queue.push(arguments); }, s.version = '1.1', s.queue = [], u = t.createElement(n), u.async = !0, u.src = '//static.ads-twitter.com/uwt.js', a = t.getElementsByTagName(n)[0], a.parentNode.insertBefore(u, a)) }(window, document, 'script'); // Insert Twitter Pixel ID and Standard Event data below twq('init', 'o3ie3'); twq('track', 'PageView'); </script>  <title>HiOS 15 | TECNO Smartphones</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet"> <meta name="mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#fff"> <meta name="application-name" content="tecno mobile"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-title" content="tecno mobile"> <link rel="shortcut icon" href="https://d3fyizz0b46qgr.cloudfront.net/global/x_new/tecno_icon.svg"> <link rel="alternate" hreflang="x-default" href="/hios/" /> <link rel="alternate" hreflang="en" href="/hios/" /> <link rel="alternate" hreflang="es-GT" href="/gua/hios/" /> <link rel="alternate" hreflang="my-MM" href="/mm/hios/" /> <link rel="alternate" hreflang="fr-DZ" href="/dz/hios/" /> <link rel="alternate" hreflang="tr-TR" href="/tr/hios/" /> <link rel="alternate" hreflang="en-BD" href="/bd/hios/" /> <link rel="alternate" hreflang="th-TH" href="/th/hios/" /> <link rel="alternate" hreflang="en-AE" href="/ae/hios/" /> <link rel="alternate" hreflang="km-KH" href="/kh/hios/" /> <link rel="alternate" hreflang="ar-EG" href="/eg/hios/" /> <link rel="alternate" hreflang="sw-TZ" href="/tz/hios/" /> <link rel="alternate" hreflang="en-KE" href="/ke/hios/" /> <link rel="alternate" hreflang="ar-SA" href="/sa/hios/" /> <link rel="alternate" hreflang="fr-CI" href="/ci/hios/" /> <link rel="alternate" hreflang="en-RW" href="/ml/hios/" /> <link rel="alternate" hreflang="en-GH" href="/gh/hios/" /> <link rel="alternate" hreflang="fr-GN" href="/gn/hios/" /> <link rel="alternate" hreflang="en-ZM" href="/zm/hios/" /> <link rel="alternate" hreflang="pt-AO" href="/ao/hios/" /> <link rel="alternate" hreflang="fr-ML" href="/ml/hios/" /> <link rel="alternate" hreflang="fr-BJ" href="/bj/hios/" /> <link rel="alternate" hreflang="fr-NE" href="/ne/hios/" /> <link rel="alternate" hreflang="pt-MZ" href="/mz/hios/" /> <link rel="alternate" hreflang="en-UG" href="/ml/hios/" /> <link rel="alternate" hreflang="fr-TG" href="/tg/hios/" /> <link rel="alternate" hreflang="fr-CM" href="/ml/hios/" /> <link rel="alternate" hreflang="fr-CO" href="/co/hios/" /> <link rel="alternate" hreflang="fr-CF" href="/cfr/hios/" /> <link rel="alternate" hreflang="fr-MA" href="/ma/hios/" /> <link rel="alternate" hreflang="fr-SN" href="/sn/hios/" /> <link rel="alternate" hreflang="en-PK" href="/pl/hios/" /> <link rel="alternate" hreflang="en-SA" href="/ml/hios/" /> <link rel="alternate" hreflang="en-ZA" href="/za/hios/" /> <link rel="alternate" hreflang="fr-BF" href="/bf/hios/" /> <link rel="alternate" hreflang="fr-BO" href="/bo/hios/" /> <link rel="alternate" hreflang="ar-JO" href="/jo/hios/" /> <link rel="alternate" hreflang="ar-LB" href="/lb/hios/" /> <link rel="alternate" hreflang="fr-PE" href="/pe/hios/" /> <link rel="alternate" hreflang="en-PH" href="/ph/hios/" /> <link rel="alternate" hreflang="pt-BR" href="/br/hios/" /> <link rel="alternate" hreflang="ru-UZ" href="/uz/hios/" /> <link rel="alternate" hreflang="ar-IQ" href="/iq/hios/" /> <link rel="alternate" hreflang="es-PA" href="/pa/hios/" /> <link rel="alternate" hreflang="id-ID" href="/id/hios/" /> <link rel="alternate" hreflang="en-LK" href="/lk/hios/" /> <link rel="alternate" hreflang="vi-VN" href="/vn/hios/" /> <meta name="description" content=""> <link rel="canonical" href="/ml/hios/" /> <meta property="og:type" content="website" /> <meta property="og:title" content="HiOS" /> <meta property="og:url" content="/ml/hios/" /> <meta property="og:site_name" content="Tecno" /> <meta name="twitter:card" content="summary" /> <link rel="profile" href="https://a9.com/-/spec/opensearch/1.1/" /> <link rel="search" type="application/opensearchdescription+xml" href="/ml/?type=7567" title="Website Search" /> <link rel="dns-prefetch" href="https://d3fyizz0b46qgr.cloudfront.net"> <style> [v-cloak] { display: none; } .HomePage { background: rgba(255, 255, 255, .75); } @media screen and (min-width: 1080px) { #hios .ai_wrap #ai .Office_Booste .content .left ._3rdTitle { width: 16.667vw !important; } #hios .ai_wrap #ai .aiCall .content .left ._3rdTitle { width: 16.667vw !important; } #hios .ai_wrap .ell_ai .wrap2 .ai .content .left ._3rdTitle { width: 16.667vw !important; } #hios .ai_wrap #ai .Create_AI .content .left .bottom p { font-size: 0.8875vw !important; } #hios #Dual_systems .systems1 .systems_bigTitle2 .white { font-size: 2.0881vw !important; } #hios .new_text:first-of-type { width: 18.1142vw !important; } #hios .hios_bgTitle .new_title { font-size: 2.2951vw !important; } #hios #wallpaper .container1 .text p { font-size: 3.4119vw !important; } } @media screen and (max-width: 1080px) { #hios .new_text:first-of-type { width: 59.2215vw !important; } #hios .new_big_title .content p:nth-child(2) { font-size: 5.0991vw !important; } #hios #wallpaper .container1 .text { padding-top: 3vw !important; } } </style> </head> <body> <header class="navbar navbar-light navbar-toggleable-lg "> <nav class="container" role="navigation"> <a href="/ml/home/"><span class="navbar-brand"></span></a> <div class="navbar-off-canvas"> <ul class="nav navbar-nav nav-ul"> <li class="nav-item active"><a href="/ml/hios/" class="nav-link">HiOS</a></li> <li class="nav-item"><a href="/ml/telechargements/" class="nav-link">Téléchargements</a></li> <li class="nav-item"><a href="/ml/home/" class="nav-link">Officiel</a></li> </ul> <ul class="nav navbar-nav" style="display: flex;align-items: center;padding: unset;" id="kky" data-device-type='pc'>  <a target="_self" href="javascript:;" class="nav-link"><i class="iconfont icon-usero IDDC" style="font-size: 1.25rem;font-weight: bold"></i></a> <li class="nav-item user_menu" style="display: none;"> <img class="head-img" src="" style="display: none;"> <span class="head-name nav-link"></span> </li> <div class='model-windowD message-delD' data-model-style='devicedel' style="display: none" id="mymenu"></div> </ul> </div> <div class="navbar-feature"> <button class="navbar-search" type="button" data-device-type='mobile'> <li class="nav-item" id="user_menu"> <a target="_self" href="javascript:;" class="iconfont icon-usero nav-link IDDC"></a> <img class="head-img" src="" style="display: none;">  <span class="head-name" data-device-type='pc'></span> </li> <div class='model-windowD message-delD' data-model-style='devicedel' style="display: none" id="newmenu"><i class="dropdown_menulist" style="display: none;"></i></div>  </button> <button class="navbar-search" type="button" data-toggle="modal" data-target="#search-modal"> <span class="iconfont icon-search"></span> </button> <button class="navbar-toggler" type="button" aria-expanded="false" aria-label="Toggle navigation"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> </div> </nav> </header> <section class="search modal modal-canvas modal-vm fade" id="search-modal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog container" role="search"> <div class="modal-content"> <header class="modal-header"> <div class="modal-title hidden-xs-down"> <h6 class="text-uppercase text-muted small">TYPE IN YOUR SEARCH AND PRESS ENTER</h6> </div> <button type="button" class="close circle" data-dismiss="modal" aria-label="Close"> <span class="iconfont icon-close"></span> </button> </header> <section class="modal-body cs-form-popup-layer"> <h2>Search TECNO</h2> <form action="/ml/search/" method="get"> <input name="id" type="hidden" value="52"> <input name="L" type="hidden" value="32"> <input name="q" autocomplete="off" type="search" class="form-control global-search-input"> <button type="submit" class="btn btn-primary">rechercher</button> </form> </section> <footer class="modal-footer search-modal-footer flex-column"> <h4>Quick Links</h4> <p class="text-muted mw-100">Learn about TECNO products, view online manuals, get the latest downloads, and more.</p> <a href="/ml/hios/"> <h6>HiOS</h6> </a><a href="/ml/stores/"> <h6>Find TECNO Store</h6> </a> </div> </div> </section> <div class='model-mask' style="display:none"></div>   <link rel="preload" href="/newfileadmin/hios15/en/hios.js" as="script"> <div id="hios" v-cloak> <div class="tab" v-if="windowWidth>=1081"> <div v-for="(item,index) in tab" :key="index" :class="index == wrapActive?'blue':''" @click="toTitle(item.id,index)"><span>{{item.title}}</span> </div> </div> <section class="set setHead"> <img class="set1_bg w-100" :src="banner.bg" alt=""> <div class="blue"></div> <div class="pink"></div>  <div class='modelList'> <div v-for="(item,index) in banner.modelList" :key="index" :class="'model model'+index"> <img :src="item" alt=""> </div> </div>  <div class="content"> <div> <img class="logo" src="https://d3fyizz0b46qgr.cloudfront.net/global/Hios/15/1_0/images/logo.png" alt=""> <div class="hi_os"> <img src="https://d3fyizz0b46qgr.cloudfront.net/global/Hios/15/1_0/images/hios.png" alt=""> </div> </div> <p class="new_text" style="font-weight: 600 !important;font-family: 'H_bold'!important;">{{banner.banner_text}} </p> </div> </section> <div class="new_big_title" id="aiTitle"> <div class="content"> <p class="new_big_font" v-html="aiBox.ell_ai.text1"></p> <p class="new_big_font" v-html="aiBox.ell_ai.text2"></p> </div> <video class="video1" :data-src="aiBox.ell_ai.video1" :poster="aiBox.ell_ai.post" autoplay muted preload x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline> </video> </div> <section class="ai_wrap"> <div class="ell_ai"> <div class="wrap2"> <section class="set ai"> <div class="content" v-if="windowWidth>=1081"> <div class="left"> <div>  <div v-for="(item,index) in aiBox.ai.tab" :key="index" v-if="index == 0" class="leftText textActive"> <p class="new_blue_title" v-html="item.text1"></p> <p class="new_title" v-html="item.text2"></p> <p class="new_text" v-html="item.text3"></p> </div> </div> <div> <p :class="index == aiBox.ai.activeIndex?'active':''" class="_3rdTitle new_text" v-for="(item,index) in aiBox.ai.tab" :key="index" @click="aiTab(item.src,index)"> {{item.name}} </p> </div> </div> <div class="right"> <div v-for="(item,index) in aiBox.ai.tab" :key="index" :class="index == aiBox.ai.activeIndex?'rightActive':''"> <button v-if="item.ended" @click="aiTab(item.src,index)" v-html="item.text4" :class="item.ended?'play_video Replay':'play_video'"></button> <video :data-src="item.src" alt="" v-if="item.src.includes('.mp4')" :poster="item.post" @ended="onVideoEnded(0,index)" muted preload x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline> </video> <img v-if="!item.src.includes('.mp4')" :key="index" :data-src="item.src" alt=""> </div> </div> </div> <div class="content" v-else> <div class="top_text" v-for="(item,index) in aiBox.ai.tab" :key="index" v-if="index==0"> <div> <p class="blue new_blue_title" v-html="item.text1"></p> <p class="new_title" v-html="item.text2"></p> </div> <span class="icon" @click="open(item)">+</span> </div> <div class="video_img"> <div class="filter" v-if="windowWidth<=1080"> <span class="new_text" v-html="aiBox.ai.filter"></span> </div> <video :data-src="aiBox.ai.m_src" v-if="aiBox.ai.m_src.includes('.mp4')" :poster="aiBox.ai.post" @ended="handleVideoEnded(0)" id="mVideo1" muted preload x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline> </video> <img :src="aiBox.ai.m_src" alt="" v-else> <button v-if="aiBox.ai.ended" v-html="aiBox.ai.text4" @click="mVideoPlay(0)" :class="aiBox.ai.ended?'play_video Replay':'play_video'"> </button> </div> <div class="swiper mobileSwiper"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item,index) in aiBox.ai.tab" :key="index" v-html="item.name" :data-item=JSON.stringify(item)></div> </div> </div> </div> </section> </div> </div> <div id="ai"> <section class="set Visible aiCall"> <div class="blue"></div> <div class="content" v-if="windowWidth>=1081"> <div class="left"> <div> <div v-for="(item,index) in aiBox.aiCall.ai.tab" :key="index" :class="index == aiBox.aiCall.ai.activeIndex?'textActive':''" class="leftText"> <p class="new_title" v-html="item.text1"></p> <p class="new_text" v-html="item.text2"></p> </div> </div> <div> <p :class="index == aiBox.aiCall.ai.activeIndex?'active':''" class="_3rdTitle new_text" v-for="(item,index) in aiBox.aiCall.ai.tab" :key="index" @click="aiCallTab(item.src,index)"> {{item.name}} </p> </div> </div> <div class="right"> <div v-for="(item,index) in aiBox.aiCall.ai.tab" :key="index" :class="index == aiBox.aiCall.ai.activeIndex?'rightActive':''"> <button v-if="item.ended" @click="aiCallTab(item.src,index)" v-html="item.text4" :class="item.ended?'play_video Replay':'play_video'"></button> <video :data-src="item.src" alt="" v-if="item.src.includes('.mp4')" :poster="item.post" @ended="onVideoEnded(1,index)" muted preload x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline> </video> <img v-if="!item.src.includes('.mp4')" :key="index" :data-src="item.src" alt=""> </div> </div> </div> <div class="content" v-else> <div class="top_text"> <div> <p class="new_title" v-html="aiBox.aiCall.text1"></p> </div> <span class="icon" @click="aiCallOpen">+</span> </div> <div class="video_img"> <div class="filter" v-if="windowWidth<=1080"> <span class="new_text" v-html="aiBox.aiCall.filter"></span> </div> <video :src="aiBox.aiCall.m_src" autoplay v-if="aiBox.aiCall.m_src.includes('.mp4')" :poster="aiBox.aiCall.post" muted preload @ended="handleVideoEnded(1)" id="mVideo2" x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline></video> <img :src="aiBox.aiCall.m_src" alt="" v-else> <button v-if="aiBox.aiCall.ended" v-html="aiBox.aiCall.text4" @click="mVideoPlay(1)" :class="aiBox.aiCall.ended?'play_video Replay':'play_video'"> </button> </div> <div class="swiper mobileSwiper2"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item,index) in aiBox.aiCall.ai.tab" :key="index" v-html="item.name" :data-item=JSON.stringify(item)></div> </div> </div> </div> </section> <section class="set Office_Booste"> <div class="content" v-if="windowWidth>=1081"> <div class="left"> <div> <div v-for="(item,index) in aiBox.Office_Booste.ai.tab" :key="index" :class="index == aiBox.Office_Booste.ai.activeIndex ? 'textActive':'' " class="leftText"> <p class="new_title" v-html="item.text1"></p> <p class="new_text" v-html="item.text2"></p> </div> </div> <div> <p :class="index == aiBox.Office_Booste.ai.activeIndex?'active':''" class="_3rdTitle new_text" v-for="(item,index) in aiBox.Office_Booste.ai.tab" :key="index" @click="Office_BoosteTab(item.src,index)"> {{item.name}} </p> </div> </div> <div class="right"> <div v-for="(item,index) in aiBox.Office_Booste.ai.tab" :key="index" :class="index == aiBox.Office_Booste.ai.activeIndex?'rightActive':''"> <button v-if="item.ended" @click="Office_BoosteTab(item.src,index)" v-html="item.text4" :class="item.ended?'play_video Replay':'play_video'"></button> <video :data-src="item.src" alt="" v-if="item.src.includes('.mp4')" :poster="item.post" @ended="onVideoEnded(2,index)" muted preload x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline> </video> <img v-if="!item.src.includes('.mp4')" :key="index" :data-src="item.src" alt=""> </div> </div> </div> <div class="content" v-else> <div class="top_text"> <div> <p class="new_title" v-html="aiBox.Office_Booste.text1"></p> </div> <span class="icon" @click="OfficeBoosteOpen">+</span> </div> <div class="video_img"> <div class="filter" v-if="windowWidth<=1080"> <span class="new_text" v-html="aiBox.Office_Booste.filter"></span> </div> <video :data-src="aiBox.Office_Booste.m_src" v-if="aiBox.Office_Booste.m_src.includes('.mp4')" muted preload @ended="handleVideoEnded(2)" id="mVideo3" x5-video-player-fullscreen="true" :poster="aiBox.Office_Booste.post" x5-playsinline playsinline webkit-playsinline></video> <img :src="aiBox.Office_Booste.m_src" alt="" v-else> <button v-if="aiBox.Office_Booste.ended" v-html="aiBox.Office_Booste.text4" @click="mVideoPlay(2)" :class="aiBox.Office_Booste.ended?'play_video Replay':'play_video'"> </button> </div> <div class="swiper mobileSwiper3"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item,index) in aiBox.Office_Booste.ai.tab" :key="index" v-html="item.name" :data-item=JSON.stringify(item)></div> </div> </div> </div> </section> <section class="set circle"> <div class="pink"></div> <div class="content"> <div> <p class="blue new_blue_title" v-html="aiBox.circle.text1"></p> <p class="new_title" v-html="aiBox.circle.text2"></p> </div> <div v-if="windowWidth>=1081"> <div v-for="item in aiBox.circle.arr"> <div class="imgBox"> <video :data-src="item.src" v-if="item.src.includes('.mp4')" :poster="item.poster" autoplay muted preload x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline> </video> <img v-if="!item.src.includes('.mp4')" :data-src="item.src"> </div> <b v-html="item.title" class="new_blue_title" style="color: #333!important;"></b> </div> </div> <div class="swiper mobileSwiper4" v-else> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item,index) in aiBox.circle.arr" :key="index"> <video :data-src="item.src" v-if="item.src.includes('.mp4')" :poster="item.poster" autoplay muted preload x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline></video> <img :data-src="item.src" alt="" v-else> <b v-html="item.title"></b> </div> </div> </div> <div class="swiperBtn" v-if="windowWidth<=1080"> <div class="swiper-button-next"></div> <p>{{aiBox.circle.index}}/{{aiBox.circle.arr.length}}</p> <div class="swiper-button-prev"></div> </div> </div> <div class="blue"></div> </section> <section class="set Create_AI"> <div class="content" v-if="windowWidth>=1081"> <div class="left"> <div class="top"> <p class="blue new_blue_title" v-html="aiBox.Create_AI.text1"></p> <p class="new_title" v-html="aiBox.Create_AI.text2"></p> <p class="new_text" v-html="aiBox.Create_AI.text3"></p> </div> <div class="bottom"> <p v-for="(item,index) in aiBox.Create_AI.tab" :key="index" :class="index == aiBox.Create_AI.active?'active':''" @click="Create_AITab(index)"> {{item.name}}</p> </div> </div> <div class="right"> <img v-for="(item,index) in aiBox.Create_AI.tab" :key="index" :class="index == aiBox.Create_AI.active?'active':''" :data-src="item.src" alt=""> </div> </div> <div class="content" v-else> <div class="top_text"> <div> <p class="blue new_blue_title" v-html="aiBox.Create_AI.text1"></p> <p class="new_title" v-html="aiBox.Create_AI.text2"></p> </div> <span class="icon" @click="CreateAIOpen">+</span> </div> <div class="video_img"> <div class="filter" v-if="windowWidth<=1080"> <span class="new_text" v-html="aiBox.Create_AI.text3"></span> </div> <img :data-src="aiBox.Create_AI.m_src" alt=""> </div> <div class="swiper mobileSwiper5"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item,index) in aiBox.Create_AI.tab" :key="index" v-html="item.name" :data-item=JSON.stringify(item)></div> </div> </div> </div> </section> </div> </section> <section id="wallpaper"> <section class="set wallpaper_bigTitle_new" id="NatureDesign"> <p class="new_big_font" v-html="NatureDesign.wallpaper.wallpaper_big_title.text1"></p> <p class="new_big_f28" v-html="NatureDesign.wallpaper.wallpaper_big_title.text2"></p> </section> <div class="container1"> <div class="text"> <p class="oneTake">Fond <br />d'écran</p> <p class="blue Wallpaper"> en une<br />seule prise</p> </div> <div class="wallpaper_video"> <img :data-src="banner.model_bg" class="modelBg" alt="">  <video :data-src="NatureDesign.wallpaper.video" alt="" :poster="banner.post" muted preload loop x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline> </video> </div> <img :data-src="NatureDesign.wallpaper.bg" class="wallpaperBg" alt=""> </div> <div class="container1"> <img :data-src="NatureDesign.wallpaper.bg" class="wallpaperBg" alt=""> <div class="set swiper container4_Swiper">  <img :data-src="NatureDesign.wallpaper.time" class="model_time" alt=""> <div class="Nature_Wallpaper" v-if="NatureDesign.wallpaper.Nature_Wallpaper.text1"> <p class="blue font_mini_size" v-html="NatureDesign.wallpaper.Nature_Wallpaper.text1"></p> </div> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in NatureDesign.wallpaper.wallpaperSwiper"> <img :data-src="item" alt=""> </div> </div> <div class="swiper-pagination"></div> <div class="swiperBtn" v-if="windowWidth<=1080"> <div class="swiper-button-next"></div> <p>{{NatureDesign.wallpaper.index}}/{{NatureDesign.wallpaper.wallpaperSwiper.length}}</p> <div class="swiper-button-prev"></div> </div> </div> </div> <div class="set container2_new"> <div class="blue"></div> <div class="pink"></div> <div class="pink2"></div> <div class="hios_bgTitle"> <p class="new_title" v-html="NatureDesign.hios_bgTitle.text2"></p> <p class="hi_osImg"> <img data-src="https://d3fyizz0b46qgr.cloudfront.net/global/Hios/15/1_0/images/hios.png" alt=""> </p> </div> <div class="helloVideo"> <img :data-src="banner.model_bg" class="modelBg" alt="">  <video :data-src="NatureDesign.hello_user.leftImg" alt="" :poster="NatureDesign.hello_user.post" autoplay muted loop preload x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline> </video> </div> </div> <div class="container2"> <section class="set hello_user"> <img class="icon_bg" :data-src="NatureDesign.icon.bg" alt=""> <div class="icon_text"> <p class="new_blue_title" v-html="NatureDesign.icon.text1"></p> <p class="new_title" v-html="NatureDesign.icon.text2"></p> </div> <div class="iconList"> <img v-for="item in NatureDesign.icon.img" :data-src="item" alt=""> </div> </section> </div> <div class="container3"> <div class="set list"> <div v-for="(item,index) in NatureDesign.container3" :key="index" :class="'i i'+index"> <div v-if="windowWidth>=1081" style="width: 100%"> <p class="blue new_blue_title" v-html="item.text1"></p> <p class="new_title" v-html="item.text2"></p> <p class="new_text" v-html="item.text3"></p> </div> <div v-else> <div> <p class="blue new_blue_title" v-html="item.text1"></p> <p class="new_title" v-html="item.text2"></p> </div> <span class="icon" @click="container3Btn(index)" v-if="item.text3 && windowWidth<=1080">+</span> </div> <div class="filter" v-if="windowWidth<=1080"> <span class="new_text" v-html="item.text3"></span> </div> <div class="imgBox"> <video :class="'video'+index" :data-src="item.video" alt="" v-if="item.video" :poster="item.post" autoplay loop muted preload x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline> </video> <img class="model" :data-src="item.model" alt="" v-if="item.model">  <img v-for="(e,i) in item.img" :key="i" :class="'img'+i" v-if="item.img" :data-src="e" :data-index="i" alt=""> <div class="i3Video" v-if="item.videos"> <div v-for="(e,i) in item.videos" :key="i" :class="'v'+i"> <img :data-src="e.model" alt="" v-if="e.model">  <video :data-src="e.src" :poster="e.post" muted preload x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline> </video> </div> <button @click="play_video(1)" v-html="Replay" class="play_video Replay"> </button> </div> </div> </div> </div> </div> <div class="set container4"> <div class="content"> <p class="blue new_blue_title" v-html="NatureDesign.container4.text1"></p> <p class="new_title" v-html="NatureDesign.container4.text2"></p> <p class="new_text" v-html="NatureDesign.container4.text3"></p> </div> <section class="set wallpaperSwiper"> <img class="wallpaper_bg" src="" alt=""> <div class="swiper mySwiper"> <img :data-src="banner.model_bg" class="modelBg" alt="">  <img :data-src="NatureDesign.wallpaper.time" class="model_time" alt=""> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in NatureDesign.container4.img"> <img :data-src="item.src" :data-bg="item.bg" alt=""> </div> </div> <div class="swiperBtn" v-if="windowWidth<=1080"> <div class="swiper-button-next"></div> <p>{{NatureDesign.container4.index}}/{{NatureDesign.container4.img.length}}</p> <div class="swiper-button-prev"></div> </div> </div> <div class="swiper-pagination container1swiper-pagination"></div> </section> </div> </section> <section id="Smooth" style="overflow: hidden"> <div class="set Smooth1_bigTitle_new" id="SmoothTilte"> <p class="Smooth1_title1 new_big_font" style="color: #0264fa" v-html="Smooth.Smooth1.Smooth1_bigTitle.text1"> </p> <p class="Smooth1_title2 white new_big_font" v-html="Smooth.Smooth1.Smooth1_bigTitle.text2"></p> <p class="new_big_f28 white" v-html="Smooth.Smooth1.Smooth1_bigTitle.text3"></p> </div> <div class="set Smooth1"> <div class="set Smoother Smoother_color"> <div class="filter" v-if="windowWidth<=1080"> <span class="new_text" v-html="Smooth.Smooth1.text8"></span> </div> <div class="textWrap"> <p class="blue new_blue_title" v-html="Smooth.Smooth1.text5"></p> <p class="white new_title" v-html="Smooth.Smooth1.text6"></p>  <p class="new_text c_9" v-if="windowWidth>=1081" v-html="Smooth.Smooth1.text8"></p> <span class="icon" v-if="windowWidth<=1080" @click="Smooth1_icon">+</span> </div> <div class="old"> <video :data-src="Smooth.Smooth1.old.src" alt="" :poster="Smooth.Smooth1.old.post" muted preload x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline></video> <p v-html="Smooth.Smooth1.old.text"></p> </div> <div class="new"> <video :data-src="Smooth.Smooth1.new.src" alt="" :poster="Smooth.Smooth1.new.post" muted preload x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline></video> <p v-html="Smooth.Smooth1.new.text"></p> </div> <button @click="play_video(2)" v-html="Replay" class="play_video Replay"> </button> </div> </div> <div class="set Smooth2"> <div class="Smoother Smoother_color"> <div class="filter" v-if="windowWidth<=1080"> <span class="new_text" v-html="Smooth.Smooth2.text3"></span> </div> <div class="top-text"> <p class="blue new_blue_title" v-html="Smooth.Smooth2.text1"></p> <p class="new_title white" v-html="Smooth.Smooth2.text2"> </p> <p class="new_text c_9" v-if="windowWidth>=1081" v-html="Smooth.Smooth2.text3"></p> <span class="icon" v-if="windowWidth<=1080" @click="Smooth2_icon">+</span> </div> <div class="column"> <div> <p class="topText" v-html="Smooth.Smooth2.text4"></p> <img data-src="https://d3fyizz0b46qgr.cloudfront.net/global/Hios/15/1_0/images/column1.png" alt=""> </div> <div> <p class="topText" v-html="Smooth.Smooth2.text5"></p> <img data-src="https://d3fyizz0b46qgr.cloudfront.net/global/Hios/15/1_0/images/column2.png" alt=""> </div> <div> <p class="topText" v-html="Smooth.Smooth2.text6"></p> <img data-src="https://d3fyizz0b46qgr.cloudfront.net/global/Hios/15/1_0/images/column3.png" alt=""> </div> <div> <p class="topText" v-html="Smooth.Smooth2.text7"></p> <img data-src="https://d3fyizz0b46qgr.cloudfront.net/global/Hios/15/1_0/images/column4.png" alt=""> </div> <div> <p class="topText" v-html="Smooth.Smooth2.text8"></p> <img data-src="https://d3fyizz0b46qgr.cloudfront.net/global/Hios/15/1_0/images/column5.png" alt=""> </div> </div> </div> </div> <div class="set Smooth3"> <div class="Smoother_color" v-for="(item,index) in Smooth.Smooth3" :key="index"> <div :class="'filter filter'+index" v-if="item.text3"> <span class="new_text" v-html="item.text3"></span> </div> <div class="top"> <p class="blue new_blue_title" v-html="item.text1"></p> <p class="new_title white" v-html="item.text2"></p> <span :class="'icon icon'+index" @click="Smooth3_icon(index)" v-if="item.text3">+</span> </div> <div class="bottom"> <img :data-src="item.img" v-if="item.img" alt=""> <div class="bottomBox" v-else> <div> <span class="textBox" v-for="e in item.text4Box">{{e}}</span> <span class="text" v-html="item.text4"></span> </div> <div> <span class="textBox" v-for="e in item.text5Box">{{e}}</span> <span class="text" v-html="item.text5"></span> </div> <div> <span class="textBox" v-for="e in item.text6Box">{{e}}</span> <span class="text" v-html="item.text6"></span> </div> </div> </div> </div> </div> </section> <section id="Dual_systems"> <div class="systems_bigTitle_new" id="MoreSurprises"> <p class="systems1_title1 new_big_font" v-html="MoreSurprises.systems1.text1"></p> <p class="new_big_f28" v-html="MoreSurprises.systems1.text2"></p> </div> <div class="set systems1"> <img :data-src="MoreSurprises.systems1.systems_bg" class="w-100" alt=""> <div class="systems_bigTitle2"> <p class="new_blue_title" v-html="MoreSurprises.systems1.text3"></p> <p class="new_title white" v-html="MoreSurprises.systems1.text7"></p> <p class="new_text c_9" v-html="MoreSurprises.systems1.text6"></p> </div> <div class="modelImg"> <img :data-src="MoreSurprises.systems1.imgleft" alt=""> <img :data-src="MoreSurprises.systems1.imgright" alt=""> </div> </div> <div class="set systems2"> <div class="content"> <div class="systems_wrap1"> <div class="left"> <p class="blue new_blue_title" v-html="MoreSurprises.systems2.text1"></p> <p class="new_title white" v-html="MoreSurprises.systems2.text2"></p> </div> <div class="right"> <img :data-src="MoreSurprises.systems2.DNV" alt=""> </div> </div> <div class="systems_wrap2"> <div class="left"> <p class="blue new_blue_title" v-html="MoreSurprises.systems2.text3"></p> <p class="new_title white" v-html="MoreSurprises.systems2.text4"></p> <p class="new_text c_9" v-html="MoreSurprises.systems2.text5"></p> </div> <div class="right"> <div> <img :data-src="MoreSurprises.systems2.img1" alt=""> </div> </div> </div> </div> </div> <div class="set systems3"> <div class="content"> <div class="top"> <p class="blue new_blue_title" v-html="MoreSurprises.systems3.text1"></p> <p class="white new_title" v-html="MoreSurprises.systems3.text2"></p> <p class="new_text c_9" v-html="MoreSurprises.systems3.text3"></p> </div> <div class="bottom"> <div><img class="img1" :data-src="MoreSurprises.systems3.img1" alt=""></div>  <div><img class="img3" :data-src="MoreSurprises.systems3.img3" alt=""></div> </div> </div> </div> <div class="set systems4"> <div class="content"> <div class="left" id="dra"> <div class="Rod"> <p class="line"></p> </div> <img class="img1" :data-src="MoreSurprises.systems4.img1" alt=""> <img class="img2" :data-src="MoreSurprises.systems4.img2" alt=""> <div class="btnBtn"> <div class="btn" :class="onOff==1?'white':''" @click="systems4Btn(1)">{{MoreSurprises.systems4.off}}</div> <div class="btn" :class="onOff==0?'white':''" @click="systems4Btn(0)">{{MoreSurprises.systems4.on}}</div> <div class="active" :style="onOff==1?'left:3%':'right:3%'"></div> </div> </div> <div class="right"> <p class="blue new_blue_title" v-html="MoreSurprises.systems4.text1"></p> <p class="white new_title" :class="windowWidth<=1080?'_1ndTitle':'f36'" v-html="MoreSurprises.systems4.text2"></p> <p class="new_text c_9" :class="windowWidth<=1080?'f16':'f18'" v-html="MoreSurprises.systems4.text3"></p> </div> </div> </div> <div class="set systems5"> <div class="content"> <div class="left"> <p class="blue new_blue_title" v-html="MoreSurprises.systems5.text1"></p> <p class="new_title white" v-html="MoreSurprises.systems5.text2"></p> <p class="new_text c_9" :class="windowWidth<=1080?'f16':'f18'" v-html="MoreSurprises.systems5.text3"> </p> </div> <div class="right"> <img :data-src="MoreSurprises.systems5.img" alt=""> </div> </div> </div> </section> <section id="Disclaimer"> <div class="content width-1440"> <p class="title" v-html="Disclaimer.title"></p> <div class="list"> <p v-for="item in Disclaimer.list" v-html="item"></p> </div> </div> </section> </div>  <div class="country-box" style="opacity: 0;"> <section id="country-change-modal" tabindex="-1" role="dialog" class="country-change modal modal-canvas modal-vm fade show" style="display: block; padding-right: 17px;"> <div role="dialog" class="modal-dialog container"> <div class="modal-content"> <header class="modal-header"> <div class="modal-title hidden-xs-down"> <h6 class="text-uppercase text-muted small">CHOOSE YOUR COUNTRY OR REGION</h6> </div> <button type="button" data-dismiss="modal" aria-label="Close" class="close circle country-close"> <span class="iconfont icon-close"></span> </button> </header> <div class="v-spinner text-center my-30" style="display: none;"> <div class="v-pulse v-pulse1" style="background-color: rgb(0, 116, 200); width: 15px; height: 15px; margin: 2px; border-radius: 100%; display: inline-block; animation-name: v-pulseStretchDelay; animation-duration: 0.75s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.2, 0.68, 0.18, 1.08); animation-fill-mode: both; animation-delay: 0.12s;"></div> <div class="v-pulse v-pulse2" style="background-color: rgb(0, 116, 200); width: 15px; height: 15px; margin: 2px; border-radius: 100%; display: inline-block; animation-name: v-pulseStretchDelay; animation-duration: 0.75s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.2, 0.68, 0.18, 1.08); animation-fill-mode: both; animation-delay: 0.24s;"></div> <div class="v-pulse v-pulse3" style="background-color: rgb(0, 116, 200); width: 15px; height: 15px; margin: 2px; border-radius: 100%; display: inline-block; animation-name: v-pulseStretchDelay; animation-duration: 0.75s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.2, 0.68, 0.18, 1.08); animation-fill-mode: both; animation-delay: 0.36s;"></div> </div> <section class="modal-body country-change-tabs"> <input type="radio" name="continent" class="continent-state" value="0" checked/>  <label for="continent-africa" class="continent-nav beginafrica"> <figure class="continent africa "></figure> <h5>Africa</h5> </label> <ul class="list-unstyled row continent-countries beginclass"> <li class="col-12 col-lg-3 country-link"> <a href="/ne"> <span class="flag-icon flag-icon-ne"></span> <span>Niger</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="/tg"> <span class="flag-icon flag-icon-tg"></span> <span>Togo</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="/bj"> <span class="flag-icon flag-icon-bj"></span> <span>Bénin</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="/gn"> <span class="flag-icon flag-icon-gn"></span> <span>Guinea</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="/zm"> <span class="flag-icon flag-icon-zm"></span> <span>Zambia</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="/ug"> <span class="flag-icon flag-icon-ug"></span> <span>Uganda</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="/ao"> <span class="flag-icon flag-icon-ao"> </span> <span>Angola</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="/home/"> <span class="flag-icon flag-icon-mg"></span> <span>Madagascar</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="/et-en/"> <span class="flag-icon flag-icon-et"></span> <span>Ethiopia</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/home/"><span class="flag-icon flag-icon-gm"></span> <span>Gambia</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/mz"><span class="flag-icon flag-icon-mz"></span> <span>Moçambique</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/home/"><span class="flag-icon flag-icon-tn"></span> <span>تونس</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/dz"><span class="flag-icon flag-icon-dz"></span> <span>Algérie</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/ma/"><span class="flag-icon flag-icon-ma"></span> <span>Maroc</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/home/"><span class="flag-icon flag-icon-mr"></span> <span>Mauritania</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/cm/"><span class="flag-icon flag-icon-cm"></span> <span>Cameroun</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/home/"><span class="flag-icon flag-icon-td"></span> <span>Tchad</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/ci"><span class="flag-icon flag-icon-ci"></span> <span>Côte d'Ivoire</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/bf"><span class="flag-icon flag-icon-bf"></span> <span>Burkina Faso</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/sn"><span class="flag-icon flag-icon-sn"></span> <span>Sénégal</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/ml"><span class="flag-icon flag-icon-ml"></span> <span>Mali</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/rdc"><span class="flag-icon flag-icon-cd"></span> <span>DR Congo</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/rw"><span class="flag-icon flag-icon-rw"></span> <span>Rwanda</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/tz"><span class="flag-icon flag-icon-tz"></span> <span>Tanzania</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/home/"><span class="flag-icon flag-icon-mw"></span> <span>Malaŵi</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/home/"><span class="flag-icon flag-icon-mu"></span> <span>Mauritius</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/home/"><span class="flag-icon flag-icon-sl"></span> <span>Sierra Leone</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/za"><span class="flag-icon flag-icon-za"></span> <span>South Africa</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/home/"><span class="flag-icon flag-icon-lr"></span> <span>Liberia</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/gh"><span class="flag-icon flag-icon-gh"></span> <span>Ghana</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/ke"><span class="flag-icon flag-icon-ke"></span> <span>Kenya</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/nga"><span class="flag-icon flag-icon-ng"></span> <span>Nigeria</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/tn"><span class="flag-icon flag-icon-tn"></span> <span>Tunisia</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/ly"><span class="flag-icon flag-icon-ly"></span> <span>Libya</span></a></li> </ul> <input type="radio" name="continent" class="continent-state" value="1" /> <label for="continent-asia" class="continent-nav"> <figure class="continent asia"></figure> <h5>Asia</h5></label> <ul class="list-unstyled row continent-countries"> <li class="col-12 col-lg-3 country-link"><a href="/kg"><span class="flag-icon flag-icon-kg"></span> <span>Кыргызстан</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/my"><span class="flag-icon flag-icon-my"></span> <span>Malaysia</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/uz"><span class="flag-icon flag-icon-uz"></span> <span>Uzbekistan</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/iq"><span class="flag-icon flag-icon-iq"></span> <span>Iraq</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/vn"><span class="flag-icon flag-icon-vn"></span> <span>Vietnam</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/lk"><span class="flag-icon flag-icon-lk"></span> <span>Sri Lanka</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/ph"><span class="flag-icon flag-icon-ph"></span> <span>Philippines</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/kh"><span class="flag-icon flag-icon-kh"></span> <span>Cambodia</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/jo"><span class="flag-icon flag-icon-jo"></span> <span>الأردن</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/lb"><span class="flag-icon flag-icon-lb"></span> <span>لبنان</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/kz"><span class="flag-icon flag-icon-kz"></span> <span>Kazakhstan</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/mm"><span class="flag-icon flag-icon-mm"></span> <span>Myanmar</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/sa-en"><span class="flag-icon flag-icon-sa"></span> <span>السعودية</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/ae"><span class="flag-icon flag-icon-ae"></span> <span>UAE</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/th"><span class="flag-icon flag-icon-th"></span> <span>ประเทศไทย</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/bd/"><span class="flag-icon flag-icon-bd"></span> <span>Bangladesh</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/id"><span class="flag-icon flag-icon-id"></span> <span>Indonesia</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/pak"><span class="flag-icon flag-icon-pk"></span> <span>Pakistan</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="https://www.tecno-mobile.in"><span class="flag-icon flag-icon-in"></span> <span>भारत</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/np"><span class="flag-icon flag-icon-np"></span> <span>Nepal</span></a></li> </ul> <input type="radio" name="continent" class="continent-state" value="2" /> <label for="continent-southamerica" class="continent-nav"> <figure class="continent southamerica"></figure> <h5>South America</h5></label> <ul class="list-unstyled row continent-countries"> <li class="col-12 col-lg-3 country-link"><a href="/ar"><span class="flag-icon flag-icon-ar"></span> <span>Argentina</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/ec"><span class="flag-icon flag-icon-ec"></span> <span>Ecuador</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/br"><span class="flag-icon flag-icon-br"></span> <span>Brazil</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/bo"><span class="flag-icon flag-icon-bo"></span> <span>Bolivia</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/pe"><span class="flag-icon flag-icon-pe"></span> <span>Perú</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/co/"><span class="flag-icon flag-icon-co"></span> <span>Colombia</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/latam/"><span class="iconfont icon-global"></span> <span>Latam</span></a></li> </ul> <input type="radio" name="continent" class="continent-state" value="3" /> <label for="continent-northamerica" class="continent-nav"> <figure class="continent northamerica"></figure> <h5>North America</h5></label> <ul class="list-unstyled row continent-countries"> <li class="col-12 col-lg-3 country-link"><a href="/mx"><span class="flag-icon flag-icon-mx"></span> <span>Mexico</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/gua"><span class="flag-icon flag-icon-gua"></span> <span>Guatemala</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/hon"><span class="flag-icon flag-icon-hn"></span> <span>Honduras</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/dr"><span class="flag-icon flag-icon-do"></span> <span>Dominican</span></a></li> </ul> <input type="radio" name="continent" class="continent-state" value="4" /> <label for="continent-europe" class="continent-nav"> <figure class="continent europe"></figure> <h5>Europe</h5></label> <ul class="list-unstyled row continent-countries"> <li class="col-12 col-lg-3 country-link"> <a href="/gr/home/"> <span class="flag-icon flag-icon-gr"></span> <span>Greece</span> </a> </li> <li class="col-12 col-lg-3 country-link"><a href="/hu"><span class="flag-icon flag-icon-hu"></span> <span>Magyarország</span></a></li> <li class="col-12 col-lg-3 country-link"><a href="/ro"><span class="flag-icon flag-icon-ro"></span> <span>Romania</span></a></li> <li class="col-12 col-lg-3 country-link"> <a href="/pl/"> <span class="flag-icon flag-icon-pl"></span> <span>Polska</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="/bg/"> <span class="flag-icon flag-icon-bg"></span> <span>България</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="/cz"> <span class="flag-icon flag-icon-cz"></span> <span>Česko</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="/rs"> <span class="flag-icon flag-icon-rs"></span> <span>Република Србија</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="https://turkiye.tecno-mobile.com/home//"> <span class="flag-icon flag-icon-tr"></span> <span>Türkiye</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="http://ua.tecno-mobile.com"> <span class="flag-icon flag-icon-ua"></span> <span>Україна</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="http://ru.tecno-mobile.com"> <span class="flag-icon flag-icon-ru"></span> <span>Россия</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="/si"> <span class="flag-icon flag-icon-si"></span> <span>Slovenija</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="/mk"> <span class="flag-icon flag-icon-mk"></span> <span>North Macedonia</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="/al"> <span class="flag-icon flag-icon-al"></span> <span>Albania</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="/es"> <span class="flag-icon flag-icon-es"></span> <span>Spain</span> </a> </li> <li class="col-12 col-lg-3 country-link"> <a href="/fr"> <span class="flag-icon flag-icon-fr"></span> <span>France </span> </a> </li> </ul> </section> <footer class="modal-footer search-modal-footer justify-content-center"> <a href="/home/" class="d-inline-block global-link"><span class="iconfont icon-global"></span> <h4 class="d-inline-block">Global Home</h4></a> </footer> </div> </div> </section> </div> <style> #newNav,#topNav { background: rgba(255, 255, 255, .75); } #newNav .drop_down{ background: #fff; } /**/ .x_about_banner .x_fidetwobox .x_fidetwo div p { text-align: justify; } /**/ /* .country-box{ display: none; } */ #country-change-modal{ -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } .country-box-active{ transition: -webkit-transform .6s linear; transition: transform .6s linear; transition: transform .6s linear, -webkit-transform .6s linear; -webkit-transform: translate3d(0,0,0)!important; transform: translate3d(0,0,0)!important; } .beginclass{ padding: 1.25em 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; min-height: 145px; height: auto!important; } .beginclass a{ -webkit-transform: translateZ(0)!important; transform: translateZ(0)!important; } .beginafrica .africa{ background-position: -133px -91px!important; } .beginafrica:after { border-bottom-color: #0074c8!important; } .country-change{ overflow-y: auto; } .country-change-selector{ margin-left: 2.5rem; font-size: .75rem; display: inline-block; cursor: pointer; } .country-change-selector .flag-icon{ margin-right: 8px; } .filter-options .filter-options-list a.active { color: #0074c8!important; } .filter-options .filter-options-list a{ color: #666!important; } .accordion-toggle-one:after{ content:''!important; } .accordion-toggle-one.active, .btn-outline-primary{ color: #0074c8!important; } .opacitystyle{ opacity: 0!important; } .opacitystyle1{ opacity: 1!important; } .two-line{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .sticky.is-sticky{ z-index: 10; } .navbar-toggleable-lg{ padding: 0 0 1.05rem 0; } .sticky.on-top{ z-index: 10; } .search-result-teaser p,.news-overview .news-subtitle{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .country-change-selector{ margin-left: 2.5rem; font-size: .75rem; display: inline-block; cursor: pointer; } .phoneBtn span.TechSpecs{ cursor: pointer; } .flag-icon-id{ margin-right: 8px; } .newdetail h3{ margin-top: 10px; font-weight: bold; } .container .row .hios-hero, h1 { font-weight: 400; } *, :after, :before { box-sizing: border-box; } .product-tile .tile-title { margin-bottom: 0.8375rem; margin-top: 0.5rem; } @media (min-width: 1200px){ [dir=rtl] .navbar-toggleable-lg .navbar-nav{ margin-right: auto; margin-left: auto; } } .loading-txt{ width: 100%; text-align: center; display: block; color: #999; } /* .modal-content .modal-body, .modal-content .modal-footer, .modal-content .modal-header { margin: 0 auto; max-width: 900px; width: 100%; display: flex; justify-content: center; } */ .country-change-selector,footer.global-footer .legal-copyright { margin-left: 0; } .pc-care-top{ padding-top: 68px; } @media (max-width: 767px) { footer.global-footer .directory-footer .slogan-col { bottom: -18.125rem; } .nav_right .buy-btn-id{ margin-right: 0; line-height: 2.3611vw; } } @media (max-width: 700px) { .care-top{ padding-top:30pt!important; } } @media (min-width: 700px) { .card-bottom{ margin-top: 20pt!important; } .care-top{ padding-top: 50pt!important; } } .buy-btn-id .nav-btn{ display: block; margin-right: 0; line-height: 34px; color: white!important; background: #287DFF; padding: 0 17.75px; border-radius: 4.05px; cursor: pointer } /*.sticky-nav .sticky-container{*/ /* align-items: center;*/ /*}*/ /* .buy-btn-id .nav-btn:hover{ color:#fff!important; } */ @keyframes dots { 0 { width: 0 } to { width: 100% } } @media screen and (max-width: 1440px) and (min-width: 1081px){ .buy-btn-id{ /* display: none; */ height: 2.3611vw; } .nav_right .buy-btn-id{ margin-right: 0; line-height: 2.3611vw; } } .buy-btn-id{ /* display: none; */ height: 34px; } </style>  <script> $('.point-item').click(function (){ $(this).addClass('active').siblings().removeClass('active') }) $('.nav_name').click(function (){ $(this).toggleClass('icon_rotate') $('.drop_down').toggleClass('drop_down_active') }) //详情页下滑显示nav标签不显示header if($("#newNav").length>0){ console.log('新二级导航') $('.HomePage').css('position','relative') } </script> <script> setTimeout(()=>{ let timestamp = $.now() let date = new Date(timestamp) let year = date.getFullYear() //当前年份 var footerTime = [];//定义数组 $('.legal-copyright').each(function () { footerTime.push($(this).html()) }); footerTime.map(i =>{ var start var end if(i.split(' TECNO Mobile')[0].indexOf('-') != '-1'){ start = i.split('-')[0] end = i.split('-')[1].replace(i.split('-')[1].slice(0,4),year) $('.legal-copyright').text(start+'-'+end) }else { start = i.split('-')[0].replace(i.split('-')[0].slice(0,5),"©"+year) $('.legal-copyright').text(start) } }) },1000) $('video').each(function () { $(this).attr('x5-video-player-fullscreen', true); $(this).attr('x5-playsinline',''); $(this).attr('preload',''); $(this).attr('playsinline',''); $(this).attr('webkit-playsinline',''); }); </script> <style> @font-face { font-display: swap; font-family: HurmeGeometricSans_No3_4_Regular; src: url(https://d3fyizz0b46qgr.cloudfront.net/global/fonts/HurmeGeometricSans_No3_4_Regular_new.otf) } body { font-family: 'HurmeGeometricSans_No3_4_Regular'!important } .flag-icon-gua{ background-image: url("https://d3fyizz0b46qgr.cloudfront.net/global/gua.png"); } #newNav{ z-index: 9; } </style> <footer class="global-footer"> <section class="directory-footer container"> <nav class="directory-nav row no-gutters justify-content-md-between" role="navigation"> <div class="directory-nav-col col-12 col-md-auto"> <input type="checkbox" id="directory-nav-tecno" class="directory-nav-state"> <label for="directory-nav-tecno" class="directory-nav-title"><h5>À propos de TECNO</h5></label><ul class="nav flex-column" role="listbox"><li><a href="/ml/about-us/" class="directory-link">À propos</a></li><li><a href="/ml/news/" class="directory-link">Actualités</a></li><li><a href="/ml/contact-us/" class="directory-link">Contact us</a></li></ul> </div> <div class="directory-nav-col col-12 col-md-auto"> <input type="checkbox" id="directory-nav-product" class="directory-nav-state"> <label for="directory-nav-product" class="directory-nav-title"><h5>Produit</h5></label><ul class="nav flex-column" role="listbox"><li><a href="https://www.mobile-phantom.com/ml/homepage" target="_blank" class="directory-link">PHANTOM</a></li><li><a href="/ml/telephones/camon-ml/" class="directory-link">CAMON</a></li><li><a href="/ml/telephones/pouvoir-ml/" class="directory-link">POVA</a></li><li><a href="/ml/telephones/spark-ml/" class="directory-link">SPARK</a></li><li><a href="/ml/telephones/pop-ml/" class="directory-link">POP</a></li><li><a href="/ml/tablets/product-list-ml/" class="directory-link">TABLETTES</a></li></ul> </div> <div class="directory-nav-col col-12 col-md-auto"> <input type="checkbox" id="directory-nav-support" class="directory-nav-state"> <label for="directory-nav-support" class="directory-nav-title"><h5>Assistance</h5></label><ul class="nav flex-column" role="listbox"><li><a href="/ml/support/faq/" class="directory-link">FAQ</a></li><li><a href="/ml/support/download/" class="directory-link">Téléchargements</a></li><li><a href="/ml/carlcare/" target="_blank" class="directory-link">Carlcare</a></li><li><a href="/ml/warranty/" class="directory-link">Vérification de la garantie</a></li></ul> </div> <div class="directory-nav-col col-12 col-md-auto"> <input type="checkbox" id="directory-nav-os" class="directory-nav-state"> <label for="directory-nav-os" class="directory-nav-title"><h5>Applications et services</h5></label><ul class="nav flex-column" role="listbox"><li><a href="/ml/hios/" class="directory-link">HiOS</a></li><li><a href="https://www.boomplaymusic.com" target="_blank" class="directory-link">Boomplay Music</a></li></ul> </div> <div class="slogan-col col-12 col-xl-auto col-md-center"> <figure class="slogan slogan-mobile" style="margin: auto;"></figure> <div class="social-list"><a href="https://business.facebook.com/TECNOMobileMali/" class="io-facebook">facebook</a><a href="https://twitter.com/TECNOMobileMali" class="io-twitter">twitter</a><a href="https://www.instagram.com/tecnomobilemali/" class="io-instagram">instagram</a></div> </div> </nav> </section> <section class="container"> <div class="legal-footer row no-gutters"> <nav class="legal-nav" role="navigation"> <ul class="nav" role="listbox"><li><a href="/ml/privacy-policy/" rel="nofollow" class="legal-link">Politique de confidentialité</a></li><li><a href="/ml/terms-of-use/" rel="nofollow" class="legal-link">Conditions d'utilisation</a></li><li><a href="/ml/plan-du-site/" class="legal-link">Plan du site</a></li></ul> </nav> <div class="country-change-selector" id="country-change-selector" >  <span class="flag-icon flag-icon-ml"></span><span>Mali</span>  <country-selector></country-selector> </div> <div class="legal-copyright">©2021-2025 TECNO Mobile</div> </div> </section> </footer> <link rel="stylesheet" type="text/css" href="/css/footer.css" media="all"><script src="/utils/common.js" type="text/javascript"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-V22FWGK0BC"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-V22FWGK0BC'); </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-99336968-14"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-99336968-14'); </script> <a id="backtotop"></a> <script src="https://d3fyizz0b46qgr.cloudfront.net/static/new-js/main-min.js" type="text/javascript" defer></script> <script src="https://d3fyizz0b46qgr.cloudfront.net/global/homepage/new_global/js/slick-swiper-gsap-ScrollTrigger-blazy.min.js"></script> <script src="https://d3fyizz0b46qgr.cloudfront.net/global/homepage/new_global/js/current-min.js"></script> <script defer src="/newfileadmin/hios15/cm/hios.js"></script> </body> </html>

CINXE.COM

HiOS 15 | TECNO Smartphones