https://huion.com/

Submitted URL:
https://huion.com
Report Finished:

The outgoing links identified from the page

LinkText
https://www.youtube.com/channel/UC1i6Qtt-ude6K1sVyFOhBXw
https://www.facebook.com/huion
https://www.instagram.com/huiontablet
https://twitter.com/HuionTab
https://www.tiktok.com/@huiontablet?lang=en

JavaScript Variables · 60 found

Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope

NameType
0object
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
$function
jQueryfunction
html5object
Modernizrobject
Vuefunction
__core-js_shared__object

Console log messages · 4 found

Messages logged to the web console

TypeCategoryLog
infoother
URL
https://huion.com/statics/hw/vue/vue.js
Text
Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools
infoother
URL
https://huion.com/statics/hw/vue/vue.js
Text
You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html
infoother
URL
https://huion.com/statics/hw/vue/vue.js
Text
Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools
infoother
URL
https://huion.com/statics/hw/vue/vue.js
Text
You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html

HTML

The raw HTML body of the page

<!DOCTYPE html><html lang="en" style="" class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Creative Pen Displays &amp; Tablets for Drawing - Huion </title>
	<meta name="keywords" content="Huion,pen tablets,pen display,led light pad,tablets,display,Kamvas,INSPIROY">
	<meta name="description" content="Huion graphic tablets are designed to inspire creativity in the digital art realm. Explore and shop the latest pen displays, pen tablets and LED light pad.">
	<meta name="google-site-verification" content="ddr6Bq9baHw9cOj6DrE4qicAdYB6XogpwUP2dvShlNk">
	<meta name="facebook-domain-verification" content="xdf0hq2rfbz1hp6kto0lmegfimn0h7">
	<link rel="stylesheet" href="/statics/hw/css/NewStyles.css">
    <script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id=G-FM25594C3Y&amp;l=dataLayer&amp;cx=c"></script><script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script><script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-W6ZF9K9"></script><script src="/statics/hw/js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="/statics/hw/js/modernizr-2.7.1.js" type="text/javascript"></script>
    <script src="/statics/hw/js/Els_tap.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/statics/hw/vue/index.css">
    <script src="/statics/hw/vue/vue.js"></script>
    <script src="/statics/hw/vue/index.js"></script>
    <!--20240704 add-->
    <script src="/statics/hw/js/flickerplate.js" type="text/javascript"></script>
    <link href="/statics/hw/css/swiper.min.css" type="text/css" rel="stylesheet">
    <script src="/statics/hw/js/swiper.min.js" type="text/javascript"></script>
    <!---->
<link rel="stylesheet" href="https://huion.com/statics/layer/theme/default/layer.css?v=3.1.1" id="layuicss-layer"><script async="" src="https://call.chatra.io/chatra.js"></script><style>@-webkit-keyframes chatra-chat-appear-from-bottom {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px) scale(.97);
    transform: translateY(20px) scale(.97);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}
@keyframes chatra-chat-appear-from-bottom {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px) scale(.97);
    transform: translateY(20px) scale(.97);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}
@-webkit-keyframes chatra-chat-appear-from-top {
  from {
    opacity: 0;
    -webkit-transform: translateY(-20px) scale(.97);
    transform: translateY(-20px) scale(.97);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}
@keyframes chatra-chat-appear-from-top {
  from {
    opacity: 0;
    -webkit-transform: translateY(-20px) scale(.97);
    transform: translateY(-20px) scale(.97);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}
@-webkit-keyframes chatra-chat-appear {
  from {
    opacity: 0;
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes chatra-chat-appear {
  from {
    opacity: 0;
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes chatra-round-button-appear {
  from {
    opacity: 0;
    -webkit-transform: scale(.5);
    transform: scale(.5);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes chatra-round-button-appear {
  from {
    opacity: 0;
    -webkit-transform: scale(.5);
    transform: scale(.5);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes chatra-tab-button-appear {
  from {
    opacity: 0;
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes chatra-tab-button-appear {
  from {
    opacity: 0;
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes chatra-transparent-appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes chatra-transparent-appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
html.chatra-mobile-widget-expanded,
body.chatra-mobile-widget-expanded {
  overflow: hidden !important;
  height: 100% !important;
  width: 100% !important;
  position: fixed !important;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
}
#chatra {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  max-height: calc(100% - 40px);
  max-width: calc(100% - 40px);
  -webkit-transition: .2s linear;
  transition: .2s linear;
  -webkit-transition-property: visibility,opacity;
  transition-property: visibility,opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: auto;
  height: auto;
  min-height: 0;
  min-width: 0;
  display: block;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  padding: 0;
  margin: 0;
}
@media print {
  #chatra {
    display: none;
  }
}
#chatra__iframe-wrapper,
#chatra__iframe {
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}
#chatra__iframe-wrapper {
  position: absolute;
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1),0 0 10px rgba(0,0,0,0.3);
  box-shadow: 0 0 3px rgba(0,0,0,0.1),0 0 10px rgba(0,0,0,0.3);
  overflow: hidden !important;
}
#chatra #chatra__iframe-wrapper,
#chatra.chatra--safari #chatra__iframe,
#chatra.chatra--webkit.chatra--expanded #chatra__iframe {
  border-radius: 12px;
}
#chatra.chatra--mobile-widget:not(.chatra--expanded),
#chatra.chatra--mobile-widget:not(.chatra--expanded) * {
  cursor: pointer;
}
#chatra.chatra--safari #chatra__iframe {
  -webkit-mask-image: -webkit-gradient(linear,left top, left bottom,from(#000),to(#000));
  -webkit-mask-image: linear-gradient(#000,#000);
  mask-image: -webkit-gradient(linear,left top, left bottom,from(#000),to(#000));
  mask-image: linear-gradient(#000,#000);
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
#chatra:not(.chatra--expanded) #chatra__iframe-wrapper {
  -webkit-transition: .2s linear;
  transition: .2s linear;
  -webkit-transition-property: -webkit-box-shadow;
  transition-property: -webkit-box-shadow;
  transition-property: box-shadow;
  transition-property: box-shadow, -webkit-box-shadow;
}
#chatra:not(.chatra--expanded):hover #chatra__iframe-wrapper {
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1),0 0 15px rgba(0,0,0,0.4);
  box-shadow: 0 0 3px rgba(0,0,0,0.1),0 0 15px rgba(0,0,0,0.4);
}
#chatra.chatra--visible {
  visibility: visible;
  opacity: 1;
}
#chatra.chatra--animating {
  -webkit-transition: 350ms cubic-bezier(.25,.1,0,1);
  transition: 350ms cubic-bezier(.25,.1,0,1);
  -webkit-transition-property: height,width,max-width,max-height,top,bottom,left,right,-webkit-transform;
  transition-property: height,width,max-width,max-height,top,bottom,left,right,-webkit-transform;
  transition-property: height,width,max-width,max-height,top,bottom,left,right,transform;
  transition-property: height,width,max-width,max-height,top,bottom,left,right,transform,-webkit-transform;
}
#chatra.chatra--style-round:not(.chatra--expanded) #chatra__iframe-wrapper,
#chatra.chatra--style-round.chatra--safari:not(.chatra--expanded) #chatra__iframe {
  border-radius: 50%;
}
#chatra.chatra--custom-button:not(.chatra--expanded) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none;
  -webkit-transition: none;
  transition: none;
}
#chatra.chatra--fast-toggle.chatra--style-round:not(.chatra--expanded) #chatra__iframe-wrapper {
  -webkit-animation: chatra-round-button-appear 150ms ease-out 50ms both;
  animation: chatra-round-button-appear 150ms ease-out 50ms both;
}
#chatra.chatra--fast-toggle.chatra--style-tab:not(.chatra--expanded) #chatra__iframe-wrapper {
  -webkit-animation: chatra-tab-button-appear 150ms ease-out 50ms both;
  animation: chatra-tab-button-appear 150ms ease-out 50ms both;
}
#chatra.chatra--fast-toggle.chatra--expanded #chatra__iframe-wrapper {
  -webkit-animation: chatra-chat-appear 150ms ease-out 50ms both;
  animation: chatra-chat-appear 150ms ease-out 50ms both;
}
#chatra.chatra--fast-toggle.chatra--transparent #chatra__iframe-wrapper {
  -webkit-animation-name: chatra-transparent-appear;
  animation-name: chatra-transparent-appear;
}
#chatra.chatra--fast-toggle.chatra--expanded:not(.chatra--mobile-widget):not(.chatra--transparent) #chatra__iframe-wrapper {
  -webkit-animation-name: chatra-chat-appear-from-bottom;
  animation-name: chatra-chat-appear-from-bottom;
}
#chatra.chatra--fast-toggle.chatra--pos-top.chatra--expanded:not(.chatra--mobile-widget):not(.chatra--transparent) #chatra__iframe-wrapper {
  -webkit-animation-name: chatra-chat-appear-from-top;
  animation-name: chatra-chat-appear-from-top;
}
#chatra.chatra--expanded #chatra__iframe-wrapper {
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1),0 5px 50px rgba(0,0,0,0.2);
  box-shadow: 0 0 3px rgba(0,0,0,0.1),0 5px 50px rgba(0,0,0,0.2);
}
#chatra.chatra--side-bottom {
  bottom: 20px;
}
#chatra.chatra--side-left {
  left: 20px;
}
#chatra.chatra--side-left.chatra--style-tab:not(.chatra--expanded) {
  left: 10px;
}
#chatra.chatra--side-right {
  right: 20px;
}
#chatra.chatra--side-right.chatra--style-tab:not(.chatra--expanded) {
  right: 10px;
}
#chatra.chatra--side-left.chatra--expanded {
  bottom: 20px;
  left: 20px;
}
#chatra.chatra--side-right.chatra--expanded {
  bottom: 20px;
  right: 20px;
}
#chatra.chatra--pos-right {
  right: 20px;
}
#chatra.chatra--pos-left {
  left: 20px;
}
#chatra.chatra--pos-center {
  left: 50%;
}
#chatra.chatra--pos-top.chatra--style-tab:not(.chatra--expanded) {
  bottom: 100%;
  margin-bottom: -20px;
}
#chatra.chatra--pos-top.chatra--style-round:not(.chatra--expanded) {
  top: 20px;
}
#chatra.chatra--pos-bottom:not(.chatra--expanded) {
  bottom: 20px;
}
#chatra.chatra--pos-middle:not(.chatra--expanded) {
  bottom: 50%;
}
#chatra.chatra--mobile-widget.chatra--expanded:not(.chatra--transparent) {
  max-width: none;
  max-height: none;
  top: 0 !important;
  bottom: 0 !important;
}
#chatra.chatra--mobile-widget.chatra--expanded #chatra__iframe-wrapper,
#chatra.chatra--safari.chatra--mobile-widget.chatra--expanded #chatra__iframe,
#chatra.chatra--webkit.chatra--mobile-widget.chatra--expanded #chatra__iframe {
  border-radius: .1px;
}
#chatra.chatra--mobile-widget.chatra--expanded.chatra--pos-right:not(.chatra--transparent) {
  right: 0;
}
#chatra.chatra--mobile-widget.chatra--expanded.chatra--pos-left:not(.chatra--transparent) {
  left: 0;
}
#chatra.chatra--mobile-widget.chatra--expanded.chatra--pos-center:not(.chatra--transparent) {
  left: 0;
}
#chatra.chatra--mobile-widget.chatra--expanded.chatra--side-right:not(.chatra--transparent) {
  right: 0;
}
#chatra.chatra--mobile-widget.chatra--expanded.chatra--side-left:not(.chatra--transparent) {
  left: 0;
}
#chatra.chatra--transparent.chatra--expanded {
  bottom: 10px;
}
#chatra.chatra--transparent.chatra--expanded #chatra__iframe-wrapper {
  -webkit-box-shadow: none;
  box-shadow: none;
}
#chatra.chatra--side-left.chatra--transparent,
#chatra.chatra--pos-left.chatra--transparent {
  left: 10px;
}
#chatra.chatra--side-right.chatra--transparent,
#chatra.chatra--pos-right.chatra--transparent {
  right: 10px;
}
#chatra.chatra--mobile-widget.chatra--transparent {
  max-height: 300px;
}
#chatra.chatra--bg-white {
  background: #fff;
}
</style></head>

	

<body>
    <script src="/statics/hw/js/mode.js" type="text/javascript"></script>
