@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;
}
body{ font-family: 'Noto Sans TC VF', 'Microsoft JhengHei', sans-serif; font-weight: 200;}

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

/*區塊上下間距-----------------------------------------*/
.bgPadT{ padding-top: 40px;}
.bgPadB{ padding-bottom: 40px}

/*背景圖-----------------------------------------*/
.bg0{ background-color: #9c51e9; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250815_star/images/bg_coupon.png); background-position: center; background-size: cover; background-repeat: no-repeat;}
.bg1{ background-color: #af8ec8; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250815_star/images/bg1.png); background-position: top center; background-size: 110%; background-repeat: no-repeat;}
.bg2{ background-color: #b59a3e; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250815_star/images/bg2.png); background-position: top center; background-size: 112%; background-repeat: no-repeat;}
.bg3{ background-color: #6fb4aa; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250815_star/images/bg3.png); background-position: top center; background-size: 110%; background-repeat: no-repeat;}

/*--背景光暈泡泡動畫--------------------------------*/
/* .bgAni01{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250815_star/images/bg_ani1.png); animation: animatedBackground1 130s linear infinite; opacity: 0.15;}
.bgAni02{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250815_star/images/bg_ani2.png); animation: animatedBackground2 160s linear infinite; opacity: 0.15;}
.bgAni01,.bgAni02{ width:100%; height: 1000px;  margin: 0px; position: fixed; top: 0; left: 0; right :0; z-index: 1; background-position: center top; background-repeat: repeat-x; pointer-events: none;}
@keyframes animatedBackground1{ from { background-position: -9999px 0;} to { background-position: 9999px 0;}}
@keyframes animatedBackground2{ from { background-position: 9999px 0;} to { background-position: -9999px 0;}} */

/*--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;}
.areaWidth1{ position: relative; width: 94%; margin: 0 auto;}
.areaWidth2{ position: relative; width: 94%; margin: 0 auto;}
.areaWidth3{ position: relative; width: 94%; margin: 0 auto;}
/*區塊向上推，讓標題橫跨2區*/
.areaUp{ margin-top: -70px;}

/*主標寬度*/
.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;}
.imgBlock100 img{ display: block; width: 100%;}

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

/*--推薦書外框+底色-----------------------------------------*/
.listBg1, .listBg2, .listBg3, .listBg4{ margin-bottom: 10px; border: #000000 1px solid;}
/*主打星*/
.listBg1{ background-color: #daff80;}
/*編輯推薦(角角編)*/
.listBg2{ background-color: #edebdf; position: relative;}
/*編輯推薦(川川編)*/
.listBg3{ background-color: #dfe7ed; position: relative;}
/*小星星推薦*/
.listBg4{ background-color: #a8d4ce;}

/*--推薦書遮角樣式-----------------------------------------*/
.recomList{ align-items: start; margin-top: 30px;}
.recomList > li{ position: relative;}
.decoCornerL{ position: absolute; top: 0; left: 0; width: 100px; z-index: 1;}/*左遮角*/
.decoCornerR{ position: absolute; bottom: 0; right: 0; width: 100px; z-index: 1;}/*右遮角*/

/*--推薦文+版標-----------------------------------------*/
/*推薦文*/
.recomTxt{ font-size: 2rem; color: #2c2c2c;}
/*版標*/
.recomCopyRight{ width: 100%; padding: 5px 40px 5px 10px; font-size: 1.2rem; background-color: #ffffff; border-top: #000000 1px solid; box-sizing: border-box;}

/*--當月主打星-----------------------------------------*/
/*折扣*/
.recomSale{ position: absolute; top: -3%; right: 10%; width: 53%; z-index: 1;}

/*--編輯推薦-----------------------------------------*/
/*--書封+推薦文--*/
.listBox.recomStyle2{ align-items: center;}
.listBox.recomStyle2 > li:nth-child(1){ width: 100%;}/*書封寬度*/
.listBox.recomStyle2 > li:nth-child(2){ width: 100%;}/*推薦文寬度*/

/*--小標樣式--*/
.sTitle1, .sTitle2{margin-bottom: 15px; padding: 5px 15px; border: #000000 1px solid; font-weight: 500; font-style: italic;}
/*小標底色(角角編)*/
.sTitle1{ background-color: #cdc3a2;}
/*小標底色(川川編)*/
.sTitle2{ background-color: #dfe7ed;}
/*小標星星裝飾*/
.titleDeco{ display: inline-block; width: 20px;}

/*--標籤(角角編/川川編)--*/
.recomTag{ position: absolute; top: -3%; right: 3%; width: 80%; max-width: 220px; z-index: 1;}


/*--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;}
    .bgPadB{ padding-bottom: 90px;}

    /*背景圖-----------------------------------------*/
    .bg1, .bg2, .bg3{ background-attachment: fixed; background-size: 100%;}

    /*--contain內容-----------------------------------------*/
    /*區塊寬度*/
    .areaWidth{ max-width: 1200px; padding-top: 0;}
    .areaWidth1{ max-width: 1500px;}
    .areaWidth2{ max-width: 1300px;}
    .areaWidth3{ max-width: 1000px;}
    /*區塊向上推，讓標題橫跨2區*/
    .areaUp{ margin-top: -110px;}

    /*主標寬度*/
    .mainTitle{ width: 56%; max-width: 500px;}
    .mainTitle2{ width: 65%; max-width: 590px;}
    .mainTitle3{ width: 100%;}

    /*--優惠券-----------------------------------------*/
    .couponBox{ width: 70%; margin: 0 auto;}

    /*--推薦文+版標-----------------------------------------*/
    /*推薦文*/
    .recomTxt{ font-size: 2.2rem;}

    /*--當月主打星-----------------------------------------*/
    /*折扣*/
    .recomSale{ position: inherit; width: 88%; margin: -30% auto 8px auto;} 

    /*--編輯推薦-----------------------------------------*/
    /*--書封+推薦文--*/
    .listBox.recomStyle2 > li:nth-child(1){ width: 25%;}/*書封寬度*/
    .listBox.recomStyle2 > li:nth-child(2){ width: 75%;}/*推薦文寬度*/

    /*--標籤(角角編/川川編)--*/
    .recomTag{ top: -5%; left: 27.5%; right: inherit; width: 25%;}

    /*--滑鼠滑入動畫--------------------------------*/
    .couponBox a{ display: block; transition: 0.4s;}
    .couponBox a:hover{ transform: rotate(6deg);}
}

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

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

    /*--優惠券-----------------------------------------*/
    .couponBox{ width: 80%;}

    /*--推薦文+版標-----------------------------------------*/
    /*推薦文*/
    .recomTxt{ font-size: 1.9rem;}

    /*--當月主打星-----------------------------------------*/
    /*折扣*/
    .recomSale{ position: absolute; top: 11%; right: 5%; width: 46%; z-index: 1;}

    /*--編輯推薦-----------------------------------------*/
    /*--書封+推薦文--*/
    .listBox.recomStyle2 > li:nth-child(1){ width: 24%;}/*書封寬度*/
    .listBox.recomStyle2 > li:nth-child(2){ width: 76%;}/*推薦文寬度*/
}

/*--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) { 
}

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


/*主標*/
.mainTitle2 img{ aspect-ratio: 825/185;}
/*優惠券*/
.couponBox img{ aspect-ratio: 810/440;}
/*書封*/
.recomList a img{ aspect-ratio: 750/1045;}
/*折扣*/
.recomSale img{ aspect-ratio: 500/330;}
/*星星裝飾*/
.recomDeco{ aspect-ratio: 600/120;}
/*標籤(角角川川編)*/
.recomTag img{ aspect-ratio: 500/95;}


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