@charset "utf-8";
html{ font-size: 62.5%;} 
body{ font: 62.5% 微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif; line-height: 1;}
@font-face {
  font-family: '新微軟正黑體';
  unicode-range: U+7db0, U+78A7, U+7B75;
  font-style: normal;
  font-weight: bold;
  src: local(MS Gothic), local(Yu Gothic);
}
@font-face {
  font-family: '新微軟正黑體';
  unicode-range: U+7db0, U+78A7, U+7B75;
  font-style: normal;
  font-weight: normal;
  src: local(微軟正黑體), local(Microsoft JhengHei);
}
body {
  font-family: 'Open Sans', Verdana, Geneva,"新微軟正黑體",'Microsoft JhengHei',"微軟正黑體", sans-serif;
}

/*--header--------------------------------*/
header{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220208/images/bg_00m.png); margin-top: 0px; position: relative; overflow: hidden;}
.bgHeaderBao{ display: none;}
.headera1{ position: absolute; top: 0; left: 0; right: 100; margin: 0 auto;display: none;}
.header1{ position: absolute; top: 5%; left: 1%; right: 1%; margin: 0 auto;display: none;}
.header2{ position: absolute; top: 5%; left: 1%; right: 1%; margin: 0 auto;display: none;}
.header3{ position: absolute; top: 5%; left: 1%; right: 1%; margin: 0 auto;display: none;}
.header4{ position: absolute; top: 5%; left: 1%; right: 1%; margin: 0 auto;display: none;}
.header5{ position: absolute; top: 5%; left: 1%; right: 1%; margin: 0 auto;display: none;}
.header6{ position: absolute; top: 5%; left: 1%; right: 1%; margin: 0 auto;display: none;}
.headera2{ position: absolute; top: 5%; left: 1%; right: 1%; margin: 0 auto;display: none;}
.headera3{ position: absolute; top: 5%; left: 1%; right: 1%; margin: 0 auto;display: none;}
.bgHeaderM{ display: block;}

/*--content--------------------------------*/
.areaBox{ padding: 10px 0; background-position: top center; background-size: cover;}
.areaWidth{ padding: 0 3%;}
.areaWidth3{ padding: 50px 3%;}

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

/*--area--------------------------------*/
.books1{ display: flex; flex-wrap: wrap; justify-content: center; padding: 0px 1% 0px 1%; margin-top: 0px; border-radius: 10px; display: none;}
.books1 li{ width: 50%; margin-bottom: 0px; display: none;}

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

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

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

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

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

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

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

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

.areaBg0{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220208/images/bg_00m.png);}
.areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220208/images/bg_01m.png);}
.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220208/images/bg_02m.png);}
.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220208/images/bg_03m.png);}
.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220208/images/bg_04m.png);}

