@charset "utf-8";
/* a:hover{ opacity:0.9;} *//*滑鼠滑入半透明*/

/*--header--------------------------------*/
header{ margin-top: 0px; position: relative; overflow: hidden;}
.bgHeaderBao{ display: none;}
.bgHeaderM{ display: block;}

/*--content--------------------------------*/
/*.areaBox{ padding: 0px; background-position: top center;}*/
.areaWidth1{ padding: 50px 5% 50px 5%;}
.areaWidth2{ padding: 0px 0% 50px 0%;}
.areaWidth3{ padding: 0px 0% 10% 0%;}
.areaWidth4{ padding: 0px 0% 100PX 0%;}
.areaWidth5{ padding: 0px 0% 30px 0%;}

.a1_m {display: block;}
.a1_pc {display: none;}

.mb-2 {margin-bottom: 3%;}

/*bg-----------------------------------------*/
.areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250815_gachi/images/bg1_m.png); background-attachment: scroll; background-repeat: repeat;}
.areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250815_gachi/images/bg2_m.png); background-attachment: scroll; background-repeat: repeat;}
.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250815_gachi/images/bg3_m.png); background-attachment: scroll; background-repeat: repeat;}
.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250815_gachi/images/bg4_m.png); background-attachment: scroll; background-repeat: repeat;}

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



