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

/*bg*/
.bg1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221006_dream/images/deco_line1.png), url(https://cp-img.bookwalker.com.tw/event/2022/20221006_dream/images/bg1.jpg); background-repeat: repeat-x, repeat;  background-position: bottom left, top left;}
.bg2{ padding-bottom: 5%; background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221006_dream/images/deco_line2.png), url(https://cp-img.bookwalker.com.tw/event/2022/20221006_dream/images/bg2.jpg); background-repeat: repeat-x, repeat;  background-position: bottom left, top left;}
.bg3{ padding-bottom: 5%; background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221006_dream/images/deco_line3.png), url(https://cp-img.bookwalker.com.tw/event/2022/20221006_dream/images/bg3.jpg); background-repeat: repeat-x, repeat;  background-position: bottom left, top left;}
.bg4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20221006_dream/images/bg4.jpg); background-repeat: repeat;  background-position: top left;}

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

/*刊頭主標題*/
.hearderPicDeco{ display: none;}
.hearderPic{ width: 100%; padding-top: 26%;}
.hearderPic img{ width: 100%;}
.headerLogo2{ position: absolute; top: 2%; right: 1%; width: 12%;}

.headerPics{ position: absolute; top: 0; left: 0;}
.headerMain{ position: absolute; top: 3%; left: 0; right: 0; margin: 0 auto; width: 93%;}
.headerMain img{ width: 100%;}
.headerSale{ width: 130%; margin-left: -15%; margin-top: -8%;}

/*--contain-----------------------------------------*/
.contain{ overflow: hidden;}
.areaWidth,.areaWidth2{ overflow: hidden; position: relative; width: 100%; margin: 0 auto;}
.mainTitle,.mainTitle3{ width: 100%; margin: 0 auto 10px auto; position: relative; z-index: 1;}
.mainTitle img{ width: 100%;}

/*--合作限定-----------------------------------------*/
.mainTitle2{ width: 60%; margin: 0 auto;}
.cooperBox{ margin-top: -19%;}

.cooperListBox{ border: #5d2642 8px solid; background-color: #fff;}
.cooperListBox img{ display: block;}
.cooperList1,.cooperList2{ display: flex; flex-wrap: wrap;}
.cooperList1 > li:first-child{ width: 100%; background-color: #5d2643;}
.cooperList1 > li, .cooperList2 > li{ width: 50%;}
.cooperList1 > li:nth-child(2), .cooperList2 > li:nth-child(1){ width: calc( 50% - 1px); border-right: #5d2642 1px solid; overflow: hidden;}
.cooperList2{ border-top: #5d2642 1px solid;}

.popupBtn{ cursor: pointer;}

/*--appBox-----------------------------------------*/
.appBox{ overflow: hidden; width: 90%; max-width: 630px; margin: 0 auto; padding: 20px 0;}
.appBox li{ float: left; padding-top: 10px;}
.appBox li:first-child{ width: 29%;}
.appBox li:last-child{ width: 71%; overflow: hidden;}

.appBox li:last-child a{ float: left;}
.appFacebook{ width: 100%;}
.appAndroid{ width: 50%;}
.appIos{ width: 50%;}

/*--遊戲改編作品-----------------------------------------*/
.dreamBookBox{ padding-bottom: 10%;}
.dreamBookList{ display: flex; justify-content: space-between; width: 90%; margin: 0 auto;}
.dreamBookList > li{ width: 49%;}
.readBtn{ display: block; width: 90%; margin: 5px auto 0 auto;}

/*--參展作品-----------------------------------------*/
.bookArea{ width: 90%; margin: 0 auto;}
.bookAreaList{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px;}
.bookAreaList > li{ width: 49%;}
.bookAreaList > li.bookTitle{ width: 100%; margin-bottom: 10px;}
.bookAreaList > li.bookTitle img{ display: block; width: 70%; margin: 0 auto;}

/*--活動說明-----------------------------------------*/
.infoBox{ width: calc(90% - 60px); margin: 10px auto; padding: 30px 20px 30px 40px; background-color: rgba(255,255,255,0.16); color: #fff; border-radius: 10px; word-break: break-word; box-shadow: inset rgba(0,0,0,0.3) 0px 0px 14px;}
.infoBox li{ margin-bottom: 15px; font-size: 16px; list-style: decimal;}
.infoBox li > ul{ padding-left: 18px;}
.infoBox li > ul li{ list-style: disc;}
.infoBox li > ul li:first-child{ margin-top: 15px;}
.infoBox li a{ color: #ffcd75; text-decoration: none;}
.infoBox li a:hover{ text-decoration: underline;}
.txtPink{ color: #f9c3ff;}
.txtDecoLine{ text-decoration: underline;}
.infoTitle{ display: inline-block; margin-top: 30px; margin-bottom: 10px; padding: 2px 15px 1px 4px; background-color: #af7e60; font-weight: bold; border-radius: 30px;}
.txtImpor{ font-size: 13px; color: #dfff21; font-weight: bold;}

.infoDream{ margin-left: -18px;}
.infoDream ul { margin-top: 15px; padding-left: 36px;}
.infoDream ul li{ list-style: disc;}

/*--會員專屬-----------------------------------------*/
.memberSaleList{ width: 70%; margin: 0 auto; padding-bottom: 4%;}
.memberSaleList > li{ margin-top: 15px;}

/*--加入會員-----------------------------------------*/
.joinUsBox{ width: 100%; border-bottom: #dfd9cf 10px solid;}
.joinUsBox a{ display: block;}
.joinUsBox img{ width: 100%;}

/*--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: 300px; height: 68vh; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.popM{ width: 100%; height: 68vh; overflow-y: auto;}
.popPc{ display: none;}

/*close*/
.popClose{ display: block; width:20px; height:20px; margin:auto 0; padding: 10px; position: absolute; right: -4px; top: -24px; cursor: pointer; background-color: #fff; border-radius: 100px;}
.popClose:before, .popClose:after{ content:""; width:4px; height:20px; 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);}

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

    /*bg*/
    .bg1, .bg2, .bg3{ background-attachment: local, fixed;}
    .bg4{ background-attachment: fixed;}

    /*--header-----------------------------------------*/
    .hearderPicDeco{ display: block; width: 100%; position: absolute; top: 0; left: 0;}
    .hearderPicDeco img{ width: 100%;}
    .hearderPic{ position: relative; z-index: 1; padding-top: 0; margin-top: -1%;}
    .headerLogo2{ top: 2.2%; right: 2%; width: 8%;}
    .headerMain{ width: 45%;}
    .headerSale{ width: 100%; margin-left: 0;}

    /*--contain-----------------------------------------*/
    .areaWidth{ max-width: 1023px;}
    .areaWidth2{ max-width: 1200px;}
    .mainTitle{ width: 76%; /*margin: 0 0 10px 0;*/}
    .mainTitle3{ width: 65%;}
    /* .mainTitle{ width: 430px;} */

    /*--合作限定-----------------------------------------*/
    .mainTitle2{ width: 40%;}
    .cooperBox{ position: relative; z-index: 1;}

    .cooperListBox{ display: flex;}
    .cooperList{ width: 50%;}
    .cooperList1{ border-right: #5d2642 8px solid;}


    /*--appBox-----------------------------------------*/
    .appBox{ padding-top: 5%;}

    /*--遊戲改編作品-----------------------------------------*/
    .dreamBookBox{ padding-top: 5%; padding-bottom: 8%;}
    .dreamBookList{ width: 70%;}
    .readBtn{ width: 52%; margin-top: 15px;}    

    /*--參展作品-----------------------------------------*/
    .bookArea{ width: 98%; display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 2%;}
    .bookAreaList{ display: block; width: 24%;}
    .bookArea > .bookAreaList:nth-child(even){ margin-top: 10%;}
    .bookAreaList > li{ width: 100%; margin-bottom: 12px;}
    .bookAreaList > li img{ width: 100%;}
    .bookAreaList > li.bookTitle{ width: 100%;}
    .bookAreaList > li.bookTitle img{ width: 100%;}
    
    /*--活動說明-----------------------------------------*/
    .infoBox{ width: 84%; margin: 50px auto; padding: 75px 8% 50px 8%;}
    .infoBox li{ font-size: 18px;}
    .infoTitle{  margin-top: 40px; margin-bottom: 20px;}
    .txtImpor{ font-size: 15px;}
    
    /*--會員專屬-----------------------------------------*/
    .memberSaleList{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; margin-top: 25px; padding-bottom: 6%;}
    .memberSaleList > li{ width: 32.3%; margin-top: 30px;}

    /*--加入會員-----------------------------------------*/
    .joinUsBox a{ width: 50%; margin: 20px auto;}


    /*--popup-----------------------------------------*/
    .popupBox{ width: 700px; height: 460px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
    .popM{ display: none;}
    .popPc{ display: block; width: 100%;}

    /*--hover animate--------------------------------*/
    .cooperList a img, .popupBtn img, .appBox a, .dreamBookList a, .bookAreaList a, .joinUsBox a{ display: block; transition: 0.4s;}
    .cooperList a img:hover, .popupBtn img:hover{ transform: scale(0.95);}
    .appBox a:hover{ transform: translateY(-5px);}
    .dreamBookList a:hover, .bookAreaList a:hover{ transform: scale(0.9) rotate(-4deg);}
    .dreamBookList a.readBtn:hover{ transform: scale(1) rotate(0deg); transform: translateY(-5px);}
    .joinUsBox a:hover{ transform: scale(0.9);}

}

@media screen and (min-width:1024px)  and (max-width:1440px) {
    /*--合作限定-----------------------------------------*/
    .cooperBox{ margin-top: -10%;}/*避免遮到版標*/
}

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

    /*--合作限定-----------------------------------------*/
    .cooperBox{ margin-top: -20%;}
}

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