PageSourceSearch

https://www.makewebeasy.com/en/about-makewebeasy

html makewebeasy.com collected 2026-09-24 10:30:21 UTC 256,608 bytes, 5,199 lines download raw bytes

1<!DOCTYPE HTML>
2<html lang="en">
3    <head>
4        <link rel="dns-prefetch" href="//fonts.googleapis.com">
5        <link rel="dns-prefetch" href="//fonts.gstatic.com">
6        <link rel="dns-prefetch" href="//www.google-analytics.com">
7        <title>About Us</title>
8        <meta charset="UTF-8" />
9        <meta name="language" content="English">
10        <meta name="apple-mobile-web-app-status-bar-style" content="black">
11        <meta http-equiv="X-UA-Compatible" content="IE=edge">
12        <meta name="p:domain_verify" content="c69d4f1fefed0d48c1b45dda2dcb9eb7"/>
13                <meta property="og:site_name" content="MakeWebEasy">
14        <meta property="og:url" content="https://www.makewebeasy.com/en/about-makewebeasy">
15        <meta property="og:image" content="https://www.makewebeasy.com/web/en/images/mweshare.jpg" />
16        <meta property="og:type" content="website" />
17        <meta property="og:title" content="About Us" />
18        <meta property="og:description" content="About Us" />
19        <meta property="fb:app_id" content="908723534764184" />
20        <link rel="Publisher" href="https://plus.google.com/+makewebeasy/videos" />
21        <meta name="Description" content="About Us"/>
22        <meta name="KeyWords" content="About Us"/>
23        <meta name="format-detection" content="telephone=no">
24        <meta name="google-site-verification" content="kttxwyTccAeg267Vpe6NXjMQRxQIaFKJtyYRiaMhOQU" />
25        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
26                        
27            
27<script src="https://apis.google.com/js/api:client.js" defer></script>
27
28             
29        
30        <link rel="alternate" href="https://www.makewebeasy.com/" hreflang="x-default" />
31        <link rel="alternate" href="https://www.makewebeasy.com/en" hreflang="en" />
32        <link rel="alternate" href="https://www.makewebeasy.com/id" hreflang="id" />
33        <link rel="canonical" href="https://www.makewebeasy.com/en/about-makewebeasy" />
34        <!-- <link rel="canonical" href="https://www.makewebeasy.com/en/about-makewebeasy" /> -->
35        <link href="/web/en/images/logo/logo-blue/favicon.ico" rel="shortcut icon" type="image/x-icon" />
36
37        <link rel="apple-touch-icon" href="/web/en/images/logo/logoclip/makewebeasy-76.png">
38        <link rel="apple-touch-icon" sizes="152x152" href="/web/en/images/logo/logoclip/makewebeasy-152.png">
39        <link rel="apple-touch-icon" sizes="180x180" href="/web/en/images/logo/logoclip/makewebeasy-180.png">
40        <link rel="apple-touch-icon" sizes="167x167" href="/web/en/images/logo/logoclip/makewebeasy-167.png">
41        
42        <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Kanit:200,300,400%7CCatamaran%7CNunito&subset=thai,latin" />
43        <link rel="stylesheet" href="/web/en/css/font-custom.css?v=202306081454" />
44        <link rel="stylesheet" href="/web/en/plugin/fontawesome-pro-5.0.8/web-fonts-with-css/css/fontawesome-all.min.css" />
45        <link rel="stylesheet" href="/web/en/plugin/bootstrap-less/css/bootstrap.min.css?v=001" />
46        <!-- <link rel="stylesheet" href="/web/en/plugin/air/css/bootstrap-material-design.css" /> -->
47        <link rel="stylesheet" href="/web/en/plugin/air/css/bootstrap-material-design-overwrite.css?v=20260924173020" />
48        <!-- <link rel="stylesheet" href="/web/en/plugin/air/css/ripples.css" /> -->
49        <link rel="stylesheet" href="/web/en/css/style.css?v=202601061649" />
50
51        
51<script type="text/javascript" async src="https://www.google-analytics.com/ga.js"></script>
51
52
53                    
53<script type="text/javascript" async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
53
54                
55                    
55<script src="/web/en/plugin/jquery-2.0.3.min.js"></script>
55
56                
56<script type="text/javascript" src="/web/en/plugin/hideShowPassword.min.js?v=001"></script>
56
57        
57<script defer type="text/javascript" src="/web/en/plugin/moment-develop/min/moment.min.js"></script>
57
58        
58<script defer type="text/javascript" src="/web/en/plugin/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"></script>
58
59        <!-- scale body -->
60        
60<script type="text/javascript">
61            $('body').hide();
62            function scaleBody(widthWin) {
63                var widthBody = widthWin / 1920;
64                if (widthWin > 1920) {
65                    $('body').addClass('scaled').attr('data-scale', widthBody);
66                    $('body').css({
67                        '-webkit-transform-origin': 'top center',
68                        '-webkit-transform': 'scale(' + widthBody + ')',
69                        '-moz-transform-origin': 'top center',
70                        '-moz-transform': 'scale(' + widthBody + ')',
71                        '-ms-transform-origin': 'top center',
72                        '-ms-transform': 'scale(' + widthBody + ')',
73                        '-o-transform-origin': 'top center',
74                        '-o-transform': 'scale(' + widthBody + ')',
75                        'transform-origin': 'top center',
76                        'transform': 'scale(' + widthBody + ')',
77                    });
78                } else {
79                    $('body').removeClass('scaled').removeAttr('data-scale');
80                    $('body').css({
81                        '-webkit-transform-origin': '',
82                        '-webkit-transform': '',
83                        '-moz-transform-origin': '',
84                        '-moz-transform': '',
85                        '-ms-transform-origin': '',
86                        '-ms-transform': '',
87                        '-o-transform-origin': '',
88                        '-o-transform': '',
89                        'transform-origin': '',
90                        'transform': '',
91                    });
92                }
93            }
94            $(document).ready(function () {
95                scaleBody($(window).width());
96                $('body').show();
97            });
98            $(window).resize(function () {
99                scaleBody($(window).width());
100            });
101            // Modal when scale Body
102            $(document).ready(function () {
103                function scaleModalTop($elem) {
104                    if (!$elem || !$elem.get(0)) return;
105                    if ($('body').hasClass('scaled')) {
106                        $elem.css({ 
107                            'top': `calc(${$(window).scrollTop()}px / ${$('body').attr('data-scale')})`,
108                            'bottom': `calc(100% - ${$(window).scrollTop() / $('body').attr('data-scale')}px - ${$(window).height() / $('body').attr('data-scale')}px)`,
109                        });
110                        $elem.get(0).style.setProperty('--body-scale', $('body').attr('data-scale'));
111                    } else {
112                        $elem.css({ 
113                            'top': 0,
114                            'bottom': 0,
115                        });
116                        $elem.get(0).style.setProperty('--body-scale', 1);
117                    }
118                }
119                $(document).on('show.bs.modal', '.modal', function (e) {
120                    scaleModalTop($(e.target));
121                });
122                $(window).resize(function () {
123                    scaleModalTop($('.modal.in'));
124                });
125            });
126        </script>
126
127        <!-- end scale body -->
128
129        <!-- comodo ssl -->
130        <!--
130<script type="text/javascript">
131                        var ua = navigator.userAgent.toLowerCase(),
132                              platform = navigator.platform.toLowerCase();
133                              platformName = ua.match(/ip(?:ad|od|hone)/) ? 'ios' : (ua.match(/(?:webos|android)/) || platform.match(/mac|win|linux/) || ['other'])[0],
134                              isMobile = /ios|android|webos/.test(platformName);
135          if (!isMobile) {
136                        //<![CDATA[
137                        var tlJsHost = ((window.location.protocol == "https:") ? "https://secure.comodo.com/" : "http://www.trustlogo.com/");
138                        document.write(unescape("%3Cscript src='" + tlJsHost + "trustlogo/javascript/trustlogo.js' type='text/javascript'%3E%3C/script%3E"));
139                        //]]>
140                      }
141        </script>
141-->
142        <!-- end comodo ssl -->
143        
144                    <!-- ManyChat -->
145                    
146                    <!-- DO NOT MODIFY -->
147            <!-- Facebook Pixel Code -->
148                                            
148<script>
vendor: 971 bytes, lines 148-169
148
149                    !function (f, b, e, v, n, t, s) {
150                        if (f.fbq)
151                            return;
152                        n = f.fbq = function () {
153                            n.callMethod ?
154                                    n.callMethod.apply(n, arguments) : n.queue.push(arguments)
155                        };
156                        if (!f._fbq)
157                            f._fbq = n;
158                        n.push = n;
159                        n.loaded = !0;
160                        n.version = '2.0';
161                        n.queue = [];
162                        t = b.createElement(e);
163                        t.async = !0;
164                        t.src = v;
165                        s = b.getElementsByTagName(e)[0];
166                        s.parentNode.insertBefore(t, s)
167                    }(window,
168                            document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
169                    fbq('init', '
169344224015938192
vendor: 4 bytes, line 169
169'); 
169// Insert your pixel ID here.
170                    fbq('track', 'PageView');
171                </script>
171
172                                        <noscript>
173                <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id= &ev=PageView&noscript=1" />
174            </noscript>
175            <!-- End Facebook Pixel Code -->
176
177            <!-- Google Tag Manager -->
178            <!--
178<script>
vendor: 564 bytes, lines 178-188
178(function (w, d, s, l, i) {
179                    w[l] = w[l] || [];
180                w[l].push({'gtm.start':
181                            new Date().getTime(), event: 'gtm.js'});
182                var f = d.getElementsByTagName(s)[0],
183                        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
184                j.async = true;
185                j.src =
186                        'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
187                f.parentNode.insertBefore(j, f);
188                })(window, document, 'script', 'dataLayer', '
188GTM-NCPQ4MV
vendor: 16 bytes, lines 188-189
188');
189            
189</script>
189-->
190            <!-- End Google Tag Manager -->
191                            <!-- Google Tag Manager -->
192            
192<script>
vendor: 641 bytes, lines 192-204
192
193                (function (w, d, s, l, i) {
194                    w[l] = w[l] || [];
195                    w[l].push({'gtm.start':
196                                new Date().getTime(), event: 'gtm.js'});
197                    var
198                            f = d.getElementsByTagName(s)[0],
199                            j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
200                    j.async = true;
201                    j.src =
202                            'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
203                    f.parentNode.insertBefore(j, f);
204                })(window, document, 'script', 'dataLayer', '
204GTM-MN637VS
vendor: 16 bytes, lines 204-205
204');
205            
205</script>
205
206            <!-- End Google Tag Manager -->
207        
208        <!-- Start GTAG -->
209                    
209<script async src="https://www.googletagmanager.com/gtag/js?id=GTM-MN637VS"></script>
209
210            
210<script>
211                window.dataLayer = window.dataLayer || [];
212                function gtag() { 
213                    if (arguments[0] == 'event') {
214                        const gtagEvents = JSON.parse('{"mwe_login_success":1,"mwe_login_security":1,"mwe_register_success":1,"mwe_register_verify":1,"mwe_contact_success":1,"mwe_createwebfree":0,"mwe_createwebfree_success":1,"mwe_createwebsite_success":0,"purchase":1,"purchase_unpaid_transfer":1,"purchase_unpaid_gbprimepay":1,"purchase_usd":1,"purchase_usd_unpaid_transfer":1,"purchase_usd_unpaid_gbprimepay":1,"purchase_idr":1,"purchase_idr_unpaid_transfer":1,"purchase_idr_unpaid_faspay":1}');
215                        if (gtagEvents[arguments[1]] == '1') dataLayer.push(arguments);
216                    } else {
217                        dataLayer.push(arguments);
218                    }
219                };
220                gtag('js', new Date());
221                gtag('config', 'GTM-MN637VS');
222            </script>
222
223                <!-- End GTAG -->
224
225        <!-- Start Chatcone -->
226        <!-- 
226<script>var chatconewidget = { init: '739329165f2d429' }; </script>
226 -->
227        <!-- 
227<script src='https://widget.chatcone.com/js/widget.bundle.js' defer ></script>
227 -->
228        <!-- End Chatcone -->
229    </head>
230    <body class="v1">
231        
231<script>
232            const const_language_dir = '/web/en/';
233            const const_language_link = '/en';
234            const const_language_linkhome = '/en';
235            const validEmail = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,13}|[0-9]{1,3})(\]?)$/;
236            const validEnglish = /^[A-Za-z0-9 \.\/*\-+_@#$%\^&\(\)\[\]\'\"\;\:<>?\=\s]{1,}$/;
237            const validEnglishForName = /^[A-Za-z\s]{1,}$/;
238            const validEnglishCompanyname = /^[A-Za-z0-9\-\_\+\-\*\/\@\#\$\%\^\&\*\(\)\;\'\"\:\;\.\,\s]{1,}$/;
239            const validEnglishAddress = /^[A-Za-z0-9\-\_\+\-\*\/\@\#\$\%\^\&\*\(\)\;\'\"\:\;\.\,\s]{1,}$/;
240            const validDomain = /^[a-z0-9]{1}[a-zA-Z0-9\-]{0,59}[a-z0-9]{1}$/;
241            const validDomainName = /^[a-z0-9]{1}[a-zA-Z0-9\-]{0,59}[a-z0-9]{1}\.([a-zA-Z]{2,}|[a-zA-Z]{2,}\.[a-zA-Z]{2,})$/;
242            const validNumber = /^[0-9]{1,}$/;
243            const validPhoneNumber = /^[0-9\-+]{1,}$/;
244            const validIPv4 = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
245            const validIPv6 = /^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}:([0-9A-Fa-f]{1,4}:)?[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){4}:([0-9A-Fa-f]{1,4}:){0,2}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){3}:([0-9A-Fa-f]{1,4}:){0,3}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){2}:([0-9A-Fa-f]{1,4}:){0,4}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(([0-9A-Fa-f]{1,4}:){0,5}:((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(::([0-9A-Fa-f]{1,4}:){0,5}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|([0-9A-Fa-f]{1,4}::([0-9A-Fa-f]{1,4}:){0,5}[0-9A-Fa-f]{1,4})|(::([0-9A-Fa-f]{1,4}:){0,6}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:))$/;
246            const validPassword = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])([a-zA-Z0-9]+){8,}$/;
247        </script>
247
248
249                    <!-- Google Tag Manager (noscript) -->
250            <!--
vendor: 67 bytes, line 250
250<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
250GTM-NCPQ4MV
vendor: 112 bytes, lines 250-251
250"
251                              height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
251-->
252            <!-- End Google Tag Manager (noscript) -->
253            <!-- Google Tag Manager (noscript) -->
vendor: 96 bytes, lines 253-255
253
254            <noscript><iframe
255                src="https://www.googletagmanager.com/ns.html?id=
255GTM-MN637VS
vendor: 127 bytes, lines 255-258
255"
256                height="0" width="0"
257                style="display:none;visibility:hidden"></iframe></noscript>
258            
258<!-- End Google Tag Manager (noscript) -->
259                
260
261            <!-- Fixed Element -->
262            <div id="fb-root"></div>
263            <div id="divViewportLoading" class="">
264                <img alt="loading" class="animated pulse infinite" src="/web/en/images/logo/logo-blue/logo_mwe_minimal.png" style="top: calc(50% - 60px); left: calc(50% - 60px); position: absolute; max-width: 120px;" />
265            </div>
266            <!-- End Fixed Element -->
267
268            
269                
270<style type='text/css'>
271    :root {
272        --navlink-px: 15px;
273        --navlink-py: 14px;
274        --navbrand-p: 10px 15px;
275    }
276    @media (min-width: 1024px) {
277        :root {
278            --navlink-px: 6px;
279            --navlink-py: 8px;
280            --navbrand-p: 20px 6px 20px 6px;
281        }
282    }
283    @media (min-width: 1280px) {
284        :root {
285            --navlink-px: 8px;
286            --navlink-py: 10px;
287            --navbrand-p: 20px 8px 20px 8px;
288        }
289    }
290    @media (min-width: 1360px) {
291        :root {
292            --navlink-px: 12px;
293            --navlink-py: 10px;
294            --navbrand-p: 20px 12px 20px 12px;
295        }
296    }
297    @media (min-width: 1500px) {
298        :root {
299            --navlink-px: 18px;
300            --navlink-py: 10px;
301            --navbrand-p: 15px 0px 15px 15px;
302        }
303    }
304
305    header {
306        color: #333333;
307        font-size: 16px;
308        width: 100%;
309        z-index: 500;
310        position: fixed;
311        left: 0;
312        right: 0;
313        top: 0;
314    }
315    header .panel-collapse li>p,
316    header .menu-dropdown-right-container li > p {
317        font-size: 16px;
318        line-height: 1.2;
319    }
320    header .panel-collapse li>a,
321    header .menu-dropdown-right-container li > a {
322        font-size: 16px;
323        line-height: 1.2;
324    }
325    header.loading {
326        /* opacity: 0; */
327        visibility: hidden;
328    }
329    @media (min-width: 991px) and (max-width: 1199px) {
330        header {
331            font-size: 14px;
332        }
333    }
334    @media (max-width: 767px) {
335        header {
336            font-size: 16px;
337        }
338    }
339
340    header .container {
341        width: 96%;
342
343    }
344    @media (max-width: 1440px) {
345        header .container {
346            width: 98%;
347        }
348    }
349    @media (max-width: 1024px) {
350        header .container {
351            width: 100%;
352        }
353    }
354
355    .section-body {
356        transition: padding 0s;
357        padding-top: 105px;
358    }
359    @media (max-width: 1023px) {
360        .section-body {
361            padding-top: 55px;
362        }
363    }
364
365    @media (min-width: 1023px) and (max-width: 1920px) {
366        header {
367            transition: transform 0.2s ease;
368            -webkit-transition: transform 0.2s ease;
369            -moz-transition: transform 0.2s ease;
370            -o-transition: transform 0.2s ease;
371            transform: translate3d(0,0,0);
372            -webkit-transform: translate3d(0,0,0);
373            -moz-transform: translate3d(0,0,0);
374            -ms-transform: translate3d(0,0,0);
375            -o-transform: translate3d(0,0,0);
376        }
377        header.affix {
378            transform: translate3d(0,-35px,0);
379            -webkit-transform: translate3d(0,-35px,0);
380            -moz-transform: translate3d(0,-35px,0);
381            -ms-transform: translate3d(0,-35px,0);
382            -o-transform: translate3d(0,-35px,0);
383        }
384    }
385</style>
386<style type='text/css'>
387    /* Topbar */
388    .topbar {
389        padding: 5px 0px;
390        height: 35px;
391        max-height: 35px;
392        font-size: 16px;
393        background-color: #0B1C30;
394        color: #fff;
395    }
396    .topbar i { font-size: 14px; }
397    .topbar .dropdown-toggle {
398        font-size: 16px;
399    }
400    .topbar .dropdown-toggle:hover {
401        color: #28bee3;
402    }
403    .topbar .dropdown.open a.dropdown-toggle {
404        color: #28bee3;
405    }
406    .topbar .dropdown-menu {
407        font-size: 16px;
408        min-width: auto;
409        left: auto;
410        right: 0;
411    }
412    .topbar .dropdown-menu>li>a:hover,
413    .topbar .dropdown-menu>li>a:focus {
414        text-decoration: none;
415        color: #28bee3;
416        background-color: transparent;
417    }
418    @media (min-width: 1023px) {
419        .affix .topbar .dropdown-menu {
420            display: none;
421        }
422    }
423
424    .topbar-tel:hover { color: #17C7F3; }
425    .topbar-time { margin-left: 20px; }
426    .topbar-lang { display: inline-block; height: 28px; line-height: 25px;}
427
428    @media (max-width: 1023px) {
429        .topbar {
430            display: none;
431        }
432    }
433    @media (min-width: 1024px) {
434        .navbar-right .navbar-lang.panel {
435            display: none;
436        }
437    }
438</style>
439<style type='text/css'>
440    /* Navbar */
441    .navbar {
442        margin-bottom: 0;
443        border: 0;
444        border-radius: 0;
445        background: #FFF;
446        box-shadow: 0px 0px 15px rgba(0,0,0,0.125);
447        -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.125);
448    }
449
450
451    /* navbar-header */
452    /* navbar-brand */
453    .navbar-brand { /* 70px */
454        height: 70px;
455        transition: all 250ms;
456        -moz-transition: all 250ms;
457        -webkit-transition: all 250ms;
458        -o-transition: all 250ms;
459        transform: translate3d(0, 0, 0);
460        -webkit-transform: translate3d(0, 0, 0);
461        -moz-transform: translate3d(0, 0, 0);
462        -ms-transform: translate3d(0, 0, 0);
463        padding: var(--navbrand-p);
464    }
465    .navbar-brand > img {
466        height: 40px;
467        width: auto;
468        max-width: 100%;
469        object-fit: contain;
470    }
471    .navbar-brand > img.logo {
472        display: block;
473    }
474    @media (max-width: 991px) { /* 55px */
475        .navbar-brand { height: 55px; }
476    }
477    @media (max-width: 1499px) {
478        .navbar-brand > img { height: 30px; }
479    }
480    @media (max-width: 1023px) { /* 55px */
481        .navbar-brand >
481 img { height: 26px; }
482    }
483    @media (max-width: 359px) {
484        .navbar-brand > img { height: 22px; }
485    }
486    
487
488    /* navbar-toggle */
489    .navbar-toggle {
490        background: #FFF;
491        padding: 11.25px 15px;
492        margin-right: 0;
493    }
494
495    .mobile-header-cta {
496        display: none;
497    }
498    .navbar-toggle .icon-bar {
499        background: #333;
500        transition: all 150ms ease-in-out;
501    }
502    .navbar-toggle .icon-bar:nth-of-type(2) {
503        transform: rotate(45deg) translate3D(3px,5px,0);
504    }
505    .navbar-toggle .icon-bar:nth-of-type(3) {
506        opacity: 0;
507    }
508    .navbar-toggle .icon-bar:nth-of-type(4) {
509        transform: rotate(-45deg) translate3D(4px,-5px,0);
510    }
511    .navbar-toggle.collapsed .icon-bar:nth-of-type(2) {
512        top: 8px !important;
513        transform: rotate(0deg) !important
514    }
515    .navbar-toggle.collapsed .icon-bar:nth-of-type(3) {
516        top: 10px !important;
517        transform: rotate(0deg) !important;
518        opacity: 1
519    }
520    .navbar-toggle.collapsed .icon-bar:nth-of-type(4) {
521        top: 16px !important;
522        transform: rotate(0deg) !important
523    }
524
525
526
527    /* navbar-collapse */
528    header .navbar-collapse.collapse {
529        display: none !important
530    }
531    header .navbar-collapse.in {
532        display: block !important;
533        max-height: 80vh;
534        overflow-y: auto !important;
535        -webkit-overflow-scrolling: touch;
536    }
537    @media (min-width: 1024px) {
538        header .navbar-collapse.collapse {
539            display: block !important
540        }
541
542        header .navbar-header {
543            border-bottom:none !important;
544        }
545        
546    }
547    @media (max-width: 1023px) {
548        header .navbar-collapse {
549            width: 100%;
550            margin-right: 0 !important;
551            margin-left: 0 !important;
552            padding-right: 0;
553            padding-left: 0;
554        }
555        header .navbar-nav {
556            width: 100%;
557            margin: 0;
558        }
559        header .navbar-left {
560            float: none !important;
561        }
562        header .navbar-left.mobile-nav-left {
563            box-sizing: border-box;
564            padding-right: 15px;
565            padding-left: 15px;
566        }
567        header .navbar-right {
568            float: none !important;
569        }
570    }
571
572
573    /* dropdown-menu-collapse */
574
575
576
577
578    /* Main Menu */
579    header .navbar-header {
580        border-bottom: 1px solid #E0E0E0
581    }
582
583    header .navbar-nav>li {
584        float: none;
585        border-top: 1px solid #E0E0E0
586    }
587
588    header .navbar-nav>li:first-child {
589        border-top:none;
590    }
591    header .panel {
592        margin: 0;
593        border: none;
594        border-radius: 0;
595        -webkit-box-shadow: none;
596        box-shadow: none;
597    }
598    header .panel-heading {
599        padding: 0;
600        border: none;
601        border-radius: 0;
602    }
603    header .panel-heading > .nav-link {
604        display: block;
605        padding: var(--navlink-py) var(--navlink-px);
606        line-height: 1;
607        color: #333;
608        width: 100%;
609        cursor: pointer;
610    }
611    header li.active > .panel-heading > .nav-link {
612        color: #28bee3;
613        background: transparent;
614    }
615    header li .panel-heading > .nav-link:hover,
616    header li .panel-heading > .nav-link:focus {
617        color: #28bee3;
618        background: transparent;
619    }
620    header li.disabled > .panel-heading > .nav-link,
621    header li.disabled > .panel-heading > .nav-link:hover,
622    header li.disabled > .panel-heading > .nav-link:focus {
623        color: #a2a2a2;
624        cursor: auto;
625        pointer-events: none;
626    }
627    header .panel-heading i.fa-angle-down.pull-right {
628        line-height: inherit;
629        transition:  0.2s ease-out;
630        -webkit-transition: 0.2s ease-out;
631        -moz-transition: 0.2s ease-out;
632        -ms-transition: 0.2s ease-out;
633        -o-transition: 0.2s ease-out;
634    }
635    header .panel-heading:not(.collapsed) i.fa-angle-down.pull-right {
636        transform: rotateZ(180deg);
637        -webkit-transform: rotateZ(180deg);
638        -moz-transform: rotateZ(180deg);
639        -ms-transform: rotateZ(180deg);
640        -o-transform: rotateZ(180deg);
641    }
642    @media (min-width: 1024px) {
643        header .navbar,
644        header .navbar > .container,
645        header .navbar-collapse {
646            min-height: 70px;
647        }
648        header .navbar-nav>li {
649            float: left;
650            border-top: none;
651        }
652        header .panel-heading > .nav-link {
653            height: 70px;
654            line-height: 50px;
655            position: relative;
656        }
657        header li.active > .panel-heading > .nav-link {
658            border-bottom: 0;
659        }
660        header li.active > .panel-heading > .nav-link::after {
661            content: '';
662            position: absolute;
663            bottom: 0;
664            left: 0;
665            height: 4px;
666            background: #28bee3;
667        }
668        a.btn.btn-primary.btnTopBar.buttonCustomerTrial {
669            font-family: "Noto Sans Thai";
670            font-weight: bold;
671            font-size: 14px;
672            line-height: 22px;
673            padding: 5px 16px;
674            border-radius: 40px;
675            -moz-border-radius: 40px;
676            -webkit-border-radius: 40px;
677            text-decoration: none;
678            transition: all 150ms;
679            -webkit-transition: all 150ms;
680            -moz-transition: all 150ms;
681            -o-transition: all 150ms;
682            outline: 0px solid transparent;
683            outline-offset: 2px;
684            border: 2px solid;
685        }
686    }
687    @media (min-width: 1280px) {
688        header .panel-heading > .nav-link {
689            height: 70px;
690            line-height: 50px;
691        }
692    }
693    @media (max-width: 1023px) {
694        header li.active > .panel-heading > a.active {
695            color: #28bee3;
696        }
697    }
698
699
700
701    header .panel-collapse ul {
702        padding: 0;
703        margin: 0;
704        list-style: none;
705    }
706    header .panel-collapse ul li>a,
707    header .menu-dropdown-right-container li > a { 
708        display: block;
709        clear: both;
710        font-weight: 300;
711        line-height: 1;
712        color: #333;
713        white-space: normal;
714    }
715    header .panel-collapse ul li.active>a,
716    header .panel-collapse ul li>a:hover,
717    header .panel-collapse ul li>a:focus,
718    header .menu-dropdown-right-container li.active>a,
719    header .menu-dropdown-right-container li>a:hover,
720    header .menu-dropdown-right-container li>a:focus {
721        color: #28bee3;
722        background: transparent;
723    }
724    header .panel-collapse ul li.disabled>a,
725    header .panel-collapse ul li.disabled>a:hover,
726    header .panel-collapse ul li.disabled>a:focus,
727    header .menu-dropdown-right-container li.disabled>a,
728    header .menu-dropdown-right-container li.disabled>a:hover,
729    header .menu-dropdown-right-container li.disabled>a:focus {
730        color: #a2a2a2;
731        cursor: auto;
732        pointer-events: none;
733    }
734    header .panel-collapse ul li>a>i,
735    header .menu-dropdown-right-container li>a>i {
736        font-size: 15px;
737    }
738    header .panel-collapse ul.dropdown-expand li>p,
739    header .menu-dropdown-right-container li > p {
740        padding: 14px 15px;
741        margin: 0;
742    }
743    header .panel-collapse ul.dropdown-expand li>a,
744    header .menu-dropdown-right-container li > a {
745        display: block;
746        clear: both;
747        font-weight: 300;
748        line-height: 1;
749        white-space: normal;
750    }
751    header .panel-collapse ul.dropdown-expand li.active>a,
752    header .panel-collapse ul.dropdown-expand li>a:hover,
753    header .panel-collapse ul.dropdown-expand li>a:focus,
754    header .menu-dropdown-right-container li.active>a,
755    header .menu-dropdown-right-container li>a:hover,
756    header .menu-dropdown-right-container li>a:focus {
757        color: #28bee3;
758        background: transparent;
759    }
760    header .panel-collapse ul.dropdown-expand li.disabled>a,
761    header .panel-collapse ul.dropdown-expand li.disabled>a:hover,
762    header .panel-collapse ul.dropdown-expand li.disabled>a:focus,
763    header .menu-dropdown-right-container li.disabled>a,
764    header .menu-dropdown-right-container li.disabled>a:hover,
765    header .menu-dropdown-right-container li.disabled>a:focus {
766        color: #a2a2a2;
767        cursor: auto;
768        pointer-events: none;
769    }
770    @media (min-width: 1024px) {
771        header .panel-collapse {
772            position: absolute;
773            top: calc(100% - 10px);
774            left: 0;
775            z-index: 1000;
776            display: none;
777            float: left;
778            min-width: 160px;
779            /* padding: 0; */
780            /* margin: 0; */
781            list-style: none;
782            text-align: left;
783            background-color: #fff;
784            border: 0;
785            border-radius: 4px;
786            -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
787            box-shadow: 0 6px 12px rgba(0,0,0,0.175);
788            -webkit-background-clip: padding-box;
789            background-clip: padding-box;
790        }
791        header .navbar-lang .panel-collapse {
792            min-width: 80px;
793
794        }
795        header .panel-collapse .panel-body {
796            padding: 10px 0;
797        }
798        header .panel-collapse ul li>a,
799        header .menu-dropdown-right-container li>a {
800            padding: 5px 20px;
801            white-space: nowrap;
802        }
803        header .panel-collapse ul.dropdown-expand {
804            width: max-content;
805        }
806        header .panel-collapse ul.dropdown-expand > li {
807            display: inline-block;
808            width: auto;
809            padding: 0;
810            float: left;
811        }
812        header .panel-collapse ul.dropdown-expand li>p,
813        header .menu-dropdown-right-container li>p {
814            padding: 8px 24px;
815        }
816        header .panel-collapse ul.dropdown-expand li>a,
817        header .menu-dropdown-right-container li>a {
818            padding: 8px 24px;
819        }
820        header .collapsing {
821            display: block;
822            -webkit-transition: none;
823            -o-transition: none;
824            transition: none;
825        }
826    }
827    @media (max-width: 991px) {
828        header .panel-body {
829            padding: 0;
830        }
831        header .panel-collapse ul li>a {
832            padding: 14px 15px 14px 12px;
833            text-indent: 0;
834        }
835        header .panel-collapse ul.dropdown-expand li>a {
836            padding: 14px 15px 14px 12px;
837            text-indent: 0;
838        }
839    }
840
841    header #heading_allProducts {
842        border-left: 1px #4A556540 solid;
843        margin: 10px 0;
844        a {
845            padding-top: 0;
846            padding-bottom: 0;
847            height: fit-content;
848        }
849        @media (max-width:1023px) {
850            display: none;
851        }
852    }
853
854    header #collapse_allProducts {
855        /* border-radius: 20px; */
856        @media (max-width:1023px) {
857            display: none;
858        }
859        transform: translate3d(-673px, 0px, 0px);
860        .product {
861            display: flex; 
862            gap: 15px;
863        }
864        .subtitle{
865            word-break: break-word;
866            font-size: 14px;
867            color: #6A7282;
868            line-height: 20px;
869            @media (max-width: 1023px){
870                display: none;
871            }
872        }
873        .productTag{
874            font-size: 16px;
875            font-weight: 700;
876            margin-bottom: 5px;
877        }
878        .productDescription{
879            @media (max-width:1023px){
880                display: flex;
881                align-items: center;
882            }
883        }
884
885        ul>li>ul>li {
886            width: calc(50% - 0.5rem);
887        }
888        ul>li>ul {
889            display: flex;
890            flex-wrap: wrap;
891            justify-content: flex-start;
892            max-width: 800px;
893            width: auto;
894        }
895        
896        ul>li>a:hover{
897            background-color: #F8FAFC;
898            border-radius: 10px;
899            .greaterSign{
900                color: #ee3f4c;
901            }
902            .productTag{
903                color: #000;
904            }
905        }
906
907        .productLogo {
908            width: 24px; height: 24px;
909            @media (min-width:1024px){
910                width: 38px; height: 38px;
911                padding: 6px;
912                border: #D1D5DC 2px solid;
913                border-radius: 40%;
914                background-color: #fff;
915            }
916        }
917
918        .greaterSign{
919            width: 12px;
920            height: 12px;
921            flex-shrink: 0;
922            color: #d1d5dc;
923        }
924        #allProductHeader {
925            width: 100%;
926            @media (min-width: 1024px){
927                padding: 0 20px;
928            }
929            p {
930                padding: 0 10px;
931                font-weight: 900;
932                color: #99A1AF;
933            }
934            hr {
935                border: none; 
936                height: 1px; 
937                background: #ccc; 
938                margin: 10px 0;
939
940                @media (max-width: 1023px){
941                    display: none;
942                }
943            }
944
945        }
946    }
947
948
949
950
951
952    /* navbar-right */
953    header .navbar-right .dropdown-menu {
954        left: auto;
955        right: auto
956    }
957    header .navbar-lang i.fa-globe {
958        font-size: 14px;
959    }
960    header .navbar-account .nav-link i.fa-user-circle {
961        vertical-align: middle;
962        font-size: 22px;
963    }
964    header .navbar-account .dropdown-toggle .userEmail {
965        display: none;
966    }
967    header .navbar-account .dropdown-menu .userEmail {
968        display: block;
969    }
970    @media (min-width: 992px) {
971        header .navbar-account .panel-collapse {
972            left: auto;
973            right: 0;
974        }
975    }
976    header .btnTopBar {
977        float: left;
978        margin: 17px 0;
979    }
980    @media (max-width: 1023px) {
981        header .navbar-account .dropdown-toggle .userEmail {
982            display: inline-block;
983        }
984        header .navbar-account .dropdown-menu .userEmail {
985            display: none;
986        }
987    }
988</style>
989<style type='text/css'>
990    /* Overwrite Brake Point Bootstrap */
991    @media (max-width: 1023px) {
992        .navbar-toggle {
993            display: block !important;
994        }
995
996        .navbar-header::before,
997        .navbar-header::after {
998            content: none;
999            display: none;
1000        }
1001
1002        .btn-wrapper {
1003            display: flex;
1004            align-items: center;
1005            gap: 6px;
1006        }
1007
1008        header .container {
1009            padding-left: 0;
1010            padding-right: 0;
1011        }
1012
1013        .navbar-header {
1014            float: none;
1015            display: flex;
1016            align-items: center;
1017            justify-content: space-between;
1018            /* margin-left: 15px !important;
1019            margin-right: 15px !important; */
1020            padding-left: 15px !important;
1021            padding-right: 15px !important;
1022        }
1023    }
1024    @media (max-width: 991px) {
1025        .navbar .container {
1026            width: 100%;
1027        }
1028    }
1029    .line-topbar{
1030        max-height: 25px;
1031        margin-bottom: 3px;
1032    }
1033
1034
1035    #navtol-warp-so{
1036        display: none;
1037        background-color: #0B1C30;
1038        height: 40px;
1039        color: #ffffff;
1040        position: relative;
1041    }
1042
1043    @media screen and (max-width: 767px) {
1044        #navtol-warp-so{
1045            z-index: 9999999999;
1046            display:block;
1047            display: flex;
1048            align-items: center;
1049        }
1050        .section-body {
1051            padding-top: 95px;
1052        }
1053    }
1054    .fa-phone, .img-social-sticky{
1055        color: #17C7F3;
1056    }
1057    .row-header{
1058        display: flex;
1059        flex-direction: row;
1060        align-items: center;
1061    }
1062    .menu-head-dropdown-right {
1063        position: relative;
1064        width: 100%;
1065    }
1066    .menu-head-dropdown-right.active > a,
1067    .menu-head-dropdown-right:hover > a {
1068        color: #28bee3;
1069    }
1070    .menu-dropdown-right-container {
1071        display: none;
1072        position: absolute;
1073        left: 100%;
1074        top: -10px;
1075        z-index: 1000;
1076        min-width: 160px;
1077        padding: 10px 0;
1078        list-style: none;
1079        text-align: left;
1080        background-color: #fff;
1081        border: 0;
1082        border-radius: 4px;
1083        -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
1084        box-shadow: 0 6px 12px rgba(0,0,0,0.175);
1085        -webkit-background-clip: padding-box;
1086        background-clip: padding-box;
1087    }
1088    .menu-head-dropdown-right:hover .menu-dropdown-right-container {display: block;}
1089    @media (max-width: 1023px) {
1090        .menu-head-dropdown-right > a > i {
1091            display: none;
1092        }
1093        .menu-dropdown-right-container {
1094            display: block;
1095            width: 100%;
1096            position: static;
1097            background: transparent;
1098            box-shadow: none;
1099        }
1100        header .collapse ul li .panel-heading > a.has-link {
1101            width: fit-content;
1102        }
1103        header .collapse ul li .panel-heading > a.has-link i {
1104            display: none;
1105        }
1106        header .collapse ul li .panel-heading {
1107            display: flex;
1108            align-items: center;
1109        }
1110        .area-click-expand-mobile {
1111            flex-grow: 1;
1112            padding-right: 34px;
1113            margin-top: -20px;
1114            margin-bottom: -20px;
1115            cursor: pointer;
1116        }
1117        header .navbar-collapse > ul.navbar-left > li.panel > .panel-heading > .nav-link:not(.has-link) {
1118            padding-right: 16px;
1119        }
1120    }
1121    @media (min-width: 1024px) {
1122        .area-click-expand-mobile {
1123            display: none;
1124        }
1125    }
1126    @media (max-width: 991px) {
1127        header .menu-dropdown-right-container li>a {
1128            padding: 14px 0;
1129            text-indent: 30px !important;
1130        }
1131    }
1132
1133    .mobileAllproducts{
1134        position: relative;
1135        display:flex;
1136        justify-content: end;
1137        top: 5px;
1138
1139        #menu_text_mobileAllProducts{
1140            margin: 10px 0;
1141            padding: 0 10px;
1142            align-items: center;
1143            cursor: pointer;
1144        }
1145
1146        .menu{
1147            margin: 0;
1148        }
1149        /* --- Dropdown --- */
1150        .dropdown {
1151            list-style: none;
1152            position: relative;
1153        }
1154
1155        .dropdown-content {
1156            min-width: calc(100vw - 4rem);
1157            max-height: 50vh;
1158            position: absolute;
1159            left: calc(100% + 54px);
1160            background: white;
1161            border-radius: 4px;
1162            padding: 15px;
1163            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
1164            display: flex;
1165            opacity: 0;
1166            visibility: hidden;
1167            transform: translate3d(calc(-100% - 2rem), 0, 0);
1168            z-index: 999;
1169            
1170            @media (min-width: 768px) {
1171                min-width: calc(50vw - 4rem);
1172                transform: translate3d(calc(-100% - 5rem), 0, 0);
1173            }
1174        }
1175
1176        .dropdown-column {
1177            display: flex;
1178            flex-direction: column;
1179        }
1180
1181        .dropdown:focus-within .dropdown-content {
1182            opacity: 1;
1183            visibility: visible;
1184        }
1185        hr {
1186            border: none; 
1187            height: 1px; 
1188            background: #ccc; 
1189            margin: 10px 0;
1190        }
1191        .allProducts-content {
1192            overflow-y: auto;
1193            padding: 0;
1194
1195            li{
1196                list-style: none;
1197            }
1198            .productLogo {
1199                width: 38px; height: 38px;
1200                padding: 6px;
1201                border: #D1D5DC 2px solid;
1202                border-radius: 40%;
1203                background-color: #fff;
1204            }
1205
1206            .subtitle{
1207                word-break: break-word;
1208                font-size: 14px;
1209                color: #6A7282;
1210                line-height: 20px;
1211                width: 100%;
1212                margin: 0;
1213            }
1214            .productTag{
1215                font-size: 16px;
1216                font-weight: 700;
1217                margin-bottom: 0;
1218            }
1219            .greaterSign{
1220                width: 12px;
1221                height: 12px;
1222                flex-shrink: 0;
1223                color: #d1d5dc;
1224            }
1225            li>ul{
1226                display: flex;
1227                flex-wrap: wrap;
1228                padding: 0 10px;
1229                gap: 10px;
1230                .product {
1231                    gap: 15px;
1232                    display: flex;
1233                    
1234                    .productDescription{
1235                        width: 100%;
1236                    }
1237                }
1238                >li{
1239                    min-height: 75px;
1240                    width: 100%;
1241                    >a:hover{
1242                        background-color: #F8FAFC;
1243                        border-radius: 10px;
1244                        .greaterSign{
1245                            color: #ee3f4c;
1246                        }
1247                        .productTag{
1248                            color: #000;
1249                        }
1250                    }
1251                }
1252            }
1253        }
1254
1255        .contentHeader{
1256            p{
1257                padding: 0 10px;
1258                font-weight: 800;
1259                color: #99A1AF;
1260                font-size: 18px;
1261            }
1262        }
1263    }
1264
1265    @media (min-width:1024px){
1266        .mobileAllproducts{
1267            display: none;
1268        }
1269    }
1270
1271    @media (max-width:1023px) {
1272        .liAllProducts{
1273            display: none !important;
1274        }
1275    }
1276</style>
1277<style type='text/css'>
1278    @media (max-width: 1023px) {
1279
1280        .navbar-header .navbar-toggle {
1281            width: 38px;
1282            height: 38px;
1283            border-radius: 50%;
1284            background: #f1f5f8;
1285            color: #5d6b78;
1286            display: flex !important;
1287            align-items: center;
1288            justify-content: center;
1289            flex: none;
1290            cursor: pointer;
1291        }
1292
1293        .mobile-header-cta {
1294            display: inline-block;
1295            float: right;
1296            margin: 11px 10px;
1297            padding: 8px 14px;
1298            font-size: 13px;
1299        }
1300
1301        .navbar-toggle .fa-times { display: none; }
1302        .navbar-toggle.collapsed .fa-bars { display: inline-block; }
1303        .navbar-toggle.collapsed .fa-times { display: none; }
1304
1305        .navbar-toggle:not(.collapsed) .fa-bars { display: none; }
1306        .navbar-toggle:not(.collapsed) .fa-times { display: inline-block; }
1307
1308        header .navbar-collapse .panel-heading {
1309            position: relative;
1310        }
1311        /* header .navbar-collapse > ul.navbar-left > li.panel > .panel-heading {
1312            padding-left: 12px;
1313        } */
1314
1315        header .navbar-left .nav-topic-wrapper {
1316            display:flex;
1317            justify-content: space-between;
1318            align-items:center;
1319        }
1320
1321        header .navbar-left .nav-topic-wrapper .nav-topic-left {
1322            display: flex;
1323            align-items: center;
1324            gap:6px;
1325        }
1326        header .navbar-left .bar {
1327            width: 4px;
1328            height: 21px;
1329            border-radius: 3px;
1330            background: linear-gradient(180deg, #27c9f6, #0094e2);
1331            flex: none;
1332        }
1333        header .navbar-left .bar.highlight-prod-clicknext {
1334            background: linear-gradient(180deg, #7c5cff, #4b2ee6);
1335        }
1336        header .navbar-collapse > ul.navbar-left > li.panel > .panel-heading > .nav-link {
1337            font-size: 16.5px;
1338            font-weight: 800;
1339            color: #1c1f21;
1340            letter-spacing: -.2px;
1341            white-space: nowrap;
1342            padding: 14px 0;
1343        }
1344        header .navbar-collapse > ul.navbar-left > li.panel > .panel-heading .menu-badge {
1345            display: inline-block;
1346            margin-left: 6px;
1347            padding: 1px 8px;
1348            font-size: 10px;
1349            font-weight: 700;
1350            color: #fff;
1351            background: #FF4D4F;
1352            border-radius: 20px;
1353            vertical-align: middle;
1354        }
1355
1356        .mobile-menu-grid {
1357            display: grid;
1358            grid-template-columns: 1fr 1fr;
1359            column-gap: 12px;
1360            row-gap: 6px;
1361        }
1362
1363        .mobile-card {
1364            display: flex;
1365            align-items: center;
1366            gap: 11px;
1367            padding: 9px 8px;
1368            border-radius: 11px;
1369            cursor: pointer;
1370            min-height: 48px;
1371        }
1372        .mobile-card:hover,
1373        .mobile-card:focus {
1374            background: #F8FAFC;
1375            color: #1F2937;
1376        }
1377        .mobile-card .card-icon  {
1378            width: 38px;
1379            height: 38px;
1380            border-radius: 11px;
1381            background: #fff;
1382            color: #0098de;
1383            display: flex;
1384            align-items: center;
1385            justify-content: center;
1386            flex: none;
1387        }
1388
1389        /* utility modifier classes for icon variants */
1390        .mobile-card .card-icon.card-icon-title {
1391            background: #eaf8fe;
1392            color: #0098de;
1393        }
1394        .mobile-card .card-icon.card-icon-body {
1395            background: #0098de;
1396            color: #fff;
1397        }
1398        .mobile-card .card-icon.card-icon-disabled {
1399            background: #eef1f3;
1400            color: #a9b3bc;
1401        }
1402
1403        /* SVG icons should use currentColor for fill */
1404        .mobile-card .card-icon svg {
1405            width: 20px;
1406            height: 20px;
1407            fill: currentColor;
1408        }
1409
1410        /* Image icons: size + per-variant filter fallbacks for PNGs */
1411        .mobile-card .card-icon img {
1412            width: 20px;
1413            height: 20px;
1414            object-fit: contain;
1415            display: block;
1416        }
1417        .mobile-card .card-icon.card-icon-title img {
1418            filter: invert(32%) sepia(92%) saturate(2224%) hue-rotate(175deg) brightness(93%) contrast(98%);
1419        }
1420        .mobile-card .card-icon.card-icon-body img {
1421            filter: brightness(0) invert(1);
1422        }
1423        .mobile-card .card-icon.card-icon-disabled img {
1424            filter: grayscale(100%) brightness(80%);
1425        }
1426
1427        .mobile-card .card-body {
1428            min-width: 0;
1429        }
1430        .mobile-card .card-title {
1431            display: block;
1432            font-size: 13px;
1433            font-weight: 600;
1434            line-height: 1.3;
1435        }
1436        .mobile-card .card-desc {
1437            display: none;
1438        }
1439        .mobile-card .card-badge {
1440            display: none;
1441        }
1442
1443        /* disabled / coming-soon items */
1444        .mobile-card.is-disabled {
1445            pointer-events: none;
1446        }
1447        .mobile-card.is-disabled .card-icon {
1448            background: #eef1f3;
1449            color: #a9b3bc;
1450        }
1451        .mobile-card.is-disabled .card-title {
1452            color: #A2A2A2;
1453        }
1454        .mobile-card.is-disabled .card-badge {
1455            display: inline-block;
1456            position: static;
1457            margin-top: 2px;
1458            padding: 1px 8px;
1459            font-size: 10px;
1460            font-weight: 700;
1461            color: #A2A2A2;
1462            background: #F1F3F5;
1463            border-radius: 20px;
1464        }
1465        .mobile-card.is-disabled .card-body {
1466            display: flex;
1467            flex-direction: column;
1468            align-items: flex-start;
1469            gap: 3px;
1470        }
1471
1472        /* featured / highlighted card */
1473        .mobile-card.highlight-card {
1474            position: relative;
1475            display: flex;
1476            flex-direction: row;
1477            align-items: center;
1478            gap: 11px;
1479            padding: 13px;
1480            border-radius: 14px;
1481            background: linear-gradient(140deg, #2bcbf6, #0091e0);
1482            box-shadow: 0 8px 16px rgba(0, 145, 224, .28);
1483            cursor: pointer;
1484            min-width: 120px;
1485        }
1486        .mobile-card.highlight-card .card-icon {
1487            background: rgba(255,255,255,0.25);
1488            color: #fff;
1489        }
1490        .mobile-card.highlight-card .card-title {
1491            font-size: 13px;
1492            font-weight: 800;
1493            color: #fff;
1494            line-height: 1.25;
1495            text-wrap: pretty;
1496            padding-right: 24px;
1497        }
1498        .mobile-card.highlight-card .card-desc {
1499            display: block;
1500            color: rgba(255,255,255,0.85);
1501            font-size: 11px;
1502            line-height: 1.4;
1503            margin-top: 2px;
1504        }
1505        .mobile-card.highlight-card:hover,
1506        .mobile-card.highlight-card:focus {
1507            color: #fff;
1508            filter: brightness(1.03);
1509        }
1510
1511        .mobile-card.highlight-card.full-span {
1512            grid-column: 1 / -1;
1513            flex-direction: row;
1514            align-items: center;
1515        }
1516
1517        .mobile-card.highlight-card .card-badge {
1518            position: absolute;
1519            top: 9px;
1520            right: 9px;
1521            display: flex;
1522            align-items: center;
1523            gap: 3px;
1524            font-size: 9px;
1525            font-weight: 700;
1526            color: #fff;
1527            background: rgba(255, 255, 255, .24);
1528            padding: 2px 7px;
1529            border-radius: 999px;
1530        }
1531        .mobile-card.highlight-card .card-badge.card-badge-icon {
1532            position: absolute;
1533            top: 8px;
1534            right: 8px;
1535            width: 20px;
1536            height: 20px;
1537            border-radius: 999px;
1538            background: rgba(255, 255, 255, .24);
1539            display: flex;
1540            align-items: center;
1541            justify-content: center;
1542            color: #fff;
1543        }
1544
1545        /* --- bottom utility band: phone / LINE / language / login / CTA --- */
1546        .mobile-nav-footer {
1547            display: block;
1548            padding: 16px 0;
1549            border-top: 1px solid #E0E0E0;
1550        }
1551        .mobile-nav-footer .footer-row {
1552            display: flex;
1553            align-items: center;
1554            gap: 10px;
1555            margin-bottom: 12px;
1556            font-size: 14px;
1557            color: #333;
1558        }
1559
1560        .mobile-nav-footer .footer-row .line-mwe , .mobile-nav-footer .footer-row .ph
1560oneNumber {
1561            font-size: 14.5px;
1562            font-weight: 700;
1563            white-space: nowrap;
1564        }
1565
1566        .mobile-nav-footer .icon-footer {
1567            display: flex;
1568            justify-content: center;
1569            align-items: center;
1570            gap: 6px;
1571        }
1572
1573        .mobile-nav-footer .card-icon {
1574            width: 34px;
1575            height: 34px;
1576            border-radius: 11px;
1577            background: #eaf8fe;
1578            color: #0098de;
1579            display: flex;
1580            align-items: center;
1581            justify-content: center;
1582            flex: none;
1583        }
1584
1585        .mobile-nav-footer .card-icon .phone-icon {
1586            width: 18px;
1587            height: 18px;
1588            object-fit: contain;
1589            filter: invert(32%) sepia(92%) saturate(2224%) hue-rotate(175deg) brightness(93%) contrast(98%);
1590        }
1591
1592        .mobile-nav-footer .phone-lines {
1593            color: #8A98A6;
1594            font-weight: 400;
1595        }
1596
1597        .mobile-nav-footer .card-icon.linemwe  {
1598            background: #e7faf0 !important;
1599            color: #06c755 !important;
1600        }
1601        .mobile-nav-footer .footer-row i {
1602            color: #17C7F3;
1603            font-size: 16px;
1604            width: 18px;
1605            text-align: center;
1606        }
1607
1608        .mobile-nav-footer .footer-row .fa-comment {
1609            color:#06c755 !important;
1610        }
1611        .mobile-nav-footer .footer-row .footer-sub {
1612            display: block;
1613            font-size: 12px;
1614            color: #6A7282;
1615        }
1616        .mobile-nav-footer .footer-row img {
1617            height: 18px;
1618        }
1619        .mobile-nav-footer .footer-utility {
1620            display: flex;
1621            align-items: center;
1622            justify-content: space-between;
1623            margin-bottom: 14px;
1624        }
1625
1626        .mobile-nav-footer .pill-link {
1627            display: flex;
1628            align-items: center;
1629            gap: 6px;
1630            font-size: 13.5px;
1631            font-weight: 700;
1632            color: #5d6b78;
1633            cursor: pointer;
1634            white-space: nowrap;
1635        }
1636
1637        .mobile-nav-footer .fa-globe , .mobile-nav-footer .fa-sign-in-alt {
1638            font-size:17px;
1639        }
1640
1641        .mobile-nav-footer .login {
1642            color: #0094e2;
1643        }
1644        .mobile-nav-footer .footer-cta {
1645            display: block;
1646            width: 100%;
1647            text-align: center;
1648            padding: 12px;
1649            border-radius: 10px;
1650            font-weight: 700;
1651            color: #fff;
1652            background: linear-gradient(135deg, #2FCBFA 0%, #0FA0E8 100%);
1653            text-decoration: none;
1654        }
1655        .mobile-nav-footer .footer-cta:hover,
1656        .mobile-nav-footer .footer-cta:focus {
1657            color: #fff;
1658            filter: brightness(1.03);
1659        }
1660
1661        /* --- Clicknext cross-sell product grid --- */
1662
1663        .mobile-nav-products {
1664            padding:2px 2px 18px;
1665        }
1666        .mobile-nav-products .products-title {
1667            padding: 12px 0 4px;
1668            font-weight: 800;
1669            color: #99A1AF;
1670            font-size: 14px;
1671        }
1672        .mobile-nav-products .products-subtitle {
1673            margin: 0 0 10px;
1674            font-size: 12px;
1675            color: #6A7282;
1676        }
1677        .mobile-nav-products .products-grid {
1678            display: grid;
1679            grid-template-columns: repeat(2, 1fr);
1680            gap: 10px;
1681        }
1682        .mobile-nav-products .product-card {
1683            display: flex;
1684            align-items: center;
1685            justify-content: center;
1686            padding: 14px 8px;
1687            border: 1px solid #EAEAEA;
1688            border-radius: 10px;
1689            background: #fff;
1690        }
1691        .mobile-nav-products .product-card img {
1692            max-height: 22px;
1693            max-width: 100%;
1694        }
1695        .mobile-nav-products .product-card .product-fallback {
1696            font-size: 13px;
1697            font-weight: 700;
1698            color: #333;
1699            text-transform: capitalize;
1700        }
1701    }
1702
1703    @media (max-width: 359px) {
1704        .mobile-header-cta {
1705            font-size: 10px;
1706            padding: 7px 8px;
1707            margin-right: 4px;
1708        }
1709        .mobile-menu-grid > .mobile-card.highlight-card {
1710            grid-column: 1 / -1;
1711        }
1712
1713        .dropdown > .dropdown-toggle {
1714            font-size: 12px;
1715        }
1716    }
1717
1718    @media (min-width: 768px) and (max-width: 1023px) {
1719        .mobile-menu-grid:has(> :nth-child(3):last-child) {
1720            grid-template-columns: repeat(3, 1fr);
1721        }
1722    }
1723
1724    /* the footer band only ever applies on mobile/tablet — desktop gets
1725       its own right-hand nav (login/account/lang/CTA) restored below */
1726    @media (min-width: 1024px) {
1727        .mobile-nav-footer {
1728            display: none !important;
1729        }
1730    }
1731</style>
1732<style type='text/css'>
1733    /* ============================================================
1734       Desktop (>=1024px) vs. tablet/mobile (<=1023px) now render
1735       two entirely separate <ul> nav blocks:
1736         - .desktop-nav-left  loops $menuArr  (old, fully-styled)
1737         - .mobile-nav-left   loops $newMenuArr (new card design)
1738       ============================================================ */ 
1739    /* .desktop-nav-right.mobile-nav-right {
1740        display: block; 
1741    } */
1742    .desktop-nav-left,
1743    .desktop-nav-right {
1744        display: none;
1745    }
1746    @media (min-width: 1024px) {
1747        .desktop-nav-left,
1748        .desktop-nav-right {
1749            display: block;
1750        }
1751        .mobile-nav-left {
1752            display: none !important;
1753        }
1754    }
1755</style>
1756
1757<header class="affix-top text-bold">
1758        <div class="topbar">
1759        <div class="container">
1760            <div class="row d-flex row-header fs-nbt-14">
1761                <div class="col-xs-9">
1762                    <span class="topbar-tel">
1763                        <i class="fas fa-phone fa-rotate-90 mr-15"></i>
1764                                                    <a class="topPhone" href="tel:+6624830999">
1765                                +66 2483 0999                            </a>
1766                                                     
1767                        (30 line) 
1768                    </span>
1769                    <span class="topbar-time">Available Everyday 9.00 - 21.00</span>
1770                    <span class="topbar-time">
1771                        <a href="https://line.me/R/ti/p/@makewebeasy" target="_blank" rel="nofollow">
1772                            <img 
1773                                class="line-topbar" 
1774                                srcset="
1775                                    /web/en/images/social/LineMakewebeasy.png 480w,
1776                                    /web/en/images/logo/LineMakewebeasy_header2.png
1777                                " 
1778                                sizes="100vw"
1779                                alt="makewebeasy-line" 
1780                            />
1781                        </a>
1782                    </span>
1783                </div>
1784                <div class="col-xs-3 text-right">
1785                    <div class="topbar-lang">
1786                        <div class="dropdown">
1787                            <a href="javascript:void(0);" class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
1788                                                                                                    <i class="fa fa-globe">&nbsp;</i>EN                                                                                            </a>
1789                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
1790                                                                                                    <li><a href="/th">TH</a></li>
1791                                    <li><a href="/id">ID</a></li>
1792                                                                                            </ul>
1793                        </div>
1794                    </div>
1795                </div>
1796            </div>
1797        </div>
1798    </div>
1799    <nav class="navbar">
1800        <div class="container">
1801            <!-- brand logo -->
1802            <div id="navtol-warp-so" class="row fs-nbt-14">
1803                <div class="col-xs-12 text-center">
1804                    <span>
1805                        <i class="fas fa-phone fa-rotate-90 mr-15"></i>
1806                                                    <a class="link-stic-tol" href="tel:+6624830999" rel="nofollow" >
1807                            +66 2483 0999                            </a>
1808                                                     
1809                        (30 line) 
1810                    </span>
1811                    <a class="link-stic-line ml-10" href="https://line.me/R/ti/p/@makewebeasy" target="_blank" rel="nofollow" >
1812                        <img 
1813                            class="img-social-line" 
1814                            srcset="
1815                                /web/en/images/social/LineMakewebeasy.png 480w,
1816                                /web/en/images/logo/LineMakewebeasy_header2.png
1817                            " 
1818                            sizes="100vw"
1819                            alt="Line MWE" 
1820                            style="max-height: 26px;"
1821                        >
1822                    </a>
1823                </div>   
1824            </div>
1825           
1826            <div class="navbar-header">
1827                <a class="navbar-brand" href="/en">
1828                                        <img 
1829                        class="logo" 
1830                        src="/web/en/images/logo/logo-blue/MWE_LOGO_PNG.png"
1831                        width="2019"
1832                        height="334"
1833                        alt="MakeWebEasy" 
1834                    />
1835                </a>
1836                <div class="btn-wrapper">
1837                    <a class="btn btn-primary btnTopBar buttonCustomerTrial mobile-header-cta" href="javascript:void(0)">
1838                        Create Free Website                    </a>
1839                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navMenuCol">
1840                        <span class="sr-only">Toggle navigation</span>
1841                        <i class="far fa-bars fa-lg"></i>
1842                        <i class="fal fa-times fa-lg"></i>
1843                    </button>                    
1844                </div> 
1845            </div>
1846            <!-- menu navigation -->
1847            
1848            <div class="navbar-collapse collapse" id="navMenuCol">
1849                
1850                <ul class="nav navbar-nav navbar-left desktop-nav-left">
1851                                                                                    <li class="panel  home">
1852                                    <div class="panel-heading">
1853                                        <a class="nav-link" href="/en"
1854                                                                                        >
1855                                            Home                                        </a>
1856                                    </div>
1857                                </li>
1858
1859                                                                                
1860                                <li class="panel  ">
1861                                    <div class="panel-heading collapsed" role="tab" id="heading_product-service" data-toggle="collapse" data-parent="#accordion" data-target="#collapse_product-service" aria-expanded="false" aria-controls="collapse_product-service">
1862                                        <a class="nav-link" href="javascript:void(0);" id="menu_text_product-service">
1863                                            Services&nbsp;&nbsp;<i class="fal fa-angle-down pull-right"></i>                                        </a>
1864                                                                            </div>
1865                                    <div class="panel-collapse collapse" id="collapse_product-service" role="tabpanel" aria-labelledby="heading_product-service">
1866                                        <div class="panel-body">
1867                                            
1868                                                <ul class="dropdown-expand" role="menu">
1869                                                                                                            <li>
1870                                                            <p class="text-blue-darken">Website Packages</p>
1871                                                            <ul>
1872                                                                                                                                                                                                                                                                            <li class="">
1873                                                                            <a href="/en/website-package"
1874                                                                                >
1875                                                                                Pricing                                                                            </a>
1876                                                                        </li>
1877                                                                                                                                                                                                                                                                                <li class="">
1878                                                                            <a href="/en/website-design"
1879                                                                                >
1880                                                                                Website Design                                                                            </a>
1881                                                                        </li>
1882                                                                                                                                                                                                </ul>
1883                                                        </li>
1884                                                                                                            <li>
1885                                                            <p class="text-blue-darken">Additional Services</p>
1886                                                            <ul>
1887                                                                                                                                                                                                                                                                            <li class="">
1888                                                                            <a href="/en/google-workspace"
1889                                                                                >
1890                                                                                Google Worksp
1890ace                                                                            </a>
1891                                                                        </li>
1892                                                                                                                                                                                                                                                                                <li class="">
1893                                                                            <a href="/en/website-update"
1894                                                                                >
1895                                                                                Website Update                                                                            </a>
1896                                                                        </li>
1897                                                                                                                                                                                                                                                                                <li class="">
1898                                                                            <a href="/en/chatcone"
1899                                                                                >
1900                                                                                Chatcone                                                                            </a>
1901                                                                        </li>
1902                                                                                                                                                                                                </ul>
1903                                                        </li>
1904                                                                                                            <li>
1905                                                            <p class="text-blue-darken">Online Marketing Services</p>
1906                                                            <ul>
1907                                                                                                                                                                                                                                                                            <li class="">
1908                                                                            <a href="/en/google-shopping-ads"
1909                                                                                >
1910                                                                                Google Shopping Ads                                                                            </a>
1911                                                                        </li>
1912                                                                                                                                                                                                                                                                                <li class="">
1913                                                                            <a href="/en/google-my-business"
1914                                                                                >
1915                                                                                Google My Business                                                                            </a>
1916                                                                        </li>
1917                                                                                                                                                                                                                                                                                <li class="">
1918                                                                            <a href="/en/line-official-account"
1919                                                                                >
1920                                                                                LINE Official Account                                                                            </a>
1921                                                                        </li>
1922                                                                                                                                                                                                                                                                                <li class="">
1923                                                                            <a href="/en/conversion-tracking"
1924                                                                                >
1925                                                                                Conversion tracking                                                                            </a>
1926                                                                        </li>
1927                                                                                                                                                                                                </ul>
1928                                                        </li>
1929                                                                                                    </ul>
1930
1931                                                                                    </div>
1932                                    </div>
1933                                </li>
1934
1935                                                                                                                <li class="panel  template">
1936                                    <div class="panel-heading">
1937                                        <a class="nav-link" href="/en/templates"
1938                                                                                        >
1939                                            Templates                                        </a>
1940                                    </div>
1941                                </li>
1942
1943                                                                                                                <li class="panel  portfolio">
1944                                    <div class="panel-heading">
1945                                        <a class="nav-link" href="/en/portfolio"
1946                                                                                        >
1947                                            Portfolio                                        </a>
1948                                    </div>
1949                                </li>
1950
1951                                                                                
1952                                <li class="panel  ">
1953                                    <div class="panel-heading collapsed" role="tab" id="heading_payment" data-toggle="collapse" data-parent="#accordion" data-target="#collapse_payment" aria-expanded="false" aria-controls="collapse_payment">
1954                                        <a class="nav-link" href="javascript:void(0);" id="menu_text_payment">
1955                                            Payment&nbsp;&nbsp;<i class="fal fa-angle-down pull-right"></i>                                        </a>
1956                                                                            </div>
1957                                    <div class="panel-collapse collapse" id="collapse_payment" role="tabpanel" aria-labelledby="heading_payment">
1958                                        <div class="panel-body">
1959                                            
1960                                                <ul class="" role="menu">
1961                                                    
1962                                                                                                                    <li class="">
1963                                                                <a href="/en/howto-payment" 
1964                                                                    id="menu_text_payment_howto-payment"
1965                                                                    class=""
1966                                                                    >
1967                                                                    Payment Methods                                                                </a>
1968                                                            </li>
1969                                                                                                            
1970                                                                                                                    <li class="">
1971                                                                <a href="/en/online-payment" 
1972                                                                    id="menu_text_payment_payonline"
1973                                                                    class=""
1974                                                                    >
1975                                                                    Online Payment                                                                </a>
1976                                                            </li>
1977                                                                                                                                                            </ul>
1978
1979                                                                                    </div>
1980                                    </div>
1981                                </li>
1982
1983                                                                                
1984                                <li class="panel  ">
1985                                    <div class="panel-heading collapsed" role="tab" id="heading_blog" data-toggle="collapse" data-parent="#accordion" data-target="#collapse_blog" aria-expanded="false" aria-controls="collapse_blog">
1986                                        <a class="nav-link has-link" href="/en/blog" id="menu_text_blog">
1987                                            Blog&nbsp;&nbsp;<i class="fal fa-angle-down pull-right"></i>                                        </a>
1988                                                                                    <div class="area-cl
1988ick-expand-mobile"><i class="fal fa-angle-down pull-right"></i></div>
1989                                                                            </div>
1990                                    <div class="panel-collapse collapse" id="collapse_blog" role="tabpanel" aria-labelledby="heading_blog">
1991                                        <div class="panel-body">
1992                                            
1993                                                <ul class="" role="menu">
1994                                                    
1995                                                                                                                    <li class="">
1996                                                                <a href="/en/blog/category/บทความทั้งหมด/website/" 
1997                                                                    id="menu_text_blog_website"
1998                                                                    class="submenu-blog"
1999                                                                     target="_blank">
2000                                                                    Website                                                                </a>
2001                                                            </li>
2002                                                                                                            
2003                                                                                                                    <li class="">
2004                                                                <a href="/en/blog/category/บทความทั้งหมด/e-commerce/" 
2005                                                                    id="menu_text_blog_ecommerce"
2006                                                                    class="submenu-blog"
2007                                                                     target="_blank">
2008                                                                    E-commerce                                                                </a>
2009                                                            </li>
2010                                                                                                            
2011                                                                                                                    <li class="">
2012                                                                <a href="/en/blog/category/บทความทั้งหมด/google-ads/" 
2013                                                                    id="menu_text_blog_googleAds"
2014                                                                    class="submenu-blog"
2015                                                                     target="_blank">
2016                                                                    Google Ads                                                                </a>
2017                                                            </li>
2018                                                                                                            
2019                                                                                                                    <li class="">
2020                                                                <a href="/en/blog/category/บทความทั้งหมด/seo/" 
2021                                                                    id="menu_text_blog_seo"
2022                                                                    class="submenu-blog"
2023                                                                     target="_blank">
2024                                                                    SEO                                                                </a>
2025                                                            </li>
2026                                                                                                            
2027                                                                                                                    <li class="">
2028                                                                <a href="/en/blog/category/บทความทั้งหมด/marketing/" 
2029                                                                    id="menu_text_blog_marketing"
2030                                                                    class="submenu-blog"
2031                                                                     target="_blank">
2032                                                                    Marketing                                                                </a>
2033                                                            </li>
2034                                                                                                            
2035                                                                                                                    <li class="menu-head-dropdown-right">
2036                                                                <a href="javascript:void(0);"
2037                                                                    id="menu_text_blog_news"
2038                                                                    class="nav-link submenu-blog"
2039                                                                                                                                    >
2040                                                                    News<i class="fal fa-angle-right pull-right"></i>
2041                                                                </a>
2042                                                                <div class="menu-dropdown-right-container">
2043                                                                    <ul>
2044                                                                                                                                                    <li class="">
2045                                                                                <a href="/en/blog/category/news/activity/" 
2046                                                                                    id="menu_text_blog_news_activity"
2047                                                                                    class="submenu-blog"
2048                                                                                     target="_blank"                                                                                >
2049                                                                                    Activity                                                                                </a>
2050                                                                            </li>
2051                                                                                                                                                    <li class="">
2052                                                                                <a href="/en/blog/category/news/feature-update/" 
2053                                                                                    id="menu_text_blog_news_featureUpdate"
2054                                                                                    class="submenu-blog"
2055                                                                                     target="_blank"                                                                                >
2056                                                                                    Feature Update                                                                                </a>
2057                                                                            </li>
2058                                                                                                                                                    <li class="">
2059                                                                                <a href="/en/blog/category/news/course/" 
2060                                                                                    id="menu_text_blog_news_course"
2061                                                                                    class="submenu-blog"
2062                                                                                     target="_blank"                                                                                >
2063                                                                                    Course                                                                                </a>
2064                                                                            </li>
2065                                                                                                                                                    <li class="">
2066                                                                                <a href="/en/blog/category/news/promotion-news/" 
2067                                                                                    id="menu_text_blog_news_promotion"
2068                                                                                    class="submenu-blog"
2069                                                                                     target="_blank"                                                                                >
2070                                                                                    Promotion                                                                                </a>
2071                                                                            </li>
2072                                                                                                                                            </ul>
2073                                                                </div>
2074                                                            </li>
2075                                                                                                                                                            </ul>
2076
2077                                                                                    </div>
2078                                    </div>
2079                                </li>
2080
2081                                                                                
2082                                <li class="panel  ">
2083                                    <div class="panel-heading collapsed" role="tab" id="heading_help" data-toggle="collapse" data-parent="#accordion" data-target="#collapse_help" aria-expanded="false" aria-controls="collapse_help">
2084                                        <a class="nav-link" href="javascript:void(0);" id="menu_text_help">
2085                                            Help&nbsp;&nbsp;<i class="fal fa-angle-down pull-right"></i>                                        </a>
2086                                                                            </div>
2087                                    <div class="panel-collapse collapse" id="collapse_help" role="tabpanel" aria-labelledby="heading_help">
2088                                        <div class="panel-body">
2089                                            
2090                                                <ul class="" role="menu">
2091                                                    
2092                                                                                                                    <li class="">
2093                                                                <a href="/en/blog/manual-v4" 
2094                                                                    id="menu_text_help_usermanual_v4"
2095                                                                    class=""
2096                                                                    >
2097                                                                    Website Manual V.4 <label class="label label-sm label-gradient-primary px-8 mb-0 ml-8" style="height: 21px;"> New </label>                                                                </a>
2098                                                            </li>
2099                                                                                                            
2100                                                                                                                    <li class="">
2101                                                                <a href="/en/blog/manual" 
2102                                                                    id="menu_text_help_usermanual"
2103                                                                    class=""
2104                                                                    >
2105                                                                    Website Manual                                                                </a>
2106                                                            </li>
2107                                                                                                                                                            </ul>
2108
2109                                                                                    </div>
2110                                    </div>
2111                                </li>
2112
2113                                                                                
2114                                <li class="panel active ">
2115                                    <div class="panel-heading collapsed" role="tab" id="heading_contact" data-toggle="collapse" data-parent="#accordion" data-target="#collapse_contact" aria-expanded="false" aria-controls="collapse_contact">
2116                                        <a class="nav-link" href="javascript:void(0);" id="menu_text_contact">
2117                                            Contact Us&nbsp;&nbsp;<i class="fal fa-angle-down pull-right"></i>                                        </a>
2118                                                                            </div>
2119                                    <div class="panel-collapse collapse" id="collapse_contact" role="tabpanel" aria-labelledby="heading_contact">
2120                                        <div class="panel-body">
2121                                            
2122                                                <ul class="" role="menu">
2123                                                    
2124                                                                                                                    <li class="">
2125                                                                <a href="/en/contactus" 
2126                                                                    id="menu_text_contact_contactus"
2127                                                                    class=""
2128                                                                    >
2129                                                                    Contact Us                                                                </a>
2130                                                            </li>
2131                                                                                                            
2132                                                                                                                    <li class="active">
2133                                                                <a href="/en/about-makewebeasy" 
2134                                                                    id="menu_text_contact_about-makewebeasy"
2135                                                                    class=""
2136                                                                    >
2137                                                                    About Us                                                                </a>
2138                                                            </li>
2139                                                                                                            
2140                                                                                                                    <li class="">
2141                                                                <a href="/en/job-makewebeasy" 
2142                                                                    id="menu_text_contact_job-makewebeasy"
2143                                                                    class=""
2144                         
2144                                           >
2145                                                                    Career                                                                </a>
2146                                                            </li>
2147                                                                                                            
2148                                                                                                                    <li class="">
2149                                                                <a href="/en/partner" 
2150                                                                    id="menu_text_contact_partnerregist"
2151                                                                    class=""
2152                                                                    >
2153                                                                    Partner                                                                </a>
2154                                                            </li>
2155                                                                                                            
2156                                                                                                                    <li class="">
2157                                                                <a href="https://www.facebook.com/makewebeasy" 
2158                                                                    id="menu_text_contact_facebookpage"
2159                                                                    class=""
2160                                                                     target="_blank" rel="nofollow">
2161                                                                    Facebook                                                                </a>
2162                                                            </li>
2163                                                                                                                                                            </ul>
2164
2165                                                                                    </div>
2166                                    </div>
2167                                </li>
2168
2169                                                                                
2170                                <li class="panel  liAllProducts">
2171                                    <div class="panel-heading collapsed" role="tab" id="heading_allProducts" data-toggle="collapse" data-parent="#accordion" data-target="#collapse_allProducts" aria-expanded="false" aria-controls="collapse_allProducts">
2172                                        <a class="nav-link" href="javascript:void(0);" id="menu_text_allProducts">
2173                                            All Products&nbsp;&nbsp;<img src="/web/en/images/page/all-products-logo/allProducts.png" style="width: 20px; heigth: 20px;" />                                        </a>
2174                                                                            </div>
2175                                    <div class="panel-collapse collapse" id="collapse_allProducts" role="tabpanel" aria-labelledby="heading_allProducts">
2176                                        <div class="panel-body">
2177                                            
2178                                                <ul class="dropdown-expand" role="menu">
2179                                                    <div id="allProductHeader">
2180                                                        <p>Clicknext Platform</p>
2181                                                        <hr id="allProductsHRtag">
2182                                                    </div>
2183                                                                                                            <li>
2184                                                            <ul>
2185                                                                                                                                                                                                                                                                            <li class="">
2186                                                                            <a href="https://www.chatcone.com/"
2187                                                                                <sp
2187an class="product"> 
2188                                                                                    <img src="/web/en/images/page/all-products-logo/chatcone.png" class="productLogo"/> 
2189                                                                                    <div class="productDescription">
2190                                                                                        <p class="productTag">Chatcone</p>
2191                                                                                        <p class="subtitle">Integrated chat system and AI Chatbot to respond to customer chats from all channels on a single screen.</p>
2192                                                                                    </div>
2193                                                                                    <svg class="greaterSign" width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
2194                                                                                        <path d="M0.519165 9.58393L1.41302 10.4778L6.46308 5.42774L1.41302 0.377686L0.519165 1.27154L4.67536 5.42774L0.519165 9.58393Z" fill="currentcolor"></path>
2195                                                                                    </svg>
2196                                                                                </span>
2197                                                                            </a>
2198                                                                        </li>
2199                                                                                                                                                                                                                                                                                <li class="">
2200                                                                            <a href="https://smsmkt.com/"
2201                                                                                <span class="product"> 
2202                                                                                    <img src="/web/en/images/page/all-products-logo/smsmkt.png" class="productLogo"/> 
2203                                                                                    <div class="productDescription">
2204                                                                                        <p class="productTag">SMSMKT</p>
2205                                                                                        <p class="subtitle">SMS Marketing system with easy API connection, can be used in any format as you want.</p>
2206                                                                                    </div>
2207                                                                                    <svg class="greaterSign" width="7" height="11" viewB
2207ox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
2208                                                                                        <path d="M0.519165 9.58393L1.41302 10.4778L6.46308 5.42774L1.41302 0.377686L0.519165 1.27154L4.67536 5.42774L0.519165 9.58393Z" fill="currentcolor"></path>
2209                                                                                    </svg>
2210                                                                                </span>
2211                                                                            </a>
2212                                                                        </li>
2213                                                                                                                                                                                                                                                                                <li class="">
2214                                                                            <a href="https://www.keptpoint.com/"
2215                                                                                <span class="product"> 
2216                                                                                    <img src="/web/en/images/page/all-products-logo/keptpoint.png" class="productLogo"/> 
2217                                                                                    <div class="productDescription">
2218                                                                                        <p class="productTag">Keptpoint</p>
2219                                                                                        <p class="subtitle">Points collection system, redeem rewards via LINE OA, create a regular customer base for your business without having a POS.</p>
2220                                                                                    </div>
2221                                                                                    <svg class="greaterSign" width="7" height="11" viewB
2221ox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
2222                                                                                        <path d="M0.519165 9.58393L1.41302 10.4778L6.46308 5.42774L1.41302 0.377686L0.519165 1.27154L4.67536 5.42774L0.519165 9.58393Z" fill="currentcolor"></path>
2223                                                                                    </svg>
2224                                                                                </span>
2225                                                                            </a>
2226                                                                        </li>
2227                                                                                                                                                                                                                                                                                <li class="">
2228                                                                            <a href="https://www.etaxwise.com/"
2229                                                                                <span class="product"> 
2230                                                                                    <img src="/web/en/images/page/all-products-logo/etaxwise.png" class="productLogo"/> 
2231                                                                                    <div class="productDescription">
2232                                                                                        <p class="productTag">Etaxwise</p>
2233                                                                                        <p class="subtitle">E-Tax invoice & E-Receipt creation and management system makes tax document processing more convenient and easier.</p>
2234                                                                                    </div>
2235                                                                                    <svg class="greaterSign" width="7" height="11" viewB
2235ox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
2236                                                                                        <path d="M0.519165 9.58393L1.41302 10.4778L6.46308 5.42774L1.41302 0.377686L0.519165 1.27154L4.67536 5.42774L0.519165 9.58393Z" fill="currentcolor"></path>
2237                                                                                    </svg>
2238                                                                                </span>
2239                                                                            </a>
2240                                                                        </li>
2241                                                                                                                                                                                                                                                                                <li class="">
2242                                                                            <a href="https://www.clicknext.com/crm"
2243                                                                                <span class="product"> 
2244                                                                                    <img src="/web/en/images/page/all-products-logo/crmvolt.png" class="productLogo"/> 
2245                                                                                    <div class="productDescription">
2246                                                                                        <p class="productTag">CRMVolt</p>
2247                                                                                        <p class="subtitle">Sales management system for tracking customers and increasing sales opportunities — easily measure results with no leads slipping through.</p>
2248                                                                                    </div>
2249                                                                                    <svg class="greaterSign" width="7" height="11" viewB
2249ox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
2250                                                                                        <path d="M0.519165 9.58393L1.41302 10.4778L6.46308 5.42774L1.41302 0.377686L0.519165 1.27154L4.67536 5.42774L0.519165 9.58393Z" fill="currentcolor"></path>
2251                                                                                    </svg>
2252                                                                                </span>
2253                                                                            </a>
2254                                                                        </li>
2255                                                                                                                                                                                                </ul>
2256                                                        </li>
2257                                                                                                    </ul>
2258
2259                                                                                    </div>
2260                                    </div>
2261                                </li>
2262
2263                                                    
2264                </ul>
2265                <ul class="nav navbar-nav navbar-left mobile-nav-left">
2266                                            
2267                            
2268                            <li class="panel  ">
2269                                <div class="panel-heading collapsed" role="tab" id="heading_marketing" data-toggle="collapse" data-target="#collapse_marketing" aria-expanded="false" aria-controls="collapse_marketing">
2270                                    <a class="nav-link" href="javascript:void(0);" id="menu_text_marketing">
2271                                        <div class="nav-topic-wrapper">
2272                                            <div class="nav-topic-left">
2273                                                <span class="bar"></span>
2274                                                <span>Online Marketing Services</span>
2275                                                                                            </div>
2276                                            <div class="nav-topic-right">
2277                                                                                                <i class="fal fa-angle-down pull-right"></i>
2278                                            </div>
2279                                        </div>
2280                                    </a>
2281                                                                    </div>
2282
2283                                <div class="panel-collapse collapse" id="collapse_marketing" role="tabpanel" aria-labelledby="heading_marketing">
2284                                    <div class="panel-body">
2285
2286                                        
2287                                            
2288                                            <div class="mobile-menu-grid">
2289                                                
2290                                                    
2291                                                                                                            <a href="/en/google-shopping-ads" class="mobile-card highlight-card">
2292                                                    
2293                                                        <span class="card-icon card-icon-body"><img src="/web/en/images/icons/target.png"/></span>
2294                                                        <span class="card-body">
2295                                                                                                                            <span class="card-badge card-badge-icon">
2296                                                                    <i class="fas fa-star"></i>
2297                                                                </span>
2298                                                            
2299                                                            <span class="card-title">Google Shopping Ads</span>
2300
2301                                                                                                                    </span>
2302
2303                                                                                                            </a>
2304                                                    
2305                                                
2306                                                    
2307                                                                                                            <a href="/en/seo-suggestion" class="mobile-card highlight-card">
2308                                                    
2309                                                        <span class="card-icon card-icon-body"><img src="/web/en/images/icons/search.png"/></span>
2310                                                        <span class="card-body">
2311                                                                                                                            <span class="card-badge card-badge-icon">
2312                                                                    <i class="fas fa-star"></i>
2313                                                                </span>
2314                                                            
2315                                                            <span class="card-title">SEO Suggestion</span>
2316
2317                                                                                                                    </span>
2318
2319                                                                                                            </a>
2320                                                    
2321                                                
2322                                                    
2323                                                                                                            <a href="/en/google-my-business" class="mobile-card">
2324                                                    
2325                                                        <span class="card-icon card-icon-title"><img src="/web/en/images/icons/map-pin.png"/></span>
2326                                                        <span class="card-body">
2327                                                            
2328                                                            <span class="card-title">Google My Business</span>
2329
2330                                                                                                                    </span>
2331
2332                                                                                                            </a>
2333                                                    
2334                                                
2335                                                    
2336                                                                                                            <a href="/en/line-official-account" class="mobile-card">
2337                                                    
2338                                                        <span class="card-icon card-icon-title"><img src="/web/en/images/icons/message-square.png"/></span>
2339                                                        <span class="card-body">
2340                                                            
2341                                                            <span class="card-title">LINE Official Account</span>
2342
2343                                                                                                                    </span>
2344
2345                                                                                                            </a>
2346                                                    
2347                                                
2348                                                    
2349                                                                                                            <a href="/en/conversion-tracking" class="mobile-card">
2350                                                    
2351                                                        <span class="card-icon card-icon-title"><img src="/web/en/images/icons/chart-line.png"/></span>
2352                                                        <span class="card-body">
2353                                                            
2354                                                            <span class="card-title">Conversion tracking</span>
2355
2356                                                                                                                    </span>
2357
2358                                                                                                            </a>
2359                                                    
2360                                                                                            </div>
2361
2362                                                                            </div>
2363                                </div>
2364                            </li>
2365
2366                                                                    
2367                            
2368                            <li class="panel  ">
2369                                <div class="panel-heading collapsed" role="tab" id="heading_services" data-toggle="collapse" data-target="#collapse_services" aria-expanded="false" aria-controls="collapse_services">
2370                                    <a class="nav-link" href="javascript:void(0);" id="menu_text_services">
2371                                        <div class="nav-topic-wrapper">
2372                                            <div class="nav-topic-left">
2373                                                <span class="bar"></span>
2374                                                <span>Additional Services</span>
2375                                                                                            </div>
2376                                            <div class="nav-topic-right">
2377                                                                                                <i class="fal fa-angle-down pull-right"></i>
2378                                            </div>
2379                                        </div>
2380                                    </a>
2381                                                                    </div>
2382
2383                                <div class="panel-collapse collapse" id="collapse_services" role="tabpanel" aria-labelledby="heading_services">
2384                                    <div class="panel-body">
2385
2386                                        
2387                                            
2388                                            <div class="mobile-menu-grid">
2389                                                
2390                                                    
2391                                                                                                            <a href="/en/chatcone" class="mobile-card highlight-card full-span">
2392                                                    
2393                                                        <span class="card-icon card-icon-body"><img src="/web/en/images/icons/messages-square.png"/></span>
2394                                                        <span class="card-body">
2395                                                                                                                            <span class="card-badge card-badge-icon">
2396                                                                    <i class="fas fa-star"></i>
2397                                                                </span>
2398                                                            
2399                                                            <span class="card-title">Chatcone Integration</span>
2400
2401                                                                                                                    </span>
2402
2403                                                                                                            </a>
2404                                                    
2405                                                
2406                                                    
2407                                                                                                            <a href="/en/google-workspace" class="mobile-card">
2408                                                    
2409                                                        <span class="card-icon card-icon-title"><img src="/web/en/images/icons/mail.png"/></span>
2410                                                        <span class="card-body">
2411                                                            
2412                                                            <span class="card-title">Google Workspace</span>
2413
2414                                                                                                                    </span>
2415
2416                                                                                                            </a>
2417                                                    
2418                                                
2419                                                    
2420                                                                                                            <a href="/en/website-update" class="mobile-card">
2421                                                    
2422                                                        <span class="card-icon card-icon-title"><img src="/web/en/images/icons/refresh-cw.png"/></span>
2423                                                        <span class="card-body">
2424                                                            
2425                                                            <span class="card-title">Website Update</span>
2426
2427                                                                                                                    </span>
2428
2429                                                                                                            </a>
2430                                                    
2431                                                                                            </div>
2432
2433                                                                            </div>
2434                                </div>
2435                            </li>
2436
2437                                                                    
2438                            
2439                            <li class="panel  ">
2440                                <div class="panel-heading collapsed" role="tab" id="heading_template-mobile" data-toggle="collapse" data-target="#collapse_template-mobile" aria-expanded="false" aria-controls="collapse_template-mobile">
2441                                    <a class="nav-link" href="javascript:void(0);" id="menu_text_template-mobile">
2442                                        <div class="nav-topic-wrapper">
2443                                            <div class="nav-topic-left">
2444                                                <span class="bar"></span>
2445                                                <span>Templates & Examples</span>
2446                                                                                            </div>
2447                                            <div class="nav-topic-right">
2448                                                                                                <i class="fal fa-angle-down pull-right"></i>
2449                                            </div>
2450                                        </div>
2451                                    </a>
2452                                                                    </div>
2453
2454                                <div class="panel-collapse collapse" id="collapse_template-mobile" role="tabpanel" aria-labelledby="heading_template-mobile">
2455                                    <div class="panel-body">
2456
2457                                        
2458                                            
2459                                            <div class="mobile-menu-grid">
2460                                                
2461                                                    
2462                                                                                                            <a href="/en/templates" class="mobile-card">
2463                                                    
2464                                                        <span class="card-icon card-icon-title"><img src="/web/en/images/icons/layout-grid.png"/></span>
2465                                                        <span class="card-body">
2466                                                            
2467                                                            <span class="card-title">Templates</span>
2468
2469                                                                                                                    </span>
2470
2471                                                                                                            </a>
2472                                                    
2473                                                
2474                                                    
2475                                                                                                            <a href="/en/portfolio" class="mobile-card">
2476                                                    
2477                                                        <span class="card-icon card-icon-title"><img src="/web/en/images/icons/monitor.png"/></span>
2478                                                        <span class="card-body">
2479                                                            
2480                                                            <span class="card-title">Portfolio</span>
2481
2482                                                                                                                    </span>
2483
2484                                                                                                            </a>
2485                                                    
2486                                                                                            </div>
2487
2488                                                                            </div>
2489                                </div>
2490                            </li>
2491
2492                                                                    
2493                            
2494                            <li class="panel  ">
2495                                <div class="panel-heading collapsed" role="tab" id="heading_help-mobile" data-toggle="collapse" data-target="#collapse_help-mobile" aria-expanded="false" aria-controls="collapse_help-mobile">
2496                                    <a class="nav-link" href="javascript:void(0);" id="menu_text_help-mobile">
2497                                        <div class="nav-topic-wrapper">
2498                                            <div class="nav-topic-left">
2499                                                <span class="bar"></span>
2500                                                <span>Help</span>
2501                                                                                            </div>
2502                                            <div class="nav-topic-right">
2503                                                                                                <i class="fal fa-angle-down pull-right"></i>
2504                                            </div>
2505                                        </div>
2506                                    </a>
2507                                                                    </div>
2508
2509                                <div class="panel-collapse collapse" id="collapse_help-mobile" role="tabpanel" aria-labelledby="heading_help-mobile">
2510                                    <div class="panel-body">
2511
2512                                        
2513                                            
2514                                            <div class="mobile-menu-grid">
2515                                                
2516                                                    
2517                                                                                                            <a href="/en/blog/manual-v4/" class="mobile-card">
2518                                                    
2519                                                        <span class="card-icon card-icon-title"><img src="/web/en/images/icons/book-open.png"/></span>
2520                                                        <span class="card-body">
2521                                                            
2522                                                            <span class="card-title">Website Manual V.4</span>
2523
2524                                                                                                                    </span>
2525
2526                                                                                                            </a>
2527                                                    
2528                                                
2529                                                    
2530                                                                                                            <a href="/en/blog/manual-v4/" class="mobile-card">
2531                                                    
2532                                                        <span class="card-icon card-icon-title"><img src="/web/en/images/icons/book.png"/></span>
2533                                                        <span class="card-body">
2534                                                            
2535                                                            <span class="card-title">Website Manual</span>
2536
2537                                                                                                                    </span>
2538
2539                                                                                                            </a>
2540                                                    
2541                                                                                            </div>
2542
2543                                                                            </div>
2544                                </div>
2545                            </li>
2546
2547                                                                    
2548                            
2549                            <li class="panel  ">
2550                                <div class="panel-heading collapsed" role="tab" id="heading_other" data-toggle="collapse" data-target="#collapse_other" aria-expanded="false" aria-controls="collapse_other">
2551                                    <a class="nav-link" href="javascript:void(0);" id="menu_text_other">
2552                                        <div class="nav-topic-wrapper">
2553                                            <div class="nav-topic-left">
2554                                                <span class="bar"></span>
2555                                                <span>More</span>
2556                                                                                            </div>
2557                                            <div class="nav-topic-right">
2558                                                                                                <i class="fal fa-angle-down pull-right"></i>
2559                                            </div>
2560                                        </div>
2561                                    </a>
2562                                                                    </div>
2563
2564                                <div class="panel-collapse collapse" id="collapse_other" role="tabpanel" aria-labelledby="heading_other">
2565                                    <div class="panel-body">
2566
2567                                        
2568                                            
2569                                            <div class="mobile-menu-grid">
2570                                                
2571                                                    
2572                                                                                                            <a href="/en/blog" class="mobile-card">
2573                                                    
2574                                                        <span class="card-icon card-icon-title"><img src="/web/en/images/icons/newspaper.png"/></span>
2575                                                        <span class="card-body">
2576                                                            
2577                                                            <span class="card-title">Blog</span>
2578
2579                                                                                                                    </span>
2580
2581                                                                                                            </a>
2582                                                    
2583                                                
2584                                                    
2585                                                                                                            <a href="/en/howto-payment" class="mobile-card">
2586                                                    
2587                                                        <span class="card-icon card-icon-title"><img src="/web/en/images/icons/credit-card.png"/></span>
2588                                                        <span class="card-body">
2589                                                            
2590                                                            <span class="card-title">Payment Methods</span>
2591
2592                                                                                                                    </span>
2593
2594                                                                                                            </a>
2595                                                    
2596                                                
2597                                                    
2598                                                                                                            <a href="/en/online-payment" class="mobile-card">
2599                                                    
2600                                                        <span class="card-icon card-icon-title"><img src="/web/en/images/icons/wallet.png"/></span>
2601                                                        <span class="card-body">
2602                                                            
2603                                                            <span class="card-title">Online Payment</span>
2604
2605                                                                                                                    </span>
2606
2607                                                                                                            </a>
2608                                                    
2609                                                
2610                                                    
2611                                                                                                            <a href="/en/contactus" class="mobile-card">
2612                                                    
2613                                                        <span class="card-icon card-icon-title"><img src="/web/en/images/icons/phone-call.png"/></span>
2614                                                        <span class="card-body">
2615                                                            
2616                                                            <span class="card-title">Contact Us</span>
2617
2618                                                                                                                    </span>
2619
2620                                                                                                            </a>
2621                                                    
2622                                                                                            </div>
2623
2624                                                                            </div>
2625                                </div>
2626                            </li>
2627
2628                                                                    
2629                            
2630                            <li class="panel  ">
2631                                <div class="panel-heading collapsed" role="tab" id="heading_prod-clicknext" data-toggle="collapse" data-target="#collapse_prod-clicknext" aria-expanded="false" aria-controls="collapse_prod-clicknext">
2632                                    <a class="nav-link" href="javascript:void(0);" id="menu_text_prod-clicknext">
2633                                        <div class="nav-topic-wrapper">
2634                                            <div class="nav-topic-left">
2635                                                <span class="bar highlight-prod-clicknext"></span>
2636                                                <span>All Products</span>
2637                                                                                            </div>
2638                                            <div class="nav-topic-right">
2639                                                                                                <i class="fal fa-angle-down pull-right"></i>
2640                                            </div>
2641                                        </div>
2642                                    </a>
2643                                                                    </div>
2644
2645                                <div class="panel-collapse collapse" id="collapse_prod-clicknext" role="tabpanel" aria-labelledby="heading_prod-clicknext">
2646                                    <div class="panel-body">
2647
2648                                        
2649                                            <div class="mobile-nav-products">
2650                                                                                                    <p class="products-subtitle">Clicknext Platform</p>
2651                                                                                                <div class="products-grid">
2652                                                                                                                                                                    <a class="product-card" href="https://www.chatcone.com/" target="_blank" rel="nofollow">
2653                                                                                                                            <img src="/web/en/images/product_clicknext/chatcone.png" alt="Chatcone" />
2654                                                                                                                    </a>
2655                                                                                                                                                                    <a class="product-card" href="https://www.keptpoint.com/" target="_blank" rel="nofollow">
2656                                                                                                                            <img src="/web/en/images/product_clicknext/keptpoint.png" alt="Keptpoint" />
2657                                                                                                                    </a>
2658                                                                                                                                                                    <a class="product-card" href="https://www.clicknext.com/crm" target="_blank" rel="nofollow">
2659                                                                                                                            <img src="/web/en/images/product_clicknext/crmvolt.png" alt="Crmvolt" />
2660                                                                                                                    </a>
2661                                                                                                                                                                    <a class="product-card" href="https://smsmkt.com/" target="_blank" rel="nofollow">
2662                                                                                                                            <img src="/web/en/images/product_clicknext/smsmkt.png" alt="Smsmkt" />
2663                                                                                                                    </a>
2664                                                                                                                                                                    <a class="product-card" href="https://www.etaxwise.com/" target="_blank" rel="nofollow">
2665                                                                                                                            <img src="/web/en/images/product_clicknext/etaxwise.png" alt="Etaxwise" />
2666                                                                                                                    </a>
2667                                                                                                    </div>
2668                                            </div>
2669
2670                                                                            </div>
2671                                </div>
2672                            </li>
2673
2674                                                                <!-- Phone / LINE / language / login / 
2674signup CTA (mobile/tablet only) -->
2675                    <div class="mobile-nav-footer">
2676                        <div class="footer-row">
2677                            <div class="icon-footer">
2678                                <div class="card-icon card-icon-title">
2679                                    <img
2680                                        class="phone-icon"
2681                                        src="/web/en/images/icons/phone.png"
2682                                        alt=""
2683                                        aria-hidden="true"
2684                                    />
2685                                </div>
2686                                <span>
2687                                    <span class="phoneNumber">
2688                                                                                    <a href="tel:+6624830999">
2689                                                +66 2483 0999                                            </a>
2690                                                                                                                            <span class="phone-lines">(30 lines)</span>
2691                                    </span>
2692                                    <span class="footer-sub">Available Everyday 9.00 - 21.00</span>
2693                                </span>
2694                            </div>
2695                        </div>
2696                        <div class="footer-row">
2697                            <a href="https://line.me/R/ti/p/@makewebeasy" target="_blank" rel="nofollow" class="icon-footer">
2698                                <div class="card-icon linemwe">
2699                                    <i class="far fa-comment"></i>
2700                                </div>
2701                                <span class="line-mwe">@makewebeasy</span>
2702                            </a>
2703                        </div>
2704                        <div class="footer-utility">
2705                            <div class="topbar-lang">
2706                                <div class="dropdown">
2707                                    <a href="javascript:void(0);" class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
2708                                                                                                                            <i class="fa fa-globe">&nbsp;</i>EN                                                                                                                    </a>
2709                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
2710                                                                                                                            <li><a href="/th">TH</a></li>
2711                                            <li><a href="/id">ID</a></li>
2712                                                                                                                    </ul>
2713                                </div>
2714                            </div>
2715                                                            <a class="pill-link login" href="/en/login">
2716                                    <i class="fal fa-sign-in-alt">&nbsp;</i>Login                                </a>
2717                                                    </div>
2718                        <a class="footer-cta buttonCustomerTrial" href="javascript:void(0)">
2719                            Create Free Website                        </a>
2720                    </div>
2721                </ul>
2722                <ul class="nav navbar-nav navbar-right desktop-nav-right mobile-nav-right">
2723                    <li class="navbar-lang panel">
2724                        <div class="panel-heading collapsed" role="tab" id="heading_lang" data-toggle="collapse" data-target="#collapse_lang" aria-expanded="false" aria-controls="collapse_lang">
2725                            <a href="javascript:void(0);" class="">
2726                                                                                                    <i class="fa fa-globe">&nbsp;</i>EN                                                                                                <i class="fal fa-angle-down pull-right"></i>
2727                            </a>
2728                        </div>
2729                        <div class="panel-collapse collapse" id="collapse_lang" role="tabpanel" aria-labelledby="heading_lang">
2730                            <div class="panel-body">
2731                                <ul class="" role="menu">
2732                                                                                                                <li role="presentation"><a href="/th">TH</a></li>
2733                                        <li role="presentation"><a href="/id">ID</a></li>
2734                                                                                                        </ul>
2735                            </div>
2736                        </div>
2737                    </li>
2738                                            <li class="navbar-login">
2739                            <div class="panel-heading">
2740                                <a class="nav-link text-blue" href="/en/login">Login</a>
2741                            </div>
2742                        </li>
2743                                        <li>
2744                        <a class="btn btn-primary btnTopBar buttonCustomerTrial" href="javascript:void(0)">
2745                            Create Free Website                        </a>
2746                    </li>
2747                </ul>
2748            </div>
2749        </div>
2750    </nav>
2751</header>
2752
2753<script type="text/javascript">
2754    jQuery(document).ready(function() {
2755        jQuery("#menu_text_blog").on('click', function (e) {
2756            e.preventDefault();
2757            let url = e.target.href;
2758            _lt('send', 'cv', {
2759                type: 'blog'
2760            },['b7b4d0f5-83dd-4d7c-bd6f-fde814f2c9e5']);
2761            window.open(url);
2762        })
2763        jQuery(".submenu-blog").on('click', function (e) {
2764            e.preventDefault();
2765            let url = e.target.href;
2766            if (url && url != 'javascript:void(0);') {
2767                _lt('send', 'cv', {
2768                    type: 'blog'
2769                },['b7b4d0f5-83dd-4d7c-bd6f-fde814f2c9e5']);
2770                window.open(url);
2771            }
2772        })
2773    });
2774</script>
2774
2775                <div class="section-body">
2776                                        <!--<a href="javascript:void(0);" id="toTop" class="back-to-top" style="display: none;">
2777                        <i class="fa fa-arrow-up fa-inverse"></i>
2778                    </a>-->
2779                    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="modal_standard"></div>
2780
2781<script type="text/javascript">
2782    jQuery('.modal').on('hidden.bs.modal', function () {
2783        jQuery(this).html('');
2784    });
2785    function showModalBS(isClose, path, size) {
2786        var loaderCSS = '<div class="loader" style="width: 50px;"><svg class="circular" viewBox="25 25 50 50"><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="4" stroke-miterlimit="10"/></svg></div>';
2787
2788        if (size == 'small') {
2789            var siz = 'sm';
2790        } else if (size == 'medium') {
2791            var siz = 'md';
2792        } else if (size == 'large') {
2793            var siz = 'lg';
2794        } else {
2795            var siz = 'md';
2796        }
2797
2798        if (isClose == 1) {
2799            var backdrop = true;
2800        } else if (isClose == 0) {
2801            var backdrop = 'static';
2802        } else {
2803            var backdrop = true;
2804        }
2805
2806        jQuery('#modal_standard').html('<div class="modal-dialog modal-' + siz + '"><div class="modal-content">' + loaderCSS + '</div></div>');
2807        jQuery('#modal_standard').modal({
2808            backdrop: backdrop,
2809            /* remote: path,*/
2810            show: true,
2811            keyboard: true
2812        });
2813        jQuery('#modal_standard').find('.modal-content').load(path, function () {});
2814    }
2815</script>
2815<div class="divBodyBox"><link rel="stylesheet" href="/web/en/css/page/about-makewebeasy.css" />
2816
2817
2818<section class="sectionAbout1">
2819    <div class="container">
2820        <div class="row">
2821            <div id="aboutusHead">
2822                <div class="col-xs-12 text-black hidden-xs hidden-sm">
2823                    <h1 class="fs-display-l fw-bold">About us.</h1>
2824                    <h2 class="fs-display-s">ClickNext Co., Ltd</h2>
2825                    <h5 class="fs-heading-m">The leader in website & online marketing services and comprehensive SMS marketing for all business types, From small to large, Through persistent technological advancement.</h5>
2826                </div>
2827            </div>
2828        </div>
2829    </div>
2830</section>
2831
2832<section class="sectionAbout1-2">
2833    <div class="container">
2834        <div class="row">
2835            <div class="col-xs-12 text-black text-center hidden-md hidden-lg hidden-xl">
2836                <h1 class="fs-display-l fw-bold">About us.</h1>
2837                <h2 class="fs-display-l fw-bold">ClickNext Co., Ltd</h2>
2838                <h5 class="fs-heading-m">The leader in website & online marketing services and comprehensive SMS marketing for all business types, From small to large, Through persistent technological advancement.</h5>
2839            </div>
2840        </div>
2841    </div>
2842</section>
2843
2844<section class="sectionAbout2">
2845    <div class="container">
2846        <!-- The Timeline -->
2847        <div class="row">
2848            <div class="col-xs-12">
2849                <div class="text-center">
2850                    <h2><span><img src="/web/en/images/logo/logomwe.png"></span>
2851                        <span class="text-black fs-display-m">Timeline</span>
2852                    </h2>
2853                </div>
2854            </div>
2855        </div>
2856
2857        <ul class="timeline">
2858
2859            <!-- Item 1 -->
2860            <li>
2861                <div class="direction-r">
2862                    <div class="flag-wrapper">
2863                        <span class="flag fs-body-s"><b>Established in</b></span>
2864                        <span class="time-wrapper"><span class="time fs-body-s"><b>2007</b></span></span>
2865                    </div>
2866                    <div class="desc text-black fs-body-m">MakeWebEasy was founded in 2007 to assist SME in building online stores in a more cost-effective and convenient manner.</div>
2867                </div>
2868                <div class="timeBot"></div>
2869            </li>
2870
2871            <!-- Item 2 -->
2872            <li>
2873                <div class="direction-l">
2874                    <div class="flag-wrapper">
2875                        <span class="flag fs-body-s"><b>Additional servers</b></span>
2876                        <span class="time-wrapper"><span class="time fs-body-s"><b>2009</b></span></span>
2877                    </div>
2878                    <div class="desc text-black fs-body-m">Servers added in foreign countries to increase the capabilities of customers conducting business in overseas.</div>
2879                </div>
2880                <div class="timeBot"></div>
2881            </li>
2882
2883            <!-- Item 3 -->
2884            <li>
2885                <div class="direction-r">
2886                    <div class="flag-wrapper">
2887                        <span class="flag fs-body-s"><b>Online Payment Channels</b></span>
2888                        <span class="time-wrapper"><span class="time fs-body-s"><b>2011</b></span></span>
2889                    </div>
2890                    <div class="desc text-black fs-body-m">Included Counter Service in addition to the existing payment channel of paying by credit cards.</div>
2891                </div>
2892                <div class="timeBot"></div>
2893            </li>
2894
2895            <!-- Item 4 -->
2896            <li>
2897                <div class="direction-l">
2898                    <div class="flag-wrapper">
2899                        <span class="flag fs-body-s"><b>Responsive Design</b></span>
2900                        <span class="time-wrapper"><span class="time fs-body-s"><b>2015</b></span></span>
2901                    </div>
2902                    <div class="desc text-black fs-body-m">Responsive Web Design revealed: a system allowing websites to support all display types in all devices <br> (e.g. smartphones, tablets and PC).</div>
2903                </div>
2904                <div class="timeBot"></div>
2905            </li>
2906
2907            <!-- Item 5 -->
2908            <li>
2909                <div class="direction-r">
2910                    <div class="flag-wrapper">
2911                        <span class="flag fs-body-s"><b>Online Marketing Service</b></span>
2912                        <span class="time-wrapper"><span class="time fs-body-s"><b>2017</b></span></span>
2913                    </div>
2914                    <div class="desc text-black fs-body-m">Providing online marketing services to support customers business to growth</div>
2915                </div>
2916                <div class="timeBot"></div>
2917            </li>
2918
2919            <!-- Item 6 -->
2920            <li>
2921                <div class="direction-l">
2922                    <div class="flag-wrapper flag_indo">
2923                        <span class="flag fs-body-s"><b>MakeWebEasy Indonesia</b></span>
2924                        <span class="time-wrapper"><span class="time fs-body-s"><b>February, 2021</b></span></span>
2925                    </div>
2926                    <div class="desc text-black desc_indo fs-body-s">Expanding service area to Indonesia We are committed to providing services throughout Southeast Asia.</div>
2927                </div>
2928                <div class="timeBot"></div>
2929            </li>
2930
2931            <!-- Item 7 -->
2932            <li>
2933                <div class="direction-r">
2934                    <div class="flag-wrapper">
2935                        <span class="flag fs-body-s"><b>Google Shopping Ads</b></span>
2936                        <span class="time-wrapper"><span class="time fs-body-s"><b>June, 2021</b></span></span>
2937                    </div>
2938                    <div class="desc text-black fs-body-m">Enable the Google Shopping ads feature Website owners can promote their products to increase sales.</div>
2939                </div>
2940                <div class="timeBot"></div>
2941            </li>
2942
2943            <!-- Item 8 -->
2944            <li>
2945                <div class="commingBox-l hidden-xs">
2946                    <span class="text-red fs-body-s"><b>Coming Soon</b></span>
2947                </div>
2948                <div class="direction-l direction-lc">
2949                    <div class="flag-wrapper">
2950                        <span class="flag commingsoon fs-body-s"><b>&nbsp; Chat Widget &nbsp;</b></span>
2951                        <!-- <span class="time-wrapper"><span class="time"><b>July, 2021</b></span></span> -->
2952                        <div class="commingBox-l hidden-sm hidden-md hidden-lg hidden-xl">
2953                            <span class="text-red fs-body-s"><b>Coming Soon</b></span>
2954                        </div>
2955                    </div>
2956                    <div class="desc text-black fs-body-m">Chat management tools allow customers to manage chats from different channels to more convenient, whether it's LINE, Facebook, IG, WhatsApp, all in one place.</div>
2957                </div>
2958                <div class="timeBot"></div>
2959            </li>
2960
2961            <!-- Item 9 -->
2962            <li>
2963                <div class="commingBox-r hidden-xs">
2964                    <span class="text-red fs-body-s"><b>Coming Soon</b></span>
2965                </div>
2966                <div class="direction-r direction-rc">
2967                    <div class="flag-wrapper">
2968                        <span class="flag commingsoon fs-body-s""><b>MakeWebEasy New Version</b></span>
2969                        <!-- <span class="time-wrapper"><span class="time"><b>2022</b></span></span> -->
2970                        <div class="commingBox-l hidden-sm hidden-md hidden-lg hidden-xl">
2971                            <span class="text-red fs-body-s"><b>Coming Soon</b></span>
2972                        </div>
2973                    </div>
2974                    <div class="desc text-black fs-body-m">MakeWebEasy upgrade a new look that help customers to design website easier and more attractive</div>
2975                </div>
2976                <div class="timeBot"></div>
2977            </li>
2978
2979        </ul>
2980    </div>
2981</section>
2982
2983<section class="sectionAbout3">
2984    <div class="container text-center">
2985        <div class="personZone">
2986            <h2 class="fs-display-m fw-bold">Team of more than 100 experts </h2>
2987            <p class="fs-body-s"> We work hard so that every customer can be confident that they will receive the best website and online marketing services. </p>
2988            <span class="flag fs-heading-m"><b>Headquarter Thailand</b></span>
2989            <img class="flag-logo" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone3_iconTH.webp">
2990            <div class="row">
2991                <div class="col-lg-3 col-sm-4 abc"><img class="img-profile-mwe" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone3_image1.webp"><h5 class="fs-heading-m"> Supayot Sirichamroonvit </h5><h5 class="position fs-heading-m"> Managing Director </h5></div>
2992                <div class="col-lg-3 col-sm-4 abc"><img class="img-profile-mwe" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone3_image2.webp"><h5 class="fs-heading-m"> Auttakorn Wandee </h5><h5 class="position fs-heading-m"> Senior Application Programmer </h5></div>
2993                <div class="col-lg-3 col-sm-4 abc"><img class="img-profile-mwe" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone3_image3.webp"><h5 class="fs-heading-m"> Nitipol Laopiam </h5><h5 class="position fs-heading-m"> Ux Designer </h5></div>
2994                <div class="col-lg-3 col-sm-4 abc"><img class="img-profile-mwe" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone3_image4.webp"><h5 class="fs-heading-m"> Kamonchanok Adirektanasan </h5><h5 class="position fs-heading-m"> Business Analyst </h5></div>
2995                <div class="col-lg-3 col-sm-4 abc"><img class="img-profile-mwe" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone3_image5.webp"><h5 class="fs-heading-m"> Janjira Numprasert </h5><h5 class="position fs-heading-m"> Sales Manager </h5></div>
2996                <div class="col-lg-3 col-sm-4 abc"><img class="img-profile-mwe" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone3_image7.webp"><h5 class="fs-heading-m"> Kamolthip Thumwisetsri </h5><h5 class="position fs-heading-m"> Assistant Sales Manager </h5></div>
2997                <div class="col-lg-3 col-sm-4 abc"><img class="img-profile-mwe" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone3_image6.webp"><h5 class="fs-heading-m"> Worakan Thongrak </h5><h5 class="position fs-heading-m"> Senior Website Experts </h5></div>
2998                <div class="col-lg-3 col-sm-4 abc"><img class="img-profile-mwe" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone3_image8.webp"><h5 class="fs-heading-m"> Chanuwat Chaengkrachang </h5><h5 class="position fs-heading-m"> Senior Graphic Designer </h5></div>
2999                <div class="col-lg-3 col-sm-4 abc"><img class="img-profile-mwe" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone3_image9.webp"><h5 class="fs-heading-m"> Punnapa Tannakonkun </h5><h5 class="position fs-heading-m"> Senior Website Coordinato </h5></div>
3000                <div class="col-lg-3 col-sm-4 abc"><img class="img-profile-mwe" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone3_image10.webp"><h5 class="fs-heading-m"> Siripak Noppamak </h5><h5 class="position fs-heading-m"> Customer Support </h5></div>
3001                <div class="col-lg-3 col-sm-4 abc"><img class="img-profile-mwe" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone3_image11.webp"><h5 class="fs-heading-m"> Karun Sae-tang </h5><h5 class="position fs-heading-m"> Content Marketing </h5></div>
3002                <div class="col-lg-3 col-sm-4 abc"><img class="img-profile-mwe" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone3_image12.webp"><h5 class="fs-heading-m"> Nuttapong Triwicha </h5><h5 class="position fs-heading-m"> Online Advertising Specialist </h5></div>
3003            </div>
3004            <div class="row">
3005            <span class="flag fs-heading-m"><b>Headquarter Indonesia</b></span>
3006            <img class="country-flag" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone4_iconINDO.webp">
3007            <div class="row">
3008                <div class="col-lg-3 col-sm-4 abc"><img class="img-profile-mwe" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone4_image1.webp"><h5 class="fs-heading-m"> Marisa Muhsin</h5><h5 class="position fs-heading-m"> Indonesia Representative</h5></div>
3009                <div class="col-lg-3 col-sm-4 abc"><img class="img-profile-mwe" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone4_image2.webp"><h5 class="fs-heading-m"> Sabrina Yuka</h5><h5 class="position fs-heading-m"> Customer Experience Professional</h5></div>
3010                <div class="col-lg-3 col-sm-4 abc"><img class="img-profile-mwe" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone4_image3.webp"><h5 class="fs-heading-m"> Sylvania Jeshuani</h5><h5 class="position fs-heading-m"> Sales and Sustainable Partnership </h5></div>
3011                <div class="col-lg-3 col-sm-4 abc"><img class="img-profile-mwe" src="/web/en/images/page/about-makewebeasy/2021/webp/Zone4_image4.webp"><h5 class="fs-heading-m"> Fathia Apdhaliah </h5><h5 class="position fs-heading-m"> Graphic Designer </h5></div>
3012            </div>
3013        </div>
3014    </div>
3015</section>
3016
3017<section class="sectionAbout4">
3018    <!-- just bg-image -->
3019</section>
3020
3021<section class="sectionAbout5">
3022    <div id="ourMission">
3023        <div class="container-fluid">
3024            <div class="row contentBox">
3025                <div class="col-md-2"></div>
3026                <div class="col-md-8 text-center">
3027                    <h2 class="text-black fs-display-m fw-bold"> Our Mission </h2>
3028                    <p class="text-black fs-body-m"> To deliver comprehensive online services that will help entrepreneurs in achieving success in online business under a low budget yet with good service.</p>
3029                </div>
3030                <div class="col-md-2"></div>
3031            </div>
3032            <div class="row">
3033                <div class="col-md-2"></div>
3034                    <div class="col-md-8">
3035                        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
3036                            <div class="textBox text-center">
3037                                <img src="/web/en/images/page/about-makewebeasy/2021/webp/Zone6_icon1.webp">
3038                                <h3 class="text-blue">
3039                                    <b class="fs-heading-l"> Web Platform </b>
3040                                </h3>
3041                                <p class="text-black fs-body-s"> The website system is fully featured and easy to use, people with no IT experience can build their own business website.</p>
3042                            </div>
3043                        </div>
3044                        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
3045                            <div class="textBox text-center">
3046                                <img src="/web/en/images/page/about-makewebeasy/2021/webp/Zone6_icon2.webp">
3047                                <h3 class="text-blue">
3048                                    <b class="fs-heading-l"> Design </b>
3049                                </h3>
3050                                <p class="text-black fs-body-s"> There are beautiful templates that support various types of businesses. with website design service to make your website beautiful and professional.</p>
3051                            </div>
3052                        </div>
3053                        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
3054                            <div class="textBox text-center">
3055                                <img src="/web/en/images/page/about-makewebeasy/2021/webp/Zone6_icon3.webp">
3056                                <h3 class="text-blue">
3057                                    <b class="fs-heading-l"> Digital Marketing </b>
3058                                </h3>
3059                                <p class="text-black fs-body-s"> Our website system supports all forms of online marketing. There are online marketing experts to give advice. It really helps your business grow.</p>
3060                            </div>
3061                        </div>
3062                    </div>
3063                <div class="col-md-2"></div>
3064            </div>
3065        </div>
3066    </div>
3067</section>
3068</div><style type="text/css">
3069    footer {
3070        background: #0B1C30;
3071        font-weight: 300;
3072        padding: 0 1px;
3073        font-size: 21px;
3074        color: #FFFFFF;   
3075    }
3076    footer a:hover,
3077    footer a:active,
3078    footer a:focus {
3079        color: #28bee3;
3080    }
3081
3082    /* navBottomBar */
3083    footer .navBottomBar {
3084        padding-top: 50px;
3085        padding-bottom: 0px;
3086    }
3087    footer .footerNav {
3088        margin-top: 10px;
3089    }
3090    footer .footerNav .panel {
3091        border-top: none;
3092        border-left: none;
3093        border-right: none;
3094        /* border-bottom: 1px solid #ccc; */
3095        border-radius: 0;
3096        -webkit-box-shadow: none;
3097        box-shadow: none;
3098        background-color: transparent;
3099    }
3100    footer .footerNav .panel-group .panel+.panel {
3101        margin-top: 20px;
3102    }
3103    footer .panel-group {
3104        margin-bottom: 0px !important;
3105    }
3106    footer .footerNav .panel-heading {
3107        padding: 0;
3108        border: none;
3109    }
3110    footer .footerNav .panel-heading .panel-title > a {
3111        display: block;
3112        padding: 10px 10px;
3113        /* line-height: 1; */
3114        /* color: #333; */
3115    }
3116    footer .footerNav .panel-body {
3117        padding: 0 10px 10px 10px;
3118        border-top: none !important;
3119    }
3120    footer .footerNav .panel-heading i.fa-angle-down.pull-right {
3121        line-height: inherit;
3122        transition:  0.2s ease-out;
3123        -webkit-transition: 0.2s ease-out;
3124        -moz-transition: 0.2s ease-out;
3125        -ms-transition: 0.2s ease-out;
3126        -o-transition: 0.2s ease-out;
3127    }
3128    footer .footerNav .panel-heading:not(.collapsed) {
3129        color: #28bee3;
3130    }
3131    footer .footerNav .panel-heading:not(.collapsed) i.fa-angle-down.pull-right {
3132        transform: rotateZ(180deg);
3133        -webkit-transform: rotateZ(180deg);
3134        -moz-transform: rotateZ(180deg);
3135        -ms-transform: rotateZ(180deg);
3136        -o-transform: rotateZ(180deg);
3137    }
3138    footer .footerNav ul > li {
3139        padding: 8px 0px;
3140    }
3141
3142    footer .img-icon-footer{
3143        width: 97px;
3144        margin-right: 8px;
3145    }
3146
3147    footer .border-top-for-footer{
3148        border-top: 1px solid rgba(233, 236, 239, .2);
3149    }
3150    footer .border-bottom-for-footer{
3151        border-bottom: 1px solid rgba(233, 236, 239, .2);
3152    }
3153    @media (min-width: 768px) {
3154        footer .footerNav .panel {
3155            border: none;
3156        }
3157        footer .footerNav .panel-group .panel+.panel {
3158            margin: 0;
3159        }
3160        footer .footerNav .panel-heading {
3161            pointer-events: none;
3162        }
3163        footer .footerNav .panel-collapse {
3164            display: block !important;
3165        }
3166        footer .footerNav i.fa-angle-down.pull-right {
3167            display: none;
3168        }
3169    }
3170    /* @media (min-width: 992px) { */
3171        footer .footerContactus  .mr-top-contact {
3172            margin-top: 3% !important;
3173        }
3174    /* } */
3175    @media (max-width: 767px) {
3176        footer .footerContactus  .mr-top-contact {
3177            margin-top: 2% !important;
3178        }
3179    }
3180
3181    @media (max-width: 767px) {
3182        footer .footerNav .panel-group.row {
3183            margin-left: 0;
3184            margin-right: 0;
3185        }
3186        footer .footerNav .panel[class*="col-"] {
3187            padding: 0;
3188        }
3189        footer .footerNav ul {
3190            margin: 0;
3191        }
3192        footer .footerNav ul > li {
3193            padding: 10px 10px;
3194        }
3195        footer #accordionFooter{
3196            display: flex;
3197            flex-wrap: wrap;
3198            flex-direction: row;
3199            align-items: flex-start;
3200        }
3201        footer .footerNav .panel-group .panel+.panel {
3202            margin-top: 0 !important;
3203        }
3204    }
3205
3206    footer .footerContactus h5 , .logo-mwe-footer {
3207        margin-bottom: 20px;
3208    }
3209    footer .footerContactus img {
3210        height: 36px;
3211    }
3212    footer .footerContactus p {
3213        margin: 0;
3214        line-height: 1.2;
3215    }
3216
3217    footer .footerRegister h5 , .logo-mwe-footer {
3218        margin-top: 10px;
3219        margin-bottom: 10px;
3220    }
3221    footer .footerRegister .input-group-btn .btn {
3222        padding: 0 10px;
3223    }
3224
3225    footer .footerSocial .img-social {
3226        max-width: 30px;
3227        margin: 0 5px;
3228    }
3229    
3230    footer .footerSocial .img-social-line {
3231        max-height: 30px;
3232        margin: 0 5px;
3233    }
3234
3235    footer .footerSocial .app-load {
3236        height: 33px;
3237        width: auto;
3238        margin: 0 5px;
3239    }
3240
3241    footer .icon-facebook{
3242        width: 29.25px;
3243        height: auto !important;
3244    }
3245
3246    @media (max-width: 425px) {
3247        footer .footerSocial .img-social {
3248            height: 30px;
3249            width: auto;
3250            margin: 0 5px;
3251        }
3252        
3253        footer .footerSocial .img-social-line {
3254            height: 30px;
3255            width: auto;
3256            margin: 0 55%;
3257        }
3258
3259        footer .footerSocial .app-load {
3260            height: 33px;
3261            width: auto;
3262            margin: 0 5px;
3263        }
3264    }
3265    
3266    footer .spacerFooter {
3267        margin: 15px 0;
3268    }
3269
3270    @media (max-width: 991px) {
3271        footer .footerContactus h5 , .logo-mwe-footer {
3272            margin-top: 10px;
3273            margin-bottom: 10px;
3274        }
3275        footer .footerContactus {
3276            text-align: left;
3277        }
3278        footer .footerRegister h5 , .logo-mwe-footer {
3279            text-align: center;
3280        }
3281        footer .footerSocial {
3282            text-align: center;
3283        }
3284    }
3285
3286
3287
3288    /* footerBar */
3289    footer .footerBar {
3290        background: #0B1C30;
3291        padding-top: 0;
3292        padding-bottom: 20px;
3293    }
3294    footer .footerPartner img {
3295        max-height: 100px;
3296        max-width: 100px;
3297        display: inline-block;
3298        vertical-align: middle;
3299        margin: 5px 10px;
3300    }
3301    footer .footerPartnerRight {
3302        padding-top: 25px;
3303    }
3304    footer .footerPartnerRight .textPartner {
3305        display: inline-block;
3306    }
3307    footer .footerPartnerRight .dividePartner {
3308        height: 30px;
3309        width: 1px;
3310        display: inline-block;
3311        vertical-align: middle;
3312        margin: 5px 10px;
3313        background-color: #D9D9D9;
3314    }
3315    footer .footerPartnerRight img {
3316        max-height: 100px;
3317        max-width: 100px;
3318        display: inline-block;
3319        vertical-align: middle;
3320        margin: 5px 10px;
3321    }
3322    footer .footerPolicy {
3323        text-align: right;
3324    }
3325    footer .footerCopyRight,
3326    footer .footerPolicy {
3327        font-size: 12px;
3328    }
3329    @media (max-width: 991px) {
3330        footer .footerPartner,
3331        footer .footerPartnerRight,
3332        footer .footerCopyRight,
3333        footer .footerPolicy {
3334            text-align: left;
3335        }
3336    }
3337    @media (max-width: 767px) {
3338        footer .footerPartner img {
3339            max-width: 22%;
3340        }
3341
3342        footer .footerPartnerSME {
3343            margin: 5px 25px !important;
3344        }
3345
3346        footer .footerPartnerSSL {
3347            margin: 5px 30px !important;
3348        }
3349
3350        footer .footerPartnerRight .dividePartner {
3351            display: block;
3352            height: 1px;
3353            width: 50px;
3354            margin: 15px auto;
3355        }
3356        footer .footerCopyRight,
3357        footer .footerPolicy {
3358            font-size: 14px;
3359        }
3360        footer .footerPartner,
3361        footer .footerPartnerRight,
3362        footer .footerCopyRight,
3363        footer .footerPolicy {
3364            text-align: center;
3365        }
3366    }
3367    /* .gradient1 {
3368        display: inline-block;
3369        font-size: 96px;
3370        margin: 0;
3371        opacity: 0.9;
3372        background: white;
3373        color: black;
3374        position: relative;
3375        text-shadow: 1px 1px 0px #04161f, 1px -1px 0px #04161f, -1px -1px 0px #04161f, -1px 1px 0px #04161f;
3376    }
3377    .gradient1::before, .gradient1::after {
3378        position: absolute;
3379        top: 0;
3380        right: 0;
3381        bottom: 0;
3382        left: 0;
3383        pointer-events: none;
3384    }
3385    .gradient1::before {
3386        background: -webkit-linear-gradient(left, #23966c, #faaa54, #e23b4a, #db0768, #360670);
3387        background: linear-gradient(to right, #23966c, #faaa54, #e23b4a, #db0768, #360670);
3388        content: '';
3389        display: block;
3390        mix-blend-mode: screen;
3391    }
3392    .gradient1::after {
3393        content: "CSS Gradient Text";
3394        background: #04161f;
3395        color: white;
3396        mix-blend-mode: multiply;
3397    } */
3398
3399    .box-social-app {
3400        margin-left: 0px;
3401    }
3402
3403    .flex-social {
3404        display: flex;
3405    }
3406
3407    .flex-social img {
3408        height: 32px;
3409        width: auto;
3410        margin-right: 5px;
3411    }
3412
3413    .flex-app-load {
3414        display: flex;
3415        margin-top: 10px;
3416        margin-left: 15px;
3417    }
3418
3419    .flex-app-load img {
3420        height: 33px;
3421        width: auto;
3422        margin-right: 5px;
3423    }
3424
3425    /* START CSS footer partner */
3426    /* Global CSS footer partner */
3427    .footer-flex {
3428        display: flex;
3429        flex-direction: row;
3430        align-content: stretch;
3431        align-items: center;
3432        flex-wrap: wrap;
3433    }
3434
3435    .border-right-partner {
3436        padding-right: 4%;
3437        margin-right: 4%;
3438        border-right: 1px solid #E3E3E3;
3439    }
3440
3441    .img-footer {
3442        display: inline-block;
3443        max-width: 100%;
3444        height: auto;
3445    }
3446
3447    .logo-partner {
3448        height: 44px !important;
3449    }
3450
3451    #btnSubscribe{
3452        background: linear-gradient(45deg, #17C7F3 0%, #0189EB 100%);
3453        border-radius: 0px 5px 5px 0px;
3454        width: 40px;
3455    }
3456
3457    footer .socialmedia-group-mb{
3458        margin-left: 15px;
3459    }
3460
3461    @media (max-width:767px){
3462        footer .socialmedia-group-mb{
3463            margin-left: 0 ;
3464            margin-top: 16px;
3465        }
3466
3467        footer .flex-social {
3468            display: flex;
3469            flex-wrap: wrap;
3470        }
3471    }
3472    /* screen 1200px up visible-lg CSS footer partner */
3473    @media (min-width: 1200px) {
3474        .footer-flex {
3475            display: flex;
3476            flex-direction: row;
3477            align-content: stretch;
3478            align-items: center;
3479            flex-wrap: wrap;
3480        }
3481
3482        .border-right-partner {
3483            padding-right: 4%;
3484            margin-right: 4%;
3485            border-right: 1px solid #E3E3E3;
3486        }
3487
3488        .logo-partner {
3489            height: 44px !important;
3490        }
3491    }
3492
3493    /* screen 1199px to 992px visible-md CSS footer partner */
3494    @media (min-width: 992px) and (max-width: 1199px) {
3495        .footer-flex {
3496            display: flex;
3497            flex-direction: row;
3498            align-content: stretch;
3499            align-items: center;
3500            flex-wrap: wrap;
3501        }
3502
3503        .border-right-partner {
3504            padding-right: 4%;
3505            margin-right: 4%;
3506            border-right: 1px solid #E3E3E3;
3507        }
3508
3509        .logo-partner {
3510            height: 37px !important;
3511        }
3512    }
3513
3514    /* screen 991px to 768px visible-sm CSS footer partner */
3515    @media (min-width: 768px) and (max-width: 991px) {
3516        .footer-flex {
3517            display: flex;
3518            flex-direction: row;
3519            align-content: stretch;
3520            align-items: center;
3521            flex-wrap: wrap;
3522            justify-content: flex-start;
3523        }
3524
3525        .border-right-partner {
3526            padding-right: 1%;
3527            margin-right: 1%;
3528            border-right: 1px solid #E3E3E3;
3529        }
3530
3531        .logo-partner {
3532            height: 44px !important;
3533        }
3534    }
3535
3536    /* screen 767px down visible-xs CSS footer partner */
3537    @media (max-width: 767px) {
3538        footer .footer-flex {
3539            display: flex;
3540            flex-direction: row;
3541            align-content: stretch;
3542            align-items: center;
3543            flex-wrap: wrap;
3544            justify-content: flex-start;
3545        }
3546
3547        footer .border-right-partner {
3548            padding-right: 1%;
3549            margin-right: 1%;
3550            border-right: 1px solid #E3E3E3;
3551        }
3552
3553        footer .logo-partner {
3554            height: 44px !important;
3555        }
3556        footer .social-mb{
3557            display: flex;
3558            flex-direction: row;
3559            align-content: stretch;
3560            align-items: center;
3561            flex-wrap: wrap;
3562            justify-content: flex-start !important;
3563        }
3564    }
3565
3566    /* screen 347px down visible-xs CSS footer partner */
3567    /* @media (max-width: 767px) {
3568
3569        .border-right-partner {
3570            padding-right: 1%;
3571            margin-right: 1%;
3572            border-right: 1px solid #E3E3E3;
3573        }
3574
3575        .logo-partner {
3576            height: 40px !important;
3577        }
3578    } */
3579    /* END line CSS footer partner */
3580
3581    footer .mr-pd-box-email {
3582        margin-left: 75%;
3583        padding-right: 50px;
3584    }
3585
3586    @media (max-width: 1199px) {
3587        .box-social-app {
3588            margin-left: 15px;
3589        }
3590
3591        .flex-social {
3592            display: flex;
3593        }
3594
3595        .flex-social img {
3596            height: 32px;
3597            width: auto;
3598            margin-left: 0px;
3599        }
3600
3601        .flex-app-load {
3602            display: flex;
3603            margin-top: 10px;
3604            margin-left: 15px;
3605            flex-wrap: wrap;
3606        }
3607
3608        .flex-app-load img {
3609            height: 33px;
3610            width: auto;
3611            margin-left: 0px;
3612        }
3613
3614        footer .mr-pd-box-email {
3615            margin-left: 75%;
3616            padding-right: 0px;
3617        }
3618    }
3619
3620    @media (max-width:767px){
3621        footer .flex-social img{
3622            margin-right: 24px;
3623        }
3624        footer #btnSubscribe {
3625            background: linear-gradient(45deg, #17C7F3 0%, #0189EB 100%);
3626            border-radius: 0px 5px 5px 0px;
3627            width: auto;
3628            border:none;
3629        }
3630        .flex-app-load {
3631            display: flex;
3632            margin-top: 10px;
3633            margin-left: 15px;
3634            justify-content: center;
3635        }
3636    }
3637
3638    @media (max-width: 991px) {
3639        .footer-flex img.img-social {
3640            height: 31px;
3641            width: auto;
3642            margin-left: 0px;
3643        }
3644
3645        .footer-flex img.img-app {
3646            height: 30px;
3647            width: auto;
3648            margin-left: 2px;
3649            margin-right: 2px;
3650        }
3651    }
3652
3653    @media (max-width:451px){
3654        footer .footer-flex {
3655            display: flex;
3656            flex-direction: row;
3657            align-content: stretch;
3658            align-items: center;
3659            flex-wrap: wrap;
3660            justify-content: center;
3661        }
3662    }
3663    @media (max-width: 425px) {
3664        .footer-flex img.social {
3665            height: 30px;
3666            width: auto;
3667            margin-left: 0px;
3668        }
3669
3670        .footer-flex img.app {
3671            height: 29px;
3672            width: auto;
3673            margin-left: 2px;
3674            margin-right: 2px;
3675        }
3676    }
3677
3678    @media (max-width: 375px) {
3679        .footer-flex img.social {
3680            height: 30px;
3681            width: auto;
3682            margin-left: 0px;
3683        }
3684
3685        .footer-flex img.app {
3686            height: 30px;
3687            width: auto;
3688            margin-left: 2px;
3689            margin-right: 2px;
3690        }
3691    }
3692
3693    @media (max-width: 320px) {
3694        .footer-flex img.social {
3695            height: 30px;
3696            width: auto;
3697            margin-left: 0px;
3698        }
3699
3700        .footer-flex img.app {
3701            height: 30px;
3702            width: auto;
3703            margin-left: 2px;
3704            margin-right: 2px;
3705        }
3706    }
3707</style>
3708
3709<footer class="text-bold border-top">
3710    <div class="navBottomBar">
3711        <div class="container border-bottom-for-footer mb-16">
3712            <div class="row">
3713                <div class="col-xs-12 col-md-9">
3714                    <div class="footerNav">
3715                        <div class="panel-group row" id="accordionFooter" role="tablist" aria-multiselectable="true">
3716                            <div class="panel col-sm-3 col-xs-6">
3717                                <div class="panel-heading collapsed" role="tab" id="headingMenuService" data-parent="#accordionFooter" data-target="#collapseMenuService" aria-expanded="false" aria-controls="collapseMenuService">
3718                                    <div class="panel-title fs-nt-16 fw-bold">
3719                                        <!-- <a href="javascript:void(0)"> -->
3720                                            <span>MWE Service</sp>
3721                                            <!-- <i class="fal fa-angle-down pull-right"></i> -->
3722                                        <!-- </a> -->
3723                                    </div>
3724                                </div>
3725                                <div class="panel-collapse" id="collapseMenuService" role="tabpanel" aria-labelledby="headingMenuService">
3726                                    <div class="panel-body fs-nbt-14 pl-0">
3727                                        <ul class="list-unstyled footerList">
3728                                                                                            <li class="pl-0">
3729                                                    <a href="/en/website-package"
3730                                                                                                                >
3731                                                        Website Price                                                    </a>
3732                                                </li>
3733                                                                                            <li class="pl-0">
3734                                                    <a href="/en/website-design"
3735                                                                                                                >
3736                                                        Website Design                                                    </a>
3737                                                </li>
3738                                                                                            <li class="pl-0">
3739                                                    <a href="/en/website-update"
3740                                                                                                                >
3741                                                        Website Update                                                    </a>
3742                                                </li>
3743                                                                                            <li class="pl-0">
3744                                                    <a href="/en/freewebsite"
3745                                                                                                                >
3746                                                        Free Website                                                    </a>
3747                                                </li>
3748                                                                                            <li class="pl-0">
3749                                                    <a href="/en/free-ecommerce"
3750                                                                                                                >
3751                                                        Free E-Commerce                                                    </a>
3752                                                </li>
3753                                                                                    </ul>
3754                                    </div>
3755                                </div>
3756                            </div>
3757
3758                            <div class="panel col-sm-3 col-xs-6">
3759                                <div class="panel-heading collapsed" role="tab" id="headingMenuSupport" data-parent="#accordionFooter" data-target="#collapseMenuSupport" aria-expanded="false" aria-controls="collapseMenuSupport">
3760                                    <div class="panel-title fs-nt-16 fw-bold">
3761                                        <!-- <a href="javascript:void(0)"> -->
3762                                            <span>MWE Support</span>
3763                                            <!-- <i class="fal fa-angle-down pull-right"></i> -->
3764                                        <!-- </a> -->
3765                                    </div>
3766                                </div>
3767                                <div class="panel-collapse" id="collapseMenuSupport" role="tabpanel" aria-labelledby="headingMenuSupp
3767ort">
3768                                    <div class="panel-body fs-nbt-14 pl-0">
3769                                        <ul class="list-unstyled footerList">
3770                                                                                            <li class="pl-0">
3771                                                    <a href="/en/login"
3772                                                                                                                >
3773                                                        Login Page                                                    </a>
3774                                                </li>
3775                                                                                            <li class="pl-0">
3776                                                    <a href="/blog/manual/"
3777                                                        target="_blank"                                                        >
3778                                                        Website Manual                                                    </a>
3779                                                </li>
3780                                                                                            <li class="pl-0">
3781                                                    <a href="/en/howto-payment"
3782                                                                                                                >
3783                                                        Payment Methods                                                    </a>
3784                                                </li>
3785                                                                                            <li class="pl-0">
3786                                                    <a href="/en/online-payment"
3787                                                                                                                >
3788                                                        Online Payment                                                    </a>
3789                                                </li>
3790                                                                                            <li class="pl-0">
3791                                                    <a href="/en/confirmpay"
3792                                                                                                                >
3793                                                        Inform Payment                                                    </a>
3794                                                </li>
3795                                                                                    </ul>
3796                                    </div>
3797                                </div>
3798                            </div>
3799
3800                            <div class="panel col-sm-3 col-xs-6">
3801                                <div class="panel-heading collapsed" role="tab" id="headingWhoAreWe" data-parent="#accordionFooter" data-target="#collapseWhoAreWe" aria-expanded="false" aria-controls="collapseWhoAreWe">
3802                                    <div class="panel-title fs-nt-16 fw-bold">
3803                                        <!-- <a href="javascript:void(0)"> -->
3804                                            <span>Who are we?</span>
3805                                            <!-- <i class="fal fa-angle-down pull-right"></i> -->
3806                                        <!-- </a> -->
3807                                    </div>
3808                                </div>
3809                                <div class="panel-collapse" id="collapseWhoAreWe" role="tabpanel" aria-labelledby="headingWhoAreWe">
3810                                    <div class="panel-body fs-nbt-14 pl-0">
3811                                        <ul class="list-unstyled footerList">
3812                                                                                            <li class="pl-0">
3813                                                                                                            <a href="/en/about-makewebeasy" 
3814                                                                                                                        >
3815                                                            About Us                                                        </a>
3816                                                                                                       
3817                                                </li>
3818                                                                                            <li class="pl-0">
3819                                                                                                            <a href="/en/contactus" 
3820                                                                                                                        >
3821                                                            Contact Us                                                        </a>
3822                                                                                                       
3823                                                </li>
3824                                                                                            <li class="pl-0">
3825                                                                                                            <a href="/en/job-makewebeasy" 
3826                                                                                                                        >
3827                                                            Career                                                        </a>
3828                                                                                                       
3829                                                </li>
3830                                                                                            <li class="pl-0">
3831                                                                                                            <a href="/en/partner" 
3832                                                                                                                        >
3833                                                            Partner with Us                                                        </a>
3834                                                                                                       
3835                                                </li>
3836                                                                                            <li class="pl-0">
3837                                                                                                            <a href="/en/customer" 
3838                                                                                                                        >
3839                                                            Our Customers                                                        </a>
3840                                                                                                       
3841                                                </li>
3842                                                                                            <li class="pl-0">
3843                                                                                                            <a href="https://www.facebook.com/makewebeasy" 
3844                                                            target="_blank"                                                            rel="nofollow">
3845                                                            Facebook                                                        </a>
3846                                                                                                       
3847                                                </li>
3848                                                                                            <li class="pl-0">
3849                                                                                                            <a href="https://www.instagram.com/makewebeasy" 
3850                                                            target="_blank"                                                            rel="nofollow">
3851                                                            Instagram                                                        </a>
3852                                                                                                       
3853                                                </li>
3854                                                                                            <li class="pl-0">
3855                                                                                                            <a href="javascript:void(0);" id="blog2" >
3856                                                            Blog                                                        </a>
3857                                                        
3857<script>
3858                                                        jQuery("#blog2").on('click', function () {
3859                                                            _lt('send', 'cv', {
3860                                                              type: 'blog'
3861                                                            },['b7b4d0f5-83dd-4d7c-bd6f-fde814f2c9e5']);
3862                                                            window.open('/blog');
3863                                                        })
3864                                                        </script>
3864
3865                                                                                                       
3866                                                </li>
3867                                                                                    </ul>
3868                                    </div>
3869                                </div>
3870                            </div>
3871
3872                            <div class="panel col-sm-3 col-xs-6">
3873                                <div class="panel-heading collapsed" role="tab" id="headingAffiliated" data-parent="#accordionFooter" data-target="#collapseAffiliated" aria-expanded="false" aria-controls="collapseAffiliated">
3874                                    <div class="panel-title fs-nt-16 fw-bold">
3875                                        <!-- <a href="javascript:void(0)"> -->
3876                                            <span>Our Affiliates</span>
3877                                            <!-- <i class="fal fa-angle-down pull-right"></i> -->
3878                                        <!-- </a> -->
3879                                    </div>
3880                                </div>
3881                                <div class="panel-collapse" id="collapseAffiliated" role="tabpanel" aria-labelledby="headingAffiliated">
3882                                    <div class="panel-body fs-nbt-14 pl-0">
3883                                        <ul class="list-unstyled footerList">
3884                                                                                            <li class="pl-0">
3885                                                    <a href="https://www.clicknext.com"
3886                                                        target="_blank"                                                        rel="nofollow">
3887                                                        Clicknext Technology Co.,Ltd.                                                    </a>
3888                                                </li>
3889                                                                                            <li class="pl-0">
3890                                                    <a href="https://www.smsmkt.com"
3891                                                        target="_blank"                                                        rel="nofollow">
3892                                                        SMS Marketing Co., Ltd                                                    </a>
3893                                                </li>
3894                                                                                            <li class="pl-0">
3895                                                    <a href="https://www.bms.in.th"
3896                                                        target="_blank"                                                        rel="nofollow">
3897                                                        BMS Broadcasting                                                    </a>
3898                                                </li>
3899                                                                                    </ul>
3900                                    </div>
3901                                </div>
3902                            </div>
3903
3904                        </div>
3905                    </div>
3906                </div>
3907                <div class="col-md-3">
3908                    <!-- <div class="row"> -->
3909                        <div class="col-xs-12">
3910                            <div class="footerContactus" style="margin-top: 12px;">
3911                                <div><img src="/web/en/images/logo/logomwe.png" alt="Makewebeasy"></div>
3912                                <div class="fs-content-s" style="margin-top: 4%;">
3913                                    Clicknext Technology Co.,Ltd.                                </div>
3914                                <div class="fs-content-s mr-top-contact">
3915                                                                                <a href="tel:+6624830999">
3916                                                Tel : +66 2483 0999                                            </a>
3917                                                                                     
3918                                                                        </div>
3919                                <div class="fs-content-s mr-top-contact">
3920                                     
3921                                </div>
3922                                <div class="fs-content-s mr-top-contact">
3923                                    Daily Operating Hours : 09.00 - 21.00                                </div>
3924                                <div class="footer-flex social-mb" style="display:flex;">
3925                                    <!-- <div style="margin: 20px 10px 20px 0;"><i class="fab fa-facebook" style="color: #ffffff; font-size:30px;"></i></div> -->
3926                                    <div style="margin: 20px 10px 6px 0;"><a href="https://www.facebook.com/makewebeasy" target="_blank" rel="nofollow"><img class="icon-facebook" src="/web/en/images/contactsection/facebook_icon.webp"></a></div>
3927                                    <div style="margin: 20px 10px 0 10px;"><a href="https://www.instagram.com/makewebeasy" target="_blank" rel="nofollow"><i class="fab fa-instagram" style="color: #ffffff; font-size:30px;"></i></a></div>
3928                                    <div style="margin: 20px 10px 0 10px;"><a href="https://www.youtube.com/channel/UCmefGZmiQQGnSG_dF2CE7LQ" target="_blank" rel="nofollow"><i class="fab fa-youtube" style="color: #ffffff; font-size:30px;"></i></a></div>
3929                                    <div style="margin: 20px 10px 0 0px;"><a href="https://line.me/R/ti/p/@makewebeasy" target="_blank"><img style="width:148px; height:auto;" src="/web/en/images/contactsection/line-oa-icon.webp" /></a></div>
3930                                </div>
3931                                <!-- foot Box input email for following news (PC) -->
3932                                <div class="col-xs-12 col-md-12 col-sm-6 col-lg-12 pl-0 mt-30">
3933                                    <div class="footerRegister">
3934                                        <p class="p fs-content-s" style="margin-bottom: 6px;"><span>
3934Subscribe to receive news from us</span></p>
3935                                        <form novalidate="novalidate" class="fv-form fv-form-bootstrap" role="form" name="formSubscribe" id="formSubscribe" method="post">
3936                                            <div class="form-group">
3937                                                <div class="input-group">
3938                                                    <input type="email" class="form-control" name="subscribeMail" id="subscribeMail" placeholder="E-mail">
3939                                                    <div class="input-group-btn">
3940                                                        <button type="button" class="btn btn-blue" id="btnSubscribe"><img style="width:20px; height:auto;" src="/web/en/images/contactsection/send-icon.webp"></button>
3941                                                    </div>
3942                                                </div>
3943                                                <small class="help-block serverResponse"></small>
3944                                            </div>
3945                                        </form>
3946                                    </div>
3947                                </div>
3948                            </div>
3949                        </div>
3950                    <!-- </div> -->
3951                </div>
3952                <div class="col-xs-12" style="margin-top: 15px; display:none;">
3953                    <div class="row">
3954                        <div class="col-xs-12">
3955                            <div class="footerContactus">
3956                                <label class="logo-mwe-footer"><img src="/web/en/images/logo/logomwe.png" alt="Makewebeasy"></label>
3957                                <p>
3958                                    Clicknext Technology Co.,Ltd.<br>
3959                                    Tel : <a href="tel:02-483-0999">+66 2483 0999</a> <br class="hidden-sm"> 
3960                                     
3961                                    Daily Operating Hours : 09.00 - 21.00                                </p>
3962                            </div>
3963                        </div>
3964                    </div>
3965                </div>
3966            </div>
3967        </div>
3968    </div>
3969    <div class="footerBar" style="display: block;">
3970        <div class="container">
3971            <div class="row">
3972            <!-- foot Box input email for following news (PC) and social for following (PC) -->
3973            <div class="visible-md visible-lg col-md-3 col-lg-3 col-md-offset-9 col-lg-offset-9 box-social-app mr-pd-box-email">
3974                    <div class="row">
3975                        <!-- foot Box input email for following news (PC) -->
3976                        <div class="col-md-12 col-lg-12" style="display: none;">
3977                            <div class="footerRegister">
3978                                <p class="p text-blue text-center"><strong>Subscribe to receive news from us</strong></p>
3979                                <form novalidate="novalidate" class="fv-form fv-form-bootstrap" role="form" name="formSubscribe" id="formSubscribe" method="post">
3980                                    <div class="form-group">
3981                                        <div class="input-group">
3982                                            <input type="email" class="form-control" name="subscribeMail" id="subscribeMail" placeholder="E-mail">
3983                                            <div class="input-group-btn">
3984                                                <button type="button" class="btn btn-blue" id="btnSubscribe">Subscribe</button>
3985                                            </div>
3986                                        </div>
3987                                        <small class="help-block serverResponse"></small>
3988                                    </div>
3989                                </form>
3990                            </div>
3991                        </div>
3992                        <!-- foot social for following (PC) -->
3993                        <div class="col-md-12 col-lg-12" style="margin-left: 15px; display:none;">
3994                            <div class="row">
3995                                <div class="flex-social">
3996                                    <div>
3997                                        <a href="https://www.instagram.com/makewebeasy" target="_blank" rel="nofollow">
3998                                            <img class="img-social" src="/web/en/images/social/instagram.png" alt="IG MWE">
3999                                        </a>
4000                                    </div>
4001                                    <div>
4002                                        <a href="https://www.youtube.com/channel/UCmefGZmiQQGnSG_dF2CE7LQ" target="_blank" rel="nofollow">
4003                                            <img class="img-social" src="/web/en/images/social/youtube.png" alt="Youtube MWE">
4004                                        </a>
4005                                    </div>
4006                                    <div>
4007                                        <a href="https://www.facebook.com/makewebeasy" target="_blank" rel="nofollow">
4008                                            <img class="img-social" src="/web/en/images/social/facebook.png" alt="Facebook MWE">
4009                                        </a>
4010                                    </div>
4011                                    <div>
4012                                        <a href="https://line.me/R/ti/p/@makewebeasy" target="_blank" rel="nofollow">
4013                                            <img class="img-social-line" src="/web/en/images/social/LineMakewebeasyV2.png" alt="Line MWE">
4014                                        </a>
4015                                    </div>
4016                                </div>
4017                            </div>
4018                        </div>
4019                    </div>
4020                </div>
4021                <!-- foot Partner LOGO (PC) -->
4022                <div class="col-md-8 col-lg-8">
4023                    <div class="footer-flex" style="display:none;">
4024                            <img class="border-right-partner img-footer logo-partner" src="/web/en/images/footer-partner/sme-awards.png" alt="SMEs Excellence Awards 2020" />
4025                            <img class="border-right-partner img-footer logo-partner" src="/web/en/images/footer-partner/ssl-encryption.png" alt="SECURE SSL ENCRYPTION" />
4026                            <img class="img-footer logo-partner" style="cursor: pointer;" src="/web/en/images/footer-partner/dbd.png" onclick="window.open('https://www.trustmarkthai.com/callbackData/popup.php?data=1e-37-4-bf171183d66f9e538710aacfec597ebcbcd6209213&markID=firstmark');" alt="DBD" />
4027                            <img class="img-footer logo-partner" src="/web/en/images/footer-partner/depa.png" alt="depa" />
4028                            <img class="img-footer logo-partner" src="/web/en/images/footer-partner/thai-ecommerce.png" alt="THAI E-COMMERCE ASSOCIATION" />
4029                        
4030                                                                        <!-- comodo ssl -->
4031                        <!--
4031<script language="JavaScript" type="text/javascript">
4032                            var ua = navigator.userAgent.toLowerCase(),
4033                                    platform = navigator.platform.toLowerCase();
4034                            platformName = ua.match(/ip(?:ad|od|hone)/) ? 'ios' : (ua.match(/(?:webos|android)/) || platform.match(/mac|win|linux/) || ['other'])[0],
4035                                    isMobile = /ios|android|webos/.test(platformName);
4036                            if (!isMobile) {
4037                                TrustLogo("https://www.makewebeasy.com/web/en/images/comodo_secure_seal_100x85_transp.png", "CL1", "none");
4038                            }
4039                        </script>
4039-->
4040                        <!--<a  href="https://www.instantssl.com/" id="comodoTL">Essential SSL</a>-->
4041                        <!-- end comodo ssl -->
4042                                                <!-- 
4042<script src="https://apis.google.com/js/platform.js" async defer></script>
4042 -->
4043                        <!-- <div class="g-partnersbadge" data-agency-id="5827446435"></div> -->
4044                    </div>
4045                    <div class="footer-flex">
4046                            <img class="img-icon-footer" src="/web/en/images/footer-partner/sme-awards.png" alt="SMEs Excellence Awards 2020">
4047                            <img class="img-icon-footer" src="/web/en/images/footer-partner/atsi_digital_icon.png">
4048                            <img class="img-icon-footer" src="/web/en/images/footer-partner/IEC_29110.png">
4049                            <img class="img-icon-footer" src="/web/en/images/footer-partner/iso_27001.png">
4050                            <img class="img-icon-footer" src="/web/en/images/footer-partner/ssl-encryption.png">
4051                            <img class="img-icon-footer" src="/web/en/images/footer-partner/dbd.png">
4052                            <img class="img-icon-footer" src="/web/en/images/footer-partner/depa.png">
4053                            <img class="img-icon-footer" src="/web/en/images/footer-partner/thai_commerce.png">
4054                    </div>
4055                </div>
4056                <!-- foot App google play and App store LOGO (PC) -->
4057                <div class="visible-md visible-lg col-md-3 col-lg-3 col-md-offset-2 col-lg-offset-2" style="display: none !important;">
4058                    <div class="row">
4059                        <div class="flex-app-load">
4060                            <div>
4061                                <a href="https://apps.apple.com/th/app/makewebeasy/id1010541713?l=th" target="_blank">
4062                                    <img class="app" alt="App Store" src="/web/en/images/app-store.webp">
4063                                </a>
4064                            </div>
4065                            <div>
4066                                <a href="https://play.google.com/store/apps/details?id=com.clicknext.makeweb.mwe&hl=en&gl=US" target="_blank">
4067                                    <img class="app" alt="Google Play" src="/web/en/images/google-play.webp">
4068                                </a>
4069                            </div>
4070                        </div>
4071                    </div>
4072                </div>
4073                <div class="col-md-3 col-lg-3 col-md-offset-1 col-lg-offset-1" style="display: none !important;">
4074                    <div class="row">
4075                        <div class="flex-app-load">
4076                            <div>
4077                                <a href="https://play.google.com/store/apps/details?id=com.clicknext.makeweb.mwe&hl=en&gl=US" target="_blank">
4078                                    <img class="app" alt="Google Play" src="/web/en/images/google_play_2022.webp">
4079                                </a>
4080                            </div>
4081                            <div>
4082                                <a href="https://apps.apple.com/th/app/makewebeasy/id1010541713?l=th" target="_blank">
4083                                    <img class="app" alt="App Store" src="/web/en/images/app_store.webp">
4084                                </a>
4085                            </div>
4086                        </div>
4087                    </div>
4088                </div>
4089                <!-- foot Box input email for following news (Mobile) -->
4090                <div class="visible-xs visible-sm col-xs-12 col-sm-6 col-sm-offset-3" style="display: none !important;">
4091                    <div class="footerRegister">
4092                        <p class="p text-blue text-lift"><strong>Subscribe to receive news from us</strong></p>
4093                        <form novalidate="novalidate" class="fv-form fv-form-bootstrap" role="form" name="formSubscribe" id="formSubscribe" method="post">
4094                            <div class="form-group">
4095                                <div class="input-group">
4096                                    <input type="email" class="form-control" name="subscribeMailMB" id="subscribeMailMB" placeholder="E-mail">
4097                                    <div class="input-group-btn">
4098                                        <button type="button" class="btn btn-blue" id="bt
4098nSubscribeMB">Subscribe</button>
4099                                    </div>
4100                                </div>
4101                                <small class="help-block serverResponse"></small>
4102                            </div>
4103                        </form>
4104                    </div>
4105                </div>
4106                <!-- foot Social for following LOGO (Mobile) -->
4107                <div class="visible-xs visible-sm col-xs-12 col-sm-12" style="margin-bottom: 10px; display: none !important;">
4108                    <div class="row">
4109                        <div class="footer-flex">
4110                            <div>
4111                                <a href="https://www.instagram.com/makewebeasy" target="_blank" rel="nofollow">
4112                                    <img class="img-social" src="/web/en/images/social/instagram.png" alt="IG MWE">
4113                                </a>
4114                            </div>
4115                            <div>
4116                                <a href="https://www.youtube.com/channel/UCmefGZmiQQGnSG_dF2CE7LQ" target="_blank" rel="nofollow">
4117                                    <img class="img-social" src="/web/en/images/social/youtube.png" alt="Youtube MWE">
4118                                </a>
4119                            </div>
4120                            <div>
4121                                <a href="https://www.facebook.com/makewebeasy" target="_blank" rel="nofollow">
4122                                    <img class="img-social" src="/web/en/images/social/facebook.png" alt="Facebook MWE">
4123                                </a>
4124                            </div>
4125                            <div>
4126                                <a href="https://line.me/R/ti/p/@makewebeasy" target="_blank" rel="nofollow">
4127                                    <img class="img-social" src="/web/en/images/social/LineMakewebeasyV2.png" alt="Line MWE">
4128                                </a>
4129                            </div>
4130                        </div>
4131                    </div>
4132                </div>
4133                <!-- foot App google play and App store LOGO (Mobile) -->
4134                <div class="visible-xs visible-sm col-xs-12 col-sm-12" style="margin-bottom: 10px; display: none !important;">
4135                    <div class="row">
4136                        <div class="footer-flex">
4137                            <div>
4138                                <a href="https://apps.apple.com/th/app/makewebeasy/id1010541713?l=th" target="_blank">
4139                                    <img class="img-app" alt="App Store" src="/web/en/images/app-store.webp">
4140                                </a>
4141                            </div>
4142                            <div>
4143                                <a href="https://play.google.com/store/apps/details?id=com.clicknext.makeweb.mwe&hl=en&gl=US" target="_blank">
4144                                    <img class="img-app" alt="Google Play" src="/web/en/images/google-play.webp">
4145                                </a>
4146                            </div>
4147                        </div>
4148                    </div>
4149                </div>
4150                <!-- foot Partner LOGO (Mobile) -->
4151                <div class="visible-xs visible-sm col-xs-12 col-sm-12" style="display: none !important;">
4152                    <div class="footer-flex" style="margin-bottom: 10px;">
4153                            <img class="border-right-partner img-footer logo-partner" src="/web/en/images/footer-partner/sme-awards.png" alt="SMEs Excellence Awards 2020" />
4154                            <img class="img-footer logo-partner" src="/web/en/images/footer-partner/ssl-encryption.png" alt="SECURE SSL ENCRYPTION" />
4155                    </div>
4156                    <div class="footer-flex">
4157                            <img class="img-footer logo-partner" src="/web/en/images/footer-partner/depa.png" alt="depa" />
4158                            <img class="img-footer logo-partner" src="/web/en/images/footer-partner/thai-ecommerce.png" alt="THAI E-COMMERCE ASSOCIATION" />
4159                            <img class="img-footer logo-partner" style="cursor: pointer;" src="/web/en/images/footer-partner/dbd.png" onclick="window.open('https://www.trustmarkthai.com/callbackData/popup.php?data=1e-37-4-bf171183d66f9e538710aacfec597ebcbcd6209213&markID=firstmark');" alt="DBD" />
4160                    </div>
4161                </div>
4162                            </div>
4163            <!-- foot copy right (PC/Mobile) -->
4164            <div class="row mt-16 border-top-for-footer">
4165                <div class="col-xs-12 col-md-6 mt-16">
4166                    <div class="footerCopyRight fs-content-s">
4167                        &copy;&nbsp;Copyright CLICKNEXT Company limited, 2018. All rights reserved.                    </div>
4168                </div>
4169                <div class="col-xs-12 col-md-6 mt-16">
4170                    <div class="footerPolicy fs-content-s">
4171                        <a href="/en/privacypolicy" class="inlineCaption">Privacy Policy&nbsp;&nbsp;</a>
4172                        &nbsp;|&nbsp;
4173                        <span class="spanElectronic inlineCaption">e-Registration No. 0105544115396</span>
4174                    </div>
4175                </div>
4176            </div>
4177        </div>
4178    </div>
4179</footer>
4180
4181
4182<script type="text/javascript">
4183    if ($(window).width() >= 992) {
4184        $('header .panel').on("mouseenter", function () {
4185            var panel_collapse_id = $(this).find('[data-toggle="collapse"]').attr('data-target');
4186            if (!$(this).hasClass('disabled')) {
4187                $(this).find('[data-toggle="collapse"]').removeClass("collapsed");
4188                $(panel_collapse_id).addClass("in").css('height', 'auto');
4189            }
4190        }).on("mouseleave", function () {
4191            var panel_collapse_id = $(this).find('[data-toggle="collapse"]').attr('data-target');
4192            $(this).find('[data-toggle="collapse"]').addClass("collapsed");
4193            $(panel_collapse_id).removeClass("in");
4194        });
4195    } else {
4196        $('header .panel .collapse').on('show.bs.collapse', function () {
4197            var panel_collapse_id = $(this).attr('id');
4198            $('header .panel .collapse').not(panel_collapse_id).collapse('hide');
4199        })
4200    }
4201    jQuery(".btnMyAccount").on('click', function () {
4202        document.location.href = '/en' + "/account";
4203    });
4204    jQuery(".btnLogout").on('click', function () {
4205        jQuery.ajax({
4206            type: "POST",
4207            url: "/web/en/ajaxAuthentication.php",
4208            data: {
4209                'type': "logout"
4210            }
4211        }).success(function () {
4212            document.location.href = "/en";
4213        });
4214    });
4215    // jQuery(".btnRegisterHome1").on('click', function (e) {
4216    //     e.preventDefault();
4217    //     showModalBS('1', '/page/buypackage/modalCustomerTrial.php', 'medium');
4218    // });
4219    
4220    function isEmailFormatSubscribe(email) {
4221        var regexTest = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,13}|[0-9]{1,3})(\]?)$/;
4222        return regexTest.test(email);
4223    }
4224    // emaill PC
4225    jQuery("#subscribeMail").on('change', function (e) {
4226        jQuery("#formSubscribe").find('.serverResponse').html('');
4227    });
4228    jQuery("#btnSubscribe").on('click', function (e) {
4229        var email = jQuery('#subscribeMail').val();
4230        if (email == "") {
4231            jQuery("#formSubscribe").find('.serverResponse').html('');
4232
4233        } else if (isEmailFormatSubscribe(email) == false) {
4234            jQuery("#formSubscribe").find('.serverResponse').html('Invalid email format');
4235
4236        } else {
4237            jQuery("#formSubscribe").find('.serverResponse').html('');
4238            jQuery.ajax({
4239                type: "POST",
4240                url: "/web/en/page/subscribe/ajaxSaveSubscribe.php",
4241                async: false,
4242                data: {
4243                    type: 'subscribe',
4244                    email: jQuery("#subscribeMail").val(),
4245                }
4246            }).error(function (xhs) {
4247                alert(xhs.status + " : " + xhs.statusText);
4248            }).success(function (returnData) {
4249                var data = JSON.parse(returnData);
4250                // console.log('');
4251                // console.log('reply...');
4252                // console.log(data);
4253
4254                if (data.status == '00') { //success
4255                    jQuery("#formSubscribe").find('.serverResponse').html('Thank y
4255ou for subscribing');
4256                } else if (data.status == '01') { //duplicate
4257                    jQuery("#formSubscribe").find('.serverResponse').html('This email is already registered');
4258                } else if (data.status == '02') { //empty
4259                    console.log(data.message);
4260                } else { //sql error
4261                    console.log(data.message);
4262                }
4263            });
4264        }
4265    });
4266
4267    // emaill mobile
4268    jQuery("#subscribeMailMB").on('change', function (e) {
4269        jQuery("#formSubscribe").find('.serverResponse').html('');
4270    });
4271    jQuery("#btnSubscribeMB").on('click', function (e) {
4272        var email = jQuery('#subscribeMailMB').val();
4273        if (email == "") {
4274            jQuery("#formSubscribe").find('.serverResponse').html('');
4275
4276        } else if (isEmailFormatSubscribe(email) == false) {
4277            jQuery("#formSubscribe").find('.serverResponse').html('Invalid email format');
4278
4279        } else {
4280            jQuery("#formSubscribe").find('.serverResponse').html('');
4281            jQuery.ajax({
4282                type: "POST",
4283                url: "/web/en/page/subscribe/ajaxSaveSubscribe.php",
4284                async: false,
4285                data: {
4286                    type: 'subscribe',
4287                    email: jQuery("#subscribeMailMB").val(),
4288                }
4289            }).error(function (xhs) {
4290                alert(xhs.status + " : " + xhs.statusText);
4291            }).success(function (returnData) {
4292                var data = JSON.parse(returnData);
4293                // console.log('');
4294                // console.log('reply...');
4295                // console.log(data);
4296
4297                if (data.status == '00') { //success
4298                    jQuery("#formSubscribe").find('.serverResponse').html('Thank y
4298ou for subscribing');
4299                } else if (data.status == '01') { //duplicate
4300                    jQuery("#formSubscribe").find('.serverResponse').html('This email is already registered');
4301                } else if (data.status == '02') { //empty
4302                    console.log(data.message);
4303                } else { //sql error
4304                    console.log(data.message);
4305                }
4306            });
4307        }
4308    });
4309    // jQuery(document).ready(function () {
4310    //     jQuery('#formSubscribe').formValidation({
4311    //         framework: 'bootstrap',
4312    //         excluded: [':disabled'],
4313    //         icon: {
4314    //             valid: 'glyphicon glyphicon-ok',
4315    //             invalid: '',
4316    //             validating: 'glyphicon glyphicon-refresh'
4317    //         },
4318    //         fields: {
4319    //             "subscribeMail": {
4320    //                 trigger: 'blur',
4321    //                 validators: {
4322    //                     emailAddress: {
4323    //                         message: 'Invalid email format'
4324    //                     }
4325    //                 }
4326    //             },
4327    //         }
4328    //     }).on('err.validator.fv', function (e, data) {
4329    //         // data.element
4330    //         //         .data('fv.messages')
4331    //         //         .find('.help-block[data-fv-for="' + data.field + '"]').hide()
4332    //         //         .filter('[data-fv-validator="' + data.validator + '"]').show();
4333    //     }).on('success.field.fv', function (e, data) {
4334    //         // var $parent = data.element.parents('.form-group');
4335    //         // $parent.removeClass('has-success');
4336    //     }).on('success.form.fv', function (e) {
4337    //         e.preventDefault();
4338    //         // var $form = $(e.target);
4339    //         // var bv = $form.data('formValidation');
4340    //         // var data = jQuery('#formSubscribe').serialize();
4341    //         // block_loading();
4342    //
4343    //         // jQuery.ajax({
4344    //         //     type: 'POST',
4345    //         //     url: "/web/en/page/contactus/ajaxSaveContactus.php",
4346    //         //     data: {
4347    //         //         name: jQuery("#textboxName").val(),
4348    //         //         email: jQuery("#textboxEmail").val(),
4349    //         //         website: jQuery("#textboxWebsite").val(),
4350    //         //         tel: jQuery("#textboxTel").val(),
4351    //         //         contactType: jQuery("#selectContactType").val(),
4352    //         //         message: jQuery("#textareaMessage").val()
4353    //         //     }
4354    //         // }).success(function (returnData) {
4355    //         //     ga('send', {
4356    //         //         'hitType': 'pageview',
4357    //         //         'page': '/contact-us-success'
4358    //         //     });
4359    //         //     document.location.reload();
4360    //         // });
4361    //
4362    //     });
4363    // });
4364</script>
4364
4365                    <div class="divLineMe hidden">
4366                        Chat with us
4367                    </div>
4368                </div>
4369                            
4370            
4371            <!-- Notice -->
4372            <style>
4373                #boxNotify {
4374                    position: fixed;
4375                    top: 130px;
4376                    right: 51px;
4377                }
4378                #boxNotify .alert {
4379                    padding: 10px 15px;
4380                    font-size: 24px;
4381                    line-height : 24px;
4382                    color: #008900;
4383                    background-color: #f9fef6;
4384                }
4385                #boxNotify .alert i {
4386                    line-height : 24px;
4387                    font-size: 24px;
4388                    color : #5FB412;
4389                }
4390                @media (max-width: 768px) {
4391                    #boxNotify {
4392                        top: 70px;
4393                        left: 15px;
4394                        right: 15px;
4395                    }
4396                    #boxNotify .alert {
4397                        width: 100%;
4398                        text-align: center;
4399                    }
4400                }
4401            </style>
4402            <div id="boxNotify">
4403            </div>
4404        
4405        <link rel="stylesheet" href="/web/en/plugin/circular-loading/circular-loading.css" />
4406        <link rel="stylesheet" href="/web/en/plugin/bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.css?v=001" />
4407        <link rel="stylesheet" href="/web/en/plugin/paceProgressBar/style.css" />
4408        <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" />-->
4409        <link rel="stylesheet" href="/web/en/css/animate.css?v=001" />
4410        <link rel="stylesheet" href="/web/en/plugin/formvalidation-master/dist/css/formValidation.min.css?v=001" />
4411
4412        
4412<script type="text/javascript" src="/web/en/plugin/bootstrap-gridlayout/masonry.pkgd.min.js?v=001"></script>
4412
4413        
4413<script type="text/javascript" src="/web/en/plugin/bootstrap-pagination/jquery.simplePagination.min.js"></script>
4413
4414        <!--
4414<script defer src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
4414-->
4415        
4415<script type="text/javascript" src="/web/en/plugin/bootstrap-less/js/bootstrap.min.js?v=001"></script>
4415
4416        
4416<script type="text/javascript" src="/web/en/plugin/air/js/material.js"></script>
4416
4417        <!-- 
4417<script type="text/javascript" src="/web/en/plugin/air/js/ripples.js"></script>
4417 -->
4418        
4418<script type="text/javascript" src="/web/en/plugin/paceProgressBar/pace.min.js"></script>
4418
4419        <!--
4419<script defer async type="text/javascript" src="/web/en/plugin/backtotop.js?v=002"></script>
4419-->
4420        
4420<script type="text/javascript" src="/web/en/plugin/slimscroll/jquery.slimscroll.min.js?v=001"></script>
4420
4421        
4421<script type="text/javascript" src="/web/en/plugin/function.js?v=202101271650"></script>
4421
4422        
4422<script type="text/javascript" src="/web/en/plugin/validation.js"></script>
4422
4423        
4423<script type="text/javascript" src="/web/en/plugin/jquery.mobile.custom.min.js?v=001"></script>
4423
4424        <!-- 
4424<script type="text/javascript" src="/web/en/plugin/formvalidation-master/dist/js/formValidation.js?v=001"></script>
4424 -->
4425        
4426                    
4426<script type="text/javascript" src="/web/en/plugin/formvalidation-master/dist/js/formValidation.min.js?v=001"></script>
4426
4427        
4428        
4428<script type="text/javascript" src="/web/en/plugin/formvalidation-master/dist/js/reCaptcha2.min.js?v=001"></script>
4428
4429        
4429<script type="text/javascript" src="/web/en/plugin/formvalidation-master/dist/js/framework/bootstrap.min.js?v=001"></script>
4429
4430        
4430<script type="text/javascript" src="/web/en/plugin/jQuery-Credit-Card-Input-Field/jquery.creditCardValidator.js"></script>
4430
4431        
4431<script type="text/javascript" src="/web/en/plugin/youtubeIframeApi/iframe_api.js"></script>
4431
4432        
4433        
4434        
4434<script type="text/javascript">
4435            // $(document).ready(function() { $('body').bootstrapMaterialDesign(); });
4436            // Material Design
4437            $.material.init({
4438                "validate": false,
4439                "input": true,
4440                "ripples": false,
4441                "checkbox": true,
4442                "togglebutton": false,
4443                "radio": true,
4444                "arrive": false,
4445                "autofill": false,
4446
4447                "inputElements": ".bmd-form-group input.form-control, .bmd-form-group textarea.form-control, .bmd-form-group select.form-control",
4448                "checkboxElements": "",
4449                "togglebuttonElements": "",
4450                "radioElements": ".bmd-form-group .radio"
4451            });
4452            // End Material Design
4453        </script>
4453
4454        
4454<script type="text/javascript">
4455            window._pt_lt = new Date().getTime();
4456            window._pt_sp_2 = [];
4457            _pt_sp_2.push('setAccount,1fa2c63c');
4458            var _protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
4459            (function () {
4460                var atag = document.createElement('script');
4461                atag.type = 'text/javascript';
4462                atag.async = true;
4463                atag.src = _protocol + 'cjs.ptengine.com/pta_en.js';
4464                var s = document.getElementsByTagName('script')[0];
4465                s.parentNode.insertBefore(atag, s);
4466            })();
4467        </script>
4467
4468        
4468<script type="text/javascript">
4469            // (function (d, s, id) {
4470            //     var js, fjs = d.getElementsByTagName(s)[0];
4471            //     if (d.getElementById(id))
4472            //         return;
4473            //     js = d.createElement(s);
4474            //     js.id = id;
4475            //     js.src = "//connect.facebook.com/en_US/sdk.js#xfbml=1&version=v2.5&appId=908723534764184";
4476            //     //js.src = "//connect.facebook.com/en_US/sdk.js#xfbml=1&version=v2.5&appId=993379534016025";
4477            //     //
4478            //     //js.src = "//connect.facebook.com/en_US/sdk.js";
4479            //     fjs.parentNode.insertBefore(js, fjs);
4480            // }(document, 'script', 'facebook-jssdk'));
4481
4482                            (function(d, s, id) {
4483                    var js, fjs = d.getElementsByTagName(s)[0];
4484                    if (d.getElementById(id)) return;
4485                    js = d.createElement(s); js.id = id;
4486                    js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0&appId=908723534764184&autoLogAppEvents=1';
4487                    fjs.parentNode.insertBefore(js, fjs);
4488                }(document, 'script', 'facebook-jssdk'));
4489            
4490            function block_loading() {
4491                jQuery("#divViewportLoading").addClass("active");
4492                jQuery(".section-body").addClass("loading");
4493                jQuery("header").addClass("loading");
4494            }
4495
4496            function unblock_loading() {
4497                setTimeout(function () {
4498                    jQuery("#divViewportLoading").removeClass("active");
4499                    jQuery(".section-body").removeClass("loading");
4500                    jQuery("header").removeClass("loading");
4501                }, 1000);
4502            }
4503
4504            function alert_limitTrial(version = '') {
4505                if (!version || (version != '3' && version != '4')) version = ''; // nomalize
4506                showModalBS('1', '/web/en/page/createwebfree/modalLimitTrial.php?version=' + version, 'medium');
4507            }
4508
4509            jQuery(".divLineMe").click(function () {
4510                window.open("https://line.me/ti/p/%40makewebeasy");
4511            });
4512
4513            jQuery(".divLineMe").bind('touchstart', function () {
4514                window.open("https://line.me/ti/p/%40makewebeasy");
4515            });
4516
4517            jQuery("#toTop").bind('touchstart', function () {
4518                jQuery(this).click();
4519            });
4520
4521            jQuery(".buttonCustomerTrial").on('click', function () {
4522                if ('' == '1') {
4523                    return;
4524                }
4525
4526                var version = jQuery(this).attr('version');
4527                if (!version || (version != '3' && version != '4')) version = ''; // nomalize
4528
4529                jQuery.ajax({
4530                    type: "POST",
4531                    url: "/web/en/page/createwebfree/ajaxCheckLimitTrial.php",
4532                    data: {
4533                        'type': "checkLimitTrial",
4534                        'version': version,
4535                    }
4536                }).success(function (data) {
4537                    if (data == '01') { //<limit
4538                        document.location.href = '/en/createwebfree' + (version ? `&version=${version}` : '');
4539                    } else if (data == '02') { //==limit
4540                        alert_limitTrial(version);
4541                    } else { //not login
4542                        document.location.href = '/en/register/createwebfree' + (version ? `&version=${version}` : '');
4543                    }
4544                });
4545            });
4546
4547
4548            jQuery(document).ready(function() {
4549                jQuery('body').on('keypress', '.inputNumber', function (event) {
4550                    var key = String.fromCharCode(event.which);
4551                    if (event.keyCode === 9 || event.keyCode === 8 || event.keyCode === 37 || event.keyCode === 39 || isNumber(key)) {
4552                        return true;
4553                    } else {
4554                        return false;
4555                    }
4556                });
4557                jQuery('body').on('keypress', '.inputPhoneNumber', function (event) {
4558                    var key = String.fromCharCode(event.which);
4559                    if (event.keyCode === 9 || event.keyCode === 8 || event.keyCode === 37 || event.keyCode === 39 || isPhoneNumber(key)) {
4560                        return true;
4561                    } else {
4562                        return false;
4563                    }
4564                });
4565                jQuery('body').on('keypress', '.inputEnglish', function (event) {
4566                    var key = String.fromCharCode(event.which);
4567                    if (event.keyCode === 9 || event.keyCode === 8 || event.keyCode === 37 || event.keyCode === 39 || isInputEnglish(key)) {
4568                        return true;
4569                    } else {
4570                        return false;
4571                    }
4572                });
4573                jQuery('body').on('keypress', '.inputEnglishAddress', function (event) {
4574                    var key = String.fromCharCode(event.which);
4575                    if (event.keyCode === 9 || event.keyCode === 8 || event.keyCode === 37 || event.keyCode === 39 || isInputEnglishAddress(key)) {
4576                        return true;
4577                    } else {
4578                        return false;
4579                    }
4580                });
4581                jQuery('body').on('keypress', '.inputEnglishForName', function (event) {
4582                    var key = String.fromCharCode(event.which);
4583                    if (event.keyCode === 9 || event.keyCode === 8 || event.keyCode === 37 || event.keyCode === 39 || isInputEnglishForName(key)) {
4584                        return true;
4585                    } else {
4586                        return false;
4587                    }
4588                });
4589                jQuery('body').on('keypress', '.inputEnglishCompanyname', function (event) {
4590                    var key = String.fromCharCode(event.which);
4591                    if (event.keyCode === 9 || event.keyCode === 8 || event.keyCode === 37 || event.keyCode === 39 || isInputEnglishCompanyname(key)) {
4592                        return true;
4593                    } else {
4594                        return false;
4595                    }
4596                });
4597
4598                jQuery('body').on('paste', '.inputNumber', function (event) {
4599                    var pastedData = event.originalEvent.clipboardData.getData('text');
4600                    if (isNumber(pastedData)) {
4601                        return true;
4602                    } else {
4603                        return false;
4604                    }
4605                });
4606                jQuery('body').on('paste', '.inputPhoneNumber', function (event) {
4607                    var pastedData = event.originalEvent.clipboardData.getData('text');
4608                    if (isPhoneNumber(pastedData)) {
4609                        return true;
4610                    } else {
4611                        return false;
4612                    }
4613                });
4614                jQuery('body').on('paste', '.inputEnglish', function (event) {
4615                    var pastedData = event.originalEvent.clipboardData.getData('text');
4616                    if (isInputEnglish(pastedData)) {
4617                        return true;
4618                    } else {
4619                        return false;
4620                    }
4621                });
4622                jQuery('body').on('paste', '.inputEnglishAddress', function (event) {
4623                    var pastedData = event.originalEvent.clipboardData.getData('text');
4624                    if (isInputEnglishAddress(pastedData)) {
4625                        return true;
4626                    } else {
4627                        return false;
4628                    }
4629                });
4630                jQuery('body').on('paste', '.inputEnglishForName', function (event) {
4631                    var pastedData = event.originalEvent.clipboardData.getData('text');
4632                    if (isInputEnglishForName(pastedData)) {
4633                        return true;
4634                    } else {
4635                        return false;
4636                    }
4637                });
4638                jQuery('body').on('paste', '.inputEnglishCompanyname', function (event) {
4639                    var pastedData = event.originalEvent.clipboardData.getData('text');
4640                    if (isInputEnglishCompanyname(pastedData)) {
4641                        return true;
4642                    } else {
4643                        return false;
4644                    }
4645                });
4646            });
4647
4648
4649            if ($(window).width() > 1200) {
4650                $("header").affix({
4651                    offset: {
4652                        /*top: 54 + 150*/
4653                        top: 40
4654                    }
4655                });
4656            } else if ($(window).width() > 1023) {
4657                $("header").affix({
4658                    offset: {
4659                        /*top: 54 + 150*/
4660                        top: 1
4661                    }
4662                });
4663            } else {
4664                $("header").affix({
4665                    offset: {
4666                        /*top: 120*/
4667                        top: 0
4668                    }
4669                });
4670            }
4671
4672            jQuery(".navbar-toggle").on('click', function () {
4673                if ($(this).hasClass('collapsed')) {
4674                    $('body').addClass('bodyLockScroll');
4675                } else {
4676                    $('body').removeClass('bodyLockScroll');
4677                }
4678            });
4679
4680            //Start Zopim Live Chat
4681                            // window.$zopim || (function (d, s) {
4682                //     var z = $zopim = function (c) {
4683                //         z._.push(c)
4684                //     }, $ = z.s =
4685                //             d.createElement(s), e = d.getElementsByTagName(s)[0];
4686                //     z.set = function (o) {
4687                //         z.set.
4688                //                 _.push(o)
4689                //     };
4690                //     z._ = [];
4691                //     z.set._ = [];
4692                //     $.async = !0;
4693                //     $.setAttribute("charset", "utf-8");
4694                //     $.src = "//v2.zopim.com/?35zUktLZtcj82eLmglevEavXqN8mh7NO";
4695                //     z.t = +new Date;
4696                //     $.
4697                //             type = "text/javascript";
4698                //     e.parentNode.insertBefore($, e)
4699                // })(document, "script");
4700                // $zopim(function () {
4701                //                     //         $zopim.livechat.setLanguage('en');
4702                //                     // });
4703                        //End Zopim Live Chat
4704
4705            /*$(window).on('load', function () {
4706             jQuery('body,html').animate({scrollTop: 0}, 800, function () {
4707             setTimeout(function () {
4708             //unblock_loading();
4709             jQuery("body").css("overflow-y", "auto");
4710             }, 900);
4711             });
4712             });*/
4713        </script>
4713
4714        
4714<script type="text/javascript">
4715            function showNotify(text, alertType = "success") {
4716                var alert = document.createElement("DIV");
4717                alert.classList.add("alert", `alert-${alertType}`, "animated", "fadeInUp", "animating" , 'fs-subheading');
4718                alert.innerHTML = text;
4719                
4720                var boxNotify = document.getElementById("boxNotify");
4721                boxNotify.appendChild(alert);
4722
4723                setTimeout(function () {
4724                    alert.classList.remove("animated", "fadeInUp");
4725                    alert.classList.add("animated", "fadeOut");
4726                    setTimeout(function () {
4727                        alert.classList.remove("animating");
4728
4729                        var alerts_showing = boxNotify.getElementsByClassName("animating");
4730                        if(alerts_showing.length == 0) {
4731                            boxNotify.innerHTML = '';
4732                        }
4733                    }, 1000);
4734                }, 3000);
4735            }
4736        </script>
4736
4737                <style>
4738            ._3XIlfKG-.pNTjs2V9{
4739                right: 0% !important;
4740            }
4741        </style>
4742        <!-- Phone Number -->
4743        
4743<script src='/web/en/plugin/google-libphonenumber-master/dist/libphonenumber.js'></script>
4743
4744        
4744<script type="text/javascript">
4745            function convertPhoneToE164(phone, country = null) {
4746                if (!phone || phone == null || phone == undefined || phone.toString().length < 2) return null;
4747
4748                if (!country) country = 'us' || 'th';
4749                country = country.toUpperCase();
4750
4751                var PNF = libphonenumber.PhoneNumberFormat;
4752                var phoneUtil = libphonenumber.PhoneNumberUtil.getInstance();
4753                var phoneNumber = phoneUtil.parseAndKeepRawInput(phone, country);
4754                
4755                return phoneUtil.format(phoneNumber, PNF.E164);
4756            }
4757        </script>
4757
4758        <!-- End Phone Number -->
4759        <style>
4760    html {
4761        scroll-behavior: smooth;
4762    }
4763    .box-picmodal{
4764        width: 100% !important;
4765    }
4766    @media (min-width: 1024px) {
4767        .banner-modal {
4768            width: 800px;
4769        }
4770    }
4771    @media (max-width: 1023px) {
4772        .banner-modal {
4773            width: 60vw;
4774        }
4775    }
4776    .banner-modal {
4777        position: fixed;
4778        top: 0;
4779        left: 50%;
4780        /* width: 60vw; */
4781        -webkit-transform: translate(-50%, 10%);
4782        -moz-transform: translate(-50%, 10%);
4783        -o-transform: translate(-50%, 10%);
4784        transform: translate(-50%, 10%);
4785        z-index: 1050;
4786    }
4787    .banner-modal-dialog {
4788        -webkit-transition: transform .3s ease-out;
4789        -moz-transition: transform .3s ease-out;
4790        -o-transition: transform .3s ease-out;
4791        transition: transform .3s ease-out;
4792    }
4793    .banner-modal-dialog.open {
4794        -webkit-transform: translateY(10%);
4795        -moz-transform: translateY(10%);
4796        -o-transform: translateY(10%);
4797        transform: translateY(10%);
4798    }
4799    .banner-modal-content {
4800        position: relative;
4801        background-color: transparent;
4802        border-radius: 4px;
4803        padding: 0 0 30px 0;
4804        -webkit-transition: opacity .15s linear;
4805        -moz-transition: opacity .15s linear;
4806        -o-transition: opacity .15s linear;
4807        transition: opacity .15s linear;
4808        opacity: 0;
4809    }
4810    .banner-modal-dialog.open .banner-modal-content {
4811        opacity: 1;
4812    }
4813    .banner-modal-content img {
4814        width: 100%;
4815    }
4816    .banner-modal-content .fa-times {
4817        position: absolute;
4818        top: 0;
4819        right: -35px;
4820        background-color: #FFFFFF33;
4821        border-radius: 4px;
4822        color: #FFFFFF;
4823        padding: 7px;
4824        cursor: pointer;
4825        font-size: 21px;
4826    }
4827    .banner-modal-content .today-not-show {
4828        position: absolute;
4829        bottom: 5px;
4830        left: 0;
4831        margin-bottom: 0;
4832        font-size: 14px;
4833        color: white;
4834    }
4835    .banner-modal-content .today-not-show [name="notShow"] {
4836        margin-right: 5px;
4837    }
4838    .banner-modal-content .overlay-redirect-wrapper {
4839        position: absolute;
4840        display: flex;
4841        width: calc(100% - 30px);
4842        height: calc(100% - 45px);
4843    }
4844    .banner-modal-content .overlay-redirect-wrapper .overlay-redirect {
4845        width: calc(100% / 0);
4846        height: 100%;
4847    }
4848    
4849    @media (max-width: 1920px) {
4850        .banner-modal {
4851            top: 50%;
4852            -webkit-transform: translate(-50%, -60%);
4853            -moz-transform: translate(-50%, -60%);
4854            -o-transform: translate(-50%, -60%);
4855            transform: translate(-50%, -60%);
4856        }
4857    }
4858    @media (max-width: 1200px) {
4859        .banner-modal-content {
4860            /* padding: 10px 10px 30px 10px; */
4861        }
4862        .banner-modal-content .overlay-redirect-wrapper {
4863            width: calc(100% - 20px);
4864            height: calc(100% - 40px);
4865        }
4866    }
4867    @media (max-width: 768px) {
4868        .banner-modal {
4869            width: 75vw;
4870        }
4871    }
4872    @media (max-width: 767px) {
4873        .banner-modal {
4874            width: 90vw;
4875        }
4876        .banner-modal-content {
4877            /* padding: 5px 5px 30px 5px; */
4878        }
4879        .banner-modal-content .fa-times {
4880            top: -30px;
4881            right: 0;
4882            padding: 5px;
4883            font-size: 16px;
4884        }
4885        .banner-modal-content .overlay-redirect-wrapper {
4886            width: calc(100% - 10px);
4887            height: calc(100% - 35px);
4888        }
4889    }
4890</style>
4891
4892<div class="banner-modal" id="bannerModal" style="display: none;">
4893    <div class="banner-modal-dialog">
4894        <div class="banner-modal-content">
4895            <i class="far fa-times" id="closeBannerModal"></i>
4896            <div class="container box-picmodal">
4897                <div class="row">
4898                    <div class="col-md-12" style="padding:0; display: flex;flex-direction: row;">
4899                                                                                                                    </div>
4900                </div>
4901            </div>
4902            <label class="today-not-show">
4903                <input type="checkbox" id="notShow" name="notShow" value="1"> Do not show again today. 
4904            </label>
4905        </div>
4906    </div>
4907</div>
4908
4909<div class="modal-backdrop fade in" id="bannerModalBackdrop" style="display: none;"></div>
4910
4911<script>
4912    $(function() { 
4913            }); 
4914
4915    $('#closeBannerModal').on('click', function () {
4916        closebanner();
4917        if($('#notShow').is(':checked')) {
4918            saveTimestamp();
4919        }
4920    });
4921
4922    $('#bannerModalBackdrop').on('click', function () {
4923        closebanner();
4924    });
4925
4926    function openbanner() {
4927        $('body').addClass('modal-open');
4928        $('#bannerModal').show();
4929        $('#bannerModalBackdrop').show();
4930        setTimeout(() => {
4931            $('.banner-modal-dialog').addClass('open');
4932        }, 150);
4933    }
4934
4935    function closebanner() {
4936        $('body').removeClass('modal-open');
4937        $('.banner-modal-dialog').removeClass('open');
4938        setTimeout(() => {
4939            $('#bannerModal').hide();
4940            $('#bannerModalBackdrop').hide();
4941        }, 150);
4942    }
4943
4944    function isShowBanner() {
4945        const page_type_can_working = [];
4946        if (page_type_can_working.includes('about-makewebeasy')) {
4947            const datetimeNotShowBanner = localStorage.getItem('datetimeNotShowBanner');
4948            if(!datetimeNotShowBanner) return 1; 
4949            const date1 = new Date(parseInt(datetimeNotShowBanner)); 
4950            const date2 = new Date();
4951            const diffTime = Math.abs(date2 - date1);
4952            const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)); 
4953            return diffDays > 0 ? 1 : 0;
4954        } 
4955
4956        return 0;
4957    }
4958
4959    function saveTimestamp() {
4960        const timestamp = new Date().getTime();
4961        localStorage.setItem('datetimeNotShowBanner', timestamp);
4962    }
4963</script>
4963
4964
4965        
4966<style>
4967    .policy-position{
4968        width: 100%;
4969        font-family: 'DB-Heavent' ,"open sans", arial, sans-serif !important;
4970        position: fixed;
4971        bottom: 0;
4972        z-index: 200;
4973    }
4974    .pad-row-pdpa{
4975        display: -ms-flexbox;
4976        display: flex;
4977        -ms-flex-wrap: wrap;
4978        flex-wrap: wrap;
4979        margin-right: -15px;
4980        margin-left: -15px;
4981    }
4982    .col-pdpa{
4983        align-items: center !important;
4984        display: flex;
4985    }
4986    .policy-position .pad-row-pdpa > div.col-12 {
4987        display: flex;
4988        justify-content: center;
4989        align-items: center;
4990    }
4991    .policy-position .txt-pdconsent{
4992        color: #ffffff;
4993    }
4994    .policy-position .txt-pdconsent a{
4995        color: #999999;
4996        text-decoration: underline;
4997    }
4998    .policy-position #btnAcceptPd{
4999        padding: 6px 30px;
5000        background-color: #24bee2;
5001        border-color: #24bee2;
5002        font-family: 'DB-Heavent' ,"open sans", arial, sans-serif !important;
5003        font-size: 21px; 
5004        color: #ffffff;
5005    }
5006    .pad-row-pdpa,.wrap-con{
5007        position: relative;
5008    }
5009
5010    .policy-container{
5011		background-color: rgba(0, 0, 0, 0.8);
5012		border-radius: 8px;
5013		margin-bottom: 8px;
5014	}
5015
5016    .policy-position #btn_setting_cookie{
5017        padding: 6px 30px;
5018		border: 1px solid #24bee2;
5019		background-color: transparent;
5020		color: #24bee2;
5021        font-size: 21px;
5022        font-family: 'DB-Heavent' ,"open sans", arial, sans-serif !important;
5023		margin-right: 10px;
5024    }
5025
5026    @media only screen and (min-width: 1025px) {
5027        .policy-position{
5028            font-size: 21px;
5029        }
5030        .policy-position .pad-row-pdpa{
5031            padding: 15px !important;
5032        }
5033        .cls-poli-dialog{
5034            position: absolute;
5035            right: 25px;
5036            top: 29%;
5037            color: #999999;
5038            font-size: 20px;
5039            cursor: pointer;
5040        }
5041    }
5042
5043    @media only screen and (min-width: 993px) and (max-width: 1024px) {
5044        .policy-position{
5045            font-size: 21px;
5046        }
5047        .policy-position .pad-row-pdpa{
5048            padding: 15px !important;
5049        }
5050        .cls-poli-dialog{
5051            position: absolute;
5052            right: 25px;
5053            top: 29%;
5054            color: #999999;
5055            font-size: 20px;
5056            cursor: pointer;
5057        }
5058    }
5059
5060    @media only screen and (min-width: 768px) and (max-width: 992px) {
5061        .policy-position{
5062            font-size: 21px;
5063        }
5064        .policy-position .pad-row-pdpa{
5065            padding: 15px !important;
5066        }
5067        .cls-poli-dialog{
5068            position: absolute;
5069            right: 25px;
5070            top: 29%;
5071            color: #999999;
5072            font-size: 20px;
5073            cursor: pointer;
5074        }
5075        .policy-position .colbtn{
5076            text-align: center;
5077        }
5078    }
5079
5080    @media only screen and (max-width: 767px) {
5081        .policy-position{
5082            font-size: 20px;
5083        }
5084        .policy-position .colbtn{
5085            margin-top: 10px;
5086            
5087        }
5088        .policy-position .pad-row-pdpa{
5089            padding: 15px !important;
5090        }
5091        .cls-poli-dialog{
5092            position: absolute;
5093            right: 8px;
5094            top: 11%;
5095            color: #999999;
5096            font-size: 20px;
5097            cursor: pointer;
5098        }
5099
5100        .policy-container{
5101            border-radius: 0px;
5102            margin-bottom: 0px;
5103        }
5104    }
5105</style>
5106
5107<div class="policy-position">
5108    <div class="wrap-con">
5109        <div class="container">
5110            <div class="row pad-row-pdpa policy-container">
5111                <div class="col-pdpa col-xs-12 col-sm-7 col-md-7 col-lg-9">
5112                    <span class="txt-pdconsent">
5113                        This website uses cookies for best user experience, to find out more you can go to our&nbsp;&nbsp;
5114                        <a href="/en/privacypolicy" target="_blank" class="text-blue">
5115                                                    </a>
5116                    </span>
5117                </div>
5118                <div class="col-pdpa col-xs-12 col-sm-5 col-md-5 col-lg-3 colbtn">
5119                    <button class="btnAcceptPd btn btn-style fw-normal" type="button" id="btn_setting_cookie">
5119Set Cookies</button>
5120                    <button class="btnAcceptPd btn btn-style fw-normal" type="button" id="btnAcceptPd">Accept</button>
5121                </div>
5122            </div>
5123        </div>
5124    </div>
5125</div>
5126
5127<script type="text/javascript">
5128    setAceptpd('_acepolicy', '0', 365);
5129        setAceptpd('_mwedocpdpaver', '1.0', 365);
5130    
5131    jQuery('#btn_setting_cookie').on('click', function () {
5132        showModalBS(0, '/web/en/page/privacypolicy/dialogPdpaController.php', 'large');
5133    });
5134
5135    jQuery('#btnAcceptPd').on('click', function () {
5136        var coname2 = getPdValue('_acepolicy');
5137        var nameissue = getPdValue('_mwedocpdpaver');
5138        if(coname2==0 && coname2!=''){
5139            setAceptpd('_acepolicy', '1', 365);
5140            setAceptpd('_mwedocpdpaver', '1.0', 365);
5141            let starttime = Date.now();
5142            setPdService(starttime);
5143        }else if(coname2==1 && coname2!=''){
5144            //do not
5145        }else if(coname2==''){
5146            setAceptpd('_acepolicy', '1', 365);
5147            setAceptpd('_mwedocpdpaver', '1.0', 365);
5148            let starttime = Date.now();
5149            setPdService(starttime);
5150        }
5151        jQuery('div.policy-position').hide();
5152    });
5153
5154    jQuery('.cls-poli-dialog').on('click', function () { 
5155        jQuery('div.policy-position').hide();
5156    });
5157
5158    function getPdValue(a) {
5159        var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
5160        return b ? b.pop() : '';
5161    }
5162
5163    function setAceptpd(name, value, days) {
5164        var expires = "";
5165        if (days) {
5166            var date = new Date();
5167            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
5168            expires = "; expires=" + date.toUTCString();
5169        }
5170        document.cookie = name + "=" + (value || "") + expires + ";path=/";
5171    }
5172
5173    function setPdService(time) {
5174        if(time!=''){
5175            jQuery.ajax({
5176                type: 'post',
5177                url: const_language_dir + 'page/privacypolicy/policyInfo.php',
5178                data: {
5179                    'type': 'acep',
5180                    'v': '0',
5181                    'acceptType':'All'
5182                },
5183                beforeSend: function (xhr) {
5184                
5185                },
5186                success: function (data, textStatus, jqXHR) {
5187                    if (data !== '1') {
5188                    console.log(data);
5189                    }
5190                }
5191            });
5192        }
5193
5194    }
5195
5196</script>
5196
5197
5198    </body>
5199</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.