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

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

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

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

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

/*箭頭位置設定*/
.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: 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;}
.areaWidth1{ padding: 20px 0% 20px 0%;}
.areaWidth2{ padding: 20px 1% 20px 1%;}
.areaWidth3{ padding: 20px 1% 20px 1%;}
.areaWidth4{ padding: 0px 0% 0px 0%;}
.areaWidth4{ padding: 20px 1% 20px 1%;}
.areaWidth5{ padding: 20px 1% 20px 1%;}
.areaWidth10{ padding: 20px 1% 20px 1%;}

/*--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% 0% 7% 0%;/*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: 100%; 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/2022/20221101_ajie_aj/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*/

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

/*--area2--------------------------------*/
.title2{ width: 70%; 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{flex-wrap: wrap; justify-content: center; padding: 0px 1% 0px 1%; margin-top: 0px; border-radius: 10px; display: flex;}
.book2 li{ width: 70%; margin-bottom: 0px; display: flex;}

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

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

/*--area4--------------------------------*/
.title4{ width: 70%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: block;}

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

.more4{ width: 95%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: none;}
.more4m{ width: 70%; margin: 0 auto; padding: 0px 0 30px 0px; position: relative; z-index: 1; display: block;}

/*--area5--------------------------------*/
.title5{ width: 80%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: block;}

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

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

/*--area10--------------------------------*/
.title10{ width: 80%; 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/20221101_ajie_aj/images/bg_00m.png);}
.areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_01m.png);}
.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_02m.png);}
.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_03m.png);}
.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_04m.png);}
.areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_05m.png);}
.areaBg6{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_06m.png);}
.areaBg7{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_07m.png);}
.areaBg8{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_08m.png);}
.areaBg9{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_09m.png);}
.areaBg10{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_10m.png);}

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

