.contain{ width: 1180px; margin: 0 auto; } .slogn-title{ height: 94px; border-bottom: 1px solid #0054a6; } .slogn{ height: 94px; line-height: 94px; float: left; font-size: 34px; font-weight: 800; color: #0054a6; margin-left: 20px; } .index_1{ float: right; margin-right: 20px; } /* 企业新闻 */ .news{ width: 372px; height: 476px; display: inline-block; position: relative; } #company{ margin-right:27px ; } .loupe{ position: absolute; top:28px; left: 140px; z-index: 2; transform: scale(0.9); } .newsbox{ width: 368px; height: 360px; margin-top: 74px; border: 1px solid #dbdbdb; border-radius: 10px; position: absolute; } .newsboxbar{ width: 342px; height: 50px; line-height: 50px; background-color: #f8f8f8; padding: 0 13px; border-top-left-radius: 10px; border-top-right-radius: 10px; vertical-align: middle; } .newsboxbar a{ float: right; color: #212121; font-size: 16px; font-weight:800; } .arrow{ float: right; font-size: 8px; } .newsboxbar .morenews{ float: right; font-size: 13px; } .newsboxbar h4{ display: inline-block; font-size: 15px; } .newsboxbar h5{ display: inline-block; font-size: 12px; font-style:oblique; color: #bcbcbc; } .newsheadline{ width: 342px; height: 310px; padding: 0 13px; } .newstitle{ width: 100%; height: 38px; line-height: 38px; font-size: 14px; color: #0054a6; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .newstitle:hover{ font-weight:600; } .newsbrief{ color: #000000; height: 96px; line-height: 30px; text-indent: 2em; border-bottom: 1px solid #0054a6; border-top: 1px solid #0054a6; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .newsbrief:hover{ color: #0054a6; } .newslist{ margin-top: 14px; } .newslist li{ position: relative; width: 342px; height: 30px; line-height: 30px; list-style-type: square; list-style-position:inside; } .newshort{ width: 220px; height: 30px; line-height: 30px; position: absolute; left: 10px; top: 0; color: #666666; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .newsdata{ position: absolute; height: 24px; line-height: 24px; right: 0; top: 0; list-style-type: square; list-style-position:inside; font-size: 13px; color: #666666; } .newshort:hover{ color:#0054a6 ; } /* 行业新闻 */ #industry{ margin-right: 27px; } /* 阀泵知识 */ /* 应用领域 */ .application{ margin-bottom: 70px; } .applicationblock{ width:314px; height:260px; display: inline-block; position: relative; } .block-title{ width: 100%; height: 42px; line-height: 42px; border-bottom: 1px solid #eeeeee; } .block-title h4{ display: inline-block; font-size: 17px; } .block-title h5{ display: inline-block; font-size: 13px; font-style:oblique; color: #bcbcbc; } .borders{ width: 130px; height: 1px; border-bottom: 2px solid #0054a6; position: absolute; left: 0; top:40px; } .block-txt{ width: 100%; height:217px; line-height: 26px; text-indent: 2em; font-size: 14px; margin-top: 10px; font-weight: 500; } .aplication-image{ float: right; margin-top: 30px; } .aplication-image li{ float: left; margin-left: 18px; cursor: pointer; } .aplication-image li .img-wrap{ width: 270px; height: 180px; overflow: hidden; } .aplication-image li .img-wrap img:hover{ transform: scale(1.1); transition: all 0.3s; } .aplication-image li:hover{ transform: scale(1.02); } @keyframes flyup { 0% {margin-bottom: 0;}/*初始状态 透明度为0*/ 100% {margin-bottom:20px;}/*结束状态 透明度为1*/ } @-webkit-keyframes flyup {/*针对webkit内核*/ 0% {margin-bottom: 0;}/*初始状态 透明度为0*/ 100% {margin-bottom:20px;}/*结束状态 透明度为1*/ } @keyframes fade-in { 0% {opacity: 0;}/*初始状态 透明度为0*/ 40% {opacity: 0;}/*过渡状态 透明度为0*/ 100% {opacity: 1;}/*结束状态 透明度为1*/ } @-webkit-keyframes fade-in {/*针对webkit内核*/ 0% {opacity: 0;} 40% {opacity: 0;} 100% {opacity: 1;} } .shadowbox{ height: 54px; padding-top: 6px; box-shadow:0 5px 8px #eeeeee; } .aplication-image h4{ height: 22px; line-height: 22px; font-size: 14px; text-align: center; color: #333333; } .aplication-image h5{ height: 24px; line-height: 24px; font-size: 14px; font-weight: 300; text-align: center; color: #333333; } /* 产品推荐 */ .productblock{ width: 100%; height: 478px; position: relative; } .product-list{ width: 100%; height: 372px; margin-top: 30px; } .product-class{ width: 200px; height: 404px; display: inline-block; } .classtitle{ width: 200px; height: 82px; text-align: center; background-color: #0054a6; } .classtitle h4{ color: #ffffff; font-weight: 500; padding-top: 15px; } .classtitle a{ font-size: 20px; color: #fff; } .classtitle h5{ font-size: 18px; color: #ffffff; font-weight: 300; } .classtitle h5:hover{ font-size: 19px; } .classname{ display: inline-block; width: 200px; background-color: #fafafa; } .hoveractive:hover{ background-color: #e7e7e7; } .classname a{ display: block; margin-left:25px; font-size: 1.2rem; } .classname a:hover{ color: #0054a5; } .classname li{ width: 200px; height: 83px; line-height:83px; font-size: 18px; color: #333333; } .classname li:not(:first-of-type){ margin-top: 2px; } .classname li p{ float: right; margin-right:25px; } .product-show{ width: 954px; height: 372px; float: right; } .product-nav{ width: 100%; height: 80px; display: flex; align-items: center; align-content: center; } .product-nav li{ display: inline-block; padding: 0 10px; border-left: 1px solid #c4c5c5; margin-right: -4px; } .product-nav a{ display: inline-block; height: 20px; line-height:20px; font-size: 17px; color: #333333; padding: 2px 10px; border: 1px solid #ffffff; } .product-nav .more{ color: #0054a5; } .more:hover{ font-weight: 500; } .product-kind:hover{ color: #0054a5; border: 1px solid #0054a5; } .product-box{ width: 33%; display: inline-block; background-color: #0054a6; cursor: pointer; padding-bottom:12px; } .product-box:hover{ background-color: #006cd4; } .product-box .img-wrap{ width: 100%; height: 235px; background-color: #ffffff; overflow: hidden; padding: 20px; box-sizing: border-box; } .product-img{ width: 100%; height: 100%; } .product-img:hover{ transform: scale(1.1); transition: all 0.3s; } .product-name{ height: 30px; line-height: 30px; font-weight: 500; text-align: center; font-size: 16px; color: #ffffff; margin-top: 13px; } .active{ width: 238px; height: 30px; font-weight: 300; line-height: 30px; margin:10px auto; } .active a{ color: #ffffff; } .consulting{ width: 82px; float: left; font-size: 14px; text-align: center; border: 1px solid #ffffff; } .consulting:hover{ font-weight: 500; background-color: #1e80df; } .details{ width: 82px; margin: 0 auto; font-size: 14px; text-align: center; border: 1px solid #ffffff; background-color: transparent; } /* 为什么选择我们 */ .whychoose{ width: 100%; height: 330px; margin-top: 72px; position: relative; } .reasons{ width: 592px; margin-top: 32px; display: inline-block; } .reasons p{ line-height: 30px; font-size: 14px; font-weight: 500; text-indent: 2em; } .video{ width:495px; height: 273px; position: absolute; background-color: #0054a6; right: 0; bottom: 0; } /* 六大优势 */ .sixgoodness{ margin-top:74px ; } /* 生产设备 */ .productequipment{ position: relative; margin-top: 26px; } .equipment-img{ width: 1193px; height: 262px; margin-top: 30px; margin-right: -13px; } .equipmentbox .img-wrap{ width: 282px; height: 212px; vertical-align: top; overflow: hidden; } .equipment-pic{ width: 100%; height: 100%; } .equipment-pic:hover{ transform: scale(1.1); transition: all 0.3s; } .equipmentbox:hover .equipment-name{ background-color: #0054a5; color: #ffffff; transition: all 0.3s; } .equipment-img li{ width: 25%; height: 262px; float: left; } .equipment-name{ width: 282px; height: 50px; line-height: 50px; background-color: #f1f1f1; font-weight: 600; color: #333333; font-size: 14px; text-align:center; } /* 工程案例 */ .engineeringcase{ position: relative; margin-top: 34px; } .engineering-img{ width: 1193px; /*height: 262px;*/ margin-top: 30px; margin-bottom: 30px; /*margin-right: -13px;*/ } .engineering-img ul{ display: flex; } .engineering-img li{ display: block; width: 25%; padding: 0 5px; position: relative; box-sizing: border-box; cursor: pointer; } .engineering-img .engineering-pic{ position: relative; width: 100%; padding-bottom: 75%; height: 0; overflow: hidden; } .engineering-img .engineering-pic > div{ position: absolute; width: 100%; height: 100%; overflow: hidden; } .engineering-img img{ width: 100%; height: 100%; } .engineering-img img:hover{ transform: scale(1.1); transition: all 0.3s; } .engineering-name{ width: 100%; height: 40px; line-height: 40px; font-weight: 600; color: #333333; font-size: 16px; text-align:center; } .engineering-situation{ width: 100%; height: 46px; line-height: 23px; color: #707070; font-size: 15px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .engineering-img a{ height: 16px; line-height: 16px; text-align: right; color: #0054a6; font-size: 13px; /*position: absolute;*/ /*bottom:10px;*/ /*left: 11em;*/ } .engineering-img a:hover{ font-weight: 500; } /* 企业介绍 */ .companyprofile{ width: 100%; height: 312px; margin-bottom: 50px; position: relative; } .companyintro{ width: 574px; height: 312px; display: inline-block; position: relative; } .profile{ font-size: 14px; font-weight: 500; color: #333333; text-indent: 2em; line-height: 26px; margin-top: 17px; } .checkmore{ width: 120px; height: 34px; line-height: 34px; font-size: 14px; font-weight: 300; text-align: center; background-color: #0054a6; position: absolute; left: 0; bottom: 0; cursor: pointer; } .checkmore > a{ color: #fff; } .checkmore:hover{ font-weight: 500; background-color: #0054a5; } .actions{ width: 581px; height: 270px; float: right; margin-top: 42px; } .actions li{ position: relative; margin-bottom: 6px; } .actions a{ font-size: 24px; color: #ffffff; opacity: 0.8; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }