@charset "utf-8";
/* a:hover{ opacity:0.9;} *//*滑鼠滑入半透明*/

.pcNo{ display: block;}
.mNo{ display: none;}

.txtGreen{ color: #242021;}
.txtDeepRed{ color: #242021;}


/*--header--------------------------------*/
.headerBox{ overflow: hidden; position: relative; margin-top: 0px;  background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_03.png); background-size: cover; /*background-color: #7a8996;*/}
.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;}

header{ margin-top: 0px; position: relative; overflow: hidden;}
.bgHeaderBao{ display: none;}
.headerPic{ position: absolute; top: 0; left: 0; right: 100; margin: 0 auto;}
.headerTitle{ top: 0; width: 100%;}
.headerBao{ top: 34%; left: 10%; width: 45%;}

.header1{ display: none;}
.header2{ display: none;}
.header3{ display: none;}
.header4{ display: none;}
.header5{ display: none;}
.header6{ display: none;}
.header7{ display: none;}
.header8{ display: none;}

.header1m{ position: absolute; top: 32%; left: 10%; width: 16% !important; display: block; z-index: 1;}
.header2m{ position: absolute; top: 32%; left: 26%; width: 16% !important; display: block; z-index: 1;}
.header3m{ position: absolute; top: 32%; left: 42%; width: 16% !important; display: block; z-index: 1;}
.header4m{ position: absolute; top: 32%; left: 58%; width: 16% !important; display: block; z-index: 1;}
.header5m{ position: absolute; top: 32%; left: 74%; width: 16% !important; display: block; z-index: 1;}
.header6m{ position: absolute; top: 47.2%; left: 0%; width: 100% !important; display: block; z-index: 1;}
.header7m{ position: absolute; top: 56%; left: 0%; width: 100% !important; display: block; z-index: 1;}
.header8m{ position: absolute; top: 67.5%; left: 0%; width: 100% !important; display: block; z-index: 1;}

.header_a1{ display: none;}

.headerGiftBao{ top: 70%; right: 45%; width: 40%;}
.bgHeaderM{ display: block;}

/*bg 重複---------------------------------------
.areaBg0{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_01m.png);}
.areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_01m.png);}
.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_02m.png);}
.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_03m.png);}
.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_04m.png);}
.areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_05m.png);}
.areaBg6{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_06m.png);}
.areaBg7{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_07m.png);}
.areaBg8{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_08m.png);}
--*/

/*bg 無重複-----------------------------------------*/
.areaBg0{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_01.png); background-size: cover; background-repeat: no-repeat; background-position: top center;}
.areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_01.png); background-size: cover; background-repeat: no-repeat; background-position: top center;}
.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_02.png); background-size: cover; background-repeat: no-repeat; background-position: top center;}
.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_03m.png); background-size: cover; background-repeat: no-repeat; background-position: top center;}
.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_04m.png); background-size: cover; background-repeat: no-repeat; background-position: top center;}
.areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_05m.png); background-size: cover; background-repeat: no-repeat; background-position: top center;}
.areaBg6{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_06m.png); background-size: cover; background-repeat: no-repeat; background-position: top center;}
.areaBg7{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_07m.png); background-size: cover; background-repeat: no-repeat; background-position: top center;}
.areaBg8{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_08.png); background-size: cover; background-repeat: no-repeat; background-position: top center;}

/*--contain-----------------------------------------*/
.areaWidth1{ position: relative; width: 100%; padding: 50px 0% 50px 0%; margin-top: 0px; margin-bottom: 0px; }
.areaWidth2{ position: relative; width: 100%; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: 0px; }
.areaWidth3{ position: relative; width: 100%; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: 0px; }
.areaWidth4{ position: relative; width: 100%; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: 0px; }
.areaWidth5{ position: relative; width: 100%; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: 0px; }
.areaWidth6{ position: relative; width: 100%; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: 0px; }
.areaWidth7{ position: relative; width: 100%; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: 0px; }
.areaWidth8{ position: relative; width: 100%; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: 0px; }

