.navlist{}
.navlist .itembox{}
.navlist .itembox:after,.navlist .itembox .slice:after{ content: "";  height: 0;clear: both; display: block;}
.navlist .swipe{padding-bottom: 40px;}

.navlist ul .item{ float:left; box-sizing:border-box;min-width:70px; text-align:center;}
.navlist ul .item .icon img{display:block; width:100%;}
.navlist ul .item .name{ line-height:2em;}

.navlist.style1 ul .item .icon{ display:block; width:60px; height:60px; color:#fff; margin:0 auto; font-size:30px; border-radius:50%; line-height:60px; overflow:hidden; }
.navlist.style1 ul .item .icon.shadow{box-shadow:0 0 0 6px rgba(255,255,255,.1)}/*不通用，待定修改*/
.navlist.style1 ul .item .icon img{border-radius:50%; width:100%; height:100%;}
.navlist.style1 ul .item .name{ line-height:2em; font-size:14px;}

.navlist.style2 ul .slice{border-top: 1px solid #eee;border-left:solid 1px #eee; background:#FFF;}
.navlist.style2 ul .item{border-bottom: 1px solid #eee;border-right: 1px solid #eee;padding:10px 0; margin-top:0 !important;}
.navlist.style2 ul .item .name{ font-size:13px;}
.navlist.style2 ul .item .icon{ display:block; width:70px; height:70px; border-radius:50%; margin:0 auto; padding:5px;}
.navlist.style2 ul .item .icon img{ border-radius:50%;}

/*一行n个*/
.navlist.col2 ul .item{ width:50%;}
.navlist.col2 ul .item:nth-child(n+3){ margin-top:20px;}

.navlist.col3 ul .item{ width:33.3%;}
.navlist.col3 ul .item:nth-child(n+4){ margin-top:20px;}

.navlist.col4 ul .item{ width:25%;}
.navlist.col4 ul .item:nth-child(n+5){ margin-top:20px;}

.navlist.col5 ul .item{ width:20%;}
.navlist.col5 ul .item:nth-child(n+6){ margin-top:20px;}

.navlist.col6 ul .item{ width:16.6667%;}
.navlist.col6 ul .item:nth-child(n+7){ margin-top:20px;}

.navlist.col7 ul .item{ width:14.2857%;}
.navlist.col7 ul .item:nth-child(n+8){ margin-top:20px;}

.navlist.col8 ul .item{ width:12.5%;}
.navlist.col8 ul .item:nth-child(n+9){ margin-top:20px;}

.navlist.col9 ul .item{ width:11.1111%;}
.navlist.col9 ul .item:nth-child(n+10){ margin-top:20px;}

.navlist.col10 ul .item{ width:10%;}
.navlist.col10 ul .item:nth-child(n+11){ margin-top:20px;}

.navlist.col11 ul .item{ width:9.09%;}
.navlist.col11 ul .item:nth-child(n+12){ margin-top:20px;}

.navlist.col12 ul .item{ width:8.33%;}
.navlist.col12 ul .item:nth-child(n+13){ margin-top:10px;}

.navlist.col14 ul .item{ width:7.14%;}

/*以下是个体单独样式*/
.navlist.style1 ul .item.s1 .icon.shadow{background:linear-gradient(135deg, #f87b93, #f3113c);}
.navlist.style1 ul .item.s2 .icon.shadow{background:linear-gradient(135deg, #ffd27f, #ffae1a);}
.navlist.style1 ul .item.s3 .icon.shadow{background:linear-gradient(135deg, #95d9e9, #40bbd7);}
.navlist.style1 ul .item.s4 .icon.shadow{background:linear-gradient(135deg, #cb99ee, #a147e0);}
.navlist.style1 ul .item.s5 .icon.shadow{background:linear-gradient(135deg, #a09be1, #544bca);}
.navlist.style1 ul .item.s6 .icon.shadow{background:linear-gradient(135deg, #fb9ebb, #f85084);}
.navlist.style1 ul .item.s7 .icon.shadow{background:linear-gradient(135deg, #ffba7c, #ff8415);}
.navlist.style1 ul .item.s8 .icon.shadow{background:linear-gradient(135deg, #93ccfe, #3fa4fe);}
.navlist.style1 ul .item.s9 .icon.shadow{background:linear-gradient(135deg, #71d7ca, #00b8a0);}
.navlist.style1 ul .item.s10 .icon.shadow{background:linear-gradient(135deg, #f08c88, #e4312a);}
.navlist.style1 ul .item.s11 .icon.shadow{background:linear-gradient(135deg, #a1adea, #586dda);}
.navlist.style1 ul .item.s12 .icon.shadow{background:linear-gradient(135deg, #cde79a, #a5d54b);}
.navlist.style1 ul .item.s13 .icon.shadow{background:linear-gradient(135deg, #97ebe2, #45dccb);}
.navlist.style1 ul .item.s14 .icon.shadow{background:linear-gradient(135deg, #b5ebaf, #7bdc71);}
.navlist.style1 ul .item.s15 .icon.shadow{background:linear-gradient(135deg, #ffb8dd, #ff80c2);}
.navlist.style1 ul .item.s16 .icon.shadow{background:linear-gradient(135deg, #fee58b, #fed030);}
.navlist.style1 ul .item.s17 .icon.shadow{background:linear-gradient(135deg, #9bdff5, #4dc6ee);}
.navlist.style1 ul .item.s18 .icon.shadow{background:linear-gradient(135deg, #bdc1fc, #8a90fa);}
.navlist.style1 ul .item.s19 .icon.shadow{background:linear-gradient(135deg, #a2c9f4, #599eec);}
.navlist.style1 ul .item.s20 .icon.shadow{background:linear-gradient(135deg, #ffaaaa, #ff6767);}

.navlist.style1 ul .item.geee .icon{background:#EEE;}


.navlist ul .item.b1 .icon{background:#EDF5D4}
.navlist ul .item.b2 .icon{background:#DFE2FA}
.navlist ul .item.b3 .icon{background:#FDDDD1}
.navlist ul .item.b4 .icon{background:#FED1E4}
.navlist ul .item.b5 .icon{background:#D4E4FC}
.navlist ul .item.b6 .icon{background:#F8F9CB}
.navlist ul .item.b7 .icon{background:#FFFCEC}
.navlist ul .item.b8 .icon{background:#EDFDF2}

.navlist ul .item.m1 .icon.shadow{background:linear-gradient(0deg,rgba(33,130,255,.2),rgba(60,177,255,.2),rgba(86,224,255,.2));}
.navlist ul .item.m2 .icon.shadow{background:linear-gradient(0deg,rgba(108,48,255,.2),rgba(144,95,255,.2),rgba(179,141,255,.2));}
.navlist ul .item.m3 .icon.shadow{background:linear-gradient(0deg,rgba(255,46,42,.2),rgba(255,136,136,.2)) !important;}
.navlist ul .item.m4 .icon.shadow{background:linear-gradient(0deg,rgba(255,130,30,.2),rgba(255,169,83,.2),rgba(255,208,135,.2));}
.navlist ul .item.m1 .iconfont{background-image:linear-gradient(0deg, #2182ff, #3cb1ff,#56e0ff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.navlist ul .item.m2 .iconfont{background-image:linear-gradient(0deg, #6c30ff, #905fff,#b38dff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.navlist ul .item.m3 .iconfont{background-image:linear-gradient(0deg, #ff2e2a,#ff8888);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.navlist ul .item.m4 .iconfont{background-image:linear-gradient(0deg, #ff821e, #ffa953,#ffd087);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}