@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--*/
.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;}
.txtGreen{ color: #c1f33b;}
.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: linear-gradient(45deg,  #ffb4fd 0%,#ffffff 50%,#d2fcb0 100%);}
.bgColor2{ background: linear-gradient(135deg,  #ffb4fd 0%,#ffffff 50%,#d2fcb0 100%);}

.bg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260115_eyetest/images/bg1.png); background-position: top center; background-size: 400%;}
.bg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260115_eyetest/images/bg2.png); background-position: top center; background-size: 400%;}
.bg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260115_eyetest/images/bg3.png); background-position: top center; background-size: 400%;}

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

/*header animate*/
.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);}
}

/*特別優惠*/
/* .specialList{ background-color: #dbb029; padding: 15px 0;}
.specialList > li{ width: 80%; margin: 0 auto; padding: 5px 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 15px 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%;}

/*--頁籤錨點-----------------------------------------*/
.topTabBox{ padding: 10px 0;}
.topTabBox.isFloating img{ filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 1));}
.listBox.topTabBox > li { padding-top: 0; padding-bottom: 0;}

/*跑馬燈-----------------------------------------*/
.runEmoBox{ height: 90px; margin-top: 8px; margin-bottom: 10px; padding: 2px 0; background-color: #ff67ec;} 
.runEmo{ height: 90px; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260115_eyetest/images/run_emo.png); background-size: cover; animation: runEmo 80s infinite linear;}
@keyframes runEmo { 
    0%{ background-position: 0%;}
    100% { background-position: 100%;}
}

