@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: #a039be;}
.txtBlue{ color: #2b36c9;}
.txtGreen{ color: #04ac00;}
.txtRed{ color: #df3f24;}
.txtBrown{ color: #885d00;}
.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: #cda4ff;}
.bgColor2{ background-color: #a57ada;}
.bgColor3{ background-color: #caf274;}
.bg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251015_myera/images/bg1.png); background-position: top center; background-size: 130%;}
.bg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251015_myera/images/bg2.png); background-position: top center; background-size: 155%;}

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

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

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

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

.headerP4 img{ animation: headerPeople4 20s 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);}
}

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

.headerP1m img{ animation: headerP1m 10s infinite;}
@keyframes headerP1m {
    0%{ transform: translateX(0) rotate(0);}
    50% { transform: translateX(-1%) rotate(-1deg);}
    100% { transform: translateX(0) rotate(0);}
}

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

.headerP3m img{ animation: headerP3m 13s infinite;}
@keyframes headerP3m {
    0%{ transform: translateX(0) rotate(0);}
    50% { transform: translateX(1.5%) rotate(1deg);}
    100% { transform: translateX(0) rotate(0);}
}

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

.headerP5m img{ animation: headerP5m 15s infinite;}
@keyframes headerP5m {
    0%{ transform: translateX(0) rotate(0);}
    50% { transform: translateX(-1%) translateY(-2%) rotate(-2deg);}
    100% { transform: translateX(0) 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;}
.areaWidth4{ position: relative; width: 96%; margin: 0 auto;}
.areaWidth5{ position: relative; width: 98%; 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;}
.insideTitle2{ width: 100%; 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%;}

/*--社群分享抽點數-----------------------------------------*/
.giftBox2{ margin-top: 15px;}
.giftBox2 > li:first-child img{ width: 90%; margin:  0 auto;}

/*馬上去測驗*/
.gift3Btn{ position: absolute; top: -14%; right: -6%; width: 56%;}
/*IG、Threads*/
.gift4Btn, .gift5Btn, .gift6Btn{ width: 21%; position: absolute;  top: 39%;}
.gift4Btn{ right: 61%; }
.gift5Btn{  right: 35.5%;}
.gift6Btn{ right: 11%;}


/*--測驗-----------------------------------------*/
/*--測驗封面--*/
/*2個問答外框顏色*/
.game{ max-width: 675px; margin: 0 auto;}
.gameA, .gameB, .game{ padding: 5px; border: #3235c3 1px solid; border-radius: 30px;}
.gameA .gameBorder, .gameB .gameBorder, .game .gameBorder{ position: relative; /*padding: 3px;*/ border: #3235c3 1px solid; border-radius: 25px; overflow: hidden;}
.gameA .gameCon, .gameB .gameCon, .game .gameCon{ /*padding: 8% 2%;*/ background-repeat: repeat; border-radius: 10px;}

.gameA{ background-color: #c9f8ef;}
.gameA .gameCon{ background-color: #d4ff78; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251015_myera/images/game_bg_a.jpg); background-size: contain;}

.gameB{ background-color: #f4ffdd;}
.gameB .gameCon{ background-color: #d4ff78; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251015_myera/images/game_bg_b.jpg); background-size: contain;}

.game{ background-color: #f4ffdd;}
.game .gameCon{ background-color: #d4ff78;}

/*測驗GOGO*/
.gameChoice{ position: absolute; bottom: 4%; left: 0; cursor: pointer; animation: gameChoice 1.5s infinite;}
@keyframes gameChoice {
    0%{ transform: scale(1);}
    50%{ transform: scale(0.9);}
    100% { transform: scale(1);}
}
.gameChoice img{ transition: 0.4s;}
.gameChoice img:hover{ transform: rotate(5deg);}
.gameChoice img:active{ transform: translateY(30px);}
.recommBtn{ animation: gameChoice 1.5s infinite;}
/*--前導說明--*/
.gameIntroBox{ padding-top: 20px;}
/*標題*/
.gameIntroTitle{ width: 100px; margin: 0 auto; padding: 4px 5px; font-size: 2rem; font-family: 'Noto Sans TC VF'; font-weight: 800; text-align: center; color: #d4ff78; background-color: #000000;}
.gameIntroTitlePic{ width: 90%; max-width: 450px; margin: 0 auto;}
/*文案*/
.gameIntroTxt{ width: 90%; margin: 0 auto; font-size: 1.9rem; font-family: 'Noto Sans TC VF'; font-weight: 800; text-align: center; line-height: 1.3;}
.gameIntroTxt p{ margin-bottom: 20px;}
.gameIntroTxt p:last-child{ margin-bottom: 0;}

/*開始測驗鈕*/
.gameStartBtn{ display: block; max-width: 500px; margin: 0 auto; cursor: pointer; transition: 0.4s; animation: gameChoice 1.5s infinite;}
.gameStartBtn img{ transition: 0.4s;}
.gameStartBtn img:hover{ transform: rotate(5deg);}

/*--問答區--*/
.gameQAbox{ /*display: flex; align-items: stretch;*/ padding: 5% 5% 5% 5%;}
.gameQA{ width: 80%; max-width: 375px; margin: 15px auto 0 auto;}
.gameQues{ width: 80%; margin: 0 auto; border: #000000 1px solid;}
.gameSelect{ position: relative; margin: 12px 0; padding: 10px 30px; background-color: #000000; font-size: 1.9rem; color: #d4ff78; font-weight: bold; border-radius: 100px; cursor: pointer;}
.gameSelect:last-child{ margin-bottom: 0;}
/*題目書封-漸層loading動畫*/
.gameQues{ aspect-ratio: 750 / 1126; background: linear-gradient(-45deg, #eee 25%, #ddd 37%, #eee 63%); background-size: 400% 100%;  animation: skeleton-loading 1.4s ease infinite;}
@keyframes skeleton-loading {
    0%{ background-position: 100% 50%;}
    100%{ background-position: 0 50%;}
}

/*進度條*/
.gameBar{ position: relative; width: 96%; margin: 0 auto; border: #00bdad 2px solid; background-color: #ffffff; border-radius: 5px;}
.gameBar img{ width: 95%; max-width: 300px;}
.gameBarTxt{ position: relative; z-index: 2;}
.gameBarPercent{ position: absolute; bottom: 0; left: 0; height: 100%; background-color: #78e0d7;}

/*--結果區--*/
.gameEndGift{ padding-top: 15px; font-size: 2rem; font-family: 'Noto Sans TC VF'; font-weight: 700; text-align: center;}
.gameEndGift a{ display: inline-block !important;}
/*標題*/
.resultTitle{ margin-top: 15px; font-size: 2.5rem;}
/*贈品*/
.resultInfo{ width: 80%; margin: 10px auto 0 auto; font-size: 2rem; color: #a359ff;}
.resultInfo p{ margin-bottom: 12px; line-height: 1.2;}
.resultInfo a{ font-size: 1.6rem; color: #3c78ff; text-decoration: none;}
.resultInfo a:hover{ text-decoration: underline;}

/*結果圖*/
.gameEndResult{ padding-top: 10px;}

/*圓餅圖*/
.pieChartBorder{ position: absolute; top: 45.3%; left: 3.7%; width: 49%; aspect-ratio: 1 / 1;}
.pieChartBox{ position: absolute; top: 45.8%; left: 4.8%; width: 46.9%; z-index: 1; aspect-ratio: 1 / 1; display: flex; /*padding: 4px; box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5); border: rgba(0,0,0,0.5) 5px solid;*/ background-color: rgba(0,0,0,0.5); border-radius: 50%; align-items: center; justify-content: center;}
.pieChart{ height: 100%; display: block; border-radius: 50%;}
.pieChartCenter{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; width: 73%;}
/*圓餅圖：標示項目百分比*/
.pieChartList{ overflow: hidden; position: absolute; right: 4%; top: 47%; width: 42%;}
.pieChartList > li{ margin-bottom: 7%;}
.listBox li .pieChartList li{ padding: 0;}
/*年代+百分比*/
.pieChartItem, .pieChartNum{ padding: 3% 4%; /*border: #000000 1px solid;*/ font-family: Verdana, Arial; font-size: 1.5rem; font-weight: 900; line-height: 1; position: relative; z-index: 1;}
.pieChartItem{ float: left;}
.pieChartNum{ float: right;}
/*百分比條*/
.pieChartBar{ overflow: hidden; clear: both; position: relative; width: calc(100% - 2px); /*height: 5px;*/ margin: 0 auto; background-color: #ffffff; border: #000000 1px solid; border-radius: 5px;}
.pieChartPer{ position: absolute; bottom: 0; left: 0; height: 100%;}
.pieChartList > li:nth-child(1) .pieChartPer{  background-color: #447cff;}
.pieChartList > li:nth-child(2) .pieChartPer{  background-color: #54c4c6;}
.pieChartList > li:nth-child(3) .pieChartPer{  background-color: #be8330;}
.pieChartList > li:nth-child(4) .pieChartPer{  background-color: #ffe851;}
.pieChartList > li:nth-child(5) .pieChartPer{  background-color: #ff8832;}
.pieChartList > li:nth-child(1) .pieChartNum{  color: #2868ff;}
.pieChartList > li:nth-child(2) .pieChartNum{  color: #1eacae;}
.pieChartList > li:nth-child(3) .pieChartNum{  color: #925e17;}
.pieChartList > li:nth-child(4) .pieChartNum{  color: #cfb509;}
.pieChartList > li:nth-child(5) .pieChartNum{  color: #ff8127;}

/*書籍列表*/
.resultBookBox{ position: absolute; top: 70.5%; left: 0; right: 0; width: 92%; margin: 0 auto;}
.resultBookTitle{ width: 40%; padding-left: 5px; padding-bottom: 5px;}
/*看更多作品*/
.gameMoreBook{ display: block; padding: 10px 0; background-color: #0005e4;}
.gameMoreBook img{ width: 70%; max-width: 250px; margin: 0 auto;}

/*測驗結果按鈕*/
.gameEndBtnBox{ width: 90%; margin: 0 auto; padding-top: 15px; padding-bottom: 30px;}
/*社群分享再抽*/
.shareNote .pcNo{ width: 65%; max-width: 360px; margin: 0 auto;}
/*按鈕*/
.gameEndBtn{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 2.2rem; font-family: 'Noto Sans TC VF'; font-weight: 800; text-align: center; color: #ffffff;}
.gameEndBtn > li{ flex: 1; padding: 12px 0 15px 0; background-color: #000000; border: #d4ff78 3px solid; box-shadow: #402dff 0 8px 0; line-height: 1; border-radius: 100px; cursor: pointer;}
.gameEndBtn a{ display: block;}

/*--活動說明(書架)-----------------------------------------*/
.noticeStyle1{ margin: 0 auto; padding: 30px 5% 20px 5%; background-color: #a57ada; border-radius: 15px;}
.noticeStyle1 .notice2{ max-width: 1400px; margin: 0 auto; color: #ffffff;}
.noticeStyle1 .noticeTitle{ color: #b6ff85; text-align: left;}
.noticeStyle1 .noticeSecTitle{ color: #000000;}
.noticeStyle1 .notice2 > li > ul > li{ list-style-type: disc;}
.noticeStyle1 .notice2 > li > ul > li a{ color: #82feff;}

/*--作者介紹-----------------------------------------*/
/*頭圖*/
.authorHead{ width: 90%; margin: 0 auto;}
/*介紹文*/
.authorIntro{ width: 100%; margin-left: -10%; margin-bottom: 15px;}
/*書籍小標*/
.authorTitle2{ pointer-events: none;}
/*書*/
.authorBook{ animation: authorBook 2s infinite;}
@keyframes authorBook {
    0%{ transform: scale(1);}
    50%{ transform: scale(0.93);}
    100% { transform: scale(1);}
}

/*--作品推薦-----------------------------------------*/
.recommList{ padding: 2%;}
/*放大鏡*/
.recommSee{ position: absolute; top: 20%; left: 3%; width: 13%; cursor: pointer;}
/*書籍列表*/
.recommBook{ margin-top: -27%; padding: 8px 8px 15px; border-radius: 0 0 20px 20px; position: relative; z-index: 1;}
.recommBook.color1{ background-color: rgba(63,63,63,0.9);}
.recommBook.color2{ background-color: rgba(67,110,111,0.9);}
.recommBook.color3{ background-color: rgba(124,85,78,0.9);}
.recommBook.color4{ background-color: rgba(114,79,142,0.9);}
.recommBook.color5{ background-color: rgba(208,108,71,0.9);}
.recommBook.color6{ background-color: rgba(20,109,119,0.9);}
/*更多經典作品*/
.recommBtn{ width: 90%; max-width: 600px; margin: 0 auto;}

/*--sweetAlert共用樣式設定-----------------------------------------*/
/*預設按鈕文字大小(一定要放)*/.swal2-actions button{ font-size: 1.4rem !important;}
/*彈窗內容區*/
.custom-html-container{ margin: 1em 0 0.3em;}
/*右上(X)關閉鈕*/
.custom-btn-close{ font-size: 4.5rem;/*(X)按鈕大小*/ color: #000000;/*(X)按鈕顏色*/ margin-top: -5%;/*位置可自訂*/ margin-right: -4%;/*位置可自訂*/ box-shadow: none;}
.custom-btn-close:focus{ box-shadow: none;}

/*移除套件按鈕預設樣式*/
.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 { padding: 0; margin: 0.625em; font-size: 1.4rem; cursor: pointer;}
/*文字按鈕*/
.custom-btn-styled .sweetBtn{
    display: inline-block;
    margin: 0;
    padding: 20px 20px 22px 20px; /*按鈕內間距*/
    min-width: 200px; /*按鈕最小寬度*/
    font-size: 2rem; /*按鈕字體大小*/
    background-color: #000000; /*按鈕底色*/
    color: #fff; /*按鈕文字顏色*/
    border-radius: 5px; /*按鈕圓角*/
    font-family: 微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif; /*按鈕字體*/
    font-weight: bold; line-height: 1; text-decoration: none;
}
/*可自行新增需要的顏色按鈕*/
.custom-btn-styled .sweetBtn.red{ background-color: #a50000; color: #fff;} /*紅色按鈕*/
.custom-btn-styled .sweetBtn.blue{ background-color: #0085de; color: #fff;} /*藍色按鈕*/

/*圖片按鈕*/
.custom-btn-styled .sweetPicBtn{
    width: 145px;/*按鈕寬度*/
}

/*彈窗外框(不需要可直接刪除或隱藏)*/
.custom-border{
    /*外框顏色+粗細*/
    border: #000 5px solid;
    /*外框圓角*/
    border-radius: 20px;
}

/*[常用版型]分享結果圖(沒用到可刪除)-----------------------------------------*/
/*分享鈕*/
.shareIconList{ max-width: 500px; margin: 0 auto;}
/*手機長按儲存*/
.shareNotice{ margin-top: 10px; font-size: 1.6rem;}
/*分享圖*/
.sharePic{ max-width: 500px; margin: 5px auto 0 auto;}

/*圖片預設比例*/
.shareIconList img{ aspect-ratio: 1/1;}
/* .sharePic img{ aspect-ratio: 750/1165;} */
/*end-[常用版型]分享結果圖(沒用到可刪除)-----------------------------------------*/

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

/*--sweetAlert推薦書-----------------------------------------*/
.alertRecommBook{ padding: 0 5%; font-size: 1.6rem; text-align: left;}
.alertRecommBook > li img{ max-width: 250px; margin: 0 auto;}
.alertRecommBook > li:nth-child(1){ width: 100%;}
.alertRecommBook > li:nth-child(2){ width: 100%;}

.alertRecommName{ display: inline-block; padding: 6px 8px; background-color: #000; font-size: 1.6rem; color: #fff; font-weight: bold; line-height: 1;}
.alertRecommCon{ margin-top: 10px; font-size: 2rem; color: #000; font-weight: bold;}
.alertRecommBtn{ float: right; display: inline-block !important; margin-top: 10px; padding: 8px 15px; background-color: #000; font-size: 1.8rem; color: #fff; font-weight: bold; text-decoration: none; border-radius: 100px;}

/*--fixedBtnBox側邊浮動按鈕-----------------------------------------*/
.fixedBtnBox{ position: fixed; bottom: 120px; 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: 170px;/*調整按鈕大小*/}
.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{ 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;}
    .areaWidth4, .areaWidth5{ max-width: 1200px;}

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

    /*--社群分享抽點數-----------------------------------------*/
    .giftBox2{ margin-top: 50px;}
    .giftBox2 > li:first-child img{ width: 96%; margin:  0 auto;}

    /*馬上去測驗*/
    .gift3Btn{ top: -1%; right: -1%; width: 45%;}
    /*IG、Threads*/
    .gift4Btn, .gift5Btn, .gift6Btn{ width: 13%; position: absolute; top: 19%;}
    .gift4Btn{ right: 31%;}
    .gift5Btn{ right: 16.5%;}
    .gift6Btn{ right: 3%;}

    /*--測驗-----------------------------------------*/
    /*攻受外框顏色*/
    .gameA, .gameB, .game{ padding: 13px; border-radius: 40px;}
    .gameA .gameBorder,.gameB .gameBorder, .game .gameBorder{ border-radius: 30px;}

    /*--前導說明--*/
    .gameIntroBox{ padding-top: 40px;}
    /*文案*/
    .gameIntroTxt{ font-size: 2.1rem;}
    /*開始測驗鈕*/
    .gameStartBtn{ padding-bottom: 15px;}

    /*--問答區--*/
    .gameQAbox{ padding: 5% 5% 5% 5%;}
    .gameQA{ width: inherit; max-width: inherit; margin: 10px auto 0 auto;}
    .gameQA > li:first-child{ width: 55%;}
    .gameQA > li:last-child{ width: 45%;}
    .gameQA{ display: flex;}
    .gameQues{ width: 100%;}
    .gameSelect{ margin: 0 0 15px 0; padding: 10px 25px; font-size: 2.4rem;}
    .gameSelect:hover{ background-color: #1d7e75;}

    /*進度條*/
    .gameBar img{ margin: 5px;}

    /*--結果區--*/
    .gameEndGift{ padding-top: 20px;}
    /*贈品*/
    .resultInfo p{ margin-bottom: 0; line-height: 1.5;}
    /*結果圖*/
    .gameEndResult{ width: 80%; margin: 0 auto;}

    /*圓餅圖*/
    .pieChartBox{ border-width: 7px;}
    /*圓餅圖：標示項目百分比*/
    .pieChartList{ top: 48.7%;}
    .pieChartList > li{ margin-bottom: 10px;}
    /*年代+百分比*/
    .pieChartItem, .pieChartNum{ padding: 7px 4%; font-size: 1.5rem; font-weight: 900; line-height: 1; position: relative; z-index: 1;}
    /*百分比條*/
    .pieChartBar{ width: calc(100% - 4px); border-width: 2px;}

    /*看更多作品*/
    .gameMoreBook{ margin: 0 3px; padding: 13px 0;}

    /*測驗結果按鈕*/
    .gameEndBtnBox{ width: 70%; padding-top: 15px; padding-bottom: 60px;}
    /*社群分享再抽*/
    .shareNote .mNo{ width: 90%; max-width: 430px; margin: 10px auto 0 auto;}
    /*按鈕*/
    .gameEndBtn{ gap: 15px; margin-top: 15px; font-size: 2.2rem; font-family: 'Noto Sans TC VF'; font-weight: 800; text-align: center; color: #ffffff;}
    .gameEndBtn > li{ padding: 15px 0 18px 0; border: #d4ff78 4px solid; box-shadow: #402dff -5px 12px 0; transition: 0.4s;}
    .gameEndBtn a{ display: block;}
    .gameEndBtn > li:hover{ transform: translateY(6px); box-shadow: #000 0 3px 0;}

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

    /*--作者介紹-----------------------------------------*/
    /*頭圖*/
    .authorHead{ width: inherit; margin-top: 20px;}
    /*介紹文*/
    .authorIntro{ width: inherit; margin-left: 0; margin-bottom: 0;}

    /*--sweetAlert共用樣式設定-----------------------------------------*/
    /*右上(X)關閉鈕*/
    .custom-btn-close{ font-size: 5.5rem;/*(X)按鈕大小*/ margin-top: -4%;/*位置可自訂*/ margin-right: -2.5%;/*位置可自訂*/}

    /*按鈕樣式設定----*/
    /*圖片按鈕*/
    .custom-btn-styled .sweetPicBtn{
        width: 200px;/*按鈕寬度*/
    }

    /*[常用版型]分享結果圖(沒用到可刪除)-----------------------------------------*/
    /*分享鈕*/
    .shareIconList{ width: 90%; max-width: 400px;}
    /*手機長按儲存*/
    .shareNotice{ font-size: 1.5rem;}
    /*分享圖*/
    .sharePic{ width: 90%;}
    /*end-[常用版型]分享結果圖(沒用到可刪除)-----------------------------------------*/

    /*--sweetAlert推薦書-----------------------------------------*/
    .alertRecommBook > li img{ margin: 0 0 10px 0;}
    .alertRecommBook > li:nth-child(1){ width: 48%;}
    .alertRecommBook > li:nth-child(2){ width: 52%;}
    .alertRecommBook{ font-size: 2rem; line-height: 1.4;}

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

    .sideBtn{ height: 255px;/*調整按鈕大小*/}


    /*--hover animate--------------------------------*/
    .gift3Btn, .gift4Btn, .gift5Btn, .gift6Btn, .authorHead a, .authorBook a, .recommSee, .recommBtn a{ display: block; transition: 0.4s;}
    .gift3Btn:hover{ transform: rotate(-6deg) scale(0.9);}
    .gift4Btn:hover, .gift5Btn:hover, .gift6Btn:hover{ transform: scale(0.9);}
    .authorHead a:hover{ transform: rotate(-8deg) scale(0.9);}
    .authorBook a:hover{ transform: rotate(6deg);}
    .recommSee:hover{ transform: scale(0.8);}
    .recommBtn a:hover{ transform: rotate(7deg);}
}

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

/*--460-766(特殊尺寸)------------------------*/
@media screen and (min-width:460px) and (max-width:766px) {
    .pieChartList{ top: 48%;}
}

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



.gameTitle img{ aspect-ratio: 639/832;}
.gameIntroTitlePic img{ aspect-ratio: 525/187;}
.gameStartBtn img{ aspect-ratio: 525/170;}

.gameBar img{ aspect-ratio: 750/84;}
.gameQues img{ aspect-ratio: 750/1126;}

.resultPic, .sharePic img{ aspect-ratio: 1200/2453;}
.gameMoreBook img{ aspect-ratio: 600/70;}
.shareNote .mNo img{ aspect-ratio: 500/47;}
.shareNote .pcNo img{ aspect-ratio: 600/185;}
.alertRecommBook img{ aspect-ratio: 570/627;}

.authorHead img{ aspect-ratio: 1/1;}
.authorIntro img{ aspect-ratio: 495/355;}

.recommP img{ aspect-ratio: 607/602;}
.recommBook > li a:first-child img{ aspect-ratio: 600/870;}
.recommBook > li a:last-child img{ aspect-ratio: 600/130;}
.recommBtn img{ aspect-ratio: 880/335;}

.gift4Btn img, .gift5Btn img, .gift6Btn img{ aspect-ratio: 135/169;}


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