.slickBtnBox{display:-ms-flexbox;display:flex;pointer-events:none}
.slickBtnBox .slickBtn{width: 40px;height: 40px;border-radius:50%;background:linear-gradient(to top,#000000 0%,#000000 100%);color:#000000;padding:1px;cursor:pointer;pointer-events:auto;position:relative;transition:all 0.5s}
.slickBtnBox .slickBtn .icon{width:20px;height:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.slickBtnBox .slickBtn .icon svg{width:20px;height:20px;fill:var(--white)}
.slickBtnBox .slickBtn::before{content:"";display:block;width:100%;height:100%;background:#000000;border-radius:50%;transition:all 0.5s;position:relative;z-index:1}
.slickBtnBox .slickBtn .iconBox{width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:absolute;top:0;left:0;z-index:2}
.slickBtnBox .slickBtn .iconBox .icon{position:relative;z-index:2}
.slickBtnBox .slickBtn.arrowPrev{margin-right:10px}
#book_area{background:url(/images/39/img-b-bg.png) no-repeat;background-position:50% 0%;background-size: contain;padding: 3vw 0 2vw 0;}
#book_area .workframe{width:min(1340px,100%)}
#book_area .title_box{display:flex;justify-content:space-between;align-items:flex-start}
.bookArea .bookList *,.bookArea .bookList *::before,.bookArea .bookList *::after{box-sizing:border-box;}
.bookArea{padding:80px 0 161px;position:relative}
.bookArea html,.bookArea figure,.bookArea audio{margin:0}
.bookArea .wrap{width:100%;max-width:1480px;margin:0 auto;padding-left:50px;padding-right:50px}
.bookArea .decoImg{position:absolute;top:5px;left:0;width:23.07vw}
.bookArea .decoImg .light{position:absolute;top:0;left:0;width:100%;height:100%}
.bookArea .decoImg .light .img1{-webkit-clip-path:polygon(0 0,0 0,0 100%,0% 100%);clip-path:polygon(0 0,0 0,0 100%,0% 100%);-webkit-animation:mask4Ani 5s infinite linear;animation:mask4Ani 5s infinite linear}
.bookArea .mouseIcon{position:fixed;z-index:2;opacity:0;pointer-events:none;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:opacity 0.5s;width:100px}
.bookArea .mouseIcon.show{opacity:1}
.bookArea .titleBox{margin:0 0 43px 1px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}
.bookArea .titleBox .leftBox{width:380px}
.bookArea .titleBox .leftBox .title{margin-bottom:5px}
.bookArea .titleBox .leftBox .decoTitle{line-height:1.17}
.bookArea .titleBox .centerBox{width:calc(100% - 580px);padding:35px 20px 0}
.bookArea .titleBox .centerBox .text{max-width:450px}
.bookArea .titleBox .rightBox .btnBox{margin-top:0}
.bookArea .bookBox{position:relative}
.bookArea .bookList{min-height:620px;cursor:-webkit-grab;cursor:grab}
.bookArea .bookList:not(.slick-slider) .bookItem{width:50%}
.bookArea .bookList .slick-list{overflow:visible}
.bookArea .bookItem{padding:10.875rem 65px 0 106px;transition:all 0.5s 0.1s}
.bookArea .bookItem .item{position:relative}
.bookArea .bookItem .item .linkWrap{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}
.bookArea .bookItem .Img{transition:all 0.5s;padding: 0;position:relative;overflow:hidden;border-radius:30px}
.bookArea .bookItem .Img::before{content:"";display:block;background:linear-gradient(to right,#dfdfdf 0%,#b2b2b2 100%);width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;border-radius:30px;overflow:hidden;opacity:0;transition:all 0.8s}
.bookArea .bookItem .Img img{border-radius:30px;overflow:hidden;position:relative;z-index:2;-webkit-transform:scale(1.1);transform:scale(1.1);transition:all 1s;aspect-ratio:5 /3;object-fit:cover}
.bookArea .bookItem .Txt{padding:15px 57px 15px 64px;position:relative;transition:all 0.5s}
.bookArea .bookItem .Txt .dot{display:inline-block;width:100%;height:100%}
.bookArea .bookItem .Txt .dot .wire-cube{top:50px;position:absolute}
.bookArea .bookItem .Txt .topTitle{font-size:1.5625rem;margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bookArea .bookItem .Txt .topTitle .subtitle,.bookArea .bookItem .Txt .topTitle .title{display:inline;transition:all 0.5s;color:var(--triadic1);font-size:1.4rem}
.bookArea .bookItem .Txt .topTitle .subtitle{font-weight:500;letter-spacing:0.7px}
.bookArea .bookItem .Txt .text{font-size:1.2rem;letter-spacing:0.35px;padding-left:1px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.bookArea .bottomBox{position:absolute;bottom: -110px;left:0;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content: space-between;-ms-flex-align:center;align-items:center;width:100%}
.bookArea .bottomBox .lineBox{height:1px;width:calc(100% - 421px);background-color:#cccccc}
.bookArea .bottomBox .lineBox .line{background:linear-gradient(to top,#000000 0%,#000000 100%);height:3px;margin-top:-1px;transition:all 0.5s;border-radius:2px}
.bookArea .bottomBox .numBox{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:end;font-size:1rem;font-weight:600;color:#cccccc;width:100px;-ms-flex-pack:end;justify-content:end;margin-left:10px}
.bookArea .bottomBox .numBox .numList{position:relative;font-size:1.4375rem;line-height:1.3;color:#3667b3}
.bookArea .bottomBox .numBox .numList .numItem{top:0;left:0;opacity:0;pointer-events:none;transition:all 0.5s;-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translateY(10px);transform:translateY(10px);width:60px;text-align:right}
.bookArea .bottomBox .numBox .numList .numItem:not(:first-child){position:absolute}
.bookArea .bottomBox .numBox .numList .numItem.active{opacity:1;pointer-events:auto;-webkit-transform:translateY(0px);transform:translateY(0px)}
.bookArea .bottomBox .numBox .slash{padding:0 4px 0 6px}
.bookArea .bottomBox .slickBtnBox{margin-left:57px;display: none;}


/* 事件資訊：控制按鈕整組必須存在，否則 Tab 不到 */
.bookArea .bottomBox .slickBtnBox {
  margin-left: 57px;
  display: flex !important;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

/* 讓三顆按鈕都可被焦點到 */
.bookArea .bottomBox .slickBtnBox button {
  pointer-events: auto;
}

/* 預設視覺隱藏，但仍可被 Tab */
#book_area .slickBtnBox .slickBtn {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Tab focus 時顯示目前焦點按鈕 */
#book_area .slickBtnBox .slickBtn:focus,
#book_area .slickBtnBox .slickBtn:focus-visible {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;

  width: auto !important;
  height: auto !important;
  min-width: 64px !important;
  min-height: 40px !important;
  padding: 6px 14px !important;
  margin: 0 !important;

  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: nowrap !important;

  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  background: #000000 !important;
  color: #ffffff !important;

  font-size: 1rem !important;
  line-height: 1.5 !important;
  z-index: 999 !important;

  outline: 3px solid #e60023 !important;
  outline-offset: 3px !important;
}

/* 暫停 / 播放文字 */
#book_area .bookPlayToggle .pauseText {
  color: #ffffff !important;
}

/* 手機也不可關閉控制按鈕容器 */
@media (max-width: 767px) {
  .bookArea .bottomBox .slickBtnBox {
    display: flex !important;
  }
}

.bookArea .bookItem.show .wire-cube {
  animation: spinCube 2.6s ease-out 1 both !important;
}
@media (prefers-reduced-motion: reduce) {
  .bookArea .wire-cube {
    animation: none !important;
  }
}

@media (max-width: 1650px) {
	.bookArea .bookBox { padding: 0 50px; }
	.bookArea .bookItem { padding: 84px 45px 0 66px; }
	.bookArea .bookItem .Txt .topTitle { ont-size: 1.4375rem;}
	.bookArea .bookItem .Txt .text { font-size: 0.875rem; }
	.bookArea .bottomBox .numBox { font-size: 0.875rem; }
	.bookArea .bottomBox .numBox .numList { font-size: 1.25rem; }
	.bookArea .wrap,#book_area .workframe{max-width: 80%;}
}

@media (max-width: 1350px) {
	.bookArea .decoImg { width: 30vw; }
	.bookArea .titleBox .leftBox { width: 280px; }
	.bookArea .titleBox .centerBox { width: calc(100% - 480px); padding: 0 20px 0; }
	.bookArea .bookList { min-height: 520px; }
	.bookArea .bookItem { padding: 84px 25px 0 46px; }
	.bookArea .bookItem .Txt .topTitle { font-size: 1.25rem; }
	.bookArea .bookItem .Txt .text { font-size: 0.75rem; }
	.bookArea .bottomBox .numBox { font-size: 0.75rem; }
	.bookArea .bottomBox .numBox .numList { font-size: 1.125rem; }
	.bookArea{padding: 50px 0 100px;}
}

@media (min-width: 1201px) {
	.slickBtnBox .slickBtn:hover { -webkit-transform: translateX(4px) scale(1.15); transform: translateX(4px) scale(1.15); }
	.bookArea .bookItem .item:hover .Img {-webkit-transform: scale(1.03);transform: scale(1.03);-webkit-transform-origin: top;transform-origin: top;}
	.bookArea .bookItem .item:hover .Img::before { opacity: 0.5; }
	.bookArea .bookItem .item:hover .Img img { -webkit-transform: scale(1); transform: scale(1); }
	.bookArea .bookItem .item:hover .topTitle .subtitle, .bookArea .bookItem .item:hover .topTitle .title { color: var(--black); }
}

@media (min-width: 1024px) {
	.bookArea .bookItem.first {-webkit-transform: translateX(64px);transform: translateX(64px);}
	.bookArea .bookItem.second {-webkit-transform: translateX(64px);transform: translateX(64px);}
	.bookArea .bookItem.second { padding: 60px 110px 0 103px; }
	.bookArea .bookItem.second .Txt { padding: 5px 60px; }
	.bookArea .bookItem.second .Txt .dot {left: 32px;}
	.bookArea .bookItem.first { padding: 0; }
	.bookArea .bookItem.first .Txt { padding: 21px 55px; }
	.bookArea .bookItem.first .Txt .dot { top: 39px; left: 25px; }
}

@media (min-width: 1024px) and (max-width: 1650px) {
	.bookArea .bookItem.second { padding: 60px 70px 0 85px; }
	.bookArea .bookItem.first .Txt .dot { top: 35px; left: 10px; }
}

@media (min-width: 1024px) and (max-width: 1350px) {
	.bookArea .bookItem.second { padding: 60px 50px 0 85px; }
	.bookArea .bookItem.second .Txt { padding: 5px 25px; }
	.bookArea .bookItem.second .Txt .dot { top: 20px; left: 10px; }
	.bookArea .bookItem.first .Txt { padding: 21px 35px; }
}

@media (min-width: 1024px) and (min-width: 1201px) {
	.bookArea .bookItem.second:hover .Img { margin-bottom: 10px; }
}

@media (max-width: 1023px) {
	.wrap { padding-left: 30px; padding-right: 30px; }
	.bookArea .decoImg { display: none; }
	.bookArea .mouseIcon.show { opacity: 0; }
	.bookArea .titleBox { margin: 0; }
	.bookArea .titleBox .leftBox { width: 100%; padding-bottom: 20px; }
	.bookArea .titleBox .centerBox { width: 100%; padding: 0 0 40px; }
	.bookArea .titleBox .rightBox { width: 100%; padding: 0 0 20px; }
	.bookArea .bookBox { padding: 0; }
	.bookArea .bookList {margin: 0 -20px;min-height: unset;padding-bottom: 0;}
	.bookArea .bookList .slick-list { overflow: hidden; }
	.bookArea .bookItem {padding: 0 10px;}
	.bookArea .bookItem .Txt {padding: 10px 20px 20px 40px;}
	.bookArea .bookItem .Txt .dot { left: 20px; }
	.bookArea .bookItem .Txt .text { font-size: 0.875rem; }
	.bookArea .bottomBox{bottom:-90px;gap:20px}
	.bookArea .bottomBox .more_btn a{padding:10px 0px 10px}
	.bookArea .bottomBox .lineBox{width:calc(100% - 249px)}
	.bookArea .wrap,#book_area .workframe{max-width:93%}
	.bookArea .wrap{padding-left:30px;padding-right:30px}
}

@media (max-width: 768px) {
	.wrap { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 767px) {
	.bookArea {padding: 40px 0 80px;}
	.bookArea .bottomBox .lineBox { width: 100%; }
	.bookArea .bottomBox .numBox { display: none; }
	  .bookArea .bottomBox .slickBtnBox {
    display: flex !important;
  }
}
@media (max-width: 660px) {
	#book_area .workframe{max-width: 90%;}
	.bookArea .wrap{max-width: 83%;}
	.bookArea .wrap {padding-left: 10px;padding-right: 10px;}
}
@media (prefers-reduced-motion:reduce) {
  .bookArea *,.bookArea *::before,.bookArea *::after { animation: none !important; transition: none !important; transform: none !important; }
}