/*notice----------*/
.noticeBox{ padding: 0px 0% 10px 0%;}
.noticeList{ width: 80%;  margin-top: 0px; padding: 0px 0px 0px 13%; color: #2a2a2a; font-size: 1.2rem; border-radius: 10px;}
.noticeList li{ margin-bottom: 10px; list-style: inside; list-style-type: decimal; text-indent: -15px; line-height: 2; font-weight: bold;}

/*--固定盒子-----------------------------------------*/
.fixedBox{ overflow: hidden; position: relative; margin-top: 0px;  
	background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_01.png);
	background-size: cover; 
	background-color: #ede7c3;
}
.fixedBox img{ display: block; width: 100%;}
.fixedH{ width: 100%;}

/*--固定盒子：定位--*/
.fixed1{ position: absolute; top: 22.5%; left: 64.8%; width: 11.2%; cursor: pointer;/*滑鼠滑入變手指*/}
.fixed1m{ position: absolute; top: 69%; left: 23%; width: 51%; cursor: pointer;}

/*--閃爍動畫1-----------------------------------------*/
.fire1 img {
    animation: floating 3s ease-in-out infinite,
               blinking 1.5s ease-in-out infinite;

}/*--閃爍--*/
@keyframes blinking {
    0%   { opacity: 1; }
    50%  { opacity: 0.5; }
    100% { opacity: 1; }
}

/*--閃爍動畫2-----------------------------------------*/
.fire2 img {
    animation: floating 3s ease-in-out infinite,
               blinking 1.5s ease-in-out infinite;

}/*--閃爍--*/
@keyframes blinking {
    0%   { opacity: 1; }
    50%  { opacity: 0.2; }
    100% { opacity: 1; }
}

/*--area1--------------------------------*/
.book1 { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  padding: 0px 3% 0px 3%; 
  margin-top: 0px; 
  border-radius: 10px;
}
.book1 li { 
  width: 80%; 
  margin-bottom: 0px;
}


.book12 { 
  display: none; 
  flex-wrap: wrap; 
  justify-content: center; 
  padding: 0px 3% 0px 3%; 
  margin-top: 0px; 
  border-radius: 10px;
}
.book12 li { 
  width: 80%; 
  margin-bottom: 0px;
}
.book12m { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  padding: 20px 3% 20px 3%; 
  margin-top: 0px; 
  border-radius: 10px;
}
.book12m li { 
  width: 80%; 
  margin-bottom: 0px;
}

/*--area2--------------------------------*/
.title2{ width: 90%; margin: 0 auto; padding: 0px 0% 0px 0%; position: relative;display: none;}
.title2m{ width: 100%; margin: 0px auto; padding: 0px 0% 0px 0%; position: relative;display: block;}

.book2 { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  padding: 0px 3% 0px 3%; 
  margin-top: 0px; 
  border-radius: 10px;
}
.book2 li { 
  width: 40%; 
  margin-bottom: 0px;
}

.more2 { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  padding: 0px 3% 0px 3%; 
  margin-top: 0px; 
  border-radius: 10px;
}
.more2 li { 
  width: 40%; 
  margin-bottom: 0px;
}

/*--area3--------------------------------*/
.title3{ width: 90%; margin: 0 auto; padding: 0px 1% 0px 1%; position: relative;display: none;}
.title3m{ width: 100%; margin: 0 auto; padding: 0px 0% 10px 0%; position: relative;display: block;}

.book3 { 
  display: none; 
  flex-wrap: wrap; 
  justify-content: center; 
  padding: 0px 1% 0px 1%; 
  margin-top: 0px; 
  border-radius: 10px;
}
.book3 li { 
  width: 30%; 
  margin-bottom: 20px;
}
.book3m { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  padding: 0px 1% 0px 1%; 
  margin-top: 0px; 
  border-radius: 10px;
}
.book3m li { 
  width: 48%; 
  margin-bottom: 10px;
}

.more3 { 
  display: none; 
  flex-wrap: wrap; 
  justify-content: center; 
  padding: 0px 0% 0px 0%; 
  margin-top: 0px; 
  border-radius: 10px;
}
.more3 li { 
  width: 90%; 
  margin-bottom: 0px;
}
.more3m { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  padding: 0px 1% 0px 1%; 
  margin-top: 0px; 
  border-radius: 10px;
}
.more3m li { 
  width: 95%; 
  margin-bottom: 10px;
}

/*--area7--------------------------------*/
.title7{ width: 90%; margin: 0 auto; padding: 0px 1% 0px 1%; position: relative;display: none;}
.title7m{ width: 90%; margin: 0 auto; padding: 0px 0% 10px 0%; position: relative;display: block;}

