/*------------------------------------------------头部信息------------------------------------------------*/
/*设备卡号*/
.card-head { width:100%; margin:10px auto; margin-bottom:0;}
.card-head .card{ width:94%; height:56px; margin:0 auto; margin-bottom:0; clear: both; background:#07C160; position:relative; border-radius:9px 9px 0 0;}
.card-head .card .number { width:70%; height:20px; position:absolute; top:9px; left:10px; z-index:5; display: flex; flex-direction: row; align-items: center;}
.card-head .card .number b { max-width:90%; font-size:17px; 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;}
.card-head .card .number i { width:14px; height:14px; display:block; margin-left:8px; background:url(image/copy-white.png) center center no-repeat; background-size:auto 14px;}
.card-head .card .remark { width:70%; height:20px; position:absolute; top:30px; left:10px; display: flex; flex-direction: row; align-items: center;}
.card-head .card .remark span {max-width:90%; font-size:12px; color:#FFF; display:-webkit-box;  word-break:break-all; text-overflow:ellipsis;  overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:1; opacity: 0.8;}
.card-head .card .remark i { width:14px; height:14px; margin-left:5px; background:url(image/edit-white.png) center center no-repeat; background-size:auto 14px;}
.card-head .card .more{ width:84px;height:30px;position:absolute;top:13px; cursor:pointer; right:-6px; z-index:2; background:#FFA813; color:#FFF; border-radius:36px 6px 0 36px; font-size:13px; display:flex; flex-direction:row; align-items: center; justify-content: center;}
.card-head .card .triangle{ width:6px; height:6px; position:absolute; top:43px; right:-6px; background: url(image/triangle-gold.png) center center no-repeat;background-size: 6px auto;}
.card-head .card .index { width:50%; height:20px; position:absolute; top:18px; right:15px; z-index:5; cursor:pointer; display:flex; flex-direction:row; align-items: center; justify-content: right;}
.card-head .card .index i { background:url(image/return-white.png) left center no-repeat; background-size:auto 15px; font-size:14px; padding-left:17px; color:#FFF;}

/*设备流量*/
.card-head .flow { width:94%; height:54px; margin:0 auto; margin-bottom:0; background:#FFF; border-radius:0 0 9px 9px; position:relative;}
.card-head .flow li { width:25%; height:40px; position:absolute; top:9px;}
.card-head .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;}
.card-head .flow li:last-child:after{ border-right:none;}
.card-head .flow li.current{ left:0;}
.card-head .flow li.surplus{ left:25%;}
.card-head .flow li.next{ left:50%;}
.card-head .flow li.lasttime{ left:75%;}
.card-head .flow li .value { width:100%; height:20px; line-height:20px; position:absolute; top:0px; left:0; text-align:center;}
.card-head .flow li .value b { font-size:13px; color:#07C160;}
.card-head .flow li .value i { font-size:10px; color:#999; padding-left:1px;}
.card-head .flow li .text { width:100%; height:20px; line-height:20px; position:absolute; top:20px; left:0; font-size:13px; color:#333; text-align:center;}

/*设备余额*/
.card-head .balance { width:94%; margin:0 auto; margin-bottom:0; background:#FFF; border-radius:0 0 6px 6px;}
.card-head .balance li { width:100%; height:50px; position:relative; cursor:pointer;}
.card-head .balance li:after{content: ''; position: absolute; top: 0;left: 0; border-bottom:1px #E4E4E4 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-head .balance li:last-child:after{ border-bottom:none;}
.card-head .balance li .icon { width:20px; height:20px; position:absolute; top:15px; left:10px;}
.card-head .balance li .text { width:50%; height:20px; line-height:22px; position:absolute; top:15px; left:40px; font-size:15px; color:#000;}
.card-head .balance li .amount { width:50%; height:20px; line-height:20px; position:absolute; top:15px; right:30px; font-size:14px; text-align:right;}
.card-head .balance li .amount b { font-size:16px; color:#07C160;}
.card-head .balance li .amount i { font-size:12px; padding-left:2px; color:#777;}
.card-head .balance li .isrenew { width:50%; height:20px; line-height:20px; position:absolute; top:15px; right:30px; font-size:14px; text-align:right;}


.card-head .balance li .more { width:20px; height:20px; position:absolute; top:15px; right:10px;}
.card-head .balance li.wallet .icon {background:url(image/pay-balance.png) left center no-repeat; background-size:auto 20px;}
.card-head .balance li.renew .icon {background:url(image/renew-green.png) left center no-repeat; background-size:auto 20px;}

/*设备VIP*/
.index-page .card-vip-head { width:94%; border-radius:13px; border: 4px solid #ff33cc; animation: blinking-animation 1s infinite;}
.index-page .card-vip-head .card { width:100%; margin:0 auto;}
.index-page .card-vip-head .card .vip { padding:4px 10px; font-weight:bold; margin-left:20px; border-radius: 50px; background: linear-gradient(to right, #FCF8E8, #F8DAAB); color: #9c5f00;  animation: vip-animation 1s infinite;}
.index-page .card-vip-head .flow{ width:100%;}

/*------------------------------------------------实名、余额、远程(共用)信息------------------------------------------------*/
/*套餐无余额：实名认证*/
.index-page .realname { width:94%; height:60px; margin:10px auto; margin-bottom:0; background:#FFF; position:relative; border-radius:9px;}
.index-page .realname .icon { width:40px; height:40px; position:absolute; top:10px; left:10px;}
.index-page .realname .successful { background:url(image/success.png) center center no-repeat; background-size:40px auto;}
.index-page .realname .warning { background:url(image/notice.png) center center no-repeat; background-size:40px auto;}
.index-page .realname .title { width:50%; height:14px; line-height:14px; position:absolute; top:12px; left:60px; font-size:15px; color:#000;}
.index-page .realname .text { width:70%; height:14px; line-height:14px; position:absolute; top:32px; left:60px; font-size:12px;}
.index-page .realname .button { width:120px; height:36px; position:absolute; top:12px; right:10px; z-index:5; font-size:14px; cursor:pointer; background:#FFA813; color:#FFF; border-radius:36px; display:flex; flex-direction:row; align-items:center; justify-content:center;}

/*套餐无余额：远程信息*/
.index-page .remote { width:94%; height:80px; margin:10px auto; margin-bottom:0; background:#FFF; position:relative; border-radius:9px;}
.index-page .remote .info { width:85px; height:20px; position:absolute; top:0; left:0; background:#66ccff; border-radius:6px 0 6px 0;}
.index-page .remote .connect  { width:14px; height:14px; line-height:14px;  font-size:9px; text-align:center; position:absolute; bottom:4px; left:6px; border-radius:14px;}
.index-page .remote .connect-black{ color:#FFF; background:#333;}
.index-page .remote .connect-gray{ color:#FFF; background:#333; filter:alpha(opacity=20); -moz-opacity:0.2; -khtml-opacity: 0.2; opacity: 0.2;}
.index-page .remote .signal { width:26px; height:14px; display:block; position:absolute; bottom:3px; left:20px;}
.index-page .remote .signal-0 {background: url(image/signal-black-0.png) right center no-repeat;background-size: auto 14px;}
.index-page .remote .signal-1 {background: url(image/signal-black-1.png) right center no-repeat;background-size: auto 14px;}
.index-page .remote .signal-2 {background: url(image/signal-black-2.png) right center no-repeat;background-size: auto 14px;}
.index-page .remote .signal-3 {background: url(image/signal-black-3.png) right center no-repeat;background-size: auto 14px;}
.index-page .remote .signal-4 {background: url(image/signal-black-4.png) right center no-repeat;background-size: auto 14px;}
.index-page .remote .signal-5 {background: url(image/signal-black-5.png) right center no-repeat;background-size: auto 14px;}
.index-page .remote .battery { width:26px; height:14px; position:absolute; bottom:3px; left:52px; }
.index-page .remote .battery-black {background: url(image/battery-black.png) right center no-repeat;background-size: auto 14px;}
.index-page .remote .battery-gray {background: url(image/battery-gray.png) right center no-repeat;background-size: auto 14px;}
.index-page .remote .battery cite { width:19px; height:10px; position:absolute; top:2px; left:2.5px; display:block;}
.index-page .remote .battery cite i.background { display:block; height:10px; position:absolute; top:0; left:0; z-index:1; background:#333;}
.index-page .remote .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-page .remote .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-page .remote .name { width:60%; height:20px; line-height:20px; position:absolute; left:3%; top:27px; 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-page .remote .password{ width:60%; height:20px; line-height:20px; position:absolute; left:3%; top:47px; 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-page .remote .button {width:100px; height:40px; font-size:14px; font-weight:normal; cursor:pointer; position:absolute; top:20px; color:#333333; right:3%; background:#F4F8FF; color:#1678FF; border-radius:40px; display: flex; flex-direction: row; align-items: center; justify-content: center;}
.index-page .remote .primary{width:100px; height:30px; font-size:14px; font-weight:normal; cursor:pointer; position:absolute; top:6px; color:#333333; right:3%; background:linear-gradient(to right, #c6eef5, #9be7f5); border:1px #8be4f4 solid; border-radius:30px; display: flex; flex-direction: row; align-items: center; justify-content: center;}
.index-page .remote .default{width:100px; height:30px; font-size:14px; font-weight:normal; cursor:pointer; position:absolute; top:42px; color:#333333; right:3%; background:linear-gradient(to right, #d8ecfe, #b3dbff); border:1px #a7d5fe solid; border-radius:30px; display: flex; flex-direction: row; align-items: center; justify-content: center;}

/*套餐有余额：联系我们、实名认证、远程信息*/
.index-page .balance { width:94%; height:110px; margin:10px auto; margin-bottom:0; position:relative;}
.index-page .balance .realname{ width:63%; height:110px; margin:0; background:linear-gradient(to bottom,#ffe5dd,#ffffff); border-radius:9px; position:absolute; top:0; left:0;}
.index-page .balance .remote{ width:63%; height:110px; margin:0; background:linear-gradient(to bottom,#e9faff,#ffffff); border-radius:9px; position:absolute; top:0; left:0;}
.index-page .balance .contact{ width:63%; height:110px; margin:0; background:linear-gradient(to bottom, #ecfde5, #ffffff); border-radius:9px; position:absolute; top:0; left:0;}

/*套餐有余额：设备余额*/
.index-page .balance .recharge { width:35%; height:110px; margin:0; background:linear-gradient(to bottom,#fff9d5,#ffffff); border-radius:9px; position:absolute; top:0; right:0;}
.index-page .balance .recharge .title { width:90%; height:15px; position:absolute; top:8px; left:5%; font-size:13px; text-indent:15px; background:url(image/pay-balance.png) left center no-repeat; background-size: auto 13px; display: flex; flex-direction: row; align-items: center; justify-content: left;}
.index-page .balance .recharge .amount { width:90%; height:20px; position:absolute; top:35px; left:5%; display: flex; flex-direction: row; align-items: center; justify-content: center;}
.index-page .balance .recharge .amount i { font-size:14px; color:#555;}
.index-page .balance .recharge .amount b { font-size:18px; color:#000; padding-left:3px;}
.index-page .balance .recharge .button { width:80%; height:30px; font-size:14px; color:#330000; cursor:pointer; position:absolute; top:72px; left:10%; background:linear-gradient(to right, #ffe303, #ffd004); border:1px #f3c500 solid; border-radius:30px; display: flex; flex-direction: row; align-items: center; justify-content: center;}

/*套餐有余额：实名认证*/
.index-page .balance .realname .yellow { color:#fb0606;}
.index-page .balance .realname .button {width:90%; height:30px; font-size:15px; color:#fff; cursor:pointer; position:absolute; top:72px; left:5%; background:linear-gradient(to right, #f86363, #f52727); border:1px #f31616 solid; border-radius:30px; display: flex; flex-direction: row; align-items: center; justify-content: center;}

/*套餐有余额：联系我们*/
.index-page .balance .contact .qrcode { width:88px; height:88px; position:absolute; top:10px; left:10px; border:1px #000 solid;}
.index-page .balance .contact .qrcode img { width:88px; height:88px;}
.index-page .balance .contact .desc {width:90%; height:48px; line-height:16px; font-size:14px; color:#000; position:absolute; top:13px; left:5%;}
.index-page .balance .contact .desc span { padding-left:100px; display: -webkit-box; word-break: break-all;text-overflow: ellipsis; overflow: hidden;-webkit-box-orient: vertical; -webkit-line-clamp: 3;}
.index-page .balance .contact .button {width:50%; height:30px; font-size:15px; color:#fff; cursor:pointer; position:absolute; top:72px; left:110px; background:linear-gradient(to right, #60c8eb, #31bdec); border:1px #1bb7eb solid; border-radius:30px; display: flex; flex-direction: row; align-items: center; justify-content: center;}

/*套餐有余额：远程信息*/
.index-page .balance .remote .info { width:85px; height:20px; position:absolute; top:0; left:0; background:#66ccff; border-radius:6px 0 6px 0;}
.index-page .balance .remote .connect  { width:14px; height:14px; line-height:14px;  font-size:9px; text-align:center; position:absolute; bottom:4px; left:6px; border-radius:14px;}
.index-page .balance .remote .connect-black{ color:#FFF; background:#333;}
.index-page .balance .remote .connect-gray{ color:#FFF; background:#333; filter:alpha(opacity=20); -moz-opacity:0.2; -khtml-opacity: 0.2; opacity: 0.2;}
.index-page .balance .remote .signal { width:26px; height:14px; display:block; position:absolute; bottom:3px; left:20px;}
.index-page .balance .remote .signal-0 {background: url(image/signal-black-0.png) right center no-repeat;background-size: auto 14px;}
.index-page .balance .remote .signal-1 {background: url(image/signal-black-1.png) right center no-repeat;background-size: auto 14px;}
.index-page .balance .remote .signal-2 {background: url(image/signal-black-2.png) right center no-repeat;background-size: auto 14px;}
.index-page .balance .remote .signal-3 {background: url(image/signal-black-3.png) right center no-repeat;background-size: auto 14px;}
.index-page .balance .remote .signal-4 {background: url(image/signal-black-4.png) right center no-repeat;background-size: auto 14px;}
.index-page .balance .remote .signal-5 {background: url(image/signal-black-5.png) right center no-repeat;background-size: auto 14px;}
.index-page .balance .remote .battery { width:26px; height:14px; position:absolute; bottom:3px; left:52px; }
.index-page .balance .remote .battery-black {background: url(image/battery-black.png) right center no-repeat;background-size: auto 14px;}
.index-page .balance .remote .battery-gray {background: url(image/battery-gray.png) right center no-repeat;background-size: auto 14px;}
.index-page .balance .remote .battery cite { width:19px; height:10px; position:absolute; top:2px; left:2.5px; display:block;}
.index-page .balance .remote .battery cite i.background { display:block; height:10px; position:absolute; top:0; left:0; z-index:1; background:#333;}
.index-page .balance .remote .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-page .balance .remote .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-page .balance .remote .name { width:90%; height:20px; line-height:20px; position:absolute; left:3%; top:27px; 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-page .balance .remote .password{ width:90%; height:20px; line-height:20px; position:absolute; left:3%; top:47px; 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-page .balance .remote .button {width:90%; height:30px; font-size:14px; font-weight:normal; cursor:pointer; position:absolute; top:72px; color:#333333; left:5%; background:linear-gradient(to right, #c6eef5, #9be7f5); border:1px #8be4f4 solid; border-radius:30px; display: flex; flex-direction: row; align-items: center; justify-content: center;}
.index-page .balance .remote .primary{width:45%; height:30px; font-size:14px; font-weight:normal; cursor:pointer; position:absolute; top:72px; color:#333333; right:3%; background:linear-gradient(to right, #c6eef5, #9be7f5); border:1px #8be4f4 solid; border-radius:30px; display: flex; flex-direction: row; align-items: center; justify-content: center;}
.index-page .balance .remote .default{width:45%; height:30px; font-size:14px; font-weight:normal; cursor:pointer; position:absolute; top:72px; color:#333333; left:3%; background:linear-gradient(to right, #d8ecfe, #b3dbff); border:1px #a7d5fe solid; border-radius:30px; display: flex; flex-direction: row; align-items: center; justify-content: center;}

/*------------------------------------------------广告信息------------------------------------------------*/
.index-page .advert { width:94%; margin:10px auto; margin-bottom:0; cursor:pointer;}
.index-page .advert img { width:100%; border-radius:9px;}

/*------------------------------------------------导航信息------------------------------------------------*/
.index-page .navigation .list { width:94%; margin:10px auto; margin-bottom:0; border-radius:9px; background:#FFF; padding:10px 0 15px 0;}
.index-page .navigation .list .li { width:33.33%; height:100px; float:left; position:relative;}
.index-page .navigation .list .li .icon { width:54px; height:54px; position:absolute; top:10px; left:50%; z-index:2; margin-left:-27px;}
.index-page .navigation .list .li .icon img { width:54px; height:54px;}
.index-page .navigation .list .li .name {width:100%; height:20px; line-height:20px; text-align:center; font-size:14px; color:#000; position:absolute; top:70px; left:0;}
.index-page .navigation .list .li a { width:100%; height:100px; display:block; position:absolute; top:0; left:0; z-index:5;}
.index-page .swiper-navigation { width:94%; margin:10px auto; margin-bottom:0; background:#FFF; border-radius:9px; padding-bottom:30px;}
.index-page .swiper-navigation .nav{ width:25%; height:70px; float:left; position:relative; cursor:pointer;}
.index-page .swiper-navigation .nav .icon { width:100%; height:36px; position:absolute; top:10px; left:0; text-align:center;}
.index-page .swiper-navigation .nav .icon img { width:36px; height:36px; margin:0 auto;}
.index-page .swiper-navigation .nav .name { width:100%; height:14px; line-height:14px; position:absolute; top:55px; left:0; text-align:center; font-size:13px;}
.index-page .swiper-navigation .nav a { width:100%; height:70px; display:block; position:absolute; top:0; left:0; z-index:5;}

/*------------------------------------------------加速包信息------------------------------------------------*/
.index-page .expand { width:94%; height:54px; margin:10px auto; margin-bottom:0; border-radius:9px; background:url(image/expand.png); background-size:cover; background-position: center; position:relative; cursor:pointer;}
.index-page .expand .title { width:50%; height:16px; position:absolute; top:9px; left:15%; color:#6a4714; font-size:16px; font-weight:bold;}
.index-page .expand .desc { width:70%; height:16px; position:absolute; top:32px; left:15%; color:#8d6326; font-size:13px;}
.index-page .expand .button { width:78px; height:30px; position:absolute; top:12px; right:10px; background:#66420d; color:#f0e1c9; font-size:14px; border-radius:30px; display: flex; flex-direction: row; align-items: center; justify-content: center; animation: expand-animation 1s infinite;}

/*------------------------------------------------设备搜索------------------------------------------------*/
.index-search-page{ width:100%; margin:0 auto;}
.index-search-page .banner { width:100%; height:150px; margin:0 auto; clear:both; background:url(image/card-search-bg.png) left top no-repeat; background-size:100% auto; position:relative; overflow:hidden;}
.index-search-page .banner span { width:50%; height:20px; display:block; position:absolute; top:65px; left:25%; text-align:center; color:#FFF; font-size:22px; font-weight:bold;}
.index-search-page .phone { width:94%; height:50px;  margin:15px auto; margin-bottom:0; position:relative;}
.index-search-page .phone .input { width:100%; height:50px; position:relative;}
.index-search-page .phone .input:after{content: ''; position: absolute; top: 0; left: 0; border:1px #BDBDBD 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; background:#FFF;}
.index-search-page .phone .input .input-text{ width:100%; height:50px; line-height:22px; font-size:24px; font-weight:bold; color:#000; text-indent:10px; position:absolute; top:0; left:0; margin:0; padding:0; z-index:5; border:none; background:none;}
.index-search-page .phone .input .input-text::-webkit-input-placeholder { font-size:18px; color:#999; font-weight:normal;}
.index-search-page .phone .reset { width:50px; height:50px; display:none; position:absolute; top:0; right:50px; z-index:6; background:url(image/reset.png) center center no-repeat; background-size:auto 22px;}
.index-search-page .phone .scan { width:50px; height:50px; position:absolute; top:0; right:0; z-index:6; background:url(image/scan-gray.png) center center no-repeat; background-size:auto 22px;}
.index-search-page .button { width:94%; height:48px; margin:20px auto; margin-bottom:0; background:linear-gradient(to right, #25d177, #07C160); border:1px #06af57 solid; color:#FFF; font-size:18px; border-radius:6px; display: flex; flex-direction: row; align-items: center; justify-content: center; font-weight:bold;}