* { -webkit-tap-highlight-color:rgba(0,0,0,0); }
body {
padding: 0px;
margin: 0px;
background: #000000;
}
#canvas {
display: block;
margin: 0 auto;
overflow:hidden;
}
#hw_splashscreen {
    zoom:1;font-size: 18px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9947483646;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: #fff;
    text-shadow: none;
    font-family: 'Microsoft Yahei', Arial, 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
}

#hw_splashscreen .inner {
    display: none;
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: 80px;
    pointer-events: none;
    background: #fff;
}

#hw_splashscreen .inner[data-ui~=ad] {
    padding-top: 2px;
}

#hw_splashscreen .inner[data-ui~=day] {
    background: #167de6;
}

#hw_splashscreen .inner[data-ui~=night] {
    background: #2c2a2a;
}

#hw_splashscreen .inner[data-ui~=alone] {
    padding-top: 2px;
}

#hw_splashscreen .inner[data-ui~=alone] img {
    width: auto;
    height: auto;
    position: absolute;
    top: 40%;
    left: 50%;
    margin: -100px auto auto -130px;
}

#hw_splashscreen .ft {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 290px;
}

#hw_splashscreen .ft * {
    position: static;
}

#hw_splashscreen img {
    display: block;
    margin: 10px auto 30px;
    height: 80px;
    width: auto;
}

#hw_splashscreen p {
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    margin: 10px auto;
    padding: 0 10px;
}

#hw_splashscreen .hw_info {
    font-size: 14.4px;
    color: rgba(255,255,255,.7);
}

#hw_splashscreen .progress {
    height: 20px;
    overflow: hidden;
    margin: 5px 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

#hw_splashscreen .progress .bar {
    float: left;
    min-width: 20px;
    height: 100%;
    line-height: 20px;
    font-size: 12.6px;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    background-color: #428bca;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    transition: width .6s ease;
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
}
#hwtb-root {
    position: static;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background: #f2f2f2;
    zoom:1}

#hwtb-root div {
    position: static
}

#hwtb-root a {
    text-decoration: none;
    color: #fff;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

#hwtb-root a:active,#hwtb-root a:focus {
    outline: 0
}

#hwtb-root img {
    touch-action-delay: none;
    -ms-touch-action: none;
    touch-action: none;
    -webkit-touch-callout: none
}

#hwtb-root[data-ui~=open] [data-role~=trigger] {
    display: none
}

#hwtb-root[data-ui~=open] [data-role~=masker],#hwtb-root[data-ui~=open] [data-role~=panel] {
    display: block
}

#hwtb-root [data-role~=trigger] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9996;
    width: 100%;
    color: transparent;
    font: 0/0 a;
    text-shadow: none
}

#hwtb-root [data-role~=trigger] img {
    width: 50px
}

#hwtb-root [data-role~=masker] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9996;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

#hwtb-root [data-role~=panel] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9997;
    width: 100%;
    padding: 4% 0 0 0;
    background: #3d3d3d
}

#hwtb-root [data-role~=panel]>p {
    margin: 6px auto;
    font-size: 90%
}

#hwtb-root [data-role~=tip] {
    position: fixed;
    top: -100%;
    left: 0;
    z-index: 9998;
    width: 100%
}

#hwtb-root [data-role~=tip][data-ui~=show] {
    top: 10%
}

#hwtb-root [data-role~=tip-inner] {
    display: inline-block;
    margin: 0 auto;
    padding: 6px 20px;
    border-radius: 6px;
    background: #242222
}

#hwtb-root [data-role~=tip-inner] img {
    width: 40px
}

#hwtb-root [data-role~=tip-inner] p {
    margin: 4px 0;
    padding: 0
}

#hwtb-root [data-role~=menus] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 90%;
    margin: 0 auto;
    padding: 10px 0
}

#hwtb-root [data-role~=menus] [data-role~=menu] {
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

#hwtb-root [data-role~=menus] [data-role~=menu]>a {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 4px 4px 0 4px;
    width: 60px;
    border-radius: 6px
}

#hwtb-root [data-role~=menus] [data-role~=menu]>a:active,#hwtb-root [data-role~=menus] [data-role~=menu]>a:focus {
    background: #5f5e5e
}

#hwtb-root [data-role~=menus] [data-role~=menu] img {
    width: 100%
}

#hwtb-root [data-role~=title] {
    margin: 10px auto;
    width: 70%;
    line-height: 1px;
    border-bottom: 1px solid #666
}

#hwtb-root [data-role~=title]>span {
    background: #3d3d3d;
    padding: 0 10px
}

#hwtb-root [data-role~=cancel] {
    display: block;
    padding: 0;
    text-align: center;
    border-top: 1px solid #666;
    color: transparent;
    font: 0/0 a;
    text-shadow: none
}

#hwtb-root [data-role~=cancel] img {
    width: 30px
}

#hwtb-root {
    zoom:1;font-size: 14px;
}