.book7 { 
  display: none; 
  flex-wrap: wrap; 
  justify-content: center; 
  padding: 0px 1% 0px 1%; 
  margin-top: 0px; 
  border-radius: 10px;
}
.book7 li { 
  width: 30%; 
  margin-bottom: 0px;
}
.book7m { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  padding: 0px 3% 0px 0%; 
  margin-top: 0px; 
  border-radius: 10px;
}
.book7m li { 
  width: 46%; 
  margin-bottom: 10px;
}


/*--滑鼠滑入效果(縮小)--------------------------------*/
.hover1 li a{ display: block; transition: 0.4s;}
.hover1 li a:hover{ transform: scale(0.9);}/*滑入縮小*/

/*--滑鼠滑入效果(縮小)--------------------------------*/
.hover1  a{ display: block; transition: 0.4s;}
.hover1  a:hover{ transform: scale(0.9);}/*滑入縮小*/

/*--滑鼠滑入效果(變淡)--------------------------------*/
.hover2 li a:hover img{filter:alpha(Opacity=30);-moz-opacity:0.3;opacity: 0.3;}

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

/*popup內容底色*/
.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;}

/*popup內容高度設定*/
.popContent{ overflow-y: auto; max-height: 70vh; -webkit-overflow-scrolling: touch;}

