body {margin:0;padding:0;width:100%;height:100%;font-family:Titillium Web,Microsoft JhengHei,Verdana, Arial, Clean, Helvetica, sans-serif, Monotype Corsiva;color:#fff;background:#333;font-size:18px;-webkit-user-select:none;user-select:none;}

body::-webkit-scrollbar { width:5px;background:#424242;border-radius:0px;}
body::-webkit-scrollbar-track { width:5px;background: #4d4d4d;border-radius:10px; }
body::-webkit-scrollbar-thumb { width:5px;background: #888;border-radius:10px; }

div::-webkit-scrollbar { width:5px;background:#424242;border-radius:0px;}
div::-webkit-scrollbar-track { width:5px;background: #4d4d4d;border-radius:10px; }
div::-webkit-scrollbar-thumb { width:5px;background: #888;border-radius:10px; }

.fullheadcls::-webkit-scrollbar { height:1px;background:#424242;border-radius:0px;}
.fullheadcls::-webkit-scrollbar-track { height:1px;background: #4d4d4d;border-radius:10px; }
.fullheadcls::-webkit-scrollbar-thumb { height:1px;background: #666;border-radius:10px; }



.titleline{float:left;width:200px;line-height:22px;}
.qdtitle {float:top;padding-top:8px;height:22px;}
.storetitle {float:top;font-size:16px;color:#fff;}


.bannerblock{position:fixed;z-index:10000;top:0;left:0;width:100%;min-width:280px;height:60px;line-height:60px;font-size:22px;color:#deb842;background:#333333;border-bottom:1px #555555 solid;}
.itemsblock{position:fixed;z-index:10000;bottom:0;left:0;width:100%;min-width:320px;height:60px;line-height:60px;font-size:22px;color:#deb842;text-align:center;background:#333333;border-top:1px #555555 solid;display:block;}

.setup_cls{float:right;margin:9px;margin-right:20px;margin-left:0px;height:calc(100% - 20px);width:40px;border:2px #fff solid;border-radius:30px;overflow:visible;cursor:pointer;display:none;}
.itemstop_cls{float:left;width:calc(100% - 500px);height:100%;text-align:center;display:none;}
.itemstop_setup_cls{margin:0 auto;width:calc(100% - 20px);height:100%;display:none;}
.itemcircle_cls{margin:0 auto;margin-top:9px;height:calc(100% - 20px);width:40px;border:2px #fff solid;border-radius:30px;overflow:visible;cursor:pointer;}
.itemsnote_cls{position:relative;float:right;top:calc(-100% - 23px);right:-3px;width:18px;height:18px;line-height:18px;font-size:13px;text-align:center;font-weight:bold;color:#fff;border-radius:10px;background:#ee5555;display:none;}

.itemsbot_cls{margin:0 auto;width:100%;height:100%;text-align:center;display:inline-block;}
.itemsbot_aline{margin:0 auto;width:calc(100% - 20px);height:100%;text-align:center;display:none;}
.items_setup_aitem{float:left;width:20%;height:100%;text-align:center;}
.itemsbot_bline{margin:0 auto;width:calc(100% - 20px);max-width:480px;height:100%;text-align:center;display:none;}
.items_store_bitem{float:left;width:20%;height:100%;text-align:center;}

.itemicon{height:100%;pointer-evnets:none;}

.mainclass  {float:top;margin-top:60px;padding-bottom:60px;width:100%;min-width:320px;height:calc(100vh - 122px);background:#3a3a3a;font-size:18px;text-align:center;overflow:hidden;overflow-y:auto;display:none;}

.fullheadcls {float:top;margin-top:2px;width:100%;height:45px;max-height:45px;line-height:35px;border-bottom:0px #888 solid;background:#3a3a3a;text-align:center;overflow:hidden;overflow-x:auto;display:block;}
.fulldivcls {float:top;margin:0 auto;width:100%;min-width:280px;height:calc(100vh - 122px - 45px);text-align:center;overflow:hidden;overflow-y:auto;display:inline-block;}
.fullpagecls {float:top;margin:0 auto;padding-left:20px;padding-right:20px;width:calc(100% - 40px);min-height:calc(100vh - 162px);height:100$;background:#404040;text-align:center;display:inline-block;}
.fullpagebdy {float:top;margin:0 auto;width:100%;max-width:900px;min-height:calc(100vh - 162px);text-align:center;display:inline-block;}

.inputnewdiv {float:top;margin:0 auto;width:280px;min-height:30px;text-align:center;display:inline-block;}
.inputtitle {float:top;margin:0 auto;margin-top:20px;width:100%;height:20px;line-height:20px;text-align:left;font-size:16px;color:#deb842;display:inline-block;}
.inputdiv   {float:top;margin:0 auto;margin-top:0px;width:100%;min-height:35px;line-height:35px;text-align:center;display:inline-block;}
.inputtext {float:top;margin:0 auto;width:calc(100% - 4px);height:30px;font-size:20px;text-align:center;background:#484848;border:1px #888 solid;color:#fff;}
.inputsubmit{float:top;margin:0 auto;margin-top:20px;width:calc(100% - 2px);max-width:500px;height:40px;line-height:40px;text-align:center;font-size:20px;color:#deb842;border:1px #deb842 solid;border-radius:20px;}
.fullsubmit{float:top;margin:0 auto;margin-top:10px;margin-bottom:80px;width:calc(80% - 2px);max-width:500px;height:40px;line-height:40px;text-align:center;font-size:20px;color:#deb842;border:1px #deb842 solid;border-radius:20px;}
.mealstitle {float:top;margin:0 auto;margin-top:10px;width:100%;height:18px;line-height:18px;text-align:left;font-size:16px;color:#deb842;display:inline-block;}


.menuheaditemsel {float:left;margin-top:4px;margin-left:5px;margin-bottom:0px;width:max-content;max-width:180px;min-width:23px;height:35px;border:1px #deb842 solid;border-radius:11px;background:#404040;display:block;}
.menuheaditem {float:left;margin-top:4px;margin-left:5px;margin-bottom:0px;width:max-content;max-width:180px;min-width:23px;height:34px;border:1px #666 solid;border-radius:11px;background:#3a3a3a;display:block;}
.headitemselblk {float:top;margin:2px;width:max-content;min-width:23px;height:calc(100% - 4px);cursor:pointer;display:block;}
.headitemselico {float:left;margin-left:0px;margin-right:0px;margin-top:3px;height:80%;}
.headitemselstr {float:left;margin-right:4px;width:max-content;height:100%;line-height:32px;font-size:13px;text-align:left;color:#fff;display:inline-block;}
.block_cls  {margin-top:3px;width:calc(100% - 2px);min-height:120px;text-align:left;font-size:18px;color:#fff;background:#484848;border:1px #666 solid;display:inline-blocck;}

.triblock_main {float:top;margin:0 auto;width:280px;min-height:30px;text-align:center;display:inline-block;}
.triblock_cls  {margin-top:3px;width:calc(100% - 2px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:inline-block;}

.dualblock_main {float:top;margin:0 auto;width:calc(100% - 40px);min-width:280px;min-height:30px;text-align:center;display:inline-block;}
.dualblock_cls{margin-top:3px;width:calc(100% - 2px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:inline-block;}
.dualblocksec_cls{margin-top:3px;width:calc(100% - 2px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:none;}
.dualblock_act{margin-top:3px;width:calc(100% - 2px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:none;}
.dualblocksec_act{margin-top:3px;width:calc(100% - 2px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:inline-block;}




.cateitems{float:top;width:100%;height:50px;line-height:50px;text-align:left;}
.cateitems::-webkit-scrollbar { height:1px;background:#d9ac1e;border-radius:10px;}
.cateitems::-webkit-scrollbar-track { height:1px;background: #f1db96;border-radius:10px;}
.cateitems::-webkit-scrollbar-thumb { height:1px;background: #deb842;border-radius:10px;}
.cateitems_inner {width:100%;height:100%;overflow-x:scroll;overflow-y:hidden;}
.cateitems_inner::-webkit-scrollbar { height:1px;background:#d9ac1e;border-radius:10px;}
.cateitems_inner::-webkit-scrollbar-track { height:1px;background: #f1db96;border-radius:10px;}
.cateitems_inner::-webkit-scrollbar-thumb { height:1px;background: #deb842;border-radius:10px;}
.cateitems_btn {float:left;margin-left:10px;margin-top:10px;padding-left:10px;padding-right:10px;height:30px;background:#fff;color:#000;line-height:30px;border-radius:11px;cursor:pointer;}


.list_product_cls {margin:0 auto;margin-top:40px;;width:calc(100% - 20px);max-width:560px;height:50px;line-height:50px;font-size:20px;font-weight:bold;background:#f4dc91;border-radius:7px;cursor:pointer;}



.loader {
  width: 215px;
  height: 215px;
  display: block;
  margin: auto;
  position: relative;
  background: #FFF;
  box-sizing: border-box;
}
.loader::after {
  content: '';
  width: calc(100% - 30px);
  height: calc(100% - 15px);
  top: 15px;
  left: 15px;
  position: absolute;
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
   linear-gradient(#DDD 100px, transparent 0),
   linear-gradient(#DDD 16px, transparent 0),
   linear-gradient(#DDD 50px, transparent 0);
  background-repeat: no-repeat;
  background-size: 75px 175px, 100% 100px, 100% 16px, 100% 30px;
  background-position: -185px 0, center 0, center 115px, center 142px;
  box-sizing: border-box;
  animation: animloader 1s linear infinite;
}

@keyframes animloader {
  to {
    background-position: 185px 0, center 0, center 115px, center 142px;
  }
}


.loader2 {
  margin:0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 32px 0 #fff, -32px 0 #fff;
  position: relative;
  animation: flashloader2 0.5s ease-out infinite alternate;
  display:none;
}

@keyframes flashloader2 {
  0% {
    background-color: #FFF2;
    box-shadow: 32px 0 #FFF2, -32px 0 #FFF;
  }
  50% {
    background-color: #FFF;
    box-shadow: 32px 0 #FFF2, -32px 0 #FFF2;
  }
  100% {
    background-color: #FFF2;
    box-shadow: 32px 0 #FFF, -32px 0 #FFF2;
  }
}


.loader3 {
  width: 48px;
  height: 48px;
  display: block;
  margin: 20px auto;
  box-sizing: border-box;
  position: relative;
}
.loader3::after {
  content: '';  
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  left: 0;
  bottom: 0;
  position: absolute;
  border-radius: 50% 50% 0;
  border: 15px solid #FFF;
  transform: rotate(45deg) translate(0, 0);
  box-sizing: border-box;
  animation: animMarker 0.4s ease-in-out infinite alternate;
}
.loader3::before {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 150%;
  width: 24px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  animation: animShadow 0.4s ease-in-out infinite alternate;
}

@keyframes animMarker {
  0% {
    transform: rotate(45deg) translate(5px, 5px);
  }
  100% {
    transform: rotate(45deg) translate(-5px, -5px);
  }
}

@keyframes animShadow {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
    
   

.loader4, .loader4:before, .loader4:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  animation-fill-mode: both;
  animation: bblFadInOut 1.8s infinite ease-in-out;
}
.loader4 {
  color: #FFF;
  font-size: 7px;
  position: relative;
  left: calc(50% - 10px);
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.16s;
}
.loader4:before,
.loader4:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader4:before {
  left: -3.5em;
  animation-delay: -0.32s;
}
.loader4:after {
  left: 3.5em;
}

@keyframes bblFadInOut {
  0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
  40% { box-shadow: 0 2.5em 0 0 }
}
    
   
@media screen and (max-width: 300px)  {
   .titleline{width:150px;}
   .qdtitle {font-size:20px;}
   .storetitle {font-size:13px;}
   .setup_cls{margin-right:10px;}
   .dualblocksec_cls{display:none;}
   .dualblock_act{display:none;}
   .dualblocksec_act{display:inline-block;}
}
@media screen and (min-width: 910px) and (max-width: 1200px)  {
   .titleline{width:240px;line-height:30px;font-size:28px;}
   .qdtitle {padding-top:14px;height:26px;}
   .storetitle {float:top;font-size:18px;color:#fff;}

   .itemstop_cls{display:block;}
   .itemstop_setup_cls{width:360px;}
   .itemsblock{display:none;}

   .mainclass  {margin-top:80px;padding-bottom:0px;height:calc(100vh - 81px);}
   .bannerblock{height:80px;line-height:80px;}

   .fulldivcls {height:calc(100vh - 81px - 45px);}
   .fullpagecls {min-height:calc(100vh - 131px);}
   .fullpagebdy {;min-height:calc(100vh - 131px);}

   .setup_cls{margin-top:14px;width:50px;height:50px;}
   .itemstop_cls{width:calc(100% - 540px);}
   .itemcircle_cls{margin-top:14px;width:50px;height:50px;}
   .itemsnote_cls{top:calc(-100% - 35px);right:-5px;width:19px;height:19px;line-height:19px;font-size:15px;}



   .triblock_main {float:top;margin:0 auto;width:900px;min-height:30px;text-align:center;display:inline-block;}
   .triblock_cls  {float:left;margin-left:5px;margin-right:5px;width:calc(33.3% - 12px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:inline-block;}

   .dualblock_main {float:top;margin:0 auto;width:calc(100% - 60px);min-width:900px;min-height:30px;text-align:center;display:inline-block;}
   .dualblock_cls{float:left;margin-left:10px;margin-right:10px;width:calc(50% - 22px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:inline-block;}
   .dualblocksec_cls{float:left;margin-left:10px;margin-right:10px;width:calc(50% - 22px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:inline-block;}
   .dualblock_act{float:left;margin-left:10px;margin-right:10px;width:calc(50% - 22px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:inline-block;}
   .dualblocksec_act{float:left;margin-left:10px;margin-right:10px;width:calc(50% - 22px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:inline-block;}

}
@media screen and (min-width: 1201px) {
   .titleline{width:240px;line-height:30px;font-size:28px;}
   .qdtitle {padding-top:14px;height:26px;}
   .storetitle {float:top;font-size:18px;color:#fff;}

   .itemstop_cls{display:block;}
   .itemstop_setup_cls{width:360px;}
   .itemsblock{display:none;}

   .mainclass  {margin-top:80px;padding-bottom:0px;height:calc(100vh - 81px);}
   .bannerblock{height:80px;line-height:80px;}

   .fulldivcls {height:calc(100vh - 81px - 45px);}
   .fullpagecls {min-height:calc(100vh - 131px);}
   .fullpagebdy {;min-height:calc(100vh - 131px);}

   .setup_cls{margin-top:14px;width:50px;height:50px;}
   .itemstop_cls{width:calc(100% - 540px);}
   .itemcircle_cls{margin-top:14px;width:50px;height:50px;}
   .itemsnote_cls{top:calc(-100% - 35px);right:-5px;width:19px;height:19px;line-height:19px;font-size:15px;}


   .triblock_main {float:top;margin:0 auto;width:900px;min-height:30px;text-align:center;display:inline-block;}
   .triblock_cls  {float:left;margin-left:5px;margin-right:5px;width:calc(33.3% - 12px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:inline-block;}

   .dualblock_main {float:top;margin:0 auto;width:calc(100vw - 120px);min-height:30px;text-align:center;display:inline-block;}
   .dualblock_cls{float:left;margin-left:10px;margin-right:10px;width:calc(50% - 22px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:inline-block;}
   .dualblocksec_cls{float:left;margin-left:10px;margin-right:10px;width:calc(50% - 22px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:inline-block;}
   .dualblock_act{float:left;margin-left:10px;margin-right:10px;width:calc(50% - 22px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:inline-block;}
   .dualblocksec_act{float:left;margin-left:10px;margin-right:10px;width:calc(50% - 22px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:inline-block;}

}
@media screen and (min-height: 1000px) and (min-width:640px) and (max-width:909px)  {
   .titleline{width:240px;line-height:30px;font-size:28px;}
   .qdtitle {padding-top:14px;height:26px;}
   .storetitle {float:top;font-size:18px;color:#fff;}

   .itemstop_cls{display:none;}
   .itemstop_setup_cls{width:360px;}
   .itemsblock{display:block;}
   .itemsbot_aline{width:360px;}

   .mainclass  {margin-top:80px;padding-bottom:80px;height:calc(100vh - 142px);}
   .bannerblock{height:80px;line-height:80px;}
   .itemsblock{height:80px;line-height:80px;}

   .fulldivcls {height:calc(100vh - 81px - 45px);}
   .fullpagecls {min-height:calc(100vh - 131px);}
   .fullpagebdy {;min-height:calc(100vh - 131px);}

   .setup_cls{margin-top:14px;width:50px;height:50px;}
   .itemstop_cls{width:calc(100% - 540px)}
   .itemcircle_cls{margin-top:14px;width:50px;height:50px;}
   .itemsnote_cls{top:calc(-100% - 35px);right:-5px;width:19px;height:19px;line-height:19px;font-size:15px;}

   .dualblock_main {float:top;margin:0 auto;width:900px;min-height:30px;text-align:center;display:inline-block;}
   .dualblock_cls{float:left;margin-left:5px;margin-right:5px;width:calc(50% - 12px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:inline-block;}
   .dualblocksec_cls{float:left;margin-left:5px;margin-right:5px;width:calc(50% - 12px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:inline-block;}
   .dualblock_act{float:left;margin-left:5px;margin-right:5px;width:calc(50% - 12px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:inline-block;}
   .dualblocksec_act{float:left;margin-left:5px;margin-right:5px;width:calc(50% - 12px);min-height:120px;text-align:left;font-size:18px;color:#fff;display:inline-block;}
}