@charset "UTF-8";

ul.tab { width:100%; min-height:36px; overflow-x:scroll; overflow-y:hidden; white-space:nowrap; z-index: 99; font-size:0px }
ul.tab::-webkit-scrollbar { display: none; }
ul.tab > li { height:35px; line-height:35px; display:inline-block;  margin:0px 4px; padding:0px 12px 0px 12px; border-radius:20px; font-size:12px; font-weight:700; border:1px solid var(--color--WH); background-color:var(--color--WH); cursor:pointer }
ul.tab > li:first-child { margin-left:0px !important }
ul.tab > li:last-child  { margin-right:0px !important }
ul.tab > li.on { border:0px; background-color:var(--color-G2); color:var(--color-G8);  }
ul.tab > li.disabled { color:var(--color-G6); border:0px; background-color:var(--color-G2); cursor:not-allowed;  }

/* style */
ul.tab.tab1    {  }
ul.tab.tab1 > li { border:1px solid var(--color-G3); margin:0px 4px; background-color:var(--color--WH) }
ul.tab.tab1 > li.on { border:0px; background-color:var(--color-G8); color:var(--color-WH) }
ul.tab.tab1 > li.disabled { border:0px; background-color:var(--color-G2); color:var(--color-G8); cursor:not-allowed; }
/* 모서리를 둥글게 https://stackoverflow.com/a/18795153 */
ul.tab.tab1 > li.simple { padding: 8px 12px; border-radius: 500px; height: 36px; line-height: 18px;}
ul.tab.tab1 > li.simple.on { }

ul.tab.tab2    {  }
ul.tab.tab2 > li    { height:auto; line-height:160%; border:0px; border-radius:0px; background-color:transparent; margin:0px 12px; padding:0px 0px 10px 0px; font-size:16px; font-weight:700; color:var(--color-G6); border-bottom:3px solid transparent }
ul.tab.tab2 > li.on { color:var(--color-BL); border-bottom:3px solid var(--color-BL); }
ul.tab.tab2 > li    > small.number { position:absolute; margin-left:4px; margin-top:9px; min-width:16px; height:16px; line-height:16px; display:inline-block; border-radius:6px; padding:0px 3px; text-align:center; background-color:var(--color-G5); color:var(--color-WH); font-size:12px; font-weight:bold; }
ul.tab.tab2 > li.on > small.number { background-color:var(--color-BL); }

ul.tab.tab2A    {  }
ul.tab.tab2A > li    { height:auto; line-height:160%; border:0px; border-radius:0px; background-color:transparent; margin:0px 12px; padding:0px 0px 10px 0px; font-size:16px; font-weight:700; color:var(--color-G4); border-bottom:3px solid transparent }
ul.tab.tab2A > li.on { color:var(--color-BL); border-bottom:3px solid var(--color-BL); }

ul.tab.tab3    {  }
ul.tab.tab3 > li    { border:0px; border-radius:0px; background-color:transparent; border-radius:0px; margin:0px 12px; padding:0px 0px 10px 0px; font-size:16px; font-weight:800; color:var(--color-G4); border-bottom:3px solid transparent }
ul.tab.tab3 > li.on { color:var(--color-A5); border-bottom:3px solid var(--color-A5) }
ul.tab.tab3 > li    > small.number { position:absolute; margin-left:4px; margin-top:9px; min-width:16px; height:16px; line-height:16px; display:inline-block; border-radius:2px; padding:0px 3px; text-align:center; background-color:var(--color-G4); color:var(--color-WH); font-size:12px; font-weight:bold }
ul.tab.tab3 > li.on > small.number { background-color:var(--color-A5); }

ul.tab.tab4    {  }
ul.tab.tab4 > li    { border:0px; border-radius:0px; background-color:transparent; height:22px; margin:0px 4px; padding:0px 0px; font-size:14px; font-weight:800; color:var(--color-G6); }
ul.tab.tab4 > li.on { color:var(--color-A5); }

ul.tab.tab5         { display:inline-block; width:auto; height:38px; background-color:var(--color-G3); border-radius:10px; padding:4px 4px; margin:0 auto; }
ul.tab.tab5 > li    { border:0px; border-radius:8px; padding:0px 10px; background-color:transparent; min-width:63px; height:30px; margin-left:4px; font-size:14px; font-weight:800; color:var(--color-BL); text-align:center; }
ul.tab.tab5 > li.on { background-color:var(--color-WH); }

ul.tab.tab5.disabled {  }
ul.tab.tab5.disabled > li    { color:var(--color-G5); }
ul.tab.tab5.disabled > li.on { color:var(--color-BL); }

ul.tab.tab6         { width:auto; background:none; border-radius:10px; padding:4px 4px; margin:0 auto; }
ul.tab.tab6 > li    { padding:0px 10px; min-width:63px; line-height:34px; height:34px; font-size:12px; color:var(--color-BL); text-align:center; border:1px solid var(--color-G3); border-radius:8px; }
ul.tab.tab6 > li.on { background-color:var(--color-BL); color:var(--color-WH); border:1px solid var(--color-BL) }

ul.tab.tab7           { display:inline-block; width:auto; height:38px; background-color:var(--color-G3); border-radius:8px; padding:0px; margin:0 auto; overflow:hidden; font-size:0px }
ul.tab.tab7 > li      { border:0px; margin:0px; border-radius:0px; min-width:63px; height:38px; line-height:38px; padding:0px 10px; background-color:transparent; font-size:14px; font-weight:800; color:var(--color-G6); text-align:center; }
ul.tab.tab7 > li.on   { background-color:var(--color-G2); color:var(--color-BL); border-radius:8px; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.06); }
ul.tab.tab7 > li.on.sell { background-color:var(--color-B1); color:var(--color-B5);  }
ul.tab.tab7 > li.on.buy  { background-color:var(--color-A1); color:var(--color-A5);  }

/* size */
ul.tab.full      { width:100%; display:flex; justify-content:space-between; flex-grow:1; }
ul.tab.full > li {  }
ul.tab.full > li:first-child { margin-left:42px !important }
ul.tab.full > li:last-child  { margin-right:42px !important }

ul.tab.margin_16 li:first-child { margin-left:16px !important }
ul.tab.margin_16 li:last-child  { margin-right:16px !important }