@charset "UTF-8";


/* primitive tokens
用於定義機h五顏色------------------------------- */
:root {
  --assistant-pink-1: #FFECEF;
  --assistant-pink-2: #FF79AB;
  --assistant-blue-1: #E2F1FE;  
  --assistant-blue-2: #00B7FF;
  --assistant-blue-3: #3F92C4;
  --assistant-purple-1: #E5E2F7;
  --assistant-purple-2: #805fdb;
  --assistant-orange-1: #fde5d2;
  --assistant-orange-2: #FF8500;
  --assistant-green-1: #ebffe9;
  --assistant-green-2: #40A734;
  --assistant-yellow-1: #FFEE86;
  --assistant-yellow-2: #F6D60F;
}
/* primitive tokens end
----------------------------------------------------- */


/* alias tokens
用於定義顏色可以如何應用------------------------------- */

/* 預設 */
:root {
    /* 背景色 */
    --surface-light: var(--assistant-pink-1);
    --surface-mid: var(--assistant-pink-2);
    /* 前景色 */
  
    /* 線框色 */
    --border-mid: var(--assistant-pink-2);
    --border-heavy: var(--assistant-pink-2);
}

/* 粉紅色 */
[data-category="1"] {
  /* 背景色 */
  --surface-light: var(--assistant-pink-1);
  --surface-mid: var(--assistant-pink-2);
  /* 前景色 */

  /* 線框色 */
  --border-mid: var(--assistant-pink-2);
  --border-heavy: var(--assistant-pink-2);
}

/* 藍色 */
[data-category="2"] {
  /* 背景色 */
  --surface-light: var(--assistant-blue-1);
  --surface-mid: var(--assistant-blue-2);
  /* 前景色 */

  /* 線框色 */
  --border-mid: var(--assistant-blue-2);
  --border-heavy: var(--assistant-blue-2);
}

/* 紫色 */
[data-category="3"] {
  /* 背景色 */
  --surface-light: var(--assistant-purple-1);
  --surface-mid: var(--assistant-purple-2);
  /* 前景色 */

  /* 線框色 */
  --border-mid: var(--assistant-purple-2);
  --border-heavy: var(--assistant-purple-2);
}

/* 橘色 */
[data-category="4"] {
  /* 背景色 */
  --surface-light: var(--assistant-orange-1);
  --surface-mid: var(--assistant-orange-2);
  /* 前景色 */

  /* 線框色 */
  --border-mid: var(--assistant-orange-2);
  --border-heavy: var(--assistant-orange-2);
}

/* 綠色 */
[data-category="5"] {
  /* 背景色 */
  --surface-light: var(--assistant-green-1);
  --surface-mid: var(--assistant-green-2);
  /* 前景色 */

  /* 線框色 */
  --border-mid: var(--assistant-green-2);
  --border-heavy: var(--assistant-green-2);
}

/* 黃色 */
[data-category="6"] {
  /* 背景色 */
  --surface-light: var(--assistant-yellow-1);
  --surface-mid: var(--assistant-yellow-2);
  /* 前景色 */

  /* 線框色 */
  --border-mid: var(--assistant-yellow-2);
  --border-heavy: var(--assistant-yellow-2);
}


/* alias tokens end
----------------------------------------------------- */




/* component tokens
用於定義顏色可以如何應用------------------------------- */

/* component tokens end
----------------------------------------------------- */




/* AI小幫手 
----------------------------------------------------------------- */
.assistant-box {
  position: fixed;
  z-index: 6;
  bottom: 150px;
  right: 10px;
  width: 100px;
}

.popup-assistant {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 12px;
  background: #FFF;
  display: flex;
  width: 82%;
  height: calc(100vh - 120px);
  max-width: 800px;
  max-height: none;
  min-height: 430px;
  flex-direction: column;
  align-items: center;
  z-index: 101;
  display: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  /* padding-top: 70px; */
}

.popup-assistant .close {
  right: -20px;
  top: -20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.popup-assistant iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}

.assistant {
  height: 100%;
  overflow: hidden;
}

