﻿/*头部导航栏*/
#header-box { width: 100%;  left: 0px; top: 0px; position: fixed;  background:#fff; box-shadow: 0px 0px 5px  #ebebeb; z-index: 9999; }
#header { width: 1200px; height: 90px; margin: auto; }
#header:after { content: ''; display: table; clear: both; }
#header > div.logo { width: 295px; height: 90px; float: left; }/*logo*/
/*导航栏*/
#header > ul.nav { width: auto; height: 90px; float: right; }
/*#header > ul.nav:after { content: ''; display: table; clear: both; }*/
#header > ul.nav > li { width: auto; font-size: 14px; height: 90px; padding: 0px 30px; line-height: 90px; color: #666; float: left; transition: background 0.3s; -webkit-transition: background 0.3s; -moz-transition: background 0.3s;  }
#header > ul.nav > li.cur { background:#E5B444; background: url(/Public/anbg.jpg);}
#header > ul.nav > li.cur > a {color: #fff; }
#header > ul.nav > li > a { display: block; width: 100%; height: 100%; color: #666;}
#header > ul.nav > li:hover { background:#D81E25; background: url(/Public/anbg1.jpg);}
#header > ul.nav > li:hover > a { color: #fff; }
/*子菜单*/
.header-sub-box-move { animation:  top 0.3s ease-in-out forwards ; -webkit-animation: top 0.3s ease-in-out forwards; -moz-animation: top 0.3s ease-in-out forwards; }
.header-sub-box-down { animation:  down 0.3s ease-in-out forwards ; -webkit-animation: down 0.3s ease-in-out forwards; -moz-animation: down 0.3s ease-in-out forwards; }
.header-sub-box-up { animation:  up 0.3s 0.3s ease-in-out forwards ; -webkit-animation: up 0.3s  0.3s ease-in-out forwards; -moz-animation: up 0.3s  0.3s ease-in-out forwards; }
#header-sub-box { width: 100%; height: 200px; position: fixed; left: 0px; top: -200px;  background-color: rgba(250, 250, 250, .92); z-index: 998; transition: top 0.3s; -webkit-transition: top 0.3s; -moz-transition: top 0.3s; }
#header-sub-box > ul.header-sub-nav { width: 1100px; height: 200px; overflow: hidden; margin: auto; padding-left: 20px; left: 20px;display: none; }
#header-sub-box > ul.header-sub-nav:after { content: ''; display: table; clear: both; }
#header-sub-box > ul.header-sub-nav > li { float: left; width: 150px; height: 160px; padding: 30px 0px; margin-right:10px; }
#header-sub-box > ul.header-sub-nav > li > a { color: #666; }
#header-sub-box > ul.header-sub-nav > li > a > div.imgbox { width: 150px; height: 106px; overflow: hidden; }
#header-sub-box > ul.header-sub-nav > li > a > div.imgbox img { width: 150px; }
#header-sub-box > ul.header-sub-nav > li > a > div.caption { width: 150px; height: 34px; font-size: 14px; color: #949494;  text-align: center; line-height: 34px; }
#header-sub-box > ul.header-sub-nav > li > a:hover > div.caption { color: #E5B444;  }

#header-sub-box > ul.header-sub-nav2 { width: 1200px; height: 200px; overflow: hidden; margin: auto; padding-left: 95px; display: none; }
#header-sub-box > ul.header-sub-nav2:after { content: ''; display: table; clear: both; }
#header-sub-box > ul.header-sub-nav2 > li { float: left;  height: 150px; padding: 40px 0px; margin-right:10px; }
#header-sub-box > ul.header-sub-nav2 > li > a { color: #666; }
#header-sub-box > ul.header-sub-nav2 > li > a > div.imgbox { width: 100px; height: 100px; overflow: hidden; }
#header-sub-box > ul.header-sub-nav2 > li > a > div.imgbox img { width: 100px; }
#header-sub-box > ul.header-sub-nav2 > li > a > div.caption { width: 100px; height: 34px; font-size: 13px; color: #949494; text-align: center;  line-height: 34px; }
#header-sub-box > ul.header-sub-nav2 > li > a:hover > div.caption { color: #E5B444; }



@keyframes top { 
	0% {top: -200px;}
	100% { top:130px; }
}
@-webkit-keyframes top { 
	0% {top: -200px;}
	100% { top:130px; }
}
@-moz-keyframes top { 
	0% {top: -200px;}
	100% { top:130px; }
}

