@charset "utf-8";
/* 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;}

.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/2025/20251109_1111_wezi/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-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251109_1111_wezi/images/bg_02.png);}
.areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251109_1111_wezi/images/bg_02.png);}
.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251109_1111_wezi/images/bg_02.png);}
.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251109_1111_wezi/images/bg_03.png);}

/*--contain-----------------------------------------*/
.areaWidth1{ position: relative; width: 100%; padding: 50px 0% 0px 0%; margin-top: 0px; margin-bottom: 0px; }
.areaWidth2{ position: relative; width: 100%; padding: 0px 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; }

/*--測驗前言-----------------------------------------*/
.gameInfo img{ display: block; width: 100%;}
.gameInfo{ width: 80%; margin: 15px auto 25px auto;}
.gameSay{}
.gameGiftList{}
.gameGiftList > li{ margin-top: 10px;}

/*開始測驗按鈕動畫*/
.gameStart{ animation: scaleInOut 0.8s infinite;}
@keyframes scaleInOut{ 0% { transform: scale(1);} 50% { transform: scale(0.9);} 100% { transform: scale(1);} }

/*活動說明-----------------------------------------*/
.noticeBox{ width: 100%; margin: 0 auto 0 auto;}/*20240704因為活動說明也分開自己一塊,所以移除margin-top,不然會多一塊空白間距*/
.noticeBox h4{ margin: 0px 0% 10px 0%; font-size: 2.5rem; color: #72867a; font-weight: bold; text-align: left;}
.noticeList{ padding: 25px 10% 45px 16%; font-size: 1.4rem; font-weight: bold; color: #72867a;  border-radius: 0px;}
.noticeList > li{ list-style: disc; margin-bottom: 10px; line-height: 1.3;}
.noticeList > li:last-child{ margin-bottom: 0;}

.highlight {
  color: #72867a; /* 顏色 */
  font-weight: bold; /* 可選：讓文字加粗 */
}
.highlight2 {
  color: #4064ad; /* 顏色 */
  font-weight: bold; /* 可選：讓文字加粗 */
}

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

.book2{flex-wrap: wrap; justify-content: center; /* 子元素水平置中 */ padding: 0px 10% 50px 10%; margin-top: 0px; display: flex;}
.book2 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% 20px 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: 80%; padding: 0px 0% 0px 0%; display: block;}

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

/*--swiper-----------------------------------------*/
.swiper_title1{ width: 60%; margin: 0 auto; padding: 0px 0% 20px 0%; position: relative; justify-content: center;/*水平置中*/ align-items: center;/*垂直置中*/ display: block;}

/*--pop-----------------------------------------*/
.sweetBtnLink, .sweetBtnClose {
  display: inline-block;
  padding: 8px 20px;
  font-size: 1.6rem;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}

.sweetBtnLink {
  background-color: #205298; /* 主色按鈕 */
}

.sweetBtnClose {
  background-color: #999; /* 灰色按鈕 */
}

.sweetBtnLink:hover, .sweetBtnClose:hover {
  opacity: 0.85;
}


/*--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: 48.2%; left: 8.8%; width: 21.6% !important; display: block; z-index: 1;}
	.header2{ position: absolute; top: 48.2%; left: 25.2%; width: 26% !important; display: block; z-index: 1;}
	.header3{ position: absolute; top: 48.2%; left: 47.5%; width: 16.7% !important; display: block; z-index: 1;}
	.header4{ position: absolute; top: 48.2%; left: 64.2%; width: 25.5% !important; display: block; z-index: 1;}
	.header5{ position: absolute; top: 48.2%; left: 8.8%; width: 21.6% !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/2025/20251109_1111_wezi/images/bg_03.png); background-size: cover;}
    .areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251109_1111_wezi/images/bg_03.png); background-size: cover;}
    .areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251109_1111_wezi/images/bg_02.png); background-size: cover;}
	.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251109_1111_wezi/images/bg_03.png); background-size: cover;}

    /*--contain-----------------------------------------*/
    .areaWidth{ max-width: 1023px; padding-top: 0;}
    .areaWidth2{ max-width: 1000px;  margin: 0 auto; padding: 100px 0% 150px 0%; margin-top: 0px; margin-bottom: 0px; }
	.areaWidth3{ max-width: 1300px;  margin: 0 auto; padding: 0px 0% 100px 0%; margin-top: 0px; margin-bottom: 0px; }

    .mainTitle{ width: 56%;}
    .mainTitle2{ width: 75%; max-width: 1000px;}

    /*活動說明-----------------------------------------*/
    .noticeBox{ max-width: 80%;}/*20240704因為活動說明也分開自己一塊,所以移除margin-top,不然會多一塊空白間距*/
    .noticeBox h4{ margin-left: 0%; }
    .noticeList{ padding: 100px 8% 100px 25%; font-size: 1.5rem; border-width: 3px;}

    /*--area2--------------------------------*/
	.title2{ width: 100%; padding: 50px 0px 20px 0px; display: block;}
	.title2m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

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

	.title22{ width: 80%; padding: 50px 0px 0px 0px; display: block;}
	.title22m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.book22{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book22 li{ width: 25%; padding: 0px 0px 0px 0px; display: block;}

	/*--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: 33%; padding: 0px 0px 0px 0px; display: block;}

	.more3{ width: 50%; padding: 50px 0px 0px 0px; display: block;}
	.more32{ width: 50%; padding: 0px 0px 0px 0px; display: block;}
	.more32m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	/*--滑鼠滑入效果(縮小)--------------------------------*/
    .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) {

}