:root{
  --nav-width:420px; /* 导航容器宽 */
  --close-button-width:50px; /* 关闭按钮宽 */
  --close-button-height:50px; /* 关闭按钮高 */
  --close-button-font-size:50px; /* 关闭按钮字体大小 */
  --close-button-right:30px; /* 关闭按钮距父元素右距离 */
  --close-button-top:30px; /* 关闭按钮距父元素上距离 */
  --nav-top:92px; /* 整个菜单距顶部距离 */
  --nav-margin-left:30px; /* 整个菜单左外边距 */
  --nav-margin-right:30px; /* 整个菜单右外边距*/
  --menu-item-font-size:32px; /* 菜单项字体大小 */
  --menu-item-margin-bottom:16px; /* 菜单项底部外边距 */
  --menu-item-height:64px; /* 菜单项高 */
  --arrow-font-size:28px; /* 箭头字体大小 */
  --arrow-right:41px; /* 箭头距父元素右距离 */
  --submenu-item-height:64px; /* 子菜单项高 */
  --submenu-item-font-size:32px; /* 子菜单项字体大小 */
  --submenu-item-text-indent:60px; /* 子菜单项文本缩进 */
  --submenu-item-padding-bottom:16px; /* 子菜单项底部外边距 */
}

@media screen  and (max-width: 992px){
  :root{
    --nav-width:280px;
    --close-button-width:30px; /* 关闭按钮宽 */
    --close-button-height:30px; /* 关闭按钮高 */
    --close-button-font-size:30px; /* 关闭按钮字体大小 */
    --close-button-right:30px; /* 关闭按钮距父元素右距离 */
    --close-button-top:30px; /* 关闭按钮距父元素上距离 */
    --nav-top:54px;
    --nav-margin-left:30px; /* 整个菜单左外边距 */
    --nav-margin-right:30px; /* 整个菜单右外边距*/
    --menu-item-font-size:18px;
    --menu-item-margin-bottom:10px; /* 菜单项底部外边距 */
    --menu-item-height:37px; /* 菜单项高 */
    --arrow-font-size:17px; /* 箭头字体大小 */
    --arrow-right:29px; 
    --submenu-item-height:36px; /* 子菜单项高 */
    --submenu-item-line-height:36px; /* 子菜单项高 */
    --submenu-item-font-size:18px; /* 子菜单项字体大小 */
    --submenu-item-text-indent:35px; /* 子菜单项文本缩进 */
    --submenu-item-padding-bottom:14px; /* 子菜单项底部外边距 */
  }
}




@media screen  and (max-width: 576px){
  :root{
    --nav-width:280px;
    --close-button-width:30px; /* 关闭按钮宽 */
    --close-button-height:30px; /* 关闭按钮高 */
    --close-button-font-size:30px; /* 关闭按钮字体大小 */
    --close-button-right:30px; /* 关闭按钮距父元素右距离 */
    --close-button-top:30px; /* 关闭按钮距父元素上距离 */
    --nav-top:54px;
    --nav-margin-left:30px; /* 整个菜单左外边距 */
    --nav-margin-right:30px; /* 整个菜单右外边距*/
    --menu-item-font-size:18px;
    --menu-item-margin-bottom:10px; /* 菜单项底部外边距 */
    --menu-item-height:37px; /* 菜单项高 */
    --arrow-font-size:17px; /* 箭头字体大小 */
    --arrow-right:29px; 
    --submenu-item-height:36px; /* 子菜单项高 */
    --submenu-item-line-height:36px; /* 子菜单项高 */
    --submenu-item-font-size:18px; /* 子菜单项字体大小 */
    --submenu-item-text-indent:35px; /* 子菜单项文本缩进 */
    --submenu-item-padding-bottom:14px; /* 子菜单项底部外边距 */
  }
}







/* 主题皮肤定制 */
/* 默认主题写在上面 */

