.subcenter{ width: 90%; margin: 0 auto; position: relative; padding: 30px 0; /* -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; */ } .subcenter:after, .zhengc_top:after, .zhengc_nav:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .zhengc_nav{ width: 100%; position: relative; } .zhengc_nav li{ width: 25%; height: 170px; float: left; background: #b5b5b5; text-align: center; border-left: 1px solid #a3a3a3; /* -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; */ } .zhengc_nav li.on:first-child{ border-left: 1px solid #fff; } .zhengc_nav li:first-child{ border-left: 1px solid #a3a3a3; } .zhengc_nav li>a{ display: table; table-layout: fixed; width: 100%; height: 100%; overflow: hidden; } .zhengc_nav li>a>div{ display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; overflow: hidden; } .zhengc_nav li>a>div img{ max-width: 80%; max-height: 80%; } .zhengc_nav li dl{ position: absolute; left: 0; top: 100%; width: 100%; background: #fafafa; padding: 30px 20px; z-index: 50; display: none; } .zhengc_nav li dl dd{ display: inline-block; } .zhengc_nav li dl dd a{ display: block; padding: 0 30px; border-left: 1px solid #e4e4e4; font-size: 18px; color: #666666; } .zhengc_nav li dl dd:hover a{ color: #bd2315; } .zhengc_nav li dl dd:first-child a{ border-left: none; } /*hover*/ .zhengc_nav li:hover{background: #fafafa;border-left: 1px solid #fafafa} .zhengc_nav li:hover dl{display: block;} /*on*/ .zhengc_nav li.on{background: #fafafa;} .zhengc_nav li.on dl{display: block;} .zhengc_nav li dl dd.on a{color: #bd2315;} /*公司简介*/ .zhengc_top{ width: 100%; position: relative; padding: 50px 0 70px 0; } .iftop{ padding-top: 100px; } .zhengc_top .zhengc_topl{ float: left; width: 40%; position: relative; padding-top: 26.08695652173913%; overflow: hidden; background: #001534; } .zhengc_top .zhengc_topl>img{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; -ms-transition: all 1s ease-in-out 0s; -o-transition: all 1s ease-in-out 0s; transition: all 1s ease-in-out 0s; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; filter: alpha(opacity=100); } .zhengc_top .zhengc_topl:hover>img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); opacity: 0.6; filter: alpha(opacity=60); } .zhengc_top .zhengc_topl:after{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.3); content: ''; -webkit-transition: all .6s ease-in-out 0s; -moz-transition: all .6s ease-in-out 0s; -ms-transition: all .6s ease-in-out 0s; -o-transition: all .6s ease-in-out 0s; transition: all .6s ease-in-out 0s; -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0); opacity: 0.5; } .zhengc_top .zhengc_topl:hover:after{ -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,110%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,110%,0); opacity: 1; } .zhengc_top .zhengc_topr{ float: right; width: 56%; position: relative; padding-top: 26.08695652173913%; } .zhengc_top .zhengc_topr .wordin{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 70px 0 80px 0; overflow: hidden; } .zhengc_top .zhengc_topr .wordin>h1{ font-size: 24px; color: #333333; font-weight: normal; width: 100%; line-height: 70px; position: absolute; left: 0; top: 0; height: 70px; padding-left: 20px; overflow: hidden; } .zhengc_top .zhengc_topr .wordin>h1:before{ content: ""; width: 3px; height: 25px; background: #bd2315; position: absolute; left: 0; top: 50%; margin-top: -12.5px; } .zhengc_top .zhengc_topr .wordin>a{ position: absolute; left: 0; bottom: 10px; width: 174px; height: 54px; text-align: center; display: block; line-height: 54px; border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; color: #fff; -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; background: #bd2315; } .zhengc_top .zhengc_topr .wordin>a:hover{ color: #fff; background: #333; } .zhengc_top .zhengc_topr .wordin>div.content{ width: 100%; height: 100%; overflow: hidden; position: relative; word-wrap: break-word; word-break: normal; padding: 0 10px 0 0; } .zhengc_top .zhengc_topr .wordin>div.content img{max-width: 100%} /*推荐列表*/ .zhengc_bottom{ width: 100%; position: relative; } .zhengc_bottom li{ float: left; width: 32%; margin: 0 0 0 2%; } .zhengc_bottom li:first-child{ margin: 0; } .zhengc_bottom li a{display: block;} .zhengc_bottom li div.img{ width: 100%; padding-top: 54.52961672473868%; position: relative; overflow: hidden; background: #001534; } .zhengc_bottom li div.img img{ display: block; width: 102%; height: 102%; position: absolute; left: -1%; top: -1%; -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; -ms-transition: all 1s ease-in-out 0s; -o-transition: all 1s ease-in-out 0s; transition: all 1s ease-in-out 0s; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; filter: alpha(opacity=100); } .zhengc_bottom li:hover div.img img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); opacity: 0.6; filter: alpha(opacity=60); } .zhengc_bottom li div.img:after{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.3); content: ''; -webkit-transition: all .6s ease-in-out 0s; -moz-transition: all .6s ease-in-out 0s; -ms-transition: all .6s ease-in-out 0s; -o-transition: all .6s ease-in-out 0s; transition: all .6s ease-in-out 0s; -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0); opacity: 0.5; } .zhengc_bottom li:hover div.img:after{ -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,110%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,110%,0); opacity: 1; } .zhengc_bottom li div.word{ width: 100%; position: relative; overflow: hidden; padding: 5% 0; } .zhengc_bottom li div.word h1{ font-size: 18px; color: #001534; font-weight: normal; width: 100%; line-height: 1.5em; height: 1.5em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; margin: 0 0 0.5em 0; -webkit-transition: all .4s ease-in-out 0s; -moz-transition: all .4s ease-in-out 0s; -ms-transition: all .4s ease-in-out 0s; -o-transition: all .4s ease-in-out 0s; transition: all .4s ease-in-out 0s; } .zhengc_bottom li div.word p{ font-size: 14px; color: #999999; line-height: 1.5em; width: 100%; height: 3em; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 0 0 0.5em 0; } .zhengc_bottom li:hover div.word h1{ color: #d12519; } .zhengc_bottom li div.word h1:hover{ text-decoration: underline; } /*pc*/ @media screen and (min-width: 900px) and (max-width: 1200px){ .zhengc_nav li{ height: 100px; } .zhengc_nav li>a i{ margin: 18px auto 0 auto; } .zhengc_top .zhengc_topl{ display: none; } .zhengc_top .zhengc_topr{ width: 100%; padding-top: 35%; } } @media screen and (max-width: 899px){ .subcenter{ width: 96%; } .zhengc_nav li{ height: 100px; } .zhengc_nav li>a i{ margin: 18px auto 0 auto; } .zhengc_nav li>a span{ font-size: 16px; } .zhengc_nav li dl dd a{ font-size: 16px; } .zhengc_top .zhengc_topl{ width: 100%; padding-top: 65.21739130434783%; } .zhengc_top .zhengc_topr{ width: 100%; padding-top: 50%; margin: 20px 0 0 0; } .zhengc_bottom li div.word h1{ font-size: 16px; } .zhengc_bottom li div.word p{ font-size: 13px; } .zhengc_top .zhengc_topr .wordin>h1{ font-size: 20px; height: 50px; line-height: 50px; } .zhengc_top .zhengc_topr .wordin>a{ font-size: 14px; width: 150px; height: 40px; line-height: 40px; } .zhengc_top .zhengc_topr .wordin{ padding: 60px 0 70px 0; } }