@charset "UTF-8";
.lightbox_trigger {
  cursor: pointer;
  text-decoration: underline; }

.lightbox_overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 1000;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }
  .lightbox_overlay.show {
    display: block !important;
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.8) !important; }
    .lightbox_overlay.show .lightbox_content {
      -webkit-transform: translate(-50%, -50%) scale(1);
      -ms-transform: translate(-50%, -50%) scale(1);
      transform: translate(-50%, -50%) scale(1); }
      .lightbox_overlay.show .lightbox_content img {
        opacity: 1; }
    .lightbox_overlay.show .lightbox-close {
      opacity: 1; }

.lightbox_content {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0.8);
  -ms-transform: translate(-50%, -50%) scale(0.8);
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 1001;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  padding: 20px;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  -o-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease; }
  .lightbox_content img {
    max-width: 80vw;
    max-height: 80vh;
    -o-object-fit: contain;
    object-fit: contain;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease; }
  .lightbox_content.double img {
    max-width: 40vw; }
  @media screen and (orientation: portrait) {
    .lightbox_content.double {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .lightbox_content.double img {
        max-width: 80vw;
        max-height: 40vh; } }

.lightbox_close {
  position: fixed;
  top: 20px;
  right: 20px;
  color: white;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 1002;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }
  .lightbox_close:before, .lightbox_close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background-color: #fff; }
  .lightbox_close:before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg); }
  .lightbox_close:after {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg); }
  .lightbox_close:hover {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg); }

.slider {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden; }
  .slider_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    -o-transition: transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease; }
  .slider_item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    .slider_item img {
      max-width: 100%;
      height: auto;
      display: block; }
  .slider_title {
    text-align: center;
    padding: 10px;
    margin: 0; }
    .slider_title span {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: .3em;
      position: relative; }
      .slider_title span::before {
        font-size: inherit;
        content: '';
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        background-image: url("https://www.x-legend.com/jp/ashtale/assets/images/notice/h4_icon.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center; }
  .slider_control {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 30px;
    z-index: 10; }
  .slider_button {
    border: none;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative; }
    .slider_button:hover {
      -webkit-filter: brightness(1.1);
      filter: brightness(1.1); }
    .slider_button_prev, .slider_button_next {
      width: 47px;
      height: 40px;
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain; }
    .slider_button_prev {
      background-image: url("https://www.x-legend.com/jp/ashtale/assets/images/notice/btn_prev_arrow.png"); }
    .slider_button_next {
      background-image: url("https://www.x-legend.com/jp/ashtale/assets/images/notice/btn_next_arrow.png"); }
    .slider_button_pause, .slider_button_play {
      border-radius: 5px;
      background-color: rgba(145, 98, 64, 0.8);
      color: rgba(255, 255, 255, 0.6);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: .5em;
      border-radius: 50%;
      width: 2em;
      height: 2em; }
      .slider_button_pause span, .slider_button_play span {
        position: relative; }
        .slider_button_pause span.icon, .slider_button_play span.icon {
          display: inline-block;
          width: 1em;
          height: 1em; }
    .slider_button_play span.icon::before {
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: .4em 0 .4em .6em;
      border-color: transparent transparent transparent rgba(255, 255, 255, 0.6);
      position: absolute;
      top: 50%;
      -webkit-transform: translate(-35%, -45%);
      -ms-transform: translate(-35%, -45%);
      transform: translate(-35%, -45%); }
    .slider_button_pause {
      overflow: hidden; }
      .slider_button_pause span.icon {
        position: relative;
        display: block;
        width: 100%;
        height: 100%; }
        .slider_button_pause span.icon::before, .slider_button_pause span.icon::after {
          content: '';
          position: absolute;
          width: 3px;
          height: .8em;
          background-color: rgba(255, 255, 255, 0.6);
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
        .slider_button_pause span.icon::before {
          margin-left: -3px; }
        .slider_button_pause span.icon::after {
          margin-left: 3px; }
      .slider_button_pause .progress-ring {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        .slider_button_pause .progress-ring_circle {
          -webkit-transform: rotate(-90deg);
          -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
          -webkit-transform-origin: center;
          -ms-transform-origin: center;
          transform-origin: center;
          stroke-linecap: round;
          stroke-width: 15;
          stroke: rgba(80, 32, 0, 0.9);
          fill: none;
          -webkit-transition: stroke-dashoffset 0s linear;
          -o-transition: stroke-dashoffset 0s linear;
          transition: stroke-dashoffset 0s linear; }
  .slider_pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 15px; }
    .slider_pagination_bullet {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #aa7c5a;
      cursor: pointer;
      -webkit-transition: background 0.3s ease;
      -o-transition: background 0.3s ease;
      transition: background 0.3s ease; }
      .slider_pagination_bullet.active {
        background: #502000; }

@-webkit-keyframes clock-animation {
  0% {
    stroke-dashoffset: 471; }
  100% {
    stroke-dashoffset: 0; } }

@keyframes clock-animation {
  0% {
    stroke-dashoffset: 471; }
  100% {
    stroke-dashoffset: 0; } }

.search-bar-area {
  background: #D2EDB7;
  border-radius: 12px;
  padding: 20px 16px;
  margin-bottom: 16px;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

/* Flex 容器統一樣式 */
.flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 8px; }

.flex-row label {
  white-space: nowrap;
  margin-right: 8px; }

.flex-row input,
.flex-row select {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.flex-row button.image-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 auto;
  display: block;
  cursor: pointer;
  border-radius: 8px;
  -webkit-transition: -webkit-box-shadow 0.1s, -webkit-transform 0.1s;
  transition: -webkit-box-shadow 0.1s, -webkit-transform 0.1s;
  -o-transition: box-shadow 0.1s, transform 0.1s;
  transition: box-shadow 0.1s, transform 0.1s;
  transition: box-shadow 0.1s, transform 0.1s, -webkit-box-shadow 0.1s, -webkit-transform 0.1s;
  -webkit-box-shadow: none;
  box-shadow: none; }

.flex-row button.image-btn:active {
  -webkit-transform: translateY(2px);
  -ms-transform: translateY(2px);
  transform: translateY(2px);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset; }

.flex-row button.image-btn img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: 60px;
  /* 或你想要的高度 */ }

/* 表格內容全部左右置中 */
table[id^="productTable"] td,
table[id^="productTable"] th {
  text-align: center !important;
  vertical-align: middle !important; }

table[id^="productTable"] img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important; }

/* Tooltip 相關 */
.tooltip-content {
  display: none; }

.global-tooltip {
  -webkit-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
  opacity: 1;
  z-index: 99999;
  position: fixed;
  background: rgba(67, 56, 58, 0.95);
  color: #fff;
  padding: 0.7em 1em;
  border-radius: 8px;
  min-width: 220px;
  max-width: 500px;
  pointer-events: auto;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  line-height: 1.5; }

.has-tooltip {
  cursor: pointer;
  background: #fafad2;
  -webkit-transition: background 0.2s;
  -o-transition: background 0.2s;
  transition: background 0.2s; }

.has-tooltip:hover {
  background: #ffe; }

/*# sourceMappingURL=notice_lib.css.map */