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

/*--背景音樂開關鈕--------------------------------*/
.gr-audio-btn{
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 10010;
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    border: none; 
    border-radius: 999px;
    background: rgba(255,255,255,.6);
    color: #fff;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    cursor: pointer;
    transition: transform .15s ease, background .2s ease;
    padding: 5px;/*間距*/
}
.gr-audio-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.9); }
.gr-audio-btn:active{ transform: translateY(0); }
.gr-audio-btn:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

.gr-audio-btn .gr-icon{ display: none; }
.gr-audio-btn.is-muted .gr-icon-muted{ display: block; }
.gr-audio-btn.is-playing .gr-icon-playing{ display: block; }
.gr-audio-btn img{ width: 50px; height: 50px;} /*按鈕大小*/

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

.heighLightPurple{ background-color: #6f64d1; padding: 0 5px;}
.heighLightGreen{ display: inline-block; margin: 4px 0; background-color: #a7e0a6; padding: 0 5px;}
.heighLightRed{ display: inline-block; margin: 4px 0; background-color: #e7cdc9; padding: 0 5px;}
.txtPurple{ color: #c925bc;}
.txtGreen{ color: #04ac00;}
.txtRed{ color: #df3f24;}
.txtBrown{ color: #885d00;}
.txtBlue{ color: #2487e0;}
.txtYellow{ color: #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;}

/*背景圖-----------------------------------------*/
.bg{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250915_bwdriver/images/bg.png); background-position: top center; background-size: 160%;}
.bgColor1{ background-color: #fc62b3;}
.bgColor2{ background-color: #6ad6b9;}
.bgColor3{ background-color: #b985ff;}

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

/*手機版人物*/
.headerP1m img{ transform: translateX(8%);}
.headerP2m img{ transform: translateX(-8%);}

/*刊頭動畫(愛心)*/
/* .headerHeart img, .headerHeart2 img, .headerHeart3 img, .headerHeart4 img{ transform: translateY(20%);}
.headerHeart{ animation: headerHeart 10s infinite; transform: scale(0);}
@keyframes headerHeart { 
    0%{ transform: scale(0);}
    100% { transform: scale(3);}
}
.headerHeart2{ animation: headerHeart2 10s infinite; transform: scale(0); animation-delay: 2s;}
@keyframes headerHeart2 { 
    0%{ transform: scale(0);}
    100% { transform: scale(3);}
}
.headerHeart3{ animation: headerHeart3 10s infinite; transform: scale(0); animation-delay: 4s;}
@keyframes headerHeart3 { 
    0%{ transform: scale(0);}
    100% { transform: scale(3);}
}
.headerHeart4{ animation: headerHeart4 10s infinite; transform: scale(0); animation-delay: 6s;}
@keyframes headerHeart4 { 
    0%{ transform: scale(0);}
    100% { transform: scale(3);}
} */

/*手機震動動畫*/
.phoneAni1{ animation: phoneAni1 2s infinite;}
@keyframes phoneAni1 {
    0%{ transform: rotate(0deg);}
    5%{ transform: rotate(-1deg);}
    10%{ transform: rotate(1deg);}
    15%{ transform: rotate(0deg);}
    85%{ transform: rotate(0deg);}
    90%{ transform: rotate(1deg);}
    95%{ transform: rotate(0deg);}
    100%{ transform: rotate(-1deg);}
}
.phoneAni2{ animation: phoneAni2 2s infinite;}
@keyframes phoneAni2 {
    0%{ transform: rotate(0deg);}
    5%{ transform: rotate(1deg);}
    10%{ transform: rotate(-1deg);}
    15%{ transform: rotate(0deg);}
    85%{ transform: rotate(0deg);}
    90%{ transform: rotate(-1deg);}
    95%{ transform: rotate(0deg);}
    100%{ transform: rotate(1deg);}
}

/*手機震動動畫(測驗答錯時)*/
.phoneAni3{ animation: phoneAni3 2s forwards; animation-iteration-count: 1;/*重複n次*/}
@keyframes phoneAni3 {
    0%{ transform: rotate(0deg);}
    5%{ transform: rotate(0deg);}
    10%{ transform: rotate(-1deg);}
    15%{ transform: rotate(1deg);}
    20%{ transform: rotate(0deg);}
    85%{ transform: rotate(0deg);}
    90%{ transform: rotate(0deg);}
    95%{ transform: rotate(0deg);}
    99%{ transform: rotate(0deg);}
    100%{ transform: rotate(0deg);}
}

/*--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; padding-top: 5%;}
.mainTitle2{ width: 100%; margin: 0 auto; padding-top: 5%;}
.mainTitle3{ width: 100%; margin: 0 auto 0 auto; position: relative;}
.insideTitle{ width: 90%; margin: 0 auto;}

/*常用(定位+圖片block)*/
.posiRelative{ position: relative;}
.posiAbsolute{ position: absolute;}
.imgBlock100 img{ display: block; width: 100%;}

/*PC+M同版*/
.areaWidthM{ position: relative; width: 94%; margin: 0 auto;}
.mainTitleM{ width: 100%;}
.wrapperHalf > li{ padding: 2%;}

/*--測驗-----------------------------------------*/
.gameList > li:first-child{ position: relative;}

.gameBox img{ display: block;}
.gameBox{ position: relative; margin-top: 10px;}

/*手機上+下工具列*/
.phoneTop{ top: 0;}
.phoneBottom{ bottom: 0;}
/*手機外框*/
.phoneBorder{ top: 0; pointer-events: none;}
/*手機視訊畫面*/
.phoneMain{ top: 8%; left: 0; right: 0; margin: 0 auto; width: 90%;}
/*手機按鈕*/
.listBox.phoneBtnList{ justify-content: space-between; position: absolute; bottom: 13%; left: 0; right: 0; width: 78%; margin: 0 auto;}
.phoneBtn{ animation: phoneBtn 1.5s infinite; cursor: pointer;}
@keyframes phoneBtn { 
    0%{ transform: scale(1);}
    50% { transform: scale(0.9);}
    100% { transform: scale(1);}
}
.phoneFinishCover ~ .listBox.phoneBtnList{ justify-content: center;}/*失敗-重新撥打*/

/*--血量--*/
.gameQA{ display: block;}
.gameQA > li:nth-child(1){ float: right; width: 45px; margin-left: 10px; margin-top: 15px;}/*血量寬度*/
.gameQA > li:nth-child(2){ float: left; width: calc(100% - 55px);}
.hpBox{ background-color: #fc62b3; border: #feff8d 3px solid; border-radius: 6px;}
.hpTitle{ background-color: #feff8d; font-size: 1.4rem; color: #fc62b3; font-weight: bold; text-align: center;}
.hpBox .listBox{ padding: 8% 4%;}

/*--問題--*/
.gameQA{ margin-top: -23%; position: relative; z-index: 1;}
.gameQues{ position: relative; margin-top: 15px; padding: 10px 17px; background-color: #ffffff; font-size: 1.8rem; border-radius: 6px; font-weight: bold;}
.gameQues::before{ content: ""; position: absolute; top: 15px; left: -10px; border-top: transparent 10px solid; border-bottom: transparent 10px solid; border-right: #ffffff 20px solid;}

/*--選項--*/
.getAnswer{ margin-top: 15px; background-color: rgba(255,255,255,0.25); border: #feff8d 3px solid; border-radius: 6px;}
.gameSelect{ position: relative; background-color: #feff8d; border-radius: 6px; border: #feff8d 4px solid; cursor: pointer;}

/*--選項解答--*/
.gameSelect .answerIcon{ position: absolute; bottom: -3px; right: -4px; font-size: 2.6rem;}
.gameSelect.correct{ border-color: #daff58; color: #daff58; background-color: #feff8d; cursor: default;}
.gameSelect.wrong{ border-color: #ff5252; color: #ff5252; background-color: #feff8d; cursor: default;}

/*結果按鈕*/
.gameEndBtn{ display: flex; gap: 10px; /*width: 80%;*/ margin: 15px auto 0 auto; font-size: 1.7rem; font-weight: 700; text-align: center;}
.gameEndBtn > li{ width: 100%; background-color: #feff8d; border: #feff8d 5px solid; border-radius: 8px; cursor: pointer;}

.phoneFinishCover{ display: flex; justify-content: center; align-items: center;position: absolute; top: 14%; left: 0; right: 0; width: 90%; height: 75%; margin: 0.5% auto 0 auto; 
 background-color: rgba(0, 0, 0, 0.7); font-size: 2.2rem; color: #fff; text-align: center;}

/*--結果區--*/
/*首次測驗獲得*/
.firstGet{ width: 100%; margin: 5% auto 0 auto; padding: 20px 0 0 0; text-align: center; font-size: 3rem; color: #ffffff; font-weight: bold; border-radius: 8px;}
.firstGet b{ color: #fffa75;}
.firstGet a{ font-size: 1.6rem; color: #a2feff; text-decoration: underline;}
.firstGet a:hover{ text-decoration: none;}

/*分享抽獎*/
.shareBox{ font-family: "Noto Sans TC", sans-serif; font-weight: 600; width: 88%; margin: 0 auto; padding-top: 10%;}
.shareBox img{ display: block; width: 100%;}
.shareTitle{ text-align: center;}
.shareTitle a{ display: inline-block; margin: 5px auto 0 auto; padding: 1px 10px 2px 10px; font-size: 1.5rem; color: #dcd4c0; background-color: #684b05; text-decoration: none; border-radius: 100px;}

/*分享鈕*/
.shareIconList{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; margin: 10px auto 0 auto;}
.shareIcon{ display: block; width: 20%; transition: 0.4s;}
.shareIcon:hover{ transform: scale(0.9);}

/*結果圖*/
.gameENDbox{ margin: 20px auto 0 auto;}
.gameENDbox img{ display: block; width: 100%;}
.resultPic{ width: 100%; margin: 0 auto;}

/*手機下載*/
.resultPicNote{ margin-top: 10px; font-size: 1.3rem; color: #bf9d5b; font-weight: bold; text-align: center;}

/*--活動說明-----------------------------------------*/
.noticeStyle1{ width: 80%; margin: 0 auto; padding: 30px 5% 20px 5%; background-color: rgba(196,41,123,0.7); border-radius: 15px;}
.noticeStyle1 .notice2{ margin: 0 auto; color: #ffffff;}
.noticeStyle1 .noticeTitle{ color: #ffffff;}
.noticeStyle1 .noticeSecTitle{ color: #ffffff; text-align: center;}
.noticeStyle1 .notice2 > li > ul > li{ list-style-type: disc;}
.noticeStyle1 .notice2 > li > ul > li a{ color: #feff8d;}

/*--推薦書-----------------------------------------*/
.bookBox{ width: 80%; margin: -20% auto 0 auto; padding: 25% 5% 5% 5%; background-color: rgba(89,182,157,0.7);}

/*--書展BN-----------------------------------------*/
.osusumeBn{ border: #ffffff 2px solid; background-color: rgba(255,255,255,0.25);}

/*--sweetAlert-----------------------------------------*/
/*預設按鈕文字大小*/.swal2-actions button {font-size: 1.4rem !important;}
.custom-html-container{ margin: 1em 0 0.3em;}
.custom-btn-close{ font-size: 4.5rem; margin-top: -5%; margin-right: -4%; box-shadow: none;}
.custom-btn-close:focus{ box-shadow: none;}
.custom-btn-styled { font-size: 1.4rem; cursor: pointer;}
/* .sweetBtn{ padding: 3px 10px; font-size: 1.5rem !important; font-weight: bold !important; cursor: pointer; font: 62.5% 微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif;} */

/*按鈕(關閉)*/
.custom-btn-styled,
.custom-btn-styled:active,
.custom-btn-styled:hover{ background-color: transparent !important; background-image: none !important;}
.custom-btn-styled:focus{ border: 0 !important; box-shadow: none;}
.custom-btn-styled{ box-shadow: none !important;}
.custom-btn-styled .sweetBtn{ margin: 0; display: inline-block; margin: 15px auto 0 auto; padding: 20px 20px 22px 20px; min-width: 200px; font-size: 2rem; color: #fff; line-height: 1;
font-weight: bold; /*font-style: italic;*/ text-decoration: none; font-family: 微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif; background-color: #000000; border-radius: 5px;
/* text-shadow: rgb(255, 255, 255) 0 0px 10px; border: #fff 1px solid; box-shadow: inset rgb(255, 255, 255) 0px 0px 28px, rgb(255, 255, 255) 0 0px 10px; cursor: pointer;*/} 
.custom-border{ border: #000 5px solid; border-radius: 20px;}

/*個人檔案*/
.listBoxFree.popIntroBox{ display: block;}
.popIntroBox > li{ text-align: left; font-weight: bold; box-sizing: border-box;}
.popIntroBox > li:nth-child(1){ width: 100%; padding: 0;}
.popIntroBox > li:nth-child(2){ width: 100%; margin-top: 15px; padding: 10%;}

/*頭圖*/
.popIntroPic, .popIntroPic{ overflow: hidden; border-radius: 20px;}
.popIntro1 .popIntroPic1{ box-shadow: rgba(215,14,151,0.25) 0 0 10px, rgba(215,14,151,0.25) 0 0 10px;}
.popIntro2 .popIntroPic2{ box-shadow: rgba(8,160,144,0.25) 0 0 10px, rgba(8,160,144,0.25) 0 0 10px;}

/*背景色*/
.popIntroBg{ border-radius: 20px;}
.popIntro1 .popIntroBg{ background-color: #fc62b3;}
.popIntro2 .popIntroBg{ background-color: #23a698;}

/*名字*/
.popIntroTitle{ font-size: 3rem;}
.popIntro1 .popIntroTitle{ color: #feff9e;}
.popIntro2 .popIntroTitle{ color: #c4ff5d;}

.popIntroCon{ margin-top: 15px; color: #ffffff; font-size: 2rem;}

/*--R18提醒彈窗--------------------------------------------------- */
.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:#b8292f;}
.popContent{ overflow-y:auto; max-height:70vh; -webkit-overflow-scrolling:touch;}


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

    /*背景圖-----------------------------------------*/
    .bg{ background-attachment: fixed; background-size: 100%; background-repeat: no-repeat;}

    /*--header-----------------------------------------*/
    /* .headerW{ border-width: 15px;} */

    /*--contain-----------------------------------------*/
    /*區塊寬度*/
    .areaWidth{ max-width: 1200px; padding-top: 0;}
    .areaWidth2{ max-width: 1300px;}
    .areaWidth3{ max-width: 900px;}

    /*主標寬度*/
    .mainTitle{ width: 56%; max-width: 500px;}
    .mainTitle2{ width: 60%; max-width: 780px; margin: 0 auto;}
    .mainTitle3{ width: 100%;}

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

    /*--測驗-----------------------------------------*/
    .gameList{ width: 60%; margin: 0 auto; position: relative;}
    .gameList > li:first-child{ position: initial;}

    /*--血量--*/
    .gameQA{ display: block;}
    .gameQA > li:nth-child(1){ float: inherit; width: 100%; margin-left: 0; margin-top: 0;}/*血量寬度*/
    .gameQA > li:nth-child(2){ float: inherit; width: 100%;}
    .hpTitle{ padding: 0 7px;  text-align: left;}
    .hpBox .listBox{ padding: 2% 7%;}

    /*--問題--*/
    .gameQA{ margin-top: 12px;}

    /*--選項解答--*/
    .getAnswer .gameSelect{ display: block; transition: 0.4s; cursor: pointer;}
    .getAnswer .gameSelect:hover{ border-color: #ffffff; background-color: #ffffff; transform: scale(0.9);}
    .getAnswer .gameSelect.correct:hover{ border-color: #daff58; color: #daff58; background-color: #feff8d; transform: scale(1); cursor: default;}
    .getAnswer .gameSelect.wrong:hover{ border-color: #ff5252; color: #ff5252; background-color: #feff8d; transform: scale(1); cursor: default;}
    .getAnswer .gameSelect.false:hover{ border-color: #feff8d; color: #feff8d; background-color: #feff8d; transform: scale(1); cursor: default;}

    /*結果按鈕*/
    .gameEndBtn{ max-width: 500px; gap: 20px;}

    /*--結果區--*/
    /*首次測驗獲得*/
    .firstGet{ width: 60%; padding-top: 0; font-size: 2.8rem;}
    .firstGet a{ font-size: 1.7rem;}

    /*分享抽獎*/
    .shareBox{ padding-top: 3%;}
    .shareTitle{ max-width: 500px; margin: 0 auto;}
    .shareTitle a{ margin-top: 0; padding: 1px 10px 4px 10px;}

     /*分享鈕*/
    .shareIconList{ max-width: 350px; margin-top: 5px;}

    /*結果圖*/
    .resultPic{ width: 60%; max-width: 500px;}

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

    /*--推薦書-----------------------------------------*/
    .bookBox{ width: 100%; margin-top: -10%; padding: 15% 5% 5% 5%; box-sizing: border-box;}

    /*--書展BN-----------------------------------------*/
    .osusumeBn{ width: 75%; margin: 10% auto 10% auto;}

    /*--sweetAlert-----------------------------------------*/
    .custom-btn-close{ font-size: 5.5rem; margin-top: -4%; margin-right: -2.5%;}

    /*--R18提醒彈窗--------------------------------------------------- */
	.popBox{ width:40%; margin:50px auto; padding:40px 20px 20px;}

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

    /*個人檔案*/
    .listBoxFree.popIntroBox{ display: flex;}
    .popIntroBox > li:nth-child(1){ width: 50%; padding: 10px;}
    .popIntroBox > li:nth-child(2){ width: 50%; margin: 10px; padding: 7%;}


    /*--hover animate--------------------------------*/
    .phoneBtn img{ display: block; transition: 0.2s;}
    .phoneBtn img:hover{ transform: scale(0.8);}
    .endBtn{ display: block; transition: 0.4s;}
    .endBtn:hover{ transform: scale(0.9);}
    .osusumeBn a{ display: block; transition: 0.2s;}
    .osusumeBn a:hover{ transform: scale(0.9);}
}

/*--768-1024(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1024px) { 
    /*背景圖-----------------------------------------*/
    .bg{ background-attachment: inherit;}

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

    /*--測驗-----------------------------------------*/
    .gameList{ width: 100%; max-width: 700px;}

    /*--血量--*/
    .gameQues{ margin-top: 3px;}
    /* .gameQA{ display: block;} */
    /*.gameQA > li:nth-child(1){ width: 100% !important;}*//*血量寬度*/

    /*R18提醒彈窗--------------------------------------------------- */
	.popBox{ width:60%;}
    

}

/*--1025-1200(特殊尺寸)------------------------*/
@media screen and (min-width:1025px) and (max-width:1200px) { 
}

/*--1200以下------------------------*/
@media screen and (min-width:767px)  and (max-width:1200px) { 
    /*--contain-----------------------------------------*/
    .wrapper { width: 65%; margin: 0 auto;}

    /*--header-----------------------------------------*/
    .headerPadWidth{ overflow: hidden;}
    .headerPadWidth .headerBox{ width: 166%; margin-left: -33%;}/*平板刊頭放大(讓左右背景超出可視範圍)*/
}

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

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

.phoneBg img{ aspect-ratio: 700/1336;}
.phoneMain img{ aspect-ratio: 630/1085;}
.phoneBtn img{ aspect-ratio: 155/190;}
.hpBox img{ aspect-ratio: 47/39;}
.gameSelect img{ aspect-ratio: 250/260;}

.shareTitle .mNo img{ aspect-ratio: 632/80;}
.shareTitle .pcNo img{ aspect-ratio: 370/125;}
.shareIconList img{ aspect-ratio: 1/1;}
.resultPic img{ aspect-ratio: 750/1165;}
.endBtn img{ aspect-ratio: 500/140;}

.bookBox img{ aspect-ratio: 439/518;}

.popIntroPic{ aspect-ratio: 472/648;}


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