/*=========== public ===========*/
body div#Content {
  position: relative;
  z-index: 1;
}

/*=========== popyp view ===========*/
.popup_view_wrap * {
  box-sizing: border-box;
}
.popup_view_wrap {
  position: fixed;
  display: flex;
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 100000;
}
.popup_view {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  padding: 0 48px 32px;
  background-color: #f7f7f7;
  border-radius: 4px;
}
.popup_view .title {
  font-size: 1.25rem;
  line-height: 64px;
  text-align: center;
}
.popup_view .text {
  min-height: 64px;
  margin: 16px 0;
}
.popup_view .opction_wrap {
  display: flex;
}
.popup_view .opction_wrap select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding: 10px;
    padding-right: 10px;
  margin: 0px 5px 0px 0px;
  border: 1px solid #ebebeb;
  box-sizing: border-box;
  border-radius: 3px;
  padding-right: 25px;
  background: url("../images/edit_arrow.png") no-repeat right center transparent;
    background-color: transparent;
  background-color: transparent;
  background-color: #f7f7f7;
  max-width: 200px;
  cursor: pointer;
  width: 75%;
}
.popup_view .opction_wrap select:nth-of-type(1) {
  margin-left: 0;
}
.popup_view .opction_wrap option {
  line-height: 40px;
  text-align: center;
}
.popup_view .opction_wrap option:hover ,
.popup_view .opction_wrap option:focus ,
.popup_view .opction_wrap option:active {
  background-color: #EDE7E0;
}
.popup_view .fuction_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
}
.popup_view .fuction_wrap .btn_cancel ,
.popup_view .fuction_wrap .btn_edit ,
.popup_view .fuction_wrap .btn_submit {
  display: none;
  justify-content: center;
  align-items: center;
  width: max-content;
  margin: 0 auto;
  padding: 8px 24px;
  vertical-align: top;
  border-radius: 5px;
  background-color: #9C8A72;
  color: var(--G00);
  cursor: pointer;
}
.popup_view .fuction_wrap .btn_cancel:hover ,
.popup_view .fuction_wrap .btn_edit:hover ,
.popup_view .fuction_wrap .btn_submit:hover {
  background-color: #7C6546;
}
.popup_view .fuction_wrap .btn_cancel:active ,
.popup_view .fuction_wrap .btn_edit:active ,
.popup_view .fuction_wrap .btn_submit:active {
  background-color: #9C8A72;
}
.popup_view_wrap h2.title {
  font-weight: 700 !important;
}
.popup_view_wrap .bg_mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35);
}
/*成人書籍-詳目頁*/
.popup_view_wrap.rating_alert {
  display: flex;
}
.popup_view_wrap.rating_alert .popup_view {
  transform: translateY(-18%);
  width: calc(100% - 32px);
  max-width: 480px;
  padding: 0 0 16px;
}
.popup_view_wrap.rating_alert .popup_view .title {
  background-color: #EDE7E0 ;
  border-radius: 5px 5px 0 0;
}
.popup_view_wrap.rating_alert .popup_view .text {
  padding: 0 48px;
  letter-spacing: 1px;
}
.popup_view_wrap.rating_alert .popup_view .text::before {
  content: "警告，本商品為限制級商品，限年齡18歲以上瀏覽，請填寫您生日";
}
.popup_view_wrap.rating_alert .popup_view .opction_wrap {
  padding: 0 48px;
  line-height: 40px;
}
.popup_view_wrap.rating_alert .fuction_wrap .btn_submit {
  display: inline-flex;
}
/*成人書籍-購物車*/
.popup_view_wrap.rating_alert.uncheck .popup_view{
  padding: 0 0 32px;
}
.popup_view_wrap.rating_alert.uncheck .popup_view .title {
  background-color: #EDE7E0 ;
  border-radius: 5px 5px 0 0;
}
.popup_view_wrap.rating_alert.uncheck .popup_view .text::before {
  content:"購物車內含有成人商品，您尚未填寫生日資訊，請點擊以下按鈕或至會員中心→修改會員資料新增生日資訊";
}
.popup_view_wrap.rating_alert.uncheck .popup_view select,
.popup_view_wrap.rating_alert.uncheck .popup_view .opction_wrap ,
.popup_view_wrap.rating_alert.uncheck .popup_view .btn_submit {
  display: none;
}
.popup_view_wrap.rating_alert.uncheck .popup_view .btn_edit {
  display: flex;
}
.popup_view_wrap.rating_alert.underage .popup_view .text::before {
  content:"部分商品因限定18歲以上購買，已自購物車移除";
}
.popup_view_wrap.rating_alert.underage .popup_view select,
.popup_view_wrap.rating_alert.underage .popup_view .opction_wrap ,
.popup_view_wrap.rating_alert.underage .popup_view .btn_submit {
  display: none;
}
.popup_view_wrap.rating_alert.underage .popup_view .btn_submit {
  display: flex;
}
/*重新加入判斷-會員專區*/
.popup_view > span.close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.popup_view > span.close i::before ,
.popup_view > span.close i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 20px;
  background-color: var(--G500);
  content: "";
}
.popup_view > span.close:hover i::before ,
.popup_view > span.close:hover i::after {
  background-color: var(--PFC);
}
.popup_view > span.close i::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
.popup_view > span.close i::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}
.popup_view_wrap.noporoduct {
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: rgba(0, 0, 0, 0.15);
}
.popup_view_wrap.noporoduct .popup_view {
  max-width: 320px;
  padding: 0;
  box-shadow: 1px 1px 4px 1px #ccc;
}
.popup_view_wrap.noporoduct .popup_view span.close {
  top: 0.25rem;
  right: 0.25rem;
}
.popup_view_wrap.noporoduct .popup_view p.text {
  line-height: 64px;
  text-align: center;
}
/*重新加入判斷-詳目頁*/
/*Popup View*/
.popup_view_wrap.poroduct_status {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.popup_view_wrap.poroduct_status .popup_view {
  position: relative;
  z-index: 2;
  width: calc(100% - 32px);
  max-width: 560px;
  min-height: 200px;
  max-height: 90dvh;
  margin: 0 auto;
  padding: 0 0 24px 0;
  overflow: hidden;
}
.popup_view_wrap.poroduct_status .popup_view > div {
  height: fit-content;
  min-height: 200px;
  max-height: 560px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.popup_view_wrap.poroduct_status .popup_view label[for="poroduct_status"].btn {
  position: absolute;
  top: 14px;
  right: 12px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
}
.popup_view_wrap.poroduct_status .popup_view span.btn_close {
  display: flex;
  justify-self: center;
  align-items: center;
  width: 24px;
  height: 24px;
}
.popup_view_wrap.poroduct_status .popup_view span.btn_close::before,
.popup_view_wrap.poroduct_status .popup_view span.btn_close::after {
  content: "";
  position: absolute;
  display: block;
  width: 18px;
  height: 2px;
  background-color: var(--G700);
  transform: rotate(45deg);
}
.popup_view_wrap.poroduct_status .popup_view span.btn_close::after {
  transform: rotate(-45deg);
}
.popup_view_wrap.poroduct_status label.mark {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.popup_view_wrap.poroduct_status .popup_view h2 {
  margin: 0 0 16px;
  text-align: center;
  line-height: 58px;
  font-size: 20px;
  font-weight: 700 !important;
  color: var(--G700);
  background-color: var(--OC1);
}
.popup_view_wrap.poroduct_status .popup_view .opction_wrap {
  display: none;
  margin: 0;
}
.popup_view_wrap.poroduct_status.update-price .opction_wrap.price {
  display: block;
}
.popup_view_wrap.poroduct_status.update-stock .opction_wrap.unable-buy {
  display: block;
}
.popup_view_wrap.poroduct_status.update-purchased .opction_wrap.purchased {
  display: block;
}
.popup_view_wrap.poroduct_status .popup_view .opction_wrap .msg-title {
  display: block;
  width: calc(100% - 40px);
  margin: 8px auto 0;
  color: var(--OC2);
}
.popup_view_wrap.poroduct_status .popup_view .opction_wrap .list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: calc(100% - 40px);
  margin: 8px auto 0;
}
.popup_view_wrap.poroduct_status .popup_view .opction_wrap .book-title {
  font-weight: 700 !important;
}
/*404 error*/
.popup_view_wrap.error_404 {
  position: absolute;
  transform: translateY(-4px);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--G50);
  width: 100dvw;
  height: 100dvh;
  min-height: 800px;
  max-height: calc(100dvh - 40px);
  padding: 24px 12px;
  box-sizing: border-box;
  overscroll-behavior: contain;
}
.popup_view_wrap.error_404 > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
  height: 100%;
  padding: 30px 16px;
  background-color: var(--G00);
  box-shadow: 0px 3px 6px #2e2e2e49;
}
.popup_view_wrap.error_404 > div h2 {
  font-weight: 700 !important;
  font-size: 24px;
  color: var(--G700);
  text-align: center;
}
.popup_view_wrap.error_404.result > div h2 {
  font-weight: 400 !important;
}
.popup_view_wrap.error_404.result > div h2 strong,
.popup_view_wrap.error_404.result > div h2 span {
  margin: 0 4px;
  color: var(--OC2);
}
.popup_view_wrap.error_404 > div a {
  color: var(--PTC);
}
.popup_view_wrap.error_404 > div p {
  color: var(--G700);
}
.popup_view_wrap.error_404.result ~ main.prodsInterface {
  min-height: 800px;
}
/*=========== header ===========*/
.headerWrap{
  position: sticky;
  top: 0;
  z-index: 99999;
  width: 100%;
  /* height: clamp(105px , fit-content , 105px); */
  padding: 0;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 1px 1px 4px 1px #ccc;
}
.headerSet{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  max-width: 1366px;
  margin: 0 auto 4px;
}
.headerHbg{
  display: block;
  float: left;
  margin: 0px 5px;
}
.headerHbg  button{ width: 40px; height: 40px; margin-top: 2px;background: none;}
.headerHbg  button > img{ width: 85%; }
.logoSet{
  float: left;
  width: 145px;
  margin-left: -5px;
}
.headerSet .logoSet h1 {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.logoSet img {
  width: 100%;
  max-width: 200px;
}
/*==member view*/
.member-view {
  position: fixed;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100dvh;
  z-index: 550;
  display: none;
}
.member-view.active {
  display: flex;
}
.member-skin {
  position: relative;
  top: -50px;
  z-index: 5;
  width: 100%;
  max-width: 320px;
  height: max-content;
  margin: 0px auto;
  padding: 12px;
  text-align: center;
  background-color: var(--G50);
  border-radius: 26px;
  box-shadow: 2px 5px 7px 0px #00000014;
  box-sizing: border-box;
}
.view-content {
  position: relative;
  padding: 12px;
  background-color: var(--G00);
  border-radius: 20px;
}
.bg-mark {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.15);
}
.user-account {
  display: block;
  margin: 0px 0px 12px;
  font-size: 12px;
  line-height: 1.4;
}
.member-skin p {
  margin-bottom: 6px;
  line-height: 1.5;
}
.member-skin span.bonuspoint ,
.member-skin span.ecoupon {
  display: inline-block;
  margin: 0px 8px;
  vertical-align: top;
  color: #DB4200;
  overflow-x: hidden;
}
.goto-member {
  position: relative;
  width: 130px;
  margin: 12px auto 24px;
  padding: 0px;
  text-align: center;
  line-height: 32px;
  border: 1px solid var(--G500);
  border-radius: 6px;
  cursor: pointer;
}
.member-skin .hr {
  position: absolute;
  left: 0px;
  transform: translateY(-2px);
  display: block;
  width: 100%;
  height: 4px;
  background-color: var(--G50);
}
.btn-download ,
.btn-buylater,
.btn-logout {
  position: relative;
  padding: 12px 24px;
}
.btn-logout {
  padding: 12px 36px;
}
.btn-download a ,
.btn-buylater a ,
.btn-logout p {
  position: relative;
  display: block;
  margin-bottom: 0px;
  padding-left: 48px;
  text-align: left;
  line-height: 32px;
  color: var(--G500) !important;
  cursor: pointer;
}
.btn-download a::before ,
.btn-buylater a::before ,
.btn-logout p::before {
  content: "";
  position: absolute;
  left: 0px;
  width: 32px;
  height: 32px;
  background-position: center;
  background-size: 32px;
  background-repeat: no-repeat;
}
.btn-download a::before {
  background-image: url('../images/iconset/icon_download_n.png');
}
.btn-buylater a::before {
  background-image: url('../images/iconset/icon_bookmark_n.png');
}
.btn-logout p::before {
  background-image: url('../images/iconset/icon_logout_n.png');
}
/*.btn-download:hover a::before {
  background-image: url('../images/iconset/icon_download_h.png');
}
.btn-buylater:hover a::before {
  background-image: url('../images/iconset/icon_bookmark_h.png');
}
.btn-logout:hover p::before {
  background-image: url('../images/iconset/icon_logout_h.png');
}*/

