@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;
    /* font-family: 'Noto Sans TC VF', 'Microsoft JhengHei','Century Gothic',Arial,sans-serif; */
}

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

/*背景圖設定-----------------------------------------*/
.bg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260723_exhibition/images/bg1.png); background-position: top center; background-size: 200%;}
.bg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260723_exhibition/images/bg2.png); background-position: top center; background-size: 200%;}
.bg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260723_exhibition/images/bg3.png); background-position: top center; background-size: 200%;}
.bg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260723_exhibition/images/bg4.png); background-position: top center; background-size: 200%;}
.bg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260723_exhibition/images/bg5.png); background-position: top center; background-size: 200%;}
.bg6{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260723_exhibition/images/bg6.png); background-position: top center; background-size: 200%;}
.bg7{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260723_exhibition/images/bg7.png); background-position: top center; background-size: 200%;}

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

/*--內容區-----------------------------------------*/
.contain{ overflow: hidden;}
/*區塊寬度*/
.areaWidth{ position: relative; width: 94%; margin: 0 auto;}
.areaWidth2{ position: relative; width: 94%; margin: 0 auto;}
.areaWidth3{ overflow: hidden; 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; 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%;}

/*--活動說明(style1)-----------------------------------------*/
/* .noticeStyle1{ margin: 0 auto; padding: 30px 5% 20px 5%; background-color: #b8a288; border: #896a46 8px solid; border-radius: 15px;}
.noticeStyle1 .notice2{ max-width: 1000px; margin: 0 auto; color: #000000;}
.noticeStyle1 .noticeTitle{ color: #563a1a;}
.noticeStyle1 .noticeSecTitle{ color: #000000;}
.noticeStyle1 .notice2 > li > ul > li{ list-style-type: disc;}
.noticeStyle1 .notice2 > li > ul > li a{ color: #8e1e45;} */