/*--gameInfo2--------------------------------*/
.gameInfo2{ padding: 0px 20px 0px 30px; border-radius: 0px; font-size: 1.5rem; color: #3c3c3c; font-weight: bold;}
.gameInfo2 li{ margin: 10px; list-style: disc;text-align: justify; }
.gameInfo2 li a{ color: #e1496d;}


/*--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(https://cp-img.bookwalker.com.tw/event/2022/20220208/images/bg_01m.png); background-position: top center; background-size: cover; background-attachment: fixed;}
    .bgHeaderBao{ display: block;}
	.headera1{ top: 19%; left: 28%; width: 45%; display: block;}	
    .header1{ top: 42%; right: 52%; width: 11%; display: block;}
    .header2{ top: 42%; right: 30%; width: 11%; display: block;}
    .header3{ top: 42%; right: 8%; width: 11%; display: block;}
	.header4{ top: 42%; left: 16%; width: 11%; display: block;}
	.header5{ top: 42%; left: 38%; width: 11%; display: block;}	
	.header6{ top: 42%; left: 60%; width: 11%; display: block;}	
	.headera2{ top: 65%; left: 2%;width: 55%; display: block;}
    .headera3{ top: 73%; left: 2%; width: 60%; display: block;}
    .bgHeaderM{ display: none;}
	
    /*--content--------------------------------*/
    .areaBox{ overflow: hidden; padding: 0; background-attachment: fixed;}
    .areaWidth{ max-width: 1500px;  margin: 0 auto; margin-top: 0px; margin-bottom: 0px;  padding-top: 0%; padding-bottom: 0%;}
    .areaWidth1{ max-width: 2000px;  margin: 0 auto; margin-top: 0px; margin-bottom: 0px; padding-top: 10%; padding-bottom: 10%; padding-right: 40%;}
	.areaWidth2{ max-width: 2000px;  margin: 0 auto; margin-top: 0px; margin-bottom: 0px;  padding-top: 10%; padding-bottom: 10%; padding-left: 40%;}
	
	/*--video--------------------------------*/
    /*壓背景圖*/
    .videoWidth{ width: 80%;/*0119看電腦版影片要多大*/}

    .videoTicketBtn{ max-width: 400px;} 
    .videoTicket{ max-width: 500px; margin: 0 auto; padding-top: 50px; padding-bottom: 0px; display: block;}
	
    /*--area--------------------------------*/
    .books1{ flex-wrap: wrap; justify-content: center; padding: 50px 2px 50px 2px; margin-top: 0px; border-radius: 10px; display: flex;}
    .books1 li{ width: 13%; padding: 0px 2px 0px 2px; display: block;}
	
	.books1m{ flex-wrap: wrap; justify-content: center; padding: 0px 2px 0px 2px; margin-top: 0px; border-radius: 10px; display: none;}
    .books1m li{ width: 60%; padding: 50px 2px 0px 2px; display: none;}
	
    .books2{ flex-wrap: wrap; justify-content: center; padding: 50px 2px 0px 2px; margin-top: 0px; border-radius: 10px; display: flex;}
    .books2 li{ width: 20%; padding: 50px 2px 0px 2px; display: block;}
	
	.books22{ flex-wrap: wrap; justify-content: center; padding: 20px 2px 50px 2px; margin-top: 0px; border-radius: 10px; display: flex;}
    .books22 li{ width: 60%; padding: 0px 2px 50px 2px; display: block;}
	
	.books22m{ flex-wrap: wrap; justify-content: center; padding: 0px 2px 0px 2px; margin-top: 0px; border-radius: 10px; display: none;}
    .books22m li{ width: 60%; padding: 50px 2px 0px 2px; display: none;}
	
    .books3{ flex-wrap: wrap; justify-content: center; padding: 0px 50px 50px 50px; margin-top: 0px; border-radius: 10px; display: flex;}
    .books3 li{ width: 27%; padding: 100px 2px 0px 2px; display: block;}
	
	.books33{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: flex;}
    .books33 li{ width: 17%; padding: 0px 2px 50px 2px; display: block;}
	
	.books4{ flex-wrap: wrap; justify-content: center; padding: 50px 2px 50px 2px; margin-top: 0px; border-radius: 10px; display: flex;}
    .books4 li{ width: 70%; padding: 50px 2px 50px 2px; display: block;}
	
	.books4m{ flex-wrap: wrap; justify-content: center; padding: 0px 2px 0px 2px; margin-top: 0px; border-radius: 10px; display: none;}
    .books4m li{ width: 60%; padding: 50px 2px 0px 2px; display: none;}
	
	.areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220208/images/bg_01.png);}
	.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220208/images/bg_02.png);}
	.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220208/images/bg_03.png);}
	.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220208/images/bg_04.png);}
	
	/*--gameInfo2--------------------------------*/
	.gameInfo2{ padding: 1% 25% 1.5% 25%; border-radius: 11px; font-size: 1.6rem; color: #3c3c3c; font-weight: bold; text-align: justify;}
    .gameInfo2 li{ margin: 5px; list-style: disc; text-align: justify; text-justify:inter-ideograph; }
    .gameInfo2 li a{ color: #e1496d;}
		

    /*--hover animate--------------------------------*/
    @-webkit-keyframes hoverAni { from {transform:translateY(0);} to {transform:translateY(-10px);}}
    @-moz-keyframes hoverAni { from {transform:translateY(0);} to {transform:translateY(-10px);}}

    .a,.b{ display:block;}
	.books1 li:hover,.more1 li:hover,
	.books2 li:hover,.more2 li:hover,
	.books22 li:hover,.more2 li:hover,
	.books3 li:hover,.more3 li:hover,
	.books33 li:hover,.more3 li:hover,
	.books4 li:hover,.more3 li:hover,
	
	/*area1*/.a:hover,.b:hover,
    /*area2*/.giftFbBao:hover,
    /*area3*/.bestSellerList li:hover,
    /*area4*/.popular li:hover,
    /*area5*/.brand li:hover{ animation:hoverAni 0.5s forwards;}