@charset "utf-8";
/* 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;}

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

.txtGreen{ color: #242021;}
.txtDeepRed{ color: #242021;}
.alink{ color: #71d5ff; text-decoration: underline;}
.alink:hover{ text-decoration: none;}
.alink2{ color: #71d5ff; text-decoration: underline;}
.alink2:hover{ text-decoration: none;}

/*--header-----------------------------------------*/
.headerBox{ overflow: hidden; position: relative; margin-top: 0px;  background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_05.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;}

/*--測驗動畫區域定位-----------------------------------------*/
.start{ position: absolute;/*定位*/ top: 9%;/*上面位置*/ left: 66%;/*左邊位置*/ width: 23%;/*門的大小*/ cursor: pointer;/*滑鼠滑入變手指*/}
.startm{ position: absolute;/*定位*/ top: 11%;/*上面位置*/ left: 0%;/*左邊位置*/ width: 100%;/*門的大小*/ cursor: pointer;/*滑鼠滑入變手指*/}
.startText{ position: absolute; top: 20.5%; right: 5%; width: 37%;}/*比照門的方式，調整到要定位的位置即可*/
.startTextm{ position: absolute; top: 61%; right: 12%; width: 28%;}/*比照門的方式，調整到要定位的位置即可*/

.test_1{ position: absolute;/*定位*/ top: 1%;/*上面位置*/ left: 14%;/*左邊位置*/ width: 60%;/*門的大小*/ cursor: pointer;/*滑鼠滑入變手指*/}
.test_1m{ position: absolute;/*定位*/ top: 63%;/*上面位置*/ left: 29%;/*左邊位置*/ width: 56%;/*門的大小*/ cursor: pointer;/*滑鼠滑入變手指*/}
.test_2{ position: absolute;/*定位*/ top: 15.5%;/*上面位置*/ left: 11.4%;/*左邊位置*/ width: 16.5%;/*門的大小*/ cursor: pointer;/*滑鼠滑入變手指*/}
.test_2m{ position: absolute;/*定位*/ top: 57%;/*上面位置*/ left: 5%;/*左邊位置*/ width: 39%;/*門的大小*/ cursor: pointer;/*滑鼠滑入變手指*/}
.test_3{ position: absolute;/*定位*/ top: 38%;/*上面位置*/ left: 63%;/*左邊位置*/ width: 25%;/*門的大小*/ cursor: pointer;/*滑鼠滑入變手指*/}
.test_3m{ position: absolute;/*定位*/ top: 66%;/*上面位置*/ left: 43%;/*左邊位置*/ width: 53%;/*門的大小*/ cursor: pointer;/*滑鼠滑入變手指*/}

/*--contain-----------------------------------------*/
.contain{ overflow: hidden;}
.headerW{ position: relative; width: 100%; margin: 0 auto;}

.areaWidth1{ padding: 0px 0% 0px 0%;}
.areaWidth2{ padding: 40px 5% 20px 5%;}
.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: 0px auto;}
.areaWidth7{ position: relative; width: 100%; margin: 0 auto;}
.areaWidth8{ position: relative; width: 100%; margin: 0 auto;}
.areaWidth9{ 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%;}

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

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

.areaBg0{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_02.png);}
.areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_02.png);}
.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_02.png);}
.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_03.png);}
.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_04.png);}
.areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_05.png);}
.areaBg6{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_06.png);}
.areaBg7{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_07.png);}
.areaBg8{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_08m.png);}
.areaBg9{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_09m.png);}

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