<script src="/statics/hw/js/jquery.cookie.js" type="text/javascript"></script>
<script src="/statics/hw/js/lazysizes.min.js" type="text/javascript"></script>
<style>
    .center {
        max-width: 1200px;
        margin: 0 auto;
    }

    .text-centered {
        text-align: center;
    }

    .H-Search-form {
        padding-left: 0 !important;
    }


    .H-buy-ico {
        background: url('/statics/hw/images/huion-all-icon.png') no-repeat -207px -112px !important;
    }

    .acitve-all {
        color: #00bfd6 !important;
    }

    .newHead {
        background: url('/statics/hw/images/jianbian2px.png') #000 no-repeat center bottom;
    }

    .nav-list {
        float: left;
        height: 60px;
        line-height: 60px;
    }

    .nav-list ul {
        height: 100%;
    }

    .nav-list ul li {
        float: left;
        margin-right: 50px;
    }

    .nav-list ul li .link {
        display: block;
        height: 59px;
        color: #fff;
        font-size: 14px;
        box-sizing: border-box;
    }

    .nav-list ul li.acitve-all .link,
    .nav-list ul li:hover .link {
        color: #00bfd6;
        border-bottom: 2px solid #00bfd6;
    }

    .menu .right-nav {
        float: right;
    }

    .top-store {
        float: left;
        width: 78px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        margin-top: 18px;
        background: #00bfd6;
        color: #fff;
        border-radius: 5px;
        font-size: 14px;
        padding: 0;
    }

    .top-store:hover {
        background: #07aec2;
    }

    .H-Search {
        padding: 24px 38px 0 38px;
    }
    .H-Search .se{
        background: url(/statics/hw/images/huion-all-icon.png) no-repeat -148px -112px;
        display: block;
        width: 16px;
        height: 16px;
    }
    #is_login {
        display: none;
    }

    .H-buy,
    .H-buy-2 {
        margin: 22px 0 0 0;
    }

    .H-list-ul ul li:hover .menu-sub {
        /* display: block; */
    }

    .menu {
        position: relative;
    }

    .menu-sub {
        width: 100%;
        background: #fff;
        position: absolute;
        top: 60px;
        left: 0;
        -webkit-box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
        box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
        line-height: 1;
        display: none;
    }

    .menu-sub.active {
        display: block;
        transition: all 0.3s;
    }

    /* 1 products-icon */
    .products-icon .pro-wrap .item * {
        display: inline-block;
        vertical-align: top;
    }

    .products-icon .item .one,
    .products-icon .item .second {
        float: left;
    }

    .products-icon .item .second {
        display: none;
    }

    .products-icon .item .second.active {
        display: block;
    }

    .products-icon .item .second .name {
        margin-left: 20px;
    }

    .products-icon .item .second .name:hover .two,
    .products-icon .item .second .name.active .two {
        color: #00bfd6;
    }

    .products-icon .pro-wrap .item .name.active .nav-pic {
        display: block;
    }

    .products-icon .item .second .name .two {
        font-size: 14px;
        color: #808080;
    }

    .products-icon .pro-wrap {
        position: relative;
        height: 290px;
        padding: 20px 0 0;
        text-align: center;
        width: 100%;
        overflow: hidden;
    }

    .products-icon .pro-wrap .item {
        display: inline-block;
        vertical-align: top;
        height: 16px;
        line-height: 16px;
        margin-right: 30px;
        cursor: pointer;
    }

    .products-icon .pro-wrap .item:last-child {
        margin-right: 0;
    }

    .products-icon .pro-wrap .item .one {
        font-size: 16px;
        color: #000;
    }

    .products-icon .pro-wrap .item .one a {
        color: #000;
    }

    .products-icon .pro-wrap .item .one a:hover,
    .products-icon .pro-wrap .item .one.active {
        font-weight: bold;
    }

    .products-icon .pro-wrap .item .nav-pic.active {
        display: block;
    }

    .products-icon .pro-wrap .item .nav-pic {
        position: absolute;
        left: 50%;
        top: 62px;
        width: 100%;
        display: none;
        transform: translateX(-50%);
        height: 206px;
        margin: 0 auto;
    }

    .products-icon .pro-wrap .item .pic {
        display: inline-block;
        vertical-align: top;
        width: 180px;
        margin-right: 24px;
        text-align: center;
    }

    .products-icon .pro-wrap .item .pic:last-child {
        margin-right: 0;
    }

    .products-icon .pro-wrap .item .pic .icon {
        position: relative;
        width: 180px;
        height: 180px;
        overflow: hidden;
        /* background: #ccc; */
    }

    .products-icon .pro-wrap .item .pic .icon img {
        position: absolute;
        top: 50%;
        left: 5%;
        width: 90%;
        transform: translateY(-50%);
        transition: all 0.3s;
    }

    .products-icon .pro-wrap .item .pic .icon img:hover {
        width: 100%;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

    .products-icon .pro-wrap .item .pic .model {
        font-size: 16px;
        color: #000;
        padding-top: 10px;
    }

    .products-icon .line {
        height: 1px;
        background: #eeeeee;
    }

    .products-icon .views.active {
        display: block;
    }

    .products-icon .views {
        display: none;
        padding: 20px 0;
    }

    .products-icon .views a {
        display: inline-block;
        font-size: 14px;
        color: #808080;
    }

    .products-icon .views .all-pro,
    .products-icon .views .all-acc {
        text-decoration: underline;
    }

    .products-icon .views .all-pro:hover,
    .products-icon .views .all-acc:hover {
        color: #333;
    }

    .products-icon .views .all-com:hover {
        color: #333;
        border: 1px solid #333;
    }

    .products-icon .views .all-acc {
        margin: 0 20px;
    }

    .products-icon .views .all-com {
        padding: 4px 12px;
        border: 1px solid #808080;
        border-radius: 6px;
    }

    /* 2,3 公共 */
    .enterprise-icon .sub-cont,
    .education-icon .sub-cont {
        display: none;
    }

    .enterprise-icon .sub-cont.active,
    .education-icon .sub-cont.active {
        display: block;
    }

    .enterprise-icon .sub-nav,
    .education-icon .sub-nav {
        padding-top: 22px;
    }

    .enterprise-icon .sub-nav .li,
    .education-icon .sub-nav .li {
        float: none;
        font-size: 16px;
        display: inline-block;
        margin-right: 28px;
        cursor: pointer;
    }

    .enterprise-icon .sub-nav .li:last-child,
    .education-icon .sub-nav .li:last-child {
        margin-right: 0
    }

    .enterprise-icon .sub-nav .li.active,
    .education-icon .sub-nav .li.active {
        font-weight: bold;
    }

    @-webkit-keyframes fadeInLeft {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-60px);
            transform: translateX(-60px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }

    @keyframes fadeInLeft {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-60px);
            -ms-transform: translateX(-60px);
            transform: translateX(-60px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }
    }

    .fadeInLeft {
        -webkit-animation-name: fadeInLeft;
        animation-name: fadeInLeft;
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.3s;
    }

    @-webkit-keyframes fadeInRight {
        0% {
            opacity: 0;
            -webkit-transform: translateX(60px);
            transform: translateX(60px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }

    @keyframes fadeInRight {
        0% {
            opacity: 0;
            -webkit-transform: translateX(60px);
            -ms-transform: translateX(60px);
            transform: translateX(60px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }
    }

    .fadeInRight {
        -webkit-animation-name: fadeInRight;
        animation-name: fadeInRight;
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.3s;
    }

    /* 2 enterprise */
    .enterprise-icon .item .sol-icon1 {
        background: url('/statics/hw/icon/home-enterprise-sol-icon1.jpg') no-repeat center center;
    }

    .enterprise-icon .item a:hover .sol-icon1 {
        background: url('/statics/hw/icon/home-enterprise-sol-icon1-sel.jpg') no-repeat center center;
    }

    .enterprise-icon .item .sol-icon2 {
        background: url('/statics/hw/icon/home-enterprise-sol-icon2.jpg') no-repeat center center;
    }

    .enterprise-icon .item a:hover .sol-icon2 {
        background: url('/statics/hw/icon/home-enterprise-sol-icon2-sel.jpg') no-repeat center center;
    }

    .enterprise-icon .item .sol-icon3 {
        background: url('/statics/hw/icon/home-enterprise-sol-icon3.jpg') no-repeat center center;
    }

    .enterprise-icon .item a:hover .sol-icon3 {
        background: url('/statics/hw/icon/home-enterprise-sol-icon3-sel.jpg') no-repeat center center;
    }

    .enterprise-icon .item .sol-icon4 {
        background: url('/statics/hw/icon/home-enterprise-sol-icon4.jpg') no-repeat center center;
    }

    .enterprise-icon .item a:hover .sol-icon4 {
        background: url('/statics/hw/icon/home-enterprise-sol-icon4-sel.jpg') no-repeat center center;
    }

    .enterprise-icon .item .sol-icon5 {
        background: url('/statics/hw/icon/home-enterprise-sol-icon5.jpg') no-repeat center center;
    }

    .enterprise-icon .item a:hover .sol-icon5 {
        background: url('/statics/hw/icon/home-enterprise-sol-icon5-sel.jpg') no-repeat center center;
    }

    .enterprise-icon .item .sol-icon6 {
        background: url('/statics/hw/icon/home-enterprise-sol-icon6.jpg') no-repeat center center;
    }

    .enterprise-icon .item a:hover .sol-icon6 {
        background: url('/statics/hw/icon/home-enterprise-sol-icon6-sel.jpg') no-repeat center center;
    }

    .enterprise-icon .item .pro-icon1 {
        background: url('/statics/hw/icon/home-enterprise-pro-icon1.jpg') no-repeat center center;
    }

    .enterprise-icon .item a:hover .pro-icon1 {
        background: url('/statics/hw/icon/home-enterprise-pro-icon1-sel.jpg') no-repeat center center;
    }

    .enterprise-icon .item .pro-icon2 {
        background: url('/statics/hw/icon/home-enterprise-pro-icon2.jpg') no-repeat center center;
    }

    .enterprise-icon .item a:hover .pro-icon2 {
        background: url('/statics/hw/icon/home-enterprise-pro-icon2-sel.jpg') no-repeat center center;
    }

    .enterprise-icon .item .pro-icon3 {
        background: url('/statics/hw/icon/home-education-pro-icon2.jpg') no-repeat center center;
    }

    .enterprise-icon .resources-item-open.active .pro-icon3,
    .enterprise-icon .item a:hover .pro-icon3 {
        background: url('/statics/hw/icon/home-education-pro-icon2-sel.jpg') no-repeat center center;
    }

    .enterprise-icon .sub-cont .item {
        /*padding-right: 80px;*/
    }

    /* 3 education */
    .education-icon .item .icon1 {
        background: url('/statics/hw/icon/home-education-sol-icon1.jpg') no-repeat center center;
    }

    .education-icon .item a:hover .icon1 {
        background: url('/statics/hw/icon/home-education-sol-icon1-sel.jpg') no-repeat center center;
    }

    .education-icon .item .icon2 {
        background: url('/statics/hw/icon/home-education-sol-icon2.jpg') no-repeat center center;
    }

    .education-icon .item a:hover .icon2 {
        background: url('/statics/hw/icon/home-education-sol-icon2-sel.jpg') no-repeat center center;
    }

    .education-icon .item .icon3 {
        background: url('/statics/hw/icon/home-education-sol-icon3.jpg') no-repeat center center;
    }

    .education-icon .item a:hover .icon3 {
        background: url('/statics/hw/icon/home-education-sol-icon3-sel.jpg') no-repeat center center;
    }

    .education-icon .item .pro-icon1 {
        background: url('/statics/hw/icon/home-education-pro-icon1.jpg') no-repeat center center;
    }

    .education-icon .item a:hover .pro-icon1 {
        background: url('/statics/hw/icon/home-education-pro-icon1-sel.jpg') no-repeat center center;
    }

    .education-icon .item .pro-icon2 {
        background: url('/statics/hw/icon/home-education-pro-icon2.jpg') no-repeat center center;
    }

    .education-icon .resources-item-open.active .pro-icon2,
    .education-icon .item a:hover .pro-icon2 {
        background: url('/statics/hw/icon/home-education-pro-icon2-sel.jpg') no-repeat center center;
    }

    .enterprise-icon .item .pro-icon4,
    .education-icon .item .pro-icon3 {
        background: url('/statics/hw/icon/home-education-pro-icon3.jpg') no-repeat center center;
    }

    .enterprise-icon .item a:hover .pro-icon4,
    .education-icon .item a:hover .pro-icon3 {
        background: url('/statics/hw/icon/home-education-pro-icon3-sel.jpg') no-repeat center center;
    }

    .enterprise-icon .item .pro-icon5,
    .education-icon .item .pro-icon4 {
        background: url('/statics/hw/icon/home-education-pro-icon4.jpg') no-repeat center center;
    }

    .enterprise-icon .item a:hover .pro-icon5,
    .education-icon .item a:hover .pro-icon4 {
        background: url('/statics/hw/icon/home-education-pro-icon4-sel.jpg') no-repeat center center;
    }

    .enterprise-icon .item .pro-icon6,
    .education-icon .item .pro-icon5 {
        background: url('/statics/hw/icon/home-education-pro-icon5.jpg') no-repeat center center;
    }

    .enterprise-icon .item a:hover .pro-icon6,
    .education-icon .item a:hover .pro-icon5 {
        background: url('/statics/hw/icon/home-education-pro-icon5-sel.jpg') no-repeat center center;
    }

    .resources-item {
        display: none !important;
    }

    .resources-item.active {
        display: inline-block !important;
    }

    /* 4,5公用 */
    .sub-cont {
        padding: 42px 0;
    }

    .sub-cont .item {
        width: 180px;
        display: inline-block;
        vertical-align: top;
        /*padding-right: 140px;*/
    }

    .sub-cont .item:last-child {
        padding-right: 0;
    }

    .sub-cont .item .icon {
        width: 52px;
        height: 52px;
        margin: 0 auto;
    }

    .sub-cont .item a {
        font-size: 14px;
        color: #000;
    }

    .sub-cont .resources-item-open.active a,
    .sub-cont .item a:hover {
        color: #00bfd6;
    }

    .sub-cont .item .desc {
        padding-top: 22px;
    }

    /* community */
    .community-icon .item .icon1 {
        background: url('/statics/hw/icon/home-community-icon1.jpg') no-repeat center center;
    }

    .community-icon .item a:hover .icon1 {
        background: url('/statics/hw/icon/home-community-icon1-sel.jpg') no-repeat center center;
    }

    .community-icon .item .icon2 {
        background: url('/statics/hw/icon/home-community-icon2.jpg') no-repeat center center;
    }

    .community-icon .item a:hover .icon2 {
        background: url('/statics/hw/icon/home-community-icon2-sel.jpg') no-repeat center center;
    }

    .community-icon .item .icon3 {
        background: url('/statics/hw/icon/home-community-icon3.jpg') no-repeat center center;
    }

    .community-icon .item a:hover .icon3 {
        background: url('/statics/hw/icon/home-community-icon3-sel.jpg') no-repeat center center;
    }

    /* support */
    .support-icon .item .icon1 {
        background: url('/statics/hw/icon/home-support-icon1.jpg') no-repeat center center;
    }

    .support-icon .item a:hover .icon1 {
        background: url('/statics/hw/icon/home-support-icon1-sel.jpg') no-repeat center center;
    }

    .support-icon .item .icon2 {
        background: url('/statics/hw/icon/home-support-icon2.jpg') no-repeat center center;
    }

    .support-icon .item a:hover .icon2 {
        background: url('/statics/hw/icon/home-support-icon2-sel.jpg') no-repeat center center;
    }

    .support-icon .item .icon3 {
        background: url('/statics/hw/icon/home-support-icon3.jpg') no-repeat center center;
    }

    .support-icon .item a:hover .icon3 {
        background: url('/statics/hw/icon/home-support-icon3-sel.jpg') no-repeat center center;
    }

    .support-icon .item .icon4 {
        background: url('/statics/hw/icon/home-support-icon4.jpg') no-repeat center center;
    }

    .support-icon .item a:hover .icon4 {
        background: url('/statics/hw/icon/home-support-icon4-sel.jpg') no-repeat center center;
    }
</style>
<header class="newHead" id="ScrollHead">
    <nav class="menu">
        <div class="center clearfix">
            <div class="H-logo">
                <a href="/"><img alt="logo" src="/statics/hw/images/logo.png"></a>
            </div>
            <div class="nav-list" id="list-ulFocus">
                <ul class="clearfix top-menu">
                    <li>
                        <a href="javascript:;" class="link se-point" id="20207">Products</a>
                        <div class="menu-sub products-icon">
                            <div class="center">
                                <div class="pro-wrap clearfix">
                                   <div class="item item-pro">
                                        <div class="one active">Pen Display</div>
                                        <div class="second active">
                                                                                                                                    <div class="name active">
                                                <div class="two">Kamvas Pro</div>
                                                <div class="nav-pic">
                                                                                                                                                            <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_display/KamvasPro/Kamvas-Pro-19.html" name="Pen Tablet Inspiroy 1_picture" id="20207043">
                                                            <div class="icon "><img data-src="/uploadfile/8542520240131060222416.jpg" alt="" class="lazyload"></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_display/KamvasPro/Kamvas-Pro-19.html" name="Pen Tablet Inspiroy 1" id="20207042">
                                                            <div class="model">Kamvas Pro 19</div>
                                                        </a>
                                                    </div>
                                                                                                        <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_display/KamvasPro/kamvas-pro-27.html" name="Pen Tablet Inspiroy 2_picture" id="20207045">
                                                            <div class="icon "><img data-src="/uploadfile/4186320240131060316908.jpg" alt="" class="lazyload"></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_display/KamvasPro/kamvas-pro-27.html" name="Pen Tablet Inspiroy 2" id="20207044">
                                                            <div class="model">Kamvas Pro 27</div>
                                                        </a>
                                                    </div>
                                                                                                        <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_display/KamvasPro/kamvas-pro-16-2k.html" name="Pen Tablet Inspiroy 3_picture" id="20207047">
                                                            <div class="icon "><img data-src="/uploadfile/6521620240131060200754.jpg" alt="" class="lazyload"></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_display/KamvasPro/kamvas-pro-16-2k.html" name="Pen Tablet Inspiroy 3" id="20207046">
                                                            <div class="model">Kamvas Pro 16(2.5K)</div>
                                                        </a>
                                                    </div>
                                                                                                        <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_display/KamvasPro/kamvas-pro-13-2k.html" name="Pen Tablet Inspiroy 4_picture" id="20207049">
                                                            <div class="icon "><img data-src="/uploadfile/5241420240131060135439.jpg" alt="" class="lazyload"></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_display/KamvasPro/kamvas-pro-13-2k.html" name="Pen Tablet Inspiroy 4" id="20207048">
                                                            <div class="model">Kamvas Pro 13(2.5K)</div>
                                                        </a>
                                                    </div>
                                                                                                        <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_display/KamvasPro/kamvas-pro-24-4k.html" name="Pen Tablet Inspiroy 5_picture" id="20207051">
                                                            <div class="icon "><img data-src="/uploadfile/7531420240131060249978.jpg" alt="" class="lazyload"></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_display/KamvasPro/kamvas-pro-24-4k.html" name="Pen Tablet Inspiroy 5" id="20207050">
                                                            <div class="model">Kamvas Pro 24(4K)</div>
                                                        </a>
                                                    </div>
                                                                                                    </div>
                                            </div>
                                                                                        <div class="name ">
                                                <div class="two">Kamvas</div>
                                                <div class="nav-pic">
                                                                                                                                                            <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_display/Kamvas/kamvas-13-gen-3.html" name="Pen Tablet Inspiroy Dial 1_picture" id="20207059">
                                                            <div class="icon "><img data-src="/uploadfile/5770520240904092134883.jpg" alt="" class="lazyload"></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_display/Kamvas/kamvas-13-gen-3.html" name="Pen Tablet Inspiroy Dial 1" id="20207058">
                                                            <div class="model">Kamvas 13 (Gen 3)</div>
                                                        </a>
                                                    </div>
                                                                                                        <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_display/Kamvas/kamvas-24-plus.html" name="Pen Tablet Inspiroy Dial 2_picture" id="20207061">
                                                            <div class="icon "><img data-src="/uploadfile/2085420240131060055648.jpg" alt="" class="lazyload"></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_display/Kamvas/kamvas-24-plus.html" name="Pen Tablet Inspiroy Dial 2" id="20207060">
                                                            <div class="model">Kamvas 24 Plus</div>
                                                        </a>
                                                    </div>
                                                                                                        <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_display/Kamvas/kamvas-16-2021.html" name="Pen Tablet Inspiroy Dial 3_picture" id="20207063">
                                                            <div class="icon "><img data-src="/uploadfile/7434320240131055953694.jpg" alt="" class="lazyload"></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_display/Kamvas/kamvas-16-2021.html" name="Pen Tablet Inspiroy Dial 3" id="20207062">
                                                            <div class="model">Kamvas 16(2021)</div>
                                                        </a>
                                                    </div>
                                                                                                        <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_display/Kamvas/kamvas-22-plus.html" name="Pen Tablet Inspiroy Dial 4_picture" id="20207065">
                                                            <div class="icon "><img data-src="/uploadfile/6716720240131060018276.jpg" alt="" class="lazyload"></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_display/Kamvas/kamvas-22-plus.html" name="Pen Tablet Inspiroy Dial 4" id="20207064">
                                                            <div class="model">Kamvas 22 Plus</div>
                                                        </a>
                                                    </div>
                                                                                                        <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_display/Kamvas/kamvas-13.html" name="Pen Tablet Inspiroy Dial 5_picture" id="20207067">
                                                            <div class="icon "><img data-src="/uploadfile/3457420240131055804678.jpg" alt="" class="lazyload"></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_display/Kamvas/kamvas-13.html" name="Pen Tablet Inspiroy Dial 5" id="20207066">
                                                            <div class="model">Kamvas 13</div>
                                                        </a>
                                                    </div>
                                                                                                    </div>
                                            </div>
                                            
                                        </div>

                                    </div>
                                    
                                    <div class="item item-pro">
                                        <div class="one">Pen Tablet</div>
                                        <div class="second">

                                                                                                                                    <div class="name active">
                                                <div class="two">Inspiroy</div>
                                                <div class="nav-pic">
                                                    
                                                                                                        <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_tablet/Inspiroy/Inspiroy-Frego-M.html" name="Pen Tablet Inspiroy Keydial 1_picture" id="20207075">
                                                            <div class="icon "><img data-src="/uploadfile/2588720240815111743557.jpg" class="lazyload" alt=""></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_tablet/Inspiroy/Inspiroy-Frego-M.html" name="Pen Tablet Inspiroy Keydial 1" id="20207074">
                                                            <div class="model">Inspiroy Frego M</div>
                                                        </a>
                                                    </div>
                                                                                                        <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_tablet/Inspiroy/Inspiroy-Frego-S.html" name="Pen Tablet Inspiroy Keydial 2_picture" id="20207077">
                                                            <div class="icon "><img data-src="/uploadfile/7336020240815111614184.jpg" class="lazyload" alt=""></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_tablet/Inspiroy/Inspiroy-Frego-S.html" name="Pen Tablet Inspiroy Keydial 2" id="20207076">
                                                            <div class="model">Inspiroy Frego S</div>
                                                        </a>
                                                    </div>
                                                                                                        <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_tablet/Inspiroy/H641P.html" name="Pen Tablet Inspiroy Keydial 3_picture" id="20207079">
                                                            <div class="icon "><img data-src="/uploadfile/3697220240131060557486.jpg" class="lazyload" alt=""></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_tablet/Inspiroy/H641P.html" name="Pen Tablet Inspiroy Keydial 3" id="20207078">
                                                            <div class="model">Inspiroy 2 S</div>
                                                        </a>
                                                    </div>
                                                                                                        <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_tablet/Inspiroy/H951P.html" name="Pen Tablet Inspiroy Keydial 4_picture" id="20207081">
                                                            <div class="icon "><img data-src="/uploadfile/8047820240131060514986.jpg" class="lazyload" alt=""></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_tablet/Inspiroy/H951P.html" name="Pen Tablet Inspiroy Keydial 4" id="20207080">
                                                            <div class="model">Inspiroy 2 M</div>
                                                        </a>
                                                    </div>
                                                                                                        <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_tablet/Inspiroy/H1061P.html" name="Pen Tablet Inspiroy Keydial 5_picture" id="20207083">
                                                            <div class="icon "><img data-src="/uploadfile/6311820240131060449228.jpg" class="lazyload" alt=""></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_tablet/Inspiroy/H1061P.html" name="Pen Tablet Inspiroy Keydial 5" id="20207082">
                                                            <div class="model">Inspiroy 2 L</div>
                                                        </a>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                                                                        <div class="name ">
                                                <div class="two">Inspiroy Pro</div>
                                                <div class="nav-pic">
                                                    
                                                                                                        <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_tablet/InspiroyPro/inspiroy-dial-2.html" name="Pen Tablet Inspiroy Giano 1_picture" id="20207107">
                                                            <div class="icon "><img data-src="/uploadfile/3038620240131060625864.jpg" class="lazyload" alt=""></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_tablet/InspiroyPro/inspiroy-dial-2.html" name="Pen Tablet Inspiroy Giano 1" id="20207106">
                                                            <div class="model">Inspiroy Dial 2</div>
                                                        </a>
                                                    </div>
                                                                                                        <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_tablet/InspiroyPro/inspiroy-giano.html" name="Pen Tablet Inspiroy Giano 2_picture" id="20207109">
                                                            <div class="icon "><img data-src="/uploadfile/6881720240131060648590.jpg" class="lazyload" alt=""></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_tablet/InspiroyPro/inspiroy-giano.html" name="Pen Tablet Inspiroy Giano 2" id="20207108">
                                                            <div class="model">Inspiroy Giano</div>
                                                        </a>
                                                    </div>
                                                                                                        <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_tablet/InspiroyPro/kd200.html" name="Pen Tablet Inspiroy Giano 3_picture" id="20207111">
                                                            <div class="icon "><img data-src="/uploadfile/6521320240131060717301.jpg" class="lazyload" alt=""></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_tablet/InspiroyPro/kd200.html" name="Pen Tablet Inspiroy Giano 3" id="20207110">
                                                            <div class="model">Inspiroy Keydial</div>
                                                        </a>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                            
                                        </div>

                                    </div>


                                    <div class="item item-pro">
                                        <div class="one">Pen Computer</div>
                                        <div class="second">
                                                                                                                                    <div class="name active">
                                                <div class="two">Kamvas Studio</div>
                                                <div class="nav-pic">

                                                                                                                                                            <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_computer/KamvasStudio/kamvas-studio-16.html" name="Pen Display Kamvas Pro 1_picture" id="20207139">
                                                            <div class="icon "><img data-src="/uploadfile/6522420240131055233608.jpg" class="lazyload" alt=""></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_computer/KamvasStudio/kamvas-studio-16.html" name="Pen Display Kamvas Pro 1" id="20207138">
                                                            <div class="model">Kamvas Studio 16</div>
                                                        </a>
                                                    </div>
                                                                                                        <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_computer/KamvasStudio/kamvas-studio-24.html" name="Pen Display Kamvas Pro 2_picture" id="20207141">
                                                            <div class="icon "><img data-src="/uploadfile/9667820240131055606404.jpg" class="lazyload" alt=""></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_computer/KamvasStudio/kamvas-studio-24.html" name="Pen Display Kamvas Pro 2" id="20207140">
                                                            <div class="model">Kamvas Studio 24</div>
                                                        </a>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                                                                        <div class="name ">
                                                <div class="two">Kamvas Slate</div>
                                                <div class="nav-pic">

                                                                                                                                                            <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/pen_computer/KamvasSlate/kamvas-slate-10.html" name="Pen Display Kamvas 1_picture" id="20207155">
                                                            <div class="icon "><img data-src="/uploadfile/5873020240830043446428.jpg" class="lazyload" alt=""></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/pen_computer/KamvasSlate/kamvas-slate-10.html" name="Pen Display Kamvas 1" id="20207154">
                                                            <div class="model">Kamvas Slate 10</div>
                                                        </a>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                            

                                        </div>
                                    </div>
                                    <div class="item item-pro">
                                        <div class="one">Smart Notebook</div>
                                        <div class="second">
                                                                                                                                    <div class="name active">
                                                <div class="two">Huion Note</div>
                                                <div class="nav-pic">

                                                                                                                                                            <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/Smart_NoteBook/Huion-Note/huion-note.html" name="Pen Computer Kamvas Studio 1_picture" id="20207171">
                                                            <div class="icon "><img data-src="/uploadfile/8926020240131060744770.jpg" class="lazyload" alt=""></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/Smart_NoteBook/Huion-Note/huion-note.html" name="Pen Computer Kamvas Studio 1" id="20207170">
                                                            <div class="model">Huion Note</div>
                                                        </a>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                                                                        <div class="name ">
                                                <div class="two">Huion&nbsp;Ink</div>
                                                <div class="nav-pic">

                                                                                                                                                            <div class="pic fadeInRight">
                                                        <a href="https://www.huion.com/products/Smart_NoteBook/Huion-Ink/huion-ink.html" name="Pen Tablet Huion Notebook 1_picture" id="20207123">
                                                            <div class="icon "><img data-src="/uploadfile/4633520240830104735431.jpg" class="lazyload" alt=""></div>
                                                        </a>
                                                        <a href="https://www.huion.com/products/Smart_NoteBook/Huion-Ink/huion-ink.html" name="Pen Tablet Huion Notebook 1" id="20207122">
                                                            <div class="model">Huion Ink</div>
                                                        </a>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                            

                                        </div>
                                    </div>
                                    <div class="item item-note">
                                        <div class="one">Accessories</div>
                                        <div class="nav-pic">
                                            <div class="pic fadeInRight">
                                                                                                                                                <a href="/index.php?m=content&amp;c=index&amp;a=lists&amp;catid=11&amp;leibie=1" class="se-point" id="20207203" name="Accessories Digital Pen1_picture">
                                                    <div class="icon"><img data-src="/uploadfile/7917620230413092317384.jpg" alt="" class="lazyload">
                                                    </div>
                                                </a>
                                                <a href="/index.php?m=content&amp;c=index&amp;a=lists&amp;catid=11&amp;leibie=1" class="se-click" id="20207202" name="Accessories Digital Pen 1">
                                                    <div class="model ">Digital Pen</div>
                                                </a>
                                                                                            </div>
                                            <div class="pic fadeInRight">
                                                                                                                                                <a href="/index.php?m=content&amp;c=index&amp;a=lists&amp;catid=11&amp;leibie=3" id="20207205" class="se-point" name="Accessories Stand 1_picture">
                                                    <div class="icon"><img data-src="/uploadfile/3702120230413023025963.jpg" alt="" class="lazyload">
                                                    </div>
                                                </a>
                                                <a href="/index.php?m=content&amp;c=index&amp;a=lists&amp;catid=11&amp;leibie=3" class="se-click" id="20207204" name="Accessories Stand 1">
                                                    <div class="model ">Stand</div>
                                                </a>
                                                                                            </div>
                                            <div class="pic fadeInRight">
                                                                                                                                                <a href="/index.php?m=content&amp;c=index&amp;a=lists&amp;catid=11&amp;leibie=7" id="20207207" class="se-point" name="Accessories Keyboard 1_picture">
                                                    <div class="icon"><img data-src="/uploadfile/4674620230413093726875.jpg" alt="" class="lazyload">
                                                    </div>
                                                </a>
                                                <a href="/index.php?m=content&amp;c=index&amp;a=lists&amp;catid=11&amp;leibie=7" id="20207206" class="se-click" name="Accessories Keyboard 1">
                                                    <div class="model ">Keyboard</div>
                                                </a>
                                                                                            </div>
                                        </div>
                                    </div>


                                </div>
                            </div>
                            <div class="btn">
                                <div class="line"></div>
                                <div class="views shuweiban text-centered ">
                                       <a href="/pen_tablet/more/" class="all-pro se-click" id="20207222">View All Pen
                                        Tablet</a>
                                    <a href="/accessories/" class="all-acc se-click" id="20207223">View All
                                        Accessories</a>
                                    <a href="/comparison/pen_tablet.html" class="all-com se-click" id="20207224">Model
                                        Comparison</a>
                                </div>
                                <div class="views shuweiping text-centered active">
                                  
                                   <a href="/pen_display/more/" class="all-pro se-click" id="20207222">View All Pen
                                        Display</a>
                                    <a href="/accessories/" class="all-acc se-click" id="20207223">View All
                                        Accessories</a>
                                    <a href="/comparison/pen_display.html" class="all-com se-click" id="20207224">Model
                                        Comparison</a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="javascript:;" class="link se-point" id="20213">Enterprise</a>
                        <div class="menu-sub enterprise-icon">
                            <div class="center">
                                <div class="sub-nav text-centered">
                                    <div class="li active">Solutions</div>
                                    <div class="li">Products</div>
                                </div>
                                <div class="sub-cont text-centered active fadeInLeft">
                                    <div class="item">
                                        <a href="https://www.huion.com/b2b/application/hospitality" target="_blank" class="se-click" id="20213001" name="HT">
                                            <div class="icon sol-icon1"></div>
                                            <div class="desc">Hospitality &amp; Tourism </div>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="https://www.huion.com/b2b/application/financial" target="_blank" class="se-click" id="20213003" name="FS">
                                            <div class="icon sol-icon2"></div>
                                            <div class="desc">Financial Services</div>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="https://www.huion.com/b2b/application/business" target="_blank" class="se-click" id="20213005" name="BO">
                                            <div class="icon sol-icon6"></div>
                                            <div class="desc">Business &amp; Office Work</div>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="https://www.huion.com/b2b" target="_blank" class="se-click" id="20213007" name="TC">
                                            <div class="icon sol-icon3"></div>
                                            <div class="desc">Telecommnunication</div>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="https://www.huion.com/b2b/application/medical" target="_blank" class="se-click" id="20213009" name="HC">
                                            <div class="icon sol-icon4"></div>
                                            <div class="desc">Medical Care</div>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="https://www.huion.com/b2b/application/government" target="_blank" class="se-click" id="20213011" name="GP">
                                            <div class="icon sol-icon5"></div>
                                            <div class="desc">Government &amp; Public Sectors</div>
                                        </a>
                                    </div>
                                </div>
                                <div class="sub-cont text-centered fadeInRight">
                                    <div class="item">
                                        <a href="https://www.huion.com/b2b/products?id=1" target="_blank" class="se-click" id="20213013" name="ES">
                                            <div class="icon pro-icon1"></div>
                                            <div class="desc">E-signing Products</div>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="https://www.huion.com/b2b/products?id=1" target="_blank" class="se-click" id="20213015" name="EM">
                                            <div class="icon pro-icon2"></div>
                                            <div class="desc">Electromagnetic Modules</div>
                                        </a>
                                    </div>
                                    <div class="item resources-item-open">
                                        <a href="javascript:;">
                                            <div class="icon pro-icon3"></div>
                                            <div class="desc">Resources</div>
                                        </a>
                                    </div>
                                    <div class="item resources-item">
                                        <a href="https://www.huion.com/b2b/supports" target="_blank" class="se-click" id="20213019" name="SDK">
                                            <div class="icon pro-icon4"></div>
                                            <div class="desc">SDK</div>
                                        </a>
                                    </div>
                                    <div class="item resources-item">
                                        <a href="https://www.huion.com/b2b/supports" target="_blank" class="se-click" id="20213020" name="CP">
                                            <div class="icon pro-icon5"></div>
                                            <div class="desc">Product Customization</div>
                                        </a>
                                    </div>
                                    <div class="item resources-item">
                                        <a href="https://www.huion.com/b2b/supports" target="_blank" class="se-click" id="20213021" name="CW">
                                            <div class="icon pro-icon6"></div>
                                            <div class="desc">Partner with us</div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="javascript:;" class="link se-point" id="20214">Education</a>
                        <div class="menu-sub education-icon">
                            <div class="center">
                                <div class="sub-nav text-centered">
                                    <div class="li active">Solutions</div>
                                    <div class="li">Products</div>
                                </div>
                                <div class="sub-cont text-centered active fadeInLeft">
                                    <div class="item">
                                        <a href="https://www.huion.com/b2b/education/digital" target="_blank" class="se-click" id="20214001" name="DA">
                                            <div class="icon icon1"></div>
                                            <div class="desc">Digital Art Classroom</div>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="https://www.huion.com/b2b/education/distance" target="_blank" class="se-click" id="20214002" name="RE">
                                            <div class="icon icon3"></div>
                                            <div class="desc">Distance Education</div>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="https://www.huion.com/b2b/education/smartclassroom" target="_blank" class="se-click" id="20214003" name="CT">
                                            <div class="icon icon2"></div>
                                            <div class="desc">Smart Classroom</div>
                                        </a>
                                    </div>
                                </div>
                                <div class="sub-cont text-centered fadeInRight">
                                    <div class="item">
                                        <a href="https://www.huion.com/b2b/products?id=2" target="_blank" class="se-click" id="20214004" name="ED">
                                            <div class="icon pro-icon1"></div>
                                            <div class="desc">Educational Equipment</div>
                                        </a>
                                    </div>
                                    <div class="item resources-item-open">
                                        <a href="javascript:;">
                                            <div class="icon pro-icon2"></div>
                                            <div class="desc">Resources</div>
                                        </a>
                                    </div>
                                    <div class="item resources-item">
                                        <a href="https://www.huion.com/b2b/supports" target="_blank" class="se-click" id="20214006" name="SDK">
                                            <div class="icon pro-icon3"></div>
                                            <div class="desc">SDK</div>
                                        </a>
                                    </div>
                                    <div class="item resources-item">
                                        <a href="https://www.huion.com/b2b/supports" target="_blank" class="se-click" id="20214007" name="CP">
                                            <div class="icon pro-icon4"></div>
                                            <div class="desc">Product Customization</div>
                                        </a>
                                    </div>
                                    <div class="item resources-item">
                                        <a href="https://www.huion.com/b2b/supports" target="_blank" class="se-click" id="20214008" name="CW">
                                            <div class="icon pro-icon5"></div>
                                            <div class="desc">Partner with us</div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="https://community.huion.com/" target="_blank" class="link se-point" id="20215">Community</a>
                        <div class="menu-sub community-icon">
                            <div class="center">
                                <div class="sub-cont text-centered fadeInLeft">
                                    <div class="item">
                                        <a href="https://community.huion.com/contest" target="_blank" class="se-click" id="20215001" name="CG">
                                            <div class="icon icon1"></div>
                                            <div class="desc">Contest</div>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="https://community.huion.com/gallery" target="_blank" class="se-click" id="20215002" name="GL">
                                            <div class="icon icon2"></div>
                                            <div class="desc">Gallery</div>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="https://community.huion.com/blog" target="_blank" class="se-click" id="20215003" name="BL">
                                            <div class="icon icon3"></div>
                                            <div class="desc">Blog</div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="/support" class="link se-point" id="20216">Support</a>
                        <div class="menu-sub support-icon">
                            <div class="center">
                                <div class="sub-cont text-centered fadeInLeft">
                                    <div class="item">
                                        <a href="/download" class="se-click" id="20216001">
                                            <div class="icon icon1"></div>
                                            <div class="desc">Download Center</div>
                                        </a>
                                    </div>
                                    <!--<div class="item">-->
                                    <!--    <a href="/download/?firmware=have">-->
                                    <!--        <div class="icon icon4"></div>-->
                                    <!--        <div class="desc">Firmware</div>-->
                                    <!--    </a>-->
                                    <!--</div>-->
                                    <div class="item">
                                        <a href="https://support.huion.com/en/support/home" target="_blank" class="se-click" id="20216010" name="FAQ">
                                            <div class="icon icon2"></div>
                                            <div class="desc">FAQs</div>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="/warranty" id="20216011" class="se-click" name="WR">
                                            <div class="icon icon3"></div>
                                            <div class="desc">Warranty</div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="H-Search-form AddNone">
                <div class="H-Search-form-wrapper">
                    <form name="search" type="get" action="/index.php" method="get" class="H-Search-form-get" role="search">
                        <input type="hidden" name="m" value="search">
                        <input type="hidden" name="c" value="index">
                        <input type="hidden" name="a" value="init">
                        <input type="hidden" name="typeid" value="" id="typeid">
                        <input type="hidden" name="siteid" value="1" id="siteid">
                        <div class="search-txt">
                            <input type="submit" class="search-sub" value="">
                            <input class="H-Search-form-input" type="text" name="q" aria-label="Search huion.com" placeholder="Search huion.com" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false">

                        </div>
                    </form>
                    <div class="H-Search-form-close">X</div>
                </div>
                <aside class="H-Search-drop-down">
                    <section class="H-Search-drop-down-section">
                        <div class="H-Search-wrapper">
                            <h3>Quick links</h3>
                            <ul>
                                
                                                                                                      <li><a href="/download?model=65">H1161</a></li>
                                                                                                                                        <li><a href="https://www.huion.com/news/introducing-kamvas-13-gen-3.html">Introducing Huion Kamvas 13 (Gen 3): It is Where Art Starts</a></li>
                                                                                                                                        <li><a href="https://www.huion.com/news/the-rookies-award-2024-huion-sponsor.html">The Rookies Awards 2024, sponsored by Huion and others, announced its winners!</a></li>
                                                                                                                                        <li><a href="https://www.huion.com/news/huion-announces-sponsorship-for-ted2024-conference.html">Huion Announces In-kind Sponsorship for TED2024 Conference</a></li>
                                                                                                                                        <li><a href="https://www.huion.com/news/huion-13th-anniversary.html">Huion Celebrates 13th Anniversary with 'Art is Long' Tribute</a></li>
                                                                                                                                        <li><a href="https://www.huion.com/news/huion-for-the-dreamer-drawing-contest.html">Submissions Open: Huion 'For the Dreamer' Drawing Competition</a></li>
                                                                                                                                        <li><a href="/download?model=27">H610PRO V2(8192)</a></li>
                                                                                                                                        <li><a href="/download?model=23">GT-191 V2(8192)</a></li>
                                                                                                                                        <li><a href="/download?model=18">420(2048)</a></li>
                                                                  
                            </ul>
                        </div>
                    </section>
                </aside>
            </div>
            <div class="right-nav">
                <a onclick="huion_store('https://store.huion.com')" target="_blank" class="top-parent top-store se-point" id="20218" style="cursor: pointer;">Store</a>
                <div class="H-Search">
                    <div class="se"></div>
                </div>
                <div id="is_login"></div><div class="H-buy"><aside class="H-drop-down"><nav class="drop-down-navbar drop-down-nav2"><ul><li><a href="javascript:;" class="H-buy-ico" aria-label="user"></a><ul><span class="drop-Arrow"></span><li class="login-ico-01"><a href="https://account.huion.com/login?redirect_url=https://www.huion.com/&amp;app_id=us_official_website&amp;lang=EN-US&amp;web_site=" target="_blank"><span class="login-ic login-ic1"></span>Login</a></li><li class="login-ico-02"><a href="https://account.huion.com/register?redirect_url=https://www.huion.com/&amp;app_id=us_official_website&amp;lang=EN-US&amp;web_site=" target="_blank"><span class="login-ic login-ic2"></span>Register</a></li></ul></li></ul></nav></aside></div>
                <div id="ac-gn-curtain" class="ac-gn-curtain AddNone" data-original-aria-hidden="" aria-hidden="true">
                </div>
            </div>
        </div>
    </nav>
    <!-- <div class="H-Bkhr"><img src="https://www.huion.com/statics/hw/images/jianbian2px.png"></div> -->
    <!-- end -->
    <div style="display: none;" id="showagreement_info">
        <div style="padding: 10px;">
            
                        <div style="line-height: 24px;"><div style="text-align:center;margin:14px;font-size:16px;" class="fontstyle">HUION Official Website Platform User Agreement</div>&nbsp;&nbsp;&nbsp;&nbsp;Checking “I have read and agreed with the HUION Official Website Platform User Agreement” means you agree with and undertake to observe this Agreement.<br>
 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HUION shall have the right to modify or supplement this Agreement and announce it on www.huion.com. Your continuation to releasing works on HUION official website shall be deemed as your acceptance of such modification or supplementation, otherwise you have the right to cease releasing works on HUION.<br>
 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="fontstyle">I.Contents uploading</span><br>
 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.	You shall make sure that the contents of works uploaded do not violate laws and regulations, contain no illegal or harmful factors of violent, pornographic and reactionary nature, or infringe any legal right of any third party.<br>
 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.	As a network service provider, HUION does not have the sufficient monitoring capacity with respect to any occurrence of infringement. Should any right holder deem that the works uploaded by other users have infringed his/her/its copyright, please feel free to contact us with the following evidences: (a) the identify certificate of right holder, including the I. D. Card, corporate business license, business license, etc.; (b) the title to copyright and the certificate of initial public publishing of the works, including the original manuscript, etc. (c) statement of infringement, including the contents and locations of the infringement &nbsp;being claimed. We will take appropriate actions to safeguard your legal rights upon verification.<br>
 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.	Materials provided by HUION shall be used for exchanges among users only, but not of merchandising and profit-making nature. In case of any commercial infringement or dispute arising out of the use of materials provided by HUION platform by any third party in his/her works, all responsibilities shall be borne by such third party itself.<br>
 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.	In the event any user breaks this Agreement, HUION shall have the right to require such user to compensate the loss (including but not limited to fine, indemnification, compensation, penalty, attorney fee, notarization fee and legal cost, etc.) suffered by HUION thereby.<br>
 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="fontstyle">II.Rights and obligations</span><br>
 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1. 	You shall confirm with HUION that you can autonomously submit to and release on the official website your original works (hereinafter referred to as “the works”) via the platform of HUION official website for sharing and paid use by users, and that any transaction established via HUION platform shall have nothing to do with HUION.<br>
 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2. 	You shall guarantee that your works are created by you independently without (a) plagiarizing the works of anyone else, (b) adapting others’ works or using the works, pictures and writings of others for creation without authorization; (c) violating the laws and regulations on copyright or involving any dispute.<br>
 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="fontstyle">III.Statement and guarantee</span><br>
 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.	You shall guarantee that the performance of this agreement will neither infringe the rights and interests of any third party, including without limitation to the right of reputation and the portrait right, nor go against any agreement signed between you and a third party to invoke any claim by such third party; you shall guarantee that the performance of this Agreement by HUION will not infringe the legal rights and interests of any third party. In case of any dispute arising from your breach of this Agreement, you shall take the responsibility of settling it, including stepping forward to handle the complaints forwarded by HUION.<br> &nbsp;
 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.	You shall agree with and authorize HUION website to provide your personal data as required by any law enforcement agency or for public security purpose, according to any government department, judicial authority, right holder, etc. pursuant to legal procedures.<br>
 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="fontstyle">IV.Miscellaneous</span><br>
 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.	HUION platform shall have the right to modify or delete your uploaded contents if it deems those are inappropriate, or even block your ID if it is of severe nature.<br>
 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.	Any dispute arising out of or in connection with the Agreement shall be submitted to be settled by the people’s court in the place where HUION is located, as per the laws of P. R. China.<br>
 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HUION shall reserve the right of interpretation to the terms and clauses above.<br></div>        </div>
            </div>
</header>
<script>
    function timestampToDateTime(timestamp) {
        let date = new Date(timestamp);

        let year = date.getFullYear();
        let month = pad(date.getMonth() + 1);
        let day = pad(date.getDate());
        let hours = pad(date.getHours());
        let minutes = pad(date.getMinutes());
        let seconds = pad(date.getSeconds());

        return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
    }

    function pad(num) {
        return num.toString().padStart(2, '0');
    }
    const TabletList = document.querySelectorAll('.name .nav-pic');
    let clickLog = {
        session_id: '',
        user_id: '',//用户id
        page_url: window.location.href,
        referrer_url: document.referrer,
        // page_encoding: 'HOM01', 
        element_id: 0,
        page_name: 0,
        element: '',
        country_name: 'EN'
    }
    let cookies_u = document.cookie;
    // 获取PHPSESSID的值
    if (cookies_u.match(/web_identity=([^;]+)/)) {
        let phpse = cookies_u.match(/web_identity=([^;]+)/)[1];
        if (phpse) {
            clickLog.session_id = phpse
        }
    }
    if (cookies_u.match(/web_userid=([^;]+)/)) {
        let suid = cookies_u.match(/web_userid=([^;]+)/)[1];
        if (suid) {
            clickLog.user_id = suid
        }
    }
    const newArr = document.querySelectorAll('.name .nav-pic .pic a');
    let clickList = Array.from(newArr)
    clickList.forEach(item => {
        let enterTime;
        item.addEventListener('click', () => {
            clickLog.page_name = item.id
            let str = clickLog.page_name.toString();
            clickLog.element_id = parseInt(str.substring(str.length - 3))
            clickLog.element = item.name

            let timestamp = Date.now();
            clickLog.time_stamp = timestampToDateTime(timestamp)

            clickLog.event_type = 'click'
            delete clickLog.start_timestamp
            delete clickLog.end_timestamp
            delete clickLog.stay_time
            $.ajax({

                url: "https://data-us.penmonitor.com/api/click",
                type: "post",
                // dataType: "json",
                contentType: "application/x-www-form-urlencoded",
                data: clickLog,
                success: function (data) {

                },
                error: function () {

                },
            });
        });
        item.addEventListener('mouseenter', () => {
            enterTime = Date.now();
            clickLog.page_name = item.id
            let str = clickLog.page_name.toString();
            clickLog.element_id = parseInt(str.substring(str.length - 3))
            clickLog.element = item.name

        });
        item.addEventListener('mouseleave', () => {
            delete clickLog.time_stamp
            delete clickLog.event_type
            let leaveTime = Date.now();
            let timeInBox = leaveTime - enterTime;
            if (timeInBox > 3000) {
                clickLog.start_timestamp = enterTime
                clickLog.end_timestamp = leaveTime
                clickLog.stay_time = formatTimeDifference(enterTime, leaveTime);

                $.ajax({
                    url: "https://data-us.penmonitor.com/api/stay",
                    type: "post",
                    // dataType: "json",
                    contentType: "application/x-www-form-urlencoded",
                    data: clickLog,
                    success: function (data) {

                    },
                    error: function () {

                    },
                });
            }
        });
    })
    TabletList.forEach((item, index) => {
        let list = Array.from(item.children)
        switch (index) {
            case 0:
                list.forEach((it, i) => {
                    let chd = Array.from(it.children)
                    switch (i) {
                        case 0:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy 1_picture'
                                        child.id = 20207043
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy 1'
                                        child.id = 20207042
                                        break;
                                    default:
                                        break;
                                }

                            })

                            break;
                        case 1:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy 2_picture'
                                        child.id = 20207045
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy 2'
                                        child.id = 20207044
                                        break;
                                    default:
                                        break;
                                }

                            })

                            break;
                        case 2:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy 3_picture'
                                        child.id = 20207047
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy 3'
                                        child.id = 20207046
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 3:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy 4_picture'
                                        child.id = 20207049
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy 4'
                                        child.id = 20207048
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 4:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy 5_picture'
                                        child.id = 20207051
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy 5'
                                        child.id = 20207050
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 5:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy 6_picture'
                                        child.id = 20207053
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy 6'
                                        child.id = 20207052
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 6:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy 7_picture'
                                        child.id = 20207055
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy 7'
                                        child.id = 20207054
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 7:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy 8_picture'
                                        child.id = 20207057
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy 8'
                                        child.id = 20207056
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;

                        default:
                            break;
                    }




                })

                break;
            // 第二块
            case 1:


                list.forEach((it, i) => {
                    let chd = Array.from(it.children)
                    switch (i) {
                        case 0:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Dial 1_picture'
                                        child.id = 20207059
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Dial 1'
                                        child.id = 20207058
                                        break;
                                    default:
                                        break;
                                }

                            })

                            break;
                        case 1:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Dial 2_picture'
                                        child.id = 20207061
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Dial 2'
                                        child.id = 20207060
                                        break;
                                    default:
                                        break;
                                }

                            })

                            break;
                        case 2:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Dial 3_picture'
                                        child.id = 20207063
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Dial 3'
                                        child.id = 20207062
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 3:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Dial 4_picture'
                                        child.id = 20207065
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Dial 4'
                                        child.id = 20207064
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 4:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Dial 5_picture'
                                        child.id = 20207067
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Dial 5'
                                        child.id = 20207066
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 5:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Dial 6_picture'
                                        child.id = 20207069
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Dial 6'
                                        child.id = 20207068
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 6:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Dial 7_picture'
                                        child.id = 20207071
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Dial 7'
                                        child.id = 20207070
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 7:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Dial 8_picture'
                                        child.id = 20207073
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Dial 8'
                                        child.id = 20207072
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;

                        default:
                            break;
                    }




                })

                break;
            // 第三块
            case 2:


                list.forEach((it, i) => {
                    let chd = Array.from(it.children)
                    switch (i) {
                        case 0:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Keydial 1_picture'
                                        child.id = 20207075
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Keydial 1'
                                        child.id = 20207074
                                        break;
                                    default:
                                        break;
                                }

                            })

                            break;
                        case 1:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Keydial 2_picture'
                                        child.id = 20207077
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Keydial 2'
                                        child.id = 20207076
                                        break;
                                    default:
                                        break;
                                }

                            })

                            break;
                        case 2:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Keydial 3_picture'
                                        child.id = 20207079
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Keydial 3'
                                        child.id = 20207078
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 3:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Keydial 4_picture'
                                        child.id = 20207081
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Keydial 4'
                                        child.id = 20207080
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 4:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Keydial 5_picture'
                                        child.id = 20207083
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Keydial 5'
                                        child.id = 20207082
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 5:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Keydial 6_picture'
                                        child.id = 20207085
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Keydial 6'
                                        child.id = 20207084
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 6:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Keydial 7_picture'
                                        child.id = 20207087
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Keydial 7'
                                        child.id = 20207086
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 7:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Keydial 8_picture'
                                        child.id = 20207089

                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Keydial 8'
                                        child.id = 20207088
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;

                        default:
                            break;
                    }




                })

                break;
            // // 第四块
            // case 3:


            //     list.forEach((it, i) => {
            //         let chd = Array.from(it.children)
            //         switch (i) {
            //             case 0:
            //                 chd.forEach((child, ch) => {
            //                     switch (ch) { 
            //                         case 0:
            //                             child.name = 'Pen Tablet Inspiroy lnk 1_picture'
            //                             child.id = 20207091
            //                             break;
            //                         case 1:
            //                             child.name = 'Pen Tablet Inspiroy lnk 1'
            //                             child.id = 20207090
            //                             break;
            //                         default:
            //                             break;
            //                     }

            //                 })

            //                 break;
            //             case 1:
            //                 chd.forEach((child, ch) => {
            //                     switch (ch) {
            //                         case 0:
            //                             child.name = 'Pen Tablet Inspiroy lnk 2_picture'
            //                             child.id = 20207093
            //                             break;
            //                         case 1:
            //                             child.name = 'Pen Tablet Inspiroy lnk 2'
            //                             child.id = 20207092
            //                             break;
            //                         default:
            //                             break;
            //                     }

            //                 })

            //                 break;
            //             case 2:
            //                 chd.forEach((child, ch) => {
            //                     switch (ch) {
            //                         case 0:
            //                             child.name = 'Pen Tablet Inspiroy lnk 3_picture'
            //                             child.id = 20207095
            //                             break;
            //                         case 1:
            //                             child.name = 'Pen Tablet Inspiroy lnk 3'
            //                             child.id = 20207094
            //                             break;
            //                         default:
            //                             break;
            //                     }

            //                 })
            //                 break;
            //             case 3:
            //                 chd.forEach((child, ch) => {
            //                     switch (ch) {
            //                         case 0:
            //                             child.name = 'Pen Tablet Inspiroy lnk 4_picture'
            //                             child.id = 20207097
            //                             break;
            //                         case 1:
            //                             child.name = 'Pen Tablet Inspiroy lnk 4'
            //                             child.id = 20207096
            //                             break;
            //                         default:
            //                             break;
            //                     }

            //                 })
            //                 break;
            //             case 4:
            //                 chd.forEach((child, ch) => {
            //                     switch (ch) {
            //                         case 0:
            //                             child.name = 'Pen Tablet Inspiroy lnk 5_picture'
            //                             child.id = 20207099
            //                             break;
            //                         case 1:
            //                             child.name = 'Pen Tablet Inspiroy lnk 5'
            //                             child.id = 20207098
            //                             break;
            //                         default:
            //                             break;
            //                     }

            //                 })
            //                 break;
            //             case 5:
            //                 chd.forEach((child, ch) => {
            //                     switch (ch) {
            //                         case 0:
            //                             child.name = 'Pen Tablet Inspiroy lnk 6_picture'
            //                             child.id = 20207101
            //                             break;
            //                         case 1:
            //                             child.name = 'Pen Tablet Inspiroy lnk 6'
            //                             child.id = 20207100
            //                             break;
            //                         default:
            //                             break;
            //                     }

            //                 })
            //                 break;
            //             case 6:
            //                 chd.forEach((child, ch) => {
            //                     switch (ch) {
            //                         case 0:
            //                             child.name = 'Pen Tablet Inspiroy lnk 7_picture'
            //                             child.id = 20207103
            //                             break;
            //                         case 1:
            //                             child.name = 'Pen Tablet Inspiroy lnk 7'
            //                             child.id = 20207102
            //                             break;
            //                         default:
            //                             break;
            //                     }

            //                 })
            //                 break;
            //             case 7:
            //                 chd.forEach((child, ch) => {
            //                     switch (ch) {
            //                         case 0:
            //                             child.name = 'Pen Tablet Inspiroy lnk 8_picture'
            //                             child.id = 20207105
            //                             break;
            //                         case 1:
            //                             child.name = 'Pen Tablet Inspiroy lnk 8'
            //                             child.id = 20207104
            //                             break;
            //                         default:
            //                             break;
            //                     }

            //                 })
            //                 break;

            //             default:
            //                 break;
            //         }




            //     })

            //     break;
            // 第四块
            case 3:


                list.forEach((it, i) => {
                    let chd = Array.from(it.children)
                    switch (i) {
                        case 0:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Giano 1_picture'
                                        child.id = 20207107
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Giano 1'
                                        child.id = 20207106
                                        break;
                                    default:
                                        break;
                                }

                            })

                            break;
                        case 1:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Giano 2_picture'
                                        child.id = 20207109
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Giano 2'
                                        child.id = 20207108
                                        break;
                                    default:
                                        break;
                                }

                            })

                            break;
                        case 2:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Giano 3_picture'
                                        child.id = 20207111
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Giano 3'
                                        child.id = 20207110
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 3:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Giano 4_picture'
                                        child.id = 20207113
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Giano 4'
                                        child.id = 20207112
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 4:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Giano 5_picture'
                                        child.id = 20207115
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Giano 5'
                                        child.id = 20207114
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 5:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Giano 6_picture'
                                        child.id = 20207117
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Giano 6'
                                        child.id = 20207116
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 6:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Giano 7_picture'
                                        child.id = 20207119
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Giano 7'
                                        child.id = 20207118
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 7:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Inspiroy Giano 8_picture'
                                        child.id = 20207121
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Inspiroy Giano 8'
                                        child.id = 20207120
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;

                        default:
                            break;
                    }




                })

                break;

            // 第五块
            case 4:


                list.forEach((it, i) => {
                    let chd = Array.from(it.children)
                    switch (i) {
                        case 0:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Display Kamvas Pro 1_picture'
                                        child.id = 20207139
                                        break;
                                    case 1:
                                        child.name = 'Pen Display Kamvas Pro 1'
                                        child.id = 20207138
                                        break;
                                    default:
                                        break;
                                }

                            })

                            break;
                        case 1:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Display Kamvas Pro 2_picture'
                                        child.id = 20207141
                                        break;
                                    case 1:
                                        child.name = 'Pen Display Kamvas Pro 2'
                                        child.id = 20207140
                                        break;
                                    default:
                                        break;
                                }

                            })

                            break;
                        case 2:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Display Kamvas Pro 3_picture'
                                        child.id = 20207143
                                        break;
                                    case 1:
                                        child.name = 'Pen Display Kamvas Pro 3'
                                        child.id = 20207142
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 3:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Display Kamvas Pro 4_picture'
                                        child.id = 20207145
                                        break;
                                    case 1:
                                        child.name = 'Pen Display Kamvas Pro 4'
                                        child.id = 20207144
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 4:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Display Kamvas Pro 5_picture'
                                        child.id = 20207147
                                        break;
                                    case 1:
                                        child.name = 'Pen Display Kamvas Pro 5'
                                        child.id = 20207146
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 5:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Display Kamvas Pro 6_picture'
                                        child.id = 20207149
                                        break;
                                    case 1:
                                        child.name = 'Pen Display Kamvas Pro 6'
                                        child.id = 20207148
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 6:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Display Kamvas Pro 7_picture'
                                        child.id = 20207151
                                        break;
                                    case 1:
                                        child.name = 'Pen Display Kamvas Pro 7'
                                        child.id = 20207150
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 7:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Display Kamvas Pro 8_picture'
                                        child.id = 20207153
                                        break;
                                    case 1:
                                        child.name = 'Pen Display Kamvas Pro 8'
                                        child.id = 20207152
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;



                        default:
                            break;
                    }




                })

                break;
            // 第六块
            case 5:


                list.forEach((it, i) => {
                    let chd = Array.from(it.children)
                    switch (i) {
                        case 0:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Display Kamvas 1_picture'
                                        child.id = 20207155
                                        break;
                                    case 1:
                                        child.name = 'Pen Display Kamvas 1'
                                        child.id = 20207154
                                        break;
                                    default:
                                        break;
                                }

                            })

                            break;
                        case 1:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Display Kamvas 2_picture'
                                        child.id = 20207157
                                        break;
                                    case 1:
                                        child.name = 'Pen Display Kamvas 2'
                                        child.id = 20207156
                                        break;
                                    default:
                                        break;
                                }

                            })

                            break;
                        case 2:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Display Kamvas 3_picture'
                                        child.id = 20207159
                                        break;
                                    case 1:
                                        child.name = 'Pen Display Kamvas 3'
                                        child.id = 20207158
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 3:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Display Kamvas 4_picture'
                                        child.id = 20207161
                                        break;
                                    case 1:
                                        child.name = 'Pen Display Kamvas 4'
                                        child.id = 20207160
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 4:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Display Kamvas 5_picture'
                                        child.id = 20207163
                                        break;
                                    case 1:
                                        child.name = 'Pen Display Kamvas 5'
                                        child.id = 20207162
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 5:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Display Kamvas 6_picture'
                                        child.id = 20207165
                                        break;
                                    case 1:
                                        child.name = 'Pen Display Kamvas 6'
                                        child.id = 20207164
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 6:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Display Kamvas 7_picture'
                                        child.id = 20207167
                                        break;
                                    case 1:
                                        child.name = 'Pen Display Kamvas 7'
                                        child.id = 20207166
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 7:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Display Kamvas 8_picture'
                                        child.id = 20207169
                                        break;
                                    case 1:
                                        child.name = 'Pen Display Kamvas 8'
                                        child.id = 20207168
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;

                        default:
                            break;
                    }




                })

                break;

            // 第7块
            case 6:


                list.forEach((it, i) => {
                    let chd = Array.from(it.children)
                    switch (i) {
                        case 0:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Computer Kamvas Studio 1_picture'
                                        child.id = 20207171
                                        break;
                                    case 1:
                                        child.name = 'Pen Computer Kamvas Studio 1'
                                        child.id = 20207170
                                        break;
                                    default:
                                        break;
                                }

                            })

                            break;
                        case 1:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Computer Kamvas Studio 2_picture'
                                        child.id = 20207173
                                        break;
                                    case 1:
                                        child.name = 'Pen Computer Kamvas Studio 2'
                                        child.id = 20207172
                                        break;
                                    default:
                                        break;
                                }

                            })

                            break;
                        case 2:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Computer Kamvas Studio 3_picture'
                                        child.id = 20207175
                                        break;
                                    case 1:
                                        child.name = 'Pen Computer Kamvas Studio 3'
                                        child.id = 20207174
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 3:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Computer Kamvas Studio 4_picture'
                                        child.id = 20207177
                                        break;
                                    case 1:
                                        child.name = 'Pen Computer Kamvas Studio 4'
                                        child.id = 20207176
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 4:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Computer Kamvas Studio 5_picture'
                                        child.id = 20207179
                                        break;
                                    case 1:
                                        child.name = 'Pen Computer Kamvas Studio 5'
                                        child.id = 20207178
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 5:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Computer Kamvas Studio 6_picture'
                                        child.id = 20207181
                                        break;
                                    case 1:
                                        child.name = 'Pen Computer Kamvas Studio 6'
                                        child.id = 20207180
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 6:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Computer Kamvas Studio 7_picture'
                                        child.id = 20207183
                                        break;
                                    case 1:
                                        child.name = 'Pen Computer Kamvas Studio 7'
                                        child.id = 20207182
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 7:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Computer Kamvas Studio 8_picture'
                                        child.id = 20207185
                                        break;
                                    case 1:
                                        child.name = 'Pen Computer Kamvas Studio 8'
                                        child.id = 20207184
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;

                        default:
                            break;
                    }




                })

                break;
            // 第8块
            case 7:


                list.forEach((it, i) => {
                    let chd = Array.from(it.children)
                    switch (i) {
                        case 0:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Huion Notebook 1_picture'
                                        child.id = 20207123
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Huion Notebook 1'
                                        child.id = 20207122
                                        break;
                                    default:
                                        break;
                                }

                            })

                            break;
                        case 1:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Huion Notebook 2_picture'
                                        child.id = 20207125
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Huion Notebook 2'
                                        child.id = 20207124
                                        break;
                                    default:
                                        break;
                                }

                            })

                            break;
                        case 2:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Huion Notebook 3_picture'
                                        child.id = 20207127
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Huion Notebook 3'
                                        child.id = 20207126
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 3:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Huion Notebook 4_picture'
                                        child.id = 20207129
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Huion Notebook 4'
                                        child.id = 20207128
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;
                        case 4:
                            chd.forEach((child, ch) => {
                                switch (ch) {
                                    case 0:
                                        child.name = 'Pen Tablet Huion Notebook 5_picture'
                                        child.id = 20207131
                                        break;
                                    case 1:
                                        child.name = 'Pen Tablet Huion Notebook 5'
                                        child.id = 20207130
                                        break;
                                    default:
                                        break;
                                }

                            })
                            break;


                        default:
                            break;
                    }




                })

                break;
            default:
                break;
        }


    })