/*==searchbar*/
.searchBlock {
  position: absolute;
  top: 42px;
  z-index: 1;
  width: 100%;
  display: block;
  background-color: var(--G00);
  border-top: 1px solid var(--G300);
  display: none;
}
.searchBlock.active {
  display: block;
}
.searchBlock.active::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.15);
}
.searchBar-wrap {
  position: relative;
  z-index: 1;
  padding: 8px;
  box-sizing: border-box;
  background-color: var(--G00);
}
.searchBar-wrap > input {
  width: 100%;
  max-width: calc(100% - 136px);
  padding: 0px 4px 0px 16px;
  box-sizing: border-box;
  line-height: 38px;
  border: 1px solid #9C8A72;
  ;
  background-color: var(--G00);
}
.search-fuction {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
}
.advancedSearchBtn {
  line-height: 38px;
  padding: 0px 8px 0px 0px;
  box-sizing: border-box;
  background-color: var(--G00);
  border-top: 1px solid #9C8A72;
  border-bottom: 1px solid #9C8A72;
  cursor: pointer;
}
.advancedSearchBtn::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: -4px;
  vertical-align: middle;
  background-image: url(../images/edit_arrow.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.advancedSearchBtn.active::after {
  transform: rotate(180deg);
}
.search-fuction span#searchGoBtn {
  display: block;
  width: 40px;
  height: 38px;
  border: 1px solid #9C8A72;
  background-color: #9C8A72;
  background-position: center;
  background-size: 90%;
  background-repeat: no-repeat;
  background-image: url(../images/header-search-icon-w.png);
  cursor: pointer;
}
.search.btn input {
  position: absolute;
  width: 100%;
  height: 100%;
}

