body,
div,
ol,
ul,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form,
fieldset,
legend,
input {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    font-family: Microsoft YaHei, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    font-size: 100%;
    outline: 0;
    -webkit-text-size-adjust: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

body {
    width: 100%;
    margin: 0;
    background: #000;
    color: #fff;
}

html,
body {
    position: relative;
}

@font-face {
    /* font-properties */
    font-family: pictos;
    src: url('../font/myfont.TTC'), url('../font/myfont.TTC'), url('../font/myfont.TTC');
    /* IE9 */
}

.font-face {
    font-family: pictos;
}

@font-face {
    /* font-properties */
    font-family: my-font;
    src: url('../font/myfont.TTC');
}

.weui-dialog__title {
    color: #000;
}

.box {
    max-width: 12.8rem;
    margin-left: auto;
    margin-right: auto;
}

input:disabled,
textarea:disabled {
    -webkit-text-fill-color: #b2b2b2;
    -webkit-opacity: 1;
    color: #b2b2b2;
}

select {
    border: none;
    padding: 0 10px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    appearance: none;
    -webkit-appearance: none;
    /* Safari 和 Chrome */
    -moz-appearance: none;
    /* Firefox */
    background: transparent;
    background: url('../images/icon_select_arrow.png') calc(100% - 10px) 50% / 10px 10px no-repeat #fff;
    border-radius: 6px;
    font-size: 14px;
}

.center {
    text-align: center;
}

.bottom-btn {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
}

.del {
    background: #ad0a0a;
}

.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

.info-tips {
    line-height: 28px;
    height: 28px;
    color: #f00;
}

a:hover,
a:link,
a:visited,
a {
    text-decoration: none;
}

ol,
ul,
li {
    list-style: none
}


/* .scroller ul {
    font-size: 18px !important;
} */

img,
input,
label,
select {
    vertical-align: middle;
}

#_centent {
    padding-bottom: 0.8rem;
}

.no-dev-title {
    padding: 10px 15px;
    background: #57565b;
}

.no-subscribe {
    text-align: center;
    margin: 10% 0;
}

html.no-scroll,
body.no-scroll {
    overflow: hidden;
}


/*
.mask, .mask-active {display:none; width: 100%; height: 100%; background: #000; opacity: 0.9; position: fixed; top: 0; left: 0; z-index: 3000;}
*/

.mask,
.dialog-mask,
.setTime-mask,
.mask-select-area {
    background: rgba(48, 48, 48, 0.7);
    z-index: 1000;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    display: none;
    z-index: 999;
}

.page-white {
    background: #fdfbfb;
}

.page-container {
    position: relative;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    top: 48px;
    right: 0;
    left: 0;
}

.header-bar {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background-image: linear-gradient(#57565b, #353535, #000);
    color: #fff;
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
    /*-webkit-transition: all 0.5s ease-in-out 0s;*/
    /*-moz-transition: all 0.5s ease-in-out 0s;*/
    /*-ms-transition: all 0.5s ease-in-out 0s;*/
    /*transition: all 0.5s ease-in-out 0s;*/
}

.header-bar p {
    font-size: 16px;
}

.views {
    display: block;
}

.pb80 {
    padding-bottom: 80px;
}

.clicked {
    /*right:200px!important;*/
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
}

.header-close {
    position: absolute;
    line-height: 36px;
    top: 3px;
    left: 4px;
    background-position: 12px 8px;
    height: 36px;
}

.home-logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    background: url(../images/icon.png) -542px -10px no-repeat;
}

.header-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    background: url(../images/icon.png) -350px -10px no-repeat;
}

.header-logout {
    position: absolute;
    top: 0;
    left: 0;
    height: 48px;
    font-size: 16px;
    padding: 0 10px;
}

.back-home {
    background: url(../images/icon.png) -494px -10px no-repeat;
}

.icon-r1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
}

.header-list,
.drown-menu-icon {
    background: url(../images/icon.png) -446px -10px no-repeat;
}

.header-favorite {
    background: url(../images/icon_favorite.png) 50% / 50% no-repeat;
}

.icon-r2 {
    position: absolute;
    top: 0;
    right: 50px;
    width: 48px;
    height: 48px;
}

.header-member {
    background: url(../images/icon.png) -398px -10px no-repeat;
}

.header-user {
    background: url(../images/icon.png) -398px -58px no-repeat;
}

.header-sort {
    background: url(../images/icon.png) -446px -58px no-repeat;
}

.header-refresh {
    background: url(../images/icon_refresh.png) 50% 50% no-repeat;
}

.wg-header {
    text-align: center;
    background: url(../images/logo_home_control.png) 50% 50% no-repeat;
    height: 200px;
    margin: 48px 0 40px;
}

.wg-header img {
    width: 100%;
}

.header-right {
    float: right;
}

.header-show {
    display: block;
    z-index: 9998;
}

.menu-show {
    opacity: 1;
    max-height: 50rem;
    overflow: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 9998;
}

.menu-show ul li {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.mask-show {
    display: block;
}

.page-top-wrap {
    overflow: hidden;
    position: relative;
    padding: 60px 0 28px 0;
}

.page-top-layout {
    display: flex;
    height: 60px;
}

.page-top-title {
    flex: auto;
    padding: 0 0 0 14px;
    color: #fff;
}

.page-top-title h1 {
    font-size: 18px;
    padding: 0 0 6px 0;
}

.page-top-title .title {
    position: relative;
    font-size: 18px;
    padding: 0 0 6px 0;
}

.page-top-title .sub-title {
    position: relative;
    font-size: 23px;
    padding: 0 0 6px 0;
}

.page-top-title .user-time {
    font-size: 16px;
}

.page-top-title p {
    position: relative;
}

.page-top-title p:before {
    display: inline-block;
    width: 8px;
    height: 8px;
    content: "";
    margin: 0 10px 0 0;
    border-radius: 4px;
}

.page-top-title p.online-status:before {
    background: #7cda3e;
}

.page-top-title p.offline-status:before {
    background: #92a0a8;
}

.online-status,
.offline-status {
    font-size: 14px;
    padding: 0 0 6px 0;
}

.control-safe-all {
    width: 60px;
}

.control-safe-all .safeAll-btn {
    display: block;
    width: 48px;
    height: 48px;
    background: url('../images/icon.png') -72px -148px no-repeat;
    margin: 0 auto;
}

.control-safe-all .lists-btn {
    display: block;
    width: 48px;
    height: 48px;
    background: url('../images/icon.png') -72px -148px no-repeat;
    margin: 0 auto;
}

.control-safe-all .safeAll-btn.checked {
    background: url('../images/icon.png') -24px -148px no-repeat;
}

.control-add {
    display: table;
    width: 48px;
}

.add-btn {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
}

ul.dev-items {
    margin: 0 10px 120px;
    overflow: hidden;
    /*background:rgba(0,0,0,.5);*/
}

ul.dev-items li {
    width: 49.88888%;
    height: 160px;
    float: left;
    background: url(../images/dev_item.png) 0 0 no-repeat;
    background-size: 100% 100%;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    position: relative;
    /*border-radius:3px;*/
}

ul.dev-items li.last {
    width: 100%;
}

ul.dev-items li a {
    display: block;
    text-align: center;
    color: #fff;
    height: 160px;
}

ul.dev-items li a span {
    display: block;
    font-weight: 700;
}

ul.dev-items li a span em {
    display: block;
    font-weight: normal;
    font-style: normal;
    font-size: 7px;
    color: #999;
    margin: 5px 0 0;
}

.dev-items {
    width: 100%;
    position: relative;
    margin: 0 0 60px;
}

.home-dev-like,
.home-dev-gateway,
.home-dev-extend-list {
    margin: 0 2px 2px;
    position: relative;
    display: block;
}

.home-dev-list {
    margin: 0 0 2px;
    background: #57565b;
}

.home-dev-list a.dev-name {
    display: block;
    padding: 10px 20px;
    position: relative;
}

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

.home-info .home-name {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}

.home-info .home-mac {
    font-size: 12px;
    color: #969696;
}

.home-info.gname {
    position: absolute;
    top: 10px;
    left: 10px;
}

.home-info.gstate {
    height: 40px;
    padding: 10px;
}

.dev-items .home-click {
    width: 32px;
    height: 32px;
    background: #35353a;
    border-radius: 26px;
    position: absolute;
    right: 1.4rem;
    bottom: 1.4rem;
}

.home-click i {
    width: 32px;
    height: 32px;
    display: inline-block;
}

.home-click i.arrow {
    background: url('../images/icon_allow.png') center / 32px 32px no-repeat;
}

.home-click i.disable {
    background: url('../images/icon_disable.png') center / 32px 32px no-repeat;
}

.home-click i.warning {
    background: url('../images/icon_warning.png') center / 32px 32px no-repeat;
}

.home-dev-like {
    background: none;
    /*overflow: hidden;*/
}

.home-dev-like-title {
    padding: 10px 15px;
    background: #57565b;
    line-height: 24px;
}

.home-dev-like-title .icon-menu,
.home-dev-like-title .devlist-menu {
    width: 16px;
    overflow: hidden;
    display: inline-block;
    vertical-align: text-top;
}

.home-dev-like-title .icon-menu1 {
    overflow: hidden;
    display: inline-block;
    vertical-align: text-top;
}

.home-dev-like-title .icon-menu1,
.home-dev-like-title .icon-menu {
    margin: 0 10px 0 0;
}

.home-dev-like-title .icon-menu span {
    width: 16px;
    height: 2px;
    background: #fff;
    float: left;
    margin: 4px 0;
}

.home-dev-like-title .icon-menu:before,
.home-dev-like-title .icon-menu:after {
    content: '';
    float: left;
    width: 20px;
    height: 2px;
    background: #fff;
}

.home-dev-like-title h3 {
    display: inline-block;
}

.home-dev-like-right {
    float: right;
}

.gateway-like-name .icon-arrow,
.home-dev-like-title .icon-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #7d7d7d;
}

.gateway-like-name .icon-arrow.down,
.home-dev-like-title .icon-arrow.down {
    transform: rotate(0deg);
    transition: all 0.2s linear;
}

.gateway-like-name .icon-arrow.up,
.home-dev-like-title .icon-arrow.up {
    transform: rotate(180deg);
    transition: all 0.2s linear;
}

.like-item-all {
    height: auto;
    /*display: none;*/
    background: #373b47;
}

.gateway-like-name {
    line-height: 48px;
    padding: 0 1em;
    border-top: 1px solid #333;
}

.gateway-like-name a {
    color: #969696;
}

.like-fun-cutover {
    display: inline-block;
    text-decoration: underline;
}

.like-item-all .like-items {
    /*height: 48px; overflow: hidden;*/
    position: relative;
}

.like-fun-back {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    display: none;
}

.like-fun-back .swipeout-like-back {
    flex: 1;
    background: #999;
    line-height: 28px;
    padding: 10px 1em;
}

.home-list-bg {
    background: #57565b!important;
}

.like-items .dev-name {
    /* flex: 1; */
    float: left;
}

.like-items .dev-status {
    text-align: right;
    float: right;
    display: contents;
}

.like-items .dev-status .range-show {
    display: flex;
    position: absolute;
    right: 40px;
}

.like-items .dev-status .range {
    flex: 1;
}

.like-items .dev-status .per {
    padding: 0 4px;
    width: 36px;
}

.like-items .dev-status .per:after {
    content: "%";
}

.like-item-more {
    text-align: center;
    line-height: 28px;
    background: #57565b;
    margin: 0 0 2px 0;
}

.like-null {
    padding: 1em;
}

.list-cell {
    /* display: flex; */
    line-height: 48px;
    height: 48px;
    padding: 0 1em;
}

.like-item-fun {
    display: flex;
}

.like-item-fun a {
    flex: 1;
    line-height: 48px;
    color: #fff;
    text-align: center;
}

.tempButton,
.curtainButton {
    float: right;
}

.tempButton>div,
.curtainButton>div {
    width: 36px;
    height: 36px;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    line-height: 36px;
}

.tempButton>div.btn,
.curtainButton>div.btn {
    border-radius: 4px;
    margin-left: 4px;
}

.tempButton>div.btn:after,
.curtainButton>div.btn:after {
    content: '';
    width: 36px;
    height: 36px;
    display: inline-block;
}

.curtainButton>div.off {
    background: black;
}

.curtainButton>div.on {
    background: #00a0e9;
}

.key-list {
    background-color: #353535;
}

.curtainButton>.open:after {
    background: url('../images/con_curtain_open.png') center/80% no-repeat;
}

.curtainButton>.stop:after {
    background: url('../images/con_curtain_stop.png') center/80% no-repeat;
}

.curtainButton>.close:after {
    background: url('../images/con_curtain_close.png') center/80% no-repeat;
}

.tempButton>div.setTemp:after {
    content: '℃';
}

.select2-results {
    background-color: #57565b;
}

.tempButton>.up:after,
.tempButtonn>.up.off:after {
    background: url('../images/con_up_off.png') center/60% no-repeat;
}

.tempButton>.down:after,
.tempButton>.down.off:after {
    background: url('../images/con_down_off.png') center/60% no-repeat;
}

.tempButton>.mode:after,
.tempButton>.mode.off:after {
    background: url('../images/con_mode_and_speed_white.png') center/60% no-repeat;
    margin-left: 8px;
}

body,
div,
ol,
ul,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form,
fieldset,
legend,
input {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    font-family: Microsoft YaHei, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    font-size: 100%;
    outline: 0;
    -webkit-text-size-adjust: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

body {
    width: 100%;
    margin: 0;
    background: #000;
    color: #fff;
}

html,
body {
    position: relative;
}

@font-face {
    /* font-properties */
    font-family: pictos;
    src: url('../font/myfont.TTC'), url('../font/myfont.TTC'), url('../font/myfont.TTC');
    /* IE9 */
}

.font-face {
    font-family: pictos;
}

@font-face {
    /* font-properties */
    font-family: my-font;
    src: url('../font/myfont.TTC');
}

.weui-dialog__title {
    color: #000;
}

.box {
    max-width: 12.8rem;
    margin-left: auto;
    margin-right: auto;
}

input:disabled,
textarea:disabled {
    -webkit-text-fill-color: #b2b2b2;
    -webkit-opacity: 1;
    color: #b2b2b2;
}

select {
    border: none;
    padding: 0 10px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    appearance: none;
    -webkit-appearance: none;
    /* Safari 和 Chrome */
    -moz-appearance: none;
    /* Firefox */
    background: transparent;
    background: url('../images/icon_select_arrow.png') calc(100% - 10px) 50% / 10px 10px no-repeat #fff;
    border-radius: 6px;
    font-size: 14px;
}

.center {
    text-align: center;
}

.bottom-btn {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
}

.del {
    background: #ad0a0a;
}

.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

.info-tips {
    line-height: 28px;
    height: 28px;
    color: #f00;
}

a:hover,
a:link,
a:visited,
a {
    text-decoration: none;
}

ol,
ul,
li {
    list-style: none
}


/* .scroller ul {
    font-size: 18px !important;
} */

img,
input,
label,
select {
    vertical-align: middle;
}

#_centent {
    padding-bottom: 0.8rem;
}

.no-dev-title {
    padding: 10px 15px;
    background: #57565b;
}

.no-subscribe {
    text-align: center;
    margin: 10% 0;
}

html.no-scroll,
body.no-scroll {
    overflow: hidden;
}


/*
.mask, .mask-active {display:none; width: 100%; height: 100%; background: #000; opacity: 0.9; position: fixed; top: 0; left: 0; z-index: 3000;}
*/

.mask,
.dialog-mask,
.setTime-mask,
.mask-select-area {
    background: rgba(48, 48, 48, 0.7);
    z-index: 1000;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    display: none;
    z-index: 999;
}

.page-white {
    background: #fdfbfb;
}

.page-container {
    position: relative;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    top: 48px;
    right: 0;
    left: 0;
}

.header-bar p {
    font-size: 16px;
}

.wgMain {
    position: relative;
    display: block;
    /*-webkit-transition: all 0.5s ease-in-out 0s;*/
    /*-moz-transition: all 0.5s ease-in-out 0s;*/
    /*-ms-transition: all 0.5s ease-in-out 0s;*/
    /*transition: all 0.5s ease-in-out 0s;*/
}

.views {
    display: block;
}

.pb80 {
    padding-bottom: 80px;
}

.clicked {
    /*right:200px!important;*/
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
}

.header-close {
    position: absolute;
    line-height: 36px;
    top: 3px;
    left: 4px;
    background-position: 12px 8px;
    height: 36px;
}

.home-logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    background: url(../images/icon.png) -542px -10px no-repeat;
}

.header-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    background: url(../images/icon.png) -350px -10px no-repeat;
}

.header-logout {
    position: absolute;
    top: 0;
    left: 0;
    height: 48px;
    font-size: 16px;
    padding: 0 10px;
}

.back-home {
    background: url(../images/icon.png) -494px -10px no-repeat;
}

.icon-r1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
}

.header-list,
.drown-menu-icon {
    background: url(../images/icon.png) -446px -10px no-repeat;
}

.header-favorite {
    background: url(../images/icon_favorite.png) 50% / 50% no-repeat;
}

.icon-r2 {
    position: absolute;
    top: 0;
    right: 50px;
    width: 48px;
    height: 48px;
}

.header-member {
    background: url(../images/icon.png) -398px -10px no-repeat;
}

.header-user {
    background: url(../images/icon.png) -398px -58px no-repeat;
}

.header-sort {
    background: url(../images/icon.png) -446px -58px no-repeat;
}

.header-refresh {
    background: url(../images/icon_refresh.png) 50% 50% no-repeat;
}

.wg-header {
    text-align: center;
    background: url(../images/logo_home_control.png) 50% 50% no-repeat;
    height: 200px;
    margin: 48px 0 40px;
}

.wg-header img {
    width: 100%;
}

.header-right {
    float: right;
}

.header-show {
    display: block;
    z-index: 9998;
}

.menu-show {
    opacity: 1;
    max-height: 50rem;
    overflow: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 9998;
}

.menu-show ul li {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.mask-show {
    display: block;
}

.page-top-wrap {
    overflow: hidden;
    position: relative;
    padding: 60px 0 28px 0;
}

.page-top-layout {
    display: flex;
    height: 60px;
}

.page-top-title {
    flex: auto;
    padding: 0 0 0 14px;
    color: #fff;
}

.page-top-title h1 {
    font-size: 18px;
    padding: 0 0 6px 0;
}

.page-top-title .title {
    position: relative;
    font-size: 18px;
    padding: 0 0 6px 0;
}

.page-top-title .sub-title {
    position: relative;
    font-size: 23px;
    padding: 0 0 6px 0;
}

.page-top-title .user-time {
    font-size: 16px;
}

.page-top-title p {
    position: relative;
}

.page-top-title p:before {
    display: inline-block;
    width: 8px;
    height: 8px;
    content: "";
    margin: 0 10px 0 0;
    border-radius: 4px;
}

.page-top-title p.online-status:before {
    background: #7cda3e;
}

.page-top-title p.offline-status:before {
    background: #92a0a8;
}

.online-status,
.offline-status {
    font-size: 14px;
    padding: 0 0 6px 0;
}

.control-safe-all {
    width: 60px;
}

.control-safe-all .safeAll-btn {
    display: block;
    width: 48px;
    height: 48px;
    background: url('../images/icon.png') -72px -148px no-repeat;
    margin: 0 auto;
}

.control-safe-all .lists-btn {
    display: block;
    width: 48px;
    height: 48px;
    background: url('../images/icon.png') -72px -148px no-repeat;
    margin: 0 auto;
}

.control-safe-all .safeAll-btn.checked {
    background: url('../images/icon.png') -24px -148px no-repeat;
}

.control-add {
    display: table;
    width: 48px;
}

.add-btn {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
}

ul.dev-items {
    margin: 0 10px 120px;
    overflow: hidden;
    /*background:rgba(0,0,0,.5);*/
}

ul.dev-items li {
    width: 49.88888%;
    height: 160px;
    float: left;
    background: url(../images/dev_item.png) 0 0 no-repeat;
    background-size: 100% 100%;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    position: relative;
    /*border-radius:3px;*/
}

ul.dev-items li.last {
    width: 100%;
}

ul.dev-items li a {
    display: block;
    text-align: center;
    color: #fff;
    height: 160px;
}

.area-device-info>a {
    color: white;
}

ul.dev-items li a span {
    display: block;
    font-weight: 700;
}

ul.dev-items li a span em {
    display: block;
    font-weight: normal;
    font-style: normal;
    font-size: 7px;
    color: #999;
    margin: 5px 0 0;
}

.dev-items {
    width: 100%;
    position: relative;
    margin: 0 0 60px;
}

.home-dev-like,
.home-dev-gateway,
.home-dev-extend-list {
    margin: 0 2px 2px;
    position: relative;
    display: block;
}

.home-dev-list {
    margin: 0 0 2px;
    background: #57565b;
}

.home-dev-list a.dev-name {
    display: block;
    padding: 10px 20px;
    position: relative;
}

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

.home-info .home-name {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}

.home-info .home-mac {
    font-size: 12px;
    color: #969696;
}

.home-info.gname {
    position: absolute;
    top: 10px;
    left: 10px;
}

.home-info.gstate {
    height: 40px;
    padding: 10px;
}

.dev-items .home-click {
    width: 32px;
    height: 32px;
    background: #35353a;
    border-radius: 26px;
    position: absolute;
    right: 1.4rem;
    bottom: 1.4rem;
}

.home-click i {
    width: 32px;
    height: 32px;
    display: inline-block;
}

.home-click i.arrow {
    background: url('../images/icon_allow.png') center / 32px 32px no-repeat;
}

.home-click i.disable {
    background: url('../images/icon_disable.png') center / 32px 32px no-repeat;
}

.home-click i.warning {
    background: url('../images/icon_warning.png') center / 32px 32px no-repeat;
}

.home-dev-like {
    background: none;
    /*overflow: hidden;*/
}

.home-dev-like-title {
    padding: 10px 15px;
    background: #57565b;
    line-height: 24px;
}

.home-dev-like-title .icon-menu,
.home-dev-like-title .devlist-menu {
    width: 16px;
    overflow: hidden;
    display: inline-block;
    vertical-align: text-top;
}

.home-dev-like-title .icon-menu {
    margin: 0 10px 0 0;
}

.home-dev-like-title .icon-menu span {
    width: 16px;
    height: 2px;
    background: #fff;
    float: left;
    margin: 4px 0;
}

.home-dev-like-title .icon-menu:before,
.home-dev-like-title .icon-menu:after {
    content: '';
    float: left;
    width: 20px;
    height: 2px;
    background: #fff;
}

.home-dev-like-title h3 {
    display: inline-block;
}

.home-dev-like-right {
    float: right;
}

.home-dev-like-title .icon-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #7d7d7d;
}

.home-dev-like-title .icon-arrow.down {
    transform: rotate(0deg);
    transition: all 0.2s linear;
}

.home-dev-like-title .icon-arrow.up {
    transform: rotate(180deg);
    transition: all 0.2s linear;
}

.gateway-like-name {
    line-height: 48px;
    padding: 0 1em;
    border-top: 1px solid #333;
}

.gateway-like-name a {
    color: #969696;
}

.like-fun-cutover {
    display: inline-block;
    text-decoration: underline;
}

.like-item-all .like-items {
    /*height: 48px; overflow: hidden;*/
    position: relative;
}

.like-fun-back {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    display: none;
}

.like-fun-back .swipeout-like-back {
    flex: 1;
    background: #999;
    line-height: 28px;
    padding: 10px 1em;
}

.home-list-bg {
    background: #57565b!important;
}

.like-items .dev-name {
    /* flex: 1; */
    float: left;
}

.like-items .dev-status {
    text-align: right;
    float: right;
}

.like-items .dev-status .range-show {
    display: flex;
    float: left;
}

.like-items .dev-status .range {
    flex: 1;
}

.like-items .dev-status .per {
    padding: 0 4px;
    width: 36px;
}

.like-items .dev-status .per:after {
    content: "%";
}

.like-item-more {
    text-align: center;
    line-height: 28px;
    background: #57565b;
    margin: 0 0 2px 0;
}

.like-null {
    padding: 1em;
}

.list-cell {
    /* display: flex; */
    line-height: 48px;
    height: 48px;
    padding: 0 1em;
}

.like-item-fun {
    display: flex;
}

.like-item-fun a {
    flex: 1;
    line-height: 48px;
    color: #fff;
    text-align: center;
}

.tempButton,
.curtainButton {
    float: right;
}

.tempButton>div,
.curtainButton>div {
    width: 36px;
    height: 36px;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    line-height: 36px;
}

.tempButton>div.btn,
.curtainButton>div.btn {
    border-radius: 4px;
    margin-left: 4px;
}

.tempButton>div.btn:after,
.curtainButton>div.btn:after {
    content: '';
    width: 36px;
    height: 36px;
    display: inline-block;
}

.curtainButton>div.on {
    background: #00a0e9;
}

.curtainButton>.open:after {
    background: url('../images/con_curtain_open.png') center/80% no-repeat;
}

.curtainButton>.stop:after {
    background: url('../images/con_curtain_stop.png') center/80% no-repeat;
}

.curtainButton>.close:after {
    background: url('../images/con_curtain_close.png') center/80% no-repeat;
}

.tempButton>div.setTemp:after {
    content: '℃';
}

.select2-results {
    background-color: #57565b;
}

.tempButton>.up:after,
.tempButtonn>.up.off:after {
    background: url('../images/con_up_off.png') center/60% no-repeat;
}

.tempButton>.down:after,
.tempButton>.down.off:after {
    background: url('../images/con_down_off.png') center/60% no-repeat;
}

.tempButton>.mode:after,
.tempButton>.mode.off:after {
    background: url('../images/con_mode_and_speed_white.png') center/60% no-repeat;
    margin-left: 8px;
}


/* 制热 */

.c_mode_1:after {
    background-position: 0 8px !important;
}


/* 制冷 */

.c_mode_2:after {
    background-position: 0 -30px !important;
}


/* 恒温 */

.c_mode_3:after {
    background-position: 0 -70px !important;
}


/* 地暖 */

.c_mode_4:after {
    background-position: 0 -108px !important;
}


/* 速热 */

.c_mode_5:after {
    background-position: 0 -148px !important;
}


/* 送风 */

.c_mode_6:after {
    background-position: 0 -190px !important;
}


/* 除湿 */

.c_mode_7:after {
    background-position: 0 -233px !important;
}

.tempButton>.speed:after,
.tempButton>.speed.off:after {
    background: url('../images/con_mode_and_speed_white.png') center/60% no-repeat;
    margin-left: 8px;
}


/* 一档 */

.c_speed_1:after {
    background-position: 0 -275px !important;
}


/* 二档 */

.c_speed_2:after {
    background-position: 0 -315px !important;
}


/* 三档 */

.c_speed_3:after {
    background-position: 0 -365px !important;
}


/* 自动*/

.c_speed_4:after {
    background-position: 0 -422px !important;
}

.like-ac-btn {
    float: right;
}

.like-ac-btn>div {
    width: 36px;
    height: 36px;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    line-height: 36px;
}

.like-ac-btn>div.btn {
    border-radius: 4px;
    margin-left: 4px;
}


/* 温控样色 - 关 */

.like-ac-btn>div.btn_0,
.tempButton>div.btn_0 {
    background: #686868;
}


/* 温控样色 - 制热 */

.like-ac-btn>div.btn_1,
.tempButton>div.btn_1 {
    background: #ffe109;
}


/* 温控样色 - 制冷 */

.like-ac-btn>div.btn_2,
.tempButton>div.btn_2 {
    background: #00a0e9;
}


/* 温控样色 - 恒温 */

.like-ac-btn>div.btn_3,
.tempButton>div.btn_3 {
    background: #6ee2fe;
}


/* 温控样色 - 地暖 */

.like-ac-btn>div.btn_4,
.tempButton>div.btn_4 {
    /*background: #eef460;*/
    background-color: #bdc409;
}


/* 温控样色 - 速热 */

.like-ac-btn>div.btn_5,
.tempButton>div.btn_5 {
    background: #ba2c2c;
}


/* 温控样色 - 送风 */

.like-ac-btn>div.btn_6,
.tempButton>div.btn_6 {
    background: #14ba1e;
}


/* 温控样色 - 除湿 */

