@media screen and (min-width:1200px) {
    header {position: fixed;top: 0;left: 0;width: 100%;height: 80px;border-bottom: 1px solid rgba(240, 240, 240, 0.4);transition: all .5s;z-index: 2;}
    .header-wrapper { padding: 0 60px; width: 100%; box-sizing: border-box; }
    header .logo { float: left; margin-top: 17px; height: 46px; }
    header .nav { float: right; height: 80px; line-height: 80px; font-size: 16px; }
    header .nav li { position: relative; margin: 0 10px; width: auto; height: 80px; float: left; }
    header .nav li a {width: auto;height: 80px;display: block;padding-left: 10px;padding-right: 10px;color: #fff;transition: 1s;}
    header .nav li span { display: block; position: absolute; bottom: -1px; left: 50%; background: #ff881a; margin: 0 auto; width: 0; height: 1px; transition: all .5s; transform-origin: 50% 50% }
    header .nav li.active a { font-weight: bold; color: #ff881a; }
    header .nav li:hover span { left: 0; width: 100%; }
    header .nav li.active span { left: 0; width: 100%; height: 2px; }
    .nav-btn { display: none; }
    .m-nav { display: none }
}
@media (max-width:1200px) and (min-width:769px) {
    .header { position: fixed; top: 0; left: 0; padding: 0.27rem 0; box-sizing: border-box; width: 100%; height: 1.2rem; color: #FFF; transition: all .5s; z-index: 9; }
    .header-wrapper { padding: 0 5%; width: 100%; box-sizing: border-box; }
    .header .logo { float: left; height: 0.66rem; }
    .header .logo img { display: block; height: 0.66rem; }
    .header .nav { float: right; height: 0.66rem; line-height: 0.66rem; font-size: 0.18rem; }
    .header .nav ul li { position: relative; margin: 0 0.15rem; width: auto; height: 0.66rem; float: left; }
    .header .nav ul li a { width: auto; height: 0.66rem; display: block; padding-left: 0.1rem; padding-right: 0.1rem; color: #333; }
    .header .nav li span { display: block; position: absolute; bottom: -1px; left: 50%; background: #ff881a; margin: 0 auto; width: 0; height: 1px; transition: all .5s; transform-origin: 50% 50% }
    .header .nav li.active a { color: #ff881a; }
    .header .nav li.active span { left: 0; width: 100%; height: 1px; }
    .nav-btn { display: none; }
    .m-nav { display: none }
}
@media screen and (max-width:768px) {
    .header { position: fixed; top: 0; left: 0; padding: 0.27rem 0; width: 100%; height: 1.2rem; box-sizing: border-box; transition: all .5s; z-index: 9; }
    .header-wrapper { padding: 0 5%; width: 100%; box-sizing: border-box; }
    .header .logo { float: left; height: 0.66rem; }
    .header .logo img { display: block; height: 0.66rem; }
    .header .nav { display: none; }
    .nav-btn { float: right; width: 0.44rem; height: 0.66rem; background: url(../images/menu-icon.png) center no-repeat; background-size: 100%; }
    .m-nav { position: fixed; top: 0; right: 0; width: 100%; height: 100%; box-sizing: border-box; transform: translate(100%, 0); transition: all .5s; background-color: rgb(255, 255, 255); z-index: 99; }
    .m-nav .close { float: right; margin-top: 0.4rem; margin-right: 0.4rem; width: 0.44rem; height: 0.44rem; background: url(../images/close.png) center no-repeat; }
    .m-nav .close::after { content: ""; clear: both; }
    .m-nav .logo { margin: 1.2rem auto 0.4rem; width: 2.46rem; height: 0.96rem; }
    .m-nav .logo img { width: 100%; }
    .m-nav .nav ul li { margin: 0.2rem 0; padding: 0.3rem 0.4rem; width: 100%; font-size: 0.36rem;        /* line-height: 0.72rem; */ box-sizing: border-box; border-bottom: 1px solid #dcdcdc; }
    .m-nav .nav ul li a { display: block; color: #715c45; font-weight: 700; text-decoration: none; }
}