b2b首页UI更新，增加顶部搜索，搜索采购下单，增加审批流，增加代采订单，更新移动端接口，更新平台采购UI

git-svn-id: svn+ssh://10.10.101.21/source/platform/platform-b2b@7312 f3bf4e98-0cf0-11e4-a00c-a99a8b9d557d

src/main/webapp/resources/css/base.css

@@ -0,0 +1,141 @@
+@charset "utf-8";
+/* CSS Document */
+html {
+	-webkit-text-size-adjust: none;
+}
+
+body {
+	font-size: 12px;
+	color: #323232;
+	_overflow: hidden;
+	overflow-x: hidden;
+	background: #fff;
+}
+
+body, ol, table, tr, td, ul, li, dt, dd, dl, h1, h2, h3, h4, h5, h6,
+	form, input, select, textarea, p {
+	margin: 0;
+	padding: 0;
+	font-family: "微软雅黑";
+	font-size: 12px;
+	font-weight: normal;
+}
+
+li {
+	list-style-type: none;
+}
+
+img {
+	border: none;
+}
+
+a {
+	outline: none;
+	cursor: pointer;
+	text-decoration: none;
+	color: #666;
+	-webkit-transition: all .3s;
+	-moz-transition: all .3s;
+	-ms-transition: all .3s;
+	transition: all .3s;
+}
+
+a:hover {
+	text-decoration: none;
+}
+
+a, area {
+	blr: expression(this.onFocus = this.blur ());
+}
+
+:focus {
+	-moz-outline-style: none;
+}
+
+.disno {
+	display: none;
+}
+
+.disbk {
+	display: block;
+}
+
+.distb {
+	display: table;
+}
+
+.clear {
+	clear: both;
+}
+
+em, i {
+	font-style: inherit;
+}
+/*-------input--outline--middle---------*/
+input, button, select, textarea {
+	outline: none
+}
+
+input {
+	vertical-align: middle;
+	font-family: "微软雅黑";
+}
+
+button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner,
+	input[type="submit"]::-moz-focus-inner, input[type="file"]>input[type="button"]::-moz-focus-inner
+	{
+	border: none;
+	padding: 0;
+}
+
+table {
+	border-collapse: collapse;
+	font-family: "微软雅黑";
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) { /* chrome*/
+	.justify:after {
+		content: ".";
+		display: inline-block;
+		width: 100%;
+		overflow: hidden;
+		height: 0;
+	}
+}
+/*----- clearfix///-----*/
+.clearfix {
+	*zoom: 1;
+}
+
+.clearfix:before, .clearfix:after {
+	display: table;
+	content: '';
+	line-height: 0;
+}
+
+.clearfix:after {
+	clear: both;
+}
+/*文字两侧对齐*/
+.justify {
+	text-align: justify;
+	text-justify: distribute-all-lines; /*ie6-8*/
+	text-align-last: justify; /* ie9*/
+	-moz-text-align-last: justify; /*ff*/
+	-webkit-text-align-last: justify; /*chrome 20+*/
+}
+/*超出省略号*/
+.toe {
+	word-break: keep-all;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.fl {
+	float: left;
+}
+
+.fr {
+	float: right;
+}

src/main/webapp/resources/css/deputyOrder/base.css

@@ -0,0 +1,150 @@
+@charset "utf-8";
+/* CSS Document */
+html {
+	-webkit-text-size-adjust: none;
+}
+
+body {
+	font-size: 12px;
+	color: #323232;
+	_overflow: hidden;
+	overflow-x: hidden;
+	background: #fff;
+}
+
+body, ol, table, tr, td, ul, li, dt, dd, dl, h1, h2, h3, h4, h5, h6,
+	form, input, select, textarea, p {
+	margin: 0;
+	padding: 0;
+	font-family: "微软雅黑";
+	font-size: 12px;
+	font-weight: normal;
+}
+
+li {
+	list-style-type: none;
+}
+
+img {
+	border: none;
+}
+
+a {
+	outline: none;
+	cursor: pointer;
+	text-decoration: none;
+	color: #666;
+	-webkit-transition: all .3s;
+	-moz-transition: all .3s;
+	-ms-transition: all .3s;
+	transition: all .3s;
+}
+
+a:hover {
+	text-decoration: none;
+}
+
+a, area {
+	blr: expression(this.onFocus = this.blur ());
+}
+
+:focus {
+	-moz-outline-style: none;
+}
+
+.disno {
+	display: none;
+}
+
+.disbk {
+	display: block;
+}
+
+.distb {
+	display: table;
+}
+
+.clear {
+	clear: both;
+}
+
+em, i {
+	font-style: inherit;
+}
+/*-------input--outline--middle---------*/
+input, button, select, textarea {
+	outline: none
+}
+
+input {
+	vertical-align: middle;
+	font-family: "微软雅黑";
+}
+
+button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner,
+	input[type="submit"]::-moz-focus-inner, input[type="file"]>input[type="button"]::-moz-focus-inner
+	{
+	border: none;
+	padding: 0;
+}
+
+table {
+	border-collapse: collapse;
+	font-family: "微软雅黑";
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) { /* chrome*/
+	.justify:after {
+		content: ".";
+		display: inline-block;
+		width: 100%;
+		overflow: hidden;
+		height: 0;
+	}
+}
+
+select {
+	-webkit-appearance: none;
+	appearance: none;
+	background: transparent;
+	-o-appearance: none;
+	-moz-appearance: none;
+	-ms-appearance: none;
+}
+/*----- clearfix///-----*/
+.clearfix {
+	*zoom: 1;
+}
+
+.clearfix:before, .clearfix:after {
+	display: table;
+	content: '';
+	line-height: 0;
+}
+
+.clearfix:after {
+	clear: both;
+}
+/*文字两侧对齐*/
+.justify {
+	text-align: justify;
+	text-justify: distribute-all-lines; /*ie6-8*/
+	text-align-last: justify; /* ie9*/
+	-moz-text-align-last: justify; /*ff*/
+	-webkit-text-align-last: justify; /*chrome 20+*/
+}
+/*超出省略号*/
+.toe {
+	word-break: keep-all;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.fl {
+	float: left;
+}
+
+.fr {
+	float: right;
+}

src/main/webapp/resources/css/deputyOrder/order.css

@@ -0,0 +1,383 @@
+body {
+    background:#f5f5f5;
+}
+.warp {
+    width:100%;
+    margin:0px auto;
+    margin-top:20px;
+}
+.content {
+    width: 1170px;
+    margin:0px auto;
+}
+.purchase {
+    margin-bottom: 20px;
+}
+.width100 {
+    width:100%;
+    max-width: 950px;
+    margin: 0 auto;
+}
+.com_title {
+    width:100%;
+    margin:0px auto;
+    height:40px;
+    line-height:40px;
+    font-size:14px;
+    color:#323232;
+    background:#f5f5f5;
+}
+.com_title font {
+    color:#327ebe;
+}
+.com_head {
+    width:100%;
+    height:40px;
+    line-height:40px;
+    background:url("../../img/deputyOrder/comm_bg01.png") no-repeat center;
+    background-color:#f5f5f5;
+    background-size: 100%;
+}
+.com_head span {
+    margin-left:40px;
+    color:#000;
+    font-size:14px;
+}
+.com_head a {
+    color:#327ebe;
+    float:right;
+    margin-right:40px;
+}
+.search {
+    position: relative;
+}
+.search input {
+    width: 288px;
+    padding-left: 10px;
+    height:36px;
+    background: #fff;
+    float: left;
+    vertical-align: middle;
+    border:#3578ba 1px solid;
+    font-size: 14px;
+}
+.search a.seek {
+    vertical-align: middle;
+    display: inline-block;
+    line-height: 37px;
+    text-align: center;
+    height: 36px;
+    width: 85px;
+    border-left: 0;
+    background:#3578ba;
+    color:#fff;
+    text-align:center;
+    font-size:14px;
+    float: right;
+    border:#3578ba 1px solid;
+    position: absolute;
+    right:0;
+}
+.search a.seek:hover {
+    background: #1f6199;
+    color: #fff;
+}
+.purchase_list {
+    height:40px;
+    margin-bottom: 16px;
+    margin-top: 10px;
+}
+.purchase_list ul {
+    width:87%;
+    margin: 0 auto;
+    height:40px;
+    line-height:40px;
+    background: #fff;
+    border: #e8e8e8 1px solid;
+}
+.purchase_list ul li {
+    width: 100px;
+    height:40px;
+    text-align: center;
+    float: left;
+    margin-left: 25px;
+}
+.purchase_list ul li a {
+    font-size: 14px;
+    width: 100px;
+    height:40px;
+    display: inline-block;
+}
+.purchase_list ul li.active a {
+    color: #d82128;
+    border-bottom: 3px #d82128 solid;
+}
+.purchase_list ul li:hover a {
+    color: #d82128;
+    border-bottom: 3px #d82128 solid;
+}
+.purchase_list ul li a em {
+    color: #d2272d;
+}
+.purchase_list ul li.active a {
+    color: #d82128;
+}
+.purchase_btn01,.purchase_btn01 a {
+    width:104px;
+    height:40px;
+    color: #327ebe;
+    text-align: center;
+    background:#fff;
+    display: inline-block;
+    font-size:14px;
+    line-height:40px;
+    border: #e8e8e8 1px solid;
+}
+.purchase_btn01 a:hover{
+    border:#5078cb 1px solid;
+}
+.purchase_btn01 a img {
+    vertical-align: middle;
+    margin-right: 5px;
+}
+.purchase_lists {
+    border: #e8e8e8 1px solid;
+}
+.purchase_lists dl{
+    display: none;
+}
+.purchase_lists,.purchase_lists dl {
+    width: 100%;
+    margin: 0 auto;
+    background: #fff;
+}
+.purchase_lists dl dt,.purchase_lists dl dd {
+    width: 100%;
+    margin: 0 auto;
+    border-bottom: #cfcfcf 1px dashed;
+    display: inline-block;
+}
+.purchase_lists dl dd:last-child {
+    border-bottom: none;
+}
+.purchase_lists dl dt span {
+    height: 50px;
+    line-height: 50px;
+    display: inline-block;
+}
+.purchase_lists dl dt span em {
+    margin-left: 20px;
+}
+.purchase_lists dl dd span {
+    height:90px;
+    padding: 10px 0;
+    display: inline-block;
+    line-height: 20px;
+    overflow: hidden;
+}
+.purchase_lists dl span.wid01 {
+    width:30%;
+    text-align: left;
+    padding-left: 3%;
+}
+.purchase_lists dl span.wid02 {
+    width:15%;
+}
+.purchase_lists dl span {
+    width:25%;
+    font-size: 14px;
+    float: left;
+}
+.purchase_lists dl span img {
+    vertical-align: middle;
+    margin-left: 22%;
+    margin-top: 20px;
+}
+.purchase_lists dl dd:hover {
+    border: #d32526 1px solid;
+}
+.purchase_form,.purchase_form01 {
+    width:100%;
+    margin: 0 auto;
+    background: #fff;
+    margin-top: 10px;
+    border: #e8e8e8 1px solid;
+}
+.purchase_form01 {
+    border: none;
+    border-bottom: #d0cfcf 1px solid;
+    width: 98%;
+}
+.com_title01 {
+    height: 50px;
+    line-height:50x;
+    width:100%;
+    margin:0 auto;
+    border-bottom:#5078cb 1px dotted;
+}
+.com_title01 a {
+    float: right;
+    color: #5078cb;
+    line-height: 50px;
+    margin-right: 30px;
+}
+.com_title01 a:hover{
+    color: #1f4fb2;
+}
+.com_title01 span {
+    margin-left:20px;
+    font-size: 14px;
+    line-height: 50px;
+    color: #555;
+    font-weight: bold;
+}
+.purchase_form01 ul {
+    width:100%;
+    margin: 0 auto;
+}
+.purchase_form01 ul li {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    margin-bottom: 20px;
+}
+.purchase_form01 ul li div {
+    width:50%;
+    float: left;
+    font-size: 14px;
+}
+.purchase_form01 ul li div em {
+    width:145px;
+    float: left;
+    margin-left: 30px;
+    line-height: 40px;
+}
+.purchase_form01 ul li div.wid100 {
+    width:100%;
+}
+.purchase_form01 ul li div.wid100 span .input01 {
+    width:718px;
+}
+.purchase_form01 ul li div span {
+    width:255px;
+    float: left;
+    display: inline-block;
+    height: 40px;
+    line-height: 40px;
+    position: relative;
+    color: #666666;
+}
+.purchase_form01 ul li .input01 {
+    width:255px;
+    border-bottom: #5d5d5d 1px solid !important;
+    height: 34px;
+    line-height: 34px;
+    border: none;
+    position: relative;
+    font-size: 14px;
+    top: -6px;
+    color: #666;
+}
+.purchase_form01 ul li .input01:focus {
+    border-bottom:#5078cb 1px solid !important;
+}
+.purchase_form01 ul li .time {
+    height: 32px;
+    line-height: 32px;
+    border:#5078cb 1px solid;
+    width: 135px;
+    position: relative;
+    font-size: 14px;
+    padding-left: 10px;
+    background: url("../../img/deputyOrder/time.png") no-repeat right;
+}
+.purchase_form01 ul li .has_time {
+    width:145px ;
+}
+.purchase_form01 ul li .select {
+    height: 34px;
+    line-height: 34px;
+    border:#5078cb 1px solid;
+    width: 146px;
+    position: relative;
+    font-size: 14px;
+    padding-left: 10px;
+    background: url("../../img/deputyOrder/select.png") no-repeat right;
+}
+ .purchase_xq{
+    border-bottom: #d0cfcf 1px solid;
+ }
+.purchase_xq,.purchase_xq dl {
+    width:100%;
+    margin:0 auto;
+}
+.purchase_xq dl dd,.purchase_xq dl dt {
+    width:100%;
+    margin:0 auto;
+    height: 50px;
+    border-bottom: #e8e8e8 1px dotted;
+}
+.purchase_xq dl span {
+    width:13.42%;
+    font-size: 14px;
+    float: left;
+    display: inline-block;
+    height:50px;
+    line-height:50px;
+    text-align: center;
+}
+.purchase_xq dl span.wid01 {
+    width:6% ;
+}
+.page {
+    width:100%;
+    margin:0 auto;
+    height:60px;
+    line-height: 60px;
+}
+.page ul{
+    margin-left: 20px;
+}
+.page ul li {
+    float: left;
+    font-size: 14px;
+    color: #999;
+    margin: 0 5px;
+}
+.page ul li a {
+    width:50px;
+    display: inline-block;
+    font-size: 14px;
+    color: #999;
+}
+.page ul li input {
+    width:24px;
+    height:24px;
+    border:#5078cb 1px solid;
+    text-align: center;
+    color: #5078cb;
+    margin: 0 10px;
+}
+.page ul li a:hover {
+    color: #5078cb;
+}
+.purchase .save {
+    width:100%;
+    height: 36px;
+    margin: 20px 0 40px 0;
+}
+.purchase .save a {
+    width:94px;
+    height: 36px;
+    display: inline-block;
+    background: #5078cb;
+    text-align: center;
+    color: #fff;
+    font-size: 14px;
+    float: right;
+    line-height: 36px;
+    margin-right: 40px;
+}
+.purchase .save a:hover {
+    background: #1f4fb2;
+}

src/main/webapp/resources/css/index.css

@@ -18,6 +18,9 @@ body {
 	min-width: 1170px;
 }
 
+#top .container {
+	margin-bottom: -10px;
+}
 #top>.container, #header>.container, #footer>.container {
 	width: 1170px;
 	margin: 0 auto;
@@ -75,7 +78,11 @@ a.none:hover {
 
 /*inverse*/
 .text-default {
-	color: #56a022;
+	color: #333333;
+}
+
+.text-blue {
+	color: #327ebe;	
 }
 
 .text-inverse {
@@ -197,14 +204,14 @@ a.none:hover {
 
 /*.btn-info.btn-line {
 	background-color: #fff;
-	color: #56a022;
-	border-color: #56a022;
+	color: #6f6f6f;
+	border-color: #6f6f6f;
 }
 
 .btn-info.btn-line:hover {
-	background-color: #56a022;
+	background-color: #6f6f6f;
 	color: #fff;
-	border-color: #56a022;
+	border-color: #6f6f6f;
 }*/
 
 /*dropdown*/
@@ -220,8 +227,7 @@ a.none:hover {
 
 .dropdown:hover>.dropdown-toggle {
 	position: relative;
-	background-color: #ffffff;
-	border: 1px solid #eee;
+	background-color: #e8e8e8;
 	border-top: 0;
 	border-bottom: 0;
 	z-index: 1001;
@@ -245,7 +251,7 @@ a.none:hover {
 .dropdown-submenu>.dropdown-menu {
 	top: 0;
 	left: 100%;
-	margin-top: 0;
+	margin-top: -144px;
 }
 
 .dropdown-submenu:hover>.dropdown-toggle {
@@ -283,7 +289,7 @@ a.none:hover {
 .dropdown-menu.arrow:before,.dropdown-menu.arrow:after {
 	content: '';
 	position: absolute;
-	top: 15%;
+	top: 18%;
 	width: 0;
 	height: 0;
 	border: 10px solid transparent;
@@ -300,7 +306,7 @@ a.none:hover {
 	margin-top: -11px;
 	left: -19px;
 	border: 10px solid transparent;
-	border-right-color:#fff;
+	border-right-color: #e8e8e8;
 }
 
 .navbar {
@@ -514,11 +520,17 @@ ul>li.item-link>a {
 
 #top.navbar {
 	min-height: 35px;
-	border-bottom: 1px solid #eee;
+	border-bottom: 10px solid #333333;
 }
 
 #top ul>li>a {
 	color: #6c6c6c;
+	margin-top: -5px;
+}
+
+#top ul>li>a:hover {
+	text-decoration: none;
+	background: none;
 }
 
 #top .navbar-nav>li>a,#top .navbar-nav>li.brand {
@@ -527,6 +539,8 @@ ul>li.item-link>a {
 	line-height: 35px;
 }
 
+
+
 #top ul.navbar-nav>li>a:hover,#top ul.navbar-nav>li>a:focus,#top ul.navbar-nav>li>a:hover *,#top ul.navbar-nav>li>a:focus *
 	{
 	color: #f40;
@@ -662,8 +676,10 @@ ul>li.item-link>a {
 }
 
 #header.navbar-inverse {
-	background-color: #56a022;
+	background-color: #e8e8e8;
 	border: none;
+	border-top: 10px solid #d32526;
+	box-shadow: 0 0 10px #6f6f6f;
 }
 
 #header.navbar-inverse .navbar-brand {
@@ -681,20 +697,135 @@ ul>li.item-link>a {
 }
 
 #header.navbar-inverse .navbar-nav>li>a {
+	font-size: 20px;
+	font-famliy: Microsoft Yahei;
+	color: #000000;
+	margin-left: 70px;
+	width: 100px;
+	height: 50px;
+	text-align: center;
+}
+
+/** 顶部 start **/
+#home-search {
+	margin-left: 580px;
+	margin-top: 7px;
+	position: absolute;
+}
+
+#home-search a {
+	border-radius: 0;
+	width: 100px;
+	height: 36px;
 	color: #ffffff;
-	padding: 15px 20px;
+	background-color: #d32526;
+	border: 1px solid #d32526;
+}
+
+#home-search input {
+	border-radius: 0;
+	border: 1px solid #d32526;
+	width: 250px;
+	height: 36px;
+	color: #000000;
+	text-algin: center;
+	padding-left: 10px;
+}
+
+#home-search input:focus {
+	outline: none;
+}
+/** placeholder 格式 **/
+#home-search input::-webkit-input-placeholder{ /*WebKit browsers*/
+	padding-left: 10px;
+}
+
+#home-search input::-moz-input-placeholder{ /*Mozilla Firefox*/
+	padding-left: 10px;
+}
+
+#home-search input::-ms-input-placeholder{ /*Internet Explorer*/ 
+	padding-left: 10px;
+}
+
+#home-headerBtns {
+	width: 200px;
+	margin-top: 15px;
+	color: #333333;
+	margin-left: 96%;
+}
+#home-headerBtns i {
+	padding-left: 20px;
+}
+/** 顶部 end **/
+
+/**dropdown-menu 样式 start **/
+
+#dropdown-menu-sale {
+ 	color: #333333;
+ 	font-size: 14px;
+ 	height: 164px;
+ 	border-bottom: 1px solid #e8e8e8;
+ 	margin-top: 10px;
+}
+
+#dropdown-menu-sale img {
+	margin-top: 50%;	
+}
+
+#dropdown-menu-purc {
+	color: #333333;
+	font-size: 14px;
+	height: 86px;
+ 	border-bottom: 1px solid #e8e8e8;
+ 	margin-top: 20px;
+}
+
+#dropdown-menu-purc img {
+	margin-top: 15%;	
+}
+
+#dropdown-menu-finance {
+	color: #333333;
+	font-size: 14px;
+	height: 86px;
+ 	border-bottom: 1px solid #e8e8e8;
+ 	margin-top: 20px;
+}
+
+#dropdown-menu-finance img {
+	margin-top: 15%;	
+}
+
+#dropdown-menu-report {
+	color: #333333;
+	font-size: 14px;
+	height: 86px;
+ 	margin-top: 20px;
+}
+
+#dropdown-menu-report img {
+	margin-top: 15%;	
+}
+
+ #home-dropdown:hover>.dropdown-menu {
+	margin-top: 0;
+	width: 500px;
 }
