html {
    overflow-x: hidden;
    touch-action: pan-y; 
  }
  .mdiv{
      display: flex;
  }
  .mlr{
      width:13rem;
      padding-left: 0.75rem;
  }
  .mlr>div{
      padding: 0.25rem;
      border: 1px solid #e8e8fd;
      margin-bottom: 0.75rem;
      border-radius: 4px;
  }
  .night .mlr>div{
      border:1px solid #444;
  }
  
  .mlf{
      width:calc(100% - 13rem);
      border:1px solid #e8e8fd;
  }
  
  .night .mlf{
      border:1px solid #444;
  }
  
  .mlf_div{
      width: 100%;
      height: calc(100% - 1.8rem);
  }
  
  .jbtype{
  
  }
  
  .jbtype .aa{
      margin-bottom: 0.25rem;
  }
  
  .jbtype .aa span{
      width: calc(50% - 0.125rem);
      height: 1.5rem;
      line-height: 1.5rem;
      display: inline-block;
      text-align: center;
      border: 1px solid #e8e8fd;
      background-color: #e8e8fd;
      border-radius: 3px;
      cursor: pointer;
  }
  
  .night .jbtype .aa span{
      border: 1px solid #444;
      background-color: #444;
  }
  
  .jbtype .aa span.t{
      float: right;
  }
  
  .jbtype .bb{
  
  }
  
  .jbtype .bb span{
      width: 100%;
      height: 1.5rem;
      line-height: 1.5rem;
      display: inline-block;
      text-align: center;
      border: 1px solid #e8e8fd;
      background-color: #e8e8fd;
      border-radius: 3px;
      cursor: pointer;
  }
  
  .night .jbtype .bb span{
      border: 1px solid #444;
      background-color: #444;
  }
  
  .jbtype span.act{
      border: 1px solid #FF9800;
      background-color: #FF9800;
      color: #fff;
  }
  
  .night .jbtype span.act{
      border: 1px solid #FF9800;
      background-color: #FF9800;
      color: #fff;
  }
  
  .xianxing .jd{
      height: 2rem;
      line-height: 2rem;
      width: 2rem;
      text-align: center;
      border: 1px solid #ddd;
      border-radius: 100%;
      margin: auto;
      margin-top: 1rem;
  }
  
  .night .xianxing .jd{
      border: 1px solid #444;
      color: #aaa;
  }
  
  .xianxing input[type="range"]{
      width: 100%;
      margin: 1rem 0;
  }
  
  .xianxing .but{
  
  }
  
  .xianxing .but div{
      display: inline-block;
      width: calc(100% / 4);
      text-align: center;
      float: left;
      padding: 0.125rem;
      
  }
  
  .xianxing .but div span{
      height: 1.5rem;
      line-height: 1.5rem;
      border: 1px solid #e8e8fd;
      display: block;
      border-radius: 3px;
      cursor: pointer;
  }
  
  .night .xianxing .but div span{
      border: 1px solid #444;
      background-color: #444;
      color: #aaa;
  }
  
  .xianxing .but div span.act{
      background-color: #e8e8fd;
  }
  
  .night .xianxing .but div span.act{
      background-color: #222;
      border: 1px solid #222;
  }
  
  .colorlist{
  
  }
  
  .colorlist>div{
      position: relative;
      border: 1px solid #e8e8fd;
      margin-bottom: 0.25rem;
      border-radius: 3px;
  }
  
  .night .colorlist>div{
      border: 1px solid #444;
  }
  
  .colorlist>div:last-child{
      margin-bottom: 0;
  }
  
  
  .colorlist>div .num{
      height: 1.5rem;
      line-height: 1.5rem;
      width: calc(100% - 2.5rem);
      float: left;
  }
  
  .colorlist>div .num .na{
      display: inline-block;
      width: calc(100% - 2rem);
      float: left;
      padding: 0 0.5rem;
      padding-top: 0.25rem;
  }
  
  .colorlist>div .num .na input{
      width: 100%;
  }
  
  .colorlist>div .num .nb{
      height: 1.5rem;
      line-height: 1.5rem;
      width: 2rem;
      float: right;
      position: relative;
      border-left: 1px solid #e8e8fd;
      text-align: center;
  }
  
  .night .colorlist>div .num .nb{
      border-left: 1px solid #444;
  }
  
  .colorlist>div .cor{
      height: 1.5rem;
      line-height: 1.5rem;
      width: 1rem;
      float: left;
      position: relative;
      border-left: 1px solid #e8e8fd;
  }
  
  .night .colorlist>div .cor{
      border-left: 1px solid #444;
  }
  
  .colorlist>div .cor input{
      height: 1.5rem;
      line-height: 1.5rem;
      width: 1rem;
      position: absolute;
      opacity: 0;
  }
  
  .colorlist>div .icons{
      height: 1.5rem;
      line-height: 1.5rem;
      width: 1.5rem;
      float: left;
      border-left: 1px solid #e8e8fd;
      text-align: center;
      font-size: 0.5rem;
      font-weight: bold;
      color: #aaa;
      cursor: pointer;
  }
  
  .night .colorlist>div .icons{
      border-left: 1px solid #444;
  }
  
  .jingxiang{
      display: none;
  }
  
  .jingxiang>span{
      height: 1.5rem;
      line-height: 1.5rem;
      display: inline-block;
      padding-left: 0.3rem;
  }
  
  .night .jingxiang>span{
      color:#aaa;
  }
  
  .jingxiang .but div{
      display: inline-block;
      width: calc(100% / 4);
      text-align: center;
      float: left;
      padding: 0.125rem;
      
  }
  
  .jingxiang .but div span{
      height: 1.5rem;
      line-height: 1.5rem;
      border: 1px solid #e8e8fd;
      display: block;
      border-radius: 3px;
      cursor: pointer;
  }
  
  .night .jingxiang .but div span{
      border: 1px solid #444;
      background-color: #444;
      color: #aaa;
  }
  
  .jingxiang .but div span.act{
      background-color: #e8e8fd;
  }
  
  .night .jingxiang .but div span.act{
      background-color: #222;
      border: 1px solid #222;
  }
  
  .zhuixing{
      display: none;
  }
  
  .zhuixing .jd{
      height: 2rem;
      line-height: 2rem;
      width: 2rem;
      text-align: center;
      border: 1px solid #ddd;
      border-radius: 100%;
      margin: auto;
      margin-top: 1rem;
  }
  
  .night .zhuixing .jd {
      border: 1px solid #444;
      color: #aaa;
  }
  
  .zhuixing input[type="range"]{
      width: 100%;
      margin: 1rem 0;
  }
  
  .zhuixing>span{
      height: 1.8rem;
      line-height: 1.8rem;
      display: inline-block;
      padding-left: 0.3rem;
  }
  
  .night .zhuixing>span{
      color:#aaa;
  }
  
  .zhuixing .but div{
      display: inline-block;
      width: calc(100% / 4);
      text-align: center;
      float: left;
      padding: 0.125rem;
      
  }
  
  .zhuixing .but div span{
      height: 1.5rem;
      line-height: 1.5rem;
      border: 1px solid #e8e8fd;
      display: block;
      border-radius: 3px;
      cursor: pointer;
  }
  
  .night .zhuixing .but div span{
      border: 1px solid #444;
      background-color: #444;
      color: #aaa;
  }
  
  .zhuixing .but div span.act{
      background-color: #e8e8fd;
  }
  
  .night .but div span.act{
      background-color: #222;
      border: 1px solid #222;
  }
  
  .butdivbut{
      height: 1.8rem;
      line-height: 1.8rem;
      display: block;
      background-color: #06b672;
      text-align: center;
      color: #fff;
      cursor: pointer;
  }
  .addjbcolorbut{
      height: 1.5rem;
      line-height: 1.5rem;
      text-align: center;
      border: 1px solid #e8e8fd;
      margin-top: 0.25rem;
      cursor: pointer;
  }
  .night .addjbcolorbut{
      border: 1px solid #444;
      color: #aaa;
      border-radius: 3px;
  }
  @media screen and (max-width: 540px){
      .mdiv{
          display: block;
      }
      .mlr{
          width: 100%;
          padding-left: 0;
      }
      .mlf {
          height: 15rem;
          width: 100%;
          margin-bottom: 0.75rem;
      }
  }