.like-ac-btn>div.btn_7,
.tempButton>div.btn_7 {
    background: #0003eb;
}

.like-ac-btn>div.btn:after {
    content: '';
    width: 36px;
    height: 36px;
    display: inline-block;
}

.like-ac-btn>.power:after,
.like-ac-btn>.power.off:after {
    background: url('../images/con_power_off.png') center/60% no-repeat;
}

.tempButton>.mtpower:after {
    background: url('../images/con_power_off.png') center/60% no-repeat;
}

.tempButton>.up.on:after {
    background-image: url('../images/con_up_on.png');
}

.tempButton>.down.on:after {
    background-image: url('../images/con_down_on.png');
}

.tempButton>.mode.on:after {
    background-image: url('../images/con_mode_on.png');
}

.tempButton>.speed.on:after {
    background-image: url('../images/con_speed_on.png');
}

.like-ac-btn>.power.on:after {
    background-image: url('../images/con_power_on.png');
}

.dev-status i {
    width: 86px;
    height: 86px;
    display: block;
    margin: 0 auto;
}

.dev-status i.icon-router-online {
    background: url('../images/icon_router_online.png') no-repeat;
    background-size: 100% 100%;
}

.dev-status i.icon-router-offline {
    background: url('../images/icon_router_offline.png') no-repeat;
    background-size: 100% 100%;
    opacity: 0.5;
}

.dev-status i.icon-router-online-signal {
    background: url('../images/icon_router_online_signal.png') no-repeat;
    background-size: 100% 100%;
}

.dev-status i.icon-router-offline-signal {
    background: url('../images/icon_router_offline_signal.png') no-repeat;
    background-size: 100% 100%;
    opacity: 0.5;
}

.home-dev-extend-list {
    padding: 1.4rem;
}

.home-dev-extend-name {}

.select-list-wrap {
    margin: 2rem 1rem;
}

.devAttrTip {
    margin: 4px 0 0;
}

a.qrCode i.icon-qrdev {
    background: url(../images/icon_qrdev.png) 50% 80% no-repeat;
    background-size: 60px 60px;
    width: 100%;
    height: 70px;
    display: block;
    padding: 40px 0 0;
}

#header-list-body {
    position: fixed;
    z-index: 2000;
    right: -200px;
    top: 0;
    font-size: 14px;
    width: 200px;
    height: 100%;
    overflow-y: auto;
    background: #eee;
}

#header-list-body ul {
    cursor: pointer;
}

#header-list-body ul li {
    padding: 10px;
    margin: 6px;
    background: #fff;
    color: #585858;
}

#header-list-body ul li a {
    display: block;
}

#header-list-body .menu-icon-fun {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.menu-icon-fun li:before {
    content: " ";
    display: inline-block;
    width: 32px;
    height: 32px;
    float: left;
    margin: 0 10px 0 0;
}

.menu-icon-fun li.i-area-sort:before {
    background: url('../images/icon_sort_s.png') 50% 50% / 100% 100% no-repeat;
}

.menu-icon-fun li.i-area-safe:before {
    background: url('../images/icon_safe_s.png') 50% 50% / 100% 100% no-repeat;
}


/*.menu-icon-fun li.i-area-timezone:before{background: url('../images/icon_timezone_s.png') 50% 50% / 100% 100% no-repeat;}*/

.menu-icon-fun li {
    cursor: pointer;
    overflow: hidden;
    line-height: 32px;
}

.menu-icon-fun li p {
    color: #585858;
}


/*.pop-btn {margin: 20px 10px;}*/

.pop-btn button {
    width: 100%;
}

.load-btn {
    width: 100%;
    background: #00d200;
    display: block;
    line-height: 45px;
    text-align: center;
    margin: 10px 0;
}

.cancel-btn {
    height: 45px !important;
    background: #f5f5f5;
    color: #666;
    line-height: 43px !important;
    border: solid 1px #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    margin: 10px 0 0;
}

.complete-btn,
.ok-btn {
    width: 100%;
    height: 45px;
    line-height: 45px;
    background: #00a7e4;
    color: #fff;
    border: none;
    margin: 10px 0 0;
}

.delete-btn {
    width: 100%;
    height: 45px;
    line-height: 45px;
    background: #c8161d;
    color: #fff;
    border: none;
    margin: 10px 0 0;
}

#modifyAreaNamePop,
#modifyDevNamePop,
#deleteDevPop,
#addAreaNamePop,
#deleteAreaPop,
#qrDev,
#userDelAllPop,
#userDelPop,
#userUpdataPop,
#userSafePop,
#userDeletePop {
    display: none;
}

.popup {
    background: #f2f2f2;
    z-index: 1000;
    position: fixed;
    top: 50%;
    z-index: 4000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    left: 5%;
    right: 5%;
    padding: 0 15px;
    min-height: 200px;
    margin-top: -100px;
}

.qrDev {
    text-align: center;
    margin-top: -130px;
    position: fixed;
    top: 50%;
    z-index: 4000;
    left: 5%;
    right: 5%;
    padding: 0 15px;
}

.modify-pop,
.add-pop,
.userClean-pop {
    height: 200px;
    margin-top: -100px;
}

.delete-pop {
    height: 120px;
    margin-top: -60px;
}

.userMsg-pop {
    height: 280px;
    margin-top: -140px;
}

.H330 {
    height: 360px;
    margin-top: -160px;
}

.userMsg-pop img {
    width: 80px;
    height: 80px;
    display: block;
    margin: 20px auto 0;
}

.userMsg-pop em {
    color: red;
    font-style: normal;
}

.userMsg-pop .is-del {
    text-align: center;
    margin: 10px 0;
}

.userMsg-pop .is-del label {
    color: #999;
    margin: 6px 0;
    display: block;
}

#shareCode {
    margin: 45px auto 120px;
}

.homeQR,
.shareQR {
    text-align: center;
    margin: 80px auto 10px;
}

.dev-verify {
    margin: 5px 0 0;
}

#dialog-autoAddDev {
    display: none;
}

#dialog-autoSearch {
    display: none;
}

#dialog-autoSearch .devAutoID {
    margin-top: 10px;
    color: #f00;
    text-align: center;
    font-size: 16px;
}

.dialog-con {
    margin: 20px 0;
    height: 34px;
    text-align: center;
    color: #000;
    overflow: hidden;
}

.dialog-btn-style2 button {
    width: 48%;
    float: left;
    margin: 10px 1% 0;
}

.loadEffect {
    width: 80px;
    height: 80px;
    position: relative;
    margin: 0 auto;
    margin-top: 16px;
}

.loadEffect span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d2d2d2;
    position: absolute;
    -webkit-animation: load 1.04s ease infinite;
}

@-webkit-keyframes load {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}

.loadEffect span:nth-child(1) {
    left: 0;
    top: 50%;
    margin-top: -8px;
    -webkit-animation-delay: 0.13s;
}

.loadEffect span:nth-child(2) {
    left: 10px;
    top: 10px;
    -webkit-animation-delay: 0.26s;
}

.loadEffect span:nth-child(3) {
    left: 50%;
    top: 0;
    margin-left: -8px;
    -webkit-animation-delay: 0.39s;
}

.loadEffect span:nth-child(4) {
    top: 10px;
    right: 10px;
    -webkit-animation-delay: 0.52s;
}

.loadEffect span:nth-child(5) {
    right: 0;
    top: 50%;
    margin-top: -8px;
    -webkit-animation-delay: 0.65s;
}

.loadEffect span:nth-child(6) {
    right: 10px;
    bottom: 10px;
    -webkit-animation-delay: 0.78s;
}

.loadEffect span:nth-child(7) {
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    -webkit-animation-delay: 0.91s;
}

.loadEffect span:nth-child(8) {
    bottom: 10px;
    left: 10px;
    -webkit-animation-delay: 1.04s;
}

.favorite {
    position: fixed;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
}

.favorite:after {
    content: "";
    width: 2rem;
    height: 2rem;
    background: #00a0e9;
    display: inline-block;
}

.product-show {
    width: 260px;
    height: 266px;
    margin: -133px 0 0 -130px;
}

.popup .title {
    font-size: 18px;
    color: #333;
    line-height: 20px;
    font-weight: normal;
    text-align: center;
    margin-top: 30px;
}

#items-list {
    padding: 0 0 80px;
    overflow: hidden;
}

.set-con {
    border: 1px solid #ccc;
    background-color: #fff;
    margin-top: 20px;
    padding: 0 14px;
}

.item-in {
    width: 100%;
    display: table;
    height: 40px;
}

.item-in input {
    width: 100%;
    height: 40px;
    line-height: normal;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -box-sizing: border-box;
    border: 0 none;
    display: block;
    color: #333;
    padding: 0 18px;
}

.set-devname .icon {
    width: 16px;
    display: table-cell;
    vertical-align: middle;
}

.set-devname .icon i {
    width: 18px;
    height: 18px;
    background: url(../images/icon_router.png) 50% 50% no-repeat;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    display: block;
}

nav.classify,
.type-body {
    width: 100%;
    margin: 20px auto 120px;
}

nav.classify ul {
    width: 100%;
    display: table;
}

nav.classify ul li {
    /*display: inline-table;*/
    width: 33.33333%;
    position: relative;
    overflow: hidden;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

nav.classify ul li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px 0;
    text-align: center;
    color: #fff;
}

nav.classify ul li a b {
    width: 60px;
    height: 60px;
    margin-bottom: 8px;
    display: inline-block;
}

.ext-other {
    position: relative;
    display: flex;
}

.ext-device {
    position: relative;
    flex: 1;
}

.speaker-info {
    background: #686868;
    color: #fff;
    margin: 2px 4px 0;
    padding: 16px;
    overflow: hidden;
    position: relative;
    display: flex;
}

.speaker-info .speaker-name {
    flex: 1;
    padding: 0 0 0 28px;
    background: url('../images/icon_speaker.png') left 50% / 18px 18px no-repeat;
}

.speaker-info span {
    width: 16%;
    text-align: right;
}

ul.speaker-items {
    margin: 0 4px;
}

ul.speaker-items li {
    float: left;
    display: inline-block;
    width: 33.3333%;
    overflow: hidden;
}

.dev_option {
    background: #50606e;
    color: #fff;
    padding: 10px;
    text-align: center;
    margin: 1px;
    height: 160px;
}

.speaker-option {
    background: #50606e;
    padding: 10px;
    text-align: center;
    margin: 1px;
}

.speaker-option:before {
    content: "";
    display: inline-block;
    width: 64px;
    height: 64px;
    background: url('../images/icon_speaker.png') 50% 50% / 48px 48px no-repeat;
    margin: 0 0 14px;
}

.speaker-option .name {
    margin: 0 0 6px;
    line-height: 28px;
}

.speaker-option .status {
    font-size: 12px;
    line-height: 18px;
}

.wrap-speaker {
    position: relative;
    overflow: hidden;
}

.wrap-speaker .speaker-name {
    padding: 48px 14px;
    text-align: center;
}

.wrap-speaker .speaker-name:before {
    content: "";
    display: inline-block;
    width: 120px;
    height: 120px;
    background: url('../images/icon_speaker.png') 50% 50% / 120px 120px no-repeat;
}

.wrap-speaker .speaker-name p {
    margin: 14px 0 0;
    line-height: 32px;
}

.wrap-speaker .speaker-name p svg {
    margin: -6px 0 0 4px;
    vertical-align: middle;
}

.wrap-speaker .detail-info {
    overflow: hidden;
}

.wrap-speaker .detail-info .info {
    overflow: hidden;
    line-height: 48px;
    margin: 1px 0 0;
    background: #57565b;
    padding: 0 14px;
    color: #fff;
}

.wrap-speaker .detail-info .info .lt {
    float: left;
}

.wrap-speaker .detail-info .info .con {
    float: right;
}

.wrap-speaker .speaker-id {
    color: #fff;
}

.col2 {
    overflow: hidden;
}

.col2>div {
    width: calc(50% - 2px);
    margin: 2px 1px 0;
    position: relative;
    overflow: hidden;
    float: left;
}

.dev-elec-master {
    background: #50606e;
    color: #fff;
    padding: 10px;
    text-align: center;
    margin: 1px;
    display: flex;
}

.dev-elec-master .lt {
    min-width: 64px;
    width: 40%;
    margin: 0 10px 0 0;
    text-align: center;
}

.dev-elec-master .rt {
    flex: 1;
    text-align: left;
}

.dev-elec-master .dev-name {}

.dev-elec-master .dev-info>div {
    overflow: hidden;
    line-height: 18px;
}

.dev-elec-master .dev-info>div span {
    float: left;
}

.dev-elec-master .dev-info>div em {
    float: right;
    font-style: normal;
}

.dev-elec-master .dev-status {
    margin: 12px 0;
}

.dev-elec-master .status.on {
    background: #14ba1e;
}

.dev-elec-master .status.off {
    background: #b2b2b2;
    color: #585858;
}

.dev-elec-master .dev-status.online {
    color: #14ba1e;
}

.dev-elec-master .dev-status.offline {
    color: #b2b2b2;
}

.dev-elec-master .dev-pic {
    /* width: 64px;
    height: 64px; */
    margin: 10px auto;
    /* background: url('../images/Airopen-online.png') 100%/cover no-repeat; */
}

.dev-elec-master em:after {
    padding: 0 0 0 2px;
}

.dev-elec-master .dev-current em:after {
    content: 'A';
}

.dev-elec-master .dev-voltage em:after {
    content: 'V';
}

.dev-elec-master .dev-temp em:after {
    content: '°';
}

.dev-elec-master .dev-total em:after {
    content: 'W';
}

ul.area-items {
    overflow: hidden;
    margin: 0 4px;
}

ul.area-items li {
    background: rgba(87, 86, 91, 0.9);
    margin: 2px 0 0;
    overflow: hidden;
    position: relative;
}

ul.area-items li a {
    overflow: hidden;
}

.area-item-name {
    padding: 0 0 18px;
}

.area-list-name {
    font-size: 18px;
    padding: 28px 14px 18px;
    color: #fff;
}

.area-device-info {
    float: left;
    overflow: hidden;
    height: auto;
    flex: 1;
    color: #fff;
}

.area-device-info span {
    line-height: 18px;
    height: 18px;
    vertical-align: middle;
}

.area-option {
    position: relative;
    overflow: hidden;
    padding: 10px 14px 0;
    display: flex;
}

.real-light,
.real-temperature {
    display: inline-block;
    font-size: 14px;
    text-align: center;
    margin: 0 20px 0 0;
    overflow: hidden;
}


/* .real-temperature:before  */

.real-light:before {
    content: "";
    width: 18px;
    height: 18px;
    float: left;
    display: inline-block;
}

.real-light:before {
    background: url('../icon/real_light_on.png');
    background-size: cover;
}

.real-light-off:before {
    background: url('../icon/real_light_off.png');
    background-size: cover;
}

.real-temperature .temp_on_off {
    width: 18px;
    display: inline-block;
}

.real-temperature .temp_on_off.off {
    background: url('../icon/real_temperature.png') no-repeat scroll 50% 0 transparent;
    background-size: 100% 100%;
}

.real-temperature .temp_on_off.on {
    background: url('../icon/real_temperature_open.png') no-repeat scroll 50% 0 transparent;
    background-size: 100% 100%;
}

.temp-layer {
    overflow: hidden;
}

.temp-layer span {
    margin: 0 4px;
}

.temp-layer .temp-degree:after {
    content: "℃";
}

.area-switch-set {
    width: 18px;
    height: 18px;
    z-index: 50;
}

.area-switch-set i {
    display: inline-block;
    width: 18px;
    height: 18px;
}

.area-safe,
.area-sort {
    position: relative;
    width: 18px;
    height: 18px;
    z-index: 100;
}

.area-safe {
    color: white;
}

.area-safe i.icon-safe {
    background: url('../icon/sort.png') no-repeat;
    background-size: cover;
}

.icon-camera {
    background: url(../icon/record_fill.png) no-repeat;
    background-size: cover;
}

.icon-scan {
    background: url(../icon_1/scan.png) no-repeat;
    background-size: cover;
}

.icon-up {
    background: url(../icon/up.png) no-repeat;
    background-size: cover;
}

.area-safe i.icon-safe.on {
    background: url('../icon/lock.png') no-repeat;
    background-size: cover;
}

.area-safe i.icon-safe.off {
    background: url('../icon/unlock.png') no-repeat;
    background-size: cover;
}

.area-sort {
    display: none;
}

.area-sort i.icon-sort {
    background: url('../icon/sort.png') no-repeat;
    background-size: cover;
}

.btn-sort {
    width: 100%;
    height: 60px;
    display: inline-block;
}

.reDisplay .dev-body .reDisplay {
    text-align: center;
    line-height: 32px;
    padding: 1rem 0;
    display: none;
}

.orderUpdate {
    position: fixed;
    z-index: 100;
    bottom: 0;
    width: 100%;
    line-height: 36px;
    padding: 10px 0;
    font-size: 14px;
    text-align: center;
    background: #00a0e9;
    cursor: pointer;
    margin: 0;
}

ul.safe-area-list {
    overflow: hidden;
    height: 1%;
}

ul.safe-area-list li {
    line-height: 48px;
    margin: 0 10px;
    border-bottom: 1px solid #3c3c3c;
}

ul.safe-area-list li .safe-area-name {
    float: left;
}

ul.safe-area-list li label {
    overflow: hidden;
    height: 1%;
    display: block;
}

ul.safe-area-list li label input {
    width: 18px;
    height: 18px;
    float: right;
    vertical-align: middle;
    margin-top: 16px;
}

#show-big {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 4000;
    display: none;
}

.model_title {
    text-align: center;
    margin: 10px 0;
}

.model_body {
    margin: 0 auto;
}

.model_body form {
    width: 100%;
    margin: 48px 0 0;
}

dl.klist {
    overflow: hidden;
    margin: 3% 0;
}

dl.klist dt {
    width: 20%;
    color: #000;
}

dl.klist dd {
    padding: 0 2%;
}

dl.klist dd.k1 {
    width: 60%;
}

dl.klist dd.k2 {
    width: 20%;
}

dl.klist dd.k1 input,
dl.klist dd.k2 select {
    width: 100%;
}

.edit_time {
    line-height: 46px;
    overflow: hidden;
}

.model_body .edit_time input[type="number"] {
    width: 40px;
    float: left;
    text-align: right;
}

.edit_time button {
    width: 60px;
    height: 36px;
    padding: 4px 0;
    margin: 5px 0;
    float: right;
}

.edit_time span {
    float: left;
    margin: 0 5px 0 4px;
}

.edit_update {
    width: 100%;
    height: 45px;
    background: #00a7e4;
    color: #fff;
    border: none;
    margin: 14px 0;
}

.edit_delete {
    width: 100%;
    height: 45px;
    background: #ad0a0a;
    color: #fff;
    border: none;
    margin: 0 0 14px;
}


/*
#userBody{overflow:hidden;}
#userBody .user-list{border-bottom: 1px dashed #fff;background: rgba(255,255,255,0.1);}
#userBody .user-list a{overflow: hidden;display:block;padding:10px 20px;}
#userBody .user-list .user-info{display:table-cell;vertical-align:middle;}
#userBody .user-list .user-info em{width:60px;float:left;text-align:center;}
.user-info .userhead{width:48px;height:48px;margin:0 16px 0 0;vertical-align:middle;float:left;}


.adminLayout{margin: 20px 0;}
.userHeadTitle{line-height: 32px;overflow: hidden;margin-bottom: 10px;}
.userHeadTitle em{width: 4px;height:32px;background: #00a7e4;float: left;}
.userHeadTitle h2{display: inline-block;background: #00a7e4;float: left;margin: 0 0 0 5px;padding:0 10px;}
.admin-info{text-align: center;background: rgba(255,255,255,0.1);padding:10px 0;border-bottom: 1px dashed #fff;}
.admin-info .userhead{width:80px;display: block;margin:0 auto 6px;}

*/

#userBody {
    overflow: hidden;
    position: relative;
    padding: 28px 0 0;
}

#userBody .userLayout {
    overflow: hidden;
    position: relative;
    margin: 4px 0 0;
}

.userLayout .userHeadTitle {
    background: #282828;
}

.userLayout .userHeadTitle h1 {
    padding: 14px;
    font-size: 14px;
}

.userLayout .user-list {
    padding: 14px;
    margin: 2px 0 0;
    background: #57565b;
    color: #fff;
}

.userLayout .user-list img {
    width: 64px;
    height: 64px;
    display: inline-block;
}

.userLayout .user-list .user-info {
    display: flex;
}

.userLayout .user-list .user-info .username-info {
    flex: auto;
    margin: 0 0 0 14px;
}

.userLayout .user-list .user-info .username-title {
    display: block;
    padding: 0px 0px 5px 0px;
    line-height: 18px;
    vertical-align: middle;
    color: #fff;
}

.userLayout .user-list .user-info .username-id span:before {
    content: "UID";
    color: #35353a;
    background: #92a0a8;
    margin: 0 4px 0 0;
    padding: 0 4px;
    border-radius: 4px 0 0 4px;
    font-weight: 600;
}

.userLayout .user-list .user-info .username-id span {
    font-size: 12px;
    background: #282828;
    border-radius: 4px;
    padding: 0 4px 0 0;
    display: inline-block;
}

.userLayout .user-list .user-info .username-validity {
    line-height: 14px;
}

.userLayout .user-list .user-info .username-validity span {
    font-size: 12px;
    color: #bbb;
    border-radius: 4px;
    padding: 0 4px 0 0;
    margin: 10px 0px 0px 0px;
    display: inline-block;
}

.userLayout .user-list .user-info .username-id {
    line-height: 14px;
}

.userLayout .user-list .user-info .user-status-icon li img {
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
}

.userLayout .user-list .user-time {
    font-size: 14px;
}


/*
.username-status{float:left;}
.username-status h3{font-size: 14px;line-height:28px;}
ul.user-status-icon{overflow:hidden;}
ul.user-status-icon li{display:inline; float:left;}
ul.user-status-icon li img{width:18px;height:18px;margin:0 3px 0 0;}
.user-status span{margin:0 5px;}
.user-status span img{width:18px;height:18px;}
*/

.member-body {
    margin: 20px 10px 120px;
}

.member-headimg {
    text-align: center;
    margin: 0 0 20px 0;
}

.member-headimg img {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    background: #fff;
    border: 4px solid #fff;
    box-shadow: 0 0 8px #000;
    margin: 0 0 20px 0;
}

.member-body p {
    margin: 10px 0;
    overflow: hidden;
    height: 1%;
    font-size: 14px;
}

#tabTitle {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    z-index: 1;
    height: 2.6rem;
    border-bottom: 1px solid #e2e0e0;
}

#tabTitle span {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    text-align: center;
    line-height: 2.6rem;
    background: #fff;
    color: #666;
}

#tabTitle span.on {
    position: relative;
    margin-bottom: -1px;
    color: #00a0e9;
    border-bottom: 2px solid #00a0e9;
}

#tabTitle span.on:after {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    margin-left: -6px;
    content: "";
    width: 0;
    height: 0;
    line-height: 0;
    border: 6px solid transparent;
    border-bottom-color: #00a0e9;
}

#tabContent .con {
    background: #fff;
    color: #666;
    padding: 2rem 1rem;
    display: none;
}

#tabContent .log-in,
.modify-btn {
    width: 100%;
    height: 2.6rem;
    line-height: 2.6rem;
    background: #00a7e4;
    color: #fff;
    border: none;
    margin: 1rem 0 0;
}

#tabContent .show {
    display: block;
}

#tabContent form {
    line-height: 2rem;
}

#tabContent form input {
    height: 2rem;
    width: 100%;
}

#loginsubmit,
#membersubmit,
#bindsubmit {
    display: block;
    text-align: center;
    margin: 10px 0;
}

.authList li {
    padding: 0 20px;
    line-height: 28px;
}

.authList li em {
    margin: 0 10px 0 0;
}

.authUserInfo {
    text-align: center;
    margin: 40px 0;
    position: relative;
}

.authUserInfo .userhead {
    width: 120px;
    height: 120px;
    border-radius: 60px;
    margin: 0 0 20px 0;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .4);
}

.authUserInfo .nickname {
    margin: 5px 0 15px;
}

.authUserInfo ul.setUser {
    margin: 10px 0;
    text-align: center;
    padding: 6px 0 5px;
}

.authUserInfo ul.setUser li {
    display: inline;
}

.authUserInfo ul.setUser li a {
    padding: 6px 8px 5px;
    border-radius: 5px;
}

ul.setUser .user-update {
    background: #00a7e4;
}

ul.setUser .user-safe {
    background: #0ed20e;
}

ul.setUser .user-delete {
    background: #e92c00;
}

.authAreaSelect {
    line-height: 36px;
    padding: 0 0 80px 0;
}

.authAreaSelect dl dt {
    border-bottom: 1px solid #fff;
    padding: 0 5%;
    margin: 0 0 20px 0;
}

.authAreaSelect dl dd {
    display: block;
    background: url(../images/area_item.jpg) 0 0 no-repeat;
    background-size: 100% 60px;
    height: 60px;
    line-height: 60px;
    margin: 10px 5% 0;
    border-radius: 6px;
    border: 1px solid #5e5e5e;
}

.authAreaSelect dl dd label {
    display: block;
    overflow: hidden;
}

.authAreaSelect label p {
    padding: 0 10% 0 18%;
}

.authAreaSelect dl dd em {
    margin: 0 10px 0 0;
}

.authAreaSelect .authBtn {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1;
    background: #00a7e4;
    text-align: center;
    line-height: 48px;
    cursor: pointer;
}

.wgMain>.tips {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100%);
    border: 1px solid #00a0e6;
    background: rgba(0, 160, 230, 0.4);
    padding: 8px;
    color: #00a0e6;
}

.msg_tips {
    height: 24px;
    line-height: 24px;
    padding: 10px;
    color: #f00;
}

.type-body ul li a,
.changeType-body ul li a {
    display: block;
    padding: 0 3%;
    border-bottom: 1px solid #545454;
    color: #fff;
}

.changeType-body .change {
    float: right;
    line-height: 80px;
}

.type-ico {
    margin: 0 8% 0 0;
}

.type-body ul li {
    position: relative;
}

.type-body ul li::after {
    content: "";
    position: absolute;
    right: 1.2rem;
    top: 50%;
    width: .75em;
    height: .75rem;
    border-left: 1px solid currentColor;
    border-top: 1px solid currentColor;
    transform: translate3d(0, -50%, 0) rotateZ(135deg);
    -webkit-transform: translate3d(0, -50%, 0) rotateZ(135deg);
}

