@charset "utf-8";
/* a:hover{ opacity:0.9;} *//*滑鼠滑入半透明*/

/*遮罩樣式*/
.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;}

.pcNo{ display: block;}
.mNo{ display: none;}

.txtGreen{ color: #242021;}
.txtDeepRed{ color: #242021;}
.alink{ color: #f1d200; text-decoration: underline;}
.alink:hover{ text-decoration: none;}
.alink2{ color: #1ddcda; text-decoration: underline;}
.alink2:hover{ text-decoration: none;}

/*bg-----------------------------------------*/
.bgPadT{ padding-top: 30px;}
.bgPadB{ padding-bottom: 30px;}

.bgColor1{ background-color: #1f2061;}
.bgColor2{ background-color: #68ecfb;}
.bgColor3{ background-color: #ff6035;}
.bgColor4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_04m.png);}

.areaBg0{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_01m.png);}
.areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_01m.png);}
.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_022m.png);}
.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_03m.png);}
.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_04m.png);}
.areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_05m.png);}
.areaBg6{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_06m.png);}
.areaBg7{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_07m.png);}

.bgDeco1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/header_monster04_.gif); background-size: 115%; background-position: top center;}
.bgDeco2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_deco_black.png); background-size: 115%; background-position: top center;}
.bgDeco3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_deco_red.png); background-size: 115%; background-position: top center;}
.bgDeco4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_01m.png);}
.bgDeco4_1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_01m.png);}
.bgDeco4_2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_01m.png);}

.bgLine img{ display: block; width: 100%;}

/*--header-----------------------------------------*/
/*測驗區域*/
.headerBox{ overflow: hidden; position: relative; margin-top: 0px;  background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_01.png); background-size: cover; /*background-color: #7a8996;*/}
.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{ margin-top: 0px; position: relative; overflow: hidden;}
.bgHeaderBao{ display: none;}
.headerPic{ position: absolute; top: 0; left: 0; right: 100; margin: 0 auto;}
.headerTitle{ top: 0; width: 100%;}
.headerBao{ top: 34%; left: 10%; width: 45%;}
.header1{ display: none;}
.header2{ display: none;}
.header3{ display: none;}
.header4{ display: none;}
.header5{ display: none;}
.header6{ display: none;}
.headerGiftBao{ top: 70%; right: 45%; width: 40%;}
.bgHeaderM{ display: block;}

/*--測驗區域-----------------------------------------*/
.a1_1{ position: absolute;/*定位*/ top: 22.5%;/*上面位置*/ left: 17%;/*左邊位置*/ width: 65%;/*門的大小*/ cursor: pointer;/*滑鼠滑入變手指*/}
.a1_1m{ position: absolute;/*定位*/ top: 20.5%;/*上面位置*/ left: 5%;/*左邊位置*/ width: 90%;/*門的大小*/ cursor: pointer;/*滑鼠滑入變手指*/}

.a1_2{ position: absolute;/*定位*/ top: 45%;/*上面位置*/ left: 20%;/*左邊位置*/ width: 20%;/*門的大小*/ cursor: pointer;/*滑鼠滑入變手指*/}
.a1_2m{ position: absolute;/*定位*/ top: 2%;/*上面位置*/ left: 27.5%;/*左邊位置*/ width: 45%;/*門的大小*/ cursor: pointer;/*滑鼠滑入變手指*/}

.a1_3{ position: absolute;/*定位*/ top: 69.5%;/*上面位置*/ left: 38%;/*左邊位置*/ width: 28%;/*門的大小*/ cursor: pointer;/*滑鼠滑入變手指*/}
.a1_3m{ position: absolute;/*定位*/ top: 81%;/*上面位置*/ left: 15.5%;/*左邊位置*/ width: 70%;/*門的大小*/ cursor: pointer;/*滑鼠滑入變手指*/}

.start{ position: absolute;/*定位*/ top: 43.5%;/*上面位置*/ left: 50%;/*左邊位置*/ width: 25%;/*門的大小*/ cursor: pointer;/*滑鼠滑入變手指*/}
.startm{ position: absolute;/*定位*/ top: 51.5%;/*上面位置*/ left: 20%;/*左邊位置*/ width: 60%;/*門的大小*/ cursor: pointer;/*滑鼠滑入變手指*/}

.startText{ position: absolute; top: 20.5%; right: 5%; width: 37%;}/*比照門的方式，調整到要定位的位置即可*/
.startTextm{ position: absolute; top: 61%; right: 12%; width: 28%;}/*比照門的方式，調整到要定位的位置即可*/

/*--contain-----------------------------------------*/
.contain{ overflow: hidden;}
.headerW{ position: relative; width: 100%; margin: 0 auto;}
.areaWidth,.areaWidth1,.areaWidth2{ position: relative; width: 100%; margin: 0 auto;}
.areaWidth3{ position: relative; width: 100%; margin: 0 auto;}
.areaWidth4{ position: relative; width: 100%; margin: 0 auto;}
.areaWidth5{ position: relative; width: 100%; margin: 0 auto;}
.areaWidth6{ position: relative; width: 100%; margin: 0 auto;}
.areaWidth7{ position: relative; width: 100%; margin: 0 auto;}

