@charset "utf-8";
html{ font-size: 62.5%;} 
body{ font: 62.5% 微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif; line-height: 1;}
a{ text-decoration: none;}
a:hover{ opacity: 1;}
.headerNav{ z-index: 5 !important;}
.FOOTER_BG{ padding-bottom: 100px !important;}

/*swiper設定----------*/
.swiperBox{ width: 70%;/*寬度自訂*/ margin: 0 auto;/*置中*/ padding: 50px 50px 40px 50px;/*箭頭放在圖外面:依照箭頭跟點點的大小調整數值*/ position: relative;} 

/*點點樣式設定*/
.swiperBox .swiper-pagination-bullet{ background: #ffffff; opacity: 1;}

/*點點被選到時的顏色*/
.swiperBox .swiper-pagination-bullet-active{ background: #03729f;}

/*設定箭頭顏色*/
.swiperBox .swiper-button-next:after, .swiperBox .swiper-button-prev:after,
.swiperBox .swiper-button-next, .swiperBox .swiper-button-prev{ color: #ffffff; font-size: 40px;/*設定箭頭大小*/}

/*箭頭位置設定*/
.swiperBox .swiper-button-next, .swiper-button-prev{ top: calc(50% - 20px);/*扣掉上面.swiperBox的padding-bottom的40px的一半=20px*//*這樣才會置中*/}

/*--header--------------------------------*/
header{ margin-top: 0px; position: relative; overflow: hidden;}
.bgHeaderBao{ display: none;}
.headerPic{ position: absolute; top: 5%; left: 1%; right: 1%; 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;}

/*--video--------------------------------*/
.videoBox{ margin: 0 auto; padding: 3% 0; }
.video{ width:90%; margin:50px auto; position:relative; top: 0px; }
.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;}

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

/*--content--------------------------------*/
.areaBox{ padding: 10px 0; background-position: top center; background-size: cover;}
.areaWidth{ padding: 0 3%;}
.mainTitle1{ width: 80%; margin: 0 auto; padding: 50px 0 20px 0px; position: relative; z-index: 1; display: none;}
.mainTitle1m{ width: 80%; margin: 0 auto; padding: 50px 0 50px 0px; position: relative; z-index: 1; display: block;}
.mainTitle2{ width: 80%; margin: 0 auto; padding: 30px 0 20px 20px; position: relative; z-index: 1; display: none;}
.mainTitle2m{ width: 80%; margin: 0 auto; padding: 30px 0 20px 20px; position: relative; z-index: 1; display: block;}
.mainTitle3{ width: 80%; margin: 0 auto; padding: 30px 0 20px 20px; position: relative; z-index: 1; display: none;}
.mainTitle3m{ width: 100%; margin: 0 auto; padding: 50px 0 0px 0px; position: relative; z-index: 1; display: block;}
.mainTitle4{ width: 90%; margin: 0 auto; padding: 60px 0 20px 20px; position: relative; z-index: 1; }

/*--area1--------------------------------*/
.areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_01m.png);}
.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_02m.png);}
.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_03.png);}
.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_04m.png);}
.areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_05m.png);}
.areaBg6{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_06.png);}
.areaBg7{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_07.png);}
.areaBg8{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_08.png);}
.areaBg9{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_09.png);}

.hotBooks1{ display: flex; flex-wrap: wrap; justify-content: center; padding: 0px 1% 50px 1%; margin-top: 50px; border-radius: 10px}
.hotBooks1 li{ width: 95%; margin-bottom: 0px}
.hotBooks11{ display: flex; flex-wrap: wrap; justify-content: center; padding: 100px 0% 50px 0%; margin-top: -30px; border-radius: 10px}
.hotBooks11 li{ width: 70%; margin-bottom: 0px}

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

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

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

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

.hotBooks6m{ flex-wrap: wrap; justify-content: center; padding: 100px 1% -500px 1%; margin-top: 50px; border-radius: 10px; display: flex}
.hotBooks6m li{ width: 40%; margin-bottom: 0px; display: flex}
.hotBooks61m{ flex-wrap: wrap; justify-content: center; padding: 0px 1% -500px 1%; margin-top: 0px; border-radius: 10px; display: flex}
.hotBooks61m li{ width: 40%; margin-bottom: 0px; display: flex}
.hotBooks62m{ flex-wrap: wrap; justify-content: center; padding: 50px 1% -500px 1%; margin-top: 0px; border-radius: 10px; display: flex}
.hotBooks62m li{ width: 70%; margin-bottom: 50px; display: flex}