/* 绿色主题 */
:root,html[data-theme="turquoise"] {
  /* 主色调 */
    --primary-color: #1ec28b; /* 主体色 */
    --light-gray-color:#F4F4F6; /* 浅灰色 */
    --white-color:#fff; /* 白色 */
    --black-color:#000;

        /* 字体色 */
    --font-black-color:#000; /* 黑色 */
    --font-dark-grey-color:#666; /* 深灰色 */
    --font-red-color:#ff0000; /* 红色 */
    --font-white-color:#fff; /* 白色 */

    /* 边框色 */
    --border-dark-grey-color:rgba(28,28,27,0.22); /* 深灰色边框 */
    --box-shadow-color:rgba(28, 28, 27, 0.22);   /* 阴影色 */
    /* 辅助色 */
    --sub-dark-red-color:#ff6347;  /* 深红色 */
    --sub-deep-orange-color:#ff8900;  /* 深橘红色 */
    --sub-dark-red-color1:#CC422A;

        /* 网站底部色 */
    --footer-bg-color1: #2e2e2e; /* 网站底部背景色 */
    --footer-bg-color2: #212121; /* 网站底部背景色 */
    --footer-border-color: #383838; /* 网站底部边框色 */
    --footer-font-color: #d6d6d6; /* 网站底部背景色 */

  }


/* 黄色主题 */
  html[data-theme="yellow"] {
    /* 主色调 */
      --primary-color: #ffd336; /* 主体色 */
      --light-gray-color:#F4F4F6; /* 浅灰色 */
      --white-color:#fff; /* 白色 */
      --black-color:#000;
  
          /* 字体色 */
      --font-black-color:#000; /* 黑色 */
      --font-dark-grey-color:#666; /* 深灰色 */
      --font-red-color:#ff0000; /* 红色 */
      --font-white-color:#fff; /* 白色 */
  
      /* 边框色 */
      --border-dark-grey-color:rgba(28,28,27,0.22); /* 深灰色边框 */
      --box-shadow-color:rgba(28, 28, 27, 0.22);   /* 阴影色 */
      /* 辅助色 */
      --sub-dark-red-color:#ff6347;  /* 深红色 */
      --sub-deep-orange-color:#ff8900;  /* 深橘红色 */
      --sub-dark-red-color1:#CC422A;
  
          /* 网站底部色 */
      --footer-bg-color1: #2e2e2e; /* 网站底部背景色 */
      --footer-bg-color2: #212121; /* 网站底部背景色 */
      --footer-border-color: #383838; /* 网站底部边框色 */
      --footer-font-color: #d6d6d6; /* 网站底部背景色 */
  
    }

    /* 深红色主题 */
    html[data-theme="red"] {
        /* 主色调 */
          --primary-color: #FF383F; /* 主体色 */
          --light-gray-color:#F4F4F6; /* 浅灰色 */
          --white-color:#fff; /* 白色 */
          --black-color:#000;
      
              /* 字体色 */
          --font-black-color:#000; /* 黑色 */
          --font-dark-grey-color:#666; /* 深灰色 */
          --font-red-color:#ff0000; /* 红色 */
          --font-white-color:#fff; /* 白色 */
      
          /* 边框色 */
          --border-dark-grey-color:rgba(28,28,27,0.22); /* 深灰色边框 */
          --box-shadow-color:rgba(28, 28, 27, 0.22);   /* 阴影色 */
          /* 辅助色 */
          --sub-dark-red-color:#ff6347;  /* 深红色 */
          --sub-deep-orange-color:#ff8900;  /* 深橘红色 */
          --sub-dark-red-color1:#CC422A;
      
              /* 网站底部色 */
          --footer-bg-color1: #2e2e2e; /* 网站底部背景色 */
          --footer-bg-color2: #212121; /* 网站底部背景色 */
          --footer-border-color: #383838; /* 网站底部边框色 */
          --footer-font-color: #d6d6d6; /* 网站底部背景色 */
      
        }