/*------------------------------------------------设备套餐：导航------------------------------------------------*/
.card-package-list {
    width: 94%;
    margin: 10px auto;
    margin-bottom: 0;
    overflow: hidden;
}

.card-package-list .find_nav {
    width: 100%;
    height: 50px;
    position: relative;
    margin: 0 auto;
    background: #FFF;
    border-radius: 9px 9px 0 0;
    display: -moz-box;
    display: -webkit-box;
    display: box;
    transition: all 0.3s ease;
}

.card-package-list .find_nav.fixed {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    border-radius: 0;
}

.card-package-list .find_nav.fixed:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 1px #E5E5E5 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}

.card-package-list .find_nav_line {
    width: 100%;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.card-package-list .find_nav_line:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 1px #E5E5E5 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}

.card-package-list .find_nav_left {
    width: 100%;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    overflow: hidden;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}

.card-package-list .find_nav_list {
    position: absolute;
    left: 0;
}

.card-package-list .find_nav_list ul {
    position: relative;
    white-space: nowrap;
    font-size: 0;
}

.card-package-list .find_nav_list ul li {
    display: inline-block;
    padding: 0;
    margin: 0 15px;
    cursor: pointer;
}

.card-package-list .find_nav_list ul li span {
    width: 100%;
    height: 50px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-package-list .find_nav_cur span {
    color: #07C160 !important;
}

.card-package-list .sideline {
    display: block;
    position: absolute;
    border: 0;
    height: 5px;
    background-color: #07C160;
    left: 0;
    top: 45px;
    pointer-events: none;
    border-radius: 5px;
}

.card-package-list .swipe {
    width: 100%;
    margin: 0 auto;
    background: #FFF;
    border-radius: 0 0 9px 9px;
}

.card-package-list .swipe-list {
    margin: 0 auto;
    margin-bottom: 0;
    padding: 15px 0 0 0;
}

.card-package-list .swipe-list li .description {
    width: 94%;
    line-height: 20px;
    text-align: left;
    margin: 0 auto;
    padding-bottom: 15px;
    font-size: 15px;
}

.card-package-list .swipe-list li:not(:first-child) {
    height: 10px;
}



.card-package-list .endwise-list {
    margin: 0 auto;
    margin-bottom: 0;
    padding: 0;
}

.card-package-list .endwise-list .li {
    background: #FFF;
    border-radius: 12px;
    margin: 0 auto;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.card-package-list .endwise-list .li .catname {
    width: 94%;
    height: 20px;
    margin: 0 auto;
    padding-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

.card-package-list .endwise-list .li .catname span {
    font-size: 16px;
    color: #000;
    font-weight: bold;
    display: inline;
    z-index: 1;
    position: relative;
}

.card-package-list .endwise-list .li .catname span.special-single::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px;
    border-radius: 6px;
    background-color: #07C160;
    z-index: -1;
    transition: height 0.3s ease;
}

.card-package-list .endwise-list .li .catname span.special-double::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px;
    border-radius: 6px;
    background-color: #ff9900;
    z-index: -1;
    transition: height 0.3s ease;
}

.card-package-list .endwise-list li .description {
    width: 94%;
    margin: 0 auto;
    padding: 15px 0 15px 0;
    line-height: 20px;
    text-align: left;
    font-size: 14px;
    color: #777;
}



/*------------------------------------------------设备套餐：田字格------------------------------------------------*/
.card-package-list .display {
    width: 100%;
    margin: 0 auto;
}

.card-package-list .display .display-left {
    width: 45.5%;
    float: left;
    margin-left: 3%;
}

.card-package-list .display .display-right {
    width: 45.5%;
    float: right;
    margin-right: 3%;
}

/*图片套餐*/
.card-package-list .display .thumb {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
    cursor: pointer;
}

.card-package-list .display .thumb img {
    width: 100%;
    border-radius: 6px;
}

/*文字套餐*/
.card-package-list .display .box {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 18px;
    cursor: pointer;
    border-radius: 6px;
}

.card-package-list .display .box .custom {
    max-width: 100%;
    line-height: 16px;
    position: absolute;
    top: -3px;
    left: -3px;
    z-index: 3;
    padding: 2px 9px;
    background: #07C160;
    color: #fff;
    border-radius: 0 6px 0 6px;
    font-size: 14px;
    overflow: hidden;
}

.card-package-list .display .box .amount {
    width: 90%;
    height: 18px;
    line-height: 18px;
    margin: 0 auto;
    padding-top: 26px;
    color: #07C160;
    text-align: center;
}

.card-package-list .display .box .amount b {
    font-size: 18px;
}

.card-package-list .display .box .amount i {
    font-size: 12px;
}

.card-package-list .display .box .amount cite {
    font-size: 11px;
}

.card-package-list .display .box .title {
    width: 90%;
    line-height: 14px;
    margin: 10px auto;
    margin-bottom: 0;
    font-size: 13px;
    color: #07C160;
    text-align: center;
}

.card-package-list .display .box .subtitle {
    width: 90%;
    line-height: 14px;
    margin: 10px auto;
    margin-bottom: 0;
    color: #555;
    text-align: center;
    font-size: 12px;
}

.card-package-list .display .box .content {
    width: 90%;
    line-height: 14px;
    margin: 10px auto;
    margin-bottom: 0;
    color: #999;
    text-align: center;
    font-size: 12px;
}

/*秒杀套餐*/
.card-package-list .display .box.seckill {
    border: 1px #fe2d30 solid;
    padding-bottom: 12px;
}

.card-package-list .display .box.seckill .endtime {
    width: 100%;
    height: 40px;
    background: #fe2d30;
    border-radius: 5px 5px 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-package-list .display .box.seckill .endtime b {
    width: 20px;
    height: 20px;
    background: #fede79;
    border-radius: 3px;
    color: #000;
    font-size: 13px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-package-list .display .box.seckill .endtime i {
    font-size: 13px;
    padding: 0 2px;
    color: #FFF;
}

.card-package-list .display .box.seckill .endtime span {
    font-size: 15px;
    color: #FFFF33;
}

.card-package-list .display .box.seckill .subtitle {
    width: 90%;
    line-height: 18px;
    margin: 10px auto;
    margin-bottom: 0;
    font-size: 13px;
    text-align: left;
}

.card-package-list .display .box.seckill .content {
    width: 90%;
    line-height: 18px;
    margin: 10px auto;
    margin-bottom: 0;
    font-size: 13px;
    text-align: left;
}

.card-package-list .display .box.seckill .money {
    width: 90%;
    height: 55px;
    margin: 5px auto;
    margin-bottom: 0;
    position: relative;
}

.card-package-list .display .box.seckill .money .end {
    opacity: 0.5;
}

.card-package-list .display .box.seckill .money .amount {
    width: 50%;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    padding: 0;
}

.card-package-list .display .box.seckill .money .reduction {
    width: 50px;
    height: 40px;
    position: absolute;
    left: 13%;
    bottom: 15px;
    z-index: 2;
    background: url(image/cutprice-3.png) center center no-repeat;
    background-size: auto 40px;
}

.card-package-list .display .box.seckill .money .reduction .text {
    width: 100%;
    height: 15px;
    margin: 0 auto;
    margin-bottom: 0;
    color: #6e4108;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-package-list .display .box.seckill .money .reduction .text i {
    font-size: 11px;
}

.card-package-list .display .box.seckill .money .reduction .text b {
    font-size: 14px;
}

.card-package-list .display .box.seckill .money .reduction .value {
    width: 100%;
    height: 14px;
    font-size: 12px;
    color: #6e4108;
    margin: 5px auto;
    margin-bottom: 0;
    text-align: center;
}

.card-package-list .display .box.seckill .money .grab {
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-package-list .display .box.seckill .money .grab .text {
    width: 30%;
    height: 30px;
    background: #fe2d30;
    border-radius: 12px 0 0 12px;
    font-size: 22px;
    font-weight: bold;
    color: #FFF;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    text-indent: 8px;
}

.card-package-list .display .box.seckill .money .grab .value {
    width: 70%;
    height: 30px;
    background: #fff8f2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-package-list .display .box.seckill .money .grab .value cite {
    font-size: 14px;
    color: #fe2d30;
    padding-right: 5px;
}

.card-package-list .display .box.seckill .money .grab .value i {
    font-size: 13px;
    color: #fe2d30;
}

.card-package-list .display .box.seckill .money .grab .value b {
    font-size: 20px;
    color: #fe2d30;
}

/*------------------------------------------------设备套餐：列表------------------------------------------------*/
.card-package-list .display-list {
    width: 100%;
    margin: 0 auto;
}

/*图片套餐*/
.card-package-list .display-list .thumb {
    width: 94%;
    margin: 0 auto;
    margin-bottom: 10px;
    cursor: pointer;
}

.card-package-list .display-list .thumb img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/*文字套餐*/
.card-package-list .display-list .box {
    width: 94%;
    margin: 0 auto;
    margin-bottom: 10px;
    padding-bottom: 15px;
    position: relative;
    cursor: pointer;
    border-radius: 6px;
}

.card-package-list .display-list .box .title {
    width: 75%;
    height: 20px;
    line-height: 20px;
    padding: 20px 0 0 4%;
    color: #000;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    overflow: hidden;
}

.card-package-list .display-list .box .title span.custom {
    max-width: 20%;
    font-size: 15px;
    padding: 0 5px;
    color: #FFF;
    background: #07C160;
    border-radius: 3px;
    margin-right: 5px;
}

.card-package-list .display-list .box .title span.name {
    max-width: 80%;
    font-size: 16px;
    text-align: left;
    font-weight: bold;
}

.card-package-list .display-list .box .subtitle {
    width: 65%;
    line-height: 20px;
    padding: 10px 0 0 4%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

.card-package-list .display-list .box .subtitle span {
    font-size: 13px;
    text-align: left;
    color: #555;
}

.card-package-list .display-list .box .desc {
    width: 65%;
    line-height: 20px;
    padding: 10px 0 0 4%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

.card-package-list .display-list .box .desc span {
    margin-right: 8px;
    position: relative;
    padding: 1px 5px;
    color: #feb900;
}

.card-package-list .display-list .box .desc span:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #feb900;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}

.card-package-list .display-list .box .price {
    width: 30%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 22px;
    right: 3%;
    text-align: right;
    color: #07C160;
}

.card-package-list .display-list .box .price i {
    font-size: 14px;
    padding-right: 2px;
}

.card-package-list .display-list .box .price b {
    font-size: 22px;
    font-weight: bold;
}

.card-package-list .display-list .box .month {
    width: 30%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 50px;
    right: 3%;
    text-align: right;
    color: #ff5722;
}

.card-package-list .display-list .box .month cite {
    font-size: 13px;
}

.card-package-list .display-list .box .month i {
    font-size: 13px;
}

.card-package-list .display-list .box .month b {
    font-size: 13px;
    font-weight: normal;
}

/*秒杀套餐*/
.card-package-list .display-list .box.seckill {
    border: 1px #fe2d30 solid;
}

.card-package-list .display-list .box.seckill .endtime {
    width: 100%;
    height: 40px;
    background: #fe2d30;
    border-radius: 5px 5px 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-package-list .display-list .box.seckill .endtime b {
    width: 20px;
    height: 20px;
    background: #fede79;
    border-radius: 3px;
    color: #000;
    font-size: 13px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-package-list .display-list .box.seckill .endtime i {
    font-size: 13px;
    padding: 0 2px;
    color: #FFF;
}

.card-package-list .display-list .box.seckill .endtime span {
    font-size: 15px;
    color: #FFFF33;
}

.card-package-list .display-list .box.seckill .subtitle {
    width: 90%;
    line-height: 18px;
    margin: 15px auto;
    margin-bottom: 0;
    font-size: 15px;
    text-align: left;
    padding: 0;
}

.card-package-list .display-list .box.seckill .content {
    width: 90%;
    line-height: 18px;
    margin: 15px auto;
    margin-bottom: 0;
    font-size: 15px;
    text-align: left;
}

.card-package-list .display-list .box.seckill .money {
    width: 90%;
    height: 55px;
    margin: 15px auto;
    margin-bottom: 0;
    position: relative;
}

.card-package-list .display-list .box.seckill .money .end {
    opacity: 0.5;
}

.card-package-list .display-list .box.seckill .money .amount {
    width: 50%;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    padding: 0;
    color: #07C160;
}

.card-package-list .display-list .box.seckill .money .amount b {
    font-size: 16px;
}

.card-package-list .display-list .box.seckill .money .amount i {
    font-size: 11px;
}

.card-package-list .display-list .box.seckill .money .amount cite {
    font-size: 11px;
}

.card-package-list .display-list .box.seckill .money .reduction {
    width: 50px;
    height: 40px;
    position: absolute;
    left: 13%;
    bottom: 15px;
    z-index: 2;
    background: url(image/cutprice-3.png) center center no-repeat;
    background-size: auto 40px;
}

.card-package-list .display-list .box.seckill .money .reduction .text {
    width: 100%;
    height: 15px;
    margin: 0 auto;
    margin-bottom: 0;
    color: #6e4108;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-package-list .display-list .box.seckill .money .reduction .text i {
    font-size: 11px;
}

.card-package-list .display-list .box.seckill .money .reduction .text b {
    font-size: 14px;
}

.card-package-list .display-list .box.seckill .money .reduction .value {
    width: 100%;
    height: 14px;
    font-size: 12px;
    color: #6e4108;
    margin: 5px auto;
    margin-bottom: 0;
    text-align: center;
}

.card-package-list .display-list .box.seckill .money .grab {
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-package-list .display-list .box.seckill .money .grab .text {
    width: 30%;
    height: 30px;
    background: #fe2d30;
    border-radius: 12px 0 0 12px;
    font-size: 22px;
    font-weight: bold;
    color: #FFF;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    text-indent: 8px;
}

.card-package-list .display-list .box.seckill .money .grab .value {
    width: 70%;
    height: 30px;
    background: #fff8f2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-package-list .display-list .box.seckill .money .grab .value cite {
    font-size: 14px;
    color: #fe2d30;
    padding-right: 5px;
}

.card-package-list .display-list .box.seckill .money .grab .value i {
    font-size: 13px;
    color: #fe2d30;
}

.card-package-list .display-list .box.seckill .money .grab .value b {
    font-size: 20px;
    color: #fe2d30;
}

/*------------------------------------------------设备余额：列表------------------------------------------------*/
.card-recharge-list {
    width: 94%;
    margin: 10px 3%;
    border-radius: 9px;
    background: #FFF;
    padding: 15px 0 5px 0;
}

.card-recharge-list .list-left {
    width: 45.5%;
    float: left;
    margin-left: 3%;
}

.card-recharge-list .list-right {
    width: 45.5%;
    float: right;
    margin-right: 3%;
}

/*图片余额*/
.card-recharge-list .thumb {
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 10px;
    cursor: pointer;
}

.card-recharge-list .thumb img {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/*文字余额*/
.card-recharge-list .box {
    width: 100%;
    margin: 0 auto;
    margin: 0 0 15px 0;
    position: relative;
    padding-bottom: 18px;
}

.card-recharge-list .box:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 2px #07C160 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 9px;
}

.card-recharge-list .box .amount {
    width: 90%;
    height: 20px;
    line-height: 20px;
    margin: 0 auto;
    padding-top: 25px;
    text-align: center;
}

.card-recharge-list .box .amount b {
    font-size: 20px;
    font-weight: bold;
    color: #07C160;
}

.card-recharge-list .box .amount i {
    font-size: 14px;
    padding-left: 2px;
}

.card-recharge-list .box .custom {
    line-height: 14px;
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 3;
    padding: 2px 9px;
    background: #07C160;
    color: #fff;
    border-radius: 5px 0 5px 0;
    font-size: 12px;
}

.card-recharge-list .box .subtitle {
    width: 90%;
    line-height: 14px;
    margin: 10px auto;
    margin-bottom: 0;
    color: #555;
    text-align: center;
    font-size: 12px;
}

.card-recharge-list .box .content {
    width: 90%;
    line-height: 14px;
    margin: 10px auto;
    margin-bottom: 0;
    color: #999;
    text-align: center;
    font-size: 12px;
}

/*------------------------------------------------设备管理：联系客服------------------------------------------------*/
.card-contact {
    width: 94%;
    margin: 10px auto;
    margin-bottom: 0;
    border-radius: 9px;
    background: #FFF;
    padding: 15px 0;
}

.card-contact h5 {
    width: 100%;
    height: 30px;
    margin: 0 auto;
    margin-bottom: 0;
    font-size: 16px;
    color: #000;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-contact .qrcode {
    width: 100%;
    margin: 0 auto;
    clear: both;
}

.card-contact .qrcode .image {
    width: 100%;
    height: 150px;
    margin: 0 auto;
    margin-bottom: 0;
    clear: both;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-contact .qrcode .image img {
    width: auto;
    height: 150px;
    max-width: 100%;
    margin: 0 auto;
}

.card-contact .qrcode .text {
    width: 100%;
    height: 30px;
    margin: 0 auto;
    margin-bottom: 0;
    font-size: 14px;
    color: #000;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-contact .button {
    width: 160px;
    height: 44px;
    margin: 0 auto;
    margin-bottom: 10px;
    background: #1880ff;
    border-radius: 40px;
    position: relative;
}

.card-contact .button i {
    width: 100%;
    height: 44px;
    line-height: 44px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    color: #FFF;
    font-size: 15px;
    background: url(image/message.png) 35px center no-repeat;
    text-indent: 62px;
    background-size: auto 20px;
}

.card-contact .button a {
    width: 100%;
    height: 44px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    border-radius: 44px;
}

.card-contact .phone {
    width: 100%;
    height: 30px;
    margin: 0 auto;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-contact .phone a {
    color: #07C160;
    text-decoration: underline;
}

.card-contact .worktime {
    width: 100%;
    height: 30px;
    margin: 0 auto;
    font-size: 13px;
    color: #999;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-contact .complaint {
    width: 30%;
    height: 36px;
    margin: 0 auto;
    font-size: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: #07C160;
    color: #FFF;
    border-radius: 6px;
}



.layui-card-service-page {
    border-radius: 12px;
}

.layui-card-service-page .head {
    width: 100%;
    height: 90px;
    margin: 0 auto;
    margin-bottom: 0;
    background: #07C160;
    position: relative;
    border-radius: 9px 9px 0 0;
}

.layui-card-service-page .head .number {
    width: 50%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 18px;
    left: 5%;
    z-index: 1;
    font-size: 20px;
    font-weight: bold;
    color: #FFF;
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.layui-card-service-page .head .text {
    width: 60%;
    line-height: 18px;
    position: absolute;
    top: 45px;
    left: 5%;
    z-index: 1;
    font-size: 14px;
    color: #FFF;
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.layui-card-service-page .head .btn {
    width: 110px;
    height: 36px;
    line-height: 36px;
    position: absolute;
    top: 27px;
    right: 10px;
    z-index: 5;
    background: #FFF000;
    color: #663300;
    border-radius: 30px;
    font-size: 15px;
    text-align: center;
    font-weight: bold;
}


.layui-card-service-page .qrcode {
    width: 94%;
    margin: 0 auto;
    margin-bottom: 0;
    padding: 20px 0;
    background: #FFF;
    border-radius: 0 0 9px 9px;
}

.layui-card-service-page .qrcode h4 {
    width: 100%;
    height: 20px;
    line-height: 20px;
    margin: 0 auto;
    text-align: center;
    font-size: 20px;
    color: #000;
}

.layui-card-service-page .qrcode .image {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    padding-top: 20px;
}

.layui-card-service-page .qrcode img {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.layui-card-service-page .qrcode .desc {
    width: 90%;
    line-height: 20px;
    margin: 10px auto;
    margin-bottom: 0;
    text-align: center;
    font-size: 15px;
}

.layui-card-service-page .qrcode .worktime {
    width: 90%;
    line-height: 20px;
    margin: 10px auto;
    margin-bottom: 0;
    text-align: center;
    font-size: 15px;
    color: #FF3300;
}


/*------------------------------------------------设备管理：绑定用户------------------------------------------------*/
.layui-card-user-page {
    border-radius: 12px;
    padding-bottom: 10px;
}

.layui-card-user-page .bind {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 0;
    position: relative;
}

.layui-card-user-page .bind .phone {
    width: 92%;
    height: 71px;
    margin: 0 auto;
    position: relative;
}

.layui-card-user-page .bind .phone:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    border-bottom: 1px #D8D8D8 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    z-index: 1;
}

.layui-card-user-page .bind .code {
    width: 92%;
    height: 71px;
    margin: 0 auto;
    position: relative;
}

.layui-card-user-page .bind .code:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-bottom: 1px #D8D8D8 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    z-index: 1;
}

.layui-card-user-page .bind .input-text {
    width: 100%;
    height: 50px;
    line-height: 50px;
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 5;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 22px;
    font-weight: bold;
    color: #000;
    text-indent: 10px;
}

.layui-card-user-page .bind .input-text::-webkit-input-placeholder {
    font-size: 16px;
    color: #999;
    font-weight: normal;
}

.layui-card-user-page .bind .btn {
    width: 100px;
    height: 40px;
    position: absolute;
    top: 15px;
    right: 0;
    z-index: 6;
}

.layui-card-user-page .bind .btn span {
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.layui-card-user-page .bind .btn span.default {
    background: #F0F0F0;
    border: 1px #F0F0F0 solid;
    color: #333;
}

.layui-card-user-page .bind .btn span.primary {
    background: linear-gradient(to right, #25d177, #07C160);
    border: 1px #06af57 solid;
    color: #FFF;
}

.layui-card-user-page .bind .reset {
    width: 24px;
    height: 24px;
    display: none;
    position: absolute;
    top: 23px;
    right: 0;
    z-index: 6;
    background: url(image/reset.png) center center no-repeat;
    background-size: 24px auto;
}

.layui-card-user-page .bind .code .reset {
    right: 120px;
}

.layui-card-user-page .bind .agree {
    width: 92%;
    height: 71px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

.layui-card-user-page .bind .agree .check {
    width: 20px;
    height: 20px;
    background: url(image/check-unselect.png) center center no-repeat;
    background-size: 20px auto;
}

.layui-card-user-page .bind .agree .checked {
    background: url(image/check-green.png) center center no-repeat;
    background-size: 20px auto;
}

.layui-card-user-page .bind .agree .text {
    font-size: 13px;
    margin-left: 5px;
}

.layui-card-user-page .bind .agree .text i {
    color: #09F;
}

.layui-card-user-page .bind .button {
    width: 92%;
    height: 48px;
    margin: 0 auto;
    margin-bottom: 0;
    background: linear-gradient(to right, #25d177, #07C160);
    border: 1px #06af57 solid;
    color: #FFF;
    font-size: 18px;
    border-radius: 48px;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.layui-card-user-page .bind .service {
    width: 92%;
    height: 30px;
    margin: 26px auto;
    margin-bottom: 0;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.layui-card-user-page .bind .service cite {
    height: 30px;
    font-size: 17px;
    color: #ff0033;
    background: url(image/wechat-red.png) center left no-repeat;
    background-size: auto 26px;
    padding-left: 34px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    animation: service-button-animation 1s infinite;
}

/*------------------------------------------------设备管理：修改备注------------------------------------------------*/
.layui-card-remark-page {
    border-radius: 12px;
    width: 80%;
    height: auto;
}

/*------------------------------------------------设备管理：我的设备------------------------------------------------*/
.layui-card-list-page {
    border-radius: 12px 12px 0 0;
    font-weight: 300;
}

.layui-card-list-page .device-section {
    margin: 10px 3% 0 3%;
    cursor: pointer;
}

.layui-card-list-page .device-section .device-number {
    background: none;
}

.layui-card-list-page .device-section .device-remark {
    background: none;
}

.layui-card-list-page .device-section .usage-item {
    background: #F5F5F5;
    height: 64px;
}

/*------------------------------------------------设备管理：本月流量------------------------------------------------*/
.layui-card-month-page {
    border-radius: 12px 12px 0 0;
    max-height: 80%;
    min-height: 300px;
}

.layui-card-month-page .percentage {
    width: 94%;
    height: 40px;
    margin: 20px auto;
    margin-bottom: 0;
    position: relative;
}

.layui-card-month-page .percentage span {
    width: 100%;
    height: 40px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.layui-card-month-page .percentage span:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 2px #07C160 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 9px;
}

.layui-card-month-page .percentage cite {
    height: 36px;
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 2;
    background: #07C160;
    border-radius: 4px 0 0 4px;
}

.layui-card-month-page .percentage i {
    width: 100%;
    height: 20px;
    line-height: 20px;
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    text-align: right;
    font-size: 12px;
    color: #000;
}

.layui-card-month-page .flow {
    width: 94%;
    height: 120px;
    margin: 20px auto;
    margin-bottom: 0;
    position: relative;
}

.layui-card-month-page .flow:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #DDD;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 12px;
}

.layui-card-month-page .flow li {
    height: 60px;
    position: absolute;
}

.layui-card-month-page .flow li:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 1px solid #DDD;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}

.layui-card-month-page .flow li.total:after {
    border-right: 1px solid #DDD;
}

.layui-card-month-page .flow li.used:after {
    border-right: 1px solid #DDD;
}

.layui-card-month-page .flow li.endtime:after {
    border-bottom: none;
}

.layui-card-month-page .flow li.total {
    width: 33.33%;
    top: 0;
    left: 0;
}

.layui-card-month-page .flow li.used {
    width: 33.33%;
    top: 0;
    left: 33.33%;
}

.layui-card-month-page .flow li.surplus {
    width: 33.33%;
    top: 0;
    right: 0;
}

.layui-card-month-page .flow li.endtime {
    width: 100%;
    top: 60px;
    left: 0;
}

.layui-card-month-page .flow li .number {
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: center;
    position: absolute;
    top: 12px;
    left: 0;
}

.layui-card-month-page .flow li .number b {
    font-size: 14px;
    color: #07C160;
}

.layui-card-month-page .flow li .number i {
    color: #999;
    font-size: 11px;
    padding-left: 1px;
}

.layui-card-month-page .flow li .text {
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: center;
    position: absolute;
    top: 32px;
    left: 0;
    font-size: 12px;
    color: #000;
}

/*------------------------------------------------设备管理：流量清单------------------------------------------------*/
.layui-card-usage-page {
    border-radius: 12px 12px 0 0;
    max-height: 80%;
    min-height: 300px;
}

.layui-card-usage-page .usage h1 {
    width: 90%;
    height: 60px;
    margin: 0 auto;
    position: relative;
}

.layui-card-usage-page .usage h1:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-bottom: 1px #D8D8D8 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    z-index: 1;
}

.layui-card-usage-page .usage h1 p.title {
    width: 100%;
    height: 20px;
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.layui-card-usage-page .usage h1 p.desc {
    width: 100%;
    height: 20px;
    font-size: 13px;
    font-weight: normal;
    color: #ff5722;
    position: absolute;
    top: 30px;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.layui-card-usage-page .usage .list {
    width: 90%;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

.layui-card-usage-page .usage .list:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 1px solid #E5E5E5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}

.layui-card-usage-page .usage .list .title {
    width: 100%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 5px;
    left: 0;
    font-size: 13px;
    color: #000;
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.layui-card-usage-page .usage .list .title b {
    padding-right: 10px;
}

.layui-card-usage-page .usage .list .percentage {
    width: 70%;
    height: 10px;
    position: absolute;
    top: 28px;
    left: 0;
}

.layui-card-usage-page .usage .list .percentage span {
    width: 100%;
    height: 10px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: #DDD;
    border-radius: 10px;
}

.layui-card-usage-page .usage .list .percentage cite {
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: #07C160;
    border-radius: 10px;
}

.layui-card-usage-page .usage .list .percentage i {
    width: 100px;
    height: 10px;
    line-height: 10px;
    display: block;
    position: absolute;
    top: 0;
    right: 5px;
    z-index: 3;
    text-align: right;
    font-size: 8px;
}

.layui-card-usage-page .usage .list .startime {
    width: 70%;
    height: 14px;
    line-height: 14px;
    position: absolute;
    top: 43px;
    left: 0;
    font-size: 12px;
    color: #777;
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.layui-card-usage-page .usage .list .endtime {
    width: 70%;
    height: 14px;
    line-height: 14px;
    position: absolute;
    top: 57px;
    left: 0;
    font-size: 12px;
    color: #777;
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.layui-card-usage-page .usage .list .icon {
    width: 50px;
    height: 20px;
    position: absolute;
    top: 20px;
    right: 0;
}

.layui-card-usage-page .usage .list .success {
    background: url(image/success.png) center center no-repeat;
    background-size: auto 20px;
}

.layui-card-usage-page .usage .list .wait {
    background: url(image/wait.png) center center no-repeat;
    background-size: auto 20px;
}

.layui-card-usage-page .usage .list .notice {
    background: url(image/notice.png) center center no-repeat;
    background-size: auto 20px;
}

.layui-card-usage-page .usage .list .state {
    width: 50px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 42px;
    right: 0;
    text-align: center;
}

.layui-card-usage-page .usage .nolist {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    color: #999;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -10px;
    text-align: center;
}


/*------------------------------------------------设备管理：远程控制------------------------------------------------*/
.layui-card-remote-page {
    border-radius: 12px 12px 0 0;
    font-weight: 300;
}

.layui-card-remote-page .remote-item {
    width: 90%;
    height: 61px;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
}

.layui-card-remote-page .remote-item:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-bottom: 1px #D8D8D8 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    z-index: 1;
}

.layui-card-remote-page .remote-item .icon {
    width: 34px;
    height: 34px;
    position: absolute;
    top: 13px;
    left: 0;
    border-radius: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.layui-card-remote-page .remote-item .text {
    width: 60%;
    height: 20px;
    position: absolute;
    top: 20px;
    left: 50px;
    font-size: 17px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

.layui-card-remote-page .remote-item .word {
    width: 30%;
    height: 20px;
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 15px;
    color: #999;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: right;
}

.layui-card-remote-page .remote-item .more {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 20px;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.layui-card-remote-page .remote-item.password .icon {
    background: #1e9fff;
}

.layui-card-remote-page .remote-item.reboot .icon {
    background: #16b777;
}

.layui-card-remote-page .remote-item.poweroff .icon {
    background: #ffb800;
}

.layui-card-remote-page .remote-item.recovery .icon {
    background: #ff5722;
}

/*------------------------------------------------设备管理：网络检测------------------------------------------------*/
.layui-card-detection-page {
    border-radius: 12px 12px 0 0;
    padding-bottom: 20px;
    max-height: 80%;
}

.layui-card-detection-page ul.detection li.realname .icon {
    background: #ffb800;
}

.layui-card-detection-page ul.detection li.state .icon {
    background: #1e9fff;
}

.layui-card-detection-page ul.detection li.usage .icon {
    background: #a233c6;
}

.layui-card-detection-page ul.detection li.expire .icon {
    background: #31bdec;
}

.layui-card-detection-page ul.detection li .word {
    right: 0;
}

.layui-card-detection-page ul.detection li .word span {
    padding-left: 20px;
}

.layui-card-detection-page ul.detection li .word span.success {
    background: url(image/success.png) center left no-repeat;
    background-size: auto 16px;
    color: #09bb07;
}

.layui-card-detection-page ul.detection li .word span.wait {
    background: url(image/wait.png) center left no-repeat;
    background-size: auto 16px;
    color: #10aeff;
}

.layui-card-detection-page ul.detection li .word span.fail {
    background: url(image/notice.png) center left no-repeat;
    background-size: auto 16px;
    color: #f76260;
}

.layui-card-detection-page .notice {
    width: 90%;
    margin: 15px auto;
    margin-bottom: 0;
}

.layui-card-detection-page .notice p {
    width: 100%;
    font-size: 14px;
    padding: 10px 0 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    color: #ff5722;
    word-break: break-all;
}

/*------------------------------------------------设备管理：套餐时间------------------------------------------------*/
.layui-card-expire-page {
    border-radius: 12px 12px 0 0;
    max-height: 80%;
    min-height: 300px;
}

.layui-card-expire-page .current {
    width: 94%;
    height: 80px;
    margin: 10px auto;
    position: relative;
}

.layui-card-expire-page .current:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 1px solid #DDD;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}

.layui-card-expire-page .package {
    width: 94%;
    margin: 20px auto;
}

.layui-card-expire-page h4 {
    width: 100%;
    height: 20px;
    line-height: 20px;
    margin: 0 auto;
    text-align: center;
    font-size: 15px;
    color: #000;
}

.layui-card-expire-page .countdown {
    width: 100%;
    height: 30px;
    margin: 10px auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.layui-card-expire-page .countdown div.number {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #535353;
    border-radius: 5px;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
}

.layui-card-expire-page .countdown div.text {
    padding: 0 5px 0 5px;
}

.layui-card-expire-page .nolist {
    width: 100%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -10px;
    font-size: 18px;
    color: #999;
    text-align: center;
}

/*------------------------------------------------设备管理：实名认证------------------------------------------------*/
.layui-card-realname-page {
    border-radius: 12px 12px 0 0;
    font-weight: 300;
}

.layui-card-realname-page .layui-layer-content {
    margin-bottom: 20px;
}

.layui-card-realname-page .text {
    width: 92%;
    margin: 20px auto;
    margin-bottom: 0;
    text-align: left;
    font-size: 15px;
    color: #FF6600;
}

.layui-card-realname-page .step {
    width: 92%;
    margin: 20px auto;
    margin-bottom: 0;
    text-align: left;
    font-size: 15px;
    color: #000;
    font-weight: bold;
}

.layui-card-realname-page .number {
    width: 92%;
    margin: 15px auto;
    margin-bottom: 0;
}

.layui-card-realname-page .number .word {
    width: 100%;
    height: 20px;
    margin: 10px auto;
    font-size: 14px;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

.layui-card-realname-page .number .copy {
    width: 100%;
    height: 20px;
    margin: 10px auto;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

.layui-card-realname-page .number .copy span {
    font-size: 16px;
    color: #000;
}

.layui-card-realname-page .number .copy cite {
    font-size: 16px;
    color: #09F;
    margin-left: 10px;
}

.layui-card-realname-page .qrcode {
    width: 100%;
    margin: 10px auto;
    margin-bottom: 0;
    text-align: center;
}

.layui-card-realname-page .qrcode img {
    width: auto;
    height: 150px;
    margin: 0 auto;
}

.layui-card-realname-page .button {
    width: 92%;
    height: 48px;
    margin: 20px auto;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.layui-card-realname-page .button-primary {
    background: linear-gradient(to right, #ffe303, #ffd004);
    border: 1px #f3c500 solid;
    color: #333;
    font-size: 18px;
    border-radius: 48px;
}

.layui-card-realname-page .button-default {
    background: linear-gradient(to right, #eeeeee, #e2e2e2);
    border: 1px #e2e2e2 solid;
    color: #333;
    font-size: 18px;
    border-radius: 48px;
}


.layui-card-realname-page .sim-section {
    width: 90%;
    margin: 10px 5% 0 5%;
}

.layui-card-realname-page .sim-item {
    width: 100%;
    height: 71px;
    position: relative;
    cursor: pointer;
}

.layui-card-realname-page .sim-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-bottom: 1px #D8D8D8 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    z-index: 1;
}

.layui-card-realname-page .sim-item:last-child::after {
    border-bottom: none;
}

.layui-card-realname-page .sim-item .logo {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 20px;
    left: 0;
    border-radius: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.layui-card-realname-page .sim-item .logo img {
    width: 30px;
    height: 30px;
}

.layui-card-realname-page .sim-item .carrier {
    width: 60%;
    height: 20px;
    position: absolute;
    top: 15px;
    left: 50px;
    font-size: 17px;
    font-weight: 400;
    color: #000;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

.layui-card-realname-page .sim-item .realname {
    width: 60%;
    height: 20px;
    position: absolute;
    top: 40px;
    left: 50px;
    font-size: 15px;
    color: #999;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

.layui-card-realname-page .sim-item .realname.green {
    color: #07C160;
}

.layui-card-realname-page .sim-item .realname.blue {
    color: #0099FF;
}

.layui-card-realname-page .sim-item .realname.gold {
    color: #FF6600;
}

.layui-card-realname-page .sim-item .radio {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 22px;
    right: 0;
    background: url(image/radio.png) center center no-repeat;
    background-size: 26px auto;
}

.layui-card-realname-page .sim-item .radio.c {
    background: url(image/radio-green.png) center center no-repeat;
    background-size: 26px auto;
}

.layui-card-realname-page .sim-item .btn {
    width: 80px;
    height: 30px;
    color: #FFF;
    font-size: 15px;
    position: absolute;
    top: 20px;
    right: 0;
    background: linear-gradient(to right, #f86363, #f52727);
    border: 1px #f31616 solid;
    border-radius: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}




.layui-preview-video {
    background: #FFF;
    border-radius: 9px;
    padding-bottom: 5px;
}

.layui-preview-video .video {
    width: 90%;
    margin: 10px auto;
    margin-bottom: 0;
    border: 1px #000 solid;
}

.layui-preview-video .video video {
    width: 100%;
    height: 500px;
    margin: 0;
    padding: 0;
}

.layui-card-auth-page {
    border-radius: 9px;
    font-weight: 300;
    padding-bottom: 10px;
}

.layui-card-auth-page .title {
    width: 90%;
    margin: 30px 5% 0 5%;
    font-size: 20px;
    font-weight: 400;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.layui-card-auth-page .title i {
    width: 28px;
    height: 28px;
    border-radius: 20px;
    background: #ffcd16;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 3px;
}

.layui-card-auth-page .text {
    width: 86%;
    margin: 20px 7% 0 7%;
    font-size: 15px;
    color: #1a1a1a;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: left;
}

.layui-card-auth-page .button {
    width: 86%;
    height: 50px;
    margin: 20px 7% 0 7%;
    background: #07C160;
    border-radius: 9px;
    color: white;
    font-size: 17px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.layui-card-auth-page .cancel {
    width: 86%;
    margin: 20px 7% 0 7%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #737373;
    cursor: pointer;
}

/*------------------------------------------------设备管理：修改wifi名称密码------------------------------------------------*/
.layui-card-password-page {
    border-radius: 12px 12px 0 0;
    font-weight: 300;
}

.layui-card-password-page .layui-layer-title {
    font-weight: 400;
}

.layui-card-password-page .remote-password-item {
    width: 90%;
    margin: 0 5%;
    height: 61px;
    font-size: 17px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.layui-card-password-page .remote-password-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-bottom: 1px #D8D8D8 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    z-index: 1;
}

.layui-card-password-page .remote-password-item .label {
    margin-right: 20px;
    color: #737373;
}

.layui-card-password-page .remote-password-item .reset {
    width: 10%;
}

.layui-card-password-page .remote-password-item .input {
    flex: 1;
    z-index: 5;
}

.layui-card-password-page .remote-password-item .input-text {
    width: 100%;
    height: 50px;
    border: none;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: left;
}

.layui-card-password-page .remote-password-button {
    width: 50%;
    height: 50px;
    position: absolute;
    bottom: 20px;
    left: 25%;
    background: #07C160;
    color: white;
    font-size: 20px;
    font-weight: 400;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*------------------------------------------------设备管理：切换网络------------------------------------------------*/
.layui-card-network-page {
    border-radius: 12px 12px 0 0;
    font-weight: 300;
}

.layui-card-network-page .layui-layer-title {
    font-weight: 400;
}

.layui-card-network-page .notice {
    width: 92%;
    margin: 20px 4% 0 4%;
    text-align: left;
    font-size: 15px;
    line-height: 22px;
    color: #737373;
}

.layui-card-network-page .sim-section {
    width: 92%;
    margin: 10px 4% 0 4%;
}

.layui-card-network-page .sim-item {
    width: 100%;
    height: 81px;
    position: relative;
    cursor: pointer;
}

.layui-card-network-page .sim-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-bottom: 1px #D8D8D8 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    z-index: 1;
}

.layui-card-network-page .sim-item .logo {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 25px;
    left: 0;
    border-radius: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.layui-card-network-page .sim-item .logo img {
    width: 30px;
    height: 30px;
}

.layui-card-network-page .sim-item .carrier {
    width: 60%;
    height: 20px;
    position: absolute;
    top: 20px;
    left: 50px;
    font-size: 17px;
    font-weight: 400;
    color: #000;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

.layui-card-network-page .sim-item .realname {
    width: 60%;
    height: 20px;
    position: absolute;
    top: 45px;
    left: 50px;
    font-size: 14px;
    color: #999;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

.layui-card-network-page .sim-item .realname.green {
    color: #07C160;
}

.layui-card-network-page .sim-item .realname.blue {
    color: #0099FF;
}

.layui-card-network-page .sim-item .realname.gold {
    color: #FF6600;
}

.layui-card-network-page .sim-item .radio {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 27px;
    right: 0;
    background: url(image/radio.png) center center no-repeat;
    background-size: 26px auto;
}

.layui-card-network-page .sim-item .radio.c {
    background: url(image/radio-green.png) center center no-repeat;
    background-size: 26px auto;
}

.layui-card-network-page .sim-item .btn {
    width: 90px;
    height: 36px;
    color: #FFF;
    font-size: 15px;
    font-weight: 400;
    position: absolute;
    top: 21px;
    right: 0;
    z-index: 5;
    background: linear-gradient(to right, #f86363, #f52727);
    border: 1px #f31616 solid;
    border-radius: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.layui-card-network-page .refresh {
    width: 50%;
    height: 50px;
    position: absolute;
    bottom: 20px;
    left: 24%;
    font-size: 15px;
    font-weight: 400;
    color: #333333;
    background: #F2F2F2;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/*------------------------------------------------设备管理：弹窗广告------------------------------------------------*/
.layui-card-advert-page {
    border-radius: 12px;
    background: none;
    box-shadow: none !important;
}

.layui-card-advert-page .advert img {
    width: 100%;
    height: auto;
    border-radius: 20px;
}

/*------------------------------------------------设备管理：充值记录------------------------------------------------*/
.card-trade-list {
    width: 94%;
    margin: 10px auto;
    margin-bottom: 0;
    background: #FFF;
    border-radius: 9px;
}

.card-trade-list li.list {
    width: 100%;
    height: 80px;
    position: relative;
    cursor: pointer;
}

.card-trade-list li.list:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 1px #EFEFF4 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}

.card-trade-list li.list .title {
    width: 80%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 10px;
    left: 3%;
    font-size: 15px;
    color: #000;
}

.card-trade-list li.list .time {
    width: 80%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 40px;
    left: 3%;
    color: #999;
    font-size: 13px;
}

.card-trade-list li.list .amount {
    width: 20%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 10px;
    right: 3%;
    text-align: right;
    font-size: 15px;
    color: #000;
}

.card-trade-list li.list .status {
    width: 20%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 40px;
    right: 3%;
    text-align: right;
    font-size: 13px;
}

.card-trade-list li.list .status span {
    padding: 4px 6px;
    color: #FFF;
    border-radius: 3px;
}

.card-trade-list .layui-flow-more {
    padding-bottom: 10px;
}

/*------------------------------------------------设备管理：优惠券------------------------------------------------*/
.card-coupon-list {
    width: 94%;
    margin: 10px auto;
    margin-bottom: 0;
}

.card-coupon-list li {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
    cursor: pointer;
}

.card-coupon-list li .left {
    width: 30%;
    height: 100px;
    position: relative;
}

.card-coupon-list li .left:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border: 1px #f4e4e5 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    z-index: 1;
    border-radius: 18px;
    background: #fef8f8;
}

.card-coupon-list li .right {
    width: 70%;
    height: 100px;
    position: relative;
}

.card-coupon-list li .right:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border: 1px #f4e4e5 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    z-index: 1;
    border-radius: 18px;
    background: #fef8f8;
}

.card-coupon-list li .amount {
    width: 90%;
    height: 28px;
    position: absolute;
    top: 20px;
    left: 5%;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-coupon-list li .amount b {
    font-size: 28px;
    color: #FF3300;
}

.card-coupon-list li .amount i {
    font-size: 15px;
    color: #FF3300;
    padding-left: 3px;
}

.card-coupon-list li .text {
    width: 90%;
    height: 20px;
    font-size: 15px;
    color: #FF3300;
    position: absolute;
    top: 50px;
    left: 5%;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-coupon-list li .title {
    width: 90%;
    height: 20px;
    font-size: 15px;
    position: absolute;
    top: 20px;
    left: 5%;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

.card-coupon-list li .startime {
    width: 90%;
    height: 20px;
    font-size: 12px;
    position: absolute;
    top: 45px;
    left: 5%;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

.card-coupon-list li .endtime {
    width: 90%;
    height: 20px;
    font-size: 12px;
    position: absolute;
    top: 65px;
    left: 5%;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

.card-coupon-list li .button {
    width: 90px;
    height: 36px;
    position: absolute;
    top: 32px;
    right: 5%;
    z-index: 3;
}

.card-coupon-list li .button span {
    width: 100%;
    height: 36px;
    background: #FF3300;
    color: #FFF;
    font-size: 14px;
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-coupon-list li .button cite {
    width: 100%;
    height: 36px;
    color: #FF3300;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-coupon-list li .button cite:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border: 1px #FF3300 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    z-index: 1;
    border-radius: 100px;
}


.layui-card-trade-kefu {
    border-radius: 12px;
}

.layui-card-trade-kefu p {
    width: 100%;
    margin: 0 auto;
}

.layui-card-trade-kefu img {
    width: 100%;
    border-radius: 12px 12px 0 0;
}

.layui-card-trade-kefu .text {
    text-align: center;
    font-size: 15px;
    color: #09F;
}




.card-show-package {
    width: 94%;
    height: 20px;
    margin: 10px auto;
    margin-bottom: 0;
    text-align: center;
    color: #ccc;
}