@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;}

/*--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;}
.txtYellowGreen{ color: #c4fa79;}
.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;}

/*背景圖-----------------------------------------*/
.bgColor1{ background-color: #fff0e0;}
.bgColor2{ background-color: #0c5f50;}
.bgColor3{ background-color: #84304c;}
.bgColor4{ background-color: #7b4154;}
.bgLine{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260203_bltrain/images/bg_line.png); background-position: top center; background-size: 100%; background-repeat: repeat-y;}
.bgDeco1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260203_bltrain/images/bg_deco1.png); background-position: top center; background-size: 400%; background-repeat: no-repeat;}
.bgDeco2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260203_bltrain/images/bg_deco2.png); background-position: top center; background-size: 300%; background-repeat: no-repeat;}
.bgDeco3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260203_bltrain/images/bg_deco3.png); background-position: top center; background-size: 400%; background-repeat: no-repeat;}

/*--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 2s infinite;}
@keyframes headerDrop1 { 
    0%{ transform: translateX(0)}
    50%{ transform: translateX(-10px);}
    100% { transform: translateX(0);}
}

.headerDrop2{ animation: headerDrop2 2.5s infinite;}
@keyframes headerDrop2 { 
    0%{ transform: translateX(0) translateY(0) scale(1)}
    50%{ transform: translateX(-2px) translateY(3px) scale(1.01)}
    100% { transform: translateX(0) translateY(0) scale(1)}
}

/*多本優惠標題動畫*/
.transAni{ animation: transAni 2s infinite; display: block;}
@keyframes transAni { 
    0%{ transform: translateX(0)}
    50%{ transform: translateX(15px);}
    100% { transform: translateX(0);}
}
/*--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;}

/*常用(定位+圖片block)*/
.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%;}