/*==history*/
.history-skin {
  position: relative;
  z-index: -1;
  opacity: 0;
  display: block;
  height: max-content;
  padding: 0px 16px;
  background-color: var(--G00);
  box-shadow: -1px 4px 5px -2px var(--G400);
  transition: ease 0.35s;
}
.history-skin > p {
  display: flex;
  justify-content: space-between;
  color: var(--G400);
  line-height: 1;
  display: none;
}
.history-skin > p span.clearSearchList {
  text-decoration: underline;
  color: var(--G500);
  cursor: pointer;
}
.history-skin > p span.clearSearchList:hover {
  color: #7C6546;
}
.history-skin ul {
  max-height: 360px;
  margin-top: 8px;
  overflow-y: hidden;
  display: none;
}
.history-skin ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 45px;
}
.history-skin ul li > p {
  position: relative;
  padding-left: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
  cursor: pointer;
}
.history-skin ul li > p:hover {
  color: #7C6546;
}
.history-skin ul li > p::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url(../images/icon_clock_n.png) no-repeat center;
  background-size: 72%;
}
.history-skin ul li span.clearSearchItem {
  display: block;
  width: 32px;
  height: 32px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../images/od_di_close.png);
  cursor: pointer;
}
.history-skin ul li span.clearSearchItem:hover {
  background-image: url(../images/od_di_close-h.png);
}
/*.searchBar-wrap input[type='text']:focus ~ .history-skin,*/
.searchBar-wrap input[type='text'].focus ~ .history-skin {
  z-index: 1;
  opacity: 1;
  padding: 12px 16px;
}
  /*.searchBar-wrap input[type='text']:focus ~ .history-skin > p ,*/