.assistant .assistant-content {
  width: 97%;
  margin: 15px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-weight: 500;
  font-size: 1.125rem;
  height: calc(100% - 104px);
  overflow: auto;
  border: 0px solid #ccc;
}

.assistant .assistant-search-content {
  height: calc(100% - 46px);
}

.assistant-search {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 48px 0px;
  padding: 25px 15px;
}

.assistant-search .title {
  display: block;
  width: fit-content;
  margin: 0 auto;
  color: #333;
  text-align: center;
  font-family: "Noto Sans TC";
  font-size: 1.25rem;
  font-weight: 500;
  position: relative;
}

.assistant-search .title::after {
  content: "";
  display: block;
  background-color: var(--border-mid);
  position: relative;
  width: 100%;
  height: 4px;
  margin-top: 8px;
}

.assistant-search-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 40px 0 24px 0;
  align-items: center;
  gap: 10px;
  border-width: 0px;
  border-style: solid;
  border-color: #000;
}

.assistant-search-category {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -80px;
  display: flex;
  min-width: 288px;
  padding: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  letter-spacing: 8px;
  color: #fff;
  background-color: var(--surface-mid);
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 6px;
  text-shadow: -0.8px -0.8px 0 #000,
                0.8px -0.8px 0 #000,
                -0.8px 0.8px 0 #000,
                0.8px 0.8px 0 #000;
}

/*.assistant-search-category span {
  filter:
  drop-shadow(-0.8px 0 black)
  drop-shadow(0.8px 0 black)
  drop-shadow(0 -0.8px black)
  drop-shadow(0 0.8px black);
}*/

/*.assistant-search-category span img {
  filter: 
  brightness(0)
  saturate(100%)
  invert(99%)
  sepia(0%)
  saturate(2%)
  hue-rotate(14deg)
  brightness(104%)
  contrast(100%);
}*/

.assistant-input-box,
.assistant-search-criteria,
.assistant-search-criteria .wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.assistant-input-box,
.assistant-search-criteria {
  width: 90%;
  margin: 0 auto;
}

.assistant-input-box {
  padding: 15px 20px;
  align-items: center;
  gap: 8px;
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  border-radius: 6px;
}

.assistant-input-box input[type=text] {
  width: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  border-radius: 6px;
}

.assistant .input-box input[type=text].col-12 {
  width: calc(100% - 49px) !important;
}

.assistant-search-criteria {
  gap: 22px;
  padding: 14px 0;
}

.assistant-search-criteria .wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 10px;
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: var(--border-mid);
}

.assistant-search-criteria .wrap .subtitle {
  width: 100%;
  display: block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 24px;
}

.assistant-search-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 16px;
}
.assistant-search-btn img {
  display: block;
  width: 20px;
}

.assistant-search-btn .search-btn {
  display: flex;
  flex-wrap: wrap;
  width: -webkit-fit-content;
  width: fit-content;
  display: flex;
  min-width: 368px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  color: var(--neutral-text-1);
  background: #ffffff00;
  border: 1px solid var(--border-mid);
}

.assistant-search-btn .clean-btn {
  width: 100%;
  display: block;
  text-align: center;
  font-size: 1rem;
  color: #0077E5;
  text-decoration-line: underline;
}

.assistant-search-btn .back-btn {
  display: flex;
  padding: 4px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  color: var(--neutral-text-1);
  background: #ffffff00;
  border: 1px solid var(--border-mid);
}

.assistant .assistant-result-content {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 30px;
}

.assistant .assistant-result-content .search-result-header {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-mid);
}

.assistant .assistant-result-content .search-result-header a {
  color: #000;
}

.assistant .assistant-content .navigation {
  width: 86%;
  padding: 0;
  max-width: 600px;
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
}

.assistant .assistant-content .navigation .txt {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  margin: 0;
}

.assistant .assistant-content .navigation .navigation-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  gap: 12px;
  width: 100%;
  padding: 36px 0;
}

