@charset "utf-8";
/* a:hover{ opacity:0.9;} *//*滑鼠滑入半透明*/
/*--loading載入中--------------------------------*/
/*遮罩樣式*/
.overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /*半透明背景*/ display: flex; justify-content: center; align-items: center; z-index: 9999;/*確保遮罩層在最上層*/}

/*spinner樣式+旋轉動畫*/
.spinner{ border: 8px solid rgba(0, 0, 0, 0.1); border-left: 8px solid #fff; border-radius: 50%; width: 50px; height: 50px; margin: 0 auto; animation: spin 1s linear infinite;}
@keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);}}

/*loading文字*/
.loadingTxt{ margin-top: 10px; font-size: 2rem; color: #fff; font-weight: bold;}


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

.txtPurple{ color: #f531ab;}
.txtPurple2{ color: #f531ab;}
.txtYellow{ color: #fffe84;}
.txtWhite{ color: #fff;}
.txtbgPurple{ background-color: #f531ab;}
.txtBgPink{ background-color: #ebd8f1;}
.txtS{ font-size: 1.6rem;}
.alink{ color: #009cff; text-decoration: underline;}
.alink:hover{ text-decoration: none;}

/*--header-----------------------------------------*/
.headerBox{ overflow: hidden; position: relative; background-color: #7a8996;}
.headerBox img{ display: block; width: 100%;}
.headerH{ width: 100%;}

.headerPicFull{ position: absolute; top: 0; left: 0; width: 100%;}
.headerPicHalf{ position: absolute; top: 0; width: 50%;}
.headerPicHalf.left{ left: 0;}
.headerPicHalf.right{ right: 0;}
.headerPic{ position: absolute;}

.headerCharactor img{ animation: headerCharactor 20s infinite;}
@keyframes headerCharactor {
    0%{ transform: scale(1) translateX(0) rotate(0);}
    50%{ transform: scale(1.05) translateX(1%) rotate(2deg);}
    100%{ transform: scale(1) translateX(0) rotate(0);}
}

/*至頂選單*/
.menuBox{ position: fixed; top: 55px; left: 0; right: 0; margin: 0 auto; display: flex; width: 97%; z-index: 4;}
.menuBox li{ margin-top: -3%; transition: margin-top 0.5s;}
.menuBox li.click, .menuBox li:hover{ margin-top: 0;}
.menuBox li.soon:hover{ margin-top: -3%;}

/*--contain-----------------------------------------*/
.contain{ overflow: hidden;}
.areaWidth,.areaWidth2{ width: 94%; margin: 0 auto; padding-bottom: 20px;}
.mainTitle{ width: 100%;}

/*--area01(活動內容)-----------------------------------------*/
.area01{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250620_rock/images/bg1.png); background-position: top center; background-repeat: no-repeat; background-color: #93dbd5;}
.area01.vote{ background-color: #ac4577; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250620_rock/images/bg3.png);}
.calendarBox{ width: 70%; margin: 0 auto;}
/* .calendarBox{  display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto;}
.calendarBox li{ width: 50%;}
.calendarBox li:last-child{ margin-top: -6%;} */
.activeInfoBox{ margin-top: 10px;}
.activeInfoTxt{ width: 90%; margin: 10px auto 0 auto; font-size: 1.8rem; color: #1a5f85;}
.joinBtn{ width: 70%; margin: 8px auto 0 auto;}

/*贊助商Banner*/
.clipBanner{ margin-top: 15px;}
.clipBanner a{ display: block; width: calc(100% - 10px); /*box-shadow: rgba(255,255,255,0.9) 0 0 10px, rgba(255,255,255,0.9) 0 0 10px, rgba(255,255,255,0.9) 0 0 10px;*/}
.clipBanner img{ width: 100%;}

/*--area02(精彩回顧)-----------------------------------------*/
.area02{ padding-top: 30px; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250620_rock/images/bg2.png); background-position: top center; background-repeat: no-repeat; background-color: #5786b6;}
.historyBox li:nth-child(2){ margin-top: 20px;}

.historyBox{ position: relative;}
.historyBox .swiper{ width: 90%;}

/*swiper*/
.swiper-button-next::after, .swiper-button-prev::after{ content: none;}
.historyBox .swiper-button-next{ display: block; top: 53%; right: -9px; width: 34px;}
.historyBox .swiper-button-prev{ display: block; top: 53%; left: -9px; width: 34px;}

/*--area03(評選獎勵)-----------------------------------------*/
.area03{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250620_rock/images/bg3.jpg); background-position: top center; background-repeat: no-repeat;}
.awardInfoBox{ padding: 0 3%; color: #fff; font-size: 1.9rem;}
.awardInfoTilte{ width: 60%;}
.awardInfoBox p{ border-bottom: #fff 1px dashed; margin-bottom: 20px; padding-bottom: 20px; text-shadow: rgb(27, 7, 70, 0.4) 1px 1px 5px;}

/*評審*/
.awardTeacherBox{ padding: 0 10%; background-color: #5786b6; border-radius: 15px;}
.teacherInfo{ margin-top: 10px; padding-bottom: 20px; color: #fff; font-size: 1.8rem;}
.teacherInfo a{ color: #fff6c4;}

.listBox.awardIconBox{ width: 100%; margin: 0;}
.listBox.awardIconBox > li{ margin: 0; padding: 0 6px;}
.awardIconBox + .awardIconBox{ margin-top: 0;}
.mgT{ margin-top: -20px;}/*非兔子長耳朵*/

/*--感謝贊助-----------------------------------------*/
.footerSponsor{ padding: 10px 0; background-color: #fff; border-bottom: #c6e2df 3px solid;}
.footerSponsor img{ display: block; width: 100%; margin: 0 auto;}

/*--mangaBox(國人漫畫)-----------------------------------------*/
/* .mangaBox{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.mangaBox li{ width: 49%; margin-bottom: 1%;}
.mangaBox li img{ display: block;}
.moreBtn{ width: 70%; margin: 0 auto;} */

/*--fixedBtnBox-----------------------------------------*/
.fixedBtnBox{ position: fixed; bottom: 10px; left: 0; z-index: 101; transform: translateX(-100%); transition: transform 0.8s;}
.fixedBtnBoxShow{ transform: translateX(0); transition: transform 0.8s;}
.fixedBtnBox li{ overflow: hidden; margin-bottom: 5px;}
.sideBtn, .sideInfo{ float: left; height: 140px;}
.sideBtn img, .sideInfo img{ height: 100%;}
.sideBtn{ cursor: pointer; position: relative; z-index: 1;}
.sideInfo{ transform:translateX(calc(-100% - 40px));}
.open{ animation:sideBtn 0.5s forwards;}
@keyframes sideBtn{ from {transform:translateX(calc(-100% - 40px));} to {transform:translateX(0);}}
.sideInfo img{ display: none;}
.sideInfo.open img{ display: block;}


/*////--method.html-----------------------------------------*/
.area01.method{ padding-top: 10px;}
.methodBox{ margin-bottom: 10px; padding: 5% 0; background-color: #fff; border: #5786b6 7px solid; /*box-shadow: inset rgba(162, 230, 224, 1) 0 0 30px;*/ font-size: 1.8rem; color: #5786b6; border-radius: 15px; /*word-break: break-all;*/}
.methodMainTitle{ margin: 0 auto; padding-top: 20px;}
.methodMainTitle img{ display: block; width: 100%;}
.methodMainTitle + .methodBox{ margin-top: -10%; padding: 11% 0 5% 0;}

.methodTitle{ width: 70%; max-width: 270px; margin-bottom: 15px;}
.methodTitle.style2{ margin-bottom: 10px;}
.methodTitle img{ display: block;}

.step{ font-size: 2rem;}
.fontSmail{ font-size: 1.6rem;}
.impor{ color: #e400a6;}
.link{ color: #01a2e8; text-decoration: underline;}
.link:hover{ color: #0078ac; text-decoration: none;}
.sec{ color: #585858; font-size: 1.6rem;}

/*--活動辦法--*/
.stepBox{ padding: 20px 15px; padding-left: calc(52px + 15px); border-top: #ddd3e4 1px solid; font-weight: bold;}
.stepBox > li{ position: relative; /*margin-bottom: 18px;*/}
.stepBox > li:last-child{ margin-bottom: 0;}
.stepNum{ position: absolute; top: 0; left: 0; display: inline-block; width: 30px; height: 30px; margin-left: -47px; margin-right: 10px; border: #5786b6 4px solid; color: #5786b6; text-align: center; line-height: 30px; border-radius: 30px;}
.logoBtn{ display: inline-block; padding: 5px 12px 3px 12px; margin: 5px 0; background-color: #5786b6; border-bottom: #5786b6 7px solid; color: #fff; font-size: 1.7rem; border-radius: 5px; text-decoration: none;}

/*--list--*/
.listOutBox{ padding: 20px 25px 0 25px; border-top: #ddd3e4 1px solid;}
.listBox{ margin-bottom: 20px;}
.listBox > li{ margin-bottom: 10px;}
.listBox2 > li{ margin-bottom: 20px; font-size: 1.6rem !important;}
.sTitle{ display: inline-block; padding: 0 10px; margin-bottom: 10px; background-color: #5786b6; color: #fff;}

.copyBtn{ padding: 2px 10px; background-color: #01a2e8; color: #fff; border-radius: 5px; font-size: 1.6rem; border: 0; cursor: pointer;}
.copyBtn:hover{ background-color: #0078ac;}
.listStyle{ padding-left: 24px;}
.listStyle li{ list-style: decimal;}

/*主辦單位logo*/
.mainBW{ display: inline-block; width: 180px; padding: 0 0px; vertical-align: bottom; border: #ccc 0px solid;}
.mainBW img{ display: block; width: 100%;}

/*評審介紹*/
.teacherIntroBox{ position: relative; margin-bottom: 25px; padding: 5%; border: #5786b6 1px solid;}
.teacherIntroMain > li:first-child{ width: 70%; margin: 0 auto;}
.teacherIntroMain > li:last-child{ margin-top: 15px;}

.teacherIntroCon{ margin-top: 10px;}
.teacherIntroCon > li{ padding: 7px 0; border-top: #b5b5b5 dashed 1px; overflow: hidden;}

/*評審社群icon*/
.teacherBtn1, .teacherBtn2{ float: right; margin-top: 10px;}
.teacherBtn1 img, .teacherBtn2 img{ display: block; width: 100%;}
.teacherBtn1{ width: 19%; margin-right: 4.5%;}
.teacherBtn2{ width: 60%; margin-right: 10%; margin-top: 15px;}

.teacherDeco{ position: absolute; right: 4%; top: -1%; width: 10%;}

/*////--special.html-----------------------------------------*/
/* .specialInfoBox{ width: 100%; margin-top: 15px;}
.specialBox{ width: 75%; margin: 0 auto;}
.specialBox > li{ margin-bottom: 25px;}
.specialBox > li > a{ display: block;}
.specialBox img{ display: block; width: 100%;} */

.saleMore{ display: block; width: 80%; margin: -8% auto 0 auto;}

/*////--vote.html-----------------------------------------*/
.voteSaleBox{ width: 80%; margin: 0 auto; }
.voteSaleBox li{ margin-bottom: 10px;}
/* .voteSaleBox li{ width: 48.5%;} */

.voteMainTitle{ width: 100%; padding-top: 20px; margin: 0 auto;}
.voteTitle{ width: 100%; margin: 0 auto; padding-top: 10px; padding-bottom: 10px;}

.voteInfoTitle, .voteInfo{ width: 85%; margin-left: auto; margin-right: auto; font-size: 1.8rem; color: #fff; font-weight: bold;}
.voteInfoTitle{ margin-top: 20px; margin-bottom: 12px; margin-left: 6%;}
.voteInfo{ padding-left: 22px; padding-top: 15px; text-shadow: 3px 3px 10px #751e48, 0 0 10px #751e48, 0 0 10px #751e48;}
.voteInfo li{ list-style-type: decimal; margin-bottom: 12px;}
.voteInfo li a{ color: #85ffec; text-decoration: underline;}
.voteInfo li a:hover{ text-decoration: none;}
.impor2{ padding: 0 10px; background-color: #6258e5; color: #fff; border-radius: 30px;}

.goVote{ display: block; width: 60%; margin: 20px auto 0 auto;}

.voteMainTitle img, .voteTitle img, .voteSaleBox img{ width: 100%;}

/*--area04(投票區)-----------------------------------------*/
.area04{ background-color: #e8e8e8; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250620_rock/images/bg_04.jpg); background-position: top center; background-repeat: no-repeat;}
.voteFilterBox{ display: flex; justify-content: space-around; padding-top: 20px;}

input, button, textarea, select{ box-sizing:border-box;}
input, select, input, select{ appearance: none; -webkit-appearance: none; -moz-appearance: none; max-width: 100%; font-size: 16px;}
::placeholder{ color: #963464; opacity: 1;}/* Firefox */
:-ms-input-placeholder{ color: #963464;}/* Internet Explorer 10-11 */
::-ms-input-placeholder{ color: #963464;}/* Microsoft Edge */

/*inputText + select----*/
.inputTextStyle{ height: 45px; padding: 0 10px; border: #963464 3px solid; color: #963464; border-radius: 3px; background-color: #fff; outline: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; transition-property: border; transition-duration: 0.4s; font-family: 微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif;}
.selectStyle{ position: relative; height: 45px; padding: 4px 40px 4px 10px; border: #963464 3px solid; color: #963464; border-radius: 3px; outline: none; cursor: pointer; transition-property: border; transition-duration: 0.4s; font-family: 微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif;}
.inputTextStyle:hover, .inputTextStyle:focus, .selectStyle:hover,.selectStyle:focus{ border-color: #ff6fd9;}
.inputTextStyle:disabled,.selectStyle:disabled{ background-color: #fff; color: #888888; cursor: default;}
.inputTextStyle:disabled:hover,.selectStyle:disabled:hover{ border: #888888 3px solid;}

.voteSelect{ width: 49%; position: relative;}
.voteSelect select{ width: 100%; background-color: #fff;}
.voteSelect::before{ position: absolute; top: calc(50% - 7px); right: 12px; width: 18px; height: 18px; font-size: 18px; color: #963464; z-index: 1; pointer-events: none;}
.voteSelect:hover::before{ color: #ff6fd9;}

.voteSearchBox{ width: 49%; position: relative;}
.voteSearchBox input{ width: 100%;}
.voteSearchBtn{ position: absolute; top: 0; bottom: 0; right: 4px; width: 42px; height: 80%; margin: auto 0; font-size: 20px; border: 0; background: #fff; color: #963464; cursor: pointer;}
.voteSearchBtn:active{ color: #ff6fd9;}

/*--voteList-----------------------------------------*/
.voteList{ display: flex; flex-wrap: wrap; margin-top: 10px;}
.voteList li{ /*width: 80%; max-width: 280px; margin: 15px auto;*/width: 48%; max-width: inherit; margin: 0 1% 8px 1%; padding: 10px 0; /*background-color: #fff; box-shadow: rgba(75,0,212,0.2) 0 2px 7px;*/ border-radius: 10px; font-weight: bold;}
.voteW{ width: 90%; margin: 0 auto;}
.voteTop{ display: flex; justify-content: space-between; align-items: center; background-color: #e783e6;}
.voteNumber{ /*overflow: hidden;*/ width: 56px; height: 29px; line-height: 29px; padding: 6px 0 6px 8px; color: #fff; font-size: 1.35rem; background-color: #cc45cb; position: relative;}
.voteNumber::after{ content: ""; width: 15px; height: 100%; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250620_rock/images/vote_deco3.png); position: absolute; top: 0; right: -14px; background-position: top left; background-size: contain; background-repeat: no-repeat;}
.voteNumber::before{ content: ""; width: 63px; height: 20px; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250620_rock/images/vote_deco1.png); position: absolute; top: -11px; left: 0; background-size: contain; background-repeat: no-repeat;}
.voteAuthor{ overflow: hidden; padding: 5px 8px 5px 10px; color: #fff; font-size: 1.5rem; line-height: 1; text-align: right; word-wrap: break-word;}

.votePic{ position: relative; overflow: hidden; background-color: #fff; border: #e783e6 4px solid; border-top: 0; border-radius: 0 0 10px 10px;}
.votePicBg{ aspect-ratio: 100/141;}
.votePic img{ display: block; width: 100%; width: 94%; margin: 0 auto; padding: 5px;}
.votePic img.votePicPosi{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; transition: transform 0.5s;}
.votePic img.votePicPosi:hover{ transform:scale(0.95); transition: transform 0.5s;}

.voteBottom{ padding: 1px 0 10px 0; background-color: #e783e6; border-radius: 10px;}
.voteGetNum{ margin-top: 8px; padding: 4px 0; border: #d9d9d9 1px solid; color: #666666; background-color: #fff; font-size: 1.3rem; text-align: center; border-radius: 5px;}
.voteGetNum span{ color: #963464; font-size: 2rem;}
.voteBtn{ margin-top: 8px; padding: 7px 0 4px 0; background-color: #d8ff00; color: #66770a; font-size: 1.8rem; border-bottom: #bddc0f 6px solid; text-align: center; border-radius: 5px; cursor: pointer;}
.voteBtn:hover{ background-color: #e8ff99;}
.voteBtn:active{ background-color: #d8ff00;}
.voteBtn.voted{ padding: 9px 0 2px 0; background-color: #cc45cb; border-bottom: #cc45cb 6px solid; color: #ffffff; cursor: default;}
.voteBtn.over{ padding: 9px 0 2px 0; background-color: #e3e1e4; border-bottom: #e3e1e4 6px solid; color: #8b8b8b; cursor: default;}

/*--votePageNum--*/
.votePageNum{ display: flex; justify-content: center; flex-wrap: wrap; margin-top: 20px; color: #ffa7fe; font-size: 1.8rem;}
.votePageNum .onlyIcon[class^="bwi-"]::before{ font-size: 1.8rem;}
.votePageNum li{ width: 40px; height: 40px; margin: 0 5px 10px 5px; line-height: 40px; text-align: center; border: #ffa7fe 2px solid; border-radius: 5px; cursor: pointer; font-weight: bold;}
.votePageNum li:hover, .nowPage{ background-color:#ff6cfd; color: #fff;}
.votePageNum li:active{ background-color: #d42ad2; color: #fff;}
.votePageNum li.nowPage:hover{ background-color: #ffa7fe;}
.votePageNum li.pageArrowL{ margin-right: 15px;}
.votePageNum li.pageArrowR{ margin-left: 15px;}

/*--明細--*/
.getListTheme{ display: none;}
.getList{ font-size: 1.8rem; border: #bc5eff 5px solid; background-color: #fff; font-weight: bold;}
.getList > li{ padding: 15px;}
.getList > li:first-child{ border-bottom: #dbc3ec 1px solid;}

.get1{ color: #6d289e;}
.get2{ color: #747474; margin-top: 2px; font-size: 1.5rem; line-height: 1.2;}
.get3{ color: #af61e7; margin-top: 10px; font-size: 2rem;}
.getLink{ display: inline-block; padding: 3px 30px; background-color: #ffe671; border-radius: 100px; color: #9d6b23; transition: transform 0.5s;}
.getLink:hover{ transform:scale(0.9); transition: transform 0.5s; background-color: #9d6b23; color: #fff;}

.getYet{ display: block; padding: 20px 0; font-size: 2rem; color: #985dc3; text-align: center;}

/*--啟用碼使用方式--*/
.voteDeco{ display: flex; justify-content: space-between; margin-top: 20px;}
.voteDeco img{ display: block; width: 30%;}
.voteDeco1{ margin-left: 5%;}

.useBox{font-size: 1.6rem; font-weight: bold; background-color: #fff; border: #e783e6 5px solid; border-radius: 20px;}
.useTitle{ padding: 15px 0; background-color: #e783e6; font-size: 2rem; color: #fff; text-align: center; font-weight: bold; line-height: 1.2;}
.useBorder{ padding: 15px; /*margin: 15px; border: #ffe671 8px solid; border-radius: 20px;*/}

.useList1{ padding-left: 28px; padding-right: 18px;}
.useList1 > li{ list-style-type: disc; margin-top: 20px; line-height: 1.2;}
.useList1 > li:first-child{ margin-left: -15px; margin-top: 0; list-style-type: none; font-size: 2rem; color: #ec4fc9;}

.useList2{ padding-left: 28px; padding-right: 18px;}
.useList2 > li{ list-style-type: decimal; margin-top: 20px;}


/*////--detail.html-----------------------------------------*/
.detailBox{ padding-top: 35px; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250620_rock/images/bg4.png); background-position: top center; background-size: cover; background-repeat: no-repeat;}
.detailBox .area04{ padding-top: 15px;}

/*detailTopBar*/
.detailTopBar{ display: flex; justify-content: space-between; padding: 8px 20px 20px 20px; background-color: #bc7aec; color: #fff; border-radius: 10px; font-weight: bold;}
.detailTopBar li [class^="bwi-"]::before{ top: 9px;}

.barBack{ font-size: 1.8rem;}
.barBack a{ text-decoration: none;}
.barBack [class^="bwi-"]{ margin-right: 8px; font-size: 3.5rem;}
.barNext [class^="bwi-"]{ margin-right: 20px;}
.barNext [class^="bwi-"]:last-child{ margin-right: 0;}
.barNext span{ cursor: pointer;}
.barBack:hover, .barNext span:hover{ color: #fff393;}
.barBack:active, .barNext span:active{ color: #fff;}
.onlyIcon{ font-size: 0;}
[class^="bwi-"].onlyIcon::before{ font-size: 3.5rem;}

/*detailCon*/
.detailCon{ padding-bottom: 15px; /*background-color: #fff; border: #000 8px solid; border-top: 0;*/ border-radius: 0 0 10px 10px; font-weight: bold;}
.detailPic{ max-width: 600px; margin: 10px auto 0 auto; border: #bc7aec 8px solid; border-radius: 20px; overflow: hidden;}
.detailPic img{ display: block;}
.detailInfo{ width: 98%; margin: 0 auto; padding-top: 10px;}

.detailCon .voteTop{ margin-top: 15px; padding-right: 10px; border-radius: 0 100px 100px 0;}
.detailCon .voteBottom{ margin-top: 10px; padding: 2px 10px 10px 10px;}
.detailInfo .voteAuthor{ height: 22px; font-size: 1.9rem;}
.detailTitle{ width: 85%; margin-top: 20px;}
.detailTitle img{ display: block; width: 100%;}
.detailTxt{ margin-top: 5px; padding: 10px 15px; color: #683a7c; font-size: 1.7rem; background-color: #fff; border: #bc7aec 5px solid; border-radius: 10px;}
.detailShare{ display: flex; width: 90%; max-width: 300px; margin: 15px auto 0 auto;}
.detailShare a{ display: block; margin: 0 5px; flex: 1;}
.detailShare a img{ display: block; width: 100%; aspect-ratio: 1/1;}
.detailShare .copyLink{ background-color: transparent; margin: 0 2%; flex: 1;}

.detailInfo .voteGetNum{ padding: 7px 0;}
.detailInfo .voteBtn{ padding: 10px 0 7px 0;}
.detailInfo .voteBtn.voted, .detailInfo .voteBtn.over{ padding: 12px 0 5px 0;}

/*end*/
.end{ padding: 20px; margin-bottom: 10px; background-color: #603175; border-radius: 10px; font-size: 25px; color: #ffffff; text-align: center; font-weight: bold;}

/*////--award.html-----------------------------------------*/
.awardBox{ background-color: #8d8bc9; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250620_rock/images/bg5.png); background-size: 134%; background-position: top center; background-repeat: no-repeat;}
/* .awardBox{ background-color: #d5ffa7;} */
.awardNumTitle{ width: 90%; margin: 0 auto; padding-top: 15px;}
.awListColumn .awardNumTitle{ width: 90%;}
.awardNumTitle img{ display: block; width: 100%;}
.awList{ padding-bottom: 25px; border-bottom: #dad9ff 1px dashed;}
.authorBox{ display: flex; margin-top: 10px;}
.authorPic{ width:35px; height: 35px; margin-right: 10px;}
.authorName{ display: flex; align-items: center; font-size: 1.8rem; font-weight: bold;}
.authorName span{ padding: 1px 5px; margin-right: 5px; color: #181889; font-size: 1.4rem; background-color: #ffffff; font-weight: normal;}
.authorName p{ padding-bottom: 2px; color: #fff6ad; border-bottom: #fff6ad 3px solid;}

.authorDraw{ position: relative; width: calc(100% - 30px); margin-top: 10px; border: #7370d0 7px solid; padding: 8px; background-color: #fff; border-radius: 10px;}
.authorDraw img{ display: block; width: 100%;}
.bgDeco{ position: absolute; width: 58px;}
.bgDeco01{ top: 37px; right: -58px;}
.bgDeco02{ bottom: 30px; left: -58px;}
.bgDeco03{ bottom: 30px; right: -58px;}
.bgDeco04{ top: 37px; left: -58px;}
.bgDeco05{ top: 104px; right: -58px;}
.bgDeco06{ bottom: 75px; left: -58px;}

.teacherBox{  padding: 5px 0;}
.teacherHead{ display: flex; align-items: center; font-size: 2rem; color: #2c2c8e; font-weight: bold;}
.teacherHpic{ width: 45px; height: 45px; margin-right: 10px;}
.teacherSay{ margin-top: 15px;}
.teacherName{ display: none;}
.teacherTxt{ position: relative; padding: 8px 12px; font-size: 1.8rem; color: #fff; background-color: #50509d; border: #50509d 3px solid; border-radius: 5px;}
.teacherTxt::before,.teacherTxt::after{ content: ""; position: absolute; border-top: transparent 0 solid;}
.teacherTxt::before{ top: -11px; left: 7px;  border-bottom: #50509d 10px solid; border-left: transparent 10px solid;  border-right: transparent 10px solid;}
.teacherTxt::after{ top: -8px; left: 9px;  border-bottom: #50509d 10px solid; border-left: transparent 8px solid;  border-right: transparent 9px solid;}

.no1BookshielfBox{ width: 80%; margin: 20px auto 0 auto; padding-bottom: 8px; color: #aba096; text-align: center;}
.shielfBg{ display: none !important;}
.shielfPic img{ display: block;}
.shielfBtn{ display: block;  margin: 10px 10px 1px 10px;}
.shelfLimit{ font-size: 1.6rem; color: #ffffff; font-weight: bold;}

/*--人氣獎額外說明--*/
.ninkiInfo{ margin: 30px auto 0 auto; padding: 8%; border: #7370d0 8px solid; background-color: #fffdf4; font-size: 1.5rem; color: #737373; border-radius: 20px; font-weight: bold;}
.ninkiTxt{ margin-top: 15px;}
.ninkiTxt p{ margin-top: 10px; padding-top: 10px; border-top: #927b81 1px dotted;}
.txtXL{ font-size: 1.8rem;}
.txtS{ font-size: 1.4rem;}
.txtImpor{ display: inline-block; padding: 4px 13px; margin-top: 3px; color: #fff; background-color: #00a87e; border-radius: 24px;}
.txtImpor2{ color: #00a87e;}

/*--總評-----------------------------------------*/
.allSayTitle{ width: 100%; margin-top: 15px;}
.allSayTitle img{ display: block; width: 100%;}
.allSayList{ margin-top: 5px; padding: 6% 5%; background-color: #f2f9f3; border: #7370d0 8px solid; font-size: 1.8rem; font-weight: bold; color: #565656; border-radius: 10px; font-weight: bold;}
.allSayList > li p + p{ margin-top: 20px;}

/*--ebook-----------------------------------------*/
.ebookBox{ background-color: #d9d8ff; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250620_rock/images/bg5.png); background-size: 134%; background-position: top center; background-repeat: no-repeat;}
.ebookList{ width: 94%; margin: 20px auto 0 auto;}
.ebookList img{ display: block; width: 100%;}
.ebookList > li:nth-child(1) .shielfBtn{ width: 65%; margin: 15px auto;}
.ebookList > li:nth-child(2){ margin-top: 30px;}
.ebookList > li:nth-child(2) .shielfBtn{ margin-top: 0;}

/*--sweetAlert-----------------------------------------*/
/*獲得贈品*/
.getGift{ font-size: 1.8rem; font-weight: bold;}
.getGift a{ font-size: 1.3rem; color: #518eff; text-decoration: none;}
.getGift a:hover{ text-decoration: underline;}
.getGiftImpor{ color: #a654aa;}

.sweetBtn{ padding: 3px 10px; font-size: 1.4rem; font-weight: bold; cursor:pointer;}

/*--767up(Pc)------------------------*/
@media screen and (min-width:767px) {
    /*--loading載入中--------------------------------*/
    /*loading文字*/.loadingTxt{ font-size: 2.5rem; }

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

    /*至頂選單*/
    .menuBox{ left: 3%; right: inherit; margin: inherit; width: 40%; max-width: 554px;}

    /*--contain-----------------------------------------*/
    .areaWidth{ max-width: 910px; padding-bottom: 20px;}
    .areaWidth2{ max-width: 1100px; padding-bottom: 40px;}
    .mainTitle{ width: 65%; margin: 0 auto;}
    .mainTitle.specialMainTitle{ padding-top: 50px;}

	.mainTitle2{ width: 100%; margin: 0 auto;}
    .mainTitle2.specialMainTitle2{ padding-top: 50px;}
	
	.mainTitle3{ width: 85%; margin: 0 auto;}
    .mainTitle3.specialMainTitle3{ padding-top: 50px;}
	
    .area01{ background-size: 100%;}
    .area02, .area03, .area04{ background-attachment: fixed; background-size: 100%;}
    /* .area02{ padding-top: 60px;} */

    /*--area01(活動內容)-----------------------------------------*/
    .calendarBox{ width: 100%; padding-top: 80px;}
    /* .calendarBox{ flex-wrap: nowrap; gap: 2%;}
    .calendarBox li{ margin: 0 0 3px 0;}
    .calendarBox li:last-child{ margin-top: 0;} */
    .activeInfoBox{ width: 100%; margin: 20px auto 0 auto;}
    .activeInfoTxt{ width: 100%; margin: 30px auto 0 auto; font-size: 2.2rem; font-weight: bold; text-align: center;}
    .joinBtn{ width: 45%; margin: 20px auto 0 auto;}

    /*贊助商Banner*/
    .clipBanner{ width: 90%; margin: 40px auto 15px auto;}

    /*--area02(精彩回顧)-----------------------------------------*/
    .historyBox { position: relative;}

    /*swiper*/
    .historyBox .swiper-button-next{ display: block; top: 53%; right: -20px; width: 54px;}
    .historyBox .swiper-button-prev{ display: block; top: 53%; left: -20px; width: 54px;}

    /*--area03(評選獎勵)-----------------------------------------*/
    .awardInfoBox{ padding: 0; font-size: 2.2rem; font-weight: bold;}
    .awardInfoTilte{ width: 28%;}
    .awardInfoBox p{ margin-bottom: 30px; padding-bottom: 30px;}

    .awardTeacherBox{ display: flex; align-items: center; gap: 5%; padding: 1% 5%;}
    .teacherPic{ flex: 1; padding-bottom: 20px;}
    .teacherInfo{ flex: 1.3; font-size: 2.2rem;}
    .teacherInfo a{ font-size: 2rem;}

    /* .awardIconBox{ display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin: 0 auto;} */
    .awardIconBox + .awardIconBox{ margin-top: 0;}
    /* .awardIconBox li{ width: 47%; margin: 0 1.5%;} */
    .mgT{ margin-top: 0;}

    /*--感謝贊助-----------------------------------------*/
    .footerSponsor{ padding: 30px 0;}
    .footerSponsor img{ max-width: 350px;}

    /*--mangaBox(國人漫畫)-----------------------------------------*/
    /* .mangaBox li{ width: 24%; margin-bottom: 0;}
    .moreBtn{ width: 40%;} */

    /*--fixedBtnBox-----------------------------------------*/
    .fixedBtnBox{ bottom: 14%;}
    .fixedBtnBox li{ margin-bottom: 8px;}
    .sideBtn, .sideInfo{ height: 167px;}

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

	.hover1 a{ display: block; transition: 0.4s;}
    .hover1 a:hover{ transform: scale(0.9);}/*滑入縮小*/
	
	/*--滑鼠滑入效果(變淡)--------------------------------*/
	.hover2 li a:hover img{filter:alpha(Opacity=30);-moz-opacity:0.3;opacity: 0.3;}	
    /*sweetAlert*/

    /*////--method.html-----------------------------------------*/
    .area01.method{ padding-top: 30px;}
    .method .calendarBox{ padding-top: 0;}
    .methodBox{ font-size: 2.2rem; margin-bottom: 15px;}
    .methodMainTitle{ max-width: 450px;}
    .methodMainTitle + .methodBox{ margin-top: -7%; padding-top: 8%;}
    .methodTitle{ width: 35%;}
    .sec{ font-size: 1.9rem;}
    .oneLine{ padding-top: 9px; padding-bottom: 8px;}/*只有一行的時候*/

    /*活動辦法*/
    .step{ font-size: 3rem;}
    .stepBox{ padding-left: 14%; padding-right: 8%;}
    .stepNum{ width: 40px; height: 40px; margin-left: -65px; border: #8621cd 5px solid; color: #8621cd; line-height: 40px; border-radius: 40px;}
    .logoBtn{ padding: 2px 20px 0 20px; font-size: 2.2rem;}

    /*--list--*/
    .listOutBox{ padding: 20px 8% 0 8%;}
    .listBox2 { margin-top: 20px;}
    .listBox2 > li{ margin-bottom: 24px; font-size: 1.8rem !important;}
    .copyBtn{ font-size: 2rem;}
    .listBox{ margin-bottom: 14px;}
    .listStyle{ padding-left: 30px;}

    /*主辦單位logo*/
    .mainBW{ vertical-align: sub;}

    /*評審介紹*/
    .teacherIntroBox{ margin-bottom: 25px; padding: 3.5% 3.5% 2% 3.5%;}
    .teacherIntroMain{ display: flex; flex-wrap: wrap;}
    .teacherIntroMain > li:first-child{ width: 22%; margin: 0;}
    .teacherIntroMain > li:last-child{ width: 60%; margin-top: 15px; margin-left: 4%;}

    .teacherIntroCon{ font-size: 2rem; font-weight: bold;}
    .teacherIntroCon > li{ padding: 10px 0;}

    /*評審社群icon*/
    .teacherBtn1{ width: 39px; margin-right: 15px;}
    .teacherBtn2{ width: 140px; margin-right: 25px; margin-top: 10px;}

    /*////--special.html-----------------------------------------*/
    /* .specialInfoBox{ width: 70%; margin: 15px auto 0 auto;}
    .specialBox{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%;}
    .specialBox > li{ width: 32%;}
    .specialBookBtn{ margin-top: 15px;} */
    .saleMore{ max-width: 410px; margin: 0 auto;}

    /*////--vote.html-----------------------------------------*/
    .voteSaleBox{ display: flex; justify-content: space-around; max-width: 750px; margin: 0 auto; }
    .voteSaleBox li{ width: 48.5%;}

    .voteInfo{ margin-top: 20px;}
    .voteInfoTitle, .voteInfo{ width: 96%; font-size: 2rem;}
    .voteInfoTitle{ margin-left: 0.5%;}
    .goVote{ width: 35%; margin-top: 50px;}
    .voteFilterBox{ padding-top: 40px;}

    .teacherDeco{ width: 6%;}

    /*--voteList-----------------------------------------*/
    .voteMainTitle{max-width: 650px; padding-top: 40px;}
    .voteTitle{ max-width: 500px; padding-top: 20px; padding-bottom: 15px;}
    /* .voteList{ display: flex; flex-wrap: wrap; margin-top: 10px;} */
    .voteList li{ width: 24%; /*max-width: inherit;*/ margin: 8px 0.5%;}
    .voteNumber{  height: 22px; line-height: 22px;}
    .voteAuthor{ /*height: 23px;font-size: 1.8rem;*/}

    /*--votePageNum--*/.votePageNum{ margin-top: 30px;}

    /*////--detail.html-----------------------------------------*/
    .detailBox{ padding-top: 90px; background-attachment: fixed;}
    /*detailCon*/
    .detailTopBar li [class^="bwi-"]::before{ top: 8px;}

    .detailCon{ display: flex; align-items: flex-start; padding: 20px 0;}
    .detailPic{ flex: 4;}
    .detailInfo{ flex: 3; margin-left: 20px; padding-top: 0;}

    .voteGetNum, .voteBtn{ margin-top: 8px;}
    .detailTitle{ margin-top: 30px;}
    .detailTxt{ margin-top: 10px; font-size: 1.7rem;}
    .detailShare{ max-width: 280px; margin: 25px 0 0 0;}

    /*end*/
    .end{ padding: 30px; margin-bottom: 22px; font-size: 40px;}

    /*明細*/
    .getListTheme{ display: flex; padding: 5px 0 2px 0; font-size: 1.6rem; color: #fff; background-color: #bc5eff; font-weight: bold; text-align: center;}
    .getListTheme > li{ flex: 1;}
    .getList > li{ display: flex; align-items: center;}
    .getList p{ padding: 0 15px;}

    .get1{ flex: 1.2;}
    .get2{ flex: 1; font-size: 1.6rem;}
    .get3{ flex: 1; text-align: center; margin-top: 0;}

    /*--啟用碼使用方式--*/
    .voteDeco img{ width: 15%;}

    .useBox{ font-size: 1.6rem;}
    .useBorder{ padding: 40px 30px; margin: 15px; border: #d5f35d 8px solid; border-radius: 20px;}


    /*////--award.html-----------------------------------------*/
    .awardBox{ background-attachment: fixed; background-size: 100%;}
    .awardNumTitle{ width: 45%; padding-top: 40px;}
    .awOne{ width: 55%; margin: 0 auto;}
    .awList{ padding-bottom: 50px;}
    .authorBox{ margin-top: 20px;}
    .authorPic{ width:50px; height: 50px;}
    .authorName{ font-size: 2rem;}
    .authorName span{ padding: 2px 5px; font-size: 1.4rem;}

    .teacherBox{ display: flex;}
    .teacherHead{ display: block;}
    .teacherHead span{ display: none;}
    .teacherHpic{ width: 60px; height: 60px; margin-top: 8px; margin-right: 18px;}
    .teacherSay{ margin-top: 0; font-weight: bold;}
    .teacherName{ font-size: 2rem; color: #2c2c8e; display: block;}
    .teacherTxt::before{ top: 7px; left: -21px;  border-right: #50509d 10px solid; border-top: transparent 10px solid;  border-bottom: transparent 10px solid;}
    .teacherTxt::after{ top: 9px; left: -16px;  border-right: #50509d 10px solid; border-top: transparent 8px solid;  border-bottom: transparent 9px solid;}

    .awList.no1awList{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
    .awList.no1awList .awOne{ width: 58%;}
    .no1BookshielfBox{ width: 35%; margin: 20px auto 0 auto;}
    .shielfPic{ position: relative; background: none;}
    .shielfBg{ display: block !important;}
    .shielfMain{ position: absolute; bottom: 0;}

    .awListColumn{ display: flex; flex-wrap: wrap; justify-content: space-around;}
    .awListColumn .awList{ border-bottom: 0;}
    .awListColumn li{ width: 40%;}
    .awListColumn .awOne{ width: 100%;}
    .awListColumn .awardNumTitle{ width: 100%;}

    /*--人氣獎額外說明--*/
    .ninkiInfo{ width: 50%; margin: 50px auto 0 auto; padding: 30px 5%; font-size: 1.6rem;}
    .txtImpor{ margin-top: 0; margin-left: 6px;}

    /*--總評-----------------------------------------*/
    .allSayTitle{ display: none;}
    .allSayList{ margin-top: 20px; border: #7370d0 10px solid;}
    .allSayList.allSay1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250620_rock/images/allsay_bg1.png); background-size: 40%; background-position: center left; background-repeat: repeat-y;}
    .allSayList.allSay2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250620_rock/images/allsay_bg2.png); background-size: 40%; background-position: center right; background-repeat: repeat-y;}
    .allSayList.allSay1 > li{ padding-left: 40%;}
    .allSayList.allSay2 > li{ padding-right: 40%;}

    /*--ebook-----------------------------------------*/
    .ebookBox{ background-attachment: fixed; background-size: 100%;}
    /* .ebookList{ display: flex; flex-wrap: wrap; margin-top: 20px;}
    .ebookList > li:nth-child(1){ width: 60%;}
    .ebookList > li:nth-child(2){ width: 40%;} */
    .ebookList > li:nth-child(1) .shielfBtn{ width: 50%; margin: 20px auto;}


    /*--hover animate--------------------------------*/
    .mangaBox a, .moreBtn a, .voteSaleBox li a, .shielfBtn{ display: block;}
    .joinBtn a, .historyBox a, .specialBox a, .saleMore img, .clipBanner a{ display: block; transition: 0.4s;}
    .teacherBtn1, .teacherBtn2{ display: block;}
    .historyBox a:hover,.teacherBtn1:hover, .teacherBtn2:hover, .specialBox a:hover, .saleMore:hover img, .clipBanner a:hover{ transform: scale(0.9);}
    .joinBtn a:hover{ transform: translateY(10px);}

    @keyframes hoverAni{ from {transform:translateY(0);} to {transform:translateY(-5px);}}
    .mangaBox a:hover, .moreBtn a:hover,
    .logoBtn:hover, .voteSaleBox li a:hover, .detailShare a:hover, .copyLink:hover,
    .shielfBtn:hover{ animation:hoverAni 0.5s forwards;}

    .ebookCover{ display: block; transition: 0.4s;}
    .ebookCover:hover{ transform: rotate(-3deg) scale(0.9);}

    .joinBtn img{ animation: joinBtn 2s infinite;}
    @keyframes joinBtn {
        0%{ transform: scale(1);}
        50%{ transform: scale(0.9);}
        100%{ transform: scale(1);}
    }

}


/*--768-1023(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1023px) {
    .areaWidth{ width: 94%;}
    /*至頂選單*/.menuBox{ left: 3%; right: inherit; margin: inherit; width: 40%;}

    .area01, .area02, .area03, .area04{ background-attachment: inherit; background-size: 100%;}

    /*--area01(活動內容)-----------------------------------------*/
    .activeInfoBox{ margin-top: 20px;}
    .activeInfoTxt{ width: 90%; margin-top: 20px; font-size: 2.2rem;}
    .joinBtn{  margin-top: 30px;}

    /*--area03(評選獎勵)-----------------------------------------*/
    .awardInfoBox{ font-size: 2.2rem;}
    .awardInfoTilte{ width: 40%;}
    .awardInfoBox p{ margin-bottom: 30px; padding-bottom: 30px;}

    /*評審*/
    .awardTeacherBox{ padding: 3% 5%;}
    .teacherInfo{ font-size: 2.2rem;}
    .teacherInfo a{ font-size: 1.8rem;}

    /*--voteList-----------------------------------------*/
    /* .voteList{ display: flex; flex-wrap: wrap; margin-top: 10px;} */
    .voteList li{ width: 32.3%; /*max-width: inherit; margin: 8px 0.5%;*/}

    /*////--detail.html-----------------------------------------*/
    .detailBox{ background-attachment: inherit;}

    .awardBox{ background-attachment: inherit; background-size: 134%;}
    .ebookBox{ background-attachment: inherit; background-size: 134%;}

}


/*--voteList-----------------------------------------*/
@media screen and (max-width:320px) {
    .voteGetNum{ font-size: 1.2rem;}
    .voteGetNum span{ font-size: 1.8rem;}
    /* .voteBtn{ font-size: 1.6rem;} */
    .detailInfo .voteGetNum{ font-size: 1.3rem;}
    .detailInfo .voteGetNum span{ font-size: 2rem;}
}

.awardNumTitle img{ aspect-ratio: 750/173;}
.authorPic img{ aspect-ratio: 1/1;}
.authorDraw img{ aspect-ratio: 600/849;}
.teacherHpic img{ aspect-ratio: 1/1;}
.allSayTitle img{ aspect-ratio: 750/198;}




/*--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-13s{-webkit-animation-delay:1.3s;animation-delay:1.3s;}