@charset "utf-8";
/* a:hover{ opacity:0.9;} *//*滑鼠滑入半透明*/

/* set */
.mb_1 { margin-bottom: 3%;}
.mb_2 { margin-bottom: 6%;}
.pt_2 { padding-top: 3%;}
.pb_2 { padding-bottom: 3%;}
.pb_3 { padding-bottom: 6%;}
.txtPink{ color: #ff9f0e;}


/*--header--------------------------------*/
header img{ display: block; width: 100%;}
.mainBg{ background-size: cover; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250728_Kimetsu/images/bg1.png); background-attachment: fixed;}



.areaWidth6{ width: 100%;}/*20240613手機中間區塊*/
.bgs1{ background-size: auto 100%; background-position: center top; background-repeat: no-repeat; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250728_Kimetsu/images/bgs1.png);}
.bgs2{ background-size: auto 100%; background-position: center top; background-repeat: no-repeat;  background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250728_Kimetsu/images/bgs5.png);}
.bgs3{ background-size: auto 100%; background-position: center top; background-repeat: no-repeat;  background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250728_Kimetsu/images/bgs3.png);}
.bgs4{ background-size: auto 100%; background-position: center top; background-repeat: no-repeat;  background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250728_Kimetsu/images/bgs4.png);}

/*--content--------------------------------*/
.areaBox{ padding: 0px 0; background-position: top center; background-size: cover;}
.areaWidth7{ width: 50;}


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

 /*0719新的video*/
    /*純css底色*/
    .videoBgStyle1{ padding: 10px 12% 40px 12%;/*影片與背景間距*/ background-color: #2e3043;/*背景色*/ border-radius: 0 0 30px 30px;/*下方導圓角*/}
    /*壓圖片背景*/
    .videoBgPic{ padding: 2% 12% 5% 12%;/*影片與背景間距*/ background-image: url(https://cp-img.bookwalker.com.tw/event/2024/20240708_bluelock/images/videoBg1.png); background-size: 100%;/*背景圖等比例縮放*/ background-repeat: no-repeat;}

    .videoTitle{ width: 100%;}
    .videoTitle img{ display: block; width: 100%;}

    .videoTitle.pc{ display: block;}/*電腦版-顯示電腦標題*/
    .videoTitle.m{ display: none;}/*電腦版-隱藏手機標題*/
/*end-0719新的video*/



/*--movie_area--------------------------------*/
.area_movie { position: relative; z-index: 0;}
.movieTitle { width: 100%; margin: 0 auto; text-align: center; padding-top: 3%;} 
.title1m{ width: 90%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: block;}

.youtube{ width: 100%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: none;}
.youtubem{ width: 100%; margin: 0 auto; padding: 0px 0 0px 0px; position: relative; z-index: 1; display: block;}

/*--gift_area--------------------------------*/
.giftTitle{ width: 100%;}
.gift{ margin: 0 auto; text-align: center;}
.noticeBg2 { width: 80%; margin: 0 auto; word-break: break-all;}


.btn a { display: block; transition: 0.4s;}
.btn a:hover{ transform: scale(0.9);}/*滑入縮小*/


/*--social_area--------------------------------*/
.mediaImage { display: flex; justify-content: center;}
.mediaImage,.mediaLinks { width: 100%;}
.mediaLinks { margin-top: 20px; justify-content: center;}
.mediaLinks ul { display: flex; flex-direction: column; align-items: center;}
.mediaLinks li{ margin-bottom: 3%;}

/*--work_area--------------------------------*/
.workTitle { width: 100%;}
.work{ margin: 0 auto; text-align: center;}
.workItem{ display: flex;}

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



@keyframes sideBtn{ from {transform:translateX(calc(-100% - 40px));} to {transform:translateX(0);}}

/*--768-1023(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1023px) {
    
    
}

/*--767up(Pc)------------------------*/
@media screen and (min-width:767px) {
    .areaWidth6{ max-width: 1000px; margin: 0 auto;}/*20240613中間區塊，給他最寬只能多寬，並置中*/
    .areaWidth7 { width: 80%; margin: 0 auto;}

    .bgs1{ background-size: cover; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250728_Kimetsu/images/bgs1.png);}
.bgs2{ background-size: cover; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250728_Kimetsu/images/bgs5.png);}
.bgs3{ background-size: cover; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250728_Kimetsu/images/bgs3.png);}
.bgs4{ background-size: cover; background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20250728_Kimetsu/images/bgs4.png);}

	
    /*--content--------------------------------*/
    .areaBox{ overflow: hidden; padding: 0; background-attachment: fixed;}

	
	/*--video--------------------------------*/
    /*壓背景圖*/
    .videoWidth{ width: 90%;/*0119看電腦版影片要多大*/}
    .videoTicketBtn{ max-width: 400px;}
    .videoTicket{ max-width: 500px; margin: 0 auto; padding-top: 0px; padding-bottom: 0px; display: block;}


    /*純css底色*/
    .videoBgStyle1{ padding: 10px 12% 40px 12%;/*影片與背景間距*/ background-color: #2e3043;/*背景色*/ border-radius: 0 0 30px 30px;/*下方導圓角*/}
    .videoTitle{ width: 100%;}
    .videoTitle img{ display: block; width: 100%;}

	
    /*--movie_area--------------------------------*/
	.movie_title { position: absolute; width: 0%; margin: 0 auto; z-index: 1; top: -10px;}
	.youtube{ width: 100%; padding: 0px 0px 0px 0px; display: block;}
	.youtubem{ width: 100%; padding: 0px 0px 0px 0px; display: none;}
	
	/*--gift_area--------------------------------*/
    .giftTitle{ width: 90%; display: block;}
    .noticeBg2 { width: 80%; margin: 0 auto;}

    /*--social_area--------------------------------*/
    .mediaBox { display: flex; justify-content: space-between; flex-wrap: wrap; /* 小螢幕時可以換行 */ }
      
    .mediaImage { width: 60%;}
      
    .mediaLinks { width: 40%; display: flex; align-items: center; }
      
    .mediaLinks ul {width: 100%;}
      
    .mediaLinks li { margin-bottom: 10px;}

	/*--work_area--------------------------------*/
	.workTitle { width: 90%;}
    .workItem li { width: 33%; margin: 0 auto; margin-top: 5%; margin-bottom: 2%; }
}