@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/2025/20250916_gagaoolala/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/20250916_gagaoolala/images/bg_01m.png);}
.areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_gagaoolala/images/bg_01m.png);}
.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_gagaoolala/images/bg_02m.png);}
.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_gagaoolala/images/bg_03m.png);}
.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_gagaoolala/images/bg_04m.png);}
.areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_gagaoolala/images/bg_05m.png);}
.areaBg6{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_gagaoolala/images/bg_06m.png);}
.areaBg7{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_gagaoolala/images/bg_07m.png);}
.areaBg8{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_gagaoolala/images/bg_08m.png);}

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

/*--測驗前言-----------------------------------------*/
.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);} }

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

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

.highlight1 {
  font-size: 1.2rem;
  color: #bababa; /* 顏色 */
  font-weight: bold; /* 可選：讓文字加粗 */
}	
.highlight2 {
  color: #b58b54; /* 顏色 */
  font-weight: bold; /* 可選：讓文字加粗 */
}

/* popup --------------------------------------------------- */
.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;}
.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;}
.popBox .popClose{ display:block; position:absolute; top:9px; right:10px; width:25px; height:25px; background:url(icon-close.png) no-repeat; background-size:25px 25px; cursor:pointer;}
.popBox h2{ padding:8px 1%; margin-bottom:5px; font-size:1.6rem; background-color:#ad3c41; color:#ffffff; background-color:#efefef; color:#636363; font-weight:normal; text-align:center;}
.popBox ul{ list-style:none;}

/* popup按鈕樣式 */
.ppBtn{ display:block; font-size:1.5rem; cursor:pointer; border-radius:2px; line-height:45px; text-align: center;}
.popBtn{ display:flex;}
.popBtn a{ flex:1; width:100%; border:#8d1a91 2px solid; background-color: #d4cfbc; margin-right:4%; font-size:1.8rem; color: #8d1a91; font-weight: bold; font-family:Arial, Verdana, Microsoft JhengHei, sans-serif; outline:none;}
.popBtn a:last-child{ margin-right:0;}
.popBtn a:hover{ background-color: #8d1a91; color: #fff;}

/* popup共用提醒 */
.popAlert{ text-align:center; margin-bottom: 40px; padding:15px 2% 25px 2%; color: #8d1a91; font-size:1.8rem; font-weight:bold;}
.ppaRed{ color:#b8292f;}
.popContent{ overflow-y:auto; max-height:70vh; -webkit-overflow-scrolling:touch;}

/*--影片-----------------------------------------*/
.ytVideoBox{ width: 80%; position: relative; z-index: 1; margin: 0 auto; /*-background-color: #b58b54; border: #b58b54 4px solid; 影片邊框-*/}
.video { width: 100%; margin: 0 auto; position: relative;}
.aVideoBox { width: 100%; margin: 0 auto;}
.aVideo { width: 100%; height: 0; padding: 0 0 50% 0; position: relative;}
.aVideo iframe { width: 100%; height: 100%; position: absolute; left: 0; top: 0;}

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

/*--固定盒子：定位--*/
.fixed1{ position: absolute; top: 14%; left: 14%; width: 63%; cursor: pointer;/*滑鼠滑入變手指*/}
.fixed1m{ position: absolute; top: 59%; left: 18%; width: 56%; cursor: pointer;}
.fixed2{ position: absolute; top: 26%; left: 62.6%; width: 12.5%; cursor: pointer;}
.fixed2m{ position: absolute; top: 51%; left: 50%; width: 38%; cursor: pointer;}

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

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

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

.title2_1{ width: 90%; margin: 0 auto; padding: 0px 1% 0px 1%; position: relative; display: none;}
.title2_1m{ width: 90%; margin: 0 auto; padding: 0px 1% 0px 1%; position: relative; display: block;}

.title2_2{ width: 90%; margin: 0 auto; padding: 0px 1% 0px 1%; position: relative; display: none;}
.title2_2m{ width: 90%; margin: 0 auto; padding: 0px 1% 0px 1%; position: relative; display: block;}

.title2_1_1{ width: 90%; margin: 0 auto; padding: 0px 1% 0px 1%; position: relative; display: block;}

.more2_1_1{ width: 90%; margin: 0 auto; padding: 0px 1% 0px 1%; position: relative; display: none;}
.more2_1_1m{ width: 90%; margin: 0 auto; padding: 20px 1% 0px 1%; position: relative; display: block;}

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

.book2{flex-wrap: wrap; justify-content: center; /* 子元素水平置中 */ padding: 0px 1% 0px 1%; margin-top: 0px; display: none;}
.book2 li{ width: 0%; padding: 0px 0% 0px 0%; display: none;}
.book2m{flex-wrap: wrap; justify-content: center; /* 子元素水平置中 */ padding: 0px 12% 0px 12%; margin-top: 20px; display: flex;}
.book2m li{ width: 50%; padding: 0px 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 1% 30px 1%; 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% 30px 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;}

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

/*--area8--------------------------------*/
.title8{ width: 70%; margin: 0 auto; padding: 50px 1% 50px 1%; position: relative;display: block;}

/*swiper 設定----------*/
.swiperBox1{ width: 80%;/*寬度自訂*/ margin: 0 auto;/*置中*/ padding: 0px 5px 0px 5px;/*箭頭放在圖外面:依照箭頭跟點點的大小調整數值*/ position: relative;}
/*點點樣式設定*/
.swiperBox1 .swiper-pagination-bullet{ background: #ffffff; opacity: 1;}
/*點點被選到時的顏色*/
.swiperBox1 .swiper-pagination-bullet-active{ background: #ffffff;}
/*設定箭頭顏色*/
.swiperBox1 .swiper-button-next:after, .swiperBox1 .swiper-button-prev:after,
.swiperBox1 .swiper-button-next, .swiperBox1 .swiper-button-prev{ color: #ffffff; font-size: 40px;/*設定箭頭大小*/}
/*箭頭位置設定*/
.swiperBox1 .swiper-button-next, .swiper-button-prev{ top: calc(50% - 20px);/*扣掉上面.swiperBox的padding-bottom的40px的一半=20px*//*這樣才會置中*/}

/*swiper2 設定----------*/
.swiperBox2{ width: 70%;/*寬度自訂*/ margin: 0 auto;/*置中*/ padding: 0px 5px 0px 5px;/*箭頭放在圖外面:依照箭頭跟點點的大小調整數值*/ position: relative;}
/*點點樣式設定*/
.swiperBox2 .swiper-pagination-bullet{ background: #ffffff; opacity: 1;}
/*點點被選到時的顏色*/
.swiperBox2 .swiper-pagination-bullet-active{ background: #ffffff;}
/*設定箭頭顏色*/
.swiperBox2 .swiper-button-next:after, .swiperBox2 .swiper-button-prev:after,
.swiperBox2 .swiper-button-next, .swiperBox2 .swiper-button-prev{ color: #ffffff; font-size: 40px;/*設定箭頭大小*/}
/*箭頭位置設定*/
.swiperBox2 .swiper-button-next, .swiper-button-prev{ top: calc(50% - 20px);/*扣掉上面.swiperBox的padding-bottom的40px的一半=20px*//*這樣才會置中*/}

/*swiper3 設定----------*/
.swiperBox3{ width: 90%;/*寬度自訂*/ margin: 0 auto;/*置中*/ padding: 0px 40px 0px 40px;/*箭頭放在圖外面:依照箭頭跟點點的大小調整數值*/ position: relative;}
/*點點樣式設定*/
.swiperBox3 .swiper-pagination-bullet{ background: #ffffff; opacity: 1;}
/*點點被選到時的顏色*/
.swiperBox3 .swiper-pagination-bullet-active{ background: #ffffff;}
/*設定箭頭顏色*/
.swiperBox3 .swiper-button-next:after, .swiperBox2 .swiper-button-prev:after,
.swiperBox3 .swiper-button-next, .swiperBox2 .swiper-button-prev{ color: #ffffff; font-size: 40px;/*設定箭頭大小*/}
/*箭頭位置設定*/
.swiperBox3 .swiper-button-next, .swiper-button-prev{ top: calc(50% - 20px);/*扣掉上面.swiperBox的padding-bottom的40px的一半=20px*//*這樣才會置中*/}

/*swiper4 設定----------*/
.swiperBox4{ width: 70%;/*寬度自訂*/ margin: 0 auto;/*置中*/ padding: 0px 40px 0px 40px;/*箭頭放在圖外面:依照箭頭跟點點的大小調整數值*/ position: relative;}
/*點點樣式設定*/
.swiperBox4 .swiper-pagination-bullet{ background: #ffffff; opacity: 1;}
/*點點被選到時的顏色*/
.swiperBox4 .swiper-pagination-bullet-active{ background: #ffffff;}
/*設定箭頭顏色*/
.swiperBox4 .swiper-button-next:after, .swiperBox4 .swiper-button-prev:after,
.swiperBox4 .swiper-button-next, .swiperBox4 .swiper-button-prev{ color: #ffffff; font-size: 50px;/*設定箭頭大小*/}
/*箭頭位置設定*/
.swiperBox4 .swiper-button-next, .swiper-button-prev{ top: calc(50% - 20px);/*扣掉上面.swiperBox的padding-bottom的40px的一半=20px*//*這樣才會置中*/}

/*swiper5 設定----------*/
.swiperBox5{ width: 100%;/*寬度自訂*/ margin: 0 auto;/*置中*/ padding: 10px 50px 0px 50px;/*箭頭放在圖外面:依照箭頭跟點點的大小調整數值*/ /*position: relative;*/}
/*點點樣式設定*/
.swiperBox5 .swiper-pagination-bullet{ background: #ffffff; opacity: 1;}
/*點點被選到時的顏色*/
.swiperBox5 .swiper-pagination-bullet-active{ background: #ffffff;}
/*設定箭頭顏色*/
.swiperBox5 .swiper-button-next:after, .swiperBox5 .swiper-button-prev:after,
.swiperBox5 .swiper-button-next, .swiperBox5 .swiper-button-prev{ color: #ffffff; font-size: 80px;/*設定箭頭大小*/}
/*箭頭位置設定*/
.swiperBox5 .swiper-button-next, .swiper-button-prev{ top: calc(50% - 20px);/*扣掉上面.swiperBox的padding-bottom的40px的一半=20px*//*這樣才會置中*/}

/*--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/2025/20250916_gagaoolala/images/bg_01.png);}
    .areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_gagaoolala/images/bg_01.png); background-size: cover;}
    .areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_gagaoolala/images/bg_02.png); background-size: cover;}
	.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_gagaoolala/images/bg_03.png); background-size: cover;}
	.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_gagaoolala/images/bg_04.png); background-size: cover;}
    .areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_gagaoolala/images/bg_05.png); background-size: cover;}
	.areaBg6{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_gagaoolala/images/bg_06.png); background-size: cover;}
	.areaBg7{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_gagaoolala/images/bg_07.png); background-size: cover;}
	.areaBg8{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250916_gagaoolala/images/bg_08.png); background-size: cover;}
	
    /*--contain-----------------------------------------*/
    .areaWidth{ max-width: 1023px; padding-top: 0;}
	.areaWidth1{ max-width: 1100px;  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: 1000px;  margin: 0 auto; padding: 100px 0% 150px 0%; margin-top: 0px; margin-bottom: 0px; }
	.areaWidth4{ max-width: 1000px;  margin: 0 auto; padding: 100px 0% 100px 0%; margin-top: 0px; margin-bottom: 0px; }
	.areaWidth5{ max-width: 1000px;  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: 1200px;  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;}

    /*活動說明2-----------------------------------------*/
    .noticeBox2{ max-width: 100%;}/*20240704因為活動說明也分開自己一塊,所以移除margin-top,不然會多一塊空白間距*/
    .noticeBox2 h4{ margin-left: 0%; }
    .noticeList2{ padding: 0px 8% 50px 13%; font-size: 1.5rem; border-width: 3px;}
	
    /*活動說明-----------------------------------------*/
    .noticeBox{ max-width: 100%;}/*20240704因為活動說明也分開自己一塊,所以移除margin-top,不然會多一塊空白間距*/
    .noticeBox h4{ margin-left: 0%; }
    .noticeList{ padding: 100px 13% 100px 13%; font-size: 1.5rem; border-width: 3px;}	
	.highlight1 {
      font-size: 1.5rem;
      color: #bababa; /* 顏色 */
      font-weight: bold; /* 可選：讓文字加粗 */
     }	
	
	.highlight2 {
      color: #b58b54; /* 顏色 */
      font-weight: bold; /* 可選：讓文字加粗 */
    }
		
	/* popup --------------------------------------------------- */
	.popBox{ width:33%; margin:50px auto; padding:40px 20px 20px;}

	/*popup按鈕樣式*/
	.popBtn button{ margin-right:2%;}
	.popContent{ max-height:55vh;}
	
	/*--影片-----------------------------------------*/
	.ytVideoBox{ width: 80%; position: relative; z-index: 1; margin: 0 auto;/*- background-color: #b58b54; border: #b58b54 4px solid; 影片邊框-*/}
	.video { width: 100%; margin: 0 auto; position: relative;}
	.aVideoBox { width: 100%; margin: 0 auto;}
	.aVideo { width: 100%; height: 0; padding: 0 0 50% 0; position: relative;}
	.aVideo iframe { width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
	
    /*--area1--------------------------------*/
	.title1{ width: 50%; padding: 0px 0px 0px 0px; display: block;}
	
	.book1{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book1 li{ width: 20%; padding: 0px 0px 0px 0px; display: block;}
	
    /*--area2--------------------------------*/
	.title2{ width: 100%; padding: 0px 0px 0px 0px; display: block;}
	.title2m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}
	
	.title2_1{ width: 100%; padding: 0px 0px 0px 0px; display: block;}
	.title2_1m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}
	
	.title2_2{ width: 100%; padding: 100px 0px 0px 0px; display: block;}
	.title2_2m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}
	
	.title2_1_1{ width: 40%; padding: 0px 0px 0px 200px; display: block;}
	
	.more2_1_1{ width: 80%; padding: 80px 0px 0px 0px; display: block;}
    .more2_1_1m{ width: 80%; padding: 80px 0px 0px 0px; display: none;}
	
    .bookStyle2{ display: flex; gap: 10px;}/*間距固定10px,也可以設%*/
    .bookStyle2 li{ flex: 1;}
    .bookStyle2 li:nth-child(1){ flex: 1.55;}/*第一本比較大(可以是小數點,也可以整數)*/
	
	/*--area3--------------------------------*/
	.title3{ width: 70%; padding: 20px 0px 20px 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: 70%; padding: 50px 0px 20px 0px; display: block;}
	.more3m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

    /*--area4--------------------------------*/
	.title4{ width: 100%; padding: 50px 0px 50px 0px; display: block;}
	.title4m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}
	
	/*--area7--------------------------------*/
	.book7{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book7 li{ width: 25%; padding: 0px 0px 0px 0px; display: block;}
	
	/*--area8--------------------------------*/
	.title8{ width: 70%; padding: 50px 0px 20px 0px; display: block;}
	
	
/*swiper 設定----------*/
.swiperBox1{ width: 100%;/*寬度自訂*/ margin: 0 auto;/*置中*/ padding: 10px 0px 0px 0px;/*箭頭放在圖外面:依照箭頭跟點點的大小調整數值*/ position: relative;}
/*點點樣式設定*/
.swiperBox1 .swiper-pagination-bullet{ background: #ffffff; opacity: 1;}
/*點點被選到時的顏色*/
.swiperBox1 .swiper-pagination-bullet-active{ background: #ffffff;}
/*設定箭頭顏色*/
.swiperBox1 .swiper-button-next:after, .swiperBox1 .swiper-button-prev:after,
.swiperBox1 .swiper-button-next, .swiperBox1 .swiper-button-prev{ color: #ffffff; font-size: 80px;/*設定箭頭大小*/}
/*箭頭位置設定*/
.swiperBox1 .swiper-button-next, .swiper-button-prev{ top: calc(50% - 20px);/*扣掉上面.swiperBox的padding-bottom的40px的一半=20px*//*這樣才會置中*/}

/*swiper2 設定----------*/
.swiperBox2{ width: 100%;/*寬度自訂*/ margin: 0 auto;/*置中*/ padding: 10px 0px 0px 0px;/*箭頭放在圖外面:依照箭頭跟點點的大小調整數值*/ position: relative;}
/*點點樣式設定*/
.swiperBox2 .swiper-pagination-bullet{ background: #ffffff; opacity: 1;}
/*點點被選到時的顏色*/
.swiperBox2 .swiper-pagination-bullet-active{ background: #ffffff;}
/*設定箭頭顏色*/
.swiperBox2 .swiper-button-next:after, .swiperBox2 .swiper-button-prev:after,
.swiperBox2 .swiper-button-next, .swiperBox2 .swiper-button-prev{ color: #ffffff; font-size: 80px;/*設定箭頭大小*/}
/*箭頭位置設定*/
.swiperBox2 .swiper-button-next, .swiper-button-prev{ top: calc(50% - 20px);/*扣掉上面.swiperBox的padding-bottom的40px的一半=20px*//*這樣才會置中*/}

/*swiper3 設定----------*/
.swiperBox3{ width: 100%;/*寬度自訂*/ margin: 0 auto;/*置中*/ padding: 10px 50px 0px 50px;/*箭頭放在圖外面:依照箭頭跟點點的大小調整數值*/ position: relative;}
/*點點樣式設定*/
.swiperBox3 .swiper-pagination-bullet{ background: #ffffff; opacity: 1;}
/*點點被選到時的顏色*/
.swiperBox3 .swiper-pagination-bullet-active{ background: #ffffff;}
/*設定箭頭顏色*/
.swiperBox3 .swiper-button-next:after, .swiperBox2 .swiper-button-prev:after,
.swiperBox3 .swiper-button-next, .swiperBox2 .swiper-button-prev{ color: #ffffff; font-size: 80px;/*設定箭頭大小*/}
/*箭頭位置設定*/
.swiperBox3 .swiper-button-next, .swiper-button-prev{ top: calc(50% - 20px);/*扣掉上面.swiperBox的padding-bottom的40px的一半=20px*//*這樣才會置中*/}

/*swiper4 設定----------*/
.swiperBox4{ width: 100%;/*寬度自訂*/ margin: 0 auto;/*置中*/ padding: 10px 50px 0px 50px;/*箭頭放在圖外面:依照箭頭跟點點的大小調整數值*/ position: relative;}
/*點點樣式設定*/
.swiperBox4 .swiper-pagination-bullet{ background: #ffffff; opacity: 1;}
/*點點被選到時的顏色*/
.swiperBox4 .swiper-pagination-bullet-active{ background: #ffffff;}
/*設定箭頭顏色*/
.swiperBox4 .swiper-button-next:after, .swiperBox4 .swiper-button-prev:after,
.swiperBox4 .swiper-button-next, .swiperBox4 .swiper-button-prev{ color: #ffffff; font-size: 80px;/*設定箭頭大小*/}
/*箭頭位置設定*/
.swiperBox4 .swiper-button-next, .swiper-button-prev{ top: calc(50% - 20px);/*扣掉上面.swiperBox的padding-bottom的40px的一半=20px*//*這樣才會置中*/}

/*swiper5 設定----------*/
.swiperBox5{ width: 100%;/*寬度自訂*/ margin: 0 auto;/*置中*/ padding: 10px 50px 0px 50px;/*箭頭放在圖外面:依照箭頭跟點點的大小調整數值*/ position: relative;}
/*點點樣式設定*/
.swiperBox5 .swiper-pagination-bullet{ background: #ffffff; opacity: 1;}
/*點點被選到時的顏色*/
.swiperBox5 .swiper-pagination-bullet-active{ background: #ffffff;}
/*設定箭頭顏色*/
.swiperBox5 .swiper-button-next:after, .swiperBox5 .swiper-button-prev:after,
.swiperBox5 .swiper-button-next, .swiperBox5 .swiper-button-prev{ color: #ffffff; font-size: 80px;/*設定箭頭大小*/}
/*箭頭位置設定*/
.swiperBox5 .swiper-button-next, .swiper-button-prev{ top: calc(50% - 20px);/*扣掉上面.swiperBox的padding-bottom的40px的一半=20px*//*這樣才會置中*/}
	
	/*--滑鼠滑入效果(縮小)--------------------------------*/
    .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) {

}