@subject-maxwidth:1460px; @subject-minwidth:1220px; .header-nav{ width:100%; font-size: 12px; height: 195px; .header-nav-content-box{ width:100%; z-index: 999; position:fixed; .ad_top{ width: 100%; height: 80px; position: relative; a{ width: 100%; height:100%; img{ position: absolute; top: 0; left: 50%; margin-left: -966px; } } } .header-first-box{ width:100%; line-height: 35px; background: #f5f5f5; overflow: hidden; .header-nav-first{ width: @subject-minwidth; margin:0 auto; height:35px; .nav-first-left{ float:left; height:35px; font-size:12px; .city-menu{ height:35px; padding:0 11px 0 24px; position: relative; a{ color:#0cb46a; } i{ position: absolute; left: 5px; color: #0cb46a; } } } .nav-first-right{ font-size: 12px; float:right; height:35px; li{ position: relative; float:right; padding:0 14px 0 14px; .phone-number{ margin-left:15px; color:#ff5a00; span{ display: inline-block; text-decoration: underline; position: inherit; border-left: none; } } .phone-number:hover{ color:#ff5a00; } a{ color:#999; .icon-phone{ padding:0; margin:0; position: absolute; top: 0; left:10px; border: none; } } span{ display: block; position: absolute; top: 10px; right:0; height:12px; border-left: 1px solid #ddd; } i{ display: inline-block; margin: 14px 0 0 3px; border-top: 5px solid #999; border-left: 3px solid transparent; border-right: 3px solid transparent; } } li:hover{ a{ color:#0cb46a; } .jiantou{ border-top: 5px solid #0cb46a; } } } } } .header-last-box{ width:100%; height:80px; background: #fff; .header-nav-content{ width:@subject-minwidth; height:100%; margin:0 auto; position: relative; .header-logo{ display: inline-block; position: absolute; width:157px; height:100%; a{ position:absolute; top: 50%; left:0; margin-top:-22px; } } .header-content-center{ width:70%; height:100%; margin:0 auto; ul:after{ content:""; display: block; height:0; clear: both; } ul{ height:100%; li{ float:left; height:100%; padding:0 25px; position: relative; a{ display: block; color:#333; font-size:16px; position: relative; top: 50%; margin-top: -11px; span{ display: none; width:100%; height:0; border-top:1px solid #0cb46a; position: absolute; top:50%; margin-top:12px; } i{ display: block; position: absolute; top: 9px; right: -13px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #999; } } } li:hover{ a{ color:#0cb46a; span{ display: block; } i{ border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: none; border-bottom: 5px solid #0cb46a; top: 8px; } } } } } .header-content-search{ position: absolute; right:0; top:0; height:100%; form{ position: relative; top: 50%; margin-top:-17px; div{ height:34px; border:1px solid #ccc; input{ float:left; font-size: 14px; border: none; padding:8px 0 9px 9px; outline: none; } i{ display: inline-block; width:20px; height:20px; font-size: 18px; border: none; margin:7px 10px 0 10px; cursor: pointer; } } } } } } .drop-down-menu{ display: none; position: absolute; width: 100%; height: 114px; background: #fff; border-top: 1px solid #ddd; padding-top: 36px; box-shadow: 0 5px 20px rgba(0,0,0,0.2); div{ display: none; width: 929px; height: 100%; position: absolute; top: 0; left: 50%; margin-left: -464.5px; ul:after{ content: ''; display: block; clear: both; } ul{ width: 100%; height: 100%; box-sizing: border-box; padding: 0 60px; li{ float: left; height: 100%; a{ display: block; width: 100%; height: 100%; img{ height: 80px; width: 80px; margin: 0 auto; margin-top: 20px; } i{ display: block; text-align: center; margin-top: 10px; font-size: 16px; } } a:hover{ color: #fb752c; } } } } .zbxx{ ul{ li{ width: 33.33333%; } } } .download{ ul{ li{ width: 25%; } } } } } } @media screen and (min-width: 1460px){ .header-nav{ .header-nav-content-box{ .header-first-box{ .header-nav-first{ width:@subject-maxwidth; } } .header-last-box{ .header-nav-content{ width:@subject-maxwidth; .header-content-center{ width: 70%; } } } } } }