*{ margin:0;padding:0; font-family: microsoft yahei; } li{ list-style: none; } a{ text-decoration: none; } img{ float:left; } .w1400{ width:1400px; margin:0 auto; } .w100{ width:100%; float:left; } .clear{ clear:both; } header{ padding:30px 0; float:left; width:100%; background:#2b479b; } header a{ float:left; } header span{ float:left; border-left:1px solid #fff; font-size:28px; font-weight: bold; padding: 0 0 0 30px; margin: 28px 0 0 30px; color:#fff; } nav{ float:left; width:100%; background:#fff; } nav ul li{ float:left; padding:20px 15px; position: relative; } nav ul li a{ color:#767676; font-size: 22px; font-weight: lighter; } nav ul li a:hover{ color:#454545; } nav ul li div{ display:none; width:100%; position:absolute; top:60px; left:0; z-index:9999; /*background:rgba(255,255,255,0.7);*/ border-radius:5px; padding:10px 0; } nav ul li div a{ height:40px; line-height:40px; float:left; width:100%; font-size:16px; text-align:center; color:#fff; background:#2b479b; margin-top:1px; } nav ul li:hover>div{ display:inline; } nav ul li>div>a:hover{ background:#2a6cc2; color:#fff; } @keyframes navSlide { 0%{ opacity: 0;transform:rotateX(-50deg)rotatey(135deg)rotateZ(15deg) translate(0px,20px); } } nav ul li:hover>div a:nth-child(1){ animation: navSlide 0.6s; } nav ul li:hover>div a:nth-child(2){ animation: navSlide 0.8s; } nav ul li:hover>div a:nth-child(3){ animation: navSlide 1.0s; } nav ul li:hover>div a:nth-child(4){ animation: navSlide 1.2s; } nav ul li:hover>div a:nth-child(5){ animation: navSlide 1.4s; } nav ul li:hover>div a:nth-child(6){ animation: navSlide 1.6s; } nav ul li:hover>div a:nth-child(7){ animation: navSlide 1.8s; } nav ul li:hover>div a:nth-child(8){ animation: navSlide 2.0s; } nav ul li:hover>div a:nth-child(9){ animation: navSlide 2.2s; } nav ul li:hover>div a:nth-child(10){ animation: navSlide 2.4s; } footer{ background:#2b479b; float:left; width:100%; margin-top:50px; padding:80px 0 0 0; } .footer-left{ float:left; border-right:1px solid #fff; padding-right: 60px; margin-left:14%; } .footer-mid{ float:left; margin:0 0 0 60px; padding-right:60px; } .footer-mid p{ color:#fff; font-size:16px; background:url(../images/phone-ico.png) no-repeat left center; padding:0 0 0 40px; margin-top:10px; margin-bottom:5px; line-height:150%; } .footer-mid p:nth-child(1){ background:url(../images/address-ico.png) no-repeat left center; } .footer-xiaoxun{ text-align:center; } .footer-xiaoxun img{ float:none; } .footer-right{ float:right; } .footer-right img{ width:160px; } .footer-bottom{ background:#16389c; color:#fff; font-size:16px; float:left; width:100%; height:60px; line-height:60px; text-align: center; margin-top:30px; }