@charset "UTF-8";

ul.tab { width: fit-content; min-height:35px; overflow-x:scroll; overflow-y:hidden; white-space:nowrap; z-index: 99; font-size:0px }
ul.tab::-webkit-scrollbar { display: none; }
ul.tab > li { line-height:35px; display:inline-block; padding:0px 12px 0px 12px; font-size:12px; font-weight:700; cursor:pointer }
ul.tab > li:first-child { margin-left:0px !important }
ul.tab > li:last-child  { margin-right:0px !important }
ul.tab > li.disabled    { cursor:not-allowed;  }

/* style */
ul.tab.tab1         { width:100%; border-bottom:1px solid var(--color-G3); }
ul.tab.tab1 > li    { color:var(--color-G4); border-bottom:2px solid transparent; padding:0px 0px 0px 0px; margin-left:24px  }
ul.tab.tab1 > li:first-child { margin-left:0px }
ul.tab.tab1 > li.on { color:var(--color-BL); border-bottom:2px solid var(--color-BL); }

ul.tab.tab2         { min-height:22px; }
ul.tab.tab2 > li    { line-height:22px; color:var(--color-G4); border-radius:20px; padding:4px 10px }
ul.tab.tab2 > li.on { color:var(--color-BL); background-color:var(--color-G2) }

ul.tab.tab3         { min-height:38px; background-color:var(--color-G3); border-radius:8px }
ul.tab.tab3 > li    { line-height:38px; color:var(--color-G8); padding:0px 16px }
ul.tab.tab3 > li.on { color:var(--color-A5); background-color:var(--color-A1); border-radius:8px; box-shadow: 2px 0px 6px 0px #0000000F; }

ul.tab.center { margin:0 auto }

/* 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.full2      { width:100%; display:flex; justify-content:space-between; flex-grow:1; }
ul.tab.full2 > li { margin:0px 0px }
ul.tab.full2 > li:first-child { margin-left:16px !important }
ul.tab.full2 > li:last-child  { margin-right:16px !important }

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

ul.tab.li3 > li { width:30%; text-align:center }

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

/*****************************************/

dl.tab_content       { width:100% }
dl.tab_content dd    { display:none }
dl.tab_content dd.on { display:block }