/*------------------------------------------------设备套餐：导航------------------------------------------------*/
.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 .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;}
.card-package-list .display .box:after{content: ''; position: absolute; top: 0; left: 0; border:3px #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:12px;}
.card-package-list .display .box .custom { line-height:14px; position:absolute; top:-1px; left:-1px; z-index:3; padding:2px 9px; background:#07C160; color:#fff; border-radius: 6px 0 6px 0; font-size:12px;}
.card-package-list .display .box .amount { width:90%; height:18px; line-height:18px; margin:0 auto; padding-top:20px; color:#07C160; text-align:center;}
.card-package-list .display .box .amount b { font-size:16px;}
.card-package-list .display .box .amount i { font-size:11px;}
.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:after{content: ''; position: absolute; top: 0; left: 0; border:4px #fe2d30 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:12px;}
.card-package-list .display .box.seckill .endtime { width:100%; height:40px; background:#fe2d30; border-radius:10px 10px 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;}
.card-package-list .display-list .box:after{content: ''; position: absolute; top: 0; left: 0; border:3px #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:12px;}
.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:after{content: ''; position: absolute; top: 0; left: 0; border:4px #fe2d30 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:12px;}
.card-package-list .display-list .box.seckill .endtime { width:100%; height:40px; background:#fe2d30; border-radius:10px 10px 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 auto; margin-bottom:0; 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:3px #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-user-page{border-radius:12px;}
.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;}
.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:30px; 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-remark-page { border-radius:12px; width:80%; height:auto;}

/*------------------------------------------------设备管理：我的设备------------------------------------------------*/
.layui-card-list-page { border-radius:12px 12px 0 0; max-height:80%; min-height:300px;}
.layui-card-list-page .list { width:94%; height:91px; margin:0 auto; position: relative; }
.layui-card-list-page .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-list-page .list .number { width:97%; height:20px; line-height:20px; position:absolute; top:10px; left:3%;  display: flex; flex-direction: row; align-items: center; justify-content: left;}
.layui-card-list-page .list .number b { font-size:17px; color:#333; max-width:80%; display: -webkit-box; word-break: break-all;text-overflow: ellipsis; overflow: hidden;-webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.layui-card-list-page .list .surplus {height:20px; position:absolute; top:35px; left:3%; font-size:13px; color:#555; display: flex; flex-direction: row; align-items: center; justify-content: center;}
.layui-card-list-page .list .surplus span.text { background:#162566; color:#FFF; padding:2px 4px; display: flex; flex-direction: row; align-items: center; justify-content: center; border-radius:3px 0 0 3px;} 
.layui-card-list-page .list .surplus span.value { background:#ffcd16; color:#333; padding:2px 4px; display: flex; flex-direction: row; align-items: center; justify-content: center; border-radius:0 3px 3px 0;}
.layui-card-list-page .list .surplus span.value i { font-size:10px; padding-left:1px;}
.layui-card-list-page .list .lasttime { height:20px; position:absolute; top:60px; left:3%; font-size:13px; color:#555; display: flex; flex-direction: row; align-items: center; justify-content: center;}
.layui-card-list-page .list .lasttime span.text { background:#162566; color:#FFF; padding:2px 4px; display: flex; flex-direction: row; align-items: center; justify-content: center; border-radius:3px 0 0 3px;} 
.layui-card-list-page .list .lasttime span.value { background:#ffcd16; color:#333; padding:2px 6px; display: flex; flex-direction: row; align-items: center; justify-content: center; border-radius:0 3px 3px 0;}
.layui-card-list-page .list .lasttime span.value i { font-size:10px; padding-left:1px;}
.layui-card-list-page .list .remark { width:40%; height:20px; position:absolute; top:36px; right:36px; font-size:14px; display: flex; flex-direction: row; align-items: center; justify-content: right;}
.layui-card-list-page .list .remark span { max-width:80%; display: -webkit-box; word-break: break-all;text-overflow: ellipsis; overflow: hidden;-webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.layui-card-list-page .list .more { width:20px; height:20px; position:absolute; top:35px; right:10px;}

/*------------------------------------------------设备管理：本月流量------------------------------------------------*/
.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;}
.layui-card-remote-page ul { margin-bottom:30px;}
.layui-card-remote-page li {width:90%; height:61px; margin:0 auto; position:relative; cursor:pointer;}
.layui-card-remote-page li: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 li .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 li .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 li .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 li .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 li.password .icon {background:#1e9fff;}
.layui-card-remote-page li.reboot .icon {background:#16b777;}
.layui-card-remote-page li.poweroff .icon {background:#ffb800;}
.layui-card-remote-page li.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;}
.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-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;}

/*------------------------------------------------设备管理：修改wifi名称密码------------------------------------------------*/
.layui-card-wifi-password-page{ border-radius:12px;}
.layui-card-wifi-password-page .wifi .text{ width:85px; height:56px; font-size:16px; color:#333; position:absolute; top:3px; left:0; z-index:1; display: flex; flex-direction: row; align-items: center; justify-content: left; word-break: break-all; text-overflow: ellipsis;  overflow: hidden; -webkit-box-orient: vertical;-webkit-line-clamp:1;}
.layui-card-wifi-password-page .wifi .input { width:70%; left:85px;}

/*------------------------------------------------设备管理：切换网络------------------------------------------------*/
.layui-card-network-page{ border-radius:12px 12px 0 0;}
.layui-card-network-page .network { width:100%; margin:0 auto; margin-bottom:0;}
.layui-card-network-page .network p.notice { width:90%; margin:0 auto; margin-bottom:0; padding-top:15px; line-height:22px; font-size:14px; margin:0 auto; text-align:left;}
.layui-card-network-page .network li {width:90%; height:71px; margin:0 auto; position:relative; cursor:pointer;}
.layui-card-network-page .network li: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 .network li:last-child:after{ border-bottom:none;}
.layui-card-network-page .network .icon { 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-network-page .network .title { width:60%; height:20px; position:absolute; top:15px; left:50px; font-size:17px; color:#000; display: flex; flex-direction: row; align-items: center; justify-content: left;}
.layui-card-network-page .network .text { width:60%; height:20px; position:absolute; top:40px; left:50px; font-size:13px; color:#999; display: flex; flex-direction: row; align-items: center; justify-content: left;}
.layui-card-network-page .network .text.green{ color:#07C160;}
.layui-card-network-page .network .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-network-page .network .radio.c { background:url(image/radio-green.png) center center no-repeat; background-size:26px auto;}
.layui-card-network-page .network .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-card-network-page .network .icon img { width:30px; height:30px;}
.layui-card-network-page .network li.button { width:90%; height:48px; margin:20px auto; margin-bottom:20px; color:#FFF; font-size:17px; background:linear-gradient(to right, #25d177, #07C160); border:1px #06af57 solid; border-radius:48px; display: flex; flex-direction: row; 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;}

/*------------------------------------------------设备管理：联系客服------------------------------------------------*/
.layui-card-contact-page {border-radius:12px;}
.layui-card-contact-page .contact { width:100%; margin:0 auto; padding-bottom:15px;}
.layui-card-contact-page .contact .qrcode { width:100%; height:200px; display: flex; flex-direction: row; align-items: center; justify-content: center;}
.layui-card-contact-page .contact .qrcode img{ width:200px; height:200px;}
.layui-card-contact-page .contact .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;}
.layui-card-contact-page .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-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;}