@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;}

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

/*--area1-3--------------------------------*/
.title{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: none;}
.titlem{ width: 100%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: block;}

.book{ width: 95%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: block;}

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

.book2{ width: 95%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: block;}

/*--area1--------------------------------*/
.areaBg0{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221005_autumn/images/bg_01m.png);}
.areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221005_autumn/images/bg_01m.png);}
.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221005_autumn/images/bg_01m.png);}
.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221005_autumn/images/bg_03m.png);}
.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221005_autumn/images/bg_04m.png);}
.areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221005_autumn/images/bg_05m.png);}

/*--fixedBtnBox-----------------------------------------*/
.fixedBtnBox{ position: fixed; bottom: 0; right: 0px; 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: right; 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(https://cp-img.bookwalker.com.tw/event/2022/20221005_autumn/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;}
	.areaWidth2{ max-width: 1300px;  margin: 0 auto; margin-top: 0px; margin-bottom: 100px; padding-bottom: 40px; padding-right: 50%;}
	.areaWidth1{ max-width: 1300px;  margin: 0 auto; margin-top: 150px; margin-bottom: 100px; padding-bottom: 40px; padding-lift: 80%;}
	
	/*--area1--------------------------------*/
	.title{ width: 100%; padding: 10% 0px 0% 0px; display: block;}
	.titlem{ width: 100%; padding: 0px; display: none;}
	
	.book{ width: 140%; padding: 0% 0px 0% 100px; display: block;}
	
    /*--area2--------------------------------*/
	.title2{ width: 100%; padding: 10% 0px 0% 0px; display: block;}
	.title2m{ width: 100%; padding: 0px; display: none;}
	
	.book2{ width: 60%; padding: 10px 0px 20px 400px; display: block;}
	
    .areaBgBao{ background-position: top center; background-repeat: no-repeat;}
	
    /*--area--------------------------------*/
    .areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221005_autumn/images/bg_01.png);}
	.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221005_autumn/images/bg_02.png);}
	.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221005_autumn/images/bg_03.png);}
	.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221005_autumn/images/bg_04.png);}
	.areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221005_autumn/images/bg_05.png);}


	/*--fixedBtnBox-----------------------------------------*/
    .fixedBtnBox{ bottom: 21%;}
    .fixedBtnBox li{ margin-bottom: 3px;}
    .sideBtn, .sideInfo{ height: 138px;}

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