/* header */ .header { z-index: 100; position: fixed; top: 0; height: 50px; width: 100%; background: rgba(255, 255, 255, 1) !important; color: #292929; } .head-container { width: 1300px; margin: 0 auto; height: 100%; } .header .logo { width: 132px; height: 50px; display: inline-block; float: left; margin: 4px 0 0 100px; } .header .logo img { width: 100%; } .header-lf { display: inline-block; float: left; margin-left: 40px; } .navbar { float: left; margin-left: 100px; } .navbar * { -webkit-box-sizing: border-box; box-sizing: border-box; } .category-item { float: left; /*position: relative;*/ } .category-a { display: block; font-size: 14px; line-height: 50px; color: #292929; padding: 0 10px; -webkit-transition: all .8s; -o-transition: all .8s; transition: all .8s; position: relative; margin: 0 14px; } .category-a::after { content: ''; width: 0; height: 2px; background: #fff; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all .8s; -o-transition: all .8s; transition: all .8s; } .category-a-active { color: #3287FE; } .category-item.active .category-a::after, .category-item:hover .category-a::after, .category-item.on .category-a::after { width: 100%; } .category-item.active .category-a, .category-item:hover .category-a, .category-item.on .category-a { color: #3287FE; } .header-right { float: right; } .head-tel { margin-top: 15px; float: left; border-left: 1px solid rgba(255, 255, 255, 0.25); padding-left: 15px; margin-left: 7px; } .head-tel span { display: block; float: left; font-size: 18px; text-align: center; color: #b1bae3; line-height: 30px; font-family: 'Hel'; padding-left: 35px; background: url(../images/tel.png) no-repeat left center; } .header .butt-search { border: none; background: none; float: left; width: 30px; line-height: 30px; margin-top: 30px; cursor: pointer; overflow: hidden; position: relative; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s; z-index: 10; } .header .sub-bot { display: block; width: 30px; height: 30px; line-height: 30px; background: transparent; border: none; position: absolute; right: 0; top: 0; z-index: 3; cursor: pointer; background: url(../images/icon-search.png) no-repeat center transparent; } .header .sub-txt { display: block; margin-left: 26px; line-height: 30px; color: #909090; font-weight: lighter; background: transparent; border: none; padding: 0 30px 0 0px; box-sizing: border-box; width: 130px; font-size: 0; } .header .butt-search:hover { background: #e2e2e2; border-radius: 20px; width: 180px; } .header .butt-search:hover .sub-txt { font-size: 14px; }