</script>
<script>
   function formatTimeDifference(timestamp1, timestamp2) {
                    let diff = timestamp2 - timestamp1;
                    let sec = Math.floor(diff / 1000);

                    return sec;
                }
    function timestampToDateTime(timestamp) {
        let date = new Date(timestamp);
        let year = date.getFullYear();
        let month = pad(date.getMonth() + 1);
        let day = pad(date.getDate());
        let hours = pad(date.getHours());
        let minutes = pad(date.getMinutes());
        let seconds = pad(date.getSeconds());

        return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
    }

    function pad(num) {
        return num.toString().padStart(2, '0');
    }
    const sepList = document.querySelectorAll('.se-point');
    const secList = document.querySelectorAll('.se-click');
    let se_clickLog = {
        session_id: '',
        user_id: '',//用户id
        page_url: window.location.href,
        referrer_url: document.referrer,
        // page_encoding: 'HOM01', 
        element_id: 0,
        page_name: 0,
        element: "",
        country_name: 'EN'
    }
    let cookies_web = document.cookie;
    // 获取PHPSESSID的值
    if (cookies_web.match(/web_identity=([^;]+)/)) {
        let phps = cookies_web.match(/web_identity=([^;]+)/)[1];
        if (phps) {
            se_clickLog.session_id = phps
        }
    }
    if (cookies_web.match(/web_userid=([^;]+)/)) {
        let wuid = cookies_web.match(/web_userid=([^;]+)/)[1];
        if (wuid) {
            se_clickLog.user_id = wuid
        }
    }
    sepList.forEach(box => {


        // 记录移入时间
        let enterTime;

        box.addEventListener('click', () => {
            if (box.name) {
                se_clickLog.element = box.name
            } else {
                se_clickLog.element = ''
            }
            se_clickLog.page_name = box.id;
            let str = box.id.toString();
            if (str.length > 6) {
                se_clickLog.element_id = parseInt(str.substring(str.length - 3));
            } else {
                se_clickLog.element_id = 0
            }
            let timestamp = Date.now();
            se_clickLog.time_stamp = timestampToDateTime(timestamp);
            se_clickLog.event_type = 'click'
            delete se_clickLog.start_timestamp
            delete se_clickLog.end_timestamp
            delete se_clickLog.stay_time

            $.ajax({

                url: "https://data-us.penmonitor.com/api/click",
                type: "post",
                // dataType: "json",
                contentType: "application/x-www-form-urlencoded",
                data: se_clickLog,
                success: function (data) {

                },
                error: function () {

                },
            });
        });
        box.addEventListener('mouseenter', () => {
            enterTime = Date.now();
            if (box.name) {
                se_clickLog.element = box.name
            } else {
                se_clickLog.element = ''
            }
            se_clickLog.page_name = box.id;
            let str = box.id.toString();
            if (str.length > 6) {
                se_clickLog.element_id = parseInt(str.substring(str.length - 3));
            } else {
                se_clickLog.element_id = 0
            }
        });
        box.addEventListener('mouseleave', () => {
            delete se_clickLog.time_stamp
            delete se_clickLog.event_type
            let leaveTime = Date.now();
            let timeInBox = leaveTime - enterTime;
            if (timeInBox > 3000) {
                se_clickLog.start_timestamp = enterTime
                se_clickLog.end_timestamp = leaveTime
                se_clickLog.stay_time = formatTimeDifference(enterTime, leaveTime);
                $.ajax({
                    url: "https://data-us.penmonitor.com/api/stay",
                    type: "post",
                    // dataType: "json",
                    contentType: "application/x-www-form-urlencoded",
                    data: se_clickLog,
                    success: function (data) {

                    },
                    error: function () {

                    },
                });

            }
        });
    })
    secList.forEach(box => {


        // 记录移入时间
        box.addEventListener('click', () => {
            if (box.name) {
                se_clickLog.element = box.name
            } else {
                se_clickLog.element = ''
            }
            se_clickLog.page_name = box.id;
            let str = box.id.toString();
            if (str.length > 6) {
                se_clickLog.element_id = parseInt(str.substring(str.length - 3));
            } else {
                se_clickLog.element_id = 0
            }
            let timestamp = Date.now();
            se_clickLog.time_stamp = timestampToDateTime(timestamp);
            se_clickLog.event_type = 'click'
            delete se_clickLog.start_timestamp
            delete se_clickLog.end_timestamp
            delete se_clickLog.stay_time
            $.ajax({

                url: "https://data-us.penmonitor.com/api/click",
                type: "post",
                // dataType: "json",
                contentType: "application/x-www-form-urlencoded",
                data: se_clickLog,
                success: function (data) {

                },
                error: function () {

                },
            });

        });
    });

