@charset "utf-8";

/* 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;}

/*--PC、M的隱藏/顯示設定--*/
.pcNo{ display: block;}
.mNo{ display: none;}
.mINBLpcNO{ display: inline-block;}
.pcINBLmNO{ display: none;}

/*--特殊色：文字、連結、heighLight--*/
.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: #04ac00;}
.txtRed{ color: #df3f24;}
.txtBrown{ color: #885d00;}
.txtBlue{ color: #2487e0;}
.txtYellow{ color: #f7fc30;}
.alink{ color: #0076df; text-decoration: none;}
.alink:hover{ text-decoration: underline;}

/*區塊上下間距-----------------------------------------*/
.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;}

/*背景圖-----------------------------------------*/
.bg1{ background-color: #989490; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260801_weitengcollab/images/bg1.png); background-position: top center; background-size: 110%;}
.bg2{ background-color: #7f7c78; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260801_weitengcollab/images/bg2.png); background-position: top center; background-size: 110%;}
.bg3{ background-color: #494949; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260801_weitengcollab/images/bg3.png); background-position: top center; background-size: 110%;}
.bg4{ background-color: #373737; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260801_weitengcollab/images/bg4.png); background-position: top center; background-size: 110%;}
.bg5{ background-color: #989490; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260801_weitengcollab/images/bg5.png); background-position: top center; background-size: 130%;}
.bg6{ background-color: #303030; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260801_weitengcollab/images/bg6.png); background-position: top center; background-size: 110%;}

/*--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;}

/*刊頭動畫*/
.headerAniUpDown img{ animation: headerAniUpDown 4s infinite;}
@keyframes headerAniUpDown { 
    0%{ transform: translateY(0);}
    50%{ transform: translateY(10px);}
    100% { transform: translateY(0);}
}

.headerAniUpDown2 img{ animation: headerAniUpDown2 4s infinite;}
@keyframes headerAniUpDown2 { 
    0%{ transform: translateY(0);}
    50%{ transform: translateY(-15px);}
    100% { transform: translateY(0);}
}

/*貞子*/
.headerAniUpDown3 img{ animation: headerAniUpDown3 20s infinite;}
@keyframes headerAniUpDown3 { 
    0%{ transform: translateX(0) translateY(0);}
    20%{ transform: translateX(-20px) translateY(-10px);}
    40%{ transform: translateX(-15px) translateY(20px);}
    60%{ transform: translateY(-20px);}
    80%{ transform: translateY(20px);}
    100% { transform: translateY(0);}
}

/*鬼門+鬼火*/
.headerAniLR img{ animation: headerAniLR 10s infinite;}
@keyframes headerAniLR { 
    0%{ transform: translateX(0);}
    50%{ transform: translateX(8%);}
    100% { transform: translateX(0);}
}
.headerAniLR2 img{ animation: headerAniLR2 8s infinite; transform: translateX(-10%);}
@keyframes headerAniLR2 { 
    0%{ transform: translateX(-10%);}
    50%{ transform: translateX(0);}
    100% { transform: translateX(-10%);}
}

/*符*/
.headerAniScaleIn img{ animation: headerAniScaleIn 0.5s 0.8s forwards; transform: scale(40);}
@keyframes headerAniScaleIn { 
    0%{ transform: scale(40);}
    100% { transform: scale(1);}
}


/*--contain-----------------------------------------*/
.contain{ overflow: hidden;}
/*區塊寬度*/
.areaWidth{ position: relative; width: 94%; margin: 0 auto;}
.areaWidth + .areaWidth{ margin-top: 70px;}
.areaWidth2{ position: relative; width: 94%; margin: 0 auto;}
.areaWidth3{ position: relative; width: 96%; margin: 0 auto;}
.areaWidth4{ position: relative; width: 90%; margin: 0 auto;}


/*主標寬度*/
.mainTitle{ width: 92%; margin: 0 auto;}
.mainTitle2{ width: 100%; margin: 0 auto;}
.mainTitle3{ width: 100%; margin: 0 auto 0 auto; position: relative;}
.insideTitle{ width: 90%; margin: 0 auto;}

/*常用(定位+圖片block)*/
.posiRelative{ position: relative;}
.posiAbsolute{ position: absolute;}
.imgBlock100 img{ display: block; width: 100%;}
/*圖片滿版定位*/
.picFull{ position: absolute; top: 0; left: 0; width: 100%;}

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

/*--活動說明(書架)-----------------------------------------*/
/* .noticeStyle1{ margin: 0 auto; padding: 30px 5% 20px 5%; background-color: #b8a288; border: #896a46 8px solid; border-radius: 15px;}
.noticeStyle1 .notice2{ max-width: 1000px; margin: 0 auto; color: #000000;}
.noticeStyle1 .noticeTitle{ color: #563a1a;}
.noticeStyle1 .noticeSecTitle{ color: #000000;}
.noticeStyle1 .notice2 > li > ul > li{ list-style-type: disc;}
.noticeStyle1 .notice2 > li > ul > li a{ color: #8e1e45;} */

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

/*--活動說明-----------------------------------------*/
.noticeStyle1{ width: 96%; margin: 0 auto; background-color: #494949; border: #000000 8px solid; border-radius: 15px;}
.noticeStyle1{ margin-top: 15px;}
.noticeStyle1 .noticeCon{ margin: 0 auto; padding: 20px 6% 20px 6%;}
.noticeStyle1 .noticeCon .notice2{ /*max-width: 1000px;*/ margin: 0 auto; /*padding: 20px 5%;*/ color: #ffffff;}
.noticeStyle1 .noticeTitle{ margin-bottom: 0; margin-top: 0; padding-bottom: 10px; font-size: 1.8rem; background-color: #000000; color: #ffffff;}
.noticeStyle1 .noticeSecTitle{ color: #ffffff; font-size: 1.8rem;}
.noticeStyle1 .notice2 > li > ul > li{ margin-right: 0; list-style-type: decimal;}
.noticeStyle1 .notice2 a{ color: #82fff5;}

/*ibon點擊才展開*/
.slideNotice .noticeCon{ display: none;}
.noticeSlide{ display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 5px; font-size: 1.8rem; color: #000000; background-color: #ffffff; border-radius: 3px; cursor: pointer;}
.noticeSlide .bwi-delete{ font-size: 1.6rem;}

/*--快速選單-----------------------------------------*/
/* .quickMenuBox{ max-width: 90%; margin: 0 auto;}
.quickMenuLine{ border-bottom: #424242 12px solid;} */

/*--MAU活動-----------------------------------------*/
.areaConWidth{ overflow: hidden; margin: 0 auto; border: #000000 8px solid; background-color: rgba(111,111,111,0.95); border-radius: 20px; box-sizing: border-box;}
.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: #7d7d7d 3px solid; font-size: 1.5rem; color: #000000; font-weight: bold; background-color: #fff; border-radius: 100px;}
.giftNum span{ color: #d80000;}
.giftNum b{ color: #d80000;}

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

/*--註冊贈書-----------------------------------------*/
.freeBookTxt{ margin-top: 20px; font-size: 2rem; color: #ffffff; text-align: center; font-weight: bold; line-height: 1.4;}
.freeBookTxt span{ color: #feff2f;}
.freeBook{ margin-top: 20px; border: #ffffff 5px solid; border-radius: 5px;}

/*立即註冊鈕*/
.freeBookBtn{ display: block; max-width: 270px; width: 90%; margin: 30px auto 0 auto; transition: 0.4s;}
.freeBookBtn:hover{ transform: translateY(-10px);}
.freeBookBtn img{ animation: freeBookBtn 2s infinite;}
@keyframes freeBookBtn { 
    0%{ transform: scale(1);}
    50% { transform: scale(0.9);}
    100% { transform: scale(1);}
}

/*書封打碼+壓書名*/
.r18blur{ filter: blur(5px);}
.r18bookName{ position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; font-size: 1.8rem; font-weight: bold;
    display: flex; align-items: center; justify-content: center; width: 80%;
    text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff;
}

/*--抓站上書封(註冊贈書+推薦書共用)-----------------------------------------*/
/*書封比例*/
.webBookCover{ position: relative; width: 100%; margin-top: 15px; aspect-ratio: 600/883;/*書封比例*/}
/*書封邊框+陰影*/
.webBookCover a{ /*overflow: hidden;*/ box-sizing: border-box; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; border-radius: 3px;}
.swiper .webBookCover a{ border: #ffffff 2px solid;}/*註冊贈書樣式*/
.bookList .webBookCover a{ border: #ffffcc 2px solid; box-shadow: rgba(0,0,0,0.3) 0 0 3px;}/*推薦書樣式*/

/*img填滿外框設定*/
.webBookCover img{ width: 100%; height: 100%; 
    object-fit: cover; /*圖片等比例，並填滿外框的寬與高（因此若圖片比例差太多時，可能會有圖片被裁到的狀況）*/
    transform: scale(1.0001);/*用transform觸發瀏覽器重新渲染圖片*/ 
    backface-visibility: hidden;/*避免渲染時的邊緣/閃爍副作用*/
}

/*img縮入外框內(圖片比例差太多，裁到重要部分時補白底)*/
.webBookCover.contain img{
    object-fit: contain; /*圖片等比例縮入外框內（會用白底來補）*/
}
.webBookCover.contain a{
    background-color: #ffffff;/*補的白底可以改顏色*/
}

/*--作者介紹-----------------------------------------*/
.introBox > li:nth-child(2){ width: 70%; margin-top:-15%;}
/*書籍*/
.introBookList{ margin-top: 10px;}
/*看更多*/
.introMore{ width: 90%; max-width: 400px; margin: 0 auto;}

/*--影片-----------------------------------------*/
.conWidth{ position: relative; width: 90%; max-width: 600px; margin: 0 auto;}
.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;}

.videoTime{ width: 90%; margin: 0 auto;}
.videoTitle{ width: 85%; margin: -9% auto 25px auto; position: relative; z-index: 1; pointer-events: none;}

/*影片裝飾圖*/
.videoDeco1{ position: absolute; /*left: -20%;*/ left: 0; top: 0; width: 35%;}
.videoDeco2{ position: absolute; /*right: -19%;*/ right: 0; top: 0; width: 35%;}
/*裝飾圖動畫*/
.decoAni1{ animation: decoAni1 8s infinite;}
@keyframes decoAni1 { 
    0%{ transform: translateX(0) rotate(0);}
    50%{ transform: translateX(-40%) rotate(0);}
    100% { transform: translateX(0) rotate(0);}
}
.decoAni2{ animation: decoAni2 5s infinite; animation-delay: 5s;}
@keyframes decoAni2 { 
    0%{ transform: translateX(0);}
    50%{ transform: translateX(31%);}
    100% { transform: translateX(0);}
}

/*--測驗贈品-----------------------------------------*/
.giftBox{ width: 96%; margin: 0 auto; margin-top: 10px; padding: 15px; background-color: #494949; border: #000000 8px solid; border-radius: 25px; box-sizing: border-box;}
.gift3{ width: 90%; max-width: 600px; margin: 0 auto;} 

/*--測驗-----------------------------------------*/
/*--測驗封面--*/
.gameBox img{ display: block;}
.gameBox{ overflow: hidden; width: 94%; margin: 10px auto 0 auto; padding: 1%; background-color: #000000; border: #000000 2px solid; border-radius: 25px;}
.gameCon{ font-family: 'Noto Sans TC VF', Arial, Helvetica, sans-serif; font-weight: 700; overflow: hidden; position: relative; border: #000000 2px solid; background-color: #ffffff; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260801_weitengcollab/images/game_bg.jpg); background-size: cover; border-radius: 20px;}
.gameConWidth{ padding: 30px 5%;}

/*開始測驗鈕*/
.gameStartBtn{ position: absolute; top: 65%; left: 0; right: 0; margin: 0 auto; width: 100%; animation: scaleInOut 3s infinite;}
/* @keyframes scaleInOut{ 0% { transform: scale(1);} 50% { transform: scale(0.9);} 100% { transform: scale(1);} } */
@keyframes scaleInOut{ 
    0% { transform: rotate(0);} 
    50% { transform: rotate(10deg);} 
    100% { transform: rotate(0);} 
}
.gameStartBtn img:hover{ transform: scale(0.95);}
.gameMoreNum{ font-family: "Noto Sans TC", sans-serif; display: block; margin-top: 15px; font-size: 1.8rem; text-align: center;}
.gameMoreNum b{ font-size: 2.4rem; color: #ea5137;}

/*問答區*/
.gameQAbox{ /*display: flex; align-items: stretch;*/ padding: 0 0 5% 0; font-family: 'Noto Sans TC VF', Arial, Helvetica, sans-serif;}
.gameQA{ width: 100%;}
.gameQues{ font-size: 2.2rem; color: #edea36; font-weight: bold;}

/*題目圖*/
.gameQApic{ min-height: 450px; margin-top: 15px; background-color: #e2e2e2;}

/*答題進度*/
.gamePages{ margin: 13px 0 5px 0; font-size: 1.8rem; color: #ffffff; text-align: center; font-weight: normal;}
.gamePages span{ font-size: 2.4rem;}

/*選項*/
.gameSelect{ position: relative; /*margin: 15px 0;*/ padding: 15px 25px 15px 50px; font-size: 2rem; border: #000000 3px solid; background-color: #ffffff; color: #000000; font-weight: bold; border-radius: 8px; cursor: pointer;}
.gameSelect:last-child{ margin-bottom: 0;}

/*--選項解答--*/
.gameSelect .answerIcon{ position: absolute; top: 20px; left: 15px; font-size: 2.3rem;}
.gameSelect.correct{ background-color: #d2fe23;}
.gameSelect.wrong{ }
.getAnswer .gameSelect{ cursor: default;}

/*進度條*/
/* .gameBar{ position: relative; width: 10%; max-width: 30px; margin-left: 15px; border: #000000 3px solid; background-color: #ffffff; border-radius: 5px;}
.gameBarTxt{ position: relative; z-index: 2;}
.gameBarPercent{ position: absolute; bottom: 0; left: 0; width: 100%; background-color: #c1f33b;} */

/*下一題*/
.gameNextBtn{ width: 80%; max-width: 350px; margin: 0 auto; cursor: pointer;}

/*結果區*/
.gameENDbox{ max-width: 500px; margin: 0 auto; padding: 5%;}

.gameEndInfo{ text-align: center; line-height: 1.3; /*width: 90%; margin: 0 auto; animation: bling 3s infinite;*/}
.resultTitle{ margin-top: 15px; font-size: 2.7rem; color: #ffea00;}
.resultTitle b{ color: #ffea00;}
.resultInfo{ margin-top: 10px; font-size: 2.2rem; color: #ffffff; font-family: Microsoft JhengHei,"Century Gothic",Arial,sans-serif;}
.resultInfo a{ font-size: 1.6rem; color: #6df0ff; text-decoration: none;}
.resultInfo a:hover{ text-decoration: underline;}
.resultInfo b{ font-size: 2.5rem; color: #ff4829;}
.resultInfo span{ font-size: 1.5rem; color: #000000;}

.gameEndBook{ width: 100%; margin: 10px auto 0 auto;}
/*結果按鈕*/
.gameEndBtn{ width: 70%; margin: 0 auto;}
.gameEndBtn > li{ cursor: pointer; transition: 0.4s;}
.gameEndBtn > li:hover{ transform: scale(0.9);}
/* .gameEndBtn > li:last-child{ display: none;} */

/*結果圖*/
.resultWidth{ position: relative; width: 100%; margin: 0 auto; /*border: #fff 4px solid; border-radius: 10px;*/}
.resultWidth img{ display: block;}

.resultPicBox{ position: relative; overflow: hidden; display: flex; justify-content: center; margin-top: 20px; /*background-color: #000; border: #000 8px solid; border-radius: 10px;*/}
.resultPicNote{ margin-top: 15px; font-size: 1.5rem; color: #ffffff; text-align: center;}

/*再一次+下載按鈕*/
/* .gameBtn{ margin-top: 20px;} */

/*社群分享*/
.shareBox{ font-family: "Noto Sans TC", sans-serif; font-weight: 600; width: 100%; margin: 0 auto;}
.shareBox img{ display: block; width: 100%;}

.shareTitle{ font-size: 1.8rem; color: #000;}
.shareTitle b{ font-size: 2.2rem; color: #df3f24;}

.shareIconList{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; max-width: 350px; margin: 15px auto 10px auto;}
.shareIcon{ display: block; /*width: 18%;*/ transition: 0.4s;}
.shareIcon:hover{ transform: scale(0.9);}

/*分享圖*/
.sharePic{ overflow: hidden; max-width: 500px; margin: 0 auto; margin-top: 15px; border: #000 5px solid; border-radius: 10px;}
.sharePic img{ display: block;}

/*--推薦書-----------------------------------------*/
.recomBookList{ width: 75%; margin: -15% auto 0 auto;}

/*測驗拿優惠券*/
.goTest{ width: 100%; max-width: 500px; margin: 10px auto 0 auto;}

/*書展bn*/
.activeBn{ width: 90%; margin: 0 auto; border: #000 8px solid; border-radius: 10px;}

/*--恐怖氛圍動畫-----------------------------------------*/
/* 動畫：恐怖氣氛/一開始快速閃爍 */
.scareAni1 { animation: scareAni1 5s 1.2s infinite; }
@keyframes scareAni1 {
    /* 平常完全正常 */
    0%, 4%, 100% { opacity: 1; filter: brightness(1);}

    /* 一開始抽一下 */
    1% { opacity: .2; filter: brightness(2);}
    1.5% { opacity: .9; filter: brightness(.5);}
    2% { opacity: .1;}
    2.4% { opacity: 1;}

    /* 再補一次很短的閃爍 */
    3% { opacity: .3; filter: brightness(1.8);}
    3.3% { opacity: 1; filter: brightness(1);}
}


/* 動畫：恐怖電子雜訊/一開始快速扭曲又恢復 */
.scareAni2 { animation: scareAni2 5s .6s infinite; transform-origin: center;}
.scareAni2one { animation: scareAni2 5s .6s forwards; transform-origin: center;}/*只跑一次*/
@keyframes scareAni2 {
    /* 幾乎整段都正常 */
    0%, 3.2%, 100% { transform: none; filter: none;}

    /* 一開始突然 glitch */
    1% { transform: skewX(8deg) scaleX(1.05); filter: contrast(1.8) brightness(1.2);}
    1.3% { transform: skewX(-10deg) translateX(-3px); filter: contrast(2) hue-rotate(20deg);}
    1.6% { transform: skewX(6deg) translateX(4px) scaleY(.98);}
    1.9% { transform: skewX(-4deg) translateX(-2px);}
    2.2% { transform: translateX(3px) skewY(2deg); filter: contrast(1.7);}
    2.5% { transform: translateX(-4px) skewX(-6deg);}
    2.8% { transform: translateX(2px) scaleX(1.03);}
}


/* 動畫：閃爍 + 扭曲穿插 */
.scareAni3 { animation: scareAni3 5s 1s infinite; transform-origin: center;}
@keyframes scareAni3 {
    /* 大部分時間完全正常 */
    0%, 3.5%, 100% { opacity: 1; transform: none; filter: none;}

    /* 第一閃 */
    1% { opacity: .15; filter: brightness(2.2);}

    /* 恢復一瞬 */
    1.3% { opacity: 1;}

    /* 開始扭曲 */
    1.6% { transform: skewX(8deg) scaleX(1.05); filter: contrast(2);}
    1.9% { transform: skewX(-10deg) translateX(-4px); filter: contrast(2.2) brightness(1.3);}
    2.2% { transform: skewY(4deg) translateX(3px) scaleY(.98);}
    2.5% { transform: translateX(-2px) skewX(-5deg);}

    /* 再閃一次 */
    2.8% { opacity: .05; filter: brightness(2.8);}

    /* 最後一個小 glitch */
    3.1% { opacity: 1; transform: translateX(2px) scaleX(1.02); filter: contrast(1.8);}
}

.scaleAni{ animation: scaleAni 4s infinite;}
@keyframes scaleAni { 
    0%{ transform: scale(1);}
    50%{ transform: scale(0.9);}
    100% { transform: scale(1);}
}

/*--fixedBtnBox側邊浮動按鈕-----------------------------------------*/
.fixedBtnBox{ position: fixed; bottom: 115px; right: 0;/*按鈕定位(靠右)*/ z-index: 101; transform: translateX(100%);/*先把按鈕向右移出畫面*/ transition: transform 0.8s;}
.fixedBtnBoxShow{ transform: translateX(0);/*show的時候再讓按鈕移入畫面*/ transition: transform 0.8s;}
.fixedBtnBox li{ overflow: hidden; margin-bottom: 5px;}

.sideBtn{ float: left; height: 122px;/*調整按鈕大小*/}
.sideBtn img{ height: 100%;}
.sideBtn{ cursor: pointer; position: relative; z-index: 1;}

/*--sweetAlert-----------------------------------------*/
/*預設按鈕文字大小*/.swal2-actions button {font-size: 1.4rem !important;}


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

    /*--PC、M的隱藏開啟設定--*/
    .pcNo{ display: none;}
    .mNo{ display: block;}
    .mINBLpcNO{ display: none;}
    .pcINBLmNO{ display: inline-block;}

    /*區塊上下間距-----------------------------------------*/
    .bgPadT{ padding-top: 60px;}
    .bgPadT2{ padding-top: 15px;}

    .bgPadB{ padding-bottom: 90px;}

    .bgPadB2{ padding-bottom: 0;}
    .bgPadB3{ padding-bottom: 40px;}

    /*背景圖-----------------------------------------*/
    .bg1{ background-size: 100%;}
    .bg2, .bg3, .bg4, .bg5, .bg6{ background-attachment: fixed; background-size: 100%;}

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

    /*--contain-----------------------------------------*/
    /*區塊寬度*/
    .areaWidth{ max-width: 1000px; padding-top: 0;}
    .areaWidth + .areaWidth{ margin-top: 150px;}
    .areaWidth2{ max-width: 1300px;}
    .areaWidth3{ max-width: 900px;}
    .areaWidth4{ max-width: 650px;}

    /*主標寬度*/
    .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%;}

    /*--活動說明-----------------------------------------*/
    .noticeStyle1{ width: 100%; box-sizing: border-box;}

    /*--快速選單-----------------------------------------*/
    /* .quickMenuBox{ max-width: 1200px;} */

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

    /*--作者介紹-----------------------------------------*/
    .introBox > li:nth-child(2){ width: 60%; margin-top:0;}
    .introSocialList{ width: 80%; margin: 0 auto;}

    /*書籍*/
    .introBookList{ margin-top: 20px;}
    /*看更多*/
    .introMore{ margin-top: 15px;}

    /*--測驗贈品-----------------------------------------*/
    .giftBox{ max-width: 1015px; padding: 25px 50px; border-width: 12px;}

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

    /*裝飾圖動畫*/
    .decoAni1{ animation: decoAni1 8s infinite;}
    @keyframes decoAni1 { 
        0%{ transform: translateX(0) rotate(0);}
        50%{ transform: translateX(-60%) rotate(-10deg);}
        100% { transform: translateX(0) rotate(0);}
    }
    .decoAni2{ animation: decoAni2 5s infinite; animation-delay: 5s;}
    @keyframes decoAni2 { 
        0%{ transform: translateX(0);}
        50%{ transform: translateX(50%);}
        100% { transform: translateX(0);}
    }

    /*--測驗-----------------------------------------*/
    .gameBox{ max-width: 990px; padding: 10px; /*border-width: 12px;*/}
    .gameConWidth{ padding: 50px 5%;}

    /*問答區*/
    .gameQAbox{ padding: 0 0 5% 0;}
    .gameQA{ width: 100%;}
    .gameQues{ font-size: 3rem; line-height: 1.3; font-weight: 900;}
    .gameSelect{ /*padding: 10px 32px;*/ font-size: 1.8rem;}
    .gameSelect:hover{ background-color: #ffde25; /*border: #ff931f 3px solid; color: #ff931f;*/}

    /*題目圖*/
    .gameQApic{ overflow: hidden;}
    .gameQApic img{ float: left; width: 50%;}

    /*選項解答*/
    .gameSelect .answerIcon{ position: absolute; top: 16px; /*left: 15px;*/ font-size: 2.5rem;}
    .getAnswer .gameSelect:hover{ background-color: #cdcdcd; color: #000000;}
    .gameSelect.correct:hover{ background-color: #d2fe23; color: #000000; cursor: default;}
    .gameSelect.wrong:hover{ background-color: #ffffff; color: #000000; cursor: default;}
    
    .gameSelectPic .gameSelect .answerIcon{ top: 7px; left: 8px; font-size: 2rem;}

    /*結果區*/
    .resultTitle{ font-size: 3rem;}
    .resultInfo{ font-size: 2.4rem;}

    /*下一題*/
    .gameNextBtn:hover{ transform: scale(0.95);}

    /*結果按鈕*/
    .gameEndBtn{ width: 100%;}
    .gameEndBtn > li:last-child{ display: block;}

    /*社群分享*/
    .shareIconList{ width: 100%; max-width: 370px; margin: 15px auto 0 auto; padding: 12px 50px; /*background-color: #2fa77c; border: #000000 1px solid;*/ border-radius: 10px;}

    /*--推薦書-----------------------------------------*/
    .recomBookList{ width:100%; margin: 0 auto;}

    /*測驗拿優惠券*/
    .goTest{ margin-top: 15px;}

    /*書展bn*/
    .activeBn{ max-width: 600px; margin-top: 20px;}

    /*--fixedBtnBox側邊浮動按鈕-----------------------------------------*/
    .fixedBtnBox{ bottom: 110px;}
    .fixedBtnBox li{ margin-bottom: 8px;}

    .sideBtn{ height: 167px;/*調整按鈕大小*/}
    .sideBtn:hover{ transform: scale(0.98) translateX(5px);}

    /*--hover animate--------------------------------*/
    .introMore a{ display: block; transition: 0.4s;}
    .introMore a:hover{ transform: scale(0.9);}
}

/*--768-1024(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1024px) { 
    /*背景圖-----------------------------------------*/
    .bg1, .bg2, .bg3, .bg4, .bg5, .bg6{ background-attachment: inherit;}

    /*--contain-----------------------------------------*/
    /*區塊寬度*/
    .areaWidth2{ max-width: 95%;}
    /*主標寬度*/
    .mainTitle3{ width: 90%;}

    .wrapperHalf > li{ padding: 2%;}

}

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

    /*--header-----------------------------------------*/
    .headerPadWidth{ overflow: hidden;}
    .headerPadWidth .headerBox{ width: 166%; margin-left: -33%;}/*平板刊頭放大(讓左右背景超出可視範圍)*/
}

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

}

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

/*作者介紹-社群按鈕*/
.introSocialList img{ aspect-ratio: 1/1;}
/*作者介紹-書封*/
.introBookList img{ aspect-ratio: 363/520;}
/*作者介紹-看更多*/
.introMore img{ aspect-ratio: 750/500;}

/*測驗-下一題*/
.gameNextBtn img{ aspect-ratio: 700/240;}
/*測驗-結果圖*/
.resultPicBox img{ aspect-ratio: 1200/1864;}
/*測驗-結果按鈕*/
.gameEndBtn img{ aspect-ratio: 750/260;}
/*測驗-結果社群分享鈕*/
.shareIconList img{ aspect-ratio: 1/1;}

/*推薦書-書封*/
.recomBookList img{ aspect-ratio: 635/1090;}
/*推薦書-書展bn*/
.activeBn img{ aspect-ratio: 635/400;}


/*--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;}