@charset "utf-8";
/*思源黑體*/
@font-face {
    font-family: 'Noto Sans TC VF';
    src: url('../fonts/NotoSansTC-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

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

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

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

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

/*--特殊色：文字、連結、heighLight--*/
.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: #ae1939;}
.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;}

.bgPadT4{ padding-top: 10px;}
.bgPadB4{ padding-bottom: 10px;}

.bgPadTm{ padding-top: 12px;}
.bgPadBm{ padding-bottom: 12px;}

.bgPadTm2{ padding-top: 15px;}
.bgPadBm2{ padding-bottom: 15px;}

.bgBrown{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251224_report/images/bg_brown.jpg); background-size: 300%; background-position: top center;}
.bgYellowGreen{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251224_report/images/bg_yellogreen.jpg); background-size: 300%; background-position: top center;}
.bgBlue{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251224_report/images/bg_blue.jpg); background-size: 300%; background-position: top center;}
.bgGreen{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251224_report/images/bg_green.jpg); background-size: 300%; background-position: top center;}
.bgYellow{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251224_report/images/bg_yellow.jpg); background-size: 300%; background-position: top center;}
.bgRed{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251224_report/images/bg_red.jpg); background-size: 300%; background-position: top center;}
.bgDeco1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251224_report/images/bg_sign.png); background-size: contain; background-position: top center; background-repeat: no-repeat;}
.bgColumn1{  background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251224_report/images/bg_column1.png); background-size: cover; background-position: top center;}
.bgColumn2{  background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251224_report/images/bg_column2.png); background-size: cover; background-position: top center;}
.bgColumn3{  background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251224_report/images/bg_column3.png); background-size: cover; background-position: top center;}
.bgColumn4{  background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251224_report/images/bg_column4.png); background-size: cover; background-position: top center;}

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


/*刊頭動畫(人物)*/
.headerPeople img{ animation: headerPeople 15s infinite;}
@keyframes headerPeople { 
    0%{ transform: scale(1) translateX(0) translateY(0);}
    50%{ transform: scale(1) translateX(-20px) translateY(30px);}
    100% { transform: scale(1) translateX(0) translateY(0);}
}
.headerPeopleM img{ animation: headerPeopleM 15s infinite;}
@keyframes headerPeopleM { 
    0%{ transform: scale(1) translateY(0);}
    50%{ transform: scale(1.05) translateY(30px);}
    100% { transform: scale(1) translateY(0);}
}

/*--contain-----------------------------------------*/
.contain{ overflow: hidden;}
.areaWidth{ position: relative; width: 94%; margin: 0 auto;}
.areaWidth2{ position: relative; width: 86%; margin: 0 auto;}
.areaWidth3{ position: relative; width: 94%; margin: 0 auto;}

.mainTitle{ width: 100%; margin: 0 auto 8px auto;}
.mainTitle2{ width: 100%; margin: 15px auto 15px auto;}
.mainTitle3{ width: 100%; margin: 0 auto 0 auto; position: relative;}
.mainTitle4{ width: 92%; margin: 0 auto 8px auto; position: relative;}

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

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