/*--活動說明(style2)-----------------------------------------*/
.noticeStyle2{ margin: 15px auto 0 auto; padding: 30px 5% 20px 5%; background-color: rgba(255,255,255,0.9); border: #000000 8px solid; border-radius: 15px;}
.noticeStyle2 .notice{ max-width: 1000px; margin: 0 auto; color: #000000;}
.noticeStyle2 .noticeTitle{ color: #000000;}
.noticeStyle2 .noticeSecTitle{ color: #000000;}
.noticeStyle2 .notice > li{ list-style-type: disc;}
.noticeStyle2 .notice > li a{ color: #0076ff;}

/*--區塊注意事項-----------------------------------------*/
.noticeBox{ padding: 15px 10px 0 10px; text-align: center; font-size: 1.5rem; font-weight: bold;
    /*文字外光暈*/
    text-shadow: 
    -1px -1px 5px #ffffff, -1px -1px 5px #ffffff, -1px -1px 5px #ffffff,
    1px 1px 5px #ffffff, 1px 1px 5px #ffffff, 1px 1px 5px #ffffff
}

/*--贈品區(優惠券、書架、其他贈品)-----------------------------------------*/
.giftBox1{ margin: 15px auto 0 auto;}
.giftBox2{ margin: 15px auto 0 auto;}

/*--重點書籍(書名+簡介)-----------------------------------------*/
.bookDetail{ margin-top: 15px; padding: 4%; border: #000000 5px solid; background-color: #ffffff; border-radius: 20px; font-family: 'Noto Sans TC VF','Century Gothic',Arial,sans-serif;}
.bookDetail > li{ position: relative;}
/*書名*/
.bookDetailBook{ margin-top: 10px; font-weight: 900; font-size: 2.2rem; line-height: 1.3;}
/*書介*/
.bookDetailIntro{ margin-top: 10px; font-weight: 600; font-size: 1.8rem; color: #7a7a7a;}

/*--書籍列表樣式-----------------------------------------*/
.bookList{ padding-top: 15px;}
.bookBorder{ position: relative; border: #000000 3px solid; background-color: #f4f4f4; border-radius: 8px;}

/*裝飾與書封[左右排列]*/
.bookR{ overflow: hidden; padding: 4% 4% 4% 0;}
.bookL{ overflow: hidden; padding: 4% 0 4% 4%;}
.bookR .webBookCover, .bookL .webBookCover{ float: left; width: 82%;/*書封寬度*/}
.bookR .bookDeco, .bookL .bookDeco{ float: left; width: 18%;/*裝飾寬度*/}

/*裝飾與書封[上下排列]或[無裝飾]*/
.bookTB{ overflow: hidden; padding: 4%;}

/*書封壓標籤貼紙*/
.bookTag{ position: absolute; bottom: 3%; right: 3%; display: inline-block; padding: 3px 10px; border: #000000 3px solid; background-color: #fff843; 
 font-family: 'Noto Sans TC VF','Century Gothic',Arial,sans-serif; font-weight: 900; font-size: 1.8rem; transform: rotate(-6deg); border-radius: 3px; pointer-events: none;}

/*--抓站上書封-----------------------------------------*/
/*書封比例*/
.webBookCover{ overflow: hidden; position: relative; width: 100%; aspect-ratio: 600/883;/*書封比例*/ border: #b1b1b1 1px solid;/*書封外框筆畫*/ box-sizing: border-box; border-radius: 6px;}
/*書封邊框+陰影*/
.webBookCover a{ overflow: hidden; box-sizing: border-box; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; border-radius: 3px;}

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

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

/*看更多按鈕*/
.btnMoreList{ margin-top: 15px;}

/*--其他活動BN-----------------------------------------*/
.eventList{ width: 90%; margin: 15px auto 0 auto;}
.eventBorder{ padding: 3%; border: #000000 3px solid; background-color: #ffffff; border-radius: 10px;}
.eventBorder img{ border: #d4d4d4 1px solid; border-radius: 8px;}
.eventTxtBox{ padding: 10px 10px 0 5px; font-family: 'Noto Sans TC VF','Century Gothic',Arial,sans-serif; font-weight: 900; font-size: 2rem; line-height: 1.3;}
.eventTxt1{ min-height: 26px; color: #7b7b7b;}
.eventTxt2{ min-height: 26px;}

/*--優惠券列表-----------------------------------------*/
.couponList{ max-width: 300px; margin: 15px auto 0 auto; padding: 15px 20px; border: #000000 3px solid; background-color: rgba(255,255,255,80%); border-radius: 10px;}

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

/*--動態效果-----------------------------------------*/
/*縮放*/
.aniScale1{ animation: aniScale1 1.5s infinite;}
@keyframes aniScale1 { 
    0%{ transform: scale(1);}
    50%{ transform: scale(0.95);}
    100% { transform: scale(1);}
}
/*前後移動*/
.aniMove{ animation: aniMove 1.5s infinite;}
@keyframes aniMove { 
    0%{ transform: translateX(0) translateY(0);}
    50%{ transform: translateX(10px) translateY(-5px);}
    100% { transform: translateX(0) translateY(0);}
}

/*--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, .bg5, .bg6, .bg7{ background-attachment: fixed; background-size: 100%;}

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


    /*--內容區-----------------------------------------*/
    /*區塊寬度*/
    .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: 700px; margin: 0 auto;}
    .mainTitle3{ width: 100%;}

    .wrapper{ width: 40%; max-width: 620px; margin: 0 auto;}

    /*--活動說明(style1)-----------------------------------------*/
    /* .noticeStyle1{ width: 78%; padding: 30px 5% 50px 5%;} */

    /*--活動說明(style2)-----------------------------------------*/
    .noticeStyle2{ width: 88%; margin-top: 30px; padding: 20px 5% 40px 5%; border-radius: 25px;}

    /*--贈品區(優惠券、書架、其他贈品)-----------------------------------------*/
    .giftBox1{ max-width: 500px; margin-top: 20px;} /*pc不並排*/
    .giftBox2{ max-width: 800px; margin-top: 20px;} /*pc並排*/

    /*--重點書籍(書名+簡介)-----------------------------------------*/
    .bookDetail{ margin-top: 30px;}
    /*書封寬度*/
    .bookDetail > li:first-child{ width: 30%;} 
    /*介紹寬度*/
    .bookDetail > li:last-child{ width: 70%; padding: 0 5%;} 
    /*書名*/
    .bookDetailBook{ margin-top: 10px; font-size: 3.6rem;}
    /*書介*/
    .bookDetailIntro{ margin-top: 20px; font-size: 2.4rem;}

    /*有重點書+書籍列表的間距*/
    .bookDetail + .bookList{ padding-top: 10px;}

    /*--書籍列表樣式-----------------------------------------*/
    .bookList{ padding-top: 30px;}
    /*書封壓標籤貼紙*/
    .bookTag{ font-size: 2.2rem;}

    /*看更多按鈕*/
    .btnMoreList{ margin-top: 15px;}
    .btnMoreList > li{ max-width: 500px;}

    /*看更多區*/
    .moreList{ max-width: 1000px; margin: 0 auto;}

    /*--其他活動BN-----------------------------------------*/
    .eventList{ width: 100%;}
    .eventTxtBox{ font-size: 1.8rem;}


    /*--優惠券列表-----------------------------------------*/
    .couponList{ max-width: 1000px;}

    /*--hover animate--------------------------------*/
    .listBox .webBookCover a:hover{transform: scale(1.2) rotate(-3deg);}

    .listBoxFree > li a{ display: block; transition: 0.4s;}
    .listBoxFree > li a: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{ background-attachment: inherit;}

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

}

/*--1200以下------------------------*/
@media screen and (min-width:767px)  and (max-width:1200px) { 
    /*--header-----------------------------------------*/
    .headerPadWidth{ overflow: hidden;}
    .headerPadWidth .headerBox{ width: 166%; margin-left: -33%;}/*平板刊頭放大(讓左右背景超出可視範圍)*/
    
    /*--內容區-----------------------------------------*/
    .wrapper { width: 65%; margin: 0 auto;}

}

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


/*書封裝飾(左右側)*/
.bookDeco img{ aspect-ratio: 80/538;}
/*書封裝飾(上下側)*/
.bookTB .bookDeco  img{ aspect-ratio: 600/54;}
/*推薦書看更多鈕*/
.btnMoreList img{ aspect-ratio: 825/240;}

/*其他活動BN*/
.eventBorder img{ aspect-ratio: 1/1;}