</script>
<script>

    $(document).ready(function () {
        $(".H-Search").click(function () {
            $(".H-Search-form ,.ac-gn-curtain").addClass("AddBlock").removeClass("AddNone");
            $(".nav-list .link,.top-store,.H-buy,.H-buy-2,.H-Search").addClass("AddNone").removeClass("AddBlock")
        });
        $(".h-movie-video").click(function () {
            $(".mod_player-wrap,.ac-gn-curtain").addClass("AddBlock").removeClass("AddNone")
        });
        $(".video-eject-icon").click(function () {
            $(".mod_player-wrap,.ac-gn-curtain").addClass("AddNone").removeClass("AddBlock")
        });
        $(".H-Search-form-close ,.ac-gn-curtain").click(function () {
            $(".H-Search-form,.ac-gn-curtain,.mod_player-wrap").addClass("AddNone").removeClass("AddBlock");
            $(".nav-list .link,.top-store,.H-Search,.H-buy,.H-buy-2").addClass("AddBlock").removeClass("AddNone");
            // $(".nav-list .link").addClass("navFontScale");
            $(".box-bg").click(function () {
                $(".box-mk").addClass("AddBlock").removeClass("AddNone")
            })
        });
        $(document).ready(function () {
            $(".H-share-box").click(function () {
                $(".Review-list-close").addClass("AddBlock").removeClass("AddNone")
            });
            $(".Review-list-close,.reveal-modal-bg").click(function () {
                $(".Review-list-close").addClass("AddNone").removeClass("AddBlock")
            })
        });
        $(document).keyup(function (e) {
            var key = e.which;
            if (key == 27) {
                $(".H-Search-form,.ac-gn-curtain,.Review-list-close,.mod_player-wrap").addClass("AddNone").removeClass("AddBlock");
                $(".nav-list,.H-Search").addClass("AddBlock").removeClass("AddNone");
                $(".nav-list").addClass("navFontScale")
            }
        })
    });

    $('.education-icon .sub-nav .li,.enterprise-icon .sub-nav .li').mouseenter(function () {
        $('.education-icon .sub-nav .li,.enterprise-icon .sub-nav .li').removeClass('active');
        $(this).addClass('active');
        $('.education-icon .sub-cont,.enterprise-icon .sub-cont').removeClass('active');
        $('.education-icon .sub-cont:eq(' + $(this).index() + '),.enterprise-icon .sub-cont:eq(' + $(this).index() + ')').addClass('active');
    });
    $('.nav-list ul li .menu-sub').mouseleave(function () {
        $('.education-icon .sub-nav .li:nth-child(1),.enterprise-icon .sub-nav .li:nth-child(1)').addClass('active');
        $('.products-icon .pro-wrap .item-pro .name').removeClass('active')
        $('.products-icon .pro-wrap .item-pro .name:nth-child(1)').addClass('active')
        $('.resources-item,.resources-item-open').removeClass('active')
    });
    $('.nav-list ul li').mouseenter(function () {
        $('.nav-list ul li .link').removeClass('active-all');
        $(this).addClass('active-all');
        $('.nav-list ul li .menu-sub').removeClass('active');
        $('.nav-list ul li .menu-sub:eq(' + $(this).index() + ')').addClass('active');
    });
    $('.nav-list ul li').mouseleave(function () {
        $('.nav-list ul li').removeClass('active-all');
        $('.nav-list ul li .menu-sub').removeClass('active');
        $('.products-icon .pro-wrap .item-pro .name').removeClass('active')
        $('.products-icon .pro-wrap .item-pro .name:nth-child(1)').addClass('active')
        $('.resources-item,.resources-item-open').removeClass('active')
    });

    // products
    $('.products-icon .pro-wrap .item-note').click(function () {
        $('.products-icon .pro-wrap .item-note .nav-pic').addClass('active');
        $('.products-icon .pro-wrap .item-pro .one').removeClass('active')
        $('.products-icon .pro-wrap .item-note .one').addClass('active')
        $('.products-icon .pro-wrap .item-pro .second').removeClass('active')
    });
    $('.products-icon .pro-wrap .item-pro').click(function () {
        $('.products-icon .pro-wrap .item-note .nav-pic').removeClass('active');
        $('.products-icon .pro-wrap .item-pro .one,.products-icon .pro-wrap .item-pro .second,.products-icon .pro-wrap .item-note .one').removeClass('active')
        $('.products-icon .pro-wrap .item-pro:eq(' + $(this).index() + ') .one').addClass('active')
        $('.products-icon .pro-wrap .item-pro:eq(' + $(this).index() + ') .second').addClass('active')
    });
    $('.products-icon .pro-wrap .item-pro:nth-child(2)').click(function () {
        $('.products-icon .shuweiban').addClass('active')
        $('.products-icon .shuweiping').removeClass('active')
    })
    $('.products-icon .pro-wrap .item-pro:nth-child(1)').click(function () {
        $('.products-icon .shuweiban').removeClass('active')
        $('.products-icon .shuweiping').addClass('active')
    })
    $('.products-icon .pro-wrap .item-pro:nth-child(n+3)').click(function () {
        $('.products-icon .views').removeClass('active')
    })
    $('.products-icon .pro-wrap .item-pro .second .name').mouseenter(function () {
        $(this).siblings().removeClass('active')
        $(this).addClass('active')
    })
    // resources 
    $('.enterprise-icon .resources-item-open').mouseenter(function () {
        $('.resources-item-open').removeClass('active')
        $('.enterprise-icon .resources-item-open').addClass('active')
        $('.enterprise-icon .resources-item').addClass('active')
    })
    $('.education-icon .resources-item-open').mouseenter(function () {
        $('.resources-item-open').removeClass('active')
        $('.education-icon .resources-item-open').addClass('active')
        $('.education-icon .resources-item').addClass('active')
    })