.searchBar-wrap input[type='text'].focus ~ .history-skin > p {
    display: flex;
}
/*.searchBar-wrap input[type='text']:focus ~ .history-skin ul,*/
.searchBar-wrap input[type='text'].focus ~ .history-skin ul {
    display: block;
}
/*====advanced-search*/
.advanced-skin {
  position: absolute;
  transform: translateY(0px);
  z-index: -1;
  opacity: 0;
  display: block;
  width: calc(100% - 32px);
  height: 0;
  padding: 0px 16px;
  background-color: var(--G00);
  border-radius: 0px;
  box-shadow: -1px 4px 5px -2px var(--G400);
  transition: ease 0.35s;
  overflow-y: hidden;
}
.advanced-skin label {
  display: none;
  padding: 12px;
}
.advanced-skin label span {
  display: inline-block;
  min-width: 90px;
  line-height: 28px;
}
.advanced-skin label input {
  width: calc(100% - 90px);
  padding-left: 8px;
  border: 1px solid var(--G500);
  box-sizing: border-box;
  line-height: 28px;
}
.advanced-skin.active {
  opacity: 1;
  z-index: 1;
  height: max-content;
  padding: 24px 16px 12px;
  width: calc(100% - 32px);
}
.advanced-skin.active label {
  display: flex;
}
.advanced-fuction {
  display: flex;
  justify-content: end;
  height: 0;
  margin: 16px 0px 0px;
}
.advanced-skin.active .advanced-fuction {
  height: max-content;
}
.btn-advanced.cancel ,
.btn-advanced.submit {
  display: block;
  width: max-content;
  margin-right: 16px;
  padding: 8px 12px;
  font-size: 1rem;
  line-height: 1;
}
.btn-advanced.cancel {
  color: var(--G700);
  background-color: transparent;
  border: 1px solid var(--G700);
}
.btn-advanced.cancel:hover {
  color: #9C8A72;
  background-color: transparent;
  border: 1px solid #9C8A72;
}
.btn-advanced.cancel > span::before {
  content: "重設";
  display: block;
}
.btn-advanced.submit {
  background-color: #9C8A72;
  border: 1px solid #9C8A72;
}
.btn-advanced.submit:hover {
  background-color: #7C6546;
}
.btn-advanced.submit > span::before {
  content: "搜尋";
  display: block;
}
/*==tool bar*/
.toolBar {
  position: absolute;
  right: 12px;
  width: max-content;
}
.toolBar ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: max-content;
}
.toolBar ul li {
  position: relative;
  display: block;
  width: max-content;
  height: max-content;
  margin-left: 4px;
}
.toolBar ul li span {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 32px;
}
.toolBar ul li.search span img {
  display: none;
}
.toolBar ul li.login::after {
  display: inline-block;
  width: 24px;
  height: 32px;
  margin-right: -8px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../images/iconset/icon_pointdown_n.png');
}
.toolBar ul li.login > p {
  margin-left: 4px;
  line-height: 30px;
  display: none;
}
.cart strong{
  font-size: 0.55rem;
  position: absolute;
  bottom: 1px;
  right: -1px;
  color: #fff;
  background: #DB4200;
  width: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 10px;
}
.searchIcon {
  background-image: url('../images/iconset/icon_search_nb.png');
}
.memberIcon{
  background-image: url('../images/iconset/icon_account_circle_n.png');
}
.active .memberIcon {
  background-image: url('../images/iconset/icon_account_circle_h.png');
}
.cartIcon{
  background-image: url('../images/iconset/icon_cart_n.png');
}
.bookcaseIcon{
  background-image: url('../images/iconset/icon_ebook_n.png');
}
.toolBar ul li:hover .searchIcon {
  background-image: url('../images/iconset/icon_search_h.png');
}
.toolBar ul li:hover .memberIcon {
  background-image: url('../images/iconset/icon_account_circle_h.png');
}
.toolBar ul li.login:hover:after {
  background-image: url('../images/iconset/icon_pointdown_h.png');
}
.toolBar ul li:hover .cartIcon {
  background-image: url('../images/iconset/icon_cart_h.png');
}
.toolBar ul li:hover .bookcaseIcon{
  background-image: url('../images/iconset/icon_ebook_h.png');
}
.btn input {
  position: absolute;
  width: 100%;
  height: 100%;
}
.toolBar-word{ display: none; }
/*==navmenu*/