+/**dropdown-menu 样式 end **/
 
 #header.navbar-inverse .navbar-nav>li>a:hover,#header.navbar-inverse .navbar-nav>li>a:focus
 	{
-	color: #ffffff;
-	background-color: #4b8b1e;
+	color: #d32526;
+	background-color: #e8e8e8;
 }
 
 #header.navbar-inverse .navbar-nav>.active>a,#header.navbar-inverse .navbar-nav>.active>a:hover,#header.navbar-inverse .navbar-nav>.active>a:focus
 	{
-	color: #ffffff;
-	background-color: #4b8b1e;
+	color: #d32526;
+	background-color: #e8e8e8;
+	font-color: #d32526;
+	border-bottom: 4px solid #d32526;
 }
 
 #header.navbar-inverse .navbar-nav>.disabled>a,#header.navbar-inverse .navbar-nav>.disabled>a:hover,#header.navbar-inverse .navbar-nav>.disabled>a:focus
@@ -759,8 +890,8 @@ ul>li.item-link>a {
 }
 
 #header .navbar-header .navbar-brand {
-	background: url("../img/logo/ubtob.png") no-repeat;
-	width: 195px;
+	background: url("../img/logo/logo.png") no-repeat;
+	width: 218px;
 	margin: 0
 }
 