</script>
<script type="text/javascript">
    $(document).ready(function () {
        var login = '<div class="H-buy">' +
            '<aside class="H-drop-down">' +
            '<nav class="drop-down-navbar drop-down-nav2">' +
            '<ul>' +
            '<li>' +
            '<a href="javascript:;" class="H-buy-ico" aria-label="user"></a>' +
            '<ul>' +
            '<span class="drop-Arrow"></span>' +
            '<li class="login-ico-01"><a href="https://account.huion.com/login?redirect_url=https://www.huion.com/&app_id=us_official_website&lang=EN-US&web_site=" target="_blank"><span class="login-ic login-ic1"></span>Login</a></li>' +
            '<li class="login-ico-02"><a href="https://account.huion.com/register?redirect_url=https://www.huion.com/&app_id=us_official_website&lang=EN-US&web_site=" target="_blank"><span class="login-ic login-ic2"></span>Register</a></li>' +
            '</ul>' +
            '</li>' +
            '</ul>' +
            '</nav>' +
            '</aside>' +
            '</div>';

        $.ajax({
            url: '/index.php?m=member&c=index&a=ajax_is_login',
            dataType: 'json',
            success: function (res) {
                if (res.status == 1) {
                    $("#is_login").after(res.info);
                } else {
                    $("#is_login").after(login);
                }
                //$.getScript("/statics/hw/js/mode.js");
            },
            error: function (res) {
                $("#is_login").after(login);
                //$.getScript("/statics/hw/js/mode.js");
            }
        })
    })
    function huion_store(url) {
        gtag('event', 'huion_to_store', {
            'event_category': 'huion_store',
            'event_label': 'Huion Store'
        });
        // ttq.track( 'ClickButton' ,{  
        //     description: "home_go_store" ,//项目和页面描述,自定义区分
        // })
        //window.location = url;
        window.open(url)
    }

    function login() {

        layer.open({
            type: 2,
            title: '',/*去掉标题login*/
            shadeClose: false,
            shade: 0.8,
            area: ['500px', '500px'],
            content: '/index.php?m=member&c=index&a=login&siteid=1',

        });
    }

    function reg() {

        layer.open({
            type: 2,
            title: '',/*去掉标题register*/
            shadeClose: false,
            shade: 0.8,
            area: ['500px', '620px'],
            content: '/index.php?m=member&c=index&a=register&siteid=1' //iframe的url
        });
    }

    function logToReg(index) {
        layer.close(index);
        layer.open({
            type: 2,
            title: '',/*去掉标题register*/
            shadeClose: false,
            shade: 0.8,
            area: ['500px', '620px'],
            content: '/index.php?m=member&c=index&a=register&siteid=1' //iframe的url
        });
    }

    function RegToAgreement(index) {
        layer.close(index);
        layer.open({
            type: 1,
            title: 'Privacy Policy',
            shadeClose: true,
            shade: 0.8,
            area: ['90%', '80%'],
            end: function () {
                reg();
            },
            content: $("#showagreement_info").html() //iframe的url
        });
    }

    function forgetTolog(index) {
        layer.close(index);
        layer.open({
            type: 2,
            title: '',/*去掉标题login*/
            shadeClose: false,
            shade: 0.8,
            area: ['500px', '500px'],
            content: '/index.php?m=member&c=index&a=login&siteid=1',

        });
    }

    /* window.fcWidget.init({
         token: "0348560a-b3f4-40c9-be6b-1dc1d83a87cd",
         host: "https://wchat.freshchat.com"
     });*/

    function firmwaredown(type, sys) {
        //alert(123456);
        $.ajax({
            url: '/getdown/',
            data: { classify: type, sys: sys },
            type: 'post',
            dataType: 'json',
            success: function (res) {
                if (type == 4) {
                    window.open(res.url, '_blank');
                } else {
                    location.href = res.url;
                }


            }
        })
    }

    function flow(channel) {

        $.ajax({
            url: '/flow/',
            data: { classify: channel },
            type: 'post',
            dataType: 'json',
            success: function (res) {

                if (channel != 3) {
                    location.href = res.url;
                }


            }
        })
    }
    function driverdowns(version, title, typeid, num, driver_id, fileurl) {//id主键 标题 类型 编号 种类
        $.post("/getdown/", { title: title, typeid: typeid, num: num, classify: 2, driver_id: driver_id, version: version },
            function (data) {
                //alert("Data Loaded: " + data);
                location.href = fileurl;
                //window.open(data,'top');
            });
    }
     
    // $('.search-sub').click(function(){
    //     var values = $('.H-Search-form-input').val()
    //     ttq.track( 'Search' ,{  
    //         query: values,
    //         description: "home_search" //项目和页面描述,自定义区分,
    //     })
    // }) 
    // $('.H-Search-form-input').bind('keypress', function (event) { 
    //   if (event.keyCode == "13") { 
    //         var values = $('.H-Search-form-input').val()
    //         ttq.track( 'Search' ,{  
    //             query: values,
    //             description: "home_search" //项目和页面描述,自定义区分,
    //         })
    //   }
    // })
