.wel-product { padding-bottom: 80px } .wel-product-title { font-size: 24px; color: #24272b; line-height: 42px; margin-bottom: 22px; font-weight: bold; position: relative } .wel-product-title a { display: inline-block; font-size: 14px; color: #24272b; position: absolute; top: 0; right: 0; width: 95px; transition: color .3s } .wel-product-title span { width: 20px; height: 20px; border-radius: 50%; background: #b0b0b0 url(../images/wel04.png) no-repeat center; display: inline-block; position: absolute; right: 0; top: 50%; margin-top: -12px; transition: background .3s } .wel-product .left { padding: 0 10px 0 0; width: 50%; float: left } .wel-product .right { padding: 0 0 0 10px; width: 50%; float: right } .wel-product .product-1 { padding: 0 10px 0 0; margin-bottom: 20px; height: 190px; text-align: center } .wel-product .container a { width: 100%; text-align: center; height: 100%; display: block; background: #fff; overflow: hidden; position: relative; cursor: pointer; transition: box-shadow .3s } .wel-product .product-2 { padding: 0 0 0 10px; margin-bottom: 20px; height: 190px; text-align: center } .wel-product .product-3 { width: 100%; height: 393px; padding: 0 } .wel-product .product-3 .pic { height: 100%; position: relative; width: 100% } .wel-product .product-3 img { height: 100%; position: absolute; left: 50%; margin-left: -345px } .wel-product .contrast { width: 14px; height: 16px; background: url(../images/wel09.png) no-repeat center; position: absolute; bottom: 15px; right: 20px; cursor: pointer; transition: background .3s } .wel-product .ico-1 img { max-height: 100%; max-width: 100% } .wel-product .ico-1.ico_11 img { max-height: 100%; max-width: 350px } .wel-product .container { width: 100%; padding: 0 } .wel-product .container .row { margin: 0 } .wel-product .ico-1 h2 { font-size: 16px; color: #fff; position: absolute; bottom: 10px; line-height: 26px; height: 26px; width: 100%; text-align: left; padding: 0 15px 0 15px; overflow: hidden } .wel-product .ico-1 .bg { width: 100%; position: absolute; bottom: 0; left: 0; background: #dd231f; display: block; height: 0; transition: height .3s } .wel-product .product-4 { margin-bottom: 20px; width: 100%; padding: 0; height: 393px } .wel-product .product-4 img { max-height: 100%; position: relative; left: 50%; margin-left: -101% } .wel-product .product-4 .con { display: block; width: 100%; position: absolute; bottom: 0; left: 0; text-align: left; padding: 16px 45px 20px } .wel-product .product-4 h2 { font-size: 16px; color: #fff; line-height: 26px; height: 26px; width: 100%; overflow: hidden } .wel-product .container h2, .wel-product .container p.font { opacity: 0; filter: alpha(opacity=0) } .wel-product .product-4 .bg { width: 100%; background: #dd231f; position: absolute; bottom: 0; left: 0; height: 0; transition: height .3s } .wel-product .product-4 .font { font-size: 14px; color: #fff; opacity: .7; filter: alpha(opacity=70); line-height: 24px; height: 24px; overflow: hidden } .wel-product .product-3 .contrast, .wel-product .product-4 .contrast { position: absolute; bottom: 40px; right: 45px } .wel-product-title a:hover { color: #dd231f } .wel-product-title a:hover span { background: #dd231f url(../images/wel04.png) no-repeat center } .wel-product .container a:hover { box-shadow: 0 0 30px rgba(0, 0, 0, .1) } .wel-product a:hover .bg { height: 46px } .wel-product a:hover .contrast { background: url(../images/wel09_h.png) no-repeat center } .wel-product .container a:hover h2, .wel-product .container a:hover p.font { opacity: 1; filter: alpha(opacity=100) } .wel-product .product-4 a:hover .bg { height: 86px }