/*--活動說明-----------------------------------------*/
.noticeStyle2{ width: 96%; margin: 0 auto; padding: 30px 5% 20px 5%; background-color: #000000; border-radius: 15px; box-sizing: border-box;}
.noticeStyle2 .notice{ /*max-width: 1000px;*/ margin: 0 auto; color: #ffffff;}
.noticeStyle2 .noticeTitle{ color: #ff8dfe;}
.noticeStyle2 .noticeSecTitle{ color: #ff8dfe;}
.noticeStyle2 .notice > li{ list-style-type: decimal;}
.noticeStyle2 .notice > li a{ color: #76f0f1;}
.noticeStyle2 .notice > li > ul > li{ list-style-type: disc; margin-right: 0;}

/*--推薦書區-----------------------------------------*/
/* .recomR{ margin-top: -35%;} */
.recomBookShelf{ margin-top: 10px;}
.recomBookShelf a img{ animation: recomBookShelf 2s infinite;}
@keyframes recomBookShelf { 
    0%{ transform: scale(1);}
    50% { transform: scale(0.9);}
    100% { transform: scale(1);}
}

.videoTime{ padding: 20px 0 10px 0;}

/*推薦書*/
.bookList{ width: 80%; margin: 10px auto;}
.bookBg{ height: 100%; background-color: #0034f7; border-radius: 15px;}
.bookBg.style1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260115_eyetest/images/book_bg1.png); background-position: top center; background-size: 100%; background-repeat: no-repeat;}
.bookBg.style2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260115_eyetest/images/book_bg2.png); background-position: top center; background-size: 100%; background-repeat: no-repeat;}
.recomBookTxt{ padding: 15px 30px 30px 30px; font-size: 2rem; color: #ffffff; font-weight: bold; text-align: justify;}

/*--影片-----------------------------------------*/
.ytVideoBox{ /*position: relative; z-index: 1; margin: 0; background-color: #000000;*/ border: rgba(255,255,255,0.6) 5px solid; box-shadow: #a5e200 0 0 10px;}/*外框*/
.video { width: 100%; margin: 0 auto; position: relative;}
.aVideoBox { width: 100%; margin: 0 auto;}
.aVideo { width: 100%; height: 0; padding: 0 0 56.25% 0; position: relative;}
.aVideo iframe { width: 100%; height: 100%; position: absolute; left: 0; top: 0;}


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

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

/*.gameTilte,.gameGift,.gameStart{ margin: 0 auto;}*/
/* .gameTilte{ width: 90%; padding-top: 15px;} */
/* .gameGift{ width: 100%;} */
/* .gameStart{ position: relative; display: block; width: 70%; padding-bottom: 15px; text-decoration: none;} */
/*開始測驗鈕*/
.gameStartBtn{ position: absolute; top: 79%; left: 0; right: 0; margin: 0 auto; width: 68%; animation: scaleInOut 0.8s infinite;}
@keyframes scaleInOut{ 0% { transform: scale(1);} 50% { transform: scale(0.9);} 100% { transform: scale(1);} }

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

/*計時+分數*/
/* .gameTimeGet{ font-family: 'Noto Sans TC VF', Arial, Helvetica, sans-serif; font-weight: 700; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 5% 5% 10px 5%; font-size: 1.7rem; color: #000000; text-align: center;}
.gameTimeGet p{ flex: 1; margin: 5px; padding: 10px; background-color: #ffffff; border-radius: 100px;}
.txtNum{ font-size: 3rem; color: #fb47e9; line-height: 1; font-weight: bold;} */

/*計時+分數*/
.gameTimeGet{ margin: 0 0 10px 0;  /*display: flex; flex-wrap: wrap; justify-content: space-between;*/ padding: 10px 0; background-color: #ffffff; font-size: 1.9rem; color: #000000; text-align: center; border-radius: 100px;}
/*.gameTimeGet p{ width: calc(49% - 26px); flex: 1; margin: 5px; padding: 10px; background-color: #ffffff; border-radius: 100px;}*/
.txtNum{ font-size: 2.6rem; color: #fb47e9; line-height: 1; font-weight: bold;}

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

/*題目圖*/
.gameQApic{ margin-top: 10px;}

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

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

/* .gameSelectPic .gameSelect .answerIcon{ position: absolute; top: -3px; left: -3px; font-size: 2.3rem;} */

/*有圖*/
/* .gameSelectPic{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.gameSelectPic > .gameSelect{ width: calc(48% - 36px); margin: 7px 0; padding: 8px 15px;}
.gameSelectPic > .gameSelect:last-child{ margin-bottom: 7px;}
.gameSelectPic > .gameSelect p{ margin-bottom: 7px; line-height: 1.2; text-align: center;}
.gameSelectPic > .gameSelect img{ display: block; width: 100%; border-radius: 5px;} */

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

/*下一題*/
.gameNextBtn{ /*margin-top: 10px;*/ padding: 12px 10px; background-color: #6fde00; border: #5bb304 2px solid; font-size: 2rem; color: #07703c; text-align: center; border-radius: 5px; cursor: pointer;}


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

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

.gameEndBook{ width: 100%; margin: 10px auto 0 auto;}
/*結果按鈕*/
.gameEndBtn{ width: 70%; margin: 0 auto;}
.gameEndBtn > li{ cursor: pointer;}
.gameEndBtn > li:last-child{ display: none;}
/* .gameEndBtn{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 1.7rem; font-weight: 700; text-align: center;}
.gameEndBtn > li{ padding: 8px 0 11px 0; border: #000 3px solid; box-shadow: #000 0 5px 0; line-height: 1; border-radius: 100px; cursor: pointer;}
.gameEndBtn > li:nth-child(1){ flex: 1; background-color: #ffea3a;}
.gameEndBtn > li:nth-child(2){ flex: 1; background-color: #4ad57a;}
.gameEndBtn > li:nth-child(3){ width: 100%; margin-top: 8px; padding: 10px 0 8px 0; background-color: #ff8671; line-height: 1;}
.gameEndBtn a{ display: block;} */
/*分享再抽點數*/
/* .shareNote{ display: inline-block; position: relative; top: -2px; margin-left: 5px; padding: 4px 12px 6px 12px; background-color: #000000; font-size: 1.3rem; font-weight: 500; color: #ffffff; border-radius: 100px;} */

/*得分*/
.resultNum span{ font-size: 2.5rem; color: #fb47e9;}
.resultNum > li{ padding-bottom: 6px; font-size: 2rem; text-align: center;  background-color: #ffffff; color: #0034f7; border-radius: 100px;}
.resultNum > li + li{ margin-top: 8px;}

/*結果圖*/
.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: #4f4f4f; text-align: center;}
/* .levelPic{ width: 196%; max-width: 196%; position: absolute;} */

/*top20-----------------------------------------*/
.topBox{ padding: 20px 0; margin: 0 auto; background-color: #ffffff; border-radius: 15px;}
.topNotice{ width: 90%; max-width: 800px; margin: 10px auto 11px auto; font-size: 1.3rem; color: #5e5e5e; line-height: 1.3; text-align: center;}

.topList{ width: 90%; margin: 0 auto; position: relative; z-index: 1;}
.topList > li{ display: flex; align-items: center; padding: 10px 15px; /*background-color: #fff;*/ border-bottom: #dedede 1px solid; font-weight: bold; box-sizing: border-box;}
.topNum{ font-size: 2.2rem; color: #fdff5c; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-style: italic;}
.topScore{  display: inline-block; margin-right: 5px; font-size: 1.8rem; text-shadow: none; font-weight: bold; color: #5740ff; line-height: 1;}
.topScore b{ font-size: 2.4rem; line-height: 1.1;}
.topName{ margin-left: 18px; font-size: 1.6rem; color: #000; line-height: 1.2; word-break: break-word;}

.topList > .top123{ width: 100%; padding: 10px 25px; margin-left: auto; margin-right: auto; margin-bottom: 10px; border: #ceec43 3px solid;}
/* .topList > .top123:nth-child(1), .topList > .top123:nth-child(3){ transform: skewX(-18deg) skewY(2deg);;} */
/* .topList > .top123:nth-child(2){ transform: skewX(8deg) skewY(5deg);} */
.top123 .topNum{ font-size: 3.8rem; color: #ceec43; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 4px -1px black;}
.top123 .topScore{ display: block; color: #f847e4;}
.top123 .topName{ font-size: 2rem;}

/*社群分享*/
.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{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; max-width: 350px; margin: 15px auto 10px auto;}
.shareIcon{ display: block; width: 18%; transition: 0.4s;}
.shareIcon:hover{ transform: scale(0.9);}

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

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

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

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

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

    .bgPadB{ padding-bottom: 90px;}

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

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

    /*--header-----------------------------------------*/

    /*--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 20px auto;}
    .mainTitle3{ width: 100%;}

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

    /*跑馬燈-----------------------------------------*/
    .runEmoBox{ margin-top: 15px; margin-bottom: 30px;} 

    /*--活動說明-----------------------------------------*/
    .noticeStyle2{ width: 88%; padding: 30px 5% 50px 5%; border-radius: 25px;}
    
    /*--測驗-----------------------------------------*/
    .gameBox{ max-width: 990px; padding: 10px; /*border-width: 12px;*/}
    .gameConWidth{ padding: 50px 20%;}
    
    /* .gameTilte{ width: 60%; padding-top: 70px;} */
    /* .gameGift{ width: 60%;} */
    /* .gameStart{ width: 58%; padding-bottom: 71px;} */
    .gameStartBtn{ top: 79%; width: 39%;}

    /*計時+分數*/
    .gameTimeGet{ margin: 0 0 10px 0; padding: 0; background-color: transparent; font-size: 2.2rem; text-align: left;}
    .txtNum{ font-size: 3.2rem;}
    /* .gameTimeGet{ padding: 5% 8% 20px 8%;}
    .gameTimeGet p{ padding: 20px 10px;} */

    /*問答區*/
    .gameQAbox{ padding: 0 0 3% 0;}
    .gameQA{ width: 95%;}
    .gameQues{ font-size: 3rem; line-height: 1.3; font-weight: 900;}
    .gameSelect{ padding: 11px 25px 11px 50px; font-size: 1.8rem;}
    .gameSelect:hover{ background-color: #0021b9; /*border: #ff931f 3px solid; color: #ff931f;*/}

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

    /*有圖*/
    /* .gameSelectPic > .gameSelect{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
    .gameSelectPic > .gameSelect p{ width: 65%;}
    .gameSelectPic > .gameSelect img{ width: 33%;} */

    .gameBar{ width: 7%; max-width: inherit; margin-left: 50px;}

    /*下一題*/
    .gameNextBtn:hover{ background-color: #65c900;}

    /*結果按鈕*/
    .gameEndBtn{ width: 100%;}
    .gameEndBtn > li:last-child{ display: block;}
    /* .gameEndBtn{ font-size: 2rem;}
    .gameEndBtn > li{ padding: 10px 0 13px 0; border-width: 5px; box-shadow: #000 0 8px 0;}
    .gameEndBtn > li:nth-child(3){ padding: 12px 0 10px 0;} */
    /*分享再抽點數*/
    /* .shareNote{ font-size: 1.5rem;} */

    /*得分*/
    .resultNum{ display: flex; gap: 10px; padding: 6px 0 12px 0; font-size: 1.6rem;}
    .resultNum > li{ flex: 1; padding: 5px 0 10px 0; font-size: 1.8rem;}
    .resultNum > li + li{ margin-top: 0;}
    .resultNum span{ font-size: 2.4rem;}

    /*top20-----------------------------------------*/
    .topBox{ max-width: 1000px; padding: 40px 0; background-color: rgba(255,255,255,0.6); border-radius: 20px;}

    .topNotice{ margin: 30px auto 15px auto; background-color: transparent;}
    .topList{ width: 90%; max-width: 800px;}
    .topList > li{ padding-left: 60px;}

    .topNum{ width: 80px; font-size: 2.4rem; text-align: right;}
    .topScore{ font-size: 1.8rem; margin-right: 26px;}
    .topScore b{ font-size: 2.6rem;}
    .topName{ margin-left: 35px; font-size: 1.8rem;}

    .top123 .topNum{ width: 115px; font-size: 4rem; text-align: right;}
    .top123 .topScore{ display: inline; margin-right: 20px;} 
    .top123 .topName{ margin-left: 30px; font-size: 2.2rem;}

    /*社群分享*/
    .shareIconList{ width: 100%; max-width: 350px; margin: 15px auto 0 auto; padding: 12px 55px; background-color: #76f0f1; border: #000000 1px solid;}

    /*--推薦書區-----------------------------------------*/
    .recomR{ margin-top: 0; padding: 0 20px;}
    .recomBookShelf{ margin-top: 0;}
    .videoTime{ padding: 10px 0;}

    /*推薦書*/
    .bookList{ width: 100%; margin: 15px auto;}
    .recomBookTxt{ /*padding: 15px 20px 25px 20px;*/ font-size: 2rem;}



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

    /*--hover animate--------------------------------*/
    .gameEndBtn li, .recomBookShelf a{ display: block; transition: 0.4s;}
    .gameEndBtn li:hover{ transform: scale(0.9);}
    .recomBookShelf a:hover{ transform: scale(0.9) rotate(5deg);}
    /* .gameEndBtn > li:hover{ transform: translateY(6px); box-shadow: #000 0 2px 0;}
    .gameStartBtn img:hover{ transform: rotate(5deg);} */
}

/*--768-1024(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1024px) { 
    /*背景圖-----------------------------------------*/
    .bg1, .bg2, .bg3{ 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%;}/*平板刊頭放大(讓左右背景超出可視範圍)*/
}

/*--1000以下------------------------*/
@media screen and (min-width:767px)  and (max-width:900px) { 
    /*--測驗-----------------------------------------*/
    .gameConWidth{ padding: 15px 8%;}
    /*問答區*/
    /* .gameQAbox{ padding: 0 0 8% 0;} */
}

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

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

.topTabBox img{ aspect-ratio: 460/175;}
.gameQApic img{ aspect-ratio: 750/591;}
.gameBar img{ aspect-ratio: 52/230;}
.gameEndBtn img{ aspect-ratio: 750/270;}
.shareIconList img{ aspect-ratio: 1/1;}
.tabMenu img{ aspect-ratio: 460/210;}
.recomBookShelf img{ aspect-ratio: 753/483;}
.videoTime img{ aspect-ratio: 753/50;}
.bookBg img{ aspect-ratio: 750/820;}
/* .gameTilte img{ aspect-ratio: 835/393;}
.gameStart img{ aspect-ratio: 835/292;}
.gameSelect  img{ aspect-ratio: 737/1024;}
.authorHead img{ aspect-ratio: 630/1040;}
.paperDeco .mNo img{ aspect-ratio: 1015/105;}
.paperDeco .pcNo img{ aspect-ratio: 590/105;}
.authorIntro .mNo img{ aspect-ratio: 595/470;}
.authorIntro .pcNo img{ aspect-ratio: 630/942;}
.authorBookList img{ aspect-ratio: 350/618;} */

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