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

/*俐方體11號*/
@font-face {
    font-family: "Cubic 11";
    src: url("../fonts/Cubic_11.woff2") format("woff2");
    font-weight: 400;
    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;}
.txtGreen{ color: #04ac00;}
.txtRed{ color: #df3f24;}
.txtBrown{ color: #885d00;}
.txtBlue{ color: #2487e0;}
.txtYellow{ color: #fffa85;}
.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: #9f6af4; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/bg_grid_white.png); background-position: top center; background-size: 400%;}
.bg2{ background-color: #834ed7; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/bg_grid_white.png); background-position: top center; background-size: 400%;}
.bg3{ background-color: #3a44c4; background-position: top center; background-size: 400%;}
.bg4{ background-color: #d62b62; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/bg_grid_white.png); background-position: top center; background-size: 400%;}
.bg5{ background-color: #d0ec4a; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/bg_grid_green.png); background-position: top center; background-size: 400%;}

.bgDeco1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/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/20260201_kagami/images/bg_deco2.png); background-position: top center; background-size: 400%; background-repeat: no-repeat;}
.bgDeco3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/bg_deco3.png); background-position: top center; background-size: 400%; background-repeat: no-repeat;}
.bgDeco3_2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/bg_deco3_2.png); background-position: top center; background-size: 400%; background-repeat: no-repeat;}
.bgDeco4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/bg_deco4.png); background-position: top center; background-size: 400%; background-repeat: no-repeat;}
.bgDeco5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/bg_deco5.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;}

/*刊頭動畫*/
.headerRedEye{ animation: headerRedEye 3s infinite;}
@keyframes headerRedEye { 
    0%{ opacity: 0;}
    20%{ opacity: 1;}
    100% { opacity: 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;}
.mainTitle4{ width: 100%; margin: 0 auto;}
.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%;}