form div.userName,
form div.passWord {
    margin: 1rem 0 0;
    border: 1px solid #c1c1c1;
    padding: 1rem;
    height: auto;
    background: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

form div.userName label,
form div.passWord label {
    color: #000;
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
}

form div.userName input,
form div.passWord input {
    border: none;
    background: transparent;
    font-size: 1em;
    color: #b3b3b3;
    letter-spacing: 1px;
    padding-left: 2px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.formForget {
    margin: 1rem 0 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.login_forget {
    padding: 0 0 0 1rem;
}

.err_tip {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #f00;
}

form div.formStyle1 {
    border: 1px solid #c1c1c1;
    padding: 1rem;
    height: auto;
    background: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.info-content {
    margin: 20px 0;
}

.info-content .title {
    margin: 10px 2%;
}

.changeData,
.changepassword {
    background: #fff;
    padding: 1.8rem 0.8rem 1.8rem;
}

form div.formStyle2 {
    margin-bottom: 1rem;
    height: 3rem;
    line-height: 3rem;
    border: 1px solid #e1e1e1;
    box-sizing: border-box;
    overflow-y: hidden;
    display: -webkit-box;
    -webkit-box-align: center;
}

form div.formTop {
    border-bottom: 0;
    -webkit-border-top-left-radius: 0.45em;
    -webkit-border-top-right-radius: 0.45em;
    -moz-border-radius-topleft: 0.45em;
    -moz-border-radius-topright: 0.45em;
    border-top-left-radius: 0.45em;
    border-top-right-radius: 0.45em;
}

form div.formBetween {
    border-bottom: none;
}

form div.formBottom {
    -webkit-border-bottom-left-radius: 0.45em;
    -webkit-border-bottom-right-radius: 0.45em;
    -moz-border-radius-bottomleft: 0.45em;
    -moz-border-radius-bottomright: 0.45em;
    border-bottom-left-radius: 0.45em;
    border-bottom-right-radius: 0.45em;
}

#formlogin1 label,
#formlogin2 label {
    color: #000;
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
}

#formlogin1 input,
#formlogin2 input {
    border: none;
    background: transparent;
    font-size: 1em;
    color: #b3b3b3;
    letter-spacing: 1px;
    padding-left: 2px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.choose_box {
    height: 2em;
    line-height: 2em;
    margin: 0.6rem 0 0;
}

.choose_box div {
    float: left;
}

.choose_box a {
    float: right;
}

.f-register {
    background: #E9E9E9;
}

.f-register a {
    border: 1px solid #DFDFDF;
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    padding: 0.6rem;
    color: #666;
    display: block;
    text-decoration: none;
}

.f-href {
    color: #FF5959;
}

.inner-box {
    width: 100%;
    padding: 0 5%;
    margin: 0 auto;
    box-sizing: border-box;
}

.check-ctn .check-outer {
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
}

.checked {
    width: 14px;
    height: 14px;
    margin-top: 1px;
    background: url('../images/checked.png');
}

.checked.no {
    width: 14px;
    height: 14px;
    margin-top: 1px;
    background: url('../images/uncheck.png');
}

.labelbox {
    position: relative;
    margin-bottom: 15px;
    padding: 0.5rem;
    border: 1px solid #e1e1e1;
    background: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #666;
}

.labelbox input {
    border: none;
    line-height: normal;
    height: 2.4rem;
    box-sizing: border-box;
    color: #666;
    width: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 1rem;
}

.formSubBox {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.form-list-line {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    overflow: hidden;
    padding: 10px 0;
    line-height: 2rem;
}

.form-list-arrow {
    width: 16px;
    height: 16px;
    margin: 8px 0 0 8px;
    background-image: url('../images/arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.j-select-area-code,
.j-select-area-num {
    width: auto;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.j-select-area-code {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #666;
    text-align: left;
}

.j-select-area-num {
    -webkit-flex-basis: 36%;
    -ms-flex-preferred-size: 36%;
    flex-basis: 36%;
    color: #888;
    text-align: right;
}

.area-code {
    position: relative;
}

.area-body {
    position: absolute;
    z-index: 10;
    top: 20%;
    left: 5%;
    background-color: #fff;
    width: 90%;
    max-height: 60%;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .3);
    list-style: none;
}

.area-body .area-item {
    list-style: none;
    font-size: 1rem;
    color: #4d4d4d;
    height: 3rem;
    line-height: 3rem;
    cursor: pointer;
    overflow: hidden;
}

.area-body .area-item:hover {
    background-color: #f4f6fc
}

.area-body .area-name-en {
    color: gray;
    font-size: 0.4rem;
}

.area-body .area-name {
    padding: 0 0.4rem;
}

.area-body .area-num {
    width: calc(28% - 0.4rem);
    float: right;
    font-weight: 600;
    text-align: right;
    margin-right: 0.4rem;
}

.footFixMain {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 4rem;
    text-align: center;
    line-height: 4rem;
}

.footFixMain a {
    color: #fff;
}

.form-input-extra {
    position: relative;
    -webkit-flex-basis: 40%;
    -ms-flex-preferred-size: 40%;
    flex-basis: 40%;
}

#J_getCode,
#btnSend,
.getCode {
    background: #ccf2ff;
    color: #00a0e9;
    border: none;
    border-radius: 5px;
    display: block;
    width: 90%;
    text-align: center;
    padding: 0 5px;
    float: right;
    overflow: hidden;
}

#J_getCode:link,
#J_getCode:hover,
#btnSend:link,
#btnSend:hover,
.getCode:link,
.getCode:hover {
    color: #00a0e9;
}

.reset-code {
    color: #777;
}

.labelbox .chkcode_img {
    display: block;
    width: 6rem;
    margin: 8px 0;
    line-height: 2rem;
    height: 2rem;
    border-radius: 4px;
}

.labelbox #verify {}

.fill-btn-list {
    display: flex;
}

.fill-btn-list .fill-btn {
    flex: 1;
}

.fill-btn-list .fill-btn:nth-child(1) {
    margin-right: 4px;
}

.fill-btn-list .fill-btn:nth-child(2) {
    margin-left: 4px;
}

.fill-btn.btn-green a {
    background: #00d200;
}

.foot-remark-main {
    color: #a8a8a8;
}

.from-sub-content {
    color: #000;
    margin: 3rem 0;
}

.from-sub-title {
    color: #000;
    margin: 3rem 0 0;
}

.fill-main .title-item h4,
.fill-main .title-item p {
    color: #282828;
}

.fill-info-box {
    padding: 10px;
}

.fill-info-box label {
    display: inline;
    color: #000;
    margin-right: 20px;
}

.from-list-lt,
.from-list-content {
    color: #000;
}

.from-list-content {
    font-weight: 600;
}

.fill-step {}

.reg-btn,
.link-btn,
.fill-btn {
    border: none;
    margin: 0.6rem 0 0px 0;
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    border-radius: 0px;
    color: #fff;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.reg-btn a,
.fill-btn a {
    display: block;
    background: #00a0e9;
    color: #fff;
}

.check-ctn {
    margin: 10px 0;
}

.link-able {
    color: #fff;
    background: #2899f7;
    text-align: center;
    display: block;
    line-height: 43px;
    font-size: 16px;
}

.title-item {
    padding: 1.4rem 5% 1rem;
}

.title-item h4 {
    font-size: 18px;
    color: #fff;
}

.register_from_error_tips {
    color: #f00;
    display: none;
    margin: 5px 0;
    font-size: 0.75rem;
}

#errorTips {
    color: #f00;
    line-height: 2rem;
    height: 2rem;
    margin: 0.5rem 0 0;
}

.info-note {
    margin: 1rem 0 0;
}

.info-note a {
    color: #04577a;
}

input.password {
    display: block;
}

input.password2 {
    display: none;
}

.pwdBtnShow {
    outline: none;
    display: inline-block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    overflow: hidden;
    margin: 4px 0;
}

.pwdBtnShow i {
    background-image: url('../images/eyesimg.png');
    background-position: 0 -30px;
    background-repeat: no-repeat;
}

.i_icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.aui-my-info {
    position: relative;
    overflow: hidden;
}

.aui-my-info-bg {
    width: 100%;
    min-height: 220px;
    overflow: hidden;
    /*background-image: url('../images/aui-my-avatar-bg.jpg');background-position: center;background-repeat: no-repeat;-webkit-background-size: cover;background-size: cover;-webkit-filter: blur(8px);filter: blur(8px);*/
}

.aui-my-info-bg:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: inherit;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

.aui-my-info-avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 220px;
}

.aui-layer-my-avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 140px;
    margin: -70px 0 0 -60px;
    text-align: center;
}

.aui-layer-my-avatar p {
    margin: 10px 0 0 0;
    overflow: hidden;
}

.aui-my-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: solid 4px #fff;
    overflow: hidden;
}

.aui-l-content .aui-menu-list ul li {
    display: flex;
}

.aui-menu-list li {
    color: #888;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    padding: 12px 15px;
    text-align: left;
    background: #f2f2f2;
}

.aui-l-content .aui-menu-list-clear ul li a {
    display: flex;
    width: 100%;
    align-items: center;
}

.b-line {
    position: relative;
}

.b-line:before {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid rgba(207, 207, 207, 0.95);
    color: rgba(207, 207, 207, 0.95);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.501);
    transform: scaleY(0.501);
}

.info-icon,
.aui-icon {
    width: 30px;
    height: 30px;
    margin-right: 12px;
    background-size: contain;
}

.aui-icon {
    background-image: url(../images/my-safe.png);
}

.info-icon {
    background-image: url(../images/my-info.png);
}

.info-icon img,
.aui-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.aui-l-content .aui-menu-list ul li h3 {
    width: 86%;
    font-weight: normal;
    font-size: 14px;
    line-height: 32px;
    color: #4f4f4f;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.aui-status {
    position: absolute;
    top: 33%;
    right: 3rem;
    float: right;
}

.aui-menu-list ul li::after {
    content: "";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    width: .75em;
    height: .75rem;
    border-left: 1px solid currentColor;
    border-top: 1px solid currentColor;
    transform: translate3d(0, -50%, 0) rotateZ(135deg);
    -webkit-transform: translate3d(0, -50%, 0) rotateZ(135deg);
}

.btn-confirm {
    background-color: #4f4f4f;
    color: #fff;
    margin: 0 40px;
}

.aui-container .btn-logout {
    position: relative;
    display: block;
    margin: 20px 14px 0;
    padding: 0 12px;
    box-sizing: border-box;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    line-height: 3.6;
    border-radius: 5px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background: #484848;
}

.rel-form-list {
    overflow: hidden;
    line-height: 28px;
    margin: 10px 0 0;
}

.rel-form-list label {
    display: block;
}

.rel-form-list em {
    margin: 0 0 0 6px;
    color: #f00;
    font-style: normal
}

.rel-form-list input {
    width: 100%;
    line-height: 36px;
    margin: 10px 0;
}

#from_info_Main {
    margin: 80px 0 0;
}

.protocol-wrap {
    margin: 20px 0;
    padding: 0 20px;
    line-height: 18px;
}

.protocol-wrap h1 {
    text-align: center;
    margin: 0 0 20px 0;
}

.protocol-wrap h3 {
    margin: 10px 0;
}

.device-detail-layer {
    position: relative;
    margin: auto 0;
    padding-top: 4em;
}

.dev_detail_info {
    line-height: 28px;
    text-align: center;
}

.dev_detail_info ul.fun-list {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.dev_detail_info ul.fun-list li {
    height: 100px;
    background: #373b47;
    margin: 2px 0 0 2px;
    width: calc(100% / 3 - 2px);
}

.dev_detail_info ul.fun-list li:nth-child(3n+1) {
    margin-left: 1px;
}

.dev_detail_info ul.fun-list li a {
    display: block;
    color: #fff;
}

.btn-devFun {
    line-height: 38px;
}

.fa {
    display: flex;
}

.fa:before {
    content: "";
    width: 48px;
    height: 48px;
    display: inline-block;
    margin: 14px auto 0;
}

.fa-edit:before {
    background: url('../images/icon_edit.png') no-repeat;
}

.fa-attr:before {
    background: url('../images/icon_dev_edit.png') no-repeat;
}

.fa-sound:before {
    background: url('../images/icon_sound.png') no-repeat;
}

.fa-love:before {
    background: url('../images/icon_love.png') no-repeat;
}

.fa-devlog:before {
    background: url('../images/icon_devlog.png') no-repeat;
}

.fa-syn:before {
    background: url('../images/icon_syn.png') no-repeat;
}

.fa-track:before {
    background: url('../images/icon_distance.png') no-repeat;
}

.fa-exch:before {
    background: url('../images/icon_exchange.png') no-repeat;
}

.fa-scan:before {
    background: url('../images/icon_scan.png') no-repeat;
}

.fa-timezone:before {
    background: url('../images/icon_timezone.png') no-repeat;
}

.klist-box {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
}

.b-attr-list {
    background: #302e32;
    padding: 0.7rem 1rem;
    line-height: 2.4rem;
    margin: 1px 0;
    vertical-align: middle;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    align-items: center;
    justify-content: center;
}

.b-attr-list>label {
    line-height: 40px;
    -webkit-flex-basis: 30%;
    -ms-flex-preferred-size: 30%;
    flex-basis: 30%;
    color: #fff;
}

.b-attr-list span {
    flex: auto;
    color: #fff;
    overflow: hidden;
}

.b-attr-list select,
.b-attr-list input {
    border-radius: 6px;
    line-height: 40px;
    border: none;
    color: #fff;
    letter-spacing: 1px;
    padding: 0 0.8rem;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: #5d5f62;
    width: 100%;
}

c.b-attr-list select,
.edit-list-info {
    width: 100%;
}

.edit-list-info {
    padding: 0 0.8rem;
    color: #585858;
    flex: 1;
}

.b-attr-layer {
    width: 100%;
}

.b-attr-layer label {
    color: #fff;
    margin-right: 14px;
}

.set-keyname {
    flex: 1;
    overflow: hidden;
}

.set-keyname input {
    /*width: calc(100% - 40px);*/
}

.set-keyname2 {
    width: 38%;
    padding: 0 0.4rem;
}

.set-irkey {
    width: 22%;
    padding: 0;
}

.set-push {
    display: block;
    overflow: hidden;
    text-align: center;
    flex: 1;
    color: #999;
    background: #00a7e4;
    padding: 0;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    cursor: pointer;
    margin: 0 0 0 0.4rem;
}

.set-push span {
    display: block;
    height: 100%;
}

.set-push a {
    display: block;
}

.wxPush {
    margin: 20px 0;
    padding: 0 2%;
    overflow: hidden;
}

.wxPush select {
    width: 100%;
    height: 3.6rem;
}

.wxPush .tip {
    line-height: 28px;
    color: #f00;
}

.delaySet {
    margin: 20px 0;
    padding: 2%;
    overflow: hidden;
}

.delaySet input {
    width: 33.3333%;
    text-align: center;
    float: left;
    border: none;
    line-height: 40px;
    border-radius: 0;
    font-size: 14px;
}

.delaySet em {
    width: 2%;
    display: inline-block;
    text-align: center;
}

.delaySet button {
    width: 100%;
    margin: 10px 0 0;
    background: #00a0e9;
    color: #fff;
    border: none;
    line-height: 40px;
}

.delaySet .tip {
    color: #f00;
    display: block;
}

.settg-list {
    border: 1px solid #c1c1c1;
    height: auto;
    background: #f8f8f8;
    color: #000;
    font-size: 1.2em;
    margin: 14px 0;
    vertical-align: middle;
    text-align: center;
    height: auto;
}

.seing-list li {
    padding: 15px 0;
}

.setting-list {
    margin: 14px 0;
}

.setting-list ul {
    margin-bottom: 1rem;
    border-top: 1px solid #373b47;
    border-bottom: 1px solid #373b47;
    background: #373b47;
}

.setting-list ul li {
    padding: 0 3%;
    height: 3.6rem;
    line-height: 3.6rem;
    border-bottom: 1px solid #000;
    background: url('../images/my-arrow.png') 95% center no-repeat;
    background-size: 0.275rem 0.5rem;
}

.setting-list ul li:last-child {
    border-bottom: none;
}

.setting-list ul li a {
    color: #fff;
    padding-left: 2.2em;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 50%;
    display: block;
}

.setting-list ul li a .f-right {
    float: right;
    display: inline-block;
    margin-right: 5%;
    color: #999;
}

.setTimeWrap {
    display: none;
    background: #fff;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1009;
}


/*

.setTimeWrap .swiperTab{height:48px;}
.setTimeWrap .swiperTab li{display:block;float:left;width:50%;color:#333;text-align:center;background:#fff;line-height:48px;border-bottom: 2px solid #fff;}
.setTimeWrap .swiperTab li.active{border-bottom: 2px solid #00a0e9;}
.setTimeWrap .swiper-container{background:#fff;width:100%;height:500px;border-top:0;color:#333;}


.setTimeWrap .swiper-container {margin:0 auto;position:relative;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden; z-index:1;}
.swiper-wrapper{-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;}
.swiper-slide{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:20px;float: left;overflow: hidden;}
.swiper-slide:nth-child(1){}
.swiper-slide:nth-child(2){}
*/

.setTimeSpacing {
    padding-left: 2%;
}

.setTimeLayoutRight {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.setTimeWrap .weekcheck {}

.setTimeWrap .weekcheck ul {
    overflow: hidden;
    color: #252525;
}

.setTimeWrap .weekcheck ul li {
    float: left;
    width: 33.333%;
    padding: 0 0.16rem 0.2rem 0;
}

.setTimeWrap .weekcheck ul li>label {
    width: auto;
    display: inline-block;
}

.setTimeWrap .weekcheck input {
    width: auto;
    margin: -2px 3px 0 0;
}

.status-btn {
    color: #585858;
}

.status-btn em {
    font-style: normal;
    cursor: pointer;
}

.status-btn .mui-switch.mui-switch-anim {
    margin: 0 0.4rem;
}

.status-btn input {
    width: 48px;
    border: 1px solid #dfdfdf;
    background-color: #fdfdfd;
}

.setTimeWrap .timePoint {
    display: none;
}

.setWarnBtn {
    flex: 1;
    text-align: right;
}

.loadTimeListRow {
    background: #fff;
    color: #666;
}

a.loadSetTimeList {
    color: #fff;
    display: flex;
}

.loadWait {
    background: #e8e8e8;
}

.loadSetTime .status {
    color: #0f0!important;
}

.loadSetTimeList {
    height: 56px;
    display: block;
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;
}

.loadSetTimeList .loadSetTimeListL {
    width: 80%;
}

.loadSetTimeList .loadSetTimeListR {
    width: 20%;
    display: table;
}

.loadSetTimeList .loadSetTimeListR>div {
    display: table-cell;
    vertical-align: middle;
}

.loadSetTimeList .time {
    font-size: 23px;
}

.loadSetTimeList .other div {
    display: inline;
    margin: 0 10px 0 0;
}

.loadSetTimeList .enable {
    line-height: 56px;
    text-align: center;
}

.setTimeFun {
    overflow: hidden;
    background: #f2f2f2;
    display: none;
    border-bottom: 1px solid #d8d8d8;
}

.setTimeFunList {
    display: flex;
    background: #383838;
}

.setTimeFunList a {
    color: #fff;
}

.setTimeFunList li {
    flex: 1;
    text-align: center;
    margin: 10px 0;
}

.rowAttrList {}

.rowAttrList .b-attr-list {
    margin: 0;
    margin-bottom: -1px;
}

.rowAttrList .status-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rowAttrList .b-attr-list a {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.selection-wrap,
.selection {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.selection-wrap {
    background: rgba(0, 0, 0, .3);
    z-index: 1;
    opacity: 0;
    -webkit-transform: opacity .5s;
    transition: opacity .5s;
}

.selection-content {
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 10;
    background: #fff;
    color: #666;
    max-height: 50%;
    overflow-y: auto;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
}

.is-show .selection-content {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.is-show .selection-wrap {
    opacity: 1;
}

.check_label {
    padding: 0.625rem 1rem;
    line-height: 1.4;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.selection-checkbox-mark {
    padding-right: 0.625em;
}

.selection-checkbox-mark input {
    position: absolute;
    left: -9999em;
}

.checklist-icon-checked {
    display: inline-block;
    vertical-align: middle;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.checklist-icon-checked:before {
    content: " ";
    width: 1.5rem;
    height: 1.5rem;
    background: url('../images/icon_checkbox.png') 50% 50% no-repeat;
    color: #c9c9c9;
    font-size: 1.5rem;
    display: block;
}

.selection-checkbox .list-check:checked+.checklist-icon-checked:before {
    background: url('../images/icon_checkbox_checked.png') 50% 50% no-repeat;
}

.selection-checkbox-name {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    line-height: 1.5rem;
}

.check_label:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    left: 15px;
}

.selection-checkbox .text-align-center {
    text-align: center;
}

.selection-title {
    padding: 0.625rem 1rem;
    font-weight: 700;
}

.voiceType-list,
.track-key-list {
    width: 100%;
    height: calc(100vh - 48px);
    background: #f8f8f8;
}

.info-item-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    padding: 10px 14px;
    position: relative;
    line-height: 2;
    font-size: 1rem;
    border-bottom: 1px solid #d8d8d8;
}

.info-title {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.info-title label {
    display: block;
    margin-right: 1rem;
    line-height: 50px;
    color: black;
}

.info-ft {
    padding-right: 14px;
    position: relative;
}

.info-ft:after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #c8c8cd;
    border-style: solid;
    -webkit-transform: matrix(.71, .71, -.71, .71, 0, 0);
    transform: matrix(.71, .71, -.71, .71, 0, 0);
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: 2px;
}

.likeType-list .link-status {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-wrap {
    margin: 1.4rem auto;
}

.btn-wrap button {
    border: 0;
    cursor: pointer;
    outline: 0!important;
    background: none;
}

.btn-wrap button {
    width: 100%;
    height: 2.6rem;
    line-height: 2.6rem;
    margin-bottom: .6rem;
}

button.btn-operate-finish {
    background: #00a0e8;
    color: #fff;
    border-radius: 5px;
    opacity: .9;
}

button.btn-operate-delete {
    color: #f6615d;
    background: #fff;
    border: 1px solid #f6615d;
    border-radius: 5px;
}

.ali-voice-main {
    height: calc(100vh - 43px);
    background: #f8f8f8;
    color: #666;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    padding: 10px;
}

.setContent .complete-btn {
    position: fixed;
    bottom: 0;
    left: 0;
}

.setContent {
    box-sizing: border-box;
    padding: 1rem;
    overflow: hidden;
}


/* switch 样式 */

.mui-switch {
    width: 48px;
    height: 24px;
    position: relative;
    border: 1px solid #dfdfdf;
    background-color: #fdfdfd;
    box-shadow: #dfdfdf 0 0 0 0 inset;
    border-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-clip: content-box;
    display: inline-block;
    -webkit-appearance: none;
    user-select: none;
    outline: 0
}

.mui-switch:before {
    content: '';
    width: 22px;
    height: 22px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4)
}

.mui-switch:checked {
    border-color: #64bd63;
    box-shadow: #64bd63 0 0 0 16px inset;
    background-color: #64bd63
}

.mui-switch:checked:before {
    left: 24px
}

.mui-switch.mui-switch-animbg {
    transition: background-color ease .4s
}

.mui-switch.mui-switch-animbg:before {
    transition: left .3s
}

.mui-switch.mui-switch-animbg:checked {
    box-shadow: #dfdfdf 0 0 0 0 inset;
    background-color: #64bd63;
    transition: border-color .4s, background-color ease .4s
}

.mui-switch.mui-switch-animbg:checked:before {
    transition: left .3s
}

.mui-switch.mui-switch-anim {
    transition: border cubic-bezier(0, 0, 0, 1) .4s, box-shadow cubic-bezier(0, 0, 0, 1) .4s;
    float: right;
    top: 22%;
}

.mui-switch.mui-switch-anim:before {
    transition: left .3s
}

.mui-switch.mui-switch-anim:checked {
    box-shadow: #64bd63 0 0 0 16px inset;
    background-color: #64bd63;
    transition: border ease .4s, box-shadow ease .4s, background-color ease 1.2s
}

.mui-switch.mui-switch-anim:checked:before {
    transition: left .3s
}

.b-attr-list :after {}

.b-attr-list .btn-type-set {
    float: right;
    width: 26%;
    height: 24px;
    background: #e8e8e8;
    color: #b2b2b2;
    text-align: center;
}

.key_name {
    color: #CCC;
    border-bottom: 1px solid #e2e2e2;
    line-height: 2.4rem;
    margin: 0 0 10px;
    width: 100%;
}

.key-type-list {
    width: 100%;
    padding: 1rem 0;
    line-height: 2.4rem;
    overflow: hidden;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
}

.btn-add-product,
.btn-edit-product {
    height: 45px;
    line-height: 45px;
    background-color: #00a7e4;
    color: #fff;
    border: none;
    width: 100%;
}

.autoMain {
    margin: 3.2rem 0;
    padding: 0 2%;
}

.authWay {
    font-size: 1.6rem;
}

.authWay input {
    line-height: 2rem;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    line-height: 3rem;
    padding: 0 1rem 0 1rem;
    margin: 0.5rem 0;
}

.authWay .btn {
    background: #00a7e4;
    line-height: 45px;
    height: 45px;
    margin: 0.5rem 0;
    text-align: center;
    font-size: 1.0rem;
}

.authWay .btn a {
    display: block;
    color: #fff;
}

.authWay .btn a:link {
    background: #00a7e4;
}

.authWay .btn a:hover {
    background: #26bef6;
}

.settingMob-title {
    text-align: center;
    margin: 36px 0;
}

.btn-center-link {
    text-align: center;
    display: block;
}

.findpwd-body .errMsg {
    color: #f00;
    line-height: 18px;
    height: 20px;
}

.btnBlue {
    width: 100%;
    margin: 1rem 0;
}

.btnBlue button {
    width: 100%;
    height: 2.6rem;
    background: #00a7e4;
    border: none;
    color: #fff;
    padding: 0;
}

#btnSend.disabled {
    color: #666;
    background: #cbcbcb;
    cursor: default;
    pointer-events: none;
}

.mail_success {
    margin: 3rem 2%;
    text-align: center;
}

i.icon-loginright {
    margin: 3rem auto;
    display: block;
    width: 160px;
    height: 160px;
    background-image: url('../images/icon_success.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
}

a.a_underline {
    color: #00a0e9;
}


/**/

#date-list {
    width: 100%;
    margin: 0 0 10px 0;
}

#contentop {
    display: block;
    background: #fff;
    color: #333;
    padding: 2%;
    overflow: hidden;
}

#contentop ul {
    overflow: hidden;
    border-bottom: 1px solid #e8e8e8;
}

#contentop ul li {
    float: left;
    margin: 2% 0;
    font-size: 0.75rem;
    overflow: hidden;
}

#contentbottom {
    text-align: center;
    margin-top: 20px;
    color: gray;
    display: none;
}


/* 日志信息 */

.log-show {
    margin: 60px 0 80px;
    padding: 0 2%;
    overflow: hidden;
}

.log-tab {
    margin: 10px 0 0;
    overflow: hidden;
    text-align: center;
    background: #e8e8e8;
    color: #000;
}

.log-tab ul li {
    width: 50%;
    float: left;
    line-height: 45px;
}

.log-tab li.action {
    /*border-bottom: 3px solid #00a0e9;*/
    height: 45px;
    background: #fff;
}

.syslog-list .log-time {
    width: 15%
}

.syslog-list .log-name {
    width: 30%
}

.syslog-list .log-type {
    width: 10%
}

.syslog-list .log-id {
    width: 10%
}

.syslog-list .log-content {
    width: 35%
}


/* 推送信息 */

.message-push-list {}

.message-push-list .not-record {
    margin: 2% 0;
    padding: 2%;
    text-align: center;
}

.msg-list-body {
    margin: 0 0 2% 0;
    background: #fff;
    color: #000;
    padding: 2%;
}

.msg-list-body .msg-time {
    font-size: 1.6rem;
}

.msg-list-body .msg-source {
    margin: 0 0 10px;
    font-size: 0.75rem;
}

.msg-list-body .msg-source span {
    margin: 0 10px 0 0;
}

.msg-list-body .msg-con {
    display: flex;
}

.msg-list-body .msg-con div {
    flex: 1;
    text-align: center;
    height: 3rem;
    line-height: 3rem;
    background: #e8e8e8;
    margin: 0.1rem;
}

.msg-list-body .msg-foot {
    font-size: 0.75rem;
    border-top: 1px solid #e8e8e8;
    margin: 0.5rem 0 0;
    padding: 0.3rem 0 0;
    text-align: right;
}

.message-list .msg-area {
    width: 20%;
}

.message-list .msg-keyname {
    width: 20%;
}


/* 设备备份与恢复 */

.btn-backup-bottom {
    position: fixed;
    width: 100%;
    height: 48px;
    line-height: 48px;
    bottom: 0;
    background: #00a0e9;
    text-align: center;
    color: #fff;
}

.btn-backup-bottom a {
    display: block;
    color: #fff;
}

.layui-form-item {
    color: #fff;
    background: #373b47;
}

.backup-from,
.backup-list {}

.backup-from {
    height: 30vh;
}

.backup-layout h3,
.backup-layout p {
    padding: 0 1rem;
}

.backup-layout h3 {
    margin: 1.2rem 0;
}

.backup-area-title {
    margin: 1.6rem 1rem 0.4rem;
    font-weight: 600;
}

.backup-area-title .layui-form-checkbox[lay-skin=primary] span {
    color: #b2b2b2;
}

select {
    background: url(../images/icon_select_arrow.png) calc(100% - 10px) 50% / 10px 10px no-repeat #373b47;
    border-radius: 0px;
    color: white;
    border: 1px solid #fff;
}

.backup-layout p {
    font-size: 0.4rem;
    margin: 0.6rem 0 1.2rem;
}

.layui-form-checkbox,
.layui-form-select dl dd.layui-disabled {
    background-color: #373b47;
}

.layui-form-radio:hover *,
.layui-form-radioed,
.layui-form-radioed>i {
    color: #ffffff;
}

.layui-input,
.layui-select,
.layui-textarea {
    background-color: #373b47;
    color: rgb(255 255 255);
}

.layout-input::placeholder {
    color: rgb(159, 159, 159);
}

.layout-input:-ms-input-placeholder {
    color: rgb(159, 159, 159);
}

.layout-input::-ms-input-placeholder {
    color: rgb(159, 159, 159);
}

.layui-form-onswitch {
    border-color: #00a7e4;
    background-color: #00a7e4;
}

.layui-form-select dl {
    border: 1px solid #737475;
    background-color: #373b47;
}

.backup-list ul li {
    height: 76px;
    background: #373b47;
    margin-top: 1px;
    padding: 0 1.2rem;
}

.backup-list .right {
    float: right;
    display: table;
}

.backup-list .right>span {
    display: table-cell;
    vertical-align: middle;
    height: 76px;
    margin: 0 0 0 8px;
}

.backup-list .data-select {
    float: left;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.backup-list .data-item {
    float: left;
    display: table;
}

.backup-list .data-item .data-img {
    display: table-cell;
    vertical-align: middle;
}

.backup-list .data-item i {
    display: inline-block;
    width: 2.8rem;
    height: 2.8rem;
    background-position: center;
    background-size: 160% 160%;
    float: left;
    margin: 0 8px 0 0;
}

.backup-list .title {
    height: 76px;
    display: table-cell;
    vertical-align: middle;
}

.backup-list .title .backup-name {
    display: inline-block;
    font-size: 18px;
    vertical-align: middle;
}

.backup-list .title .backup-name svg {}

.backup-list .title .tip {
    font-size: 12px;
}

.backup-list .backup-op {
    float: right;
    line-height: 76px;
}

.backup-op a {
    padding: 0.2rem 0.4rem;
    font-size: 14px;
    border-radius: 0.4rem;
    margin: 0 0 0 0.4rem;
    color: #fff;
}

.backup-op .btn-recovery,
.backup-op .btn-g-recovery {
    background: #7cda3e;
}

.backup-op .btn-backup {
    background: #00a0e9;
}

.backup-op .btn-detail {
    background: #23c6c8;
}

.backup-layout .backup-btn-op {
    margin: 1.2rem 0.2rem 0;
}

.backup-device-list ul li {
    padding: 1rem;
    margin: 1px 0;
    background: #373b47;
}

.backup-select-point {
    padding: 1rem;
    background: #373b47;
}

.backup-select-point .info-title {
    margin: 0 0 1rem 0;
}

.backup-select-point .layui-form-item {
    margin: 0;
}

.layui-form-checkbox[lay-skin=primary] i {
    width: 14px;
    height: 14px;
}

.layui-form-checkbox[lay-skin=primary] span {
    color: #fff;
}


/* 喜爱按键 */

.likeType-list {
    height: calc(100vh - 48px);
    background: #f8f8f8;
    color: #666;
}

.icon-like {
    width: 48px;
    height: 48px;
    float: left;
    display: inline-block;
    background: url('../images/icon_btn_like.png') no-repeat;
    background-size: 100% auto;
}

.icon-like.on {
    background-position: 0 -48px;
}


/* 红外配对 */

.header-bar .upload:after {
    content: '';
    width: 48px;
    height: 48px;
    display: inline-block;
    background: url(../images/icon.png) -494px -58px no-repeat;
}

.header-bar .con_up_off:after {
    content: '';
    width: 35px;
    height: 35px;
    display: inline-block;
    background-image: url(../images/con_up_off.png);
    background-position: center;
    background-size: 30px;
    margin: 6px;
    background-repeat: no-repeat;
}

.from-list {
    margin: 16px 0 0;
}


/* 智能门锁 */

#smart-door {
    margin: 20px 2%;
    overflow: hidden;
}

.door-body {
    background: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    margin: 3% 0;
}

.door-body .door-head {
    margin: 3%;
}

.door-body .door-img {
    width: 80px;
    height: 150px;
    margin: 10px auto;
    position: relative;
}

.door-status {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
}

.door-alarm {
    position: absolute;
    top: 30px;
    right: 4px;
    width: 24px;
    height: 24px;
}

.door-status i,
.door-alarm i {
    display: block;
    height: 100%;
}

.door-status .dlOn {
    background: url('../images/icon_door_on.png') no-repeat;
    ;
    background-size: 100% 100%;
}

.door-status .dlOff {
    background: url('../images/icon_door_off.png') no-repeat;
    ;
    background-size: 100% 100%;
}

.door-alarm .dlAlarm {
    background: url('../images/icon_door_alarm.png') no-repeat;
    ;
    background-size: 100% 100%;
}

.door-body .Void {
    background: url('../images/door_void.png') no-repeat;
    background-size: 100% 100%;
}

.door-body .On {
    background: url('../images/door_on.png') no-repeat;
    background-size: 100% 100%;
}

.door-body .Off {
    background: url('../images/door_off.png') no-repeat;
    background-size: 100% 100%;
}

.door-body .door-name {}

.door-body .door-control {
    line-height: 48px;
    overflow: hidden;
    display: -webkit-box;
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    width: 100%;
}

.door-body .door-control span {
    width: 33.333%;
    float: left;
    background: #fff;
    color: #666;
    text-align: center;
    cursor: pointer;
}

.door-body .door-control span:nth-child(2) {
    border-left: 1px solid #666;
    border-right: 1px solid #666;
}

.door-add-body,
.bind-add-body {
    margin: 30px 0 0;
    overflow: hidden;
    padding: 0 2%;
}

.door-add-f,
.bind-add-f {
    overflow: hidden;
    display: -webkit-box;
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    width: 100%;
}

.door-add-from,
.bind-add-from {
    line-height: 3em;
}

.door-add-from .pf {
    width: 30%;
}

.door-add-from .spe {
    width: 5%;
    display: inline-block;
    text-align: center;
}

.door-add-from .door-input-sn {
    width: 65%;
}

.bind-add-from .in-bind {
    width: 100%;
    line-height: 3em;
}

.createBtn {
    width: 100%;
    background: #00d200;
    color: #fff;
    display: block;
    line-height: 38px;
    text-align: center;
    margin: 10px 0;
}

.panel_name {
    overflow: hidden;
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
    color: #fff;
}

.device-update {
    margin: 3em 0;
    text-align: center;
}

.device-update div {
    margin: 0 1%;
}

.btnDevUpdate {
    /* background: #004664;
    color: #00a0e9;
    line-height: 32px;
    width: 100px;
    display: inline-block;
    border-radius: 16px;
    cursor: pointer; */
}

.btnDevState {}

.btnDevRefresh {}

.device-update span {
    float: left;
    margin: 0 12px 0 4px;
}

.btnDevDaliSonUpdate {
    /* background: #004664;
    color: #00a0e9;
    line-height: 32px;
    display: inline-block;
    border-radius: 16px;
    cursor: pointer; */
}

.btnDevUpdate:before {
    content: '';
    width: 36px;
    height: 36px;
    background: url('../images/icon_refresh.png') center / 120% no-repeat #373b47;
    background-blend-mode: lighten;
    display: inline-block;
    float: right;
    margin: 1px;
    border-radius: 2px;
}

.btnDevState:before {
    content: '';
    width: 36px;
    height: 36px;
    background: url('../images/icon_device_state.png') center / 120% no-repeat #373b47;
    background-blend-mode: lighten;
    display: inline-block;
    float: right;
    margin: 1px;
    border-radius: 2px;
}

.btnDevRestart {}

.btnDevRestart:before {
    content: '';
    width: 36px;
    height: 36px;
    background: url('../images/icon_device_restart.png') center / 120% no-repeat #373b47;
    background-blend-mode: lighten;
    display: inline-block;
    float: right;
    margin: 1px;
    border-radius: 2px;
}

.btnDevRefresh:before {
    content: '';
    width: 36px;
    height: 36px;
    background: url('../images/icon_refresh_state.png') center / 120% no-repeat #373b47;
    background-blend-mode: lighten;
    display: inline-block;
    float: right;
    margin: 1px;
    border-radius: 2px;
}

.btnDevDaliSonUpdate:before {
    content: '';
    width: 57px;
    height: 36px;
    background: url('../images/icon_refresh_dali.png') center / 120% no-repeat #373b47;
    background-blend-mode: lighten;
    display: inline-block;
    float: right;
    margin: 1px;
    border-radius: 2px;
}

.btnDevFloatingPage:before {
    content: '';
    width: 36px;
    height: 36px;
    background: url('../images/icon_floating_page.png') center / 120% no-repeat #373b47;
    background-blend-mode: lighten;
    display: inline-block;
    float: right;
    margin: 1px;
    border-radius: 2px;
}

.device-info {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.device-info-item {
    background: #373b47;
    color: #fff;
    padding: 10px;
    margin: 2px 0 0 2px;
    line-height: 28px;
    width: calc(50% - 1px);
    text-align: center;
    overflow: hidden;
}

.device-info-item:nth-child(2n+1) {
    margin-left: 0;
}

.device-info-item .title {
    color: #999;
}

.device-info-item .content {
    font-size: 18px;
    line-height: 32px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#sceneSetTitle {
    font-size: 18px;
    text-align: center;
    margin: 30px auto;
}

#sceneSet {
    font-size: 14px;
}

.sk_layui_nav,
.sceneCmdState {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    background: #353535;
}

.sceneSetFun {
    font-size: 14px;
    display: flex;
}

.sceneSetFun div {
    flex: 1;
    line-height: 1rem;
    text-align: center;
}

.sceneSetFun a {
    color: #fff;
}

.sceneSetBtn {
    background: #5d5d5d;
}

.sceneSetBtn:nth-child(even) {
    margin: 0 1px;
}

.sceneLoadDeviceLayer {
    background-color: black;
}

.sceneAreaName {
    line-height: 0.8rem;
    text-align: center;
    background: rgba(255, 255, 255, .3);
    border-bottom: 1px solid #353535;
    font-size: 14px;
}

.areaDeviceLayer {
    overflow: hidden;
}

.displayDevice {
    overflow: hidden;
    margin: 0.2rem 0;
}

.displayDevice .sceneDevList {
    overflow: hidden;
}

.activeHide {
    height: 0;
    margin: 0;
}

.aui-login-box {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 120px 0 0;
    color: #585858;
    overflow: hidden;
    font-size: 16px;
}

.aui-login-form-item {
    display: flex;
    margin: 20px auto;
    position: relative;
    text-align: justify;
    margin: 10px 20px;
    position: relative;
}

.aui-login-form-item input {
    flex: 1;
    width: calc(100% - 10px);
    height: 40px;
    padding: 10px 4px;
    float: left;
    box-sizing: border-box;
    outline: 0;
    background: #f8f8f8;
    border: 2px solid #ebebeb;
}

.aui-login-form-item .input-body {
    display: flex;
    width: 100%;
}

.aui-login-form-item .input-body input {
    flex: 1;
}

.aui-login-form-item .input-body .verify {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 30px;
    color: #00a0e9;
    background: #ccf2ff;
    line-height: 30px;
    text-align: center;
    padding: 0 6px;
    cursor: pointer;
}

.aui-login-form-item .aui-btn-login {
    width: 100%;
    height: 42px;
    outline: 0;
    border: 0;
    background: #00a0e9;
    color: #fff;
    cursor: pointer;
    text-align: center;
}

.backup-main {
    margin: 60px 0 80px;
    overflow: hidden;
}

.backup-main .dev-gateway {
    background: #57565b;
    position: relative;
    color: #fff;
    padding: 0.6rem;
}

.backup-main .dev-gateway .con-lt {}

.backup-main .dev-gateway .con-rt {}

.dev-gateway i {
    width: 86px;
    height: 86px;
    display: inline-block;
}

.dev-gateway i.icon-router-online {
    background: url('../images/icon_router_online.png') no-repeat;
    background-size: 100% 100%;
}

.dev-gateway .gateway-info {
    display: table;
    margin-bottom: 0.2rem;
}

.dev-gateway .gateway-info .gateway-msg {
    display: table-cell;
    vertical-align: middle;
}

.dev-gateway .gateway-info .gateway-msg>div {
    margin: 0 0 0 1rem;
}

.dev-gateway .gateway-info .gateway-msg .router-name {
    font-weight: 600;
}

.dev-gateway .gateway-info .gateway-msg .tip {
    margin-top: 0.6rem;
    color: #969696;
}

.dev-gateway .gateway-control {
    display: flex;
}

.dev-gateway .gateway-control a {
    flex: 1;
    text-align: center;
    height: 3rem;
    line-height: 3rem;
}

.dev-gateway .gateway-control a:nth-child(even) {
    margin-left: 1px;
}

.dev-gateway .gateway-control a:nth-child(odd) {
    margin-right: 1px;
}

.dev-gateway .gateway-control .btn-backup {
    background: #00a0e9;
}

.dev-gateway .gateway-control .btn-restore {
    background: #7cda3e;
}

.backup-main .device-list {
    margin: 0.6rem;
}

.backup-main .device-list .item {
    margin-bottom: 1px;
    height: 3.6rem;
    width: 100%;
    display: table;
}

.backup-main .device-list .item>div {
    display: table-cell;
    vertical-align: middle;
}

.backup-main .device-list .item .device-info {
    display: table;
}

.backup-main .device-list .item i {
    display: inline-block;
    width: 2.8rem;
    height: 2.8rem;
    background-position: center;
    background-size: 160% 160%;
    float: left;
}

.backup-main .device-list .item .device-title {
    display: table-cell;
    vertical-align: middle;
    padding-left: 0.6rem;
    overflow: hidden;
    white-space: nowrap;
}

.backup-main .device-list .item .device-title span {
    color: #969696;
    font-size: 14px;
    margin-left: 0.4rem;
}

.backup-main .device-list .item .con-lt {}

.backup-main .device-list .item .con-rt {
    text-align: right;
    font-size: 12px;
}


/*窗帘行程*/

.base-track {
    line-height: 36px;
}

.set-track-list {
    display: flex;
    margin: 20px 0;
}

.set-track-list .track-title {
    flex: 1;
}

.track-switch {
    width: 136px;
    text-align: right;
    box-sizing: border-box;
    display: flex;
    justify-content: right;
    align-items: center;
}

.from-base-track {
    /*margin-top:60px;*/
}

.trackTime {
    width: 100%;
    height: 36px;
    text-align: center;
}

.track-from .save {
    text-align: center;
}

.adv-setting {
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #666;
}

.adv-setting .link {
    text-align: center;
    display: block;
    width: 100%;
    height: 45px;
    line-height: 45px;
    color: #fff;
    background: #686868;
}

.adv-track {
    text-align: center;
}

.box-time {
    font-size: 4em;
    text-align: center;
    overflow: hidden;
}

.box-time .fb-time {
    display: inline-block;
}

.box-time .fb-time span {
    margin: 0 2px;
}

.adv-track-btn {
    margin: 32px 0 0;
    overflow: hidden;
}

.adv-track-btn button {
    width: 64px;
    height: 64px;
    border-radius: 32px;
    line-height: 64px;
    margin: 0 2.4em;
    background: #034e70;
    color: #00a0e9;
    text-align: center;
    border: 0;
    outline: none;
    cursor: pointer;
}

.adv-track-btn button.disable {
    background: #383838;
    color: #999;
}

.track-step {
    margin: 60px 0 0;
    text-align: left;
}

.track-step ul li {
    line-height: 32px;
    margin: 10px 0 0;
}

.area-sort-items {}

ul.area-sort-items li {
    background: rgba(87, 86, 91, 0.9);
    margin: 2px 0 0;
    overflow: hidden;
    position: relative;
}

.area-sort-items .area-item-name {
    padding: 28px 14px;
    line-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.area-sort-items .area-list-name {
    padding: 0;
    flex: 1;
}

.area-sort-items .orderCtrl {
    display: inline-block;
}

.area-sort-items .orderCtrl a {
    margin: 0 0 0 10px;
}

.area-item-name .orderCtrl .up {
    background: url('../images/icon_order.png?v1') -72px 0 no-repeat;
    background-size: cover;
}

.area-item-name .orderCtrl .down {
    background: url('../images/icon_order.png?v1') -96px 0 no-repeat;
    background-size: cover;
}

.dev-body .con {
    display: none;
}

.orderCtrl {
    opacity: 1;
    transition: all 1s linear;
}

.orderCtrl a {
    cursor: pointer;
    display: inline-block;
    width: 24px;
    height: 24px;
    float: left;
    margin: 0 10px 0 0;
}

.orderCtrl .up {
    background: url('../images/icon_order.png?v1') 0 0 no-repeat;
    background-size: cover;
}

.orderCtrl .down {
    background: url('../images/icon_order.png?v1') -24px 0 no-repeat;
    background-size: cover;
}

.orderCtrl .top {
    background: url('../images/icon_order.png?v1') -48px 0 no-repeat;
    background-size: cover;
}

.user-bind-item {
    overflow: hidden;
}

.user-bind-item li {
    margin: 6px 10px;
    background: #686868;
    color: #fff;
    text-align: center;
    line-height: 60px;
}

.user-bind-item li a {
    display: block;
}

.backup-type-item {
    overflow: hidden;
}

.backup-type-item ul {
    display: flex;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    background: #383838;
}

.backup-type-item li {
    flex: 1;
}

.backup-type-item li.selected {
    background: #00a0e9;
}

.backup-type-list .backup-item {
    display: none;
}

.backup-type-list .backup-item.show {
    display: block;
}

.running {
    display: inline-block;
    position: relative;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    margin: 0 0 0 0.2rem;
    background: url('../images/icon_run_update.png') center / 100% no-repeat;
    animation: rot 1s linear infinite;
}


/* 切换设备ID界面 */

.select-exchange-layout {
    width: 100%;
    display: flex;
    margin: 0 0 2.4rem;
}

.select-exchange-layout .original-dev,
.select-exchange-layout .exchange-dev {
    flex: 1;
    text-align: center;
}

.select-exchange-layout .exchange {
    width: 20%;
}

.select-exchange-layout .icon-original-type,
.select-exchange-layout .icon-exchange-type {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-size: 120%;
    background-position: center;
}

.select-exchange-layout .icon-exchange {
    width: 2.4rem;
    height: 2.4rem;
    margin: 2.6rem auto 0;
    background: url('../images/icon_exchange_dev.png') center/cover no-repeat;
}

.select-exchange-layout .original-title,
.select-exchange-layout .exchange-title {
    line-height: 40px;
}

.originalID {
    background: #302e32;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    width: 80%;
    margin: 0 auto;
}

#exdid {
    width: 80%;
}


/*风格切换样式*/

#styleSheet {
    position: absolute;
    top: 0;
    left: 48px;
}

