h2 { font-size:1.875em; color: #333; } .striping { width: 72px; height:6px; background: #333; margin: 20px 0 72px 0; } .public_desc { font-size: 0.875em; line-height: 14px; margin-bottom: 20px; } /* .public_desc img { margin: 0 20px; } */ .product_s_background_pic_banner { width:100%; height:420px; background: url("../images/soft/banner_software.png") no-repeat center center; background-size:cover; } .soft_video_wrap { border-radius: 12px; -webkit-border-radius:12px; -moz-border-radius: 12px; } .serve { width:100%; height:560px; /* background: url("../images/soft/bg_software.png") no-repeat center center; */ background-size:cover; } .serve .serve_icon { padding-top:112px; } .serve .serve_icon ul { display: flex; flex-wrap: nowrap; justify-content: space-between; } /* .serve .serve_icon ul:first-child { display: flex; flex-wrap: nowrap; justify-content: center; } */ .serve .serve_icon ul li { /*width:25%;*/ width: 10.4375em; text-align: center; float:left; font-size: 1em; color: #666; } .serve .serve_icon ul li p { margin: 36px 0 104px 0; } .middle { width:100%; /*height:580px; */ } .module { width: 100%; height: 580px; } .module .main { display: flex; justify-content: space-between; height: 100%; } .module .main .desc_item { width:40%; } .module .main .pho_item { width: 60%; } .module .main>div { align-items: center; } .middle ul li:nth-child(2n+1) { background: #F3F7Fa; } .pho a { display: block; width: 100%; height: 100%; /* align-items: center; */ } .module:nth-child(-n+5) a :first-child { width:510px; height:300px; border-radius: 12px; -webkit-border-radius:12px; -moz-border-radius: 12px; margin-bottom: 8px; overflow: hidden; } .module:nth-child(-n+5) a video{ width: 516px !important; height: 310px !important; margin: -3px 0 0 -7px; } .desc_item { display: flex; align-items: center; } .pho_item { display: flex; align-items: center; } .module:nth-child(-n+5) .pho_item,.module:nth-child(6) .pho_item { align-items: flex-end; } .striping { display: inline-block; } .module:nth-child(2n) .desc_item { justify-content: flex-end; text-align: end; } .module:first-child .pho { width: 510px; } .module:nth-child(2n-1) .pho_item { justify-content: flex-end; } .module:nth-child(2n) .desc_item .desc_item_wrap img { margin: 0 20px 0 0; } .module:nth-child(2n+1) .desc_item .desc_item_wrap img { margin: 0 0 0 20px; }