</script>    
<main>
        <!--2024.5.20-->
      <!--<script src="/statics/hw/js/jquery-3.2.1.min.js" type="text/javascript"></script>-->
  
        <link href="/statics/hw/css/flickerplate.css" type="text/css" rel="stylesheet">
        <script src="/statics/hw/js/flickerplate.js" type="text/javascript"></script>
        <link href="/statics/hw/css/swiper.min.css" type="text/css" rel="stylesheet">
        <script src="/statics/hw/js/swiper.min.js" type="text/javascript"></script>
    

        <style>
            .flickerplate ul.flicks>li .flick-inner .flick-content {
                max-width: 100% !important;
            }

            .flicker-example ul li a {
                display: block !important;
                width: 100%;
                height: 760px !important;
            }

            .flickerplate ul.flicks>li .flick-inner {
                padding: 0 !important;
            }

            .flickerplate .dot-navigation {
                left: 50%;
                transform: translateX(-50%);
            }
            
            .flickerplate .arrow-navigation.left .arrow{
                margin: 0px 0px 0px 20%;
            }
            .flickerplate .arrow-navigation.right .arrow{
                margin: 0px 0px 0px -20%;
            }
            .flickerplate .arrow-navigation.left:hover .arrow{
                margin: 0px 0px 0px 20%;
            }
            .flickerplate .arrow-navigation.right:hover .arrow{
                margin: 0px 0px 0px -20%;
            }
            .flickerplate:hover .arrow-navigation .arrow{
                 opacity: 1;
            }
        </style>
        <style type="text/css">
            .center {
                max-width: 1200px;
                margin: 0 auto;
            }

            .text-centered {
                text-align: center;
            }

            .home-item {
                padding-top: 1%;
            }

            .home-item ul {
                padding: 0 1%;
            }

            .home-item ul li {
                float: left;
                width: 49.5%;
                margin: 0 1% 1% 0;
                text-align: center;
                position: relative;
            }

            .home-item ul li:nth-child(2n) {
                margin-right: 0;
            }

            .home-item ul li img {
                display: block;
                width: 100%;
            }

            .home-item ul li .txt {
                position: absolute;
                left: 50%;
                top: 5%;
                width: 100%;
                transform: translateX(-50%);
                z-index: 2;
            }

            .home-item ul li .txt .tit {
                font-family: 'Aileron-Bold';
                font-size: 36px;
                color: #000;
            }

            .home-item ul li .txt .desc {
                font-size: 18px;
                color: #000;
                padding-top: 8px;
            }

            .home-item ul li .txt .more {
                display: block;
                font-size: 18px;
                padding-top: 8px;
                color: #00bfd6;
            }

            /* support */
            .home-item ul .support .list-wrap {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 77%;
                padding-top: 14%;
                z-index: 1;
                display: flex;
                align-items: center;
            }

            .home-item ul .support .list-wrap .list {
                width: 50%;
                height: 100%;
                position: relative;
            }

            .home-item ul .support .list-wrap .list .lis {
                display: inline-block;
                cursor: pointer;
                width: 100%;
            }

            .home-item ul .support .list-wrap .list .one {
            position: absolute;
            height: 40%;
            top: 0px;
            left: 42%;
            width: 40%;
            border-radius: 50%;
            }

            .home-item ul .support .list-wrap .list .two {
                 position: absolute;
                top: 50%;
                left: 20%;
                width: 57%;
                height: 36%;
                transform: rotate(3deg);
                border-radius: 14px;
            }

            .home-item ul .support .list-wrap .list .three {
                 position: absolute;
                 left: 4%;
                height: 35%;
                transform: rotate(-19deg);
                top: 14%;
                width: 76%;
                border-radius: 30px;
                
            }

            .home-item ul .support .list-wrap .list .four {
                     height: 25%;
                    position: absolute;
                    left: 11%;
                    top: 63%;
                    transform: rotate(8deg);
                    width: 61%;
                    border-radius: 30px;
            }


            .home-swiper {
                position: relative;
                overflow: hidden;
            }

            .cen998 {
                position: relative;
                max-width: 998px;
                margin: 0 auto;
            }

            .home-swiper .swiper-wrapper {
                display: flex;
                align-items: center;
            }

            .home-swiper .swiper-slide {
                position: relative;
                width: 998px !important;
                opacity: 0.65;
            }

            .home-swiper .swiper-slide-active {
                opacity: 1;
            }

            .home-swiper .swiper-slide .txt {
                position: absolute;
                left: 40px;
                bottom: 40px;
                display: none;
            }

            .home-swiper .swiper-slide.swiper-slide-active .txt {
                display: block;
            }

            .home-swiper .swiper-slide .txt .tit {
                font-family: 'Aileron-Bold';
                font-size: 36px;
                color: #fff;
            }

            .home-swiper .swiper-slide .txt .more {
                padding-top: 20px;
            }

            .home-swiper .swiper-slide .txt a {
                display: inline-block;
                font-size: 18px;
                color: #00bfd6;
            }

            .home-swiper .swiper-slide .txt a:first-child {
                padding-right: 18px;
            }

            .home-swiper .swiper-slide img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .home-swiper .swiper-button-next {
                right: 30px;
            }

            .home-swiper .swiper-button-prev {
                left: 30px;
            }

            .home-swiper .swiper-button-next:after,
            .home-swiper .swiper-button-prev:after {
                display: none;
            }

            .home-swiper .swiper-pagination-bullet-active {
                background: #00bfd6 !important;
            }

            .home-swiper .swiper-pagination-bullet {
                background: #8c8c8c;
                opacity: 1;
            }


            /* home-industry */
            .home-industry .title {
                font-family: 'Aileron-Bold';
                font-size: 36px;
                padding: 106px 0 0;
            }

            .home-industry ul {
                padding: 50px 0;
            }

            .home-industry ul li {
                position: relative;
                float: left;
                width: 392px;
                margin-right: 12px;
            }

            .home-industry ul li:last-child {
                margin-right: 0;
            }

            .home-industry ul li .txt {
                position: absolute;
                left: 0;
                top: 40px;
                width: 100%;
            }

            .home-industry ul li .txt .tit {
                font-family: 'Aileron-Bold';
                font-size: 30px;
                color: #000;
            }

            .home-industry ul li .txt .more {
                display: block;
                font-size: 18px;
                padding-top: 8px;
                color: #00bfd6;
            }
        </style>
        <div style="height:60px;background:#000;"></div>
        <div class="flicker-example flickerplate animate-transition-slide flicker-theme-light" data-block-text="false" data-flick-position="0"><div class="dot-navigation center"><ul><li><div class="dot active"></div></li><li><div class="dot"></div></li><li><div class="dot"></div></li><li><div class="dot"></div></li><li><div class="dot"></div></li><li><div class="dot"></div></li></ul></div><div class="arrow-navigation left"><div class="arrow"></div></div><div class="arrow-navigation right"><div class="arrow"></div></div>
            <ul class="flicks" style="left:-000%;">
                                                                
                <li data-background="/uploadfile/2228120240902030315504.jpg" style="cursor: pointer; background-image: url(&quot;/uploadfile/2228120240902030315504.jpg&quot;);" class="po_box first-flick" id="20101001"><div class="flick-inner"><div class="flick-content">
                    <!--<a class="flick-inner"  target="_blank"-->
                    <!--     href="/products/pen_display/Kamvas/kamvas-13-gen-3.html">-->
                    <!--</a>-->
                    <a class="flick-inner" href="/products/pen_display/Kamvas/kamvas-13-gen-3.html" target="_blank" style="height:760px;" aria-label="flick-inner-img">
                    </a>
                </div></div></li>
                                
                <li data-background="/uploadfile/4318320240815033247871.jpg" style="cursor: pointer; background-image: url(&quot;/uploadfile/4318320240815033247871.jpg&quot;);" class="po_box " id="20101002"><div class="flick-inner"><div class="flick-content">
                    <!--<a class="flick-inner"  href="/products/pen_tablet/Inspiroy/Inspiroy-Frego-M.html ">-->
                    <!--</a>-->
                    <a class="flick-inner" href="/products/pen_tablet/Inspiroy/Inspiroy-Frego-M.html " target="_blank" style="height:760px;" aria-label="flick-inner-img">
                    </a>
                </div></div></li>
                                
                <li data-background="/uploadfile/1419120240802054354320.jpg" style="cursor: pointer; background-image: url(&quot;/uploadfile/1419120240802054354320.jpg&quot;);" class="po_box " id="20101003"><div class="flick-inner"><div class="flick-content">
                    <!--<a class="flick-inner"  target="_blank"-->
                    <!--     href="https://community.huion.com/contest/HuionArtopia?arid=33">-->
                    <!--</a>-->
                    <a class="flick-inner" href="https://community.huion.com/contest/HuionArtopia?arid=33" target="_blank" style="height:760px;" aria-label="flick-inner-img">
                    </a>
                </div></div></li>
                                
                <li data-background="/uploadfile/5016120240108063329482.jpg" style="cursor: pointer; background-image: url(&quot;/uploadfile/5016120240108063329482.jpg&quot;);" class="po_box " id="20101004"><div class="flick-inner"><div class="flick-content">
                    <!--<a class="flick-inner"  href="https://www.huion.com/products/pen_display/KamvasPro/Kamvas-Pro-19.html">-->
                    <!--</a>-->
                    <a class="flick-inner" href="https://www.huion.com/products/pen_display/KamvasPro/Kamvas-Pro-19.html" target="_blank" style="height:760px;" aria-label="flick-inner-img">
                    </a>
                </div></div></li>
                                
                <li data-background="/uploadfile/7132320240409111218890.jpg" style="cursor: pointer; background-image: url(&quot;/uploadfile/7132320240409111218890.jpg&quot;);" class="po_box " id="20101005"><div class="flick-inner"><div class="flick-content">
                    <!--<a class="flick-inner"  href="/pen_display/KamvasPro/kamvas-pro-27.html">-->
                    <!--</a>-->
                    <a class="flick-inner" href="/pen_display/KamvasPro/kamvas-pro-27.html" target="_blank" style="height:760px;" aria-label="flick-inner-img">
                    </a>
                </div></div></li>
                                
                <li data-background="/uploadfile/5225420240409111349505.jpg" style="cursor: pointer; background-image: url(&quot;/uploadfile/5225420240409111349505.jpg&quot;);" class="po_box " id="20101006"><div class="flick-inner"><div class="flick-content">
                    <!--<a class="flick-inner"  target="_blank"-->
                    <!--     href="/products/pen_computer/KamvasStudio/kamvas-studio-16.html">-->
                    <!--</a>-->
                    <a class="flick-inner" href="/products/pen_computer/KamvasStudio/kamvas-studio-16.html" target="_blank" style="height:760px;" aria-label="flick-inner-img">
                    </a>
                </div></div></li>
                            </ul>
            
            <script>

                function formatTimeDifference(timestamp1, timestamp2) {
                    let diff = timestamp2 - timestamp1;
                    let sec = Math.floor(diff / 1000);

                    return sec;
                }
                function timestampToDateTime(timestamp) {
                    let date = new Date(timestamp);

                    let year = date.getFullYear();
                    let month = pad(date.getMonth() + 1);
                    let day = pad(date.getDate());
                    let hours = pad(date.getHours());
                    let minutes = pad(date.getMinutes());
                    let seconds = pad(date.getSeconds());

                    return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
                }

                function pad(num) {
                    return num.toString().padStart(2, '0');
                }
                const poboxs = document.querySelectorAll('.po_box');
                let stayLog = {
                    country_name: 'EN',
                    session_id: '',
                    user_id: '',//用户id
                    page_url: window.location.href,
                    referrer_url: document.referrer,
                    page_encoding: 'HOM01', //页面编码
                    element_id: '', //模块元素id
                    page_name: ''//位置编码
                }
                let cookies1 = document.cookie;
                // 获取PHPSESSID的值
                if (cookies1.match(/web_identity=([^;]+)/)) {
                    let phpsessid1 = cookies1.match(/web_identity=([^;]+)/)[1];
                    if (phpsessid1) {
                        stayLog.session_id = phpsessid1
                    }
                }
                if (cookies1.match(/web_userid=([^;]+)/)) {
                    let uid1 = cookies1.match(/web_userid=([^;]+)/)[1];
                    if (uid1) {
                        stayLog.user_id = uid1

                    }
                }


                poboxs.forEach((item, index) => {
                    switch (index) {
                        case 0:
                            item.id = 20101001
                            break;
                        case 1:
                            item.id = 20101002
                            break;
                        case 2:
                            item.id = 20101003
                            break;
                        case 3:
                            item.id = 20101004
                            break;
                        case 4:
                            item.id = 20101005
                            break;
                        case 5:
                            item.id = 20101006
                            break;

                        default:
                            break;
                    }


                    // 记录移入时间
                    let enterTime;
                    item.addEventListener('click', () => {
                        stayLog.page_name = item.id;
                        let str = item.id.toString();
                        stayLog.element_id = parseInt(str.substring(str.length - 3));
                        let timestamp = Date.now();
                        stayLog.time_stamp = timestampToDateTime(timestamp)
                        stayLog.event_type = 'click'
                        delete stayLog.start_timestamp
                        delete stayLog.end_timestamp
                        delete stayLog.stay_time
                        $.ajax({

                            url: "https://data-us.penmonitor.com/api/click",
                            type: "post",
                            // dataType: "json",
                            contentType: "application/x-www-form-urlencoded",
                            data: stayLog,
                            success: function (data) {

                            },
                            error: function () {

                            },
                        });
                    });
                    item.addEventListener('mouseenter', () => {
                        enterTime = Date.now();
                        stayLog.page_name = item.id;
                        let str = item.id.toString();
                        stayLog.element_id = parseInt(str.substring(str.length - 3));
                    });
                    item.addEventListener('mouseleave', () => {
                        delete stayLog.time_stamp

                        delete stayLog.event_type
                        let leaveTime = Date.now();
                        let timeInBox = leaveTime - enterTime;
                        if (timeInBox > 3000) {
                            stayLog.start_timestamp = enterTime
                            stayLog.end_timestamp = leaveTime
                            stayLog.stay_time = formatTimeDifference(enterTime, leaveTime);

                            $.ajax({

                                url: "https://data-us.penmonitor.com/api/stay",
                                type: "post",
                                // dataType: "json",
                                contentType: "application/x-www-form-urlencoded",
                                data: stayLog,
                                success: function (data) {

                                },
                                error: function () {

                                },
                            });
                        }
                    });
                })
            </script>

        </div>
        <div class="dot-navigation left">
            <ul>
                                                <li>
                    <div class="dot active "></div>
                </li>
                                                <li>
                    <div class="dot "></div>
                </li>
                                                <li>
                    <div class="dot "></div>
                </li>
                                                <li>
                    <div class="dot "></div>
                </li>
                                                <li>
                    <div class="dot "></div>
                </li>
                                                <li>
                    <div class="dot "></div>
                </li>
                                            </ul>
        </div>
        <div style="height:12px;"></div>
        <script>
            $(document).ready(function () {

                $('.flicker-example').flicker({ "auto_flick_delay": 8 });
            });
        </script>

        <!-- 推荐位 -->
        <section class="H-Section-one">
        <div class="H-content wt">
            <div class="H-text">
                <h1>Kamvas Pro 24 (4K)</h1>
                <p>Just Powerful</p>
            </div>
            <div class="H-text-more clearfix">
                <ul>
                    <li><a href="/products/pen_display/KamvasPro/kamvas-pro-24-4k.html" class="click_boxs" id="20102008" aria-label="kamvas-pro-24-4k">Learn more  &gt;</a> </li>
                    <li><a href="https://store.huion.com/products/kamvas-pro-24-4k" target="_blank" class="click_boxs" id="20102009">Buy Now &gt;</a> </li>
                </ul>
            </div>
        </div>
        <figure class="H-pro-show">
           <a href="/products/pen_display/KamvasPro/kamvas-pro-24-4k.html" class="point_box" id="20102007" aria-label="kamvas-pro-24-4k">
            <img src="https://image.huion.com/home/home-KamvasPro24.png
