.zbcmcyl_banner img{ width: 100%; } .zbcmcyl_content .fl{ float: left; } .zbcmcyl_content .fr{ float: right; } .zbcmcyl_content .commit_main_title{ padding:50px 0 30px 0; } .zbcmcyl_content .title .info{ text-align: center; font-size: .16rem; line-height: .26rem; } .zbcmcyl_content .title { padding-bottom: .6rem; } .process_list{ position: relative; } .process_list .yuan_line{ position: absolute; left: 50%; margin-left: -.395rem; width: .79rem; background: url(../images/zbcmcyl_bg.png) no-repeat; box-sizing: border-box; top: 0px; bottom: .64rem; background-size: .79rem 100%; } .process_list .item{ padding-bottom: .64rem; overflow: hidden; } .process_list .img{ position: relative; } .process_list .img .icon{ width: .6rem; height: .6rem; display: block; position: absolute; z-index: 2; top: 50%; margin-top: -.3rem; /*background: url(../images/zbcmcyl_icon1.png);*/ } .process_list .img .icon1{ background: url(../images/zbcmcyl_icon1.png); background-size: 100%; } .process_list .img .icon_left{ right: -1rem; } .process_list .img .icon_right{ left: -1rem; } .process_list .img .icon2{ background: url(../images/zbcmcyl_icon2.png); background-size: 100%; } .process_list .img .icon3{ background: url(../images/zbcmcyl_icon3.png); background-size: 100%; } .process_list .img .icon4{ background: url(../images/zbcmcyl_icon4.png); background-size: 100%; } .process_list .img .icon5{ background: url(../images/zbcmcyl_icon5.png); background-size: 100%; } .process_list .img .icon6{ background: url(../images/zbncpcyl_icon6.png); background-size: 100%;} .process_list .img .icon7{ background: url(../images/zbncpcyl_icon7.png); background-size: 100%;} .process_list .img .icon8{ background: url(../images/zbncpcyl_icon8.png); background-size: 100%;} .process_list .img .icon9{ background: url(../images/zbncpcyl_icon9.png); background-size: 100%; } .process_list .img img{ width: 5.5rem; height: 3.43rem; } .process_list .text{ width: 5.5rem; } .process_list .text h3{ font-size: .5rem; font-weight: bold; color: #006db8; } .process_list .text h4{ font-size: .26rem; color: #006db8; font-weight: bold; padding-top: 8px; } .process_list .text .desc{ font-size: .16rem; line-height: .26rem; color: #333; padding:.26rem 0 .34rem 0; } .process_list .text .data_list{ overflow: hidden; } .process_list .text .data_list li{ position: relative; width: 33.333%; float: left; height: 100%; box-sizing: border-box; /*border-left: 3px solid #f1f8fd;*/ /*padding-left: .3rem;*/ color: #333; padding: 8px 0 4px .3rem; } .process_list .text .data_list li:after{ content: ""; display: block; width: 3px; height: 1.2rem; background: #f1f8fd; position: absolute; top: 0px; left: 0px; } .process_list .text .data_list li p.n{ font-size: 12px; font-weight: bold; padding-bottom: .16rem; } .process_list .text .data_list li p.unit{ font-size: 12px; } .process_list .hz_list{ overflow: hidden; } .process_list .hz_item{ float: left; } .process_list .hz_item p{ font-size: .16rem; line-height: .26rem; } .process_list .hz_item:first-child{ padding-right: 1.5rem; } @media screen and (max-width: 1024px) { .zbcmcyl_content .title .info{ font-size: 12px; line-height: 18px; } .process_list .text .desc{ font-size: 12px; line-height: 18px; } .process_list .text h3{ font-size: 18px; } .process_list .text h4{ font-size: 14px; } } @media screen and (max-width: 414px) { .process_list .img img{ width: 100%; height: auto; } .process_list .yuan_line,.process_list .img .icon_left{ display: none; } .process_list .text{ padding: 20px 0; width: 100%; } .process_list .text .data_list li{ padding: 10px; } .process_list .text .data_list li:after{ height: 100px; } .process_list .text .desc{ padding: 20px 0; } .process_list .hz_item p{ font-size: 12px; line-height: 24px; } .process_list{ padding: 30px 0; } }