/*--popup--------------------------------*/
.popOvlerlay{ background-color: rgba(0,0,0,0.8); position: fixed; top: 0; width: 100vw; height: 100%; z-index: 999; display: none;}
.popupBox{ width: 348px; height: 610px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: #fff; padding: 7px; border-radius: 5px;}
.popupBox img{ display: block;}
.popupCon{ height: 100%; background-color: #000; 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: 72%; margin: 15px auto 0 auto;}
.popSocial li{ margin: 0 5px;}

/*close*/
.popClose{ display: block; width:25px; height:25px; margin:auto 0; position: absolute; 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);}

/*--area--------------------------------*/

.title1{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title1m{ width: 80%; margin: 0 auto; padding: 30px 0 0px 0px; position: relative;display: block;}

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

/*--area2--------------------------------*/
.title2{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title2m{ width: 80%; margin: 0 auto; padding: 50px 0 0px 0px; position: relative;display: block;}
.gift{flex-wrap: wrap; justify-content: center; padding: 0 6%; margin-top: 0px; border-radius: 10px; display: flex;}
.gift li{ width: 50%; margin-bottom: 10px; display: flex;}

.gift_btn{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.gift_btn_m{ width: 80%; margin: 0 auto; padding: 0px 0 50px 0px; position: relative;display: block;}

.playArea{ padding-bottom: 15px;  background-position-x: center; background-position-y: top; background-repeat: no-repeat; }
.playPoint.pointBtn{ cursor: pointer; animation: playPoint 2s infinite;}
.playPoint.pointBtn:hover{ animation: playPoint2 1s infinite;}
@keyframes playPoint{ 0%{transform: scale(1);} 50%{transform: scale(1.05);} 100%{transform: scale(1);} }
@keyframes playPoint2{ 0%{transform: rotate(0);} 50%{transform: scale(1.05);} 100%{transform: rotate(0);} }

/*--area3--------------------------------*/
.title3{ width: 0%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative;display: none;}
.title3m{ width: 80%; margin: 0 auto; padding: 40px 0 220% 0px; position: relative; display: block;}
.book{position: absolute; top:8%; left: 10%; width: 85%;;}

.bookBox{ padding:6%;}
.mediaBox{ padding: 6%;}

.posiRelative{ position: relative;}
.imgBlock100 img{ display: block; width: 100%;}
.story_bg{position: absolute; top:24%; left: 5%; width: 85%;}
.headerPicFull2{ position:absolute;}
.picGroup{width: 67%; top:25%; left: 19%;}
/*輪播swiper（調整電腦版箭頭位置）*/
.swiperIntro .swiper-button-next{ right: 0; width:8%;}
.swiperIntro .swiper-button-prev{ left: 0; width:8%;;}
/*swiper(移除swiper預設箭頭樣式)*/
.swiper-button-prev::after, .swiper-rtl .swiper-button-next::after, .swiper-button-next::after, .swiper-rtl .swiper-button-prev::after{ content: ''; display: none;}

/*--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%;/*看手機版影片要多大*/ margin: 0 auto;/*影片置中*/}
.videoBgBox{ position: relative; padding: 34% 13% 7% 11%;/*0119看間距要多少*/}
.videoBg{ position: absolute; top: 0; left: 0;}
.videoBgPic{ padding: 0 5% 10% 5%;/*影片與背景間距*/ }



/*--767up(Pc)------------------------*/
@media screen and (min-width:767px) {
    header{ background-position: top center; background-size: cover; background-attachment: fixed;}
    .bgHeaderBao{ display: block;}
	.headerGiftBao,.bgHeaderM{ display: none;}

    .areaBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250815_gachi/images/bg1.png); background-attachment: fixed;}
    .areaBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250815_gachi/images/bg2.png); background-attachment: fixed;}
	.areaBg3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250815_gachi/images/bg3.png); background-attachment: fixed;}
	.areaBg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250815_gachi/images/bg4.png); background-attachment: fixed;}


	/*--滑鼠滑入效果(可自定)--------------------------------*/
    .hover a{ display: block; transition: 0.4s;}
    .hover a:hover{ transform: scale(0.9);}/*滑入縮小*/

    /*--content--------------------------------*/
    .areaBox{ /*overflow: hidden;*/ padding: 0;}
    .areaWidth1{ max-width: 1000px;  margin: 0 auto; margin-top: 0px; margin-bottom: 0px; padding-bottom: 50px;}
	.areaWidth2{ max-width: 1500px;  margin: 0 auto; margin-top: 0px; margin-bottom: 0px; padding-bottom: 50px;}
	.areaWidth3{ max-width: 70%;  margin: 0 auto; margin-top: 0px; margin-bottom: 0px; padding-bottom: 60px;}
	.areaWidth4{  max-width: 70%;  margin: 0 auto; margin-top: 0px; margin-bottom: 0px; padding-bottom: 100px;}
	.areaWidth5{ max-width: 1200px;  margin: 0 auto; margin-top: 0px; margin-bottom: 0px; padding-bottom: 0px;}

	.a1_m { display: none;}
    .a1_pc { display: block;}



	/*--area--------------------------------*/

    .title1{ width: 80%; padding: 50px 0px 0px 0px; display: block;}
	.title1m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.book1{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 50px; margin-right: 50px; display: flex;}
    .book1 li{ width: 40%; padding: 0px 0px 0px 0px; display: block;}

	/*--area2--------------------------------*/
	.title2{ width: 80%; padding: 100px 0px 50px 0px; display: block;}
	.title2m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

    .gift{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; margin-right: 0px; display: flex;}
    .gift li{ width: 50%; padding: 0px 0px 0px 0px; display: block;}

    .gift_btn{ width: 100%; padding: 30px 0px 100px 0px; display: block;}
	.gift_btn_m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

    .playArea{ padding-bottom: 35px; background-position-y: 100px;}



	/*--area3--------------------------------*/
	.title3{ width: 90%; padding: 100px 0px 68% 0px; display: block;}
	.title3m{ width: 0%; padding: 0px 0px 0px 0px; display: none;}

	.book{ position: absolute; top:21%; left: 50%; width: 48%;}

    .bookBox{ padding-bottom: 1%; padding-top: 6%;}

    .story_bg{position: absolute; top:21%; left: 0; width: 52%;}
    .picGroup{width: 40.3%; top:23.6%; left: 8.8%;}



	/*--video--------------------------------*/

    /*壓背景圖*/
    .videoWidth{ width: 90%;/*看電腦版影片要多大*/}
    .videoTicketBtn{ max-width: 400px;}
    .videoTicket{ max-width: 500px; margin: 0 auto; padding-top: 0px; padding-bottom: 0px; display: block;}

    /*純css底色*/
    .videoBgStyle1{ padding: 10px 12% 40px 12%;/*影片與背景間距*/ background-color: #2e3043;/*背景色*/ border-radius: 0 0 30px 30px;/*下方導圓角*/}
    /*壓圖片背景*/
    .videoBgPic{ padding: 3% 5% 10% 5%;/*影片與背景間距*/ }



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

    /*area5*/.brand li:hover{ animation:hoverAni 0.5s forwards;}
}

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

    .areaWidth3{ max-width: 90%;  margin: 0 auto; margin-top: 0px; margin-bottom: 0px; padding-bottom: 60px;}
    .areaWidth4{ max-width: 90%;  margin: 0 auto; margin-top: 0px; margin-bottom: 0px; padding-bottom: 60px;}
}