.navlist { padding:10px 0;}
.navlist.bgf6f6{ background:#f6f6f6;}
.navlist.col2 ul .item{ width:20%; margin:0 15%;}
.navlist.col3 ul .item{ width:13.333%; margin:0 10%;}
.navlist.col4 ul .item{ width:15%; margin:0 5%;}
.navlist.col5 ul .item{ width:10%; margin:0 5%;}
.navlist.col6 ul .item{ width:10.6667%; margin:0 3%;}
.navlist.col7 ul .item{ width:10.2857%; margin:0 2%;}
.navlist.col8 ul .item{ width:10.5%; margin:0 1%;}
.navlist.nopic.col2 ul .item{ width:50%; margin:0;}
.navlist.nopic.col3 ul .item{ width:33.333%; margin:0;}
.navlist.nopic.col4 ul .item{ width:25%; margin:0;}
.navlist.nopic.col5 ul .item{ width:20%; margin:0;}
.navlist.nopic.col6 ul .item{ width:16.6667%; margin:0;}
.navlist.nopic.col7 ul .item{ width:14.2857%; margin:0;}
.navlist.nopic.col8 ul .item{ width:12.5%; margin:0;}

.navlist.col9 ul .item{ width:11.1111%;}
.navlist.col10 ul .item{ width:10%;}
.navcont ul.swipeul{ padding-bottom:30px;}
.navlist ul .item{ float:left; box-sizing:border-box; padding:10px 0; min-width:80px; text-align:center;}
.navlist 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 ul .item .icon.shadow{box-shadow:0 0 0 6px rgba(255,255,255,.1)}
.navlist ul .item .icon .iconfont{ line-height:60px; display:block; margin:0 auto;}
.navlist ul .item .icon img{ display:block; width:100%; border-radius:50%;}
.navlist ul .item .name{ line-height:2em;}

.navlist.col5 ul .item .icon{width:80px; height:80px; line-height:80px; font-size:40px;}
.navlist.col5 ul .item .icon .iconfont{ line-height:80px;}
.navlist.col4 ul .item .icon{width:80px; height:80px; line-height:80px; font-size:40px;}
.navlist.col4 ul .item .icon .iconfont{ line-height:80px;}

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

.navlist ul .item.c1 .icon{ background:#fdddd1;}
.navlist ul .item.c2 .icon{ background:#dbf3fa;}
.navlist ul .item.c3 .icon{ background:#fed1e4;}
.navlist ul .item.c4 .icon{ background:#dfe2fa;}
.navlist ul .item.c5 .icon{ background:#c0e2ff;}
.navlist ul .item.c6 .icon{ background:#f8f9cb;}
.navlist ul .item.c7 .icon{ background:#dfe2fa;}
.navlist ul .item.c8 .icon{ background:#d4e4fc;}
.navlist ul .item.c9 .icon{ background:#f7cbaf;}
.navlist ul .item.c10 .icon{ background:#ddefe2;}


.navlist.nobg ul .item .icon{ background:none; color:#7878E7;}

.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.style2 ul .item .icon{ background-color:#F4F4F4; border-radius:20px;}

.navlist.style3 .item{ display:block;}
.navlist.style3 .item .bgbox{ margin:0 10px; position:relative;line-height: 0;}
.navlist.style3 .item .bgbox:after{ content:""; height:100%; width:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.3);border-radius: 10px;z-index: 5;}
.navlist.style3 .bgimg{ width:100%; border-radius:10px; position:relative; z-index:1;}
.navlist.style3 .img{ position:absolute; left:0; top:9px; z-index:9; width:100%;}
.navlist.style3 .img img{display:block; width:25px; border-radius:50%; margin:0px auto;}
.navlist.style3 .img .name{ color:#FFF; line-height:1.8em;}
.navlist.style3 .img .name:after{ content:""; width:1em; height:2px; background-color:#FFF; position:absolute; bottom:0px; left:50%; margin-left:-0.5em;}


.navlist.style4 .icon{ background:none !important; box-shadow: none !important;}
.navlist.style4 .item.s1 .iconfont {color: #f87b93;}
.navlist.style4 .item.s2 .iconfont {color: #ffd27f;}
.navlist.style4 .item.s3 .iconfont {color: #95d9e9;}
.navlist.style4 .item.s4 .iconfont {color: #cb99ee;}
.navlist.style4 .item.s5 .iconfont {color: #a09be1;}
.navlist.style4 .item.s6 .iconfont {color: #fb9ebb;}
.navlist.style4 .item.s7 .iconfont {color: #ffba7c;}
.navlist.style4 .item.s8 .iconfont {color: #93ccfe;}
.navlist.style4 .item.s9 .iconfont {color: #71d7ca;}
.navlist.style4 .item.s10 .iconfont {color: #f08c88;}
.navlist.style4 .item.s11 .iconfont {color: #a1adea;}
.navlist.style4 .item.s12 .iconfont {color: #cde79a;}
.navlist.style4 .item.s13 .iconfont {color: #97ebe2;}
.navlist.style4 .item.s14 .iconfont {color: #b5ebaf;}
.navlist.style4 .item.s15 .iconfont {color: #ffb8dd;}
.navlist.style4 .item.s16 .iconfont {color: #fee58b;}
.navlist.style4 .item.s17 .iconfont {color: #9bdff5;}
.navlist.style4 .item.s18 .iconfont {color: #bdc1fc;}
.navlist.style4 .item.s19 .iconfont {color: #a2c9f4;}
.navlist.style4 .item.s20 .iconfont {color: #ffaaaa;}
.navlist.style4 .item.s21 .iconfont {color: #f87b93;}
.navlist.style4 .item.s22 .iconfont {color: #ffd27f;}
.navlist.style4 .item.s23 .iconfont {color: #95d9e9;}
.navlist.style4 .item.s24 .iconfont {color: #cb99ee;}
.navlist.style4 .item.s25 .iconfont {color: #a09be1;}
.navlist.style4 .item.s26 .iconfont {color: #fb9ebb;}
.navlist.style4 .item.s27 .iconfont {color: #ffba7c;}
.navlist.style4 .item.s28 .iconfont {color: #93ccfe;}
.navlist.style4 .item.s29 .iconfont {color: #71d7ca;}
.navlist.style4 .item.s30 .iconfont {color: #f08c88;}
.navlist.style4 .item.scolor .iconfont{color:#898dc2;}

.pdimg.navlist ul .item .icon{ width:70px; height:70px;}

.navlist.nopic .slice{border-left:1px solid #eee;border-top:1px solid #eee;}
.navlist.nopic .item{ border:1px solid #eee; border-left:0; padding:5px 0;border-top:none;}