@charset"utf-8";
/* CSS Document */
*{ margin: 0; padding: 0; list-style: 0; font-family: "Microsoft YaHei UI Light", "微软雅黑" }
body { background:#cccccc; }
/*chrome滚动条颜色设置*/
div::-webkit-scrollbar {width:4px;height:4px;background-color:transparent;}/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
div::-webkit-scrollbar-track {background-color:#ccc; border-radius:0;box-shadow:inset 0 0 3px rgba(0, 0, 0, 0.2);}/*定义滚动条轨道 内阴影+圆角*/
div::-webkit-scrollbar-thumb {background-color:#096; border-radius:0;box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.1);}/*定义滑块 内阴影+圆角*/

ul { margin: 0; padding: 0; list-style: none; }
li { margin: 0; padding: 0; list-style: none;}
dl { margin: 0; padding: 0; list-style: none; }
dt { margin: 0; padding: 0; list-style: none;}
dd { margin: 0; padding: 0; list-style: none;}
p { margin: 0; padding: 0; }
a { margin: 0; padding: 0; text-decoration: none; color: #096; }
img { margin: 0; padding: 0; border: 0; }
h1 { margin: 0; padding: 0; }

/*取消标签点击时出现的色块*/
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}

/*密码提示*/
.pass { position: fixed; width:320px; height:220px; bottom: 50%; left: 50%; margin: auto auto -110px -160px; text-align: center; border-radius:20px; background:#fff; box-shadow:0 1px 6px  rgba(0,0,0,0.2);  animation: dow 1s;

}
@keyframes dow {from {bottom: 10%; opacity: 0;} to {bottom: 50%; opacity: 1;}}
.pass input {text-align: center; font-size: 20px; margin: 0; border: none; outline: none; }
.pass input::placeholder {color:#ddd;}

.pass input.in { position: absolute; top:70px; width: 130px; height: 60px; background: #fff; font-size: 20px; color: #ccc; text-align: center;background: #f2f2f2; }
.pass input.in.a { left:20px; border-radius:10px;}
.pass input.in.b { right:20px; border-radius:10px; }

.pass input.tn { position: absolute; right: 20px; bottom:20px;width: 130px; height: 50px; line-height:50px; border-radius:10px; color:#fff; cursor:pointer; font-size: 18px; background:#396; }
.pass input.tn.c{ position: absolute; left: 50%; margin:auto auto auto -65px; bottom:20px; }

.pass span { position: absolute; left: 20px; bottom: 20px; width: 130px; height: 50px; line-height:50px; border-radius:10px; color: #ffffff; text-align: center;   font-size: 18px; background: #c42b1c;}
.pass span a { display: block; color: #fff; text-decoration: none;}
.pass b{width: 320px;height: 50px; line-height: 50px; color: #999;display:block;border-radius:20px 20px 0 0 ; background: #eee; border-bottom:#ccc solid 1px; font-size: 18px;}

/*操作提示*/
.gobox { position: fixed; width: 320px; height: 180px; top: 50%; left: 50%;  margin: -140px auto auto -160px; text-align: center; border-radius: 20px; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); animation: up 0.5s; }
@keyframes up {from {top:10%; opacity: 0;} to {top:50%; opacity: 1;}}
.gobox span { float: left; width: 320px; height: 115px; padding-top: 10px; text-align: center; color: #666666; line-height: 38px; font-size: 18px;  }
.gobox a { color: #ffffff; font-size: 80%; position: absolute; text-align: center; width: 70px; height: 70px; line-height: 70px; left:50%; bottom:-40px; margin:0 0 0 -35px; border-radius:35px 35px 35px 35px; font-size: 18px; background: #c42b1c; display: block; text-decoration: none; }
.gobox b{width: 320px;height: 50px; line-height: 50px; color: #999;display:block;border-radius:20px 20px 0 0 ; background: #eee; border-bottom:#ccc solid 1px; font-size: 18px;}

/*loading*/
#loading { width: 100%; height: 100%; background: #ffffff; text-align: center; position: fixed; overflow: hidden; z-index: 999999; }
.loading { position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -75px; width: 150px; height: 30px; text-align: center; }
.loading > li { width: 30px; height: 30px; border-radius: 100%; display: inline-block; background-color: #67CF22; animation: bouncedelay 1.4s infinite ease-in-out; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; 
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both; animation-fill-mode: both; }
.loading .loading1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.loading .loading2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }
.loading .loading3 { -webkit-animation-delay: 0s; animation-delay: 0s; }
@-webkit-keyframes bouncedelay {  
0%, 80%, 100% {
 -webkit-transform: scale(0.0)
}
 40% {
 -webkit-transform: scale(1.0)
}
}
@keyframes bouncedelay {  
0%, 80%, 100% {
 transform: scale(0.0);
 -webkit-transform: scale(0.0);
}
 40% {
 transform: scale(1.0);
 -webkit-transform: scale(1.0);
}
}
/** 状态栏 **/
.status { position: absolute; display: flex; align-items: center; padding: 0 0px; width: 100%; height: 25px; line-height: 25px; font-size: 16px; color: #fff; background: #000; opacity: 0.2; }
.status > div { width: 33.33%; }
.carrier { margin: 0 auto 0 5px; }
/* 时间 */
.clock { text-align: center; }
/* 电池 */
.battery-meter { margin: 0 5px 0 auto; height: 23px; width: 29px; }
.battery-meter > div { display: inline-block; }
.battery-meter-inner { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset; border-radius: 3px; margin-right: 1px; position: relative; height: 12px; width: 25px; }
.battery-meter-inner:before, .battery-meter-inner:after { content: ""; display: block; }
.battery-meter-inner:before { background-color: #fff; border-radius: 1px 0 0 1px; margin: 2px; height: 8px; width: 19px; }
.battery-meter-inner:after { background-color: rgba(255, 255, 255, 0.5); border-radius: 0 3px 3px 0; position: absolute; top: 0; left: 100%; margin: 4px 0 0 1px; height: 4px; width: 2px; }

/*头部*/
header { position: sticky; top: 0; width: 100%; height: 40px;box-shadow: 0 2px 8px #bbbbbb;z-index:9999; }
header h1 { width: 100%; height: 40px; line-height: 40px; text-align: center; border-bottom: 1px solid #ddd; border-top: 1px solid #eee;color: #666; font-weight: 500; font-size: 24px; background: #fff; }

/*左侧菜单*/
#left{ position: fixed;float:felt; top: 0; left:0; width:60px; height:100%; background: #333;z-index: 99999; /*animation: left 0.5s;*/}
/*@keyframes left {from {left:-60px; opacity: 0;} to {left:0; opacity: 1;}}*/
.left{width:60px; height:100%; padding:20px 0 0 0;}
.left dt{width:35px;height:35px; margin:0px auto; border-radius:20px; background: #fff url("/images/favicon.png") no-repeat center; background-size:37px 37px;}
.left dt a{width:35px;height:35px;display:block;}
.left dd a{width:35px;height:35px; margin:10px auto; border-radius:20px; display:block;opacity:0.5;}
.left dd a.l1{background: url("/images/b1.png") no-repeat center ;background-size:30px 30px;}
.left dd a.l2{background: url("/images/c1.png") no-repeat center ;background-size:30px 30px;}
.left dd a.l3{background: url("/images/c2.png") no-repeat center ;background-size:30px 30px;}
.left dd a.l4{background: url("/images/c3.png") no-repeat center ;background-size:30px 30px;}
.left dd a.l5{background: url("/images/c4.png") no-repeat center ;background-size:30px 30px;}
.left dd a.l6{background: url("/images/c5.png") no-repeat center ;background-size:30px 30px;}
.left dd a.l7{background: url("/images/c0.png") no-repeat center ;background-size:30px 30px;}
.left dd a:hover{opacity: 1;}

/*左侧菜单*/
#f-left{ position: fixed;float:left; bottom:0; left:0; width:100%; height:60px; background: #333;z-index: 99999; /*animation: bottom 0.5s;*/}
/*@keyframes bottom {from {bottom:-60px; opacity: 0;} to {bottom:0; opacity: 1;}}*/
.f-left{width:100%; height:35px;}

.f-left dt{float:left;width:35px;height:35px; margin:10px 0 0 10px; border-radius:20px; background: url("../images/c0.png") no-repeat center; background-size:37px 37px;}
.f-left dt a{width:35px;height:35px; display:block;}

.f-left dd{float:left;width:35px;height:35px; margin:10px 0 0 10px;}
.f-left dd a{width:35px;height:35px; margin:0 10px; border-radius:20px;display:block;opacity:0.5;}
.f-left dd a.l1{background: url("../images/b1.png") no-repeat center ;background-size:37px 37px;}
.f-left dd a.l2{background: url("../images/c1.png") no-repeat center ;background-size:37px 37px;}
.f-left dd a.l3{background: url("../images/c2.png") no-repeat center ;background-size:37px 37px;}
.f-left dd a.l4{background: url("../images/c3.png") no-repeat center ;background-size:37px 37px;}
.f-left dd a.l5{background: url("../images/c4.png") no-repeat center ;background-size:37px 37px;}
.f-left dd a.l6{background: url("../images/c5.png") no-repeat center ;background-size:37px 37px;}
.f-left dd a.l7{background: url("../images/c6.png") no-repeat center ;background-size:37px 37px;}
.f-left dd a:hover{opacity: 1;}


/*菜单*/
nav { position: fixed; bottom: 0px; text-align: center; width:100%; margin: 0 auto 0 auto; z-index: 999; }
nav a { width: 80px; height: 50px; line-height: 52px; margin: 0 auto 0 auto; display: inline-block; text-align: center; font-size: 18px; color: #fff; background: #096; cursor: pointer; }
nav a.top { width: 50px; background: #096; border-radius: 25px 0px 0 25px; }
nav a.bot { width: 50px; border-left: 1px solid #ffffff; background: #c10d0d; border-radius: 0 25px 25px 0; }

#daohang{ position: fixed; bottom: 0px; text-align: center; width: 100%; padding-top:5px; box-shadow: 0 2px 8px #bbbbbb; border-top: 1px solid #ddd;background: #ffffff;opacity:0.5; 
    backdrop-filter:blur(20px);
	-webkit-backdrop-filter:blur(20px);
	pointer-events:none;
	z-index: 998;}
.daohang{ position: fixed; bottom: 5px; text-align: center; width: 100%; padding-top:5px; z-index: 999;}
.daohang a{ height: 40px; line-height: 40px; padding:0 12px 0 12px; margin:0; display: inline-block; text-align: center; font-size: 16px; color: #fff; background: #6fba2c; cursor: pointer; }
.daohang a.left_a {width:40px; height:40px;background:#096;padding:0 3px 0 3px;border-radius: 10px 0 0 10px;}
.daohang a.right_a {width:40px; height:40px;background:#096;padding:0 3px 0 3px;border-radius: 0 10px 10px 0;}
.daohang a.h{background: #FF9D00; }


.home { width: 100%; height: 100%; }
.home ul { max-width: 1080px; height: 100%; margin: 0 auto 0 auto; padding: 80px 20px 0 20px; overflow: hidden; -webkit-transition: all 0.3s;transition: all 0.3s; }
.home ul li, .home dl dd { float: left; height: auto; display: block; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; }
.home ul li a, .home dl dd a { position: relative; width: 115px; height: 130px; margin: 0 auto; display: block; text-align: center; border-radius: 20px; }
.home ul li a i, .home dl dd a i { display: block; font-style: normal; color: #fff; text-decoration: none; text-align: center; font-size: 18px; text-shadow: 0 0 2px #333; font-weight:300;}
.home dl dd {margin:0 2.5px;}
.home ul li a b, .home dl dd a b{position: absolute; top:1px; right:1px;min-width:14px; padding:1px 6px; background:#f00; color:#fff;border-radius: 20px 20px 20px 1px;font-weight:300;text-align: center;box-shadow: 0 0 2px rgba(000, 000, 000, 0.3);opacity: 0.8;}

.home span { position:relative; width:90px; height:90px; display: inline-block; border-radius: 20px; text-align: center; margin-top: 10px; box-shadow: 0 0 2px rgba(000, 000, 000, 0.3); overflow: hidden;}

.home span.yue1 { width: 90px; height: 90px; overflow: hidden; }
.home span.yue1 .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.3;}
.home span.yue1 .tb{ position: absolute; left:-5px; bottom:-1px; width:110px; border-radius:0;background: #6fba2c ;opacity: 1;
            -webkit-animation:2.5s sb_sz infinite;
            animation:2.5s sb_sz infinite;
            -webkit-transform-origin:50% 50%;
            -ms-transform-origin:50% 50%;
            transform-origin: 50% 50%;}
@keyframes sb_sz {
            0% {-webkit-transform:rotate(1deg);transform:rotate(1deg);}
            50% {-webkit-transform:rotate(-1deg);transform:rotate(-1deg);}
            100% {-webkit-transform:rotate(1deg);transform:rotate(1deg);}
        }
.home span.yue1 .tubiao{ position: absolute; left:15px; bottom:15px; width: 50px; height: 50px; line-height:50px; font-size:28px; font-weight:600; color:#fff; border:5px solid #fff; border-radius:10px; opacity:1;  }

@media (max-width:2560px) {
.home ul li { width: 12.5%; }
}
@media (max-width:2559px) {
.home ul li { width: 12.5%; }
}
@media (max-width:2047px) {
.home ul li { width: 12.5%; }
}
@media (max-width:1919px) {
.homeul li { width: 12.5%; }
}
@media (max-width:1599px) {
.home ul li { width: 12.5%; }
}

@media (max-width:1439px) {
.home ul li { width: 14.285714%; }
}
@media (max-width:1279px) {
.home ul { padding: 30px 10px 0 10px; }
.home ul li { width: 14.285714%; }
}
@media (max-width:1079px) {
.home ul li { width: 14.285714%; }
}
@media (max-width:959px) {/*719*/
.home ul li { width: 14.285714%; }
}
@media (max-width:839px) {/*629*/
.home ul li { width: 16.66666666%; }
}
@media (max-width:719px) {
.home ul li { width: 20%; }
}
@media (max-width:599px) {
.home ul li { width: 25%; }
}
@media (max-width:479px) {
.home ul li { width: 33.3333333333%; }
}
@media (max-width:359px) {
.home ul li { width: 50%; }
}
@media (max-width:279px) {
.home ul li { width: 100%; }
}

/*主体*/
article { width: 100%; height: 100%; }
article ul { max-width: 1080px; height: 100%; margin: 0 auto 0 auto; padding: 80px 20px 0 20px; overflow: hidden; -webkit-transition: all 0.3s;transition: all 0.3s; }
article ul li, article dl dd { float: left; height: auto; display: block; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; }
article ul li a, article dl dd a { position: relative; width: 115px; height: 130px; margin: 0 auto; display: block; text-align: center; border-radius: 20px; }
article ul li a i, article dl dd a i { display: block; font-style: normal; color: #fff; text-decoration: none; text-align: center; font-size: 16px; text-shadow: 0 0 2px #333; font-weight:300;}
article dl dd {margin:0 2.5px;}
article ul li a b, article dl dd a b{position: absolute; top:1px; right:1px;min-width:14px; padding:1px 6px; background:#f00; color:#fff;border-radius: 20px 20px 20px 1px;font-weight:300;text-align: center;box-shadow: 0 0 2px rgba(000, 000, 000, 0.3);opacity: 0.8;}

/**图标框架**/
article span.b { position:relative;  display: inline-block; border-radius: 20px; text-align: center; margin-top: 10px; box-shadow: 0 0 2px rgba(000, 000, 000, 0.3); overflow: hidden;}
article span.b0 { width:90px; height:90px; background: #fff; opacity: 0.1; }/*图标透明背景*/

/**小图标框架**/
article span.sb { position: absolute; display: inline-block; border-radius: 5px; text-align: center; margin-top: 8px; }

/*小图标位置*/
article span.wz1{top: 11px; left: 21px;}
article span.wz2{top: 11px; left: 47px;}
article span.wz3{top: 11px; left: 73px;}
article span.wz4{top: 36px; left: 21px;}
article span.wz5{top: 36px; left: 47px;}
article span.wz6{top: 36px; left: 73px;}
article span.wz7{top: 61px; left: 21px;}
article span.wz8{top: 61px; left: 47px;}
article span.wz9{top: 61px; left: 73px;}

article span.wz11{top: 11px; left: 21px;}
article span.wz22{top: 11px; left: 60px;}
article span.wz33{top: 36px; left: 21px;}
article span.wz44{top: 36px; left: 60px;}
article span.wz55{top: 61px; left: 21px;}
article span.wz66{top: 61px; left: 60px;}

article span.bwz11{top: 25px; left: 22px;}
article span.bwz22{top: 50px; left: 22px;}
article span.bwz33{top: 75px; left: 22px;}
article span.bwz44{top: 100px; left: 22px;}
article span.bwz55{top: 125px; left: 22px;}
article span.bwz66{top: 150px; left: 22px;}
article span.bwz77{top: 175px; left: 22px;}



article span .hongs{background:;}
article span .chengs{background:;}
article span .huangs{background:;}
article span .lvs{background:#00b050;}
article span .lans{background:;}

/**渠道占比小图标**/
article span.sb_sz { width: 21px; height: 21px; overflow: hidden; }
article span.sb_sz .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.1;}
article span.sb_sz .tb{ position: absolute; left:-5px; bottom:-1px; width:31px; border-radius:0;background: #6fba2c ;opacity: 1;
            -webkit-animation:2.5s sb_sz infinite;
            animation:2.5s sb_sz infinite;
            -webkit-transform-origin:50% 50%;
            -ms-transform-origin:50% 50%;
            transform-origin: 50% 50%;}
@keyframes sb_sz {
            0% {-webkit-transform:rotate(1deg);transform:rotate(1deg);}
            50% {-webkit-transform:rotate(-1deg);transform:rotate(-1deg);}
            100% {-webkit-transform:rotate(1deg);transform:rotate(1deg);}
        }
article span.sb_sz .tbiao{ position: absolute; left:0px; width: 21px; height: 21px; line-height:21px; font-size:12px; font-weight:300; color:#fff; border:0px solid #fff; border-radius:40px;opacity:0.9; }

article span.sb_dh { width: 21px; height:21px; line-height:21px;border-radius: 6px; background: #f39700;  font-weight:300;font-size:12px; color:#fff; overflow: hidden;}
article span.sb_dh .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.3;}
article span.sb_dh .tb{ position: absolute; left:-5px; bottom:-1px; width:31px; border-radius:0;background: #6fba2c ;opacity: 1;
            -webkit-animation:2.5s sb_dh infinite;
            animation:2.5s sb_dh infinite;
            -webkit-transform-origin:50% 50%;
            -ms-transform-origin:50% 50%;
            transform-origin: 50% 50%;}
@keyframes sb_dh {
            0% {-webkit-transform:rotate(1deg);transform:rotate(1deg);}
            50% {-webkit-transform:rotate(-1deg);transform:rotate(-1deg);}
            100% {-webkit-transform:rotate(1deg);transform:rotate(1deg);}
        }
article span.sb_dh .tbiao{ position: absolute; left:0px; width: 21px; height: 21px; line-height:21px; font-size:12px; font-weight:300; color:#fff; border:0px solid #fff; border-radius:40px;opacity:0.9; }

/**朋友圈小图标#00b0f0**/
article span.b_pyq {width: 90px; height: 90px;}
article span.b_pyq .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.1;}
article span.b_pyq .tb{ position: absolute; left:-10px; bottom:-1px; width:110px; border-radius:0;background: #f2f2f2 ;opacity: 0.1;
            -webkit-animation:3.5s b_pyq infinite;
            animation:3.5s b_pyq infinite;
            -webkit-transform-origin:50px 50%;
            -ms-transform-origin:50px 50%;
            transform-origin: 50px 50%;}
@keyframes b_pyq {
            0% {
                -webkit-transform:rotate(3deg);
                transform:rotate(3deg);
            }
            50% {
                -webkit-transform:rotate(-3deg);
                transform:rotate(-3deg);
            }
            100% {
                -webkit-transform:rotate(3deg);
                transform:rotate(3deg);
            }
        }
article span.b_pyq .tubiao{ position: absolute; left:14px; bottom:14px; width: 60px; height: 60px; line-height:60px; font-size:24px; font-weight:600; color:#fff; border:1px solid #fff; border-radius:40px; opacity:0.8; }
article span.b_pyq .tubiao span{font-size:12px;margin-right:-10px;}

article span.s_pyq { width: 34px; height: 21px; overflow: hidden; }
article span.s_pyq .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.1;}
article span.s_pyq .tb{ position: absolute; left:-1px; bottom:-3px; height:27px; border-radius:0;background: #f2f2f2 ;opacity: 0.3;}
article span.s_pyq .tbiao{ position: absolute; left:0px; width:34px; height: 21px; line-height:21px;  text-align:center;font-size:12px; font-weight:300; color:#fff; border:0px solid #fff; border-radius:40px;opacity:0.9; }
article span.s_pyq .tubiao span{font-size:12px;}

/**渠道数据图标#00b0f0  #6fba2c**/
article ul li a.bbb, article dl dd a.bbb { position: relative; width: 115px; height: 259px; margin: 0 auto; display: block; text-align: center; border-radius: 20px; }
article ul li a.bbbb, article dl dd a.bbbb { position: relative; width: 115px; height: 259px; margin: 0 auto; display: block; text-align: center; border-radius: 20px; }

article span.b_bqd {width:90px; height: 220px;}
article span.b_bqd .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.1;}
article span.b_bqd .tb{ position: absolute; left:-10px; bottom:-1px; width:110px; border-radius:0; border-top:0px #fff solid; background: #6fba2c ;opacity: 0.8;
-webkit-animation:3.5s qudao infinite;
animation:3.5s qudao infinite;
            -webkit-transform-origin:55px 50%;
            -ms-transform-origin:55px 50%;
            transform-origin: 55px 50%;}
@keyframes qudao {
            0% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
            50% {
                -webkit-transform:rotate(-1deg);
                transform:rotate(-1deg);
            }
            100% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
        }
article span.b_bqd .tbd{ position: absolute; left:0px; bottom:-1px; width:115px; background: #f2f2f2 ;opacity: 0.1;}
article span.b_bqd .tbd span{position: absolute; width:18px; height:18px; line-height:18px; left:1px; top:-19px; color:#fff; border:0.5px #fff dashed;border-radius:10px;font-size:12px;}
article span.b_bqd .tubiao{ position: absolute; left:14px; bottom:14px; width: 55px; height: 55px; line-height:45px; font-size:28px; font-weight:600; color:#fff; border:0px solid #fff; border-radius:40px; opacity:0.0; }

article span.s_bqd { width: 70px; height: 21px; overflow: hidden; }
article span.s_bqd .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.1;}
article span.s_bqd .tb{ position: absolute; left:-1px; bottom:0px; height:21px; border-radius:0 4px 4px 0;background: #f2f2f2 ;opacity: 0.3;}
article span.s_bqd .tbiao{ position: absolute; left:0px; width: 65px; height: 21px; line-height:21px;  padding-right:5px; text-align:right;font-size:12px; font-weight:300; color:#fff; border:0px solid #fff; border-radius:40px;opacity:0.8; }

/**小图标#00b0f0  #6fba2c**/
article span.b_qd {width:90px; height: 90px;}
article span.b_qd .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.1;}
article span.b_qd .tb{ position: absolute; left:-10px; bottom:-1px; width:110px; border-radius:0;background: #6fba2c ;opacity: 0.8;
            -webkit-animation:3.5s qudaos infinite;
            animation:3.5s qudaos infinite;
            -webkit-transform-origin:55px 50%;
            -ms-transform-origin:55px 50%;
            transform-origin: 55px 50%;}
@keyframes qudaos {
            0% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
            50% {
                -webkit-transform:rotate(-1deg);
                transform:rotate(-1deg);
            }
            100% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
        }
article span.b_qd .tbd{ position: absolute; left:0px; bottom:-1px; width:115px; background: #f2f2f2 ;opacity: 0.1;}
article span.b_qd .tbxx{ position: absolute; left:-10px; bottom:-1px; width:110px; border-radius:0;background: #f0c144 ;opacity: 0.8;
            -webkit-animation:3.5s qudaos infinite;
            animation:3.5s qudaos infinite;
            -webkit-transform-origin:55px 50%;
            -ms-transform-origin:55px 50%;
            transform-origin: 55px 50%;}
@keyframes qudaos {
            0% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
            50% {
                -webkit-transform:rotate(-1deg);
                transform:rotate(-1deg);
            }
            100% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
        }
        
article span.b_qd .tbzt{ position: absolute; left:-10px; bottom:-1px; width:110px; border-radius:0;background: #00b0f0 ;opacity: 0.8;
            -webkit-animation:3.5s qudaos infinite;
            animation:3.5s qudaos infinite;
            -webkit-transform-origin:55px 50%;
            -ms-transform-origin:55px 50%;
            transform-origin: 55px 50%;}
@keyframes qudaos {
            0% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
            50% {
                -webkit-transform:rotate(-1deg);
                transform:rotate(-1deg);
            }
            100% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
        }
article span.b_qd .tubiao{ position: absolute; left:14px; bottom:14px; width: 55px; height: 55px; line-height:45px; font-size:28px; font-weight:600; color:#fff; border:0px solid #fff; border-radius:40px; opacity:0.0; }

article span.s_qd { width: 34px; height: 21px; overflow: hidden; }
article span.s_qd .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.1;}
article span.s_qd .tb{ position: absolute; left:-1px; bottom:0px; height:21px; border-radius:0 4px 4px 0;background: #f2f2f2 ;opacity: 0.3;}
article span.s_qd .tbiao{ position: absolute; left:0px; width:34px; height: 21px; line-height:21px;  text-align:center;font-size:12px; font-weight:300; color:#fff; border:0px solid #fff; border-radius:40px;opacity:0.8; }


/**总数居**/
article span.c_zixun {width: 90px; height: 220px;}
article span.c_zixun .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.1;}
article span.c_zixun .tb{ position: absolute; left:-10px; bottom:-1px; width:110px; border-radius:0;background: #00b0f0 ;opacity: 0.8;
            -webkit-animation:3.5s c_zixun infinite;
            animation:3.5s c_zixun infinite;
            -webkit-transform-origin:50px 50%;
            -ms-transform-origin:50px 50%;
            transform-origin: 50px 50%;}
@keyframes c_zixun {
            0% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
            50% {
                -webkit-transform:rotate(-1deg);
                transform:rotate(-1deg);
            }
            100% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
        }
article span.c_zixun .tubiao{ position: absolute; left:12.5px; bottom:12.5px; width: 50px; height: 50px; line-height:50px; font-size:28px; font-weight:600; color:#fff; border:0px solid #fff; border-radius:40px;opacity:0.5; }

.chat.icon {
  color: #fff;
  position: absolute;
  left: 15px;
  top: 18px;
  width: 50px;
  height: 40px;
  border: solid 5px currentColor;
  border-radius:10px;
  font-size:28px; line-height:40px; font-weight:600;
  opacity:1;
}

article span.c_zixun .chat.icon{background:#f0c144;}
article span.c_zixun .chat.icon:before{background:#f0c144 /*6fba2c*/;}

.chat.icon:before {
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  width: 10px;
  height: 10px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border-bottom: solid 5px currentColor;
  border-right: solid 5px currentColor;
  border-radius:0 0 3px 0;
  opacity:1;
}

article span.c_rb { width:90px; height:90px;/*background: #f0c144;*/ }
article span.c_rb .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.1;}
article span.c_rb .tb{ position: absolute; left:0px; top:0px; width:90px; height:90px; border-radius:20px 20px 20px 20px ;background: #f2f2f2 ;opacity:0.0;}
article span.c_rb .tubiao{ position: absolute; left:0px; top:0px; width:90px; height:90px; line-height:90px; font-size:28px; font-weight:600; color:#fff; border:0px solid #fff; border-radius:0 0 20px 20px;opacity:1; }

.span1{
            position: absolute; left:20px; top:20px;
            width: 40px;
            height: 40px;
            border: #fff solid;
            border-radius:10px 10px 10px 10px;
            border-width:5px 5px 5px 5px;
            display: block;
        }
.span1 span{position: absolute;
            width: 8px;
            background: #fff;
            border-radius:3px 3px 0px 0px;
}
.span1 .sp1{
            height: 10px;
            left:8px;
            bottom:0;
}
.span1 .sp2{
            height: 15px;
            left:24px;
            bottom:0;
}
.span1::before{
            content: '';
            height: 5px;
            width: 19.4px;
            display: block;
            background: #fff;
            position: absolute;
            border-radius:10px;
            top: 17px;
            left: 0;
            transform: rotate(-55deg);
            box-shadow: 14.5px 10px 0 #fff;  /* 这里第二条向上的折线就是用这个box-shadow实现的，向右平移了15像素，向上平移了10像素，0为不模糊，颜色为#333 */
        }
.span1::after{
            content: '';
            height: 5px;
            width: 14px;
            display: block;
            background: #fff;
            position: absolute;
            border-radius:10px;
            top: 14.5px;
            left: 11px;
            transform: rotate(39deg);
        }
.span2::before{
            content: '';
            height: 0;
            width: 0;
            display: block;
            border: 10px solid transparent;
            border-right-width: 0;  /* 这里右边框的宽度设置为0可以使上边框（三角形）失去右边的一半，以达到想要的效果 */
            border-top-color: #fff;
            position: absolute;
            top: 4px;
            left: 26.4px;
            transform: rotate(-9deg);
        }

/**渠道数据**/
article span.c_xinxiliu { width: 90px; height: 90px;/*background: #f0c144;*/ }
article span.c_xinxiliu .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.1;}
article span.c_xinxiliu .tb{ position: absolute; left:-10px; bottom:-1px; width:110px;  border-radius:2px ;background: #f39700 ;opacity: 1;
-webkit-animation:3.0s c_xinxiliu infinite;
            animation:3.0s c_xinxiliu infinite;
            -webkit-transform-origin:50px 50%;
            -ms-transform-origin:50px 50%;
            transform-origin: 50px 50%;}
@keyframes c_xinxiliu {
            0% {
                -webkit-transform:rotate(2deg);
                transform:rotate(2deg);
            }
            50% {
                -webkit-transform:rotate(-2deg);
                transform:rotate(-2deg);
            }
            100% {
                -webkit-transform:rotate(2deg);
                transform:rotate(2deg);
            }
        }
    
article span.c_xinxiliu .tubiao{ position: absolute; left:10px; bottom:10px; width: 60px; height: 60px; line-height:60px; font-size:20px; font-weight:600; color:#fff; border:5px solid #fff; border-radius:40px;opacity:0.8;}
article span.c_xinxiliu .tubiaotxt{ position: absolute; left:15px; bottom:15px; width: 60px; height: 60px; line-height:60px; font-size:20px; font-weight:600; color:#fff; border-radius:40px;opacity:0.8;}


/**渠道占比**/
article span.c_qdyj {width:90px; height:90px; }
article span.c_qdyj .tbg{ position: absolute; left:0; bottom:0px; width:90px; height:90px; background: #f2f2f2 ;opacity: 0.1;}
article span.c_qdyj .tb{ position: absolute; left:-10px; bottom:-1px; width:110px; border-radius:0;background: #6fba2c ;opacity: 1;
            -webkit-animation:2.5s c_qdyj infinite;
            animation:2.5s c_qdyj infinite;
            -webkit-transform-origin:50px 50%;
            -ms-transform-origin:50px 50%;
            transform-origin: 50px 50%;}
@keyframes c_qdyj {
            0% {-webkit-transform:rotate(1deg);transform:rotate(1deg);}
            50% {-webkit-transform:rotate(-1deg);transform:rotate(-1deg);}
            100% {-webkit-transform:rotate(1deg);transform:rotate(1deg);}
        }
article span.c_qdyj .tubiao{ position: absolute; left:12.5px; bottom:12.5px; width: 55px; height: 55px; line-height:55px; font-size:28px; font-weight:600; color:#fff; border:5px solid #fff; border-radius:40px;opacity:0.9; }
article span.c_qdyj .tubiao .bfb{position: absolute; right:2px; bottom:0px;font-size:12px;}
article span.c_qdyj .tbiao{ position: absolute; left:20.5px; bottom:17.5px; width: 55px; height: 55px; line-height:55px; font-size:28px; font-weight:500; color:#fff; border:0px solid #fff; border-radius:40px;opacity:0.9; }
article span.c_qdyj .tbiao .bfb{font-size:12px;}



/**周业绩**/
article span.c_yj {width: 90px; height: 90px;}
article span.c_yj .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.1;}
article span.c_yj .tbd{ position: absolute; left:-10px; bottom:-1px; width:110px; background: #f2f2f2 ; opacity: 0.1;}
article span.c_yj .tb{ position: absolute; left:-10px; bottom:-1px; width:110px; border-radius:0;background: #6fba2c;opacity: 0.8;
            -webkit-animation:2.5s c_yj infinite;
            animation:2.5s c_yj infinite;
            -webkit-transform-origin:50px 50%;
            -ms-transform-origin:50px 50%;
            transform-origin: 50px 50%;}
@keyframes c_yj {
            0% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
            50% {
                -webkit-transform:rotate(-1deg);
                transform:rotate(-1deg);
            }
            100% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
        }
article span.c_yj .tubiao{ position: absolute; margin:13px 13px; width: 60px; height:60px; line-height:60px; font-size:24px; font-weight:600; color:#fff; border:1px dashed #fff; border-radius:40px; opacity: 0.8;overflow: hidden;}

article span.c_yj .tubiaobg{position: absolute; left:-10px; bottom:0px; width:80px; border-radius:0;background: #00b0f0 ;opacity: 1;
            -webkit-animation:2s c_yj infinite;
            animation:2s c_yj infinite;
            -webkit-transform-origin:50px 50%;
            -ms-transform-origin:50px 50%;
            transform-origin: 50px 50%;}
@keyframes c_yj {
            0% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
            50% {
                -webkit-transform:rotate(-1deg);
                transform:rotate(-1deg);
            }
            100% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
        }
article span.c_yj .tubiaotxt{position: absolute; left:0px; bottom:0px; width:60px;height:60px; line-height:60px;opacity: 1;}
article span.c_yj .tubiao span{font-size:12px;}

article span.c_yjs {width: 90px; height: 90px;}
article span.c_yjs .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.1;}
article span.c_yjs .tbd{ position: absolute; left:-10px; bottom:-1px; width:110px; background: #f2f2f2 ; opacity: 0.1;}
article span.c_yjs .tb{ position: absolute; left:-10px; bottom:-1px; width:110px; border-radius:0;background: #6fba2c;opacity: 0.8;
            -webkit-animation:2.5s c_yjs infinite;
            animation:2.5s c_yjs infinite;
            -webkit-transform-origin:50px 50%;
            -ms-transform-origin:50px 50%;
            transform-origin: 50px 50%;}
@keyframes c_yjs {
            0% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
            50% {
                -webkit-transform:rotate(-1deg);
                transform:rotate(-1deg);
            }
            100% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
        }
article span.c_yjs .tubiao{ position: absolute; bottom:5px;right:5px; width: 35px; height:25px; line-height:25px; font-size:14px; font-weight:300; color:#fff; border:0px dashed #fff; border-radius:0px; opacity: 0.8;overflow: hidden;}
article span.c_yj .tubiao.pk, article span.c_yjs .tubiao.pk{color:#FFFF00;border:0px solid #FFFF00; border-radius:20px 20px 5px 5px; }

article span.c_yjs .tubiaobg{position: absolute; left:-10px; bottom:0px; width:80px; border-radius:0;background: #00b0f0 ;opacity: 1;
            -webkit-animation:2s c_yjs infinite;
            animation:2s c_yjs infinite;
            -webkit-transform-origin:40px 50%;
            -ms-transform-origin:40px 50%;
            transform-origin: 40px 50%;}
@keyframes c_yjs {
            0% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
            50% {
                -webkit-transform:rotate(-1deg);
                transform:rotate(-1deg);
            }
            100% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
        }
article span.c_yjs .tubiaotxt{position: absolute; left:0px; bottom:0px; width:60px;height:60px; line-height:60px;opacity: 1;}
article span.c_yjs .tubiao span{;font-size:10px;}

article span.ywz11{top: 12px; left: 22px;}
article span.ywz22{top: 30px; left: 22px;}
article span.ywz33{top: 48px; left: 22px;}
article span.ywz44{top: 66px; left: 22px;}
article span.ywz55{top: 125px; left: 22px;}
article span.ywz66{top: 150px; left: 22px;}
article span.ywz77{top: 175px; left: 22px;}

article span.s_byjs { width: 40px; height: 15px; overflow: hidden; }
article span.s_byjs .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.1;}
article span.s_byjs .tb{ position: absolute; left:0px; bottom:0px; height:15px; border-radius:0 4px 4px 0;background: #f2f2f2 ;opacity: 0.3;}
article span.s_byjs .tbiao{ position: absolute; left:0px; width:34px; height: 15px; line-height:15px;  text-align:center;font-size:12px; font-weight:300; color:#fff; border:0px solid #fff; border-radius:40px;opacity:0.8; }


/**回访**/
article span.c_hf {width: 90px; height: 90px;}
article span.c_hf .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.1;}
article span.c_hf .tbd{ position: absolute; left:-10px; bottom:-1px; width:110px; border-radius:0;background:#f2f2f2; border-top:1px #fff dashed;opacity: 0.1;}
article span.c_hf .tb{ position: absolute; left:-10px; bottom:-1px; width:110px; border-radius:0;background: #f2f2f2;opacity: 0.1;
            -webkit-animation:2.5s c_hf infinite;
            animation:2.5s c_hf infinite;
            -webkit-transform-origin:50px 50%;
            -ms-transform-origin:50px 50%;
            transform-origin: 50px 50%;}
@keyframes c_hf {
            0% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
            50% {
                -webkit-transform:rotate(-1deg);
                transform:rotate(-1deg);
            }
            100% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
        }
article span.c_hf .tubiao{ position: absolute; margin:13px 13px; width: 60px; height:60px; line-height:60px; font-size:24px; font-weight:600; color:#fff; border:1px dashed #fff; border-radius:40px; opacity: 0.8;overflow: hidden;}
article span.c_hf .tubiaobg{position: absolute; left:-10px; bottom:0px; width:80px; border-radius:0;background: #00b0f0 ;opacity: 1;
            -webkit-animation:2s c_hf infinite;
            animation:2s c_hf infinite;
            -webkit-transform-origin:40px 50%;
            -ms-transform-origin:40px 50%;
            transform-origin: 40px 50%;}
@keyframes c_hf {
            0% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
            50% {
                -webkit-transform:rotate(-1deg);
                transform:rotate(-1deg);
            }
            100% {
                -webkit-transform:rotate(1deg);
                transform:rotate(1deg);
            }
        }
article span.c_hf .tubiaotxt{position: absolute; left:0px; bottom:0px; width:60px;height:60px; line-height:60px;opacity: 1;}
article span.c_hf .tubiao span{margin-right:-10px;font-size:12px;}

/**日报**/
article span.c_ribao { width: 90px; height: 90px;/*background: #f0c144;*/ }
article span.c_ribao .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.3;}
article span.c_ribao .tb{ position: absolute; left:0px; top:0px; width:90px; height:90px; border-radius:20px 20px 30px 20px ;background: #f0c144 ;opacity: 1;}
article span.c_ribao .tubiao{ position: absolute; left:15px; bottom:15px; width: 50px; height: 50px; line-height:50px; font-size:28px; font-weight:600; color:#fff; border:5px solid #fff; border-radius:10px;opacity:0.8; }


/**排班**/
article span.c_pb { width: 90px; height: 90px;background: #0080cc; }
article span.c_pb .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.5;}
article span.c_pb .tbd{position: absolute; left:7px; bottom:4px;font-size:12px; color:#0080cc;opacity: 0.5;}
article span.c_pb .tb{ position: absolute; left:0px; top:0px; width:90px; height:30px; line-height:35px; font-size:16px; font-weight:400;letter-spacing:2px; color:#ffffff;border-radius:20px 20px 0px 0px;background: #0080cc ;opacity:1;}
article span.c_pb .tubiao{ position: absolute; left:0px; top:30px; width:90px; height:56px; line-height:50px; font-size:36px; font-weight:500; color:#0080cc; border-top:4px solid #ccc; border-radius:0 0 20px 60px;background: #fff; opacity:1;
 -webkit-animation:2s rili infinite;
animation:2s rili infinite;}
@keyframes rili {
            0% {
                border-radius:0 0 20px 60px;;
            }
            50% {
                border-radius:0 0 20px 50px;;
            }
            100% {
                border-radius:0 0 20px 60px;;
            } 
}
article span.c_pb .tubiao span{margin:0 -18px 0px 0px;font-size:12px; color:#999;}

/**门诊**/
article span.c_mz { width: 90px; height: 90px; }
article span.c_mz .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.3;}
article span.c_mz .tb{ position: absolute; left:0px; top:0px; width:90px; height:90px; border-radius:20px 20px 30px 20px ;background: #55bcda ;opacity: 1;}
article span.c_mz .tubiao{ position: absolute; left:15px; bottom:15px; width: 50px; height: 40px; line-height:40px; font-size:28px; font-weight:600; color:#fff; border:0px solid #fff; border-radius:10px;opacity:0.8; }
.profile.icon {
  color: #fff;
  position: absolute;
  left: 15px;
  top: 40px;
  width: 50px;
  height: 25px;
  border-left: solid 5px currentColor;
  border-right: solid 5px currentColor;
  border-top: solid 5px currentColor;
  border-bottom: solid 5px currentColor;
  border-radius: 30px 30px 20px 20px;
}

.profile.icon:before {
  content: '';
  position: absolute;
  left: 10px;
  top: -32px;
  width: 20px;
  height:20px;
  border-radius: 50%;
  border: solid 5px currentColor;
}

/**电话**/
article span.c_dh {  width: 90px; height: 90px; color:#fff; }/*电话图标*/
article span.c_dh .b{ font-size:14px; margin-top:10px; color:#fff; }/*电话图标*/
article span.t1 { background: #f39700; font-size:24px; font-weight:bold;}
article span.t2 { background: #f0c144; font-size:18px; font-weight:100;}

/**路线**/
article span.c_lx { width: 90px; height: 90px; }
article span.c_lx .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.3;}
article span.c_lx .tb{ position: absolute; left:0; bottom:0px;  width: 90px; height: 90px;border-radius: 20px 20px 20px 20px;background: #00b0f0 ;opacity: 1;}
article span.c_lx .tubiao1{ position: absolute; left:0px; bottom:15px; width:90px; height: 55px; line-height:55px; font-size:36px; font-weight:600; color:#fff; border:10px solid #fff;border-left:none;border-right:none;border-top:none; opacity:0.8; }
article span.c_lx .tubiao2{ position: absolute; right:15px; bottom:0px; width:55px; height:90px; line-height:55px; font-size:36px; font-weight:600; color:#fff; border:10px solid #fff;border-left:none;border-bottom:none;border-top:none; opacity:0.5; }
.pin.icon {
  color: #fff;
  position: absolute;
  left: 14px;
  top: 14px;
  width: 30px;
  height: 30px;
  border: solid 5px currentColor;
  border-radius: 40px 40px 40px 10px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.pin.icon:before {
  content: '';
  position: absolute;
  left:6px;
  top:6px;
  width: 10px;
  height: 10px;
  border: solid 4px currentColor;
  border-radius: 20px;
}
article span.b_lx { width: 90px; height: 90px;line-height:90px; color:#fff; }
article span.l1 { background: #00b0f0; font-size:24px; font-weight:bold;}
article span.l2 { background: #f0c144; font-size:18px; font-weight:100;}

/**问答**/
article span.c_wd{ width: 90px; height:90px;}
article span.c_wd .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.3;}
article span.c_wd .tb{ position: absolute; left:0; bottom:0px;  width: 90px; height: 90px;border-radius: 20px 20px 30px 20px;background: #6fba2c ;opacity: 1;}
article span.c_wd .tubiao.qg{background: #0080cc ;}
article span.c_wd .tubiao.sg{background: #00b050 ;}
article span.c_wd .tubiao.bnz{background: #f00 ;}
article span.c_wd .tubiao.qt{background: #f39700 ;}
article span.c_wd .tubiao{ position: absolute; left:12.5px; bottom:12.5px; width: 55px; height: 55px; line-height:55px; font-size:36px; font-weight:600; color:#fff; border:5px solid #fff; border-radius:40px;opacity:1; }

/**用药单**/
article span.c_yongyao { width:90px; height:90px;/*background: #f0c144;*/ }
article span.c_yongyao .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.3;}
article span.c_yongyao .tb{ position: absolute; left:0px; top:0px; width:90px; height:90px; border-radius:20px 20px 30px 20px ;background: #00b050 ;opacity: 1;}
article span.c_yongyao .tubiao{ position: absolute; left:15px; bottom:15px; width: 50px; height: 50px; line-height:50px; font-size:28px; font-weight:600; color:#fff; border:5px solid #fff; border-radius:10px;opacity:0.8; }

/**活动**/
article span.c_huodong { width: 90px; height: 90px;/*background: #f0c144;*/ }
article span.c_huodong .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.3;}
article span.c_huodong .tb{ position: absolute; left:0px; top:0px; width:90px; height:90px; border-radius:20px 20px 30px 20px ;background: #f39700 ;opacity: 1;}
article span.c_huodong .tubiao{ position: absolute; left:17.5px; bottom:17.5px; width: 45px; height: 45px; line-height:45px; font-size:28px; font-weight:600; color:#fff; border:5px solid #fff; border-radius:10px;opacity:0.8; }


/**收藏夹**/
article span.c_wl { width: 90px; height:90px;}
article span.c_wl .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.3;}
article span.c_wl .tb{ position: absolute; left:0; bottom:0px;  width:90px; height:90px;border-radius: 20px 20px 30px 20px;background: #0080cc ;opacity: 1;}
article span.c_wl .tubiao{ position: absolute; left:17.5px; bottom:17.5px; width: 45px; height: 45px; line-height:45px; font-size:28px; font-weight:600; color:#fff; border:5px solid #fff; border-radius:40px;opacity:1; }
article span.c_wl .tubiao1{ position: absolute; left:19px; bottom:33px; width: 42px; height:15px; line-height:45px; font-size:28px; font-weight:600; color:#fff; border:5px solid #fff; border-radius:100px / 50px;opacity:1; }
article span.c_wl .tubiao2{ position: absolute; left:33px; bottom:17px; width: 15px; height: 42px; line-height:45px; font-size:28px; font-weight:600; color:#fff; border:5px solid #fff; border-radius:50px / 100px;opacity:1; }

article span.c_wailian { width: 90px; height: 90px; background: #0080cc ;}
article span.c_wailian .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.3;}
article span.c_wailian .tb{ position: absolute; left:0; bottom:0px;  width: 90px; height: 90px;border-radius: 0px 0px 0 0;background: #0080cc ;opacity: 1;}
article span.c_wailian .tubiao{ position: absolute; left:17.5px; bottom:17.5px; width: 45px; height: 45px; line-height:45px; font-size:28px; font-weight:600; color:#fff; border:5px solid #fff; border-radius:40px;opacity:1; }
article span.c_wailian .tubiao1{ position: absolute; left:18px; bottom:33px; width: 42px; height:15px; line-height:45px; font-size:28px; font-weight:600; color:#fff; border:5px solid #fff; border-radius:100px / 50px;opacity:1; }
article span.c_wailian .tubiao2{ position: absolute; left:33px; bottom:17px; width: 15px; height: 42px; line-height:45px; font-size:28px; font-weight:600; color:#fff; border:5px solid #fff; border-radius:50px / 100px;opacity:1; }


/**设置图标**/
article span.c_sz { width:90px; height:90px; }
article span.c_sz .tbg{ position: absolute; left:0; bottom:0px; width:100%; height:100%; background: #f2f2f2 ;opacity: 0.3;}
article span.c_sz .tb{ position: absolute; left:0; bottom:0px;  width: 90px; height: 90px;border-radius: 0;background: #ccc ;opacity: 0.8;}
article span.c_sz .tubiao{position: absolute; left:15px; bottom:15px; width: 50px; height: 50px; line-height:50px; font-size:28px; font-weight:600; color:#666; border:5px solid #666; border-radius:10px;opacity:0.8; }

/*会动的齿轮开始*/
#bod {
    width: 65px;
    height: 65px;
    position: relative;
    background:#555;
    top:12.5px;
    left:12.5px;
    border-radius: 80px 80px 30px 80px;
    overflow: hidden;
}
.spoke {
    background-color: grey;
    position: absolute;
    height: 50px;
    width: 6px;
    margin-left: -3px;
    margin-top: -5px;
    left:50%;
    border-radius:2px;
}
.spoke + .spoke {
    transform: rotateZ(45deg);
}
.spoke + .spoke + .spoke {
    transform: rotateZ(-45deg);
}
.spoke + .spoke + .spoke + .spoke {
    transform: rotateZ(90deg);
}
.cog {
    position: absolute;
    background-color: grey;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    animation: spin 15s infinite linear;
    margin-top: 10px;
    margin-left: 9px;
}
.cog + .cog {
    animation-delay: .19s;
    animation: spin2 15s infinite linear;
    margin-top: 55px;
    margin-left: 18px;
}
.cog + .cog + .cog {
    animation: spin 15s infinite linear;
    margin-top: 30px;
    margin-left: 56px;
}
.hole1 {
    position: absolute;
    width: 32px;
    height: 32px;
    margin-left: 0px;
    margin-top: 0px;
    border:4px solid grey;
    background:#666;
    border-radius: 50%;
    box-shadow: inset 0 0 20px #555;
}
.hole2 {
    position: absolute;
    width: 28px;
    height: 28px;
    margin-left: 0px;
    margin-top: 0px;
    border:6px solid grey;
    background:#666;
    border-radius: 50%;
    box-shadow: inset 0 0 30px #555;
}
.hole3 {
    position: absolute;
    width: 30px;
    height: 30px;
    margin-left: 0px;
    margin-top: 0px;
    border:5px solid grey;
    background:#666;
    border-radius: 50%;
    box-shadow: inset 0 0 30px #555;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes spin2 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}
/*会动的齿轮结束*/
/*会动的齿轮开始*/
#shizhong {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.biaoban {
    position: absolute;
    background-color: grey;
    width:50px;
    height: 50px;
    border-radius: 50%;
    animation: shi 360s infinite linear;
    margin-top: 20px;
    margin-left: 20px;
}
.zhizhen1 {
    background-color: grey;
    position: absolute;
    height: 60px;
    width: 8px;
    margin-left: -4.5px;
    margin-top: -4.5px;
    left:50%;
    border-radius:2px;
}
.zhizhen1 + .zhizhen1 {
    transform: rotateZ(45deg);
}
.zhizhen1 + .zhizhen1 + .zhizhen1 {
    transform: rotateZ(-45deg);
}
.zhizhen1 + .zhizhen1 + .zhizhen1 + .zhizhen1 {
    transform: rotateZ(90deg);
}



.bb1 {
    position: absolute;
    width: 40px;
    height: 40px;
    margin-left: 5px;
    margin-top: 5px;
    background:#ccc;
    border-radius: 50%;
    box-shadow: inset 0 0 30px #ccc;
}

/*会动的齿轮结束*/


/*小弹窗*/
.modal-window { position:fixed; top:0; right:0; bottom:0; left:0; background-color: rgba(0, 0, 0, 0.6); visibility: hidden; opacity:0; transition: all 0.5s;
    backdrop-filter:blur(20px);
	-webkit-backdrop-filter:blur(20px);
	pointer-events:none;
}
.modal-window:target { visibility:visible; opacity:1; pointer-events: auto; }
.modal-window .modal-box-bg{position:absolute;top:0; right:0; bottom:0; left:0; width:100%; height:100%;pointer-events: auto;}
.modal-window .modal-box, .modal-window dl { position:absolute; width:480px; height:auto; padding:15px; top:20%; left:50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; border-left:0px solid #f8f8f8;border-right:0px solid #fff; border-radius:30px; transition: all 0.5s;}
.modal-window .modal-box{background: #ffffff; opacity: 0.3; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); }

.modal-window dl dt.modal-title { position: absolute; width: 200px; height: 40px; line-height:40px;  left:50%; top:-40px; margin-left:-100px; color: #ffffff; text-align: center; font-size:28px; letter-spacing:4px; text-shadow: 0 0 2px #333;font-weight:400;opacity: 0.8;}
.modal-window dl dt.modal-title a{color: #ffffff;}
/*.modal-window dl dd a i{color:#ffffff; text-shadow: 0 0 2px #333;}*/
.modal-window:target .modal-box, .modal-window:target dl{top:50%;}
@keyframes modal {from {top: 10%; opacity: 0;} to {top: 50%; opacity: 1;}}

/*自由弹窗*/
.auto-window { position:fixed; top:0; right:0; bottom:0; left:0; background-color: rgba(0, 0, 0, 0.6); visibility: hidden; opacity:0; transition: all 0.5s;
    backdrop-filter:blur(20px);
	-webkit-backdrop-filter:blur(20px);
	pointer-events:none;
	z-index: 999;
}
.auto-window:target { visibility:visible; opacity:1; pointer-events: auto; }
.auto-window .auto-box-bg{position:absolute;top:0; right:0; bottom:0; left:0; width:100%; height:100%;pointer-events: auto;}
.auto-window .auto-box, .auto-window dl { position:absolute; width:480px; height:auto; padding:15px; top:20%; left:50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; border-left:0px solid #f8f8f8;border-right:0px solid #fff; border-radius:30px; transition: all 0.5s;}

.auto-window .auto-box{background: #ffffff; opacity: 0.3; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); }

.auto-window dl dt.auto-title { position: absolute; width: 200px; height: 40px; line-height:40px;  left:50%; top:-40px; margin-left:-100px; color: #ffffff; text-align: center; font-size:28px; letter-spacing:4px; text-shadow: 0 0 2px #333;font-weight:400;opacity: 0.8;}
.auto-window dl dt.auto-title a{color: #ffffff;}
/*.auto-window dl dd a i{color:#ffffff; text-shadow: 0 0 2px #333;}*/
.auto-window:target .auto-box, .auto-window:target dl{top:50%;}
@keyframes auto {from {top: 10%; opacity: 0;} to {top: 50%; opacity: 1;}}


/*大弹窗*/
.big-window { position:fixed; top:0; right:0; bottom:0; left:0; background-color: rgba(0, 0, 0, 0.6); visibility: hidden; opacity:0; transition: all 0.5s;
    backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	pointer-events:none;
	z-index: 999;
}
.big-window:target { visibility:visible; opacity:1; pointer-events: auto; }

.big-window .big-box-bg{position:absolute;top:0; right:0; bottom:0; left:0; width:100%; height:100%; pointer-events: auto;}
.big-window .big-box{opacity: 0.8; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); }
.big-window a{position:absolute;left:50%; bottom:-20px;width:60px; height:60px;border-radius:60px; line-height:60px; text-align: center; color:#fff; background:#f00;cursor: pointer;transform: translate(-50%, -50%);}
.big-window .big-box, .big-window dl { position:absolute; width:100%; height:100%; padding:0px; top:0%; left:50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; transition: all 0.5s; overflow:auto;}

.big-window dl dt.big-title { width:100%; height: 40px; line-height:40px; margin:10px auto 0 auto; color: #ffffff; text-align: center; font-size:28px; letter-spacing:4px; text-shadow: 0 0 2px #333; font-weight:400; opacity: 0.8;}
.big-window dl dd a i{color:#ffffff; text-shadow: 0 0 2px #333;}
.big-window:target .big-box, .big-window:target dl{top:50%;}
@keyframes big {from {top: 0%; opacity: 0;} to {top: 0%; opacity: 1;}}

/*渠道数据 inc/qudao.php*/
.big-window .qudao{max-width:500px; height:auto; margin:0px auto 0px auto; border-radius:10px; }
.big-window .qudao ul{position:relative; max-width:480px; min-width:480px;height:60px; padding:3px; margin:0px auto 0 auto; color:#666; border-top:1px #ccc solid;background:#ffffff; border-radius:0px;opacity: 0.9;}
.big-window .qudao ul b{position:absolute;left:0px;width:480px;height:60px; line-height:60px;margin:0 auto;font-size:40px;color:#ccc;text-align:center;opacity:0.5; }
.big-window .qudao ul li{ float:left; width:480px;height:20px;margin-left:10px; }
.big-window .qudao ul li span{float:left; width:90px;padding:0 2px;  height:20px; line-height:20px; text-align:left; }
.big-window .qudao ul li span i{color:#00b0f0;font-style:normal;}
.big-window .qudao ul li.zhl{color:#6fba2c;}
.big-window b.aaa{margin:1px auto 0 auto;height:50px; line-height:50px;padding:14px 15px; border-radius:0 0 5px 5px; text-align: center; color:#fff; background:#999;cursor: pointer;}

/*咨询业绩进度 占比 inc/zixun.php*/
.mubiao{max-width:1080px; height:auto; margin:5px auto 0 auto; padding:0 10px; overflow:auto;}
.mubiao ul.bingzhong{ width:460px; height:150px; padding:15px 10px 5px 10px; margin:5px auto 0 auto; background:#f2f2f2; border-radius:10px 10px 0 0;}
.mubiao ul.bingzhong li{float:left; position:relative;width:55px; height:120px; color:#999; font-size:14px; border-radius:5px;margin:0 5.3px;font-weight:200;}
.mubiao ul.bingzhong li div{ position: absolute;left:0px;bottom:0px; width:55px; height:20px; line-height:20px;background:#ddd; color:#666; border-radius:0 0 5px 5px;font-size:13px; font-weight:300;opacity: 0.9;}
.mubiao ul.bingzhong li span{position: absolute;left:0px;bottom:20px; width:55px; height:100px; text-align:center;background:#ddd;color:#fff;border-radius:5px 5px 0 0;overflow: hidden; opacity: 1;}
.mubiao ul.bingzhong li i{ position: absolute;bottom:0px; min-height:25px;max-height:100%; line-height:20px; text-align:center;border-radius:5px 5px 5px 5px;color:#eee; font-style: normal;opacity: 1;}
.mubiao ul.bingzhong li i b{line-height:25px; font-size:16px; font-weight:500;opacity: 0.9;}
.mubiao ul.bingzhong li i.m{left:0px;width:55px;background:#666;}
.mubiao ul.bingzhong li i.qg{left:0px;width:55px;background:#0080cc;}
.mubiao ul.bingzhong li i.sg{left:0px;width:55px;background:#6fba2c;}
.mubiao ul.bingzhong li i.xrs{left:0px;width:55px;background:#6fba2c;}
.mubiao ul.bingzhong li i.bnz{left:0px;width:55px;background:#f00;}
.mubiao ul.bingzhong li i.ydb{left:0px;width:55px;background:#9932cd;}
.mubiao ul.bingzhong li i.qt{left:0px;width:55px;background:#f39700;}
.mubiao ul.bingzhong li i.r{right:0px;width:35px;border-radius:5px 5px 5px 0;background:#0080cc;}

.mubiao ul.zhanbi1{ width:460px; height:55px; padding:15px 10px 15px 10px; margin:1px auto 0 auto; background:#f2f2f2; border-radius:0 0 10px 10px;}
.mubiao ul.zhanbi1 li{float:left;width:450px; height:25px; color:#999; font-size:14px; border-radius:5px;margin:0 5px;font-weight:200;}
.mubiao ul.zhanbi1 li b{ float:left;width:60px; height:25px;line-height:25px; font-weight:500;opacity: 0.9;}
.mubiao ul.zhanbi1 li span{float:left; width:390px; height:25px;text-align:center;background:#ddd;color:#fff;border-radius:5px; opacity: 1; overflow:hidden;}
.mubiao ul.zhanbi1 li i{ float:left;min-width:0px;max-width:100%; height:25px; line-height:25px; text-align:center;font-weight:500;color:#eee; font-style: normal;opacity: 1;}
.mubiao ul.zhanbi1 li i.qg{border-radius:0px;background:#0080cc;}
.mubiao ul.zhanbi1 li i.sg{border-radius:0px;background:#6fba2c;}
.mubiao ul.zhanbi1 li i.xrs{border-radius:0px;background:#6fba2c;}
.mubiao ul.zhanbi1 li i.bnz{border-radius:0px;background:#f00;}
.mubiao ul.zhanbi1 li i.ydb{border-radius:0px;background:#9932cd;}
.mubiao ul.zhanbi1 li i.qt{border-radius:0;background:#f39700;}

.mubiao ul.zhanbi2{ width:460px; height:55px; padding:15px 10px 15px 10px; margin:1px auto 0 auto; background:#f2f2f2; border-radius:0 0 10px 10px;}
.mubiao ul.zhanbi2 li{float:left;width:450px; height:25px; color:#999; font-size:14px; border-radius:5px;margin:0 5px;font-weight:200;}
.mubiao ul.zhanbi2 li b{ float:left;width:60px;height:25px;line-height:25px;font-weight:500;opacity: 0.9;}
.mubiao ul.zhanbi2 li span{float:left;width:390px; height:25px; text-align:center;background:#ddd;color:#fff;border-radius:5px; opacity: 1; overflow:hidden;}
.mubiao ul.zhanbi2 li i{ float:left; min-width:0px;max-width:100%; height:25px; line-height:25px; text-align:center;font-weight:500;color:#eee; font-style: normal; opacity: 1;}
.mubiao ul.zhanbi2 li i.sszb{border-radius:0px;background:#0080cc;}
.mubiao ul.zhanbi2 li i.xxzb{border-radius:0px;background:#6fba2c;}
.mubiao ul.zhanbi2 li i.hszb{border-radius:0px;background:#f00000;}
.mubiao ul.zhanbi2 li i.mtzb{border-radius:0px;background:#f39700;}
.mubiao ul.zhanbi2 li i.hyzb{border-radius:0px;background:#9932cd;}
.mubiao ul.zhanbi2 li i.wxzb{border-radius:0px;background:#00B050;}
.mubiao ul.zhanbi2 li i.ghzb{border-radius:0px;background:#C00000;}
.mubiao ul.zhanbi2 li i.tjzb{border-radius:0px;background:#F79646;}
.mubiao ul.zhanbi2 li i.zmzb{border-radius:0px;background:#4BACC6;}

/*.mubiao ul li i{position: absolute;height:25px; line-height:25px; bottom:0px; transform: translate(-50%, 0%);color:#fff;font-size:16px; font-weight:400; font-style: normal;opacity: 0.9;}*/

.mubiao ul.qudaos{ width:460px; height:420px; padding:15px 10px 5px 10px; margin:5px auto 0 auto; background:#f2f2f2; border-radius:10px 10px 0 0;}
.mubiao ul.qudaos li{position:relative;width:460px; height:30px; color:#999; font-size:14px; border-radius:5px;margin:1px 0 0 0;font-weight:200;}
.mubiao ul.qudaos li b{float:left;width:55px; height:30px;line-height:15px; color:#333; text-align:right; padding:0 10px 0 0; font-weight:300;opacity: 0.7;}
.mubiao ul.qudaos li div{float:left; width:395px; height:30px;}

.mubiao ul.qudaos li div b{float:right;width:60px; height:15px;line-height:15px; color:#333; padding:0 2px 0 0;font-weight:300;opacity: 0.7;}
.mubiao ul.qudaos li div span{float:left; width:163px; height:30px;line-height:30px;color:#666;text-align:right;background:#ddd;overflow:hidden;}
.mubiao ul.qudaos li div span.t{border-radius:5px 0 0 5px;}
.mubiao ul.qudaos li div span.b{border-radius:0 5px 5px 0; margin-left:0px;}



.mubiao ul.qudaos li i{min-width:25px; max-width:160px; height:30px; line-height:30px; border-radius:5px; color:#eee; font-weight:500;font-style: normal;opacity: 1;overflow:hidden;}
.mubiao ul.qudaos li i.t{float:right;text-align:left;padding-left:5px;border-radius:5px 0 0 5px;height:28px; line-height:28px;color:#666;}
.mubiao ul.qudaos li i.b{float:left;text-align:right;padding-right:5px;border-radius:0 5px 5px 0;background:#f00000;}/*#6fba2c*/
.mubiao ul.qudaos li i.tt{float:right;text-align:left;padding-left:5px;border-radius:5px 0 0 5px;height:28px; line-height:28px;border:1px solid #666; border-right:none;color:#666;}
.mubiao ul.qudaos li i.bb{float:left;text-align:right;padding-right:5px;border-radius:0 5px 5px 0;background:#666;}

.mubiao ul.qudaos li i.tss{border:1px solid #0080cc; border-right:none;}
.mubiao ul.qudaos li i.txx{border:1px solid #6fba2c; border-right:none;}
.mubiao ul.qudaos li i.ths{border:1px solid #f00000; border-right:none;}
.mubiao ul.qudaos li i.tmt{border:1px solid #f39700; border-right:none;}
.mubiao ul.qudaos li i.thy{border:1px solid #9932cd; border-right:none;}
.mubiao ul.qudaos li i.twx{border:1px solid #00B050; border-right:none;}
.mubiao ul.qudaos li i.tgh{border:1px solid #C00000; border-right:none;}
.mubiao ul.qudaos li i.ttj{border:1px solid #F79646; border-right:none;}
.mubiao ul.qudaos li i.tzm{border:1px solid #4BACC6; border-right:none;}

.mubiao ul.qudaos li i.bss{background:#0080cc;}
.mubiao ul.qudaos li i.bxx{background:#6fba2c;}
.mubiao ul.qudaos li i.bhs{background:#f00000;}
.mubiao ul.qudaos li i.bmt{background:#f39700;}
.mubiao ul.qudaos li i.bhy{background:#9932cd;}
.mubiao ul.qudaos li i.bwx{background:#00B050;}
.mubiao ul.qudaos li i.bgh{background:#C00000;}
.mubiao ul.qudaos li i.btj{background:#F79646;}
.mubiao ul.qudaos li i.bzm{background:#4BACC6;}

.btn { background-color: #fff; padding: 1em 1.5em; border-radius:3px; text-decoration:none;}
.btn i { padding-right: 0.3em; }

/*页脚*/
footer { width: 100%; }
footer dl { position: fixed; left: 50%; bottom: 8px; width: 360px; height: 25px; margin: 0 auto auto -180px; color: #fff; text-align: center; opacity: 0.1; }
footer dl dd { text-align: center; color: #ccc; }
footer dl dd a { margin-left: 10px; text-align: center; color: #fff; text-shadow: 0 0 2px #333; }

@media (max-width:2560px) {
article ul li { width: 12.5%; }
}
@media (max-width:2559px) {
article ul li { width: 12.5%; }
}
@media (max-width:2047px) {
article ul li { width: 12.5%; }
}
@media (max-width:1919px) {
article ul li { width: 12.5%; }
}
@media (max-width:1599px) {
article ul li { width: 12.5%; }
}

@media (max-width:1439px) {
article ul li { width: 14.285714%; }
}
@media (max-width:1279px) {
article ul { padding: 30px 10px 0 10px; }
article ul li { width: 14.285714%; }
}
@media (max-width:1079px) {
article ul li { width: 14.285714%; }
}
@media (max-width:959px) {/*719*/
article ul li { width: 14.285714%; }
}
@media (max-width:839px) {/*629*/
article ul li { width: 16.66666666%; }
}
@media (max-width:719px) {
article ul li { width: 20%; }
}
@media (max-width:599px) {
article ul li { width: 25%; }
}
@media (max-width:479px) {
article ul li { width: 33.3333333333%; }
}
@media (max-width:359px) {
article ul li { width: 50%; }
}
@media (max-width:279px) {
article ul li { width: 100%; }
}