@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/20260130_peenky/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;}

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

.header2m{ position: absolute; z-index: 2; top: 90%; left: 5%; width: 50%; display: block;}
.header1m{ position: absolute; z-index: 2; top: 2%; left: 0%; width: 100%; display: block;}

/*bg-----------------------------------------*/
.areaBg0{ background-color: #e71532;}
.areaBg1{ background-color: #ff9895; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260130_peenky/images/bg_01m.png);}
.areaBg2{ background-color: #e04891; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260130_peenky/images/bg_02m.png);}
.areaBg3{ background-color: #9dfbdb; /*background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260130_peenky/images/bg_03.png);*/}
.areaBg4{ background-color: #ffd76d; /*background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260130_peenky/images/bg_04.png);*/}
.areaBg5{ background-color: #f5a8ef; /*background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260130_peenky/images/bg_05.png);*/}
.areaBg6{ background-color: #57443d; /*background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260130_peenky/images/bg_06.png);*/}
.areaBg7{ background-color: #8fa960; /*background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260130_peenky/images/bg_07.png);*/}
.areaBg8{ background-color: #af8ec8;  /*background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260130_peenky/images/bg_08.png);*/}

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

/*--活動說明-----------------------------------------*/
.gameInfo1_title{ width: 87%; margin: 0 ; margin-right: 0px ; padding: 20px 0px 10px 27px; display: block;}

.gameInfo1{ padding: 0% 5% 0% 10%; border-radius: 13px; font-size: 1.3rem; color: #d69d58; font-weight: bold;}
.gameInfo1 li{ margin: 5px; list-style: disc;}
.gameInfo1 oi{ padding-left: 3%; font-size: 1.3rem;}
.gameInfo1 li a{ color: #0e73a8; text-decoration: none; /* 移除下劃線 */}
.gameInfo1 li > ol > li{ list-style-type:disc;}/* list-style: none; 把ol li的樣式移除*/

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

/*--固定盒子：定位--*/
.fixed1{ position: absolute; top: 25.5%; left: 65.6%; width: 12.5%; cursor: pointer;/*滑鼠滑入變手指*/}
.fixed1m{ position: absolute; top: 44%; left: 28%; width: 38%; cursor: pointer;}

/*--area1--------------------------------*/
.title1{ width: 90%; margin: 0 auto; padding: 0px 1% 20px 1%; position: relative;display: none;}
.title1m{ width: 90%; margin: 0 auto; padding: 0px 1% 20px 1%; position: relative;display: block;}

.book1{flex-wrap: wrap; justify-content: center; /* 子元素水平置中 */ padding: 0px 0% 0px 0%; margin-top: 0px; display: flex;}
.book1 li{ width: 80%; padding: 20px 0% 0px 0%; display: block;}

.more1{ width: 70%; margin: 0 auto; padding: 20px 1% 0px 1%; position: relative;display: block;}

/*--area2--------------------------------*/
.book2{flex-wrap: wrap; justify-content: center; /* 子元素水平置中 */ padding: 0px 0% 0px 0%; margin-top: 0px; display: none;}
.book2 li{ width: 80%; padding: 20px 0% 0px 0%; display: none;}
.book2m{flex-wrap: wrap; justify-content: center; /* 子元素水平置中 */ padding: 0px 0% 0px 0%; margin-top: 0px; display: flex;}
.book2m li{ width: 80%; padding: 20px 0% 0px 0%; display: block;}

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

.book3{flex-wrap: wrap; justify-content: center; /* 子元素水平置中 */ padding: 0px 0% 0px 0%; margin-top: 0px; display: flex;}
.book3 li{ width: 40%; padding: 0px 0% 0px 0%; display: block;}

.more3{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.more3m{ width: 80%; margin: 0 auto; padding: 0px 1% 0px 1%; position: relative;display: block;}

/*--area4--------------------------------*/
.title4{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title4m{ width: 80%; margin: 0 auto; padding: 0px 1% 0px 1%; position: relative;display: block;}

.book4{flex-wrap: wrap; justify-content: center; /* 子元素水平置中 */ padding: 0px 0% 0px 0%; margin-top: 0px; display: flex;}
.book4 li{ width: 70%; padding: 0px 0% 0px 0%; display: block;}

.more4{flex-wrap: wrap; justify-content: center; /* 子元素水平置中 */ padding: 20px 0% 0px 0%; margin-top: 0px; display: flex;}
.more4 li{ width: 70%; padding: 0px 0% 0px 0%; display: block;}

/*--area5--------------------------------*/
.title5{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title5m{ width: 80%; margin: 0 auto; padding: 0px 1% 0px 1%; position: relative;display: block;}

.more5{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.more5m{ width: 80%; margin: 0 auto; padding: 0px 1% 0px 1%; position: relative;display: block;}

/*--area6--------------------------------*/
.title6{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title6m{ width: 80%; margin: 0 auto; padding: 0px 1% 0px 1%; position: relative;display: block;}

.book6{flex-wrap: wrap; justify-content: center; /* 子元素水平置中 */ padding: 0px 0% 0px 0%; margin-top: 0px; display: flex;}
.book6 li{ width: 80%; padding: 0px 0% 0px 0%; display: block;}

.more6{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.more6m{ width: 80%; margin: 0 auto; padding: 0px 1% 0px 1%; position: relative;display: block;}


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

.book7{flex-wrap: wrap; justify-content: center; /* 子元素水平置中 */ padding: 0px 0% 0px 0%; margin-top: 0px; display: flex;}
.book7 li{ width: 80%; padding: 0px 0% 0px 0%; display: block;}


/*--767up(Pc)------------------------*/
@media screen and (min-width:767px) {
    .FOOTER_BG{ padding-bottom: 20px !important;}
    .pcNo{ display: none;}
    .mNo{ display: block;}
	
    header{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250101_yuri/images/bg_header.jpg); background-position: top center; background-size: cover; background-attachment: fixed;}
    .bgHeaderBao{ display: block;}
	.header1{ position: absolute; top: 1.2%; left: 8.2%; width: 50% !important; display: block; z-index: 1;}
	.header2{ position: absolute; top: 39%; left: 53%; width: 45% !important; display: block; z-index: 1;}
	.header3{ position: absolute; top: 24%; left: 55%; width: 45% !important; display: block; z-index: 1;}
	.header4{ position: absolute; top: 6%; left: 37%; width: 53% !important; display: block; z-index: 1;}
	.header5{ position: absolute; top: 30%; left: 5%; width: 23% !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/20260130_peenky/images/bg_00.png);}
    .areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260130_peenky/images/bg_01.png); background-size: cover;}
    .areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260130_peenky/images/bg_02.png); background-size: cover;}
	.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260130_peenky/images/bg_03.png); background-size: cover;}
	.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260130_peenky/images/bg_04.png); background-size: cover;}
    .areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260130_peenky/images/bg_05.png); background-size: cover;}
	.areaBg6{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260130_peenky/images/bg_06.png); background-size: cover;}
	.areaBg7{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260130_peenky/images/bg_07.png); background-size: cover;}
	.areaBg8{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260130_peenky/images/bg_08.png); background-size: cover;}
	
    /*--contain-----------------------------------------*/
    .areaWidth{ max-width: 1200px; padding-top: 0;}
	.areaWidth1{ max-width: 1200px;  margin: 0 auto; padding: 100px 0% 100px 0%; margin-top: 0px; margin-bottom: 0px; }
    .areaWidth2{ max-width: 1000px;  margin: 0 auto; padding: 100px 0% 150px 0%; margin-top: 0px; margin-bottom: 0px; }
	.areaWidth3{ max-width: 1200px;  margin: 0 auto; padding: 100px 0% 100px 0%; margin-top: 0px; margin-bottom: 0px; }
	.areaWidth4{ max-width: 1200px;  margin: 0 auto; padding: 100px 0% 100px 0%; margin-top: 0px; margin-bottom: 0px; }
	.areaWidth5{ max-width: 1200px;  margin: 0 auto; padding: 100px 0% 100px 0%; margin-top: 0px; margin-bottom: 0px; }
	.areaWidth6{ max-width: 1200px;  margin: 0 auto; padding: 100px 0% 100px 0%; margin-top: 0px; margin-bottom: 0px; }
	.areaWidth7{ max-width: 1400px;  margin: 0 auto; padding: 100px 0% 100px 0%; margin-top: 0px; margin-bottom: 0px; }
	.areaWidth8{ max-width: 1200px;  margin: 0 auto; padding: 100px 0% 100px 0%; margin-top: 0px; margin-bottom: 0px; }
	
    .mainTitle{ width: 56%;}
    .mainTitle2{ width: 75%; max-width: 1000px;}

    /*活動說明-----------------------------------------*/
	.gameInfo1_title{ width: 38%; margin: 0 ; margin-right: 0px ; padding: 50px 0px 10px 28.5%; display: block;}
	
	.gameInfo1{ padding: 0% 0% 0% 30%; border-radius: 10px; font-size: 1.5rem; color: #383838; font-weight: bold;}
    .gameInfo1 li{ margin: 5px; /*list-style-type:decimal-leading-zero; 編號前面+0，如01、02、03...*/ }
    .gameInfo1 li a{ color: #0e73a8; text-decoration: none; /* 移除下劃線 */}
	
    /*--area1--------------------------------*/
	.title1{ width: 85%; padding: 0px 30px 0px 0px; display: block;}
	.title1m{ width: 85%; padding: 0px 30px 0px 0px; display: none;}
	
	.book1{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book1 li{ width: 40%; padding: 50px 0px 0px 0px; display: block;}
	
	.more1{ width: 40%; padding: 50px 0px 0px 0px; display: block;}
	
    /*--area2--------------------------------*/
	.book2{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book2 li{ width: 40%; padding: 50px 0px 0px 0px; display: block;}
	.book2m{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: none;}
    .book2m li{ width: 40%; padding: 50px 0px 0px 0px; display: none;}
	
	/*--area3--------------------------------*/
	.title3{ width: 100%; padding: 0px 0px 0px 0px; display: block;}
	.title3m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}
	
	.book3{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book3 li{ width: 25%; padding: 0px 0px 0px 0px; display: block;}
	
	.more3{ width: 100%; padding: 0px 0px 0px 0px; display: block;}
	.more3m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}
	
	/*--area4--------------------------------*/
	.title4{ width: 100%; padding: 0px 0px 0px 0px; display: block;}
	.title4m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}
	
	.more4{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 50px; border-radius: 10px; display: flex;}
    .more4 li{ width: 40%; padding: 0px 10px 0px 10px; display: block;}	
	
	/*--area5--------------------------------*/
	.title5{ width: 100%; padding: 0px 0px 0px 0px; display: block;}
	.title5m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}
	
	.more5{ width: 100%; padding: 0px 0px 0px 0px; display: block;}
	.more5m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}	
		
	/*--area6--------------------------------*/
	.title6{ width: 100%; padding: 0px 0px 0px 0px; display: block;}
	.title6m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}
	
	.book6{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book6 li{ width: 45%; padding: 0px 2.5% 0px 2.5%; display: block;}
		
	.more6{ width: 100%; padding: 0px 0px 0px 0px; display: block;}
	.more6m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

    /*--area7--------------------------------*/
	.title7{ width: 70%; padding: 0px 0px 0px 0px; display: block;}
	.title7m{ width: 70%; padding: 0px 0px 0px 0px; display: none;}
	
	.book7{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book7 li{ width: 30%; padding: 0px 0px 0px 0px; display: block;}
	
	/*--滑鼠滑入效果(縮小)--------------------------------*/
    .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;}	
    /*sweetAlert*/

}

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

}

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

}