body section { padding:50px 0 100px 0; } .h1-title { font-size:40px; color:#333; text-align:center; margin:0 auto 26px; letter-spacing:2px; font-weight:700; } .p-desc { font-size: 26px; line-height: 40px; letter-spacing:1px; color:#333; font-weight: 300; margin:0 auto 65px; text-align:center; } .hangye .hangye-wrap { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -webkit-justify-content:space-between; -moz-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; height:auto; } .hangye .hangye-wrap .hangye-item { -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; -webkit-box-flex:0; -webkit-flex:0 0 24%; -moz-box-flex:0; -ms-flex:0 0 24%; flex:0 0 24%; height:320px; background:#fff; text-align:center; overflow:hidden; position:relative; -webkit-transition:all .3s; -o-transition:all .3s; -moz-transition:all .3s; transition:all .3s; color:#201c38; cursor: pointer; box-shadow: 2px 2px 10px #ddd; } .hangye .hangye-wrap .hangye-item:hover { height:360px; -webkit-transform:translateY(-30px); -moz-transform:translateY(-30px); -ms-transform:translateY(-30px); -o-transform:translateY(-30px); transform:translateY(-30px); background:#00780C; color:#fff; } .hangye .hangye-wrap .hangye-item:hover .item-main .hangye-link { -webkit-transform:translate(-50%,-10px); -moz-transform:translate(-50%,-10px); -ms-transform:translate(-50%,-10px); -o-transform:translate(-50%,-10px); transform:translate(-50%,-10px); } .hangye .hangye-wrap .hangye-item .item-img { height:160px; text-align: center; padding-top: 20px; } .hangye .hangye-wrap .hangye-item .item-img img { width:150px; max-height: 280px; display:inline-block; text-align: center; border-radius: 50%; } .hangye .hangye-wrap .hangye-item .item-main { padding:20px; height:240px; position:absolute; width: 100%; } .hangye .hangye-wrap .hangye-item .item-main .item-title { font-size:24px; line-height:1; margin-bottom:24px; font-weight: 300; } .hangye .hangye-wrap .hangye-item .item-main .item-desc { font-size:14px; line-height:24px; text-align: left; } .hangye .hangye-wrap .hangye-item .item-main .hangye-link { width:120px; height:35px; line-height:35px; display:block; color:white; background:#ec008c; -webkit-border-radius:35px; -moz-border-radius:35px; border-radius:35px; position:absolute; left:50%; bottom:120px; -webkit-transition:all .3s; -o-transition:all .3s; -moz-transition:all .3s; transition:all .3s; -webkit-transform:translate(-50%,0); -moz-transform:translate(-50%,0); -ms-transform:translate(-50%,0); -o-transform:translate(-50%,0); transform:translate(-50%,0); } @media(max-width: 768px){ .hangye .hangye-wrap{ height: auto; flex-flow: row wrap; } .hangye .hangye-wrap .hangye-item{ flex: 0 0 49%; margin-bottom: 20px; height: 320px; margin-right: 1%; } .hangye .hangye-wrap .hangye-item:nth-child(2n){ margin-right: 0; margin-left: 1%; } .hangye .hangye-wrap .hangye-item .item-img{ height: 160px; } .hangye .hangye-wrap .hangye-item .item-main{ padding:10px 5px; } .hangye .hangye-wrap .hangye-item .item-main .item-title{ font-size: 18px; margin-bottom: 10px; margin-top: 15px; font-weight: bold; } .hangye .hangye-wrap .hangye-item .item-main .item-desc{ font-size: 12px; line-height: 24px; } .hangye .hangye-wrap .hangye-item:hover{ height: 320px; transform: translateY(0px); } body section { padding:30px 0 0 0; } .hangye .hangye-wrap .hangye-item .item-img img{ width: 130px; height: 130px; } }