.theme-curr {
    font-size: 0;
    overflow: hidden;
    padding: 0 10px;
    width: 48px;
    height: 48px;
}

.theme-curr.this {
    background: #fff;
}

#styleSheet a {
    width: 14px;
    height: 14px;
    display: inline-block;
}

#styleSheet i {
    width: 14px;
    height: 14px;
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.theme-select {
    position: absolute;
    background: #fff;
    width: 80px;
    padding: 4px;
    display: none;
}

.theme-select.this {
    display: block;
}

.theme-select ul {
    overflow: hidden;
}

.theme-select ul li {
    float: left;
    margin: 4px;
    line-height: 100%;
}

#styleSheet .default {
    background: #302e32;
    border: 1px solid #999;
}

#styleSheet .red {
    background: #b70000;
    border: 1px solid #edad00;
}


/*弹出层样式*/

.loading {
    position: fixed;
    width: 150px;
    height: 30px;
    left: 50%;
    top: 45%;
    margin-left: -70px;
    margin-top: 10px;
    background-color: #eee;
    box-shadow: 2px 2px 4px #ccc;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    color: #000;
    display: none;
}


/* colorPicker */

.pickerStyle {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
}

.pickerStyle .IroWheel {
    margin: 0 auto;
}

@keyframes rot {
    0% {
        -webkit-transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(90deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(270deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}


/* 红色渐变 */

@-webkit-keyframes redPulse {
    from {
        background-color: #aa0000;
        /* -webkit-box-shadow: 0 0 9px #aa0000; */
    }
    50% {
        background-color: #ff0000;
        /* -webkit-box-shadow: 0 0 18px #ff0000; */
    }
    to {
        background-color: #aa0000;
        /* -webkit-box-shadow: 0 0 9px #aa0000; */
    }
}


/*黄色渐变*/

@-webkit-keyframes yellowPulse {
    from {
        background-color: #aaaa00;
        /* -webkit-box-shadow: 0 0 9px #aaaa00; */
    }
    50% {
        background-color: #ffff00;
        /* -webkit-box-shadow: 0 0 18px #ffff00; */
    }
    to {
        background-color: #aaaa00;
        /* -webkit-box-shadow: 0 0 9px #aaaa00; */
    }
}


/*绿色渐变*/

@-webkit-keyframes greenPulse {
    from {
        background-color: #00aa00;
        /* -webkit-box-shadow: 0 0 9px #00aa00; */
    }
    50% {
        background-color: #00ff00;
        /* -webkit-box-shadow: 0 0 18px #00ff00; */
    }
    to {
        background-color: #00aa00;
        /* -webkit-box-shadow: 0 0 9px #00aa00; */
    }
}


/*青色渐变*/

@-webkit-keyframes cyanPulse {
    from {
        background-color: #00aaaa;
        /* -webkit-box-shadow: 0 0 9px #00aaaa; */
    }
    50% {
        background-color: #00ffff;
        /* -webkit-box-shadow: 0 0 18px #00ffff; */
    }
    to {
        background-color: #00aaaa;
        /* -webkit-box-shadow: 0 0 9px #00aaaa; */
    }
}


/*蓝色渐变*/

@-webkit-keyframes bluePulse {
    from {
        background-color: #0000aa;
        /* -webkit-box-shadow: 0 0 9px #0000aa; */
    }
    50% {
        background-color: #0000ff;
        /* -webkit-box-shadow: 0 0 18px #0000ff; */
    }
    to {
        background-color: #0000aa;
        /* -webkit-box-shadow: 0 0 9px #0000aa; */
    }
}


/*紫色渐变*/

@-webkit-keyframes purplePulse {
    from {
        background-color: #aa00aa;
        /* -webkit-box-shadow: 0 0 9px #aa00aa; */
    }
    50% {
        background-color: #ff00ff;
        /* -webkit-box-shadow: 0 0 18px #ff00ff; */
    }
    to {
        background-color: #aa00aa;
        /* -webkit-box-shadow: 0 0 9px #aa00aa; */
    }
}

.key_click {
    -webkit-animation: cyanPulse 1s infinite ease-in-out
}

.keyColor {
    background: white;
    color: black;
}

.van-popup,
.van-calendar {
    background-color: #000 !important;
}

.van-calendar__header {
    box-shadow: 0 2px 10px #525252 !important;
}

.date-btn {
    background-color: #373b47!important;
    border-color: #373b47!important;
}

.video-list-div-item {
    background-color: #57565B !important;
}

.video-list-div-item.active {
    background-color: #5778ef !important
}

body .camera-class .layui-layer-title {
    background: #666666;
    color: white;
}

.select2-container--default .select2-selection--single {
    border: 0px solid #373737;
}

.select2-container--default .select2-selection--single {
    border: 0px solid #000;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #bbb;
}

.wrapper03 {
    border-bottom: 1px solid #ccc
}

.wrapper03 .scroller li {
    color: #aaa;
}

.wrapper03 .scroller li a {
    color: #aaa;
}

.wrapper03 .scroller li.cur a {
    color: #fff;
    border-bottom: .1rem solid #fff
}

.layui-btn-primary:hover {
    border-color: #aaa;
}

.layui-menu li {
    color: rgb(255 255 255 / 80%);
}

.layui-btn-primary {
    color: #fff;
}

.layui-menu-body-title a {
    color: rgb(255 255 255 / 80%);
}

.page-top-wrap {
    background: #000;
    color: #fff;
}

#header-list-body .hl_header {
    color: gray;
}

.layui-menu {
    background-color: #333;
}

.layui-panel {
    background-color: #333;
}

.page-top-gateway {
    color: #aaa;
}

.mui-switch:before {
    background-color: #57565b;
}

.mui-switch.mui-switch-anim:checked {
    box-shadow: #00a0e9 0 0 0 16px inset;
    background-color: #00a0e9;
}

.mui-switch:checked {
    border-color: #00a0e9;
}

.layui-menu li:hover {
    background-color: #7f7f7f;
}

.layui-nav {
    background-color: #000;
}

.layui-nav .layui-this:after,
.layui-nav-bar {
    background-color: #898989;
}


/*
.layui-nav-like.on,
.layui-nav-gateway.on {
    color: #ccc;
    background: #333;
}

.layui-nav-like.off,
.layui-nav-gateway.off {
    color: #999;
    background: #454545;
} */

.layui-nav-gateway.not_included,
.layui-nav-like.not_included {
    color: #eee;
    background: #4b4b4b;
}

.layui-nav-like.on {
    color: #eee;
    background: #4b4b4b;
}

.layui-nav-gateway.on {
    color: #eee;
    background: #57565b;
}

.layui-nav-like.off {
    color: #999;
    background: #444;
}

.layui-nav-gateway.off {
    color: #999;
    background: #444;
}

.layui-nav-gateway,
.layui-nav-like {
    width: 50%;
}

.layui-nav-like.not_included:before,
.layui-nav-gateway.not_included:before,
.layui-nav-like.on:before,
.layui-nav-gateway.on:before,
.layui-nav-like.off:before,
.layui-nav-gateway.off:before {
    content: '';
    width: 36px;
    height: 36px;
    background-blend-mode: lighten;
    display: inline-block;
    float: left;
    margin: 1px;
    border-radius: 2px;
    margin: 10px -35px 0px 5px;
}

.layui-nav-like.on:before {
    background: url('../images/home-nav-like.png') no-repeat;
}

.layui-nav-gateway.on:before {
    background: url('../images/home-nav-gateway.png') no-repeat;
}

.layui-nav-like.not_included:before,
.layui-nav-like.off:before {
    background: url('../images/home-nav-like_gray.png') no-repeat;
}

.layui-nav-gateway.not_included:before,
.layui-nav-gateway.off:before {
    background: url('../images/home-nav-gateway_gray.png') no-repeat;
}

.home-dev-col.home-dev-like-title {
    background: #565656;
}

.home-col-list.like-item-all {
    background: #111;
}

.home-dev-like-title .icon-menu:before {
    height: 14px;
    background: url(../images/home-nav-like.png) left 50% / 18px 18px no-repeat;
}

.home-dev-like-title .icon-menu::after {
    height: 0px;
    background: none;
}

.like-null {
    padding: 0px;
    width: 100%;
    height: 50px;
}

.like-null li {
    margin-top: 3px;
    position: absolute;
    width: 100%;
    padding: 20px;
    background: url(../images/like_item_ico.png) center 50% / 18px 18px no-repeat;
}


/*喜爱添加*/

xm-select {
    background-color: #373b47 !important;
    border: 1px solid #ffffff !important;
}

xm-select>.xm-body {
    border: 1px solid #ffffff !important;
    background-color: #373b47 !important;
}

xm-select>.xm-body .xm-option-icon {
    border: 1px solid #000 !important;
}

xm-select>.xm-body .xm-option-content {
    color: #fff !important;
}

.xm-option.selected {
    background-color: #787e8f;
}

xm-select .xm-label .xm-label-block {
    background-color: rgb(98 98 98)!important;
}

.layui-form-select dl {
    background-color: #373b47;
    color: white;
}

.layui-form-select dl dd.layui-this {
    background-color: #b5b5b5;
    color: black;
}

.layui-form-select dl dd.layui-select-tips {
    color: #ddd;
}

xm-select>.xm-body .xm-toolbar .toolbar-tag {
    color: #ddd !important;
}

.layui-layer-dialog .layui-layer-padding {
    color: black;
}

.like-null li {
    /* border: 2px #6b6b6b dashed; */
}

.like-null {
    background: #4b4b4b;
    border-top: 1px black solid;
}

.layui-row .all-open-pic,
.layui-row .all-close-pic,
.layui-row .all-light-open-pic,
.layui-row .all-light-close-pic,
.layui-row .all-curtain-open-pic,
.layui-row .all-curtain-stop-pic,
.layui-row .all-curtain-close-pic {
    height: 90px;
    width: auto;
    display: block;
}

.layui-row .all-open.on,
.layui-row .all-close.on,
.layui-row .all-light-open.on,
.layui-row .all-light-close.on,
.layui-row .all-curtain-open.on,
.layui-row .all-curtain-stop.on,
.layui-row .all-curtain-close.on {
    background-color: #077fb7;
}

.layui-row .all-open.off,
.layui-row .all-close.off,
.layui-row .all-light-open.off,
.layui-row .all-light-close.off,
.layui-row .all-curtain-open.off,
.layui-row .all-curtain-stop.off,
.layui-row .all-curtain-close.off {
    background-color: #4b4b4b;
}

.layui-row .all-open-pic.on {
    background: url(../images/all_open.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-open-pic.off,
.layui-row .all-close-pic.off,
.layui-row .all-close-pic.on {
    background: url(../images/all_close.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-light-open-pic.on {
    background: url(../images/all_light_open.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-light-close-pic.on,
.layui-row .all-light-open-pic.off,
.layui-row .all-light-close-pic.off {
    background: url(../images/all_light_close.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-curtain-open-pic.on,
.layui-row .all-curtain-open-pic.on {
    background: url(../images/all_curtain_open_open.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-curtain-open-pic.off,
.layui-row .all-curtain-open-pic.off {
    background: url(../images/all_curtain_open_close.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-curtain-stop-pic.on,
.layui-row .all-curtain-stop-pic.on {
    background: url(../images/all_curtain_stop_open.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-curtain-stop-pic.off,
.layui-row .all-curtain-stop-pic.off {
    background: url(../images/all_curtain_stop_close.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-curtain-close-pic.on,
.layui-row .all-curtain-close-pic.on {
    background: url(../images/all_curtain_close_open.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-curtain-close-pic.off,
.layui-row .all-curtain-close-pic.off {
    background: url(../images/all_curtain_close_close.png) bottom / 70px 70px no-repeat;
}


/*所有设备展示*/

.all-show {
    height: 50%;
    width: 100%;
    float: left;
}

.all-show .as-left {
    width: 30px;
}

.all-show .as-right {
    width: 58%;
}

.all-show .as-left,
.all-show .as-right {
    display: block;
    height: 50%;
    float: left;
    margin: 20% 0%;
}

.all-show .as-right.light-on,
.all-show .as-right.light-off,
.all-show .as-right.dimmer-on,
.all-show .as-right.dimmer-off,
.all-show .as-right.curtain-on,
.all-show .as-right.curtain-off {
    /* border-right: gray 1px solid; */
}

.as-left {
    background: url(../images/all_devices_show.png) center/200% no-repeat;
}

.as-left.light-on-pic {
    background-position: 7px -28px;
}

.as-left.light-off-pic {
    background-position: -27px -28px;
}

.as-left.dimmer-on-pic {
    background-position: 7px -87px;
}

.as-left.dimmer-off-pic {
    background-position: -27px -87px
}

.as-left.curtain-on-pic {
    background-position: 7px 2px;
}

.as-left.curtain-off-pic {
    background-position: -27px 2px
}

.as-left.temp-on-pic {
    background-position: 7px -57px;
}

.as-left.temp-off-pic {
    background-position: -27px -57px
}


/*所有设备设置*/

.all-dimmer {
    height: 90px;
    display: block;
    padding: 25px 15px 10px 15px;
}

.all-dimmer .layui-progress-bar {
    border-radius: 5px;
    background-color: #0583bc;
}

.all-dimmer .layui-progress-big,
.layui-progress-big .layui-progress-bar {
    height: 53px;
    line-height: 53px;
}

.all-dimmer .layui-progress {
    border-radius: 5px;
    background-color: #e2e2e2;
}

.bayui-btn {
    margin: 2px;
    height: 118px;
    background: #4b4b4b;
}


/* 
.all-temp .all-temp-son.temp {
    width: 40%;
}

.all-temp .all-temp-onoff {
    margin: 25px 2px 5px 8px;
}

.all-temp .all-temp-addsubtemp {
    margin: 25px 0px 5px 0px;
    border-radius: 5px;
    width: 132px;
    height: 55px;
    display: block;
}

.all-temp .all-temp-mode,
.all-temp .all-temp-speed {
    background: url(../images/con_mode_and_speed_white_b5.png) center/80% no-repeat;
}

.all-temp .all-temp-onoff.off {
    background: url(../images/con_power_off_b5.png) center/80% no-repeat;
}

.all-temp .all-temp-onoff.on {
    background: url(../images/con_power_off_b5_open.png) center/80% no-repeat;
}

.all-temp .all-temp-mode.off,
.all-temp .all-temp-speed.off,
.all-temp .all-temp-addsubtemp.off,
.all-temp .all-temp-onoff.off {
    border: #b5b5b5 3px solid;
}

.all-temp .all-temp-mode.off,
.all-temp .all-temp-speed.off,
.all-temp .all-temp-addsubtemp.off {
    background: url(../images/con_mode_and_speed_white_b5.png) center/80% no-repeat;
}

.all-temp .all-temp-mode.on,
.all-temp .all-temp-speed.on,
.all-temp .all-temp-addsubtemp.on,
.all-temp .all-temp-onoff.on {
    border: #0583bc 3px solid;
}

.all-temp .all-temp-mode.on,
.all-temp .all-temp-speed.on,
.all-temp .all-temp-addsubtemp.on {
    background: url(../images/con_mode_and_speed_white_b5-open.png) center/80% no-repeat;
} */


/* 制热 */


/* .all-temp .all-temp-mode.mode_1 {
        background-position: 5px 7px;
    } */


/* 制冷 */


/* .all-temp .all-temp-mode.mode_2 {
        background-position: 5px -72px;
    } */


/* 恒温 */


/* .all-temp .all-temp-mode.mode_3 {
        background-position: 5px -152px;
    } */


/* 地暖 */


/* .all-temp .all-temp-mode.mode_4 {
        background-position: 5px -229px;
    } */


/* 速热 */


/* .all-temp .all-temp-mode.mode_5 {
        background-position: 5px -308px;
    } */


/* 送风 */


/* .all-temp .all-temp-mode.mode_6 {
        background-position: 5px -396px;
    } */


/* 除湿 */


/*     
    .all-temp .all-temp-mode.mode_7 {
        background-position: 5px -489px;
    }
    
    .all-temp .all-temp-speed.speed_1 {
        background-position: 5px -570px;
    }
    
    .all-temp .all-temp-speed.speed_2 {
        background-position: 5px -654px;
    }
    
    .all-temp .all-temp-speed.speed_3 {
        background-position: 5px -753px;
    }
    
    .all-temp .all-temp-speed.speed_4 {
        background-position: 5px -869px;
    }
    
    .all-temp .all-temp-mode.on,
    .all-temp .all-temp-speed.on,
    .all-temp .all-temp-addsubtemp.on,
    .all-temp .all-temp-onoff.on {
        background-color: #0583bc;
    }
    
    .all-temp-addsubtemp .astemp-son {
        width: 33px;
        height: 100%;
        float: left;
    } */


/*     
    .all-show .as-right,
    .astemp-son.num1,
    .astemp-son.num2 {
        font-family: wgsFont;
        font-size: 40px;
        text-align: center;
        align-items: center;
        display: grid;
    }
    
    .all-show .as-right {
        font-size: 32px;
        color: #e2e2e2;
    }
    
    .astemp-son.sub.off {
        background: url(../images/temp-sub.png) center/60% no-repeat;
    }
    
    .astemp-son.add.off {
        background: url(../images/temp-add.png) center/60% no-repeat;
    }
    
    .astemp-son.sub.on {
        background: url(../images/temp-sub-open.png) center/60% no-repeat;
    }
    
    .astemp-son.add.on {
        background: url(../images/temp-add-open.png) center/60% no-repeat;
    }
    
    .astemp-son.sub.on {
        border-right: #4b4b4b 4px solid;
    }
    
    .astemp-son.add.on {
        border-left: #4b4b4b 4px solid;
    }
    
    .astemp-son.num1.on {
        border-right: #4b4b4b 2px solid;
        color: #fff;
    }
    
    .astemp-son.num2.on {
        border-left: #4b4b4b 2px solid;
        color: #fff;
    }
    
    .astemp-son.sub.off {
        border-right: #b5b5b5 4px solid;
    }
    
    .astemp-son.add.off {
        border-left: #b5b5b5 4px solid;
    }
    
    .astemp-son.num1.off {
        border-right: #b5b5b5 2px solid;
        color: #b5b5b5;
    }
    
    .astemp-son.num2.off {
        border-left: #b5b5b5 2px solid;
        color: #b5b5b5;
    }
     */

.bayui-btn {
    margin: 2px;
    height: 118px;
    background: #4b4b4b;
}

.bayui-btn .layui-slider {
    background: #b5b5b5;
}

.layui-row .more .ico-more em,
.layui-row .more .ico-more:before,
.layui-row .more .ico-more:after {
    width: 3px;
    height: 3px;
    border-radius: 3px;
    background: #92a0a8;
    display: inline-block;
    content: "";
    vertical-align: middle;
}

.layui-row .more .ico-more em {
    margin: 0 0.03rem;
}

.layui-row .more {
    position: absolute;
    right: 10px;
    bottom: 5px;
}

.van-toast--loading {
    background-color: #424242!important;
}


/* 制冷 */

.c_mode_2:after {
    background-position: 0 -30px !important;
}


/* 恒温 */

.c_mode_3:after {
    background-position: 0 -70px !important;
}


/* 地暖 */

.c_mode_4:after {
    background-position: 0 -108px !important;
}


/* 速热 */

.c_mode_5:after {
    background-position: 0 -148px !important;
}


/* 送风 */

.c_mode_6:after {
    background-position: 0 -190px !important;
}


/* 除湿 */

.c_mode_7:after {
    background-position: 0 -233px !important;
}

.tempButton>.speed:after,
.tempButton>.speed.off:after {
    background: url('../images/con_mode_and_speed_white.png') center/60% no-repeat;
    margin-left: 8px;
}


/* 一档 */

.c_speed_1:after {
    background-position: 0 -275px !important;
}


/* 二档 */

.c_speed_2:after {
    background-position: 0 -315px !important;
}


/* 三档 */

.c_speed_3:after {
    background-position: 0 -365px !important;
}


/* 自动*/

.c_speed_4:after {
    background-position: 0 -422px !important;
}

.like-ac-btn {
    float: right;
}

.like-ac-btn>div {
    width: 36px;
    height: 36px;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    line-height: 36px;
}

.like-ac-btn>div.btn {
    border-radius: 4px;
    margin-left: 4px;
}

.like-ac-btn>div.btn:after {
    content: '';
    width: 36px;
    height: 36px;
    display: inline-block;
}

.like-ac-btn>.power:after,
.like-ac-btn>.power.off:after {
    background: url('../images/con_power_off.png') center/60% no-repeat;
}

.tempButton>.mtpower:after {
    background: url('../images/con_power_off.png') center/60% no-repeat;
}

.tempButton>.up.on:after {
    background-image: url('../images/con_up_on.png');
}

.tempButton>.down.on:after {
    background-image: url('../images/con_down_on.png');
}

.tempButton>.mode.on:after {
    background-image: url('../images/con_mode_on.png');
}

.tempButton>.speed.on:after {
    background-image: url('../images/con_speed_on.png');
}

.like-ac-btn>.power.on:after {
    background-image: url('../images/con_power_on.png');
}

.dev-status i {
    width: 86px;
    height: 86px;
    display: block;
    margin: 0 auto;
}

.dev-status i.icon-router-online {
    background: url('../images/icon_router_online.png') no-repeat;
    background-size: 100% 100%;
}

.dev-status i.icon-router-offline {
    background: url('../images/icon_router_offline.png') no-repeat;
    background-size: 100% 100%;
    opacity: 0.5;
}

.home-dev-extend-list {
    padding: 1.4rem;
}

.home-dev-extend-name {}

.select-list-wrap {
    margin: 2rem 1rem;
}

.devAttrTip {
    margin: 4px 0 0;
}

a.qrCode i.icon-qrdev {
    background: url(../images/icon_qrdev.png) 50% 80% no-repeat;
    background-size: 60px 60px;
    width: 100%;
    height: 70px;
    display: block;
    padding: 40px 0 0;
}

#header-list-body {
    position: fixed;
    z-index: 2000;
    right: -200px;
    top: 0;
    font-size: 14px;
    width: 200px;
    height: 100%;
    overflow-y: auto;
    background: #eee;
}

#header-list-body ul {
    cursor: pointer;
}

#header-list-body ul li {
    padding: 10px;
    margin: 6px;
    background: #fff;
    color: #585858;
}

#header-list-body ul li a {
    display: block;
}

#header-list-body .menu-icon-fun {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.menu-icon-fun li:before {
    content: " ";
    display: inline-block;
    width: 32px;
    height: 32px;
    float: left;
    margin: 0 10px 0 0;
}

.menu-icon-fun li.i-area-sort:before {
    background: url('../images/icon_sort_s.png') 50% 50% / 100% 100% no-repeat;
}

.menu-icon-fun li.i-area-safe:before {
    background: url('../images/icon_safe_s.png') 50% 50% / 100% 100% no-repeat;
}


/*.menu-icon-fun li.i-area-timezone:before{background: url('../images/icon_timezone_s.png') 50% 50% / 100% 100% no-repeat;}*/

.menu-icon-fun li {
    cursor: pointer;
    overflow: hidden;
    line-height: 32px;
}

.menu-icon-fun li p {
    color: #585858;
}


/*.pop-btn {margin: 20px 10px;}*/

.pop-btn button {
    width: 100%;
}

.load-btn {
    width: 100%;
    background: #00d200;
    display: block;
    line-height: 45px;
    text-align: center;
    margin: 10px 0;
}

.cancel-btn {
    height: 45px !important;
    background: #f5f5f5;
    color: #666;
    line-height: 43px !important;
    border: solid 1px #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    margin: 10px 0 0;
}

.complete-btn,
.ok-btn {
    width: 100%;
    height: 45px;
    line-height: 45px;
    background: #00a7e4;
    color: #fff;
    border: none;
    margin: 10px 0 0;
}

.delete-btn {
    width: 100%;
    height: 45px;
    line-height: 45px;
    background: #c8161d;
    color: #fff;
    border: none;
    margin: 10px 0 0;
}

#modifyAreaNamePop,
#modifyDevNamePop,
#deleteDevPop,
#addAreaNamePop,
#deleteAreaPop,
#qrDev,
#userDelAllPop,
#userDelPop,
#userUpdataPop,
#userSafePop,
#userDeletePop {
    display: none;
}

.popup {
    background: #f2f2f2;
    z-index: 1000;
    position: fixed;
    top: 50%;
    z-index: 4000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    left: 5%;
    right: 5%;
    padding: 0 15px;
    min-height: 200px;
    margin-top: -100px;
}

.qrDev {
    text-align: center;
    margin-top: -130px;
    position: fixed;
    top: 50%;
    z-index: 4000;
    left: 5%;
    right: 5%;
    padding: 0 15px;
}

.modify-pop,
.add-pop,
.userClean-pop {
    height: 200px;
    margin-top: -100px;
}

.delete-pop {
    height: 120px;
    margin-top: -60px;
}

.userMsg-pop {
    height: 280px;
    margin-top: -140px;
}

.H330 {
    height: 360px;
    margin-top: -160px;
}

.userMsg-pop img {
    width: 80px;
    height: 80px;
    display: block;
    margin: 20px auto 0;
}

.userMsg-pop em {
    color: red;
    font-style: normal;
}

.userMsg-pop .is-del {
    text-align: center;
    margin: 10px 0;
}

.userMsg-pop .is-del label {
    color: #999;
    margin: 6px 0;
    display: block;
}

#shareCode {
    margin: 45px auto 120px;
}

.homeQR,
.shareQR {
    text-align: center;
    margin: 80px auto 10px;
}

.dev-verify {
    margin: 5px 0 0;
}

#dialog-autoAddDev {
    display: none;
}

#dialog-autoSearch {
    display: none;
}

#dialog-autoSearch .devAutoID {
    margin-top: 10px;
    color: #f00;
    text-align: center;
    font-size: 16px;
}

.dialog-con {
    margin: 20px 0;
    height: 34px;
    text-align: center;
    color: #000;
    overflow: hidden;
}

.dialog-btn-style2 button {
    width: 48%;
    float: left;
    margin: 10px 1% 0;
}

.loadEffect {
    width: 80px;
    height: 80px;
    position: relative;
    margin: 0 auto;
    margin-top: 16px;
}

.loadEffect span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d2d2d2;
    position: absolute;
    -webkit-animation: load 1.04s ease infinite;
}

@-webkit-keyframes load {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}

.loadEffect span:nth-child(1) {
    left: 0;
    top: 50%;
    margin-top: -8px;
    -webkit-animation-delay: 0.13s;
}

.loadEffect span:nth-child(2) {
    left: 10px;
    top: 10px;
    -webkit-animation-delay: 0.26s;
}

.loadEffect span:nth-child(3) {
    left: 50%;
    top: 0;
    margin-left: -8px;
    -webkit-animation-delay: 0.39s;
}

.loadEffect span:nth-child(4) {
    top: 10px;
    right: 10px;
    -webkit-animation-delay: 0.52s;
}

.loadEffect span:nth-child(5) {
    right: 0;
    top: 50%;
    margin-top: -8px;
    -webkit-animation-delay: 0.65s;
}

.loadEffect span:nth-child(6) {
    right: 10px;
    bottom: 10px;
    -webkit-animation-delay: 0.78s;
}

.loadEffect span:nth-child(7) {
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    -webkit-animation-delay: 0.91s;
}

.loadEffect span:nth-child(8) {
    bottom: 10px;
    left: 10px;
    -webkit-animation-delay: 1.04s;
}

.favorite {
    position: fixed;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
}

.favorite:after {
    content: "";
    width: 2rem;
    height: 2rem;
    background: #00a0e9;
    display: inline-block;
}

.product-show {
    width: 260px;
    height: 266px;
    margin: -133px 0 0 -130px;
}

.popup .title {
    font-size: 18px;
    color: #333;
    line-height: 20px;
    font-weight: normal;
    text-align: center;
    margin-top: 30px;
}

#items-list {
    padding: 0 0 80px;
    overflow: hidden;
}

.set-con {
    border: 1px solid #ccc;
    background-color: #fff;
    margin-top: 20px;
    padding: 0 14px;
}

.item-in {
    width: 100%;
    display: table;
    height: 40px;
}

.item-in input {
    width: 100%;
    height: 40px;
    line-height: normal;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -box-sizing: border-box;
    border: 0 none;
    display: block;
    color: #333;
    padding: 0 18px;
}

.set-devname .icon {
    width: 16px;
    display: table-cell;
    vertical-align: middle;
}

.set-devname .icon i {
    width: 18px;
    height: 18px;
    background: url(../images/icon_router.png) 50% 50% no-repeat;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    display: block;
}

nav.classify,
.type-body {
    width: 100%;
    margin: 20px auto 120px;
}

nav.classify ul {
    width: 100%;
    display: table;
}

nav.classify ul li {
    /*display: inline-table;*/
    width: 33.33333%;
    position: relative;
    overflow: hidden;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

nav.classify ul li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px 0;
    text-align: center;
    color: #fff;
}

nav.classify ul li a b {
    width: 60px;
    height: 60px;
    margin-bottom: 8px;
    display: inline-block;
}

.ext-other {
    position: relative;
    display: flex;
}

.ext-device {
    position: relative;
    flex: 1;
}

.speaker-info {
    background: #686868;
    color: #fff;
    margin: 2px 4px 0;
    padding: 16px;
    overflow: hidden;
    position: relative;
    display: flex;
}

.speaker-info .speaker-name {
    flex: 1;
    padding: 0 0 0 28px;
    background: url('../images/icon_speaker.png') left 50% / 18px 18px no-repeat;
}

.speaker-info span {
    width: 16%;
    text-align: right;
}

ul.speaker-items {
    margin: 0 4px;
}

ul.speaker-items li {
    float: left;
    display: inline-block;
    width: 33.3333%;
    overflow: hidden;
}

.dev_option {
    background: #50606e;
    color: #fff;
    padding: 10px;
    text-align: center;
    margin: 1px;
    height: 160px;
}

.speaker-option {
    background: #50606e;
    padding: 10px;
    text-align: center;
    margin: 1px;
}

.speaker-option:before {
    content: "";
    display: inline-block;
    width: 64px;
    height: 64px;
    background: url('../images/icon_speaker.png') 50% 50% / 48px 48px no-repeat;
    margin: 0 0 14px;
}

.speaker-option .name {
    margin: 0 0 6px;
    line-height: 28px;
}

.speaker-option .status {
    font-size: 12px;
    line-height: 18px;
}

.wrap-speaker {
    position: relative;
    overflow: hidden;
}

.wrap-speaker .speaker-name {
    padding: 48px 14px;
    text-align: center;
}

.wrap-speaker .speaker-name:before {
    content: "";
    display: inline-block;
    width: 120px;
    height: 120px;
    background: url('../images/icon_speaker.png') 50% 50% / 120px 120px no-repeat;
}

.wrap-speaker .speaker-name p {
    margin: 14px 0 0;
    line-height: 32px;
}

.wrap-speaker .speaker-name p svg {
    margin: -6px 0 0 4px;
    vertical-align: middle;
}

.wrap-speaker .detail-info {
    overflow: hidden;
}

.wrap-speaker .detail-info .info {
    overflow: hidden;
    line-height: 48px;
    margin: 1px 0 0;
    background: #57565b;
    padding: 0 14px;
    color: #fff;
}

.wrap-speaker .detail-info .info .lt {
    float: left;
}

.wrap-speaker .detail-info .info .con {
    float: right;
}

.wrap-speaker .speaker-id {
    color: #fff;
}

.col2 {
    overflow: hidden;
}

.col2>div {
    width: calc(50% - 2px);
    margin: 2px 1px 0;
    position: relative;
    overflow: hidden;
    float: left;
}

.dev-elec-master {
    background: #50606e;
    color: #fff;
    padding: 10px;
    text-align: center;
    margin: 1px;
    display: flex;
}

.dev-elec-master .lt {
    min-width: 64px;
    width: 40%;
    margin: 0 10px 0 0;
    text-align: center;
}

.dev-elec-master .rt {
    flex: 1;
    text-align: left;
}

.dev-elec-master .dev-name {}

.dev-elec-master .dev-info>div {
    overflow: hidden;
    line-height: 18px;
}

.dev-elec-master .dev-info>div span {
    float: left;
}

.dev-elec-master .dev-info>div em {
    float: right;
    font-style: normal;
}

.dev-elec-master .dev-status {
    margin: 12px 0;
}

.dev-elec-master .status.on {
    background: #14ba1e;
}

.dev-elec-master .status.off {
    background: #b2b2b2;
    color: #585858;
}

.dev-elec-master .dev-status.online {
    color: #14ba1e;
}

.dev-elec-master .dev-status.offline {
    color: #b2b2b2;
}

.dev-elec-master .dev-pic {
    /* width: 64px;
    height: 64px; */
    margin: 10px auto;
    /* background: url('../images/Airopen-online.png') 100%/cover no-repeat; */
}

.dev-elec-master em:after {
    padding: 0 0 0 2px;
}

.dev-elec-master .dev-current em:after {
    content: 'A';
}

.dev-elec-master .dev-voltage em:after {
    content: 'V';
}

.dev-elec-master .dev-temp em:after {
    content: '°';
}

.dev-elec-master .dev-total em:after {
    content: 'W';
}

ul.area-items {
    overflow: hidden;
    margin: 0 4px;
}

ul.area-items li {
    background: rgba(87, 86, 91, 0.9);
    margin: 2px 0 0;
    overflow: hidden;
    position: relative;
}

ul.area-items li a {
    overflow: hidden;
}

.area-item-name {
    padding: 0 0 18px;
}

.area-list-name {
    font-size: 18px;
    padding: 28px 14px 18px;
    color: #fff;
}

.area-device-info {
    float: left;
    overflow: hidden;
    height: 18px;
    flex: 1;
    color: #fff;
}

.area-device-info span {
    line-height: 18px;
    height: 18px;
    vertical-align: middle;
}

.area-option {
    position: relative;
    overflow: hidden;
    padding: 10px 14px 0;
    display: flex;
}

.real-light,
.real-temperature {
    display: inline-block;
    font-size: 14px;
    text-align: center;
    margin: 0 20px 0 0;
    overflow: hidden;
}


/* .real-temperature:before  */

.real-light:before {
    content: "";
    width: 18px;
    height: 18px;
    float: left;
    display: inline-block;
}

.real-light:before {
    background: url('../icon/real_light_on.png');
    background-size: cover;
}

.real-light-off:before {
    background: url('../icon/real_light_off.png');
    background-size: cover;
}

.real-temperature .temp_on_off {
    width: 18px;
    display: inline-block;
}

.real-temperature .temp_on_off.off {
    background: url('../icon/real_temperature.png') no-repeat scroll 50% 0 transparent;
    background-size: 100% 100%;
}

.real-temperature .temp_on_off.on {
    background: url('../icon/real_temperature_open.png') no-repeat scroll 50% 0 transparent;
    background-size: 100% 100%;
}

.temp-layer {
    overflow: hidden;
}

.temp-layer span {
    margin: 0 4px;
}

.temp-layer .temp-degree:after {
    content: "℃";
}

.area-switch-set {
    width: 18px;
    height: 18px;
    z-index: 50;
}

.area-switch-set i {
    display: inline-block;
    width: 18px;
    height: 18px;
}

.area-safe,
.area-sort {
    position: relative;
    width: 18px;
    height: 18px;
    z-index: 100;
}

.area-safe {
    color: white;
}

.area-safe i.icon-safe {
    background: url('../icon/sort.png') no-repeat;
    background-size: cover;
}

.icon-camera {
    background: url(../icon/record_fill.png) no-repeat;
    background-size: cover;
}

.icon-scan {
    background: url(../icon_1/scan.png) no-repeat;
    background-size: cover;
}

.icon-up {
    background: url(../icon/up.png) no-repeat;
    background-size: cover;
}

.area-safe i.icon-safe.on {
    background: url('../icon/lock.png') no-repeat;
    background-size: cover;
}

.area-safe i.icon-safe.off {
    background: url('../icon/unlock.png') no-repeat;
    background-size: cover;
}

.area-sort {
    display: none;
}

.area-sort i.icon-sort {
    background: url('../icon/sort.png') no-repeat;
    background-size: cover;
}

.btn-sort {
    width: 100%;
    height: 60px;
    display: inline-block;
}

.reDisplay .dev-body .reDisplay {
    text-align: center;
    line-height: 32px;
    padding: 1rem 0;
    display: none;
}

.orderUpdate {
    position: fixed;
    z-index: 100;
    bottom: 0;
    width: 100%;
    line-height: 36px;
    padding: 10px 0;
    font-size: 14px;
    text-align: center;
    background: #00a0e9;
    cursor: pointer;
    margin: 0;
}

ul.safe-area-list {
    overflow: hidden;
    height: 1%;
}

ul.safe-area-list li {
    line-height: 48px;
    margin: 0 10px;
    border-bottom: 1px solid #3c3c3c;
}

ul.safe-area-list li .safe-area-name {
    float: left;
}

ul.safe-area-list li label {
    overflow: hidden;
    height: 1%;
    display: block;
}

ul.safe-area-list li label input {
    width: 18px;
    height: 18px;
    float: right;
    vertical-align: middle;
    margin-top: 16px;
}

#show-big {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 4000;
    display: none;
}

.model_title {
    text-align: center;
    margin: 10px 0;
}

.model_body {
    margin: 0 auto;
}

.model_body form {
    width: 100%;
    margin: 48px 0 0;
}

dl.klist {
    overflow: hidden;
    margin: 3% 0;
}

dl.klist dt {
    width: 20%;
    color: #000;
}

dl.klist dd {
    padding: 0 2%;
}

dl.klist dd.k1 {
    width: 60%;
}

dl.klist dd.k2 {
    width: 20%;
}

dl.klist dd.k1 input,
dl.klist dd.k2 select {
    width: 100%;
}

.edit_time {
    line-height: 46px;
    overflow: hidden;
}

.model_body .edit_time input[type="number"] {
    width: 40px;
    float: left;
    text-align: right;
}

.edit_time button {
    width: 60px;
    height: 36px;
    padding: 4px 0;
    margin: 5px 0;
    float: right;
}

.edit_time span {
    float: left;
    margin: 0 5px 0 4px;
}

.edit_update {
    width: 100%;
    height: 45px;
    background: #00a7e4;
    color: #fff;
    border: none;
    margin: 14px 0;
}

.edit_delete {
    width: 100%;
    height: 45px;
    background: #ad0a0a;
    color: #fff;
    border: none;
    margin: 0 0 14px;
}


/*
#userBody{overflow:hidden;}
#userBody .user-list{border-bottom: 1px dashed #fff;background: rgba(255,255,255,0.1);}
#userBody .user-list a{overflow: hidden;display:block;padding:10px 20px;}
#userBody .user-list .user-info{display:table-cell;vertical-align:middle;}
#userBody .user-list .user-info em{width:60px;float:left;text-align:center;}
.user-info .userhead{width:48px;height:48px;margin:0 16px 0 0;vertical-align:middle;float:left;}


.adminLayout{margin: 20px 0;}
.userHeadTitle{line-height: 32px;overflow: hidden;margin-bottom: 10px;}
.userHeadTitle em{width: 4px;height:32px;background: #00a7e4;float: left;}
.userHeadTitle h2{display: inline-block;background: #00a7e4;float: left;margin: 0 0 0 5px;padding:0 10px;}
.admin-info{text-align: center;background: rgba(255,255,255,0.1);padding:10px 0;border-bottom: 1px dashed #fff;}
.admin-info .userhead{width:80px;display: block;margin:0 auto 6px;}

*/

#userBody {
    overflow: hidden;
    position: relative;
    padding: 28px 0 0;
}

#userBody .userLayout {
    overflow: hidden;
    position: relative;
    margin: 4px 0 0;
}

.userLayout .userHeadTitle {
    background: #282828;
}

.userLayout .userHeadTitle h1 {
    padding: 14px;
    font-size: 14px;
}

.userLayout .user-list {
    padding: 14px;
    margin: 2px 0 0;
    background: #57565b;
    color: #fff;
}

.userLayout .user-list img {
    width: 64px;
    height: 64px;
    display: inline-block;
}

.userLayout .user-list .user-info {
    display: flex;
}

.userLayout .user-list .user-info .username-info {
    flex: auto;
    margin: 0 0 0 14px;
}

.userLayout .user-list .user-info .username-title {
    display: block;
    padding: 0px 0px 5px 0px;
    line-height: 18px;
    vertical-align: middle;
    color: #fff;
}

.userLayout .user-list .user-info .username-id span:before {
    content: "UID";
    color: #35353a;
    background: #92a0a8;
    margin: 0 4px 0 0;
    padding: 0 4px;
    border-radius: 4px 0 0 4px;
    font-weight: 600;
}

.userLayout .user-list .user-info .username-id span {
    font-size: 12px;
    background: #282828;
    border-radius: 4px;
    padding: 0 4px 0 0;
    display: inline-block;
}

.userLayout .user-list .user-info .username-validity {
    line-height: 14px;
}

.userLayout .user-list .user-info .username-validity span {
    font-size: 12px;
    color: #bbb;
    border-radius: 4px;
    padding: 0 4px 0 0;
    margin: 10px 0px 0px 0px;
    display: inline-block;
}

.userLayout .user-list .user-info .username-id {
    line-height: 14px;
}

.userLayout .user-list .user-info .user-status-icon li img {
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
}

.userLayout .user-list .user-time {
    font-size: 14px;
}


/*
.username-status{float:left;}
.username-status h3{font-size: 14px;line-height:28px;}
ul.user-status-icon{overflow:hidden;}
ul.user-status-icon li{display:inline; float:left;}
ul.user-status-icon li img{width:18px;height:18px;margin:0 3px 0 0;}
.user-status span{margin:0 5px;}
.user-status span img{width:18px;height:18px;}
*/

.member-body {
    margin: 20px 10px 120px;
}

.member-headimg {
    text-align: center;
    margin: 0 0 20px 0;
}

.member-headimg img {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    background: #fff;
    border: 4px solid #fff;
    box-shadow: 0 0 8px #000;
    margin: 0 0 20px 0;
}

.member-body p {
    margin: 10px 0;
    overflow: hidden;
    height: 1%;
    font-size: 14px;
}

#tabTitle {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    z-index: 1;
    height: 2.6rem;
    border-bottom: 1px solid #e2e0e0;
}

#tabTitle span {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    text-align: center;
    line-height: 2.6rem;
    background: #fff;
    color: #666;
}

#tabTitle span.on {
    position: relative;
    margin-bottom: -1px;
    color: #00a0e9;
    border-bottom: 2px solid #00a0e9;
}

#tabTitle span.on:after {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    margin-left: -6px;
    content: "";
    width: 0;
    height: 0;
    line-height: 0;
    border: 6px solid transparent;
    border-bottom-color: #00a0e9;
}

#tabContent .con {
    background: #fff;
    color: #666;
    padding: 2rem 1rem;
    display: none;
}

