.m-header {
           width: 100%;
           height: 1.2rem;
           position: fixed;
           top: 0;
           left: 0;
           z-index: 9999
       }
       
       .m-header.no-bg .m-header__navbar-btn-wrap::before,
       .m-header.no-bg .m-header__navbar-btn-wrap b,
       .m-header.no-bg .m-header__navbar-btn-wrap::after {
           background: #fff
       }
       
       .m-header__navwrap {
           width: 100%;
           height: 100%
       }
       
       .m-header__navbar {
           display: -webkit-box;
           display: -ms-flexbox;
           display: flex;
           -webkit-box-pack: center;
           -ms-flex-pack: center;
           justify-content: center;
           -webkit-box-align: center;
           -ms-flex-align: center;
           align-items: center;
           width: 100%;
           height: 100%;
           position: absolute;
           z-index: 9;
           left: 0;
           top: 0;
           -webkit-transition: all 500ms;
           -o-transition: all 500ms;
           transition: all 500ms
       }
       
       .m-header__navbar-logo {
           position: absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           display: -webkit-box;
           display: -ms-flexbox;
           display: flex;
           -webkit-box-pack: center;
           -ms-flex-pack: center;
           justify-content: center;
           -webkit-box-align: center;
           -ms-flex-align: center;
           align-items: center;
           background: #fff
       }
       
       .m-header__navbar-logo img {
           width: 1.88rem
       }
       
       .m-header__navbar-logo.no-bg {
           background: transparent
       }
       
       .m-header__navbar-back {
           font-size: .32rem;
           color: #3778e5;
           font-weight: bold;
           display: -webkit-box;
           display: -ms-flexbox;
           display: flex;
           -webkit-box-align: center;
           -ms-flex-align: center;
           align-items: center;
           position: absolute;
           left: .4rem
       }
       
       .m-header__navbar-back span {
           width: .4rem;
           height: .4rem;
           margin-right: .1rem;
           background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAApCAYAAABHomvIAAAAAXNSR0IArs4c6QAAAWhJREFUWEfN179OwzAQBvA71BE2UCXeiz/iAczQkU4IISqEWEKnFJy8AYSFV2JkyAOAkFEQidrixI7P8l3m+MsvN1jfIUR81OxC7SAe6jy7iRWLsYIaHAJoAEBEvNV5dh0jOwpwHdeiYiHJQBuumxya0yJfPlMmSQIO4gBe6o/3s6qqvlmAKXDNjwVNMBUuCJgSNxqYGjcKyIHzBnLhvICcOCeQGzcIlIDrBUrBWYGScP+A0nAbQIm4DigV9wuUjPsDzjWCObd1NkRzpfPlHaXPUc82dQvVbP7UhwTAy2KV3VM/FHq+7YNikeuFVSRyu1GLQ9oqvyhk304iBjm0NIlAurY6dqQL2F7mbPekD5AV6QtkQ44BsiDHApMjQ4BJkaHAZEgK0I00cFQ8PryGVi3n4u4Z3HOZm7d6f++4Wiw+PXOsr1En2IZuIePgYk1wE2nMtD7YPaFOrguljN9yFpVSk7Isv2Ll/gB89Co5zhdxowAAAABJRU5ErkJggg==) center/cover no-repeat
       }
       
       .m-header__navbar-btn {
           width: .6rem;
           height: .6rem;
           z-index: 99999;
           position: absolute;
           top: 50%;
           right: .4rem;
           display: -webkit-box;
           display: -ms-flexbox;
           display: flex;
           -webkit-box-align: center;
           -ms-flex-align: center;
           align-items: center;
           -webkit-box-pack: center;
           -ms-flex-pack: center;
           justify-content: center;
           -webkit-transform: translateY(-50%);
           -ms-transform: translateY(-50%);
           transform: translateY(-50%)
       }
       
       .m-header__navbar-btn-wrap {
           width: 23px;
           height: 23px;
           position: relative
       }
       
       .m-header__navbar-btn-wrap::before,
       .m-header__navbar-btn-wrap b,
       .m-header__navbar-btn-wrap::after {
           content: "";
           position: absolute;
           width: 23px;
           height: 3px;
           -webkit-transition: all 500ms;
           -o-transition: all 500ms;
           transition: all 500ms;
           background: #676b73;
           right: 3px
       }
       
       .m-header__navbar-btn-wrap::before {
           top: 2px;
           -webkit-transform: rotate(0);
           -ms-transform: rotate(0);
           transform: rotate(0);
           -webkit-transform-origin: right;
           -ms-transform-origin: right;
           transform-origin: right
       }
       
       .m-header__navbar-btn-wrap b {
           top: 10px;
           opacity: 1;
           -webkit-transition-duration: 700ms;
           -o-transition-duration: 700ms;
           transition-duration: 700ms
       }
       
       .m-header__navbar-btn-wrap::after {
           top: 18px;
           margin-bottom: 0;
           -webkit-transform: rotate(0);
           -ms-transform: rotate(0);
           transform: rotate(0);
           -webkit-transform-origin: right;
           -ms-transform-origin: right;
           transform-origin: right
       }
       
       .m-header__navbar-btn-wrap--active::before {
           -webkit-transform: rotate(-45deg);
           -ms-transform: rotate(-45deg);
           transform: rotate(-45deg);
           -webkit-transform-origin: right;
           -ms-transform-origin: right;
           transform-origin: right
       }
       
       .m-header__navbar-btn-wrap--active b {
           opacity: 0;
           -webkit-transition-duration: 0ms;
           -o-transition-duration: 0ms;
           transition-duration: 0ms
       }
       
       .m-header__navbar-btn-wrap--active::after {
           -webkit-transform: rotate(45deg);
           -ms-transform: rotate(45deg);
           transform: rotate(45deg);
           -webkit-transform-origin: right;
           -ms-transform-origin: right;
           transform-origin: right
       }
       
       .m-header__panel {
           width: 4.83rem;
           height: 100%;
           position: fixed;
           right: 0;
           top: 0;
           background: #fff;
           display: -webkit-box;
           display: -ms-flexbox;
           display: flex;
           -webkit-box-pack: center;
           -ms-flex-pack: center;
           justify-content: center;
           z-index: 2;
           padding-top: 1.2rem
       }
       
       .m-header__panel a {
           color: #3d424d
       }
       
       .m-header__panel-bg {
           width: 100%;
           height: 100%;
           position: fixed;
           top: 0;
           left: 0;
           background: #000;
           opacity: .8;
           z-index: 1
       }
       
       .m-header__panel-links {
           width: 100%;
           font-size: .32rem;
           color: #3d424d;
           font-weight: bold;
           text-align: center
       }
       
       .m-header__panel-links__item {
           display: -webkit-box;
           display: -ms-flexbox;
           display: flex;
           -webkit-box-pack: center;
           -ms-flex-pack: center;
           justify-content: center;
           -webkit-box-align: center;
           -ms-flex-align: center;
           align-items: center;
           height: 1.2rem;
           border-bottom: 1px solid #e6e7eb;
           position: relative
       }
       
       .m-header__panel-links__item:first-child {
           border-top: 1px solid #e6e7eb
       }
       
       .m-header__panel-links__item--active {
           opacity: 1;
           color: #3778e5
       }
       
       .m-header__panel-links__item--active::before {
           content: "";
           position: absolute;
           left: 0;
           top: 0;
           width: .06rem;
           height: 100%;
           background: #3778e5
       }
       
       .m-header__panel-links__item--active span {
           position: relative
       }
       
       .m-header__panel-links__item--active span::after,
       .m-header__panel-links__item--active span::before {
           position: absolute;
           content: "";
           width: .14rem;
           height: .16rem;
           top: 50%;
           margin-top: -0.08rem
       }
       
       .m-header__panel-links__item--active span::after {
           right: -0.4rem;
           background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAQCAYAAAAmlE46AAAAzklEQVQ4T53SsUpDURCE4e+ChSJC0Eos0liJTRARLKx8ABuRdFaClU3AwkYQGy30ZXyDFL7VyMUb0ZvEc/S0Z/6d3dlt/OMlGTR/4ZJs4A4HVWCSVneJR2xjWgSTHOMVh9+6Ww4m2cETxugbzINJ1jDBLdaXZPATTHKOZwwLoX2CSUbdHCeVKU+bJFt4w1El1Mq+HPtxl2rMzThb8A1Wf6EXryPJbhfSWVWqfVGSU7xgv/dXdTkruMIDNrsCZXDmlKSF7nGN9+KtLmh/DxcfNN1IFLmI57EAAAAASUVORK5CYII=) center/cover no-repeat
       }
       
       .m-header__panel-links__item--active span::before {
           left: -0.4rem;
           background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAQCAYAAADJViUEAAAA0klEQVQ4T5XSsUuCQRjH8e/XQZf+UqccsqGoqUUJXN9F2oKm/oAmh5YGl8YggkBwcDAkBePiwIOSV9+7G++ez++B5x5DCC3gRF1SeAwhdIB34AK4U0NuRsLrHXgBTtXnnIB9HE3sfA+cq5/HQupwql8BA2CofteFHMOp/gPoqw/7ATk4mcluHtN0UYKj+QHGwKU6L8VpoBXQLcX/vjIXz+qWqAlvgBFwo36VTPsROFPfDi1KXedXoKc+Na3oX7wAroBK3TbB+B5xG7gFrtUYkH1+AS8+Yw9kD52eAAAAAElFTkSuQmCC) center/cover no-repeat
       }
       
       .m-header__panel-links__item:last-child {
           margin-bottom: 0
       }
       
       .m-header__panel-langs {
           display: -webkit-box;
           display: -ms-flexbox;
           display: flex;
           -webkit-box-align: center;
           -ms-flex-align: center;
           align-items: center;
           position: absolute;
           right: .5rem;
           bottom: 1.1rem
       }
       
       .m-header__panel-lang {
           margin: 0 .3rem;
           color: #d2d2d2;
           position: relative;
           font-size: .32rem;
           line-height: .4rem;
           height: .4rem
       }
       
       .m-header__panel-lang::after {
           content: "";
           position: absolute;
           width: .02rem;
           height: .24rem;
           background: #d2d2d2;
           right: -0.3rem;
           top: 50%;
           margin-top: -0.12rem
       }
       
       .m-header__panel-lang:last-child::after {
           display: none
       }
       
       .m-header__panel-lang--active {
           color: #3d424d
       }
       
       .m-header__panel-lang--active::before {
           position: absolute;
           content: "";
           width: .14rem;
           height: .16rem;
           top: 50%;
           margin-top: -0.08rem;
           left: -0.25rem;
           background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAQCAYAAADJViUEAAAA0klEQVQ4T5XSsUuCQRjH8e/XQZf+UqccsqGoqUUJXN9F2oKm/oAmh5YGl8YggkBwcDAkBePiwIOSV9+7G++ez++B5x5DCC3gRF1SeAwhdIB34AK4U0NuRsLrHXgBTtXnnIB9HE3sfA+cq5/HQupwql8BA2CofteFHMOp/gPoqw/7ATk4mcluHtN0UYKj+QHGwKU6L8VpoBXQLcX/vjIXz+qWqAlvgBFwo36VTPsROFPfDi1KXedXoKc+Na3oX7wAroBK3TbB+B5xG7gFrtUYkH1+AS8+Yw9kD52eAAAAAElFTkSuQmCC) center/cover no-repeat
       }
       
       .m-header .lf-in-enter-active,
       .m-header .lf-in-leave-active {
           -webkit-transition: -webkit-transform .5s;
           transition: -webkit-transform .5s;
           -o-transition: transform .5s;
           transition: transform .5s;
           transition: transform .5s, -webkit-transform .5s
       }
       
       .m-header .lf-in-enter,
       .m-header .lf-in-leave-to {
           -webkit-transform: translate3d(100%, 0, 0);
           transform: translate3d(100%, 0, 0)
       }
       
       .m-header .bgfade-enter-active,
       .m-header .bgfade-leave-active {
           -webkit-transition: opacity .5s;
           -o-transition: opacity .5s;
           transition: opacity .5s;
           opacity: .8
       }
       
       .m-header .bgfade-enter,
       .m-header .bgfade-leave-to {
           opacity: 0
       }