.navlist{}
.navlist .swipe{padding-bottom: 20px;}
.navlist .itembox:after,.navlist .itembox .slice:after{ content: "";  height: 0;clear: both; display: block;}

.navlist ul .item{ float:left; box-sizing:border-box;text-align:center; padding:5px 0;}
.navlist ul .item .icon img{ display:block; width:100%;}
.navlist ul .item .name{ line-height:2em;}

.navlist.style1 ul .item .icon{display:block; width:70px; height:70px; line-height:70px; margin:0 auto; border-radius:50%; overflow:hidden;}
.navlist.style1 ul .item .icon .iconfont{font-size:40px;}

.navlist.style2 ul{background-color: #EBEBEB;padding: 10px;}
.navlist.style2 ul .item .icon,.navlist.style2 ul .item .name{display: table-cell;}
.navlist.style2 ul .item{width:18%; float:left;margin-left:2.5%;background: #F6F6F6;border-radius: 5px;margin-top: 10px;}
.navlist.style2 ul .item:nth-child(5n+1){ margin-left:0;}
.navlist.style2 ul .item img{ height:50px; width:50px; border-radius:50%; display:inline-block; vertical-align:middle;}
.navlist.style2 ul .item .name{ line-height:50px;vertical-align:top;font-size: 16px;font-weight: bold;}

.navlist.style3 ul .item .icon{display:block; width:70px; height:70px; line-height:70px; margin:0 auto; border-radius:50%; overflow:hidden;background:url(/public/img/icon_bg.png) center center no-repeat; background-size:100%;}
.navlist.style3 ul .item .icon .iconfont{font-size:36px;}
.navlist.style3 ul .item .icon img{padding:8px;}

.navlist.col3 ul .item{ width:33.333%;}
.navlist.col4 ul .item{ width:25%;}
.navlist.col5 ul .item{ width:20%;}
.navlist.col6 ul .item{ width:16.6666%;}
.navlist.col7 ul .item{width:14.28%;}

.navlist.col12{ background:#FFF;margin-top: 10px;padding: 10px 14px 5px 14px;}
.navlist.col12 ul .item{ width:8.3%; float:left;}
.navlist.col12 ul .item .icon{ width:56px; height:56px;line-height:56px;}
.navlist.col12 ul .item .icon .iconfont{font-size:30px;}
.navlist.col12 ul .item .name{ font-size:14px;}

.navlist.col13{background:#fff; margin-top:10px; padding:10px 14px 5px 14px;}
.navlist.col13 ul .item{width:7.6%; float:left;}
.navlist.col13 ul .item:first-child{margin-left:0.6%;}
.navlist.col13 ul .item .icon{width:56px; height:56px; line-height:56px;}
.navlist.col13 ul .item .icon .iconfont{font-size:30px;}
.navlist.col13 ul .item .name{font-size:14px;}

.navlist.col14{background:#fff; margin-top:10px; padding:10px 14px 5px 14px;}
.navlist.col14 ul .item{width:7.1%; float:left;}
.navlist.col14 ul .item:first-child{margin-left:0.6%;}
.navlist.col14 ul .item .icon{width:50px; height:50px; line-height:50px;}
.navlist.col14 ul .item .icon .iconfont{font-size:26px;}
.navlist.col14 ul .item .name{font-size:14px;}

.navlist.col2 ul .item{ width:50%;}
.navlist.col2 ul .item .icon{ width:30px; height:30px; display:table-cell; vertical-align:middle;}
.navlist.col2 ul .item .icon img{ width:30px; height:30px; padding:3px;}
.navlist.col2 ul .item .name{ display:table-cell; vertical-align:middle;}

.navlist.colauto{ padding:10px 0;}
.navlist.colauto a.color2{ color:#999;}
.navlist.colauto a.color2:hover{ color:#f60;}
.navlist.colauto ul .item{width: 5%;display: table-cell;float: none;vertical-align: middle;}
.navlist.colauto ul .item .icon{background: #313131;}

.navlist ul .item.m1 .icon{background:linear-gradient(0deg,rgba(33,130,255,.2),rgba(60,177,255,.2),rgba(86,224,255,.2)) !important;border-radius: 50%;}
.navlist ul .item.m2 .icon{background:linear-gradient(0deg,rgba(108,48,255,.2),rgba(144,95,255,.2),rgba(179,141,255,.2)) !important;border-radius: 50%;}
.navlist ul .item.m3 .icon{background:linear-gradient(0deg,rgba(255,46,42,.2),rgba(255,136,136,.2)) !important;border-radius: 50%;}
.navlist ul .item.m4 .icon{background:linear-gradient(0deg,rgba(255,130,30,.2),rgba(255,169,83,.2),rgba(255,208,135,.2)) !important;border-radius: 50%;}

.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;}