#tabContent .log-in,
.modify-btn {
    width: 100%;
    height: 2.6rem;
    line-height: 2.6rem;
    background: #00a7e4;
    color: #fff;
    border: none;
    margin: 1rem 0 0;
}

#tabContent .show {
    display: block;
}

#tabContent form {
    line-height: 2rem;
}

#tabContent form input {
    height: 2rem;
    width: 100%;
}

#loginsubmit,
#membersubmit,
#bindsubmit {
    display: block;
    text-align: center;
    margin: 10px 0;
}

.authList li {
    padding: 0 20px;
    line-height: 28px;
}

.authList li em {
    margin: 0 10px 0 0;
}

.authUserInfo {
    text-align: center;
    margin: 40px 0;
    position: relative;
}

.authUserInfo .userhead {
    width: 120px;
    height: 120px;
    border-radius: 60px;
    margin: 0 0 20px 0;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .4);
}

.authUserInfo .nickname {
    margin: 5px 0 15px;
}

.authUserInfo ul.setUser {
    margin: 10px 0;
    text-align: center;
    padding: 6px 0 5px;
}

.authUserInfo ul.setUser li {
    display: inline;
}

.authUserInfo ul.setUser li a {
    padding: 6px 8px 5px;
    border-radius: 5px;
}

ul.setUser .user-update {
    background: #00a7e4;
}

