{template 'common/header'}
<style>
	body{
	font:{$_W['styles']['fontsize']} {$_W['styles']['fontfamily']};
	color:{$_W['styles']['fontcolor']};
	margin:0;
	background-image:url('{if empty($_W['styles']['indexbgimg'])}./themes/style14/images/bg_index.jpg{else}{$_W['styles']['indexbgimg']}{/if}');background-size:cover;
	background-color:{if empty($_W['styles']['indexbgcolor'])}#F9F9F9{else}{$_W['styles']['indexbgcolor']}{/if};
	{$_W['styles']['indexbgextra']}
	}
	a{color:{$_W['styles']['linkcolor']}; text-decoration:none;}
	{$_W['styles']['css']}
	.box{overflow:hidden; width:100%;height:90px; position:absolute; bottom:0; background:rgba(0, 0, 0, 0.4); border-top:1px rgba(0, 0, 0, 0.1) solid;}
	.box,.box ul{padding:0px; margin:0px; list-style:none;}
	.box ul{width:1400px; height:100%; position:absolute; top:0px; left:0px;}
	.box .slide-nav{height:90px; float:left; overflow:hidden; position:relative;}
	.box .box-item{float:left;position:relative;text-align:center;display:block;text-decoration:none;outline:none;width:25%;height:90px; color:#FFF;padding:5px 0;}
	.box .box-item i{display:inline-block;width:50px;height:50px;line-height:50px;font-size:35px;color:#FFF; margin-bottom:5px; overflow: hidden;}
	.box .box-item span{color:{$_W['styles']['fontnavcolor']}; display:block; font-size:14px; width:90%; margin:0 5%; height:20px; line-height:20px; overflow:hidden;}
	.box_swipe > ol{background-color:transparent; padding-right:0; text-align:center; margin-top:0; position:absolute; top:0; right:10px;}
</style>
<div class="box clearfix" id="box">
	<ul>
		{php $num = 0;}
		{data func="site_navs" item="row"}
		{if $num%4 == 0 && $num != 0}</li>{/if}
		{if $num%4 == 0 || $num == 0}<li class="slide-nav">{/if}
		{$row['html']}
		{php $num++;}
		{/data}
	</ul>
</div>
{php $footer_off = 1;}
<script>
	require(['jquery'],function(){
		$(function(){
			$(window).resize(function  () {
				var windowW=$(window).width();
				var list=$(".slide-nav");
				if(windowW<128){
					list.css("width",128);
					var box=$(".box ul");
					box.css("width",list.length*128);
				}else{
					list.css("width",windowW);
					var box=$(".box ul");
					box.css("width",list.length*windowW);
				}
			});
			$(window).resize();
			var num=0;
			var box = $(".box ul");
			function moves () {
				num++;
				if($(".slide-nav").length==1){
					box.css("left",0);
				}else if(num==$(".slide-nav").length){
					box.animate({left:-num*$(".slide-nav").width()},500,function(){
						box.css("left",0);
					});
					num=0;
				}else {
					box.animate({left:-num*$(".slide-nav").width()},500);
				}
			}
			var t= setInterval(moves,2000);
		});
	});

</script>
{template 'common/footer'}
<script>
	require(['jquery'],function(){
		$(function(){
			if($('.quick')!=null && $('.quick')!=''){
				var h = $('.quick').height()+'px';
				$('.box').css("bottom",h);
			}else{
				$('.box').css("bottom","0");
			}
		})
	});
</script>