.mainTitle{ width: 92%; margin: 0 auto 8px auto;}
.mainTitle2{ width: 85%; margin: 0 auto 8px auto;}
.mainTitle3{ width: 85%; margin: 0 auto 0 auto;}
.mainTitle img,.mainTitle2 img,.mainTitle3 img{ display: block; width: 100%;}

/*--測驗前言-----------------------------------------*/
.gameInfo img{ display: block; width: 100%;}
.gameInfo{ width: 80%; margin: 15px auto 25px auto;}
.gameSay{}
.gameGiftList{}
.gameGiftList > li{ margin-top: 10px;}

/*--測驗-----------------------------------------*/
.gameBox img{ display: block;}
.gameBox{ overflow: hidden; width: 90%; margin: 0 auto; padding: 5%; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/game_border.jpg); background-position: top center; border: #68ecfb 0px solid; /*box-shadow: inset 0 0 9px rgba(255,255,255,01.8), 0 0 9px rgba(171,92,244,0.57); border-radius: 5px;*/}
.gameCon{ position: relative; padding: 1%; border-radius: 20px;
   /* background: #1f2061;*/
}
.gameBorder{ border: #242021 0px solid; /*box-shadow: inset rgb(224,105,217) 0px 0px 12px, rgb(224,105,217) 0 0px 10px;*/ border-radius: 15px;}
.gameDeco1{ padding: 1%;}
.gameDeco2{ width: 95%; margin: 2% auto;}
/* .gameBox,.gameCon,.gameBorder{ border-radius: 500px;} */
/* .gameDeco1,.gameDeco2{ width: 50%; margin: 0 auto; position: absolute; left: 0; right: 0;}
.gameDeco1{ top: 6%;}
.gameDeco2{ bottom: 6%;}
.gameDeco1 img,.gameDeco2 img{ display: block; width: 100%;} */
.gameH img{ width: 100%;}

.gameGirl, .gameBoy{ display: none;}

.gameTilte,.gameGift,.gameStart{ margin: 0 auto;}
.gameTilte{ width: 80%; padding-top: 15px;}
.gameGift{ width: 95%;}
.gameStart{ display: block; width: 50%; padding-top: 5%; padding-bottom: 15px; cursor: pointer;}

/* .gameTilte{ animation: rotateInOut 3s infinite;}
@keyframes rotateInOut { 0% { transform: rotate(0);} 50% { transform: rotate(5deg);} 100% { transform: rotate(0);} } */

/*開始測驗按鈕動畫*/
.gameStart{ animation: scaleInOut 0.8s infinite;}
@keyframes scaleInOut{ 0% { transform: scale(1);} 50% { transform: scale(0.9);} 100% { transform: scale(1);} }

/*問答區*/
.gameQAbox{ display: flex; flex-wrap: wrap;/*20250108手機圖片滿版設定*/ align-items: stretch; padding: 5% 5%; font-family: 'Zen Maru Gothic', serif;}
.gameQA{ width: 100%;/*20250108選項寬度*/}
.gameQues{ font-size: 2.5rem; color: #000000; font-weight: bold;}
.progressBar{ font-size: 2.5rem; color: #000000; font-weight: bold; text-align: right;}
.gameSelect{ margin: 15px 0; padding: 8px 15px; font-size: 1.6rem; color: #242021; font-weight: bold; border: #242021 3px solid; /*box-shadow: inset rgb(94,136,119) 0px 0px 12px, rgb(73,127,105) 0 0px 10px;*/ border-radius: 0px; cursor: pointer; background-color: #e6ddce;  font-family: "Zen Maru Gothic", serif; border-radius: 15px; /* 圓角 */ }
.gameSelect:last-child{ margin-bottom: 0;}
.gameSelect:hover{ color: #000000; border-color: #88dbce; /*box-shadow: inset rgb(255,70,255) 0px 0px 12px, rgb(255,70,255) 0 0px 10px;*/ background-color: #88dbce; border-radius: 15px; /* 圓角 */}

/*進度條*/
.gameBar{ position: relative; width: 10%;/*20250108進度條寬度*/ max-width: 30px; margin-left: 15px; border: #242021 2px solid; background-color: #238a53; /* box-shadow: inset rgb(255,255,255) 0px 0px 12px, rgb(255,255,255) 0 0px 10px;*/ border-radius: 0px;}
.gameBarTxt{ position: relative; z-index: 2;}
.gameBarPercent{ position: absolute; bottom: 0; left: 0; width: 100%; background-color: #cf3900;}

/*題目圖片*/
.gameQApic{ width: 100%;/*20250108題目圖片寬度*/}
.gameQApic img{ display: block; width: 100%;}

/*結果區*/
.gameENDbox img{ display: block; width: 100%;}
.resultPic{ width: 100%; margin: 0 auto;}
.resultTitle2{ margin-top: 10px}

.gameEndBook{ display: flex; justify-content: space-between; width: 90%; margin: 10px auto 0 auto;}
.gameEndBook > li{ width: 32%;}

.gameEndBtn{ width: 90%; margin: 10px auto 20px auto; display: flex;}
.gameEndBtn a, .endBtn{ display: block; margin-top: 5px; cursor: pointer;}

/*下載圖片*/
.download{ width: 90%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: block;}

/*首次測驗獲得*/
.firstGet{ width: 100%; margin: 5% auto 0 auto; padding: 20px 0; text-align: center; /*background-color: rgb(51, 226, 154);*/ font-size: 2.5rem; color: #242021; font-weight: bold; border-radius: 8px; font-family: 'Zen Maru Gothic', serif;}
.firstGet a{ font-size: 1.3rem; color: #cf3900; text-decoration: none;}
.firstGet a:hover{ text-decoration: none;}

/* 標題文字樣式1 */
.highlight-title1 {
  font-size: 2.5rem; /* 調整字體大小 */
  color: #ffffff; /* 顏色 */
  font-weight: bold; /* 加粗 */
}

/* 標題文字樣式2 */
.highlight-title2 {
  font-size: 3rem; /* 調整字體大小 */
  color: #fff10c; /* 顏色 */
  font-weight: bold; /* 加粗 */
}

/* 贈品文字樣式 */
.giftCoupon-title {
  color: #fff10c; /* 顏色 */
}

/* 標題文字樣式3 */
.highlight-title3 {
  font-size: 2rem; /* 調整字體大小 */
  color: #000000; /* 顏色 */
  font-weight: bold; /* 加粗 */
}
.highlight-title3 a{
  font-size: 2rem; /* 調整字體大小 */
  color: #000000; /* 顏色 */
  font-weight: bold; /* 加粗 */
}

/* 標題文字樣式4 */
.highlight-title4 {
  font-size: 1.5rem; /* 調整字體大小 */
  color: #000000; /* 顏色 */
  font-weight: bold; /* 加粗 */
}
.highlight-title4 a{
  font-size: 1.5rem; /* 調整字體大小 */
  color: #000000; /* 顏色 */
  font-weight: bold; /* 加粗 */
}

/*活動說明-----------------------------------------*/
.noticeBox{ width: 100%; margin: 0 auto 0 auto;}/*20240704因為活動說明也分開自己一塊,所以移除margin-top,不然會多一塊空白間距*/
.noticeBox h4{ margin: 0 6% 10px 0%; font-size: 1.8rem; color: #ffffff; font-weight: bold; text-align: left;}
.noticeList{ padding: 25px 7% 25px 12%; font-size: 1.4rem; font-weight: bold; color: #ffffff;  border-radius: 0px;}
.noticeList > li{ list-style: disc; margin-bottom: 10px; line-height: 1.3;}
.noticeList > li:last-child{ margin-bottom: 0;}

.highlight {
  color: #1ddcda; /* 顏色 */
  font-weight: bold; /* 可選：讓文字加粗 */
}

/*--影片-----------------------------------------*/
.ytVideoBox{ position: relative; z-index: 1; margin: 0 10px; background-color: #ff6035; border: #ff6035 8px solid;}
.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;}

/*--套書-----------------------------------------*/
.setBookList img{ display: block; width: 100%;}
.setBookList{ width: 80%; margin: 0 auto;}
.setBookList > li:last-child{ width: 80%; margin: 0 auto;}

/*--單書-----------------------------------------*/
.bookList img{ display: block; width: 100%;}
.bookList{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 90%; margin: 15px auto 0 auto;}
.bookList > li{ width: 48%; margin-bottom: 4%;}

/*--社群活動-----------------------------------------*/
.activeBox img{ display: block; width: 100%;}
.activeBox{ width: 80%; margin: 0 auto;}
.activeSocialList{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 90%; margin: 15px auto;}
.activeSocialList > li{ width: 30%;}

/*會員獨享-----------------------------------------*/
.memberList{ display: flex; flex-wrap: wrap; width: 90%; margin: 30px auto 0 auto;}
.memberList > li{ width: 33.3%; margin-bottom: 20px;}
.memberList img{ width: 100%;}
.memberOnair{ width: 80%; margin: 0 auto;}
.memberOnair img{ display: block; width: 100%;}

/*--area3-1--------------------------------*/
.title3_1{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title3_1m{ width: 90%; margin: 0 auto; padding: 100px 0 0px 0px; position: relative;display: block;}

.book3_1{flex-wrap: wrap; justify-content: center; padding: 0% 0% 0px 0%; margin-top: 0px; border-radius: 10px; display: flex;}
.book3_1 li{ width: 80%; margin-bottom: 0px; display: flex;}

.more3_1{ width: 90%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: block;}

/*--area3-2--------------------------------*/
.title3_2{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title3_2m{ width: 90%; margin: 0 auto; padding: 30px 0 0px 0px; position: relative;display: block;}

.book3_2{flex-wrap: wrap; justify-content: center; padding: 5% 5% 0px 5%; margin-top: 0px; border-radius: 10px; display: flex;}
.book3_2 li{ width: 50%; margin-bottom: 0px; display: flex;}

/*--area3-3--------------------------------*/
.title3_3{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title3_3m{ width: 90%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: block;}

.more3_3{ width: 70%; margin: 0 auto; padding: 0px 0 100px 0px; position: relative;display: block;}

/*swiper4 設定----------*/
.swiperBox4{ width: 70%;/*寬度自訂*/ margin: 0 auto;/*置中*/ padding: 0px 40px 0px 40px;/*箭頭放在圖外面:依照箭頭跟點點的大小調整數值*/ position: relative;}
/*點點樣式設定*/
.swiperBox4 .swiper-pagination-bullet{ background: #54e0cd; opacity: 1;}
/*點點被選到時的顏色*/
.swiperBox4 .swiper-pagination-bullet-active{ background: #54e0cd;}
/*設定箭頭顏色*/
.swiperBox4 .swiper-button-next:after, .swiperBox4 .swiper-button-prev:after,
.swiperBox4 .swiper-button-next, .swiperBox4 .swiper-button-prev{ color: #54e0cd; font-size: 50px;/*設定箭頭大小*/}
/*箭頭位置設定*/
.swiperBox4 .swiper-button-next, .swiper-button-prev{ top: calc(50% - 20px);/*扣掉上面.swiperBox的padding-bottom的40px的一半=20px*//*這樣才會置中*/}

/*--area4--------------------------------*/
.title4_1{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title4_1m{ width: 100%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: block;}
.title4_2{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title4_2m{ width: 90%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: block;}
.title4_3{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title4_3m{ width: 90%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: block;}
.book4{flex-wrap: wrap; justify-content: flex-start; padding: 0% 5% 20px 5%; margin-top: 0px; border-radius: 10px; display: flex;}
.book4 li{ width: 50%; margin-bottom: 0px; display: flex;}

/*--area5--------------------------------*/
.title5_1{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title5_1m{ width: 100%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: block;}
.title5_2{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title5_2m{ width: 90%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: block;}
.title5_3{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title5_3m{ width: 90%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: block;}
.book5{flex-wrap: wrap; justify-content: flex-start; padding: 0% 5% 20px 5%; margin-top: 0px; border-radius: 10px; display: flex;}
.book5 li{ width: 50%; margin-bottom: 0px; display: flex;}

/*--area6--------------------------------*/
.title6_1{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title6_1m{ width: 100%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: block;}
.title6_2{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title6_2m{ width: 90%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: block;}
.title6_3{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title6_3m{ width: 90%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: block;}
.book6{flex-wrap: wrap; justify-content: flex-start; padding: 0% 5% 20px 5%; margin-top: 0px; border-radius: 10px; display: flex;}
.book6 li{ width: 50%; margin-bottom: 0px; display: flex;}

/*--area7--------------------------------*/
.title7_1{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title7_1m{ width: 100%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: block;}
.title7_2{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title7_2m{ width: 90%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: block;}
.title7_3{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title7_3m{ width: 90%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: block;}
.book7{flex-wrap: wrap; justify-content: flex-start; padding: 5% 5% 0px 5%; margin-top: 0px; border-radius: 10px; display: flex;}
.book7 li{ width: 50%; margin-bottom: 0px; display: flex;}

/*sweetAlert*/
.sweetBtn{ padding: 3px 10px; font-size: 1.5rem; font-weight: bold;}

.get{ margin-top: 5px; font-size: 1.8rem; font-weight: bold; color: #000;}
.get a{ font-size: 1.5rem; color: #70a612; text-decoration: underline !important;}
.get a:hover{ text-decoration: none !important;}

/*順序*/
/* .swal2-popup{ display: flex;}
.swal2-html-container{ order: 1;}
.swal2-image{ order: 2;}
.swal2-footer{ order: 3;}
.swal2-actions{ order: 4;} */

/*分享社群*/
.shareBox{ width: 100%; margin: 0 auto;}
.shareBox img{ display: block; width: 100%;}
.shareTo{ display: block; width: 80%; margin: 0 auto;}
.shareIconList{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 90%; margin: 15px auto 0 auto;}
.shareIcon{ display: block; width: 20%;}

/*分享圖*/
.sharePic{ margin-top: 15px;}

/*結果圖促案*/
.gameButtonsContainer {
  text-align: center; /* 整體置中 */
  margin-top: 20px; /* 與上方內容的間距 */
}
.gameButtonsText {
  font-size: 2rem; /* 文字大小 */
  font-weight: bold; /* 文字加粗 */
  color: #242021; /* 文字顏色 */
  margin-bottom: 15px; /* 與按鈕的間距 */
  font-family: 'Zen Maru Gothic' /* 外連字體 */
}
.gameButtonsText2 {
  font-size: 1.5rem; /* 文字大小 */
  font-weight: bold; /* 文字加粗 */
  color: #242021; /* 文字顏色 */
  margin-top: 20px; /* 與按鈕的間距 */
  margin-bottom: 15px; /* 與按鈕的間距 */
  font-family: 'Zen Maru Gothic' /* 外連字體 */
}

/*結果圖下方按鈕*/
.gameButtons {
  display: flex;
  justify-content: space-between; /* 左右對齊 */
  width: 90%; /* 按鈕容器的寬度，可根據需要調整 */
  margin: 0px 5% 0px 5%;  /*上下間距和水平置中 */
  font-family: 'Zen Maru Gothic' /* 外連字體 */
}

.gameButton {
  flex: 0 0 100%; /* 按鈕寬度占父容器的45% */
  padding: 10px 20px; /* 按鈕內部間距 */
  font-size: 2rem; /* 字體大小 */
  font-weight: bold;
  border-radius: 0px; /* 圓角 */
  cursor: pointer; /* 滑鼠移過時變成手指圖示 */
  border: 3px solid; /* 邊框寬度 */
  border-radius: 15px; /* 圓角 */
}


.gameButtonLeft {
  background-color: #cf3900; /* 左邊按鈕底色 */
  border-color: #242021; /* 左邊按鈕邊框顏色 */
  color: #fff; /* 左邊按鈕文字顏色 */
  font-family: 'Zen Maru Gothic' /* 外連字體 */
}

.gameButtonRight {
  background-color: #278853; /* 右邊按鈕底色 */
  border-color: #242021; /* 右邊按鈕邊框顏色 */
  color: #242021; /* 右邊按鈕文字顏色 */
  font-family: 'Zen Maru Gothic' /* 外連字體 */
}

/*手機下載*/
.swal2-footer{ margin: 0; padding: 0; border: 0;}
.popFooter{ color: #000; font-size: 1.3rem; font-weight: bold;}

/*20240628商品列表顯示在右側*/
.listRight{ margin: 0 auto;/*置中*/ padding: 5%;/*間距自訂*/}

/*[20240628調整]*/
.listBgOutside{ overflow: hidden;/*寫這個圖才不會跑出去圓角的範圍*/ padding: 0 !important;/*把間距拿掉*/ background-color: #ff46ff; border-radius: 30px; border:10px solid #1f2061;/*外框*/ box-shadow: rgba(0, 0, 0, 0.35) 10px 10px 12px;/*box陰影*/ }/*外層多家背景色*/
.listR, .listBg.listR{ margin-left: 15%;}/*靠左(右邊寫間距)*/
.listL, .listBg.listL{ margin-right: 15%;}/*靠右(左邊寫間距)*/
.listTitleBox.listL, .listTitleBox.listR{ padding: 0 5.5% 3% 5.5%;}/*下方對話框的間距設定*/

/*[20240628調整]已讀定位*/
.listBox{ position: relative;}/*要定在誰身上*/
.wordL{ position: absolute; bottom: 5%; right: -8%; width: 15%;}/*被定位的物件*/
.wordR{ position: absolute; bottom: 5%; right: -8%; width: 15%;}/*被定位的物件*/

/*--picHover picBox 滑鼠反應-----------------------------------------*/
.picBox .pic{ display:block;}
.picBox .picHover{ display:none;} /*一開始隱藏hover的圖片*/

.picBox:hover .pic{ display:none;} /*滑入後隱藏一開始的圖片*/
.picBox:hover .picHover{ display:block;} /*滑入後顯示hover的圖片*/

/* popup --------------------------------------------------- */
.popOverlay{ position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(47, 35, 49, 0.99); transition:opacity 500ms; z-index:10000; font-size:1.4rem;}
.popBox{ width:93%; max-height:90vh; padding:40px 14px 14px; margin:15px auto 0 auto; background:#d4cfbc; border-radius:5px; position:relative; transition:all 1s ease-in-out; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.popBox .popClose{ display:block; position:absolute; top:9px; right:10px; width:25px; height:25px; background:url(icon-close.png) no-repeat; background-size:25px 25px; cursor:pointer;}
.popBox h2{ padding:8px 1%; margin-bottom:5px; font-size:1.6rem; background-color:#ad3c41; color:#ffffff; background-color:#efefef; color:#636363; font-weight:normal; text-align:center;}
.popBox ul{ list-style:none;}

/* popup按鈕樣式 */
.ppBtn{ display:block; font-size:1.5rem; cursor:pointer; border-radius:2px; line-height:45px; text-align: center;}
.popBtn{ display:flex;}
.popBtn a{ flex:1; width:100%; border:#8d1a91 2px solid; background-color: #d4cfbc; margin-right:4%; font-size:1.8rem; color: #8d1a91; font-weight: bold; font-family:Arial, Verdana, Microsoft JhengHei, sans-serif; outline:none;}
.popBtn a:last-child{ margin-right:0;}
.popBtn a:hover{ background-color: #8d1a91; color: #fff;}

/* popup共用提醒 */
.popAlert{ text-align:center; margin-bottom: 40px; padding:15px 2% 25px 2%; color: #8d1a91; font-size:1.8rem; font-weight:bold;}
.ppaRed{ color:#481c0c;}
.popContent{ overflow-y:auto; max-height:70vh; -webkit-overflow-scrolling:touch;}


/*--767up(Pc)------------------------*/
@media screen and (min-width:767px) {
    .FOOTER_BG{ padding-bottom: 20px !important;}
    .pcNo{ display: none;}
    .mNo{ display: block;}

    header{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250101_yuri/images/bg_header.jpg); background-position: top center; background-size: cover; background-attachment: fixed;}
    .bgHeaderBao{ display: block;}
	.header1{ position: absolute; top: 12.5%; right: 45%; width: 43.5% !important; /* 強制覆蓋 */ display: block;}
	.header2{ position: absolute; top: 41%; right: 88%; width: 9.8% !important; display: block;}
	.header3{ position: absolute; top: 59%; right: 80.2%; width: 7.5% !important; display: block;}
	.header4{ position: absolute; top: 3%; right: 36.4%; width: 8.5% !important; display: block;}
	.header5{ position: absolute; top: 46.3%; right: 74.5%; width: 25.5% !important; display: block;}
	.header6{ position: absolute; top: -1.5%; right: 0%; width: 60.5% !important; display: block;}

	.headerPic{ position: absolute; top:0%; left:0; right: 0%; margin: 0 auto;}
    .headerTitle{ width: 0%; }
    .headerBao{ top: 0%; left: 0%; width: 0%;}
	.headerGiftBao,.bgHeaderM{ display: none;}

    .areaBox{ overflow: hidden; padding: 0; background-attachment: fixed;}

    /*bg-----------------------------------------*/
    .bgPadT{ padding-top: 60px;}
    .bgPadB{ padding-bottom: 90px;}

	.areaBg0{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_01.png);}
    .areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_01.png); background-size: cover;}
    .areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_02.png); background-size: cover;}
	.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_03.png); background-size: cover;}
	.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_04.png); background-size: cover;}
	.areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_05.png); background-size: cover;}
	.areaBg6{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_06.png); background-size: cover;}
    .areaBg7{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_07.png); background-size: cover;}

    .bgDeco1{ background-size: 100%;}/*20240626.bgDeco1自己拉出來一行，不要寫background-attachment: fixed;就會跟著動了*/
    .bgDeco2,.bgDeco3{ background-attachment: fixed; background-size: cover; background-repeat: no-repeat;}

	.bgDeco4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_04.png); background-size: cover;background-attachment: fixed;}
	.bgDeco4_1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_01.png); background-size: cover;background-attachment: fixed;}
	.bgDeco4_2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250903_hx/images/bg_01.png); background-size: cover;background-attachment: fixed;}


    /*--contain-----------------------------------------*/
    .areaWidth{ max-width: 1023px; padding-top: 0;}
	.areaWidth1{ max-width: 70%; margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: 0px; }
    .areaWidth2{ max-width: 1300px;}
	.areaWidth3{ max-width: 1200px; margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: 0px;}
	.areaWidth4{ max-width: 900px; margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 100px; margin-bottom: 100px; padding-right: 35%;}
	.areaWidth5{ max-width: 900px; margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 100px; margin-bottom: 100px; padding-left: 35%;}
	.areaWidth6{ max-width: 900px; margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 100px; margin-bottom: 100px; padding-left: 35%;}
	.areaWidth7{ max-width: 900px; margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 200px; margin-bottom: 200px;}

    .mainTitle{ width: 56%;}
    .mainTitle2{ width: 75%; max-width: 1000px;}

    /*--測驗前言-----------------------------------------*/
    .gameInfo{ max-width: 1012px; margin: 0 auto 30px auto;}
    .gameSay{}
    .gameGiftList{ display: flex; flex-wrap: wrap; justify-content: space-between;}
    .gameGiftList > li{ width: 49.5%; margin-top: 40px;}

    /*--測驗-----------------------------------------*/
    .gameBox{ max-width: 1000px; padding: 40px 20px 40px 20px;}
    .gameBorder{ padding: 0 0 8% 0;}
    .gameDeco1{ padding-bottom: 12%;}
    .gameDeco2{ max-width: 1010px; margin: 1.5% auto;}

    .gameGirl, .gameBoy{ display: block; width: 26%; top: 14%; position: absolute;}
    .gameGirl{ left: 6%;}
    .gameBoy{ right: 4%;}

    .gameTilte{ width: 52%; padding-top: 0;}
    .gameGift{ width: 52%;}
    .gameStart{ width: 28%; padding-top: 5%; padding-bottom: 35px;}

    /*下載圖片*/
	.download{ width: 70%; padding: 0px 0px 0px 0px; display: block;}

    /*問答區*/
    .gameQAbox{ padding: 10% 30% 10% 30%;}
    .gameQA{ width: 100%;}

	.gameQues {
     font-size: 2.5rem;
     color: #000000; /* 文字顏色 */
     font-weight: bold; /* 加粗 */
     }

    .gameSelect{ padding: 10px 15px; font-size: 1.8rem; border-radius: 15px; /* 圓角 */}


    /*進度條*/
    .gameBar{ width: 3%;/*20250108進度條寬度*/ max-width: inherit; margin-left: 30px;/*20250108左側間距縮小,分一點給圖片右側間距*/}

    /*題目圖片*/
    .gameQApic{ width: 33%;/*20250108題目圖片寬度*/ margin-right: 20px;/*20250108圖片右側間距*/}

    /*結果區*/
    .resultPic{ width: 60%;}
    .gameEndBook{ width: 60%;}

    .gameEndBtn{ display: flex; width: 50%; margin: 20px auto;}

    /*結果圖促案*/
    .gameButtonsContainer {
      text-align: center; /* 整體置中 */
      margin-top: 20px; /* 與上方內容的間距 */
    }
    .gameButtonsText {
      font-size: 2.8rem; /* 文字大小 */
      font-weight: bold; /* 文字加粗 */
      color: #242021; /* 文字顏色 */
      margin-bottom: 15px; /* 與按鈕的間距 */
    }

	.gameButtonsText2 {
      font-size: 2rem; /* 文字大小 */
      font-weight: bold; /* 文字加粗 */
      color: #242021; /* 文字顏色 */
      margin-bottom: 15px; /* 與按鈕的間距 */
    }

    /*結果圖下方按鈕*/
    .gameButtons {
      display: flex;
      justify-content: space-between; /* 左右對齊 */
      width: 50%; /* 按鈕容器的寬度，可根據需要調整 */
      margin: 20px auto; /* 上下間距和水平置中 */
	  border-radius: 15px; /* 圓角 */
    }

    .gameButton {
      flex: 0 0 48%; /* 按鈕寬度占父容器的45% */
      padding: 10px 20px; /* 按鈕內部間距 */
      font-size: 2rem; /* 字體大小 */
      font-weight: bold;
      border-radius: 0px; /* 圓角 */
      cursor: pointer; /* 滑鼠移過時變成手指圖示 */
      border: 3px solid; /* 邊框寬度 */
	  border-radius: 15px; /* 圓角 */
    }

    .gameButtonLeft {
      background-color: #cf3900; /* 左邊按鈕底色 */
      border-color: #242021; /* 左邊按鈕邊框顏色 */
      color: #fff; /* 左邊按鈕文字顏色 */
    }

    .gameButtonRight {
      background-color: #278853; /* 右邊按鈕底色 */
      border-color: #242021; /* 右邊按鈕邊框顏色 */
      color: #242021; /* 右邊按鈕文字顏色 */
    }


    /*首次測驗獲得*/
    .firstGet{ width: 100%; margin-top: 0px; padding-top: 0; font-size: 2.5rem;}
    .firstGet a{ font-size: 1.5rem;}

    /*活動說明-----------------------------------------*/
    .noticeBox{ max-width: 80%;}/*20240704因為活動說明也分開自己一塊,所以移除margin-top,不然會多一塊空白間距*/
    .noticeBox h4{ margin-left: 0%; }
    .noticeList{ padding: 100px 8% 100px 11%; font-size: 1.5rem; border-width: 3px;}

    /*--影片-----------------------------------------*/
    .introBox{ width: 805px; padding-top: 13%; position: relative; z-index: 2;}
    .ytVideoBox{ width: 88%; margin: 0 auto; padding: 40px; border-color: #000;}

    /*--套書-----------------------------------------*/
    .setBookList{ display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 860px;}
    .setBookList > li:first-child{ width: 56%;}
    .setBookList > li:last-child{ width: 37%; margin: 0; padding-top: 15%;}

    /*--單書-----------------------------------------*/
    .bookList{ align-items: flex-start; width: 90%; margin: 40px auto 0 auto;}
    .bookList > li{ width: 19%; margin-bottom: 2%;}
    .bookList > li:nth-child(2),.bookList > li:nth-child(4),.bookList > li:nth-child(7),.bookList > li:nth-child(9){ margin-top: 50px;}
    .bookList > li:nth-child(6),.bookList > li:nth-child(7),.bookList > li:nth-child(8),.bookList > li:nth-child(9),.bookList > li:nth-child(10){ position: relative; top: -50px;}

    /*--社群活動-----------------------------------------*/
    .activeBox{ max-width: 560px;}
    .activeSocialList > li{ width: 27%;}

    /*--會員專區-----------------------------------------*/
    .memberList{ max-width: 1000px; margin: 50px auto 0 auto;}
    .memberList > li{ width: 16.666%;}
    .memberList > li:nth-child(even){ margin-top: 30px;}
    .memberOnair{ width: 80%; max-width: 500px;}

	/*--area3-1--------------------------------*/
	.title3_1{ width: 80%; padding: 100px 0px 0px 0px; display: block;}
	.title3_1m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.book3_1{ flex-wrap: wrap; justify-content: center; padding: 20px 0% 0px 0%; display: flex;}
    .book3_1 li{ width: 40%; padding: 0px 0px 0px 0px; display: block;}

	.more3_1{ width: 40%; padding: 0px 0px 50px 0px; display: block;}

	/*--area3-2--------------------------------*/
	.title3_2{ width: 60%; padding: 50px 0px 0px 0px; display: block;}
	.title3_2m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.book3_2{ flex-wrap: wrap; justify-content: center; padding: 20px 0% 0px 0%; display: flex;}
    .book3_2 li{ width: 30%; padding: 0px 0px 0px 0px; display: block;}

    /*swiper4 設定----------*/
    .swiperBox4{ width: 100%;/*寬度自訂*/ margin: 0 auto;/*置中*/ padding: 10px 50px 0px 50px;/*箭頭放在圖外面:依照箭頭跟點點的大小調整數值*/ position: relative;}
    /*點點樣式設定*/
    .swiperBox4 .swiper-pagination-bullet{ background: #54e0cd; opacity: 1;}
    /*點點被選到時的顏色*/
    .swiperBox4 .swiper-pagination-bullet-active{ background: #54e0cd;}
    /*設定箭頭顏色*/
    .swiperBox4 .swiper-button-next:after, .swiperBox4 .swiper-button-prev:after,
    .swiperBox4 .swiper-button-next, .swiperBox4 .swiper-button-prev{ color: #54e0cd; font-size: 80px;/*設定箭頭大小*/}
    /*箭頭位置設定*/
    .swiperBox4 .swiper-button-next, .swiper-button-prev{ top: calc(50% - 20px);/*扣掉上面.swiperBox的padding-bottom的40px的一半=20px*//*這樣才會置中*/}

	/*--area3-3--------------------------------*/
	.title3_3{ width: 60%; padding: 100px 0px 0px 0px; display: block;}
	.title3_3m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.more3_3{ width: 30%; padding: 0px 0px 150px 0px; display: block;}

	/*--area4--------------------------------*/
	.title4_1{ width: 70%; padding: 0px 0px 0px 0px; display: block;}
	.title4_1m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.title4_2{ width: 70%; padding: 0px 0px 0px 0px; display: block;}
	.title4_2m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.title4_3{ width: 80%; padding: 0px 0px 0px 0px; display: block;}
	.title4_3m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.book4{ flex-wrap: wrap; justify-content: center; padding: 20px 0% 0px 0%; display: flex;}
    .book4 li{ width: 40%; padding: 0px 0px 0px 0px; display: block;}

	/*--area5--------------------------------*/
	.title5_1{ width: 70%; padding: 0px 0px 0px 0px; display: block;}
	.title5_1m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.title5_2{ width: 70%; padding: 0px 0px 0px 0px; display: block;}
	.title5_2m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.title5_3{ width: 80%; padding: 0px 0px 0px 0px; display: block;}
	.title5_3m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.book5{ flex-wrap: wrap; justify-content: center; padding: 20px 0% 0px 0%; display: flex;}
    .book5 li{ width: 40%; padding: 0px 0px 0px 0px; display: block;}

	/*--area6--------------------------------*/
	.title6_1{ width: 70%; padding: 0px 0px 0px 0px; display: block;}
	.title6_1m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.title6_2{ width: 70%; padding: 0px 0px 0px 0px; display: block;}
	.title6_2m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.title6_3{ width: 80%; padding: 0px 0px 0px 0px; display: block;}
	.title6_3m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.book6{ flex-wrap: wrap; justify-content: center; padding: 20px 0% 0px 0%; display: flex;}
    .book6 li{ width: 40%; padding: 0px 0px 0px 0px; display: block;}

	/*--area7--------------------------------*/
	.title7_1{ width: 70%; padding: 0px 0px 0px 0px; display: block;}
	.title7_1m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.title7_2{ width: 70%; padding: 0px 0px 0px 0px; display: block;}
	.title7_2m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.title7_3{ width: 80%; padding: 0px 0px 0px 0px; display: block;}
	.title7_3m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.book7{ flex-wrap: wrap; justify-content: center; padding: 20px 0% 0px 0%; display: flex;}
    .book7 li{ width: 40%; padding: 0px 0px 0px 0px; display: block;}

    /*20240628商品列表顯示在右側*/
    .listRight{ width: 90%;/*寬度自訂*/ margin: 0 auto;/*置中*/ padding: 5% 0;/*上下間距自訂*/}

	/*[20240628調整]*/
    .listBgOutside{ overflow: hidden;/*寫這個圖才不會跑出去圓角的範圍*/ padding: 0 !important;/*把間距拿掉*/ background-color: #ff46ff; border-radius: 50px;}/*外層多家背景色*/
    .listR, .listBg.listR{ margin-left: 15%;}/*靠左(右邊寫間距)*/
    .listL, .listBg.listL{ margin-right: 15%;}/*靠右(左邊寫間距)*/
    .listTitleBox.listL, .listTitleBox.listR{ padding: 0 5.5% 3% 5.5%;}/*下方對話框的間距設定*/

	/*--滑鼠滑入效果(縮小)--------------------------------*/
    .hover1 li a{ display: block; transition: 0.4s;}
    .hover1 li a:hover{ transform: scale(0.9);}/*滑入縮小*/

	.hover1 a{ display: block; transition: 0.4s;}
    .hover1 a:hover{ transform: scale(0.9);}/*滑入縮小*/

	/*--滑鼠滑入效果(變淡)--------------------------------*/
	.hover2 li a:hover img{filter:alpha(Opacity=30);-moz-opacity:0.3;opacity: 0.3;}
    /*sweetAlert*/
    .shareBox{ width: 320px;}
    /* .swal2-footer{ display: none !important;} */

     /*--hover animate--------------------------------*/
     .setBook, .bookList > li a, .activeSocialList > li a, .mainTitle2 a, .gameEndBtn a, .endBtn, .shareIcon{ display: block; transition: 0.4s;}
     .setBook:hover, .bookList > li a:hover, .mainTitle2 a:hover, .gameEndBtn a:hover, .endBtn:hover, .gameButtons button:hover,.shareIcon:hover{ transform: scale(0.9);}
     .bookList > li a:hover{ transform: scale(0.9) rotate(3deg);}
     .activeSocialList > li a:hover{ transform: scale(0.9) rotate(360deg);}

     .hoverRotateR:hover{ transform: rotate(3deg);}
     .hoverRotateL:hover{ transform: rotate(-3deg);}
     .hoverRotateScaleRS:hover{ transform: scale(0.9) rotate(3deg);}

     .gameStart img{ display: block; transition: 0.4s;}
     .gameStart img:hover{ transform: rotate(5deg);}

	/* popup --------------------------------------------------- */
	.popBox{ width:33%; margin:50px auto; padding:40px 20px 20px;}

	/*popup按鈕樣式*/
	.popBtn button{ margin-right:2%;}
	.popContent{ max-height:55vh;}

}

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

    /*--會員專區-----------------------------------------*/
    .memberList{ width: 96%;}

    /*問答區*/
    .gameQA{ width: 82%;/*20250108選項寬度*/}

    /*進度條*/
    .gameBar{ width: 10%;/*20250108進度條寬度*/}

    /*題目圖片*/
    .gameQApic{ width: 100%;/*20250108題目圖片寬度*/}

}

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

}



/**/
.bgLine img{ aspect-ratio: 1980/115;}
.bookList img{ aspect-ratio: 368/461;}
.activeSocialList img{ aspect-ratio: 1/1;}
.memberList img{ aspect-ratio: 196/412;}
.memberList > li:nth-child(5) img{ aspect-ratio: 196/465;}