@charset "utf-8";
/*思源黑體*/
/* @font-face {
    font-family: 'Noto Sans TC VF';
    src: url('../fonts/NotoSansTC-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
} */

/* a:hover{ opacity:0.9;} *//*滑鼠滑入半透明*/
/*--loading載入中--------------------------------*/
/*遮罩樣式*/
.overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /*半透明背景*/ display: flex; justify-content: center; align-items: center; z-index: 9999;/*確保遮罩層在最上層*/}

/*spinner樣式+旋轉動畫*/
.spinner{ border: 8px solid rgba(0, 0, 0, 0.1); border-left: 8px solid #fff; border-radius: 50%; width: 50px; height: 50px; margin: 0 auto; animation: spin 1s linear infinite;}
@keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);}}

/*loading文字*/
.loadingTxt{ margin-top: 10px; font-size: 2rem; color: #fff; font-weight: bold;}

/*----*/
.pcNo{ display: block;}
.mNo{ display: none;}
.mINBLpcNO{ display: inline-block;}
.pcINBLmNO{ display: none;}

.heighLightPurple{ background-color: #6f64d1; padding: 0 5px;}
.heighLightGreen{ display: inline-block; margin: 4px 0; background-color: #a7e0a6; padding: 0 5px;}
.heighLightRed{ display: inline-block; margin: 4px 0; background-color: #e7cdc9; padding: 0 5px;}
.txtPurple{ color: #c925bc;}
.txtGreen{ color: #73ff8a;}
.txtRed{ color: #df3f24;}
.txtBrown{ color: #885d00;}
.txtBlue{ color: #2487e0;}
.txtYellow{ color: #f7fc30;}
.alink{ color: #0076df; text-decoration: none;}
.alink:hover{ text-decoration: underline;}

/*bg-----------------------------------------*/
.bgPadT{ padding-top: 30px;}
.bgPadB{ padding-bottom: 30px}

.bgPadT2{ padding-top: 0;}
.bgPadB2{ padding-bottom: 0;}

.bgPadB3{ padding-bottom: 20px;}

.bgPadTm{ padding-top: 12px;}
.bgPadBm{ padding-bottom: 12px;}

.bgPadTm2{ padding-top: 15px;}
.bgPadBm2{ padding-bottom: 15px;}

.bgTop{ background-color: #d2d2d2; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250901_achu/images/bg_top.png); background-repeat: repeat-x; background-size: 160%;}
.bgColor1{ background-color: #72856e;}
.bgColor2{ background-color: #496741;}
.bgColor3{ background-color: #c09775;}
.bgColor4{ background-color: #946f50;}
.bg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250901_achu/images/bg_deco1.png); background-position: top center; background-size: 111%;}
.bg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250901_achu/images/bg_deco2.png); background-position: top center; background-size: 105%;}

/*--header-----------------------------------------*/
.headerW{ max-width: 800px; margin: 0 auto; border: #f2dcee 8px solid; overflow: hidden;}
.headerBox{ overflow: hidden; position: relative;}
.headerBox img{ display: block; width: 100%;}
.headerH{ width: 100%;}

.headerPicFull{ position: absolute; top: 0; left: 0; width: 100%;}
.headerPicHalf{ position: absolute; top: 0; width: 50%;}
.headerPicHalf.left{ left: 0;}
.headerPicHalf.right{ right: 0;}

.headerPic{ position: absolute;}

/*刊頭動畫*/
.headerDrop1{ animation: headerDrop1 7s infinite; transform-origin: 70% 80%;}
@keyframes headerDrop1 { 
    0%{ transform: rotate(0);}
    50%{ transform: rotate(5deg);}
    100% { transform: rotate(0);}
}
.headerDrop2{ animation: headerDrop2 1.5s infinite; transform-origin: 20% 80%;}
@keyframes headerDrop2 { 
    0%{ transform: rotate(0);}
    50%{ transform: rotate(-6deg);}
    100% { transform: rotate(0);}
}
.headerDrop3{ animation: headerDrop3 4s infinite; transform-origin: 50% 80%;}
@keyframes headerDrop3 { 
    0%{ transform: translateY();}
    50%{ transform: translateY(6px);}
    100% { transform: translateY();}
}

/*--contain-----------------------------------------*/
.contain{ overflow: hidden;}
.areaWidth{ position: relative; width: 94%; margin: 0 auto;}
.areaWidth2{ position: relative; width: 94%; margin: 0 auto;}
.areaWidth3{ position: relative; width: 96%; margin: 0 auto;}

.mainTitle{ width: 92%; margin: 0 auto 8px auto;}
.mainTitle2{ width: 100%; margin: 0 auto;}
.mainTitle3{ width: 100%; margin: 0 auto 0 auto; position: relative;}
.insideTitle{ width: 90%; margin: 0 auto;}

/*常用*/
.posiRelative{ position: relative;}
.imgBlock100 img{ display: block; width: 100%;}

/*PC+M同版*/
.areaWidthM{ position: relative; width: 94%; margin: 0 auto;}
.mainTitleM{ width: 100%;}
.wrapperHalf > li{ padding: 2%;}

/*--限定活動-----------------------------------------*/
.saleBox{ padding-top: 5%;}
.saleBookshelf1, .saleBookshelf2{ position: absolute; top: 31%; width: 45%;}
.saleBookshelf1{ left: 4%;}
.saleBookshelf2{ right: 4%;}
.saleRead{ display: block; animation: saleRead 2s infinite;}
@keyframes saleRead { 
    0%{ transform: rotate(0);}
    50% { transform: rotate(5deg);}
    100% { transform: rotate(0);}
}

/*--活動說明(書架)-----------------------------------------*/
.noticeStyle1{ width: 96%; margin: 0 auto; padding: 30px 5% 20px 5%; background-color: #bcbcbc; border: #888888 8px solid; border-radius: 15px; box-sizing: border-box;}
.noticeStyle1 .notice2{ max-width: 1000px; margin: 0 auto; color: #434343;}
.noticeStyle1 .noticeTitle{ color: #434343;}
.noticeStyle1 .noticeSecTitle{ color: #434343;}
.noticeStyle1 .notice2 > li > ul > li{ list-style-type: disc;}
.noticeStyle1 .notice2 > li > ul > li a{ color: #166235;}

/*--活動說明(MAU)-----------------------------------------*/
.noticeStyle2{ margin: 15px auto 0 auto; padding: 30px 5% 20px 5%; background-color: #496741; border: #000000 8px solid; border-radius: 15px;}
.noticeStyle2 .notice{ max-width: 1000px; margin: 0 auto; color: #ffffff;}
.noticeStyle2 .noticeTitle{ color: #ffffff;}
.noticeStyle2 .noticeSecTitle{ color: #ffffff;}
.noticeStyle2 .notice > li{ list-style-type: disc;}
.noticeStyle2 .notice > li a{ color: #c4ff46;}

/*--MAU活動-----------------------------------------*/
.areaConWidth{ overflow: hidden; margin: -5% auto 0 auto; border: #000000 8px solid; background-color: rgba(118,153,110,0.95); border-radius: 20px; box-sizing: border-box;}
.areaConWidth.bgTransparent{ background-color: transparent; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250301_battlecomedy/images/game_table.png); background-size: 138%; background-position-x: center; background-position-y: 222px; background-repeat: no-repeat;}
.areaConWidthPadd{ padding: 3% 0 5% 0;}
.borderDeco{ margin-bottom: 15px;}
.couponBox{ padding: 0 3%;}

/*按鈕動畫*/
.specialBtn{ display: block; animation: specialBtn 2s infinite;}
.specialBtn2 #btmMsg2{ display: block; animation: specialBtn2 2s infinite;}
@keyframes specialBtn { 
    0%{ transform: scale(1) translateX(0);}
    50% { transform: scale(0.9) translateX(-10px);}
    100% { transform: scale(1) translateX(0);}
}
@keyframes specialBtn2 { 
    0%{ transform: scale(1) translateX(0);}
    50% { transform: scale(0.9) translateX(15px);}
    100% { transform: scale(1) translateX(0);}
}

/*按鈕動畫(全體會員好禮)*/
.specialAllBtn{ display: block; animation: specialAllBtn 2s infinite;}
@keyframes specialAllBtn { 
    0%{ transform: scale(1) translateX(0);}
    50% { transform: scale(0.9) translateX(10px);}
    100% { transform: scale(1) translateX(0);}
}

/*按鈕滑入*/
.specialBtn img,.specialBtn2 #btmMsg2 img{ transition: 0.4s;}
.specialBtn img:hover,.specialBtn2 #btmMsg2 img:hover{ transform: translateY(10px);}

/*按鈕已登記*/
.specialBtn2 #btmMsg2.checked{ animation: none;}
.specialBtn2 #btmMsg2.checked img:hover{ transform: translateY(0);}
.listBox li a.specialBtn2:hover{ transform: translateY(0);}

/*資格+剩餘數量*/
.giftNum{ display: inline-block; position: absolute; top: 82%; left: 9%; margin: 5% 0 0 5%; padding: 2px 10px; border: #576155 3px solid; font-size: 1.5rem; color: #576155; font-weight: bold; background-color: #fff; border-radius: 100px;}
.giftNum span{ color: #c620b2;}
.giftNum b{ color: #c620b2;}

/*登記外框*/
.special3Border{ margin: -14% 2% 0 2%; padding-top: 16%; background-color: rgba(208,232,248,0.5); border-radius: 30px;}

/*--註冊贈書-----------------------------------------*/
.areaConWidth2{ overflow: hidden; margin: 15px auto 0 auto; box-sizing: border-box;}
.freeBookMain{ position: absolute; top: 11%; left: 0; right: 0; margin: 0 auto; width: 87%;}
.scaleAni{ animation: scaleAni 2s infinite; cursor: pointer;}
@keyframes scaleAni { 
    0%{ transform: scale(1) translateY(0);}
    50% { transform: scale(0.9) translateY(5px);}
    100% { transform: scale(1) translateY(0);}
}

/*--yt頻道-----------------------------------------*/
.ytChu{ width: 94%; margin: 0 auto;}
.ytShawn{ margin-left: -3%;}

.ytDeco1{ animation: ytDeco1 2s infinite;}
@keyframes ytDeco1 { 
    0%{ transform: scale(1) rotate(0) translateY(0);}
    50% { transform: scale(0.99) rotate(2deg) translateY(5px);}
    100% { transform: scale(1) rotate(0) translateY(0);}
}
.ytDeco2{ animation: ytDeco2 2s infinite;}
@keyframes ytDeco2 { 
    0%{ transform: scale(1) rotate(0) translateY(0);}
    50% { transform: scale(0.99) rotate(-2deg) translateY(5px);}
    100% { transform: scale(1) rotate(0) translateY(0);}
}

/*--推薦書-----------------------------------------*/
.bookTab1, .bookTab2{ position: absolute; top: 0;}
.bookTab1.checked, .bookTab2.checked{ cursor: pointer; transition: 0.4s;}
.bookTab1.checked:hover, .bookTab2.checked:hover{ transform: scale(0.9);}
.bookTab1{ left: 0; width: 38%;}
.bookTab2{ left: 39%; width: 50%;}

/*推薦書列表*/
.bookList{ margin-top: 20px; /*margin-bottom: 20px;*/}
.bookList > li{ margin-bottom: 30px;}

/*推薦文*/
.bookCon{ display: none;}

/*--影片-----------------------------------------*/
.ytVideoBox{ /*position: relative; z-index: 1; margin: 0; background-color: #000000;*/ border: #000000 5px solid; border-radius: 5px;}/*外框*/
.video { width: 100%; margin: 0 auto; position: relative;}
.aVideoBox { width: 100%; margin: 0 auto;}
.aVideo { width: 100%; height: 0; padding: 0 0 56.25% 0; position: relative;}
.aVideo iframe { width: 100%; height: 100%; position: absolute; left: 0; top: 0;}

.videoListBorder{ margin-top: 10px; padding: 10px; border: #7a583b 8px solid; background-color: #654a34; border-radius: 25px;}
/* .videoList{ margin-bottom: 15px;} */
.videoTime{ width: 100%; margin: 0 auto;}
.videoTitle{ width: 100%; margin: 0 auto; padding-top: 10px;}

/*--sweetAlert-----------------------------------------*/
.custom-html-container{ margin: 1em 0 0.3em;}
.custom-btn-close{ font-size: 4.5rem; margin-top: -5%; margin-right: -4%; box-shadow: none;}
.custom-btn-close:focus{ box-shadow: none;}
.custom-btn-styled { font-size: 1.4rem; cursor: pointer;}
/* .sweetBtn{ padding: 3px 10px; font-size: 1.5rem !important; font-weight: bold !important; cursor: pointer; font: 62.5% 微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif;} */

/*按鈕(關閉)*/
.custom-btn-styled,
.custom-btn-styled:active,
.custom-btn-styled:hover{ background-color: transparent !important; background-image: none !important;}
.custom-btn-styled:focus{ border: 0 !important; box-shadow: none;}
.custom-btn-styled{ box-shadow: none !important;}
.custom-btn-styled .sweetBtn{ margin: 0; display: inline-block; margin: 15px auto 0 auto; padding: 20px 20px 22px 20px; min-width: 200px; font-size: 2rem; color: #fff; line-height: 1;
font-weight: bold; /*font-style: italic;*/ text-decoration: none; font-family: 微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif; background-color: #000000; border-radius: 5px;
/* text-shadow: rgb(255, 255, 255) 0 0px 10px; border: #fff 1px solid; box-shadow: inset rgb(255, 255, 255) 0px 0px 28px, rgb(255, 255, 255) 0 0px 10px; cursor: pointer;*/} 

/*標題*/
.popTitle{ max-width: 400px; margin: 0 auto;}

/*--註冊贈書sweetAlert--*/
/*書封*/
.freeBookCover a { overflow: hidden; display: block; border: #000 5px solid; border-radius: 10px;}
.freeBookCover{ margin-top: 5px;}
/*領取說明*/
.freeBookNote{ margin-top: 15px; font-size: 1.6rem; font-weight: bold;}
.freeBookNote span{ display: inline-block; padding-left: 6px; margin-right: 5px; background-color: #000; color: #fff; }
/*示意圖*/
.freeBookPic{ margin-top: 10px; border: #ccc 2px solid;}
.freeBookPic img{ display: block;}




/*--767up(Pc)------------------------*/
@media screen and (min-width:767px) {
    /*--loading載入中--------------------------------*/
    /*loading文字*/.loadingTxt{ font-size: 2.5rem; }

    /*----*/
    .pcNo{ display: none;}
    .mNo{ display: block;}
    .mINBLpcNO{ display: none;}
    .pcINBLmNO{ display: inline-block;}

    /*bg-----------------------------------------*/
    .bgPadT{ padding-top: 60px;}
    .bgPadT2{ padding-top: 15px;}
    .bgPadB{ padding-bottom: 90px;}
    .bgPadB2{ padding-bottom: 0;}
    .bgPadB3{ padding-bottom: 40px;}

    .bgTop{ background-repeat: repeat-x; background-size: inherit;}
    .bg1, .bg2{ background-attachment: fixed; background-size: 100%;}

    /*--header-----------------------------------------*/
    .headerW{ border-width: 15px;}

    /*--contain-----------------------------------------*/
    .areaWidth{ max-width: 1200px; padding-top: 0;}
    .areaWidth2{ max-width: 1300px;}
    .areaWidth3{ max-width: 900px;}

    .mainTitle{ width: 56%; max-width: 500px;}
    .mainTitle2{ width: 65%; max-width: 590px; margin: 0 auto;}
    .mainTitle3{ width: 100%;}

    .wrapper{ width: 40%; max-width: 620px; margin: 0 auto;}
    .wrapperHalf { width: 94%; margin: 0 auto;}
    .wrapperHalf > li{ padding: 2%;}

    /*--限定活動-----------------------------------------*/
    .saleBox{ padding-top: 74px;}
    .saleBookshelf1, .saleBookshelf2{ top: 32%; width: 43%;}
    .saleBookshelf1{ left: 5.5%;}
    .saleBookshelf2{ right: 5.5%;}

    /*--活動說明(書架)-----------------------------------------*/
    .noticeStyle1{ width: 98%; padding: 30px 5% 50px 5%;}

    /*--活動說明(MAU)-----------------------------------------*/
    .noticeStyle2{ width: 88%; padding: 30px 5% 50px 5%; border-radius: 25px;}

    /*--MAU活動-----------------------------------------*/
    .areaConWidth{ width: 100%; border-radius: 25px;}
    .areaConWidthPadd{ padding: 5% 5% 5% 5%;}
    .areaConWidthPadd.listBox > li:nth-child(1){ padding-top: 5%;}

    /*--註冊贈書-----------------------------------------*/
    .freeBookBox{ max-width: 600px;}
    .freeBookMain{ position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 46%;}
    @keyframes scaleAni { 
        0%{ transform: scale(1) translateX(0) translateY(0);}
        50% { transform: scale(0.9) translateX(15px) translateY(5px);}
        100% { transform: scale(1) translateX(0) translateY(0);}
    }
    
    /*--yt頻道-----------------------------------------*/
    .ytChu{ width: inherit;}
    .ytShawn{ margin-left: 0;}

    /*--推薦書-----------------------------------------*/
    /*推薦書列表*/
    .bookList{ margin-top: 40px; /*margin-bottom: 20px;*/}
    .bookList > li{ margin-bottom: 60px;}

    /*--影片-----------------------------------------*/
    .ytVideoBox{ width: calc(100% - 10px);/*影片寬度*/ margin: 0 auto; border-width: 8px;}
    .videoList{ width: 50%; margin: 0 auto;}

    .videoListBorder{ padding: 20px 30px;}
    .videoTime{ width: 90%;}
    .videoTitle{ width: 90%;}

    /*--sweetAlert-----------------------------------------*/
    .custom-btn-close{ font-size: 5.5rem; margin-top: -4%; margin-right: -2.5%;}


    /*--hover animate--------------------------------*/
    .ytChu, .ytShawn{ display: block; transition: 0.4s;}
    .ytChu:hover, .ytShawn:hover{ transform: rotate(-6deg) scale(0.9);}
}

/*--768-1024(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1024px) { 
    .bg1, .bg2, .bg3, .bg4{ background-attachment: inherit;}
    .wrapperHalf > li{ padding: 2%;}
    .mainTitle3{ width: 90%;}
    .areaWidth2{ max-width: 95%;}
}

/*--1025-1200(特殊尺寸)------------------------*/
@media screen and (min-width:1025px) and (max-width:1200px) { 
}

/*--1200以下------------------------*/
@media screen and (min-width:767px)  and (max-width:1200px) { 
    /*--contain-----------------------------------------*/
    .wrapper { width: 65%; margin: 0 auto;}
}

/*--1500以上------------------------*/
@media screen and (min-width:1500px) { 
    .wrapperHalf { max-width: 1400px; margin: 0 auto;}
}

/*--320以下小手機------------------------*/
@media screen and (max-width:320px) {
}

.bookList .headerH img{ aspect-ratio: 558/668;}
.videoTime img{ aspect-ratio: 665/135;}
.videoTitle  img{ aspect-ratio: 665/145;}
.freeBookCover img{ aspect-ratio: 350/520;}

/*--animate.css--------------------------------*/
.animate__animated.animate__delay-02s{-webkit-animation-delay:0.2s;animation-delay:0.2s;}
.animate__animated.animate__delay-03s{-webkit-animation-delay:0.3s;animation-delay:0.3s;}
.animate__animated.animate__delay-04s{-webkit-animation-delay:0.4s;animation-delay:0.4s;}
.animate__animated.animate__delay-05s{-webkit-animation-delay:0.5s;animation-delay:0.5s;}
.animate__animated.animate__delay-06s{-webkit-animation-delay:0.6s;animation-delay:0.6s;}
.animate__animated.animate__delay-07s{-webkit-animation-delay:0.7s;animation-delay:0.7s;}
.animate__animated.animate__delay-08s{-webkit-animation-delay:0.8s;animation-delay:0.8s;}
.animate__animated.animate__delay-10s{-webkit-animation-delay:1.0s;animation-delay:1.0s;}
.animate__animated.animate__delay-12s{-webkit-animation-delay:1.2s;animation-delay:1.2s;}
.animate__animated.animate__delay-13s{-webkit-animation-delay:1.3s;animation-delay:1.3s;}
.animate__animated.animate__delay-14s{-webkit-animation-delay:1.4s;animation-delay:1.4s;}