@charset "utf-8";
/*思源黑體*/
@font-face {
    font-family: 'Noto Sans TC VF';
    src: url('https://taiwan-image.bookwalker.com.tw/fonts/NotoSansTC-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    /* font-family: 'Noto Sans TC VF', 'Microsoft JhengHei','Century Gothic',Arial,sans-serif; */
}

/* a:hover{ opacity:0.9;} *//*滑鼠滑入半透明*/
.cursorNone{ pointer-events: none;}
/*--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-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261115_bwmangacafe/images/bg1.jpg); background-position: top center; background-size: 400%;}
.bg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261115_bwmangacafe/images/bg2.jpg); background-position: top center; background-size: 400%;}
.bg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261115_bwmangacafe/images/bg3.jpg); background-position: top center; background-size: 400%;}
.bg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261115_bwmangacafe/images/bg4.jpg); background-position: top center; background-size: 400%;}
.bg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261115_bwmangacafe/images/bg5.jpg); background-position: top center; background-size: 400%;}
.bgDeco3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261115_bwmangacafe/images/bg_deco3.png); background-position: top center; background-size: 114%; background-repeat: no-repeat;}
.bgDeco4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261115_bwmangacafe/images/bg_deco4.png); background-position: top center; background-size: 114%; background-repeat: no-repeat;}
.bgDeco5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261115_bwmangacafe/images/bg_deco5.png); background-position: top center; background-size: 114%; 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;}

/*刊頭動畫*/
.headerPeople1 img{ animation: headerPeople1 15s infinite;}
@keyframes headerPeople1 { 
    0%{ transform: translateX(0) rotate(0);}
    50% { transform: translateX(-2%) translateY(1%) rotate(-2deg);}
    100% { transform: translateX(0) rotate(0);}
}

.headerPeople2 img{ animation: headerPeople2 18s infinite;}
@keyframes headerPeople2 { 
    0%{ transform: translateX(0) rotate(0);}
    50% { transform: translateX(1%) translateY(1%) rotate(2deg);}
    100% { transform: translateX(0) rotate(0);}
}

.headerPeople3 img{ animation: headerPeople3 21s infinite;}
@keyframes headerPeople3 { 
    0%{ transform: translateX(0) rotate(0);}
    50% { transform: translateX(-1.5%) translateY(1%) rotate(1deg);}
    100% { transform: translateX(0) rotate(0);}
}

.headerPeople4 img{ animation: headerPeople4 22s infinite;}
@keyframes headerPeople4 { 
    0%{ transform: translateX(0) rotate(0);}
    50% { transform: translateX(-1.5%) translateY(1%) rotate(-2.5deg);}
    100% { transform: translateX(0) rotate(0);}
}

/*其他動態*/
.aniScale{ animation: aniScale 1.5s infinite;}
@keyframes aniScale { 
    0%{ transform: scale(1);}
    50%{ transform: scale(0.95);}
    100% { transform: scale(1);}
} 
.aniRotate{ animation: aniRotate 1.5s infinite;}
@keyframes aniRotate { 
    0%{ transform: rotate(0);}
    50%{ transform: rotate(5deg);}
    100% { transform: rotate(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;}
.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%;}

/*--活動說明(style1)-----------------------------------------*/
.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;}

/*--活動說明(style2)-----------------------------------------*/
.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;}