.bgLine 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; width: 100%;/*20250923圖片加滿版*/}
.gameBox{ overflow: hidden; width: 90%; margin: 0 auto; padding: 5%; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/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{ max-width: 450px;/*20250923最大寬*/ margin: 0 auto;/*20250923置中*/ display: flex; flex-wrap: wrap;/*20250108手機圖片滿版設定*/ align-items: stretch; padding: 5% 5%; font-family: 'Zen Maru Gothic', serif;}
.gameQA{ width: 100%;/*20250108選項寬度*/ height: 750px;/*20250923預留高度*/}
.gameQues{ font-size: 2.5rem; color: #481c0c; font-weight: bold;}
.gameSelect{ margin: 15px 20px; 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: #fff;  font-family: "Zen Maru Gothic", serif; border-radius: 15px;/*圓角*/ text-align: center;/*文字置中*/ }
.gameSelect:last-child{ margin-bottom: 0;}
.gameSelect:hover{ color: #fff; border-color: #b055ab; /*box-shadow: inset rgb(255,70,255) 0px 0px 12px, rgb(255,70,255) 0 0px 10px;*/ background-color: #b055ab; border-radius: 25px;/*圓角*/}

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

/*首次測驗獲得*/
.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;}

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

/* 優惠券文字樣式 */
.highlight-coupon {
  font-size: 1.9rem; /* 調整字體大小 */
  color: #ffffff; /* 顏色 */
  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;}
.noticeList > li ul{ list-style: disc; margin-top: 10px; margin-bottom: 10px; line-height: 1.3;}
.noticeList > li ul:last-child{ margin-top: 0px;}

.highlight {
  color: #fabe00; /* 顏色 */
  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%;}

/*--a1--------------------------------*/
.title1{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: none;}
.title1m{ width: 100%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: block;}
.title1 img, .title1m img{ display: block;}/*20241126新增*/

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

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

/*--a2--------------------------------*/
.title2{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: none;}
.title2m{ width: 80%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: block;}

.deleteline {text-decoration: none;}

/* 首購登機領取按鈕 */
.purple-box {background-color: #ad74b3; /* 紫色背景 */
  width: 65%; /* 長方形寬度 */
  height: 11%; /* 長方形高度 */
  margin: 0px auto; /* 置中 */
  display: flex; /* 使用 Flexbox 排列文字 */
  justify-content: center; /* 水平置中 */
  align-items: center; /* 垂直置中 */
  border-radius: 30px; /* 可選：圓角效果 */
  margin-top: 0px;
}

.purple-box .top-text {
  color: #1e151a;
  font-size: 30px;
  font-weight: 700; /* 極粗字體 */
  font-family: "Zen Maru Gothic", serif;
}

/* 下方文字樣式 */
.bottom-text {
  margin-top: 10px;
  color: #ffffff;
  font-size: 16px;
  text-align: center;/*文字置中*/
  margin-bottom: 20px;
}

.bottom-text .highlight {
  font-weight: bold; /* 強調文字 */
}

/*--a3--------------------------------*/
.title3{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: none;}
.title3m{ width: 80%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: block;}

.title3_2{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: none;}
.title3_2m{ width: 80%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: block;}

.more3{ width: 70%; margin: 0 auto; padding: 0px 0 30px 0px; position: relative; z-index: 1; display: block;}

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

/*--a4--------------------------------*/
.title4{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: none;}
.title4m{ width: 100%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: block;}

.book4{flex-wrap: wrap; justify-content: center; padding: 0px 6% 0px 6%; margin-top: 0px; border-radius: 10px; display: none;}
.book4 li{ width: 100%; margin-bottom: 0px; display: none;}
.book4m{flex-wrap: wrap; justify-content: center; padding: 0px 6% 30px 6%; margin-top: 0px; border-radius: 10px; display: flex;}
.book4m li{ width: 25%; margin-bottom: 0px; display: flex;}

/*--a5--------------------------------*/
.book5{flex-wrap: wrap; justify-content: center; padding: 0px 6% 0px 6%; margin-top: 0px; border-radius: 10px; display: flex;}
.book5 li{ width: 33%; margin-bottom: 0px; display: flex;}

/*--a6--------------------------------*/
.title6{ width: 90%; margin: 0 auto; padding: 0px 6% 0px 6%; position: relative;display: none;}
.title6m{ width: 90%; margin: 0 auto; padding: 50px 6% 0px 6%; position: relative;display: block;}

.book6{flex-wrap: wrap; justify-content: center; /* 子元素水平置中 */ padding: 20px 3% 20px 5%; margin-top: 0px; border-radius: 10px; display: flex;}
.book6 li{ width: 40%; margin-bottom: 20px; display: flex;}

/*--a7--------------------------------*/
.title7{ width: 90%; margin: 0 auto; padding: 0px 6% 0px 6%; position: relative;display: none;}
.title7m{ width: 90%; margin: 0 auto; padding: 50px 6% 0px 6%; position: relative;display: block;}

.book7{flex-wrap: wrap; justify-content: center; /* 子元素水平置中 */ padding: 20px 3% 20px 5%; margin-top: 0px; border-radius: 10px; display: flex;}
.book7 li{ width: 40%; margin-bottom: 20px; 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;}

/*--gameInfo1--------------------------------*/
.gameInfo1{ padding: 5% 5% 10% 10%; border-radius: 13px; font-size: 1.3rem; color: #144a94; font-weight: bold;}
.gameInfo1 li{ margin: 5px; list-style: disc;}
.gameInfo1 li a{ color: #af4041; text-decoration: underline;}

/*--gameInfo2--------------------------------*/
.gameInfo2{ padding: 0% 5% 0% 10%; border-radius: 13px; font-size: 1.3rem; color: #144a94; font-weight: bold;}
.gameInfo2 li{ margin: 5px; list-style: disc;}
.gameInfo2 oi{ padding-left: 3%; font-size: 1.3rem;}
.gameInfo2 li a{ color: #af4041; text-decoration: none; /* 移除下劃線 */}
.gameInfo2 li > ol > li{ list-style-type:disc;}/* list-style: none; 把ol li的樣式移除*/


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

/*--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/20251001_stupidparticle/images/bg_01.png);}
    .areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_01.png); background-size: cover;}
    .areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_02.png);}
	.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_03.png);}
	.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_04.png);}
	.areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_05.png); background-size: cover;/*20240628寫cover就會根據螢幕縮放調整背景,讓背景寬高永遠被填滿*/ background-attachment: fixed;/*20240628背景固定要寫在這邊才會固定住*/}
	.areaBg6{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_06.png); background-size: cover; background-attachment: fixed;}
	.areaBg7{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_07.png); background-size: cover;}
	.areaBg8{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_07.png); background-size: cover;}
	.areaBg9{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/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/20251001_stupidparticle/images/bg_04.png); background-size: cover;background-attachment: fixed;}
	.bgDeco4_1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/test_bg2.png); background-size: cover;background-attachment: fixed;}
	.bgDeco4_2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251001_stupidparticle/images/bg_04_2_1.png); background-size: cover;background-attachment: fixed;}

    /*--contain-----------------------------------------*/
    .areaWidth{ max-width: 1023px; padding-top: 0;}

	.areaWidth1{ max-width: 100%;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: 0px;}
	.areaWidth2{ max-width: 1100px;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 30px; margin-bottom: 50px; }
	.areaWidth3{ max-width: 1200px;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 80px; margin-bottom: 50px; }
	.areaWidth4{ max-width: 1000px;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: 90px; }
	.areaWidth5{ max-width: 1200px;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 50px; margin-bottom: 50px; }
	.areaWidth6{ max-width: 1200px;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 100px; margin-bottom: 100px; }
	.areaWidth7{ max-width: 1200px;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 100px; margin-bottom: 100px; }
	.areaWidth8{ max-width: 1300px;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 20px; margin-bottom: 20px; }
	.areaWidth9{ max-width: 1300px;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 20px; margin-bottom: 100px; }

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

    /*問答區*/
    .gameQAbox{ max-width: 480px;/*20250923最大寬*/ /*padding: 10% 30% 10% 30%;*//*20250923隱藏*/}
    .gameQA{ width: 100%; height: 750px;/*20250923預留高度*/}

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

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


    /*進度條*/
    .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: 0px 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;}

	/*--bookStyle--------------------------------*/
	.bookStyle{ display: flex; gap: 10px;}/*間距固定10px,也可以設%*/
	.bookStyle li{ flex: 1;}
	.bookStyle li:nth-child(1){ flex: 1.5;}/*第一本比較大(可以是小數點,也可以整數)*/

	/*--a1--------------------------------*/
	.title1{ width: 100%; padding: 0px 0px 0px 0px; display: block;}
	.title1m{ width: 100%; padding: 0px 0px 0px 0px; display: none;}

	.check{ flex-wrap: wrap; justify-content: center; padding: 0px 0% 0px 0%; margin-top: 0px; display: flex;}
    .check li{ width: 50%; padding: 0px 0px 0px 0px; display: block;}

	.Style1{ display: flex; gap: 0px;}/*間距固定10px,也可以設%*/
	.Style1 li{ flex: 1; flex: 2; }
	.Style1 li:nth-child(2){ flex: 2;}/*第一本比較大(可以是小數點,也可以整數)*/
	.Style1 li:nth-child(3){ flex: 1;}/*第一本比較大(可以是小數點,也可以整數)*/

	.more1{ flex-wrap: wrap; justify-content: center; padding: 0px 0% 0px 0%; margin-top: 30px; display: flex;}
    .more1 li{ width: 50%; padding: 0px 0px 0px 0px; display: block;}

	/*--a2--------------------------------*/
	.title2{ width: 100%; text-align: left; /* 圖片在容器內靠左對齊 */ padding: 0px 0px 0px 0px; display: block;}
	.title2m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.Style2{ display: flex; gap: 0px;}/*間距固定10px,也可以設%*/
	.Style2 ul{ flex: 1;}
	.Style2 ul:nth-child(2){ flex: 1.37;}/*第一本比較大(可以是小數點,也可以整數)*/

	/* 首購登機領取按鈕 */
	.purple-box {
 	 background-color: #ffffff; /* 紫色背景 */
 	 width: 60%; /* 長方形寬度 */
 	 height: 11%; /* 長方形高度 */
 	 margin: 0px auto; /* 置中 */
 	 display: flex; /* 使用 Flexbox 排列文字 */
 	 justify-content: center; /* 水平置中 */
 	 align-items: center; /* 垂直置中 */
  	border-radius: 25px; /* 可選：圓角效果 */
 	 margin-top: 0px;
	}

	.purple-box .top-text {
	  color: #231815; /* 文字為白色 */
	  font-size: 38px; /* 文字大小 */
	  font-weight: 700; /* 極粗字體 */
	  font-family: "Zen Maru Gothic", serif;
	}


	/* 下方文字樣式 */
	.bottom-text {
  	margin-top: 10px;
  	color: #ffffff; /* 紫色文字 */
 	font-size: 16px;
 	text-align: center;/*20241223文字置中*/
	margin-bottom: 70px;

	}

	.bottom-text .highlight {
 	 font-weight: bold; /* 強調文字 */
	}

	/*--a3--------------------------------*/
	.title3{ width: 100%; padding: 0px 0px 0px 0px; display: block;}
	.title3m{ width: 100%; padding: 0px 0px 0px 0px; display: none;}

	.title3_2{ width: 80%; padding: 0px 0px 0px 0px; display: block;}
	.title3_2m{ width: 80%; padding: 0px 0px 0px 0px; display: none;}

	.more3{ width: 40%; padding: 20px 0px 0px 0px; display: block;}

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

	/*--a4--------------------------------*/
	.title4{ width: 100%; padding: 0px 0px 0px 0px; display: block;}
	.title4m{ width: 100%; padding: 0px 0px 0px 0px; display: none;}

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

	.bookStyle4{ display: flex; gap: 10px;}/*間距固定10px,也可以設%*/
	.bookStyle4 li{ flex: 1;}
	.bookStyle4 li:nth-child(1){ flex: 4.15;}/*第一本比較大(可以是小數點,也可以整數)*/

	/*--a5--------------------------------*/
	.book5{ flex-wrap: wrap; justify-content: center; padding: 0px 0% 0px 0%; margin-top: 0px; display: flex;}
    .book5 li{ width: 20%; padding: 0px 0px 0px 0px; display: block;}

	/*--a6--------------------------------*/
	.title6{ width: 75%; padding: 0px 0px 0px 0px; display: block;}
	.title6m{ width: 70%; padding: 0px 0px 0px 0px; display: none;}

	.book6{ flex-wrap: wrap; justify-content: flex-start; padding: 0px 0% 0px 0%; display: flex;}
    .book6 li{ width: 25%; padding: 0px 0px 0px 0px; display: block;}

	/*--a7--------------------------------*/
	.title7{ width: 80%; padding: 0px 0px 30px 0px; display: block;}
	.title7m{ width: 70%; padding: 0px 0px 0px 0px; display: none;}

	.book7{ flex-wrap: wrap; justify-content: flex-start; padding: 0px 0% 0px 0%; display: flex;}
    .book7 li{ width: 25%; 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;}

	/*--gameInfo1--------------------------------*/
	.gameInfo1{ padding: 3% 0% 1% 0%; border-radius: 10px; font-size: 1.4rem; color: #144a94; font-weight: bold;}
    .gameInfo1 li{ margin: 5px;  list-style-type:disc;}
    .gameInfo1 li a{ color: #af4041; text-decoration: underline;}

	/*--gameInfo2--------------------------------*/
	.gameInfo2{ padding: 0% 0% 0% 2%; border-radius: 10px; font-size: 1.5rem; color: #614c3f; font-weight: bold;}
    .gameInfo2 li{ margin: 5px; /*list-style-type:decimal-leading-zero; 編號前面+0，如01、02、03...*/ }
    .gameInfo2 li a{ color: #af4041; text-decoration: none; /* 移除下劃線 */}

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

}

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

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

    .gameQABox{ max-width: 485px;/*20250923最大寬*/}
    /*問答區*/
    .gameQA{ /*width: 82%;*//*20250923因為題目是圖片,所以移除寬度設定*/}

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