/*--會員獨享-----------------------------------------*/
.specialBox{}
.specialBorder{ border: #000000 3px solid; padding: 8px; margin-bottom: 8px;}
.specialBorder + .specialBorder{ margin-bottom: 0;}
.specialBg{ background-color: #000000; border: #baa1e2 2px solid;}

/*按鈕*/
.specialBtn{ position: absolute; top: 71%;}
.specialBtn2{ position: absolute; top: 81%;}

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

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

/*按鈕滑入*/
.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{ padding: 15px 10px 17px 10px; font-size: 1.5rem; color: #ffffff; font-weight: bold; text-align: center;}
.giftNum span{ color: #ffef3c;}
.giftNum b{ color: #ffef3c;}

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


/*--測驗-----------------------------------------*/
/*--測驗封面--*/
/*2個問答外框顏色*/
.game{ max-width: 900px; margin: 0 auto; background-color: #0034f7;}
.game{ padding: 5px; border: #000000 1px solid; border-radius: 30px;}
.game .gameBorder{ position: relative; border: #1f4eff 2px solid; border-radius: 25px; overflow: hidden;}
.game .gameCon{ background-color: #000000; border-radius: 10px;}
.game .gameConBg{ padding: 8px; text-align: center; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/game_cover_bg.jpg); background-size: 100% 100%; background-position: bottom center; background-repeat: no-repeat;}

/*開始測驗鈕*/
.startBtn{ position: absolute; width: 60%; bottom: 3%; right: 0; left: 0; margin: 0 auto; cursor: pointer; animation: startBtn 1.5s infinite;}
@keyframes startBtn { 
    0%{ transform: scale(1);}
    50%{ transform: scale(0.9);}
    100% { transform: scale(1);}
}
.startBtn img{ transition: 0.4s;}
.startBtn img:hover{ transform: rotate(5deg) scale(0.8);}

/*測驗封面人物+按鈕*/
.z1{ z-index: 1;}

/*--測驗中--*/
/*背景格線*/
.game .gameConGrid{ border-radius: 50px; border: #3d3d3d 2px solid; background-color: #000000; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/bg_grid_white.png);}
/*回合*/
.gameRound{ margin-top: 10px; font-size: 2.8rem; color: #d0ec4a; font-style: italic; font-family: 'Noto Sans TC VF',微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif; font-weight: 700;}
.gameRound span{ vertical-align: sub;}
.gameRound i{ font-size: 3.3rem;}
.gameRound b{ font-size: 2rem; font-family: "Cubic 11",微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif;}

/*進度條*/
.gameBarBox{ overflow: hidden; width: 90%; margin: 0 auto;}
.gameBarBox > li{ float: left;}
.gameBarBox > li:nth-child(2){ width: 70px;}
.gameBarBox > li:nth-child(1), .gameBarBox > li:nth-child(3){ width: calc(50% - 35px);}
/*挑戰者名字*/
.gameVSname{ overflow: hidden;}
.gameVSname img{ width: 55px;}
.style2 .gameVSname img{ float: right;}
/*百分比*/
.gameBar{ height: 8px; margin-top: 3px; background-color: #ffffff; border: #000000 2px solid; border-radius: 4px; overflow: hidden;}
.style1 .gameBarPercent{ height: 100%; background-color: #47dcdd; float: right;}
.style2 .gameBarPercent{ height: 100%; background-color: #fc47eb;}

/*題目圖*/
.gameQuesPic{ width: 70%; max-width: 180px; margin: 10px auto 0 auto;}
/*題目*/
.gameQues{ box-sizing: border-box; width: 90%; margin: 0 auto; padding: 10px 20px; border: #c4c4c4 1px solid; border-radius: 5px; font-size: 1.8rem; color: #ffffff; text-align: justify; font-family: "Cubic 11",微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif;}

/*選項*/
.gameSelect{ width: 95%; margin: 0 auto; padding: 10px 0;}
.gameSelect > li{ position: relative; font-size: 1.6rem; color: #ffffff; font-family: "Cubic 11",微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif;}
.answerFailed{ position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
/*選項按鈕*/
.gameSelectBtnBox{ margin-top: -7%;}
.gameSelectBtn{ width: 24%; background-size: 100%; background-repeat: no-repeat; position: absolute;}
.gameSelectBtn.style1{ bottom: 4%; left: 1%; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/game_qa_btn1.png); cursor: pointer;}
.gameSelectBtn.style2{ bottom: 14%; left: 26%; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/game_qa_btn2.png); cursor: pointer;}
.gameSelectBtn.style3{ bottom: 4%; left: 51%; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/game_qa_btn3.png); cursor: pointer;}
.gameSelectBtn.style4{ bottom: 14%; left: 76%; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/game_qa_btn4.png); cursor: pointer;}

.gameSelectBtn.style1.checked{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/game_qa_btn1_checked.png); cursor: default;}
.gameSelectBtn.style2.checked{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/game_qa_btn2_checked.png); cursor: default;}
.gameSelectBtn.style3.checked{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/game_qa_btn3_checked.png); cursor: default;}
.gameSelectBtn.style4.checked{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/game_qa_btn4_checked.png); cursor: default;}

/*--測驗失敗--*/
/*圖片*/
.gameFailedPic{ width: 80%; max-width: 300px; margin: 30px auto 0 auto;}

/*文字*/
.gameFailedTxt{ width: 85%; margin: 0 auto; padding: 15px 10px; border: #c4c4c4 1px solid; font-size: 1.8rem; color: #ffffff; font-family: "Cubic 11",微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif; border-radius: 5px;}
.gameFailedTxt b{ padding-bottom: 10px; font-size: 2.5rem;}
.gameFailedTxt span{ color: #6df0ff;}

/*測驗結果鈕*/
.gameEndBtnBox{ width: 90%; margin: 20px auto 30px auto; cursor: pointer; /*animation: gameEndBtnBox 1.5s infinite;*/}
.gameEndBtnBox2{ width: 70%; max-width: 180px; margin: 20px auto 30px auto; cursor: pointer; /*animation: gameEndBtnBox 1.5s infinite;*/}
/* @keyframes gameEndBtnBox { 
    0%{ transform: scale(1);}
    50%{ transform: scale(0.9);}
    100% { transform: scale(1);}
} */

/*--恭喜獲得--*/
.gameEndGift{ padding-top: 15px; font-size: 2rem; color: #ffffff; font-family: "Cubic 11",微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif; text-align: center;}
.gameEndGift a{ display: inline-block !important; color: #6df0ff;}
/*標題*/
.resultTitle{ margin-top: 15px; font-size: 2.5rem; color: #fff66b;}
/*贈品*/
.resultInfo{ width: 84%; margin: 10px auto 0 auto; font-size: 1.7rem; color: #ffffff;}
.resultInfo p{ margin-bottom: 12px; line-height: 1.2;}
.resultInfo a{ font-size: 1.4rem; color: #55fff5; text-decoration: none;}
.resultInfo a:hover{ text-decoration: underline;}

/*結果圖*/
.resultPicBox{ width: 90%; margin: 15px auto 0 auto;}
/*手機長按儲存*/
.shareNotice{ margin-top: 10px; font-size: 1.5rem; color: #ffffff; font-family: "Cubic 11",微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif;}

/*社群分享*/
.shareTitle{ margin-top: 15px; font-size: 2.4rem; color: #76f0f1; font-family: "Cubic 11",微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif;}
.shareTitle span{ font-size: 3.2rem; color: #fff66b;}
.shareBox{ width: 80%; max-width: 260px; margin: 0 auto; padding: 5px 10px; border: #76f0f1 2px solid; background-color: rgba(118,240,241,0.6);}


/*--直播+推薦書-----------------------------------------*/
.recommList{ /*width: 80%;*/ max-width: 350px; margin: 30px auto 0 auto;}
.videoList{ max-width: 500px; margin: 0 auto;}
.giveBookBtn{ display: block; max-width: 240px; width: 60%; margin: 20px auto 0 auto; animation: giveBookBtn 2s infinite;}
@keyframes giveBookBtn { 
    0%{ transform: scale(1);}
    50% { transform: scale(0.9);}
    100% { transform: scale(1);}
}

/*--優惠書籍-----------------------------------------*/
.bookList{ width: 80%; max-width: 350px; margin: 0 auto;}

/*--活動說明(MAU)-----------------------------------------*/
.noticeStyle1{ margin: 0 auto; padding: 30px 5% 20px 5%; background-color: #7e4dcc; border: #ae86ee 4px solid;}
.noticeStyle1 .notice2{ /*max-width: 1000px;*/ margin: 0 auto; color: #ffffff;}
.noticeStyle1 .noticeTitle{ color: #ff8dfe;}
.noticeStyle1 .noticeSecTitle{ color: #ff8dfe;}
.noticeStyle1 .notice2 > li{ margin-right: 0;}
.noticeStyle1 .notice2 > li > ul > li{ list-style-type: auto;}
.noticeStyle1 .notice2 > li > ul > li a{ color: #76f0f1;}

/*--活動說明(測驗)-----------------------------------------*/
.noticeStyle2{ margin: 15px auto 0 auto; padding: 30px 5% 20px 5%; background-color: #000000; border: #000000 8px solid;}
.noticeStyle2 .notice{ /*max-width: 1000px;*/ margin: 0 auto; color: #ffffff;}
.noticeStyle2 .noticeTitle{ color: #ff8dfe;}
.noticeStyle2 .noticeSecTitle{ color: #ff8dfe;}
.noticeStyle2 .notice > li{ list-style-type: auto; margin: 10px 5px 10px 25px;}
.noticeStyle2 .notice > li a{ color: #76f0f1;}

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

/*--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: 90px;/*調整按鈕大小*/}
.sideBtn img{ height: 100%;}
.sideBtn{ cursor: pointer; position: relative; z-index: 1;}

/*--特效動畫-----------------------------------------*/
.attackEffect, .protectEffect{ position: absolute; left: 0; right: 0; top: -60px; margin: auto; width: 300px; z-index: 1; pointer-events: none;}
.aniPic{ position: absolute; top: 0; left: 0; opacity: 0;}

/*攻擊特效*/
.attackEffect.action .aniAttack1{ animation: aniAttack1 1s infinite;}
@keyframes aniAttack1 { 
    9%{ opacity: 0;}
    10% { opacity: 1;}
    100% { opacity: 1;}
}
.attackEffect.action .aniAttack2{ animation: aniAttack2 1s infinite;}
@keyframes aniAttack2 { 
    19%{ opacity: 0;}
    20% { opacity: 1;}
    100% { opacity: 1;}
}
.attackEffect.action .aniAttack3{ animation: aniAttack3 1s infinite;}
@keyframes aniAttack3 { 
    29%{ opacity: 0;}
    30% { opacity: 1;}
    100% { opacity: 1;}
}
.attackEffect.action .aniAttack4{ animation: aniAttack4 1s infinite;}
@keyframes aniAttack4 { 
    39%{ opacity: 0;}
    40% { opacity: 1;}
    100% { opacity: 1;}
}
.attackEffect.action .aniAttack5{ animation: aniAttack5 1s infinite;}
@keyframes aniAttack5 { 
    49%{ opacity: 0;}
    50% { opacity: 1;}
    100% { opacity: 1;}
}
.attackEffect.action .aniAttack6{ animation: aniAttack6 1s infinite;}
@keyframes aniAttack6 { 
    59%{ opacity: 0;}
    60% { opacity: 1;}
    100% { opacity: 1;}
}
.attackEffect.action .aniAttack7{ animation: aniAttack7 1s infinite;}
@keyframes aniAttack7 { 
    69%{ opacity: 0;}
    70% { opacity: 1;}
    100% { opacity: 1;}
}
.attackEffect.action .aniAttack8{ animation: aniAttack8 1s infinite;}
@keyframes aniAttack8 { 
    79%{ opacity: 0;}
    80% { opacity: 1;}
    100% { opacity: 1;}
}
.attackEffect.action .aniAttack9{ animation: aniAttack9 2s infinite;}
@keyframes aniAttack9 { 
    79%{ opacity: 0;}
    80% { opacity: 1;}
    100% { opacity: 1;}
}

/*保護特效*/
.protectEffect.action .aniProtect1{ animation: aniProtect1 1s forwards;}
@keyframes aniProtect1 { 
    0%{ opacity: 0; transform: scale(0);}
    10% { opacity: 1; transform: scale(0);}
    100% { opacity: 1; transform: scale(1);}
}
.protectEffect.action .aniProtect2{ animation: aniProtect2 2s infinite;}
@keyframes aniProtect2 { 
    0%{ opacity: 1;}
    20% { opacity: 1; transform: rotate(-20deg);}
    100% { opacity: 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%;}
    .bgDeco1{ background-size: 100%; background-repeat: no-repeat;}
    .bgDeco2, .bgDeco3, .bgDeco3_2, .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%;}
    .mainTitle4{ width: 65%; max-width: 1000px; margin: 0 auto;}

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

    /*--會員獨享-----------------------------------------*/
    .specialBorder{ margin-bottom: 15px;}
    /*資格+剩餘數量*/
    .giftNum{ padding: 0 10px 32px 10px;}


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

    /*--測驗封面--*/
    /*開始測驗鈕*/
    .startBtn{ width: 35%; bottom: 3%; right: 3%; cursor: pointer;}

    /*--測驗中--*/
    /*背景格線*/
    .game .gameConGrid{ border-radius: 126px;}
    /*回合*/
    .gameRound{ font-size: 4rem; }
    .gameRound i{ font-size: 5rem;}
    .gameRound b{ font-size: 3rem;}

    /*進度條*/
    .gameBarBox{ width: 68%;}

    /*題目圖*/
    .gameQuesPic{ width: 215px; max-width: inherit;}
    /*題目*/
    .gameQues{ width: 400px; margin: 0 auto;}
    /*選項*/
    .gameSelect{ width: 450px; margin: 5px auto 0 auto;}

    /*選項按鈕*/
    /* .gameSelectBtnBox{ margin-top: -7%;} */
    .gameSelectBtn{ width: 14%;}
    .gameSelectBtn.style1{ bottom: 4%; left: 28%;}
    .gameSelectBtn.style2{ bottom: 14%; left: 43%;}
    .gameSelectBtn.style3{ bottom: 4%; left: 64%;}
    .gameSelectBtn.style4{ bottom: 14%; left: 79%;}

    .gameSelectBtn.style1:hover{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/game_qa_btn1_checked.png);}
    .gameSelectBtn.style2:hover{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/game_qa_btn2_checked.png);}
    .gameSelectBtn.style3:hover{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/game_qa_btn3_checked.png);}
    .gameSelectBtn.style4:hover{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260201_kagami/images/game_qa_btn4_checked.png);}

    /*--測驗失敗--*/
    /*圖片*/
    .gameFailedPic{ margin: 80px auto 0 auto;}

    /*文字*/
    .gameFailedTxt{ width: 50%; max-width: 325px; padding: 15px 20px;}
    .gameFailedTxt b{ padding-bottom: 10px; font-size: 2.5rem;}
    .gameFailedTxt span{ color: #6df0ff;}

    /*測驗結果鈕*/
    .gameEndBtnBox, .gameEndBtnBox2{ width: 50%; max-width: 408px; margin: 40px auto 60px auto;}

    /*--恭喜獲得--*/
    .gameEndGift{ padding-top: 55px;}
    /*贈品*/
    .resultInfo{ font-size: 2rem;}
    .resultInfo p{ margin-bottom: 0; line-height: 1.5;}
    .resultInfo a{ font-size: 1.6rem;}
    /*結果圖*/
    .resultPicBox{ max-width: 377px; margin: 30px auto 0 auto;}
    /*手機長按儲存*/
    .shareNotice{ display: none;}

    /*社群分享*/
    .shareBox{ max-width: 260px; padding: 5px 56px;}

    /*--直播+推薦書-----------------------------------------*/
    .recommList{ max-width: inherit;}
    .recommList > li:last-child{ margin-top: 100px;}
    .videoList{ max-width: inherit; margin-top: 30px;}

    /*--優惠書籍-----------------------------------------*/
    .bookList{ width: 100%; max-width: inherit;}
    .listBox.bookList > li{ margin-top: 20px; margin-bottom: 20px;}

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

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

    /*--fixedBtnBox-----------------------------------------*/
    .fixedBtnBox{ bottom: 110px;}
    .fixedBtnBox li{ margin-bottom: 8px;}

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

    /*--特效動畫-----------------------------------------*/
    .attackEffect, .protectEffect { top: -155px; width: 555px;}

    /*--hover animate--------------------------------*/
    .giveBookBtn img, .gameEndBtnBox img, .gameEndBtnBox2 img{ display: block; transition: 0.4s;}
    .giveBookBtn img:hover{ transform: rotate(-6deg);}
    .gameEndBtnBox img:hover,.gameEndBtnBox2 img:hover{ transform: translateX(10px);}
    .listBox.gameEndBtnBox a:hover{ transform: scale(1);}

    
}

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

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

    .wrapperHalf > li{ padding: 2%;}

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


}

/*--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) {
}

.gameVSname img{ aspect-ratio: 91/30;}
.gameSelectBtnBox .pcNo img{ aspect-ratio: 639/261;}
.gameSelectBtnBox .mNo img{ aspect-ratio: 1121/264;}
.gameEndBtnBox img, .gameEndBtnBox2 img{ aspect-ratio: 400/85;}
.shareIconList img{ aspect-ratio: 1/1;}
.gameQuesPic img{ aspect-ratio: 412/408;}

.bookList a img{ aspect-ratio: 750/1425;}
.bookList a + img{ aspect-ratio: 750/114;}
.bookList a + img + img{ aspect-ratio: 750/133;}


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