.assistant .assistant-content .navigation .navigation-box .link {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  border-width: 4px;
  border-style: solid;
  width: calc(100% / 3 - 8px);
  padding-top: 15%;
  position: relative;
}

.assistant .assistant-content .navigation .navigation-box .link>.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.assistant .assistant-content .navigation .navigation-box .link1 {
  border-color: var(--assistant-pink-2);
  color: var(--assistant-theme1);
}

.assistant .assistant-content .navigation .navigation-box .link2 {
  border-color: var(--assistant-blue-2);
  color: var(--assistant-theme2);
}

.assistant .assistant-content .navigation .navigation-box .link3 {
  border-color: var(--assistant-purple-2);
  color: var(--assistant-theme3);
}

.assistant .assistant-content .navigation .navigation-box .link4 {
  border-color: var(--assistant-orange-2);
  color: var(--assistant-theme4);
}

.assistant .assistant-content .navigation .navigation-box .link5 {
  border-color: var(--assistant-green-2);
  color: var(--assistant-theme5);
}

.assistant .assistant-content .navigation .navigation-box .link6 {
  border-color: var(--assistant-yellow-2);
  color: var(--assistant-theme6);
}

.assistant .input-box {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 15px;
  gap: 5px;
  position: fixed;
  bottom: 0;
}

.assistant .input-box input[type=text] {
  width: calc(100% - 188px - 5px);
  border-radius: 6px;
}

.assistant .input-box .send {
  background-color: var(--theme1);
  border: 0;
  background-image: url(../images/icon/send-w.svg);
  background-position: center center;
  background-size: 72%;
  background-repeat: no-repeat;
  width: 44px;
  height: 44px;
  font-size: 0;
  color: #fff;
  border-radius: 6px;
}

.assistant .input-box .eraser {
  background-color: var(--theme1);
  border: 0;
  background-image: url(../images/icon/eraser-w.svg);
  background-position: 7px center;
  background-size: 27px;
  background-repeat: no-repeat;
  width: 144px;
  height: 44px;
  font-size: 0.95rem;
  color: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding-left: 40px;
}

/* .assistant .input-box .send:hover,
.assistant .input-box .eraser:hover {
  filter: brightness(112%);
} */

.assistant .assistant-dialog {
  width: 100%;
  padding: 13px 6px;
}

.assistant .assistant-dialog .dialog-left,
.assistant .assistant-dialog .dialog-right {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 8px;
  align-items: center;
  margin: 0 0 20px 0;
}

.assistant .assistant-dialog .dialog-right {
  justify-content: flex-end;
}

.assistant .assistant-dialog .dialog-right .dialog-box {
  border-radius: 16px 0 16px 16px;
  background-color: #fffdbb;
  border: 1px solid #dad556;
  padding: 12px;
}

.assistant .assistant-dialog .dialog-left .dialog-box {
  border-radius: 0 16px 16px 16px;
  background-color: #e2ffe2;
  border: 1px solid #8de08d;
  padding: 12px;
  align-self: flex-start;
}

.assistant .assistant-dialog .avatar {
  font-size: 0;
  background: url(../images/bee-avatar.png) center center no-repeat;
  padding: 30px;
  align-self: flex-start;
  margin-top: -9px;
}

.assistant .assistant-dialog .avatar-box {
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  width: calc(100% - 80px);
}

.assistant-result-list {
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}


.assistant .show-paging .show-qty {
  white-space: nowrap;
}

.assistant .show-paging .paging-box {
  padding-right: 128px;
  padding-left: 10px;
  justify-content: center;
}

.assistant .show-paging .paging-box .paging {
    justify-content: center;
}

@media (max-width: 768px) {

  .assistant .show-paging .paging-box {
    padding-right: 0;
    padding-left: 0;
    /*order: 1;*/
  }

  .assistant .show-paging .paging-box .paging-m {
    justify-content: center;
  }

  .assistant .show-paging {
    flex-direction: column;
  }

  .assistant .show-paging .show-qty {
    /*order: 2;*/
    justify-content: center;
    margin-bottom: 10px;
  }

}

