/*@import "share.css";
@import "tab.css";
@import "searchtab.css";
@import "categoryPCtab.css";*/


@import "bookList.css";
@import "bookwall.css";


/*@import "searchbar.css";*/


/*@import "filter.css";

@import "searchfilterInput.css";
@import "bookCaseList.css";
@import "libRule.css";*/

/*pageRefreshBtn和pageRefreshBtn  都是跳頁看更多@import "bookCarousel.css";@import "topic.css";@import "window.css";@import "popup.css";@import "presscolumn.css";@import "readcolumn.css";@import "cusSelector.css";
@import "billboardIndex.css";@import "slider.css";*/


.stylecss {
  content: "20260330下午 已含華藝總館 無ABCIN-891 已回復1/19版本 ABCIN-956?focusedCommentId=29080";
}

/*只要是部分出現詳目資訊:全文相符段落 全站都用*/
ul.fullTxtInfo {
  margin-left: 0.5rem;
}

ul.fullTxtInfo li {
  padding-bottom: 0.5rem;
  display: flex;
  align-items: flex-start;
  column-gap: 0.5rem;
}

.mi {
  color: var(--danger);
}

.checkboxName {
  vertical-align: top;
  max-width: max-content;
}

.g700 {
  color: var(--G700);
}

.g900 {
  color: var(--G900);
}

.tan {
  color: var(--tan);
}

.g100Bg {
  background: var(--G100);
}

.seaBlue {
  color: var(--seaBlue);
}

.red {
  color: var(--danger);
}

.success {
  color: var(--success);
}


.cusIconBg {
  background-color: #fff;
  box-shadow: 0px 3px 8px -1px rgba(0, 0, 0, 0.15);
  width: 3.25rem;
  height: 3.25rem;
  padding: 10px;
  border-radius: 8px;
  box-sizing: border-box;
  background-position: center center;
  background-repeat: no-repeat;
}

/*---以下是首頁沒有麵包屑的main*/
.indexLayout main {
  margin-top: 48px;
  /*if header fix*/
  margin-top: -6px;
  /*不知為何有間隔*/
}

/*---基本內容頁距 包含共用加寫：例如麵包屑 .Tbaseline+.tabMenu*/

main [class$="Divider"] aside [class$="Set"] {
  padding: 0;
}

/*=====two col============*/
main [class$="Divider"] [class$="Set"] {
  padding: 0;
}

main [class$="Divider"] [class$="Set"]>[class$="Container"] {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}


main [class$="Divider"] [class$="Set"]>[class$="Container"]+.pageRefreshBtn {

  padding-top: 2rem;
}

.asideBySide [class$="Container"]+.pageMenuBar {
  padding-top: 2rem;
}

.asideBySide {
  width: 100%;
  float: none;

  text-align: left;
  padding: 0 1rem;
  margin-left: auto;
  margin-right: auto;

}


.asideBySide .ThemeBuilder {
  padding-bottom: 1rem;
}

/*=====two col============*/


