/*头部左侧样式*/
#mob-jnb-header {width: 100vw; height: 3.125rem; max-height: 100vh; display: block; top: 0; left: 0; position: fixed; overflow: hidden; 
    transition: all 500ms ease; z-index: 9999; }
/*头部变幻*/
#mob-jnb-header.active { height: 100vh; background: #fff; z-index: 10003;}
.mob-fixed-panel { height: 3.125rem; display: flex; justify-content: space-between; align-items: center; background-color: transparent; }
/*左侧按钮*/
.mob-left-btn { position: relative; width: 3.125rem; height: 3.125rem; padding-top: 12px; padding-left: 12px; z-index: 9999; }
.mob-left-btn .mob-icon{ display: block; padding-top: 3px; padding-bottom: 3px; transition: all .4s ease; }
.mob-left-btn .mob-icon::before{ content: ''; display: block; height: 2px; width: 22px; background-color: #fff;
    border-top-right-radius: 2px; border-bottom-left-radius: 2px;transition: transform .4s ease .2s,background-color .5s ease 0s;}
/*左侧变幻*/
.mob-left-btn .mob-icon.active::before{ background-color: #1E1E1E;}
.mob-left-btn .mob-icon.active:nth-child(2){ opacity: 0 }
.mob-left-btn .mob-icon.active:nth-child(1){ transform: translateY(8px);}
.mob-left-btn .mob-icon.active:nth-child(1)::before{ transform: rotate(45deg);}
.mob-left-btn .mob-icon.active:nth-child(3){ transform: translateY(-8px); }
.mob-left-btn .mob-icon.active:nth-child(3)::before{ transform: rotate(-45deg); }

/*中间logo*/
.mob-hd-logo .mob-nav-logo{ display: block; width: 77px; height: 26px; background-size: 77px 26px; background-position: center center;
    background-image: url(../mimages/logoa.webp); }
/*logo变幻*/
.mob-hd-logo .mob-nav-logo.active{ background-image: url(../mimages/logob.webp); }

/*右侧按钮*/
.mob-right-btn { position: relative; width: 3.125rem; height: 3.125rem; padding-top: 10px; padding-left: 10px;}
.mob-right-btn .mob-nav-shop { display: block; width: 30px; height: 30px; background-size: 30px 30px; background-position: center center;
    background-image: url(../mimages/shopa.png); }
.mob-right-btn .mob-nav-shop.active{ background-image: url(../mimages/shopb.png); }

/*中间内容-------------------------------------------------------------------------*/
#mob-header-cont {padding-top: 16px;}
.mob-verticalMenu > div { width: 100%; float: left; }
.mob-verticalMenu > div > div:first-child { text-align: left; height: 54px;  line-height: 54px; padding-right: 16px; transition: background-color 0.4s linear; 
    padding-left: 16px; color: #1E1E1E; font-size: 18px; }
.mob-verticalMenu > div > div:first-child > i:last-child { line-height: 54px; float: right; transform: rotate(0deg);
    transition: transform 0.4s linear; color: #ffffff; background: url(../mimages/navjian.png); width: 20px; height: 20px;
    background-size: 20px 20px; margin-top: 17px; }
.mob-verticalMenu > div > div:last-child { width: 100%; display: none; }
.mob-verticalMenu > div > div:last-child > div { color: #404040;  transition: background-color 0.1s linear; text-align: left; line-height: 54px; padding-left: 34px;
    font-size: 16px; }
.mob-verticalMenu > div > div:last-child > div:hover { background-color: #efefef!important;}
.mob-verticalMenu > div:last-child::after { display: block; clear: both; color: #404040;}


.mob-encn { clear: both; height: 54px; margin-left: 16px; margin-right: 16px; display: flex; justify-content: space-evenly; align-items: center; }
.mob-encn a{ color: #1E1E1E; font-size: 18px; font-weight: 500; }


/*--黑色-------------------------------------------------------------------------*/
/*头部左侧样式*/
#bmob-jnb-header {width: 100vw; height: 3.125rem; max-height: 100vh; display: block; top: 0; left: 0; position: fixed; overflow: hidden; 
    transition: all 500ms ease; z-index: 9999; background: #fff;}
/*头部变幻*/
#bmob-jnb-header.active { height: 100vh; background: #fff; z-index: 9999;}
.bmob-fixed-panel { height: 3.125rem; display: flex; justify-content: space-between; align-items: center; background-color: #fff; }
/*左侧按钮*/
.bmob-left-btn { position: relative; width: 3.125rem; height: 3.125rem; padding-top: 12px; padding-left: 12px; z-index: 9999; }
.bmob-left-btn .mob-icon{ display: block; padding-top: 3px; padding-bottom: 3px; transition: all .4s ease; }
.bmob-left-btn .mob-icon::before{ content: ''; display: block; height: 2px; width: 22px; background-color: #1E1E1E;
    border-top-right-radius: 2px; border-bottom-left-radius: 2px;transition: transform .4s ease .2s,background-color .5s ease 0s;}
/*左侧变幻*/
.bmob-left-btn .mob-icon.active::before{ background-color: #1E1E1E;}
.bmob-left-btn .mob-icon.active:nth-child(2){ opacity: 0 }
.bmob-left-btn .mob-icon.active:nth-child(1){ transform: translateY(8px);}
.bmob-left-btn .mob-icon.active:nth-child(1)::before{ transform: rotate(45deg);}
.bmob-left-btn .mob-icon.active:nth-child(3){ transform: translateY(-8px); }
.bmob-left-btn .mob-icon.active:nth-child(3)::before{ transform: rotate(-45deg); }

/*中间logo*/
.bmob-hd-logo .bmob-nav-logo{ display: block; width: 77px; height: 26px; background-size: 77px 26px; background-position: center center;
    background-image: url(../mimages/logob.webp); }
/*logo变幻*/
.bmob-hd-logo .bmob-nav-logo.active{ background-image: url(../mimages/logob.webp); }

/*右侧按钮*/
.bmob-right-btn { position: relative; width: 3.125rem; height: 3.125rem; padding-top: 10px; padding-left: 10px;}
.bmob-right-btn .bmob-nav-shop { display: block; width: 30px; height: 30px; background-size: 30px 30px; background-position: center center;
    background-image: url(../mimages/shopb.png); }
.bmob-right-btn .bmob-nav-shop.active{ background-image: url(../mimages/shopb.png); }