@charset "utf-8"; @media screen and (max-width:1470px){ header{ height:auto; } header h1{ margin-left: 20px; } header h1 a{ height: auto; } header .h-right > ul{ margin-right: 45px; } header .h-right div{ margin-right: 80px; } } @media screen and (max-width: 914px){ header .h-right > ul { margin-right: 10px; } header .h-right div { margin-right: 40px; } header .h-right > ul > li > a { padding: 24px 5px 20px; } } @media screen and (max-width:768px){ header .h-right > ul{ float: none; position: fixed; top: 0; right: -200px; height: 100%; width: 200px; margin-right: 0; background-color: rgba(255,255,255,.8); z-index: 2; transition: .3s; } header .h-right > ul > li:nth-child(1){ margin-top: 50px; } header .h-right > ul > li{ float: none; width: 70%; height: 45px; text-align: center; line-height: 45px; white-space: nowrap; } header .h-right > ul > li > a{ color: #449c4a; font-size: 14px; } header .h-right > ul > li .mnav{ } header .h-right > ul > li:hover > a { color: #449c4a; background-color: transparent; } header .h-right > ul > li > a.on{ background-color: transparent; color: #449c4a; } header .h-right > ul > li > a{ display: inline-block; vertical-align: middle; } header .h-right > ul > li i{ display: inline-block; width: 16px; height: 16px; margin-left: 10px; background: url("../img/xiala.png") no-repeat center/100%; vertical-align: middle; } header .h-right > ul > li .mnav{ margin-left: 60px; line-height: 25px; } header .h-right > ul > li .mnav li a{ color: #449c4a; font-size: 12px; } header .phonebtn{ display: block; top:50%; right: 0; width:42px; height:34px; margin: -17px 20px 0 0; background: url("../img/dao.png") no-repeat center/100%; z-index: 9; } header .h-right div i{ display: none; } header .h-right div { right: 0px; top: 10px; margin-right: 80px; position: absolute; z-index: 3; color: #449c4a; } } @media screen and (max-width:700px){ header h1{ padding: 18px 0; } header h1 a{ width: 130px; } header .h-right ul { } } @media screen and (max-width: 414px){ header .h-right div{ top: -8px; } }