@charset "utf-8";
/*思源黑體*/
/* @font-face {
    font-family: 'Noto Sans TC VF';
    src: url('https://taiwan-image.bookwalker.com.tw/fonts/NotoSansTC-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    font-family: 'Noto Sans TC VF', 'Microsoft JhengHei','Century Gothic',Arial,sans-serif;
} */

/* a:hover{ opacity:0.9;} *//*滑鼠滑入半透明*/
/*--loading載入中--------------------------------*/
/*遮罩樣式*/
.overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /*半透明背景*/ display: flex; justify-content: center; align-items: center; z-index: 9999;/*確保遮罩層在最上層*/}

/*spinner樣式+旋轉動畫*/
.spinner{ border: 8px solid rgba(0, 0, 0, 0.1); border-left: 8px solid #fff; border-radius: 50%; width: 50px; height: 50px; margin: 0 auto; animation: spin 1s linear infinite;}
@keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);}}

/*loading文字*/
.loadingTxt{ margin-top: 10px; font-size: 2rem; color: #fff; font-weight: bold;}

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

/*--特殊色：文字、連結、heighLight--*/
.heighLightPurple{ background-color: #6f64d1; padding: 0 5px;}
.heighLightGreen{ display: inline-block; margin: 4px 0; background-color: #a7e0a6; padding: 0 5px;}
.heighLightRed{ display: inline-block; margin: 4px 0; background-color: #e7cdc9; padding: 0 5px;}
.txtPurple{ color: #c925bc;}
.txtGreen{ color: #04ac00;}
.txtRed{ color: #df3f24;}
.txtBrown{ color: #885d00;}
.txtBlue{ color: #2487e0;}
.txtYellow{ color: #f7fc30;}
.txtYellowGreen{ color: #d6ff72;}
.alink{ color: #0076df; text-decoration: none;}
.alink:hover{ text-decoration: underline;}

.txtSpring{ color: #e66dbb;}
.txtSummer{ color: #2ea6e4;}
.txtWinter{ color: #d2d34b;}
.txtAutumn{ color: #f58d30;}

/*區塊上下間距-----------------------------------------*/
.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;}

/*背景圖-----------------------------------------*/
.bg0{ background-color: #e3adff; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261016_josei/images/bg0.png); background-position: top center; background-size: 176%;}
.bg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261016_josei/images/bg1.png); background-position: top center; background-size: 200%;}
.bg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261016_josei/images/bg2.png); background-position: top center; background-size: 200%;}
.bg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261016_josei/images/bg3.png); background-position: top center; background-size: 200%;}
.bg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261016_josei/images/bg4.png); background-position: top center; background-size: 200%;}
.bgDeco1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261016_josei/images/bg_p1.png); background-position: top center; background-size: 100%; border-top: #000000 3px solid;}
.bgDeco2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261016_josei/images/bg_p2.png); background-position: top center; background-size: 100%; border-top: #000000 3px solid;}
.bgDeco3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261016_josei/images/bg_p3.png); background-position: top center; background-size: 100%; border-top: #000000 3px solid;}
.bgDeco4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20261016_josei/images/bg_p4.png); background-position: top center; background-size: 100%; border-top: #000000 3px solid;}

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

/*刊頭錨點*/
.headerGift1, .headerGift2{ position: absolute; width: 48%;}
.headerGift1{ bottom: 0.6%; left: 1.5%;}
.headerGift2{ bottom: 0.6%; right: 1.5%;}

.pEventNone{ pointer-events: none;}

/*刊頭動畫*/
/* .headerDrop1{ animation: headerDrop1 1.5s infinite;}
@keyframes headerDrop1 { 
    0%{ transform: translateX(0) translateY(0);}
    50%{ transform: translateX(-10px) translateY(-5px);}
    100% { transform: translateX(0) translateY(0);}
}

.headerDrop2{ animation: headerDrop2 1.5s infinite;}
@keyframes headerDrop2 { 
    0%{ transform: translateX(0) translateY(0);}
    50%{ transform: translateX(10px) translateY(-5px);}
    100% { transform: translateX(0) translateY(0);}
} */

/*--contain-----------------------------------------*/
.contain{ overflow: hidden;}
/*區塊寬度*/
.areaWidth{ position: relative; width: 94%; margin: 0 auto;}
.areaWidth2{ position: relative; width: 94%; margin: 0 auto;}
.areaWidth3{ position: relative; width: 96%; margin: 0 auto;}

/*主標寬度*/
.mainTitle{ width: 100%; margin: 0 0 8px 0;}
.mainTitle2{ width: 100%; margin: 0 auto;}
.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%;}
/*圖片滿版定位*/
.picFull{ position: absolute; top: 0; left: 0; width: 100%;}

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

/*--活動說明(style1)-----------------------------------------*/
.noticeStyle1{ margin: 0 auto; padding: 30px 5% 20px 5%; background-color: #b8a288; border: #896a46 8px solid; border-radius: 15px;}
.noticeStyle1 .notice2{ max-width: 1000px; margin: 0 auto; color: #000000;}
.noticeStyle1 .noticeTitle{ color: #563a1a;}
.noticeStyle1 .noticeSecTitle{ color: #000000;}
.noticeStyle1 .notice2 > li > ul > li{ list-style-type: disc;}
.noticeStyle1 .notice2 > li > ul > li a{ color: #8e1e45;}

/*--活動說明(style2)-----------------------------------------*/
.noticeStyle2{ margin: 15px auto 0 auto; padding: 30px 5% 20px 5%; background-color: rgba(255,255,255,0.6); border: #000000 3px solid; border-radius: 15px;}
.noticeStyle2 .notice{ max-width: 1000px; margin: 0 auto; color: #000000;}
.noticeStyle2 .noticeTitle{ color: #000000;}
.noticeStyle2 .noticeSecTitle{ color: #000000;}
.noticeStyle2 .notice > li{ list-style-type: decimal; margin: 10px 10px 10px 35px;}
.noticeStyle2 .notice > li a{ color: #1d81e2;}

/*--活動說明(點擊才展開)-----------------------------------------*/
.slideNotice{ overflow: hidden; width: 96%; margin: 15px auto 0 auto; background-color: #534a72; border: #000000 8px solid; border-radius: 15px;}
.slideNotice .noticeTitle{ margin-bottom: 0; margin-top: 0; padding-bottom: 10px; font-size: 1.8rem; background-color: #000000; color: #ffffff;}

/*內容*/
.noticeCon{ margin: 0 auto; padding: 20px 0 20px 30px;}
.noticeCon .notice2{ margin: 0 auto; color: #ffffff;}

/*項目小標*/
.noticeCon .noticeSecTitle{ color: #ffffff; font-size: 1.8rem;}

/*第二層項目符號*/
/* .noticeCon .notice2 > li > ul > li{ list-style-type: disc;} */

/*連結顏色*/
.noticeCon .notice2 a{ color: #82fff5;}

/*ibon點擊才展開*/
.slideNotice .noticeCon{ display: none;}
.noticeSlideIcon{ display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 5px; font-size: 1.8rem; color: #000000; vertical-align: bottom; background-color: #ffffff; border-radius: 3px; cursor: pointer;}
.noticeSlideIcon .bwi-delete{ font-size: 1.6rem;}

/*--抓站上書封-----------------------------------------*/
/*書封外框(不需要就移除)*/
.webBookBorder1{ padding: 5px; border: #000000 3px solid; background-color: #a56733;}
.webBookBorder2{ padding: 5px; border: #000000 3px solid; background-color: #989ea6;}
/*書封比例*/
.webBookCover{ overflow: hidden; position: relative; width: 100%; aspect-ratio: 600/883;/*書封比例*/ background-color: rgba(255,255,255,0.3); border: #000000 1px solid;/*書封外框筆畫*/ box-sizing: border-box; border-radius: 6px;}
/*書封邊框+陰影*/
.webBookCover a{ overflow: hidden; box-sizing: border-box; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; border-radius: 3px;}

/*img填滿外框設定*/
.webBookCover img{ width: 100%; height: 100%; 
    object-fit: cover; /*圖片等比例，並填滿外框的寬與高（因此若圖片比例差太多時，可能會有圖片被裁到的狀況）*/
    transform: scale(1.0001);/*用transform觸發瀏覽器重新渲染圖片*/ 
    backface-visibility: hidden;/*避免渲染時的邊緣/閃爍副作用*/
}

/*img縮入外框內(圖片比例差太多，裁到重要部分時補白底)*/
.webBookCover.contain img{
    object-fit: contain; /*圖片等比例縮入外框內（會用白底來補）*/
}
.webBookCover.contain a{
    background-color: #ffffff;/*補的白底可以改顏色*/
}

/*--領優惠券-----------------------------------------*/
.couponBox{ width: 90%; margin: 0 auto;}
.couponBox > li:last-child{ margin-top: 10px;}

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

/*開始測驗鈕*/
.gameStartBtn{ position: absolute; top: 70%; left: 0; right: 0; margin: 0 auto; width: 68%; animation: scaleInOut 1s infinite;}
@keyframes scaleInOut{ 0% { transform: scale(1);} 50% { transform: scale(0.9);} 100% { transform: scale(1);} }
/*點擊反饋*/
.gameStartBtn img{ filter: 0.1s ease; -webkit-tap-highlight-color: transparent; /* 移除手機預設點擊藍色區塊 */}
.gameStartBtn img:active { transform: scale(0.95); filter: brightness(0.85);}

/*--訪談-----------------------------------------*/
/*頁籤*/
.interviewTabBox{}
.interviewTabBox > li{ transition: transform 0.1s ease, filter 0.1s ease;-webkit-tap-highlight-color: transparent; /* 移除手機預設點擊藍色區塊 */}
.interviewTabBox > li:active { transform: scale(0.95); filter: brightness(0.85);}
.interviewTabBox > li p{ padding: 10px 5px; background-color: #000000; font-size: 1.6rem; color: #ffffff; text-align: center; line-height: 1; border-radius: 3px; cursor: pointer;}
.interviewTabBox > li span{ color: #f9fd5e;}

/* .interviewTabBox{ text-align: center;}
.interviewTabBox button{ margin: 0 4px; padding: 10px 12px; background-color: #000000; border: 0; font-size: 1.6rem; color: #ffffff; font-weight: bold; text-align: center; line-height: 1; border-radius: 3px; cursor: pointer;}
.interviewTabBox button span{ color: #f9fd5e;} */

/*點頁籤後,捲軸回到內容上方*/
.interviwSwiper{ scroll-margin-top: 70px;}

/*訪談內容*/
.interviewBox{ display: flex;}
.interviewBox > li:first-child{ flex: 1; padding-top: 15px;}
.interviewBox > li:last-child{ flex: 5;}

/*對話框*/
.interviewBox > li p { 
    position: relative; z-index: 1; box-sizing: border-box;
	width: 85%; min-height: 160px; margin: 15px 0 20px 5%; padding: 4% 13% 4% 5%;
	background-color: #ffffff; border: 2px solid #000; border-radius: 12px;
    font-size: 1.8rem; line-height: 1.5;
}
.interviewBox > li p::before {
	content: ""; position: absolute; z-index: -1; top: 30px; left: -8px;
	width: 12px; height: 12px; background: #fff; border-left: 2px solid #000; border-bottom: 2px solid #000;
	transform: rotate(45deg);
}
/*對象照片*/
.interviewP{ display: block; position: absolute; top: -4%; right: -12%; width: 25%;}

/*--配對-----------------------------------------*/
.chooseBox{ width: 80%; margin-top: 15px; margin-bottom: 10px; justify-content: center;}
.chooseBox > li:nth-child(2){ display: flex; align-items: center; width: 126%;}
.selectBtnBox{ justify-content: center;}
.selectBtnBox > li:nth-child(2){ display: flex; align-items: center; width: 600%;}

/*配對按鈕*/
.gameBtn{ border: #000000 2px solid; border-radius: 8px; cursor: pointer; 
 transition: transform 0.1s ease, filter 0.1s ease;-webkit-tap-highlight-color: transparent; /* 移除手機預設點擊藍色區塊 */}
.gameBtn:active { transform: scale(0.95); filter: brightness(0.85);}

.gameBtn.style1{ background-color: #ff93f6;}
.gameBtn.style2{ background-color: #000000;}
.gameBtn.style3{ background-color: #d6ff72;}

/*選項*/
.selectBtn{ overflow: hidden; background-color: #b7b7b7; border: #000000 2px solid; border-radius: 5px; cursor: pointer;
 transition: transform 0.1s ease, filter 0.1s ease;-webkit-tap-highlight-color: transparent; /* 移除手機預設點擊藍色區塊 */}
/*點擊反饋*/
.selectBtn:active { transform: scale(0.95); filter: brightness(0.85);}

.selectBtn.disable{ border-color: #858585;}
.selectBtn.disable img{ filter: grayscale(100%); opacity: 0.3;}
.selectBtn.disable:active{ transform: scale(1); filter: brightness(1);}

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

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

.gameEndBook{ width: 100%; margin: 10px auto 0 auto;}
/*結果按鈕*/
.gameEndBtn{ width: 100%; margin: 10px auto;}
.gameEndBtn > li{ cursor: pointer; transition: transform 0.1s ease, filter 0.1s ease;-webkit-tap-highlight-color: transparent; /* 移除手機預設點擊藍色區塊 */}
.gameEndBtn > li:active { transform: scale(0.95); filter: brightness(0.85);}

/*結果圖*/
.resultWidth{ position: relative; width: 100%; margin: 0 auto; /*border: #fff 4px solid; border-radius: 10px;*/}
.resultWidth img{ display: block;}

.resultPicBox{ position: relative; overflow: hidden; display: flex; justify-content: center; margin-top: 10px; border: #000000 3px solid; /*background-color: #000; border: #000 8px solid; border-radius: 10px;*/}
.resultPicNote{ margin-top: 5px; font-size: 1.5rem; color: #000000; text-align: center;}
/* .levelPic{ width: 196%; max-width: 196%; position: absolute;} */

/*結果圖推薦書*/
.resutlBook{ position: absolute; width: 30.1%;}
.resutlBook.posi1{ top: 32.8%; left: 3.3%;}
.resutlBook.posi2{ top: 32.8%; left: 35.3%;}
.resutlBook.posi3{ top: 32.8%; left: 67.2%;;}
.resutlBook.posi4{ top: 61.4%; left: 3.3%;}
.resutlBook.posi5{ top: 61.4%; left: 35.3%;}
.resutlBook.posi6{ top: 61.4%; left: 67.2%;}

.resutlBook{ animation: resutlBook 1.5s infinite;}
@keyframes resutlBook { 
    0%{ transform: scale(1);}
    50%{ transform: scale(1.04);}
    100% { transform: scale(1);}
}

/*分享外框*/
.shareBorder{ padding: 20px 10px; background-color: rgba(189,240,64,0.4); border: #000000 3px solid; border-radius: 8px;}

/*社群分享*/
.shareBox{ font-family: "Noto Sans TC", sans-serif; font-weight: 600; width: 100%; margin: 0 auto;}
.shareBox img{ display: block; width: 100%;}

/* .shareTo{ display: block; width: 80%; margin: 0 auto;} */
/* .shareTitle{ font-size: 1.8rem; color: #000;}
.shareTitle b{ font-size: 2.2rem; color: #df3f24;} */

/**/
.shareIconBox{ overflow: hidden;}
.shareIconBox > li{ position: relative;}
.shareIconBox > li a{ float: left;}
.shareIconBox > li a img{ display: block; width: 88%; margin: 0 auto;}

.shareIconBox > li:first-child{ float: left; width: 57%;}
.shareIconBox > li:first-child a{ width: 33.3%;}

.shareIconBox > li:last-child{ float: right; width: 37%;}
.shareIconBox > li:last-child a{ width: 50%;}
.shareIconBox > li:last-child::before{ content: ""; position: absolute; top: calc(50% - 12px); left: -11px; width: 2px; height: 24px; background-color: #000000; border-radius: 100px;}

/*分享標題*/
.shareTitle{ width: 100%; margin: 10px auto 0 auto;}

/*分享文案*/
.shareNote{ margin-top: 10px; font-size: 1.5rem; line-height: 1.3; text-align: center;}

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

/*--書展優惠書籍-----------------------------------------*/
.saleBookBox{ width: 90%; margin-left: 2%;}
/*主標說明文字*/
.mainTitleNotice{ font-size: 1.4rem; text-align: center; font-weight: bold;}
.saleBookBox .picFull{ pointer-events: none;}

/*--推薦書-----------------------------------------*/
.bookBorderBox1{ margin-top: 15px; padding: 5px; background-color: rgba(186,170,355,0.5); border: #000000 1px solid; border-radius: 10px;}

/*看更多按鈕*/
.btnMoreList{ margin-top: 15px;}

/*--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-border{ border: #000 5px solid; border-radius: 20px;}

/*按鈕(關閉)*/
.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: 135px; 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;*/} 

/*關閉視窗*/
.sweetBtn.green{ margin: 0; padding: 0; background-color: #d6ff72; border: #000000 3px solid;}
.sweetBtn.green img{ display: block; width: 150px; margin: 0 auto;}

/*標題*/
.popTitle{ max-width: 400px; margin: 0 auto; color: #ffffff;}
.popTitleTxt{ padding: 0 5px; background-color: #6547ff; font-size: 1.8rem; line-height: 1.5; font-weight: bold;}

/*好感提示*/
.popTips{ max-width: 400px; margin: 0 auto;}

/*配對正解*/
.popFinishBorder{ max-width: 400px; padding-bottom: 15px; margin: 0 auto; /*margin: 15px auto 0 auto;*/ background-color: rgba(255,254,146); border: #000000 2px solid; border-radius: 20px;}
.popFinishTitle{ display: inline-block; margin-bottom: 15px; padding: 6px 35px; line-height: 1; font-size: 1.6rem; color: #ffffff; font-weight: bold; background-color: #000000; border-radius: 0 0 15px 15px;}

.popFinishBorder .chooseBox{ width: 80%;}
.popFinishBorder .chooseBox > li:nth-child(2){ width: auto;}

/*--你的配對(備註)--*/
.popNotice{ margin-top: 8px; font-size: 1.7rem; color: #ff20a4; font-weight: bold;}
/*按鈕並排樣式*/
/* .custom-btn-styled .sweetBtn.btnStyle1{ min-width: 135px; margin: 0 auto;} */

/*--動畫-----------------------------------------*/
.aniScale{ animation: aniScale 1.5s infinite;}
@keyframes aniScale { 
    0%{ transform: scale(1);}
    50%{ transform: scale(0.95);}
    100% { transform: scale(1);}
}

.aniScale2{ animation: aniScale2 4s infinite;}
@keyframes aniScale2 { 
    0%{ transform: scale(0.5);}
    50%{ transform: scale(1.2);}
    100% { transform: scale(0.5);}
}

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

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

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

    .bgPadB{ padding-bottom: 90px;}

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

    /*背景圖-----------------------------------------*/
    .bg1, .bg2, .bg3, .bg4{ /*background-attachment: fixed;*/ background-size: 100%;}
    .bg0{ background-attachment: fixed; background-size: 100%;}
    .bgDeco1, .bgDeco2, .bgDeco3,.bgDeco4{ background-attachment: fixed;}

    /*--header-----------------------------------------*/
    /* .headerW{ border-width: 15px;} */
    /*刊頭錨點*/
    .headerGift1, .headerGift2{ width: 21%;}
    .headerGift1{ bottom: 35.6%; left: 13.5%;}
    .headerGift2{ bottom: 8.6%; right: 70.5%;}

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

    /*主標寬度*/
    .mainTitle{ width: 56%; max-width: 380px;}
    .mainTitle2{ width: 65%; max-width: 590px; 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%;}

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

    /*--活動說明(style2)-----------------------------------------*/
    .noticeStyle2{ width: 88%; padding: 30px 5% 50px 5%; border-radius: 25px;}

    /*--活動說明(點擊才展開)-----------------------------------------*/
    .slideNotice{ width: 100%; box-sizing: border-box;}
    .noticeCon{ padding: 26px 5% 26px 7%;}

    /*--領優惠券-----------------------------------------*/
    .couponBox{ max-width: 600px;}
    .couponBox > li:last-child{ margin-top: 20px;}

    /*--測驗-----------------------------------------*/
    .gameBox{ max-width: 750px; padding: 10px; margin-top: 20px; /*border-width: 12px;*/}
    .gameConWidth{ padding: 50px 15%;}
    
    .gameStartBtn{ top: 68%; width: 39%;}

    /*--訪談-----------------------------------------*/
    /*頁籤*/
    .interviewTabBox{ width: 78%; margin: 0 auto;}
    .interviewTabBox > li p{ padding: 8px 5px; font-size: 1.7rem;}

    /* .interviewTabBox button{ margin: 0 4px; padding: 8px 40px;;} */

    /*訪談內容*/
    .interviewBox{ display: flex; width: 88%; margin: 0 auto;}
    .interviewBox > li:first-child{ flex: 1; padding-top: 25px;}
    .interviewBox > li:last-child{ flex: 5;}

    /*對話框*/
    .interviewBox > li p { 
        min-height: inherit; margin: 25px 0 20px 5%; padding: 4% 10% 4% 5%; border: 3px solid #000;
    }
    .interviewBox > li p::before {
        left: -9px; border-left: 3px solid #000; border-bottom: 3px solid #000;
    }
    /*對象照片*/
    .interviewP{ display: block; position: absolute; top: -8%; right: -10%; width: 20%;}

    /*--配對-----------------------------------------*/
    .chooseBox{ width: 63%; margin: 15px auto 10px auto;}
    .chooseBox > li:nth-child(2){ width: auto;}

    .selectBtnBox{ margin-top: 20px;}
    .selectBtnBox > li:nth-child(2){ width: auto;}
    .selectBtnBox > li:nth-child(2) > ul{ padding: 0 5px;}

    /*配對按鈕*/
    .gameBtn{ transition: 0.4s;}
    .gameBtn:hover{ transform: scale(0.95);}

    /*選項*/
    .selectBtn:hover{border-color: #2d4bff;}
    .selectBtn.disable:hover{ border-color: #858585;}
    .selectBtn.disable{ cursor: not-allowed;}

     /*--結果區-----------------------------------------*/
    .resultTitle{ font-size: 2.5rem;}
    .coupon2{ width: 55%; margin: 8px auto 0 auto;}

    /*結果按鈕*/
    .gameEndBtn{ width: 100%;}
    .gameEndBtn > li:last-child{ display: block;}

    /*結果圖*/
    .resultPicBox{ margin-top: 20px;}

    /*分享外框*/
    .shareBorder{ padding: 30px 10px;}

    /*社群分享*/
    /**/
    .shareIconBox{ width: 70%; margin: 0 auto;}

    /*社群按鈕*/
    .shareIcon{ display: block; /*width: 18%;*/ transition: 0.4s;}
    a.shareIcon:hover{ transform: scale(0.9);}

    /*分享標題*/
    .shareTitle{ width: 80%; margin: 15px auto 0 auto;}

    /*分享文案*/
    .shareNote{ margin-top: 15px; font-size: 1.3rem;}

    /*--書展優惠書籍-----------------------------------------*/
    .saleBookBox{ width: 98%; max-width: 1020px; margin: 25px auto 0 auto;}

    /*主標對齊*/
    .mainTitleWidth1{ max-width: 900px; margin-left: 4.5%;}
    .mainTitleWidth2{ margin-left: -1.5%;}

    /*主標說明文字*/
    .mainTitleNotice{ margin-left: 1.6%; text-align: left;}

    /*--推薦書-----------------------------------------*/
    .bookBorderBox{ margin-top: 20px; padding: 20px; border: #000000 1px solid; border-radius: 20px;}
    .bookBorderBox.style1{ background-color: rgba(186,170,355,0.5);}
    .bookBorderBox.style2{ background-color: rgba(218,255,191,0.5);}

    /*看更多按鈕*/
    .btnMoreList{ margin-top: 15px;}
    .btnMoreList > li{ max-width: 400px;}

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

    /*--你的配對(備註)--*/
    .popNotice{ font-size: 1.6rem;}

    /*--hover animate--------------------------------*/
    .resutlBook a, .couponBox a, .gameStartBtn img, .gameEndBtn > li, .headerGift1 a, .headerGift2 a, .btnMoreList a{ display: block; transition: 0.4s;}
    .resutlBook a:hover, .couponBox a:hover{ transform: rotate(3deg);}
    .gameStartBtn img:hover, .btnMoreList a:hover{ transform: rotate(-6deg);}
    .gameEndBtn > li:hover, .headerGift1 a:hover, .headerGift2 a:hover{ transform: scale(0.9);}
    /* .recommMore a, .bookCover a, .bookMore a, .moreNormalBn a{ display: block; transition: 0.4s;}
    .recommMore a:hover{ transform: rotate(-6deg);} */
}

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

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

    .wrapperHalf > li{ padding: 2%;}

    

}

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

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

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

}

/*--550-767(Pad)------------------------*/
@media screen and (min-width:550px) and (max-width:767px) { 
    .shareBorder{ padding: 30px 50px;}
}

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

.interviewBox > li:first-child img{ aspect-ratio: 500/1686;}
.interviewP img{ aspect-ratio: 500/690;}
.chooseBox > li:nth-child(1) img, .chooseBox > li:nth-child(3) img{ aspect-ratio: 500/690;}
.chooseBox > li:nth-child(2) img{ aspect-ratio: 670/688;}

.selectBtn img{ aspect-ratio: 500/233;}
.gameBtn img{ aspect-ratio: 405/135;}

.coupon2 img{ aspect-ratio: 750/200;}

.gameEndBtn img{ aspect-ratio: 400/262;}

.shareIconBox img{ aspect-ratio: 1/1;}
.shareTitle img{ aspect-ratio: 750/79;}

.saleBookBox img{ aspect-ratio: 452/695;}

.btnMoreList img{ aspect-ratio: 750/220;}


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