@@ -781,15 +912,14 @@ ul>li.item-link>a {
 }
 
 .body>.left {
-	width: 196px;
+	width: 219px;
 	float: left;
 	margin-right: 14px;
-	background-color: #fff;
-	border-right: 1px solid #ddd;
+	/* border-right: 1px solid #ddd; */
 }
 
 .body>.right {
-	width: 930px;
+	width: 900px;
 	float: right;
 	font-size: 12px;
 }
@@ -805,21 +935,29 @@ ul>li.item-link>a {
 .user .user-image {
 	float: left;
 	margin-top: 20px;
-	margin-bottom: 20px;
-	margin-left: 20px;
-	height: 76px;
+	height: 286px;
+	width: 218px;
 	cursor: pointer;
+	background-color: #ffffff;
+	border: 1px solid #e8e8e8;
 }
 
 .user-image img {
-	border-radius: 50%;
+/* 	border-radius: 5%; */
 	border: 1px solid #ccc;
-	width: 70px;
-	height: 70px;
+	width: 124px;
+	height: 124px;
+	margin-left: 20%;
+	margin-top: 20px;
 }
 
+.user-image li {
+	padding-top: 15px;
+	list-style-type: none;
+	font-family: Microsoft YaHei, SimHei, Verdana;
+	font-size: 14px;
+}
 .user .user-name {
-	float: right;
 	width: 90px;
 	margin-top: 35px;
 	color: #333;
@@ -872,15 +1010,23 @@ ul>li.item-link>a {
 .use-label>i {
 	position: absolute;
 	left: 30px;
-	bottom: 0;
-	width: 0;
-	height: 0;
 	border-color: transparent;
 	border-style: solid;
 	border-width: 0 4px 4px 4px;
 	border-bottom-color: #ddd;
 }
 
+.use-label .notice-header {
+	margin-top: 300px;
+	width: 218px;
+	position: absolute;
+	background-color: #e8e8e8;
+}
+.use-label .notice-body {
+	padding-top: 20px;
+	margin-top: 360px;
+	position: absolute;
+}
 .use>ul {
 	padding: 10px 0;
 	border-bottom: 1px solid #e8e8e8;
@@ -912,7 +1058,8 @@ ul>li.item-link>a {
 
 .use>ul>li:hover *,.left-nav>ul>li:hover *,.left-nav>ul>li.active * {
 	color: #fff;
-	text-decoration: none
+	text-decoration: none;
+	background-color: #6f6f6f;
 }
 
 .icon-right {
@@ -925,6 +1072,7 @@ ul>li.item-link>a {
 	margin-top: 10px;
 	padding-bottom: 10px;
 	border-bottom: 1px solid #e8e8e8;
+	background-color: #ffffff;
 }
 
 .left-nav.left-home {
@@ -942,9 +1090,10 @@ ul>li.item-link>a {
 	text-indent: 35px;
 	height: 40px;
 	line-height: 40px;
-	color: #9ea9c0;
+	color: #333333;
 	cursor: pointer;
 	position: relative;
+	background-color: #eaeaea;
 }
 
 .nav-label>i {
@@ -981,7 +1130,7 @@ ul>li.item-link>a {
 
 .right .data-wrap {
 	float: left;
-	width: 685px;
+	width: 660px;
 }
 
 .data-wrap .todo {
@@ -990,9 +1139,23 @@ ul>li.item-link>a {
 }
 
 .todo .todo-label {
-	border-bottom: 1px solid #e8e8e8;
-	height: 39px;
+	height: 30px;
 	line-height: 40px;
+	margin-top: 20px;
+	background-color: #e8e8e8;
+	border-radius: 0px 20px 0px 0px;
+	width: 650px;
+	margin-left: 5px;
+	box-shadow: 0 0 5px #6f6f6f;
+}
+.todo .todo-label i {
+	margin-left: 20px;
+}
+
+.todo .todo-label label{
+	margin-left: 10px;
+	font-family: Microsoft YaHei, SimHei, Verdana;
+	font-size: 14px;
 }
 
 .todo .todo-label>li {
@@ -1008,50 +1171,66 @@ ul>li.item-link>a {
 
 .todo .todo-content {
 	clear: both;
+	height: 85px;
+	background-color: #ffffff;
+	width: 660px;
+	height: 258px;
+	margin-left: 0px;
+	border: 1px solid #e8e8e8;
 }
 
-.todo .todo-content>ul {
-	height: 85px;
+.todo .todo-content #tips {
+	margin-left: 20px;
+	margin-top: 40px;
+	font-family: Microsoft YaHei, SimHei, Verdana; 
+	font-size: 16px;"	
 }
 
 .todo .todo-content a {
 	color: #666;
+	text-decoration: none;
 }
 
 .todo .todo-content a:hover,.todo .todo-content a:focus {
-	color: #2a6496;
+	color: #d32526;
 }
 
 .todo .todo-content>ul:not(:last-child){
-	border-bottom: 1px dashed #e8e8e8;
-	margin-bottom: 20px;
+	border-bottom: 1px solid #e8e8e8;
 }
 
 .todo-content .icon {
 	margin-left: 20px;
 	float: left;
-	width: 60px;
-	height: 60px;
-	line-height: 60px;
+	width: 52px;
+	height: 52px;
+	line-height: 50px;
 	text-align: center;
-	margin-top: 5px;
-	color: #56a022;
+	margin-top: 40px;
 	font-size: 16px;
-	border-radius: 50%;
-	border: 1px solid #56a022;
+	list-style-type: none;
+	/* border: 1px solid #56a022; */
 }
 
 .todo-content .start {
 	float: left;
-	border-right: 1px solid #e8e8e8;
 	height: 50px;
-	width: 150px;
-	margin-left: 20px;
-	margin-top: 12px;
+	padding-top: 20px;
+	font-size: 14px;
+}
+
+.todo-content #operateTips {
+	margin-left: 5px;
+	margin-top: 100px;
+	padding-top: 20px;
+	margin-bottom: 20px;
+	font-family: Microsoft YaHei, SimHei, Verdana; 
+	font-size: 14px;
+	cursor: pointer;
+	border-top: 1px dashed #919090;
 }
 
 .todo-content .start li,.todo-content .doing li,.todo-content .end li {
-	width: 100px;
 	float: left;
 	margin-left: 20px;
 	margin-bottom: 10px;
@@ -1059,31 +1238,33 @@ ul>li.item-link>a {
 
 .todo-content .doing {
 	float: left;
-	border-right: 1px solid #e8e8e8;
 	height: 50px;
 	width: 200px;
 	text-align: center;
-	margin-top: 12px;
+	margin-top: 47px;
 }
 
 .todo-content .end {
-	width: 240px;
+	width: 200px;
 	float: left;
-	margin-top: 12px;
+	margin-top: 47px;
 }
 
-.right .feed-wrap {
+/** left .feed-wrap start **/
+.left .feed-wrap {
 	float: right;
-	width: 230px;
+	width: 218px;
 }
 
 .pane {
+	margin-top: 20px;
 	margin-bottom: 15px;
 	background-color: #fff;
 }
 
 .pane .pane-header {
-	height: 39px;
+	height: 30px;
+	background: #e8e8e8;
 	line-height: 39px;
 	font-size: 14px;
 	padding: 0 15px;
@@ -1129,7 +1310,6 @@ ul>li.item-link>a {
 	position: absolute;
 	left: 0;
 	top: 5px;
-	content: "."
 }
 
 .feed-wrap .service .detail>li {
@@ -1176,6 +1356,133 @@ ul>li.item-link>a {
 	margin-left: 20px;
 	color: #eee
 }
+/**left .feed-wrap end**/
+
+/** .right .feed-wrap start **/
+.right .feed-wrap {
+	float: right;
+	width: 218px;
+}
+
+.feed-wrap .side-image {
+	margin-top: 20px;
+}
+
+.side-image  img {
+	margin-bottom: 15px;	
+	cursor: pointer;
+}
+
+.side-image  img:hover {
+	opacity: 0.8;
+	top: 0px;
+}
+
+.pane {
+	margin-bottom: 15px;
+	background-color: #fff;
+}
+
+.pane .pane-header {
+	height: 30px;
+	background: #e8e8e8;
+	line-height: 39px;
+	font-size: 14px;
+	padding: 0 15px;
+	border-bottom: 1px solid #e8e8e8;
+	color: #333
+}
+
+.pane .pane-header .pull-right>a {
+	margin-left: 3px;
+}
+
+.pane .pane-body {
+	padding: 10px;
+}
+
+.pane.addon {
+	height: 185px;
+	text-align: center;
+	line-height: 1.4;
+	cursor: pointer;
+}
+
+.pane.addon .pane-body {
+	padding-top: 60px;
+}
+
+.pane.addon i,.pane.addon span {
+	display: block;
+}
+
+.notice {
+	height: 154px;
+}
+
+.notice .detail>li {
+	clear: both;
+	display: block;
+	padding: 0 10px 8px 15px;
+	position: relative;
+}
+
+.notice .detail>li:before {
+	position: absolute;
+	left: 0;
+	top: 5px;
+}
+
+.service {
+	height: 154px;
+}
+
+.feed-wrap .service .detail>li {
+	height: 28px;
+	line-height: 28px;
+	padding: 0 10px 8px 15px;
+}
+
+.state-wrap {
+	position: relative;
+	height: 40px;
+	line-height: 40px;
+	padding: 0 20px;
+	border-bottom: 1px solid #e8e8e8;
+	font-size: 14px;
+}
+
+.state-wrap a:hover {
+	text-decoration: none;
+}
+
+.state-wrap li {
+	width: 100px;
+	text-align: center;
+	position: relative;
+}
+
+.state-wrap li.active {
+	border-bottom: 2px solid #f40;
+}
+
+.state-wrap li.active a {
+	color: #f40;
+}
+
+.state-wrap li em {
+	font-style: normal;
+	margin-left: 5px;
+	color: #f40;
+}
+
+.state-wrap li:after {
+	position: absolute;
+	content: "|";
+	margin-left: 20px;
+	color: #eee
+}
+/** .right .feed-wrap end **/
 
 @media ( min-width : 1100px) {
 	.right {
@@ -1197,10 +1504,10 @@ ul>li.item-link>a {
 /*footer*/
 #footer {
 	color: #f1f1f1;
-	background-color: #b8b9b9;
+	background-color: #333333;
 	margin-top: 20px;
 	padding: 20px 0;
-	font-size: 12px;
+	font-size: 14px;
 }
 
 #footer a {
@@ -1211,6 +1518,11 @@ ul>li.item-link>a {
 	margin: 0;
 }
 
+#footer .qrcode-text {
+	padding: 32px 0 0 20px;
+	font-size: 14px;
+}
+
 #footer .list-inline>li:not(:last-child):after {
 	margin-left: 15px;
 	content: "|"

src/main/webapp/resources/css/style.css

@@ -0,0 +1,852 @@
+body {
+	background: #f5f5f5;
+}
+
+.warp {
+	width: 100%;
+	margin: 0px auto;
+	margin-top: 20px;
+}
+
+.content {
+	width: 1170px;
+	margin: 0px auto;
+}
+
+.shenliu_left {
+	width: 218px;
+	float: left;
+	background: #fff;
+	border: #e8e8e8 1px solid;
+}
+
+.shenliu_right {
+	width: 934px;
+	background: #fff;
+}
+
+.shenliu_left p {
+	display: inline-block;
+	text-align: center;
+	width: 100%;
+	margin: 0px auto;
+	height: 40px;
+	line-height: 40px;
+	color: #000;
+	font-size: 16px;
+	background: #eaeaea;
+}
+
+.shenliu_left ul {
+	width: 100%;
+	margin: 0px auto;
+}
+
+.shenliu_left ul li, .shenliu_left ul li a {
+	width: 100%;
+	margin: 0px auto;
+	height: 48px;
+	line-height: 48px;
+}
+
+.shenliu_left ul li a {
+	font-size: 14px;
+	color: #000;
+	display: inline-block;
+	text-align: center;
+	border-bottom: #e8e8e8 1px solid;
+}
+
+.shenliu_left ul li.hover a, .shenliu_left ul li a:hover {
+	background: #6f6f6f;
+	color: #fff;
+}
+
+.com_title {
+	width: 100%;
+	margin: 0px auto;
+	height: 40px;
+	line-height: 40px;
+	font-size: 14px;
+	color: #323232;
+	background: #f5f5f5;
+}
+
+.com_title font {
+	color: #327ebe;
+}
+
+.com_head {
+	width: 100%;
+	height: 40px;
+	line-height: 40px;
+	background: url("../img/approvalFlow/comm_bg01.png") no-repeat center;
+	background-color: #f5f5f5;
+}
+
+.com_head span {
+	margin-left: 40px;
+	color: #000;
+	font-size: 14px;
+}
+
+.com_head a {
+	color: #327ebe;
+	float: right;
+	margin-right: 40px;
+}
+
+.com_content {
+	width: 100%;
+	margin: 0px auto;
+	background: #fff;
+	border: #e8e8e8 1px solid;
+}
+
+.com_content ul, .com_content ul li {
+	width: 100%;
+	margin: 0px auto;
+}
+
+.com_content ul li {
+	height: 105px;
+	line-height: 105px;
+	border-bottom: #b2b2b3 dotted 1px;
+}
+
+.com_content ul li .inco01 {
+	width: 52px;
+	float: left;
+	height: 105px;
+}
+
+.com_content ul li .inco01 img {
+	margin-top: 26px;
+	margin-left: 45px;
+}
+
+.com_content ul li .content_list {
+	width: 815px;
+	float: right;
+}
+
+.com_content ul li .content_list span {
+	width: 30%;
+	float: left;
+	font-size: 14px;
+	color: #323232;
+}
+
+.com_content ul li .content_list span font {
+	color: #969595;
+	font-size: 12px;
+}
+
+.com_content ul li .content_list span.line01 {
+	line-height: 18px;
+	margin-top: 33px;
+	width: 40%;
+}
+
+.com_content ul li .content_list span .clolor01 {
+	color: #327ebe;
+}
+
+.com_content ul li .content_list span .clolor02 {
+	color: #be6732;
+}
+
+.com_content ul li:last-child {
+	border-bottom: none;
+}
+
+.com_content ul li .content_list span a:hover {
+	color: #d32526;
+}
+/*弹出框*/
+.tanchuang {
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	z-index: 11111;
+	background: rgba(0, 0, 0, 0.4);
+	top: 0;
+	left: 0;
+}
+
+.tanchuang .box {
+	position: relative;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	margin: auto;
+	margin-top: 15%;
+	box-shadow: 2px 2px 3px #888;
+}
+
+.tanchuang .box i {
+	width: 20px;
+	height: 20px;
+	display: inline-block;
+	position: absolute;
+	right: 5px;
+	top: 8px;
+	text-align: center;
+}
+
+.tanchuang .box01, .tanchuang .box02 {
+	width: 808px;
+	height: 326px;
+	background: #fff;
+}
+
+.box p {
+	width: 100%;
+	margin: 0px auto;
+	height: 50px;
+	line-height: 50px;
+	display: inline-block;
+	font-size: 14px;
+	color: #5f5d5d;
+	border-bottom: #595959 1px dashed;
+}
+
+.box p span {
+	margin-left: 20px;
+	line-height: 55px;
+}
+
+.box p span b, .box01_01 span b, .day_number div b {
+	font-size: 12px;
+	color: #969595;
+	font-weight: normal;
+}
+
+.box01_01 {
+	width: 100%;
+	margin: 0px auto;
+	height: 55px;
+	line-height: 55px;
+	font-size: 14px;
+	color: #323232;
+	margin-bottom: 10px;
+}
+
+.box01_01 span a {
+	color: #327ebe;
+	font-size: 12px;
+	margin-left: 10px;
+}
+
+.box01_01 span.sp01 {
+	margin-left: 25px;
+	display: inline-block;
+}
+
+.box01_01 span.sp02 {
+	margin-left: 95px;
+}
+
+.box01_01 span input {
+	margin-right: 6px;
+	vertical-align: middle;
+	position: relative;
+	top: -2px;
+}
+
+.box01_02 {
+	width: 716px;
+	height: 110px;
+	border: #cccccd 1px solid;
+	margin: 0px auto;
+	position: relative;
+}
+
+.box01_02 span {
+	width: 125px;
+	text-align: center;
+	display: inline-block;
+}
+
+.box01_02 a {
+	width: 50px;
+	height: 50px;
+	background: #cccccd;
+	border-radius: 50%;
+	text-align: center;
+	font-size: 12px;
+	display: inline-block;
+	margin-top: 18px;
+	color: #969595;
+}
+
+.box01_02 em {
+	text-align: center;
+	font-size: 12px;
+	color: #969595;
+	width: 100%;
+	margin: 0px auto;
+	display: inline-block;
+	font-style: inherit;
+	margin-top: 10px;
+	text-align: center;
+}
+
+.box01_02 span:hover a, .box01_02 span.active:hover a {
+	background: #327ebe;
+}
+
+.box01_02 span.active a {
+	background: #8bc6f7;
+}
+
+.box01_02 span:hover em, .box01_02 span.active em {
+	color: #327ebe;
+}
+
+.box01_02 span.active {
+	position: relative;
+}
+
+.box01_02 span.active:before {
+	content: "";
+	width: 76px;
+	height: 6px;
+	background: url(../img/approvalFlow/dot01.png) no-repeat;
+	display: inline-block;
+	position: absolute;
+	top: 40px;
+	right: 88px;
+}
+
+.box01_02 a img {
+	margin-top: 12px;
+}
+
+.box01_03 {
+	width: 235px;
+	margin: 0px auto;
+	margin-top: 20px;
+}
+
+.box01_03 a, .box_list .btn01, .next_btn a {
+	width: 94px;
+	height: 36px;
+	line-height: 36px;
+	font-size: 14px;
+	display: inline-block;
+	text-align: center;
+}
+
+.box01_03 a.btn01, .box_list .btn01, .next_btn a {
+	background: #327ebe;
+	color: #fff;
+}
+
+.box_list .btn01 a {
+	color: #fff;
+}
+
+.box01_03 a.btn02 {
+	border: #327ebe 1px solid;
+	color: #327ebe;
+	margin-left: 45px;
+}
+
+.box01_03 a:hover, .box_list .btn01:hover, .next_btn a:hover {
+	background: #135c9a;
+	color: #fff;
+}
+
+#caozuo {
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#caozuo a {
+	width: 42px;
+	height: 24px;
+	display: inline-block;
+	background: #8bc6f7;
+	font-size: 12px;
+	color: #fff;
+	margin: 0 0 0 3px;
+	float: left;
+	border-radius: 1px;
+	line-height: 24px;
+}
+
+#caozuo a.over {
+	color: #969595;
+	background: #d9dadd;
+}
+
+#caozuo a:hover {
+	background: #327ebe;
+	color: #fff;
+}
+
+.com_head01 {
+	width: 100%;
+	margin: 0px auto;
+	height: 50px;
+	line-height: 50px;
+	border-bottom: #5078cb 1px dotted;
+}
+
+.com_head01 span {
+	margin-left: 30px;
+	font-size: 14px;
+	color: #323232;
+}
+
+#caozuo span {
+	
+}
+
+.tanchuang .box03 {
+	width: 808px;
+	height: 620px;
+	background: #fff;
+}
+
+#caozuo01 {
+	width: 716px;
+	margin: 0px auto;
+	background: #efefef;
+	height: 24px;
+	line-height: 24px;
+	border: #cccccd 1px solid;
+	border-bottom: none;
+	margin-top: 10px;
+}
+
+#caozuo01 a {
+	width: 42px;
+	height: 24px;
+	display: inline-block;
+	background: #8bc6f7;
+	font-size: 12px;
+	color: #fff;
+	margin: 0 0 0 3px;
+	float: left;
+	border-radius: 1px;
+	line-height: 24px;
+	text-align: center;
+}
+
+#caozuo01 a.over {
+	color: #969595;
+	background: #d9dadd;
+}
+
+#caozuo01 a:hover {
+	background: #327ebe;
+	color: #fff;
+}
+
+.box04 {
+	width: 1014px;
+	height: 580px;
+	background: #fff;
+}
+
+.box05 {
+	width: 706px;
+	height: 588px;
+	background: #fff;
+}
+
+.box06 {
+	width: 706px;
+	height: 508px;
+	background: #fff;
+}
+
+.box07 {
+	width: 946px;
+	height: 541px;
+	background: #fff;
+}
+
+.box_content {
+	width: 980px;
+	height: 500px;
+	margin-top: -115px;
+}
+
+.box_content .box_content01 {
+	width: 288px;
+	height: 430px;
+	float: left;
+	margin-left: 30px;
+	position: relative;
+}
+
+.box_content .box_content01 h4 {
+	width: 100%;
+	display: inline-block;
+	height: 50px;
+	line-height: 50px;
+	font-size: 14px;
+	color: #5f5d5d;
+}
+
+.box_content .box_content01 h4 font {
+	color: #969595;
+	font-size: 12px;
+}
+
+.box_list {
+	width: 100%;
+	height: 100%;
+	border: #e5e5e5 1px solid;
+	position: relative;
+}
+
+.box_list h5 {
+	width: 100%;
+	height: 100%;
+	line-height: 430px;
+	font-size: 14px;
+	color: #969595;
+	display: inline-block;
+	text-align: center;
+}
+
+.dot02 {
+	width: 13px;
+	content: "";
+	height: 26px;
+	display: inline-block;
+	position: absolute;
+	top: 250px;
+	right: -23px;
+	background: url("../img/approvalFlow/dot02.png") no-repeat;
+}
+
+.box_list dl {
+	width: 100%;
+	margin: 0 auto;
+	margin-top: 10px;
+	display: inline-block;
+	margin-left: 20px;
+}
+
+.box_list dl dt, .box_list dl dd {
+	width: 100%;
+	margin: 0 auto;
+}
+
+.box_list dl dt {
+	font-size: 12px;
+	color: #5f5d5d;
+	line-height: 30px;
+	margin-bottom: 5px;
+}
+
+.box_list dl dd a, .style_list a {
+	font-size: 12px;
+	color: #327ebe;
+	width: 66px;
+	height: 24px;
+	line-height: 24px;
+	float: left;
+	display: inline-block;
+	background: #deeffe;
+	text-align: center;
+	margin: 0 25px 10px 0;
+	position: relative;
+}
+
+.box_list dl dd a:hover, .style_list a:hover {
+	background: #327ebe;
+	color: #fff;
+}
+
+.box_list dl dd a.color01, .style_list a.color01 {
+	background: #d9dadd;
+	color: #969595;
+}
+
+.box_list .sreach {
+	width: 240px;
+	height: 26px;
+	border: #f2f1f2 1px solid;
+	border-radius: 10px;
+	margin: 0 auto;
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+
+.box_list .sreach input {
+	width: 200px;
+	float: left;
+	height: 26px;
+	line-height: 26px;
+	color: #969595;
+	font-style: 12px;
+	border: none;
+	text-align: center;
+	border-radius: 10px;
+}
+
+.box_list .sreach:hover {
+	border: #8bc6f7 1px solid;
+}
+
+.box_list .sreach button {
+	width: 40px;
+	height: 26px;
+	line-height: 26px;
+	background: transparent;
+	float: right;
+	border: none;
+	position: relative;
+	text-align: center;
+}
+
+.box_list .sreach button:before {
+	content: "";
+	width: 16px;
+	height: 16px;
+	display: inline-block;
+	position: absolute;
+	background: url("../img/approvalFlow/sreach_bt.png") no-repeat center;
+	background-position: -16px 0;
+	overflow: hidden;
+	top: 5px;
+	right: 10px;
+}
+
+.box_list .sreach button:hover:before {
+	background-position: 0 0;
+}
+
+.box_list .zimu {
+	width: 100%;
+	margin: 0 auto;
+	height: 18px;
+	line-height: 18px;
+	background: #f4f5f7;
+}
+
+.box_list .zimu span {
+	margin-left: 20px;
+}
+
+.box_list ul {
+	width: 100%;
+	margin: 0 auto;
+}
+
+.box_list ul li {
+	width: 96%;
+	margin: 0 auto;
+	height: 35px;
+	line-height: 35px;
+	margin-left: 20px;
+}
+
+.box_list ul li span {
+	width: 75%;
+	float: left;
+}
+
+.box_list ul li span em {
+	width: 60px;
+	display: inline-block;
+}
+
+.box_list ul li a {
+	width: 25%;
+	float: right;
+	color: #327ebe;
+}
+
+.box_list ul li a:hover {
+	color: #bc2122;
+}
+
+.box_list dl dd .jiantou:before {
+	content: "";
+	width: 26px;
+	height: 8px;
+	display: inline-block;
+	background: url("../img/approvalFlow/inco_list.png") no-repeat;
+	background-position: -5px -23px;
+	position: absolute;
+	right: 65px;
+	top: 10px;
+}
+
+.caozuo01 {
+	margin-top: 20px !important;
+}
+
+.caozuo01 a:after {
+	content: "";
+	width: 18px;
+	height: 18px;
+	display: inline-block;
+	background: url("../img/approvalFlow/inco_list.png") no-repeat;
+	background-position: 0 -1px;
+	position: absolute;
+	top: -8px;
+	right: -8px;
+}
+
+.caozuo01 a:hover:after {
+	background-position: -20px -1px;
+}
+
+.box_list .btn01 {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+.style_list {
+	width: 89%;
+	margin: 0 auto;
+	height: 24px;
+}
+
+.day_number {
+	width: 100%;
+	margin: 0 auto;
+	height: 290px;
+}
+
+.day_number div {
+	width: 89%;
+	margin: 0 auto;
+	margin-top: 10px;
+}
+
+.day_number div input {
+	width: 66px;
+	height: 24px;
+	line-height: 24px;
+	text-align: center;
+	color: #327ebe;
+	border: #327ebe 1px solid;
+}
+
+.day_number div font {
+	margin: 0 10px;
+}
+
+.box07 .box01_01 {
+	margin-bottom: 0px !important;
+}
+
+.next_btn {
+	width: 100%;
+	margin: 0 auto;
+	position: relative;
+	right: 50px;
+}
+
+.next_btn a {
+	float: right;
+}
+
+.day_number .demo {
+	width: 520px;
+	float: left;
+	border: #ddd 1px solid;
+	margin-left: 50px;
+	padding: 10px 0 5px;
+	position: relative;
+}
+
+.day_number .demo span {
+	width: 100%;
+	margin: 0 auto;
+	color: #00a0b4;
+	line-height: 20px;
+	display: inline-block;
+	margin-left: 40px;
+}
+
+.day_number .demo span input {
+	margin-top: 10px;
+	margin-bottom: 10px;
+	border: #969595 1px solid;
+	color: #969595;
+}
+
+.day_number .demo:before {
+	content: "例:";
+	width: 100px;
+	height: 50px;
+	display: inline-block;
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	font-size: 16px;
+	color: #00a0b4;
+}
+
+.day_number .demo span em {
+	width: 20px;
+	height: 20px;
+	display: inline-block;
+	background: #00a0b4;
+	border-radius: 100%;
+	text-align: center;
+	color: #fff;
+	margin-right: 10px;
+}
+
+.day_number .demo span a {
+	display: inline-block;
+	text-align: center;
+	font-size: 12px;
+	border-radius: 20px;
+	margin: 10px 15px 10px;
+	line-height: 24px;
+}
+
+.day_number .demo span a.color01 {
+	background: #00a0b4;
+	color: #fff;
+	width: 120px;
+	height: 24px;
+	position: relative;
+}
+
+.day_number .demo span a.color01:after {
+	content: "";
+	width: 17px;
+	height: 9px;
+	display: inline-block;
+	position: absolute;
+	top: 9px;
+	right: -25px;
+	background: url("../img/approvalFlow/inco_list.png") no-repeat;
+	background-position: -1px -37px;
+}
+
+.day_number .demo span a.color002:after {
+	content: "";
+	width: 17px;
+	height: 9px;
+	display: inline-block;
+	position: absolute;
+	top: 9px;
+	right: -25px;
+	background: url("../img/approvalFlow/inco_list.png") no-repeat;
+	background-position: -20px -37px;
+}
+
+.day_number .demo span a.color02 {
+	border: #00a0b4 1px solid;
+	color: #00a0b4;
+	width: 80px;
+	height: 24px;
+	position: relative;
+}