" alt="">
           </a> 
        </figure>
    </section>
    <section class="H-Section-two">
        <div class="center1400">
        <figure class="H-img">
            <div class="H-text-two-content">
            <div class="H-text-two">
                <h1>Kamvas Pro 16(2.5K)</h1>
                <p>New Appearance Unchanging Quality</p>
            </div>
            <div class="H-text-more clearfix more-two-bt">
                <ul>
                    <li><a href="/products/pen_display/KamvasPro/kamvas-pro-16-2k.html" class="click_boxs" id="20103011" aria-label="kamvas-13">Learn more &gt;</a> </li>
                    <li><a href="https://store.huion.com/products/kamvas-pro-16-2k" target="_blank" class="click_boxs" id="20103012" aria-label="kamvas-13">Buy Now &gt;</a> </li>
                </ul>
            </div>
            </div>
        </figure>
        </div>
    </section>
    <!--<section class="H-Section-three">
        <div class="center1400">
            <div class="hub_content-text">
                    <div class="H-text-three">
                    <h1>Kamvas Studio 24</h1>
                    <p>This is a Standalone Workstation</p>
                </div>
                <div class="H-text-more-three clearfix more-two-bt">
                    <ul>
                        <li><a href="/products/pen_computer/KamvasStudio/kamvas-studio-24.html" aria-label="kamvas-studio-24">Learn more ></a> </li>
                        <li><a href="https://store.huion.com/products/kamvas-studio-24" target="_blank" aria-label="kamvas-studio-24">Buy Now ></a> </li>
                    </ul>
                </div>
            </div>
            <div class="hub_content">
               <a href="/products/pen_computer/KamvasStudio/kamvas-studio-24.html" aria-label="kamvas-studio-24">
                <img src="https://image.huion.com/home/index-tuijian-Studio24.jpg" alt=""/>
               </a>
            </div>
        </div>
    </section> -->        <!-- 推荐位 -->

        <div class="home-item">
            <ul class="clearfix">
                <li>
                    <img data-src="https://image.huion.com/home/home-item-AboutHuion.jpg" alt="AboutHuion" class="point_box lazyload" id="20104013">
                    <div class="txt">
                        <div class="tit">About Huion</div>
                        <div class="desc">To bring digital ink solutions to more people around the world.</div>
                        <a href="/about_us" class="more click_boxs" id="20104014">Learn more &gt;</a>
                    </div>
                </li>
                <li>
                    <img data-src="https://image.huion.com/home/home-item-Community.jpg" alt="Community" class="point_box lazyload" id="20140015">
                    <div class="txt">
                        <div class="tit">Community</div>
                        <div class="desc">Connect with us for exclusive tips and events</div>
                        <a href="https://community.huion.com/" target="_blank" class="more click_boxs" id="20104016">Learn more &gt;</a>
                    </div>
                </li>
                <li class="support">
                    <img data-src="https://image.huion.com/home/home-item-Support.jpg" alt="Support" class="point_box lazyload" id="20104017">
                    <div class="txt">
                        <div class="tit">Support</div>
                        <a href="/support" class="more" id="20104018">Learn more &gt;</a>
                    </div>
                    <div class="list-wrap">
                        <div class="list">
                            <a href="/download/" class="lis one" aria-label="download"></a>
                            <a href="https://support.huion.com/en/support/home" target="_blank" class="lis two" aria-label="home"></a>
                        </div>
                        <div class="list">
                            <a href="/warranty" class="lis three" aria-label="warranty"></a>
                            <a href="/firmware" class="lis four" aria-label="firmware"></a>
                        </div>
                    </div>
                </li>
                <li>
                    <img data-src="https://image.huion.com/home/home-item-BuyersGuide.jpg" alt="BuyersGuide" class="point_box lazyload" id="20104019">
                    <div class="txt">
                        <div class="tit">Buyer’s Guide</div>
                        <div class="desc">Find the best Huion products for you.</div>
                        <a href="/directory/pen_tablet" class="more" id="20104020">Learn more &gt;</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="home-swiper">
            <div class="swiper mySwiper industry-swiper cen998 swiper-container-initialized swiper-container-horizontal">
                <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-5133.5px, 0px, 0px);"><div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="0" style="margin-right: 7.9px;">
                        <img data-src="https://image.huion.com/home/home-swiper-FilmAnimation.jpg" alt="" class="point_box lazyload" id="20105021" loading="lazy">
                        <div class="txt">
                            <div class="tit">Film &amp; Animation</div>
                            <div class="tit">Create with HUION</div>
                            <div class="more">
                                <a href="https://community.huion.com/gallery" target="_blank" class="click_boxs" id="20105022">Explore &gt;</a>
                                <a href="https://community.huion.com/works?arid=14222" target="_blank" class="click_boxs" id="20105023">Learn More &gt;</a>
                            </div>
                        </div>
                    </div><div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="1" style="margin-right: 7.9px;">
                        <img data-src="https://image.huion.com/home/home-swiper-Illustration.jpg" alt="Illustration" class="point_box lazyload" id="20105024" loading="lazy">
                        <div class="txt">
                            <div class="tit">Illustration</div>
                            <div class="tit">Create with HUION</div>
                            <div class="more">
                                <a href="https://community.huion.com/gallery" target="_blank" class="click_boxs" id="20105025">Explore &gt;</a>
                                <a href="https://community.huion.com/works?arid=12692" target="_blank" class="click_boxs" id="20105026">Learn More &gt;</a>
                            </div>
                        </div>
                    </div><div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="2" style="margin-right: 7.9px;">
                        <img data-src="https://image.huion.com/home/home-swiper-3D.jpg" alt="3D" class="point_box  lazyload" id="20105027" loading="lazy">
                        <div class="txt">
                            <div class="tit">3D</div>
                            <div class="tit">Create with HUION</div>
                            <div class="more">
                                <a href="https://community.huion.com/gallery" target="_blank" class="click_boxs" id="20105028">Explore &gt;</a>
                                <a href="https://community.huion.com/works?arid=11184" target="_blank" class="click_boxs" id="20105029">Learn More &gt;</a>
                            </div>
                        </div>
                    </div><div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="3" style="margin-right: 7.9px;">
                        <img data-src="https://image.huion.com/home/home-swiper-CartoonsComics.jpg" alt="CartoonsComics" class="point_box lazyload" id="20105030" loading="lazy">
                        <div class="txt">
                            <div class="tit">Cartoons &amp; Comics</div>
                            <div class="tit">Create with HUION</div>
                            <div class="more">
                                <a href="https://community.huion.com/gallery" target="_blank" class="click_boxs" id="20105031">Explore &gt;</a>
                                <a href="https://community.huion.com/works?arid=15170" target="_blank" class="click_boxs" id="20105032">Learn More &gt;</a>
                            </div>
                        </div>
                    </div><div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="4" style="margin-right: 7.9px;">
                        <img data-src="https://image.huion.com/home/home-swiper-Photography.jpg" alt="Photography" class="point_box lazyload" id="20105033" loading="lazy">
                        <div class="txt">
                            <div class="tit">Photography</div>
                            <div class="tit">Create with HUION</div>
                            <div class="more">
                                <a href="https://community.huion.com/gallery" target="_blank" class="click_boxs" id="20105034">Explore &gt;</a>
                                <a href="https://community.huion.com/works?arid=16015" target="_blank" class="click_boxs" id="20105035">Learn More &gt;</a>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="margin-right: 7.9px;">
                        <img data-src="https://image.huion.com/home/home-swiper-FilmAnimation.jpg" alt="" class="point_box lazyload" id="20105021" loading="lazy">
                        <div class="txt">
                            <div class="tit">Film &amp; Animation</div>
                            <div class="tit">Create with HUION</div>
                            <div class="more">
                                <a href="https://community.huion.com/gallery" target="_blank" class="click_boxs" id="20105022">Explore &gt;</a>
                                <a href="https://community.huion.com/works?arid=14222" target="_blank" class="click_boxs" id="20105023">Learn More &gt;</a>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" style="margin-right: 7.9px;">
                        <img data-src="https://image.huion.com/home/home-swiper-Illustration.jpg" alt="Illustration" class="point_box lazyload" id="20105024" loading="lazy">
                        <div class="txt">
                            <div class="tit">Illustration</div>
                            <div class="tit">Create with HUION</div>
                            <div class="more">
                                <a href="https://community.huion.com/gallery" target="_blank" class="click_boxs" id="20105025">Explore &gt;</a>
                                <a href="https://community.huion.com/works?arid=12692" target="_blank" class="click_boxs" id="20105026">Learn More &gt;</a>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide" data-swiper-slide-index="2" style="margin-right: 7.9px;">
                        <img data-src="https://image.huion.com/home/home-swiper-3D.jpg" alt="3D" class="point_box  lazyload" id="20105027" loading="lazy">
                        <div class="txt">
                            <div class="tit">3D</div>
                            <div class="tit">Create with HUION</div>
                            <div class="more">
                                <a href="https://community.huion.com/gallery" target="_blank" class="click_boxs" id="20105028">Explore &gt;</a>
                                <a href="https://community.huion.com/works?arid=11184" target="_blank" class="click_boxs" id="20105029">Learn More &gt;</a>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide" data-swiper-slide-index="3" style="margin-right: 7.9px;">
                        <img data-src="https://image.huion.com/home/home-swiper-CartoonsComics.jpg" alt="CartoonsComics" class="point_box lazyload" id="20105030" loading="lazy">
                        <div class="txt">
                            <div class="tit">Cartoons &amp; Comics</div>
                            <div class="tit">Create with HUION</div>
                            <div class="more">
                                <a href="https://community.huion.com/gallery" target="_blank" class="click_boxs" id="20105031">Explore &gt;</a>
                                <a href="https://community.huion.com/works?arid=15170" target="_blank" class="click_boxs" id="20105032">Learn More &gt;</a>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-slide-duplicate-prev" data-swiper-slide-index="4" style="margin-right: 7.9px;">
                        <img data-src="https://image.huion.com/home/home-swiper-Photography.jpg" alt="Photography" class="point_box lazyload" id="20105033" loading="lazy">
                        <div class="txt">
                            <div class="tit">Photography</div>
                            <div class="tit">Create with HUION</div>
                            <div class="more">
                                <a href="https://community.huion.com/gallery" target="_blank" class="click_boxs" id="20105034">Explore &gt;</a>
                                <a href="https://community.huion.com/works?arid=16015" target="_blank" class="click_boxs" id="20105035">Learn More &gt;</a>
                            </div>
                        </div>
                    </div>
                <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="0" style="margin-right: 7.9px;">
                        <img data-src="https://image.huion.com/home/home-swiper-FilmAnimation.jpg" alt="" class="point_box lazyload" id="20105021" loading="lazy">
                        <div class="txt">
                            <div class="tit">Film &amp; Animation</div>
                            <div class="tit">Create with HUION</div>
                            <div class="more">
                                <a href="https://community.huion.com/gallery" target="_blank" class="click_boxs" id="20105022">Explore &gt;</a>
                                <a href="https://community.huion.com/works?arid=14222" target="_blank" class="click_boxs" id="20105023">Learn More &gt;</a>
                            </div>
                        </div>
                    </div><div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="1" style="margin-right: 7.9px;">
                        <img data-src="https://image.huion.com/home/home-swiper-Illustration.jpg" alt="Illustration" class="point_box lazyload" id="20105024" loading="lazy">
                        <div class="txt">
                            <div class="tit">Illustration</div>
                            <div class="tit">Create with HUION</div>
                            <div class="more">
                                <a href="https://community.huion.com/gallery" target="_blank" class="click_boxs" id="20105025">Explore &gt;</a>
                                <a href="https://community.huion.com/works?arid=12692" target="_blank" class="click_boxs" id="20105026">Learn More &gt;</a>
                            </div>
                        </div>
                    </div><div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="2" style="margin-right: 7.9px;">
                        <img data-src="https://image.huion.com/home/home-swiper-3D.jpg" alt="3D" class="point_box  lazyload" id="20105027" loading="lazy">
                        <div class="txt">
                            <div class="tit">3D</div>
                            <div class="tit">Create with HUION</div>
                            <div class="more">
                                <a href="https://community.huion.com/gallery" target="_blank" class="click_boxs" id="20105028">Explore &gt;</a>
                                <a href="https://community.huion.com/works?arid=11184" target="_blank" class="click_boxs" id="20105029">Learn More &gt;</a>
                            </div>
                        </div>
                    </div><div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="3" style="margin-right: 7.9px;">
                        <img data-src="https://image.huion.com/home/home-swiper-CartoonsComics.jpg" alt="CartoonsComics" class="point_box lazyload" id="20105030" loading="lazy">
                        <div class="txt">
                            <div class="tit">Cartoons &amp; Comics</div>
                            <div class="tit">Create with HUION</div>
                            <div class="more">
                                <a href="https://community.huion.com/gallery" target="_blank" class="click_boxs" id="20105031">Explore &gt;</a>
                                <a href="https://community.huion.com/works?arid=15170" target="_blank" class="click_boxs" id="20105032">Learn More &gt;</a>
                            </div>
                        </div>
                    </div><div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="4" style="margin-right: 7.9px;">
                        <img data-src="https://image.huion.com/home/home-swiper-Photography.jpg" alt="Photography" class="point_box lazyload" id="20105033" loading="lazy">
                        <div class="txt">
                            <div class="tit">Photography</div>
                            <div class="tit">Create with HUION</div>
                            <div class="more">
                                <a href="https://community.huion.com/gallery" target="_blank" class="click_boxs" id="20105034">Explore &gt;</a>
                                <a href="https://community.huion.com/works?arid=16015" target="_blank" class="click_boxs" id="20105035">Learn More &gt;</a>
                            </div>
                        </div>
                    </div></div>
                <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"><img src="https://image.huion.com/home/home-swiper-next.png" alt="">
                </div>
                <div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"><img src="https://image.huion.com/home/home-swiper-prev.png" alt="">
                </div>
                <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 5"></span></div>
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
        </div>
        <div class="home-industry">
            <div class="center">
                <div class="title text-centered">Explore HUION Products in Different Fields</div>
                <ul class="clearfix">
                    <li>
                        <img data-src="https://image.huion.com/home/home-industry-Education.jpg" alt="Education" class="point_box lazyload" id="20106036">
                        <div class="txt text-centered">
                            <div class="tit">Education</div>
                            <a href="/b2b/education" target="_blank" class="more click_boxs" id="20106037">Learn
                                more &gt;</a>
                        </div>
                    </li>
                    <li>
                        <img data-src="https://image.huion.com/home/home-industry-BusinessSolutions.jpg" alt="BusinessSolutions" class="point_box lazyload" id="20106038">
                        <div class="txt text-centered">
                            <div class="tit">Business Solutions</div>
                            <a href="/b2b" target="_blank" class="more click_boxs" id="20106039">Learn more
                                &gt;</a>
                        </div>
                    </li>
                    <li>
                        <img data-src="https://image.huion.com/home/home-industry-TechnologySolutions.jpg" alt="TechnologySolutions" class="point_box lazyload" id="20106040">
                        <div class="txt text-centered">
                            <div class="tit">Technology Solutions</div>
                            <a href="/b2b/technology" target="_blank" class="more click_boxs" id="20106041">Learn more
                                &gt;</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>


        <script>

            var swiper = new Swiper(".industry-swiper", {
                slidesPerView: 'auto',
                autoplay: {
                    delay: 4000,
                    // disableOnInteraction: false,
                    disableOnInteraction: true,
                },
                centeredSlides: true,
                spaceBetween: '1%',
                loop: true,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        </script>
        <script>
            function formatTimeDifference(timestamp1, timestamp2) {
                let diff = timestamp2 - timestamp1;
                let sec = Math.floor(diff / 1000);
                return sec;
            }
            function timestampToDateTime(timestamp) {
                let date = new Date(timestamp);
                let year = date.getFullYear();
                let month = pad(date.getMonth() + 1);
                let day = pad(date.getDate());
                let hours = pad(date.getHours());
                let minutes = pad(date.getMinutes());
                let seconds = pad(date.getSeconds());

                return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
            }

            function pad(num) {
                return num.toString().padStart(2, '0');
            }
            const boxes = document.querySelectorAll('.point_box');
            const clickboxs = document.querySelectorAll('.click_boxs');
            let delLog = {
                country_name: 'EN',
                session_id: '',
                user_id: '',//用户id
                page_url: window.location.href,
                referrer_url: document.referrer,
                page_encoding: 'HOM01', //页面编码
                element_id: '', //模块元素id
                page_name: ''//位置编码
            }
            let cookies = document.cookie;
            // 获取PHPSESSID的值
            if (cookies.match(/web_identity=([^;]+)/)) {
                let phpsessid = cookies.match(/web_identity=([^;]+)/)[1];
                if (phpsessid) {
                    delLog.session_id = phpsessid
                }
            }
            if (cookies.match(/web_userid=([^;]+)/)) {
                let uid = cookies.match(/web_userid=([^;]+)/)[1];
                if (uid) {
                    delLog.user_id = uid
                }
            }

            boxes.forEach(box => {

                // 记录移入时间
                let enterTime;

                box.addEventListener('click', () => {
                    delLog.page_name = box.id;
                    let str = box.id.toString();
                    delLog.element_id = parseInt(str.substring(str.length - 3));
                    let timestamp = Date.now();
                    delLog.time_stamp = timestampToDateTime(timestamp)
                    delLog.event_type = 'click'
                    delete delLog.start_timestamp
                    delete delLog.end_timestamp
                    delete delLog.stay_time

                    $.ajax({

                        url: "https://data-us.penmonitor.com/api/click",
                        type: "post",
                        // dataType: "json",
                        contentType: "application/x-www-form-urlencoded",
                        data: delLog,
                        success: function (data) {

                        },
                        error: function () {

                        },
                    });
                });
                box.addEventListener('mouseenter', () => {
                    enterTime = Date.now();
                    delLog.page_name = box.id;
                    let str = box.id.toString();
                    delLog.element_id = parseInt(str.substring(str.length - 3));
                });
                box.addEventListener('mouseleave', () => {
                    delete delLog.time_stamp
                    delete delLog.event_type
                    let leaveTime = Date.now();
                    let timeInBox = leaveTime - enterTime;
                    if (timeInBox > 3000) {
                        delLog.start_timestamp = enterTime
                        delLog.end_timestamp = leaveTime
                        delLog.stay_time = formatTimeDifference(enterTime, leaveTime);
                      
                        $.ajax({
                            url: "https://data-us.penmonitor.com/api/stay",
                            type: "post",
                            // dataType: "json",
                            contentType: "application/x-www-form-urlencoded",
                            data: delLog,
                            success: function (data) {

                            },
                            error: function () {

                            },
                        });

                    }
                });
            });
            clickboxs.forEach(box => {

                // 记录移入时间
                box.addEventListener('click', () => {
                    delLog.page_name = box.id;
                    let str = box.id.toString();
                    delLog.element_id = parseInt(str.substring(str.length - 3));
                    let timestamp = Date.now();
                    delLog.time_stamp = timestampToDateTime(timestamp)
                    delLog.event_type = 'click'
                    delete delLog.start_timestamp
                    delete delLog.end_timestamp
                    delete delLog.stay_time
                    $.ajax({

                        url: "https://data-us.penmonitor.com/api/click",
                        type: "post",
                        // dataType: "json",
                        contentType: "application/x-www-form-urlencoded",
                        data: delLog,
                        success: function (data) {

                        },
                        error: function () {

                        },
                    });

                });

            });


        </script>
        <!--footer-START-->
        <link rel="stylesheet" href="/statics/hw/vue/index.css">
<script src="/statics/hw/vue/vue.js"></script>
<script src="/statics/hw/vue/index.js"></script>
<footer>
    <div class="H-footer"><div class="H-container wt clearfix"><div class="H-list-one H-font14 clearfix"><ul><li class="H-colorF">Product</li> <li><a href="https://www.huion.com/pen_tablet/">Pen Tablet</a></li> <li><a href="https://www.huion.com/pen_display/">Pen Display</a></li> <li><a href="https://www.huion.com/led_light_pad/">LED Light Pad</a></li> <li><a href="https://www.huion.com/hub/">Hub</a></li> <li><a href="/accessories/">Accessories </a></li></ul> <ul><li class="H-colorF">Support</li> <li><a href="https://www.huion.com/download/">Driver &amp; Manual</a></li> <li><a href="https://support.huion.com/">FAQ</a></li> <li><a href="https://www.huion.com/warranty.html">Warranty Statement</a></li> <li><a href="https://www.huion.com/Firmware.html">Firmware</a></li></ul> <ul><li class="H-colorF">Enterprise</li> <li><a href="https://b2b.huion.com/products/signing/" target="_blank">E-signing </a></li> <li><a href="https://b2b.huion.com/products/educational/" target="_blank">Education </a></li> <li><a href="https://b2b.huion.com/contact/customize/" target="_blank">OEM &amp;ODM</a></li></ul> <ul><li class="H-colorF">About HUION</li> <li><a href="https://www.huion.com/about_us.html">About us</a></li> <li><a href="https://www.huion.com/news/">News</a></li> <li><a href="https://www.huion.com/contact_us.html">Contact us</a></li> <li><a href="/dealer-search">Dealer Locator</a></li></ul>
				​
                <ul><li class="H-colorF">Member</li> <li><a href="https://account.huion.com/register?redirect_url=https://www.huion.com/&amp;app_id=us_official_website">Register</a></li> <li><a href="https://account.huion.com/login?redirect_url=https://www.huion.com/&amp;app_id=us_official_website">Login</a></li></ul></div> <div class="H-list-two H-font14"><div class="H-fr clearfix"><div class="H-code clearfix"><span class="H-colorF H-fl-new">Follow Us:</span> <ul class="clearfix"><li><a href="https://www.youtube.com/channel/UC1i6Qtt-ude6K1sVyFOhBXw" title="Youtube" target="_blank"></a></li> <li><a href="https://www.facebook.com/huion" title="Facebook" target="_blank"></a></li> <li><a href="https://www.instagram.com/huiontablet" title="Instagram" target="_blank"></a></li> <li><a href="https://twitter.com/HuionTab" title="Twitter" target="_blank"></a></li> <li><a href="https://www.tiktok.com/@huiontablet?lang=en" title="TikTok" target="_blank"></a></li></ul></div></div> <div class="newsletter"><div class="H-rt-newsletter">Newsletter Subscription:</div> <div class="text"><form method="post" id="form_email"><input type="text" placeholder="Your Email Address..." check="" name="subscription_email" id="subscription_email" autocomplete="off" class="input"> <input type="button" id="btnFormEmail" aria-label="btnFormEmail" class="sub"> <input type="hidden" name="siteid" id="siteid" value="1"></form></div></div></div> <div class="H-list-three wt"><span><a href="/privacy_policy.html">Privacy&nbsp;Policy</a> <a href="/subject/terms-of-use.html">Terms&nbsp;and&nbsp;Conditions</a></span></div> <div class="H-list-four wt"><div class="four-lf"><p> Copyright ©<span id="dates" style="display: inline-block;">2024</span> Shenzhen Huion Trend Technology Co., Ltd. All Rights Reserved</p></div> <div class="four-rt"><div class="lgclass"><span><img alt="" src="/statics/hw/site/icon/home-language-icon.png"></span> <span>United States / English</span></div></div></div></div> <div class="el-dialog__wrapper" style="display: none;"><div role="dialog" aria-modal="true" aria-label="Choose your Country or region" class="el-dialog" style="margin-top: 15vh; width: 1100px;"><div class="el-dialog__header"><span class="el-dialog__title">Choose your Country or region</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div>
</footer>
<!--回到顶部-->
<div class="back-to-top" onclick="$('body,html').animate({scrollTop:0},500);" style="position: fixed;right: 20px;bottom: 100px;width: 60px;height: 60px;z-index: 999;cursor: pointer;">
    <img width="100%" src="/statics/hw/images/back-to-top-icon.svg" alt="">
</div>

<script type="text/javascript" src="/statics/layer/layer.js"></script>

 <script type="text/javascript">
        new Vue({
            el: '.H-footer',
            data: function () {
                return {
                    dialogVisible: false,
                     items:{
                        one:[
                            {
                                url:'https://www.huion.cn/?region=visitor',
                                icon:'https://www.huion.com/statics/hw/site/icon/home-lunguage-icon-cn.jpg',
                                country:'中国大陆',
                                lang:'/ 简体中文'
                            },
                            {
                                url:'https://www.huion.com/',
                                icon:'https://www.huion.com/statics/hw/site/img/xianggang.png',
                                country:'中國香港',
                                lang:'/ English'
                            },
                            {
                                url:'https://www.huion.com/',
                                icon:'https://www.huion.com/statics/hw/site/img/India.png',
                                country:'India',
                                lang:'/ English'
                            },
                            {
                                url:'https://www.huion.com/',
                                icon:'https://www.huion.com/statics/hw/site/img/Inonesia.png',
                                country:'Indonesia',
                                lang:'/ English'
                            },
                            {
                                url:'https://www.huion.com/jp/',
                                icon:'https://www.huion.com/statics/hw/site/img/jp-languaue.png',
                                country:'日本',
                                lang:'/ 日本語'
                            },
                            {
                                url:'https://www.huion.com/kr/',
                                icon:'https://www.huion.com/statics/hw/site/img/kr-languaue.png',
                                country:'대한민국',
                                lang:'/ 한국어'
                            },
                            {
                                url:'https://www.huion.com/',
                                icon:'https://www.huion.com/statics/hw/site/img/Malaysia.png',
                                country:'Malaysia',
                                lang:'/ English'
                            },
                            {
                                url:'https://www.huion.com',
                                icon:'https://www.huion.com/statics/hw/site/img/Philippines.png',
                                country:'Philippines',
                                lang:'/ English'
                            },
                            {
                                url:'https://www.huion.com/',
                                icon:'https://www.huion.com/statics/hw/site/img/Singapore.png',
                                country:'Singapore',
                                lang:'/ English'
                            },
                            {
                                url:'https://www.huion.com/',
                                icon:'https://www.huion.com/statics/hw/site/img/Thailand.png',
                                country:'Thailand',
                                lang:'/ English'
                            },
                            {
                                url:'https://www.huion.com/ru/',
                                icon:'https://www.huion.com/statics/hw/images/eluosi.jpg',
                                country:'Russia',
                                lang:'/ Русский'
                            },
                            {
                                url:'https://www.huion.com/ar/',
                                icon:'https://www.huion.com/statics/hw/site/img/arab.jpg',
                                country:'Arab',
                                lang:'/ العربية'
                            },
                        ],
                        two:[
                            {
                                url:'https://www.huion.com/',
                                icon:'https://www.huion.com/statics/hw/site/img/Denmark.png',
                                country:'Denmark',
                                lang:'/ English'
                            },
                            {
                                url:'https://www.huion.com/de/',
                                icon:'https://www.huion.com/statics/hw/site/img/Deutsch.png',
                                country:'Deutsch',
                                lang:'/ Deutsch'
                            },
                            {
                                url:'https://www.huion.com/',
                                icon:'https://www.huion.com/statics/hw/site/img/Netherlands.png',
                                country:'Netherlands',
                                lang:'/ English'
                            },
                            {
                                url:'https://www.huion.com/',
                                icon:'https://www.huion.com/statics/hw/site/img/Sweden.png',
                                country:'Sweden',
                                lang:'/ English'
                            },
                            {
                                url:'https://www.huion.com/',
                                icon:'https://www.huion.com/statics/hw/site/img/Switzerland.png',
                                country:'Switzerland',
                                lang:'/ English'
                            },
                            {
                                url:'https://www.huion.com/',
                                icon:'https://www.huion.com/statics/hw/site/img/Turkey.png',
                                country:'Turkey',
                                lang:'/ English'
                            },
                            {
                                url:'https://www.huion.com/',
                                icon:'https://www.huion.com/statics/hw/site/img/UnitedKingdom.png',
                                country:'United Kingdom',
                                lang:'/ English'
                            },
                            {
                                url:'https://www.huion.com/es/',
                                icon:'https://www.huion.com/statics/hw/site/img/Spain.png',
                                country:'Spain',
                                lang:'/ Español'
                            },
                            {
                                url:'https://www.huion.com/fr/',
                                icon:'https://www.huion.com/statics/hw/site/img/France.jpg',
                                country:'France',
                                lang:'/ Français'
                            },
                            {
                                url:'https://www.huion.com/pt/',
                                icon:'https://www.huion.com/statics/hw/site/img/Portugal.jpg',
                                country:'Portugal',
                                lang:'/ Portuguese'
                            },
                            {
                                url:'https://www.huion.com/it',
                                icon:'https://www.huion.com/statics/hw/site/img/Italy.jpg',
                                country:'Italy',
                                lang:'/ Italiano'
                            },
                        ],
                        three:[
                            {
                                url:'https://www.huion.com/',
                                icon:'https://www.huion.com/statics/hw/site/img/Canada.png',
                                country:'Canada',
                                lang:'/ English'
                            },
                            {
                                url:'https://www.huion.com/',
                                icon:'https://www.huion.com/statics/hw/site/img/UnitedStates.png',
                                country:'United States',
                                lang:'/ English'
                            },
                            {
                                url:'https://www.huion.com/es/',
                                icon:'https://www.huion.com/statics/hw/site/icon/home-lunguage-icon-pt.jpg',
                                country:'Mexico',
                                lang:'/ Español'
                            }
                        ],
                        four:[
                            {
                                url:'https://www.huion.com/pt/',
                                icon:'https://www.huion.com/statics/hw/site/icon/home-lunguage-icon-bx.jpg',
                                country:'Brazil',
                                lang:'/ Portuguese'
                            },
                        ],
                        five:[
                            {
                                url:'https://www.huion.com/',
                                icon:'https://www.huion.com/statics/hw/site/img/Australia.png',
                                country:'Australia',
                                lang:'/ English'
                            },
                            {
                                url:'https://www.huion.com/',
                                icon:'https://www.huion.com/statics/hw/site/img/NewZealand.png',
                                country:'New Zealand',
                                lang:'/ English'
                            }
                        ],
                    }
                }
            },
            created() {
            },
            mounted() {
            },
            methods: {
                openLink(url){
                    //$.cookie('scarab.visitor.office', 'visitor');
                    setTimeout(() => {
                        window.location.href = url
                    }, 100);
                },
            }
        })    
    </script>

   <style>
        .v-modal{
            z-index: 0!important;
        }
        .el-dialog__body{
            padding:30px 40px;
        }
        .H-language-list ul li img{
            width: unset;
            height: auto;
        }
        .el-dialog__title{
            text-align: center;
            font-size: 38px;
            padding-top: 60px;
        }
        .H-language-list ul li{
            cursor: pointer;
        }
        .H-language-list ul li p{
            padding-top: 4.5px;
        }
        .H-language-list ul li p *{
            display: inline-block;
            vertical-align: middle;
        }
        .H-language-list ul li p .lg{
            font-size: 16px;
            color: #b2b2b2;
            padding-left: 5px;
        }
    </style>
<script>
  var date = new Date();
  document.getElementById('dates').innerHTML = date.getFullYear()
</script>
<script>
        $(document).ready(function() {
            $(".layui-layer-shade").click(function(){
                $(".layui-layer,.layui-layer-shade").css('display','none');
            });
            $(".vision-f-1img").hover(function () {
	        $(this).attr("src","/statics/hw/site/activity/vision-activity-22.png")
	    },function () {
	        $(this).attr("src","/statics/hw/site/activity/vision-activity-bg-18.png")
	    });
            $(".banner-s").hover(function(){
            	$(this).css("background","url('/statics/hw/site/activity/vision-activity-banner-onbtn.png') no-repeat center center")
            },function () {
	        $(this).css("background","url('/statics/hw/site/activity/vision-activity-banner-btn.png') no-repeat center center")
	    })
        });
    </script>
<script type="text/javascript">
$(function () {
	$("#youtube").hover(function(){
		$(this).attr("src","/statics/hw/images/youtube-h1.png");
	},function(){
		$(this).attr("src","/statics/hw/images/youtube.png");
	});
	$("#Facebook").hover(function(){
		$(this).attr("src","/statics/hw/images/Facebookcopy-h1.png");
	},function(){
		$(this).attr("src","/statics/hw/images/Facebookcopy.png");
	});
	$("#Instagram").hover(function(){
		$(this).attr("src","/statics/hw/images/instagram-h1.png");
	},function(){
		$(this).attr("src","/statics/hw/images/instagram.png");
	});
	$("#Twitter").hover(function(){
		$(this).attr("src","/statics/hw/images/Shape2-h1.png");
	},function(){
		$(this).attr("src","/statics/hw/images/Shape2.png");
	});
	$("#TikTok").hover(function(){
		$(this).attr("src","/statics/hw/images/TikTok-h1.jpg");
	},function(){
		$(this).attr("src","/statics/hw/images/TikTok.jpg");
	});
    $("#btnFormEmail").click(function () {
        var email = $("#subscription_email").val();
        var siteid = $("#siteid").val();
        if ( email == '') {
            //layer.alert('Email address is requested.',{icon: 0, title: ' ', btn: ['ok']});
            layer.msg('Email address is requested.')
            return false;
        }

        if ( !/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(email) ) {
            //layer.alert('Invalid email address.',{icon: 0, title: ' ', btn: ['ok']});
            layer.msg('Invalid email address.')
            return false;
        }

        $.ajax({
            url: '/index.php?m=content&c=index&a=subscription_email',
            data: {email: email, siteid: siteid},
            dataType: 'json',
            type: 'post',
            success: function (res) {
                
                if (res.status == 1) {
                    //layer.alert('Thanks for subscribing.', {icon: 1, title: ' ', btn: ['ok']}, function () {
                       // location.reload();
                    //});
                    layer.msg('Thanks for subscribing.')
                    // ttq.track( 'Subscribe' ,{  
                    //     description: "email_subscribe" ,//项目和页面描述,自定义区分
                    // })
                    setTimeout(function(){
                        location.reload();
                    },1000)
                    
                } else {
                    //layer.alert('Have subscribed to',{icon: 0, title: ' ', btn: ['ok']});
                    layer.msg('Have subscribed to')
                    return false;
                }
            }, 
            error: function () {
                console.log('error');
            }
        })
    })
  
  
})

function upload_img() {
    $.ajax({
        url: '/index.php?m=member&c=index&a=ajax_is_login',
        dataType: 'json',
        success: function () {
            location.href="/index.php?m=member&c=index&a=account_manage_my_works&t=1";
        },
        error: function () {
            login();
        }
    })
}

function logout() {
    $.ajax({
        url: '/index.php?m=member&c=index&a=ajax_logout',
        dataType: 'json',
        success: function (res) {
            if ( res.status == 1 ) {
                location.href = res.url;
            }
        }
    })
}

$("#ask_line").click(function(){
  layer.open({
    type: 2,
    skin: 'layui-layer-qlan',
    title: 'message',
    shadeClose: true,
    shade: 0.8,
    area: ['850px', '90%'],
    content: 'https://support.huion.com/widgets/feedback_widget/new?&widgetType=popup' //iframe的url
  }); 
            
})
    window.ChatraSetup = {
    colors: {
        buttonText: '#ffffff', /* chat button text color */
        buttonBg: '#00bfd6'    /* chat button background color */
    }
};  

</script>
<style>
   .layui-layer-qlan .layui-layer-title{
       margin-bottom:10px;
       font-size:24px;
       background:#00bfd6;
       color:#fff;
   }
   .layui-layer{}
   .lgclass{
       display: inline-block;
     
   }
    .lgclass span{
        display: inline;
   }
</style>
<!-- Chatra {literal} -->
<script type="text/javascript">
    (function(d, w, c) {
        w.ChatraID = 'hNdhAvGnzoANNxjLc';
        var s = d.createElement('script');
        w[c] = w[c] || function() {
            (w[c].q = w[c].q || []).push(arguments);
        };
        s.async = true;
        s.src = (d.location.protocol === 'https:' ? 'https:': 'http:')
        + '//call.chatra.io/chatra.js';
        if (d.head) d.head.appendChild(s);
    })(document, window, 'Chatra');
</script>
<!-- /Chatra {/literal} -->


<!-- Global site tag (gtag.js) - Google Analytics -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-106573688-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-106573688-1');
</script>

<!-- Global site tag (gtag.js) - Google Ads: 701955936 -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=AW-701955936"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-701955936');
</script>
<!-- Google tag (gtag.js) 20230223 -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-PH9Y53GZ1W"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-PH9Y53GZ1W');
</script>
<!-- Google GTM Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-W6ZF9K9');</script>
<!-- End Google Tag Manager -->
<!-- Google GTM Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W6ZF9K9"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->



</main><div class="chatra--webkit chatra--style-round chatra--side-bottom chatra--pos-right chatra--visible" id="chatra" data-turbolinks-permanent="" style="width: 60px; height: 60px; transform: none; z-index: 9999;"><div id="chatra__iframe-wrapper"><iframe frameborder="0" id="chatra__iframe" allowtransparency="true" title="Chatra live chat" allow="autoplay" src="https://chat.chatra.io/?isModern=true#hostId=hNdhAvGnzoANNxjLc&amp;mode=widget&amp;clientId=2Vdwl4OiQ4zAyEn9ojYju6vBjFSZ5pK2rT8u_B9l&amp;lang=en&amp;currentPage=https%3A%2F%2Fhuion.com%2F&amp;currentPageTitle=Creative%20Pen%20Displays%20%26%20Tablets%20for%20Drawing%20-%20Huion&amp;prevPage=&amp;referrer=" style="width: 380px; height: 600px; position: absolute;"></iframe></div></div></body></html>