/* .assistant .assistant-dialog .avatar-box .assistant-result-list {
  overflow-y: auto;
  max-height: 300px;
} */

.assistant .btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 12px 15px;
}

.assistant .btn-box a {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  background-color: #ffffff00;
  padding: 8px 12px;
  color: #000;
}

.assistant-result {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 40px;
  border-bottom: 1px solid #ccc;
}

.assistant-result .result-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  gap: 16px;
  color: #000;
}

.assistant-result .result-wrap a {
  color: #000;
}

.assistant-result .result-wrap .result-img,
.assistant-result .result-wrap .result-img-book {
  aspect-ratio: 3 / 2;
  width: 165px;
  overflow: hidden;
}

.assistant-result .result-wrap .result-img img,
.assistant-result .result-wrap .result-img-book img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: ease-in-out 0.4s;
}

.assistant-result .result-wrap .result-img-book img {
  width: auto;
  margin: 0 auto;
}

.assistant-result .result-wrap .result-img-site img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: ease-in-out 0.4s;
}

.assistant-result .result-wrap .result-cont {
  width: calc(100% - 181px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.assistant-result .result-title {
  display: block;
  width: 100%;
  font-size: 1.45rem;
  font-weight: 500;
  gap: 8px;
}

.assistant-result .result-title img {
  display: inline-block;
  margin-left: 8px;
  position: relative;
  top: 2px;
}

.assistant-result .result-crumb {
  font-size: 0.875em;
  width: 100%;
}

.assistant-result .result-txt {
  margin: 0;
  font-size: 0.875em;
  width: 100%;
}

.assistant-result .result-img-site {
  width: 100%;
  max-width: 400px;
}

.assistant-result .result-category {
  color: var(--neutral-text-1);
  /* background-color: #999; */
  border-radius: 4px;
  display: flex;
  padding: 6px 20px;
  justify-content: center;
  align-items: center;
  width: fit-content;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.25;
}

.assistant-search-criteria .search-tag-wrap,
.assistant-result .result-tag-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 8px;
  font-size: 0.875em;
}

.assistant-search-criteria .search-tag-wrap .search-tag,
.assistant-result .result-tag-wrap .result-tag {
  display: flex;
  border-radius: 4px;
  color: var(--neutral-text-1);
  padding: 2px 8px;
  background-color: #ffffff00;
  align-items: center;
}

.assistant-result .result-tag-wrap .result-tag a {
  color: var(--neutral-text-1);
}

.assistant-search-criteria .search-tag-wrap .search-tag {
  display: flex;
  align-items: center;
  border-radius: 4px;
  color: #000;
  font-weight: 500;
  padding: 0;
  background-color: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  position: relative;
}


.assistant-search-criteria .search-tag-wrap .search-tag input[type=checkbox] {
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
  z-index: 1;
}

.assistant-search-criteria .search-tag-wrap .search-tag label {
  cursor: pointer;
  display: block;
  padding: 4px 12px;
}

.assistant-search-criteria .search-tag-wrap .tag-doc,
.assistant-search-criteria .search-tag-wrap .tag-site,
.assistant-search-criteria .search-tag-wrap .tag-photo,
.assistant-search-criteria .search-tag-wrap .tag-plan,
.assistant-search-criteria .search-tag-wrap .tag-book,
.assistant-search-criteria .search-tag-wrap .tag-video {
  background-repeat: no-repeat;
  background-position: 6px center;
  padding-left: 28px;
}

.assistant-search-criteria .search-tag-wrap .tag-video {
  background-image: url(../images/icon/tag-video.svg);
}

.assistant-search-criteria .search-tag-wrap .tag-book {
  background-image: url(../images/icon/tag-book.svg);
}

.assistant-search-criteria .search-tag-wrap .tag-plan {
  background-image: url(../images/icon/tag-plan.svg);
}

.assistant-search-criteria .search-tag-wrap .tag-photo {
  background-image: url(../images/icon/tag-photo.svg);
}

.assistant-search-criteria .search-tag-wrap .tag-site {
  background-image: url(../images/icon/tag-site.svg);
}

.assistant-search-criteria .search-tag-wrap .tag-doc {
  background-image: url(../images/icon/tag-doc.svg);
}

.assistant-search-criteria .search-tag-wrap .tag-video.active {
  background-image: url(../images/icon/tag-video-w.svg);
}

.assistant-search-criteria .search-tag-wrap .tag-book.active {
  background-image: url(../images/icon/tag-book-w.svg);
}

.assistant-search-criteria .search-tag-wrap .tag-plan.active {
  background-image: url(../images/icon/tag-plan-w.svg);
}

.assistant-search-criteria .search-tag-wrap .tag-photo.active {
  background-image: url(../images/icon/tag-photo-w.svg);
}

.assistant-search-criteria .search-tag-wrap .tag-site.active {
  background-image: url(../images/icon/tag-site-w.svg);
}

.assistant-search-criteria .search-tag-wrap .tag-doc.active {
  background-image: url(../images/icon/tag-doc-w.svg);
}

.assistant-search-criteria .search-tag-wrap .active {
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.assistant-result.result-site .result-cont {
  width: 100%;
}

.assistant-result.result-doc .result-wrap .result-img .file-type {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: auto;
}

/* category 1 
.btn-box a,
.result-category,
.result-tag-wrap .result-tag,
.show-paging .paging-box .paging .current,
.assistant-search-criteria .search-tag-wrap .active {
  background-color: var(--surface-light);
  color: var(--neutral-text-1);
  border: 1px solid var(--border-mid);
}*/



.result-wrap .result-img {
  background-color: #ffffff00;
}

.show-paging .paging-box .paging a {
  color: var(--assistant-theme1);
  background-color: var(--assistant-theme1-2);
}

.result-title,
.result-crumb,
.assistant-search-criteria .wrap .subtitle {
  color: var(--assistant-theme1);
}

.assistant-input-box,
.assistant-search-wrap,
.assistant-input-box input[type=text],
.assistant-search-criteria .search-tag-wrap .search-tag {
  border-color: var(--border-mid);
}

.assistant-search-criteria .wrap {
  border-left-color: var(--border-mid);
}

.assistant-result-content .search-result-header {
  border-bottom-color: var(--assistant-theme1);
}


@media (max-width: 640px) {

  .assistant-result .result-wrap .result-img,
  .assistant-result .result-wrap .result-img-book {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .assistant-result .result-wrap .result-cont {
    width: 100%;
  }

  .assistant .assistant-result-content .search-result-header .qty,
  .assistant .assistant-result-content .search-result-header .sort {
    width: 100%;
  }

  .assistant-box {
    bottom: 90px;
    right: 10px;
    width: 150px;
  }

  .assistant-search-category {
    width: 70%;
    min-width: auto;
  }

  .assistant-search-btn .search-btn {
    width: 90%;
    display: flex;
    min-width: auto;
  }

  .assistant-input-box {
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .popup-assistant {
    height: 80vh;
    max-height: 700px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .assistant-result .result-wrap .result-img,
  .assistant-result .result-wrap .result-img-book {
    width: 100%;
    max-width: none;
  }

  .assistant .assistant-content .navigation .navigation-box .link {
    border-radius: 12px;
    border-width: 2px;
  }

  .assistant .assistant-content .navigation .navigation-box {
    font-size: 1.15rem;
  }

  .assistant .assistant-dialog .dialog-left,
  .assistant .assistant-dialog .dialog-right {
    font-size: 80%;
  }

  .assistant .assistant-dialog .avatar {
    margin-top: -8px;
    background-size: 45px;
  }

  .assistant .input-box {
    flex-wrap: wrap;
  }

  .assistant .assistant-content {
    width: 94%;
    height: calc(100% - 139px);
  }

  .assistant .input-box input[type=text] {
    width: calc(100% - 44px - 5px);
    border-radius: 6px;
  }

  .assistant .input-box .eraser {
    margin: 0 auto;
  }
}


/* AI小幫手 end 
----------------------------------------------------------------- */