:root {
  --gray-item-color: #f4f4f4;
  --gray-item-border: #d5d5d5;
  --spot-color: #d8f8c0;
  --no-spot-color: #fffee0;
  --top-area-height: 26px;
  --column-height: 32px;
  --show-table-border-color: #adadad;

  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  
  --buttonPrimaryMainColor: #007bff;
  --buttonSecondaryMainColor: #6c757d;
  --buttonSuccessMainColor: #28a745;
  --buttonInfoMainColor: #17a2b8;
  --buttonWarningMainColor: #ffc107;
  --buttonDangerMainColor: #dc3545;
  --buttonLightMainColor: #f8f9fa;
  --buttonDarkMainColor: #343a40;
}

*[bracket]::before{content: "("}
*[bracket]::after{content: ")"}

/* flex setting */
*[flex]{margin: 0 !important;display: flex;gap: 5px;}
*[flex] *{margin: 0 !important;}
*[flex=vertical]{flex-direction: column;}

*[flex][horizontal=center]{justify-content: center;}
*[flex][horizontal=side]{justify-content: space-between;}

*[flex][vertical=center]{align-items: center;}
*[flex][vertical=right]{align-items: flex-end;}


/* grid setting */
*[grid]{margin: 0 !important;display: grid;}
*[grid] *{margin: 0 !important;}


.topbell{position:absolute;z-index:88888;width:30px;height:30px;background:url('/img/top_bell.png') no-repeat;background-size: contain;top:10px;right:10px;cursor:pointer;}
.topbell_count{position:absolute;z-index:88889;width:20px;height:20px;line-height:20px;top:7px;right:7px;background:#ff0000;color:#fff;font-size:13px;text-align:center;-moz-border-radius:60px;-webkit-border-radius: 60px;border-radius: 60px;text-align:center;}

#hidden_canvas { background: none; }

.xs_button
{
  display: inline-flex; width: fit-content; padding: 2px; box-sizing: border-box; font-size: 11px; color: #707070; background-color: #fff; border: #c3c3c3 2px solid; letter-spacing: -1px; border-radius: 0.25rem; cursor: pointer; line-height: normal;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.xs_button > * { margin: 0 !important; }
.xs_button.success { color: var(--buttonSuccessMainColor); border-color: var(--buttonSuccessMainColor); }
.xs_button.success.on { color: #fff; background-color: var(--buttonSuccessMainColor); }
.xs_button.info { color: var(--buttonInfoMainColor); border-color: var(--buttonInfoMainColor); }
.xs_button.info.on { color: #fff; background-color: var(--buttonInfoMainColor); }
.xs_button.error { color: var(--buttonDangerMainColor); border-color: var(--buttonDangerMainColor); }
.xs_button.error.on { color: #fff; background-color: var(--buttonDangerMainColor); }
.xs_button.warning { color: var(--buttonWarningMainColor); border-color: var(--buttonWarningMainColor); }
.xs_button.warning.on { color: #000; background-color: var(--buttonWarningMainColor); }
.xs_button.select { color: var(--open_button_background); border: var(--small_button_border_color); }
.xs_button.select.on { color: #fff; background: var(--small_button_background); }

/*--- main  ---*/
.bannerarea{position:relative;width:100%;height:150px;overflow:hidden;padding-top:25px;}
.bannerarea .closeBannerBtn{background:#fff;position:absolute;width:30px;right:10px;top:0;text-align:center;z-index:100;font-weight:bold;color:#dc3545;border: 1px solid #dc3545;cursor:pointer;}
.bannerarea .openBannerBtn{background:#fff;position:absolute;width:65px;right:10px;top:0;padding:5px;text-align:center;z-index:100;border-radius:5px;font-weight:bold;color:#ff7a03;border: 2px solid #fd7e14;cursor:pointer;}
.bannerslider{position:relative;z-index:9;}
.bannerslider .back{background:none;width:100%;height:150px;}
.bannerslider .vs1{height:150px;margin:0 10px;border-radius:30px;display:flex;justify-content: center;align-items: flex-start;}

.bannerslider .vs_pos{display:flex;margin:0 auto;flex-direction: column;flex-wrap: wrap;align-items: center;align-content: center;overflow:hidden;}
.bannerslider .vs_pos .vs_pic{}
.bannerslider .vs_pos .vs_pic img{object-fit:contain;height:120px;}

.bannerslider .back{
  opacity : 0.2;
  transition: visibility 0s, opacity 0.5s ease;
}
.bannerslider .slick-center{
  opacity : 1.0;
  transition: visibility 0s, opacity 0.5s ease;
}

.bannerslider .back .vs_pos{
  opacity:0;
  transform:translateY(30%);
  transition:opacity .8s, transform .8s;
}

.bannerslider .slick-center .vs_pos {
  opacity:1;
  transform:translateY(0);
  transition:opacity .8s .5s, transform .8s .5s;
}

.infoBox {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: #f8f8f8; border: #c8c8c8 1px solid; padding: 10px; overflow: hidden; box-sizing: border-box; width: 100%; line-height: 1.25;
  
  * { word-break: break-all; }
}