@media (min-width: 768px) {
  /*成人書籍-詳目頁*/
  .popup_view_wrap.rating_alert .popup_view {
    width: 100%;
  }
  /*=========== header /*===========*/
  .logoSet {
    width: 180px;
    margin: 0px;
    margin-left: 0px;
    padding: 16px 0px;
  }
  /**==member view/
  /*==searchbar*/
  .searchBlock {
    top: 66px;
  }
  /*====history*/
  /*====advanced-search*/
  /*==tool bar*/
  .toolBar {
    padding: 12px 0 0 0;
  }
  .toolBar ul li {
    display: flex;
    flex-direction: row;
    margin: 0px;
    border: 1px solid transparent;
    padding: 0px 16px 0px 8px;
    border-radius: 30px;
  }
  .toolBar ul li:hover {
    color: #9C8A72;
    border: 1px solid #9C8A72;
  }
  .toolBar ul li span {
    width: 32px;
    height: 32px;
  }
  .toolBar ul li:hover > a {
    color: #9C8A72;
  }
  .toolBar ul li.login::after {
    content: "";
  }
  .memberIcon {
    margin-left: -8px;
  }
  .toolBar-word {
    display: inline-block;
    line-height: 32px;
  }
  .toolBar ul li.search {
    padding: 0px;
  }
  .toolBar ul li.search:hover {
    border: 1px solid transparent;
  }
  .searchIcon ~ a.toolBar-word {
    display: none;
  }
  /*====未登入狀態*/
  .toolBar ul li.non-login {
    cursor: auto;
  }
  .toolBar ul li.non-login:hover {
    border: 1px solid #9C8A72;
  }
  .toolBar ul li.non-login:hover .memberIcon {
    background-image: url('../images/iconset/icon_account_circle_h.png');
  }
  .toolBar ul li.non-login > p {
    display: block;
    color: var(--G500);
  }
  .toolBar ul li.non-login > a.toolBar-word {
    display: none;
  }
  .toolBar ul li.non-login::after {
    display: none;
  }
  .toolBar ul li.non-login:hover a {
    color: #9C8A72;
  }
  .toolBar ul li.non-login.active ,
  .toolBar ul li.non-login:active {
    background-color: #9C8A72;
    border: 1px solid #9C8A72;
  }
  .toolBar ul li.non-login.active p,
  .toolBar ul li.non-login:active p,
  .toolBar ul li.non-login.active a,
  .toolBar ul li.non-login:active a {
    color: var(--G00) !important;
  }
  /*====登入狀態*/
  .toolBar ul li.active ,
  .toolBar ul li:active {
    background-color: #9C8A72;
  }
  .toolBar ul li.active a ,
  .toolBar ul li:active a {
    color: var(--G00);
  }
  .toolBar ul li.active .searchIcon ,
  .toolBar ul li:active .searchIcon {
    background-image: url('../images/iconset/icon_search_n.png');
  }
  .toolBar ul li.active .memberIcon ,
  .toolBar ul li:active .memberIcon {
    background-image: url('../images/iconset/icon_account_circle_a.png');
  }
  .toolBar ul li.active .cartIcon ,
  .toolBar ul li:active .cartIcon {
    background-image: url('../images/iconset/icon_cart_a.png');
  }
  .toolBar ul li.active .bookcaseIcon ,
  .toolBar ul li:active .bookcaseIcon {
    background-image: url('../images/iconset/icon_ebook_a.png');
  }
  .toolBar ul li.login.active::after ,
  .toolBar ul li.login:active::after {
    background-image: url('../images/iconset/icon_pointup_n.png');
  }
  .toolBar ul li.login.active .memberIcon ,
  .toolBar ul li.login:active .memberIcon {
    background-image: url('../images/iconset/icon_account_circle_a.png') !important;
  }
  /*==navmenu*/
}