@media (min-width: 768px) {

  /* main [class$="Divider"] [class$="Set"] {
 padding-left:1.5rem;padding-right:1.5rem;
}觀察看看*/
  .asideBySide {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1260px) {

  .asideBySide {
    width: calc(100% - 389px);
    float: right;
    padding: 0;
    margin-left: 2rem;

  }

}


/*main [class$="Set"] > .Tbaseline {
  padding-top: 2rem;
}
*/

main [class$="Set"] {
  padding: 0 1rem;
}


main [class$="Set"]>[class$="Container"] {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 2.5rem 0;
}


main [class$="Container"]+div.toggleMoreBtn,
main [class$="Container"]+div.pageRefreshBtn,
main [class$="Container"]+div.moreFeedBackBtn {
  padding-bottom: 1.5rem;
}


@media (min-width: 768px) {
  main [class$="Set"] {
    padding: 0 1.5rem;
  }

}

@media (min-width: 1260px) {
  main [class$="Set"]>[class$="Container"] {
    max-width: 1230px;
  }


}


.breadSet {
  padding: 0;
}

.breadWrap .breadSet .breadContainer {
  max-width: initial;
  margin: 1rem 0 0 0;
  padding: initial;
}

.backWrap span {
  color: var(--G700);
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-top: 3px;
}

.backWrap a {
  display: flex;
  column-gap: 1rem;
}

.backWrap {
  margin: auto;
  height: 56px;
  padding: 1rem 1rem;
  width: 100%;
}


@media (min-width: 1260px) {

  .backWrap {
    padding: 1rem 4rem;
    width: 100%;
  }


}

/*-------------------------元件共用BA*/
/*header + [class$="Wrap"] {
  margin-top: 48px;
}*/

@media (min-width: 1260px) {
  header+[class$="Wrap"] {
    /*margin-top: 122px; if header fix*/
    margin-top: 0px;
  }

  /*若header含導覽列大多通用*/

  main [class$="Set"] {
    padding: 0 1.5rem;
  }
}

/*end*/
span.transIcon {
  font-size: 1.5rem;
  height: 1.55rem;

  vertical-align: middle;
  display: inline-flex;
  margin-top: 1px;
}

span.transIcon .icon-tip_up,
span.transIcon .icon-point_down {
  display: none;
}

details>summary>.icon-tip_down {
  display: inline-block;
}

details>summary>.icon-tip_up {
  display: none;
}

details[open]>summary .icon-tip_down {
  display: none;
}

details[open]>summary .icon-tip_up {
  display: inline-block;
}

details>summary .btnName {
  line-height: 1.25;
}

/*---麵包屑*/
.breadWrap {
  padding: 0 1.5rem;
  width: 100%;
  /*margin-top: 48px;*/
  z-index: 100;
  background: #fff;
}

.breadSet {
  margin: auto;
  height: 56px;
}

.breadContainer {
  display: inline-flex;
  justify-content: flex-start;
  align-items: baseline;
  height: 2rem;
  margin-top: 1rem;
}

.breadSet a,
.breadSet a:link {
  padding: 0;
  margin: 0;
  font-size: 1rem;
  color: var(--G900);
  width: max-content;
}

.breadSet a.-active {
  color: var(--seaBlue);
}

.breadSet .icon-noncheck:before {
  font-size: 12px;
  color: var(--G900);
  padding: 0 6px;
  font-weight: bold;
}

/*end*/
.searchword {
  color: var(--success);
}

.Tbaseline .searchword {
  color: var(--tan);
}

.Tbaseline .date {
  color: var(--G700);
  font-family: Overpass;
  font-size: 14px;

  padding: 0.65rem 0;
}

.listsymbol {
  display: block;
  border-radius: 100%;
  padding: 2px;

  background: var(--G900);
  position: relative;
  top: 12px;
}

.mask {
  background: #000000;
  opacity: 0.25;
  position: fixed;
  z-index: 300;
  top: 0px;
  width: 100%;
  height: 100%;
  left: 0px;
}

h2 {
  font-size: var(--h2FS);
  color: var(--G900);
}

h3 {
  font-size: var(--p1FS);
  color: var(--G900);
}

.areaCenterTitle {
  min-height: 28px;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;

}

.areaCenterTitleTxt {
  display: inline-block;
  padding: 0 1rem;
  background: #fff;
  width: max-content;
  position: relative;
  z-index: 1;
  font-size: var(--p2FS);
  color: var(--G700);
}

.areaCenterTitle .longdash {
  display: inline-block;
  font-size: var(--h2FS);
  height: 1px;
  width: 100%;
  background: #d9d9d9;
  /* flex: 1; */
  /* margin-top: 2px; */
  margin-top: -12px;
}

.pageCenterTitle {
  min-height: 42px;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;

}

.pageCenterTitleTxt {
  display: inline-block;
  padding: 0 1rem;
  font-size: 1.5rem;
  background: #fff;
  width: max-content;
  position: relative;
  z-index: 1;
}

.pageCenterTitle .longdash {
  display: inline-block;
  font-size: var(--h2FS);
  height: 1px;
  width: 100%;
  background: #d9d9d9;
  /* flex: 1; */
  /* margin-top: 2px; */
  margin-top: -16px;
}

.ThemeBuilder {
  /*  padding: 0 1rem;取消看看*/

  margin: 0 auto;
}

main [class$="Set"] .ThemeBuilder {
  padding-left: 0;
  padding-right: 0;
}


.ThemeBuilder .tabSelect {
  max-width: 1230px;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 0;
}

.ThemeBuilder .Tbaseline~.tabSelect {
  padding-top: 2.5rem;
}

.ThemeBuilder>.tabMenu

/*,
[class$="Set"]>.tabMenu*/
  {
  padding-top: 2.5rem;
}

.ThemeBuilder .tabSelect {
  display: block;
  width: 100%;
}

.ThemeBuilder .tabMenu {
  display: none;
}

/*.treeTrigger span.transIcon{
    height: 1rem;}	*/

.Tbaseline .setTitle {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  /*padding-top: 1rem;
  margin-bottom: 1rem;*/

  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1230px;
  column-gap: 1rem;
}

.Tbaseline {
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  max-width: 1230px;
  display: flex;
  position: relative;
}

/*若遇到set已設左右邊距時*/
.ThemeBuilder .Tbaseline {
  padding-top: 2rem;
  padding-left: 0rem;
  padding-right: 0rem;
}

main [class$="boardSet"] .ThemeBuilder,
main [class$="SliderSet"] .ThemeBuilder {
  padding-left: 1rem;
  padding-right: 1rem;
}

/*===swiper內容架構 標題設左右間距  但整個內容set不用===*/
main [class$="boardSet"],
main [class$="SliderSet"] {
  padding: 0 !important;
}

main [class$="boardSet"] .ThemeBuilder,
main [class$="SliderSet"] .ThemeBuilder {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/*===swiper內容架構 標題設左右間距  但整個內容set不用===*/
@media (min-width: 768px) {

  /* .ThemeBuilder {
    padding: 0 1.5rem;
  }取消看看*/
  .ThemeBuilder .tabSelect {
    display: none;
  }

  .ThemeBuilder .tabMenu {
    display: block;
  }


}


.ThemeBuilder .tabPoPPanelContent .Tbaseline {
  width: 100%;
  padding-top: 0;
}

.Tbaseline details[open] .contentRefreshSel {
  position: fixed;
  z-index: 1100;
  right: 0.75rem;
  top: 2.5rem;
  display: inline-block;
  background: #fff;
  padding-left: 0.5rem;

  width: max-content;
}

.Tbaseline details[open] .contentRefreshSel a {
  color: var(--seaBlue);
}

/*.Tbaseline details[open] .contentRefreshSel .transIcon .icon-tip_down {
  display: none;
}
.Tbaseline details[open] .contentRefreshSel .transIcon .icon-tip_up {
  display: inline-block;
}
*/
.Tbaseline .setTitle>span:nth-child(1) {
  font-size: var(--h2FS);
}

.Tbaseline .setTitle>span:nth-child(2) {
  font-size: var(--h2FS);
  height: 1px;
  width: 100%;
  background: #d9d9d9;
  flex: 1;
}

.Tbaseline .setTitle>span:nth-child(2) {
  font-size: var(--h2FS);
  height: 1px;
  width: 100%;
  background: #d9d9d9;
  flex: 1;
  margin-top: 2px;
}

.Tbaseline .contentRefreshSel {
  display: inline-block;
  width: fit-content;
  margin-top: -2px;
}

.Tbaseline .contentRefreshSel>a,
.Tbaseline .contentRefreshSel>span {
  display: inline-flex;
}

.contentRefreshName {
  max-width: 112px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.contentRefreshSel {
  height: 25px;
  padding: 2px 0;
}

.Tbaseline .pageRefreshBtn {
  display: none;
  width: fit-content;
  font-weight: 400;
  padding-left: 1rem;
}

.Tbaseline span.describe {
  display: block;
  width: 100%;
  font-size: 0.875rem;
  color: var(--G700);
  font-weight: 400;
  padding-top: 0.5rem;
}

.toggleMoreBtn,
.pageRefreshBtn,
.moreFeedBackBtn,
.verbBtn {
  width: 100%;
  margin: auto;
  text-align: center;
}

.coverImg img {
  width: 100%;
  height: 100%;
}

/*文字連結沒有G700*/
a {
  width: fit-content;
  border: 1px transparent;
  box-sizing: border-box;
  outline: none;
  text-decoration: none;
  display: inline-block;
  /*user-select: none;*/
  margin: 0;
  cursor: pointer;
  color: var(--seaBlue);
  -webkit-tap-highlight-color: transparent;
}

a:link {
  text-decoration: none;
  /*user-select: none;*/
  outline: none;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (any-hover: hover) {
  a:hover {
    text-decoration: underline;
    color: var(--seaBlue);
  }
}

a:visit {
  text-decoration: underline;
  color: var(--seaBlue);
}

a:active {
  opacity: 0.85;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

::placeholder {
  color: var(--G500);
}

@media (max-width: 768px) {
  a:active {
    color: initial;
  }
}

/*只要是icon 無論在哪   一律都是24px*/
/*button [class^="icon-"],
a [class^="icon-"],
input [class^="icon-"],*/
[class^="icon-"]:before {
  font-size: var(--h2FS);
}

[class^="icon-"] {
  vertical-align: middle;
  display: inline-block;
  box-sizing: border-box;
}

/*只要是icon 一律都是24px*/

/*[class^="icon_"]+.btnName,
[class*=" icon_"]+.btnName {
	margin-left: 6px;
}

.btnName+[class^="icon_"],
.btnName+[class*=" icon_"] {
	margin-left: 6px;
}*/

.treeItem {
  min-height: 3rem;
  line-height: 3;
}

.treeItem a,
.treeItem a:link {
  text-decoration: none;
  color: var(--G700);
}

.treeItem {
  min-height: 3rem;
  line-height: 3;
}

@media (any-hover: hover) {
  .treeItem a:hover {
    text-decoration: none;
    color: var(--seaBlue);
  }
}

.treeItem .icon-noncheck::before {
  font-size: var(--p4Fs);
}

.btnName {
  height: 100%;
  width: fit-content;
  box-sizing: border-box;
  color: inherit;
  vertical-align: middle;
  font-weight: 400;
  text-decoration: none;
  display: -webkit-inline-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
  line-height: 1.85;
}

@media (any-hover: hover) {
  [class$="-Outline-Bg"]:hover {
    text-decoration: none;
  }
}

button {
  background-color: transparent;
  text-decoration: none;
  border-color: transparent;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  justify-content: center;
  align-items: stretch;
}

/*input[type="button"],
input[type="submit"],
input[type="reset"] */
input {
  background-color: transparent;
  text-decoration: none;
  border-color: transparent;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  justify-content: center;
  align-items: stretch;
}

a,
a:link {
  background-color: transparent;
  text-decoration: none;
  border-color: transparent;
  box-sizing: border-box;
  cursor: pointer;
  align-items: stretch;
  text-align: center;
}


/*U-*/
.u-Btn {
  width: 100%;
}

/*觀察看看*/

.red-Bg,
.red-Bg:active {
  border: 1px solid var(--danger);
  background-color: var(--danger);
  color: #ffffff;
}

@media (any-hover: hover) {
  .red-Bg:hover {
    border: 1px solid var(--danger);
    background-color: var(--danger);
    color: #ffffff;
  }
}

.seaBlue-Bg,
.seaBlue-Bg:link {
  border: 1px solid var(--seaBlue);
  background-color: var(--seaBlue);
  color: #ffffff;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  height: 2.5rem;
  text-align: center;
}

.seaBlue-Bg [class^="icon-"]:before {
  color: #ffffff;
}

.seaBlue-Bg:active {
  border: 1px solid var(--skyBlue);
  background-color: var(--skyBlue);
  color: #ffffff;
}

@media (any-hover: hover) {
  .seaBlue-Bg:hover {
    border: 1px solid var(--skyBlue);
    background-color: var(--skyBlue);
    color: #ffffff;
  }
}

.purple-Bg,
.purple-Bg:link {
  border: 1px solid var(--purple);
  background-color: var(--purple);
  color: #ffffff;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  height: 2.5rem;
  text-align: center;
}

.purple-Bg [class^="icon-"]:before {
  color: #ffffff;
}

.purple-Bg:active {
  border: 1px solid var(--lavender);
  background-color: var(--lavender);
  color: #ffffff;
}

@media (any-hover: hover) {
  .purple-Bg:hover {
    border: 1px solid var(--lavender);
    background-color: var(--lavender);
    color: #ffffff;
  }
}

.tan-Bg,
.tan-Bg:link {
  border: 1px solid var(--tan);
  background-color: var(--tan);
  color: #ffffff;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  height: 2.5rem;
  text-align: center;
}

.tan-Bg [class^="icon-"]:before {
  color: #ffffff;
}

.tan-Bg:active {
  border: 1px solid var(--skin);
  background-color: var(--skin);
  color: #ffffff;
}

@media (any-hover: hover) {
  .tan-Bg:hover {
    border: 1px solid var(--skin);
    background-color: var(--skin);
    color: #ffffff;
  }
}

.g500-Outline-Bg,
.g500-Outline-Bg:link {
  border: 1px solid var(--G500);
  /*background-color: #ffffff;*/
  background-color: transparent;
  color: var(--G700);
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  height: 2.5rem;
  text-align: center;
}

.g500-Outline-Bg [class^="icon-"]:before {
  color: var(--G700);
}

.g500O-utline-Bg:active {
  border-color: var(--seaBlue);
  background-color: var(--seaBlue);
  color: #ffffff;
}

@media (any-hover: hover) {
  .g500-Outline-Bg:hover {
    border-color: var(--seaBlue);
    background-color: var(--seaBlue);
    color: #ffffff;
    text-decoration: none;
  }

  .g500-Outline-Bg:hover [class^="icon-"]:before {
    color: #ffffff;
  }
}

.g300-Outline-Bg,
.g300-Outline-Bg:link {
  border: 1px solid var(--G300);
  /*background-color: #ffffff;*/
  background-color: transparent;
  color: var(--G700);
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  height: 2.5rem;
  text-align: center;
}

.g300-Outline-Bg [class^="icon-"]:before {
  color: var(--G700);
}

.g300-Outline-Bg:active {
  border: 1px solid var(--seaBlue);
  background-color: var(--seaBlue);
  color: #ffffff;
}

@media (any-hover: hover) {
  .g300-Outline-Bg:hover {
    border: 1px solid var(--seaBlue);
    background-color: var(--seaBlue);
    color: #ffffff;
    text-decoration: none;
  }

  .g300-Outline-Bg:hover [class^="icon-"]:before {
    color: #ffffff;
  }
}

.seaBlue-Outline-Bg,
.seaBlue-Outline-Bg:link {
  border: 1px solid var(--seaBlue);
  background-color: transparent;
  color: var(--seaBlue);
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  height: 2.5rem;
  text-align: center;
}

.seaBlue-Outline-Bg [class^="icon-"]:before {
  color: var(--seaBlue);
}

.seaBlue-Outline-Bg:active,
.seaBlue-Outline-Bg.-active {
  border: 1px solid var(--seaBlue);
  background-color: var(--seaBlue);
  color: #ffffff;
}

/*.seaBlue-Outline-Bg.-active 查閱歷程*/

@media (any-hover: hover) {
  .seaBlue-Outline-Bg:hover {
    border: 1px solid var(--seaBlue);
    background-color: var(--seaBlue);
    color: #ffffff;
  }
}


.btnBg-SS {
  height: 1.375rem;
  font-size: var(--p4FS);
  padding: 2px 14px;

  display: inline-flex;
  width: 100%;
  column-gap: 0.25rem;
  justify-content: center;
}

/*高22 比icon24px還小的時候用*/
/*按鈕高24px或是組件式按鈕就不用註記按鈕高度 或是直接在命名class名稱在按鈕上*/
.btnBg-S {
  height: 1.8125rem;
  font-size: var(--p3FS);
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;

  display: inline-flex;
  width: 100%;
  column-gap: 0.25rem;
  justify-content: center;
}

/*高40*/
.btnBg-M {
  height: 2.5rem;
  padding: 0.5rem 1.5rem;
  font-size: var(--p2FS);
  line-height: 1.65;
  border-radius: 0.5rem;

  display: inline-flex;
  width: 100%;
  column-gap: 0.25rem;
  justify-content: center;
}

/*高48*/
.btnBg-L {
  height: 3rem;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;

  display: inline-flex;
  width: 100%;
  column-gap: 0.25rem;
  justify-content: center;
}

[class*="-Ghost"] {
  display: flex;
  align-items: stretch;
  column-gap: 0.25rem;
  padding: 0;
  margin: 0;
  line-height: initial;
  height: auto;
  cursor: pointer;
}

.g900-p2-Ghost,
.g900-p2-Ghost:link {
  color: var(--G900);
}

.g900-p2-Ghost .btnName,
.g900-p2-Ghost:link .btnName {
  font-size: var(--p2FS);
  color: var(--G900);
}

@media (any-hover: hover) {

  .g900-p2-Ghost:hover,
  .g900-p2-Ghost:hover .btnName {
    text-decoration: none;
    color: var(--seaBlue);
  }
}

.g900-p3-Ghost,
.g900-p3-Ghost:link {
  color: var(--G900);
}

.g900-p3-Ghost .btnName,
.g900-p3-Ghost:link .btnName {
  font-size: var(--p3FS);
  color: var(--G900);
}

@media (any-hover: hover) {

  .g900-p3-Ghost:hover,
  .g900-p3-Ghost:hover .btnName {
    text-decoration: none;
    color: var(--seaBlue);
  }
}

.g700-p2-Ghost,
.g700-p2-Ghost:link {
  color: var(--G700);
}

.g700-p2-Ghost .btnName,
.g700-p2-Ghost:link .btnName {
  font-size: var(--p2FS);
  color: var(--G700);
}

.g700-p3-Ghost,
.g700-p3-Ghost:link {
  color: var(--G700);
}

.g700-p3-Ghost .btnName,
.g700-p3-Ghost:link .btnName {
  font-size: var(--p3FS);
  color: var(--G700);
}

@media (any-hover: hover) {

  .g700-p2-Ghost:hover,
  .g700-p2-Ghost:hover .btnName,
  .g700-p3-Ghost:hover,
  .g700-p3-Ghost:hover .btnName {
    text-decoration: none;
    color: var(--seaBlue);
  }
}

/*高48*/
/*文字連結*/
[class^="-Link"],
[class*="-Link"] {
  margin: 0;
  padding: 0;
  width: fit-content;
  height: fit-content;
  display: inline;
}

.g900-h2-Link,
.g900-h2-Link:link {
  cursor: pointer;
  font-size: var(--h2FS);
  color: var(--G900);
}

.g900-h2-Link:active {
  cursor: pointer;
  color: var(--seaBlue);
}

@media (any-hover: hover) {
  .g900-h2-Link:hover {
    cursor: pointer;
    color: var(--seaBlue);
    text-decoration: none;
  }
}

.g900-p1-Link,
.g900-p1-Link:link {
  cursor: pointer;
  font-size: var(--p1FS);
  color: var(--G900);
  text-align: left;
}

.g900-p1-Link:active {
  color: var(--seaBlue);
  text-decoration: none;
}

@media (any-hover: hover) {
  .g900-p1-Link:hover {
    color: var(--seaBlue);
    text-decoration: none;
  }
}


.g900-p2-Link,
.g900-p2-Link:link {
  cursor: pointer;
  font-size: var(--p2FS);
  color: var(--G900);
  text-align: left;
}

.g900-p2-Link:active {
  color: var(--seaBlue);
  text-decoration: none;
}

@media (any-hover: hover) {
  .g900-p2-Link:hover {
    color: var(--seaBlue);
    text-decoration: none;
  }
}

.g700-p1-Link,
.g700-p1-Link:link {
  font-size: var(--p1FS);
  color: var(--G700);
  cursor: pointer;
}

.g700-p1-Link:active {
  color: var(--seaBlue);
  text-decoration: none;
}

@media (any-hover: hover) {
  .g700-p2-Link:hover {
    color: var(--seaBlue);
    text-decoration: none;
  }
}

.g700-p2-Link,
.g700-p2-Link:link {
  font-size: var(--p2FS);
  color: var(--G700);
  cursor: pointer;
}

.g700-p2-Link:active {
  color: var(--seaBlue);
  text-decoration: none;
}

@media (any-hover: hover) {
  .g700-p2-Link:hover {
    color: var(--seaBlue);
    text-decoration: none;
  }
}

.g700-p3-Link,
.g700-p3-Link:link {
  font-size: var(--p3FS);
  color: var(--G700);
  line-height: 3;
  cursor: pointer;
}

.g700-p3-Link:active {
  color: var(--seaBlue);
  text-decoration: none;
}

@media (any-hover: hover) {
  .g700-p3-Link:hover {
    color: var(--seaBlue);
    text-decoration: none;
  }
}

.tan-p1-Link,
.tan-p1-Link:link {
  cursor: pointer;
  font-size: var(--p1FS);
  color: var(--tan);
}

.tan-p1-Link:active {
  color: var(--skin);
}

@media (any-hover: hover) {
  .tan-p1-Link:hover {
    color: var(--skin);
  }
}

.tan-p2-Link,
.tan-p2-Link:link {
  cursor: pointer;
  font-size: var(--p2FS);
  color: var(--tan);
}

.tan-p2-Link:active {
  color: var(--skin);
}

@media (any-hover: hover) {
  .tan-p2-Link:hover {
    color: var(--skin);
    text-decoration: none;
  }
}

.tan-p3-Link,
.tan-p3-Link:link {
  cursor: pointer;
  font-size: var(--p3FS);
  color: var(--tan);
}

.tan-p3-Link:active {
  color: var(--skin);
}

@media (any-hover: hover) {
  .tan-p3-Link:hover {
    color: var(--skin);
    text-decoration: none;
  }
}

.seaBlue-p3-Link,
.seaBlue-p3-Link:link {
  cursor: pointer;
  font-size: var(--p3FS);
  color: var(--seaBlue);
}

.seaBlue-p3-Link:active {
  color: var(--skyBlue);
}

@media (any-hover: hover) {
  .seaBlue-p3-Link:hover {
    color: var(--skyBlue);
    text-decoration: none;
  }
}

.seaBlue-p2-Link,
.seaBlue-p2-Link:link {
  cursor: pointer;
  font-size: var(--p2FS);
  color: var(--seaBlue);
}

.seaBlue-p2-Link:active {
  color: var(--skyBlue);
}

@media (any-hover: hover) {
  .seaBlue-p2-Link:hover {
    color: var(--skyBlue);
    text-decoration: none;
  }
}

.seaBlue-h2-Link,
.seaBlue-h2-Link:link {
  cursor: pointer;
  font-size: var(--h2FS);
  color: var(--seaBlue);
}

.seaBlue-h2-Link:active {
  color: var(--skyBlue);
}

@media (any-hover: hover) {
  .seaBlue-h2-Link:hover {
    color: var(--skyBlue);
    text-decoration: none;
  }
}

.divider {
  background: var(--G300);
  width: 1px;
  display: inline-block;
}

button:active,
a:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
  text-decoration: none;
}

button:disabled,
button[disabled],
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
button.-disabled,
a.-disabled,
input[type="button"].-disabled,
input[type="submit"].-disabled,
input[type="reset"].-disabled {
  border-color: var(--G300) !important;
  background-color: var(--G300) !important;
  color: #ffffff !important;
  cursor: text !important;
  box-shadow: none !important;
}

button[class*="-Outline-Bg"]:disabled,
button[class*="-Outline-Bg"].-disabled,
a[class*="-Outline-Bg"].-disabled,
input[class*="-Outline-Bg"].-disabled {
  border-color: var(--G300) !important;
  background-color: transparent !important;
  color: var(--G300) !important;
  cursor: text !important;
  box-shadow: none !important;
}


button:disabled .btnName,
button[disabled] .btnName,
input[type="button"]:disabled .btnName,
input[type="submit"]:disabled .btnName,
input[type="reset"]:disabled .btnName,
button.-disabled .btnName,
a.-disabled .btnName,
input[type="button"].-disabled .btnName,
input[type="submit"].-disabled .btnName,
input[type="reset"].-disabled .btnName {

  cursor: text !important;

}

a.prodBtn,
a.prodBtn:link {
  border-radius: 8px;
  color: var(--G700);
  border: 1px solid var(--G300);
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 4rem;
}

@media (any-hover: hover) {
  .prodBtn:hover {
    text-decoration: none;
    border-color: var(--seaBlue);
    color: var(--G700);
  }
}

/*=====================頁籤 包含標題頁籤 全站通用基本===================================================*/
.tagMenu {
  display: flex;
  column-gap: 0.5rem;
  flex-wrap: nowrap;
  line-height: 1.5;
  text-decoration: none;
  align-items: center;
  min-width: 110%;
}

.tagMenu .tag {
  border: 1px solid var(--G300);
  background-color: #ffffff;
  color: var(--G900);
  height: 1.8125rem;
  display: inline-block;
  padding: 0.25rem 1rem;
  text-align: center;
  border-radius: 8px;
  font-size: 0.875rem;
  min-width: max-content;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.tagMenu a.tag:active {
  border: 1px solid var(--seaBlue);
  background-color: var(--seaBlue);
  color: #ffffff;
  text-decoration: none;
}

@media (any-hover: hover) {
  .tagMenu a.tag:hover {
    border: 1px solid var(--seaBlue);
    background-color: var(--seaBlue);
    color: #ffffff;
    text-decoration: none;
  }
}

.tabMenu {
  position: relative;
  max-width: 1230px;
  margin-left: auto;
  margin-right: auto;
}

.tabSelect {
  position: relative;

}

.tabBar {
  display: flex;
  flex-wrap: nowrap;
  line-height: 1.5;
  text-decoration: none;
  align-items: center;

  color: red;
  width: 100%;
  height: 100%;
  text-align: left;
  z-index: 100;
  border-bottom: 1px solid var(--G300);
  height: fit-content;
}

.tabMenu li.tab {
  width: auto;
  border-bottom: 1px solid transparent;
  flex: 1;
  color: var(--G700);
  min-height: 2.5rem;
  line-height: 2rem;
}

.tabMenu li.tab a {
  color: var(--G700);
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.tabMenu li.tab:hover,
.tabMenu li.tab:active,
.tabMenu.divided-bg li.tab a:hover,
.tabMenu.divided-bg li.tab a:active {
  text-decoration: none;
  color: var(--seaBlue);
  border-color: var(--seaBlue);
}

.tabMenu li.tab:hover a,
.tabMenu li.tab:active a {
  color: var(--seaBlue);
  text-decoration: none;
}

.tabMenu .tabContext {

  overflow: hidden;
  width: 100%;
  box-sizing: border-box;

  display: none;
}

.tabContext {
  display: none;
}

.tabContext.-active {
  display: block;
}

.tabBar li.-active {
  border-bottom: 1px solid var(--seaBlue);
  color: var(--seaBlue);
}

.tabBar li.-active a {
  color: var(--seaBlue);
}

.tabPoPPanel {

  position: absolute;
  right: 0rem;
  top: 2.5rem;
  background: #ffffff;

}

.tabPoPPanelContent {
  min-width: 100%;
  padding: 2rem 1rem;
  flex-direction: column;
  align-items: flex-start;
  position: fixed;
  z-index: 1000;
  background: #fff;
  top: 0px;
  left: 0;
}

.tabPoPPanelOption button.-active {
  border: 1px solid var(--seaBlue);
  background-color: var(--seaBlue);
  color: #ffffff;
}

.tabPoPPanelOption>div {
  width: 100%;
}

.tabPoPPanelOption>div {
  display: inline-block;
  width: 48%;

}

.tabPoPPanelOption {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  row-gap: 1rem;
  margin-top: 2rem;

}

.tabPoPPanelOption .mask {
  background: #000000;
  opacity: 0.25;
  position: fixed;
  z-index: 100;
  top: 0px;
  width: 100%;
  height: 100%;
}

/*有分隔線*/
.tabMenu.divided-bg .tabBar {
  display: flex;
  column-gap: 1rem;
  margin: auto;
  z-index: 100;
  border-bottom: 0;
  height: fit-content;
  width: 100%;
  max-width: 1230px;
}

.tabMenu.divided-bg li.tab {
  width: 100%;
  flex: 1;
  border: 0;
  color: var(--G700);
  min-height: 2.5rem;
  line-height: 2rem;
  max-width: max-content;
  padding-bottom: 0px;
}

.tabMenu li.divider {
  display: none;
}

.tabMenu.divided-bg li.divider {
  display: inline-block;
  background: var(--G300);
  width: 1px;
  height: 2rem;
  position: relative;
  top: 4px;
}

.tabMenu.divided-bg li.tab a {
  color: var(--G700);
  border-bottom: 1px solid var(--G300);
  margin: 0 1rem;
  border-radius: 0;
  width: 100%;
  margin: 0;
  width: 100%;
  padding: 0;
  line-height: 2;
  margin-top: 8px;
  min-width: 70px
}

.tabMenu.divided-bg .tabBar li.-active {
  border-bottom: 0;
}

.tabMenu.divided-bg .tabBar li.-active a {
  border-bottom: 1px solid var(--seaBlue);
  color: var(--seaBlue);
}

.tabPoPPanelOption+hr {
  margin-top: 1rem;
}

.tabPoPPanelContent .tabPoPPanelOption+hr+.pageRefreshBtn {
  padding-bottom: 0;
}


.tabMenu.tab-sizeS {
  margin-bottom: 0rem;
  padding: 0.5rem 0;
  height: 56px;
  margin-left: 0;
}

@media (max-width: 768px) {
  .tabMenu.divided-bg {
    display: none;
  }

  .tabSelect {
    display: none;
  }
}

@media (min-width: 768px) {
  .tabMenu.divided-bg li.tab {
    width: max-content;
    flex: 1;
  }

}

@media (min-width: 1260px) {
  .tabMenu.divided-bg li.tab {
    width: auto;
    flex: 0;
  }

  .tabMenu.divided-bg li.tab a {
    width: max-content;
  }

  .tabPoPPanelOption {
    display: none;
  }
}

.Tbaseline .tabPoPPanel[open] .pageRefreshBtn {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 1rem 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.Tbaseline .tabPoPPanel summary .closeTabPopBtn {
  display: none;
}

.Tbaseline .tabPoPPanel summary .closeTabPopBtn a:hover,
.Tbaseline .tabPoPPanel summary .closeTabPopBtn a:active {
  text-decoration: none;
  color: var(--seaBlue);
}

.Tbaseline .tabPoPPanel .mask {
  display: none;
}

.Tbaseline .tabPoPPanel .tabPoPPanelOption h2.Tbaseline {
  max-width: initial;
  margin-top: 0;
  padding: 0;
  margin-bottom: 2rem;
}

.Tbaseline .tabPoPPanel summary {
  font-weight: 400;
}

.Tbaseline .tabPoPPanel[open]>* {
  display: block;
}

.Tbaseline .tabPoPPanel[open] .closeTabPopBtn {
  position: fixed;
  right: 1rem;
  top: 2.35rem;
  background: #fff;
  z-index: 1100;
  padding-left: 1rem;
  font-size: 1rem;
  color: var(--seaBlue);
  padding-right: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.Tbaseline .tabPoPPanel[open] .mask {
  display: block;
}

@media (min-width: 1260px) {
  .Tbaseline .tabPoPPanel[open]>* {
    display: none;
  }

}

/*=====================^^^頁籤 包含標題頁籤 全站通用基本^^^===================================================*/


.spec {
  display: inline-flex;
  padding: 0.25rem 0.5rem;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: var(--p4FS);
  column-gap: 8px;
  position: relative;
  z-index: 100;
  height: 28px;
  box-sizing: border-box;
}

.spec>div {
  display: flex;
  align-items: flex-end;
  column-gap: 0.5rem;
  column-gap: 0.5rem;
  line-height: 1.125;
  border-right: 1px #fff solid;
  padding-right: 0.5rem;
}

.spec>div:last-child {
  border: 0;
  padding-right: 0;
}

.specification,
.specmath {
  position: relative;
  width: fit-content;
}

.specBg {
  padding: 0.25rem 0.5rem;
  justify-content: center;
  align-items: center;
  height: 28px;
  border-radius: 8px;
  background: #000000;
  opacity: 0.5;
  width: 100%;
  color: #ffffff;
  font-size: var(--p4FS);
  column-gap: 8px;
  position: absolute;
  top: 0px;
}

.spec span {
  display: none;
}

.spec [class^="icon-"],
.spec [class*=" icon-"] {
  font-size: 22px;
  margin-top: 0;
}

.specline {
  display: inline-block;
  margin-top: 2px;
  width: 1px;
  height: 1rem;
  background: #ffffff;
}

.spec.onlyEPUB>span:nth-child(1) {
  display: inline-flex;
}

.spec.onlyPDF>span:nth-child(3) {
  display: inline-flex;
}

.spec.onlyAudio>span:nth-child(5) {
  display: inline-flex;
}

.spec.EPUBandPDF>span:nth-child(1),
.spec.EPUBandPDF>span:nth-child(2),
.spec.EPUBandPDF>span:nth-child(3) {
  display: inline-flex;
}

.spec>div span {
  display: inline-flex;
  position: relative;
  font-family: Noto Sans TC;
  font-weight: 300;
}

.spec>div span.icon-vocal {
  top: 0;
}

.specmath .math {
  display: inline-flex;
  padding: 0.25rem 0.5rem;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: var(--p4FS);
  position: relative;
  z-index: 100;
  top: 2px;
}

/*頁碼*/


.pageMenu {
  font-size: 1.5rem;
  color: var(--G700);
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.5rem;
}

.pageMenu li a {
  font-size: 1.5rem;
  color: var(--G700);
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  background-color: #fff;
  padding: 0;
  border-radius: 0;
}

.pageMenu .page a {
  font-size: 1rem;
}

.pageMenu li a:link {
  font-size: 1.5rem;
  color: var(--G700);
}

@media (any-hover: hover) {

  .pageMenu li a:hover,
  .pageMenu li a.-active:hover {
    background-color: var(--seaBlue);
    color: #fff;
    text-decoration: none;
  }
}

.pageMenu li a.-active {
  background-color: var(--skyBlue);
  color: var(--G700);
}

.pageMenu li a.-disbale {
  background-color: #fff;
  color: var(--G300);
  cursor: text;
}

/*----------------元件初始化 a input txt和password textarea initial*/
/* width */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  border-radius: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f7fafc;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #e4ecf7;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #e4ecf7;
}

textarea,
input:matches([type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"]) {
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 12px 16px 8px 16px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--G100);
}

.cusTextarea textarea {

  border-radius: 0.5rem;
  box-shadow: 0px 2px 4px 0px #00000026 inset;
  border: 1px var(--G100) solid;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  outline: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 16px 8px 16px;
  align-items: center;
  text-overflow: clip;
  border-radius: 8px;
  border: 1px solid var(--G100);
  background: #fff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15) inset;
  font-size: 1rem;
  color: var(--G900);
  height: 2.5rem;
  text-align: left;
}

input[type="password"] {
  padding: 10px 40px 8px 16px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border-color: var(--seaBlue);
  outline: 0;
  background: #fff !important;
  box-sizing: border-box;
}

@media (any-hover: hover) {

  input[type="text"]:hover,
  input[type="password"]:hover,
  input[type="email"]:hover,
  input[type="url"]:hover,
  input[type="tel"]:hover textarea:hover {
    outline: 0;
  }
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder,
input[type="tel"]::placeholder {
  color: var(--G500);
}

input[type="text"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="url"]::-webkit-input-placeholder,
input[type="tel"]::-webkit-input-placeholder {
  /* Edge */
  color: var(--G500);
}

input[type="text"]::-ms-input-placeholder,
input[type="password"]::-ms-input-placeholder,
input[type="email"]::-ms-input-placeholder,
input[type="url"]::-ms-input-placeholder,
input[type="tel"]::-ms-input-placeholder {
  /* Edge */
  color: var(--G500);
}

.wrongAlert input[type="text"],
.wrongAlert input[type="password"],
.wrongAlert input[type="email"],
.wrongAlert input[type="url"],
.wrongAlert input[type="tel"],
.wrongAlert.cusSelect select,
.wrongAlert.cusTextarea textarea {
  border-color: var(--danger);
}

.wrongAlertWord {
  color: var(--danger);
  font-size: 0.875rem;
}

input.input-disabled {
  cursor: text;
  color: #e2e8f0;
}

.u-passwordInput,
.u-editInput {
  display: flex;
  align-items: center;
  position: relative;
}


/*------上傳檔案---*/

.uploadfileBtn input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  direction: ltr;
  cursor: pointer;
}

.uploadfileBtn .u-Btn {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.uploadfileBtn .u-Btn {
  text-decoration: none;
  cursor: pointer;
  background-color: transparent;

  text-decoration: none;
  box-sizing: border-box;
}

.uploadfileBtn .u-Btn input {
  width: 100%;
  height: 100%;
}

@media (any-hover: hover) {
  .uploadfileBtn .u-Btn:hover {
    border: 1px solid var(--seaBlue);
    background-color: var(--seaBlue);
    color: #ffffff;
  }
}


.passwordBtn {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100px;
  cursor: pointer;
  position: relative;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  text-align: center;
  font-size: 1.5rem;
  /* padding: 0.5rem; */
  position: absolute;
  right: 0px;
  top: 0px;
  box-sizing: border-box;
  line-height: 1.5;
}

@media (any-hover: hover) {
  .passwordBtn:hover .icon-hide:before {
    color: var(--G700) !important;
  }
}

.passwordBtn input:checked+.icon-hide:before {
  content: "\e999";
  color: var(--G700) !important;
}

.u-editInput textarea {
  background: var(--G100);
  border-radius: 8px;
  box-shadow: none;
  font-size: 1rem;
  padding-right: 50px;
  line-height: 1.5;
}

.u-editInput .clearBtn {
  position: absolute;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  top: 8px;
  border-radius: 100px;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  line-height: 0.2rem;
  cursor: pointer;
  color: var(--G700);
  text-decoration: none;
  display: inline-block;
  z-index: 400;
}

.editWordCount {
  color: var(--G700);
  font-size: 0.875rem;
  text-align: right;
}

.u-editInput .clearBtn button {
  width: 100%;
  height: 100%;
  padding: 0px;
}

/*.u-editInput textarea:focus+.clearBtn {
  display: inline-block;
}
*/

.searchFilterGroup input[type="text"]:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--G500);
}

.searchFilterGroup input[type="text"]::placeholder {
  color: var(--G500);
}

/*----------------  button radio  initial*/
.u-radio {
  display: inline-flex;
  align-items: center;
}

label .radioName,
label .checkboxName {
  cursor: pointer;
}

@media (any-hover: hover) {
  label:hover .radiobutton {
    border: 2px var(--skyBlue) solid;
  }

  label:hover .radiobutton.radiobutton-disabled {
    border-color: var(--G300);
    color: var(--G300);
    cursor: text;
  }

  label:hover .radiobutton.radiobutton-disabled+.radioName {
    cursor: text;
  }
}

input[type="radio"] {
  border: none;
  user-select: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  height: fit-content;
  padding: 0;
  width: fit-content;
  display: inline-block;
}

input[type="radio"]:disabled {
  cursor: text;
}

.radiobutton {
  width: 1.25rem;
  height: 1.25rem;
  box-sizing: border-box;
  display: inline-block;
  border: 2px var(--seaBlue) solid;
  margin: 0 5px 0 0;
  border-radius: 50%;
  transition: 0.2s;
  display: inline-block;
  vertical-align: middle;
}

@media (any-hover: hover) {
  .radiobutton:hover {
    border: 2px var(--skyBlue) solid;
  }
}

.radiobutton.radiobutton-disabled {
  border-color: var(--G300);
  cursor: text;
}

input[type="radio"]:checked+.radiobutton {
  border: 2px var(--skyBlue) solid;
  padding: 3px;
  background-color: var(--skyBlue);
  background-clip: content-box;
}

input[type="radio"]:checked+.radiobutton.radiobutton-disabled {
  border-color: var(--G300);
  background-color: var(--G300);
  cursor: text;
}

.radioName {
  display: inline-block;
  vertical-align: middle;
  padding-right: 0.5rem;
  position: relative;
  top: 2px;
}

.u-radio>label {
  display: flex;
}

.keyword {
  color: #cb0e0e;
}

.findmatchword {
  color: #538cfb;
}

input[type="checkbox"],
input[type="checkbox"]:checked {
  margin: 0px;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  -khtml-appearance: none;
  appearance: none;
  /* 防止文字被滑鼠選取反白 visibility: hidden;         width: 0px;
    height: 0px;*/
  display: none;
}


.cusCheck {
  display: inline-flex;
  align-items: flex-start;
}

.cusCheck .checkboxbutton {
  display: inline-block;
  background-color: #fff;
  border: 2px var(--seaBlue) solid;
  width: 1.25rem;
  height: 1.25rem;
  box-sizing: border-box;
  line-height: 0.5;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 4px;
  margin-right: 0.5rem;
  color: transparent;
}

@media (any-hover: hover) {
  .cusCheck:hover .checkboxbutton {
    border: 2px var(--skyBlue) solid;
  }
}

.cusCheck input[type="checkbox"]+.icon-check:before {
  color: #fff;
  text-align: center;
  font-size: 1.5rem;
  position: relative;
  line-height: 90%;
  left: -4px;
  top: -2px;
}

.cusCheck input[type="checkbox"]+.icon-noncheck:before {
  color: #fff;
  text-align: center;
  font-size: 1.125rem;
  position: relative;
  line-height: 90%;
  left: -1px;
  top: 0px;
}


.cusCheck input[type="checkbox"]:checked+.checkboxbutton {
  background-color: var(--skyBlue);
  border-color: var(--skyBlue);
}

.cusCheck input[type="checkbox"]:checked+.icon-check:before {
  color: #fff;
}

.cusCheck .checkboxName {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.875rem;
  color: var(--G700);
  line-height: 1.5;
}

.cusCheck input[type="checkbox"]:checked+.icon-noncheck:before {
  color: #fff;
}

/*共用*/
.cusCheck input[type="checkbox"]:disabled+.checkboxbutton {
  border-color: var(--G300);
  color: var(--G300);
  cursor: text;
  background: transparent;
  /**/
}

/*
.cusCheck input[type="checkbox"]:disabled+.checkboxbutton {
  border-color: var(--G300);
  color: var(--G300);
  cursor: text;
}
*/

.cusCheck input[type="checkbox"]:disabled+.checkboxbutton+.checkboxName {
  color: var(--G300);
  cursor: text;
}

.cusCheck input[type="checkbox"]:disabled+.checkboxbutton.icon-check:before {
  border-color: var(--G300);
  color: var(--G300);
  cursor: text;
}

.cusCheck input[type="checkbox"]:disabled+.checkboxbutton.icon-noncheck:before {
  border-color: var(--G300);
  color: var(--G300);
  cursor: text;
}

.cusCheck input[type="checkbox"]:disabled+.checkboxbutton+.checkboxName .titleTxt {
  color: var(--G300);
  cursor: text;
}

.cusCheck.-disabled input[type="checkbox"]:disabled+.checkboxbutton {
  border-color: var(--G300);
  color: var(--G300);
  cursor: text;
}

.cusCheck.-disabled input[type="checkbox"]:disabled .checkboxName {
  color: var(--G300);
  cursor: text;
}


/*share*/
.u-tap.cusTap input[type="checkbox"]{position: absolute;}
.cusTap {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.cusTap input[type="checkbox"]:disabled+[class^="icon-"]:before {
  cursor: text;
}

.cusTap input[type="checkbox"]+[class^="icon-"]:before {
  display: inline-block;
  color: var(--G700);
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  font-size: var(--h2FS);
  cursor: pointer;
}

.fanContent .cusTap .btnBg-M {
  padding: 0.5rem;
}

.cusTap input:checked+[class^="icon-"]:before {
  color: var(--seaBlue);
}

@media (any-hover: hover) {
  .cusTap:hover input[type="checkbox"]+[class^="icon-"]:before {
    color: var(--seaBlue);
  }

  .cusTap:hover input:checked:disabled+[class^="icon-"]:before {
    color: var(--seaBlue);
    content: "\e996";
  }

  .cusTap:hover input:disabled+[class^="icon-"]:before {
    color: var(--G700);
    content: "\e995";
  }
}


.cusTap input:checked+.g500-Outline-Bg [class^="icon-"]:before,
.cusTap input:checked+.g500-Outline-Bg .btnName {
  color: #fff;
}

.cusTap input:checked+.g500-Outline-Bg {
  border: 1px solid var(--seaBlue) !important;
  background-color: var(--seaBlue) !important;
}


.cusTap input:checked+.seaBlue-Bg [class^="icon-"]:before,
.cusTap input:checked+.seaBlue-Bg .btnName {
  color: #fff;
}

.cusTap input:checked+.seaBlue-Bg {
  border: 1px solid var(--skyBlue) !important;
  background-color: var(--skyBlue) !important;
}

.cusTap input:checked+.g500-Outline-Bg .icon-save_outline:before,
.cusTap input:checked+.icon-save_outline:before {
  content: "\e996";
}

@media (any-hover: hover) {

  .cusTap:hover .icon-save_outline:before,
  .cusTap:hover .g500-Outline-Bg .icon-save_outline:before {
    content: "\e996";
  }
}

/*tap*/

/*分享評分*/
.followBtn.-active .g500-Outline-Bg {
  border: 1px solid var(--seaBlue) !important;
  background-color: var(--seaBlue) !important;
}

.followBtn.-active .g500-Outline-Bg [class^="icon-"]:before,
.followBtn.-active .g500-Outline-Bg .btnName {
  color: #fff;
}

/*-------------------switch slider  initial*/
.switchbutton {
  display: inline-block;
  width: 2rem;
  height: 1rem;
  background: var(--G100);
  /* page shadow/page-inner */
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15) inset;
  border-radius: 100px;
  cursor: pointer;
  position: relative;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}

.switchbutton:after {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  background: #ffffff;
  /* page shadow/page 2 */
  box-shadow: 0px 3px 8px -1px rgba(0, 0, 0, 0.15);
  border-radius: 100px;
  position: absolute;
  left: 1px;
  top: 2px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}

input:checked+.switchbutton {
  background: var(--seaBlue);
  transition: 0.3s ease;
}

input:checked+.switchbutton:after {
  left: 1.125rem;
}

.cusSwitch {
  display: flex;
  height: 1rem;
}

select::-ms-expand {
  display: none;
}

option {
  font-size: 0.9375rem;
  padding: 2rem;
}

select {
  background-color: transparent;
  border: 1px transparent;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  -khtml-appearance: none;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  text-overflow: ellipsis;
}

.cusSelect {
  background-color: #ffffff;
  cursor: pointer;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  border-radius: 6px;
  position: relative;
  margin: auto;
  font-size: 1rem;
  text-align: left;
  height: 40px;
}

.cusSelect select {
  width: 100%;
  height: 100%;
  font-size: 1rem;
  text-align: left;
  min-height: 2.25rem;
  color: var(--G700);
  cursor: pointer;
  padding: 0.625rem;
  padding-left: 1rem;
  line-height: 1.5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 3px 8px -1px rgba(0, 0, 0, 0.15);
  border: 1px var(--G100) solid;
  padding-right: 2rem;
}

.cusSelect:after {
  position: absolute;
  content: "";
  right: 0.75rem;
  top: 1rem;
  font-size: 0.75rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 6.5px 0 6.5px;
  border-color: var(--G700) transparent transparent transparent;
  z-index: 1;
}

:focus {
  outline: none;
}

@media (any-hover: hover) {
  .cusSelect select:hover {
    box-shadow: 0px 0px 0px 2px #6b86ae80;
    /*border-color: var(--G700);*/
  }
}

.lineTen {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lineFive {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lineFour {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lineThree {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lineTwo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lineOne {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.asideBottom {
  display: none;
}

/*=====================無結果===================================================*/
.noResult {
  text-align: center;
}

.noResultTitle {
  text-align: center;
  color: var(--G900);
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 2rem;
}

.bottomBtn {
  position: fixed;
  z-index: 100;
  width: 320px;
  bottom: 0;
  height: 4rem;
  left: 0rem;
  text-align: center;
  background: #fff;
  padding: 1rem;
  box-shadow: 0px 3px 8px -1px rgba(0, 0, 0, 0.15);
}

.oopsContainer {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 1.5rem;
  width: 100%;
  row-gap: 4rem;
  margin: auto;
}

.oopsContainer .oopsTxt {
  max-width: 990px;
  margin: auto;
  font-size: 1.5rem;
  color: var(--G700);
  padding-top: 1rem;
}

.oopsImg img {
  width: 100%;
  height: 100%;
}

/*=====================^^^404^^^===================================================*/

/*===appBanner*/
.appBanner {
  height: 77px;
  position: sticky;
  top: 0px;
  z-index: 400;
  background-color: #f4f4f4;
  display: flex;
  gap: 8px;
  padding: 1rem;
  width: 100%;
  align-items: center;
}

.APPBannerHere {
  background-position: left center;
  background-repeat: no-repeat;
  height: 45px;
  width: 100%;
  order: 1;
}

.APPBannerHere img {
  height: 45px;
}

.appBanner_btn_close {
  /* margin-right: 7px; */
  width: 36px;
  height: 36px;
  background-position: center;
  background-repeat: no-repeat;
  color: rgba(0, 0, 0, 0);
  order: 0;
  padding: 6px;
  display: flex;
}

.appBanner_btn_close img {
  width: 24px;
  height: 24px;
}

.appBannerEnter,
.appBannerEnter:hover,
.appBannerEnter:link {
  height: 2.5rem;
  padding: 0.5rem 1.5rem;
  font-size: var(--p2FS);
  line-height: 1.65;
  border-radius: 0.5rem;
  display: inline-flex;
  min-width: max-content;
  column-gap: 0.25rem;
  justify-content: center;
  border: 1px solid var(--seaBlue);
  background-color: var(--seaBlue);
  color: #ffffff;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  height: 2.5rem;
  text-align: center;
  order: 2;
  text-decoration: none;
  /* position: absolute;*/
}

.appBanner+header {
  top: 77px;
}

.img_app_icon_m {
  display: block;
}

.img_app_icon_p {
  display: none;
}

@media (min-width: 768px) {

  .APPBannerHere {
    background-position: left center;
    background-repeat: no-repeat;
  }

  .img_app_icon_p {
    display: block;
  }

  .img_app_icon_m {
    display: none;
  }
}

@media (min-width: 1260px) {
  .appBanner {
    display: none;
  }

  .appBanner+header {
    top: 0px;
  }

  .img_app_icon_p {
    display: none;
  }

  .img_app_icon_m {
    display: none;
  }
}



/*===△△APPBanner*/


/*=====================分享️===================================================*/
/*喜歡各種形式*/
.shareMenu {
  display: flex;
  align-items: center;
}


.scoreMenu label,
.scoreSum label {
  float: right;
  position: relative;
  width: 32px;
  height: 32px;
  cursor: pointer;
  text-align: center;
  line-height: 1.25;
}

.scoreMenu label:before,
.scoreSum label:before {

  box-sizing: border-box;
  color: var(--G300);
  font-size: var(--h2FS);
}

.scoreMenu input,
.scoreSum input {
  display: none;
}


.scoreMenu input:checked~label:before {
  color: var(--seaBlue);
  content: "\e99b";
}


.scoreMenu:not(:checked)>label:hover:before,
.scoreMenu:not(:checked)>label:hover~label:before {}


.scoreSum input:checked~label:before {
  color: var(--seaBlue);
  content: "\e99b";
}

.scoreMenu input:disabled+label:hover:before {
  color: var(--G300);
  content: "\e99c";
}


.scoreSum label:hover {
  cursor: text;
}


.fb a {
  background-image: url('../images/fb_G900.svg');
  padding: 0;
  margin: 0;
  width: 2rem;
  height: 2rem;
  box-shadow: none;
  background-repeat: no-repeat;
  background-position: center center;
}

.ig a {
  background-image: url('../images/ig_G900.svg');
  padding: 0;
  margin: 0;
  width: 2rem;
  height: 2rem;
  box-shadow: none;
  background-repeat: no-repeat;
  background-position: center center;
}

.google a {
  background-image: url('../images/google_G900.svg');
  padding: 0;
  margin: 0;
  width: 2rem;
  height: 2rem;
  box-shadow: none;
  background-repeat: no-repeat;
  background-position: center center;
}

.line a {
  background-image: url('../images/line_G900.svg');
  padding: 0;
  margin: 0;
  width: 2rem;
  height: 2rem;
  box-shadow: none;
  background-repeat: no-repeat;
  background-position: center center;
}

.medium a {
  background-image: url('../images/medium_G900.svg');
  padding: 0;
  margin: 0;
  width: 2rem;
  height: 2rem;
  box-shadow: none;
  background-repeat: no-repeat;
  background-position: center center;
}

.wordpress a {
  background-image: url('../images/wordpress_G900.svg');
  padding: 0;
  margin: 0;
  width: 2rem;
  height: 2rem;
  box-shadow: none;
  background-repeat: no-repeat;
  background-position: center center;
}

.wechat a {
  background-image: url('../images/wechat_G900.svg');
  padding: 0;
  margin: 0;
  width: 2rem;
  height: 2rem;
  box-shadow: none;
  background-repeat: no-repeat;
  background-position: center center;
}

.link a {
  padding: 0;
  margin: 0;
  width: 2rem;
  height: 2rem;
  box-shadow: none;
  background-repeat: no-repeat;
  background-image: url('../images/link_G900.svg');
  background-position: center center;
}


.fb a:hover,
.fb a:active {
  background-image: url('../images/fb.svg');
}

.ig a:hover,
.ig a:active {
  background-image: url('../images/ig.svg');
}

.google a:hover,
.google a:active {
  background-image: url('../images/google.svg');
}

.line a:hover,
.line a:active {
  background-image: url('../images/line.svg');
}

.medium a:hover,
.medium a:active {
  background-image: url('../images/medium.svg');
}

.wordpress a:hover,
.wordpress a:active {
  background-image: url('../images/wordpress.svg');
}

.wechat a:hover,
.wechat a:active {
  background-image: url('../images/wechat.svg');
}

.link a:hover,
.link a:active {
  background-image: url('../images/link.svg');
}


.fb.-disable {
  background-image: url('../images/fb_G300.svg');
}

.ig.-disable {
  background-image: url('../images/ig_G300.svg');
}

.google.-disable {
  background-image: url('../images/google_G300.svg');
}

.line.-disable {
  background-image: url('../images/line_G300.svg');
}

.medium.-disable {
  background-image: url('../images/medium_G300.svg');
}

.wechat.-disable {
  background-image: url('../images/wechat_G300.svg');
}

.link.-disable {
  background-image: url('../images/link_G300.svg');
}

.shareMenu .cusIconBg {
  border: 1px solid transparent;
}

.phrasesTap {
  display: flex;
  column-gap: 0.5rem;
  flex-wrap: wrap;
  text-decoration: none;
  align-items: center;
  row-gap: 1rem;
}

/*.phrasesTap .u-phrasesInput {
  min-width: 200px;
}
*/

.phrasesTap input[type="text"].phrases {
  border: 1px dashed var(--G500);
  background-color: #ffffff;
  box-shadow: none;
  background-color: #ffffff;
  color: var(--G700);
  height: 2.5rem;
  display: inline-block;
  text-align: center;
  border-radius: 8px;
  font-size: 1rem;
  max-width: min-content;
  min-width: fit-content;
}

input[type="text"].phrases::placeholder {
  color: var(--G700);
}

input[type="text"].phrases:focus::-webkit-input-placeholder {
  color: transparent;
}

input[type="text"].phrases:focus:-moz-placeholder {
  color: transparent;
}

/* FF 4-18 */
input[type="text"].phrases:focus::-moz-placeholder {
  color: transparent;
}

/* FF 19+ */

@media (any-hover: hover) {
  .shareMenu .cusIconBg:hover {
    border: 1px solid var(--seaBlue);
  }

  .phrasesShowItem .seaBlue-Bg:hover {
    border: 1px solid var(--seaBlue);
    background-color: var(--seaBlue);
  }
}

/*=====================^^^分享^^^===================================================*/

/*=====================內文檢索文字框searchfilterInput.css===================================================*/
.searchFilterSection {
  max-width: 1230px;
  padding: 1.5rem 0;
  margin: auto;
}

.searchFilterResultSection {
  max-width: 1230px;
  padding-top: 2.5rem;
  margin: auto;
  display: flex;
  justify-content: flex-start;
}

.searchFilterResultSection .sum {
  color: var(--tan);
}

.searchFilterContent {
  text-align: center;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  row-gap: 1.5rem;
  column-gap: 1.5rem;
}

.searchFilterContent>div {
  display: inline-block;
  width: 100%;

  margin-left: auto;
  margin-right: auto;
}

.cusSearchInput input[type="text"]:hover {
  border-color: var(--skyBlue);
  cursor: pointer;
  background: #ffffff;
}

.u-searchInput {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  min-width: fit-content;
  height: fit-content;
  margin: auto;
}

.searchBtn {
  position: absolute;
  left: 0.25rem;
  margin-top: 0.25rem;
  top: 0rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 100px;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  line-height: 0.2rem;
  cursor: pointer;
  color: var(--G700);
  text-decoration: none;
  z-index: 888;
}

.searchcloseBtn {
  position: absolute;
  right: 0.25rem;
  margin-top: 0.25rem;
  top: 0rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 100px;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  line-height: 0.2rem;
  cursor: pointer;
  color: var(--G700);
  text-decoration: none;
  display: none;
  /**/
  z-index: 700;
}

.searchFilterContent .u-searchInput input[type="text"] {
  left: 0;
}

.searchFilterContent .searchBtn,
.searchFilterContent .searchcloseBtn {
  z-index: 200;
}

.u-searchInput .searchBtn button {
  width: 100%;
  height: 100%;
  padding: 0px;
}

.u-searchInput .searchcloseBtn button {
  width: 100%;
  height: 100%;
  padding: 0px;
}

.u-searchInput .searchBtn .icon-search {
  display: inline-block;

  width: 2rem;
  height: 2rem;
  line-height: 2rem;
}

.u-searchInput .searchcloseBtn .icon-close {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
}

.searchBtn .icon-search:before {
  color: var(--G700);
  font-size: var(--h2FS);
}

.searchcloseBtn .icon-close:before {
  color: var(--G700);
  font-size: var(--h2FS);
}

.searchFilterGroup input[type="text"]::-webkit-input-placeholder {
  /* Edge */
  color: var(--G500);
}

.searchFilterGroup input[type="text"]:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--G500);
}

.searchFilterGroup input[type="text"]::placeholder {
  color: var(--G500);
}

.searchFilterGroup input[type="text"]:focus {
  border-color: var(--skyBlue);
  color: var(--G900);
  background: #ffffff;
}

/*how to open*/
.searchFilterGroup input[type="text"]:focus+.searchcloseBtn {
  display: inline-block;
}

.searchFilterGroup input[type="text"]:not(:placeholder-shown)+.searchcloseBtn {
  display: inline-block;
}

.searchFilterGroup input[type="text"]:focus+.searchcloseBtn+.autocomplete {
  display: block;
}

@media (min-width: 768px) {
  .searchFilterResultSection {
    justify-content: flex-end;
  }

  .searchFilterGroup {
    max-width: 630px;
  }

  .searchFilterContent>div {
    display: inline-block;
    vertical-align: middle;
  }

  .searchFilterContent {
    flex-direction: row;
  }
}

@media (min-width: 1260px) {

  .searchShowBtn+label {
    display: none;
  }

  .searchFilterGroup input[type="text"]:focus+.searchcloseBtn+.autocomplete ul li.recentSearchDefault {
    display: block;
  }

  .searchFilterGroup input[type="text"]+.searchcloseBtn+.autocomplete ul li.recentSearchMobile {
    display: none;
  }

  .searchFilterGroup input[type="text"]:not(:placeholder-shown)+.searchcloseBtn+.autocomplete ul li.recentSearchDefault {
    display: none;
  }

}

/*=====================^^^內文檢索文字框searchfilterInput.css^^^===================================================*/

@media (min-width: 768px) {
  .Tbaseline .contentRefreshSel {
    display: none;
  }

  .Tbaseline .pageRefreshBtn {
    display: inline-block;
  }

  .oopsContainer p {
    font-size: 2rem;
  }
}

@media (min-width: 1260px) {
  .breadWrap {
    top: 121px;
    padding: 0 4rem;
    margin-top: 122px;
  }

  aside {
    text-align: left;
    min-width: 320px;
    width: max-content;
    float: left;
    border-right: 1px var(--G300) solid;

    height: 100%;
  }

  .asideBottom {
    width: 100%;
    position: absolute;
    height: 4rem;
    left: 1px;
    background: #fff;
    bottom: 0;
    display: block;
    border-right: 1px #fff solid;
    z-index: 300;
    box-sizing: initial;
  }

  .toggleMoreBtn>*,
  .pageRefreshBtn>*,
  .moreFeedBackBtn>* {
    width: fit-content;
    margin: auto;
  }

  .breadSet {
    padding: 0;
  }

  .Tbaseline .contentRefreshSel {
    display: none;
    width: fit-content;
  }

  .Tbaseline .pageRefreshBtn {
    display: inline-block;
    width: fit-content;
  }

  .oopsContainer {
    width: max-content;
    row-gap: 0rem;
  }

  .oopsContainer .oopsTxt {
    position: relative;
    top: 2rem;
  }
}