@charset "utf-8";
html{ font-size: 62.5%;} 
body{ font: 62.5% 微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif; line-height: 1; background-color: #000;}
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;}

/*bg*/
.bg01{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220211/images/bg1.jpg); background-size: 215%; background-position-y: top; background-position-x: 37%; background-repeat: repeat-y;}
.bg02{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220211/images/bg2.jpg); background-size: 215%; background-position-y: top; background-position-x: 37%; background-repeat: repeat-y;}
.bookBg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220211/images/bg_deco1.png); background-size: 215%; background-position-y: top; background-position-x: 58%; background-repeat: no-repeat;}
.bookBg2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220211/images/bg_deco2.png); background-size: 215%; background-position-y: top; background-position-x: 58%; background-repeat: no-repeat;}

/*--header-----------------------------------------*/
.headerBox{ overflow: hidden; position: relative; margin-top: 55px;}
.headerBox img{ display: block;}

.headerBg{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220211/images/header_bg.jpg); background-position: top center; background-size: cover; animation: headerBg 10s infinite;}
.headerW{ width: 90%; max-width: 750px; margin: 30px auto;}

/*headerBg主視背景閃爍*/
@keyframes headerBg{ 
    0% { filter: brightness(1);}
    5%{ filter: brightness(0.6);}
    10%{ filter: brightness(1);}
    15%{ filter: brightness(0.7);}
    50% { filter: brightness(1);}
    55%{ filter: brightness(0.6);}
    60% { filter: brightness(1);}
    75%{ filter: brightness(0.5);}
    100%{ filter: brightness(1);}
}

/*headerMain主標毛玻璃*/
.headerMain{ animation: headerMain 8s infinite;}
@keyframes headerMain{ 
    0% { filter: blur(0);}  
    10% { filter: blur(3px);}
    20%{ filter: blur(0);}
    100%{ filter: blur(0);}
}

/*--contain-----------------------------------------*/
.contain{ overflow: hidden;}
.areaWidth{ position: relative; width: 100%; margin: 0 auto; padding-top: 15px;}
.mainTitle{ width: 50%; margin: 0 auto; animation: bookTitle 8s infinite;}
.mainTitle img{ display: block; margin: 0 auto;}

/*--card--*/
.cardList{ width: 80%; margin: 0 auto;}
.cardList li{ position: relative;}
.cardBtn{ display: block; position: absolute; bottom: 0;}

/*--book--*/
.bookList{ display: flex; width: 90%; margin: 0 auto;}
.bookList li img{ display: block;}
.bookTitle{ width: 35%; animation: bookTitle 8s infinite;}
.bookPrice{ width: 65%;}

@keyframes bookTitle{ 
    0% { filter: blur(0);}  
    10% { filter: blur(3px);}
    20%{ filter: blur(0);}
    45%{ filter: blur(0);}
    50% { filter: blur(2px);}
    55%{ filter: blur(0);}
    100%{ filter: blur(0);}
}

/*--movie--*/
.video { width:90%; 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;}

/*--recommendMore--*/
.recommendMore{ display: block; width: 25%; margin: 0 auto; padding: 15px 0;}

/*--saleList--*/
.saleList{ display: flex; flex-wrap: wrap; justify-content: center;}
.saleList li{ width: 50%;}



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

    /*bg*/
    .bg01{ background-size: cover; background-attachment: fixed; padding-bottom: 35px;  background-position-y: top; background-position-x: center; background-repeat: no-repeat;}
    .bg02{ background-size: cover; background-attachment: fixed; padding-bottom: 35px;  background-position-y: top; background-position-x: center; background-repeat: no-repeat;}
    .bookBg1{ padding: 80px 0; background-size: cover; /*background-attachment: fixed;*/ padding-bottom: 35px;  background-position-y: -158px; background-position-x: center;}
    .bookBg2{ padding: 80px 0; background-size: cover; /*background-attachment: fixed;*/ padding-bottom: 35px;  background-position-y: -114px; background-position-x: center;}

    /*--header-----------------------------------------*/
    .headerW{ margin: 58px auto;}
    
    /*--contain-----------------------------------------*/
    .areaWidth{ max-width: 1100px; padding-top: 0;}
    .mainTitle{ width: 430px;}

    /*--card--*/
    .cardList{ display: flex; padding-top: 30px;}

    /*--book--*/
    .bookList{ width: 75%;}
    .bookTitle{ width: 48%;}
    .bookPrice{ width: 50%;}
        
    
    /*--movie--*/
    .video { width: 800px; margin-top: 10px;}
    .aVideoBox { width: 800px;}

    /*--recommendMore--*/
    .recommendMore{ width: 125px; padding: 30px 0 15px 0;}    

    /*--saleList--*/
    .saleList li{ width: 33.3%;}


    /*--hover animate--------------------------------*/
    @keyframes hoverAni{ from {transform:translateX(0);} to {transform:translateX(5px);}}
    .cardBtn:hover{ animation:hoverAni 0.5s forwards;}
   
    .bookPrice a,.recommendMore{ display: block; transform: scale(1) rotate(0deg); transition: transform 0.3s;}
    .bookPrice a:hover,.recommendMore:hover{ transform: scale(0.9) rotate(-4deg);  transition: transform 0.3s;}
}


/*--768-1023(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1023px) { 
    .areaWidth{ width: 94%;}   

    /*--movie--*/
    .video { width: 100%;}
    .aVideoBox { width: 90%;}
    
}

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