{template 'header'}

 <style>
 html, body {
	color:#222;
	font-family:Microsoft YaHei,Helvitica,Verdana,Tohoma,Arial,san-serif;
	margin:0;
	padding: 0;
	text-decoration: none;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
	margin:0;
	padding:0;
}
img {
	border:0;
}
ol, ul {
	list-style: none outside none;
	margin:0;
	padding: 0;
}
a {
	color:#000000;
	text-decoration: none;
}
.clr {
	display:block;
	clear:both;
	height:0;
	overflow:hidden;
}
.copyright{padding:8px;text-align:center;font-size:14px;color:#666;}
.copyright a{color:#666;}

#cate55 { background-color:#fff; font-size:14px; }
#cate55  .mainmenu {overflow:hidden; margin:auto;}
#cate55  .mainmenu li {   margin-top:2%; margin-left:2%; width:96%; overflow:hidden; position:relative; min-height:100px;}

#cate55  .mainmenu li a { display:block;  color:#FFF; overflow: hidden }

#cate55  .mainmenu li a img { width:68%; height: auto; float:left;}

#cate55  .mainmenu li a p{ width:32%; color:#FFF; padding:15px 0; display: block; position: relative;}
#cate55  .mainmenu li a p b{ display:block; padding:0px 10px; font-size:16px;  font-weight:normal;  line-height:26px; text-align:left; text-overflow:ellipsis; white-space: nowrap; overflow:hidden}
#cate55  .mainmenu li a p span { display: block;
padding: 0px 10px;
text-align: right;
line-height: 16px;
font-size: 12px;
text-align: left;
text-overflow:ellipsis; white-space: nowrap; overflow:hidden}
#cate55  .mainmenu li i{ background: url(../../images/PIX.png) no-repeat;
background-size: 100%;
width: 24px;
height: 24px;
display: block;
margin: 10px 10px 0 10px;}

#cate55 .mainmenu li a p:after {
content: " ";
display: block;
width: 0px;
height: 0px;
border: 6px;
border-style: solid;
position: absolute;
top: 50%;
margin-top: -3px;
right:-12px;  }


#cate55  .mainmenu li a p{ float:left}
#cate55  .mainmenu li a img{ float:right;}

#cate55  .mainmenu li:nth-child(4n+1) { background-color:#ff9999;}
#cate55  .mainmenu li:nth-child(4n+2) { background-color:#f2c15b;}
#cate55  .mainmenu li:nth-child(4n+3) { background-color:#a1bbe0;}
#cate55  .mainmenu li:nth-child(4n+4) { background-color:#e0c6a1;}

#cate55  .mainmenu li:nth-child(2n+1) i{ background: url(../../images/PIX.png) no-repeat;
background-size: 100%;
width: 24px;
height: 24px;
display: block;
margin: 10px 10px 0 10px;}
#cate55  .mainmenu li:nth-child(2n+2) i{background: url(../../images/PIX2.png) no-repeat;
background-size: 100%;
width: 24px;
height: 24px;
display: block;
margin: 10px 10px 0 10px;}

#cate55 .mainmenu li a p:after {
content: " ";
display: block;
width: 0px;
height: 0px;
border: 6px;
border-style: solid;
position: absolute;
top: 50%;
margin-top: -3px;
}
#cate55  .mainmenu li:nth-child(2n+1) a p:after{ right:-12px;  }
#cate55  .mainmenu li:nth-child(2n+2) a p:after{ left:-12px;}


#cate55  .mainmenu li:nth-child(2n+1) a p{ float:left}
#cate55  .mainmenu li:nth-child(2n+1) a img{ float:right;}
#cate55  .mainmenu li:nth-child(2n+2) a p{ float:right}
#cate55  .mainmenu li:nth-child(2n+2) a img{ float:left;}
#cate55  .mainmenu li:nth-child(2n+2) a p b,#cate55  .mainmenu li:nth-child(2n+2) a p span{ text-align:left;}



#cate55  .mainmenu li:nth-child(4n+1) a p:after{ border-color:rgba(0,0,0,0) rgba(0,0,0,0)  rgba(0,0,0,0)  #ff9999}
#cate55  .mainmenu li:nth-child(4n+2) a p:after{ border-color:rgba(255, 255, 255, 0) #f2c15b rgba(0,0,0,0) rgba(0,0,0,0);}
#cate55  .mainmenu li:nth-child(4n+3) a p:after{ border-color:rgba(0,0,0,0) rgba(0,0,0,0)  rgba(0,0,0,0)  #a1bbe0;}
#cate55  .mainmenu li:nth-child(4n+4) a p:after{ border-color:rgba(255, 255, 255, 0) #e0c6a1 rgba(0,0,0,0) rgba(0,0,0,0);}
 </style>
</head>
<div id="cate55">
{template 'slide'}
 <div id="insert1"></div>
<ul class="mainmenu">
{loop $navs $nav}
<li><a href="{$nav['url']}"><img src="{$_W['attachurl']}{$nav['icon']}"><p><b>{$nav['name']}</b><span></span><i></i></p></a></li>
{/loop}
</ul>
 <div id="insert2"></div>

</div>

{template 'footer'}