/*--gameInfo2--------------------------------*/
.gameInfo2{ padding: 5% 5% 10% 10%; border-radius: 13px; font-size: 1.3rem; color: #ffec00; font-weight: bold;}
.gameInfo2 li{ margin: 5px; list-style: disc;}
.gameInfo2 li a{ color: #ffec00; text-decoration: underline;}

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

/*--fixedBtnBox-----------------------------------------*/
.fixedBtnBox{ position: fixed; top: 80px; bottom: 0px; left: 80px; 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;}

/*--fixedBtnBox2-----------------------------------------*/
.fixedBtnBox2{ position: fixed; top: 80px; bottom: 0px; right: 80px; z-index: 101; /*transform: translateX(-200%);*/ transition: transform 0.8s;}
.fixedBtnBox2Show{ transform: translateX(0); transition: transform 0.8s;}
.fixedBtnBox2 li{ overflow: hidden; margin-bottom: 5px;}
/* .sideBtn2, .sideInfo2{ float: right; height: 0px;}
.sideBtn2 img, .sideInfo2 img{ height: 100%;}
.sideBtn2{ cursor: pointer; position: relative; z-index: 1;} */
.sideInfo2{ transform:translateX(calc(-100% - 40px));}
.open2{ animation:sideBtn 0.5s forwards;}

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

.picBox:hover .pic{ display:none;} /*滑入後隱藏一開始的圖片*/
.picBox:hover .picHover{ display:block;} /*滑入後顯示hover的圖片*/

@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/20221101_ajie_aj/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;}
	
	/*swiper1 設定----------*/
	.swiperBox{ width: 45%;/*寬度自訂*/ margin: 0 auto;/*置中*/ padding: 0px 50px 30px 50px;/*箭頭放在圖外面:依照箭頭跟點點的大小調整數值*/ position: relative;} 

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

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

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

	/*箭頭位置設定*/
	.swiperBox .swiper-button-next, .swiper-button-prev{ top: calc(50% - 20px);/*扣掉上面.swiperBox的padding-bottom的40px的一半=20px*//*這樣才會置中*/}
	
    /*--content--------------------------------*/
    .areaBox{ overflow: hidden; padding: 0; background-attachment: fixed;}
	.areaWidth1{ max-width: 1000px;  margin: 0 auto; margin-top: 0px; margin-bottom: 0px; padding-bottom: 0px;}
    .areaWidth2{ max-width: 1000px;  margin: 0 auto; margin-top: 30px; margin-bottom: 0px; padding-bottom: 0px;}
	.areaWidth3{ max-width: 1000px;  margin: 0 auto; margin-top: 0px; margin-bottom: 0px; padding-bottom: 0px;}
	.areaWidth4{ max-width: 1000px;  margin: 0 auto; margin-top: 50px; margin-bottom: 100px; padding-bottom: 0px;}
	.areaWidth5{ max-width: 1000px;  margin: 0 auto; margin-top: 0px; margin-bottom: 0px; padding-bottom: 0px;}
	.areaWidth6{ max-width: 1000px;  margin: 0 auto; margin-top: 0px; margin-bottom: 0px; padding-bottom: 0px;}
	.areaWidth10{ max-width: 1000px;  margin: 0 auto; margin-top: 50px; margin-bottom: 20px; padding-bottom: 0px;}
	
	/*--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/2022/20221101_ajie_aj/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*/
	
	/*--area1--------------------------------*/
	
	.video_box{ width: 80%; padding: 0px 0px 50px 0px; display: block;}
	.video_box2{ width: 80%; padding: 0px 0px 0px 0px; display: block;}
	
	/*--area2--------------------------------*/
	
	.title2{ width: 70%; padding: 0px 0px 0px 0px; display: block;}
	.title2m{ width: 70%; 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%; padding: 0px 10px 0px 10px; display: block;}
	
	/*--area3--------------------------------*/
	
	.title3{ width: 70%; padding: 20px 0px 0px 0px; display: block;}
	.title3m{ width: 70%; padding: 20px 0px 0px 0px; display: none;}
	
	.title32{ width: 70%; padding: 20px 0px 0px 0px; display: block;}
	.title32m{ width: 70%; padding: 20px 0px 0px 0px; display: none;}
	
	/*--area4--------------------------------*/
	
	.title4{ width: 30%; padding: 0px 0px 0px 0px; display: block;}
	
	.book4{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book4 li{ width: 35%; padding: 0px 0px 0px 0px; display: block;}
	
	.more4{ width: 70%; padding: 50px 0px 100px 0px; display: block;}
	.more4m{ width: 70%; padding: 0px 0px 0px 0px; display: none;}
	
	/*--area5--------------------------------*/
	
	.title5{ width: 70%; padding: 0px 0px 0px 0px; display: block;}
	
	.book5{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book5 li{ width: 60%; padding: 0px 0px 0px 0px; display: block;}
	
	.more5{ width: 70%; padding: 0px 0px 0px 0px; display: block;}
	
	/*--area10--------------------------------*/
	
	.title10{ width: 40%; padding: 0px 0px 0px 0px; display: block;}
	
    /*--area--------------------------------*/
	.areaBg0{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_01.png);}
    .areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_01.png);}
	.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_02.png);}
	.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_03.png);}
	.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_04.png);}
	.areaBg5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_05.png);}
	.areaBg6{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_06.png);}
	.areaBg7{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_07.png);}
	.areaBg8{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_08.png);}
	.areaBg9{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_09.png);}
	.areaBg10{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221101_ajie_aj/images/bg_10.png);}

	/*--gameInfo--------------------------------*/
	.gameInfo{ padding: 0% 1% 5% 22%; border-radius: 13px; font-size: 1.5rem; color: #ffec00; font-weight: bold;}
    .gameInfo li{ margin: 5px; list-style: disc;}
    .gameInfo li a{ color: #ffec00; text-decoration: underline;}
	
	/*--gameInfo2--------------------------------*/
	.gameInfo2{ padding: 1% 1% 5% 19%; border-radius: 13px; font-size: 1.5rem; color: #ffec00; font-weight: bold;}
    .gameInfo2 li{ margin: 5px; list-style: disc;}
    .gameInfo2 li a{ color: #ffec00; text-decoration: underline;}
	
	/*--txt--------------------------------*/
    .txt1{ width: 40%; margin: 0 auto; margin-top: 0px; padding: 1% 0px 0% 0px; font-size: 2.5rem; border: #2c2c2c 4px solid; border-radius: 10px 10px 0px 0px;}
	.txt2{ width: 40%; margin: 0 auto; margin-top: 0px; padding: 1% 0px 1% 0px; font-size: 2.5rem; border: #2c2c2c 4px solid; border-radius: 0px 0px 10px 10px;}
	
	/*--fixedBtnBox-----------------------------------------*/
    .fixedBtnBox{ bottom: 15%;}
    .fixedBtnBox li{ margin-bottom: 2px;}
    .sideBtn, .sideInfo{ width: 310px; height: auto;}/*20221020改寫成寬度固定,高度自動*/
	
	/*--fixedBtnBox2-----------------------------------------*/
    .fixedBtnBox2{ bottom: 15%;}
    .fixedBtnBox2 li{ margin-bottom: 2px;}
    .sideBtn2, .sideInfo2{ width: 310px; height: auto;}/*20221020改寫成寬度固定,高度自動*/

    /*--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*/.book1 li:hover,.book2 li:hover,.book22 li:hover,.book3 li:hover,.book41 li:hover,.book42 li:hover,.book5 li:hover,.book6 li:hover,
	/*area1*/.more1 li:hover,.more2 li:hover,.more3 li:hover,.more4 li:hover,.more5 li:hover,.more6 li:hover,
    /*area2*/.giftFbBao:hover,
    /*area3*/.bestSellerList li:hover,
    /*area4*/.popular li:hover,
    /*area5*/.brand li:hover{ animation:hoverAni 0.5s forwards;}
}

/*20221020多寫兩段尺寸*/
/*--1080-1500------------------------*/
@media screen and (min-width:1080px) and (max-width:1500px) {
	/*--fixedBtnBox-----------------------------------------*/
	.fixedBtnBox{ left: 0;}/*20221020左右改為0*/
    .sideBtn, .sideInfo{ width: 275px; height: auto;}/*20221020寬度縮小*/
	
	/*--fixedBtnBox2-----------------------------------------*/
	.fixedBtnBox2{ right: 0;}/*20221020左右改為0*/
    .sideBtn2, .sideInfo2{ width: 275px; height: auto;}/*20221020寬度縮小*/
}

/*--768-1079------------------------*/
@media screen and (min-width:768px) and (max-width:1079px) {
	/*--fixedBtnBox-----------------------------------------*/
	.fixedBtnBox{ left: 0;}/*20221020左右改為0*/
    .sideBtn, .sideInfo{ width: 172px; height: auto;}/*20221020寬度縮小*/
	
	/*--fixedBtnBox2-----------------------------------------*/
	.fixedBtnBox2{ right: 0;}/*20221020左右改為0*/
    .sideBtn2, .sideInfo2{ width: 172px; height: auto;}/*20221020寬度縮小*/
}