.js_box { width: 100%; position: relative; } .js_box .js_one { width: 100%; float: left; } .js_box .js_one .js_item { /*width: 387px;*/ } .js_header { height: 74px; position: relative; width: 100%; } .js_header span { display: block; height: 74px; text-align: center; line-height: 74px; font-size: 24px; color: #fff; } .js_header img { position: absolute; right: 10px; bottom: 1px; height: 60px; } .js_body { position: relative; background-color: #f5f5f5; height: 572px; } .js_body ul { padding-top: 38px; height: 410px; position: relative; margin-left: 93px; } .js_body ul li { position: relative; } .js_body ul li span { position: absolute; left: 0; top: 9px; width: 22px; height: 22px; border-radius: 22px; display: block; z-index: 2; } .js_body ul li span img { width: 12px; height: 12px; display: block; position: absolute; top: 5px; left: 5px; } .js_body ul li div { height: 40px; width: 140px; border-radius: 20px; text-align: center; line-height: 40px; font-size: 16px; color: #fff; margin-left: 50px; transition: all 0.3s; } .js_body ul .jst1 { padding-bottom: 52px; } .js_body ul .jst2 { padding-bottom: 33px; } .js_body ul .js_line { position: absolute; width: 3px; top: 66px; bottom: 28px; left: 9px; background-color: #d8d8d8; z-index: 1; } .js_desc { margin-top: 40px; font-size: 16px; text-align: center; color: #999999; padding-left: 20px; padding-right: 20px; } .js_body ul li:hover div { transform: scale(1.03) translateX(10px); opacity: 0.8; } /*@media screen and (max-width: 1700px) {*/ /* .box {*/ /* width: 1400px;*/ /* }*/ /* .js_box .js_one .js_item {*/ /* width: 322px;*/ /* }*/ /* .js_body ul {*/ /* margin-left: 57px;*/ /* }*/ /*}*/ /*@media screen and (max-width: 1400px) {*/ /* .box {*/ /* width: 1200px;*/ /* }*/ /* .js_box .js_one .js_item {*/ /* width: 276px;*/ /* }*/ /* .js_body ul {*/ /* margin-left: 37px;*/ /* }*/ /*}*/