.ibox1{padding:150px 0 0;background:#E5E5E4} .ibox1 .content{height:560px;background:url(../images/pic_02.jpg) no-repeat center;padding:0 100px;} .ibox1 .content .item{height:560px;position:relative;border-right:1px solid #fff;} .ibox1 .content .item .icon{width:140px;height:140px;border-radius:50%;margin:0 auto;position: absolute;top:50%;left:50%;margin-left:-70px;margin-top:-70px;} .ibox1 .content .item .info{padding:25px;background:#000;position: absolute;top:0;left:0;width:100%;height:100%;opacity: 0;transition: ease-in-out 0.5s;} .ibox1 .content .item .info .img{height:375px;background:#fff;text-align:center;} .ibox1 .content .item .info .img img{max-height:100%;} .ibox1 .content .item .info strong{display:block;text-align:center;font-size:54px;color:#81D8D0;} .ibox1 .content .item .info p{font-size:24px;color:#81D8D0;text-align:center;margin-bottom:15px} .ibox1 .content .item:hover .info{opacity: 1;transition: ease-in-out 0.5s;} .ibox1 .content .item:nth-child(5n){border-right:none;} /* */ .ibox2{background:#333;height:670px;} .ibox2 .content .item{height:670px;} .ibox2 .content .item a{display:flex;height:100%;align-items:center;padding:0 100px} .ibox2 .content .item .img{width:50%;float:left;text-align:center;} .ibox2 .content .item .info{width:50%;float:left;text-align:left;color:#fff;} .ibox2 .content .item .info h3{font-size:30px;} .ibox2 .content .item .info p{font-size:25px;margin:15px 0} .ibox2 .content .item .info span{font-size:40px;font-family: Arial;} .ibox2 .content .item .info li{font-size:18px;margin-top:10px;padding-left:20px;position:relative;} .ibox2 .content .item .info li::after{ content:'';display:block;width:10px;height:10px;border-radius:50%; background:#81D8D1;position: absolute;left:0;top:50%; transform: translateY(-50%); } .ibox2 .content .item .info i{display:inline-block;width:135px;height:44px;line-height:42px;border:1px solid #81D8D1;text-align:center;color:#81D8D1;margin-top:45px;display:block;font-size:20px;font-style: normal;transition: ease-in-out 0.5s;} .ibox2 .content .item .info i:hover{background:#81D8D1;color:#fff;transition: ease-in-out 0.5s;} /* */ .ibox3{padding:150px 0 130px;background:#E5E5E4} .ibox3 .content .item .info{width:500px;height:230px;background:#fff;position:absolute;top:50%;margin-top:-115px;left:0;border-left:3px solid #81D8D1;padding:40px;opacity:0;transition:ease-in-out 0.5s;} .ibox3 .content .item .info h3{font-size:28px;color:#202020;position:relative;padding-right:20px;margin-bottom:30px;} .ibox3 .content .item .info h3 span{width:20px;height:20px;border-radius:50%;border:5px solid #81D8D1;position: absolute;right:0;top:50%;margin-top:-10px;} .ibox3 .content .item .info div{line-height:28px;height:84px;overflow:hidden;color:#666;font-size:16px;} .ibox3 .content .item:hover .info{transition:ease-in-out 0.5s;opacity: 1;} /* */ .ibox4{background:url(../images/bg_02.jpg) no-repeat left center;height:860px;padding:125px 0 80px;} .ibox4 .head{padding:30px 100px;border-bottom:1px solid #929296;margin-bottom:30px;} .ibox4 .head .title{font-size:45px;color:#fff;font-weight:bold;float:left;} .ibox4 .head ul{float:right;margin-top: 20px;} .ibox4 .head ul li{float:left;color:#fff;font-size:24px;margin-left:70px;} .ibox4 .head ul li a{color:inherit;} .ibox4 .head ul li.on{color:#81D8D0} .ibox4 .content{padding:0 100px;position:relative;} .ibox4 .content .left{width:440px;float:left;height:1px;} .ibox4 .content .left span{width:200px;height:235px;background:#81D8D1;position:absolute;left:100px;bottom:20px} .ibox4 .content .left span a{position:absolute;top:50%;right:0%;width:140px;height:45px;border:1px solid #fff;color:#fff;text-align:center;margin-top:-22.5px;margin-right:-70px;line-height:43px;transition:ease-in-out 0.5s} .ibox4 .content .left span a:hover{background:#fff;border-color:#fff;transition:ease-in-out 0.5s;color:#81D8D1} .ibox4 .content .right{width:calc(100% - 440px);float:left;} .ibox4 .content .right .item .img{height:270px;text-align:center;overflow:hidden;} .ibox4 .content .right .item .img img{height:100%;width:100%;max-width:inherit;transition:all 0.5s} .ibox4 .content .right .item .info{background:#101010;padding:25px 20px;transition:ease-in-out 0.5s;} .ibox4 .content .right .item .info .title{font-size:22px;color:#fff} .ibox4 .content .right .item .info .time{font-size:16px;color:#CCCCCC;margin:10px 0 20px;} .ibox4 .content .right .item .info .text{font-size:18px;color:#ababab;height:60px;overflow:hidden;line-height:30px;} .ibox4 .content .right .item:hover .info{background:#262626;transition:ease-in-out 0.5s} .ibox4 .content .right .item:hover .info .title{color:#81D8D1;transition:ease-in-out 0.5s} .ibox4 .content .right .item:hover img{transform: scale(1.1);transition:all 0.5s} @media (max-width:1440px){ .case .list li .imgDiv {height:210px} } @media (max-width:991px) and (min-width:768px){ /* */ .width{padding:0 15px;} /* */ .ibox1{padding:40px 15px;} .ibox1 .content{padding:0 50px;height:450px;} .ibox1 .content .item{border:none;height:450px} .ibox2 .content .item a{padding:0 50px;flex-wrap:wrap;} /* .ibox2 .content .item .img,.ibox2 .content .item .info{width:100%;} */ .ibox2{height:auto;} .ibox2 .content .item{height:490px;} .ibox2 .content .item .img{padding-right:20px;} .ibox2 .content .item .info {padding-left:20px;} .ibox2 .content .item .info h3{font-size:24px;} .ibox2 .content .item .info p{font-size:20px;margin:10px 0;} .ibox2 .content .item .info span{font-size:22px;} .ibox2 .content .item .info li{font-size:16px;margin-top:10px;} .ibox2 .content .item .info i{font-size:16px;width:130px;line-height:40px;line-height:38px;margin-top:15px;} /* */ .ibox4{padding:40px 15px;height:auto;} .ibox4 .head{padding:0 0 20px;} .ibox4 .content{padding:0;} .ibox4 .content .left{display:none;} .ibox4 .content .right{width:100%;} .ibox4 .content .right .item .img{height:230px;} } @media (max-width:767px){ .ibox1{padding:30px 15px;} .lm_head .title{font-size:24px;} .lm_head p{line-height:12px;line-height:20px;margin-top:10px;} /* */ .ibox1 .content{padding:30px 15px;height:350px;} .ibox1 .content .item{height:290px;border:none;} /* .ibox1 .content .item */ .ibox3{padding:30px 15px;} .ibox3 .content .item .info{position:static;opacity: 1;padding:15px;margin-top:0;width:100%;height:auto;} .ibox3 .content .item .info h3{margin-bottom: 10px;font-size:18px;font-weight:bold;} .ibox3 .content .item .info h3 span{width:15px;height:15px;} .ibox3 .content .item .info div{line-height:20px;font-size:12px;height:60px;} /* */ .ibox2{height:auto;} .ibox2 .content .item{height:auto;} .ibox2 .content .item a{padding:30px 15px ;flex-wrap:wrap;} .ibox2 .content .item .img,.ibox2 .content .item .info{width:100%;} .ibox2 .content .item .info h3{font-size:18px;} .ibox2 .content .item .info p{font-size:14px;margin:10px 0;} .ibox2 .content .item .info span{font-size:16px;} .ibox2 .content .item .info li{font-size:10px;margin-top:10px;} .ibox2 .content .item .info i{font-size:12px;width:100px;height:35px;line-height:33px;margin-top:15px;} /* */ .ibox4{padding:30px 15px;height:auto;} .ibox4 .head{padding:0 0 15px} .ibox4 .head .title{font-size:20px;} .ibox4 .head ul{margin-top:10px;} .ibox4 .head ul li{font-size:14px;margin-left:15px;} .ibox4 .content{padding:0} .ibox4 .content .left{width:100%;display:none;} .ibox4 .content .right{width:100%;} .ibox4 .content .right .item .img{height:auto;} .ibox4 .content .right .item .info .title{font-size:18px;} .ibox4 .content .right .item .info .time{font-size:14px;margin:5px 0;} .ibox4 .content .right .item .info .text{font-size:12px;height:40px;line-height:20px;} /* */ } @media (max-width:1440px) and (min-width:1200px){ .ibox1 .content{padding:0 50px;height:400px} .ibox1 .content .item{height:400px} .ibox1 .content .item .info .img{height:250px;} .ibox1 .content .item .info strong{font-size:40px} /* */ .ibox2 .content .item a{padding:0 50px} /* */ .ibox4{height:auto;padding-top:0px} .ibox4 .content{padding:0 50px} .ibox4 .content .left{width:300px;} .ibox4 .content .left span{left:50px} .ibox4 .content .right{width:calc(100% - 300px)} .ibox4 .content .right .item .img{height:210px;} }