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

/*----*/
.pcNo{ display: block;}
.mNo{ display: none;}
.mINBLpcNO{ display: inline-block;}
.pcINBLmNO{ display: none;}

.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;}
.txtYellowGreen{ color: #e1ff7a;}
.alink{ color: #0076df; text-decoration: none;}
.alink:hover{ text-decoration: underline;}

/*bg-----------------------------------------*/
.bgPadT{ padding-top: 30px;}
.bgPadB{ padding-bottom: 30px}
.bgPadT2{ padding-top: 0;}
.bgPadB2{ padding-bottom: 0;}
.bgPadB3{ padding-bottom: 20px;}
.bgPadB4{ padding-bottom: 160px;}

.bgPadTm{ padding-top: 12px;}
.bgPadBm{ padding-bottom: 12px;}
.bgPadTm2{ padding-top: 15px;}
.bgPadBm2{ padding-bottom: 15px;}

.bgColorPink{ background-color: #ff9bdb;}
.bgColorPurple{ background-color: #bd9cff;}
.bgColorGreen{ background-color: #2db892;}
.bgColorDeepGreen{ background-color: #00a87b;}
.bg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250810_10th/images/bg_grid1.png); background-position: top center; background-size: 400%;}
.bg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250810_10th/images/bg_grid2.png); 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;}

/*刊頭動畫*/
.headerAnimal{ animation: headerAnimal 1.5s infinite;}
@keyframes headerAnimal { 
    0%{ transform: rotate(0) translateX(0);}
    50%{ transform: rotate(3deg) translateX(0);}
    100% { transform: rotate(0) translateX(0);}
}
.headerBall{ animation: headerBall 3s infinite;}
@keyframes headerBall { 
    0%{ transform: rotate(0) translateY(-20px);}
    50%{ transform: rotate(-2deg) translateY(-20px);}
    100% { transform: rotate(0) translateY(-20px);}
}
.headerBalloon1{ animation: headerBalloon1 6s infinite;}
@keyframes headerBalloon1 { 
    0%{ transform: rotate(0)}
    50%{ transform: rotate(-2deg);}
    100% { transform: rotate(0);}
}
.headerBalloon2{ animation: headerBalloon2 5s infinite;}
@keyframes headerBalloon2 { 
    0%{ transform: rotate(0);}
    50%{ transform: rotate(2deg);}
    100% { transform: rotate(0);}
}
.headerBalloon3{ animation: headerBalloon3 7s infinite;}
@keyframes headerBalloon3 { 
    0%{ transform: rotate(0)}
    50%{ transform: rotate(2deg);}
    100% { transform: rotate(0);}
}
.headerBalloon4{ animation: headerBalloon4 4s infinite;}
@keyframes headerBalloon4 { 
    0%{ transform: rotate(0);}
    50%{ transform: rotate(-2deg);}
    100% { transform: 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;}

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

/*--專屬優惠-----------------------------------------*/
.saleBox{ margin-bottom: 155px;}
/*按鈕*/
.saleBtnBox{ width: 90%; margin: 15px auto 0 auto;}
/*banner*/
.saleBn{ border: #d4ff3e 5px solid; border-radius: 5px;}

/*--里程碑-----------------------------------------*/
.timelineM{ width: 88%; margin: 0 auto; padding-bottom: 130px;}
.timelineM img{ filter: drop-shadow(5px 0px 4px #6d34df);}

/*--一段話-----------------------------------------*/
.sayBox{ margin-top: 10px; padding: 20px 27px; font-size: 1.8rem; color: #fff; border-radius: 10px; font-weight: bold;}
.sayBox.purple{ background-color: #9a67ff;}
.sayBox.pink{ background-color: #e053ad;}

/*--kol推薦-----------------------------------------*/
.kolList{ margin-top: -70px; align-items: start;}
.kolList > li{ position: relative;}
.kolList li:nth-child(odd) .kolBorder{ margin-top: 90px;} 
.kolList li:nth-child(even) .kolBorder{ margin-top: 130px;} 
.kolBorder{ padding: 8px 6px; border: #d4ff3e 5px solid; background-color: rgba(255,255,255,0.5); border-radius: 15px;}
.kolList li .kolPublichMore{ position: absolute; bottom: 3%; right: 7.5%; width: 35%; cursor: pointer;}

/*--出版社編輯推薦-----------------------------------------*/
.publishBox{ margin-top: 20px; margin-bottom: 150px;}
/*編輯+祝福*/
.publishList{ margin-top: 15px; background-color: #d4ff3e; border-radius: 20px;}
.publishList > li{ display: flex; align-items: center;}
.publishWish{ padding-left: 15px; padding-right: 10px; padding-bottom: 10px; font-size: 1.8rem; font-weight: bold;}

/*書籍*/
.publishBookList{ margin-top: 10px;}
.publishBookList > li{ position: relative;}
.publishBookList li .kolPublichMore{ position: absolute; bottom: 5%; right: 7.5%; width: 35%; cursor: pointer;}
.publishBorder{ padding: 8px 6px; border: #d4ff3e 5px solid; background-color: rgba(255,255,255,0.5); border-radius: 15px;}

/*--排行-----------------------------------------*/
.topBorder{ background-color: #fff; border: #000 5px solid; border-radius: 8px;}
.topTitle{ background-color: #000;}
.topList{ align-items: center; border-top: #000 2px solid;}
.topList > li.topNum{ display: flex; align-self: stretch; width: 30%; background-color: #ebe6f5;}
.topList > li.topNum img{ align-self: center;}
.topList > li.topBookName{ width: 70%; margin: 5px 0; padding: 0 10px; font-size: 1.8rem; line-height: 1.2; font-weight: bold;
 -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; max-height: 4.8rem; overflow: hidden; text-overflow: ellipsis; word-break: break-all;}
.topBookName a{ color: #8159d0; text-decoration: none;}

/*--測驗-----------------------------------------*/
.gameBox img{ display: block;}
.gameBox{ overflow: hidden; width: 96%; margin: 15px auto 0 auto; padding: 1%; background-color: #dfa8ff; border: #9e6eff 5px solid; border-radius: 5px;}
.gameCon{ position: relative; padding: 1%; border-radius: 5px; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250810_10th/images/game_bg.png); border: #b96eff 3px solid;}
.gameH img{ width: 100%;}

.gameTilte,.gameStart{ margin: 0 auto;}
.gameTilte{ width: 90%; padding-top: 15px;}
.gameStart{ position: relative; display: block; width: 70%; padding-bottom: 15px; text-decoration: none;}

.gameStartBtn{ display: block; animation: scaleInOut 0.8s infinite;}
@keyframes scaleInOut{ 0% { transform: scale(1);} 50% { transform: scale(0.9);} 100% { transform: scale(1);} }

/*製作九宮格*/
.resultBg{ position: relative;}
.resultPic{ position: absolute; width: 23%; cursor: pointer; /*border: #000 1px solid;*/}
.result1{ top: 6.8%; left: 6.6%;}
.result2{ top: 6.8%; left: 38.6%;}
.result3{ top: 6.8%; left: 70%;}
.result4{ top: 35.2%; left: 6.6%;}
.result5{ top: 35.2%; left: 38.6%;}
.result6{ top: 35.2%; left: 70%;}
.result7{ top: 63.6%; left: 6.6%;}
.result8{ top: 63.6%; left: 38.6%;}
.result9{ top: 63.6%; left: 70%;}

/*手機長按下載*/
.resultPicNote{ margin-top: 10px; font-size: 1.6rem; color: #44218c; font-weight: bold; text-align: center;}
/*按鈕*/
.gameBtn{ display: block; /*width: 60%;*/ margin: 10px auto; background-color: #9e6eff; border: #7944e5 5px solid; border-radius: 100px; cursor: pointer;}

/*社群分享*/
.shareTitle{ max-width: 280px; margin: 10px auto 0 auto;}
.shareIconList{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 90%; max-width: 350px; margin: 15px auto 20px auto;}
.shareIcon{ display: block; width: 20%; transition: 0.4s;}
.shareIcon:hover{ transform: scale(0.9);}

/*--活動說明-----------------------------------------*/
.noticeStyle1{ width: 90%; margin: 15px auto 0 auto; padding: 30px 5% 20px 5%; background-color: #e053ad; border-radius: 15px;}
.noticeStyle1 .notice{ max-width: 1000px; margin: 0 auto; color: #ffffff;}
.noticeStyle1 .noticeTitle{ color: #ffffff;}
.noticeStyle1 .notice > li{ list-style-type: disc;}
.noticeStyle1 .notice > li a{ color: #93ffec;}

/*--sweetAlert-----------------------------------------*/
/*預設按鈕文字大小*/.swal2-actions button {font-size: 1.4rem !important;}
.custom-html-container{ margin: 1em 0 0.3em;}
.custom-btn-close, .custom-btn-close-black{ font-size: 4.5rem; margin-top: -5%; margin-right: -4%; box-shadow: none;}
.custom-btn-close:focus, .custom-btn-close-black:focus{ box-shadow: none;}
.custom-btn-close-black{ color: #000;}
.custom-btn-styled { font-size: 1.4rem; cursor: pointer;}
/* .sweetBtn{ padding: 3px 10px; font-size: 1.5rem !important; font-weight: bold !important; cursor: pointer; font: 62.5% 微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif;} */
.custom-border{ border: #000 5px solid; border-radius: 20px;}

/*按鈕(關閉)*/
.custom-btn-styled,
.custom-btn-styled:active,
.custom-btn-styled:hover{ background-color: transparent !important; background-image: none !important;}
.custom-btn-styled:focus{ border: 0 !important; box-shadow: none;}
.custom-btn-styled{ box-shadow: none !important;}
.custom-btn-styled .sweetBtn{ margin: 0; display: inline-block; margin: 0 auto; padding: 20px 20px 22px 20px; min-width: 200px; font-size: 2rem; color: #fff; line-height: 1;
font-weight: bold; /*font-style: italic;*/ text-decoration: none; font-family: 微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif; background-color: #000000; border-radius: 5px;
/* text-shadow: rgb(255, 255, 255) 0 0px 10px; border: #fff 1px solid; box-shadow: inset rgb(255, 255, 255) 0px 0px 28px, rgb(255, 255, 255) 0 0px 10px; cursor: pointer;*/} 

/*恭喜獲得優惠券*/
.popTitle{ color: #000000; margin-top: 15px; font-size: 2.5rem; font-weight: bold;}
.popTitle b{ color: #000000;}
.popCon{ margin-top: 10px; font-size: 2rem; font-weight: bold;}
.popCon a{ font-size: 1.6rem; color: #0092df;}
.popCon a:hover{ text-decoration: none;}

/*--sweetAlert搜尋-----------------------------------------*/
.searchInput{ width: 86%; height: 50px; margin-top: 20px; padding: 0 15px; font-size: 1.8rem; color: #4e4e4e; border: #000000 2px solid; border-radius: 5px;}
/*搜尋書籍*/
.searchBookList{ margin: 10px;}
.searchBookList > li{ cursor: pointer;}
.searchBookList > li img{ border: #b88ad8 2px solid; border-radius: 5px; overflow: hidden;}
.searchBookName{ margin-top: 5px; color: #8254a2; font-size: 1.6rem; line-height: 1.2; font-weight: bold; -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; max-height: 4.8rem; overflow: hidden; text-overflow: ellipsis; word-break: break-all;}

/*--sweetAlert推薦書-----------------------------------------*/
.recommBook{ padding: 0 5%; font-size: 1.6rem; text-align: left;}
.recommBook > li img{ max-width: 200px; margin: 0 auto;}
.recommBook > li:nth-child(1){ width: 100%;}
.recommBook > li:nth-child(2){ width: 100%;}

.recommName{ display: inline-block; padding: 0 5px; background-color: #000; color: #fff;}
.recommCon{ margin-top: 10px; font-size: 1.8rem; color: #000; font-weight: bold;}
.recommBtn{ float: right; display: inline-block !important; margin-top: 10px; padding: 8px 15px; background-color: #000; font-size: 1.8rem; color: #fff; font-weight: bold; text-decoration: none; border-radius: 100px;}

/*--背景留言板-----------------------------------------*/
body{ position: relative;}
.blessingBg { position: fixed; top: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; padding: 70px 20px; box-sizing: border-box; text-shadow: rgba(0,0,0,0.08) 0 0 3px;}
.blessingBg div{ max-width: 450px; margin-bottom: 30px; font-size: 1.5rem; line-height: 1.5;  color: #ffffff;}
/*奇數靠左，偶數靠右*/
.blessingBg div:nth-child(odd){ margin-left: 30vw; margin-top: 0vw;}
.blessingBg div:nth-child(even){ margin-left: 1vw;}
/*左右內縮交錯間距*/
/* .blessingBg div:nth-child(3), .blessingBg div:nth-child(7), .blessingBg div:nth-child(11), .blessingBg div:nth-child(15), .blessingBg div:nth-child(19){ margin-left: 5vw;}
.blessingBg div:nth-child(4), .blessingBg div:nth-child(8), .blessingBg div:nth-child(12), .blessingBg div:nth-child(16), .blessingBg div:nth-child(20){ margin-left: 60vw;} */

/*社群標籤*/
.socialTag{ margin-right: 5px; padding: 0 4px; background-color: #3b55ff; font-size: 1.3rem;}
/*留言內容*/
.blessingCon{ opacity: 0.7;}
/*留言者名稱*/
.blessingName{ text-align: right; opacity: 0.7;}

/*--解決背景留言板遮到footer-----------------------------------------*/
.forMemberBox, .FOOTER_BG{ position: relative; z-index: 1;}

/*--767up(Pc)------------------------*/
@media screen and (min-width:767px) {
    /*--loading載入中--------------------------------*/
    /*loading文字*/.loadingTxt{ font-size: 2.5rem; }

    /*----*/
    .pcNo{ display: none;}
    .mNo{ display: block;}
    .mINBLpcNO{ display: none;}
    .pcINBLmNO{ display: inline-block;}

    /*bg-----------------------------------------*/
    .bgPadT{ padding-top: 60px;}
    .bgPadT2{ padding-top: 15px;}
    .bgPadB{ padding-bottom: 90px;}
    .bgPadB2{ padding-bottom: 0;}
    .bgPadB3{ padding-bottom: 40px;}
    .bgPadB4{ padding-bottom: 90px;}

    .bg1, .bg2, .bg3, .bg4{ background-attachment: fixed; background-size: 100%;}
    .bgDeco{ background-attachment: fixed; background-size: 100%;}

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

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

    /*刊頭動畫*/
    .headerAnimal{ animation: headerAnimal 1.5s infinite;}
    @keyframes headerAnimal { 
        0%{ transform: rotate(0) translateX(0);}
        50%{ transform: rotate(3deg) translateX(20px);}
        100% { transform: rotate(0) translateX(0);}
    }
    .headerBall{ animation: headerBall 3s infinite;}
    @keyframes headerBall { 
        0%{ transform: rotate(0) translateY(-50px);}
        50%{ transform: rotate(-2deg) translateY(-50px);}
        100% { transform: rotate(0) translateY(-50px);}
    }

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

    /*--專屬優惠-----------------------------------------*/
    .saleBox{ margin-top: 50px; margin-bottom: 0;}
    /*標題*/
    .saleTitle{ max-width: 450px; margin: 0 auto;}
    /*按鈕*/
    .saleBtnBox{ width: 100%; margin: 15px auto 0 auto; padding: 0 10px; box-sizing: border-box;}
    .saleBtnBox li{ padding: 0;}
    .saleBtnBox li:nth-child(1){ background-color: #3b55ff;}
    .saleBtnBox li:nth-child(2){ background-color: #d4ff3e;}
    .saleBtnBox li img{ width: 90%; margin: 0 auto;}
    /*banner*/
    .saleBn{ max-width: 600px; margin: 0 auto; border-width: 7px; border-radius: 10px;}
    
    /*--一段話-----------------------------------------*/
    .sayBox{ margin-top: 15px; padding: 4% 5%; /*font-size: 1.8rem;*/}
    
    /*--kol推薦-----------------------------------------*/
    .kolList{ margin-top: 10px;}
    .kolList li:nth-child(odd) .kolBorder{ margin-top: 60px;} 
    .kolList li:nth-child(even) .kolBorder{ margin-top: 100px;} 
    .kolList li .kolPublichMore{ bottom: 3%; right: 8%; width: 30%; cursor: pointer;}

    /*--出版社編輯推薦-----------------------------------------*/
    .publishBox{ width: 80%; margin: 40px auto 80px auto;}
    .publishWish{ padding: 16px 15px;}

    /*書籍*/
    .publishBookList{ width: 70%;}
    .publishBookList li .kolPublichMore{ position: absolute; bottom: 7%; right: 8%; width: 25%;}
    .publishBorder{ padding: 10% 15%;}

    .publishBox.r{ overflow: hidden;}
    .publishBox.r .publishBookList{ float: right;}

    /*--測驗-----------------------------------------*/
    .gameBox{ max-width: 990px; width: 94%; padding: 15px; border-width: 12px;}
        
    .gameTilte{ width: 60%; padding-top: 40px;}
    .gameGift{ width: 60%;}
    .gameStart{ width: 58%; padding-bottom: 30px;}

    /*製作九宮格*/
    .resultBg{ width: 70%; margin: 40px auto 0 auto;}
    /*按鈕*/
    .gameBtnBox{ width: 60%; margin: 0 auto;}

    /*社群分享*/
    .shareTitle{ max-width: 400px; margin: 0 auto;}
    .shareIconList{ margin: 15px auto 40px auto;}

    /*--活動說明-----------------------------------------*/
    .noticeStyle1{ padding: 30px 5% 50px 5%;}

    /*--sweetAlert-----------------------------------------*/
    .custom-btn-close, .custom-btn-close-black{ font-size: 5.5rem; margin-top: -4%; margin-right: -2.5%;}

    /*--sweetAlert推薦書-----------------------------------------*/
    .recommBook > li:nth-child(1){ width: 30%;}
    .recommBook > li:nth-child(2){ width: 70%;}
    .recommCon{ font-size: 2rem; line-height: 1.4;}

    /*--背景留言板-----------------------------------------*/
    .blessingBg div{ margin-bottom: 0; font-size: 1.6rem; line-height: 1.6;}
    /*奇數靠左，偶數靠右*/
    .blessingBg div:nth-child(odd){ margin-left: 1vw;}
    .blessingBg div:nth-child(even){ margin-left: 68vw; margin-top: -1vw;}
    /*左右內縮交錯間距*/
    .blessingBg div:nth-child(3), .blessingBg div:nth-child(7), .blessingBg div:nth-child(11), .blessingBg div:nth-child(15), .blessingBg div:nth-child(19){ margin-left: 5vw;}
    .blessingBg div:nth-child(4), .blessingBg div:nth-child(8), .blessingBg div:nth-child(12), .blessingBg div:nth-child(16), .blessingBg div:nth-child(20){ margin-left: 60vw;}

    /*留言內容*/
    .blessingCon{ opacity: 1;}
    /*留言者名稱*/
    .blessingName{ opacity: 1;}

    /*--hover animate--------------------------------*/
    .saleBn a, .kolPublichMore, .gameBtn{ display: block; transition: 0.4s;}
    .saleBn a:hover, .gameBtn:hover{ transform: scale(0.9);}
    .kolPublichMore:hover{ transform: scale(0.8);}
}

/*--768-1024(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1024px) { 
    .bg1, .bg2, .bg3, .bg4{ background-attachment: inherit;}
    .wrapperHalf > li{ padding: 2%;}
    .mainTitle3{ width: 90%;}
    .areaWidth2{ max-width: 95%;}

    /*--排行-----------------------------------------*/
    .topList > li.topBookName{ margin: 5px 0; font-size: 1.6rem;}
}

/*--1200以下------------------------*/
@media screen and (min-width:767px)  and (max-width:1200px) { 
    /*--contain-----------------------------------------*/
    .wrapper { width: 65%; margin: 0 auto;}

    /*--header-----------------------------------------*/
    .headerOverflow{ overflow: hidden;}
    .headerPadWidth{ width: 166%; margin-left: -33%;}/*刊頭放大(讓左右背景超出可視範圍)*/
}

/*--1600以上------------------------*/
@media screen and (min-width:1600px) { 
    /*--背景留言板-----------------------------------------*/
    /*奇數靠左，偶數靠右*/
    .blessingBg div:nth-child(even){ margin-left: 75vw;}
    /*左右內縮交錯間距*/
    .blessingBg div:nth-child(4), .blessingBg div:nth-child(8), .blessingBg div:nth-child(12), .blessingBg div:nth-child(16), .blessingBg div:nth-child(20){ margin-left: 68vw;}
}

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

.saleBookList img{ aspect-ratio: 350/488;}
.saleBtnBox img{ aspect-ratio: 700/121;}
.saleBn img{ aspect-ratio: 635/400;}

.kolBorder img{ aspect-ratio: 250/335;}
.publishList img{ aspect-ratio: 750/395;}
.publishBorder img{ aspect-ratio: 250/335;}
.kolPublichMore img{ aspect-ratio: 1/1;}
.recommBook img{ aspect-ratio: 250/335;}

.gameTilte img{ aspect-ratio: 725/625;}
.gameStartBtn img{ aspect-ratio: 500/135;}

.resultBgPic{ aspect-ratio: 1000/1553;}
.resultPic   img{ aspect-ratio: 280/413;}

.gameBtn img{ aspect-ratio: 350/92;}
.shareTitleimg{ aspect-ratio: 500/170;}
.shareIconList img{ aspect-ratio: 1/1;}

.topTitle img{ aspect-ratio: 590/78;}
.topNum img{ aspect-ratio: 165/75;}

.searchBookList img{ aspect-ratio: 280/413;}

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