/*popup提醒文字*/
.popAlert{ text-align: center; margin-bottom: 40px; padding: 15px 2% 25px 2%; color: #8d1a91;/*文字顏色*/ font-size: 1.8rem; font-weight: bold;}

/*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;}/*按鈕滑入顏色*/

/*--767up(Pc)------------------------*/
@media screen and (min-width:767px) {
    .FOOTER_BG{ padding-bottom: 0px !important;}
    .pcNo{ display: none;}
    .mNo{ display: block;}
	
    header{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_01.png); background-position: top center; background-size: cover; background-attachment: fixed;}
    .bgHeaderBao{ display: block;}
	.header1{ position: absolute; top: 47.6%; left: 9.4%; width: 22% !important; display: block; z-index: 1;}
	.header2{ position: absolute; top: 47.6%; left: 31.4%; width: 12.85% !important; display: block; z-index: 1;}
	.header3{ position: absolute; top: 47.6%; left: 44.25%; width: 14.63% !important; display: block; z-index: 1;}
	.header4{ position: absolute; top: 47.6%; left: 58.85%; width: 18.08% !important; display: block; z-index: 1;}
	.header5{ position: absolute; top: 47.6%; left: 76.9%; width: 12.44% !important; display: block; z-index: 1;}
	.header6{ position: absolute; top: 62.5%; left: 12.35%; width: 41.97% !important; display: block; z-index: 1;}
	.header7{ position: absolute; top: 78.5%; left: 12.35%; width: 41.97% !important; display: block; z-index: 1;}
	.header8{ position: absolute; top: 60.3%; left: 57%; width: 28.44% !important; display: block; z-index: 1;}
	
	.header1m{ display: none;}
	.header2m{ display: none;}
	.header3m{ display: none;}
	.header4m{ display: none;}
	.header5m{ display: none;}
	.header6m{ display: none;}
	.header7m{ display: none;}
	.header8m{ display: none;}

	.header_a1{ position: absolute; top: 0%; left: 0%; width: 100% !important; display: block; z-index: 1;}
	
	.headerPic{ position: absolute; top:0%; left:0; right: 0%; margin: 0 auto;}	
    .headerTitle{ width: 0%; }
    .headerBao{ top: 0%; left: 0%; width: 0%;}
	.headerGiftBao,.bgHeaderM{ display: none;}

    .areaBox{ overflow: hidden; padding: 0; background-attachment: fixed;}	
	
    /*bg-----------------------------------------*/
	.areaBg0{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_02.png); background-size: cover;}
    .areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_02.png); background-size: cover;}
    .areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_02.png); background-size: cover;}
	.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_03.png); background-size: cover;}
	.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_04.png); background-size: cover;}
    .areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_05.png); background-size: cover;}
	.areaBg6{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_06.png); background-size: cover;}
	.areaBg7{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_07.png); background-size: cover;}
	.areaBg8{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260918_r18/images/bg_08.png); background-size: cover;}
	
    /*--contain-----------------------------------------*/
    .areaWidth{ max-width: 1023px; padding-top: 0;}
	.areaWidth1{ max-width: 1200px;  margin: 0 auto; padding: 100px 0% 100px 0%; margin-top: 0px; margin-bottom: 0px; }
    .areaWidth2{ max-width: 100%;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: 0px; }
	.areaWidth3{ max-width: 100%;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: -25px; }
	.areaWidth4{ max-width: 100%;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: 0px; }
	.areaWidth5{ max-width: 100%;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: 0px; }
	.areaWidth6{ max-width: 100%;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: 0px; }
	.areaWidth7{ max-width: 100%;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: -4.5px; }
	.areaWidth8{ max-width: 100%;  margin: 0 auto; padding: 0px 0% 0px 0%; margin-top: 0px; margin-bottom: 0px; }
	
    .mainTitle{ width: 56%;}
    .mainTitle2{ width: 75%; max-width: 1000px;}

	
	/*notice----------*/
	.noticeBox{ max-width: 100%;  margin: 0 auto; margin-top: 0px; margin-bottom: 0px;}
    .noticeList{ width: 60%; margin: 0px 0px 0px 0px; padding: 50px 10% 30px 20%; font-size: 1.8rem;}
    .noticeList li{ margin-bottom: 5px; text-indent: -21px;}
	
	/*--area1--------------------------------*/
    .book1{ display: flex; flex-wrap: wrap; justify-content: center; display: flex;}
	.book1 li{ width: 50%;  padding: 0px 0% 0px 0%; display: flex;}
	
	.book12{ width: 100%; padding: 0px 0px 0px 0px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
	.book12m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}
	
    /*--area2--------------------------------*/
	.title2{ width: 100%; padding: 0px 0px 0px 0px; display: block;}
    .title2m{ width: 100%; padding: 0px 0px 0px 0px; display: none;}
	
    .book2{ display: flex; flex-wrap: wrap; justify-content: center; display: flex;}
	.book2 li{ width: 25%;  padding: 0px 0% 0px 0%; display: flex;}

	.more2{ display: flex; flex-wrap: wrap; justify-content: center; display: flex;}
	.more2 li{ width: 30%;  padding: 0px 0% 0px 0%; display: flex;}
	
	/*--area3--------------------------------*/
	.title3{ width: 100%; padding: 0% 0% 0% 0%; display: block;}
    .title3m{ width: 100%; padding: 0% 0% 0% 0%; display: none;}
	
    .book3{ display: flex; flex-wrap: wrap; justify-content: center; padding: 0% 0% 0% 10%; display: flex;}
	.book3 li{ width: 27%;  padding: 3% 0% 0% 3%; display: flex;}
    .book3m{ display: flex; flex-wrap: wrap; justify-content: center; padding: 0% 0% 0% 10%; display: none;}
	.book3m li{ width: 27%;  padding: 3% 0% 0% 3%; display: none;}
	
	.more3{ display: flex; flex-wrap: wrap; justify-content: center; display: flex;}
	.more3 li{ width: 100%;  padding: 0px 0% 0px 0%; display: flex;}
	.more3m{ display: flex; flex-wrap: wrap; justify-content: center; display: none;}
	.more3m li{ width: 100%;  padding: 0px 0% 0px 0%; display: none;}

    /*--area7--------------------------------*/
	.title7{ width: 100%; padding: 0% 0% 0% 0%; display: block;}
    .title7m{ width: 100%; padding: 0% 0% 0% 0%; display: none;}
	
    .book7{ display: flex; flex-wrap: wrap; justify-content: center; padding: 0% 0% 0% 10%; display: flex;}
	.book7 li{ width: 27%;  padding: 3% 0% 0% 3%; display: flex;}
	.book7m{ display: flex; flex-wrap: wrap; justify-content: center; padding: 0% 0% 0% 10%; display: none;}
	.book7m li{ width: 27%;  padding: 3% 0% 0% 3%; display: none;}
	
	/*--R18提醒彈窗--------------------------------------------------- */
	.popBox{ width: 40%; margin: 50px auto; padding: 40px 20px 20px;}
}

/*--768-1023(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1023px) { 
    .bgDeco1,.bgDeco2,.bgDeco3{ background-attachment: inherit;}
	
	/*R18提醒彈窗--------------------------------------------------- */
    .popBox{ width: 60%;}

}

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

}