/*--作品---------*/
.booksList > li{ display: flex; flex-wrap: wrap; padding: 2% 2% 20px 2%;}
.bookBtn{ width: 17%;}
.bookCover{ width: 83%;}

/*--gameInfo--------------------------------*/
.gameInfo{ padding: 0px 20px 50px 50px; border-radius: 0px; font-size: 2rem; color: #3c3c3c; font-weight: bold;}
.gameInfo li{ margin: 10px; list-style: disc;text-align: justify; text-justify:inter-ideograph; }
.gameInfo li a{ color: #242424;}

/*--popup--------------------------------*/
.popOvlerlay{ background-color: rgba(0,0,0,0.8); position: fixed; top: 0; width: 100%; height: 100%; z-index: 999; display: none;}
.popupBox { width: 93%; max-height: 90vh; padding: 10px 10px 40px 10px; margin: 15px auto 0 auto; background: #fff; border-radius: 5px; position: relative; transition: all 1s ease-in-out; box-sizing: border-box;}
.detailConBox{ overflow-y: auto; max-height: 70vh;}
.popupBox img{ display: block;}
.popupCon{ height: 100px; background-color: #fff; text-align: center;}
.loadingTxt{ padding: 40px; color: #fff; font-size: 2.2rem; font-weight: bold;}

.checkBtnBox{ display: flex; padding: 0 7px;}
.checkBtn{ display: block; padding-top: 10px;}
.popSocial{ display: flex; width: 52%; margin: 15px auto 0 auto;}
.popSocial li{ margin: 0 5px;}

/*--767up(Pc)------------------------*/
@media screen and (min-width:767px) {
	.FOOTER_BG{ padding-bottom: 20px !important;}
    header{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_header.jpg); background-position: top center; background-size: cover; background-attachment: fixed;}
    .bgHeaderBao{ display: block;}
	.headerPic{ position: absolute; top:93%; left:57%; right: 0%; 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;}
	
	/*--video--------------------------------*/
    .videoBox{ max-width: 100%; padding: 100px 0; background-size: contain; position: relative; z-index: 1; }
    .video{ width:50%; max-width: 100%; position: relative; z-index: 1; border: #C2C2C2 1px solid;}
    .videoTicketBtn{ max-width: 400px;}
	
    .videoTicket{ max-width: 500px; margin: 0 auto; padding-top: 100px; padding-bottom: 100px; display: block;}

    /*--content--------------------------------*/
    .areaBox{ overflow: hidden; padding: 0; background-attachment: fixed;}
    .areaWidth{ max-width: 1300px;  margin: 0 auto; margin-top: 0px; margin-bottom: 0px; padding-bottom: 0px;}
	.areaWidth3{ max-width: 1000px;  margin: 0 auto; margin-top: 0px; margin-bottom: 100px; padding-bottom: 40px; padding-left: 30%;}
	.areaWidth4{ max-width: 1000px;  margin: 0 auto; margin-top: 0px; margin-bottom: 100px; padding-bottom: 40px; padding-right: 30%;}
    .mainTitle1{ width: 50%; padding: 100px 0px 50px 0px; display: block;}
	.mainTitle1m{ width: 100%; padding: 0px; display: none;}
	.mainTitle2{ width: 70%; padding: 10% 0px 50px 0px; display: block;}
	.mainTitle2m{ width: 100%; padding: 0px; display: none;}
	.mainTitle3{ width: 70%; padding: 10% 0px 0% 0px; display: block;}
	.mainTitle3m{ width: 100%; padding: 0px; display: none;}
	.mainTitle4{ width: 50%; padding: 10% 0px 3% 0px;}
    .areaBgBao{ background-position: top center; background-repeat: no-repeat;}
	
    /*--area--------------------------------*/
    .areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_01.png);}
	.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_02.png);}
	.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_03.png);}
	.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_04.png);}
	.areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_05.png);}
	.areaBg6{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_06.png);}
	.areaBg7{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_07.png);}
	.areaBg8{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_08.png);}
	.areaBg9{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220207/images/bg_09.png);}
	
	.hotBooks1{ display: flex; flex-wrap: wrap; justify-content: center; padding: 100px 5% 0px 5%; margin-top: 0px; border-radius: 10px;}
    .hotBooks1 li{ width: 60%; padding: 0px 1% 0px 1%;}
	.hotBooks11{ display: flex; flex-wrap: wrap; justify-content: center; padding: 0px 5% 0px 5%; margin-top: 45px; border-radius: 10px;}
    .hotBooks11 li{ width: 25%; padding: 0px 1% 0px 1%;}
	
    .hotBooks2{ display: flex; flex-wrap: wrap; justify-content: center; padding: 100px 1% 100px 1%; margin-top: 0px; border-radius: 2px;}
    .hotBooks2 li{ width: 21%; padding: 0px 0% 0px 0%;}
	
	.hotBooks3{ flex-wrap: wrap; justify-content: center; padding: 100px 1% 100px 1%; margin-top: 0px; border-radius: 2px; display: flex;}
    .hotBooks3 li{ width: 60%; padding: 0px 0% 0px 0%; display: flex;}
	.hotBooks3m{ display: flex; flex-wrap: wrap; justify-content: center; padding: 100px 1% 100px 1%; margin-top: 0px; border-radius: 2px; display: none;}
    .hotBooks3m li{ width: 60%; padding: 0px 0% 0px 0%; display: none;}
	
	.hotBooks4{ display: flex; flex-wrap: wrap; justify-content: center; padding: 0px 1% 0px 1%; margin-top: 0px; border-radius: 2px;}
    .hotBooks4 li{ width: 20%; padding: 0px 0% 0px 0%;}
	.hotBooks42{ display: flex; flex-wrap: wrap; justify-content: center; padding: 0px 1% 50px 1%; margin-top: 0px; border-radius: 2px;}
    .hotBooks42 li{ width: 20%; padding: 0px 0% 50px 0%}
	
	.hotBooks6{ flex-wrap: wrap; justify-content: center; padding: 100px 1% 0px 1%; margin-top: 0px; border-radius: 2px; display: flex;}
    .hotBooks6 li{ width: 20%; padding: 0px 0% 0px 0%; display: flex;}
	.hotBooks62{ flex-wrap: wrap; justify-content: center; padding: 0px 1% 0px 1%; margin-top: 0px; border-radius: 2px; display: flex;}
    .hotBooks62 li{ width: 20%; padding: 0px 0% 100px 0%; display: flex;}
	
	.hotBooks6m{ display: flex; flex-wrap: wrap; justify-content: center; padding: 0px 1% 0px 1%; margin-top: 0px; border-radius: 2px; display: none;}
    .hotBooks6m li{ width: 40%; padding: 0px 0% 0px 0%; display: none;}
	.hotBooks61m{ display: flex; flex-wrap: wrap; justify-content: center; padding: 0px 1% 0px 1%; margin-top: 0px; border-radius: 2px; display: none;}
    .hotBooks61m li{ width: 40%; padding: 0px 0% 0px 0%; display: none;}
	.hotBooks62m{ display: flex; flex-wrap: wrap; justify-content: center; padding: 0px 1% 50px 1%; margin-top: 0px; border-radius: 2px; display: none;}
    .hotBooks62m li{ width: 30%; padding: 0px 0% 0px 0%; display: none;}
	
	 /*--作品---------*/
    .booksList{ display: flex; padding: 0 3%;}
    .bookBtn{ width: 17%;}
    .bookCover{ width: 83%;}

	/*--gameInfo--------------------------------*/
	.gameInfo{ padding: 2% 15% 3% 15%; border-radius: 11px; font-size: 2rem; color: #3c3c3c; font-weight: bold; text-align: justify;}
    .gameInfo li{ margin: 5px; list-style: disc; text-align: justify; text-justify:inter-ideograph; }
    .gameInfo li a{ color: #242424;}
	
	/*--popup--------------------------------*/
    .popupBox{ width: 650px; margin: 50px auto; padding: 20px 20px 40px 20px;}
	
    /*--hover animate--------------------------------*/
    @-webkit-keyframes hoverAni { from {transform:translateY(0);} to {transform:translateY(-10px);}}
    @-moz-keyframes hoverAni { from {transform:translateY(0);} to {transform:translateY(-10px);}}

    /*area1*/.hotBooks1 li:hover,.hotBooksMore:hover,
	/*area1*/.hotBooks2 li:hover,.hotBooksMore2:hover,
	/*area1*/.hotBooks3 li:hover,.hotBooksMore3:hover,
	/*area1*/.hotBooks4 li:hover,.hotBooksMore3:hover,
	/*area1*/.hotBooks42 li:hover,.hotBooksMore3:hover,	
	/*area1*/.hotBooks5 li:hover,.hotBooksMore3:hover,
	/*area1*/.hotBooks6 li:hover,.hotBooksMore3:hover,
	/*area1*/.hotBooks62 li:hover,.hotBooksMore3:hover,	
    /*area2*/.giftFbBao:hover,
    /*area3*/.bestSellerList li:hover,
    /*area4*/.popular li:hover,
    /*area5*/.brand li:hover{ animation:hoverAni 0.5s forwards;}
}

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