增加新定额的banner动画

css/global.css

@@ -681,7 +681,7 @@ li.search .topSerach input[type=submit]:active{
 }
 .trainItem{
   margin:1px 0 0 0;
-  padding:30px 20px 0 20px
+  padding:0 20px 0 20px
 }
 .trainItem .tLeft,.trainItem .tRight{
   width:470px
@@ -694,7 +694,7 @@ li.search .topSerach input[type=submit]:active{
   float:left;
   background:#ededed;
   height:50px;
-  margin:0 0 10px 0;
+  margin:0 20px 10px 0;
   padding:0 20px
 } 
 .trainEntry a{
@@ -1969,95 +1969,95 @@ border:none
 .mainContent_con{
 }
 .security_h{
-  text-align:center;
-  margin:45px 0 20px;
-  font-size:30px;
-  color:#666;
+	text-align:center;
+	margin:45px 0 20px;
+	font-size:30px;
+	color:#666;
 }
 .security_con{
-  position:relative;
-  text-align:center;
-  background:url(securityBg.png) no-repeat 255px 0;
-  margin:15px 0 35px 0;
+	position:relative;
+	text-align:center;
+	background:url(securityBg.png) no-repeat 255px 0;
+	margin:15px 0 35px 0;
 }
 .security_inputLock{
-  text-align:center;
-  padding:45px 0;
+	text-align:center;
+	padding:45px 0;
 }
 .security_inputLock span{
-  position:relative;
-  font-size:30px;
+	position:relative;
+	font-size:30px;
 }
 .security_input{
-  width:240px;
-  font-size:30px;
-  border:none;
-  background:#f3f3f3;
-  color:#ff6501;
-  padding:3px 0 3px 10px;
+	width:240px;
+	font-size:30px;
+	border:none;
+	background:#f3f3f3;
+	color:#ff6501;
+	padding:3px 0 3px 10px;
 }
 .security_inputLock .tips{
-  position:absolute;
-  left:15px;
-  top:5px;
+	position:absolute;
+	left:15px;
+	top:5px;
 }
 .security_Lock{
-  position:absolute;
-  z-index:99;
-  left:350px;
-  top:90px;
-  display:none;
+	position:absolute;
+	z-index:99;
+	left:350px;
+	top:90px;
+	display:none;
 }
 .security_btn{
-  margin:50px 0;
-  text-align:center;
+	margin:50px 0;
+	text-align:center;
 }
 .security_btn a{
-  text-decoration:none;
+	text-decoration:none;
 }
 .btn_security{
-  font-size:30px;
-  color:#fff;
-  background:#ff6501;
-  border-radius:5px;
-  -moz-border-radius:5px;
+	font-size:30px;
+	color:#fff;
+	background:#ff6501;
+	border-radius:5px;
+	-moz-border-radius:5px;
     -webkit-border-radius:5px;
-  padding:10px 100px;
+	padding:10px 100px;
   border:none
 }
 .btn_security:hover{
-  color:#fff;
-  background:#ec5d00;
+	color:#fff;
+	background:#ec5d00;
   border:none
 }
 .btn_security:active{
-  color:#fff;
-  background:#ff6501;
+	color:#fff;
+	background:#ff6501;
   border:none
 }
 .piracy_con{ 
     text-align:center;
-  margin:65px 0;
-  text-align:center;
-  font-size:20px;
-  color:#ff6501;
+	margin:65px 0;
+	text-align:center;
+	font-size:20px;
+	color:#ff6501;
 }
 .genuine_con{
-  margin:45px 0;
-  color:#666;
+	margin:45px 0;
+	color:#666;
 }
 .genuine_con h2{
-  text-align:center;
-  height:45px;
-  line-height:45px;
-  font-size:20px;
+	text-align:center;
+	height:45px;
+	line-height:45px;
+	font-size:20px;
 }
 .genuine_con ul{
-  margin:0 0 0 326px;
+	margin:0 0 0 326px;
 }
 .genuine_con ul li{
-  font-size:16px;
-  padding:3px 0;
+	font-size:16px;
+	padding:3px 0;
 }
 .trainingCon ul li{
   float:left;
@@ -2413,15 +2413,17 @@ border:none
   opacity:1;
 }
 .banner-one .more-button a{
-  color:#343434;
-  border:1px solid #343434;
+  color:#333;
+  background:#fff;
+  border:1px solid #fff;
   padding:15px 30px;
   text-decoration: none;
   font-size: 16px
 }
 .banner-one .more-button a:hover{
-  color:#fff;
-  background:#343434;
+  color:#333;
+  background:#fff;
+  padding:17px 32px;
 }
 /*计量支付*/
 /*N合1*/
@@ -2472,7 +2474,8 @@ border:none
   opacity:1;
 }
 .banner-two .more-button a{
-  color:#fff;
+  color:#cf4a3e;
+  background:#fff;
   border:1px solid #fff;
   padding:15px 30px;
   text-decoration: none;
@@ -2481,6 +2484,7 @@ border:none
 .banner-two .more-button a:hover{
   color:#cf4a3e;
   background:#fff;
+  padding:17px 32px;
 }
 .banner-two.show .title-1{
   transform: translateX(0px);
@@ -2592,7 +2596,8 @@ border:none
   opacity:1;
 }
 .banner-three .more-button a{
-  color:#FF6501;
+  color:#fff;
+  background:#FF6501;
   border:1px solid #FF6501;
   padding:15px 30px;
   text-decoration: none;
@@ -2601,6 +2606,7 @@ border:none
 .banner-three .more-button a:hover{
   color:#fff;
   background:#FF6501;
+  padding:17px 32px;
 }
 /*908*/
 /*网络版*/
@@ -2666,7 +2672,8 @@ border:none
   opacity:1;
 }
 .banner-four .more-button a{
-  color:#fff;
+  color:#cf4a3e;
+  background:#fff;
   border:1px solid #fff;
   padding:15px 30px;
   text-decoration: none;
@@ -2675,6 +2682,7 @@ border:none
 .banner-four .more-button a:hover{
   color:#cf4a3e;
   background:#fff;
+  padding:17px 32px;
 }
 /*招聘*/
 .banner-entry.banner-five {
@@ -2700,7 +2708,8 @@ border:none
   opacity:1;
 }
 .banner-five .more-button a{
-  color:#fff;
+  color:#cf4a3e;
+  background:#fff;
   border:1px solid #fff;
   padding:15px 30px;
   text-decoration: none;
@@ -2709,8 +2718,114 @@ border:none
 .banner-five .more-button a:hover{
   color:#cf4a3e;
   background:#fff;
+  padding:17px 32px;
 }
 /*招聘*/
+
+/*新定额*/
+.banner-entry.banner-six {
+  background:#B6BA6B url(banner-newdinge.png) center center
+}
+.banner-six .animation{
+  position:absolute;
+  opacity:0
+}
+.banner-six .images-1{
+  background:url(banner-dinge.png) -740px 0px;
+  width:370px;
+  height:370px;
+  top:80px;
+  left:80px;
+  transition: all 0.8s ease-out 0s;
+  transform: translateY(-60px);
+  transition-delay: 0.2s;
+}
+.banner-six .images-2{
+  background:url(banner-dinge.png) -370px 0px;
+  width:370px;
+  height:370px;
+  top:70px;
+  left:85px;
+  transition: all 0.8s ease-in 0s;
+  transform: translateX(-70px);
+}
+.banner-six .images-3{
+  background:url(banner-dinge.png) 0 0;
+  width:370px;
+  height:370px;
+  top:70px;
+  left:95px;
+  transition: all 0.8s ease-in 0s;
+  transform: translateX(70px);
+}
+.banner-six.show .images-1{
+  transform: translateY(0px);
+  opacity:1;
+}
+.banner-six.show .images-2{
+  transform: translateX(0px);
+  opacity:1;
+}
+.banner-six.show .images-3{
+  transform: translateX(0px);
+  opacity:1;
+}
+.banner-six .title-1{
+  background:url(banner-dinge.png) -1120px -110px;
+  width:785px;
+  height:80px;
+  top:175px;
+  left:215px;
+  transition: all 0.4s ease-out 0s;
+  transform: translateX(30px);
+}
+.banner-six .title-2{
+  background:url(banner-dinge.png) -1120px -200px;
+  width:485px;
+  height:80px;
+  top:265px;
+  left:215px;
+  transition: all 0.2s ease-in 0s;
+  transform: translateX(30px);
+  transition-delay: 0.2s;
+}
+.banner-six.show .title-1{
+  transform: translateX(0px);
+  opacity:1;
+}
+.banner-six.show .title-2{
+  transform: translateX(0px);
+  opacity:1;
+}
+.banner-six .more-button{
+  position:absolute;
+  top:380px;
+  right:70px;
+  z-index: 99;
+  opacity:0;
+  transition: all 0.2s ease-in 0s;
+  transform: translateX(30px);
+  transition-delay: 0.8s;
+}
+.banner-six.show .more-button{
+  transform: translateX(0px);
+  opacity:1;
+}
+.banner-six .more-button a{
+  color:#333;
+  background:#fff;
+  border:1px solid #fff;
+  padding:15px 30px;
+  text-decoration: none;
+  font-size: 16px
+}
+.banner-six .more-button a:hover{
+  color:#333;
+  background:#fff;
+  padding:17px 32px;
+}
+/*新定额*/
+
 /*网络版*/
 #banner-pointer {
   position:absolute;
@@ -2740,7 +2855,7 @@ border:none
 .warp-big-title h1{
   text-align: center;
   font-size: 36px;
-  color:#3f4244;
+  color:#ff6501;
   padding-bottom: 20px
 }
 .warp-big-title h2{
@@ -3202,6 +3317,43 @@ border:none
   font-size:18px;
   padding-bottom:10px
 }
+.province .nav li{
+  float:left;
+  /*width:80px;*/
+  height:50px;
+}
+.province .nav li a{
+  display: inline-block;
+  /*width: 80px;*/
+  padding:0 8px;
+  border-left: 1px solid #ccc;
+  text-align: center;
+  font-size: 16px;
+  height: 18px;
+  line-height: 18px;
+  margin-top: 32px;
+  margin-left: -1px;
+  font-weight: 600;
+  color: #666;
+  cursor: pointer; 
+}
+.province .nav li a:hover{
+  text-decoration: none;
+  color:#333;
+}
+.province .nav li:first-child a{
+  border-left: none;
+}
+.province .nav li.active a{
+  color:#B2005E;
+  cursor:default;
+}
+.province.provinceTwo ul li a{
+  padding:0 20px;
+}
+.province.provinceTwo ul li:first-child a{
+  padding:0 8px;
+}
 /* 2016年春节彩蛋
 .warp-body {
   position:relative;

index4.html

@@ -0,0 +1,257 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+	<meta charset=utf-8>
+	<title>SmartCost-纵横公路造价软件-公路全过程造价软件专家</title>
+	<meta name=description content=专业从事工程造价、工程信息、工程管理三大领域相关业务的管理研究和信息化技术开发。>
+	<meta name=copyright content=smartcost.com.cn>
+	<link rel=stylesheet href=css/global.css>
+	<script src=js/jquery-1.7.1.min.js></script>
+	<script src=js/smartcost_socus.js></script>
+	<link rel=stylesheet href=css/2017/style.css>
+</head>
+<body>
+	<div class="warp-header">
+		<div class="warp-header-shell">
+			<h1 class="header-logo fL">
+				<a href="http://smartcost.com.cn"></a>
+			</h1>
+			<div class="header-nav fL">
+				<ul>
+					<li class="nav-main">
+						<h2>产品<span class="nav-icon icon-up"></span></h2>
+						<div class="nav-drop nav-dropdown hide">
+							<dl>
+								<dt class="">造价软件<span class="nav-icon icon-right"></span></dt>
+								<dd class="nav-dropdown-content hide" style="height:450px">
+									<ul>
+										<li><a href="http://smartcost.com.cn/product/7">公路造价</a></li>
+										<li><a href="http://smartcost.com.cn/product/19">计量支付</a></li>
+										<li><a href="http://smartcost.com.cn/product/18">结算决算</a></li>
+										<li><a href="http://smartcost.com.cn/product/16">材料调差</a></li>
+										<li><a href="http://smartcost.com.cn/product/10">养护造价</a></li>
+										<li><a href="http://smartcost.com.cn/product/20">固化清单</a></li>
+										<li><a href="http://smartcost.com.cn/product/15">公路算量</a></li>
+										<li><a href="http://smartcost.com.cn/product/17">0号台账编制</a></li>
+										<li><a href="http://smartcost.com.cn/product/11">标后预算</a></li>
+										<li><a href="http://smartcost.com.cn/product/8">广东公路造价(标准化2011)</a></li>
+									</ul>
+								</dd>
+							</dl>
+							<dl>
+								<dt>造价服务<span class="nav-icon icon-right"></span></dt>
+								<dd class="nav-dropdown-content hide" style="height:250px">
+									<ul>
+										<li><a href="http://smartcost.com.cn/train" target="_blank">纵横职业培训</a></li>
+										<li><a href="http://zhzdwk.com" target="_blank">纵横知道·文库</a></li>
+										<li><a href="http://zhzdwd.comn" target="_blank">纵横知道·问答</a></li>
+										<li><a href="http://zhzdjg.com" target="_blank">纵横知道·价格信息</a></li>
+									</ul>
+								</dd>
+							</dl>
+							<dl>
+								<dt>应用<span class="nav-icon icon-right"></span></dt>
+								<dd class="nav-dropdown-content hide" style="height:150px">
+									<ul>
+										<li><a href="http://sso.smartcost.com.cn" target="_blank">通行账号</a></li>
+										<li><a href="http://qy.smartcost.com.cn" target="_blank">工程晴雨表</a></li>
+									</ul>
+								</dd>
+							</dl>
+						</div>
+					</li>
+					<li class="nav-main">
+						<h2>支持<span class="nav-icon icon-up"></span></h2>
+						<div class="nav-drop hide">
+							<dl>
+								<dt><a href="http://smartcost.com.cn/help">使用帮助</a></dt>
+							</dl>
+							<dl>
+								<dt><a href="http://smartcost.com.cn/news">新闻中心</a></dt>
+							</dl>
+							<dl>
+								<dt><a href="http://smartcost.com.cn/genuine/authentication">真伪查询</a></dt>
+							</dl>
+							<dl>
+								<dt><a href="http://smartcost.com.cn/contact">联系我们</a></dt>
+							</dl>
+							<dl>
+								<dt><a href="http://smartcost.com.cn/aboutUs">走进纵横</a></dt>
+							</dl>
+						</div>
+					</li>
+					<li class="nav-main">
+						<h2><a>支持</a></h2>
+					</li>
+				</ul>
+			</div>
+			<div class="header-search">
+				<a class="search-icon" title="展开搜索框"></a>
+				<div class="search-bar hide">
+					<select><option>帮助中心</option><option>文章</option><option>产品</option></select>
+					<input tyoe="text" class="search-input" placeholder="输入搜索内容">
+					<input value="搜索" type="submit" class="search-submit">
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="warp-banner">
+			<div class="banner-shell" id="big-banner1">
+				<!-- <div class="banner-entry banner-five show">
+					<div class="banner-images hover-stop">
+						<div  class="more-button"><a href="http://smartcost.com.cn/aboutUs/aboutUsJoin.html" target="_blank">加入我们</a></div>
+					</div>
+				</div> -->
+				<div class="banner-entry banner-one">
+					<div class="banner-images hover-stop">
+						<h2 class="animation title-1" title="纵横结算决算计量支付软件"></h2>
+						<h3 class="animation title-2" title="结算决算同步完成"></h3>
+						<h3 class="animation title-3" title="多项目集中管理"></h3>
+						<h3 class="animation title-4" title="全过程跟踪审计"></h3>
+						<div  class="more-button"><a href="http://jsjs.smartcost.com.cn/" target="_blank">查看专题</a></div>
+						<div class="animation images-1"></div>
+						<div class="animation images-2"></div>
+						<div class="animation images-3"></div>
+					</div>
+				</div>
+				<div class="banner-entry banner-six show">
+					<div class="banner-images">
+						<div class="animation images-1"></div>
+						<div class="animation images-2"></div>
+						<div class="animation images-3"></div>
+						<h2 class="animation title-1" title="纵横2018新定额V10.1"></h2>
+						<h3 class="animation title-2" title="新意满满"></h3>
+						<div  class="more-button"><a href="#" target="_blank">查看专题</a></div>
+					</div>
+				</div>
+			<!-- <div class="banner-entry banner-four">
+				<div class="banner-images">
+					<div class="animation images-1"></div>
+					<h2 class="animation title-1" title="纵横造价网络版，深耕造价十余年，专业、极速、永久免费"></h3>
+					<h3 class="animation title-2" title="免费下载 不限使用"></h3>
+					<div  class="more-button"><a href="http://ol.smartcost.com.cn" target="_blank">立即下载</a></div>
+				</div>
+			</div> -->
+			<!-- <div class="banner-entry banner-two">
+				<div class="banner-images">
+					<h2 class="animation title-1" title="纵横软件N合1，千位数大揭秘"></h2>
+					<h3 class="animation title-2" title="？980"><div class="animation title-3"></div></h3>
+					<div  class="more-button"><a href="http://o.smartcost.com.cn/shiheyi/" target="_blank">揭秘售价</a></div>
+				</div>
+			</div> -->
+			</div>
+			<div id="banner-pointer">
+				<ul title="切换广告图">
+					<li class="focus"></li>
+					<li></li>
+					<li></li>
+				</ul>
+			</div>
+		</div>
+	<div class="warp-body">
+		<div class="warp-big-title">
+			<h1>专注造价与成本控制事业</h1>
+			<h2>珠海纵横创新软件有限公司</h2>
+		</div>
+		<div class="warp-sub-banner">
+			<div class="clearfix">
+				<a href="http://smartcost.com.cn/news/7/696/1" target="_blank" class="sub-img fL" title="免费网络版"><img src="img/sub01.jpg" width="335"></a>
+				<a href="http://smartcost.com.cn/news/7/696/1" target="_blank" class="sub-img fL" style="margin-left:27px" title="免费网络版"><img src="img/sub04.jpg" width="335"></a>
+				<a href="http://smartcost.com.cn/news/7/696/1" target="_blank" class="sub-img fR" style="margin-left:27px" title="免费网络版"><img src="img/sub03.jpg" width="335"></a>
+			</div>
+		</div>
+		<div class="warp-news clearfix">
+			<div class="news-entry fL">
+				<h3>公司新闻</h3>
+				<dl>
+					<dt>
+						<img src="img/newsimg.jpg" width="306" height="140">
+						<div class="news-title"><a href="" href="_blank">新闻标题</a></div>
+					</dt>
+					<dd><p><a href="#" href="_blank">“纵横2015年广东第七期公路工程造价管理软件...</a></p>
+						2014-04-02
+					</dd>
+					<dd><p><a href="#" href="_blank">“纵横2015年广东第七期公路工程造价管理软件...</a></p>
+						2014-04-02
+					</dd>
+					<dd><p><a href="#" href="_blank">“纵横2015年广东第七期公路工程造价管理软件...</a></p>
+						2014-04-02
+					</dd>
+					<dd><p><a href="#" href="_blank">“纵横2015年广东第七期公路工程造价管理软件...</a></p>
+						2014-04-02
+					</dd>
+					<dd><p><a href="#" href="_blank">查看更多</a></p>
+					</dd>
+				</dl>
+			</div>
+			<div class="news-entry fL" style="margin:0 40px">
+				<h3>行业新闻</h3>
+				<dl>
+					<dt>
+						<img src="img/newsimg.jpg" width="306" height="140">
+						<div class="news-title"><a href="" href="_blank">新闻标题</a></div>
+					</dt>
+					<dd><p><a href="#" href="_blank">“纵横2015年广东第七期公路工程造价管理软件...</a></p>
+						2014-04-02
+					</dd>
+					<dd><p><a href="#" href="_blank">“纵横2015年广东第七期公路工程造价管理软件...</a></p>
+						2014-04-02
+					</dd>
+					<dd><p><a href="#" href="_blank">“纵横2015年广东第七期公路工程造价管理软件...</a></p>
+						2014-04-02
+					</dd>
+					<dd><p><a href="#" href="_blank">“纵横2015年广东第七期公路工程造价管理软件...</a></p>
+						2014-04-02
+					</dd>
+					<dd><p><a href="#" href="_blank">查看更多</a></p>
+					</dd>
+				</dl>
+			</div>
+			<div class="news-entry fL">
+				<h3>职业培训</h3>
+				<ul class="train-list">
+					<li>
+						<p><span class="train-loca">广东</span></p>
+						<h4 class="clearfix"><a href="#" target="_blank">2015广东公路工程培训</a></h4>
+						<p><span class="colOrange">报名中</span>&nbsp;截止&nbsp;2015-11-1</p>
+					</li>
+					<li>
+						<p><span class="train-loca">江西</span></p>
+						<h4 class="clearfix"><a href="#" target="_blank">2015江西公路工程培训</a></h4>
+						<p><span class="colGreen">正在进行</span></p>
+					</li>
+					<li>
+						<p><span class="train-loca">甘肃</span></p>
+						<h4 class="clearfix"><a href="#" target="_blank">2015甘肃公路工程培训</a></h4>
+						<p><span class="colGray">已结束</span>&nbsp;2015-11-1</p>
+					</li>
+					<li>
+						<p><span class="train-loca">重庆</span></p>
+						<h4 class="clearfix"><a href="#" target="_blank">2015重庆公路工程培训</a></h4>
+						<p><span class="colGray">已结束</span>&nbsp;2015-11-1</p>
+					</li>
+				</ul>
+				<a class="feelTrain" href="#">造价软件应用免费培训，周周开班</a>
+			</div>
+		</div>
+	</div>
+	<div class="wrapFooter">
+		<div class="bottomNav">
+			<div class="width1020">
+			<ul class="subNav fL">
+				<li><a href="#">软件下载</a></li>
+				<li><a href="#">新闻中心</a></li>
+				<li><a href="#">走进纵横</a></li>
+				<li><a href="#">联系我们</a></li>
+				<li><a href="#">使用帮助</a></li>
+			</ul>
+			<div class="copyRight fR">
+				Copyright@珠海纵横创新软件有限公司 all rights reserved 粤ICP备14032472号
+			</div>
+		</div>
+		</div>
+	</div>
+	<script type="text/javascript">
+	    autoFlashHeight();
+	</script>
+</body>