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

/*--PC、M的隱藏/顯示設定--*/
.pcNo{ display: block;}
.mNo{ display: none;}
.mINBLpcNO{ display: inline-block;}
.pcINBLmNO{ display: none;}

/*--特殊色：文字、連結、heighLight--*/
.heighLightPurple{ background-color: #6f64d1; padding: 0 5px;}
.heighLightGreen{ display: inline-block; margin: 4px 0; background-color: #a7e0a6; padding: 0 5px;}
.heighLightRed{ display: inline-block; margin: 4px 0; background-color: #e7cdc9; padding: 0 5px;}
.txtPurple{ color: #c925bc;}
.txtGreen{ color: #dcff0e;}
.txtRed{ color: #df3f24;}
.txtBrown{ color: #885d00;}
.txtBlue{ color: #2487e0;}
.txtYellow{ color: #f7fc30;}
.alink{ color: #0076df; text-decoration: none;}
.alink:hover{ text-decoration: underline;}

/*區塊上下間距-----------------------------------------*/
.bgPadT{ padding-top: 30px;}
.bgPadB{ padding-bottom: 30px}

.bgPadT2{ padding-top: 0;}
.bgPadB2{ padding-bottom: 0;}

.bgPadB3{ padding-bottom: 20px;}

.bgPadTm{ padding-top: 12px;}
.bgPadBm{ padding-bottom: 12px;}

.bgPadTm2{ padding-top: 15px;}
.bgPadBm2{ padding-bottom: 15px;}

/*背景圖-----------------------------------------*/
.bg1{ background-color: #6c00db; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260915_KaijuPrincess/images/bg1.png); background-position: top center; background-size: 400%;}
.bg2{ background-color: #5200a7; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260915_KaijuPrincess/images/bg2.png); background-position-x: 43%; background-size: 140%; background-repeat: no-repeat;}
.bg3{ background-color: #ff5fd7; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260915_KaijuPrincess/images/bg3.png); background-position-x: center; background-position-y: -2.5%; background-size: 156%;}
.bg4{ background-color: #ff24c8; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260915_KaijuPrincess/images/bg4.png); background-position: top center; background-size: 280%;}

/*--header-----------------------------------------*/
/* .headerW{ max-width: 800px; margin: 0 auto; border: #f2dcee 8px solid; overflow: hidden;} */
.headerBox{ overflow: hidden; position: relative;}
.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;}

/*--pc刊頭放大鏡透視效果-----------------------------------------*/
.seeBox{ position: relative; overflow: visible; user-select: none;}

/*原本看到的圖片*/
.originalImg { position: relative; display: block; width: 100%; height: auto; z-index: 1; pointer-events: none;}

/*透視圖片的裁切層*/
.secretMask{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; clip-path: circle(0px at 0px 0px);/* 一開始完全隱藏 */}

/*真正的透視圖片*/
.secretImg{ position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; pointer-events: none;}

/*放大鏡 PNG*/
.headerBox .magnifier{ display: none; position: absolute; top: 0; left: 0; width: 36%;/*放大鏡尺寸，可自行調整*/ height: auto; max-width: none; z-index: 3; pointer-events: none;}

/*滑鼠進入圖片後隱藏原本游標*/
.seeBox.isActive{ cursor: none;}

/*顯示放大鏡*/
.seeBox.isActive .magnifier{ display: block; filter: drop-shadow(0 0 8px rgba(255, 0, 200, .7)) drop-shadow(0 0 18px rgba(255, 0, 200, .35)); animation: flashAni 1.5s infinite;}
@keyframes flashAni { 
    0%{ filter: drop-shadow(0 0 8px rgba(255, 0, 200, .7)) drop-shadow(0 0 18px rgba(255, 0, 200, .35));}
    50%{ filter: drop-shadow(0 0 8px rgba(255, 0, 200, 0)) drop-shadow(0 0 18px rgba(255, 0, 200, 0));}
    100% { filter: drop-shadow(0 0 8px rgba(255, 0, 200, .7)) drop-shadow(0 0 18px rgba(255, 0, 200, .35));}
}


/*--m刊頭放大鏡透視效果-----------------------------------------*/
.seeBoxMobile { --lensY: 49%; /*透視放大鏡固定高度，可自行調整*/
 position: relative; overflow: hidden; user-select: none;}

/*原本看到的圖片*/
.originalImgMobile{ position: relative; display: block; width: 100%; height: auto; z-index: 1; pointer-events: none;}

/*透視圖片裁切層*/
.secretMaskMobile { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none;
 clip-path: circle(0px at 50% var(--lensY)); /*一開始完全不顯示透視圖片*/}

/*真正的透視圖片*/
.secretImgMobile{ position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; pointer-events: none;}


/*----手機版透視放大鏡----*/
.headerBox .magnifierMobile {
	position: absolute; top: 0; left: 0;
	width: 60%; /*放大鏡尺寸，可自行調整*/
	height: auto;
	max-width: none;
	z-index: 5;

	/*一開始隱藏*/
	opacity: 0;
	visibility: hidden;

	/*隱藏時不能操作*/
	pointer-events: none;

	/*啟動後碰到放大鏡時不捲頁*/
	touch-action: none;

    /*外光暈效果*/
	filter: drop-shadow(0 0 8px rgba(255, 0, 200, .7)) drop-shadow(0 0 18px rgba(255, 0, 200, .35));
}

/* 點擊提示後顯示透視放大鏡 */
.seeBoxMobile.isMagnifierActive .magnifierMobile{ opacity: 1; visibility: visible; pointer-events: auto;}


/*----手機版放大鏡提示(一開始顯示)----*/
.headerMagnifier { position: absolute; bottom: -14%; left: 0; right: 0; width: 51%; margin: 0 auto; z-index: 6; cursor: pointer; 
 animation: headerMagnifier 1.5s infinite; -webkit-tap-highlight-color: transparent;}
 
.headerMagnifier img{ display: block; width: 100%; height: auto;}
@keyframes headerMagnifier {
	0%{ transform: scale(1);}
	50%{ transform: scale(.9);}
	100%{ transform: scale(1);}
}

/* 點擊後隱藏提示 */
.headerMagnifier.isHidden{ display: none;}


/*--contain-----------------------------------------*/
.contain{ overflow: hidden;}
/*區塊寬度*/
.areaWidth{ position: relative; width: 94%; margin: 0 auto;}
.areaWidth2{ position: relative; width: 94%; margin: 0 auto;}
.areaWidth3{ position: relative; width: 96%; margin: 0 auto;}
.areaWidth4{ position: relative; width: 94%; margin: 0 auto;}

/*主標寬度*/
.mainTitle{ width: 92%; margin: 0 auto 8px auto;}
.mainTitle2{ width: 100%; margin: 0 auto;}
.mainTitle3{ width: 100%; margin: 0 auto 0 auto; position: relative;}
.insideTitle{ width: 90%; margin: 0 auto;}

/*常用(定位+圖片block)*/
.posiRelative{ position: relative;}
.posiAbsolute{ position: absolute;}
.imgBlock100 img{ display: block; width: 100%;}
/*圖片滿版定位*/
.picFull{ position: absolute; top: 0; left: 0; width: 100%;}

/*PC+M同版*/
.areaWidthM{ position: relative; width: 94%; margin: 0 auto;}
.mainTitleM{ width: 100%;}
.wrapperHalf > li{ padding: 2%;}

/*--活動說明(點擊才展開)-----------------------------------------*/
.slideNotice{ overflow: hidden; width: 96%; margin: 0 auto; background-color: #534a72; border: #000000 8px solid; border-radius: 15px;}
.slideNotice .noticeTitle{ margin-bottom: 0; margin-top: 0; padding-bottom: 10px; font-size: 1.8rem; background-color: #000000; color: #ffffff;}

/*內容*/
.noticeCon{ margin: 0 auto; padding: 20px 0 20px 30px;}
.noticeCon .notice2{ margin: 0 auto; color: #ffffff;}

/*項目小標*/
.noticeCon .noticeSecTitle{ color: #ffffff; font-size: 1.8rem;}

/*第二層項目符號*/
/* .noticeCon .notice2 > li > ul > li{ list-style-type: disc;} */

/*連結顏色*/
.noticeCon .notice2 a{ color: #82fff5;}

/*ibon點擊才展開*/
.slideNotice .noticeCon{ display: none;}
.noticeSlideIcon{ display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 5px; font-size: 1.8rem; color: #000000; vertical-align: bottom; background-color: #ffffff; border-radius: 3px; cursor: pointer;}
.noticeSlideIcon .bwi-delete{ font-size: 1.6rem;}


/*--角色介紹-----------------------------------------*/
.charactorIntro{ margin-top: -5%; padding: 30px; border: #83ff46 4px solid; background-color: rgba(0,0,0,0.24); border-radius: 30px;}
.charactorIntro p{ font-size: 1.8rem; color: #ffffff; font-weight: bold;}

.charactorGameBtn{ width: 70%; margin: 15px auto 0 auto;}

/*--投票區-----------------------------------------*/
/*主標題*/
.voteMainTitleBox{ width: 90%; margin: 0 auto;}
.voteLoadingTxt{ width: 100%; padding: 30px 0; background-color: #000000; font-size: 3rem; color: #83ff46; font-weight: bold; text-align: center; border-radius: 20px;}

/*--voteList--*/
.voteList{ display: flex; flex-wrap: wrap; justify-content: center; margin-top: 10px;}
.voteList li{ /*width: 80%; max-width: 280px; margin: 15px auto;*/width: 48%; max-width: inherit; margin: 0 1% 8px 1%; padding: 3px 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: #000000; border: #d8ff00 2px solid; border-bottom: 0;}
.voteNumber{ /*overflow: hidden;*/ width: 65%; height: 20px; line-height: 20px; padding: 6px 0 6px 8px; color: #000000; font-size: 1.35rem; background-color: #d8ff00; position: relative;}
.voteNumber::after{ content: ""; width: 0; height: 0; border-top: 42px solid #d8ff00; border-right: 15px solid transparent; position: absolute; top: 0; right: -14px;}
/* .voteNumber::before{ content: ""; width: 63px; height: 20px; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260620_create/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: #000000; border: #d8ff00 2px solid; border-bottom: 0; border-top: 0; border-radius: 0;}
.votePicBg{ aspect-ratio: 100/56;}
.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;}
/*放大鏡*/
.votePicSeeIcon{ position: absolute; bottom: 8%; right: 5%; padding: 6px 6px; background-color: rgba(234,0,255,0.6); color: #ffffff; font-size: 1.8rem; line-height: 1; border-radius: 5px;}

/*--投票按鈕樣式--*/
.voteBottom{ padding: 1px 0 10px 0; background-color: #000000; border: #d8ff00 2px solid; border-top: 0; border-radius: 0;}
.voteGetNum{ margin-top: 3px; padding: 4px 0; color: #ffffff; background-color: #454545; font-size: 1.3rem; text-align: center; border-radius: 5px;}
.voteGetNum span{ color: #83ff46; font-size: 2rem;}
.voteBtn{ margin-top: 8px; padding: 9px 0 7px 0; color: #000000; font-size: 1.8rem; text-align: center; border-radius: 5px; cursor: pointer;
 background: linear-gradient(to bottom,  #83ff46 0%,#00fffc 100%);}

/*--投票按鈕樣式_滑鼠反應--*/
.voteBtn:hover{ background: linear-gradient(to bottom,  #01e42c 0%,#f0f900 100%); font-size: 1.8rem;}
.voteBtn:active{ background: linear-gradient(to bottom,  #83ff46 0%,#83ff46 100%);}
/*--當日的已投票按鈕顯示樣式--*/
.voteBtn.voted{ padding: 9px 0 7px 0; background: linear-gradient(to bottom,  #ff62fd  0%,#ff62fd  100%); color: #000000; cursor: default;}
.voteBtn.over{ padding: 9px 0 7px 0; background: linear-gradient(to bottom,  #00a895 0%,#00a895 100%); color: #07433c; cursor: default;}

/*--滿額贈活動-----------------------------------------*/

/*--紳夜福利-----------------------------------------*/
.eventBox{ width: 94%; margin: 15px auto 0 auto; border: #83ff46 6px solid; border-radius: 10px;}

/*--sweetAlert-----------------------------------------*/
/*預設按鈕文字大小*/.swal2-actions button {font-size: 1.4rem !important;}

/*投票贈品彈窗*/
.getGift a{ color: #009aff; font-size: 1.5rem;}
.getGiftImor2{ padding: 0 10px; background-color: #d4ff2e;}

/*--R18提醒彈窗--------------------------------------------------- */
/*大遮罩底色*/
.popOverlay{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(47, 35, 49, 0.99); transition: opacity 500ms; z-index: 10000; font-size: 1.4rem;}

/*popup內容底色*/
.popBox{ width: 93%; max-height: 90vh; padding: 40px 14px 14px; margin: 15px auto 0 auto; background: #d4cfbc;/*底色*/ border-radius: 5px; position: relative; transition: all 1s ease-in-out; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

/*popup內容高度設定*/
.popContent{ overflow-y: auto; max-height: 70vh; -webkit-overflow-scrolling: touch;}

/*popup提醒文字*/
.popAlert{ text-align: center; margin-bottom: 40px; padding: 15px 2% 25px 2%; color: #8d1a91;/*文字顏色*/ font-size: 1.8rem; font-weight: bold;}

/*popup按鈕樣式*/
.popBtnBox{ display: flex; gap: 15px;}
.ppBtn{ display: block; flex:1; padding: 0; line-height: 45px; border:#8d1a91 2px solid;/*按鈕邊框色*/ background-color: #d4cfbc;/*按鈕底色*/ color: #8d1a91;/*按鈕文字顏色*/ cursor: pointer;
 font-size: 1.8rem;  text-decoration: none; font-weight: bold; text-align: center; border-radius: 5px; font-family:Arial, Verdana, Microsoft JhengHei, sans-serif; outline:none;}
button.ppBtn{ -webkit-appearance: none; appearance: none;}
.ppBtn:hover{ background-color: #8d1a91; color: #fff;}/*按鈕滑入顏色*/

/*lightbox查看大圖，垂直致中*/
.lightbox{ position: fixed !important; top: 50% !important; transform: translateY(-50%);}

/*動畫設定(縮放)*/
.scaleAni{ animation: scaleAni 1.5s infinite;}
@keyframes scaleAni { 
    0%{ transform: scale(1) translateY(0);}
    50%{ transform: scale(1.1) translateY(-13px);}
    100% { transform: scale(1) translateY(0);}
}

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

    /*--PC、M的隱藏開啟設定--*/
    .pcNo{ display: none;}
    .mNo{ display: block;}
    .mINBLpcNO{ display: none;}
    .pcINBLmNO{ display: inline-block;}

    /*區塊上下間距-----------------------------------------*/
    .bgPadT{ padding-top: 60px;}
    .bgPadT2{ padding-top: 15px;}

    .bgPadB{ padding-bottom: 90px;}

    .bgPadB2{ padding-bottom: 0;}
    .bgPadB3{ padding-bottom: 40px;}

    /*背景圖-----------------------------------------*/
    .bg1, .bg2, .bg3, .bg4{ background-attachment: fixed;  background-position: top center; background-size: 100%;}

    /*--header-----------------------------------------*/
    /* .headerW{ border-width: 15px;} */


    /*--contain-----------------------------------------*/
    /*區塊寬度*/
    .areaWidth{ max-width: 1200px; padding-top: 0;}
    .areaWidth2{ max-width: 1300px;}
    .areaWidth3{ max-width: 900px;}
    .areaWidth4{ max-width: 1000px;}

    /*主標寬度*/
    .mainTitle{ width: 56%; max-width: 500px;}
    .mainTitle2{ width: 65%; max-width: 590px; margin: 0 auto;}
    .mainTitle3{ width: 100%;}

    .wrapper{ width: 40%; max-width: 620px; margin: 0 auto;}
    .wrapperHalf { width: 94%; margin: 0 auto;}
    .wrapperHalf > li{ padding: 2%;}

    /*--活動說明(點擊才展開)-----------------------------------------*/
    .slideNotice{ width: 100%; box-sizing: border-box;}
    .noticeCon{ padding: 26px 5% 26px 7%;}

    /*--角色介紹-----------------------------------------*/
    .charactorIntro{ margin: -5% 6% 0 14%; padding: 33px;}
    .charactorIntro p{ font-size: 1.9rem;}
    .charactorGameBtn{ width: 80%; margin: 20px auto 0 auto;}

    /*看更多按鈕*/
    .moreBtn{ max-width: 600px; margin: 0 auto;}

    /*--投票區-----------------------------------------*/
    /*--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; font-size: 1.5rem; line-height: 22px;}
    .voteAuthor{ /*height: 23px;font-size: 1.8rem;*/}

    /*放大鏡*/
    .votePicSeeIcon{ bottom: 5%; padding: 6px 6px; font-size: 2.2rem;}

    /*--紳夜福利-----------------------------------------*/
    .eventBox{ max-width: 600px; border: #83ff46 15px solid;}

    /*--R18提醒彈窗--------------------------------------------------- */
	.popBox{ width: 40%; margin: 50px auto; padding: 40px 20px 20px;}

    /*--hover animate--------------------------------*/
    .listBox li .charactorBtn a:hover { transform: scale(1) rotate(20deg) translateX(90px);}
    .moreBtn a, .eventBox a{ display: block; transition: 0.4s;}
    .moreBtn a:hover{ transform: rotate(-6deg);}
    .eventBox a:hover{ transform: scale(0.95);}
}

/*--768-1024(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1024px) { 
    /*背景圖-----------------------------------------*/
    .bg1, .bg2, .bg3, .bg4{ background-attachment: inherit;}

    /*--contain-----------------------------------------*/
    /*區塊寬度*/
    .areaWidth2{ max-width: 95%;}
    /*主標寬度*/
    .mainTitle3{ width: 90%;}

    .wrapperHalf > li{ padding: 2%;}

    /*--角色介紹-----------------------------------------*/
    .charactorIntro{ margin: -5% 3% 0 4%;}
    .charactorGameBtn{ width: 100%;}

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

    /*R18提醒彈窗--------------------------------------------------- */
    .popBox{ width: 60%;}

}

/*--1200以下------------------------*/
@media screen and (min-width:767px)  and (max-width:1200px) { 
    /*--contain-----------------------------------------*/
    .wrapper { width: 65%; margin: 0 auto;}

    /*--header-----------------------------------------*/
    .headerPadWidth{ overflow: hidden;}
    .headerPadWidth .headerBox{ width: 166%; margin-left: -33%;}/*平板刊頭放大(讓左右背景超出可視範圍)*/
}

/*--1500以上------------------------*/
@media screen and (min-width:1500px) { 
    .wrapperHalf { max-width: 1400px; margin: 0 auto;}

}

/*--320以下小手機------------------------*/
@media screen and (max-width:320px) {
    /*--投票區-----------------------------------------*/
    /*--voteList--*/
    .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;}
}


.charactorBox img{ aspect-ratio: 749/1297;}
.charactorBox .charactorGameBtn img{ aspect-ratio: 408/120;}
.moreBtn img{ aspect-ratio: 750/320;}
.eventBox img{ aspect-ratio: 1/1;}


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