@charset "utf-8";
html{ font-size: 62.5%;} 
body{ font: 62.5% 微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif; line-height: 1;}

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

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

/*--content--------------------------------*/
.areaBox{ padding: 0px 0; background-position: top center; background-size: cover;}
.areaWidth1{ padding: 50px 0% 50px 0%;}
.areaWidth2{ padding: 20px 1% 50px 1%;}
.areaWidth3{ padding: 0px 0% 50px 0%;}
.areaWidth4{ padding: 50px 1% 50px 1%;}
.areaWidth5{ padding: 50px 0% 50px 0%;}

/*--video--------------------------------*/
.video { width:100%; margin:0 auto; position:relative;}
.aVideoBox { width:100%; margin:0 auto;}
.aVideo { width:100%; height:0; padding:0 0 56.25% 0; position:relative;}
.aVideo iframe { width:100%; height:100%; position:absolute; left:0; top:0;}

/*壓背景圖*/
.videoWidth{ width: 100%;/*0119看手機版影片要多大*/ margin: 0 auto;/*影片置中*/}
.videoBgBox{ position: relative; padding: 34% 13% 7% 11%;/*0119看間距要多少*/}
.videoBg{ position: absolute; top: 0; left: 0;}

.videoTicket{ max-width: 400px; margin: 0 auto; padding-top: 0px; padding-bottom: 0px; display: block;}
.videoTicketBtn{ display: block; width: 80%; margin: 0 auto;}

/*0719新的video*/
/*純css底色*/
.videoBgStyle1{ padding: 10px 12% 20px 12%;/*影片與背景間距*/ background-color: #2e3043;/*背景色*/ border-radius: 0 0 30px 30px;/*下方導圓角*/}
/*壓圖片背景*/
.videoBgPic{ padding: 2% 12% 5% 12%;/*影片與背景間距*/ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250716_omniscientreader/images/videoBg1.png); background-size: 100%;/*背景圖等比例縮放*/ background-repeat: no-repeat;}

.videoTitle{ width: 100%;}
.videoTitle img{ display: block; width: 100%;}

.videoTitle.pc{ display: none;}/*手機版-隱藏電腦標題*/
.videoTitle.m{ display: block;}/*手機版-顯示手機標題*/
/*end-0719新的video*/

/*notice----------*/
.noticeTitle{ margin-top: 3%; margin-bottom: 3%;}
.noticeTime{ width: 80%; margin: 0 auto; padding: 2px 6px; background-color: #fff335; font-size: 1.5rem; text-align: center; font-weight: bold; }
.noticeList{ margin-top: 0px; padding: 15px 30px 0px 50px; color: #071539; 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;}

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

.youtube{ width: 100%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: none;}
.youtubem{ width: 100%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: block;}

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

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

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

.book31{flex-wrap: wrap; justify-content: center; padding: 0px 1% 0px 1%; margin-top: 0px; border-radius: 10px; display: none;}
.book31 li{ width: 0%; margin-bottom: 0px; display: none;}
.book31m{flex-wrap: wrap; justify-content: center; padding: 0px 1% 0px 1%; margin-top: 0px; border-radius: 10px; display: flex;}
.book31m li{ width: 85%; margin-bottom: 0px; display: flex;}

.book32{flex-wrap: wrap; justify-content: center; padding: 0px 1% 0px 1%; margin-top: 0px; border-radius: 10px; display: none;}
.book32 li{ width: 70%; margin-bottom: 0px; display: none;}
.book32m{flex-wrap: wrap; justify-content: center; padding: 0px 1% 0px 1%; margin-top: 0px; border-radius: 10px; display: flex;}
.book32m li{ width: 70%; margin-bottom: 0px; display: flex;}
	
/*--area4--------------------------------*/
.title4{ width: 80%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: none;}
.title4m{ width: 80%; margin: 0 auto; padding: 0px 0 0px -20px; position: relative; z-index: 1; display: block;}

.title41{ width: 90%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: none;}
.title41m{ width: 90%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: block;}

.title42{ width: 80%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: none;}
.title42m{ width: 80%; margin: 0 auto; padding: 20px 0 20px 0px; position: relative; z-index: 1; display: block;}

.title43{ width: 80%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: none;}
.title43m{ width: 80%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: block;}

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

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

/*--area5--------------------------------*/
.book5{flex-wrap: wrap; justify-content: center; padding: 0px 1% 0px 1%; margin-top: 0px; border-radius: 10px; display: flex;}
.book5 li{ width: 80%; margin-bottom: 30px; display: flex;}

/*--bookCaseBox--------------------------------*/
.bookCaseBox{display: none;}
/* 
.bookCaseBox{ margin-top: 20px; }
.bookCaseBox img{ display: block; width: 100%;}
.bookCaseBox > li{ position: relative;} 
*/

/*--picHover picBox 滑鼠反應-----------------------------------------*/
.picBox .pic{ display:block;}
.picBox .picHover{ display:none;} /*一開始隱藏hover的圖片*/

.picBox:hover .pic{ display:none;} /*滑入後隱藏一開始的圖片*/
.picBox:hover .picHover{ display:block;} /*滑入後顯示hover的圖片*/
	
/*--area1--------------------------------*/
.areaBg0{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250716_omniscientreader/images/bg_01m.png);}
.areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250716_omniscientreader/images/bg_03m.png);}
.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250716_omniscientreader/images/bg_02m.png);}
.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250716_omniscientreader/images/bg_02m.png);}
.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250716_omniscientreader/images/bg_01m.png);}
.areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250716_omniscientreader/images/bg_03m.png);}

