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

.pcNo{ display: block;}
.mNo{ display: none;}

.scrollHide{ overflow: hidden;}

.txtBlue{ color: #2a5dab;}
.txtPurple{ color: #3e19b6;}
.txtDeepRed{ color: #7a1d1d;}
.alink{ color: #fff; text-decoration: underline;}
.alink:hover{ text-decoration: none;}
.txtLeft{ text-align: left !important;}
.txtXL{ font-size: 1.8rem;}

/*bg-----------------------------------------*/
.bg1{ padding-bottom: 10%; background-image: url(https://cp-img.bookwalker.com.tw/event/2023/20230412_movie/images/bg1_m.jpg); background-position: top center; background-size: cover;}
.bg2{ padding-bottom: 30px; background-image: url(https://cp-img.bookwalker.com.tw/event/2023/20230412_movie/images/bg2.jpg); background-position: top center; background-size: cover;}
.bg3{ padding-bottom: 30px; background-image: url(https://cp-img.bookwalker.com.tw/event/2023/20230412_movie/images/bg3.jpg); background-position: top center; background-size: cover;}
.bg4{ padding-bottom: 30px; background-image: url(https://cp-img.bookwalker.com.tw/event/2023/20230412_movie/images/bg4.jpg); background-position: top center; background-size: cover;}

/*--header-----------------------------------------*/
.headerBox{ overflow: hidden; position: relative; margin-top: 55px; background-image: url(https://cp-img.bookwalker.com.tw/event/2023/20230412_movie/images/header_bg.jpg); background-position: top center; background-repeat: no-repeat; background-size: cover;}
.headerBox img{ display: block; width: 100%;}
.headerW{ position: relative; width: 110%; margin-left: -7%;}

.headerPic{ position: absolute; }
.headerMain{ width: 100%; margin-left: 0;}
.headerTitle1{ top: 0; left: 18%; width: 62%;}
.headerTitle2{ top: 25%; left: 45%; width: 45%;}

/*--contain-----------------------------------------*/
.contain{ overflow: hidden;}
.areaWidth,.areaWidth2{ position: relative; width: 100%; margin: 0 auto;}

.mainTitle,.mainTitle2{ width: 85%; margin: 0 auto 8px auto; padding-top: 25px;}
.mainTitle img,.mainTitle2 img{ width: 100%;}

/*--特別企劃-----------------------------------------*/
.activeTitle{ width: 90%; margin: 0 auto 15px auto; padding-top: 10%;}
.activeTitle img, .activeList img{ display: block; width: 100%;}
.activeList{ width: 80%; margin: 0 auto;}
.activeList > li{ margin-top: 15px;}

/*影片-----------------------------------------*/
.ytVideoBox{ position: relative; z-index: 1; margin: 0 10px; padding: 10px; background-color: rgba(255,255,255,0.5); border: #FFF 3px solid;}
.video { width: 100%; margin: 0 auto; position: relative;}
.aVideoBox { width: 100%; margin: 0 auto;}
.ytVideoBg{ margin-top: 2%}
.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;}

.videoDeco2{ position: absolute; bottom: -12%; right: -1%; width: 20%;}
.videoFb{ display: block; width: 65%; margin-left: 3%; margin-top: 2%;}
.videoFb img{ display: block; width: 100%;}

.videoDeco1{ animation: videoDeco1 15s infinite; pointer-events: none;}
@keyframes videoDeco1 { 
    0%{ transform: translateX(0);}
    50%{ transform: translateX(10px) rotate(1deg);}
    100%{ transform: translateX(0);}
}
.videoDeco2{ animation: videoDeco2 8s infinite; pointer-events: none;}
@keyframes videoDeco2 { 
    0%{ transform: translateX(0);}
    50%{ transform: translateX(-10px) rotate(-2deg);}
    100%{ transform: translateX(0);}
}

/*期間限定-----------------------------------------*/
.saleBox img,.saleTitleM img{ display: block; width: 100%;}
.saleTitleM{ width: 90%; margin: 0 auto; padding-top: 5%;}
.saleBox{ width: 84%; margin: 3% auto 0 auto;}
.saleBox > li:first-child{ border: #fff 6px solid; background-color: rgba(255,255,255,0.5);}
.bookAndWrapper > li{ margin-top: 15px; border: #fff 6px solid; background-color: rgba(255,255,255,0.5);}
.bookAndWrapper > li:last-child{ width: 60%;}

.bookSwiper{ position: relative;}
.bookSwiper .swiper-button-next{ top: 52%; right: 4px; width: 28px;}
.bookSwiper .swiper-button-prev{ top: 52%; left: 4px; width: 28px;}
.swiper-button-next::after, .swiper-button-prev::after{ content: none;}
.swiper-button-next img, .swiper-button-prev img{
    -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.2) 0 0 3px);
    filter: drop-shadow(rgba(0, 0, 0, 0.2) 0 0 3px);
}
.saleBookBtn{ position: absolute; top: 85%; left: 49%; width: 42%; background-color: #b9559c;}

/*會員專屬-----------------------------------------*/
.memberBox img{ display: block; width: 100%;}
.memberBookshelf{ position: relative; width: 90%; margin: 0 auto; background-color: rgba(255,255,255,0.5); border: #000 6px solid; border-radius: 20px;}
.memberBtn{ position: absolute; top: 80%; width: 100%;}
.memberNotice{ margin: 2% 3% 0 4%; color: #FFF; text-shadow: rgba(0,0,0,0.8) 0px 0px 5px; font-size: 1.6rem; font-weight: bold;}

.memberList{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 96%; margin: 5% auto 0 auto;}
.memberList > li{ width: 50%;}

/*--767up(Pc)------------------------*/
@media screen and (min-width:767px) {
    .FOOTER_BG{ padding-bottom: 20px !important;}
    .pcNo{ display: none;}
    .mNo{ display: block;}

    /*bg-----------------------------------------*/
    .bg1{ padding-bottom: 10%; background-image: url(https://cp-img.bookwalker.com.tw/event/2023/20230412_movie/images/bg1.jpg); background-position: top center; background-size: 1680px;}
    .bg2,.bg3,.bg4{ padding-bottom: 90px; background-attachment: fixed;}

    /*--header-----------------------------------------*/
    .headerBox{ padding-bottom: 0;}
    .headerW{ width: 100%; max-width: 1200px; margin: 0 auto;}
    .headerMain{ width: 100%; margin: 0 auto;}
    .headerTitle1{ top: 0; left: 21%; width: 58%;}
    .headerTitle2{ top: 24%; left: 47%; width: 41%;}

    /*--contain-----------------------------------------*/
    .areaWidth{ max-width: 1023px; padding-top: 0;}
    .areaWidth2{ max-width: 1233px; padding-top: 0;}
    .mainTitle{ width: 60%; padding-top: 50px;}
    .mainTitle2{ width: 44%; padding-top: 50px;}

    /*--特別企劃-----------------------------------------*/
    .activeTitle{ width: 65%; margin: 0 auto 2% auto; padding-top: 14%;}
    .activeList{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%;}
    .activeList > li{ width: 32%;}

    /*影片-----------------------------------------*/
    .introBox{ width: 805px; position: relative; z-index: 2;}
    .ytVideoBox{ max-width: 752px; margin: -1.5% auto 0 auto; padding: 10px; border-radius: 5px;}
    .ytVideoBg{ max-width: 1200px; margin: 4% auto 0 auto; background-image: url(https://cp-img.bookwalker.com.tw/event/2023/20230412_movie/images/bg1_deco2.png); background-position: bottom center; background-size: 100%; background-repeat: no-repeat;}

    .videoDeco1{ position: absolute; bottom: -2%; left: -8%; width: 14.5%;}
    .videoDeco2{ position: absolute; bottom: -2%; right: -8%; width: 18%;}
    .videoFbBox{ max-width: 752px; margin: 0 auto;}
    .videoFb{ width: 40%; margin-left: 0;}

    /*期間限定-----------------------------------------*/
    .saleBox{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 0; padding-top: 7%;}
    .saleBox > li:first-child{ width: 38%;}
    .saleBox > li:last-child{ width: 59%;}

    .bookAndWrapper{ display: flex; flex-wrap: wrap; justify-content: space-between;}
    .bookAndWrapper > li:first-child{ width: calc(57% - 12px);}
    .bookAndWrapper > li:last-child{ border-left: 0; width: calc(43% - 6px);}

    /*會員專屬-----------------------------------------*/
    .memberBox{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 6%;}
    .memberBox > li:first-child{ width: 47%;}
    .memberBox > li:last-child{ width: 49.5%; margin-top: -3%; margin-right: 3%;}

    /*--hover animate--------------------------------*/
    .activeList a, .videoFb, .saleNewBook, .saleBook, .saleBookBtn, .memberBtn, .memberList a{ display: block; transition: 0.4s;}
    .activeList a:hover, .videoFb:hover, .saleNewBook:hover, .saleBook:hover, .memberBtn:hover, .memberList a:hover{ transform: scale(0.9);}
    .saleBookBtn:hover{ transform: rotate(-5deg);}
}

@media screen and (min-width:1024px) and (max-width:1200px) {
}

/*--768-1023(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1023px) { 
    /*bg-----------------------------------------*/
    .bg1{ background-size: 1500px; padding-bottom: 5%;}
    .bg2,.bg3,.bg4{ background-attachment: inherit; padding-bottom: 45px;}

    .headerW{ width: 100%; margin: 0 auto;} 

    /*影片-----------------------------------------*/
    .videoTitle{ padding-top: 2%;}
    .ytVideoBg, .videoFbBox{ max-width: 620px;}

    /*特別企劃-----------------------------------------*/
    .activeList{ width: 95%;}

    /*期間限定-----------------------------------------*/
    .bookSwiper .swiper-button-next,.bookSwiper .swiper-button-prev{ width: 22px;}
}

@media screen and (min-width:768px) and (max-width:1680px) {
    .headerW{ max-width: 990px;} 
}

@media screen and (max-width:320px) {}


/*--animate.css--------------------------------*/
.animate__animated.animate__delay-02s{-webkit-animation-delay:0.2s;animation-delay:0.2s;}
.animate__animated.animate__delay-03s{-webkit-animation-delay:0.3s;animation-delay:0.3s;}
.animate__animated.animate__delay-04s{-webkit-animation-delay:0.4s;animation-delay:0.4s;}
.animate__animated.animate__delay-05s{-webkit-animation-delay:0.5s;animation-delay:0.5s;}
.animate__animated.animate__delay-06s{-webkit-animation-delay:0.6s;animation-delay:0.6s;}
.animate__animated.animate__delay-07s{-webkit-animation-delay:0.7s;animation-delay:0.7s;}
.animate__animated.animate__delay-08s{-webkit-animation-delay:0.8s;animation-delay:0.8s;}
.animate__animated.animate__delay-10s{-webkit-animation-delay:1.0s;animation-delay:1.0s;}
.animate__animated.animate__delay-12s{-webkit-animation-delay:1.2s;animation-delay:1.2s;}
.animate__animated.animate__delay-13s{-webkit-animation-delay:1.3s;animation-delay:1.3s;}
.animate__animated.animate__delay-14s{-webkit-animation-delay:1.4s;animation-delay:1.4s;}