ul.setUser .user-safe {
    background: #0ed20e;
}

ul.setUser .user-delete {
    background: #e92c00;
}

.authAreaSelect {
    line-height: 36px;
    padding: 0 0 80px 0;
}

.authAreaSelect dl dt {
    border-bottom: 1px solid #fff;
    padding: 0 5%;
    margin: 0 0 20px 0;
}

.authAreaSelect dl dd {
    display: block;
    background: url(../images/area_item.jpg) 0 0 no-repeat;
    background-size: 100% 60px;
    height: 60px;
    line-height: 60px;
    margin: 10px 5% 0;
    border-radius: 6px;
    border: 1px solid #5e5e5e;
}

.authAreaSelect dl dd label {
    display: block;
    overflow: hidden;
}

.authAreaSelect label p {
    padding: 0 10% 0 18%;
}

.authAreaSelect dl dd em {
    margin: 0 10px 0 0;
}

.authAreaSelect .authBtn {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1;
    background: #00a7e4;
    text-align: center;
    line-height: 48px;
    cursor: pointer;
}

.wgMain>.tips {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100%);
    border: 1px solid #00a0e6;
    background: rgba(0, 160, 230, 0.4);
    padding: 8px;
    color: #00a0e6;
}

.msg_tips {
    height: 24px;
    line-height: 24px;
    padding: 10px;
    color: #f00;
}

.type-body ul li a,
.changeType-body ul li a {
    display: block;
    padding: 0 3%;
    border-bottom: 1px solid #545454;
    color: #fff;
}

.changeType-body .change {
    float: right;
    line-height: 80px;
}

.type-ico {
    margin: 0 8% 0 0;
}

.type-body ul li {
    position: relative;
}

.type-body ul li::after {
    content: "";
    position: absolute;
    right: 1.2rem;
    top: 50%;
    width: .75em;
    height: .75rem;
    border-left: 1px solid currentColor;
    border-top: 1px solid currentColor;
    transform: translate3d(0, -50%, 0) rotateZ(135deg);
    -webkit-transform: translate3d(0, -50%, 0) rotateZ(135deg);
}

