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

.impor{ color: #c62828;}
.alink{ color: #ffc247; text-decoration: underline;}
.alink:hover{ text-decoration: none;}

.txtStyle1{ background-color: #3b3558; color: #edcf00; border-radius: 0px; padding: 0px 5px 2px 5px;}
.txtStyle2{ color: #ff4769; text-shadow: none;}
.txtStyle3{ text-decoration: underline;}
.txtStyle3:hover{ text-decoration: none;}

/*bg*/
.headerBg{ padding-bottom: 0px; background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220720_newsummer/images/header_bg.png); background-position: bottom center; background-size: 138%; background-repeat: no-repeat;}
.bg01,.bg02,.bg03,.bg03_2,.bg04,.bg03{ background-position: top center; background-repeat: no-repeat;}
.bg01{ background-size: 142%; background-color: #4dd19c;}
.bg02{ background-size: 220%; background-color: #ffc247;}
.bg03{ background-size: 220%; background-color: #ff4769;}
.bg03_2{ background-size: 220%; background-color: #ff4769;}
.bg04{ background-size: 220%; background-color: #ff4769;}
.bg05{ background-size: 220%; background-color: #ffc247;}

/*--content--------------------------------*/
.areaBox{ padding: 10px 0; background-position: top center; background-size: cover;}
.areaWidth1{ padding: 0 0% 50px 0%;}
.areaWidth2{ padding: 20px 0% 20px 0%;}
.areaWidth3{ padding: 0 0% 0 0%;}
.areaWidth4{ padding: 0 3%;}

/*--header 1-----------------------------------------*/
.headerBox{ overflow: hidden; position: relative; margin-top: 55px; background-color: #000;}
.headerDeco{ width: 100%; height: 100px; background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220720_newsummer/images/header_deco.png); background-repeat: no-repeat; position: absolute; background-size: 154%; background-position-x: 32%; background-position-y: top;}
.cooperLogo{ position: relative; margin-top: 20px; background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220720_newsummer/images/header_logo_bg.png); background-position: center; background-size: 100% 34px; background-repeat: no-repeat;}
.headerCoorper{ display: block; width: 88%; margin: 0 auto;}

.headerMain{ position: relative; width: 115%; margin: -15px auto 0 auto;}
.headerPic{ position: absolute; top: 0; left: 0;}

/*--header 2-----------------------------------------*/
.bgHeaderBao{ display: none;}
.headerBao{ top: 34%; left: 10%; width: 45%;}
.bgHeaderM{ display: block;}

/*動畫:柴柴*/
.headerDog2{ animation: dog2Ani 1.5s infinite;}
@keyframes dog2Ani {
    0% { opacity: 0;}
    54% { opacity: 0;}
    57% { opacity: 1;}
    100% { opacity: 1;}
}

/*動畫:手*/
.headerHand{ animation: rotateAni 1.5s infinite; transform-origin: right 50%;}
@keyframes rotateAni {
    0% { transform: rotate(0deg);}
    50% { transform: rotate(-3deg);}
    100% { transform: rotate(0deg);}
}

/*動畫:主標色色*/
.headerMainTitle01{ animation: flashAni1 3s infinite;}
@keyframes flashAni1 {
    0% { opacity: 1;}
    2% { opacity: 0.5;}
    4%{ opacity: 1;}
    6% { opacity: 0.5;}
    8% { opacity: 1;}
    10% { opacity: 0.7;}
    12% { opacity: 1;}
    32% { opacity: 0.5;}
    34%{ opacity: 1;}
    36% { opacity: 0.5;}
    38% { opacity: 1;}
    100% { opacity: 1;}
}

/*動畫:主標打咩*/
.headerMainTitle02, .headerTitle{ animation: flashAni2 3s infinite;}
@keyframes flashAni2 {
    0% { opacity: 1;}
    12% { opacity: 0.5;}
    14%{ opacity: 1;}
    16% { opacity: 0.5;}
    18% { opacity: 1;}
    20% { opacity: 0.7;}
    22% { opacity: 1;}
    100% { opacity: 1;}
}

/*--contain-----------------------------------------*/
.contain{ overflow: hidden;}
.areaWidth1{ width: 100%; margin: 0 auto; padding-top: 15px;}
.areaWidth1.voteWidth1{ width: 100%;}
.areaWidth2{ width: 100%; margin: 0 auto; padding-top: 15px;}
.areaWidth2.voteWidth2{ width: 100%;}
.areaWidth3{ width: 100%; margin: 0 auto; padding-top: 15px;}
.areaWidth3.voteWidth2{ width: 100%;}
.mainTitle{ width: 90%; margin: 20px 0px 20px 20px; justify-content: center;}
.mainTitle img{ animation: flashAni2 3s infinite;}
.mainTitle{ display:none;}
.mainTitle.mainTitleM{ display:block;}


/*--get-----------------------------------------*/
.getArea{ padding-top: 10%; padding-bottom: 40px;}
.getBox{ width: 70%; margin: 0 auto; border-radius: 10px;}
.getTitle{ margin-top: calc(-11% - 6px); padding-top: 30px;}
.getList a{ display: block;}

.getTitle{ display:none;}
.getTitle.getTitleM{ display:block;}

/*notice----------*/
.noticeTitle{ margin-top: 3%;}
.noticeTime{ width: 80%; margin: 0 auto; padding: 2px 6px; background-color: #fff335; font-size: 2rem; text-align: center; font-weight: bold; }
.noticeList{ margin-top: 0px; padding: 15px 30px 0px 50px; color: #3b3558; font-size: 1.5rem; border-radius: 10px;}
.noticeList li{ margin-bottom: 10px; list-style: inside; list-style-type: decimal; text-indent: -15px; line-height: 1.4; font-weight: bold;}

/*--vote1-----------------------------------------*/
.voteList1{ display: flex; flex-wrap: wrap; justify-content: center;}
.voteList1 li{ width: 80%; max-width: inherit; margin: 0 1.5% 20px 1.5%;}

.voteList2{ display: flex; flex-wrap: wrap; justify-content: center;}
.voteList2 li{ width: 47%; max-width: inherit; margin: 0 1.5% 50px 1.5%;}

.voteRecommed{ position: relative; display: table; margin: 0 1% 10px 1%; padding: 2px 10px; background-color: #ff00ea; color: #fff; font-size: 1.5rem;}
.voteRecommed::before,.voteRecommed::after{ position: absolute; right: -14px; content: ""; border-style: solid;}
.voteRecommed::before{ top: 0; border-width: 14px 14px 0 0; border-color: #ff00ea transparent transparent transparent;}
.voteRecommed::after{ bottom: 0; border-width: 14px 0 0 14px; border-color: transparent transparent transparent #ff00ea;}

.voteBook{ margin: 0 1% 12px 1%; padding-bottom: 0.5%; background-color: #4dd19c; border-radius: 0 0 5px 5px; font-weight: bold;}
.voteTop{ overflow: hidden;}
.voteName{ float: left; width: 64%; padding-top: 5px; margin-left: 5%; font-size: 1.2rem; color: #2c2740; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.voteIntroduce{ float: left; width: 90%; padding-top: 5px; padding-bottom: 5px; margin-left: 5%; font-size: 1rem; color: #000000;text-align: justify; text-justify:inter-ideograph;}
.voteRead{ float: right; width: 22%; padding: 3px 5px; color: #4dd19c; background-color: #2c2740; font-size: 1.5rem; text-align: center;}
.voteRead:hover{ background-color: #8b2f3e;}

.votePic{ position: relative; overflow: hidden; margin: 3%; background-color: #eee;}
.votePic img{ display: block; width: calc(100% - 10px); padding: 5px;}
.votePicPosi{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; transition: transform 0.5s;}
.votePicPosi:hover{ transform:scale(1.05); transition: transform 0.5s;}

.voteBottom{ display: flex; flex-wrap: wrap; align-items: center;}
.voteNum{ width: 60%;}
.voteNumTxt{ position: relative; width: 60%; margin-top: -10px; margin-left: 20px; padding: 7%; font-size: 2rem; text-align: center; font-weight: bold; background-color: #fff; border-radius: 5px;}
.voteNumTxt::after{ content: ""; height: 1px; position: absolute; top: 0; bottom: 0; right: -10px; margin: auto 0; border-top: transparent 8px solid; border-bottom: transparent 8px solid; border-left: #fff 12px solid;  border-right: 0;}

/*投票紐*/
.voteBtn{ position: relative; width: 40%;}
.voteBtn.vote{ cursor: pointer;}
.votedHover,.disableHover{ position: absolute; top: 0; left: 0; opacity: 0;}
.voteBtn.voted:hover > .votedHover, .voteBtn.disable:hover > .disableHover{ animation:voteHover 0.7s forwards;}
@keyframes voteHover{ from {opacity: 0;} to {opacity: 1;}}

/*--votePageNum--*/
.votePageNum{ display: flex; justify-content: center; flex-wrap: wrap; width: 265px; margin: 0 auto; padding-bottom: 30px; color: #a89aff; font-size: 1.8rem;}
.onlyIcon{ font-size: 0;}
.votePageNum .onlyIcon[class^="bwi-"]::before{ font-size: 1.8rem;}
.votePageNum li{ width: 40px; height: 40px; margin: 5px 8px; line-height: 40px; text-align: center; font-weight: bold; border: #a89aff 2px solid; border-radius: 5px; cursor: pointer;}
.votePageNum li:hover, .nowPage{ background-color: #a89aff; color: #fff;}
.votePageNum li:active{ background-color: #a89aff; color: #fff;}
.votePageNum li.nowPage:hover{ background-color: #a89aff;}

/* brand --------------------------------------------------- */
.brandBox{ display: flex; flex-wrap: wrap; width: 90%; margin: 0 auto; padding-bottom: 30px;}
.brandBox li{ width: 46%; margin: 0 0 0 4%;}
.brandBox a{ display: block;}

/*--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: 90%;/*0119看手機版影片要多大*/ margin: 0 auto;/*影片置中*/}
.videoBgBox{ position: relative; padding: 34% 13% 7% 11%;/*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: 80%; margin: 0 auto;}

/*--m_area03--------------------------------*/

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

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

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

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

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

    /*bg*/
    .headerBg{ background-size: cover; background-attachment: fixed; padding-bottom: 0px;}
    .bg01,.bg02,.bg03,.bg03_2,.bg04,.bg05{ background-attachment: fixed; background-size: cover;}
	.bg01{ background-size: 100%; background-color: #4dd19c; background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220720_newsummer/images/bg_01.png);}
    .bg02{ background-size: 100%; background-color: #ffc247; background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220720_newsummer/images/bg_02.png);}
    .bg03{ background-size: 100%; background-color: #ff4769; background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220720_newsummer/images/bg_03.png);}
	.bg03_2{ background-size: 100%; background-color: #ff4769; background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220720_newsummer/images/bg_03_2.png);}
    .bg04{ background-size: 100%; background-color: #ff4769; background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220720_newsummer/images/bg_04.png);}
	.bg05{ background-size: 100%; background-color: #ffc247; background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220720_newsummer/images/bg_05.png);}
    
    /*--header1-----------------------------------------*/
    .headerDeco{ position: inherit; width: 100%; height: 170px; background-position: top center; background-size: 97%;}
    .cooperLogo{ background-size: 100% 50px;}
    .headerCoorper{ width: 30%; min-width: 500px;}
    .headerMain{ width: 85%; margin: -14% auto 0 auto;}
	
    /*--header2-----------------------------------------*/
	header{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220720_newsummer/images/header_bg.png); background-position: top center; background-size: cover; background-attachment: fixed;}
    .bgHeaderBao{ display: block;}
    .headerBao{ top: 54%; left: 5%; width: 28%;}
	.bgHeaderM{ display: none;}
	
	
    /*--contain-----------------------------------------*/
	.areaBox{ overflow: hidden; padding: 0; background-attachment: fixed;}
    .areaWidth1{ max-width: 900px; padding-top: 0; padding-bottom: 100px;}
	.areaWidth2{ max-width: 1200px; padding-top: 100px; padding-bottom: 100px;}
	.areaWidth3{ max-width: 1200px; padding-top: 0; padding-bottom: 0px;}
    .mainTitle{ width: 100%; padding-top: 80px; padding-bottom: 40px; justify-content: center;}
	.mainTitle{ display:block;}
    .mainTitle.mainTitleM{ display:none;}


    /*--get-----------------------------------------*/
    .getArea{ padding-top: 8%; padding-bottom: 40px;}
    .getBox{;}
    .getTitle{ width: 100%; margin: 0 auto; margin-top: calc(-7% - 15px);}
    .getList{ display: flex;}
    .getList li{ margin: 20px 15px 25px 15px;}
    .getList li:first-child{ margin-left: 0;}
	
	.getTitle{ display:block;}
    .getTitle.getTitleM{ display:none;}


    /*notice----------*/
    .noticeTitle{ width: 52%; margin: 3% auto 0 auto;}
    .noticeTime{ display: table; width: auto; margin-top: -0.5%; padding: 2px 48px; font-size: 2.4rem;}
    .noticeList{ width: 80%; margin: 20px 20px 5px 20px; padding: 3% 6%; font-size: 1.9rem;}
    .noticeList li{ margin-bottom: 5px; text-indent: -21px;}

    /*--voteList-----------------------------------------*/
    .voteList1 li{ width: 35%; /*max-width: inherit;*/ margin: 0px 40px 100px 40px;}
	.voteList2 li{ width: 30%; /*max-width: inherit;*/ margin: 0px 1% 70px 1%;}
    .voteRecommed{ font-size: 1.6rem;}
    .voteName{ width: 67%; padding-top: 5px; font-size: 2rem;}
	.voteIntroduce{ width: 90%; padding-top: 5px; font-size: 1.2rem;}
    .voteRead{ width: 20%; padding: 5px; font-size: 1.8rem;}
    .voteNumTxt{ font-size: 1.8rem;}

    /*--votePageNum--*/
    .votePageNum{ width: auto; margin-top: 30px; padding-bottom: 50px;}
    .votePageNum li{ margin: 0 5px;}
    .votePageNum li.pageArrowL{ margin-right: 15px;}
    .votePageNum li.pageArrowR{ margin-left: 15px;}

    /* brand --------------------------------------------------- */
    .brandBox{ width: 100%; padding-bottom: 150px;}
    .brandBox li{ width: 18%; margin: 0 1% 10px 1%;}
    .brandBox li:nth-child(2),.brandBox li:nth-child(4),.brandBox li:nth-child(7),.brandBox li:nth-child(9){ margin-top: 30px;}
	
	/*--video--------------------------------*/
    /*壓背景圖*/
    .videoWidth{ width: 80%;/*0119看電腦版影片要多大*/}

    .videoTicketBtn{ max-width: 400px;}
    .videoTicket{ max-width: 500px; margin: 0 auto; padding-top: 100px; padding-bottom: 0px; display: block;}
	
	/*--pc_area03--------------------------------*/

	.youtnber{ flex-wrap: wrap; justify-content: center; padding: 0px 2px 0px 2px; margin-top: 0px; border-radius: 10px; display: flex;}
    .youtnber li{ width: 30%; padding: 0px 0px 0px 0px; display: block;}
	
	.title{ flex-wrap: wrap; justify-content: center; padding: 100px 2px 0px 2px; margin-top: 0px; border-radius: 10px; display: flex;}
    .title li{ width: 90%; padding: 0px 0px 0px 0px; display: block;}

	.titlem{ flex-wrap: wrap; justify-content: center; padding: 40px 2px 0px 2px; margin-top: 0px; border-radius: 10px; display: none;}
    .titlem li{ width: 40%; padding: 0px 0px 0px 0px; display: none;}
	
	.article{ flex-wrap: wrap; justify-content: center; padding: 40px 2px 50px 2px; margin-top: 0px; border-radius: 10px; display: flex;}
    .article li{ width: 40%; padding: 0px 0px 0px 0px; display: block;}

    /*--hover animate--------------------------------*/
    @keyframes hoverAni1{ 0% { transform: translateX(0);} 50% { transform: translateX(8px);} 100% { transform: translateX(0);} }
    
    @keyframes hoverAni2{ 0% { transform: scale(1);} 50% { transform: scale(0.95);} 100% { transform: scale(1);}}
    .getList a:hover{ animation:hoverAni2 0.5s infinite;}
	
    @keyframes hoverAni4{ from {transform:scale(1);} to {transform:scale(0.95);}}
    .brandBox li a:hover, .voteBtn.vote:hover{ animation: hoverAni4 0.5s infinite;}
    


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

        /*--header-----------------------------------------*/
        .headerDeco{ background-size: 110%;}
        .headerMain{ margin: -16% auto 0 auto;}

    /*notice----------*/
    .noticeTime { padding: 2px 20px; font-size: 2.3rem; }

    /*--voteList-----------------------------------------*/
    .voteName{ font-size: 1.8rem;}
    .voteRead{ font-size: 1.6rem;}

    .voteNumTxt{ font-size: 1.7rem;}
}

@media screen and (max-width:320px) { 
    .noticeTime{ display: table; width: auto;}   
    .noticeList{ padding: 15px 6px 12px 21px;}
}

 /*--bg animate--------------------------------*/
.bgAni01{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220720_newsummer/images/bg_ani1.png); animation: animatedBackground1 130s linear infinite; opacity: 0.15;}
.bgAni02{ background-image: url(https://cp-img.bookwalker.com.tw/event/2022/20220720_newsummer/images/bg_ani2.png); animation: animatedBackground2 160s linear infinite; opacity: 0.25;}
.bgAni01,.bgAni02{ width:100%; height: 1000px;  margin: 0px; position: fixed; top:0; left:0; right:0; z-index:0; background-position: center top; background-repeat: repeat-x; pointer-events: none;}
@keyframes animatedBackground1{ from { background-position: -9999px 0;} to { background-position: 9999px 0;}}
@keyframes animatedBackground2{ from { background-position: 9999px 0;} to { background-position: -9999px 0;}}

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