@media (min-width: 769px) {
  /*=========== header /*===========*/
  .headerSet {
    justify-content: space-between;
    min-height: 40px;
  }
  .headerHbg {
    display: none;
  }
  .logoSet {
    float: inherit;
    width: 180px;
    margin: 0px;
    padding: 12px 0px 0 24px;
  }
  /*==member view*/
  /*==searchbar*/
  .searchBlock {
    top: 90px;
  }
  /*====history*/
  /*====advanced-search*/
  /*==tool bar*/
  /*==navmenu*/
}

@media (min-width: 1101px) {
  /*404 error */
  .popup_view_wrap.error_404 {
    max-height: calc(100dvh - 220px);
    padding: 24px 20px;
  }
  /*=========== header /*===========*/
  .headerWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    container: member-view / inline-size;
  }
  .headerSet {
    height: 64px;
    margin: 0;
    padding: 0 1rem;
    box-sizing: border-box;
  }
  .logoSet {
    width: 400px;
    margin: 0;
    padding: 16px 0;
  }
  .logoSet img {
    max-width: 220px;
  }
  .toolBar {
    padding: 0;
  }
  .mainMenu {
    display: flex;
    align-items: center;
    height: 60px;
  }
  /*==member view*/
  .member-view {
    position: absolute;
    top: 88px;
    right: 24px;
    width: 280px;
    height: max-content;
  }
  @container member-view (inline-size >= 1366px) {
    .headerWrap .member-view {
      right: 50%;
      transform: translateX(calc(50% + 1366px / 2 - 150px));
    }
  }
  .member-skin {
    position: relative;
    top: 0px;
  }
  .member-view .bg-mark {
    display: none;
  }
  /*==searchbar*/
  .searchBlock {
    position: relative;
    top: inherit;
    right: inherit;
    z-index: 500;
    display: block;
    width: 100%;
    max-width: inherit;
    margin: 0px 12px;
    border-radius: 5px;
    background-color: transparent;
    border-top: none;
  }
  .searchBlock.active::after {
    display: none;    
  }
  .searchBar-wrap {
    border-radius: 5px;
    border: 1px solid transparent;
  }
  .searchBar-wrap > input {
    border-radius: 5px 0px 0px 5px;
    background-color: var(--G00);
    border: 1px solid var(--G500);
    outline-style: inherit;
  }
  .advancedSearchBtn {
    background-color: var(--G00);
    border-top: 1px solid var(--G500);
    border-bottom: 1px solid var(--G500);
  }
  .search-fuction span#searchGoBtn {
    background-color: var(--G500);
    border-color: 1px solid var(--G500);
    border-radius: 0 4px 4px 0;
  }
  /*====history*/
  .history-skin {
    position: absolute;
    transform: translateY(3px);
    width: calc(100% - 32px);
  }
  /*====advanced-search*/
  .advanced-skin {
    transform: translateY(3px);
  }
  /*==tool bar*/
  .toolBar {
    position: relative;
    right: inherit;
    margin: 0px;
  }
  .toolBar ul {
    gap: 4px;
  }
  .toolBar ul li {
    margin: 0px;
  }
  .toolBar ul li.search {
    display: none;
  }
  .toolBar-word {
    margin: 0px;
    line-height: 30px;
  }
  /*==navmenu*/
}