@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--*/
.txtPurple{ color: #c925bc;}
.txtGreen{ color: #04ac00;}
.txtRed{ color: #df3f24;}
.txtBrown{ color: #885d00;}
.txtBlue{ color: #2487e0;}
.txtYellow{ color: #f7fc30;}

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

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

/*背景圖-----------------------------------------*/
.bgColor0{ background-color: #954163;}
.bgColor1{ background-color: #944b56;}
.bgColor2{ background-color: #b75c6a;}
.bgColor3{ background-color: #d6973c;}
.bgColor3_2{ background-color: #048ebc; padding-top: 1px;}
.bgColor3_3{ background-color: #229988; padding-top: 1px;}
.bgColor4{ background-color: #9c7a48;}
.bgColor5{ background-color: #d8c6b3;}
.bgDeco1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_bltype/images/bg_deco1.png); background-position: top center; background-size: 114%; background-repeat: no-repeat;}
.bgDeco2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_bltype/images/bg_deco2.png); background-position: top center; background-size: 114%; background-repeat: no-repeat;}

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

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

.headerAni2{ animation: headerAni2 4s infinite;}
@keyframes headerAni2 { 
    0%{ transform: translateX(0) translateY(0) rotate(0);}
    50%{ transform: translateX(-4px) translateY(5px) rotate(-2deg);}
    100% { transform: translateX(0) translateY(0) rotate(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: 92%; margin: 0 auto 8px auto;}
.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;}
.imgBlock100 img{ display: block; width: 100%;}

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

/*--領優惠券-----------------------------------------*/
.couponBox{ max-width: 550px; margin: 15px auto 0 auto;}
/*說明*/
.notice{  max-width: 570px; margin: 20px auto 0 auto; color: #ffffff; font-size: 1.6rem;}

/*--合作專區-----------------------------------------*/
.introTxt{ width: 88%; margin: 15px auto 0 auto; background-color: rgba(148,75,86,0.7);
 font-family: 'Noto Sans TC VF'; font-weight: 100; font-size: 1.8rem; color: #ffffff; line-height: 1.7;}

/*--影片-----------------------------------------*/
.ytVideoBox{ padding: 2%;}/*外框*/
.ytVideoBox.style1{ border: #841022 1px solid; background-color: #a87279;}
.ytVideoBox.style2{ border: #243558 1px solid; background-color: #787688;}
.ytVideoBox.style3{ border: #1e585c 1px solid; background-color: #818686;}

.ytVideoBox.style1 .video{ border: #841022 1px solid;}
.ytVideoBox.style2 .video{ border: #243558 1px solid;}
.ytVideoBox.style3 .video{ border: #1e585c 1px solid;}
.video { width: 100%; margin: 0 auto; position: relative;}

.aVideoBox { width: 100%; margin: 0 auto;}
.aVideo { width: 100%; height: 0; padding: 0 0 56.25% 0; position: relative;}
.aVideo iframe { width: 100%; height: 100%; position: absolute; left: 0; top: 0;}

.videoTime{ width: 90%; margin: 0 auto;}
.videoTitle{ width: 85%; margin: -9% auto 25px auto; position: relative; z-index: 1; pointer-events: none;}

/*--新片搶先看-----------------------------------------*/
.newBoxM > li{ margin-bottom: 40px;}
.newBoxM > li:last-child{ margin-bottom: 0;}

/*免費領書架*/
.freeGift{ width: 70%; margin: 15px 0 0 0; animation: freeGift 1.5s infinite;}
@keyframes freeGift { 
    0%{ transform: scale(1);}
    50%{ transform: scale(0.9);}
    100% { transform: scale(1);}
}

/*--影視改編推薦-----------------------------------------*/
/*書名*/
.bookTitle{ width: 92%; margin: 0 auto; padding-top: 20px;}
.bookBox{}

/*海報*/
.bookPoster{ margin-top: 10px;}

/*介紹*/
.bookIntroBox{ padding: 20px 0;}
.bookIntroBox.style1{ background-color: #b57f31;}
.bookIntroBox.style2{ background-color: #048ebc;}
.bookIntroBox.style3{ background-color: #229988;}
.bookIntro{ width: 90%; margin: 0 auto; font-size: 1.8rem; color: #ffffff;}

/*書封*/
.bookCover{ width: 90%; margin: 0 auto; padding-top: 20px;}

/*馬上試閱*/
.bookRead{ width: 200px; margin: 15px 0 0 5%; font-size: 2rem;}
.bookRead a{ display: block; padding: 10px 20px; text-decoration: none;}
.bookRead.style1{ color: #ffffff; background-color: #4e5e37;}
.bookRead.style2{ color: #0d6495; background-color: #ffffff;}
.bookRead.style3{ color: #000000; background-color: #f891a2;}

/*--活動說明-----------------------------------------*/
.noticeBox{ padding-top: 20px;}
.noticeStyle1{ margin: 0 auto 20px auto; padding: 30px 5% 20px 5%; background-color: #9c7a48; /*border: #896a46 8px solid;*/ border-radius: 15px;}
.noticeStyle1 .notice2{ max-width: 1000px; margin: 0 auto; color: #ffffff;}
.noticeStyle1 .noticeTitle{ color: #fffa70;}
.noticeStyle1 .noticeSecTitle{ color: #fffa70;}
.noticeStyle1 .notice2 > li > ul > li{ list-style-type: disc;}
.noticeStyle1 .notice2 > li > ul > li a{ color: #b7ff6a;}

/*--活動BN-----------------------------------------*/
.cooperTxt{ margin-top: 10px; font-family: 'Noto Sans TC VF'; font-weight: 100; font-size: 3rem; color: #ffffff; line-height: 1.3; font-style: italic; text-align: center;}
.cooperTxt span{ color: #fdff6b;}
.cooperBn{ padding: 10px; margin-top: 10px; border: #dcc29e 1px solid;}

/*--推薦書-----------------------------------------*/
.listBox.recomBox > li{ padding: 0; border: #888888 1px solid;}
.recomMore{ position: absolute; bottom: 0; right: 0; width: 65%;}


/*--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%;} */
    .bgColor3, .bgColor3_2, .bgColor3_3{ background-color: #d6973c;}
    .bgDeco1, .bgDeco2{ background-attachment: fixed; background-size: 100%;}

    .border1, .border2, .border3{ border-width: 15px;}
    .border2{ padding: 25px;}
    .border3{ padding: 25px;}

    /*--header-----------------------------------------*/
    /* .headerW{ border-width: 15px;} */
    /*刊頭動畫*/
    .headerAni1{ animation: headerAni1 4s infinite;}
    @keyframes headerAni1 { 
        0%{ transform: translateX(0) translateY(0);}
        50%{ transform: translateX(15px) translateY(10px);}
        100% { transform: translateX(0) translateY(0);}
    }

    .headerAni2{ animation: headerAni2 4s infinite;}
    @keyframes headerAni2 { 
        0%{ transform: translateX(0) translateY(0) rotate(0);}
        50%{ transform: translateX(-15px) translateY(20px) rotate(-3deg);}
        100% { transform: translateX(0) translateY(0) rotate(0);}
    }

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

    /*主標寬度*/
    .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%;}

    /*--領優惠券-----------------------------------------*/
    /*說明*/
    .notice{  margin: 30px auto 0 auto; font-size: 1.5rem;}

    /*--合作專區-----------------------------------------*/
    .introTxt{ max-width: 700px; font-size: 2.2rem;}

    /*--影片-----------------------------------------*/
    .ytVideoBox{ width: calc(100% - 10px);/*影片寬度*/ border-width: 8px;}
    .videoList{ width: 50%; margin: 0 auto;}

    /*--新片搶先看-----------------------------------------*/
    .newBox{ overflow: hidden; margin-top: 20px;}
    .newBox > li:nth-child(1){ width: 80%; margin: 0 auto;}
    .newBox > li:nth-child(2){ float: left; width: 48%; margin-right: 2%; margin-top: 12%;}
    .newBox > li:nth-child(3){ float: left; width: 48%; margin-left: 2%;}
    
    .newBox > li:nth-child(1) .headerBox{ float: left; width: 58%; box-sizing: border-box;}
    .newBox > li:nth-child(1) .ytVideoBox{ float: left; width: 40%; margin-left: 2%; margin-top: 5%; box-sizing: border-box;}

    .newBox > li:nth-child(2) .ytVideoBox,
    .newBox > li:nth-child(3) .ytVideoBox{  width: 67%; padding: 3.3%; margin-top: -10%;}

    /*免費領書架*/
    .freeGift{ float: left; width: 20%; margin: 15px 0 0 2%;}
    .newBox > li:nth-child(2) .freeGift,
    .newBox > li:nth-child(3) .freeGift{  width: 34%; margin-left: 0;}

    /*--影視改編推薦-----------------------------------------*/
    .bookOverflow{ overflow: hidden; max-width: 1580px; margin: -140px auto 0 auto;}
    /*書名*/
    .bookTitle{ width: 100%; position: relative; z-index: 1; margin-top: 30px;}
    .bgColor3 .bookTitle{ padding-top: 180px;}

    /**/
    .bookBox > li{ float: left; box-sizing: border-box;}
    .bookBox > li:first-child{ width: 56%;}
    .bookBox > li:last-child{ width: 38%; margin: 3%;}

    /*介紹*/
    .bookIntroBox{ padding: 90px 1% 30px 1%; transform: translateY(-140px);}

    /*影片*/
    .bookBox .ytVideoBox{ float: right; width: 60%; margin-top: 20px; padding: 2%; background-color: #000000;}
    .ytVideoBox.style4{ box-shadow: #845f2a -20px 20px 0;}
    .ytVideoBox.style5{ box-shadow: #005d7c -20px 20px 0;}
    .ytVideoBox.style6{ box-shadow: #1b6a5f -20px 20px 0;}
    .ytVideoBox.style4 .video{ border: #846c4a 1px solid;}
    .ytVideoBox.style5 .video{ border: #048ebc 1px solid;}
    .ytVideoBox.style6 .video{ border: #239484 1px solid;}

    /*--活動說明-----------------------------------------*/
    .noticeBox{ margin-top: -140px; padding-top: 0;}
    .noticeStyle1{ width: 78%; padding: 30px 5% 50px 5%;}
    .noticeStyle1 .noticeTitle{ text-align: left; max-width: 1000px;}

    /*--活動BN-----------------------------------------*/
    .cooperTxt{ margin-top: 30px; }
    .cooperBn{ padding: 25px; margin-top: 20px;}

    /*--推薦書-----------------------------------------*/
    .listBox.recomBox{ padding-bottom: 40px;}
    .listBox.recomBox > li{ border-right: 0;}

    /*--hover animate--------------------------------*/
    .couponBox a, .listBox li .recomMore a, .newBookPoster a, .bookPoster a, .bookCover a, .bookRead a, .cooperBn a, .freeGift a{ display: block; transition: 0.4s;}
    .listBox li .recomMore a:hover{ transform: translateY(10px);}
    .newBookPoster a:hover{ transform: scale(0.9) translateX(10px);}
    .couponBox a:hover, .bookPoster a:hover, .bookCover a:hover, .cooperBn a:hover{ transform: scale(0.9);}
    .bookRead a:hover, .freeGift a:hover{ transform: translateX(10px);}
}

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

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

    .wrapperHalf > li{ padding: 2%;}

}

/*--1520以下------------------------*/
@media screen and (max-width:1520px) { 
    .pcINBLmNO{ display: none;}
}
/*--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%;}/*平板刊頭放大(讓左右背景超出可視範圍)*/

    /*--影視改編推薦-----------------------------------------*/
    /*影片*/
    .bookBox .ytVideoBox{ width: 70%;}
    /*介紹*/
    .bookIntroBox{ padding-top: 80px; transform: translateY(-100px);}

    /*--活動說明-----------------------------------------*/
    .noticeBox{ margin-top: -100px;}
}

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

}

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

.mNo .newBox .headerH img{ aspect-ratio: 795/690;}
.pcNo .newBoxM .headerH img{ aspect-ratio: 625/780;}

.bookTitle .mNo img{ aspect-ratio: 1980/310;}
.bgColor3_3 .bookTitle .mNo img{ aspect-ratio: 1980/385;}
.bgColor3 .bookTitle .pcNo img{ aspect-ratio: 1140/540;}
.bgColor3_2 .bookTitle .pcNo img{ aspect-ratio: 1140/290;}
.bgColor3_3 .bookTitle .pcNo img{ aspect-ratio: 1140/830;}
.bookPoster img{ aspect-ratio: 1175/661;}
.bookCover img{ aspect-ratio: 605/751;}

.cooperBn .pcNo img{ aspect-ratio: 635/400;}
.cooperBn .mNo img{ aspect-ratio: 1200/628;}

.headerBox .headerH img{ aspect-ratio: 495/634;}
.recomMore img{ aspect-ratio: 318/130;}


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