form div.userName,
form div.passWord {
    margin: 1rem 0 0;
    border: 1px solid #c1c1c1;
    padding: 1rem;
    height: auto;
    background: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

form div.userName label,
form div.passWord label {
    color: #000;
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
}

form div.userName input,
form div.passWord input {
    border: none;
    background: transparent;
    font-size: 1em;
    color: #b3b3b3;
    letter-spacing: 1px;
    padding-left: 2px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.formForget {
    margin: 1rem 0 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.login_forget {
    padding: 0 0 0 1rem;
}

.err_tip {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #f00;
}

form div.formStyle1 {
    border: 1px solid #c1c1c1;
    padding: 1rem;
    height: auto;
    background: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.info-content {
    margin: 20px 0;
}

.info-content .title {
    margin: 10px 2%;
}

.changeData,
.changepassword {
    background: #fff;
    padding: 1.8rem 0.8rem 1.8rem;
}

form div.formStyle2 {
    margin-bottom: 1rem;
    height: 3rem;
    line-height: 3rem;
    border: 1px solid #e1e1e1;
    box-sizing: border-box;
    overflow-y: hidden;
    display: -webkit-box;
    -webkit-box-align: center;
}

form div.formTop {
    border-bottom: 0;
    -webkit-border-top-left-radius: 0.45em;
    -webkit-border-top-right-radius: 0.45em;
    -moz-border-radius-topleft: 0.45em;
    -moz-border-radius-topright: 0.45em;
    border-top-left-radius: 0.45em;
    border-top-right-radius: 0.45em;
}

form div.formBetween {
    border-bottom: none;
}

form div.formBottom {
    -webkit-border-bottom-left-radius: 0.45em;
    -webkit-border-bottom-right-radius: 0.45em;
    -moz-border-radius-bottomleft: 0.45em;
    -moz-border-radius-bottomright: 0.45em;
    border-bottom-left-radius: 0.45em;
    border-bottom-right-radius: 0.45em;
}

#formlogin1 label,
#formlogin2 label {
    color: #000;
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
}

#formlogin1 input,
#formlogin2 input {
    border: none;
    background: transparent;
    font-size: 1em;
    color: #b3b3b3;
    letter-spacing: 1px;
    padding-left: 2px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.choose_box {
    height: 2em;
    line-height: 2em;
    margin: 0.6rem 0 0;
}

.choose_box div {
    float: left;
}

.choose_box a {
    float: right;
}

.f-register {
    background: #E9E9E9;
}

.f-register a {
    border: 1px solid #DFDFDF;
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    padding: 0.6rem;
    color: #666;
    display: block;
    text-decoration: none;
}

.f-href {
    color: #FF5959;
}

.inner-box {
    width: 100%;
    padding: 0 5%;
    margin: 0 auto;
    box-sizing: border-box;
}

.check-ctn .check-outer {
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
}

.checked {
    width: 14px;
    height: 14px;
    margin-top: 1px;
    background: url('../images/checked.png');
}

.checked.no {
    width: 14px;
    height: 14px;
    margin-top: 1px;
    background: url('../images/uncheck.png');
}

.labelbox {
    position: relative;
    margin-bottom: 15px;
    padding: 0.5rem;
    border: 1px solid #e1e1e1;
    background: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #666;
}

.labelbox input {
    border: none;
    line-height: normal;
    height: 2.4rem;
    box-sizing: border-box;
    color: #666;
    width: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 1rem;
}

.formSubBox {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.form-list-line {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    overflow: hidden;
    padding: 10px 0;
    line-height: 2rem;
}

.form-list-arrow {
    width: 16px;
    height: 16px;
    margin: 8px 0 0 8px;
    background-image: url('../images/arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.j-select-area-code,
.j-select-area-num {
    width: auto;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.j-select-area-code {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #666;
    text-align: left;
}

.j-select-area-num {
    -webkit-flex-basis: 36%;
    -ms-flex-preferred-size: 36%;
    flex-basis: 36%;
    color: #888;
    text-align: right;
}

.area-code {
    position: relative;
}

.area-body {
    position: absolute;
    z-index: 10;
    top: 20%;
    left: 5%;
    background-color: #fff;
    width: 90%;
    max-height: 60%;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .3);
    list-style: none;
}

.area-body .area-item {
    list-style: none;
    font-size: 1rem;
    color: #4d4d4d;
    height: 3rem;
    line-height: 3rem;
    cursor: pointer;
    overflow: hidden;
}

.area-body .area-item:hover {
    background-color: #f4f6fc
}

.area-body .area-name-en {
    color: gray;
    font-size: 0.4rem;
}

.area-body .area-name {
    padding: 0 0.4rem;
}

.area-body .area-num {
    width: calc(28% - 0.4rem);
    float: right;
    font-weight: 600;
    text-align: right;
    margin-right: 0.4rem;
}

.footFixMain {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 4rem;
    text-align: center;
    line-height: 4rem;
}

.footFixMain a {
    color: #fff;
}

.form-input-extra {
    position: relative;
    -webkit-flex-basis: 40%;
    -ms-flex-preferred-size: 40%;
    flex-basis: 40%;
}

#J_getCode,
#btnSend,
.getCode {
    background: #ccf2ff;
    color: #00a0e9;
    border: none;
    border-radius: 5px;
    display: block;
    width: 90%;
    text-align: center;
    padding: 0 5px;
    float: right;
    overflow: hidden;
}

#J_getCode:link,
#J_getCode:hover,
#btnSend:link,
#btnSend:hover,
.getCode:link,
.getCode:hover {
    color: #00a0e9;
}

.reset-code {
    color: #777;
}

.labelbox .chkcode_img {
    display: block;
    width: 6rem;
    margin: 8px 0;
    line-height: 2rem;
    height: 2rem;
    border-radius: 4px;
}

.labelbox #verify {}

.fill-btn-list {
    display: flex;
}

.fill-btn-list .fill-btn {
    flex: 1;
}

.fill-btn-list .fill-btn:nth-child(1) {
    margin-right: 4px;
}

.fill-btn-list .fill-btn:nth-child(2) {
    margin-left: 4px;
}

.fill-btn.btn-green a {
    background: #00d200;
}

.foot-remark-main {
    color: #a8a8a8;
}

.from-sub-content {
    color: #000;
    margin: 3rem 0;
}

.from-sub-title {
    color: #000;
    margin: 3rem 0 0;
}

.fill-main .title-item h4,
.fill-main .title-item p {
    color: #282828;
}

.fill-info-box {
    padding: 10px;
}

.fill-info-box label {
    display: inline;
    color: #000;
    margin-right: 20px;
}

.from-list-lt,
.from-list-content {
    color: #000;
}

.from-list-content {
    font-weight: 600;
}

.fill-step {}

.reg-btn,
.link-btn,
.fill-btn {
    border: none;
    margin: 0.6rem 0 0px 0;
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    border-radius: 0px;
    color: #fff;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.reg-btn a,
.fill-btn a {
    display: block;
    background: #00a0e9;
    color: #fff;
}

.check-ctn {
    margin: 10px 0;
}

.link-able {
    color: #fff;
    background: #2899f7;
    text-align: center;
    display: block;
    line-height: 43px;
    font-size: 16px;
}

.title-item {
    padding: 1.4rem 5% 1rem;
}

.title-item h4 {
    font-size: 18px;
    color: #fff;
}

.register_from_error_tips {
    color: #f00;
    display: none;
    margin: 5px 0;
    font-size: 0.75rem;
}

#errorTips {
    color: #f00;
    line-height: 2rem;
    height: 2rem;
    margin: 0.5rem 0 0;
}

.info-note {
    margin: 1rem 0 0;
}

.info-note a {
    color: #04577a;
}

input.password {
    display: block;
}

input.password2 {
    display: none;
}

.pwdBtnShow {
    outline: none;
    display: inline-block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    overflow: hidden;
    margin: 4px 0;
}

.pwdBtnShow i {
    background-image: url('../images/eyesimg.png');
    background-position: 0 -30px;
    background-repeat: no-repeat;
}

.i_icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.aui-my-info {
    position: relative;
    overflow: hidden;
}

.aui-my-info-bg {
    width: 100%;
    min-height: 220px;
    overflow: hidden;
    /*background-image: url('../images/aui-my-avatar-bg.jpg');background-position: center;background-repeat: no-repeat;-webkit-background-size: cover;background-size: cover;-webkit-filter: blur(8px);filter: blur(8px);*/
}

.aui-my-info-bg:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: inherit;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

.aui-my-info-avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 220px;
}

.aui-layer-my-avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 140px;
    margin: -70px 0 0 -60px;
    text-align: center;
}

.aui-layer-my-avatar p {
    margin: 10px 0 0 0;
    overflow: hidden;
}

.aui-my-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: solid 4px #fff;
    overflow: hidden;
}

.aui-l-content .aui-menu-list ul li {
    display: flex;
}

.aui-menu-list li {
    color: #888;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    padding: 12px 15px;
    text-align: left;
    background: #f2f2f2;
}

.aui-l-content .aui-menu-list-clear ul li a {
    display: flex;
    width: 100%;
    align-items: center;
}

.b-line {
    position: relative;
}

.b-line:before {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid rgba(207, 207, 207, 0.95);
    color: rgba(207, 207, 207, 0.95);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.501);
    transform: scaleY(0.501);
}

.aui-icon {
    width: 30px;
    height: 30px;
    margin-right: 12px;
}

.aui-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.aui-l-content .aui-menu-list ul li h3 {
    width: 86%;
    font-weight: normal;
    font-size: 14px;
    line-height: 32px;
    color: #4f4f4f;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.aui-status {
    position: absolute;
    top: 33%;
    right: 3rem;
    float: right;
}

.aui-menu-list ul li::after {
    content: "";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    width: .75em;
    height: .75rem;
    border-left: 1px solid currentColor;
    border-top: 1px solid currentColor;
    transform: translate3d(0, -50%, 0) rotateZ(135deg);
    -webkit-transform: translate3d(0, -50%, 0) rotateZ(135deg);
}

.btn-confirm {
    background-color: #4f4f4f;
    color: #fff;
    margin: 0 40px;
}

.aui-container .btn-logout {
    position: relative;
    display: block;
    margin: 20px 14px 0;
    padding: 0 12px;
    box-sizing: border-box;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    line-height: 3.6;
    border-radius: 5px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background: #484848;
}

.rel-form-list {
    overflow: hidden;
    line-height: 28px;
    margin: 10px 0 0;
}

.rel-form-list label {
    display: block;
}

.rel-form-list em {
    margin: 0 0 0 6px;
    color: #f00;
    font-style: normal
}

.rel-form-list input {
    width: 100%;
    line-height: 36px;
    margin: 10px 0;
}

#from_info_Main {
    margin: 80px 0 0;
}

.protocol-wrap {
    margin: 20px 0;
    padding: 0 20px;
    line-height: 18px;
}

.protocol-wrap h1 {
    text-align: center;
    margin: 0 0 20px 0;
}

.protocol-wrap h3 {
    margin: 10px 0;
}

.device-detail-layer {
    position: relative;
    margin: auto 0;
    padding-top: 4em;
}

.dev_detail_info {
    line-height: 28px;
    text-align: center;
}

.dev_detail_info ul.fun-list {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.dev_detail_info ul.fun-list li {
    height: 100px;
    background: #373b47;
    margin: 2px 0 0 2px;
    width: calc(100% / 3 - 2px);
}

.dev_detail_info ul.fun-list li:nth-child(3n+1) {
    margin-left: 1px;
}

.dev_detail_info ul.fun-list li a {
    display: block;
    color: #fff;
}

.btn-devFun {
    line-height: 38px;
}

.fa {
    display: flex;
}

.fa:before {
    content: "";
    width: 48px;
    height: 48px;
    display: inline-block;
    margin: 14px auto 0;
}

.fa-edit:before {
    background: url('../images/icon_edit.png') no-repeat;
}

.fa-attr:before {
    background: url('../images/icon_dev_edit.png') no-repeat;
}

.fa-sound:before {
    background: url('../images/icon_sound.png') no-repeat;
}

.fa-love:before {
    background: url('../images/icon_love.png') no-repeat;
}

.fa-devlog:before {
    background: url('../images/icon_devlog.png') no-repeat;
}

.fa-syn:before {
    background: url('../images/icon_syn.png') no-repeat;
}

.fa-track:before {
    background: url('../images/icon_distance.png') no-repeat;
}

.fa-exch:before {
    background: url('../images/icon_exchange.png') no-repeat;
}

.fa-scan:before {
    background: url('../images/icon_scan.png') no-repeat;
}

.fa-timezone:before {
    background: url('../images/icon_timezone.png') no-repeat;
}

.klist-box {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
}

.b-attr-list {
    background: #302e32;
    padding: 0.7rem 1rem;
    line-height: 2.4rem;
    margin: 1px 0;
    vertical-align: middle;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    align-items: center;
    justify-content: center;
}

.b-attr-list>label {
    line-height: 40px;
    -webkit-flex-basis: 30%;
    -ms-flex-preferred-size: 30%;
    flex-basis: 30%;
    color: #fff;
}

.b-attr-list span {
    flex: auto;
    color: #fff;
    overflow: hidden;
}

.b-attr-list select,
.b-attr-list input {
    border-radius: 6px;
    line-height: 40px;
    border: none;
    color: #fff;
    letter-spacing: 1px;
    padding: 0 0.8rem;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: #5d5f62;
    width: 100%;
}

c.b-attr-list select,
.edit-list-info {
    width: 100%;
}

.edit-list-info {
    padding: 0 0.8rem;
    color: #585858;
    flex: 1;
}

.b-attr-layer {
    width: 100%;
}

.b-attr-layer label {
    color: #fff;
    margin-right: 14px;
}

.set-keyname {
    flex: 1;
    overflow: hidden;
}

.set-keyname input {
    /*width: calc(100% - 40px);*/
}

.set-keyname2 {
    width: 38%;
    padding: 0 0.4rem;
}

.set-irkey {
    width: 22%;
    padding: 0;
}

.set-push {
    display: block;
    overflow: hidden;
    text-align: center;
    flex: 1;
    color: #999;
    background: #00a7e4;
    padding: 0;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    cursor: pointer;
    margin: 0 0 0 0.4rem;
}

.set-push span {
    display: block;
    height: 100%;
}

.set-push a {
    display: block;
}

.wxPush {
    margin: 20px 0;
    padding: 0 2%;
    overflow: hidden;
}

.wxPush select {
    width: 100%;
    height: 3.6rem;
}

.wxPush .tip {
    line-height: 28px;
    color: #f00;
}

.delaySet {
    margin: 20px 0;
    padding: 2%;
    overflow: hidden;
}

.delaySet input {
    width: 33.3333%;
    text-align: center;
    float: left;
    border: none;
    line-height: 40px;
    border-radius: 0;
    font-size: 14px;
}

.delaySet em {
    width: 2%;
    display: inline-block;
    text-align: center;
}

.delaySet button {
    width: 100%;
    margin: 10px 0 0;
    background: #00a0e9;
    color: #fff;
    border: none;
    line-height: 40px;
}

.delaySet .tip {
    color: #f00;
    display: block;
}

.settg-list {
    border: 1px solid #c1c1c1;
    height: auto;
    background: #f8f8f8;
    color: #000;
    font-size: 1.2em;
    margin: 14px 0;
    vertical-align: middle;
    text-align: center;
    height: auto;
}

.seing-list li {
    padding: 15px 0;
}

.setting-list {
    margin: 14px 0;
}

.setting-list ul {
    margin-bottom: 1rem;
    border-top: 1px solid #373b47;
    border-bottom: 1px solid #373b47;
    background: #373b47;
}

.setting-list ul li {
    padding: 0 3%;
    height: 3.6rem;
    line-height: 3.6rem;
    border-bottom: 1px solid #000;
    background: url('../images/my-arrow.png') 95% center no-repeat;
    background-size: 0.275rem 0.5rem;
}

.setting-list ul li:last-child {
    border-bottom: none;
}

.setting-list ul li a {
    color: #fff;
    padding-left: 2.2em;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 50%;
    display: block;
}

.setting-list ul li a .f-right {
    float: right;
    display: inline-block;
    margin-right: 5%;
    color: #999;
}

.setTimeWrap {
    display: none;
    background: #fff;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1009;
}


/*

.setTimeWrap .swiperTab{height:48px;}
.setTimeWrap .swiperTab li{display:block;float:left;width:50%;color:#333;text-align:center;background:#fff;line-height:48px;border-bottom: 2px solid #fff;}
.setTimeWrap .swiperTab li.active{border-bottom: 2px solid #00a0e9;}
.setTimeWrap .swiper-container{background:#fff;width:100%;height:500px;border-top:0;color:#333;}


.setTimeWrap .swiper-container {margin:0 auto;position:relative;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden; z-index:1;}
.swiper-wrapper{-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;}
.swiper-slide{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:20px;float: left;overflow: hidden;}
.swiper-slide:nth-child(1){}
.swiper-slide:nth-child(2){}
*/

.setTimeSpacing {
    padding-left: 2%;
}

.setTimeLayoutRight {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.setTimeWrap .weekcheck {}

.setTimeWrap .weekcheck ul {
    overflow: hidden;
    color: #252525;
}

.setTimeWrap .weekcheck ul li {
    float: left;
    width: 33.333%;
    padding: 0 0.16rem 0.2rem 0;
}

.setTimeWrap .weekcheck ul li>label {
    width: auto;
    display: inline-block;
}

.setTimeWrap .weekcheck input {
    width: auto;
    margin: -2px 3px 0 0;
}

.status-btn {
    color: #585858;
}

.status-btn em {
    font-style: normal;
    cursor: pointer;
}

.status-btn .mui-switch.mui-switch-anim {
    margin: 0 0.4rem;
}

.status-btn input {
    width: 48px;
    border: 1px solid #dfdfdf;
    background-color: #fdfdfd;
}

.setTimeWrap .timePoint {
    display: none;
}

.setWarnBtn {
    flex: 1;
    text-align: right;
}

.loadTimeListRow {
    background: #fff;
    color: #666;
}

a.loadSetTimeList {
    color: #fff;
    display: flex;
}

.loadWait {
    background: #e8e8e8;
}

.loadSetTime .status {
    color: #0f0!important;
}

.loadSetTimeList {
    height: 56px;
    display: block;
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;
}

.loadSetTimeList .loadSetTimeListL {
    width: 80%;
}

.loadSetTimeList .loadSetTimeListR {
    width: 20%;
    display: table;
}

.loadSetTimeList .loadSetTimeListR>div {
    display: table-cell;
    vertical-align: middle;
}

.loadSetTimeList .time {
    font-size: 23px;
}

.loadSetTimeList .other div {
    display: inline;
    margin: 0 10px 0 0;
}

.loadSetTimeList .enable {
    line-height: 56px;
    text-align: center;
}

.setTimeFun {
    overflow: hidden;
    background: #f2f2f2;
    display: none;
    border-bottom: 1px solid #d8d8d8;
}

.setTimeFunList {
    display: flex;
    background: #383838;
}

.setTimeFunList a {
    color: #fff;
}

.setTimeFunList li {
    flex: 1;
    text-align: center;
    margin: 10px 0;
}

.rowAttrList {}

.rowAttrList .b-attr-list {
    margin: 0;
    margin-bottom: -1px;
}

.rowAttrList .status-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rowAttrList .b-attr-list a {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.selection-wrap,
.selection {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.selection-wrap {
    background: rgba(0, 0, 0, .3);
    z-index: 1;
    opacity: 0;
    -webkit-transform: opacity .5s;
    transition: opacity .5s;
}

.selection-content {
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 10;
    background: #fff;
    color: #666;
    max-height: 50%;
    overflow-y: auto;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
}

.is-show .selection-content {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.is-show .selection-wrap {
    opacity: 1;
}

.check_label {
    padding: 0.625rem 1rem;
    line-height: 1.4;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.selection-checkbox-mark {
    padding-right: 0.625em;
}

.selection-checkbox-mark input {
    position: absolute;
    left: -9999em;
}

.checklist-icon-checked {
    display: inline-block;
    vertical-align: middle;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.checklist-icon-checked:before {
    content: " ";
    width: 1.5rem;
    height: 1.5rem;
    background: url('../images/icon_checkbox.png') 50% 50% no-repeat;
    color: #c9c9c9;
    font-size: 1.5rem;
    display: block;
}

.selection-checkbox .list-check:checked+.checklist-icon-checked:before {
    background: url('../images/icon_checkbox_checked.png') 50% 50% no-repeat;
}

.selection-checkbox-name {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    line-height: 1.5rem;
}

.check_label:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    left: 15px;
}

.selection-checkbox .text-align-center {
    text-align: center;
}

.selection-title {
    padding: 0.625rem 1rem;
    font-weight: 700;
}

.voiceType-list,
.track-key-list {
    width: 100%;
    height: calc(100vh - 48px);
    background: #f8f8f8;
}

.info-item-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    padding: 10px 14px;
    position: relative;
    line-height: 2;
    font-size: 1rem;
    border-bottom: 1px solid #d8d8d8;
}

.info-title {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.info-title label {
    display: block;
    margin-right: 1rem;
    line-height: 50px;
    color: black;
}

.info-ft {
    padding-right: 14px;
    position: relative;
}

.info-ft:after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #c8c8cd;
    border-style: solid;
    -webkit-transform: matrix(.71, .71, -.71, .71, 0, 0);
    transform: matrix(.71, .71, -.71, .71, 0, 0);
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: 2px;
}

.likeType-list .link-status {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-wrap {
    margin: 1.4rem auto;
}

.btn-wrap button {
    border: 0;
    cursor: pointer;
    outline: 0!important;
    background: none;
}

.btn-wrap button {
    width: 100%;
    height: 2.6rem;
    line-height: 2.6rem;
    margin-bottom: .6rem;
}

button.btn-operate-finish {
    background: #00a0e8;
    color: #fff;
    border-radius: 5px;
    opacity: .9;
}

button.btn-operate-delete {
    color: #f6615d;
    background: #fff;
    border: 1px solid #f6615d;
    border-radius: 5px;
}

.ali-voice-main {
    height: calc(100vh - 43px);
    background: #f8f8f8;
    color: #666;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    padding: 10px;
}

.setContent .complete-btn {
    position: fixed;
    bottom: 0;
    left: 0;
}

.setContent {
    box-sizing: border-box;
    padding: 1rem;
    overflow: hidden;
}


/* switch 样式 */

.mui-switch {
    width: 48px;
    height: 24px;
    position: relative;
    border: 1px solid #dfdfdf;
    background-color: #fdfdfd;
    box-shadow: #dfdfdf 0 0 0 0 inset;
    border-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-clip: content-box;
    display: inline-block;
    -webkit-appearance: none;
    user-select: none;
    outline: 0
}

.mui-switch:before {
    content: '';
    width: 22px;
    height: 22px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4)
}

.mui-switch:checked {
    border-color: #64bd63;
    box-shadow: #64bd63 0 0 0 16px inset;
    background-color: #64bd63
}

.mui-switch:checked:before {
    left: 24px
}

.mui-switch.mui-switch-animbg {
    transition: background-color ease .4s
}

.mui-switch.mui-switch-animbg:before {
    transition: left .3s
}

.mui-switch.mui-switch-animbg:checked {
    box-shadow: #dfdfdf 0 0 0 0 inset;
    background-color: #64bd63;
    transition: border-color .4s, background-color ease .4s
}

.mui-switch.mui-switch-animbg:checked:before {
    transition: left .3s
}

.mui-switch.mui-switch-anim {
    transition: border cubic-bezier(0, 0, 0, 1) .4s, box-shadow cubic-bezier(0, 0, 0, 1) .4s
}

.mui-switch.mui-switch-anim:before {
    transition: left .3s
}

.mui-switch.mui-switch-anim:checked {
    box-shadow: #64bd63 0 0 0 16px inset;
    background-color: #64bd63;
    transition: border ease .4s, box-shadow ease .4s, background-color ease 1.2s
}

.mui-switch.mui-switch-anim:checked:before {
    transition: left .3s
}

.b-attr-list :after {}

.b-attr-list .btn-type-set {
    float: right;
    width: 26%;
    height: 24px;
    background: #e8e8e8;
    color: #b2b2b2;
    text-align: center;
}

.key_name {
    color: #CCC;
    border-bottom: 1px solid #e2e2e2;
    line-height: 2.4rem;
    margin: 0 0 10px;
    width: 100%;
}

.key-type-list {
    width: 100%;
    padding: 1rem 0;
    line-height: 2.4rem;
    overflow: hidden;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
}

.btn-add-product,
.btn-edit-product {
    height: 45px;
    line-height: 45px;
    background-color: #00a7e4;
    color: #fff;
    border: none;
    width: 100%;
}

.autoMain {
    margin: 3.2rem 0;
    padding: 0 2%;
}

.authWay {
    font-size: 1.6rem;
}

.authWay input {
    line-height: 2rem;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    line-height: 3rem;
    padding: 0 1rem 0 1rem;
    margin: 0.5rem 0;
}

.authWay .btn {
    background: #00a7e4;
    line-height: 45px;
    height: 45px;
    margin: 0.5rem 0;
    text-align: center;
    font-size: 1.0rem;
}

.authWay .btn a {
    display: block;
    color: #fff;
}

.authWay .btn a:link {
    background: #00a7e4;
}

.authWay .btn a:hover {
    background: #26bef6;
}

.settingMob-title {
    text-align: center;
    margin: 36px 0;
}

.btn-center-link {
    text-align: center;
    display: block;
}

.findpwd-body .errMsg {
    color: #f00;
    line-height: 18px;
    height: 20px;
}

.btnBlue {
    width: 100%;
    margin: 1rem 0;
}

.btnBlue button {
    width: 100%;
    height: 2.6rem;
    background: #00a7e4;
    border: none;
    color: #fff;
    padding: 0;
}

#btnSend.disabled {
    color: #666;
    background: #cbcbcb;
    cursor: default;
    pointer-events: none;
}

.mail_success {
    margin: 3rem 2%;
    text-align: center;
}

i.icon-loginright {
    margin: 3rem auto;
    display: block;
    width: 160px;
    height: 160px;
    background-image: url('../images/icon_success.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
}

a.a_underline {
    color: #00a0e9;
}


/**/

#date-list {
    width: 100%;
    margin: 0 0 10px 0;
}

#contentop {
    display: block;
    background: #fff;
    color: #333;
    padding: 2%;
    overflow: hidden;
}

#contentop ul {
    overflow: hidden;
    border-bottom: 1px solid #e8e8e8;
}

#contentop ul li {
    float: left;
    margin: 2% 0;
    font-size: 0.75rem;
    overflow: hidden;
}

#contentbottom {
    text-align: center;
    margin-top: 20px;
    color: gray;
    display: none;
}


/* 日志信息 */

.log-show {
    margin: 60px 0 80px;
    padding: 0 2%;
    overflow: hidden;
}

.log-tab {
    margin: 10px 0 0;
    overflow: hidden;
    text-align: center;
    background: #e8e8e8;
    color: #000;
}

.log-tab ul li {
    width: 50%;
    float: left;
    line-height: 45px;
}

.log-tab li.action {
    /*border-bottom: 3px solid #00a0e9;*/
    height: 45px;
    background: #fff;
}

.syslog-list .log-time {
    width: 15%
}

.syslog-list .log-name {
    width: 30%
}

.syslog-list .log-type {
    width: 10%
}

.syslog-list .log-id {
    width: 10%
}

.syslog-list .log-content {
    width: 35%
}


/* 推送信息 */

.message-push-list {}

.message-push-list .not-record {
    margin: 2% 0;
    padding: 2%;
    text-align: center;
}

.msg-list-body {
    margin: 0 0 2% 0;
    background: #fff;
    color: #000;
    padding: 2%;
}

.msg-list-body .msg-time {
    font-size: 1.6rem;
}

.msg-list-body .msg-source {
    margin: 0 0 10px;
    font-size: 0.75rem;
}

.msg-list-body .msg-source span {
    margin: 0 10px 0 0;
}

.msg-list-body .msg-con {
    display: flex;
}

.msg-list-body .msg-con div {
    flex: 1;
    text-align: center;
    height: 3rem;
    line-height: 3rem;
    background: #e8e8e8;
    margin: 0.1rem;
}

.msg-list-body .msg-foot {
    font-size: 0.75rem;
    border-top: 1px solid #e8e8e8;
    margin: 0.5rem 0 0;
    padding: 0.3rem 0 0;
    text-align: right;
}

.message-list .msg-area {
    width: 20%;
}

.message-list .msg-keyname {
    width: 20%;
}


/* 设备备份与恢复 */

.btn-backup-bottom {
    position: fixed;
    width: 100%;
    height: 48px;
    line-height: 48px;
    bottom: 0;
    background: #00a0e9;
    text-align: center;
    color: #fff;
}

.btn-backup-bottom a {
    display: block;
    color: #fff;
}

.layui-form-item {
    color: #fff;
    background: #373b47;
}

.backup-from,
.backup-list {}

.backup-from {
    height: 30vh;
}

.backup-layout h3,
.backup-layout p {
    padding: 0 1rem;
}

.backup-layout h3 {
    margin: 1.2rem 0;
}

.backup-area-title {
    margin: 1.6rem 1rem 0.4rem;
    font-weight: 600;
}

.backup-area-title .layui-form-checkbox[lay-skin=primary] span {
    color: #b2b2b2;
}

select {
    background: url(../images/icon_select_arrow.png) calc(100% - 10px) 50% / 10px 10px no-repeat #373b47;
    border-radius: 0px;
    color: white;
    border: 1px solid #fff;
}

.backup-layout p {
    font-size: 0.4rem;
    margin: 0.6rem 0 1.2rem;
}

.layui-form-checkbox,
.layui-form-select dl dd.layui-disabled {
    background-color: #373b47;
}

.layui-form-radio:hover *,
.layui-form-radioed,
.layui-form-radioed>i {
    color: #ffffff;
}

.layui-input,
.layui-select,
.layui-textarea {
    background-color: #373b47;
    color: rgb(255 255 255);
}

.layui-form-onswitch {
    border-color: #00a7e4;
    background-color: #00a7e4;
}

.layui-form-select dl {
    border: 1px solid #737475;
    background-color: #373b47;
}

.backup-list ul li {
    height: 76px;
    background: #373b47;
    margin-top: 1px;
    padding: 0 1.2rem;
}

.backup-list .right {
    float: right;
    display: table;
}

.backup-list .right>span {
    display: table-cell;
    vertical-align: middle;
    height: 76px;
    margin: 0 0 0 8px;
}

.backup-list .data-select {
    float: left;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.backup-list .data-item {
    float: left;
    display: table;
}

.backup-list .data-item .data-img {
    display: table-cell;
    vertical-align: middle;
}

.backup-list .data-item i {
    display: inline-block;
    width: 2.8rem;
    height: 2.8rem;
    background-position: center;
    background-size: 160% 160%;
    float: left;
    margin: 0 8px 0 0;
}

.backup-list .title {
    height: 76px;
    display: table-cell;
    vertical-align: middle;
}

.backup-list .title .backup-name {
    display: inline-block;
    font-size: 18px;
    vertical-align: middle;
}

.backup-list .title .backup-name svg {}

.backup-list .title .tip {
    font-size: 12px;
}

.backup-list .backup-op {
    float: right;
    line-height: 76px;
}

.backup-op a {
    padding: 0.2rem 0.4rem;
    font-size: 14px;
    border-radius: 0.4rem;
    margin: 0 0 0 0.4rem;
    color: #fff;
}

.backup-op .btn-recovery,
.backup-op .btn-g-recovery {
    background: #7cda3e;
}

.backup-op .btn-backup {
    background: #00a0e9;
}

.backup-op .btn-detail {
    background: #23c6c8;
}

.backup-layout .backup-btn-op {
    margin: 1.2rem 0.2rem 0;
}

.backup-device-list ul li {
    padding: 1rem;
    margin: 1px 0;
    background: #373b47;
}

.backup-select-point {
    padding: 1rem;
    background: #373b47;
}

.backup-select-point .info-title {
    margin: 0 0 1rem 0;
}

.backup-select-point .layui-form-item {
    margin: 0;
}

.layui-form-checkbox[lay-skin=primary] i {
    width: 14px;
    height: 14px;
}

.layui-form-checkbox[lay-skin=primary] span {
    color: #fff;
}


/* 喜爱按键 */

.likeType-list {
    height: calc(100vh - 48px);
    background: #f8f8f8;
    color: #666;
}

.icon-like {
    width: 48px;
    height: 48px;
    float: left;
    display: inline-block;
    background: url('../images/icon_btn_like.png') no-repeat;
    background-size: 100% auto;
}

.icon-like.on {
    background-position: 0 -48px;
}


/* 红外配对 */

.header-bar .upload:after {
    content: '';
    width: 48px;
    height: 48px;
    display: inline-block;
    background: url(../images/icon.png) -494px -58px no-repeat;
}

.header-bar .con_up_off:after {
    content: '';
    width: 35px;
    height: 35px;
    display: inline-block;
    background-image: url(../images/con_up_off.png);
    background-position: center;
    background-size: 30px;
    margin: 6px;
    background-repeat: no-repeat;
}

.from-list {
    margin: 16px 0 0;
}


/* 智能门锁 */

#smart-door {
    margin: 20px 2%;
    overflow: hidden;
}

.door-body {
    background: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    margin: 3% 0;
}

.door-body .door-head {
    margin: 3%;
}

.door-body .door-img {
    width: 80px;
    height: 150px;
    margin: 10px auto;
    position: relative;
}

.door-status {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
}

.door-alarm {
    position: absolute;
    top: 30px;
    right: 4px;
    width: 24px;
    height: 24px;
}

.door-status i,
.door-alarm i {
    display: block;
    height: 100%;
}

.door-status .dlOn {
    background: url('../images/icon_door_on.png') no-repeat;
    ;
    background-size: 100% 100%;
}

.door-status .dlOff {
    background: url('../images/icon_door_off.png') no-repeat;
    ;
    background-size: 100% 100%;
}

.door-alarm .dlAlarm {
    background: url('../images/icon_door_alarm.png') no-repeat;
    ;
    background-size: 100% 100%;
}

.door-body .Void {
    background: url('../images/door_void.png') no-repeat;
    background-size: 100% 100%;
}

.door-body .On {
    background: url('../images/door_on.png') no-repeat;
    background-size: 100% 100%;
}

.door-body .Off {
    background: url('../images/door_off.png') no-repeat;
    background-size: 100% 100%;
}

.door-body .door-name {}

.door-body .door-control {
    line-height: 48px;
    overflow: hidden;
    display: -webkit-box;
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    width: 100%;
}

.door-body .door-control span {
    width: 33.333%;
    float: left;
    background: #fff;
    color: #666;
    text-align: center;
    cursor: pointer;
}

.door-body .door-control span:nth-child(2) {
    border-left: 1px solid #666;
    border-right: 1px solid #666;
}

.door-add-body,
.bind-add-body {
    margin: 30px 0 0;
    overflow: hidden;
    padding: 0 2%;
}

.door-add-f,
.bind-add-f {
    overflow: hidden;
    display: -webkit-box;
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    width: 100%;
}

.door-add-from,
.bind-add-from {
    line-height: 3em;
}

.door-add-from .pf {
    width: 30%;
}

.door-add-from .spe {
    width: 5%;
    display: inline-block;
    text-align: center;
}

.door-add-from .door-input-sn {
    width: 65%;
}

.bind-add-from .in-bind {
    width: 100%;
    line-height: 3em;
}

.createBtn {
    width: 100%;
    background: #00d200;
    color: #fff;
    display: block;
    line-height: 38px;
    text-align: center;
    margin: 10px 0;
}

.panel_name {
    overflow: hidden;
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
    color: #fff;
}

.device-update {
    margin: 3em 0;
    text-align: center;
}

.device-update div {
    margin: 0 1%;
}

.btnDevUpdate {
    /* background: #004664;
    color: #00a0e9;
    line-height: 32px;
    width: 100px;
    display: inline-block;
    border-radius: 16px;
    cursor: pointer; */
}

.btnDevState {}

.btnDevRefresh {}

.device-update span {
    float: left;
    margin: 0 12px 0 4px;
}

.btnDevAdd {}

.btnDevDaliSonUpdate {
    /* background: #004664;
    color: #00a0e9;
    line-height: 32px;
    display: inline-block;
    border-radius: 16px;
    cursor: pointer; */
}

.btnDevUpdate:before {
    content: '';
    width: 36px;
    height: 36px;
    background: url('../images/icon_refresh.png') center / 120% no-repeat #373b47;
    background-blend-mode: lighten;
    display: inline-block;
    float: right;
    margin: 1px;
    border-radius: 2px;
}

.btnDevState:before {
    content: '';
    width: 36px;
    height: 36px;
    background: url('../images/icon_device_state.png') center / 120% no-repeat #373b47;
    background-blend-mode: lighten;
    display: inline-block;
    float: right;
    margin: 1px;
    border-radius: 2px;
}

.btnDevAdd:before {
    content: '';
    width: 36px;
    height: 36px;
    background: url('../images/icon_devadd.png') center / 120% no-repeat #373b47;
    background-blend-mode: lighten;
    display: inline-block;
    float: right;
    margin: 1px;
    border-radius: 2px;
}

.btnDevRefresh:before {
    content: '';
    width: 36px;
    height: 36px;
    background: url('../images/icon_refresh_state.png') center / 120% no-repeat #373b47;
    background-blend-mode: lighten;
    display: inline-block;
    float: right;
    margin: 1px;
    border-radius: 2px;
}

.btnDevDaliSonUpdate:before {
    content: '';
    width: 57px;
    height: 36px;
    background: url('../images/icon_refresh_dali.png') center / 120% no-repeat #373b47;
    background-blend-mode: lighten;
    display: inline-block;
    float: right;
    margin: 1px;
    border-radius: 2px;
}

.btnDevFloatingPage:before {
    content: '';
    width: 36px;
    height: 36px;
    background: url('../images/icon_floating_page.png') center / 120% no-repeat #373b47;
    background-blend-mode: lighten;
    display: inline-block;
    float: right;
    margin: 1px;
    border-radius: 2px;
}

.device-info {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.device-info-item {
    background: #373b47;
    color: #fff;
    padding: 10px;
    margin: 2px 0 0 2px;
    line-height: 28px;
    width: calc(50% - 1px);
    text-align: center;
    overflow: hidden;
}

.device-info-item:nth-child(2n+1) {
    margin-left: 0;
}

.device-info-item .title {
    color: #999;
}

.device-info-item .content {
    font-size: 18px;
    line-height: 32px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#sceneSetTitle {
    font-size: 18px;
    text-align: center;
    margin: 30px auto;
}

#sceneSet {
    font-size: 14px;
}

.sceneCmdState {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    background: #353535;
}

.sceneSetFun {
    font-size: 14px;
    display: flex;
}

.sceneSetFun div {
    flex: 1;
    line-height: 1rem;
    text-align: center;
}

.sceneSetFun a {
    color: #fff;
}

.sceneSetBtn {
    background: #5d5d5d;
}

.sceneSetBtn:nth-child(even) {
    margin: 0 1px;
}

.sceneLoadDeviceLayer {
    background-color: black;
}

.sceneAreaName {
    line-height: 0.8rem;
    text-align: center;
    background: rgba(255, 255, 255, .3);
    border-bottom: 1px solid #353535;
    font-size: 14px;
}

.areaDeviceLayer {
    overflow: hidden;
}

.displayDevice {
    overflow: hidden;
    margin: 0.2rem 0;
}

.displayDevice .sceneDevList {
    overflow: hidden;
}

.activeHide {
    height: 0;
    margin: 0;
}

.aui-login-box {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 120px 0 0;
    color: #585858;
    overflow: hidden;
    font-size: 16px;
}

.aui-login-form-item {
    display: flex;
    margin: 20px auto;
    position: relative;
    text-align: justify;
    margin: 10px 20px;
    position: relative;
}

.aui-login-form-item input {
    flex: 1;
    width: calc(100% - 10px);
    height: 40px;
    padding: 10px 4px;
    float: left;
    box-sizing: border-box;
    outline: 0;
    background: #f8f8f8;
    border: 2px solid #ebebeb;
}

.aui-login-form-item .input-body {
    display: flex;
    width: 100%;
}

.aui-login-form-item .input-body input {
    flex: 1;
}

.aui-login-form-item .input-body .verify {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 30px;
    color: #00a0e9;
    background: #ccf2ff;
    line-height: 30px;
    text-align: center;
    padding: 0 6px;
    cursor: pointer;
}

.aui-login-form-item .aui-btn-login {
    width: 100%;
    height: 42px;
    outline: 0;
    border: 0;
    background: #00a0e9;
    color: #fff;
    cursor: pointer;
    text-align: center;
}

.backup-main {
    margin: 60px 0 80px;
    overflow: hidden;
}

.backup-main .dev-gateway {
    background: #57565b;
    position: relative;
    color: #fff;
    padding: 0.6rem;
}

.backup-main .dev-gateway .con-lt {}

.backup-main .dev-gateway .con-rt {}

.dev-gateway i {
    width: 86px;
    height: 86px;
    display: inline-block;
}

.dev-gateway i.icon-router-online {
    background: url('../images/icon_router_online.png') no-repeat;
    background-size: 100% 100%;
}

.dev-gateway .gateway-info {
    display: table;
    margin-bottom: 0.2rem;
}

.dev-gateway .gateway-info .gateway-msg {
    display: table-cell;
    vertical-align: middle;
}

.dev-gateway .gateway-info .gateway-msg>div {
    margin: 0 0 0 1rem;
}

.dev-gateway .gateway-info .gateway-msg .router-name {
    font-weight: 600;
}

.dev-gateway .gateway-info .gateway-msg .tip {
    margin-top: 0.6rem;
    color: #969696;
}

.dev-gateway .gateway-control {
    display: flex;
}

.dev-gateway .gateway-control a {
    flex: 1;
    text-align: center;
    height: 3rem;
    line-height: 3rem;
}

.dev-gateway .gateway-control a:nth-child(even) {
    margin-left: 1px;
}

.dev-gateway .gateway-control a:nth-child(odd) {
    margin-right: 1px;
}

.dev-gateway .gateway-control .btn-backup {
    background: #00a0e9;
}

.dev-gateway .gateway-control .btn-restore {
    background: #7cda3e;
}

.backup-main .device-list {
    margin: 0.6rem;
}

.backup-main .device-list .item {
    margin-bottom: 1px;
    height: 3.6rem;
    width: 100%;
    display: table;
}

.backup-main .device-list .item>div {
    display: table-cell;
    vertical-align: middle;
}

.backup-main .device-list .item .device-info {
    display: table;
}

.backup-main .device-list .item i {
    display: inline-block;
    width: 2.8rem;
    height: 2.8rem;
    background-position: center;
    background-size: 160% 160%;
    float: left;
}

.backup-main .device-list .item .device-title {
    display: table-cell;
    vertical-align: middle;
    padding-left: 0.6rem;
    overflow: hidden;
    white-space: nowrap;
}

.backup-main .device-list .item .device-title span {
    color: #969696;
    font-size: 14px;
    margin-left: 0.4rem;
}

.backup-main .device-list .item .con-lt {}

.backup-main .device-list .item .con-rt {
    text-align: right;
    font-size: 12px;
}


/*窗帘行程*/

.base-track {
    line-height: 36px;
}

.set-track-list {
    display: flex;
    margin: 20px 0;
}

.set-track-list .track-title {
    flex: 1;
}

.track-switch {
    width: 136px;
    text-align: right;
    box-sizing: border-box;
    display: flex;
    justify-content: right;
    align-items: center;
}

.from-base-track {
    /*margin-top:60px;*/
}

.trackTime {
    width: 100%;
    height: 36px;
    text-align: center;
}

.track-from .save {
    text-align: center;
}

.adv-setting {
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #666;
}

.adv-setting .link {
    text-align: center;
    display: block;
    width: 100%;
    height: 45px;
    line-height: 45px;
    color: #fff;
    background: #686868;
}

.adv-track {
    text-align: center;
}

.box-time {
    font-size: 4em;
    text-align: center;
    overflow: hidden;
}

.box-time .fb-time {
    display: inline-block;
}

.box-time .fb-time span {
    margin: 0 2px;
}

.adv-track-btn {
    margin: 32px 0 0;
    overflow: hidden;
}

.adv-track-btn button {
    width: 64px;
    height: 64px;
    border-radius: 32px;
    line-height: 64px;
    margin: 0 2.4em;
    background: #034e70;
    color: #00a0e9;
    text-align: center;
    border: 0;
    outline: none;
    cursor: pointer;
}

.adv-track-btn button.disable {
    background: #383838;
    color: #999;
}

.track-step {
    margin: 60px 0 0;
    text-align: left;
}

.track-step ul li {
    line-height: 32px;
    margin: 10px 0 0;
}

.area-sort-items {}

ul.area-sort-items li {
    background: rgba(87, 86, 91, 0.9);
    margin: 2px 0 0;
    overflow: hidden;
    position: relative;
}

.area-sort-items .area-item-name {
    padding: 28px 14px;
    line-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.area-sort-items .area-list-name {
    padding: 0;
    flex: 1;
}

.area-sort-items .orderCtrl {
    display: inline-block;
}

.area-sort-items .orderCtrl a {
    margin: 0 0 0 10px;
}

.area-item-name .orderCtrl .up {
    background: url('../images/icon_order.png?v1') -72px 0 no-repeat;
    background-size: cover;
}

.area-item-name .orderCtrl .down {
    background: url('../images/icon_order.png?v1') -96px 0 no-repeat;
    background-size: cover;
}

.dev-body .con {
    display: none;
}

.orderCtrl {
    opacity: 1;
    transition: all 1s linear;
}

.orderCtrl a {
    cursor: pointer;
    display: inline-block;
    width: 24px;
    height: 24px;
    float: left;
    margin: 0 10px 0 0;
}

.orderCtrl .up {
    background: url('../images/icon_order.png?v1') 0 0 no-repeat;
    background-size: cover;
}

.orderCtrl .down {
    background: url('../images/icon_order.png?v1') -24px 0 no-repeat;
    background-size: cover;
}

.orderCtrl .top {
    background: url('../images/icon_order.png?v1') -48px 0 no-repeat;
    background-size: cover;
}

.user-bind-item {
    overflow: hidden;
}

.user-bind-item li {
    margin: 6px 10px;
    background: #686868;
    color: #fff;
    text-align: center;
    line-height: 60px;
}

.user-bind-item li a {
    display: block;
}

.backup-type-item {
    overflow: hidden;
}

.backup-type-item ul {
    display: flex;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    background: #383838;
}

.backup-type-item li {
    flex: 1;
}

.backup-type-item li.selected {
    background: #00a0e9;
}

.backup-type-list .backup-item {
    display: none;
}

.backup-type-list .backup-item.show {
    display: block;
}

.running {
    display: inline-block;
    position: relative;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    margin: 0 0 0 0.2rem;
    background: url('../images/icon_run_update.png') center / 100% no-repeat;
    animation: rot 1s linear infinite;
}


/* 切换设备ID界面 */

.select-exchange-layout {
    width: 100%;
    display: flex;
    margin: 0 0 2.4rem;
}

.select-exchange-layout .original-dev,
.select-exchange-layout .exchange-dev {
    flex: 1;
    text-align: center;
}

.select-exchange-layout .exchange {
    width: 20%;
}

.select-exchange-layout .icon-original-type,
.select-exchange-layout .icon-exchange-type {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-size: 120%;
    background-position: center;
}

.select-exchange-layout .icon-exchange {
    width: 2.4rem;
    height: 2.4rem;
    margin: 2.6rem auto 0;
    background: url('../images/icon_exchange_dev.png') center/cover no-repeat;
}

.select-exchange-layout .original-title,
.select-exchange-layout .exchange-title {
    line-height: 40px;
}

.originalID {
    background: #302e32;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    width: 80%;
    margin: 0 auto;
}

#exdid {
    width: 80%;
}


/*风格切换样式*/

#styleSheet {
    position: absolute;
    top: 0;
    left: 48px;
}