/*--活動說明(點擊才展開)-----------------------------------------*/
.slideNotice, .openNotice{ overflow: hidden; width: 96%; margin: 15px auto 0 auto; border: #000000 8px solid;}
.slideNotice .noticeTitle, .openNotice .noticeTitle{ margin-bottom: 0; margin-top: 0; padding-bottom: 10px; font-size: 1.8rem; background-color: #000000; color: #ffffff;}
.noticeBgColor1{ background-color: #a1883d;}
.noticeBgColor2{ background-color: #aa7575;}
.noticeBgColor3{ background-color: #529097;}

/*內容*/
.noticeCon{ margin: 0 auto; padding: 20px 0 20px 30px;}
.noticeCon .notice2{ margin: 0 auto; color: #ffffff;}

/*項目小標*/
.noticeCon .noticeSecTitle{ color: #ffffff; font-size: 1.8rem;}

/*第二層項目符號*/
/* .noticeCon .notice2 > li > ul > li{ list-style-type: disc;} */

/*連結顏色*/
.noticeCon .notice2 a{ color: #82ff9b;}

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

/*--抓站上書封-----------------------------------------*/
/*書封外框(不需要就移除)*/
.webBookBorder1{ padding: 5px; border: #000000 3px solid; background-color: #a56733;}
.webBookBorder2{ padding: 5px; border: #000000 3px solid; background-color: #989ea6;}
/*書封比例*/
.webBookCover{ overflow: hidden; position: relative; width: 100%; aspect-ratio: 600/883;/*書封比例*/ border: #472610 1px solid;/*書封外框筆畫*/ background-color: #ffffff; box-sizing: border-box; border-radius: 6px;}
/*書封邊框+陰影*/
.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;}

/*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;/*補的白底可以改顏色*/
}

/*--活動限定-----------------------------------------*/
.giftBox{ width: 85%; margin: 0 auto;}

/*--個人作者區-----------------------------------------*/
.authorBox{ margin-top: 20px; background-color: #000000;}
.authorBox > li{ padding: 1px; box-sizing: border-box;}

/*介紹文字*/
.authorTxt{ padding: 3% 5%; font-size: 1.6rem; font-weight: bold; border: #000000 2px solid; border-top: #000000 1px solid;}
.authorBgColor1{ background-color: #a383b2;}
.authorBgColor2{ background-color: #ce8d8d;}
.authorBgColor3{ background-color: #9ab65d;}

/*--測驗-----------------------------------------*/
.gameBox img{ display: block;}
.gameBox{ overflow: hidden; width: 96%; margin: 15px auto 0 auto; padding: 1%; background-color: #dfba8f; border: #b46b00 5px solid; border-radius: 5px;}
.gameCon{ position: relative; /*padding: 1%;*/ border-radius: 5px; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261115_bwmangacafe/images/game_bg.jpg); background-position: top center; background-size: cover; border: #b46b00 3px solid;}
.gameH img{ width: 100%;}

.gameTilte,.gameStart{ margin: 0 auto;}
.gameTilte{ width: 90%; padding-top: 15px;}
.gameStart{ position: absolute; width: 75%; bottom: 4%; left: 0; right: 0; /*display: block; width: 70%; padding-bottom: 15px; text-decoration: none;*/}

.gameStart{ display: block; animation: scaleInOut 0.8s infinite;}
@keyframes scaleInOut{ 0% { transform: scale(1);} 50% { transform: scale(0.9);} 100% { transform: scale(1);} }

/*製作九宮格*/
.resultBg{ position: relative; margin-top: 20px;}
.resultPic{ position: absolute; width: 25%; cursor: pointer; border: #b46b00 1px solid;}
.result1{ top: 30.4%; left: 37.2%;}
.result2{ top: 66.8%; left: 20.7%;}
.result3{ top: 66.8%; left: 65.8%;}

/*手機長按下載*/
.resultPicNote{ margin-top: 10px; font-size: 1.4rem; color: #ffffff; font-weight: bold; text-align: center;}
/*按鈕*/
.gameCompleteBox{ width: 65%; max-width: 350px; margin: 0 auto;}
.gameBtnBox{ width: 88%; margin: 0 auto;}
.gameBtn{ display: block; /*width: 60%;*/ margin: 10px auto; /*background-color: #9e6eff; border: #7944e5 5px solid; border-radius: 100px;*/ cursor: pointer;}

/*社群分享*/
.shareTitle{ width: 90%; margin: 0 auto;}
.shareIconList{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 90%; max-width: 400px; margin: 15px auto 20px auto;}
.shareIcon{ display: block; width: 15%; transition: 0.4s;}
.shareIcon:hover{ transform: scale(0.9);}

/*首測贈品*/
.resultGift{ margin-top: 20px; text-align: center; font-weight: bold; text-shadow : #e7eddd 0 0 4px, #e7eddd 0 0 4px, #e7eddd 0 0 4px, #e7eddd 0 0 4px, #e7eddd 0 0 4px;}
.resultTitle{ margin-top: 15px; font-size: 2.5rem; color: #0034f7;}
.resultTitle b{ color: #1b865e;}
.resultInfo{ margin-top: 10px; font-size: 1.9rem; font-family: Microsoft JhengHei,"Century Gothic",Arial,sans-serif;}
.resultInfo a{ font-size: 1.6rem; color: #008bb3; 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;}

/*--sweetAlert-----------------------------------------*/
/*預設按鈕文字大小*/.swal2-actions button {font-size: 1.4rem !important;}
.custom-html-container{ margin: 1em 0 0.3em;}
.custom-btn-close, .custom-btn-close-black{ font-size: 4.5rem; margin-top: -5%; margin-right: -4%; box-shadow: none;}
.custom-btn-close:focus, .custom-btn-close-black:focus{ box-shadow: none;}
.custom-btn-close-black{ color: #000;}
.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-border{ border: #000 5px solid; border-radius: 20px;}

/*按鈕(關閉)*/
.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: 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{ color: #000000; margin-top: 15px; font-size: 2.5rem; font-weight: bold;}
.popTitle b{ color: #000000;}
.popCon{ margin-top: 10px; font-size: 2rem; font-weight: bold;}
.popCon a{ font-size: 1.6rem; color: #0092df;}
.popCon a:hover{ text-decoration: none;}

/*--sweetAlert搜尋-----------------------------------------*/
.searchInput{ width: 86%; height: 50px; margin-top: 20px; padding: 0 15px; font-size: 1.8rem; color: #4e4e4e; border: #000000 2px solid; border-radius: 5px;}
/*搜尋書籍*/
.searchBookList{ margin: 10px;}
.searchBookList > li{ cursor: pointer;}
.searchBookList > li img{ border: #b99064 2px solid; border-radius: 5px; overflow: hidden;}
.searchBookName{ margin-top: 5px; color: #7d5522; font-size: 1.6rem; line-height: 1.2; font-weight: bold; -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; max-height: 4.8rem; overflow: hidden; text-overflow: ellipsis; word-break: break-all;}

/*--書卡區-----------------------------------------*/
.maintitleNotice{ margin-top: 10px; font-size: 1.5rem; font-weight: bold; text-align: center; text-shadow : #e7eddd 0 0 4px, #e7eddd 0 0 4px, #e7eddd 0 0 4px, #e7eddd 0 0 4px, #e7eddd 0 0 4px;}

/*書卡*/
.ibonBox{ width: 94%; margin: 15px auto 0 auto; border: #6f3f1e 1px solid; background-color: rgba(255,255,255,0.5); border-radius: 15px;}

/*開發：已領取的按鈕（隱藏「我要領取」圖，在同位置改畫灰底「您已領取」）*/
.mauBtn{ container-type: inline-size;}
.mauBtn.isReceived{ animation: none; pointer-events: none;}
.mauBtn.isReceived img{ visibility: hidden;}
.mauBtn.isReceived::after{ content: '您已領取'; position: absolute; left: 28%; top: 80.5%; width: 44%; height: 12.5%; display: flex; align-items: center; justify-content: center; background-color: #9a9a9a; color: #ffffff; font-size: 5cqw; font-weight: bold; letter-spacing: 0.1em; border-radius: 50%;}

/*條件*/
.matchNum{ display: table; margin: 15px auto 0 auto; padding: 3px 20px 1px 20px; background-color: #ffffff; border: #ac7b5a 2px solid; font-size: 1.6rem; font-weight: bold; text-align: center; border-radius: 100px;}

/*--推薦書區-----------------------------------------*/
.recomtItle{}
.bookBorderBox{ margin-top: -5.2%; padding: 3% 2% 2% 2%; background-color: rgba(232,151,56,0.25); border: #472610 1px solid;}
.recomMore{ padding-top: 1.5%;}

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


/*--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, .bg2, .bg3, .bg4, .bg5{ background-attachment: fixed; background-size: 100%;}
    .bgDeco3, .bgDeco4, .bgDeco5{ background-attachment: fixed; 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%;}

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

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

    /*--活動說明(點擊才展開)-----------------------------------------*/
    .slideNotice, .openNotice{ width: 100%; margin-top: 25px; box-sizing: border-box;}
    .noticeCon{ padding: 35px 5% 40px 7%;}

    /*--活動限定-----------------------------------------*/
    .giftBox{ width: 80%;}

    /*--個人作者區-----------------------------------------*/
    .authorBox{ max-width: 1000px; margin: 30px auto 0 auto;}

    /*介紹文字*/
    .authorTxt{ max-width: 1000px; margin: 0 auto; box-sizing: border-box; padding: 2% 4%; font-size: 1.9rem;}

    /*--測驗-----------------------------------------*/
    .gameBox{ max-width: 990px; width: 94%; padding: 15px; border-width: 12px;}
        
    .gameTilte{ width: 60%; padding-top: 40px;}
    .gameGift{ width: 60%;}
    .gameStart{ width: 55%; bottom: 2%;}

    /*製作九宮格*/
    .resultBg{ width: 70%; margin: 40px auto 0 auto;}
    /*按鈕*/
    .gameBtnBox{ width: 60%; margin: 15px auto 0 auto;}

    /*社群分享*/
    .shareTitle{ max-width: 400px; margin: 0 auto;}
    .shareIconList{ margin: 15px auto 40px auto;}

    /*首測贈品*/
    .resultGift{ margin-top: 40px;}
    .resultTitle{ font-size: 2.8rem;}
    .resultInfo{ font-size: 2.3rem;}

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

    /*--書卡區-----------------------------------------*/
    /*書卡*/
    .ibonBox{ max-width: 1600px; margin: 30px auto 0 auto; padding: 2%;}

    /*--推薦書區-----------------------------------------*/

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

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

    /*--hover animate--------------------------------*/
    .gameCompleteBox, .resultPic, .gameStart .gameStartBtn img,
    .gameBtnBox > li:nth-child(1) .gameBtn, 
    .gameBtnBox > li:nth-child(3) .gameBtn{ display: block; transition: 0.4s;}

    .gameCompleteBox:hover,
    .gameBtnBox > li:nth-child(1) .gameBtn:hover, 
    .gameBtnBox > li:nth-child(3) .gameBtn:hover{ transform: scale(0.9);}
    .resultPic:hover{ transform: scale(1.1);}

    .ibonBox.listBox li a:hover{ transform: scale(1.15) translateY(-25px);}

    .gameStart .gameStartBtn img:hover{ transform: rotate(5deg);}


}

/*--768-1024(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1024px) { 
    /*背景圖-----------------------------------------*/
    .bg1, .bg2, .bg3, .bg4, .bg5{ 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) {
}

/*結果圖底圖*/
.resultBgPic{ aspect-ratio: 1000/1553;}
/*彈窗書籍搜尋列表*/
.searchBookList img{ aspect-ratio: 280/413;}

.bookshelfList img{ aspect-ratio: 630/842;}
.gameCompleteBox .gameBtn img{ aspect-ratio: 650/210;}
.gameBtnBox .gameBtn img{ aspect-ratio: 650/270;}
.shareTitle img{ aspect-ratio: 750/159;}
.shareIconList img{ aspect-ratio: 1/1;}
.ibonBox img{ aspect-ratio: 750/725;}
.recomtItle img{ aspect-ratio: 800/160;}


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