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: 44px; background: url("../img/approvalFlow/comm_bg01.png") no-repeat center; background-color: #f5f5f5; } .com_head span { margin-left: 20px; 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; min-height: 300px; background: #fff; padding-bottom: 10px; } .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; min-height: 110px; border: #cccccd 1px solid; margin: 0px auto; position: relative; padding-bottom: 10px; overflow: hidden; } .box01_02 span { width: 142px; 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: 102px; } .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; } @media screen and (max-width: 1366px) { .box04,.box01{ margin-top: 7% !important; } .box01_02{ max-height: 300px; overflow-y: overlay; overflow-x: hidden; } #caozuo{ right: 20px; } } .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: 24px; line-height: 24px; 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: 35px; 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: 100%; 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: 22px; 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; }