@charset "utf-8";


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

/*--content--------------------------------*/

.areaBox{ padding: 0px 0; background-position: top center; background-size: cover;}
.areaWidth2{ max-width: 100%; padding: 40px 0% 40px 0%;}
.areaWidth3{ max-width: 100%; padding: 40px 0% 40px 0%;}
.areaWidth4{ max-width: 100%; padding: 40px 5% 40px 5%;}
.areaWidth5{ padding: 0 3%; margin-top: 100px; margin-bottom: 50px;}
.areaWidth6{ max-width: 100%; padding: 40px 5% 40px 5%;}

.mainTitle2{ width: 100%; margin: 0 auto;  display: block; text-align: center; margin-top: 0px;}
.mainTitle3{ width: 100%; margin: 0 auto; padding: 30px 0 40px 0; position: relative; z-index: 1;}
.mainTitle4{ width: 100%; margin: 0 auto;  display: block; text-align: center; margin-bottom: 3%;}

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

.mt-3{ margin-bottom: 3%;}

/* swiper */
/*swiper 設定----------*/
.swiperBox1{ width: 90%;/*寬度自訂*/ margin: 0 auto;/*置中*/ padding: 10px 10px 0px 10px;/*箭頭放在圖外面:依照箭頭跟點點的大小調整數值*/ position: relative;}
/*點點樣式設定*/
.swiperBox .swiper-pagination-bullet{ background: #ffffff; opacity: 1;}
/*點點被選到時的顏色*/
.swiperBox .swiper-pagination-bullet-active{ background: #03729f;}
/*設定箭頭顏色*/
.swiperBox .swiper-button-next:after, .swiperBox .swiper-button-prev:after,
.swiperBox .swiper-button-next, .swiperBox .swiper1-button-prev{ color: #ffffff; font-size: 40px;/*設定箭頭大小*/}
/*箭頭位置設定*/
.swiperBox .swiper-button-next, .swiper-button-prev{ top: calc(50% - 20px);/*扣掉上面.swiperBox的padding-bottom的40px的一半=20px*//*這樣才會置中*/}


/* TOP */
.headerBox{ position: relative;}
.header1{ position: absolute; top: 66%; width: 75%; left:10%; text !important; z-index: 1;}

/* bg */
.areaBg1{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg1.png"); background-position: top center; background-size: 160%;}
.areaBg2{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg2.png"); background-position: top center; background-size: 160%;}
.areaBg3{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg3.png"); background-position: top center; background-size: 160%;}
.areaBg4{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg4.png"); background-position: top center; background-size: 160%;}
.areaBg5{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg5.png"); background-position: top center; background-size: 160%;}
.areaBg6{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg6.png"); background-position: top center; background-size: 160%;}


/*--area1--------------------------------*/
.area_item01{ display: block; width: 80%; margin: 0 auto; margin-bottom: 10%; margin-top:10%; }
.area_item01{ cursor: pointer; animation: area_item01 1s infinite; }
@keyframes area_item01 { 
    50% { transform: scale(0.98);} 
    100%{ transform: scale(1);}
} 


.area_item02 { width: 90%; margin: 0 auto; margin-bottom: 50px;z-index: 0;}



/*--area2--------------------------------*/
.area2Books{ display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 5%; margin-top: 5%;}
.area2Books li{ width: 100%;  padding: 0px 1% 0 1%; } 

.area2Btn2{ text-align: center; width: 85%; margin: 0 auto;}

/*--area3--------------------------------*/
.area3Books{ width: 100%; margin: 0 auto; margin-bottom: 30px;}/*20240508*/
.area3Btn { display: flex; flex-wrap: wrap; justify-content: center; padding: 0px 1% 0px 1%;margin: 0 auto; width: 90%;} 
.area3Btn li{ margin-bottom: 10px;}

.bookList{ margin: 0 auto;}
.btnList{ margin: 0 auto; width: 70%;}

/*--area4--------------------------------*/
.area4Item{ margin: 0 auto; justify-content: center;}
.area4Item li { display: flex; align-items: center; justify-content: center; transition: 0.4s; width: 100%; margin: 0 auto;}
.area4Item li img{ width: 100%; height:auto; display: block; }

/*--area5--------------------------------*/
.area5Btn{ cursor: pointer; animation: area5Btn 1s infinite; margin-bottom: 5%;}
@keyframes area5Btn { 
    50% { transform: scale(0.98);} 
    100%{ transform: scale(1);}
} 
.area5Books { width: 90%; margin: 0 auto; margin-bottom: 10%;}

.area5Info { width: 90%; margin: 0 auto; margin-bottom: 5%;}
.area5Btn a{ display: block;}

.area5{ position: relative;}
.pic_btn a{ display: block; width: 100%; width: 70%;}
.pic_btn{ position: absolute;  display: block;  top: 2%;left: 65%;}


/*--area6--------------------------------*/

.area6Content2 { display: block;}
.area6Content2 li{ margin: 0 auto;}
.area6Btn { display: flex; justify-content: center;}
.area6Btn li { width: 90%;}
.area6Content { display: none; margin-top: 40px; margin-bottom: 50px;}
.area6Content3 { margin-top: 40px; margin-bottom: 50px;}
.area6Btn{ display: flex; flex-wrap: wrap; justify-content: center;}
.area6Btn li{ width: 90%; margin-bottom: 10px;}
.area6Btn2{ text-align: center; width: 75%; margin: 0 auto;}

/*--gameInfo--------------------------------*/

.gameInfo{ padding-bottom: 10%; margin-top: 3%;}
.gameInfo li a{ color: #ffffff; text-decoration: underline;}


  
  /*內容*/
  .mainTabCon { margin-bottom: 20px; padding-bottom: 20px; background-size: 100%; background-repeat: no-repeat;}
  .bookItem_m{ border-radius: 16px; padding: 1%; max-width: 88%; margin: 0 auto 16px auto; }
  .bg-1{ background-color: #533026; opacity: 0.88; border-radius: 0.5%;}
  .bg-2{ background-color: #e7cdb6; opacity: 0.88; border-radius: 0.5%;}

  /*--切換區-----------------------------------------*/
  .tabBox_pc{ display: none;}
  .tabBox{ width: 94%; margin: 0 auto; padding-top: 50px;}
  .tabBox_mb{display: block; padding: 20% 0; margin-top: -40%; margin-bottom: -20%;}
  .bookItem_m { text-align: center; position: relative;}
  
  /* 影片 */
  .videoGroup{ display: flex; flex-wrap: wrap; margin-top: 6%;}
  .videoGroup li{ width: 48%; margin: 0 auto; margin-bottom: 8%; padding: 5%;}
  .videoGroup.listBox{ padding: 0;}
  .videoGroup.listBox.ul-pc2 > li{ padding: 0 5%;}

  .ytVideoBox{ position: relative; z-index: 1; margin: 0 10px;}
  .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;}
  
  /*頁籤*/
  .tabMenu img{ display: block;}
  .tabMenu{ display: none;}
  .tabMenu li { transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;} 
  .tabMenu li:hover { filter: brightness(130%) drop-shadow(0 0 8px rgba(255,255,255,0.6));}
  


/*--767up(Pc)------------------------*/
@media screen and (min-width:767px) {
    .bgHeaderBao{ display: block;}
	.headerPic{ position: absolute; top:0%; left:0; right: 0%; margin: 0 auto;}	
    .headerTitle{ width: 0%; }
    .headerBao{ top: 54%; left: 5%; width: 28%;}
	.headerGiftBao,.bgHeaderM{ display: none;}

    .pcNo{ display: none;}
    .mNo{ display: block;}
    .w-90{ width: 90%; margin: 0 auto;}

    /*--content--------------------------------*/
    .areaWidth{ max-width: 1200px;  margin: 0 auto; margin-top: 60px; margin-bottom: 100px; padding-bottom: 40px;}

	.areaWidth2{ max-width: 1200px;  margin: 0 auto; margin-top: 0px; margin-bottom: 50px;  margin-left: 45%;}
	.areaWidth3{ max-width: 1200px;  margin: 0 auto; margin-top: 0px; margin-bottom: 50px;  margin-left: 45%;}
	.areaWidth4{ max-width: 1000px;  margin: 0 auto; margin-top: 0px; padding-bottom: 40px;}
    .areaWidth5{ max-width: 1920px;  margin: 0 auto; padding-bottom: 40px;}
	.areaWidth6{ max-width: 1200px;  margin: 0 auto; margin-top: 0px; margin-bottom: 30px;}
	
    .mainTitle2{ width: 100%; margin-top: 3%; margin-bottom: 5%;}
	.mainTitle3{ width: 90%; padding-top: 5%;}
    .mainTitle4{ width: 70%;display: block; text-align: center; margin: 6% 0 3% 0;  margin: 0 auto;  }
    .mainTitle5{ width: 80%; margin: 0 auto;}


    
    .areaBgBao{ background-position: top center; background-repeat: no-repeat;}

    .header1{ position: absolute; top: 85%; width: 90%; left:5%; text !important; z-index: 1;}


    /* bg */
    .areaBg1{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg1.png"); background-attachment: fixed; background-size: 100%;}
    .areaBg2{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg2.png"); background-attachment: fixed; background-size: 100%;}
    .areaBg3{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg3.png"); background-attachment: fixed; background-size: 100%;}
    .areaBg4{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg4.png"); background-attachment: fixed; background-size: 100%;}
    .areaBg5{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg5.png"); background-attachment: fixed; background-size: 100%;}
    .areaBg6{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg6.png"); background-attachment: fixed; background-size: 100%;}


    /*--area1--------------------------------*/
    .area1_content{ width: 85%;}
    .area_item01{ width: 90%;}

    /*--area3--------------------------------*/
    .area3Btn{ display: flex; flex-wrap: nowrap; justify-content: center; width: 100%; margin: 0 auto;  margin-top: 3%; margin-bottom: 3%;}    
    .area3Btn_2 li{ width: 80%; margin: 0 auto; margin-bottom: 3%;}


    /*--area4--------------------------------*/ 
    .area4Item{ display: flex; flex-wrap: wrap; justify-content: center;  margin-top: 0px;}
    .area4Item_m { display: none;}
    .hover a{ display: block; transition: 0.4s;}
    .hover a:hover{ transform: scale(0.9);}/*滑入縮小*/

    /*--area5--------------------------------*/
    .area5Books { width: 70%;}
    .area5Info { width: 70%;}

    .btnList{ margin: 0 auto; width: 100%;}
    .pic_btn a{ display: block; width: 50%;}
    .pic_btn{ position: absolute;  display: block; top: 13%;left: 69%;}

   
    /*--area6--------------------------------*/
    .area6Content2 { display: none;}
    .area6Content { display: block;}
    .area6Btn { display: flex; flex-wrap: wrap;}
    .area6Btn2 li{ width: 50%; margin: 0 auto; }
    .area6Btn2 li a{ display: block; transition: 0.4s;}
    .area6Btn2 li a:hover{ transform: scale(0.9);}/*滑入縮小*/
    
	/*--gameInfo--------------------------------*/
    .gameInfo li{ margin: 5px; list-style: disc;}
    .gameInfo li a{ color: #ffffff; text-decoration: underline;}
	.noticeBg{ padding: 2% 4%; width: 80%; margin: 0 auto;}

    /*--切換頁--------------------------------*/ 
    .tabCon1{ background-color: #533026; opacity: 0.88; border-radius: 3%;}
    .tabCon2{ background-color: #e7cdb6; opacity: 0.88; border-radius: 3%;}
    .tabBox_pc{ display: block;}
    .tabBox_mb{display: none;}
    .tabBox{ display: flex; max-width: 1300px; padding-top: 8%;}
    .bookItem{ position: relative; width: 70%;}

        
    /* 影片 */
    .videoGroup{ margin-top: 3%; margin-bottom: -3%;}
    .videoGroup li{ margin-bottom: 15%;}
  
    /*頁籤*/
    .tabMenu{ display: block; flex-shrink: 0; width: 25%;}
    .tabMenu img{ width: 100%;}


    .book22{ flex-wrap: wrap; justify-content: center; padding: 0px 0px 0px 0px; margin-top: 0px; border-radius: 10px; display: flex;}
    .book22 li{ width: 25%; padding: 0px 0px 0px 0px; display: block;}
	

    

    /*--hover animate--------------------------------*/
    @-webkit-keyframes hoverAni { from {transform:translateY(0);} to {transform:translateY(-10px);}}
    @-moz-keyframes hoverAni { from {transform:translateY(0);} to {transform:translateY(-10px);}}

    /*area3*/.bestSellerList li:hover{ transform: translateY(-10px);transition: 0.5s}
}

/*--768-1024(Pad) 20240508 pad版要放在電腦版下面才對------------------------*/
@media screen and (min-width:768px) and (max-width:1024px) {
    .areaBg1{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg1.png"); background-position: top center; background-size: 160%;}
    .areaBg2{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg2.png"); background-position: top center; background-size: 160%;}
    .areaBg3{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg3.png"); background-position: top center; background-size: 160%;}
    .areaBg4{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg4.png"); background-position: top center; background-size: 160%;}
    .areaBg5{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg5.png"); background-position: top center; background-size: 160%;}
    .areaBg6{ background-image: url("https://cp-img.bookwalker.com.tw/event/2025/20250909_asa_aut/images/bg6.png"); background-position: top center; background-size: 160%;}

     /* 切換區 ------------------------*/
     .tabBox_pc{ display: block;}
     .tabBox { display: flex; flex-wrap: wrap; width:100%; max-width: 100%; box-sizing: border-box; }
     .tabMenu{ display: none;}
     .tabBox_mb img{ text-align: center; margin: 0 auto; width: 100%;}
     .bookItem{ position: relative;}
}