/*--gameInfo--------------------------------*/
.gameInfo{ padding: 5% 5% 10% 10%; border-radius: 9px; font-size: 1rem; color: #f1e649; font-weight: bold;}
.gameInfo li{ margin: 5px; list-style: disc;}
.gameInfo li a{ color: #f1e649; text-decoration: underline;}

/*--fixedBtnBox-----------------------------------------*/
.fixedBtnBox{ position: fixed; bottom: 0; left: 50px; z-index: 101; transform: translateX(-200%); transition: transform 0.8s;}
.fixedBtnBoxShow{ transform: translateX(0); transition: transform 0.8s;}
.fixedBtnBox li{ overflow: hidden; margin-bottom: 5px;}
.sideBtn, .sideInfo{ float: left; height: 0px;}
.sideBtn img, .sideInfo img{ height: 100%;}
.sideBtn{ cursor: pointer; position: relative; z-index: 1;}
.sideInfo{ transform:translateX(calc(-100% - 40px));}
.open{ animation:sideBtn 0.5s forwards;}

@keyframes sideBtn{ from {transform:translateX(calc(-100% - 40px));} to {transform:translateX(0);}}

/*--768-1023(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1023px) {}

/*--767up(Pc)------------------------*/
@media screen and (min-width:767px) {
    header{ background-image: url(images/bg_header.jpg); background-position: top center; background-size: cover; background-attachment: fixed;}
    .bgHeaderBao{ display: block;}
	.headerPic{ position: absolute; top:20%; left:0; right: 40%; margin: 0 auto;}	
    .headerTitle{ width: 37%; }
    .headerBao{ top: 54%; left: 5%; width: 28%;}
    .header1{ top: 11%; right: 12%; width: 43%; display: block;}
    .header2{ top: 6%; left: 57%; width: 25%; display: block;}
    .header3{ top: 35%; left: 13%; width: 65%; display: block;}
	.header4{ top: 25%; left: 65%; width: 25%; display: block;}
	.header5{ top: 56%; left: 55%; width: 32%; display: block;}	
	.headerGiftBao,.bgHeaderM{ display: none;}
	
	
    /*--content--------------------------------*/
    .areaBox{ overflow: hidden; padding: 0; background-attachment: fixed;}
    .areaWidth1{ max-width: 1000px;  margin: 0 auto; margin-top: 0px; margin-bottom: 50px; padding-bottom: 0px;}
	.areaWidth2{ max-width: 1200px;  margin: 0 auto; margin-top: 20px; margin-bottom: 0px; padding-bottom: 0px;}
	.areaWidth3{ max-width: 1200px;  margin: 0 auto; margin-top: 0px; margin-bottom: 100px; padding-bottom: 0px;}
	.areaWidth4{ max-width: 1000px;  margin: 0 auto; margin-top: 20px; margin-bottom: 70px; padding-bottom: 0px;}
	.areaWidth5{ max-width: 700px;  margin: 0 auto; margin-top: 20px; margin-bottom: 50px; padding-bottom: 0px;}
	
	/*--中間區塊背景--------------------------------*/
	.middleBg{
       background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250716_omniscientreader/images/bg_00.png);
	   background-attachment: fixed; /* 關鍵設定 */
       background-size: cover;       /* 視需求可加 */
       background-position: center;  /* 視需求可加 */
       }
    .middle{
       border-left: #071539 15px solid;
       border-right: #071539 15px solid;
       max-width: 900px;
       margin: 0 auto;
       }
	
	/*--video--------------------------------*/
    /*壓背景圖*/
    .videoWidth{ width: 90%;/*0119看電腦版影片要多大*/}
    .videoTicketBtn{ max-width: 400px;}
    .videoTicket{ max-width: 500px; margin: 0 auto; padding-top: 0px; padding-bottom: 0px; display: block;}

    /*0719新的video*/
    /*純css底色*/
    .videoBgStyle1{ padding: 10px 12% 40px 12%;/*影片與背景間距*/ background-color: #2e3043;/*背景色*/ border-radius: 0 0 30px 30px;/*下方導圓角*/}
    /*壓圖片背景*/
    .videoBgPic{ padding: 2% 12% 5% 12%;/*影片與背景間距*/ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250716_omniscientreader/images/videoBg1.png); background-size: 100%;/*背景圖等比例縮放*/ background-repeat: no-repeat;}

    .videoTitle{ width: 100%;}
    .videoTitle img{ display: block; width: 100%;}

    .videoTitle.pc{ display: block;}/*電腦版-顯示電腦標題*/
    .videoTitle.m{ display: none;}/*電腦版-隱藏手機標題*/
    /*end-0719新的video*/
	
	/*notice----------*/
    .noticeTitle{ width: 52%; margin: 5% auto 0 auto;}
    .noticeTime{ display: table; width: auto; margin-top: -0.5%; padding: 2px 2px; font-size: 0.6rem;}
    .noticeList{ width: 59%; margin: 0px 0px 0px 0px; padding: 10px 1% 0px 22%; font-size: 1.5rem; text-align:justify;}
    .noticeList li{ margin-bottom: 5px; text-indent: -21px;}
	
	/*--area1--------------------------------*/
	.title1{ width: 50%; padding: 30px 0px 0px 0px; display: block;}
	.title1m{ width: 68.5%; padding: 30px 0px 0px 0px; display: none;}
	
	.youtube{ width: 100%; padding: 0px 0px 0px 0px; display: block;}
	.youtubem{ width: 100%; padding: 0px 0px 0px 0px; display: none;}
	
	/*--area2--------------------------------*/
	.title2{ width: 40%; padding: 20px 0px 50px 0px; display: block;}
	.title2m{ width: 68.5%; 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: 34.25%; padding: 0px 0px 0px 0px; display: block;}
	
	/*--area3--------------------------------*/
	.title3{ width: 68.5%; padding: 0px 0px 0px 0px; display: block;}
	.title3m{ width: 68.5%; padding: 0px 0px 0px 0px; display: none;}
	
	.book31{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book31 li{ width: 30%; padding: 0px 0px 0px 0px; display: block;}
	.book31m{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: none;}
    .book31m li{ width: 30%; padding: 0px 0px 0px 0px; display: none;}
	
	.book32{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book32 li{ width: 23%; padding: 0px 0px 0px 0px; display: block;}
	.book32m{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: none;}
    .book32m li{ width: 23%; padding: 0px 0px 0px 0px; display: none;}
	
	/*--area4--------------------------------*/
	.title4{ width: 68.5%; padding: 0px 0px 0px 0px; display: block;}
	.title4m{ width: 68.5%; padding: 0px 0px 0px 0px; display: none;}
	
	.book41{ flex-wrap: wrap; justify-content: center; padding: 20px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book41 li{ width: 30%; padding: 0px 0px 0px 0px; display: block;}
	
	.title41{ width: 62%; padding: 0px 0px 0px 0px; display: block;}
	.title41m{ width: 68.5%; padding: 0px 0px 0px 0px; display: none;}
	
	.title42{ width: 68.5%; padding: 20px 0px 0px 0px; display: block;}
	.title42m{ width: 68.5%; padding: 0px 0px 0px 0px; display: none;}
	
	.title43{ width: 60%; padding: 0px 0px 0px 0px; display: block;}
	.title43m{ width: 68.5%; padding: 0px 0px 0px 0px; display: none;}
	
	.book42{ flex-wrap: wrap; justify-content: center; padding: 20px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book42 li{ width: 20%; padding: 0px 0px 0px 0px; display: block;}

	/*--area5--------------------------------*/
	.book5{ flex-wrap: wrap; justify-content: center; padding: 20px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book5 li{ width: 30%; padding: 0px 0px 0px 0px; display: block;}
		
	.bookStyle{ display: flex; gap: 20px;/*間距固定10px,也可以設%*/ align-items: center; /*垂直置中*/}
	.bookStyle li{ flex: 1;}
	.bookStyle li:nth-child(1){ flex: 0.9;}/*第一本比較大(可以是小數點,也可以整數)*/
	
	/*--area5--------------------------------*/
	.bookCaseBox{ display: flex; width: 68.5%; margin: 0 auto;}

	/*--滑鼠滑入效果(縮小)--------------------------------*/
    .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*/
    .shareBox{ width: 320px;}
    /*.swal2-footer{ display: none !important;} */
	
    /*--area-----------------------------
	.areaBg0{ background-image: url(images/bg_01.png);}
    .areaBg1{ background-image: url(images/bg_01.png);}
	.areaBg2{ background-image: url(images/bg_01.png);}
	.areaBg3{ background-image: url(images/bg_02.png);}
	.areaBg4{ background-image: url(images/bg_03.png);}
	.areaBg5{ background-image: url(images/bg_01.png);}
     ---*/

	/*--gameInfo--------------------------------*/
	.gameInfo{ padding: 1% 1% 1% 22%; border-radius: 13px; font-size: 1.8rem; color: #f1e649; font-weight: bold;}
    .gameInfo li{ margin: 5px; list-style: disc;}
    .gameInfo li a{ color: #f1e649; text-decoration: underline;}
	
	/*--fixedBtnBox-----------------------------------------*/
    .fixedBtnBox{ bottom: 15%;}
    .fixedBtnBox li{ margin-bottom: 2px;}
    .sideBtn, .sideInfo{ height: 100px;}

}