@charset "utf-8";

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

/*--特殊色：文字、連結、heighLight--*/
.heighLightPurple{ background-color: #6f64d1; padding: 0 5px;}
.heighLightRed{ display: inline-block; margin: 4px 0; background-color: #df3f24; padding: 0 5px;}
.txtPurple{ color: #6f64d1;}
.txtRed{ color: #df3f24;}
.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;}

/*【更新】背景底色+背景圖-----------------------------------------*/
.bgColor1{ background-color: #67afdf;}
.bgColor2{ background-color: #ffd77c;}
.bgColor3{ background-color: #ff866a;}
.bgColor4{ background-color: #69bc79;}
.bg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260305_member3fwp/images/bg2.png); background-position: center 12%; background-size: 130%;}
.bg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260305_member3fwp/images/bg3.png); background-position: center 12%; background-size: 130%;}
.bg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260305_member3fwp/images/bg4.png); background-position: center 12%; background-size: 130%;}

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

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

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

/*--優惠券領取-----------------------------------------*/
.couponBox{ padding: 20px; margin: 0 10px; border: #ffffff 5px solid;/*【更新】外框色*/ border-radius: 5px;}
/*優惠券動畫*/
.couponBox > li:last-child{ animation: couponBox 1.5s infinite;}
@keyframes couponBox { 
    0%{ transform: translateX(0) scale(1);}
    50%{ transform: translateX(15px) scale(0.98);}
    100% { transform: translateX(0) scale(1);}
}

/*書籍列表設定(5折書籍+暢銷推薦+本月主打星)--------------------------------------------------*/
/*5折書籍列表*/
.couponBookList{ padding-top: 15px;}
/*暢銷推薦+本月主打星列表*/
.bwBookList{ width: 80%; max-width: 400px; margin: 0 auto;}

/*書封尺寸+定位 (5折書籍)*/
.bookCover1 a{ overflow: hidden; width: 89%; height: 89%; position: absolute; top: 7.5%; left: 5%;}
/*書封尺寸+定位 (暢銷推薦)*/
.bookCover2 a{ overflow: hidden; width: 73.5%; height: 80%; position: absolute; top: 11%; left: 15%;}
/*書封尺寸+定位 (本月主打星)*/
.bookCover3 a{ overflow: hidden; width: 73.5%; height: 80%; position: absolute; top: 13%; left: 10%;}

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

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

/*書籍切角設定----------------*/
/*5折書籍：1~5, 11~15, 21~25 ... → 左下切角*/
.couponBookList > li:nth-child(10n + 1) > .posiRelative,
.couponBookList > li:nth-child(10n + 2) > .posiRelative,
.couponBookList > li:nth-child(10n + 3) > .posiRelative,
.couponBookList > li:nth-child(10n + 4) > .posiRelative,
.couponBookList > li:nth-child(10n + 5) > .posiRelative{
    clip-path: polygon(
        0 0, /*左上*/
        100% 0, /*右上*/
        100% 100%, /*右下*/
        55px 100%, /*左下(x往右推55px)*/
        0 calc(100% - 55px) /*左下(y往上推55px)*/
    ); 
}
/*5折書籍：6~10, 16~20, 26~30 ... → 右下切角*/
.couponBookList > li:nth-child(10n + 6) > .posiRelative,
.couponBookList > li:nth-child(10n + 7) > .posiRelative,
.couponBookList > li:nth-child(10n + 8) > .posiRelative,
.couponBookList > li:nth-child(10n + 9) > .posiRelative,
.couponBookList > li:nth-child(10n + 10) > .posiRelative{
    clip-path: polygon(
        0 0, /*左上*/
        100% 0, /*右上*/
        100% calc(100% - 55px), /*右下(y往上推55px)*/
        calc(100% - 55px) 100%, /*右下(x往左推55px)*/
        0 100% /*左下*/
    );
}
/*本月主打星：書籍左下切角*/
.bookCover3 img{ 
    clip-path: polygon(
    0 0, /*左上*/
    100% 0, /*右上*/
    100% 100%, /*右下*/
    50px 100%, /*左下(x往右推50px)*/
    0 calc(100% - 46px)); /*左下(y往上推46px)*/
}

/*看更多*/
.moreBtn{ max-width: 550px; margin: 15px auto 0 auto;}

/*--獨家活動-----------------------------------------*/
.eventList > li img{ border: #000000 7px solid; border-radius: 8px;}



/*--767up(Pc)------------------------*/
@media screen and (min-width:767px) {
    /*--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%;}

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

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

    /*主標寬度*/
    .mainTitle{ width: 56%; max-width: 500px;}
    .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%;}
    
    /*--優惠券領取-----------------------------------------*/
    .couponBox{ padding: 25px 50px; margin: 0 15px;}

    /*--暢銷推薦+本月主打星-----------------------------------------*/
    .bwBookList{ width: 100%; max-width: inherit; margin-top: 20px;}

    /*看更多*/
    .moreBtn{ margin-top: 40px;}

    /*--獨家活動-----------------------------------------*/
    .eventList{ margin-top: 20px;}

    /*--hover animate--------------------------------*/
    .moreBtn a{ display: block; transition: 0.4s;}
    .moreBtn a:hover{ transform: translateX(20px);}
}

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

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

}

/*--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%;}/*平板刊頭放大(讓左右背景超出可視範圍)*/
}

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

/*--圖片比例-----------------------------------------*/
/*優惠券領取*/
.couponBox img{ aspect-ratio: 725/200;}

/*第一集5折書籍*/
.couponBookList .bookBg img{ aspect-ratio: 285/425;}

/*暢銷推薦+個人作者書籍*/
.bwBookList .bookBg img{ aspect-ratio: 520/705;}

/*看更多按鈕*/
.moreBtn img{ aspect-ratio: 675/100;}

/*獨家活動bn*/
.eventList .mNo img{ aspect-ratio: 1200/628;} /*電腦版*/
.eventList .pcNo img{ aspect-ratio: 635/400;} /*手機版*/


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