.theme-curr {
    font-size: 0;
    overflow: hidden;
    padding: 0 10px;
    width: 48px;
    height: 48px;
}

.theme-curr.this {
    background: #fff;
}

#styleSheet a {
    width: 14px;
    height: 14px;
    display: inline-block;
}

#styleSheet i {
    width: 14px;
    height: 14px;
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.theme-select {
    position: absolute;
    background: #fff;
    width: 80px;
    padding: 4px;
    display: none;
}

.theme-select.this {
    display: block;
}

.theme-select ul {
    overflow: hidden;
}

.theme-select ul li {
    float: left;
    margin: 4px;
    line-height: 100%;
}

#styleSheet .default {
    background: #302e32;
    border: 1px solid #999;
}

#styleSheet .red {
    background: #b70000;
    border: 1px solid #edad00;
}


/*弹出层样式*/

.loading {
    position: fixed;
    width: 150px;
    height: 30px;
    left: 50%;
    top: 45%;
    margin-left: -70px;
    margin-top: 10px;
    background-color: #eee;
    box-shadow: 2px 2px 4px #ccc;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    color: #000;
    display: none;
}


/* colorPicker */

.pickerStyle {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
}

.pickerStyle .IroWheel {
    margin: 0 auto;
}

@keyframes rot {
    0% {
        -webkit-transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(90deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(270deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}


/* 红色渐变 */

@-webkit-keyframes redPulse {
    from {
        background-color: #aa0000;
        /* -webkit-box-shadow: 0 0 9px #aa0000; */
    }
    50% {
        background-color: #ff0000;
        /* -webkit-box-shadow: 0 0 18px #ff0000; */
    }
    to {
        background-color: #aa0000;
        /* -webkit-box-shadow: 0 0 9px #aa0000; */
    }
}


/*黄色渐变*/

@-webkit-keyframes yellowPulse {
    from {
        background-color: #aaaa00;
        /* -webkit-box-shadow: 0 0 9px #aaaa00; */
    }
    50% {
        background-color: #ffff00;
        /* -webkit-box-shadow: 0 0 18px #ffff00; */
    }
    to {
        background-color: #aaaa00;
        /* -webkit-box-shadow: 0 0 9px #aaaa00; */
    }
}


/*绿色渐变*/

@-webkit-keyframes greenPulse {
    from {
        background-color: #00aa00;
        /* -webkit-box-shadow: 0 0 9px #00aa00; */
    }
    50% {
        background-color: #00ff00;
        /* -webkit-box-shadow: 0 0 18px #00ff00; */
    }
    to {
        background-color: #00aa00;
        /* -webkit-box-shadow: 0 0 9px #00aa00; */
    }
}


/*青色渐变*/

@-webkit-keyframes cyanPulse {
    from {
        background-color: #00aaaa;
        /* -webkit-box-shadow: 0 0 9px #00aaaa; */
    }
    50% {
        background-color: #00ffff;
        /* -webkit-box-shadow: 0 0 18px #00ffff; */
    }
    to {
        background-color: #00aaaa;
        /* -webkit-box-shadow: 0 0 9px #00aaaa; */
    }
}


/*蓝色渐变*/

@-webkit-keyframes bluePulse {
    from {
        background-color: #0000aa;
        /* -webkit-box-shadow: 0 0 9px #0000aa; */
    }
    50% {
        background-color: #0000ff;
        /* -webkit-box-shadow: 0 0 18px #0000ff; */
    }
    to {
        background-color: #0000aa;
        /* -webkit-box-shadow: 0 0 9px #0000aa; */
    }
}


/*紫色渐变*/

@-webkit-keyframes purplePulse {
    from {
        background-color: #aa00aa;
        /* -webkit-box-shadow: 0 0 9px #aa00aa; */
    }
    50% {
        background-color: #ff00ff;
        /* -webkit-box-shadow: 0 0 18px #ff00ff; */
    }
    to {
        background-color: #aa00aa;
        /* -webkit-box-shadow: 0 0 9px #aa00aa; */
    }
}

.key_click {
    -webkit-animation: cyanPulse 1s infinite ease-in-out
}

.keyColor {
    background: white;
    color: black;
}

.van-popup,
.van-calendar {
    background-color: #000 !important;
}

.van-calendar__header {
    box-shadow: 0 2px 10px #525252 !important;
}

.date-btn {
    background-color: #373b47!important;
    border-color: #373b47!important;
}

.video-list-div-item {
    background-color: #57565B !important;
}

.video-list-div-item.active {
    background-color: #5778ef !important
}

body .camera-class .layui-layer-title {
    background: #666666;
    color: white;
}

.select2-container--default .select2-selection--single {
    border: 0px solid #373737;
}

.select2-container--default .select2-selection--single {
    border: 0px solid #000;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #bbb;
}

.wrapper03 {
    border-bottom: 1px solid #ccc
}

.wrapper03 .scroller li {
    color: #aaa;
}

.wrapper03 .scroller li a {
    color: #aaa;
}

.wrapper03 .scroller li.cur a {
    color: #fff;
    border-bottom: .1rem solid #fff
}

.layui-btn-primary:hover {
    border-color: #aaa;
}

.layui-menu li {
    color: rgb(255 255 255 / 80%);
}

.layui-btn-primary {
    color: #fff;
}

.layui-menu-body-title a {
    color: rgb(255 255 255 / 80%);
}

.page-top-wrap {
    background: #000;
    color: #fff;
}

#header-list-body .hl_header {
    color: gray;
}

.layui-menu {
    background-color: #333;
}

.layui-panel {
    background-color: #333;
}

.page-top-gateway {
    color: #aaa;
}

.mui-switch:before {
    background-color: #57565b;
}

.mui-switch.mui-switch-anim:checked {
    box-shadow: #00a0e9 0 0 0 16px inset;
    background-color: #00a0e9;
}

.mui-switch:checked {
    border-color: #00a0e9;
}

.layui-menu li:hover {
    background-color: #7f7f7f;
}

.layui-nav {
    background-color: #000;
}

.layui-nav .layui-this:after,
.layui-nav-bar {
    background-color: #898989;
}


/* 
.layui-nav-like.on,
.layui-nav-gateway.on {
    color: #ccc;
    background: #333;
}

.layui-nav-like.off,
.layui-nav-gateway.off {
    color: #999;
    background: #454545;
} */

.layui-nav-like.on {
    color: #eee;
    background: #4b4b4b;
}

.layui-nav-gateway.on {
    color: #eee;
    background: #57565b;
}

.layui-nav-like.off {
    color: #999;
    background: #444;
}

.layui-nav-gateway.off {
    color: #999;
    background: #444;
}

.layui-nav-gateway,
.layui-nav-like {
    width: 50%;
}

.layui-nav-like.on:before,
.layui-nav-gateway.on:before,
.layui-nav-like.off:before,
.layui-nav-gateway.off:before {
    content: '';
    width: 36px;
    height: 36px;
    background-blend-mode: lighten;
    display: inline-block;
    float: left;
    margin: 1px;
    border-radius: 2px;
    margin: 10px -35px 0px 5px;
}

.layui-nav-like.on:before {
    background: url('../images/home-nav-like.png') no-repeat;
}

.layui-nav-gateway.on:before {
    background: url('../images/home-nav-gateway.png') no-repeat;
}

.layui-nav-like.off:before {
    background: url('../images/home-nav-like_gray.png') no-repeat;
}

.layui-nav-gateway.off:before {
    background: url('../images/home-nav-gateway_gray.png') no-repeat;
}

.home-dev-col.home-dev-like-title {
    background: #535353;
}

.home-col-list.like-item-all {
    background: #4b4b4b;
}

.home-dev-like-title .icon-menu:before {
    height: 14px;
    background: url(../images/home-nav-like.png) left 50% / 18px 18px no-repeat;
}

.home-dev-like-title .icon-menu::after {
    height: 0px;
    background: none;
}

.like-null {
    padding: 0px;
    width: 100%;
    height: 50px;
}

.like-null li {
    margin-top: 3px;
    position: absolute;
    width: 100%;
    padding: 20px;
    background: url(../images/like_item_ico.png) center 50% / 18px 18px no-repeat;
}


/*喜爱添加*/

xm-select {
    background-color: #373b47 !important;
    border: 1px solid #ffffff !important;
}

xm-select>.xm-body {
    border: 1px solid #ffffff !important;
    background-color: #373b47 !important;
}

xm-select>.xm-body .xm-option-icon {
    border: 1px solid #000 !important;
}

xm-select>.xm-body .xm-option-content {
    color: #fff !important;
}

.xm-option.selected {
    background-color: #787e8f;
}

xm-select .xm-label .xm-label-block {
    background-color: rgb(98 98 98)!important;
}

.layui-form-select dl {
    background-color: #373b47;
    color: white;
}

.layui-form-select dl dd.layui-this {
    background-color: #b5b5b5;
    color: black;
}

.layui-form-select dl dd.layui-select-tips {
    color: #ddd;
}

xm-select>.xm-body .xm-toolbar .toolbar-tag {
    color: #ddd !important;
}

.layui-layer-dialog .layui-layer-padding {
    color: black;
}

.like-null li {
    /* border: 2px #6b6b6b dashed; */
}

.like-null {
    background: #4b4b4b;
    border-top: 1px black solid;
}

.layui-row .all-open-pic,
.layui-row .all-close-pic,
.layui-row .all-light-open-pic,
.layui-row .all-light-close-pic,
.layui-row .all-curtain-open-pic,
.layui-row .all-curtain-stop-pic,
.layui-row .all-curtain-close-pic {
    height: 90px;
    width: auto;
    display: block;
}

.layui-row .all-open.on,
.layui-row .all-close.on,
.layui-row .all-light-open.on,
.layui-row .all-light-close.on,
.layui-row .all-curtain-open.on,
.layui-row .all-curtain-stop.on,
.layui-row .all-curtain-close.on {
    background-color: #077fb7;
}

.layui-row .all-open.off,
.layui-row .all-close.off,
.layui-row .all-light-open.off,
.layui-row .all-light-close.off,
.layui-row .all-curtain-open.off,
.layui-row .all-curtain-stop.off,
.layui-row .all-curtain-close.off {
    background-color: #4b4b4b;
}

.layui-row .all-open-pic.on {
    background: url(../images/all_open.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-open-pic.off,
.layui-row .all-close-pic.off,
.layui-row .all-close-pic.on {
    background: url(../images/all_close.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-light-open-pic.on {
    background: url(../images/all_light_open.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-light-close-pic.on,
.layui-row .all-light-open-pic.off,
.layui-row .all-light-close-pic.off {
    background: url(../images/all_light_close.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-curtain-open-pic.on,
.layui-row .all-curtain-open-pic.on {
    background: url(../images/all_curtain_open_open.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-curtain-open-pic.off,
.layui-row .all-curtain-open-pic.off {
    background: url(../images/all_curtain_open_close.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-curtain-stop-pic.on,
.layui-row .all-curtain-stop-pic.on {
    background: url(../images/all_curtain_stop_open.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-curtain-stop-pic.off,
.layui-row .all-curtain-stop-pic.off {
    background: url(../images/all_curtain_stop_close.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-curtain-close-pic.on,
.layui-row .all-curtain-close-pic.on {
    background: url(../images/all_curtain_close_open.png) bottom / 70px 70px no-repeat;
}

.layui-row .all-curtain-close-pic.off,
.layui-row .all-curtain-close-pic.off {
    background: url(../images/all_curtain_close_close.png) bottom / 70px 70px no-repeat;
}


/*所有设备展示*/

.all-show {
    height: 50%;
    width: 100%;
    float: left;
}

.all-show .as-left {
    width: 30px;
}

.all-show .as-right {
    width: 58%;
}

.all-show .as-left,
.all-show .as-right {
    display: block;
    height: 50%;
    float: left;
    margin: 20% 0%;
}

.all-show .as-right.light-on,
.all-show .as-right.light-off,
.all-show .as-right.dimmer-on,
.all-show .as-right.dimmer-off,
.all-show .as-right.curtain-on,
.all-show .as-right.curtain-off {
    /* border-right: gray 1px solid; */
}

.all-show .as-left {
    background: url(../images/all_devices_show.png) center/200% no-repeat;
}

.all-show .as-left.light-on-pic {
    background-position: 7px -28px;
}

.all-show .as-left.light-off-pic {
    background-position: -27px -28px;
}

.all-show .as-left.dimmer-on-pic {
    background-position: 7px -87px;
}

.all-show .as-left.dimmer-off-pic {
    background-position: -27px -87px
}

.all-show .as-left.curtain-on-pic {
    background-position: 7px 2px;
}

.all-show .as-left.curtain-off-pic {
    background-position: -27px 2px
}

.all-show .as-left.temp-on-pic {
    background-position: 7px -57px;
}

.all-show .as-left.temp-off-pic {
    background-position: -27px -57px
}


/*所有设备设置*/

.all-dimmer {
    height: 90px;
    display: block;
    padding: 25px 15px 10px 15px;
}

.all-dimmer .layui-progress-bar {
    border-radius: 5px;
    background-color: #0583bc;
}

.all-dimmer .layui-progress-big,
.layui-progress-big .layui-progress-bar {
    height: 53px;
    line-height: 53px;
}

.all-dimmer .layui-progress {
    border-radius: 5px;
    background-color: #e2e2e2;
}

.bayui-btn {
    margin: 2spx;
    height: 118px;
    background: #4b4b4b;
}

.all-temp .all-temp-son {
    width: 15%;
    height: 100%;
    float: left;
}

.all-temp .all-temp-son.temp {
    width: 40%;
}

.all-temp .all-temp-mode,
.all-temp .all-temp-speed {
    margin: 25px 2px 5px 2px;
}

.all-temp .all-temp-mode,
.all-temp .all-temp-speed,
.all-temp .all-temp-onoff {
    border-radius: 5px;
    width: 28px;
    height: 28px;
    display: block;
}

.all-temp .all-temp-onoff {
    margin: 25px 2px 5px 41px;
}

.all-temp .all-temp-addsubtemp {
    margin: 25px 0px 5px 0px;
    border-radius: 5px;
    width: 132px;
    height: 28px;
    display: block;
}

.all-temp .all-temp-mode,
.all-temp .all-temp-speed {
    background: url(../images/con_mode_and_speed_white_b5.png) center/80% no-repeat;
}

.all-temp .all-temp-onoff.off {
    background: url(../images/con_power_off_b5.png) center/80% no-repeat;
}

.all-temp .all-temp-onoff.on {
    background: url(../images/con_power_off_b5_open.png) center/80% no-repeat;
}

.all-temp .all-temp-mode.off,
.all-temp .all-temp-speed.off,
.all-temp .all-temp-addsubtemp.off,
.all-temp .all-temp-onoff.off {
    border: #b5b5b5 3px solid;
}

.all-temp .all-temp-mode.off,
.all-temp .all-temp-addsubtemp.off {
    background: url(../images/con_mode_and_speed_white_b5.png) center/80% no-repeat;
}

.all-temp .all-temp-mode.on,
.all-temp .all-temp-speed.on,
.all-temp .all-temp-addsubtemp.on,
.all-temp .all-temp-onoff.on {
    border: #0583bc 3px solid;
}

.all-temp .all-temp-mode.on,
.all-temp .all-temp-speed.on,
.all-temp .all-temp-addsubtemp.on {
    background: url(../images/con_mode_and_speed_white_b5-open.png) center/80% no-repeat;
}

.all-temp .all-temp-mode.on,
.all-temp .all-temp-speed.on,
.all-temp .all-temp-addsubtemp.on,
.all-temp .all-temp-onoff.on {
    background-color: #0583bc;
}

.all-temp-addsubtemp .astemp-son {
    width: 33px;
    height: 100%;
    float: left;
}

.all-show .as-right,
.astemp-son.num1,
.astemp-son.num2 {
    /* margin-right: 4px; */
    font-family: wgsFont;
    font-size: 30px;
    text-align: center;
    align-items: center;
    display: grid;
}

.all-show .as-right {
    font-size: 32px;
    color: #e2e2e2;
}

.astemp-son.sub.off {
    background: url(../images/temp-sub.png) center/60% no-repeat;
}

.astemp-son.add.off {
    background: url(../images/temp-add.png) center/60% no-repeat;
}

.astemp-son.sub.on {
    background: url(../images/temp-sub-open.png) center/60% no-repeat;
}

.astemp-son.add.on {
    background: url(../images/temp-add-open.png) center/60% no-repeat;
}

.astemp-son.sub.on {
    border-right: #4b4b4b 4px solid;
}

.astemp-son.add.on {
    border-left: #4b4b4b 4px solid;
}

.astemp-son.num1.on {
    border-right: #4b4b4b 2px solid;
    color: #fff;
    line-height: 10px;
}

.astemp-son.num2.on {
    border-left: #4b4b4b 2px solid;
    color: #fff;
    line-height: 10px;
}

.astemp-son.sub.off {
    border-right: #b5b5b5 4px solid;
}

.astemp-son.add.off {
    border-left: #b5b5b5 4px solid;
}

.astemp-son.num1.off {
    border-right: #b5b5b5 2px solid;
    color: #b5b5b5;
}

.astemp-son.num2.off {
    border-left: #b5b5b5 2px solid;
    color: #b5b5b5;
}

.bayui-btn {
    margin: 2px;
    height: 118px;
    background: #4b4b4b;
}

.bayui-btn .layui-slider {
    background: #b5b5b5;
}

.layui-row .more .ico-more em,
.layui-row .more .ico-more:before,
.layui-row .more .ico-more:after {
    width: 3px;
    height: 3px;
    border-radius: 3px;
    background: #92a0a8;
    display: inline-block;
    content: "";
    vertical-align: middle;
}

.layui-row .more .ico-more em {
    margin: 0 0.03rem;
}

.layui-row .more {
    position: absolute;
    right: 10px;
    bottom: 5px;
}

.van-toast--loading {
    background-color: #424242!important;
}

.like-item-all .like-items {
    background: #373b47;
}

.tip {
    background: #f00;
}

.device-info-item .content {
    color: white;
}

.floating_page {
    color: #ffffff;
    background: #000000;
}

.floating_page .title {
    background: #575d70;
}

.content .yellow {
    color: #ffff00;
}

.content .lime {
    color: lime;
}

.form-input-control>input {
    width: 78%;
    line-height: 40px;
    font-size: 16px;
    padding: 0px 10px;
}

.form-list-line {
    display: block;
}

.form-input-control>input.ipt-mobcode {
    width: 60%;
    float: left;
}

.form-input-extra {
    float: left;
    width: 38%;
    height: 40px;
    line-height: 40px;
    margin-top: 5px;
    padding: 2px 12px;
}

.layui-input-inline {
    width: 20%;
}

.layui-input-inline>select {
    background: none;
    border-radius: 2px;
    color: #666;
    border: 1px solid #666;
    font-size: 16px;
    height: 44px;
}

.j-ipt-mobcode {
    margin-top: 5px;
}

.limits_auth_edit,
.user_edit {
    width: 70px;
    height: 25px;
    padding: 3px 5px;
    background: #2b2a2a;
    border-radius: 3px;
}

.limits_auth_edit>a,
.user_edit>a {
    color: white;
}

.limits_auth_edit {
    margin-top: 15px;
}

.setting-list ul {
    border-top: 0px solid #f5f5f5;
    border-bottom: 0px solid #f5f5f5;
    background: #373b47;
}

.setting-list ul li a {
    color: #ffffff;
}

.hasSN_0 ul li {
    padding: 0 3%;
    height: auto;
    line-height: 30px;
    border-bottom: 1px solid #000;
    background: none;
    background-size: 0px;
}

.hasSN_0 ul {
    border-top: 0px solid #f5f5f5;
    border-bottom: 0px solid #f5f5f5;
    background: none;
}

.hasSN_0 ul li a {
    color: #ffffff;
}

.hasSN_0 ul li p {
    float: left;
}

.btnDevUpdate1 {
    color: yellow;
}

.dev_cfg_log {
    padding: 50px 0px;
}

.dev_cfg_log .cfg_line {
    line-height: 40px;
    display: block;
    background: #2b2b2b;
}

.dev_cfg_log .cfg_line span {
    padding: 0px 10px;
}

.dev_cfg_log .cfg_line .l_left,
.dev_cfg_log .cfg_line .l_right {
    float: left;
    background: #000000;
    padding: 0px 10px;
}

.dev_cfg_log .cfg_line .l_left {
    width: 30%;
}

.dev_cfg_log .cfg_line .l_right {
    width: 70%;
}

.layui-col-xs3.layui-col-sm3.layui-col-md3.on {
    border: solid 1px #ddd;
    border-bottom: none;
    background: #111;
}

.layui-col-xs3.layui-col-sm3.layui-col-md3.off {
    border-bottom: solid 1px #ddd;
}

.tiip {
    font-size: 12px;
    margin: 10px 10px;
    display: block;
    color: silver;
}

.icon-menu1.a::before,
.gateway-like-name.a::before {
    content: "";
    display: inline-block;
    width: 24px;
    float: left;
    height: 24px;
    margin-right: 5px;
}

.icon-menu1.a::before {
    background: url(../images/icon_router_online.png) 50% 50% / 24px 24px no-repeat;
}

.gateway-like-name.a::before {
    background: url(../images/icon_router_online_signal.png) 50% 50% / 24px 24px no-repeat;
}

.gateway-like-name.a::before {
    height: 44px;
}

.gateway_group {
    padding: 15px 5px;
    background: #343434;
}

.layout_gw {
    padding: 10px 5px;
    background: repeating-linear-gradient(0deg, #414141, #282828 100px) !important;
}

.layout_gw .layout_gname {
    padding: 5px;
}

.layout_gw .layout_gid {
    padding: 5px 5px 5px 15px;
    color: #bababa;
}

.layout_gw .layout_gname.on::before,
.layout_gw .layout_gname.off::before {
    content: "";
    display: inline-block;
    width: 24px;
    float: left;
    height: 14px;
    margin-right: 5px;
}

.layout_gw .layout_gname.on::before {
    background: url(../images/icon_router_online_signal.png) 50% 50% / 24px 24px no-repeat;
}

.layout_gw .layout_gname.off::before {
    background: url(../images/icon_router_offline_signal.png) 50% 50% / 24px 24px no-repeat;
}

.btn_msg {
    color: red;
    position: fixed;
    z-index: 999;
    font-size: 12px;
    font-weight: 100;
    padding-left: 10px;
}

.userHeadTitle {
    margin-top: 2px;
}

.sencecfg_datafrom_2 {
    color: #0000ff;
}

.devIconShowElecMachinery {}

.devIconShowElecMachinery:before {
    content: '';
    width: 20px;
    height: 20px;
    background: url(../images/dev_icon_show_electrical_machinery.png) center / 120% no-repeat #302e32;
    background-blend-mode: lighten;
    display: inline-block;
    float: right;
    margin: 1px;
    border-radius: 2px;
}


/* 温控样色 - 关 */

.like-ac-btn>div.btn_0,
.tempButton>div.btn_0 {
    background: #686868;
}


/* 温控样色 - 制热 */

.like-ac-btn>div.btn_1,
.tempButton>div.btn_1 {
    background: #ffe109;
}


/* 温控样色 - 制冷 */

.like-ac-btn>div.btn_2,
.tempButton>div.btn_2 {
    background: #00a0e9;
}


/* 温控样色 - 恒温 */

.like-ac-btn>div.btn_3,
.tempButton>div.btn_3 {
    background: #6ee2fe;
}


/* 温控样色 - 地暖 */

.like-ac-btn>div.btn_4,
.tempButton>div.btn_4 {
    /*background: #eef460;*/
    background-color: #bdc409;
}


/* 温控样色 - 速热 */

.like-ac-btn>div.btn_5,
.tempButton>div.btn_5 {
    background: #ba2c2c;
}


/* 温控样色 - 送风 */

.like-ac-btn>div.btn_6,
.tempButton>div.btn_6 {
    background: #14ba1e;
}


/* 温控样色 - 除湿 */

.like-ac-btn>div.btn_7,
.tempButton>div.btn_7 {
    background: #0003eb;
}

.all-temp .on_0,
.all-temp .on_1,
.all-temp .on_2,
.all-temp .on_3,
.all-temp .on_4,
.all-temp .on_5,
.all-temp .on_6,
.all-temp .on_7 {
    background: url(../images/con_mode_and_speed_white_b5-open.png) center/80% no-repeat;
}

.all-temp .all-temp-onoff.on_0,
.all-temp .all-temp-onoff.on_1,
.all-temp .all-temp-onoff.on_2,
.all-temp .all-temp-onoff.on_3,
.all-temp .all-temp-onoff.on_4,
.all-temp .all-temp-onoff.on_5,
.all-temp .all-temp-onoff.on_6,
.all-temp .all-temp-onoff.on_7 {
    background: url(../images/con_power_off_b5_open.png) center/80% no-repeat;
}


/* .all-temp .all-temp-addsubtemp.on_0,
.all-temp .all-temp-addsubtemp.on_1,
.all-temp .all-temp-addsubtemp.on_2,
.all-temp .all-temp-addsubtemp.on_3,
.all-temp .all-temp-addsubtemp.on_4,
.all-temp .all-temp-addsubtemp.on_5,
.all-temp .all-temp-addsubtemp.on_6,
.all-temp .all-temp-addsubtemp.on_7 {
    background-image: none;
} */


/* 温控样色 - 关 */

.all-temp .on_0,
.all-temp .all-temp-onoff.on_0 {
    background-color: #686868;
    border: #686868 3px solid;
}


/* 温控样色 - 制热 */

.all-temp .on_1,
.all-temp .all-temp-onoff.on_1 {
    background-color: #ffe109;
    border: #ffe109 3px solid;
}


/* 温控样色 - 制冷 */

.all-temp .on_2,
.all-temp .all-temp-onoff.on_2 {
    background-color: #00a0e9;
    border: #00a0e9 3px solid;
}


/* 温控样色 - 恒温 */

.all-temp .on_3,
.all-temp .all-temp-onoff.on_3 {
    background-color: #6ee2fe;
    border: #6ee2fe 3px solid;
}


/* 温控样色 - 地暖 */

.all-temp .on_4,
.all-temp .all-temp-onoff.on_4 {
    /*background: #eef460;*/
    background-color: #bdc409;
    border: #bdc409 3px solid;
}


/* 温控样色 - 速热 */

.all-temp .on_5,
.all-temp .all-temp-onoff.on_5 {
    background-color: #ba2c2c;
    border: #ba2c2c 3px solid;
}


/* 温控样色 - 送风 */

.all-temp .on_6,
.all-temp .all-temp-onoff.on_6 {
    background-color: #14ba1e;
    border: #14ba1e 3px solid;
}


/* 温控样色 - 除湿 */

.all-temp .on_7,
.all-temp .all-temp-onoff.on_7 {
    background-color: #0003eb;
    border: #0003eb 3px solid;
}


/* 制热 */

.all-temp .mode_1 {
    background-position: 2px 3px;
}


/* 制冷 */

.all-temp .all-temp-mode.mode_2,
.all-temp .mode_2 {
    background-position: 2px -35px;
}


/* 恒温 */

.all-temp .mode_3 {
    background-position: 2px -77px;
}


/* 地暖 */

.all-temp .mode_4 {
    background-position: 2px -117px;
}


/* 速热 */

.all-temp .mode_5 {
    background-position: 2px -156px;
}


/* 送风 */

.all-temp .mode_6 {
    background-position: 2px -201px;
}


/* 除湿 */

.all-temp .mode_7 {
    background-position: 2px -249px;
}

.all-temp .all-temp-mode.speed_1,
.all-temp .speed_1 {
    background-position: 2px -289px;
}

.all-temp .all-temp-mode.speed_2,
.all-temp .speed_2 {
    background-position: 2px -335px;
}

.all-temp .all-temp-mode.speed_3,
.all-temp .speed_3 {
    background-position: 2px -385px;
}

.all-temp .all-temp-mode.speed_4,
.all-temp .speed_4 {
    background-position: 2px -442px;
}

.weui-prompt-input {
    height: 10em;
}

.layui-nav {
    padding: 0px;
    text-align: center;
}

.layui-nav .layui-nav-item {
    line-height: 50px;
}

.agreement_policies {
    text-align: center;
    padding: 10px;
    background: white;
    color: black;
}

.agreement_policies a {
    color: #0003eb;
}