.index-device { width:100%; margin:0 auto;}
.index-device .card { width:94%; height:60px; margin:5px auto; margin-bottom:0; border-radius:6px 6px 0 0; position:relative; background:linear-gradient(to right, #ffe103, #ffcd16);}
.index-device .card .number { width:80%; height:20px; position:absolute; top:10px; left:3%; display: flex; flex-direction: row; align-items: center; justify-content: left;}
.index-device .card .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;}
.index-device .card .number cite { width: 16px; height: 16px;display: block;margin-left: 8px;background: url(image/copy-white.png) center center no-repeat;background-size: auto 16px;}

.index-device .card .remark { width:80%; height:20px; position:absolute; top:35px; left:3%; display: flex; flex-direction: row; align-items: center; justify-content: left;}
.index-device .card .remark span{ max-width:70%; color:#333; filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; display: -webkit-box; word-break: break-all;text-overflow: ellipsis; overflow: hidden;-webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.index-device .card .remark cite { width: 16px; height: 16px;display: block;margin-left: 8px;background: url(image/edit-white.png) center center no-repeat;background-size: auto 16px;}

.index-device .card .more { width:84px; height:36px; position:absolute; top:12px; right:-6px; z-index:2; background:linear-gradient(to right, #162566, #162566); color:#FFF; border-radius:36px 6px 0 36px; font-size:13px; display: flex; flex-direction: row; align-items: center; justify-content: center;}
.index-device .card .triangle{ width:6px; height:6px; position:absolute; top:48px; right:-6px; background: url(image/triangle-blue.png) center center no-repeat;background-size: 6px auto;}

.index-device .flow { width:94%; height:60px; margin:0 auto; margin-bottom:0; background:#FFF; border-radius:0 0 6px 6px; position:relative;}
.index-device .flow li { width:25%; height:40px; position:absolute; top:10px;}
.index-device .flow li:after{content: ''; position: absolute; top: 0;left: 0; border-right: 1px solid #d7d7d7; -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;}
.index-device .flow li:last-child:after{ border-right:none;}
.index-device .flow li.current{ left:0;}
.index-device .flow li.surplus{ left:25%;}
.index-device .flow li.next{ left:50%;}
.index-device .flow li.lasttime{ left:75%;}
.index-device .flow li .value { width:100%; height:20px; line-height:20px; position:absolute; top:0px; left:0; text-align:center;}
.index-device .flow li .value b { font-size:13px; color:#cc6600;}
.index-device .flow li .value i { font-size:10px; color:#999; padding-left:1px;}
.index-device .flow li .text { width:100%; height:20px; line-height:20px; position:absolute; top:22px; left:0; font-size:13px; color:#333; text-align:center;}


.index-device .wifi { width:94%; height:70px; margin:8px auto; margin-bottom:0; background:#FFF; border-radius:6px; position:relative;}
.index-device .wifi .info { width:85px; height:20px; position:absolute; top:0; left:0; background:#ffd004; border-radius:6px 0 6px 0;}
.index-device .wifi .info .connect  { width:14px; height:14px; line-height:14px;  font-size:9px; text-align:center; position:absolute; bottom:4px; left:6px; border-radius:14px;}
.index-device .wifi .info .connect-black{ color:#FFF; background:#333;}
.index-device .wifi .info .connect-gray{ color:#FFF; background:#333; filter:alpha(opacity=20); -moz-opacity:0.2; -khtml-opacity: 0.2; opacity: 0.2;}
.index-device .wifi .info .signal { width:26px; height:14px; display:block; position:absolute; bottom:3px; left:20px;}
.index-device .wifi .info .signal-0 {background: url(image/signal-black-0.png) right center no-repeat;background-size: auto 14px;}
.index-device .wifi .info .signal-1 {background: url(image/signal-black-1.png) right center no-repeat;background-size: auto 14px;}
.index-device .wifi .info .signal-2 {background: url(image/signal-black-2.png) right center no-repeat;background-size: auto 14px;}
.index-device .wifi .info .signal-3 {background: url(image/signal-black-3.png) right center no-repeat;background-size: auto 14px;}
.index-device .wifi .info .signal-4 {background: url(image/signal-black-4.png) right center no-repeat;background-size: auto 14px;}
.index-device .wifi .info .signal-5 {background: url(image/signal-black-5.png) right center no-repeat;background-size: auto 14px;}
.index-device .wifi .info .battery { width:26px; height:14px; position:absolute; bottom:3px; left:52px; }
.index-device .wifi .info .battery-black {background: url(image/battery-black.png) right center no-repeat;background-size: auto 14px;}
.index-device .wifi .info .battery-gray {background: url(image/battery-gray.png) right center no-repeat;background-size: auto 14px;}

.index-device .wifi .info .battery cite { width:19px; height:10px; position:absolute; top:2px; left:2.5px; display:block;}
.index-device .wifi .info .battery cite i.background { display:block; height:10px; position:absolute; top:0; left:0; z-index:1; background:#333;}
.index-device .wifi .info .battery cite i.number{ width:100%; height:10px; font-size:10px; color:#999; position:absolute; top:0; left:0; z-index:2;display: flex; flex-direction: row; align-items: center; justify-content: center;}
.index-device .wifi .info .battery-gray cite i.background {position:absolute; top:0; left:0; filter:alpha(opacity=20); -moz-opacity:0.2; -khtml-opacity: 0.2; opacity: 0.2;}



.index-device .wifi .name { width:80%; height:20px; line-height:20px; position:absolute; left:3%; top:23px; text-align:left; font-size:13px; color:#333; display: -webkit-box; word-break: break-all;text-overflow: ellipsis; overflow: hidden;-webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.index-device .wifi .password{ width:80%; height:20px; line-height:20px; position:absolute; left:3%; top:44px; text-align:left; font-size:13px; color:#333; display: -webkit-box; word-break: break-all;text-overflow: ellipsis; overflow: hidden;-webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.index-device .wifi .button { width:100px; height:36px; line-height:36px; position:absolute; top:17px; right:3%; background:linear-gradient(to right, #ffe303, #ffd004); border:1px #f3c500 solid; color:#333; font-size:14px; border-radius:36px; text-align:center;}


.index-device .operation { width:94%; height:70px; margin:8px auto; margin-bottom:0; background:#FFF; border-radius:6px; position:relative;}
.index-device .operation li{ width:20%; height:40px; position:absolute; top:10px;}
.index-device .operation li.realname{ left:0;}
.index-device .operation li.remote{ left:20%;}
.index-device .operation li.detection{ left:40%;}
.index-device .operation li.usage{ left:60%;}
.index-device .operation li.recharge{ left:80%;}

.index-device .operation li .icon { width:100%; height:30px; position:absolute; top:0px; left:0;}
.index-device .operation li .text { width:100%; height:20px; line-height:20px; position:absolute; top:33px; left:0; font-size:13px; color:#333; text-align:center;}
.index-device .operation li.realname .icon{background: url(image/realname-gold.png) center center no-repeat;background-size: auto 30px;}
.index-device .operation li.remote .icon{background: url(image/remote-gold.png) center center no-repeat;background-size: auto 26px;}
.index-device .operation li.detection .icon{background: url(image/detection-gold.png) center center no-repeat;background-size: auto 26px;}
.index-device .operation li.usage .icon{background: url(image/usage-gold.png) center center no-repeat;background-size: auto 26px;}
.index-device .operation li.recharge .icon{background: url(image/recharge-gold.png) center center no-repeat;background-size: auto 26px;}

.index-device .add{ width:94%; height:60px; margin:5px auto; margin-bottom:0; border-radius:6px; position:relative; background:linear-gradient(to right, #ffe103, #ffcd16); display: flex; flex-direction: row; align-items: center; justify-content: center;}
.index-device .add .icon{ width:30px; height:30px; display:block; background:#ffd004 url(image/plus-black-1.png) center center no-repeat; background-size: auto 16px; border-radius:30px; border:1px #f3c500 solid;}
.index-device .add .text { font-size:18px; margin-left:8px; font-weight:bold;}


.index-composite { width:100%; margin:12px auto; margin-bottom:0; position:relative;}


.layui-device-list-page { border-radius:12px 12px 0 0; max-height:80%}
.layui-device-list-page .list { width:94%; height:91px; margin:0 auto; position: relative; }
.layui-device-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-device-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-device-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-device-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-device-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-device-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-device-list-page .list .surplus span.value i { font-size:10px; padding-left:1px;}
.layui-device-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-device-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-device-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-device-list-page .list .lasttime span.value i { font-size:10px; padding-left:1px;}
.layui-device-list-page .list .remark { width:40%; height:16px; position:absolute; top:37px; right:40px; font-size:14px; display: flex; flex-direction: row; align-items: center; justify-content: right;}
.layui-device-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-device-list-page .list .more { width:16px; height:16px; position:absolute; top:37px; right:10px; background:url(image/more-black.png) center center no-repeat; background-size:auto 16px;}


.layui-device-remark { border-radius:12px;}


.layui-device-wifi-password-box{ border-radius:12px;}
.layui-device-wifi-password-box .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-device-wifi-password-box .wifi .input { width:70%; left:85px;}

.layui-device-user{border-radius:12px;}
.layui-device-user .bind { width:100%; margin:0 auto; margin-bottom:0; position:relative;}
.layui-device-user .bind .phone { width:92%; height:71px; margin:0 auto; position:relative;}
.layui-device-user .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-device-user .bind .code { width:92%; height:71px; margin:0 auto; position:relative;}
.layui-device-user .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-device-user .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-device-user .bind .input-text::-webkit-input-placeholder { font-size:16px; color:#999; font-weight:normal;}

.layui-device-user .bind .btn { width:100px; height:40px; position:absolute; top:15px; right:0; z-index:6;}
.layui-device-user .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-device-user .bind .btn span.gray {background:#F0F0F0; border:1px #F0F0F0 solid; color:#333;}
.layui-device-user .bind .btn span.gold {background:linear-gradient(to right, #ffe303, #ffd004); border:1px #f3c500 solid; color:#333;}

.layui-device-user .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-device-user .bind .code .reset{ right:120px;}

.layui-device-user .bind .agree { width:92%; height:71px; margin:0 auto; display: flex; flex-direction: row; align-items: center; justify-content: left;}
.layui-device-user .bind .agree .check { width:20px; height:20px; background:url(image/check-unselect.png) center center no-repeat; background-size: 20px auto;}
.layui-device-user .bind .agree .checked {background:url(image/check-gold.png) center center no-repeat; background-size: 20px auto;}
.layui-device-user .bind .agree .text { font-size:13px; margin-left:5px;}
.layui-device-user .bind .agree .text i { color:#09F;}

.layui-device-user .bind .button {width:92%; height:48px; margin:0 auto; margin-bottom:30px; background:linear-gradient(to right, #ffe303, #ffd004); border:1px #f3c500 solid; color:#333; font-size:18px; border-radius:48px; display: flex; flex-direction: row; align-items: center; justify-content: center; font-weight:bold;}
.layui-device-user .bind .button-gray { background:linear-gradient(to right, #e9e9e9, #d9d9d9); border:1px #d0d0d0 solid;}


.layui-device-realname-page { border-radius:12px 12px 0 0;}
.layui-device-realname-page .layui-layer-content{ margin-bottom:20px;}
.layui-device-realname-page .text { width:92%; margin:20px auto; margin-bottom:0; text-align:left; font-size:15px; color:#FF6600;}
.layui-device-realname-page .step { width:92%; margin:20px auto; margin-bottom:0; text-align:left; font-size:15px; color:#000; font-weight:bold;}
.layui-device-realname-page .number {width:92%; margin:10px auto; margin-bottom:0; display: flex; flex-direction: row; align-items: center; justify-content: center;}
.layui-device-realname-page .number .iccid { font-size:16px; font-weight:bold; color:#000;}
.layui-device-realname-page .number .copy { font-size:16px; color:#09F; margin-left:10px;}
.layui-device-realname-page .qrcode { width:100%; margin:10px auto; margin-bottom:0; text-align:center;}
.layui-device-realname-page .qrcode img { width:auto; height:150px; margin:0 auto;}
.layui-device-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-device-realname-page .button-primary { background:linear-gradient(to right, #ffe303, #ffd004); border:1px #f3c500 solid; color:#333; font-size:18px; border-radius:48px; }
.layui-device-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;}




.layui-device-remote-page { border-radius:12px 12px 0 0;}
.layui-device-remote-page .password .icon {background:#1e9fff;}
.layui-device-remote-page .reboot .icon {background:#16b777;}
.layui-device-remote-page .poweroff .icon {background:#ffb800;}
.layui-device-remote-page .recovery .icon {background:#ff5722;}



.layui-device-detection-page { border-radius:12px 12px 0 0; padding-bottom:20px; max-height:80%;}
.layui-device-detection-page ul.detection li.realname .icon {background:#ffb800;}
.layui-device-detection-page ul.detection li.state .icon {background:#1e9fff ;}
.layui-device-detection-page ul.detection li.usage .icon {background:#a233c6;}
.layui-device-detection-page ul.detection li.expire .icon {background:#31bdec;}
.layui-device-detection-page ul.detection li .word{ right:0;}
.layui-device-detection-page ul.detection li .word span {padding-left:20px;}
.layui-device-detection-page ul.detection li .word span.success { background:url(image/success-green.png) center left no-repeat; background-size: auto 16px; color:#09bb07;}
.layui-device-detection-page ul.detection li .word span.wait { background:url(image/wait-blue.png) center left no-repeat; background-size: auto 16px; color:#10aeff;}
.layui-device-detection-page ul.detection li .word span.fail { background:url(image/notice-red.png) center left no-repeat; background-size: auto 16px; color:#f76260;}
.layui-device-detection-page .notice { width:90%; margin:15px auto; margin-bottom:0;}
.layui-device-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-device-usage-page { border-radius:12px 12px 0 0; max-height:80%;}
.layui-device-usage-page .usage h1 { width:90%; height:60px; margin:0 auto; position: relative;}
.layui-device-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-device-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-device-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-device-usage-page .usage .list { width:90%; height:80px; margin:0 auto; position:relative;}
.layui-device-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-device-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-device-usage-page .usage .list .title b{ padding-right:10px;}
.layui-device-usage-page .usage .list .percentage { width:70%; height:10px; position:absolute; top:28px; left:0;}
.layui-device-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-device-usage-page .usage .list .percentage cite { height:10px; position:absolute; top:0; left:0; z-index:2; background:#07C160; border-radius:10px;}
.layui-device-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-device-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-device-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-device-usage-page .usage .list .icon { width:50px; height:20px; position:absolute; top:20px; right:0;}
.layui-device-usage-page .usage .list .success {background:url(image/success-green.png) center center no-repeat; background-size:auto 20px;}
.layui-device-usage-page .usage .list .wait {background:url(image/wait-blue.png) center center no-repeat; background-size:auto 20px;}
.layui-device-usage-page .usage .list .notice {background:url(image/notice-red.png) center center no-repeat; background-size:auto 20px;}
.layui-device-usage-page .usage .list .state { width:50px; height:20px; line-height:20px; position:absolute; top:42px; right:0; text-align:center;}
.layui-device-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-device-recharge-page { border-radius:12px 12px 0 0; padding-bottom:20px; max-height:80%;}
.layui-device-recharge-page .balance .icon { border-radius:0; background: url(image/balance-gold.png) left center no-repeat; background-size: auto 26px;}
.layui-device-recharge-page .balance .word b{ font-size:18px; color:#ff5722;}
.layui-device-recharge-page .balance .word i { font-size:12px; color:#777; padding-left:2px;}
.layui-device-recharge-page .recharge { margin:0 auto; margin-bottom:0;}
.layui-device-recharge-page .recharge .list { width:94%; margin:0 auto; margin-bottom:0; background:#FFF; border-radius:9px; padding-bottom:15px;}
.layui-device-recharge-page .recharge .list .list-left { width:45.5%; float:left; margin:0 0 0 3%;}
.layui-device-recharge-page .recharge .list .list-right { width:45.5%; float:right; margin:0 3% 0 0;}
.layui-device-recharge-page .recharge .list .li { width:100%; margin:0 auto; margin:15px 0 0 0; position:relative; padding-bottom:18px; }
.layui-device-recharge-page .recharge .list .li:after{content: ''; position: absolute; top: 0;left: 0; border:2px #ffb800 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-device-recharge-page .recharge .list .li .amount { width:90%; height:20px; line-height:20px; margin:0 auto; padding-top:25px; text-align:center;}
.layui-device-recharge-page .recharge .list .li .amount b {font-size:20px; font-weight:bold; color:#ff5722;}
.layui-device-recharge-page .recharge .list .li .amount i {font-size:14px; padding-left:2px;}
.layui-device-recharge-page .recharge .list .li .custom { line-height:14px; position:absolute; top:-1px; left:-1px; z-index:3; padding:2px 9px; background:#3486fb; color:#fff; border-radius: 5px 0 5px 0; font-size:12px;}
.layui-device-recharge-page .recharge .list .li .subtitle { width:90%; line-height:14px; margin:10px auto; margin-bottom:0; color:#555; text-align:center; font-size:12px;}
.layui-device-recharge-page .recharge .list .li .content {width:90%; line-height:14px; margin:10px auto; margin-bottom:0; color:#999; text-align:center; font-size:12px;}
.layui-device-recharge-page .recharge .notice {width:94%; margin:10px auto; margin-bottom:0;}
.layui-device-recharge-page .notice h5 { width:90%; margin:0 auto; height:20px; font-size:18px; font-weight:bold; color:#23292e; display: flex; flex-direction: row; align-items: center; justify-content: left;}
.layui-device-recharge-page .notice p { width:90%; margin:10px auto; margin-bottom:0; line-height:24px; font-size:17px; color:#2f363c;}

.card-no-data { width:100%; height:180px; margin:0 auto;}
.card-no-data .bg { width:100%; height:50px; margin:0 auto; margin-bottom:0; padding:50px 0 0 0; background:url(image/nodata.png) center bottom no-repeat; background-size:auto 50px; }
.card-no-data .text { width:100%; height:20px; line-height:20px; margin:10px auto; margin-bottom:0; text-align:center; color:#999; font-size:16px;}