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

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

/*背景圖-----------------------------------------*/
.bg{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260417_audio/images/bg.jpg); background-position: top center; background-size: 400%;}

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

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

/**/
body.wow-delay .headerBox .wow{
	visibility: hidden;
}

/*--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: 98%; margin: 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%;}

/*--活動說明-----------------------------------------*/
.noticeStyle1{ width: 80%; margin: 15px auto 0 auto; padding: 30px 5% 20px 5%; background-color: rgba(255,255,255,0.14); border: #848484 1px solid; border-radius: 15px;}
.noticeStyle1 .notice{ max-width: 1000px; margin: 0 auto; color: #ffffff;}
.noticeStyle1 .noticeTitle{ color: #ffffff; width: 100px; margin: 0 auto 15px auto;}
.noticeStyle1 .noticeSecTitle{ color: #ffffff;}
.noticeStyle1 .notice > li{ list-style-type: disc; margin: 10px 10px 11px 30px;}
.noticeStyle1 .notice > li a{ color: #d7ff5e;}

/*--sweetAlert-----------------------------------------*/
/*預設按鈕文字大小*/.swal2-actions button {font-size: 1.4rem !important;}

/*--優惠券區-----------------------------------------*/
/*標題*/
.couponTitle{ overflow: hidden; display: flex; align-items: center; justify-content: space-between;}
.couponTitle > li:first-child{ width: 90%; margin: 0 auto;}
.couponTitle > li:last-child{ display: none;}

/*優惠券(m)*/
.couponBoxM{ width: 90%; margin: 15px auto 0 auto; background-color: rgba(255,255,255,0.14); border: #848484 1px solid; border-radius: 15px;}
.couponBtnM{ position: absolute; width: 100%; top: 63%;}

/*--推薦書區(抓站上書封)-----------------------------------------*/
/*標題看更多*/
.titleMore{ width: 80%; margin-left: 2%;}
/*看更多*/
.moreBtn a{ display: block; width: 65%; margin: 15px auto 0 auto;}

/*--書封列表--*/
.recommBox{ width: 90%; margin: 0 auto;}
.recommBox > li{}
.recommColor1{ padding-top: 8%; background: linear-gradient(to bottom,  #efffbd 0%,#ffffff 100%); box-shadow: rgba(255,255,255,); border-radius: 15px;}
.recommColor2{ padding-top: 8%; background: linear-gradient(to bottom,  #d8c5ff 0%,#ffffff 100%); border-radius: 15px;}

/*書封尺寸*/
.bookCoverBg{ width: 60%; margin: 0 auto;}
/*書封定位+邊框+陰影*/
.bookCover a{ overflow: hidden; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto;
    border: #ffffff 4px solid; box-shadow: rgba(0,0,0,0.15) 0 0 10px;  border-radius: 15px;
}

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

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


/*書名*/
.bookName{ overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box;
    width: 60%; height: 4rem; margin: 25px auto 0 auto; font-size: 1.5rem; line-height: 1.3;
    text-align: center;  font-weight: 600; font-family: 'Noto Sans TC VF', 'Microsoft JhengHei','Century Gothic',Arial,sans-serif;
}

/*試聽去按鈕*/
.bookBtn{ position: absolute; width: 40%; left: 0; right: 0; bottom: 15%; margin: 0 auto;}

/*--R18提醒彈窗--------------------------------------------------- */
.popOverlay{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(47, 35, 49, 0.99); transition: opacity 500ms; z-index: 10000; font-size: 1.4rem;}
.popBox{ width: 93%; max-height: 90vh; padding: 40px 14px 14px; margin: 15px auto 0 auto; background: #d4cfbc; border-radius: 5px; position: relative; transition: all 1s ease-in-out; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.popBox h2{ padding: 8px 1%; margin-bottom: 5px; font-size: 1.6rem; background-color: #ad3c41; color: #ffffff; background-color: #efefef; color: #636363; font-weight: normal; text-align: center;}
.popBox ul{ list-style: none;}

/*popup按鈕樣式*/
.popBtnBox{ display: flex; gap: 15px;}
.ppBtn{ display: block; flex:1; padding: 0; line-height: 45px; border:#8d1a91 2px solid; background-color: #d4cfbc; color: #8d1a91; cursor: pointer;
 font-size: 1.8rem;  text-decoration: none; font-weight: bold; text-align: center; border-radius: 5px; font-family:Arial, Verdana, Microsoft JhengHei, sans-serif; outline:none;}
button.ppBtn{ -webkit-appearance: none; appearance: none;}
.ppBtn:hover{ background-color: #8d1a91; color: #fff;}

/*popup共用提醒*/
.popAlert{ text-align: center; margin-bottom: 40px; padding: 15px 2% 25px 2%; color: #8d1a91; font-size: 1.8rem; font-weight: bold;}
.ppaRed{ color: #b8292f;}
.popContent{ overflow-y: auto; max-height: 70vh; -webkit-overflow-scrolling: touch;}


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

    /*背景圖-----------------------------------------*/
    .bg{ background-attachment: fixed; background-size: cover;}

    /*--header-----------------------------------------*/
    /* .headerW{ border-width: 15px;} */


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

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

    /*--活動說明(書架)-----------------------------------------*/
    .noticeStyle1{ width: 90%; padding: 40px 5% 30px 5%; margin-top: 30px;}
    .noticeStyle1 .notice{ max-width: inherit;}
    .noticeStyle1 .noticeTitle{ width: 150px; margin: 0 0 15px 0;}

    /*--優惠券區-----------------------------------------*/
    /*標題*/
    .couponTitle > li:first-child{ width: 50%; margin: 0;}
    .couponTitle > li:last-child{ display: block; width: 10%;}
 
    /*優惠券(pc)*/
    .couponBox{ overflow: hidden; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; background-color: rgba(255,255,255,0.14); border: #848484 1px solid; border-radius: 5px;}
    .couponBox > li:first-child{ width: 60%;}
    .couponBox > li:last-child{ width: 25%;}

    /*--推薦書區(抓站上書封)-----------------------------------------*/
    /*標題看更多*/
    .titleMore{ width: 45%; margin-left: 3%;}

    /*看更多*/
    .moreBtn{ overflow: hidden;}
    .moreBtn a{ float: right; width: 15%; margin: 15px 3% 0 0;}

    /*--書封列表--*/
    .recommBox{ width: 96%;}

    /*--R18提醒彈窗--------------------------------------------------- */
	.popBox{ width:40%; margin:50px auto; padding:40px 20px 20px;}

    /*--hover animate--------------------------------*/
    .couponBox a, .couponBoxM a, .titleMore a, .moreBtn a{ display: block; transition: 0.4s;}
    .couponBox a:hover, .couponBoxM a:hover, .titleMore a:hover, .moreBtn a:hover{ transform: translateX(10px);}

}

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

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

    .wrapperHalf > li{ padding: 2%;}

    /*--優惠券區-----------------------------------------*/ 
    /*標題*/
    .couponTitle > li:first-child{ width: 70%;}

    /*優優惠券(pc)*/
    .couponBox > li:first-child{ width: 70%;}
    .couponBox > li:last-child{ width: 30%;}

    /*R18提醒彈窗--------------------------------------------------- */
    .popBox{ width:60%;}

}

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

}

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

.titleMore img{ aspect-ratio: 1860/204;}
.bookCoverBgPic{ aspect-ratio: 600/883;}
.moreBtn img{ aspect-ratio: 750/122;}


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