.conTop{ height: 25px; background-color: #754610;}
/*--報告共用-----------------------------------------*/
.reportBox{ width: 100%; margin: 0 auto;}
.reportBox img{ display: block; width: 100%;}

.dataRibbon{ display: block; position: relative; z-index: 1;}
.dataBox{ overflow: hidden; /*border: #000 4px solid; border-radius: 10px;*/}
.dataBoxCon{ background-color: #ebe1d8; border: #fdae2d 5px solid;}
.dataCon{ position: relative;}

/*上方裝飾*/
.dataBorderDeco{ max-width: auto; width: 150%; margin-left: -25%;}
/*三角裝飾*/
.trianDeco1{ position: absolute; top: 0; left: 0; width: 30%;}
.trianDeco2{ position: absolute; top: 0; right: 0; width: 30%;}

.dataRibbon.btn{ position: relative; width: 90%; max-width: 700px; margin: 10px auto 0 auto; padding-bottom: 15px; cursor: pointer;}
.dataRibbon.btn .dataHand{ display: block; position: absolute; width: 16%; animation: dataHand 2s infinite;}
.loginBtn .dataHand{ top: 52%; right: 4%;}
.reportShareBtn .dataHand{ top: 52%; right: 4%;}

@keyframes dataHand { 
    50% { transform: scale(1.2);}
    100% { transform: scale(1);}
}

/*大主標*/
.bookMainTitle{ width: 116%; margin-left: -11%;}
.bookMainTitle2{ width: 96%; margin: 0 auto; padding-top: 7%;}
.bookMainTitle img, .bookMainTitle2 img, .bookMainTitle3 img{ width: 100%;}
.bookMainTitle3{ width: 95%; margin: 0 auto;}

/*--未登入-----------------------------------------*/
/* .loginBox{ position: relative; width: 96%; margin: 0 auto;} */
/* .loginBtn{ position: absolute; top: 45%; left: 0; width: 100%;} */
/* .loginBox img{ display: block; width: 100%;} */
.dataWelcome{ padding-top: 20px;}

/*--登入後-----------------------------------------*/
.reportTitle{ text-align: center; width: 90%; margin: 20px 0;}
.reportTitle.center{ margin: 20px auto; text-align: center; font-size: 1.7rem; font-family: 'Noto Sans TC VF', arial; font-weight: 800;}
.reportList{ width: 90%; margin: 0 auto; /*background-color: #000;*/}
/* .reportList > li{ padding: 10px; overflow: hidden;}
.reportList > li:first-child{ margin-bottom: 10px;}
.reportList > li:last-child{ background-color: #ff8bb9; border-radius: 20px;} */
.reportList > li:last-child{ margin-top: 15px;}
.reportList img{ width: 100%;}

/*結果數據*/
.reportCon{ font-size: 1.7rem; color: #000; font-weight: bold; font-family: 'Noto Sans TC VF', arial; font-weight: 700;}
.reportCon > li{ padding: 8px 15px; margin-bottom: 10px; background-color: #fff;}
.reportCon > li:last-child{ margin-bottom: 0;}
.reportNotice{ margin-top: 10px; font-size: 1.5rem; color: #777878; font-weight: bold;}

.ans{ font-size: 2.1rem; color: #de264e;}
.amazing{ display: block; padding-top: 8px; color: #ee4059;}
.reportSmall{ font-size: 1.6rem;}
.ansNotice{ font-size: 1.3rem; font-weight: 400; color: #666666;}
.conSell + .ansNotice{ margin-top: 10px; text-align: center; color: #09501c; font-weight: 600;}

/*結果圖*/
.resultWidth{ position: relative; width: 100%; margin: 0 auto;}
.resultWidth img{ display: block;}

.resultPicBox{ position: relative; overflow: hidden; display: flex; justify-content: center; background-color: #000; border-radius: 17px;}
.reportList .levelPic{ width: 196%; max-width: 196%; position: absolute;}
.reportDeco{ float: right; display: block; width: 30%; margin-top: 10px;}

/*推薦作品*/
.recomTitle{ margin: 20px auto 10px auto; text-align: center; font-size: 2.2rem; font-family: 'Noto Sans TC VF', arial; font-weight: 800; line-height: 1.3;}
.recomBookList{ width: 70%; margin: 0 auto; padding-bottom: 15px;}

/*--活動說明-----------------------------------------*/
.noticeStyle1{ margin: 15px auto 0 auto; padding: 30px 5% 20px 5%; background-color: #d9c1a0; border: #000000 6px solid; border-radius: 15px;}
.noticeStyle1 .notice2{ max-width: 1000px; margin: 0 auto; color: #000000;}
.noticeStyle1 .noticeTitle{ color: #000000;}
.noticeStyle1 .noticeSecTitle{ color: #000000;}
.noticeStyle1 .notice2 > li > ul > li{ list-style-type: disc;}
.noticeStyle1 .notice2 > li > ul > li a{ color: #035db0;}

/*--上架數-----------------------------------------*/
.upTitle{ width: 90%; margin: 15px auto;}
.bookNumList{ position: absolute; top: 4%; left: 0; right: 0; margin: 0 auto; width: 88%;}

/*--最佳貢獻-----------------------------------------*/
.conSell{ max-width: 650px; margin: 0 auto;}

/*--銷售成長-----------------------------------------*/
.sellUpList{}
.sellUpList a, .topBook a{ position: relative; z-index: 1;}

/*--個人作者+聲音作品-----------------------------------------*/
.topTitle{ max-width: 500px; margin: 10px auto;}
.topBook + .topTitle{ margin-top: 60px;}

/*--年度話題-----------------------------------------*/
/* .postBorder{ border: #5dbeca 4px solid; border-radius: 15px;} */
.postBorder + .postBorder { margin-top: 20px;}
.postBg{ border: #fcbb60 4px solid; background-color: rgba(255,255,255,0.2); border-radius: 10px;}
.postTitle{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251224_report/images/post_title_bg.jpg); }
.postTitle img{ width: 60%; margin: 0 auto;}
.postBtn{ display: block; width: 70%; max-width: 250px; margin: 15px auto 15px auto;}

/*--社群話題-----------------------------------------*/
.bingoNoitce{ margin-top: 6px; margin-bottom: 6px; font-size: 1.5rem; font-weight: bold; text-align: center;}
.bingoSocial{ width: 70%; max-width: 245px; margin: 0 auto;}

/*--sweetAlert-----------------------------------------*/
.swal2-html-container{ margin: 1em 0 0.3em;}
.swal2-close{ font-size: 4.5rem; margin-top: -5%; margin-right: -4%; box-shadow: none;}
.swal2-close:focus{ box-shadow: none;}
.swal2-styled.swal2-confirm,.swal2-styled.swal2-cancel { 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;}

/*標題+說明*/
.shareTtitle{ font-weight: bold; font-size: 1.8rem; line-height: 1.3;}
.impor{ color: #d97831; font-size: 2.2rem;}

/*獲得贈品*/
.getGift{ font-size: 1.8rem; color: #666; font-weight: bold; text-align: center; line-height: 1.6;}
.getGift h3{ font-size: 2.4rem; color: #ff00a5; margin-bottom: 10px;}
.getGift a{ font-size: 1.6rem; color: #518eff; text-decoration: none;}
.getGift a:hover{ text-decoration: underline;}

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

/*分享社群*/
.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;}

/*優惠券圖*/
.couponPic{ border: #000000 3px solid; margin-top: 10px;}

/*--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, .bgPadT2{ padding-top: 60px;}
    .bgPadB{ padding-bottom: 90px;}
    .bgPadB2{ padding-bottom: 90px;}
    .bgPadB3{ padding-bottom: 40px;}
    .bgPadT4{ padding-top: 30px;}
    .bgPadB4{ padding-bottom: 30px;}

    .bgBrown, .bgYellowGreen, .bgBlue, .bgGreen, .bgYellow, .bgRed{ background-size: cover;}
    .bgColumn1, .bgColumn2, .bgColumn3, .bgColumn4{ background-attachment: fixed;}

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


    /*--contain-----------------------------------------*/
    /* .contain{ position: relative; z-index: 1; margin-top: -27%;} */
    .areaWidth{ max-width: 1023px; padding-top: 0;}
    .areaWidth2{ max-width: 750px;}
    .areaWidth3{ max-width: 1000px;}

    .mainTitle{ width: 56%; max-width: 500px;}
    .mainTitle3{ width: 93%;}
    /* .mainTitle2{ width: 75%; max-width: 1000px;} */
    .mainTitle4{ width: 80%; margin: 0 auto 40px auto;}

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

    /*--報告共用-----------------------------------------*/
    .dataRibbon.btn{ margin-top: 25px; padding-bottom: 40px;}
    .dataBorderDeco{ max-width: auto; width: 100%; margin-left: 0;}

    .dataRibbon.btn .dataHand{ width: 12%;}
    .loginBtn .dataHand{ top: 25%; right: 4%;}
    .reportShareBtn .dataHand{ top: 25%; right: 10%;}

    /*--未登入-----------------------------------------*/
    /* .loginBox{ margin-top: -8%;} */
    /* .loginBtn{ top: 50%; left: 0; right: 0; margin: 0 auto; width: 60%;} */
    .dataWelcome{ width: 80%; margin: 0 auto; padding-top: 40px;}

    /*--登入後-----------------------------------------*/
    .reportTitle{ width: 73%; margin-top: 15px;}
    .reportTitle.center{ margin: 40px auto 0 auto; font-size: 2.2rem; font-weight: 800;}
    .reportList{ display: flex; width: auto; padding: 30px 12% 0 12%; justify-content: space-between;}
    .reportList > li{ width: 51%;}
    .reportList > li:last-child{ width: 47%; margin-top: 0; /*margin-right: 25px;*/}

    /*結果數據*/
    .reportCon{ font-size: 2rem; line-height: 1.45;}
    .reportCon > li{ padding: 15px 20px;}
    .reportNotice{ font-size: 1.8rem;}

    .yellow{ font-size: 3rem;}

    /*結果圖*/
    .resultPicBox{ margin: 10px 0;}

    /*推薦作品*/
    .recomTitle{ width: 70%; font-size: 2.7rem;}
    .recomBookList{ width: 85%; padding-bottom: 30px;}

    /*--活動說明(書架)-----------------------------------------*/
    .noticeStyle1{ /*width: 78%;*/ margin-top: 20px; padding: 30px 5% 50px 5%;}

    /*--上架數-----------------------------------------*/
    .upTitle{ width: 70%; margin: 0 auto 15px auto;}

    .bookUpList{ display: flex; justify-content: space-between; padding-top: 15px;}
    .bookUpList > li:nth-child(1){ width: 42%;}
    .bookUpList > li:nth-child(2){ width: 54%;}

    .bookNumTitle{ width: 80%;}
    .bookNumList{ top: 7%; width: 80%;}

    /*--銷售成長-----------------------------------------*/
    .sellUpList{ padding-top: 20px;}

    /*--年度話題-----------------------------------------*/
    .postBorder{ padding: 15px; border: #5dbeca 4px solid; border-radius: 15px;}
    .postBg ul{ padding: 5px 15px 20px 15px;}
    .postTitle img{ max-width: 200px; padding: 5px 0;}

    /*--社群話題-----------------------------------------*/
    .bingoNoitce{ margin-bottom: 15px;}
    .bingoSocial{ max-width: 500px; margin: 15px auto 25px auto;}

    /*--sweetAlert-----------------------------------------*/
    .shareBox{ width: 320px;}

    /*獲得贈品*/
    .getGift { font-size: 2rem;}

    /*--hover animate--------------------------------*/
    .loginBtn, .reportShareBtn{ display: block; transition: 0.4s;}
    .loginBtn:hover, .reportShareBtn:hover{ transform: scale(0.9);}
}

/*--768-1024(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1024px) { 
    /* .bg1, .bg2, .bg3, .bg4, .bg5, .bg6, .bg7, .bg8{ background-attachment: inherit;} */
    .bgColumn1, .bgColumn2, .bgColumn3, .bgColumn4{ background-image: none;}

    .wrapperHalf > li{ padding: 2%;}
    .mainTitle3{ width: 90%;}

    /*--登入後-----------------------------------------*/
    /*結果數據*/
    .reportCon{ font-size: 1.7rem;}
    .reportNotice{ font-size: 1.4rem;}
    .yellow{ font-size: 2.2rem;}
}
/*--768-1024(Pad)------------------------*/
@media screen and (min-width:1024px) and (max-width:1250px) { 

    /*--contain-----------------------------------------*/
    .areaWidth, .areaWidth3{ max-width: 800px;}
}

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

.dataRibbon .mNo img{ aspect-ratio: 928/150;}
.dataRibbon .pcNo img{ aspect-ratio: 860/253;}
.resultPic img{ aspect-ratio: 1200/1864;}
.recomTitle .mNo img{ aspect-ratio: 927/94;}
.recomTitle .pcNo img{ aspect-ratio: 550/155;}
.recomBookList img{ aspect-ratio: 368/611;}

.upTitle .mNo img{ aspect-ratio: 1980/333;}
.upTitle .pcNo img{ aspect-ratio: 750/350;}

.sellUpList img{ aspect-ratio: 792/771;}

.topBook img{ aspect-ratio: 750/1063;}
.topBook.voice img{ aspect-ratio: 750/850;}

.postBtn img{ aspect-ratio: 700/150;}

.bingoSocial img{ aspect-ratio: 1/1;}
.bingoPic img{ aspect-ratio: 1/1;}

img.dataHand{ aspect-ratio: 130/139;}

.sharePic img{ aspect-ratio: 1200/1864;}
.couponPic img{ aspect-ratio: 750/193;}



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