/*--活動說明-----------------------------------------*/
.noticeStyle2{ margin: 15px auto 0 auto; padding: 30px 5% 20px 5%; background-color: #000000; border: #9d566a 8px solid; border-radius: 15px;}
.noticeStyle2 .notice{ max-width: 1000px; margin: 0 auto; color: #ffffff;}
.noticeStyle2 .noticeTitle{ color: #ffa4be; text-align: left;}
.noticeStyle2 .noticeSecTitle{ color: #ffa4be;}
.noticeStyle2 .notice > li{ list-style-type: auto;}
.noticeStyle2 .notice > li a{ color: #96e8ff;}

/*--書架+測驗文案-----------------------------------------*/
.bookshelfBox{ max-width: 500px; margin: 0 auto;}

/*--獨家-----------------------------------------*/
.bwonlyBox{ padding-top: 30%;}
.bwonlyList{ max-width: 350px; margin: 0 auto; padding-bottom: 15%;}
.bwonlyBox .bwonlyList:last-child{ padding-bottom: 0;}
.bwonlyTitle{ padding-bottom: 8px;}

/*--多本優惠-----------------------------------------*/
.maintitle2_2{ padding-top: 5px;}
.bookBox{ width: 88%; margin: 0 auto;}

/*--測驗-----------------------------------------*/
/*--測驗封面--*/
.gameBox img{ display: block;}
.gameBox{ overflow: hidden; width: 94%; margin: 0 auto; padding: 1%; background-color: #534c44; 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: #adadad 2px solid; background-color: #1f2028; background-size: cover; border-radius: 20px;}

/*進入測驗鈕*/
.gameEnterBtn{ position: absolute; top: 49.2%; left: 79%; width: 17.4%;}
.gameEnterBtn img{ animation: gameEnterBtn 0.8s infinite; transition: 0.4s;}
.gameEnterBtn img:hover{ transform: scale(1.06);}
@keyframes gameEnterBtn{ 
    0% { filter: drop-shadow( rgba(255, 213, 0, 1) 0 0 15px) drop-shadow( rgba(255, 213, 0, 1) 0 0 15px) drop-shadow( rgba(255, 213, 0, 1) 0 0 15px) drop-shadow( rgba(255, 213, 0, 1) 0 0 15px) drop-shadow( rgba(255, 213, 0, 1) 0 0 15px)  drop-shadow( rgba(255, 213, 0, 1) 0 0 15px);} 
    50% { filter: drop-shadow( rgba(255, 213, 0, 0.6) 0 0 6px) drop-shadow( rgba(255, 213 ,0, 0.6) 0 0 6px) drop-shadow( rgba(255, 213 ,0, 0.6) 0 0 6px) drop-shadow( rgba(255, 213 ,0, 0.6) 0 0 6px) drop-shadow( rgba(255, 213 ,0, 0.6) 0 0 6px)  drop-shadow( rgba(255, 213 ,0, 0.6) 0 0 6px);} 
    100% { filter: drop-shadow( rgba(255, 213, 0, 1) 0 0 15px) drop-shadow( rgba(255, 213, 0, 1) 0 0 15px) drop-shadow( rgba(255, 213, 0, 1) 0 0 15px) drop-shadow( rgba(255, 213, 0, 1) 0 0 15px) drop-shadow( rgba(255, 213, 0, 1) 0 0 15px)  drop-shadow( rgba(255, 213, 0, 1) 0 0 15px);}
}
/*手機版-刷卡動畫*/
.mCardAnimate{ position: absolute; top: 53%; left: 75.4%; width: 21.6%; pointer-events: none; animation: mCardAnimate 1s infinite; transition: 0.4s;}
@keyframes mCardAnimate{ 
    0% { transform: translateY(0);} 
    50% { transform: translateY(35px);} 
    100% { transform: translateY(0);}
}

/*測驗背景*/
.gameConBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260203_bltrain/images/game_bg1.png); background-position: bottom center; background-size: 100%; background-repeat: no-repeat;}
.gameConBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260203_bltrain/images/game_bg2.png); background-position: bottom center; background-size: 100%; background-repeat: no-repeat;}

/*前導文字*/
.enterTxt{ padding: 6% 8%; font-size: 1.9rem; color: #ffffff; text-align: center; font-weight: 600;}
.impro{ font-size: 2.2rem;}

/*開始測驗鈕*/
.gameStartBtn{ display: block; padding-bottom: 20%; margin: 0 auto; width: 68%; animation: transX 0.8s infinite;}
@keyframes transX{ 
    0% { transform: translateX(-5px);} 
    50% { transform: translateX(5px);} 
    100% { transform: translateX(-5px);} 
}

.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;}
/* .gameTilte{ animation: bling 3s infinite;} */

/*問答區*/
.gameQAbox{ display: flex; align-items: stretch; width: 94%; padding: 0 0 20% 0; margin: 0 auto; font-family: 'Noto Sans TC VF', Arial, Helvetica, sans-serif;}
.gameQAlist{ padding-top: 8px;}
.gameQues{ margin: 30px 8px 0 8px; padding: 0 8px; font-size: 2.3rem; line-height: 1.3; color: #c8ff7b; font-weight: bold;}

/*選項*/
.gameSelect{ position: relative; padding: 10px 20px 10px 20px; font-size: 1.9rem; line-height: 1.4; color: #0c5f50; background-color: #ffffff; border: #c4c4c4 4px solid; border-left: #c4c4c4 15px solid; font-weight: bold; border-radius: 8px; cursor: pointer;}
.gameSelect:last-child{ margin-bottom: 0;}

/*進度條*/
/* .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;} */


/*結果區*/
.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.5rem; color: #ffffff;}
.resultTitle b{ color: #c8ff7b;}
.resultInfo{ margin-top: 10px; font-size: 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: 18px auto 40px auto;}
.gameEndBtn > li{ cursor: pointer;}
.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; /*background-color: #000; border: #000 8px solid; border-radius: 10px;*/}
.resultPicNote{ margin-top: 5px; font-size: 1.5rem; color: #e5e5e5; text-align: center;}

/*結果推薦書*/
.resultBook{ position: absolute; bottom: 3.5%; right: 7.5%; width: 28%; filter: drop-shadow( rgba(255, 213, 0, 1) 0 0 5px) drop-shadow( rgba(255, 213, 0, 1) 0 0 5px); animation: scaleInOut 1s infinite;}
@keyframes scaleInOut{ 
    0% { transform: scale(1); filter: drop-shadow( rgba(255, 213, 0, 1) 0 0 5px) drop-shadow( rgba(255, 213, 0, 1) 0 0 5px);} 
    50% { transform: scale(1.03); filter: drop-shadow( rgba(255, 213, 0, 0) 0 0 5px) drop-shadow( rgba(255, 213, 0, 0) 0 0 5px);} 
    100% { transform: scale(1); filter: drop-shadow( rgba(255, 213, 0, 1) 0 0 5px) drop-shadow( rgba(255, 213, 0, 1) 0 0 5px);} 
}

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

/* .shareTo{ display: block; width: 80%; margin: 0 auto;} */
.shareTitle{ font-size: 1.8rem; color: #000;}
.shareTitle b{ font-size: 2.2rem; color: #df3f24;}

.shareIconList{ max-width: 350px; margin: 15px auto 10px auto;}

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

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

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


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

    /*背景圖-----------------------------------------*/
    /* .bgLine{ background-attachment: fixed; background-size: 100%;} */
    .bgDeco1, .bgDeco2{ background-attachment: fixed; background-size: 100%;}
    .bgDeco3{ background-size: 100%;}

    .border1, .border2, .border3{ border-width: 15px;}
    .border2{ padding: 25px;}
    .border3{ padding: 25px;}

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

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

    /*--獨家-----------------------------------------*/
    .bwonlyBox{ padding-top: 15%;}
    .bwonlyList{ padding-bottom: 10%; max-width: 800px;}

    /*--多本優惠-----------------------------------------*/
    .maintitle2_2{ padding-top: 10px;}
    .bookBox{ margin-top: 25px;}

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

    /*進入測驗鈕*/
    .gameEnterBtn{ top: 49.4%; left: 66.6%; width: 9.6%;}
    .gameEnterBtn img{ animation: gameEnterBtn 0.8s infinite; transition: 0.4s;}
    @keyframes gameEnterBtn{ 
        0% { filter: drop-shadow( rgba(255, 213, 0, 1) 0 0 15px) drop-shadow( rgba(255, 213, 0, 1) 0 0 15px);} 
        50% { filter: drop-shadow( rgba(255, 213, 0, 0.4) 0 0 10px) drop-shadow( rgba(255, 213 ,0, 0.4) 0 0 10px);} 
        100% { filter: drop-shadow( rgba(255, 213, 0, 1) 0 0 15px) drop-shadow( rgba(255, 213, 0, 1) 0 0 15px);}
    }
    /*電腦版-滑鼠樣式(刷卡進站)*/
    .cursorStyle1{ cursor: url(https://cp-img.bookwalker.com.tw/event/2026/20260203_bltrain/images/mouse1.cur) 80 128, url(https://cp-img.bookwalker.com.tw/event/2026/20260203_bltrain/images/mouse1.png) 80 128, default;}

    /*前導文字*/
    .enterTxt{ padding: 5% 10%; font-size: 2rem;}
    .impro{ font-size: 2.6rem;}

    /*開始測驗鈕*/
    .gameStartBtn{ padding-bottom: 200px; width: 36%;}

    /*問答區*/
    .gameQAbox{ width: 100%; padding: 0 0 5% 0;}
    .gameQAlist{ padding-top: 10px; padding-bottom: 80px;}
    .gameQues{ margin: 30px 0 0 0; font-size: 3rem; line-height: 1.3; font-weight: 900;}

    /*選項*/
    .gameSelect{ padding: 14px 20px 14px 20px; font-size: 2rem;}
    .gameSelect:hover{ border-color: #adc700;}

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

    /*結果按鈕*/
    .gameEndBtn{ width: 100%; margin-top: 10px; margin-bottom: 110px;}
    .gameEndBtn > li:last-child{ display: block;}

    /*社群分享*/
    .shareIconList{ max-width: 420px;}

    /*--hover animate--------------------------------*/
    .resultBook img, .gameStartBtn img, .gameEndBtn img, .bwonlyList a, .transAni img{ display: block; transition: 0.4s;}
    .resultBook img:hover{ transform: rotate(2deg);}
    .gameStartBtn img:hover, .gameEndBtn img:hover{ transform: rotate(-4deg) scale(0.95);}
    .bwonlyList a:hover{ transform: scale(0.95);}
    .transAni img:hover{ transform: scale(0.9);}
}

/*--768-1024(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1024px) { 
    /*背景圖-----------------------------------------*/
    .bgDeco1, .bgDeco2, .bgDeco3{ background-attachment: inherit;}

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

    .wrapperHalf > li{ padding: 2%;}

    /*電腦版-滑鼠樣式(刷卡進站)*/
    .cursorStyle1{ cursor: pointer;}
    /*手機版-刷卡動畫*/
    .mCardAnimate.pcNo{ display: block; position: absolute; top: 50%; left: 64.8%; width: 11.6%; pointer-events: none; animation: mCardAnimate 1s infinite; transition: 0.4s;}
    @keyframes mCardAnimate{ 
        0% { transform: translateY(0);} 
        50% { transform: translateY(40px);} 
        100% { transform: translateY(0);}
    }

}

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

}

/*--1300以下------------------------*/
@media screen and (min-width:767px) and (max-width:1300px) { 
    .bookBox{ width: 70%;}
    .listBox.ul-pc4.bookBox > li{ width: 50% !important;}
}

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

.gameStartBtn img, .gameEndBtn img{aspect-ratio: 750/226;}
.shareIconList img{ aspect-ratio: 1/1;}

.bwonlyBox li:nth-child(1) > a:nth-child(1) img{ aspect-ratio: 750/172;}
.bwonlyBox li:nth-child(1) > a:nth-child(2) img{ aspect-ratio: 750/1026;}
.bwonlyBox li:nth-child(2) > img{ aspect-ratio: 894/1428;}

.bookBox img{ aspect-ratio: 750/1260;}


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