.pro_container{ margin:50px auto 30px auto; max-width: 1700px; padding-left: 30px; text-align: left; } @media screen and (max-width:1700px) { .pro_container{ max-width: 1064px; } } .pro_region{ position:relative; overflow: hidden; float:left; width:364px; min-height: 620px; border-radius: 10px; box-shadow:0 0 32px 0 rgba(0,0,0,0.18); background-color: #fff; transition:all 0.5s; cursor:pointer; margin-left: -30px; } @media screen and (max-width:1700px ) { .region4{margin-left: 182px;} .regiontop{margin-top: 30px;} } .pro_container .pro_mouse_over{ z-index: 3; transform:scale(1.07); } .pro_img_container{ position: relative; overflow: hidden; height:153px; padding:30px 0 20px 0; text-align: center; background-color:#F8F8F8; border-bottom:1px solid #E6E6E6; transition:transform 0.3s; } .pro_container .pro_mouse_over .pro_img_container{ background-color:#179c3d; /* height:120px*/ } .pro_img_container .pro_img_left{ transition:opacity 0s, transform 0.8s; position:absolute; top:30px; left:170px; width:60px; opacity: 0; transform:translateZ(0); } .pro_container .pro_mouse_over .pro_img_left{ transform:translate(-190px, -60px) scale(1.66666); opacity: 0.5; } .pro_img_container .pro_img_right{ transition:opacity 1s; position:absolute; top:20px; right:0; width:200px; opacity: 0; transform:translateZ(0); } .pro_container .pro_mouse_over .pro_img_right{ opacity: 1; } .pro_img_container .pro_img_icon{ transition:transform 1s, opacity 0s; position: relative; top:0; left:0; height:68px; width:auto; margin:0 auto; opacity: 1; } .pro_container .pro_mouse_over .pro_img_icon{ opacity:0; transform: scale(1.5) translate(-160px, -25px); } .pro_img_container .pro_img_title{ transition:transform 0.8s; margin-top: 5px; font-size: 20px; top:0; left:0; color:#333; line-height: 1.42; } .pro_container .pro_mouse_over .pro_img_title{ position: relative; transform: translate(-50px, -60px) scale(1.2); transform-origin:bottom; color:#fff; } .pro_word_container{ padding: 20px 30px 0 30px; } .pro_word_container ul{margin: 0; padding: 0;} .pro_word_container ul li{ list-style: none; padding-bottom: 20px; font-size: 16px; color:#333; line-height: 44px; height: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pro_word_container ul li a{ color:#333; } .pro_word_container ul li span{ font-size: 14px; color:#333; } .pro_word_container ul li a:hover, .pro_word_container ul li a:hover span{ color:#179c3d; } .pro_word_container ul li img{ display: inline-block; margin-right: 25px; vertical-align:bottom; }