@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/20220901_SANDY/images/bg_01m.png); 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;}
.header6{ display: none;}
.header7{ display: none;}
.headerGiftBao{ top: 70%; right: 45%; width: 40%;}
.bgHeaderM{ display: block;}

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

/*--txt--------------------------------*/
.txt1{ width: 70%; margin: 0 auto; margin-top: 10px; padding: 1% 0px 1% 0px; color: #cf3a00; font-size: 1.5rem; text-align: center; font-weight: bold; background-color: #2c2c2c; border: #2c2c2c 4px solid; box-shadow: rgba(150,97,18,0.4) 3px 3px 3px; border-radius: 0px 0px 0px 0px;}
.txt2{ width: 70%; margin: 0 auto; margin-top: 0px; padding: 1% 0px 1% 0px; color: #ffffff; font-size: 2.5rem; text-align: center; font-weight: bold; background-color: #cf3a00; border: #cf3a00 4px solid; box-shadow: rgba(150,97,18,0.4) 3px 3px 3px; border-radius: 0px 0px 0px 0px;}

/*--m_area--------------------------------*/

.book1{flex-wrap: wrap; justify-content: center; padding: 0px 3% 0px 3%; margin-top: 0px; border-radius: 10px; display: none;}
.book1 li{ width: 80%; margin-bottom: 20px; display: none;}

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

.title{flex-wrap: wrap; justify-content: center; padding: 0px 3% 0px 3%; margin-top: 0px; border-radius: 10px; display: none;}
.title li{ width: 80%; margin-bottom: 20px; display: none;}

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

/*--m_area3--------------------------------*/

.book3{flex-wrap: wrap; justify-content: center; padding: 0px 3% 0px 3%; margin-top: 0px; border-radius: 10px; display: none;}
.book3 li{ width: 80%; margin-bottom: 20px; display: none;}

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

.more3{flex-wrap: wrap; justify-content: center; padding: 0px 3% 0px 3%; margin-top: 0px; border-radius: 10px; display: none;}
.more3 li{ width: 80%; margin-bottom: 20px; display: none;}

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

/*--問題--*/
.awardPic{ display: block; width: 60%; max-width: 175px; margin: 0 auto;}
.qTxt{ display: table; margin: 0 auto; padding: 10px 5%; font-size: 1em; color: #78602f; font-weight: bold;}
.qTips{ display: flex; align-items: center; justify-content: center; width: 80%; margin: 0 auto;}
.qTipsIcon{ width: 60px; margin-right: 10px;}
.qTipsTxt{ font-weight: bold; font-size: 1.4rem;}
.qBtn{ width: 70%; margin: 10px auto; cursor: pointer;}
.qBtn.qBtnFinish{ cursor: inherit;}

/*--輸入謎底--*/
.findConBox li.qTxtBg{ width: 88%; margin: 15px  auto 20px auto; padding: 10px 2%; background-color: #f1f1f1; border-radius: 20px; position: relative;}
.findConBox li.qTxtBg.popRight, .findConBox li.qTxtBg.popWrong{ padding-top: 50px; padding-bottom: 50px;}
/*close*/
.popClose{ display: block; width:25px; height:25px; margin:auto 0; position: absolute; right: 15px; top: 15px; cursor: pointer;}
.popClose:before, .popClose:after{ content:""; width:4px; height:30px; background-color:#666666; border-radius:15px; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto;}
.popClose:before{ -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg);}
.popClose:after{ -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);}

.qPopTitle{ width: 30%; margin: 0 auto; padding-top: 15px;}
.qInput{ box-sizing: border-box; appearance: none; -webkit-appearance: none; -moz-appearance: none; 
display: block; width: 90%; margin: 20px auto 20px auto; padding: 15px 20px; font-size: 1rem; border: #6168ab 5px solid; font-weight: bold; border-radius: 8px; outline: none;}

.qPopTitle2{ width: 40%; margin: 0 auto; padding-top: 15px;}
.qPopTxt{ margin: 10px 0; font-size: 1rem; color: #6168ab; font-weight: bold; text-align: center; line-height: 1;}
.qPopTxt a{ text-decoration: underline;}

.popAns{ display: none;}

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

/*--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/20220901_SANDY/images/bg_00.png); 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{  position: absolute; top: 9%; left: 10%; width: 35%; display: block;}
    .header2{  position: absolute; top: 9%; right: 5%; width: 42%; display: block;}
    .header3{  position: absolute; top: 38.5%; right: -10%; width: 53%; display: block;}
	.header4{  position: absolute; top: 44%; right: -10%; width: 53%; display: block;}
	.header5{  position: absolute; top: 49%; right: -10%; width: 53%; display: block;}
	.header6{  position: absolute; top: 62.5%; right: 7%; width: 33%; display: block;}
	.header7{  position: absolute; top: 82%; right: 6.5%; width: 33%; display: block;}
	
	.headerGiftBao,.bgHeaderM{ display: none;}

	.swiperBox{ display:block;}
    .swiperBox.swiperM{ display:none;}

    /*--content--------------------------------*/
    .areaBox{ overflow: hidden; padding: 0; background-attachment: fixed; }

	.areaWidth1{ max-width: 1000px;  margin: 0 auto; margin-top: 150px; margin-bottom: 150px;  padding-top: 0%; padding-bottom: 0%; padding-left: 35%;}
	
	.areaWidth3{ max-width: 1000px;  margin: 0 auto; margin-top: 150px; margin-bottom: 150px;  padding-top: 0%; padding-bottom: 0%;}
	
	.areaWidth5{ max-width: 900px;  margin: 0 auto; margin-top: 100px; margin-bottom: 100px;  padding-top: 0%; padding-bottom: 0%;}

	/*--pc_area--------------------------------*/

	.book1{ flex-wrap: wrap; justify-content: center; padding: 0px 2px 0px 2px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book1 li{ width: 70%; padding: 0px 1px 0px 1px; display: block;}
	
	.book1m{ flex-wrap: wrap; justify-content: center; padding: 50px 2px 0px 2px; margin-top: 0px; border-radius: 10px; display: none;}
    .book1m li{ width: 18%; padding: 0px 1px 0px 1px; display: none;}
	
	.title{ flex-wrap: wrap; justify-content: center; padding: 0px 2px 0px 2px; margin-top: 100px; border-radius: 10px; display: flex;}
    .title li{ width: 70%; padding: 0px 1px 0px 1px; display: block;}
	
	.titlem{ flex-wrap: wrap; justify-content: center; padding: 50px 2px 0px 2px; margin-top: 0px; border-radius: 10px; display: none;}
    .titlem li{ width: 18%; padding: 0px 1px 0px 1px; display: none;}
	
	/*--pc_area3--------------------------------*/

	.book3{ flex-wrap: wrap; justify-content: center; padding: 0px 2px 0px 2px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book3 li{ width: 30%; padding: 0px 1px 0px 1px; display: block;}
	
	.book3m{ flex-wrap: wrap; justify-content: center; padding: 50px 2px 0px 2px; margin-top: 0px; border-radius: 10px; display: none;}
    .book3m li{ width: 18%; padding: 0px 1px 0px 1px; display: none;}
	
	.more3{ flex-wrap: wrap; justify-content: center; padding: 0px 2px 0px 2px; margin-top: 30px; border-radius: 10px; display: flex;}
    .more3 li{ width: 70%; padding: 0px 1px 0px 1px; display: block;}
	
	.more3m{ flex-wrap: wrap; justify-content: center; padding: 50px 2px 0px 2px; margin-top: 0px; border-radius: 10px; display: none;}
    .more3m li{ width: 40%; padding: 0px 1px 0px 1px; display: none;}
	
    /*--問題--*/
    .findConBox{ display: flex; align-items: center; justify-content: center; margin-top: 0%; padding: 0 5% 20px 5%;}
    .awardPic{ width: 100%; max-width: 100%;}
    .qTxt{ display: block; padding: 10px 0; font-size: 1.4rem;}
    .qTips{ justify-content: flex-start; width: 100%; margin: inherit;  margin-top: 20px;}
    .qTipsIcon{ width: 70px;} 
    .qTipsTxt{ font-size: 1.8rem;}
    .qBtn{ width: 250px; margin-bottom: 0;} 

    .findConBox li.qAward{ width: 40%; margin-right: 2%;}
    .findConBox li.qTxtBg{ width: 58%; padding: 26px 5% 26px 5%; border-radius: 20px;}
    .findConBox li.qTxtBg.popRight, .findConBox li.qTxtBg.popWrong{ padding-top: 90px; padding-bottom: 90px;}

    /*--輸入謎底--*/
    .qPopTitle{ width: 25%;}
    .qInput{ margin: 20px auto 40px auto; font-size: 1.8rem; }

	.areaBg0{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220901_SANDY/images/bg_01.png);}
	.areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220901_SANDY/images/bg_01.png);}
	.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220901_SANDY/images/bg_02.png);}
	.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220901_SANDY/images/bg_03.png);}

    /*--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;}
	.header3 :hover,
	.header4 :hover,
	.header5 :hover,
	.header7 :hover,
	.book1 li:hover,.book1m 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;}